Skip to content

Commit 1111dbf

Browse files
MapTo0MapTo0
authored
fix(ui5-switch): fix layouting on IE (#223)
1 parent 6887985 commit 1111dbf

File tree

2 files changed

+48
-48
lines changed

2 files changed

+48
-48
lines changed

‎packages/main/src/SwitchTemplateContext.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ class SwitchTemplateContext {
2020

2121
static getMainClasses(state) {
2222
return {
23-
"ui5-switch": true,
23+
"ui5-switch-wrapper": true,
2424
"ui5-switch--disabled": state.disabled,
2525
"ui5-switch--checked": state.checked,
2626
"ui5-switch--semantic": state.type === SwitchType.Graphical,

‎packages/main/src/themes/base/Switch.less

+47-47
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ span[data-sap-ui-wc-root] {
7272
width: 100%;
7373
}
7474

75-
.ui5-switch {
75+
.ui5-switch-wrapper {
7676
position: relative;
7777
width: 100%;
7878
height: @_ui5_switch_height;
@@ -154,7 +154,7 @@ span[data-sap-ui-wc-root] {
154154
}
155155

156156
// switch focused
157-
.sap-desktop .ui5-switch:focus::after {
157+
.sap-desktop .ui5-switch-wrapper:focus::after {
158158
content: "";
159159
position: absolute;
160160
left: -@_ui5_switch_outline;
@@ -166,7 +166,7 @@ span[data-sap-ui-wc-root] {
166166
}
167167

168168
// switch hidden input
169-
.ui5-switch .ui5-switch-input {
169+
.ui5-switch-wrapper .ui5-switch-input {
170170
position: absolute;
171171
left: 0;
172172
width: 0;
@@ -177,177 +177,177 @@ span[data-sap-ui-wc-root] {
177177
}
178178

179179
// switch disabled
180-
.ui5-switch.ui5-switch--disabled {
180+
.ui5-switch-wrapper.ui5-switch--disabled {
181181
opacity: 0.4;
182182
cursor: default;
183183
}
184184

185-
.ui5-switch.ui5-switch--disabled .ui5-switch-track {
185+
.ui5-switch-wrapper.ui5-switch--disabled .ui5-switch-track {
186186
background: @_ui5_switch_track_disabled_bg;
187187
border-color: @_ui5_switch_track_disabled_border_color;
188188
}
189189

190-
.ui5-switch.ui5-switch--disabled.ui5-switch--checked .ui5-switch-track {
190+
.ui5-switch-wrapper.ui5-switch--disabled.ui5-switch--checked .ui5-switch-track {
191191
background: @_ui5_switch_track_disabled_checked_bg;
192192
}
193-
.ui5-switch.ui5-switch--disabled.ui5-switch--checked .ui5-switch-handle {
193+
.ui5-switch-wrapper.ui5-switch--disabled.ui5-switch--checked .ui5-switch-handle {
194194
background: @_ui5_switch_handle_disabled_checked_bg;
195195
}
196196

197197

198-
.ui5-switch.ui5-switch--disabled .ui5-switch-handle {
198+
.ui5-switch-wrapper.ui5-switch--disabled .ui5-switch-handle {
199199
background: @_ui5_switch_handle_disabled_bg;
200200
border-color: @_ui5_switch_handle_disabled_border_color;
201201
}
202202

203-
.ui5-switch.ui5-switch--semantic.ui5-switch--disabled .ui5-switch-track {
203+
.ui5-switch-wrapper.ui5-switch--semantic.ui5-switch--disabled .ui5-switch-track {
204204
background: @_ui5_switch_track_disabled_semantic_checked_bg;
205205
border-color: @_ui5_switch_track_disabled_semantic_checked_border_color;
206206
}
207207

208-
.ui5-switch.ui5-switch--semantic.ui5-switch--disabled .ui5-switch-handle {
208+
.ui5-switch-wrapper.ui5-switch--semantic.ui5-switch--disabled .ui5-switch-handle {
209209
background: @_ui5_switch_handle_disabled_semantic_checked_bg;
210210
border-color: @_ui5_switch_handle_disabled_semantic_checked_border_color;
211211
}
212212

213-
.ui5-switch.ui5-switch--semantic.ui5-switch--disabled:not(.ui5-switch--checked) .ui5-switch-track {
213+
.ui5-switch-wrapper.ui5-switch--semantic.ui5-switch--disabled:not(.ui5-switch--checked) .ui5-switch-track {
214214
background: @_ui5_switch_track_disabled_semantic_bg;
215215
border-color: @_ui5_switch_track_disabled_semantic_border_color;
216216
}
217217

218-
.ui5-switch.ui5-switch--semantic.ui5-switch--disabled:not(.ui5-switch--checked) .ui5-switch-handle {
218+
.ui5-switch-wrapper.ui5-switch--semantic.ui5-switch--disabled:not(.ui5-switch--checked) .ui5-switch-handle {
219219
background: @_ui5_switch_handle_disabled_semantic_bg;
220220
border-color: @_ui5_switch_handle_disabled_semantic_border_color;
221221
}
222222

223-
.ui5-switch.ui5-switch--disabled.ui5-switch--checked .ui5-switch-text {
223+
.ui5-switch-wrapper.ui5-switch--disabled.ui5-switch--checked .ui5-switch-text {
224224
color: @_ui5_switch_text_disabled_color;
225225
}
226226

227227

228228
// switch checked
229-
.ui5-switch.ui5-switch--checked .ui5-switch-handle {
229+
.ui5-switch-wrapper.ui5-switch--checked .ui5-switch-handle {
230230
background: @_ui5_switch_handle_checked_bg;
231231
border-color: @_ui5_switch_handle_checked_border_color;
232232
}
233233

234-
.ui5-switch.ui5-switch--checked .ui5-switch-track {
234+
.ui5-switch-wrapper.ui5-switch--checked .ui5-switch-track {
235235
background: @_ui5_switch_track_checked_bg;
236236
border-color: @_ui5_switch_track_checked_border_color;
237237
}
238238

239-
.ui5-switch.ui5-switch--checked .ui5-switch-slider {
239+
.ui5-switch-wrapper.ui5-switch--checked .ui5-switch-slider {
240240
// Move slider to oposite end, taking into account the handle as an offset.
241241
// Note: translate(calc()) does not work in IE11
242242
transform: translateX(100%) translateX(-1.875rem);
243243
}
244244

245245
// switch semantic off
246-
.ui5-switch.ui5-switch--semantic .ui5-switch-track,
247-
.ui5-switch.ui5-switch--semantic .ui5-switch-handle {
246+
.ui5-switch-wrapper.ui5-switch--semantic .ui5-switch-track,
247+
.ui5-switch-wrapper.ui5-switch--semantic .ui5-switch-handle {
248248
border-color: @sapUiSuccessBorder;
249249
}
250250

251-
.ui5-switch.ui5-switch--semantic .ui5-switch-track {
251+
.ui5-switch-wrapper.ui5-switch--semantic .ui5-switch-track {
252252
background: @sapUiSuccessBG;
253253
}
254254

255-
.ui5-switch.ui5-switch--semantic .ui5-switch-handle {
255+
.ui5-switch-wrapper.ui5-switch--semantic .ui5-switch-handle {
256256
background: lighten(@sapUiSuccessBG, 5);
257257
}
258258

259259
// switch semantic icon
260-
.ui5-switch.ui5-switch--semantic .ui5-switch-text {
260+
.ui5-switch-wrapper.ui5-switch--semantic .ui5-switch-text {
261261
justify-content: center;
262262
font-size: @sapMFontSmallSize;
263263
}
264264

265-
.ui5-switch.ui5-switch--semantic .ui5-switch-text::before {
265+
.ui5-switch-wrapper.ui5-switch--semantic .ui5-switch-text::before {
266266
font-family: 'SAP-icons';
267267
speak: none;
268268
width: 0.75rem;
269269
height: 0.75rem;
270270
line-height: 0.75rem;
271271
}
272-
.ui5-switch.ui5-switch--semantic .ui5-switch-text--on::before {
272+
.ui5-switch-wrapper.ui5-switch--semantic .ui5-switch-text--on::before {
273273
content: "\e05b";
274274
color: @sapUiPositiveElement;
275275
}
276276

277-
.ui5-switch.ui5-switch--semantic .ui5-switch-text--off::before {
277+
.ui5-switch-wrapper.ui5-switch--semantic .ui5-switch-text--off::before {
278278
content: "\e03e";
279279
color: @sapUiNegativeElement;
280280
}
281281

282282
// switch semantic on
283-
.ui5-switch.ui5-switch--semantic:not(.ui5-switch--checked) .ui5-switch-track,
284-
.ui5-switch.ui5-switch--semantic:not(.ui5-switch--checked) .ui5-switch-handle {
283+
.ui5-switch-wrapper.ui5-switch--semantic:not(.ui5-switch--checked) .ui5-switch-track,
284+
.ui5-switch-wrapper.ui5-switch--semantic:not(.ui5-switch--checked) .ui5-switch-handle {
285285
border-color: @sapUiErrorBorder;
286286
}
287287

288-
.ui5-switch.ui5-switch--semantic:not(.ui5-switch--checked) .ui5-switch-track {
288+
.ui5-switch-wrapper.ui5-switch--semantic:not(.ui5-switch--checked) .ui5-switch-track {
289289
background: @sapUiErrorBG;
290290
}
291291

292-
.ui5-switch.ui5-switch--semantic:not(.ui5-switch--checked) .ui5-switch-handle {
292+
.ui5-switch-wrapper.ui5-switch--semantic:not(.ui5-switch--checked) .ui5-switch-handle {
293293
background: lighten(@sapUiErrorBG,4);
294294
}
295295

296296
// switch hover effects
297297

298298
// switch on hover, when switched off
299-
.sap-desktop .ui5-switch:not(.ui5-switch--disabled):hover .ui5-switch-track {
299+
.sap-desktop .ui5-switch-wrapper:not(.ui5-switch--disabled):hover .ui5-switch-track {
300300
border-color: @sapUiContentForegroundBorderColor;
301301
}
302302

303-
.sap-desktop .ui5-switch:not(.ui5-switch--disabled):hover .ui5-switch-handle {
303+
.sap-desktop .ui5-switch-wrapper:not(.ui5-switch--disabled):hover .ui5-switch-handle {
304304
background: @_ui5_switch_handle_hover_bg;
305305
border-color: @sapUiContentForegroundBorderColor;
306306
}
307307

308308
// switch on hover, when switched on
309-
.sap-desktop .ui5-switch.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-handle {
309+
.sap-desktop .ui5-switch-wrapper.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-handle {
310310
background: @sapUiToggleButtonPressedHoverBackground;
311311
border-color: @sapUiToggleButtonPressedHoverBorderColor;
312312
}
313313

314-
.sap-desktop .ui5-switch.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-track {
314+
.sap-desktop .ui5-switch-wrapper.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-track {
315315
border-color: @_ui5_switch_track_hover_border_color;
316316
}
317317

318318
// semantic switch on hover, when switched off
319-
.sap-desktop .ui5-switch.ui5-switch--semantic:not(.ui5-switch--disabled):hover .ui5-switch-handle {
319+
.sap-desktop .ui5-switch-wrapper.ui5-switch--semantic:not(.ui5-switch--disabled):hover .ui5-switch-handle {
320320
background: @_ui5_switch_handle_semantic_hover_bg;
321321
border-color: @_ui5_switch_handle_semantic_hover_border_color;
322322
}
323323

324-
.sap-desktop .ui5-switch.ui5-switch--semantic:not(.ui5-switch--disabled):hover .ui5-switch-track {
324+
.sap-desktop .ui5-switch-wrapper.ui5-switch--semantic:not(.ui5-switch--disabled):hover .ui5-switch-track {
325325
border-color: @_ui5_switch_handle_semantic_hover_border_color;
326326
}
327327

328328
// semantic switch on hover, when switched on
329-
.sap-desktop .ui5-switch.ui5-switch--semantic.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-handle {
329+
.sap-desktop .ui5-switch-wrapper.ui5-switch--semantic.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-handle {
330330
background: @_ui5_switch_handle_semantic_checked_hover_bg;
331331
border-color: @_ui5_switch_handle_semantic_checked_hover_border_color;
332332
}
333333

334-
.sap-desktop .ui5-switch.ui5-switch--semantic.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-track {
334+
.sap-desktop .ui5-switch-wrapper.ui5-switch--semantic.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-track {
335335
border-color: @_ui5_switch_handle_semantic_checked_hover_border_color;
336336
}
337337

338-
.ui5-switch.ui5-switch--semantic.ui5-switch--disabled .ui5-switch-text--on::before,
339-
.ui5-switch.ui5-switch--semantic:hover .ui5-switch-text--on::before {
338+
.ui5-switch-wrapper.ui5-switch--semantic.ui5-switch--disabled .ui5-switch-text--on::before,
339+
.ui5-switch-wrapper.ui5-switch--semantic:hover .ui5-switch-text--on::before {
340340
color: @_ui5_switch_text_on_semantic_color;
341341
}
342342

343-
.ui5-switch.ui5-switch--semantic.ui5-switch--disabled .ui5-switch-text--off::before,
344-
.ui5-switch.ui5-switch--semantic:hover .ui5-switch-text--off::before {
343+
.ui5-switch-wrapper.ui5-switch--semantic.ui5-switch--disabled .ui5-switch-text--off::before,
344+
.ui5-switch-wrapper.ui5-switch--semantic:hover .ui5-switch-text--off::before {
345345
color: @_ui5_switch_text_off_semantic_color;
346346
}
347347

348348
/* Compact size */
349349
.sapUiSizeCompact {
350-
.ui5-switch {
350+
.ui5-switch-wrapper {
351351
height: @_ui5_switch_compact_height;
352352
min-width: @_ui5_switch_compact_width;
353353

@@ -370,34 +370,34 @@ span[data-sap-ui-wc-root] {
370370

371371
/* RTL */
372372
[dir="rtl"] {
373-
.ui5-switch .ui5-switch-handle {
373+
.ui5-switch-wrapper .ui5-switch-handle {
374374
left: 0;
375375
right: -1px;
376376
}
377377

378-
.ui5-switch.ui5-switch--checked .ui5-switch-slider {
378+
.ui5-switch-wrapper.ui5-switch--checked .ui5-switch-slider {
379379
transform: translateX(1.875rem) translateX(-100%);
380380
}
381381

382-
.ui5-switch .ui5-switch-text--on {
382+
.ui5-switch-wrapper .ui5-switch-text--on {
383383
right: calc(~"-100% + 1.9125rem");
384384
left: auto;
385385
}
386386

387-
.ui5-switch .ui5-switch-text--off {
387+
.ui5-switch-wrapper .ui5-switch-text--off {
388388
right: auto;
389389
left: 0;
390390
}
391391
}
392392

393393
/* RTL + Compact */
394394
.sapUiSizeCompact[dir="rtl"] {
395-
.ui5-switch.ui5-switch--checked .ui5-switch-slider {
395+
.ui5-switch-wrapper.ui5-switch--checked .ui5-switch-slider {
396396
transform: translateX(-100%) translateX(1.5rem);
397397

398398
}
399399

400-
.ui5-switch .ui5-switch-text--on {
400+
.ui5-switch-wrapper .ui5-switch-text--on {
401401
right: calc(~"-100% + 1.5625rem");
402402
}
403403
}

0 commit comments

Comments
 (0)