@ecl/button 5.0.0-alpha.21 → 5.0.0-alpha.22

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 (3) hide show
  1. package/button-print.scss +25 -14
  2. package/button.scss +26 -15
  3. package/package.json +7 -7
package/button-print.scss CHANGED
@@ -20,12 +20,6 @@ $button: null !default;
20
20
  display: inline-block;
21
21
  margin: 0;
22
22
  text-decoration: none;
23
-
24
- &[disabled] {
25
- cursor: not-allowed;
26
- opacity: 0.5;
27
- text-decoration: none;
28
- }
29
23
  }
30
24
 
31
25
  .ecl-button__container {
@@ -85,20 +79,24 @@ $button: null !default;
85
79
  }
86
80
  }
87
81
 
88
- .ecl-button:not(.ecl-button--icon-only) {
82
+ @mixin icon-spacing($size) {
89
83
  .ecl-button__icon ~ .ecl-button__label,
90
84
  .ecl-button__icon-container ~ .ecl-button__label,
91
85
  .ecl-button__label ~ .ecl-button__icon,
92
86
  .ecl-button__label ~ .ecl-button__icon-container {
93
- margin-inline-start: map.get($button, 'large', 'icon-spacing');
87
+ margin-inline-start: map.get($button, $size, 'icon-spacing');
88
+ }
89
+ }
94
90
 
95
- .ecl-button--s & {
96
- margin-inline-start: map.get($button, 'small', 'icon-spacing');
97
- }
91
+ .ecl-button:not(.ecl-button--icon-only) {
92
+ @include icon-spacing('large');
98
93
 
99
- .ecl-button--m & {
100
- margin-inline-start: map.get($button, 'medium', 'icon-spacing');
101
- }
94
+ &.ecl-button--s {
95
+ @include icon-spacing('small');
96
+ }
97
+
98
+ &.ecl-button--m {
99
+ @include icon-spacing('medium');
102
100
  }
103
101
  }
104
102
 
@@ -151,6 +149,15 @@ $button: null !default;
151
149
 
152
150
  @include mixins.responsive-font(map.get($button, 'medium', 'font'));
153
151
  }
152
+
153
+ &[disabled] {
154
+ background-color: map.get($button, #{$variant}, 'background-disabled');
155
+ border-color: map.get($button, #{$variant}, 'border-color-disabled');
156
+ color: map.get($button, #{$variant}, 'color-disabled');
157
+ cursor: not-allowed;
158
+ opacity: map.get($button, #{$variant}, 'opacity-disabled');
159
+ text-decoration: none;
160
+ }
154
161
  }
155
162
  // stylelint-enable nesting-selector-no-missing-scoping-root
156
163
 
@@ -162,6 +169,10 @@ $button: null !default;
162
169
  @include button(primary-highlight);
163
170
  }
164
171
 
172
+ &.ecl-button--neutral {
173
+ @include button(primary-neutral);
174
+ }
175
+
165
176
  &.ecl-button--inverted {
166
177
  @include button(primary-inverted);
167
178
  }
package/button.scss CHANGED
@@ -35,13 +35,6 @@ $button: null !default;
35
35
  &:active {
36
36
  outline-width: 0;
37
37
  }
38
-
39
- &[disabled],
40
- &[disabled]:hover {
41
- cursor: not-allowed;
42
- opacity: 0.5;
43
- text-decoration: none;
44
- }
45
38
  }
46
39
 
47
40
  .ecl-button__container {
@@ -101,20 +94,24 @@ $button: null !default;
101
94
  }
102
95
  }
103
96
 
104
- .ecl-button:not(.ecl-button--icon-only) {
97
+ @mixin icon-spacing($size) {
105
98
  .ecl-button__icon ~ .ecl-button__label,
106
99
  .ecl-button__icon-container ~ .ecl-button__label,
107
100
  .ecl-button__label ~ .ecl-button__icon,
108
101
  .ecl-button__label ~ .ecl-button__icon-container {
109
- margin-inline-start: map.get($button, 'large', 'icon-spacing');
102
+ margin-inline-start: map.get($button, $size, 'icon-spacing');
103
+ }
104
+ }
110
105
 
111
- .ecl-button--s & {
112
- margin-inline-start: map.get($button, 'small', 'icon-spacing');
113
- }
106
+ .ecl-button:not(.ecl-button--icon-only) {
107
+ @include icon-spacing('large');
114
108
 
115
- .ecl-button--m & {
116
- margin-inline-start: map.get($button, 'medium', 'icon-spacing');
117
- }
109
+ &.ecl-button--s {
110
+ @include icon-spacing('small');
111
+ }
112
+
113
+ &.ecl-button--m {
114
+ @include icon-spacing('medium');
118
115
  }
119
116
  }
120
117
 
@@ -228,6 +225,16 @@ $button: null !default;
228
225
  border-color: map.get($button, #{$variant}, 'border-color-active');
229
226
  color: map.get($button, #{$variant}, 'color-active');
230
227
  }
228
+
229
+ &[disabled],
230
+ &[disabled]:hover {
231
+ background-color: map.get($button, #{$variant}, 'background-disabled');
232
+ border-color: map.get($button, #{$variant}, 'border-color-disabled');
233
+ color: map.get($button, #{$variant}, 'color-disabled');
234
+ cursor: not-allowed;
235
+ opacity: map.get($button, #{$variant}, 'opacity-disabled');
236
+ text-decoration: none;
237
+ }
231
238
  }
232
239
  // stylelint-enable nesting-selector-no-missing-scoping-root
233
240
 
@@ -239,6 +246,10 @@ $button: null !default;
239
246
  @include button(primary-highlight);
240
247
  }
241
248
 
249
+ &.ecl-button--neutral {
250
+ @include button(primary-neutral);
251
+ }
252
+
242
253
  &.ecl-button--inverted {
243
254
  @include button(primary-inverted);
244
255
  }
package/package.json CHANGED
@@ -2,20 +2,20 @@
2
2
  "name": "@ecl/button",
3
3
  "author": "European Commission",
4
4
  "license": "EUPL-1.2",
5
- "version": "5.0.0-alpha.21",
5
+ "version": "5.0.0-alpha.22",
6
6
  "description": "ECL Button",
7
7
  "publishConfig": {
8
8
  "access": "public"
9
9
  },
10
10
  "style": "button.scss",
11
11
  "dependencies": {
12
- "@ecl/icon": "5.0.0-alpha.21",
13
- "@ecl/indicator": "5.0.0-alpha.21"
12
+ "@ecl/icon": "5.0.0-alpha.22",
13
+ "@ecl/indicator": "5.0.0-alpha.22"
14
14
  },
15
15
  "devDependencies": {
16
- "@ecl/mixins-typography": "5.0.0-alpha.21",
17
- "@ecl/resources-icons": "5.0.0-alpha.21",
18
- "@ecl/utility-screen-reader": "5.0.0-alpha.21"
16
+ "@ecl/mixins-typography": "5.0.0-alpha.22",
17
+ "@ecl/resources-icons": "5.0.0-alpha.22",
18
+ "@ecl/utility-screen-reader": "5.0.0-alpha.22"
19
19
  },
20
20
  "repository": {
21
21
  "type": "git",
@@ -31,5 +31,5 @@
31
31
  "design-system",
32
32
  "twig"
33
33
  ],
34
- "gitHead": "e3828f07421db8fa2a610b445bc178ff26903c95"
34
+ "gitHead": "61e1409a0388aa095e08280e768633e41cf57d01"
35
35
  }