5de2a993a7
Switches out all the old icons to new ones, and moves them to the design system. The new icons are of three different types: Materialise Symbol, Nucleo, and Customized. Also adds further mapping between facilities/amenities and icons. Approved-by: Michael Zetterberg Approved-by: Erik Tiekstra
97 lines
1.9 KiB
CSS
97 lines
1.9 KiB
CSS
.icon {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Icon */
|
|
.iconDefault,
|
|
.iconDefault * {
|
|
color: var(--Icon-Default);
|
|
fill: var(--Icon-Default);
|
|
}
|
|
|
|
.iconIntense,
|
|
.iconIntense * {
|
|
color: var(--Icon-Intense);
|
|
fill: var(--Icon-Intense);
|
|
}
|
|
|
|
.iconAccent,
|
|
.iconAccent * {
|
|
color: var(--Icon-Accent);
|
|
fill: var(--Icon-Accent);
|
|
}
|
|
|
|
.iconInverted,
|
|
.iconInverted * {
|
|
color: var(--Icon-Inverted);
|
|
fill: var(--Icon-Inverted);
|
|
}
|
|
|
|
/* Icon / Interactive */
|
|
.iconInteractiveDefault,
|
|
.iconInteractiveDefault * {
|
|
color: var(--Icon-Interactive-Default);
|
|
fill: var(--Icon-Interactive-Default);
|
|
}
|
|
|
|
.iconInteractiveSecondary,
|
|
.iconInteractiveSecondary * {
|
|
color: var(--Icon-Interactive-Secondary);
|
|
fill: var(--Icon-Interactive-Secondary);
|
|
}
|
|
|
|
.iconInteractiveAccent,
|
|
.iconInteractiveAccent * {
|
|
color: var(--Icon-Interactive-Accent);
|
|
fill: var(--Icon-Interactive-Accent);
|
|
}
|
|
|
|
.iconInteractiveDisabled,
|
|
.iconInteractiveDisabled * {
|
|
color: var(--Icon-Interactive-Disabled);
|
|
fill: var(--Icon-Interactive-Disabled);
|
|
}
|
|
|
|
.iconInteractivePlaceholder,
|
|
.iconInteractivePlaceholder * {
|
|
color: var(--Icon-Interactive-Placeholder);
|
|
fill: var(--Icon-Interactive-Placeholder);
|
|
}
|
|
|
|
/* Icon / Feedback */
|
|
.iconFeedbackInformation,
|
|
.iconFeedbackInformation * {
|
|
color: var(--Icon-Feedback-Information);
|
|
fill: var(--Icon-Feedback-Information);
|
|
}
|
|
|
|
.iconFeedbackSuccess,
|
|
.iconFeedbackSuccess * {
|
|
color: var(--Icon-Feedback-Success);
|
|
fill: var(--Icon-Feedback-Success);
|
|
}
|
|
|
|
.iconFeedbackWarning,
|
|
.iconFeedbackWarning * {
|
|
color: var(--Icon-Feedback-Warning);
|
|
fill: var(--Icon-Feedback-Warning);
|
|
}
|
|
|
|
.iconFeedbackError,
|
|
.iconFeedbackError * {
|
|
color: var(--Icon-Feedback-Error);
|
|
fill: var(--Icon-Feedback-Error);
|
|
}
|
|
|
|
.iconFeedbackNeutral,
|
|
.iconFeedbackNeutral * {
|
|
color: var(--Icon-Feedback-Neutral);
|
|
fill: var(--Icon-Feedback-Neutral);
|
|
}
|
|
|
|
.currentColor,
|
|
.currentColor * {
|
|
color: currentColor;
|
|
fill: currentColor;
|
|
}
|