matcha-theme 20.6.0 → 20.8.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-button-toggle.scss +5 -5
- package/components/matcha-buttons.scss +8 -8
- package/components/matcha-cards.scss +5 -5
- package/components/matcha-drawer.scss +157 -0
- package/components/matcha-form-field.scss +2 -1
- package/components/matcha-spinner.scss +2 -1
- package/components/matcha-tabs.scss +4 -4
- package/main.scss +2 -0
- package/package.json +1 -1
- package/tokens/_color-tokens.scss +16 -16
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
&:not([inactivetype]),
|
|
3
3
|
&[inactivetype="solid"]{
|
|
4
4
|
@each $colorName, $colorFn in $color-functions {
|
|
5
|
-
&[inactivecolor="#{$colorName}"]{
|
|
5
|
+
&[inactivecolor="#{'' + $colorName}"]{
|
|
6
6
|
.button-group{
|
|
7
7
|
button[matcha-button],
|
|
8
8
|
a[matcha-button]{
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
@mixin _colorize-inactive-type-basic-button-toggle-item($theme, $color-functions) {
|
|
37
37
|
&[inactivetype="basic"]{
|
|
38
38
|
@each $colorName, $colorFn in $color-functions {
|
|
39
|
-
&[inactivecolor="#{$colorName}"]{
|
|
39
|
+
&[inactivecolor="#{'' + $colorName}"]{
|
|
40
40
|
.button-group{
|
|
41
41
|
button[matcha-button],
|
|
42
42
|
a[matcha-button]{
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
//disabled false
|
|
73
73
|
&:not([disabled="true"]){
|
|
74
74
|
@each $colorName, $colorFn in $color-functions {
|
|
75
|
-
&[inactivecolor="#{$colorName}"]{
|
|
75
|
+
&[inactivecolor="#{'' + $colorName}"]{
|
|
76
76
|
.button-group{
|
|
77
77
|
button[matcha-button],
|
|
78
78
|
a[matcha-button]{
|
|
@@ -110,7 +110,7 @@
|
|
|
110
110
|
@mixin _colorize-inactive-type-alpha-button-toggle-item($theme, $color-functions) {
|
|
111
111
|
&[inactivetype="alpha"]{
|
|
112
112
|
@each $colorName, $colorFn in $color-functions {
|
|
113
|
-
&[inactivecolor="#{$colorName}"]{
|
|
113
|
+
&[inactivecolor="#{'' + $colorName}"]{
|
|
114
114
|
.button-group{
|
|
115
115
|
button[matcha-button],
|
|
116
116
|
a[matcha-button]{
|
|
@@ -146,7 +146,7 @@
|
|
|
146
146
|
|
|
147
147
|
&[inactivetype="link"]{
|
|
148
148
|
@each $colorName, $colorFn in $color-functions {
|
|
149
|
-
&[inactivecolor="#{$colorName}"]{
|
|
149
|
+
&[inactivecolor="#{'' + $colorName}"]{
|
|
150
150
|
.button-group{
|
|
151
151
|
button[matcha-button],
|
|
152
152
|
a[matcha-button]{
|
|
@@ -255,24 +255,24 @@ a[matcha-button] {
|
|
|
255
255
|
}
|
|
256
256
|
|
|
257
257
|
@each $colorName, $colorFn in $color-functions {
|
|
258
|
-
&[color="#{$colorName}"][outline]:not([outline="false"]) .ripple,
|
|
259
|
-
&[color="#{$colorName}"][basic]:not([basic="false"]) .ripple {
|
|
258
|
+
&[color="#{'' + $colorName}"][outline]:not([outline="false"]) .ripple,
|
|
259
|
+
&[color="#{'' + $colorName}"][basic]:not([basic="false"]) .ripple {
|
|
260
260
|
background: call(#{$colorFn}Alpha, $theme)
|
|
261
261
|
}
|
|
262
|
-
&[color="#{$colorName}"][alpha]:not([alpha="false"]){
|
|
262
|
+
&[color="#{'' + $colorName}"][alpha]:not([alpha="false"]){
|
|
263
263
|
background: call(#{$colorFn}Alpha, $theme);
|
|
264
264
|
color: call(#{$colorFn}, $theme);
|
|
265
265
|
}
|
|
266
|
-
&[color="#{$colorName}"][outline]:not([outline="false"]),
|
|
267
|
-
&[color="#{$colorName}"][link]:not([link="false"]),
|
|
268
|
-
&[color="#{$colorName}"][basic]:not([basic="false"]) {
|
|
266
|
+
&[color="#{'' + $colorName}"][outline]:not([outline="false"]),
|
|
267
|
+
&[color="#{'' + $colorName}"][link]:not([link="false"]),
|
|
268
|
+
&[color="#{'' + $colorName}"][basic]:not([basic="false"]) {
|
|
269
269
|
color: call(#{$colorFn}, $theme);
|
|
270
270
|
}
|
|
271
|
-
&[color="#{$colorName}"]{
|
|
271
|
+
&[color="#{'' + $colorName}"]{
|
|
272
272
|
background: call(#{$colorFn}, $theme);
|
|
273
273
|
color: call(#{$colorFn}Contrast, $theme);
|
|
274
274
|
}
|
|
275
|
-
&[color="#{$colorName}"] .ripple{background: call(#{$colorFn}ContrastAlpha, $theme)}
|
|
275
|
+
&[color="#{'' + $colorName}"] .ripple{background: call(#{$colorFn}ContrastAlpha, $theme)}
|
|
276
276
|
|
|
277
277
|
&[disabled],
|
|
278
278
|
&[disabled]:not([disabled="false"]),
|
|
@@ -29,17 +29,17 @@
|
|
|
29
29
|
.matcha-card,
|
|
30
30
|
.matcha-card-flat {
|
|
31
31
|
@each $colorName, $colorFn in $color-functions {
|
|
32
|
-
&[color="#{$colorName}"][tint]:not([tint="false"]) {
|
|
32
|
+
&[color="#{'' + $colorName}"][tint]:not([tint="false"]) {
|
|
33
33
|
background: call(#{$colorFn}Alpha, $theme);
|
|
34
34
|
color: call(#{$colorFn}, $theme);
|
|
35
35
|
}
|
|
36
|
-
&[color="#{$colorName}"][outline]:not([outline="false"]),
|
|
37
|
-
&[color="#{$colorName}"][link]:not([link="false"]),
|
|
38
|
-
&[color="#{$colorName}"][basic]:not([basic="false"]) {
|
|
36
|
+
&[color="#{'' + $colorName}"][outline]:not([outline="false"]),
|
|
37
|
+
&[color="#{'' + $colorName}"][link]:not([link="false"]),
|
|
38
|
+
&[color="#{'' + $colorName}"][basic]:not([basic="false"]) {
|
|
39
39
|
color: call(#{$colorFn}, $theme);
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
&[color="#{$colorName}"] {
|
|
42
|
+
&[color="#{'' + $colorName}"] {
|
|
43
43
|
background: call(#{$colorFn}, $theme);
|
|
44
44
|
color: call(#{$colorFn}Contrast, $theme);
|
|
45
45
|
&[alpha]:not([alpha="false"]) {
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
// -------------------------------------------------------------------------------------------------------------------
|
|
2
|
+
// @ Matcha Drawer Component Styles
|
|
3
|
+
// -------------------------------------------------------------------------------------------------------------------
|
|
4
|
+
|
|
5
|
+
@mixin matcha-drawer-theme($theme) {
|
|
6
|
+
// Variáveis do tema
|
|
7
|
+
$accent: map-get($theme, accent);
|
|
8
|
+
$warn: map-get($theme, warn);
|
|
9
|
+
$primary: map-get($theme, primary);
|
|
10
|
+
$background: map-get($theme, background);
|
|
11
|
+
$foreground: map-get($theme, foreground);
|
|
12
|
+
|
|
13
|
+
// ===== HOST STYLES =====
|
|
14
|
+
matcha-drawer {
|
|
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
|
+
position: relative;
|
|
27
|
+
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: fixed;
|
|
42
|
+
top: 0;
|
|
43
|
+
left: 0;
|
|
44
|
+
width: 100%;
|
|
45
|
+
height: 100%;
|
|
46
|
+
background: rgba(getForeground($theme), 0.3);
|
|
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);
|
|
58
|
+
|
|
59
|
+
// Posicionamento
|
|
60
|
+
&.matcha-drawer-left {
|
|
61
|
+
left: 0;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
&.matcha-drawer-right {
|
|
65
|
+
right: 0;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
// Modos de operação
|
|
69
|
+
&.matcha-drawer-overlay-mode {
|
|
70
|
+
position: fixed;
|
|
71
|
+
top: 0;
|
|
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
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
&.matcha-drawer-push-mode {
|
|
79
|
+
position: relative;
|
|
80
|
+
border-right: 1px solid getDisabled($theme);
|
|
81
|
+
z-index: 1;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// ===== DRAWER CONTENT =====
|
|
87
|
+
.matcha-drawer-content {
|
|
88
|
+
display: flex;
|
|
89
|
+
flex-direction: column;
|
|
90
|
+
background-color: getBackground($theme);
|
|
91
|
+
width: 100%;
|
|
92
|
+
height: 100%;
|
|
93
|
+
overflow-y: auto;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
// ===== DRAWER HEADER =====
|
|
97
|
+
.matcha-drawer-header {
|
|
98
|
+
border-bottom: 1px solid getDisabled($theme);
|
|
99
|
+
position: relative;
|
|
100
|
+
display: flex;
|
|
101
|
+
align-items: center;
|
|
102
|
+
justify-content: space-between;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
// ===== DRAWER MAIN CONTENT =====
|
|
106
|
+
.matcha-drawer-main-content {
|
|
107
|
+
flex: 1;
|
|
108
|
+
padding: 16px;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
// ===== DRAWER FOOTER =====
|
|
112
|
+
.matcha-drawer-footer {
|
|
113
|
+
padding: 16px;
|
|
114
|
+
border-top: 1px solid getDisabled($theme);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
// ===== DRAWER CLOSE BUTTON =====
|
|
118
|
+
.matcha-drawer-close-button {
|
|
119
|
+
padding: 8px;
|
|
120
|
+
border-radius: 4px;
|
|
121
|
+
background: none;
|
|
122
|
+
border: none;
|
|
123
|
+
cursor: pointer;
|
|
124
|
+
color: getForeground($theme);
|
|
125
|
+
transition: background-color 0.2s ease;
|
|
126
|
+
|
|
127
|
+
&:hover {
|
|
128
|
+
background-color: rgba(getSurface($theme), 0.04);
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
// ===== HOVER EFFECTS =====
|
|
133
|
+
.sub-sidebar-item:hover:not(.disabled) {
|
|
134
|
+
transform: translateY(-1px);
|
|
135
|
+
background-color: map-get($accent, default);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
// ===== RESPONSIVO =====
|
|
139
|
+
@media (max-width: 1023px) {
|
|
140
|
+
.matcha-drawer-container {
|
|
141
|
+
width: 100% !important;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
// ===== CENTRALIZAÇÃO EM TELAS GRANDES =====
|
|
146
|
+
@media (min-width: 1920px) {
|
|
147
|
+
.matcha-drawer-container {
|
|
148
|
+
transform: translateX(calc(50vw - 960px));
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
// ===== ACESSIBILIDADE =====
|
|
153
|
+
.matcha-drawer-container:focus {
|
|
154
|
+
outline: 2px solid getAccent($theme);
|
|
155
|
+
outline-offset: 2px;
|
|
156
|
+
}
|
|
157
|
+
}
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
textarea {
|
|
13
13
|
min-height: px-to-rem(20px); /* Mantém a altura dos inputs de texto */
|
|
14
14
|
line-height: px-to-rem($line-height);
|
|
15
|
+
padding: 0;
|
|
15
16
|
}
|
|
16
17
|
}
|
|
17
18
|
}
|
|
@@ -85,7 +86,7 @@
|
|
|
85
86
|
input[type="time"]:focus,
|
|
86
87
|
textarea:focus {
|
|
87
88
|
outline: none;
|
|
88
|
-
}
|
|
89
|
+
}
|
|
89
90
|
}
|
|
90
91
|
|
|
91
92
|
matcha-form-field{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@mixin _colorize-inactive-type-basic($theme, $color-functions) {
|
|
2
2
|
&[inactivetype="basic"]{
|
|
3
3
|
@each $colorName, $colorFn in $color-functions {
|
|
4
|
-
&[inactivecolor="#{$colorName}"]{
|
|
4
|
+
&[inactivecolor="#{'' + $colorName}"]{
|
|
5
5
|
.button-group matcha-tab-item{
|
|
6
6
|
button[matcha-button],
|
|
7
7
|
a[matcha-button]{
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
//disabled false
|
|
38
38
|
&:not([disabled="true"]){
|
|
39
39
|
@each $colorName, $colorFn in $color-functions {
|
|
40
|
-
&[inactivecolor="#{$colorName}"]{
|
|
40
|
+
&[inactivecolor="#{'' + $colorName}"]{
|
|
41
41
|
.button-group matcha-tab-item{
|
|
42
42
|
button[matcha-button],
|
|
43
43
|
a[matcha-button]{
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
@mixin _colorize-inactive-type-alpha($theme, $color-functions) {
|
|
76
76
|
&[inactivetype="alpha"]{
|
|
77
77
|
@each $colorName, $colorFn in $color-functions {
|
|
78
|
-
&[inactivecolor="#{$colorName}"]{
|
|
78
|
+
&[inactivecolor="#{'' + $colorName}"]{
|
|
79
79
|
.button-group matcha-tab-item{
|
|
80
80
|
button[matcha-button],
|
|
81
81
|
a[matcha-button]{
|
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
|
|
112
112
|
&[inactivetype="link"]{
|
|
113
113
|
@each $colorName, $colorFn in $color-functions {
|
|
114
|
-
&[inactivecolor="#{$colorName}"]{
|
|
114
|
+
&[inactivecolor="#{'' + $colorName}"]{
|
|
115
115
|
.button-group matcha-tab-item{
|
|
116
116
|
button[matcha-button],
|
|
117
117
|
a[matcha-button]{
|
package/main.scss
CHANGED
|
@@ -50,6 +50,7 @@
|
|
|
50
50
|
|
|
51
51
|
@import "./components/matcha-tabs.scss"; // matcha-tabs($theme)
|
|
52
52
|
@import "./components/matcha-modal.scss"; // matcha-modal($theme)
|
|
53
|
+
@import "./components/matcha-drawer.scss"; // matcha-drawer-theme($theme)
|
|
53
54
|
// VENDORS
|
|
54
55
|
@import "./vendors/angular-editor.scss";
|
|
55
56
|
@import "./vendors/angular-material-fixes.scss";
|
|
@@ -158,4 +159,5 @@
|
|
|
158
159
|
@include matcha-skeleton-theme($theme);
|
|
159
160
|
@include matcha-radio($theme);
|
|
160
161
|
@include matcha-avatar-theme($theme);
|
|
162
|
+
@include matcha-drawer-theme($theme);
|
|
161
163
|
}
|
package/package.json
CHANGED
|
@@ -158,20 +158,20 @@ $color-base-green-a200: #69f0ae;
|
|
|
158
158
|
$color-base-green-a400: #2cff5b;
|
|
159
159
|
$color-base-green-a700: #13ff48;
|
|
160
160
|
|
|
161
|
-
$color-base-light-green-50: #
|
|
162
|
-
$color-base-light-green-100: #
|
|
163
|
-
$color-base-light-green-200: #
|
|
164
|
-
$color-base-light-green-300: #
|
|
165
|
-
$color-base-light-green-400: #
|
|
166
|
-
$color-base-light-green-500: #
|
|
167
|
-
$color-base-light-green-600: #
|
|
168
|
-
$color-base-light-green-700: #
|
|
169
|
-
$color-base-light-green-800: #
|
|
170
|
-
$color-base-light-green-900: #
|
|
171
|
-
$color-base-light-green-a100: #
|
|
172
|
-
$color-base-light-green-a200: #
|
|
173
|
-
$color-base-light-green-a400: #
|
|
174
|
-
$color-base-light-green-a700: #
|
|
161
|
+
$color-base-light-green-50: #E9F9DF;
|
|
162
|
+
$color-base-light-green-100: #D4F4C0;
|
|
163
|
+
$color-base-light-green-200: #B7ED96;
|
|
164
|
+
$color-base-light-green-300: #9AE56B;
|
|
165
|
+
$color-base-light-green-400: #84E04C;
|
|
166
|
+
$color-base-light-green-500: #6EDA2C;
|
|
167
|
+
$color-base-light-green-600: #5EB925;
|
|
168
|
+
$color-base-light-green-700: #4D991F;
|
|
169
|
+
$color-base-light-green-800: #376D16;
|
|
170
|
+
$color-base-light-green-900: #274C0F;
|
|
171
|
+
$color-base-light-green-a100: #D4FFBE;
|
|
172
|
+
$color-base-light-green-a200: #B1FF8A;
|
|
173
|
+
$color-base-light-green-a400: #8DFF56;
|
|
174
|
+
$color-base-light-green-a700: #6AFF21;
|
|
175
175
|
|
|
176
176
|
$color-base-lime-50: #f0f7e0;
|
|
177
177
|
$color-base-lime-100: #dbebb3;
|
|
@@ -698,8 +698,8 @@ $mat-light-green: (
|
|
|
698
698
|
200: $dark-primary-text,
|
|
699
699
|
300: $dark-primary-text,
|
|
700
700
|
400: $dark-primary-text,
|
|
701
|
-
500: $
|
|
702
|
-
600: $
|
|
701
|
+
500: $dark-primary-text,
|
|
702
|
+
600: $dark-primary-text,
|
|
703
703
|
700: $light-primary-text,
|
|
704
704
|
800: $light-primary-text,
|
|
705
705
|
900: $light-primary-text,
|