@carbon/styles 1.13.0 → 1.14.0-rc.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/css/styles.css +190 -10
- package/css/styles.min.css +1 -1
- package/package.json +8 -8
- package/scss/components/_index.scss +1 -0
- package/scss/components/accordion/_accordion.scss +21 -0
- package/scss/components/file-uploader/_file-uploader.scss +0 -1
- package/scss/components/fluid-text-area/_fluid-text-area.scss +167 -0
- package/scss/components/fluid-text-area/_index.scss +11 -0
- package/scss/components/fluid-text-input/_fluid-text-input.scss +19 -0
- package/scss/components/notification/_actionable-notification.scss +3 -1
- package/scss/components/notification/_inline-notification.scss +3 -2
- package/scss/components/notification/_toast-notification.scss +2 -2
- package/scss/components/progress-indicator/_progress-indicator.scss +4 -0
- package/scss/components/radio-button/_radio-button.scss +3 -1
- package/scss/components/text-area/_text-area.scss +1 -0
- package/scss/components/text-input/_text-input.scss +6 -2
- package/scss/components/ui-shell/side-nav/_side-nav.scss +0 -1
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/styles",
|
|
3
3
|
"description": "Styles for the Carbon Design System",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.14.0-rc.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -32,13 +32,13 @@
|
|
|
32
32
|
"sass": "^1.33.0"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@carbon/colors": "^11.
|
|
35
|
+
"@carbon/colors": "^11.6.0-rc.0",
|
|
36
36
|
"@carbon/feature-flags": "^0.9.0",
|
|
37
|
-
"@carbon/grid": "^11.
|
|
38
|
-
"@carbon/layout": "^11.
|
|
39
|
-
"@carbon/motion": "^11.
|
|
40
|
-
"@carbon/themes": "^11.
|
|
41
|
-
"@carbon/type": "^11.
|
|
37
|
+
"@carbon/grid": "^11.7.0-rc.0",
|
|
38
|
+
"@carbon/layout": "^11.7.0-rc.0",
|
|
39
|
+
"@carbon/motion": "^11.5.0-rc.0",
|
|
40
|
+
"@carbon/themes": "^11.10.0-rc.0",
|
|
41
|
+
"@carbon/type": "^11.10.0-rc.0",
|
|
42
42
|
"@ibm/plex": "6.0.0-next.6"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"scss/**/*.css",
|
|
60
60
|
"css/**/*.css"
|
|
61
61
|
],
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "06ebb59650784ee0bdb602a521e82383472f0487"
|
|
63
63
|
}
|
|
@@ -309,3 +309,24 @@ $content-padding: 0 0 0 $spacing-05 !default;
|
|
|
309
309
|
opacity: 0;
|
|
310
310
|
visibility: hidden;
|
|
311
311
|
}
|
|
312
|
+
|
|
313
|
+
// flush
|
|
314
|
+
.#{$prefix}--accordion--flush .#{$prefix}--accordion__title {
|
|
315
|
+
margin-left: 0;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.#{$prefix}--accordion--flush .#{$prefix}--accordion__arrow {
|
|
319
|
+
margin-right: 0;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.#{$prefix}--accordion--flush .#{$prefix}--accordion__content {
|
|
323
|
+
padding-left: 0;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.#{$prefix}--accordion--flush:not(.#{$prefix}--skeleton)
|
|
327
|
+
.#{$prefix}--accordion__heading:hover::before,
|
|
328
|
+
.#{$prefix}--accordion--flush:not(.#{$prefix}--skeleton)
|
|
329
|
+
.#{$prefix}--accordion__heading:focus::before {
|
|
330
|
+
left: -1rem;
|
|
331
|
+
width: calc(100% + 32px);
|
|
332
|
+
}
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright IBM Corp. 2018, 2018
|
|
3
|
+
//
|
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
|
6
|
+
//
|
|
7
|
+
|
|
8
|
+
//-----------------------------
|
|
9
|
+
// Fluid Text Area
|
|
10
|
+
//-----------------------------
|
|
11
|
+
@use '../../config' as *;
|
|
12
|
+
@use '../../spacing' as *;
|
|
13
|
+
@use '../../theme' as *;
|
|
14
|
+
@use '../../utilities/convert' as *;
|
|
15
|
+
@use '../../utilities/focus-outline' as *;
|
|
16
|
+
|
|
17
|
+
@mixin fluid-text-area {
|
|
18
|
+
.#{$prefix}--text-area--fluid .#{$prefix}--text-area__wrapper {
|
|
19
|
+
position: relative;
|
|
20
|
+
height: 100%;
|
|
21
|
+
flex-direction: column;
|
|
22
|
+
background: $field;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.#{$prefix}--modal
|
|
26
|
+
.#{$prefix}--text-area--fluid
|
|
27
|
+
.#{$prefix}--text-area__wrapper {
|
|
28
|
+
background: $field-02;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.#{$prefix}--text-area--fluid .#{$prefix}--text-area__label-wrapper {
|
|
32
|
+
position: relative;
|
|
33
|
+
height: 100%;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.#{$prefix}--text-area--fluid .#{$prefix}--label {
|
|
37
|
+
position: absolute;
|
|
38
|
+
z-index: 1;
|
|
39
|
+
top: rem(13px);
|
|
40
|
+
left: $spacing-05;
|
|
41
|
+
display: flex;
|
|
42
|
+
height: rem(16px);
|
|
43
|
+
align-items: center;
|
|
44
|
+
margin: 0;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
//counter
|
|
48
|
+
.#{$prefix}--text-area--fluid div.#{$prefix}--label {
|
|
49
|
+
right: 1rem;
|
|
50
|
+
left: initial;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.#{$prefix}--text-area--fluid .#{$prefix}--text-area {
|
|
54
|
+
min-height: rem(64px);
|
|
55
|
+
padding: 0 $spacing-05 rem(13px);
|
|
56
|
+
margin-top: 2rem;
|
|
57
|
+
outline: none;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.#{$prefix}--text-area--fluid .#{$prefix}--form__helper-text {
|
|
61
|
+
display: none;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
// invalid
|
|
65
|
+
.#{$prefix}--text-area--fluid .#{$prefix}--text-area--invalid,
|
|
66
|
+
.#{$prefix}--text-area--fluid .#{$prefix}--text-area:focus {
|
|
67
|
+
border-bottom: none;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.#{$prefix}--text-area__divider,
|
|
71
|
+
.#{$prefix}--text-area--fluid .#{$prefix}--text-area__divider {
|
|
72
|
+
display: none;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.#{$prefix}--text-area--fluid
|
|
76
|
+
.#{$prefix}--text-area--invalid
|
|
77
|
+
+ .#{$prefix}--text-area__divider {
|
|
78
|
+
display: block;
|
|
79
|
+
border-style: solid;
|
|
80
|
+
border-color: $border-subtle;
|
|
81
|
+
border-bottom: none;
|
|
82
|
+
margin: 0 1rem;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
// invalid error message container
|
|
86
|
+
.#{$prefix}--text-area--fluid
|
|
87
|
+
.#{$prefix}--text-area--invalid
|
|
88
|
+
+ .#{$prefix}--text-area__divider
|
|
89
|
+
+ .#{$prefix}--form-requirement {
|
|
90
|
+
position: relative;
|
|
91
|
+
display: block;
|
|
92
|
+
overflow: visible;
|
|
93
|
+
max-height: 12.5rem;
|
|
94
|
+
padding: 0.5rem 2.5rem 0.5rem 1rem;
|
|
95
|
+
margin: 0;
|
|
96
|
+
background: $field;
|
|
97
|
+
color: $text-error;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.#{$prefix}--modal
|
|
101
|
+
.#{$prefix}--text-area--fluid
|
|
102
|
+
.#{$prefix}--text-area--invalid
|
|
103
|
+
+ .#{$prefix}--text-area__divider
|
|
104
|
+
+ .#{$prefix}--form-requirement {
|
|
105
|
+
background: $field-02;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.#{$prefix}--text-area--fluid .#{$prefix}--text-area__invalid-icon {
|
|
109
|
+
top: 0.5rem;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
//invalid outline
|
|
113
|
+
.#{$prefix}--text-area--fluid
|
|
114
|
+
.#{$prefix}--text-area__wrapper[data-invalid]:not(:focus) {
|
|
115
|
+
@include focus-outline('invalid');
|
|
116
|
+
|
|
117
|
+
outline-offset: 0;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
// focus
|
|
121
|
+
.#{$prefix}--text-area--fluid
|
|
122
|
+
.#{$prefix}--text-area__wrapper[data-invalid]:focus-within,
|
|
123
|
+
.#{$prefix}--text-area--fluid .#{$prefix}--text-area__wrapper:focus-within {
|
|
124
|
+
@include focus-outline('outline');
|
|
125
|
+
|
|
126
|
+
outline-offset: 0;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.#{$prefix}--text-area--fluid
|
|
130
|
+
.#{$prefix}--text-area__wrapper[data-invalid]
|
|
131
|
+
> .#{$prefix}--text-area--invalid:focus,
|
|
132
|
+
.#{$prefix}--text-area--fluid
|
|
133
|
+
.#{$prefix}--text-area__wrapper
|
|
134
|
+
> .#{$prefix}--text-area:focus,
|
|
135
|
+
.#{$prefix}--text-area--fluid
|
|
136
|
+
.#{$prefix}--text-area__wrapper
|
|
137
|
+
> .#{$prefix}--text-area:active,
|
|
138
|
+
.#{$prefix}--text-area--fluid
|
|
139
|
+
.#{$prefix}--text-area__wrapper[data-invalid]
|
|
140
|
+
> .#{$prefix}--text-area--invalid {
|
|
141
|
+
outline: none;
|
|
142
|
+
transition: none;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
// Skeleton
|
|
146
|
+
.#{$prefix}--text-area--fluid__skeleton {
|
|
147
|
+
padding: $spacing-05;
|
|
148
|
+
border-bottom: 1px solid $skeleton-element;
|
|
149
|
+
background: $skeleton-background;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.#{$prefix}--text-area--fluid__skeleton .#{$prefix}--skeleton,
|
|
153
|
+
.#{$prefix}--text-area--fluid__skeleton
|
|
154
|
+
.#{$prefix}--text-area.#{$prefix}--skeleton::before {
|
|
155
|
+
height: 0.5rem;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.#{$prefix}--text-area--fluid__skeleton .#{$prefix}--label {
|
|
159
|
+
margin-bottom: $spacing-04;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.#{$prefix}--text-area--fluid__skeleton
|
|
163
|
+
.#{$prefix}--text-area.#{$prefix}--skeleton {
|
|
164
|
+
width: 80%;
|
|
165
|
+
height: 4rem;
|
|
166
|
+
}
|
|
167
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright IBM Corp. 2018, 2018
|
|
3
|
+
//
|
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
|
6
|
+
//
|
|
7
|
+
|
|
8
|
+
@forward 'fluid-text-area';
|
|
9
|
+
@use 'fluid-text-area';
|
|
10
|
+
|
|
11
|
+
@include fluid-text-area.fluid-text-area;
|
|
@@ -122,4 +122,23 @@
|
|
|
122
122
|
> .#{$prefix}--text-input--warning:focus {
|
|
123
123
|
outline: none;
|
|
124
124
|
}
|
|
125
|
+
|
|
126
|
+
// Password Input
|
|
127
|
+
.#{$prefix}--text-input--fluid
|
|
128
|
+
.#{$prefix}--text-input.#{$prefix}--password-input {
|
|
129
|
+
padding-right: $spacing-08;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.#{$prefix}--text-input--fluid.#{$prefix}--password-input-wrapper
|
|
133
|
+
.#{$prefix}--text-input__invalid-icon {
|
|
134
|
+
right: $spacing-05;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.#{$prefix}--text-input--fluid
|
|
138
|
+
.#{$prefix}--btn.#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger {
|
|
139
|
+
top: rem(26px);
|
|
140
|
+
right: $spacing-03;
|
|
141
|
+
width: rem(32px);
|
|
142
|
+
height: rem(32px);
|
|
143
|
+
}
|
|
125
144
|
}
|
|
@@ -444,7 +444,9 @@
|
|
|
444
444
|
}
|
|
445
445
|
|
|
446
446
|
.#{$prefix}--actionable-notification .#{$prefix}--inline-notification__icon,
|
|
447
|
-
.#{$prefix}--actionable-notification .#{$prefix}--toast-notification__icon
|
|
447
|
+
.#{$prefix}--actionable-notification .#{$prefix}--toast-notification__icon,
|
|
448
|
+
.#{$prefix}--actionable-notification
|
|
449
|
+
.#{$prefix}--actionable-notification__close-icon {
|
|
448
450
|
@include high-contrast-mode('icon-fill');
|
|
449
451
|
}
|
|
450
452
|
/* stylelint-enable */
|
|
@@ -309,10 +309,11 @@
|
|
|
309
309
|
@include high-contrast-mode('focus');
|
|
310
310
|
}
|
|
311
311
|
|
|
312
|
-
.#{$prefix}--inline-notification__icon {
|
|
312
|
+
.#{$prefix}--inline-notification .#{$prefix}--inline-notification__icon {
|
|
313
313
|
@include high-contrast-mode('icon-fill');
|
|
314
314
|
}
|
|
315
|
-
.#{$prefix}--inline-
|
|
315
|
+
.#{$prefix}--inline-notification
|
|
316
|
+
.#{$prefix}--inline-notification__close-icon {
|
|
316
317
|
@include high-contrast-mode('icon-fill');
|
|
317
318
|
}
|
|
318
319
|
/* stylelint-enable */
|
|
@@ -226,10 +226,10 @@
|
|
|
226
226
|
.#{$prefix}--toast-notification__close-button:focus {
|
|
227
227
|
@include high-contrast-mode('focus');
|
|
228
228
|
}
|
|
229
|
-
.#{$prefix}--toast-notification__close-icon {
|
|
229
|
+
.#{$prefix}--toast-notification .#{$prefix}--toast-notification__close-icon {
|
|
230
230
|
@include high-contrast-mode('icon-fill');
|
|
231
231
|
}
|
|
232
|
-
.#{$prefix}--toast-notification__icon {
|
|
232
|
+
.#{$prefix}--toast-notification .#{$prefix}--toast-notification__icon {
|
|
233
233
|
@include high-contrast-mode('icon-fill');
|
|
234
234
|
}
|
|
235
235
|
/* stylelint-enable */
|
|
@@ -77,6 +77,10 @@ $progress-indicator-bar-width: 1px inset transparent !default;
|
|
|
77
77
|
fill: $interactive;
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
+
.#{$prefix}--progress--space-equal .#{$prefix}--progress-text {
|
|
81
|
+
overflow: hidden;
|
|
82
|
+
}
|
|
83
|
+
|
|
80
84
|
.#{$prefix}--progress-label {
|
|
81
85
|
@include type-style('body-compact-01');
|
|
82
86
|
|
|
@@ -110,7 +110,9 @@ $radio-border-width: 1px !default;
|
|
|
110
110
|
transform: scale(0.5);
|
|
111
111
|
|
|
112
112
|
// Allow the selected button to be seen in Windows HCM for IE/Edge
|
|
113
|
-
@include high-contrast-mode('icon-fill')
|
|
113
|
+
@include high-contrast-mode('icon-fill') {
|
|
114
|
+
background-color: ButtonText;
|
|
115
|
+
}
|
|
114
116
|
}
|
|
115
117
|
}
|
|
116
118
|
|
|
@@ -194,9 +194,13 @@
|
|
|
194
194
|
}
|
|
195
195
|
|
|
196
196
|
.#{$prefix}--text-input:disabled
|
|
197
|
-
|
|
198
|
-
svg {
|
|
197
|
+
~ .#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger {
|
|
199
198
|
cursor: not-allowed;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.#{$prefix}--text-input:disabled
|
|
202
|
+
~ .#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger
|
|
203
|
+
svg {
|
|
200
204
|
fill: $icon-disabled;
|
|
201
205
|
|
|
202
206
|
&:hover {
|