fix sass deprecations

foundation · Aug 5, 2024 · c6e31f5 · c6e31f5
1 parent a09bf8e
commit c6e31f5
Show file tree

Hide file tree

Showing 19 changed files with 54 additions and 49 deletions.
diff --git a/scss/_global.scss b/scss/_global.scss
@@ -221,14 +221,14 @@ $global-color-pick-contrast-tolerance: 0 !default;
 
   // Reset <button> styles created by most browsers
   button {
-    @include disable-mouse-outline;
     padding: 0;
     appearance: none;
     border: 0;
     border-radius: $global-radius;
     background: transparent;
     line-height: 1;
     cursor: $global-button-cursor;
+    @include disable-mouse-outline;
   }
 
   // Prevent text overflow on pre

diff --git a/scss/components/_breadcrumbs.scss b/scss/components/_breadcrumbs.scss
@@ -62,10 +62,11 @@ $breadcrumbs-item-separator-color: $medium-gray !default;
 
 /// Adds styles for a breadcrumbs container, along with the styles for the `<li>` and `<a>` elements inside of it.
 @mixin breadcrumbs-container {
-  @include clearfix;
   margin: $breadcrumbs-margin;
   list-style: none;
 
+  @include clearfix;
+
   // Item wrapper
   li {
     float: #{$global-left};

diff --git a/scss/components/_button-group.scss b/scss/components/_button-group.scss
@@ -33,7 +33,6 @@ $buttongroup-radius-on-each: true !default;
   $child-selector: $buttongroup-child-selector,
   $spacing: $buttongroup-spacing
 ) {
-  @include clearfix;
   margin-bottom: $buttongroup-margin;
 
   @if $global-flexbox {
@@ -51,6 +50,8 @@ $buttongroup-radius-on-each: true !default;
     font-size: 0;
   }
 
+  @include clearfix;
+
   #{$child-selector} {
     margin: 0;
     margin-#{$global-right}: $spacing;

diff --git a/scss/components/_button.scss b/scss/components/_button.scss
@@ -95,10 +95,19 @@ $button-responsive-expanded: false !default;
 
 // TODO: Document button-base() mixin
 @mixin button-base {
-  @include disable-mouse-outline;
   display: inline-block;
   vertical-align: middle;
   margin: $button-margin;
+  border: $button-border;
+  border-radius: $button-radius;
+  transition: $button-transition;
+  font-family: $button-font-family;
+  font-size: map-get($button-sizes, default);
+  font-weight: $button-font-weight;
+  -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
+  line-height: 1;
+  text-align: center;
+  cursor: pointer;
 
   @if (type-of($button-padding) == 'map') {
     @each $size, $padding in $button-padding {
@@ -111,16 +120,7 @@ $button-responsive-expanded: false !default;
     padding: $button-padding;
   }
 
-  border: $button-border;
-  border-radius: $button-radius;
-  transition: $button-transition;
-  font-family: $button-font-family;
-  font-size: map-get($button-sizes, default);
-  font-weight: $button-font-weight;
-  -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes
-  line-height: 1;
-  text-align: center;
-  cursor: pointer;
+  @include disable-mouse-outline;
 }
 
 /// Expands a button to make it full-width.

diff --git a/scss/components/_callout.scss b/scss/components/_callout.scss
@@ -85,8 +85,8 @@ $callout-link-tint: 30% !default;
 /// Adds styles for a callout.
 /// @param {Color} $color [$callout-background] - Color to use.
 @mixin callout($color: $callout-background) {
-  @include callout-base;
   @include callout-style($color);
+  @include callout-base;
 }
 
 @mixin foundation-callout {

diff --git a/scss/components/_close-button.scss b/scss/components/_close-button.scss
@@ -92,12 +92,13 @@ $closebutton-color-hover: $black !default;
   $x: nth($closebutton-position, 1);
   $y: nth($closebutton-position, 2);
 
-  @include disable-mouse-outline;
   position: absolute;
   z-index: $closebutton-z-index;
   color: $closebutton-color;
   cursor: pointer;
 
+  @include disable-mouse-outline;
+
   &:hover,
   &:focus {
     color: $closebutton-color-hover;

diff --git a/scss/components/_off-canvas.scss b/scss/components/_off-canvas.scss
@@ -143,7 +143,11 @@ $maincontent-class: 'off-canvas-content' !default;
   $transition: $offcanvas-transition-length $offcanvas-transition-timing,
   $fixed: true
 ) {
-  @include disable-mouse-outline;
+  // Set the off-canvas z-index.
+  z-index: $offcanvas-push-zindex;
+  transition: transform $transition;
+  backface-visibility: hidden;
+  background: $background;
 
   @if $fixed == true {
     position: fixed;
@@ -152,19 +156,13 @@ $maincontent-class: 'off-canvas-content' !default;
     position: absolute;
   }
 
-  // Set the off-canvas z-index.
-  z-index: $offcanvas-push-zindex;
+  @include disable-mouse-outline;
 
   // Increase CSS specificity
   &.is-transition-push {
     z-index: $offcanvas-push-zindex;
   }
 
-  transition: transform $transition;
-  backface-visibility: hidden;
-
-  background: $background;
-
   // Hide inactive off-canvas within the content that have the same position
   &.is-closed {
     visibility: hidden;

diff --git a/scss/components/_orbit.scss b/scss/components/_orbit.scss
@@ -102,11 +102,11 @@ $orbit-control-zindex: 10 !default;
 
 /// Adds base styles for the next/previous buttons in an Orbit slider. These styles are shared between the `.orbit-next` and `.orbit-previous` classes in the default CSS.
 @mixin orbit-control {
-  @include disable-mouse-outline;
-  @include vertical-center;
   z-index: $orbit-control-zindex;
   padding: $orbit-control-padding;
   color: $white;
+  @include vertical-center;
+  @include disable-mouse-outline;
 
   &:hover,
   &:active,
@@ -128,11 +128,11 @@ $orbit-control-zindex: 10 !default;
 
 /// Adds styles for a container of Orbit bullets. /// Adds styles for the Orbit previous button. These styles are used on the `.orbit-bullets` class.
 @mixin orbit-bullets {
-  @include disable-mouse-outline;
   position: relative;
   margin-top: $orbit-bullet-margin-top;
   margin-bottom: $orbit-bullet-margin-bottom;
   text-align: center;
+  @include disable-mouse-outline;
 
   button {
     width: $orbit-bullet-diameter;

diff --git a/scss/components/_pagination.scss b/scss/components/_pagination.scss
@@ -83,9 +83,9 @@ $pagination-arrow-next: '\00BB' !default;
   $padding: $pagination-item-padding,
   $background-hover: $pagination-item-background-hover
 ) {
-  @include clearfix;
   margin-#{$global-left}: 0;
   margin-bottom: $margin-bottom;
+  @include clearfix;
 
   // List item
   li {

diff --git a/scss/components/_reveal.scss b/scss/components/_reveal.scss
@@ -69,7 +69,6 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
 
 /// Adds base styles for a modal.
 @mixin reveal-modal-base {
-  @include disable-mouse-outline;
   z-index: $reveal-zindex + 1;
   // Workaround android browser z-index bug
   backface-visibility: hidden;
@@ -81,6 +80,8 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
   border-radius: $reveal-radius;
   background-color: $reveal-background;
 
+  @include disable-mouse-outline;
+
   @include breakpoint(medium) {
     min-height: 0;
   }
@@ -153,15 +154,16 @@ $reveal-overlay-background: rgba($black, 0.45) !default;
 
   // Modal container
   .reveal {
-    @include reveal-modal-base;
-    @include reveal-modal-width($reveal-width);
     position: relative;
     top: 100px;
     margin-right: auto;
     margin-left: auto;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
 
+    @include reveal-modal-base;
+    @include reveal-modal-width($reveal-width);
+
     // Remove padding
     &.collapse {
       padding: 0;

diff --git a/scss/components/_slider.scss b/scss/components/_slider.scss
@@ -50,8 +50,6 @@ $slider-transition: all 0.2s ease-in-out !default;
 
 /// Adds the general styles for the slider handles.
 @mixin slider-handle {
-  @include disable-mouse-outline;
-  @include vertical-center;
   left: 0;
   z-index: 1;
   cursor: grab;
@@ -65,6 +63,9 @@ $slider-transition: all 0.2s ease-in-out !default;
   transition: $slider-transition;
   touch-action: manipulation;
 
+  @include vertical-center;
+  @include disable-mouse-outline;
+
   &:hover {
     background-color: scale-color($slider-handle-background, $lightness: -15%);
   }

diff --git a/scss/components/_table.scss b/scss/components/_table.scss
@@ -165,8 +165,8 @@ $table-stack-breakpoint: medium !default;
 
     &.unstriped {
       tbody {
-        @include -zf-table-unstripe();
         background-color: $table-background;
+        @include -zf-table-unstripe();
       }
     }
   }

diff --git a/scss/components/_tabs.scss b/scss/components/_tabs.scss
@@ -59,11 +59,11 @@ $tab-content-padding: 1rem !default;
   $background: $tab-background,
   $border-color: $tab-content-border
 ) {
-  @include clearfix;
   margin: $margin;
   border: 1px solid $border-color;
   background: $background;
   list-style-type: none;
+  @include clearfix;
 }
 
 /// Augments a tab container to have vertical tabs. Use this in conjunction with `tabs-container()`.
@@ -87,12 +87,12 @@ $tab-content-padding: 1rem !default;
   float: #{$global-left};
 
   > a {
-    @include disable-mouse-outline;
     display: block;
     padding: $padding;
     font-size: $font-size;
     line-height: 1;
     color: $color;
+    @include disable-mouse-outline;
 
     &:hover {
       background: $background-hover;

diff --git a/scss/components/_top-bar.scss b/scss/components/_top-bar.scss
@@ -32,6 +32,8 @@ $topbar-unstack-breakpoint: medium !default;
 
 /// Adds styles for a top bar container.
 @mixin top-bar-container {
+  padding: $topbar-padding;
+
   @if $global-flexbox {
     display: flex;
     flex-wrap: nowrap;
@@ -42,8 +44,6 @@ $topbar-unstack-breakpoint: medium !default;
     @include clearfix;
   }
 
-  padding: $topbar-padding;
-
   &,
   ul {
     background-color: $topbar-background;

diff --git a/scss/forms/_select.scss b/scss/forms/_select.scss
@@ -36,18 +36,19 @@ $select-radius: $global-radius !default;
   line-height: $input-line-height;
   color: $input-color;
 
+  @if has-value($input-transition) {
+    transition: $input-transition;
+  }
+
   @if $select-triangle-color != transparent {
-    @include background-triangle($select-triangle-color);
     background-origin: content-box;
     background-position: $global-right (-$form-spacing) center;
     background-repeat: no-repeat;
     background-size: 9px 6px;
 
     padding-#{$global-right}: ($form-spacing * 1.5);
-  }
 
-  @if has-value($input-transition) {
-    transition: $input-transition;
+    @include background-triangle($select-triangle-color);
   }
 
   // Focus state

diff --git a/scss/forms/_text.scss b/scss/forms/_text.scss
@@ -124,8 +124,8 @@ $form-button-radius: $global-radius !default;
   // Text inputs
   #{text-inputs()},
   textarea {
-    @include form-element;
     appearance: none;
+    @include form-element;
   }
 
   // Text areas

diff --git a/scss/grid/_position.scss b/scss/grid/_position.scss
@@ -40,12 +40,12 @@
 
   // Center positioning
   @else if $position == center {
+    margin-left: auto;
+    margin-right: auto;
     &, &:last-child:not(:first-child) {
       float: none;
       clear: both;
     }
-    margin-right: auto;
-    margin-left: auto;
   }
 
   @else {
@@ -55,10 +55,10 @@
 
 /// Reset a position definition.
 @mixin grid-column-unposition {
-  @include grid-column-position(auto);
   position: static;
   margin-right: 0;
   margin-left: 0;
+  @include grid-column-position(auto);
 }
 
 /// Offsets a column to the right by `$n` columns.

diff --git a/scss/prototype/_separator.scss b/scss/prototype/_separator.scss
@@ -43,8 +43,8 @@ $prototype-separator-margin-top: $global-margin !default;
   $background: $prototype-separator-background,
   $top: $prototype-separator-margin-top
 ) {
-  @include clearfix;
   text-align: $align !important;
+  @include clearfix;
 
   &::after {
     @include position(relative);

diff --git a/scss/xy-grid/_grid.scss b/scss/xy-grid/_grid.scss
@@ -14,11 +14,11 @@
   $width: $grid-container,
   $padding: $grid-container-padding
 ) {
-  @include xy-gutters($gutters: $padding, $gutter-type: padding);
-
   max-width: $width;
   margin-left: auto;
   margin-right: auto;
+
+  @include xy-gutters($gutters: $padding, $gutter-type: padding);
 }
 
 /// Creates a container for your flex cells.