atlas_assets 0.0.17 → 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- data/Gemfile.lock +1 -1
- data/README.md +2 -0
- data/docs/_layouts/default.html +14 -0
- data/docs/_posts/2013-05-17-grid.md +0 -18
- data/lib/assets/stylesheets/atlas_assets/_boxes.scss +21 -0
- data/lib/assets/stylesheets/{buttons.css.scss → atlas_assets/_buttons.scss} +8 -7
- data/lib/assets/stylesheets/atlas_assets/_code.scss +7 -0
- data/lib/assets/stylesheets/{flash.css.scss → atlas_assets/_flash.scss} +10 -6
- data/lib/assets/stylesheets/{fonts.css.scss → atlas_assets/_fonts.scss} +8 -12
- data/lib/assets/stylesheets/atlas_assets/_forms.scss +546 -0
- data/lib/assets/stylesheets/atlas_assets/_grid.scss +30 -0
- data/lib/assets/stylesheets/{icons.css.scss → atlas_assets/_icons.scss} +0 -0
- data/lib/assets/stylesheets/{lists.css.scss → atlas_assets/_lists.scss} +6 -14
- data/lib/assets/stylesheets/atlas_assets/_mixins.scss +356 -0
- data/lib/assets/stylesheets/{navbar.css.scss → atlas_assets/_navbar.scss} +8 -8
- data/lib/assets/stylesheets/atlas_assets/_reset.scss +213 -0
- data/lib/assets/stylesheets/atlas_assets/_responsive-767.scss +74 -0
- data/lib/assets/stylesheets/atlas_assets/_responsive-768-979.scss +5 -0
- data/lib/assets/stylesheets/atlas_assets/_responsive-utilities.scss +49 -0
- data/lib/assets/stylesheets/{helpers.css.scss → atlas_assets/_utilities.scss} +52 -10
- data/lib/assets/stylesheets/atlas_assets/_variables.scss +70 -0
- data/lib/assets/stylesheets/atlas_assets.scss +18 -0
- data/lib/atlas_assets/version.rb +1 -1
- metadata +19 -13
- data/lib/assets/stylesheets/atlas_assets.css +0 -11
- data/lib/assets/stylesheets/boxes.css.scss +0 -23
- data/lib/assets/stylesheets/forms.css.scss +0 -861
- data/lib/assets/stylesheets/grid.css.scss +0 -762
- data/lib/assets/stylesheets/pre.css.scss +0 -7
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
@-ms-viewport{
|
|
2
|
+
width: device-width;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.hidden {
|
|
6
|
+
display: none;
|
|
7
|
+
visibility: hidden;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.visible-phone { display: none !important; }
|
|
11
|
+
.visible-tablet { display: none !important; }
|
|
12
|
+
.hidden-phone { }
|
|
13
|
+
.hidden-tablet { }
|
|
14
|
+
.hidden-desktop { display: none !important; }
|
|
15
|
+
.visible-desktop { display: inherit !important; }
|
|
16
|
+
|
|
17
|
+
@media (min-width: 768px) and (max-width: 979px) {
|
|
18
|
+
.hidden-desktop { display: inherit !important; }
|
|
19
|
+
.visible-desktop { display: none !important ; }
|
|
20
|
+
.visible-tablet { display: inherit !important; }
|
|
21
|
+
.hidden-tablet { display: none !important; }
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@media (max-width: 767px) {
|
|
25
|
+
.hidden-desktop { display: inherit !important; }
|
|
26
|
+
.visible-desktop { display: none !important; }
|
|
27
|
+
.visible-phone { display: inherit !important; } // Use inherit to restore previous behavior
|
|
28
|
+
.hidden-phone { display: none !important; }
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.visible-print { display: none !important; }
|
|
32
|
+
.hidden-print { }
|
|
33
|
+
|
|
34
|
+
@media print {
|
|
35
|
+
.visible-print { display: inherit !important; }
|
|
36
|
+
.hidden-print { display: none !important; }
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.clearfix {
|
|
40
|
+
@include clearfix();
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.hide-text {
|
|
44
|
+
@include hide-text();
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.input-block-level {
|
|
48
|
+
@include input-block-level();
|
|
49
|
+
}
|
|
@@ -1,3 +1,20 @@
|
|
|
1
|
+
/* Visibility
|
|
2
|
+
____________________________________________________________ */
|
|
3
|
+
|
|
4
|
+
.hide {
|
|
5
|
+
display: none;
|
|
6
|
+
}
|
|
7
|
+
.show {
|
|
8
|
+
display: block;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.invisible {
|
|
12
|
+
visibility: hidden;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/* Borders
|
|
16
|
+
____________________________________________________________ */
|
|
17
|
+
|
|
1
18
|
.bluetop {
|
|
2
19
|
border-top: 2px solid #86aac8;
|
|
3
20
|
}
|
|
@@ -6,12 +23,6 @@
|
|
|
6
23
|
border-bottom: 2px solid #86aac8;
|
|
7
24
|
}
|
|
8
25
|
|
|
9
|
-
.block {
|
|
10
|
-
box-sizing:border-box;
|
|
11
|
-
-moz-box-sizing:border-box;
|
|
12
|
-
display: block;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
26
|
/* Spacing
|
|
16
27
|
____________________________________________________________ */
|
|
17
28
|
|
|
@@ -31,12 +42,14 @@ ____________________________________________________________ */
|
|
|
31
42
|
margin-top: 80px;
|
|
32
43
|
}
|
|
33
44
|
|
|
34
|
-
/*
|
|
45
|
+
/* Float
|
|
35
46
|
____________________________________________________________ */
|
|
36
47
|
|
|
37
|
-
.
|
|
38
|
-
|
|
39
|
-
|
|
48
|
+
.pull-right {
|
|
49
|
+
float: right;
|
|
50
|
+
}
|
|
51
|
+
.pull-left {
|
|
52
|
+
float: left;
|
|
40
53
|
}
|
|
41
54
|
|
|
42
55
|
/* Align
|
|
@@ -52,4 +65,33 @@ ____________________________________________________________ */
|
|
|
52
65
|
|
|
53
66
|
.align-center {
|
|
54
67
|
text-align: center;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
/* Columns
|
|
71
|
+
____________________________________________________________ */
|
|
72
|
+
|
|
73
|
+
.left-column, .right-column {
|
|
74
|
+
width: 50%;
|
|
75
|
+
float: left;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* Other
|
|
79
|
+
____________________________________________________________ */
|
|
80
|
+
|
|
81
|
+
.clearfix {
|
|
82
|
+
@include clearfix();
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.hide-text {
|
|
86
|
+
@include hide-text();
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.input-block-level {
|
|
90
|
+
@include input-block-level();
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.block {
|
|
94
|
+
box-sizing:border-box;
|
|
95
|
+
-moz-box-sizing:border-box;
|
|
96
|
+
display: block;
|
|
55
97
|
}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
/* Colors
|
|
2
|
+
------------------------------------------------------- */
|
|
3
|
+
|
|
4
|
+
$red: #ac2f3c !default;
|
|
5
|
+
$lightest_red: #f1d4d4 !default;
|
|
6
|
+
|
|
7
|
+
$blue: #2c7db1 !default;
|
|
8
|
+
$lighter_blue: #a9cadf !default;
|
|
9
|
+
$lightest_blue: #e0eaed !default;
|
|
10
|
+
|
|
11
|
+
$green: #91b35b !default;
|
|
12
|
+
$lightest_yellow: #f3f3c3 !default;
|
|
13
|
+
|
|
14
|
+
$darkest_gray: #242424 !default;
|
|
15
|
+
$dark_gray: #333 !default;
|
|
16
|
+
$medium_gray: #808080 !default;
|
|
17
|
+
$gray: #d1d1d1 !default;
|
|
18
|
+
$light_gray: #e0e0e0 !default;
|
|
19
|
+
$lighter_gray: #ececec !default;
|
|
20
|
+
$lightest_gray: #f6f6f6 !default;
|
|
21
|
+
$white: #fff !default;
|
|
22
|
+
|
|
23
|
+
/* Fonts
|
|
24
|
+
------------------------------------------------------- */
|
|
25
|
+
|
|
26
|
+
$menuFontFamily: Lato, Helvetica, sans-serif !default;
|
|
27
|
+
$sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
|
|
28
|
+
$serifFontFamily: Georgia, "Times New Roman", Times, serif !default;
|
|
29
|
+
$monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace !default;
|
|
30
|
+
|
|
31
|
+
$baseFontSize: 14px !default;
|
|
32
|
+
$baseLineHeight: 20px !default;
|
|
33
|
+
|
|
34
|
+
/* Boxes
|
|
35
|
+
------------------------------------------------------- */
|
|
36
|
+
|
|
37
|
+
$boxPaddingX: 15px;
|
|
38
|
+
|
|
39
|
+
/* Forms
|
|
40
|
+
------------------------------------------------------- */
|
|
41
|
+
|
|
42
|
+
$inputHeight: $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
|
|
43
|
+
$inputBorderRadius: 4px;
|
|
44
|
+
$inputBackground: $white;
|
|
45
|
+
$inputBorder: $light_gray;
|
|
46
|
+
$placeholderColor: $medium_gray;
|
|
47
|
+
$horizontalComponentOffset: 180px;
|
|
48
|
+
|
|
49
|
+
/* Grid
|
|
50
|
+
------------------------------------------------------- */
|
|
51
|
+
|
|
52
|
+
$gridColumns: 12 !default;
|
|
53
|
+
$gridColumnWidth: 60px !default;
|
|
54
|
+
$gridGutterWidth: 20px !default;
|
|
55
|
+
$gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)) !default;
|
|
56
|
+
|
|
57
|
+
// 768px-979px
|
|
58
|
+
$gridColumnWidth768: 42px !default;
|
|
59
|
+
$gridGutterWidth768: 20px !default;
|
|
60
|
+
$gridRowWidth768: ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1)) !default;
|
|
61
|
+
|
|
62
|
+
/* Fluid grid
|
|
63
|
+
------------------------------------------------------- */
|
|
64
|
+
|
|
65
|
+
$fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth) !default;
|
|
66
|
+
$fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth) !default;
|
|
67
|
+
|
|
68
|
+
// 768px-979px
|
|
69
|
+
$fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768) !default;
|
|
70
|
+
$fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768) !default;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
@import "atlas_assets/variables";
|
|
2
|
+
@import "atlas_assets/mixins";
|
|
3
|
+
@import "atlas_assets/reset";
|
|
4
|
+
@import "atlas_assets/fonts";
|
|
5
|
+
@import "atlas_assets/grid";
|
|
6
|
+
@import "atlas_assets/navbar";
|
|
7
|
+
@import "atlas_assets/utilities";
|
|
8
|
+
@import "atlas_assets/icons";
|
|
9
|
+
@import "atlas_assets/boxes";
|
|
10
|
+
@import "atlas_assets/buttons";
|
|
11
|
+
@import "atlas_assets/lists";
|
|
12
|
+
@import "atlas_assets/code";
|
|
13
|
+
@import "atlas_assets/flash";
|
|
14
|
+
@import "atlas_assets/forms";
|
|
15
|
+
|
|
16
|
+
@import "atlas_assets/responsive-utilities";
|
|
17
|
+
@import "atlas_assets/responsive-768-979";
|
|
18
|
+
@import "atlas_assets/responsive-767";
|
data/lib/atlas_assets/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: atlas_assets
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0
|
|
4
|
+
version: 0.1.0
|
|
5
5
|
prerelease:
|
|
6
6
|
platform: ruby
|
|
7
7
|
authors:
|
|
@@ -73,18 +73,24 @@ files:
|
|
|
73
73
|
- lib/assets/javascripts/pusher.js
|
|
74
74
|
- lib/assets/javascripts/string.js
|
|
75
75
|
- lib/assets/javascripts/underscore.js
|
|
76
|
-
- lib/assets/stylesheets/atlas_assets.
|
|
77
|
-
- lib/assets/stylesheets/
|
|
78
|
-
- lib/assets/stylesheets/
|
|
79
|
-
- lib/assets/stylesheets/
|
|
80
|
-
- lib/assets/stylesheets/
|
|
81
|
-
- lib/assets/stylesheets/
|
|
82
|
-
- lib/assets/stylesheets/
|
|
83
|
-
- lib/assets/stylesheets/
|
|
84
|
-
- lib/assets/stylesheets/
|
|
85
|
-
- lib/assets/stylesheets/
|
|
86
|
-
- lib/assets/stylesheets/
|
|
87
|
-
- lib/assets/stylesheets/
|
|
76
|
+
- lib/assets/stylesheets/atlas_assets.scss
|
|
77
|
+
- lib/assets/stylesheets/atlas_assets/_boxes.scss
|
|
78
|
+
- lib/assets/stylesheets/atlas_assets/_buttons.scss
|
|
79
|
+
- lib/assets/stylesheets/atlas_assets/_code.scss
|
|
80
|
+
- lib/assets/stylesheets/atlas_assets/_flash.scss
|
|
81
|
+
- lib/assets/stylesheets/atlas_assets/_fonts.scss
|
|
82
|
+
- lib/assets/stylesheets/atlas_assets/_forms.scss
|
|
83
|
+
- lib/assets/stylesheets/atlas_assets/_grid.scss
|
|
84
|
+
- lib/assets/stylesheets/atlas_assets/_icons.scss
|
|
85
|
+
- lib/assets/stylesheets/atlas_assets/_lists.scss
|
|
86
|
+
- lib/assets/stylesheets/atlas_assets/_mixins.scss
|
|
87
|
+
- lib/assets/stylesheets/atlas_assets/_navbar.scss
|
|
88
|
+
- lib/assets/stylesheets/atlas_assets/_reset.scss
|
|
89
|
+
- lib/assets/stylesheets/atlas_assets/_responsive-767.scss
|
|
90
|
+
- lib/assets/stylesheets/atlas_assets/_responsive-768-979.scss
|
|
91
|
+
- lib/assets/stylesheets/atlas_assets/_responsive-utilities.scss
|
|
92
|
+
- lib/assets/stylesheets/atlas_assets/_utilities.scss
|
|
93
|
+
- lib/assets/stylesheets/atlas_assets/_variables.scss
|
|
88
94
|
- lib/atlas_assets.rb
|
|
89
95
|
- lib/atlas_assets/engine.rb
|
|
90
96
|
- lib/atlas_assets/version.rb
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
.box {
|
|
2
|
-
background-color: #ececec;
|
|
3
|
-
-webkit-border-bottom-right-radius: 5px;
|
|
4
|
-
-webkit-border-bottom-left-radius: 5px;
|
|
5
|
-
-moz-border-radius-bottomright: 5px;
|
|
6
|
-
-moz-border-radius-bottomleft: 5px;
|
|
7
|
-
border-bottom-right-radius: 5px;
|
|
8
|
-
border-bottom-left-radius: 5px;
|
|
9
|
-
margin-bottom: 10px;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
.box .box-inner {
|
|
13
|
-
padding: 10px 15px;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
.box h3 {
|
|
17
|
-
color: #808080;
|
|
18
|
-
padding: 8px 15px;
|
|
19
|
-
margin: 0;
|
|
20
|
-
background-color: #e0e0e0;
|
|
21
|
-
border-bottom: 1px solid #d1d1d1;
|
|
22
|
-
}
|
|
23
|
-
|