Skip to content

Commit f3f99c5

Browse files
nokhnatonnokhnaton
authored
Merge pull request #4383 from traPtitech/fix/scss
2 parents 4d3788f + 90f1cc2 commit f3f99c5

File tree

11 files changed

+126
-95
lines changed

11 files changed

+126
-95
lines changed

‎src/components/UI/ASlider.vue‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -61,13 +61,13 @@ const value = useModelValueSyncer(props, emit)
6161
</script>
6262

6363
<style lang="scss">
64-
$dotBgColor: $theme-ui-secondary-default;
65-
$dotShadow: none;
64+
@use 'vue-slider-component/lib/theme/default.scss' with (
65+
$dotBgColor: $theme-ui-secondary-default,
66+
$dotShadow: none,
6667
67-
$bgColor: var(--specific-slider-background);
68-
$themeColor: $theme-ui-secondary-default;
68+
$bgColor: var(--specific-slider-background),
69+
$themeColor: $theme-ui-secondary-default,
6970
70-
$tooltipBgColor: $theme-ui-secondary-default;
71-
72-
@import 'vue-slider-component/lib/theme/default.scss';
71+
$tooltipBgColor: $theme-ui-secondary-default
72+
);
7373
</style>

‎src/components/UI/AudioPlayer/AudioPlayerTimeSlider.vue‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,8 @@ const disabled = computed(() => props.duration === 0)
4848
</script>
4949

5050
<style lang="scss" module>
51+
@use 'sass:meta';
52+
5153
.timeSlider {
5254
&[data-show-background-on-hover='true']:not([aria-disabled='true']):hover {
5355
background: rgba(32, 33, 36, 0.06);
@@ -63,14 +65,16 @@ const disabled = computed(() => props.duration === 0)
6365
&:not(:hover) :global(.vue-slider-dot-handle) {
6466
opacity: 0;
6567
}
66-
6768
:global {
68-
$dotBgColor: #1e1e1e;
69-
70-
$bgColor: #b7b9ba;
71-
$themeColor: #585859;
69+
@include meta.load-css(
70+
'vue-slider-component/lib/theme/default.scss',
71+
$with: (
72+
dotBgColor: #1e1e1e,
7273
73-
@import 'vue-slider-component/lib/theme/default.scss';
74+
bgColor: #b7b9ba,
75+
themeColor: #585859
76+
)
77+
);
7478
}
7579
}
7680
</style>

‎src/components/UI/AudioPlayer/AudioPlayerVolumeSlider.vue‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,8 @@ const toggleVolume = () => {
5757
</script>
5858

5959
<style lang="scss" module>
60+
@use 'sass:meta';
61+
6062
$afterVolumeSliderWidth: 48px;
6163
6264
.volume {
@@ -71,12 +73,15 @@ $afterVolumeSliderWidth: 48px;
7173
}
7274
7375
:global {
74-
$dotBgColor: #1e1e1e;
75-
76-
$bgColor: #b7b9ba;
77-
$themeColor: #585859;
76+
@include meta.load-css(
77+
'vue-slider-component/lib/theme/default.scss',
78+
$with: (
79+
dotBgColor: #1e1e1e,
7880
79-
@import 'vue-slider-component/lib/theme/default.scss';
81+
bgColor: #b7b9ba,
82+
themeColor: #585859
83+
)
84+
);
8085
}
8186
}
8287
.volumeSlider {

‎src/components/UI/FormRangeWithValue.vue‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -49,21 +49,28 @@ const showValue = computed(() => props.format(value.value))
4949
</script>
5050

5151
<style lang="scss" module>
52+
@use 'sass:meta';
53+
5254
.container {
5355
display: flex;
5456
align-items: center;
5557
}
58+
5659
.range {
5760
flex: 1 1;
5861
margin-right: 16px;
5962
:global {
60-
$dotBgColor: $theme-accent-primary-background;
61-
$dotShadow: none;
62-
63-
$bgColor: rgba(107, 125, 138, 0.5); // $theme-ui-secondary-default;
64-
$themeColor: $theme-accent-primary-background;
63+
@include meta.load-css(
64+
'vue-slider-component/lib/theme/default.scss',
65+
$with: (
66+
dotBgColor: $theme-accent-primary-background,
67+
dotShadow: none,
6568
66-
@import 'vue-slider-component/lib/theme/default.scss';
69+
bgColor: rgba(107, 125, 138, 0.5),
70+
// $theme-ui-secondary-default;
71+
themeColor: $theme-accent-primary-background
72+
)
73+
);
6774
}
6875
}
6976
</style>

‎src/styles/_emoji.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
@import '@traptitech/traq-markdown-it/src/css/stamp';
1+
@use 'sass:meta';
2+
@include meta.load-css('@traptitech/traq-markdown-it/src/css/stamp');
23

34
html[data-eco-mode='false'] {
4-
@import '@traptitech/traq-markdown-it/src/css/stampEffect';
5+
@include meta.load-css('@traptitech/traq-markdown-it/src/css/stampEffect');
56
}

‎src/styles/_markdown.scss‎

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,37 @@
1-
// KaTeXのCSSは遅延読み込みするのでmain.tsを参照
2-
$link-color: var(--markdown-link-text);
3-
$hr-color: var(--markdown-hr-text);
4-
$h6-color: var(--markdown-h6-text);
5-
$quote-text-color: var(--markdown-quote-text);
6-
$quote-bar-color: var(--markdown-quote-bar);
7-
$code-background-color: var(--markdown-code-background);
8-
$code-file-name-background-color: var(--markdown-code-file-name-background);
9-
$table-td-border-color: var(--markdown-table-td-border);
10-
$table-tr-border-color: var(--markdown-table-tr-border);
11-
$table-tr-background-color: var(--markdown-table-tr-background);
12-
$table-tr-background-color2: var(--markdown-table-tr-background2);
13-
$img-background-color: var(--markdown-img-background);
14-
$mark-color: var(--markdown-mark-text);
15-
$mark-background-color: var(--markdown-mark-background);
16-
$spoiler-background-color: var(--markdown-spoiler-background);
17-
$spoiler-shown-background-color: var(--markdown-spoiler-shown-background);
18-
$link-text-color: var(--markdown-embed-link-text);
19-
$link-background-color: var(--markdown-embed-link-background);
20-
$link-highlight-text-color: var(--markdown-embed-link-highlight-text);
21-
$link-highlight-background-color: var(
22-
--markdown-embed-link-highlight-background
1+
@use 'sass:meta';
2+
@use '@traptitech/traq-markdown-it/src/css/markdown' with (
3+
$link-color: var(--markdown-link-text),
4+
$hr-color: var(--markdown-hr-text),
5+
$h6-color: var(--markdown-h6-text),
6+
$quote-text-color: var(--markdown-quote-text),
7+
$quote-bar-color: var(--markdown-quote-bar),
8+
$code-background-color: var(--markdown-code-background),
9+
$code-file-name-background-color: var(--markdown-code-file-name-background),
10+
$table-td-border-color: var(--markdown-table-td-border),
11+
$table-tr-border-color: var(--markdown-table-tr-border),
12+
$table-tr-background-color: var(--markdown-table-tr-background),
13+
$table-tr-background-color2: var(--markdown-table-tr-background2),
14+
$img-background-color: var(--markdown-img-background),
15+
$mark-color: var(--markdown-mark-text),
16+
$mark-background-color: var(--markdown-mark-background),
17+
$spoiler-background-color: var(--markdown-spoiler-background),
18+
$spoiler-shown-background-color: var(--markdown-spoiler-shown-background),
19+
$link-text-color: var(--markdown-embed-link-text),
20+
$link-background-color: var(--markdown-embed-link-background),
21+
$link-highlight-text-color: var(--markdown-embed-link-highlight-text),
22+
$link-highlight-background-color:
23+
var(--markdown-embed-link-highlight-background)
2324
);
2425

25-
@import '@traptitech/traq-markdown-it/src/css/markdown';
26-
2726
html[data-code-highlight='light'] {
28-
@import 'highlight.js/styles/atom-one-light';
27+
@include meta.load-css('highlight.js/styles/atom-one-light');
2928
}
3029
html[data-code-highlight='dark'] {
31-
@import 'highlight.js/styles/atom-one-dark';
30+
@include meta.load-css('highlight.js/styles/atom-one-dark');
3231
}
3332

33+
// KaTeXのCSSは遅延読み込みするのでmain.tsを参照
34+
3435
html[data-stamp-edge='true'] {
3536
.emoji {
3637
filter: drop-shadow(0.1px 0.1px 0 rgb(255, 255, 255, 0.1))

‎src/styles/_mixins.scss‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
@import './variables';
1+
@use 'variables';
2+
@forward 'variables';
23

34
@mixin size-h1 {
45
font-size: 1.5rem;
@@ -20,70 +21,70 @@
2021
}
2122

2223
@mixin background-accent-primary {
23-
background: $theme-accent-primary-background;
24+
background: variables.$theme-accent-primary-background;
2425
}
2526

2627
@mixin color-accent-primary {
27-
color: $theme-accent-primary-default;
28+
color: variables.$theme-accent-primary-default;
2829
}
2930
@mixin color-accent-primary-inactive {
30-
color: $theme-accent-primary-inactive;
31+
color: variables.$theme-accent-primary-inactive;
3132
}
3233

3334
@mixin background-accent-error {
34-
background: $theme-accent-error-default;
35+
background: variables.$theme-accent-error-default;
3536
}
3637

3738
@mixin background-primary {
38-
background: $theme-background-primary-default;
39+
background: variables.$theme-background-primary-default;
3940
}
4041
@mixin background-secondary {
41-
background: $theme-background-secondary-default;
42+
background: variables.$theme-background-secondary-default;
4243
}
4344
@mixin background-tertiary {
44-
background: $theme-background-tertiary-default;
45+
background: variables.$theme-background-tertiary-default;
4546
}
4647

4748
@mixin color-ui-primary {
48-
color: $theme-ui-primary-default;
49+
color: variables.$theme-ui-primary-default;
4950
}
5051
@mixin color-ui-primary-inactive {
51-
color: $theme-ui-primary-inactive;
52+
color: variables.$theme-ui-primary-inactive;
5253
}
5354
@mixin color-ui-secondary {
54-
color: $theme-ui-secondary-default;
55+
color: variables.$theme-ui-secondary-default;
5556
}
5657
@mixin color-ui-secondary-inactive {
57-
color: $theme-ui-secondary-inactive;
58+
color: variables.$theme-ui-secondary-inactive;
5859
}
5960
@mixin color-ui-tertiary {
60-
color: $theme-ui-tertiary-default;
61+
color: variables.$theme-ui-tertiary-default;
6162
}
6263

6364
@mixin color-text-primary {
64-
color: $theme-text-primary-default;
65+
color: variables.$theme-text-primary-default;
6566
}
6667
@mixin color-text-secondary {
67-
color: $theme-text-secondary-default;
68+
color: variables.$theme-text-secondary-default;
6869
}
6970

7071
// -----
7172

7273
@mixin color-common-text-white-primary {
73-
color: $common-text-white-primary;
74+
color: variables.$common-text-white-primary;
7475
}
7576
@mixin color-common-text-white-secondary {
76-
color: $common-text-white-secondary;
77+
color: variables.$common-text-white-secondary;
7778
}
7879
@mixin color-common-text-black {
79-
color: $common-text-black;
80+
color: variables.$common-text-black;
8081
}
8182
@mixin background-common-overlay {
82-
background: $common-background-overlay;
83+
background: variables.$common-background-overlay;
8384
}
8485
@mixin background-common-black {
85-
background: $common-background-black;
86+
background: variables.$common-background-black;
8687
}
8788
@mixin drop-shadow-default {
88-
filter: $common-drop-shadow-default;
89+
filter: variables.$common-drop-shadow-default;
8990
}

‎src/styles/_transition.scss‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
@import './easing';
1+
@use 'easing';
2+
@forward 'easing';
23

34
$vs: 'vertical-swap';
45
$vs-reverse: 'vertical-swap-reverse';
56
.#{$vs}-enter-active,
67
.#{$vs}-leave-active,
78
.#{$vs-reverse}-enter-active,
89
.#{$vs-reverse}-leave-active {
9-
transition: transform 0.3s $easeOutBack;
10+
transition: transform 0.3s easing.$easeOutBack;
1011
}
1112
.#{$vs-reverse}-leave-to,
1213
.#{$vs}-enter-from {
@@ -19,10 +20,10 @@ $vs-reverse: 'vertical-swap-reverse';
1920

2021
$ts: 'toast-slide';
2122
.#{$ts}-enter-active {
22-
transition: all 0.3s $easeOutCirc;
23+
transition: all 0.3s easing.$easeOutCirc;
2324
}
2425
.#{$ts}-leave-active {
25-
transition: all 0.8s $easeInExpo;
26+
transition: all 0.8s easing.$easeInExpo;
2627
}
2728
.#{$ts}-enter-from {
2829
transform: translateX(-20px);
@@ -39,7 +40,7 @@ $ts: 'toast-slide';
3940
$sv: 'slide-vertical';
4041
.#{$sv}-enter-active,
4142
.#{$sv}-leave-active {
42-
transition: all 0.15s $easeOutQuad;
43+
transition: all 0.15s easing.$easeOutQuad;
4344
height: 0;
4445
}
4546

@@ -68,7 +69,7 @@ $bk: 'background-shadow';
6869
$tu: 'typing-users';
6970
.#{$tu}-enter-active,
7071
.#{$tu}-leave-active {
71-
transition: all 0.5s $easeOutCubic;
72+
transition: all 0.5s easing.$easeOutCubic;
7273
}
7374
.#{$tu}-enter-from,
7475
.#{$tu}-leave-to {
@@ -82,10 +83,10 @@ $ft: 'fade-top';
8283
$fb: 'fade-bottom';
8384
@each $c in $fl, $fr, $ft, $fb {
8485
.#{$c}-enter-active {
85-
transition: all 0.3s $easeOutCirc;
86+
transition: all 0.3s easing.$easeOutCirc;
8687
}
8788
.#{$c}-leave-active {
88-
transition: all 0.3s $easeInCirc;
89+
transition: all 0.3s easing.$easeInCirc;
8990
}
9091
.#{$c}-move {
9192
transition: transform 0.3s;
@@ -115,7 +116,7 @@ $fb: 'fade-bottom';
115116
$s: 'stamp';
116117
.#{$s}-enter-active,
117118
.#{$s}-leave-active {
118-
transition: all 0.3s $easeOutCirc;
119+
transition: all 0.3s easing.$easeOutCirc;
119120
}
120121
.#{$s}-enter-from,
121122
.#{$s}-leave-to {
@@ -125,10 +126,10 @@ $s: 'stamp';
125126

126127
$p: 'post';
127128
.#{$p}-enter-active {
128-
transition: all 0.3s $easeOutCirc;
129+
transition: all 0.3s easing.$easeOutCirc;
129130
}
130131
.#{$p}-leave-active {
131-
transition: all 0.3s $easeInCirc;
132+
transition: all 0.3s easing.$easeInCirc;
132133
}
133134
.#{$p}-leave-to {
134135
transform: translateX(20px);
@@ -142,7 +143,7 @@ $p: 'post';
142143
$qr: 'quick-reaction';
143144
.#{$qr}-enter-active,
144145
.#{$qr}-leave-active {
145-
transition: all 0.3s $easeOutCirc;
146+
transition: all 0.3s easing.$easeOutCirc;
146147
}
147148
.#{$qr}-enter-from,
148149
.#{$qr}-leave-to {
@@ -153,7 +154,7 @@ $qr: 'quick-reaction';
153154
$z: 'zoom';
154155
.#{$z}-enter-active,
155156
.#{$z}-leave-active {
156-
transition: all 0.15s $easeOutCirc;
157+
transition: all 0.15s easing.$easeOutCirc;
157158
}
158159
.#{$z}-enter-from,
159160
.#{$z}-leave-to {

‎src/styles/common.scss‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1-
@import './variables';
2-
@import './mixins';
3-
@import './z-index';
1+
@use 'variables';
2+
@use 'mixins';
3+
@use 'z-index';
4+
5+
@forward 'variables';
6+
@forward 'mixins';
7+
@forward 'z-index';

0 commit comments

Comments
 (0)