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.
- checksums.yaml +4 -4
- data/README.md +1 -1
- data/app/assets/javascripts/concisecss/close.js +4 -4
- data/app/assets/javascripts/concisecss/dropdown.js +30 -30
- data/app/assets/javascripts/concisecss/naver.js +348 -348
- data/app/assets/javascripts/concisecss/navigation.js +18 -18
- data/app/assets/javascripts/concisecss/non-responsive.js +46 -46
- data/app/assets/stylesheets/_defaults.scss +55 -58
- data/app/assets/stylesheets/base/_blockquotes.scss +32 -32
- data/app/assets/stylesheets/base/_container.scss +8 -8
- data/app/assets/stylesheets/base/_forms.scss +83 -81
- data/app/assets/stylesheets/base/_grid.scss +63 -59
- data/app/assets/stylesheets/base/_headings.scss +137 -134
- data/app/assets/stylesheets/base/_lists.scss +109 -109
- data/app/assets/stylesheets/base/_main.scss +28 -25
- data/app/assets/stylesheets/base/_selection.scss +18 -18
- data/app/assets/stylesheets/base/_tables.scss +78 -76
- data/app/assets/stylesheets/base/_type.scss +50 -50
- data/app/assets/stylesheets/concise.scss +7 -12
- data/app/assets/stylesheets/generic/_clearfix.scss +9 -9
- data/app/assets/stylesheets/generic/_conditional.scss +111 -107
- data/app/assets/stylesheets/generic/_helper.scss +81 -81
- data/app/assets/stylesheets/generic/_mixins.scss +73 -66
- data/app/assets/stylesheets/generic/_normalize.scss +189 -189
- data/app/assets/stylesheets/generic/_print.scss +105 -104
- data/app/assets/stylesheets/generic/_shared.scss +36 -32
- data/app/assets/stylesheets/objects/_badges.scss +43 -43
- data/app/assets/stylesheets/objects/_breadcrumbs.scss +30 -30
- data/app/assets/stylesheets/objects/_buttons.scss +264 -264
- data/app/assets/stylesheets/objects/_colors.scss +28 -25
- data/app/assets/stylesheets/objects/_dropdowns.scss +153 -153
- data/app/assets/stylesheets/objects/_groups.scss +82 -82
- data/app/assets/stylesheets/objects/_navigation.scss +330 -325
- data/app/assets/stylesheets/objects/_progress.scss +92 -88
- data/app/assets/stylesheets/objects/_wells.scss +93 -93
- data/lib/concisecss/concisecss_source.rb +1 -6
- data/lib/concisecss/version.rb +1 -1
- metadata +2 -3
- data/app/assets/stylesheets/generic/_debug.scss +0 -98
@@ -1,67 +1,71 @@
|
|
1
1
|
@if $use-grid == true {
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
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
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
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
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
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
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
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
|
+
}
|
@@ -1,155 +1,158 @@
|
|
1
1
|
@if $use-headings == true {
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
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
|
-
|
68
|
+
@include font-size($h1-size);
|
15
69
|
}
|
16
|
-
|
70
|
+
|
17
71
|
h2, .h2 {
|
18
|
-
|
72
|
+
@include font-size($h2-size);
|
19
73
|
}
|
20
|
-
|
74
|
+
|
21
75
|
h3, .h3 {
|
22
|
-
|
76
|
+
@include font-size($h3-size);
|
23
77
|
}
|
24
|
-
|
78
|
+
|
25
79
|
h4, .h4 {
|
26
|
-
|
80
|
+
@include font-size($h4-size);
|
27
81
|
}
|
28
|
-
|
82
|
+
|
29
83
|
h5, .h5 {
|
30
|
-
|
84
|
+
@include font-size($h5-size);
|
31
85
|
}
|
32
|
-
|
86
|
+
|
33
87
|
h6, .h6 {
|
34
|
-
|
35
|
-
}
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
112
|
-
}
|
113
|
-
|
114
|
-
|
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
|
+
}
|
@@ -1,125 +1,125 @@
|
|
1
1
|
@if $use-lists == true {
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
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
|
-
|
11
|
-
|
12
|
-
|
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
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
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
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
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
|
-
|
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
|
-
|
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
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
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
|
-
|
82
|
-
|
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
|
}
|