Skip to content

Commit

Permalink
新デザインで用いるscssファイルのパスをstyles/v2下に変更
Browse files Browse the repository at this point in the history
  • Loading branch information
takusea committed Jul 19, 2024
1 parent 2665b05 commit 99d51d5
Show file tree
Hide file tree
Showing 15 changed files with 54 additions and 53 deletions.
6 changes: 3 additions & 3 deletions src/components/Base/BaseButton.vue
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@ defineEmits<{
</script>

<style scoped lang="scss">
@use "@/styles/variables" as vars;
@use "@/styles/mixin" as mixin;
@use "@/styles/colors-v2" as colors;
@use "@/styles/v2/variables" as vars;
@use "@/styles/v2/mixin" as mixin;
@use "@/styles/v2/colors" as colors;
.button {
display: flex;
Expand Down
6 changes: 3 additions & 3 deletions src/components/Base/BaseDocumentView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
</template>

<style scoped lang="scss">
@use "@/styles/variables" as vars;
@use "@/styles/mixin" as mixin;
@use "@/styles/colors-v2" as colors;
@use "@/styles/v2/variables" as vars;
@use "@/styles/v2/mixin" as mixin;
@use "@/styles/v2/colors" as colors;
.document {
:deep(*) {
Expand Down
6 changes: 3 additions & 3 deletions src/components/Base/BaseListItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@ defineEmits<{
</script>

<style scoped lang="scss">
@use "@/styles/variables" as vars;
@use "@/styles/mixin" as mixin;
@use "@/styles/colors-v2" as colors;
@use "@/styles/v2/variables" as vars;
@use "@/styles/v2/mixin" as mixin;
@use "@/styles/v2/colors" as colors;
.listitem {
color: colors.$display;
Expand Down
6 changes: 3 additions & 3 deletions src/components/Base/BaseRowCard.vue
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@ defineEmits<{
</script>

<style scoped lang="scss">
@use "@/styles/variables" as vars;
@use "@/styles/mixin" as mixin;
@use "@/styles/colors-v2" as colors;
@use "@/styles/v2/variables" as vars;
@use "@/styles/v2/mixin" as mixin;
@use "@/styles/v2/colors" as colors;
.row-card {
display: flex;
Expand Down
4 changes: 2 additions & 2 deletions src/components/Base/BaseScrollArea.vue
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@ import {
</script>

<style scoped lang="scss">
@use "@/styles/variables" as vars;
@use "@/styles/colors-v2" as colors;
@use "@/styles/v2/variables" as vars;
@use "@/styles/v2/colors" as colors;
.ScrollAreaRoot {
width: 100%;
Expand Down
4 changes: 2 additions & 2 deletions src/components/Dialog/HelpDialog/HelpDialog.vue
Original file line number Diff line number Diff line change
Expand Up @@ -284,8 +284,8 @@ const openLogDirectory = window.backend.openLogDirectory;
</script>

<style scoped lang="scss">
@use "@/styles/colors-v2" as colors;
@use "@/styles/variables" as vars;
@use "@/styles/v2/colors" as colors;
@use "@/styles/v2/variables" as vars;
.grid {
display: grid;
Expand Down
6 changes: 3 additions & 3 deletions src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue
Original file line number Diff line number Diff line change
Expand Up @@ -126,9 +126,9 @@ const selectCharacterInfo = (index: DetailKey | undefined) => {
</script>

<style scoped lang="scss">
@use "@/styles/variables" as vars;
@use "@/styles/mixin" as mixin;
@use "@/styles/colors-v2" as colors;
@use "@/styles/v2/variables" as vars;
@use "@/styles/v2/mixin" as mixin;
@use "@/styles/v2/colors" as colors;
.container {
// TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
Expand Down
4 changes: 2 additions & 2 deletions src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@ onMounted(async () => {
</script>

<style scoped lang="scss">
@use "@/styles/variables" as vars;
@use "@/styles/colors-v2" as colors;
@use "@/styles/v2/variables" as vars;
@use "@/styles/v2/colors" as colors;
.container {
// TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
Expand Down
6 changes: 3 additions & 3 deletions src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue
Original file line number Diff line number Diff line change
Expand Up @@ -55,9 +55,9 @@ const selectLicenseIndex = (index: number | undefined) => {
</script>

<style scoped lang="scss">
@use "@/styles/variables" as vars;
@use "@/styles/mixin" as mixin;
@use "@/styles/colors-v2" as colors;
@use "@/styles/v2/variables" as vars;
@use "@/styles/v2/mixin" as mixin;
@use "@/styles/v2/colors" as colors;
.container {
// TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
Expand Down
6 changes: 3 additions & 3 deletions src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,9 @@ const props = defineProps<{
</script>

<style scoped lang="scss">
@use "@/styles/variables" as vars;
@use "@/styles/mixin" as mixin;
@use "@/styles/colors-v2" as colors;
@use "@/styles/v2/variables" as vars;
@use "@/styles/v2/mixin" as mixin;
@use "@/styles/v2/colors" as colors;
.container {
// TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
Expand Down
4 changes: 3 additions & 1 deletion src/styles/_index.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
@use './variables' as vars;
@use './colors' as colors;
@use './colors-v2' as colors-v2;
@use './v2/variables' as vars-v2;
@use './v2/colors' as colors-v2;
@use './v2/mixin' as mixin-v2;
@import "./fonts";

// 優先度を強引に上げる
Expand Down
File renamed without changes.
File renamed without changes.
24 changes: 24 additions & 0 deletions src/styles/v2/variables.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
: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;
25 changes: 0 additions & 25 deletions src/styles/variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,28 +6,3 @@ $menubar-height: 24px;
$detail-view-splitter-cell-z-index: 2;

$character-item-size: 215px; // キャラクター並び替えダイアログなどでの1キャラ表示要素の横幅

: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;

0 comments on commit 99d51d5

Please sign in to comment.