dropdown.scss

// * * * Variables * * *
$default-text-hover-color: black;
$default-hover-color: #cde4f5;
$default-text-color: #fff;
$option-padding: 4px 10px;

.dropdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  width: var(--dropdown-width);
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--main-el-border-radius);
  cursor: pointer;
  color: var(--dropdown-default-text-color);
  background: var(--dropdown-background-color);
  user-select: none;
  transition: all 0.7s linear;
  .dropdown-label-container {
    display: flex;
    width: 100%;
    .dropdown-label {
      display: flex;
      justify-content: space-between;
      flex: 1 1 auto;
      align-items: center;
      height: var(--option-height);
      padding: $option-padding;
      .text {
        font-family: "Source Sans Pro", sans-serif;
        font-size: 24px;
      }
      .angle-down {
        display: flex;
        justify-content: center;
        align-items: center;
        border: solid $default-text-color;
        background: transparent;
        border-width: 0 2px 2px 0;
        padding: 4px;
        width: 1px;
        height: 1px;
        margin: -3px 5px 0 0;
        border-color: var(--dropdown-default-text-color);
        transform: rotate(45deg);
        transition: all 0.7s;
      }
      .toggled {
        margin-bottom: -12px;
        transform: rotate(-135deg);
        transition: all 0.7s;
      }
    }
  }

  .options {
    width: 100%;
    .option {
      display: flex;
      align-items: center;
      padding: $option-padding;
      height: 35px;
      font-family: "Source Sans Pro", sans-serif;
      font-size: 18px;
    }
    .option:hover {
      color: $default-text-hover-color;
      background: $default-hover-color;
      transition: all 0.7s;
    }
    .option:last-child {
      border-radius: 0 0 var(--main-el-border-radius)
      var(--main-el-border-radius);
    }
    .option:last-child:hover {
      border-radius: 0 0 var(--main-el-border-radius)
      var(--main-el-border-radius);
    }
  }

  &.disabled {
    cursor: not-allowed;
  }
}
.dropdown.expanded {
  background: var(--dropdown-expanded-color);
  border: var(--dropdown-border);
  transition: all 0.7s linear;
}

// Expand Class - Most important part
.expand {
  overflow: hidden;
  transition-property: height;
  transition-duration: 0.4s; // Durations can be changed without touching JS
  transition-timing-function: cubic-bezier(
                  0.175,
                  0.885,
                  0.32,
                  1.275
  ); // Timing functions also!

  &[aria-expanded="false"] {
    height: 0 !important;
    transition-timing-function: cubic-bezier(
                    0.6,
                    -0.28,
                    0.735,
                    0.045
    ); // Timing function can be different for each direction
  }
}

// Smartphones - Landscape + Portrait
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
}