Skip to content

Commit 5bd5e8f

Browse files
mkszeppmkszepp
authored
Fix SCSS deprecations in docs (#1061)
* Fix SCSS deprecations in docs * Fix lint
1 parent 522a505 commit 5bd5e8f

14 files changed

Lines changed: 94 additions & 67 deletions

‎docs/app/styles/_base.scss‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use 'variables';
2+
13
* {
24
box-sizing: border-box;
35
}
@@ -16,7 +18,7 @@ html {
1618
}
1719

1820
body {
19-
color: $text-color;
21+
color: variables.$text-color;
2022
// position: relative; Styles to demo non 0,0 positioned container
2123
// margin-top: 60px;
2224
}
@@ -41,7 +43,7 @@ h6 {
4143
margin-bottom: 0.5rem;
4244
font-weight: bold;
4345
line-height: 1.25;
44-
color: $headings-text-color;
46+
color: variables.$headings-text-color;
4547
text-rendering: optimizeLegibility;
4648
}
4749
h1 {
@@ -109,7 +111,7 @@ pre {
109111
font-family: Menlo, Monaco, 'Courier New', monospace;
110112
}
111113
code {
112-
color: $code-text-color;
114+
color: variables.$code-text-color;
113115
padding: 0.2em 0;
114116
margin: 0;
115117
font-size: 75%;
@@ -123,7 +125,7 @@ code {
123125
}
124126
}
125127
pre {
126-
max-width: calc(100vw - #{2 * $wrapper-padding});
128+
max-width: calc(100vw - #{2 * variables.$wrapper-padding});
127129
display: block;
128130
margin-top: 0;
129131
margin-bottom: 1rem;

‎docs/app/styles/_brandification.scss‎

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1+
@use 'sass:color';
2+
@use 'docs/code-example';
3+
@use 'variables';
4+
15
/* more styles in brandification */
26
@mixin brandify($brand-color, $brand-color-brighter) {
37
a {
48
color: $brand-color;
59
}
6-
@include ember-code-example($brand-color);
10+
@include code-example.ember-code-example($brand-color);
711

812
.doc-page-nav-link-next,
913
.doc-page-nav-link-prev {
@@ -21,10 +25,10 @@
2125

2226
.contribute-call-to-action a {
2327
background-color: $brand-color;
24-
border: 1px solid darken($brand-color, 12%);
25-
box-shadow: 0 2px darken($brand-color, 18%);
28+
border: 1px solid color.adjust($brand-color, $lightness: -12%);
29+
box-shadow: 0 2px color.adjust($brand-color, $lightness: -18%);
2630
&:hover {
27-
background-color: darken($brand-color, 5%);
31+
background-color: color.adjust($brand-color, $lightness: -5%);
2832
}
2933
}
3034
.main-header {
@@ -34,13 +38,13 @@
3438
.logo-dropdown-button {
3539
background: $brand-color;
3640
&:hover {
37-
background-color: lighten($brand-color, 3%);
41+
background-color: color.adjust($brand-color, $lightness: 3%);
3842
}
3943
}
4044
.main-header-nav-link {
4145
color: inherit;
4246
}
43-
@media only screen and (min-width: $small-breakpoint) {
47+
@media only screen and (min-width: variables.$small-breakpoint) {
4448
.main-header-nav-link.active {
4549
color: $brand-color;
4650
}
@@ -57,46 +61,46 @@
5761
}
5862

5963
.logo-dropdown-content-pantone-entry.brown {
60-
background-color: $brown-color;
64+
background-color: variables.$brown-color;
6165
}
6266
.logo-dropdown-content-pantone-entry.orange {
63-
background-color: $orange-color;
67+
background-color: variables.$orange-color;
6468
}
6569
.logo-dropdown-content-pantone-entry.blue {
66-
background-color: $blue-color;
70+
background-color: variables.$blue-color;
6771
}
6872
.logo-dropdown-content-pantone-entry.purple {
69-
background-color: $purple-color;
73+
background-color: variables.$purple-color;
7074
}
7175
.logo-dropdown-content-pantone-entry.line {
72-
background-color: $line-color;
76+
background-color: variables.$line-color;
7377
}
7478
.logo-dropdown-content-pantone-entry.pink {
75-
background-color: $pink-color;
79+
background-color: variables.$pink-color;
7680
}
7781
.logo-dropdown-content-pantone-entry.red {
78-
background-color: $red-color;
82+
background-color: variables.$red-color;
7983
}
8084

81-
@include brandify($brown-color, $brown-color-brighter);
85+
@include brandify(variables.$brown-color, variables.$brown-color-brighter);
8286

8387
.orange-brand {
84-
@include brandify($orange-color, $orange-color-brighter);
88+
@include brandify(variables.$orange-color, variables.$orange-color-brighter);
8589
}
8690
.blue-brand {
87-
@include brandify($blue-color, $blue-color-brighter);
91+
@include brandify(variables.$blue-color, variables.$blue-color-brighter);
8892
}
8993
.purple-brand {
90-
@include brandify($purple-color, $purple-color-brighter);
94+
@include brandify(variables.$purple-color, variables.$purple-color-brighter);
9195
}
9296
.line-brand {
93-
@include brandify($line-color, $line-color-brighter);
97+
@include brandify(variables.$line-color, variables.$line-color-brighter);
9498
}
9599
.pink-brand {
96-
@include brandify($pink-color, $pink-color-brighter);
100+
@include brandify(variables.$pink-color, variables.$pink-color-brighter);
97101
}
98102
.red-brand {
99-
@include brandify($red-color, $red-color-brighter);
103+
@include brandify(variables.$red-color, variables.$red-color-brighter);
100104
}
101105
.brown-brand {
102106
// @include brandify($brown-color, $brown-color-brighter);

‎docs/app/styles/_utilities.scss‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use 'variables';
2+
13
// Utility classes
24
.text-center {
35
text-align: center;
@@ -22,8 +24,8 @@
2224
%wrapper {
2325
max-width: 1024px;
2426
width: 100%;
25-
padding-left: $wrapper-padding;
26-
padding-right: $wrapper-padding;
27+
padding-left: variables.$wrapper-padding;
28+
padding-right: variables.$wrapper-padding;
2729
margin-left: auto;
2830
margin-right: auto;
2931
}

‎docs/app/styles/_variables.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use 'sass:color';
12
// Colors
23
$text-color: #333;
34
$headings-text-color: #313131;
@@ -33,7 +34,7 @@ $red-color-brighter: #f77f7f;
3334

3435
// Brown-ish theme
3536
$brown-color: #d27303;
36-
$brown-color-brighter: lighten($brown-color, 10%);
37+
$brown-color-brighter: color.adjust($brown-color, $lightness: 10%);
3738

3839
// // Red
3940
// $brand-color: $brown-color;

‎docs/app/styles/app.scss‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
11
// Basic dropdown
22
@use 'ember-basic-dropdown';
33

4-
@import 'variables';
5-
@import 'base';
6-
@import 'utilities';
7-
@import 'layout';
4+
@use 'variables';
5+
@use 'base';
6+
@use 'utilities';
7+
@use 'layout';
88

99
// Components
10-
@import 'components/main-header';
11-
@import 'components/link-to-other-version';
12-
@import 'components/main-footer';
13-
@import 'components/index';
14-
@import 'components/side-nav';
15-
@import 'components/docs';
16-
@import 'components/cookbook';
17-
@import 'components/spinners';
18-
@import 'components/code-block';
10+
@use 'components/main-header';
11+
@use 'components/link-to-other-version';
12+
@use 'components/main-footer';
13+
@use 'components/index';
14+
@use 'components/side-nav';
15+
@use 'components/docs';
16+
@use 'components/cookbook';
17+
@use 'components/spinners';
18+
@use 'components/code-block';
1919

2020
// Looks and feels for examples
21-
@import 'look-and-feels/animations';
22-
@import 'look-and-feels/bootstrap';
23-
@import 'look-and-feels/material';
21+
@use 'look-and-feels/animations';
22+
@use 'look-and-feels/bootstrap';
23+
@use 'look-and-feels/material';
2424

2525
// Demos
26-
@import 'demos/content-mouse-enter-leave';
27-
@import 'demos/position';
28-
@import 'demos/scrollable-container';
26+
@use 'demos/content-mouse-enter-leave';
27+
@use 'demos/position';
28+
@use 'demos/scrollable-container';
2929

3030
// Docs
31-
@import 'docs/code-example';
31+
@use 'docs/code-example';
3232

3333
// Easter egg
34-
@import 'brandification';
34+
@use 'brandification';

‎docs/app/styles/components/cookbook.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use '../utilities';
2+
13
// Cookbook
24
.cookbook {
35
@extend %wrapper;

‎docs/app/styles/components/docs.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use '../variables';
2+
@use '../utilities';
3+
14
// Docs
25
.docs {
36
@extend %wrapper;
@@ -32,7 +35,7 @@
3235
}
3336
.section-selector {
3437
margin-bottom: 1rem;
35-
@media only screen and (min-width: $medium-breakpoint) {
38+
@media only screen and (min-width: variables.$medium-breakpoint) {
3639
display: none;
3740
}
3841
}

‎docs/app/styles/components/index.scss‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use '../variables';
2+
@use '../utilities';
3+
14
// Headline
25
.main-page-headline {
36
/* more styles in brandification */
@@ -6,7 +9,7 @@
69
display: flex;
710
align-items: center;
811
justify-content: center;
9-
@media only screen and (max-width: $medium-breakpoint) {
12+
@media only screen and (max-width: variables.$medium-breakpoint) {
1013
height: 200px;
1114
}
1215
}
@@ -19,13 +22,13 @@
1922
img {
2023
vertical-align: top;
2124
}
22-
@media only screen and (max-width: $small-breakpoint) {
25+
@media only screen and (max-width: variables.$small-breakpoint) {
2326
font-size: 34px;
2427
img {
2528
height: 40px;
2629
}
2730
}
28-
@media only screen and (min-width: $small-breakpoint) {
31+
@media only screen and (min-width: variables.$small-breakpoint) {
2932
font-size: 42px;
3033
img {
3134
height: 48px;
@@ -36,7 +39,7 @@
3639
.selling-points {
3740
@extend %wrapper;
3841
display: flex;
39-
@media only screen and (max-width: $small-breakpoint) {
42+
@media only screen and (max-width: variables.$small-breakpoint) {
4043
flex-direction: column;
4144
}
4245
}
@@ -66,7 +69,7 @@
6669
}
6770
}
6871
.selling-point-text {
69-
color: $gray;
72+
color: variables.$gray;
7073
display: flex;
7174
flex-direction: column;
7275
justify-content: center;

‎docs/app/styles/components/main-footer.scss‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1+
@use '../variables';
2+
@use '../utilities';
3+
14
// Main footer
25
.main-footer {
3-
color: $gray;
4-
background-color: $light-gray;
6+
color: variables.$gray;
7+
background-color: variables.$light-gray;
58
border-top: 1px solid #bbb;
69
padding-left: 1rem;
710
padding-right: 1rem;
@@ -10,7 +13,7 @@
1013
@extend %wrapper;
1114
padding: 1rem 0;
1215
}
13-
@media only screen and (min-width: $medium-breakpoint) {
16+
@media only screen and (min-width: variables.$medium-breakpoint) {
1417
.icons-attributions {
1518
float: right;
1619
}
@@ -23,7 +26,7 @@ body .contribute-call-to-action a {
2326
color: white;
2427
/* more styles in brandification */
2528
}
26-
@media only screen and (min-width: $small-breakpoint) {
29+
@media only screen and (min-width: variables.$small-breakpoint) {
2730
.contribute-call-to-action {
2831
float: right;
2932
}

‎docs/app/styles/components/main-header.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use '../variables';
2+
@use '../utilities';
3+
14
// main header
25
.main-header {
36
/* more styles in brandification */
@@ -34,9 +37,6 @@
3437
text-align: center;
3538
border: 1px solid #f9efe4;
3639
box-shadow: 0 3px #f9efe4;
37-
&:hover {
38-
/* more styles in brandification */
39-
}
4040
&[aria-expanded='true'] {
4141
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
4242
transform: translateY(3px);
@@ -72,7 +72,7 @@
7272
padding-left: 1rem;
7373
padding-right: 1rem;
7474
}
75-
@media only screen and (max-width: $small-breakpoint) {
75+
@media only screen and (max-width: variables.$small-breakpoint) {
7676
.main-header {
7777
line-height: 44px;
7878
}
@@ -86,7 +86,7 @@
8686
overflow-x: auto;
8787
}
8888
}
89-
@media only screen and (min-width: $small-breakpoint) {
89+
@media only screen and (min-width: variables.$small-breakpoint) {
9090
.main-header {
9191
line-height: 66px;
9292
}

0 commit comments

Comments
 (0)