jekyll-text-theme 1.3.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/LICENSE +21 -0
- data/README.md +161 -0
- data/_includes/blog/article-data.html +43 -0
- data/_includes/blog/footer.html +14 -0
- data/_includes/blog/header.html +22 -0
- data/_includes/blog/license.html +17 -0
- data/_includes/blog/tags.html +49 -0
- data/_includes/common-head.html +7 -0
- data/_includes/head-icons-rel.html +25 -0
- data/_includes/icon/mail.svg +6 -0
- data/_includes/icon/menu.svg +3 -0
- data/_includes/icon/next.svg +3 -0
- data/_includes/icon/previous.svg +3 -0
- data/_includes/icon/social/behance.svg +3 -0
- data/_includes/icon/social/douban.svg +5 -0
- data/_includes/icon/social/facebook.svg +3 -0
- data/_includes/icon/social/flicker.svg +5 -0
- data/_includes/icon/social/github.svg +3 -0
- data/_includes/icon/social/googleplus.svg +3 -0
- data/_includes/icon/social/linkedin.svg +3 -0
- data/_includes/icon/social/pinterest.svg +3 -0
- data/_includes/icon/social/qq.svg +3 -0
- data/_includes/icon/social/twitter.svg +3 -0
- data/_includes/icon/social/weibo.svg +6 -0
- data/_includes/icon/social/weixin.svg +3 -0
- data/_includes/icon/social/zhihu.svg +3 -0
- data/_includes/info/follow-me.html +74 -0
- data/_includes/logo/logo.svg +8 -0
- data/_includes/snippets/page-url.html +1 -0
- data/_includes/snippets/rss-url.html +1 -0
- data/_includes/utils/comment-disqus.html +22 -0
- data/_includes/utils/google-analytics.html +13 -0
- data/_includes/utils/mathjax.html +5 -0
- data/_layouts/all.html +114 -0
- data/_layouts/blog-base.html +34 -0
- data/_layouts/blog-default.html +9 -0
- data/_layouts/error-404.html +9 -0
- data/_layouts/home-base.html +15 -0
- data/_layouts/home.html +92 -0
- data/_layouts/none.html +1 -0
- data/_layouts/page.html +15 -0
- data/_layouts/post.html +206 -0
- data/_sass/base/_animate.scss +19 -0
- data/_sass/base/_base.scss +55 -0
- data/_sass/base/_image&icon.scss +20 -0
- data/_sass/base/_links.scss +84 -0
- data/_sass/base/_text.scss +50 -0
- data/_sass/blog/_layout.base.scss +3 -0
- data/_sass/blog/_layout.default.scss +20 -0
- data/_sass/blog/_layout.page.scss +1 -0
- data/_sass/blog/_layout.post.scss +66 -0
- data/_sass/blog/_page.all.scss +35 -0
- data/_sass/blog/_page.error-404.scss +7 -0
- data/_sass/blog/_page.index.scss +45 -0
- data/_sass/colors/_colors.dark.scss +38 -0
- data/_sass/colors/_colors.default.scss +39 -0
- data/_sass/colors/_colors.forest.scss +39 -0
- data/_sass/colors/_colors.ocean.scss +39 -0
- data/_sass/components/_article.content.scss +140 -0
- data/_sass/components/_article.data.scss +35 -0
- data/_sass/components/_follow-me.scss +70 -0
- data/_sass/components/_footer.scss +36 -0
- data/_sass/components/_header.scss +44 -0
- data/_sass/components/_license.scss +27 -0
- data/_sass/components/_pagination.scss +7 -0
- data/_sass/components/_tags.scss +33 -0
- data/_sass/components/_toc.scss +61 -0
- data/_sass/components/_wrapper.scss +23 -0
- data/_sass/mixins/_flex.scss +394 -0
- data/_sass/mixins/_link.scss +60 -0
- data/_sass/mixins/_media.scss +12 -0
- data/_sass/mixins/_prefix.scss +14 -0
- data/_sass/settings/_base.scss +12 -0
- data/_sass/settings/_colors.scss +4 -0
- data/_sass/settings/_font.scss +32 -0
- data/_sass/settings/_highlighting.scss +72 -0
- data/assets/css/blog.scss +46 -0
- data/assets/images/license-cc4.png +0 -0
- data/assets/images/logo/icon-120x120.png +0 -0
- data/assets/images/logo/icon-128x128.png +0 -0
- data/assets/images/logo/icon-150x150.png +0 -0
- data/assets/images/logo/icon-152x152.png +0 -0
- data/assets/images/logo/icon-167x167.png +0 -0
- data/assets/images/logo/icon-16x16.png +0 -0
- data/assets/images/logo/icon-180x180.png +0 -0
- data/assets/images/logo/icon-192x192.png +0 -0
- data/assets/images/logo/icon-310x150.png +0 -0
- data/assets/images/logo/icon-310x310.png +0 -0
- data/assets/images/logo/icon-48x48.png +0 -0
- data/assets/images/logo/icon-70x70.png +0 -0
- data/assets/images/logo/logo.svg +8 -0
- data/assets/images/octocat.jpg +0 -0
- metadata +234 -0
@@ -0,0 +1,35 @@
|
|
1
|
+
|
2
|
+
.m-article-data {
|
3
|
+
margin: $content-gap 0;
|
4
|
+
.date-wrapper, .tag-wrapper, .view-wrapper {
|
5
|
+
font-size: $small-font-size;
|
6
|
+
}
|
7
|
+
.tag-wrapper {
|
8
|
+
float: left;
|
9
|
+
margin: 0 $base-font-size / 4 0 0;
|
10
|
+
@include media-query($on-palm) {
|
11
|
+
float: none;
|
12
|
+
}
|
13
|
+
}
|
14
|
+
.other-wrapper {
|
15
|
+
float: right;
|
16
|
+
@include flexbox;
|
17
|
+
@include align-items(center);
|
18
|
+
@include flex-wrap(wrap);
|
19
|
+
color: $text-color-l;
|
20
|
+
margin: 0 0 0 $base-font-size * .6;
|
21
|
+
@include media-query($on-palm) {
|
22
|
+
float: none;
|
23
|
+
}
|
24
|
+
}
|
25
|
+
.view-wrapper {
|
26
|
+
line-height: 1;
|
27
|
+
padding: 0 $base-font-size / 4 0 0;
|
28
|
+
border: 0 solid rgba($text-color-l, .6);
|
29
|
+
border-right-width: 1px;
|
30
|
+
margin: 0 $base-font-size / 4 0 0;
|
31
|
+
}
|
32
|
+
.date-wrapper {
|
33
|
+
margin: 0 $base-font-size 0 0;
|
34
|
+
}
|
35
|
+
}
|
@@ -0,0 +1,70 @@
|
|
1
|
+
.follow-me {
|
2
|
+
text-align: center;
|
3
|
+
p {
|
4
|
+
margin: 0;
|
5
|
+
}
|
6
|
+
& > ul{
|
7
|
+
margin: 0 0 $content-gap 0;
|
8
|
+
}
|
9
|
+
.round-button {
|
10
|
+
color: $text-color-1;
|
11
|
+
.icon > svg path {
|
12
|
+
fill: $text-color-1;
|
13
|
+
}
|
14
|
+
&:not(:last-child){
|
15
|
+
margin-right: $spacing-unit / 6;
|
16
|
+
}
|
17
|
+
@include link-background-colors (
|
18
|
+
$main-color-1,
|
19
|
+
darken($main-color-1, 20%)
|
20
|
+
)
|
21
|
+
}
|
22
|
+
.mail {
|
23
|
+
@include link-background-colors (
|
24
|
+
$mail-color,
|
25
|
+
darken($mail-color, 20%)
|
26
|
+
)
|
27
|
+
}
|
28
|
+
.weibo {
|
29
|
+
@include link-background-colors (
|
30
|
+
$weibo-color,
|
31
|
+
darken($weibo-color, 20%)
|
32
|
+
)
|
33
|
+
}
|
34
|
+
.facebook {
|
35
|
+
@include link-background-colors (
|
36
|
+
$facebook-color,
|
37
|
+
darken($facebook-color, 20%)
|
38
|
+
)
|
39
|
+
}
|
40
|
+
.twitter {
|
41
|
+
@include link-background-colors (
|
42
|
+
$twitter-color,
|
43
|
+
darken($twitter-color, 20%)
|
44
|
+
)
|
45
|
+
}
|
46
|
+
.googlepluse {
|
47
|
+
@include link-background-colors (
|
48
|
+
$google-plus-color,
|
49
|
+
darken($google-plus-color, 20%)
|
50
|
+
)
|
51
|
+
}
|
52
|
+
.github {
|
53
|
+
@include link-background-colors (
|
54
|
+
$github-color,
|
55
|
+
lighten($github-color, 30%)
|
56
|
+
)
|
57
|
+
}
|
58
|
+
.linkedin {
|
59
|
+
@include link-background-colors (
|
60
|
+
$linkedin-color,
|
61
|
+
darken($linkedin-color, 20%)
|
62
|
+
)
|
63
|
+
}
|
64
|
+
.douban {
|
65
|
+
@include link-background-colors (
|
66
|
+
$douban-color,
|
67
|
+
darken($douban-color, 20%)
|
68
|
+
)
|
69
|
+
}
|
70
|
+
}
|
@@ -0,0 +1,36 @@
|
|
1
|
+
/**
|
2
|
+
* Site Info
|
3
|
+
*/
|
4
|
+
|
5
|
+
.m-page-footer {
|
6
|
+
@include flexbox;
|
7
|
+
@include align-items(center);
|
8
|
+
height: $footer-height;
|
9
|
+
margin-top: -$footer-height;
|
10
|
+
background-color: $main-color-3;
|
11
|
+
& > .main {
|
12
|
+
@include flexbox;
|
13
|
+
@include flex-direction(column);
|
14
|
+
}
|
15
|
+
p {
|
16
|
+
color: $text-color-3;
|
17
|
+
}
|
18
|
+
a {
|
19
|
+
@include link-text-colors (
|
20
|
+
$text-color-3,
|
21
|
+
$main-color-1
|
22
|
+
);
|
23
|
+
}
|
24
|
+
.follow-me {
|
25
|
+
padding: $content-gap 0 0 0;
|
26
|
+
.round-button {
|
27
|
+
box-shadow: $shadow-down;
|
28
|
+
}
|
29
|
+
}
|
30
|
+
.site-info {
|
31
|
+
display: table;
|
32
|
+
font-size: $tiny-font-size;
|
33
|
+
text-align: center;
|
34
|
+
margin: 0 auto;
|
35
|
+
}
|
36
|
+
}
|
@@ -0,0 +1,44 @@
|
|
1
|
+
.m-page-header {
|
2
|
+
position: relative;
|
3
|
+
a {
|
4
|
+
font-weight: $base-font-weight;
|
5
|
+
@include link-text-colors(
|
6
|
+
$text-color,
|
7
|
+
$main-color-1
|
8
|
+
);
|
9
|
+
}
|
10
|
+
.site-logo {
|
11
|
+
display: inline-block;
|
12
|
+
vertical-align: middle;
|
13
|
+
width: $h3-font-size * 1.2;
|
14
|
+
height: $h3-font-size * 1.2;
|
15
|
+
& > svg {
|
16
|
+
width: 100%;
|
17
|
+
height: 100%;
|
18
|
+
}
|
19
|
+
}
|
20
|
+
.site-title {
|
21
|
+
display: inline-block;
|
22
|
+
font-size: $h3-font-size;
|
23
|
+
}
|
24
|
+
& > nav {
|
25
|
+
display: block;
|
26
|
+
float: right;
|
27
|
+
font-size: $h5-font-size;
|
28
|
+
overflow-x: auto;
|
29
|
+
white-space: nowrap;
|
30
|
+
-webkit-overflow-scrolling: touch;
|
31
|
+
ul {
|
32
|
+
margin: 0;
|
33
|
+
& > li {
|
34
|
+
margin: 0;
|
35
|
+
&:not(:last-child) {
|
36
|
+
margin: 0 $base-font-size 0 0;
|
37
|
+
}
|
38
|
+
}
|
39
|
+
}
|
40
|
+
@include media-query($on-palm) {
|
41
|
+
float: none;
|
42
|
+
}
|
43
|
+
}
|
44
|
+
}
|
@@ -0,0 +1,27 @@
|
|
1
|
+
.m-license {
|
2
|
+
border-radius: $spacing-unit / 2;
|
3
|
+
background-color: $text-background-color;
|
4
|
+
box-shadow: $shadow-down;
|
5
|
+
padding: $base-font-size / 2 $base-font-size;
|
6
|
+
font-weight: $bold-font-weight;
|
7
|
+
img {
|
8
|
+
vertical-align: bottom;
|
9
|
+
}
|
10
|
+
.url {
|
11
|
+
word-wrap: break-word;
|
12
|
+
}
|
13
|
+
.octocat {
|
14
|
+
float: right;
|
15
|
+
img {
|
16
|
+
width: $spacing-unit * 2;
|
17
|
+
height: auto;
|
18
|
+
margin: 0 $spacing-unit / 3;
|
19
|
+
border-width: 0;
|
20
|
+
border-radius: $spacing-unit;
|
21
|
+
}
|
22
|
+
}
|
23
|
+
.license {
|
24
|
+
float: right;
|
25
|
+
margin-left: $spacing-unit / 3;
|
26
|
+
}
|
27
|
+
}
|
@@ -0,0 +1,33 @@
|
|
1
|
+
.m-tags {
|
2
|
+
& > ul > li > button {
|
3
|
+
@include link-colors (
|
4
|
+
$text-color-1, $main-color-1,
|
5
|
+
$text-color-2, $main-color-2
|
6
|
+
);
|
7
|
+
&.all {
|
8
|
+
@include link-colors (
|
9
|
+
$text-color-3, $main-color-3,
|
10
|
+
$text-color-2, $main-color-2
|
11
|
+
);
|
12
|
+
}
|
13
|
+
& > .tag-count {
|
14
|
+
font-size: $tiny-font-size;
|
15
|
+
display: inline-block;
|
16
|
+
line-height: 1;
|
17
|
+
margin-left: $base-font-size * .2;
|
18
|
+
vertical-align: top;
|
19
|
+
}
|
20
|
+
}
|
21
|
+
.tag-1 {
|
22
|
+
background-color: rgba($main-color-1, .4);
|
23
|
+
}
|
24
|
+
.tag-2 {
|
25
|
+
background-color: rgba($main-color-1, .55);
|
26
|
+
}
|
27
|
+
.tag-3 {
|
28
|
+
background-color: rgba($main-color-1, .7);
|
29
|
+
}
|
30
|
+
.tag-4 {
|
31
|
+
background-color: rgba($main-color-1, .9);
|
32
|
+
}
|
33
|
+
}
|
@@ -0,0 +1,61 @@
|
|
1
|
+
.m-toc {
|
2
|
+
ul {
|
3
|
+
display: block;
|
4
|
+
list-style-type: none;
|
5
|
+
& > li {
|
6
|
+
border: 0 solid rgba(0, 0, 0, 0);
|
7
|
+
border-left-width: 4px;
|
8
|
+
margin-left: -4px;
|
9
|
+
&:not(:last-child) {
|
10
|
+
margin-bottom: $content-gap / 4;
|
11
|
+
}
|
12
|
+
}
|
13
|
+
}
|
14
|
+
a {
|
15
|
+
display: block;
|
16
|
+
margin: $small-font-size / 4;
|
17
|
+
font-size: $small-font-size;
|
18
|
+
text-decoration: none;
|
19
|
+
line-height: $toc-line-height;
|
20
|
+
font-weight: $base-font-weight;
|
21
|
+
@include link-normal {
|
22
|
+
color: $text-color;
|
23
|
+
}
|
24
|
+
@include link-emphasize-no-focus {
|
25
|
+
color: $main-color-1;
|
26
|
+
}
|
27
|
+
}
|
28
|
+
.toc-h1, .toc-h2 {
|
29
|
+
padding: 0;
|
30
|
+
a {
|
31
|
+
font-weight: $bold-font-weight;
|
32
|
+
}
|
33
|
+
}
|
34
|
+
.toc-h3, .toc-h4, .toc-h5, .toc-h6 {
|
35
|
+
a {
|
36
|
+
font-size: $tiny-font-size;
|
37
|
+
}
|
38
|
+
}
|
39
|
+
.toc-h1, .toc-h2 {
|
40
|
+
margin-top: $small-font-size / 2;
|
41
|
+
}
|
42
|
+
.toc-h3 {
|
43
|
+
padding-left: $small-font-size;
|
44
|
+
}
|
45
|
+
.toc-h4 {
|
46
|
+
padding-left: $small-font-size * 2;
|
47
|
+
}
|
48
|
+
.toc-h5 {
|
49
|
+
padding-left: $small-font-size * 3;
|
50
|
+
}
|
51
|
+
.toc-h6 {
|
52
|
+
padding-left: $small-font-size * 3;
|
53
|
+
}
|
54
|
+
.toc-active {
|
55
|
+
border-color: $main-color-1;
|
56
|
+
@include transition(border-color ease .8s);
|
57
|
+
a {
|
58
|
+
color: $main-color-1;
|
59
|
+
}
|
60
|
+
}
|
61
|
+
}
|
@@ -0,0 +1,23 @@
|
|
1
|
+
.main {
|
2
|
+
margin: 0 auto;
|
3
|
+
padding: 0 $spacing-unit;
|
4
|
+
max-width: $content-max-width;
|
5
|
+
@include media-query($on-laptop) {
|
6
|
+
padding: 0 $spacing-unit / 2;
|
7
|
+
}
|
8
|
+
}
|
9
|
+
.has-toc .main {
|
10
|
+
max-width: $content-max-width + $aside-width;
|
11
|
+
@include media-query($on-laptop) {
|
12
|
+
max-width: $content-max-width;
|
13
|
+
padding: 0 $spacing-unit / 2;
|
14
|
+
}
|
15
|
+
}
|
16
|
+
.inline-list {
|
17
|
+
& > li {
|
18
|
+
display: inline-block;
|
19
|
+
list-style-type: none;
|
20
|
+
vertical-align: bottom;
|
21
|
+
margin: $content-gap / 6 0;
|
22
|
+
}
|
23
|
+
}
|
@@ -0,0 +1,394 @@
|
|
1
|
+
// Flexbox Mixins
|
2
|
+
// http://philipwalton.github.io/solved-by-flexbox/
|
3
|
+
// https://github.com/philipwalton/solved-by-flexbox
|
4
|
+
//
|
5
|
+
// Copyright (c) 2013 Brian Franco
|
6
|
+
//
|
7
|
+
// Permission is hereby granted, free of charge, to any person obtaining a
|
8
|
+
// copy of this software and associated documentation files (the
|
9
|
+
// "Software"), to deal in the Software without restriction, including
|
10
|
+
// without limitation the rights to use, copy, modify, merge, publish,
|
11
|
+
// distribute, sublicense, and/or sell copies of the Software, and to
|
12
|
+
// permit persons to whom the Software is furnished to do so, subject to
|
13
|
+
// the following conditions:
|
14
|
+
// The above copyright notice and this permission notice shall be included
|
15
|
+
// in all copies or substantial portions of the Software.
|
16
|
+
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
|
17
|
+
// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
18
|
+
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
19
|
+
// IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
|
20
|
+
// CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
21
|
+
// TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
|
22
|
+
// SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
23
|
+
//
|
24
|
+
// This is a set of mixins for those who want to mess around with flexbox
|
25
|
+
// using the native support of current browsers. For full support table
|
26
|
+
// check: http://caniuse.com/flexbox
|
27
|
+
//
|
28
|
+
// Basically this will use:
|
29
|
+
//
|
30
|
+
// * Fallback, old syntax (IE10, mobile webkit browsers - no wrapping)
|
31
|
+
// * Final standards syntax (FF, Safari, Chrome, IE11, Opera)
|
32
|
+
//
|
33
|
+
// This was inspired by:
|
34
|
+
//
|
35
|
+
// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
|
36
|
+
//
|
37
|
+
// With help from:
|
38
|
+
//
|
39
|
+
// * http://w3.org/tr/css3-flexbox/
|
40
|
+
// * http://the-echoplex.net/flexyboxes/
|
41
|
+
// * http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx
|
42
|
+
// * http://css-tricks.com/using-flexbox/
|
43
|
+
// * http://dev.opera.com/articles/view/advanced-cross-browser-flexbox/
|
44
|
+
// * https://developer.mozilla.org/en-us/docs/web/guide/css/flexible_boxes
|
45
|
+
|
46
|
+
//----------------------------------------------------------------------
|
47
|
+
|
48
|
+
// Flexbox Containers
|
49
|
+
//
|
50
|
+
// The 'flex' value causes an element to generate a block-level flex
|
51
|
+
// container box.
|
52
|
+
//
|
53
|
+
// The 'inline-flex' value causes an element to generate a inline-level
|
54
|
+
// flex container box.
|
55
|
+
//
|
56
|
+
// display: flex | inline-flex
|
57
|
+
//
|
58
|
+
// http://w3.org/tr/css3-flexbox/#flex-containers
|
59
|
+
//
|
60
|
+
// (Placeholder selectors for each type, for those who rather @extend)
|
61
|
+
|
62
|
+
@mixin flexbox {
|
63
|
+
display: -webkit-box;
|
64
|
+
display: -webkit-flex;
|
65
|
+
display: -moz-flex;
|
66
|
+
display: -ms-flexbox;
|
67
|
+
display: flex;
|
68
|
+
}
|
69
|
+
|
70
|
+
%flexbox { @include flexbox; }
|
71
|
+
|
72
|
+
//----------------------------------
|
73
|
+
|
74
|
+
@mixin inline-flex {
|
75
|
+
display: -webkit-inline-box;
|
76
|
+
display: -webkit-inline-flex;
|
77
|
+
display: -moz-inline-flex;
|
78
|
+
display: -ms-inline-flexbox;
|
79
|
+
display: inline-flex;
|
80
|
+
}
|
81
|
+
|
82
|
+
%inline-flex { @include inline-flex; }
|
83
|
+
|
84
|
+
//----------------------------------------------------------------------
|
85
|
+
|
86
|
+
// Flexbox Direction
|
87
|
+
//
|
88
|
+
// The 'flex-direction' property specifies how flex items are placed in
|
89
|
+
// the flex container, by setting the direction of the flex container's
|
90
|
+
// main axis. This determines the direction that flex items are laid out in.
|
91
|
+
//
|
92
|
+
// Values: row | row-reverse | column | column-reverse
|
93
|
+
// Default: row
|
94
|
+
//
|
95
|
+
// http://w3.org/tr/css3-flexbox/#flex-direction-property
|
96
|
+
|
97
|
+
@mixin flex-direction($value: row) {
|
98
|
+
@if $value == row-reverse {
|
99
|
+
-webkit-box-direction: reverse;
|
100
|
+
-webkit-box-orient: horizontal;
|
101
|
+
} @else if $value == column {
|
102
|
+
-webkit-box-direction: normal;
|
103
|
+
-webkit-box-orient: vertical;
|
104
|
+
} @else if $value == column-reverse {
|
105
|
+
-webkit-box-direction: reverse;
|
106
|
+
-webkit-box-orient: vertical;
|
107
|
+
} @else {
|
108
|
+
-webkit-box-direction: normal;
|
109
|
+
-webkit-box-orient: horizontal;
|
110
|
+
}
|
111
|
+
-webkit-flex-direction: $value;
|
112
|
+
-moz-flex-direction: $value;
|
113
|
+
-ms-flex-direction: $value;
|
114
|
+
flex-direction: $value;
|
115
|
+
}
|
116
|
+
// Shorter version:
|
117
|
+
@mixin flex-dir($args...) { @include flex-direction($args...); }
|
118
|
+
|
119
|
+
//----------------------------------------------------------------------
|
120
|
+
|
121
|
+
// Flexbox Wrap
|
122
|
+
//
|
123
|
+
// The 'flex-wrap' property controls whether the flex container is single-line
|
124
|
+
// or multi-line, and the direction of the cross-axis, which determines
|
125
|
+
// the direction new lines are stacked in.
|
126
|
+
//
|
127
|
+
// Values: nowrap | wrap | wrap-reverse
|
128
|
+
// Default: nowrap
|
129
|
+
//
|
130
|
+
// http://w3.org/tr/css3-flexbox/#flex-wrap-property
|
131
|
+
|
132
|
+
@mixin flex-wrap($value: nowrap) {
|
133
|
+
// No Webkit Box fallback.
|
134
|
+
-webkit-flex-wrap: $value;
|
135
|
+
-moz-flex-wrap: $value;
|
136
|
+
@if $value == nowrap {
|
137
|
+
-ms-flex-wrap: none;
|
138
|
+
} @else {
|
139
|
+
-ms-flex-wrap: $value;
|
140
|
+
}
|
141
|
+
flex-wrap: $value;
|
142
|
+
}
|
143
|
+
|
144
|
+
//----------------------------------------------------------------------
|
145
|
+
|
146
|
+
// Flexbox Flow (shorthand)
|
147
|
+
//
|
148
|
+
// The 'flex-flow' property is a shorthand for setting the 'flex-direction'
|
149
|
+
// and 'flex-wrap' properties, which together define the flex container's
|
150
|
+
// main and cross axes.
|
151
|
+
//
|
152
|
+
// Values: <flex-direction> | <flex-wrap>
|
153
|
+
// Default: row nowrap
|
154
|
+
//
|
155
|
+
// http://w3.org/tr/css3-flexbox/#flex-flow-property
|
156
|
+
|
157
|
+
@mixin flex-flow($values: (row nowrap)) {
|
158
|
+
// No Webkit Box fallback.
|
159
|
+
-webkit-flex-flow: $values;
|
160
|
+
-moz-flex-flow: $values;
|
161
|
+
-ms-flex-flow: $values;
|
162
|
+
flex-flow: $values;
|
163
|
+
}
|
164
|
+
|
165
|
+
//----------------------------------------------------------------------
|
166
|
+
|
167
|
+
// Flexbox Order
|
168
|
+
//
|
169
|
+
// The 'order' property controls the order in which flex items appear within
|
170
|
+
// their flex container, by assigning them to ordinal groups.
|
171
|
+
//
|
172
|
+
// Default: 0
|
173
|
+
//
|
174
|
+
// http://w3.org/tr/css3-flexbox/#order-property
|
175
|
+
|
176
|
+
@mixin order($int: 0) {
|
177
|
+
-webkit-box-ordinal-group: $int + 1;
|
178
|
+
-webkit-order: $int;
|
179
|
+
-moz-order: $int;
|
180
|
+
-ms-flex-order: $int;
|
181
|
+
order: $int;
|
182
|
+
}
|
183
|
+
|
184
|
+
//----------------------------------------------------------------------
|
185
|
+
|
186
|
+
// Flexbox Grow
|
187
|
+
//
|
188
|
+
// The 'flex-grow' property sets the flex grow factor. Negative numbers
|
189
|
+
// are invalid.
|
190
|
+
//
|
191
|
+
// Default: 0
|
192
|
+
//
|
193
|
+
// http://w3.org/tr/css3-flexbox/#flex-grow-property
|
194
|
+
|
195
|
+
@mixin flex-grow($int: 0) {
|
196
|
+
-webkit-box-flex: $int;
|
197
|
+
-webkit-flex-grow: $int;
|
198
|
+
-moz-flex-grow: $int;
|
199
|
+
-ms-flex-positive: $int;
|
200
|
+
flex-grow: $int;
|
201
|
+
}
|
202
|
+
|
203
|
+
//----------------------------------------------------------------------
|
204
|
+
|
205
|
+
// Flexbox Shrink
|
206
|
+
//
|
207
|
+
// The 'flex-shrink' property sets the flex shrink factor. Negative numbers
|
208
|
+
// are invalid.
|
209
|
+
//
|
210
|
+
// Default: 1
|
211
|
+
//
|
212
|
+
// http://w3.org/tr/css3-flexbox/#flex-shrink-property
|
213
|
+
|
214
|
+
@mixin flex-shrink($int: 1) {
|
215
|
+
-webkit-flex-shrink: $int;
|
216
|
+
-moz-flex-shrink: $int;
|
217
|
+
-ms-flex-negative: $int;
|
218
|
+
flex-shrink: $int;
|
219
|
+
}
|
220
|
+
|
221
|
+
//----------------------------------------------------------------------
|
222
|
+
|
223
|
+
// Flexbox Basis
|
224
|
+
//
|
225
|
+
// The 'flex-basis' property sets the flex basis. Negative lengths are invalid.
|
226
|
+
//
|
227
|
+
// Values: Like "width"
|
228
|
+
// Default: auto
|
229
|
+
//
|
230
|
+
// http://www.w3.org/TR/css3-flexbox/#flex-basis-property
|
231
|
+
|
232
|
+
@mixin flex-basis($value: auto) {
|
233
|
+
-webkit-flex-basis: $value;
|
234
|
+
-moz-flex-basis: $value;
|
235
|
+
-ms-flex-preferred-size: $value;
|
236
|
+
flex-basis: $value;
|
237
|
+
}
|
238
|
+
|
239
|
+
//----------------------------------------------------------------------
|
240
|
+
|
241
|
+
// Flexbox "Flex" (shorthand)
|
242
|
+
//
|
243
|
+
// The 'flex' property specifies the components of a flexible length: the
|
244
|
+
// flex grow factor and flex shrink factor, and the flex basis. When an
|
245
|
+
// element is a flex item, 'flex' is consulted instead of the main size
|
246
|
+
// property to determine the main size of the element. If an element is
|
247
|
+
// not a flex item, 'flex' has no effect.
|
248
|
+
//
|
249
|
+
// Values: none | <flex-grow> <flex-shrink> || <flex-basis>
|
250
|
+
// Default: See individual properties (1 1 0).
|
251
|
+
//
|
252
|
+
// http://w3.org/tr/css3-flexbox/#flex-property
|
253
|
+
|
254
|
+
@mixin flex($fg: 1, $fs: null, $fb: null) {
|
255
|
+
|
256
|
+
// Set a variable to be used by box-flex properties
|
257
|
+
$fg-boxflex: $fg;
|
258
|
+
|
259
|
+
// Box-Flex only supports a flex-grow value so let's grab the
|
260
|
+
// first item in the list and just return that.
|
261
|
+
@if type-of($fg) == 'list' {
|
262
|
+
$fg-boxflex: nth($fg, 1);
|
263
|
+
}
|
264
|
+
|
265
|
+
-webkit-box-flex: $fg-boxflex;
|
266
|
+
-webkit-flex: $fg $fs $fb;
|
267
|
+
-moz-box-flex: $fg-boxflex;
|
268
|
+
-moz-flex: $fg $fs $fb;
|
269
|
+
-ms-flex: $fg $fs $fb;
|
270
|
+
flex: $fg $fs $fb;
|
271
|
+
}
|
272
|
+
|
273
|
+
//----------------------------------------------------------------------
|
274
|
+
|
275
|
+
// Flexbox Justify Content
|
276
|
+
//
|
277
|
+
// The 'justify-content' property aligns flex items along the main axis
|
278
|
+
// of the current line of the flex container. This is done after any flexible
|
279
|
+
// lengths and any auto margins have been resolved. Typically it helps distribute
|
280
|
+
// extra free space leftover when either all the flex items on a line are
|
281
|
+
// inflexible, or are flexible but have reached their maximum size. It also
|
282
|
+
// exerts some control over the alignment of items when they overflow the line.
|
283
|
+
//
|
284
|
+
// Note: 'space-*' values not supported in older syntaxes.
|
285
|
+
//
|
286
|
+
// Values: flex-start | flex-end | center | space-between | space-around
|
287
|
+
// Default: flex-start
|
288
|
+
//
|
289
|
+
// http://w3.org/tr/css3-flexbox/#justify-content-property
|
290
|
+
|
291
|
+
@mixin justify-content($value: flex-start) {
|
292
|
+
@if $value == flex-start {
|
293
|
+
-webkit-box-pack: start;
|
294
|
+
-ms-flex-pack: start;
|
295
|
+
} @else if $value == flex-end {
|
296
|
+
-webkit-box-pack: end;
|
297
|
+
-ms-flex-pack: end;
|
298
|
+
} @else if $value == space-between {
|
299
|
+
-webkit-box-pack: justify;
|
300
|
+
-ms-flex-pack: justify;
|
301
|
+
} @else if $value == space-around {
|
302
|
+
-ms-flex-pack: distribute;
|
303
|
+
} @else {
|
304
|
+
-webkit-box-pack: $value;
|
305
|
+
-ms-flex-pack: $value;
|
306
|
+
}
|
307
|
+
-webkit-justify-content: $value;
|
308
|
+
-moz-justify-content: $value;
|
309
|
+
justify-content: $value;
|
310
|
+
}
|
311
|
+
// Shorter version:
|
312
|
+
@mixin flex-just($args...) { @include justify-content($args...); }
|
313
|
+
|
314
|
+
//----------------------------------------------------------------------
|
315
|
+
|
316
|
+
// Flexbox Align Items
|
317
|
+
//
|
318
|
+
// Flex items can be aligned in the cross axis of the current line of the
|
319
|
+
// flex container, similar to 'justify-content' but in the perpendicular
|
320
|
+
// direction. 'align-items' sets the default alignment for all of the flex
|
321
|
+
// container's items, including anonymous flex items. 'align-self' allows
|
322
|
+
// this default alignment to be overridden for individual flex items. (For
|
323
|
+
// anonymous flex items, 'align-self' always matches the value of 'align-items'
|
324
|
+
// on their associated flex container.)
|
325
|
+
//
|
326
|
+
// Values: flex-start | flex-end | center | baseline | stretch
|
327
|
+
// Default: stretch
|
328
|
+
//
|
329
|
+
// http://w3.org/tr/css3-flexbox/#align-items-property
|
330
|
+
|
331
|
+
@mixin align-items($value: stretch) {
|
332
|
+
@if $value == flex-start {
|
333
|
+
-webkit-box-align: start;
|
334
|
+
-ms-flex-align: start;
|
335
|
+
} @else if $value == flex-end {
|
336
|
+
-webkit-box-align: end;
|
337
|
+
-ms-flex-align: end;
|
338
|
+
} @else {
|
339
|
+
-webkit-box-align: $value;
|
340
|
+
-ms-flex-align: $value;
|
341
|
+
}
|
342
|
+
-webkit-align-items: $value;
|
343
|
+
-moz-align-items: $value;
|
344
|
+
align-items: $value;
|
345
|
+
}
|
346
|
+
|
347
|
+
//----------------------------------
|
348
|
+
|
349
|
+
// Flexbox Align Self
|
350
|
+
//
|
351
|
+
// Values: auto | flex-start | flex-end | center | baseline | stretch
|
352
|
+
// Default: auto
|
353
|
+
|
354
|
+
@mixin align-self($value: auto) {
|
355
|
+
// No Webkit Box Fallback.
|
356
|
+
-webkit-align-self: $value;
|
357
|
+
-moz-align-self: $value;
|
358
|
+
@if $value == flex-start {
|
359
|
+
-ms-flex-item-align: start;
|
360
|
+
} @else if $value == flex-end {
|
361
|
+
-ms-flex-item-align: end;
|
362
|
+
} @else {
|
363
|
+
-ms-flex-item-align: $value;
|
364
|
+
}
|
365
|
+
align-self: $value;
|
366
|
+
}
|
367
|
+
|
368
|
+
//----------------------------------------------------------------------
|
369
|
+
|
370
|
+
// Flexbox Align Content
|
371
|
+
//
|
372
|
+
// The 'align-content' property aligns a flex container's lines within the
|
373
|
+
// flex container when there is extra space in the cross-axis, similar to
|
374
|
+
// how 'justify-content' aligns individual items within the main-axis. Note,
|
375
|
+
// this property has no effect when the flexbox has only a single line.
|
376
|
+
//
|
377
|
+
// Values: flex-start | flex-end | center | space-between | space-around | stretch
|
378
|
+
// Default: stretch
|
379
|
+
//
|
380
|
+
// http://w3.org/tr/css3-flexbox/#align-content-property
|
381
|
+
|
382
|
+
@mixin align-content($value: stretch) {
|
383
|
+
// No Webkit Box Fallback.
|
384
|
+
-webkit-align-content: $value;
|
385
|
+
-moz-align-content: $value;
|
386
|
+
@if $value == flex-start {
|
387
|
+
-ms-flex-line-pack: start;
|
388
|
+
} @else if $value == flex-end {
|
389
|
+
-ms-flex-line-pack: end;
|
390
|
+
} @else {
|
391
|
+
-ms-flex-line-pack: $value;
|
392
|
+
}
|
393
|
+
align-content: $value;
|
394
|
+
}
|