Last active
June 5, 2020 17:14
-
-
Save peterkracik/7327a28950d1aefd2bbdd895e48bf42a to your computer and use it in GitHub Desktop.
scss 1
This file contains hidden or 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
| .language-select { | |
| position: relative; | |
| text-transform: uppercase; | |
| @include large { | |
| padding: 1em 2em 1em 4em; | |
| margin-left: 2em; | |
| border-left: 1px solid rgba($color-black, 0.1); | |
| } | |
| @include small-medium { | |
| padding: 4rem 0 0; | |
| margin: 0 2rem; | |
| font-size: 1.4rem; | |
| text-align: center; | |
| border-top: 1px solid rgba($color-black, 0.1); | |
| } | |
| } | |
| .language-select__current { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .language-select__current-label { | |
| margin-right: 2rem; | |
| text-transform: none; | |
| @include large { | |
| display: none; | |
| } | |
| &:after { | |
| content: ":"; | |
| } | |
| } | |
| .language-select__current-icon { | |
| margin-left: .8em; | |
| } | |
| .language-select__list { | |
| @include large { | |
| position: absolute; | |
| top: 200%; | |
| left: 50%; | |
| transform: translate(-50%, -5%); | |
| width: 120px; | |
| padding: 1em 2em; | |
| background: $color-white; | |
| box-shadow: 2px 2px 10px 0 rgba($color-black, .05); | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: opacity .3s ease, transform .3s ease, visibility 0s ease .3s; | |
| } | |
| @include small-medium { | |
| margin-top: 4rem; | |
| max-height: 0; | |
| height: auto; | |
| overflow: hidden; | |
| transition: max-height .3s ease; | |
| } | |
| .language-select:hover & { | |
| @include large { | |
| visibility: visible; | |
| opacity: 1; | |
| transform: translate(-50%, 0); | |
| transition: opacity .3s ease, transform .3s ease, visibility 0s ease; | |
| } | |
| } | |
| &.is-open { | |
| @include small-medium { | |
| max-height: 14rem; | |
| } | |
| } | |
| &:before { | |
| @include large { | |
| content: ""; | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| height: 200%; | |
| z-index: -1; | |
| } | |
| } | |
| } | |
| .language-select__item { | |
| margin: 1em 0; | |
| cursor: pointer; | |
| transition: color .3s ease; | |
| color: $color-dark; | |
| &:hover { | |
| color: $color-primary; | |
| } | |
| &:last-child { | |
| @include small-medium { | |
| margin-bottom: 4rem; | |
| } | |
| } | |
| } | |
| .language-select__item-link { | |
| display: block; | |
| text-decoration: none; | |
| color: inherit; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment