@zohodesk/dot/lib/form/fields/Fields.module.css

In this Library, we Provide Some Basic Components to Build Your Application

.container,
.checkboxFieldContainer {
  position: relative;
  word-break: break-word;
}

.fieldContainer {
  position: relative;
  min-height: var(--zd_size25) ;
}

.fieldMargin_large {
  margin-block-start: var(--zd_size10) ;
}

.fieldMargin_medium {
  margin-block-start: var(--zd_size5) ;
}

.fieldMargin_small {
  margin-block-start: 0 ;
}

.radioContainer,
.checkbox {
  composes: dflex alignVertical flexwrap from '~@zohodesk/components/es/common/common.module.css';
}

.checkbox {
  min-height: var(--zd_size28) ;
}

.checkboxRow {
  display: inherit;
}

.lineClamp_one,
.lineClamp_two {
  composes: clamp from '~@zohodesk/components/es/common/common.module.css';
}

.lineClamp_one {
  -webkit-line-clamp: 1;
}

.lineClamp_two {
  -webkit-line-clamp: 2;
}

.checkboxText {
  padding-inline-start: var(--zd_size6) ;
  composes: wbreak from '~@zohodesk/components/es/common/common.module.css';
  line-height: normal;
}

.cbTextPointer {
  cursor: pointer;
}

.disabled, .readonly {
  cursor: not-allowed;
}

.cbTextReadonly,
.disabled .fieldLabel,
.readonly .fieldLabel {
  --label_cursor: not-allowed;
}

.radio {
  margin-block: var(--zd_size5) ;
  margin-inline: 0 var(--zd_size32) ;
}

.radio,
.radioWrap {
  max-width: 100%  
}

.radiosWrapper {
  gap: var(--zd_size10) 
}

.radioBox {
  max-width: 100% ;
  transition: border var(--zd_transition3);
  border: 1px solid var(--zdt_radiofield_box_border);
  border-radius: 6px;
}

.radioBox.primaryTextOnly {
  padding-inline: var(--zd_size10) ;
  padding-block:0 ;
  height: var(--zd_size36) ;
}

.radioBox.withSecondaryText {
  padding-block: var(--zd_size18) ;
  padding-inline:var(--zd_size16) ;
}

.hoverableRadioBox:hover, .radioBoxActive {
  border-color: var(--zdt_radiofield_box_active_border)
}

.radioBoxActive {
  background-color: var(--zdt_radiofield_box_active_bg)
}

.duration {
  margin-inline-end: var(--zd_size15) ;
}

.durationWidth {
  width: var(--zd_size94) ;
}

.flex {
  composes: dflex from '~@zohodesk/components/es/common/common.module.css';
}

.periodContainer {
  composes: dflex flexrow flexwrap from '~@zohodesk/components/es/common/common.module.css';
  width: 100% ;
  /*margin-left: 15px;*/
}

.phoneIcon {
  color: var(--zdt_fields_phoneicon_icon);
  margin-block: var(--zd_size15) 0 ;
  margin-inline:var(--zd_size10) ;
  display: inline-block;
  cursor: pointer;
}

.phoneIcon:hover {
  color: var(--zdt_fields_phoneicon_hover_icon);
}

.newtabIcon {
  color: var(--zdt_fields_newtabicon_icon);
  cursor: pointer;
}

.newtabIcon:hover {
  color: var(--zdt_fields_newtabicon_hover_icon);
}

.labelContainer {
  composes: dflex alignVertical from '~@zohodesk/components/es/common/common.module.css';
}

.lockIcon,
.infoIcon {
  color: var(--zdt_fields_lockicon_icon);
  margin-inline-start: var(--zd_size5) ;
  composes: dInflex from '~@zohodesk/components/es/common/common.module.css';
}

/* .infoIcon {
  opacity: 0;
  visibility: hidden;
}
.container:hover .infoIcon {
  opacity: 1;
  visibility: visible;
} */
/* .lockIcon {
  cursor: pointer;
} */
.lockIcon:hover {
  color: var(--zdt_fields_lockicon_hover_icon);
}

.timeFormat {
  font-size: var(--zd_font_size11) ;
  margin-inline-start: var(--zd_size4) ;
  color: var(--zdt_fields_lockicon_icon);
}

.newTab {
  margin-inline-start: var(--zd_size6) ;
  color: var(--zdt_fields_lockicon_icon);
  font-size: 0 ;
  display: none;
  cursor: pointer;
}

.newTab:hover {
  color: var(--zdt_fields_phoneicon_icon);
}

.container:hover .newTab {
  display: block;
}

.lockText {
  font-size: var(--zd_font_size13) ;
  font-style: italic;
  composes: wbreak from '~@zohodesk/components/es/common/common.module.css';
}

.labelMandatory:after {
  content: '*';
  padding-inline-start: var(--zd_size2) ;
  color: var(--zdt_fields_lockicon_hover_icon);
}

.ePhiTag {
  composes: flexshrink from '~@zohodesk/components/es/common/common.module.css';
  color: var(--zdt_fields_phitag_text);
  font-size: var(--zd_font_size12) ;
  padding-inline: var(--zd_size5) ;
  padding-block:0 ;
  margin-inline-start: var(--zd_size8) ;
  height: var(--zd_size18) ;
  line-height: 1.5;
  background-color: var(--zdt_fields_phitag_bg);
  border: 1px solid var(--zdt_fields_phitag_border);
  border-radius: 3px;
}

.hasChildren {
  position: relative;
}

.rightPlaceholder {
  position: absolute;
  bottom: var(--zd_size4) 
}

[dir=ltr] .rightPlaceholder {
  right: var(--zd_size15) 
}

[dir=rtl] .rightPlaceholder {
  left: var(--zd_size15) 
}

.phoneField {
  composes: ltr-zone from '~@zohodesk/components/es/common/common.module.css';
}

.lineClampPickListItem {
  --line-clamp: var(--picklist-field-line-clamp, 3);
}