created radio components and finished booking section

This commit is contained in:
Yusuf Ipek
2021-05-04 11:12:31 +03:00
parent 29a78aeb3a
commit 616cd6c050
13 changed files with 147 additions and 72 deletions
+47
View File
@@ -14,6 +14,7 @@
border-bottom: 3px solid transparent;
width: 90%;
display: block;
transition: all 0.3s;
&:focus {
outline: none;
@@ -44,4 +45,50 @@
visibility: hidden;
transform: translateY(-4rem);
}
&__radio-group {
width: 50%;
display: inline-block;
}
&__radio-input {
display: none;
}
&__radio-label {
font-size: $default-font-size;
cursor: pointer;
position: relative;
padding-left: 3.4rem;
}
&__radio-button {
height: 3rem;
width: 3rem;
border: $bottom-border-green-thick;
border-radius: 50%;
display: inline-block;
position: absolute;
left: 0;
top: -0.5rem;
&::after {
content: "";
display: block;
height: 1.4rem;
width: 1.4rem;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: $color-primary;
opacity: 0;
transition: opacity 0.2s;
}
}
&__radio-input:checked ~ &__radio-label &__radio-button::after {
opacity: 1;
}
}