feat(docs-infra): create module theme files (#41129)
creates theming files for the module styles in aio; done as part of the effor to make aio themeable PR Close #41129
This commit is contained in:
AleksanderBodurri
Andrew Kushnir
parent
ab7e8dc99d
commit
8d9d1c293d
|
|
@ -2,11 +2,11 @@
|
|||
LAYOUT STYLES
|
||||
============================== */
|
||||
|
||||
@forward 'content-layout/content-layout';
|
||||
@forward 'doc-viewer/doc-viewer';
|
||||
@forward 'footer/footer';
|
||||
@forward 'layout-global/layout-global';
|
||||
@forward 'marketing-layout/marketing-layout';
|
||||
@forward 'not-found/not-found';
|
||||
@forward 'sidenav/sidenav';
|
||||
@forward 'top-menu/top-menu';
|
||||
@forward 'content-layout/content-layout';
|
||||
@forward 'doc-viewer/doc-viewer';
|
||||
@forward 'footer/footer';
|
||||
@forward 'layout-global/layout-global';
|
||||
@forward 'marketing-layout/marketing-layout';
|
||||
@forward 'not-found/not-found';
|
||||
@forward 'sidenav/sidenav';
|
||||
@forward 'top-menu/top-menu';
|
||||
|
|
|
|||
|
|
@ -1,67 +0,0 @@
|
|||
@use '../constants' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
.alert {
|
||||
padding: 16px;
|
||||
margin: 24px 0px;
|
||||
@include font-size(14);
|
||||
color: $darkgray;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
clear: both;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.is-critical {
|
||||
border-left: 8px solid $brightred;
|
||||
background-color: rgba($brightred, 0.05);
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: $brightred;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-important {
|
||||
border-left: 8px solid $orange;
|
||||
background-color: rgba($orange, 0.05);
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: $orange;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-helpful {
|
||||
border-left: 8px solid $blue;
|
||||
background-color: rgba($blue, 0.05);
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
&.archive-warning {
|
||||
background-color: $darkred;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
* {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> * {
|
||||
margin: 8px 16px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
@use '../constants' as *;
|
||||
@use '../mixins' as *;
|
||||
|
||||
/* API SYMBOLS */
|
||||
|
||||
/* SYMBOL CLASS */
|
||||
|
||||
.symbol {
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 1px 2px rgba($black, .24);
|
||||
color: $white;
|
||||
display: inline-block;
|
||||
@include font-size(10);
|
||||
font-weight: 600;
|
||||
@include line-height(16);
|
||||
margin-right: 8px;
|
||||
text-align: center;
|
||||
width: 16px;
|
||||
|
||||
// SYMBOL TYPES
|
||||
// Symbol mapping variables in *constants*
|
||||
@each $name, $symbol in $api-symbols {
|
||||
&.#{$name} {
|
||||
background: map-get($symbol, background);
|
||||
|
||||
&:before {
|
||||
content: map-get($symbol, content);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
@use '../constants' as *;
|
||||
@use '../mixins' as *;
|
||||
@use './alert';
|
||||
|
||||
.callout {
|
||||
@extend .alert;
|
||||
padding: 0px;
|
||||
border-left: none !important;
|
||||
border-radius: 4px;
|
||||
|
||||
header {
|
||||
color: $white;
|
||||
@include line-height(24);
|
||||
font-weight: 500;
|
||||
padding: 8px 16px;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 16px;
|
||||
margin: 0px;
|
||||
@include font-size(14);
|
||||
}
|
||||
|
||||
> *:not(:first-child) {
|
||||
padding: 16px 24px;
|
||||
}
|
||||
|
||||
&.is-critical {
|
||||
border-color: $brightred;
|
||||
background: rgba($brightred, 0.05);
|
||||
|
||||
header {
|
||||
background: $brightred;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-important {
|
||||
border-color: $orange;
|
||||
background: rgba($orange, 0.05);
|
||||
|
||||
header {
|
||||
background: $amber-700;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-helpful {
|
||||
border-color: $blue;
|
||||
background: rgba($blue, 0.05);
|
||||
|
||||
header {
|
||||
background: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
@use '../constants' as *;
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
background: $lightgray;
|
||||
height: 1px;
|
||||
}
|
||||
|
|
@ -2,32 +2,32 @@
|
|||
MODULE STYLES
|
||||
============================== */
|
||||
|
||||
@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';
|
||||
@forward 'alert/alert';
|
||||
@forward 'api-list/api-list';
|
||||
@forward 'api-pages/api-pages';
|
||||
@forward 'api-symbols/api-symbols';
|
||||
@forward 'buttons/buttons';
|
||||
@forward 'callout/callout';
|
||||
@forward 'card/card';
|
||||
@forward 'cli-pages/cli-pages';
|
||||
@forward 'code/code';
|
||||
@forward 'contribute/contribute';
|
||||
@forward 'contributor/contributor';
|
||||
@forward 'deploy-theme/deploy-theme';
|
||||
@forward 'details/details';
|
||||
@forward 'errors/errors';
|
||||
@forward 'features/features';
|
||||
@forward 'filetree/filetree';
|
||||
@forward 'guides/guides';
|
||||
@forward 'heading-anchors/heading-anchors';
|
||||
@forward 'hr/hr';
|
||||
@forward 'images/images';
|
||||
@forward 'label/label';
|
||||
@forward 'notification/notification';
|
||||
@forward 'progress-bar/progress-bar';
|
||||
@forward 'presskit/presskit';
|
||||
@forward 'resources/resources';
|
||||
@forward 'search-results/search-results';
|
||||
@forward 'select-menu/select-menu';
|
||||
@forward 'table/table';
|
||||
@forward 'toc/toc';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,51 @@
|
|||
@use 'alert/alert-theme' as *;
|
||||
@use 'api-list/api-list-theme' as *;
|
||||
@use 'api-pages/api-pages-theme' as *;
|
||||
@use 'api-symbols/api-symbols-theme' as *;
|
||||
@use 'buttons/buttons-theme' as *;
|
||||
@use 'callout/callout-theme' as *;
|
||||
@use 'card/card-theme' as *;
|
||||
@use 'code/code-theme' as *;
|
||||
@use 'contributor/contributor-theme' as *;
|
||||
@use 'details/details-theme' as *;
|
||||
@use 'errors/errors-theme' as *;
|
||||
@use 'filetree/filetree-theme' as *;
|
||||
@use 'guides/guides-theme' as *;
|
||||
@use 'heading-anchors/heading-anchors-theme' as *;
|
||||
@use 'hr/hr-theme' as *;
|
||||
@use 'images/images-theme' as *;
|
||||
@use 'label/label-theme' as *;
|
||||
@use 'notification/notification-theme' as *;
|
||||
@use 'presskit/presskit-theme' as *;
|
||||
@use 'resources/resources-theme' as *;
|
||||
@use 'search-results/search-results-theme' as *;
|
||||
@use 'select-menu/select-menu-theme' as *;
|
||||
@use 'table/table-theme' as *;
|
||||
@use 'toc/toc-theme' as *;
|
||||
|
||||
@mixin module-themes($theme) {
|
||||
@include alert-theme($theme);
|
||||
@include api-list-theme($theme);
|
||||
@include api-symbols-theme($theme);
|
||||
@include buttons-theme($theme);
|
||||
@include callout-theme($theme);
|
||||
@include card-theme($theme);
|
||||
@include code-theme($theme);
|
||||
@include contributor-theme($theme);
|
||||
@include deploy-theme($theme);
|
||||
@include details-theme($theme);
|
||||
@include errors-theme($theme);
|
||||
@include filetree-theme($theme);
|
||||
@include guides-theme($theme);
|
||||
@include heading-anchors-theme($theme);
|
||||
@include hr-theme($theme);
|
||||
@include images-theme($theme);
|
||||
@include label-theme($theme);
|
||||
@include notification-theme($theme);
|
||||
@include presskit-theme($theme);
|
||||
@include resources-theme($theme);
|
||||
@include search-results-theme($theme);
|
||||
@include select-menu-theme($theme);
|
||||
@include table-theme($theme);
|
||||
@include toc-theme($theme);
|
||||
}
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
@mixin alert-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);
|
||||
|
||||
.alert {
|
||||
color: if($is-dark-theme, $offwhite, $darkgray);
|
||||
|
||||
&.is-critical {
|
||||
border-left: 8px solid $brightred;
|
||||
background-color: if($is-dark-theme, $deepgray, rgba($brightred, 0.05));
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $brightred;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-important {
|
||||
border-left: 8px solid $orange;
|
||||
background-color: if($is-dark-theme, $deepgray, rgba($orange, 0.05));
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $orange;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-helpful {
|
||||
border-left: 8px solid $blue;
|
||||
background-color: if($is-dark-theme, $deepgray, rgba($blue, 0.05));
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
&.archive-warning {
|
||||
background-color: if($is-dark-theme, $deepgray, $darkred);
|
||||
|
||||
* {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
|
||||
.alert {
|
||||
padding: 16px;
|
||||
margin: 24px 0px;
|
||||
@include font-size(14);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
clear: both;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.archive-warning {
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> * {
|
||||
margin: 8px 16px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
@mixin api-list-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);
|
||||
|
||||
aio-api-list {
|
||||
.api-filter {
|
||||
.form-search {
|
||||
input {
|
||||
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
|
||||
border: 1px solid if($is-dark-theme, $darkgray, $white);
|
||||
background-color: if($is-dark-theme, $darkgray, $white);
|
||||
color: if($is-dark-theme, $white, $darkgray);
|
||||
|
||||
@include placeholder {
|
||||
color: if($is-dark-theme, $offwhite, $mediumgray);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: 1px solid $blue-400;
|
||||
box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
color: if($is-dark-theme, $lightblue, $blue-grey-600);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.api-list-container {
|
||||
.api-list {
|
||||
li {
|
||||
a {
|
||||
color: if($is-dark-theme, $cyan, $blue-grey-600);
|
||||
|
||||
&:hover {
|
||||
background: if($is-dark-theme, $darkgray, $blue-grey-50);
|
||||
color: if($is-dark-theme, $offwhite, $blue-500);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@use '../constants' as *;
|
||||
@use '../mixins' as *;
|
||||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
|
||||
/* API LIST STYLES */
|
||||
|
||||
|
|
@ -42,11 +42,8 @@ aio-api-list {
|
|||
float: left;
|
||||
|
||||
input {
|
||||
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
|
||||
box-sizing: border-box;
|
||||
border: 1px solid $white;
|
||||
border-radius: 4px;
|
||||
color: $darkgray;
|
||||
@include font-size(14);
|
||||
@include line-height(32);
|
||||
outline: none;
|
||||
|
|
@ -56,12 +53,6 @@ aio-api-list {
|
|||
|
||||
@include placeholder {
|
||||
@include font-size(14);
|
||||
color: $mediumgray;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: 1px solid $blue-400;
|
||||
box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
|
|
@ -70,7 +61,6 @@ aio-api-list {
|
|||
}
|
||||
|
||||
.material-icons {
|
||||
color: $blue-grey-600;
|
||||
@include font-size(20);
|
||||
left: 8px;
|
||||
pointer-events: none;
|
||||
|
|
@ -130,17 +120,11 @@ aio-api-list {
|
|||
white-space: nowrap;
|
||||
|
||||
a {
|
||||
color: $blue-grey-600;
|
||||
@include line-height(16);
|
||||
padding: 0 16px;
|
||||
text-decoration: none;
|
||||
transition: all .3s;
|
||||
|
||||
&:hover {
|
||||
background: $blue-grey-50;
|
||||
color: $blue-500;
|
||||
}
|
||||
|
||||
&.deprecated-api-item {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
@mixin api-pages-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);
|
||||
|
||||
.api-body {
|
||||
details.overloads {
|
||||
.detail-contents {
|
||||
border: 1px solid $lightgray;
|
||||
}
|
||||
|
||||
summary {
|
||||
.actions {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
&.method-table,
|
||||
&.option-table,
|
||||
&.list-table {
|
||||
.with-github-links {
|
||||
.github-links {
|
||||
a {
|
||||
color: $mediumgray;
|
||||
|
||||
.material-icons:hover {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
border-bottom: 1px solid $lightgray;
|
||||
}
|
||||
}
|
||||
|
||||
.from-constructor,
|
||||
.read-only-property,
|
||||
.write-only-property {
|
||||
background-color: $lightgray;
|
||||
}
|
||||
}
|
||||
|
||||
.github-links {
|
||||
.material-icons {
|
||||
&:hover {
|
||||
background-color: $mist;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@use '../constants' as *;
|
||||
@use '../mixins' as *;
|
||||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
|
||||
.api-body {
|
||||
max-width: 1200px;
|
||||
|
|
@ -24,7 +24,6 @@
|
|||
|
||||
.detail-contents {
|
||||
padding: 0;
|
||||
border: 1px solid $lightgray;
|
||||
border-radius: 2px;
|
||||
box-shadow: none;
|
||||
|
||||
|
|
@ -43,7 +42,6 @@
|
|||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
color: $blue;
|
||||
@include font-size(14);
|
||||
}
|
||||
.show-all {
|
||||
|
|
@ -130,11 +128,9 @@
|
|||
|
||||
.github-links {
|
||||
a {
|
||||
color: $mediumgray;
|
||||
|
||||
.material-icons:hover {
|
||||
background: none;
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -160,8 +156,6 @@
|
|||
}
|
||||
|
||||
tr {
|
||||
border-bottom: 1px solid $lightgray;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
|
@ -216,7 +210,6 @@
|
|||
font-weight: 600;
|
||||
@include letter-spacing(0.5);
|
||||
font-style: italic;
|
||||
background-color: $lightgray;
|
||||
border-radius: 4px;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
|
@ -250,10 +243,6 @@
|
|||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
@include font-size(20);
|
||||
|
||||
&:hover {
|
||||
background-color: $mist;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
@mixin api-symbols-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);
|
||||
|
||||
.symbol {
|
||||
box-shadow: 0 1px 2px rgba($black, 0.24);
|
||||
color: $white;
|
||||
|
||||
// SYMBOL TYPES
|
||||
// Symbol mapping variables in *constants*
|
||||
@each $name, $symbol in $api-symbols {
|
||||
&.#{$name} {
|
||||
background: map-get($symbol, background);
|
||||
|
||||
&:before {
|
||||
content: map-get($symbol, content);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
|
||||
/* API SYMBOLS */
|
||||
|
||||
/* SYMBOL CLASS */
|
||||
|
||||
.symbol {
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
@include font-size(10);
|
||||
font-weight: 600;
|
||||
@include line-height(16);
|
||||
margin-right: 8px;
|
||||
text-align: center;
|
||||
width: 16px;
|
||||
}
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
@mixin buttons-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);
|
||||
|
||||
// This rule overrides some Angular Material styles defined for `.mat-button`
|
||||
// (hence we include `.mat-button` in the selector).
|
||||
a.button.mat-button,
|
||||
.button {
|
||||
// COLORS
|
||||
|
||||
&.button-secondary {
|
||||
background: $mediumgray;
|
||||
color: rgba($white, 0.87);
|
||||
}
|
||||
|
||||
&.button-plain {
|
||||
background: $white;
|
||||
color: rgba($darkgray, 0.87);
|
||||
}
|
||||
|
||||
&.button-subtle {
|
||||
background: $mediumgray;
|
||||
color: darken($offwhite, 10%);
|
||||
|
||||
&:hover {
|
||||
color: rgba($white, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
&.button-blue {
|
||||
background: $blue;
|
||||
color: rgba($white, 0.87);
|
||||
|
||||
&:hover {
|
||||
color: rgba($white, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
&.button-banner {
|
||||
background: $darkgray;
|
||||
color: rgba($white, 0.87);
|
||||
}
|
||||
}
|
||||
|
||||
.cta-bar {
|
||||
.button {
|
||||
&:hover {
|
||||
color: $offwhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.group-buttons {
|
||||
// This rule overrides some Angular Material styles defined for `.mat-button`
|
||||
// (hence we include `.mat-button` in the selector).
|
||||
a.button.mat-button.filter-button {
|
||||
background-color: rgba($blue, 0.2);
|
||||
&.selected,
|
||||
&:hover {
|
||||
background-color: $blue;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@use '../constants' as *;
|
||||
@use '../mixins' as *;
|
||||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
|
||||
/* Button Styles */
|
||||
|
||||
|
|
@ -41,42 +41,6 @@ a.button.mat-button,
|
|||
@include line-height(56);
|
||||
padding: 0px 24px;
|
||||
}
|
||||
|
||||
|
||||
// COLORS
|
||||
|
||||
&.button-secondary {
|
||||
background: $mediumgray;
|
||||
color: rgba($white, .87);
|
||||
}
|
||||
|
||||
&.button-plain {
|
||||
background: $white;
|
||||
color: rgba($darkgray, .87);
|
||||
}
|
||||
|
||||
&.button-subtle {
|
||||
background: $mediumgray;
|
||||
color: darken($offwhite, 10%);
|
||||
|
||||
&:hover {
|
||||
color: rgba($white, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
&.button-blue {
|
||||
background: $blue;
|
||||
color: rgba($white, .87);
|
||||
|
||||
&:hover {
|
||||
color: rgba($white, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
&.button-banner {
|
||||
background: $darkgray;
|
||||
color: rgba($white, .87);
|
||||
}
|
||||
}
|
||||
|
||||
.cta-bar {
|
||||
|
|
@ -88,7 +52,6 @@ a.button.mat-button,
|
|||
transition: all .2s ease-in-out;
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
color: $offwhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -100,7 +63,6 @@ a.button.mat-button,
|
|||
// This rule overrides some Angular Material styles defined for `.mat-button`
|
||||
// (hence we include `.mat-button` in the selector).
|
||||
a.button.mat-button.filter-button {
|
||||
background-color: rgba($blue, 0.2);
|
||||
border-radius: 4px;
|
||||
@include font-size(16);
|
||||
@include line-height(48);
|
||||
|
|
@ -108,12 +70,6 @@ a.button.mat-button,
|
|||
padding: 0px 16px;
|
||||
width: 168px;
|
||||
|
||||
&.selected,
|
||||
&:hover {
|
||||
background-color: $blue;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
@include font-size(14);
|
||||
width: auto;
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
@mixin callout-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);
|
||||
|
||||
|
||||
.callout {
|
||||
header {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.is-critical {
|
||||
border-color: $brightred;
|
||||
background: rgba($brightred, 0.05);
|
||||
|
||||
header {
|
||||
background: $brightred;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-important {
|
||||
border-color: $orange;
|
||||
background: rgba($orange, 0.05);
|
||||
|
||||
header {
|
||||
background: $amber-700;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-helpful {
|
||||
border-color: $blue;
|
||||
background: rgba($blue, 0.05);
|
||||
|
||||
header {
|
||||
background: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '../alert/alert';
|
||||
|
||||
.callout {
|
||||
@extend .alert;
|
||||
padding: 0px;
|
||||
border-left: none !important;
|
||||
border-radius: 4px;
|
||||
|
||||
header {
|
||||
@include line-height(24);
|
||||
font-weight: 500;
|
||||
padding: 8px 16px;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
p {
|
||||
padding: 16px;
|
||||
margin: 0px;
|
||||
@include font-size(14);
|
||||
}
|
||||
|
||||
> *:not(:first-child) {
|
||||
padding: 16px 24px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
@mixin card-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);
|
||||
|
||||
.card-container {
|
||||
.docs-card {
|
||||
background-color: if($is-dark-theme, $darkgray, $white);
|
||||
|
||||
section {
|
||||
color: if($is-dark-theme, $powderblue, $blue);
|
||||
}
|
||||
|
||||
p {
|
||||
color: if($is-dark-theme, $offwhite, $darkgray);
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
color: if($is-dark-theme, $cyan, $darkblue);
|
||||
background-color: if($is-dark-theme, $deepgray, rgba($blue, 0.1));
|
||||
border-top: 0.5px solid if($is-dark-theme, $darkgray, $lightgray);
|
||||
|
||||
a {
|
||||
color: $mediumgray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-section {
|
||||
@include card(auto, 90%, if($is-dark-theme, $darkgray, $white));
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@use '../constants' as *;
|
||||
@use '../mixins' as *;
|
||||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
|
||||
.card-container {
|
||||
display: flex;
|
||||
|
|
@ -23,7 +23,6 @@
|
|||
}
|
||||
|
||||
section {
|
||||
color: $blue;
|
||||
@include font-size(20);
|
||||
@include line-height(24);
|
||||
margin: 0;
|
||||
|
|
@ -33,7 +32,6 @@
|
|||
}
|
||||
|
||||
p {
|
||||
color: $darkgray;
|
||||
@include font-size(13);
|
||||
@include line-height(24);
|
||||
padding: 0 16px;
|
||||
|
|
@ -42,10 +40,7 @@
|
|||
}
|
||||
|
||||
.card-footer {
|
||||
color: $darkblue;
|
||||
background-color: rgba($blue, 0.1);
|
||||
bottom: 0;
|
||||
border-top: 0.5px solid $lightgray;
|
||||
box-sizing: border-box;
|
||||
@include line-height(48);
|
||||
left: 0;
|
||||
|
|
@ -54,7 +49,6 @@
|
|||
text-align: right;
|
||||
|
||||
a {
|
||||
color: $mediumgray;
|
||||
@include font-size(13);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,226 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
@mixin code-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);
|
||||
|
||||
code-example {
|
||||
&:not(.no-box) {
|
||||
background-color: if($is-dark-theme, $deepgray, rgb($backgroundgray, 0.2));
|
||||
border: 0.5px solid if($is-dark-theme, $darkgray, $lightgray);
|
||||
color: $darkgray;
|
||||
}
|
||||
|
||||
// TERMINAL / SHELL TEXT STYLES
|
||||
&.code-shell,
|
||||
&[language="sh"],
|
||||
&[language="bash"] {
|
||||
background-color: $darkgray;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: if($is-dark-theme, $blue-900, $accentblue);
|
||||
color: $offwhite;
|
||||
}
|
||||
}
|
||||
|
||||
code-tabs {
|
||||
.code-tab-group {
|
||||
.mat-tab-label {
|
||||
&:hover {
|
||||
background: rgba(black, 0.04);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
code-example.avoid header,
|
||||
code-example.avoidFile header {
|
||||
border: 2px solid $anti-pattern;
|
||||
background: $anti-pattern;
|
||||
}
|
||||
|
||||
code-example.avoid,
|
||||
code-example.avoidFile,
|
||||
code-tabs.avoid mat-tab-body,
|
||||
code-tabs.avoidFile mat-tab-body {
|
||||
border: 0.5px solid $anti-pattern;
|
||||
}
|
||||
|
||||
aio-code {
|
||||
pre.prettyprint {
|
||||
code {
|
||||
ol.linenums {
|
||||
color: lighten($mediumgray, 25%);
|
||||
|
||||
li {
|
||||
&::marker {
|
||||
color: lighten($mediumgray, 25%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.code-missing {
|
||||
color: $darkred;
|
||||
}
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
color: $blue-grey-200;
|
||||
|
||||
&:hover {
|
||||
color: $mediumgray;
|
||||
}
|
||||
}
|
||||
|
||||
&.lang-sh,
|
||||
&.lang-bash {
|
||||
.copy-button {
|
||||
color: if($is-dark-theme, $blue-grey-200, $lightgray);
|
||||
|
||||
&:hover {
|
||||
color: if($is-dark-theme, $blue-grey-300, $superlightgray);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidenav-content {
|
||||
code {
|
||||
a {
|
||||
color: if($is-dark-theme, $cyan, $darkblue);
|
||||
}
|
||||
}
|
||||
|
||||
:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(pre) {
|
||||
> code {
|
||||
background-color: if($is-dark-theme, $darkgray, rgba($lightgray, 0.5));
|
||||
color: if($is-dark-theme, $white, $darkgray);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dark Mode Code Palette
|
||||
$code-lightteal: #17d3ff;
|
||||
$code-lightred: #ffb0b0;
|
||||
$code-lightgreen: #a9ef5f;
|
||||
$code-lightpurple: #d1b4ff;
|
||||
$code-lightorange: #ffd779;
|
||||
$code-lightblue: #98caff;
|
||||
$code-grey: rgba(255, 255, 255, 0.7);
|
||||
|
||||
/* PRETTY PRINTING STYLES for prettify.js. */
|
||||
|
||||
/* The following class|color styles are derived from https://github.com/google/code-prettify/blob/master/src/prettify.css*/
|
||||
|
||||
/* SPAN elements with the classes below are added by prettyprint. */
|
||||
.pln {
|
||||
color: if($is-dark-theme, $white, #000);
|
||||
} /* plain text */
|
||||
|
||||
@media screen {
|
||||
.str {
|
||||
color: if($is-dark-theme, $code-lightgreen, #800);
|
||||
} /* string content */
|
||||
.kwd {
|
||||
color: if($is-dark-theme, $code-lightteal, #00f);
|
||||
} /* a keyword */
|
||||
.com {
|
||||
color: if($is-dark-theme, $code-grey, #060);
|
||||
} /* a comment */
|
||||
.typ {
|
||||
color: if($is-dark-theme, $code-lightred, red);
|
||||
} /* a type name */
|
||||
.lit {
|
||||
color: if($is-dark-theme, $code-lightpurple, #08c);
|
||||
} /* a literal value */
|
||||
/* punctuation, lisp open bracket, lisp close bracket */
|
||||
.pun,
|
||||
.opn,
|
||||
.clo {
|
||||
color: if($is-dark-theme, $code-lightorange, #660);
|
||||
}
|
||||
.tag {
|
||||
color: if($is-dark-theme, $code-lightblue, #008);
|
||||
} /* a markup tag name */
|
||||
.atn {
|
||||
color: if($is-dark-theme, $code-lightpurple, #606);
|
||||
} /* a markup attribute name */
|
||||
.atv {
|
||||
color: if($is-dark-theme, $code-lightorange, #800);
|
||||
} /* a markup attribute value */
|
||||
.dec,
|
||||
.var {
|
||||
color: if($is-dark-theme, $code-lightpurple, #606);
|
||||
} /* a declaration; a variable name */
|
||||
.fun {
|
||||
color: if($is-dark-theme, $code-lightred, red);
|
||||
} /* a function name */
|
||||
}
|
||||
|
||||
/* Use higher contrast and text-weight for printable form. */
|
||||
@media print, projection {
|
||||
.str {
|
||||
color: #060;
|
||||
}
|
||||
.kwd {
|
||||
color: #006;
|
||||
font-weight: bold;
|
||||
}
|
||||
.com {
|
||||
color: #600;
|
||||
font-style: italic;
|
||||
}
|
||||
.typ {
|
||||
color: #404;
|
||||
font-weight: bold;
|
||||
}
|
||||
.lit {
|
||||
color: #044;
|
||||
}
|
||||
.pun,
|
||||
.opn,
|
||||
.clo {
|
||||
color: #440;
|
||||
}
|
||||
.tag {
|
||||
color: #006;
|
||||
font-weight: bold;
|
||||
}
|
||||
.atn {
|
||||
color: #404;
|
||||
}
|
||||
.atv {
|
||||
color: #060;
|
||||
}
|
||||
}
|
||||
|
||||
/* SHELL / TERMINAL CODE BLOCKS */
|
||||
|
||||
code-example {
|
||||
&.code-shell,
|
||||
&[language="sh"],
|
||||
&[language="bash"] {
|
||||
.pnk,
|
||||
.blk,
|
||||
.pln,
|
||||
.otl,
|
||||
.kwd,
|
||||
.typ,
|
||||
.tag,
|
||||
.str,
|
||||
.atv,
|
||||
.atn,
|
||||
.com,
|
||||
.lit,
|
||||
.pun,
|
||||
.dec {
|
||||
color: $codegreen;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,152 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
|
||||
code-example,
|
||||
code-tabs {
|
||||
clear: both;
|
||||
display: block;
|
||||
|
||||
code {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
.mat-card {
|
||||
padding: 0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
code-example {
|
||||
&:not(.no-box) {
|
||||
border-radius: 5px;
|
||||
margin: 16px auto;
|
||||
}
|
||||
|
||||
&.no-box {
|
||||
pre.prettyprint {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
header {
|
||||
border-radius: 5px 5px 0 0;
|
||||
@include font-size(16);
|
||||
padding: 8px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
code-tabs {
|
||||
margin: 16px 0;
|
||||
|
||||
.code-tab-group {
|
||||
.mat-tab-body {
|
||||
overflow-y: hidden;
|
||||
|
||||
.mat-tab-body-content {
|
||||
height: auto;
|
||||
transform: none;
|
||||
|
||||
.fadeIn {
|
||||
animation: opacity 2s ease-in;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
aio-code {
|
||||
pre.prettyprint {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: 32px;
|
||||
margin: 16px 24px;
|
||||
white-space: pre-wrap;
|
||||
align-items: center;
|
||||
|
||||
code {
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
span {
|
||||
@include line-height(24);
|
||||
}
|
||||
|
||||
ol.linenums {
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
font-family: $code-font;
|
||||
font-size: 90%;
|
||||
@include line-height(24);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
right: -19px;
|
||||
padding: 0;
|
||||
overflow: visible; // This is required for the button to be displayed correctly in IE11.
|
||||
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidenav-content {
|
||||
code {
|
||||
a {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(pre) {
|
||||
> code {
|
||||
border-radius: 4px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
&:not(a) > code {
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-guide-cheatsheet & {
|
||||
td:first-of-type,
|
||||
th {
|
||||
code {
|
||||
background-color: inherit;
|
||||
padding: 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.code-anchor {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
font-size: inherit;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
@mixin contributor-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);
|
||||
|
||||
aio-contributor {
|
||||
background: mat-color($background, background);
|
||||
|
||||
.contributor-info {
|
||||
background: rgba($darkgray, 0.5);
|
||||
|
||||
.info-item {
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
color: $lightgray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contributor-image {
|
||||
border: 2px solid $lightgray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@use '../constants' as *;
|
||||
@use '../mixins' as *;
|
||||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
|
||||
aio-contributor-list {
|
||||
.contributor-group {
|
||||
|
|
@ -21,7 +21,6 @@ aio-contributor-list {
|
|||
}
|
||||
|
||||
aio-contributor {
|
||||
background: $white;
|
||||
margin: 8px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
|
@ -46,7 +45,6 @@ aio-contributor {
|
|||
}
|
||||
|
||||
.contributor-info {
|
||||
background: rgba($darkgray, 0.5);
|
||||
height: 168px;
|
||||
width: 168px;
|
||||
display: flex;
|
||||
|
|
@ -59,7 +57,6 @@ aio-contributor {
|
|||
border-radius: 50%;
|
||||
|
||||
.info-item {
|
||||
color: $white;
|
||||
display: flex;
|
||||
@include font-size(14);
|
||||
font-weight: 500;
|
||||
|
|
@ -67,7 +64,6 @@ aio-contributor {
|
|||
padding: 0;
|
||||
|
||||
&:hover {
|
||||
color: $lightgray;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -157,7 +153,6 @@ aio-contributor {
|
|||
background-size: cover;
|
||||
background-position: center;
|
||||
margin: 8px auto;
|
||||
border: 2px solid $lightgray;
|
||||
transition: all .2s ease-in-out;
|
||||
}
|
||||
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@use '../constants' as *;
|
||||
@use '../mixins' as *;
|
||||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
|
||||
aio-shell.mode-archive {
|
||||
@include deploy-theme($blue-grey-900, $blue-grey-400);
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
@mixin details-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);
|
||||
|
||||
details {
|
||||
box-shadow: 0 1px 4px 0 rgba($black, 0.37);
|
||||
|
||||
> summary {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@use '../constants' as *;
|
||||
@use '../mixins' as *;
|
||||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
|
||||
/*
|
||||
* General styling to make detail/summary tags look a bit more material
|
||||
|
|
@ -16,14 +16,11 @@
|
|||
*/
|
||||
|
||||
details {
|
||||
box-shadow: 0 1px 4px 0 rgba($black, 0.37);
|
||||
|
||||
> summary {
|
||||
cursor: pointer;
|
||||
@include font-size(16);
|
||||
position: relative;
|
||||
padding: 16px 24px;
|
||||
color: $black;
|
||||
height: 16px;
|
||||
display: block; // Remove the built in details marker in FF
|
||||
overflow: hidden;
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
@mixin errors-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);
|
||||
|
||||
.error-list {
|
||||
li {
|
||||
.symbol {
|
||||
&.runtime {
|
||||
background: $green-500;
|
||||
}
|
||||
|
||||
&.compiler {
|
||||
background: $blue-500;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $blue-grey-600;
|
||||
|
||||
&:hover {
|
||||
background: $blue-grey-50;
|
||||
color: $blue-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@use '../constants' as *;
|
||||
@use '../mixins' as *;
|
||||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
|
||||
.error-list {
|
||||
display: grid;
|
||||
|
|
@ -22,16 +22,6 @@
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
.symbol {
|
||||
&.runtime {
|
||||
background: $green-500;
|
||||
}
|
||||
|
||||
&.compiler {
|
||||
background: $blue-500;
|
||||
}
|
||||
}
|
||||
|
||||
.symbol.runtime:before {
|
||||
content: "R";
|
||||
}
|
||||
|
|
@ -41,7 +31,6 @@
|
|||
}
|
||||
|
||||
a {
|
||||
color: $blue-grey-600;
|
||||
display: inline-block;
|
||||
@include line-height(16);
|
||||
padding: 0 16px 0;
|
||||
|
|
@ -49,11 +38,6 @@
|
|||
transition: all .3s;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&:hover {
|
||||
background: $blue-grey-50;
|
||||
color: $blue-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@use '../constants' as *;
|
||||
@use '../mixins' as *;
|
||||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
|
||||
// FEATURES MARKETING PAGE SPECIFIC STYLES
|
||||
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
@mixin filetree-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);
|
||||
|
||||
.filetree {
|
||||
background: $white;
|
||||
border: 4px solid $lightgray;
|
||||
|
||||
.file {
|
||||
color: $darkgray;
|
||||
}
|
||||
|
||||
.children {
|
||||
.file {
|
||||
&:before {
|
||||
border-color: $lightgray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,7 @@
|
|||
@use '../constants' as *;
|
||||
@use '../mixins' as *;
|
||||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
|
||||
.filetree {
|
||||
background: $white;
|
||||
border: 4px solid $lightgray;
|
||||
border-radius: 4px;
|
||||
margin: 0 0 24px 0;
|
||||
padding: 16px 32px;
|
||||
|
|
@ -12,7 +10,6 @@
|
|||
display: block;
|
||||
@include letter-spacing(0.3);
|
||||
@include line-height(32);
|
||||
color: $darkgray;
|
||||
}
|
||||
|
||||
.children {
|
||||
|
|
@ -32,7 +29,6 @@
|
|||
position: absolute;
|
||||
border-width: 0 0 1px 1px;
|
||||
border-style: solid;
|
||||
border-color: $lightgray;
|
||||
border-radius: 0 0 0 3px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
@mixin guides-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);
|
||||
|
||||
.reviewed {
|
||||
color: lighten($darkgray, 10);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,7 @@
|
|||
@use '../constants' as *;
|
||||
@use '../mixins' as *;
|
||||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
|
||||
.reviewed {
|
||||
color: lighten($darkgray, 10);
|
||||
@include font-size(13);
|
||||
font-style: italic;
|
||||
text-align: right;
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
@mixin heading-anchors-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);
|
||||
|
||||
.sidenav-content {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
.header-link {
|
||||
color: $mediumgray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +1,9 @@
|
|||
@use '../constants' as *;
|
||||
@use '../../constants' as *;
|
||||
|
||||
.sidenav-content {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
|
||||
.header-link {
|
||||
color: $mediumgray;
|
||||
margin: 0 6px;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
@mixin hr-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);
|
||||
|
||||
hr {
|
||||
background: if($is-dark-theme, $mediumgray, $lightgray);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
@use '../../constants' as *;
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
@mixin images-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);
|
||||
|
||||
.content {
|
||||
.lightbox {
|
||||
border: 1px solid if($is-dark-theme, $darkgray, $lightgray);
|
||||
background-color: if($is-dark-theme, $deepgray, $lightboxgray);
|
||||
|
||||
img {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@use '../constants' as *;
|
||||
@use '../../constants' as *;
|
||||
|
||||
.content {
|
||||
img {
|
||||
|
|
@ -39,15 +39,12 @@
|
|||
margin-top: 14px;
|
||||
margin-bottom: 14px;
|
||||
border-radius: 1px;
|
||||
background: $white;
|
||||
border: 1px solid $lightgray;
|
||||
padding: 32px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .2);
|
||||
margin: 16px 0;
|
||||
background-color: $lightboxgray;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
|
@ -59,7 +56,6 @@
|
|||
margin: auto;
|
||||
box-shadow: 0 2px 2px rgba(10, 16, 20, 0.24), 0 0 2px rgba(10, 16, 20, 0.12);
|
||||
border-radius: 4px;
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
@mixin label-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);
|
||||
|
||||
.api-header label {
|
||||
color: $white;
|
||||
|
||||
&.api-status-label {
|
||||
background-color: $mediumgray;
|
||||
|
||||
&.deprecated, &.security, &.impure-pipe {
|
||||
background-color: $brightred;
|
||||
}
|
||||
}
|
||||
|
||||
&.api-type-label {
|
||||
background-color: $accentblue;
|
||||
|
||||
@each $name, $symbol in $api-symbols {
|
||||
&.#{$name} {
|
||||
background: map-get($symbol, background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.page-label {
|
||||
background-color: $mist;
|
||||
color: $mediumgray;
|
||||
}
|
||||
|
||||
&.property-type-label {
|
||||
background-color: $darkgray;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,12 +1,11 @@
|
|||
@use '../constants' as *;
|
||||
@use '../mixins' as *;
|
||||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
|
||||
.api-header label {
|
||||
border-radius: 4px;
|
||||
padding: 2px 10px;
|
||||
display: inline;
|
||||
@include font-size(12);
|
||||
color: $white;
|
||||
margin-right: 8px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -16,31 +15,11 @@
|
|||
margin: 4px 0;
|
||||
}
|
||||
|
||||
&.api-status-label {
|
||||
background-color: $mediumgray;
|
||||
|
||||
&.deprecated, &.security, &.impure-pipe {
|
||||
background-color: $brightred;
|
||||
}
|
||||
}
|
||||
|
||||
&.api-type-label {
|
||||
background-color: $accentblue;
|
||||
|
||||
@each $name, $symbol in $api-symbols {
|
||||
&.#{$name} {
|
||||
background: map-get($symbol, background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.page-label {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: $mist;
|
||||
color: $mediumgray;
|
||||
margin-bottom: 8px;
|
||||
width: 140px;
|
||||
|
||||
|
|
@ -51,8 +30,6 @@
|
|||
|
||||
&.property-type-label {
|
||||
@include font-size(12);
|
||||
background-color: $darkgray;
|
||||
color: $white;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
@mixin notification-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);
|
||||
|
||||
aio-notification {
|
||||
background: $darkgray;
|
||||
|
||||
.close-button {
|
||||
background: $darkgray;
|
||||
}
|
||||
|
||||
.content {
|
||||
background: $darkgray;
|
||||
|
||||
.action-button {
|
||||
background: $brightred;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@use '../constants' as *;
|
||||
@use '../mixins' as *;
|
||||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
|
||||
$notificationHeight: 56px;
|
||||
|
||||
|
|
@ -11,7 +11,6 @@ $notificationHeight: 56px;
|
|||
}
|
||||
|
||||
aio-notification {
|
||||
background: $darkgray;
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
|
|
@ -30,12 +29,10 @@ aio-notification {
|
|||
right: 0;
|
||||
width: $notificationHeight;
|
||||
height: $notificationHeight;
|
||||
background: $darkgray;
|
||||
}
|
||||
|
||||
.content {
|
||||
max-width: calc(100% - #{$notificationHeight});
|
||||
background: $darkgray;
|
||||
text-transform: none;
|
||||
padding: 0;
|
||||
|
||||
|
|
@ -57,7 +54,6 @@ aio-notification {
|
|||
}
|
||||
|
||||
.action-button {
|
||||
background: $brightred;
|
||||
border-radius: 15px;
|
||||
text-transform: uppercase;
|
||||
padding: 0 10px;
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
@mixin presskit-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);
|
||||
|
||||
.presskit-container {
|
||||
.presskit-section {
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid $lightgray;
|
||||
}
|
||||
|
||||
.presskit-icon-group {
|
||||
.presskit-icon-item {
|
||||
.presskit-image-container {
|
||||
.transparent-img {
|
||||
background-color: $white;
|
||||
|
||||
&-inverse {
|
||||
background-color: if($is-dark-theme, mat-color($background, background), $deepgray);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@use '../constants' as *;
|
||||
@use '../mixins' as *;
|
||||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
|
||||
.presskit-container {
|
||||
padding: 0 32px 32px 32px;
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
|
||||
.presskit-section {
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid $lightgray;
|
||||
margin-top: 4rem;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
|
@ -42,7 +41,6 @@
|
|||
}
|
||||
|
||||
.transparent-img {
|
||||
background-color: $deepgray;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
@mixin resources-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);
|
||||
|
||||
aio-resource-list {
|
||||
.subcategory-title {
|
||||
background-color: if($is-dark-theme, $deepgray, $mist);
|
||||
}
|
||||
|
||||
.resource-row-link {
|
||||
background-color: if($is-dark-theme, $darkgray, $white);
|
||||
|
||||
&:hover {
|
||||
border-color: if($is-dark-theme, rgba($lightblue, 0.5), rgba($blue, 0.5));
|
||||
box-shadow: 0 8px 8px rgb(1 131 163 / 24%), 0 0 8px rgb(1 67 163 / 12%), 0 6px 18px rgb(43 133 231 / 12%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@use '../constants' as *;
|
||||
@use '../mixins' as *;
|
||||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
|
||||
aio-resource-list {
|
||||
.showcase {
|
||||
|
|
@ -23,7 +23,6 @@ aio-resource-list {
|
|||
.subcategory-title {
|
||||
padding: 16px 23px;
|
||||
margin: 0;
|
||||
background-color: $mist;
|
||||
}
|
||||
|
||||
.resource-row-link {
|
||||
|
|
@ -35,9 +34,7 @@ aio-resource-list {
|
|||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
border-color: rgba($blue, 0.5);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 8px 8px rgba(1, 67, 163, .24), 0 0 8px rgba(1, 67, 163, .12), 0 6px 18px rgba(43, 133, 231, .12);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
@mixin search-results-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);
|
||||
|
||||
aio-search-results {
|
||||
.search-results {
|
||||
background-color: $darkgray;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
|
||||
|
||||
.search-area {
|
||||
.search-section-header {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
ul {
|
||||
.search-result-item {
|
||||
color: $lightgray;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-results {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&.embedded {
|
||||
.search-results {
|
||||
.search-area {
|
||||
.search-section-header {
|
||||
color: $darkgray;
|
||||
}
|
||||
|
||||
.search-result-item {
|
||||
color: lighten($darkgray, 10);
|
||||
|
||||
&:hover {
|
||||
color: $accentblue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-results {
|
||||
color: $darkgray;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@use '../constants' as *;
|
||||
@use '../mixins' as *;
|
||||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
|
||||
aio-search-results {
|
||||
z-index: 10;
|
||||
|
|
@ -17,8 +17,6 @@ aio-search-results {
|
|||
left: 0;
|
||||
right: 0;
|
||||
z-index: 5;
|
||||
background-color: $darkgray;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
|
||||
box-sizing: border-box;
|
||||
|
||||
.search-area {
|
||||
|
|
@ -30,7 +28,6 @@ aio-search-results {
|
|||
font-weight: 400;
|
||||
margin: 10px 0px 5px;
|
||||
text-transform: uppercase;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
ul {
|
||||
|
|
@ -44,7 +41,6 @@ aio-search-results {
|
|||
.search-result-item {
|
||||
@include font-size(14);
|
||||
@include line-height(24);
|
||||
color: $lightgray;
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
padding: 0.6rem 0;
|
||||
|
|
@ -52,10 +48,6 @@ aio-search-results {
|
|||
&a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&.priority-pages {
|
||||
|
|
@ -69,13 +61,11 @@ aio-search-results {
|
|||
}
|
||||
|
||||
.no-results {
|
||||
color: $white;
|
||||
text-align: center;
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
|
@ -92,28 +82,6 @@ aio-search-results {
|
|||
position: relative;
|
||||
background-color: inherit;
|
||||
box-shadow: none;
|
||||
|
||||
.search-area {
|
||||
.search-section-header {
|
||||
color: $darkgray;
|
||||
}
|
||||
|
||||
.search-result-item {
|
||||
color: lighten($darkgray, 10);
|
||||
|
||||
&:hover {
|
||||
color: $accentblue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-results {
|
||||
color: $darkgray;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
@mixin select-menu-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);
|
||||
|
||||
aio-select {
|
||||
.form-select-button {
|
||||
background: if($is-dark-theme, $darkgray, $white);
|
||||
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
|
||||
border: 1px solid if($is-dark-theme, $darkgray, $white);
|
||||
color: if($is-dark-theme, $blue-grey-200, $blue-grey-600);
|
||||
|
||||
&:focus {
|
||||
border: 1px solid $blue-400;
|
||||
box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12);
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: lightgrey;
|
||||
}
|
||||
}
|
||||
|
||||
.form-select-dropdown {
|
||||
background: mat-color($background, background);
|
||||
box-shadow: 0 16px 16px rgba($black, 0.24), 0 0 16px rgba($black, 0.12);
|
||||
|
||||
li {
|
||||
&:hover {
|
||||
background-color: if($is-dark-theme, $darkgray, $blue-grey-50);
|
||||
color: f($is-dark-theme, $blue-grey-400, $blue-grey-500);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: if($is-dark-theme, $darkgray, $blue-grey-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
@use '../constants' as *;
|
||||
@use '../mixins' as *;
|
||||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
|
||||
/* SELECT MENU */
|
||||
|
||||
|
|
@ -9,12 +9,8 @@ aio-select {
|
|||
}
|
||||
|
||||
.form-select-button {
|
||||
background: $white;
|
||||
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
|
||||
box-sizing: border-box;
|
||||
border: 1px solid $white;
|
||||
border-radius: 4px;
|
||||
color: $blue-grey-600;
|
||||
@include font-size(14);
|
||||
font-weight: 400;
|
||||
@include line-height(32);
|
||||
|
|
@ -33,20 +29,12 @@ aio-select {
|
|||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: 1px solid $blue-400;
|
||||
box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12);
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: lightgrey;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.form-select-dropdown {
|
||||
background: $white;
|
||||
box-shadow: 0 16px 16px rgba($black, 0.24), 0 0 16px rgba($black, 0.12);
|
||||
border-radius: 4px;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
|
|
@ -63,7 +51,7 @@ aio-select {
|
|||
margin: 0;
|
||||
padding: 4px 16px 4px 40px;
|
||||
position: relative;
|
||||
transition: all .2s;
|
||||
transition: all 0.2s;
|
||||
border: 1px solid transparent;
|
||||
|
||||
&:first-child {
|
||||
|
|
@ -74,15 +62,6 @@ aio-select {
|
|||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $blue-grey-50;
|
||||
color: $blue-500;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: $blue-grey-100;
|
||||
}
|
||||
|
||||
.symbol {
|
||||
left: 16px;
|
||||
position: absolute;
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
@mixin table-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);
|
||||
|
||||
table {
|
||||
box-shadow: 0 2px 2px rgba($mediumgray, 0.24), 0 0 2px rgba(if($is-dark-theme, $white, $black), 0.12);
|
||||
background-color: if($is-dark-theme, mat-color($background, background), $white);
|
||||
|
||||
thead > {
|
||||
tr > th {
|
||||
background: if($is-dark-theme, $deepgray, rgba($lightgray, 0.2));
|
||||
border-bottom: 1px solid if($is-dark-theme, $darkgray, $lightgray);
|
||||
color: if($is-dark-theme, $white, $darkgray);
|
||||
}
|
||||
}
|
||||
|
||||
tbody > tr > {
|
||||
th,
|
||||
td {
|
||||
border-bottom: 1px solid if($is-dark-theme, $darkgray, $lightgray);
|
||||
}
|
||||
|
||||
td {
|
||||
tr td:first-child {
|
||||
@media (max-width: 480px) {
|
||||
background-color: $lightgray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
background: if($is-dark-theme, $deepgray, rgba($lightgray, 0.2));
|
||||
&:not(:last-child) {
|
||||
border-right: 1px solid if($is-dark-theme, $darkgray, $lightgray);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody > tr {
|
||||
&:last-child td {
|
||||
@media (max-width: 480px) {
|
||||
border-bottom: 1px solid if($is-dark-theme, $deepgray, $lightgray);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +1,9 @@
|
|||
@use '../constants' as *;
|
||||
@use '../mixins' as *;
|
||||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
|
||||
table {
|
||||
margin: 24px 0px;
|
||||
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
|
||||
border-radius: 2px;
|
||||
background: $white;
|
||||
|
||||
&.is-full-width {
|
||||
width: 100%;
|
||||
|
|
@ -25,9 +23,6 @@ table {
|
|||
}
|
||||
|
||||
tr > th {
|
||||
background: rgba($lightgray, 0.2);
|
||||
border-bottom: 1px solid $lightgray;
|
||||
color: $darkgray;
|
||||
@include font-size(12);
|
||||
font-weight: 500;
|
||||
padding: 8px 24px;
|
||||
|
|
@ -40,7 +35,6 @@ table {
|
|||
tbody > tr > {
|
||||
th,
|
||||
td {
|
||||
border-bottom: 1px solid $lightgray;
|
||||
padding: 16px;
|
||||
text-align: left;
|
||||
@include line-height(24);
|
||||
|
|
@ -57,17 +51,9 @@ table {
|
|||
|
||||
td {
|
||||
@include letter-spacing(0.3);
|
||||
|
||||
tr td:first-child {
|
||||
@media (max-width: 480px) {
|
||||
background-color: $lightgray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
background: rgba($lightgray, 0.2);
|
||||
border-right: 1px solid $lightgray;
|
||||
font-weight: 600;
|
||||
max-width: 100px;
|
||||
}
|
||||
|
|
@ -76,10 +62,6 @@ table {
|
|||
tbody > tr {
|
||||
&:last-child td {
|
||||
border: none;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
border-bottom: 1px solid $lightgray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
@mixin toc-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);
|
||||
|
||||
aio-toc {
|
||||
.toc-inner {
|
||||
.toc-heading {
|
||||
&.secondary {
|
||||
&:hover {
|
||||
color: $accentblue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
&.toc-heading,
|
||||
&.toc-more-items {
|
||||
&.embedded:focus {
|
||||
background: if($is-dark-theme, $darkgray, $lightgray);
|
||||
color: if($is-dark-theme, $white, $mediumgray);
|
||||
}
|
||||
}
|
||||
|
||||
&.toc-heading {
|
||||
&:hover:not(.embedded) {
|
||||
color: $accentblue;
|
||||
}
|
||||
}
|
||||
|
||||
&.toc-more-items {
|
||||
color: $mediumgray;
|
||||
|
||||
&:hover {
|
||||
color: $accentblue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.toc-list {
|
||||
li {
|
||||
&.h1:after {
|
||||
background: if($is-dark-theme, $mediumgray, $lightgray);
|
||||
}
|
||||
|
||||
a {
|
||||
color: if($is-dark-theme, $white, lighten($darkgray, 10));
|
||||
}
|
||||
|
||||
&:hover {
|
||||
* {
|
||||
color: if($is-dark-theme, $lightblue, $accentblue);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
* {
|
||||
color: if($is-dark-theme, $cyan, $blue);
|
||||
}
|
||||
|
||||
a:before {
|
||||
background: if($is-dark-theme, $cyan, $blue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.embedded) li {
|
||||
&:before {
|
||||
border-left-color: if($is-dark-theme, $darkgray, $lightgray);
|
||||
}
|
||||
|
||||
&:not(.active):hover {
|
||||
a:before {
|
||||
background: $lightgray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.embedded {
|
||||
.toc-inner {
|
||||
.toc-heading {
|
||||
&.secondary {
|
||||
color: mat-color($foreground, text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +1,14 @@
|
|||
@use '../constants' as *;
|
||||
@use '../mixins' as *;
|
||||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
|
||||
$tocItemLineHeight: 24;
|
||||
$tocItemTopPadding: 9;
|
||||
$tocMarkerRailSize: 1;
|
||||
$tocMarkerSize: 6;
|
||||
$tocMarkerRailSize: 1;
|
||||
|
||||
@mixin tocMarker($color) {
|
||||
background: $color;
|
||||
@mixin tocMarker() {
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
content: "";
|
||||
height: #{$tocMarkerSize}px;
|
||||
left: -#{($tocMarkerSize - $tocMarkerRailSize) / 2}px;
|
||||
position: absolute;
|
||||
|
|
@ -47,10 +46,6 @@ aio-toc {
|
|||
&.secondary {
|
||||
position: relative;
|
||||
top: -8px;
|
||||
|
||||
&:hover {
|
||||
color: $accentblue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -68,7 +63,6 @@ aio-toc {
|
|||
|
||||
&.embedded:focus {
|
||||
outline: none;
|
||||
background: $lightgray;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -80,27 +74,18 @@ aio-toc {
|
|||
left: -4px;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
&:hover:not(.embedded) {
|
||||
color: $accentblue;
|
||||
}
|
||||
}
|
||||
|
||||
&.toc-more-items {
|
||||
color: $mediumgray;
|
||||
top: 10px;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
color: $accentblue;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: 'expand_less';
|
||||
content: "expand_less";
|
||||
}
|
||||
|
||||
&.collapsed::after {
|
||||
content: 'more_horiz';
|
||||
content: "more_horiz";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -132,12 +117,11 @@ aio-toc {
|
|||
transition: all 0.3s ease-in-out;
|
||||
|
||||
&.h1:after {
|
||||
content: '';
|
||||
content: "";
|
||||
display: block;
|
||||
height: 1px;
|
||||
width: 40%;
|
||||
margin: 7px 0 4px 0;
|
||||
background: $lightgray;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
|
@ -146,39 +130,32 @@ aio-toc {
|
|||
}
|
||||
|
||||
a {
|
||||
color: lighten($darkgray, 10);
|
||||
overflow: visible;
|
||||
@include font-size(14);
|
||||
line-height: inherit;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
* {
|
||||
color: $accentblue;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
* {
|
||||
color: $blue;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
a:before {
|
||||
@include tocMarker($blue);
|
||||
@include tocMarker();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.embedded) li {
|
||||
&:before {
|
||||
border-left: #{$tocMarkerRailSize}px solid $lightgray;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
content: "";
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
border-left-width: #{$tocMarkerRailSize}px;
|
||||
border-left-style: solid;
|
||||
}
|
||||
|
||||
&:first-child:before {
|
||||
|
|
@ -193,7 +170,7 @@ aio-toc {
|
|||
|
||||
&:not(.active):hover {
|
||||
a:before {
|
||||
@include tocMarker($lightgray);
|
||||
@include tocMarker();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
@use '0-base/typography-theme' as *;
|
||||
@use '1-layouts' as *;
|
||||
@use '1-layouts/theme' as *;
|
||||
@use '2-modules/theme' as *;
|
||||
|
||||
@mixin app-theme($theme) {
|
||||
@include typography-theme($theme);
|
||||
@include layout-theme($theme);
|
||||
@include layout-themes($theme);
|
||||
@include module-themes($theme);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
@use './constants' as *;
|
||||
|
||||
@media print {
|
||||
|
||||
// General Adjustments
|
||||
* {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
body, mat-sidenav-container {
|
||||
body,
|
||||
mat-sidenav-container {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
|
|
@ -16,11 +16,24 @@
|
|||
color: $darkgray !important;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
ul, ol, img, code-example, table, tr, .alert, .feature, .lightbox {
|
||||
ul,
|
||||
ol,
|
||||
img,
|
||||
code-example,
|
||||
table,
|
||||
tr,
|
||||
.alert,
|
||||
.feature,
|
||||
.lightbox {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
|
|
@ -36,7 +49,9 @@
|
|||
widows: 4;
|
||||
}
|
||||
|
||||
p > code, li > code, table code {
|
||||
p > code,
|
||||
li > code,
|
||||
table code {
|
||||
color: $blue !important;
|
||||
}
|
||||
|
||||
|
|
@ -75,7 +90,20 @@
|
|||
&[language=sh], &[language=bash] {
|
||||
background: none;
|
||||
|
||||
.pnk, .blk, .pln, .otl, .kwd, .typ, .tag, .str, .atv, .atn, .com, .lit, .pun, .dec {
|
||||
.pnk,
|
||||
.blk,
|
||||
.pln,
|
||||
.otl,
|
||||
.kwd,
|
||||
.typ,
|
||||
.tag,
|
||||
.str,
|
||||
.atv,
|
||||
.atn,
|
||||
.com,
|
||||
.lit,
|
||||
.pun,
|
||||
.dec {
|
||||
color: $darkgray;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
@use '../app-theme' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
|
||||
|
||||
$ng-io-primary: mat-palette($mat-blue, 700, 600, 800);
|
||||
$ng-io-accent: mat-palette($mat-red, 700, 600, 800);
|
||||
$ng-io-warn: mat-palette($mat-red);
|
||||
$ng-io-theme: mat-light-theme($ng-io-primary, $ng-io-accent, $ng-io-warn);
|
||||
|
||||
@include angular-material-theme($ng-io-theme);
|
||||
@include app-theme($ng-io-theme);
|
||||
// We don't have to call theme mixins here because light.scss is used by default in ng-io-theme.scss
|
||||
|
|
|
|||
|
|
@ -6,20 +6,5 @@
|
|||
// have to load a single css file for Angular Material in your app.
|
||||
@include mat-core();
|
||||
|
||||
// Define the palettes for your theme using the Material Design palettes available in palette.scss
|
||||
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
|
||||
// hue.
|
||||
$ng-io-primary: mat-palette($mat-blue, 700, 600, 800);
|
||||
$ng-io-accent: mat-palette($mat-red, 700, 600, 800);
|
||||
|
||||
// The warn palette is optional (defaults to red).
|
||||
$ng-io-warn: mat-palette($mat-red);
|
||||
|
||||
// Create the theme object (a Sass map containing all of the palettes).
|
||||
$ng-io-theme: mat-light-theme($ng-io-primary, $ng-io-accent, $ng-io-warn);
|
||||
|
||||
// Include theme styles for core and each component used in your app.
|
||||
// Alternatively, you can import and @include the theme mixins for each component
|
||||
// that you are using.
|
||||
@include angular-material-theme($ng-io-theme);
|
||||
@include app-theme($ng-io-theme);
|
||||
@include angular-material-theme(light.$ng-io-theme);
|
||||
@include app-theme(light.$ng-io-theme);
|
||||
|
|
|
|||
Loading…
Reference in New Issue