Skip to content

Commit

Permalink
fix: fixed generic tile compact mode (#4537)
Browse files Browse the repository at this point in the history 
* fix: fixed tile compact mode

* chore: run [ci visual]

* fix: fixed variable naming [ci visual]

* fix: fixed incorrect mixin usage [ci visual]

* chore: removed unnecessary scss variables [ci visual]

* chore: mini refactoring [ci visual]
  • Loading branch information
@g-cheishvili
g-cheishvili committed May 19, 2023
1 parent 1b278b0 commit d0a56cb
Showing 1 changed file with 32 additions and 85 deletions.
117 changes: 32 additions & 85 deletions packages/styles/src/tile.scss
View file
Expand Up @@ -42,15 +42,9 @@ $fd-tile-close-button-offset: 0.5rem !default;
$fd-tile-action-indicator-offset: 0.25rem !default;

// LINE TILE
$fd-line-tile-height: 2.25rem !default;
$fd-line-tile-height-compact: 1.625rem !default;
$fd-line-tile-max-height: 3.25rem !default;
$fd-line-tile-max-height-compact: 2.875rem !default;
$fd-line-tile-min-width: 2rem !default;
$fd-line-tile-vertical-spacing: 0.125rem !default;
$fd-line-tile-horizontal-spacing: 1.25rem !default;
$fd-line-tile-title-horizontal-spacing: 0.625rem !default;
$fd-line-tile-title-horizontal-spacing-compact: 0.5rem !default;
$fd-line-tile-horizontal-padding: 0.5rem !default;
$fd-line-tile-action-container-horizontal-spacing: 0.25rem !default;
$fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
Expand Down Expand Up @@ -122,6 +116,18 @@ $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;
--fdGenericTileLineTileMaxHeight: 3.25rem;
--fdGenericTileLineHeight: 1.625rem;
--fdGenericTileTitleHorizontalSpacing: 0.625rem;

@include fd-compact-or-condensed() {
--fdGenericTileLineTileHeight: 1.625rem;
--fdGenericTileLineTileMaxHeight: 2.875rem;
--fdGenericTileLineHeight: 1.4375rem;
--fdGenericTileTitleHorizontalSpacing: 0.5rem;
}

position: relative;
padding: $fd-tile-padding;
background: var(--sapTile_Background);
Expand Down Expand Up @@ -221,18 +227,13 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
&__refresh {
@include fd-icon-element-base() {
@include fd-flex-center();
@include fd-set-margin-right($fd-tile-refresh-icon-spacing);

line-height: normal;
font-size: var(--sapFontSize);
color: var(--sapButton_IconColor);
min-width: 0.875rem;
text-align: center;
margin-right: $fd-tile-refresh-icon-spacing;

@include fd-rtl() {
margin-right: 0;
margin-left: $fd-tile-refresh-icon-spacing;
}
}
}

Expand Down Expand Up @@ -340,29 +341,21 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
width: auto;

&:first-child {
flex: 1;
max-width: 100%;
margin-right: $fd-tile-inner-padding;
@include fd-set-margin-right($fd-tile-inner-padding);

@include fd-flex($direction: column) {
flex: 1;
align-items: flex-start;
justify-content: flex-end;
}

@include fd-rtl() {
margin-left: $fd-tile-inner-padding;
margin-right: 0;
}
max-width: 100%;
}

&:nth-child(2) {
max-width: 10.25rem;
padding-left: $fd-tile-feed-kpi-spacing;
@include fd-set-padding-left($fd-tile-feed-kpi-spacing);

@include fd-rtl() {
padding-right: $fd-tile-feed-kpi-spacing;
padding-left: 0;
}
max-width: 10.25rem;
}
}
}
Expand Down Expand Up @@ -530,18 +523,13 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
@include fd-reset();
@include fd-set-height($fd-tile-indicator-dot-size);
@include fd-set-width($fd-tile-indicator-dot-size);
@include fd-set-margin-right($fd-tile-indicator-dot-spacing);

border-radius: 50%;
background-color: var(--fdSlide_Tile_Indicator_Dot_Color);
border: var(--fdSlide_Tile_Indicator_Dot_Border);
opacity: var(--fdSlide_Tile_Indicator_Dot_Opacity);
box-shadow: var(--fdSlide_Tile_Indicator_Dot_Shadow);
margin-right: $fd-tile-indicator-dot-spacing;

@include fd-rtl() {
margin-right: 0;
margin-left: $fd-tile-indicator-dot-spacing;
}

&--active {
@include fd-set-height($fd-tile-indicator-dot-active-size);
Expand All @@ -559,10 +547,9 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
&.#{$block}--s {
.#{$block}__container {
@include fd-set-height(5.25rem);
@include fd-set-paddings-x-equal($fd-tile-small-padding);

padding-top: 0.1875rem;
padding-right: $fd-tile-small-padding;
padding-left: $fd-tile-small-padding;
}

.#{$block}__title,
Expand All @@ -572,8 +559,7 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
}

.#{$block}__page-indicator {
margin-bottom: 0;
margin-top: 0;
@include fd-set-margins-y-equal(0);
}
}
}
Expand Down Expand Up @@ -716,14 +702,10 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
background-color: var(--sapGroup_ContentBackground);

.#{$block}--line {
flex-wrap: wrap;
margin-right: 0;
margin-left: 0;
max-height: $fd-line-tile-max-height;
@include fd-set-margins-x-equal(0);

&.#{$block}--compact {
max-height: $fd-line-tile-max-height-compact;
}
flex-wrap: wrap;
max-height: var(--fdGenericTileLineTileMaxHeight);
}

.#{$block}--action {
Expand Down Expand Up @@ -782,16 +764,16 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
justify-content: space-between;
}

min-height: $fd-line-tile-height;
max-height: $fd-line-tile-height;
@include fd-set-margin-right($fd-line-tile-horizontal-spacing);
@include fd-set-margins-y-equal($fd-line-tile-vertical-spacing);

min-height: var(--fdGenericTileLineTileHeight);
max-height: var(--fdGenericTileLineTileHeight);
height: 100%;
min-width: $fd-line-tile-min-width;
max-width: 100%;
width: auto;
padding: 0 $fd-line-tile-horizontal-padding;
margin-right: $fd-line-tile-horizontal-spacing;
margin-top: $fd-line-tile-vertical-spacing;
margin-bottom: $fd-line-tile-vertical-spacing;
box-shadow: none;
background: transparent;

Expand All @@ -809,11 +791,6 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
pointer-events: none;
}

@include fd-rtl() {
margin-right: 0;
margin-left: $fd-line-tile-horizontal-spacing;
}

&:last-child {
margin-right: 0;
}
Expand All @@ -837,41 +814,17 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
font-size: var(--sapFontSize);
text-shadow: var(--sapContent_TextShadow);
color: var(--sapTile_TextColor);
line-height: 1.625rem;
line-height: var(--fdGenericTileLineHeight);
min-width: $fd-line-tile-min-width;
}

.#{$block}__title {
@include fd-ellipsis();
@include fd-set-margin-right(var(--fdGenericTileTitleHorizontalSpacing));

margin-right: $fd-line-tile-title-horizontal-spacing;
color: var(--sapButton_TextColor);
display: inline;
-webkit-line-clamp: initial;

@include fd-rtl() {
margin-right: 0;
margin-left: $fd-line-tile-title-horizontal-spacing;
}
}

&.#{$block}--compact {
min-height: $fd-line-tile-height-compact;
max-height: $fd-line-tile-height-compact;

.#{$block}__title,
.#{$block}__subtitle {
line-height: 1.4375rem;
}

.#{$block}__title {
margin-right: $fd-line-tile-title-horizontal-spacing-compact;

@include fd-rtl() {
margin-right: 0;
margin-left: $fd-line-tile-title-horizontal-spacing-compact;
}
}
}

&.#{$block}--action {
Expand All @@ -885,13 +838,7 @@ $fd-line-tile-badge-horizontal-spacing: 0.375rem !default;
.#{$block}__action-container {
@include fd-reset();
@include fd-flex-vertical-center();

margin-left: $fd-line-tile-action-container-horizontal-spacing;

@include fd-rtl() {
margin-left: 0;
margin-right: $fd-line-tile-action-container-horizontal-spacing;
}
@include fd-set-margin-left($fd-line-tile-action-container-horizontal-spacing);
}

.#{$block}__action-close {
Expand Down

0 comments on commit d0a56cb

Please sign in to comment.