@zohodesk/components 1.0.0-temp-46 → 1.0.0-temp-47

package/lib/Button/Button.module.css

@@ -0,0 +1,518 @@
+.varClass {
+  /* button default variables */
+  --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);
+}
+.default {
+  composes: varClass;
+  transition: all var(--zd_transition2) ease 0s;
+  letter-spacing: var(--button_letter_spacing);
+  opacity: var(--button_opacity);
+  border: 0;
+  cursor: var(--button_cursor);
+}
+
+.default:disabled {
+  pointer-events: none;
+  --button_cursor: not-allowed;
+  --button_opacity: 0.4;
+}
+
+.container {
+  composes: default;
+  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: 0 3px 10px var(--zdt_button_primary_box_shadow);
+}
+
+.smallBtndanger,
+.smallBtndangerfilled,
+.mediumBtndanger,
+.mediumBtndangerfilled {
+  --button_box_shadow: 0 3px 10px var(--zdt_button_danger_box_shadow);
+}
+
+.small,
+.medium,
+.large,
+.xlarge,
+.smallBtn,
+.mediumBtn {
+  composes: container;
+}
+
+.plainprimary {
+  --button_text_color: var(--zdt_button_default_text);
+  --button_padding: var(--zd_size5);
+  --button_min_width: initial;
+  --button_bg_color: var(--zdt_button_default_bg);
+}
+.plainprimary:hover {
+  --button_text_color: var(--zdt_button_plainprimary_hover_text);
+}
+
+.plainsecondary {
+  --button_text_color: var(--zdt_button_secondary_text);
+  --button_padding: var(--zd_size5);
+  --button_min_width: initial;
+  --button_bg_color: var(--zdt_button_default_bg);
+}
+.plainsecondary:hover {
+  --button_text_color: var(--zdt_button_secondary_hover_text);
+}
+
+.primary,
+.primaryfilled,
+.danger,
+.dangerfilled,
+.secondary,
+.secondaryfilled,
+.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);
+}
+
+.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);
+  transform: rotateX(180deg);
+}
+
+.dangerelement:before {
+  --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
+  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);
+  }
+}
+.success {
+  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);
+  -ms-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);
+  }
+}