@ng-matero/extensions 16.3.0 → 16.3.2

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.
Files changed (25) hide show
  1. package/core/density/_all-density.scss +22 -0
  2. package/core/density/_compatibility.scss +74 -0
  3. package/core/theming/_theming.scss +55 -21
  4. package/core/tokens/m2/mtx/_grid.scss +12 -1
  5. package/core/tokens/m2/mtx/_split.scss +1 -1
  6. package/esm2022/grid/column-menu.mjs +2 -2
  7. package/esm2022/grid/grid.mjs +3 -3
  8. package/esm2022/popover/popover.mjs +3 -3
  9. package/esm2022/select/select.mjs +3 -3
  10. package/fesm2022/mtxGrid.mjs +4 -4
  11. package/fesm2022/mtxGrid.mjs.map +1 -1
  12. package/fesm2022/mtxPopover.mjs +2 -2
  13. package/fesm2022/mtxPopover.mjs.map +1 -1
  14. package/fesm2022/mtxSelect.mjs +2 -2
  15. package/fesm2022/mtxSelect.mjs.map +1 -1
  16. package/grid/_grid-theme.scss +8 -1
  17. package/grid/column-menu.scss +32 -3
  18. package/grid/grid.scss +28 -107
  19. package/package.json +24 -24
  20. package/popover/popover.scss +1 -1
  21. package/prebuilt-themes/deeppurple-amber.css +1 -1
  22. package/prebuilt-themes/indigo-pink.css +1 -1
  23. package/prebuilt-themes/pink-bluegrey.css +1 -1
  24. package/prebuilt-themes/purple-green.css +1 -1
  25. package/select/select.scss +55 -79
package/select/select.scss CHANGED
@@ -26,12 +26,10 @@ $_tokens: tokens-mtx-select.$prefix, tokens-mtx-select.get-token-slots();
26
26
  .ng-value-container {
27
27
  align-items: center;
28
28
 
29
- .ng-input {
30
- >input {
31
- padding: 0;
32
- color: inherit;
33
- font: inherit;
34
- }
29
+ .ng-input>input {
30
+ padding: 0;
31
+ color: inherit;
32
+ font: inherit;
35
33
  }
36
34
  }
37
35
 
@@ -77,98 +75,76 @@ $_tokens: tokens-mtx-select.$prefix, tokens-mtx-select.get-token-slots();
77
75
  }
78
76
 
79
77
  &.ng-select-opened {
80
- .ng-arrow-wrapper {
81
- .ng-arrow {
82
- top: -2px;
83
- border-width: 0 5px 5px;
84
- }
78
+ .ng-arrow-wrapper .ng-arrow {
79
+ top: -2px;
80
+ border-width: 0 5px 5px;
85
81
  }
86
82
  }
87
83
 
88
84
  &.ng-select-single {
89
- // vertical align with material form field
90
- &.ng-select-filtered {
91
- .ng-placeholder {
92
- display: initial;
93
- visibility: hidden;
94
- }
95
- }
96
-
97
- .ng-select-container {
98
- .ng-value-container {
99
- // vertical align with material form field
100
- .ng-placeholder,
101
- .ng-value {
102
- &::after {
103
- display: inline-block;
104
- content: '';
105
- }
106
- }
107
- }
85
+ &.ng-select-filtered .ng-placeholder {
86
+ display: initial;
87
+ visibility: hidden;
108
88
  }
109
89
  }
110
90
 
111
91
  &.ng-select-multiple {
112
- .ng-select-container {
113
- .ng-value-container {
114
- .ng-value {
115
- margin: 2px 4px 2px 0;
116
- border-radius: 16px;
117
- font-size: .875em;
118
- line-height: 18px;
92
+ .ng-select-container .ng-value-container .ng-value {
93
+ margin: 2px 4px 2px 0;
94
+ border-radius: 16px;
95
+ font-size: .875em;
96
+ line-height: 18px;
119
97
 
120
- @include token-utils.use-tokens($_tokens...) {
121
- @include token-utils.create-token-slot(background-color, multiple-value-background-color);
98
+ @include token-utils.use-tokens($_tokens...) {
99
+ @include token-utils.create-token-slot(background-color, multiple-value-background-color);
122
100
 
123
- $border-color: token-utils.get-token-variable(multiple-value-border-color);
101
+ $border-color: token-utils.get-token-variable(multiple-value-border-color);
124
102
 
125
- border: 1px solid var($border-color);
126
- }
103
+ border: 1px solid var($border-color);
104
+ }
105
+
106
+ @include rtl {
107
+ margin-right: auto;
108
+ margin-left: 4px;
109
+ }
110
+
111
+ &.ng-value-disabled {
112
+ opacity: .4;
113
+ }
114
+
115
+ .ng-value-label {
116
+ display: inline-block;
117
+ margin: 0 8px;
118
+ }
119
+
120
+ .ng-value-icon {
121
+ display: inline-block;
122
+ width: 18px;
123
+ height: 18px;
124
+ border-radius: 100%;
125
+ text-align: center;
126
+
127
+ &.left {
128
+ margin-right: -4px;
127
129
 
128
130
  @include rtl {
131
+ margin-left: -4px;
129
132
  margin-right: auto;
130
- margin-left: 4px;
131
133
  }
134
+ }
132
135
 
133
- &.ng-value-disabled {
134
- opacity: .4;
135
- }
136
+ &.right {
137
+ margin-left: -4px;
136
138
 
137
- .ng-value-label {
138
- display: inline-block;
139
- margin: 0 8px;
139
+ @include rtl {
140
+ margin-right: -4px;
141
+ margin-left: auto;
140
142
  }
143
+ }
141
144
 
142
- .ng-value-icon {
143
- display: inline-block;
144
- width: 18px;
145
- height: 18px;
146
- border-radius: 100%;
147
- text-align: center;
148
-
149
- &.left {
150
- margin-right: -4px;
151
-
152
- @include rtl {
153
- margin-left: -4px;
154
- margin-right: auto;
155
- }
156
- }
157
-
158
- &.right {
159
- margin-left: -4px;
160
-
161
- @include rtl {
162
- margin-right: -4px;
163
- margin-left: auto;
164
- }
165
- }
166
-
167
- &:hover {
168
- @include token-utils.use-tokens($_tokens...) {
169
- @include token-utils.create-token-slot(background-color, multiple-value-icon-hover-background-color);
170
- }
171
- }
145
+ &:hover {
146
+ @include token-utils.use-tokens($_tokens...) {
147
+ @include token-utils.create-token-slot(background-color, multiple-value-icon-hover-background-color);
172
148
  }
173
149
  }
174
150
  }