middleman-oulu 0.6.34 → 0.7.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/assets/stylesheets/_oulu-base.sass +4 -2
- data/assets/stylesheets/helpers/_block.sass +1 -1
- data/assets/stylesheets/settings/mixins/_grid.sass +88 -0
- data/assets/stylesheets/settings/mixins/_responsive-utilities.sass +18 -0
- data/assets/stylesheets/settings/mixins/grid/_grid-framework.scss +81 -0
- data/assets/stylesheets/settings/mixins/grid/_grid.scss +122 -0
- data/assets/stylesheets/settings/variables/_default.sass +54 -3
- data/lib/middleman-oulu/version.rb +1 -1
- metadata +5 -3
- data/assets/stylesheets/settings/mixins/_grids.sass +0 -146
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 1c9d3bcb5c6f1e4d8e9a8832b9c73149db59cfe9
|
|
4
|
+
data.tar.gz: d001f4bd9dbc64adb784e56f0beefeaa5e803ec8
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 153f0455829228f4af0ec547c0eade1782b1f8b7f3598e3d1a019ed3f5f04afab5229862d7a990a25242841b578c328d414809ae0b714026479f8bc6eef830e5
|
|
7
|
+
data.tar.gz: ab7494ac8117864a4bb9924a6e7de7833b19baafae7f92404d1796263f7e9c8137cb64266264d88109bd146314e0afc15b75a90bb036b54c6ebf25c72260d985
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
@import settings/functions/background
|
|
30
30
|
@import settings/functions/border
|
|
31
31
|
@import settings/functions/animation
|
|
32
|
-
|
|
32
|
+
//@import settings/functions/grid
|
|
33
33
|
|
|
34
34
|
// mixins
|
|
35
35
|
///////////////////
|
|
@@ -49,7 +49,9 @@
|
|
|
49
49
|
@import settings/mixins/balloon-tail
|
|
50
50
|
@import settings/mixins/margin-padding
|
|
51
51
|
@import settings/mixins/animation
|
|
52
|
-
@import settings/mixins/
|
|
52
|
+
@import settings/mixins/grid/grid-framework
|
|
53
|
+
@import settings/mixins/grid/grid
|
|
54
|
+
@import settings/mixins/grid
|
|
53
55
|
@import settings/mixins/responsive-utilities
|
|
54
56
|
@import settings/mixins/background
|
|
55
57
|
@import settings/mixins/line
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Grid system
|
|
3
|
+
// --------------------------------------------------
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
// Container widths
|
|
7
|
+
//
|
|
8
|
+
// Set the container width, and override it for fixed navbars in media queries.
|
|
9
|
+
|
|
10
|
+
.container
|
|
11
|
+
+container-fixed
|
|
12
|
+
|
|
13
|
+
@media (min-width: $screen-sm-min)
|
|
14
|
+
width: $container-sm
|
|
15
|
+
|
|
16
|
+
@media (min-width: $screen-md-min)
|
|
17
|
+
width: $container-md
|
|
18
|
+
|
|
19
|
+
@media (min-width: $screen-lg-min)
|
|
20
|
+
width: $container-lg
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
// Fluid container
|
|
25
|
+
//
|
|
26
|
+
// Utilizes the mixin meant for fixed width containers, but without any defined
|
|
27
|
+
// width for fluid, full width layouts.
|
|
28
|
+
|
|
29
|
+
.container-fluid
|
|
30
|
+
+container-fixed
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
// Row
|
|
34
|
+
//
|
|
35
|
+
// Rows contain and clear the floats of your columns.
|
|
36
|
+
|
|
37
|
+
.row
|
|
38
|
+
+make-row
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
// Columns
|
|
42
|
+
//
|
|
43
|
+
// Common styles for small and large grid columns
|
|
44
|
+
|
|
45
|
+
+make-grid-columns
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
// Extra small grid
|
|
49
|
+
//
|
|
50
|
+
// Columns, offsets, pushes, and pulls for extra small devices like
|
|
51
|
+
// smartphones.
|
|
52
|
+
|
|
53
|
+
+make-grid(xs)
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
// Small grid
|
|
57
|
+
//
|
|
58
|
+
// Columns, offsets, pushes, and pulls for the small device range, from phones
|
|
59
|
+
// to tablets.
|
|
60
|
+
|
|
61
|
+
@media (min-width: $screen-sm-min)
|
|
62
|
+
+make-grid(sm)
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
// Medium grid
|
|
66
|
+
//
|
|
67
|
+
// Columns, offsets, pushes, and pulls for the desktop device range.
|
|
68
|
+
|
|
69
|
+
@media (min-width: $screen-md-min)
|
|
70
|
+
+make-grid(md)
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
// Large grid
|
|
74
|
+
//
|
|
75
|
+
// Columns, offsets, pushes, and pulls for the large desktop device range.
|
|
76
|
+
|
|
77
|
+
@media (min-width: $screen-lg-min)
|
|
78
|
+
+make-grid(lg)
|
|
79
|
+
|
|
80
|
+
.row,
|
|
81
|
+
[class^="col-"]
|
|
82
|
+
box-sizing: border-box
|
|
83
|
+
|
|
84
|
+
=gird($gutter-size)
|
|
85
|
+
&.row
|
|
86
|
+
+margin(horizontal, $gutter-size/2 * -1)
|
|
87
|
+
>[class^="col-"]
|
|
88
|
+
+padding(horizontal, $gutter-size/2)
|
|
@@ -1,3 +1,21 @@
|
|
|
1
|
+
// device
|
|
2
|
+
=screen-xs
|
|
3
|
+
@media only screen and (max-width: $screen-xs)
|
|
4
|
+
@content
|
|
5
|
+
=screen-sm
|
|
6
|
+
@media only screen and (max-width: $screen-sm)
|
|
7
|
+
@content
|
|
8
|
+
=screen-md
|
|
9
|
+
@media only screen and (max-width: $screen-md)
|
|
10
|
+
@content
|
|
11
|
+
=screen-lg
|
|
12
|
+
@media only screen and (max-width: $screen-lg)
|
|
13
|
+
@content
|
|
14
|
+
=screen-xl
|
|
15
|
+
@media only screen and (min-width: $screen-lg)
|
|
16
|
+
@content
|
|
17
|
+
|
|
18
|
+
|
|
1
19
|
// https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_responsive-utilities.scss
|
|
2
20
|
|
|
3
21
|
=responsive-visibility($parent)
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
// Framework grid generation
|
|
2
|
+
//
|
|
3
|
+
// Used only by Bootstrap to generate the correct number of grid classes given
|
|
4
|
+
// any value of `$grid-columns`.
|
|
5
|
+
|
|
6
|
+
// [converter] This is defined recursively in LESS, but Sass supports real loops
|
|
7
|
+
@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
|
|
8
|
+
@for $i from (1 + 1) through $grid-columns {
|
|
9
|
+
$list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
|
|
10
|
+
}
|
|
11
|
+
#{$list} {
|
|
12
|
+
position: relative;
|
|
13
|
+
// Prevent columns from collapsing when empty
|
|
14
|
+
min-height: 1px;
|
|
15
|
+
// Inner gutter via padding
|
|
16
|
+
padding-left: ceil(($grid-gutter-width / 2));
|
|
17
|
+
padding-right: floor(($grid-gutter-width / 2));
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
// [converter] This is defined recursively in LESS, but Sass supports real loops
|
|
23
|
+
@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") {
|
|
24
|
+
@for $i from (1 + 1) through $grid-columns {
|
|
25
|
+
$list: "#{$list}, .col-#{$class}-#{$i}";
|
|
26
|
+
}
|
|
27
|
+
#{$list} {
|
|
28
|
+
float: left;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
@mixin calc-grid-column($index, $class, $type) {
|
|
34
|
+
@if ($type == width) and ($index > 0) {
|
|
35
|
+
.col-#{$class}-#{$index} {
|
|
36
|
+
width: percentage(($index / $grid-columns));
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
@if ($type == push) and ($index > 0) {
|
|
40
|
+
.col-#{$class}-push-#{$index} {
|
|
41
|
+
left: percentage(($index / $grid-columns));
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
@if ($type == push) and ($index == 0) {
|
|
45
|
+
.col-#{$class}-push-0 {
|
|
46
|
+
left: auto;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
@if ($type == pull) and ($index > 0) {
|
|
50
|
+
.col-#{$class}-pull-#{$index} {
|
|
51
|
+
right: percentage(($index / $grid-columns));
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
@if ($type == pull) and ($index == 0) {
|
|
55
|
+
.col-#{$class}-pull-0 {
|
|
56
|
+
right: auto;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
@if ($type == offset) {
|
|
60
|
+
.col-#{$class}-offset-#{$index} {
|
|
61
|
+
margin-left: percentage(($index / $grid-columns));
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
// [converter] This is defined recursively in LESS, but Sass supports real loops
|
|
67
|
+
@mixin loop-grid-columns($columns, $class, $type) {
|
|
68
|
+
@for $i from 0 through $columns {
|
|
69
|
+
@include calc-grid-column($i, $class, $type);
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
// Create grid for specific class
|
|
75
|
+
@mixin make-grid($class) {
|
|
76
|
+
@include float-grid-columns($class);
|
|
77
|
+
@include loop-grid-columns($grid-columns, $class, width);
|
|
78
|
+
@include loop-grid-columns($grid-columns, $class, pull);
|
|
79
|
+
@include loop-grid-columns($grid-columns, $class, push);
|
|
80
|
+
@include loop-grid-columns($grid-columns, $class, offset);
|
|
81
|
+
}
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
// Grid system
|
|
2
|
+
//
|
|
3
|
+
// Generate semantic grid columns with these mixins.
|
|
4
|
+
|
|
5
|
+
// Centered container element
|
|
6
|
+
@mixin container-fixed($gutter: $grid-gutter-width) {
|
|
7
|
+
margin-right: auto;
|
|
8
|
+
margin-left: auto;
|
|
9
|
+
padding-left: ($gutter / 2);
|
|
10
|
+
padding-right: ($gutter / 2);
|
|
11
|
+
@include clearfix;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
// Creates a wrapper for a series of columns
|
|
15
|
+
@mixin make-row($gutter: $grid-gutter-width) {
|
|
16
|
+
margin-left: ceil(($gutter / -2));
|
|
17
|
+
margin-right: floor(($gutter / -2));
|
|
18
|
+
@include clearfix;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
// Generate the extra small columns
|
|
22
|
+
@mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
|
|
23
|
+
position: relative;
|
|
24
|
+
float: left;
|
|
25
|
+
width: percentage(($columns / $grid-columns));
|
|
26
|
+
min-height: 1px;
|
|
27
|
+
padding-left: ($gutter / 2);
|
|
28
|
+
padding-right: ($gutter / 2);
|
|
29
|
+
}
|
|
30
|
+
@mixin make-xs-column-offset($columns) {
|
|
31
|
+
margin-left: percentage(($columns / $grid-columns));
|
|
32
|
+
}
|
|
33
|
+
@mixin make-xs-column-push($columns) {
|
|
34
|
+
left: percentage(($columns / $grid-columns));
|
|
35
|
+
}
|
|
36
|
+
@mixin make-xs-column-pull($columns) {
|
|
37
|
+
right: percentage(($columns / $grid-columns));
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// Generate the small columns
|
|
41
|
+
@mixin make-sm-column($columns, $gutter: $grid-gutter-width) {
|
|
42
|
+
position: relative;
|
|
43
|
+
min-height: 1px;
|
|
44
|
+
padding-left: ($gutter / 2);
|
|
45
|
+
padding-right: ($gutter / 2);
|
|
46
|
+
|
|
47
|
+
@media (min-width: $screen-sm-min) {
|
|
48
|
+
float: left;
|
|
49
|
+
width: percentage(($columns / $grid-columns));
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
@mixin make-sm-column-offset($columns) {
|
|
53
|
+
@media (min-width: $screen-sm-min) {
|
|
54
|
+
margin-left: percentage(($columns / $grid-columns));
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
@mixin make-sm-column-push($columns) {
|
|
58
|
+
@media (min-width: $screen-sm-min) {
|
|
59
|
+
left: percentage(($columns / $grid-columns));
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
@mixin make-sm-column-pull($columns) {
|
|
63
|
+
@media (min-width: $screen-sm-min) {
|
|
64
|
+
right: percentage(($columns / $grid-columns));
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
// Generate the medium columns
|
|
69
|
+
@mixin make-md-column($columns, $gutter: $grid-gutter-width) {
|
|
70
|
+
position: relative;
|
|
71
|
+
min-height: 1px;
|
|
72
|
+
padding-left: ($gutter / 2);
|
|
73
|
+
padding-right: ($gutter / 2);
|
|
74
|
+
|
|
75
|
+
@media (min-width: $screen-md-min) {
|
|
76
|
+
float: left;
|
|
77
|
+
width: percentage(($columns / $grid-columns));
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
@mixin make-md-column-offset($columns) {
|
|
81
|
+
@media (min-width: $screen-md-min) {
|
|
82
|
+
margin-left: percentage(($columns / $grid-columns));
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
@mixin make-md-column-push($columns) {
|
|
86
|
+
@media (min-width: $screen-md-min) {
|
|
87
|
+
left: percentage(($columns / $grid-columns));
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
@mixin make-md-column-pull($columns) {
|
|
91
|
+
@media (min-width: $screen-md-min) {
|
|
92
|
+
right: percentage(($columns / $grid-columns));
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
// Generate the large columns
|
|
97
|
+
@mixin make-lg-column($columns, $gutter: $grid-gutter-width) {
|
|
98
|
+
position: relative;
|
|
99
|
+
min-height: 1px;
|
|
100
|
+
padding-left: ($gutter / 2);
|
|
101
|
+
padding-right: ($gutter / 2);
|
|
102
|
+
|
|
103
|
+
@media (min-width: $screen-lg-min) {
|
|
104
|
+
float: left;
|
|
105
|
+
width: percentage(($columns / $grid-columns));
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
@mixin make-lg-column-offset($columns) {
|
|
109
|
+
@media (min-width: $screen-lg-min) {
|
|
110
|
+
margin-left: percentage(($columns / $grid-columns));
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
@mixin make-lg-column-push($columns) {
|
|
114
|
+
@media (min-width: $screen-lg-min) {
|
|
115
|
+
left: percentage(($columns / $grid-columns));
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
@mixin make-lg-column-pull($columns) {
|
|
119
|
+
@media (min-width: $screen-lg-min) {
|
|
120
|
+
right: percentage(($columns / $grid-columns));
|
|
121
|
+
}
|
|
122
|
+
}
|
|
@@ -36,16 +36,67 @@ $ruma-threshold: 100 / pi() !default
|
|
|
36
36
|
////////////////
|
|
37
37
|
|
|
38
38
|
// screens
|
|
39
|
+
//== Media queries breakpoints
|
|
40
|
+
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
|
|
41
|
+
|
|
42
|
+
// Extra small screen / phone
|
|
43
|
+
//** Deprecated `$screen-xs` as of v3.0.1
|
|
39
44
|
$screen-xs: 480px !default
|
|
45
|
+
//** Deprecated `$screen-xs-min` as of v3.2.0
|
|
46
|
+
$screen-xs-min: $screen-xs !default
|
|
47
|
+
//** Deprecated `$screen-phone` as of v3.0.1
|
|
48
|
+
$screen-phone: $screen-xs-min !default
|
|
49
|
+
|
|
50
|
+
// Small screen / tablet
|
|
51
|
+
//** Deprecated `$screen-sm` as of v3.0.1
|
|
40
52
|
$screen-sm: 768px !default
|
|
53
|
+
$screen-sm-min: $screen-sm !default
|
|
54
|
+
//** Deprecated `$screen-tablet` as of v3.0.1
|
|
55
|
+
$screen-tablet: $screen-sm-min !default
|
|
56
|
+
|
|
57
|
+
// Medium screen / desktop
|
|
58
|
+
//** Deprecated `$screen-md` as of v3.0.1
|
|
41
59
|
$screen-md: 992px !default
|
|
60
|
+
$screen-md-min: $screen-md !default
|
|
61
|
+
//** Deprecated `$screen-desktop` as of v3.0.1
|
|
62
|
+
$screen-desktop: $screen-md-min !default
|
|
63
|
+
|
|
64
|
+
// Large screen / wide desktop
|
|
65
|
+
//** Deprecated `$screen-lg` as of v3.0.1
|
|
42
66
|
$screen-lg: 1200px !default
|
|
67
|
+
$screen-lg-min: $screen-lg !default
|
|
68
|
+
//** Deprecated `$screen-lg-desktop` as of v3.0.1
|
|
69
|
+
$screen-lg-desktop: $screen-lg-min !default
|
|
43
70
|
|
|
44
|
-
//
|
|
45
|
-
$
|
|
71
|
+
// So media queries don't overlap when required, provide a maximum
|
|
72
|
+
$screen-xs-max: ($screen-sm-min - 1) !default
|
|
73
|
+
$screen-sm-max: ($screen-md-min - 1) !default
|
|
74
|
+
$screen-md-max: ($screen-lg-min - 1) !default
|
|
75
|
+
$screen-lg-max: ($screen-lg-min - 1) !default
|
|
46
76
|
|
|
77
|
+
// 横一列の最大カラム数
|
|
78
|
+
$grid-columns: 12 !default
|
|
47
79
|
// カラムとカラムの間のスペース
|
|
48
|
-
$gutter-width:
|
|
80
|
+
$grid-gutter-width: 32px
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
//== Container sizes
|
|
84
|
+
//## Define the maximum width of `.container` for different screen sizes.
|
|
85
|
+
|
|
86
|
+
// Small screen / tablet
|
|
87
|
+
$container-tablet: (720px + $grid-gutter-width) !default
|
|
88
|
+
//** For `$screen-sm-min` and up.
|
|
89
|
+
$container-sm: $container-tablet !default
|
|
90
|
+
|
|
91
|
+
// Medium screen / desktop
|
|
92
|
+
$container-desktop: (940px + $grid-gutter-width) !default
|
|
93
|
+
//** For `$screen-md-min` and up.
|
|
94
|
+
$container-md: $container-desktop !default
|
|
95
|
+
|
|
96
|
+
// Large screen / wide desktop
|
|
97
|
+
$container-large-desktop: (1140px + $grid-gutter-width) !default
|
|
98
|
+
//** For `$screen-lg-min` and up.
|
|
99
|
+
$container-lg: $container-large-desktop !default
|
|
49
100
|
|
|
50
101
|
/////////////////
|
|
51
102
|
// font
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: middleman-oulu
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.7.1
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- machida
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2015-08-
|
|
11
|
+
date: 2015-08-11 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: bundler
|
|
@@ -185,7 +185,7 @@ files:
|
|
|
185
185
|
- assets/stylesheets/settings/mixins/_border.sass
|
|
186
186
|
- assets/stylesheets/settings/mixins/_filters.sass
|
|
187
187
|
- assets/stylesheets/settings/mixins/_form.sass
|
|
188
|
-
- assets/stylesheets/settings/mixins/
|
|
188
|
+
- assets/stylesheets/settings/mixins/_grid.sass
|
|
189
189
|
- assets/stylesheets/settings/mixins/_ie-hacks.sass
|
|
190
190
|
- assets/stylesheets/settings/mixins/_image.sass
|
|
191
191
|
- assets/stylesheets/settings/mixins/_line.sass
|
|
@@ -199,6 +199,8 @@ files:
|
|
|
199
199
|
- assets/stylesheets/settings/mixins/_responsive-utilities.sass
|
|
200
200
|
- assets/stylesheets/settings/mixins/_table.sass
|
|
201
201
|
- assets/stylesheets/settings/mixins/_text.sass
|
|
202
|
+
- assets/stylesheets/settings/mixins/grid/_grid-framework.scss
|
|
203
|
+
- assets/stylesheets/settings/mixins/grid/_grid.scss
|
|
202
204
|
- assets/stylesheets/settings/variables/_default.sass
|
|
203
205
|
- lib/middleman-oulu.rb
|
|
204
206
|
- lib/middleman-oulu/version.rb
|
|
@@ -1,146 +0,0 @@
|
|
|
1
|
-
// Extra small screen / phone
|
|
2
|
-
//** Deprecated `$screen-xs-min` as of v3.2.0
|
|
3
|
-
$screen-xs-min: $screen-xs !default
|
|
4
|
-
//** Deprecated `$screen-phone` as of v3.0.1
|
|
5
|
-
$screen-phone: $screen-xs-min !default
|
|
6
|
-
|
|
7
|
-
// Small screen / tablet
|
|
8
|
-
$screen-sm-min: $screen-sm !default
|
|
9
|
-
//** Deprecated `$screen-tablet` as of v3.0.1
|
|
10
|
-
$screen-tablet: $screen-sm-min !default
|
|
11
|
-
|
|
12
|
-
// Medium screen / desktop
|
|
13
|
-
$screen-md-min: $screen-md !default
|
|
14
|
-
//** Deprecated `$screen-desktop` as of v3.0.1
|
|
15
|
-
$screen-desktop: $screen-md-min !default
|
|
16
|
-
|
|
17
|
-
// Large screen / wide desktop
|
|
18
|
-
$screen-lg-min: $screen-lg !default
|
|
19
|
-
//** Deprecated `$screen-lg-desktop` as of v3.0.1
|
|
20
|
-
$screen-lg-desktop: $screen-lg-min !default
|
|
21
|
-
|
|
22
|
-
// So media queries don't overlap when required, provide a maximum
|
|
23
|
-
$screen-xs-max: ($screen-sm-min - 1) !default
|
|
24
|
-
$screen-sm-max: ($screen-md-min - 1) !default
|
|
25
|
-
$screen-md-max: ($screen-lg-min - 1) !default
|
|
26
|
-
$screen-lg-max: ($screen-lg-min - 1) !default
|
|
27
|
-
|
|
28
|
-
// device
|
|
29
|
-
=screen-xs
|
|
30
|
-
@media only screen and (max-width: $screen-xs)
|
|
31
|
-
@content
|
|
32
|
-
=screen-sm
|
|
33
|
-
@media only screen and (max-width: $screen-sm)
|
|
34
|
-
@content
|
|
35
|
-
=screen-md
|
|
36
|
-
@media only screen and (max-width: $screen-md)
|
|
37
|
-
@content
|
|
38
|
-
=screen-lg
|
|
39
|
-
@media only screen and (max-width: $screen-lg)
|
|
40
|
-
@content
|
|
41
|
-
=screen-xl
|
|
42
|
-
@media only screen and (min-width: $screen-lg)
|
|
43
|
-
@content
|
|
44
|
-
|
|
45
|
-
// カラムのラッパーのクラス名
|
|
46
|
-
$row-class-name: '.row' !default
|
|
47
|
-
// カラムのネームスペース ※classの".（カンマ）"もネームスペースの一部
|
|
48
|
-
$column-namespace: '.col-' !default
|
|
49
|
-
// オフセットカラムのネームスペース
|
|
50
|
-
$column-offset-namespace: 'offset-' !default
|
|
51
|
-
// ブレイクポイントごとのカラムのプレフィックスのネームスペース
|
|
52
|
-
$break-point-xs-namespace: 'xs-' !default
|
|
53
|
-
$break-point-sm-namespace: 'sm-' !default
|
|
54
|
-
$break-point-md-namespace: 'md-' !default
|
|
55
|
-
$break-point-lg-namespace: 'lg-' !default
|
|
56
|
-
$break-point-xl-namespace: 'xl-' !default
|
|
57
|
-
|
|
58
|
-
// ブレイクポイントを配列にする
|
|
59
|
-
$break-points: $break-point-xs-namespace, $break-point-sm-namespace, $break-point-md-namespace, $break-point-lg-namespace, $break-point-xl-namespace
|
|
60
|
-
|
|
61
|
-
// デバイスごとの media query を作る
|
|
62
|
-
=break-points($break-point: $break-point-xs-namespace)
|
|
63
|
-
@if $screen-xs and $break-point == $break-point-xs-namespace
|
|
64
|
-
@content
|
|
65
|
-
@else if $screen-sm and $break-point == $break-point-sm-namespace
|
|
66
|
-
@media only screen and (min-width: $screen-xs)
|
|
67
|
-
@content
|
|
68
|
-
@else if $screen-md and $break-point == $break-point-md-namespace
|
|
69
|
-
@media only screen and (min-width: $screen-sm)
|
|
70
|
-
@content
|
|
71
|
-
@else if $screen-lg and $break-point == $break-point-lg-namespace
|
|
72
|
-
@media only screen and (min-width: $screen-md)
|
|
73
|
-
@content
|
|
74
|
-
@else if $screen-lg and $break-point == $break-point-xl-namespace
|
|
75
|
-
@media only screen and (min-width: $screen-lg)
|
|
76
|
-
@content
|
|
77
|
-
|
|
78
|
-
// カラムのラッパーの設定
|
|
79
|
-
#{$row-class-name}
|
|
80
|
-
// カラムのマージン分だけ両サイドにネガティブマージンを取る
|
|
81
|
-
+margin(horizontal, ($gutter-width / 2) * -1)
|
|
82
|
-
+rem('min-height', 1px)
|
|
83
|
-
+clearfix
|
|
84
|
-
|
|
85
|
-
// カラムの基本設定
|
|
86
|
-
=column($number, $columns-gutter-width: $gutter-width)
|
|
87
|
-
+rem('width', 100 / $columns-count * $number * 1%)
|
|
88
|
-
+padding(horizontal, $columns-gutter-width / 2)
|
|
89
|
-
box-sizing: border-box
|
|
90
|
-
float: left
|
|
91
|
-
|
|
92
|
-
// カラムをサイズごとに作る
|
|
93
|
-
@each $break-point in $break-points
|
|
94
|
-
+break-points($break-point)
|
|
95
|
-
@for $i from 1 through $columns-count
|
|
96
|
-
#{$column-namespace}#{$break-point}#{$i}
|
|
97
|
-
+column($i)
|
|
98
|
-
|
|
99
|
-
// オフセットカラムの基本設定
|
|
100
|
-
=column-offset($number)
|
|
101
|
-
+rem('margin-left', 100 / $columns-count * $number * 1%)
|
|
102
|
-
|
|
103
|
-
// オフセットカラムをサイズごとに作る
|
|
104
|
-
@each $break-point in $break-points
|
|
105
|
-
+break-points($break-point)
|
|
106
|
-
@for $i from 1 through $columns-count
|
|
107
|
-
#{$column-namespace}#{$break-point}#{$column-offset-namespace}#{$i}
|
|
108
|
-
+column-offset($i)
|
|
109
|
-
|
|
110
|
-
=grid-columns($values)
|
|
111
|
-
$columns-gutter-width: 0 !default
|
|
112
|
-
$temp-columns-count: 12 !default
|
|
113
|
-
$temp-break-points: 'xs', 'sm', 'md', 'lg' !default
|
|
114
|
-
$grid-columns-row-class-name: '.row' !default
|
|
115
|
-
$offsets: false !default
|
|
116
|
-
@for $i from 1 through length($values)
|
|
117
|
-
@if gutter_width(nth($values, $i))
|
|
118
|
-
$columns-gutter-width: nth($values, $i)
|
|
119
|
-
@else if columns_count(nth($values, $i))
|
|
120
|
-
$temp-columns-count: nth($values, $i)
|
|
121
|
-
@else if break_point(nth($values, $i))
|
|
122
|
-
$temp-break-points: nth($values, $i)
|
|
123
|
-
@else if row_class_name(nth($values, $i))
|
|
124
|
-
$grid-columns-row-class-name: nth($values, $i)
|
|
125
|
-
@else if offsets(nth($values, $i))
|
|
126
|
-
$offsets: nth($values, $i)
|
|
127
|
-
#{$grid-columns-row-class-name}
|
|
128
|
-
// カラムのマージン分だけ両サイドにネガティブマージンを取る
|
|
129
|
-
+margin(horizontal, ($columns-gutter-width / 2) * -1)
|
|
130
|
-
+clearfix
|
|
131
|
-
// カラムをサイズごとに作る
|
|
132
|
-
$break-points: ()
|
|
133
|
-
@each $temp-break-point in $temp-break-points
|
|
134
|
-
$break-points: append($break-points, if($temp-break-point == 'xs', $break-point-xs-namespace, null))
|
|
135
|
-
$break-points: append($break-points, if($temp-break-point == 'sm', $break-point-sm-namespace, null))
|
|
136
|
-
$break-points: append($break-points, if($temp-break-point == 'md', $break-point-md-namespace, null))
|
|
137
|
-
$break-points: append($break-points, if($temp-break-point == 'lg', $break-point-lg-namespace, null))
|
|
138
|
-
$break-points: append($break-points, if($temp-break-point == 'xl', $break-point-xl-namespace, null))
|
|
139
|
-
@each $break-point in $break-points
|
|
140
|
-
+break-points($break-point)
|
|
141
|
-
@for $i from 1 through $temp-columns-count
|
|
142
|
-
#{$column-namespace}#{$break-point}#{$i}
|
|
143
|
-
+column($i, $columns-gutter-width)
|
|
144
|
-
@if $offsets
|
|
145
|
-
#{$column-namespace}#{$break-point}#{$column-offset-namespace}#{$i}
|
|
146
|
-
+column-offset($i)
|