Skip to content

Commit

Permalink
fix: visual review
Browse files Browse the repository at this point in the history
  • Loading branch information
dauriamarco committed Aug 16, 2024
1 parent 3c4e1a5 commit c9dfef1
Show file tree
Hide file tree
Showing 3 changed files with 8 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
--sbb-flip-card-details-max-height: var(--sbb-flip-card-details-min-height);
--sbb-flip-card-details-transition-delay: var(
--sbb-disable-animation-zero-time,
var(--sbb-animation-duration-6x)
var(--sbb-animation-duration-5x)
);
--sbb-flip-card-details-padding: var(--sbb-spacing-responsive-s);
--sbb-flip-card-details-padding-block-end: calc(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,9 @@
padding-block: var(--sbb-spacing-responsive-s) var(--sbb-spacing-responsive-xs);
margin: 0;
grid-area: 1 / 1 / 2 / 2;
transform: translateY(var(--sbb-flip-card-title-translate-y-hover, #{sbb.px-to-rem-build(0)}));
transition: transform var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x))
var(--sbb-animation-easing);

:host([image-alignment='after']) & {
@include sbb.mq($from: small) {
Expand Down
6 changes: 4 additions & 2 deletions src/elements/flip-card/flip-card/flip-card.scss
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
:host(:hover) {
@include sbb.hover-mq($hover: true) {
--sbb-flip-card-background-color: var(--sbb-color-cloud-alpha-80);
--sbb-flip-card-title-translate-y-hover: #{sbb.px-to-rem-build(-1)};
}
}

Expand Down Expand Up @@ -108,8 +109,8 @@
background-color: var(--sbb-color-midnight);
width: var(--sbb-size-element-xs);
height: var(--sbb-size-element-xs);
border-radius: var(--sbb-size-element-xs);
transition: var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-5x)) ease-out;
border-radius: #{sbb.px-to-rem-build(256)};
transition: var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-3x)) ease-out;

:host([data-flipped]) & {
opacity: 1;
Expand All @@ -118,6 +119,7 @@
width: 100%;
height: 100%;
border-radius: var(--sbb-flip-card-border-radius);
transition-duration: var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-5x));
}
}
}
Expand Down

0 comments on commit c9dfef1

Please sign in to comment.