chore: update sass

liriliri · Oct 29, 2024 · 2a1e417 · 2a1e417
1 parent 44d8db7
commit 2a1e417
Show file tree

Hide file tree

Showing 37 changed files with 176 additions and 152 deletions.
diff --git a/src/box-model/style.scss b/src/box-model/style.scss
@@ -2,12 +2,12 @@
 @use '../share/theme' as theme;
 
 .luna-box-model {
+  display: inline-block;
+  text-align: center;
+  white-space: nowrap;
   @include mixin.component();
   & {
-    display: inline-block;
     font-size: #{theme.$font-size-s-m}px;
-    text-align: center;
-    white-space: nowrap;
   }
 }
 

diff --git a/src/carousel/style.scss b/src/carousel/style.scss
@@ -2,13 +2,13 @@
 @use '../share/theme' as theme;
 
 .luna-carousel {
+  width: 100%;
+  height: 100%;
+  min-height: 150px;
+  position: relative;
   @include mixin.component();
   & {
     background: #000;
-    width: 100%;
-    height: 100%;
-    min-height: 150px;
-    position: relative;
   }
   &:hover {
     .arrow-left,

diff --git a/src/color-picker/style.scss b/src/color-picker/style.scss
@@ -1,10 +1,11 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-color-picker {
-  @include component();
+  border: 1px solid theme.$color-border;
   touch-action: none;
   width: 225px;
-  border: 1px solid $color-border;
+  @include mixin.component();
 }
 
 .saturation {

diff --git a/src/command-palette/style.scss b/src/command-palette/style.scss
@@ -1,7 +1,7 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-command-palette {
-  @include component();
   position: fixed;
   top: 0;
   left: 0;
@@ -12,24 +12,27 @@
   align-items: flex-start;
   padding-top: 10px;
   overflow: hidden;
-  background: transparent !important;
+  @include mixin.component();
+  & {
+    background: transparent !important;
+  }
 }
 
 .body {
   max-width: 100%;
-  box-shadow: $box-shadow;
+  box-shadow: theme.$box-shadow;
   font-size: 12px;
-  background: $color-bg-container;
+  background: theme.$color-bg-container;
 }
 
 .input {
   box-sizing: border-box;
   outline: none;
   width: 100%;
   border: none;
-  border-bottom: 1px solid $color-border;
+  border-bottom: 1px solid theme.$color-border;
   padding: 10px 4px;
-  color: $color-text;
+  color: theme.$color-text;
 }
 
 .list {
@@ -43,11 +46,11 @@
     cursor: pointer;
     display: flex;
     &:hover {
-      background: $color-fill-secondary;
+      background: theme.$color-fill-secondary;
     }
     &.active {
-      color: $color-white;
-      background: $color-primary;
+      color: theme.$color-white;
+      background: theme.$color-primary;
     }
     .title {
       flex: 1;
@@ -62,19 +65,19 @@
 
 .theme-dark {
   .body {
-    background: $color-bg-container-dark;
+    background: theme.$color-bg-container-dark;
   }
   .input {
-    background: $color-bg-container-dark;
-    border-color: $color-border-dark;
+    background: theme.$color-bg-container-dark;
+    border-color: theme.$color-border-dark;
   }
   li {
     &:hover {
-      background: $color-fill-secondary-dark;
+      background: theme.$color-fill-secondary-dark;
     }
     &.active {
-      color: $color-white;
-      background: $color-primary;
+      color: theme.$color-white;
+      background: theme.$color-primary;
     }
   }
 }
diff --git a/src/console/style.scss b/src/console/style.scss
@@ -1,4 +1,5 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 $padding: 10px;
 $border: #ccc;
@@ -28,16 +29,16 @@ $console-selected-background-dark: #29323d;
 $console-selected-border-dark: #4173b4;
 
 .luna-console {
-  background: $color-bg-container;
-  @include overflow-auto(y);
+  background: theme.$color-bg-container;
+  @include mixin.overflow-auto(y);
   height: 100%;
   position: relative;
   will-change: scroll-position;
   cursor: default;
-  font-size: #{$font-size-s-m}px;
-  font-family: $font-family-code;
+  font-size: #{theme.$font-size-s-m}px;
+  font-family: theme.$font-family-code;
   &.theme-dark {
-    background-color: $color-bg-container-dark;
+    background-color: theme.$color-bg-container-dark;
   }
 }
 
@@ -80,7 +81,7 @@ $console-selected-border-dark: #4173b4;
   border-top: 1px solid transparent;
   border-bottom: 1px solid $border;
   .time-from-container {
-    @include overflow-auto(x);
+    @include mixin.overflow-auto(x);
     padding: 3px $padding;
   }
 }
@@ -110,15 +111,15 @@ $console-selected-border-dark: #4173b4;
 .log-item {
   position: relative;
   display: flex;
-  @include clear-float();
+  @include mixin.clear-float();
   border-top: 1px solid transparent;
   border-bottom: 1px solid $border;
   margin-top: -1px;
   color: $foreground;
   .code {
     display: inline;
-    font-family: $font-family-code;
-    @include code-color;
+    font-family: theme.$font-family-code;
+    @include mixin.code-color;
   }
   a {
     color: #15c !important;
@@ -127,7 +128,7 @@ $console-selected-border-dark: #4173b4;
     margin: 0 -6px 0 $padding;
     .icon {
       line-height: 20px;
-      font-size: #{$font-size-s-m}px;
+      font-size: #{theme.$font-size-s-m}px;
       color: $foreground;
       position: relative;
     }
@@ -150,7 +151,7 @@ $console-selected-border-dark: #4173b4;
     color: #fff;
     padding: 2px 4px;
     border-radius: 10px;
-    font-size: #{$font-size-s-m}px;
+    font-size: #{theme.$font-size-s-m}px;
     float: left;
     margin: 1px -6px 0 $padding;
   }
@@ -161,7 +162,7 @@ $console-selected-border-dark: #4173b4;
   .log-content {
     padding: 3px 0;
     margin: 0 $padding;
-    @include overflow-auto(x);
+    @include mixin.overflow-auto(x);
     white-space: pre-wrap;
     user-select: text;
     * {
@@ -235,14 +236,14 @@ $console-selected-border-dark: #4173b4;
     align-items: center;
   }
   .json {
-    @include overflow-auto(x);
+    @include mixin.overflow-auto(x);
     padding-left: 12px;
   }
   .preview-icon-container {
     display: block;
     .icon {
       position: relative;
-      font-size: #{$font-size-s-m}px;
+      font-size: #{theme.$font-size-s-m}px;
     }
     .icon-caret-down {
       top: 2px;
@@ -294,7 +295,7 @@ $console-selected-border-dark: #4173b4;
     color: $foreground-dark;
     border-bottom-color: $border-dark;
     .code {
-      @include code-color(true);
+      @include mixin.code-color(true);
     }
     &.error {
       background: $console-error-background-dark;

diff --git a/src/cropper/style.scss b/src/cropper/style.scss
@@ -1,11 +1,12 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-cropper {
-  @include component();
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
   position: relative;
   min-height: 150px;
   touch-action: none;
+  @include mixin.component();
 }
 
 .preview {
@@ -62,7 +63,7 @@
 .view-box {
   display: block;
   height: 100%;
-  outline: 1px solid $color-primary;
+  outline: 1px solid theme.$color-primary;
   overflow: hidden;
   width: 100%;
 }
@@ -136,7 +137,7 @@
 }
 
 .line {
-  background: $color-primary;
+  background: theme.$color-primary;
   &.line-e {
     cursor: ew-resize;
     right: -3px;
@@ -164,7 +165,7 @@
 }
 
 .point {
-  background-color: $color-primary;
+  background-color: theme.$color-primary;
   border: 2px solid #fff;
   height: 6px;
   opacity: 1;

diff --git a/src/data-grid/style.scss b/src/data-grid/style.scss
@@ -1,12 +1,15 @@
-@import '../share/mixin';
+@use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-data-grid {
-  @include component();
   position: relative;
-  font-size: #{$font-size-s-m}px;
-  border: 1px solid $color-border;
+  border: 1px solid theme.$color-border;
   overflow: hidden;
   outline: none;
+  @include mixin.component();
+  & {
+    font-size: #{theme.$font-size-s-m}px;
+  }
 
   table {
     width: 100%;
@@ -19,7 +22,7 @@
   th,
   td {
     padding: 1px 4px;
-    border-left: 1px solid $color-border;
+    border-left: 1px solid theme.$color-border;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -30,12 +33,12 @@
 
   th {
     font-weight: normal;
-    border-bottom: 1px solid $color-border;
+    border-bottom: 1px solid theme.$color-border;
     text-align: left;
-    background: $color-fill-secondary;
+    background: theme.$color-fill-secondary;
     position: relative;
     &.sortable {
-      padding-right: $padding-s-m;
+      padding-right: theme.$padding-s-m;
       &:hover,
       &:active {
         background: #e6e6e6;
@@ -114,13 +117,13 @@
 }
 
 .theme-dark {
-  border-color: $color-border-dark;
+  border-color: theme.$color-border-dark;
   th,
   td {
-    border-color: $color-border-dark;
+    border-color: theme.$color-border-dark;
   }
   th {
-    background: $color-fill-secondary-dark;
+    background: theme.$color-fill-secondary-dark;
     &.sortable {
       &:hover {
         background: #303030;

diff --git a/src/dom-highlighter/style.scss b/src/dom-highlighter/style.scss
@@ -1,3 +1,5 @@
+@use 'sass:string';
+
 .luna-dom-highlighter {
   position: fixed;
   left: 0;
@@ -50,7 +52,7 @@
   border-radius: 3px;
   box-sizing: border-box;
   min-width: 100px;
-  max-width: unquote('min(300px, 100% - 4px)');
+  max-width: string.unquote('min(300px, 100% - 4px)');
   z-index: 2;
   background-clip: padding-box;
   will-change: transform;