@zohodesk/components/es/Button/css/Button.module.css

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

.varClass {
  /* button default variables */
  /*  Variable:Ignore  */
  --button_letter_spacing: 0.2px;
  --button_cursor: pointer;
  --button_font_size: var(--zd_font_size13);
  --button_text_color: var(--zdt_button_default_text);
  --button_font_weight: var(--zd-fw-normal);
  --button_text_transform: capitalize;
  --button_bg_color: var(--zdt_button_default_bg);
  --button_border_radius: 4px;
  --button_min_width: var(--zd_size90);
  --button_height: auto;
  --button_border_width: 0;
  --button_border_style: solid;
  --button_border_color: var(--zdt_button_default_border);
  --button_padding: 0;
  --button_opacity: none;
  --button_box_shadow: none;

  /* button loading status default variables */
  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
  --button_loading_border_radius: 50%;

  /* button success status default variable */
  --button_success_border_color: var(--zdt_button_success_default_border);
}

.native {
  composes: varClass;
  /* transition: all var(--zd_transition2) ease 0s; */
  letter-spacing: var(--button_letter_spacing);
  opacity: var(--button_opacity);
  transition-property: background-color, color, border;
  transition-duration: var(--zd_transition2);
  transition-timing-function: ease;
  border: 0;
  cursor: var(--button_cursor);
}

.native:disabled {
  --button_cursor: not-allowed;
  --button_opacity: 0.4;
}

.container {
  composes: native;
  composes: dotted from '../../common/common.module.css';
  position: relative;
  font-size: var(--button_font_size);
  color: var(--button_text_color);
  font-weight: var(--button_font_weight);
  text-transform: var(--button_text_transform);
  min-width: var(--button_min_width);
  height: var(--button_height);
  background-color: var(--button_bg_color);
  border-radius: var(--button_border_radius);
  border-width: var(--button_border_width);
  border-style: var(--button_border_style);
  border-color: var(--button_border_color);
  padding: var(--button_padding);
  box-shadow: var(--button_box_shadow);
}

.bold {
  --button_font_weight: var(--zd-fw-semibold);
  composes: ftsmooth from '../../common/common.module.css';
}

.rounded {
  --button_border_radius: 50px;
}

.small {
  --button_padding: var(--zd_size4) var(--zd_size7);
  --button_min_width: var(--zd_size50);
  --button_font_size: var(--zd_font_size10);
}

.medium {
  --button_padding: var(--zd_size6) var(--zd_size15);
}

.large {
  --button_padding: var(--zd_size9) var(--zd_size14);
  --button_min_width: var(--zd_size80);
  --button_font_size: var(--zd_font_size12);
}

.xlarge {
  --button_padding: var(--zd_size12) var(--zd_size25);
  --button_min_width: var(--zd_size90);
  --button_font_size: var(--zd_font_size13);
}

.mediumBtn {
  --button_height: var(--zd_size42);
  --button_min_width: var(--zd_size42);
  --button_font_size: var(--zd_font_size10);
  text-align: center;
}

.smallBtn {
  --button_height: var(--zd_size22);
  --button_min_width: var(--zd_size22);
  --button_font_size: var(--zd_font_size13);
  text-align: center;
}

.smallBtnprimary,
.smallBtnprimaryfilled,
.mediumBtnprimary,
.mediumBtnprimaryfilled {
  --button_box_shadow: var(--zd_bs_button_primary);
}

.smallBtndanger,
.smallBtndangerfilled,
.mediumBtndanger,
.mediumBtndangerfilled {
  --button_box_shadow: var(--zd_bs_button_danger);
}

.small,
.medium,
.large,
.xlarge,
.smallBtn,
.mediumBtn {
  composes: container;
}

.plainprimary,
.plaindanger,
.plainsuccess,
.plainsecondary {
  --button_padding: var(--zd_size5);
  --button_min_width: initial;
  --button_bg_color: var(--zdt_button_default_bg);
}

.plainprimary {
  --button_text_color: var(--zdt_button_default_text);
}

.plainprimary:not(:disabled):hover {
  --button_text_color: var(--zdt_button_plainprimary_hover_text);
}

.plaindanger {
  --button_text_color: var(--zdt_button_danger_text);
}

.plaindanger:not(:disabled):hover {
  --button_text_color: var(--zdt_button_danger_hover_text);
}

.plainsuccess {
  --button_text_color: var(--zdt_button_success_text);
}

.plainsuccess:not(:disabled):hover {
  --button_text_color: var(--zdt_button_success_hover_text);
}

.plainsecondary {
  --button_text_color: var(--zdt_button_secondary_text);
}

.plainsecondary:not(:disabled):hover {
  --button_text_color: var(--zdt_button_secondary_hover_text);
}

.primary,
.primaryfilled,
.danger,
.dangerfilled,
.secondary,
.secondaryfilled,
.success,
.successfilled,
.tertiaryfilled {
  --button_border_width: 1px;
}

.primary:not(:disabled):hover {
  --button_border_color: var(--zdt_button_primary_hover_border);
  --button_text_color: var(--zdt_button_primary_hover_text);
}

.primaryfilled {
  --button_border_color: var(--zdt_button_primaryfill_border);
  --button_bg_color: var(--zdt_button_primaryfill_bg);
  --button_text_color: var(--zdt_button_primaryfill_text);
}

.primaryfilled:not(:disabled):hover {
  --button_bg_color: var(--zdt_button_primaryfill_hover_bg);
}

.danger {
  --button_border_color: var(--zdt_button_danger_border);
  --button_bg_color: var(--zdt_button_default_bg);
  --button_text_color: var(--zdt_button_danger_text);
}

.danger:not(:disabled):hover {
  --button_border_color: var(--zdt_button_danger_hover_border);
  --button_text_color: var(--zdt_button_danger_hover_text);
}

.success {
  --button_border_color: var(--zdt_button_success_border);
  --button_bg_color: var(--zdt_button_default_bg);
  --button_text_color: var(--zdt_button_success_text);
}

.success:not(:disabled):hover {
  --button_border_color: var(--zdt_button_success_hover_border);
  --button_text_color: var(--zdt_button_success_hover_text);
}

.dangerfilled {
  --button_border_color: var(--zdt_button_primaryfill_border);
  --button_bg_color: var(--zdt_button_dangerfill_bg);
  --button_text_color: var(--zdt_button_dangerfill_text);
}

.dangerfilled:not(:disabled):hover {
  --button_bg_color: var(--zdt_button_dangerfill_hover_bg);
}

.secondary {
  --button_border_color: var(--zdt_button_secondary_border);
  --button_bg_color: var(--zdt_button_default_bg);
  --button_text_color: var(--zdt_button_secondary_text);
}

.secondary:not(:disabled):hover {
  --button_border_color: var(--zdt_button_secondary_hover_border);
  --button_text_color: var(--zdt_button_secondary_hover_text);
}

.secondaryfilled {
  --button_border_color: var(--zdt_button_primaryfill_border);
  --button_bg_color: var(--zdt_button_secondaryfill_bg);
  --button_text_color: var(--zdt_button_secondary_text);
}

.secondaryfilled:not(:disabled):hover {
  --button_text_color: var(--zdt_button_secondary_hover_text);
}

.successfilled {
  --button_border_color: var(--zdt_button_primaryfill_border);
  --button_bg_color: var(--zdt_button_successfill_bg);
  --button_text_color: var(--zdt_button_dangerfill_text);
}

.successfilled:not(:disabled):hover {
  --button_bg_color: var(--zdt_button_successfill_hover_bg);
}

.tertiaryfilled {
  --button_border_color: var(--zdt_button_primaryfill_border);
  --button_bg_color: var(--zdt_button_tertiaryfill_bg);
  --button_text_color: var(--zdt_button_dangerfill_text);
}

.tertiaryfilled:not(:disabled):hover {
  --button_bg_color: var(--zdt_button_tertiaryfill_hover_bg);
}

.overlay {
  position: absolute;
  top: 0 ;
  bottom: 0 ;
  background: inherit;
  border-radius: inherit;
}

[dir=ltr] .overlay {
  left: 0 ;
  right: 0 ;
}

[dir=rtl] .overlay {
  right: 0 ;
  left: 0 ;
}

.loading {
  position: absolute;
  top: 50% ;
  width: var(--zd_size20) ;
  height: var(--zd_size20) ;
}

[dir=ltr] .loading {
  left: 50% ;
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

[dir=rtl] .loading {
  right: 50% ;
  transform: translate(50%, -50%);
  -moz-transform: translate(50%, -50%);
  -webkit-transform: translate(50%, -50%);
}

.loadingelement {
  height: inherit ;
  width: inherit ;
  position: relative;
  display: inline-block;
  border-radius: 50%;
  transform-origin: 50%;
}

[dir=ltr] .loadingelement {
  animation:  crlrotate-ltr var(--zd_no_transition8) linear infinite;
  -moz-animation:  crlrotate-ltr var(--zd_no_transition8) linear infinite;
  -webkit-animation:  crlrotate-ltr var(--zd_no_transition8) linear infinite;
}

[dir=rtl] .loadingelement {
  animation:  crlrotate-rtl var(--zd_no_transition8) linear infinite;
  -moz-animation:  crlrotate-rtl var(--zd_no_transition8) linear infinite;
  -webkit-animation:  crlrotate-rtl var(--zd_no_transition8) linear infinite;
}

.loadingelement:before,
.loadingelement:after {
  content: '';
  position: absolute;
}

.loadingelement:before, .loadingelement:after {
  background-color: var(--button_loading_bg_color);
  border-radius: var(--button_loading_border_radius);
}

.smallloading,
.mediumloading {
  height: var(--zd_size10) ;
  width: var(--zd_size10) ;
}

.loadingelement:after {
  top: var(--zd_size1) ;
  bottom: var(--zd_size1) ;
}

[dir=ltr] .loadingelement:after {
  left: var(--zd_size1) ;
  right: var(--zd_size1) ;
}

[dir=rtl] .loadingelement:after {
  right: var(--zd_size1) ;
  left: var(--zd_size1) ;
}

.loadingelement {
  --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
}

.primaryelement {
  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
}

.primaryfilledelement {
  --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
}

.dangerelement {
  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
}

.dangerfilledelement {
  --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
}

.successelement {
  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
}

.successfilledelement {
  --button_loading_bg_color: var(--zdt_button_successfill_bg);
}

.secondaryfilledelement {
  --button_loading_bg_color: var(--zdt_button_secondaryfill_bg);
}

.secondaryelement {
  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
}

.tertiaryfilledelement {
  --button_loading_bg_color: var(--zdt_button_tertiaryfill_bg);
}

.loadingelement:after,
.primaryelement:after,
.primaryfilledelement:after,
.dangerelement:after,
.dangerfilledelement:after,
.successelement:after,
.successfilledelement:after,
.secondaryelement:after,
.secondaryfilledelement:after,
.tertiaryfilledelement:after {
  --button_loading_bg_color: inherit;
}

.loadingelement:before {
  top: calc( var(--zd_size1) * -1 ) ;
  bottom: calc( var(--zd_size1) * -1 ) ;
  background: var(--zdt_button_loading_linear_gradient);
  background-repeat: no-repeat;
  background-size: 50% 50%;
}

[dir=ltr] .loadingelement:before {
  left: calc( var(--zd_size1) * -1 ) ;
  right: calc( var(--zd_size1) * -1 ) ;
}

[dir=rtl] .loadingelement:before {
  right: calc( var(--zd_size1) * -1 ) ;
  left: calc( var(--zd_size1) * -1 ) ;
}

.primaryelement:before {
  --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_primary_linear_gradient);
  transform: rotateX(180deg);
}

.dangerelement:before {
  --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_danger_linear_gradient);
  transform: rotateX(180deg);
}

.primaryTick {
  --button_success_border_color: var(--zdt_button_default_border);
}

.primaryfilled .tickElement {
  --button_success_border_color: var(--zdt_button_tick_primary_border);
}

.successelement:before {
  --button_loading_bg_color: var(--zdt_button_success_border);
  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_success_linear_gradient);
}

.secondaryelement:before {
  --button_loading_bg_color: var(--zdt_button_secondaryfill_bg);
  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_secondary_linear_gradient);
  transform: rotateX(180deg);
}

.dangerTick {
  --button_success_border_color: var(--zdt_button_danger_border);
}

.successTick {
  --button_success_border_color: var(--zdt_button_success_border);
}

.secondaryTick {
  --button_success_border_color: var(--zdt_button_secondary_border);
}

.secondaryfilledTick {
  --button_success_border_color: var(--zdt_button_secondary_border);
}

.secondaryfilledelement:before {
  --button_loading_bg_color: var(--zdt_button_secondaryfill_bg);
  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_secondary_linear_gradient);
  transform: rotateX(180deg);
}

@keyframes crlrotate-ltr {
  0% {
    transform: scaleX(-1) rotate(0deg);
  }

  100% {
    transform: scaleX(-1) rotate(-360deg);
  }
}

@keyframes crlrotate-rtl {
  0% {
    transform: scaleX(-1) rotate(0deg);
  }

  100% {
    transform: scaleX(-1) rotate(360deg);
  }
}

@-moz-keyframes crlrotate-ltr {
  0% {
    -moz-transform: scaleX(-1) rotate(0deg);
  }

  100% {
    -moz-transform: scaleX(-1) rotate(-360deg);
  }
}

@-moz-keyframes crlrotate-rtl {
  0% {
    -moz-transform: scaleX(-1) rotate(0deg);
  }

  100% {
    -moz-transform: scaleX(-1) rotate(360deg);
  }
}

@-webkit-keyframes crlrotate-ltr {
  0% {
    -webkit-transform: scaleX(-1) rotate(0deg);
  }

  100% {
    -webkit-transform: scaleX(-1) rotate(-360deg);
  }
}

@-webkit-keyframes crlrotate-rtl {
  0% {
    -webkit-transform: scaleX(-1) rotate(0deg);
  }

  100% {
    -webkit-transform: scaleX(-1) rotate(360deg);
  }
}
.successstate {
  position: absolute;
  top: 50% ;
  left: 50% ;
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  z-index: 3;
}

.tickElement {
  height: var(--zd_size15) ;
  position: relative;
  top: calc( var(--zd_size2) * -1 ) ;
  width: var(--zd_size6) ;
  transform: scaleX(-1) rotate(135deg);
  -moz-transform: scaleX(-1) rotate(135deg);
  -webkit-transform: scaleX(-1) rotate(135deg);
  transform-origin: center;
  border-width: 2px 2px 0 0;
  border-style: solid;
  border-color: var(--button_success_border_color);
  animation: tick var(--zd_no_transition3) ease 0s forwards;
}

@keyframes tick {
  0% {
    height: 0 ;
    width: 0 ;
  }

  50% {
    height: 0 ;
    width: var(--zd_size6) ;
  }

  100% {
    height: var(--zd_size15) ;
    width: var(--zd_size6) ;
  }
}

@-moz-keyframes tick {
  0% {
    height: 0 ;
    width: 0 ;
  }

  50% {
    height: 0 ;
    width: var(--zd_size6) ;
  }

  100% {
    height: var(--zd_size15) ;
    width: var(--zd_size6) ;
  }
}

@-webkit-keyframes tick {
  0% {
    height: 0 ;
    width: 0 ;
  }

  50% {
    height: 0 ;
    width: var(--zd_size6) ;
  }

  100% {
    height: var(--zd_size15) ;
    width: var(--zd_size6) ;
  }
}

.loader {
  color: var(--dot_mirror);
}

[dir=ltr] .strike {
  background-image: repeating-linear-gradient(120deg, var(--button_strike_color) 0 1px, transparent 1px 8px);
}

[dir=rtl] .strike {
  background-image: repeating-linear-gradient(-120deg, var(--button_strike_color) 0 1px, transparent 1px 8px);
}

.primaryStrike {
  --button_strike_color: var(--zdt_button_primary_strike);
}

.primaryfilledStrike {
  --button_strike_color: var(--zdt_button_primaryFilled_strike);
  --button_border_color: var(--zdt_button_primaryfill_bg);
}

.dangerStrike {
  --button_strike_color: var(--zdt_button_danger_strike);
}

.dangerfilledStrike {
  --button_strike_color: var(--zdt_button_dangerFilled_strike);
  --button_border_color: var(--zdt_button_dangerfill_bg);
}

.secondaryStrike {
  --button_strike_color: var(--zdt_button_secondary_border);
}

.secondaryfilledStrike {
  --button_strike_color: var(--zdt_button_secondaryFilled_strike);
  --button_border_color: var(--zdt_button_secondaryfill_bg);
}

.tertiaryfilledStrike {
  --button_strike_color: var(--zdt_button_tertiaryFilled_strike);
  --button_border_color: var(--zdt_button_tertiaryfill_bg);
}

.successStrike {
  --button_strike_color: var(--zdt_button_success_strike);
}

.successfilledStrike {
  --button_strike_color: var(--zdt_button_successFilled_strike);
  --button_border_color: var(--zdt_button_successfill_border);
}