/
githubmirror
/
materialize
Обзор
Документация
Войти
/
githubmirror
/
materialize
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
v1-dev
sass/components/_tabs.scss
99 строк
2 KB
Chang Alan
tabs focus style
01 мар 2018, 01:10
01 мар 2018, 01:10
d1ae3cf
Код
Авторство
О чём код?
.tabs { &.tabs-transparent { background-color: transparent; .tab a, .tab.disabled a, .tab.disabled a:hover { color: rgba(255,255,255,0.7); } .tab a:hover, .tab a.active { color: #fff; } .indicator { background-color: #fff; } } &.tabs-fixed-width { display: flex; .tab { flex-grow: 1; } } position: relative; overflow-x: auto; overflow-y: hidden; height: 48px; width: 100%; background-color: $tabs-bg-color; margin: 0 auto; white-space: nowrap; .tab { display: inline-block; text-align: center; line-height: 48px; height: 48px; padding: 0; margin: 0; text-transform: uppercase; a { &:focus, &:focus.active { background-color: transparentize($tabs-underline-color, .8); outline: none; } &:hover, &.active { background-color: transparent; color: $tabs-text-color; } color: rgba($tabs-text-color, .7); display: block; width: 100%; height: 100%; padding: 0 24px; font-size: 14px; text-overflow: ellipsis; overflow: hidden; transition: color .28s ease, background-color .28s ease; } &.disabled a, &.disabled a:hover { color: rgba($tabs-text-color, .4); cursor: default; } } .indicator { position: absolute; bottom: 0; height: 2px; background-color: $tabs-underline-color; will-change: left, right; } } // Fixed Sidenav hide on smaller @media #{$medium-and-down} { .tabs { display: flex; .tab { flex-grow: 1; a { padding: 0 12px; } } } }