atlas_assets 0.3.4 → 0.4.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.
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
  }