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/_main.scss CHANGED
@@ -1,29 +1,32 @@
1
1
  @if $use-main == true {
2
- //------------------------------------//
3
- // $MAIN
4
- //------------------------------------//
5
- @if $global-border-box == true {
6
- *{
7
- &,
8
- &:before,
9
- &:after {
10
- @include vendor(box-sizing, border-box);
11
- }
12
- }
2
+ //------------------------------------
3
+ // MAIN
4
+ //------------------------------------
5
+
6
+ // Variables
7
+ $font-size: #{($base-font-size/16px)*1em};
8
+ $line-height-integer: #{$line-height-ratio};
9
+
10
+ *{
11
+ &,
12
+ &:before,
13
+ &:after {
14
+ @include vendor(box-sizing, border-box);
13
15
  }
16
+ }
17
+
18
+ html,
19
+ body {
20
+ background-color: #fff;
21
+ color: $base-font-color;
22
+ font: normal normal $font-size/$line-height-integer $base-font-family;
23
+ margin: 0;
24
+
25
+ font-smooth: always;
26
+
27
+ -webkit-font-smoothing: antialiased;
28
+ -moz-font-smoothing: antialiased;
29
+ }
14
30
 
15
- html,
16
- body {
17
- background-color: #fff;
18
- color: $base-font-color;
19
- font: normal normal #{($base-font-size/16px)*1em}/#{$line-height-ratio} $base-font-family;
20
- margin: 0;
21
-
22
- font-smooth: always;
23
-
24
- -webkit-font-smoothing: antialiased;
25
- -moz-font-smoothing: antialiased;
26
- }
27
-
28
- html[dir="rtl"] { direction: rtl; }
31
+ html[dir="rtl"] { direction: rtl; }
29
32
  }
data/app/assets/stylesheets/base/_selection.scss CHANGED
@@ -1,21 +1,21 @@
1
1
  @if $use-selection == true {
2
- //------------------------------------//
3
- // $SELECTION
4
- //------------------------------------//
5
- * {
6
- &::-webkit-selection {
7
- background-color: $selection-background;
8
- color: $selection-color;
9
- }
10
-
11
- &::-moz-selection {
12
- background-color: $selection-background;
13
- color: $selection-color;
14
- }
15
-
16
- &::selection {
17
- background-color: $selection-background;
18
- color: $selection-color;
19
- }
2
+ //------------------------------------
3
+ // SELECTION
4
+ //------------------------------------
5
+ * {
6
+ &::-webkit-selection {
7
+ background-color: $selection-background;
8
+ color: $selection-color;
20
9
  }
10
+
11
+ &::-moz-selection {
12
+ background-color: $selection-background;
13
+ color: $selection-color;
14
+ }
15
+
16
+ &::selection {
17
+ background-color: $selection-background;
18
+ color: $selection-color;
19
+ }
20
+ }
21
21
  }
data/app/assets/stylesheets/base/_tables.scss CHANGED
@@ -1,83 +1,85 @@
1
1
  @if $use-tables == true {
2
- //------------------------------------//
3
- // $TABLES
4
- //------------------------------------//
5
- table {
6
- &.table {
7
- empty-cells: show;
8
- width: 100%;
9
-
10
- caption {
11
- color: #000;
12
- font: italic 85%/1 arial, sans-serif;
13
- padding: 1em 0;
14
- text-align: center;
15
- }
16
-
17
- thead { border-bottom: 2px solid #ededed; }
18
-
19
- th { padding: 12px 15px; }
20
-
21
- td {
22
- padding: 12px 15px;
23
- border-top: 1px solid #ededed;
24
- }
25
- }
26
-
27
-
28
- // Background colors
29
- .bg-light-green { color: $color-green; }
30
-
31
- .bg-light-blue { color: $color-blue; }
32
-
33
- .bg-light-yellow { color: $color-yellow; }
34
-
35
- .bg-light-red { color: $color-red; }
36
-
37
-
38
- // Full-width table
39
- &.table-full,
40
- &.table.table-full { width: 100%; }
41
-
42
-
43
- // Borders
44
- &.table-border-all, &.table-border-outer { border: 1px solid #ededed; }
45
-
46
- &.table-border-all {
47
- th,
48
- td { border-right: 1px solid #ededed; }
49
- }
50
-
51
- &.table-border-inner {
52
- th,
53
- td { border-right: 1px solid #ededed; }
54
- }
55
-
56
-
57
- // Hovers
58
- &.table-hover-row tr:hover td,
59
- &.table-hover-cell td:hover { background-color: #f9f9f9; }
60
-
61
-
62
- // Striped
63
- &.table-fill-even tbody tr:nth-child(even),
64
- &.table-fill-odd tbody tr:nth-child(odd) { background-color: #f9f9f9; }
2
+ //------------------------------------
3
+ // TABLES
4
+ //------------------------------------
5
+ table {
6
+ &.table {
7
+ empty-cells: show;
8
+ width: 100%;
9
+
10
+ caption {
11
+ color: #000;
12
+ font: italic 85%/1 arial, sans-serif;
13
+ padding: 1em 0;
14
+ text-align: center;
15
+ }
16
+
17
+ thead { border-bottom: 2px solid #ededed; }
18
+
19
+ th { padding: 12px 15px; }
20
+
21
+ td {
22
+ padding: 12px 15px;
23
+ border-top: 1px solid #ededed;
24
+ }
65
25
  }
26
+
66
27
 
67
- @include breakpoint(extra-small) {
68
- table.table {
69
- width: auto;
70
-
71
- th, td { padding: 10px 50px 10px 25px; }
72
- }
28
+ @if $use-table-styles == true {
29
+ // Background colors
30
+ .bg-light-green { color: $color-green; }
31
+
32
+ .bg-light-blue { color: $color-blue; }
33
+
34
+ .bg-light-yellow { color: $color-yellow; }
35
+
36
+ .bg-light-red { color: $color-red; }
37
+
38
+
39
+ // Full-width table
40
+ &.table-full,
41
+ &.table.table-full { width: 100%; }
42
+
43
+
44
+ // Borders
45
+ &.table-border-all, &.table-border-outer { border: 1px solid #ededed; }
46
+
47
+ &.table-border-all {
48
+ th,
49
+ td { border-right: 1px solid #ededed; }
50
+ }
51
+
52
+ &.table-border-inner {
53
+ th,
54
+ td { border-right: 1px solid #ededed; }
55
+ }
56
+
57
+
58
+ // Hovers
59
+ &.table-hover-row tr:hover td,
60
+ &.table-hover-cell td:hover { background-color: #f9f9f9; }
61
+
62
+
63
+ // Striped
64
+ &.table-fill-even tbody tr:nth-child(even),
65
+ &.table-fill-odd tbody tr:nth-child(odd) { background-color: #f9f9f9; }
73
66
  }
67
+ }
74
68
 
75
-
76
- // Responsive tables
77
- .table-responsive {
78
- overflow: auto;
79
- width: 100%;
80
-
81
- table { margin-bottom: 0; }
69
+ @include breakpoint(extra-small) {
70
+ table.table {
71
+ width: auto;
72
+
73
+ th, td { padding: 10px 50px 10px 25px; }
82
74
  }
75
+ }
76
+
77
+
78
+ // Responsive tables
79
+ .table-responsive {
80
+ overflow: auto;
81
+ width: 100%;
82
+
83
+ table { margin-bottom: 0; }
84
+ }
83
85
  }
data/app/assets/stylesheets/base/_type.scss CHANGED
@@ -1,64 +1,64 @@
1
1
  @if $use-typography == true {
2
- //------------------------------------//
3
- // $TYPE
4
- //------------------------------------//
5
- // Links
6
- a {
7
- color: $base-link-color;
8
- text-decoration: none;
9
-
10
- &:hover,
11
- &:visited {
12
- color: lighten($base-link-color, 10%);
13
- cursor: pointer;
14
- text-decoration: underline;
15
- }
2
+ //------------------------------------
3
+ // TYPE
4
+ //------------------------------------
5
+ // Links
6
+ a {
7
+ color: $base-link-color;
8
+ text-decoration: none;
9
+
10
+ &:hover,
11
+ &:visited {
12
+ color: lighten($base-link-color, 10%);
13
+ cursor: pointer;
14
+ text-decoration: underline;
16
15
  }
16
+ }
17
17
 
18
- p a {
19
- line-height: inherit;
20
-
21
- &:visited { line-height: inherit; }
22
- }
18
+ p a {
19
+ line-height: inherit;
20
+
21
+ &:visited { line-height: inherit; }
22
+ }
23
23
 
24
24
 
25
- // Sizing
26
- small,
27
- .small {
28
- @include font-size($small-size);
29
- }
25
+ // Sizing
26
+ small,
27
+ .small {
28
+ @include font-size($small-size);
29
+ }
30
30
 
31
- .micro {
32
- @include font-size($micro-size);
33
- }
31
+ .micro {
32
+ @include font-size($micro-size);
33
+ }
34
34
 
35
35
 
36
- // Addresses
37
- address {
38
- font-style: normal;
39
-
40
- > strong { display: block; }
41
- }
36
+ // Addresses
37
+ address {
38
+ font-style: normal;
39
+
40
+ > strong { display: block; }
41
+ }
42
42
 
43
43
 
44
- // Other elements
45
- abbr {
46
- &[title], &[data-original-title] {
47
- cursor: help;
48
- border-bottom: 1px dotted #999;
49
- }
44
+ // Other elements
45
+ abbr {
46
+ &[title], &[data-original-title] {
47
+ cursor: help;
48
+ border-bottom: 1px dotted #999;
50
49
  }
50
+ }
51
51
 
52
- acronym {
53
- cursor: help;
54
- border-bottom: 1px dashed blue;
55
- }
52
+ acronym {
53
+ cursor: help;
54
+ border-bottom: 1px dashed blue;
55
+ }
56
56
 
57
- kbd {
58
- background-color: #333;
59
- border-radius: 4px;
60
- color: #fff;
61
- font-size: 90%;
62
- padding: 1px 4px;
63
- }
57
+ kbd {
58
+ background-color: #333;
59
+ border-radius: 4px;
60
+ color: #fff;
61
+ font-size: 90%;
62
+ padding: 1px 4px;
63
+ }
64
64
  }
data/app/assets/stylesheets/concise.scss CHANGED
@@ -12,12 +12,9 @@
12
12
 
13
13
 
14
14
 
15
- //------------------------------------//
16
- // $CONTENTS
17
- //------------------------------------//
18
- //
19
- // CONTENTS
20
- // IMPORTS
15
+ //------------------------------------
16
+ // CONTENTS
17
+ //------------------------------------
21
18
  //
22
19
  // MIXINS
23
20
  // NORMALIZE
@@ -48,16 +45,15 @@
48
45
  // HELPER
49
46
  // CONDITIONAL
50
47
  // PRINT
51
- // DEBUG
52
48
  //
53
49
  //
54
50
 
55
51
 
56
52
 
57
53
 
58
- //------------------------------------//
59
- // $IMPORTS
60
- //------------------------------------//
54
+ //------------------------------------
55
+ // IMPORTS
56
+ //------------------------------------
61
57
  // Generic utility styles
62
58
  @import "defaults";
63
59
  @import "generic/mixins";
@@ -100,5 +96,4 @@
100
96
  // Helper classes
101
97
  @import "generic/helper";
102
98
  @import "generic/conditional";
103
- @import "generic/print";
104
- @import "generic/debug";
99
+ @import "generic/print";
data/app/assets/stylesheets/generic/_clearfix.scss CHANGED
@@ -1,12 +1,12 @@
1
1
  @if $use-clearfix == true {
2
- //------------------------------------//
3
- // $CLEARFIX
4
- //------------------------------------//
5
- .clearfix {
6
- &:after{
7
- content: "";
8
- display: table;
9
- clear: both;
10
- }
2
+ //------------------------------------
3
+ // CLEARFIX
4
+ //------------------------------------
5
+ .clearfix {
6
+ &:after{
7
+ content: "";
8
+ display: table;
9
+ clear: both;
11
10
  }
11
+ }
12
12
  }
data/app/assets/stylesheets/generic/_conditional.scss CHANGED
@@ -1,122 +1,126 @@
1
1
  @if $use-conditional == true {
2
- //------------------------------------//
3
- // $CONDITIONAL
4
- //------------------------------------//
5
- .show-extra-small,
6
- .hide-small,
7
- .hide-medium,
8
- .hide-large,
9
- .hide-extra-large,
10
- .hide-print,
11
- .hide-hd {
12
- display: block;
13
- visibility: visible;
2
+ //------------------------------------
3
+ // CONDITIONAL
4
+ //------------------------------------
5
+
6
+ // Thanks to Bootstrap for having a good method of
7
+ // showing/hiding content via breakpoints
8
+ // (http://getbootstrap.com/css/#responsive-utilities)
9
+ .show-extra-small,
10
+ .hide-small,
11
+ .hide-medium,
12
+ .hide-large,
13
+ .hide-extra-large,
14
+ .hide-print,
15
+ .hide-hd {
16
+ display: block;
17
+ visibility: visible;
18
+ }
19
+
20
+ .hide-extra-small,
21
+ .show-small,
22
+ .show-medium,
23
+ .show-large,
24
+ .show-extra-large,
25
+ .show-print,
26
+ .show-hd {
27
+ display: none;
28
+ visibility: hidden;
29
+ }
30
+
31
+ @include breakpoint(small) {
32
+ .show-small,
33
+ .hide-extra-small,
34
+ .hide-medium,
35
+ .hide-large,
36
+ .hide-extra-large {
37
+ display: block;
38
+ visibility: visible;
14
39
  }
15
40
 
16
- .hide-extra-small,
41
+ .hide-small,
42
+ .show-extra-small,
43
+ .show-medium,
44
+ .show-large,
45
+ .show-extra-large {
46
+ display: none;
47
+ visibility: hidden;
48
+ }
49
+ }
50
+
51
+ @include breakpoint(medium) {
52
+ .show-medium,
53
+ .hide-small,
54
+ .hide-extra-small,
55
+ .hide-large,
56
+ .hide-extra-large {
57
+ display: block;
58
+ visibility: visible;
59
+ }
60
+
61
+ .hide-medium,
17
62
  .show-small,
18
- .show-medium,
63
+ .show-extra-small,
19
64
  .show-large,
20
- .show-extra-large,
21
- .show-print,
22
- .show-hd {
23
- display: none;
24
- visibility: hidden;
65
+ .show-extra-large {
66
+ display: none;
67
+ visibility: hidden;
25
68
  }
69
+ }
26
70
 
27
- @include breakpoint(small) {
28
- .show-small,
29
- .hide-extra-small,
30
- .hide-medium,
31
- .hide-large,
32
- .hide-extra-large {
33
- display: block;
34
- visibility: visible;
35
- }
36
-
37
- .hide-small,
38
- .show-extra-small,
39
- .show-medium,
40
- .show-large,
41
- .show-extra-large {
42
- display: none;
43
- visibility: hidden;
44
- }
71
+ @include breakpoint(large) {
72
+ .show-large,
73
+ .hide-extra-small,
74
+ .hide-small,
75
+ .hide-medium,
76
+ .hide-extra-large {
77
+ display: block;
78
+ visibility: visible;
45
79
  }
46
80
 
47
- @include breakpoint(medium) {
48
- .show-medium,
49
- .hide-small,
50
- .hide-extra-small,
51
- .hide-large,
52
- .hide-extra-large {
53
- display: block;
54
- visibility: visible;
55
- }
56
-
57
- .hide-medium,
58
- .show-small,
59
- .show-extra-small,
60
- .show-large,
61
- .show-extra-large {
62
- display: none;
63
- visibility: hidden;
64
- }
81
+ .hide-large,
82
+ .show-extra-small,
83
+ .show-small,
84
+ .show-medium,
85
+ .show-extra-large {
86
+ display: none;
87
+ visibility: hidden;
65
88
  }
66
-
67
- @include breakpoint(large) {
68
- .show-large,
69
- .hide-extra-small,
70
- .hide-small,
71
- .hide-medium,
72
- .hide-extra-large {
73
- display: block;
74
- visibility: visible;
75
- }
76
-
77
- .hide-large,
78
- .show-extra-small,
79
- .show-small,
80
- .show-medium,
81
- .show-extra-large {
82
- display: none;
83
- visibility: hidden;
84
- }
89
+ }
90
+
91
+ @include breakpoint(extra-large) {
92
+ .show-extra-large,
93
+ .hide-extra-small,
94
+ .hide-small,
95
+ .hide-medium,
96
+ .hide-large {
97
+ display: block;
98
+ visibility: visible;
85
99
  }
86
100
 
87
- @include breakpoint(extra-large) {
88
- .show-extra-large,
89
- .hide-extra-small,
90
- .hide-small,
91
- .hide-medium,
92
- .hide-large {
93
- display: block;
94
- visibility: visible;
95
- }
96
-
97
- .hide-extra-large,
98
- .show-extra-small,
99
- .show-small,
100
- .show-medium,
101
- .show-large {
102
- display: none;
103
- visibility: hidden;
104
- }
101
+ .hide-extra-large,
102
+ .show-extra-small,
103
+ .show-small,
104
+ .show-medium,
105
+ .show-large {
106
+ display: none;
107
+ visibility: hidden;
105
108
  }
109
+ }
106
110
 
107
- // HiDPI and retina
108
- @media only screen and (-moz-min-device-pixel-ratio: 1.5),
109
- only screen and (-o-min-device-pixel-ratio: 3 / 2),
110
- only screen and (-webkit-min-device-pixel-ratio: 1.5),
111
- only screen and (min-device-pixel-ratio: 1.5) {
112
- .show-hd {
113
- display: block;
114
- visibility: visible;
115
- }
116
-
117
- .hide-hd {
118
- display: none;
119
- visibility: hidden;
120
- }
111
+ // HiDPI and retina
112
+ @media only screen and (-moz-min-device-pixel-ratio: 1.5),
113
+ only screen and (-o-min-device-pixel-ratio: 3 / 2),
114
+ only screen and (-webkit-min-device-pixel-ratio: 1.5),
115
+ only screen and (min-device-pixel-ratio: 1.5) {
116
+ .show-hd {
117
+ display: block;
118
+ visibility: visible;
119
+ }
120
+
121
+ .hide-hd {
122
+ display: none;
123
+ visibility: hidden;
121
124
  }
122
- }
125
+ }
126
+ }