/* * https://github.com/morethanwords/tweb * Copyright (C) 2019-2021 Eduard Kuzmenko * https://github.com/morethanwords/tweb/blob/master/LICENSE */ .menu-horizontal-scrollable { --scrollable-size: 3.5rem; height: var(--scrollable-size); &:after { content: " "; position: absolute; height: 1px; border-bottom: 1px solid var(--border-color); bottom: 0; left: 0; right: 0; z-index: -1; } .menu-horizontal-div { border-bottom: none; } } .menu-horizontal-div { --size: var(--scrollable-size, 3.5rem); --padding-horizontal: 0px; width: 100%; height: var(--size); display: flex; justify-content: space-around; flex-direction: row; position: relative; z-index: 2; user-select: none; color: var(--secondary-text-color); border-bottom: 1px solid var(--border-color); &:not(.no-stripe) { &:before, &:after { content: " "; width: var(--padding-horizontal); flex: 0 0 auto; } .menu-horizontal-div-item { border-radius: $border-radius-medium; } } &-item { height: 100%; padding: 0 1rem; cursor: pointer; text-align: center; flex: 1 1 auto; font-size: 1rem; font-weight: 500; position: relative; transition: none !important; display: flex; align-items: center; justify-content: center; line-height: var(--line-height); border-radius: 0; @include hover-background-effect(); &.active { color: var(--primary-color); i { opacity: 1; } .c-ripple__circle { background-color: var(--light-primary-color); } @include hover-background-effect(primary); .badge { background-color: var(--primary-color); } } > span { position: relative; display: inline-flex; align-items: center; overflow: visible; } } i { position: absolute; bottom: calc(-.6875rem - 6px); left: 0; opacity: 0; background-color: var(--primary-color); height: .1875rem; width: 100%; border-radius: .1875rem .1875rem 0 0; pointer-events: none; /* padding-right: .5rem; margin-left: -.25rem; */ box-sizing: content-box; transform-origin: left; z-index: 1; &.animate { transition: transform var(--tabs-transition); } } } .tabs-container { min-width: 100%; width: 100%; display: grid; //grid-template-columns: 1fr; grid-template-columns: 100%; grid-template-rows: 100%; /* @include respond-to(not-handhelds) { overflow-x: hidden; } */ // &.animated { // transition: .3s transform; // } .tabs-tab { // * can't define these rules because of old firefox, though they don't work //height: 100%; //max-height: 100%; //width: 100%; //max-width: 100%; display: none; flex-direction: column; grid-row-start: 1; grid-column-start: 1; background-color: var(--background-color); body.animation-level-0 & { transition: none !important; } //@include respond-to(not-handhelds) { overflow: hidden; //} &.active { display: flex; } /* > div:not(.scroll-padding) { width: 100%; max-width: 100%; //overflow: hidden; position: relative; } */ } /* &[data-animation="tabs"] { & > div { --width: 100%; transition: transform var(--tabs-transition); transform: translateZ(0); &.from { animation: slide-tabs-from var(--tabs-transition) forwards; } &.to { transform: translate3d(var(--width), 0, 0); animation: slide-tabs-to var(--tabs-transition) forwards; } } &.backwards > div { &.from { animation: slide-tabs-backwards-from var(--tabs-transition) forwards; } &.to { transform: translate3d(calc(var(--width) * -1), 0, 0); animation: slide-tabs-backwards-to var(--tabs-transition) forwards; } } } */ &[data-animation="tabs"] .tabs-tab { transition: transform var(--tabs-transition); } /* &[data-animation="navigation"] .tabs-tab { transition: transform var(--tabs-transition), filter var(--tabs-transition); } */ &[data-animation="navigation"] { /* .tabs-tab { transition: transform var(--tabs-transition), filter var(--tabs-transition); } */ &.animating { .tabs-tab { transition: transform var(--transition-standard-in), filter var(--transition-standard-in); } &.backwards { .tabs-tab { transition: transform var(--transition-standard-out), filter var(--transition-standard-out); } } } } } /* @keyframes slide-tabs-from { to { transform: translate3d(calc(var(--width) * -1), 0, 0); } } @keyframes slide-tabs-to { to { transform: translateZ(0); } } @keyframes slide-tabs-backwards-from { to { transform: translate3d(var(--width), 0, 0); } } @keyframes slide-tabs-backwards-to { to { transform: translateZ(0); } } */