fix lint errors

apps/app/src/components/Admin/App/MaskedInput.module.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable selector-class-pattern */
+
 .MaskedInput {
   position: relative;
   display: flex;
@@ -5,7 +7,7 @@
 
 .PasswordReveal {
   position: absolute;
-  top: 0rem;
+  top: 0;
   right: 0.5rem;
   left: auto;
   font-size: 1.4rem;

apps/app/src/components/Admin/UserManagement.module.scss

@@ -4,6 +4,7 @@
 .search-typeahead :global {
   position: relative;
   width: 100%;
+
   // corner radius
   border-top-right-radius: bs.$border-radius;
   border-bottom-right-radius: bs.$border-radius;

apps/app/src/components/Common/CopyDropdown/CopyDropdown.module.scss

@@ -1,5 +1,4 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '@growi/ui/scss/atoms/btn-muted';
 
 .grw-copy-dropdown :global {

apps/app/src/components/Common/DrawerToggler/DrawerToggler.module.scss

@@ -1,5 +1,4 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '~/styles/variables' as var;
 
 
@@ -7,7 +6,6 @@
   .btn {
     --bs-btn-color: rgba(var(--bs-tertiary-color-rgb), 0.5);
     --bs-btn-bg: transparent;
-
     --bs-btn-hover-color: rgba(var(--bs-tertiary-color-rgb), 0.7);
 
     width: var.$grw-sidebar-nav-width;

apps/app/src/components/Common/PagePathNav/PagePathNav.module.scss

@@ -1,5 +1,4 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '@growi/ui/scss/atoms/btn-muted';
 
 .grw-mx-02em {

apps/app/src/components/Common/PageViewLayout.module.scss

@@ -1,5 +1,4 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '~/styles/mixins';
 @use '~/styles/variables' as var;
 
@@ -9,13 +8,14 @@ $page-view-layout-margin-top: 32px;
 
 .page-view-layout :global {
   $page-content-footer-min-heigh: 130px;
+
   min-height: calc(100vh - #{$subnavigation-height + $page-view-layout-margin-top + $page-content-footer-min-heigh});
 }
 
 // fluid layout
 .fluid-layout :global {
   .grw-container-convertible {
-    @include mixins.fluid-layout();
+    @include mixins.fluid-layout;
   }
 }
 
@@ -42,6 +42,7 @@ $page-view-layout-margin-top: 32px;
     position: sticky;
 
     $page-path-nav-height: 99px;
+
     top: calc($subnavigation-height + $page-view-layout-margin-top + $page-path-nav-height + 4px);
   }
 }

apps/app/src/components/CustomNavigation/CustomNav.module.scss

@@ -10,7 +10,7 @@
   }
 
   .grw-nav-slide-hr {
-    border-top: 0rem;
+    border-top: 0;
     border-bottom: 3px solid;
     transition: 0.3s ease-in-out;
   }

apps/app/src/components/ItemsTree/ItemsTree.module.scss

@@ -0,0 +1,4 @@
+/* stylelint-disable-next-line block-no-empty */
+.items-tree :global {
+
+}

apps/app/src/components/ItemsTree/ItemsTreeContentSkeleton.module.scss

@@ -2,10 +2,12 @@
 
 .text-skeleton-level1 {
   @include mixins.grw-skeleton-text($font-size:16px, $line-height: 40px);
+
   padding-left: 12px;
 }
 
 .text-skeleton-level2 {
   @extend .text-skeleton-level1;
+
   padding-left: 12px + 10px * 2;
 }

apps/app/src/components/Layout/Admin.module.scss

@@ -114,6 +114,7 @@ $slack-work-space-name-card-border: #efc1f6;
       border-width: 2px;
     }
   }
+
   // TODO: change to utility class on Bootstrap 5
   .slack-connection-log {
     .slack-connection-log-title {
@@ -173,6 +174,7 @@ $slack-work-space-name-card-border: #efc1f6;
       &.with-proxy {
         .hr-container {
           margin-top: 40px;
+
           @include media-breakpoint-up(lg) {
             margin-top: 65px;
           }
@@ -189,7 +191,7 @@ $slack-work-space-name-card-border: #efc1f6;
   //// TODO: migrate to Bootstrap 4
   //// omit all .btn-toggle and use Switches
   //// https://getbootstrap.com/docs/4.2/components/forms/#switches
-  //
+
   // Toggle Twitter Bootstrap button class when active
   // https://jsfiddle.net/ms040m01/3/
   // @mixin active-color($color, $bg-color, $border-color) {

apps/app/src/components/Layout/NoLoginLayout.module.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable scss/no-global-function-names */
+
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use '@growi/core-styles/scss/variables/growi-official-colors' as var;
 
@@ -5,6 +7,11 @@
 .nologin :global {
   height: 100vh;
 
+  .nologin-header,
+  .nologin-dialog {
+    max-width: 480px;
+  }
+
   // layout
   .main {
     width: 100vw;
@@ -54,11 +61,6 @@
     }
   }
 
-  .nologin-header,
-  .nologin-dialog {
-    max-width: 480px;
-  }
-
 }
 
 .link-switch {
@@ -80,9 +82,10 @@
   .nologin :global {
     // background color
     $color-gradient: #3c465c;
-    background: linear-gradient(45deg, darken($color-gradient, 30%) 0%, hsla(340, 100%, 55%, 0) 70%),
-      linear-gradient(135deg, var.$growi-green 10%, hsla(225, 95%, 50%, 0) 70%), linear-gradient(225deg, var.$growi-blue 10%, hsla(140, 90%, 50%, 0) 80%),
-      linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
+
+    background: linear-gradient(45deg, darken($color-gradient, 30%) 0%, hsla(340deg, 100%, 55%, 0%) 70%),
+      linear-gradient(135deg, var.$growi-green 10%, hsla(225deg, 95%, 50%, 0%) 70%), linear-gradient(225deg, var.$growi-blue 10%, hsla(140deg, 90%, 50%, 0%) 80%),
+      linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35deg, 95%, 55%, 0%) 70%);
 
     .nologin-header {
       background-color: rgba(white, 0.3);
@@ -134,9 +137,10 @@
   .nologin :global {
     // background color
     $color-gradient: #3c465c;
-    background: linear-gradient(45deg, darken($color-gradient, 30%) 0%, hsla(340, 100%, 55%, 0) 70%),
-      linear-gradient(135deg, var.$growi-green 10%, hsla(225, 95%, 50%, 0) 70%), linear-gradient(225deg, var.$growi-blue 10%, hsla(140, 90%, 50%, 0) 80%),
-      linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35, 95%, 55%, 0) 70%);
+
+    background: linear-gradient(45deg, darken($color-gradient, 30%) 0%, hsla(340deg, 100%, 55%, 0%) 70%),
+      linear-gradient(135deg, var.$growi-green 10%, hsla(225deg, 95%, 50%, 0%) 70%), linear-gradient(225deg, var.$growi-blue 10%, hsla(140deg, 90%, 50%, 0%) 80%),
+      linear-gradient(315deg, darken($color-gradient, 25%) 100%, hsla(35deg, 95%, 55%, 0%) 70%);
 
     .nologin-header {
       background-color: rgba(black, 0.3);

apps/app/src/components/LoginForm/LoginForm.module.scss

@@ -1,5 +1,4 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '~/styles/atoms/placeholders/buttons';
 
 .login-form :global {
@@ -24,8 +23,8 @@
   }
 
   .text-line {
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       flex-grow: 1;
       height: 1px;
       margin:0 1em;

apps/app/src/components/Me/ColorModeSettings.tsx

@@ -4,8 +4,6 @@ import { useTranslation } from 'react-i18next';
 
 import { Themes, useNextThemes } from '~/stores/use-next-themes';
 
-// import styles from './ColorModeSettings.module.scss';
-
 
 type ColorModeSettingsButtonProps = {
   isActive: boolean,

apps/app/src/components/Navbar/GrowiContextualSubNavigation.module.scss

@@ -9,7 +9,7 @@
   }
 }
 
-@include mixins.editing() {
+@include mixins.editing {
   .grw-contextual-sub-navigation {
     position: fixed;
     right: 0;

apps/app/src/components/Navbar/GrowiNavbarBottom.module.scss

@@ -4,7 +4,8 @@
 .grw-navbar-bottom :global {
   // apply transition
   transition-property: bottom;
-  @include mixins.apply-navigation-transition();
+
+  @include mixins.apply-navigation-transition;
 
   .navbar {
     height: var.$grw-navbar-bottom-height;

apps/app/src/components/Navbar/PageEditorModeManager.module.scss

@@ -20,6 +20,7 @@
 .grw-page-editor-mode-manager-skeleton :global {
   width: 90px;
   height: 38px;
+
   @include bs.media-breakpoint-up(md) {
     width: 179px;
     height: 30px;
@@ -47,6 +48,7 @@
     }
   }
 }
+
 @include bs.color-mode(dark) {
   .grw-page-editor-mode-manager :global {
     .btn {

apps/app/src/components/PageAccessoriesModal/PageAccessoriesModal.module.scss

@@ -1,7 +1,7 @@
 .grw-page-accessories-modal :global {
   .modal-header {
     button.btn-close {
-      margin: auto 0rem auto auto;
+      margin: auto 0 auto auto;
     }
   }
 
@@ -13,6 +13,6 @@
     max-height: calc(100vh - 100px);
   }
   ul.pagination {
-    margin-bottom: 0rem;
+    margin-bottom: 0;
   }
 }

apps/app/src/components/PageComment/Comment.module.scss

@@ -1,14 +1,12 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '../../styles/variables' as var;
-@use './_comment-inheritance';
+@use './comment-inheritance';
 
 .comment-styles :global {
 
   .page-comment {
     position: relative;
     pointer-events: none;
-
     scroll-margin-top: var.$grw-scroll-margin-top-in-view;
 
     // background
@@ -49,8 +47,9 @@
     }
 
     // older comments
-    &.page-comment-older {
-    }
+    // &.page-comment-older {
+    // }
+
     // newer comments
     &.page-comment-newer {
       opacity: 0.7;
@@ -71,7 +70,6 @@
     .page-comment-meta {
       display: flex;
       justify-content: flex-end;
-
       font-size: 0.9em;
       color: bs.$gray-400;
     }
@@ -84,6 +82,7 @@
     height: 66px;
     padding: 1em;
     margin-left: 4.5em;
+
     @include bs.media-breakpoint-down(xs) {
       margin-left: 3.5em;
     }

apps/app/src/components/PageComment/CommentEditor.module.scss

@@ -31,8 +31,7 @@
     min-height: comment-inheritance.$codemirror-default-height !important;
   }
   .comment-preview-container {
-    min-height: page-editor-inheritance.$navbar-editor-height
-      + comment-inheritance.$codemirror-default-height;
+    min-height: page-editor-inheritance.$navbar-editor-height + comment-inheritance.$codemirror-default-height;
     padding-top: 0.5em;
   }
 }

apps/app/src/components/PageComment/CommentPreview.module.scss

@@ -1,2 +1,3 @@
+/* stylelint-disable-next-line block-no-empty */
 .grw-comment-preview {
 }

apps/app/src/components/PageComment/DeleteCommentModal.module.scss

@@ -3,6 +3,7 @@
   .modal-content .modal-body {
     .comment-body {
       max-height: 13em;
+
       // scrollable
       overflow-y: auto;
     }

apps/app/src/components/PageComment/SwitchingButtonGroup.module.scss

@@ -31,6 +31,7 @@
     }
   }
 }
+
 @include bs.color-mode(dark) {
   .btn-group-switching :global {
     .btn {

apps/app/src/components/PageComment/_comment-inheritance.scss

@@ -5,7 +5,7 @@
   padding: 1em;
 
   // speech balloon
-  &:before {
+  &::before {
     position: absolute;
     top: 1.5em;
     left: -1em;
@@ -32,8 +32,8 @@ $codemirror-default-height: 300px;
 @include bs.color-mode(light) {
   %bg-comment {
     background-color: rgba( bs.$gray-200, 0.5 );
-    border: 1px solid bs.$gray-200;
     backdrop-filter: blur(10px);
+    border: 1px solid bs.$gray-200;
   }
 }
 
@@ -41,7 +41,7 @@ $codemirror-default-height: 300px;
 @include bs.color-mode(dark) {
   %bg-comment {
     background-color: rgba( bs.$gray-800, 0.3 );
-    border: 1px solid bs.$gray-700;
     backdrop-filter: blur(10px);
+    border: 1px solid bs.$gray-700;
   }
 }

apps/app/src/components/PageControls/BookmarkButtons.module.scss

@@ -1,7 +1,5 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '@growi/ui/scss/atoms/btn-muted';
-
 @use './button-styles';
 
 .btn-group-bookmark :global {
@@ -13,12 +11,14 @@
   }
   .total-counts {
     @extend %btn-total-counts-basis;
+
     padding-left: 5px;
   }
 }
 
 // == Colors
 .btn-group-bookmark :global {
+  /* stylelint-disable-next-line no-descending-specificity */
   .btn-bookmark {
     @include btn-muted.colorize(bs.$orange);
   }

apps/app/src/components/PageControls/LikeButtons.module.scss

@@ -1,7 +1,5 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '@growi/ui/scss/atoms/btn-muted';
-
 @use './button-styles';
 
 .btn-group-like :global {
@@ -13,6 +11,7 @@
   }
   .total-counts {
     @extend %btn-total-counts-basis;
+
     padding-left: 5px;
   }
 }

apps/app/src/components/PageControls/PageControls.module.scss

@@ -1,7 +1,5 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '@growi/ui/scss/atoms/btn-muted';
-
 @use './button-styles';
 
 // PageItemControl styles

apps/app/src/components/PageControls/SearchButton.module.scss

@@ -1,7 +1,5 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '@growi/ui/scss/atoms/btn-muted';
-
 @use './button-styles';
 
 .btn-search :global {

apps/app/src/components/PageControls/SeenUserInfo.module.scss

@@ -1,7 +1,5 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '@growi/ui/scss/atoms/btn-muted';
-
 @use './button-styles';
 
 .grw-seen-user-info :global {

apps/app/src/components/PageControls/SubscribeButton.module.scss

@@ -1,7 +1,5 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '@growi/ui/scss/atoms/btn-muted';
-
 @use './button-styles';
 
 .btn-subscribe :global {

apps/app/src/components/PageEditor/EditorNavbar/EditorNavbar.module.scss

@@ -2,6 +2,7 @@
 
 .editor-navbar :global {
   min-height: 72px;
+
   @include bs.media-breakpoint-down(sm) {
     min-height: 96px;
   }

apps/app/src/components/PageEditor/EditorNavbarBottom.module.scss

@@ -2,7 +2,7 @@
 @use '~/styles/variables' as var;
 @use '~/styles/mixins';
 
-@include mixins.editing() {
+@include mixins.editing {
   .grw-editor-navbar-bottom :global {
     .grw-grant-selector {
       max-width: 250px;

apps/app/src/components/PageEditor/GridEditModal.module.scss

@@ -6,13 +6,13 @@
   .mobile-preview {
     .row {
       height: 140px;
-      margin: 0px;
+      margin: 0;
     }
   }
   .desktop-preview {
     .row {
       div {
-        padding: 0px;
+        padding: 0;
       }
     }
   }
@@ -20,7 +20,7 @@
   .tablet-preview {
     .row {
       div {
-        padding: 0px;
+        padding: 0;
       }
     }
   }
@@ -29,13 +29,14 @@
     width: 75%;
     .row {
       div {
-        padding: 0px;
+        padding: 0;
       }
     }
   }
 
   .grid-division-menu {
     width: 60vw;
+
     @include bs.media-breakpoint-down(lg) {
       width: 80vw;
     }

apps/app/src/components/PageEditor/HandsontableModal.module.scss

@@ -35,7 +35,7 @@
       padding-right: 35px;
       padding-left: 10px;
 
-      i:before {
+      i::before {
         position: absolute;
         top: 6px;
         right: 8px;

apps/app/src/components/PageEditor/LinkEditPreview.module.scss

@@ -1,8 +1,8 @@
 .linkedit-preview {
   .page-editor-preview-body {
     max-height: 70vh;
-    padding-top: 0px;
-    margin: 0px -10px 0px -10px;
+    padding-top: 0;
+    margin: 0 -10px;
     .wiki {
       overflow-y: scroll;
       font-size: 0.5rem;

apps/app/src/components/PageEditor/Preview.module.scss

@@ -3,7 +3,7 @@
 .page-editor-preview-body :global {
   .wiki {
     max-width: 980px;
-    padding: 0px 15px;
+    padding: 0 15px;
     margin: 0 auto;
   }
 }
@@ -13,7 +13,7 @@
   &:global {
     &.fluid-layout {
       .wiki {
-        @include mixins.fluid-layout();
+        @include mixins.fluid-layout;
       }
     }
   }

apps/app/src/components/PageHeader/PageHeader.module.scss

@@ -1,2 +1,3 @@
+/* stylelint-disable-next-line block-no-empty */
 .page-header :global {
 }

apps/app/src/components/PageSideContents/PageAccessoriesControl.module.scss

@@ -14,7 +14,7 @@
 
 @include bs.media-breakpoint-down(sm) {
   .btn-page-accessories :global {
-    box-shadow: 0px 3px 6px rgba(black, 0.15);
+    box-shadow: 0 3px 6px rgba(black, 0.15);
   }
 }
 

apps/app/src/components/PageSideContents/PageSideContents.module.scss

@@ -1,2 +1,3 @@
+/* stylelint-disable-next-line block-no-empty */
 .grw-page-accessories-controls :global {
 }

apps/app/src/components/PageTags/TagLabels.module.scss

@@ -35,7 +35,8 @@ $grw-tag-label-font-size: 12px;
 
 .grw-tag-icon-button {
   padding: 6px 8px;
+
   @include bs.media-breakpoint-down(sm) {
-    box-shadow: 0px 3px 6px rgba(black, 0.15);
+    box-shadow: 0 3px 6px rgba(black, 0.15);
   }
 }

apps/app/src/components/RevisionComparer/RevisionComparer.module.scss

@@ -1,5 +1,4 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '@growi/ui/scss/atoms/btn-muted';
 
 .revision-compare :global {

apps/app/src/components/SearchPage/SearchControl.module.scss

@@ -1,6 +1,5 @@
 
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '@growi/ui/scss/atoms/btn-muted';
 
 // == Colors

apps/app/src/components/SearchPage/SearchResultContent.module.scss

@@ -1,10 +1,11 @@
 @use '~/styles/mixins';
 
+/* stylelint-disable-next-line block-no-empty */
 .search-result-content :global {
 }
 
 .fluid-layout :global {
   .grw-container-convertible {
-    @include mixins.fluid-layout();
+    @include mixins.fluid-layout;
   }
 }

apps/app/src/components/Sidebar/AppTitle/AppTitle.module.scss

@@ -1,9 +1,6 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '@growi/core-styles/scss/variables/growi-official-colors';
-
 @use '~/styles/variables' as var;
-
 @use '../button-styles';
 
 // GROWI Logo
@@ -55,6 +52,7 @@
     $grw-page-editor-mode-manager-width: 140px;
     $gap: 24px;
     $grw-contextual-subnavigation-padding-right: 24px;
+
     width: calc(100vw - #{var.$grw-sidebar-nav-width + $grw-page-controls-width + $grw-page-editor-mode-manager-width + $grw-contextual-subnavigation-padding-right + $gap * 2});
   }
 }

apps/app/src/components/Sidebar/PageCreateButton/CreateButton.module.scss

@@ -1,5 +1,4 @@
 @use '~/styles/variables' as var;
-
 @use '../button-styles';
 
 .btn-create :global {

apps/app/src/components/Sidebar/PageCreateButton/DropendToggle.module.scss

@@ -1,5 +1,4 @@
 @use '~/styles/variables' as var;
-
 @use '../button-styles';
 
 .btn-toggle :global {
@@ -10,7 +9,7 @@
 
   .icon {
     top: 50%;
-    right: 0px;
+    right: 0;
     font-size: 22px;
     transform: translateY(-50%);
   }
@@ -29,10 +28,7 @@
 // hitarea
 .btn-toggle :global {
   .hitarea {
-    top: 0;
-    right: -10px;
-    bottom: 0;
-    left: 0;
+    inset: 0 -10px 0 0;
   }
 }
 

apps/app/src/components/Sidebar/PageCreateButton/PageCreateButton.module.scss

@@ -1,2 +0,0 @@
-.grw-page-create-button :global {
-}

apps/app/src/components/Sidebar/RecentChanges/RecentChangesSubstance.module.scss

@@ -10,16 +10,19 @@
 
   .grw-recent-changes-skeleton-small {
     @include grw-skeleton-text($font-size: 14px, $line-height: 16px);
+
     max-width: 120px;
   }
 
   .grw-recent-changes-skeleton-h5 {
     @include grw-skeleton-h5;
+
     max-width: 120px;
   }
 
   .grw-recent-changes-skeleton-date {
     @include grw-skeleton-text($font-size: 10px, $line-height: 12px);
+
     width: 80px;
   }
 

apps/app/src/components/Sidebar/ResizableArea/ResizableArea.module.scss

@@ -9,8 +9,8 @@
 
 .grw-navigation-draggable :global {
   position: absolute;
-  top: 0px;
-  bottom: 0px;
+  top: 0;
+  bottom: 0;
   left: 100%;
 
   .grw-navigation-draggable-hitarea {

apps/app/src/components/Sidebar/Sidebar.module.scss

@@ -1,5 +1,4 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '~/styles/variables' as var;
 @use '~/styles/mixins';
 
@@ -60,7 +59,8 @@
 
       // apply transition
       transition-property: transform;
-      @include mixins.apply-navigation-transition();
+
+      @include mixins.apply-navigation-transition;
 
       &:not(.open) {
         transform: translateX(-100%);
@@ -82,6 +82,7 @@
       background-color: color-mix(in srgb, var(--grw-highlight-100), var(--bs-body-bg));
     }
   }
+
   // frosted glass effect in collapsed mode
   .grw-sidebar {
     &:global {
@@ -104,6 +105,7 @@
       background-color: color-mix(in srgb, var(--grw-highlight-800), var(--bs-body-bg));
     }
   }
+
   // frosted glass effect in collapsed mode
   .grw-sidebar {
     &:global {

apps/app/src/components/Sidebar/SidebarContents.module.scss

@@ -1,7 +1,6 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
 
 .grw-sidebar-contents :global {
-
   --bs-heading-color: var(--bs-tertiary-color);
   --bs-body-color: var(--bs-secondary-color);
   --bs-link-color-rgb: var(--bs-secondary-color-rgb);

apps/app/src/components/Sidebar/SidebarHead/SidebarHead.module.scss

@@ -13,6 +13,7 @@
     );
   }
 }
+
 @include bs.color-mode(dark) {
   .grw-sidebar-head :global {
     background-color: var(

apps/app/src/components/Sidebar/SidebarHead/ToggleCollapseButton.module.scss

@@ -1,14 +1,13 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '~/styles/variables' as var;
 @use '~/styles/mixins';
-
 @use '../button-styles';
 
 .btn-toggle-collapse :global {
   @extend %btn-basis;
 
   $height: var.$grw-sidebar-nav-width; // declare $height with the same value as the sidebar nav width
+
   height: $height;
 }
 
@@ -25,7 +24,7 @@
 }
 
 // Hide when editing
-@include mixins.editing() {
+@include mixins.editing {
   .btn-toggle-collapse {
     visibility: hidden;
   }
@@ -48,6 +47,7 @@
     }
   }
 }
+
 @include bs.color-mode(light) {
   .btn-toggle-collapse {
     &:global {
@@ -58,6 +58,7 @@
     }
   }
 }
+
 @include bs.color-mode(dark) {
   .btn-toggle-collapse {
     &:global {

apps/app/src/components/Sidebar/SidebarNav/PersonalDropdown.module.scss

@@ -25,6 +25,7 @@
 
   .personal-dropdown-item :global {
     --bs-link-color-rgb:var(--bs-gray-600);
+
     color: var(--bs-gray-600);
   }
 }
@@ -36,6 +37,7 @@
 
   .personal-dropdown-item :global {
     --bs-link-color-rgb:var(--bs-gray-500);
+
     color: var(--bs-gray-500);
   }
 }

apps/app/src/components/Sidebar/SidebarNav/PrimaryItems.module.scss

@@ -1,7 +1,5 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '../button-styles';
-
 @use '../variables' as sidebarVar;
 
 .grw-primary-items :global {
@@ -29,7 +27,7 @@
       position: relative;
 
       // indicator
-      &:after {
+      &::after {
         position: absolute;
         top: 0;
         left: 0;
@@ -55,6 +53,7 @@
     @extend %btn-primary-color-vars;
   }
 }
+
 @include bs.color-mode(light) {
   .grw-primary-items :global {
     .btn-primary {
@@ -63,6 +62,7 @@
     }
   }
 }
+
 @include bs.color-mode(dark) {
   .grw-primary-items :global {
     .btn-primary {

apps/app/src/components/Sidebar/SidebarNav/SecondaryItems.module.scss

@@ -1,5 +1,4 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '../button-styles';
 
 
@@ -22,6 +21,7 @@
     @extend %btn-primary-color-vars;
   }
 }
+
 @include bs.color-mode(light) {
   .grw-secondary-items :global {
     .btn-primary {
@@ -30,6 +30,7 @@
     }
   }
 }
+
 @include bs.color-mode(dark) {
   .grw-secondary-items :global {
     .btn-primary {

apps/app/src/components/Sidebar/SidebarNav/SidebarNav.module.scss

@@ -1,10 +1,8 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '~/styles/variables' as var;
 
 .grw-sidebar-nav :global {
   width: var.$grw-sidebar-nav-width;
-
   border-right : 1px solid var(--bs-border-color);
 
   .grw-sidebar-nav-secondary-container {
@@ -15,13 +13,12 @@
 
 
 // == Colors
-.grw-sidebar-nav :global {
-}
 @include bs.color-mode(light) {
   .grw-sidebar-nav :global {
     background-color: var(--grw-sidebar-nav-bg, var(--grw-highlight-100));
   }
 }
+
 @include bs.color-mode(dark) {
   .grw-sidebar-nav :global {
     background-color: var(--grw-sidebar-nav-bg, var(--grw-highlight-800));

apps/app/src/components/Sidebar/SidebarNav/SkeletonItem.module.scss

@@ -1,5 +1,4 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '../variables' as sidebarVar;
 
 .grw-skeleton-item :global {

apps/app/src/components/Sidebar/Skeleton/DefaultContentSkelton.module.scss

@@ -3,12 +3,14 @@
 .grw-default-content-skelton :global {
   .grw-skeleton-text {
     @include mixins.grw-skeleton-text($font-size:15px, $line-height:21.42px);
+
     max-width: 160px;
     margin: 15px 0;
   }
 
   .grw-skeleton-text-full {
     @extend .grw-skeleton-text;
+
     max-width: 100%;
   }
 }

apps/app/src/components/Sidebar/_button-styles.scss

@@ -1,5 +1,4 @@
 @use '~/styles/variables' as var;
-
 @use './variables' as sidebarVar;
 
 
@@ -9,7 +8,6 @@
 
   width: var.$grw-sidebar-nav-width;
   height: sidebarVar.$grw-sidebar-button-height;
-
   line-height: 1em;
   border: 0;
   border-radius: 0;

apps/app/src/components/StaffCredit/StaffCredit.module.scss

@@ -3,19 +3,16 @@
   // attached !important for updating from .modal-dialog class style
   width: 80vw !important;
   max-width: unset !important;
-
   height: 80vh !important;
   max-height: unset !important;
-
   margin: 10vh 10vw !important;
 
   // see https://css-tricks.com/old-timey-terminal-styling/
   .credit-curtain {
     padding-top: 80vh;
-
     text-shadow: 0 0 10px #c8c8c8;
     background-color: black;
-    background-image: radial-gradient(rgba(50, 100, 100, 0.75), black 120%);
+    background-image: radial-gradient(rgba(50, 100, 100, 75%), black 120%);
   }
 
   .background {

apps/app/src/features/growi-plugin/client/components/Admin/PluginsExtensionPageContents/PluginCard.module.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable selector-class-pattern */
+
 // TODO: Rewrite according to guidelines
 .plugin_card :global {
 
@@ -14,7 +16,7 @@
     cursor: pointer;
     border-radius: 30px;
   }
-  .switch__content:before {
+  .switch__content::before {
     position: absolute;
     top: 0;
     left: 0;
@@ -26,7 +28,7 @@
     border: 1.5px solid #E5E5EA;
     border-radius: 30px;
   }
-  .switch__content:after {
+  .switch__content::after {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -58,7 +60,7 @@
     left: 21px;
   }
 
-  .switch__input:checked ~ .switch__content:after {
+  .switch__input:checked ~ .switch__content::after {
     top: 0;
     left: 0;
     width: 100%;

apps/app/src/features/search/client/components/SearchMenuItem.module.scss

@@ -1,5 +1,4 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
-
 @use '~/styles/variables' as var;
 
 .search-menu-item :global {

apps/app/src/pages/login/index.module.scss

@@ -6,6 +6,7 @@
   .nologin-header,
   .nologin-dialog {
     width: 420px;
+
     @include bs.media-breakpoint-down(sm) {
       width: 320px;
     }

apps/app/src/styles/atoms/_custom_control.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable no-descending-specificity */
+
 @use '@growi/core-styles/scss/bootstrap/init' as *;
 
 $form-check-gutter: .5rem;
@@ -51,16 +53,14 @@ label.form-check-label {
   $form-switch-indicator-size-lg: subtract($form-check-indicator-size-lg, $form-check-indicator-border-width * 4);
 
   padding-left: $form-switch-width-lg + $form-check-gutter-lg;
-
   line-height: $form-check-indicator-size-lg;
   .form-check-label {
     &::before {
       top: ($font-size-base * $line-height-base - $form-check-indicator-size-lg) / 2;
-
       left: -($form-switch-width-lg + $form-check-gutter-lg);
       width: $form-switch-width-lg;
       height: $form-check-indicator-size-lg;
-      border-radius: $form-check-indicator-size-lg/2;
+      border-radius: $form-check-indicator-size-lg / 2;
     }
 
     &::after {
@@ -68,7 +68,7 @@ label.form-check-label {
       left: add(-($form-switch-width-lg + $form-check-gutter-lg), $form-check-indicator-border-width * 2);
       width: $form-switch-indicator-size-lg;
       height: $form-switch-indicator-size-lg;
-      border-radius: $form-check-indicator-size-lg/2;
+      border-radius: $form-check-indicator-size-lg / 2;
     }
   }
 

apps/app/src/styles/atoms/_tag.scss

@@ -4,13 +4,16 @@
 @include bs.color-mode(light) {
   .grw-tag.badge {
     --bs-badge-color: var(--bs-gray-600);
+
     background-color: var(--bs-gray-100);
     border: 1px solid var(--bs-gray-300);
   }
 }
+
 @include bs.color-mode(dark) {
   .grw-tag.badge {
     --bs-badge-color: var(--bs-gray-500);
+
     background-color: var(--bs-gray-800);
     border: 1px solid var(--bs-gray-600);
   }

apps/app/src/styles/atoms/placeholders/_buttons.scss

@@ -2,6 +2,7 @@
 
 %btn-nologin {
   transition: 0.8s ease;
+
   --bs-btn-border-color: #{rgba(white, 0.1)};
   --bs-btn-hover-border-color: #{rgba(white, 0.1)};
   --bs-btn-active-border-color: #{rgba(white, 0.1)};

apps/app/src/styles/mixins/_editing.scss

@@ -1,10 +1,9 @@
 @mixin editing($global: false) {
   :global {
     .layout-root.editing {
-      @if ($global) {
+      @if $global {
         @content;
-      }
-      @else {
+      } @else {
         :local {
           @content;
         }

apps/app/src/styles/mixins/_share-link.scss

@@ -7,10 +7,9 @@
 @mixin share-link-for-module($isContentGlobal: false) {
   :global {
     .layout-root.share-link {
-      @if ($isContentGlobal) {
+      @if $isContentGlobal {
         @content;
-      }
-      @else {
+      } @else {
         :local {
           @content;
         }

apps/app/src/styles/organisms/_wiki.scss

@@ -1,10 +1,9 @@
 @use '@growi/core-styles/scss/bootstrap/utilities' as bs;
-
 @use '../variables' as var;
 
 .wiki {
   @mixin add-left-border($width) {
-    &:before {
+    &::before {
       margin-right: 0.4em;
       content: '';
       border-left: $width solid;
@@ -16,6 +15,7 @@
 
   a {
     @extend .link-offset-2;
+
     text-decoration-line: underline;
   }
 
@@ -40,14 +40,13 @@
     scroll-margin-top: var.$grw-scroll-margin-top-in-view;
   }
 
+  /* stylelint-disable no-descending-specificity */
   h1 {
     padding: 0.3em 0;
     margin-top: 2em;
     font-size: 1.9em;
     line-height: 1.1em;
-    border-bottom-color: var(--bs-border-color);
-    border-bottom-style: solid;
-    border-bottom-width: 2px;
+    border-bottom: 2px solid var(--bs-border-color);
   }
 
   h2 {
@@ -55,9 +54,7 @@
     font-size: 1.6em;
     font-weight: bold;
     line-height: 1.225;
-    border-bottom-color: var(--bs-border-color);
-    border-bottom-style: solid;
-    border-bottom-width: 1px;
+    border-bottom: 1px solid var(--bs-border-color);
   }
 
   h3 {
@@ -68,6 +65,7 @@
   h4 {
     font-size: 1.35em;
     font-weight: normal;
+
     // style
     @include add-left-border(6px);
   }
@@ -75,6 +73,7 @@
   h5 {
     font-size: 1.25em;
     font-weight: normal;
+
     // style
     @include add-left-border(4px);
   }
@@ -82,9 +81,11 @@
   h6 {
     font-size: 1.2em;
     font-weight: normal;
+
     // style
     @include add-left-border(2px);
   }
+  /* stylelint-enable no-descending-specificity */
 
   p {
     margin: 15px 0;
@@ -97,8 +98,9 @@
 
   blockquote {
     padding: 0 20px;
-    margin: 0 0 30px 0;
+    margin: 0 0 30px;
     font-size: 0.9em;
+    /* stylelint-disable-next-line scss/no-global-function-names */
     color: lighten(bs.$gray-800, 35%);
     border-left: 0.3rem solid #ddd;
   }
@@ -108,6 +110,10 @@
     margin: 5px 0;
   }
 
+  pre {
+    position: relative; // for absolute positioned .code-highlighted-title
+  }
+
   ul,
   ol {
     padding-left: 30px;
@@ -128,10 +134,6 @@
     }
   }
 
-  pre {
-    position: relative; // for absolute positioned .code-highlighted-title
-  }
-
   .contains-task-list {
     .task-list-item {
       margin: 0 0.2em 0.25em -1.6em;
@@ -144,12 +146,11 @@
 
     // use awesome-bootstrap-checkbox
     .task-list-item .checkbox input[type='checkbox'] {
-
       // layout
       +label {
         padding-left: 0.3em;
 
-        &:before {
+        &::before {
           margin-top: 0.4em;
         }
       }
@@ -161,8 +162,8 @@
         cursor: default;
         opacity: 1;
 
-        &:before,
-        &:after {
+        &::before,
+        &::after {
           cursor: default;
         }
       }
@@ -170,16 +171,19 @@
   }
 
   // see: https://github.com/micromark/micromark-extension-gfm-footnote#css
+
   /* Style the footnotes section. */
   .footnotes {
     font-size: smaller;
     color: bs.$text-muted;
     border-top: 1px solid bs.$border-color;
+
     /* Hide the section label for visual users. */
     #footnote-label {
       display: none;
     }
   }
+
   /* Place `[` and `]` around footnote references. */
   [data-footnote-ref]::before {
     content: '[';
@@ -209,6 +213,7 @@
       }
     }
 
+    /* stylelint-disable no-descending-specificity */
     h1 {
       padding-bottom: 0.3em * $ratio;
       margin-top: 2em * $ratio;
@@ -225,6 +230,7 @@
     h3 {
       font-size: 1.2em * $ratio;
     }
+    /* stylelint-enable no-descending-specificity */
 
     blockquote {
       font-size: 0.9em * $ratio;
@@ -258,7 +264,7 @@
     padding: 7%;
     padding-bottom: 3%;
     margin: 0 7%;
-    background-color: rgba(200, 200, 200, 0.2);
+    background-color: rgba(200, 200, 200, 20%);
     border-radius: 10px;
 
     .grw-keep-time {
@@ -312,6 +318,7 @@
     --bs-border-color: var(--bs-gray-300);
   }
 }
+
 @include bs.color-mode(dark) {
   .wiki {
     --bs-border-color: var(--bs-gray-700);