houdini/app/assets/stylesheets/experiment/global/tabswap.css
2020-04-23 14:09:56 -05:00

49 lines
890 B
CSS

/* License: LGPL-3.0-or-later */
@import 'flimflam/ui/tabswap/index.css'; /* npm */
[data-ff-tabswap-labels] {
border-bottom: 2px solid var(--grey-4);
}
[data-ff-tabswap-label] {
border: 2px solid var(--grey-4);
}
[data-ff-tabswap-label],
[data-ff-tabswap-label-wrapper] {
display: inline-block;
}
[data-ff-tabswap-label-wrapper]:first-of-type {
margin-left: 1rem;
}
[data-ff-tabswap-label-wrapper] {
margin-right: .5rem;
}
[data-ff-tabswap-label] {
background: var(--grey-2);
padding: .25rem 1rem;
border-radius: 3px 3px 0 0;
transform: translateY(2px);
position: relative;
color: var(--grey-6);
}
[data-ff-tabswap-label="active"] {
font-weight: 400;
background: white;
color: var(--blue);
}
[data-ff-tabswap-label="active"]:after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 2px;
bottom: -2px;
background: white;
}