You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
48 lines
1.1 KiB
48 lines
1.1 KiB
@layer components { |
|
|
|
/** |
|
* @file |
|
* Visual styles for tabs (local-task tabs on node pages, etc.). |
|
* |
|
* Underline-style tab bar: a thin baseline runs under all tabs, and the |
|
* active tab "owns" a thicker brand-colored segment of it. The link's |
|
* negative bottom margin lets its 2px border overlap the row's 1px rail. |
|
*/ |
|
|
|
div.tabs { |
|
margin: 1em 0; |
|
border-bottom: 1px solid var(--surface-2); |
|
} |
|
ul.tabs { |
|
margin: 0; |
|
padding: 0; |
|
list-style: none; |
|
display: flex; |
|
flex-wrap: wrap; |
|
} |
|
.tabs > li { |
|
margin: 0; |
|
} |
|
.tabs a { |
|
display: block; |
|
padding: var(--size-2) var(--size-3); |
|
color: var(--text-2); |
|
text-decoration: none; |
|
border-bottom: 2px solid transparent; |
|
margin-bottom: -1px; |
|
transition: |
|
background-color 0.15s var(--ease-out-2), |
|
border-color 0.15s var(--ease-out-2), |
|
color 0.15s var(--ease-out-2); |
|
} |
|
.tabs a:hover, |
|
.tabs a:focus { |
|
color: var(--text-1); |
|
background-color: var(--surface-2); |
|
} |
|
.tabs a.is-active { |
|
color: var(--upei-red); |
|
border-bottom-color: var(--upei-red); |
|
} |
|
|
|
}
|
|
|