prelude-framework 0.7
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.
- data/.gitignore +20 -0
- data/Gemfile +4 -0
- data/LICENCE +19 -0
- data/README.md +5 -0
- data/Rakefile +1 -0
- data/lib/prelude/version.rb +3 -0
- data/lib/prelude-framework.rb +8 -0
- data/prelude.gemspec +23 -0
- data/scss/prelude/_abstractions.scss +21 -0
- data/scss/prelude/_all.scss +6 -0
- data/scss/prelude/_base.scss +6 -0
- data/scss/prelude/_core.scss +13 -0
- data/scss/prelude/_debug-mode.scss +125 -0
- data/scss/prelude/_defaults.scss +159 -0
- data/scss/prelude/_functions.scss +8 -0
- data/scss/prelude/_images.scss +9 -0
- data/scss/prelude/_mixins.scss +9 -0
- data/scss/prelude/_modules.scss +7 -0
- data/scss/prelude/_typography.scss +15 -0
- data/scss/prelude/abstractions/_flag.scss +67 -0
- data/scss/prelude/abstractions/_flexbox.scss +29 -0
- data/scss/prelude/abstractions/_island.scss +53 -0
- data/scss/prelude/abstractions/_media.scss +61 -0
- data/scss/prelude/abstractions/_nav.scss +110 -0
- data/scss/prelude/abstractions/_split.scss +26 -0
- data/scss/prelude/base/_border-box.scss +7 -0
- data/scss/prelude/base/_helpers.scss +167 -0
- data/scss/prelude/functions/_contrasty.scss +24 -0
- data/scss/prelude/functions/_is-saturated.scss +14 -0
- data/scss/prelude/functions/_pixels-to-ems.scss +7 -0
- data/scss/prelude/images/_base.scss +36 -0
- data/scss/prelude/images/_cover-image.scss +16 -0
- data/scss/prelude/images/_thumbnails.scss +47 -0
- data/scss/prelude/mixins/_button-style.scss +40 -0
- data/scss/prelude/mixins/_each-grid-breakpoint.scss +21 -0
- data/scss/prelude/mixins/_gradients.scss +12 -0
- data/scss/prelude/mixins/_rem.scss +31 -0
- data/scss/prelude/mixins/_set-font-size.scss +26 -0
- data/scss/prelude/modules/_buttons.scss +126 -0
- data/scss/prelude/modules/_forms.scss +634 -0
- data/scss/prelude/modules/_tables.scss +160 -0
- data/scss/prelude/typography/_base.scss +16 -0
- data/scss/prelude/typography/_brand.scss +19 -0
- data/scss/prelude/typography/_links.scss +14 -0
- data/scss/prelude/typography/_paragraphs.scss +9 -0
- data/scss/prelude/typography/_quotes.scss +31 -0
- data/scss/prelude/typography/_sizes.scss +63 -0
- data/scss/prelude.scss +53 -0
- data/test/config.rb +9 -0
- data/test/index.html +381 -0
- data/test/scss/_prelude-settings.scss +159 -0
- data/test/scss/style.scss +55 -0
- metadata +164 -0
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Media Object
|
|
3
|
+
// The media object is an image to the left, with descriptive content
|
|
4
|
+
// to the right (and an optional button to the right).
|
|
5
|
+
// It saves hundreds of lines of code.
|
|
6
|
+
//
|
|
7
|
+
// Learn more:
|
|
8
|
+
// http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
|
|
9
|
+
//
|
|
10
|
+
// @usage:
|
|
11
|
+
// <div class="t-media">
|
|
12
|
+
// <div class="t-media__fl">
|
|
13
|
+
// <img src="placehold.it/45" alt="image">
|
|
14
|
+
// </div>
|
|
15
|
+
// <div class="t-media__body">
|
|
16
|
+
// Descriptive content to the right
|
|
17
|
+
// </div>
|
|
18
|
+
// </div>
|
|
19
|
+
//
|
|
20
|
+
// @usage (extended - adding a button to the right):
|
|
21
|
+
// <div class="t-media">
|
|
22
|
+
// <div class="t-media__fr">
|
|
23
|
+
// <a href="#" class="btn">click me</a>
|
|
24
|
+
// </div>
|
|
25
|
+
// <div class="t-media__fl">
|
|
26
|
+
// <img src="placehold.it/45" alt="image">
|
|
27
|
+
// </div>
|
|
28
|
+
// <div class="t-media__body">
|
|
29
|
+
// Descriptive content to the right
|
|
30
|
+
// </div>
|
|
31
|
+
// </div>
|
|
32
|
+
//
|
|
33
|
+
// =============================================================================
|
|
34
|
+
|
|
35
|
+
// Container
|
|
36
|
+
.media {
|
|
37
|
+
@extend %prelude-clearfix;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// Left floated image
|
|
41
|
+
.media__fl {
|
|
42
|
+
float: left;
|
|
43
|
+
margin-right: $base-spacing-unit;
|
|
44
|
+
|
|
45
|
+
.islet & { margin-right: $half-spacing-unit; }
|
|
46
|
+
.nauru & { margin-right: $quarter-spacing-unit; }
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
// Right floated image
|
|
50
|
+
.media__fr {
|
|
51
|
+
float: right;
|
|
52
|
+
margin-left: $base-spacing-unit;
|
|
53
|
+
.islet & { margin-left: $half-spacing-unit; }
|
|
54
|
+
.nauru & { margin-left: $quarter-spacing-unit; }
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// Main content
|
|
58
|
+
.media__body {
|
|
59
|
+
@extend %prelude-clearfix;
|
|
60
|
+
overflow: hidden;
|
|
61
|
+
}
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Nav Object
|
|
3
|
+
//
|
|
4
|
+
// The nav object is a horizontal list of things (a menu, a breadcrumb, a list
|
|
5
|
+
// of logos,…)
|
|
6
|
+
// It saves lots of lines of code.
|
|
7
|
+
//
|
|
8
|
+
// Table of contents:
|
|
9
|
+
// 1. Nav
|
|
10
|
+
// 2. Stacked extension
|
|
11
|
+
// 3. Banner extension
|
|
12
|
+
// 4. Elastic extension
|
|
13
|
+
//
|
|
14
|
+
// Learn more:
|
|
15
|
+
// http://csswizardry.com/2011/09/the-nav-abstraction/
|
|
16
|
+
//
|
|
17
|
+
// =============================================================================
|
|
18
|
+
|
|
19
|
+
// =============================================================================
|
|
20
|
+
// 1. Nav
|
|
21
|
+
//
|
|
22
|
+
// @usage:
|
|
23
|
+
// <ul class="nav">
|
|
24
|
+
// <li><a href="#">item 1</a></li>
|
|
25
|
+
// <li><a href="#">item 2</a></li>
|
|
26
|
+
// <li><a href="#">item 3</a></li>
|
|
27
|
+
// </ul>
|
|
28
|
+
//
|
|
29
|
+
// =============================================================================
|
|
30
|
+
|
|
31
|
+
// Use only on `ul` or `ol` elements
|
|
32
|
+
.nav {
|
|
33
|
+
@extend %prelude-clearfix;
|
|
34
|
+
list-style: none;
|
|
35
|
+
margin-left: 0;
|
|
36
|
+
|
|
37
|
+
// (Required)
|
|
38
|
+
> li,
|
|
39
|
+
> li > a {
|
|
40
|
+
display: inline-block;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
// =============================================================================
|
|
47
|
+
// 2. Stacked extension
|
|
48
|
+
//
|
|
49
|
+
// Vertical mode for the list
|
|
50
|
+
//
|
|
51
|
+
// @usage:
|
|
52
|
+
// <ul class="nav nav--stacked">
|
|
53
|
+
// <li><a href="#">item 1</a></li>
|
|
54
|
+
// <li><a href="#">item 2</a></li>
|
|
55
|
+
// <li><a href="#">item 3</a></li>
|
|
56
|
+
// </ul>
|
|
57
|
+
//
|
|
58
|
+
// =============================================================================
|
|
59
|
+
|
|
60
|
+
.nav--stacked {
|
|
61
|
+
> li {
|
|
62
|
+
display:list-item;
|
|
63
|
+
> a { display: block; }
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
// =============================================================================
|
|
69
|
+
// 3. Banner extension
|
|
70
|
+
//
|
|
71
|
+
// Centered list
|
|
72
|
+
//
|
|
73
|
+
// @usage:
|
|
74
|
+
// <ul class="nav nav--banner">
|
|
75
|
+
// <li><a href="#">item 1</a></li>
|
|
76
|
+
// <li><a href="#">item 2</a></li>
|
|
77
|
+
// <li><a href="#">item 3</a></li>
|
|
78
|
+
// </ul>
|
|
79
|
+
//
|
|
80
|
+
// =============================================================================
|
|
81
|
+
|
|
82
|
+
.nav--banner {
|
|
83
|
+
text-align: center;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
// =============================================================================
|
|
88
|
+
// 4. Elastic extension
|
|
89
|
+
//
|
|
90
|
+
// Makes the list span the whole width
|
|
91
|
+
//
|
|
92
|
+
// @usage:
|
|
93
|
+
// <ul class="nav nav--elastic">
|
|
94
|
+
// <li><a href="#">item 1</a></li>
|
|
95
|
+
// <li><a href="#">item 2</a></li>
|
|
96
|
+
// <li><a href="#">item 3</a></li>
|
|
97
|
+
// </ul>
|
|
98
|
+
//
|
|
99
|
+
// =============================================================================
|
|
100
|
+
|
|
101
|
+
.nav--elastic {
|
|
102
|
+
display: table !important;
|
|
103
|
+
width: 100%;
|
|
104
|
+
padding-left: 0;
|
|
105
|
+
|
|
106
|
+
>li {
|
|
107
|
+
text-align: center;
|
|
108
|
+
display: table-cell !important;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Split
|
|
3
|
+
//
|
|
4
|
+
// The split abstraction floats two elements away from each other
|
|
5
|
+
//
|
|
6
|
+
// @usage:
|
|
7
|
+
// <dl class="split">
|
|
8
|
+
// <dt class="split__left">Title</dt>
|
|
9
|
+
// <dd>Value</dd>
|
|
10
|
+
// </dl>
|
|
11
|
+
//
|
|
12
|
+
// =============================================================================
|
|
13
|
+
|
|
14
|
+
// Split block
|
|
15
|
+
.split{
|
|
16
|
+
text-align: right;
|
|
17
|
+
list-style: none;
|
|
18
|
+
margin-left: 0;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
// Element to the left
|
|
22
|
+
.split__left{
|
|
23
|
+
text-align: left;
|
|
24
|
+
float: left;
|
|
25
|
+
clear: left;
|
|
26
|
+
}
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Helpers
|
|
3
|
+
// A collection of helper classes
|
|
4
|
+
//
|
|
5
|
+
// Table of contents:
|
|
6
|
+
// 1. Clearfix
|
|
7
|
+
// 2. Floats
|
|
8
|
+
// 3. Text utilities
|
|
9
|
+
// 4. Display utilities
|
|
10
|
+
// 5. Hidden text
|
|
11
|
+
// 6. Add/remove margins
|
|
12
|
+
// 7. Add/remove paddings
|
|
13
|
+
//
|
|
14
|
+
// =============================================================================
|
|
15
|
+
|
|
16
|
+
// =============================================================================
|
|
17
|
+
// 1. Clearfix
|
|
18
|
+
// =============================================================================
|
|
19
|
+
|
|
20
|
+
.cf { @extend %prelude-clearfix; }
|
|
21
|
+
|
|
22
|
+
// =============================================================================
|
|
23
|
+
// 2. Floats
|
|
24
|
+
// =============================================================================
|
|
25
|
+
|
|
26
|
+
// Float left
|
|
27
|
+
.fl { float: left; }
|
|
28
|
+
|
|
29
|
+
// Float right
|
|
30
|
+
.fr { float: right }
|
|
31
|
+
|
|
32
|
+
// Float none
|
|
33
|
+
.fn { float: none; }
|
|
34
|
+
|
|
35
|
+
// Clear left
|
|
36
|
+
.cl { clear: left; }
|
|
37
|
+
|
|
38
|
+
// Clear right
|
|
39
|
+
.cr { clear: right; }
|
|
40
|
+
|
|
41
|
+
// Clear both
|
|
42
|
+
.cb { clear: both; }
|
|
43
|
+
|
|
44
|
+
// =============================================================================
|
|
45
|
+
// 3. Text utilities
|
|
46
|
+
// =============================================================================
|
|
47
|
+
|
|
48
|
+
// Ellipsis clips text that does not fit into its box
|
|
49
|
+
.ellipsis { @include ellipsis; }
|
|
50
|
+
|
|
51
|
+
// Uppercase text
|
|
52
|
+
.caps { text-transform: uppercase; }
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
// Text alignment
|
|
56
|
+
// =============================================================================
|
|
57
|
+
|
|
58
|
+
.text--left { text-align: left; }
|
|
59
|
+
.text--center { text-align: center; }
|
|
60
|
+
.text--right { text-align: right; }
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
// =============================================================================
|
|
64
|
+
// 4. Display state utilities
|
|
65
|
+
// =============================================================================
|
|
66
|
+
|
|
67
|
+
// Hide for both screenreaders and browsers:
|
|
68
|
+
// css-discuss.incutio.com/wiki/Screenreader_Visibility
|
|
69
|
+
.is-hidden {
|
|
70
|
+
display: none !important;
|
|
71
|
+
visibility: hidden !important;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.is-displayed {
|
|
75
|
+
display: block !important;
|
|
76
|
+
visibility: visible !important;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// Hide visually and from screenreaders, but maintain layout
|
|
80
|
+
.is-invisible {
|
|
81
|
+
visibility: hidden !important;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.is-visible {
|
|
85
|
+
visibility: visible !important;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
// Hide only visually, but have it available for screenreaders: h5bp.com/v
|
|
89
|
+
.is-visually-hidden {
|
|
90
|
+
position: absolute;
|
|
91
|
+
overflow: hidden;
|
|
92
|
+
clip: rect(0 0 0 0);
|
|
93
|
+
height: 1px;
|
|
94
|
+
width: 1px;
|
|
95
|
+
margin: -1px;
|
|
96
|
+
padding: 0;
|
|
97
|
+
border: 0;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
// =============================================================================
|
|
101
|
+
// 5. Hidden text
|
|
102
|
+
// =============================================================================
|
|
103
|
+
|
|
104
|
+
// Hides text using the Kellum method
|
|
105
|
+
// http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
|
|
106
|
+
.ht {
|
|
107
|
+
text-indent: 100%;
|
|
108
|
+
white-space: nowrap;
|
|
109
|
+
overflow: hidden;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
// =============================================================================
|
|
113
|
+
// 6. Add/remove margins
|
|
114
|
+
// =============================================================================
|
|
115
|
+
|
|
116
|
+
.push { margin: $base-spacing-unit !important; }
|
|
117
|
+
.push--top { margin-top: $base-spacing-unit !important; }
|
|
118
|
+
.push--right { margin-right: $base-spacing-unit !important; }
|
|
119
|
+
.push--bottom { margin-bottom: $base-spacing-unit !important; }
|
|
120
|
+
.push--left { margin-left: $base-spacing-unit !important; }
|
|
121
|
+
.push--ends { margin-top: $base-spacing-unit !important; margin-bottom: $base-spacing-unit !important; }
|
|
122
|
+
.push--sides { margin-right: $base-spacing-unit !important; margin-left: $base-spacing-unit !important; }
|
|
123
|
+
|
|
124
|
+
.push-half { margin: $half-spacing-unit !important; }
|
|
125
|
+
.push-half--top { margin-top: $half-spacing-unit !important; }
|
|
126
|
+
.push-half--right { margin-right: $half-spacing-unit !important; }
|
|
127
|
+
.push-half--bottom { margin-bottom:$half-spacing-unit !important; }
|
|
128
|
+
.push-half--left { margin-left: $half-spacing-unit !important; }
|
|
129
|
+
.push-half--ends { margin-top: $half-spacing-unit !important; margin-bottom:$half-spacing-unit !important; }
|
|
130
|
+
.push-half--sides { margin-right: $half-spacing-unit !important; margin-left: $half-spacing-unit !important; }
|
|
131
|
+
|
|
132
|
+
.flush { margin: 0 !important; }
|
|
133
|
+
.flush--top { margin-top: 0 !important; }
|
|
134
|
+
.flush--right { margin-right: 0 !important; }
|
|
135
|
+
.flush--bottom { margin-bottom:0 !important; }
|
|
136
|
+
.flush--left { margin-left: 0 !important; }
|
|
137
|
+
.flush--ends { margin-top: 0 !important; margin-bottom:0 !important; }
|
|
138
|
+
.flush--sides { margin-right: 0 !important; margin-left: 0 !important; }
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
// =============================================================================
|
|
142
|
+
// 7. Add/remove paddings
|
|
143
|
+
// =============================================================================
|
|
144
|
+
|
|
145
|
+
.soft { padding: $base-spacing-unit !important; }
|
|
146
|
+
.soft--top { padding-top: $base-spacing-unit !important; }
|
|
147
|
+
.soft--right { padding-right: $base-spacing-unit !important; }
|
|
148
|
+
.soft--bottom { padding-bottom:$base-spacing-unit !important; }
|
|
149
|
+
.soft--left { padding-left: $base-spacing-unit !important; }
|
|
150
|
+
.soft--ends { padding-top: $base-spacing-unit !important; padding-bottom:$base-spacing-unit !important; }
|
|
151
|
+
.soft--sides { padding-right: $base-spacing-unit !important; padding-left: $base-spacing-unit !important; }
|
|
152
|
+
|
|
153
|
+
.soft-half { padding: $half-spacing-unit !important; }
|
|
154
|
+
.soft-half--top { padding-top: $half-spacing-unit !important; }
|
|
155
|
+
.soft-half--right { padding-right: $half-spacing-unit !important; }
|
|
156
|
+
.soft-half--bottom { padding-bottom:$half-spacing-unit !important; }
|
|
157
|
+
.soft-half--left { padding-left: $half-spacing-unit !important; }
|
|
158
|
+
.soft-half--ends { padding-top: $half-spacing-unit !important; padding-bottom:$half-spacing-unit !important; }
|
|
159
|
+
.soft-half--sides { padding-right: $half-spacing-unit !important; padding-left: $half-spacing-unit !important; }
|
|
160
|
+
|
|
161
|
+
.hard { padding: 0 !important; }
|
|
162
|
+
.hard--top { padding-top: 0 !important; }
|
|
163
|
+
.hard--right { padding-right: 0 !important; }
|
|
164
|
+
.hard--bottom { padding-bottom:0 !important; }
|
|
165
|
+
.hard--left { padding-left: 0 !important; }
|
|
166
|
+
.hard--ends { padding-top: 0 !important; padding-bottom:0 !important; }
|
|
167
|
+
.hard--sides { padding-right: 0 !important; padding-left: 0 !important; }
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Contrasty
|
|
3
|
+
//
|
|
4
|
+
// A more robust color contrast function
|
|
5
|
+
// Important! -> This function might be part of Compass 0.13
|
|
6
|
+
// https://github.com/chriseppstein/compass/issues/1051
|
|
7
|
+
// =============================================================================
|
|
8
|
+
|
|
9
|
+
@function contrasty(
|
|
10
|
+
$bg-color,
|
|
11
|
+
$dark-color: black,
|
|
12
|
+
$light-color: white
|
|
13
|
+
) {
|
|
14
|
+
|
|
15
|
+
$color-brightness: round((red($bg-color) * 299) + (green($bg-color) * 587) + (blue($bg-color) * 114) / 1000);
|
|
16
|
+
$light-color-brightness: round((red($light-color) * 299) + (green($light-color) * 587) + (blue($light-color) * 114) / 1000);
|
|
17
|
+
$dark-color-brightness: round((red($dark-color) * 299) + (green($dark-color) * 587) + (blue($dark-color) * 114) / 1000);
|
|
18
|
+
|
|
19
|
+
@if abs($color-brightness - $light-color-brightness) > abs($color-brightness - $dark-color-brightness) {
|
|
20
|
+
@return $light-color;
|
|
21
|
+
} @else {
|
|
22
|
+
@return $dark-color;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Is saturated?
|
|
3
|
+
//
|
|
4
|
+
// Checks if a color has saturation or not
|
|
5
|
+
//
|
|
6
|
+
// =============================================================================
|
|
7
|
+
|
|
8
|
+
@function is-saturated($color) {
|
|
9
|
+
@if ($color == desaturate($color,100%)) {
|
|
10
|
+
@return false;
|
|
11
|
+
} @else {
|
|
12
|
+
@return true;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Convert pixel values into ems
|
|
3
|
+
// =============================================================================
|
|
4
|
+
|
|
5
|
+
@function pixels-to-ems($px, $context: $base-font-size) {
|
|
6
|
+
@return #{$px / $context}em;
|
|
7
|
+
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Base
|
|
3
|
+
//
|
|
4
|
+
// Base image styles
|
|
5
|
+
// =============================================================================
|
|
6
|
+
|
|
7
|
+
img {
|
|
8
|
+
max-width: 100%;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
figure > img {
|
|
12
|
+
display: block;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
// Image placement
|
|
17
|
+
// =============================================================================
|
|
18
|
+
|
|
19
|
+
.img--center{
|
|
20
|
+
display: block;
|
|
21
|
+
margin-right: auto;
|
|
22
|
+
margin-bottom: $base-spacing-unit;
|
|
23
|
+
margin-left: auto;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.img--left{
|
|
27
|
+
float: left;
|
|
28
|
+
margin-right: $base-spacing-unit;
|
|
29
|
+
margin-bottom: $base-spacing-unit;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.img--right{
|
|
33
|
+
float: right;
|
|
34
|
+
margin-bottom: $base-spacing-unit;
|
|
35
|
+
margin-left: $base-spacing-unit;
|
|
36
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Cover Image mixin
|
|
3
|
+
// =============================================================================
|
|
4
|
+
|
|
5
|
+
@mixin cover-image($image-url, $background-position: 50% 50%){
|
|
6
|
+
@include background-size(cover);
|
|
7
|
+
position: fixed;
|
|
8
|
+
top: 0;
|
|
9
|
+
left: 0;
|
|
10
|
+
z-index: -1;
|
|
11
|
+
width: 100%;
|
|
12
|
+
height: 100%;
|
|
13
|
+
background-image: image-url($image-url);
|
|
14
|
+
background-repeat: no-repeat;
|
|
15
|
+
background-position: $background-position;
|
|
16
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Thumbnails
|
|
3
|
+
//
|
|
4
|
+
// Classes for styling <img> elements
|
|
5
|
+
//
|
|
6
|
+
// Table of contents:
|
|
7
|
+
// 1. Thumbnail Rounded
|
|
8
|
+
// 2. Thumbnail Circle
|
|
9
|
+
// 3. Thumbnail Polaroid
|
|
10
|
+
//
|
|
11
|
+
// =============================================================================
|
|
12
|
+
|
|
13
|
+
// =============================================================================
|
|
14
|
+
// Settings
|
|
15
|
+
// =============================================================================
|
|
16
|
+
|
|
17
|
+
$thumbail-rounded-radius: $default-border-radius !default;
|
|
18
|
+
$thumbail-polaroid-border-width: 4px !default;
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
// =============================================================================
|
|
22
|
+
// 1. Thumbnail-rounded
|
|
23
|
+
// =============================================================================
|
|
24
|
+
|
|
25
|
+
.thumbnail-rounded {
|
|
26
|
+
border-radius: $thumbail-rounded-radius;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
// =============================================================================
|
|
31
|
+
// 2. Thumbnail-rounded
|
|
32
|
+
// =============================================================================
|
|
33
|
+
|
|
34
|
+
.thumbnail-circle {
|
|
35
|
+
border-radius: 500px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
// =============================================================================
|
|
40
|
+
// 3. Thumbnail-rounded
|
|
41
|
+
// =============================================================================
|
|
42
|
+
|
|
43
|
+
.thumbnail-polaroid {
|
|
44
|
+
@include box-shadow(0 1px 2px rgba(0,0,0,.25));
|
|
45
|
+
padding: 4px;
|
|
46
|
+
background-color: #fff;
|
|
47
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Buttons style generator
|
|
3
|
+
//
|
|
4
|
+
// @usage:
|
|
5
|
+
// simply include the btn-style mixin into your new button class and pass
|
|
6
|
+
// the desired background color. The mixin takes care of gradients and
|
|
7
|
+
// text color
|
|
8
|
+
// =============================================================================
|
|
9
|
+
|
|
10
|
+
@import "gradients";
|
|
11
|
+
|
|
12
|
+
@mixin btn-style($background-color, $use-gradient: $btn-use-gradient ){
|
|
13
|
+
|
|
14
|
+
$is-saturated: is-saturated($background-color);
|
|
15
|
+
$contrast-color: contrasty($background-color, scale-lightness($background-color, 90%), scale-lightness($background-color, -90%));
|
|
16
|
+
|
|
17
|
+
@if ($is-saturated) {
|
|
18
|
+
border-color: scale-saturation(scale-lightness($background-color, -40%), 75%);
|
|
19
|
+
} @else {
|
|
20
|
+
border-color: scale-lightness($background-color, -40%);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
color: $contrast-color;
|
|
24
|
+
|
|
25
|
+
@if $use-gradient == false {
|
|
26
|
+
background-color: $background-color;
|
|
27
|
+
&:hover { background-color: scale-lightness($background-color, 25%); }
|
|
28
|
+
} @else {
|
|
29
|
+
|
|
30
|
+
@if ($is-saturated) {
|
|
31
|
+
@include vertical-gradient(scale-saturation(scale-lightness($background-color, 30%), 50%), scale-saturation(scale-lightness($background-color, -15%), 50%));
|
|
32
|
+
} @else {
|
|
33
|
+
@include vertical-gradient(scale-lightness($background-color, 30%), scale-lightness($background-color, -15%));
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
filter: "progid:DXImageTransform.Microsoft.gradient(enabled = false)"; // Reset filter for IE
|
|
37
|
+
background-repeat: repeat-x;
|
|
38
|
+
text-shadow: 0 1px 0 rgba(invert($contrast-color), .5);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Each grid breakpoint
|
|
3
|
+
// Generates a class with for each breakpoint
|
|
4
|
+
// =============================================================================
|
|
5
|
+
|
|
6
|
+
@mixin each-grid-breakpoint($class-name, $base-class: false) {
|
|
7
|
+
|
|
8
|
+
@if $base-class == true {
|
|
9
|
+
.#{$class-name}{
|
|
10
|
+
@content;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@each $grid in $grids {
|
|
15
|
+
.#{$grid}-#{$class-name}{
|
|
16
|
+
@include respond-to(#{nth($breakpoints,index($grids, $grid))}-only){
|
|
17
|
+
@content;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Gradient mixins
|
|
3
|
+
// =============================================================================
|
|
4
|
+
|
|
5
|
+
// Vertical gradient
|
|
6
|
+
@mixin vertical-gradient($primary-color, $secondary-color) {
|
|
7
|
+
background-color: $secondary-color;
|
|
8
|
+
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $primary-color), color-stop(100%, $secondary-color));
|
|
9
|
+
background-image: -webkit-linear-gradient($primary-color, $secondary-color);
|
|
10
|
+
background-image: linear-gradient($primary-color, $secondary-color);
|
|
11
|
+
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#{ie-hex-str($primary-color)}', endColorstr='#{ie-hex-str($secondary-color)}')";
|
|
12
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Pixels to rems
|
|
3
|
+
//
|
|
4
|
+
// @usage: @include rem(property, value-in-pixels)
|
|
5
|
+
// @example: @include rem(font-size, 16px); // result: font-size: 16px; font-size: 1rem;
|
|
6
|
+
//
|
|
7
|
+
// =============================================================================
|
|
8
|
+
|
|
9
|
+
@mixin rem($property, $values) {
|
|
10
|
+
|
|
11
|
+
// Placeholder variables
|
|
12
|
+
$shorthand-px: "";
|
|
13
|
+
$shorthand-rem: "";
|
|
14
|
+
|
|
15
|
+
// Parameter $values might be a list of elements
|
|
16
|
+
@each $value in $values
|
|
17
|
+
{
|
|
18
|
+
// Current value is a valid number and greater than 0
|
|
19
|
+
@if $value != auto and $value != 0 {
|
|
20
|
+
$shorthand-px: #{ $shorthand-px + " " + $value };
|
|
21
|
+
$shorthand-rem: #{ $shorthand-rem + " " + ($value / $base-font-size) + rem };
|
|
22
|
+
} @else {
|
|
23
|
+
// Add only 'auto' or 0 to the placeholder variables
|
|
24
|
+
$shorthand-px: #{ $shorthand-px + " " + $value };
|
|
25
|
+
$shorthand-rem: #{ $shorthand-rem + " " + $value };
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
// Output the property in px and rems
|
|
29
|
+
#{$property}: $shorthand-px;
|
|
30
|
+
#{$property}: $shorthand-rem;
|
|
31
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
// =============================================================================
|
|
2
|
+
// Set font size mixins
|
|
3
|
+
//
|
|
4
|
+
// Sets base html font-size and line-height. Use within media queries for
|
|
5
|
+
// responsive typography. Font size is converted into percentage and line-height
|
|
6
|
+
// in a unit-less value.
|
|
7
|
+
//
|
|
8
|
+
// @usage
|
|
9
|
+
// // Base
|
|
10
|
+
// @include set-font-size(24px, 36px);
|
|
11
|
+
// // Responsive design
|
|
12
|
+
// @media only screen and (min-width: 30em) {
|
|
13
|
+
// @include set-font-size(18px, 24px);
|
|
14
|
+
// }
|
|
15
|
+
//
|
|
16
|
+
// =============================================================================
|
|
17
|
+
|
|
18
|
+
@mixin set-font-size($font-size: $base-font-size, $base-line: $base-line-height ) {
|
|
19
|
+
$fs: (($font-size / 1px ) / 16) * 100;
|
|
20
|
+
$bl: ($base-line / $font-size);
|
|
21
|
+
|
|
22
|
+
html {
|
|
23
|
+
font-size: $fs * 1%;
|
|
24
|
+
line-height: $bl;
|
|
25
|
+
}
|
|
26
|
+
}
|