diff --git a/app/components/content/checklist_collage_component.html.erb b/app/components/content/checklist_collage_component.html.erb index cd6b4a9e60..ef2a1594ec 100644 --- a/app/components/content/checklist_collage_component.html.erb +++ b/app/components/content/checklist_collage_component.html.erb @@ -2,7 +2,7 @@
<%= link_to(cta[:text], cta[:link], class: "button") if cta.present? %> diff --git a/app/webpacker/styles/blog.scss b/app/webpacker/styles/blog.scss index f99e88afe4..896fa6afbd 100644 --- a/app/webpacker/styles/blog.scss +++ b/app/webpacker/styles/blog.scss @@ -65,6 +65,11 @@ li { background-color: $grey; + margin-bottom: 0; + + &:last-child { + margin-bottom: 0; + } a { display: block; diff --git a/app/webpacker/styles/components/checklist-collage.scss b/app/webpacker/styles/components/checklist-collage.scss index 97eaae65f9..4d5b25a3ac 100644 --- a/app/webpacker/styles/components/checklist-collage.scss +++ b/app/webpacker/styles/components/checklist-collage.scss @@ -17,27 +17,27 @@ ul { position: relative; list-style: none; - padding-left: 2rem; + padding-left: 3.5rem; + margin-top: 0; margin-bottom: 2 * $indent-amount; li { position: relative; - margin: $indent-amount 0; - - &:not(:first-child) { - margin-top: 3.5em; - } - - .fa-check { + margin: 0 0 2em; + + &:before { + content: ""; + background-image: url("../images/icon-tick.svg"); + background-repeat: no-repeat; + background-position: center; + background-size: 40px 40px; + display: block; + width: 30px; + height: 30px; position: absolute; - color: $white; - left: -2rem; - top: 0; - width: 22px; - height: 20px; - background-color: $yellow; - text-align: center; - border-top: 3px solid $yellow; + margin-left: -3.5rem; + border: solid 4px $black; + top: -5px; } } } diff --git a/app/webpacker/styles/header/extra-navigation.scss b/app/webpacker/styles/header/extra-navigation.scss index 7730cb7ea5..389840c663 100644 --- a/app/webpacker/styles/header/extra-navigation.scss +++ b/app/webpacker/styles/header/extra-navigation.scss @@ -25,11 +25,11 @@ &__link a { display: inline-block; - padding: .6em 1em; - line-height: 28px; + padding: .75em 1em; + line-height: 24px; @include mq($until: mobile) { - padding: .6em .8em; + padding: .75em .8em; } .icon { @@ -79,8 +79,8 @@ a { background-color: $pink; margin-left: 1em; - padding: .6em $indent-amount / 2; - line-height: 28px; + padding: .75em; + line-height: 24px; &:hover { background-color: $pink-dark; diff --git a/spec/components/content/checklist_collage_component_spec.rb b/spec/components/content/checklist_collage_component_spec.rb index 769cc9bbde..8f9119f995 100644 --- a/spec/components/content/checklist_collage_component_spec.rb +++ b/spec/components/content/checklist_collage_component_spec.rb @@ -35,7 +35,7 @@ it { is_expected.to have_css("p", text: "content") } it { is_expected.to have_css(".images.images-3") } - it "renders the checlist items" do + it "renders the checklist items" do checklist.each do |item| is_expected.to have_css("ul li", text: item) end