LanguageSelect.scss 1.37 KB
Newer Older
Eugen Rochko's avatar
Eugen Rochko committed
1 2 3 4 5
@import './variables.scss';

$transition-in: 100ms linear;
$transition-out: 250ms linear;

Eugen Rochko's avatar
Eugen Rochko committed
6
.dropdown {
Eugen Rochko's avatar
Eugen Rochko committed
7 8 9 10 11 12 13
  position: relative;

  .emoji {
    vertical-align: -0.15em;
    margin-right: 0.1em;
  }

Eugen Rochko's avatar
Eugen Rochko committed
14 15 16 17 18 19 20 21 22 23 24 25
  &__control {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    color: $lighter;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    outline: none;
    padding: 12px 16px;
    transition: color $transition-out;
Eugen Rochko's avatar
Eugen Rochko committed
26

Eugen Rochko's avatar
Eugen Rochko committed
27 28 29 30
    &:hover {
      color: $lightest;
      transition: color $transition-in;
    }
Eugen Rochko's avatar
Eugen Rochko committed
31 32
  }

Eugen Rochko's avatar
Eugen Rochko committed
33 34 35 36 37 38 39 40 41 42 43 44 45
  &__menu {
    background-color: $lightest;
    box-shadow: 0 1px 3px rgba($black, 0.1);
    box-sizing: border-box;
    border-radius: 4px;
    margin-top: -1px;
    max-height: 200px;
    width: 140px;
    overflow-y: auto;
    position: absolute;
    top: 100%;
    z-index: 1000;
    -webkit-overflow-scrolling: touch;
Eugen Rochko's avatar
Eugen Rochko committed
46 47
  }

Eugen Rochko's avatar
Eugen Rochko committed
48 49 50 51 52 53 54 55 56 57
  &__option {
    box-sizing: border-box;
    color: $darkest;
    cursor: pointer;
    display: block;
    padding: 4px 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 14px;
    text-align: left;
Eugen Rochko's avatar
Eugen Rochko committed
58

Eugen Rochko's avatar
Eugen Rochko committed
59 60 61 62
    &:last-child {
      border-bottom-right-radius: 2px;
      border-bottom-left-radius: 2px;
    }
Eugen Rochko's avatar
Eugen Rochko committed
63

Eugen Rochko's avatar
Eugen Rochko committed
64 65 66 67
    &:hover,
    &.active {
      background-color: $lighter;
    }
Eugen Rochko's avatar
Eugen Rochko committed
68 69
  }

Eugen Rochko's avatar
Eugen Rochko committed
70 71 72 73
  &.active {
    .dropdown__control {
      color: $lightest;
    }
Eugen Rochko's avatar
Eugen Rochko committed
74 75
  }
}