src/dev-app/theme/theme-demo.scss - main - githubmirror/components

src/dev-app/theme/theme-demo.scss
196 строк4 KB
Andrew Seguin
refactor: simplify component styles by removing use-tokens (#31146)
21 май 2025, 03:10
21 май 2025, 03:107b5d88b
@use '@angular/material' as mat;

:host {
  display: block;
  max-width: 1000px;
}

h1 {
  font: var(--mat-sys-title-large);
  font-size: 28px;
  padding-top: 32px;
}

h2 {
  font: var(--mat-sys-title-large);
}

a {
  color: var(--mat-sys-primary);
}

.demo-warn {
  background: var(--mat-sys-error-container);
  color: var(--mat-sys-on-error-container);
  border: 1px solid var(--mat-sys-outline-variant);
  border-radius: var(--mat-sys-corner-extra-small);
  padding: 8px;
}

.demo-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 24px;
  margin-top: 24px;
}

@media (max-width: 1000px) {
  .demo-group {  grid-template-columns: auto;}
}

.demo-color-container {
  border-radius: var(--mat-sys-corner-small);
  display: inline-block;
  font: var(--mat-sys-body-medium);
  vertical-align: top;
}

.demo-heading {
  color: var(--mat-sys-on-primary);
  background: var(--mat-sys-primary);
  border: 1px solid var(--mat-sys-outline);
  border-top-right-radius: var(--mat-sys-corner-small);
  border-top-left-radius: var(--mat-sys-corner-small);
  border-bottom: none;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.demo-name {
  font: var(--mat-sys-title-medium);
}

.demo-variable {
  font: var(--mat-sys-title-small);
  font-family: monospace;
  text-align: right;
}

.demo-description {
  border: 1px solid var(--mat-sys-outline);
  border-bottom-right-radius: var(--mat-sys-corner-small);
  border-bottom-left-radius: var(--mat-sys-corner-small);
  padding: 0 16px;
}

.demo-code {
  font-family: monospace;
}

.demo-surface-variable {
  display: inline-block;
  font-family: monospace;
  background: var(--mat-sys-primary-container);
  color: var(--mat-sys-on-primary-container);
  padding: 2px 6px;
  margin: 0 2px;
  border-radius: 4px;
}

mat-expansion-panel {
  margin-top: 24px;
  overflow: visible;
  @include mat.expansion-overrides((
    container-text-font: var(--mat-sys-body-medium-font),
    container-text-size: var(--mat-sys-body-medium-size),
    container-text-weight: var(--mat-sys-body-medium-weight),
    container-text-line-height: var(--mat-sys-body-medium-line-height),
    container-text-tracking: var(--mat-sys-body-medium-tracking),
  ));
}

.demo-compact-color-container {
  border-radius: var(--mat-sys-corner-small);
  border: 1px solid var(--mat-sys-outline);
  overflow: hidden; // Hide child heading background color
  margin-top: 24px;

  .demo-heading {
    border: none;
    border-radius: 0;

    &:not(:nth-child(1)) {
      border-top: 1px solid var(--mat-sys-outline);
    }
  }

  .demo-variables {
    text-align: end;
  }
}

.demo-typography-group {
  border: 1px solid var(--mat-sys-outline);
  border-radius: var(--mat-sys-corner-small);
  margin-top: 40px;
  overflow: hidden;
}

.demo-typography-title {
  text-transform: capitalize;
  font: var(--mat-sys-title-medium);
  padding: 16px;
  border-bottom: 1px solid var(--mat-sys-outline);
  background: var(--mat-sys-primary-container);
  color: var(--mat-sys-on-primary-container);
}

.demo-typography-variable {
  min-width: 240px;
}

.demo-typography-example {
  padding: 16px;
  display: flex;
  align-items: baseline;
  border-top: 1px solid var(--mat-sys-outline-variant);

  &:nth-child(1) {
    border: none;
  }
  .demo-surface-variable {
    margin-right: 16px;
  }
}

.demo-typography-text {
  display: inline-block;
}

.demo-elevation {
  height: 40px;
  width: 300px;
  margin: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mat-sys-surface-container);
  color: var(--mat-sys-on-surface);
  border-radius: var(--mat-sys-corner-extra-small);
}

.demo-code-block {
  background: var(--mat-sys-surface-container-low);
  padding: 16px;
  border-radius: var(--mat-sys-corner-small);
  border: 1px solid var(--mat-sys-outline);
}

.demo-overrides {
  background-color: var(--mat-sys-primary);
  color: var(--mat-sys-on-primary);
  font: var(--mat-sys-body-medium);
  border-radius: var(--mat-sys-corner-large);
  box-shadow: var(--mat-sys-level3);
  padding: 16px;

  @include mat.theme-overrides((
    primary: #ebdcff,
    on-primary: #230f46,
    body-medium: 600 1.5rem / 2.25rem Arial,
    corner-large: 32px,
    level3: 0 4px 6px 1px var(--mat-sys-surface-dim),
  ));
}