Skip to content

Commit 1758785

Browse files
KaelWDKaelWD
committed
refactor: replace sass with scss
1 parent 21bfa27 commit 1758785

File tree

257 files changed

+11495
-8934
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

257 files changed

+11495
-8934
lines changed

‎packages/vuetify/dev/vuetify.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import '@mdi/font/css/materialdesignicons.css'
2-
import '@/styles/main.sass'
2+
import '@/styles/main.scss'
33

44
import { createVuetify } from '@/framework'
55
import * as directives from '@/directives'

‎packages/vuetify/src/components/VAlert/VAlert.scss‎

Lines changed: 191 additions & 153 deletions
Original file line numberDiff line numberDiff line change
@@ -1,159 +1,197 @@
1-
@use '../../styles/settings'
2-
@use '../../styles/tools'
3-
@use './variables' as *
4-
5-
@include tools.layer('components')
6-
.v-alert
7-
display: grid
8-
flex: 1 1
9-
grid-template-areas: "prepend content append close" ". content . ."
10-
grid-template-columns: max-content auto max-content max-content
11-
position: relative
12-
padding: $alert-padding
13-
overflow: hidden
14-
--v-border-color: #{$alert-border-color}
15-
16-
@include tools.position($alert-positions)
17-
@include tools.rounded($alert-border-radius)
18-
@include tools.variant($alert-variants...)
19-
20-
&--prominent
21-
grid-template-areas: "prepend content append close" "prepend content . ."
22-
23-
&.v-alert--border
24-
--v-border-opacity: #{$alert-border-opacity}
25-
26-
&.v-alert--border-start
27-
padding-inline-start: $alert-padding + $alert-border-thin-width
28-
29-
&.v-alert--border-end
30-
padding-inline-end: $alert-padding + $alert-border-thin-width
31-
32-
&--variant-plain
33-
transition: $alert-plain-transition
34-
35-
@at-root
36-
@include tools.density('v-alert', $alert-density) using ($modifier)
37-
padding-bottom: $alert-padding + $modifier
38-
padding-top: $alert-padding + $modifier
39-
40-
&.v-alert--border-top
41-
padding-top: $alert-padding + $alert-border-thin-width + $modifier
42-
43-
&.v-alert--border-bottom
44-
padding-bottom: $alert-padding + $alert-border-thin-width + $modifier
45-
46-
&:not(:has(.v-alert-title))
47-
.v-alert__content
48-
padding-block: calc((#{$alert-prepend-icon-size} - #{settings.$line-height-root} * 1rem) / 2)
49-
50-
.v-alert__border
51-
border-radius: inherit
52-
bottom: 0
53-
left: 0
54-
opacity: var(--v-border-opacity)
55-
position: absolute
56-
pointer-events: none
57-
right: 0
58-
top: 0
59-
width: 100%
60-
61-
@include tools.border($alert-border...)
62-
63-
.v-alert--border-start &
64-
border-inline-start-width: $alert-border-thin-width
65-
66-
.v-alert--border-end &
67-
border-inline-end-width: $alert-border-thin-width
68-
69-
.v-alert--border-top &
70-
border-top-width: $alert-border-thin-width
71-
72-
.v-alert--border-bottom &
73-
border-bottom-width: $alert-border-thin-width
74-
75-
.v-alert__close
76-
flex: 0 1 auto
77-
grid-area: close
78-
79-
> .v-btn
80-
margin-block: calc(-1 * (var(--v-btn-height) + 12px - #{$alert-prepend-icon-size}) / 2)
81-
82-
.v-alert__content
83-
align-self: center
84-
grid-area: content
85-
overflow: hidden
1+
@use '../../styles/settings';
2+
@use '../../styles/tools';
3+
@use './variables' as *;
4+
5+
@include tools.layer('components') {
6+
.v-alert {
7+
display: grid;
8+
flex: 1 1;
9+
grid-template-areas: "prepend content append close" ". content . .";
10+
grid-template-columns: max-content auto max-content max-content;
11+
position: relative;
12+
padding: $alert-padding;
13+
overflow: hidden;
14+
--v-border-color: #{$alert-border-color};
15+
16+
@include tools.position($alert-positions);
17+
@include tools.rounded($alert-border-radius);
18+
@include tools.variant($alert-variants...);
19+
20+
&--prominent {
21+
grid-template-areas: "prepend content append close" "prepend content . .";
22+
}
23+
24+
&.v-alert--border {
25+
--v-border-opacity: #{$alert-border-opacity};
26+
27+
&.v-alert--border-start {
28+
padding-inline-start: $alert-padding + $alert-border-thin-width;
29+
}
30+
31+
&.v-alert--border-end {
32+
padding-inline-end: $alert-padding + $alert-border-thin-width;
33+
}
34+
}
35+
36+
&--variant-plain {
37+
transition: $alert-plain-transition;
38+
}
39+
40+
@at-root {
41+
@include tools.density('v-alert', $alert-density) using ($modifier) {
42+
padding-bottom: $alert-padding + $modifier;
43+
padding-top: $alert-padding + $modifier;
44+
45+
&.v-alert--border-top {
46+
padding-top: $alert-padding + $alert-border-thin-width + $modifier;
47+
}
48+
49+
&.v-alert--border-bottom {
50+
padding-bottom: $alert-padding + $alert-border-thin-width + $modifier;
51+
}
52+
}
53+
}
54+
55+
&:not(:has(.v-alert-title)) {
56+
.v-alert__content {
57+
padding-block: calc((#{$alert-prepend-icon-size} - #{settings.$line-height-root} * 1rem) / 2);
58+
}
59+
}
60+
}
61+
62+
.v-alert__border {
63+
border-radius: inherit;
64+
bottom: 0;
65+
left: 0;
66+
opacity: var(--v-border-opacity);
67+
position: absolute;
68+
pointer-events: none;
69+
right: 0;
70+
top: 0;
71+
width: 100%;
72+
73+
@include tools.border($alert-border...);
74+
75+
.v-alert--border-start & {
76+
border-inline-start-width: $alert-border-thin-width;
77+
}
78+
79+
.v-alert--border-end & {
80+
border-inline-end-width: $alert-border-thin-width;
81+
}
82+
83+
.v-alert--border-top & {
84+
border-top-width: $alert-border-thin-width;
85+
}
86+
87+
.v-alert--border-bottom & {
88+
border-bottom-width: $alert-border-thin-width;
89+
}
90+
}
91+
92+
.v-alert__close {
93+
flex: 0 1 auto;
94+
grid-area: close;
95+
96+
> .v-btn {
97+
margin-block: calc(-1 * (var(--v-btn-height) + 12px - #{$alert-prepend-icon-size}) / 2);
98+
}
99+
}
100+
101+
.v-alert__content {
102+
align-self: center;
103+
grid-area: content;
104+
overflow: hidden;
105+
}
86106

87107
.v-alert__append,
88-
.v-alert__close
89-
margin-inline-start: $alert-append-margin-inline-start
90-
91-
.v-alert__append
92-
align-self: flex-start
93-
grid-area: append
94-
95-
+ .v-alert__close
96-
margin-inline-start: $alert-append-close-margin-inline-start
97-
98-
.v-alert__prepend
99-
align-self: flex-start
100-
display: flex
101-
align-items: center
102-
grid-area: prepend
103-
margin-inline-end: $alert-prepend-margin-inline-end
104-
min-height: $alert-prepend-icon-size
105-
106-
> .v-icon
107-
font-size: $alert-prepend-icon-size
108-
height: $alert-prepend-icon-size
109-
width: $alert-prepend-icon-size
110-
111-
.v-alert--prominent &
112-
align-self: center
113-
114-
.v-alert__underlay
115-
grid-area: none
116-
position: absolute
117-
118-
.v-alert--border-start &
119-
border-top-left-radius: 0
120-
border-bottom-left-radius: 0
121-
122-
.v-alert--border-end &
123-
border-top-right-radius: 0
124-
border-bottom-right-radius: 0
125-
126-
.v-alert--border-top &
127-
border-top-left-radius: 0
128-
border-top-right-radius: 0
129-
130-
.v-alert--border-bottom &
131-
border-bottom-left-radius: 0
132-
border-bottom-right-radius: 0
133-
134-
.v-alert-title
135-
align-items: center
136-
align-self: center
137-
display: flex
138-
font-size: $alert-title-font-size
139-
font-weight: $alert-title-font-weight
140-
hyphens: $alert-title-hyphens
141-
letter-spacing: $alert-title-letter-spacing
142-
line-height: $alert-title-line-height
143-
overflow-wrap: $alert-title-overflow-wrap
144-
text-transform: $alert-title-text-transform
145-
word-break: $alert-title-word-break
146-
word-wrap: $alert-title-word-wrap
147-
148-
@media (forced-colors: active)
149-
.v-alert
150-
&:not(&--variant-text, &--variant-plain)
151-
border-style: solid
108+
.v-alert__close {
109+
margin-inline-start: $alert-append-margin-inline-start;
110+
}
111+
112+
.v-alert__append {
113+
align-self: flex-start;
114+
grid-area: append;
115+
116+
+ .v-alert__close {
117+
margin-inline-start: $alert-append-close-margin-inline-start;
118+
}
119+
}
120+
121+
.v-alert__prepend {
122+
align-self: flex-start;
123+
display: flex;
124+
align-items: center;
125+
grid-area: prepend;
126+
margin-inline-end: $alert-prepend-margin-inline-end;
127+
min-height: $alert-prepend-icon-size;
128+
129+
> .v-icon {
130+
font-size: $alert-prepend-icon-size;
131+
height: $alert-prepend-icon-size;
132+
width: $alert-prepend-icon-size;
133+
}
134+
135+
.v-alert--prominent & {
136+
align-self: center;
137+
}
138+
}
139+
140+
.v-alert__underlay {
141+
grid-area: none;
142+
position: absolute;
143+
144+
.v-alert--border-start & {
145+
border-top-left-radius: 0;
146+
border-bottom-left-radius: 0;
147+
}
148+
149+
.v-alert--border-end & {
150+
border-top-right-radius: 0;
151+
border-bottom-right-radius: 0;
152+
}
153+
154+
.v-alert--border-top & {
155+
border-top-left-radius: 0;
156+
border-top-right-radius: 0;
157+
}
158+
159+
.v-alert--border-bottom & {
160+
border-bottom-left-radius: 0;
161+
border-bottom-right-radius: 0;
162+
}
163+
}
164+
165+
.v-alert-title {
166+
align-items: center;
167+
align-self: center;
168+
display: flex;
169+
font-size: $alert-title-font-size;
170+
font-weight: $alert-title-font-weight;
171+
hyphens: $alert-title-hyphens;
172+
letter-spacing: $alert-title-letter-spacing;
173+
line-height: $alert-title-line-height;
174+
overflow-wrap: $alert-title-overflow-wrap;
175+
text-transform: $alert-title-text-transform;
176+
word-break: $alert-title-word-break;
177+
word-wrap: $alert-title-word-wrap;
178+
}
179+
}
180+
181+
@media (forced-colors: active) {
182+
.v-alert {
183+
&:not(&--variant-text, &--variant-plain) {
184+
border-style: solid;
185+
}
152186

153187
&--variant-outlined,
154-
&--variant-tonal
155-
border-width: medium
188+
&--variant-tonal {
189+
border-width: medium;
190+
}
156191

157192
&--variant-elevated,
158-
&--variant-flat
159-
border-width: thick
193+
&--variant-flat {
194+
border-width: thick;
195+
}
196+
}
197+
}

‎packages/vuetify/src/components/VAlert/VAlert.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Styles
2-
import './VAlert.sass'
2+
import './VAlert.scss'
33

44
// Components
55
import { VAlertTitle } from './VAlertTitle'

0 commit comments

Comments
 (0)