Skip to content

Commit

Permalink
Styling changes for personal loans page
Browse files Browse the repository at this point in the history
  • Loading branch information
Satya Deep Maheshwari committed Feb 15, 2023
1 parent e9f5a28 commit 1d749f9
Show file tree
Hide file tree
Showing 6 changed files with 129 additions and 134 deletions.
7 changes: 0 additions & 7 deletions blocks/columns/columns.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -173,7 +169,4 @@
.columns.lazy-river > div:nth-child(odd) {
flex-direction: unset;
}
.columns.featured-article > div > div {
padding: 60px;
}
}
12 changes: 0 additions & 12 deletions blocks/columns/columns.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,11 +56,6 @@ autocomment();
}
}

.columns.featured-article {
padding: 64px;
margin: auto;
}

.calc-example.columns-container {
padding-top: 30px;
padding-bottom: 30px;
Expand Down Expand Up @@ -220,11 +215,4 @@ autocomment();
}
}

.columns.featured-article {
>div {
>div {
padding: 60px;
}
}
}
}
121 changes: 24 additions & 97 deletions blocks/steps/steps.css
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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;
}
72 changes: 72 additions & 0 deletions blocks/steps/steps.less
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
}
16 changes: 11 additions & 5 deletions styles/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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);
Expand Down
35 changes: 22 additions & 13 deletions styles/styles.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -640,6 +648,7 @@ main .home-banner.section {
&.narrow {
max-width: 1228px;
margin: auto;
padding: 0;
}


Expand Down

0 comments on commit 1d749f9

Please sign in to comment.