src/sass/header.scss - master - outthevoid/frontend_developer_module_4

src/sass/header.scss
168 строк3 KB
darthmorgot
Изменил стили в связи с изменением разметки главного меню в хедере.
16 янв 2024, 13:11
16 янв 2024, 13:116890423
.header {
  border-bottom: 1px solid $golden-sand;
  background: $white;

  &__wrapper {
    display: flex;
    align-items: center;
  }

  &__logo-wrapper {
    margin-right: auto;
  }

  &__logo {
    display: flex;
    padding-top: 0;
    padding-bottom: 7px;

    &:focus {
      outline: 1px solid $golden-sand;
      outline-offset: 2px;
    }
  }

  &__info {
    padding-top: 6px;
  }

  &__image {
    display: block;
    margin-right: 18px;
  }

  &__title {
    display: block;
    color: $hot-toddy;
    letter-spacing: 1.8px;
    text-transform: uppercase;
  }

  &__description {
    display: block;
    margin-top: -1px;
    font-size: 9px;
    font-weight: 300;
    line-height: 13px;
  }

  &__nav {
    display: flex;
    max-width: 700px;
  }
}

.menu-primary-container {
  display: flex;

  .menu {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 25px 0 22px;
    list-style: none;
  }

  .menu-item {
    margin-right: 40px;

    &:last-child {
      margin-top: -1px;
      margin-right: 0;
    }
  }

  .current-menu-item {
    a {
      color: $antique-bronze;
    }
  }

  a {
    cursor: pointer;

    &:hover {
      color: $hot-toddy;
    }

    &:focus {
      outline: 1px solid $golden-sand;
      outline-offset: 2px;
    }
  }

  .menu-item-has-children {
    position: relative;
    background-image: url("Images/icon-arrow-down.svg");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 13px 9px;
  }

  .menu-item-has-children > a {
    padding-right: 18px;
  }

  .menu-item-has-children:hover .sub-menu,
  .menu-item-has-children:focus-within .sub-menu {
    display: block;
  }

  .sub-menu {
    display: none;
    position: absolute;
    min-width: 200px;
    margin: 0;
    padding: 29px 16px 30px 16px;
    list-style: none;
    background: $white;
    box-shadow: 0 4px 8px 0 rgba(97, 97, 97, 0.18), 0 2px 4px 0 rgba(97, 97, 97, 0.18);

    li {
      margin-bottom: 21px;

      &:nth-child(2) {
        margin-bottom: 22px;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }

    a {
      line-height: normal;

      &:hover {
        color: $hot-toddy;
      }

      &:focus {
        outline: 1px solid $golden-sand;
        outline-offset: 2px;
      }
    }
  }

  .menu-item-feedback {
    a {
      padding: 8px 22px 8px 22px;
      border-radius: 8px;
      border: 1px solid $hot-toddy;
      text-align: center;

      &:hover {
        background: $quarter-pearl-lusta;
      }

      &:active {
        background: $early-dawn;
      }

      &:focus {
        outline: 1px solid $golden-sand;
        outline-offset: 2px;
      }
    }
  }
}