From 1d749f9bf57f385575ea04549d602ba7c36f467d Mon Sep 17 00:00:00 2001 From: Satya Deep Maheshwari Date: Wed, 15 Feb 2023 15:25:13 +0530 Subject: [PATCH] Styling changes for personal loans page --- blocks/columns/columns.css | 7 --- blocks/columns/columns.less | 12 ---- blocks/steps/steps.css | 121 +++++++----------------------------- blocks/steps/steps.less | 72 +++++++++++++++++++++ styles/styles.css | 16 +++-- styles/styles.less | 35 +++++++---- 6 files changed, 129 insertions(+), 134 deletions(-) create mode 100644 blocks/steps/steps.less diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css index b8ce0e7c..d1e6139d 100644 --- a/blocks/columns/columns.css +++ b/blocks/columns/columns.css @@ -41,10 +41,6 @@ box-sizing: border-box; flex-direction: column-reverse; } -.columns.featured-article { - padding: 64px; - margin: auto; -} .calc-example.columns-container { padding-top: 30px; padding-bottom: 30px; @@ -173,7 +169,4 @@ .columns.lazy-river > div:nth-child(odd) { flex-direction: unset; } - .columns.featured-article > div > div { - padding: 60px; - } } diff --git a/blocks/columns/columns.less b/blocks/columns/columns.less index 407b6a01..801abe45 100644 --- a/blocks/columns/columns.less +++ b/blocks/columns/columns.less @@ -56,11 +56,6 @@ autocomment(); } } -.columns.featured-article { - padding: 64px; - margin: auto; -} - .calc-example.columns-container { padding-top: 30px; padding-bottom: 30px; @@ -220,11 +215,4 @@ autocomment(); } } - .columns.featured-article { - >div { - >div { - padding: 60px; - } - } - } } \ No newline at end of file diff --git a/blocks/steps/steps.css b/blocks/steps/steps.css index 1c48baf5..aa21f5d5 100644 --- a/blocks/steps/steps.css +++ b/blocks/steps/steps.css @@ -1,9 +1,9 @@ -main .steps { - max-width: 1228px; - margin: auto; -} - -.steps>ul { +/*! + * This is a autogenerated file. Please don't change the content directly. + * To change the css, change the same named .less file. + * After changing .less file, run 'npm run lessc' from terminal to autogenerate .css file. + */ +.steps > ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); grid-gap: 16px; @@ -13,117 +13,44 @@ main .steps { font-size: var(--body-font-size-xs); text-align: center; } - -.steps.large>ul { - margin-top: 64px; - grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); - text-align: left; -} - -.steps>ul>li>.steps-step { +.steps > ul > li > .steps-step { height: 105.5px; - width: 105.5px; box-sizing: border-box; width: 105.5px; border: 1.5px solid #78be20; - background-color: #fff; border-radius: 50%; display: flex; margin: auto; } - -.steps>ul>li>.steps-step>p { +.steps > ul > li > .steps-step > p { font-size: 20px; line-height: 5; color: #17252e; - font-family: "Nedbank Sans Medium"; font-weight: 500; letter-spacing: -0.2px; text-align: center; margin: auto; } - -.steps>ul>li>.steps-body { +.steps > ul > li > .steps-body { border: 1px solid var(--overlay-background-color); border-radius: 10px; - transition: all 0.5 ease-out; box-shadow: 1px 1px 5px #00000020; - background-color: white; - color: black; - font-size: var(--body-font-size-s); -} - -.steps.no-border>ul>li.steps-body { - border: unset; - border-radius: unset; - transition: none; - box-shadow: unset; -} - -.steps.no-border .steps-image { - text-align: left; -} - -.steps.large>ul>li>.steps-body { - padding: 32px; -} - -.steps>ul>li>.steps-body:hover { - box-shadow: 2px 2px 10px #00000040; - transform: translate(-1px, -1px) -} - - -.steps.muted .steps-body, -.steps.muted .steps-body:hover { - box-shadow: unset; - transform: unset; - text-align: left; -} - -.steps h3 { - font-size: var(--heading-font-size-s); -} - -.steps .steps-body { - margin: 16px; -} - -.steps .steps-body img { - width: 100%; - aspect-ratio: 4 / 3; - object-fit: cover; - border-radius: 8px 8px 0 0; -} - -.steps .steps-body p { - padding: 20px; + color: #17252e; + font-size: 16px; + display: grid; + grid-template-rows: 0.25fr 0.3fr 1fr 0.15fr; + grid-template-areas: "." "a" "b" "."; + margin-top: 50px; + height: 450px; } - -.steps a.button { - color: var(--link-color); - background-color: unset; - padding: 0; - margin: 0; - font-family: var(--heading-font-family); +.steps > ul > li > .steps-body > div:nth-child(1) { + grid-area: a; } - -.steps a.button::after { - margin-left: 8px; - background-position: 0 4px; - content: ''; - display: inline-block; - width: 2em; - height: 1em; - background-repeat: no-repeat; - background-image: url('/icons/arrow.svg'); - transition: margin 0.3s; +.steps > ul > li > .steps-body > div:nth-child(2) { + grid-area: b; } - -.steps a.button:hover::after { - margin-left: 16px; +.steps > ul > li > .steps-body p { + font-size: 16px; + margin: 0 70px; + color: #494f50; } - -.steps .button-container { - margin: 0; -} \ No newline at end of file diff --git a/blocks/steps/steps.less b/blocks/steps/steps.less new file mode 100644 index 00000000..61d18e9f --- /dev/null +++ b/blocks/steps/steps.less @@ -0,0 +1,72 @@ +@plugin '../../less-scripts/autogen-comment-plugin'; +autocomment(); + +@import (reference) '../../styles/variables.less'; + +.steps { + >ul { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); + grid-gap: 16px; + list-style: none; + margin: 0; + padding: 0; + font-size: var(--body-font-size-xs); + text-align: center; + + >li { + >.steps-step { + height: 105.5px; + width: 105.5px; + box-sizing: border-box; + width: 105.5px; + border: 1.5px solid @dotcoza-color-greens-bright; + border-radius: 50%; + display: flex; + margin: auto; + + >p { + font-size: 20px; + line-height: 5; + color: @dotcoza-color-title-grey; + font-weight: 500; + letter-spacing: -0.2px; + text-align: center; + margin: auto; + } + } + + >.steps-body { + border: 1px solid var(--overlay-background-color); + border-radius: 10px; + box-shadow: 1px 1px 5px #00000020; + color: @dotcoza-color-title-grey; + font-size: @font-paragraph-base; + display: grid; + grid-template-rows: 0.25fr 0.3fr 1fr 0.15fr; + grid-template-areas: + "." + "a" + "b" + "."; + + >div:nth-child(1) { + grid-area: a; + } + + >div:nth-child(2) { + grid-area: b; + } + + margin-top: 50px; + height: 450px; + + p { + font-size: @font-paragraph-base; + margin: 0 70px; + color: @dotcoza-color-body-grey; + } + } + } + } +} \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css index e2fab6dc..2ad35e6c 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -76,7 +76,7 @@ h6 { margin-top: 1em; margin-bottom: 0.5em; scroll-margin: calc(var(--nav-height) + 1em); - font-family: var(--strong-font-family); + font-family: var(--heading-font-family); color: var(--heading-text-color); } h1 { @@ -292,18 +292,23 @@ main .section.breadcrumb { box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.08); height: 75px; display: flex; + position: relative; +} +main .section.breadcrumb > .default-content-wrapper { + display: flex; + align-items: center; } -main .section.breadcrumb p { +main .section.breadcrumb > .default-content-wrapper p { font-size: 18px; line-height: 20px; } -main .section.breadcrumb a { +main .section.breadcrumb > .default-content-wrapper a { color: #bbbbbb; } -main .section.breadcrumb a:hover { +main .section.breadcrumb > .default-content-wrapper a:hover { color: #494f50; } -main .section.breadcrumb .icon { +main .section.breadcrumb > .default-content-wrapper .icon { vertical-align: middle; padding-right: 5px; } @@ -484,6 +489,7 @@ main .home-banner.section p { main .section.narrow { max-width: 1228px; margin: auto; + padding: 0; } main .section.switchcard { background-color: var(--highlight-background-color); diff --git a/styles/styles.less b/styles/styles.less index 69f9ba44..744a8301 100644 --- a/styles/styles.less +++ b/styles/styles.less @@ -107,7 +107,7 @@ h6 { margin-top: 1em; margin-bottom: 0.5em; scroll-margin: calc(var(--nav-height) + 1em); - font-family: var(--strong-font-family); + font-family: var(--heading-font-family); color: @color_2; } @@ -385,24 +385,32 @@ main { box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.08); height: 75px; display: flex; + position: relative; - p { - font-size: 18px; - line-height: 20px; - } + >.default-content-wrapper { + display: flex; + align-items: center; + + p { + font-size: 18px; + line-height: 20px; + } - a { - color: @main-muted-text-color; + a { + color: @main-muted-text-color; - &:hover { - color: @main-muted-text-color-hover; + &:hover { + color: @main-muted-text-color-hover; + } + } + + .icon { + vertical-align: middle; + padding-right: 5px; } - } - .icon { - vertical-align: middle; - padding-right: 5px; } + } &.steps-container { @@ -640,6 +648,7 @@ main .home-banner.section { &.narrow { max-width: 1228px; margin: auto; + padding: 0; }