@zohodesk/components
Version:
Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development
94 lines (92 loc) • 1.82 kB
CSS
.tab {
text-transform: uppercase;
letter-spacing: 0.6px;
text-decoration: none;
cursor: pointer;
}
.vertical {
height: 100% ;
}
.horizontal {
width: 100% ;
max-width: 100% ;
}
.textContainer,
.tabText {
max-width: inherit ;
}
.tabText {
composes: dotted from '../common/common.module.css';
}
.disabled {
cursor: not-allowed;
}
.border {
border-bottom: 1px solid var(--zdt_tab_default_border);
}
.alpha,
.beta,
.delta {
transition: all var(--zd_transition2);
}
.alpha {
padding-inline: var(--zd_size18) ;
padding-block:0 ;
font-size: var(--zd_font_size11) ;
line-height: 3;
}
.tabAlpha {
composes: alpha;
color: var(--zdt_tab_alpha_text);
}
.alphaHover:hover {
color: var(--zdt_tab_alpha_hover_text);
background-color: var(--zdt_tab_alpha_hover_bg);
}
.alphaActive {
composes: alpha;
color: var(--zdt_tab_alpha_active_text);
}
.alphaActive_border, .betaActive_border {
border-color: var(--zdt_tab_alpha_active_border);
}
.deltaActive_border {
border-color: var(--zdt_tab_delta_active_border);
}
.beta {
padding-inline: var(--zd_size4) ;
padding-block:0 ;
font-size: var(--zd_font_size14) ;
line-height: 4.2857;
margin-inline-end: var(--zd_size40) ;
text-transform: capitalize;
}
.tabBeta {
composes: beta;
color: var(--zdt_tab_alpha_text);
}
.betaHover:hover {
color: var(--zdt_tab_alpha_hover_text);
}
.betaActive {
composes: beta;
color: var(--zdt_tab_alpha_hover_text);
}
.delta {
padding-inline: var(--zd_size4) ;
padding-block:0 ;
font-size: var(--zd_font_size11) ;
line-height: 3;
margin-inline-end: var(--zd_size10) ;
}
.tabDelta {
composes: delta;
color: var(--zdt_tab_alpha_text);
}
.deltaHover:hover {
color: var(--zdt_tab_alpha_active_text);
}
.deltaActive {
composes: delta;
color: var(--zdt_tab_alpha_active_text);
}