oulu 0.10.1 → 0.11.0
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/app/assets/stylesheets/_oulu-base.sass +1 -0
- data/app/assets/stylesheets/helpers/_block.sass +0 -3
- data/app/assets/stylesheets/helpers/_margin-padding.sass +16 -16
- data/app/assets/stylesheets/helpers/_typoglaphy.sass +2 -2
- data/app/assets/stylesheets/modules/buttons/_button-base.sass +1 -1
- data/app/assets/stylesheets/modules/typography/_long-text.sass +62 -0
- data/app/assets/stylesheets/settings/mixins/_break-points.sass +37 -0
- data/app/assets/stylesheets/settings/mixins/_grid.sass +134 -43
- data/app/assets/stylesheets/settings/mixins/_responsive-utilities.sass +62 -151
- data/app/assets/stylesheets/settings/mixins/_text.sass +0 -23
- data/app/assets/stylesheets/settings/mixins/grid/_grid-framework.sass +40 -0
- data/app/assets/stylesheets/settings/mixins/grid/_grid.sass +15 -0
- data/app/assets/stylesheets/settings/variables/_default.sass +13 -74
- data/app/assets/stylesheets/settings/variables/_modules.sass +16 -16
- data/bower.json +1 -1
- data/lib/oulu/version.rb +1 -1
- data/package.json +1 -1
- metadata +6 -4
- data/app/assets/stylesheets/settings/mixins/grid/_grid-framework.scss +0 -81
- data/app/assets/stylesheets/settings/mixins/grid/_grid.scss +0 -122
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 8e3ce48911c9ad8a7d1e14a26fb12d76012a2ae7
|
|
4
|
+
data.tar.gz: e1e6e0119c558863ad1b533b4d873293a1ba3d75
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 32bb98c6b6fd6336b7a695121cb86efde0e0f1ad0105390bd50697ba4bfcbfbf22fd4c7c4c9d1f4dff3ea62833484059896e20357760ff3280362501ec8222c8
|
|
7
|
+
data.tar.gz: 93b576a8ed05f1e87e98c2e1241a1188d3720616785a29cb8f3d34c7afc0966c81c23579ac42c23e1046efe69d4b122cba46bf91fb81a841bb56d09917fe460d
|
|
@@ -50,6 +50,7 @@
|
|
|
50
50
|
@import settings/mixins/animation
|
|
51
51
|
@import settings/mixins/grid/grid-framework
|
|
52
52
|
@import settings/mixins/grid/grid
|
|
53
|
+
@import settings/mixins/break-points
|
|
53
54
|
@import settings/mixins/grid
|
|
54
55
|
@import settings/mixins/responsive-utilities
|
|
55
56
|
@import settings/mixins/background
|
|
@@ -25,32 +25,32 @@ body
|
|
|
25
25
|
.is-horizontal-margin-0
|
|
26
26
|
+margin(horizontal, 0)
|
|
27
27
|
.is-xs-horizontal-margin-0
|
|
28
|
-
+
|
|
28
|
+
+media-breakpoint-down(xs)
|
|
29
29
|
+margin(horizontal, 0)
|
|
30
30
|
.is-sm-horizontal-margin-0
|
|
31
|
-
+
|
|
31
|
+
+media-breakpoint-down(sm)
|
|
32
32
|
+margin(horizontal, 0)
|
|
33
33
|
.is-md-horizontal-margin-0
|
|
34
|
-
+
|
|
34
|
+
+media-breakpoint-down(md)
|
|
35
35
|
+margin(horizontal, 0)
|
|
36
36
|
.is-lg-horizontal-margin-0
|
|
37
|
-
+
|
|
37
|
+
+media-breakpoint-down(lg)
|
|
38
38
|
+margin(horizontal, 0)
|
|
39
39
|
|
|
40
40
|
// horizontal-padding-0
|
|
41
41
|
.is-horizontal-padding-0
|
|
42
42
|
+padding(horizontal, 0)
|
|
43
43
|
.is-xs-horizontal-padding-0
|
|
44
|
-
+
|
|
44
|
+
+media-breakpoint-down(xs)
|
|
45
45
|
+padding(horizontal, 0)
|
|
46
46
|
.is-sm-horizontal-padding-0
|
|
47
|
-
+
|
|
47
|
+
+media-breakpoint-down(sm)
|
|
48
48
|
+padding(horizontal, 0)
|
|
49
49
|
.is-md-horizontal-padding-0
|
|
50
|
-
+
|
|
50
|
+
+media-breakpoint-down(md)
|
|
51
51
|
+padding(horizontal, 0)
|
|
52
52
|
.is-lg-horizontal-padding-0
|
|
53
|
-
+
|
|
53
|
+
+media-breakpoint-down(lg)
|
|
54
54
|
+padding(horizontal, 0)
|
|
55
55
|
|
|
56
56
|
// こっちに変更
|
|
@@ -81,30 +81,30 @@ body
|
|
|
81
81
|
.has-horizontal-margin-0
|
|
82
82
|
+margin(horizontal, 0)
|
|
83
83
|
.has-xs-horizontal-margin-0
|
|
84
|
-
+
|
|
84
|
+
+media-breakpoint-down(xs)
|
|
85
85
|
+margin(horizontal, 0)
|
|
86
86
|
.has-sm-horizontal-margin-0
|
|
87
|
-
+
|
|
87
|
+
+media-breakpoint-down(sm)
|
|
88
88
|
+margin(horizontal, 0)
|
|
89
89
|
.has-md-horizontal-margin-0
|
|
90
|
-
+
|
|
90
|
+
+media-breakpoint-down(md)
|
|
91
91
|
+margin(horizontal, 0)
|
|
92
92
|
.has-lg-horizontal-margin-0
|
|
93
|
-
+
|
|
93
|
+
+media-breakpoint-down(lg)
|
|
94
94
|
+margin(horizontal, 0)
|
|
95
95
|
|
|
96
96
|
// horizontal-padding-0
|
|
97
97
|
.has-horizontal-padding-0
|
|
98
98
|
+padding(horizontal, 0)
|
|
99
99
|
.has-xs-horizontal-padding-0
|
|
100
|
-
+
|
|
100
|
+
+media-breakpoint-down(xs)
|
|
101
101
|
+padding(horizontal, 0)
|
|
102
102
|
.has-sm-horizontal-padding-0
|
|
103
|
-
+
|
|
103
|
+
+media-breakpoint-down(sm)
|
|
104
104
|
+padding(horizontal, 0)
|
|
105
105
|
.has-md-horizontal-padding-0
|
|
106
|
-
+
|
|
106
|
+
+media-breakpoint-down(md)
|
|
107
107
|
+padding(horizontal, 0)
|
|
108
108
|
.has-lg-horizontal-padding-0
|
|
109
|
-
+
|
|
109
|
+
+media-breakpoint-down(lg)
|
|
110
110
|
+padding(horizontal, 0)
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
$font-size: $lg-button-font-size
|
|
20
20
|
@else if $size == 'xl'
|
|
21
21
|
$font-size: $xl-button-font-size
|
|
22
|
-
$button-height: round($font-size * 2.
|
|
22
|
+
$button-height: round($font-size * 2.85 - if($border-width, $border-width, 0) * 2)
|
|
23
23
|
@if $border-width
|
|
24
24
|
+border(all, $border-width)
|
|
25
25
|
@else
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
=long-text($base-font-size: 1rem)
|
|
2
|
+
p
|
|
3
|
+
+text-block(1rem 1.9 1.5em)
|
|
4
|
+
h2
|
|
5
|
+
+text-block(2rem 1.35 .8em)
|
|
6
|
+
border-bottom: solid 1px
|
|
7
|
+
padding-bottom: .25em
|
|
8
|
+
+bold-ja
|
|
9
|
+
h3
|
|
10
|
+
+text-block(1.7rem 1.4 1em)
|
|
11
|
+
+bold-ja
|
|
12
|
+
h4
|
|
13
|
+
+text-block(1.4rem 1.45 1.2em)
|
|
14
|
+
+bold-ja
|
|
15
|
+
h5
|
|
16
|
+
+text-block(1.2rem 1.5 1.2em)
|
|
17
|
+
h6
|
|
18
|
+
+text-block(1rem 1.5 1.2em)
|
|
19
|
+
* + h2
|
|
20
|
+
margin-top: 1.2em
|
|
21
|
+
* + h3
|
|
22
|
+
margin-top: 1.3em
|
|
23
|
+
* + h4
|
|
24
|
+
margin-top: 1.5em
|
|
25
|
+
* + h5
|
|
26
|
+
margin-top: 1.6em
|
|
27
|
+
* + h6
|
|
28
|
+
margin-top: 1.75em
|
|
29
|
+
* + blockquote
|
|
30
|
+
margin-top: 2em
|
|
31
|
+
>ul
|
|
32
|
+
list-style-type: disc
|
|
33
|
+
>ol
|
|
34
|
+
list-style-type: decimal
|
|
35
|
+
li
|
|
36
|
+
ul,
|
|
37
|
+
ol
|
|
38
|
+
margin-top: 1em
|
|
39
|
+
>ul
|
|
40
|
+
list-style-type: circle
|
|
41
|
+
>li
|
|
42
|
+
>ul
|
|
43
|
+
list-style-type: square
|
|
44
|
+
ul,
|
|
45
|
+
ol
|
|
46
|
+
list-style-position: outside
|
|
47
|
+
margin-left: 1.75em
|
|
48
|
+
margin-bottom: 1.4em
|
|
49
|
+
li
|
|
50
|
+
+text-block(1rem 1.9 .5em)
|
|
51
|
+
&:last-child
|
|
52
|
+
margin-bottom: 0
|
|
53
|
+
blockquote
|
|
54
|
+
border-left: .4rem solid rgba($default-text, .3)
|
|
55
|
+
margin-bottom: 1.75em
|
|
56
|
+
padding-left: 1em
|
|
57
|
+
font-style: italic
|
|
58
|
+
*:last-child
|
|
59
|
+
margin-bottom: 0
|
|
60
|
+
|
|
61
|
+
.long-text
|
|
62
|
+
+long-text(1rem)
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints))
|
|
2
|
+
$n: index($breakpoint-names, $name)
|
|
3
|
+
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null)
|
|
4
|
+
|
|
5
|
+
@function breakpoint-min($name, $breakpoints: $grid-breakpoints)
|
|
6
|
+
$min: map-get($breakpoints, $name)
|
|
7
|
+
@return if($min != 0, $min, null)
|
|
8
|
+
|
|
9
|
+
@function breakpoint-max($name, $breakpoints: $grid-breakpoints)
|
|
10
|
+
$next: breakpoint-next($name, $breakpoints)
|
|
11
|
+
@return if($next, breakpoint-min($next, $breakpoints) - 0.0625em, null)
|
|
12
|
+
|
|
13
|
+
=media-breakpoint-up($name, $breakpoints: $grid-breakpoints)
|
|
14
|
+
$min: breakpoint-min($name, $breakpoints)
|
|
15
|
+
@if $min
|
|
16
|
+
@media (min-width: $min)
|
|
17
|
+
@content
|
|
18
|
+
@else
|
|
19
|
+
@content
|
|
20
|
+
|
|
21
|
+
=media-breakpoint-down($name, $breakpoints: $grid-breakpoints)
|
|
22
|
+
$max: breakpoint-max($name, $breakpoints)
|
|
23
|
+
@if $max
|
|
24
|
+
@media (max-width: $max)
|
|
25
|
+
@content
|
|
26
|
+
@else
|
|
27
|
+
@content
|
|
28
|
+
|
|
29
|
+
=media-breakpoint-only($name, $breakpoints: $grid-breakpoints)
|
|
30
|
+
+media-breakpoint-up($name, $breakpoints)
|
|
31
|
+
+media-breakpoint-down($name, $breakpoints)
|
|
32
|
+
@content
|
|
33
|
+
|
|
34
|
+
=media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints)
|
|
35
|
+
+media-breakpoint-up($lower, $breakpoints)
|
|
36
|
+
+media-breakpoint-down($upper, $breakpoints)
|
|
37
|
+
@content
|
|
@@ -1,15 +1,22 @@
|
|
|
1
|
+
// Container widths
|
|
1
2
|
//
|
|
2
|
-
//
|
|
3
|
-
// --------------------------------------------------
|
|
3
|
+
// Set the container width, and override it for fixed navbars in media queries.
|
|
4
4
|
|
|
5
|
+
.#{$container-class-name}
|
|
6
|
+
+make-container
|
|
5
7
|
|
|
6
|
-
//
|
|
8
|
+
// For each breakpoint, define the maximum width of the container in a media query
|
|
9
|
+
@each $breakpoint, $container-max-width in $container-max-widths
|
|
10
|
+
+media-breakpoint-up($breakpoint)
|
|
11
|
+
max-width: $container-max-width
|
|
12
|
+
|
|
13
|
+
// Fluid container
|
|
7
14
|
//
|
|
8
|
-
//
|
|
15
|
+
// Utilizes the mixin meant for fixed width containers, but without any defined
|
|
16
|
+
// width for fluid, full width layouts.
|
|
9
17
|
|
|
10
|
-
.container
|
|
11
|
-
+container
|
|
12
|
-
max-width: $container-max-width
|
|
18
|
+
.container-fluid
|
|
19
|
+
+make-container
|
|
13
20
|
|
|
14
21
|
// Row
|
|
15
22
|
//
|
|
@@ -18,45 +25,129 @@
|
|
|
18
25
|
.row
|
|
19
26
|
+make-row
|
|
20
27
|
|
|
21
|
-
|
|
22
28
|
// Columns
|
|
23
29
|
//
|
|
24
30
|
// Common styles for small and large grid columns
|
|
25
31
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
//
|
|
31
|
-
|
|
32
|
-
// smartphones.
|
|
33
|
-
|
|
34
|
-
+make-grid(xs)
|
|
32
|
+
.row>[class^=col-]
|
|
33
|
+
position: relative
|
|
34
|
+
// Prevent columns from collapsing when empty
|
|
35
|
+
min-height: 1px
|
|
36
|
+
// Inner gutter via padding
|
|
37
|
+
+padding(horizontal, $grid-gutter-width / 2)
|
|
35
38
|
|
|
39
|
+
+make-grid-columns
|
|
36
40
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
41
|
+
.col-xs-first
|
|
42
|
+
order: -1
|
|
43
|
+
.col-xs-last
|
|
44
|
+
order: 1
|
|
45
|
+
|
|
46
|
+
+media-breakpoint-up(sm)
|
|
47
|
+
.col-sm-first
|
|
48
|
+
order: -1
|
|
49
|
+
.col-sm-last
|
|
50
|
+
order: 1
|
|
51
|
+
|
|
52
|
+
+media-breakpoint-up(md)
|
|
53
|
+
.col-md-first
|
|
54
|
+
order: -1
|
|
55
|
+
.col-md-last
|
|
56
|
+
order: 1
|
|
57
|
+
|
|
58
|
+
+media-breakpoint-up(lg)
|
|
59
|
+
.col-lg-first
|
|
60
|
+
order: -1
|
|
61
|
+
.col-lg-last
|
|
62
|
+
order: 1
|
|
63
|
+
|
|
64
|
+
+media-breakpoint-up(xl)
|
|
65
|
+
.col-xl-first
|
|
66
|
+
order: -1
|
|
67
|
+
.col-xl-last
|
|
68
|
+
order: 1
|
|
69
|
+
|
|
70
|
+
// Alignment for every column in row
|
|
71
|
+
|
|
72
|
+
.row-xs-top
|
|
73
|
+
align-items: flex-start
|
|
74
|
+
.row-xs-center
|
|
75
|
+
align-items: center
|
|
76
|
+
.row-xs-bottom
|
|
77
|
+
align-items: flex-end
|
|
78
|
+
|
|
79
|
+
+media-breakpoint-up(sm)
|
|
80
|
+
.row-sm-top
|
|
81
|
+
align-items: flex-start
|
|
82
|
+
.row-sm-center
|
|
83
|
+
align-items: center
|
|
84
|
+
.row-sm-bottom
|
|
85
|
+
align-items: flex-end
|
|
86
|
+
|
|
87
|
+
+media-breakpoint-up(md)
|
|
88
|
+
.row-md-top
|
|
89
|
+
align-items: flex-start
|
|
90
|
+
.row-md-center
|
|
91
|
+
align-items: center
|
|
92
|
+
.row-md-bottom
|
|
93
|
+
align-items: flex-end
|
|
94
|
+
|
|
95
|
+
+media-breakpoint-up(lg)
|
|
96
|
+
.row-lg-top
|
|
97
|
+
align-items: flex-start
|
|
98
|
+
.row-lg-center
|
|
99
|
+
align-items: center
|
|
100
|
+
.row-lg-bottom
|
|
101
|
+
align-items: flex-end
|
|
102
|
+
|
|
103
|
+
+media-breakpoint-up(xl)
|
|
104
|
+
.row-xl-top
|
|
105
|
+
align-items: flex-start
|
|
106
|
+
.row-xl-center
|
|
107
|
+
align-items: center
|
|
108
|
+
.row-xl-bottom
|
|
109
|
+
align-items: flex-end
|
|
110
|
+
|
|
111
|
+
// Alignment per column
|
|
112
|
+
|
|
113
|
+
.col-xs-top
|
|
114
|
+
align-self: flex-start
|
|
115
|
+
.col-xs-center
|
|
116
|
+
align-self: center
|
|
117
|
+
.col-xs-bottom
|
|
118
|
+
align-self: flex-end
|
|
119
|
+
|
|
120
|
+
+media-breakpoint-up(sm)
|
|
121
|
+
.col-sm-top
|
|
122
|
+
align-self: flex-start
|
|
123
|
+
.col-sm-center
|
|
124
|
+
align-self: center
|
|
125
|
+
.col-sm-bottom
|
|
126
|
+
align-self: flex-end
|
|
127
|
+
|
|
128
|
+
+media-breakpoint-up(md)
|
|
129
|
+
.col-md-top
|
|
130
|
+
align-self: flex-start
|
|
131
|
+
.col-md-center
|
|
132
|
+
align-self: center
|
|
133
|
+
.col-md-bottom
|
|
134
|
+
align-self: flex-end
|
|
135
|
+
|
|
136
|
+
+media-breakpoint-up(lg)
|
|
137
|
+
.col-lg-top
|
|
138
|
+
align-self: flex-start
|
|
139
|
+
.col-lg-center
|
|
140
|
+
align-self: center
|
|
141
|
+
.col-lg-bottom
|
|
142
|
+
align-self: flex-end
|
|
143
|
+
|
|
144
|
+
+media-breakpoint-up(xl)
|
|
145
|
+
.col-xl-top
|
|
146
|
+
align-self: flex-start
|
|
147
|
+
.col-xl-center
|
|
148
|
+
align-self: center
|
|
149
|
+
.col-xl-bottom
|
|
150
|
+
align-self: flex-end
|
|
60
151
|
|
|
61
152
|
=grid($gutter-size)
|
|
62
153
|
&.row
|
|
@@ -68,7 +159,7 @@
|
|
|
68
159
|
.row
|
|
69
160
|
@for $i from 0 through 16
|
|
70
161
|
$gutter-size: $i * 4
|
|
71
|
-
&.is-gutter-width-#{$gutter-size}
|
|
72
|
-
+margin(horizontal, $gutter-size / 2 * -
|
|
162
|
+
&.is-gutter-width-#{$gutter-size}#{if($gutter-size == 0, null, rem)}
|
|
163
|
+
+margin(horizontal, $gutter-size / 2 * -1)
|
|
73
164
|
>*
|
|
74
|
-
+padding(horizontal, $gutter-size / 2 *
|
|
165
|
+
+padding(horizontal, $gutter-size / 2 * 1)
|
|
@@ -1,23 +1,3 @@
|
|
|
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
|
-
|
|
19
|
-
// https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_responsive-utilities.scss
|
|
20
|
-
|
|
21
1
|
=responsive-visibility($parent)
|
|
22
2
|
#{$parent}
|
|
23
3
|
display: block !important
|
|
@@ -34,137 +14,68 @@
|
|
|
34
14
|
#{$parent}
|
|
35
15
|
display: none !important
|
|
36
16
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
+
|
|
64
|
-
|
|
65
|
-
.visible
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
.visible
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
.visible
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
@
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
.visible-sm-block
|
|
101
|
-
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max)
|
|
102
|
-
display: block !important
|
|
103
|
-
|
|
104
|
-
.visible-sm-inline
|
|
105
|
-
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max)
|
|
106
|
-
display: inline !important
|
|
107
|
-
|
|
108
|
-
.visible-sm-inline-block
|
|
109
|
-
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max)
|
|
110
|
-
display: inline-block !important
|
|
111
|
-
|
|
112
|
-
@media (min-width: $screen-md-min) and (max-width: $screen-md-max)
|
|
113
|
-
+responsive-visibility(".visible-md")
|
|
114
|
-
|
|
115
|
-
.visible-md-block
|
|
116
|
-
@media (min-width: $screen-md-min) and (max-width: $screen-md-max)
|
|
117
|
-
display: block !important
|
|
118
|
-
|
|
119
|
-
.visible-md-inline
|
|
120
|
-
@media (min-width: $screen-md-min) and (max-width: $screen-md-max)
|
|
121
|
-
display: inline !important
|
|
122
|
-
|
|
123
|
-
.visible-md-inline-block
|
|
124
|
-
@media (min-width: $screen-md-min) and (max-width: $screen-md-max)
|
|
125
|
-
display: inline-block !important
|
|
126
|
-
|
|
127
|
-
@media (min-width: $screen-lg-min)
|
|
128
|
-
+responsive-visibility(".visible-lg")
|
|
129
|
-
|
|
130
|
-
.visible-lg-block
|
|
131
|
-
@media (min-width: $screen-md-max) and (max-width: $screen-lg-min)
|
|
132
|
-
display: block !important
|
|
133
|
-
|
|
134
|
-
.visible-lg-inline
|
|
135
|
-
@media (min-width: $screen-md-max) and (max-width: $screen-lg-min)
|
|
136
|
-
display: inline !important
|
|
137
|
-
|
|
138
|
-
.visible-lg-inline-block
|
|
139
|
-
@media (min-width: $screen-md-max) and (max-width: $screen-lg-min)
|
|
140
|
-
display: inline-block !important
|
|
141
|
-
|
|
142
|
-
.visible-xl-block
|
|
143
|
-
@media (min-width: $screen-lg-max)
|
|
144
|
-
display: block !important
|
|
145
|
-
|
|
146
|
-
.visible-xl-inline
|
|
147
|
-
@media (min-width: $screen-lg-max)
|
|
148
|
-
display: inline !important
|
|
149
|
-
|
|
150
|
-
.visible-xl-inline-block
|
|
151
|
-
@media (min-width: $screen-lg-max)
|
|
152
|
-
display: inline-block !important
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
@media (max-width: $screen-xs-max)
|
|
158
|
-
+responsive-invisibility(".hidden-xs")
|
|
159
|
-
|
|
160
|
-
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max)
|
|
161
|
-
+responsive-invisibility(".hidden-sm")
|
|
162
|
-
|
|
163
|
-
@media (min-width: $screen-md-min) and (max-width: $screen-md-max)
|
|
164
|
-
+responsive-invisibility(".hidden-md")
|
|
165
|
-
|
|
166
|
-
@media (min-width: $screen-lg-min)
|
|
167
|
-
+responsive-invisibility(".hidden-lg")
|
|
17
|
+
=visible-settings
|
|
18
|
+
$sizes: xs sm md lg xl
|
|
19
|
+
$scopes: down up only
|
|
20
|
+
$displays: block inline-block inline
|
|
21
|
+
@each $size in $sizes
|
|
22
|
+
@each $scope in $scopes
|
|
23
|
+
@if $scope == down and $size != xl
|
|
24
|
+
@each $display in $displays
|
|
25
|
+
.is-visible-#{$size}-#{$scope}-#{$display}
|
|
26
|
+
display: none !important
|
|
27
|
+
@else if $scope == up and $size != xs
|
|
28
|
+
@each $display in $displays
|
|
29
|
+
.is-visible-#{$size}-#{$scope}-#{$display}
|
|
30
|
+
display: none !important
|
|
31
|
+
@else if $scope == only
|
|
32
|
+
@each $display in $displays
|
|
33
|
+
.is-visible-#{$size}-#{$scope}-#{$display}
|
|
34
|
+
display: none !important
|
|
35
|
+
|
|
36
|
+
=visible-helpers
|
|
37
|
+
$sizes: xs sm md lg xl
|
|
38
|
+
$scopes: down up only
|
|
39
|
+
$displays: block inline-block inline
|
|
40
|
+
@each $size in $sizes
|
|
41
|
+
@each $scope in $scopes
|
|
42
|
+
@if $scope == down and $size != xl
|
|
43
|
+
+media-breakpoint-down($size)
|
|
44
|
+
@each $display in $displays
|
|
45
|
+
.is-visible-#{$size}-#{$scope}-#{$display}
|
|
46
|
+
display: $display !important
|
|
47
|
+
@else if $scope == up and $size != xs
|
|
48
|
+
+media-breakpoint-up($size)
|
|
49
|
+
@each $display in $displays
|
|
50
|
+
.is-visible-#{$size}-#{$scope}-#{$display}
|
|
51
|
+
display: $display !important
|
|
52
|
+
@else if $scope == only
|
|
53
|
+
+media-breakpoint-only($size)
|
|
54
|
+
@each $display in $displays
|
|
55
|
+
.is-visible-#{$size}-#{$scope}-#{$display}
|
|
56
|
+
display: $display !important
|
|
57
|
+
|
|
58
|
+
=invisible-helpers
|
|
59
|
+
$sizes: xs sm md lg xl
|
|
60
|
+
$scopes: down up only
|
|
61
|
+
@each $size in $sizes
|
|
62
|
+
@each $scope in $scopes
|
|
63
|
+
@if $scope == down and $size != xl
|
|
64
|
+
+media-breakpoint-down($size)
|
|
65
|
+
is-hidden-#{$size}-#{$scope}
|
|
66
|
+
display: none !important
|
|
67
|
+
@else if $scope == up and $size != xs
|
|
68
|
+
+media-breakpoint-up($size)
|
|
69
|
+
is-hidden-#{$size}-#{$scope}
|
|
70
|
+
display: none !important
|
|
71
|
+
@else if $scope == only
|
|
72
|
+
+media-breakpoint-only($size)
|
|
73
|
+
is-hidden-#{$size}-#{$scope}
|
|
74
|
+
display: none !important
|
|
75
|
+
|
|
76
|
+
+visible-settings
|
|
77
|
+
+visible-helpers
|
|
78
|
+
+invisible-helpers
|
|
168
79
|
|
|
169
80
|
// Print utilities
|
|
170
81
|
//
|
|
@@ -22,33 +22,10 @@
|
|
|
22
22
|
@else
|
|
23
23
|
letter-spacing: nth($value2, $i)
|
|
24
24
|
|
|
25
|
-
|
|
26
25
|
=letter-spacing-center($space-width: null)
|
|
27
26
|
letter-spacing: $space-width
|
|
28
27
|
text-indent: $space-width
|
|
29
28
|
|
|
30
|
-
// brをアクティブにするサイズを設定
|
|
31
|
-
=br($active-sizes)
|
|
32
|
-
br
|
|
33
|
-
display: none
|
|
34
|
-
@if ($active-sizes)
|
|
35
|
-
@for $i from 1 through length($active-sizes)
|
|
36
|
-
@if nth($value1, $i) == xs
|
|
37
|
-
+screen-xs
|
|
38
|
-
display: block
|
|
39
|
-
@else if nth($value1, $i) == sm
|
|
40
|
-
+screen-sm
|
|
41
|
-
display: block
|
|
42
|
-
@else if nth($value1, $i) == md
|
|
43
|
-
+screen-md
|
|
44
|
-
display: block
|
|
45
|
-
@else if nth($value1, $i) == lg
|
|
46
|
-
+screen-md
|
|
47
|
-
display: block
|
|
48
|
-
@else if nth($value1, $i) == xl
|
|
49
|
-
+screen-md
|
|
50
|
-
display: block
|
|
51
|
-
|
|
52
29
|
=small-font($font-size)
|
|
53
30
|
// 9px以下のfont-sizeを使う設定（IE8不可）
|
|
54
31
|
transform: scale3d(strip_unit($font-size / 10), strip_unit($font-size/ 10), 1)
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/// Grid system
|
|
2
|
+
//
|
|
3
|
+
// Generate semantic grid columns with these mixins.
|
|
4
|
+
|
|
5
|
+
=make-container($gutter: $grid-gutter-width)
|
|
6
|
+
+margin(horizontal, auto)
|
|
7
|
+
+padding(horizontal, $gutter / 2)
|
|
8
|
+
+clearfix
|
|
9
|
+
|
|
10
|
+
=make-row($gutter: $grid-gutter-width)
|
|
11
|
+
display: flex
|
|
12
|
+
flex-direction: row
|
|
13
|
+
flex-wrap: wrap
|
|
14
|
+
+margin(horizontal, $gutter / -2)
|
|
15
|
+
|
|
16
|
+
=make-col($gutter: $grid-gutter-width)
|
|
17
|
+
position: relative
|
|
18
|
+
min-height: 1px
|
|
19
|
+
+padding(horizontal, $gutter / 2)
|
|
20
|
+
|
|
21
|
+
=make-col-span($size, $columns: $grid-columns)
|
|
22
|
+
flex: 0 0 percentage($size / $columns)
|
|
23
|
+
|
|
24
|
+
=make-col-offset($size, $columns: $grid-columns)
|
|
25
|
+
margin-left: percentage($size / $columns)
|
|
26
|
+
|
|
27
|
+
=make-col-push($size, $columns: $grid-columns)
|
|
28
|
+
left: if($size > 0, percentage($size / $columns), auto)
|
|
29
|
+
|
|
30
|
+
=make-col-pull($size, $columns: $grid-columns)
|
|
31
|
+
right: if($size > 0, percentage($size / $columns), auto)
|
|
32
|
+
|
|
33
|
+
=make-col-modifier($type, $size, $columns)
|
|
34
|
+
// Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626)
|
|
35
|
+
@if $type == push
|
|
36
|
+
+make-col-push($size, $columns)
|
|
37
|
+
@else if $type == pull
|
|
38
|
+
+make-col-pull($size, $columns)
|
|
39
|
+
@else if $type == offset
|
|
40
|
+
+make-col-offset($size, $columns)
|
|
@@ -0,0 +1,15 @@
|
|
|
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
|
+
=make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints)
|
|
7
|
+
@each $breakpoint in map-keys($breakpoints)
|
|
8
|
+
+media-breakpoint-up($breakpoint)
|
|
9
|
+
@for $i from 1 through $columns
|
|
10
|
+
.col-#{$breakpoint}-#{$i}
|
|
11
|
+
+make-col-span($i, $columns)
|
|
12
|
+
@each $modifier in pull, push, offset
|
|
13
|
+
@for $i from 0 through $columns
|
|
14
|
+
.#{$modifier}-#{$breakpoint}-#{$i}
|
|
15
|
+
+make-col-modifier($modifier, $i, $columns)
|
|
@@ -7,86 +7,34 @@ $horizontal: left right !default
|
|
|
7
7
|
$vertical: top bottom !default
|
|
8
8
|
|
|
9
9
|
/////////////////
|
|
10
|
-
//
|
|
10
|
+
// grids
|
|
11
11
|
////////////////
|
|
12
12
|
|
|
13
13
|
$container-class-name: container !default
|
|
14
|
-
$container-max-width: 1100px !default
|
|
15
|
-
$container-horizontal-padding: 16px !default
|
|
16
14
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
15
|
+
=_assert-ascending($map, $map-name)
|
|
16
|
+
$prev-key: null
|
|
17
|
+
$prev-num: null
|
|
18
|
+
@each $key, $num in $map
|
|
19
|
+
@if $prev-num != null and $prev-num >= $num
|
|
20
|
+
@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !"
|
|
21
|
+
$prev-key: $key
|
|
22
|
+
$prev-num: $num
|
|
20
23
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
// Extra small screen / phone
|
|
26
|
-
//** Deprecated `$screen-xs` as of v3.0.1
|
|
27
|
-
$screen-xs: 480px !default
|
|
28
|
-
//** Deprecated `$screen-xs-min` as of v3.2.0
|
|
29
|
-
$screen-xs-min: $screen-xs !default
|
|
30
|
-
//** Deprecated `$screen-phone` as of v3.0.1
|
|
31
|
-
$screen-phone: $screen-xs-min !default
|
|
32
|
-
|
|
33
|
-
// Small screen / tablet
|
|
34
|
-
//** Deprecated `$screen-sm` as of v3.0.1
|
|
35
|
-
$screen-sm: 768px !default
|
|
36
|
-
$screen-sm-min: $screen-sm !default
|
|
37
|
-
//** Deprecated `$screen-tablet` as of v3.0.1
|
|
38
|
-
$screen-tablet: $screen-sm-min !default
|
|
39
|
-
|
|
40
|
-
// Medium screen / desktop
|
|
41
|
-
//** Deprecated `$screen-md` as of v3.0.1
|
|
42
|
-
$screen-md: 992px !default
|
|
43
|
-
$screen-md-min: $screen-md !default
|
|
44
|
-
//** Deprecated `$screen-desktop` as of v3.0.1
|
|
45
|
-
$screen-desktop: $screen-md-min !default
|
|
46
|
-
|
|
47
|
-
// Large screen / wide desktop
|
|
48
|
-
//** Deprecated `$screen-lg` as of v3.0.1
|
|
49
|
-
$screen-lg: 1200px !default
|
|
50
|
-
$screen-lg-min: $screen-lg !default
|
|
51
|
-
//** Deprecated `$screen-lg-desktop` as of v3.0.1
|
|
52
|
-
$screen-lg-desktop: $screen-lg-min !default
|
|
53
|
-
|
|
54
|
-
// So media queries don't overlap when required, provide a maximum
|
|
55
|
-
$screen-xs-max: ($screen-sm-min - 1) !default
|
|
56
|
-
$screen-sm-max: ($screen-md-min - 1) !default
|
|
57
|
-
$screen-md-max: ($screen-lg-min - 1) !default
|
|
58
|
-
$screen-lg-max: ($screen-lg-min - 1) !default
|
|
24
|
+
$grid-breakpoints: (xs: 0, sm: 34em, md: 48em, lg: 62em, xl: 75em) !default
|
|
25
|
+
+_assert-ascending($grid-breakpoints, "$grid-breakpoints")
|
|
26
|
+
$container-max-widths: (sm: 34rem, md: 45rem, lg: 60rem, xl: 72.25rem) !default
|
|
59
27
|
|
|
60
28
|
// 横一列の最大カラム数
|
|
61
29
|
$grid-columns: 12 !default
|
|
62
30
|
// カラムとカラムの間のスペース
|
|
63
|
-
$grid-gutter-width:
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
//== Container sizes
|
|
67
|
-
//## Define the maximum width of `.container` for different screen sizes.
|
|
68
|
-
|
|
69
|
-
// Small screen / tablet
|
|
70
|
-
$container-tablet: (720px + $grid-gutter-width) !default
|
|
71
|
-
//** For `$screen-sm-min` and up.
|
|
72
|
-
$container-sm: $container-tablet !default
|
|
31
|
+
$grid-gutter-width: 2rem
|
|
73
32
|
|
|
74
|
-
// Medium screen / desktop
|
|
75
|
-
$container-desktop: (940px + $grid-gutter-width) !default
|
|
76
|
-
//** For `$screen-md-min` and up.
|
|
77
|
-
$container-md: $container-desktop !default
|
|
78
|
-
|
|
79
|
-
// Large screen / wide desktop
|
|
80
|
-
$container-large-desktop: (1140px + $grid-gutter-width) !default
|
|
81
|
-
//** For `$screen-lg-min` and up.
|
|
82
|
-
$container-lg: $container-large-desktop !default
|
|
83
33
|
|
|
84
34
|
/////////////////
|
|
85
35
|
// font
|
|
86
36
|
////////////////
|
|
87
37
|
|
|
88
|
-
$fw: 400 !default
|
|
89
|
-
|
|
90
38
|
$basic-sans-serif: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro, "メイリオ", Meiryo, sans-serif !default
|
|
91
39
|
$basic-bold-sans-serif: "ヒラギノ角ゴ StdN", "Hiragino Kaku Gothic StdN", "メイリオ", Meiryo, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana, sans-serif, "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana, sans-serif !default
|
|
92
40
|
$basic-serif: "Times New Roman", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HGS明朝E", "游明朝", YuMincho,'ＭＳ Ｐ明朝','MS PMincho', serif !default
|
|
@@ -110,15 +58,6 @@ $dark-text-color: $default-text !default
|
|
|
110
58
|
$luma-contrast-bright-color: $default-text !default
|
|
111
59
|
$luma-contrast-dark-color: $reversal-text !default
|
|
112
60
|
|
|
113
|
-
/////////////////
|
|
114
|
-
// SNS colors
|
|
115
|
-
////////////////
|
|
116
|
-
|
|
117
|
-
$twitter: #55acee !default
|
|
118
|
-
$facebook: #3b5998 !default
|
|
119
|
-
$hatena: #008FDE !default
|
|
120
|
-
$pocket: #f23c53 !default
|
|
121
|
-
|
|
122
61
|
/////////////////
|
|
123
62
|
// sanitize.css
|
|
124
63
|
////////////////
|
|
@@ -1,12 +1,3 @@
|
|
|
1
|
-
/////////////////
|
|
2
|
-
// brand colors
|
|
3
|
-
////////////////
|
|
4
|
-
|
|
5
|
-
$base-color: white !default
|
|
6
|
-
$main-color: #4FC1E9 !default
|
|
7
|
-
$sub-color: #FFCE54 !default
|
|
8
|
-
$accent-color: #FC6E51 !default
|
|
9
|
-
|
|
10
1
|
/////////////////
|
|
11
2
|
// UI colors
|
|
12
3
|
////////////////
|
|
@@ -18,11 +9,11 @@ $info: #37bc9b !default
|
|
|
18
9
|
$warning: #f6bb42 !default
|
|
19
10
|
$danger: #da4453 !default
|
|
20
11
|
|
|
21
|
-
$primary-text: luma_add_contrast($
|
|
22
|
-
$info-text: luma_add_contrast($
|
|
23
|
-
$success-text: luma_add_contrast($
|
|
24
|
-
$warning-text: luma_add_contrast($
|
|
25
|
-
$danger-text: luma_add_contrast($
|
|
12
|
+
$primary-text: luma_add_contrast($root-background-color, $primary) !default
|
|
13
|
+
$info-text: luma_add_contrast($root-background-color, $info) !default
|
|
14
|
+
$success-text: luma_add_contrast($root-background-color, $success) !default
|
|
15
|
+
$warning-text: luma_add_contrast($root-background-color, $warning) !default
|
|
16
|
+
$danger-text: luma_add_contrast($root-background-color, $danger) !default
|
|
26
17
|
$faint-text: gray !default
|
|
27
18
|
|
|
28
19
|
/////////////////
|
|
@@ -39,8 +30,17 @@ $button-sizes: xs, sm, md, lg, xl !default
|
|
|
39
30
|
$button-color-names: secondary, primary, success, info, warning, danger !default
|
|
40
31
|
$button-styles: normal, border, bold-border, flat-emboss, material, flat-round, super-bold-border !default
|
|
41
32
|
|
|
42
|
-
$checked:
|
|
43
|
-
$checked-icon:
|
|
33
|
+
$checked: #4FC1E9 !default
|
|
34
|
+
$checked-icon: #FC6E51 !default
|
|
35
|
+
|
|
36
|
+
/////////////////
|
|
37
|
+
// SNS colors
|
|
38
|
+
////////////////
|
|
39
|
+
|
|
40
|
+
$twitter: #55acee !default
|
|
41
|
+
$facebook: #3b5998 !default
|
|
42
|
+
$hatena: #008FDE !default
|
|
43
|
+
$pocket: #f23c53 !default
|
|
44
44
|
|
|
45
45
|
/////////////////
|
|
46
46
|
// tab navs
|
data/bower.json
CHANGED
data/lib/oulu/version.rb
CHANGED
data/package.json
CHANGED
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: oulu
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.11.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- machida
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2016-03-
|
|
11
|
+
date: 2016-03-25 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: thor
|
|
@@ -71,6 +71,7 @@ files:
|
|
|
71
71
|
- app/assets/stylesheets/modules/glitch/_glitch.sass~organize-modules
|
|
72
72
|
- app/assets/stylesheets/modules/navs/_tabs-nav.sass
|
|
73
73
|
- app/assets/stylesheets/modules/text-input/_text-inputs.sass
|
|
74
|
+
- app/assets/stylesheets/modules/typography/_long-text.sass
|
|
74
75
|
- app/assets/stylesheets/modules/web-fonts/_cousine.sass
|
|
75
76
|
- app/assets/stylesheets/modules/web-fonts/_droid-sans.sass
|
|
76
77
|
- app/assets/stylesheets/modules/web-fonts/_font-awsome.sass
|
|
@@ -124,6 +125,7 @@ files:
|
|
|
124
125
|
- app/assets/stylesheets/settings/mixins/_block.sass
|
|
125
126
|
- app/assets/stylesheets/settings/mixins/_border-radius.sass
|
|
126
127
|
- app/assets/stylesheets/settings/mixins/_border.sass
|
|
128
|
+
- app/assets/stylesheets/settings/mixins/_break-points.sass
|
|
127
129
|
- app/assets/stylesheets/settings/mixins/_filters.sass
|
|
128
130
|
- app/assets/stylesheets/settings/mixins/_form.sass
|
|
129
131
|
- app/assets/stylesheets/settings/mixins/_grid.sass
|
|
@@ -140,8 +142,8 @@ files:
|
|
|
140
142
|
- app/assets/stylesheets/settings/mixins/_responsive-utilities.sass
|
|
141
143
|
- app/assets/stylesheets/settings/mixins/_table.sass
|
|
142
144
|
- app/assets/stylesheets/settings/mixins/_text.sass
|
|
143
|
-
- app/assets/stylesheets/settings/mixins/grid/_grid-framework.
|
|
144
|
-
- app/assets/stylesheets/settings/mixins/grid/_grid.
|
|
145
|
+
- app/assets/stylesheets/settings/mixins/grid/_grid-framework.sass
|
|
146
|
+
- app/assets/stylesheets/settings/mixins/grid/_grid.sass
|
|
145
147
|
- app/assets/stylesheets/settings/variables/_default.sass
|
|
146
148
|
- app/assets/stylesheets/settings/variables/_modules.sass
|
|
147
149
|
- bower.json
|
|
@@ -1,81 +0,0 @@
|
|
|
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
|
-
}
|
|
@@ -1,122 +0,0 @@
|
|
|
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
|
-
}
|