matcha-theme 20.190.0 → 20.192.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-menu.scss +25 -1
- package/components/matcha-panel.scss +2 -4
- package/components/matcha-snack-bar.scss +118 -0
- package/main.scss +2 -0
- package/package.json +1 -1
|
@@ -32,5 +32,29 @@
|
|
|
32
32
|
margin-right: 12px;
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
|
+
|
|
36
|
+
// Item com submenu - mostra indicador de seta
|
|
37
|
+
.matcha-menu-item-has-submenu {
|
|
38
|
+
position: relative;
|
|
39
|
+
padding-right: 36px;
|
|
40
|
+
|
|
41
|
+
&::after {
|
|
42
|
+
content: '';
|
|
43
|
+
position: absolute;
|
|
44
|
+
right: 12px;
|
|
45
|
+
top: 50%;
|
|
46
|
+
transform: translateY(-50%);
|
|
47
|
+
width: 0;
|
|
48
|
+
height: 0;
|
|
49
|
+
border-left: 5px solid getForeground($theme);
|
|
50
|
+
border-top: 4px solid transparent;
|
|
51
|
+
border-bottom: 4px solid transparent;
|
|
52
|
+
opacity: 0.5;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
&:hover::after {
|
|
56
|
+
opacity: 0.8;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
35
59
|
}
|
|
36
|
-
}
|
|
60
|
+
}
|
|
@@ -11,9 +11,7 @@
|
|
|
11
11
|
|
|
12
12
|
.matcha-panel-pane {
|
|
13
13
|
position: absolute;
|
|
14
|
-
display:
|
|
15
|
-
flex-direction: column;
|
|
16
|
-
max-width: 100%;
|
|
14
|
+
display: block;
|
|
17
15
|
max-height: 100%;
|
|
18
16
|
pointer-events: auto; // Reativa cliques para o painel em si
|
|
19
17
|
box-sizing: border-box;
|
|
@@ -25,7 +23,7 @@
|
|
|
25
23
|
display: flex;
|
|
26
24
|
flex-direction: column;
|
|
27
25
|
max-height: 280px;
|
|
28
|
-
|
|
26
|
+
width: 100%;
|
|
29
27
|
|
|
30
28
|
// Animações
|
|
31
29
|
opacity: 0;
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
/*
|
|
2
|
+
How to use
|
|
3
|
+
@import '~matcha-theme/components/matcha-snack-bar.scss';
|
|
4
|
+
@include matcha-snack-bar-theme($theme);
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
@mixin matcha-snack-bar-theme($theme) {
|
|
8
|
+
matcha-snack-bar {
|
|
9
|
+
.matcha-snack-bar-content {
|
|
10
|
+
background: getSurface($theme);
|
|
11
|
+
color: getForeground($theme);
|
|
12
|
+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
&[color="success"] .matcha-snack-bar-content {
|
|
16
|
+
background: getSuccess($theme);
|
|
17
|
+
color: getSuccessContrast($theme);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&[color="error"] .matcha-snack-bar-content {
|
|
21
|
+
background: getDanger($theme);
|
|
22
|
+
color: getDangerContrast($theme);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&[color="danger"] .matcha-snack-bar-content {
|
|
26
|
+
background: getDanger($theme);
|
|
27
|
+
color: getDangerContrast($theme);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&[color="warning"] .matcha-snack-bar-content {
|
|
31
|
+
background: getWarn($theme);
|
|
32
|
+
color: getWarnContrast($theme);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&[color="warn"] .matcha-snack-bar-content {
|
|
36
|
+
background: getWarn($theme);
|
|
37
|
+
color: getWarnContrast($theme);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&[color="info"] .matcha-snack-bar-content {
|
|
41
|
+
background: getInfo($theme);
|
|
42
|
+
color: getInfoContrast($theme);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
&[color="primary"] .matcha-snack-bar-content {
|
|
46
|
+
background: getPrimary($theme);
|
|
47
|
+
color: getPrimaryContrast($theme);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
&[color="accent"] .matcha-snack-bar-content {
|
|
51
|
+
background: getAccent($theme);
|
|
52
|
+
color: getAccentContrast($theme);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// -----------------------------------------------------------------------------------------------------
|
|
58
|
+
// @ Snack Bar - Layout base
|
|
59
|
+
// -----------------------------------------------------------------------------------------------------
|
|
60
|
+
matcha-snack-bar {
|
|
61
|
+
position: fixed;
|
|
62
|
+
z-index: 9999;
|
|
63
|
+
left: 50%;
|
|
64
|
+
transform: translateX(-50%) translateY(20px);
|
|
65
|
+
opacity: 0;
|
|
66
|
+
pointer-events: none;
|
|
67
|
+
transition: opacity 300ms ease, transform 300ms ease;
|
|
68
|
+
min-width: 320px;
|
|
69
|
+
max-width: 560px;
|
|
70
|
+
|
|
71
|
+
&[position="bottom"] {
|
|
72
|
+
bottom: 24px;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&[position="top"] {
|
|
76
|
+
top: 24px;
|
|
77
|
+
bottom: auto;
|
|
78
|
+
transform: translateX(-50%) translateY(-20px);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
&.matcha-snack-bar-visible {
|
|
82
|
+
opacity: 1;
|
|
83
|
+
pointer-events: auto;
|
|
84
|
+
transform: translateX(-50%) translateY(0);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.matcha-snack-bar-content {
|
|
88
|
+
display: flex;
|
|
89
|
+
align-items: center;
|
|
90
|
+
gap: 12px;
|
|
91
|
+
padding: 12px 16px;
|
|
92
|
+
border-radius: 8px;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.matcha-snack-bar-message {
|
|
96
|
+
flex: 1;
|
|
97
|
+
font-size: 14px;
|
|
98
|
+
line-height: 20px;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.matcha-snack-bar-close {
|
|
102
|
+
display: flex;
|
|
103
|
+
align-items: center;
|
|
104
|
+
justify-content: center;
|
|
105
|
+
background: none;
|
|
106
|
+
border: none;
|
|
107
|
+
cursor: pointer;
|
|
108
|
+
padding: 4px;
|
|
109
|
+
border-radius: 50%;
|
|
110
|
+
opacity: 0.7;
|
|
111
|
+
color: inherit;
|
|
112
|
+
transition: opacity 200ms ease;
|
|
113
|
+
|
|
114
|
+
&:hover {
|
|
115
|
+
opacity: 1;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}
|
package/main.scss
CHANGED
|
@@ -64,6 +64,7 @@
|
|
|
64
64
|
@import "./components/matcha-date-range.scss"; // matcha-date-range($theme)
|
|
65
65
|
@import "./components/matcha-progress-bar.scss"; // matcha-progress-bar($theme)
|
|
66
66
|
@import "./components/matcha-page-builder.scss"; // matcha-page-builder($theme)
|
|
67
|
+
@import "./components/matcha-snack-bar.scss"; // matcha-snack-bar-theme($theme)
|
|
67
68
|
|
|
68
69
|
// VENDORS
|
|
69
70
|
@import "./vendors/angular-editor.scss";
|
|
@@ -185,4 +186,5 @@
|
|
|
185
186
|
@include matcha-divider-theme($theme);
|
|
186
187
|
@include matcha-progress-bar-theme($theme);
|
|
187
188
|
@include matcha-page-builder-theme($theme);
|
|
189
|
+
@include matcha-snack-bar-theme($theme);
|
|
188
190
|
}
|