concisecss 0.0.3 → 0.0.4

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 (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
  }