mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
Kam
d2c0e1ec77
The tutorial intro and "next steps" pages were plain headings with no send-off. Bookend each tutorial with Angie: a greeting pose welcoming learners on the intro page, and a superhero pose congratulating them on the completion page, each beside a speech bubble. The bubble treatment from the 404 page lived inside the not-found component, so it's extracted into a reusable docs-content style (docs-tutorial-mascot) usable from tutorial markdown, and applied to the intro and completion pages of the Learn Angular, Signals, and Signal Forms tutorials.
98 lines
2.6 KiB
SCSS
98 lines
2.6 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/tutorial-mascot';
|
|
@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 tutorial-mascot.docs-tutorial-mascot();
|
|
@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;
|
|
}
|
|
}
|