refactor: nav, languageswitch

alexanderdavide

06.57.2022 a22e9dfe00ed260f934243a602d7451ff8bae944

 assets/scss/partials/components/_languageswitch.scss

@@ -1,103 +1,71 @@
.languageswitch {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  display: inline-block;
  padding-right: 20px;

  &__label {
    cursor: pointer;
    white-space: nowrap;
  }

  &__list {
    display: none;
    list-style: none;
    label {
      cursor: pointer;
    padding: 0;
    position: relative;

    @include desktop {
      background: $accent;
      border-color: $primary;
      border-radius: 5px;
      box-shadow: $shadow;
      position: absolute;
      top: 40px;
    }

    &-item {
      .dropdown__list {
        display: none;
        position: absolute;
        top: 29px;
        right: -15px;
        background: $accent;
        border-color: $primary;
        padding-left: 0;
        padding-top: 0px;
        z-index: 1;
        border-radius: 5px;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);

        &-item {
          position: relative;
          text-align: left;
          background: transparent;
          padding: 12px;
          z-index: 2;
          color: $primary;
          display: block;
          white-space: nowrap;
        }
      }
    }
  }

  &__picker:checked {
    ~ .dropdown__list {
      display: block;
    }

    ~ .triangle {
      position: absolute;
      top: 15px;
      right: -10px;
      z-index: 10;
      height: 14px;
      overflow: hidden;
      width: 30px;
      background: transparent;
      color: $primary;
      display: block;
      line-height: 1;
      padding: 0.5rem 0.75rem 0.5rem 0;
      text-align: center;
      white-space: nowrap;

      &:after {
        content: '';
        z-index: 20;
        width: 15px;
        transform: rotate(45deg) translateY(0px) translatex(10px);
        height: 15px;
        background: $accent;
        border-radius: 2px 0px 0px 0px;
        border-color: $primary;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
        float: left;
        display: block;
      @include desktop {
        padding: 1.2rem;
      }
    }
  }

  @media screen and (max-width: 960px) {
    .languageswitch {
      &__list {
        padding-right: inherit;
  &__triangle {
    display: none;

        label {
          cursor: pointer;
    &::before {
      content: '';
      background: $accent;
      box-shadow: $shadow;
      border-color: $primary;
      border-radius: 2px 0px 0px 0px;
      box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
      height: 14px;
      bottom: 0px;
      left: calc(50% / 2);
      overflow: hidden;
      position: absolute;
      transform: rotate(45deg) translateY(0px) translatex(10px);
      width: 14px;
    }
  }

  &__picker {
    &:checked {
      ~ .languageswitch {
        &__list {
          display: block;
        }

        .triangle {
          display: none;
        }

        &-item {
          .dropdown__list {
            right: inherit;
            position: relative;
            top: inherit;
            padding-right: 0px;
            background: none;
            border-color: inherit;
            box-shadow: none;
            &-item {
              text-align: center;
              padding: 0.5rem 0.75rem;
              padding-left: initial;
            }
        &__triangle {
          @include desktop {
            display: block;
          }
        }
      }