CSS variables
Igloo uses CSS custom properties (variables) for all theme related styling.
When ever the theme node is saved, the
ig-theme.css is used as a template to create a new css file under /css/generated-themes/ Here you can see a generated theme css file.
:root{
//Base
--white: #fff;
--black: #000;
// Theme
--theme: #3aa5ed;
--theme-rgb: 58, 165, 237; // rgb from --theme
--theme-darker: #148ee0; // 10% darken than --theme
--theme-contrast: #fff;
// Theme secondary
--theme-alt: #2ecc71;
--theme-alt-darker: #25a25a; // 10% darken than --theme-alt
--theme-alt-contrast: #fff;
// Dark
--heading-dark: #111;
--text-dark: #444;
--background-dark: #111;
--background-dark-lighter: #1b1b1b; // 5% lighter than --bakground-dark
--border-dark: rgba(0,0,0,0.08);
// Light
--heading-light: #fff;
--text-light: #fff;
--background-light: #f9f9f9;
--border-light: rgba(255,255,255,0.1);
// Header
--selected-nav-item: #3aa5ed;
--header-height: 70px;
--logo-padding: 24px;
--pre-top-height: 30px;
--top-combo-calc: calc(var(--header-height) + var(--pre-top-height));
--navigation-padding: 30px;
--navigation-font-size: 0.875rem;
--navigation-font-weight: bold;
// Grid
--grid-width-small: 850px;
--grid-width: 1300px;
--grid-width-big: 1600px;
--grid-gutter: 30px;
--grid-gutter-half: calc(var(--grid-gutter) / 2);
// Buttons
--button-border-radius: 4px;
// Typography
--body-font: "Roboto", sans-serif;
--heading-font: "Roboto", sans-serif;
--font-size: 1.1rem;
--font-size-big: 1.25rem;
--font-size-small: 0.75rem;
--body-line-height: 1.6;
--font-size-h1: 2.5rem;
--font-size-h2: 2.25rem;
--font-size-h3: 1.75rem;
--font-size-h4: 1.5rem;
--font-size-h5: 1.2rem;
--font-size-h6: 1rem;
--hero-heading: 3.75rem;
--heading-line-height: 1.5;
--font-weight-normal: normal;
--font-weight-light: 300;
--font-weight-bold: bold;
--font-weight-bolder: bolder;
--body-font-weight: normal;
--heading-font-weight: bold;
--text-big-font-weight: 300;
// Validation
--success: #2ecc71;
--error: #e74c3c;
@media @l{
--navigation-padding: 15px;
}
@media @m{
--header-height: 50px;
--grid-gutter: 20px;
--logo-padding: 15px;
--navigation-font-size: 1rem;
}
@media @s{
--grid-gutter: 15px;
--hero-heading: 2.5rem;
}
@media @xs{
--grid-gutter: 15px;
}
}
Here you can see what the
ig-theme.css file looks like, values like {themeColor} are replaced with the value from the theme node in Umbraco. :root {
/* Base */
--white: #fff;
--black: #000;
/* Theme */
--theme: {themeColor};
--theme-rgb: {themeColorRGB};
--theme-darker: {themeColorDarker};
--theme-contrast: {themeContrast};
/* Theme alt */
--theme-alt: {themeAltColor};
--theme-alt-darker: {themeAltColorDarker};
--theme-alt-contrast: {themeAltContrast};
/* Dark */
--heading-dark: {headingColorDark};
--text-dark: {textColorDark};
--background-dark: {darkBackground};
--background-dark-lighter: {darkBackgroundLighter};
--border-dark: {borderDark};
/* Light */
--heading-light: {headingColorLight};
--text-light: {textColorLight};
--background-light: {grayBackground};
--border-light: {borderLight};
/* Header */
--selected-nav-item: {selectedNavigationItem};
--header-height: {headerHeight};
--logo-padding: {logoPadding};
--pre-top-height: 30px;
--top-combo-calc: calc(var(--header-height) + var(--pre-top-height));
--navigation-padding: {navigationPadding};
--navigation-font-size: {navigationFontSize};
--navigation-font-weight: {navigationFontWeight};
/* Grid */
--grid-width-small: {gridWidthSmall};
--grid-width: {gridWidth};
--grid-width-big: {gridWidthBig};
--grid-gutter: {gridGutter};
--grid-gutter-half: calc(var(--grid-gutter) / 2);
/* Buttons */
--button-border-radius: {buttonBorderRadius};
/* Typography */
--body-font: {bodyFont};
--heading-font: {headingFont};
--font-size: {textFontSize};
--font-size-big: {textBigFontSize};
--font-size-small: {textSmallFontSize};
--body-line-height: {textLineHeight};
--font-size-h1: {heading1FontSize};
--font-size-h2: {heading2FontSize};
--font-size-h3: {heading3FontSize};
--font-size-h4: {heading4FontSize};
--font-size-h5: {heading5FontSize};
--font-size-h6: {heading6FontSize};
--hero-heading: {heroHeadingFontSize};
--heading-line-height: {headingLineHeight};
--font-weight-normal: normal;
--font-weight-light: 300;
--font-weight-bold: bold;
--font-weight-bolder: bolder;
--body-font-weight: {textFontWeight};
--heading-font-weight: {headingFontWeight};
--text-big-font-weight: {textBigFontWeight};
/* Validation */
--success: {success};
--error: {error};
}
@media only screen and (max-width: 1200px) {
:root {
--navigation-padding: {navigationPaddingSmallerScreens};
}
}
@media only screen and (max-width: 992px) {
:root {
--header-height: {headerHeightMobile};
--grid-gutter: {gridGutterMedium};
--logo-padding: {logoPaddingMobile};
--navigation-font-size: {navigationFontSizeMobile};
}
}
@media only screen and (max-width: 768px) {
:root {
--grid-gutter: {gridGutterSmall};
--hero-heading: {heroHeadingMobileFontSize};
}
}
@media only screen and (max-width: 480px) {
:root {
--grid-gutter: {gridGutterXS};
}
}
Last modified 1yr ago