Migrated _sass code to fix deprecation warnings. (Phlow#262)

Thank you so much for your work @RemcoSchrijver! I don't care so much about the formatting. If it works, that's great for me. And the version of the foundation framework is outdated nowadays and even the actual version isn't truly supported anymore. So thankyouverymuch from Cologne/Germany,

Moritz

Author: RemcoSchrijver

.ruby-version

@@ -0,0 +1 @@
+3.0.6

Gemfile.lock

@@ -1,7 +1,7 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    addressable (2.8.4)
+    addressable (2.8.5)
       public_suffix (>= 2.0.2, < 6.0)
     asciidoctor (1.5.8)
     coderay (1.1.1)
@@ -17,7 +17,7 @@ GEM
     faraday-net_http (3.0.2)
     ffi (1.15.5)
     forwardable-extended (2.6.0)
-    google-protobuf (3.23.4)
+    google-protobuf (3.23.4-x86_64-linux)
     http_parser.rb (0.8.0)
     i18n (1.14.1)
       concurrent-ruby (~> 1.0)
@@ -66,11 +66,11 @@ GEM
     rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
-    rexml (3.2.5)
-    rouge (4.1.2)
+    rexml (3.2.6)
+    rouge (4.1.3)
     ruby2_keywords (0.0.5)
     safe_yaml (1.0.5)
-    sass-embedded (1.63.6)
+    sass-embedded (1.64.2)
       google-protobuf (~> 3.23)
       rake (>= 13.0.0)
     sawyer (0.9.2)
@@ -82,7 +82,7 @@ GEM
     webrick (1.8.1)
 
 PLATFORMS
-  ruby
+  x86_64-linux
 
 DEPENDENCIES
   asciidoctor (~> 1.5.4)
@@ -93,4 +93,4 @@ DEPENDENCIES
   jekyll-paginate
 
 BUNDLED WITH
-   1.17.1
+   2.4.18

_sass/_03_settings_mixins_media_queries.scss

@@ -29,7 +29,7 @@ $base-font-size: 100% !default;
 //
 // We use this to control border radius.
 // $radius - Default: $global-radius || 4px
-@mixin radius($radius:$global-radius) {
+@mixin radius($radius: $global-radius) {
   @if $radius {
     border-radius: $radius;
   }
@@ -39,13 +39,15 @@ $base-font-size: 100% !default;
 //
 // We use this to create equal side border radius on elements.
 // $side - Options: left, right, top, bottom
-@mixin side-radius($side, $radius:$global-radius) {
-  @if ($side == left or $side == right) {
+@mixin side-radius($side, $radius: $global-radius) {
+  @if ($side ==left or $side ==right) {
     -webkit-border-bottom-#{$side}-radius: $radius;
     -webkit-border-top-#{$side}-radius: $radius;
     border-bottom-#{$side}-radius: $radius;
     border-top-#{$side}-radius: $radius;
-  } @else {
+  }
+
+  @else {
     -webkit-#{$side}-left-radius: $radius;
     -webkit-#{$side}-right-radius: $radius;
     border-#{$side}-left-radius: $radius;
@@ -57,11 +59,14 @@ $base-font-size: 100% !default;
 //
 // We can control whether or not we have inset shadows edges.
 // $active - Default: true, Options: false
-@mixin inset-shadow($active:true) {
+@mixin inset-shadow($active: true) {
   box-shadow: $shiny-edge-size $shiny-edge-color inset;
 
-  @if $active { &:active {
-    box-shadow: $shiny-edge-size $shiny-edge-active-color inset; } }
+  @if $active {
+    &:active {
+      box-shadow: $shiny-edge-size $shiny-edge-active-color inset;
+    }
+  }
 }
 
 // @mixins
@@ -70,17 +75,17 @@ $base-font-size: 100% !default;
 // $property - Default: all, Options: http://www.w3.org/TR/css3-transitions/#animatable-properties
 // $speed - Default: 300ms
 // $ease - Default:ease-out, Options: http://css-tricks.com/almanac/properties/t/transition-timing-function/
-@mixin single-transition($property:all, $speed:300ms, $ease:ease-out) {
+@mixin single-transition($property: all, $speed: 300ms, $ease: ease-out) {
   transition: $property $speed $ease;
 }
 
 // @mixins
 //
 // We use this to add box-sizing across browser prefixes
-@mixin box-sizing($type:border-box) {
+@mixin box-sizing($type: border-box) {
   -webkit-box-sizing: $type; // Android < 2.3, iOS < 4
-     -moz-box-sizing: $type; // Firefox < 29
-          box-sizing: $type; // Chrome, IE 8+, Opera, Safari 5.1
+  -moz-box-sizing: $type; // Firefox < 29
+  box-sizing: $type; // Chrome, IE 8+, Opera, Safari 5.1
 }
 
 // @mixins
@@ -95,19 +100,23 @@ $base-font-size: 100% !default;
   width: 0;
   height: 0;
   border: inset $triangle-size;
-  @if ($triangle-direction == top) {
+
+  @if ($triangle-direction ==top) {
     border-color: $triangle-color transparent transparent transparent;
     border-top-style: solid;
   }
-  @if ($triangle-direction == bottom) {
+
+  @if ($triangle-direction ==bottom) {
     border-color: transparent transparent $triangle-color transparent;
     border-bottom-style: solid;
   }
-  @if ($triangle-direction == left) {
+
+  @if ($triangle-direction ==left) {
     border-color: transparent transparent transparent $triangle-color;
     border-left-style: solid;
   }
-  @if ($triangle-direction == right) {
+
+  @if ($triangle-direction ==right) {
     border-color: transparent $triangle-color transparent transparent;
     border-right-style: solid;
   }
@@ -135,29 +144,33 @@ $base-font-size: 100% !default;
       @if $top {
         top: $top;
       }
+
       @else {
         top: 50%;
         margin-top: (-$width/2);
       }
+
       @if $left {
         left: $left;
       }
+
       @else {
         left: ($tabbar-menu-icon-width - $width)/2;
       }
     }
+
     @else {
       top: 50%;
       margin-top: -($width/2);
       #{$opposite-direction}: $topbar-link-padding;
     }
 
-    box-shadow:
-      0 0 0 $thickness $color,
-      0 $gap + $thickness 0 $thickness $color,
-      0 (2 * $gap + 2*$thickness) 0 $thickness $color;
+    box-shadow: 0 0 0 $thickness $color,
+    0 ($gap + $thickness) 0 $thickness $color,
+    0 (2 * $gap + 2*$thickness) 0 $thickness $color;
     width: $width;
   }
+
   span:hover:after {
     box-shadow:
       0 0 0 $thickness $hover-color,
@@ -168,8 +181,16 @@ $base-font-size: 100% !default;
 
 // We use this to do clear floats
 @mixin clearfix {
-  &:before, &:after { content: " "; display: table; }
-  &:after { clear: both; }
+
+  &:before,
+  &:after {
+    content: " ";
+    display: table;
+  }
+
+  &:after {
+    clear: both;
+  }
 }
 
 // @mixins
@@ -178,7 +199,7 @@ $base-font-size: 100% !default;
 // $selector - Used for selector state. Default: focus, Options: hover, active, visited
 // $fade-time - Default: 300ms
 // $glowing-effect-color - Default: fade-out($primary-color, .25)
-@mixin block-glowing-effect($selector:focus, $fade-time:300ms, $glowing-effect-color:fade-out($primary-color, .25)) {
+@mixin block-glowing-effect($selector: focus, $fade-time: 300ms, $glowing-effect-color: fade-out($primary-color, .25)) {
   transition: box-shadow $fade-time, border-color $fade-time ease-in-out;
 
   &:#{$selector} {
@@ -192,8 +213,8 @@ $base-font-size: 100% !default;
 // We use this to translate elements in 2D
 // $horizontal: Default: 0
 // $vertical: Default: 0
-@mixin translate2d($horizontal:0, $vertical:0) {
-  transform: translate($horizontal,$vertical)
+@mixin translate2d($horizontal: 0, $vertical: 0) {
+  transform: translate($horizontal, $vertical)
 }
 
 // @mixins
@@ -224,10 +245,13 @@ $base-font-size: 100% !default;
 $text-direction: ltr !default;
 $default-float: left !default;
 $opposite-direction: right !default;
-@if $text-direction == ltr {
+
+@if $text-direction ==ltr {
   $default-float: left;
   $opposite-direction: right;
-} @else {
+}
+
+@else {
   $default-float: right;
   $opposite-direction: left;
 }
@@ -250,11 +274,26 @@ $column-gutter: rem-calc(30) !default;
 // d. Media Query Ranges
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
-$small-range: (0em, 40em);
-$medium-range: (40.063em, 64em);
-$large-range: (64.063em, 90em);
-$xlarge-range: (90.063em, 120em);
-$xxlarge-range: (120.063em, 99999999em);
+$small-range: (
+  0em,
+  40em
+);
+$medium-range: (
+  40.063em,
+  64em
+);
+$large-range: (
+  64.063em,
+  90em
+);
+$xlarge-range: (
+  90.063em,
+  120em
+);
+$xxlarge-range: (
+  120.063em,
+  99999999em
+);
 
 
 $screen: "only screen" !default;
@@ -293,7 +332,7 @@ $cursor-text-value: text !default;
 
 @include exports("global") {
 
-  // Meta styles are included in all builds, as they are a dependancy of the Javascript.
+  // Meta styles are included in all builds, as they are a dependency of the Javascript.
   // Used to provide media query values for javascript components.
   // Forward slash placed around everything to convince PhantomJS to read the value.
 
@@ -353,7 +392,10 @@ $cursor-text-value: text !default;
   @if $include-html-global-classes {
 
     // Must be 100% for off canvas to work
-    html, body { height: 100%; }
+    html,
+    body {
+      height: 100%;
+    }
 
     // Set box-sizing globally to handle padding and border widths
     *,
@@ -363,7 +405,9 @@ $cursor-text-value: text !default;
     }
 
     html,
-    body { font-size: $base-font-size; }
+    body {
+      font-size: $base-font-size;
+    }
 
     // Default body styles
     body {
@@ -379,25 +423,42 @@ $cursor-text-value: text !default;
       cursor: $cursor-auto-value;
     }
 
-  a:hover { cursor: $cursor-pointer-value; }
+    a:hover {
+      cursor: $cursor-pointer-value;
+    }
 
     // Grid Defaults to get images and embeds to work properly
-    img { max-width: 100%; height: auto; }
+    img {
+      max-width: 100%;
+      height: auto;
+    }
 
-    img { -ms-interpolation-mode: bicubic; }
+    img {
+      -ms-interpolation-mode: bicubic;
+    }
 
     #map_canvas,
     .map_canvas {
+
       img,
       embed,
-      object { max-width: none !important;
+      object {
+        max-width: none !important;
       }
     }
 
     // Miscellaneous useful HTML classes
-    .left { float: left !important; }
-    .right { float: right !important; }
-    .clearfix { @include clearfix; }
+    .left {
+      float: left !important;
+    }
+
+    .right {
+      float: right !important;
+    }
+
+    .clearfix {
+      @include clearfix;
+    }
 
     // Hide visually and from screen readers
     .hide {
@@ -406,13 +467,18 @@ $cursor-text-value: text !default;
     }
 
     // Hide visually and from screen readers, but maintain layout
-    .invisible { visibility: hidden; }
+    .invisible {
+      visibility: hidden;
+    }
 
     // Font smoothing
     // Antialiased font smoothing works best for light text on a dark background.
     // Apply to single elements instead of globally to body.
     // Note this only applies to webkit-based desktop browsers and Firefox 25 (and later) on the Mac.
-    .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+    .antialiased {
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
 
     // Get rid of gap under images by making them display: inline-block; by default
     img {
@@ -425,9 +491,14 @@ $cursor-text-value: text !default;
     //
 
     // Make sure textarea takes on height automatically
-    textarea { height: auto; min-height: 50px; }
+    textarea {
+      height: auto;
+      min-height: 50px;
+    }
 
     // Make select elements 100% width by default
-    select { width: 100%; }
+    select {
+      width: 100%;
+    }
   }
-}
+}