iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(docs-infra): grab scss mixins with scss use syntax instead of global imports (#41129) 

move away from global mixins because @import is going to be deprecated

PR Close #41129
This commit is contained in:
AleksanderBodurri 2021-03-08 20:03:30 -05:00 committed by Andrew Kushnir
parent 21e35ece79
commit d429029074
39 changed files with 175 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
aio/src/styles/0-base/_index.scss
View File

@ -2,4 +2,4 @@
BASE STYLES
============================== */
@import 'typography';
@forward 'typography';

1
aio/src/styles/0-base/_typography.scss
View File

@ -1,4 +1,5 @@
@use '../constants' as *;
@use '../mixins' as *;
html {
font-size: 62.5%;

16
aio/src/styles/1-layouts/_index.scss
View File

@ -2,11 +2,11 @@
LAYOUT STYLES
============================== */
@import 'content-layout/content-layout';
@import 'doc-viewer/doc-viewer';
@import 'footer/footer';
@import 'layout-global';
@import 'marketing-layout/marketing-layout';
@import 'not-found';
@import 'sidenav';
@import 'top-menu';
@forward 'content-layout/content-layout';
@forward 'doc-viewer/doc-viewer';
@forward 'footer/footer';
@forward 'layout-global';
@forward 'marketing-layout/marketing-layout';
@forward 'not-found';
@forward 'sidenav';
@forward 'top-menu';

1
aio/src/styles/1-layouts/_not-found.scss
View File

@ -1,4 +1,5 @@
@use '../constants' as *;
@use '../mixins' as *;
.nf-container {
align-items: center;

1
aio/src/styles/1-layouts/_sidenav.scss
View File

@ -1,4 +1,5 @@
@use '../constants' as *;
@use '../mixins' as *;
// Disable sidenav animations for the initial render.
.starting.mat-drawer-transition .mat-drawer-content {

1
aio/src/styles/1-layouts/_top-menu.scss
View File

@ -1,4 +1,5 @@
@use '../constants' as *;
@use '../mixins' as *;
// VARIABLES
$showTopMenuWidth: 1048px;

2
aio/src/styles/1-layouts/_content-layout.scss → aio/src/styles/1-layouts/content-layout/_content-layout.scss
View File

@ -1,3 +1,5 @@
@use '../../mixins' as *;
.sidenav-container {
width: 100%;
height: 100vh;

0
aio/src/styles/1-layouts/_doc-viewer.scss → aio/src/styles/1-layouts/doc-viewer/_doc-viewer.scss
View File

26
aio/src/styles/1-layouts/footer/_footer-theming.scss Normal file
View File

@ -0,0 +1,26 @@
@use '../../constants' as *;
@mixin footer-theme($theme) {
$primary: map-get($theme, primary);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark);
footer {
background-color: $blue;
aio-footer {
& > * {
color: $white;
}
a {
color: $white;
}
h3 {
color: $white;
}
}
}
}

9
aio/src/styles/1-layouts/_footer.scss → aio/src/styles/1-layouts/footer/_footer.scss
View File

@ -1,10 +1,12 @@
@use '../../constants';
@use '../../mixins' as *;
footer {
position: relative;
@include line-height(24);
flex: 1;
padding: 48px;
z-index: 0;
background-color: $blue;
font-weight: 300;
aio-footer {
@ -12,7 +14,6 @@ footer {
z-index: 0;
& > * {
color: $white;
max-width: 50em;
}
@ -22,7 +23,6 @@ footer {
}
a {
color: $white;
text-decoration: none;
z-index: 20;
position: relative;
@ -37,7 +37,7 @@ footer {
&:focus {
// `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
outline: 1px solid rgba($white, 0.8);
outline: 1px solid rgba(constants.$white, 0.8);
outline-offset: 2px;
}
}
@ -47,7 +47,6 @@ footer {
text-transform: uppercase;
font-weight: 400;
margin: 8px 0 12px;
color: $white;
@media (max-width: 600px) {
@include font-size(14);

74
aio/src/styles/1-layouts/marketing-layout/_marketing-layout-theme.scss
View File

@ -1,13 +1,69 @@
@mixin marketing-layout-theme($theme) {
$primary: map-get($theme, primary);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark);
@use '../../constants' as *;
.background-sky {
background-color: mat-color($primary, default);
background: linear-gradient(145deg, mat-color($primary, 900), mat-color($primary, 400));
color: mat-color($foreground, text);
@mixin marketing-layout-theme($theme) {
$primary: map-get($theme, primary);
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
$is-dark-theme: map-get($theme, is-dark);
.background-sky {
background-color: mat-color($primary, default);
background: linear-gradient(145deg, mat-color($primary, 900), mat-color($primary, 400));
color: mat-color($foreground, text);
}
section#intro {
color: $white;
}
.announcement-bar {
background-color: $white;
.button {
color: $white;
background-color: $blue;
&:hover {
color: rgba($white, 0.7);
}
}
}
.home-row .card {
.card-text-container {
p {
color: if($is-dark-theme, $offwhite, $darkgray);
}
}
&:hover {
h2 {
color: $blue;
}
}
}
.button.hero-cta {
background-color: if($is-dark-theme, $darkgray, $white);
}
.cta-bar {
.hero-cta {
color: if($is-dark-theme, lighten($blue, 10), $blue);
}
}
.text-headline {
color: if($is-dark-theme, lighten($blue, 10), $blue);
}
.marketing-banner {
background-color: if($is-dark-theme, $blue, lighten($blue, 10));
.banner-headline {
color: $white;
}
}
}

28
aio/src/styles/1-layouts/marketing-layout/_marketing-layout.scss
View File

@ -1,3 +1,6 @@
@use '../../constants' as *;
@use '../../mixins' as *;
.hero {
display: flex;
flex-direction: column;
@ -42,7 +45,6 @@ section#intro {
height: 480px;
margin: 0 auto -32px;
padding: 48px 0 0;
color: $white;
@media (max-width: 780px) {
flex-direction: column;
@ -108,7 +110,6 @@ section#intro {
margin-bottom: 8px;
max-width: none;
padding: 0;
filter: drop-shadow(0 2px 2px rgba($black, 0.24));
@media (max-width: 780px) {
width: 250px;
@ -127,7 +128,6 @@ section#intro {
max-width: 50vw;
margin: 0 auto;
padding: 16px;
background-color: $white;
border-radius: 4px;
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
box-sizing: border-box;
@ -155,16 +155,10 @@ section#intro {
height: 40px;
min-width: 160px;
@include font-size(16);
color: $white;
background-color: $blue;
border-radius: 48px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
box-sizing: border-box;
cursor: pointer;
&:hover {
color: rgba($white, 0.7);
}
}
.material-icons {
@ -226,18 +220,10 @@ section#intro {
p {
text-align: left;
color: $darkgray;
margin: 0;
padding: 8px 0;
}
}
&:hover {
h2 {
color: $blue;
}
}
}
.button.hero-cta {
@ -245,7 +231,6 @@ section#intro {
@include font-size(18);
font-weight: 600;
@include line-height(40);
background-color: $white;
border-radius: 48px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
box-sizing: border-box;
@ -281,16 +266,11 @@ section#intro {
background: none;
box-shadow: none;
}
.hero-cta {
color: $blue;
}
}
.text-headline {
@include font-size(20);
font-weight: 500;
color: $blue;
margin-top: 10px;
text-transform: uppercase;
}
@ -365,7 +345,6 @@ div[layout=row]{
}
.marketing-banner {
background-color: lighten($blue, 10);
margin-top: 64px;
padding: 32px;
@ -378,7 +357,6 @@ div[layout=row]{
text-transform: uppercase;
@include font-size(24);
font-weight: 300;
color: $white;
margin: 0;
-webkit-margin-before: 0;
-webkit-margin-after: 0;

1
aio/src/styles/2-modules/_alert.scss
View File

@ -1,4 +1,5 @@
@use '../constants' as *;
@use '../mixins' as *;
.alert {
padding: 16px;

1
aio/src/styles/2-modules/_api-list.scss
View File

@ -1,4 +1,5 @@
@use '../constants' as *;
@use '../mixins' as *;
/* API LIST STYLES */

1
aio/src/styles/2-modules/_api-pages.scss
View File

@ -1,4 +1,5 @@
@use '../constants' as *;
@use '../mixins' as *;
.api-body {
max-width: 1200px;

1
aio/src/styles/2-modules/_api-symbols.scss
View File

@ -1,4 +1,5 @@
@use '../constants' as *;
@use '../mixins' as *;
/* API SYMBOLS */

1
aio/src/styles/2-modules/_buttons.scss
View File

@ -1,4 +1,5 @@
@use '../constants' as *;
@use '../mixins' as *;
/* Button Styles */

2
aio/src/styles/2-modules/_callout.scss
View File

@ -1,4 +1,6 @@
@use '../constants' as *;
@use '../mixins' as *;
@use './alert';
.callout {
@extend .alert;

1
aio/src/styles/2-modules/_card.scss
View File

@ -1,4 +1,5 @@
@use '../constants' as *;
@use '../mixins' as *;
.card-container {
display: flex;

1
aio/src/styles/2-modules/_code.scss
View File

@ -1,4 +1,5 @@
@use '../constants' as *;
@use '../mixins' as *;
code-example,
code-tabs {

1
aio/src/styles/2-modules/_contributor.scss
View File

@ -1,4 +1,5 @@
@use '../constants' as *;
@use '../mixins' as *;
aio-contributor-list {
.contributor-group {

1
aio/src/styles/2-modules/_deploy-theme.scss
View File

@ -1,4 +1,5 @@
@use '../constants' as *;
@use '../mixins' as *;
aio-shell.mode-archive {
@include deploy-theme($blue-grey-900, $blue-grey-400);

1
aio/src/styles/2-modules/_details.scss
View File

@ -1,4 +1,5 @@
@use '../constants' as *;
@use '../mixins' as *;
/*
* General styling to make detail/summary tags look a bit more material

1
aio/src/styles/2-modules/_errors.scss
View File

@ -1,4 +1,5 @@
@use '../constants' as *;
@use '../mixins' as *;
.error-list {
display: grid;

1
aio/src/styles/2-modules/_features.scss
View File

@ -1,4 +1,5 @@
@use '../constants' as *;
@use '../mixins' as *;
// FEATURES MARKETING PAGE SPECIFIC STYLES

1
aio/src/styles/2-modules/_filetree.scss
View File

@ -1,4 +1,5 @@
@use '../constants' as *;
@use '../mixins' as *;
.filetree {
background: $white;

1
aio/src/styles/2-modules/_guides.scss
View File

@ -1,4 +1,5 @@
@use '../constants' as *;
@use '../mixins' as *;
.reviewed {
color: lighten($darkgray, 10);

59
aio/src/styles/2-modules/_index.scss
View File

@ -2,33 +2,32 @@
MODULE STYLES
============================== */
@import 'alert';
@import 'api-list';
@import 'api-pages';
@import 'api-symbols';
@import 'buttons';
@import 'callout';
@import 'card';
@import 'cli-pages';
@import 'code';
@import 'contribute';
@import 'contributor';
@import 'deploy-theme';
@import 'details';
@import 'errors';
@import 'features';
@import 'filetree';
@import 'guides';
@import 'heading-anchors';
@import 'hr';
@import 'images';
@import 'label';
@import 'notification';
@import 'progress-bar';
@import 'presskit';
@import 'resources';
@import 'roadmap';
@import 'search-results';
@import 'select-menu';
@import 'table';
@import 'toc';
@forward 'alert';
@forward 'api-list';
@forward 'api-pages';
@forward 'api-symbols';
@forward 'buttons';
@forward 'callout';
@forward 'card';
@forward 'cli-pages';
@forward 'code';
@forward 'contribute';
@forward 'contributor';
@forward 'deploy-theme';
@forward 'details';
@forward 'errors';
@forward 'features';
@forward 'filetree';
@forward 'guides';
@forward 'heading-anchors';
@forward 'hr';
@forward 'images';
@forward 'label';
@forward 'notification';
@forward 'progress-bar';
@forward 'presskit';
@forward 'resources';
@forward 'search-results';
@forward 'select-menu';
@forward 'table';
@forward 'toc';

1
aio/src/styles/2-modules/_label.scss
View File

@ -1,4 +1,5 @@
@use '../constants' as *;
@use '../mixins' as *;
.api-header label {
border-radius: 4px;

1
aio/src/styles/2-modules/_notification.scss
View File

@ -1,4 +1,5 @@
@use '../constants' as *;
@use '../mixins' as *;
$notificationHeight: 56px;

1
aio/src/styles/2-modules/_presskit.scss
View File

@ -1,4 +1,5 @@
@use '../constants' as *;
@use '../mixins' as *;
.presskit-container {
padding: 0 32px 32px 32px;

1
aio/src/styles/2-modules/_resources.scss
View File

@ -1,4 +1,5 @@
@use '../constants' as *;
@use '../mixins' as *;
aio-resource-list {
.showcase {

1
aio/src/styles/2-modules/_search-results.scss
View File

@ -1,4 +1,5 @@
@use '../constants' as *;
@use '../mixins' as *;
aio-search-results {
z-index: 10;

1
aio/src/styles/2-modules/_select-menu.scss
View File

@ -1,4 +1,5 @@
@use '../constants' as *;
@use '../mixins' as *;
/* SELECT MENU */

1
aio/src/styles/2-modules/_table.scss
View File

@ -1,4 +1,5 @@
@use '../constants' as *;
@use '../mixins' as *;
table {
margin: 24px 0px;

1
aio/src/styles/2-modules/_toc.scss
View File

@ -1,4 +1,5 @@
@use '../constants' as *;
@use '../mixins' as *;
$tocItemLineHeight: 24;
$tocItemTopPadding: 9;

1
aio/src/styles/_app-theme.scss
View File

@ -1,5 +1,4 @@
@import '~@angular/material/theming';
@import '1-layouts/marketing-layout/marketing-layout-theme';
@mixin app-theme($theme) {

8
aio/src/styles/_mixins.scss
View File

@ -1,4 +1,4 @@
@use './constants';
@use './constants' as *;
// REM Font Adjustments
@mixin font-size($sizeValue) {
@ -48,14 +48,14 @@
@mixin card($height, $width) {
height: $height;
width: $width;
background-color: constants.$white;
background-color: $white;
border-radius: 4px;
box-shadow: 0 2px 2px rgba(constants.$black, 0.24), 0 0 2px rgba(constants.$black, 0.12);
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
box-sizing: border-box;
transition: box-shadow .5s;
&:hover {
box-shadow: 0 8px 8px rgba(constants.$black, 0.24), 0 0 8px rgba(constants.$black, 0.12);
box-shadow: 0 8px 8px rgba($black, 0.24), 0 0 8px rgba($black, 0.12);
text-decoration: none;
}
}

12
aio/src/styles/main.scss
View File

@ -1,13 +1,9 @@
// import global themes
@use './ng-io-theme';
// import global mixins
@import './mixins';
@use './ng-io-theme.scss';
// import directories
@import './0-base';
@import './1-layouts';
@import './2-modules';
@use './0-base' as base;
@use './1-layouts' as layouts;
@use './2-modules' as modules;
// import print styles
@import './print';