@itwin/itwinui-css 0.47.0 → 0.48.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/all.css +305 -299
- package/css/color-picker.css +18 -16
- package/css/inputs.css +285 -282
- package/css/tree.css +2 -1
- package/package.json +1 -1
- package/scss/color-picker/color-picker.scss +47 -49
- package/scss/inputs/checkbox-radio.scss +17 -136
- package/scss/inputs/checkbox.scss +77 -43
- package/scss/inputs/labeled-inputs.scss +2 -2
- package/scss/inputs/radio.scss +9 -3
- package/scss/skip-to-content/skip-to-content.scss +2 -1
- package/scss/tree/tree.scss +1 -0
package/css/color-picker.css
CHANGED
|
@@ -89,30 +89,38 @@
|
|
|
89
89
|
width:24px;
|
|
90
90
|
cursor:pointer;
|
|
91
91
|
border-radius:5px;
|
|
92
|
-
background-color:var(--iui-color-swatch-background);
|
|
93
92
|
margin-bottom:4px;
|
|
94
93
|
margin-right:4px;
|
|
95
|
-
|
|
96
|
-
|
|
94
|
+
position:relative;
|
|
95
|
+
background-color:var(--iui-color-swatch-background);
|
|
96
|
+
background-position:0 0, 8px 8px;
|
|
97
|
+
background-size:16px 16px;
|
|
98
|
+
background-image:repeating-linear-gradient(45deg, #EEF0F3 25%, transparent 25%, transparent 75%, #EEF0F3 75%, #EEF0F3), repeating-linear-gradient(45deg, #EEF0F3 25%, #C7CCD1 25%, #C7CCD1 75%, #EEF0F3 75%, #EEF0F3);
|
|
99
|
+
background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)); }
|
|
97
100
|
@supports (gap: 8px){
|
|
98
101
|
.iui-color-swatch{
|
|
99
102
|
margin-bottom:0;
|
|
100
103
|
margin-right:0; } }
|
|
104
|
+
.iui-color-swatch::after{
|
|
105
|
+
content:'';
|
|
106
|
+
position:absolute;
|
|
107
|
+
width:inherit;
|
|
108
|
+
height:inherit;
|
|
109
|
+
border-radius:inherit;
|
|
110
|
+
background-color:inherit;
|
|
111
|
+
box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
|
|
101
112
|
.iui-color-swatch:hover{
|
|
102
|
-
box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
|
|
103
113
|
box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
|
|
104
114
|
.iui-color-swatch:focus-visible{
|
|
105
115
|
outline:2px solid var(--iui-color-foreground-primary);
|
|
106
|
-
outline-offset:
|
|
116
|
+
outline-offset:1px; }
|
|
107
117
|
@supports not selector(*:focus-visible){
|
|
108
118
|
.iui-color-swatch:focus{
|
|
109
119
|
outline:2px solid var(--iui-color-foreground-primary);
|
|
110
|
-
outline-offset:
|
|
120
|
+
outline-offset:1px; } }
|
|
111
121
|
.iui-color-swatch.iui-active{
|
|
112
|
-
box-shadow:0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
|
|
113
122
|
box-shadow:0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
|
|
114
123
|
.iui-color-swatch.iui-active:hover{
|
|
115
|
-
box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3));
|
|
116
124
|
box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)), 0 0 0 2px rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-3)); }
|
|
117
125
|
|
|
118
126
|
.iui-color-picker-section-label{
|
|
@@ -133,7 +141,6 @@
|
|
|
133
141
|
cursor:crosshair;
|
|
134
142
|
width:100%;
|
|
135
143
|
height:209px;
|
|
136
|
-
background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--iui-color-field-hue));
|
|
137
144
|
background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--iui-color-field-hue)); }
|
|
138
145
|
.iui-color-field:not(:last-child){
|
|
139
146
|
margin-bottom:6px; }
|
|
@@ -148,12 +155,10 @@
|
|
|
148
155
|
|
|
149
156
|
.iui-opacity-slider .iui-slider-rail{
|
|
150
157
|
height:8px;
|
|
151
|
-
background-image:repeating-linear-gradient(45deg, #EEF0F3 25%, transparent 25%, transparent 75%, #EEF0F3 75%, #EEF0F3), repeating-linear-gradient(45deg, #EEF0F3 25%, #C7CCD1 25%, #C7CCD1 75%, #EEF0F3 75%, #EEF0F3);
|
|
152
158
|
background-position:0 0, 4px 4px;
|
|
153
159
|
background-size:8px 8px;
|
|
154
|
-
background-image:repeating-linear-gradient(45deg,
|
|
155
|
-
background-
|
|
156
|
-
background-size:8px 8px; }
|
|
160
|
+
background-image:repeating-linear-gradient(45deg, #EEF0F3 25%, transparent 25%, transparent 75%, #EEF0F3 75%, #EEF0F3), repeating-linear-gradient(45deg, #EEF0F3 25%, #C7CCD1 25%, #C7CCD1 75%, #EEF0F3 75%, #EEF0F3);
|
|
161
|
+
background-image:repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, transparent 25%, transparent 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)), repeating-linear-gradient(45deg, var(--iui-color-background-3) 25%, var(--iui-color-background-5) 25%, var(--iui-color-background-5) 75%, var(--iui-color-background-3) 75%, var(--iui-color-background-3)); }
|
|
157
162
|
.iui-opacity-slider .iui-slider-rail::before{
|
|
158
163
|
display:block;
|
|
159
164
|
content:'';
|
|
@@ -173,12 +178,9 @@
|
|
|
173
178
|
border-radius:50%;
|
|
174
179
|
transform:translate(-8px, -8px);
|
|
175
180
|
cursor:crosshair;
|
|
176
|
-
box-shadow:white 0 0 0 1px, inset 0 0 0 1px rgba(255, 255, 255, 0.1);
|
|
177
|
-
background-color:var(--iui-color-picker-selected-color);
|
|
178
181
|
box-shadow:rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-1)) 0 0 0 1px, inset 0 0 0 1px rgba(var(--iui-color-foreground-accessory-rgb), var(--iui-opacity-6));
|
|
179
182
|
background-color:var(--iui-color-picker-selected-color); }
|
|
180
183
|
.iui-color-dot:hover{
|
|
181
|
-
box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
|
|
182
184
|
box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
|
|
183
185
|
.iui-color-dot:focus-visible{
|
|
184
186
|
outline:2px solid var(--iui-color-foreground-primary);
|