diff --git a/assets/scss/00-base/_colors.scss b/assets/scss/00-base/_colors.scss index e8439958f9..0ff996ab65 100644 --- a/assets/scss/00-base/_colors.scss +++ b/assets/scss/00-base/_colors.scss @@ -25,6 +25,7 @@ $c-granite-gray: #535353; $c-overcast-gray: #DCDCDC; $c-platinum-gray: #F2F2F2; $c-atlantic-gray: #707070; +$c-very-light-gray: #CCCCCC; // Error Colors $c-error-red: #CD0D0D; diff --git a/assets/scss/02-molecules/_section-links.scss b/assets/scss/02-molecules/_section-links.scss index e5d6469707..1aa6973b83 100644 --- a/assets/scss/02-molecules/_section-links.scss +++ b/assets/scss/02-molecules/_section-links.scss @@ -24,14 +24,21 @@ &__content { height: 100%; - padding: 15px 20px 0; + padding: 10px 20px 0 10px; @media ($bp-x-small-min) { + padding: 10px 20px 20px 10px; + } + + @media ($bp-small-min) { display: flex; align-items: flex-start; flex-direction: column; flex-wrap: wrap; - padding: 40px 30px 0; + padding: 12px 30px 0; + } + @media ($bp-small-min) { + padding: 20px 30px 0; } } @@ -48,7 +55,7 @@ border-top: 1px solid; display: block; font-size: 1.25rem; - padding: 0 20px 20px 0; + padding: 5px 0; width: 100%; @media ($bp-x-small-max) { @@ -102,11 +109,6 @@ border: none; } - a:hover { - border: none; - opacity: .6; - } - @media ($bp-x-small-max) { align-self: flex-start; @@ -153,7 +155,6 @@ flex-basis: auto; flex-grow: 1; flex-shrink: 1; - padding: 10px 0 30px; width: 100%; @media ($bp-x-small-max) { @@ -161,6 +162,7 @@ .is-open & { display: block; + padding-bottom: 20px; } } } @@ -185,6 +187,7 @@ &__item > .ma__decorative-link { font-size: 1.625rem; line-height: 1.3; + color: $c-primary; } } } @@ -206,25 +209,31 @@ } &__footer { + background-color: $c-overcast-gray; border-top-color: $c-bd-divider; - } - &__title { + &:hover, + &:focus { + background-color: $c-very-light-gray; + } - @media ($bp-x-small-min) { - @include ma-border-decorative($c-highlight,1); + .ma__decorative-link { + padding: 15px 0 15px 30px; } + } + + &__title { &:after { color: $c-primary-alt; } a { - color: inherit; + color: $c-primary; } svg { - fill: rgba($c-font-heading,.5); + fill: rgba($c-primary,.5); } } diff --git a/assets/scss/03-organisms/_sections-three-up.scss b/assets/scss/03-organisms/_sections-three-up.scss index ba9df31e6d..dd43fa4336 100644 --- a/assets/scss/03-organisms/_sections-three-up.scss +++ b/assets/scss/03-organisms/_sections-three-up.scss @@ -13,6 +13,11 @@ $bp-section-3up-large-max: "max-width:950px"; display: flex; align-items: stretch; flex-wrap: wrap; + flex-direction: column; + + @media ($bp-small-min) { + flex-flow: row wrap; + } & > * { @@ -24,7 +29,10 @@ $bp-section-3up-large-max: "max-width:950px"; flex-grow: 0; flex-shrink: 0; flex-basis: auto; - margin-bottom: 30px; + margin-bottom: 80px; + } + @media ($bp-medium-min) { + margin-bottom: 80px; } @media ($bp-small-min) and ($bp-section-3up-large-max) { @@ -33,7 +41,7 @@ $bp-section-3up-large-max: "max-width:950px"; } @media ($bp-section-3up-large-min) { - margin-bottom: 20px; + margin-top: 60px; @include span-columns(4 of 12); @include omega(3n); } diff --git a/changelogs/dp-13100.md b/changelogs/dp-13100.md new file mode 100644 index 0000000000..fd42ec8f84 --- /dev/null +++ b/changelogs/dp-13100.md @@ -0,0 +1,3 @@ +Minor +Added +- (Patternlab) [SectionLinks] DP-13100: Changed topic card heading styles, and footer CTA styles \ No newline at end of file diff --git a/patternlab/backstopjs/reference/regression_page_organization-boards_0_document_0_phone.png b/patternlab/backstopjs/reference/regression_page_organization-boards_0_document_0_phone.png index 770c29a861..8cc41e2a7e 100644 Binary files a/patternlab/backstopjs/reference/regression_page_organization-boards_0_document_0_phone.png and b/patternlab/backstopjs/reference/regression_page_organization-boards_0_document_0_phone.png differ diff --git a/patternlab/backstopjs/reference/regression_page_organization-boards_0_document_1_tablet.png b/patternlab/backstopjs/reference/regression_page_organization-boards_0_document_1_tablet.png index 39919f5aa4..b9c80a11d3 100644 Binary files a/patternlab/backstopjs/reference/regression_page_organization-boards_0_document_1_tablet.png and b/patternlab/backstopjs/reference/regression_page_organization-boards_0_document_1_tablet.png differ diff --git a/patternlab/backstopjs/reference/regression_page_organization-elected-official_0_document_0_phone.png b/patternlab/backstopjs/reference/regression_page_organization-elected-official_0_document_0_phone.png index 4c40f3e0f9..e12952185a 100644 Binary files a/patternlab/backstopjs/reference/regression_page_organization-elected-official_0_document_0_phone.png and b/patternlab/backstopjs/reference/regression_page_organization-elected-official_0_document_0_phone.png differ diff --git a/patternlab/backstopjs/reference/regression_page_organization-elected-official_0_document_1_tablet.png b/patternlab/backstopjs/reference/regression_page_organization-elected-official_0_document_1_tablet.png index f2da4f2355..7fbfb14137 100644 Binary files a/patternlab/backstopjs/reference/regression_page_organization-elected-official_0_document_1_tablet.png and b/patternlab/backstopjs/reference/regression_page_organization-elected-official_0_document_1_tablet.png differ diff --git a/patternlab/backstopjs/reference/regression_page_organization_0_document_0_phone.png b/patternlab/backstopjs/reference/regression_page_organization_0_document_0_phone.png index 88dae09edd..51807f0758 100644 Binary files a/patternlab/backstopjs/reference/regression_page_organization_0_document_0_phone.png and b/patternlab/backstopjs/reference/regression_page_organization_0_document_0_phone.png differ diff --git a/patternlab/backstopjs/reference/regression_page_organization_0_document_1_tablet.png b/patternlab/backstopjs/reference/regression_page_organization_0_document_1_tablet.png index 2609167a7c..aadf0d617a 100644 Binary files a/patternlab/backstopjs/reference/regression_page_organization_0_document_1_tablet.png and b/patternlab/backstopjs/reference/regression_page_organization_0_document_1_tablet.png differ diff --git a/patternlab/backstopjs/reference/regression_page_section-landing_0_document_0_phone.png b/patternlab/backstopjs/reference/regression_page_section-landing_0_document_0_phone.png index e4f7988d18..16293cc9f2 100644 Binary files a/patternlab/backstopjs/reference/regression_page_section-landing_0_document_0_phone.png and b/patternlab/backstopjs/reference/regression_page_section-landing_0_document_0_phone.png differ diff --git a/patternlab/backstopjs/reference/regression_page_section-landing_0_document_1_tablet.png b/patternlab/backstopjs/reference/regression_page_section-landing_0_document_1_tablet.png index 1aa50f0bc7..d709c6a4e0 100644 Binary files a/patternlab/backstopjs/reference/regression_page_section-landing_0_document_1_tablet.png and b/patternlab/backstopjs/reference/regression_page_section-landing_0_document_1_tablet.png differ diff --git a/patternlab/backstopjs/reference/regression_page_topic-your-government_0_document_0_phone.png b/patternlab/backstopjs/reference/regression_page_topic-your-government_0_document_0_phone.png index 213c7f9d6b..dd0d1d6eb9 100644 Binary files a/patternlab/backstopjs/reference/regression_page_topic-your-government_0_document_0_phone.png and b/patternlab/backstopjs/reference/regression_page_topic-your-government_0_document_0_phone.png differ diff --git a/patternlab/backstopjs/reference/regression_page_topic-your-government_0_document_1_tablet.png b/patternlab/backstopjs/reference/regression_page_topic-your-government_0_document_1_tablet.png index cf61ebc56b..782c7bcd45 100644 Binary files a/patternlab/backstopjs/reference/regression_page_topic-your-government_0_document_1_tablet.png and b/patternlab/backstopjs/reference/regression_page_topic-your-government_0_document_1_tablet.png differ diff --git a/patternlab/backstopjs/reference/regression_page_topic_0_document_0_phone.png b/patternlab/backstopjs/reference/regression_page_topic_0_document_0_phone.png index b307ebba23..5146e044e0 100644 Binary files a/patternlab/backstopjs/reference/regression_page_topic_0_document_0_phone.png and b/patternlab/backstopjs/reference/regression_page_topic_0_document_0_phone.png differ diff --git a/patternlab/backstopjs/reference/regression_page_topic_0_document_1_tablet.png b/patternlab/backstopjs/reference/regression_page_topic_0_document_1_tablet.png index 1b350cbfa6..10e1f8d0e0 100644 Binary files a/patternlab/backstopjs/reference/regression_page_topic_0_document_1_tablet.png and b/patternlab/backstopjs/reference/regression_page_topic_0_document_1_tablet.png differ diff --git a/patternlab/styleguide/source/_patterns/02-molecules/section-links.twig b/patternlab/styleguide/source/_patterns/02-molecules/section-links.twig index 2fce87419c..73fcec671c 100644 --- a/patternlab/styleguide/source/_patterns/02-molecules/section-links.twig +++ b/patternlab/styleguide/source/_patterns/02-molecules/section-links.twig @@ -50,7 +50,8 @@ {% endblock %} - {% if sectionLinks.seeAll %} + + {% if sectionLinks.seeAll %}
{% set decorativeLink = { "type": "", @@ -63,5 +64,4 @@
{% endif %} - diff --git a/patternlab/styleguide/source/_patterns/05-pages/topic.json b/patternlab/styleguide/source/_patterns/05-pages/topic.json index 73c73f4d99..5109c3a244 100644 --- a/patternlab/styleguide/source/_patterns/05-pages/topic.json +++ b/patternlab/styleguide/source/_patterns/05-pages/topic.json @@ -85,7 +85,7 @@ ], "seeAll": { "href": "#", - "text": "more", + "text": "More about this service", "info": "learn more about the Recreation Service" } }, @@ -113,7 +113,7 @@ ], "seeAll": { "href": "#", - "text": "more", + "text": "More about this topic", "info": "learn more about Active & Team Sports" } }, @@ -141,8 +141,8 @@ ], "seeAll": { "href": "#", - "text": "more", - "info": "learn more about Nature & Outdooe Activities" + "text": "More about this topic", + "info": "learn more about Nature & Outdoor Activities" } }, { @@ -169,13 +169,13 @@ ], "seeAll": { "href": "#", - "text": "more" + "text": "More about this topic" } } ], "seeAll": { "href": "#", - "text": "more", + "text": "More about this", "info": "learn more about Water Related Activities" } },