wix-style-react
Version:
wix-style-react
154 lines (117 loc) • 2.45 kB
CSS
@st-namespace "BMTextButton";
:import {
-st-from: "../../../TextButton/TextButton.st.css";
-st-default: TextButton;
}
:import {
-st-from: '../foundations/colors.st.css';
-st-named: B05, B10, B40, B50, D10, D20, D30, D80, D10-30, D10-40, D80-70, P10, P20, R10;
}
:import {
-st-from: "../../../Foundation/stylable/typography.st.css";
-st-named: wsr-font-weight-regular, wsr-font-weight-bold;
}
.root {
-st-extends: TextButton;
color: value(B10);
align-items: flex-start;
}
.root:hover {
color: value(B05);
}
.root:active {
color: value(B05);
}
.root:disabled {
color: value(D10-40);
}
.root::prefix {
padding-right: 4px;
}
.root::suffix {
padding-left: 4px;
}
.root:focus-visible {
box-shadow: 0 0 0 3px value(B40);
}
/****** Weights ******/
.root:size(tiny):weight(normal) {
font-weight: value(wsr-font-weight-bold);
}
.root:size(small):weight(normal) {
font-weight: value(wsr-font-weight-bold);
}
.root:size(medium):weight(normal) {
font-weight: value(wsr-font-weight-bold);
}
.root:size(tiny):weight(thin) {
font-weight: value(wsr-font-weight-regular);
}
.root:size(small):weight(thin) {
font-weight: value(wsr-font-weight-regular);
}
.root:size(medium):weight(thin) {
font-weight: value(wsr-font-weight-regular);
}
.root:size(tiny) {
line-height: 16px;
height: 16px;
font-size: 12px;
align-items: center;
}
.root:size(small) {
line-height: 20px;
height: 20px;
align-items: center;
}
/* Skin: light */
.root:skin(light) {
color: value(D80);
}
.root:skin(light):hover {
color: value(B50);
}
.root:skin(light):disabled {
color: value(D80-70);
}
/* Skin: dark */
.root:skin(dark) {
color: value(D10);
}
.root:skin(dark):hover {
color: value(D10);
}
.root:skin(dark):active {
color: value(D10);
}
.root:skin(dark):size(tiny) {
color: value(D20);
}
.root:skin(dark):size(tiny):hover {
color: value(D10);
}
.root:skin(dark):size(tiny):active {
color: value(D10);
}
.root:skin(dark):disabled,
.root:skin(dark):disabled:hover {
color: value(D10-40);
}
/* skin: premium */
.root:skin(premium) {
color: value(P10);
}
.root:skin(premium):hover {
color: value(P20);
}
.root:skin(premium):active {
color: value(P10);
}
.root:skin(premium):disabled {
color: value(D10-30);
}
/* skin: error */
.root:skin(destructive) {
color: value(R10);
}
/* st-namespace-reference="../../../../../src/Themes/businessDashboard/components/TextButton.st.css" */