jetpack-rails 0.7.1 → 0.8.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/CHANGELOG +34 -6
- data/lib/jetpack/version.rb +1 -1
- data/vendor/assets/javascripts/jetpack.js +1 -1
- data/vendor/assets/stylesheets/jetpack/{mixins.css.scss → core.css.scss} +16 -25
- data/vendor/assets/stylesheets/jetpack/defaults.css.scss +43 -0
- data/vendor/assets/stylesheets/jetpack/forms.css.scss +99 -68
- data/vendor/assets/stylesheets/jetpack/fractionalize.css.scss +51 -57
- data/vendor/assets/stylesheets/jetpack/interface.css.scss +16 -14
- data/vendor/assets/stylesheets/jetpack/navigation.css.scss +53 -48
- data/vendor/assets/stylesheets/jetpack/presets.css.scss +14 -2
- data/vendor/assets/stylesheets/jetpack/resetize.css.scss +144 -187
- data/vendor/assets/stylesheets/jetpack/tables.css.scss +25 -24
- data/vendor/assets/stylesheets/jetpack/typography.css.scss +81 -77
- data/vendor/assets/stylesheets/jetpack.css.scss +3 -2
- metadata +39 -76
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: d448bb8894e77214fc9db1ba8ef6b0d1f0f25587
|
4
|
+
data.tar.gz: 1d78df2487542a02be9b9013ff28877fa726a52c
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 2668041c5f6f47d2a051c94a19d6589cb1367c3938ac111908ab97272f86c4b4e0d2bd509ed21c619f937fa01beed536d6b6ea924b9cd85af6793a1a7189cfbf
|
7
|
+
data.tar.gz: 34ae606be27595a19f5e9dc26dbb698950eb6ced263aea03ac0ed20fb449380983ea5e602c17eb9110bba3af5a28522e54c8aa7bb2bb5a7f4cff70ff6f39a684
|
data/CHANGELOG
CHANGED
@@ -1,6 +1,38 @@
|
|
1
|
+
TODO: V0.9
|
2
|
+
> Clear out any remaining ideas from Wunderlist
|
3
|
+
> Redo Tabs, Pills, Navigation
|
4
|
+
> Redo Tables
|
5
|
+
> Review the JS
|
6
|
+
|
7
|
+
TODO: V1.0
|
8
|
+
> Use git submodules, so style is available apart from plugin
|
9
|
+
> Finish sexy docs / demo
|
10
|
+
|
11
|
+
|
1
12
|
Changelog:
|
2
|
-
0.
|
3
|
-
-
|
13
|
+
0.8.0:
|
14
|
+
- Significant overhaul to styles:
|
15
|
+
The goal of Jetpack is to be a bootstrap that helps without hurting,
|
16
|
+
meaning it never gets in your way with styles you have to override.
|
17
|
+
While existing versions have done a pretty good job of this, there are
|
18
|
+
still a number of "built-in" styles that get included when you use
|
19
|
+
different components. That's not the best. This release removes all
|
20
|
+
'default' styles and makes sure everything is a mixin or a reset that you
|
21
|
+
include by choice, not by default.
|
22
|
+
- Refined header styles to make them procedural based on base font size.
|
23
|
+
- Renamed `mixins` module as `core`, to indicate that it's required
|
24
|
+
- Removed `font` mixin
|
25
|
+
- Removed `opacity`, `transition`, and `background-clip` mixins
|
26
|
+
- Moved `respond-to` mixin to core.
|
27
|
+
- Added `desktop` option for respond_to
|
28
|
+
- Refined typographic styles.
|
29
|
+
- Updated Resetize to use more recent bits from Normalize.css
|
30
|
+
- Completely redid the Forms module to be all mixins
|
31
|
+
- Add a fluid grid option to fractionalize
|
32
|
+
- Convert all typography settings to mixins so you can granularly add/remove just the bits you want
|
33
|
+
- Changed interface module to all mixins
|
34
|
+
- Added "Defaults" module for grabbing the old selectors
|
35
|
+
- Changed div.alert_message to div.message in defaults
|
4
36
|
|
5
37
|
0.7.0:
|
6
38
|
- Added `nav_link_to` helper for creating navigation links.
|
@@ -8,18 +40,14 @@ Changelog:
|
|
8
40
|
- Added `$responsive` flag to toggle responsive grid throughout an application.
|
9
41
|
- Changed Fractionalize to use `respond-to` mixin.
|
10
42
|
- Adjusted typography settings to make H1s not so crazy.
|
11
|
-
|
12
43
|
0.6.4:
|
13
44
|
- Fixed an accidental regression in 0.6.3.
|
14
45
|
- Added `respond-to` mixin.
|
15
|
-
|
16
46
|
0.6.3:
|
17
47
|
- Adjusted fractionalize to use 'device' width instead of 'width' in media queries.
|
18
|
-
|
19
48
|
0.6.2:
|
20
49
|
- Adjusted resetize style of disabled elements.
|
21
50
|
- Added definition of disabled elements to forms stylesheet and matched to link button styles.
|
22
|
-
|
23
51
|
0.6.1:
|
24
52
|
- Added image max-width to grid containers so images will automatically downscale as needed.
|
25
53
|
|
data/lib/jetpack/version.rb
CHANGED
@@ -1,6 +1,18 @@
|
|
1
1
|
// UNIVERSAL MIXINS
|
2
2
|
@mixin clearfix { &:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; overflow:hidden; } }
|
3
3
|
|
4
|
+
@mixin respond-to($media) {
|
5
|
+
@if $media == desktop {
|
6
|
+
@media screen and (min-width: 1024px) { @content; }
|
7
|
+
}
|
8
|
+
@if $media == tablet {
|
9
|
+
@media screen and (device-width: 768px), screen and (min-width: 768px) and (max-width: 1023px) { @content; }
|
10
|
+
}
|
11
|
+
@else if $media == mobile {
|
12
|
+
@media screen and (device-width: 480px), screen and (max-width: 767px) { @content; }
|
13
|
+
}
|
14
|
+
}
|
15
|
+
|
4
16
|
@mixin border-radius( $radius: 5px) {
|
5
17
|
-webkit-border-radius: $radius;
|
6
18
|
-moz-border-radius: $radius;
|
@@ -13,13 +25,6 @@
|
|
13
25
|
box-shadow: $shadow;
|
14
26
|
}
|
15
27
|
|
16
|
-
@mixin font( $size: $base_size, $stack: $base_font, $weight: $base_weight, $line_height: $baseline ) {
|
17
|
-
font-size: $size;
|
18
|
-
font-family: $stack;
|
19
|
-
font-weight: $weight;
|
20
|
-
line-height: $line_height;
|
21
|
-
}
|
22
|
-
|
23
28
|
@mixin gradient($startColor: #555, $endColor: #333) {
|
24
29
|
background-color: $endColor;
|
25
30
|
background-repeat: repeat-x;
|
@@ -39,22 +44,8 @@
|
|
39
44
|
border-color: darken($primaryColor, 10%) darken($secondaryColor, 8%) darken($secondaryColor, 20%);
|
40
45
|
}
|
41
46
|
|
42
|
-
@mixin
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
opacity: $opacity / 100;
|
47
|
-
}
|
48
|
-
|
49
|
-
@mixin transition($transition) {
|
50
|
-
-webkit-transition: $transition;
|
51
|
-
-moz-transition: $transition;
|
52
|
-
transition: $transition;
|
53
|
-
}
|
54
|
-
|
55
|
-
// Background clipping
|
56
|
-
@mixin background-clip($clip) {
|
57
|
-
-webkit-background-clip: $clip;
|
58
|
-
-moz-background-clip: $clip;
|
59
|
-
background-clip: $clip;
|
47
|
+
@mixin gutter( $side: top, $style: $light-line, $size: $baseline/2 ) {
|
48
|
+
border-#{$side}: $style;
|
49
|
+
margin-#{$side}: $size;
|
50
|
+
padding-#{$side}: $size;
|
60
51
|
}
|
@@ -0,0 +1,43 @@
|
|
1
|
+
/* --------------------------------------------------
|
2
|
+
Jetpack Defaults
|
3
|
+
================
|
4
|
+
|
5
|
+
This file can optionally be added after the rest of
|
6
|
+
Jetpack is loaded.
|
7
|
+
|
8
|
+
This is one of only two modules in Jetpack that include
|
9
|
+
*selectors*, the other module being Resetize.
|
10
|
+
|
11
|
+
So if you don't count the CSS reset (I don't), that
|
12
|
+
makes this the only file that will actually affect
|
13
|
+
your page when it's included.
|
14
|
+
|
15
|
+
This file has two purposes:
|
16
|
+
|
17
|
+
1. If you like the basic styles I've set up here,
|
18
|
+
you can just import this and GO.
|
19
|
+
|
20
|
+
2. If you don't like the basic styles I've set up
|
21
|
+
here, don't import this file. Instead you can
|
22
|
+
copy/paste it into your project and then change
|
23
|
+
as desired, or just ignore it and make use of
|
24
|
+
the jetpack mixins without any default styles.
|
25
|
+
|
26
|
+
Have fun, happy coding!
|
27
|
+
-------------------------------------------------- */
|
28
|
+
// STYLE INCLUDES
|
29
|
+
@include text;
|
30
|
+
@include headings;
|
31
|
+
@include lists;
|
32
|
+
@include preformatting;
|
33
|
+
@include tabs-pills;
|
34
|
+
@include pagination;
|
35
|
+
@include tables;
|
36
|
+
|
37
|
+
// JS DEFAULT STYLES
|
38
|
+
@include js-styles;
|
39
|
+
|
40
|
+
// UBIQUITOUS DEFAULTS
|
41
|
+
span.label { @include label; }
|
42
|
+
a.button, span.button { @include button; }
|
43
|
+
div.message { @include message; }
|
@@ -2,89 +2,120 @@
|
|
2
2
|
* Influenced by Twitter Bootstrap, Normalize, and Formalize Projects
|
3
3
|
* ---------------------------------------------------------------------------------------- */
|
4
4
|
|
5
|
-
//
|
6
|
-
|
7
|
-
|
5
|
+
// NOTES
|
6
|
+
|
7
|
+
// List of HTML Input Types
|
8
|
+
// TEXTY INPUTS (things that should be laid out like text)
|
9
|
+
// email
|
10
|
+
// password
|
11
|
+
// search
|
12
|
+
// tel
|
13
|
+
// text
|
14
|
+
// url
|
15
|
+
// NON-TEXTY INPUTS (things that should be laid out differently)
|
16
|
+
// button
|
17
|
+
// checkbox
|
18
|
+
// color
|
19
|
+
// date
|
20
|
+
// datetime
|
21
|
+
// datetime-local
|
22
|
+
// file
|
23
|
+
// hidden
|
24
|
+
// image
|
25
|
+
// month
|
26
|
+
// number
|
27
|
+
// radio
|
28
|
+
// range
|
29
|
+
// reset
|
30
|
+
// submit
|
31
|
+
// time
|
32
|
+
// week
|
8
33
|
|
9
|
-
// Adjustment to disabled elements to match link buttons
|
10
|
-
button[disabled],
|
11
|
-
input[disabled],
|
12
|
-
select[disabled],
|
13
|
-
select[disabled] option,
|
14
|
-
select[disabled] optgroup,
|
15
|
-
textarea[disabled] {
|
16
|
-
color: $light2;
|
17
|
-
}
|
18
34
|
|
35
|
+
// SELECTOR HELPERS
|
36
|
+
@mixin basic-inputs {
|
37
|
+
input[type=email],input[type=password],input[type=search],
|
38
|
+
input[type=tel],input[type=text],input[type=url],textarea {
|
39
|
+
@content;
|
40
|
+
}
|
41
|
+
}
|
19
42
|
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
43
|
+
@mixin text-inputs {
|
44
|
+
input[type=email],input[type=password],input[type=search],
|
45
|
+
input[type=tel],input[type=text],input[type=url],input[type=date],
|
46
|
+
input[type=datetime],input[type=datetime-local],input[type=month],
|
47
|
+
input[type=number],input[type=time],input[type=week ],select,textarea {
|
48
|
+
@content;
|
25
49
|
}
|
50
|
+
}
|
26
51
|
|
27
|
-
|
28
|
-
label { display: block; text-align: right; height: 2em; font-weight: 700;
|
29
|
-
&.collection_radio,
|
30
|
-
&.collection_check { width: auto; float: none; display: inline; margin-left: $baseline / 4; }
|
31
|
-
}
|
52
|
+
// FORM COMPONENTS
|
32
53
|
|
33
|
-
|
34
|
-
|
35
|
-
|
54
|
+
// Form Element Appearance
|
55
|
+
@mixin input-style-basic { @include border-radius(4px); border: 1px solid $light2; box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1); color: $dark1; }
|
56
|
+
@mixin form-style-basic {
|
57
|
+
margin-bottom: $baseline; @include clearfix;
|
58
|
+
span.hint { color: $light2; }
|
59
|
+
span.error { color: $error2; }
|
60
|
+
div.field_with_errors { background: $error1; }
|
36
61
|
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
62
|
+
// Adjustment to disabled elements to match link buttons
|
63
|
+
button[disabled], input[disabled], select[disabled],
|
64
|
+
select[disabled] option, select[disabled] optgroup,
|
65
|
+
textarea[disabled] {
|
66
|
+
color: $light2;
|
41
67
|
}
|
42
|
-
|
43
|
-
span.hint { display: block; margin-top: $baseline / 4; clear: both; color: $light2; font-size: $base_size - 1px; }
|
44
|
-
input[type="submit"] { margin-bottom: $baseline / 2; }
|
45
68
|
}
|
46
69
|
|
47
|
-
//
|
48
|
-
|
49
|
-
|
50
|
-
|
70
|
+
// Input Groups (div.input)
|
71
|
+
@mixin input-group-base {
|
72
|
+
@include clearfix; width: 100%; padding: $baseline/2 0;
|
73
|
+
label.control-label { display: block; font-weight: 700; }
|
74
|
+
label.boolean { width: auto; font-weight: normal;
|
75
|
+
input { margin-right: 8px; }
|
51
76
|
}
|
77
|
+
label.checkbox, label.radio { float: left; margin-right: 18px;
|
78
|
+
input { margin-right: 4px; }
|
79
|
+
}
|
80
|
+
}
|
52
81
|
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
input[type="text"], input[type="email"], input[type="password"], select, textarea { float: left; width: 80%; }
|
57
|
-
|
58
|
-
&.radio, &.check_boxes {
|
59
|
-
label { float: none; }
|
60
|
-
}
|
61
|
-
|
62
|
-
&.date, &.time, &.datetime {
|
63
|
-
select { width: auto; float: none; }
|
64
|
-
}
|
82
|
+
@mixin input-group-horizontal {
|
83
|
+
@include input-group-base;
|
65
84
|
|
66
|
-
|
67
|
-
}
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
div.inset { margin-left: 20%; }
|
85
|
+
@include basic-inputs { float: left; width: 78%; }
|
86
|
+
label.control-label { width: 18%; float: left; margin-right: 2%; text-align: right; }
|
87
|
+
label.boolean { float: left; width: auto; margin-left: 20%; }
|
88
|
+
span.hint, span.error { float: left; margin-left: 20%; }
|
72
89
|
}
|
73
90
|
|
74
|
-
|
75
|
-
|
91
|
+
@mixin input-group-vertical {
|
92
|
+
@include input-group-base;
|
93
|
+
@include basic-inputs { width: 100%; }
|
94
|
+
}
|
76
95
|
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
96
|
+
// WHOLE FORMS
|
97
|
+
@mixin form-horizontal {
|
98
|
+
@include form-style-basic;
|
99
|
+
@include text-inputs { @include input-style-basic; }
|
100
|
+
div.input { @include input-group-horizontal; }
|
101
|
+
div.submit {
|
102
|
+
margin-top: $baseline/2; padding-top: $baseline/2; border-top: 1px solid $light1;
|
103
|
+
float: left; margin-left: 20%; width: 80%;
|
104
|
+
}
|
105
|
+
}
|
85
106
|
|
86
|
-
|
87
|
-
|
88
|
-
|
107
|
+
@mixin form-vertical {
|
108
|
+
@include form-style-basic;
|
109
|
+
@include text-inputs { @include input-style-basic; }
|
110
|
+
div.input { @include input-group-vertical; }
|
111
|
+
div.submit {
|
112
|
+
margin-top: $baseline/2; padding-top: $baseline/2; border-top: 1px solid $light1;
|
113
|
+
width: 100%;
|
89
114
|
}
|
90
|
-
}
|
115
|
+
}
|
116
|
+
|
117
|
+
@mixin form-horizontal-responsive {
|
118
|
+
@include respond-to(desktop) { @include form-horizontal; }
|
119
|
+
@include respond-to(tablet) { @include form-horizontal; }
|
120
|
+
@include respond-to(mobile) { @include form-vertical; }
|
121
|
+
}
|
@@ -3,7 +3,7 @@
|
|
3
3
|
Fractionalize.CSS
|
4
4
|
A css framework that lets you setup many different
|
5
5
|
fractional grid layouts quickly and easily.
|
6
|
-
|
6
|
+
|
7
7
|
WHY?
|
8
8
|
Grab just about any other framework and try this:
|
9
9
|
Create a layout using four equal colums.
|
@@ -13,13 +13,13 @@
|
|
13
13
|
you're using that framework you can either divide the page
|
14
14
|
equally into odd increments, or even increments, but not
|
15
15
|
both.
|
16
|
-
|
16
|
+
|
17
17
|
That's lame. Hence, this framework isn't about using a
|
18
18
|
fancy schmancy generator and agonizing over how many
|
19
19
|
columns you should ask it for, it's about being able
|
20
20
|
to quickly and easily divide the page into whatever
|
21
21
|
fractions you want at any time.
|
22
|
-
|
22
|
+
|
23
23
|
Inspired by Blueprint CSS, and based on Blueprint
|
24
24
|
terminology and use.
|
25
25
|
|
@@ -28,27 +28,8 @@
|
|
28
28
|
converted to leverage the power of SASS to make it
|
29
29
|
even better.
|
30
30
|
http://www.sass-lang.com
|
31
|
-
|
32
|
-
-------------------------------------------------- */
|
33
|
-
|
34
|
-
// LAYOUT DEFAULTS
|
35
|
-
// Make sure the body always fills the page.
|
36
|
-
* { margin: 0; }
|
37
|
-
html, body { height: 100%; }
|
38
31
|
|
39
|
-
|
40
|
-
$tablet: 760px;
|
41
|
-
$mobile: 280px;
|
42
|
-
$margin: 20px;
|
43
|
-
|
44
|
-
@mixin respond-to($media) {
|
45
|
-
@if $media == tablet {
|
46
|
-
@media screen and (device-width: 768px), screen and (min-width: 768px) and (max-width: 1023px) { @content; }
|
47
|
-
}
|
48
|
-
@else if $media == mobile {
|
49
|
-
@media screen and (device-width: 480px), screen and (max-width: 767px) { @content; }
|
50
|
-
}
|
51
|
-
}
|
32
|
+
-------------------------------------------------- */
|
52
33
|
|
53
34
|
@mixin container {
|
54
35
|
width: $desktop;
|
@@ -61,59 +42,41 @@ $margin: 20px;
|
|
61
42
|
@include clearfix;
|
62
43
|
}
|
63
44
|
|
64
|
-
@function
|
65
|
-
|
66
|
-
@return double_columns( $denom, $width )
|
67
|
-
}
|
68
|
-
@else {
|
69
|
-
@return regular_columns( $denom, $width )
|
70
|
-
}
|
71
|
-
}
|
72
|
-
|
73
|
-
@function regular_columns( $denom, $width: $desktop ) {
|
74
|
-
$gutters: $denom - 1;
|
75
|
-
$total_gutter: $gutters * $margin;
|
76
|
-
$column_area: $width - $total_gutter;
|
77
|
-
@return $column_area / $denom;
|
78
|
-
}
|
79
|
-
|
80
|
-
@function double_columns( $denom, $width: $landscape ) {
|
81
|
-
$double: $denom / 2;
|
82
|
-
$gutters: $double * 2;
|
83
|
-
$total_gutter: $gutters * $margin;
|
84
|
-
$column_area: $width - $total_gutter;
|
85
|
-
@return $column_area / $double;
|
86
|
-
}
|
87
|
-
|
88
|
-
|
89
|
-
@function col_span( $num, $denom, $width: $desktop ) {
|
90
|
-
$column_size: col_size( $denom, $width );
|
45
|
+
@function col-span( $num, $denom, $width: $desktop ) {
|
46
|
+
$column_size: col-size( $denom, $width );
|
91
47
|
$column_area: $column_size * $num;
|
92
48
|
$interior_margins: ($num - 1) * $margin;
|
93
49
|
@return $column_area + $interior_margins;
|
94
50
|
}
|
95
51
|
|
52
|
+
@function col-size( $denom, $width: $desktop ) {
|
53
|
+
$gutters: $denom - 1;
|
54
|
+
$total_gutter: $gutters * $margin;
|
55
|
+
$column_area: $width - $total_gutter;
|
56
|
+
@return $column_area / $denom;
|
57
|
+
}
|
58
|
+
|
96
59
|
@mixin grid( $num, $denom ) {
|
97
60
|
display: block;
|
98
61
|
float: left;
|
99
62
|
margin-left: $margin;
|
100
|
-
width:
|
63
|
+
width: col-span( $num, $denom );
|
101
64
|
&:first-child { margin-left: 0; }
|
102
65
|
@if $responsive {
|
103
|
-
@include respond-to(tablet) { width:
|
66
|
+
@include respond-to(tablet) { width: col-span( $num, $denom, $tablet ); }
|
104
67
|
@include respond-to(mobile) { width: $mobile; margin-left: 0; }
|
105
68
|
}
|
106
69
|
img { max-width: 100%; }
|
107
70
|
}
|
108
71
|
|
109
72
|
@mixin prepend( $num, $denom ) {
|
110
|
-
margin-left:
|
111
|
-
&:first-child { margin-left:
|
73
|
+
margin-left: col-span( $num, $denom ) + $margin;
|
74
|
+
&:first-child { margin-left: col-span( $num, $denom ) + $margin; }
|
112
75
|
}
|
113
76
|
|
114
77
|
@mixin append( $num, $denom ) {
|
115
|
-
margin-right:
|
116
|
-
&:first-child { margin-right:
|
78
|
+
margin-right: col-span( $num, $denom ) + $margin;
|
79
|
+
&:first-child { margin-right: col-span( $num, $denom ) + $margin; }
|
117
80
|
}
|
118
81
|
|
119
82
|
@mixin col_border( $thickness: 1px, $style: solid, $color: #CCC ) {
|
@@ -124,4 +87,35 @@ $margin: 20px;
|
|
124
87
|
border-left: $thickness $style $color;
|
125
88
|
}
|
126
89
|
|
127
|
-
|
90
|
+
// FLUID VERSION
|
91
|
+
$fluid-margin: 1%;
|
92
|
+
$fluid-width: 96%;
|
93
|
+
|
94
|
+
@mixin fluid-container {
|
95
|
+
width: $fluid-width; padding: 0 (100%-$fluid-width)/2; @include clearfix;
|
96
|
+
}
|
97
|
+
|
98
|
+
@mixin fluid-grid( $num, $denom ) {
|
99
|
+
display: block; float: left;
|
100
|
+
margin-left: $fluid-margin;
|
101
|
+
width: fluid-col-span( $num, $denom );
|
102
|
+
&:first-child { margin-left: 0; }
|
103
|
+
@if $responsive {
|
104
|
+
@include respond-to(mobile) { width: 100%; margin-left: 0; }
|
105
|
+
}
|
106
|
+
img { max-width: 100%; }
|
107
|
+
}
|
108
|
+
|
109
|
+
@function fluid-col-span( $num, $denom ) {
|
110
|
+
$column_size: fluid-col-size( $denom );
|
111
|
+
$column_area: $column_size * $num;
|
112
|
+
$interior_margins: ($num - 1) * $fluid-margin;
|
113
|
+
@return $column_area + $interior_margins;
|
114
|
+
}
|
115
|
+
|
116
|
+
@function fluid-col-size( $denom ) {
|
117
|
+
$gutters: $denom - 1;
|
118
|
+
$total_gutter: $gutters * $fluid-margin;
|
119
|
+
$column_area: 100% - $total_gutter;
|
120
|
+
@return $column_area / $denom;
|
121
|
+
}
|
@@ -4,7 +4,7 @@
|
|
4
4
|
|
5
5
|
|
6
6
|
// LABELS
|
7
|
-
|
7
|
+
@mixin label {
|
8
8
|
display: inline-block; padding: 1px 5px; background: $light2; color: $white; @include border-radius(3px);
|
9
9
|
&.success { background: $success2; }
|
10
10
|
&.notice { background: $notice2; color: $dark2; }
|
@@ -12,7 +12,7 @@ span.label {
|
|
12
12
|
}
|
13
13
|
|
14
14
|
// BUTTONS
|
15
|
-
|
15
|
+
@mixin button {
|
16
16
|
display: inline-block;
|
17
17
|
vertical-align: baseline;
|
18
18
|
cursor: pointer;
|
@@ -32,25 +32,26 @@ a.button, span.button {
|
|
32
32
|
&.small { padding: 0px 6px; font-size: 11px; line-height: 1.4; }
|
33
33
|
}
|
34
34
|
|
35
|
-
|
36
|
-
|
37
|
-
div.alert_message {
|
35
|
+
// MESSAGES
|
36
|
+
@mixin message {
|
38
37
|
@include border-radius(4px); color: $white; padding: 7px 12px; margin-bottom: $baseline; @include box-shadow;
|
39
38
|
&.success { @include buttonize( lighten( $success2, 15% ), $success2); text-shadow: 0px -1px darken( $success2, 15% ); }
|
40
39
|
&.notice { @include buttonize( lighten( $notice2, 15% ), $notice2); color: $dark2; text-shadow: 0px 1px $notice1; }
|
41
40
|
&.error, &.alert { @include buttonize( lighten( $error2, 15% ), $error2); text-shadow: 0px -1px darken( $error2, 15% ); }
|
42
|
-
a.close {
|
41
|
+
a.close { font-size: 18px; font-weight: 700; line-height: 13.5px; float: right; text-decoration: none; opacity: 0.2; color: $black; text-shadow: 0px 1px $white;
|
43
42
|
&:hover { opacity: 0.4; }
|
44
43
|
}
|
45
44
|
}
|
46
45
|
|
47
|
-
//
|
48
|
-
|
49
|
-
|
50
|
-
div.
|
46
|
+
// STYLES FOR JETPACK JS
|
47
|
+
@mixin js-styles {
|
48
|
+
// MODALS
|
49
|
+
div.modal_bg { display: none; position: fixed; background: #000; opacity: 0.8; z-index: 1000; top: 0; left: 0; bottom: 0; right: 0; }
|
50
|
+
div.modal { display: none; top: 40px; left: 50%; margin-left: -359px; width: 700px; background: $dark2; position: absolute; z-index: 1001; padding: $baseline; }
|
51
|
+
div.modal .close_modal { font-size: 22px; line-height: .5; position: absolute; top: 8px; right: 11px; color: #aaa; text-shadow: 0 -1px 1px rbga(0,0,0,.6); font-weight: bold; cursor: pointer; }
|
51
52
|
|
52
|
-
// TIPSY
|
53
|
-
.tipsy { font-size: 11px; position: absolute; padding: 5px; z-index: 100000; }
|
53
|
+
// TIPSY
|
54
|
+
.tipsy { font-size: 11px; position: absolute; padding: 5px; z-index: 100000; }
|
54
55
|
.tipsy-inner { background-color: $black; color: $white; max-width: 200px; padding: 5px 8px 4px 8px; text-align: center; @include border-radius(4px); }
|
55
56
|
.tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }
|
56
57
|
/* Rules to colour arrows */
|
@@ -67,5 +68,6 @@ div.modal .close_modal { font-size: 22px; line-height: .5; position: absolute; t
|
|
67
68
|
.tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
|
68
69
|
.tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }
|
69
70
|
|
70
|
-
// POPOVERS
|
71
|
-
.popover { display: none; }
|
71
|
+
// POPOVERS
|
72
|
+
.popover { display: none; }
|
73
|
+
}
|