_dropdown-buttons.scss in foundation-rails-5.5.0.0

- old
+ new

@@ -20,29 +20,29 @@
 
 // We use these to style tiny dropdown buttons
 $dropdown-button-padding-tny: $button-pip-tny * 7 !default;
 $dropdown-button-pip-size-tny: $button-pip-tny !default;
 $dropdown-button-pip-opposite-tny: $button-pip-tny * 3 !default;
-$dropdown-button-pip-top-tny: -$button-pip-tny / 2 + rem-calc(1) !default;
+$dropdown-button-pip-top-tny: (-$button-pip-tny / 2) + rem-calc(1) !default;
 
 // We use these to style small dropdown buttons
 $dropdown-button-padding-sml: $button-pip-sml * 7 !default;
 $dropdown-button-pip-size-sml: $button-pip-sml !default;
 $dropdown-button-pip-opposite-sml: $button-pip-sml * 3 !default;
-$dropdown-button-pip-top-sml: -$button-pip-sml / 2 + rem-calc(1) !default;
+$dropdown-button-pip-top-sml: (-$button-pip-sml / 2) + rem-calc(1) !default;
 
 // We use these to style medium dropdown buttons
 $dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3) !default;
 $dropdown-button-pip-size-med: $button-pip-med - rem-calc(3) !default;
 $dropdown-button-pip-opposite-med: $button-pip-med * 2.5 !default;
-$dropdown-button-pip-top-med: -$button-pip-med / 2 + rem-calc(2) !default;
+$dropdown-button-pip-top-med: (-$button-pip-med / 2) + rem-calc(2) !default;
 
 // We use these to style large dropdown buttons
 $dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3) !default;
 $dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6) !default;
 $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5 !default;
-$dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3) !default;
+$dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default;
 
 // @mixins
 //
 // Dropdown Button Mixin
 //
@@ -55,13 +55,14 @@
 @mixin dropdown-button($padding:medium, $pip-color:$white, $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 {
+    &::after {
       position: absolute;
       content: "";
       width: 0;
       height: 0;
       display: block;
@@ -72,49 +73,49 @@
   }
 
   // If we're dealing with tiny buttons, use these styles
   @if $padding == tiny {
     padding-#{$opposite-direction}: $dropdown-button-padding-tny;
-    &:before {
+    &:after {
       border-width: $dropdown-button-pip-size-tny;
       #{$opposite-direction}: $dropdown-button-pip-opposite-tny;
       margin-top: $dropdown-button-pip-top-tny;
     }
   }
 
   // If we're dealing with small buttons, use these styles
   @if $padding == small {
     padding-#{$opposite-direction}: $dropdown-button-padding-sml;
-    &:after {
+    &::after {
       border-width: $dropdown-button-pip-size-sml;
       #{$opposite-direction}: $dropdown-button-pip-opposite-sml;
       margin-top: $dropdown-button-pip-top-sml;
     }
   }
 
   // If we're dealing with default (medium) buttons, use these styles
   @if $padding == medium {
     padding-#{$opposite-direction}: $dropdown-button-padding-med;
-    &:after {
+    &::after {
       border-width: $dropdown-button-pip-size-med;
       #{$opposite-direction}: $dropdown-button-pip-opposite-med;
       margin-top: $dropdown-button-pip-top-med;
     }
   }
 
   // If we're dealing with large buttons, use these styles
   @if $padding == large {
     padding-#{$opposite-direction}: $dropdown-button-padding-lrg;
-    &:after {
+    &::after {
       border-width: $dropdown-button-pip-size-lrg;
       #{$opposite-direction}: $dropdown-button-pip-opposite-lrg;
       margin-top: $dropdown-button-pip-top-lrg;
     }
   }
 
   // We can control the pip color. We didn't use logic in this case, just set it and forget it.
   @if $pip-color {
-    &:after { border-color: $pip-color transparent transparent transparent; }
+    &::after { border-color: $pip-color transparent transparent transparent; }
   }
 }
 
 @include exports("dropdown-button") {
   @if $include-html-button-classes {