matcha-theme 20.55.0 → 20.57.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/matcha-buttons.scss +31 -1
- package/components/matcha-divider.scss +23 -0
- package/components/matcha-drawer.scss +110 -118
- package/main.scss +2 -1
- package/package.json +1 -1
|
@@ -129,7 +129,7 @@ a[matcha-button] {
|
|
|
129
129
|
&[size="medium"],
|
|
130
130
|
&[size="large"],
|
|
131
131
|
&[size="huge"] {
|
|
132
|
-
min-width: 24px;
|
|
132
|
+
// min-width: 24px;
|
|
133
133
|
}
|
|
134
134
|
|
|
135
135
|
@include generate-matcha-button-size-classes($helper-breakpoints);
|
|
@@ -255,25 +255,55 @@ a[matcha-button] {
|
|
|
255
255
|
}
|
|
256
256
|
|
|
257
257
|
@each $colorName, $colorFn in $color-functions {
|
|
258
|
+
// Background do ripple para outline e basic
|
|
258
259
|
&[color="#{'' + $colorName}"][outline]:not([outline="false"]) .ripple,
|
|
259
260
|
&[color="#{'' + $colorName}"][basic]:not([basic="false"]) .ripple {
|
|
260
261
|
background: call(#{$colorFn}Alpha, $theme)
|
|
261
262
|
}
|
|
263
|
+
// Background e color do botão para alpha
|
|
262
264
|
&[color="#{'' + $colorName}"][alpha]:not([alpha="false"]){
|
|
263
265
|
background: call(#{$colorFn}Alpha, $theme);
|
|
264
266
|
color: call(#{$colorFn}, $theme);
|
|
267
|
+
|
|
268
|
+
// Divider dentro do botão para alpha
|
|
269
|
+
matcha-divider {
|
|
270
|
+
.border-color-disabled {
|
|
271
|
+
border-color: call(#{$colorFn}, $theme) !important;
|
|
272
|
+
opacity: 0.3 !important;
|
|
273
|
+
}
|
|
274
|
+
}
|
|
265
275
|
}
|
|
276
|
+
// Color do botão para outline, link e basic
|
|
266
277
|
&[color="#{'' + $colorName}"][outline]:not([outline="false"]),
|
|
267
278
|
&[color="#{'' + $colorName}"][link]:not([link="false"]),
|
|
268
279
|
&[color="#{'' + $colorName}"][basic]:not([basic="false"]) {
|
|
269
280
|
color: call(#{$colorFn}, $theme);
|
|
281
|
+
// Divider dentro do botão para outline, link e basic
|
|
282
|
+
matcha-divider {
|
|
283
|
+
.border-color-disabled {
|
|
284
|
+
border-color: call(#{$colorFn}, $theme) !important;
|
|
285
|
+
opacity: 0.3 !important;
|
|
286
|
+
}
|
|
287
|
+
}
|
|
270
288
|
}
|
|
289
|
+
|
|
290
|
+
// Background e color do botão para default
|
|
271
291
|
&[color="#{'' + $colorName}"]{
|
|
272
292
|
background: call(#{$colorFn}, $theme);
|
|
273
293
|
color: call(#{$colorFn}Contrast, $theme);
|
|
294
|
+
|
|
295
|
+
// Divider dentro do botão para default
|
|
296
|
+
matcha-divider {
|
|
297
|
+
.border-color-disabled {
|
|
298
|
+
border-color: call(#{$colorFn}Contrast, $theme) !important;
|
|
299
|
+
opacity: 0.3 !important;
|
|
300
|
+
}
|
|
301
|
+
}
|
|
274
302
|
}
|
|
303
|
+
// Ripple dentro do botão para default
|
|
275
304
|
&[color="#{'' + $colorName}"] .ripple{background: call(#{$colorFn}ContrastAlpha, $theme)}
|
|
276
305
|
|
|
306
|
+
|
|
277
307
|
&[disabled],
|
|
278
308
|
&[disabled]:not([disabled="false"]),
|
|
279
309
|
&[disabled="true"] {
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
@mixin matcha-divider-theme($theme) {
|
|
2
|
+
$accent: map-get($theme, accent);
|
|
3
|
+
$warn: map-get($theme, warn);
|
|
4
|
+
$primary: map-get($theme, primary);
|
|
5
|
+
$background: map-get($theme, background);
|
|
6
|
+
$foreground: map-get($theme, foreground);
|
|
7
|
+
|
|
8
|
+
matcha-divider {
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
|
|
11
|
+
&[direction="vertical"] {
|
|
12
|
+
display: flex;
|
|
13
|
+
flex-direction: column;
|
|
14
|
+
align-self: stretch;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
&[direction="horizontal"] {
|
|
18
|
+
display: flex;
|
|
19
|
+
flex-direction: row;
|
|
20
|
+
width: 100%;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -1,157 +1,149 @@
|
|
|
1
1
|
// -------------------------------------------------------------------------------------------------------------------
|
|
2
|
-
// @ Matcha Drawer Component Styles
|
|
2
|
+
// @ Matcha Drawer Component Styles (Refatorado baseado no Angular Material Sidenav)
|
|
3
|
+
// @ Todos os estilos consolidados aqui para facilitar manutenção
|
|
3
4
|
// -------------------------------------------------------------------------------------------------------------------
|
|
4
5
|
|
|
5
6
|
@mixin matcha-drawer-theme($theme) {
|
|
6
|
-
|
|
7
|
+
$primary: map-get($theme, primary);
|
|
7
8
|
$accent: map-get($theme, accent);
|
|
8
9
|
$warn: map-get($theme, warn);
|
|
9
|
-
$primary: map-get($theme, primary);
|
|
10
10
|
$background: map-get($theme, background);
|
|
11
11
|
$foreground: map-get($theme, foreground);
|
|
12
12
|
|
|
13
|
-
// =====
|
|
14
|
-
matcha-drawer {
|
|
13
|
+
// ===== DRAWER CONTAINER =====
|
|
14
|
+
matcha-drawer-container {
|
|
15
15
|
display: block;
|
|
16
|
-
transition: width 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
|
|
17
|
-
z-index: 10;
|
|
18
|
-
position: relative;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
// ===== DRAWER CONTAINER WRAPPER =====
|
|
22
|
-
.matcha-drawer-container-wrapper {
|
|
23
|
-
display: flex;
|
|
24
|
-
height: 100%;
|
|
25
|
-
width: 100%;
|
|
26
16
|
position: relative;
|
|
17
|
+
z-index: 1;
|
|
18
|
+
box-sizing: border-box;
|
|
19
|
+
-webkit-overflow-scrolling: touch;
|
|
27
20
|
overflow: hidden;
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
// ===== DRAWER CONTENT WRAPPER =====
|
|
31
|
-
.matcha-drawer-content-wrapper {
|
|
32
|
-
flex: 1;
|
|
33
|
-
overflow-y: auto;
|
|
34
|
-
display: flex;
|
|
35
|
-
flex-direction: column;
|
|
36
|
-
width: 100%;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
// ===== BACKDROP =====
|
|
40
|
-
.matcha-backdrop {
|
|
41
|
-
position: absolute;
|
|
42
|
-
top: 0;
|
|
43
|
-
left: 0;
|
|
44
|
-
width: 100%;
|
|
45
|
-
height: 100%;
|
|
46
|
-
background: getBackgroundAlpha($theme);
|
|
47
|
-
backdrop-filter: blur(6px);
|
|
48
|
-
z-index: 9;
|
|
49
|
-
cursor: pointer;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
// ===== DRAWER CONTAINER =====
|
|
53
|
-
.matcha-drawer-container {
|
|
54
|
-
display: flex;
|
|
55
|
-
height: 100%;
|
|
56
|
-
background: getBackground($theme);
|
|
57
|
-
transition: all 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
|
|
21
|
+
background-color: getBackground($theme);
|
|
22
|
+
color: getForeground($theme);
|
|
58
23
|
|
|
59
|
-
//
|
|
60
|
-
|
|
24
|
+
// Backdrop
|
|
25
|
+
.matcha-drawer-backdrop {
|
|
26
|
+
position: absolute;
|
|
27
|
+
top: 0;
|
|
61
28
|
left: 0;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
&.matcha-drawer-right {
|
|
65
29
|
right: 0;
|
|
30
|
+
bottom: 0;
|
|
31
|
+
display: block;
|
|
32
|
+
z-index: 3;
|
|
33
|
+
visibility: hidden;
|
|
34
|
+
background-color: getBackgroundAlpha($theme);
|
|
35
|
+
backdrop-filter: blur(4px);
|
|
36
|
+
opacity: 0;
|
|
37
|
+
transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1),
|
|
38
|
+
visibility 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
66
39
|
}
|
|
67
40
|
|
|
68
|
-
//
|
|
69
|
-
&.matcha-drawer-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
z-index: 10;
|
|
73
|
-
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
|
|
74
|
-
border-radius: 0 8px 8px 0;
|
|
75
|
-
width: 320px !important; // Largura fixa para overlay
|
|
41
|
+
// Backdrop visível quando há drawer aberto
|
|
42
|
+
&.matcha-drawer-container-has-open .matcha-drawer-backdrop {
|
|
43
|
+
visibility: visible;
|
|
44
|
+
opacity: 1;
|
|
76
45
|
}
|
|
77
46
|
|
|
78
|
-
|
|
47
|
+
// Container do conteúdo principal
|
|
48
|
+
.matcha-drawer-content-container {
|
|
79
49
|
position: relative;
|
|
80
|
-
|
|
81
|
-
|
|
50
|
+
z-index: 0; // Menor que o drawer (z-index: 3)
|
|
51
|
+
display: block;
|
|
52
|
+
height: 100%;
|
|
53
|
+
overflow: auto;
|
|
82
54
|
}
|
|
83
|
-
|
|
84
55
|
}
|
|
85
56
|
|
|
86
|
-
// ===== DRAWER
|
|
87
|
-
|
|
88
|
-
display:
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
57
|
+
// ===== DRAWER =====
|
|
58
|
+
matcha-drawer {
|
|
59
|
+
display: block;
|
|
60
|
+
position: absolute;
|
|
61
|
+
top: 0;
|
|
62
|
+
bottom: 0;
|
|
63
|
+
z-index: 10; // Maior z-index para garantir que fique acima do conteúdo
|
|
64
|
+
outline: 0;
|
|
65
|
+
box-sizing: border-box;
|
|
93
66
|
overflow-y: auto;
|
|
94
|
-
|
|
67
|
+
overflow-x: hidden;
|
|
68
|
+
transform: translate3d(-100%, 0, 0);
|
|
69
|
+
visibility: hidden;
|
|
70
|
+
transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1),
|
|
71
|
+
visibility 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
72
|
+
background-color: getBackground($theme);
|
|
73
|
+
color: getForeground($theme);
|
|
74
|
+
box-shadow: 0 8px 10px -5px rgba(0,0,0,.2),
|
|
75
|
+
0 16px 24px 2px rgba(0,0,0,.14),
|
|
76
|
+
0 6px 30px 5px rgba(0,0,0,.12);
|
|
77
|
+
pointer-events: auto; // Garante que seja sempre clicável
|
|
95
78
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
border-bottom: 1px solid getDisabled($theme);
|
|
99
|
-
position: relative;
|
|
100
|
-
display: flex;
|
|
101
|
-
align-items: center;
|
|
102
|
-
justify-content: space-between;
|
|
103
|
-
}
|
|
79
|
+
// Largura agora é controlada pela propriedade width do componente
|
|
80
|
+
// width: 256px; // Removido - agora é dinâmico
|
|
104
81
|
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
82
|
+
// Posição end (direita)
|
|
83
|
+
&.matcha-drawer-end {
|
|
84
|
+
right: 0;
|
|
85
|
+
transform: translate3d(100%, 0, 0);
|
|
86
|
+
}
|
|
110
87
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
88
|
+
// Estado aberto
|
|
89
|
+
&.matcha-drawer-opened {
|
|
90
|
+
transform: translate3d(0, 0, 0);
|
|
91
|
+
visibility: visible;
|
|
92
|
+
}
|
|
116
93
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
background: none;
|
|
122
|
-
border: none;
|
|
123
|
-
cursor: pointer;
|
|
124
|
-
color: getForeground($theme);
|
|
125
|
-
transition: background-color 0.2s ease;
|
|
94
|
+
// Modo over - fica por cima com z-index maior
|
|
95
|
+
&.matcha-drawer-over {
|
|
96
|
+
z-index: 15; // Maior que o z-index base (10)
|
|
97
|
+
border-right: 1px solid getDisabled($theme);
|
|
126
98
|
|
|
127
|
-
|
|
128
|
-
|
|
99
|
+
&.matcha-drawer-end {
|
|
100
|
+
border-right: none;
|
|
101
|
+
border-left: 1px solid getDisabled($theme);
|
|
102
|
+
}
|
|
129
103
|
}
|
|
130
|
-
}
|
|
131
104
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
105
|
+
// Modo side - fica fixo sem shadow
|
|
106
|
+
&.matcha-drawer-side {
|
|
107
|
+
z-index: 10; // Mantém o z-index base
|
|
108
|
+
border-right: 1px solid getDisabled($theme);
|
|
109
|
+
box-shadow: none;
|
|
137
110
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
111
|
+
&.matcha-drawer-end {
|
|
112
|
+
border-right: none;
|
|
113
|
+
border-left: 1px solid getDisabled($theme);
|
|
114
|
+
}
|
|
142
115
|
}
|
|
143
|
-
}
|
|
144
116
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
117
|
+
// Modo push - empurra o conteúdo sem shadow
|
|
118
|
+
&.matcha-drawer-push {
|
|
119
|
+
border-right: 1px solid getDisabled($theme);
|
|
120
|
+
box-shadow: none;
|
|
121
|
+
|
|
122
|
+
&.matcha-drawer-end {
|
|
123
|
+
border-right: none;
|
|
124
|
+
border-left: 1px solid getDisabled($theme);
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
// Inner container do drawer
|
|
129
|
+
.matcha-drawer-inner-container {
|
|
130
|
+
width: 100%;
|
|
131
|
+
height: 100%;
|
|
132
|
+
-webkit-overflow-scrolling: touch;
|
|
133
|
+
display: flex;
|
|
134
|
+
flex-direction: column;
|
|
135
|
+
position: relative; // Garante posicionamento correto
|
|
136
|
+
pointer-events: auto; // Garante que seja clicável
|
|
149
137
|
}
|
|
150
138
|
}
|
|
151
139
|
|
|
152
|
-
// =====
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
140
|
+
// ===== DRAWER CONTENT =====
|
|
141
|
+
matcha-drawer-content {
|
|
142
|
+
position: relative;
|
|
143
|
+
z-index: 1;
|
|
144
|
+
display: block;
|
|
145
|
+
height: 100%;
|
|
146
|
+
overflow: auto;
|
|
147
|
+
transition: margin 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
|
|
156
148
|
}
|
|
157
149
|
}
|
package/main.scss
CHANGED
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
@import "./components/matcha-avatar.scss"; // matcha-avatar($theme)
|
|
54
54
|
@import "./components/matcha-paginator.scss"; // matcha-paginator($theme)
|
|
55
55
|
@import "./components/matcha-slider.scss"; // matcha-slider($theme)
|
|
56
|
-
|
|
56
|
+
@import "./components/matcha-divider.scss"; // matcha-divider($theme)
|
|
57
57
|
@import "./components/matcha-highlight.scss"; // matcha-highlight($theme)
|
|
58
58
|
@import "./components/matcha-tabs.scss"; // matcha-tabs($theme)
|
|
59
59
|
@import "./components/matcha-modal.scss"; // matcha-modal($theme)
|
|
@@ -174,4 +174,5 @@
|
|
|
174
174
|
@include matcha-paginator-theme($theme);
|
|
175
175
|
@include matcha-slider-theme($theme);
|
|
176
176
|
@include matcha-highlight-theme($theme);
|
|
177
|
+
@include matcha-divider-theme($theme);
|
|
177
178
|
}
|