Skip to content

Commit 16c65da

Browse files
ilhan007ilhan007
authored
refactor(ui5-switch): keep styles to base only (#171)
1 parent 9118348 commit 16c65da

File tree

3 files changed

+190
-121
lines changed

3 files changed

+190
-121
lines changed

‎packages/main/src/Switch.js‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -140,9 +140,7 @@ class Switch extends WebComponent {
140140
}
141141

142142
ontap(event) {
143-
if (this._tapAllowed(event.ui5target)) {
144-
this.toggle();
145-
}
143+
this.toggle();
146144
}
147145

148146
onkeydown(event) {
@@ -168,10 +166,6 @@ class Switch extends WebComponent {
168166
}
169167
}
170168

171-
_tapAllowed(target) {
172-
return target !== this;
173-
}
174-
175169
static get calculateTemplateContext() {
176170
return SwitchTemplateContext.calculate;
177171
}

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

Lines changed: 169 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,23 @@
2121
@_ui5_switch_track_hover_border_color: @_ui5_switch_track_checked_border_color;
2222
@_ui5_switch_track_border_radius: 0.75rem;
2323

24+
@_ui5_switch_track_disabled_bg: @_ui5_switch_track_bg;
25+
@_ui5_switch_track_disabled_checked_bg: @_ui5_switch_track_checked_bg;
26+
@_ui5_switch_track_disabled_border_color: @sapUiContentForegroundBorderColor;
27+
@_ui5_switch_track_disabled_semantic_checked_bg: @sapUiSuccessBG;
28+
@_ui5_switch_track_disabled_semantic_checked_border_color: @sapUiSuccessBorder;
29+
@_ui5_switch_track_disabled_semantic_bg: @sapUiErrorBG;
30+
@_ui5_switch_track_disabled_semantic_border_color: @sapUiErrorBorder;
31+
2432
// switch handle
2533
@_ui5_switch_handle_width: 2rem;
2634
@_ui5_switch_handle_height: 2rem;
2735
@_ui5_switch_handle_border_width: 1px;
2836
@_ui5_switch_handle_border_radius: 1rem;
2937
@_ui5_switch_handle_bg: darken(@sapUiButtonBackground, 2);
3038
@_ui5_switch_handle_hover_bg: darken(@sapUiButtonHoverBackground, 2);
39+
@_ui5_switch_handle_checked_bg: @sapUiToggleButtonPressedBackground;
40+
@_ui5_switch_handle_checked_border_color: @sapUiToggleButtonPressedBorderColor;
3141
@_ui5_switch_handle_checked_hover_bg: @sapUiToggleButtonPressedHoverBackground;
3242
@_ui5_switch_handle_semantic_hover_bg: @sapUiErrorBG;
3343
@_ui5_switch_handle_semantic_checked_hover_bg: @sapUiSuccessBG;
@@ -36,6 +46,19 @@
3646
@_ui5_switch_handle_compact_width: 1.625rem;
3747
@_ui5_switch_handle_compact_height: 1.625rem;
3848

49+
@_ui5_switch_handle_disabled_bg: @_ui5_switch_handle_bg;
50+
@_ui5_switch_handle_disabled_checked_bg: @_ui5_switch_handle_checked_bg;
51+
@_ui5_switch_handle_disabled_border_color: @sapUiContentForegroundBorderColor;
52+
@_ui5_switch_handle_disabled_semantic_checked_bg: lighten(@sapUiSuccessBG, 5);
53+
@_ui5_switch_handle_disabled_semantic_checked_border_color: @sapUiSuccessBorder;
54+
@_ui5_switch_handle_disabled_semantic_bg: lighten(@sapUiErrorBG,4);
55+
@_ui5_switch_handle_disabled_semantic_border_color: @sapUiErrorBorder;
56+
57+
// switch text
58+
@_ui5_switch_text_on_semantic_color: @sapUiPositiveElement;
59+
@_ui5_switch_text_off_semantic_color: @sapUiNegativeElement;
60+
@_ui5_switch_text_disabled_color: @sapUiBaseText;
61+
3962
:host(ui5-switch) {
4063
display: inline-block;
4164
}
@@ -143,7 +166,9 @@ span[data-sap-ui-wc-root] {
143166
}
144167

145168
// switch hidden input
146-
.ui5-switch .ui5-switch-input {
169+
.ui5-switch .ui5-switch-input {
170+
position: absolute;
171+
left: 0;
147172
width: 0;
148173
height: 0;
149174
margin: 0;
@@ -157,108 +182,167 @@ span[data-sap-ui-wc-root] {
157182
cursor: default;
158183
}
159184

185+
.ui5-switch.ui5-switch--disabled .ui5-switch-track {
186+
background: @_ui5_switch_track_disabled_bg;
187+
border-color: @_ui5_switch_track_disabled_border_color;
188+
}
189+
190+
.ui5-switch.ui5-switch--disabled.ui5-switch--checked .ui5-switch-track {
191+
background: @_ui5_switch_track_disabled_checked_bg;
192+
}
193+
.ui5-switch.ui5-switch--disabled.ui5-switch--checked .ui5-switch-handle {
194+
background: @_ui5_switch_handle_disabled_checked_bg;
195+
}
196+
197+
198+
.ui5-switch.ui5-switch--disabled .ui5-switch-handle {
199+
background: @_ui5_switch_handle_disabled_bg;
200+
border-color: @_ui5_switch_handle_disabled_border_color;
201+
}
202+
203+
.ui5-switch.ui5-switch--semantic.ui5-switch--disabled .ui5-switch-track {
204+
background: @_ui5_switch_track_disabled_semantic_checked_bg;
205+
border-color: @_ui5_switch_track_disabled_semantic_checked_border_color;
206+
}
207+
208+
.ui5-switch.ui5-switch--semantic.ui5-switch--disabled .ui5-switch-handle {
209+
background: @_ui5_switch_handle_disabled_semantic_checked_bg;
210+
border-color: @_ui5_switch_handle_disabled_semantic_checked_border_color;
211+
}
212+
213+
.ui5-switch.ui5-switch--semantic.ui5-switch--disabled:not(.ui5-switch--checked) .ui5-switch-track {
214+
background: @_ui5_switch_track_disabled_semantic_bg;
215+
border-color: @_ui5_switch_track_disabled_semantic_border_color;
216+
}
217+
218+
.ui5-switch.ui5-switch--semantic.ui5-switch--disabled:not(.ui5-switch--checked) .ui5-switch-handle {
219+
background: @_ui5_switch_handle_disabled_semantic_bg;
220+
border-color: @_ui5_switch_handle_disabled_semantic_border_color;
221+
}
222+
223+
.ui5-switch.ui5-switch--disabled.ui5-switch--checked .ui5-switch-text {
224+
color: @_ui5_switch_text_disabled_color;
225+
}
226+
227+
160228
// switch checked
161-
.ui5-switch.ui5-switch--checked {
162-
& .ui5-switch-handle {
163-
background: @sapUiToggleButtonPressedBackground;
164-
border-color: @sapUiToggleButtonPressedBorderColor;
165-
}
229+
.ui5-switch.ui5-switch--checked .ui5-switch-handle {
230+
background: @_ui5_switch_handle_checked_bg;
231+
border-color: @_ui5_switch_handle_checked_border_color;
232+
}
166233

167-
& .ui5-switch-track {
168-
background: @_ui5_switch_track_checked_bg;
169-
border-color: @_ui5_switch_track_checked_border_color;
170-
}
234+
.ui5-switch.ui5-switch--checked .ui5-switch-track {
235+
background: @_ui5_switch_track_checked_bg;
236+
border-color: @_ui5_switch_track_checked_border_color;
237+
}
171238

172-
& .ui5-switch-slider {
173-
// Move slider to oposite end, taking into account the handle as an offset.
174-
// Note: translate(calc()) does not work in IE11
175-
transform: translateX(100%) translateX(-1.875rem);
176-
}
239+
.ui5-switch.ui5-switch--checked .ui5-switch-slider {
240+
// Move slider to oposite end, taking into account the handle as an offset.
241+
// Note: translate(calc()) does not work in IE11
242+
transform: translateX(100%) translateX(-1.875rem);
177243
}
178244

179245
// switch semantic off
180-
.ui5-switch.ui5-switch--semantic {
181-
.ui5-switch-track,
182-
.ui5-switch-handle {
183-
border-color: @sapUiSuccessBorder;
184-
}
185-
.ui5-switch-track {
186-
background: @sapUiSuccessBG;
187-
}
188-
.ui5-switch-handle {
189-
background: lighten(@sapUiSuccessBG, 5);
190-
}
246+
.ui5-switch.ui5-switch--semantic .ui5-switch-track,
247+
.ui5-switch.ui5-switch--semantic .ui5-switch-handle {
248+
border-color: @sapUiSuccessBorder;
249+
}
191250

192-
// icon
193-
.ui5-switch-text {
194-
justify-content: center;
195-
font-size: @sapMFontLargeSize;
196-
}
197-
.ui5-switch-text::before {
198-
font-family: 'SAP-icons';
199-
speak: none;
200-
}
201-
.ui5-switch-text--on::before {
202-
content: "\e05b";
203-
color: @sapUiPositiveElement;
204-
}
205-
.ui5-switch-text--off::before {
206-
content: "\e03e";
207-
color: @sapUiNegativeElement;
208-
}
251+
.ui5-switch.ui5-switch--semantic .ui5-switch-track {
252+
background: @sapUiSuccessBG;
253+
}
254+
255+
.ui5-switch.ui5-switch--semantic .ui5-switch-handle {
256+
background: lighten(@sapUiSuccessBG, 5);
257+
}
258+
259+
// switch semantic icon
260+
.ui5-switch.ui5-switch--semantic .ui5-switch-text {
261+
justify-content: center;
262+
font-size: @sapMFontSmallSize;
263+
}
264+
265+
.ui5-switch.ui5-switch--semantic .ui5-switch-text::before {
266+
font-family: 'SAP-icons';
267+
speak: none;
268+
width: 0.75rem;
269+
height: 0.75rem;
270+
line-height: 0.75rem;
271+
}
272+
.ui5-switch.ui5-switch--semantic .ui5-switch-text--on::before {
273+
content: "\e05b";
274+
color: @sapUiPositiveElement;
275+
}
276+
277+
.ui5-switch.ui5-switch--semantic .ui5-switch-text--off::before {
278+
content: "\e03e";
279+
color: @sapUiNegativeElement;
209280
}
210281

211282
// switch semantic on
212-
.ui5-switch.ui5-switch--semantic:not(.ui5-switch--checked) {
213-
.ui5-switch-track,
214-
.ui5-switch-handle {
215-
border-color: @sapUiErrorBorder;
216-
}
217-
.ui5-switch-track {
218-
background: @sapUiErrorBG;
219-
}
220-
.ui5-switch-handle {
221-
background: lighten(@sapUiErrorBG,4);
222-
}
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 {
285+
border-color: @sapUiErrorBorder;
286+
}
287+
288+
.ui5-switch.ui5-switch--semantic:not(.ui5-switch--checked) .ui5-switch-track {
289+
background: @sapUiErrorBG;
290+
}
291+
292+
.ui5-switch.ui5-switch--semantic:not(.ui5-switch--checked) .ui5-switch-handle {
293+
background: lighten(@sapUiErrorBG,4);
223294
}
224295

225296
// switch hover effects
226-
.sap-desktop .ui5-switch:not(.ui5-switch--disabled):hover {
227-
// switch on hover, when switched off
228-
.ui5-switch-track {
229-
border-color: @sapUiContentForegroundBorderColor;
230-
}
231-
.ui5-switch-handle {
232-
background: @_ui5_switch_handle_hover_bg;
233-
border-color: @sapUiContentForegroundBorderColor;
234-
}
235297

236-
// switch on hover, when switched on
237-
&.ui5-switch--checked .ui5-switch-handle {
298+
// switch on hover, when switched off
299+
.sap-desktop .ui5-switch:not(.ui5-switch--disabled):hover .ui5-switch-track {
300+
border-color: @sapUiContentForegroundBorderColor;
301+
}
302+
303+
.sap-desktop .ui5-switch:not(.ui5-switch--disabled):hover .ui5-switch-handle {
304+
background: @_ui5_switch_handle_hover_bg;
305+
border-color: @sapUiContentForegroundBorderColor;
306+
}
307+
308+
// switch on hover, when switched on
309+
.sap-desktop .ui5-switch.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-handle {
238310
background: @sapUiToggleButtonPressedHoverBackground;
239311
border-color: @sapUiToggleButtonPressedHoverBorderColor;
240312
}
241-
&.ui5-switch--checked .ui5-switch-track {
242-
border-color: @_ui5_switch_track_hover_border_color;
243-
}
244313

245-
// semantic switch on hover, when switched off
246-
&.ui5-switch--semantic .ui5-switch-handle {
247-
background: @_ui5_switch_handle_semantic_hover_bg;
248-
border-color: @_ui5_switch_handle_semantic_hover_border_color;
249-
}
250-
&.ui5-switch--semantic .ui5-switch-track {
251-
border-color: @_ui5_switch_handle_semantic_hover_border_color;
252-
}
253-
254-
// semantic switch on hover, when switched on
255-
&.ui5-switch--semantic.ui5-switch--checked .ui5-switch-handle {
256-
background: @_ui5_switch_handle_semantic_checked_hover_bg;
257-
border-color: @_ui5_switch_handle_semantic_checked_hover_border_color;
258-
}
259-
&.ui5-switch--semantic.ui5-switch--checked .ui5-switch-track {
260-
border-color: @_ui5_switch_handle_semantic_checked_hover_border_color;
261-
}
314+
.sap-desktop .ui5-switch.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-track {
315+
border-color: @_ui5_switch_track_hover_border_color;
316+
}
317+
318+
// semantic switch on hover, when switched off
319+
.sap-desktop .ui5-switch.ui5-switch--semantic:not(.ui5-switch--disabled):hover .ui5-switch-handle {
320+
background: @_ui5_switch_handle_semantic_hover_bg;
321+
border-color: @_ui5_switch_handle_semantic_hover_border_color;
322+
}
323+
324+
.sap-desktop .ui5-switch.ui5-switch--semantic:not(.ui5-switch--disabled):hover .ui5-switch-track {
325+
border-color: @_ui5_switch_handle_semantic_hover_border_color;
326+
}
327+
328+
// 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 {
330+
background: @_ui5_switch_handle_semantic_checked_hover_bg;
331+
border-color: @_ui5_switch_handle_semantic_checked_hover_border_color;
332+
}
333+
334+
.sap-desktop .ui5-switch.ui5-switch--semantic.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-track {
335+
border-color: @_ui5_switch_handle_semantic_checked_hover_border_color;
336+
}
337+
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 {
340+
color: @_ui5_switch_text_on_semantic_color;
341+
}
342+
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 {
345+
color: @_ui5_switch_text_off_semantic_color;
262346
}
263347

264348
/* Compact size */

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

Lines changed: 20 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,14 @@
2121
@_ui5_switch_track_border_color: @sapUiButtonBackground;
2222
@_ui5_switch_track_checked_border_color: @sapUiContentForegroundBorderColor;
2323

24+
@_ui5_switch_track_disabled_bg: @sapUiButtonBackground;
25+
@_ui5_switch_track_disabled_checked_bg: @sapUiHcReducedBackground;
26+
@_ui5_switch_track_disabled_border_color: @sapUiHcReducedForeground;
27+
@_ui5_switch_track_disabled_semantic_checked_bg: @sapUiHcReducedBackground;
28+
@_ui5_switch_track_disabled_semantic_checked_border_color: @sapUiHcReducedForeground;
29+
@_ui5_switch_track_disabled_semantic_bg: @sapUiButtonBackground;
30+
@_ui5_switch_track_disabled_semantic_border_color: @sapUiHcReducedForeground;
31+
2432
// Switch Handle
2533
@_ui5_switch_handle_bg: @sapUiButtonBackground;
2634
@_ui5_switch_handle_hover_bg: @sapUiButtonHoverBackground;
@@ -30,32 +38,15 @@
3038
@_ui5_switch_handle_semantic_checked_hover_border_color: @sapUiContentForegroundBorderColor;
3139
@_ui5_switch_handle_border_width: 0.125rem;
3240

33-
34-
.ui5-switch.ui5-switch--disabled,
35-
.ui5-switch.ui5-switch--semantic.ui5-switch--disabled {
36-
.ui5-switch-track,
37-
.ui5-switch-handle {
38-
background: @sapUiButtonBackground;
39-
border-color: @sapUiHcReducedForeground;
40-
}
41-
42-
.ui5-switch-text::before {
43-
color: @sapUiHcReducedAltForeground;
44-
}
45-
46-
&.ui5-switch--checked {
47-
.ui5-switch-track,
48-
.ui5-switch-handle {
49-
background: @sapUiHcReducedBackground;
50-
}
51-
.ui5-switch-text,
52-
.ui5-switch-text {
53-
color: @sapUiHcReducedAltForeground;
54-
}
55-
}
56-
}
57-
58-
.ui5-switch.ui5-switch--disabled.ui5-switch--semantic .ui5-switch-text::before,
59-
.ui5-switch.ui5-switch--semantic:hover .ui5-switch-text::before {
60-
color: @sapUiBaseText;
61-
}
41+
@_ui5_switch_handle_disabled_bg: @sapUiButtonBackground;
42+
@_ui5_switch_handle_disabled_checked_bg: @sapUiHcReducedForeground;
43+
@_ui5_switch_handle_disabled_border_color: @sapUiHcReducedForeground;
44+
@_ui5_switch_handle_disabled_semantic_checked_bg: @sapUiHcReducedBackground;
45+
@_ui5_switch_handle_disabled_semantic_checked_border_color: @sapUiHcReducedForeground;
46+
@_ui5_switch_handle_disabled_semantic_bg: @sapUiButtonBackground;
47+
@_ui5_switch_handle_disabled_semantic_border_color: @sapUiHcReducedForeground;
48+
49+
// Switch sementic text
50+
@_ui5_switch_text_on_semantic_color: @sapUiBaseText;
51+
@_ui5_switch_text_off_semantic_color: @sapUiBaseText;
52+
@_ui5_switch_text_disabled_color: @sapUiHcReducedAltForeground;

0 commit comments

Comments
 (0)