]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
Refactored the reveal-modal-style mixin 4696/head
authorJoe Workman <joe@workmanmail.com>
Sat, 15 Mar 2014 02:12:42 +0000 (19:12 -0700)
committerJoe Workman <joe@workmanmail.com>
Sat, 15 Mar 2014 02:12:42 +0000 (19:12 -0700)
The previous version of this mixin required that you define a ton of parameters each time you wanted to apply a style. When the mixin is first called in order to apply the default styles, those default styles are passed as parameters. Therefore in subsequent calls, you are only passing the particular attribute that you want to override.

This new version of the mixing seems to remove a small amount of duplicate styles that were not needed.

I made this a separate commit in case this reflector was not desired but you still wanted to accept the new radius, round and collapse classes.

scss/foundation/components/_reveal.scss

index c67fb44b6b397de7850f028cca2658c5b9f0d351..ef120ae8d897de5cb498337a5fcc2c71b385eeca 100644 (file)
@@ -111,15 +111,15 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
 // $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:$reveal-modal-bg,
-  $padding:$reveal-modal-padding,
-  $border:true,
+  $bg:false,
+  $padding:false,
+  $border:false,
   $border-style:$reveal-border-style,
   $border-width:$reveal-border-width,
   $border-color:$reveal-border-color,
-  $box-shadow:true,
+  $box-shadow:false,
   $radius:false,
-  $top-offset:$reveal-position-top) {
+  $top-offset:false) {
 
   @if $bg { background-color: $bg; }
   @if $padding != false { padding: $padding; }
@@ -167,25 +167,31 @@ $close-reveal-modal-class: "close-reveal-modal" !default;
 
     dialog, .#{$reveal-modal-class} {
       @include reveal-modal-base;
-      @include reveal-modal-style;
+      @include reveal-modal-style(
+        $bg:$reveal-modal-bg,
+        $padding:$reveal-modal-padding,
+        $border:true,
+        $box-shadow:true,
+        $radius:false,
+        $top-offset:$reveal-position-top);
 
       .#{$close-reveal-modal-class} { @include reveal-close; }
     }
 
     dialog[open] {
-       display:block;
-       visibility: visible;
+      display:block;
+      visibility: visible;
     }
 
     @media #{$medium-up} {
 
       dialog, .#{$reveal-modal-class} {
-        @include reveal-modal-style($bg: false, $padding: $reveal-modal-padding * 1.5, $border: false, $box-shadow: false, $top-offset: $reveal-position-top);
+        @include reveal-modal-style($padding:$reveal-modal-padding * 1.5);
 
-        &.radius { @include reveal-modal-style($bg: false, $padding: false, $border: false, $box-shadow: false, $radius: true, $top-offset: false); }
-        &.round  { @include reveal-modal-style($bg: false, $padding: false, $border: false, $box-shadow: false, $radius: $reveal-round, $top-offset: false); }
+        &.radius { @include reveal-modal-style($radius:true); }
+        &.round  { @include reveal-modal-style($radius:$reveal-round); }
         
-        &.collapse { @include reveal-modal-style($bg: false, $padding: 0, $top-offset: false); }
+        &.collapse { @include reveal-modal-style($padding:0); }
 
         &.tiny  { @include reveal-modal-base(false, 30%); }
         &.small { @include reveal-modal-base(false, 40%); }