matcha-theme 18.1.32 → 18.1.34

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,4 +1,5 @@
1
1
  @mixin matcha-button-theme($theme) {
2
+
2
3
  $primary: map-get($theme, primary);
3
4
  $accent: map-get($theme, accent);
4
5
  $warn: map-get($theme, warn);
@@ -90,76 +91,86 @@
90
91
  color: map-get($foreground, placeholder);
91
92
  }
92
93
  }
94
+ @include _matcha-button-types($theme);
93
95
  }
94
96
  &:hover{
95
- // filter: brightness(1.1);
97
+ filter: brightness(1.05);
96
98
  }
97
99
 
98
100
  &:active{
99
- // filter: brightness(0.9);
101
+ filter: brightness(1.1);
100
102
  }
101
103
 
102
- &[disabled] {
103
- background-color: map-get($background, disabled);
104
- color: map-get($foreground, disabled);
105
- border-color: map-get($foreground, disabled);
106
- }
104
+ @include _matcha-button-types($theme); // include this properties event button don't have any size class
105
+ }
106
+ }
107
107
 
108
- &-basic {
109
- border: 0px solid currentColor;
110
- box-shadow: 0px 0px 0px 0px inset;
111
- background: transparent !important;
112
- }
113
108
 
114
- &-outline {
115
- border: 0px solid currentColor;
116
- box-shadow: 0px 0px 0px 2px inset;
117
- background: transparent !important;
118
- }
109
+ @mixin _matcha-button-types($theme){
110
+ $background: map-get($theme, background);
111
+ $foreground: map-get($theme, foreground);
119
112
 
120
- &-pill {
121
- border-radius: 999px;
122
- }
113
+ &[disabled] {
114
+ background-color: map-get($background, disabled);
115
+ color: map-get($foreground, disabled);
116
+ border-color: map-get($foreground, disabled);
117
+ }
123
118
 
124
- &-link {
125
- background-color: transparent;
126
- color: map-get($foreground, label);
127
- text-transform: initial;
128
- letter-spacing: 0;
129
- text-decoration: underline;
130
- padding: 0;
131
- }
119
+ &-basic {
120
+ border: 0px solid currentColor;
121
+ box-shadow: 0px 0px 0px 0px inset;
122
+ background: transparent !important;
123
+ }
132
124
 
133
- &-icon {
134
- aspect-ratio: 1;
135
- padding: 0 !important;
136
- display: flex;
137
- align-items: center;
138
- justify-content: center;
139
- }
125
+ &-outline {
126
+ border: 0px solid currentColor;
127
+ box-shadow: 0px 0px 0px 2px inset;
128
+ background: transparent !important;
129
+ }
140
130
 
141
- .ripple {
142
- position: absolute;
143
- border-radius: 999px;
131
+ &-pill {
132
+ border-radius: 999px;
133
+ }
134
+
135
+ &-link {
136
+ background-color: transparent;
137
+ color: map-get($foreground, label);
138
+ text-transform: initial;
139
+ letter-spacing: 0;
140
+ text-decoration: underline;
141
+ padding: 0;
142
+ }
143
+
144
+ &-icon {
145
+ aspect-ratio: 1;
146
+ padding: 0 !important;
147
+ display: flex;
148
+ align-items: center;
149
+ justify-content: center;
150
+ }
151
+
152
+ .ripple {
153
+ position: absolute;
154
+ border-radius: 999px;
155
+ transform: scale(0);
156
+ pointer-events: none;
157
+ }
158
+ .ripple.show {
159
+ animation: ripple 400ms ease-out;
160
+ }
161
+
162
+ @keyframes ripple {
163
+ 0% {
164
+ opacity: 0;
144
165
  transform: scale(0);
145
- pointer-events: none;
146
166
  }
147
- .ripple.show {
148
- animation: ripple 400ms ease-out;
167
+ 25% {
168
+ opacity: 1;
149
169
  }
150
-
151
- @keyframes ripple {
152
- 0% {
153
- opacity: 0;
154
- transform: scale(0);
155
- }
156
- 25% {
157
- opacity: 1;
158
- }
159
- 100% {
160
- opacity: 0;
161
- transform: scale(2);
162
- }
170
+ 100% {
171
+ opacity: 0;
172
+ transform: scale(2);
163
173
  }
164
174
  }
165
175
  }
176
+
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "matcha-theme",
3
- "version": "18.1.32",
3
+ "version": "18.1.34",
4
4
  "description": "Themes for matcha-design-system",
5
5
  "main": "main.scss",
6
6
  "scripts": {
@@ -238,6 +238,42 @@
238
238
  }
239
239
  }
240
240
  }
241
+
242
+ // Fixer wrappers
243
+ form {
244
+ //Form Field
245
+ .mat-form-field-appearance-outline,
246
+ .mat-form-field-appearance-fill {
247
+ .mat-form-field-subscript-wrapper {
248
+ padding: 0;
249
+ position: relative;
250
+ box-sizing: border-box;
251
+ width: 100%;
252
+ overflow: hidden;
253
+ }
254
+
255
+ .mat-form-field-wrapper,
256
+ .mat-form-field-hint-wrapper {
257
+ margin: 0 0 -24px 0;
258
+ padding-bottom: 16px;
259
+ }
260
+ }
261
+
262
+ //Expansion Panel
263
+ .mat-expansion-panel.mat-expansion-panel-folder-navigation {
264
+ .mat-expansion-panel-header {
265
+ }
266
+
267
+ .mat-expansion-panel-content {
268
+ .mat-expansion-panel-body {
269
+ max-height: 256px;
270
+ overflow-y: auto;
271
+ padding: 0;
272
+ }
273
+ }
274
+ }
275
+ }
276
+
241
277
  @media screen and (min-width: 600px) {
242
278
  .mat-stepper-horizontal {
243
279
  &.bullet-stepper-header-labeled {