diff --git a/src/lib-components/SectionWrapper.vue b/src/lib-components/SectionWrapper.vue index 8b3387424..24fd0b0bb 100644 --- a/src/lib-components/SectionWrapper.vue +++ b/src/lib-components/SectionWrapper.vue @@ -86,91 +86,6 @@ const getId = computed(() => { diff --git a/src/styles/default/_section-wrapper.scss b/src/styles/default/_section-wrapper.scss new file mode 100644 index 000000000..acccd76a6 --- /dev/null +++ b/src/styles/default/_section-wrapper.scss @@ -0,0 +1,87 @@ +.section-wrapper { + >.section-header { + margin-bottom: var(--space-xl); + + >.section-title { + color: var(--color-primary-blue-03); + line-height: 1.2; + margin-bottom: var(--space-m); + } + + .section-summary { + @include step-0; + padding-right: 0; + + :deep(p:not(:last-child)) { + margin-bottom: var(--space-m); + } + + :deep(p:last-child) { + margin: 0; + } + } + } + + &.top-level { + --color-theme: var(--color-white); + + &.theme-gray { + --color-theme: var(--color-secondary-grey-01); + padding: var(--space-2xl) var(--unit-gutter); + + :deep(.byline-group) { + color: var(--color-secondary-grey-05); + } + } + + &.theme-white { + padding: 0 var(--unit-gutter); + margin: var(--space-2xl) auto; + + &.section-banner { + margin-top: 0; + + >:deep(*) { + max-width: $container-xl-banner + px; + } + } + + &.section-no-top-margin { + margin-top: 0; + } + + .section-featured-banner { + max-width: $container-l-cta + px; + } + } + + &.theme-divider { + padding: 0 var(--unit-gutter); + } + + padding: var(--space-2xl) var(--unit-gutter); + margin: 0 auto; + background-color: var(--color-theme); + + // Configure spacing of child components (individual components might override things like max-width) + >:deep(*) { + max-width: #{$container-l-main}px; + padding: 0; + margin-left: auto; + margin-right: auto; + + &.block-call-to-action { + max-width: var(--block-width); + padding: var(--space-2xl); + } + } + + > :first-child:not(.divider-way-finder) { + margin-top: 0; + } + + > :last-child:not(.divider-way-finder) { + margin-bottom: 0; + } + } +} \ No newline at end of file diff --git a/src/styles/ftva/_block-card-with-image.scss b/src/styles/ftva/_block-card-with-image.scss index 5ec25e7cd..aea9e25b8 100644 --- a/src/styles/ftva/_block-card-with-image.scss +++ b/src/styles/ftva/_block-card-with-image.scss @@ -1,6 +1,4 @@ .ftva.block-highlight { - max-width: 350px; - height: 350px; position: relative; border-radius: 12px; @@ -9,13 +7,24 @@ border-radius: 10px 10px 0 0; } - .molecule-no-image { - border-radius: 10px 10px 0 0; + &.is-vertical { + + .image-container { + aspect-ratio: 1.71 / 1; + + .molecule-no-image { + border-radius: 10px 10px 0 0; + aspect-ratio: 1.67 / 1; + height: 100%; + } + } } :deep(.card-meta) { - margin: 25px 10px 0; - padding: 0px 10px 10px 10px; + position: relative; + margin: 0px; + padding: 25px 20px 15px 20px; + height: 191px; .title { @include ftva-card-title-2; @@ -88,4 +97,4 @@ box-shadow: 0 4px 4px rgb(51 51 51 / 0.2); } } -} +} \ No newline at end of file diff --git a/src/styles/ftva/_footer-links.scss b/src/styles/ftva/_footer-links.scss index 10417aead..9223ff243 100644 --- a/src/styles/ftva/_footer-links.scss +++ b/src/styles/ftva/_footer-links.scss @@ -1,5 +1,5 @@ .ftva.footer-links { - --unit-content-width: $ftva-container-max-width; + --unit-content-width: --ftva-container-max-width; background-color: #191919; color: white; diff --git a/src/styles/ftva/_footer-primary.scss b/src/styles/ftva/_footer-primary.scss index 6bc6e98fd..ce7fb8904 100644 --- a/src/styles/ftva/_footer-primary.scss +++ b/src/styles/ftva/_footer-primary.scss @@ -1,5 +1,5 @@ .ftva.footer-primary { - --unit-content-width: $ftva-container-max-width; + --unit-content-width: --ftva-container-max-width; background-color: $navy-blue; border-bottom: 0px; diff --git a/src/styles/ftva/_footer-sock.scss b/src/styles/ftva/_footer-sock.scss index 4c343a4c0..4ba3df13d 100644 --- a/src/styles/ftva/_footer-sock.scss +++ b/src/styles/ftva/_footer-sock.scss @@ -1,5 +1,5 @@ .ftva.footer-sock { - --unit-content-width: $ftva-container-max-width; + --unit-content-width: --ftva-container-max-width; background-color: #191919; .container { diff --git a/src/styles/ftva/_section-teaser-card.scss b/src/styles/ftva/_section-teaser-card.scss index 40a50d040..e9e25046f 100644 --- a/src/styles/ftva/_section-teaser-card.scss +++ b/src/styles/ftva/_section-teaser-card.scss @@ -1,6 +1,6 @@ .ftva.section-teaser-card { flex-wrap: nowrap; - + max-width: 100%; // 100% of the parent container align-items: flex-start; overflow-y: auto; padding-top: 25px; @@ -8,7 +8,7 @@ .card { width: calc((100% / 3) - 22px); - min-width: 298px; + min-width: 280px; margin-bottom: 15px; @media #{$medium} { diff --git a/src/styles/ftva/_section-wrapper.scss b/src/styles/ftva/_section-wrapper.scss new file mode 100644 index 000000000..e6380f4d2 --- /dev/null +++ b/src/styles/ftva/_section-wrapper.scss @@ -0,0 +1,20 @@ +.ftva.section-wrapper { + &.top-level { + &.theme-white { + &.section-banner { + >:deep(*) { + max-width: var(--ftva-container-max-width); + } + } + + .section-featured-banner { + max-width: var(--ftva-container-max-width); + } + } + + // FTVA uses different page max-width + >:deep(*) { + max-width: var(--ftva-container-max-width); + } + } +} \ No newline at end of file diff --git a/src/styles/global.scss b/src/styles/global.scss index 14b036c19..f0a42456b 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -1,4 +1,12 @@ +// Theme specific variables +// use css variables to make it easier to inject vars into storybook. etc +:root { + --ftva-container-max-width: 1160px; + --ftva-off-black: #191919; + --ftva-medium-blue: #41648C; +} + body { font-family: var(--font-primary); } @@ -10,9 +18,6 @@ a { @include animate-normal; } -// Theme specific variables -$ftva-container-max-width: 1160px; - // Animations .underline-hover { position: relative;