feat(styles): fixed padding & edit mode

SAP · Sep 12, 2024 · 0240c26 · 0240c26
1 parent 55e514b
commit 0240c26
Showing 1 changed file with 21 additions and 16 deletions.
diff --git a/packages/styles/src/tile.scss b/packages/styles/src/tile.scss
@@ -4,16 +4,6 @@
 @import './mixins';
 @import './mixins/button/button-helper';
 
-$fd-tile-close-button-size: 1.375rem !default; // 22px * 22px
-$fd-tile-close-button-border-radius: 50% !default;
-$fd-tile-close-button-border: var(--sapButton_BorderColor) !default;
-$fd-tile-close-button-background: var(--sapButton_Background) !default;
-$fd-tile-close-button-icon-size: 0.75rem !default; // 12px
-$fd-tile-close-button-icon-color: var(--sapButton_TextColor) !default;
-$fd-tile-close-button-touch-area: 2rem !default; // 32px * 32px
-
-
-
 $block: #{$fd-namespace}-tile;
 
 // SIZES
@@ -777,11 +767,11 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
     width: auto;
     padding-block: 0;
     padding-inline: $fd-line-tile-horizontal-padding;
-    box-shadow: var(--sapContentShadow0);
+    box-shadow: #bcc3ca;
     background: var(--sapTile_Background);
-    padding: 0.5rem;
     border-radius: var(--sapTile_BorderCornerRadius);
     border: var(--sapTile_BorderColor);
+    display: flex;
 
     @include fd-hover() {
       box-shadow: var(--sapContentShadow2);
@@ -830,6 +820,11 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
       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));
@@ -850,11 +845,21 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
 
       .#{$block}__action-close {
         @include fd-set-height(1.375rem);
-        @include reset-position-absolute();
-        @include fd-flex-center();
+        @include fd-set-width(1.375rem);
 
+        position: absolute;
         padding-block: 0;
         padding-inline: 0.25rem;
+        font-size: 0.75rem;
+        border-radius: 50%;
+        background-color: var(--sapButton_Background);
+        border: 1px solid var(--sapButton_BorderColor);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        top: -0.375rem;
+        right: -0.375rem;
       }
 
       .#{$block}__action-indicator {
@@ -864,7 +869,7 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
 
       .#{$block}__action-indicator,
       .#{$block}__action-close {
-        @include reset-position-absolute();
+        position: relative;
 
         @include fd-focus() {
           @include fd-button-focus(0);
@@ -883,5 +888,5 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
         right: 0;
       }
     }
-  }
+  } 
 }