@itwin/itwinui-css 0.50.1 → 0.51.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/alert.css +232 -174
- package/css/all.css +7242 -5607
- package/css/badge.css +2 -1
- package/css/blockquote.css +10 -7
- package/css/breadcrumbs.css +110 -87
- package/css/button.css +441 -345
- package/css/carousel.css +119 -88
- package/css/code.css +69 -56
- package/css/color-picker.css +150 -103
- package/css/date-picker.css +73 -55
- package/css/expandable-block.css +212 -160
- package/css/fieldset.css +22 -18
- package/css/file-upload.css +93 -79
- package/css/footer.css +64 -53
- package/css/global.css +100 -78
- package/css/header.css +471 -364
- package/css/icon.css +108 -78
- package/css/information-panel.css +174 -137
- package/css/inputs.css +1134 -942
- package/css/keyboard.css +11 -7
- package/css/location-marker.css +68 -58
- package/css/menu.css +105 -80
- package/css/modal.css +54 -43
- package/css/non-ideal-state.css +47 -40
- package/css/notification-marker.css +275 -200
- package/css/popover.css +10 -8
- package/css/progress-indicator.css +315 -237
- package/css/reset-global-styles.css +10 -5
- package/css/side-navigation.css +189 -140
- package/css/skip-to-content.css +41 -27
- package/css/slider.css +112 -87
- package/css/table.css +563 -419
- package/css/tabs.css +324 -238
- package/css/tag.css +111 -84
- package/css/text.css +46 -27
- package/css/tile.css +387 -311
- package/css/time-picker.css +113 -86
- package/css/toast-notification.css +232 -173
- package/css/toggle-switch.css +176 -111
- package/css/tooltip.css +21 -16
- package/css/tree.css +123 -93
- package/css/user-icon.css +204 -162
- package/css/wizard.css +156 -131
- package/package.json +5 -6
- package/scss/alert/alert.scss +1 -5
- package/scss/carousel/carousel.scss +4 -1
- package/scss/code/codeblock.scss +1 -1
- package/scss/inputs/checkbox.scss +1 -0
- package/scss/inputs/labeled-inputs.scss +8 -8
- package/scss/inputs/radio.scss +0 -4
- package/scss/location-marker/data-rich.scss +1 -1
- package/scss/location-marker/me.scss +4 -4
- package/scss/popover/popover.scss +1 -2
- package/scss/progress-indicator/linear.scss +2 -10
- package/scss/style/global.scss +1 -5
- package/scss/style/mixins.scss +9 -0
- package/scss/table/table.scss +23 -14
- package/scss/toast-notification/categories.scss +1 -5
- package/scss/toggle-switch/classes.scss +4 -0
- package/scss/toggle-switch/toggle-switch.scss +141 -162
package/css/wizard.css
CHANGED
|
@@ -6,58 +6,65 @@
|
|
|
6
6
|
margin:0;
|
|
7
7
|
padding:0;
|
|
8
8
|
border:none;
|
|
9
|
-
vertical-align:baseline;
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
9
|
+
vertical-align:baseline;
|
|
10
|
+
}
|
|
11
|
+
.iui-wizard > ol{
|
|
12
|
+
margin:0;
|
|
13
|
+
padding:0;
|
|
14
|
+
border:none;
|
|
15
|
+
vertical-align:baseline;
|
|
16
|
+
display:flex;
|
|
17
|
+
justify-content:space-around;
|
|
18
|
+
align-items:flex-start;
|
|
19
|
+
width:100%;
|
|
20
|
+
margin-bottom:5.5px;
|
|
21
|
+
}
|
|
22
|
+
.iui-wizard.iui-long .iui-wizard-steps-label{
|
|
23
|
+
display:block;
|
|
24
|
+
font-size:18px;
|
|
25
|
+
text-align:center;
|
|
26
|
+
}
|
|
27
|
+
.iui-wizard.iui-long .iui-steps-count{
|
|
28
|
+
-webkit-user-select:none;
|
|
29
|
+
-moz-user-select:none;
|
|
30
|
+
-ms-user-select:none;
|
|
31
|
+
user-select:none;
|
|
32
|
+
margin-right:8px;
|
|
33
|
+
color:rgba(0, 0, 0, 0.4);
|
|
34
|
+
color:var(--iui-text-color-muted);
|
|
35
|
+
}
|
|
36
|
+
.iui-wizard.iui-workflow > ol{
|
|
37
|
+
align-items:center;
|
|
38
|
+
}
|
|
39
|
+
.iui-wizard.iui-workflow .iui-wizard-step .iui-wizard-circle{
|
|
40
|
+
padding-left:16px;
|
|
41
|
+
padding-right:16px;
|
|
42
|
+
height:100%;
|
|
43
|
+
width:auto;
|
|
44
|
+
border-radius:0;
|
|
45
|
+
font-weight:400;
|
|
46
|
+
text-align:center;
|
|
47
|
+
background-color:#53A21A;
|
|
48
|
+
border-color:#53A21A;
|
|
49
|
+
color:#FFF;
|
|
50
|
+
background-color:var(--iui-color-background-positive);
|
|
51
|
+
border-color:var(--iui-color-background-positive);
|
|
52
|
+
color:var(--iui-color-foreground-accessory);
|
|
53
|
+
}
|
|
54
|
+
.iui-wizard.iui-workflow .iui-wizard-step:first-of-type .iui-wizard-circle, .iui-wizard.iui-workflow .iui-wizard-step:last-of-type .iui-wizard-circle{
|
|
55
|
+
border-radius:12px;
|
|
56
|
+
background-color:#FFF;
|
|
57
|
+
border-color:#53A21A;
|
|
58
|
+
color:#53A21A;
|
|
59
|
+
background-color:var(--iui-color-background-1);
|
|
60
|
+
border-color:var(--iui-color-foreground-positive);
|
|
61
|
+
color:var(--iui-color-foreground-positive);
|
|
62
|
+
}
|
|
63
|
+
.iui-wizard.iui-workflow .iui-wizard-track-content::before,
|
|
64
|
+
.iui-wizard.iui-workflow .iui-wizard-track-content::after{
|
|
65
|
+
background-color:#53A21A;
|
|
66
|
+
background-color:var(--iui-color-foreground-positive);
|
|
67
|
+
}
|
|
61
68
|
|
|
62
69
|
.iui-wizard-step{
|
|
63
70
|
flex:1;
|
|
@@ -72,89 +79,106 @@
|
|
|
72
79
|
font-weight:400;
|
|
73
80
|
line-height:22px;
|
|
74
81
|
color:#53A21A;
|
|
75
|
-
color:var(--iui-color-background-positive);
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
82
|
+
color:var(--iui-color-background-positive);
|
|
83
|
+
}
|
|
84
|
+
.iui-wizard-step .iui-wizard-circle{
|
|
85
|
+
align-items:center;
|
|
86
|
+
border-radius:50%;
|
|
87
|
+
display:flex;
|
|
88
|
+
width:24px;
|
|
89
|
+
height:24px;
|
|
90
|
+
justify-content:center;
|
|
91
|
+
overflow-wrap:break-word;
|
|
92
|
+
-webkit-user-select:none;
|
|
93
|
+
-moz-user-select:none;
|
|
94
|
+
-ms-user-select:none;
|
|
95
|
+
user-select:none;
|
|
96
|
+
transition:background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out;
|
|
97
|
+
border:1px solid #53A21A;
|
|
98
|
+
background-color:#FFF;
|
|
99
|
+
color:#53A21A;
|
|
100
|
+
border:1px solid var(--iui-color-foreground-positive);
|
|
101
|
+
background-color:var(--iui-color-background-1);
|
|
102
|
+
color:var(--iui-color-foreground-positive);
|
|
103
|
+
}
|
|
104
|
+
.iui-wizard-step.iui-current{
|
|
105
|
+
font-weight:600;
|
|
106
|
+
}
|
|
107
|
+
.iui-wizard-step.iui-current .iui-wizard-step-name{
|
|
108
|
+
color:#53A21A;
|
|
109
|
+
color:var(--iui-color-foreground-positive);
|
|
110
|
+
}
|
|
111
|
+
.iui-wizard-step.iui-current .iui-wizard-circle{
|
|
112
|
+
color:#FFF;
|
|
113
|
+
border-color:#53A21A;
|
|
114
|
+
background-color:#53A21A;
|
|
115
|
+
color:var(--iui-color-foreground-accessory);
|
|
116
|
+
border-color:var(--iui-color-background-positive);
|
|
117
|
+
background-color:var(--iui-color-background-positive);
|
|
118
|
+
}
|
|
119
|
+
.iui-wizard-step.iui-current .iui-wizard-track-content::after{
|
|
120
|
+
background-color:#C7CCD1;
|
|
121
|
+
background-color:var(--iui-color-background-5);
|
|
122
|
+
}
|
|
123
|
+
.iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-circle{
|
|
124
|
+
border:1px solid #C7CCD1;
|
|
125
|
+
background-color:#FFF;
|
|
126
|
+
color:rgba(0, 0, 0, 0.4);
|
|
127
|
+
border:1px solid var(--iui-color-background-5);
|
|
128
|
+
background-color:var(--iui-color-background-1);
|
|
129
|
+
color:var(--iui-text-color-muted);
|
|
130
|
+
}
|
|
131
|
+
.iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-step-name{
|
|
132
|
+
color:rgba(0, 0, 0, 0.4);
|
|
133
|
+
color:var(--iui-text-color-muted);
|
|
134
|
+
}
|
|
135
|
+
.iui-wizard-step.iui-current ~ .iui-wizard-step .iui-wizard-track-content::before, .iui-wizard-step.iui-current ~ .iui-wizard-step:not(:last-of-type) .iui-wizard-track-content::after{
|
|
136
|
+
background-color:#C7CCD1;
|
|
137
|
+
background-color:var(--iui-color-background-5);
|
|
138
|
+
}
|
|
139
|
+
.iui-wizard-step.iui-clickable .iui-wizard-circle{
|
|
140
|
+
cursor:pointer;
|
|
141
|
+
}
|
|
142
|
+
@media (prefers-reduced-motion: no-preference){
|
|
124
143
|
.iui-wizard-step.iui-clickable .iui-wizard-circle{
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
144
|
+
transition:background-color 0.2s ease-out;
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
.iui-wizard-step.iui-clickable .iui-wizard-circle:hover{
|
|
148
|
+
color:#FFF;
|
|
149
|
+
border:1px solid #53A21A;
|
|
150
|
+
background-color:#53A21A;
|
|
151
|
+
color:var(--iui-color-foreground-accessory);
|
|
152
|
+
border:1px solid var(--iui-color-background-positive);
|
|
153
|
+
background-color:var(--iui-color-background-positive);
|
|
154
|
+
}
|
|
155
|
+
.iui-wizard-step.iui-clickable:focus{
|
|
156
|
+
outline:0;
|
|
157
|
+
}
|
|
158
|
+
.iui-wizard-step.iui-clickable:focus .iui-wizard-circle{
|
|
159
|
+
outline:2px solid #53A21A;
|
|
160
|
+
outline:2px solid var(--iui-color-foreground-positive);
|
|
161
|
+
outline-offset:-1px;
|
|
162
|
+
}
|
|
163
|
+
.iui-wizard-step.iui-clickable:focus:not(:focus-visible) .iui-wizard-circle{
|
|
164
|
+
outline:none;
|
|
165
|
+
}
|
|
166
|
+
.iui-wizard-step:first-of-type .iui-wizard-track-content::before, .iui-wizard-step:last-of-type .iui-wizard-track-content::after{
|
|
167
|
+
background-color:transparent;
|
|
168
|
+
}
|
|
147
169
|
|
|
148
170
|
.iui-wizard-track-content{
|
|
149
171
|
display:flex;
|
|
150
172
|
align-items:center;
|
|
151
|
-
width:100%;
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
173
|
+
width:100%;
|
|
174
|
+
}
|
|
175
|
+
.iui-wizard-track-content::before, .iui-wizard-track-content::after{
|
|
176
|
+
content:"";
|
|
177
|
+
height:2px;
|
|
178
|
+
flex:1 2 auto;
|
|
179
|
+
background-color:#53A21A;
|
|
180
|
+
background-color:var(--iui-color-foreground-positive);
|
|
181
|
+
}
|
|
158
182
|
|
|
159
183
|
.iui-wizard-step-name{
|
|
160
184
|
text-align:center;
|
|
@@ -162,4 +186,5 @@
|
|
|
162
186
|
-moz-user-select:all;
|
|
163
187
|
user-select:all;
|
|
164
188
|
color:#53A21A;
|
|
165
|
-
color:var(--iui-color-foreground-positive);
|
|
189
|
+
color:var(--iui-color-foreground-positive);
|
|
190
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itwin/itwinui-css",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.51.0",
|
|
4
4
|
"author": "Bentley Systems",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "src/index.scss",
|
|
@@ -38,16 +38,15 @@
|
|
|
38
38
|
]
|
|
39
39
|
},
|
|
40
40
|
"scripts": {
|
|
41
|
-
"build": "yarn clean && yarn build:scss && yarn build:css && yarn build:html && yarn copy-files",
|
|
41
|
+
"build": "yarn clean && yarn build:scss && yarn build:css && yarn lint:copyright --fix lib/css/* && yarn build:html && yarn copy-files",
|
|
42
42
|
"build:scss": "cpx \"./src/**/*.scss\" ./lib/scss",
|
|
43
|
-
"build:css": "node ./scripts/generateCss.js src lib/css
|
|
43
|
+
"build:css": "node ./scripts/generateCss.js src lib/css",
|
|
44
44
|
"build:html": "node ./scripts/generateHtml.js backstop/tests backstop/minified",
|
|
45
45
|
"build:watch": "yarn build && concurrently -n scss,html -k \"yarn build:watch:scss\" \"yarn build:watch:html\"",
|
|
46
46
|
"build:watch:scss": "chokidar \"src/**/*\" -c \"yarn build:scss && yarn build:css\"",
|
|
47
47
|
"build:watch:html": "chokidar \"backstop/tests/**/*\" -c \"yarn build:html\"",
|
|
48
48
|
"copy-files": "cpx package.json lib && cpx README.md lib",
|
|
49
49
|
"createComponent": "node ./scripts/createComponent.js",
|
|
50
|
-
"postcss-processing": "postcss lib/css -d lib/css --no-map && yarn print \"Finished post-processing CSS.\"",
|
|
51
50
|
"clean": "rimraf ./lib ./backstop/results/bitmaps_test",
|
|
52
51
|
"lint": "stylelint \"src/**/*.scss\"",
|
|
53
52
|
"lint:copyright": "node scripts/copyrightLinter.js",
|
|
@@ -68,12 +67,12 @@
|
|
|
68
67
|
"html-minifier": "^4.0.0",
|
|
69
68
|
"husky": "=4",
|
|
70
69
|
"lint-staged": "^11.2.6",
|
|
71
|
-
"node-sass": "^7.0.0",
|
|
72
70
|
"postcss": "^8.4.5",
|
|
73
|
-
"postcss-cli": "^8.3.1",
|
|
74
71
|
"postcss-discard-comments": "^5.0.1",
|
|
72
|
+
"postcss-scss": "^4.0.3",
|
|
75
73
|
"prettier": "^2.4.1",
|
|
76
74
|
"rimraf": "^3.0.2",
|
|
75
|
+
"sass-embedded": "^1.49.9",
|
|
77
76
|
"stylelint": "^14.2.0",
|
|
78
77
|
"stylelint-config-sass-guidelines": "^9.0.1"
|
|
79
78
|
},
|
package/scss/alert/alert.scss
CHANGED
|
@@ -79,11 +79,7 @@
|
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
#{$rootSelector}-message {
|
|
82
|
-
|
|
83
|
-
@include themed {
|
|
84
|
-
background-color: rgba(t(iui-color-foreground-#{$statusColor}-rgb), t(iui-opacity-4));
|
|
85
|
-
}
|
|
86
|
-
}
|
|
82
|
+
@include iui-text-selection($statusColor);
|
|
87
83
|
}
|
|
88
84
|
|
|
89
85
|
#{$rootSelector}-link {
|
|
@@ -46,7 +46,6 @@
|
|
|
46
46
|
border-top: $iui-xxs solid t(iui-color-background-4);
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
&-dots,
|
|
50
49
|
&-left,
|
|
51
50
|
&-right {
|
|
52
51
|
display: flex;
|
|
@@ -64,6 +63,10 @@
|
|
|
64
63
|
&-dots {
|
|
65
64
|
@include iui-reset;
|
|
66
65
|
@include iui-focus;
|
|
66
|
+
display: flex;
|
|
67
|
+
align-items: center;
|
|
68
|
+
flex: 2;
|
|
69
|
+
max-width: $iui-xxl * 4;
|
|
67
70
|
border-radius: $iui-border-radius;
|
|
68
71
|
white-space: nowrap;
|
|
69
72
|
overflow: hidden;
|
package/scss/code/codeblock.scss
CHANGED
|
@@ -55,6 +55,10 @@
|
|
|
55
55
|
// stylelint-enable
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
+
.iui-input-group .iui-toggle-switch-wrapper {
|
|
59
|
+
padding: round($iui-baseline * 0.5) 0;
|
|
60
|
+
}
|
|
61
|
+
|
|
58
62
|
// #region Cursors
|
|
59
63
|
@include iui-input-label-cursor;
|
|
60
64
|
|
|
@@ -124,9 +128,9 @@
|
|
|
124
128
|
display: flex;
|
|
125
129
|
gap: $iui-m;
|
|
126
130
|
|
|
127
|
-
> .iui-checkbox,
|
|
128
|
-
> .iui-radio,
|
|
129
|
-
> .iui-toggle-switch {
|
|
131
|
+
> .iui-checkbox-wrapper,
|
|
132
|
+
> .iui-radio-wrapper,
|
|
133
|
+
> .iui-toggle-switch-wrapper {
|
|
130
134
|
margin-right: $iui-m;
|
|
131
135
|
|
|
132
136
|
@supports (gap: $iui-m) {
|
|
@@ -300,11 +304,7 @@
|
|
|
300
304
|
/// @arg iconSelector - selector to apply status fill on. Defaults to .iui-input-icon
|
|
301
305
|
/// @arg textSelector - selector to apply text color on. Defaults to .iui-message
|
|
302
306
|
@mixin iui-input-status($status, $iconSelector: '.iui-input-icon', $textSelector: '.iui-message') {
|
|
303
|
-
|
|
304
|
-
@include themed {
|
|
305
|
-
background-color: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-4));
|
|
306
|
-
}
|
|
307
|
-
}
|
|
307
|
+
@include iui-text-selection($status);
|
|
308
308
|
|
|
309
309
|
#{$iconSelector} {
|
|
310
310
|
@include themed {
|
package/scss/inputs/radio.scss
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
border-radius: $iui-border-radius;
|
|
13
13
|
text-align: center;
|
|
14
14
|
font-size: $iui-font-size-leading;
|
|
15
|
-
padding: round($iui-baseline
|
|
15
|
+
padding: round($iui-baseline * 0.25) $iui-s;
|
|
16
16
|
filter: drop-shadow($iui-elevation-2);
|
|
17
17
|
box-sizing: border-box;
|
|
18
18
|
position: relative;
|
|
@@ -20,11 +20,11 @@
|
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
> .iui-location-marker-me-dot {
|
|
23
|
-
width: $iui-icons-large
|
|
24
|
-
height: $iui-icons-large
|
|
23
|
+
width: $iui-icons-large * 0.5;
|
|
24
|
+
height: $iui-icons-large * 0.5;
|
|
25
25
|
position: absolute;
|
|
26
|
-
top: $iui-icons-large
|
|
27
|
-
left: $iui-icons-large
|
|
26
|
+
top: $iui-icons-large * 0.25;
|
|
27
|
+
left: $iui-icons-large * 0.25;
|
|
28
28
|
border-radius: 50%;
|
|
29
29
|
box-sizing: border-box;
|
|
30
30
|
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
+
/* stylelint-disable selector-class-pattern */
|
|
1
2
|
// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
2
3
|
// See LICENSE.md in the project root for license terms and full copyright notice.
|
|
3
4
|
@import '../style/index';
|
|
4
5
|
|
|
5
6
|
// tippy.js helper class to hide Popover when it is scrolled out of view
|
|
6
7
|
@mixin iui-popover {
|
|
7
|
-
/* stylelint-disable-next-line selector-class-pattern */
|
|
8
8
|
&.tippy-box {
|
|
9
9
|
&[data-reference-hidden] {
|
|
10
10
|
visibility: visible;
|
|
@@ -16,7 +16,6 @@
|
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
// Resets tippy.js default stylings that interfere with our own
|
|
19
|
-
/* stylelint-disable-next-line selector-class-pattern */
|
|
20
19
|
.tippy-content {
|
|
21
20
|
all: revert;
|
|
22
21
|
}
|
|
@@ -71,11 +71,7 @@
|
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
> span {
|
|
74
|
-
|
|
75
|
-
@include themed {
|
|
76
|
-
background-color: rgba(t(iui-color-foreground-positive-rgb), t(iui-opacity-4));
|
|
77
|
-
}
|
|
78
|
-
}
|
|
74
|
+
@include iui-text-selection(positive);
|
|
79
75
|
}
|
|
80
76
|
}
|
|
81
77
|
}
|
|
@@ -101,11 +97,7 @@
|
|
|
101
97
|
}
|
|
102
98
|
|
|
103
99
|
> span {
|
|
104
|
-
|
|
105
|
-
@include themed {
|
|
106
|
-
background-color: rgba(t(iui-color-foreground-negative-rgb), t(iui-opacity-4));
|
|
107
|
-
}
|
|
108
|
-
}
|
|
100
|
+
@include iui-text-selection(negative);
|
|
109
101
|
}
|
|
110
102
|
}
|
|
111
103
|
}
|
package/scss/style/global.scss
CHANGED
|
@@ -26,11 +26,7 @@
|
|
|
26
26
|
[class*='iui-'],
|
|
27
27
|
[class*='iui-'] * {
|
|
28
28
|
// Text highlight
|
|
29
|
-
|
|
30
|
-
@include themed {
|
|
31
|
-
background-color: rgba(t(iui-color-foreground-primary-rgb), t(iui-opacity-4));
|
|
32
|
-
}
|
|
33
|
-
}
|
|
29
|
+
@include iui-text-selection;
|
|
34
30
|
|
|
35
31
|
// Scrollbar
|
|
36
32
|
@include iui-scrollbar;
|
package/scss/style/mixins.scss
CHANGED
|
@@ -63,6 +63,15 @@
|
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
65
|
|
|
66
|
+
@mixin iui-text-selection($status: primary) {
|
|
67
|
+
&::selection,
|
|
68
|
+
*::selection {
|
|
69
|
+
@include themed {
|
|
70
|
+
background-color: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-4));
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
66
75
|
@mixin iui-scrollbar {
|
|
67
76
|
@include themed {
|
|
68
77
|
scrollbar-color: rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-4)) transparent;
|
package/scss/table/table.scss
CHANGED
|
@@ -31,6 +31,8 @@
|
|
|
31
31
|
.iui-row {
|
|
32
32
|
display: flex;
|
|
33
33
|
flex-grow: 1;
|
|
34
|
+
border-left: solid 1px transparent;
|
|
35
|
+
border-right: solid 1px transparent;
|
|
34
36
|
}
|
|
35
37
|
|
|
36
38
|
.iui-cell:not(.iui-slot) {
|
|
@@ -103,15 +105,30 @@
|
|
|
103
105
|
}
|
|
104
106
|
}
|
|
105
107
|
|
|
108
|
+
.iui-reorder-bar {
|
|
109
|
+
position: absolute;
|
|
110
|
+
height: 100%;
|
|
111
|
+
width: $iui-xxs;
|
|
112
|
+
}
|
|
113
|
+
|
|
106
114
|
.iui-reorder-column-right {
|
|
107
|
-
|
|
108
|
-
|
|
115
|
+
> .iui-reorder-bar {
|
|
116
|
+
right: 0;
|
|
109
117
|
}
|
|
110
118
|
}
|
|
111
119
|
|
|
112
120
|
.iui-reorder-column-left {
|
|
113
|
-
|
|
114
|
-
|
|
121
|
+
> .iui-reorder-bar {
|
|
122
|
+
left: 0;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.iui-reorder-column-left,
|
|
127
|
+
.iui-reorder-column-right {
|
|
128
|
+
> .iui-reorder-bar {
|
|
129
|
+
@include themed {
|
|
130
|
+
background-color: t(iui-color-foreground-primary);
|
|
131
|
+
}
|
|
115
132
|
}
|
|
116
133
|
}
|
|
117
134
|
|
|
@@ -391,11 +408,7 @@
|
|
|
391
408
|
box-shadow: inset $iui-xxs 0 0 0 t(iui-icons-color-#{$status});
|
|
392
409
|
}
|
|
393
410
|
|
|
394
|
-
|
|
395
|
-
@include themed {
|
|
396
|
-
background-color: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-4));
|
|
397
|
-
}
|
|
398
|
-
}
|
|
411
|
+
@include iui-text-selection($status);
|
|
399
412
|
}
|
|
400
413
|
|
|
401
414
|
.iui-cell-end-icon svg {
|
|
@@ -410,11 +423,7 @@
|
|
|
410
423
|
background-color: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-6));
|
|
411
424
|
}
|
|
412
425
|
|
|
413
|
-
|
|
414
|
-
@include themed {
|
|
415
|
-
background-color: rgba(t(iui-color-foreground-#{$status}-rgb), t(iui-opacity-4));
|
|
416
|
-
}
|
|
417
|
-
}
|
|
426
|
+
@include iui-text-selection($status);
|
|
418
427
|
}
|
|
419
428
|
|
|
420
429
|
@mixin iui-table-cell-icon {
|