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

Decentraland's UI components and styles

/* Normal */

.dcl.field {
  min-width: 400px;
  position: relative;
}

.dcl.field.resizable {
  min-width: 0;
}

.dcl.field .ui.input {
  width: 100%;
}

.dcl.field .ui.header.sub {
  display: flex;
}

.dcl.field .ui.header.sub .maxLength {
  margin-left: auto;
}

.dcl.field .ui.input input,
.ui.form .dcl.field .ui.input input {
  padding: 0px;
  padding-bottom: 12px;
  padding-top: 4px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  border: none;
  border-bottom: 2px solid var(--divider);
  border-radius: 0px;
  color: var(--text);
  background: transparent;
}

.dcl.field.full .ui.input input,
.ui.form .dcl.field.full .ui.input input {
  border: 2px solid var(--divider);
  border-radius: 6px;
  padding: 10px;
}

.dcl.field.full .ui.input input:focus,
.dcl.field.full .ui.input input:active,
.ui.form .dcl.field.full .ui.input input:focus,
.ui.form .dcl.field.full .ui.input input:active {
  border: 2px solid var(--text);
}

.dcl.field .ui.input input:focus,
.dcl.field .ui.input input:active,
.ui.form .dcl.field .ui.input input:focus,
.ui.form .dcl.field .ui.input input:active {
  border-bottom: 2px solid var(--text);
}

.dcl.field .message,
.ui.form .dcl.field .message {
  margin-top: 8px;
  color: var(--secondary-text);
  font-size: 15px;
}

/* Loading */

.dcl.field .ui.input.loading > i.icon,
.ui.form .dcl.field .ui.input.loading > i.icon {
  opacity: 1;
  height: 36px;
}
.dcl.field .ui.input.loading > i.icon:before,
.ui.form .dcl.field .ui.input.loading > i.icon:before {
  border-color: var(--divider);
  border-width: 2px;
}
.dcl.field .ui.input.loading > i.icon:after,
.ui.form .dcl.field .ui.input.loading > i.icon:after {
  border-color: var(--primary) transparent transparent;
  border-width: 2px;
}

.dcl.field.full .ui.input.loading > i.icon,
.ui.form .dcl.field.full .ui.input.loading > i.icon {
  top: 8px;
  right: 10px;
}

/* Disabled */

.dcl.field.disabled .ui.header.sub,
.dcl.field.disabled .ui.input,
.ui.form .dcl.field.disabled .ui.header.sub,
.ui.form .dcl.field.disabled .ui.input {
  opacity: 0.5;
}

.dcl.field.disabled .ui.input,
.ui.form .dcl.field.disabled .ui.input {
  opacity: 0.5;
}

/* Error */

.dcl.field.error .ui.input input,
.ui.form .dcl.field.error .ui.input input {
  border-bottom: 2px solid var(--error);
}

.dcl.field.error.full .ui.input input,
.ui.form .dcl.field.error .ui.input input {
  border: 2px solid var(--error);
}

.dcl.field.error .message,
.ui.form .dcl.field.error .message {
  color: var(--error);
}

.dcl.field.error .ui.header.sub,
.ui.form .dcl.field.error .ui.header.sub {
  color: var(--error);
}

.dcl.field.error .ui.input > i.icon,
.ui.form .dcl.field.error .ui.input > i.icon {
  opacity: 1;
  background: url('../../assets/alert.svg');
  background-repeat: no-repeat;
  background-position: center;
  height: 36px;
}

.dcl.field.error.full .ui.input > i.icon,
.ui.form .dcl.field.error.full .ui.input > i.icon {
  top: 8px;
  right: 10px;
}

.dcl.field.error .ui.input > i.icon:before,
.ui.form .dcl.field.error .ui.input > i.icon:before {
  content: '';
  display: none;
}

/* Warning */

.dcl.field.warning .ui.input input,
.ui.form .dcl.field.warning .ui.input input {
  border-bottom: 2px solid var(--danger);
}

.dcl.field.warning.full .ui.input input,
.ui.form .dcl.field.warning .ui.input input {
  border: 2px solid var(--danger);
}

.dcl.field.warning .message,
.ui.form .dcl.field.warning .message {
  color: var(--danger);
}

.dcl.field.warning .ui.header.sub,
.ui.form .dcl.field.warning .ui.header.sub {
  color: var(--danger);
}

/* Info */

.dcl.field.info .ui.input input,
.ui.form .dcl.field.info .ui.input input {
  border-bottom: 2px solid var(--text);
}

.dcl.field.info.full .ui.input input,
.ui.form .dcl.field.info .ui.input input {
  border: 2px solid var(--text);
}

.dcl.field.info .message,
.ui.form .dcl.field.info .message {
  color: var(--text);
}

.dcl.field.info .ui.header.sub,
.ui.form .dcl.field.info .ui.header.sub {
  color: var(--text);
}

/* Address */

.dcl.field.address .ui.input input,
.ui.form .dcl.field.address .ui.input input {
  padding-right: 2.67142857em !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dcl.field.address .dcl.blockie,
.ui.form .dcl.field.address .dcl.blockie {
  position: absolute;
  right: 0px;
  top: 8px;
}

.dcl.field.address.has-label .dcl.blockie,
.ui.form .dcl.field.address.has-label .dcl.blockie {
  top: 28px;
}

.dcl.field.address.has-label.full .dcl.blockie,
.ui.form .dcl.field.address.has-label.full .dcl.blockie {
  top: 35px;
  right: 10px;
}

.dcl.field .overlay,
.ui.form .dcl.field .overlay {
  position: absolute;
  bottom: 30px;
  right: 0px;
}

.dcl.field.full .overlay,
.ui.form .dcl.field.full .overlay {
  bottom: 33px;
  right: 10px;
}

.dcl.field .overlay .ui.button,
.ui.form .dcl.field .overlay .ui.button {
  height: 44px;
}

/* Icon */

.dcl.field .ui.input .icon,
.ui.form .dcl.field .ui.input .icon {
  color: var(--text);
}

/* Date */
.clndr-cell {
  background-color: var(--secondary) !important;
}

.clndr-cell-selected {
  background-color: var(--primary) !important;
  border-radius: 4px !important;
}

.clndr-cell-other-month {
  color: var(--secondary-text) !important;
}

.clndr-cell-today {
  color: var(--primary) !important;
}

.datePickerWidth {
  width: 100% !important;
}

.clndr-control .ui.button + .ui.button {
  margin-right: 0px !important;
  margin-left: 0px !important;
}