@zohodesk/components/es/TextBox/TextBox.module.css

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

.varClass {
  /* textbox default variables */
  --textbox_text_color: var(--zdt_textbox_default_text);
  --textbox_bg_color: var(--zdt_textbox_default_bg);
  --textbox_border_width: 0;
  --textbox_border_style: solid;
  --textbox_border_color: var(--zdt_textbox_default_border);
  --textbox_font_size: var(--zd_font_size14);
  --textbox_width: 100%;
  --textbox_height: var(--zd_size35);
  --textbox_border_radius: none;
  --textbox_font_family: var(--zd_regular);
  /*  Variable:Ignore  */
  --textbox_letter_spacing: 0.1px;
  --textbox_padding: 0;
  --textbox_cursor: text;
  --textbox_line_height: 2.5;

  /* textbox placeholder default variable */
  --textbox_placeholder_text_color: var(--zdt_textbox_placeholder_text);
}

.basic {
  composes: varClass;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  letter-spacing: var(--textbox_letter_spacing);
  /* css:theme-validation:ignore */
  border: var(--textbox_border_width);
  cursor: var(--textbox_cursor);
}

.basic::placeholder {
  color: var(--textbox_placeholder_text_color);
}

.basic::-webkit-placeholder {
  color: var(--textbox_placeholder_text_color);
}

.basic::-moz-placeholder {
  color: var(--textbox_placeholder_text_color);
}

.basic::-ms-placeholder {
  color: var(--textbox_placeholder_text_color);
}

/* css:lineheight-validation:ignore */
.container {
  composes: basic;
  transition: border var(--zd_transition2) linear 0s;
  -moz-transition: border var(--zd_transition2) linear 0s;
  width: var(--textbox_width);
  color: var(--textbox_text_color);
  font-size: var(--textbox_font_size);
  height: var(--textbox_height);
  line-height: var(--textbox_line_height);
  background-color: var(--textbox_bg_color);
  -webkit-transition: border var(--zd_transition2) linear 0s;
  padding: var(--textbox_padding);
  border-radius: var(--textbox_border_radius);
  border-width: var(--textbox_border_width);
  border-style: var(--textbox_border_style);
  border-color: var(--textbox_border_color);
}

.basic:disabled,
.container:disabled,
.container:disabled:hover {
  --textbox_cursor: not-allowed;
  --textbox_text_color: var(--zdt_textbox_disabled_text);
}

.container:disabled,
.container:disabled:hover {
  --textbox_bg_color: none;
}

.container::placeholder {
  color: var(--textbox_placeholder_text_color);
}

.container::-webkit-placeholder {
  color: var(--textbox_placeholder_text_color);
}

.container::-moz-placeholder {
  color: var(--textbox_placeholder_text_color);
}

.container::-ms-placeholder {
  color: var(--textbox_placeholder_text_color);
}

.pointer {
  --textbox_cursor: pointer;
}

/* Need Border */
.border, .effect:hover, .effect:focus {
  border-width: var(--textbox_border_width);
  border-style: var(--textbox_border_style);
}

.effect:hover, .effect:focus {
  border-color: var(--textbox_border_color);
}

.border {
  --textbox_border_width: 0 0 1px 0;
}

.borderColor_transparent, .borderColor_default {
  border-color: var(--textbox_border_color);
}

.borderColor_transparent {
  --textbox_border_color: var(--zdt_textbox_transparent_border);
}

.borderColor_default {
  --textbox_border_color: var(--zdt_textbox_default_border);
}

.effect:hover {
  --textbox_border_color: var(--zdt_textbox_effect_hover_border);
}

.effect:focus,
.focus,
.focus:hover {
  --textbox_border_color: var(--zdt_textbox_effect_focus_border);
}

/* Size */
.xmedium,
.medium {
  --textbox_font_size: var(--zd_font_size14);
}

.xmedium {
  --textbox_height: var(--zd_size28);
  --textbox_line_height: 2;
}

.medium {
  --textbox_height: var(--zd_size35);
  --textbox_line_height: 2.5;
}

.small {
  --textbox_font_size: var(--zd_font_size12);
  --textbox_height: var(--zd_size28);
  --textbox_line_height: 2.3334;
}

.xsmall {
  --textbox_font_size: var(--zd_font_size13);
  --textbox_height: var(--zd_size25);
  --textbox_line_height: 1.9231;
}

.default,
.primary,
.secondary,
.light {
  font-family: var(--textbox_font_family);
}

.primary {
  --textbox_text_color: var(--zdt_textbox_default_text);
  --textbox_font_family: var(--zd_semibold);
  composes: ftsmooth from '../common/common.module.css';
}

.secondary {
  --textbox_text_color: var(--zdt_textbox_secondary_text);
  --textbox_font_family: var(--zd_light);
}

.light {
  --textbox_text_color: var(--zdt_textbox_light_text);
}

.readonly,
.readonly:hover,
.readonly:focus {
  --textbox_cursor: not-allowed;
  --textbox_text_color: var(--zdt_textbox_default_text);
  --textbox_bg_color: none;
}

.inputDotted {
  composes: dotted from '../common/common.module.css'
}