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,29 +1,32 @@
|
|
|
1
1
|
@if $use-main == true {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
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
|
-
|
|
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
|
}
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
@if $use-selection == true {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
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
|
}
|
|
@@ -1,83 +1,85 @@
|
|
|
1
1
|
@if $use-tables == true {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
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
|
-
@
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
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
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
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
|
}
|
|
@@ -1,64 +1,64 @@
|
|
|
1
1
|
@if $use-typography == true {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
18
|
+
p a {
|
|
19
|
+
line-height: inherit;
|
|
20
|
+
|
|
21
|
+
&:visited { line-height: inherit; }
|
|
22
|
+
}
|
|
23
23
|
|
|
24
24
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
25
|
+
// Sizing
|
|
26
|
+
small,
|
|
27
|
+
.small {
|
|
28
|
+
@include font-size($small-size);
|
|
29
|
+
}
|
|
30
30
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
31
|
+
.micro {
|
|
32
|
+
@include font-size($micro-size);
|
|
33
|
+
}
|
|
34
34
|
|
|
35
35
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
36
|
+
// Addresses
|
|
37
|
+
address {
|
|
38
|
+
font-style: normal;
|
|
39
|
+
|
|
40
|
+
> strong { display: block; }
|
|
41
|
+
}
|
|
42
42
|
|
|
43
43
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
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
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
52
|
+
acronym {
|
|
53
|
+
cursor: help;
|
|
54
|
+
border-bottom: 1px dashed blue;
|
|
55
|
+
}
|
|
56
56
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
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
|
}
|
|
@@ -12,12 +12,9 @@
|
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
//
|
|
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
|
-
//
|
|
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";
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
@if $use-clearfix == true {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
}
|
|
2
|
+
//------------------------------------
|
|
3
|
+
// CLEARFIX
|
|
4
|
+
//------------------------------------
|
|
5
|
+
.clearfix {
|
|
6
|
+
&:after{
|
|
7
|
+
content: "";
|
|
8
|
+
display: table;
|
|
9
|
+
clear: both;
|
|
11
10
|
}
|
|
11
|
+
}
|
|
12
12
|
}
|
|
@@ -1,122 +1,126 @@
|
|
|
1
1
|
@if $use-conditional == true {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
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-
|
|
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-
|
|
63
|
+
.show-extra-small,
|
|
19
64
|
.show-large,
|
|
20
|
-
.show-extra-large
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
display: none;
|
|
24
|
-
visibility: hidden;
|
|
65
|
+
.show-extra-large {
|
|
66
|
+
display: none;
|
|
67
|
+
visibility: hidden;
|
|
25
68
|
}
|
|
69
|
+
}
|
|
26
70
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
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
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
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
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
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
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
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
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
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
|
+
}
|