yannmoelle/css/line.css

95 lines
1.3 KiB
CSS
Raw Normal View History

2023-05-29 15:45:59 +02:00
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");
$primary: #007EA7;
*, *:before, *:after {
box-sizing: border-box;
}
body {
font-family: "Open Sans", sans-serif;
background-color: #001829;
}
.wrapper {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.steps {
max-width: 300px;
margin: 0 auto;
}
.step {
display: flex;
position: relative;
&:after {
content: "";
position: absolute;
left: 15px;
top: 32px;
height: 0;
width: 2px;
background-color: $primary;
}
.info {
margin: 8px 0 20px;
}
.title {
font-size: 16px;
font-weight: 600;
margin: 0 0 8px;
color: white;
}
.text {
font-size: 12px;
color: rgba(white, 0.7);
padding-bottom: 0;
margin: 0;
}
&:not(:last-child) {
&:after {
height: 75%;
}
}
}
.number {
width: 32px;
height: 32px;
background-color: transparent;
border-radius: 50%;
border: 2px solid $primary;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 15px;
font-weight: 600;
margin-right: 14px;
&.completed {
background-color: $primary;
}
svg {
width: 16px;
height: 16px;
object-fit: contain;
path {
fill: white;
}
}
}