middleman-oulu 0.6.34 → 0.7.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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)
|