mirror of
https://github.com/yusufipk/natours-react.git
synced 2026-09-12 03:26:10 +00:00
created radio components and finished booking section
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user