From 201078cebb347a96f4c7c3445175b522a0c70545 Mon Sep 17 00:00:00 2001 From: Joe Workman Date: Fri, 14 Mar 2014 19:12:42 -0700 Subject: [PATCH] Refactored the reveal-modal-style mixin 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 | 30 +++++++++++++++---------- 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/scss/foundation/components/_reveal.scss b/scss/foundation/components/_reveal.scss index c67fb44b6..ef120ae8d 100644 --- a/scss/foundation/components/_reveal.scss +++ b/scss/foundation/components/_reveal.scss @@ -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%); } -- 2.47.2