Merged in feat/sw-1493-revised-comparison-block (pull request #1236)
feat(SW-1493): Revised SAS comparison block * Base of new TierDetails for SAS tier comparison * Add backgrounds and content to TierDetails * Implement new cms schema for SasTierComparison * Override gap in jsontohtml styling to 0 * Add animations to comparison details * Redesign again * Update content model to new design * Add border to bottom item in tier match list * Wrap interpolate-size in @supports to be safe * Merge branch 'master' into feat/sw-1493-revised-comparison-block Approved-by: Joakim Jäderberg
This commit is contained in:
Anton Gunnarsson
@@ -1,12 +1,18 @@
|
||||
.comparisonSection {
|
||||
width: 100%;
|
||||
gap: var(--Spacing-x4);
|
||||
gap: var(--Spacing-x6);
|
||||
background-color: var(--Base-Surface-Primary-light-Normal);
|
||||
border-radius: var(--Corner-radius-Large);
|
||||
padding: var(--Spacing-x6) var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x1);
|
||||
margin: 0 auto;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.preamble {
|
||||
@@ -14,59 +20,164 @@
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.comparisonCard {
|
||||
background-color: var(--Base-Surface-Subtle-Normal);
|
||||
padding: var(--Spacing-x4) var(--Spacing-x3);
|
||||
border-radius: var(--Corner-radius-Large);
|
||||
}
|
||||
|
||||
.comparisonContainer {
|
||||
display: flex;
|
||||
gap: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.comparisonBrand {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.comparisonIcon {
|
||||
background-color: var(--Base-Surface-Secondary-light-Normal);
|
||||
border-radius: 50%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: var(--Spacing-x7);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.comparisonIcon {
|
||||
display: none;
|
||||
}
|
||||
.comparisonContainer {
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x4);
|
||||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--Spacing-x-half);
|
||||
}
|
||||
|
||||
.ctaContainer {
|
||||
border-top: 1px solid var(--Base-Border-Subtle);
|
||||
.tierMatchList {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: var(--Spacing-x4);
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.ctaLink {
|
||||
margin-top: var(--Spacing-x4);
|
||||
.tierDetails {
|
||||
overflow: hidden;
|
||||
background-color: var(--Base-Surface-Primary-light-Normal);
|
||||
transition: background-color 200ms;
|
||||
transition-delay: 50ms;
|
||||
border-bottom: 1px solid var(--Base-Border-Subtle);
|
||||
|
||||
&:hover,
|
||||
&[open] {
|
||||
background-color: var(--Base-Surface-Primary-light-Hover);
|
||||
|
||||
.comparisonIcon {
|
||||
background-color: var(--Base-Surface-Primary-light-Normal);
|
||||
}
|
||||
}
|
||||
|
||||
&[open] {
|
||||
.chevron {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
&::details-content {
|
||||
block-size: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&::details-content {
|
||||
block-size: 0;
|
||||
transition:
|
||||
block-size 0.4s,
|
||||
content-visibility 0.4s;
|
||||
transition-behavior: allow-discrete;
|
||||
}
|
||||
}
|
||||
|
||||
.iconWrapper {
|
||||
position: absolute;
|
||||
right: var(--Spacing-x1);
|
||||
}
|
||||
.chevron {
|
||||
transition: transform 200ms;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tierSummary {
|
||||
list-style: none;
|
||||
|
||||
&::marker,
|
||||
&::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.columnHeaders {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
align-items: center;
|
||||
row-gap: var(--Spacing-x2);
|
||||
margin-bottom: var(--Spacing-x2);
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.tierTitles {
|
||||
cursor: pointer;
|
||||
padding: var(--Spacing-x-half);
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
}
|
||||
|
||||
.tierTitle {
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.comparisonIcon {
|
||||
background-color: var(--Base-Surface-Secondary-light-Normal);
|
||||
border-radius: 50%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
transition: background-color 0.3s;
|
||||
transition-delay: 50ms;
|
||||
}
|
||||
|
||||
.tierContent {
|
||||
padding: var(--Spacing-x3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.tierInfo {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.htmlContent {
|
||||
gap: 0;
|
||||
|
||||
& ul {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.columnTitle {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
& > span {
|
||||
position: relative;
|
||||
padding: 0 var(--Spacing-x2);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
bottom: calc(50% - 1px);
|
||||
content: "";
|
||||
display: block;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: var(--Base-Border-Normal);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.tierInfo {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.ctaButton {
|
||||
width: fit-content;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.columnHeaders {
|
||||
column-gap: var(--Spacing-x3);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user