From 98c6ee85a2e578c560c857c622630bee0f62db18 Mon Sep 17 00:00:00 2001 From: stefanoScalzo <50607147+stefanoScalzo@users.noreply.github.com> Date: Thu, 31 Oct 2019 11:01:10 -0400 Subject: [PATCH] fix: tile theme parameter refactoring (#387) * refactored mixin * refactored tile colors --- src/mixins/_mixins.scss | 2 +- src/tile.scss | 19 ++++++------------- 2 files changed, 7 insertions(+), 14 deletions(-) diff --git a/src/mixins/_mixins.scss b/src/mixins/_mixins.scss index 52f206f5b5..8c26a534cb 100644 --- a/src/mixins/_mixins.scss +++ b/src/mixins/_mixins.scss @@ -296,7 +296,7 @@ &:focus { outline-style: dotted; outline-width: 1px; - outline-color: var(--sapContent_FocusColor); + outline-color: var(--sapLinkColor); } } diff --git a/src/tile.scss b/src/tile.scss index 88ed3442a5..2b5468eee7 100644 --- a/src/tile.scss +++ b/src/tile.scss @@ -13,27 +13,18 @@ $block: #{$fd-namespace}-tile; .#{$block} { // VARS - $fd-tile-color: fd-color("text", 3) !default; - $fd-tile-background-color: fd-color("background", 2) !default; - $fd-tile-title-color: fd-color("text", 1) !default; + color: var(--sapTile_TextColor); + background-color: var(--sapTile_Background); $fd-tile-content-padding: fd-space(4) fd-space("reg") !default; $fd-tile-content-padding-x: fd-space("small") !default; $fd-tile-content-padding-y: fd-space(2) + 2px !default; - $fd-tile-box-shadow: 0 0 5px 0 rgba($fd-tile-color, 0.4) !default; // anim $fd-tile-transition-params: $fd-animation--speed ease-in !default; - --fd-tile-color: var(--fd-color-text-3); - --fd-tile-background-color: var(--fd-color-background-2); - --fd-tile-title-color: var(--fd-color-text-1); - @include fd-reset(); display: flex; - @include fd-var-color("color", $fd-tile-color, --fd-tile-color); - @include fd-var-color("background-color", $fd-tile-background-color, --fd-tile-background-color); - &__text { @include fd-reset(); } @@ -46,7 +37,7 @@ $block: #{$fd-namespace}-tile; transition: box-shadow $fd-tile-transition-params; &:hover { - box-shadow: $fd-tile-box-shadow; + box-shadow: 0 0 5px 0 rgba(var(--sapTile_BorderColor), 0.4); position: relative; z-index: map-get($fd-z-index-levels, "first"); } @@ -92,7 +83,9 @@ $block: #{$fd-namespace}-tile; &__title { @include fd-type("0"); - @include fd-var-color("color", $fd-tile-title-color, --fd-tile-title-color); + + color: var(--sapTile_TitleTextColor); + @include fd-reset-spacing(); }