Skip to content

Commit 95d9b59

Browse files
authored
Update Bulma template: Utilize @use and @forward Directives for Modular Importing (#173)
- Replaced outdated `@import` statements with `@use` and `@forward` for improved SCSS modularity.
1 parent 8eca54b commit 95d9b59

File tree

1 file changed

+39
-36
lines changed

1 file changed

+39
-36
lines changed

Diff for: lib/install/bulma/application.bulma.scss

+39-36
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,42 @@
1-
// @charset "utf-8";
2-
3-
// Import a Google Font
4-
// @import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
5-
61
// Set your brand colors
7-
// $purple: #8A4D76;
8-
// $pink: #FA7C91;
2+
// $purple: #8a4d76;
3+
// $pink: #fa7c91;
94
// $brown: #757763;
10-
// $beige-light: #D0D1CD;
11-
// $beige-lighter: #EFF0EB;
12-
13-
// Update Bulma's global variables
14-
// $family-sans-serif: "Nunito", sans-serif;
15-
// $grey-dark: $brown;
16-
// $grey-light: $beige-light;
17-
// $primary: $purple;
18-
// $link: $pink;
19-
// $widescreen-enabled: false;
20-
// $fullhd-enabled: false;
21-
22-
// Update some of Bulma's component variables
23-
// $body-background-color: $beige-lighter;
24-
// $control-border-width: 2px;
25-
// $input-border-color: transparent;
26-
// $input-shadow: none;
27-
28-
// Import only what you need from Bulma
29-
// @import "bulma/sass/utilities/_all.sass";
30-
// @import "bulma/sass/base/_all.sass";
31-
// @import "bulma/sass/elements/button.sass";
32-
// @import "bulma/sass/elements/container.sass";
33-
// @import "bulma/sass/elements/title.sass";
34-
// @import "bulma/sass/form/_all.sass";
35-
// @import "bulma/sass/components/navbar.sass";
36-
// @import "bulma/sass/layout/hero.sass";
37-
// @import "bulma/sass/layout/section.sass";
5+
// $beige-light: #d0d1cd;
6+
// $beige-lighter: #eff0eb;
7+
//
8+
// Override global Sass variables from the /utilities folder
9+
// @use "bulma/sass/utilities" with (
10+
// $family-primary: '"Nunito", sans-serif',
11+
// $grey-dark: $brown,
12+
// $grey-light: $beige-light,
13+
// $primary: $purple,
14+
// $link: $pink,
15+
// $control-border-width: 2px
16+
// );
17+
//
18+
// Override Sass variables from the /form folder
19+
// @use "bulma/sass/form" with (
20+
// $input-shadow: none
21+
// );
22+
//
23+
// Import the components you need
24+
// @forward "bulma/sass/base";
25+
// @forward "bulma/sass/components/card";
26+
// @forward "bulma/sass/components/modal";
27+
// @forward "bulma/sass/components/navbar";
28+
// @forward "bulma/sass/elements/button";
29+
// @forward "bulma/sass/elements/icon";
30+
// @forward "bulma/sass/elements/content";
31+
// @forward "bulma/sass/elements/notification";
32+
// @forward "bulma/sass/elements/progress";
33+
// @forward "bulma/sass/elements/tag";
34+
// @forward "bulma/sass/layout/footer";
35+
//
36+
// Import the themes so that all CSS variables have a value
37+
// @forward "bulma/sass/themes";
38+
//
39+
// Import the Google Font
40+
// @import url("https://fonts.googleapis.com/css?family=Nunito:400,700");
3841

39-
@import 'bulma/bulma';
42+
@use 'bulma/bulma';

0 commit comments

Comments
 (0)