diff --git a/.npmignore b/.npmignore index 14b3650..9da7416 100644 --- a/.npmignore +++ b/.npmignore @@ -1,6 +1,5 @@ node_modules npm-debug.log -src .editorconfig .gitignore .sass-lint.yml diff --git a/package.json b/package.json index 4aeba55..e149be1 100644 --- a/package.json +++ b/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" } diff --git a/src/components/_forms.scss b/src/components/_forms.scss index 84f3d58..7bd605a 100644 --- a/src/components/_forms.scss +++ b/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%; diff --git a/src/components/_loading-spinner.scss b/src/components/_loading-spinner.scss index b844178..665f2ba 100644 --- a/src/components/_loading-spinner.scss +++ b/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% { diff --git a/src/components/_tag.scss b/src/components/_tag.scss index 8b43f03..a7fc6e1 100644 --- a/src/components/_tag.scss +++ b/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; } diff --git a/src/grid/_grid-framework.scss b/src/grid/_grid-framework.scss index 41bdf46..5dc277e 100644 --- a/src/grid/_grid-framework.scss +++ b/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) { diff --git a/src/grid/_grid.scss b/src/grid/_grid.scss index b75ebcb..b701cdd 100644 --- a/src/grid/_grid.scss +++ b/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)); } diff --git a/src/utils/_breakpoints.scss b/src/utils/_breakpoints.scss index a9866bd..42754a7 100644 --- a/src/utils/_breakpoints.scss +++ b/src/utils/_breakpoints.scss @@ -71,7 +71,10 @@ @content; } } @else { - @content; + // Largest (last) breakpoint + @media (max-width: (map-get($grid-breakpoints, $name) - 1px)) { + @content; + } } } diff --git a/src/utils/_layout.scss b/src/utils/_layout.scss index 21726fe..205bc02 100644 --- a/src/utils/_layout.scss +++ b/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; }