mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
563bc386b2
Guide heading need different scroll offsets depending on the width of the screen. (The menu position varies). PR Close #64144
95 lines
2.5 KiB
SCSS
95 lines
2.5 KiB
SCSS
// TODO: Continue organizing and refactoring this file
|
|
@use '@angular/material' as mat;
|
|
@use '@angular/cdk';
|
|
|
|
// Using disable-next-line to avoid stylelint errors - these imports are necessary
|
|
// TODO: Is there another way to prevent these linting errors?
|
|
// stylelint-disable-next-line @angular/no-unused-import
|
|
@use '_colors';
|
|
// stylelint-disable-next-line @angular/no-unused-import
|
|
@use '_z-index';
|
|
|
|
// Global
|
|
@use 'resets';
|
|
@use 'typography';
|
|
@use 'scroll-track';
|
|
@use 'button';
|
|
@use 'kbd';
|
|
@use 'api-item-label';
|
|
@use 'faceted-list';
|
|
@use 'media-queries' as mq;
|
|
|
|
// Docs
|
|
@use 'docs/alert';
|
|
@use 'docs/callout';
|
|
@use 'docs/card';
|
|
@use 'docs/code';
|
|
@use 'docs/decorative-header';
|
|
@use 'docs/icon';
|
|
@use 'docs/pill';
|
|
@use 'docs/steps';
|
|
@use 'docs/table';
|
|
@use 'docs/video';
|
|
@use 'docs/mermaid';
|
|
|
|
// Global
|
|
@include resets.resets();
|
|
@include typography.typography();
|
|
@include scroll-track.scroll-track();
|
|
@include button.button();
|
|
@include kbd.kbd();
|
|
@include api-item-label.api-item-label();
|
|
@include faceted-list.faceted-list();
|
|
|
|
@include mq.breakpoints-vars();
|
|
@include mq.for-phone-only();
|
|
@include mq.for-tablet-portrait-up();
|
|
@include mq.for-tablet-landscape-up();
|
|
@include mq.for-desktop-up();
|
|
@include mq.for-extra-large-desktop-up();
|
|
@include mq.for-tablet-landscape-down();
|
|
|
|
// temporary just to show different options of code component UI.
|
|
$primary: mat.m2-define-palette(mat.$m2-indigo-palette);
|
|
$accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
|
|
$theme: mat.m2-define-light-theme(
|
|
(
|
|
color: (
|
|
primary: $primary,
|
|
accent: $accent,
|
|
),
|
|
typography: mat.m2-define-typography-config(),
|
|
)
|
|
);
|
|
|
|
// Include material core styles.
|
|
@include cdk.a11y-visually-hidden();
|
|
@include mat.tabs-theme($theme);
|
|
@include mat.button-toggle-theme($theme);
|
|
@include mat.tooltip-theme($theme);
|
|
|
|
// Include custom docs styles
|
|
@include alert.docs-alert();
|
|
@include callout.docs-callout();
|
|
@include card.docs-card();
|
|
@include code.docs-theme();
|
|
@include code.docs-code-block();
|
|
@include code.docs-code-editor();
|
|
@include code.docs-syntax-highlighting();
|
|
@include decorative-header.docs-decorative-header();
|
|
@include icon.docs-icon();
|
|
@include pill.docs-pill();
|
|
@include steps.docs-steps();
|
|
@include table.docs-table();
|
|
@include video.docs-video();
|
|
|
|
// Include custom angular.dev styles
|
|
|
|
// Disable view transitions when reduced motion is requested.
|
|
@media (prefers-reduced-motion) {
|
|
::view-transition-group(*),
|
|
::view-transition-old(*),
|
|
::view-transition-new(*) {
|
|
animation: none !important;
|
|
}
|
|
}
|