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,117 +1,117 @@
|
|
1
1
|
@if $use-helper == true {
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
2
|
+
//------------------------------------
|
3
|
+
// HELPER
|
4
|
+
//------------------------------------
|
5
|
+
// Add/remove floats
|
6
|
+
.float-left { float: left !important; }
|
7
7
|
|
8
|
-
|
8
|
+
.float-right { float: right !important; }
|
9
9
|
|
10
|
-
|
10
|
+
.float-none { float: none !important; }
|
11
11
|
|
12
12
|
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
13
|
+
// Position elements
|
14
|
+
.align-center {
|
15
|
+
display: block;
|
16
|
+
margin-left: auto;
|
17
|
+
margin-right: auto;
|
18
|
+
}
|
19
19
|
|
20
|
-
|
20
|
+
.no-margin { margin: 0 !important; }
|
21
21
|
|
22
|
-
|
22
|
+
.icon-alone { display: inline-block; }
|
23
23
|
|
24
24
|
|
25
|
-
|
26
|
-
|
25
|
+
// Displaying content
|
26
|
+
.inline { display: block; }
|
27
27
|
|
28
|
-
|
28
|
+
@include breakpoint(extra-small) { .inline { display: inline; } }
|
29
29
|
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
30
|
+
.show {
|
31
|
+
display: block;
|
32
|
+
visibility: visible;
|
33
|
+
}
|
34
34
|
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
35
|
+
.hide {
|
36
|
+
display: none;
|
37
|
+
visibility: hidden;
|
38
|
+
}
|
39
39
|
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
40
|
+
.screen-reader {
|
41
|
+
border: 0;
|
42
|
+
clip: rect(0 0 0 0);
|
43
|
+
height: 1px;
|
44
|
+
margin: -1px;
|
45
|
+
overflow: hidden;
|
46
|
+
padding: 0;
|
47
|
+
position: absolute;
|
48
|
+
width: 1px;
|
49
|
+
}
|
50
50
|
|
51
51
|
|
52
|
-
|
53
|
-
|
52
|
+
// Full-width elements
|
53
|
+
.full { width: 100%; }
|
54
54
|
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
55
|
+
img.full {
|
56
|
+
max-width: 100%;
|
57
|
+
height: auto;
|
58
|
+
display: block;
|
59
|
+
width: auto;
|
60
|
+
}
|
61
61
|
|
62
62
|
|
63
|
-
|
64
|
-
|
63
|
+
// Text alignment
|
64
|
+
.text-left { text-align: left; }
|
65
65
|
|
66
|
-
|
66
|
+
.text-right { text-align: right; }
|
67
67
|
|
68
|
-
|
68
|
+
.text-center { text-align: center; }
|
69
69
|
|
70
|
-
|
70
|
+
.text-justify { text-align: justify; }
|
71
71
|
|
72
72
|
|
73
|
-
|
74
|
-
|
73
|
+
// Font weights
|
74
|
+
.weight-light { font-weight: 300 !important; }
|
75
75
|
|
76
|
-
|
76
|
+
.weight-normal { font-weight: 400 !important; }
|
77
77
|
|
78
|
-
|
78
|
+
.weight-semibold { font-weight: 600 !important; }
|
79
79
|
|
80
80
|
|
81
|
-
|
82
|
-
|
81
|
+
// All-caps text
|
82
|
+
.text-uppercase { text-transform: uppercase; }
|
83
83
|
|
84
84
|
|
85
|
-
|
86
|
-
|
85
|
+
// Stylized ampersand
|
86
|
+
.amp { font: italic 110% Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif !important; }
|
87
87
|
|
88
88
|
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
89
|
+
// Hide text
|
90
|
+
.text-hide {
|
91
|
+
border: 0;
|
92
|
+
background-color: transparent;
|
93
|
+
color: transparent;
|
94
|
+
font: 0 / 0 a;
|
95
|
+
text-shadow: none;
|
96
|
+
}
|
97
97
|
|
98
98
|
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
99
|
+
// Caret icon
|
100
|
+
.caret {
|
101
|
+
border-top: 5px solid;
|
102
|
+
border-right: 5px solid transparent;
|
103
|
+
border-left: 5px solid transparent;
|
104
|
+
display: inline-block;
|
105
|
+
margin: 0 0 3px 4px;
|
106
|
+
vertical-align: middle;
|
107
|
+
width: 0;
|
108
|
+
}
|
109
109
|
|
110
110
|
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
111
|
+
// Border radius
|
112
|
+
.border-radius { border-radius: $border-radius; }
|
113
|
+
|
114
|
+
|
115
|
+
// Pill style
|
116
|
+
.pill { border-radius: 25px; }
|
117
117
|
}
|
@@ -2,16 +2,21 @@
|
|
2
2
|
// Passing in a single value will create font-sizing in
|
3
3
|
// pixels, rems as well as a proper line-height.
|
4
4
|
//
|
5
|
-
//
|
5
|
+
// `@include font-size(24px);`
|
6
6
|
//
|
7
7
|
//
|
8
|
-
|
9
|
-
|
10
|
-
|
8
|
+
// Big thanks to inuitcss for inspiration behind this
|
9
|
+
// (https://github.com/csswizardry/inuit.css/blob/master/generic/_mixins.scss)
|
10
|
+
@mixin font-size($font-size, $line-height: true) {
|
11
|
+
$rem-size: ($font-size / $base-font-size) * 1rem;
|
12
|
+
$line-height-size: ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
|
13
|
+
|
14
|
+
font-size: $font-size;
|
15
|
+
font-size: $rem-size;
|
11
16
|
|
12
|
-
|
13
|
-
|
14
|
-
|
17
|
+
@if $line-height == true {
|
18
|
+
line-height: $line-height-size;
|
19
|
+
}
|
15
20
|
}
|
16
21
|
|
17
22
|
|
@@ -19,15 +24,17 @@
|
|
19
24
|
// Proper vendor prefixes are created just by
|
20
25
|
// passing a property value and size value.
|
21
26
|
//
|
22
|
-
//
|
27
|
+
// `@include vendor(border-radius, 4px);`
|
23
28
|
//
|
24
29
|
//
|
30
|
+
// Thanks to inuitcss for this handy mixin
|
31
|
+
// (https://github.com/csswizardry/inuit.css/blob/master/generic/_mixins.scss)
|
25
32
|
@mixin vendor($property, $value...) {
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
33
|
+
-webkit-#{$property}: $value;
|
34
|
+
-moz-#{$property}: $value;
|
35
|
+
-ms-#{$property}: $value;
|
36
|
+
-o-#{$property}: $value;
|
37
|
+
#{$property}: $value;
|
31
38
|
}
|
32
39
|
|
33
40
|
|
@@ -37,36 +44,36 @@
|
|
37
44
|
// create styles that are built from the ground-up to be
|
38
45
|
// mobile friendly.
|
39
46
|
//
|
40
|
-
//
|
47
|
+
// `@include breakpoint(extra-small) { ... }`
|
41
48
|
//
|
42
49
|
//
|
43
50
|
@mixin breakpoint($point) {
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
51
|
+
@if $point == extra-small {
|
52
|
+
@media (min-width: $extra-small-start) { @content; }
|
53
|
+
}
|
54
|
+
|
55
|
+
@else if $point == small {
|
56
|
+
@media (min-width: $small-start) { @content; }
|
57
|
+
}
|
58
|
+
|
59
|
+
@else if $point == medium {
|
60
|
+
@media (min-width: $medium-start) { @content; }
|
61
|
+
}
|
62
|
+
|
63
|
+
@else if $point == large {
|
64
|
+
@media (min-width: $large-start) { @content; }
|
65
|
+
}
|
66
|
+
|
67
|
+
@else if $point == extra-large {
|
68
|
+
@media (min-width: $extra-large-start) { @content; }
|
69
|
+
}
|
70
|
+
|
71
|
+
@else if $point == high-density {
|
72
|
+
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
|
73
|
+
only screen and (min--moz-device-pixel-ratio: 1.5),
|
74
|
+
only screen and (-o-min-device-pixel-ratio: 3/2),
|
75
|
+
only screen and (min-device-pixel-ratio: 1.5) { @content; }
|
76
|
+
}
|
70
77
|
}
|
71
78
|
|
72
79
|
|
@@ -75,20 +82,20 @@
|
|
75
82
|
// for variable `$column-number`
|
76
83
|
//
|
77
84
|
@mixin grid-setup($number: $column-number) {
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
85
|
+
// Assign percentage-based widths for columns
|
86
|
+
@for $i from 1 through $number {
|
87
|
+
.#{$column-prefix + $i} { width: 100% / $number * $i; }
|
88
|
+
}
|
89
|
+
|
90
|
+
@for $i from 1 through $number {
|
91
|
+
// Style all but the last column
|
92
|
+
$width-of-column: (100% - $gutters * ($number - 1)) / $number;
|
93
|
+
|
94
|
+
.gutters .#{$column-prefix + $i} {
|
95
|
+
width: $width-of-column * $i + $gutters * ($i - 1);
|
96
|
+
content: $gutters * ($i - 1);
|
97
|
+
}
|
98
|
+
}
|
92
99
|
}
|
93
100
|
|
94
101
|
|
@@ -97,13 +104,13 @@
|
|
97
104
|
// for variable `$column-number`
|
98
105
|
//
|
99
106
|
@mixin push-setup($number: $column-number) {
|
100
|
-
|
101
|
-
|
102
|
-
|
107
|
+
@for $i from 1 to $number {
|
108
|
+
.push-#{$i} { left: 100% / $number * $i; }
|
109
|
+
}
|
103
110
|
|
104
|
-
|
105
|
-
|
106
|
-
|
111
|
+
@for $i from 1 to $number {
|
112
|
+
.gutters .push-#{$i} { left: 100% / $number * $i - $gutters; }
|
113
|
+
}
|
107
114
|
}
|
108
115
|
|
109
116
|
|
@@ -112,11 +119,11 @@
|
|
112
119
|
// for variable `$column-number`
|
113
120
|
//
|
114
121
|
@mixin pull-setup($number: $column-number) {
|
115
|
-
|
116
|
-
|
117
|
-
|
122
|
+
@for $i from 1 to $number {
|
123
|
+
.pull-#{$i} { right: 100% / $number * $i; }
|
124
|
+
}
|
118
125
|
|
119
|
-
|
120
|
-
|
121
|
-
|
126
|
+
@for $i from 1 to $number {
|
127
|
+
.gutters .pull-#{$i} { right: 100% / $number * $i - $gutters; }
|
128
|
+
}
|
122
129
|
}
|