-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: APPS-2882 part 1: increase max-width of sectionTeaserCard & sect…
…ionWrapper for ftva theme (#590) * fix: set ftva max-widths to 1160px * fix: refactor global sass to css vars * fix: responsive behavior to spec * fix: reduce min width --------- Co-authored-by: Jess Divers <[email protected]>
- Loading branch information
1 parent
f8735e0
commit 6f7fd84
Showing
9 changed files
with
138 additions
and
102 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
6f7fd84There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🎉 Published on https://ucla-library-storybook.netlify.app as production
🚀 Deployed on https://66c52243a25ad26ffbe46159--ucla-library-storybook.netlify.app