minimaterialize 1.1.0 → 1.1.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +5 -27
- data/_layouts/default.html +1 -1
- data/_sass/components/_badges.scss +55 -0
- data/_sass/components/_buttons.scss +322 -0
- data/_sass/components/_cards.scss +195 -0
- data/_sass/components/_carousel.scss +90 -0
- data/_sass/components/_chips.scss +90 -0
- data/_sass/components/_collapsible.scss +91 -0
- data/_sass/components/_color-classes.scss +32 -0
- data/_sass/components/_color-variables.scss +370 -0
- data/_sass/components/_datepicker.scss +191 -0
- data/_sass/components/_dropdown.scss +85 -0
- data/_sass/components/_global.scss +769 -0
- data/_sass/components/_grid.scss +156 -0
- data/_sass/components/_icons-material-design.scss +5 -0
- data/_sass/components/_materialbox.scss +43 -0
- data/_sass/components/_modal.scss +90 -0
- data/_sass/components/_navbar.scss +208 -0
- data/_sass/components/_normalize.scss +447 -0
- data/_sass/components/_preloader.scss +334 -0
- data/_sass/components/_pulse.scss +34 -0
- data/_sass/components/_sidenav.scss +216 -0
- data/_sass/components/_slider.scss +92 -0
- data/_sass/components/_table_of_contents.scss +33 -0
- data/_sass/components/_tabs.scss +99 -0
- data/_sass/components/_tapTarget.scss +103 -0
- data/_sass/components/_timepicker.scss +183 -0
- data/_sass/components/_toast.scss +58 -0
- data/_sass/components/_tooltip.scss +32 -0
- data/_sass/components/_transitions.scss +13 -0
- data/_sass/components/_typography.scss +60 -0
- data/_sass/components/_variables.scss +349 -0
- data/_sass/components/_waves.scss +114 -0
- data/_sass/components/forms/_checkboxes.scss +200 -0
- data/_sass/components/forms/_file-input.scss +44 -0
- data/_sass/components/forms/_forms.scss +22 -0
- data/_sass/components/forms/_input-fields.scss +354 -0
- data/_sass/components/forms/_radio-buttons.scss +115 -0
- data/_sass/components/forms/_range.scss +161 -0
- data/_sass/components/forms/_select.scss +180 -0
- data/_sass/components/forms/_switches.scss +89 -0
- data/assets/javascript/materialize.min.js +6 -0
- data/package.json +3 -2
- metadata +41 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: ea55cdce64a96fe61aa6f2bb368a9df2b124b6f9
|
4
|
+
data.tar.gz: 13059122503e11f184a8a4ad3166ddf944dc0115
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 8c69eb6d8dd081f087245c61a7df2569a67f7c85a8bc97f00d1f5a87aa832412c71273a05b4e8b2c482c3b71d7c572156c19208b4f65a86206dd2bf18bc81b68
|
7
|
+
data.tar.gz: 278a14f2c5123638b4d63d5c6020094f522582c4b4beb311a2570c1be14ec63b95a89235ed82b97fa3454ae5297c7f76b3ff4ae0c0c38b7d2887d8227065bf7f
|
data/README.md
CHANGED
@@ -1,18 +1,8 @@
|
|
1
1
|
# Minimaterialize
|
2
2
|
|
3
|
-
**WARNING:** Work in progress.
|
4
|
-
|
5
3
|
This is a fork of the [default Jekyll starter
|
6
4
|
theme](https://github.com/jekyll/minima), wired up with the [materialize css
|
7
|
-
framework](https://materializecss.com/) by Google. I wanted to build a Jekyll
|
8
|
-
blog with Material Design, and figured why not release a bootstrap that other's
|
9
|
-
can work with before hacking in my own code. Enjoy, and feel free to send in a
|
10
|
-
PR with a cool fix or feature!
|
11
|
-
|
12
|
-
**TODO:**
|
13
|
-
|
14
|
-
- exclude node_modules from build, replace with assets/vendor or something
|
15
|
-
- Update screenshot
|
5
|
+
framework](https://materializecss.com/) by Google. I wanted to build a Jekyll blog with Material Design, and figured why not release a bootstrap that other's can work with before hacking in my own code. Enjoy, and feel free to send in a PR with a cool fix or feature!
|
16
6
|
|
17
7
|
> ***Minima** is a one-size-fits-all Jekyll theme for writers*. It's Jekyll's default (and first) theme. It's what you get when you run `jekyll new`.
|
18
8
|
|
@@ -37,7 +27,6 @@ theme: minimaterialize
|
|
37
27
|
And then execute:
|
38
28
|
|
39
29
|
```shell
|
40
|
-
npm install
|
41
30
|
bundle install
|
42
31
|
```
|
43
32
|
|
@@ -81,18 +70,7 @@ Refers to snippets of code within the `_includes` directory that can be inserted
|
|
81
70
|
The minima styles have been totally removed in favor of Materialize.
|
82
71
|
see `_sass/main.scss` to control what's included and add your own.
|
83
72
|
|
84
|
-
|
85
|
-
path to it is set up in *_config.yml* under `sass:`.
|
86
|
-
|
87
|
-
```yaml
|
88
|
-
sass:
|
89
|
-
load_paths:
|
90
|
-
- _sass
|
91
|
-
- node_modules/materialize-css/sass
|
92
|
-
```
|
93
|
-
|
94
|
-
If you want to use another npm package that has styles, you can just add its
|
95
|
-
load path to the above.
|
73
|
+
`script/build` copies the materialize assets into `_sass/`.
|
96
74
|
|
97
75
|
### Assets
|
98
76
|
|
@@ -103,7 +81,7 @@ This directory can include sub-directories to manage assets of similar type, and
|
|
103
81
|
|
104
82
|
### Plugins
|
105
83
|
|
106
|
-
|
84
|
+
Minimaterialize comes with [`jekyll-seo-tag`](https://github.com/jekyll/jekyll-seo-tag) plugin preinstalled to make sure your website gets the most useful meta tags. See [usage](https://github.com/jekyll/jekyll-seo-tag#usage) to know how to set it up.
|
107
85
|
|
108
86
|
## Usage
|
109
87
|
|
@@ -133,11 +111,11 @@ help you understand what's going on behind the scenes and how to customize your
|
|
133
111
|
site.**
|
134
112
|
|
135
113
|
To override the default structure and style of minimaterialize, create the concerned directory at the root of your site, copy the file you wish to customize to that directory, and then edit the file.
|
136
|
-
e.g., to override the [`_includes/head.html `](_includes/head.html) file to specify a custom style path, create an `_includes`
|
114
|
+
e.g., to override the [`_includes/head.html `](_includes/head.html) file to specify a custom style path, create an `_includes` dirsimply ectory, copy `_includes/head.html` from minimaterialize gem folder to `<yoursite>/_includes` and start editing that file.
|
137
115
|
|
138
116
|
#### Styles
|
139
117
|
|
140
|
-
Each
|
118
|
+
Each individual materialize sass component is included separately in
|
141
119
|
`_sass/main.scss`. To reduce unused css, you can comment out or delete the
|
142
120
|
components you are not using.
|
143
121
|
|
data/_layouts/default.html
CHANGED
@@ -13,7 +13,7 @@
|
|
13
13
|
|
14
14
|
{%- include footer.html -%}
|
15
15
|
|
16
|
-
<script src="{{'/
|
16
|
+
<script src="{{'/assets/javascript/materialize.min.js' | prepend: site.baseurl}}"></script>
|
17
17
|
<script src="{{'/assets/javascript/main.js' | prepend: site.baseurl}}"></script>
|
18
18
|
|
19
19
|
</body>
|
@@ -0,0 +1,55 @@
|
|
1
|
+
// Badges
|
2
|
+
span.badge {
|
3
|
+
min-width: 3rem;
|
4
|
+
padding: 0 6px;
|
5
|
+
margin-left: 14px;
|
6
|
+
text-align: center;
|
7
|
+
font-size: 1rem;
|
8
|
+
line-height: $badge-height;
|
9
|
+
height: $badge-height;
|
10
|
+
color: color('grey', 'darken-1');
|
11
|
+
float: right;
|
12
|
+
box-sizing: border-box;
|
13
|
+
|
14
|
+
&.new {
|
15
|
+
font-weight: 300;
|
16
|
+
font-size: 0.8rem;
|
17
|
+
color: #fff;
|
18
|
+
background-color: $badge-bg-color;
|
19
|
+
border-radius: 2px;
|
20
|
+
}
|
21
|
+
&.new:after {
|
22
|
+
content: " new";
|
23
|
+
}
|
24
|
+
|
25
|
+
&[data-badge-caption]::after {
|
26
|
+
content: " " attr(data-badge-caption);
|
27
|
+
}
|
28
|
+
}
|
29
|
+
|
30
|
+
// Special cases
|
31
|
+
nav ul a span.badge {
|
32
|
+
display: inline-block;
|
33
|
+
float: none;
|
34
|
+
margin-left: 4px;
|
35
|
+
line-height: $badge-height;
|
36
|
+
height: $badge-height;
|
37
|
+
-webkit-font-smoothing: auto;
|
38
|
+
}
|
39
|
+
|
40
|
+
// Line height centering
|
41
|
+
.collection-item span.badge {
|
42
|
+
margin-top: calc(#{$collection-line-height / 2} - #{$badge-height / 2});
|
43
|
+
}
|
44
|
+
.collapsible span.badge {
|
45
|
+
margin-left: auto;
|
46
|
+
}
|
47
|
+
.sidenav span.badge {
|
48
|
+
margin-top: calc(#{$sidenav-line-height / 2} - #{$badge-height / 2});
|
49
|
+
}
|
50
|
+
|
51
|
+
table span.badge {
|
52
|
+
display: inline-block;
|
53
|
+
float: none;
|
54
|
+
margin-left: auto;
|
55
|
+
}
|
@@ -0,0 +1,322 @@
|
|
1
|
+
// shared styles
|
2
|
+
.btn,
|
3
|
+
.btn-flat {
|
4
|
+
border: $button-border;
|
5
|
+
border-radius: $button-radius;
|
6
|
+
display: inline-block;
|
7
|
+
height: $button-height;
|
8
|
+
line-height: $button-height;
|
9
|
+
padding: $button-padding;
|
10
|
+
text-transform: uppercase;
|
11
|
+
vertical-align: middle;
|
12
|
+
-webkit-tap-highlight-color: transparent; // Gets rid of tap active state
|
13
|
+
}
|
14
|
+
|
15
|
+
// Disabled shared style
|
16
|
+
.btn.disabled,
|
17
|
+
.btn-floating.disabled,
|
18
|
+
.btn-large.disabled,
|
19
|
+
.btn-small.disabled,
|
20
|
+
.btn-flat.disabled,
|
21
|
+
.btn:disabled,
|
22
|
+
.btn-floating:disabled,
|
23
|
+
.btn-large:disabled,
|
24
|
+
.btn-small:disabled,
|
25
|
+
.btn-flat:disabled,
|
26
|
+
.btn[disabled],
|
27
|
+
.btn-floating[disabled],
|
28
|
+
.btn-large[disabled],
|
29
|
+
.btn-small[disabled],
|
30
|
+
.btn-flat[disabled] {
|
31
|
+
pointer-events: none;
|
32
|
+
background-color: $button-disabled-background !important;
|
33
|
+
box-shadow: none;
|
34
|
+
color: $button-disabled-color !important;
|
35
|
+
cursor: default;
|
36
|
+
&:hover {
|
37
|
+
background-color: $button-disabled-background !important;
|
38
|
+
color: $button-disabled-color !important;
|
39
|
+
}
|
40
|
+
}
|
41
|
+
|
42
|
+
// Shared icon styles
|
43
|
+
.btn,
|
44
|
+
.btn-floating,
|
45
|
+
.btn-large,
|
46
|
+
.btn-small,
|
47
|
+
.btn-flat {
|
48
|
+
font-size: $button-font-size;
|
49
|
+
outline: 0;
|
50
|
+
i {
|
51
|
+
font-size: $button-icon-font-size;
|
52
|
+
line-height: inherit;
|
53
|
+
}
|
54
|
+
}
|
55
|
+
|
56
|
+
// Shared focus button style
|
57
|
+
.btn,
|
58
|
+
.btn-floating {
|
59
|
+
&:focus {
|
60
|
+
background-color: darken($button-raised-background, 10%);
|
61
|
+
}
|
62
|
+
}
|
63
|
+
|
64
|
+
// Raised Button
|
65
|
+
.btn {
|
66
|
+
text-decoration: none;
|
67
|
+
color: $button-raised-color;
|
68
|
+
background-color: $button-raised-background;
|
69
|
+
text-align: center;
|
70
|
+
letter-spacing: .5px;
|
71
|
+
@extend .z-depth-1;
|
72
|
+
transition: background-color .2s ease-out;
|
73
|
+
cursor: pointer;
|
74
|
+
&:hover {
|
75
|
+
background-color: $button-raised-background-hover;
|
76
|
+
@extend .z-depth-1-half;
|
77
|
+
}
|
78
|
+
}
|
79
|
+
|
80
|
+
// Floating button
|
81
|
+
.btn-floating {
|
82
|
+
&:hover {
|
83
|
+
background-color: $button-floating-background-hover;
|
84
|
+
@extend .z-depth-1-half;
|
85
|
+
}
|
86
|
+
&:before {
|
87
|
+
border-radius: 0;
|
88
|
+
}
|
89
|
+
&.btn-large {
|
90
|
+
&.halfway-fab {
|
91
|
+
bottom: -$button-floating-large-size / 2;
|
92
|
+
}
|
93
|
+
width: $button-floating-large-size;
|
94
|
+
height: $button-floating-large-size;
|
95
|
+
padding: 0;
|
96
|
+
i {
|
97
|
+
line-height: $button-floating-large-size;
|
98
|
+
}
|
99
|
+
}
|
100
|
+
|
101
|
+
&.btn-small {
|
102
|
+
&.halfway-fab {
|
103
|
+
bottom: -$button-floating-small-size / 2;
|
104
|
+
}
|
105
|
+
width: $button-floating-small-size;
|
106
|
+
height: $button-floating-small-size;
|
107
|
+
i {
|
108
|
+
line-height: $button-floating-small-size;
|
109
|
+
}
|
110
|
+
}
|
111
|
+
|
112
|
+
&.halfway-fab {
|
113
|
+
&.left {
|
114
|
+
right: auto;
|
115
|
+
left: 24px;
|
116
|
+
}
|
117
|
+
position: absolute;
|
118
|
+
right: 24px;
|
119
|
+
bottom: -$button-floating-size / 2;
|
120
|
+
}
|
121
|
+
display: inline-block;
|
122
|
+
color: $button-floating-color;
|
123
|
+
position: relative;
|
124
|
+
overflow: hidden;
|
125
|
+
z-index: 1;
|
126
|
+
width: $button-floating-size;
|
127
|
+
height: $button-floating-size;
|
128
|
+
line-height: $button-floating-size;
|
129
|
+
padding: 0;
|
130
|
+
background-color: $button-floating-background;
|
131
|
+
border-radius: $button-floating-radius;
|
132
|
+
@extend .z-depth-1;
|
133
|
+
transition: background-color .3s;
|
134
|
+
cursor: pointer;
|
135
|
+
vertical-align: middle;
|
136
|
+
i {
|
137
|
+
width: inherit;
|
138
|
+
display: inline-block;
|
139
|
+
text-align: center;
|
140
|
+
color: $button-floating-color;
|
141
|
+
font-size: $button-large-icon-font-size;
|
142
|
+
line-height: $button-floating-size;
|
143
|
+
}
|
144
|
+
}
|
145
|
+
|
146
|
+
// button fix
|
147
|
+
button.btn-floating {
|
148
|
+
border: $button-border;
|
149
|
+
}
|
150
|
+
|
151
|
+
// Fixed Action Button
|
152
|
+
.fixed-action-btn {
|
153
|
+
&.active {
|
154
|
+
ul {
|
155
|
+
visibility: visible;
|
156
|
+
}
|
157
|
+
}
|
158
|
+
|
159
|
+
// Directions
|
160
|
+
&.direction-left,
|
161
|
+
&.direction-right {
|
162
|
+
padding: 0 0 0 15px;
|
163
|
+
ul {
|
164
|
+
text-align: right;
|
165
|
+
right: 64px;
|
166
|
+
top: 50%;
|
167
|
+
transform: translateY(-50%);
|
168
|
+
height: 100%;
|
169
|
+
left: auto;
|
170
|
+
/*width 100% only goes to width of button container */
|
171
|
+
width: 500px;
|
172
|
+
li {
|
173
|
+
display: inline-block;
|
174
|
+
margin: 7.5px 15px 0 0;
|
175
|
+
}
|
176
|
+
}
|
177
|
+
}
|
178
|
+
&.direction-right {
|
179
|
+
padding: 0 15px 0 0;
|
180
|
+
ul {
|
181
|
+
text-align: left;
|
182
|
+
direction: rtl;
|
183
|
+
left: 64px;
|
184
|
+
right: auto;
|
185
|
+
li {
|
186
|
+
margin: 7.5px 0 0 15px;
|
187
|
+
}
|
188
|
+
}
|
189
|
+
}
|
190
|
+
&.direction-bottom {
|
191
|
+
padding: 0 0 15px 0;
|
192
|
+
ul {
|
193
|
+
top: 64px;
|
194
|
+
bottom: auto;
|
195
|
+
display: flex;
|
196
|
+
flex-direction: column-reverse;
|
197
|
+
li {
|
198
|
+
margin: 15px 0 0 0;
|
199
|
+
}
|
200
|
+
}
|
201
|
+
}
|
202
|
+
&.toolbar {
|
203
|
+
&.active {
|
204
|
+
&>a i {
|
205
|
+
opacity: 0;
|
206
|
+
}
|
207
|
+
}
|
208
|
+
padding: 0;
|
209
|
+
height: $button-floating-large-size;
|
210
|
+
ul {
|
211
|
+
display: flex;
|
212
|
+
top: 0;
|
213
|
+
bottom: 0;
|
214
|
+
z-index: 1;
|
215
|
+
li {
|
216
|
+
flex: 1;
|
217
|
+
display: inline-block;
|
218
|
+
margin: 0;
|
219
|
+
height: 100%;
|
220
|
+
transition: none;
|
221
|
+
a {
|
222
|
+
display: block;
|
223
|
+
overflow: hidden;
|
224
|
+
position: relative;
|
225
|
+
width: 100%;
|
226
|
+
height: 100%;
|
227
|
+
background-color: transparent;
|
228
|
+
box-shadow: none;
|
229
|
+
color: #fff;
|
230
|
+
line-height: $button-floating-large-size;
|
231
|
+
z-index: 1;
|
232
|
+
i {
|
233
|
+
line-height: inherit;
|
234
|
+
}
|
235
|
+
}
|
236
|
+
}
|
237
|
+
}
|
238
|
+
}
|
239
|
+
position: fixed;
|
240
|
+
right: 23px;
|
241
|
+
bottom: 23px;
|
242
|
+
padding-top: 15px;
|
243
|
+
margin-bottom: 0;
|
244
|
+
z-index: 997;
|
245
|
+
ul {
|
246
|
+
left: 0;
|
247
|
+
right: 0;
|
248
|
+
text-align: center;
|
249
|
+
position: absolute;
|
250
|
+
bottom: 64px;
|
251
|
+
margin: 0;
|
252
|
+
visibility: hidden;
|
253
|
+
li {
|
254
|
+
margin-bottom: 15px;
|
255
|
+
}
|
256
|
+
a.btn-floating {
|
257
|
+
opacity: 0;
|
258
|
+
}
|
259
|
+
}
|
260
|
+
.fab-backdrop {
|
261
|
+
position: absolute;
|
262
|
+
top: 0;
|
263
|
+
left: 0;
|
264
|
+
z-index: -1;
|
265
|
+
width: $button-floating-size;
|
266
|
+
height: $button-floating-size;
|
267
|
+
background-color: $button-floating-background;
|
268
|
+
border-radius: $button-floating-radius;
|
269
|
+
transform: scale(0);
|
270
|
+
}
|
271
|
+
}
|
272
|
+
|
273
|
+
// Flat button
|
274
|
+
.btn-flat {
|
275
|
+
box-shadow: none;
|
276
|
+
background-color: transparent;
|
277
|
+
color: $button-flat-color;
|
278
|
+
cursor: pointer;
|
279
|
+
transition: background-color .2s;
|
280
|
+
&:focus,
|
281
|
+
&:hover {
|
282
|
+
box-shadow: none;
|
283
|
+
}
|
284
|
+
&:focus {
|
285
|
+
background-color: rgba(0, 0, 0, .1);
|
286
|
+
}
|
287
|
+
&.disabled,
|
288
|
+
&.btn-flat[disabled] {
|
289
|
+
background-color: transparent !important;
|
290
|
+
color: $button-flat-disabled-color !important;
|
291
|
+
cursor: default;
|
292
|
+
}
|
293
|
+
}
|
294
|
+
|
295
|
+
// Large button
|
296
|
+
.btn-large {
|
297
|
+
@extend .btn;
|
298
|
+
height: $button-large-height;
|
299
|
+
line-height: $button-large-height;
|
300
|
+
font-size: $button-large-font-size;
|
301
|
+
padding: 0 28px;
|
302
|
+
|
303
|
+
i {
|
304
|
+
font-size: $button-large-icon-font-size;
|
305
|
+
}
|
306
|
+
}
|
307
|
+
|
308
|
+
// Small button
|
309
|
+
.btn-small {
|
310
|
+
@extend .btn;
|
311
|
+
height: $button-small-height;
|
312
|
+
line-height: $button-small-height;
|
313
|
+
font-size: $button-small-font-size;
|
314
|
+
i {
|
315
|
+
font-size: $button-small-icon-font-size;
|
316
|
+
}
|
317
|
+
}
|
318
|
+
|
319
|
+
// Block button
|
320
|
+
.btn-block {
|
321
|
+
display: block;
|
322
|
+
}
|