a7ac79e429
chore(SW-3145): Move Caption to design-system * Move Caption to design-system * Mark Caption as deprecated Approved-by: Linus Flood Approved-by: Joakim Jäderberg
128 lines
2.8 KiB
CSS
128 lines
2.8 KiB
CSS
p.caption {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.captionFontOnly {
|
|
font-style: normal;
|
|
}
|
|
|
|
.bold {
|
|
font-family: var(--typography-Caption-Bold-fontFamily);
|
|
font-size: var(--typography-Caption-Bold-fontSize);
|
|
font-weight: 500; /* var(--typography-Caption-Bold-fontWeight); /* Commented till figma values are fixed to 500 instead of medium */
|
|
letter-spacing: var(--typography-Caption-Bold-letterSpacing);
|
|
line-height: var(--typography-Caption-Bold-lineHeight);
|
|
text-decoration: var(--typography-Caption-Bold-textDecoration);
|
|
}
|
|
|
|
.labels {
|
|
font-family: var(--typography-Caption-Labels-fontFamily);
|
|
font-size: var(--typography-Caption-Labels-fontSize);
|
|
font-weight: var(--typography-Caption-Labels-fontWeight);
|
|
letter-spacing: var(--typography-Caption-Labels-letterSpacing);
|
|
line-height: var(--typography-Caption-Labels-lineHeight);
|
|
text-decoration: var(--typography-Caption-Labels-textDecoration);
|
|
}
|
|
|
|
.underline {
|
|
font-family: var(--typography-Caption-Underline-fontFamily);
|
|
font-size: var(--typography-Caption-Underline-fontSize);
|
|
font-weight: var(--typography-Caption-Underline-fontWeight);
|
|
letter-spacing: var(--typography-Caption-Underline-letterSpacing);
|
|
line-height: var(--typography-Caption-Underline-lineHeight);
|
|
text-decoration: underline; /* var(--typography-Caption-Underline-textDecoration) /* Commented till figma values are fixed to underline instead of "underline" */
|
|
}
|
|
|
|
.regular {
|
|
font-family: var(--typography-Caption-Regular-fontFamily);
|
|
font-size: var(--typography-Caption-Regular-fontSize);
|
|
font-weight: var(--typography-Caption-Regular-fontWeight);
|
|
letter-spacing: var(--typography-Caption-Regular-letterSpacing);
|
|
line-height: var(--typography-Caption-Regular-lineHeight);
|
|
text-decoration: var(--typography-Caption-Regular-textDecoration);
|
|
}
|
|
|
|
.uppercase {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.striked {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.baseTextAccent {
|
|
color: var(--Base-Text-Accent);
|
|
}
|
|
|
|
.black {
|
|
color: var(--Main-Grey-100);
|
|
}
|
|
|
|
.burgundy {
|
|
color: var(--Scandic-Brand-Burgundy);
|
|
}
|
|
|
|
.pale {
|
|
color: var(--Scandic-Brand-Pale-Peach);
|
|
}
|
|
|
|
.textMediumContrast {
|
|
color: var(--Base-Text-Medium-contrast);
|
|
}
|
|
|
|
.baseTextHighContrast {
|
|
color: var(--Base-Text-High-contrast);
|
|
}
|
|
|
|
.baseTextMediumContrast {
|
|
color: var(--Base-Text-Medium-contrast);
|
|
}
|
|
|
|
.red {
|
|
color: var(--Scandic-Brand-Scandic-Red);
|
|
}
|
|
|
|
.white {
|
|
color: var(--UI-Opacity-White-100);
|
|
}
|
|
|
|
.uiTextActive {
|
|
color: var(--UI-Text-Active);
|
|
}
|
|
|
|
.uiTextMediumContrast {
|
|
color: var(--UI-Text-Medium-contrast);
|
|
}
|
|
|
|
.uiTextHighContrast {
|
|
color: var(--UI-Text-High-contrast);
|
|
}
|
|
|
|
.uiTextPlaceholder {
|
|
color: var(--UI-Text-Placeholder);
|
|
}
|
|
|
|
.disabled {
|
|
color: var(--Base-Text-Disabled);
|
|
}
|
|
|
|
.center {
|
|
text-align: center;
|
|
}
|
|
|
|
.left {
|
|
text-align: left;
|
|
}
|
|
|
|
.right {
|
|
text-align: right;
|
|
}
|
|
|
|
.green {
|
|
color: var(--UI-Semantic-Success);
|
|
}
|
|
.blue {
|
|
color: var(--UI-Semantic-Information);
|
|
}
|