HEX

File: /var/www/tana/frontend/src/assets/style/shared/_theme.scss
// Default theme.
//
// Weight: 1
//
// **Do not copy markup below, used only for rendering purposes.**
//
// Default theme  used throughout the site. Dominant on most pages except "Services" page where "Alternate theme" is being used which is displayed below.
//
// Markup:
// <div>
//   <nav class="navbar">
//     <div class="container-fluid">
//       <div class="navbar-nav__container">
//         <ul class="navbar-nav list list--unstyled">
//           <li class="navbar-nav__item navbar-nav__item--active">
//             <a href="#">About Us</a>
//           </li>
//           <li class="navbar-nav__item">
//             <a href="#services.html">Services</a>
//           </li>
//           <li class="navbar-nav__item">
//             <a href="#know-how.html">Know-how</a>
//           </li>
//           <li class="navbar-nav__item">
//             <a href="#contacts.html">Contacts</a>
//           </li>
//         </ul>
//       </div>
//     </div>
//     <div class="menu-toggle" id="menuToggle">
//       <div class="menu-toggle__lines">
//         <div class="menu-toggle__line1"></div>
//         <div class="menu-toggle__line2"></div>
//         <div class="menu-toggle__line3"></div>
//       </div>
//     </div>
//   </nav>
// </div>
//
//
// Styleguide Themes.theme-default

// Alternate theme (orange).
//
// Weight: 2
//
// **Do not copy markup below, used only for rendering purposes.**
//
// A single class dictates how some elements on the page are styles. `.theme-orange` class should be added on the `<body>` element when certain pages require this alternate styling. "Services" page needs this for now.
//
// **`<div>` element is only used here for presentation, `.theme-orange` should be applied to `<body>` for consistency.**
//
// Markup:
// <div class="theme-orange">
//   <nav class="navbar">
//     <div class="container-fluid">
//       <div class="navbar-nav__container">
//         <ul class="navbar-nav list list--unstyled">
//           <li class="navbar-nav__item navbar-nav__item--active">
//             <a href="#">About Us</a>
//           </li>
//           <li class="navbar-nav__item">
//             <a href="#services.html">Services</a>
//           </li>
//           <li class="navbar-nav__item">
//             <a href="#know-how.html">Know-how</a>
//           </li>
//           <li class="navbar-nav__item">
//             <a href="#contacts.html">Contacts</a>
//           </li>
//         </ul>
//       </div>
//     </div>
//     <div class="menu-toggle" id="menuToggle">
//       <div class="menu-toggle__lines">
//         <div class="menu-toggle__line1"></div>
//         <div class="menu-toggle__line2"></div>
//         <div class="menu-toggle__line3"></div>
//       </div>
//     </div>
//   </nav>
// </div>
//
//
// Styleguide Themes.theme-orange
.theme-orange {
  background-color: $primary-accent-color;

  &:not(.menu-open) {

    .navbar {
      // background-color: $primary-accent-color;

      &-nav {

        &__item {

          opacity: .35;

          @include breakpoint-min($tablet-breakpoint) {
            color: $primary-bg-color;
          }

          &--active {
            opacity: 1;
            color: $secondary-accent-color;
          }

          &:hover {
            opacity: .8;
          }
        }
      }
    }
  }

  .menu-toggle {
    border-color: $secondary-accent-color;

    &__line1,
    &__line2,
    &__line3 {
      background-color: $secondary-accent-color;
    }
  }

  .arrow__circle {
    border-color: $secondary-accent-color;

    &:hover {
      background-color: $secondary-accent-color;

      .arrow__pointer {

        &::after {
          border-color: $primary-accent-color;
        }
      }
    }
  }

  .arrow__pointer {

    &::after {
      border-color: $secondary-accent-color;
    }
  }

  .secondary-page {

    &__header {
      background-color: $primary-accent-color;
    }

    &__content {
      background-color: $primary-bg-color;
    }
  }

  .footer {

    &__copyright {
      color: $primary-bg-color;

      a {
        color: $secondary-accent-color;
      }
    }
  }
}

// Alternate theme (gray).
//
// Weight: 3
//
// **Do not copy markup below, used only for rendering purposes.**
//
// A single class dictates how some elements on the page are styles. `.theme-gray` class should be added on the `<body>` element when certain pages require this alternate styling. "Know-how" page needs this for now.
//
// **`<div>` element is only used here for presentation, `.theme-gray` should be applied to `<body>` for consistency.**
//
// Markup:
// <div class="theme-gray">
//   <nav class="navbar">
//     <div class="container-fluid">
//       <div class="navbar-nav__container">
//         <ul class="navbar-nav list list--unstyled">
//           <li class="navbar-nav__item navbar-nav__item--active">
//             <a href="#">About Us</a>
//           </li>
//           <li class="navbar-nav__item">
//             <a href="#services.html">Services</a>
//           </li>
//           <li class="navbar-nav__item">
//             <a href="#know-how.html">Know-how</a>
//           </li>
//           <li class="navbar-nav__item">
//             <a href="#contacts.html">Contacts</a>
//           </li>
//         </ul>
//       </div>
//     </div>
//     <div class="menu-toggle" id="menuToggle">
//       <div class="menu-toggle__lines">
//         <div class="menu-toggle__line1"></div>
//         <div class="menu-toggle__line2"></div>
//         <div class="menu-toggle__line3"></div>
//       </div>
//     </div>
//   </nav>
// </div>
//
//
// Styleguide Themes.theme-gray
.theme-gray {
  background-color: $secondary-bg-color;

  .secondary-page {

    &__header {
      background-color: $secondary-bg-color;
    }

    &__content {
      background-color: $primary-bg-color;
    }
  }
}