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

package/lib/common/docStyle.module.css

@@ -0,0 +1,762 @@
+.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_prime);
+}
+
+.dark {
+  composes: p10;
+  background-color: var(--dot_black);
+}
+
+.table {
+  composes: p10;
+  composes: cboth;
+  border: 1px solid var(--zd_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_smoke1);
+}
+
+.palette {
+  composes: dinblk;
+  composes: vtop;
+  composes: p10;
+  composes: m10;
+  width: 200px;
+  composes: tcenter;
+  font-weight: bold;
+  border: 1px solid var(--zd_smoke83);
+  border-radius: 3px;
+}
+
+.palette .palettecard {
+  height: 80px;
+  border: 1px solid var(--zd_smoke83);
+}
+
+.palette span {
+  display: block;
+  font-size: 13px;
+  margin-top: 5px;
+}
+
+.fontlist {
+  composes: tcenter;
+  composes: p10;
+  composes: m10;
+  border: 1px solid var(--zd_smoke83);
+  border-radius: 3px;
+}
+
+.fontlist span {
+  display: block;
+  margin-top: 5px;
+}
+
+.cover {
+  composes: p10;
+  composes: m10;
+  border: 1px solid var(--zd_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;
+}
+
+.lft {
+  width: 300px;
+}
+.head {
+  background-color: #e2e4e6;
+  padding: 5px;
+}
+.content, .trow {
+  padding: 5px;
+}
+.trow {
+  border-bottom: 1px dotted #e2e4e6;
+}
+.trow:hover {
+  background-color: #f6f6f6;
+}
+.colorvalue {
+  font-size: 13px;
+  color: #000;
+  background-color: #e2e4e6;
+  padding: 3px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+[dir=ltr] .colorvalue {
+  margin-right: 3px;
+}
+[dir=rtl] .colorvalue {
+  margin-left: 3px;
+}
+.rect {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  border: 1px solid #e2e4e6;
+  margin-bottom: 5px;
+}
+.nestedDiv:first-child .gold {
+  border: 3px solid goldenrod;
+}
+.nestedDiv {
+  display: inline-flex;
+  flex-direction: column;
+  border: 1px dotted #ccc;
+  padding: 4px 6px;
+}
+[dir=ltr] .nestedDiv {
+  margin-right: 5px;
+}
+[dir=rtl] .nestedDiv {
+  margin-left: 5px;
+}
+.para {
+  font-size: 13px;
+  margin-bottom: 5px;
+}
+
+[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%);
+}