feat(aio): marketing design refresh
- Add styling for active TOC item - Add sidenav styles - Change header tags to divs from index marketing page to remove anchors - Fix use of card mixin and create separate card-docs class - Add marketing styling - Topnav styling when on home landing page - Remove hamburger menu on home page - Add fully rounded border to top nav toolbar search input - Add mobile styles - Add title banner to other marketing pages
This commit is contained in:
Stefanie Fluin
committed by
Pete Bacon Darwin
Pete Bacon Darwin
parent
0018acfede
commit
b8b91d3418
@ -1,168 +1,161 @@
|
||||
// @mixin docs-site-typography() {
|
||||
// .docs-component-viewer-tabbed-content .docs-component-view-text-content,
|
||||
// .docs-guide-content {
|
||||
body {
|
||||
font-family: $main-font;
|
||||
margin: 0;
|
||||
color: $darkgray;
|
||||
font-size: 14px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $main-font;
|
||||
margin: 0;
|
||||
color: $darkgray;
|
||||
font-size: 14px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
h1 {
|
||||
display:inline-block;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
margin: 8px 0px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
display:inline-block;
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
margin: 8px 0px;
|
||||
}
|
||||
h1:after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 1px;
|
||||
width: 40%;
|
||||
margin: 24px 0px 10px;
|
||||
background: $lightgray;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
h1:after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 1px;
|
||||
width: 40%;
|
||||
margin: 24px 0px 10px;
|
||||
background: $lightgray;
|
||||
clear: both;
|
||||
}
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
margin: 32px 0px 24px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
margin: 32px 0px 24px;
|
||||
clear: both;
|
||||
}
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
margin: 24px 0px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
margin: 24px 0px;
|
||||
clear: both;
|
||||
}
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
margin: 8px 0px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
margin: 8px 0px;
|
||||
clear: both;
|
||||
}
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin: 8px 0px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin: 8px 0px;
|
||||
clear: both;
|
||||
}
|
||||
h6 {
|
||||
color: $mediumgray;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin: 8px 0px;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: $mediumgray;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin: 8px 0px;
|
||||
clear: both;
|
||||
}
|
||||
h1 {
|
||||
@media screen and (max-width: 600px) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
@media screen and (max-width: 600px) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
h1:after, h2, h3, h4, h5, h6 {
|
||||
@media screen and (max-width: 600px) {
|
||||
margin: 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1:after, h2, h3, h4, h5, h6 {
|
||||
@media screen and (max-width: 600px) {
|
||||
margin: 8px 0;
|
||||
}
|
||||
}
|
||||
.mat-tab-body-wrapper h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.mat-tab-body-wrapper h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
p, ol, ul, ol, li, input, a {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0.30px;
|
||||
font-weight: 400;
|
||||
& > em {
|
||||
letter-spacing: 0.30px;
|
||||
}
|
||||
}
|
||||
|
||||
p, ol, ul, ol, li, input, a {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0.30px;
|
||||
font-weight: 400;
|
||||
& > em {
|
||||
letter-spacing: 0.30px;
|
||||
}
|
||||
}
|
||||
ol li {
|
||||
margin: 14px 0px;
|
||||
}
|
||||
|
||||
ol li {
|
||||
margin: 14px 0px;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.mat-toolbar-row a {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: white;
|
||||
font-family: $main-font;
|
||||
text-transform: uppercase;
|
||||
padding: 21px 0;
|
||||
}
|
||||
|
||||
.mat-toolbar-row a {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
color: white;
|
||||
font-family: $main-font;
|
||||
text-transform: uppercase;
|
||||
padding: 21px 0;
|
||||
}
|
||||
strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-radius: 2px;
|
||||
border-spacing: 0;
|
||||
margin: 0 0 32px 0;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-radius: 2px;
|
||||
border-spacing: 0;
|
||||
margin: 0 0 32px 0;
|
||||
}
|
||||
table tbody th {
|
||||
max-width: 100px;
|
||||
padding: 13px 32px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table tbody th {
|
||||
max-width: 100px;
|
||||
padding: 13px 32px;
|
||||
text-align: left;
|
||||
}
|
||||
td {
|
||||
font-weight: 400;
|
||||
padding: 8px 30px;
|
||||
letter-spacing: 0.30px;
|
||||
|
||||
td {
|
||||
font-weight: 400;
|
||||
padding: 8px 30px;
|
||||
letter-spacing: 0.30px;
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
th {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
padding: 13px 32px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
padding: 13px 32px;
|
||||
text-align: left;
|
||||
}
|
||||
p > code, li > code, table code {
|
||||
font-family: $code-font;
|
||||
font-size: 85%;
|
||||
color: $darkgray;
|
||||
letter-spacing: 0;
|
||||
line-height: 1;
|
||||
padding: 2px 6px;
|
||||
background-color: $backgroundgray;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
p > code, li > code, table code {
|
||||
font-family: $code-font;
|
||||
font-size: 85%;
|
||||
color: $darkgray;
|
||||
letter-spacing: 0;
|
||||
line-height: 1;
|
||||
padding: 2px 6px;
|
||||
background-color: $backgroundgray;
|
||||
border-radius: 4px;
|
||||
}
|
||||
code {
|
||||
font-family: $code-font;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: $code-font;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.sidenav-content a {
|
||||
color: $blue;
|
||||
&:hover {
|
||||
color: $mediumgray;
|
||||
}
|
||||
}
|
||||
|
||||
// }
|
||||
// }
|
||||
.sidenav-content a {
|
||||
color: $blue;
|
||||
&:hover {
|
||||
color: $mediumgray;
|
||||
}
|
||||
}
|
||||
@ -1,16 +1,13 @@
|
||||
.progress-bar-container {
|
||||
height: 2px;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
top: 64px;
|
||||
width: 100vw;
|
||||
z-index: 5;
|
||||
aio-shell.page-docs {
|
||||
.sidenav-content {
|
||||
// padding: 6rem 3rem 3rem 3rem; // THIS CAUSES THE TOP NAV TOOLBAR TO JUMP BETWEEN DOCS AND OTHER PAGES
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.sidenav-content {
|
||||
padding: 1rem 3rem 3rem;
|
||||
margin: auto;
|
||||
min-height: 100vh;
|
||||
padding: 6rem 3rem 1rem;
|
||||
}
|
||||
|
||||
.fill-remaining-space {
|
||||
@ -22,14 +19,9 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.progress-bar-container {
|
||||
top: 56px;
|
||||
}
|
||||
|
||||
.sidenav-content {
|
||||
min-height: 450px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sidenav-container {
|
||||
|
||||
@ -48,4 +48,8 @@ l-relative {
|
||||
position: absolute !important;
|
||||
top: -9999px !important;
|
||||
left: -9999px !important;
|
||||
}
|
||||
|
||||
.text-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@ -2,12 +2,12 @@
|
||||
LAYOUT STYLES
|
||||
============================== */
|
||||
|
||||
@import 'sidenav';
|
||||
@import 'api-page';
|
||||
@import 'content-layout';
|
||||
@import 'top-menu';
|
||||
@import 'marketing-layout';
|
||||
@import 'footer';
|
||||
@import 'layout-global';
|
||||
@import 'marketing-layout';
|
||||
@import 'not-found';
|
||||
@import 'api-page';
|
||||
@import 'sidenav';
|
||||
@import 'table-of-contents';
|
||||
@import 'top-menu';
|
||||
|
||||
@ -1,9 +1,330 @@
|
||||
#home {
|
||||
padding: 0rem 0rem 3rem;
|
||||
.hero {
|
||||
width: 100%;
|
||||
min-height: 480px;
|
||||
height: 80vh;
|
||||
max-height: 560px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 48px 48px 32px 48px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
transform: skewY(8deg);
|
||||
transform-origin: 100%;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
@media (max-width: 480px) {
|
||||
padding-top: 40px;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
h1:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
display: inline-block;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
line-height: 48px;
|
||||
margin: 0 $unit 0 0;
|
||||
text-transform: uppercase;
|
||||
|
||||
&.is-standard-case {
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section#intro {
|
||||
display: flex;
|
||||
width: 900px;
|
||||
height: 480px;
|
||||
margin: 0 auto;
|
||||
padding: 48px 0 0;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
color: white;
|
||||
|
||||
@media (max-width: 780px) {
|
||||
flex-direction: column;
|
||||
max-width: 100vw;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
padding: 64px 0 32px;
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.homepage-container {
|
||||
margin-top: -7%;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
max-width: 1040px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
|
||||
@media (max-width: 780px) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-headline {
|
||||
font-size: 40px;
|
||||
line-height: 64px;
|
||||
font-weight: 500;
|
||||
margin: 32px 0;
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 780px) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-logo {
|
||||
width: 400px;
|
||||
display: flex;
|
||||
|
||||
@media (max-width: 780px) {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
img {
|
||||
filter: drop-shadow(0 2px 2px rgba($black, 0.24));
|
||||
margin-bottom: 8px;
|
||||
padding: 0;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
|
||||
@media (max-width: 780px) {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.announcement-bar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
padding: 16px;
|
||||
margin: 0 auto;
|
||||
max-width: 50vw;
|
||||
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;
|
||||
align-items: center;
|
||||
transition: all 0.3s ease-in;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
min-width: 100%;
|
||||
padding: 32px 16px;
|
||||
}
|
||||
|
||||
button {
|
||||
min-width: 160px;
|
||||
background-color: $blue;
|
||||
border-radius: 48px;
|
||||
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
.material-icons {
|
||||
display: inline-block;
|
||||
color: $white;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
right: 0;
|
||||
position: static;
|
||||
display: none;
|
||||
transition: all 0.3s ease-in;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
margin: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// ANGULAR LINE
|
||||
.background-sky {
|
||||
background-color: $blue;
|
||||
background: $bluegradient;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.home-row .card {
|
||||
@include card(70%, auto);
|
||||
min-width: 350px;
|
||||
width: 70%;
|
||||
height: auto;
|
||||
padding: 24px;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
box-shadow: 0 6px 6px rgba(10, 16, 20, 0.15), 0 0 52px rgba(10, 16, 20, 0.12);
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
margin: 16px auto 0;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: none;
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1300px) {
|
||||
img {
|
||||
max-width: none;
|
||||
height: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
margin: 16px ;
|
||||
}
|
||||
|
||||
.card-text-container {
|
||||
margin: 0 16px;
|
||||
|
||||
p {
|
||||
text-align: left;
|
||||
padding: 8px 0;
|
||||
color: $darkgray;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
h2 {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button.hero-cta {
|
||||
border-radius: 48px;
|
||||
display: block;
|
||||
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
aio-shell {
|
||||
&.page-resources, &.page-events {
|
||||
section {
|
||||
padding: 0rem 0rem 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.page-home {
|
||||
section {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.page-home, &.page-resources, &.page-events {
|
||||
article {
|
||||
padding: 0 30px;
|
||||
padding: 32px;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
padding: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.page-home, &.page-resources, &.page-events, &.page-features {
|
||||
|
||||
.content img {
|
||||
@media (max-width: 1300px) {
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
md-sidenav-container.sidenav-container {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
md-toolbar {
|
||||
padding-left: 24px;
|
||||
|
||||
button.hamburger {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cta-bar .hero-cta {
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
|
||||
.text-headline {
|
||||
font-size: 20px;
|
||||
margin-top: 10px;
|
||||
text-transform: uppercase;
|
||||
color: $blue;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.feature-section {
|
||||
.feature-header {
|
||||
text-align: center;
|
||||
|
||||
.text-headline {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -16,6 +337,7 @@ aio-shell:not(.view-SideNav) {
|
||||
|
||||
div[layout=row]{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
|
||||
@ -29,81 +351,50 @@ div[layout=row]{
|
||||
}
|
||||
|
||||
.home-rows {
|
||||
margin-top: 112px;
|
||||
overflow: hidden;
|
||||
@media (max-width: 600px) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.home-row .promo-image-container, .home-row .text-container {
|
||||
.home-row .promo-img-container, .home-row .text-container {
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.background-superhero-paper {
|
||||
background: url('assets/images/backgrounds/super-hero-large.png') no-repeat bottom center , $bluegradient;
|
||||
background-blend-mode: multiply;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.background-sky {
|
||||
background-color: $blue;
|
||||
background: $bluegradient;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
header.bckground-sky.l-relative {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.home-rows {
|
||||
// NOTE (ericjim): if a banner is placed on the homescreen, add this margin.
|
||||
margin-top: 112px;
|
||||
}
|
||||
|
||||
.home-row {
|
||||
max-width: 920px;
|
||||
margin: 0 0 60px 0;
|
||||
margin: 32px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
h3.text-headline {
|
||||
font-size: 28px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
// NOTE (ericjim): remove if graphic changes.
|
||||
.promo-3 {
|
||||
margin-top: 15px;
|
||||
|
||||
@media(max-width: 599px) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// -- Utility margins for promos
|
||||
.promo-1-desc, .promo-3-desc {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
// -- Reset margins for the utility margins
|
||||
@media(max-width: 599px) {
|
||||
.promo-1, .promo-2, .promo-3, .promo-4 {
|
||||
margin: 0;
|
||||
}
|
||||
.text-headline, .promo-img-container {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.text-block {
|
||||
padding-right: 15%;
|
||||
|
||||
@media(max-width: 599px) {
|
||||
@media(max-width: 600px) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 599px) {
|
||||
.promo-image-container, .text-container {
|
||||
@media(max-width: 600px) {
|
||||
.promo-img-container, .text-container {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@ -134,6 +425,29 @@ header.bckground-sky.l-relative {
|
||||
}
|
||||
}
|
||||
|
||||
.text-uppercase {
|
||||
text-transform: uppercase;
|
||||
.marketing-banner {
|
||||
background-color: lighten($blue, 10);
|
||||
margin-top: 64px;
|
||||
padding: 32px;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
margin-top: 56px;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.banner-headline {
|
||||
text-transform: uppercase;
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
color: white;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -8,6 +8,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
aio-nav-menu {
|
||||
display: block;
|
||||
padding: 16px 0 0;
|
||||
margin: 0 auto;
|
||||
font-size: 13px;
|
||||
ul, a {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
aio-nav-item div a {
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
md-sidenav.mat-sidenav.sidenav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
@ -28,14 +43,10 @@ md-sidenav-container.sidenav-container {
|
||||
max-width: 82%;
|
||||
margin: 0;
|
||||
transform: none;
|
||||
padding-top: 64px;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
max-width: 100%;
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
padding-top: 56px;
|
||||
}
|
||||
}
|
||||
|
||||
md-sidenav-container div.mat-sidenav-content {
|
||||
@ -60,13 +71,11 @@ md-sidenav-container div.mat-sidenav-content {
|
||||
width: 100%;
|
||||
word-wrap: break-word;
|
||||
outline: none;
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: $lightgray;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: $darkgray;
|
||||
text-shadow: 0 0 5px #ffffff;
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
//icons _within_ nav
|
||||
@ -80,10 +89,6 @@ md-sidenav-container div.mat-sidenav-content {
|
||||
|
||||
.vertical-menu-item.selected {
|
||||
color: $blue;
|
||||
|
||||
&:focus {
|
||||
color: $blue-900;
|
||||
}
|
||||
}
|
||||
|
||||
button.vertical-menu-item {
|
||||
@ -122,12 +127,6 @@ button.vertical-menu-item {
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
|
||||
a.selected.level-1,
|
||||
.heading.selected.level-1,
|
||||
.heading-children.selected.level-1 {
|
||||
border-left: 3px $blue solid;
|
||||
}
|
||||
|
||||
.level-1 {
|
||||
font-family: $main-font;
|
||||
font-size: 14px;
|
||||
@ -141,7 +140,7 @@ a.selected.level-1,
|
||||
font-size: 14px;
|
||||
color: $mediumgray;
|
||||
font-weight: 400;
|
||||
padding-left: 20px;
|
||||
padding-left: 24px;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
@ -149,6 +148,7 @@ a.selected.level-1,
|
||||
font-family: $main-font;
|
||||
font-size: 14px;
|
||||
color: $mediumgray;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.level-1.expanded .mat-icon, .level-2.expanded .mat-icon {
|
||||
@ -168,19 +168,20 @@ a.selected.level-1,
|
||||
}
|
||||
|
||||
aio-nav-menu.top-menu {
|
||||
aio-nav-item:first-child .vertical-menu-item {
|
||||
padding-top: 48px;
|
||||
}
|
||||
padding: 24px 0 0;
|
||||
|
||||
aio-nav-item:last-child div {
|
||||
border-bottom: 2px solid rgba($mediumgray, 0.5);
|
||||
border-bottom: 1px solid rgba($mediumgray, 0.5);
|
||||
}
|
||||
|
||||
aio-nav-item:first-child div {
|
||||
border-top: 1px solid rgba($mediumgray, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
// Angular Version Selector
|
||||
md-sidenav .doc-version {
|
||||
padding: 10px;
|
||||
padding: 8px;
|
||||
border-top: 1px solid $lightgray;
|
||||
|
||||
select {
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
.fill-remaining-space {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
@ -52,13 +51,12 @@ aio-top-menu {
|
||||
margin: 0px;
|
||||
|
||||
li {
|
||||
padding-bottom: 2px;
|
||||
list-style-type: none;
|
||||
line-height: 64px;
|
||||
height: 64px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: $accentblue;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
@ -69,14 +67,29 @@ aio-top-menu {
|
||||
}
|
||||
}
|
||||
|
||||
aio-shell.page-home md-toolbar.app-toolbar.mat-toolbar {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
md-toolbar.mat-toolbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
perspective: 2000px;
|
||||
top: 0px;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.30);
|
||||
padding: 0 16px 0 0;
|
||||
|
||||
.mat-toolbar-row {
|
||||
@media (max-width: 600px) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
aio-shell.sidenav-open {
|
||||
md-toolbar.mat-toolbar md-icon {
|
||||
color: $mediumgray;
|
||||
}
|
||||
}
|
||||
|
||||
.search-container {
|
||||
@ -91,13 +104,20 @@ md-toolbar.mat-toolbar {
|
||||
aio-search-box input {
|
||||
color: $darkgray;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
border-radius: 100px;
|
||||
background-color: $offwhite;
|
||||
padding: 5px 10px;
|
||||
padding: 5px 16px;
|
||||
margin-left: 8px;
|
||||
width: 200px;
|
||||
width: 150px;
|
||||
height: 40%;
|
||||
|
||||
@include bp(big) {
|
||||
transition: width 0.4s ease-in-out;
|
||||
&:focus {
|
||||
width: 50%;
|
||||
max-width: 240px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
@ -1,180 +0,0 @@
|
||||
/* Announcment Bar Module */
|
||||
/* A module displaying time senstive announcemnts */
|
||||
|
||||
|
||||
/* VARIABLES */
|
||||
|
||||
$announcement-bar: '.announcement-bar';
|
||||
$announcement-bar-height: 104px;
|
||||
$announcement-bar-width: 784px;
|
||||
|
||||
/* CLASS */
|
||||
|
||||
#{$announcement-bar} {
|
||||
height: 104px;
|
||||
width: $announcement-bar-width;
|
||||
position: absolute;
|
||||
margin-left: auto;
|
||||
top: 500px;
|
||||
color: $darkgray;
|
||||
background: $white;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 4px 4px rgba(0,0,0,0.24), 0 0 4px rgba(0,0,0,0.12);
|
||||
|
||||
@media (max-width: $announcement-bar-width) {
|
||||
height: auto;
|
||||
margin: 0;
|
||||
position: static;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// SLIDES CONTAINER
|
||||
#{$announcement-bar}-slides {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: $darkgray;
|
||||
background: $white;
|
||||
height: $announcement-bar-height;
|
||||
width: $announcement-bar-width;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 4px 4px rgba($black, 0.24), 0 0 4px rgba($black, 0.12);
|
||||
|
||||
@media (max-width: 480px) {
|
||||
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
|
||||
height: 240px;
|
||||
margin: 0;
|
||||
padding: 32px 48px;
|
||||
text-align: center;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// INDIVIDUAL SLIDE
|
||||
#{$announcement-bar}-slide {
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
height: $announcement-bar-height;
|
||||
left: 0;
|
||||
margin-bottom: -$announcement-bar-height;
|
||||
opacity: 0;
|
||||
padding: 32px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
transition: all .8s;
|
||||
width: $announcement-bar-width;
|
||||
z-index: 1;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding:0;
|
||||
width: auto;
|
||||
transition: opacity .8s;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
img, p {
|
||||
float: left;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
display: block;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
height: 40px;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
line-height: 40px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
line-height: 24px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.button,
|
||||
.button.md-button {
|
||||
margin: 0;
|
||||
padding: 0 40px;
|
||||
background: $mediumgray;
|
||||
color: $white;
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
line-height: 40px;
|
||||
transition: all .3s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background: $blue;
|
||||
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
@media (max-width: $announcement-bar-width) {
|
||||
float: none;
|
||||
margin: 16px auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-visible {
|
||||
margin-bottom: 0;
|
||||
opacity: 1;
|
||||
z-index: 2;
|
||||
|
||||
@media (max-width: $announcement-bar-width) {
|
||||
position: static;
|
||||
visibility: visible;
|
||||
justify-content: center;
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
padding: 8px;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
padding: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// NAV BAR
|
||||
#{$announcement-bar} nav {
|
||||
bottom: -40px;
|
||||
color: $lightgray;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
|
||||
button {
|
||||
background: $lightgray;
|
||||
border: none;
|
||||
border-radius: 100px;
|
||||
height: 12px;
|
||||
margin: 0 4px;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
text-indent: -3000px;
|
||||
width: 12px;
|
||||
|
||||
&.is-selected,
|
||||
&.selected {
|
||||
background: $lightgray;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -103,4 +103,8 @@ a.filter-button {
|
||||
background-color: $blue;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
[md-button], [md-raised-button], [mat-button], [mat-raised-button] {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@ -5,7 +5,7 @@
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
.docs-card {
|
||||
@include card(194px, 30%);
|
||||
max-width: 340px;
|
||||
min-width: 262px;
|
||||
|
||||
@ -1,113 +0,0 @@
|
||||
/*
|
||||
* Hero Module
|
||||
*
|
||||
* A hero banner located at the top of each page that displays the
|
||||
* title of the page and sometimes a decorative background.
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
* Class
|
||||
*/
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
padding: 48px 48px 32px 48px;
|
||||
position: relative;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
height: auto;
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
h1:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
display: inline-block;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
float: left;
|
||||
line-height: 48px;
|
||||
margin: 0 $unit 0 0;
|
||||
text-transform: uppercase;
|
||||
|
||||
&.is-standard-case {
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: $unit * 3;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
// CTA BUTTONS
|
||||
.button {
|
||||
margin: 0px $unit;
|
||||
|
||||
// @include respond-to('mobile') {
|
||||
// margin: 16px 0;
|
||||
// display: block;
|
||||
// }
|
||||
}
|
||||
|
||||
button {
|
||||
// Override md-button from angular material to align language select with hero title.
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Large Banner
|
||||
*/
|
||||
|
||||
&.is-large {
|
||||
padding-top: 32px;
|
||||
text-align: center;
|
||||
|
||||
// @include respond-to('mobile') {
|
||||
// height: auto;
|
||||
// }
|
||||
|
||||
// LARGE SHEILD LOGO
|
||||
.hero-logo {
|
||||
filter: drop-shadow(0 2px 2px rgba($black, 0.24));
|
||||
margin-bottom: 8px;
|
||||
opacity: 1;
|
||||
padding: 0;
|
||||
width: 240px;
|
||||
|
||||
// @include respond-to('mobile') {
|
||||
// width: 192px;
|
||||
// }
|
||||
}
|
||||
|
||||
.hero-cta,
|
||||
.hero-cta.md-button {
|
||||
background: rgba($white, .87);
|
||||
border-radius: 2px;
|
||||
color: $blue;
|
||||
font-weight: 500;
|
||||
padding: 0 64px;
|
||||
margin: 40px 0;
|
||||
transition: all .3s;
|
||||
|
||||
&:hover {
|
||||
background: $white;
|
||||
box-shadow: 0 8px 8px rgba($black, 0.24), 0 0 8px rgba($black, 0.12);
|
||||
color: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -2,28 +2,27 @@
|
||||
MODULE STYLES
|
||||
============================== */
|
||||
|
||||
@import 'hamburger';
|
||||
@import 'features';
|
||||
@import 'alert';
|
||||
@import 'api-info-bar';
|
||||
@import 'api-list';
|
||||
@import 'banner';
|
||||
@import 'buttons';
|
||||
@import 'callout';
|
||||
@import 'card';
|
||||
@import 'code';
|
||||
@import 'contributor';
|
||||
@import 'alert';
|
||||
@import 'edit-page-cta';
|
||||
@import 'features';
|
||||
@import 'filetree';
|
||||
@import 'hamburger';
|
||||
@import 'heading-anchors';
|
||||
@import 'hr';
|
||||
@import 'images';
|
||||
@import 'progress-bar';
|
||||
@import 'table';
|
||||
@import 'presskit';
|
||||
@import 'card';
|
||||
@import 'subsection';
|
||||
@import 'buttons';
|
||||
@import 'hero';
|
||||
@import 'announcement-bar';
|
||||
@import 'banner';
|
||||
@import 'search-results';
|
||||
@import 'api-list';
|
||||
@import 'hr';
|
||||
@import 'scrollbar';
|
||||
@import 'callout';
|
||||
@import 'resources';
|
||||
@import 'edit-page-cta';
|
||||
@import 'heading-anchors';
|
||||
@import 'api-info-bar';
|
||||
@import 'scrollbar';
|
||||
@import 'search-results';
|
||||
@import 'subsection';
|
||||
@import 'toc';
|
||||
|
||||
12
aio/src/styles/2-modules/_progress-bar.scss
Normal file
12
aio/src/styles/2-modules/_progress-bar.scss
Normal file
@ -0,0 +1,12 @@
|
||||
.progress-bar-container {
|
||||
height: 2px;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
top: 64px;
|
||||
width: 100vw;
|
||||
z-index: 5;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
top: 56px;
|
||||
}
|
||||
}
|
||||
@ -55,10 +55,6 @@ table {
|
||||
td {
|
||||
letter-spacing: 0.30px;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
tr td:first-child {
|
||||
@media (max-width: 480px) {
|
||||
background-color: $lightgray;
|
||||
@ -72,10 +68,6 @@ table {
|
||||
border-right: 1px solid $lightgray;
|
||||
font-weight: 600;
|
||||
max-width: 100px;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
@ -84,7 +76,6 @@ table {
|
||||
@media (max-width: 480px) {
|
||||
border-bottom: 1px solid $lightgray;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,6 +8,11 @@
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.toc-content {
|
||||
border-left: 1px solid $lightgray;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
aio-toc {
|
||||
&.embedded {
|
||||
@media (min-width: 801px) {
|
||||
@ -17,14 +22,23 @@ aio-toc {
|
||||
}
|
||||
|
||||
.toc-inner {
|
||||
border-left: 4px solid #4285f4;
|
||||
|
||||
&:not(.embedded) {
|
||||
@media (max-width: 800px) {
|
||||
border-left: 4px solid #4285f4;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
aio-toc > div {
|
||||
font-size: 13px;
|
||||
overflow-y: visible;
|
||||
padding: 4px 0 0 10px;
|
||||
|
||||
.toc-heading p {
|
||||
.toc-heading {
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
margin: 0 0 16px 8px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@ -107,7 +121,7 @@ aio-toc {
|
||||
ul.toc-list {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding: 0 8px;
|
||||
|
||||
@media (max-width: 800px) {
|
||||
width: auto;
|
||||
@ -119,42 +133,77 @@ aio-toc {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
margin: 6px 0;
|
||||
padding: 0;
|
||||
// padding: 0 16px;
|
||||
position: relative;
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
&.active {
|
||||
a {
|
||||
color: $blue;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
border-radius: 50%;
|
||||
left: -16px;
|
||||
top: 10px;
|
||||
background: $blue;
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&.h3 {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&:last-child a:before {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: inherit;
|
||||
color: lighten($darkgray, 10);
|
||||
display:table-cell;
|
||||
overflow: visible;
|
||||
font-size: 12px;
|
||||
display: table-cell;
|
||||
|
||||
|
||||
&:hover {
|
||||
color: $accentblue;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
a {
|
||||
color: $accentblue;
|
||||
&.h2 {
|
||||
&:before {
|
||||
content: '';
|
||||
left: -1px;
|
||||
top: 10px;
|
||||
background: red;
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 1px;
|
||||
height: calc(100% + 11px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul.toc-list li.h3 {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
ul.toc-list li.h1:after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 1px;
|
||||
width: 40%;
|
||||
margin: 24px 0px 10px;
|
||||
background: #DBDBDB;
|
||||
clear: both;
|
||||
}
|
||||
// ul.toc-list li.h3 {
|
||||
// margin-left: 15px;
|
||||
// }
|
||||
|
||||
// ul.toc-list li.h1:after {
|
||||
// content: "";
|
||||
// display: block;
|
||||
// height: 1px;
|
||||
// width: 40%;
|
||||
// margin: 24px 0px 10px;
|
||||
// background: #DBDBDB;
|
||||
// clear: both;
|
||||
// }
|
||||
}
|
||||
|
||||
aio-toc.embedded > div.collapsed li.secondary {
|
||||
|
||||
@ -58,7 +58,6 @@
|
||||
border: 0.5px solid $lightgray;
|
||||
}
|
||||
|
||||
|
||||
@mixin card($height, $width) {
|
||||
height: $height;
|
||||
width: $width;
|
||||
|
||||
@ -12,22 +12,3 @@
|
||||
@import './0-base/base-dir';
|
||||
@import './1-layouts/layouts-dir';
|
||||
@import './2-modules/modules-dir';
|
||||
|
||||
// import additional scss
|
||||
|
||||
// ********************************************************* //
|
||||
|
||||
[md-button], [md-raised-button], [mat-button], [mat-raised-button] {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.docs-primary-header {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
h1.docs-primary-header, h1 .docs-primary-header{
|
||||
font-size: 30px;
|
||||
font-weight: 300;
|
||||
margin: 0;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
@ -21,14 +21,3 @@ $ng-io-theme: mat-light-theme($ng-io-primary, $ng-io-accent, $ng-io-warn);
|
||||
// Alternatively, you can import and @include the theme mixins for each component
|
||||
// that you are using.
|
||||
@include angular-material-theme($ng-io-theme);
|
||||
|
||||
//TODO: define custom theme, old values from Style guide:
|
||||
// @material-header: #455A64;
|
||||
// @material-header-darker: #37474F;
|
||||
// @material-header-dark: #263238;
|
||||
// @material-200: #EEEEEE;
|
||||
// @material-700: #616161;
|
||||
// @material-800: #424242;
|
||||
// @material-900: #212121;
|
||||
// @black: #000000;
|
||||
// @white: #FFFFFF;
|
||||
|
||||
Reference in New Issue
Block a user