js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rework tabs

Browse Source
This commit is contained in:
Cory LaViska
2017-08-17 13:11:20 -04:00
parent 74be0eeb92
commit d9ce879ebb
1 changed files with 51 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
source/css/tabs.css
View File

@@ -11,6 +11,7 @@
--tab-color-disabled: var(--state-secondary);
--tab-padding-x: var(--component-padding-x);
--tab-padding-y: calc(var(--component-padding-y) / 2);
--tab-speed: .2s;
--tab-pane-border-color: var(--component-border-color);
--tab-pane-border-radius: var(--component-border-radius);
@@ -22,50 +23,62 @@
.tabs {
width: 100%;
margin-bottom: 1rem;
}
.tabs-nav {
margin-bottom: 1rem;
user-select: none;
}
& .tabs-nav {
margin-bottom: 1rem;
user-select: none;
.tabs-nav a {
color: var(--tab-color);
text-decoration: none;
background-color: var(--tab-bg-color);
border-radius: var(--tab-border-radius);
padding: var(--tab-padding-y) var(--tab-padding-x);
display: inline-block;
}
& a {
color: var(--tab-color);
text-decoration: none;
background-color: var(--tab-bg-color);
border-radius: var(--tab-border-radius);
padding: var(--tab-padding-y) var(--tab-padding-x);
display: inline-block;
transition: var(--tab-speed) box-shadow;
.tabs-nav a:hover {
color: var(--tab-color-hover);
background-color: var(--tab-bg-color-hover);
text-decoration: none;
}
&:hover {
color: var(--tab-color-hover);
background-color: var(--tab-bg-color-hover);
text-decoration: none;
}
.tabs-nav a.active {
color: var(--tab-color-active);
background-color: var(--tab-bg-color-active);
cursor: default;
}
&:focus {
outline: none;
.tabs-nav a.disabled {
color: var(--tab-color-disabled);
background-color: var(--tab-bg-color-disabled);
cursor: not-allowed;
}
&:not(.disabled) {
box-shadow: 0 0 0 3px color(var(--tab-bg-color-active) alpha(50%));
.tabs-pane {
border: solid var(--tab-pane-border-width) var(--tab-pane-border-color);
border-radius: .25rem;
padding: var(--tab-pane-padding-y) var(--tab-pane-padding-x);
}
/* Force a new stacking context so focus rings don't get truncated by adjacent elements */
transform: translateZ(0);
}
}
.tabs-pane:not(.active) {
display: none;
}
&.active {
color: var(--tab-color-active);
background-color: var(--tab-bg-color-active);
cursor: default;
}
.tabs-pane :last-child {
margin-bottom: 0;
&.disabled {
color: var(--tab-color-disabled);
background-color: var(--tab-bg-color-disabled);
cursor: not-allowed;
}
}
}
& .tabs-pane {
border: solid var(--tab-pane-border-width) var(--tab-pane-border-color);
border-radius: .25rem;
padding: var(--tab-pane-padding-y) var(--tab-pane-padding-x);
&:not(.active) {
display: none;
}
& :last-child {
margin-bottom: 0;
}
}
}