matcha-theme 20.205.0 → 20.207.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.
@@ -1,66 +1,67 @@
1
1
  // =========================================================
2
2
  // * Matcha Date Styles
3
3
  // =========================================================
4
+ @mixin matcha-date-theme($theme) {
5
+ .matcha-date-input {
6
+ width: 100%;
7
+ font-size: 14px;
8
+ font-family: inherit;
9
+ line-height: 1.5;
10
+ background-color: transparent;
11
+ border: none;
12
+ outline: none;
13
+ cursor: pointer;
4
14
 
5
- .matcha-date-input {
6
- width: 100%;
7
- font-size: 14px;
8
- font-family: inherit;
9
- line-height: 1.5;
10
- color: var(--matcha-text-primary, #333);
11
- background-color: transparent;
12
- border: none;
13
- outline: none;
14
- cursor: pointer;
15
+ &::placeholder {
16
+ color: getGrey($theme);
17
+ }
15
18
 
16
- &::placeholder {
17
- color: var(--matcha-text-placeholder, #999);
18
- }
19
+ &:disabled {
20
+ cursor: not-allowed;
21
+ opacity: 0.6;
22
+ color: getDisabled($theme);
23
+ }
19
24
 
20
- &:disabled {
21
- cursor: not-allowed;
22
- opacity: 0.6;
23
- color: var(--matcha-text-disabled, #999);
24
- }
25
+ // Customização do ícone do calendário
26
+ &::-webkit-calendar-picker-indicator {
27
+ cursor: pointer;
28
+ filter: opacity(0.6);
29
+ transition: filter 0.2s ease;
25
30
 
26
- // Customização do ícone do calendário
27
- &::-webkit-calendar-picker-indicator {
28
- cursor: pointer;
29
- filter: opacity(0.6);
30
- transition: filter 0.2s ease;
31
+ &:hover {
32
+ filter: opacity(1);
33
+ }
34
+ }
31
35
 
32
- &:hover {
33
- filter: opacity(1);
36
+ &:disabled::-webkit-calendar-picker-indicator {
37
+ cursor: not-allowed;
38
+ opacity: 0.3;
34
39
  }
35
- }
36
40
 
37
- &:disabled::-webkit-calendar-picker-indicator {
38
- cursor: not-allowed;
39
- opacity: 0.3;
40
- }
41
+ // Firefox
42
+ &::-moz-calendar-picker-indicator {
43
+ cursor: pointer;
44
+ opacity: 0.6;
45
+ transition: opacity 0.2s ease;
41
46
 
42
- // Firefox
43
- &::-moz-calendar-picker-indicator {
44
- cursor: pointer;
45
- opacity: 0.6;
46
- transition: opacity 0.2s ease;
47
+ &:hover {
48
+ opacity: 1;
49
+ }
50
+ }
47
51
 
48
- &:hover {
49
- opacity: 1;
52
+ &:disabled::-moz-calendar-picker-indicator {
53
+ cursor: not-allowed;
54
+ opacity: 0.3;
50
55
  }
51
56
  }
52
57
 
53
- &:disabled::-moz-calendar-picker-indicator {
54
- cursor: not-allowed;
55
- opacity: 0.3;
58
+ // Integração com matcha-form-field
59
+ matcha-form-field {
60
+ matcha-date {
61
+ width: 100%;
62
+ display: block;
63
+ }
56
64
  }
57
- }
58
65
 
59
- // Integração com matcha-form-field
60
- matcha-form-field {
61
- matcha-date {
62
- width: 100%;
63
- display: block;
64
- }
65
- }
66
66
 
67
+ }
@@ -548,7 +548,6 @@
548
548
 
549
549
  &:hover {
550
550
  background: getPrimaryAlpha($theme) !important;
551
- cursor: pointer;
552
551
  }
553
552
  }
554
553
  }
@@ -0,0 +1,39 @@
1
+ // =========================================================
2
+ // * Matcha Time Range Styles
3
+ // =========================================================
4
+
5
+ .matcha-time-range-container {
6
+ display: flex;
7
+ gap: 16px;
8
+ width: 100%;
9
+ align-items: flex-start;
10
+
11
+ // Responsividade
12
+ @media (max-width: 768px) {
13
+ flex-direction: column;
14
+ gap: 12px;
15
+ }
16
+
17
+ // Os campos de hora dentro do range
18
+ matcha-form-field {
19
+ flex: 1;
20
+ min-width: 0;
21
+
22
+ &:first-child {
23
+ flex-shrink: 0;
24
+ }
25
+
26
+ &:last-child {
27
+ flex-shrink: 0;
28
+ }
29
+ }
30
+
31
+ // Quando há erro de validação no range
32
+ matcha-form-field.ng-invalid.ng-touched {
33
+ matcha-time {
34
+ .matcha-time-input {
35
+ border-color: var(--matcha-color-error, #f44336);
36
+ }
37
+ }
38
+ }
39
+ }
@@ -0,0 +1,33 @@
1
+ // =========================================================
2
+ // * Matcha Time Styles
3
+ // =========================================================
4
+ @mixin matcha-time-theme($theme) {
5
+ .matcha-time-input {
6
+ width: 100%;
7
+ font-size: 14px;
8
+ font-family: inherit;
9
+ line-height: 1.5;
10
+ background-color: transparent;
11
+ border: none;
12
+ outline: none;
13
+ cursor: pointer;
14
+
15
+ &::placeholder {
16
+ color: getGrey($theme);
17
+ }
18
+
19
+ &:disabled {
20
+ cursor: not-allowed;
21
+ opacity: 0.6;
22
+ color: getDisabled($theme);
23
+ }
24
+ }
25
+
26
+ // Integração com matcha-form-field
27
+ matcha-form-field {
28
+ matcha-time {
29
+ width: 100%;
30
+ display: block;
31
+ }
32
+ }
33
+ }
package/main.scss CHANGED
@@ -62,6 +62,8 @@
62
62
  @import "./components/matcha-chip.scss"; // matcha-chip($theme)
63
63
  @import "./components/matcha-date.scss"; // matcha-date($theme)
64
64
  @import "./components/matcha-date-range.scss"; // matcha-date-range($theme)
65
+ @import "./components/matcha-time.scss"; // matcha-time-theme($theme)
66
+ @import "./components/matcha-time-range.scss"; // matcha-time-range($theme)
65
67
  @import "./components/matcha-progress-bar.scss"; // matcha-progress-bar($theme)
66
68
  @import "./components/matcha-page-builder.scss"; // matcha-page-builder($theme)
67
69
  @import "./components/matcha-snack-bar.scss"; // matcha-snack-bar-theme($theme)
@@ -187,4 +189,6 @@
187
189
  @include matcha-progress-bar-theme($theme);
188
190
  @include matcha-page-builder-theme($theme);
189
191
  @include matcha-snack-bar-theme($theme);
192
+ @include matcha-date-theme($theme);
193
+ @include matcha-time-theme($theme);
190
194
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "matcha-theme",
3
- "version": "20.205.0",
3
+ "version": "20.207.0",
4
4
  "description": "Themes for matcha-design-system",
5
5
  "main": "main.scss",
6
6
  "scripts": {
@@ -38,6 +38,13 @@
38
38
  font-size: 16px !important;
39
39
  line-height: 24px !important;
40
40
  }
41
+
42
+ svg,
43
+ svg use{
44
+ color:getForeground($theme);
45
+ fill:getForeground($theme);
46
+ stroke:getForeground($theme);
47
+ }
41
48
  }
42
49
  }
43
50
  }