diff --git a/aio/src/styles/0-base/_typography.scss b/aio/src/styles/0-base/_typography.scss index e0d83a57a3..b0547fb4dd 100755 --- a/aio/src/styles/0-base/_typography.scss +++ b/aio/src/styles/0-base/_typography.scss @@ -1,3 +1,5 @@ +@use '../constants' as *; + html { font-size: 62.5%; } diff --git a/aio/src/styles/1-layouts/_layout-global.scss b/aio/src/styles/1-layouts/_layout-global.scss index 13735e0c85..4ca431e950 100644 --- a/aio/src/styles/1-layouts/_layout-global.scss +++ b/aio/src/styles/1-layouts/_layout-global.scss @@ -1,3 +1,5 @@ +@use '../constants' as *; + html, body { height: 100%; } diff --git a/aio/src/styles/1-layouts/_not-found.scss b/aio/src/styles/1-layouts/_not-found.scss index 667ca62c66..39f62159eb 100644 --- a/aio/src/styles/1-layouts/_not-found.scss +++ b/aio/src/styles/1-layouts/_not-found.scss @@ -1,3 +1,5 @@ +@use '../constants' as *; + .nf-container { align-items: center; padding: 32px; diff --git a/aio/src/styles/1-layouts/_sidenav.scss b/aio/src/styles/1-layouts/_sidenav.scss index 1ecf57666a..f0b06ff1c6 100644 --- a/aio/src/styles/1-layouts/_sidenav.scss +++ b/aio/src/styles/1-layouts/_sidenav.scss @@ -1,3 +1,5 @@ +@use '../constants' as *; + // Disable sidenav animations for the initial render. .starting.mat-drawer-transition .mat-drawer-content { transition: none; diff --git a/aio/src/styles/1-layouts/_top-menu.scss b/aio/src/styles/1-layouts/_top-menu.scss index d6393b528a..71fdcfe4b4 100644 --- a/aio/src/styles/1-layouts/_top-menu.scss +++ b/aio/src/styles/1-layouts/_top-menu.scss @@ -1,3 +1,5 @@ +@use '../constants' as *; + // VARIABLES $showTopMenuWidth: 1048px; $hideTopMenuWidth: $showTopMenuWidth - 1; diff --git a/aio/src/styles/2-modules/_alert.scss b/aio/src/styles/2-modules/_alert.scss index 2bcff7bca2..45ccbc4210 100644 --- a/aio/src/styles/2-modules/_alert.scss +++ b/aio/src/styles/2-modules/_alert.scss @@ -1,3 +1,5 @@ +@use '../constants' as *; + .alert { padding: 16px; margin: 24px 0px; diff --git a/aio/src/styles/2-modules/_api-list.scss b/aio/src/styles/2-modules/_api-list.scss index ae2162a7ab..acf35d8934 100644 --- a/aio/src/styles/2-modules/_api-list.scss +++ b/aio/src/styles/2-modules/_api-list.scss @@ -1,3 +1,5 @@ +@use '../constants' as *; + /* API LIST STYLES */ aio-api-list { diff --git a/aio/src/styles/2-modules/_api-pages.scss b/aio/src/styles/2-modules/_api-pages.scss index 97c18d15c5..95b16e6c33 100644 --- a/aio/src/styles/2-modules/_api-pages.scss +++ b/aio/src/styles/2-modules/_api-pages.scss @@ -1,3 +1,5 @@ +@use '../constants' as *; + .api-body { max-width: 1200px; diff --git a/aio/src/styles/2-modules/_api-symbols.scss b/aio/src/styles/2-modules/_api-symbols.scss index 04ddf8c63d..54a6632f79 100644 --- a/aio/src/styles/2-modules/_api-symbols.scss +++ b/aio/src/styles/2-modules/_api-symbols.scss @@ -1,3 +1,5 @@ +@use '../constants' as *; + /* API SYMBOLS */ /* SYMBOL CLASS */ diff --git a/aio/src/styles/2-modules/_buttons.scss b/aio/src/styles/2-modules/_buttons.scss index b91fb0d455..c12e0f09b2 100644 --- a/aio/src/styles/2-modules/_buttons.scss +++ b/aio/src/styles/2-modules/_buttons.scss @@ -1,3 +1,5 @@ +@use '../constants' as *; + /* Button Styles */ button { diff --git a/aio/src/styles/2-modules/_callout.scss b/aio/src/styles/2-modules/_callout.scss index 5b4221b8f1..f2e54f70cc 100644 --- a/aio/src/styles/2-modules/_callout.scss +++ b/aio/src/styles/2-modules/_callout.scss @@ -1,3 +1,5 @@ +@use '../constants' as *; + .callout { @extend .alert; padding: 0px; diff --git a/aio/src/styles/2-modules/_card.scss b/aio/src/styles/2-modules/_card.scss index 7b1ee812d2..8e69a88984 100644 --- a/aio/src/styles/2-modules/_card.scss +++ b/aio/src/styles/2-modules/_card.scss @@ -1,3 +1,5 @@ +@use '../constants' as *; + .card-container { display: flex; flex-direction: row; diff --git a/aio/src/styles/2-modules/_code.scss b/aio/src/styles/2-modules/_code.scss index 3f93615f57..1eba520c73 100644 --- a/aio/src/styles/2-modules/_code.scss +++ b/aio/src/styles/2-modules/_code.scss @@ -1,3 +1,5 @@ +@use '../constants' as *; + code-example, code-tabs { clear: both; diff --git a/aio/src/styles/2-modules/_contributor.scss b/aio/src/styles/2-modules/_contributor.scss index cf367318a4..ccb42608e2 100644 --- a/aio/src/styles/2-modules/_contributor.scss +++ b/aio/src/styles/2-modules/_contributor.scss @@ -1,3 +1,5 @@ +@use '../constants' as *; + aio-contributor-list { .contributor-group { display: flex; diff --git a/aio/src/styles/2-modules/_deploy-theme.scss b/aio/src/styles/2-modules/_deploy-theme.scss index c90fb92d49..442df2ab89 100644 --- a/aio/src/styles/2-modules/_deploy-theme.scss +++ b/aio/src/styles/2-modules/_deploy-theme.scss @@ -1,3 +1,5 @@ +@use '../constants' as *; + aio-shell.mode-archive { @include deploy-theme($blue-grey-900, $blue-grey-400); } diff --git a/aio/src/styles/2-modules/_details.scss b/aio/src/styles/2-modules/_details.scss index d3d9025dcf..9239b843f9 100644 --- a/aio/src/styles/2-modules/_details.scss +++ b/aio/src/styles/2-modules/_details.scss @@ -1,3 +1,5 @@ +@use '../constants' as *; + /* * General styling to make detail/summary tags look a bit more material * To get the best out of it you should structure your usage like this: diff --git a/aio/src/styles/2-modules/_errors.scss b/aio/src/styles/2-modules/_errors.scss index 9760bcefe9..fc918100e7 100644 --- a/aio/src/styles/2-modules/_errors.scss +++ b/aio/src/styles/2-modules/_errors.scss @@ -1,3 +1,4 @@ +@use '../constants' as *; .error-list { display: grid; diff --git a/aio/src/styles/2-modules/_features.scss b/aio/src/styles/2-modules/_features.scss index 896f48ed10..23ede47d9c 100644 --- a/aio/src/styles/2-modules/_features.scss +++ b/aio/src/styles/2-modules/_features.scss @@ -1,3 +1,5 @@ +@use '../constants' as *; + // FEATURES MARKETING PAGE SPECIFIC STYLES .feature-section { diff --git a/aio/src/styles/2-modules/_filetree.scss b/aio/src/styles/2-modules/_filetree.scss index 9a62cd56cd..8b2abbb1e9 100644 --- a/aio/src/styles/2-modules/_filetree.scss +++ b/aio/src/styles/2-modules/_filetree.scss @@ -1,3 +1,5 @@ +@use '../constants' as *; + .filetree { background: $white; border: 4px solid $lightgray; diff --git a/aio/src/styles/2-modules/_guides.scss b/aio/src/styles/2-modules/_guides.scss index db656ac923..c0895055d9 100644 --- a/aio/src/styles/2-modules/_guides.scss +++ b/aio/src/styles/2-modules/_guides.scss @@ -1,3 +1,5 @@ +@use '../constants' as *; + .reviewed { color: lighten($darkgray, 10); @include font-size(13); diff --git a/aio/src/styles/2-modules/_heading-anchors.scss b/aio/src/styles/2-modules/_heading-anchors.scss index d6ddc3dae1..5b1027760e 100644 --- a/aio/src/styles/2-modules/_heading-anchors.scss +++ b/aio/src/styles/2-modules/_heading-anchors.scss @@ -1,3 +1,5 @@ +@use '../constants' as *; + .sidenav-content { h1, h2, h3, h4, h5, h6 { diff --git a/aio/src/styles/2-modules/_hr.scss b/aio/src/styles/2-modules/_hr.scss index 6f02629450..610a844da0 100644 --- a/aio/src/styles/2-modules/_hr.scss +++ b/aio/src/styles/2-modules/_hr.scss @@ -1,3 +1,5 @@ +@use '../constants' as *; + hr { border: none; background: $lightgray; diff --git a/aio/src/styles/2-modules/_images.scss b/aio/src/styles/2-modules/_images.scss index 5846a8a994..7f945214fb 100644 --- a/aio/src/styles/2-modules/_images.scss +++ b/aio/src/styles/2-modules/_images.scss @@ -1,3 +1,5 @@ +@use '../constants' as *; + .content { img { diff --git a/aio/src/styles/2-modules/_label.scss b/aio/src/styles/2-modules/_label.scss index b68bd379fb..e9d55721f6 100644 --- a/aio/src/styles/2-modules/_label.scss +++ b/aio/src/styles/2-modules/_label.scss @@ -1,3 +1,5 @@ +@use '../constants' as *; + .api-header label { border-radius: 4px; padding: 2px 10px; diff --git a/aio/src/styles/2-modules/_notification.scss b/aio/src/styles/2-modules/_notification.scss index 7494602acc..be4bc7d543 100644 --- a/aio/src/styles/2-modules/_notification.scss +++ b/aio/src/styles/2-modules/_notification.scss @@ -1,3 +1,5 @@ +@use '../constants' as *; + $notificationHeight: 56px; // we need to override some of the toolbar styling diff --git a/aio/src/styles/2-modules/_presskit.scss b/aio/src/styles/2-modules/_presskit.scss index 37774aea6e..4a6853cb7f 100644 --- a/aio/src/styles/2-modules/_presskit.scss +++ b/aio/src/styles/2-modules/_presskit.scss @@ -1,3 +1,5 @@ +@use '../constants' as *; + .presskit-container { padding: 0 32px 32px 32px; diff --git a/aio/src/styles/2-modules/_resources.scss b/aio/src/styles/2-modules/_resources.scss index 2e7223231b..3dc009c0db 100644 --- a/aio/src/styles/2-modules/_resources.scss +++ b/aio/src/styles/2-modules/_resources.scss @@ -1,3 +1,5 @@ +@use '../constants' as *; + aio-resource-list { .showcase { transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); diff --git a/aio/src/styles/2-modules/_search-results.scss b/aio/src/styles/2-modules/_search-results.scss index 67ecd17c03..93b0174561 100644 --- a/aio/src/styles/2-modules/_search-results.scss +++ b/aio/src/styles/2-modules/_search-results.scss @@ -1,3 +1,5 @@ +@use '../constants' as *; + aio-search-results { z-index: 10; diff --git a/aio/src/styles/2-modules/_select-menu.scss b/aio/src/styles/2-modules/_select-menu.scss index a1232ff312..169f1fe2b5 100644 --- a/aio/src/styles/2-modules/_select-menu.scss +++ b/aio/src/styles/2-modules/_select-menu.scss @@ -1,3 +1,5 @@ +@use '../constants' as *; + /* SELECT MENU */ aio-select { diff --git a/aio/src/styles/2-modules/_table.scss b/aio/src/styles/2-modules/_table.scss index bb68b7a7f1..ea9bcc9925 100644 --- a/aio/src/styles/2-modules/_table.scss +++ b/aio/src/styles/2-modules/_table.scss @@ -1,3 +1,5 @@ +@use '../constants' as *; + table { margin: 24px 0px; box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12); diff --git a/aio/src/styles/2-modules/_toc.scss b/aio/src/styles/2-modules/_toc.scss index 2a8463b9c5..edb20e0942 100644 --- a/aio/src/styles/2-modules/_toc.scss +++ b/aio/src/styles/2-modules/_toc.scss @@ -1,3 +1,5 @@ +@use '../constants' as *; + $tocItemLineHeight: 24; $tocItemTopPadding: 9; $tocMarkerRailSize: 1; diff --git a/aio/src/styles/_mixins.scss b/aio/src/styles/_mixins.scss index b1a516a1a4..737acfcbc0 100644 --- a/aio/src/styles/_mixins.scss +++ b/aio/src/styles/_mixins.scss @@ -1,3 +1,5 @@ +@use './constants'; + // REM Font Adjustments @mixin font-size($sizeValue) { font-size: ($sizeValue) + px; @@ -46,14 +48,14 @@ @mixin card($height, $width) { height: $height; width: $width; - background-color: $white; + background-color: constants.$white; border-radius: 4px; - box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12); + box-shadow: 0 2px 2px rgba(constants.$black, 0.24), 0 0 2px rgba(constants.$black, 0.12); box-sizing: border-box; transition: box-shadow .5s; &:hover { - box-shadow: 0 8px 8px rgba($black, 0.24), 0 0 8px rgba($black, 0.12); + box-shadow: 0 8px 8px rgba(constants.$black, 0.24), 0 0 8px rgba(constants.$black, 0.12); text-decoration: none; } } diff --git a/aio/src/styles/_print.scss b/aio/src/styles/_print.scss index 52dcb48d3a..dbdbf35b2a 100644 --- a/aio/src/styles/_print.scss +++ b/aio/src/styles/_print.scss @@ -1,3 +1,5 @@ +@use './constants' as *; + @media print { // General Adjustments diff --git a/aio/src/styles/main.scss b/aio/src/styles/main.scss index a191649446..b7c73b7268 100755 --- a/aio/src/styles/main.scss +++ b/aio/src/styles/main.scss @@ -1,8 +1,5 @@ // import global themes -@import './ng-io-theme'; - -// import global variables -@import './constants'; +@use './ng-io-theme'; // import global mixins @import './mixins';