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

In this Package, we Provide Some Basic Components to Build Web App

.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_family: var(--zd_regular);
  --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 {
  pointer-events: none;
  --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-family: var(--button_font_family);
  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_family: var(--zd_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:hover {
  --button_text_color: var(--zdt_button_plainprimary_hover_text);
}

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

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

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

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

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

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

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

.primary: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: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: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: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: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: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:hover {
  --button_text_color: var(--zdt_button_secondary_hover_text);
}

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

.successfilled:hover {
  --button_border_color: var(--zdt_button_successfill_hover_border);
  --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: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);
}

.loadingelement:after,
.primaryelement:after,
.primaryfilledelement:after,
.dangerelement:after,
.dangerfilledelement: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);
}

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

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

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

@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;
}

.successelement {
  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)
}