Created
July 21, 2022 17:06
-
-
Save GoodNew5/92bc516471e4ac8c0efec0e5787ee722 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.day-month-dropdown { | |
@include lg { | |
position: relative; | |
width: rem(100px); | |
} | |
} | |
.day-month-dropdown__list { | |
@include lg { | |
position: absolute; | |
top: 100%; | |
left: 0; | |
right: 0; | |
z-index: 1; | |
background: linear-gradient(0deg, rgba(24, 26, 32, 0.8), rgba(24, 26, 32, 0.8)), #05060A; | |
border: rem(1px) var(--INFINITY) solid; | |
border-bottom-left-radius: rem(6px); | |
border-bottom-right-radius: rem(6px); | |
border-top: 0; | |
max-height: rem(384px); | |
overflow: hidden; | |
display: flex; | |
flex-direction: column; | |
} | |
} | |
.day-month-dropdown__btn { | |
@include lg { | |
padding: rem(12px) rem(16px); | |
color: var(--WHITE_TRANSPARENT); | |
font-size: rem(16px); | |
font-weight: 300; | |
border: rem(1px) var(--INFINITY) solid; | |
border-radius: rem(6px); | |
background-color: var(--EIGHT_BALL); | |
width: 100%; | |
.day-month-dropdown--opened & { | |
border-bottom-left-radius: 0; | |
border-bottom-right-radius: 0; | |
border-bottom-color: transparent; | |
} | |
} | |
} | |
.day-month-dropdown__list-item { | |
@include lg { | |
padding: rem(6px) rem(16px); | |
width: 100%; | |
.btn__text { | |
display: block; | |
text-align: left; | |
} | |
} | |
} | |
.day-month-dropdown__icon-arrow { | |
@include lg { | |
margin-left: rem(9px); | |
} | |
.day-month-dropdown--opened & { | |
transform: rotate(180deg); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment