feat(docs-infra): implement dark mode (#41129)
defines styles for a first iteration of an aio darkmode PR Close #41129
This commit is contained in:
AleksanderBodurri
Andrew Kushnir
parent
8d9d1c293d
commit
cdb8f556fb
|
|
@ -44,14 +44,14 @@
|
|||
"src/styles/main.scss",
|
||||
{
|
||||
"inject": false,
|
||||
"input": "src/styles/custom-themes/light.scss",
|
||||
"bundleName": "assets/light"
|
||||
"input": "src/styles/custom-themes/dark-theme.scss",
|
||||
"bundleName": "dark-theme"
|
||||
},
|
||||
{
|
||||
"inject": false,
|
||||
"input": "src/styles/custom-themes/dark.scss",
|
||||
"bundleName": "assets/dark"
|
||||
},
|
||||
"input": "src/styles/custom-themes/light-theme.scss",
|
||||
"bundleName": "light-theme"
|
||||
}
|
||||
],
|
||||
"scripts": [],
|
||||
"budgets": [
|
||||
|
|
|
|||
|
|
@ -8,9 +8,7 @@
|
|||
<section id="intro">
|
||||
|
||||
<!-- LOGO -->
|
||||
<div class="hero-logo">
|
||||
<img src="assets/images/logos/angular/angular.svg" alt="Angular">
|
||||
</div>
|
||||
<div class="hero-logo"></div>
|
||||
|
||||
<!-- CONTAINER -->
|
||||
<div class="homepage-container">
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
|
||||
<div class="presskit-icon-item">
|
||||
<div class="presskit-image-container">
|
||||
<img src="assets/images/logos/angular/angular_solidBlack.svg" alt="Black logo Angular">
|
||||
<img src="assets/images/logos/angular/angular_solidBlack.svg" class="transparent-img" alt="Black logo Angular">
|
||||
</div>
|
||||
<div>
|
||||
<h3>One Color Logo</h3>
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
|
||||
<div class="presskit-icon-item">
|
||||
<div class="presskit-image-container">
|
||||
<img src="assets/images/logos/angular/angular_whiteTransparent.svg" class="transparent-img" alt="Transparent logo Angular">
|
||||
<img src="assets/images/logos/angular/angular_whiteTransparent.svg" class="transparent-img-inverse" alt="Transparent logo Angular">
|
||||
</div>
|
||||
<div>
|
||||
<h3>One Color Inverse Logo</h3>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<div id="top-of-page"></div>
|
||||
|
||||
<div *ngIf="isFetching" class="progress-bar-container">
|
||||
<mat-progress-bar mode="indeterminate" color="warn"></mat-progress-bar>
|
||||
</div>
|
||||
|
|
@ -23,7 +24,7 @@
|
|||
</a>
|
||||
<aio-top-menu *ngIf="showTopMenu" [nodes]="topMenuNodes" [currentNode]="currentNodes?.TopBar"></aio-top-menu>
|
||||
<aio-search-box class="search-container" #searchBox (onSearch)="doSearch($event)" (onFocus)="doSearch($event)"></aio-search-box>
|
||||
<aio-theme-picker></aio-theme-picker>
|
||||
<aio-theme-toggle></aio-theme-toggle>
|
||||
<div class="toolbar-external-icons-container">
|
||||
<a href="https://twitter.com/angular" title="Twitter" aria-label="Angular on twitter">
|
||||
<mat-icon svgIcon="logos:twitter"></mat-icon>
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@ import { SharedModule } from 'app/shared/shared.module';
|
|||
import { SwUpdatesModule } from 'app/sw-updates/sw-updates.module';
|
||||
|
||||
import {environment} from '../environments/environment';
|
||||
import { ThemeToggleComponent } from './shared/theme-picker/theme-toggle.component';
|
||||
|
||||
// These are the hardcoded inline svg sources to be used by the `<mat-icon>` component.
|
||||
// tslint:disable: max-line-length
|
||||
|
|
@ -170,6 +171,7 @@ export const svgIconProviders = [
|
|||
SearchBoxComponent,
|
||||
NotificationComponent,
|
||||
TopMenuComponent,
|
||||
ThemeToggleComponent
|
||||
],
|
||||
providers: [
|
||||
Deployment,
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import { NgModule } from '@angular/core';
|
|||
import { CommonModule } from '@angular/common';
|
||||
import { SearchResultsComponent } from './search-results/search-results.component';
|
||||
import { SelectComponent } from './select/select.component';
|
||||
import { ThemePickerComponent } from './theme-picker/theme-picker.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
|
@ -10,13 +9,11 @@ import { ThemePickerComponent } from './theme-picker/theme-picker.component';
|
|||
],
|
||||
exports: [
|
||||
SearchResultsComponent,
|
||||
SelectComponent,
|
||||
ThemePickerComponent
|
||||
SelectComponent
|
||||
],
|
||||
declarations: [
|
||||
SearchResultsComponent,
|
||||
SelectComponent,
|
||||
ThemePickerComponent
|
||||
SelectComponent
|
||||
]
|
||||
})
|
||||
export class SharedModule {}
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
// Taken from Angular Material docs repo
|
||||
|
||||
export * from './style-manager';
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
// Taken from Angular Material docs repo
|
||||
|
||||
import {HttpClientTestingModule} from '@angular/common/http/testing';
|
||||
import {inject, TestBed} from '@angular/core/testing';
|
||||
import {StyleManager} from './style-manager';
|
||||
|
||||
|
||||
describe('StyleManager', () => {
|
||||
let styleManager: StyleManager;
|
||||
|
||||
beforeEach(() => TestBed.configureTestingModule({
|
||||
imports: [HttpClientTestingModule],
|
||||
providers: [StyleManager]
|
||||
}));
|
||||
|
||||
beforeEach(inject([StyleManager], (sm: StyleManager) => {
|
||||
styleManager = sm;
|
||||
}));
|
||||
|
||||
afterEach(() => {
|
||||
const links = document.head.querySelectorAll('link');
|
||||
for (const link of Array.prototype.slice.call(links)) {
|
||||
if (link.className.includes('style-manager-')) {
|
||||
document.head.removeChild(link);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
it('should add stylesheet to head', () => {
|
||||
styleManager.setStyle('test', 'test.css');
|
||||
const styleEl = document.head.querySelector('.style-manager-test') as HTMLLinkElement;
|
||||
expect(styleEl).not.toBeNull();
|
||||
expect(styleEl.href.endsWith('test.css')).toBe(true);
|
||||
});
|
||||
|
||||
it('should change existing stylesheet', () => {
|
||||
styleManager.setStyle('test', 'test.css');
|
||||
const styleEl = document.head.querySelector('.style-manager-test') as HTMLLinkElement;
|
||||
expect(styleEl).not.toBeNull();
|
||||
expect(styleEl.href.endsWith('test.css')).toBe(true);
|
||||
|
||||
styleManager.setStyle('test', 'new.css');
|
||||
expect(styleEl.href.endsWith('new.css')).toBe(true);
|
||||
});
|
||||
|
||||
it('should remove existing stylesheet', () => {
|
||||
styleManager.setStyle('test', 'test.css');
|
||||
let styleEl = document.head.querySelector('.style-manager-test') as HTMLLinkElement;
|
||||
expect(styleEl).not.toBeNull();
|
||||
expect(styleEl.href.endsWith('test.css')).toBe(true);
|
||||
|
||||
styleManager.removeStyle('test');
|
||||
styleEl = document.head.querySelector('.style-manager-test') as HTMLLinkElement;
|
||||
expect(styleEl).toBeNull();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
// Taken from Angular Material docs repo
|
||||
|
||||
import {Injectable} from '@angular/core';
|
||||
|
||||
|
||||
/**
|
||||
* Class for managing stylesheets. Stylesheets are loaded into named slots so that they can be
|
||||
* removed or changed later.
|
||||
*/
|
||||
@Injectable()
|
||||
export class StyleManager {
|
||||
/**
|
||||
* Set the stylesheet with the specified key.
|
||||
*/
|
||||
setStyle(key: string, href: string) {
|
||||
getLinkElementForKey(key).setAttribute('href', href);
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the stylesheet with the specified key.
|
||||
*/
|
||||
removeStyle(key: string) {
|
||||
const existingLinkElement = getExistingLinkElementByKey(key);
|
||||
if (existingLinkElement) {
|
||||
document.head.removeChild(existingLinkElement);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getLinkElementForKey(key: string) {
|
||||
return getExistingLinkElementByKey(key) || createLinkElementWithKey(key);
|
||||
}
|
||||
|
||||
function getExistingLinkElementByKey(key: string) {
|
||||
return document.head.querySelector(`link[rel="stylesheet"].${getClassNameForKey(key)}`);
|
||||
}
|
||||
|
||||
function createLinkElementWithKey(key: string) {
|
||||
const linkEl = document.createElement('link');
|
||||
linkEl.setAttribute('rel', 'stylesheet');
|
||||
linkEl.classList.add(getClassNameForKey(key));
|
||||
document.head.appendChild(linkEl);
|
||||
return linkEl;
|
||||
}
|
||||
|
||||
function getClassNameForKey(key: string) {
|
||||
return `style-manager-${key}`;
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
<button (click)="selectTheme({ 'light': 'dark', 'dark': 'light' }[currentTheme])">
|
||||
Change theme (Current: {{ currentTheme }})
|
||||
</button>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ThemePickerComponent } from './theme-picker.component';
|
||||
|
||||
describe('ThemePickerComponent', () => {
|
||||
let component: ThemePickerComponent;
|
||||
let fixture: ComponentFixture<ThemePickerComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ ThemePickerComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ThemePickerComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { StyleManager } from './style-manager';
|
||||
import { ThemeStorage } from './theme-storage/theme-storage';
|
||||
|
||||
@Component({
|
||||
selector: 'aio-theme-picker',
|
||||
templateUrl: './theme-picker.component.html',
|
||||
providers: [ThemeStorage, StyleManager]
|
||||
})
|
||||
export class ThemePickerComponent implements OnInit {
|
||||
|
||||
currentTheme: 'light' | 'dark' = 'light';
|
||||
|
||||
constructor(private _themeStorage: ThemeStorage, private _styleManager: StyleManager) { }
|
||||
|
||||
ngOnInit(): void {
|
||||
const theme = this._themeStorage.getStoredThemeName();
|
||||
if (theme) {
|
||||
this.selectTheme(theme);
|
||||
}
|
||||
}
|
||||
|
||||
selectTheme(theme: string) {
|
||||
this.currentTheme = theme as 'light' | 'dark';
|
||||
|
||||
if (theme === 'light') {
|
||||
this._styleManager.removeStyle('theme');
|
||||
} else {
|
||||
this._styleManager.setStyle('theme', `assets/${theme}.css`);
|
||||
}
|
||||
|
||||
if (this.currentTheme) {
|
||||
this._themeStorage.storeTheme(this.currentTheme);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
// Taken from Angular Material docs repo
|
||||
|
||||
export * from './theme-storage';
|
||||
|
|
@ -1,28 +0,0 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
|
||||
@Injectable()
|
||||
export class ThemeStorage {
|
||||
static storageKey = 'io-theme-storage-current-name';
|
||||
|
||||
|
||||
storeTheme(theme: 'light' | 'dark') {
|
||||
try {
|
||||
window.localStorage[ThemeStorage.storageKey] = theme;
|
||||
} catch { }
|
||||
|
||||
}
|
||||
|
||||
getStoredThemeName(): 'light' | 'dark' | null {
|
||||
try {
|
||||
return window.localStorage[ThemeStorage.storageKey] || null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
clearStorage(): void {
|
||||
try {
|
||||
window.localStorage.removeItem(ThemeStorage.storageKey);
|
||||
} catch { }
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { DebugElement } from '@angular/core';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { ThemeStorage, ThemeToggleComponent } from './theme-toggle.component';
|
||||
|
||||
class FakeThemeStorage implements ThemeStorage {
|
||||
fakeStorage: string | null = null;
|
||||
|
||||
getThemePreference(): string | null {
|
||||
return this.fakeStorage;
|
||||
}
|
||||
|
||||
setThemePreference(isDark: boolean): void {
|
||||
this.fakeStorage = String(isDark);
|
||||
}
|
||||
}
|
||||
|
||||
let themeStorage: ThemeStorage;
|
||||
|
||||
// Verify that FakeThemeStorage behaves like ThemeStorage would
|
||||
describe('FakeThemeStorage', () => {
|
||||
beforeEach(() => {
|
||||
themeStorage = new FakeThemeStorage();
|
||||
});
|
||||
|
||||
it('should have null stored initially', () => {
|
||||
expect(themeStorage.getThemePreference()).toBeNull();
|
||||
});
|
||||
|
||||
it('should store true as a string if isDark is true', () => {
|
||||
themeStorage.setThemePreference(true);
|
||||
expect(themeStorage.getThemePreference()).toBe('true');
|
||||
});
|
||||
|
||||
it('should store false as a string if isDark is false', () => {
|
||||
themeStorage.setThemePreference(false);
|
||||
expect(themeStorage.getThemePreference()).toBe('false');
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
let component: ThemeToggleComponent;
|
||||
let fixture: ComponentFixture<ThemeToggleComponent>;
|
||||
let debugElement: DebugElement;
|
||||
|
||||
describe('ThemeToggleComponent', () => {
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ ThemeToggleComponent ],
|
||||
providers: [ { provide: ThemeStorage, useClass: FakeThemeStorage } ],
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ThemeToggleComponent);
|
||||
component = fixture.componentInstance;
|
||||
debugElement = fixture.debugElement;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
|
||||
it('should show toggle button', () => {
|
||||
expect(getToggleButton()).toBeDefined();
|
||||
});
|
||||
|
||||
it('should toggle between light and dark mode', () => {
|
||||
expect(component.getThemeName()).toBe('light');
|
||||
getToggleButton().click();
|
||||
expect(component.getThemeName()).toBe('dark');
|
||||
});
|
||||
|
||||
it('should have the correct next theme', () => {
|
||||
component.toggleTheme();
|
||||
expect(component.getThemeName()).toBe('dark');
|
||||
component.toggleTheme();
|
||||
expect(component.getThemeName()).toBe('light');
|
||||
});
|
||||
|
||||
it('should have the correct aria-label', () => {
|
||||
expect(component.getToggleLabel()).toBe(`Switch to dark mode`);
|
||||
component.toggleTheme();
|
||||
expect(component.getToggleLabel()).toBe(`Switch to light mode`);
|
||||
});
|
||||
});
|
||||
|
||||
function getToggleButton(): HTMLButtonElement {
|
||||
return debugElement.query(By.css('button')).nativeElement;
|
||||
}
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
import { DOCUMENT } from '@angular/common';
|
||||
import { Component, Inject, Injectable } from '@angular/core';
|
||||
|
||||
/** Injectable facade around localStorage for theme preference to make testing easier. */
|
||||
@Injectable({ providedIn: 'root' })
|
||||
export class ThemeStorage {
|
||||
getThemePreference(): string | null {
|
||||
// Wrap localStorage access in try/catch because user agents can block localStorage. If it is
|
||||
// blocked, we treat it as if no preference was previously stored.
|
||||
try {
|
||||
return localStorage.getItem('aio-theme');
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
setThemePreference(isDark: boolean): void {
|
||||
// Wrap localStorage access in try/catch because user agents can block localStorage. If it
|
||||
// fails, we persist nothing.
|
||||
try {
|
||||
localStorage.setItem('aio-theme', String(isDark));
|
||||
} catch { }
|
||||
}
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'aio-theme-toggle',
|
||||
template: `
|
||||
<button mat-icon-button type="button" (click)="toggleTheme()"
|
||||
[title]="getToggleLabel()" [attr.aria-label]="getToggleLabel()">
|
||||
<mat-icon>
|
||||
{{ isDark ? 'light' : 'dark' }}_mode
|
||||
</mat-icon>
|
||||
</button>
|
||||
`,
|
||||
})
|
||||
export class ThemeToggleComponent {
|
||||
isDark = false;
|
||||
|
||||
constructor(@Inject(DOCUMENT) private document: Document, private readonly themeStorage: ThemeStorage) {
|
||||
this.initializeThemeFromPreferences();
|
||||
}
|
||||
|
||||
toggleTheme(): void {
|
||||
this.isDark = !this.isDark;
|
||||
this.updateRenderedTheme();
|
||||
}
|
||||
|
||||
private initializeThemeFromPreferences(): void {
|
||||
// Check whether there's an explicit preference in localStorage.
|
||||
const storedPreference = this.themeStorage.getThemePreference();
|
||||
|
||||
// If we do have a preference in localStorage, use that. Otherwise,
|
||||
// initialize based on the prefers-color-scheme media query.
|
||||
if (storedPreference) {
|
||||
this.isDark = storedPreference === 'true';
|
||||
} else {
|
||||
this.isDark = matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
|
||||
}
|
||||
|
||||
const initialTheme = this.document.querySelector('#aio-initial-theme');
|
||||
if (initialTheme) {
|
||||
// todo(aleksanderbodurri): change to initialTheme.remove() when ie support is dropped
|
||||
initialTheme.parentElement?.removeChild(initialTheme);
|
||||
}
|
||||
|
||||
const themeLink = this.document.createElement('link');
|
||||
themeLink.id = 'aio-custom-theme';
|
||||
themeLink.rel = 'stylesheet';
|
||||
themeLink.href = `${this.getThemeName()}-theme.css`;
|
||||
this.document.head.appendChild(themeLink);
|
||||
}
|
||||
|
||||
getThemeName(): string {
|
||||
return this.isDark ? 'dark' : 'light';
|
||||
}
|
||||
|
||||
getToggleLabel(): string {
|
||||
return `Switch to ${this.isDark ? 'light' : 'dark'} mode`;
|
||||
}
|
||||
|
||||
private updateRenderedTheme(): void {
|
||||
// If we're calling this method, the user has explicitly interacted with the theme toggle.
|
||||
const customLinkElement = this.document.getElementById('aio-custom-theme') as HTMLLinkElement | null;
|
||||
if (customLinkElement) {
|
||||
customLinkElement.href = `${this.getThemeName()}-theme.css`;
|
||||
}
|
||||
|
||||
this.themeStorage.setThemePreference(this.isDark);
|
||||
}
|
||||
}
|
||||
|
|
@ -30,6 +30,11 @@
|
|||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block">
|
||||
<!-- -->
|
||||
|
||||
<style id="aio-initial-theme">
|
||||
@import url("light-theme.css") (prefers-color-scheme: light);
|
||||
@import url("dark-theme.css") (prefers-color-scheme: dark);
|
||||
</style>
|
||||
|
||||
<link rel="manifest" href="pwa-manifest.json">
|
||||
<meta name="theme-color" content="#1976d2">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
|
|
@ -97,14 +102,12 @@
|
|||
<noscript>
|
||||
<div class="background-sky hero"></div>
|
||||
<section id="intro" style="text-shadow: 1px 1px #1976d2;">
|
||||
<div class="hero-logo">
|
||||
<img src="assets/images/logos/angular/angular.svg" width="250" height="250" alt="Angular">
|
||||
</div>
|
||||
<div class="hero-logo"></div>
|
||||
<div class="homepage-container">
|
||||
<div class="hero-headline">The modern web<br>developer's platform</div>
|
||||
</div>
|
||||
</section>
|
||||
<h2 style="color: red; margin-top: 40px; position: relative; text-align: center; text-shadow: 1px 1px #fafafa;">
|
||||
<h2 style="color: red; margin-top: 40px; position: relative; text-align: center; text-shadow: 1px 1px #fafafa; border-top: none;">
|
||||
<b><i>This website requires JavaScript.</i></b>
|
||||
</h2>
|
||||
</noscript>
|
||||
|
|
|
|||
|
|
@ -1,52 +1,52 @@
|
|||
@use '../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
@use '../constants';
|
||||
|
||||
@mixin typography-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);
|
||||
@mixin theme($theme) {
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
body {
|
||||
color: if($is-dark-theme, $offwhite, $darkgray);
|
||||
}
|
||||
body {
|
||||
color: if($is-dark-theme, constants.$offwhite, constants.$darkgray);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: if($is-dark-theme, $offwhite, $darkgray);
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: if($is-dark-theme, constants.$offwhite, constants.$deepgray);
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: if($is-dark-theme, $offwhite, $mediumgray);
|
||||
}
|
||||
h6 {
|
||||
color: if($is-dark-theme, constants.$offwhite, constants.$mediumgray);
|
||||
}
|
||||
|
||||
p,
|
||||
ol,
|
||||
ul,
|
||||
ol,
|
||||
li,
|
||||
input,
|
||||
a {
|
||||
color: if($is-dark-theme, $white, $darkgray);
|
||||
}
|
||||
h2 {
|
||||
border-top: 1px solid if($is-dark-theme, constants.$mediumgray, constants.$lightgray);
|
||||
}
|
||||
|
||||
.app-toolbar a {
|
||||
color: if($is-dark-theme, $darkgray, $white);
|
||||
}
|
||||
p,
|
||||
ol,
|
||||
ul,
|
||||
ol,
|
||||
li,
|
||||
input,
|
||||
a {
|
||||
color: if($is-dark-theme, constants.$white, constants.$darkgray);
|
||||
}
|
||||
|
||||
code {
|
||||
color: if($is-dark-theme, $white, $darkgray);
|
||||
}
|
||||
.app-toolbar a {
|
||||
color: constants.$white;
|
||||
}
|
||||
|
||||
.sidenav-content a {
|
||||
color: if($is-dark-theme, lighten($blue, 20), $blue);
|
||||
}
|
||||
code {
|
||||
color: if($is-dark-theme, constants.$white, constants.$darkgray);
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: $brightred;
|
||||
}
|
||||
.sidenav-content a {
|
||||
color: if($is-dark-theme, constants.$lightblue, constants.$blue);
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: constants.$brightred;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
@use '../constants' as *;
|
||||
@use '../mixins' as *;
|
||||
@use '../constants';
|
||||
@use '../mixins';
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $main-font;
|
||||
font-family: constants.$main-font;
|
||||
margin: 0;
|
||||
@include font-size(16);
|
||||
@include mixins.font-size(16);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
|
@ -19,7 +19,7 @@ h1, h2, h3, h4, h5, h6 {
|
|||
}
|
||||
|
||||
h1 {
|
||||
@include font-size(40);
|
||||
@include mixins.font-size(40);
|
||||
display: inline-block;
|
||||
margin: 1.6rem 0;
|
||||
|
||||
|
|
@ -29,13 +29,12 @@ h1 {
|
|||
}
|
||||
|
||||
h2 {
|
||||
border-top: 1px solid $lightgray;
|
||||
clear: both;
|
||||
@include font-size(32);
|
||||
@include mixins.font-size(32);
|
||||
margin-top: 4rem;
|
||||
padding-top: 4rem;
|
||||
|
||||
@include marketing-pages($extraSelectors: ('.page-api'), $nestParentSelector: true) {
|
||||
@include mixins.marketing-pages($extraSelectors: ('.page-api'), $nestParentSelector: true) {
|
||||
border-top: 0;
|
||||
margin-top: 2rem;
|
||||
padding-top: 0;
|
||||
|
|
@ -43,25 +42,25 @@ h2 {
|
|||
}
|
||||
|
||||
h3 {
|
||||
@include font-size(24);
|
||||
@include mixins.font-size(24);
|
||||
margin-top: 3rem;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include font-size(20);
|
||||
@include mixins.font-size(20);
|
||||
margin-top: 3rem;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@include font-size(18);
|
||||
@include mixins.font-size(18);
|
||||
margin-top: 2rem;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
h6 {
|
||||
@include font-size(16);
|
||||
@include mixins.font-size(16);
|
||||
margin-top: 2rem;
|
||||
clear: both;
|
||||
}
|
||||
|
|
@ -90,13 +89,13 @@ ul,
|
|||
li,
|
||||
input,
|
||||
a {
|
||||
@include font-size(16);
|
||||
@include line-height(32);
|
||||
@include mixins.font-size(16);
|
||||
@include mixins.line-height(32);
|
||||
font-family: inherit;
|
||||
font-weight: 400;
|
||||
|
||||
& > em {
|
||||
@include letter-spacing(0.3);
|
||||
@include mixins.letter-spacing(0.3);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -125,7 +124,7 @@ ol ol {
|
|||
|
||||
li {
|
||||
padding-bottom: 8px;
|
||||
@include line-height(24);
|
||||
@include mixins.line-height(24);
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
|
|
@ -137,9 +136,9 @@ a {
|
|||
}
|
||||
|
||||
.app-toolbar a {
|
||||
@include font-size(16);
|
||||
@include mixins.font-size(16);
|
||||
font-weight: 400;
|
||||
font-family: $main-font;
|
||||
font-family: constants.$main-font;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
|
@ -176,14 +175,14 @@ td {
|
|||
}
|
||||
|
||||
th {
|
||||
@include font-size(16);
|
||||
@include mixins.font-size(16);
|
||||
font-weight: 500;
|
||||
padding: 13px 32px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: $code-font;
|
||||
font-family: constants.$code-font;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
|
|
@ -197,7 +196,7 @@ code {
|
|||
// `doc-viewer` component when it is displaying docs for the different areas of the documentation.
|
||||
// We add the icon to all external links which are identified as absolute links (those that start with `http:` or https:`).
|
||||
// For more info see PR #36601.
|
||||
@include docs-pages {
|
||||
@include mixins.docs-pages {
|
||||
aio-doc-viewer {
|
||||
// The docs-viewer also contain links to GitHub (e.g. the "edit this page" icon) identified with
|
||||
// the `.github-links` class. We don't want to add the external link icon to these links.
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
@use 'footer/footer-theme' as *;
|
||||
@use 'layout-global/layout-global-theme' as *;
|
||||
@use 'marketing-layout/marketing-layout-theme' as *;
|
||||
@use 'not-found/not-found-theme' as *;
|
||||
@use 'sidenav/sidenav-theme' as *;
|
||||
@use 'top-menu/top-menu-theme' as *;
|
||||
@use 'footer/footer-theme';
|
||||
@use 'layout-global/layout-global-theme';
|
||||
@use 'marketing-layout/marketing-layout-theme';
|
||||
@use 'not-found/not-found-theme';
|
||||
@use 'sidenav/sidenav-theme';
|
||||
@use 'top-menu/top-menu-theme';
|
||||
|
||||
@mixin layout-themes($theme) {
|
||||
@include footer-theme($theme);
|
||||
@include layout-global-theme($theme);
|
||||
@include marketing-layout-theme($theme);
|
||||
@include not-found-theme($theme);
|
||||
@include sidenav-theme($theme);
|
||||
@include top-menu-theme($theme);
|
||||
@mixin theme($theme) {
|
||||
@include footer-theme.theme($theme);
|
||||
@include layout-global-theme.theme($theme);
|
||||
@include marketing-layout-theme.theme($theme);
|
||||
@include not-found-theme.theme($theme);
|
||||
@include sidenav-theme.theme($theme);
|
||||
@include top-menu-theme.theme($theme);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@use '../../mixins' as *;
|
||||
@use '../../mixins';
|
||||
|
||||
.sidenav-container {
|
||||
width: 100%;
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
padding: 80px 1rem 1rem;
|
||||
}
|
||||
|
||||
@include marketing-pages(
|
||||
@include mixins.marketing-pages(
|
||||
$extraSelectors: ('.page-api', '.page-file-not-found', '.page-guide-cheatsheet'),
|
||||
$nestParentSelector: true) {
|
||||
max-width: none;
|
||||
|
|
|
|||
|
|
@ -1,25 +1,25 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../constants';
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin footer-theme($theme) {
|
||||
@mixin theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
footer {
|
||||
background-color: $blue;
|
||||
// Because the footer background is always the same color in both light and dark mode, there is no need to specify a foreground color
|
||||
background-color: mat-color($primary, if($is-dark-theme, 900, 700));
|
||||
|
||||
aio-footer {
|
||||
& > * {
|
||||
color: $white;
|
||||
color: constants.$white;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
color: constants.$white;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $white;
|
||||
color: constants.$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '../../constants';
|
||||
@use '../../mixins';
|
||||
|
||||
footer {
|
||||
position: relative;
|
||||
@include line-height(24);
|
||||
@include mixins.line-height(24);
|
||||
flex: 1;
|
||||
padding: 48px;
|
||||
z-index: 0;
|
||||
|
|
@ -37,19 +37,19 @@ footer {
|
|||
|
||||
&:focus {
|
||||
// `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
|
||||
outline: 1px solid rgba($white, 0.8);
|
||||
outline: 1px solid rgba(constants.$white, 0.8);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include font-size(16);
|
||||
@include mixins.font-size(16);
|
||||
text-transform: uppercase;
|
||||
font-weight: 400;
|
||||
margin: 8px 0 12px;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
@include font-size(14);
|
||||
@include mixins.font-size(14);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,13 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
@use '../../constants' ;
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin layout-global-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
@mixin theme($theme) {
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
html,
|
||||
body,
|
||||
.content {
|
||||
background: if($is-dark-theme, mat-color($background, background), $white);
|
||||
background: if($is-dark-theme, mat-color($background, background), constants.$white);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,78 +1,72 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
@use '../../constants';
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin marketing-layout-theme($theme) {
|
||||
@mixin theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
.background-sky {
|
||||
background-color: mat-color($primary, default);
|
||||
background: linear-gradient(145deg, mat-color($primary, 900), mat-color($primary, 400));
|
||||
background: linear-gradient(145deg, mat-color($primary, 900), if($is-dark-theme, mat-color($primary, 700), #42a5f5));
|
||||
color: mat-color($foreground, text);
|
||||
}
|
||||
|
||||
section#intro {
|
||||
color: $white;
|
||||
color: constants.$white;
|
||||
|
||||
@if $is-dark-theme {
|
||||
.hero-logo {
|
||||
img {
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
}
|
||||
.hero-logo {
|
||||
background-image: url(/assets/images/logos/angular/angular.svg);
|
||||
}
|
||||
}
|
||||
|
||||
.announcement-bar {
|
||||
background-color: $white;
|
||||
background-color: constants.$white;
|
||||
|
||||
.button {
|
||||
color: $white;
|
||||
background-color: $blue;
|
||||
color: constants.$white;
|
||||
background-color: constants.$blue;
|
||||
|
||||
&:hover {
|
||||
color: rgba($white, 0.7);
|
||||
color: rgba(constants.$white, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-row .card {
|
||||
background-color: if($is-dark-theme, $darkgray, $white);
|
||||
background-color: if($is-dark-theme, constants.$darkgray, constants.$white);
|
||||
|
||||
.card-text-container {
|
||||
p {
|
||||
color: if($is-dark-theme, $offwhite, $darkgray);
|
||||
color: if($is-dark-theme, constants.$offwhite, constants.$darkgray);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
h2 {
|
||||
color: $blue;
|
||||
color: if($is-dark-theme, constants.$cyan, constants.$blue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button.hero-cta {
|
||||
background-color: if($is-dark-theme, $darkgray, $white);
|
||||
background-color: if($is-dark-theme, constants.$darkgray, constants.$white);
|
||||
}
|
||||
|
||||
.cta-bar {
|
||||
.hero-cta {
|
||||
color: if($is-dark-theme, lighten($blue, 10), $blue);
|
||||
color: if($is-dark-theme, constants.$cyan, constants.$blue);
|
||||
}
|
||||
}
|
||||
|
||||
.text-headline {
|
||||
color: if($is-dark-theme, lighten($blue, 10), $blue);
|
||||
color: if($is-dark-theme, constants.$lightblue, constants.$blue);
|
||||
}
|
||||
|
||||
.marketing-banner {
|
||||
background-color: if($is-dark-theme, $blue, lighten($blue, 10));
|
||||
background-color: if($is-dark-theme, mat-color($primary, 800), mat-color($primary, 600));
|
||||
|
||||
.banner-headline {
|
||||
color: $white;
|
||||
color: constants.$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '../../constants';
|
||||
@use '../../mixins';
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
|
|
@ -25,9 +25,9 @@
|
|||
|
||||
.hero-title {
|
||||
display: inline-block;
|
||||
@include font-size(28);
|
||||
@include mixins.font-size(28);
|
||||
font-weight: 400;
|
||||
@include line-height(48);
|
||||
@include mixins.line-height(48);
|
||||
margin: 0 8px 0 0;
|
||||
text-transform: uppercase;
|
||||
|
||||
|
|
@ -60,7 +60,7 @@ section#intro {
|
|||
}
|
||||
|
||||
.homepage-container {
|
||||
width: 100%;
|
||||
width: 50%;
|
||||
max-width: 1040px;
|
||||
margin: 0 auto;
|
||||
margin-top: -7%;
|
||||
|
|
@ -78,8 +78,8 @@ section#intro {
|
|||
}
|
||||
|
||||
.hero-headline {
|
||||
@include font-size(40);
|
||||
@include line-height(64);
|
||||
@include mixins.font-size(40);
|
||||
@include mixins.line-height(64);
|
||||
font-weight: 500;
|
||||
margin: 32px 0;
|
||||
|
||||
|
|
@ -92,30 +92,20 @@ section#intro {
|
|||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
@include font-size(32);
|
||||
@include line-height(50);
|
||||
@include mixins.font-size(32);
|
||||
@include mixins.line-height(50);
|
||||
}
|
||||
}
|
||||
|
||||
.hero-logo {
|
||||
display: flex;
|
||||
|
||||
@media (max-width: 780px) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
margin-bottom: 8px;
|
||||
max-width: none;
|
||||
padding: 0;
|
||||
|
||||
@media (max-width: 780px) {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
width: 50%;
|
||||
min-width: 250px;
|
||||
height: 400px;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -129,7 +119,7 @@ section#intro {
|
|||
margin: 0 auto;
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
|
||||
box-shadow: 0 2px 2px rgba(constants.$black, 0.24), 0 0 2px rgba(constants.$black, 0.12);
|
||||
box-sizing: border-box;
|
||||
transition: all 0.3s ease-in;
|
||||
|
||||
|
|
@ -154,7 +144,7 @@ section#intro {
|
|||
align-items: center;
|
||||
height: 40px;
|
||||
min-width: 160px;
|
||||
@include font-size(16);
|
||||
@include mixins.font-size(16);
|
||||
border-radius: 48px;
|
||||
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
|
||||
box-sizing: border-box;
|
||||
|
|
@ -166,11 +156,11 @@ section#intro {
|
|||
right: 0;
|
||||
position: static;
|
||||
transition: all 0.3s ease-in;
|
||||
@include font-size(16);
|
||||
@include mixins.font-size(16);
|
||||
}
|
||||
|
||||
p {
|
||||
@include font-size(16);
|
||||
@include mixins.font-size(16);
|
||||
margin: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -179,7 +169,7 @@ section#intro {
|
|||
// ANGULAR LINE
|
||||
|
||||
.home-row .card {
|
||||
@include card(70%, auto);
|
||||
@include mixins.card(70%, auto);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
|
@ -228,9 +218,9 @@ section#intro {
|
|||
|
||||
.button.hero-cta {
|
||||
padding: 2px 34px 0;
|
||||
@include font-size(18);
|
||||
@include mixins.font-size(18);
|
||||
font-weight: 600;
|
||||
@include line-height(40);
|
||||
@include mixins.line-height(40);
|
||||
border-radius: 48px;
|
||||
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
|
||||
box-sizing: border-box;
|
||||
|
|
@ -241,7 +231,7 @@ section#intro {
|
|||
}
|
||||
}
|
||||
|
||||
@include marketing-pages {
|
||||
@include mixins.marketing-pages {
|
||||
.sidenav-content {
|
||||
padding: 0 0 3rem;
|
||||
}
|
||||
|
|
@ -269,7 +259,7 @@ section#intro {
|
|||
}
|
||||
|
||||
.text-headline {
|
||||
@include font-size(20);
|
||||
@include mixins.font-size(20);
|
||||
font-weight: 500;
|
||||
margin-top: 10px;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -355,14 +345,14 @@ div[layout=row]{
|
|||
|
||||
.banner-headline {
|
||||
text-transform: uppercase;
|
||||
@include font-size(24);
|
||||
@include mixins.font-size(24);
|
||||
font-weight: 300;
|
||||
margin: 0;
|
||||
-webkit-margin-before: 0;
|
||||
-webkit-margin-after: 0;
|
||||
|
||||
@media (max-width: 600px) {
|
||||
@include font-size(18);
|
||||
@include mixins.font-size(18);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,19 +1,16 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
@use '../../constants';
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin not-found-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
@mixin theme($theme) {
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
.nf-response {
|
||||
h1 {
|
||||
color: $blue;
|
||||
color: if($is-dark-theme, constants.$lightblue, constants.$blue);
|
||||
}
|
||||
}
|
||||
|
||||
.nf-icon.material-icons {
|
||||
color: $blue;
|
||||
color: constants.$blue;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,23 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '../../mixins';
|
||||
|
||||
.nf-container {
|
||||
align-items: center;
|
||||
padding: 32px;
|
||||
align-items: center;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.nf-response {
|
||||
margin: 32px;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
margin: 32px;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
|
||||
h1 {
|
||||
@include font-size(48);
|
||||
text-transform: uppercase;
|
||||
margin: 8px 0;
|
||||
}
|
||||
h1 {
|
||||
@include mixins.font-size(48);
|
||||
text-transform: uppercase;
|
||||
margin: 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nf-icon.material-icons {
|
||||
@include font-size(100);
|
||||
position: static;
|
||||
@include mixins.font-size(100);
|
||||
position: static;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,19 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
@use '../../constants';
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin sidenav-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
@mixin theme($theme) {
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
mat-sidenav-container.sidenav-container {
|
||||
background-color: if($is-dark-theme, mat-color($background, background), $white);
|
||||
background-color: if($is-dark-theme, mat-color($background, background), constants.$white);
|
||||
|
||||
mat-sidenav.sidenav {
|
||||
background-color: if($is-dark-theme, $deepgray, $superlightgray);
|
||||
border-right: 1px solid if($is-dark-theme, $darkgray, $lightgray);
|
||||
background-color: if($is-dark-theme, constants.$deepgray, constants.$superlightgray);
|
||||
border-right: 1px solid if($is-dark-theme, constants.$darkgray, constants.$lightgray);
|
||||
|
||||
.doc-version {
|
||||
border-top: 1px solid if($is-dark-theme, $darkgray, $lightgray);
|
||||
border-top: 1px solid if($is-dark-theme, constants.$darkgray, constants.$lightgray);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -23,20 +21,20 @@
|
|||
aio-nav-menu {
|
||||
aio-nav-item {
|
||||
.vertical-menu-item {
|
||||
color: if($is-dark-theme, $offwhite, $darkgray);
|
||||
color: if($is-dark-theme, constants.$offwhite, constants.$darkgray);
|
||||
|
||||
&:hover {
|
||||
background-color: if($is-dark-theme, $darkgray, $lightgray);
|
||||
color: if($is-dark-theme, $powderblue, $blue);
|
||||
text-shadow: 0 0 5px if($is-dark-theme, $black, $white);
|
||||
background-color: if($is-dark-theme, constants.$darkgray, constants.$lightgray);
|
||||
color: if($is-dark-theme, constants.$powderblue, constants.$blue);
|
||||
text-shadow: 0 0 5px if($is-dark-theme, constants.$black, constants.$white);
|
||||
|
||||
&.selected {
|
||||
color: if($is-dark-theme, $powderblue, $darkblue);
|
||||
color: if($is-dark-theme, constants.$powderblue, constants.$darkblue);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: if($is-dark-theme, $lightblue, $darkblue);
|
||||
color: if($is-dark-theme, constants.$lightblue, constants.$darkblue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '../../constants';
|
||||
@use '../../mixins';
|
||||
|
||||
// Disable sidenav animations for the initial render.
|
||||
.starting.mat-drawer-transition .mat-drawer-content {
|
||||
|
|
@ -71,7 +71,7 @@ aio-nav-menu {
|
|||
word-wrap: break-word;
|
||||
|
||||
&:focus {
|
||||
outline: $focus-outline-onlight auto 2px;
|
||||
outline: constants.$focus-outline-onlight auto 2px;
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
@ -119,8 +119,8 @@ aio-nav-menu {
|
|||
}
|
||||
|
||||
.level-1 {
|
||||
@include font-size(16);
|
||||
@include line-height(28);
|
||||
@include mixins.font-size(16);
|
||||
@include mixins.line-height(28);
|
||||
font-weight: 400;
|
||||
padding-left: 20px;
|
||||
margin: 0;
|
||||
|
|
@ -128,34 +128,34 @@ aio-nav-menu {
|
|||
}
|
||||
|
||||
.level-2 {
|
||||
@include font-size(14);
|
||||
@include line-height(24);
|
||||
@include mixins.font-size(14);
|
||||
@include mixins.line-height(24);
|
||||
font-weight: 400;
|
||||
margin: 0;
|
||||
padding-left: 36px;
|
||||
}
|
||||
|
||||
.level-3 {
|
||||
@include font-size(14);
|
||||
@include line-height(24);
|
||||
@include mixins.font-size(14);
|
||||
@include mixins.line-height(24);
|
||||
margin: 0;
|
||||
padding-left: 44px;
|
||||
}
|
||||
|
||||
.level-4 {
|
||||
@include font-size(14);
|
||||
@include line-height(24);
|
||||
@include mixins.font-size(14);
|
||||
@include mixins.line-height(24);
|
||||
margin: 0;
|
||||
padding-left: 52px;
|
||||
}
|
||||
|
||||
.level-1, .level-2, .level-3 {
|
||||
&.collapsed > .mat-icon {
|
||||
@include rotate(0deg);
|
||||
@include mixins.rotate(0deg);
|
||||
}
|
||||
|
||||
&.expanded > .mat-icon {
|
||||
@include rotate(90deg);
|
||||
@include mixins.rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,31 +1,35 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
@use '../../constants';
|
||||
@use '../../mixins';
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin top-menu-theme($theme) {
|
||||
@mixin 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);
|
||||
|
||||
mat-toolbar.app-toolbar {
|
||||
@if $is-dark-theme {
|
||||
&.mat-primary {
|
||||
background: mat-color($primary, darker)
|
||||
}
|
||||
}
|
||||
|
||||
// HOME PAGE OVERRIDE: TOPNAV TOOLBAR
|
||||
.page-home & {
|
||||
background-color: $blue;
|
||||
background: if($is-dark-theme, mat-color($primary, darker), constants.$blue);
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
color: $white;
|
||||
color: constants.$white;
|
||||
}
|
||||
|
||||
// HAMBURGER BUTTON
|
||||
.hamburger {
|
||||
&:hover {
|
||||
color: $offwhite;
|
||||
color: constants.$offwhite;
|
||||
}
|
||||
|
||||
& .mat-icon {
|
||||
color: $white;
|
||||
color: constants.$white;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -33,7 +37,7 @@
|
|||
.nav-link.home {
|
||||
&:focus {
|
||||
// `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
|
||||
outline: 1px solid $focus-outline-ondark;
|
||||
outline: 1px solid constants.$focus-outline-ondark;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -44,20 +48,20 @@
|
|||
a.nav-link {
|
||||
.nav-link-inner {
|
||||
&:hover {
|
||||
background: rgba($white, 0.15);
|
||||
background: rgba(constants.$white, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
.nav-link-inner {
|
||||
background: rgba($white, 0.15);
|
||||
box-shadow: 0 0 1px 2px $focus-outline-ondark;
|
||||
background: rgba(constants.$white, 0.15);
|
||||
box-shadow: 0 0 1px 2px constants.$focus-outline-ondark;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
.nav-link-inner {
|
||||
background: rgba($white, 0.15);
|
||||
background: rgba(constants.$white, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -65,7 +69,7 @@
|
|||
&.selected {
|
||||
a.nav-link {
|
||||
.nav-link-inner {
|
||||
background: rgba($white, 0.15);
|
||||
background: rgba(constants.$white, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -76,20 +80,18 @@
|
|||
// SEARCH BOX
|
||||
aio-search-box.search-container {
|
||||
input {
|
||||
color: $darkgray;
|
||||
background-color: $white;
|
||||
color: constants.$darkgray;
|
||||
background-color: constants.$white;
|
||||
|
||||
@include placeholder {
|
||||
color: $mediumgray;
|
||||
@include mixins.placeholder {
|
||||
color: constants.$mediumgray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// THEME PICKER
|
||||
|
||||
aio-theme-picker {
|
||||
button {
|
||||
color: $offwhite;
|
||||
aio-theme-toggle {
|
||||
@media screen and (min-width: 351px) {
|
||||
border-right: 1px solid constants.$white;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -98,7 +100,7 @@
|
|||
a {
|
||||
&:focus {
|
||||
// `outline-offset` is not applied on Chrome on Windows, if `outline-style` is `auto.
|
||||
outline: 1px solid $focus-outline-ondark;
|
||||
outline: 1px solid constants.$focus-outline-ondark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '../../mixins';
|
||||
|
||||
// VARIABLES
|
||||
$showTopMenuWidth: 1048px;
|
||||
|
|
@ -29,7 +28,7 @@ mat-toolbar.app-toolbar {
|
|||
}
|
||||
|
||||
// DOCS PAGES OVERRIDE: HAMBURGER
|
||||
@include docs-pages($nestParentSelector: true) {
|
||||
@include mixins.docs-pages($nestParentSelector: true) {
|
||||
@media (min-width: $showTopMenuWidth) {
|
||||
.hamburger {
|
||||
// Hamburger shown on non-marketing pages even on large screens.
|
||||
|
|
@ -172,8 +171,8 @@ mat-toolbar.app-toolbar {
|
|||
outline: none;
|
||||
}
|
||||
|
||||
@include placeholder {
|
||||
@include font-size(14);
|
||||
@include mixins.placeholder {
|
||||
@include mixins.font-size(14);
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
|
|
@ -190,6 +189,13 @@ mat-toolbar.app-toolbar {
|
|||
}
|
||||
}
|
||||
|
||||
aio-theme-toggle {
|
||||
@media screen and (min-width: 350px) {
|
||||
padding-right: 2px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// EXTERNAL LINK ICONS
|
||||
.toolbar-external-icons-container {
|
||||
display: flex;
|
||||
|
|
@ -197,14 +203,26 @@ mat-toolbar.app-toolbar {
|
|||
flex-shrink: 0; // This is required for the icons to be displayed correctly in IE11.
|
||||
height: 100%;
|
||||
|
||||
@media screen and (max-width: 350px) {
|
||||
a[title="GitHub"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
a[title="Twitter"], a[title="YouTube"] {
|
||||
@media screen and (max-width: 420px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 24px;
|
||||
margin: 0 -16px;
|
||||
padding: 0;
|
||||
margin: 24px 8px;
|
||||
|
||||
&:focus {
|
||||
outline-offset: -16px;
|
||||
outline-offset: 8px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 480px) {
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@
|
|||
@forward 'progress-bar/progress-bar';
|
||||
@forward 'presskit/presskit';
|
||||
@forward 'resources/resources';
|
||||
@forward 'roadmap';
|
||||
@forward 'search-results/search-results';
|
||||
@forward 'select-menu/select-menu';
|
||||
@forward 'table/table';
|
||||
|
|
|
|||
|
|
@ -1,51 +1,52 @@
|
|||
@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 *;
|
||||
@use 'alert/alert-theme';
|
||||
@use 'api-list/api-list-theme';
|
||||
@use 'api-pages/api-pages-theme';
|
||||
@use 'api-symbols/api-symbols-theme';
|
||||
@use 'buttons/buttons-theme';
|
||||
@use 'callout/callout-theme';
|
||||
@use 'card/card-theme';
|
||||
@use 'code/code-theme';
|
||||
@use 'contributor/contributor-theme';
|
||||
@use 'deploy-theme/deploy-theme';
|
||||
@use 'details/details-theme';
|
||||
@use 'errors/errors-theme';
|
||||
@use 'filetree/filetree-theme';
|
||||
@use 'guides/guides-theme';
|
||||
@use 'heading-anchors/heading-anchors-theme';
|
||||
@use 'hr/hr-theme';
|
||||
@use 'images/images-theme';
|
||||
@use 'label/label-theme';
|
||||
@use 'notification/notification-theme';
|
||||
@use 'presskit/presskit-theme';
|
||||
@use 'resources/resources-theme';
|
||||
@use 'search-results/search-results-theme';
|
||||
@use 'select-menu/select-menu-theme';
|
||||
@use 'table/table-theme';
|
||||
@use 'toc/toc-theme';
|
||||
|
||||
@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);
|
||||
@mixin theme($theme) {
|
||||
@include alert-theme.theme($theme);
|
||||
@include api-list-theme.theme($theme);
|
||||
@include api-symbols-theme.theme($theme);
|
||||
@include buttons-theme.theme($theme);
|
||||
@include callout-theme.theme($theme);
|
||||
@include card-theme.theme($theme);
|
||||
@include code-theme.theme($theme);
|
||||
@include contributor-theme.theme($theme);
|
||||
@include deploy-theme.theme($theme);
|
||||
@include details-theme.theme($theme);
|
||||
@include errors-theme.theme($theme);
|
||||
@include filetree-theme.theme($theme);
|
||||
@include guides-theme.theme($theme);
|
||||
@include heading-anchors-theme.theme($theme);
|
||||
@include hr-theme.theme($theme);
|
||||
@include images-theme.theme($theme);
|
||||
@include label-theme.theme($theme);
|
||||
@include notification-theme.theme($theme);
|
||||
@include presskit-theme.theme($theme);
|
||||
@include resources-theme.theme($theme);
|
||||
@include search-results-theme.theme($theme);
|
||||
@include select-menu-theme.theme($theme);
|
||||
@include table-theme.theme($theme);
|
||||
@include toc-theme.theme($theme);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,15 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
@use '../../constants';
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin alert-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
@mixin theme($theme) {
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
.alert {
|
||||
color: if($is-dark-theme, $offwhite, $darkgray);
|
||||
color: if($is-dark-theme, constants.$offwhite, constants.$darkgray);
|
||||
|
||||
&.is-critical {
|
||||
border-left: 8px solid $brightred;
|
||||
background-color: if($is-dark-theme, $deepgray, rgba($brightred, 0.05));
|
||||
border-left: 8px solid constants.$brightred;
|
||||
background-color: if($is-dark-theme, constants.$deepgray, rgba(constants.$brightred, 0.05));
|
||||
|
||||
h1,
|
||||
h2,
|
||||
|
|
@ -20,13 +17,13 @@
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $brightred;
|
||||
color: constants.$brightred;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-important {
|
||||
border-left: 8px solid $orange;
|
||||
background-color: if($is-dark-theme, $deepgray, rgba($orange, 0.05));
|
||||
border-left: 8px solid constants.$orange;
|
||||
background-color: if($is-dark-theme, constants.$deepgray, rgba(constants.$orange, 0.05));
|
||||
|
||||
h1,
|
||||
h2,
|
||||
|
|
@ -34,13 +31,13 @@
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $orange;
|
||||
color: constants.$orange;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-helpful {
|
||||
border-left: 8px solid $blue;
|
||||
background-color: if($is-dark-theme, $deepgray, rgba($blue, 0.05));
|
||||
border-left: 8px solid constants.$blue;
|
||||
background-color: if($is-dark-theme, constants.$deepgray, rgba(constants.$blue, 0.05));
|
||||
|
||||
h1,
|
||||
h2,
|
||||
|
|
@ -48,19 +45,19 @@
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $blue;
|
||||
color: constants.$blue;
|
||||
}
|
||||
}
|
||||
|
||||
&.archive-warning {
|
||||
background-color: if($is-dark-theme, $deepgray, $darkred);
|
||||
background-color: if($is-dark-theme, constants.$deepgray, constants.$darkred);
|
||||
|
||||
* {
|
||||
color: $white;
|
||||
color: constants.$white;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
color: constants.$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '../../mixins';
|
||||
|
||||
.alert {
|
||||
padding: 16px;
|
||||
margin: 24px 0px;
|
||||
@include font-size(14);
|
||||
@include mixins.font-size(14);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
clear: both;
|
||||
|
|
|
|||
|
|
@ -1,47 +1,49 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
@use '../../constants';
|
||||
@use '../../mixins';
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin api-list-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
@mixin theme($theme) {
|
||||
$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);
|
||||
box-shadow: 0 2px 2px rgba(constants.$black, 0.24), 0 0 2px rgba(constants.$black, 0.12);
|
||||
border: 1px solid if($is-dark-theme, constants.$darkgray, constants.$white);
|
||||
background-color: if($is-dark-theme, constants.$darkgray, constants.$white);
|
||||
color: if($is-dark-theme, constants.$white, constants.$darkgray);
|
||||
|
||||
@include placeholder {
|
||||
color: if($is-dark-theme, $offwhite, $mediumgray);
|
||||
@include mixins.placeholder {
|
||||
color: if($is-dark-theme, constants.$offwhite, constants.$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);
|
||||
border: 1px solid constants.$blue-400;
|
||||
box-shadow: 0 2px 2px rgba(constants.$blue-400, 0.24), 0 0 2px rgba(constants.$blue-400, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
color: if($is-dark-theme, $lightblue, $blue-grey-600);
|
||||
color: if($is-dark-theme, constants.$lightblue, constants.$blue-grey-600);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.api-list-container {
|
||||
|
||||
a {
|
||||
color: if($is-dark-theme, constants.$warmblue, constants.$blue);
|
||||
}
|
||||
|
||||
.api-list {
|
||||
li {
|
||||
a {
|
||||
color: if($is-dark-theme, $cyan, $blue-grey-600);
|
||||
color: if($is-dark-theme, constants.$coldblue, constants.$blue-grey-600);
|
||||
|
||||
&:hover {
|
||||
background: if($is-dark-theme, $darkgray, $blue-grey-50);
|
||||
color: if($is-dark-theme, $offwhite, $blue-500);
|
||||
background: if($is-dark-theme, constants.$darkgray, constants.$blue-grey-50);
|
||||
color: if($is-dark-theme, constants.$offwhite, constants.$blue-500);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '../../constants';
|
||||
@use '../../mixins';
|
||||
|
||||
/* API LIST STYLES */
|
||||
|
||||
|
|
@ -44,15 +44,15 @@ aio-api-list {
|
|||
input {
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
@include font-size(14);
|
||||
@include line-height(32);
|
||||
@include mixins.font-size(14);
|
||||
@include mixins.line-height(32);
|
||||
outline: none;
|
||||
padding: 4px 16px 4px 32px;
|
||||
transition: all .2s;
|
||||
width: 182px;
|
||||
|
||||
@include placeholder {
|
||||
@include font-size(14);
|
||||
@include mixins.placeholder {
|
||||
@include mixins.font-size(14);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
|
|
@ -61,13 +61,13 @@ aio-api-list {
|
|||
}
|
||||
|
||||
.material-icons {
|
||||
@include font-size(20);
|
||||
@include mixins.font-size(20);
|
||||
left: 8px;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
width: 20px;
|
||||
z-index: $layer-1;
|
||||
z-index: constants.$layer-1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -85,9 +85,9 @@ aio-api-list {
|
|||
padding: 16px 0;
|
||||
position: relative;
|
||||
|
||||
@media handheld and (max-width: $phone-breakpoint),
|
||||
screen and (max-device-width: $phone-breakpoint),
|
||||
screen and (max-width: $tablet-breakpoint) {
|
||||
@media handheld and (max-width: constants.$phone-breakpoint),
|
||||
screen and (max-device-width: constants.$phone-breakpoint),
|
||||
screen and (max-width: constants.$tablet-breakpoint) {
|
||||
padding: 24px 0 0;
|
||||
}
|
||||
|
||||
|
|
@ -108,9 +108,9 @@ aio-api-list {
|
|||
}
|
||||
|
||||
li {
|
||||
@include font-size(14);
|
||||
@include mixins.font-size(14);
|
||||
margin: 8px 0;
|
||||
@include line-height(14);
|
||||
@include mixins.line-height(14);
|
||||
padding: 0;
|
||||
float: left;
|
||||
width: 33%;
|
||||
|
|
@ -120,7 +120,7 @@ aio-api-list {
|
|||
white-space: nowrap;
|
||||
|
||||
a {
|
||||
@include line-height(16);
|
||||
@include mixins.line-height(16);
|
||||
padding: 0 16px;
|
||||
text-decoration: none;
|
||||
transition: all .3s;
|
||||
|
|
|
|||
|
|
@ -1,21 +1,16 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
@use '../../constants';
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@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;
|
||||
border: 1px solid constants.$lightgray;
|
||||
}
|
||||
|
||||
summary {
|
||||
.actions {
|
||||
color: $blue;
|
||||
color: constants.$blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -27,10 +22,10 @@
|
|||
.with-github-links {
|
||||
.github-links {
|
||||
a {
|
||||
color: $mediumgray;
|
||||
color: constants.$mediumgray;
|
||||
|
||||
.material-icons:hover {
|
||||
color: $blue;
|
||||
color: constants.$blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -38,21 +33,21 @@
|
|||
}
|
||||
|
||||
tr {
|
||||
border-bottom: 1px solid $lightgray;
|
||||
border-bottom: 1px solid constants.$lightgray;
|
||||
}
|
||||
}
|
||||
|
||||
.from-constructor,
|
||||
.read-only-property,
|
||||
.write-only-property {
|
||||
background-color: $lightgray;
|
||||
background-color: constants.$lightgray;
|
||||
}
|
||||
}
|
||||
|
||||
.github-links {
|
||||
.material-icons {
|
||||
&:hover {
|
||||
background-color: $mist;
|
||||
background-color: constants.$mist;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '../../mixins';
|
||||
|
||||
.api-body {
|
||||
max-width: 1200px;
|
||||
|
|
@ -42,7 +41,7 @@
|
|||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
@include font-size(14);
|
||||
@include mixins.font-size(14);
|
||||
}
|
||||
.show-all {
|
||||
display: initial;
|
||||
|
|
@ -84,7 +83,7 @@
|
|||
|
||||
&.parameters-table {
|
||||
margin-top: 0;
|
||||
@include font-size(14);
|
||||
@include mixins.font-size(14);
|
||||
box-shadow: none;
|
||||
|
||||
tr {
|
||||
|
|
@ -143,7 +142,7 @@
|
|||
}
|
||||
|
||||
h4 {
|
||||
@include font-size(14);
|
||||
@include mixins.font-size(14);
|
||||
font-weight: bold;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
|
@ -151,7 +150,7 @@
|
|||
|
||||
th {
|
||||
text-transform: none;
|
||||
@include font-size(16);
|
||||
@include mixins.font-size(16);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -199,16 +198,16 @@
|
|||
}
|
||||
|
||||
.api-heading {
|
||||
@include font-size(14);
|
||||
@include mixins.font-size(14);
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.from-constructor,
|
||||
.read-only-property,
|
||||
.write-only-property {
|
||||
@include font-size(12);
|
||||
@include mixins.font-size(12);
|
||||
font-weight: 600;
|
||||
@include letter-spacing(0.5);
|
||||
@include mixins.letter-spacing(0.5);
|
||||
font-style: italic;
|
||||
border-radius: 4px;
|
||||
padding: 4px 6px;
|
||||
|
|
@ -242,7 +241,7 @@
|
|||
.material-icons {
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
@include font-size(20);
|
||||
@include mixins.font-size(20);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -263,7 +262,7 @@
|
|||
}
|
||||
|
||||
h1 {
|
||||
@include font-size(24);
|
||||
@include mixins.font-size(24);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,14 @@
|
|||
@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);
|
||||
@use '../../constants';
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin theme($theme) {
|
||||
.symbol {
|
||||
box-shadow: 0 1px 2px rgba($black, 0.24);
|
||||
color: $white;
|
||||
box-shadow: 0 1px 2px rgba(constants.$black, 0.24);
|
||||
color: constants.$white;
|
||||
|
||||
// SYMBOL TYPES
|
||||
// Symbol mapping variables in *constants*
|
||||
@each $name, $symbol in $api-symbols {
|
||||
@each $name, $symbol in constants.$api-symbols {
|
||||
&.#{$name} {
|
||||
background: map-get($symbol, background);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '../../mixins';
|
||||
|
||||
/* API SYMBOLS */
|
||||
|
||||
|
|
@ -8,9 +7,9 @@
|
|||
.symbol {
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
@include font-size(10);
|
||||
@include mixins.font-size(10);
|
||||
font-weight: 600;
|
||||
@include line-height(16);
|
||||
@include mixins.line-height(16);
|
||||
margin-right: 8px;
|
||||
text-align: center;
|
||||
width: 16px;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,7 @@
|
|||
@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);
|
||||
@use '../../constants';
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin theme($theme) {
|
||||
// This rule overrides some Angular Material styles defined for `.mat-button`
|
||||
// (hence we include `.mat-button` in the selector).
|
||||
a.button.mat-button,
|
||||
|
|
@ -14,43 +9,43 @@
|
|||
// COLORS
|
||||
|
||||
&.button-secondary {
|
||||
background: $mediumgray;
|
||||
color: rgba($white, 0.87);
|
||||
background: constants.$mediumgray;
|
||||
color: rgba(constants.$white, 0.87);
|
||||
}
|
||||
|
||||
&.button-plain {
|
||||
background: $white;
|
||||
color: rgba($darkgray, 0.87);
|
||||
background: constants.$white;
|
||||
color: rgba(constants.$darkgray, 0.87);
|
||||
}
|
||||
|
||||
&.button-subtle {
|
||||
background: $mediumgray;
|
||||
color: darken($offwhite, 10%);
|
||||
background: constants.$mediumgray;
|
||||
color: darken(constants.$offwhite, 10%);
|
||||
|
||||
&:hover {
|
||||
color: rgba($white, 0.7);
|
||||
color: rgba(constants.$white, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
&.button-blue {
|
||||
background: $blue;
|
||||
color: rgba($white, 0.87);
|
||||
background: constants.$blue;
|
||||
color: rgba(constants.$white, 0.87);
|
||||
|
||||
&:hover {
|
||||
color: rgba($white, 0.7);
|
||||
color: rgba(constants.$white, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
&.button-banner {
|
||||
background: $darkgray;
|
||||
color: rgba($white, 0.87);
|
||||
background: constants.$darkgray;
|
||||
color: rgba(constants.$white, 0.87);
|
||||
}
|
||||
}
|
||||
|
||||
.cta-bar {
|
||||
.button {
|
||||
&:hover {
|
||||
color: $offwhite;
|
||||
color: constants.$offwhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -59,11 +54,11 @@
|
|||
// 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);
|
||||
background-color: rgba(constants.$blue, 0.2);
|
||||
&.selected,
|
||||
&:hover {
|
||||
background-color: $blue;
|
||||
color: $white;
|
||||
background-color: constants.$blue;
|
||||
color: constants.$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '../../constants';
|
||||
@use '../../mixins';
|
||||
|
||||
/* Button Styles */
|
||||
|
||||
|
|
@ -13,9 +13,9 @@ a.button.mat-button,
|
|||
.button {
|
||||
color: inherit;
|
||||
display: inline-block;
|
||||
@include line-height(32);
|
||||
@include mixins.line-height(32);
|
||||
padding: 0px 16px;
|
||||
@include font-size(14);
|
||||
@include mixins.font-size(14);
|
||||
font-weight: 400;
|
||||
border-radius: 3px;
|
||||
text-decoration: none;
|
||||
|
|
@ -25,20 +25,20 @@ a.button.mat-button,
|
|||
|
||||
// SIZES
|
||||
&.button-small {
|
||||
@include font-size(12);
|
||||
@include line-height(24);
|
||||
@include mixins.font-size(12);
|
||||
@include mixins.line-height(24);
|
||||
padding: 0px 8px;
|
||||
}
|
||||
|
||||
&.button-large {
|
||||
@include font-size(15);
|
||||
@include line-height(48);
|
||||
@include mixins.font-size(15);
|
||||
@include mixins.line-height(48);
|
||||
padding: 0px 24px;
|
||||
}
|
||||
|
||||
&.button-x-large {
|
||||
@include font-size(16);
|
||||
@include line-height(56);
|
||||
@include mixins.font-size(16);
|
||||
@include mixins.line-height(56);
|
||||
padding: 0px 24px;
|
||||
}
|
||||
}
|
||||
|
|
@ -64,14 +64,14 @@ a.button.mat-button,
|
|||
// (hence we include `.mat-button` in the selector).
|
||||
a.button.mat-button.filter-button {
|
||||
border-radius: 4px;
|
||||
@include font-size(16);
|
||||
@include line-height(48);
|
||||
@include mixins.font-size(16);
|
||||
@include mixins.line-height(48);
|
||||
margin: 8px;
|
||||
padding: 0px 16px;
|
||||
width: 168px;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
@include font-size(14);
|
||||
@include mixins.font-size(14);
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,42 +1,39 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
@use '../../constants';
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin callout-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
@mixin theme($theme) {
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
|
||||
.callout {
|
||||
header {
|
||||
color: $white;
|
||||
color: constants.$white;
|
||||
}
|
||||
|
||||
&.is-critical {
|
||||
border-color: $brightred;
|
||||
background: rgba($brightred, 0.05);
|
||||
border-color: constants.$brightred;
|
||||
background: rgba(constants.$brightred, if($is-dark-theme, 0.1, 0.05));
|
||||
|
||||
header {
|
||||
background: $brightred;
|
||||
background: constants.$brightred;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-important {
|
||||
border-color: $orange;
|
||||
background: rgba($orange, 0.05);
|
||||
border-color: constants.$orange;
|
||||
background: rgba(constants.$orange,if($is-dark-theme, 0.1, 0.05));
|
||||
|
||||
header {
|
||||
background: $amber-700;
|
||||
background: constants.$amber-700;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-helpful {
|
||||
border-color: $blue;
|
||||
background: rgba($blue, 0.05);
|
||||
border-color: constants.$blue;
|
||||
background: rgba(constants.$blue, if($is-dark-theme, 0.1, 0.05));
|
||||
|
||||
header {
|
||||
background: $blue;
|
||||
background: constants.$blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '../../mixins';
|
||||
@use '../alert/alert';
|
||||
|
||||
.callout {
|
||||
|
|
@ -9,7 +8,7 @@
|
|||
border-radius: 4px;
|
||||
|
||||
header {
|
||||
@include line-height(24);
|
||||
@include mixins.line-height(24);
|
||||
font-weight: 500;
|
||||
padding: 8px 16px;
|
||||
margin: 0;
|
||||
|
|
@ -20,7 +19,7 @@
|
|||
p {
|
||||
padding: 16px;
|
||||
margin: 0px;
|
||||
@include font-size(14);
|
||||
@include mixins.font-size(14);
|
||||
}
|
||||
|
||||
> *:not(:first-child) {
|
||||
|
|
|
|||
|
|
@ -1,37 +1,31 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
@use '../../constants';
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin card-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
@mixin theme($theme) {
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
.card-container {
|
||||
.docs-card {
|
||||
background-color: if($is-dark-theme, $darkgray, $white);
|
||||
background-color: if($is-dark-theme, constants.$deepgray, constants.$white);
|
||||
|
||||
section {
|
||||
color: if($is-dark-theme, $powderblue, $blue);
|
||||
color: if($is-dark-theme, constants.$cyan, constants.$blue);
|
||||
}
|
||||
|
||||
p {
|
||||
color: if($is-dark-theme, $offwhite, $darkgray);
|
||||
color: if($is-dark-theme, constants.$offwhite, constants.$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);
|
||||
color: if($is-dark-theme, constants.$powderblue, constants.$darkblue);
|
||||
background-color: if($is-dark-theme, constants.$darkgray, rgba(constants.$blue, 0.1));
|
||||
border-top: 0.5px solid if($is-dark-theme, constants.$darkgray, constants.$lightgray);
|
||||
|
||||
a {
|
||||
color: $mediumgray;
|
||||
color: constants.$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';
|
||||
@use '../../mixins';
|
||||
|
||||
.card-container {
|
||||
display: flex;
|
||||
|
|
@ -9,7 +9,8 @@
|
|||
margin: 16px 0;
|
||||
|
||||
.docs-card {
|
||||
@include card(194px, 35%);
|
||||
@include mixins.card(194px, 35%);
|
||||
|
||||
max-width: 340px;
|
||||
min-width: 300px;
|
||||
margin: 24px 16px;
|
||||
|
|
@ -23,8 +24,8 @@
|
|||
}
|
||||
|
||||
section {
|
||||
@include font-size(20);
|
||||
@include line-height(24);
|
||||
@include mixins.font-size(20);
|
||||
@include mixins.line-height(24);
|
||||
margin: 0;
|
||||
padding: 32px 0 24px;
|
||||
text-transform: none;
|
||||
|
|
@ -32,8 +33,8 @@
|
|||
}
|
||||
|
||||
p {
|
||||
@include font-size(13);
|
||||
@include line-height(24);
|
||||
@include mixins.font-size(13);
|
||||
@include mixins.line-height(24);
|
||||
padding: 0 16px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
|
|
@ -42,21 +43,20 @@
|
|||
.card-footer {
|
||||
bottom: 0;
|
||||
box-sizing: border-box;
|
||||
@include line-height(48);
|
||||
@include mixins.line-height(48);
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
|
||||
a {
|
||||
@include font-size(13);
|
||||
@include mixins.font-size(13);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-section {
|
||||
@include card(auto, 90%);
|
||||
padding: 16px 32px;
|
||||
margin: 16px 0;
|
||||
display: flex;
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
|
||||
// Removes on-hover effect from card mixin
|
||||
&:hover {
|
||||
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
|
||||
box-shadow: 0 2px 2px rgba(constants.$black, 0.24), 0 0 2px rgba(constants.$black, 0.12);
|
||||
}
|
||||
|
||||
h1,
|
||||
|
|
|
|||
|
|
@ -1,29 +1,26 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
@use '../../constants';
|
||||
@import "~@angular/material/theming";
|
||||
|
||||
@mixin code-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
@mixin theme($theme) {
|
||||
$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;
|
||||
background-color: if($is-dark-theme, constants.$deepgray, rgb(constants.$backgroundgray, 0.2));
|
||||
border: 0.5px solid if($is-dark-theme, constants.$darkgray, constants.$lightgray);
|
||||
color: constants.$darkgray;
|
||||
}
|
||||
|
||||
// TERMINAL / SHELL TEXT STYLES
|
||||
&.code-shell,
|
||||
&[language="sh"],
|
||||
&[language="bash"] {
|
||||
background-color: $darkgray;
|
||||
background-color: constants.$darkgray;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: if($is-dark-theme, $blue-900, $accentblue);
|
||||
color: $offwhite;
|
||||
background-color: constants.$accentblue;
|
||||
color: constants.$offwhite;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -39,50 +36,50 @@
|
|||
|
||||
code-example.avoid header,
|
||||
code-example.avoidFile header {
|
||||
border: 2px solid $anti-pattern;
|
||||
background: $anti-pattern;
|
||||
border: 2px solid constants.$anti-pattern;
|
||||
background: constants.$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;
|
||||
border: 0.5px solid constants.$anti-pattern;
|
||||
}
|
||||
|
||||
aio-code {
|
||||
pre.prettyprint {
|
||||
code {
|
||||
ol.linenums {
|
||||
color: lighten($mediumgray, 25%);
|
||||
color: lighten(constants.$mediumgray, 25%);
|
||||
|
||||
li {
|
||||
&::marker {
|
||||
color: lighten($mediumgray, 25%);
|
||||
color: lighten(constants.$mediumgray, 25%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.code-missing {
|
||||
color: $darkred;
|
||||
color: constants.$darkred;
|
||||
}
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
color: $blue-grey-200;
|
||||
color: constants.$blue-grey-200;
|
||||
|
||||
&:hover {
|
||||
color: $mediumgray;
|
||||
color: constants.$mediumgray;
|
||||
}
|
||||
}
|
||||
|
||||
&.lang-sh,
|
||||
&.lang-bash {
|
||||
.copy-button {
|
||||
color: if($is-dark-theme, $blue-grey-200, $lightgray);
|
||||
color: if($is-dark-theme, constants.$blue-grey-200, constants.$lightgray);
|
||||
|
||||
&:hover {
|
||||
color: if($is-dark-theme, $blue-grey-300, $superlightgray);
|
||||
color: if($is-dark-theme, constants.$blue-grey-300, constants.$superlightgray);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -92,14 +89,14 @@
|
|||
.sidenav-content {
|
||||
code {
|
||||
a {
|
||||
color: if($is-dark-theme, $cyan, $darkblue);
|
||||
color: if($is-dark-theme, constants.$cyan, constants.$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);
|
||||
background-color: if($is-dark-theme, constants.$darkgray, rgba(constants.$lightgray, 0.5));
|
||||
color: if($is-dark-theme, constants.$white, constants.$darkgray);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -107,7 +104,7 @@
|
|||
// Dark Mode Code Palette
|
||||
$code-lightteal: #17d3ff;
|
||||
$code-lightred: #ffb0b0;
|
||||
$code-lightgreen: #a9ef5f;
|
||||
$code-lightgreen: #c3e88d;
|
||||
$code-lightpurple: #d1b4ff;
|
||||
$code-lightorange: #ffd779;
|
||||
$code-lightblue: #98caff;
|
||||
|
|
@ -119,7 +116,7 @@
|
|||
|
||||
/* SPAN elements with the classes below are added by prettyprint. */
|
||||
.pln {
|
||||
color: if($is-dark-theme, $white, #000);
|
||||
color: if($is-dark-theme, constants.$white, #000);
|
||||
} /* plain text */
|
||||
|
||||
@media screen {
|
||||
|
|
@ -219,7 +216,7 @@
|
|||
.lit,
|
||||
.pun,
|
||||
.dec {
|
||||
color: $codegreen;
|
||||
color: constants.$codegreen;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '../../constants';
|
||||
@use '../../mixins';
|
||||
|
||||
code-example,
|
||||
code-tabs {
|
||||
|
|
@ -42,7 +42,7 @@ code-example {
|
|||
|
||||
header {
|
||||
border-radius: 5px 5px 0 0;
|
||||
@include font-size(16);
|
||||
@include mixins.font-size(16);
|
||||
padding: 8px 16px;
|
||||
}
|
||||
}
|
||||
|
|
@ -81,7 +81,7 @@ aio-code {
|
|||
}
|
||||
|
||||
span {
|
||||
@include line-height(24);
|
||||
@include mixins.line-height(24);
|
||||
}
|
||||
|
||||
ol.linenums {
|
||||
|
|
@ -89,9 +89,9 @@ aio-code {
|
|||
|
||||
li {
|
||||
margin: 0;
|
||||
font-family: $code-font;
|
||||
font-family: constants.$code-font;
|
||||
font-size: 90%;
|
||||
@include line-height(24);
|
||||
@include mixins.line-height(24);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,29 +1,26 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
@use '../../constants';
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin contributor-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
@mixin theme($theme) {
|
||||
$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);
|
||||
background: rgba(constants.$darkgray, 0.5);
|
||||
|
||||
.info-item {
|
||||
color: $white;
|
||||
color: constants.$white;
|
||||
|
||||
&:hover {
|
||||
color: $lightgray;
|
||||
color: constants.$lightgray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contributor-image {
|
||||
border: 2px solid $lightgray;
|
||||
border: 2px solid constants.$lightgray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '../../mixins';
|
||||
|
||||
aio-contributor-list {
|
||||
.contributor-group {
|
||||
|
|
@ -58,7 +57,7 @@ aio-contributor {
|
|||
|
||||
.info-item {
|
||||
display: flex;
|
||||
@include font-size(14);
|
||||
@include mixins.font-size(14);
|
||||
font-weight: 500;
|
||||
margin: 8px;
|
||||
padding: 0;
|
||||
|
|
@ -128,8 +127,8 @@ aio-contributor {
|
|||
|
||||
p {
|
||||
margin: 8px 0;
|
||||
@include font-size(12);
|
||||
@include line-height(14);
|
||||
@include mixins.font-size(12);
|
||||
@include mixins.line-height(14);
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
|
@ -158,8 +157,8 @@ aio-contributor {
|
|||
|
||||
p {
|
||||
cursor: pointer;
|
||||
@include font-size(14);
|
||||
@include line-height(18);
|
||||
@include mixins.font-size(14);
|
||||
@include mixins.line-height(18);
|
||||
margin: 8px 16px;
|
||||
text-overflow: ellipsis;
|
||||
overflow-y: auto;
|
||||
|
|
|
|||
|
|
@ -1,14 +1,18 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '../../constants';
|
||||
@use '../../mixins';
|
||||
|
||||
aio-shell.mode-archive {
|
||||
@include deploy-theme($blue-grey-900, $blue-grey-400);
|
||||
}
|
||||
@mixin theme($theme) {
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
aio-shell.mode-next {
|
||||
@include deploy-theme($brightred, $darkred);
|
||||
}
|
||||
|
||||
aio-shell.mode-rc {
|
||||
@include deploy-theme($tangerine, $darkgoldenrod);
|
||||
}
|
||||
aio-shell.mode-archive {
|
||||
@include mixins.deploy-theme(constants.$blue-grey-900, constants.$blue-grey-400, if($is-dark-theme, constants.$powderblue, constants.$blue-grey-900));
|
||||
}
|
||||
|
||||
aio-shell.mode-next {
|
||||
@include mixins.deploy-theme(constants.$brightred, constants.$darkred, if($is-dark-theme, constants.$powderblue, constants.$brightred));
|
||||
}
|
||||
|
||||
aio-shell.mode-rc {
|
||||
@include mixins.deploy-theme(constants.$tangerine, constants.$darkgoldenrod, if($is-dark-theme, constants.$powderblue, constants.$tangerine));
|
||||
}
|
||||
}
|
||||
|
|
@ -1,17 +1,12 @@
|
|||
@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);
|
||||
@use '../../constants';
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin theme($theme) {
|
||||
details {
|
||||
box-shadow: 0 1px 4px 0 rgba($black, 0.37);
|
||||
box-shadow: 0 1px 4px 0 rgba(constants.$black, 0.37);
|
||||
|
||||
> summary {
|
||||
color: $black;
|
||||
color: constants.$black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '../../constants';
|
||||
@use '../../mixins';
|
||||
|
||||
/*
|
||||
* General styling to make detail/summary tags look a bit more material
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
details {
|
||||
> summary {
|
||||
cursor: pointer;
|
||||
@include font-size(16);
|
||||
@include mixins.font-size(16);
|
||||
position: relative;
|
||||
padding: 16px 24px;
|
||||
height: 16px;
|
||||
|
|
@ -31,10 +31,10 @@ details {
|
|||
|
||||
// Rotate the icon
|
||||
i.material-icons.expand {
|
||||
@include rotate(0deg);
|
||||
@include mixins.rotate(0deg);
|
||||
|
||||
@at-root #{selector-replace(&, 'details', 'details[open]')} {
|
||||
@include rotate(180deg);
|
||||
@include mixins.rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,32 +1,27 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
@use '../../constants';
|
||||
@import "~@angular/material/theming";
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
@mixin theme($theme) {
|
||||
.error-list {
|
||||
li {
|
||||
.symbol {
|
||||
&.runtime {
|
||||
background: constants.$green-500;
|
||||
}
|
||||
|
||||
&.compiler {
|
||||
background: constants.$blue-500;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: constants.$blue-grey-600;
|
||||
|
||||
&:hover {
|
||||
background: constants.$blue-grey-50;
|
||||
color: constants.$blue-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '../../mixins';
|
||||
|
||||
.error-list {
|
||||
display: grid;
|
||||
|
|
@ -12,9 +11,9 @@
|
|||
}
|
||||
|
||||
li {
|
||||
@include font-size(14);
|
||||
@include mixins.font-size(14);
|
||||
margin: 8px 0;
|
||||
@include line-height(14);
|
||||
@include mixins.line-height(14);
|
||||
padding: 0;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
|
|
@ -32,7 +31,7 @@
|
|||
|
||||
a {
|
||||
display: inline-block;
|
||||
@include line-height(16);
|
||||
@include mixins.line-height(16);
|
||||
padding: 0 16px 0;
|
||||
text-decoration: none;
|
||||
transition: all .3s;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '../../mixins';
|
||||
|
||||
// FEATURES MARKETING PAGE SPECIFIC STYLES
|
||||
|
||||
|
|
@ -16,7 +15,7 @@
|
|||
}
|
||||
|
||||
.feature-title {
|
||||
@include font-size(16);
|
||||
@include mixins.font-size(16);
|
||||
font-weight: 500;
|
||||
margin: 8px 0px;
|
||||
clear: both;
|
||||
|
|
|
|||
|
|
@ -1,24 +1,19 @@
|
|||
@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);
|
||||
@use '../../constants';
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin theme($theme) {
|
||||
.filetree {
|
||||
background: $white;
|
||||
border: 4px solid $lightgray;
|
||||
background: constants.$white;
|
||||
border: 4px solid constants.$lightgray;
|
||||
|
||||
.file {
|
||||
color: $darkgray;
|
||||
color: constants.$darkgray;
|
||||
}
|
||||
|
||||
.children {
|
||||
.file {
|
||||
&:before {
|
||||
border-color: $lightgray;
|
||||
border-color: constants.$lightgray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '../../mixins';
|
||||
|
||||
.filetree {
|
||||
border-radius: 4px;
|
||||
|
|
@ -8,8 +7,8 @@
|
|||
|
||||
.file {
|
||||
display: block;
|
||||
@include letter-spacing(0.3);
|
||||
@include line-height(32);
|
||||
@include mixins.letter-spacing(0.3);
|
||||
@include mixins.line-height(32);
|
||||
}
|
||||
|
||||
.children {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,10 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
@use '../../constants';
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin guides-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
@mixin theme($theme) {
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
.reviewed {
|
||||
color: lighten($darkgray, 10);
|
||||
color: if($is-dark-theme, constants.$offwhite, lighten(constants.$darkgray, 10));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '../../mixins';
|
||||
|
||||
.reviewed {
|
||||
@include font-size(13);
|
||||
@include mixins.font-size(13);
|
||||
font-style: italic;
|
||||
text-align: right;
|
||||
}
|
||||
|
|
@ -1,12 +1,7 @@
|
|||
@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);
|
||||
@use '../../constants';
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin theme($theme) {
|
||||
.sidenav-content {
|
||||
h1,
|
||||
h2,
|
||||
|
|
@ -15,7 +10,7 @@
|
|||
h5,
|
||||
h6 {
|
||||
.header-link {
|
||||
color: $mediumgray;
|
||||
color: constants.$mediumgray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@use '../../constants' as *;
|
||||
|
||||
.sidenav-content {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,10 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
@use '../../constants';
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin hr-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
@mixin theme($theme) {
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
hr {
|
||||
background: if($is-dark-theme, $mediumgray, $lightgray);
|
||||
background: if($is-dark-theme, constants.$mediumgray, constants.$lightgray);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@use '../../constants' as *;
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
|
|
|
|||
|
|
@ -1,19 +1,16 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
@use '../../constants';
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin images-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
@mixin theme($theme) {
|
||||
$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);
|
||||
border: 1px solid if($is-dark-theme, constants.$darkgray, constants.$lightgray);
|
||||
background-color: if($is-dark-theme, constants.$deepgray, constants.$lightboxgray);
|
||||
|
||||
img {
|
||||
background-color: $white;
|
||||
background-color: constants.$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@use '../../constants' as *;
|
||||
|
||||
.content {
|
||||
img {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,27 +1,22 @@
|
|||
@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);
|
||||
@use '../../constants';
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin theme($theme) {
|
||||
.api-header label {
|
||||
color: $white;
|
||||
color: constants.$white;
|
||||
|
||||
&.api-status-label {
|
||||
background-color: $mediumgray;
|
||||
background-color: constants.$mediumgray;
|
||||
|
||||
&.deprecated, &.security, &.impure-pipe {
|
||||
background-color: $brightred;
|
||||
background-color: constants.$brightred;
|
||||
}
|
||||
}
|
||||
|
||||
&.api-type-label {
|
||||
background-color: $accentblue;
|
||||
background-color: constants.$accentblue;
|
||||
|
||||
@each $name, $symbol in $api-symbols {
|
||||
@each $name, $symbol in constants.$api-symbols {
|
||||
&.#{$name} {
|
||||
background: map-get($symbol, background);
|
||||
}
|
||||
|
|
@ -29,13 +24,13 @@
|
|||
}
|
||||
|
||||
&.page-label {
|
||||
background-color: $mist;
|
||||
color: $mediumgray;
|
||||
background-color: constants.$mist;
|
||||
color: constants.$mediumgray;
|
||||
}
|
||||
|
||||
&.property-type-label {
|
||||
background-color: $darkgray;
|
||||
color: $white;
|
||||
background-color: constants.$darkgray;
|
||||
color: constants.$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '../../mixins';
|
||||
|
||||
.api-header label {
|
||||
border-radius: 4px;
|
||||
padding: 2px 10px;
|
||||
display: inline;
|
||||
@include font-size(12);
|
||||
@include mixins.font-size(12);
|
||||
margin-right: 8px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -29,7 +28,7 @@
|
|||
}
|
||||
|
||||
&.property-type-label {
|
||||
@include font-size(12);
|
||||
@include mixins.font-size(12);
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,19 @@
|
|||
@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);
|
||||
@use '../../constants';
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin theme($theme) {
|
||||
aio-notification {
|
||||
background: $darkgray;
|
||||
background: constants.$darkgray;
|
||||
|
||||
.close-button {
|
||||
background: $darkgray;
|
||||
background: constants.$darkgray;
|
||||
}
|
||||
|
||||
.content {
|
||||
background: $darkgray;
|
||||
background: constants.$darkgray;
|
||||
|
||||
.action-button {
|
||||
background: $brightred;
|
||||
background: constants.$brightred;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '../../mixins';
|
||||
|
||||
$notificationHeight: 56px;
|
||||
|
||||
|
|
@ -57,7 +56,7 @@ aio-notification {
|
|||
border-radius: 15px;
|
||||
text-transform: uppercase;
|
||||
padding: 0 10px;
|
||||
@include font-size(12);
|
||||
@include mixins.font-size(12);
|
||||
@media (max-width: 780px) {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -91,7 +90,7 @@ aio-notification {
|
|||
}
|
||||
}
|
||||
|
||||
@include marketing-pages {
|
||||
@include mixins.marketing-pages {
|
||||
&.aio-notification-show {
|
||||
mat-sidenav-container.sidenav-container {
|
||||
.sidenav-content {
|
||||
|
|
|
|||
|
|
@ -1,26 +1,24 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
@use '../../constants';
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin presskit-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
@mixin theme($theme) {
|
||||
$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;
|
||||
border-top: 1px solid constants.$lightgray;
|
||||
}
|
||||
|
||||
.presskit-icon-group {
|
||||
.presskit-icon-item {
|
||||
.presskit-image-container {
|
||||
.transparent-img {
|
||||
background-color: $white;
|
||||
background-color: constants.$white;
|
||||
|
||||
&-inverse {
|
||||
background-color: if($is-dark-theme, mat-color($background, background), $deepgray);
|
||||
background-color: if($is-dark-theme, mat-color($background, background), constants.$deepgray);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '../../mixins';
|
||||
|
||||
.presskit-container {
|
||||
padding: 0 32px 32px 32px;
|
||||
|
|
@ -40,7 +39,7 @@
|
|||
margin-right: 0;
|
||||
}
|
||||
|
||||
.transparent-img {
|
||||
.transparent-img, .transparent-img-inverse {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
|
@ -57,7 +56,7 @@
|
|||
&::after {
|
||||
content: "cloud_download";
|
||||
font-family: "Material Icons";
|
||||
@include font-size(24);
|
||||
@include mixins.font-size(24);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,22 +1,19 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
@use '../../constants';
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin resources-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
@mixin theme($theme) {
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
aio-resource-list {
|
||||
.subcategory-title {
|
||||
background-color: if($is-dark-theme, $deepgray, $mist);
|
||||
background-color: if($is-dark-theme, constants.$deepgray, constants.$mist);
|
||||
}
|
||||
|
||||
.resource-row-link {
|
||||
background-color: if($is-dark-theme, $darkgray, $white);
|
||||
background-color: if($is-dark-theme, constants.$darkgray, constants.$white);
|
||||
|
||||
&:hover {
|
||||
border-color: if($is-dark-theme, rgba($lightblue, 0.5), rgba($blue, 0.5));
|
||||
border-color: if($is-dark-theme, rgba(constants.$lightblue, 0.5), rgba(constants.$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,10 +1,10 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '../../constants';
|
||||
@use '../../mixins';
|
||||
|
||||
aio-resource-list {
|
||||
.showcase {
|
||||
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 1px 4px 0 rgba($black, 0.37);
|
||||
box-shadow: 0 1px 4px 0 rgba(constants.$black, 0.37);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px * 6;
|
||||
}
|
||||
|
|
@ -12,7 +12,7 @@ aio-resource-list {
|
|||
.resource-item {
|
||||
h4 {
|
||||
margin: 0;
|
||||
@include line-height(24);
|
||||
@include mixins.line-height(24);
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
|
|||
|
|
@ -1,39 +1,37 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
@use '../../constants';
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin search-results-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$background: map-get($theme, background);
|
||||
@mixin theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
aio-search-results {
|
||||
.search-results {
|
||||
background-color: $darkgray;
|
||||
background-color: constants.$darkgray;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
|
||||
|
||||
.search-area {
|
||||
.search-section-header {
|
||||
color: $white;
|
||||
color: constants.$white;
|
||||
}
|
||||
|
||||
ul {
|
||||
.search-result-item {
|
||||
color: $lightgray;
|
||||
color: if($is-dark-theme, constants.$offwhite , constants.$lightgray);
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
color: constants.$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-results {
|
||||
color: $white;
|
||||
color: mat-color($foreground, text);
|
||||
}
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
color: mat-color($foreground, text);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -41,24 +39,24 @@
|
|||
.search-results {
|
||||
.search-area {
|
||||
.search-section-header {
|
||||
color: $darkgray;
|
||||
color: constants.$darkgray;
|
||||
}
|
||||
|
||||
.search-result-item {
|
||||
color: lighten($darkgray, 10);
|
||||
color: if($is-dark-theme, constants.$offwhite ,lighten(constants.$darkgray, 10));
|
||||
|
||||
&:hover {
|
||||
color: $accentblue;
|
||||
color: constants.$accentblue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-results {
|
||||
color: $darkgray;
|
||||
color: mat-color($foreground, text);
|
||||
}
|
||||
|
||||
a {
|
||||
color: $blue;
|
||||
color: constants.$blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '../../mixins';
|
||||
|
||||
aio-search-results {
|
||||
z-index: 10;
|
||||
|
|
@ -24,7 +23,7 @@ aio-search-results {
|
|||
padding: 16px;
|
||||
|
||||
.search-section-header {
|
||||
@include font-size(16);
|
||||
@include mixins.font-size(16);
|
||||
font-weight: 400;
|
||||
margin: 10px 0px 5px;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -39,8 +38,8 @@ aio-search-results {
|
|||
}
|
||||
|
||||
.search-result-item {
|
||||
@include font-size(14);
|
||||
@include line-height(24);
|
||||
@include mixins.font-size(14);
|
||||
@include mixins.line-height(24);
|
||||
display: inline-block;
|
||||
font-weight: normal;
|
||||
padding: 0.6rem 0;
|
||||
|
|
|
|||
|
|
@ -1,22 +1,20 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
@use '../../constants';
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin select-menu-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
@mixin theme($theme) {
|
||||
$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);
|
||||
background: if($is-dark-theme, constants.$darkgray, constants.$white);
|
||||
box-shadow: 0 2px 2px rgba(constants.$black, 0.24), 0 0 2px rgba(constants.$black, 0.12);
|
||||
border: 1px solid if($is-dark-theme, constants.$darkgray, constants.$white);
|
||||
color: if($is-dark-theme, constants.$blue-grey-200, constants.$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);
|
||||
border: 1px solid constants.$blue-400;
|
||||
box-shadow: 0 2px 2px rgba(constants.$blue-400, 0.24), 0 0 2px rgba(constants.$blue-400, 0.12);
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
|
|
@ -26,16 +24,16 @@
|
|||
|
||||
.form-select-dropdown {
|
||||
background: mat-color($background, background);
|
||||
box-shadow: 0 16px 16px rgba($black, 0.24), 0 0 16px rgba($black, 0.12);
|
||||
box-shadow: 0 16px 16px rgba(constants.$black, 0.24), 0 0 16px rgba(constants.$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);
|
||||
background-color: if($is-dark-theme, constants.$darkgray, constants.$blue-grey-50);
|
||||
color: f($is-dark-theme, constants.$blue-grey-400, constants.$blue-grey-500);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background-color: if($is-dark-theme, $darkgray, $blue-grey-100);
|
||||
background-color: if($is-dark-theme, constants.$darkgray, constants.$blue-grey-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '../../constants';
|
||||
@use '../../mixins';
|
||||
|
||||
/* SELECT MENU */
|
||||
|
||||
|
|
@ -11,9 +11,9 @@ aio-select {
|
|||
.form-select-button {
|
||||
box-sizing: border-box;
|
||||
border-radius: 4px;
|
||||
@include font-size(14);
|
||||
@include mixins.font-size(14);
|
||||
font-weight: 400;
|
||||
@include line-height(32);
|
||||
@include mixins.line-height(32);
|
||||
outline: none;
|
||||
padding: 4px 16px;
|
||||
text-align: left;
|
||||
|
|
@ -42,12 +42,12 @@ aio-select {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: $layer-2;
|
||||
z-index: constants.$layer-2;
|
||||
|
||||
li {
|
||||
cursor: pointer;
|
||||
@include font-size(14);
|
||||
@include line-height(32);
|
||||
@include mixins.font-size(14);
|
||||
@include mixins.line-height(32);
|
||||
margin: 0;
|
||||
padding: 4px 16px 4px 40px;
|
||||
position: relative;
|
||||
|
|
@ -66,7 +66,7 @@ aio-select {
|
|||
left: 16px;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
z-index: $layer-5;
|
||||
z-index: constants.$layer-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,42 +1,40 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
@use '../../constants';
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin table-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
@mixin theme($theme) {
|
||||
$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);
|
||||
box-shadow: 0 2px 2px rgba(constants.$mediumgray, 0.24), 0 0 2px rgba(if($is-dark-theme, constants.$white, constants.$black), 0.12);
|
||||
background-color: if($is-dark-theme, mat-color($background, background), constants.$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);
|
||||
background: if($is-dark-theme, constants.$deepgray, rgba(constants.$lightgray, 0.2));
|
||||
border-bottom: 1px solid if($is-dark-theme, constants.$darkgray, constants.$lightgray);
|
||||
color: if($is-dark-theme, constants.$white, constants.$darkgray);
|
||||
}
|
||||
}
|
||||
|
||||
tbody > tr > {
|
||||
th,
|
||||
td {
|
||||
border-bottom: 1px solid if($is-dark-theme, $darkgray, $lightgray);
|
||||
border-bottom: 1px solid if($is-dark-theme, constants.$darkgray, constants.$lightgray);
|
||||
}
|
||||
|
||||
td {
|
||||
tr td:first-child {
|
||||
@media (max-width: 480px) {
|
||||
background-color: $lightgray;
|
||||
background-color: constants.$lightgray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
background: if($is-dark-theme, $deepgray, rgba($lightgray, 0.2));
|
||||
background: if($is-dark-theme, constants.$deepgray, rgba(constants.$lightgray, 0.2));
|
||||
&:not(:last-child) {
|
||||
border-right: 1px solid if($is-dark-theme, $darkgray, $lightgray);
|
||||
border-right: 1px solid if($is-dark-theme, constants.$darkgray, constants.$lightgray);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -44,7 +42,7 @@
|
|||
tbody > tr {
|
||||
&:last-child td {
|
||||
@media (max-width: 480px) {
|
||||
border-bottom: 1px solid if($is-dark-theme, $deepgray, $lightgray);
|
||||
border-bottom: 1px solid if($is-dark-theme, constants.$deepgray, constants.$lightgray);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '../../mixins';
|
||||
|
||||
table {
|
||||
margin: 24px 0px;
|
||||
|
|
@ -23,12 +22,12 @@ table {
|
|||
}
|
||||
|
||||
tr > th {
|
||||
@include font-size(12);
|
||||
@include mixins.font-size(12);
|
||||
font-weight: 500;
|
||||
padding: 8px 24px;
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
@include line-height(28);
|
||||
@include mixins.line-height(28);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -37,7 +36,7 @@ table {
|
|||
td {
|
||||
padding: 16px;
|
||||
text-align: left;
|
||||
@include line-height(24);
|
||||
@include mixins.line-height(24);
|
||||
vertical-align: top;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
|
|
@ -50,7 +49,7 @@ table {
|
|||
}
|
||||
|
||||
td {
|
||||
@include letter-spacing(0.3);
|
||||
@include mixins.letter-spacing(0.3);
|
||||
}
|
||||
|
||||
th {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,7 @@
|
|||
@use '../../constants' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
@use '../../constants';
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
@mixin toc-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$background: map-get($theme, background);
|
||||
@mixin theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
|
|
@ -12,7 +10,7 @@
|
|||
.toc-heading {
|
||||
&.secondary {
|
||||
&:hover {
|
||||
color: $accentblue;
|
||||
color: constants.$accentblue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -21,22 +19,22 @@
|
|||
&.toc-heading,
|
||||
&.toc-more-items {
|
||||
&.embedded:focus {
|
||||
background: if($is-dark-theme, $darkgray, $lightgray);
|
||||
color: if($is-dark-theme, $white, $mediumgray);
|
||||
background: if($is-dark-theme, constants.$darkgray, constants.$lightgray);
|
||||
color: if($is-dark-theme, constants.$white, constants.$mediumgray);
|
||||
}
|
||||
}
|
||||
|
||||
&.toc-heading {
|
||||
&:hover:not(.embedded) {
|
||||
color: $accentblue;
|
||||
color: constants.$accentblue;
|
||||
}
|
||||
}
|
||||
|
||||
&.toc-more-items {
|
||||
color: $mediumgray;
|
||||
color: if($is-dark-theme, constants.$lightgray, constants.$mediumgray);
|
||||
|
||||
&:hover {
|
||||
color: $accentblue;
|
||||
color: constants.$accentblue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -44,38 +42,38 @@
|
|||
ul.toc-list {
|
||||
li {
|
||||
&.h1:after {
|
||||
background: if($is-dark-theme, $mediumgray, $lightgray);
|
||||
background: if($is-dark-theme, constants.$mediumgray, constants.$lightgray);
|
||||
}
|
||||
|
||||
a {
|
||||
color: if($is-dark-theme, $white, lighten($darkgray, 10));
|
||||
color: if($is-dark-theme, constants.$white, lighten(constants.$darkgray, 10));
|
||||
}
|
||||
|
||||
&:hover {
|
||||
* {
|
||||
color: if($is-dark-theme, $lightblue, $accentblue);
|
||||
color: if($is-dark-theme, constants.$lightblue, constants.$accentblue);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
* {
|
||||
color: if($is-dark-theme, $cyan, $blue);
|
||||
color: if($is-dark-theme, constants.$cyan, constants.$blue);
|
||||
}
|
||||
|
||||
a:before {
|
||||
background: if($is-dark-theme, $cyan, $blue);
|
||||
background: if($is-dark-theme, constants.$cyan, constants.$blue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.embedded) li {
|
||||
&:before {
|
||||
border-left-color: if($is-dark-theme, $darkgray, $lightgray);
|
||||
border-left-color: if($is-dark-theme, constants.$darkgray, constants.$lightgray);
|
||||
}
|
||||
|
||||
&:not(.active):hover {
|
||||
a:before {
|
||||
background: $lightgray;
|
||||
background: constants.$lightgray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
@use '../../constants' as *;
|
||||
@use '../../mixins' as *;
|
||||
@use '../../mixins';
|
||||
|
||||
$tocItemLineHeight: 24;
|
||||
$tocItemTopPadding: 9;
|
||||
$tocMarkerSize: 6;
|
||||
$tocMarkerRailSize: 1;
|
||||
$tocMarkerSize: 6;
|
||||
|
||||
@mixin tocMarker() {
|
||||
border-radius: 50%;
|
||||
|
|
@ -29,13 +28,13 @@ $tocMarkerRailSize: 1;
|
|||
|
||||
aio-toc {
|
||||
.toc-inner {
|
||||
@include font-size(13);
|
||||
@include mixins.font-size(13);
|
||||
overflow-y: visible;
|
||||
padding: 4px 0 0 10px;
|
||||
|
||||
.toc-heading,
|
||||
.toc-list .h1 {
|
||||
@include font-size(16);
|
||||
@include mixins.font-size(16);
|
||||
}
|
||||
|
||||
.toc-heading {
|
||||
|
|
@ -92,11 +91,11 @@ aio-toc {
|
|||
|
||||
.mat-icon {
|
||||
&.collapsed {
|
||||
@include rotate(0deg);
|
||||
@include mixins.rotate(0deg);
|
||||
}
|
||||
|
||||
&:not(.collapsed) {
|
||||
@include rotate(90deg);
|
||||
@include mixins.rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -111,7 +110,7 @@ aio-toc {
|
|||
|
||||
li {
|
||||
box-sizing: border-box;
|
||||
@include line-height($tocItemLineHeight);
|
||||
@include mixins.line-height($tocItemLineHeight);
|
||||
padding: #{$tocItemTopPadding}px 0 #{$tocItemTopPadding}px 12px;
|
||||
position: relative;
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
|
@ -131,7 +130,7 @@ aio-toc {
|
|||
|
||||
a {
|
||||
overflow: visible;
|
||||
@include font-size(14);
|
||||
@include mixins.font-size(14);
|
||||
line-height: inherit;
|
||||
display: table-cell;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
@use '0-base/typography-theme' as *;
|
||||
@use '1-layouts/theme' as *;
|
||||
@use '2-modules/theme' as *;
|
||||
@use '0-base/typography-theme';
|
||||
@use '1-layouts/theme' as layout-themes;
|
||||
@use '2-modules/theme' as module-themes;
|
||||
|
||||
@mixin app-theme($theme) {
|
||||
@include typography-theme($theme);
|
||||
@include layout-themes($theme);
|
||||
@include module-themes($theme);
|
||||
@mixin theme($theme) {
|
||||
@include typography-theme.theme($theme);
|
||||
@include layout-themes.theme($theme);
|
||||
@include module-themes.theme($theme);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,12 @@ $layer-4: 4;
|
|||
$layer-5: 5;
|
||||
|
||||
// COLOR PALETTE
|
||||
$cyan: #39d0ff;
|
||||
$powderblue: #bae0ff;
|
||||
$lightblue: #7fc9ff;
|
||||
$blue: #1976D2;
|
||||
$warmblue: #7491ff;
|
||||
$coldblue: #8ccade;
|
||||
$darkblue: #1669bb;
|
||||
$accentblue: #1E88E5;
|
||||
$brightred: #DD0031;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@use './constants' as *;
|
||||
@use './constants';
|
||||
|
||||
// REM Font Adjustments
|
||||
@mixin font-size($sizeValue) {
|
||||
|
|
@ -41,39 +41,38 @@
|
|||
border-radius: 5px;
|
||||
padding: 20px;
|
||||
margin: 0 auto; // was 24
|
||||
border: 0.5px solid $lightgray;
|
||||
border: 0.5px solid constants.$lightgray;
|
||||
}
|
||||
|
||||
// INFO CARD SKELETON
|
||||
@mixin card($height, $width) {
|
||||
height: $height;
|
||||
width: $width;
|
||||
background-color: $white;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
|
||||
box-shadow: 0 2px 2px rgba(constants.$black, 0.24), 0 0 2px rgba(constants.$black, 0.12);
|
||||
box-sizing: border-box;
|
||||
transition: box-shadow .5s;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 8px 8px rgba($black, 0.24), 0 0 8px rgba($black, 0.12);
|
||||
box-shadow: 0 8px 8px rgba(constants.$black, 0.24), 0 0 8px rgba(constants.$black, 0.12);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin deploy-theme($mainColor, $gradientTargetColor) {
|
||||
@mixin deploy-theme($mainColor, $gradientTargetColor, $textColor) {
|
||||
.mat-toolbar.mat-primary, footer {
|
||||
background: linear-gradient(145deg, $mainColor, $gradientTargetColor);
|
||||
}
|
||||
|
||||
.vertical-menu-item {
|
||||
&.selected, &:hover {
|
||||
color: $mainColor;
|
||||
color: $textColor;
|
||||
}
|
||||
}
|
||||
|
||||
.toc-inner ul.toc-list li {
|
||||
&.active a {
|
||||
color: $mainColor;
|
||||
color: $textColor;
|
||||
|
||||
&:before {
|
||||
background-color: $mainColor;
|
||||
|
|
@ -81,7 +80,7 @@
|
|||
}
|
||||
|
||||
&:hover a {
|
||||
color: $mainColor;
|
||||
color: $textColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@use './constants' as *;
|
||||
@use './constants';
|
||||
|
||||
@media print {
|
||||
// General Adjustments
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
h1 {
|
||||
height: 40px !important;
|
||||
color: $darkgray !important;
|
||||
color: constants.$darkgray !important;
|
||||
}
|
||||
|
||||
h1,
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
}
|
||||
|
||||
table tbody tr:last-child td {
|
||||
border-bottom: 1px solid $lightgray !important;
|
||||
border-bottom: 1px solid constants.$lightgray !important;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
p > code,
|
||||
li > code,
|
||||
table code {
|
||||
color: $blue !important;
|
||||
color: constants.$blue !important;
|
||||
}
|
||||
|
||||
// No Print Class
|
||||
|
|
@ -104,19 +104,19 @@
|
|||
.lit,
|
||||
.pun,
|
||||
.dec {
|
||||
color: $darkgray;
|
||||
color: constants.$darkgray;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
background: none;
|
||||
border: 0.5px solid $lightgray;
|
||||
color: $darkgray;
|
||||
border: 0.5px solid constants.$lightgray;
|
||||
color: constants.$darkgray;
|
||||
}
|
||||
}
|
||||
|
||||
.content code {
|
||||
border: 0.5px solid $lightgray;
|
||||
border: 0.5px solid constants.$lightgray;
|
||||
}
|
||||
|
||||
.mat-tab-labels {
|
||||
|
|
@ -132,7 +132,7 @@
|
|||
}
|
||||
|
||||
.api-header label {
|
||||
color: $darkgray !important;
|
||||
color: constants.$darkgray !important;
|
||||
font-weight: bold !important;
|
||||
margin: 2px !important;
|
||||
padding: 0 !important;
|
||||
|
|
|
|||
|
|
@ -2,9 +2,6 @@
|
|||
|
||||
@mixin docs-site-typography-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$warn: map-get($theme, warn);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
.docs-component-viewer-tabbed-content,
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
@use '../app-theme' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
@use '../app-theme';
|
||||
@import "~@angular/material/theming";
|
||||
|
||||
$ng-io-primary: mat-palette($mat-blue, 700, 600, 800);
|
||||
$ng-io-primary: mat-palette($mat-blue, 700, 600, 900);
|
||||
$ng-io-accent: mat-palette($mat-red, 700, 600, 800);
|
||||
$ng-io-warn: mat-palette($mat-red);
|
||||
$ng-io-theme: mat-dark-theme($ng-io-primary, $ng-io-accent, $ng-io-warn);
|
||||
|
||||
@include angular-material-theme($ng-io-theme);
|
||||
@include app-theme($ng-io-theme);
|
||||
@include app-theme.theme($ng-io-theme);
|
||||
|
|
@ -1,9 +1,10 @@
|
|||
@use '../app-theme' as *;
|
||||
@use '~@angular/material/theming' as *;
|
||||
@use '../app-theme';
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
$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);
|
||||
|
||||
// We don't have to call theme mixins here because light.scss is used by default in ng-io-theme.scss
|
||||
@include angular-material-theme($ng-io-theme);
|
||||
@include app-theme.theme($ng-io-theme);
|
||||
|
|
@ -1,5 +1,3 @@
|
|||
@use './ng-io-theme.scss';
|
||||
|
||||
// import directories
|
||||
@use './0-base' as base;
|
||||
@use './1-layouts' as layouts;
|
||||
|
|
@ -7,3 +5,9 @@
|
|||
|
||||
// import print styles
|
||||
@use './print';
|
||||
|
||||
@import '~@angular/material/theming';
|
||||
|
||||
// Include the base styles for Angular Material core. We include this here so that you only
|
||||
// have to load a single css file for Angular Material in your app.
|
||||
@include mat-core();
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
@use '~@angular/material/theming' as *;
|
||||
@import 'app-theme';
|
||||
// Plus imports for other components in your app.
|
||||
|
||||
// Include the base styles for Angular Material core. We include this here so that you only
|
||||
// have to load a single css file for Angular Material in your app.
|
||||
@include mat-core();
|
||||
|
||||
@include angular-material-theme(light.$ng-io-theme);
|
||||
@include app-theme(light.$ng-io-theme);
|
||||
|
|
@ -2,8 +2,8 @@
|
|||
"aio": {
|
||||
"master": {
|
||||
"uncompressed": {
|
||||
"runtime-es2015": 4538,
|
||||
"main-es2015": 451314,
|
||||
"runtime-es2015": 4619,
|
||||
"main-es2015": 453172,
|
||||
"polyfills-es2015": 55210
|
||||
}
|
||||
}
|
||||
|
|
@ -11,8 +11,8 @@
|
|||
"aio-local": {
|
||||
"master": {
|
||||
"uncompressed": {
|
||||
"runtime-es2015": 4538,
|
||||
"main-es2015": 451493,
|
||||
"runtime-es2015": 4619,
|
||||
"main-es2015": 453394,
|
||||
"polyfills-es2015": 55291
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue