Aeroporto di Bologna - Design System

Orientation: Society 

<div class="c-orientation ">
    <div class="c-orientation__inner">
        <ul class="c-site-areas " aria-hidden="true">
            <li>
                <a href="/components/preview/page-home-travel--default.html" class="is-active">Viaggiare</a>
            </li>

            <li>
                <a href="/components/preview/page-society-home.html">Società</a>
            </li>

            <li>
                <a href="/components/preview/page-investor-home.html">Investor relations</a>
            </li>

            <li>
                <a href="/components/preview/papage-innovability-home.html">Innovability</a>
            </li>

        </ul>
        <div class="c-orientation__utilities">
            <div class="c-languages__dropdown">
                <input type="checkbox" id="checkbox_language_toggle" class="c-languages__switch">
                <label for="checkbox_language_toggle">

                    <svg class="c-icon c-icon--24 chevron--up">
                        <use xlink:href="#ic_arrow_drop_up_black_24px"></use>
                    </svg> <svg class="c-icon c-icon--24 chevron--down">
                        <use xlink:href="#ic_arrow_drop_down_black_24px"></use>
                    </svg>
                    <ul class="c-languages__dropdown-content" aria-label="Seleziona la lingua del sito">
                    </ul>
                </label>
            </div>
        </div>
    </div>
</div>
 
<div class="c-orientation {{ modifier }}">
  <div class="c-orientation__inner">
    {{ render "@site-areas" site-areas merge=true }}
    <div class="c-orientation__utilities">
      {{> @languages--dropdown dropdown-orientation }}
    </div>
  </div>
</div>
 
/* No context defined. */
  • Content: 
    .c-orientation {
  background-color: primary(sky, 20);
  padding: remify(4px) remify(16px);
  display: none;
  font-size: remify(12px);
  @include min-screen(bp(tablet-p)) {
    display: block;
  }

  .c-orientation__inner {
    position: relative;
    max-width: remify(1360px);
    margin: 0 auto;
    @include min-screen(bp(tablet-p)) {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .c-header--chinese & {
    justify-content: flex-end;
  }

  .c-header--emergency & {
    background-color: primary(emergency, 120);
  }
}

.c-orientation__utilities {
  margin-right: 0;
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  .c-menu,
  .c-languages__dropdown,
  .c-orientation__assistance {
    // height: 24px;
    display: inline-block;
  }
  
  .c-orientation__assistance {
    color: primary(night, 120);
    padding: remify(2px) remify(8px);
    text-decoration: none;

    svg {
      width: 20px;
      height: 20px;
      vertical-align: middle;
      background-color: transparent;
      border-radius: remify(4px);
    }

    .prm-icon {
      padding: 0;
    }

    &.is-active {
      background-color: primary(night, 120);
      border-radius: remify(4px);
      color: #fff;

    }
  }
}

.c-orientation__utilities,
.c-orientation__utilities a {
  color: primary(night, 100);

  svg {
    // vertical-align: sub;
    * {
      fill: currentColor;
    }
  }

  & > * {
    padding: 0 remify(10px);
    border-right: remify(1px) solid primary(night, 40);

    &:first-child {
      padding-left: 0;
    }

    &:last-child {
      padding-right: 0;
      border-right: none;
    }
  }
}
  • URL: /components/raw/orientation/_orientation.scss
  • Filesystem Path: src/views/02-molecules/orientation/_orientation.scss
  • Size: 1.7 KB

No notes defined.