Move to a sass processer which supports python3

jadu · Apr 18, 2024 · c8474dc · c8474dc
1 parent 4dcc36e
commit c8474dc
Show file tree

Hide file tree

Showing 27 changed files with 31,915 additions and 13,407 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -1,5 +1,5 @@
 // const Fiber = require('fibers');
-const sass = require('dart-sass');
+const sass = require('sass');
 
 module.exports = function(grunt) {
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,7 +41,6 @@
     "chai": "^4.3.6",
     "chai-dom": "^1.11.0",
     "chai-hiff": "^1.0.0",
-    "dart-sass": "^1.25.0",
     "grunt": "^1.5.2",
     "grunt-asciify": "^0.2.2",
     "grunt-autoprefixer": "^3.0.4",
@@ -73,6 +72,7 @@
     "mochify": "^9.2.0",
     "mochify-istanbul": "^2.4.2",
     "require-globify": "^1.4.1",
+    "sass": "^1.75.0",
     "sinon": "^2.4.1",
     "sinon-chai": "^2.8.8",
     "sinon-jquery": "^1.0.3",

diff --git a/stylesheets/_component.block-list.scss b/stylesheets/_component.block-list.scss
@@ -43,7 +43,7 @@
     Configuration
 \* -------------------------------------------------------------------------- */
 
-$padding: ($line-height-base / 2);
+$padding: calc($line-height-base / 2);
 $width: 500px;
 
 /* -------------------------------------------------------------------------- *\

diff --git a/stylesheets/_component.breadcrumb.scss b/stylesheets/_component.breadcrumb.scss
@@ -1,7 +1,7 @@
 .breadcrumb {
     clear: both;
     color: color(gray, dark); // must be AA 4.5:1
-    margin: 0 0 ($line-height-base / 2);
+    margin: 0 0 calc($line-height-base / 2);
     width: 100%;
 
     ol {

diff --git a/stylesheets/_component.dropdowns.scss b/stylesheets/_component.dropdowns.scss
@@ -69,7 +69,7 @@
     background-color: color(border);
     display: block;
     height: 1px;
-    margin: ($line-height-base / 4) 0;
+    margin: calc($line-height-base / 4) 0;
     min-width: 160px;
     overflow: hidden;
     padding: 0;

diff --git a/stylesheets/_component.dropzone.scss b/stylesheets/_component.dropzone.scss
@@ -208,7 +208,7 @@ $dropzone-icon-rotation: 30deg;
 .dropzone__type {
     font-size: .75em;
     line-height: 1;
-    margin-bottom: $dropzone-file-size / 2;
+    margin-bottom: calc($dropzone-file-size / 2);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;

diff --git a/stylesheets/_component.edit-button.scss b/stylesheets/_component.edit-button.scss
@@ -31,7 +31,7 @@ a + .edit-button {
 }
 
 .btn__group > .edit-button {
-    padding: 0 ($padding-base-horizontal / 2);
+    padding: 0 calc($padding-base-horizontal / 2);
 }
 
 .btn__group .btn + .edit-button {

diff --git a/stylesheets/_component.filterbar.scss b/stylesheets/_component.filterbar.scss
@@ -19,7 +19,7 @@
         border-radius: $border-radius-small * 2;
         box-sizing: border-box;
         display: block;
-        margin-bottom: $gutter-width / 2;
+        margin-bottom: calc($gutter-width / 2);
         overflow-wrap: break-word;
         padding-bottom: 6px;
         padding-top: 7px;
@@ -92,7 +92,7 @@
 
         > .form__actions {
             border: 0;
-            margin-bottom: $gutter-width / 2;
+            margin-bottom: calc($gutter-width / 2);
             margin-top: 40px;
             min-height: 0;
             padding: 0;
@@ -106,7 +106,7 @@
 
             > .btn {
                 display: block;
-                margin-top: $gutter-width / 2;
+                margin-top: calc($gutter-width / 2);
                 width: 100%;
 
                 @include respond-min($screen-tablet) {
@@ -149,7 +149,7 @@
 
     @include respond-min($screen-tablet) {
         display: inline-block;
-        margin-bottom: $gutter-width / 2;
+        margin-bottom: calc($gutter-width / 2);
         width: auto;
     }
 }
diff --git a/stylesheets/_component.flash.scss b/stylesheets/_component.flash.scss
@@ -1,10 +1,10 @@
 // Constructor
 .flash {
-    padding: (($line-height-base / $line-height-small) / 2) $gutter-width;
+    padding: calc(calc($line-height-base / $line-height-small) / 2) $gutter-width;
     width: 100%;
 
     @include respond-min($screen-phone) {
-        padding: ($line-height-base / 2) $gutter-width;
+        padding: calc($line-height-base / 2) $gutter-width;
     }
 
     @include respond-min($screen-desktop) {
@@ -17,10 +17,10 @@
     }
 
     i {
-        margin: 0 ($gutter-width / 4) 0 0;
+        margin: 0 calc($gutter-width / 4) 0 0;
 
         @include respond-min($screen-phone) {
-            margin-right: $gutter-width / 2;
+            margin-right: calc($gutter-width / 2);
         }
     }
 }
@@ -87,13 +87,13 @@
         color: inherit;
         float: right;
         font-size: 1em;
-        margin-left: $gutter-width / 4;
+        margin-left: calc($gutter-width / 4);
         margin-right: -$gutter-width;
         opacity: .9;
         text-decoration: none;
 
         @include respond-min($screen-phone) {
-            margin-left: $gutter-width / 2;
+            margin-left: calc($gutter-width / 2);
         }
 
         &:hover {
@@ -114,7 +114,7 @@
 .flash-container {
     clear: both;
     flex: 1 1 100%;
-    margin: 0 -20px ($line-height-base / 2) -19px;
+    margin: 0 -20px calc($line-height-base / 2) -19px;
     z-index: $zindex-flash;
 
     &:empty {

diff --git a/stylesheets/_component.greeter.scss b/stylesheets/_component.greeter.scss
@@ -205,7 +205,7 @@ $greeter-brand-bottom-height:           40px !default;
     &__hint {
         display: inline-block;
         margin: 0;
-        margin-left: $greeter-padding / 2;
+        margin-left: calc($greeter-padding / 2);
         margin-right: auto;
         opacity: 0;
         position: relative;
@@ -214,7 +214,7 @@ $greeter-brand-bottom-height:           40px !default;
         i { /* [9] */
             display: inline-block;
             font-size: 1.5em;
-            margin-right: ($greeter-padding / 2);
+            margin-right: calc($greeter-padding / 2);
             -webkit-animation-duration: 1s;
               animation-duration: 1s;
             -webkit-animation-fill-mode: both;

diff --git a/stylesheets/_component.input-groups.scss b/stylesheets/_component.input-groups.scss
@@ -133,7 +133,7 @@
 
 .input-group-btn:first-child > .btn,
 .input-group-btn:first-child > .btn__group {
-    margin-right: $margin-base-horizontal / 2;
+    margin-right: calc($margin-base-horizontal / 2);
 }
 
 .input-group:not(.has-btn-prepended) .form__control:not(:first-child),
@@ -149,7 +149,7 @@
 
 .input-group-btn > .btn,
 .input-group-btn > .btn__group {
-    margin-left: $margin-base-horizontal / 2;
+    margin-left: calc($margin-base-horizontal / 2);
 }
 
 // Button input groups

diff --git a/stylesheets/_component.loading.scss b/stylesheets/_component.loading.scss
@@ -124,7 +124,7 @@
 
     .loading-block__message {
         display: block;
-        margin-top: $line-height-base / 2;
+        margin-top: calc($line-height-base / 2);
     }
 }
 
@@ -138,7 +138,7 @@
         display: block;
         position: absolute;
         right: -10px;
-        top: $line-height-base / 2;
+        top: calc($line-height-base / 2);
     }
 }
 

diff --git a/stylesheets/_component.piano.scss b/stylesheets/_component.piano.scss
@@ -170,7 +170,7 @@ $piano-bg: #fafafa;
     border-radius: 50%;
     float: left;
     height: 25px;
-    margin-bottom: $margin-base / 2;
+    margin-bottom: calc($margin-base / 2);
     margin-right: $margin-base;
     width: 25px;
 }

diff --git a/stylesheets/_component.remove-button.scss b/stylesheets/_component.remove-button.scss
@@ -31,7 +31,7 @@ a + .remove-button {
 }
 
 .btn__group > .remove-button {
-    padding: 0 ($padding-base-horizontal / 2);
+    padding: 0 calc($padding-base-horizontal / 2);
 }
 
 .btn__group .btn + .remove-button {

diff --git a/stylesheets/_component.ribbon.scss b/stylesheets/_component.ribbon.scss
@@ -74,16 +74,16 @@
     .label {
         font-size: 65%;
         letter-spacing: 0;
-        margin: ($gutter-width / 4) 0 ($gutter-width / 2) ($gutter-width / 4);
+        margin: calc($gutter-width / 4) 0 calc($gutter-width / 2) calc($gutter-width / 4);
         vertical-align: middle;
         word-break: break-all;
 
         @include respond-min($screen-tablet) {
-            padding: -.5em 0 0 $gutter-width / 2;
+            padding: -.5em 0 0 calc($gutter-width / 2);
         }
 
         + .label {
-            margin: ($gutter-width / 4) 0 ($gutter-width / 2);
+            margin: calc($gutter-width / 4) 0 calc($gutter-width / 2);
         }
     }
 

diff --git a/stylesheets/_component.signin.scss b/stylesheets/_component.signin.scss
@@ -189,7 +189,7 @@ $signin-panel-mobile-width:	300px;
     }
 
     p {
-        margin: ($line-height-base / 2) 0;
+        margin: calc($line-height-base / 2) 0;
     }
 
     hr {

diff --git a/stylesheets/_component.slider.scss b/stylesheets/_component.slider.scss
@@ -1,81 +1,11 @@
-// .slider-container {
-//     padding: $padding-base * 2;
-
-//     @include respond-min($screen-tablet) {
-//         margin: 5em auto;
-//         padding: 0;
-//         width: 600px;
-//     }
-// }
-
-// .slider {
-//     display: block;
-//     position: relative;
-
-//     @include respond-min($screen-tablet) {
-//         display: inline-block;
-//         width: 600px;
-//     }
-// }
-
-// .slider__back {
-//     background-color: color(jadu-blue);
-//     border-top-left-radius: $border-radius-large;
-//     color: color(white);
-//     width: 100%;
-
-//     @include respond-min($screen-tablet) {
-//         border-bottom-right-radius: $border-radius-large;
-//         bottom: $padding-base * 2;
-//         position: absolute;
-//         text-align: center;
-//         top: $padding-base * 2;
-//     }
-// }
-
-// .slider__front {
-//     background-color: color(white);
-//     border-bottom-right-radius: $border-radius-large;
-//     min-height: 300px;
-//     z-index: 1;
-
-//     @include respond-min($screen-tablet) {
-//         position: relative;
-//         float: right;
-//     }
-// }
-
-// .slider__inner {
-//     overflow: hidden;
-//     padding: $padding-base * 2;
-
-//     @include respond-min($screen-tablet) {
-//         width: 300px;
-//     }
-// }
-
-// .slider-logo {
-//     display: block;
-//     width: 45px;
-
-//     @include respond-min($screen-tablet) {
-//         margin: 0 auto;
-//     }
-// }
-
-// .slider-title {
-//     font-size: $font-size-large;
-//     line-height: 45px;
-// }
-
 // form alignment
 .signin .form {
     fieldset {
         padding: 0;
     }
 
     p {
-        margin-bottom: $line-height-base / 2;
+        margin-bottom: calc($line-height-base / 2);
     }
 
     .legend {

diff --git a/stylesheets/_config.variables.scss b/stylesheets/_config.variables.scss
@@ -228,7 +228,7 @@ $toolbar-internal-height:             ($toolbar-height - $toolbar-accent-height)
 $search-border-radius:                0 !default;
 $search-form-height:                  $toolbar-height !default;
 $search-height:                       44px !default;
-$search-form-margin:                  ($search-form-height - $search-height - $toolbar-accent-height) / 2 0;
+$search-form-margin:                  calc(($search-form-height - $search-height - $toolbar-accent-height) / 2) 0;
 $search-width:                        100% !default;
 $search-max-width:                    400px !default;
 

diff --git a/stylesheets/_function.color-luminance.scss b/stylesheets/_function.color-luminance.scss
@@ -6,9 +6,9 @@
 
   @for $i from 1 through 3 {
     $rgb: nth($rgba, $i);
-    $rgb: $rgb / 255;
+    $rgb: calc($rgb / 255);
 
-    $rgb: if($rgb < .03928, $rgb / 12.92, pow(($rgb + .055) / 1.055, 2.4));
+    $rgb: if($rgb < .03928, calc($rgb / 12.92), pow(calc(($rgb + .055) / 1.055), 2.4));
 
     $rgba2: append($rgba2, $rgb);
   }
@@ -21,13 +21,13 @@
   // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
   $luminance1: color_luminance($color1) + .05;
   $luminance2: color_luminance($color2) + .05;
-  $ratio: $luminance1 / $luminance2;
+  $ratio: calc($luminance1 / $luminance2);
 
   @if $luminance2 > $luminance1 {
-    $ratio: 1 / $ratio;
+    $ratio: calc(1 / $ratio);
   }
 
-  $ratio: round($ratio * 10) / 10;
+  $ratio: calc(round($ratio * 10) / 10);
 
   @return $ratio;
 }