wix-style-react/src/Button/Button.st.css

wix-style-react

@st-global-custom-property --wsr-button-border-radius;

:import {
  -st-from: 'wix-ui-core/dist/src/components/button-next/button-next.st.css';
  -st-default: ButtonNext;
}

:import {
  -st-from: '../Foundation/stylable/easing.st.css';
  -st-named: ease-9, speed-fast-1;
}

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: B10, F00, B20,  R10, R20, P10, P20, G10, G20, D80, B50, D40,
  D10, D20, B40, F00, D10-20, D20-48, D20-54, D20-60, D80-30, D80-70, D10-30,
  THEME-TEXT-COLOR-PRIMARY-LIGHT,
   THEME-COLOR-10,  THEME-COLOR-20;
}

:import {
  -st-from: '../Foundation/stylable/typography.st.css';
  -st-named: text-tiny-normal, text-small-normal, text-medium-normal, text-tiny-bold;
}


.root {
  -st-extends: ButtonNext;
  -st-states: skin(string), size(string), priority(string), fluid, ellipsis;

  justify-content: center;

  box-sizing: border-box;
  text-align: center;
  border: 1px solid;

  -st-mixin: text-medium-normal;

  outline: none;
  transition-duration: value(speed-fast-1);
  transition-timing-function: value(ease-9);
  transition-property: background-color, color, border-color;

  height: 36px;
  min-width: 84px;
  border-radius: var(--wsr-button-border-radius, 18px);
  padding: 0 23px;

  background-color: value(THEME-COLOR-10);
  border-color: value(THEME-COLOR-10);
  color: value(THEME-TEXT-COLOR-PRIMARY-LIGHT);

  /* render as anchor overrides */
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
}

.root::content {
  display: flex;
  align-items: center;
}

.root:hover {
  background-color: value(THEME-COLOR-20);
  border-color: value(THEME-COLOR-20);
  color: value(THEME-TEXT-COLOR-PRIMARY-LIGHT);
}

.root:active {
  background-color: value(THEME-COLOR-10);
  border-color: value(THEME-COLOR-10);
  color: value(THEME-TEXT-COLOR-PRIMARY-LIGHT);
}

.root:disabled {
  color: value(THEME-TEXT-COLOR-PRIMARY-LIGHT);
  background-color: value(D10-30);
  border-color: transparent;
}

.root:focus-visible {
  box-shadow: 0 0 0 3px value(F00);
  z-index: 1000;
}


/* Skin: standard - secondary */

.root:skin(standard):priority(secondary) {
  background-color: transparent;
  border-color: value(THEME-COLOR-10);
  color: value(THEME-COLOR-10);
}

.root:skin(standard):priority(secondary):hover {
  color: value(D80);
  border-color: transparent;
  background-color: value(THEME-COLOR-20);
}

.root:skin(standard):priority(secondary):active {
  background-color: value(THEME-COLOR-10);
  border-color: value(THEME-COLOR-10);
  color: value(D80);
}

.root:skin(standard):priority(secondary):disabled {
  color: value(D10-30);
  background-color: transparent;
  border-color: value(D10-30);
}

/* Skin: inverted */

.root:skin(inverted) {
  border-color: value(D80);
  background-color: value(D80);
  color: value(B10);
}

.root:skin(inverted):hover {
  color: value(D80);
  border-color: transparent;
  background-color: value(B20);
}

.root:skin(inverted):active {
  background-color: value(B10);
  border-color: value(B10);
  color: value(D80);
}

.root:skin(inverted):disabled {
  color: value(D10-30);
  background-color: transparent;
  border-color: value(D10-30);
}

/* skin: light */

.root:skin(light) {
  border-color: value(D80);
  background-color: value(D80);
  color: value(B20);
}

.root:skin(light):hover {
  background-color: value(B50);
  color: value(B10);
  border-color: value(B50);
}

.root:skin(light):active {
  background-color: value(B40);
  color: value(B10);
}

.root:skin(light):disabled {
  color: value(D80);
  background-color: value(D80-30);
  border-color: transparent;
}

/* skin: light - secondary */

.root:skin(light):priority(secondary) {
  border: solid 1px value(D80);
  background: transparent;
  color: value(D80);
}

.root:skin(light):priority(secondary):hover {
  background-color: value(B50);
  color: value(B10);
  border-color: value(B50);
}

.root:skin(light):priority(secondary):active {
  background-color: value(B40);
  border: solid 1px value(B40);
  color: value(B10);
}

.root:skin(light):priority(secondary):disabled {
  color: value(D80-70);
  background-color:transparent;
  border-color: value(D80-70);
}

/* skin: destructive */

.root:skin(destructive) {
  background-color: value(R10);
  border-color: value(R10);
  color: value(D80);
}

.root:skin(destructive):hover {
  background-color: value(R20);
  border-color: value(R20);
  color: value(D80);
}

.root:skin(destructive):active {
  background-color: value(R10);
  border-color: value(R10);
  color: value(D80);
}

.root:skin(destructive):disabled {
  color: value(D80);
  background-color: value(D10-30);
  border-color: transparent;
}

/* skin: destructive - secondary */

.root:skin(destructive):priority(secondary) {
  border: solid 1px value(R10);
  background: transparent;
  color: value(R10);
}

.root:skin(destructive):priority(secondary):hover {
  background-color: value(R20);
  border-color: value(R20);
  color: value(D80);
}

.root:skin(destructive):priority(secondary):active {
  background-color: value(R10);
  border-color: value(R10);
  color: value(D80);
}

.root:skin(destructive):priority(secondary):disabled {
  color: value(D10-30);
  background-color: transparent;
  border-color: value(D10-30);
}

/* skin: premium */

.root:skin(premium) {
  background-color: value(P10);
  border-color: value(P10);
  color: value(D80);
}

.root:skin(premium):hover {
  background-color: value(P20);
  border-color: value(P20);
  color: value(D80);
}

.root:skin(premium):active {
  background-color: value(P10);
  border-color: value(P10);
  color: value(D80);
}

.root:skin(premium):disabled {
  color:value(D80);
  background-color: value(D10-30);
  border-color: transparent;
}

/* skin: premium - secondary */

.root:skin(premium):priority(secondary) {
  border: solid 1px value(P10);
  background: transparent;
  color: value(P10);
}

.root:skin(premium):priority(secondary):hover {
  background-color: value(P20);
  border-color: value(P20);
  color: value(D80);
}

.root:skin(premium):priority(secondary):active{
  background-color: value(P10);
  border-color: value(P10);
  color: value(D80);
}

.root:skin(premium):priority(secondary):disabled {
  color: value(D10-30);
  background-color: transparent;
  border-color: value(D10-30);
}


/* skin: premium-light - primary */

.root:skin(premium-light) {
  background-color: value(P10);
  border-color: value(P10);
  color: value(D80);
}

.root:skin(premium-light):hover {
  background-color: value(P20);
  border-color: value(P20);
  color: value(D80);
}

.root:skin(premium-light):active {
  background-color: value(P10);
  border-color: value(P10);
  color: value(D80);
}

.root:skin(premium-light):disabled {
  color:value(D80);
  background-color: value(D80-30);
  border-color: transparent;
}


/* skin: premium-light - secondary */

.root:skin(premium-light):priority(secondary) {
  background-color: transparent;
  border-color: value(D80);
  color: value(D80);
}

.root:skin(premium-light):priority(secondary):hover {
  background-color: value(D80);
  border-color: value(D80);
  color: value(P10);
}

.root:skin(premium-light):priority(secondary):active {
  background-color: value(D80);
  border-color: value(D80);
  color: value(P10);
}

.root:skin(premium-light):priority(secondary):disabled {
  color: value(D80-70);
  background-color:transparent;
  border-color: value(D80-70);
}

/* skin: dark */

.root:skin(dark) {
  background-color: value(D10);
  border: solid 1px value(D10);
  color: value(D80);
}

.root:skin(dark):hover {
  color: value(D80);
  background-color: value(D20);
  border-color: value(D20);
}

.root:skin(dark):active {
  background-color: value(D10);
  border-color: value(D10);
  color: value(D80);
}

.root:skin(dark):disabled {
  color: value(D80);
  background-color: value(D10-30);
  border-color: transparent;
}

/* skin: dark - secondary */

.root:skin(dark):priority(secondary) {
  background-color: transparent;
  border: solid 1px value(D40);
  color: value(D10);
}

.root:skin(dark):priority(secondary):hover {
  color: value(D80);
  background-color: value(D20);
  border-color: value(D20);
}

.root:skin(dark):priority(secondary):active {
  background-color: value(D10);
  border-color: value(D10);
  color: value(D80);
}

.root:skin(dark):priority(secondary):disabled {
  color: value(D10-30);
  background-color: transparent;
  border-color: value(D10-30);
}

/* skin: transparent */

.root:skin(transparent) {
  border-color: transparent;
  background-color: value(D20-48);
  color: value(D80);
}

.root:skin(transparent):hover {
  border-color: transparent;
  background-color: value(D20-54);
  color: value(D80);
}

.root:skin(transparent):active {
  border-color: transparent;
  background-color: value(D20-60);
  color: value(D80);
}

.root:skin(transparent):disabled {
  background-color: value(D10-20);
  border-color: transparent;
  color: value(D80-70);
}

/* skin: transparent - secondary */

.root:skin(transparent):priority(secondary) {
  border-color: transparent;
  background-color: transparent;
  color: value(D80);
}

.root:skin(transparent):priority(secondary):hover {
  border-color: transparent;
  background-color: value(D20-54);
  color: value(D80);
}

.root:skin(transparent):priority(secondary):active {
  border-color: transparent;
  background-color: value(D20-60);
  color: value(D80);
}

.root:skin(transparent):priority(secondary):disabled {
  background-color: transparent;
  border-color: transparent;
  color: value(D80-70);
}

/* sizes */

.root:size(large) {
  height: 42px;
  min-width: 102px;

  -st-mixin: text-medium-normal;

  border-radius: var(--wsr-button-border-radius, 21px);
  padding: 0 29px;
}

.root:size(small) {
    height: 30px;
    min-width: 72px;

    -st-mixin:text-small-normal;

    border-radius: var(--wsr-button-border-radius, 15px);
    padding: 0 17px;
}

.root:size(tiny) {
    height: 24px;
    min-width: 60px;

    -st-mixin: text-tiny-normal;

    line-height: 16px;
    border-radius: var(--wsr-button-border-radius, 18px);
    padding: 0 11px;
}

.root:size(tiny)[data-madefor="true"] {
  -st-mixin: text-tiny-bold;
}

/* Full width mode */

.root:fluid {
  width: 100%;
}

/* Ellipsis */

.root:ellipsis {
  max-width: 100%;
}

/* Suffix and prefix */

.root:size(tiny)::suffix {
  margin: 0 -6px 0 3px;
  width: 18px;
  height: 18px;
}

.root:size(tiny)::prefix {
  margin: 0 3px 0 -6px;
  width: 18px;
  height: 18px;
}

.root:size(small)::suffix {
  margin: 0 -6px 0 6px;
  width: 18px;
  height: 18px;
}

.root:size(small)::prefix {
  margin: 0 6px 0 -6px;
  width: 18px;
  height: 18px;
}

.root::suffix {
  margin: 0 -12px 0 6px;
  width: 24px;
  height: 24px;
}

.root::prefix {
  margin: 0 6px 0 -12px;
  width: 24px;
  height: 24px;
}

.root:size(large)::suffix {
  margin: 0 -12px 0 12px;
  width: 24px;
  height: 24px;
}

.root:size(large)::prefix {
  margin: 0 12px 0 -12px;
  width: 24px;
  height: 24px;
}

/* rtl */

:global([dir='rtl']) .root:size(large)::suffix {
  margin: 0 12px 0 -12px;
}

:global([dir='rtl']) .root:size(large)::prefix {
  margin: 0 -12px 0 12px;
}

:global([dir='rtl']) .root:size(small)::suffix {
  margin: 0 6px 0 -6px;
}

:global([dir='rtl']) .root:size(small)::prefix {
  margin: 0 -6px 0 6px;
}

:global([dir='rtl']) .root::suffix {
  margin: 0 12px 0 -12px;
}

:global([dir='rtl']) .root::prefix {
  margin: 0 -12px 0 12px;
}

:global([dir='rtl']) .root:size(tiny)::suffix {
  margin: 0 0 0 -6px;
}

:global([dir='rtl']) .root:size(tiny)::prefix {
  margin: 0 -6px 0 0;
}