decentraland-ui/src/components/TextAreaField/TextAreaField.css

Decentraland's UI components and styles

.dcl.text-area {
  display: flex;
  flex-direction: column;
}

.dcl.text-area > .title {
  margin-bottom: 2px;
  font-size: 13px;
  font-family: var(--font-family);
  color: var(--secondary-text);
  display: flex;
  align-items: center;
}

.dcl.text-area > .title > .dui-info-tooltip__trigger {
  margin-left: 7px;
}

.dcl.text-area > .title > .maxLength {
  margin-left: auto;
}

.dcl.text-area > .title > label {
  text-transform: uppercase;
}

.ui.form textarea,
.dcl.text-area > textarea {
  font-family: var(--font-family);
  resize: none;
  border: 2px solid var(--text-area-border);
  border-radius: 6px;
  padding: 10px;
  color: var(--text);
  background: none;
  font-size: 20px;
  line-height: 24px;
}

.ui.form textarea::placeholder {
  color: #c7c7c7;
}

.ui.form textarea:-ms-input-placeholder {
  color: #c7c7c7;
}

.ui.form textarea::-webkit-input-placeholder {
  color: #c7c7c7;
}

.dcl.text-area > textarea::placeholder {
  color: #c7c7c7;
}

.dcl.text-area > textarea:-ms-input-placeholder {
  color: #c7c7c7;
}

.dcl.text-area > textarea::-webkit-input-placeholder {
  color: #c7c7c7;
}

.ui.form textarea:focus,
.dcl.text-area > textarea:focus {
  border: 2px solid var(--text);
  background: none;
  color: var(--text);
  outline: none !important;
}

.dcl.text-area > .message {
  margin-top: 8px;
  font-size: 15px;
}

/* Error */

.dcl.text-area.error > .title {
  color: var(--error);
}

.ui.form .dcl.text-area.error textarea,
.dcl.text-area.error > textarea {
  border: 2px solid var(--error);
}

.ui.form .dcl.text-area.error textarea:focus,
.dcl.text-area.error > textarea:focus {
  border: 2px solid var(--error);
}

.dcl.text-area.error > .message {
  color: var(--error);
}

/* Warning */

.dcl.text-area.warning > .title {
  color: var(--danger);
}

.ui.form .dcl.text-area.warning textarea,
.dcl.text-area.warning > textarea {
  border: 2px solid var(--danger);
}

.ui.form .dcl.text-area.warning textarea:focus,
.dcl.text-area.warning > textarea:focus {
  border: 2px solid var(--danger);
}

.dcl.text-area.warning > .message {
  color: var(--danger);
}

/* Info */

.dcl.text-area.info > .title {
  color: var(--text);
}

.ui.form .dcl.text-area.info textarea,
.dcl.text-area.info > textarea {
  border: 2px solid var(--text);
}

.ui.form .dcl.text-area.info textarea:focus,
.dcl.text-area.info > textarea:focus {
  border: 2px solid var(--text);
}

.dcl.text-area.info > .message {
  color: var(--text);
}