Fix SASS/SCSS "slash-div"-Deprecation (https://sass-lang.com/document…

.npmignore

@@ -1,6 +1,5 @@
 node_modules
 npm-debug.log
-src
 .editorconfig
 .gitignore
 .sass-lint.yml

package.json

@@ -5,7 +5,7 @@
   "main": "lib/index.scss",
   "repository": {
     "type": "git",
-    "url": "https://github.com/sierra-library/sierra.git"
+    "url": "git+https://github.com/webksde/sierra.git"
   },
   "keywords": [
     "scss",
@@ -19,49 +19,16 @@
     "lightweight",
     "frontend"
   ],
-  "author": {
-    "name": "Sierra-library",
-    "url": "https://github.com/sierra-library"
-  },
+  "author": "Sierra-library (https://github.com/sierra-library)",
   "licenses": [
     {
       "type": "GNU General Public License v2.0."
     }
   ],
   "private": false,
-  "devDependencies": {
-    "@commitlint/cli": "7",
-    "@commitlint/config-conventional": "7",
-    "autoprefixer": "8",
-    "commitizen": "3",
-    "cpx": "1",
-    "cz-conventional-changelog": "2",
-    "husky": "1",
-    "node-sass": "4",
-    "nodemon": "1",
-    "np": "3",
-    "postcss-cli": "2"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions"
-  ],
-  "scripts": {
-    "publish": "npm run build",
-    "build": "npm run build:prod && npm run build:dev && cpx 'src/**/*.*' ./lib",
-    "build:prod": "node-sass --include-path scss src/index.scss dist/sierra.min.css  --output-style compressed && postcss --use autoprefixer dist/sierra.min.css -d dist/",
-    "build:dev": "node-sass --include-path scss src/index.scss dist/sierra.css && postcss --use autoprefixer dist/sierra.css -d dist/",
-    "co": "git cz",
-    "watch": "nodemon -e scss -x \"npm run build\""
+  "bugs": {
+    "url": "https://github.com/sierra-library/sierra/issues"
   },
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
-  },
-  "husky": {
-    "hooks": {
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
-    }
-  }
+  "homepage": "https://github.com/sierra-library/sierra#readme",
+  "license": "ISC"
 }

src/components/_forms.scss

@@ -331,7 +331,7 @@ input:-webkit-autofill {
   &-icon {
     fill: $c-form-input-icon;
     height: $size-form-input-icon;
-    margin-top: -$size-form-input-icon / 2;
+    margin-top: -$size-form-input-icon * 0.5;
     position: absolute;
     right: $m-medium;
     top: 50%;

src/components/_loading-spinner.scss

@@ -18,8 +18,8 @@
   display: block;
   height: $size-loading-spinner;
   left: 50%;
-  margin-left: -$size-loading-spinner / 2;
-  margin-top: -$size-loading-spinner / 2;
+  margin-left: -$size-loading-spinner * 0.5;
+  margin-top: -$size-loading-spinner * 0.5;
   position: fixed;
   top: 50%;
   width: $size-loading-spinner;
@@ -38,7 +38,7 @@
       animation: translateBall1 1s infinite;
       left: 0;
       top: 0;
-      transform: translate3d($size-loading-spinner-inner / 2, $size-loading-spinner-inner / 2, 0);
+      transform: translate3d($size-loading-spinner-inner * 0.5, $size-loading-spinner-inner * 0.5, 0);
     }
 
     &:nth-child(2) {
@@ -89,7 +89,7 @@
   }
 
   50% {
-    transform: translate3d($size-loading-spinner-inner / 2, $size-loading-spinner-inner / 2, 0);
+    transform: translate3d($size-loading-spinner-inner * 0.5, $size-loading-spinner-inner * 0.5, 0);
   }
 
   100% {
@@ -102,7 +102,7 @@
   }
 
   50% {
-    transform: translate3d(-$size-loading-spinner-inner / 2, $size-loading-spinner-inner / 2, 0);
+    transform: translate3d(-$size-loading-spinner-inner * 0.5, $size-loading-spinner-inner * 0.5, 0);
   }
 
   100% {
@@ -116,7 +116,7 @@
   }
 
   50% {
-    transform: translate3d(-$size-loading-spinner-inner / 2, -$size-loading-spinner-inner / 2, 0);
+    transform: translate3d(-$size-loading-spinner-inner * 0.5, -$size-loading-spinner-inner * 0.5, 0);
   }
 
   100% {
@@ -130,7 +130,7 @@
   }
 
   50% {
-    transform: translate3d($size-loading-spinner-inner / 2, -$size-loading-spinner-inner / 2, 0);
+    transform: translate3d($size-loading-spinner-inner * 0.5, -$size-loading-spinner-inner * 0.5, 0);
   }
 
   100% {

src/components/_tag.scss

@@ -36,9 +36,9 @@
 
   // triangle arrow
   &::before {
-    border-bottom: ($lh-tag / 2) + $p-tag solid transparent;
+    border-bottom: ($lh-tag * 0.5) + $p-tag solid transparent;
     border-left: $p-tag solid $bg-tag;
-    border-top: ($lh-tag / 2) + $p-tag solid transparent;
+    border-top: ($lh-tag * 0.5) + $p-tag solid transparent;
     content: '';
     height: 0;
     position: absolute;
@@ -53,9 +53,9 @@
     border-radius: 100%;
     content: '';
     height: $size-tag-dot;
-    margin-top: -$size-tag-dot / 2;
+    margin-top: -$size-tag-dot * 0.5;
     position: absolute;
-    right: -$size-tag-dot / 2;
+    right: -$size-tag-dot * 0.5;
     top: 50%;
     width: $size-tag-dot;
   }

src/grid/_grid-framework.scss

@@ -9,8 +9,8 @@
     position: relative;
     width: 100%;
     min-height: 1px; // Prevent columns from collapsing when empty
-    padding-right: ($gutter / 2);
-    padding-left: ($gutter / 2);
+    padding-right: ($gutter * 0.5);
+    padding-left: ($gutter * 0.5);
   }
 
   @each $breakpoint in map-keys($breakpoints) {

src/grid/_grid.scss

@@ -2,10 +2,12 @@
 //
 // Generate semantic grid columns with these mixins.
 
+@use "sass:math";
+
 @mixin make-container() {
   width: 100%;
-  padding-right: ($grid-gutter-width / 2);
-  padding-left: ($grid-gutter-width / 2);
+  padding-right: ($grid-gutter-width * 0.5);
+  padding-left: ($grid-gutter-width * 0.5);
   margin-right: auto;
   margin-left: auto;
 }
@@ -23,8 +25,8 @@
 @mixin make-row() {
   display: flex;
   flex-wrap: wrap;
-  margin-right: ($grid-gutter-width / -2);
-  margin-left: ($grid-gutter-width / -2);
+  margin-right: math.div($grid-gutter-width, -2);
+  margin-left: math.div($grid-gutter-width, -2);
 }
 
 @mixin make-col-ready() {
@@ -34,19 +36,19 @@
   // later on to override this initial width.
   width: 100%;
   min-height: 1px; // Prevent collapsing
-  padding-right: ($grid-gutter-width / 2);
-  padding-left: ($grid-gutter-width / 2);
+  padding-right: ($grid-gutter-width * 0.5);
+  padding-left: ($grid-gutter-width * 0.5);
 }
 
 @mixin make-col($size, $columns: $grid-columns) {
-  flex: 0 0 percentage($size / $columns);
+  flex: 0 0 percentage(math.div($size, $columns));
   // Add a `max-width` to ensure content within each column does not blow out
   // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
   // do not appear to require this.
-  max-width: percentage($size / $columns);
+  max-width: percentage(math.div($size, $columns));
 }
 
 @mixin make-col-offset($size, $columns: $grid-columns) {
-  $num: $size / $columns;
+  $num: math.div($size, $columns);
   margin-left: if($num == 0, 0, percentage($num));
 }

src/utils/_breakpoints.scss

@@ -71,7 +71,10 @@
       @content;
     }
   } @else {
-    @content;
+    // Largest (last) breakpoint
+    @media (max-width: (map-get($grid-breakpoints, $name) - 1px)) {
+      @content;
+    }
   }
 }
 

src/utils/_layout.scss

@@ -23,8 +23,8 @@
   background-color: $bgc-container;
   margin: 0 auto;
   max-width: $mwi-container;
-  padding-left: $w-gutter / 2;
-  padding-right: $w-gutter / 2;
+  padding-left: $w-gutter * 0.5;
+  padding-right: $w-gutter * 0.5;
   width: 100%;
 }
 
@@ -35,8 +35,8 @@
   }
   margin: 0 auto;
   max-width: $mwi-container-medium;
-  padding-left: $w-gutter / 2;
-  padding-right: $w-gutter / 2;
+  padding-left: $w-gutter * 0.5;
+  padding-right: $w-gutter * 0.5;
 }
 
 .container-small {
@@ -46,6 +46,6 @@
   }
   margin: 0 auto;
   max-width: $mwi-container-small;
-  padding-left: $w-gutter / 2;
-  padding-right: $w-gutter / 2;
+  padding-left: $w-gutter * 0.5;
+  padding-right: $w-gutter * 0.5;
 }