Sass変数名を変更

takusea · Dec 16, 2023 · 1ca6676 · 1ca6676
1 parent d8bc2b7
commit 1ca6676
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 25 deletions.
diff --git a/src/components/base/BaseButton.vue b/src/components/base/BaseButton.vue
@@ -31,9 +31,9 @@ defineEmits<{
   justify-content: space-between;
   align-items: center;
   height: vars.$size-control;
-  border-radius: vars.$radius-control;
-  padding: 0 vars.$padding-button;
-  gap: vars.$gap-control;
+  border-radius: vars.$radius-1;
+  padding: 0 vars.$padding-2;
+  gap: vars.$gap-1;
   border: 1px solid;
   transition: background-color vars.$transition-duration;
   cursor: pointer;

diff --git a/src/components/base/BaseRowCard.vue b/src/components/base/BaseRowCard.vue
@@ -37,9 +37,9 @@ defineEmits<{
   align-items: center;
   border: 1px solid #0002;
   background-color: #fff;
-  border-radius: vars.$radius-container;
-  padding: vars.$padding-container;
-  gap: vars.$gap-container;
+  border-radius: vars.$radius-2;
+  padding: vars.$padding-2;
+  gap: vars.$gap-2;
   transition: background-color vars.$transition-duration;
 }
 

diff --git a/src/components/template/OssLicenseSection.vue b/src/components/template/OssLicenseSection.vue
@@ -74,8 +74,8 @@ const selectLicenseIndex = (index: number | undefined) => {
 .inner {
   display: flex;
   flex-direction: column;
-  padding: vars.$padding-container;
-  gap: vars.$gap-container;
+  padding: vars.$padding-2;
+  gap: vars.$gap-1;
 }
 
 .title {
@@ -85,6 +85,6 @@ const selectLicenseIndex = (index: number | undefined) => {
 .list {
   display: flex;
   flex-direction: column;
-  gap: vars.$gap-control;
+  gap: vars.$gap-1;
 }
 </style>
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -7,21 +7,27 @@ $detail-view-splitter-cell-z-index: 2;
 
 $character-item-size: 215px; // キャラクター並び替えダイアログなどでの１キャラ表示要素の横幅
 
-$size-scrollbar: 12px;
-$size-icon: 16px;
-$size-indicator: 24px;
-$size-control: 32px;
-$size-listitem: 40px;
-$size-fab: 48px;
-
-$padding-control: 8px;
-$padding-button: 16px;
-$padding-container: 16px;
-
-$gap-control: 8px;
-$gap-container: 16px;
-
-$radius-control: 8px;
-$radius-container: 16px;
+:root {
+  --size-basis: 8px;
+  --padding-basis: 8px;
+  --gap-basis: 8px;
+  --radius-basis: 8px;
+}
+
+$size-scrollbar: calc(var(--size-basis) * 1.5);
+$size-icon: calc(var(--size-basis) * 2);
+$size-indicator: calc(var(--size-basis) * 3);
+$size-control: calc(var(--size-basis) * 4);
+$size-listitem: calc(var(--size-basis) * 5);
+$size-fab: calc(var(--size-basis) * 6);
+
+$padding-1: var(--padding-basis);
+$padding-2: calc(var(--padding-basis) * 2);
+
+$gap-1: var(--gap-basis);
+$gap-2: calc(var(--gap-basis) * 2);
+
+$radius-1: var(--radius-basis);
+$radius-2: calc(var(--radius-basis) * 2);
 
 $transition-duration: 100ms;