UCI

Landing header 

<div class="landing-header">
    <div class="row">
        <div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
            <div class="steps-header__head">
                <div class="container">
                    <div class="steps-header__head-wrapper">
                        <div class="row">
                            <div class="col-xs-6 col-ms-6 col-sm-6 col-lg-6">
                                <div class="steps-header__logo">
                                    <a href="#" class="steps-header__logo-link" title="Homepage">
                                        <img class="steps-header__logo-img" src="                                                /dist/images/logo-white.png
                                            " alt="Logotype">
                                    </a>
                                </div>
                            </div>
                            <div class="col-xs-6 center-xs bottom-xs col-ms-6 col-sm-6 col-lg-6">
                                <div class="steps-header__language">
                                    <div class="popup"><!-- ==== La clase fractal es para la previsualización en Fractal. NO INTEGRAR ==== -->
                                        <button class="popup__trigger" type="button">
                                            <svg class="icon icon-     ">
                                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#"></use>
                                            </svg>
                                            Idioma
                                        </button>

                                        <div class="popup__window
                                                popup__window_right
                                            ">
                                            <div class="popup__lang">
                                                <ul class="popup__lang-list">
                                                    <li class="popup__lang-item">
                                                        <a class="popup__lang-link
                                                                        popup__link
                                                                            popup__lang-link_active
                                                                        " href="#">
                                                            ES
                                                        </a>
                                                    </li>
                                                    <li class="popup__lang-item">
                                                        <a class="popup__lang-link
                                                                        popup__link
                                    " href="#">
                                                            EN
                                                        </a>
                                                    </li>
                                                    <li class="popup__lang-item">
                                                        <a class="popup__lang-link
                                                                        popup__link
                                    " href="#">
                                                            PT
                                                        </a>
                                                    </li>
                                                    <li class="popup__lang-item">
                                                        <a class="popup__lang-link
                                                                        popup__link
                                    " href="#">
                                                            CAT
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div {{#if hasID}}id="{{idComponent}}"{{/if}}  class="landing-header">
    <div class="row">
        <div class="col-xs-12 col-ms-12 col-sm-12 col-lg-12">
            <div class="steps-header__head">
                <div class="container">
                    <div class="steps-header__head-wrapper">
                        <div class="row">
                            <div class="col-xs-6 col-ms-6 col-sm-6 col-lg-6">
                                <div class="steps-header__logo">
                                    <a href="{{ logo-href }}" class="steps-header__logo-link" title="{{ logo-link-title }}">
                                        <img
                                            class="steps-header__logo-img"
                                            src="{{#if isHipotecas}}
                                                /dist/images/logo-hipotecas-accent.svg
                                            {{else}}
                                                /dist/images/logo-white.png
                                            {{/if}}"
                                            alt="Logotype">
                                    </a>
                                </div>
                            </div>
                            <div class="col-xs-6 center-xs bottom-xs col-ms-6 col-sm-6 col-lg-6">
                                <div class="steps-header__language">
                                    {{> @popup language-popup }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
{
  "hasID": false,
  "logo-href": "#",
  "logo-link-title": "Homepage",
  "language-popup": {
    "onTheRight": true,
    "trigger": {
      "text": "Idioma"
    },
    "language": [
      {
        "href": "#",
        "isActive": true,
        "text": "ES"
      },
      {
        "href": "#",
        "text": "EN"
      },
      {
        "href": "#",
        "text": "PT"
      },
      {
        "href": "#",
        "text": "CAT"
      }
    ]
  }
}
  • Content: 
    .landing-header {
    overflow-x: clip;
    &__head {
        background-color: var(--color-accent);

        &-wrapper {
            padding: 13px 0 12px;
        }
    }

    &__logo {
        display: flex;

        &-link {
            display: block;
            height: 25px;
            transition: all 0.3s;

            &:hover,
            &:focus {
                opacity: 0.8;
            }
        }

        &-img {
            display: block;
            width: auto;
            max-height: 100%;
        }
    }

    &__language {
        position: relative;

        @media (--viewport-lg-min) {
            margin-right: -26px;
        }

        .popup {
            &__trigger {
                color: var(--color-text-light);

                &:hover,
                &:focus,
                &.active {
                    opacity: 0.6;
                }
            }
        }
    }

    &__body {
        &-wrapper {
            @media (--viewport-xs-max) {
                margin-left: -20px;
                margin-right: -19px;
            }

            @media (--viewport-ms-min) {
                margin-right: -31px;
            }

            @media (--viewport-sm-min) {
                margin-right: -29px;
            }

            @media (--viewport-md-min) {
                margin-right: -32px;
            }

            @media (--viewport-lg-min) {
                margin-right: -50px;
            }
        }
    }

    &__back-link {
        padding: 14px 0;

        @media (--viewport-xs-max) {
            display: none;
        }
    }

    &__steps {
        text-align: right;

        &-list {
            display: inline-flex;

            @media (--viewport-xs-max) {
                display: flex;
            }
        }

        &-item {
            display: flex;
            align-items: center;
            padding: 13px 31px;
            background-color: var(--color-accent-dark);

            &.active {
                padding: 12px 30px;
                background-color: var(--color-quaternary);

                @media (--viewport-xs-max) {
                    flex-grow: 1;
                }

                .steps-header__steps-step {
                    font-family: 'Jornada Sans Book';
                    font-size: 16px;
                    line-height: 26px;
                    color: var(--color-text);
                }
            }

            &:first-child {
                @media (--viewport-xs-max) {
                    padding-right: 20px;
                    padding-left: 20px;
                }
            }
        }

        &-step {
            font-family: 'Jornada Sans Medium';
            font-size: 14px;
            font-weight: normal;
            line-height: 24px;
            letter-spacing: 0;
            color: var(--color-text-light);

            @media (--viewport-sm-only) {
                font-size: 13px;
                line-height: 23px;
            }
        }
    }
}
  • URL: /components/raw/landing-header/landing-header.css
  • Filesystem Path: src/03-organisms/landing-header/landing-header.css
  • Size: 3 KB

No notes defined.