50 lines
890 B
CSS
50 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;
|
||
|
}
|
||
|
|