Skip to content

Commit

Permalink
feat(styles): input and shellbar delta (#4458)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE:
- `fd-shellbar__search-field-helper` element is required for shellbar search field
  • Loading branch information
@N1XUS
N1XUS committed Apr 21, 2023
1 parent 4f78af8 commit c7ba163
Show file tree
Hide file tree
Showing 26 changed files with 575 additions and 382 deletions.
1 change: 1 addition & 0 deletions packages/styles/src/input-group.scss
View file
Expand Up @@ -39,6 +39,7 @@ $fd-input-border-radius: var(--sapField_BorderCornerRadius);
text-shadow: var(--fdInputGroup_Text_Shadow);
border: var(--fdInputGroup_Input_Border, none);
color: var(--fdInputGroup_Input_Color, inherit);
box-shadow: none;

&::placeholder {
color: var(--fdInputGroup_Input_Placeholder_Color, var(--sapField_PlaceholderTextColor));
Expand Down
26 changes: 16 additions & 10 deletions packages/styles/src/mixins/_forms.scss
View file
Expand Up @@ -18,7 +18,7 @@ $fd-input-field-height--compact: 1.625rem;
@include fd-ellipsis();

@if $withMinHeight {
@include fd-set-min-height($fd-input-field-height);
@include fd-set-min-height(var(--sapElement_Height));
}

z-index: 1;
Expand All @@ -27,7 +27,7 @@ $fd-input-field-height--compact: 1.625rem;
border-radius: var(--sapField_BorderCornerRadius);
padding: var(--fdInput_Field_Padding, 0 0.625rem);
margin: var(--fdInput_Field_Margin, 0.25rem 0);
box-shadow: none;
box-shadow: var(--sapField_Shadow);
color: var(--sapField_TextColor);
text-shadow: var(--fdInput_Text_Shadow);
background: var(#{$overrideBackgroundProperty}, var(--sapField_BackgroundStyle));
Expand Down Expand Up @@ -89,7 +89,7 @@ $fd-input-field-height--compact: 1.625rem;
}

@mixin fd-input-field-base-compact {
@include fd-set-min-height($fd-input-field-height--compact);
@include fd-set-min-height(var(--sapElement_Compact_Height));

min-width: var(--fdInput_Field_Compact_Min_Width, 2rem);
margin: var(--fdInput_Field_Compact_Margin, 0.1875rem 0);
Expand All @@ -99,7 +99,6 @@ $fd-input-field-height--compact: 1.625rem;

@mixin fd-input-readonly() {
border-color: var(--sapField_ReadOnly_BorderColor);
border-radius: var(--fdInput_ReadOnly_Border_Radius);
background: var(--sapField_ReadOnly_BackgroundStyle);
background-color: var(--sapField_ReadOnly_Background);
}
Expand All @@ -113,7 +112,9 @@ $fd-input-field-height--compact: 1.625rem;
'hoverBackground': var(--fdInput_Success_Background_Color_Hover),
'hoverBorderColor': var(--sapField_SuccessColor),
'hoverBoxShadow': var(--fdInput_Success_Box_Shadow_Hover),
'focusOutlineColor': var(--fdInput_Success_Outline_Color)
'focusOutlineColor': var(--fdInput_Success_Outline_Color),
'boxShadow': var(--sapField_SuccessShadow),
'boxShadowHover': var(--sapField_Hover_SuccessShadow)
),
'error': (
'background': var(--sapField_InvalidBackgroundStyle),
Expand All @@ -122,7 +123,9 @@ $fd-input-field-height--compact: 1.625rem;
'hoverBackground': var(--fdInput_Error_Background_Color_Hover),
'hoverBorderColor': var(--sapField_InvalidColor),
'hoverBoxShadow': var(--fdInput_Error_Box_Shadow_Hover),
'focusOutlineColor': var(--fdInput_Error_Outline_Color)
'focusOutlineColor': var(--fdInput_Error_Outline_Color),
'boxShadow': var(--sapField_InvalidShadow),
'boxShadowHover': var(--sapField_Hover_InvalidShadow)
),
'warning': (
'background': var(--sapField_WarningBackgroundStyle),
Expand All @@ -131,7 +134,9 @@ $fd-input-field-height--compact: 1.625rem;
'hoverBackground': var(--fdInput_Warning_Background_Color_Hover),
'hoverBorderColor': var(--sapField_WarningColor),
'hoverBoxShadow': var(--fdInput_Warning_Box_Shadow_Hover),
'focusOutlineColor': var(--fdInput_Warning_Outline_Color)
'focusOutlineColor': var(--fdInput_Warning_Outline_Color),
'boxShadow': var(--sapField_WarningShadow),
'boxShadowHover': var(--sapField_Hover_WarningShadow)
),
'alert': (
'background': var(--sapField_WarningBackgroundStyle),
Expand All @@ -149,7 +154,9 @@ $fd-input-field-height--compact: 1.625rem;
'hoverBackground': var(--fdInput_Information_Background_Color_Hover),
'hoverBorderColor': var(--sapField_InformationColor),
'hoverBoxShadow': var(--fdInput_Information_Box_Shadow_Hover),
'focusOutlineColor': var(--fdInput_Information_Outline_Color)
'focusOutlineColor': var(--fdInput_Information_Outline_Color),
'boxShadow': var(--sapField_InformationShadow),
'boxShadowHover': var(--sapField_Hover_InformationShadow)
)
);

Expand All @@ -158,6 +165,7 @@ $fd-input-field-height--compact: 1.625rem;
background: map_get($set-props, "background");
background-color: map_get($set-props, "backgroundColor");
border: map_get($set-props, "border");
box-shadow: map_get($set-props, "boxShadow");

@include fd-hover() {
background-color: map_get($set-props, "hoverBackground");
Expand Down Expand Up @@ -239,8 +247,6 @@ $fd-input-field-height--compact: 1.625rem;

@include fd-hover() {
@include fd-input-readonly();

box-shadow: none;
}

@include fd-focus() {
Expand Down
2 changes: 1 addition & 1 deletion packages/styles/src/mixins/button/_button-helper.scss
View file
Expand Up @@ -16,7 +16,7 @@ $block-button-toggled: #{$block-button}--toggled;
left: $fd-button-fake-outline-offset;
right: $fd-button-fake-outline-offset;
bottom: $fd-button-fake-outline-offset;
border-radius: calc(var(--sapButton_BorderCornerRadius) - var(--sapContent_FocusWidth));
border-radius: var(--fdButton_Focus_Border_Radius);
}

&.#{$block-button-toggled},
Expand Down
26 changes: 22 additions & 4 deletions packages/styles/src/select.scss
View file
Expand Up @@ -14,10 +14,13 @@ $fd-select-padding-x-compact: 0.5rem;
--fdInput_Group_Button_Text_Color: var(--sapButton_Active_TextColor);
--fdInput_Group_Button_Background: var(--sapField_BackgroundStyle);

// Need content here in case we have background property which may override background-color.
@content;

background-color: $bkgdColor;
border-left-color: $borderLeft;
box-shadow: var(--fdInput_Group_Button_Box_Shadow);
@content;
position: static;
}

@include fd-rtl() {
Expand Down Expand Up @@ -109,6 +112,8 @@ $fd-select-padding-x-compact: 0.5rem;
@include fd-input-field-states();
@include fd-input-group-button-overwrite();

box-shadow: none;

@include fd-flex-center() {
justify-content: space-between;
}
Expand All @@ -121,6 +126,16 @@ $fd-select-padding-x-compact: 0.5rem;
margin: 0;
cursor: pointer;

&::after {
content: "";
position: absolute;
border-radius: var(--sapField_BorderCornerRadius);
box-shadow: var(--sapField_Shadow);
pointer-events: none;

@include fd-set-equal-positions(0);
}

.#{$block}__button {
@include fd-set-margin-left(0.25rem);

Expand All @@ -138,7 +153,9 @@ $fd-select-padding-x-compact: 0.5rem;
}

@include fd-expanded() {
box-shadow: var(--fdInput_Box_Shadow_Hover);
&::after {
box-shadow: var(--fdInput_Box_Shadow_Hover);
}

@include fd-select-button-settings(var(--sapButton_Selected_Background), var(--fdSelect_Expanded_Button_Border_Left_Color)
);
Expand All @@ -148,8 +165,9 @@ $fd-select-padding-x-compact: 0.5rem;
}

@include fd-hover() {
@include fd-select-button-settings(var(--sapButton_Selected_Hover_Background), var(--fdSelect_Expanded_Button_Border_Left_Color_Hover)
);
@include fd-select-button-settings(var(--sapButton_Selected_Hover_Background), var(--fdSelect_Expanded_Button_Border_Left_Color_Hover)) {
background: var(--sapField_Hover_BackgroundStyle);
}
}
}

Expand Down
105 changes: 81 additions & 24 deletions packages/styles/src/shellbar.scss
View file
Expand Up @@ -81,7 +81,7 @@ $block: #{$fd-namespace}-shellbar;
}

.#{$block}__button--menu {
.sap-icon--megamenu {
@include fd-icon-selector() {
margin: 0 !important;
}
}
Expand Down Expand Up @@ -238,26 +238,56 @@ $block: #{$fd-namespace}-shellbar;
--fdInputGroup_Input_Color: var(--fdShellbar_Input_Color);
--fdInputGroup_Input_Placeholder_Color: var(--fdShellbar_Input_Placeholder_Color);
--fdInputGroup_Input_Placeholder_Style: var(--fdShellbar_Input_Placeholder_Style);
--fdInputGroup_Background: transparent;
--fdInputGroup_Background: none;
--fdInputGroup_Background_Color: var(--fdShellbar_Input_Background);
--fdInputGroup_Hover_Background: transparent;
--fdInputGroup_Hover_Background: none;
--fdInput_Group_Button_Box_Shadow: none;
--fdInput_Box_Shadow_Hover: none;

box-shadow: none;
border: var(--fdShellbar_Search_Border);
border-radius: var(--fdShellbar_Input_Border_Radius);
position: relative;
cursor: text;

&-helper {
display: var(--fdShellbar_Helper_Display);

&::before,
&::after {
position: absolute;
content: "";
z-index: 20;
pointer-events: none;
box-shadow: var(--sapField_Shadow);
border-radius: var(--fdShellbar_Input_Border_Radius);

@include fd-set-equal-positions(0);
}

&::after {
box-shadow: var(--fdShellbar_Helper_Bottom_Shadow);
border-radius: 0;
}
}

&-input {
position: relative;

@include fd-set-paddings-x-equal(var(--fdShellbar_Search_Input_X_Padding));

@include fd-hover() {
--fdInputGroup_Hover_Input_Background: var(--fdShellbar_Input_Hover_Background);
--fdInputGroup_Addon_Background: var(--fdShellbar_Search_Container_Hover_Background);
& ~ .#{$block}__search-field-addon {
--fdInputGroup_Addon_Background: var(--fdShellbar_Search_Container_Hover_Background);
}

& ~ .#{$block}__search-field-helper {
&::after {
box-shadow: inset 0 -0.0625rem 0 var(--sapField_Hover_BorderColor);
}
}
}

@include fd-focus() {
Expand Down Expand Up @@ -304,6 +334,9 @@ $block: #{$fd-namespace}-shellbar;
}

.#{$block}__button {
--fdButton_Outline_Offset: 0;
--fdButton_Focus_Border_Radius: var(--fdShellbar_Input_Border_Radius);

height: var(--fdShellbar_Input_Addon_Dimension);
min-width: var(--fdShellbar_Input_Addon_Dimension);
border-radius: var(--fdShellbar_Input_Border_Radius);
Expand Down Expand Up @@ -376,6 +409,10 @@ $block: #{$fd-namespace}-shellbar;

@include fd-set-margin-left(var(--fdShellbar_Search_Category_Offset_Left));

&::after {
box-shadow: none;
}

&::before {
content: "";
position: absolute;
Expand Down Expand Up @@ -416,19 +453,29 @@ $block: #{$fd-namespace}-shellbar;
}

@include fd-hover() {
--sapField_Hover_BorderColor: var(--fdShellbar_Input_Hover_Border_Color);
--fdInput_Box_Shadow_Hover: var(--sapContent_Interaction_Shadow);
--fdInputGroup_Hover_Background_Color: var(--fdShellbar_Search_Container_Hover_Background);

.#{$block}__search-field-helper {
&::before {
box-shadow: var(--sapField_Hover_Shadow);
}

&::after {
box-shadow: var(--fdShellbar_Hover_Helper_Bottom_Shadow);
}
}

.#{$block}__search-field {
&-category .#{$block}__search-category {
--fdSelect_Background_Color: var(--fdShellbar_Search_Container_Hover_Background);
--fdSelect_Hover_Background_Color: var(--fdShellbar_Search_Container_Hover_Background);

border-radius: var(--fdShellbar_Input_Border_Radius);
@include fd-hover() {
border-radius: var(--fdShellbar_Input_Border_Radius);

&::before {
display: none;
&::before {
display: none;
}
}
}
}
Expand All @@ -445,15 +492,16 @@ $block: #{$fd-namespace}-shellbar;
box-shadow: var(--fdShellbar_Active_Shadow);
background-color: var(--fdShellbar_Active_Background);

&::before {
position: absolute;
content: "";
outline: var(--fdShellbar_Search_Active_Outline);
outline-offset: -0.125rem;
z-index: 20;
pointer-events: none;
.#{$block}__search-field-helper {
&::before {
outline: var(--fdShellbar_Search_Active_Outline);
outline-offset: -0.125rem;
}

@include fd-set-equal-positions(0);
&::after,
&::before {
box-shadow: none;
}
}

.#{$block}__search-field-addon {
Expand All @@ -464,7 +512,7 @@ $block: #{$fd-namespace}-shellbar;
background-color: var(--fdShellbar_Search_Hover_Background);

&::before {
display: none;
// display: none;
}
}

Expand All @@ -479,26 +527,35 @@ $block: #{$fd-namespace}-shellbar;
.#{$block}__button {
outline-color: var(--fdShellbar_Button_Outline_Color);

--fdButtonColor: var(--sapShell_InteractiveTextColor);
--fdButtonBackgroundColor: var(--sapButton_Lite_Background);
--fdButtonBorderColor: var(--sapButton_Lite_BorderColor);
--fdButtonColor: var(--fdShellbar_Button_Color);

.#{$block}__title {
color: inherit;
}

&:not(&--menu) {
padding: 0;
}

@include fd-hover() {
border-color: var(--fdShellbar_Button_Hover_Border_Color);

--fdButtonBorderColor: var(--fdShellbar_Button_Hover_Border_Color);
--fdButtonBackgroundColor: var(--fdShellbar_Input_Hover_Background);

@include fd-disabled() {
background: $fd-shellbar-background;
--fdButtonBackgroundColor: $fd-shellbar-background;
}
}

@include fd-active() {
border-color: var(--fdShellbar_Button_Active_Border_Color);
background: var(--fdShellbar_Button_Active_Background);
color: var(--fdShellbar_Button_Active_Color);
--fdButtonBorderColor: var(--fdShellbar_Button_Active_Border_Color);
--fdButtonBackgroundColor: var(--fdShellbar_Button_Active_Background);
--fdButtonColor: var(--fdShellbar_Button_Active_Color);

&::after {
display: none;
}
}

&--menu {
Expand Down
1 change: 1 addition & 0 deletions packages/styles/src/step-input.scss
View file
Expand Up @@ -55,6 +55,7 @@ $block: #{$fd-namespace}-step-input;
margin: 0;
padding: 0 0.25rem;
background: none;
box-shadow: none;
background-color: transparent;

@include fd-rtl() {
Expand Down
1 change: 1 addition & 0 deletions packages/styles/src/theming/common/button/_sap_fiori.scss
View file
Expand Up @@ -5,6 +5,7 @@
--fdButton_Outline_Contrast: var(--sapContent_ContrastFocusColor);
--fdButton_Outline_Offset: var(--sapButton_BorderWidth);
--fdButton_Font_Family: var(--sapFontFamily);
--fdButton_Focus_Border_Radius: calc(var(--sapButton_BorderCornerRadius) - var(--sapContent_FocusWidth));

/** Shadows */
--fdButton_Text_Shadow: none;
Expand Down

0 comments on commit c7ba163

Please sign in to comment.