Skip to content

Commit

Permalink
fix: add delta theming for Generic Tiles (#2017)
Browse files Browse the repository at this point in the history
  • Loading branch information
@InnaAtanasova
InnaAtanasova committed Jan 14, 2021
1 parent f5ecd37 commit 6b2f75c
Show file tree
Hide file tree
Showing 6 changed files with 116 additions and 23 deletions.
11 changes: 11 additions & 0 deletions src/theming/sap_fiori_3.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,4 +188,15 @@

/* Feed Input */
--fdFeed_Input_Placeholder_Font_Style: italic;

/* Generic Tile */
--fdSlide_Tile_Background_Color: var(--sapBlockLayer_Background);
--fdSlide_Tile_Background_Opacity: 0.85;
--fdSlide_Tile_Indicator_Dot_Size: 0.188rem;
--fdSlide_Tile_Indicator_Ative_Dot_Size: 0.313rem;
--fdSlide_Tile_Indicator_Dot_Spacing: 0.375rem;
--fdSlide_Tile_Indicator_Dot_Color: var(--sapTile_TextColor);
--fdSlide_Tile_Indicator_Active_Dot_Color: var(--sapTile_TitleTextColor);
--fdSlide_Tile_Indicator_Dot_Border: none;
--fdSlide_Tile_Indicator_Active_Dot_Border: none;
}
11 changes: 11 additions & 0 deletions src/theming/sap_fiori_3_dark.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,4 +187,15 @@

/* Feed Input */
--fdFeed_Input_Placeholder_Font_Style: italic;

/* Generic Tile */
--fdSlide_Tile_Background_Color: var(--sapBlockLayer_Background);
--fdSlide_Tile_Background_Opacity: 0.85;
--fdSlide_Tile_Indicator_Dot_Size: 0.188rem;
--fdSlide_Tile_Indicator_Ative_Dot_Size: 0.313rem;
--fdSlide_Tile_Indicator_Dot_Spacing: 0.375rem;
--fdSlide_Tile_Indicator_Dot_Color: var(--sapTile_TextColor);
--fdSlide_Tile_Indicator_Active_Dot_Color: var(--sapTile_TitleTextColor);
--fdSlide_Tile_Indicator_Dot_Border: none;
--fdSlide_Tile_Indicator_Active_Dot_Border: none;
}
11 changes: 11 additions & 0 deletions src/theming/sap_fiori_3_hcb.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,4 +187,15 @@

/* Feed Input */
--fdFeed_Input_Placeholder_Font_Style: normal;

/* Generic Tile */
--fdSlide_Tile_Background_Color: var(--sapTile_Background);
--fdSlide_Tile_Background_Opacity: 1;
--fdSlide_Tile_Indicator_Dot_Size: 0.25rem;
--fdSlide_Tile_Indicator_Ative_Dot_Size: 0.25rem;
--fdSlide_Tile_Indicator_Dot_Spacing: 0.188rem;
--fdSlide_Tile_Indicator_Dot_Color: var(--sapTile_Background);
--fdSlide_Tile_Indicator_Active_Dot_Color: var(--sapContent_NonInteractiveIconColor);
--fdSlide_Tile_Indicator_Dot_Border: solid 0.0625rem var(--sapContent_NonInteractiveIconColor);
--fdSlide_Tile_Indicator_Active_Dot_Border: solid 0.0625rem var(--sapContent_NonInteractiveIconColor);
}
11 changes: 11 additions & 0 deletions src/theming/sap_fiori_3_hcw.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,4 +187,15 @@

/* Feed Input */
--fdFeed_Input_Placeholder_Font_Style: normal;

/* Generic Tile */
--fdSlide_Tile_Background_Color: var(--sapTile_Background);
--fdSlide_Tile_Background_Opacity: 1;
--fdSlide_Tile_Indicator_Dot_Size: 0.25rem;
--fdSlide_Tile_Indicator_Ative_Dot_Size: 0.25rem;
--fdSlide_Tile_Indicator_Dot_Spacing: 0.188rem;
--fdSlide_Tile_Indicator_Dot_Color: var(--sapTile_Background);
--fdSlide_Tile_Indicator_Active_Dot_Color: var(--sapContent_NonInteractiveIconColor);
--fdSlide_Tile_Indicator_Dot_Border: solid 0.0625rem var(--sapContent_NonInteractiveIconColor);
--fdSlide_Tile_Indicator_Active_Dot_Border: solid 0.0625rem var(--sapContent_NonInteractiveIconColor);
}
11 changes: 11 additions & 0 deletions src/theming/sap_fiori_3_light_dark.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,4 +187,15 @@

/* Feed Input */
--fdFeed_Input_Placeholder_Font_Style: italic;

/* Generic Tile */
--fdSlide_Tile_Background_Color: var(--sapBlockLayer_Background);
--fdSlide_Tile_Background_Opacity: 0.85;
--fdSlide_Tile_Indicator_Dot_Size: 0.188rem;
--fdSlide_Tile_Indicator_Ative_Dot_Size: 0.313rem;
--fdSlide_Tile_Indicator_Dot_Spacing: 0.375rem;
--fdSlide_Tile_Indicator_Dot_Color: var(--sapTile_TextColor);
--fdSlide_Tile_Indicator_Active_Dot_Color: var(--sapTile_TitleTextColor);
--fdSlide_Tile_Indicator_Dot_Border: none;
--fdSlide_Tile_Indicator_Active_Dot_Border: none;
}
84 changes: 61 additions & 23 deletions src/tile.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@import "./new-settings";
@import "./mixins";
@import "./mixins/button/button-helper";
@import './new-settings';
@import './mixins';
@import './mixins/button/button-helper';

$block: #{$fd-namespace}-tile;

Expand Down Expand Up @@ -30,9 +30,9 @@ $fd-tile-refresh-icon-spacing: 0.5rem !default;
$fd-tile-feed-kpi-spacing: 0.5rem !default;

// INDICATOR DOTS
$fd-tile-indicator-dot-size: 0.188rem !default;
$fd-tile-indicator-dot-active-size: 0.313rem !default;
$fd-tile-indicator-dot-spacing: 0.375rem !default;
$fd-tile-indicator-dot-size: var(--fdSlide_Tile_Indicator_Dot_Size);
$fd-tile-indicator-dot-active-size: var(--fdSlide_Tile_Indicator_Ative_Dot_Size);
$fd-tile-indicator-dot-spacing: var(--fdSlide_Tile_Indicator_Dot_Spacing);

// TOGGLE BUTTON
$fd-tile-toggle-button-position: -0.0625rem !default;
Expand Down Expand Up @@ -458,12 +458,12 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
font-size: 1rem;
color: var(--sapButton_Emphasized_TextColor);
text-shadow: var(--sapButton_Emphasized_TextShadow);
content: "\e14b";
content: '\e14b';
}

&--pause {
&::before {
content: "\e14c";
content: '\e14c';
}
}

Expand Down Expand Up @@ -495,22 +495,27 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
z-index: 2;
width: 100%;
max-width: 100%;
background-color: var(--sapBlockLayer_Background);
opacity: 0.8;
background-color: var(--fdSlide_Tile_Background_Color);
opacity: var(--fdSlide_Tile_Background_Opacity);
padding-top: $fd-tile-inner-padding;
padding-left: $fd-tile-padding;
padding-right: $fd-tile-padding;
border-bottom-left-radius: $fd-tile-border-radius;
border-bottom-right-radius: $fd-tile-border-radius;
}

.#{$block}__title,
.#{$block}__subtitle,
.#{$block}__footer-text {
color: var(--sapContent_ContrastTextColor); // TO BE CONFIRMED
text-shadow: var(--sapContent_ContrastShadowColor); // TO BE CONFIRMED
.#{$block}__title {
font-size: var(--sapFontSize);
line-height: normal;
color: var(--sapTile_TitleTextColor);
text-shadow: 0 0 0.125rem var(--sapContent_ShadowColor);
}

.#{$block}__footer-text,
.#{$block}__subtitle {
font-size: var(--sapFontSize);
line-height: normal;
color: var(--sapTile_TextColor);
}

.#{$block}__page-indicator {
Expand All @@ -528,8 +533,9 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
@include set-width($fd-tile-indicator-dot-size);

border-radius: 50%;
background-color: var(--sapContent_ContrastTextColor); // TO BE CONFIRMED
box-shadow: 0 0 0.25rem var(--sapContent_ShadowColor);
background-color: var(--fdSlide_Tile_Indicator_Dot_Color);
border: var(--fdSlide_Tile_Indicator_Dot_Border);
box-shadow: 0 0 0.063rem var(--sapContent_ShadowColor);
margin-right: $fd-tile-indicator-dot-spacing;

@include fd-rtl() {
Expand All @@ -541,7 +547,8 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
@include set-height($fd-tile-indicator-dot-active-size);
@include set-width($fd-tile-indicator-dot-active-size);

color: var(--sapContent_ContrastTextColor); // TO BE CONFIRMED
background-color: var(--fdSlide_Tile_Indicator_Active_Dot_Color);
border: var(--fdSlide_Tile_Indicator_Active_Dot_Border);
}

&:last-child {
Expand Down Expand Up @@ -573,7 +580,6 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;

// MODES
&--action {

.#{$block}__action-close,
.#{$block}__action-indicator,
.#{$block}__overlay {
Expand Down Expand Up @@ -735,12 +741,44 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;

.#{$block}--action {
.#{$block}__header {
mask-image: linear-gradient(linear, right top, left top, from(transparent), color-stop(7%, #000000), to(#000000));
-webkit-mask-image: -webkit-gradient(linear, right top, left top, from(transparent), color-stop(7%, #000000), to(#000000));
mask-image:
linear-gradient(
linear,
right top,
left top,
from(transparent),
color-stop(7%, #000000),
to(#000000)
);
-webkit-mask-image:
-webkit-gradient(
linear,
right top,
left top,
from(transparent),
color-stop(7%, #000000),
to(#000000)
);

@include fd-rtl() {
mask-image: linear-gradient(linear, left top, right top, from(transparent), color-stop(7%, #000000), to(#000000));
-webkit-mask-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(7%, #000000), to(#000000));
mask-image:
linear-gradient(
linear,
left top,
right top,
from(transparent),
color-stop(7%, #000000),
to(#000000)
);
-webkit-mask-image:
-webkit-gradient(
linear,
left top,
right top,
from(transparent),
color-stop(7%, #000000),
to(#000000)
);
}
}
}
Expand Down

0 comments on commit 6b2f75c

Please sign in to comment.