atlas_assets 0.3.4 → 0.4.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (23) hide show
  1. data/.gitignore +2 -1
  2. data/Gemfile.lock +7 -7
  3. data/docs/_layouts/default.html +2 -2
  4. data/docs/_posts/2013-05-17-buttons.md +44 -28
  5. data/docs/_posts/2013-05-17-fonts.md +5 -10
  6. data/docs/_posts/2013-05-17-icons.md +23 -1
  7. data/docs/_posts/2013-05-17-lists.md +86 -20
  8. data/docs/_posts/2013-05-22-boxes.md +88 -10
  9. data/docs/ignore/atlas_assets.css +3921 -683
  10. data/lib/assets/stylesheets/atlas_assets.scss +1 -0
  11. data/lib/assets/stylesheets/atlas_assets/_boxes.scss +15 -20
  12. data/lib/assets/stylesheets/atlas_assets/_button-groups.scss +9 -8
  13. data/lib/assets/stylesheets/atlas_assets/_buttons.scss +44 -22
  14. data/lib/assets/stylesheets/atlas_assets/_fonts.scss +12 -0
  15. data/lib/assets/stylesheets/atlas_assets/_forms.scss +3 -3
  16. data/lib/assets/stylesheets/atlas_assets/_glyphicons.scss +1 -1
  17. data/lib/assets/stylesheets/atlas_assets/_icons.scss +38 -0
  18. data/lib/assets/stylesheets/atlas_assets/_lists.scss +44 -28
  19. data/lib/assets/stylesheets/atlas_assets/_modals.scss +2 -2
  20. data/lib/assets/stylesheets/atlas_assets/_tabs.scss +8 -9
  21. data/lib/assets/stylesheets/atlas_assets/_variables.scss +27 -14
  22. data/lib/atlas_assets/version.rb +1 -1
  23. metadata +3 -2
data/lib/assets/stylesheets/atlas_assets.scss CHANGED
@@ -7,6 +7,7 @@
7
7
  @import "atlas_assets/footer";
8
8
  @import "atlas_assets/glyphicons";
9
9
  @import "atlas_assets/fontawesome";
10
+ @import "atlas_assets/icons";
10
11
  @import "atlas_assets/logo";
11
12
  @import "atlas_assets/glyphicons";
12
13
  @import "atlas_assets/boxes";
data/lib/assets/stylesheets/atlas_assets/_boxes.scss CHANGED
@@ -1,26 +1,24 @@
1
1
  .box {
2
- background-color: $lighter_gray;
3
- @include border-bottom-radius(5px);
2
+ background-color: $defaultBackgroundColor;
3
+ border: 1px solid $defaultBorderColor;
4
+ @include border-radius($defaultBorderRadius);
4
5
  margin-bottom: 10px;
5
6
  }
6
7
 
7
8
  .box .box-inner {
9
+ background-color: white;
8
10
  padding: 15px;
9
11
  @include clearfix();
10
12
  }
11
13
 
12
- .box h3 {
13
- color: $medium_gray;
14
- padding: 8px 15px;
15
- margin: 0;
16
- background-color: $light_gray;
17
- border-bottom: 1px solid $gray;
18
- @include clearfix();
14
+ .box .box-top {
15
+ padding: 8px 10px;
16
+ border-bottom: 1px solid $defaultBorderColor;
19
17
  }
20
18
 
21
- .box h3 small {
22
- float: right;
23
- font-size: 14px;
19
+ .box .box-bottom {
20
+ padding: 8px 10px;
21
+ border-top: 1px solid $defaultBorderColor;
24
22
  }
25
23
 
26
24
  .box .box-inner *:first-child {
@@ -31,17 +29,14 @@
31
29
  margin-bottom: 0;
32
30
  }
33
31
 
32
+ .box .list {
33
+ border: none;
34
+ background-color: white;
35
+ }
36
+
34
37
  /* Box Styles
35
38
  --------------------------------------------------------- */
36
39
 
37
40
  .box.box-white {
38
41
  background-color: $white;
39
- border: 2px solid $lighter_gray;
40
- color: $darker_gray;
41
- }
42
-
43
- .box.box-white h3 {
44
- background-color: $lightest_gray;
45
- color: $darker_gray;
46
- border-bottom-color: $lighter_gray;
47
42
  }
data/lib/assets/stylesheets/atlas_assets/_button-groups.scss CHANGED
@@ -19,6 +19,7 @@ _________________________________________________________________ */
19
19
  .btn-group > .btn {
20
20
  position: relative;
21
21
  @include border-radius(0);
22
+ // border: 1px solid $defaultBorderColor;
22
23
  }
23
24
 
24
25
  .btn-group > .btn + .btn {
@@ -33,26 +34,26 @@ _________________________________________________________________ */
33
34
 
34
35
  .btn-group > .btn:first-child {
35
36
  margin-left: 0;
36
- @include border-top-left-radius($borderRadius);
37
- @include border-bottom-left-radius($borderRadius);
37
+ @include border-top-left-radius($defaultBorderRadius);
38
+ @include border-bottom-left-radius($defaultBorderRadius);
38
39
  }
39
40
 
40
41
  .btn-group > .btn:last-child,
41
42
  .btn-group > .dropdown-toggle {
42
- @include border-top-right-radius($borderRadius);
43
- @include border-bottom-right-radius($borderRadius);
43
+ @include border-top-right-radius($defaultBorderRadius);
44
+ @include border-bottom-right-radius($defaultBorderRadius);
44
45
  }
45
46
 
46
47
  .btn-group > .btn.large:first-child {
47
48
  margin-left: 0;
48
- @include border-top-left-radius($borderRadiusLarge);
49
- @include border-bottom-left-radius($borderRadiusLarge);
49
+ @include border-top-left-radius($defaultBorderRadiusLarge);
50
+ @include border-bottom-left-radius($defaultBorderRadiusLarge);
50
51
  }
51
52
 
52
53
  .btn-group > .btn.large:last-child,
53
54
  .btn-group > .large.dropdown-toggle {
54
- @include border-top-right-radius($borderRadiusLarge);
55
- @include border-bottom-right-radius($borderRadiusLarge);
55
+ @include border-top-right-radius($defaultBorderRadiusLarge);
56
+ @include border-bottom-right-radius($defaultBorderRadiusLarge);
56
57
  }
57
58
 
58
59
  .btn-group > .btn:hover,
data/lib/assets/stylesheets/atlas_assets/_buttons.scss CHANGED
@@ -1,68 +1,90 @@
1
1
  .btn {
2
+ color: $defaultFontColor;
2
3
  display: inline-block;
3
- color: $white;
4
- background-color: $darker_gray;
4
+ border: 1px solid $defaultBorderColor;
5
+ background: $defaultBackgroundColor;
5
6
  cursor: pointer;
6
7
  padding: 4px 12px;
7
8
  text-decoration: none;
8
- @include border-radius($borderRadius);
9
+ @include border-radius($defaultBorderRadius);
9
10
  outline: none;
10
11
  @include smooth();
11
12
  }
12
13
 
13
- input[type=submit].btn,
14
- button.btn {
15
- border: none;
14
+ a.btn:hover {
15
+ text-decoration: none;
16
16
  }
17
17
 
18
18
  .btn:hover, .btn:focus {
19
- color: #FFF;
19
+ background: $lightest_blue;
20
+ border: 1px solid $lighter_blue
20
21
  }
21
22
 
22
23
  /* Sizes
23
24
  _________________________________________________________________ */
24
25
 
25
- .btn.small {
26
+ .btn.btn-small {
26
27
  font-size: 12px;
27
28
  padding: 5px 10px;
28
29
  }
29
30
 
30
- .btn.medium {
31
+ .btn.btn-medium {
31
32
  font-size: 17px;
32
33
  padding: 7px 16px;
33
- @include border-radius($borderRadiusMedium);
34
+ @include border-radius($defaultBorderRadiusMedium);
34
35
  }
35
36
 
36
- .btn.large {
37
+ .btn.btn-large {
37
38
  font-size: 22px;
38
39
  padding: 12px 25px;
39
40
  line-height: 26px;
40
- @include border-radius($borderRadiusLarge);
41
+ @include border-radius($defaultBorderRadiusLarge);
41
42
  }
42
43
 
43
- /* Colors
44
+ /* Variations
44
45
  _________________________________________________________________ */
45
46
 
46
- .btn.blue {
47
+ .btn.btn-info {
48
+ border-color: $darker_blue;
47
49
  background-color: $blue;
50
+ color: white;
51
+ &:hover {
52
+ background-color: $light_blue;
53
+ }
48
54
  }
49
55
 
50
- .btn.red {
56
+ .btn.btn-error {
57
+ border-color: $darker_red;
51
58
  background-color: $red;
59
+ color: white;
60
+ &:hover {
61
+ background-color: $light_red;
62
+ }
52
63
  }
53
64
 
54
- .btn.green {
65
+ .btn.btn-success {
66
+ border-color: $darker_green;
55
67
  background-color: $green;
68
+ color: white;
69
+ &:hover {
70
+ background-color: $light_green;
71
+ }
56
72
  }
57
73
 
58
- .btn.disabled {
59
- background-color: $light_gray;
60
- color: $mid_gray;
74
+ .btn.btn-warning {
75
+ border-color: $darker_yellow;
76
+ background-color: $yellow;
77
+ color: white;
78
+ &:hover {
79
+ background-color: $light_yellow;
80
+ }
61
81
  }
62
82
 
63
- .btn.gray {
64
- background-color: $light_gray;
65
- color: $darker_gray;
83
+ .btn.btn-disabled {
84
+ cursor: not-allowed;
85
+ background-color: $light_gray;
86
+ color: $mid_gray;
87
+ border: none;
66
88
  }
67
89
 
68
90
  /* Close button
data/lib/assets/stylesheets/atlas_assets/_fonts.scss CHANGED
@@ -38,6 +38,7 @@ h1 {
38
38
  h2 {
39
39
  font-size: 24px;
40
40
  line-height: 36px;
41
+ color: $red;
41
42
  }
42
43
 
43
44
  h3 {
@@ -52,6 +53,17 @@ h4, h5, h6 {
52
53
  a {
53
54
  color: $blue;
54
55
  text-decoration: none;
56
+
57
+ &:hover {
58
+ text-decoration: underline;
59
+ }
60
+ }
61
+
62
+ /* Font Helpers
63
+ --------------------------------------------------------- */
64
+
65
+ .underline {
66
+ text-decoration: underline;
55
67
  }
56
68
 
57
69
  /* Heading split
data/lib/assets/stylesheets/atlas_assets/_forms.scss CHANGED
@@ -101,7 +101,7 @@ input[type="tel"],
101
101
  input[type="color"],
102
102
  .uneditable-input {
103
103
  background-color: $inputBackground;
104
- border: 2px solid $inputBorder;
104
+ border: 1px solid $inputBorder;
105
105
  &:focus {
106
106
  border-color: $lighter_blue;
107
107
  outline: 0;
@@ -372,7 +372,7 @@ input[type="checkbox"][readonly] {
372
372
  line-height: $baseLineHeight;
373
373
  text-align: center;
374
374
  background-color: $light_gray;
375
- border: 2px solid $light_gray;
375
+ border: 1px solid $light_gray;
376
376
  }
377
377
  .add-on,
378
378
  .btn,
@@ -385,7 +385,7 @@ input[type="checkbox"][readonly] {
385
385
  .input-append .btn,
386
386
  .input-prepend .btn {
387
387
  background-color: $light_gray;
388
- border: 2px solid $light_gray;
388
+ border: 1px solid $light_gray;
389
389
  color: $darker_gray;
390
390
  margin: 0;
391
391
  border-left: 0;
data/lib/assets/stylesheets/atlas_assets/_glyphicons.scss CHANGED
@@ -21,7 +21,7 @@
21
21
  font-weight: normal;
22
22
  font-variant: normal;
23
23
  text-transform: none;
24
- line-height: 1;
24
+ // line-height: 1;
25
25
  vertical-align: middle;
26
26
  -webkit-font-smoothing: antialiased;
27
27
  }
data/lib/assets/stylesheets/atlas_assets/_icons.scss ADDED
@@ -0,0 +1,38 @@
1
+ .icn-round {
2
+ width: 20px;
3
+ height: 20px;
4
+ text-align: center;
5
+ display: inline-block;
6
+ padding: 0;
7
+ @include border-radius(10px);
8
+ background-color: $defaultBackgroundColor;
9
+ border: 1px solid $defaultBorderColor;
10
+ // vertical-align: middle;
11
+ }
12
+
13
+ /* Variations
14
+ _________________________________________________________________ */
15
+
16
+ .icn-info {
17
+ background-color: $blue;
18
+ color: white;
19
+ border: none;
20
+ }
21
+
22
+ .icn-error {
23
+ background-color: $red;
24
+ color: white;
25
+ border: none;
26
+ }
27
+
28
+ .icn-success {
29
+ border: none;
30
+ background-color: $green;
31
+ color: white;
32
+ }
33
+
34
+ .icn-warning {
35
+ border: none;
36
+ background-color: $yellow;
37
+ color: white;
38
+ }
data/lib/assets/stylesheets/atlas_assets/_lists.scss CHANGED
@@ -2,59 +2,75 @@
2
2
  list-style: none;
3
3
  margin: 0;
4
4
  padding: 0;
5
+ border: 1px solid $lighter_gray;
6
+ @include border-radius($defaultBorderRadius);
5
7
  }
6
8
 
7
9
  .list .list-item {
8
- border-bottom: 1px solid $light_gray;
10
+ border-bottom: 1px dashed $gray;
9
11
  margin: 0;
10
12
  padding: 0;
11
13
 
12
- a {
13
- display: block;
14
- padding: 13px 10px;
15
- color: $darker_gray;
16
-
17
- i.list-icon {
18
- float: right;
19
- color: $gray;
20
- }
14
+ &:last-child {
15
+ border-bottom: none;
21
16
  }
17
+ }
22
18
 
23
- a:hover {
24
- color: $blue;
25
- i.list-icon {
26
- color: $darker_gray;
27
- }
28
- }
19
+ /* Variations
20
+ ---------------------------------------------------------- */
29
21
 
30
- &:nth-child(even) {
31
- background-color: $lightest_gray;
32
- }
22
+ .list.list-gray {
23
+ border: 1px solid $defaultBorderColor;
24
+ background: $defaultBackgroundColor;
25
+ }
33
26
 
34
- &:last-child {
35
- border-bottom: none;
36
- }
27
+ /* List Sizes
28
+ ---------------------------------------------------------- */
29
+
30
+ .list.list-small {
31
+ font-size: 13px;
37
32
  }
38
33
 
39
- /* Sizes
40
- _________________________________________________________________ */
34
+ .list.list-small .list-item.list-padding {
35
+ padding: 8px 10px;
36
+ }
41
37
 
42
- .list.medium {
38
+ .list.list-medium {
43
39
  font-size: 16px;
44
40
  }
45
41
 
46
- .list.medium .list-item a {
42
+ .list.list-medium .list-item.list-padding {
47
43
  padding: 12px 15px;
48
44
  }
49
45
 
50
- .list.large {
46
+ .list.list-large {
51
47
  font-size: 18px;
52
48
  }
53
49
 
54
- .list.large .list-item a {
50
+ .list.list-large .list-item.list-padding {
55
51
  padding: 15px 10px;
56
52
  }
57
53
 
54
+ /* List Padding
55
+ ---------------------------------------------------------- */
56
+
57
+ .list .list-padding {
58
+ padding: 13px 15px 13px 10px;
59
+ }
60
+
61
+ /* List Icon
62
+ ---------------------------------------------------------- */
63
+
64
+ .list i.list-icon {
65
+ float: right;
66
+ color: $gray;
67
+ }
68
+
69
+ .list a:hover i.list-icon,
70
+ .list i.list-icon:hover {
71
+ text-decoration: none;
72
+ }
73
+
58
74
  /* List Helpers
59
75
  _________________________________________________________________ */
60
76
 
data/lib/assets/stylesheets/atlas_assets/_modals.scss CHANGED
@@ -17,8 +17,8 @@
17
17
  width: 560px;
18
18
  margin-left: -280px;
19
19
  background-color: $white;
20
- border: 2px solid $lighter_gray;
21
- @include border-bottom-radius(5px);
20
+ border: 1px solid $light_gray;
21
+ @include border-radius(5px);
22
22
  @include background-clip(padding-box);
23
23
  outline: none;
24
24
  }
data/lib/assets/stylesheets/atlas_assets/_tabs.scss CHANGED
@@ -5,27 +5,27 @@
5
5
  list-style: none;
6
6
  margin-top: 0;
7
7
  padding: 0;
8
+ background: $defaultBackgroundColor;
9
+ border: 1px solid $defaultBorderColor;
10
+ @include border-radius($defaultBorderRadius);
8
11
  }
9
12
 
10
13
  .tabs li {
11
14
  @include box-sizing(border-box);
12
- background: $lightest_gray;
13
15
  list-style: none;
14
16
  font-weight: bold;
15
17
  margin: 0;
16
18
  padding: 0;
17
19
  padding: 1em;
18
20
  width: 100%;
19
- border-left: 2px solid $lighter_gray;
20
- border-right: 2px solid $lighter_gray;
21
- border-top: 2px solid $lighter_gray;
21
+ border-bottom: 1px dashed $defaultBorderColor;
22
22
 
23
- .list-icon {
24
- display: none;
23
+ &:last-child {
24
+ border: none;
25
25
  }
26
26
 
27
- &:last-child {
28
- border-bottom: 2px solid $lighter_gray;
27
+ .list-icon {
28
+ display: none;
29
29
  }
30
30
 
31
31
  &:hover {
@@ -35,7 +35,6 @@
35
35
 
36
36
  &.active .list-icon {
37
37
  display: block;
38
-
39
38
  float: right;
40
39
  }
41
40
  }