@zohodesk/components 1.0.0-alpha-195 → 1.0.0-alpha-199

package/lib/common/docStyle.module.css

@@ -1,705 +0,0 @@
-.cboth::after {
-  content: '.';
-  display: block;
-  font-size: 0;
-  height: 0;
-  line-height: 0;
-  visibility: hidden;
-  clear: both;
-}
-
-.m10 {
-  margin: 10px;
-}
-
-.m50 {
-  margin: 50px;
-}
-
-[dir=ltr] .pl10 {
-  padding-left: 10px;
-}
-
-[dir=rtl] .pl10 {
-  padding-right: 10px;
-}
-
-.p10 {
-  padding: 10px;
-}
-
-.dinblk {
-  display: inline-block;
-}
-
-.docspan {
-  composes: m10;
-  composes: dinblk;
-}
-
-.vtop {
-  vertical-align: top;
-}
-
-.h100px {
-  height: 100px;
-}
-
-.w350 {
-  width: 350px;
-}
-
-.w410 {
-  width: 25.625rem;
-}
-
-.w250 {
-  width: 250px;
-}
-
-.w200 {
-  width: 200px;
-}
-
-.mb20 {
-  margin-bottom: 20px;
-}
-
-[dir=ltr] .mr20 {
-  margin-right: 20px;
-}
-
-[dir=rtl] .mr20 {
-  margin-left: 20px;
-}
-
-.w60 {
-  width: 60%;
-}
-
-.w40 {
-  width: 40%;
-}
-
-.w100 {
-  width: 100%;
-}
-
-.w320px {
-  width: 320px;
-}
-
-.tcenter {
-  text-align: center;
-}
-
-.blue {
-  color: var(--zd_text_prime);
-}
-
-.dark {
-  composes: p10;
-  background-color: var(--dot_bg_black);
-}
-
-.table {
-  composes: p10;
-  composes: cboth;
-  border: 1px solid var(--zd_border_smoke84);
-  border-radius: 3px;
-}
-
-[dir=ltr] .table .w60, [dir=ltr] .table .w40 {
-  float: left;
-}
-
-[dir=rtl] .table .w60, [dir=rtl] .table .w40 {
-  float: right;
-}
-
-.tableheading {
-  composes: blue;
-  background: var(--zd_bg_smoke1);
-}
-
-.palette {
-  composes: dinblk;
-  composes: vtop;
-  composes: p10;
-  composes: m10;
-  width: 200px;
-  composes: tcenter;
-  font-weight: bold;
-  border: 1px solid var(--zd_border_smoke83);
-  border-radius: 3px;
-}
-
-.palette .palettecard {
-  height: 80px;
-  border: 1px solid var(--zd_border_smoke83);
-}
-
-.palette span {
-  display: block;
-  font-size: 13px;
-  margin-top: 5px;
-}
-
-.fontlist {
-  composes: tcenter;
-  composes: p10;
-  composes: m10;
-  border: 1px solid var(--zd_border_smoke83);
-  border-radius: 3px;
-}
-
-.fontlist span {
-  display: block;
-  margin-top: 5px;
-}
-
-.cover {
-  composes: p10;
-  composes: m10;
-  border: 1px solid var(--zd_border_smoke1);
-  border-radius: 5px;
-}
-
-.posrel {
-  position: relative;
-}
-
-.w342 {
-  width: 342px;
-}
-
-.w386 {
-  width: 386px;
-}
-
-.Lhslist {
-  width: 200px;
-  margin: 15px;
-}
-
-.w260 {
-  width: 260px;
-}
-
-.m20 {
-  margin: 20px;
-}
-
-.h604px {
-  height: 604px;
-}
-
-.w310 {
-  width: 310px;
-}
-
-[data-mode='default'] {
-  color: #000;
-  background: #fff;
-}
-[data-mode='dark'] {
-  color: #E2E4E6;
-  background: #232B38;
-}
-
-.baseHue {
-  --hue: 20;
-  --black-white: 0;
-}
-
-/* custom avatar css */
-.customAvatar {
-  composes: baseHue;
-  --avatar_bg_color: hsl(var(--hue), 100%, 90%);
-  --avatar_border_color: hsl(var(--hue), 100%, 60%);
-  --avatar_text_color: hsl(var(--hue), 100%, 40%);
-}
-[dir=ltr] .customAvatar {
-  --avatar_border_radius: 0 12px/*rtl: 12px 0*/;
-}
-[dir=rtl] .customAvatar {
-  --avatar_border_radius: 12px 0;
-}
-.customAvatar:hover {
-  --avatar_border_width: 2px;
-  --avatar_bg_color: hsl(var(--hue), 100%, 85%);
-}
-.customAvatar:active {
-  --avatar_border_width: 1px;
-  --avatar_bg_color: hsl(var(--black-white), 100%, 100%);
-  --avatar_border_style: dotted;
-}
-
-/* custom avatar team css */
-.avatar {
-  composes: baseHue;
-  --avatar_bg_color: hsl(var(--hue), 100%, 90%);
-  --avatar_border_color: hsl(var(--hue), 100%, 60%);
-  --avatar_text_color: hsl(var(--hue), 100%, 40%);
-  --avatar_width: 60px;
-  --avatar_height: 60px;
-}
-.avatar:hover {
-  --avatar_border_width: 2px;
-  --avatar_bg_color: hsl(var(--hue), 100%, 85%);
-}
-.avatar:active {
-  --avatar_border_width: 1px;
-  --avatar_bg_color: hsl(var(--black-white), 100%, 100%);
-  --avatar_border_style: dotted;
-}
-.avatarTeam {
-  composes: baseHue;
-  --avatarteam_border_color: hsl(var(--hue), 100%, 40%);
-  --avatarteam_border_style: dashed;
-  --avatarteam_bg_color: hsl(var(--hue), 90%, 95%);
-}
-.avatarTeam:before,
-.avatarTeam:after {
-  --avatarteam_bottom_top: 46px;
-}
-.avatarTeam:before {
-  --avatarteam_bottom_right: 22px;
-}
-.avatarTeam:after {
-  --avatarteam_bottom_left: 22px;
-}
-
-/* custom button css */
-.customButton {
-  composes: baseHue;
-  --button_bg_color: hsl(var(--hue), 100%, 70%);
-  --button_border_color: hsl(var(--hue), 100%, 40%);
-  --button_text_color: hsl(var(--hue), 100%, 30%);
-  --button_border_width: 1px;
-}
-.customButton:hover {
-  --button_bg_color: hsl(var(--hue), 100%, 60%);
-  --button_border_color: hsl(var(--hue), 100%, 20%);
-  --button_text_color: hsl(var(--hue), 100%, 20%);
-}
-.status {
-  --button_loading_bg_color: hsl(var(--hue), 100%, 70%);
-  --button_loading_border_radius: 5px;
-  --button_success_border_color: hsl(var(--hue), 100%, 90%);
-}
-.statusSize {
-  width: 30px;
-  height: 20px;
-}
-
-/* custom button group css */
-.btnGroup {
-  composes: baseHue;
-  --buttongroup_bg_color: hsl(var(--hue), 90%, 90%);
-}
-
-/* custom card, card header, card content, card footer css */
-.customCard {
-  composes: baseHue;
-  background: hsl(var(--hue), 95%, 95%);
-}
-.customCardHeader {
-  background: hsl(var(--hue), 55%, 65%);
-  border: 1px solid hsl(var(--hue), 35%, 45%);
-  padding: 10px 20px;
-  margin: 5px 5px 0 5px;
-  border-radius: 10px 10px 0 0;
-}
-.customCardContent {
-  border-width: 0 1px 0 1px;
-  border-style: solid;
-  border-color: hsl(var(--hue), 35%, 45%);
-  margin: 0 5px;
-  padding: 10px 20px;
-}
-.customCardFooter {
-  background-color: hsl(var(--hue), 55%, 65%);
-  padding: 5px 20px;
-  margin: 0 5px 5px 5px;
-  border-radius: 0 0 10px 10px;
-  border: 1px solid hsl(var(--hue), 35%, 45%);
-}
-
-/* custom checkbox css */
-.customCbox,
-.readOnlyCbox {
-  composes: baseHue;
-  --checkbox_bg_color: hsl(var(--hue), 95%, 95%);
-  --checkbox_stroke_width: 3px;
-  --checkbox_stroke_color: hsl(var(--hue), 100%, 50%);
-  --checkbox_checked_stroke_color: hsl(var(--hue), 100%, 10%);
-}
-.customCbox:hover,
-.customCbox:focus {
-  --checkbox_stroke_color: hsl(var(--hue), 100%, 30%);
-  --checkbox_checked_stroke_color: hsl(var(--hue), 100%, 10%);
-}
-.disabledCbox {
-  composes: baseHue;
-  --checkbox_stroke_width: 3px;
-  --checkbox_stroke_color: hsl(var(--hue), 80%, 80%);
-  --checkbox_checked_stroke_color: hsl(var(--hue), 100%, 10%);
-}
-.largeCbox {
-  width: 24px;
-  height: 24px;
-}
-.largeCboxTick {
-  width: 28px;
-  height: 28px;
-}
-
-/* custom dropbox css */
-.customDropbox {
-  composes: baseHue;
-  --dropbox_bg_color: hsl(var(--hue), 100%, 98%);
-  --dropbox_box_shadow: 0 0 10px hsl(var(--hue), 100%, 90%);
-  --dropbox_arrow_box_shadow_color: hsl(var(--hue), 100%, 90%);
-}
-[dir=ltr] .customDropbox {
-  --dropbox_border_radius: 30px 0/*rtl:0 30px*/;
-}
-[dir=rtl] .customDropbox {
-  --dropbox_border_radius: 0 30px;
-}
-.customDropbox:hover {
-  --dropbox_box_shadow: 0 0 10px hsl(var(--hue), 100%, 80%);
-  --dropbox_arrow_box_shadow_color: hsl(var(--hue), 100%, 80%);
-}
-.customDropbox:active {
-  --dropbox_bg_color: hsl(var(--hue), 100%, 100%);
-}
-.mobDropbox {
-  --dropbox_bg_color: hsl(var(--hue), 100%, 98%);
-  --dropbox_box_shadow: 0 0 10px hsl(var(--hue), 100%, 90%);
-  --dropbox_mob_close_bg_color: hsl(var(--hue), 100%, 80%);
-}
-.dropboxSize {
-  width: 240px;
-}
-.mobBg {
-  composes: baseHue;
-  --dropbox_mob_bg_color: hsl(var(--hue), 100%, 50%, 0.05);
-}
-
-/* custom label css */
-.customLbl,
-.readOnlyLbl {
-  composes: baseHue;
-  --label_text_color: hsl(var(--hue), 100%, 50%);
-  --label_line_height: 22px;
-  --checkbox_checked_active_color: hsl(var(--hue), 100%, 10%);
-}
-.customLbl:hover,
-.customLbl:focus {
-  --label_text_color: hsl(var(--hue), 100%, 30%);
-}
-.disabledLabel {
-  composes: baseHue;
-  --label_text_color: hsl(var(--hue), 80%, 80%);
-}
-
-/* custom tag css */
-.customTag {
-  composes: baseHue;
-  --tag_bg_color: hsl(var(--hue), 100%, 80%);
-  --tag_text_color: hsl(var(--hue), 100%, 30%);
-  --tag_border_width: 1px;
-  --tag_border_color: hsl(var(--hue), 100%, 50%);
-}
-.customTag:hover {
-  --tag_bg_color: hsl(var(--hue), 100%, 75%);
-  --tag_text_color: hsl(var(--hue), 100%, 30%);
-}
-.tagAvatar {
-  --avatar_bg_color: hsl(var(--hue), 100%, 95%);
-  --avatar_border_color: hsl(var(--hue), 100%, 70%);
-  --avatar_text_color: hsl(var(--hue), 100%, 40%);
-  --avatar_border_radius: 0;
-}
-.customTag:hover .tagAvatar {
-  --avatar_bg_color: hsl(var(--hue), 100%, 100%);
-}
-.customTag:hover .tagAvatar:hover {
-  --avatar_bg_color: hsl(var(--hue), 100%, 10%);
-  --avatar_text_color: hsl(var(--hue), 100%, 90%);
-}
-.customTag:active {
-  --tag_bg_color: hsl(var(--black-white), 100%, 100%);
-}
-.customClose {
-  --tag_closeicon_color: hsl(var(--hue), 100%, 95%);
-  --tag_closeicon_bg_color: hsl(var(--black-white), 30%, 45%);
-}
-.customClose:hover {
-  --tag_closeicon_color: hsl(var(--hue), 100%, 100%);
-  --tag_closeicon_bg_color: hsl(var(--black-white), 30%, 15%);
-}
-.tagDisabled {
-  composes: baseHue;
-  --tag_bg_color: hsl(var(--hue), 70%, 90%);
-  --tag_border_width: 1px;
-  --tag_border_color: hsl(var(--hue), 0%, 80%);
-}
-
-/* custom textbox css */
-.customTextBox {
-  composes: baseHue;
-  --textbox_text_color: hsl(var(--hue), 100%, 50%);
-  --textbox_placeholder_text_color: hsl(var(--hue), 20%, 50%);
-  --textbox_bg_color: hsl(var(--hue), 100%, 90%);
-  --textbox_border_width: 1px;
-  --textbox_border_radius: 2px;
-  --textbox_border_color: hsl(var(--hue), 100%, 80%);
-  --textbox_padding: 0 10px;
-  margin: 5px 0;
-}
-.customTextBox:hover {
-  --textbox_border_color: hsl(var(--hue), 100%, 60%);
-}
-.customTextBox:focus {
-  --textbox_border_width: 2px;
-  --textbox_border_color: hsl(var(--hue), 100%, 60%);
-}
-.customTextBox:disabled,
-.customTextBox:disabled:hover {
-  --textbox_bg_color: hsl(var(--hue), 90%, 90%);
-  --textbox_border_color: hsl(var(--hue), 90%, 90%);
-  --textbox_text_color: hsl(var(--hue), 70%, 70%);
-}
-.txtBoxReadOnly {
-  --textbox_border_width: 1px;
-  --textbox_border_style: dashed;
-  --textbox_padding: 0 10px;
-}
-
-/* custom dropdown css */
-.dropdownheading {
-  composes: baseHue;
-  --dropdownheading_text_color: hsl(var(--hue), 100%, 60%);
-  --dropdownheading_underline_width: 50px;
-  --dropdownheading_underline_height: 2px;
-}
-.dropdownheading:after {
-  --dropdownheading_underline_bg_color: hsl(var(--hue), 100%, 40%);
-}
-
-/* custom radio css */
-.radio {
-  composes: baseHue;
-  --radio_width: 30px;
-  --radio_height: 30px;
-  --radio_bg_color: hsl(var(--hue), 100%, 50%, 0.25);
-  --radio_stroke_color: hsl(var(--hue), 100%, 50%, 0.35);
-  --radio_fill: hsl(var(--hue), 100%, 50%, 0.45);
-}
-.radioWrap {
-  --radio_label_margin: 10px 20px;
-}
-.radioWrap:hover .radio,
-.radioWrap:focus .radio {
-  --radio_stroke_color: hsl(var(--hue), 100%, 30%, 0.25);
-  --radio_fill: hsl(var(--hue), 100%, 30%, 0.45);
-  --radio_bg_color: hsl(var(--hue), 100%, 30%, 0.25);
-  --radio_inner_stroke_width: 2px;
-}
-.radioWrap:hover .customLbl,
-.radioWrap:focus .customLbl {
-  --label_text_color: hsl(var(--hue), 100%, 30%);
-}
-.radioDisabled {
-  composes: baseHue;
-  --radio_width: 30px;
-  --radio_height: 30px;
-  --radio_bg_color: hsl(var(--hue), 100%, 50%, 0.10);
-  --radio_stroke_color: hsl(var(--hue), 100%, 50%, 0.10);
-  --radio_fill: hsl(var(--hue), 100%, 50%, 0.10);
-}
-
-/* custom listitem css */
-.listItem {
-  composes: baseHue;
-  --listitem_text_color: hsl(var(--hue), 100%, 50%);
-  --listitem_border_color: hsl(var(--hue), 100%, 50%);
-  --listitem_bg_color: hsl(var(--hue), 100%, 95%);
-  --listitem_highlight_bg_color: hsl(var(--hue), 100%, 90%);
-  --listitem_active_bg_color: hsl(var(--hue), 100%, 80%);
-}
-.listItem:hover {
-  --listitem_bg_color: hsl(var(--hue), 100%, 92%);
-  --listitem_active_bg_color: hsl(var(--hue), 100%, 80%);
-}
-.listTick {
-  --listitem_tickicon_color: hsl(var(--hue), 100%, 50%);
-}
-.listItemAvatar {
-  --avatar_bg_color: hsl(var(--hue), 100%, 100%);
-  --avatar_border_color: hsl(var(--hue), 100%, 85%);
-  --avatar_text_color: hsl(var(--hue), 100%, 50%);
-}
-.listItem:hover .listItemAvatar {
-  --avatar_bg_color: hsl(var(--hue), 100%, 50%);
-  --avatar_text_color: hsl(var(--hue), 100%, 100%);
-}
-.listAvatarTeam {
-  --avatarteam_border_color: hsl(var(--hue), 100%, 85%);
-}
-.listRadio {
-  --radio_bg_color: hsl(var(--hue), 100%, 50%, 0.25);
-  --radio_stroke_color: hsl(var(--hue), 100%, 50%, 0.35);
-  --radio_fill: hsl(var(--hue), 100%, 50%, 0.45);
-}
-.listRadioWrap:hover .listRadio {
-  --radio_stroke_color: hsl(var(--hue), 100%, 50%, 0.45);
-}
-
-/* custom ribbon css */
-.ribbon {
-  composes: baseHue;
-  --ribbon_bg_color: hsl(var(--hue), 100%, 85%);
-  --ribbon_text_color: hsl(var(--hue), 100%, 50%);
-}
-.plainRibbon {
-  composes: ribbon;
-  --ribbon_bg_color: none;
-}
-.flagRibbon {
-  composes: ribbon;
-}
-[dir=ltr] .flagRibbon {
-  --ribbon_padding: 10px 20px/*rtl: 10px 20px*/;
-  --ribbon_flag_border_width: 20px 10px 20px 0/*rtl: 20px 0 20px 10px*/;
-}
-[dir=rtl] .flagRibbon {
-  --ribbon_padding: 10px 20px;
-  --ribbon_flag_border_width: 20px 0 20px 10px;
-}
-.tagRibbon {
-  composes: ribbon;
-  height: 56px;
-  --ribbon_tag_before_width: 40px;
-  --ribbon_tag_before_height: 40px;
-  --ribbon_tag_before_border_color: hsl(var(--hue), 100%, 50%);
-  --ribbon_tag_before_left: -20px;
-  --ribbon_tag_before_top: 6px;
-  --ribbon_tag_before_border_radius: 0;
-  border-color: hsl(var(--hue), 100%, 50%);
-}
-[dir=ltr] .tagRibbon {
-  border-width: 2px 2px 2px 0/*rtl: 2px 0 2px 2px*/;
-  border-radius: 0 6px 6px 0/*rtl: 6px 0 0 6px*/;
-  margin-left: 30px;
-  padding: 18px 30px/*rtl: 18px 30px*/;
-  --ribbon_tag_before_border_width: 2px 0 0 2px/*rtl: 2px 2px 0 0*/;
-}
-[dir=rtl] .tagRibbon {
-  border-width: 2px 0 2px 2px;
-  border-radius: 6px 0 0 6px;
-  margin-right: 30px;
-  padding: 18px 30px;
-  --ribbon_tag_before_border_width: 2px 2px 0 0;
-}
-.boxRibbon {
-  composes: ribbon;
-  border-radius: 5px;
-}
-
-/* custom stencil css */
-.customStencil {
-  --stencil_height: 10px;
-  --stencil_width: 100%;
-  --stencil_border_radius: 1px;
-}
-.squareStencil {
-  --stencil_height: 30px;
-  --stencil_width: 30px;
-}
-
-/* custom switch css */
-.customSwitchWrap {
-  composes: baseHue;
-}
-.customSwitch {
-  --switch_off_bg_color: hsl(var(--hue), 100%, 90%);
-  --switch_on_bg_color: hsl(var(--hue), 100%, 50%);
-  --switch_circle_bg_color: hsl(var(--hue), 100%, 97%);
-}
-.customSwitchWrap:hover .customSwitch,
-.customSwitchWrap:focus .customSwitch {
-  --switch_off_bg_color: hsl(var(--hue), 100%, 80%);
-}
-
-/* custom textboxicon css */
-.customTboxwrap {
-  composes: baseHue;
-  --textboxicon_icon_margin: 4px 10px;
-  --textboxicon_icon_color: hsl(var(--hue), 100%, 50%);
-  background-color: hsl(var(--hue), 100%, 90%);
-  margin: 5px 0;
-}
-.customTbox {
-  --textbox_text_color: hsl(var(--hue), 100%, 50%);
-  --textbox_placeholder_text_color: hsl(var(--hue), 20%, 50%);
-  --textbox_bg_color: hsl(var(--hue), 100%, 90%);
-  --textbox_border_width: 0;
-}
-.tBoxLine {
-  --textboxicon_line_height: 2px;
-  --textboxicon_line_color: hsl(var(--hue), 100%, 50%);
-}
-.customTboxwrap:hover .tBoxLine {
-  --textboxicon_line_color: hsl(var(--hue), 100%, 30%);
-}
-.customTboxwrap:focus-within .tBoxLine {
-  --textboxicon_line_color: hsl(var(--hue), 100%, 10%);
-}
-.customTboxwrap:hover .customTboxicon {
-  --textboxicon_icon_color: hsl(var(--hue), 100%, 30%);
-}
-.customTboxwrap:focus-within .customTboxicon {
-  --textboxicon_icon_color: hsl(var(--hue), 100%, 10%);
-}
-.tBoxIconRead,
-.tBoxIconDisable {
-  composes: baseHue;
-}
-.tBoxIconRead, .tBoxIconDisable {
-  background-color: hsl(var(--hue), 100%, 90%);
-  margin: 5px 0;
-}
-.tBoxLineDisable,
-.tBoxIconRead:hover .tBoxLineDisable,
-.tBoxIconDisable:hover .tBoxLineDisable {
-  --textboxicon_line_height: 2px;
-  --textboxicon_line_color: hsl(var(--hue), 100%, 80%);
-}
-
-/* custom textarea css */
-.customTextarea {
-  composes: baseHue;
-  --textarea_border_width: 1px;
-  --textarea_border_color: hsl(var(--hue), 100%, 50%);
-  --textarea_text_color: hsl(var(--hue), 100%, 50%);
-  --textarea_padding: 2px 10px;
-  background-color: hsl(var(--hue), 100%, 97%);
-}
-.customTextarea:hover {
-  --textarea_border_color: hsl(var(--hue), 100%, 40%);
-}
-.customTextarea:focus {
-  --textarea_border_color: hsl(var(--hue), 100%, 30%);
-}
-.disabledTarea {
-  composes: baseHue;
-  --textarea_border_width: 1px;
-  --textarea_border_color: hsl(var(--hue), 100%, 80%);
-  --textarea_text_color: hsl(var(--hue), 100%, 80%);
-  --textarea_padding: 2px 10px;
-  background-color: hsl(var(--hue), 100%, 97%);
-}

package/lib/common/reset.module.css

@@ -1,12 +0,0 @@
-*,
-:after,
-:before {
-  outline: 0;
-  box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-}
-html {
-  font-size: 16px;
-}