Center icons in section 2
This commit is contained in:
parent
4fce93b16e
commit
f751734121
@ -42,7 +42,7 @@ $icon-yellow: #fcc958;
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Colored design element: square or circle
|
// Colored design element: square or circle
|
||||||
@mixin add-decorative-shape($color, $shape: 'square', $scale: 1 , $pos: -70px) {
|
@mixin add-decorative-shape($color, $shape: 'square', $scale: 1) {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
&:before {
|
&:before {
|
||||||
@ -50,8 +50,9 @@ $icon-yellow: #fcc958;
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
width: 45px * $scale;
|
width: 45px * $scale;
|
||||||
height: 45px * $scale;
|
height: 45px * $scale;
|
||||||
left: $pos;
|
left: 50%;
|
||||||
top: -20px;
|
top: -7%;
|
||||||
|
margin-left: -14px;
|
||||||
background-color: $color;
|
background-color: $color;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
@if $shape == 'circle' {
|
@if $shape == 'circle' {
|
||||||
@ -165,16 +166,16 @@ section {
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: large;
|
font-size: large;
|
||||||
&:nth-child(1) {
|
&:nth-child(1) {
|
||||||
@include add-decorative-shape($text-green, 'square', 0.7, 105px);
|
@include add-decorative-shape($text-green, 'square', 0.7);
|
||||||
}
|
}
|
||||||
&:nth-child(2) {
|
&:nth-child(2) {
|
||||||
@include add-decorative-shape($icon-red, 'circle', 0.7, 105px);
|
@include add-decorative-shape($icon-red, 'circle', 0.7);
|
||||||
}
|
}
|
||||||
&:nth-child(3) {
|
&:nth-child(3) {
|
||||||
@include add-decorative-shape($chill-orange, 'square', 0.7, 105px);
|
@include add-decorative-shape($chill-orange, 'square', 0.7);
|
||||||
}
|
}
|
||||||
&:nth-child(4) {
|
&:nth-child(4) {
|
||||||
@include add-decorative-shape($icon-yellow, 'circle', 0.7, 105px);
|
@include add-decorative-shape($icon-yellow, 'circle', 0.7);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user