concisecss 0.0.3 → 0.0.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (39) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/app/assets/javascripts/concisecss/close.js +4 -4
  4. data/app/assets/javascripts/concisecss/dropdown.js +30 -30
  5. data/app/assets/javascripts/concisecss/naver.js +348 -348
  6. data/app/assets/javascripts/concisecss/navigation.js +18 -18
  7. data/app/assets/javascripts/concisecss/non-responsive.js +46 -46
  8. data/app/assets/stylesheets/_defaults.scss +55 -58
  9. data/app/assets/stylesheets/base/_blockquotes.scss +32 -32
  10. data/app/assets/stylesheets/base/_container.scss +8 -8
  11. data/app/assets/stylesheets/base/_forms.scss +83 -81
  12. data/app/assets/stylesheets/base/_grid.scss +63 -59
  13. data/app/assets/stylesheets/base/_headings.scss +137 -134
  14. data/app/assets/stylesheets/base/_lists.scss +109 -109
  15. data/app/assets/stylesheets/base/_main.scss +28 -25
  16. data/app/assets/stylesheets/base/_selection.scss +18 -18
  17. data/app/assets/stylesheets/base/_tables.scss +78 -76
  18. data/app/assets/stylesheets/base/_type.scss +50 -50
  19. data/app/assets/stylesheets/concise.scss +7 -12
  20. data/app/assets/stylesheets/generic/_clearfix.scss +9 -9
  21. data/app/assets/stylesheets/generic/_conditional.scss +111 -107
  22. data/app/assets/stylesheets/generic/_helper.scss +81 -81
  23. data/app/assets/stylesheets/generic/_mixins.scss +73 -66
  24. data/app/assets/stylesheets/generic/_normalize.scss +189 -189
  25. data/app/assets/stylesheets/generic/_print.scss +105 -104
  26. data/app/assets/stylesheets/generic/_shared.scss +36 -32
  27. data/app/assets/stylesheets/objects/_badges.scss +43 -43
  28. data/app/assets/stylesheets/objects/_breadcrumbs.scss +30 -30
  29. data/app/assets/stylesheets/objects/_buttons.scss +264 -264
  30. data/app/assets/stylesheets/objects/_colors.scss +28 -25
  31. data/app/assets/stylesheets/objects/_dropdowns.scss +153 -153
  32. data/app/assets/stylesheets/objects/_groups.scss +82 -82
  33. data/app/assets/stylesheets/objects/_navigation.scss +330 -325
  34. data/app/assets/stylesheets/objects/_progress.scss +92 -88
  35. data/app/assets/stylesheets/objects/_wells.scss +93 -93
  36. data/lib/concisecss/concisecss_source.rb +1 -6
  37. data/lib/concisecss/version.rb +1 -1
  38. metadata +2 -3
  39. data/app/assets/stylesheets/generic/_debug.scss +0 -98
data/app/assets/stylesheets/base/_grid.scss CHANGED
@@ -1,67 +1,71 @@
1
1
  @if $use-grid == true {
2
- //------------------------------------//
3
- // $GRID
4
- //------------------------------------//
5
- .row {
6
- width: 100%;
7
-
8
- &:after {
9
- clear: both;
10
- content: " ";
11
- display: table;
12
- }
2
+ //------------------------------------
3
+ // GRID
4
+ //------------------------------------
5
+ .row {
6
+ width: 100%;
7
+
8
+ &:after {
9
+ clear: both;
10
+ content: " ";
11
+ display: table;
13
12
  }
13
+ }
14
14
 
15
- [class*='#{$column-prefix}'] {
16
- @include vendor(background-clip, padding-box !important);
17
-
18
- &.right { float: right; }
19
-
20
- img { max-width: 100%; }
21
- }
15
+ [class*='#{$column-prefix}'] {
16
+ @include vendor(background-clip, padding-box !important);
17
+
18
+ &.right { float: right; }
19
+
20
+ img { max-width: 100%; }
21
+ }
22
22
 
23
- @include breakpoint(small) {
24
- [class*='#{$column-prefix}'] { float: left; }
25
-
26
- .gutters [class*='#{$column-prefix}'] {
27
- margin-left: $gutters;
28
-
29
- &:first-child { margin-left: 0; }
30
- }
31
-
32
-
33
- // Row columns
34
- @include grid-setup();
35
-
36
-
37
- // Push
38
- @if $use-push == true {
39
- [class*='push-'] { position: relative; }
40
-
41
- @include push-setup();
42
- }
43
-
44
-
45
- // Pull
46
- @if $use-pull == true {
47
- [class*='pull-'] { position: relative; }
48
-
49
- @include pull-setup();
50
- }
23
+ @include breakpoint(small) {
24
+ [class*='#{$column-prefix}'] { float: left; }
25
+
26
+ .gutters [class*='#{$column-prefix}'] {
27
+ margin-left: $gutters;
28
+
29
+ &:first-child { margin-left: 0; }
30
+ }
31
+
32
+
33
+ // Row columns
34
+ @include grid-setup();
35
+
36
+
37
+ // Push
38
+
39
+ // Thanks to inuitcss (https://github.com/csswizardry/inuit.css) for the idea to
40
+ // abstract 'push' and 'pull' into their own mixins. This makes adding/removing
41
+ // them to projects absolutely painless.
42
+ @if $use-push == true {
43
+ [class*='push-'] { position: relative; }
44
+
45
+ @include push-setup();
51
46
  }
47
+
48
+
49
+ // Pull
50
+ @if $use-pull == true {
51
+ [class*='pull-'] { position: relative; }
52
+
53
+ @include pull-setup();
54
+ }
55
+ }
52
56
 
53
57
 
54
- // Non-responsive grid
55
- .non-responsive {
56
- [class*='#{$column-prefix}'] {
57
- float: left;
58
- width: auto !important;
59
- }
60
-
61
- .gutters [class*='#{$column-prefix}'],
62
- &.gutters [class*='#{$column-prefix}'] { margin-left: $gutters; }
63
-
64
- .gutters [class*='#{$column-prefix}']:first-child,
65
- &.gutters [class*='#{$column-prefix}']:first-child { margin-left: 0; }
58
+ // Non-responsive grid
59
+ .non-responsive {
60
+ [class*='#{$column-prefix}'] {
61
+ float: left;
62
+ width: auto !important;
66
63
  }
67
- }
64
+
65
+ .gutters [class*='#{$column-prefix}'],
66
+ &.gutters [class*='#{$column-prefix}'] { margin-left: $gutters; }
67
+
68
+ .gutters [class*='#{$column-prefix}']:first-child,
69
+ &.gutters [class*='#{$column-prefix}']:first-child { margin-left: 0; }
70
+ }
71
+ }
data/app/assets/stylesheets/base/_headings.scss CHANGED
@@ -1,155 +1,158 @@
1
1
  @if $use-headings == true {
2
- //------------------------------------//
3
- // $HEADINGS
4
- //------------------------------------//
5
- h1, h2, h3, h4, h5, h6,
6
- .h1, .h2, .h3, .h4, .h5, .h6,
7
- .giga, .mega, .kilo {
8
- color: #181818;
9
- font-weight: normal;
10
- text-rendering: optimizeLegibility;
2
+ //------------------------------------
3
+ // HEADINGS
4
+ //------------------------------------
5
+
6
+ // Thanks to Harry Roberts' article on pragmatic
7
+ // font sizing (http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/)
8
+ h1, h2, h3, h4, h5, h6,
9
+ .h1, .h2, .h3, .h4, .h5, .h6,
10
+ .giga, .mega, .kilo {
11
+ color: #181818;
12
+ font-weight: normal;
13
+ text-rendering: optimizeLegibility;
14
+ }
15
+
16
+ h1, .h1 {
17
+ @include font-size(24px);
18
+ }
19
+
20
+ h2, .h2 {
21
+ @include font-size(20px);
22
+ }
23
+
24
+ h3, .h3 {
25
+ @include font-size(18px);
26
+ }
27
+
28
+ h4, .h4 {
29
+ @include font-size(16px);
30
+ }
31
+
32
+ h5, .h5 {
33
+ @include font-size(14px);
34
+ }
35
+
36
+ h6, .h6 {
37
+ @include font-size(12px);
38
+ }
39
+
40
+ @include breakpoint(small) {
41
+ h1, .h1 {
42
+ @include font-size(32px);
43
+ }
44
+
45
+ h2, .h2 {
46
+ @include font-size(24px);
47
+ }
48
+
49
+ h3, .h3 {
50
+ @include font-size(20px);
11
51
  }
52
+
53
+ h4, .h4 {
54
+ @include font-size(18px);
55
+ }
56
+
57
+ h5, .h5 {
58
+ @include font-size(16px);
59
+ }
60
+
61
+ h6, .h6 {
62
+ @include font-size(14px);
63
+ }
64
+ }
12
65
 
66
+ @include breakpoint(medium) {
13
67
  h1, .h1 {
14
- @include font-size(24px);
68
+ @include font-size($h1-size);
15
69
  }
16
-
70
+
17
71
  h2, .h2 {
18
- @include font-size(20px);
72
+ @include font-size($h2-size);
19
73
  }
20
-
74
+
21
75
  h3, .h3 {
22
- @include font-size(18px);
76
+ @include font-size($h3-size);
23
77
  }
24
-
78
+
25
79
  h4, .h4 {
26
- @include font-size(16px);
80
+ @include font-size($h4-size);
27
81
  }
28
-
82
+
29
83
  h5, .h5 {
30
- @include font-size(14px);
84
+ @include font-size($h5-size);
31
85
  }
32
-
86
+
33
87
  h6, .h6 {
34
- @include font-size(12px);
35
- }
36
-
37
- @include breakpoint(small) {
38
- h1, .h1 {
39
- @include font-size(32px);
40
- }
41
-
42
- h2, .h2 {
43
- @include font-size(24px);
44
- }
45
-
46
- h3, .h3 {
47
- @include font-size(20px);
48
- }
49
-
50
- h4, .h4 {
51
- @include font-size(18px);
52
- }
53
-
54
- h5, .h5 {
55
- @include font-size(16px);
56
- }
57
-
58
- h6, .h6 {
59
- @include font-size(14px);
60
- }
61
- }
62
-
63
- @include breakpoint(medium) {
64
- h1, .h1 {
65
- @include font-size($h1-size);
66
- }
67
-
68
- h2, .h2 {
69
- @include font-size($h2-size);
70
- }
71
-
72
- h3, .h3 {
73
- @include font-size($h3-size);
74
- }
75
-
76
- h4, .h4 {
77
- @include font-size($h4-size);
78
- }
79
-
80
- h5, .h5 {
81
- @include font-size($h5-size);
82
- }
83
-
84
- h6, .h6 {
85
- @include font-size($h6-size);
86
- }
87
- }
88
-
89
- h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
90
- .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a,
91
- .giga a, .mega a, .kilo a { font-weight: inherit; }
92
-
93
- h1 small, h2 small, h3 small, h4 small, h5 small, h6 small,
94
- .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small,
95
- .giga small, .mega small, .kilo small {
96
- font-size: 65% !important;
97
- line-height: 1;
98
- }
99
-
100
-
101
- // Extra-large heading classes
88
+ @include font-size($h6-size);
89
+ }
90
+ }
91
+
92
+ h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
93
+ .h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a,
94
+ .giga a, .mega a, .kilo a { font-weight: inherit; }
95
+
96
+ h1 small, h2 small, h3 small, h4 small, h5 small, h6 small,
97
+ .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small,
98
+ .giga small, .mega small, .kilo small {
99
+ font-size: 65% !important;
100
+ line-height: 1;
101
+ }
102
+
103
+
104
+ // Extra-large heading classes
105
+ .giga {
106
+ @include font-size(48px);
107
+ }
108
+
109
+ .mega {
110
+ @include font-size(40px);
111
+ }
112
+
113
+ .kilo {
114
+ @include font-size(32px);
115
+ }
116
+
117
+ @include breakpoint(small) {
102
118
  .giga {
103
- @include font-size(48px);
119
+ @include font-size(64px);
120
+ }
121
+
122
+ .mega {
123
+ @include font-size(48px);
124
+ }
125
+
126
+ .kilo {
127
+ @include font-size(32px);
104
128
  }
129
+ }
105
130
 
131
+ @include breakpoint(large) {
132
+ .giga {
133
+ @include font-size(80px);
134
+ }
135
+
106
136
  .mega {
107
- @include font-size(40px);
137
+ @include font-size(64px);
108
138
  }
139
+
140
+ .kilo {
141
+ @include font-size(48px);
142
+ }
143
+ }
109
144
 
145
+ @include breakpoint(extra-large) {
146
+ .giga {
147
+ @include font-size($giga-size);
148
+ }
149
+
150
+ .mega {
151
+ @include font-size($mega-size);
152
+ }
153
+
110
154
  .kilo {
111
- @include font-size(32px);
112
- }
113
-
114
- @include breakpoint(small) {
115
- .giga {
116
- @include font-size(64px);
117
- }
118
-
119
- .mega {
120
- @include font-size(48px);
121
- }
122
-
123
- .kilo {
124
- @include font-size(32px);
125
- }
126
- }
127
-
128
- @include breakpoint(large) {
129
- .giga {
130
- @include font-size(80px);
131
- }
132
-
133
- .mega {
134
- @include font-size(64px);
135
- }
136
-
137
- .kilo {
138
- @include font-size(48px);
139
- }
140
- }
141
-
142
- @include breakpoint(extra-large) {
143
- .giga {
144
- @include font-size($giga-size);
145
- }
146
-
147
- .mega {
148
- @include font-size($mega-size);
149
- }
150
-
151
- .kilo {
152
- @include font-size($kilo-size);
153
- }
154
- }
155
- }
155
+ @include font-size($kilo-size);
156
+ }
157
+ }
158
+ }
data/app/assets/stylesheets/base/_lists.scss CHANGED
@@ -1,125 +1,125 @@
1
1
  @if $use-lists == true {
2
- //------------------------------------//
3
- // $LISTS
4
- //------------------------------------//
5
- ul {
6
- margin-left: 20px;
7
- padding-left: 0px;
2
+ //------------------------------------
3
+ // LISTS
4
+ //------------------------------------
5
+ ul {
6
+ margin-left: 20px;
7
+ padding-left: 0px;
8
+ }
9
+
10
+ ol {
11
+ margin-left: 0px;
12
+ padding-left: 20px;
13
+ }
14
+
15
+ ul li,
16
+ ol li {
17
+ line-height: 1.75em;
18
+ position: relative;
19
+ }
20
+
21
+ ul ul {
22
+ list-style-type: circle;
23
+ margin-bottom: auto;
24
+
25
+ ul { list-style-type: square; }
26
+ }
27
+
28
+ ol ol {
29
+ list-style-type: lower-latin;
30
+ margin-bottom: auto;
31
+
32
+ ol { list-style-type: lower-roman; }
33
+ }
34
+
35
+ @include breakpoint(small) { ul li ul { margin-left: 20px; } }
36
+
37
+
38
+ // Unstyled
39
+ .list-unstyled {
40
+ margin-left: 0px;
41
+ list-style: none;
42
+
43
+ li ul {
44
+ list-style: none;
45
+
46
+ li ul { list-style: none; }
8
47
  }
9
-
10
- ol {
11
- margin-left: 0px;
12
- padding-left: 20px;
48
+ }
49
+
50
+
51
+ // Line
52
+ .list-line li {
53
+ border-bottom: 1px solid #eee;
54
+ padding: 5px 0;
55
+
56
+ &:last-child,
57
+ li { border-bottom: none; }
58
+ }
59
+
60
+
61
+ // Inline
62
+ .list-inline {
63
+ display: block;
64
+ margin-left: 0px;
65
+
66
+ li {
67
+ border-bottom: none;
68
+
69
+ &:last-child { margin-right: 0px; }
13
70
  }
14
-
15
- ul li,
16
- ol li {
17
- line-height: 1.75em;
18
- position: relative;
71
+ }
72
+
73
+ @include breakpoint(extra-small) {
74
+ .list-inline li {
75
+ display: inline;
76
+ margin-right: 25px;
77
+
78
+ &:last-child { margin-right: 0px; }
19
79
  }
20
-
21
- ul ul {
22
- list-style-type: circle;
23
- margin-bottom: auto;
24
-
25
- ul { list-style-type: square; }
80
+
81
+ .list-line.list-inline li {
82
+ margin-right: 15px;
83
+
84
+ &:after {
85
+ color: #e6e8ea;
86
+ content: "|";
87
+ margin-left: 15px;
88
+ }
89
+
90
+ &:last-child:after { content: ""; }
26
91
  }
92
+ }
27
93
 
28
- ol ol {
29
- list-style-type: lower-latin;
30
- margin-bottom: auto;
31
-
32
- ol { list-style-type: lower-roman; }
33
- }
34
94
 
35
- @include breakpoint(small) { ul li ul { margin-left: 20px; } }
95
+ // Fills
96
+ .list-fill-even li,
97
+ .list-fill-odd li { padding-left: 5px; }
36
98
 
99
+ .list-fill-even li:nth-child(even),
100
+ .list-fill-odd li:nth-child(odd) { background-color: #f9f9f9; }
37
101
 
38
- // Unstyled
39
- .list-unstyled {
40
- margin-left: 0px;
41
- list-style: none;
42
-
43
- li ul {
44
- list-style: none;
45
-
46
- li ul { list-style: none; }
47
- }
48
- }
49
-
50
-
51
- // Line
52
- .list-line li {
53
- border-bottom: 1px solid #eee;
54
- padding: 5px 0;
55
-
56
- &:last-child,
57
- li { border-bottom: none; }
58
- }
59
102
 
103
+ // Definition Lists
104
+ dt { font-weight: bold; }
60
105
 
61
- // Inline
62
- .list-inline {
63
- display: block;
64
- margin-left: 0px;
65
-
66
- li {
67
- border-bottom: none;
68
-
69
- &:last-child { margin-right: 0px; }
70
- }
71
- }
106
+ dd { margin-left: 0px; }
72
107
 
73
- @include breakpoint(extra-small) {
74
- .list-inline li {
75
- display: inline;
76
- margin-right: 25px;
77
-
78
- &:last-child { margin-right: 0px; }
108
+ @include breakpoint(small) {
109
+ dl.dl-horizontal {
110
+ overflow: hidden;
111
+ > {
112
+ dt {
113
+ width: 160px;
114
+ float: left;
115
+ clear: both;
116
+ overflow: hidden;
117
+ text-overflow: ellipsis;
118
+ white-space: nowrap;
79
119
  }
80
120
 
81
- .list-line.list-inline li {
82
- margin-right: 15px;
83
-
84
- &:after {
85
- color: #e6e8ea;
86
- content: "|";
87
- margin-left: 15px;
88
- }
89
-
90
- &:last-child:after { content: ""; }
91
- }
92
- }
93
-
94
-
95
- // Fills
96
- .list-fill-even li,
97
- .list-fill-odd li { padding-left: 5px; }
98
-
99
- .list-fill-even li:nth-child(even),
100
- .list-fill-odd li:nth-child(odd) { background-color: #f9f9f9; }
101
-
102
-
103
- // Definition Lists
104
- dt { font-weight: bold; }
105
-
106
- dd { margin-left: 0px; }
107
-
108
- @include breakpoint(small) {
109
- dl.dl-horizontal {
110
- overflow: hidden;
111
- > {
112
- dt {
113
- width: 160px;
114
- float: left;
115
- clear: both;
116
- overflow: hidden;
117
- text-overflow: ellipsis;
118
- white-space: nowrap;
119
- }
120
-
121
- dd { margin-left: 180px; }
122
- }
123
- }
121
+ dd { margin-left: 180px; }
122
+ }
124
123
  }
124
+ }
125
125
  }