Skip to content

Commit b44111c

Browse files
crisbetocrisbeto
committed
build: enable style lint for docs site
Expands style linting to the docs site and resolves all the breakages.
1 parent da9627d commit b44111c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+459
-446
lines changed

‎.stylelintrc.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,7 @@
137137
],
138138
"linebreaks": "unix",
139139
"selector-class-pattern": [
140-
"^_?(mat-|cdk-|example-|demo-|ng-|mdc-|map-|test-|youtube-player-)",
140+
"^_?(mat-|cdk-|example-|demo-|ng-|mdc-|map-|test-|youtube-player-|docs-|scene-|hljs)",
141141
{
142142
"resolveNestedSelectors": true
143143
}

‎docs/scenes/src/app/scenes/core/core-scene.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<div class="core-icon">
1+
<div class="scene-core-icon">
22
<mat-icon>settings</mat-icon>
33
</div>

‎docs/scenes/src/app/scenes/core/core-scene.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.core-icon {
1+
.scene-core-icon {
22
display: flex;
33
transform: scale(3);
44
}

‎docs/scenes/src/app/scenes/datepicker/datepicker-scene.html

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
<div class="calendar-wrapper">
1+
<div class="docs-calendar-wrapper">
22
<mat-calendar
3-
class="calendar"
3+
class="docs-calendar"
44
[minDate]="minDate"
55
[maxDate]="maxDate"
6-
[selected]="selectedDate"
7-
>
6+
[selected]="selectedDate">
87
</mat-calendar>
98
</div>

‎docs/scenes/src/app/scenes/datepicker/datepicker-scene.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
.calendar {
1+
.docs-calendar {
22
margin-top: 140px;
33
background: rgba(white, 0.8);
44
}
55

6-
.calendar-wrapper {
6+
.docs-calendar-wrapper {
77
display: flex;
88

99
mat-calendar {

‎docs/scenes/src/app/scenes/grid-list/grid-list-scene.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,7 @@ app-grid-list-scene {
77
mat-grid-tile {
88
box-sizing: border-box;
99
padding: 3px;
10+
11+
// stylelint-disable-next-line material/no-prefixes
1012
background-clip: content-box !important;
1113
}

‎docs/scenes/src/app/scenes/icon/icon-scene.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<div class="docs-icon-scene-wrapper">
2-
<mat-icon class="docs-icon-scene-icon backup">backup</mat-icon>
3-
<mat-icon class="docs-icon-scene-icon cast">cast</mat-icon>
4-
<mat-icon class="docs-icon-scene-icon bug">bug_report</mat-icon>
2+
<mat-icon class="docs-icon-scene-icon scene-backup">backup</mat-icon>
3+
<mat-icon class="docs-icon-scene-icon scene-cast">cast</mat-icon>
4+
<mat-icon class="docs-icon-scene-icon scene-bug">bug_report</mat-icon>
55
</div>
66
<div class="docs-icon-scene-wrapper">
7-
<mat-icon class="docs-icon-scene-icon insights">insights</mat-icon>
8-
<mat-icon class="docs-icon-scene-icon pets">pets</mat-icon>
9-
<mat-icon class="docs-icon-scene-icon verified">verified</mat-icon>
7+
<mat-icon class="docs-icon-scene-icon scene-insights">insights</mat-icon>
8+
<mat-icon class="docs-icon-scene-icon scene-pets">pets</mat-icon>
9+
<mat-icon class="docs-icon-scene-icon scene-verified">verified</mat-icon>
1010
</div>

‎docs/scenes/src/app/scenes/icon/icon-scene.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,22 @@
22
margin: 5px;
33
}
44

5-
.backup {
5+
.scene-backup {
66
color: #c11;
77
}
88

9-
.cast {
9+
.scene-cast {
1010
color: #f77;
1111
}
1212

13-
.insights {
13+
.scene-insights {
1414
color: #e66;
1515
}
1616

17-
.pets {
17+
.scene-pets {
1818
color: #f11;
1919
}
2020

21-
.verified {
21+
.scene-verified {
2222
color: #d66;
2323
}

‎docs/scenes/src/app/scenes/input/input-scene.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
.scene-inputs {
66
margin-top: 15px;
77
width: 250px;
8-
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
8+
99
.mat-form-field-appearance-outline .mat-form-field-outline-thick {
1010
opacity: 0.5;
1111
}

‎docs/scenes/src/app/scenes/placeholder/placeholder-scene.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<div class="circle-big"></div>
2-
<div class="circle-small"></div>
3-
<div class="half-circle"></div>
1+
<div class="scene-circle-big"></div>
2+
<div class="scene-circle-small"></div>
3+
<div class="scene-half-circle"></div>

‎docs/scenes/src/app/scenes/placeholder/placeholder-scene.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.circle-big {
1+
.scene-circle-big {
22
position: absolute;
33
width: 140px;
44
height: 140px;
@@ -8,7 +8,7 @@
88
left: 50px;
99
}
1010

11-
.circle-small {
11+
.scene-circle-small {
1212
position: absolute;
1313
width: 70px;
1414
height: 70px;
@@ -17,7 +17,7 @@
1717
background: rgba(rosybrown, 0.5);
1818
}
1919

20-
.half-circle {
20+
.scene-half-circle {
2121
transform: rotate(145deg);
2222
position: absolute;
2323
left: 200px;

‎docs/scenes/src/app/scenes/ripples/ripples-scene.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@
22
matRipple
33
[matRippleDisabled]="true">
44
</div>
5-
<button mat-raised-button color="primary" id="scene-ripples-button" #button
5+
<button mat-raised-button color="primary" class="scene-ripples-button" #button
66
matRipple
77
[matRippleDisabled]="true">RIPPLES</button>

‎docs/scenes/src/app/scenes/ripples/ripples-scene.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,10 @@ button {
33
height: 60px;
44
}
55

6-
#scene-ripples-button {
6+
.scene-ripples-button {
77
overflow: hidden;
88
}
99

10-
/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
1110
.mat-button-wrapper {
1211
font-size: 18px;
1312
}

‎docs/scenes/src/app/scenes/slider/slider-scene.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
<div class="slider-row">
1+
<div class="scene-slider-row">
22
<mat-icon>volume_up</mat-icon>
33
<mat-slider min="0" max="100" discrete>
44
<input value="65" matSliderThumb>
55
</mat-slider>
66
</div>
7-
<div class="slider-row">
7+
<div class="scene-slider-row">
88
<mat-icon>brightness_low</mat-icon>
99
<mat-slider min="0" max="100" discrete>
1010
<input value="40" matSliderThumb>

‎docs/scenes/src/app/scenes/slider/slider-scene.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.slider-row {
1+
.scene-slider-row {
22
display: flex;
33
align-items: center;
44
}

‎docs/scenes/src/app/scenes/tooltip/tooltip-scene.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<div class="tooltip-container">
1+
<div class="scene-tooltip-container">
22
<button
3-
matTooltipClass="tooltip-popup"
3+
matTooltipClass="scene-tooltip-popup"
44
#tooltip="matTooltip"
55
mat-icon-button
66
matTooltip="Copy example source"

‎docs/scenes/src/app/scenes/tooltip/tooltip-scene.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
.tooltip-container {
1+
.scene-tooltip-container {
22
margin-top: -45px;
33
transform: scale(2);
44
}
55

6-
.tooltip-popup {
6+
.scene-tooltip-popup {
77
font-size: 18px;
88
margin-left: -8px;
99
}

‎docs/scenes/src/styles.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@use 'sass:map';
21
@use '@angular/material' as mat;
32

43
html {

‎docs/src/app/material-docs-app.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,15 @@ material-docs-app > app-component-sidenav {
1818
flex: 1;
1919
}
2020

21-
material-docs-app > router-outlet + .main-content,
21+
material-docs-app > router-outlet + .docs-main-content,
2222
material-docs-app > router-outlet + app-component-sidenav {
2323
margin-top: 56px;
2424
overflow-y: auto;
2525
-webkit-overflow-scrolling: touch;
2626
}
2727

2828
@media (max-width: constants.$extra-small-breakpoint-width) {
29-
material-docs-app > router-outlet + .main-content,
29+
material-docs-app > router-outlet + .docs-main-content,
3030
material-docs-app > router-outlet + app-component-sidenav {
3131
margin-top: 92px;
3232
overflow-y: visible;

‎docs/src/app/pages/component-category-list/component-category-list.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
}
3030

3131
.docs-component-category-list-card-title,
32-
.docs-component-category-list-card-summary {
32+
.docs-component-category-list-card-summary {
3333
color: var(--mat-sys-on-surface-variant);
3434
}
3535

‎docs/src/app/pages/component-sidenav/component-sidenav.scss

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,12 +49,12 @@ app-component-sidenav {
4949
}
5050

5151
&::-webkit-scrollbar-thumb {
52-
background: rgba(0, 0, 0, .26);
52+
background: rgba(0, 0, 0, 0.26);
5353
}
5454

5555
ul {
5656
list-style-type: none;
57-
margin: 0 0 5px 0;
57+
margin: 0 0 5px;
5858
padding: 0;
5959
overflow: hidden;
6060
}
@@ -89,7 +89,8 @@ div .mat-mdc-list-base {
8989
padding-top: 0;
9090
}
9191

92-
/* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version.*/
92+
// TODO(mdc-migration): The following rule targets internal
93+
// classes of list that may no longer apply for the MDC version.
9394
div.docs-component-viewer-nav-content .mat-nav-list .mat-mdc-list-item .mat-list-item-content {
9495
padding-left: 25px;
9596
}

‎docs/src/app/pages/component-viewer/token-table.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<div class="filters">
2-
<mat-form-field class="name-field" subscriptSizing="dynamic" appearance="outline">
1+
<div class="docs-filters">
2+
<mat-form-field class="docs-name-field" subscriptSizing="dynamic" appearance="outline">
33
<mat-label>Filter by name</mat-label>
44
<input
55
#nameInput
@@ -25,8 +25,8 @@
2525
<thead>
2626
<tr>
2727
<th>Name</th>
28-
<th class="type-header">Type</th>
29-
<th class="system-header">Based on system token</th>
28+
<th class="docs-type-header">Type</th>
29+
<th class="docs-system-header">Based on system token</th>
3030
</tr>
3131
</thead>
3232

‎docs/src/app/pages/component-viewer/token-table.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ thead {
1414
z-index: 1;
1515
}
1616

17-
.filters {
17+
.docs-filters {
1818
display: flex;
1919
align-items: center;
2020
margin: 24px 0;
@@ -23,15 +23,15 @@ thead {
2323
gap: 16px;
2424
}
2525

26-
.name-field {
26+
.docs-name-field {
2727
width: 380px;
2828
max-width: 100%;
2929
}
3030

31-
.type-header {
31+
.docs-type-header {
3232
width: 10%;
3333
}
3434

35-
.system-header {
35+
.docs-system-header {
3636
width: 30%;
3737
}

‎docs/src/app/pages/guide-list/guide-list.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import {MatRipple} from '@angular/material/core';
2121
styleUrls: ['./guide-list.scss'],
2222
imports: [NavigationFocus, RouterLink, MatCard, MatCardTitle, MatCardContent, Footer, MatRipple],
2323
host: {
24-
'class': 'main-content',
24+
'class': 'docs-main-content',
2525
},
2626
})
2727
export class GuideList implements OnInit {

‎docs/src/app/pages/guide-viewer/guide-viewer.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import {DocViewer} from '../../shared/doc-viewer/doc-viewer';
2222
styleUrls: ['./guide-viewer.scss'],
2323
imports: [DocViewer, NavigationFocus, TableOfContents, Footer],
2424
host: {
25-
'class': 'main-content',
25+
'class': 'docs-main-content',
2626
},
2727
})
2828
export class GuideViewer implements OnInit {

‎docs/src/app/pages/homepage/homepage.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ <h2>Featured components</h2>
5454
</div>
5555
<app-carousel [aria-label]="'Featured components'">
5656
@for (comp of getTopComponents(); track comp) {
57-
<a carousel-item class="carousel-item docs-featured-components-carousel-item"
57+
<a carousel-item class="docs-carousel-item docs-featured-components-carousel-item"
5858
routerLink="/components/{{comp}}">
5959
<div class="docs-homepage-img-container">
6060
<img alt="" src="../../../assets/screenshots/{{comp}}.scene.png" role="presentation">
@@ -78,7 +78,7 @@ <h2>Guides</h2>
7878
</div>
7979
<app-carousel aria-label="Guides">
8080
@for (guide of guideItems.getAllItems(); track guide) {
81-
<a carousel-item class="carousel-item docs-homepage-guides-carousel-item"
81+
<a carousel-item class="docs-carousel-item docs-homepage-guides-carousel-item"
8282
routerLink="/guide/{{guide.id}}"
8383
matRipple>
8484
<mat-card class="docs-homepage-guides-card" appearance="outlined">

‎docs/src/app/pages/homepage/homepage.scss

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ a.docs-link:hover {
5353
font-size: 20px;
5454
font-weight: 300;
5555
line-height: 28px;
56-
margin: 15px 0 25px 0;
56+
margin: 15px 0 25px;
5757
}
5858
}
5959

@@ -81,7 +81,7 @@ a.docs-link:hover {
8181
font-size: 16px;
8282
font-weight: 400;
8383
line-height: 28px;
84-
margin: 0 0 24px 0;
84+
margin: 0 0 24px;
8585
padding: 0;
8686
}
8787

@@ -94,7 +94,7 @@ a.docs-link:hover {
9494
}
9595
}
9696

97-
.carousel-item {
97+
.docs-carousel-item {
9898
width: 48%;
9999

100100
& + & {
@@ -181,7 +181,7 @@ a.docs-link:hover {
181181
transition: 0.3s ease-in-out;
182182
width: 100%;
183183

184-
:host(.animations-disabled) & {
184+
:host(.docs-animations-disabled) & {
185185
transition: none;
186186
}
187187
}
@@ -240,9 +240,7 @@ a.docs-link:hover {
240240
}
241241
}
242242

243-
/**
244-
* Rules for when the device is detected to be a small screen.
245-
*/
243+
// Rules for when the device is detected to be a small screen.
246244
@media (max-width: 720px) {
247245
.docs-header-start {
248246
margin: $margin-promotion-sections-small 0 0 0;

‎docs/src/app/pages/homepage/homepage.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,8 @@ const TOP_COMPONENTS = ['datepicker', 'input', 'slide-toggle', 'slider', 'button
4747
MatRipple,
4848
],
4949
host: {
50-
'class': 'main-content',
51-
'[class.animations-disabled]': 'animationsDisabled',
50+
'class': 'docs-main-content',
51+
'[class.docs-animations-disabled]': 'animationsDisabled',
5252
},
5353
})
5454
export class Homepage implements OnInit {

0 commit comments

Comments
 (0)