Tab bar: Fifth Items

Prototype

HTML
View
Context
Assets
Info
Notes


        
        <div class="tab-bar">
    <div class="tab-bar__content">
        <ul class="tab-bar__list">
            <li>
                <a id="item1" class="tab-bar__list-item tab-bar__list-item--activated" href="" tabindex="0" data-menu-item="tabbar" runat="server">
                    <span class="tab-bar__list-item__ripple"></span>
                    <i class="icons" aria-hidden="true">
                        <svg class="icon icon-16_dashboard     ">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_dashboard"></use>
                        </svg>
                    </i>
                    <span class="tab-bar__list-item__text bodycopy-xs">Item lorem</span>
                </a>
            </li>
            <li>
                <a id="item2" class="tab-bar__list-item " href="" tabindex="-1" data-menu-item="tabbar" runat="server">
                    <span class="tab-bar__list-item__ripple"></span>
                    <i class="icons" aria-hidden="true">
                        <svg class="icon icon-16_dashboard     ">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_dashboard"></use>
                        </svg>
                    </i>
                    <span class="tab-bar__list-item__text bodycopy-xs">Item lorem</span>
                </a>
            </li>
            <li>
                <a id="item3" class="tab-bar__list-item " href="" tabindex="-1" data-menu-item="tabbar" runat="server">
                    <span class="tab-bar__list-item__ripple"></span>
                    <i class="icons" aria-hidden="true">
                        <svg class="icon icon-16_dashboard     ">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_dashboard"></use>
                        </svg>
                    </i>
                    <span class="tab-bar__list-item__text bodycopy-xs">Item lorem</span>
                </a>
            </li>
            <li>
                <a id="more" class="tab-bar__list-item " href="" tabindex="-1" data-menu-item="tabbar" runat="server">
                    <span class="tab-bar__list-item__ripple"></span>
                    <i class="icons" aria-hidden="true">
                        <svg class="icon icon-16_menu-olives     ">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_menu-olives"></use>
                        </svg>
                    </i>
                    <span class="tab-bar__list-item__text bodycopy-xs">Más</span>
                </a>
            </li>
        </ul>
    </div>
</div>
<aside class="drawer drawer--modal">
    <div class="drawer__content">
        <p><span class="bodycopy-M">More options</span>
            <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></p>
        <ul class="drawer__content-list">
            <li>
                <span class="drawer__content-item__title"><span class="title-M
        
        
        ">Tab 4</span>
                    <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></span>
                <ul class="subList">
                    <li>
                        <a class="drawer__content-list-item" href="#">
                            <i class="icons">
                                <svg class="icon icon-16_file-text     ">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_file-text"></use>
                                </svg>
                            </i>
                            <span class="drawer__content-item__subtitle"><span class="bodycopy-M">Notificación 1</span>
                                <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></span>
                            <p class="drawer__content-item__text"><span class="bodycopy-S">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
                                <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></p>
                        </a>
                    </li>
                    <li>
                        <a class="drawer__content-list-item" href="#">
                            <i class="icons">
                                <svg class="icon icon-16_file-text     ">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_file-text"></use>
                                </svg>
                            </i>
                            <span class="drawer__content-item__subtitle"><span class="bodycopy-M">Notificación 2</span>
                                <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></span>
                            <p class="drawer__content-item__text"><span class="bodycopy-S">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
                                <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></p>
                        </a>
                    </li>
                </ul>
            </li>
            <li>
                <span class="drawer__content-item__title"><span class="title-M
        
        
        ">Tab 5</span>
                    <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></span>
                <ul class="subList">
                    <li>
                        <a class="drawer__content-list-item" href="#">
                            <i class="icons">
                                <svg class="icon icon-16_folder     ">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_folder"></use>
                                </svg>
                            </i>
                            <span class="drawer__content-item__subtitle"><span class="bodycopy-M">Categoria 1</span>
                                <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></span>
                            <p class="drawer__content-item__text"><span class="bodycopy-S">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
                                <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></p>
                        </a>
                    </li>
                    <li>
                        <a class="drawer__content-list-item" href="#">
                            <i class="icons">
                                <svg class="icon icon-16_folder     ">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/dist/icons/icons.svg#16_folder"></use>
                                </svg>
                            </i>
                            <span class="drawer__content-item__subtitle"><span class="bodycopy-M">Categoria 2</span>
                                <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></span>
                            <p class="drawer__content-item__text"><span class="bodycopy-S">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
                                <!-- Las variantes por hs son exclusivamente para Fractal. No se migra a Storybook (CA.R.) --></p>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</aside>
<div class="drawer-scrim"></div>


        <div class="tab-bar">
    <div class="tab-bar__content">
        <ul class="tab-bar__list">
            {{#each tabbarItem}}
           <li>
                <a id="{{this.id}}" class="tab-bar__list-item {{state}}" href="" tabindex="{{tabIndex}}" data-menu-item="tabbar" runat="server">
                    <span class="tab-bar__list-item__ripple"></span>
                    <i class="icons" aria-hidden="true">
                        {{> '@icon' this.iconTab}}
                    </i>
                    <span class="tab-bar__list-item__text bodycopy-xs">{{this.text}}</span>
                </a>
            </li>
            {{/each}}
        </ul>
    </div>
</div>
<aside class="drawer drawer--modal">
    <div class="drawer__content">
        <p>{{> @bodycopy bodycopy}}</p>
        <ul class="drawer__content-list">
            {{#each drawerItem}}
            <li>
                <span class="drawer__content-item__title">{{> @title titleTab}}</span>
                <ul class="subList">
                    {{#each subList}}
                    <li>
                        <a class="drawer__content-list-item" href="#">
                            <i class="icons">
                                {{> '@icon' icon}}
                            </i>
                            <span class="drawer__content-item__subtitle">{{> @bodycopy title}}</span>
                            <p class="drawer__content-item__text">{{> @bodycopy text}}</p>
                        </a>
                    </li>
                    {{/each}}
                </ul>
            </li>
            {{/each}}
        </ul>
    </div>
</aside>
<div class="drawer-scrim"></div>


        
            
            {
  "tabbarItem": [
    {
      "id": "item1",
      "text": "Item lorem",
      "state": "tab-bar__list-item--activated",
      "tabIndex": "0",
      "iconTab": {
        "name": "16_dashboard"
      }
    },
    {
      "id": "item2",
      "text": "Item lorem",
      "state": "",
      "tabIndex": "-1",
      "iconTab": {
        "name": "16_dashboard"
      }
    },
    {
      "id": "item3",
      "text": "Item lorem",
      "state": "",
      "tabIndex": "-1",
      "iconTab": {
        "name": "16_dashboard"
      }
    },
    {
      "id": "more",
      "text": "Más",
      "state": "",
      "tabIndex": "-1",
      "iconTab": {
        "name": "16_menu-olives"
      }
    }
  ],
  "bodycopy": {
    "type": "-M",
    "text": "More options"
  },
  "drawerItem": [
    {
      "titleTab": {
        "type": "-M",
        "text": "Tab 4"
      },
      "subList": [
        {
          "href": "#",
          "title": {
            "type": "-M",
            "text": "Notificación 1"
          },
          "icon": {
            "name": "16_file-text"
          },
          "text": {
            "type": "-S",
            "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
          }
        },
        {
          "href": "#",
          "title": {
            "type": "-M",
            "text": "Notificación 2"
          },
          "icon": {
            "name": "16_file-text"
          },
          "text": {
            "type": "-S",
            "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
          }
        }
      ]
    },
    {
      "titleTab": {
        "type": "-M",
        "text": "Tab 5"
      },
      "subList": [
        {
          "href": "#",
          "title": {
            "type": "-M",
            "text": "Categoria 1"
          },
          "icon": {
            "name": "16_folder"
          },
          "text": {
            "type": "-S",
            "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
          }
        },
        {
          "href": "#",
          "title": {
            "type": "-M",
            "text": "Categoria 2"
          },
          "icon": {
            "name": "16_folder"
          },
          "text": {
            "type": "-S",
            "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
          }
        }
      ]
    }
  ]
}

File:

Content:


                                .tab-bar {
    display: none;

    @media only screen and (max-width: 1023px) {
        display: flex;
        position: fixed;
        top: auto;
        bottom: 0;
        height: 60px;
        width: 100%;
        max-width: 100%;
        padding: 0;
        z-index: 5;
        box-shadow: 0px -5px 10px 0px rgba(25,25,25, .05);
        border-right: 0 none transparent;
        background-color: var(--color-white);

        &__content {
            width: 100%;
            max-width: 100%;
            max-height: 100%;
            overflow: hidden;
            overflow-y: overlay;
            height: 100%;

            &::-webkit-scrollbar {
                -webkit-appearance: none;
            }

            &::-webkit-scrollbar:vertical {
                width: 5px;
            }

            &::-webkit-scrollbar-button:increment, ::-webkit-scrollbar-button {
                display: none;
            }

            &::-webkit-scrollbar:horizontal {
                height: 5px;
            }

            &::-webkit-scrollbar-thumb {
                background-color: #f2f2f2;
                border-radius: 20px;
            }

            &::-webkit-scrollbar-track {
                border-radius: 10px;
            }
        }

        &__list {
            width: 100%;
            max-width: 100%;
            flex-flow: nowrap;
            display: flex;
            justify-content: space-around;
            height: 100%;
            column-gap: 10px;

            li {
                justify-content: center;
                flex-flow: nowrap;
                align-items: center;
                display: flex;
            }

            &-item {
                color: var(--color-grey2);
                justify-content: center;
                align-items: center;
                flex-flow: column;
                align-items: center;
                text-decoration: none;
                height: 100%;
                display: flex;
                row-gap: 4px;

                &__text {
                    color: var(--color-secondary);
                }

                .icons {
                    width: 16px;
                    height: 16px;

                    [class^="icon-"], [class*=" icon-"] {
                        fill: var(--color-grey2);
                    }
                }
                :not(.tab-bar__list-item--disabled)&__ripple {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        pointer-events: none;
                }
                &--activated {
                    color:var(--color-accent);
                    .tab-bar__list-item__text {
                        color: var(--color-accent) !important;
                    }
                    .icons {
                        [class^="icon-"], [class*=" icon-"] {
                            fill: var(--color-accent);
                        }
                    }
                }

                &:hover {
                    color: var(--color-accent);
                    .tab-bar__list-item__text {
                        color: var(--color-accent) !important;
                    }
                    .icons {
                        [class^="icon-"], [class*=" icon-"] {
                            fill: var(--color-accent);
                        }
                    }
                }

                &--disabled { /* COMENTO LOS CAMBIOS DE COLOR EN DISABLED YA QUE ES UNA OPCIÓN QUE NO FIGURA EN DS. CA*/
                    /*color: var(--color-grey3);*/
                    pointer-events: none;
                    /*opacity: .7;*/
                    &:hover {
                        /*color: var(--color-grey3);
                        .icons {
                            [class^="icon-"], [class*=" icon-"] {
                                fill: var(--color-grey3);
                            }
                        }*/
                    }
                }
            }
        }
       
    }
}

.drawer{

    &--modal {
        left: 0;
        right: initial;
        display: none;
        position: fixed;
        z-index:4;
        &.drawer--open {
        display: flex;
        }  
    }
    &__content {
        display: flex;
        gap: var(--gutter-md-vertical);
        justify-content: flex-start;
        flex-flow: column;
        align-items: flex-start;
        padding-top: var(--gutter-ms-vertical);
        padding-bottom: calc(var(--gutter-lg-vertical)*2);
        padding-left: var(--gutter-width);
        padding-right: var(--gutter-width);
        max-height: 100vh;
        height: 100%;
        overflow: hidden;
        overflow-y: overlay;
        &::-webkit-scrollbar {
            -webkit-appearance: none;
        }
        &::-webkit-scrollbar:vertical {
            width:5px;
        }
        &::-webkit-scrollbar-button:increment,::-webkit-scrollbar-button {
            display: none;
        } 
        &::-webkit-scrollbar:horizontal {
            height: 5px;
        }
        &::-webkit-scrollbar-thumb {
            background-color: var(--color-gray-light);
            border-radius: 20px;
        }
        &::-webkit-scrollbar-track {
            border-radius: 10px;  
        }
        &-list  {
            gap: var(--gutter-md-vertical);
            .drawer__content-item__title {
                color: var(--color-secondary-brand);
            }
        }
        .subList  {
            gap: var(--half-gutter-ms-vertical);
        }
        &-list, .subList  {
            display: flex;
            justify-content: flex-start;
            flex-flow: column;
            align-items: flex-start;
            &-item, li {
                display: flex;
                gap: var(--half-gutter-ms-vertical);;
                justify-content: flex-start;
                flex-flow: column;
                align-items: flex-start;
                color:var(--color-text-primary);
            }
        }
    }
    &--modal + &-scrim {
        background-color: var(--color-white);
    }
    &-scrim {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 3;
        transition-property: opacity;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    &--open + &-scrim {
        display: block;
    }
    &--animate + &-scrim {
        opacity: 0;
    }
    &--opening + &-scrim {
        transition-duration: 250ms;
        opacity: 1;
    }
    &--closing + &-scrim {
        transition-duration: 200ms;
        opacity: 0;
    }
}

URL: /components/raw/tab-bar/tab-bar.css
Filesystem Path: src/02-molecules/tab-bar/tab-bar.css
Size: 6.7 KB

Handle: @tab-bar--fifth-items
Variants (2): Default , Fifth Items
Preview:
- With layout
- Component only
Filesystem Path: src/02-molecules/tab-bar/tab-bar.hbs
References (3): @icon, @bodycopy, @title

Notes: Tab bar

Tab more items:

The hidden layer with the 4th and other items is activated with the "drawer--open" class at the level of the "drawer--modal" class.

Example:
- Hidden: class="drawer drawer--modal">
- Show: class="drawer drawer--modal drawer--open">