_dropdown-buttons.scss in foundation-rails-5.5.2.0

- old
+ new

@@ -1,10 +1,10 @@
 // Foundation by ZURB
 // foundation.zurb.com
 // Licensed under MIT Open Source
 
-@import "global";
+@import 'global';
 
 //
 // @variables
 //
 $include-html-button-classes: $include-html-classes !default;
@@ -51,27 +51,26 @@
 //
 // $padding - Determines the size of button you're working with. Default: medium. Options [tiny, small, medium, large]
 // $pip-color - Color of the little triangle that points to the dropdown. Default: $white.
 // $base-style - Add in base-styles. This can be set to false. Default:true
 
-@mixin dropdown-button($padding:medium, $pip-color:$white, $base-style:true) {
+@mixin dropdown-button($padding:medium, $pip-color:$dropdown-button-pip-color, $base-style:true) {
 
   // We add in base styles, but they can be negated by setting to 'false'.
   @if $base-style {
     position: relative;
-    outline: none;
 
     // This creates the base styles for the triangle pip
     &::after {
-      position: absolute;
+      border-color: $dropdown-button-pip-color transparent transparent transparent;
+      border-style: solid;
       content: "";
-      width: 0;
-      height: 0;
       display: block;
-      border-style: solid;
-      border-color: $dropdown-button-pip-color transparent transparent transparent;
+      height: 0;
+      position: absolute;
       top: 50%;
+      width: 0;
     }
   }
 
   // If we're dealing with tiny buttons, use these styles
   @if $padding == tiny {
@@ -120,12 +119,12 @@
 }
 
 @include exports("dropdown-button") {
   @if $include-html-button-classes {
     .dropdown.button, button.dropdown { @include dropdown-button;
-      &.tiny { @include dropdown-button(tiny,$base-style:false); }
-      &.small { @include dropdown-button(small,$base-style:false); }
-      &.large { @include dropdown-button(large,$base-style:false); }
+      &.tiny { @include dropdown-button(tiny, $base-style:false); }
+      &.small { @include dropdown-button(small, $base-style:false); }
+      &.large { @include dropdown-button(large, $base-style:false); }
       &.secondary:after { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; }
     }
   }
 }