@itwin/itwinui-css 0.47.0 → 0.48.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 (12) hide show
  1. package/css/all.css +309 -299
  2. package/css/color-picker.css +20 -16
  3. package/css/inputs.css +287 -282
  4. package/css/tree.css +2 -1
  5. package/package.json +1 -1
  6. package/scss/color-picker/color-picker.scss +49 -49
  7. package/scss/inputs/checkbox-radio.scss +17 -136
  8. package/scss/inputs/checkbox.scss +77 -43
  9. package/scss/inputs/labeled-inputs.scss +2 -2
  10. package/scss/inputs/radio.scss +14 -3
  11. package/scss/skip-to-content/skip-to-content.scss +2 -1
  12. package/scss/tree/tree.scss +1 -0
package/css/color-picker.css CHANGED
@@ -89,30 +89,40 @@
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
- box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
96
- box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
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
+ left:0;
108
+ top:0;
109
+ width:inherit;
110
+ height:inherit;
111
+ border-radius:inherit;
112
+ background-color:inherit;
113
+ box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
101
114
  .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
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)); }
104
116
  .iui-color-swatch:focus-visible{
105
117
  outline:2px solid var(--iui-color-foreground-primary);
106
- outline-offset:0; }
118
+ outline-offset:1px; }
107
119
  @supports not selector(*:focus-visible){
108
120
  .iui-color-swatch:focus{
109
121
  outline:2px solid var(--iui-color-foreground-primary);
110
- outline-offset:0; } }
122
+ outline-offset:1px; } }
111
123
  .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
124
  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
125
  .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
126
  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
127
 
118
128
  .iui-color-picker-section-label{
@@ -133,7 +143,6 @@
133
143
  cursor:crosshair;
134
144
  width:100%;
135
145
  height:209px;
136
- background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--iui-color-field-hue));
137
146
  background-image:linear-gradient(0deg, black, transparent), linear-gradient(90deg, white, var(--iui-color-field-hue)); }
138
147
  .iui-color-field:not(:last-child){
139
148
  margin-bottom:6px; }
@@ -148,12 +157,10 @@
148
157
 
149
158
  .iui-opacity-slider .iui-slider-rail{
150
159
  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
160
  background-position:0 0, 4px 4px;
153
161
  background-size:8px 8px;
154
- 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));
155
- background-position:0 0, 4px 4px;
156
- background-size:8px 8px; }
162
+ 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);
163
+ 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
164
  .iui-opacity-slider .iui-slider-rail::before{
158
165
  display:block;
159
166
  content:'';
@@ -173,12 +180,9 @@
173
180
  border-radius:50%;
174
181
  transform:translate(-8px, -8px);
175
182
  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
183
  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
184
  background-color:var(--iui-color-picker-selected-color); }
180
185
  .iui-color-dot:hover{
181
- box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5));
182
186
  box-shadow:0 0 1px 3px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-5)); }
183
187
  .iui-color-dot:focus-visible{
184
188
  outline:2px solid var(--iui-color-foreground-primary);