feat(styles): changed static and edit mode

SAP · Oct 1, 2024 · b3479c2 · b3479c2
1 parent e166cdf
commit b3479c2
Showing 1 changed file with 37 additions and 19 deletions.
diff --git a/packages/styles/src/tile.scss b/packages/styles/src/tile.scss
@@ -110,7 +110,7 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
   @include fd-set-height($fd-tile-height);
   @include fd-set-width($fd-tile-width);
 
-  --fdGenericTileLineTileHeight: 2.25rem;
+  --fdGenericTileLineTileHeight: 2rem;
   --fdGenericTileLineTileMaxHeight: 3.25rem;
   --fdGenericTileLineHeight: 1.625rem;
   --fdGenericTileTitleHorizontalSpacing: 0.625rem;
@@ -767,15 +767,23 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
     width: auto;
     padding-block: 0;
     padding-inline: $fd-line-tile-horizontal-padding;
-    box-shadow: none;
-    background: transparent;
+    box-shadow: var(--sapContent_Shadow0);
+    background: var(--sapTile_Background);
+    border-radius: var(--sapTile_BorderCornerRadius);
+    border: var(--sapTile_BorderColor);
+    display: flex;
+    gap: 0.5rem;
 
     @include fd-hover() {
-      box-shadow: none;
+      box-shadow: var(--sapContentShadow2);
+      background: var(--sapTile_Hover_Background);
     }
 
     @include fd-active() {
       box-shadow: none;
+      background: var(--sapTile_Active_Background);
+      outline-offset: -0.125rem;
+      border: 2px solid var(--sapContent_FocusColor);
     }
 
     @include fd-disabled() {
@@ -806,17 +814,23 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
     .#{$block}__title,
     .#{$block}__subtitle {
       font-size: var(--sapFontSize);
+      font-family: var(--sapFontFamily);
       text-shadow: var(--sapContent_TextShadow);
-      color: var(--sapTile_TextColor);
+      color: var(--sapTile_TitleTextColor);
       line-height: var(--fdGenericTileLineHeight);
       min-width: $fd-line-tile-min-width;
     }
 
+    .#{$block}__subtitle {
+      color: var(--sapTile_TextColor);
+      font-size: 0.875rem;
+    }
+
     .#{$block}__title {
       @include fd-ellipsis();
       @include fd-set-margin-right(var(--fdGenericTileTitleHorizontalSpacing));
 
-      color: var(--sapButton_TextColor);
+      color: var(--sapTile_TitleTextColor);
       display: inline;
       -webkit-line-clamp: initial;
     }
@@ -831,26 +845,30 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
       }
 
       .#{$block}__action-close {
-        @include fd-set-height(1.625rem);
-        @include reset-position-absolute();
-        @include fd-flex-center();
-
+        @include fd-set-height(1.375rem);
+        @include fd-set-width(1.375rem);
+        position: relative;
         padding-block: 0;
         padding-inline: 0.25rem;
+        font-size: 0.75rem;
+        border-radius: 50%;
+        background: var(--sapButton_Background);
+        border: 1px solid var(--sapButton_BorderColor);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        top: -0.625rem;
+        right: -0.325rem;
       }
 
       .#{$block}__action-indicator {
         margin-inline: 0;
         margin-block: 0;
-      }
-
-      .#{$block}__action-indicator,
-      .#{$block}__action-close {
-        @include reset-position-absolute();
 
-        @include fd-focus() {
-          @include fd-button-focus(0);
-        }
+        position: relative;
+        height: 1.625rem;
+        width: 1.625rem;
       }
     }
 
@@ -866,4 +884,4 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
       }
     }
   }
-}
+}