diff --git a/src/app/components/bread-crumbs/bread-crumbs.component.scss b/src/app/components/bread-crumbs/bread-crumbs.component.scss index 93d3ecd5..7c85e39b 100644 --- a/src/app/components/bread-crumbs/bread-crumbs.component.scss +++ b/src/app/components/bread-crumbs/bread-crumbs.component.scss @@ -29,6 +29,6 @@ } &:active { - color: $contentSecondaryActive; + color: $contentSecondary; } } diff --git a/src/app/components/documentation/documentation.component.scss b/src/app/components/documentation/documentation.component.scss index 7c09c257..85698ee5 100644 --- a/src/app/components/documentation/documentation.component.scss +++ b/src/app/components/documentation/documentation.component.scss @@ -147,7 +147,7 @@ gcore-loader { font-weight: 600; font-size: 1.5rem; line-height: 2rem; - color: $secondaryContrastFocus; + color: $actionPrimary; margin-top: 1.5rem; } @@ -157,36 +157,46 @@ gcore-loader { margin-top: 1.25rem; .doc-estimate-button { - width: 3rem; - height: 2.25rem; - border: 1px solid $secondaryContrastFocus; - border-radius: 0.25rem; + width: 3.5rem; + height: 2.5rem; + border: 1px solid $actionPrimary; + border-radius: $borderButtonRadius; display: flex; align-items: center; justify-content: center; - transition: all 0.3s ease-in-out; + transition: 0.15s; background: transparent; cursor: pointer; &:nth-child(1) { - margin-right: 1rem; + margin-right: 0.5rem; } svg { path { - fill: $secondaryContrastFocus; - transition: all 0.3s ease-in-out; + fill: $actionPrimary; + transition: 0.15s; } } - &.active { - background: $secondaryContrastFocus; - transition: all 0.3s ease-in-out; + &:hover { + border: 1px solid $actionPrimaryHover; svg { path { - fill: $secondaryContrastActive; - transition: all 0.3s ease-in-out; + fill: $actionPrimaryHover; + } + } + } + + &.active, + &:active { + background: $actionPrimaryActive; + border: 1px solid $actionPrimaryActive; + + svg { + path { + fill: $contentContrastPrimary; } } } @@ -269,7 +279,7 @@ gcore-loader { top: 0; width: 1px; height: 100%; - background: $greyPurple; + background: $bgSurfaceLight2; position: absolute; } diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html index 3f8700aa..da8683f7 100644 --- a/src/app/components/header/header.component.html +++ b/src/app/components/header/header.component.html @@ -7,22 +7,22 @@ Gcore Docs - + + >
- - - + + path { - stroke: $secondaryContrastHover; + stroke: $borderDark; } } &:active { svg > path { - stroke: $secondaryContrast; + stroke: $borderDark; } } } @@ -109,13 +115,13 @@ &:hover { svg > path { - stroke: $secondaryContrastHover; + stroke: $contentSecondaryHover; } } &:active { svg > path { - stroke: $secondaryContrast; + stroke: $contentSecondary; } } } diff --git a/src/app/components/home/home.component.scss b/src/app/components/home/home.component.scss index 704ab433..71de61f3 100644 --- a/src/app/components/home/home.component.scss +++ b/src/app/components/home/home.component.scss @@ -1,7 +1,7 @@ @import '../../../scss/variables'; .categories-section { - background-color: $lightGreyBG; + background-color: $bgSurfaceLight1; .categories-section-menu { display: none; @@ -26,10 +26,11 @@ font-size: 4.5rem; font-weight: 600; margin: 0; - line-height: 5rem; + line-height: 105%; + letter-spacing: -1px; &.gc-title { - background: linear-gradient(360deg, #ffffff -20%, #ff5700 95%); + background: $actionPrimary; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; @@ -78,8 +79,11 @@ border-radius: 6px; color: $contentPrimary; text-decoration: none; + transition: 0.15s; img { + width: 2rem; + height: 2rem; margin-right: 0.75rem; } @@ -177,17 +181,17 @@ } .apidocs-link { - color: $contentLink; + color: $actionPrimary; text-decoration: none; font-size: 1rem; font-weight: 600; &:hover { - color: $contentLinkHover; + color: $actionPrimaryHover; } &:active { - color: $contentLinkActive; + color: $actionPrimaryActive; } } } diff --git a/src/app/components/left-bar-menu/dropdown-menu-item/dropdown-menu-item.component.scss b/src/app/components/left-bar-menu/dropdown-menu-item/dropdown-menu-item.component.scss index 94362119..760d52ab 100644 --- a/src/app/components/left-bar-menu/dropdown-menu-item/dropdown-menu-item.component.scss +++ b/src/app/components/left-bar-menu/dropdown-menu-item/dropdown-menu-item.component.scss @@ -34,7 +34,7 @@ .menu-dropdown-arrow { width: 1.25rem; height: 1.25rem; - background: $greyPurple; + background: $bgSurfaceLight2; border-radius: 100%; display: flex; align-items: center; @@ -70,6 +70,6 @@ } &.active { - color: $contentLinkActive; + color: $actionPrimaryActive; } } diff --git a/src/app/components/left-bar-menu/left-bar-menu.component.html b/src/app/components/left-bar-menu/left-bar-menu.component.html index 3fc192ab..aa5ae2c7 100644 --- a/src/app/components/left-bar-menu/left-bar-menu.component.html +++ b/src/app/components/left-bar-menu/left-bar-menu.component.html @@ -49,20 +49,20 @@
Gcore Edge SolutionsSelect the Gcore Platform > Select the Gcore Platform aria-hidden="true" > + /> + fill="#251B29" + stroke-width="3" + /> + fill="#251B29" + stroke-width="3" + /> + fill="#251B29" + stroke-width="3" + />
Gcore HostingSelect the Gcore Platform > {{ content.title }} diff --git a/src/app/ui-kit/call-to-action-box/call-to-action-box.component.scss b/src/app/ui-kit/call-to-action-box/call-to-action-box.component.scss index a1ea1e90..06a72c44 100644 --- a/src/app/ui-kit/call-to-action-box/call-to-action-box.component.scss +++ b/src/app/ui-kit/call-to-action-box/call-to-action-box.component.scss @@ -2,7 +2,7 @@ :host { display: block; - background: linear-gradient(120.61deg, #37247c 0%, #050631 100%); + background: $standartPurple; border-radius: 0.5rem; padding: 1.5rem; } @@ -10,7 +10,7 @@ .gc-box-title { font-size: 1.5rem; line-height: 2rem; - color: #fff; + color: $contentContrastPrimary; margin: 0 0 0.5rem; font-weight: 500; } @@ -18,7 +18,7 @@ .gc-box-description { font-size: 1rem; line-height: 1.5rem; - color: #fff; + color: $contentContrastPrimary; margin: 0 0 1rem; font-weight: 400; } diff --git a/src/app/ui-kit/loader/loader.component.scss b/src/app/ui-kit/loader/loader.component.scss index 9a10b13e..651c2a39 100644 --- a/src/app/ui-kit/loader/loader.component.scss +++ b/src/app/ui-kit/loader/loader.component.scss @@ -10,8 +10,8 @@ width: 10px; height: 10px; border-radius: 5px; - background-color: $contentLink; - color: $contentLink; + background-color: $actionPrimary; + color: $actionPrimary; animation: dotFlashing 1s infinite linear alternate; animation-delay: 0.5s; } @@ -29,8 +29,8 @@ width: 10px; height: 10px; border-radius: 5px; - background-color: $contentLink; - color: $contentLink; + background-color: $actionPrimary; + color: $actionPrimary; animation: dotFlashing 1s infinite alternate; animation-delay: 0s; } @@ -40,15 +40,15 @@ width: 10px; height: 10px; border-radius: 5px; - background-color: $contentLink; - color: $contentLink; + background-color: $actionPrimary; + color: $actionPrimary; animation: dotFlashing 1s infinite alternate; animation-delay: 1s; } @keyframes dotFlashing { 0% { - background-color: $contentLink; + background-color: $actionPrimary; } 50%, 100% { diff --git a/src/app/ui-kit/modal/modal.component.scss b/src/app/ui-kit/modal/modal.component.scss index e0dd82b0..347b8e31 100644 --- a/src/app/ui-kit/modal/modal.component.scss +++ b/src/app/ui-kit/modal/modal.component.scss @@ -102,10 +102,10 @@ z-index: 99; svg { - color: $secondaryContrastActive; + color: $contentContrastPrimary; path { - stroke: $secondaryContrastActive; + stroke: $contentContrastPrimary; } } } diff --git a/src/app/ui-kit/pagination/pagination.component.scss b/src/app/ui-kit/pagination/pagination.component.scss index efeff0ee..170db585 100644 --- a/src/app/ui-kit/pagination/pagination.component.scss +++ b/src/app/ui-kit/pagination/pagination.component.scss @@ -82,6 +82,6 @@ .gc-current-page { background: $bgSurfaceDark; - color: $secondaryContrastActive; + color: $contentContrastPrimary; } } diff --git a/src/app/ui-kit/redirect-link-button/redirect-link-button.component.html b/src/app/ui-kit/redirect-link-button/redirect-link-button.component.html index cae6f746..6cc8ec0a 100644 --- a/src/app/ui-kit/redirect-link-button/redirect-link-button.component.html +++ b/src/app/ui-kit/redirect-link-button/redirect-link-button.component.html @@ -1,17 +1,10 @@ - - {{ label }} - + + {{ label }} + - diff --git a/src/app/ui-kit/redirect-link-button/redirect-link-button.component.scss b/src/app/ui-kit/redirect-link-button/redirect-link-button.component.scss index 994d0600..e2f8bfc8 100644 --- a/src/app/ui-kit/redirect-link-button/redirect-link-button.component.scss +++ b/src/app/ui-kit/redirect-link-button/redirect-link-button.component.scss @@ -15,15 +15,15 @@ white-space: nowrap; color: #fff; text-decoration: none; - border: 1px solid $secondaryContrast; + border: 1px solid $borderDark; width: 100%; &:hover { - border-color: $secondaryContrastHover; + border-color: $border; } &:active { - border-color: $secondaryContrastActive; + border-color: $contentContrastPrimary; } svg { @@ -32,7 +32,7 @@ } &-white { - border: 1px solid $borderNormal; + border: 1px solid $border; color: $contentPrimary; svg { @@ -43,9 +43,9 @@ } &-brand { - border: 1px solid $contentLink; + border: 1px solid $actionPrimary; color: #fff; - background-color: $contentLink; + background-color: $actionPrimary; svg { path { @@ -54,13 +54,13 @@ } &:hover { - background-color: $contentLinkHover; - border-color: $contentLinkHover; + background-color: $actionPrimaryHover; + border-color: $actionPrimaryHover; } &:active { - border-color: $contentLinkActive; - background-color: $contentLinkActive; + border-color: $actionPrimaryActive; + background-color: $actionPrimaryActive; } } } diff --git a/src/app/ui-kit/redirect-link-button/redirect-link-button.component.ts b/src/app/ui-kit/redirect-link-button/redirect-link-button.component.ts index 43c3ee2b..bc2d9145 100644 --- a/src/app/ui-kit/redirect-link-button/redirect-link-button.component.ts +++ b/src/app/ui-kit/redirect-link-button/redirect-link-button.component.ts @@ -10,5 +10,5 @@ export class RedirectLinkButtonComponent { @Input() public href: string; @Input() public label: string; @Input() public hideIcon: boolean; - @Input() public variant: 'white' | 'brand'; + @Input() public variant: 'primary' | 'secondary' | 'contrast-secondary' = 'secondary'; } diff --git a/src/app/ui-kit/search-box/search-box.component.html b/src/app/ui-kit/search-box/search-box.component.html index 044e7752..d7f205ec 100644 --- a/src/app/ui-kit/search-box/search-box.component.html +++ b/src/app/ui-kit/search-box/search-box.component.html @@ -3,14 +3,14 @@ class="search-icon search-icon-{{ variant }}" width="20" height="20" - viewBox="0 0 20 20" + viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" > diff --git a/src/app/ui-kit/search-box/search-box.component.scss b/src/app/ui-kit/search-box/search-box.component.scss index 30763edc..913a95c5 100644 --- a/src/app/ui-kit/search-box/search-box.component.scss +++ b/src/app/ui-kit/search-box/search-box.component.scss @@ -9,23 +9,24 @@ width: 100%; font-size: 0.875rem; line-height: 1.25rem; - border: 1px solid $secondaryContrast; - border-radius: 6px; + border: 1px solid $borderDark; + border-radius: $borderButtonRadius; outline: none; - background: $secondaryContrast; - color: #fff; + background: $bgSurfaceDark; + color: $contentContrastPrimary; padding: 9px 44px 9px 16px; + transition: 0.15s; &:hover { - border-color: $secondaryContrastHover; + border-color: $border; } &:active { - border-color: $secondaryContrastActive; + border-color: $contentContrastPrimary; } &:focus { - border-color: $secondaryContrastFocus; + border-color: $actionPrimary; } &::placeholder { @@ -33,7 +34,7 @@ } &.search-input-contrast { - border-color: $greyPurple; + border-color: $bgSurfaceLight2; color: $mutedPurple; &::placeholder { diff --git a/src/app/web-components/exandable-element/exandable-element.component.scss b/src/app/web-components/exandable-element/exandable-element.component.scss index 83fecbfe..d34c0570 100644 --- a/src/app/web-components/exandable-element/exandable-element.component.scss +++ b/src/app/web-components/exandable-element/exandable-element.component.scss @@ -11,7 +11,7 @@ border-top: 1px solid #d6d7d8; .accordion-plus { - background: $sidebarPurple; + background: $bgSurfaceLight1; border-radius: 100%; width: 1.25rem; height: 1.25rem; diff --git a/src/assets/icons/category/account-settings.svg b/src/assets/icons/category/account-settings.svg index 8f43e697..bf27f630 100644 --- a/src/assets/icons/category/account-settings.svg +++ b/src/assets/icons/category/account-settings.svg @@ -1,14 +1,14 @@ - - - - - - - - - - - - - + + + + + + + + + + + + + diff --git a/src/assets/icons/category/cdn.svg b/src/assets/icons/category/cdn.svg index b67195d2..3f77bd13 100644 --- a/src/assets/icons/category/cdn.svg +++ b/src/assets/icons/category/cdn.svg @@ -1,6 +1,6 @@ - - - - - + + + + + diff --git a/src/assets/icons/category/cloud.svg b/src/assets/icons/category/cloud.svg index d3b911ce..f5c483fc 100644 --- a/src/assets/icons/category/cloud.svg +++ b/src/assets/icons/category/cloud.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/assets/icons/category/ddos-protection.svg b/src/assets/icons/category/ddos-protection.svg index ce72894b..90251f3b 100644 --- a/src/assets/icons/category/ddos-protection.svg +++ b/src/assets/icons/category/ddos-protection.svg @@ -1,7 +1,7 @@ - - - - - - + + + + + + diff --git a/src/assets/icons/category/dns.svg b/src/assets/icons/category/dns.svg index d69df16b..98b1269b 100644 --- a/src/assets/icons/category/dns.svg +++ b/src/assets/icons/category/dns.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/src/assets/icons/category/hosting.svg b/src/assets/icons/category/hosting.svg index 197dae51..eeaf46fb 100644 --- a/src/assets/icons/category/hosting.svg +++ b/src/assets/icons/category/hosting.svg @@ -1,6 +1,6 @@ - - - - - + + + + + diff --git a/src/assets/icons/category/reseller-support.svg b/src/assets/icons/category/reseller-support.svg deleted file mode 100644 index c85e98de..00000000 --- a/src/assets/icons/category/reseller-support.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/src/assets/icons/category/storage.svg b/src/assets/icons/category/storage.svg index a76e9ffc..9a518457 100644 --- a/src/assets/icons/category/storage.svg +++ b/src/assets/icons/category/storage.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/icons/category/streaming-platform.svg b/src/assets/icons/category/streaming-platform.svg index 7b2a776b..fca89054 100644 --- a/src/assets/icons/category/streaming-platform.svg +++ b/src/assets/icons/category/streaming-platform.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/src/assets/icons/category/web-security.svg b/src/assets/icons/category/web-security.svg index e28105cc..a1030a63 100644 --- a/src/assets/icons/category/web-security.svg +++ b/src/assets/icons/category/web-security.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/src/scss/buttons.scss b/src/scss/buttons.scss new file mode 100644 index 00000000..77406221 --- /dev/null +++ b/src/scss/buttons.scss @@ -0,0 +1,122 @@ +@import 'variables'; + +.button { + display: inline-block; + padding: 0.5rem 1.25rem; + min-width: 2rem; + + background: none; + border: 1px solid transparent; + border-radius: $borderButtonRadius; + outline-offset: 0; + outline: 4px solid transparent; + + font-size: 0.875rem; + line-height: 1.5rem; + font-weight: 600; + text-decoration: none; + + cursor: pointer; + transition: 0.15s; + + &_large { + padding: 0.75rem 1.5rem; + font-size: 1rem; + min-width: 3rem; + } + + &_small { + padding: 0.25rem 1rem; + min-width: 1.75rem; + } + + svg { + display: inline-block; + width: 1.25rem; + height: 1.25rem; + margin: 0 -0.5rem; + + > * { + stroke: currentColor; + } + } + + span { + vertical-align: middle; + } + + span + svg { + margin-left: 0.25rem; + } + + svg + span { + margin-left: 0.75rem; + } +} + +.button_primary { + background-color: $actionPrimary; + color: $contentContrastPrimary; + + &:hover { + background-color: $actionPrimaryHover; + } + + &:active, + &.active { + background-color: $actionPrimaryActive; + } + + &:focus-visible { + background-color: $orange-500; + outline-color: $orange-300; + } + + &.disabled { + background-color: $actionPrimaryDisabled; + } +} + +.button_secondary { + color: $contentPrimary; + border: 1px solid $midnightPurple-200; + + &:hover { + border-color: $contentPrimary; + } + + &:active, + &.active { + border-color: $midnightPurple-400; + } + + &:focus-visible { + border-color: $midnightPurple-300; + outline-color: $midnightPurple-300; + } + + &.disabled { + border-color: $midnightPurple-200; + color: $midnightPurple-100; + } +} + +.button_contrast-secondary { + background: none; + color: $contentContrastPrimary; + border: 1px solid $contentContrastSecondary; + + &:hover { + border-color: $contentContrastSecondaryHover; + } + + &:active, + &.active { + border-color: $contentContrastPrimary; + } + + &:focus-visible { + border-color: $actionPrimary; + outline-color: $actionPrimary; + } +} diff --git a/src/scss/code.scss b/src/scss/code.scss index e98c7e09..288fae6d 100644 --- a/src/scss/code.scss +++ b/src/scss/code.scss @@ -33,7 +33,7 @@ :not(pre) > code, pre { - background: $sidebarPurple; + background: $bgSurfaceLight1; } /* Inline code */ diff --git a/src/scss/variables.scss b/src/scss/variables.scss index 2522fb1d..16d1bf34 100644 --- a/src/scss/variables.scss +++ b/src/scss/variables.scss @@ -1,27 +1,96 @@ -$lightGreyBG: #f3f4f5; -$sidebarPurple: #f7f7f8; -$greyPurple: #eae9ec; -$standartPurple: #5d40bf; -$mutedPurple: #767283; -$shadowPurple: #dfdcec; -$contentLink: #ff5913; -$contentLinkActive: #db4100; -$contentLinkHover: #ff6c2e; -$contentPrimary: #22174a; -$borderNormal: #d7dbdf; -$contentSecondary: #56535f; -$contentSecondaryHover: #656c71; -$contentSecondaryActive: #51575c; -$contentContrastSecondary: rgba(255, 255, 255, 0.72); -$borderLine: #d6d7d8; -$contentDisabled: #a5a6a8; -$secondaryContrast: rgba(255, 255, 255, 0.24); -$secondaryContrastHover: rgba(255, 255, 255, 0.72); -$secondaryContrastActive: #ffffff; -$secondaryContrastFocus: #ff5913; -$contentContrastPrimary: #ffffff; -$bgSurfaceDark: #5d40bf; -$actionNeutral: #6e767d; -$border: #d7dbdf; -$brandColor: #ff5913; +// Core Colors +$orange: #ff4c00; +$orange-500: #f87239; +$orange-400: #f58a5c; +$orange-300: #ffb69a; +$orange-200: #ffd8c9; +$orange-100: #ffeee8; + +$midnightPurple: #251b29; +$midnightPurple-500: #3b3540; +$midnightPurple-400: #53505c; +$midnightPurple-300: #6d6b77; +$midnightPurple-200: #878590; +$midnightPurple-100: #a1a0a5; + +$cloudLight: #ffc090; +$cloudLight-500: #f8c9a5; +$cloudLight-400: #f7d6be; +$cloudLight-300: #fadcc4; +$cloudLight-200: #fce7d6; +$cloudLight-100: #fdf1e8; + +$black: #161616; +$grey-700: #4d4d4d; +$grey-600: #939393; +$grey-500: #cecece; +$grey-400: #dddddd; +$grey-300: #eeeeee; +$grey-200: #f6f6f6; +$white: #ffffff; +$polarWhite: #fffef8; + +// Additional +$darkEarth: #3c1414; +$darkPlum: #81265d; +$violet: #3b2b42; +$violet-500: #5b4265; +$violet-400: #856292; + +$purple-600: #cabafd; +$purple-500: #d7cbfd; +$purple-400: #dfd6fe; +$purple-300: #e7e0fe; +$purple-200: #efeafe; +$purple-100: #f7f5ff; + +$darkGreen: #163311; +$green-600: #6ad47e; +$green-500: #80db91; +$green-400: #9ee3ab; +$green-300: #b4e9be; +$green-200: #daf4df; +$green-100: #f0fbf2; + +$red-400: #b3261e; +$red-300: #c95f5a; +$red-200: #de8f8d; +$red-100: #f7c0be; + +// Action Primary +$actionPrimary: $orange; +$actionPrimaryHover: $orange-500; +$actionPrimaryActive: $orange-400; +$actionPrimaryDisabled: $orange-200; + +// Content +$contentPrimary: $midnightPurple; +$contentSecondary: $grey-700; +$contentSecondaryHover: $grey-600; +$contentDisabled: $grey-500; + +$contentContrastPrimary: $white; +$contentContrastSecondary: $grey-400; +$contentContrastSecondaryHover: $grey-200; + +$standartPurple: $violet; +$mutedPurple: $midnightPurple-200; +$actionNeutral: $grey-600; + +// Background +$bgSurfaceDark: $midnightPurple-400; +$bgSurfaceDark1: $midnightPurple-500; +$bgSurfaceDark2: $midnightPurple; + +$bgSurfaceLight: $white; +$bgSurfaceLight1: $grey-200; +$bgSurfaceLight2: $grey-300; + +// Border + +$border: $grey-500; +$borderDark: $midnightPurple-400; +$borderLine: $grey-400; $pointCheckmark: #dfdcec; + +$borderButtonRadius: 6.25rem; diff --git a/src/styles.scss b/src/styles.scss index 8c867ed1..a13a78c0 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,4 +1,5 @@ @import './scss/variables'; +@import './scss/buttons'; @import './scss/code'; html { @@ -120,7 +121,11 @@ p { } a { - color: $secondaryContrastFocus; + color: $actionPrimary; +} + +svg { + vertical-align: middle; } .gc-title-with-anchor { @@ -181,7 +186,7 @@ a { padding: 0.25rem 0.75rem; width: auto; background-color: $contentSecondary; - color: $secondaryContrastActive; + color: $contentContrastPrimary; text-align: center; border-radius: 6px; position: absolute; @@ -221,7 +226,7 @@ a { color: $contentSecondary; border-left: 0.25em solid $borderLine; margin-left: 0; - background: $lightGreyBG; + background: $bgSurfaceLight1; display: block; } } @@ -262,8 +267,8 @@ table { text-align: center; color: $contentPrimary; padding: 0.5rem; - background: $sidebarPurple; - border: 1px solid $borderNormal; + background: $bgSurfaceLight1; + border: 1px solid $border; } td { @@ -274,7 +279,7 @@ table { text-align: center; color: $contentPrimary; padding: 0.5rem; - border: 1px solid $borderNormal; + border: 1px solid $border; ul, ol {