From 68f0c89ec2aee04c2a80cfe41030cfff00b1cfa0 Mon Sep 17 00:00:00 2001 From: Mastermindzh Date: Mon, 1 May 2023 13:36:37 +0200 Subject: [PATCH] replaced sass-lint with style-lint --- .stylelintrc.json | 13 ++++++++++ package.json | 12 +++++---- sass-lint.yml | 21 --------------- src/pages/settings/settings.scss | 44 ++++++++++++++++---------------- 4 files changed, 42 insertions(+), 48 deletions(-) create mode 100644 .stylelintrc.json delete mode 100644 sass-lint.yml diff --git a/.stylelintrc.json b/.stylelintrc.json new file mode 100644 index 0000000..8e0c2a3 --- /dev/null +++ b/.stylelintrc.json @@ -0,0 +1,13 @@ +{ + "plugins": [ + "stylelint-prettier" + ], + "extends": [ + "stylelint-config-standard-scss" + ], + "rules": { + "prettier/prettier": true, + "scss/at-extend-no-missing-placeholder": null, + "no-descending-specificity": null + } +} \ No newline at end of file diff --git a/package.json b/package.json index 6ac2dbe..0cbe605 100644 --- a/package.json +++ b/package.json @@ -18,8 +18,8 @@ "prebuilder": "npm run sass", "builder": "electron-builder --publish=never", "sass": "sass ./src/pages/settings/settings.scss ./src/pages/settings/settings.css", - "sass-lint": "sass-lint -vc ./sass-lint.yml ./src/pages/settings/settings.scss", - "sass-lint-fix": "sass-lint-auto-fix ./src/pages/settings/settings.scss --config-sass-lint ./sass-lint.yml" + "style-lint": "npx stylelint **/*.scss", + "style-lint-fix": "npx stylelint --fix **/*.scss" }, "keywords": [ "electron", @@ -46,9 +46,11 @@ "electron-builder": "^24.2.1", "js-yaml": "^4.1.0", "markdown-toc": "^1.2.0", - "prettier": "^2.8.7", - "sass-lint": "^1.13.1", - "sass-lint-auto-fix": "^0.21.2" + "prettier": "^2.8.8", + "stylelint": "^15.6.0", + "stylelint-config-standard": "^33.0.0", + "stylelint-config-standard-scss": "^9.0.0", + "stylelint-prettier": "^3.0.0", }, "prettier": "@mastermindzh/prettier-config" } \ No newline at end of file diff --git a/sass-lint.yml b/sass-lint.yml deleted file mode 100644 index 5074cdd..0000000 --- a/sass-lint.yml +++ /dev/null @@ -1,21 +0,0 @@ -rules: - property-sort-order: - - 1 - - order: "smacss" - class-name-format: - - 1 - - convention: "hyphenatedbem" - quotes: - - 1 - - style: "double" - nesting-depth: - - 1 - - max-depth: 3 - placeholder-in-extend: - - 0 - no-vendor-prefixes: - - 0 - empty-line-between-blocks: - - 0 - force-pseudo-nesting: - - 0 diff --git a/src/pages/settings/settings.scss b/src/pages/settings/settings.scss index 9abb284..537dbd5 100644 --- a/src/pages/settings/settings.scss +++ b/src/pages/settings/settings.scss @@ -3,7 +3,6 @@ $black: #17171a; $grey-333: #333; $white: #f9f9f9; - $tidal-blue: #0ff; $tidal-grey: #72777f; $tidal-grey-darker: #404248; @@ -36,16 +35,14 @@ $tidal-grey-darkest: #242528; src: url("fonts/NotoSans-Bold.ttf") format("truetype"); } -$font1: "Noto Sans", Helvetica, sans-serif; +$font1: "Noto Sans", helvetica, sans-serif; // --- Mixins --- @mixin drag($enabled: true) { @if $enabled { -webkit-app-region: drag; - } - - @else { + } @else { -webkit-app-region: no-drag; } } @@ -62,6 +59,7 @@ html { .external-link { @extend button; + text-decoration: underline; } @@ -80,6 +78,7 @@ html { &__drag-area { @include drag; + position: absolute; width: 100%; height: 50px; @@ -90,6 +89,7 @@ html { &__close-button { @extend button; @include drag(false); + position: absolute; top: 12px; right: 10px; @@ -106,7 +106,7 @@ html { display: block; width: 18px; height: 18px; - opacity: .7; + opacity: 0.7; } // --- Settings tabs --- @@ -125,8 +125,9 @@ html { outline: none; } - &+label { + & + label { @include drag(false); + display: inline-block; position: relative; margin-right: 35px; @@ -138,7 +139,7 @@ html { user-select: none; } - &:checked+label { + &:checked + label { border-bottom: 2px solid $tidal-blue; color: $tidal-blue; } @@ -156,7 +157,7 @@ html { } @for $i from 1 to 6 { - .settings>input:nth-child(#{$i*2-1}):checked~&>.tabs__section:nth-child(#{$i}) { + .settings > input:nth-child(#{$i * 2 - 1}):checked ~ & > .tabs__section:nth-child(#{$i}) { display: block; } } @@ -217,7 +218,7 @@ html { width: 100%; margin-bottom: 10px; padding: 5px 0; - transition: .2s; + transition: 0.2s; border: 0; border-bottom: solid 1px $grey-333; outline: none; @@ -237,38 +238,36 @@ html { .switch { $this: &; + position: relative; min-width: 50px; height: 28px; - margin-left: 10px; input { transform: scale(0); outline: none; - &:checked+#{$this}__slider { + &:checked + #{$this}__slider { background-color: $tidal-blue; &::before { transform: translateX(22px); - background-color: white; + background-color: $white; } } - &:focus+#{$this}__slider { + &:focus + #{$this}__slider { box-shadow: inset 0 0 0 1px $tidal-blue; } } &__slider { @extend button; + position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - transition: .4s; + inset: 0; + transition: 0.4s; border-radius: 40px; background-color: $tidal-grey-darkest; @@ -278,7 +277,7 @@ html { left: 2px; width: 24px; height: 24px; - transition: .4s; + transition: 0.4s; border-radius: 50%; background-color: $white; content: ""; @@ -294,7 +293,7 @@ html { min-height: 50px; max-height: 100px; padding: 8px; - transition: .2s; + transition: 0.2s; border: 0; border-bottom: 1px solid transparent; background: $tidal-grey-darkest; @@ -345,11 +344,12 @@ html { &__button { @extend button; + display: block; height: 48px; margin: auto; padding: 0 24px; - transition: .2s; + transition: 0.2s; border: 0; border-radius: 12px; background: $tidal-grey-darker;