@inkline/inkline
Version:
Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.
38 lines (37 loc) • 3.63 kB
CSS
/**
* Tab Title
*/
.tabs .tab-title {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
border-style: var(--tabs--title--border-style, var(--tabs--title--border-top-style, var(--tabs--border-top-style, var(--border-top-style))) var(--tabs--title--border-right-style, var(--tabs--border-right-style, var(--border-right-style))) var(--tabs--title--border-bottom-style, var(--tabs--border-bottom-style, var(--border-bottom-style))) var(--tabs--title--border-left-style, var(--tabs--border-left-style, var(--border-left-style))));
border-width: var(--tabs--title--border-width, var(--tabs--title--border-top-width, 0) var(--tabs--title--border-right-width, var(--tabs--border-right-width, var(--border-right-width))) var(--tabs--title--border-bottom-width, 0) var(--tabs--title--border-left-width, 0));
border-color: var(--tabs--title--border-color, var(--tabs--title--border-top-color, var(--tabs--border-top-color, var(--border-top-color))) var(--tabs--title--border-right-color, var(--tabs--border-right-color, var(--border-right-color))) var(--tabs--title--border-bottom-color, var(--tabs--border-bottom-color, var(--border-bottom-color))) var(--tabs--title--border-left-color, var(--tabs--border-left-color, var(--border-left-color))));
padding: var(--tabs--title--padding, var(--tabs--title--padding-top, var(--tabs--padding-top, var(--padding-top))) var(--tabs--title--padding-right, var(--tabs--padding-right, var(--padding-right))) var(--tabs--title--padding-bottom, var(--tabs--padding-bottom, var(--padding-bottom))) var(--tabs--title--padding-left, var(--tabs--padding-left, var(--padding-left))));
font-size: var(--tabs--title--font-size, var(--tabs--font-size, var(--font-size)));
transition-property: var(--tabs--title--transition-property, var(--tabs--transition-property, background-color, border-color, color));
transition-duration: var(--tabs--title--transition-duration, var(--tabs--transition-duration, var(--transition-duration)));
transition-timing-function: var(--tabs--title--transition-timing-function, var(--tabs--transition-timing-function, var(--transition-timing-function)));
color: var(--tabs--title--color, var(--tabs--color));
background: var(--tabs--title--background, var(--tabs--background));
}
.tabs .tab-title.-active {
color: var(--tabs--title--active--color, var(--tabs--title--color, var(--tabs--color)));
background: var(--tabs--title--active--background, var(--tabs--title--background, var(--tabs--background)));
border-color: var(--tabs--title--border-color, var(--tabs--title--active--border-top-color, var(--tabs--title--border-top-color, var(--tabs--border-top-color, var(--border-top-color)))) var(--tabs--title--active--border-right-color, var(--tabs--title--border-right-color, var(--tabs--border-right-color, var(--border-right-color)))) var(--tabs--title--active--border-bottom-color, var(--tabs--title--border-bottom-color, var(--tabs--border-bottom-color, var(--border-bottom-color)))) var(--tabs--title--active--border-left-color, var(--tabs--title--border-left-color, var(--tabs--border-left-color, var(--border-left-color)))));
font-weight: var(--tabs--title--active--font-weight, var(--font-weight-semibold));
}
.tabs .tab-title:hover, .tabs .tab-title:focus {
background: var(--tabs--title--hover--background, var(--tabs--title--background));
cursor: pointer;
outline: none;
}
.tabs.-stretch .tab > .tabs-header .tab-title {
flex-grow: 1;
}
.tabs.-stretch .tab > .tabs-header .tab-title:last-of-type {
border-right-width: var(--tabs--stretch--title--border-right-width, 0);
}