bullframe.css 3.8.0 → 4.0.0
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.
- package/.browserslistrc +5 -5
- package/.stylelintrc.json +10 -0
- package/CHANGELOG.md +28 -7
- package/LICENSE +20 -20
- package/README.md +25 -171
- package/dist/css/bullframe-classless-dark-prefers.css +357 -434
- package/dist/css/bullframe-classless-dark-prefers.min.css +2 -3
- package/dist/css/bullframe-classless-dark-prefers.min.css.map +1 -1
- package/dist/css/bullframe-classless-dark.css +328 -421
- package/dist/css/bullframe-classless-dark.min.css +2 -3
- package/dist/css/bullframe-classless-dark.min.css.map +1 -1
- package/dist/css/bullframe-classless.css +237 -302
- package/dist/css/bullframe-classless.min.css +2 -2
- package/dist/css/bullframe-classless.min.css.map +1 -1
- package/dist/css/bullframe-dark-prefers.css +468 -642
- package/dist/css/bullframe-dark-prefers.min.css +2 -2
- package/dist/css/bullframe-dark-prefers.min.css.map +1 -1
- package/dist/css/bullframe-dark.css +402 -602
- package/dist/css/bullframe-dark.min.css +2 -2
- package/dist/css/bullframe-dark.min.css.map +1 -1
- package/dist/css/bullframe-utilities.css +87 -125
- package/dist/css/bullframe-utilities.min.css +1 -1
- package/dist/css/bullframe-utilities.min.css.map +1 -1
- package/dist/css/bullframe.css +288 -464
- package/dist/css/bullframe.min.css +1 -1
- package/dist/css/bullframe.min.css.map +1 -1
- package/docs/test/css/style.css +130 -130
- package/docs/test/icons/safari-pinned-tab.svg +28 -28
- package/docs/test/js/vendor/html5shiv.js +335 -335
- package/docs/test/js/vendor/ie10-viewport-bug-workaround.js +20 -20
- package/gulpfile.js +5 -2
- package/index.html +1214 -1223
- package/package.json +14 -7
- package/src/scss/bullframe-classless-dark-prefers.scss +5 -5
- package/src/scss/bullframe-classless-dark.scss +5 -5
- package/src/scss/bullframe-classless.scss +1 -9
- package/src/scss/bullframe-dark-prefers.scss +4 -4
- package/src/scss/bullframe-dark.scss +4 -4
- package/src/scss/bullframe-utilities.scss +18 -18
- package/src/scss/bullframe.scss +0 -7
- package/src/scss/forms/_forms-normalization.scss +4 -2
- package/src/scss/forms/_forms-styling-radio-checkbox.scss +84 -85
- package/src/scss/forms/_forms-styling-range.scss +99 -103
- package/src/scss/forms/_forms-styling-select.scss +63 -63
- package/src/scss/forms/_forms-styling.scss +119 -121
- package/src/scss/miscellaneous/_misc-focus.scss +0 -1
- package/src/scss/miscellaneous/_misc-layout.scss +1 -36
- package/src/scss/mixins/_mixin-grid-flex.scss +83 -83
- package/src/scss/mixins/_mixin-layout.scss +42 -42
- package/src/scss/mixins/_mixin-texts.scss +38 -37
- package/src/scss/typography/_typography-blockquotes.scss +23 -23
- package/src/scss/typography/_typography-headings.scss +43 -43
- package/src/scss/typography/_typography-html-body.scss +72 -72
- package/src/scss/typography/_typography-misc.scss +3 -3
- package/src/scss/typography/_typography-monospaced-elements.scss +50 -56
- package/src/scss/utilities/_utility-buttons.scss +71 -71
- package/src/scss/utilities/_utility-embeds.scss +34 -34
- package/src/scss/utilities/_utility-filters.scss +24 -24
- package/src/scss/utilities/_utility-form-states.scss +80 -80
- package/src/scss/utilities/_utility-global-dark-classless.scss +157 -169
- package/src/scss/utilities/_utility-global-dark-prefers-classless.scss +3 -3
- package/src/scss/utilities/_utility-global-dark-prefers.scss +3 -3
- package/src/scss/utilities/_utility-global-dark-scrollbars.scss +29 -29
- package/src/scss/utilities/_utility-global-dark.scss +213 -224
- package/src/scss/utilities/_utility-grid-system.scss +204 -204
- package/src/scss/utilities/_utility-layout.scss +195 -196
- package/src/scss/utilities/_utility-lists.scss +17 -17
- package/src/scss/utilities/_utility-print.scss +101 -111
- package/src/scss/utilities/_utility-reduced-motion.scss +29 -29
- package/src/scss/utilities/_utility-tables.scss +40 -40
- package/src/scss/utilities/_utility-texts.scss +199 -199
- package/src/scss/utilities/_utility-z-index.scss +82 -82
- package/src/scss/variables/_variables-breakpoints.scss +5 -5
- package/src/scss/variables/_variables-colors.scss +31 -31
- package/src/scss/variables/_variables-spacing.scss +25 -25
- package/src/scss/variables/_variables-texts.scss +12 -12
- package/dist/css/bullframe-classless-dark-ie10+.css +0 -1330
- package/dist/css/bullframe-classless-dark-ie10+.min.css +0 -4
- package/dist/css/bullframe-classless-dark-ie10+.min.css.map +0 -1
- package/dist/css/bullframe-classless-dark-prefers-ie10+.css +0 -1310
- package/dist/css/bullframe-classless-dark-prefers-ie10+.min.css +0 -4
- package/dist/css/bullframe-classless-dark-prefers-ie10+.min.css.map +0 -1
- package/dist/css/bullframe-classless-ie10+.css +0 -1093
- package/dist/css/bullframe-classless-ie10+.min.css +0 -3
- package/dist/css/bullframe-classless-ie10+.min.css.map +0 -1
- package/dist/css/bullframe-dark-ie10+.css +0 -2578
- package/dist/css/bullframe-dark-ie10+.min.css +0 -3
- package/dist/css/bullframe-dark-ie10+.min.css.map +0 -1
- package/dist/css/bullframe-dark-prefers-ie10+.css +0 -2550
- package/dist/css/bullframe-dark-prefers-ie10+.min.css +0 -3
- package/dist/css/bullframe-dark-prefers-ie10+.min.css.map +0 -1
- package/dist/css/bullframe-ie10+.css +0 -2259
- package/dist/css/bullframe-ie10+.min.css +0 -2
- package/dist/css/bullframe-ie10+.min.css.map +0 -1
- package/docs/images-readme/browserstack-logo.png +0 -0
- package/src/scss/bullframe-classless-dark-ie10+.scss +0 -5
- package/src/scss/bullframe-classless-dark-prefers-ie10+.scss +0 -5
- package/src/scss/bullframe-classless-ie10+.scss +0 -43
- package/src/scss/bullframe-dark-ie10+.scss +0 -4
- package/src/scss/bullframe-dark-prefers-ie10+.scss +0 -4
- package/src/scss/bullframe-ie10+.scss +0 -121
- package/src/scss/forms/_forms-styling-ie-hacks.scss +0 -56
- package/src/scss/forms/_forms-styling-select-ie-hacks.scss +0 -30
package/docs/test/css/style.css
CHANGED
|
@@ -1,130 +1,130 @@
|
|
|
1
|
-
/* just for a nicer demo */
|
|
2
|
-
|
|
3
|
-
.test .bf-row {
|
|
4
|
-
margin-bottom: 20px;
|
|
5
|
-
margin-bottom: 2rem;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
.test [class^="bf-col"] {
|
|
9
|
-
margin-bottom: 10px;
|
|
10
|
-
margin-bottom: 1rem;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
@media (max-width: 575px) {
|
|
14
|
-
.test header {
|
|
15
|
-
margin-bottom: 1rem;
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.test header h1 {
|
|
20
|
-
margin-top: 10px;
|
|
21
|
-
margin-top: 1rem;
|
|
22
|
-
margin-bottom: 0;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.test header h1 span {
|
|
26
|
-
color: #f95c1f
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
@media (min-width: 600px) {
|
|
30
|
-
.test header h1 {
|
|
31
|
-
font-size: 55px;
|
|
32
|
-
font-size: 5.5rem;
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
@media (min-width: 1000px) {
|
|
37
|
-
.test header h1 {
|
|
38
|
-
font-size: 70px;
|
|
39
|
-
font-size: 7rem;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.test .description {
|
|
44
|
-
max-width: 800px;
|
|
45
|
-
max-width: 80rem;
|
|
46
|
-
margin-left: auto;
|
|
47
|
-
margin-right: auto;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.test header a {
|
|
51
|
-
margin-right: 10px;
|
|
52
|
-
margin-right: 1rem;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
@media (min-width: 600px) {
|
|
56
|
-
.test .h2--section {
|
|
57
|
-
font-size: 40px;
|
|
58
|
-
font-size: 4rem;
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.test .h2--section {
|
|
63
|
-
padding-top: 20px;
|
|
64
|
-
padding-bottom: 2rem;
|
|
65
|
-
text-transform: uppercase;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
.test legend {
|
|
69
|
-
padding-bottom: 10px;
|
|
70
|
-
padding-bottom: 1rem;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.test button,
|
|
74
|
-
.test .bf-btn,
|
|
75
|
-
.test .input-image,
|
|
76
|
-
.test input,
|
|
77
|
-
.test select,
|
|
78
|
-
.test textarea {
|
|
79
|
-
margin-bottom: 20px;
|
|
80
|
-
margin-bottom: 2rem;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.test [type="image"],
|
|
84
|
-
.test [type="checkbox"],
|
|
85
|
-
.test [type="radio"] {
|
|
86
|
-
margin-bottom: 0;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
.test .grid .col-wrapper {
|
|
90
|
-
background-color: #888;
|
|
91
|
-
height: 60px;
|
|
92
|
-
height: 6rem;
|
|
93
|
-
line-height: 60px;
|
|
94
|
-
line-height: 6rem;
|
|
95
|
-
overflow-y: hidden;
|
|
96
|
-
color: #fff;
|
|
97
|
-
font-size: 80%;
|
|
98
|
-
text-align: center;
|
|
99
|
-
-webkit-border-radius: 3px;
|
|
100
|
-
border-radius: 3px;
|
|
101
|
-
font-weight: 700;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
.test .grid .bf-row:nth-child(odd) .col-wrapper {
|
|
105
|
-
background-color: #ccc;
|
|
106
|
-
color: #000;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
@media (max-width: 767px) {
|
|
110
|
-
.test .grid .bf-row {
|
|
111
|
-
margin-bottom: 0;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
.test .grid [class*="bf-col-"] {
|
|
115
|
-
margin-bottom: 20px;
|
|
116
|
-
margin-bottom: 2rem;
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
.test .back-to-top {
|
|
121
|
-
text-align: center;
|
|
122
|
-
display: block;
|
|
123
|
-
margin: 60px 0 120px 0;
|
|
124
|
-
margin: 6rem 0 12rem 0;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
.test .back-to-top a i {
|
|
128
|
-
vertical-align: middle;
|
|
129
|
-
font-style: normal;
|
|
130
|
-
}
|
|
1
|
+
/* just for a nicer demo */
|
|
2
|
+
|
|
3
|
+
.test .bf-row {
|
|
4
|
+
margin-bottom: 20px;
|
|
5
|
+
margin-bottom: 2rem;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.test [class^="bf-col"] {
|
|
9
|
+
margin-bottom: 10px;
|
|
10
|
+
margin-bottom: 1rem;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@media (max-width: 575px) {
|
|
14
|
+
.test header {
|
|
15
|
+
margin-bottom: 1rem;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.test header h1 {
|
|
20
|
+
margin-top: 10px;
|
|
21
|
+
margin-top: 1rem;
|
|
22
|
+
margin-bottom: 0;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.test header h1 span {
|
|
26
|
+
color: #f95c1f
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@media (min-width: 600px) {
|
|
30
|
+
.test header h1 {
|
|
31
|
+
font-size: 55px;
|
|
32
|
+
font-size: 5.5rem;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@media (min-width: 1000px) {
|
|
37
|
+
.test header h1 {
|
|
38
|
+
font-size: 70px;
|
|
39
|
+
font-size: 7rem;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.test .description {
|
|
44
|
+
max-width: 800px;
|
|
45
|
+
max-width: 80rem;
|
|
46
|
+
margin-left: auto;
|
|
47
|
+
margin-right: auto;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.test header a {
|
|
51
|
+
margin-right: 10px;
|
|
52
|
+
margin-right: 1rem;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
@media (min-width: 600px) {
|
|
56
|
+
.test .h2--section {
|
|
57
|
+
font-size: 40px;
|
|
58
|
+
font-size: 4rem;
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.test .h2--section {
|
|
63
|
+
padding-top: 20px;
|
|
64
|
+
padding-bottom: 2rem;
|
|
65
|
+
text-transform: uppercase;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.test legend {
|
|
69
|
+
padding-bottom: 10px;
|
|
70
|
+
padding-bottom: 1rem;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.test button,
|
|
74
|
+
.test .bf-btn,
|
|
75
|
+
.test .input-image,
|
|
76
|
+
.test input,
|
|
77
|
+
.test select,
|
|
78
|
+
.test textarea {
|
|
79
|
+
margin-bottom: 20px;
|
|
80
|
+
margin-bottom: 2rem;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.test [type="image"],
|
|
84
|
+
.test [type="checkbox"],
|
|
85
|
+
.test [type="radio"] {
|
|
86
|
+
margin-bottom: 0;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.test .grid .col-wrapper {
|
|
90
|
+
background-color: #888;
|
|
91
|
+
height: 60px;
|
|
92
|
+
height: 6rem;
|
|
93
|
+
line-height: 60px;
|
|
94
|
+
line-height: 6rem;
|
|
95
|
+
overflow-y: hidden;
|
|
96
|
+
color: #fff;
|
|
97
|
+
font-size: 80%;
|
|
98
|
+
text-align: center;
|
|
99
|
+
-webkit-border-radius: 3px;
|
|
100
|
+
border-radius: 3px;
|
|
101
|
+
font-weight: 700;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.test .grid .bf-row:nth-child(odd) .col-wrapper {
|
|
105
|
+
background-color: #ccc;
|
|
106
|
+
color: #000;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
@media (max-width: 767px) {
|
|
110
|
+
.test .grid .bf-row {
|
|
111
|
+
margin-bottom: 0;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.test .grid [class*="bf-col-"] {
|
|
115
|
+
margin-bottom: 20px;
|
|
116
|
+
margin-bottom: 2rem;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.test .back-to-top {
|
|
121
|
+
text-align: center;
|
|
122
|
+
display: block;
|
|
123
|
+
margin: 60px 0 120px 0;
|
|
124
|
+
margin: 6rem 0 12rem 0;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.test .back-to-top a i {
|
|
128
|
+
vertical-align: middle;
|
|
129
|
+
font-style: normal;
|
|
130
|
+
}
|
|
@@ -1,28 +1,28 @@
|
|
|
1
|
-
<?xml version="1.0" standalone="no"?>
|
|
2
|
-
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
|
3
|
-
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg1.dtd">
|
|
4
|
-
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
|
5
|
-
width="467.000000pt" height="467.000000pt" viewBox="0 0 467.000000 467.000000"
|
|
6
|
-
preserveAspectRatio="xMidYMid meet">
|
|
7
|
-
<metadata>
|
|
8
|
-
Created by potrace 1.11, written by Peter Selinger 2001-2013
|
|
9
|
-
</metadata>
|
|
10
|
-
<g transform="translate(.000000,467.000000) scale(.100000,-.100000)"
|
|
11
|
-
fill="#000000" stroke="none">
|
|
12
|
-
<path d="M2065 4659 c-790 -95 -1472 -577 -1826 -1289 -100 -203 -168 -411
|
|
13
|
-
-211 -647 -20 -112 -23 -161 -23 -388 0 -228 3 -276 24 -390 162 -906 804
|
|
14
|
-
-1617 1684 -1864 219 -61 335 -76 622 -76 227 0 276 3 388 23 903 162 1610
|
|
15
|
-
796 1862 1670 65 227 80 345 80 637 0 228 -3 276 -24 390 -177 991 -927 1741
|
|
16
|
-
-1916 1916 -138 24 -520 35 -660 18z m-360 -1289 c257 -24 449 -96 577 -218
|
|
17
|
-
91 -86 131 -169 148 -308 18 -142 -18 -249 -131 -383 l-57 -68 50 -38 c140
|
|
18
|
-
-107 228 -283 228 -455 -1 -350 -222 -543 -692 -605 -84 -11 -221 -15 -545
|
|
19
|
-
-15 l-433 0 0 1050 0 1050 373 0 c204 0 422 -5 482 -10z m2354 -182 c13 -101
|
|
20
|
-
25 -198 28 -215 l5 -33 -426 0 -426 0 0 -215 0 -215 319 0 319 0 6 -27 c5 -25
|
|
21
|
-
25 -188 43 -345 l6 -58 -347 0 -346 0 0 -400 0 -400 -280 0 -280 0 0 1045 0
|
|
22
|
-
1045 678 0 679 0 22 -182z"/>
|
|
23
|
-
<path d="M1400 2761 l0 -181 93 0 c235 0 367 60 367 168 0 72 -40 125 -125
|
|
24
|
-
164 -42 19 -72 23 -192 26 l-143 4 0 -181z"/>
|
|
25
|
-
<path d="M1400 1931 l0 -211 158 0 c233 0 327 31 372 124 47 97 3 207 -103
|
|
26
|
-
264 -50 26 -58 27 -239 30 l-188 4 0 -211z"/>
|
|
27
|
-
</g>
|
|
28
|
-
</svg>
|
|
1
|
+
<?xml version="1.0" standalone="no"?>
|
|
2
|
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
|
3
|
+
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg1.dtd">
|
|
4
|
+
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
|
5
|
+
width="467.000000pt" height="467.000000pt" viewBox="0 0 467.000000 467.000000"
|
|
6
|
+
preserveAspectRatio="xMidYMid meet">
|
|
7
|
+
<metadata>
|
|
8
|
+
Created by potrace 1.11, written by Peter Selinger 2001-2013
|
|
9
|
+
</metadata>
|
|
10
|
+
<g transform="translate(.000000,467.000000) scale(.100000,-.100000)"
|
|
11
|
+
fill="#000000" stroke="none">
|
|
12
|
+
<path d="M2065 4659 c-790 -95 -1472 -577 -1826 -1289 -100 -203 -168 -411
|
|
13
|
+
-211 -647 -20 -112 -23 -161 -23 -388 0 -228 3 -276 24 -390 162 -906 804
|
|
14
|
+
-1617 1684 -1864 219 -61 335 -76 622 -76 227 0 276 3 388 23 903 162 1610
|
|
15
|
+
796 1862 1670 65 227 80 345 80 637 0 228 -3 276 -24 390 -177 991 -927 1741
|
|
16
|
+
-1916 1916 -138 24 -520 35 -660 18z m-360 -1289 c257 -24 449 -96 577 -218
|
|
17
|
+
91 -86 131 -169 148 -308 18 -142 -18 -249 -131 -383 l-57 -68 50 -38 c140
|
|
18
|
+
-107 228 -283 228 -455 -1 -350 -222 -543 -692 -605 -84 -11 -221 -15 -545
|
|
19
|
+
-15 l-433 0 0 1050 0 1050 373 0 c204 0 422 -5 482 -10z m2354 -182 c13 -101
|
|
20
|
+
25 -198 28 -215 l5 -33 -426 0 -426 0 0 -215 0 -215 319 0 319 0 6 -27 c5 -25
|
|
21
|
+
25 -188 43 -345 l6 -58 -347 0 -346 0 0 -400 0 -400 -280 0 -280 0 0 1045 0
|
|
22
|
+
1045 678 0 679 0 22 -182z"/>
|
|
23
|
+
<path d="M1400 2761 l0 -181 93 0 c235 0 367 60 367 168 0 72 -40 125 -125
|
|
24
|
+
164 -42 19 -72 23 -192 26 l-143 4 0 -181z"/>
|
|
25
|
+
<path d="M1400 1931 l0 -211 158 0 c233 0 327 31 372 124 47 97 3 207 -103
|
|
26
|
+
264 -50 26 -58 27 -239 30 l-188 4 0 -211z"/>
|
|
27
|
+
</g>
|
|
28
|
+
</svg>
|