All Downloads are FREE. Search and download functionalities are using the official Maven repository.
Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $
You can buy this project and download/modify it how often you want.
package.theme.lumo.vaadin-tabs-styles.js Maven / Gradle / Ivy
import '@vaadin/vaadin-lumo-styles/font-icons.js';
import '@vaadin/vaadin-lumo-styles/color.js';
import '@vaadin/vaadin-lumo-styles/sizing.js';
import '@vaadin/vaadin-lumo-styles/spacing.js';
import '@vaadin/vaadin-lumo-styles/style.js';
import '@vaadin/vaadin-lumo-styles/typography.js';
import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
registerStyles(
'vaadin-tabs',
css`
:host {
-webkit-tap-highlight-color: transparent;
}
:host(:not([orientation='vertical'])) {
box-shadow: inset 0 -1px 0 0 var(--lumo-contrast-10pct);
position: relative;
min-height: var(--lumo-size-l);
}
:host([orientation='horizontal']) [part='tabs'] ::slotted(vaadin-tab:not([theme~='icon-on-top'])) {
justify-content: center;
}
:host([orientation='vertical']) {
box-shadow: -1px 0 0 0 var(--lumo-contrast-10pct);
}
:host([orientation='horizontal']) [part='tabs'] {
margin: 0 0.75rem;
}
:host([orientation='vertical']) [part='tabs'] {
width: 100%;
margin: 0.5rem 0;
}
[part='forward-button'],
[part='back-button'] {
position: absolute;
z-index: 1;
font-family: lumo-icons;
color: var(--lumo-tertiary-text-color);
font-size: var(--lumo-icon-size-m);
display: flex;
align-items: center;
justify-content: center;
width: 1.5em;
height: 100%;
transition: 0.2s opacity;
top: 0;
}
[part='forward-button']:hover,
[part='back-button']:hover {
color: inherit;
}
:host(:not([dir='rtl'])) [part='forward-button'] {
right: 0;
}
[part='forward-button']::after {
content: var(--lumo-icons-angle-right);
}
[part='back-button']::after {
content: var(--lumo-icons-angle-left);
}
/* Tabs overflow */
[part='tabs'] {
--_lumo-tabs-overflow-mask-image: none;
-webkit-mask-image: var(--_lumo-tabs-overflow-mask-image);
mask-image: var(--_lumo-tabs-overflow-mask-image);
}
/* Horizontal tabs overflow */
/* Both ends overflowing */
:host([overflow~='start'][overflow~='end']:not([orientation='vertical'])) [part='tabs'] {
--_lumo-tabs-overflow-mask-image: linear-gradient(
90deg,
transparent 2em,
#000 4em,
#000 calc(100% - 4em),
transparent calc(100% - 2em)
);
}
/* End overflowing */
:host([overflow~='end']:not([orientation='vertical'])) [part='tabs'] {
--_lumo-tabs-overflow-mask-image: linear-gradient(90deg, #000 calc(100% - 4em), transparent calc(100% - 2em));
}
/* Start overflowing */
:host([overflow~='start']:not([orientation='vertical'])) [part='tabs'] {
--_lumo-tabs-overflow-mask-image: linear-gradient(90deg, transparent 2em, #000 4em);
}
/* Vertical tabs overflow */
/* Both ends overflowing */
:host([overflow~='start'][overflow~='end'][orientation='vertical']) [part='tabs'] {
--_lumo-tabs-overflow-mask-image: linear-gradient(transparent, #000 2em, #000 calc(100% - 2em), transparent);
}
/* End overflowing */
:host([overflow~='end'][orientation='vertical']) [part='tabs'] {
--_lumo-tabs-overflow-mask-image: linear-gradient(#000 calc(100% - 2em), transparent);
}
/* Start overflowing */
:host([overflow~='start'][orientation='vertical']) [part='tabs'] {
--_lumo-tabs-overflow-mask-image: linear-gradient(transparent, #000 2em);
}
:host [part='tabs'] ::slotted(:not(vaadin-tab)) {
margin-left: var(--lumo-space-m);
}
/* Centered */
:host([theme~='centered'][orientation='horizontal']) ::slotted(vaadin-tab:first-of-type) {
margin-inline-start: auto;
}
:host([theme~='centered'][orientation='horizontal']) ::slotted(vaadin-tab:last-of-type) {
margin-inline-end: auto;
}
/* Small */
:host([theme~='small']),
:host([theme~='small']) [part='tabs'] {
min-height: var(--lumo-size-m);
}
:host([theme~='small']) [part='tabs'] ::slotted(vaadin-tab) {
font-size: var(--lumo-font-size-s);
}
/* Minimal */
:host([theme~='minimal']) {
box-shadow: none;
--_lumo-tab-marker-display: none;
}
/* Hide-scroll-buttons */
:host([theme~='hide-scroll-buttons']) [part='back-button'],
:host([theme~='hide-scroll-buttons']) [part='forward-button'] {
display: none;
}
/* prettier-ignore */
:host([theme~='hide-scroll-buttons'][overflow~='start'][overflow~='end']:not([orientation='vertical'])) [part='tabs'] {
--_lumo-tabs-overflow-mask-image: linear-gradient(
90deg,
transparent,
#000 2em,
#000 calc(100% - 2em),
transparent 100%
);
}
:host([theme~='hide-scroll-buttons'][overflow~='end']:not([orientation='vertical'])) [part='tabs'] {
--_lumo-tabs-overflow-mask-image: linear-gradient(90deg, #000 calc(100% - 2em), transparent 100%);
}
:host([theme~='hide-scroll-buttons'][overflow~='start']:not([orientation='vertical'])) [part='tabs'] {
--_lumo-tabs-overflow-mask-image: linear-gradient(90deg, transparent, #000 2em);
}
/* Equal-width tabs */
:host([theme~='equal-width-tabs']) {
flex: auto;
}
:host([theme~='equal-width-tabs']) [part='tabs'] ::slotted(vaadin-tab) {
flex: 1 0 0%;
}
/* RTL specific styles */
:host([dir='rtl']) [part='forward-button']::after {
content: var(--lumo-icons-angle-left);
}
:host([dir='rtl']) [part='back-button']::after {
content: var(--lumo-icons-angle-right);
}
:host([orientation='vertical'][dir='rtl']) {
box-shadow: 1px 0 0 0 var(--lumo-contrast-10pct);
}
:host([dir='rtl']) [part='forward-button'] {
left: 0;
}
:host([dir='rtl']) [part='tabs'] ::slotted(:not(vaadin-tab)) {
margin-left: 0;
margin-right: var(--lumo-space-m);
}
/* Both ends overflowing */
:host([dir='rtl'][overflow~='start'][overflow~='end']:not([orientation='vertical'])) [part='tabs'] {
--_lumo-tabs-overflow-mask-image: linear-gradient(
-90deg,
transparent 2em,
#000 4em,
#000 calc(100% - 4em),
transparent calc(100% - 2em)
);
}
/* End overflowing */
:host([dir='rtl'][overflow~='end']:not([orientation='vertical'])) [part='tabs'] {
--_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, #000 calc(100% - 4em), transparent calc(100% - 2em));
}
/* Start overflowing */
:host([dir='rtl'][overflow~='start']:not([orientation='vertical'])) [part='tabs'] {
--_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, transparent 2em, #000 4em);
}
:host([dir='rtl'][theme~='hide-scroll-buttons'][overflow~='start'][overflow~='end']:not([orientation='vertical']))
[part='tabs'] {
--_lumo-tabs-overflow-mask-image: linear-gradient(
-90deg,
transparent,
#000 2em,
#000 calc(100% - 2em),
transparent 100%
);
}
:host([dir='rtl'][theme~='hide-scroll-buttons'][overflow~='end']:not([orientation='vertical'])) [part='tabs'] {
--_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, #000 calc(100% - 2em), transparent 100%);
}
:host([dir='rtl'][theme~='hide-scroll-buttons'][overflow~='start']:not([orientation='vertical'])) [part='tabs'] {
--_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, transparent, #000 2em);
}
`,
{ moduleId: 'lumo-tabs' },
);
