concisecss 0.0.5 → 2.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (42) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +13 -8
  3. data/app/assets/javascripts/concisecss/dropdown.js +17 -8
  4. data/app/assets/javascripts/concisecss/naver.js +8 -8
  5. data/app/assets/javascripts/concisecss/navigation.js +5 -5
  6. data/app/assets/javascripts/concisecss/non-responsive.js +8 -8
  7. data/app/assets/stylesheets/base/_headings.scss +129 -119
  8. data/app/assets/stylesheets/base/_main.scss +15 -13
  9. data/app/assets/stylesheets/{generic → base}/_print.scss +38 -56
  10. data/app/assets/stylesheets/base/_selection.scss +15 -9
  11. data/app/assets/stylesheets/base/_type.scss +21 -19
  12. data/app/assets/stylesheets/{generic/_shared.scss → base/_vertical-rhythm.scss} +9 -10
  13. data/app/assets/stylesheets/components/_buttons.scss +174 -0
  14. data/app/assets/stylesheets/components/_colors.scss +25 -0
  15. data/app/assets/stylesheets/{objects → components}/_dropdowns.scss +67 -79
  16. data/app/assets/stylesheets/components/_navigation.scss +133 -0
  17. data/app/assets/stylesheets/concise.scss +31 -31
  18. data/app/assets/stylesheets/{generic → helpers}/_clearfix.scss +2 -6
  19. data/app/assets/stylesheets/helpers/_conditional.scss +128 -0
  20. data/app/assets/stylesheets/helpers/_functions.scss +32 -0
  21. data/app/assets/stylesheets/{generic/_helper.scss → helpers/_helpers.scss} +29 -38
  22. data/app/assets/stylesheets/helpers/_mixins.scss +315 -0
  23. data/app/assets/stylesheets/{generic → helpers}/_normalize.scss +35 -35
  24. data/app/assets/stylesheets/{_defaults.scss → helpers/_variables.scss} +68 -78
  25. data/app/assets/stylesheets/layout/_container.scss +17 -0
  26. data/app/assets/stylesheets/layout/_forms.scss +103 -0
  27. data/app/assets/stylesheets/layout/_grid.scss +71 -0
  28. data/app/assets/stylesheets/layout/_lists.scss +88 -0
  29. data/app/assets/stylesheets/layout/tables.scss +63 -0
  30. data/lib/concisecss/concisecss_source.rb +30 -40
  31. data/lib/concisecss/version.rb +1 -1
  32. metadata +21 -20
  33. data/app/assets/stylesheets/generic/_conditional.scss +0 -126
  34. data/app/assets/stylesheets/generic/_mixins.scss +0 -157
  35. data/app/assets/stylesheets/objects/_badges.scss +0 -53
  36. data/app/assets/stylesheets/objects/_breadcrumbs.scss +0 -35
  37. data/app/assets/stylesheets/objects/_buttons.scss +0 -287
  38. data/app/assets/stylesheets/objects/_colors.scss +0 -48
  39. data/app/assets/stylesheets/objects/_groups.scss +0 -102
  40. data/app/assets/stylesheets/objects/_navigation.scss +0 -382
  41. data/app/assets/stylesheets/objects/_progress.scss +0 -106
  42. data/app/assets/stylesheets/objects/_wells.scss +0 -103
@@ -1,106 +0,0 @@
1
- @if $use-progress == true {
2
- //------------------------------------
3
- // PROGRESS
4
- //------------------------------------
5
-
6
- // Thanks to Chris Coyier's article on
7
- // CSS3 Progress Bars which helped me create
8
- // these (http://css-tricks.com/css3-progress-bars/)
9
- .progress {
10
- background-color: #f9f9f9;
11
- color: #fff;
12
- @include font-size(11px, false);
13
- height: 12px;
14
- line-height: 1.182;
15
- margin: 6px 0;
16
- position: relative;
17
- text-align: center;
18
- width: 100%;
19
-
20
- @include vendor(box-shadow, inset 0 1px 1px rgba(100, 100, 100, 0.1));
21
-
22
- @include vendor(box-sizing, initial);
23
- }
24
-
25
- .progress-small {
26
- @include font-size(9px, false);
27
- height: 6px;
28
- line-height: 0.875;
29
- }
30
-
31
- .progress-large {
32
- @include font-size($base-font-size, false);
33
- height: 25px;
34
- line-height: 1.7;
35
- }
36
-
37
- .progress {
38
- > span {
39
- background-color: rgb(43, 194, 83);
40
- display: block;
41
- height: 100%;
42
- overflow: hidden;
43
- position: relative;
44
- width: auto;
45
- }
46
-
47
-
48
- // Rounded corners
49
- &.border-radius > span { border-radius: $border-radius; }
50
-
51
-
52
- // Stacked
53
- &.progress-stacked {
54
- > span {
55
- display: inline-block;
56
- float: left;
57
- }
58
-
59
- &.border-radius > span {
60
- border-radius: 0px;
61
-
62
- &:first-of-type { border-radius: $border-radius 0 0 $border-radius; }
63
-
64
- &:last-of-type { border-radius: 0 $border-radius $border-radius 0; }
65
- }
66
- }
67
- }
68
-
69
-
70
- // Striped
71
- .progress-striped {
72
- > span {
73
- &:after, > span {
74
- bottom: 0;
75
- content: "";
76
- left: 0;
77
- overflow: hidden;
78
- position: absolute;
79
- right: 0;
80
- top: 0;
81
- z-index: 1;
82
-
83
- @include vendor(background-size, 50px 50px);
84
-
85
- background-image:
86
- -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));
87
- background-image:
88
- -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
89
- }
90
- }
91
-
92
-
93
- // Animated
94
- &.progress-animate > span {
95
- &:after, > span {
96
- @include vendor(animation, move 2s linear infinite);
97
- }
98
- }
99
- }
100
-
101
- @-webkit-keyframes move {
102
- 0% { background-position: 0 0; }
103
-
104
- 100% { background-position: 50px 50px; }
105
- }
106
- }
@@ -1,103 +0,0 @@
1
- @if $use-wells == true {
2
- //------------------------------------
3
- // WELLS
4
- //------------------------------------
5
- .well {
6
- background-color: #f9f9f9;
7
- border-color: #ededed;
8
- border-style: solid;
9
- border-width: 1px;
10
- margin-bottom: 24px;
11
- padding: 0px 15px;
12
-
13
- h1, h2, h3, h4, h5, h6,
14
- .h1, .h2, .h3, .h4, .h5, .h6,
15
- .giga, .mega, .kilo { color: inherit; }
16
-
17
- p { margin: 10px 0; }
18
-
19
- pre,
20
- .pre.well {
21
- @include font-size(14px);
22
- padding: 10px 15px;
23
- }
24
- }
25
-
26
- .well {
27
- // Headings
28
- header {
29
- h1, h2, h3, h4, h5, h6,
30
- .h1, .h2, .h3, .h4, .h5, .h6,
31
- .giga, .mega, .kilo { margin: 20px 0 10px; }
32
-
33
- .label,
34
- .badge { margin-top: 10px; }
35
- }
36
-
37
-
38
- // Background colors
39
- &[class*='bg-'] { color: #fff; }
40
-
41
- &.bg-white { color: #666; }
42
-
43
- &.bg-black { border-color: #000; }
44
-
45
- &.bg-green { border-color: darken($bg-green, 15%); }
46
-
47
- &.bg-light-green {
48
- border-color: darken($bg-green, 15%);
49
- color: $color-green;
50
- }
51
-
52
- &.bg-blue { border-color: darken($bg-blue, 15%); }
53
-
54
- &.bg-light-blue {
55
- border-color: darken($bg-blue, 15%);
56
- color: $color-blue;
57
- }
58
-
59
- &.bg-yellow { border-color: darken($bg-yellow, 15%); }
60
-
61
- &.bg-light-yellow {
62
- border-color: darken($bg-yellow, 15%);
63
- color: $color-yellow;
64
- }
65
-
66
- &.bg-red { border-color: darken($bg-red, 15%); }
67
-
68
- &.bg-light-red {
69
- border-color: darken($bg-red, 15%);
70
- color: $color-red;
71
- }
72
- }
73
-
74
-
75
- // Close icon
76
- .close {
77
- color: #000;
78
- filter: alpha(opacity = 20);
79
- float: right;
80
- @include font-size(22px);
81
- font-weight: bold;
82
- opacity: .2;
83
-
84
- &:hover, &:focus {
85
- color: #000;
86
- cursor: pointer;
87
- filter: alpha(opacity = 50);
88
- opacity: .5;
89
- text-decoration: none;
90
-
91
- @include vendor(transition, all 0.2s linear);
92
- }
93
- }
94
-
95
- button.close {
96
- background: transparent;
97
- border: 0;
98
- cursor: pointer;
99
- padding: 0;
100
- }
101
-
102
- .well .close { margin-top: 6px; }
103
- }