Skip to content

Commit 9d5346b

Browse files
NicolaSaundersNicolaSaunders
authored
Merge pull request #93 from studio24/hotfix/sass-modules-adoption
Hotfix/sass modules adoption
2 parents 22a686e + 7e66888 commit 9d5346b

96 files changed

Lines changed: 987 additions & 612 deletions

File tree

Some content is hidden

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

‎.stylelintignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
assets-src/styles/sass/30-base/_print.scss
88

99
# Ignore styles relating to third-party packages, where we might have less control
10-
assets-src/styles/sass/70-third-party-plugins/*.scss
10+
assets-src/styles/sass/70-vendor-src/*.scss
1111

1212
# Styles for the Amplify website
1313
assets-src/styles/sass/85-amplify/*.scss

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -206,4 +206,4 @@ The MIT License (MIT). Please see [License File](LICENSE.md) for more informatio
206206

207207
## Acknowledgements
208208

209-
Inspired by [Springer Nature Front End Playbook](https://github.com/springernature/frontend-playbook), [Every Layout](https://every-layout.dev/) and [CUBE CSS](https://cube.fyi/)
209+
Inspired by [Springer Nature Front End Playbook](https://github.com/springernature/frontend-playbook), [Every Layout](https://every-layout.dev/), [CUBE CSS](https://cube.fyi/) and the work of [Chris Ferdinandi](https://gomakethings.com/)

‎assets-src/styles/advanced.scss‎

Lines changed: 20 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,40 @@
11
/*------------------------------------*\
2-
#Amplify: advanced styles for browsers selected by mustard cut
2+
#Amplify: advanced styles (browsers selected by mustard cut)
33
\*------------------------------------*/
44

5-
/*------------------------------------*\
6-
#Settings
7-
\*------------------------------------*/
8-
@import 'sass/00-settings/breakpoints';
9-
@import 'sass/00-settings/colors';
10-
//@import "sass/00-settings/debug";
11-
@import 'sass/00-settings/typesetting';
12-
13-
14-
/*------------------------------------*\
15-
#Functions
16-
\*------------------------------------*/
17-
@import 'sass/10-functions/units';
18-
19-
20-
/*------------------------------------*\
21-
#Mixins
22-
\*------------------------------------*/
23-
@import 'sass/20-mixins/font-sizes';
24-
@import 'sass/20-mixins/media-query';
25-
@import 'sass/20-mixins/stack';
26-
27-
28-
/*------------------------------------*\
29-
#Base
30-
31-
Repeated to allow for extending placeholders
32-
\*------------------------------------*/
33-
@import 'sass/30-base/hide-and-show';
34-
35-
365
/*------------------------------------*\
376
#Advanced components
387
398
For JS enhancements
409
\*------------------------------------*/
41-
@import 'sass/60-advanced-components/cards';
42-
@import 'sass/60-advanced-components/collapsibles';
43-
@import 'sass/60-advanced-components/disclosure-widget';
44-
@import 'sass/60-advanced-components/sortable-tables';
10+
@use 'sass/60-advanced-components/cards';
11+
@use 'sass/60-advanced-components/collapsibles';
12+
@use 'sass/60-advanced-components/disclosure-widget';
13+
@use 'sass/60-advanced-components/sortable-tables';
4514

4615

4716
/*------------------------------------*\
4817
#Advanced navigation
4918
5019
Where JS is involved
5120
\*------------------------------------*/
52-
@import 'sass/65-advanced-navigation/nav';
53-
@import 'sass/65-advanced-navigation/nav-double';
54-
@import 'sass/65-advanced-navigation/nav-double-both';
55-
@import 'sass/65-advanced-navigation/nav-double-with-intro';
21+
@use 'sass/65-advanced-navigation/nav';
22+
@use 'sass/65-advanced-navigation/nav-double';
23+
@use 'sass/65-advanced-navigation/nav-double-both';
24+
@use 'sass/65-advanced-navigation/nav-double-with-intro';
5625

5726

5827
/*------------------------------------*\
59-
#Plugins
28+
#Vendors (src styles)
29+
\*------------------------------------*/
30+
@use 'sass/70-vendor-src/accessible-autocomplete-src';
31+
@use 'sass/70-vendor-src/splide-src';
32+
@use 'sass/70-vendor-src/tabby-src';
6033

61-
Add third-party plugins here.
62-
Add custom styles directly after the original in a separate file
34+
35+
/*------------------------------------*\
36+
#Vendor overrides for Amplify
6337
\*------------------------------------*/
64-
@import '../../node_modules/accessible-autocomplete/src/autocomplete';
65-
@import 'sass/70-third-party-plugins/s24-accessible-autocomplete';
66-
@import '../../node_modules/@splidejs/splide/src/css/core/index';
67-
@import 'sass/70-third-party-plugins/s24-splide-carousel';
68-
@import '../../node_modules/tabbyjs/src/sass/tabby-ui';
69-
@import 'sass/70-third-party-plugins/s24-tabby-ui';
38+
@use 'sass/75-vendor-overrides/s24-accessible-autocomplete';
39+
@use 'sass/75-vendor-overrides/s24-splide-carousel';
40+
@use 'sass/75-vendor-overrides/s24-tabby-ui';

‎assets-src/styles/core.scss‎

Lines changed: 61 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,83 @@
11
/*------------------------------------*\
2-
#Amplify: core styles for all browsers
2+
#Amplify: core styles (all browsers)
33
\*------------------------------------*/
44

55
/*------------------------------------*\
6-
#Settings
6+
#Fonts
77
\*------------------------------------*/
8-
@import 'sass/00-settings/breakpoints';
9-
@import 'sass/00-settings/colors';
10-
//@import 'sass/00-settings/debug';
11-
@import 'sass/00-settings/fonts';
12-
@import 'sass/00-settings/typesetting';
13-
14-
15-
/*------------------------------------*\
16-
#Functions
17-
\*------------------------------------*/
18-
@import 'sass/10-functions/units';
19-
20-
21-
/*------------------------------------*\
22-
#Mixins
23-
\*------------------------------------*/
24-
@import 'sass/20-mixins/font-sizes';
25-
@import 'sass/20-mixins/media-query';
26-
@import 'sass/20-mixins/stack';
27-
8+
@use 'sass/00-fonts/fonts';
289

2910
/*------------------------------------*\
3011
#Base
3112
\*------------------------------------*/
32-
@import 'sass/30-base/amplify-reset';
33-
@import 'sass/30-base/body';
34-
@import 'sass/30-base/typography';
35-
@import 'sass/30-base/hide-and-show';
36-
@import 'sass/30-base/flow-elements';
37-
@import 'sass/30-base/buttons-and-links';
38-
@import 'sass/30-base/skip-link';
39-
@import 'sass/30-base/details-and-summary';
40-
@import 'sass/30-base/icons';
41-
@import 'sass/30-base/figure';
42-
@import 'sass/30-base/lists';
43-
@import 'sass/30-base/quotes';
44-
@import 'sass/30-base/tables';
45-
@import 'sass/30-base/animation';
46-
@import 'sass/30-base/focus';
13+
@use 'sass/30-base/amplify-reset';
14+
@use 'sass/30-base/body';
15+
@use 'sass/30-base/typography';
16+
@use 'sass/30-base/hide-and-show';
17+
@use 'sass/30-base/flow-elements';
18+
@use 'sass/30-base/buttons-and-links';
19+
@use 'sass/30-base/skip-link';
20+
@use 'sass/30-base/details-and-summary';
21+
@use 'sass/30-base/icons';
22+
@use 'sass/30-base/figure';
23+
@use 'sass/30-base/lists';
24+
@use 'sass/30-base/blockquotes';
25+
@use 'sass/30-base/tables';
26+
@use 'sass/30-base/animation';
27+
@use 'sass/30-base/focus';
4728

4829

4930
/*------------------------------------*\
5031
#Forms
5132
\*------------------------------------*/
52-
@import 'sass/35-forms/forms';
53-
@import 'sass/35-forms/search';
54-
@import 'sass/35-forms/checkboxes-radios';
55-
@import 'sass/35-forms/memorable-dates';
56-
@import 'sass/35-forms/segmented-options';
57-
@import 'sass/35-forms/select';
33+
@use 'sass/35-forms/forms';
34+
@use 'sass/35-forms/search-input';
35+
@use 'sass/35-forms/checkboxes-radios';
36+
@use 'sass/35-forms/select';
37+
@use 'sass/35-forms/memorable-dates';
38+
@use 'sass/35-forms/segmented-options';
5839

5940

6041
/*------------------------------------*\
6142
#Layout helpers
6243
\*------------------------------------*/
63-
@import 'sass/40-layout-helpers/box';
64-
@import 'sass/40-layout-helpers/center';
65-
@import 'sass/40-layout-helpers/cover';
66-
@import 'sass/40-layout-helpers/cluster';
67-
@import 'sass/40-layout-helpers/frame';
68-
@import 'sass/40-layout-helpers/sidebar';
69-
@import 'sass/40-layout-helpers/switcher';
44+
@use 'sass/40-layout-helpers/box';
45+
@use 'sass/40-layout-helpers/center';
46+
@use 'sass/40-layout-helpers/cover';
47+
@use 'sass/40-layout-helpers/cluster';
48+
@use 'sass/40-layout-helpers/frame';
49+
@use 'sass/40-layout-helpers/sidebar';
50+
@use 'sass/40-layout-helpers/switcher';
7051

7152

7253
/*------------------------------------*\
7354
#Core components
7455
\*------------------------------------*/
75-
@import 'sass/50-core-components/header';
76-
@import 'sass/50-core-components/logo';
77-
@import 'sass/50-core-components/navigation';
78-
@import 'sass/50-core-components/breadcrumbs';
79-
@import 'sass/50-core-components/main';
80-
//@import 'sass/50-core-components/hero';
81-
@import 'sass/50-core-components/text';
82-
@import 'sass/50-core-components/quotes';
83-
@import 'sass/50-core-components/images';
84-
@import 'sass/50-core-components/avatars';
85-
@import 'sass/50-core-components/video';
86-
@import 'sass/50-core-components/notes';
87-
//@import 'sass/50-core-components/social';
88-
@import 'sass/50-core-components/cards';
89-
@import 'sass/50-core-components/shelves';
90-
@import 'sass/50-core-components/progress-indicator';
91-
//@import 'sass/50-core-components/payment-details';
92-
@import 'sass/50-core-components/tag-list';
93-
//@import 'sass/50-core-components/fifty-fifty';
94-
@import 'sass/50-core-components/collapsibles';
95-
@import 'sass/50-core-components/carousel';
96-
@import 'sass/50-core-components/search';
97-
//@import 'sass/50-core-components/meta-info';
98-
@import 'sass/50-core-components/pagination';
99-
@import 'sass/50-core-components/footer';
56+
@use 'sass/50-core-components/header';
57+
@use 'sass/50-core-components/logo';
58+
@use 'sass/50-core-components/navigation';
59+
@use 'sass/50-core-components/breadcrumbs';
60+
@use 'sass/50-core-components/main';
61+
//@use 'sass/50-core-components/hero';
62+
@use 'sass/50-core-components/text';
63+
@use 'sass/50-core-components/quotes';
64+
@use 'sass/50-core-components/images';
65+
@use 'sass/50-core-components/avatars';
66+
@use 'sass/50-core-components/video';
67+
@use 'sass/50-core-components/notes';
68+
//@use 'sass/50-core-components/social';
69+
@use 'sass/50-core-components/cards';
70+
@use 'sass/50-core-components/shelves';
71+
@use 'sass/50-core-components/progress-indicator';
72+
//@use 'sass/50-core-components/payment-details';
73+
@use 'sass/50-core-components/tag-list';
74+
//@use 'sass/50-core-components/fifty-fifty';
75+
@use 'sass/50-core-components/collapsibles';
76+
@use 'sass/50-core-components/carousel';
77+
@use 'sass/50-core-components/search';
78+
//@use 'sass/50-core-components/meta-info';
79+
@use 'sass/50-core-components/pagination';
80+
@use 'sass/50-core-components/footer';
10081

10182

10283
/*------------------------------------*\
@@ -110,13 +91,13 @@
11091
11192
1. Used purely for the static Amplify site
11293
\*------------------------------------*/
113-
@import 'sass/85-amplify/amplify-guide'; /* 1 */
94+
@use 'sass/85-amplify/amplify-guide'; /* 1 */
11495

11596

11697
/*------------------------------------*\
11798
#Utilities
11899
\*------------------------------------*/
119-
@import 'sass/90-utilities/alignments';
120-
@import 'sass/90-utilities/clearfix';
121-
@import 'sass/90-utilities/layout';
122-
@import 'sass/90-utilities/margins';
100+
@use 'sass/90-utilities/alignments';
101+
@use 'sass/90-utilities/clearfix';
102+
@use 'sass/90-utilities/layout';
103+
@use 'sass/90-utilities/margins';

‎assets-src/styles/print.scss‎

Lines changed: 2 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,5 @@
11
/*------------------------------------*\
2-
#Apollo: print styles
2+
#Amplify: print styles
33
\*------------------------------------*/
44

5-
/*------------------------------------*\
6-
#Settings
7-
\*------------------------------------*/
8-
@import 'sass/00-settings/fonts';
9-
@import 'sass/00-settings/typesetting';
10-
11-
12-
13-
/*------------------------------------*\
14-
#Mixins
15-
\*------------------------------------*/
16-
@import 'sass/20-mixins/stack';
17-
18-
19-
20-
/*------------------------------------*\
21-
#Base
22-
\*------------------------------------*/
23-
@import 'sass/30-base/print';
5+
@use 'sass/30-base/print';

assets-src/styles/sass/00-settings/_fonts.scss renamed to assets-src/styles/sass/00-fonts/_fonts.scss

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
/*------------------------------------*\
2-
#Fonts
3-
\*------------------------------------*/
4-
51
/* nunito-regular - latin */
62
@font-face {
73
font-display: fallback;

assets-src/styles/sass/00-settings/_breakpoints.scss renamed to assets-src/styles/sass/10-settings/_breakpoints.scss

File renamed without changes.

assets-src/styles/sass/00-settings/_colors.scss renamed to assets-src/styles/sass/10-settings/_colors.scss

File renamed without changes.

assets-src/styles/sass/00-settings/_debug.scss renamed to assets-src/styles/sass/10-settings/_debug.scss

File renamed without changes.

‎assets-src/styles/sass/10-settings/_index.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/*------------------------------------*\
2+
#Settings
3+
\*------------------------------------*/
4+
@forward 'breakpoints';
5+
@forward 'colors';
6+
// @forward 'debug';
7+
@forward 'typesetting';

0 commit comments

Comments
 (0)