atlas_assets 0.0.17 → 0.1.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.
- 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
data/Gemfile.lock
CHANGED
data/README.md
CHANGED
|
@@ -19,6 +19,8 @@ To use in a new Rails application, add the gem to your Gemfile, and add the foll
|
|
|
19
19
|
|
|
20
20
|
Along with all the CSS and JS widgets, it will include our base bundle of JS libraries (`JQuery`, `underscore.js`, `backbone.js`, etc). It will also set up a number of JS namespaces `window.classes`, `window.app`, `window.events` and `window.constants`, so make sure to include the JS manifest before any of your JS code.
|
|
21
21
|
|
|
22
|
+
Show how to use color bars and mixins in the app
|
|
23
|
+
|
|
22
24
|
Adding new styles
|
|
23
25
|
-----------------
|
|
24
26
|
|
data/docs/_layouts/default.html
CHANGED
|
@@ -33,6 +33,20 @@
|
|
|
33
33
|
.CodeRay pre {
|
|
34
34
|
margin-top: 0px;
|
|
35
35
|
}
|
|
36
|
+
.show-grid {
|
|
37
|
+
margin-top: 10px;
|
|
38
|
+
margin-bottom: 20px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.show-grid [class*="span"] {
|
|
42
|
+
background-color: #cecece;
|
|
43
|
+
text-align: center;
|
|
44
|
+
-webkit-border-radius: 3px;
|
|
45
|
+
-moz-border-radius: 3px;
|
|
46
|
+
border-radius: 3px;
|
|
47
|
+
min-height: 40px;
|
|
48
|
+
line-height: 40px;
|
|
49
|
+
}
|
|
36
50
|
</style>
|
|
37
51
|
</head>
|
|
38
52
|
<body>
|
|
@@ -4,24 +4,6 @@ title: "Grid"
|
|
|
4
4
|
date: 2013-05-17 23:24:04
|
|
5
5
|
---
|
|
6
6
|
|
|
7
|
-
<style type="text/css">
|
|
8
|
-
|
|
9
|
-
.show-grid {
|
|
10
|
-
margin-top: 10px;
|
|
11
|
-
margin-bottom: 20px;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.show-grid [class*="span"] {
|
|
15
|
-
background-color: #eee;
|
|
16
|
-
text-align: center;
|
|
17
|
-
-webkit-border-radius: 3px;
|
|
18
|
-
-moz-border-radius: 3px;
|
|
19
|
-
border-radius: 3px;
|
|
20
|
-
min-height: 40px;
|
|
21
|
-
line-height: 40px;
|
|
22
|
-
}
|
|
23
|
-
</style>
|
|
24
|
-
|
|
25
7
|
Grid
|
|
26
8
|
====
|
|
27
9
|
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
.box {
|
|
2
|
+
background-color: $lighter_gray;
|
|
3
|
+
@include border-bottom-radius(5px);
|
|
4
|
+
margin-bottom: 10px;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.box .box-inner {
|
|
8
|
+
padding: 10px $boxPaddingX;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.box h3 {
|
|
12
|
+
color: $medium_gray;
|
|
13
|
+
padding: 8px 15px;
|
|
14
|
+
margin: 0;
|
|
15
|
+
background-color: $light_gray;
|
|
16
|
+
border-bottom: 1px solid $gray;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.box {
|
|
20
|
+
@include grid-core($gridColumnWidth768, $gridGutterWidth768);
|
|
21
|
+
}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
.btn {
|
|
2
2
|
display: inline-block;
|
|
3
|
-
color:
|
|
3
|
+
color: $white;
|
|
4
|
+
background-color: $dark_gray;
|
|
4
5
|
cursor: pointer;
|
|
5
|
-
background-color: #333;
|
|
6
6
|
padding: 4px 12px;
|
|
7
7
|
text-decoration: none;
|
|
8
8
|
-webkit-border-radius: 3px;
|
|
9
9
|
-moz-border-radius: 3px;
|
|
10
10
|
border-radius: 3px;
|
|
11
|
-
|
|
11
|
+
@include smooth();
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
input[type=submit].btn,
|
|
@@ -31,26 +31,27 @@ _________________________________________________________________ */
|
|
|
31
31
|
.btn.medium {
|
|
32
32
|
font-size: 17px;
|
|
33
33
|
padding: 7px 16px;
|
|
34
|
+
@include border-radius(6px);
|
|
34
35
|
}
|
|
35
36
|
|
|
36
37
|
.btn.large {
|
|
37
38
|
font-size: 22px;
|
|
38
39
|
padding: 12px 25px;
|
|
39
40
|
line-height: 26px;
|
|
41
|
+
@include border-radius(8px);
|
|
40
42
|
}
|
|
41
43
|
|
|
42
44
|
/* Colors
|
|
43
45
|
_________________________________________________________________ */
|
|
44
46
|
|
|
45
47
|
.btn.blue {
|
|
46
|
-
background-color:
|
|
48
|
+
background-color: $blue;
|
|
47
49
|
}
|
|
48
50
|
|
|
49
51
|
.btn.red {
|
|
50
|
-
background-color:
|
|
51
|
-
color: #FFF;
|
|
52
|
+
background-color: $red;
|
|
52
53
|
}
|
|
53
54
|
|
|
54
55
|
.btn.green {
|
|
55
|
-
background-color:
|
|
56
|
+
background-color: $green;
|
|
56
57
|
}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
.flash {
|
|
2
|
-
margin-
|
|
2
|
+
margin-bottom: $baseLineHeight;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
5
|
.flash .flash-item {
|
|
6
|
-
background-color:
|
|
6
|
+
background-color: $gray;
|
|
7
7
|
padding: 12px 20px;
|
|
8
8
|
-webkit-border-radius: 5px;
|
|
9
9
|
-moz-border-radius: 5px;
|
|
10
10
|
border-radius: 5px;
|
|
11
11
|
margin-top: 20px;
|
|
12
|
-
color:
|
|
12
|
+
color: $medium_gray;
|
|
13
13
|
position: relative;
|
|
14
14
|
}
|
|
15
15
|
|
|
@@ -17,16 +17,20 @@
|
|
|
17
17
|
position: absolute;
|
|
18
18
|
top: 13px;
|
|
19
19
|
right: 15px;
|
|
20
|
-
color:
|
|
20
|
+
color: $medium_gray;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
/* Colors
|
|
24
24
|
__________________________________________________________ */
|
|
25
25
|
|
|
26
|
+
.flash-item.notice {
|
|
27
|
+
background-color: $lightest_blue;
|
|
28
|
+
}
|
|
29
|
+
|
|
26
30
|
.flash-item.warning {
|
|
27
|
-
background-color:
|
|
31
|
+
background-color: $lightest_yellow;
|
|
28
32
|
}
|
|
29
33
|
|
|
30
34
|
.flash-item.error {
|
|
31
|
-
background-color:
|
|
35
|
+
background-color: $lightest_red;
|
|
32
36
|
}
|
|
@@ -18,16 +18,16 @@
|
|
|
18
18
|
---------------------------------------------------------------------------- */
|
|
19
19
|
|
|
20
20
|
body {
|
|
21
|
-
font-family:
|
|
22
|
-
font-size:
|
|
23
|
-
line-height:
|
|
24
|
-
color:
|
|
21
|
+
font-family: $sansFontFamily;
|
|
22
|
+
font-size: $baseFontSize;
|
|
23
|
+
line-height: $baseLineHeight;
|
|
24
|
+
color: $dark_gray;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
h1, h2, h3, h4, h5 {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
28
|
+
margin-bottom: 7px;
|
|
29
|
+
color: $darkest_gray;
|
|
30
|
+
@include smooth();
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
h1 {
|
|
@@ -50,14 +50,10 @@ h4, h5, h6 {
|
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
a {
|
|
53
|
-
color:
|
|
53
|
+
color: $blue;
|
|
54
54
|
text-decoration: none;
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
a:hover, a:focus {
|
|
58
|
-
color: #0280d1;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
57
|
/* Heading split
|
|
62
58
|
--------------------------------------------------------- */
|
|
63
59
|
|