lint(Buefy): 🚨 semantic order | :not()

daniil4udo · Nov 10, 2022 · 907c2d3 · 907c2d3
1 parent 4092eb5
commit 907c2d3
Show file tree

Hide file tree

Showing 24 changed files with 54 additions and 55 deletions.
diff --git a/packages/buefy/scss/components/carousel.scss b/packages/buefy/scss/components/carousel.scss
@@ -58,8 +58,8 @@ $-css-vars-map: (
     }
     .progress {
         height: 0.25rem;
-        margin-bottom: 0;
         border-radius: var(--radius-small);
+        margin-bottom: 0;
     }
     .carousel-items {
         position: relative;
@@ -201,8 +201,8 @@ $-css-vars-map: (
     }
     .icon {
         border: 1px solid var(--carousel-arrow-background);
-        background: var(--carousel-arrow-background);
         border-radius: var(--radius-rounded);
+        background: var(--carousel-arrow-background);
         color: var(--carousel-arrow-color);
         cursor: pointer;
         outline: 0;

diff --git a/packages/buefy/scss/components/checkbox.scss b/packages/buefy/scss/components/checkbox.scss
@@ -58,8 +58,8 @@ $-css-vars-map: (
                 height: var(--checkbox-size);
                 flex-shrink: 0;
                 border: var(--checkbox-border-width) solid var(--checkbox-border-color);
-                background: var(--checkbox-background-color);
                 border-radius: var(--checkbox-border-radius);
+                background: var(--checkbox-background-color);
                 transition: background calc(var(--speed) * 2) var(--easing);
             }
             &:checked,

diff --git a/packages/buefy/scss/components/clockpicker.scss b/packages/buefy/scss/components/clockpicker.scss
@@ -167,8 +167,8 @@ $-css-vars-map: (
 
         .b-clockpicker-btn {
             padding: 0 8px;
-            margin-bottom: 2px;
             border-radius: var(--radius-rounded);
+            margin-bottom: 2px;
             &:hover,
             &.active {
                 background-color: var(--primary);
@@ -197,9 +197,9 @@ $-css-vars-map: (
             height: 100%;
             align-items: center;
             justify-content: center;
-            background-color: var(--grey-lighter);
             // Outer border circle of clock
             border-radius: 50%;
+            background-color: var(--grey-lighter);
 
             &::after {
                 position: absolute;
@@ -286,8 +286,8 @@ $-css-vars-map: (
                     border-width: 2px;
                     border-style: solid;
                     border-color: inherit;
-                    background: transparent;
                     border-radius: 100%;
+                    background: transparent;
                     content: "";
                     transform: translate(-50%, -50%);
                 }

diff --git a/packages/buefy/scss/components/colorpicker.scss b/packages/buefy/scss/components/colorpicker.scss
@@ -113,9 +113,9 @@ svg.b-colorpicker-triangle {
     .sl-range-thumb {
         width: calc(100% / 1 - .25em / 1);
         height: calc(100% / 1 - .25em / 1);
+        border-radius: var(--colorpicker-radius);
         margin: .125em;
         background: transparent;
-        border-radius: var(--colorpicker-radius);
         box-shadow:
             inset 0 0 0 1px #fff,
             0 0 0 1px var(--grey-lighter);
@@ -149,6 +149,7 @@ div.b-colorpicker-square {
         right: 0;
         bottom: 0;
         left: 0;
+        border-radius: var(--colorpicker-radius);
         background:
             conic-gradient(
                 #f00,
@@ -159,12 +160,11 @@ div.b-colorpicker-square {
                 #f0f,
                 #f00
             );
-        border-radius: var(--colorpicker-radius);
 
         .hue-range-thumb {
             position: absolute;
-            aspect-ratio: 1 / 1;
             border-radius: calc(var(--colorpicker-radius) / 1.75);
+            aspect-ratio: 1 / 1;
             box-shadow:
                 inset 0 0 0 1px #fff,
                 0 0 0 1px var(--grey-lighter);
@@ -194,8 +194,8 @@ div.b-colorpicker-square {
         right: 0;
         bottom: 0;
         left: 0;
-        background: #fff;
         border-radius: calc(var(--colorpicker-radius) / 2);
+        background: #fff;
 
         &::before {
             position: absolute;
@@ -242,14 +242,14 @@ div.b-colorpicker-square {
 .b-colorpicker-alpha-slider {
     position: relative;
     height: 1em;
+    border-radius: var(--colorpicker-radius);
     margin-top: .125em;
     margin-bottom: .875rem;
     background-image:
         linear-gradient(45deg, #c7c7c7 25%, transparent 25%, transparent 75%, #c7c7c7 75%, #c7c7c7),
         linear-gradient(45deg, #c7c7c7 25%, transparent 25%, transparent 75%, #c7c7c7 75%, #c7c7c7);
     background-position: .5em .5em, 0 0;
     background-size: 1em 1em;
-    border-radius: var(--colorpicker-radius);
 
     .alpha-range-thumb {
         position: absolute;

diff --git a/packages/buefy/scss/components/datepicker.scss b/packages/buefy/scss/components/datepicker.scss
@@ -61,8 +61,8 @@ $-css-vars-map: (
         }
     }
     .dropdown-content {
-        background-color: var(--datepicker-background-color);
         border-radius: var(--datepicker-radius);
+        background-color: var(--datepicker-background-color);
         box-shadow: var(--datepicker-shadow);
     }
     .dropdown-item {
@@ -137,8 +137,8 @@ $-css-vars-map: (
                             color: var(--grey-lighter);
                         }
                         &.is-within-hovered {
-                            background-color: var(--datepicker-item-hover-background-color);
                             border-radius: 0;
+                            background-color: var(--datepicker-item-hover-background-color);
                             color: var(--datepicker-item-hover-color);
                         }
                         &.is-last-hovered {
@@ -160,8 +160,8 @@ $-css-vars-map: (
                     }
                     &.is-within-selected {
                         --datepicker-item-selected-background-color: #{bulma-utilities.bulmaVarOpacity(primary, 0.5)};
-                        background-color: var(--datepicker-item-selected-background-color);
                         border-radius: 0;
+                        background-color: var(--datepicker-item-selected-background-color);
                     }
                     &.is-last-selected {
                         background-color: var(--datepicker-item-selected-background-color);
@@ -202,8 +202,8 @@ $-css-vars-map: (
                         &.dots .event {
                             width: .35em;
                             height: .35em;
-                            margin: 0 .1em;
                             border-radius: 50%;
+                            margin: 0 .1em;
                         }
                         &.bars .event {
                             width: 100%;

diff --git a/packages/buefy/scss/components/form.scss b/packages/buefy/scss/components/form.scss
@@ -167,7 +167,7 @@ $-css-vars-map: (
                         padding-bottom: 1px;
                     }
                 }
-                &:not(.datepicker):not(.timepicker):not(.taginput) {
+                &:not(.datepicker, .timepicker, .taginput) {
                     .input,
                     .textarea,
                     select {

diff --git a/packages/buefy/scss/components/notices.scss b/packages/buefy/scss/components/notices.scss
@@ -50,9 +50,9 @@ $-css-vars-map: (
     .toast {
         display: inline-flex;
         padding: 0.75em 1.5em;
+        border-radius: var(--toast-border-radius);
         margin: 0.5em 0;
         animation-duration: calc(var(--speed) * 2);
-        border-radius: var(--toast-border-radius);
         box-shadow: var(--toast-box-shadow);
         opacity: var(--toast-opacity);
         pointer-events: auto;
@@ -72,10 +72,10 @@ $-css-vars-map: (
         min-height: 3em;
         align-items: center;
         justify-content: space-around;
+        border-radius: var(--snackbar-border-radius);
         margin: 0.5em 0;
         animation-duration: calc(var(--speed) * 2);
         background: var(--snackbar-background-color);
-        border-radius: var(--snackbar-border-radius);
         box-shadow: var(--snackbar-box-shadow);
         color: var(--snackbar-color);
         pointer-events: auto;
@@ -113,8 +113,8 @@ $-css-vars-map: (
         }
         @include bulma-utilities.mobile {
             width: 100%;
-            margin: 0;
             border-radius: 0;
+            margin: 0;
         }
         @include bulma-utilities.tablet {
             overflow: hidden;

diff --git a/packages/buefy/scss/components/progress.scss b/packages/buefy/scss/components/progress.scss
@@ -68,8 +68,8 @@ $-css-vars-map: (
 
     &.is-not-native {
         @extend .progress;
-        background-color: var(--progress-bar-background-color);
         border-radius: var(--progress-border-radius);
+        background-color: var(--progress-bar-background-color);
         white-space: nowrap;
 
         .progress-bar {

diff --git a/packages/buefy/scss/components/radio.scss b/packages/buefy/scss/components/radio.scss
@@ -57,10 +57,10 @@ $-css-vars-map: (
                     display: flex;
                     width: var(--radio-size);
                     height: var(--radio-size);
+                    border-radius: 50%;
                     margin-bottom: calc(-0.5 * var(--radio-size));
                     margin-left: calc(-0.5 * var(--radio-size));
                     background-color: var(--radio-active-background-color);
-                    border-radius: 50%;
                     content: "";
                     transform: scale(0);
                     transition: transform calc(var(--speed) * 2) var(--easing);

diff --git a/packages/buefy/scss/components/select.scss b/packages/buefy/scss/components/select.scss
@@ -2,7 +2,6 @@
 
 .select {
     select {
-
         padding-right: 2.5em;
         // TODO Remove below when the following problem will be fixed from Bulma or Safari:
         // https://github.com/jgthms/bulma/issues/2626
@@ -11,11 +10,11 @@
         option {
             padding: var(--control-padding-vertical) var(--control-padding-horizontal);
             color: var(--grey-dark);
-        }
-        option:disabled {
-            cursor: not-allowed;
-			color: var(--grey-light);
-            opacity: 0.5;
+            &:disabled {
+                color: var(--grey-light);
+                cursor: not-allowed;
+                opacity: 0.5;
+            }
         }
         optgroup {
             padding: 0.25em 0;

diff --git a/packages/buefy/scss/components/slider.scss b/packages/buefy/scss/components/slider.scss
@@ -85,8 +85,8 @@ $-css-vars-map: (
         position: relative;
         display: flex;
         align-items: center;
-        background: var(--slider-track-background);
         border-radius: var(--slider-radius);
+        background: var(--slider-track-background);
         cursor: pointer;
     }
     .b-slider-fill {
@@ -95,8 +95,8 @@ $-css-vars-map: (
         top: 50%;
         height: 100%;
         border: var(--slider-track-border);
-        background: var(--slider-track-background);
         border-radius: $slider-track-radius;
+        background: var(--slider-track-background);
         box-shadow: var(--slider-track-shadow);
         transform: translateY(-50%);
     }
@@ -111,8 +111,8 @@ $-css-vars-map: (
 
         .b-slider-thumb {
             border: var(--slider-thumb-border);
-            background: var(--slider-thumb-background);
             border-radius: var(--slider-thumb-radius);
+            background: var(--slider-thumb-background);
             box-shadow: var(--slider-thumb-shadow);
             &:focus {
                 transform: scale(1.25);
@@ -178,8 +178,8 @@ $-css-vars-map: (
         position: absolute;
         top: 50%;
         width: var(--slider-tick-width);
-        background: var(--slider-tick-background);
         border-radius: var(--slider-tick-radius);
+        background: var(--slider-tick-background);
         transform: translate(-50%, -50%);
         &.is-tick-hidden {
             background: transparent;

diff --git a/packages/buefy/scss/components/steps.scss b/packages/buefy/scss/components/steps.scss
@@ -192,8 +192,8 @@ $-css-vars-map: (
                     align-items: center;
                     justify-content: center;
                     border: var(--steps-marker-default-border);
-                    background: var(--steps-maker-default-color);
                     border-radius: var(--radius);
+                    background: var(--steps-maker-default-color);
                     color: var(--steps-maker-color);
                     font-weight: var(--weight-bold);
                 }
@@ -455,7 +455,7 @@ $-css-vars-map: (
                     }
                 }
             }
-            &:not(.has-label-right):not(.has-label-left) {
+            &:not(.has-label-right, .has-label-left) {
                 .step-items {
                     .step-item {
                         .step-link {

diff --git a/packages/buefy/scss/components/switch.scss b/packages/buefy/scss/components/switch.scss
@@ -43,8 +43,8 @@ $-css-vars-map: (
             flex-shrink: 0;
             align-items: center;
             padding: var(--switch-padding);
-            background: var(--grey-light);
             border-radius: var(--radius);
+            background: var(--grey-light);
             transition: background calc(var(--speed) * 2) var(--easing), box-shadow calc(var(--speed) * 2) var(--easing);
 
             @each $name, $pair in $switch-colors {
@@ -63,8 +63,8 @@ $-css-vars-map: (
                 display: block;
                 width: calc((var(--switch-width) - var(--switch-padding) * 2) * 0.5);
                 height: calc((var(--switch-width) - var(--switch-padding) * 2) * 0.5);
-                background: var(--background);
                 border-radius: var(--radius);
+                background: var(--background);
                 box-shadow: 0 3px 1px 0 rgba(var(--scheme-invert-rgb), 0.05),
                     0 2px 2px 0 rgba(var(--scheme-invert-rgb), 0.1),
                     0 3px 3px 0 rgba(var(--scheme-invert-rgb), 0.05);

diff --git a/packages/buefy/scss/components/table.scss b/packages/buefy/scss/components/table.scss
@@ -66,7 +66,7 @@ $-css-vars-map: (
             margin-top: -1rem;
         }
     }
-    tr:not(.detail):not(.is-empty):not(.table-footer) {
+    tr:not(.detail, .is-empty, .table-footer) {
         td {
             display: flex;
             width: auto;
@@ -121,8 +121,8 @@ $-css-vars-map: (
     .table {
         width: 100%;
         border: 1px solid transparent;
-        border-collapse: separate;
         border-radius: var(--radius);
+        border-collapse: separate;
         th {
             font-weight: var(--weight-semibold);
             .th-wrap {
@@ -134,9 +134,9 @@ $-css-vars-map: (
                     font-size: 1rem;
                 }
                 &.is-numeric {
+                    width: 95%;
                     flex-direction: row-reverse;
                     text-align: right;
-					width: 95%;
                     .icon {
                         margin-right: 0.5rem;
                         margin-left: 0;

diff --git a/packages/buefy/scss/components/tabs.scss b/packages/buefy/scss/components/tabs.scss
@@ -131,9 +131,9 @@ $-css-vars-map: (
             &.is-boxed {
                 li {
                     a {
+                        border-radius: var(--tabs-boxed-link-radius) 0 0 var(--tabs-boxed-link-radius);
                         border-right-color: var(--tabs-border-bottom-color) !important;
                         border-bottom-color: transparent !important;
-                        border-radius: var(--tabs-boxed-link-radius) 0 0 var(--tabs-boxed-link-radius);
                     }
 
                     &.is-active {
@@ -191,10 +191,10 @@ $-css-vars-map: (
                 &.is-boxed {
                     li {
                         a {
+                            border-radius: 0 var(--tabs-boxed-link-radius) var(--tabs-boxed-link-radius) 0;
                             border-right-color: transparent !important;
                             border-bottom-color: transparent !important;
                             border-left-color: var(--tabs-border-bottom-color) !important;
-                            border-radius: 0 var(--tabs-boxed-link-radius) var(--tabs-boxed-link-radius) 0;
                         }
 
                         &.is-active {

diff --git a/packages/bulma/sass/components/message.sass b/packages/bulma/sass/components/message.sass
@@ -56,7 +56,7 @@ $-css-vars-map: ("message-background-color": $message-background-color, "message
   font-size: var(--message-font-size)
   strong
     color: currentColor
-  a:not(.button):not(.tag):not(.dropdown-item)
+  a:not(.button, .tag, .dropdown-item)
     color: currentColor
     text-decoration: underline
   // Sizes

diff --git a/packages/bulma/sass/components/navbar.sass b/packages/bulma/sass/components/navbar.sass
@@ -485,7 +485,7 @@ a.navbar-item,
   .navbar-link
     &.is-active
       color: var(--navbar-item-active-color)
-    &.is-active:not(:focus):not(:hover)
+    &.is-active:not(:focus, :hover)
       background-color: var(--navbar-item-active-background-color)
   .navbar-item.has-dropdown
     &:focus,