Skip to content

Commit 9118348

Browse files
ilhan007ilhan007
authored
refactor(ui5-calendar-header): move styles in Base theme (#179)
1 parent c4a9a8d commit 9118348

File tree

3 files changed

+82
-90
lines changed

3 files changed

+82
-90
lines changed

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

Lines changed: 67 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,24 @@
55
@import "./base.less";
66
@import "./global.less";
77

8+
@_ui5_calendar_header_arrow_button_border: none;
9+
@_ui5_calendar_header_arrow_button_border_radius: 0.25rem;
10+
11+
@_ui5_calendar_header_middle_button_width: 2.5rem;
12+
@_ui5_calendar_header_middle_button_flex: 1;
13+
@_ui5_calendar_header_middle_button_focus_border_radius: 0.25rem;
14+
@_ui5_calendar_header_middle_button_focus_border: none;
15+
@_ui5_calendar_header_middle_button_focus_after_display: block;
16+
@_ui5_calendar_header_middle_button_focus_after_width: calc(~"100% - 0.25rem");
17+
@_ui5_calendar_header_middle_button_focus_after_height: calc(~"100% - 0.25rem");
18+
@_ui5_calendar_header_middle_button_focus_after_top_offset: 1px;
19+
@_ui5_calendar_header_middle_button_focus_after_left_offset: 1px;
20+
821
:host(ui5-calendar-header) {
922
display: inline-block;
1023
width: 100%;
1124
}
1225

13-
// required for browsers without native shadow dom
1426
ui5-calendar-header {
1527
display: inline-block;
1628
width: 100%;
@@ -21,10 +33,10 @@ ui5-calendar-header {
2133
height: 3rem;
2234
padding: 0.25rem 0;
2335
box-sizing: border-box;
36+
}
2437

25-
& ui5-button {
26-
height: 100%;
27-
}
38+
.sapWCCalHead ui5-button {
39+
height: 100%;
2840
}
2941

3042
.sapWCCalHeadArrowButton {
@@ -33,89 +45,87 @@ ui5-calendar-header {
3345
align-items: center;
3446
width: 2.5rem;
3547
background-color: @sapUiButtonLiteBackground;
36-
border: none;
3748
color: @sapUiButtonTextColor;
3849
cursor: pointer;
3950
overflow: hidden;
4051
white-space: nowrap;
4152
padding: 0;
4253
font-size: @sapMFontMediumSize;
54+
}
4355

44-
&:focus {
45-
outline: none;
46-
}
56+
.sapWCCalHeadArrowButton:focus {
57+
outline: none;
58+
}
4759

48-
&:hover {
49-
background-color: @sapUiButtonHoverBackground;
50-
color: @sapUiButtonHoverTextColor;
51-
}
60+
.sapWCCalHeadArrowButton:hover {
61+
background-color: @sapUiButtonHoverBackground;
62+
color: @sapUiButtonHoverTextColor;
63+
}
5264

53-
&:active {
54-
background-color: @sapUiButtonActiveBackground;
55-
color: @sapUiButtonActiveTextColor;
56-
}
65+
.sapWCCalHeadArrowButton:active {
66+
background-color: @sapUiButtonActiveBackground;
67+
color: @sapUiButtonActiveTextColor;
5768
}
5869

5970
.sapWCCalHeadArrowButton,
6071
.sapWCCalHeadMiddleButton {
61-
border-radius: 0.25rem;
72+
border: @_ui5_calendar_header_arrow_button_border;
73+
border-radius: @_ui5_calendar_header_arrow_button_border_radius;
6274
}
6375

6476
.sapWCCalHeadMidButtonContainer {
6577
display: flex;
6678
justify-content: space-around;
6779
flex: 1;
6880
padding: 0 0.5rem;
81+
}
6982

70-
& .sapWCCalHeadMiddleButton:first-child {
71-
margin-right: 0.5rem;
72-
}
83+
.sapWCCalHeadMidButtonContainer .sapWCCalHeadMiddleButton:first-child {
84+
margin-right: 0.5rem;
7385
}
7486

7587
.sapWCCalHeadMiddleButton {
7688
font-family: @sapUiFontFamily;
77-
flex: 1;
89+
width: @_ui5_calendar_header_middle_button_width;
90+
flex: @_ui5_calendar_header_middle_button_flex;
7891
position: relative;
7992
box-sizing: border-box;
8093
-webkit-user-select: none;
8194
-moz-user-select: none;
8295
-ms-user-select: none;
8396
user-select: none;
97+
}
98+
99+
.sapWCCalHeadMiddleButton:focus {
100+
border: @_ui5_calendar_header_middle_button_focus_border;
101+
border-radius: @_ui5_calendar_header_middle_button_focus_border_radius;
102+
}
103+
104+
.sapWCCalHeadMiddleButton:focus::after {
105+
content: "";
106+
display: @_ui5_calendar_header_middle_button_focus_after_display;
107+
width: @_ui5_calendar_header_middle_button_focus_after_width;
108+
height: @_ui5_calendar_header_middle_button_focus_after_height;
109+
border: 1px dotted @sapUiContentFocusColor;
110+
position: absolute;
111+
top: @_ui5_calendar_header_middle_button_focus_after_top_offset;
112+
left: @_ui5_calendar_header_middle_button_focus_after_left_offset;
113+
}
114+
115+
.sapWCCalHeadMiddleButton:focus:active::after {
116+
border-color: @sapUiContentContrastFocusColor;
117+
}
118+
119+
.sapUiSizeCompact .sapWCCalHead {
120+
height: 2rem;
121+
padding: 0;
122+
}
123+
124+
.sapUiSizeCompact .sapWCCalHeadArrowButton {
125+
width: 2rem;
126+
}
84127

85-
&:focus {
86-
&::after {
87-
content: "";
88-
width: calc(~"100% - 0.25rem");
89-
height: calc(~"100% - 0.25rem");
90-
border: 1px dotted @sapUiContentFocusColor;
91-
position: absolute;
92-
top: 1px;
93-
left: 1px;
94-
}
95-
}
96-
97-
&:focus:active {
98-
&::after {
99-
border-color: @sapUiContentContrastFocusColor;
100-
}
101-
}
102-
}
103-
104-
.sapUiSizeCompact {
105-
106-
& .sapWCCalHead {
107-
height: 2rem;
108-
padding: 0;
109-
}
110-
111-
& .sapWCCalHeadArrowButton {
112-
width: 2rem;
113-
}
114-
}
115-
116-
[dir=rtl] {
117-
.sapWCCalHeadMidButtonContainer .sapWCCalHeadMiddleButton:first-child {
118-
margin-left: 0.5rem;
119-
margin-right: 0;
120-
}
128+
[dir=rtl] .sapWCCalHeadMidButtonContainer .sapWCCalHeadMiddleButton:first-child {
129+
margin-left: 0.5rem;
130+
margin-right: 0;
121131
}

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

Lines changed: 9 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,17 @@
55
@import "../sap_belize/CalendarHeader.less";
66

77
/* ============================= */
8-
/* Global Belize parameters */
8+
/* Global Belize HCB parameters */
99
/* ============================= */
10+
1011
@import "./base.less";
1112
@import "./global.less";
1213

13-
.sapWCCalHeadArrowButton,
14-
.sapWCCalHeadMiddleButton {
15-
border: 1px solid @sapUiButtonBorderColor;
16-
border-radius: 0.375rem;
17-
}
18-
19-
.sapWCCalHeadMiddleButton {
20-
width: 5.75rem;
21-
flex: auto;
22-
}
23-
24-
.sapWCCalHeadMiddleButton:focus {
25-
border-color: transparent;
26-
border-radius: 0px;
27-
border: 0.125rem dotted @sapUiContentFocusColor;
14+
@_ui5_calendar_header_arrow_button_border: 1px solid @sapUiButtonBorderColor;
15+
@_ui5_calendar_header_arrow_button_border_radius: 0.375rem;
2816

29-
&::after {
30-
display: none;
31-
}
32-
}
17+
@_ui5_calendar_header_middle_button_width: 5.75rem;
18+
@_ui5_calendar_header_middle_button_flex: auto;
19+
@_ui5_calendar_header_middle_button_focus_border_radius: 0;
20+
@_ui5_calendar_header_middle_button_focus_border: 0.125rem dotted @sapUiContentFocusColor;
21+
@_ui5_calendar_header_middle_button_focus_after_display: none;

‎packages/main/src/themes/sap_fiori_3/CalendarHeader.less‎

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,13 @@
44
@import "../base/CalendarHeader.less";
55

66
/* ============================= */
7-
/* Global Belize parameters */
7+
/* Global Fiori 3 parameters */
88
/* ============================= */
9+
910
@import "./base.less";
1011
@import "./global.less";
1112

12-
.sapWCCalHeadMiddleButton {
13-
14-
&:focus {
15-
&::after {
16-
content: "";
17-
width: calc(~"100% - 0.375rem");
18-
height: calc(~"100% - 0.375rem");
19-
top: 0.125rem;
20-
left: 0.125rem;
21-
}
22-
}
23-
}
13+
@_ui5_calendar_header_middle_button_focus_after_width: calc(~"100% - 0.375rem");
14+
@_ui5_calendar_header_middle_button_focus_after_height: calc(~"100% - 0.375rem");
15+
@_ui5_calendar_header_middle_button_focus_after_top_offset: 0.125rem;
16+
@_ui5_calendar_header_middle_button_focus_after_left_offset: 0.125rem;

0 commit comments

Comments
 (0)