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
@@ -1,117 +1,117 @@
1
1
  @if $use-helper == true {
2
- //------------------------------------//
3
- // $HELPER
4
- //------------------------------------//
5
- // Add/remove floats
6
- .float-left { float: left !important; }
2
+ //------------------------------------
3
+ // HELPER
4
+ //------------------------------------
5
+ // Add/remove floats
6
+ .float-left { float: left !important; }
7
7
 
8
- .float-right { float: right !important; }
8
+ .float-right { float: right !important; }
9
9
 
10
- .float-none { float: none !important; }
10
+ .float-none { float: none !important; }
11
11
 
12
12
 
13
- // Position elements
14
- .align-center {
15
- display: block;
16
- margin-left: auto;
17
- margin-right: auto;
18
- }
13
+ // Position elements
14
+ .align-center {
15
+ display: block;
16
+ margin-left: auto;
17
+ margin-right: auto;
18
+ }
19
19
 
20
- .no-margin { margin: 0 !important; }
20
+ .no-margin { margin: 0 !important; }
21
21
 
22
- .icon-alone { display: inline-block; }
22
+ .icon-alone { display: inline-block; }
23
23
 
24
24
 
25
- // Displaying content
26
- .inline { display: block; }
25
+ // Displaying content
26
+ .inline { display: block; }
27
27
 
28
- @include breakpoint(extra-small) { .inline { display: inline; } }
28
+ @include breakpoint(extra-small) { .inline { display: inline; } }
29
29
 
30
- .show {
31
- display: block;
32
- visibility: visible;
33
- }
30
+ .show {
31
+ display: block;
32
+ visibility: visible;
33
+ }
34
34
 
35
- .hide {
36
- display: none;
37
- visibility: hidden;
38
- }
35
+ .hide {
36
+ display: none;
37
+ visibility: hidden;
38
+ }
39
39
 
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
- }
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
- // Full-width elements
53
- .full { width: 100%; }
52
+ // Full-width elements
53
+ .full { width: 100%; }
54
54
 
55
- img.full {
56
- max-width: 100%;
57
- height: auto;
58
- display: block;
59
- width: auto;
60
- }
55
+ img.full {
56
+ max-width: 100%;
57
+ height: auto;
58
+ display: block;
59
+ width: auto;
60
+ }
61
61
 
62
62
 
63
- // Text alignment
64
- .text-left { text-align: left; }
63
+ // Text alignment
64
+ .text-left { text-align: left; }
65
65
 
66
- .text-right { text-align: right; }
66
+ .text-right { text-align: right; }
67
67
 
68
- .text-center { text-align: center; }
68
+ .text-center { text-align: center; }
69
69
 
70
- .text-justify { text-align: justify; }
70
+ .text-justify { text-align: justify; }
71
71
 
72
72
 
73
- // Font weights
74
- .weight-light { font-weight: 300 !important; }
73
+ // Font weights
74
+ .weight-light { font-weight: 300 !important; }
75
75
 
76
- .weight-normal { font-weight: 400 !important; }
76
+ .weight-normal { font-weight: 400 !important; }
77
77
 
78
- .weight-semibold { font-weight: 600 !important; }
78
+ .weight-semibold { font-weight: 600 !important; }
79
79
 
80
80
 
81
- // All-caps text
82
- .text-uppercase { text-transform: uppercase; }
81
+ // All-caps text
82
+ .text-uppercase { text-transform: uppercase; }
83
83
 
84
84
 
85
- // Stylized ampersand
86
- .amp { font: italic 110% Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif !important; }
85
+ // Stylized ampersand
86
+ .amp { font: italic 110% Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif !important; }
87
87
 
88
88
 
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
- }
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
- // 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
- }
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
- // Border radius
112
- .border-radius { border-radius: $border-radius; }
113
-
114
-
115
- // Pill style
116
- .pill { border-radius: 25px; }
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
- // `@include font-size(24px);`
5
+ // `@include font-size(24px);`
6
6
  //
7
7
  //
8
- @mixin font-size($font-size, $line-height:true) {
9
- font-size: $font-size;
10
- font-size: ($font-size / $base-font-size) * 1rem;
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
- @if $line-height == true {
13
- line-height: ceil($font-size / $base-line-height) * ($base-line-height / $font-size);
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
- // `@include vendor(border-radius, 4px);`
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
- -webkit-#{$property}: $value;
27
- -moz-#{$property}: $value;
28
- -ms-#{$property}: $value;
29
- -o-#{$property}: $value;
30
- #{$property}: $value;
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
- // `@include breakpoint(extra-small) { [styles here] }`
47
+ // `@include breakpoint(extra-small) { ... }`
41
48
  //
42
49
  //
43
50
  @mixin breakpoint($point) {
44
- @if $point == extra-small {
45
- @media (min-width: $extra-small-start) { @content; }
46
- }
47
-
48
- @else if $point == small {
49
- @media (min-width: $small-start) { @content; }
50
- }
51
-
52
- @else if $point == medium {
53
- @media (min-width: $medium-start) { @content; }
54
- }
55
-
56
- @else if $point == large {
57
- @media (min-width: $large-start) { @content; }
58
- }
59
-
60
- @else if $point == extra-large {
61
- @media (min-width: $extra-large-start) { @content; }
62
- }
63
-
64
- @else if $point == high-density {
65
- @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
66
- only screen and (min--moz-device-pixel-ratio: 1.5),
67
- only screen and (-o-min-device-pixel-ratio: 3/2),
68
- only screen and (min-device-pixel-ratio: 1.5) { @content; }
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
- // Assign percentage-based widths for columns
79
- @for $i from 1 through $number {
80
- .#{$column-prefix + $i} { width: 100% / $number * $i; }
81
- }
82
-
83
- @for $i from 1 through $number {
84
- // Style all but the last column
85
- $width-of-column: (100% - $gutters * ($number - 1)) / $number;
86
-
87
- .gutters .#{$column-prefix + $i} {
88
- width: $width-of-column * $i + $gutters * ($i - 1);
89
- content: $gutters * ($i - 1);
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
- @for $i from 1 to $number {
101
- .push-#{$i} { left: 100% / $number * $i; }
102
- }
107
+ @for $i from 1 to $number {
108
+ .push-#{$i} { left: 100% / $number * $i; }
109
+ }
103
110
 
104
- @for $i from 1 to $number {
105
- .gutters .push-#{$i} { left: 100% / $number * $i - $gutters; }
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
- @for $i from 1 to $number {
116
- .pull-#{$i} { right: 100% / $number * $i; }
117
- }
122
+ @for $i from 1 to $number {
123
+ .pull-#{$i} { right: 100% / $number * $i; }
124
+ }
118
125
 
119
- @for $i from 1 to $number {
120
- .gutters .pull-#{$i} { right: 100% / $number * $i - $gutters; }
121
- }
126
+ @for $i from 1 to $number {
127
+ .gutters .pull-#{$i} { right: 100% / $number * $i - $gutters; }
128
+ }
122
129
  }