1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
|
// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
@import "global";
//
// @name _reveal.scss
// @dependencies _global.scss
//
$include-html-reveal-classes: $include-html-classes !default;
// We use these to control the style of the reveal overlay.
$reveal-overlay-bg: rgba($black, .45) !default;
$reveal-overlay-bg-old: $black !default;
// We use these to control the style of the modal itself.
$reveal-modal-bg: $white !default;
$reveal-position-top: rem-calc(100) !default;
$reveal-default-width: 80% !default;
$reveal-max-width: $row-width !default;
$reveal-modal-padding: rem-calc(20) !default;
$reveal-box-shadow: 0 0 10px rgba($black,.4) !default;
// We use these to style the reveal close button
$reveal-close-font-size: rem-calc(40) !default;
$reveal-close-top: rem-calc(8) !default;
$reveal-close-side: rem-calc(11) !default;
$reveal-close-color: $base !default;
$reveal-close-weight: $font-weight-bold !default;
// We use this to set the default radius used throughout the core.
$reveal-radius: $global-radius !default;
$reveal-round: $global-rounded !default;
// We use these to control the modal border
$reveal-border-style: solid !default;
$reveal-border-width: 1px !default;
$reveal-border-color: $steel !default;
$reveal-modal-class: "reveal-modal" !default;
$close-reveal-modal-class: "close-reveal-modal" !default;
//
// @mixins
//
// We use this to create the reveal background overlay styles
@mixin reveal-bg( $include-z-index-value: true ) {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: $reveal-overlay-bg-old; // Autoprefixer should be used to avoid such variables needed when Foundation for Sites can do so in the near future.
background: $reveal-overlay-bg;
z-index: if( $include-z-index-value, 1004, auto );
display: none;
#{$default-float}: 0;
}
// We use this mixin to create the structure of a reveal modal
//
// $base-style - Provides reveal base styles, can be set to false to override. Default: true, Options: false
// $width - Sets reveal width Default: $reveal-default-width || 80%
//
@mixin reveal-modal-base( $base-style: true, $width:$reveal-default-width, $max-width:$reveal-max-width, $border-radius: $reveal-radius) {
@if $base-style {
visibility: hidden;
display: none;
position: absolute;
z-index: 1005;
width: 100vw;
top:0;
border-radius: $border-radius;
#{$default-float}: 0;
@media #{$small-only} {
min-height:100vh;
}
// Make sure rows don't have a min-width on them
.column, .columns { min-width: 0; }
// Get rid of margin from first and last element inside modal
& > :first-child { margin-top: 0; }
& > :last-child { margin-bottom: 0; }
}
@if $width {
@media #{$medium-up} {
width: $width;
max-width: $max-width;
left: 0;
right: 0;
margin: 0 auto;
}
}
}
// We use this to style the reveal modal defaults
//
// $bg - Sets background color of reveal modal. Default: $reveal-modal-bg || $white
// $padding - Padding to apply to reveal modal. Default: $reveal-modal-padding.
// $border - Choose whether reveal uses a border. Default: true, Options: false
// $border-style - Set reveal border style. Default: $reveal-border-style || solid
// $border-width - Width of border (i.e. 1px). Default: $reveal-border-width.
// $border-color - Color of border. Default: $reveal-border-color.
// $box-shadow - Choose whether or not to include the default box-shadow. Default: true, Options: false
// $radius - If true, set to modal radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default: false
// $top-offset - Default: $reveal-position-top || 50px
@mixin reveal-modal-style(
$bg:false,
$padding:false,
$border:false,
$border-style:$reveal-border-style,
$border-width:$reveal-border-width,
$border-color:$reveal-border-color,
$box-shadow:false,
$radius:false,
$top-offset:false) {
@if $bg { background-color: $bg; }
@if $padding != false { padding: $padding; }
@if $border { border: $border-style $border-width $border-color; }
// We can choose whether or not to include the default box-shadow.
@if $box-shadow {
box-shadow: $reveal-box-shadow;
}
// We can control how much radius is used on the modal
@if $radius == true { @include radius($reveal-radius); }
@else if $radius { @include radius($radius); }
@if $top-offset {
@media #{$medium-up} {
top: $top-offset;
}
}
}
// We use this to create a close button for the reveal modal
//
// $color - Default: $reveal-close-color || $base
@mixin reveal-close($color:$reveal-close-color) {
font-size: $reveal-close-font-size;
line-height: 1;
position: absolute;
top: $reveal-close-top;
#{$opposite-direction}: $reveal-close-side;
color: $color;
font-weight: $reveal-close-weight;
cursor: $cursor-pointer-value;
}
@include exports("reveal") {
@if $include-html-reveal-classes {
// Reveal Modals
.reveal-modal-bg { @include reveal-bg; }
.#{$reveal-modal-class} {
@include reveal-modal-base;
@include reveal-modal-style(
$bg:$reveal-modal-bg,
$padding:$reveal-modal-padding,
$border:true,
$box-shadow:true,
$radius:false,
$top-offset:$reveal-position-top
);
@include reveal-modal-style($padding:$reveal-modal-padding * 1.5);
&.radius { @include reveal-modal-style($radius:true); }
&.round { @include reveal-modal-style($radius:$reveal-round); }
&.collapse { @include reveal-modal-style($padding:0); }
&.tiny { @include reveal-modal-base(false, 30%); }
&.small { @include reveal-modal-base(false, 40%); }
&.medium { @include reveal-modal-base(false, 60%); }
&.large { @include reveal-modal-base(false, 70%); }
&.xlarge { @include reveal-modal-base(false, 95%); }
&.full {
@include reveal-modal-base(false, 100vw);
top:0;
left:0;
height:100%;
height: 100vh;
min-height:100vh;
margin-left: 0 !important;
}
.#{$close-reveal-modal-class} { @include reveal-close; }
}
dialog {
@extend .#{$reveal-modal-class};
display: none;
&::backdrop, & + .backdrop {
@include reveal-bg(false);
}
&[open]{
display: block;
}
}
// Reveal Print Styles: It should be invisible, adds no value being printed.
@media print {
dialog, .#{$reveal-modal-class} {
display: none;
background: $white !important;
}
}
}
}
|
