feat: update scss syntax

dsrkafuu · Nov 5, 2024 · a715083 · a715083
1 parent 9a4fd01
commit a715083
Show file tree

Hide file tree

Showing 16 changed files with 117 additions and 115 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -6,7 +6,7 @@
 html,
 body,
 #root {
-  font-size: $font-size-base;
+  font-size: var.$font-size-base;
   height: 100%;
   width: 100%;
   overflow: hidden;

diff --git a/src/DevPanel.scss b/src/DevPanel.scss
@@ -14,8 +14,8 @@ $devp-width: 3rem;
 
   &-settings {
     z-index: 1;
-    backdrop-filter: $filter;
-    font-size: $font-size-sm;
+    backdrop-filter: var.$filter;
+    font-size: var.$font-size-sm;
     position: absolute;
     width: $devp-width;
     margin: 0 auto;
@@ -33,7 +33,7 @@ $devp-width: 3rem;
 
   &-toggle {
     width: $devp-width;
-    line-height: $size-form;
+    line-height: var.$size-form;
     text-align: center;
     cursor: pointer;
     color: var(--color-settings-tab-fg);
@@ -49,7 +49,7 @@ $devp-width: 3rem;
 
   &-content {
     width: $devp-width;
-    padding: $padding-lg;
+    padding: var.$padding-lg;
 
     &-row {
       display: flex;
@@ -62,7 +62,7 @@ $devp-width: 3rem;
     }
 
     &-ctrl {
-      width: $size-form-minwidth;
+      width: var.$size-form-minwidth;
     }
   }
 }
diff --git a/src/SW.scss b/src/SW.scss
@@ -1,22 +1,22 @@
 .sw {
-  margin-top: $padding-md;
-  font-size: $font-size-sm;
+  margin-top: var.$padding-md;
+  font-size: var.$font-size-sm;
   flex: 0 0 auto;
   width: 3.84rem;
   display: flex;
-  backdrop-filter: $filter;
+  backdrop-filter: var.$filter;
 
   &-text {
     flex: 1 1 auto;
     min-width: 0;
-    height: $size-form;
-    line-height: $size-form;
+    height: var.$size-form;
+    line-height: var.$size-form;
     color: var(--color-encounter-fg);
     background-color: var(--color-encounter-bg);
     text-shadow: var(--shadow-encounter);
     white-space: nowrap;
     overflow: hidden;
-    padding: 0 $padding-xl;
+    padding: 0 var.$padding-xl;
     text-align: center;
   }
 
@@ -26,8 +26,8 @@
     cursor: pointer;
     position: relative;
     flex: 0 0 auto;
-    height: $size-form;
-    width: $size-form;
+    height: var.$size-form;
+    width: var.$size-form;
     display: flex;
     justify-content: center;
     align-items: center;

diff --git a/src/components/SInput.scss b/src/components/SInput.scss
@@ -1,15 +1,15 @@
 .s-input {
   display: flex;
-  width: $size-form-minwidth;
-  height: $size-form;
-  line-height: $size-form;
+  width: var.$size-form-minwidth;
+  height: var.$size-form;
+  line-height: var.$size-form;
   color: var(--color-form-fg);
   background-color: var(--color-form-bg);
 
   &-btn {
     flex: 0 0 auto;
-    height: $size-form;
-    width: $size-form;
+    height: var.$size-form;
+    width: var.$size-form;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -34,9 +34,9 @@
     outline: none;
     color: var(--color-form-fg);
     background-color: var(--color-form-bg);
-    height: $size-form;
-    line-height: $size-form;
-    padding: 0 $padding-md;
+    height: var.$size-form;
+    line-height: var.$size-form;
+    padding: 0 var.$padding-md;
     user-select: auto;
     text-align: center;
     text-shadow: var(--shadow-form);

diff --git a/src/components/SInputColor.scss b/src/components/SInputColor.scss
@@ -1,7 +1,7 @@
 .s-input-color {
   display: inline-block;
-  height: $size-form;
-  width: $size-form;
+  height: var.$size-form;
+  width: var.$size-form;
   position: relative;
   cursor: pointer;
 
@@ -30,10 +30,10 @@
     z-index: 999;
 
     &-bottom {
-      top: $size-form + $padding-md;
+      top: var.$size-form + var.$padding-md;
     }
     &-top {
-      bottom: $size-form + $padding-md;
+      bottom: var.$size-form + var.$padding-md;
     }
   }
 

diff --git a/src/components/SInputNumber.scss b/src/components/SInputNumber.scss
@@ -1,7 +1,7 @@
 .s-input-number {
   display: inline-flex;
-  height: $size-form;
-  min-width: $size-form-minwidth;
+  height: var.$size-form;
+  min-width: var.$size-form-minwidth;
   color: var(--color-form-fg);
   background-color: var(--color-form-bg);
   text-shadow: var(--shadow-form);
@@ -13,15 +13,15 @@
   div.value {
     flex: 1 1 auto;
     text-align: center;
-    height: $size-form;
-    line-height: $size-form;
+    height: var.$size-form;
+    line-height: var.$size-form;
     padding-left: 0.04rem;
   }
 
   .btn {
     flex: 0 0 auto;
-    height: $size-form;
-    width: $size-form;
+    height: var.$size-form;
+    width: var.$size-form;
     display: flex;
     justify-content: center;
     align-items: center;

diff --git a/src/components/SList.scss b/src/components/SList.scss
@@ -1,6 +1,6 @@
 .s-list {
   width: 100%;
-  font-size: $font-size-sm;
+  font-size: var.$font-size-sm;
   padding: 0.04rem 0.06rem;
 
   &-section {

diff --git a/src/components/SSelect.scss b/src/components/SSelect.scss
@@ -1,8 +1,8 @@
 .s-select {
   position: relative;
-  height: $size-form;
-  line-height: $size-form;
-  min-width: $size-form-minwidth;
+  height: var.$size-form;
+  line-height: var.$size-form;
+  min-width: var.$size-form-minwidth;
   text-align: center;
   cursor: pointer;
   text-shadow: var(--shadow-form);
@@ -11,8 +11,8 @@
     color: var(--color-form-fg);
     background-color: var(--color-form-bg);
     display: flex;
-    height: $size-form;
-    line-height: $size-form;
+    height: var.$size-form;
+    line-height: var.$size-form;
 
     .disp {
       flex: 1 1 auto;
@@ -21,8 +21,8 @@
 
     .btn {
       flex: 0 0 auto;
-      height: $size-form;
-      width: $size-form;
+      height: var.$size-form;
+      width: var.$size-form;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -45,10 +45,10 @@
     width: 100%;
 
     &-bottom {
-      top: $size-form;
+      top: var.$size-form;
     }
     &-top {
-      bottom: $size-form;
+      bottom: var.$size-form;
     }
   }
 

diff --git a/src/components/SSwitch.scss b/src/components/SSwitch.scss
@@ -1,16 +1,16 @@
 .s-switch {
   display: flex;
   cursor: pointer;
-  height: $size-form;
-  min-width: $size-form * 2;
+  height: var.$size-form;
+  min-width: var.$size-form * 2;
   display: flex;
   color: var(--color-form-fg);
   background-color: var(--color-form-bg);
 
   .s-switch-btn {
     flex: 0 0 auto;
-    height: $size-form;
-    width: $size-form;
+    height: var.$size-form;
+    width: var.$size-form;
     display: flex;
     justify-content: center;
     align-items: center;

diff --git a/src/scss/utils.scss b/src/scss/utils.scss
@@ -9,8 +9,8 @@
   color: var(--color-fg);
   text-shadow: var(--shadow);
   text-decoration: underline;
-  padding-left: $padding-sm;
-  padding-right: $padding-sm;
+  padding-left: var.$padding-sm;
+  padding-right: var.$padding-sm;
 
   &:hover {
     color: var(--color-form-fg-active);
@@ -24,6 +24,6 @@
 }
 .g-counter {
   display: inline-block;
-  font-size: $font-size-xs;
+  font-size: var.$font-size-xs;
   margin-left: 0.02rem;
 }
diff --git a/src/themes/ikegami.scss b/src/themes/ikegami.scss
@@ -78,7 +78,7 @@ body[data-theme='ikegami'] {
 
   .s-input-number,
   .s-switch {
-    gap: $padding-md;
+    gap: var.$padding-md;
 
     & > div {
       border: 0.01rem solid #ffffff;

diff --git a/src/themes/jround.scss b/src/themes/jround.scss
@@ -114,8 +114,8 @@ body[data-theme='jround'] {
     }
 
     &-duration {
-      flex: 0 0 $size-form * 2 + 0.03rem;
-      width: $size-form * 2 + 0.03rem;
+      flex: 0 0 var.$size-form * 2 + 0.03rem;
+      width: var.$size-form * 2 + 0.03rem;
       margin-right: 0.08rem;
     }
     &-btns {
@@ -159,8 +159,8 @@ body[data-theme='jround'] {
 
     &-history-row {
       border-radius: var(--border-radius-inner);
-      margin-left: $padding-lg;
-      margin-right: $padding-lg;
+      margin-left: var.$padding-lg;
+      margin-right: var.$padding-lg;
     }
   }
 

diff --git a/src/views/Combatant.scss b/src/views/Combatant.scss
@@ -2,17 +2,17 @@
   position: relative;
   flex: 0 0 auto;
   width: 1.2rem;
-  margin: 0 $padding-sm;
+  margin: 0 var.$padding-sm;
   display: flex;
   flex-direction: column;
   color: var(--color-combatant-fg);
   text-shadow: var(--shadow-combatant);
 
   &-name,
   &-bottom {
-    line-height: $size-form;
-    height: $size-form;
-    font-size: $font-size-sm;
+    line-height: var.$size-form;
+    height: var.$size-form;
+    font-size: var.$font-size-sm;
     text-align: center;
     white-space: nowrap;
     display: flex;
@@ -25,7 +25,7 @@
     cursor: pointer;
 
     &--blured {
-      filter: $filter;
+      filter: var.$filter;
     }
   }
 
@@ -55,7 +55,7 @@
     position: relative;
     padding: 0.04rem 0.08rem;
     background-color: var(--color-common);
-    backdrop-filter: $filter;
+    backdrop-filter: var.$filter;
     cursor: pointer;
 
     &-data {
@@ -98,7 +98,7 @@
     right: 0;
     // top: 0.50rem; // each ticker 0.04rem
     z-index: 999;
-    backdrop-filter: $filter;
+    backdrop-filter: var.$filter;
     background-color: var(--color-common);
   }