@zohodesk/components 1.0.0-alpha-248 → 1.0.0-alpha-249

package/lib/Button/Button.module.css

@@ -1,522 +0,0 @@
-.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);
-  --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);
-  }
-}
-.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);
-  -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)}