Skip to content

Commit 82b99c2

Browse files
ilhan007ilhan007
authored
refactor(ui5-radiobutton): move styles to Base theme (#184)
1 parent 07b33e0 commit 82b99c2

File tree

4 files changed

+171
-196
lines changed

4 files changed

+171
-196
lines changed

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

Lines changed: 160 additions & 160 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,15 @@
66
@import "./global.less";
77

88
/* ================================== */
9-
/* CSS for control sap.m/RadioButton */
9+
/* CSS for ui5-radiobutton */
1010
/* Base theme */
1111
/* ================================== */
12-
@_sap_m_RadioButton_SelectedWarningColor: darken(@sapUiFieldWarningColor, 100);
12+
@_ui5_radiobutton_hover_fill: @sapUiFieldHoverBackground;
13+
@_ui5_radiobutton_border_width: 1px;
14+
@_ui5_radiobutton_selected_fill: @sapUiSelected;
15+
@_ui5_radiobutton_selected_error_fill: @sapUiFieldInvalidColor;
16+
@_ui5_radiobutton_selected_warning_fill: darken(@sapUiFieldWarningColor, 100);
17+
@_ui5_radiobutton_warning_error_border_dash: 0;
1318

1419
:host(ui5-radiobutton) {
1520
max-width: 100%;
@@ -29,188 +34,183 @@ ui5-radiobutton {
2934
flex-wrap: nowrap;
3035
outline: none;
3136
max-width: 100%;
37+
}
38+
39+
/* Selected */
40+
.sapMRb.sapMRbSel .sapMRbSvgInner {
41+
fill: @_ui5_radiobutton_selected_fill;
42+
}
43+
44+
/* Disabled */
45+
.sapMRb.sapMRbDis {
46+
opacity: @sapUiContentDisabledOpacity;
47+
}
48+
49+
/* Disabled on focus */
50+
.sapMRb.sapMRbDis:focus:before {
51+
display: none;
52+
}
53+
54+
/* Focused */
55+
.sapMRb:focus:before {
56+
content: "";
57+
display: block;
58+
position: absolute;
59+
top: .625rem;
60+
bottom: .625rem;
61+
left: .625rem;
62+
right: .625rem;
63+
pointer-events: none;
64+
border: @_ui5_radiobutton_border_width dotted @sapUiContentFocusColor;
65+
}
66+
67+
.sapMRb.sapMRbHasLabel:focus:before {
68+
right: 0;
69+
}
70+
71+
/* Read only */
72+
.sapMRb.sapMRbRo.sapMRbSel .sapMRbSvgInner {
73+
fill: @sapUiContentNonInteractiveIconColor;
74+
}
75+
76+
.sapMRb.sapMRbRo .sapMRbSvgOuter {
77+
fill: @sapUiFieldReadOnlyBackground;
78+
stroke: @sapUiFieldReadOnlyBorderColor;
79+
}
80+
81+
/* Error state */
82+
.sapMRb.sapMRbErr.sapMRbSel .sapMRbSvgInner {
83+
fill: @_ui5_radiobutton_selected_error_fill;
84+
}
85+
.sapMRb.sapMRbErr .sapMRbSvgOuter,
86+
.sapMRb.sapMRbErr:hover .sapMRbInner.sapMRbHoverable:hover .sapMRbSvgOuter {
87+
stroke: @sapUiFieldInvalidColor;
88+
fill: @sapUiFieldInvalidBackground;
89+
}
90+
91+
/* Warning state */
92+
.sapMRb.sapMRbWarn.sapMRbSel .sapMRbSvgInner {
93+
fill: @_ui5_radiobutton_selected_warning_fill;
94+
}
95+
.sapMRb.sapMRbWarn .sapMRbSvgOuter,
96+
.sapMRb.sapMRbWarn:hover .sapMRbInner.sapMRbHoverable:hover .sapMRbSvgOuter {
97+
stroke: @sapUiFieldWarningColor;
98+
fill: @sapUiFieldWarningBackground;
99+
}
100+
101+
.sapMRb.sapMRbErr,
102+
.sapMRb.sapMRbWarn {
103+
stroke-dasharray: @_ui5_radiobutton_warning_error_border_dash;
104+
}
105+
106+
/* Inner */
107+
.sapMRb .sapMRbInner {
108+
width: 3rem;
109+
height: 3rem;
110+
font-size: 1rem; /* override font size of the message dialog */
111+
pointer-events: none;
112+
vertical-align: top;
113+
display: inline-block;
114+
}
32115

33-
/* Selected */
34-
&.sapMRbSel .sapMRbSvgInner {
35-
fill: @sapUiSelected;
36-
}
37-
38-
/* Disabled */
39-
&.sapMRbDis {
40-
opacity: @sapUiContentDisabledOpacity;
41-
}
42-
43-
/* Disabled on focus */
44-
&.sapMRbDis:focus:before {
45-
display: none;
46-
}
47-
48-
/* Focused */
49-
&:focus:before {
50-
content: "";
51-
display: block;
52-
position: absolute;
53-
top: .625rem;
54-
bottom: .625rem;
55-
left: .625rem;
56-
right: .625rem;
57-
pointer-events: none;
58-
border: 1px dotted @sapUiContentFocusColor;
59-
}
60-
61-
&.sapMRbHasLabel:focus:before {
62-
right: 0;
63-
}
64-
65-
/* Read only */
66-
&.sapMRbRo {
67-
&.sapMRbSel .sapMRbSvgInner {
68-
fill: @sapUiContentNonInteractiveIconColor;
69-
}
70-
71-
.sapMRbSvgOuter {
72-
fill: @sapUiFieldReadOnlyBackground;
73-
stroke: @sapUiFieldReadOnlyBorderColor;
74-
}
75-
}
76-
77-
/* Error state */
78-
&.sapMRbErr.sapMRbSel .sapMRbSvgInner {
79-
fill: @sapUiFieldInvalidColor;
80-
}
81-
&.sapMRbErr .sapMRbSvgOuter,
82-
&.sapMRbErr:hover .sapMRbInner.sapMRbHoverable:hover .sapMRbSvgOuter {
83-
stroke: @sapUiFieldInvalidColor;
84-
fill: @sapUiFieldInvalidBackground;
85-
}
86-
87-
/* Warning state */
88-
&.sapMRbWarn.sapMRbSel .sapMRbSvgInner {
89-
fill: @_sap_m_RadioButton_SelectedWarningColor;
90-
}
91-
&.sapMRbWarn .sapMRbSvgOuter,
92-
&.sapMRbWarn:hover .sapMRbInner.sapMRbHoverable:hover .sapMRbSvgOuter {
93-
stroke: @sapUiFieldWarningColor;
94-
fill: @sapUiFieldWarningBackground;
95-
}
96-
97-
/* Inner */
98-
.sapMRbInner {
99-
width: 3rem;
100-
height: 3rem;
101-
font-size: 1rem; /* override font size of the message dialog */
102-
pointer-events: none;
103-
vertical-align: top;
104-
display: inline-block;
105-
106-
/* Focused */
107-
&:focus {
108-
outline: none;
109-
}
110-
111-
/* Hovered */
112-
&.sapMRbHoverable:hover .sapMRbSvgOuter {
113-
fill: @sapUiFieldHoverBackground;
114-
stroke: @sapUiFieldHoverBorderColor;
115-
}
116-
117-
input {
118-
margin: 0; /* FF puts margin */
119-
visibility: hidden;
120-
width: 0;
121-
}
122-
}
123-
124-
/* Label */
125-
ui5-label.labelInRadioButton {
126-
width: calc(~"100% - 3rem");
127-
padding-right: 1px;
128-
vertical-align: top;
129-
height: 3rem;
130-
line-height: 3rem;
131-
cursor: default;
132-
max-width: 100%;
133-
text-overflow: ellipsis;
134-
overflow: hidden;
135-
pointer-events: none;
136-
}
116+
.sapMRb .sapMRbInner:focus {
117+
outline: none;
118+
}
119+
120+
/* Hovered */
121+
.sapMRb:not(.sapMRbWarn):not(.sapMRbErr):hover .sapMRbHoverable .sapMRbSvgOuter {
122+
fill: @_ui5_radiobutton_hover_fill;
123+
stroke: @sapUiFieldHoverBorderColor;
124+
}
125+
126+
.sapMRb .sapMRbInner input {
127+
margin: 0; /* FF puts margin */
128+
visibility: hidden;
129+
width: 0;
130+
}
131+
132+
/* Label */
133+
.sapMRb ui5-label.labelInRadioButton {
134+
width: calc(~"100% - 3rem");
135+
padding-right: 1px;
136+
vertical-align: top;
137+
height: 3rem;
138+
line-height: 3rem;
139+
cursor: default;
140+
max-width: 100%;
141+
text-overflow: ellipsis;
142+
overflow: hidden;
143+
pointer-events: none;
137144
}
138145

139146
/* SVG */
140147
.sapMRbSvg {
141148
height: 3rem;
142149
width: 3rem;
143150
pointer-events: none;
151+
}
144152

145-
.sapMRbSvgOuter {
146-
stroke: @sapUiFieldBorderColor;
147-
}
153+
.sapMRbSvg .sapMRbSvgOuter {
154+
stroke: @sapUiFieldBorderColor;
155+
}
148156

149-
.sapMRbSvgInner {
150-
fill: none;
151-
}
157+
.sapMRbSvg .sapMRbSvgInner {
158+
fill: none;
152159
}
153160

154161
/* Compact size */
155-
.sapUiSizeCompact {
156-
.sapMRb {
157-
height : 2rem;
158-
159-
&:focus:before {
160-
top: .375rem;
161-
bottom: .375rem;
162-
left: .375rem;
163-
right: .325rem;
164-
}
165-
166-
&.sapMRbHasLabel:focus:before {
167-
right: 0;
168-
}
169-
170-
.sapMRbInner {
171-
width: 2rem;
172-
height: 2rem;
173-
display: flex;
174-
align-items: center;
175-
justify-content: center;
176-
177-
.sapMRbSvg {
178-
height: 1rem;
179-
width: 1rem;
180-
line-height: 1rem;
181-
}
182-
}
183-
184-
ui5-label.labelInRadioButton {
185-
line-height: 2rem;
186-
height: 2rem;
187-
width: calc(~"100% - 2rem + 1px");
188-
}
189-
}
162+
.sapUiSizeCompact .sapMRb {
163+
height : 2rem;
190164
}
191165

192-
/* ListItem Context */
193-
:host(ui5-radiobutton.radioButtonInListItem) .sapMRb .sapMRbInner .sapMRbSvgOuter {
194-
fill: @sapUiListBackground;
166+
.sapUiSizeCompact .sapMRb:focus:before {
167+
top: .375rem;
168+
bottom: .375rem;
169+
left: .375rem;
170+
right: .325rem;
171+
}
172+
173+
.sapUiSizeCompact .sapMRb.sapMRbHasLabel:focus:before {
174+
right: 0;
175+
}
176+
177+
.sapUiSizeCompact .sapMRb .sapMRbInner {
178+
width: 2rem;
179+
height: 2rem;
180+
display: flex;
181+
align-items: center;
182+
justify-content: center;
183+
}
184+
185+
.sapUiSizeCompact .sapMRb .sapMRbInner .sapMRbSvg {
186+
height: 1rem;
187+
width: 1rem;
188+
line-height: 1rem;
189+
}
190+
191+
.sapUiSizeCompact .sapMRb ui5-label.labelInRadioButton {
192+
line-height: 2rem;
193+
height: 2rem;
194+
width: calc(~"100% - 2rem + 1px");
195195
}
196196

197197
/* RTL */
198-
span[dir="rtl"] {
199-
.sapMRb.sapMRbHasLabel:focus:before {
200-
left: 0;
201-
right: 0.625rem;
202-
}
198+
span[dir="rtl"] .sapMRb.sapMRbHasLabel:focus:before {
199+
left: 0;
200+
right: 0.625rem;
203201
}
204202

205203
/* RTL in Compact */
206-
span[dir="rtl"] {
207-
&.sapUiSizeCompact .sapMRb.sapMRbHasLabel:focus:before {
208-
left: 0;
209-
right: 0.375rem;
210-
}
204+
span[dir="rtl"].sapUiSizeCompact .sapMRb.sapMRbHasLabel:focus:before {
205+
left: 0;
206+
right: 0.375rem;
211207
}
212208

213209
/* ListItem Context */
210+
:host(ui5-radiobutton.radioButtonInListItem) .sapMRb .sapMRbInner .sapMRbSvgOuter {
211+
fill: @sapUiListBackground;
212+
}
213+
214214
ui5-radiobutton.radioButtonInListItem .sapMRb .sapMRbInner .sapMRbSvgOuter {
215215
fill: @sapUiListBackground;
216216
}

‎packages/main/src/themes/sap_belize/RadioButton.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,6 @@
1010
@import "./global.less";
1111

1212
/* ================================== */
13-
/* CSS for control sap.m/RadioButton */
13+
/* CSS for ui5-radiobutton */
1414
/* Belize theme */
1515
/* ================================== */

0 commit comments

Comments
 (0)