Lint styles

panel/src/scss/components/_animations.scss

@@ -1,19 +1,21 @@
-@keyframes fadeInRight {
+@keyframes fade-in-right {
     from {
         opacity: 0;
         transform: translate3d(150%, 0, 0);
     }
+
     to {
         opacity: 1;
         transform: none;
     }
 }
 
-@keyframes fadeOutRight {
+@keyframes fade-out-right {
     from {
         opacity: 1;
         transform: none;
     }
+
     to {
         opacity: 0;
         transform: translate3d(150%, 0, 0);
@@ -42,6 +44,7 @@
     0% {
         transform: rotate(0deg);
     }
+
     100% {
         transform: rotate(360deg);
     }

panel/src/scss/components/_base.scss

@@ -2,7 +2,7 @@
 
 html {
     font-size: $base-font-size;
-    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
 }
 
 body {
@@ -28,9 +28,11 @@ a {
     outline-color: $link-outline-color;
     text-decoration: none;
     transition: color $transition-time-s;
+
     &:hover {
         color: $color-accent-400;
     }
+
     &:not([href]) {
         cursor: default;
     }

panel/src/scss/components/_buttons.scss

@@ -23,15 +23,18 @@ button,
         color $transition-time-s;
     white-space: nowrap;
     @include user-select-none;
+
     &:hover,
     &:focus {
         border-color: $color-base-500;
         background-color: $color-base-500;
         color: $color-base-100;
     }
+
     &:focus {
         @include focusring($color-base-100);
     }
+
     &[disabled],
     &[disabled]:hover,
     &.disabled,
@@ -42,10 +45,12 @@ button,
         color: $color-base-500;
         pointer-events: none;
     }
+
     &.active {
         border-color: $color-base-500;
         background-color: $color-base-500;
     }
+
     & .icon {
         display: inline-block;
         margin-right: 0.25rem;
@@ -66,12 +71,14 @@ a.button {
     border: $button-border-width solid $color-accent-500;
     background-color: $color-accent-500;
     color: $color-white;
+
     &:hover,
     &:focus {
         border-color: $color-accent-400;
         background-color: $color-accent-400;
         color: $color-white;
     }
+
     &:focus {
         @include focusring;
     }
@@ -81,12 +88,14 @@ a.button {
     border: $button-border-width solid $color-success-500;
     background-color: $color-success-500;
     color: $color-white;
+
     &:hover,
     &:focus {
         border-color: $color-success-400;
         background-color: $color-success-400;
         color: $color-white;
     }
+
     &:focus {
         @include focusring($color-success-500);
     }
@@ -96,12 +105,14 @@ a.button {
     border: $button-border-width solid $color-warning-500;
     background-color: $color-warning-500;
     color: $color-white;
+
     &:hover,
     &:focus {
         border-color: $color-warning-400;
         background-color: $color-warning-400;
         color: $color-white;
     }
+
     &:focus {
         @include focusring($color-warning-500);
     }
@@ -111,12 +122,14 @@ a.button {
     border: $button-border-width solid $color-error-500;
     background-color: $color-error-500;
     color: $color-white;
+
     &:hover,
     &:focus {
         border-color: $color-error-400;
         background-color: $color-error-400;
         color: $color-white;
     }
+
     &:focus {
         @include focusring($color-error-500);
     }
@@ -129,14 +142,17 @@ a.button {
     box-shadow: none;
     cursor: pointer;
     font-size: inherit;
+
     &:hover,
     &:focus {
         background-color: transparent;
         color: $color-accent-500;
     }
+
     &:focus {
         @include focusring;
     }
+
     &[disabled],
     &[disabled]:hover,
     &.disabled,
@@ -144,6 +160,7 @@ a.button {
         background-color: transparent;
         cursor: default;
     }
+
     & .icon {
         margin-right: 0;
     }

panel/src/scss/components/_dark-color-scheme.scss

@@ -1,12 +1,12 @@
 // ===
 // Dark color scheme overrides
 // ===
-$color-base-100: hsl(208deg, 5%, 95%);
-$color-base-200: hsl(208deg, 5%, 78%);
-$color-base-300: hsl(208deg, 5%, 61%);
-$color-base-400: hsl(208deg, 5%, 51%);
-$color-base-500: hsl(208deg, 5%, 31%);
-$color-base-600: hsl(208deg, 5%, 21%);
-$color-base-700: hsl(208deg, 5%, 17%);
-$color-base-800: hsl(208deg, 5%, 13%);
-$color-base-900: hsl(208deg, 5%, 10%);
+$color-base-100: hsl(208deg 5% 95%);
+$color-base-200: hsl(208deg 5% 78%);
+$color-base-300: hsl(208deg 5% 61%);
+$color-base-400: hsl(208deg 5% 51%);
+$color-base-500: hsl(208deg 5% 31%);
+$color-base-600: hsl(208deg 5% 21%);
+$color-base-700: hsl(208deg 5% 17%);
+$color-base-800: hsl(208deg 5% 13%);
+$color-base-900: hsl(208deg 5% 10%);

panel/src/scss/components/_dropdowns.scss

@@ -43,22 +43,27 @@
     cursor: pointer !important;
     font-size: $dropdown-item-font-size;
     white-space: nowrap;
+
     &:hover {
         background-color: $color-base-700;
         color: $color-base-100;
     }
+
     &.disabled {
         color: $color-base-300;
         cursor: default !important;
+
         &:hover {
             background-color: transparent;
             color: $color-base-300;
         }
     }
+
     &.selected {
         background-color: $color-accent-500;
         color: $color-white;
     }
+
     & .icon {
         display: inline-block;
         margin-right: 0.25rem;

panel/src/scss/components/_files-list.scss

@@ -14,6 +14,7 @@
     display: flex;
     align-items: center;
     padding: 0.5rem;
+
     &:hover {
         background-color: $color-base-800;
     }
@@ -97,6 +98,7 @@
     margin-top: 0.25rem;
     margin-right: 0.25rem;
     background-color: $image-picker-thumbnail-caption-background-color;
+
     &:hover,
     &:focus {
         background-color: $color-base-500;

panel/src/scss/components/_login.scss

@@ -22,12 +22,14 @@
     margin: $login-modal-notification-margin $login-modal-notification-margin $login-modal-notification-margin-bottom $login-modal-notification-margin;
     border-top-left-radius: $border-radius;
     border-top-right-radius: $border-radius;
+
     a {
         display: block;
         color: $color-white;
         text-decoration: underline;
         @include ellipsis;
     }
+
     & .icon {
         position: absolute;
         top: 50%;

panel/src/scss/components/_mixins.scss

@@ -8,21 +8,18 @@
         display: table;
         content: "";
     }
+
     &::after {
         clear: both;
     }
 }
 
 @mixin user-select-none {
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
 }
 
 @mixin appearance-none {
-    -webkit-appearance: none;
-    -moz-appearance: none;
+    appearance: none;
 }
 
 @mixin ellipsis {

panel/src/scss/components/_modals.scss

@@ -1,16 +1,16 @@
 .modal-backdrop {
     position: fixed;
     z-index: 16;
-    inset: 0 0 0 0;
     background-color: $backdrop-background-color;
+    inset: 0;
 }
 
 .modal {
     position: fixed;
     z-index: 20;
-    inset: 0 0 0 0;
     display: none;
     align-items: center;
+    inset: 0;
     outline: 0;
 }
 

panel/src/scss/components/_notifications.scss

@@ -12,7 +12,7 @@
     padding: $notification-padding-v $notification-padding-h;
     border-radius: $border-radius;
     margin-bottom: $notification-margin-bottom;
-    animation: fadeInRight $notification-animation-duration $notification-animation-easing;
+    animation: fade-in-right $notification-animation-duration $notification-animation-easing;
     background-color: $color-base-700;
     box-shadow: $notification-box-shadow;
     cursor: default;
@@ -20,13 +20,14 @@
     transition:
         top $transition-time-m ease-in,
         opacity $transition-time-s;
+
     &:hover {
         opacity: $notification-hover-opacity;
     }
 }
 
 .notification.fadeout {
-    animation: fadeOutRight $notification-animation-duration $notification-animation-easing;
+    animation: fade-out-right $notification-animation-duration $notification-animation-easing;
     opacity: 0;
 }
 

panel/src/scss/components/_pages.scss

@@ -30,12 +30,14 @@
     box-shadow: none;
     color: $color-base-300;
     cursor: pointer;
+
     &:hover,
     &:focus {
         border-color: transparent;
         background-color: transparent;
         color: $color-accent-500;
     }
+
     &:focus {
         @include focusring;
     }
@@ -44,6 +46,7 @@
 .pages-item-row {
     padding: $pages-item-padding-v $pages-item-padding-h;
     border-bottom: 1px solid $color-base-600;
+
     &:hover {
         background-color: $color-base-800;
     }
@@ -226,6 +229,7 @@ button .page-language,
                 left: $indent;
                 content: "";
             }
+
             .page-details {
                 padding-left: $pages-level-padding * ($i - 1);
             }
@@ -252,15 +256,18 @@ button .page-language,
     box-shadow: none;
     color: $color-base-300;
     cursor: pointer;
+
     &:hover,
     &:focus {
         border-color: transparent;
         background-color: transparent;
         color: $color-base-300;
     }
+
     &:focus {
         @include focusring;
     }
+
     & .icon {
         display: inline-block;
         margin-right: 0;
@@ -268,6 +275,7 @@ button .page-language,
         opacity: 0;
         transition: opacity $transition-time-s;
     }
+
     &:hover .icon,
     &:focus .icon {
         opacity: 1;

panel/src/scss/components/_panel.scss

@@ -26,6 +26,7 @@
 .view-site {
     color: $color-base-100;
     float: right;
+
     &:hover {
         color: $color-accent-500;
     }
@@ -69,10 +70,12 @@
     box-shadow: none;
     cursor: pointer;
     font-size: $font-size-m;
+
     &:hover {
         background-color: transparent;
         color: $color-accent-500;
     }
+
     &:focus {
         background-color: transparent;
         outline: none;
@@ -107,6 +110,7 @@
     margin: 0;
     margin-bottom: $sidebar-navigation-margin-bottom;
     list-style-type: none;
+
     &:last-child {
         margin-bottom: 0;
     }
@@ -153,6 +157,7 @@
     width: $panel-user-avatar-width;
     border-radius: $border-radius-round;
     transition: box-shadow $transition-time-m ease-out;
+
     .panel-user-card:hover & {
         box-shadow: 0 0 0 0.5rem $color-base-600;
     }
@@ -271,12 +276,14 @@
     box-shadow: none;
     color: $color-base-300;
     cursor: pointer;
+
     &:hover,
     &:focus {
         border-color: transparent;
         background-color: transparent;
         color: $color-accent-500;
     }
+
     &:focus {
         @include focusring;
     }

panel/src/scss/components/_tabs.scss

@@ -12,6 +12,7 @@
     padding: $tabs-tab-padding-v $tabs-tab-padding-h;
     color: $color-base-100;
     cursor: pointer;
+
     &:hover {
         color: $color-base-100;
     }

panel/src/scss/components/_users.scss

@@ -6,8 +6,8 @@
 }
 
 .user-summary-avatar {
-    max-width: 33.33333%;
-    flex: 0 0 33.33333%;
+    max-width: 33.3333%;
+    flex: 0 0 33.3333%;
     padding: $user-summary-cell-padding;
     text-align: center;
 }
@@ -34,6 +34,7 @@
 .users-item {
     padding: $users-item-padding-v $users-item-padding-h;
     border-bottom: 1px solid $color-base-600;
+
     &:hover {
         background-color: $color-base-800;
     }

panel/src/scss/components/_variables.scss

@@ -15,15 +15,15 @@ $responsive-breakpoints: (
 // Colors
 // ===
 
-$color-base-100: hsl(208deg, 10%, 15%) !default;
-$color-base-200: hsl(208deg, 10%, 32%) !default;
-$color-base-300: hsl(208deg, 10%, 49%) !default;
-$color-base-400: hsl(208deg, 10%, 59%) !default;
-$color-base-500: hsl(208deg, 10%, 79%) !default;
-$color-base-600: hsl(208deg, 10%, 89%) !default;
-$color-base-700: hsl(208deg, 10%, 93%) !default;
-$color-base-800: hsl(208deg, 10%, 97%) !default;
-$color-base-900: hsl(208deg, 10%, 99%) !default;
+$color-base-100: hsl(208deg 10% 15%) !default;
+$color-base-200: hsl(208deg 10% 32%) !default;
+$color-base-300: hsl(208deg 10% 49%) !default;
+$color-base-400: hsl(208deg 10% 59%) !default;
+$color-base-500: hsl(208deg 10% 79%) !default;
+$color-base-600: hsl(208deg 10% 89%) !default;
+$color-base-700: hsl(208deg 10% 93%) !default;
+$color-base-800: hsl(208deg 10% 97%) !default;
+$color-base-900: hsl(208deg 10% 99%) !default;
 
 $color-accent-100: $color-blue-100;
 $color-accent-200: $color-blue-200;
@@ -127,8 +127,8 @@ $dropdown-box-shadow: 1px 1px 0.75rem 0 rgba($color-black, 0.25);
 // Typography
 // ===
 
-$base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-$mono-font-family: "SFMono-Regular", "SF Mono", "Cascadia Mono", "Liberation Mono", Menlo, Consolas, monospace;
+$base-font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
+$mono-font-family: "SFMono-Regular", "SF Mono", "Cascadia Mono", "Liberation Mono", "Menlo", "Consolas", monospace;
 
 $base-font-size: 100%;
 $base-line-height: 1.5;
@@ -467,8 +467,9 @@ $main-margin-left: $main-margin + $sidebar-width;
 
 $component-margin-bottom: 1rem;
 $component-padding: 1.5rem;
-$component-box-shadow: 0.125rem 0.125rem 0.25rem -0.125rem rgba(80, 80, 80, 10%),
-    0 0 0.25rem 0 rgba(80, 80, 80, 10%);
+$component-box-shadow:
+    0.125rem 0.125rem 0.25rem -0.125rem rgb(80 80 80 / 10%),
+    0 0 0.25rem 0 rgb(80 80 80 / 10%);
 
 $caption-margin-bottom: 1rem;
 $caption-letter-spacing: 1px;

panel/src/scss/components/forms/_forms-base.scss

@@ -12,14 +12,17 @@ input {
     font-size: $input-font-size;
     line-height: $input-line-height;
     @include appearance-none;
+
     &:focus {
         border-color: $color-accent-500;
         @include focusring;
     }
+
     &[disabled] {
         background-color: $color-base-700;
         color: $color-base-300;
     }
+
     &[readonly] {
         // Safari Mobile bug
         @include user-select-none;
@@ -39,8 +42,9 @@ input[type="file"] {
     padding: 0;
     border: none;
     border-radius: 0;
+
     &::-webkit-file-upload-button {
-        -webkit-appearance: button;
+        appearance: button;
         font: inherit;
     }
 }
@@ -56,6 +60,7 @@ input[type="search"] {
     padding-left: $input-search-padding-left;
     background: $color-base-900 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="#{urlencode-color($color-base-300)}" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2 7a5 5 0 007.965 4.026l.005.004 2.5 2.5a.75.75 0 101.06-1.06l-2.5-2.5-.004-.005A5 5 0 102 7zm1.5 0a3.5 3.5 0 107 0 3.5 3.5 0 00-7 0z" clip-rule="evenodd"/></svg>') no-repeat left 0.5rem top 0.375rem;
     background-size: 1rem 1rem;
+
     &::-webkit-search-cancel-button {
         display: none;
     }
@@ -67,7 +72,9 @@ select,
     background: $color-base-900 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'><path fill='#{urlencode-color($color-base-300)}' d='M0 0h32L16 24z'/></svg>") no-repeat right 0.75rem center;
     background-color: $color-base-900;
     background-size: 8px 6px;
+    /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
     @extend input;
+
     &:-moz-focusring {
         color: transparent;
         text-shadow: 0 0 0 $color-base-100;
@@ -79,6 +86,7 @@ textarea {
     min-height: 3 * $input-font-size * $input-line-height + $input-padding-v * 2;
     max-height: 30 * $input-font-size * $input-line-height + $input-padding-v * 2;
     resize: vertical;
+    /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
     @extend input;
 }
 
@@ -124,6 +132,7 @@ textarea {
     color: $color-base-100;
     transform: translateY(-50%);
     transition: color $transition-time-s;
+
     &:hover {
         color: $color-accent-500;
     }

panel/src/scss/components/forms/_forms-date.scss

@@ -37,14 +37,17 @@
     cursor: pointer;
     font-size: $font-size-s;
     outline: none;
+
     &:hover {
         color: $color-accent-500;
     }
+
     &:focus {
         outline: none;
     }
 }
 
+/* stylelint-disable-next-line selector-class-pattern */
 .calendar-buttons .currentMonth {
     font-weight: 600;
 }
@@ -75,6 +78,7 @@
     transition:
         background-color $transition-time-s,
         color $transition-time-s;
+
     &:hover {
         background-color: $color-accent-400;
         color: $color-white;

panel/src/scss/components/forms/_forms-duration.scss

@@ -23,10 +23,11 @@
     padding: 0;
     border: 0;
     margin: 0;
-    -moz-appearance: textfield;
+    appearance: textfield;
     background-color: $color-base-700;
     text-align: center;
     vertical-align: baseline;
+
     &::-webkit-inner-spin-button,
     &::-webkit-outer-spin-button {
         margin: 0;

panel/src/scss/components/forms/_forms-editor.scss

@@ -15,14 +15,17 @@
     margin-bottom: 0;
     background-color: $color-base-800;
     box-shadow: none;
+
     &:hover,
     &:focus {
         background-color: $color-base-600;
         color: $color-accent-500;
     }
+
     &:focus {
         @include focusring;
     }
+
     & .icon {
         margin-right: 0;
     }
@@ -37,11 +40,13 @@
     margin-bottom: $input-margin-bottom;
     font-family: $base-font-family;
     font-size: $font-size-m;
+
     &:focus {
         outline: none;
     }
 }
 
+/* stylelint-disable selector-class-pattern */
 .CodeMirror {
     min-height: 3 * $font-size-m * $base-line-height + $editor-textarea-padding-v * 2;
     max-height: 30 * $font-size-m * $base-line-height + $editor-textarea-padding-v * 2;
@@ -108,12 +113,6 @@
     background: $selection-background-color;
 }
 
-.CodeMirror-line::-moz-selection,
-.CodeMirror-line > span::-moz-selection,
-.CodeMirror-line > span > span::-moz-selection {
-    background: $selection-background-color;
-}
-
 .cm-formatting-code-block,
 .cm-formatting-list {
     display: inline !important;
@@ -123,6 +122,7 @@
 .cm-image-alt-text,
 .cm-url {
     display: none;
+
     .CodeMirror-activeline & {
         display: inline;
     }

panel/src/scss/components/forms/_forms-file.scss

@@ -18,6 +18,7 @@
     color: $color-base-100;
     text-align: center;
     transition: background-color $transition-time-m;
+
     &:hover {
         background-color: $color-base-700;
     }

panel/src/scss/components/forms/_forms-range.scss

@@ -8,6 +8,7 @@ input[type="range"] {
     margin-bottom: 0;
     background-color: transparent;
     @include appearance-none;
+
     &::-webkit-slider-runnable-track {
         width: 100%;
         height: $input-range-track-height;
@@ -17,6 +18,7 @@ input[type="range"] {
         background-color: $color-base-500;
         cursor: default;
     }
+
     &::-webkit-slider-thumb {
         width: $input-range-thumb-width;
         height: $input-range-thumb-height;
@@ -28,6 +30,7 @@ input[type="range"] {
         transition: background-color $transition-time-s;
         @include appearance-none;
     }
+
     &::-moz-range-track {
         width: 100%;
         height: $input-range-track-height;
@@ -36,6 +39,7 @@ input[type="range"] {
         background: linear-gradient(90deg, $color-accent-500 var(--progress), $color-base-500 var(--progress));
         background-color: $color-base-500;
     }
+
     &::-moz-range-thumb {
         width: $input-range-thumb-width;
         height: $input-range-thumb-height;
@@ -46,24 +50,30 @@ input[type="range"] {
         transition: background-color $transition-time-s;
         @include appearance-none;
     }
+
     &:focus {
         outline: none;
     }
+
     &:hover::-webkit-slider-thumb,
     &:hover::-moz-range-thumb {
         background-color: $color-accent-400;
     }
+
     &[disabled] {
         background-color: transparent;
+
         &::-webkit-slider-thumb,
         &::-moz-range-thumb {
             background-color: $color-base-300;
         }
     }
+
     &:focus::-webkit-slider-thumb {
         background-color: $color-accent-400;
         @include focusring;
     }
+
     &:focus::-moz-range-thumb {
         background-color: $color-accent-400;
         @include focusring;

panel/src/scss/components/forms/_forms-tag.scss

@@ -29,6 +29,7 @@
     font-family: inherit;
     font-size: $font-size-s;
     line-height: inherit;
+
     &:focus {
         outline: none;
     }
@@ -66,6 +67,7 @@
     color: $color-base-100;
     font-style: normal;
     transition: color $transition-time-s;
+
     &:hover {
         color: $color-accent-500;
     }