├── .github └── FUNDING.yml ├── .gitignore ├── .jsbeautifyrc ├── .npmignore ├── Gemfile ├── Gemfile.lock ├── LICENSE ├── README.md ├── _config.local.yml ├── _config.yml ├── _includes ├── components │ ├── breadcrumb.html │ ├── card.html │ ├── dropdown.html │ ├── hero.html │ ├── level.html │ ├── media.html │ ├── menu.html │ ├── message.html │ ├── modal.html │ ├── navbar.html │ ├── pagination.html │ ├── panel.html │ └── tabs.html ├── elements │ ├── box.html │ ├── button.html │ ├── content.html │ ├── delete.html │ ├── form.html │ ├── icon.html │ ├── images.html │ ├── notifications.html │ ├── progress.html │ ├── table.html │ ├── tag.html │ └── typography.html ├── footer.html ├── meta.html └── nav.html ├── _layouts ├── default.html ├── home.html ├── page.html └── theme.html ├── _themes ├── cerulean.md ├── cosmo.md ├── cyborg.md ├── darkly.md ├── default.md ├── flatly.md ├── journal.md ├── litera.md ├── lumen.md ├── lux.md ├── materia.md ├── minty.md ├── nuclear.md ├── pulse.md ├── sandstone.md ├── simplex.md ├── slate.md ├── solar.md ├── spacelab.md ├── superhero.md ├── united.md └── yeti.md ├── api └── themes.json ├── assets ├── bulmaswatch-banner.png ├── highlight.sass ├── icons │ ├── apple-touch-icon-144x144.png │ ├── apple-touch-icon-152x152.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ └── mstile-144x144.png ├── preview-3.2.png ├── styles.min.css ├── styles.min.css.map └── styles.scss ├── bookmarklet.js ├── cerulean ├── _overrides.scss ├── _variables.scss ├── bulmaswatch.min.css ├── bulmaswatch.min.css.map └── bulmaswatch.scss ├── cosmo ├── _overrides.scss ├── _variables.scss ├── bulmaswatch.min.css ├── bulmaswatch.min.css.map └── bulmaswatch.scss ├── cyborg ├── _overrides.scss ├── _variables.scss ├── bulmaswatch.min.css ├── bulmaswatch.min.css.map └── bulmaswatch.scss ├── darkly ├── _overrides.scss ├── _variables.scss ├── bulmaswatch.min.css ├── bulmaswatch.min.css.map ├── bulmaswatch.scss └── thumbnail.png ├── default ├── _overrides.scss ├── _variables.scss ├── bulmaswatch.min.css ├── bulmaswatch.min.css.map └── bulmaswatch.scss ├── favicon.ico ├── flatly ├── _overrides.scss ├── _variables.scss ├── bulmaswatch.min.css ├── bulmaswatch.min.css.map └── bulmaswatch.scss ├── gulpfile.js ├── help.html ├── index.html ├── journal ├── _overrides.scss ├── _variables.scss ├── bulmaswatch.min.css ├── bulmaswatch.min.css.map └── bulmaswatch.scss ├── litera ├── _overrides.scss ├── _variables.scss ├── bulmaswatch.min.css ├── bulmaswatch.min.css.map └── bulmaswatch.scss ├── lumen ├── _overrides.scss ├── _variables.scss ├── bulmaswatch.min.css ├── bulmaswatch.min.css.map └── bulmaswatch.scss ├── lux ├── _overrides.scss ├── _variables.scss ├── bulmaswatch.min.css ├── bulmaswatch.min.css.map └── bulmaswatch.scss ├── materia ├── _overrides.scss ├── _variables.scss ├── bulmaswatch.min.css ├── bulmaswatch.min.css.map └── bulmaswatch.scss ├── minty ├── _overrides.scss ├── _variables.scss ├── bulmaswatch.min.css ├── bulmaswatch.min.css.map └── bulmaswatch.scss ├── nuclear ├── _overrides.scss ├── _variables.scss ├── bulmaswatch.min.css ├── bulmaswatch.min.css.map └── bulmaswatch.scss ├── package.json ├── pulse ├── _overrides.scss ├── _variables.scss ├── bulmaswatch.min.css ├── bulmaswatch.min.css.map └── bulmaswatch.scss ├── sandstone ├── _overrides.scss ├── _variables.scss ├── bulmaswatch.min.css ├── bulmaswatch.min.css.map └── bulmaswatch.scss ├── simplex ├── _overrides.scss ├── _variables.scss ├── bulmaswatch.min.css ├── bulmaswatch.min.css.map └── bulmaswatch.scss ├── slate ├── _overrides.scss ├── _variables.scss ├── bulmaswatch.min.css ├── bulmaswatch.min.css.map └── bulmaswatch.scss ├── solar ├── _overrides.scss ├── _variables.scss ├── bulmaswatch.min.css ├── bulmaswatch.min.css.map └── bulmaswatch.scss ├── spacelab ├── _overrides.scss ├── _variables.scss ├── bulmaswatch.min.css ├── bulmaswatch.min.css.map └── bulmaswatch.scss ├── superhero ├── _overrides.scss ├── _variables.scss ├── bulmaswatch.min.css ├── bulmaswatch.min.css.map └── bulmaswatch.scss ├── test.html ├── thumb.html ├── united ├── _overrides.scss ├── _variables.scss ├── bulmaswatch.min.css ├── bulmaswatch.min.css.map └── bulmaswatch.scss ├── yarn.lock └── yeti ├── _overrides.scss ├── _variables.scss ├── bulmaswatch.min.css ├── bulmaswatch.min.css.map └── bulmaswatch.scss /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | 2 | custom: ['https://paypal.me/jgog/10'] 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | _site 2 | .sass-cache 3 | .jekyll-metadata 4 | node_modules 5 | *.gem 6 | .bundle 7 | -------------------------------------------------------------------------------- /.jsbeautifyrc: -------------------------------------------------------------------------------- 1 | { 2 | "html": { 3 | "allowed_file_extensions": ["htm", "html", "xhtml", "shtml", "xml", "svg"], 4 | "brace_style": "collapse", 5 | "end_with_newline": false, 6 | "indent_char": " ", 7 | "indent_handlebars": false, 8 | "indent_inner_html": false, 9 | "indent_scripts": "keep", 10 | "indent_size": 2, 11 | "max_preserve_newlines": 0, 12 | "preserve_newlines": true, 13 | "unformatted": ["img", "code", "pre", "sub", "sup", "em", "strong", "b", "i", "u", "strike", "big", "small", "pre", "h1", "h2", "h3", "h4", "h5", "h6"], 14 | "wrap_line_length": 0 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | _layouts 2 | _includes 3 | _themes 4 | assets 5 | *.yml 6 | gulpfile.js 7 | *.html 8 | _site 9 | .sass-cache 10 | .jekyll-metadata 11 | node_modules 12 | *.lock 13 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | gem 'github-pages', group: :jekyll_plugins 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 - Present Jenil Gogari 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Bulmaswatch 2 | =========== 3 | 4 | Themes for [Bulma](https://bulma.io), inspired by [Bootswatch](https://bootswatch.com/). 5 | 6 | Get started 7 | ----- 8 | Read the instructions [here](https://jenil.github.io/bulmaswatch/help/). 9 | 10 | 11 | Development 12 | ----- 13 | Assuming you already have Node.js (v10), [Yarn](https://yarnpkg.com/) and [Bundler](https://bundler.io/) 14 | 15 | ``` 16 | yarn install # or npm install 17 | bundler install 18 | yarn start 19 | ``` 20 | 21 | Credits 22 | ----- 23 | - @jgthms for [Bulma](https://bulma.io) 24 | - @thomaspark for [Bootswatch](https://bootswatch.com/) 25 | 26 | ## Copyright and License 27 | 28 | Copyright 2017 - Present [Jenil Gogari](https://jgog.in). 29 | 30 | Code released under the MIT License. 31 | -------------------------------------------------------------------------------- /_config.local.yml: -------------------------------------------------------------------------------- 1 | baseurl: "" # the subpath of your site, e.g. /blog 2 | url: "http://localhost:3000" # the base hostname & protocol for your site, e.g. http://example.com 3 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | baseurl: "/bulmaswatch" # the subpath of your site, e.g. /blog 2 | url: "https://jenil.github.io" # the base hostname & protocol for your site, e.g. http://example.com 3 | 4 | title: Bulmaswatch 5 | email: i@jgog.in 6 | description: Free themes for Bulma - A modern CSS framework based on Flexbox 7 | twitter_username: geekGogari 8 | github_username: jenil 9 | repo_url: //github.com/jenil/bulmaswatch 10 | collections: 11 | themes: 12 | output: true 13 | permalink: /:name/ 14 | defaults: 15 | - scope: 16 | path: "" 17 | type: themes 18 | values: 19 | layout: theme 20 | order: 1, 21 | modifiers: 22 | - '' 23 | - primary 24 | - link 25 | - info 26 | - success 27 | - warning 28 | - danger 29 | - white 30 | - black 31 | - light 32 | - dark 33 | # Build settings 34 | markdown: kramdown 35 | exclude: 36 | - Gemfile 37 | - Gemfile.lock 38 | - node_modules 39 | - gulpfile.js 40 | - package.json 41 | - yarn.lock 42 | -------------------------------------------------------------------------------- /_includes/components/breadcrumb.html: -------------------------------------------------------------------------------- 1 | 21 | -------------------------------------------------------------------------------- /_includes/components/card.html: -------------------------------------------------------------------------------- 1 |
2 |

Cards

3 |
4 |
5 |
6 |
7 |
8 |
Image
9 |
10 |
11 |
12 |
13 |
Image
14 |
15 |
16 |

John Smith

17 |

@johnsmith

18 |
19 |
20 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. 21 | @bulmaio. 22 | #css 23 | #responsive 24 |
11:09 PM - 1 Jan 2016
25 |
26 |
27 |
28 |
29 |
30 |
31 |

Component

32 | 33 | 34 | 35 |
36 |
37 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. 38 | @bulmaio. 39 | #css 40 | #responsive 41 |
11:09 PM - 1 Jan 2016
42 |
43 | 48 |
49 |
50 |
51 |
52 | -------------------------------------------------------------------------------- /_includes/components/dropdown.html: -------------------------------------------------------------------------------- 1 | 66 | -------------------------------------------------------------------------------- /_includes/components/hero.html: -------------------------------------------------------------------------------- 1 |
2 |

Hero

3 |
4 | {% for m in page.modifiers %} 5 |
6 |
7 | 62 |
63 | 64 |
65 |
66 |
67 |

68 | Title 69 |

70 |

71 | Subtitle 72 |

73 |
74 |
75 | 76 |
77 | 101 |
102 |
103 |
104 |
105 | {% endfor %} 106 |
-------------------------------------------------------------------------------- /_includes/components/level.html: -------------------------------------------------------------------------------- 1 |
2 |

Level

3 |
4 | 5 | 41 |
42 | 68 |
69 | 84 |
85 | 111 |
112 |
113 | -------------------------------------------------------------------------------- /_includes/components/media.html: -------------------------------------------------------------------------------- 1 |
2 |

Media Object

3 |
4 |
5 |
6 |

7 | 8 |

9 |
10 |
11 |
12 |

13 | John Smith @johnsmith 31m 14 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis. 15 |

16 |
17 | 30 |
31 |
32 | 33 |
34 |
35 |
36 |
37 |
38 |

39 | 40 |

41 |
42 |
43 |
44 |

45 | 46 |

47 |
48 | 62 |
63 |
64 |
65 |

Nesting

66 |
67 |
68 |

69 | 70 |

71 |
72 |
73 |
74 |

75 | Barbara Middleton 76 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros lacus, nec ultricies elit blandit non. Suspendisse pellentesque mauris sit amet dolor blandit rutrum. Nunc in tempus turpis. 77 |
78 | Like · Reply · 3 hrs 79 |

80 |
81 |
82 |
83 |

84 | 85 |

86 |
87 |
88 |
89 |

90 | Sean Brown 91 |
Donec sollicitudin urna eget eros malesuada sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam blandit nisl a nulla sagittis, a lobortis leo feugiat. 92 |
93 | Like · Reply · 2 hrs 94 |

95 |
96 |
97 | Vivamus quis semper metus, non tincidunt dolor. Vivamus in mi eu lorem cursus ullamcorper sit amet nec massa. 98 |
99 |
100 | Morbi vitae diam et purus tincidunt porttitor vel vitae augue. Praesent malesuada metus sed pharetra euismod. Cras tellus odio, tincidunt iaculis diam non, porta aliquet tortor. 101 |
102 |
103 |
104 |
105 |
106 |

107 | 108 |

109 |
110 |
111 |
112 |

113 | Kayli Eunice 114 |
Sed convallis scelerisque mauris, non pulvinar nunc mattis vel. Maecenas varius felis sit amet magna vestibulum euismod malesuada cursus libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lacinia non nisl id feugiat. 115 |
116 | Like · Reply · 2 hrs 117 |

118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |

126 | 127 |

128 |
129 |
130 |
131 |

132 | 133 |

134 |
135 |
136 |

137 | 138 |

139 |
140 |
141 |
142 |
143 | -------------------------------------------------------------------------------- /_includes/components/menu.html: -------------------------------------------------------------------------------- 1 | 65 | -------------------------------------------------------------------------------- /_includes/components/message.html: -------------------------------------------------------------------------------- 1 |
2 |

Message

3 |
4 |
5 | {% for m in page.modifiers %} 6 |
7 |
8 |
9 |

10 | {% if m != '' %} 11 | {{m | capitalize}} 12 | {% else %} 13 | Message 14 | {% endif %} 15 |

16 | 17 |
18 |
19 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum 20 | felis venenatis efficitur. Aenean ac eleifend lacus. 21 |
22 |
23 |
24 | {% endfor %} 25 |
26 |
27 | -------------------------------------------------------------------------------- /_includes/components/modal.html: -------------------------------------------------------------------------------- 1 | 22 | -------------------------------------------------------------------------------- /_includes/components/pagination.html: -------------------------------------------------------------------------------- 1 |
2 |

Pagination

3 |
4 | 31 |
32 | 45 |
46 | -------------------------------------------------------------------------------- /_includes/components/panel.html: -------------------------------------------------------------------------------- 1 |
2 |

Panel

3 |
4 |
5 | 40 |
41 |
42 | -------------------------------------------------------------------------------- /_includes/elements/box.html: -------------------------------------------------------------------------------- 1 |
2 |

Box

3 |
4 |
5 |
6 |
7 |
Image 8 |
9 |
10 |
11 |
12 |

John Smith @johnsmith 31m 13 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis. 14 |

15 |
16 | 29 |
30 |
31 |
32 |
33 | -------------------------------------------------------------------------------- /_includes/elements/content.html: -------------------------------------------------------------------------------- 1 |
2 |

Content

3 |
4 |
5 |

Hello World

6 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.

7 |

Second level

8 |

Curabitur accumsan turpis pharetra augue tincidunt blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.

9 | 15 |

Third level

16 |

Quisque ante lacus, malesuada ac auctor vitae, congue 17 | non ante . Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.

18 |
    19 |
  1. Donec blandit a lorem id convallis.
    2. 20 |
  2. Cras gravida arcu at diam gravida gravida.
    3. 21 |
  3. Integer in volutpat libero.
    4. 22 |
  4. Donec a diam tellus.
    5. 23 |
  5. Aenean nec tortor orci.
    6. 24 |
  6. Quisque aliquam cursus urna, non bibendum massa viverra eget.
    7. 25 |
  7. Vivamus maximus ultricies pulvinar.
    8. 26 |
27 |
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.
28 |

Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et justo sodales elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.

29 |

Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas vestibulum interdum commodo.

30 |

Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla. Nulla facilisi. Nullam ac erat ante.

31 |

Fourth level

32 |

Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at elementum ex efficitur.

33 |

Maecenas eleifend sollicitudin dui faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.

34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 |
One Two
Three Four
Five Six
Seven Eight
Nine Ten
Eleven Twelve
64 |

Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis. Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.

65 |
Fifth level
66 |

Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.

67 |
Sixth level
68 |

Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.

69 |
70 |
71 | -------------------------------------------------------------------------------- /_includes/elements/delete.html: -------------------------------------------------------------------------------- 1 |
2 |

Delete

3 |
4 |
5 | Hello World 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 | Lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
15 |
16 |
Info 17 | 18 |
19 |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
20 |
21 |
22 | -------------------------------------------------------------------------------- /_includes/elements/icon.html: -------------------------------------------------------------------------------- 1 |
2 |

Icons

3 |
4 | 5 | 6 | 7 |
8 | -------------------------------------------------------------------------------- /_includes/elements/images.html: -------------------------------------------------------------------------------- 1 |
2 |

Images

3 |
4 |
5 |
6 |
7 | -------------------------------------------------------------------------------- /_includes/elements/notifications.html: -------------------------------------------------------------------------------- 1 |
2 |

Notifications

3 |
4 |
5 | {% for m in page.modifiers limit:7 %} 6 |
7 |
8 | Lorem ipsum dolor sit amet, 9 | consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit
10 |
11 | {% endfor %} 12 |
13 |
14 | -------------------------------------------------------------------------------- /_includes/elements/progress.html: -------------------------------------------------------------------------------- 1 |
2 |

Progress bars

3 |
4 | {% for m in page.modifiers limit:7 %} 5 | 15% 6 | {% endfor %} 7 | 15% 8 | 30% 9 | 45% 10 | 60% 11 |

Indeterminate

12 | 15% 13 | 30% 14 | 45% 15 | 60% 16 |
17 | -------------------------------------------------------------------------------- /_includes/elements/tag.html: -------------------------------------------------------------------------------- 1 |
2 |

Tag

3 |
4 |
5 | {% for m in page.modifiers offset:1 %} 6 | {{m | capitalize}} 7 | {% endfor %} 8 | Medium 9 | Large 10 | Bar 11 | 12 | 13 | Hello 14 | 15 | 16 | World 17 | 18 | 19 |
20 |
21 |
22 |
23 | npm 24 | 0.5.0 25 |
26 |
27 | 28 |
29 |
30 | build 31 | passing 32 |
33 |
34 | 35 |
36 |
37 | chat 38 | on gitter 39 |
40 |
41 |
42 |
43 |
44 |
45 | Technology 46 | 47 |
48 |
49 | 50 |
51 |
52 | CSS 53 | 54 |
55 |
56 | 57 |
58 |
59 | Flexbox 60 | 61 |
62 |
63 | 64 |
65 |
66 | Web Design 67 | 68 |
69 |
70 | 71 |
72 |
73 | Open Source 74 | 75 |
76 |
77 | 78 |
79 |
80 | Community 81 | 82 |
83 |
84 | 85 |
86 |
87 | Documentation 88 | 89 |
90 |
91 |
92 |
-------------------------------------------------------------------------------- /_includes/elements/typography.html: -------------------------------------------------------------------------------- 1 |
2 |

Typography

3 |
4 |
5 |
6 |

Title 1

7 |

Title 2

8 |

Title 3

9 |

Title 4

10 |
Title 5
11 |
Title 6
12 |
13 |

Subtitle 1

14 |

Subtitle 2

15 |

Subtitle 3

16 |

Subtitle 4

17 |
Subtitle 5
18 |
Subtitle 6
19 |
20 |

Title

21 |

Subtitle

22 |

Title 1

23 |

Subtitle 3

24 |

Title 2

25 |

Subtitle 4

26 |

Title 3

27 |

Subtitle 5

28 |
29 |
30 |
31 | -------------------------------------------------------------------------------- /_includes/footer.html: -------------------------------------------------------------------------------- 1 | 33 | 55 | 57 | 92 | -------------------------------------------------------------------------------- /_includes/meta.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /_includes/nav.html: -------------------------------------------------------------------------------- 1 | 58 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{ page.title }} • {{ site.title }} - {{ site.description }} 6 | {% include meta.html %} 7 | 8 | 9 | 10 | 11 | {{ content }} 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /_layouts/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{ page.title }} • {{ site.title }} - {{ site.description }} 6 | {% include meta.html %} 7 | 8 | 9 | 10 | 11 |
12 |
13 | {% include nav.html %} 14 |
15 |
16 |
17 | 27 |

28 | Free themes for Bulma 30 |

31 | 32 |
33 |
34 |
35 | {{ content }} 36 | {% include footer.html %} 37 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /_layouts/page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{ page.title }} • {{ site.title }} - {{ site.description }} 6 | {% include meta.html %} 7 | 8 | 9 | 10 | 11 |
12 | 13 |
14 | {% include nav.html %} 15 |
16 | 17 |
18 |
19 |

20 | {{ page.title }} 21 |

22 |
23 |
24 |
25 |
26 | {{ content }} 27 |
28 | {% include footer.html %} 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /_layouts/theme.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{ page.title }} • {{ site.title }} - {{ site.description }} 6 | {% include meta.html %} 7 | 8 | 13 | 14 | 15 | 16 |
17 | 18 | {% include nav.html %} 19 | 20 |
21 |
22 |
23 |

24 | {{ page.name }} 25 |

26 |

27 | {{ page.description }} 28 |

29 |

30 | Download 31 | 32 | 33 | 34 |

35 |
36 |
37 |
38 |
39 |
40 |
41 | 124 |
125 |
126 | {% include elements/typography.html %} 127 | {% include elements/box.html %} 128 | {% include elements/button.html %} 129 | {% include elements/content.html %} 130 | {% include elements/delete.html %} 131 | {% include elements/form.html %} 132 | {% include elements/icon.html %} 133 | {% include elements/images.html %} 134 | {% include elements/notifications.html %} 135 | {% include elements/progress.html %} 136 | {% include elements/table.html %} 137 | {% include elements/tag.html %} 138 | {% include components/breadcrumb.html %} 139 | {% include components/hero.html %} 140 | {% include components/card.html %} 141 | {% include components/dropdown.html %} 142 | {% include components/level.html %} 143 | {% include components/media.html %} 144 | {% include components/menu.html %} 145 | {% include components/message.html %} 146 | {% include components/modal.html %} 147 | {% include components/navbar.html %} 148 | {% include components/pagination.html %} 149 | {% include components/panel.html %} 150 | {% include components/tabs.html %} 151 |
152 |
153 | {{ content }} 154 | {% include footer.html %} 155 | 156 | 157 | 158 | -------------------------------------------------------------------------------- /_themes/cerulean.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Cerulean 3 | description: A calm blue sky 4 | --- 5 | -------------------------------------------------------------------------------- /_themes/cosmo.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Cosmo 3 | description: An ode to Metro 4 | --- 5 | -------------------------------------------------------------------------------- /_themes/cyborg.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Cyborg 3 | description: Jet black and electric blue 4 | --- 5 | -------------------------------------------------------------------------------- /_themes/darkly.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Darkly 3 | description: Flatly in night-mode 4 | --- 5 | -------------------------------------------------------------------------------- /_themes/default.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Default 3 | description: Bulma as-is 4 | order: 0 5 | --- 6 | -------------------------------------------------------------------------------- /_themes/flatly.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Flatly 3 | description: Flat and thick 4 | --- 5 | -------------------------------------------------------------------------------- /_themes/journal.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Journal 3 | description: Crisp like a new sheet of paper 4 | --- 5 | -------------------------------------------------------------------------------- /_themes/litera.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Litera 3 | description: The medium is the message 4 | --- 5 | -------------------------------------------------------------------------------- /_themes/lumen.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Lumen 3 | description: Light and shadow 4 | --- 5 | -------------------------------------------------------------------------------- /_themes/lux.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Lux 3 | description: A touch of class 4 | --- 5 | -------------------------------------------------------------------------------- /_themes/materia.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Materia 3 | description: Material is the metaphor 4 | --- 5 | -------------------------------------------------------------------------------- /_themes/minty.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Minty 3 | description: A fresh feel 4 | --- 5 | -------------------------------------------------------------------------------- /_themes/nuclear.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Nuclear 3 | description: A dark theme with irradiated highlights 4 | --- 5 | -------------------------------------------------------------------------------- /_themes/pulse.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Pulse 3 | description: A trace of purple 4 | --- 5 | -------------------------------------------------------------------------------- /_themes/sandstone.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Sandstone 3 | description: A touch of warmth 4 | --- 5 | -------------------------------------------------------------------------------- /_themes/simplex.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Simplex 3 | description: Mini and minimalist 4 | --- 5 | -------------------------------------------------------------------------------- /_themes/slate.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Slate 3 | description: Shades of gunmetal gray 4 | --- 5 | -------------------------------------------------------------------------------- /_themes/solar.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Solar 3 | description: A spin on Solarized 4 | --- 5 | -------------------------------------------------------------------------------- /_themes/spacelab.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Spacelab 3 | description: Silvery and sleek 4 | --- 5 | -------------------------------------------------------------------------------- /_themes/superhero.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Superhero 3 | description: The brave and the blue 4 | --- 5 | -------------------------------------------------------------------------------- /_themes/united.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: United 3 | description: Ubuntu orange and unique font 4 | --- 5 | -------------------------------------------------------------------------------- /_themes/yeti.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Yeti 3 | description: A friendly foundation 4 | --- 5 | -------------------------------------------------------------------------------- /assets/bulmaswatch-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jenil/bulmaswatch/4968d8d0ced4402c5c236b7a47b12da1f3594927/assets/bulmaswatch-banner.png -------------------------------------------------------------------------------- /assets/highlight.sass: -------------------------------------------------------------------------------- 1 | .highlight 2 | background-color: #fdf6e3 3 | color: #586e75 4 | .c 5 | color: #93a1a1 6 | .err, 7 | .g 8 | color: #586e75 9 | .k 10 | color: #859900 11 | .l, 12 | .n 13 | color: #586e75 14 | .o 15 | color: #859900 16 | .x 17 | color: #cb4b16 18 | .p 19 | color: #586e75 20 | .cm 21 | color: #93a1a1 22 | .cp 23 | color: #859900 24 | .c1 25 | color: #93a1a1 26 | .cs 27 | color: #859900 28 | .gd 29 | color: #2aa198 30 | .ge 31 | color: #586e75 32 | font-style: italic 33 | .gr 34 | color: #dc322f 35 | .gh 36 | color: #cb4b16 37 | .gi 38 | color: #859900 39 | .go, 40 | .gp 41 | color: #586e75 42 | .gs 43 | color: #586e75 44 | font-weight: bold 45 | .gu 46 | color: #cb4b16 47 | .gt 48 | color: #586e75 49 | .kc 50 | color: #cb4b16 51 | .kd 52 | color: #268bd2 53 | .kn, 54 | .kp 55 | color: #859900 56 | .kr 57 | color: #268bd2 58 | .kt 59 | color: #dc322f 60 | .ld 61 | color: #586e75 62 | .m, 63 | .s 64 | color: #2aa198 65 | .na 66 | color: #B58900 67 | .nb 68 | color: #586e75 69 | .nc 70 | color: #268bd2 71 | .no 72 | color: #cb4b16 73 | .nd 74 | color: #268bd2 75 | .ni, 76 | .ne 77 | color: #cb4b16 78 | .nf 79 | color: #268bd2 80 | .nl, 81 | .nn, 82 | .nx, 83 | .py 84 | color: #586e75 85 | .nt, 86 | .nv 87 | color: #268bd2 88 | .ow 89 | color: #859900 90 | .w 91 | color: #586e75 92 | .mf, 93 | .mh, 94 | .mi, 95 | .mo 96 | color: #2aa198 97 | .sb 98 | color: #93a1a1 99 | .sc 100 | color: #2aa198 101 | .sd 102 | color: #586e75 103 | .s2 104 | color: #2aa198 105 | .se 106 | color: #cb4b16 107 | .sh 108 | color: #586e75 109 | .si, 110 | .sx 111 | color: #2aa198 112 | .sr 113 | color: #dc322f 114 | .s1, 115 | .ss 116 | color: #2aa198 117 | .bp, 118 | .vc, 119 | .vg, 120 | .vi 121 | color: #268bd2 122 | .il 123 | color: #2aa198 124 | -------------------------------------------------------------------------------- /assets/icons/apple-touch-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jenil/bulmaswatch/4968d8d0ced4402c5c236b7a47b12da1f3594927/assets/icons/apple-touch-icon-144x144.png -------------------------------------------------------------------------------- /assets/icons/apple-touch-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jenil/bulmaswatch/4968d8d0ced4402c5c236b7a47b12da1f3594927/assets/icons/apple-touch-icon-152x152.png -------------------------------------------------------------------------------- /assets/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jenil/bulmaswatch/4968d8d0ced4402c5c236b7a47b12da1f3594927/assets/icons/favicon-16x16.png -------------------------------------------------------------------------------- /assets/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jenil/bulmaswatch/4968d8d0ced4402c5c236b7a47b12da1f3594927/assets/icons/favicon-32x32.png -------------------------------------------------------------------------------- /assets/icons/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jenil/bulmaswatch/4968d8d0ced4402c5c236b7a47b12da1f3594927/assets/icons/favicon.ico -------------------------------------------------------------------------------- /assets/icons/mstile-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jenil/bulmaswatch/4968d8d0ced4402c5c236b7a47b12da1f3594927/assets/icons/mstile-144x144.png -------------------------------------------------------------------------------- /assets/preview-3.2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jenil/bulmaswatch/4968d8d0ced4402c5c236b7a47b12da1f3594927/assets/preview-3.2.png -------------------------------------------------------------------------------- /assets/styles.scss: -------------------------------------------------------------------------------- 1 | @import "../materia/bulmaswatch"; 2 | @import "highlight"; 3 | 4 | pre code, 5 | .highlight { 6 | text-align: left !important; 7 | } 8 | nav.main-nav { 9 | border-radius: 0; 10 | min-height: 4rem; 11 | .title { 12 | color: #fff; 13 | font-weight: bold; 14 | } 15 | .logo { 16 | padding-right: 10px; 17 | } 18 | > * > * > .navbar-item { 19 | margin: 0.75rem 0.25rem; 20 | border-radius: $radius; 21 | } 22 | } 23 | 24 | .home-page { 25 | .main-nav { 26 | background-color: transparent !important; 27 | box-shadow: none !important; 28 | .navbar-item, 29 | .navbar-link { 30 | color: $navbar-item-color !important; 31 | &.is-active, 32 | &:hover { 33 | background-color: rgba($black, 0.05) !important; 34 | } 35 | &::after { 36 | border-color: $navbar-item-color !important; 37 | } 38 | } 39 | } 40 | .hero { 41 | overflow: hidden !important; 42 | } 43 | .hero-body { 44 | transform: translate3d(0, 0, 0); 45 | will-change: transform; 46 | transition: transform ease 1ms; 47 | padding-bottom: 0; 48 | .title { 49 | font-weight: 200; 50 | margin-top: 1rem; 51 | } 52 | .subtitle { 53 | font-weight: 700; 54 | } 55 | a { 56 | text-decoration: underline; 57 | } 58 | img { 59 | display: block; 60 | } 61 | } 62 | .iframe > * { 63 | bottom: 0; 64 | left: 0; 65 | position: absolute; 66 | right: 0; 67 | top: 0; 68 | height: 100%; 69 | width: 100%; 70 | border-top-left-radius: $radius-large; 71 | border-top-right-radius: $radius-large; 72 | } 73 | .section.themes { 74 | padding-top: 5rem; 75 | padding-bottom: 5rem; 76 | .box { 77 | background-color: #fafafa; 78 | padding: 0 0 1rem; 79 | border-top-left-radius: $radius-large; 80 | border-top-right-radius: $radius-large; 81 | .block { 82 | margin: 1rem 0; 83 | } 84 | } 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /bookmarklet.js: -------------------------------------------------------------------------------- 1 | var request = new XMLHttpRequest(); 2 | request.open("GET", "https://jenil.github.io/bulmaswatch/api/themes.json", true); 3 | request.onreadystatechange = function() { 4 | var done = 4, 5 | ok = 200; 6 | if (request.readyState == done && request.status == ok) { 7 | if (request.responseText) { 8 | var BS = JSON.parse(request.responseText); 9 | console.log('bulmaswatch', BS.version); 10 | var themes = BS.themes; 11 | var select = ''; 17 | var temp = document.createElement('div'); 18 | temp.innerHTML = select; 19 | document.body.appendChild(temp.firstChild); 20 | document.querySelector('#theme-switcher').style = 'position:fixed;top:0;right:0;z-index:9900'; 21 | var l = document.createElement("link"); 22 | l.rel = "stylesheet"; 23 | l.href = ""; 24 | l.id = 'bulmaswatch-css'; 25 | document.body.appendChild(l); 26 | document.querySelector('#theme-switcher select').addEventListener("change", function() { 27 | l.href = this.value; 28 | }); 29 | } 30 | } 31 | }; 32 | request.send(null); 33 | -------------------------------------------------------------------------------- /cerulean/_overrides.scss: -------------------------------------------------------------------------------- 1 | // Overrides 2 | @mixin btn-gradient($color) { 3 | background-image: linear-gradient( 4 | 180deg, 5 | lighten($color, 8%) 0%, 6 | $color 60%, 7 | darken($color, 4%) 100% 8 | ); 9 | } 10 | 11 | .button { 12 | @each $name, $pair in $colors { 13 | $color: nth($pair, 1); 14 | $color-invert: nth($pair, 2); 15 | &.is-#{$name} { 16 | &:not(.is-outlined):not(.is-inverted) { 17 | @include btn-gradient($color); 18 | } 19 | } 20 | } 21 | } 22 | 23 | .select, 24 | .select select { 25 | height: auto !important; 26 | } 27 | 28 | .input, 29 | .textarea { 30 | box-shadow: none; 31 | } 32 | 33 | .card { 34 | box-shadow: 0 0 0 1px $border; 35 | background-color: $white-bis; 36 | .card-header { 37 | box-shadow: none; 38 | border-bottom: 1px solid $border; 39 | } 40 | } 41 | 42 | .notification { 43 | @each $name, $pair in $colors { 44 | $color: nth($pair, 1); 45 | $color-invert: nth($pair, 2); 46 | $color-lightning: max((100% - lightness($color)) - 2%, 0%); 47 | &.is-#{$name} { 48 | background-color: lighten($color, $color-lightning); 49 | color: $color; 50 | border: 1px solid lighten($color, 30); 51 | } 52 | } 53 | } 54 | 55 | .navbar:not(.is-transparent) { 56 | @include btn-gradient($primary); 57 | .navbar-item, 58 | .navbar-link { 59 | color: $white; 60 | &.has-dropdown:hover .navbar-link, 61 | &:hover { 62 | background-color: rgba(#000, 0.05); 63 | } 64 | &.is-active, 65 | &:active { 66 | background-color: rgba(#000, 0.1); 67 | } 68 | } 69 | .navbar-burger:hover { 70 | background-color: rgba(#000, 0.05); 71 | } 72 | .navbar-link::after { 73 | border-color: $white; 74 | } 75 | @include until($navbar-breakpoint) { 76 | .navbar-menu { 77 | background-color: $primary; 78 | @include btn-gradient($primary); 79 | } 80 | } 81 | @include from($navbar-breakpoint) { 82 | .navbar-dropdown .navbar-item { 83 | color: $grey-dark; 84 | } 85 | } 86 | .navbar-burger { 87 | span { 88 | background-color: $white; 89 | } 90 | } 91 | @each $name, $pair in $colors { 92 | $color: nth($pair, 1); 93 | $color-invert: nth($pair, 2); 94 | &.is-#{$name} { 95 | @include btn-gradient($color); 96 | @include until($navbar-breakpoint) { 97 | .navbar-menu { 98 | background-color: $color; 99 | @include btn-gradient($color); 100 | } 101 | .navbar-item, 102 | .navbar-link { 103 | color: $color-invert; 104 | &.is-active, 105 | &:hover { 106 | background-color: darken($color, 2); 107 | color: $color-invert; 108 | } 109 | &:after { 110 | border-color: $color-invert; 111 | } 112 | } 113 | } 114 | .navbar-burger { 115 | span { 116 | background-color: $color-invert; 117 | } 118 | } 119 | } 120 | } 121 | } 122 | 123 | .hero { 124 | .navbar:not(.is-transparent) { 125 | @include btn-gradient($primary); 126 | } 127 | @each $name, $pair in $colors { 128 | $color: nth($pair, 1); 129 | $color-invert: nth($pair, 2); 130 | &.is-#{$name} { 131 | .navbar { 132 | @include btn-gradient($color); 133 | } 134 | .navbar-item, 135 | .navbar-link { 136 | color: $color-invert; 137 | &.is-active, 138 | &:hover { 139 | background-color: darken($color, 2); 140 | color: $color-invert; 141 | } 142 | &:after { 143 | border-color: $color-invert; 144 | } 145 | } 146 | .navbar-burger { 147 | span { 148 | background-color: $color-invert; 149 | } 150 | } 151 | @include until($navbar-breakpoint) { 152 | .navbar-menu { 153 | background-color: $color; 154 | @include btn-gradient($color); 155 | } 156 | } 157 | @include from($navbar-breakpoint) { 158 | .navbar-dropdown a.navbar-item:hover { 159 | color: $color-invert; 160 | } 161 | } 162 | } 163 | } 164 | } 165 | -------------------------------------------------------------------------------- /cerulean/_variables.scss: -------------------------------------------------------------------------------- 1 | //////////////////////////////////////////////// 2 | // CERULEAN 3 | //////////////////////////////////////////////// 4 | $orange: #dd5600; 5 | $yellow: #dab424; 6 | $green: #73a839; 7 | $turquoise: #5bc0de; 8 | $blue: #033c73; 9 | $purple: #7e5ea3; 10 | $red: #c71c22; 11 | $grey: #dbdbdb; 12 | 13 | $primary: #2fa4e7 !default; 14 | $primary-dark: #317eac; 15 | $warning: $orange; 16 | $info: #d8dce0; 17 | 18 | $info-invert: #333; 19 | $orange-invert: #fff; 20 | $warning-invert: $orange-invert; 21 | 22 | $family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; 23 | 24 | $title-color: $primary-dark; 25 | $title-weight: 500; 26 | $title-weight-bold: 700; 27 | 28 | $subtitle-weight: 300; 29 | $subtitle-strong-color: 500; 30 | 31 | $box-shadow: 0 0 0 1px $grey; 32 | 33 | $control-height: 2.375em; 34 | -------------------------------------------------------------------------------- /cerulean/bulmaswatch.scss: -------------------------------------------------------------------------------- 1 | /*! bulmaswatch v0.8.1 | MIT License */ 2 | @import "variables"; 3 | @import "bulma"; 4 | @import "overrides"; 5 | -------------------------------------------------------------------------------- /cosmo/_overrides.scss: -------------------------------------------------------------------------------- 1 | // Overrides 2 | @if $bulmaswatch-import-font { 3 | @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700&display=swap"); 4 | } 5 | 6 | .button { 7 | &.is-active, 8 | &.is-focused, 9 | &:active, 10 | &:focus { 11 | box-shadow: inset 1px 1px 4px rgba($grey-darker, 0.3); 12 | } 13 | @each $name, $pair in $colors { 14 | $color: nth($pair, 1); 15 | $color-invert: nth($pair, 2); 16 | &.is-#{$name} { 17 | &.is-hovered, 18 | &:hover { 19 | background-color: darken($color, 10); 20 | } 21 | &.is-active, 22 | &.is-focused, 23 | &:active, 24 | &:focus { 25 | box-shadow: inset 1px 0 3px rgba($grey-darker, 0.3); 26 | background-color: darken($color, 10); 27 | } 28 | } 29 | } 30 | } 31 | 32 | .input, 33 | .textarea { 34 | box-shadow: none; 35 | } 36 | 37 | .notification { 38 | @each $name, $pair in $colors { 39 | $color: nth($pair, 1); 40 | $color-invert: nth($pair, 2); 41 | &.is-#{$name} { 42 | a:not(.button) { 43 | color: $color-invert; 44 | text-decoration: underline; 45 | } 46 | } 47 | } 48 | } 49 | 50 | .progress { 51 | height: $size-small; 52 | } 53 | 54 | .progress, 55 | .tag { 56 | border-radius: $radius; 57 | } 58 | 59 | .navbar:not(.is-transparent) { 60 | background-color: $black-ter; 61 | .navbar-menu { 62 | background-color: $black-ter; 63 | } 64 | .navbar-item, 65 | .navbar-link { 66 | color: $white; 67 | &.has-dropdown:hover .navbar-link, 68 | &:hover { 69 | background-color: rgba($white, 0.05); 70 | } 71 | &.is-active, 72 | &:active { 73 | background-color: rgba($black-ter, 0.05); 74 | color: $primary; 75 | } 76 | } 77 | .navbar-burger:hover { 78 | background-color: rgba($black-ter, 0.05); 79 | } 80 | .navbar-link::after { 81 | border-color: $white; 82 | } 83 | @include from($navbar-breakpoint) { 84 | .navbar-dropdown .navbar-item { 85 | color: $grey-dark; 86 | &:hover { 87 | background-color: rgba($black-ter, 0.05); 88 | } 89 | &.is-active, 90 | &:active { 91 | color: $primary; 92 | } 93 | strong { 94 | color: $grey; 95 | } 96 | } 97 | } 98 | .navbar-burger { 99 | span { 100 | background-color: $white; 101 | } 102 | } 103 | strong { 104 | color: $white-ter; 105 | } 106 | @each $name, $pair in $colors { 107 | $color: nth($pair, 1); 108 | $color-invert: nth($pair, 2); 109 | &.is-#{$name} { 110 | background-color: $color; 111 | .navbar-menu { 112 | background-color: $color; 113 | } 114 | .navbar-item, 115 | .navbar-link { 116 | @media (max-width: $desktop) { 117 | color: $color-invert; 118 | } 119 | &.is-active, 120 | &:active { 121 | color: $color-invert; 122 | } 123 | } 124 | .navbar-burger { 125 | &:hover { 126 | background-color: darken($color, 5); 127 | } 128 | span { 129 | background-color: $color-invert; 130 | } 131 | } 132 | } 133 | } 134 | } 135 | 136 | .hero { 137 | // Colors 138 | .navbar:not(.is-transparent) { 139 | background-color: $black-ter; 140 | } 141 | @each $name, $pair in $colors { 142 | $color: nth($pair, 1); 143 | $color-invert: nth($pair, 2); 144 | &.is-#{$name} { 145 | .navbar { 146 | background: none; 147 | } 148 | .navbar-item, 149 | .navbar-link { 150 | color: $color-invert; 151 | &.is-active, 152 | &:hover { 153 | background-color: darken($color, 10); 154 | color: $color-invert; 155 | } 156 | &:after { 157 | border-color: $color-invert; 158 | } 159 | } 160 | .navbar-menu { 161 | background-color: $color; 162 | } 163 | .navbar-burger { 164 | span { 165 | background-color: $color-invert; 166 | } 167 | } 168 | @include from($navbar-breakpoint) { 169 | .navbar-dropdown a.navbar-item { 170 | color: $grey-dark; 171 | } 172 | } 173 | } 174 | } 175 | } 176 | -------------------------------------------------------------------------------- /cosmo/_variables.scss: -------------------------------------------------------------------------------- 1 | //////////////////////////////////////////////// 2 | // COSMO 3 | //////////////////////////////////////////////// 4 | $grey-darker: #333; 5 | $black-ter: #222; 6 | 7 | $orange: #ff7518; 8 | $yellow: #f4db00; 9 | $green: #3fb618; 10 | $turquoise: #00aba9; 11 | $blue: #1faeff; 12 | $purple: #aa40ff; 13 | $red: #ff2e12; 14 | $grey: #dbdbdb; 15 | 16 | $primary: #2780e3 !default; 17 | $primary-dark: darken(#2780e3, 20); 18 | $warning: $orange; 19 | $info: $purple; 20 | 21 | $orange-invert: #fff; 22 | $warning-invert: $orange-invert; 23 | 24 | $family-sans-serif: "Segoe UI", "Source Sans Pro", Calibri, Candara, Arial, 25 | sans-serif; 26 | 27 | $body-size: 15px; 28 | 29 | $radius: 0; 30 | $radius-small: 0; 31 | $radius-large: 0; 32 | 33 | $link-hover: $primary-dark; 34 | $link-focus: $primary-dark; 35 | $link-active: $primary-dark; 36 | 37 | $button-hover-color: $grey-darker; 38 | $button-focus: $black-ter; 39 | $button-active-color: $black-ter; 40 | 41 | $bulmaswatch-import-font: true !default; 42 | 43 | $box-shadow: 0 0 0 1px $grey; 44 | $card-shadow: 0 0 0 1px $grey; 45 | 46 | $control-height: 2.6667em; 47 | -------------------------------------------------------------------------------- /cosmo/bulmaswatch.scss: -------------------------------------------------------------------------------- 1 | /*! bulmaswatch v0.8.1 | MIT License */ 2 | @import "variables"; 3 | @import "bulma"; 4 | @import "overrides"; 5 | -------------------------------------------------------------------------------- /cyborg/_overrides.scss: -------------------------------------------------------------------------------- 1 | // Overrides 2 | 3 | .hero { 4 | background-color: $black-ter; 5 | } 6 | 7 | .delete { 8 | background-color: rgba(255, 255, 255, 0.2); 9 | 10 | &:hover { 11 | background-color: rgba(255, 255, 255, 0.1); 12 | } 13 | } 14 | 15 | .label { 16 | color: $grey-lighter; 17 | } 18 | 19 | .notification { 20 | @each $name, $pair in $colors { 21 | $color: nth($pair, 1); 22 | $color-invert: nth($pair, 2); 23 | 24 | &.is-#{$name} { 25 | a:not(.button) { 26 | color: $color-invert; 27 | text-decoration: underline; 28 | } 29 | } 30 | } 31 | } 32 | 33 | .card { 34 | $card-border-color: lighten($grey-darker, 5); 35 | box-shadow: none; 36 | background-color: $grey-darker; 37 | 38 | .card-header { 39 | box-shadow: none; 40 | background-color: rgba($black-bis, 0.2); 41 | } 42 | 43 | .card-footer { 44 | background-color: rgba($black-bis, 0.2); 45 | } 46 | 47 | .card-footer, 48 | .card-footer-item { 49 | border-color: $card-border-color; 50 | } 51 | } 52 | 53 | .message-header { 54 | background-color: $black-ter; 55 | color: $white; 56 | } 57 | 58 | .message-body { 59 | border-color: $black-ter; 60 | } 61 | 62 | .modal-card-body { 63 | background-color: $black-ter; 64 | } 65 | 66 | .modal-card-foot, 67 | .modal-card-head { 68 | border-color: $black-ter; 69 | } 70 | 71 | .navbar { 72 | border: 1px solid $grey-darker; 73 | .navbar-dropdown { 74 | border: 1px solid $grey-darker; 75 | } 76 | 77 | @include until($navbar-breakpoint) { 78 | .navbar-menu { 79 | background-color: $navbar-background-color; 80 | } 81 | } 82 | } 83 | 84 | .hero { 85 | .navbar { 86 | &, 87 | .navbar-menu, 88 | .navbar-dropdown { 89 | border: none; 90 | } 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /cyborg/_variables.scss: -------------------------------------------------------------------------------- 1 | //////////////////////////////////////////////// 2 | // CYBORG 3 | //////////////////////////////////////////////// 4 | $grey-accent: hsl(0, 0%, 14%); 5 | $grey-darker: hsl(0, 0%, 21%); 6 | $grey-dark: hsl(0, 0%, 29%); 7 | $grey: hsl(0, 0%, 48%); 8 | $grey-light: hsl(0, 0%, 71%); 9 | $grey-lighter: hsl(0, 0%, 86%); 10 | 11 | $primary: #2a9fd6 !default; 12 | $primary-light: lighten($primary, 10); 13 | $link: #3273e2; 14 | 15 | $white: #fff; 16 | $white-ter: #f5f5f5; 17 | 18 | $body-background-color: #000; 19 | $background: $grey-darker; 20 | $footer-background-color: $background; 21 | 22 | $border: $grey-dark; 23 | 24 | $title-color: $white; 25 | $subtitle-color: $white-ter; 26 | $subtitle-strong-color: $white-ter; 27 | 28 | $text: $white; 29 | $text-light: lighten($text, 10); 30 | $text-strong: darken($text, 5); 31 | 32 | $box-color: $text; 33 | $box-background-color: $grey-accent; 34 | $box-shadow: none; 35 | 36 | $link-hover: $primary-light; 37 | $link-focus: $primary-light; 38 | $link-active: $primary-light; 39 | $link-hover-border: $grey-dark; 40 | $link-active-border: $grey; 41 | 42 | $button-color: $text; 43 | $button-background-color: #111; 44 | $button-border-color: $grey-darker; 45 | $button-hover-color: $grey-lighter; 46 | $button-focus: $grey-light; 47 | $button-active-color: $grey-light; 48 | 49 | $input-color: $grey-darker; 50 | $input-icon-color: $grey; 51 | $input-icon-active-color: $input-color; 52 | 53 | $table-color: $text; 54 | $table-head: $grey-lighter; 55 | $table-background-color: $grey-darker; 56 | $table-cell-border: 1px solid $grey-dark; 57 | 58 | $table-row-hover-background-color: $grey-dark; 59 | $table-striped-row-even-background-color: $grey-dark; 60 | $table-striped-row-even-hover-background-color: lighten($grey-dark, 4); 61 | 62 | $pagination-border-color: $grey-darker; 63 | $pagination-disabled: $grey-light; 64 | $pagination-disabled-background-color: $grey-dark; 65 | 66 | $dropdown-content-background-color: $background; 67 | $dropdown-item-color: $text; 68 | 69 | $navbar-background-color: $body-background-color; 70 | $navbar-item-color: $white; 71 | $navbar-item-hover-color: $white; 72 | $navbar-item-hover-background-color: rgba($white, 0.12); 73 | $navbar-item-active-color: $link; 74 | $navbar-item-active-background-color: $navbar-item-hover-background-color; 75 | 76 | $navbar-dropdown-background-color: $body-background-color; 77 | $navbar-dropdown-item-hover-color: $white; 78 | $navbar-dropdown-item-hover-background-color: $navbar-item-hover-background-color; 79 | $navbar-dropdown-item-active-background-color: $navbar-item-hover-background-color; 80 | $navbar-dropdown-arrow: $white; 81 | 82 | $tabs-boxed-link-active-background-color: $body-background-color; 83 | 84 | $file-cta-background-color: $grey-darker; 85 | 86 | $progress-bar-background-color: $grey-dark; 87 | 88 | $panel-heading-background-color: $grey-dark; 89 | -------------------------------------------------------------------------------- /cyborg/bulmaswatch.scss: -------------------------------------------------------------------------------- 1 | /*! bulmaswatch v0.8.1 | MIT License */ 2 | @import "variables"; 3 | @import "bulma"; 4 | @import "overrides"; 5 | -------------------------------------------------------------------------------- /darkly/_overrides.scss: -------------------------------------------------------------------------------- 1 | // Overrides 2 | @if $bulmaswatch-import-font { 3 | @import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic&display=swap"); 4 | } 5 | 6 | hr { 7 | height: $border-width; 8 | } 9 | 10 | h6 { 11 | text-transform: uppercase; 12 | letter-spacing: 0.5px; 13 | } 14 | 15 | .hero { 16 | background-color: $grey-dark; 17 | } 18 | 19 | a { 20 | transition: all 200ms ease; 21 | } 22 | 23 | .button { 24 | transition: all 200ms ease; 25 | border-width: $border-width; 26 | color: $white; 27 | 28 | &.is-active, 29 | &.is-focused, 30 | &:active, 31 | &:focus { 32 | box-shadow: 0 0 0 2px rgba($button-focus-border-color, 0.5); 33 | } 34 | @each $name, $pair in $colors { 35 | $color: nth($pair, 1); 36 | $color-invert: nth($pair, 2); 37 | 38 | &.is-#{$name} { 39 | &.is-hovered, 40 | &:hover { 41 | background-color: lighten($color, 7.5%); 42 | } 43 | 44 | &.is-active, 45 | &.is-focused, 46 | &:active, 47 | &:focus { 48 | border-color: $color; 49 | box-shadow: 0 0 0 2px rgba($color, 0.5); 50 | } 51 | } 52 | } 53 | } 54 | 55 | .label { 56 | color: $grey-lighter; 57 | } 58 | 59 | .input, 60 | .textarea { 61 | transition: all 200ms ease; 62 | box-shadow: none; 63 | border-width: $border-width; 64 | padding-left: 1em; 65 | padding-right: 1em; 66 | } 67 | 68 | .select { 69 | &:after, 70 | select { 71 | border-width: $border-width; 72 | } 73 | } 74 | 75 | .control { 76 | &.has-addons { 77 | .button, 78 | .input, 79 | .select { 80 | margin-right: -$border-width; 81 | } 82 | } 83 | } 84 | 85 | .notification { 86 | background-color: $grey-dark; 87 | } 88 | 89 | .card { 90 | $card-border-color: lighten($grey-darker, 5); 91 | box-shadow: none; 92 | border: $border-width solid $card-border-color; 93 | background-color: $grey-darker; 94 | border-radius: $radius; 95 | 96 | .card-image { 97 | img { 98 | border-radius: $radius $radius 0 0; 99 | } 100 | } 101 | 102 | .card-header { 103 | box-shadow: none; 104 | background-color: rgba($black-bis, 0.2); 105 | border-radius: $radius $radius 0 0; 106 | } 107 | 108 | .card-footer { 109 | background-color: rgba($black-bis, 0.2); 110 | } 111 | 112 | .card-footer, 113 | .card-footer-item { 114 | border-width: $border-width; 115 | border-color: $card-border-color; 116 | } 117 | } 118 | 119 | .notification { 120 | @each $name, $pair in $colors { 121 | $color: nth($pair, 1); 122 | $color-invert: nth($pair, 2); 123 | 124 | &.is-#{$name} { 125 | a:not(.button) { 126 | color: $color-invert; 127 | text-decoration: underline; 128 | } 129 | } 130 | } 131 | } 132 | 133 | .tag { 134 | border-radius: $radius; 135 | } 136 | 137 | .menu-list { 138 | a { 139 | transition: all 300ms ease; 140 | } 141 | } 142 | 143 | .modal-card-body { 144 | background-color: $grey-darker; 145 | } 146 | 147 | .modal-card-foot, 148 | .modal-card-head { 149 | border-color: $grey-dark; 150 | } 151 | 152 | .message-header { 153 | font-weight: $weight-bold; 154 | background-color: $grey-dark; 155 | color: $white; 156 | } 157 | 158 | .message-body { 159 | border-width: $border-width; 160 | border-color: $grey-dark; 161 | } 162 | 163 | .navbar { 164 | border-radius: $radius; 165 | 166 | &.is-transparent { 167 | background: none; 168 | } 169 | 170 | &.is-primary { 171 | .navbar-dropdown { 172 | a.navbar-item.is-active { 173 | background-color: $link; 174 | } 175 | } 176 | } 177 | 178 | @include until($navbar-breakpoint) { 179 | .navbar-menu { 180 | background-color: $navbar-background-color; 181 | border-radius: 0 0 $radius $radius; 182 | } 183 | } 184 | } 185 | 186 | .hero .navbar, 187 | body > .navbar { 188 | border-radius: 0; 189 | } 190 | 191 | .pagination-link, 192 | .pagination-next, 193 | .pagination-previous { 194 | border-width: $border-width; 195 | } 196 | 197 | .panel-block, 198 | .panel-heading, 199 | .panel-tabs { 200 | border-width: $border-width; 201 | 202 | &:first-child { 203 | border-top-width: $border-width; 204 | } 205 | } 206 | 207 | .panel-heading { 208 | font-weight: $weight-bold; 209 | } 210 | 211 | .panel-tabs { 212 | a { 213 | border-width: $border-width; 214 | margin-bottom: -$border-width; 215 | 216 | &.is-active { 217 | border-bottom-color: $link-active; 218 | } 219 | } 220 | } 221 | 222 | .panel-block { 223 | &:hover { 224 | color: $link-hover; 225 | 226 | .panel-icon { 227 | color: $link-hover; 228 | } 229 | } 230 | 231 | &.is-active { 232 | .panel-icon { 233 | color: $link-active; 234 | } 235 | } 236 | } 237 | 238 | .tabs { 239 | a { 240 | border-bottom-width: $border-width; 241 | margin-bottom: -$border-width; 242 | } 243 | 244 | ul { 245 | border-bottom-width: $border-width; 246 | } 247 | 248 | &.is-boxed { 249 | a { 250 | border-width: $border-width; 251 | } 252 | 253 | li.is-active a { 254 | background-color: darken($grey-darker, 4); 255 | } 256 | } 257 | 258 | &.is-toggle { 259 | li a { 260 | border-width: $border-width; 261 | margin-bottom: 0; 262 | } 263 | 264 | li + li { 265 | margin-left: -$border-width; 266 | } 267 | } 268 | } 269 | 270 | .hero { 271 | // Colors 272 | @each $name, $pair in $colors { 273 | $color: nth($pair, 1); 274 | $color-invert: nth($pair, 2); 275 | 276 | &.is-#{$name} { 277 | .navbar { 278 | .navbar-dropdown { 279 | .navbar-item:hover { 280 | background-color: $navbar-dropdown-item-hover-background-color; 281 | } 282 | } 283 | } 284 | } 285 | } 286 | } 287 | -------------------------------------------------------------------------------- /darkly/_variables.scss: -------------------------------------------------------------------------------- 1 | //////////////////////////////////////////////// 2 | // DARKLY 3 | //////////////////////////////////////////////// 4 | $grey-lighter: #dbdee0; 5 | $grey-light: #8c9b9d; 6 | $grey: darken($grey-light, 18); 7 | $grey-dark: darken($grey, 18); 8 | $grey-darker: darken($grey, 23); 9 | 10 | $orange: #e67e22; 11 | $yellow: #f1b70e; 12 | $green: #2ecc71; 13 | $turquoise: #1abc9c; 14 | $blue: #3498db; 15 | $purple: #8e44ad; 16 | $red: #e74c3c; 17 | $white-ter: #ecf0f1; 18 | $primary: #375a7f !default; 19 | $yellow-invert: #fff; 20 | 21 | $family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", 22 | "Helvetica Neue", "Helvetica", "Arial", sans-serif; 23 | $family-monospace: "Inconsolata", "Consolas", "Monaco", monospace; 24 | 25 | $radius-small: 3px; 26 | $radius: 0.4em; 27 | $radius-large: 8px; 28 | $size-6: 15px; 29 | $size-7: 0.85em; 30 | $title-weight: 500; 31 | $subtitle-weight: 400; 32 | $subtitle-color: $grey-dark; 33 | 34 | $border-width: 2px; 35 | $border: $grey; 36 | 37 | $body-background-color: darken($grey-darker, 4); 38 | $body-size: 15px; 39 | 40 | $background: $grey-darker; 41 | $footer-background-color: $background; 42 | $button-background-color: $background; 43 | $button-border-color: lighten($button-background-color, 15); 44 | 45 | $title-color: #fff; 46 | $subtitle-color: $grey-light; 47 | $subtitle-strong-color: $grey-light; 48 | 49 | $text: #fff; 50 | $text-light: lighten($text, 10); 51 | $text-strong: darken($text, 5); 52 | 53 | $box-color: $text; 54 | $box-background-color: $grey-dark; 55 | $box-shadow: none; 56 | 57 | $link: $turquoise; 58 | $link-hover: lighten($link, 5); 59 | $link-focus: darken($link, 5); 60 | $link-active: darken($link, 5); 61 | $link-focus-border: $grey-light; 62 | 63 | $button-color: $primary; 64 | $button-hover-color: darken($text, 5); // text-dark 65 | $button-focus: darken($text, 5); // text-dark 66 | $button-active-color: darken($text, 5); // text-dark 67 | $button-disabled-background-color: $grey-light; 68 | 69 | $control-height: 2.5em; 70 | 71 | $input-color: $grey-darker; 72 | $input-icon-color: $grey; 73 | $input-icon-active-color: $input-color; 74 | $input-hover-color: $grey-light; 75 | $input-disabled-background-color: $grey-light; 76 | $input-disabled-border: $grey-lighter; 77 | 78 | $table-color: $text; 79 | $table-head: $grey-lighter; 80 | $table-background-color: $grey-dark; 81 | $table-cell-border: 1px solid $grey; 82 | 83 | $table-row-hover-background-color: $grey-darker; 84 | $table-striped-row-even-background-color: $grey-darker; 85 | $table-striped-row-even-hover-background-color: lighten($grey-darker, 2); 86 | 87 | $pagination-color: $link; 88 | $pagination-border-color: $border; 89 | 90 | $navbar-height: 4rem; 91 | 92 | $navbar-background-color: $primary; 93 | $navbar-item-color: $text; 94 | $navbar-item-hover-color: $link; 95 | $navbar-item-hover-background-color: transparent; 96 | $navbar-item-active-color: $link; 97 | $navbar-dropdown-arrow: #fff; 98 | $navbar-divider-background-color: rgba(0, 0, 0, 0.2); 99 | $navbar-dropdown-border-top: 1px solid $navbar-divider-background-color; 100 | $navbar-dropdown-background-color: $primary; 101 | $navbar-dropdown-item-hover-color: $grey-lighter; 102 | $navbar-dropdown-item-hover-background-color: transparent; 103 | $navbar-dropdown-item-active-background-color: transparent; 104 | $navbar-dropdown-item-active-color: $link; 105 | 106 | $dropdown-content-background-color: $background; 107 | $dropdown-item-color: $text; 108 | 109 | $progress-value-background-color: $grey-lighter; 110 | 111 | $bulmaswatch-import-font: true !default; 112 | 113 | $file-cta-background-color: $grey-darker; 114 | 115 | $progress-bar-background-color: $grey-dark; 116 | 117 | $panel-heading-background-color: $grey-dark; 118 | -------------------------------------------------------------------------------- /darkly/bulmaswatch.scss: -------------------------------------------------------------------------------- 1 | /*! bulmaswatch v0.8.1 | MIT License */ 2 | @import "variables"; 3 | @import "bulma"; 4 | @import "overrides"; 5 | -------------------------------------------------------------------------------- /darkly/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jenil/bulmaswatch/4968d8d0ced4402c5c236b7a47b12da1f3594927/darkly/thumbnail.png -------------------------------------------------------------------------------- /default/_overrides.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jenil/bulmaswatch/4968d8d0ced4402c5c236b7a47b12da1f3594927/default/_overrides.scss -------------------------------------------------------------------------------- /default/_variables.scss: -------------------------------------------------------------------------------- 1 | //////////////////////////////////////////////// 2 | // DEFAULT 3 | //////////////////////////////////////////////// 4 | -------------------------------------------------------------------------------- /default/bulmaswatch.scss: -------------------------------------------------------------------------------- 1 | /*! bulmaswatch v0.8.1 | MIT License */ 2 | @import "variables"; 3 | @import "bulma"; 4 | @import "overrides"; 5 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jenil/bulmaswatch/4968d8d0ced4402c5c236b7a47b12da1f3594927/favicon.ico -------------------------------------------------------------------------------- /flatly/_overrides.scss: -------------------------------------------------------------------------------- 1 | // Overrides 2 | @if $bulmaswatch-import-font { 3 | @import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic&display=swap"); 4 | } 5 | 6 | hr { 7 | height: $border-width; 8 | } 9 | 10 | h6 { 11 | text-transform: uppercase; 12 | letter-spacing: 0.5px; 13 | } 14 | 15 | a { 16 | transition: all 200ms ease; 17 | } 18 | 19 | .button { 20 | transition: all 200ms ease; 21 | border-width: $border-width; 22 | 23 | &.is-active, 24 | &.is-focused, 25 | &:active, 26 | &:focus { 27 | box-shadow: 0 0 0 2px rgba($button-focus-border-color, 0.25); 28 | } 29 | @each $name, $pair in $colors { 30 | $color: nth($pair, 1); 31 | $color-invert: nth($pair, 2); 32 | 33 | &.is-#{$name} { 34 | &.is-active, 35 | &.is-focused, 36 | &:active, 37 | &:focus { 38 | border-color: $color; 39 | box-shadow: 0 0 0 2px rgba($color, 0.25); 40 | } 41 | } 42 | } 43 | } 44 | 45 | .input, 46 | .textarea { 47 | transition: all 200ms ease; 48 | box-shadow: none; 49 | border-width: $border-width; 50 | } 51 | 52 | .select { 53 | &:after, 54 | select { 55 | border-width: $border-width; 56 | } 57 | } 58 | 59 | .control { 60 | &.has-addons { 61 | .button, 62 | .input, 63 | .select { 64 | margin-right: -$border-width; 65 | } 66 | } 67 | } 68 | 69 | .card { 70 | box-shadow: none; 71 | border: $border-width solid $grey-lighter; 72 | background-color: $white-bis; 73 | border-radius: $radius; 74 | 75 | .card-image { 76 | img { 77 | border-radius: $radius $radius 0 0; 78 | } 79 | } 80 | 81 | .card-header { 82 | box-shadow: none; 83 | background-color: rgba($white-ter, 0.8); 84 | border-radius: $radius $radius 0 0; 85 | } 86 | 87 | .card-footer { 88 | background-color: rgba($white-ter, 0.8); 89 | } 90 | 91 | .card-footer, 92 | .card-footer-item { 93 | border-width: $border-width; 94 | } 95 | } 96 | 97 | .notification { 98 | @each $name, $pair in $colors { 99 | $color: nth($pair, 1); 100 | $color-invert: nth($pair, 2); 101 | 102 | &.is-#{$name} { 103 | a:not(.button) { 104 | color: $color-invert; 105 | text-decoration: underline; 106 | } 107 | } 108 | } 109 | } 110 | 111 | .tag { 112 | border-radius: $radius; 113 | } 114 | 115 | .menu-list li a { 116 | transition: all 300ms ease; 117 | } 118 | 119 | .message-header { 120 | font-weight: $weight-bold; 121 | } 122 | 123 | .message-body { 124 | border-width: $border-width; 125 | } 126 | 127 | .navbar { 128 | border-radius: $radius; 129 | 130 | .navbar-menu { 131 | box-shadow: none; 132 | } 133 | 134 | .navbar-dropdown { 135 | box-shadow: none; 136 | .navbar-item { 137 | color: $button-color; 138 | } 139 | } 140 | 141 | @include until($navbar-breakpoint) { 142 | color: $navbar-item-color; 143 | .navbar-menu { 144 | background-color: $navbar-dropdown-background-color; 145 | border-radius: 0 0 $radius $radius; 146 | } 147 | 148 | .navbar-item, 149 | .navbar-link { 150 | &:not(.is-active):not(:hover) { 151 | color: $button-color; 152 | } 153 | } 154 | } 155 | 156 | &.is-transparent { 157 | background-color: transparent; 158 | color: $text; 159 | 160 | .navbar-item, 161 | .navbar-link { 162 | color: $button-color; 163 | 164 | &:hover { 165 | color: $link; 166 | background-color: transparent; 167 | } 168 | 169 | &.is-active { 170 | color: $link; 171 | background-color: transparent; 172 | } 173 | } 174 | 175 | .navbar-link:after { 176 | border-color: $button-color; 177 | } 178 | 179 | .navbar-burger:hover { 180 | background-color: $white-ter; 181 | } 182 | } 183 | } 184 | 185 | .hero .navbar, 186 | body > .navbar { 187 | border-radius: 0; 188 | } 189 | 190 | .pagination-link, 191 | .pagination-next, 192 | .pagination-previous { 193 | border-width: $border-width; 194 | } 195 | 196 | .panel-block, 197 | .panel-heading, 198 | .panel-tabs { 199 | border-width: $border-width; 200 | 201 | &:first-child { 202 | border-top-width: $border-width; 203 | } 204 | } 205 | 206 | .panel-heading { 207 | font-weight: $weight-bold; 208 | } 209 | 210 | .panel-tabs { 211 | a { 212 | border-width: $border-width; 213 | margin-bottom: -$border-width; 214 | } 215 | } 216 | 217 | .panel-block { 218 | &:hover { 219 | color: $button-hover-color; 220 | 221 | .panel-icon { 222 | color: $button-hover-color; 223 | } 224 | } 225 | } 226 | 227 | .tabs { 228 | a { 229 | border-bottom-width: $border-width; 230 | margin-bottom: -$border-width; 231 | } 232 | 233 | ul { 234 | border-bottom-width: $border-width; 235 | } 236 | 237 | &.is-boxed { 238 | a { 239 | border-width: $border-width; 240 | } 241 | } 242 | 243 | &.is-toggle { 244 | li a { 245 | border-width: $border-width; 246 | margin-bottom: 0; 247 | } 248 | 249 | li + li { 250 | margin-left: -$border-width; 251 | } 252 | } 253 | } 254 | 255 | .hero { 256 | .navbar { 257 | background-color: $primary; 258 | .navbar-menu { 259 | border-radius: 0; 260 | } 261 | } 262 | 263 | @each $name, $pair in $colors { 264 | $color: nth($pair, 1); 265 | $color-invert: nth($pair, 2); 266 | 267 | &.is-#{$name} { 268 | .navbar { 269 | background-color: $color; 270 | 271 | .navbar-item, 272 | .navbar-link { 273 | &:not(.is-active):not(:hover) { 274 | color: $color-invert; 275 | } 276 | } 277 | 278 | @include from($navbar-breakpoint) { 279 | .navbar-dropdown { 280 | .navbar-item:not(.is-active):not(:hover) { 281 | color: $button-color; 282 | } 283 | } 284 | } 285 | } 286 | } 287 | } 288 | } 289 | -------------------------------------------------------------------------------- /flatly/_variables.scss: -------------------------------------------------------------------------------- 1 | //////////////////////////////////////////////// 2 | // FLATLY 3 | //////////////////////////////////////////////// 4 | $grey: #8c9b9d; 5 | $grey-light: #a9afb7; 6 | $grey-lighter: #dee2e5; 7 | $orange: #e67e22; 8 | $yellow: #f1b70e; 9 | $green: #2ecc71; 10 | $turquoise: #1abc9c; 11 | $blue: #3498db; 12 | $purple: #8e44ad; 13 | $red: #e74c3c; 14 | $white-ter: #ecf0f1; 15 | $primary: #34495e !default; 16 | $yellow-invert: #fff; 17 | 18 | $family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", 19 | "Helvetica Neue", "Helvetica", "Arial", sans-serif; 20 | $family-monospace: "Inconsolata", "Consolas", "Monaco", monospace; 21 | 22 | $radius-small: 3px; 23 | $radius: 0.4em; 24 | $radius-large: 8px; 25 | 26 | $size-7: 0.85em; 27 | $title-weight: 500; 28 | $subtitle-weight: 400; 29 | $subtitle-color: darken($grey, 20); 30 | 31 | $border-width: 2px; 32 | 33 | $body-size: 15px; 34 | $footer-background-color: $white-ter; 35 | 36 | $text: $primary; 37 | $text-light: lighten($primary, 10); 38 | $text-strong: darken($primary, 5); 39 | 40 | $box-color: $text; 41 | $box-background-color: $white-ter; 42 | $box-shadow: none; 43 | 44 | $link: $turquoise; 45 | $link-hover: darken($link, 10); 46 | $link-focus: darken($link, 10); 47 | $link-active: darken($link, 10); 48 | 49 | $button-color: $primary; 50 | $button-hover-color: darken($primary, 5); // primary-dark 51 | $button-focus: darken($primary, 5); // primary-dark 52 | $button-active-color: darken($primary, 5); // primary-dark 53 | 54 | $navbar-height: 4rem; 55 | $navbar-background-color: $primary; 56 | $navbar-item-color: $white-ter; 57 | $navbar-item-hover-color: $link; 58 | $navbar-item-hover-background-color: transparent; 59 | $navbar-item-active-color: $link; 60 | $navbar-dropdown-arrow: #fff; 61 | $navbar-dropdown-background-color: $white-ter; 62 | $navbar-divider-background-color: $grey-lighter; 63 | $navbar-dropdown-border-top: 1px solid $navbar-divider-background-color; 64 | $navbar-dropdown-item-hover-color: $link; 65 | $navbar-dropdown-item-hover-background-color: transparent; 66 | $navbar-dropdown-item-active-background-color: transparent; 67 | $navbar-dropdown-item-active-color: $link; 68 | 69 | $bulmaswatch-import-font: true !default; 70 | 71 | $control-height: 2.5em; 72 | -------------------------------------------------------------------------------- /flatly/bulmaswatch.scss: -------------------------------------------------------------------------------- 1 | /*! bulmaswatch v0.8.1 | MIT License */ 2 | @import "variables"; 3 | @import "bulma"; 4 | @import "overrides"; 5 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | import gulp from 'gulp' 2 | import nodeSass from 'node-sass' 3 | import gulpSass from 'gulp-sass'; 4 | const sass = gulpSass(nodeSass); 5 | import sourcemaps from 'gulp-sourcemaps' 6 | import autoprefixer from 'gulp-autoprefixer' 7 | import csso from 'gulp-csso' 8 | import rename from 'gulp-rename' 9 | import browserSyncSrc from 'browser-sync' 10 | const browserSync = browserSyncSrc.create() 11 | import cp from 'child_process' 12 | import {deleteSync, deleteAsync} from 'del'; 13 | import data from 'gulp-data' 14 | import pluck from 'gulp-pluck' 15 | import frontMatter from 'gulp-front-matter' 16 | 17 | import pkg from './package.json' assert { type: "json" } 18 | const VERSION = pkg.version; 19 | const HOME = pkg.homepage; 20 | const CDN = 'https://unpkg.com/bulmaswatch'; 21 | var changedTheme = ''; 22 | 23 | gulp.task('clean', async function() { 24 | await deleteAsync(['*/*.css', '*/*.css.map']); 25 | }); 26 | 27 | gulp.task('jekyll-build', function(done) { 28 | browserSync.notify('Jekyll build'); 29 | cp.exec('bundle exec jekyll build --config _config.yml,_config.local.yml', function(err, stdout, stderr) { 30 | console.log(stdout); 31 | }).on('exit', function(code) { 32 | done(code === 0 ? null : 'ERROR: Jekyll process exited with code: ' + code); 33 | }); 34 | }); 35 | 36 | gulp.task('jekyll-rebuild', gulp.series('jekyll-build', function() { 37 | browserSync.reload(); 38 | })); 39 | 40 | gulp.task('sass:dev', function() { 41 | console.log('Building', changedTheme); 42 | return gulp.src(changedTheme ? `${changedTheme}/*.scss` : '*/*.scss') 43 | .pipe(sourcemaps.init()) 44 | .pipe(sass({ 45 | includePaths: 'node_modules/bulma' 46 | }).on('error', sass.logError)) 47 | .pipe(rename({ 48 | suffix: '.min' 49 | })) 50 | .pipe(sourcemaps.write('./')) 51 | .pipe(gulp.dest(changedTheme ? `_site/${changedTheme}` : '_site/')) 52 | .pipe(browserSync.reload({ 53 | stream: true 54 | })) 55 | .pipe(gulp.dest(changedTheme ? `_site/${changedTheme}` : '.')); 56 | }); 57 | 58 | 59 | gulp.task('serve', gulp.parallel('sass:dev', 'jekyll-build', function() { 60 | browserSync.init({ 61 | server: { 62 | baseDir: '_site' 63 | }, 64 | ghostMode: { 65 | clicks: false, 66 | forms: false 67 | }, 68 | reloadDelay: 500 69 | }); 70 | 71 | gulp.watch(['*/*.scss', '!_site/**'], gulp.series('sass:dev')).on('change', function(event) { 72 | console.log('SCSS: File ' + event.path + ' was ' + event.type + ', running tasks...'); 73 | changedTheme = event.path.split('/')[event.path.split('/').length - 2] 74 | }); 75 | gulp.watch(['**/*.{html,md}', '!_site/**'], gulp.series('jekyll-rebuild')).on('change', function(event) { 76 | console.log('HTML: File ' + event.path + ' was ' + event.type + ', running tasks...'); 77 | }); 78 | })); 79 | 80 | gulp.task('sass', gulp.series('clean', function compile() { 81 | return gulp.src('*/*.scss') 82 | .pipe(sourcemaps.init()) 83 | .pipe(sass({ 84 | includePaths: 'node_modules/bulma' 85 | }).on('error', sass.logError)) 86 | .pipe(rename({ 87 | suffix: '.min' 88 | })) 89 | .pipe(autoprefixer()) 90 | .pipe(csso()) 91 | .pipe(sourcemaps.write('.')) 92 | .pipe(gulp.dest('.')); 93 | })); 94 | 95 | gulp.task('api', function() { 96 | var API = { 97 | version: VERSION, 98 | themes: [] 99 | }; 100 | 101 | deleteSync(['api/*']); 102 | 103 | return gulp.src('./_themes/*.md') 104 | .pipe(frontMatter({ 105 | property: 'meta' 106 | })) 107 | .pipe(data(function(file) { 108 | delete file.meta.order; 109 | file.meta.preview = HOME + '/' + file.meta.name.toLowerCase() + '/'; 110 | file.meta.thumb = HOME + '/thumb/?' + file.meta.name.toLowerCase(); 111 | file.meta.css = CDN + '@' + VERSION + '/' + file.meta.name.toLowerCase() + '/bulmaswatch.min.css'; 112 | file.meta.scss = CDN + '@' + VERSION + '/' + file.meta.name.toLowerCase() + '/bulmaswatch.scss'; 113 | file.meta.scssVariables = CDN + '@' + VERSION + '/' + file.meta.name.toLowerCase() + '/_variables.scss'; 114 | })) 115 | .pipe(pluck('meta', 'themes.json')) 116 | .pipe(data(function(file) { 117 | API.themes = file.meta; 118 | file.contents = new Buffer(JSON.stringify(API)); 119 | })) 120 | .pipe(gulp.dest('api')); 121 | }); 122 | 123 | gulp.task('default', gulp.series('serve')); 124 | 125 | gulp.task('build', gulp.parallel('sass', 'api')); 126 | -------------------------------------------------------------------------------- /help.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Help 3 | layout: page 4 | permalink: /help/ 5 | route: help 6 | --- 7 | 8 |
9 |
10 |
11 |

Getting started

12 |
    13 |
  1. Get started with 14 | Bulma 15 |
    2. 16 |
  2. Download the bulmaswatch.min.css for the respective theme
    3. 17 |
  3. Replace bulma.css with bulmaswatch.min.css
    4. 18 |
19 |
20 |

Use NPM

21 |
    22 |
  1. Install package npm install bulmaswatch
    2. 23 |
  2. Each theme consist of two files - _variables.scss & _overrides.scss
    3. 24 |
  3. Import the respective theme files from node_modules/bulmaswatch/<themename>/<filename>
    4. 25 |
  4. Make sure you import bulma before the _overrides.scss for the theme to work properly
    5. 26 |
  5. An example of your custom theme file is the bulmaswatch.scss for each theme
    6. 27 |
28 |
29 |

API

30 |

You can use the API to integrate the themes with your platform.

31 |
32 | 
GET {{ site.url }}{{site.baseurl}}/api/themes.json
33 |
34 |

This returns all the themes with important URLs. Here is how a sample theme looks:

35 | {% highlight json %} 36 | { 37 | "name": "Cosmo", 38 | "description": "An ode to Metro", 39 | "preview": "https://jenil.github.io/bulmaswatch/cosmo/", 40 | "thumb": "https://jenil.github.io/bulmaswatch/thumb/?cosmo", 41 | "css": "https://cdn.rawgit.com/jenil/bulmaswatch/gh-pages/cosmo/bulmaswatch.min.css", 42 | "scss": "https://cdn.rawgit.com/jenil/bulmaswatch/gh-pages/cosmo/bulmaswatch.scss", 43 | "scssVariables": "https://cdn.rawgit.com/jenil/bulmaswatch/gh-pages/cosmo/_variables.scss" 44 | }{% endhighlight %} 45 |
46 |
47 |
48 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | title: Home 3 | layout: home 4 | route: home 5 | --- 6 | 7 |
8 |
9 |

Getting Started

10 |

The easiest way to start using a theme is using CDN:

11 | {% highlight html %}{% endhighlight %} 12 |

Simply replace default with the theme name like flatly.

13 |

For more advance usage check the help page.

14 |
15 |
16 |
17 |
18 |
19 |
20 | {% assign themes = (site.themes | sort: 'order') %} 21 | {% for theme in themes %} 22 |
23 |
24 |
25 | 26 |
27 |
28 |
{{ theme.description }}
29 |
30 | Preview 32 | Download 34 | 36 | 37 | 38 |
39 |
40 |
41 | {% endfor %} 42 |
43 |
44 |
45 | 46 | 47 | 48 | 49 | Give a shout-out! 50 | 51 |
52 |
53 |
54 | -------------------------------------------------------------------------------- /journal/_overrides.scss: -------------------------------------------------------------------------------- 1 | // Overrides 2 | @if $bulmaswatch-import-font { 3 | @import url("https://fonts.googleapis.com/css?family=News+Cycle:400,700&display=swap"); 4 | } 5 | 6 | .button { 7 | font-family: $family-heading; 8 | font-weight: 700; 9 | padding-left: 1em; 10 | padding-right: 1em; 11 | } 12 | 13 | .card-header-title, 14 | .navbar-item, 15 | .navbar-link, 16 | .menu-label, 17 | .message-header, 18 | .modal-card-title, 19 | .panel-heading, 20 | .subtitle, 21 | .title, 22 | h1, 23 | h2, 24 | h3, 25 | h4, 26 | h5, 27 | h6 { 28 | font-weight: 700; 29 | font-family: $family-heading; 30 | } 31 | 32 | .notification { 33 | @each $name, $pair in $colors { 34 | $color: nth($pair, 1); 35 | $color-invert: nth($pair, 2); 36 | 37 | &.is-#{$name} { 38 | a:not(.button) { 39 | color: $color-invert; 40 | text-decoration: underline; 41 | } 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /journal/_variables.scss: -------------------------------------------------------------------------------- 1 | //////////////////////////////////////////////// 2 | // JOURNAL 3 | //////////////////////////////////////////////// 4 | $grey-darker: #363636; 5 | $grey-dark: #4a4a4a; 6 | $grey: #7a7a7a; 7 | $grey-light: #b5b5b5; 8 | $grey-lighter: #dbdbdb; 9 | 10 | $orange: #f57a00; 11 | $yellow: #f5e625; 12 | $green: #22b24c; 13 | $turquoise: #00aba9; 14 | $blue: #369; 15 | $purple: #aa40ff; 16 | $red: #ff2e12; 17 | 18 | $primary: #eb6864 !default; 19 | $danger: $orange; 20 | 21 | $family-heading: "News Cycle", "Arial Narrow Bold", sans-serif; 22 | 23 | $radius: 4px; 24 | 25 | $navbar-item-hover-color: $primary; 26 | $navbar-item-active-color: $primary; 27 | $navbar-dropdown-item-hover-color: $primary; 28 | $navbar-dropdown-item-active-color: $primary; 29 | 30 | $bulmaswatch-import-font: true !default; 31 | 32 | $control-height: 2.5em; 33 | -------------------------------------------------------------------------------- /journal/bulmaswatch.scss: -------------------------------------------------------------------------------- 1 | /*! bulmaswatch v0.8.1 | MIT License */ 2 | @import "variables"; 3 | @import "bulma"; 4 | @import "overrides"; 5 | -------------------------------------------------------------------------------- /litera/_overrides.scss: -------------------------------------------------------------------------------- 1 | // Overrides 2 | @if $bulmaswatch-import-font { 3 | @import url("https://fonts.googleapis.com/css?family=Raleway:400,700&display=swap"); 4 | } 5 | 6 | a { 7 | transition: all 200ms ease; 8 | } 9 | 10 | .button { 11 | padding-left: 1em; 12 | padding-right: 1em; 13 | border-radius: 50px; 14 | 15 | &.is-small { 16 | border-radius: 40px; 17 | font-size: 0.85rem; 18 | } 19 | } 20 | 21 | .button { 22 | transition: all 200ms ease; 23 | 24 | &.is-active, 25 | &.is-focused, 26 | &:active, 27 | &:focus { 28 | box-shadow: 0 0 0 2px rgba($button-active-border-color, 0.3); 29 | } 30 | @each $name, $pair in $colors { 31 | $color: nth($pair, 1); 32 | $color-invert: nth($pair, 2); 33 | 34 | &.is-#{$name} { 35 | &.is-active, 36 | &.is-focused, 37 | &:active, 38 | &:focus { 39 | box-shadow: 0 0 0 2px rgba($color, 0.3); 40 | } 41 | } 42 | } 43 | } 44 | 45 | .content { 46 | font-size: 1.1rem; 47 | font-family: $family-serif; 48 | 49 | .button { 50 | font-family: $family-sans-serif; 51 | } 52 | } 53 | 54 | .card-header-title, 55 | .menu-label, 56 | .message-header, 57 | .modal-card-title, 58 | .panel-heading, 59 | .subtitle, 60 | .title, 61 | h1, 62 | h2, 63 | h3, 64 | h4, 65 | h5, 66 | h6 { 67 | font-weight: 700; 68 | font-family: $family-heading; 69 | } 70 | 71 | blockquote { 72 | font-style: italic; 73 | } 74 | 75 | .input, 76 | .textarea { 77 | transition: all 200ms ease; 78 | box-shadow: none; 79 | } 80 | 81 | .notification { 82 | @each $name, $pair in $colors { 83 | $color: nth($pair, 1); 84 | $color-invert: nth($pair, 2); 85 | 86 | &.is-#{$name} { 87 | a:not(.button) { 88 | color: $color-invert; 89 | text-decoration: underline; 90 | } 91 | } 92 | } 93 | } 94 | 95 | .navbar { 96 | border: 1px solid $border; 97 | } 98 | 99 | .hero { 100 | .navbar { 101 | border: none; 102 | box-shadow: 0 1px 0 rgba($border, 0.25); 103 | } 104 | } 105 | 106 | .card { 107 | $card-border-color: $grey-darker; 108 | box-shadow: 0 0 1px $grey-light; 109 | 110 | .card-header { 111 | box-shadow: none; 112 | border-bottom: 1px solid $grey-lighter; 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /litera/_variables.scss: -------------------------------------------------------------------------------- 1 | //////////////////////////////////////////////// 2 | // LITERA 3 | //////////////////////////////////////////////// 4 | $grey-darker: #363636; 5 | $grey-dark: #373a3c; 6 | $grey: #55595c; 7 | $grey-light: #818a91; 8 | $grey-lighter: #d9dee2; 9 | 10 | $orange: #f0ad4e; 11 | $yellow: #ffd500; 12 | $green: #02b875; 13 | $blue: #45b2d3; 14 | $red: #d9534f; 15 | 16 | $link: #4582ec !default; 17 | $primary: $blue !default; 18 | $danger: $orange; 19 | 20 | $subtitle-color: $grey; 21 | 22 | $family-heading: "Raleway", "Lucida Grande", "Lucida Sans Unicode", 23 | "Lucida Sans", Geneva, Arial, sans-serif; 24 | 25 | $body-size: 15px; 26 | 27 | $family-serif: Georgia, Cambria, "Times New Roman", Times, serif; 28 | 29 | $navbar-height: 5rem; 30 | $navbar-item-hover-color: $link; 31 | $navbar-item-hover-background-color: transparent; 32 | $navbar-item-active-color: $link; 33 | $navbar-item-active-background-color: transparent; 34 | 35 | $navbar-dropdown-item-hover-color: $link; 36 | $navbar-dropdown-item-hover-background-color: transparent; 37 | $navbar-dropdown-item-active-color: $link; 38 | $navbar-dropdown-item-active-background-color: transparent; 39 | 40 | $bulmaswatch-import-font: true !default; 41 | 42 | $box-shadow: 0 0 1px $grey-light; 43 | 44 | $control-height: 2.273em; 45 | -------------------------------------------------------------------------------- /litera/bulmaswatch.scss: -------------------------------------------------------------------------------- 1 | /*! bulmaswatch v0.8.1 | MIT License */ 2 | @import "variables"; 3 | @import "bulma"; 4 | @import "overrides"; 5 | -------------------------------------------------------------------------------- /lumen/_overrides.scss: -------------------------------------------------------------------------------- 1 | // Overrides 2 | @if $bulmaswatch-import-font { 3 | @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic&display=swap"); 4 | } 5 | 6 | .box { 7 | border-style: solid; 8 | border-width: 1px 1px $thickness 1px; 9 | border-color: $border; 10 | } 11 | 12 | .button { 13 | height: $control-height + 0.398em; 14 | } 15 | 16 | .button { 17 | transition: all 300ms ease; 18 | border-style: solid; 19 | border-width: 1px 1px $thickness 1px; 20 | text-transform: uppercase; 21 | font-size: 0.85rem; 22 | font-weight: bold; 23 | 24 | &.is-hovered, 25 | &:hover { 26 | border-bottom-width: $thickness - 1; 27 | } 28 | 29 | &.is-active, 30 | &.is-focused, 31 | &:active, 32 | &:focus { 33 | box-shadow: none; 34 | } 35 | @each $name, $pair in $colors { 36 | $color: nth($pair, 1); 37 | $color-invert: nth($pair, 2); 38 | 39 | &.is-#{$name} { 40 | border-color: darken($color, 5); 41 | 42 | &.is-hovered, 43 | &:hover { 44 | border-color: darken($color, 10) !important; 45 | } 46 | 47 | &.is-active, 48 | &.is-focused, 49 | &:active, 50 | &:focus { 51 | border-color: darken($color, 10); 52 | box-shadow: $input-focus-box-shadow-size rgba($color, 0.25); 53 | } 54 | } 55 | } 56 | } 57 | 58 | .input, 59 | .textarea { 60 | box-shadow: inset 0 0.125em 0 rgba($black, 0.075); 61 | 62 | &.is-active, 63 | &.is-focused, 64 | &:active, 65 | &:focus { 66 | box-shadow: inset 0 0.125em 0 rgba($black, 0.075), 67 | $input-focus-box-shadow-size $input-focus-box-shadow-color; 68 | } 69 | 70 | @each $name, $pair in $colors { 71 | $color: nth($pair, 1); 72 | $color-invert: nth($pair, 2); 73 | 74 | &.is-#{$name} { 75 | &.is-active, 76 | &.is-focused, 77 | &:active, 78 | &:focus { 79 | border-color: darken($color, 10); 80 | box-shadow: inset 0 0.125em 0 rgba($black, 0.075), 81 | $input-focus-box-shadow-size rgba($color, 0.25); 82 | } 83 | } 84 | } 85 | } 86 | 87 | .select:after { 88 | margin-top: -0.575em; 89 | } 90 | 91 | .select select { 92 | border-width: 1px 1px $thickness 1px; 93 | &:not([multiple]) { 94 | height: calc(#{$control-height} + #{$thickness}); 95 | } 96 | } 97 | 98 | .file { 99 | .file-cta, 100 | .file-name { 101 | border-width: 1px 1px $thickness 1px; 102 | position: unset; 103 | } 104 | &.has-name .file-name { 105 | border-left-width: 0; 106 | } 107 | &.is-boxed.has-name .file-name { 108 | border-width: 1px 1px $thickness 1px; 109 | } 110 | @each $name, $pair in $colors { 111 | $color: nth($pair, 1); 112 | $color-invert: nth($pair, 2); 113 | 114 | &.is-#{$name} { 115 | .file-cta { 116 | border-color: darken($color, 5); 117 | } 118 | &.is-hovered, 119 | &:hover { 120 | .file-cta { 121 | border-color: darken($color, 10); 122 | } 123 | } 124 | } 125 | } 126 | } 127 | 128 | .notification { 129 | border-style: solid; 130 | border-width: 1px 1px $thickness 1px; 131 | border-color: $border; 132 | @each $name, $pair in $colors { 133 | $color: nth($pair, 1); 134 | 135 | &.is-#{$name} { 136 | border-color: darken($color, 5); 137 | } 138 | } 139 | } 140 | 141 | .progress { 142 | border-radius: $radius-large; 143 | } 144 | 145 | .card { 146 | box-shadow: none; 147 | border-style: solid; 148 | border-width: 1px 1px $thickness 1px; 149 | border-color: $border; 150 | background-color: rgba($grey-lighter, 0.075); 151 | border-radius: $radius; 152 | 153 | .card-image { 154 | img { 155 | border-radius: $radius $radius 0 0; 156 | } 157 | } 158 | 159 | .card-header { 160 | box-shadow: none; 161 | border-bottom: 1px solid $grey-lighter; 162 | border-radius: $radius $radius 0 0; 163 | } 164 | } 165 | 166 | .message { 167 | .message-body { 168 | border-style: solid; 169 | border-width: 1px 1px $thickness 1px; 170 | } 171 | } 172 | 173 | .hero { 174 | .navbar { 175 | border: none; 176 | box-shadow: 0 $thickness 0 $border; 177 | } 178 | @each $name, $pair in $colors { 179 | $color: nth($pair, 1); 180 | $color-invert: nth($pair, 2); 181 | 182 | &.is-#{$name} { 183 | .navbar { 184 | box-shadow: 0 $thickness 0 darken($color, 5); 185 | } 186 | } 187 | } 188 | @include until($navbar-breakpoint) { 189 | .navbar-menu { 190 | box-shadow: none; 191 | } 192 | } 193 | } 194 | 195 | .navbar { 196 | border: solid $border; 197 | border-width: 1px 1px $thickness 1px; 198 | @each $name, $pair in $colors { 199 | $color: nth($pair, 1); 200 | $color-invert: nth($pair, 2); 201 | 202 | &.is-#{$name} { 203 | border-color: darken($color, 5); 204 | } 205 | } 206 | .navbar-dropdown { 207 | box-shadow: $navbar-dropdown-boxed-shadow; 208 | top: 101%; 209 | } 210 | } 211 | 212 | .pagination-link, 213 | .pagination-next, 214 | .pagination-previous { 215 | border-width: 1px 1px $thickness 1px; 216 | } 217 | 218 | .tabs { 219 | &.is-boxed li.is-active a { 220 | border-top-width: $thickness; 221 | } 222 | 223 | &.tabs.is-toggle li.is-active a { 224 | box-shadow: inset 0 -#{$thickness} 0 darken($link, 10); 225 | border-color: darken($link, 10); 226 | } 227 | } 228 | -------------------------------------------------------------------------------- /lumen/_variables.scss: -------------------------------------------------------------------------------- 1 | //////////////////////////////////////////////// 2 | // LUMEN 3 | //////////////////////////////////////////////// 4 | 5 | $orange: #ff851b; 6 | $green: #28b62c; 7 | $blue: #5bb7db; 8 | $red: #ff4136; 9 | 10 | $primary: #158cba !default; 11 | 12 | $info-invert: #fff; 13 | 14 | $family-sans-serif: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, 15 | sans-serif; 16 | 17 | $thickness: 4px; 18 | 19 | $pagination-current-border: darken($primary, 5); 20 | 21 | $navbar-item-active-color: $primary; 22 | 23 | $dropdown-content-shadow: 0 0 0 1px #dbdbdb, 0 #{$thickness} 0 1px #dbdbdb; 24 | 25 | $navbar-dropdown-boxed-shadow: $dropdown-content-shadow; 26 | 27 | $bulmaswatch-import-font: true !default; 28 | 29 | $box-shadow: none; 30 | 31 | $control-height: 2.25em; 32 | -------------------------------------------------------------------------------- /lumen/bulmaswatch.scss: -------------------------------------------------------------------------------- 1 | /*! bulmaswatch v0.8.1 | MIT License */ 2 | @import "variables"; 3 | @import "bulma"; 4 | @import "overrides"; 5 | -------------------------------------------------------------------------------- /lux/_overrides.scss: -------------------------------------------------------------------------------- 1 | // Overrides 2 | @if $bulmaswatch-import-font { 3 | @import url("https://fonts.googleapis.com/css?family=Nunito+Sans&display=swap"); 4 | } 5 | 6 | body { 7 | font-weight: 200; 8 | letter-spacing: 1px; 9 | } 10 | 11 | h1, 12 | h2, 13 | h3, 14 | h4, 15 | h5, 16 | h6 { 17 | text-transform: uppercase; 18 | letter-spacing: 3px; 19 | } 20 | 21 | .button { 22 | transition: all 200ms ease; 23 | text-transform: uppercase; 24 | font-weight: 700; 25 | 26 | &.is-active, 27 | &.is-focused, 28 | &:active, 29 | &:focus { 30 | box-shadow: 0 0 0 2px rgba($button-focus-border-color, 0.25); 31 | } 32 | @each $name, $pair in $colors { 33 | $color: nth($pair, 1); 34 | $color-invert: nth($pair, 2); 35 | 36 | &.is-#{$name} { 37 | &.is-active, 38 | &.is-focused, 39 | &:active, 40 | &:focus { 41 | border-color: $color; 42 | box-shadow: 0 0 0 2px rgba($color, 0.25); 43 | } 44 | } 45 | } 46 | } 47 | 48 | .input, 49 | .textarea { 50 | transition: all 200ms ease; 51 | box-shadow: none; 52 | } 53 | 54 | .progress, 55 | .tag { 56 | border-radius: $radius; 57 | } 58 | 59 | .card { 60 | box-shadow: 0 0 0 1px $grey-lighter; 61 | 62 | .card-header { 63 | box-shadow: 0 1px 0 0 $grey-lighter; 64 | } 65 | } 66 | 67 | .navbar { 68 | .navbar-link, 69 | .navbar-item { 70 | text-transform: uppercase; 71 | font-weight: bold; 72 | } 73 | 74 | .has-dropdown .navbar-item { 75 | text-transform: none; 76 | } 77 | 78 | strong { 79 | color: $white; 80 | } 81 | 82 | @include until($navbar-breakpoint) { 83 | .navbar-menu { 84 | background-color: $primary; 85 | border-radius: $radius; 86 | } 87 | } 88 | } 89 | .hero { 90 | .navbar { 91 | background-color: $navbar-background-color; 92 | } 93 | @each $name, $pair in $colors { 94 | $color: nth($pair, 1); 95 | $color-invert: nth($pair, 2); 96 | 97 | &.is-#{$name} { 98 | .navbar { 99 | background-color: $color; 100 | } 101 | } 102 | } 103 | } 104 | 105 | .notification { 106 | @each $name, $pair in $colors { 107 | $color: nth($pair, 1); 108 | $color-invert: nth($pair, 2); 109 | 110 | &.is-#{$name} { 111 | a:not(.button) { 112 | color: $color-invert; 113 | text-decoration: underline; 114 | } 115 | } 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /lux/_variables.scss: -------------------------------------------------------------------------------- 1 | //////////////////////////////////////////////// 2 | // LUX 3 | //////////////////////////////////////////////// 4 | $grey: #7f888f; 5 | $grey-light: lighten($grey, 10%); 6 | $grey-lighter: lighten($grey, 20%); 7 | 8 | $green: #4bbf73; 9 | $blue: #1f9bcf; 10 | $red: #d9534f; 11 | 12 | $primary: #222 !default; 13 | $link: $grey; 14 | 15 | $family-sans-serif: "Nunito Sans", -apple-system, system-ui, BlinkMacSystemFont, 16 | "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 17 | $body-size: 14px; 18 | 19 | $radius: 0; 20 | $radius-small: $radius; 21 | 22 | $navbar-height: 5rem; 23 | $navbar-background-color: $primary; 24 | $navbar-item-color: $grey; 25 | $navbar-item-hover-color: #fff; 26 | $navbar-item-active-color: #fff; 27 | $navbar-item-hover-background-color: transparent; 28 | $navbar-item-active-background-color: transparent; 29 | $navbar-dropdown-arrow: #fff; 30 | $navbar-dropdown-background-color: $primary; 31 | $navbar-dropdown-border-top: 1px solid lighten($primary, 10); 32 | $navbar-divider-background-color: lighten($primary, 10); 33 | $navbar-dropdown-item-active-color: #fff; 34 | $navbar-dropdown-item-hover-color: $grey-lighter; 35 | $navbar-dropdown-item-hover-background-color: transparent; 36 | $navbar-dropdown-item-active-background-color: transparent; 37 | 38 | $bulmaswatch-import-font: true !default; 39 | 40 | $box-shadow: 0 0 0 1px $grey-lighter; 41 | 42 | $control-height: 2.5em; 43 | -------------------------------------------------------------------------------- /lux/bulmaswatch.scss: -------------------------------------------------------------------------------- 1 | /*! bulmaswatch v0.8.1 | MIT License */ 2 | @import "variables"; 3 | @import "bulma"; 4 | @import "overrides"; 5 | -------------------------------------------------------------------------------- /materia/_overrides.scss: -------------------------------------------------------------------------------- 1 | // Overrides 2 | @if $bulmaswatch-import-font { 3 | @import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"); 4 | } 5 | 6 | hr { 7 | background-color: lighten($grey-lighter, 5); 8 | } 9 | 10 | .content { 11 | letter-spacing: 0.04em; 12 | } 13 | 14 | .button { 15 | border-radius: 3px; 16 | box-shadow: $shadow; 17 | text-transform: uppercase; 18 | font-weight: 500; 19 | transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), 20 | background-color 300ms ease; 21 | position: relative; 22 | overflow: hidden; 23 | transform: translate3d(0, 0, 0); 24 | 25 | &.is-hovered, 26 | &:hover { 27 | border-color: transparent; 28 | background-color: darken($button-background-color, 5); 29 | } 30 | 31 | &.is-active, 32 | &:active { 33 | box-shadow: $shadow-large; 34 | } 35 | 36 | &.is-focused, 37 | &:focus { 38 | border-color: transparent; 39 | } 40 | 41 | @each $name, $pair in $colors { 42 | $color: nth($pair, 1); 43 | $color-invert: nth($pair, 2); 44 | 45 | &.is-#{$name} { 46 | &.is-hovered, 47 | &:hover { 48 | background-color: darken($color, 5); 49 | } 50 | 51 | &.is-active, 52 | &:active { 53 | box-shadow: $shadow-large; 54 | } 55 | } 56 | } 57 | 58 | &.is-text { 59 | box-shadow: none; 60 | } 61 | 62 | &:before { 63 | content: ""; 64 | display: block; 65 | position: absolute; 66 | width: 100%; 67 | height: 100%; 68 | top: 0; 69 | left: 0; 70 | pointer-events: none; 71 | background-image: radial-gradient(circle, #000 10%, transparent 10.01%); 72 | background-repeat: no-repeat; 73 | background-position: 50%; 74 | transform: scale(10, 10); 75 | opacity: 0; 76 | transition: transform 0.5s, opacity 1s; 77 | } 78 | 79 | &:active:before { 80 | transform: scale(0, 0); 81 | opacity: 0.2; 82 | transition: 0s; 83 | } 84 | } 85 | 86 | .input { 87 | border: none; 88 | padding-left: 0; 89 | padding-right: 0; 90 | box-shadow: inset 0 -1px 0 $grey-lighter; 91 | transition: all 300ms; 92 | 93 | &.is-small { 94 | border-radius: 0; 95 | } 96 | 97 | &.is-active, 98 | &.is-focused, 99 | &:active, 100 | &:focus { 101 | box-shadow: inset 0 -2px 0 $input-focus-border-color; 102 | } 103 | @each $name, $pair in $colors { 104 | $color: nth($pair, 1); 105 | 106 | &.is-#{$name} { 107 | box-shadow: inset 0 -1px 0 $color; 108 | 109 | &.is-active, 110 | &.is-focused, 111 | &:active, 112 | &:focus { 113 | box-shadow: inset 0 -2px 0 $color; 114 | } 115 | } 116 | } 117 | 118 | &.is-disabled, 119 | &[disabled], 120 | &[readonly] { 121 | border-bottom: 1px dotted $grey-lighter; 122 | cursor: not-allowed; 123 | } 124 | } 125 | 126 | .textarea { 127 | box-shadow: none; 128 | } 129 | 130 | .select select { 131 | border: none; 132 | border-radius: 0; 133 | box-shadow: inset 0 -1px 0 $grey-lighter; 134 | transition: all 300ms; 135 | 136 | &.is-active, 137 | &.is-focused, 138 | &:active, 139 | &:focus { 140 | box-shadow: inset 0 -2px 0 $input-focus-border-color; 141 | } 142 | } 143 | 144 | .control { 145 | &.has-addons { 146 | .button, 147 | .input, 148 | .select { 149 | &:first-child, 150 | &:last-child { 151 | border-radius: 0; 152 | 153 | select { 154 | border-radius: 0; 155 | } 156 | } 157 | } 158 | 159 | .button { 160 | box-shadow: none; 161 | } 162 | } 163 | } 164 | 165 | .progress { 166 | height: $size-7; 167 | border-radius: $radius; 168 | 169 | &.is-small { 170 | height: 0.5rem; 171 | } 172 | } 173 | 174 | .card { 175 | box-shadow: $shadow; 176 | 177 | .card-header { 178 | box-shadow: none; 179 | } 180 | 181 | .card-footer, 182 | .card-footer-item { 183 | border: 0; 184 | text-transform: uppercase; 185 | font-weight: 500; 186 | } 187 | } 188 | 189 | .menu { 190 | .menu-list { 191 | a { 192 | border-radius: $radius; 193 | padding: $size-7; 194 | 195 | &.is-active { 196 | background-color: transparent; 197 | color: $link; 198 | } 199 | } 200 | } 201 | } 202 | 203 | .notification { 204 | box-shadow: $shadow; 205 | @each $name, $pair in $colors { 206 | $color: nth($pair, 1); 207 | $color-invert: nth($pair, 2); 208 | 209 | &.is-#{$name} { 210 | a:not(.button) { 211 | color: $color-invert; 212 | text-decoration: underline; 213 | } 214 | } 215 | } 216 | } 217 | 218 | .modal { 219 | .modal-background { 220 | background-color: rgba($black, 0.6); 221 | } 222 | 223 | .modal-card { 224 | box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), 225 | 0 13px 19px 2px rgba(0, 0, 0, 0.14), 0 5px 24px 4px rgba(0, 0, 0, 0.12); 226 | } 227 | } 228 | 229 | .navbar { 230 | &:not(.is-transparent) { 231 | box-shadow: $shadow; 232 | } 233 | 234 | .has-dropdown .navbar-item { 235 | @include from($navbar-breakpoint) { 236 | color: $text; 237 | } 238 | } 239 | 240 | @include until($navbar-breakpoint) { 241 | .navbar-menu { 242 | background-color: inherit; 243 | } 244 | } 245 | 246 | @each $name, $pair in $colors { 247 | $color: nth($pair, 1); 248 | $color-invert: nth($pair, 2); 249 | 250 | &.is-#{$name} { 251 | @include until($navbar-breakpoint) { 252 | .navbar-menu { 253 | .navbar-item, 254 | .navbar-link { 255 | color: $color-invert; 256 | &.is-active { 257 | background-color: darken($color, 5); 258 | } 259 | } 260 | } 261 | } 262 | } 263 | } 264 | } 265 | 266 | .tabs { 267 | .is-active a { 268 | box-shadow: inset 0 -1px 0 $link; 269 | } 270 | 271 | &.is-boxed { 272 | .is-active a { 273 | border-top: 0; 274 | box-shadow: inset 0 2px 0 $link; 275 | } 276 | } 277 | } 278 | 279 | .panel { 280 | box-shadow: $shadow; 281 | 282 | .panel-block, 283 | .panel-heading, 284 | .panel-tabs { 285 | border-radius: $radius; 286 | border: none; 287 | padding: $size-7; 288 | } 289 | 290 | .panel-block.is-active { 291 | color: $primary; 292 | } 293 | 294 | .panel-tabs { 295 | a:hover { 296 | border-color: $link-hover; 297 | color: $link-hover; 298 | } 299 | } 300 | } 301 | -------------------------------------------------------------------------------- /materia/_variables.scss: -------------------------------------------------------------------------------- 1 | //////////////////////////////////////////////// 2 | // MATERIA 3 | //////////////////////////////////////////////// 4 | 5 | $orange: #ff9800; 6 | $yellow: #ffeb3b; 7 | $green: #4caf50; 8 | $turquoise: #009688; 9 | $cyan: #29b6f6; 10 | $blue: #2196f3; 11 | $purple: #9c27b0; 12 | $red: #f44336; 13 | 14 | $primary: #3f51b5 !default; 15 | 16 | $family-sans-serif: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif; 17 | $title-weight: 400; 18 | $title-weight-bold: 500; 19 | 20 | $radius: 0; 21 | $shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 22 | 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); 23 | $shadow-large: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 24 | 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); 25 | 26 | $button-border-color: transparent; 27 | $button-hover-border: transparent; 28 | $button-focus-border-color: transparent; 29 | $button-active-border-color: transparent; 30 | 31 | $input-disabled-background-color: transparent; 32 | 33 | $border-width: 2px; 34 | 35 | $navbar-height: 4rem; 36 | 37 | $dropdown-content-shadow: $shadow-large; 38 | $dropdown-content-radius: 4px; 39 | 40 | $bulmaswatch-import-font: true !default; 41 | 42 | $box-shadow: $shadow; 43 | 44 | $control-height: 2.5em; 45 | -------------------------------------------------------------------------------- /materia/bulmaswatch.scss: -------------------------------------------------------------------------------- 1 | /*! bulmaswatch v0.8.1 | MIT License */ 2 | @import "variables"; 3 | @import "bulma"; 4 | @import "overrides"; 5 | -------------------------------------------------------------------------------- /minty/_overrides.scss: -------------------------------------------------------------------------------- 1 | // Overrides 2 | @if $bulmaswatch-import-font { 3 | @import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap"); 4 | } 5 | 6 | .modal-card-title, 7 | .subtitle, 8 | .title, 9 | h1, 10 | h2, 11 | h3, 12 | h4, 13 | h5, 14 | h6 { 15 | font-weight: 700; 16 | font-family: $family-heading; 17 | } 18 | 19 | .button { 20 | transition: all 200ms ease; 21 | font-weight: 500; 22 | font-family: $family-heading; 23 | 24 | &.is-active, 25 | &.is-focused, 26 | &:active, 27 | &:focus { 28 | box-shadow: 0 0 0 2px rgba($button-focus-border-color, 0.25); 29 | } 30 | @each $name, $pair in $colors { 31 | $color: nth($pair, 1); 32 | $color-invert: nth($pair, 2); 33 | 34 | &.is-#{$name} { 35 | &.is-active, 36 | &.is-focused, 37 | &:active, 38 | &:focus { 39 | border-color: $color; 40 | box-shadow: 0 0 0 2px rgba($color, 0.25); 41 | } 42 | } 43 | } 44 | } 45 | 46 | .input, 47 | .textarea { 48 | transition: all 200ms ease; 49 | box-shadow: none; 50 | } 51 | 52 | .notification { 53 | @each $name, $pair in $colors { 54 | $color: nth($pair, 1); 55 | $color-invert: nth($pair, 2); 56 | 57 | &.is-#{$name} { 58 | a:not(.button) { 59 | color: $color-invert; 60 | text-decoration: underline; 61 | } 62 | } 63 | } 64 | } 65 | 66 | .card { 67 | box-shadow: none; 68 | border: 1px solid $grey-lighter; 69 | border-radius: $radius; 70 | 71 | .card-image { 72 | img { 73 | border-radius: $radius $radius 0 0; 74 | } 75 | } 76 | 77 | .card-header { 78 | box-shadow: none; 79 | border-bottom: 1px solid $grey-lighter; 80 | border-radius: $radius $radius 0 0; 81 | } 82 | } 83 | 84 | .card-header-title, 85 | .menu-label, 86 | .message-header, 87 | .panel-heading { 88 | font-family: $family-heading; 89 | font-weight: normal; 90 | } 91 | 92 | .menu-list a { 93 | border-radius: $radius; 94 | } 95 | 96 | .navbar { 97 | border-radius: $radius; 98 | 99 | .navbar-item, 100 | .navbar-link { 101 | font-family: $family-heading; 102 | transition: all 300ms; 103 | } 104 | 105 | @include until($navbar-breakpoint) { 106 | .navbar-menu { 107 | background-color: inherit; 108 | border-radius: inherit; 109 | } 110 | } 111 | 112 | .navbar-dropdown .navbar-item { 113 | @include from($navbar-breakpoint) { 114 | color: $text; 115 | } 116 | } 117 | 118 | &.is-transparent { 119 | background-color: transparent; 120 | .navbar-item, 121 | .navbar-link { 122 | color: rgba($text, 0.75); 123 | 124 | &.is-active { 125 | color: $text; 126 | } 127 | 128 | &:after { 129 | border-color: inherit; 130 | } 131 | } 132 | } 133 | 134 | @each $name, $pair in $colors { 135 | $color: nth($pair, 1); 136 | $color-invert: nth($pair, 2); 137 | 138 | &.is-#{$name} { 139 | .navbar-start, 140 | .navbar-end { 141 | > .navbar-item, 142 | .navbar-link { 143 | color: rgba($color-invert, 0.75); 144 | 145 | &.is-active { 146 | color: $color-invert; 147 | } 148 | } 149 | } 150 | @include until($navbar-breakpoint) { 151 | .navbar-item, 152 | .navbar-link { 153 | color: rgba($color-invert, 0.75); 154 | 155 | &.is-active { 156 | color: $color-invert; 157 | } 158 | } 159 | } 160 | } 161 | } 162 | } 163 | 164 | .hero { 165 | // Colors 166 | .navbar { 167 | background-color: $primary; 168 | } 169 | @each $name, $pair in $colors { 170 | $color: nth($pair, 1); 171 | $color-invert: nth($pair, 2); 172 | 173 | &.is-#{$name} { 174 | .navbar { 175 | background: none; 176 | } 177 | } 178 | } 179 | } 180 | 181 | .panel-block.is-active { 182 | color: $primary; 183 | } 184 | -------------------------------------------------------------------------------- /minty/_variables.scss: -------------------------------------------------------------------------------- 1 | //////////////////////////////////////////////// 2 | // MINTY 3 | //////////////////////////////////////////////// 4 | $grey: #888; 5 | $grey-light: #aaa; 6 | $grey-lighter: #dbdbdb; 7 | 8 | $orange: #eea170; 9 | $yellow: #ffce67; 10 | $green: #56cc90; 11 | $cyan: #6cc3d5; 12 | $blue: #6d90d6; 13 | $red: #e07f7d; 14 | $turquoise: #6abfb0; 15 | 16 | $danger: $orange; 17 | 18 | $text: darken($grey, 10); 19 | $subtitle-color: $grey; 20 | 21 | $size-1: 2.5rem; 22 | $size-2: 2rem; 23 | $size-3: 1.75rem; 24 | $size-4: 1.5rem; 25 | $size-5: 1.25rem; 26 | $size-6: 15px; 27 | $size-7: 0.75rem; 28 | 29 | $radius-small: 4px; 30 | $radius: 6px; 31 | $radius-large: 8px; 32 | 33 | $family-heading: "Montserrat", -apple-system, system-ui, BlinkMacSystemFont, 34 | "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 35 | 36 | $navbar-background-color: $turquoise; 37 | $navbar-item-color: rgba(#fff, 0.75); 38 | $navbar-item-hover-color: #fff; 39 | $navbar-item-active-color: #fff; 40 | $navbar-item-hover-background-color: rgba(#000, 0.1); 41 | $navbar-dropdown-arrow: $navbar-item-color; 42 | 43 | $bulmaswatch-import-font: true !default; 44 | 45 | $box-shadow: 0 0 0 1px $grey-lighter; 46 | 47 | $control-height: 2.534em; 48 | -------------------------------------------------------------------------------- /minty/bulmaswatch.scss: -------------------------------------------------------------------------------- 1 | /*! bulmaswatch v0.8.1 | MIT License */ 2 | @import "variables"; 3 | @import "bulma"; 4 | @import "overrides"; 5 | -------------------------------------------------------------------------------- /nuclear/_overrides.scss: -------------------------------------------------------------------------------- 1 | @if $bulmaswatch-import-font { 2 | @import url("https://fonts.googleapis.com/css?family=Varela+Round&display=swap"); 3 | } 4 | 5 | .card-header { 6 | border-bottom: solid 1px $primary; 7 | } 8 | 9 | .card { 10 | border: solid 1px $primary; 11 | } 12 | 13 | .progress::-webkit-progress-bar { 14 | background: $grey-lighter !important; 15 | } 16 | 17 | .button, 18 | .card-header, 19 | .content h1, 20 | .content h2, 21 | .content h3, 22 | .content h4, 23 | .content h5, 24 | .content h6, 25 | .menu-label, 26 | .message-header, 27 | .tabs, 28 | .title { 29 | font-family: $font-heading; 30 | text-transform: uppercase; 31 | } 32 | 33 | .subtitle, 34 | .tag, 35 | th { 36 | font-family: $font-heading; 37 | } 38 | 39 | .box { 40 | border: solid 1px $primary; 41 | } 42 | 43 | .delete { 44 | $c: rgba($grey-light, 0.6); 45 | background-color: $c; 46 | 47 | &:hover { 48 | background-color: rgba($c, 0.85); 49 | } 50 | 51 | &::after, 52 | &::before { 53 | background-color: $black; 54 | } 55 | } 56 | 57 | .button { 58 | border-radius: 4px; 59 | padding-top: calc(0.375em + 1px); 60 | @each $name, $pair in $colors { 61 | $color: nth($pair, 1); 62 | $color-invert: nth($pair, 2); 63 | $color-lightning: max((100% - lightness($color)) - 40%, 0%); 64 | $color-luminance: colorLuminance($color); 65 | $darken-percentage: $color-luminance * 70%; 66 | $desaturate-percentage: $color-luminance * 30%; 67 | $glow: 0 0 7px 1px $color; 68 | $transition: box-shadow 0.1s linear; 69 | 70 | &.is-#{$name} { 71 | &:not(.is-outlined) { 72 | border-width: 0; 73 | } 74 | transition: $transition; 75 | background: $color; 76 | box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3) inset, 77 | 0 1px 15px 0 rgba(0, 0, 0, 0.6) inset; 78 | 79 | &.is-hovered, 80 | &:hover { 81 | border-color: rgba(0, 0, 0, 0.25); 82 | transition: $transition; 83 | box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3) inset, 84 | 0 1px 15px 0 rgba(0, 0, 0, 0.6) inset, 0 0 3px 0 $color; 85 | } 86 | 87 | &.is-focused, 88 | &:focus { 89 | transition: $transition; 90 | border-color: $color; 91 | box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2) inset, 92 | 0 0 0 0 rgba(0, 0, 0, 0.5) inset, 0 0 7px 1px $color; 93 | } 94 | 95 | &.is-active, 96 | &:active { 97 | transition: $transition; 98 | border-color: rgba(0, 0, 0, 0.47); 99 | box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.7) inset, 100 | 0 1px 15px 0 rgba(0, 0, 0, 0.9) inset; 101 | } 102 | } 103 | } 104 | } 105 | 106 | button.button, 107 | input[type="submit"].button { 108 | padding-top: calc(0.375em + 1px); 109 | } 110 | 111 | .message { 112 | background-color: $background; 113 | border-radius: $radius; 114 | font-size: $size-normal; 115 | // Colors 116 | @each $name, $pair in $colors { 117 | $color: nth($pair, 1); 118 | $color-invert: nth($pair, 2); 119 | $color-lightning: max((100% - lightness($color)) - 3%, 0%); 120 | $color-luminance: colorLuminance($color); 121 | $darken-percentage: $color-luminance * 70%; 122 | $desaturate-percentage: $color-luminance * 30%; 123 | 124 | &.is-#{$name} { 125 | background-color: darken($color, $color-lightning); 126 | 127 | .message-header { 128 | background-color: $color; 129 | color: $color-invert; 130 | } 131 | 132 | .message-body { 133 | border-color: $color; 134 | color: desaturate( 135 | lighten($color, $darken-percentage), 136 | $desaturate-percentage 137 | ); 138 | } 139 | } 140 | } 141 | } 142 | 143 | .message.is-dark { 144 | background: $white; 145 | } 146 | 147 | .input:focus, 148 | .select > *:focus, 149 | .textarea:focus { 150 | box-shadow: 0 0 7px 1px $primary; 151 | @each $name, $pair in $colors { 152 | $color: nth($pair, 1); 153 | $color-invert: nth($pair, 2); 154 | 155 | &.is-#{$name} { 156 | box-shadow: 0 0 7px 0 $color; 157 | } 158 | } 159 | } 160 | -------------------------------------------------------------------------------- /nuclear/_variables.scss: -------------------------------------------------------------------------------- 1 | //////////////////////////////////////////////// 2 | // NUCLEAR 3 | //////////////////////////////////////////////// 4 | 5 | @function inv($c) { 6 | @return lighten(invert($c), 3%); 7 | } 8 | 9 | $black: #000; 10 | $black-bis: #111111; 11 | $black-ter: #242424; 12 | $grey-darker: #353535; 13 | $grey-dark: #494949; 14 | $grey: #7a7a7a; 15 | $grey-light: #b5b5b5; 16 | $grey-lighter: #dbdbdb; 17 | 18 | $white-ter: #f4f4f4; 19 | $white-bis: #f9f9f9; 20 | $white: #ffffff; 21 | 22 | $black: inv($black); 23 | $black-bis: inv($black-bis); 24 | $black-ter: inv($black-ter); 25 | $grey-darker: inv($grey-darker); 26 | $grey-dark: inv($grey-dark); 27 | $grey: inv($grey); 28 | $grey-light: inv($grey-light); 29 | $grey-lighter: inv($grey-lighter); 30 | $white-ter: inv($white-ter); 31 | $white-bis: inv($white-bis); 32 | $white: inv($white); 33 | 34 | $orange: #ffaa00; 35 | $yellow: #d9ff00; 36 | $green: #00ff48; 37 | $turquoise: #00ffff; 38 | $blue: #00ffff; 39 | $purple: #8200ff; 40 | $red: #f90000; 41 | 42 | $primary: $yellow; 43 | $warning: $orange; 44 | $border: $primary; 45 | $border-hover: $primary; 46 | 47 | $body-background-color: $white; 48 | 49 | $font-heading: "Varela Round", BlinkMacSystemFont, -apple-system, "Segoe UI", 50 | "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", 51 | "Helvetica Neue", "Helvetica", "Arial", sans-serif; 52 | 53 | $bulmaswatch-import-font: true !default; 54 | 55 | $box-background: $white-bis; 56 | -------------------------------------------------------------------------------- /nuclear/bulmaswatch.scss: -------------------------------------------------------------------------------- 1 | /*! bulmaswatch v0.8.1 | MIT License */ 2 | @import "variables"; 3 | @import "bulma"; 4 | @import "overrides"; 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bulmaswatch", 3 | "version": "0.8.1", 4 | "description": "Themes for Bulma", 5 | "author": "Jenil Gogari ", 6 | "exports": "./materia/bulmaswatch.min.css", 7 | "type": "module", 8 | "homepage": "https://jenil.github.io/bulmaswatch", 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/jenil/bulmaswatch.git" 12 | }, 13 | "bugs": { 14 | "url": "https://github.com/jenil/bulmaswatch/issues" 15 | }, 16 | "license": "MIT", 17 | "keywords": [ 18 | "css", 19 | "sass", 20 | "flexbox", 21 | "responsive", 22 | "framework", 23 | "themes" 24 | ], 25 | "devDependencies": { 26 | "browser-sync": "^2.27.11", 27 | "bulma": "0.8.1", 28 | "del": "^7.0.0", 29 | "gulp": "4.0.2", 30 | "gulp-autoprefixer": "^8.0.0", 31 | "gulp-csso": "^4.0.1", 32 | "gulp-data": "^1.2.1", 33 | "gulp-front-matter": "^1.3.0", 34 | "gulp-pluck": "^0.0.4", 35 | "gulp-rename": "^2.0.0", 36 | "gulp-sass": "^5.1.0", 37 | "gulp-sourcemaps": "^3.0.0", 38 | "node-sass": "^8.0.0" 39 | }, 40 | "scripts": { 41 | "build": "gulp build", 42 | "start": "gulp", 43 | "api": "gulp api" 44 | }, 45 | "resolutions": { 46 | "graceful-fs": "4.2.3" 47 | }, 48 | "engines": { 49 | "node": ">=14.16" 50 | } 51 | } -------------------------------------------------------------------------------- /pulse/_overrides.scss: -------------------------------------------------------------------------------- 1 | // Overrides 2 | @if $bulmaswatch-import-font { 3 | @import url("https://fonts.googleapis.com/css?family=Muli:400,700&display=swap"); 4 | } 5 | 6 | .content blockquote { 7 | border-color: $primary; 8 | } 9 | 10 | .button { 11 | &.is-active, 12 | &:active { 13 | box-shadow: inset 1px 1px 4px rgba($grey-darker, 0.3); 14 | } 15 | @each $name, $pair in $colors { 16 | $color: nth($pair, 1); 17 | $color-invert: nth($pair, 2); 18 | 19 | &.is-#{$name} { 20 | &.is-hovered, 21 | &:hover { 22 | background-color: darken($color, 10); 23 | } 24 | 25 | &.is-active, 26 | &:active { 27 | box-shadow: inset 1px 0 3px rgba($grey-darker, 0.3); 28 | background-color: darken($color, 10); 29 | } 30 | } 31 | } 32 | } 33 | 34 | .notification { 35 | @each $name, $pair in $colors { 36 | $color: nth($pair, 1); 37 | $color-invert: nth($pair, 2); 38 | 39 | &.is-#{$name} { 40 | a:not(.button) { 41 | color: $color-invert; 42 | text-decoration: underline; 43 | } 44 | } 45 | } 46 | } 47 | 48 | .progress { 49 | height: $size-small; 50 | } 51 | 52 | .progress, 53 | .tag { 54 | border-radius: $radius; 55 | } 56 | 57 | .navbar { 58 | border-radius: $radius; 59 | 60 | .navbar-dropdown .navbar-item { 61 | @include from($navbar-breakpoint) { 62 | color: $text; 63 | 64 | &.is-active { 65 | background-color: $navbar-dropdown-item-hover-background-color; 66 | } 67 | } 68 | } 69 | 70 | @include until($navbar-breakpoint) { 71 | .navbar-menu { 72 | background-color: inherit; 73 | } 74 | } 75 | 76 | .navbar-burger { 77 | span { 78 | background-color: $white; 79 | } 80 | } 81 | 82 | @each $name, $pair in $colors { 83 | $color: nth($pair, 1); 84 | $color-invert: nth($pair, 2); 85 | 86 | &.is-#{$name} { 87 | @include until($navbar-breakpoint) { 88 | .navbar-item, 89 | .navbar-link { 90 | color: $color-invert; 91 | } 92 | 93 | .navbar-burger { 94 | span { 95 | background-color: $color-invert; 96 | } 97 | } 98 | } 99 | } 100 | } 101 | } 102 | 103 | .hero { 104 | // Colors 105 | .navbar { 106 | background-color: $primary; 107 | } 108 | @each $name, $pair in $colors { 109 | $color: nth($pair, 1); 110 | $color-invert: nth($pair, 2); 111 | 112 | &.is-#{$name} { 113 | .navbar { 114 | background: none; 115 | } 116 | } 117 | } 118 | } 119 | 120 | .menu { 121 | padding: 1em; 122 | background-color: lighten($primary, 50); 123 | 124 | .menu-list a:not(.is-active) { 125 | transition: all 300ms; 126 | 127 | &:hover { 128 | background-color: lighten($primary, 40); 129 | } 130 | } 131 | } 132 | -------------------------------------------------------------------------------- /pulse/_variables.scss: -------------------------------------------------------------------------------- 1 | //////////////////////////////////////////////// 2 | // PULSE 3 | //////////////////////////////////////////////// 4 | $orange: #ff7518; 5 | $yellow: #f1c40f; 6 | $green: #2ecc71; 7 | $turquoise: #14a789; 8 | $blue: #3498db; 9 | $purple: #8e44ad; 10 | $red: #e74c3c; 11 | 12 | $primary: $purple !default; 13 | $warning: $orange; 14 | 15 | $orange-invert: #fff; 16 | $warning-invert: $orange-invert; 17 | 18 | $background: lighten($primary, 50); 19 | 20 | $family-sans-serif: "Muli", "Helvetica Neue", Arial, sans-serif; 21 | $body-size: 14px; 22 | 23 | $subtitle-color: darken($primary, 10); 24 | 25 | $radius: 0; 26 | $radius-small: 0; 27 | $radius-large: 0; 28 | 29 | $link: $turquoise; 30 | $link-hover: lighten($link, 5); 31 | $link-focus: darken($link, 10); 32 | $link-active: darken($link, 10); 33 | 34 | $button-hover-color: lighten($primary, 10); 35 | $button-hover-border-color: lighten($primary, 10); 36 | 37 | $button-focus-color: darken($primary, 10); 38 | $button-focus-border-color: darken($primary, 10); 39 | $button-focus-box-shadow-size: 0 0 0 0.125em; 40 | $button-focus-box-shadow-color: rgba($primary, 0.25); 41 | 42 | $button-active-color: darken($primary, 10); 43 | $button-active-border-color: darken($primary, 10); 44 | 45 | $navbar-background-color: $primary; 46 | $navbar-item-color: #fff; 47 | $navbar-item-hover-color: $navbar-item-color; 48 | $navbar-item-active-color: $navbar-item-color; 49 | $navbar-item-hover-background-color: rgba(#000, 0.2); 50 | $navbar-item-active-background-color: rgba(#000, 0.2); 51 | $navbar-dropdown-item-active-color: $primary; 52 | $navbar-dropdown-arrow: $navbar-item-color; 53 | 54 | $menu-item-active-background-color: $primary; 55 | 56 | $bulmaswatch-import-font: true !default; 57 | 58 | $control-height: 2.572em; 59 | -------------------------------------------------------------------------------- /pulse/bulmaswatch.scss: -------------------------------------------------------------------------------- 1 | /*! bulmaswatch v0.8.1 | MIT License */ 2 | @import "variables"; 3 | @import "bulma"; 4 | @import "overrides"; 5 | -------------------------------------------------------------------------------- /sandstone/_overrides.scss: -------------------------------------------------------------------------------- 1 | // Overrides 2 | @if $bulmaswatch-import-font { 3 | @import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap"); 4 | } 5 | 6 | .button { 7 | text-transform: uppercase; 8 | } 9 | 10 | .notification { 11 | @each $name, $pair in $colors { 12 | $color: nth($pair, 1); 13 | $color-invert: nth($pair, 2); 14 | 15 | &.is-#{$name} { 16 | a:not(.button) { 17 | color: $color-invert; 18 | text-decoration: underline; 19 | } 20 | } 21 | } 22 | } 23 | 24 | .navbar { 25 | border-radius: $radius; 26 | 27 | .navbar-item, 28 | .navbar-link { 29 | font-size: 0.875rem; 30 | font-weight: 700; 31 | text-transform: uppercase; 32 | 33 | &.is-active { 34 | background-color: darken($grey-dark, 5); 35 | 36 | @include until($navbar-breakpoint) { 37 | background-color: rgba($grey-dark, 0.25); 38 | } 39 | } 40 | } 41 | 42 | @include from($navbar-breakpoint) { 43 | .navbar-dropdown .navbar-item { 44 | color: $text; 45 | } 46 | } 47 | 48 | @include until($navbar-breakpoint) { 49 | .navbar-menu { 50 | background-color: inherit; 51 | } 52 | } 53 | 54 | &:not([class*="is-"]) .navbar-burger span { 55 | background-color: $white-ter; 56 | } 57 | 58 | @each $name, $pair in $colors { 59 | $color: nth($pair, 1); 60 | $color-invert: nth($pair, 2); 61 | 62 | &.is-#{$name} { 63 | @include until($navbar-breakpoint) { 64 | .navbar-item, 65 | .navbar-link { 66 | color: rgba($color-invert, 0.7); 67 | &.is-active { 68 | color: $color-invert; 69 | } 70 | } 71 | } 72 | } 73 | } 74 | 75 | &.is-transparent { 76 | background-color: transparent; 77 | } 78 | } 79 | 80 | .hero { 81 | // Colors 82 | .navbar { 83 | background-color: $grey-dark; 84 | } 85 | @each $name, $pair in $colors { 86 | $color: nth($pair, 1); 87 | $color-invert: nth($pair, 2); 88 | 89 | &.is-#{$name} { 90 | .navbar { 91 | background: none; 92 | } 93 | } 94 | } 95 | } 96 | 97 | .pagination-link, 98 | .pagination-next, 99 | .pagination-previous { 100 | color: $primary; 101 | background-color: $pagination-background-color; 102 | } 103 | -------------------------------------------------------------------------------- /sandstone/_variables.scss: -------------------------------------------------------------------------------- 1 | //////////////////////////////////////////////// 2 | // SANDSTONE 3 | //////////////////////////////////////////////// 4 | $grey-darker: #2a2a26; 5 | $grey-dark: #3e3f3a; 6 | $grey: #8e8c84; 7 | $grey-light: #c9c8b8; 8 | $grey-lighter: #e6e1d7; 9 | 10 | $white-ter: #f8f5f0; 11 | 12 | $orange: #f47c3c; 13 | $green: #93c54b; 14 | $blue: #29abe0; 15 | $red: #d9534f; 16 | 17 | $primary: #325d88 !default; 18 | $warning: $orange; 19 | $warning-invert: #fff; 20 | 21 | $family-sans-serif: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif; 22 | $body-size: 14px; 23 | 24 | $link: #8e8c84; 25 | 26 | $pagination-background-color: $grey-lighter; 27 | 28 | $navbar-background-color: $grey-dark; 29 | $navbar-item-color: $grey-light; 30 | $navbar-item-hover-color: $white-ter; 31 | $navbar-item-active-color: $white-ter; 32 | $navbar-item-hover-background-color: $grey-darker; 33 | $navbar-dropdown-arrow: $navbar-item-color; 34 | 35 | $bulmaswatch-import-font: true !default; 36 | 37 | $card-shadow: 0 2px 3px rgba($grey-dark, 0.1), 0 0 0 1px rgba($grey-dark, 0.1); 38 | 39 | $control-height: 2.572em; 40 | -------------------------------------------------------------------------------- /sandstone/bulmaswatch.scss: -------------------------------------------------------------------------------- 1 | /*! bulmaswatch v0.8.1 | MIT License */ 2 | @import "variables"; 3 | @import "bulma"; 4 | @import "overrides"; 5 | -------------------------------------------------------------------------------- /simplex/_overrides.scss: -------------------------------------------------------------------------------- 1 | // Overrides 2 | @if $bulmaswatch-import-font { 3 | @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap"); 4 | } 5 | 6 | @mixin btn-shadow($color) { 7 | background-image: linear-gradient( 8 | 180deg, 9 | lighten($color, 3%) 0%, 10 | $color 60%, 11 | darken($color, 3%) 100% 12 | ); 13 | filter: none; 14 | } 15 | 16 | .button { 17 | @each $name, $pair in $colors { 18 | $color: nth($pair, 1); 19 | $color-invert: nth($pair, 2); 20 | 21 | &.is-#{$name} { 22 | &:not(.is-outlined):not(.is-inverted) { 23 | border: 1px solid darken($color, 6.5%); 24 | @include btn-shadow($color); 25 | } 26 | } 27 | } 28 | } 29 | 30 | .input, 31 | .textarea { 32 | box-shadow: none; 33 | } 34 | 35 | .card .card-header { 36 | border-bottom: 1px solid $border; 37 | } 38 | 39 | .notification { 40 | @each $name, $pair in $colors { 41 | $color: nth($pair, 1); 42 | $color-invert: nth($pair, 2); 43 | $color-lightning: max((100% - lightness($color)) - 2%, 0%); 44 | &.is-#{$name} { 45 | background-color: lighten($color, $color-lightning); 46 | color: $color; 47 | border: 1px solid lighten($color, 30); 48 | } 49 | } 50 | } 51 | 52 | .navbar { 53 | @include btn-shadow($primary); 54 | .has-dropdown .navbar-item { 55 | @include from($navbar-breakpoint) { 56 | color: $text; 57 | } 58 | } 59 | 60 | @include until($navbar-breakpoint) { 61 | .navbar-menu { 62 | background-color: inherit; 63 | } 64 | } 65 | 66 | .navbar-burger span { 67 | background-color: $navbar-item-color; 68 | } 69 | 70 | @each $name, $pair in $colors { 71 | $color: nth($pair, 1); 72 | $color-invert: nth($pair, 2); 73 | 74 | &.is-#{$name} { 75 | @include btn-shadow($color); 76 | @include until($navbar-breakpoint) { 77 | .navbar-item, 78 | .navbar-link { 79 | color: rgba($color-invert, 0.7); 80 | 81 | &.is-active { 82 | color: $color-invert; 83 | } 84 | } 85 | 86 | .navbar-burger span { 87 | background-color: $color-invert; 88 | } 89 | } 90 | } 91 | } 92 | } 93 | 94 | .hero { 95 | // Colors 96 | .navbar { 97 | background-color: $primary; 98 | @include btn-shadow($primary); 99 | } 100 | @each $name, $pair in $colors { 101 | $color: nth($pair, 1); 102 | $color-invert: nth($pair, 2); 103 | 104 | &.is-#{$name} { 105 | .navbar { 106 | background: none; 107 | } 108 | } 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /simplex/_variables.scss: -------------------------------------------------------------------------------- 1 | //////////////////////////////////////////////// 2 | // SIMPLEX 3 | //////////////////////////////////////////////// 4 | $grey-darker: #373a3c; 5 | $grey-dark: #444; 6 | $grey: #777; 7 | $grey-light: #bbb; 8 | $grey-lighter: #ddd; 9 | 10 | $orange: #d9831f; 11 | $green: #469408; 12 | $blue: #029acf; 13 | $cyan: #0fc5d9; 14 | $purple: #9b479f; 15 | $red: #d9230f; 16 | $white-bis: #fafafa; 17 | 18 | $primary: $red !default; 19 | $primary-dark: darken($primary, 10); 20 | $warning: $purple; 21 | $danger: $orange; 22 | 23 | $orange-invert: #fff; 24 | $warning-invert: $orange-invert; 25 | 26 | $family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; 27 | $body-size: 14px; 28 | 29 | $navbar-background-color: $primary; 30 | $navbar-item-color: rgba(#fff, 0.7); 31 | $navbar-item-hover-color: #fff; 32 | $navbar-item-active-color: #fff; 33 | $navbar-item-hover-background-color: rgba(#000, 0.1); 34 | $navbar-dropdown-arrow: $navbar-item-color; 35 | 36 | $bulmaswatch-import-font: true !default; 37 | 38 | $box-shadow: 0 0 0 1px $grey-lighter; 39 | $card-shadow: 0 0 0 1px $grey-lighter; 40 | $card-header-shadow: none; 41 | $card-background-color: $white-bis; 42 | 43 | $control-height: 2.286em; 44 | -------------------------------------------------------------------------------- /simplex/bulmaswatch.scss: -------------------------------------------------------------------------------- 1 | /*! bulmaswatch v0.8.1 | MIT License */ 2 | @import "variables"; 3 | @import "bulma"; 4 | @import "overrides"; 5 | -------------------------------------------------------------------------------- /slate/_overrides.scss: -------------------------------------------------------------------------------- 1 | // Overrides 2 | @mixin btn-shadow($color) { 3 | background-image: linear-gradient( 4 | 180deg, 5 | lighten($color, 6%) 0%, 6 | $color 60%, 7 | darken($color, 4%) 100% 8 | ); 9 | filter: none; 10 | } 11 | @mixin btn-shadow-inverse($color) { 12 | background-image: linear-gradient( 13 | 180deg, 14 | darken($color, 8%) 0%, 15 | darken($color, 4%) 40%, 16 | darken($color, 0%) 100% 17 | ); 18 | filter: none; 19 | } 20 | 21 | .section { 22 | background-color: $body-background-color; 23 | } 24 | 25 | .hero { 26 | background-color: $grey-dark; 27 | } 28 | 29 | .button { 30 | transition: all 200ms ease; 31 | @each $name, $pair in $colors { 32 | $color: nth($pair, 1); 33 | $color-invert: nth($pair, 2); 34 | 35 | &.is-#{$name} { 36 | &:not(.is-outlined):not(.is-inverted) { 37 | @include btn-shadow($color); 38 | 39 | &.is-hovered, 40 | &:hover { 41 | @include btn-shadow-inverse($color); 42 | text-shadow: 1px 1px 1px rgba($black, 0.3); 43 | } 44 | } 45 | } 46 | } 47 | } 48 | 49 | .notification { 50 | @each $name, $pair in $colors { 51 | $color: nth($pair, 1); 52 | $color-invert: nth($pair, 2); 53 | 54 | &.is-#{$name} { 55 | a:not(.button) { 56 | color: $color-invert; 57 | text-decoration: underline; 58 | } 59 | } 60 | } 61 | } 62 | 63 | .card { 64 | border: 1px solid $border; 65 | border-radius: $radius; 66 | 67 | .card-image { 68 | img { 69 | border-radius: $radius $radius 0 0; 70 | } 71 | } 72 | 73 | .card-header { 74 | border-radius: $radius $radius 0 0; 75 | } 76 | 77 | .card-footer, 78 | .card-footer-item { 79 | border-width: 1px; 80 | border-color: $border; 81 | } 82 | } 83 | 84 | .navbar { 85 | border: 1px solid $dark; 86 | 87 | @include until($navbar-breakpoint) { 88 | .navbar-menu { 89 | background-color: inherit; 90 | } 91 | } 92 | 93 | .navbar-item, 94 | .navbar-link { 95 | color: rgba($white, 0.75); 96 | border-left: 1px solid rgba($white, 0.1); 97 | border-right: 1px solid rgba($black, 0.2); 98 | 99 | &.is-active { 100 | background-color: rgba($dark, 0.1); 101 | } 102 | 103 | &:hover { 104 | color: $white; 105 | border-left: 1px solid rgba($black, 0.2); 106 | background-color: rgba($black, 0.2); 107 | } 108 | } 109 | 110 | @each $name, $pair in $colors { 111 | $color: nth($pair, 1); 112 | $color-invert: nth($pair, 2); 113 | 114 | &.is-#{$name} { 115 | .navbar-item, 116 | .navbar-link { 117 | color: rgba($color-invert, 0.75); 118 | 119 | &.is-active { 120 | color: rgba($color-invert, 1); 121 | } 122 | } 123 | } 124 | } 125 | } 126 | 127 | .hero { 128 | .navbar { 129 | background-color: $background; 130 | } 131 | @each $name, $pair in $colors { 132 | $color: nth($pair, 1); 133 | $color-invert: nth($pair, 2); 134 | 135 | &.is-#{$name} { 136 | .navbar { 137 | background: none; 138 | } 139 | } 140 | } 141 | } 142 | 143 | .tabs { 144 | a { 145 | &:hover { 146 | color: $link-hover; 147 | border-bottom-color: $link-hover; 148 | } 149 | } 150 | 151 | li { 152 | &.is-active { 153 | a { 154 | color: $primary-invert; 155 | border-bottom-color: $primary-invert; 156 | } 157 | } 158 | } 159 | } 160 | 161 | .modal { 162 | .modal-card-body { 163 | background-color: $body-background-color; 164 | } 165 | } 166 | -------------------------------------------------------------------------------- /slate/_variables.scss: -------------------------------------------------------------------------------- 1 | //////////////////////////////////////////////// 2 | // SLATE 3 | //////////////////////////////////////////////// 4 | $grey-lighter: #98a4ad; 5 | $grey-light: #7a8288; 6 | $grey: #52575c; 7 | $grey-dark: #3a3f44; 8 | $grey-darker: #272b30; 9 | 10 | $orange: #f89406; 11 | $green: #62c462; 12 | $blue: #5bc0de; 13 | $red: #ee5f5b; 14 | 15 | $primary: $grey !default; 16 | $warning: $orange; 17 | $warning-invert: #fff; 18 | 19 | $black-bis: rgb(18, 18, 18); 20 | 21 | $dark: darken($grey-darker, 3); 22 | 23 | $border: $grey; 24 | 25 | $size-7: 0.85rem; 26 | 27 | $body-background-color: $grey-darker; 28 | $background: $grey-dark; 29 | $footer-background-color: $background; 30 | $button-background-color: $background; 31 | $button-border-color: lighten($button-background-color, 15); 32 | 33 | $title-color: #aaa; 34 | $subtitle-color: $grey-light; 35 | $subtitle-strong-color: $grey-light; 36 | 37 | $text: #aaa; 38 | $text-light: lighten($text, 10); 39 | $text-strong: darken($text, 5); 40 | 41 | $box-shadow: none; 42 | $box-background-color: $grey-dark; 43 | 44 | $card-shadow: none; 45 | $card-background-color: $grey-darker; 46 | $card-header-shadow: none; 47 | $card-header-background-color: rgba($black-bis, 0.2); 48 | $card-footer-background-color: rgba($black-bis, 0.2); 49 | 50 | $link: #fafafa; 51 | $link-invert: $grey; 52 | $link-hover: lighten($link, 5); 53 | $link-focus: darken($link, 5); 54 | $link-active: darken($link, 15); 55 | $link-focus-border: darken($link, 5); 56 | $link-active-border: $link-focus-border; 57 | 58 | $button-color: #fafafa; 59 | 60 | $input-color: $grey-darker; 61 | $input-icon-color: $grey; 62 | $input-icon-active-color: $input-color; 63 | $input-hover-color: $grey-light; 64 | $input-disabled-background-color: $grey-lighter; 65 | $input-disabled-border: $grey-lighter; 66 | $input-arrow: $primary; 67 | $label-color: $text; 68 | 69 | $table-color: $text; 70 | $table-head: $grey-lighter; 71 | $table-background-color: $grey-dark; 72 | $table-cell-border: 1px solid $grey; 73 | 74 | $table-row-hover-background-color: $grey-darker; 75 | $table-striped-row-even-background-color: $grey-darker; 76 | $table-striped-row-even-hover-background-color: lighten($grey-darker, 4); 77 | 78 | $pagination-border-color: $border; 79 | 80 | $navbar-height: 4rem; 81 | $navbar-background-color: $background; 82 | $navbar-item-color: rgba($link, 0.5); 83 | $navbar-item-hover-color: $link; 84 | $navbar-item-active-color: $link; 85 | $navbar-item-hover-background-color: darken($grey-dark, 5); 86 | $navbar-item-active-background-color: darken($grey-dark, 5); 87 | $navbar-dropdown-background-color: $background; 88 | $navbar-dropdown-item-hover-color: $link; 89 | $navbar-dropdown-item-active-color: $link; 90 | $navbar-dropdown-item-hover-background-color: darken($grey-dark, 5); 91 | $navbar-dropdown-item-active-background-color: darken($grey-dark, 5); 92 | 93 | $dropdown-content-background-color: $background; 94 | $dropdown-item-color: $text; 95 | 96 | $button-disabled-background-color: $grey-lighter; 97 | 98 | $tabs-toggle-link-active-background-color: $background; 99 | $tabs-toggle-link-active-border-color: $border; 100 | $tabs-toggle-link-active-color: #fff; 101 | $tabs-boxed-link-active-background-color: $body-background-color; 102 | 103 | $file-cta-background-color: $grey-darker; 104 | 105 | $progress-bar-background-color: $grey-dark; 106 | 107 | $panel-heading-background-color: $grey-dark; 108 | 109 | $control-height: 2.5em; 110 | -------------------------------------------------------------------------------- /slate/bulmaswatch.scss: -------------------------------------------------------------------------------- 1 | /*! bulmaswatch v0.8.1 | MIT License */ 2 | @import "variables"; 3 | @import "bulma"; 4 | @import "overrides"; 5 | -------------------------------------------------------------------------------- /solar/_overrides.scss: -------------------------------------------------------------------------------- 1 | // Overrides 2 | @if $bulmaswatch-import-font { 3 | @import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic&display=swap"); 4 | } 5 | 6 | .section { 7 | background-color: $grey-darker; 8 | } 9 | 10 | hr { 11 | height: $border-width; 12 | } 13 | 14 | h6 { 15 | text-transform: uppercase; 16 | letter-spacing: 0.5px; 17 | } 18 | 19 | .hero { 20 | background-color: $grey-dark; 21 | } 22 | 23 | a { 24 | transition: all 200ms ease; 25 | } 26 | 27 | .content blockquote { 28 | border-color: $grey; 29 | } 30 | 31 | .button { 32 | transition: all 200ms ease; 33 | border-width: $border-width; 34 | 35 | &.is-active, 36 | &.is-focused, 37 | &:active, 38 | &:focus { 39 | box-shadow: 0 0 0 2px rgba($button-focus-border-color, 0.5); 40 | } 41 | 42 | &.is-loading:after { 43 | border-color: transparent transparent $button-border-color 44 | $button-border-color; 45 | } 46 | @each $name, $pair in $colors { 47 | $color: nth($pair, 1); 48 | $color-invert: nth($pair, 2); 49 | 50 | &.is-#{$name} { 51 | &.is-hovered, 52 | &:hover { 53 | background-color: lighten($color, 7.5%); 54 | } 55 | 56 | &.is-active, 57 | &.is-focused, 58 | &:active, 59 | &:focus { 60 | border-color: $color; 61 | box-shadow: 0 0 0 2px rgba($color, 0.5); 62 | } 63 | } 64 | } 65 | } 66 | 67 | .label { 68 | color: $grey-lighter; 69 | } 70 | 71 | .input, 72 | .textarea { 73 | transition: all 200ms ease; 74 | box-shadow: none; 75 | border-width: $border-width; 76 | padding-left: 1em; 77 | padding-right: 1em; 78 | } 79 | 80 | .select { 81 | &:after, 82 | select { 83 | border-width: $border-width; 84 | } 85 | } 86 | 87 | .control { 88 | &.has-addons { 89 | .button, 90 | .input, 91 | .select { 92 | margin-right: -$border-width; 93 | } 94 | } 95 | } 96 | 97 | .progress { 98 | &::-webkit-progress-value { 99 | background-color: $grey; 100 | } 101 | 102 | &::-moz-progress-bar { 103 | background-color: $grey; 104 | } 105 | } 106 | 107 | .card { 108 | $card-border-color: lighten($grey-darker, 5); 109 | border: $border-width solid $card-border-color; 110 | border-radius: $radius; 111 | 112 | .card-image { 113 | img { 114 | border-radius: $radius $radius 0 0; 115 | } 116 | } 117 | 118 | .card-header { 119 | border-radius: $radius $radius 0 0; 120 | } 121 | 122 | .card-footer, 123 | .card-footer-item { 124 | border-width: $border-width; 125 | border-color: $card-border-color; 126 | } 127 | } 128 | 129 | .notification { 130 | @each $name, $pair in $colors { 131 | $color: nth($pair, 1); 132 | $color-invert: nth($pair, 2); 133 | 134 | &.is-#{$name} { 135 | a:not(.button) { 136 | color: $color-invert; 137 | text-decoration: underline; 138 | } 139 | } 140 | } 141 | } 142 | 143 | .tag { 144 | border-radius: $radius; 145 | } 146 | 147 | .menu-list { 148 | a { 149 | transition: all 300ms ease; 150 | } 151 | } 152 | 153 | .modal-card-body { 154 | background-color: $grey-darker; 155 | } 156 | 157 | .modal-card-foot, 158 | .modal-card-head { 159 | border-color: $grey-dark; 160 | } 161 | 162 | .message-header { 163 | font-weight: $weight-bold; 164 | } 165 | 166 | .message-body { 167 | border-width: $border-width; 168 | border-color: $grey; 169 | } 170 | 171 | .navbar { 172 | border-radius: $radius; 173 | 174 | &.is-transparent { 175 | background-color: transparent; 176 | } 177 | 178 | @include until($navbar-breakpoint) { 179 | .navbar-menu { 180 | background-color: inherit; 181 | } 182 | } 183 | 184 | @each $name, $pair in $colors { 185 | $color: nth($pair, 1); 186 | $color-invert: nth($pair, 2); 187 | 188 | &.is-#{$name} { 189 | @include until($navbar-breakpoint) { 190 | .navbar-item, 191 | .navbar-link { 192 | color: rgba($color-invert, 0.75); 193 | 194 | &.is-active { 195 | color: $color-invert; 196 | } 197 | } 198 | } 199 | } 200 | } 201 | } 202 | 203 | .pagination-link, 204 | .pagination-next, 205 | .pagination-previous { 206 | border-width: $border-width; 207 | } 208 | 209 | .panel-block, 210 | .panel-heading, 211 | .panel-tabs { 212 | border-width: $border-width; 213 | 214 | &:first-child { 215 | border-top-width: $border-width; 216 | } 217 | } 218 | 219 | .panel-heading { 220 | font-weight: $weight-bold; 221 | } 222 | 223 | .panel-tabs { 224 | a { 225 | border-width: $border-width; 226 | margin-bottom: -$border-width; 227 | 228 | &.is-active { 229 | border-bottom-color: $link-active; 230 | } 231 | } 232 | } 233 | 234 | .panel-block { 235 | &:hover { 236 | color: $link-hover; 237 | 238 | .panel-icon { 239 | color: $link-hover; 240 | } 241 | } 242 | 243 | &.is-active { 244 | .panel-icon { 245 | color: $link-active; 246 | } 247 | } 248 | } 249 | 250 | .tabs { 251 | a { 252 | border-bottom-width: $border-width; 253 | margin-bottom: -$border-width; 254 | } 255 | 256 | ul { 257 | border-bottom-width: $border-width; 258 | } 259 | 260 | &.is-boxed { 261 | a { 262 | border-width: $border-width; 263 | } 264 | 265 | li.is-active a { 266 | background-color: $background; 267 | } 268 | } 269 | 270 | &.is-toggle { 271 | li a { 272 | border-width: $border-width; 273 | margin-bottom: 0; 274 | } 275 | 276 | li + li { 277 | margin-left: -$border-width; 278 | } 279 | } 280 | } 281 | -------------------------------------------------------------------------------- /solar/_variables.scss: -------------------------------------------------------------------------------- 1 | //////////////////////////////////////////////// 2 | // SOLAR 3 | //////////////////////////////////////////////// 4 | $grey-lighter: #fdf6e3; 5 | $grey-light: #eee8d5; 6 | $grey: #839496; 7 | $grey-alt: #586e75; 8 | $grey-dark: #073642; 9 | $grey-darker: #002b36; 10 | 11 | $orange: #cb4b16; 12 | $yellow: #b58900; 13 | $green: #859900; 14 | $cyan: #2aa198; 15 | $blue: #268bd2; 16 | $purple: #6c71c4; 17 | $red: #d33682; 18 | 19 | $black-bis: rgb(18, 18, 18); 20 | 21 | $primary: $cyan !default; 22 | $warning: $orange; 23 | $info: $blue; 24 | $yellow-invert: #fff; 25 | 26 | $light: $grey-lighter; 27 | $dark: darken($grey-darker, 3); 28 | 29 | $family-sans-serif: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", 30 | "Helvetica Neue", "Helvetica", "Arial", sans-serif; 31 | $family-monospace: "Inconsolata", "Consolas", "Monaco", monospace; 32 | 33 | $radius-small: 3px; 34 | $radius: 0.4em; 35 | $radius-large: 8px; 36 | 37 | $body-size: 15px; 38 | $size-7: 0.85em; 39 | 40 | $title-weight: 500; 41 | $subtitle-weight: 400; 42 | $subtitle-color: $grey-dark; 43 | 44 | $border-width: 2px; 45 | $border: $grey-dark; 46 | 47 | $body-background-color: $grey-darker; 48 | $background: $grey-dark; 49 | $footer-background-color: $background; 50 | 51 | $title-color: $grey; 52 | $subtitle-color: $grey-alt; 53 | $subtitle-strong-color: $grey-light; 54 | 55 | $text: $grey; 56 | $text-light: lighten($text, 10); 57 | $text-strong: darken($text, 5); 58 | 59 | $box-shadow: none; 60 | $box-background-color: $grey-dark; 61 | 62 | $card-shadow: none; 63 | $card-background-color: $grey-darker; 64 | $card-header-box-shadow: none; 65 | $card-header-background-color: rgba($black-bis, 0.2); 66 | $card-footer-background-color: rgba($black-bis, 0.2); 67 | 68 | $link: $yellow; 69 | $link-hover: $grey-light; 70 | $link-hover-border: $grey-light; 71 | $link-focus: darken($grey-light, 10); 72 | $link-focus-border: $grey-light; 73 | $link-active: darken($grey-light, 10); 74 | 75 | $button-color: $grey; 76 | $button-background-color: $background; 77 | $button-border-color: $grey; 78 | 79 | $control-height: 2.5em; 80 | 81 | $input-color: $grey; 82 | $input-icon-color: darken($grey-light, 10); 83 | $input-background-color: $grey-lighter; 84 | $input-border-color: darken($grey-light, 10); 85 | $input-hover-color: $grey-light; 86 | $input-disabled-background-color: $grey-dark; 87 | $input-disabled-border-color: $grey-dark; 88 | 89 | $table-color: $text; 90 | $table-head-color: $grey-lighter; 91 | $table-background-color: $grey-dark; 92 | $table-cell-border: 1px solid $grey; 93 | 94 | $table-row-hover-background-color: $grey-darker; 95 | $table-striped-row-even-background-color: $grey-darker; 96 | $table-striped-row-even-hover-background-color: lighten($grey-darker, 4); 97 | 98 | $pagination-border-color: $border; 99 | 100 | $navbar-background-color: $grey-dark; 101 | $navbar-item-color: $grey; 102 | $navbar-item-hover-color: $grey-lighter; 103 | $navbar-item-active-color: $grey-lighter; 104 | $navbar-item-active-background-color: transparent; 105 | $navbar-item-hover-background-color: transparent; 106 | $navbar-dropdown-border-top: 1px solid $grey-darker; 107 | $navbar-divider-background-color: $grey-darker; 108 | $navbar-dropdown-arrow: #fff; 109 | $navbar-dropdown-background-color: $grey-dark; 110 | $navbar-dropdown-item-hover-color: $grey-lighter; 111 | $navbar-dropdown-item-hover-background-color: lighten($grey-darker, 4); 112 | $navbar-dropdown-item-active-background-color: lighten($grey-darker, 4); 113 | $navbar-dropdown-item-active-color: $grey-lighter; 114 | 115 | $dropdown-content-background-color: $background; 116 | $dropdown-item-color: $text; 117 | $dropdown-item-hover-color: $link-hover; 118 | 119 | $bulmaswatch-import-font: true !default; 120 | -------------------------------------------------------------------------------- /solar/bulmaswatch.scss: -------------------------------------------------------------------------------- 1 | /*! bulmaswatch v0.8.1 | MIT License */ 2 | @import "variables"; 3 | @import "bulma"; 4 | @import "overrides"; 5 | -------------------------------------------------------------------------------- /spacelab/_overrides.scss: -------------------------------------------------------------------------------- 1 | // Overrides 2 | @if $bulmaswatch-import-font { 3 | @import url("https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700&display=swap"); 4 | } 5 | @mixin btn-shadow($color) { 6 | background-image: linear-gradient( 7 | 180deg, 8 | lighten($color, 15%) 0%, 9 | $color 60%, 10 | darken($color, 4%) 100% 11 | ); 12 | filter: none; 13 | border: 1px solid darken($color, 10%); 14 | } 15 | 16 | .button { 17 | transition: all 200ms ease; 18 | text-shadow: -1px -1px 0 rgba($black, 0.1); 19 | 20 | &.is-loading { 21 | text-shadow: none; 22 | } 23 | 24 | @each $name, $pair in $colors { 25 | $color: nth($pair, 1); 26 | $color-invert: nth($pair, 2); 27 | 28 | &.is-#{$name} { 29 | &:not(.is-outlined):not(.is-inverted) { 30 | @include btn-shadow($color); 31 | 32 | &.is-hovered, 33 | &:hover { 34 | @include btn-shadow(darken($color, 4%)); 35 | } 36 | } 37 | } 38 | } 39 | } 40 | 41 | .notification { 42 | border: 1px solid $border; 43 | @each $name, $pair in $colors { 44 | $color: nth($pair, 1); 45 | $color-invert: nth($pair, 2); 46 | $color-lightning: max((100% - lightness($color)) - 1%, 0%); 47 | &.is-#{$name} { 48 | background-color: lighten($color, $color-lightning); 49 | color: $color; 50 | border: 1px solid lighten($color, 30); 51 | } 52 | } 53 | } 54 | 55 | .progress { 56 | border-radius: $radius-large; 57 | } 58 | 59 | .navbar { 60 | @include btn-shadow($light); 61 | } 62 | .navbar { 63 | @each $name, $pair in $colors { 64 | $color: nth($pair, 1); 65 | $color-invert: nth($pair, 2); 66 | 67 | &.is-#{$name} { 68 | @include btn-shadow($color); 69 | } 70 | } 71 | } 72 | 73 | .hero { 74 | .navbar { 75 | background-color: $background; 76 | @include btn-shadow($light); 77 | border: none; 78 | } 79 | @each $name, $pair in $colors { 80 | $color: nth($pair, 1); 81 | $color-invert: nth($pair, 2); 82 | 83 | &.is-#{$name} { 84 | .navbar { 85 | background: $color; 86 | @include btn-shadow($color); 87 | border: none; 88 | } 89 | } 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /spacelab/_variables.scss: -------------------------------------------------------------------------------- 1 | //////////////////////////////////////////////// 2 | // SPACELAB 3 | //////////////////////////////////////////////// 4 | $grey-darker: #2d2d2d; 5 | $grey-dark: #333; 6 | $grey: #777; 7 | $grey-light: #999; 8 | $grey-lighter: #eee; 9 | 10 | $orange: #d47500; 11 | $green: #3cb521; 12 | $blue: #3399f3; 13 | $red: #cd0200; 14 | 15 | $primary: #446e9b !default; 16 | $warning: $orange; 17 | $warning-invert: #fff; 18 | $link: #807f7f; 19 | 20 | $family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; 21 | 22 | $subtitle-color: $grey; 23 | 24 | $navbar-item-active-color: $primary; 25 | $navbar-item-hover-background-color: transparent; 26 | 27 | $bulmaswatch-import-font: true !default; 28 | -------------------------------------------------------------------------------- /spacelab/bulmaswatch.scss: -------------------------------------------------------------------------------- 1 | /*! bulmaswatch v0.8.1 | MIT License */ 2 | @import "variables"; 3 | @import "bulma"; 4 | @import "overrides"; 5 | -------------------------------------------------------------------------------- /superhero/_overrides.scss: -------------------------------------------------------------------------------- 1 | // Overrides 2 | @if $bulmaswatch-import-font { 3 | @import url("https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap"); 4 | } 5 | 6 | .section { 7 | background-color: $body-background-color; 8 | } 9 | 10 | .hero { 11 | background-color: $body-background-color; 12 | } 13 | 14 | .button { 15 | &.is-hovered, 16 | &:hover { 17 | background-color: darken($button-background-color, 3%); 18 | } 19 | @each $name, $pair in $colors { 20 | $color: nth($pair, 1); 21 | $color-invert: nth($pair, 2); 22 | 23 | &.is-#{$name} { 24 | &.is-hovered, 25 | &:hover { 26 | background-color: darken($color, 3%); 27 | } 28 | } 29 | } 30 | 31 | &.is-loading:after { 32 | border-color: transparent transparent $grey-light $grey-light; 33 | } 34 | } 35 | 36 | .label { 37 | color: $grey-lighter; 38 | } 39 | 40 | .notification { 41 | @each $name, $pair in $colors { 42 | $color: nth($pair, 1); 43 | $color-invert: nth($pair, 2); 44 | 45 | &.is-#{$name} { 46 | a:not(.button) { 47 | color: $color-invert; 48 | text-decoration: underline; 49 | } 50 | } 51 | } 52 | } 53 | 54 | .card { 55 | border: 1px solid $border; 56 | border-radius: $radius; 57 | 58 | .card-image { 59 | img { 60 | border-radius: $radius $radius 0 0; 61 | } 62 | } 63 | 64 | .card-header { 65 | border-radius: $radius $radius 0 0; 66 | } 67 | 68 | .card-footer, 69 | .card-footer-item { 70 | border-width: 1px; 71 | border-color: $border; 72 | } 73 | } 74 | 75 | .modal-card-body { 76 | background-color: $body-background-color; 77 | } 78 | 79 | .navbar { 80 | &.is-transparent { 81 | background-color: transparent; 82 | } 83 | 84 | @include until($navbar-breakpoint) { 85 | .navbar-menu { 86 | background-color: transparent; 87 | } 88 | } 89 | 90 | @each $name, $pair in $colors { 91 | $color: nth($pair, 1); 92 | $color-invert: nth($pair, 2); 93 | 94 | &.is-#{$name} { 95 | @include until($navbar-breakpoint) { 96 | .navbar-item, 97 | .navbar-link { 98 | color: $color-invert; 99 | 100 | &.is-active { 101 | color: rgba($color-invert, 0.7); 102 | } 103 | } 104 | 105 | .navbar-burger { 106 | span { 107 | background-color: $color-invert; 108 | } 109 | } 110 | } 111 | } 112 | } 113 | } 114 | 115 | .hero { 116 | .navbar { 117 | .navbar-dropdown { 118 | .navbar-item { 119 | color: $grey-lighter; 120 | } 121 | } 122 | } 123 | } 124 | -------------------------------------------------------------------------------- /superhero/_variables.scss: -------------------------------------------------------------------------------- 1 | //////////////////////////////////////////////// 2 | // SUPERHERO 3 | //////////////////////////////////////////////// 4 | $grey-darker: #1f2d3b; 5 | $grey-dark: #2b3e50; 6 | $grey: #4e5d6c; 7 | $grey-light: #8694a4; 8 | $grey-lighter: #dee5ed; 9 | 10 | $orange: #df691a; 11 | $yellow: #f0ad4e; 12 | $green: #5cb85c; 13 | $blue: #5bc0de; 14 | $red: #d9534f; 15 | 16 | $primary: $orange !default; 17 | 18 | $dark: darken($grey-darker, 3); 19 | 20 | $title-color: $grey-lighter; 21 | $title-weight: 400; 22 | $subtitle-strong-color: $grey-lighter; 23 | $subtitle-color: darken($grey-lighter, 10); 24 | $subtitle-strong-color: darken($grey-lighter, 10); 25 | 26 | $background: $grey-dark; 27 | $body-background-color: $grey-darker; 28 | $footer-background-color: $background; 29 | 30 | $border: $grey; 31 | 32 | $family-sans-serif: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; 33 | 34 | $text: $grey-lighter; 35 | $text-strong: darken($grey-lighter, 10); 36 | $text-light: $grey-light; 37 | 38 | $box-background-color: $background; 39 | 40 | $card-shadow: none; 41 | $card-background-color: darken($body-background-color, 1); 42 | $card-header-box-shadow: none; 43 | $card-header-background-color: darken($body-background-color, 3); 44 | $card-footer-background-color: darken($body-background-color, 3); 45 | 46 | $link: $grey-light; 47 | $link-hover: $grey-lighter; 48 | $link-focus: $grey-lighter; 49 | $link-active: $grey-lighter; 50 | 51 | $button-color: $grey-lighter; 52 | $button-background-color: $grey; 53 | $button-border-color: $grey; 54 | 55 | $button-hover-border: transparent; 56 | $button-active-border-color: transparent; 57 | 58 | $radius: 0; 59 | $radius-small: 0; 60 | 61 | $input-hover-color: $link-hover; 62 | $input-color: $grey-darker; 63 | $input-icon-color: $grey; 64 | $input-icon-active-color: $input-color; 65 | 66 | $table-color: $text; 67 | $table-head-color: $grey-lighter; 68 | $table-background-color: $grey-dark; 69 | $table-cell-border: 1px solid $grey; 70 | $table-row-hover-background-color: $grey-darker; 71 | $table-striped-row-even-background-color: $grey-darker; 72 | $table-striped-row-even-hover-background-color: lighten($grey-darker, 4); 73 | 74 | $navbar-background-color: $background; 75 | $navbar-item-color: $text; 76 | $navbar-item-hover-color: $grey-light; 77 | $navbar-item-active-color: $primary; 78 | $navbar-item-hover-background-color: rgba($grey-darker, 0.1); 79 | $navbar-item-active-background-color: rgba($grey-darker, 0.1); 80 | $navbar-dropdown-item-hover-color: $grey-light; 81 | $navbar-dropdown-item-active-color: $primary; 82 | $navbar-dropdown-background-color: $background; 83 | $navbar-dropdown-arrow: currentColor; 84 | 85 | $dropdown-content-background-color: $background; 86 | $dropdown-item-color: $text; 87 | $dropdown-item-hover-color: $text-light; 88 | 89 | $tabs-toggle-link-active-background-color: $background; 90 | $tabs-toggle-link-active-border-color: $border; 91 | $tabs-toggle-link-active-color: #fff; 92 | $tabs-boxed-link-active-background-color: $body-background-color; 93 | 94 | $pagination-color: $link; 95 | $pagination-border-color: $border; 96 | 97 | $bulmaswatch-import-font: true !default; 98 | 99 | $file-cta-background-color: $grey-darker; 100 | 101 | $progress-bar-background-color: $grey-dark; 102 | 103 | $panel-heading-background-color: $grey-dark; 104 | -------------------------------------------------------------------------------- /superhero/bulmaswatch.scss: -------------------------------------------------------------------------------- 1 | /*! bulmaswatch v0.8.1 | MIT License */ 2 | @import "variables"; 3 | @import "bulma"; 4 | @import "overrides"; 5 | -------------------------------------------------------------------------------- /test.html: -------------------------------------------------------------------------------- 1 | --- 2 | permalink: /test/ 3 | modifiers: 4 | - '' 5 | - primary 6 | - link 7 | - info 8 | - success 9 | - warning 10 | - danger 11 | - white 12 | - black 13 | - light 14 | - dark 15 | --- 16 | 17 | 18 | 19 | 20 | 21 | Test 22 | 23 | 24 | 25 | 47 | 48 | 49 | 50 |
51 |
52 |
53 |

Bulma

54 |

Theme preview

55 |
56 |
57 |
58 |
59 |
60 | 143 |
144 |
145 | {% include elements/typography.html %} 146 | {% include elements/box.html %} 147 | {% include elements/button.html %} 148 | {% include elements/content.html %} 149 | {% include elements/delete.html %} 150 | {% include elements/form.html %} 151 | {% include elements/icon.html %} 152 | {% include elements/images.html %} 153 | {% include elements/notifications.html %} 154 | {% include elements/progress.html %} 155 | {% include elements/table.html %} 156 | {% include elements/tag.html %} 157 | {% include components/breadcrumb.html %} 158 | {% include components/hero.html %} 159 | {% include components/card.html %} 160 | {% include components/dropdown.html %} 161 | {% include components/level.html %} 162 | {% include components/media.html %} 163 | {% include components/menu.html %} 164 | {% include components/message.html %} 165 | {% include components/modal.html %} 166 | {% include components/navbar.html %} 167 | {% include components/pagination.html %} 168 | {% include components/panel.html %} 169 | {% include components/tabs.html %} 170 |
171 |
172 | {% include footer.html %} 173 |
174 | 180 |
181 | 218 | 219 | 220 | 221 | -------------------------------------------------------------------------------- /thumb.html: -------------------------------------------------------------------------------- 1 | --- 2 | permalink: /thumb/ 3 | --- 4 | 5 | 6 | 7 | 8 | 9 | Test 10 | 11 | 12 | 13 | 39 | 40 | 41 | 42 |
43 |
44 | 53 |
54 |
55 |
56 | Button 57 | Primary 58 | Info 59 | Link 60 |
61 |
62 | Success 63 | Warning 64 | Danger 65 |
66 |
67 |
68 |
69 | 76 |
77 | 79 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /united/_overrides.scss: -------------------------------------------------------------------------------- 1 | // Overrides 2 | @if $bulmaswatch-import-font { 3 | @import url("https://fonts.googleapis.com/css?family=Ubuntu:400,700&display=swap"); 4 | } 5 | 6 | .button { 7 | &.is-active, 8 | &:active { 9 | box-shadow: inset 1px 1px 4px rgba($grey-darker, 0.3); 10 | } 11 | @each $name, $pair in $colors { 12 | $color: nth($pair, 1); 13 | $color-invert: nth($pair, 2); 14 | 15 | &.is-#{$name} { 16 | &.is-hovered, 17 | &:hover { 18 | background-color: darken($color, 10); 19 | } 20 | 21 | &.is-active, 22 | &:active { 23 | box-shadow: inset 1px 0 3px rgba($grey-darker, 0.3); 24 | background-color: darken($color, 10); 25 | } 26 | } 27 | } 28 | } 29 | 30 | .input, 31 | .textarea { 32 | box-shadow: none; 33 | } 34 | 35 | .notification { 36 | @each $name, $pair in $colors { 37 | $color: nth($pair, 1); 38 | $color-invert: nth($pair, 2); 39 | 40 | &.is-#{$name} { 41 | a:not(.button) { 42 | color: $color-invert; 43 | text-decoration: underline; 44 | } 45 | } 46 | } 47 | } 48 | 49 | .navbar { 50 | @include until($navbar-breakpoint) { 51 | .navbar-menu { 52 | background-color: inherit; 53 | } 54 | } 55 | 56 | @include from($navbar-breakpoint) { 57 | .navbar-dropdown .navbar-item { 58 | color: $text; 59 | 60 | &.is-active { 61 | background-color: $navbar-dropdown-item-hover-background-color; 62 | } 63 | } 64 | } 65 | 66 | &.is-transparent { 67 | background-color: transparent; 68 | .navbar-item, 69 | .navbar-link { 70 | color: $text; 71 | } 72 | } 73 | 74 | .navbar-link::after { 75 | border-color: currentColor; 76 | } 77 | 78 | @each $name, $pair in $colors { 79 | $color: nth($pair, 1); 80 | $color-invert: nth($pair, 2); 81 | 82 | &.is-#{$name} { 83 | @include until($navbar-breakpoint) { 84 | .navbar-item, 85 | .navbar-link { 86 | color: $color-invert; 87 | } 88 | } 89 | } 90 | } 91 | } 92 | 93 | .hero { 94 | .navbar { 95 | .navbar-item, 96 | .navbar-link { 97 | color: inherit; 98 | } 99 | 100 | @include from($navbar-breakpoint) { 101 | .navbar-dropdown .navbar-item { 102 | color: $text; 103 | } 104 | } 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /united/_variables.scss: -------------------------------------------------------------------------------- 1 | //////////////////////////////////////////////// 2 | // UNITED 3 | //////////////////////////////////////////////// 4 | $grey-darker: #222; 5 | $grey-dark: #333; 6 | $grey: #777; 7 | $grey-light: #aea79f; 8 | $grey-lighter: #ddd; 9 | 10 | $orange: #e95420; 11 | $yellow: #efb73e; 12 | $green: #38b44a; 13 | $purple: #772953; 14 | $red: #df382c; 15 | $blue: #17a2b8; 16 | 17 | $primary: $orange !default; 18 | $info: $purple; 19 | 20 | $yellow-invert: #fff; 21 | $warning-invert: $yellow-invert; 22 | 23 | $family-sans-serif: "Ubuntu", Tahoma, "Helvetica Neue", Arial, sans-serif; 24 | $body-size: 14px; 25 | 26 | $size-7: 0.8575rem; 27 | 28 | $subtitle-color: $grey; 29 | 30 | $navbar-background-color: #aea79f; 31 | $navbar-item-color: #fff; 32 | $navbar-item-hover-color: $navbar-item-color; 33 | $navbar-item-active-color: $navbar-item-color; 34 | $navbar-item-hover-background-color: rgba(#000, 0.1); 35 | $navbar-item-active-background-color: rgba(#000, 0.1); 36 | $navbar-dropdown-arrow: $navbar-item-color; 37 | 38 | $bulmaswatch-import-font: true !default; 39 | 40 | $control-height: 2.572em; 41 | -------------------------------------------------------------------------------- /united/bulmaswatch.scss: -------------------------------------------------------------------------------- 1 | /*! bulmaswatch v0.8.1 | MIT License */ 2 | @import "variables"; 3 | @import "bulma"; 4 | @import "overrides"; 5 | -------------------------------------------------------------------------------- /yeti/_overrides.scss: -------------------------------------------------------------------------------- 1 | // Overrides 2 | @if $bulmaswatch-import-font { 3 | @import url("https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700&display=swap"); 4 | } 5 | 6 | .button { 7 | &.is-active, 8 | &:active { 9 | box-shadow: inset 1px 1px 4px rgba($grey-darker, 0.3); 10 | } 11 | @each $name, $pair in $colors { 12 | $color: nth($pair, 1); 13 | $color-invert: nth($pair, 2); 14 | 15 | &.is-#{$name} { 16 | border-color: darken($color, 5); 17 | 18 | &.is-hovered, 19 | &:hover { 20 | background-color: darken($color, 10); 21 | } 22 | 23 | &.is-active, 24 | &:active { 25 | box-shadow: inset 1px 0 3px rgba($grey-darker, 0.3); 26 | background-color: darken($color, 10); 27 | } 28 | } 29 | } 30 | 31 | &.is-loading:after { 32 | border-color: transparent transparent $grey-light $grey-light; 33 | } 34 | } 35 | 36 | .input, 37 | .textarea { 38 | box-shadow: none; 39 | } 40 | 41 | // .box, 42 | // .card { 43 | // box-shadow: 0 0 0 1px $border; 44 | // } 45 | 46 | .notification { 47 | @each $name, $pair in $colors { 48 | $color: nth($pair, 1); 49 | $color-invert: nth($pair, 2); 50 | 51 | &.is-#{$name} { 52 | a:not(.button) { 53 | color: $color-invert; 54 | text-decoration: underline; 55 | } 56 | } 57 | } 58 | } 59 | 60 | .navbar { 61 | &.is-transparent { 62 | background-color: transparent; 63 | 64 | .navbar-item, 65 | .navbar-link { 66 | color: $link; 67 | 68 | &:after { 69 | border-color: currentColor; 70 | } 71 | } 72 | } 73 | 74 | @include from($navbar-breakpoint) { 75 | .has-dropdown .navbar-item { 76 | color: $text; 77 | } 78 | } 79 | 80 | @include until($navbar-breakpoint) { 81 | .navbar-menu { 82 | background-color: inherit; 83 | } 84 | 85 | @each $name, $pair in $colors { 86 | $color: nth($pair, 1); 87 | $color-invert: nth($pair, 2); 88 | 89 | &.is-#{$name} { 90 | .navbar-item, 91 | .navbar-link { 92 | color: $color-invert; 93 | } 94 | } 95 | } 96 | } 97 | } 98 | 99 | .hero { 100 | .navbar { 101 | .navbar-item, 102 | .navbar-link { 103 | color: $link; 104 | 105 | &:after { 106 | border-color: currentColor; 107 | } 108 | } 109 | 110 | @include from($navbar-breakpoint) { 111 | .has-dropdown .navbar-item { 112 | color: $text; 113 | } 114 | } 115 | } 116 | @each $name, $pair in $colors { 117 | $color: nth($pair, 1); 118 | $color-invert: nth($pair, 2); 119 | 120 | &.is-#{$name} { 121 | .navbar-item, 122 | .navbar-link { 123 | color: $color-invert; 124 | } 125 | } 126 | } 127 | } 128 | 129 | .progress, 130 | .tag { 131 | border-radius: $radius; 132 | } 133 | -------------------------------------------------------------------------------- /yeti/_variables.scss: -------------------------------------------------------------------------------- 1 | //////////////////////////////////////////////// 2 | // YETI 3 | //////////////////////////////////////////////// 4 | $grey-darker: #222; 5 | $grey-dark: #333; 6 | $grey: #888; 7 | $grey-light: #ccc; 8 | $grey-lighter: #e9e9e9; 9 | 10 | $orange: #e99002; 11 | $green: #43ac6a; 12 | $cyan: #5bc0de; 13 | $red: #f04124; 14 | 15 | $primary: #008cba !default; 16 | $warning: $orange; 17 | 18 | $orange-invert: #fff; 19 | $warning-invert: $orange-invert; 20 | 21 | $border: #e9e9e9; 22 | $family-sans-serif: "Open Sans", "Helvetica Neue", Arial, sans-serif; 23 | $body-size: 15px; 24 | 25 | $radius: 0; 26 | $radius-small: 0; 27 | $radius-large: 0; 28 | 29 | $subtitle-color: $grey; 30 | 31 | $button-background-color: $grey-lighter; 32 | $button-border-color: darken($button-background-color, 5); 33 | 34 | $navbar-background-color: #767676; 35 | $navbar-item-color: rgba(#fff, 0.6); 36 | $navbar-item-hover-color: #fff; 37 | $navbar-item-active-color: #fff; 38 | $navbar-item-hover-background-color: rgba(#000, 0.1); 39 | $navbar-dropdown-arrow: $navbar-item-color; 40 | 41 | $bulmaswatch-import-font: true !default; 42 | 43 | $box-shadow: 0 0 0 1px $border; 44 | $card-shadow: 0 0 0 1px $border; 45 | 46 | $control-height: 2.534em; 47 | -------------------------------------------------------------------------------- /yeti/bulmaswatch.scss: -------------------------------------------------------------------------------- 1 | /*! bulmaswatch v0.8.1 | MIT License */ 2 | @import "variables"; 3 | @import "bulma"; 4 | @import "overrides"; 5 | --------------------------------------------------------------------------------