censa_front_end_library/css/src/components/icon.css

React components library project for censa Design System

/* Although the icons in the font can be scaled to any size, in accordance with material design icons guidelines,
 * we recommend them to be shown in either 18, 24, 36 or 48px. The default being 24px.
 * https://google.github.io/material-design-icons/
 */

/* Rules for sizing the icon. */

/* .material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; } */

/* Rules for using icons as black on a light background. */

/* .material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } */

/* Rules for using icons as white on a dark background. */

/* .material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } */
.Icon {
  flex-shrink: 0;
  overflow: hidden;
  flex-shrink: 0;
  user-select: none;
}

.Icon--subtle {
  color: var(--text-subtle);
}

.Icon--disabled {
  color: var(--text-disabled);
}

.Icon--destructive {
  color: var(--text-destructive);
}

.Icon--white {
  color: var(--text-white);
}

.Icon--default {
  color: var(--text);
}

.Icon--info {
  color: var(--primary);
}

.Icon--success {
  color: var(--success);
}

.Icon--warning {
  color: var(--warning);
}

.Icon--alert {
  color: var(--alert);
}

.Icon--primary {
  color: var(--primary);
}

.Icon--primaryLighter {
  color: var(--primary-lighter);
}

.Icon--primaryDark {
  color: var(--primary-dark);
}

.Icon--alertLighter {
  color: var(--alert-lighter);
}

.Icon--alertDark {
  color: var(--alert-dark);
}

.Icon--successLighter {
  color: var(--success-lighter);
}

.Icon--successDark {
  color: var(--success-dark);
}

.Icon--warningLighter {
  color: var(--warning-lighter);
}

.Icon--warningDark {
  color: var(--warning-dark);
}

.Icon--accent1 {
  color: var(--accent1);
}

.Icon--accent1Lighter {
  color: var(--accent1-lighter);
}

.Icon--accent1Dark {
  color: var(--accent1-dark);
}

.Icon--accent2 {
  color: var(--accent2);
}

.Icon--accent2Lighter {
  color: var(--accent2-lighter);
}

.Icon--accent2Dark {
  color: var(--accent2-dark);
}

.Icon--accent3 {
  color: var(--accent3);
}

.Icon--accent3Lighter {
  color: var(--accent3-lighter);
}

.Icon--accent3Dark {
  color: var(--accent3-dark);
}

.Icon--accent4 {
  color: var(--accent4);
}

.Icon--accent4Lighter {
  color: var(--accent4-lighter);
}

.Icon--accent4Dark {
  color: var(--accent4-dark);
}

.Icon--inverse {
  color: var(--inverse);
}

.icontable .Button--basic {
  background-color: #f1f6ff;
  border: none;
  width: 30px;
  height: 30px;
}
.icontable .Button--basic i {
  color: #333;
  fontvariationsettings: normal !important;
}
.icontable .Button--selected i {
  color: #4348a7;
}

.icontable .Button--alert {
  background-color: #ffeff0;
}
.icontable .Button--alert i {
  color: #e13440;
}