foundation-rails 5.3.1.0 → 5.3.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. data/bower.json +2 -2
  2. data/lib/foundation/rails/version.rb +1 -1
  3. data/vendor/assets/_settings.scss +24 -7
  4. data/vendor/assets/javascripts/foundation/foundation.abide.js +23 -28
  5. data/vendor/assets/javascripts/foundation/foundation.accordion.js +5 -5
  6. data/vendor/assets/javascripts/foundation/foundation.alert.js +1 -1
  7. data/vendor/assets/javascripts/foundation/foundation.clearing.js +9 -1
  8. data/vendor/assets/javascripts/foundation/foundation.dropdown.js +2 -2
  9. data/vendor/assets/javascripts/foundation/foundation.equalizer.js +1 -1
  10. data/vendor/assets/javascripts/foundation/foundation.interchange.js +1 -1
  11. data/vendor/assets/javascripts/foundation/foundation.joyride.js +55 -15
  12. data/vendor/assets/javascripts/foundation/foundation.magellan.js +12 -5
  13. data/vendor/assets/javascripts/foundation/foundation.offcanvas.js +2 -2
  14. data/vendor/assets/javascripts/foundation/foundation.orbit.js +19 -19
  15. data/vendor/assets/javascripts/foundation/foundation.reveal.js +3 -3
  16. data/vendor/assets/javascripts/foundation/foundation.slider.js +1 -1
  17. data/vendor/assets/javascripts/foundation/foundation.tab.js +1 -1
  18. data/vendor/assets/javascripts/foundation/foundation.tooltip.js +2 -2
  19. data/vendor/assets/javascripts/foundation/foundation.topbar.js +11 -4
  20. data/vendor/assets/stylesheets/foundation.scss +38 -39
  21. data/vendor/assets/stylesheets/foundation/_settings.scss +24 -7
  22. data/vendor/assets/stylesheets/foundation/components/_buttons.scss +52 -29
  23. data/vendor/assets/stylesheets/foundation/components/_dropdown.scss +20 -20
  24. data/vendor/assets/stylesheets/foundation/components/_forms.scss +43 -2
  25. data/vendor/assets/stylesheets/foundation/components/_global.scss +2 -2
  26. data/vendor/assets/stylesheets/foundation/components/_icon-bar.scss +0 -1
  27. data/vendor/assets/stylesheets/foundation/components/_joyride.scss +3 -1
  28. data/vendor/assets/stylesheets/foundation/components/_offcanvas.scss +4 -7
  29. data/vendor/assets/stylesheets/foundation/components/_reveal.scss +25 -27
  30. data/vendor/assets/stylesheets/foundation/components/_switches.scss +3 -3
  31. data/vendor/assets/stylesheets/foundation/components/_tables.scss +4 -0
  32. data/vendor/assets/stylesheets/foundation/components/_tabs.scss +4 -1
  33. data/vendor/assets/stylesheets/foundation/components/_thumbs.scss +0 -2
  34. data/vendor/assets/stylesheets/foundation/components/_toolbar.scss +3 -0
  35. data/vendor/assets/stylesheets/foundation/components/_top-bar.scss +7 -6
  36. data/vendor/assets/stylesheets/foundation/components/_type.scss +12 -2
  37. metadata +29 -14
  38. checksums.yaml +0 -7
  39. data/vendor/assets/stylesheets/foundation/components/_reveal-new.scss +0 -0
@@ -36,17 +36,23 @@ $button-function-factor: -20% !default;
36
36
  // We use these to control button border styles.
37
37
  $button-border-width: 0px !default;
38
38
  $button-border-style: solid !default;
39
- $button-bg: $primary-color !default;
40
- $button-border-color: scale-color($button-bg, $lightness: $button-function-factor) !default;
41
- $button-hover-color: scale-color($button-bg, $lightness: $button-function-factor) !default;
42
-
39
+ $button-bg-color: $primary-color !default;
40
+ $button-bg-hover: scale-color($button-bg-color, $lightness: $button-function-factor) !default;
41
+ $button-border-color: $button-bg-hover !default;
42
+ $secondary-button-bg-hover: scale-color($secondary-color, $lightness: $button-function-factor) !default;
43
+ $secondary-button-border-color: $secondary-button-bg-hover !default;
44
+ $success-button-bg-hover: scale-color($success-color, $lightness: $button-function-factor) !default;
45
+ $success-button-border-color: $success-button-bg-hover !default;
46
+ $alert-button-bg-hover: scale-color($alert-color, $lightness: $button-function-factor) !default;
47
+ $alert-button-border-color: $alert-button-bg-hover !default;
43
48
 
44
49
  // We use this to set the default radius used throughout the core.
45
50
  $button-radius: $global-radius !default;
46
51
  $button-round: $global-rounded !default;
47
52
 
48
- // We use this to set default opacity for disabled buttons.
53
+ // We use this to set default opacity and cursor for disabled buttons.
49
54
  $button-disabled-opacity: 0.7 !default;
55
+ $button-disabled-cursor: $cursor-default-value !default;
50
56
 
51
57
 
52
58
  //
@@ -115,44 +121,54 @@ $button-disabled-opacity: 0.7 !default;
115
121
  }
116
122
  }
117
123
 
124
+ // @MIXIN
125
+ //
126
+ // we use this mixin to create the button hover and border colors
127
+
118
128
  // @MIXIN
119
129
  //
120
130
  // We use this mixin to add button color styles
121
131
  //
122
132
  // $bg - Primary color set in settings file. Default: $button-bg.
123
- // $bc - Button Border Color. Default: $button-border-color
124
- // $bh - Button Hover Color. Default: $button-hover-color
125
133
  // $radius - If true, set to button radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default: true
126
134
  // $disabled - We can set $disabled:true to create a disabled transparent button. Default: false
127
- @mixin button-style($bg:$button-bg, $radius:false, $disabled:false, $bc:$button-border-color, $bh:$button-hover-color) {
135
+ // $bg-hover - Button Hover Background Color. Default: $button-bg-hover
136
+ // $border-color - Button Border Color. Default: $button-border-color
137
+ @mixin button-style($bg:$button-bg-color, $radius:false, $disabled:false, $bg-hover:null, $border-color:null) {
128
138
 
129
139
  // We control which background styles are used,
130
140
  // these can be removed by setting $bg:false
131
141
  @if $bg {
142
+
143
+ @if $bg-hover == null {
144
+ $bg-hover: if($bg == $button-bg-color, $button-bg-hover, scale-color($bg, $lightness: $button-function-factor));
145
+ }
146
+
147
+ @if $border-color == null {
148
+ $border-color: if($bg == $button-bg-color, $button-border-color, scale-color($bg, $lightness: $button-function-factor));
149
+ }
150
+
132
151
  // This find the lightness percentage of the background color.
133
152
  $bg-lightness: lightness($bg);
153
+ $bg-hover-lightness: lightness($bg-hover);
134
154
 
135
155
  background-color: $bg;
136
- border-color: $bc;
156
+ border-color: $border-color;
137
157
  &:hover,
138
- &:focus { background-color: $bh; }
158
+ &:focus { background-color: $bg-hover; }
139
159
 
140
160
  // We control the text color for you based on the background color.
141
- @if $bg-lightness > 70% {
142
- color: $button-font-color-alt;
143
- &:hover,
144
- &:focus { color: $button-font-color-alt; }
145
- }
146
- @else {
147
- color: $button-font-color;
148
- &:hover,
149
- &:focus { color: $button-font-color; }
161
+ color: if($bg-lightness > 70%, $button-font-color-alt, $button-font-color);
162
+
163
+ &:hover,
164
+ &:focus {
165
+ color: if($bg-hover-lightness > 70%, $button-font-color-alt, $button-font-color);
150
166
  }
151
167
  }
152
168
 
153
169
  // We can set $disabled:true to create a disabled transparent button.
154
170
  @if $disabled {
155
- cursor: $cursor-default-value;
171
+ cursor: $button-disabled-cursor;
156
172
  opacity: $button-disabled-opacity;
157
173
  box-shadow: none;
158
174
  &:hover,
@@ -176,10 +192,17 @@ $button-disabled-opacity: 0.7 !default;
176
192
  // $disabled - We can set $disabled:true to create a disabled transparent button. Default:false.
177
193
  // $is-input - <input>'s and <button>'s take on strange padding. We added this to help fix that. Default:false.
178
194
  // $is-prefix - Not used? Default:false.
179
- @mixin button($padding:$button-med, $bg:$button-bg, $radius:false, $full-width:false, $disabled:false, $is-prefix:false) {
195
+ // $bg-hover - Button Hover Color - Default null - see button-style mixin
196
+ // $border-color - Button Border Color - Default null - see button-style mixin
197
+ // $transition - We can control whether or not to include the background-color transition property - Default:true.
198
+ @mixin button($padding:$button-med, $bg:$button-bg-color, $radius:false, $full-width:false, $disabled:false, $is-input:false, $is-prefix:false, $bg-hover:null, $border-color:null, $transition: true) {
180
199
  @include button-base;
181
200
  @include button-size($padding, $full-width);
182
- @include button-style($bg, $radius, $disabled);
201
+ @include button-style($bg, $radius, $disabled, $bg-hover, $border-color);
202
+
203
+ @if $transition {
204
+ @include single-transition(background-color);
205
+ }
183
206
  }
184
207
 
185
208
 
@@ -194,9 +217,9 @@ $button-disabled-opacity: 0.7 !default;
194
217
 
195
218
  @include single-transition(background-color);
196
219
 
197
- &.secondary { @include button-style($bg:$secondary-color); }
198
- &.success { @include button-style($bg:$success-color); }
199
- &.alert { @include button-style($bg:$alert-color); }
220
+ &.secondary { @include button-style($bg:$secondary-color, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color); }
221
+ &.success { @include button-style($bg:$success-color, $bg-hover:$success-button-bg-hover, $border-color:$success-button-border-color); }
222
+ &.alert { @include button-style($bg:$alert-color, $bg-hover:$alert-button-bg-hover, $border-color:$alert-button-border-color); }
200
223
 
201
224
  &.large { @include button-size($padding:$button-lrg); }
202
225
  &.small { @include button-size($padding:$button-sml); }
@@ -209,10 +232,10 @@ $button-disabled-opacity: 0.7 !default;
209
232
  &.radius { @include button-style($bg:false, $radius:true); }
210
233
  &.round { @include button-style($bg:false, $radius:$button-round); }
211
234
 
212
- &.disabled, &[disabled] { @include button-style($bg:$button-bg, $disabled:true);
213
- &.secondary { @include button-style($bg:$secondary-color, $disabled:true); }
214
- &.success { @include button-style($bg:$success-color, $disabled:true); }
215
- &.alert { @include button-style($bg:$alert-color, $disabled:true); }
235
+ &.disabled, &[disabled] { @include button-style($bg:$button-bg-color, $disabled:true, $bg-hover:$button-bg-hover, $border-color:$button-border-color);
236
+ &.secondary { @include button-style($bg:$secondary-color, $disabled:true, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color); }
237
+ &.success { @include button-style($bg:$success-color, $disabled:true, $bg-hover:$success-button-bg-hover, $border-color:$success-button-border-color); }
238
+ &.alert { @include button-style($bg:$alert-color, $disabled:true, $bg-hover:$alert-button-bg-hover, $border-color:$alert-button-border-color); }
216
239
  }
217
240
  }
218
241
 
@@ -108,28 +108,28 @@ $f-dropdown-content-padding: rem-calc(20) !default;
108
108
  }
109
109
 
110
110
  &.right:before {
111
- left: auto;
112
- right: $f-dropdown-triangle-side-offset;
111
+ #{$default-float}: auto;
112
+ #{$opposite-direction}: $f-dropdown-triangle-side-offset;
113
113
  }
114
114
  &.right:after {
115
- left: auto;
116
- right: $f-dropdown-triangle-side-offset - 1;
115
+ #{$default-float}: auto;
116
+ #{$opposite-direction}: $f-dropdown-triangle-side-offset - 1;
117
117
  }
118
118
  }
119
119
 
120
- @if $triangle == left {
120
+ @if $triangle == #{$default-float} {
121
121
  margin-top: 0;
122
- margin-left: $f-dropdown-margin-right;
122
+ margin-#{$default-float}: $f-dropdown-margin-right;
123
123
 
124
124
  &:before {
125
- @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, right);
125
+ @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, #{$opposite-direction});
126
126
  position: absolute;
127
127
  top: $f-dropdown-triangle-side-offset;
128
128
  #{$default-float}: -($f-dropdown-triangle-size * 2);
129
129
  z-index: 99;
130
130
  }
131
131
  &:after {
132
- @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, right);
132
+ @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, #{$opposite-direction});
133
133
  position: absolute;
134
134
  top: $f-dropdown-triangle-side-offset - 1;
135
135
  #{$default-float}: -($f-dropdown-triangle-size * 2) - 2;
@@ -138,24 +138,24 @@ $f-dropdown-content-padding: rem-calc(20) !default;
138
138
 
139
139
  }
140
140
 
141
- @if $triangle == right {
141
+ @if $triangle == #{$opposite-direction} {
142
142
  margin-top: 0;
143
- margin-left: -$f-dropdown-margin-right;
143
+ margin-#{$default-float}: -$f-dropdown-margin-right;
144
144
 
145
145
  &:before {
146
- @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, left);
146
+ @include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, #{$default-float});
147
147
  position: absolute;
148
148
  top: $f-dropdown-triangle-side-offset;
149
149
  #{$opposite-direction}: -($f-dropdown-triangle-size * 2);
150
- left: auto;
150
+ #{$default-float}: auto;
151
151
  z-index: 99;
152
152
  }
153
153
  &:after {
154
- @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, left);
154
+ @include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, #{$default-float});
155
155
  position: absolute;
156
156
  top: $f-dropdown-triangle-side-offset - 1;
157
157
  #{$opposite-direction}: -($f-dropdown-triangle-size * 2) - 2;
158
- left: auto;
158
+ #{$default-float}: auto;
159
159
  z-index: 98;
160
160
  }
161
161
 
@@ -171,7 +171,7 @@ $f-dropdown-content-padding: rem-calc(20) !default;
171
171
  top: auto;
172
172
  bottom: -($f-dropdown-triangle-size * 2);
173
173
  #{$default-float}: $f-dropdown-triangle-side-offset;
174
- right: auto;
174
+ #{$opposite-direction}: auto;
175
175
  z-index: 99;
176
176
  }
177
177
  &:after {
@@ -180,7 +180,7 @@ $f-dropdown-content-padding: rem-calc(20) !default;
180
180
  top: auto;
181
181
  bottom: -($f-dropdown-triangle-size * 2) - 2;
182
182
  #{$default-float}: $f-dropdown-triangle-side-offset - 1;
183
- right: auto;
183
+ #{$opposite-direction}: auto;
184
184
  z-index: 98;
185
185
  }
186
186
 
@@ -219,12 +219,12 @@ $f-dropdown-content-padding: rem-calc(20) !default;
219
219
  .f-dropdown {
220
220
  @include dropdown-container(list, bottom);
221
221
 
222
- &.drop-right {
223
- @include dropdown-container(list, left);
222
+ &.drop-#{$opposite-direction} {
223
+ @include dropdown-container(list, #{$default-float});
224
224
  }
225
225
 
226
- &.drop-left {
227
- @include dropdown-container(list, right);
226
+ &.drop-#{$default-float} {
227
+ @include dropdown-container(list, #{$opposite-direction});
228
228
  }
229
229
 
230
230
  &.drop-top {
@@ -32,6 +32,7 @@ $input-border-style: solid !default;
32
32
  $input-border-width: 1px !default;
33
33
  $input-border-radius: $global-radius !default;
34
34
  $input-disabled-bg: #ddd !default;
35
+ $input-disabled-cursor: $cursor-default-value !default;
35
36
  $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !default;
36
37
  $input-include-glowing-effect: true !default;
37
38
 
@@ -56,6 +57,9 @@ $input-prefix-overflow: hidden !default;
56
57
  $input-prefix-font-color: #333 !default;
57
58
  $input-prefix-font-color-alt: #fff !default;
58
59
 
60
+ // We use this setting to turn on/off HTML5 number spinners (the up/down arrows)
61
+ $input-number-spinners: true !default;
62
+
59
63
  // We use these to style the error states for inputs and labels
60
64
  $input-error-message-padding: rem-calc(6 9 9) !default;
61
65
  $input-error-message-top: -1px !default;
@@ -126,9 +130,19 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
126
130
  border-color: $input-focus-border-color;
127
131
  outline: none;
128
132
  }
133
+ // Disbaled Styles
134
+ &:disabled {
135
+ background-color: $input-disabled-bg;
136
+ cursor: $input-disabled-cursor;
137
+ }
129
138
 
130
139
  // Disabled background input background color
131
- &[disabled], &[readonly], fieldset[disabled] & { background-color: $input-disabled-bg; }
140
+ &[disabled],
141
+ &[readonly],
142
+ fieldset[disabled] & {
143
+ background-color: $input-disabled-bg;
144
+ cursor: $input-disabled-cursor;
145
+ }
132
146
  }
133
147
 
134
148
  // @MIXIN
@@ -327,6 +341,23 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
327
341
  background-color: $select-hover-bg-color;
328
342
  border-color: $input-focus-border-color;
329
343
  }
344
+ // Disbaled Styles
345
+ &:disabled {
346
+ background-color: $input-disabled-bg;
347
+ cursor: $input-disabled-cursor;
348
+ }
349
+ }
350
+
351
+ // We use this mixin to turn on/off HTML5 number spinners
352
+ @mixin html5number($browser, $on:true) {
353
+ @if $on==false {
354
+ @if $browser==webkit {
355
+ -webkit-appearance: none;
356
+ margin: 0;
357
+ } @else if $browser==moz {
358
+ -moz-appearance: textfield;
359
+ }
360
+ }
330
361
  }
331
362
 
332
363
  @include exports("form") {
@@ -437,6 +468,15 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
437
468
  width:100%;
438
469
  }
439
470
 
471
+ /* HTML5 Number spinners settings */
472
+ input[type=number] {
473
+ @include html5number(moz, $input-number-spinners)
474
+ }
475
+ input[type="number"]::-webkit-inner-spin-button,
476
+ input[type="number"]::-webkit-outer-spin-button {
477
+ @include html5number(webkit, $input-number-spinners);
478
+ }
479
+
440
480
  /* We add basic fieldset styling */
441
481
  fieldset {
442
482
  @include fieldset;
@@ -495,7 +535,8 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
495
535
  }
496
536
 
497
537
  input.error,
498
- textarea.error {
538
+ textarea.error,
539
+ select.error {
499
540
  margin-bottom: 0;
500
541
  }
501
542
  label.error { @include form-label-error-color; }
@@ -314,7 +314,7 @@ $cursor-text-value: text !default;
314
314
  // Forward slash placed around everything to convince PhantomJS to read the value.
315
315
 
316
316
  meta.foundation-version {
317
- font-family: "/5.3.1/";
317
+ font-family: "/5.3.3/";
318
318
  }
319
319
 
320
320
  meta.foundation-mq-small {
@@ -370,7 +370,7 @@ $cursor-text-value: text !default;
370
370
  font-family: $body-font-family;
371
371
  font-weight: $body-font-weight;
372
372
  font-style: $body-font-style;
373
- line-height: 1; // Set to $base-line-height to take on browser default of 150%
373
+ line-height: $base-line-height; // Set to $base-line-height to take on browser default of 150%
374
374
  position: relative;
375
375
  cursor: $cursor-default-value;
376
376
  }
@@ -165,7 +165,6 @@ $icon-bar-item-padding: 1.25rem !default;
165
165
  }
166
166
 
167
167
  // We use this to quickly create icon bars with a single mixin
168
- //
169
168
  // $height – The overall calculated height of the icon bar (horizontal)
170
169
  // $bar-bg – the background color of the bar
171
170
  // $bar-font-color – the font color
@@ -39,7 +39,7 @@ $joyride-tip-close-weight: $font-weight-normal !default;
39
39
  $joyride-screenfill: rgba(0,0,0,0.5) !default;
40
40
 
41
41
 
42
- // We decided not to make a mixin for this because it relies on
42
+ // We decided not to make a mixin for this because it relies on
43
43
  // predefined classes to work properly.
44
44
  @include exports("joyride") {
45
45
  @if $include-html-joyride-classes {
@@ -73,6 +73,8 @@ $joyride-screenfill: rgba(0,0,0,0.5) !default;
73
73
  padding: $joyride-tip-padding;
74
74
 
75
75
  .button { margin-bottom: 0 !important; }
76
+
77
+ .joyride-prev-tip { margin-right: 10px; }
76
78
  }
77
79
 
78
80
  /* Add a little css triangle pip, older browser just miss out on the fanciness of it */
@@ -107,11 +107,11 @@ $menu-slide: "transform 500ms ease" !default;
107
107
  transition: transform 500ms ease 0s;
108
108
  -webkit-overflow-scrolling: touch;
109
109
  @if $position == left {
110
- @include translate3d(-100%,0,0);
110
+ @include translate3d(-100.5%,0,0);
111
111
  left: 0;
112
112
  }
113
113
  @if $position == right {
114
- @include translate3d(100%,0,0);
114
+ @include translate3d(100.5%,0,0);
115
115
  right: 0;
116
116
  }
117
117
  }
@@ -150,7 +150,7 @@ $menu-slide: "transform 500ms ease" !default;
150
150
  height: $tabbar-height;
151
151
  line-height: $tabbar-line-height;
152
152
 
153
- // make sure it's below the .exit-offcanvas link
153
+ // make sure it's below the .exit-off-canvas link
154
154
  position: relative;
155
155
  // z-index: 999;
156
156
 
@@ -338,10 +338,7 @@ $menu-slide: "transform 500ms ease" !default;
338
338
  transform: none;
339
339
  z-index: 1003;
340
340
  }
341
- .exit-offcanvas-menu {
342
- @include back-link;
343
- z-index: 1002;
344
- }
341
+ .exit-off-canvas { @include back-link; }
345
342
  }
346
343
 
347
344
  // Older browsers
@@ -52,7 +52,7 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
52
52
  width: 100%;
53
53
  background: $reveal-overlay-bg-old;
54
54
  background: $reveal-overlay-bg;
55
- z-index: 99;
55
+ z-index: 1004;
56
56
  display: none;
57
57
  top: 0;
58
58
  #{$default-float}: 0;
@@ -70,7 +70,7 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
70
70
  visibility: hidden;
71
71
  display: none;
72
72
  position: absolute;
73
- z-index: 100;
73
+ z-index: 1005;
74
74
  width: 100vw;
75
75
  top:0;
76
76
  #{$default-float}: 0;
@@ -179,32 +179,30 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
179
179
  visibility: visible;
180
180
  }
181
181
 
182
- @media #{$medium-up} {
183
-
184
- dialog, .#{$reveal-modal-class} {
185
- @include reveal-modal-style($padding:$reveal-modal-padding * 1.5);
186
-
187
- &.radius { @include reveal-modal-style($radius:true); }
188
- &.round { @include reveal-modal-style($radius:$reveal-round); }
189
-
190
- &.collapse { @include reveal-modal-style($padding:0); }
191
-
192
- &.tiny { @include reveal-modal-base(false, 30%); }
193
- &.small { @include reveal-modal-base(false, 40%); }
194
- &.medium { @include reveal-modal-base(false, 60%); }
195
- &.large { @include reveal-modal-base(false, 70%); }
196
- &.xlarge { @include reveal-modal-base(false, 95%); }
197
- }
182
+ dialog, .#{$reveal-modal-class} {
183
+ @include reveal-modal-style($padding:$reveal-modal-padding * 1.5);
184
+
185
+ &.radius { @include reveal-modal-style($radius:true); }
186
+ &.round { @include reveal-modal-style($radius:$reveal-round); }
187
+
188
+ &.collapse { @include reveal-modal-style($padding:0); }
189
+
190
+ &.tiny { @include reveal-modal-base(false, 30%); }
191
+ &.small { @include reveal-modal-base(false, 40%); }
192
+ &.medium { @include reveal-modal-base(false, 60%); }
193
+ &.large { @include reveal-modal-base(false, 70%); }
194
+ &.xlarge { @include reveal-modal-base(false, 95%); }
195
+ }
198
196
 
199
- dialog, .#{$reveal-modal-class} {
200
- &.full {
201
- @include reveal-modal-base(false, 100vw);
202
- top:0;
203
- left:0;
204
- height: 100vh;
205
- min-height:100vh;
206
- margin-left: 0 !important;
207
- }
197
+ dialog, .#{$reveal-modal-class} {
198
+ &.full {
199
+ @include reveal-modal-base(false, 100vw);
200
+ top:0;
201
+ left:0;
202
+ height:100%;
203
+ height: 100vh;
204
+ min-height:100vh;
205
+ margin-left: 0 !important;
208
206
  }
209
207
  }
210
208