diff --git a/theme/themes/eea/globals/utilities.less b/theme/themes/eea/globals/utilities.less index 8476dbda63..8f813d7974 100644 --- a/theme/themes/eea/globals/utilities.less +++ b/theme/themes/eea/globals/utilities.less @@ -1,76 +1,90 @@ -// Color -h1, h2, h3, h4, h5, h6, p, span, .header { - &.primary { color: @primaryColorCSSVar !important; } - &.secondary { color: @secondaryColorCSSVar !important; } - &.tertiary { color: @tertiaryColorCSSVar !important; } - &.white { color: @white !important; } -} - -.color-fg-primary { color: @primaryColor !important; } -.color-fg-secondary { color: @secondaryColor !important; } -.color-fg-tertiary { color: @tertiaryColor !important; } -.color-fg-white { color: @grey-0 !important; } - -.color-bg-primary { background-color: @primaryColor !important; } -.color-bg-secondary { background-color: @secondaryColor !important; } -.color-bg-tertiary { background-color: @tertiaryColor !important; } -.color-bg-grey { background-color: @grey-1 !important; } - -.dark-overlay-4 { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background: #000; - opacity: 0.4; - z-index: 0; -} - -// Flexbox -.d-flex { display: flex !important; } -.flex-items-start { align-items: flex-start !important; } -.flex-items-end { align-items: flex-end !important; } -.flex-items-center { align-items: center !important; } - -// Text -.text-left, -.has--text--left { text-align: left !important; } -.text-center, -.has--text--center { text-align: center !important;} -.text-right { text-align: right !important; } -.bold { font-weight: bold !important; } - -.has--text--left { - --text-align: left; -} - -.has--text--center { - --text-align: center; - --justify-content: space-evenly; -} - -// Text utilities -.bold { font-weight: @bold !important; } -.underline { text-decoration: underline !important; } - -// Quotes -.quoted-wrapper h2::before, -.quoted-wrapper h3::before, -.quoted::before { - content: "\ec51"; - font-family: 'remixicon' !important; -} - -.quoted-wrapper h2::after, -.quoted-wrapper h3::after, -.quoted::after { - content: "\ec52"; - font-family: 'remixicon' !important; -} - -// Borders -.bordered { - border-bottom: @border-size-1 solid !important; - padding-bottom: @rem-space-2 !important; -} +// Color +h1, h2, h3, h4, h5, h6, p, span, .header { + &.primary { color: @primaryColorCSSVar !important; } + &.secondary { color: @secondaryColorCSSVar !important; } + &.tertiary { color: @tertiaryColorCSSVar !important; } + &.white { color: @white !important; } +} + +.color-fg-primary { color: @primaryColor !important; } +.color-fg-secondary { color: @secondaryColor !important; } +.color-fg-tertiary { color: @tertiaryColor !important; } +.color-fg-white { color: @grey-0 !important; } + +.color-bg-primary { background-color: @primaryColor !important; } +.color-bg-secondary { background-color: @secondaryColor !important; } +.color-bg-tertiary { background-color: @tertiaryColor !important; } +.color-bg-grey { background-color: @grey-1 !important; } + +.dark-overlay-4 { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: #000; + opacity: 0.4; + z-index: 0; +} + +// Flexbox +.d-flex { display: flex !important; } +.flex-items-start { align-items: flex-start !important; } +.flex-items-end { align-items: flex-end !important; } +.flex-items-center { align-items: center !important; } + +// Text +.text-left, +.has--text--left { text-align: left !important; } +.text-center, +.has--text--center { text-align: center !important;} +.text-right { text-align: right !important; } +.bold { font-weight: bold !important; } + +.has--text--left { + --text-align: left; +} + +.has--text--center { + --text-align: center; + --justify-content: space-evenly; +} + +// background position utilities +.has--bg--top { + background-position: top !important; +} + +.has--bg--center { + background-position: center !important; +} + +.has--bg--bottom { + background-position: bottom !important; +} + + +// Text utilities +.bold { font-weight: @bold !important; } +.underline { text-decoration: underline !important; } + +// Quotes +.quoted-wrapper h2::before, +.quoted-wrapper h3::before, +.quoted::before { + content: "\ec51"; + font-family: 'remixicon' !important; +} + +.quoted-wrapper h2::after, +.quoted-wrapper h3::after, +.quoted::after { + content: "\ec52"; + font-family: 'remixicon' !important; +} + +// Borders +.bordered { + border-bottom: @border-size-1 solid !important; + padding-bottom: @rem-space-2 !important; +}