Skip to content

Commit

Permalink
feat(ui5-dialog): set horizon themes parameters (#4925)
Browse files Browse the repository at this point in the history 
* style(ui5-dialog): set horizon themes parameters

* fix focus borders radius

* fix horizon dark theme

* fix footer border

* fix comments
  • Loading branch information
@TeodorTaushanov
TeodorTaushanov committed Mar 22, 2022
1 parent 1b3f354 commit 1f3d212
Show file tree
Hide file tree
Showing 21 changed files with 56 additions and 92 deletions.
26 changes: 20 additions & 6 deletions packages/main/src/themes/Dialog.css
View file
Expand Up @@ -29,18 +29,32 @@
cursor: auto;
}

.ui5-popup-header-root:focus {
outline: var(--_ui5_dialog_outline);
border-radius: var(--_ui5_dialog_header_border_radius);
outline-offset: var(--_ui5_dialog_header_focus_offset);
}

.ui5-popup-root {
display: flex;
flex-direction: column;
max-width: 100vw;
}

.ui5-popup-header-root {
position: relative;
}

.ui5-popup-header-root:focus {
outline: none;
}

.ui5-popup-header-root:focus:after {
content: '';
position: absolute;
left: var(--_ui5_dialog_header_focus_left_offset);
bottom: var(--_ui5_dialog_header_focus_bottom_offset);
right: var(--_ui5_dialog_header_focus_right_offset);
top: var(--_ui5_dialog_header_focus_top_offset);
border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
border-radius: var(--_ui5_dialog_header_border_radius) var(--_ui5_dialog_header_border_radius) 0 0;
pointer-events: none;
}

:host([stretch]) .ui5-popup-content {
width: 100%;
height: 100%;
Expand Down
12 changes: 8 additions & 4 deletions packages/main/src/themes/PopupsCommon.css
View file
Expand Up @@ -3,7 +3,7 @@
position: fixed;
background: var(--sapGroup_ContentBackground);
box-shadow: var(--sapContent_Shadow2);
border-radius: var(--_ui5-popup-border-radius);
border-radius: var(--sapElement_BorderCornerRadius);
min-height: 2rem;
box-sizing: border-box;
}
Expand All @@ -27,21 +27,25 @@
}

.ui5-popup-root .ui5-popup-header-root {
box-shadow: var(--_ui5_popup_header_shadow);
color: var(--sapPageHeader_TextColor);
box-shadow: var(--sapContent_HeaderShadow);
margin-bottom: 0.125rem;
}

.ui5-popup-content {
color: var(--sapTextColor);
}

.ui5-popup-footer-root {
background: var(--sapPageFooter_Background);
border-top: var(--_ui5_popup_footer_border_top);
border-top: 1px solid var(--sapPageFooter_BorderColor);
color: var(--sapPageFooter_TextColor);
}

.ui5-popup-header-root,
.ui5-popup-footer-root,
:host([header-text]) .ui5-popup-header-text {
margin: 0;
color: var(--sapPageHeader_TextColor);
font-size: 1rem;
font-family: "72override", var(--sapFontFamily);
display: flex;
Expand Down
9 changes: 5 additions & 4 deletions packages/main/src/themes/base/Dialog-parameters.css
View file
@@ -1,9 +1,10 @@
:root {
--_ui5_dialog_resize_handle_color: var(--sapButton_Lite_TextColor);
--_ui5_dialog_header_focus_width: 0.0625rem;
--_ui5_dialog_header_focus_offset: -0.1875rem;
--_ui5_dialog_outline: var(--_ui5_dialog_header_focus_width) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
--_ui5_dialog_header_border_radius: 0px;
--_ui5_dialog_resize_handle_right: -0.25rem;
--_ui5_dialog_resize_handle_bottom: -0.0625rem;
--_ui5_dialog_header_focus_bottom_offset: 3px;
--_ui5_dialog_header_focus_top_offset: 2px;
--_ui5_dialog_header_focus_left_offset: 2px;
--_ui5_dialog_header_focus_right_offset: 2px;
--_ui5_dialog_header_border_radius: 0px;
}
3 changes: 0 additions & 3 deletions packages/main/src/themes/base/PopupsCommon-parameters.css
View file
Expand Up @@ -6,8 +6,5 @@
--_ui5_popup_header_footer_padding_m_l: 2rem;
--_ui5_popup_header_footer_padding_xl: 3rem;
--_ui5_popup_viewport_margin: 10px;
--_ui5-popup-border-radius: 0.25rem;
--_ui5_popup_header_shadow: var(--sapContent_Shadow0);
--_ui5_popup_footer_border_top: 1px solid var(--sapPageFooter_BorderColor);
--_ui5_popup_header_footer_font_weight: 400;
}
7 changes: 0 additions & 7 deletions packages/main/src/themes/sap_belize_hcb/Dialog-parameters.css
View file

This file was deleted.

2 changes: 1 addition & 1 deletion packages/main/src/themes/sap_belize_hcb/parameters-bundle.css
View file
Expand Up @@ -12,7 +12,7 @@
@import "../base/ColorPicker-parameters.css";
@import "./DatePicker-parameters.css";
@import "./DayPicker-parameters.css";
@import "./Dialog-parameters.css";
@import "../base/Dialog-parameters.css";
@import "../base/GroupHeaderListItem-parameters.css";
@import "./Input-parameters.css";
@import "./InputIcon-parameters.css";
Expand Down
7 changes: 0 additions & 7 deletions packages/main/src/themes/sap_belize_hcw/Dialog-parameters.css
View file

This file was deleted.

4 changes: 2 additions & 2 deletions packages/main/src/themes/sap_belize_hcw/parameters-bundle.css
View file
Expand Up @@ -12,7 +12,7 @@
@import "../base/ColorPicker-parameters.css";
@import "./DatePicker-parameters.css";
@import "./DayPicker-parameters.css";
@import "./Dialog-parameters.css";
@import "../base/Dialog-parameters.css";
@import "../base/GroupHeaderListItem-parameters.css";
@import "./Input-parameters.css";
@import "./InputIcon-parameters.css";
Expand All @@ -23,7 +23,7 @@
@import "./MessageStrip-parameters.css";
@import "./Panel-parameters.css";
@import "../base/PopupsCommon-parameters.css";
@import "./ProgressIndicator-parameters";
@import "./ProgressIndicator-parameters.css";
@import "./RadioButton-parameters.css";
@import "../base/SegmentedButtton-parameters.css";
@import "./Select-parameters.css";
Expand Down
7 changes: 0 additions & 7 deletions packages/main/src/themes/sap_fiori_3_hcb/Dialog-parameters.css
View file

This file was deleted.

4 changes: 2 additions & 2 deletions packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
View file
Expand Up @@ -12,7 +12,7 @@
@import "../base/ColorPicker-parameters.css";
@import "./DatePicker-parameters.css";
@import "./DayPicker-parameters.css";
@import "./Dialog-parameters.css";
@import "../base/Dialog-parameters.css";
@import "../base/GroupHeaderListItem-parameters.css";
@import "./Input-parameters.css";
@import "./InputIcon-parameters.css";
Expand All @@ -23,7 +23,7 @@
@import "./MessageStrip-parameters.css";
@import "./Panel-parameters.css";
@import "../base/PopupsCommon-parameters.css";
@import "./ProgressIndicator-parameters";
@import "./ProgressIndicator-parameters.css";
@import "./RadioButton-parameters.css";
@import "../base/SegmentedButtton-parameters.css";
@import "./Select-parameters.css";
Expand Down
7 changes: 0 additions & 7 deletions packages/main/src/themes/sap_fiori_3_hcw/Dialog-parameters.css
View file

This file was deleted.

4 changes: 2 additions & 2 deletions packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css
View file
Expand Up @@ -12,7 +12,7 @@
@import "../base/ColorPicker-parameters.css";
@import "./DatePicker-parameters.css";
@import "./DayPicker-parameters.css";
@import "./Dialog-parameters.css";
@import "../base/Dialog-parameters.css";
@import "../base/GroupHeaderListItem-parameters.css";
@import "./Input-parameters.css";
@import "./InputIcon-parameters.css";
Expand All @@ -23,7 +23,7 @@
@import "./MessageStrip-parameters.css";
@import "./Panel-parameters.css";
@import "../base/PopupsCommon-parameters.css";
@import "./ProgressIndicator-parameters";
@import "./ProgressIndicator-parameters.css";
@import "./RadioButton-parameters.css";
@import "../base/SegmentedButtton-parameters.css";
@import "./Select-parameters.css";
Expand Down
12 changes: 6 additions & 6 deletions packages/main/src/themes/sap_horizon/Dialog-parameters.css
View file
@@ -1,11 +1,11 @@
@import "../base/Dialog-parameters.css";

:root {
--_ui5_dialog_header_focus_offset: 0px;
--_ui5_dialog_header_focus_width: 0.125rem;
--_ui5_dialog_header_border_radius: 0.75rem 0.75rem 0 0;
--_ui5_dialog_header_focus_bottom_offset: 2px;
--_ui5_dialog_header_focus_top_offset: 1px;
--_ui5_dialog_header_focus_left_offset: 1px;
--_ui5_dialog_header_focus_right_offset: 1px;
--_ui5_dialog_resize_handle_right: 3px;
--_ui5_dialog_resize_handle_bottom: 3px;
--_ui5_dialog_resize_handle_right: 1px;
--_ui5_dialog_header_focus_offset: -2px;
--_ui5_dialog_header_focus_width: 2px;
--_ui5_dialog_header_border_radius: var(--sapElement_BorderCornerRadius);
}
9 changes: 0 additions & 9 deletions packages/main/src/themes/sap_horizon/PopupsCommon-parameters.css
View file

This file was deleted.

1 change: 0 additions & 1 deletion packages/main/src/themes/sap_horizon/parameters-bundle.css
View file
Expand Up @@ -24,7 +24,6 @@
@import "./MessageStrip-parameters.css";
@import "./Panel-parameters.css";
@import "../base/PopupsCommon-parameters.css";
@import "./PopupsCommon-parameters.css";
@import "./ProgressIndicator-parameters.css";
@import "../base/RadioButton-parameters.css";
@import "./RatingIndicator-parameters.css";
Expand Down
12 changes: 6 additions & 6 deletions packages/main/src/themes/sap_horizon_dark/Dialog-parameters.css
View file
@@ -1,11 +1,11 @@
@import "../base/Dialog-parameters.css";

:root {
--_ui5_dialog_header_focus_offset: 0px;
--_ui5_dialog_header_focus_width: 0.125rem;
--_ui5_dialog_header_border_radius: 0.75rem 0.75rem 0 0;
--_ui5_dialog_header_focus_bottom_offset: 2px;
--_ui5_dialog_header_focus_top_offset: 1px;
--_ui5_dialog_header_focus_left_offset: 1px;
--_ui5_dialog_header_focus_right_offset: 1px;
--_ui5_dialog_resize_handle_right: 3px;
--_ui5_dialog_resize_handle_bottom: 3px;
--_ui5_dialog_resize_handle_right: 1px;
--_ui5_dialog_header_focus_offset: -2px;
--_ui5_dialog_header_focus_width: 2px;
--_ui5_dialog_header_border_radius: var(--sapElement_BorderCornerRadius);
}
10 changes: 0 additions & 10 deletions packages/main/src/themes/sap_horizon_dark/PopupsCommon-parameters.css
View file

This file was deleted.

1 change: 0 additions & 1 deletion packages/main/src/themes/sap_horizon_dark/parameters-bundle.css
View file
Expand Up @@ -24,7 +24,6 @@
@import "./MessageStrip-parameters.css";
@import "./Panel-parameters.css";
@import "../base/PopupsCommon-parameters.css";
@import "./PopupsCommon-parameters.css";
@import "./ProgressIndicator-parameters.css";
@import "../base/RadioButton-parameters.css";
@import "./RatingIndicator-parameters.css";
Expand Down
1 change: 0 additions & 1 deletion packages/main/src/themes/sap_horizon_exp/Popover-parameters.css
View file
@@ -1,5 +1,4 @@
:root {
--_ui5-popover-margin-top: 8px;
--_ui5-popover-margin-bottom: -8px;
--_ui5-popup-border-radius: .5rem;
}
5 changes: 2 additions & 3 deletions packages/main/src/themes/sap_horizon_hcb/Dialog-parameters.css
View file
@@ -1,7 +1,6 @@
@import "../base/Dialog-parameters.css";

:root {
--_ui5_dialog_resize_handle_color: var(--sapContent_IconColor);
--_ui5_dialog_header_focus_width: 0.125rem;
--_ui5_dialog_header_focus_offset: -0.25rem;
--_ui5_dialog_resize_handle_right: 3px;
--_ui5_dialog_resize_handle_bottom: 3px;
}
5 changes: 2 additions & 3 deletions packages/main/src/themes/sap_horizon_hcw/Dialog-parameters.css
View file
@@ -1,7 +1,6 @@
@import "../base/Dialog-parameters.css";

:root {
--_ui5_dialog_resize_handle_color: var(--sapContent_IconColor);
--_ui5_dialog_header_focus_width: 0.125rem;
--_ui5_dialog_header_focus_offset: -0.25rem;
--_ui5_dialog_resize_handle_right: 3px;
--_ui5_dialog_resize_handle_bottom: 3px;
}

0 comments on commit 1f3d212

Please sign in to comment.