Component Library

C Menu Lenguage 

<div class="c-menu-lenguage ">
    <span class="btn text ">
        <i class="icon fas fa-globe-americas mr-2 d-none"></i> ES <i class="icon fas fa-chevron-down mr-2 "></i>
    </span>
    <div class="wrapper ">
        <ul class="list  pl-0">
            <li class="item ">
                <a href="#" class="btn text ">EN</a>
            </li>
            <li class="item ">
                <a href="#" class="btn text ">FR</a>
            </li>
            <li class="item ">
                <a href="#" class="btn text ">DE</a>
            </li>
        </ul>
    </div>
</div>
 
<div class="c-menu-lenguage {{c_menu_lenguage_class}}">
    <span class="btn text {{c_menu_lenguage_principal_class}}">
        <i class="icon fas fa-globe-americas mr-2 d-none"></i> ES <i class="icon fas fa-chevron-down mr-2 {{c_menu_icon_class}}"></i>
    </span>
    <div class="wrapper {{c_menu_lenguage_wrapper_class}}">
        <ul class="list {{c_menu_lenguage_list_class}} pl-0">
            <li class="item {{ c_menu_lenguage_item_class}}">
                <a href="#" class="btn text {{c_menu_lenguage_btn_class}}">EN</a>
            </li>
            <li class="item {{ c_menu_lenguage_item_class}}">
                <a href="#" class="btn text {{c_menu_lenguage_btn_class}}">FR</a>
            </li>
            <li class="item {{ c_menu_lenguage_item_class}}">
                <a href="#" class="btn text {{c_menu_lenguage_btn_class}}">DE</a>
            </li>
        </ul>
    </div>
</div>
 
/* No context defined. */
  • Content: 
    // menu lenguage component
.c-menu-lenguage {
    @extend %transform_05;
    cursor: pointer;
    @include breakpoint(desktop) { margin-right: 1rem; }
    .wrapper {
        @extend %transform_07;
        top: -50vh;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        @include breakpoint(tablet) {
            width: 100%;
        }
    }
    &:hover {
        .wrapper {
            top: calc(100% - 1px);
            opacity: 1;
        }
        .btn {
            &-solid {
                z-index: 1000;
                &:before {
                    top: 0%;
                }
                .text {
                    color: $color_primary;
                }
            }
        }
    }
}

// .top {
//     &-scroll {
//         .c-menu-lenguage {
//             @include breakpoint(desktop) {
//                 margin-right: 0;
//             }
//         }
//     }
// }
  • URL: /components/raw/c-menu-lenguage/c-menu-lenguage.scss
  • Filesystem Path: src/components/comp/c-menu-lenguage/c-menu-lenguage.scss
  • Size: 917 Bytes

No notes defined.