bullframe.css 4.1.0 → 4.1.2

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 (34) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/README.md +24 -21
  3. package/dist/css/bullframe-classless-dark-prefers.css +110 -117
  4. package/dist/css/bullframe-classless-dark-prefers.min.css +3 -2
  5. package/dist/css/bullframe-classless-dark-prefers.min.css.map +1 -1
  6. package/dist/css/bullframe-classless-dark.css +12 -11
  7. package/dist/css/bullframe-classless-dark.min.css +3 -2
  8. package/dist/css/bullframe-classless-dark.min.css.map +1 -1
  9. package/dist/css/bullframe-classless-system-default.css +110 -117
  10. package/dist/css/bullframe-classless-system-default.min.css +3 -2
  11. package/dist/css/bullframe-classless-system-default.min.css.map +1 -1
  12. package/dist/css/bullframe-classless.css +7 -7
  13. package/dist/css/bullframe-classless.min.css +2 -2
  14. package/dist/css/bullframe-classless.min.css.map +1 -1
  15. package/dist/css/bullframe-dark-prefers.css +180 -199
  16. package/dist/css/bullframe-dark-prefers.min.css +2 -2
  17. package/dist/css/bullframe-dark-prefers.min.css.map +1 -1
  18. package/dist/css/bullframe-dark.css +29 -32
  19. package/dist/css/bullframe-dark.min.css +2 -2
  20. package/dist/css/bullframe-dark.min.css.map +1 -1
  21. package/dist/css/bullframe-system-default.css +180 -199
  22. package/dist/css/bullframe-system-default.min.css +2 -2
  23. package/dist/css/bullframe-system-default.min.css.map +1 -1
  24. package/dist/css/bullframe-utilities.css +20 -23
  25. package/dist/css/bullframe-utilities.min.css +1 -1
  26. package/dist/css/bullframe-utilities.min.css.map +1 -1
  27. package/dist/css/bullframe.css +26 -29
  28. package/dist/css/bullframe.min.css +1 -1
  29. package/dist/css/bullframe.min.css.map +1 -1
  30. package/gulpfile.js +1 -1
  31. package/index.html +1 -1
  32. package/package.json +1 -1
  33. package/src/scss/bullframe-utilities.scss +1 -1
  34. package/src/scss/forms/_forms-normalization.scss +3 -1
@@ -1,4 +1,4 @@
1
- /*! bullframe.css v4.1.0 | MIT License | https://github.com/marcop135/bullframe.css */
1
+ /*! bullframe.css v4.1.2 | MIT License | https://github.com/marcop135/bullframe.css */
2
2
  /*! custom build: bullframe-dark-prefers */
3
3
  *,
4
4
  *::before,
@@ -900,7 +900,7 @@ select[dir=rtl]:not([size]):not([multiple]) {
900
900
 
901
901
  @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
902
902
  [type=checkbox],
903
- [type=radio] {
903
+ [type=radio] {
904
904
  -webkit-appearance: none;
905
905
  -moz-appearance: none;
906
906
  appearance: none;
@@ -911,27 +911,27 @@ select[dir=rtl]:not([size]):not([multiple]) {
911
911
  border: 1px solid #999;
912
912
  }
913
913
  [type=checkbox] + label,
914
- [type=radio] + label {
914
+ [type=radio] + label {
915
915
  line-height: 1.8rem;
916
916
  vertical-align: top;
917
917
  margin-left: 5px;
918
918
  margin-left: 0.5rem;
919
919
  }
920
920
  *[dir=rtl] [type=checkbox] + label, [type=checkbox][dir=rtl] + label,
921
- *[dir=rtl] [type=radio] + label,
922
- [type=radio][dir=rtl] + label {
921
+ *[dir=rtl] [type=radio] + label,
922
+ [type=radio][dir=rtl] + label {
923
923
  margin-left: 0;
924
924
  margin-right: 5px;
925
925
  margin-right: 0.5rem;
926
926
  }
927
927
  [type=checkbox]:after,
928
- [type=radio]:after {
928
+ [type=radio]:after {
929
929
  content: "";
930
930
  display: block;
931
931
  position: absolute;
932
932
  }
933
933
  [type=checkbox]:checked,
934
- [type=radio]:checked {
934
+ [type=radio]:checked {
935
935
  background-color: #007bff;
936
936
  border-color: #000;
937
937
  }
@@ -2029,8 +2029,8 @@ dt {
2029
2029
  ========================================================================== */
2030
2030
  @media print {
2031
2031
  *,
2032
- *::before,
2033
- *::after {
2032
+ *::before,
2033
+ *::after {
2034
2034
  background: #fff !important;
2035
2035
  color: #000 !important;
2036
2036
  /* Black prints faster */
@@ -2038,7 +2038,7 @@ dt {
2038
2038
  text-shadow: none !important;
2039
2039
  }
2040
2040
  a,
2041
- a:visited {
2041
+ a:visited {
2042
2042
  text-decoration: underline;
2043
2043
  }
2044
2044
  a[href]::after {
@@ -2052,35 +2052,35 @@ a:visited {
2052
2052
  * or use the `javascript:` pseudo protocol
2053
2053
  */
2054
2054
  a[href^="#"]::after,
2055
- a[href^="javascript:"]::after {
2055
+ a[href^="javascript:"]::after {
2056
2056
  content: "";
2057
2057
  }
2058
2058
  pre {
2059
2059
  white-space: pre-wrap !important;
2060
2060
  }
2061
2061
  pre,
2062
- blockquote {
2062
+ blockquote {
2063
2063
  border: 1px solid #999;
2064
2064
  page-break-inside: avoid;
2065
2065
  }
2066
2066
  tr,
2067
- img {
2067
+ img {
2068
2068
  page-break-inside: avoid;
2069
2069
  }
2070
2070
  p,
2071
- h2,
2072
- h3 {
2071
+ h2,
2072
+ h3 {
2073
2073
  orphans: 3;
2074
2074
  widows: 3;
2075
2075
  }
2076
2076
  h2,
2077
- h3 {
2077
+ h3 {
2078
2078
  page-break-after: avoid;
2079
2079
  }
2080
2080
  }
2081
2081
  @media print {
2082
2082
  body,
2083
- .bf-container {
2083
+ .bf-container {
2084
2084
  min-width: 992px !important;
2085
2085
  }
2086
2086
  .bf-table-responsive {
@@ -2090,23 +2090,20 @@ h3 {
2090
2090
  width: auto;
2091
2091
  }
2092
2092
  .bf-table-responsive table,
2093
- .bf-table {
2093
+ .bf-table {
2094
2094
  border-collapse: collapse !important;
2095
2095
  }
2096
2096
  }
2097
2097
  @media (prefers-reduced-motion: reduce) {
2098
2098
  .bf-reduced-motion,
2099
- .bf-reduced-motion::before,
2100
- .bf-reduced-motion::after,
2101
- .bf-reduced-motion *,
2102
- .bf-reduced-motion *::before,
2103
- .bf-reduced-motion *::after {
2104
- -webkit-animation-delay: -1ms !important;
2105
- animation-delay: -1ms !important;
2106
- -webkit-animation-duration: 1ms !important;
2107
- animation-duration: 1ms !important;
2108
- -webkit-animation-iteration-count: 1 !important;
2109
- animation-iteration-count: 1 !important;
2099
+ .bf-reduced-motion::before,
2100
+ .bf-reduced-motion::after,
2101
+ .bf-reduced-motion *,
2102
+ .bf-reduced-motion *::before,
2103
+ .bf-reduced-motion *::after {
2104
+ animation-delay: -1ms !important;
2105
+ animation-duration: 1ms !important;
2106
+ animation-iteration-count: 1 !important;
2110
2107
  background-attachment: initial !important;
2111
2108
  scroll-behavior: auto !important;
2112
2109
  transition-delay: 0s !important;
@@ -2185,93 +2182,93 @@ h3 {
2185
2182
  background-color: #b3b300;
2186
2183
  }
2187
2184
  [type=email],
2188
- [type=number],
2189
- [type=password],
2190
- [type=tel],
2191
- [type=search],
2192
- [type=text],
2193
- [type=date],
2194
- [type=datetime-local],
2195
- [type=month],
2196
- [type=week],
2197
- [type=time],
2198
- [type=url],
2199
- [type=range],
2200
- input[list],
2201
- select,
2202
- select:not([size]):not([multiple]),
2203
- textarea {
2185
+ [type=number],
2186
+ [type=password],
2187
+ [type=tel],
2188
+ [type=search],
2189
+ [type=text],
2190
+ [type=date],
2191
+ [type=datetime-local],
2192
+ [type=month],
2193
+ [type=week],
2194
+ [type=time],
2195
+ [type=url],
2196
+ [type=range],
2197
+ input[list],
2198
+ select,
2199
+ select:not([size]):not([multiple]),
2200
+ textarea {
2204
2201
  background-color: #111;
2205
2202
  border-color: #000;
2206
2203
  color: #ccc;
2207
2204
  }
2208
2205
  [type=email]:active, [type=email]:focus,
2209
- [type=number]:active,
2210
- [type=number]:focus,
2211
- [type=password]:active,
2212
- [type=password]:focus,
2213
- [type=tel]:active,
2214
- [type=tel]:focus,
2215
- [type=search]:active,
2216
- [type=search]:focus,
2217
- [type=text]:active,
2218
- [type=text]:focus,
2219
- [type=date]:active,
2220
- [type=date]:focus,
2221
- [type=datetime-local]:active,
2222
- [type=datetime-local]:focus,
2223
- [type=month]:active,
2224
- [type=month]:focus,
2225
- [type=week]:active,
2226
- [type=week]:focus,
2227
- [type=time]:active,
2228
- [type=time]:focus,
2229
- [type=url]:active,
2230
- [type=url]:focus,
2231
- [type=range]:active,
2232
- [type=range]:focus,
2233
- input[list]:active,
2234
- input[list]:focus,
2235
- select:active,
2236
- select:focus,
2237
- select:not([size]):not([multiple]):active,
2238
- select:not([size]):not([multiple]):focus,
2239
- textarea:active,
2240
- textarea:focus {
2206
+ [type=number]:active,
2207
+ [type=number]:focus,
2208
+ [type=password]:active,
2209
+ [type=password]:focus,
2210
+ [type=tel]:active,
2211
+ [type=tel]:focus,
2212
+ [type=search]:active,
2213
+ [type=search]:focus,
2214
+ [type=text]:active,
2215
+ [type=text]:focus,
2216
+ [type=date]:active,
2217
+ [type=date]:focus,
2218
+ [type=datetime-local]:active,
2219
+ [type=datetime-local]:focus,
2220
+ [type=month]:active,
2221
+ [type=month]:focus,
2222
+ [type=week]:active,
2223
+ [type=week]:focus,
2224
+ [type=time]:active,
2225
+ [type=time]:focus,
2226
+ [type=url]:active,
2227
+ [type=url]:focus,
2228
+ [type=range]:active,
2229
+ [type=range]:focus,
2230
+ input[list]:active,
2231
+ input[list]:focus,
2232
+ select:active,
2233
+ select:focus,
2234
+ select:not([size]):not([multiple]):active,
2235
+ select:not([size]):not([multiple]):focus,
2236
+ textarea:active,
2237
+ textarea:focus {
2241
2238
  background-color: #111;
2242
2239
  border-color: #3395ff;
2243
2240
  }
2244
2241
  [type=email]:active, [type=email]:focus,
2245
- [type=number]:active,
2246
- [type=number]:focus,
2247
- [type=password]:active,
2248
- [type=password]:focus,
2249
- [type=tel]:active,
2250
- [type=tel]:focus,
2251
- [type=search]:active,
2252
- [type=search]:focus,
2253
- [type=text]:active,
2254
- [type=text]:focus,
2255
- [type=date]:active,
2256
- [type=date]:focus,
2257
- [type=datetime-local]:active,
2258
- [type=datetime-local]:focus,
2259
- [type=month]:active,
2260
- [type=month]:focus,
2261
- [type=week]:active,
2262
- [type=week]:focus,
2263
- [type=time]:active,
2264
- [type=time]:focus,
2265
- [type=url]:active,
2266
- [type=url]:focus,
2267
- input[list]:active,
2268
- input[list]:focus,
2269
- select:active,
2270
- select:focus,
2271
- select:not([size]):not([multiple]):active,
2272
- select:not([size]):not([multiple]):focus,
2273
- textarea:active,
2274
- textarea:focus {
2242
+ [type=number]:active,
2243
+ [type=number]:focus,
2244
+ [type=password]:active,
2245
+ [type=password]:focus,
2246
+ [type=tel]:active,
2247
+ [type=tel]:focus,
2248
+ [type=search]:active,
2249
+ [type=search]:focus,
2250
+ [type=text]:active,
2251
+ [type=text]:focus,
2252
+ [type=date]:active,
2253
+ [type=date]:focus,
2254
+ [type=datetime-local]:active,
2255
+ [type=datetime-local]:focus,
2256
+ [type=month]:active,
2257
+ [type=month]:focus,
2258
+ [type=week]:active,
2259
+ [type=week]:focus,
2260
+ [type=time]:active,
2261
+ [type=time]:focus,
2262
+ [type=url]:active,
2263
+ [type=url]:focus,
2264
+ input[list]:active,
2265
+ input[list]:focus,
2266
+ select:active,
2267
+ select:focus,
2268
+ select:not([size]):not([multiple]):active,
2269
+ select:not([size]):not([multiple]):focus,
2270
+ textarea:active,
2271
+ textarea:focus {
2275
2272
  box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.5);
2276
2273
  }
2277
2274
  .bf-focused {
@@ -2279,7 +2276,7 @@ textarea:focus {
2279
2276
  box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.5) !important;
2280
2277
  }
2281
2278
  .bf-invalid,
2282
- .bf-invalid:focus {
2279
+ .bf-invalid:focus {
2283
2280
  color: #ff2626 !important;
2284
2281
  border-color: #ff2626 !important;
2285
2282
  }
@@ -2287,10 +2284,10 @@ textarea:focus {
2287
2284
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23f0f0f0' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e");
2288
2285
  }
2289
2286
  }
2290
- @media screen and (prefers-color-scheme: dark) and (min-width: 0\0 ) and (-webkit-min-device-pixel-ratio: 0), screen and (prefers-color-scheme: dark) and (min-width: 0\0 ) and (min-resolution: 0.001dpcm) {
2287
+ @media screen and (prefers-color-scheme: dark) and (min-width: 0\0 ) and (min-resolution: 0.001dpcm) {
2291
2288
  select:not([size]):not([multiple]),
2292
- *[dir=rtl] select:not([size]):not([multiple]),
2293
- select[dir=rtl]:not([size]):not([multiple]) {
2289
+ *[dir=rtl] select:not([size]):not([multiple]),
2290
+ select[dir=rtl]:not([size]):not([multiple]) {
2294
2291
  background-image: none;
2295
2292
  }
2296
2293
  }
@@ -2309,131 +2306,115 @@ select[dir=rtl]:not([size]):not([multiple]) {
2309
2306
  background-color: #111;
2310
2307
  }
2311
2308
  }
2312
- }
2313
- @media (prefers-color-scheme: dark) {
2314
2309
  input::-moz-placeholder, textarea::-moz-placeholder {
2315
2310
  color: #999;
2316
2311
  }
2317
2312
  input::placeholder,
2318
- textarea::placeholder {
2313
+ textarea::placeholder {
2319
2314
  color: #999;
2320
2315
  }
2321
- }
2322
- @media (prefers-color-scheme: dark) {
2323
2316
  button,
2324
- [type=button],
2325
- [type=reset],
2326
- [type=submit],
2327
- .bf-btn,
2328
- button.bf-disabled,
2329
- [type=button].bf-disabled,
2330
- [type=reset].bf-disabled,
2331
- [type=submit].bf-disabled,
2332
- .bf-btn.bf-disabled {
2317
+ [type=button],
2318
+ [type=reset],
2319
+ [type=submit],
2320
+ .bf-btn,
2321
+ button.bf-disabled,
2322
+ [type=button].bf-disabled,
2323
+ [type=reset].bf-disabled,
2324
+ [type=submit].bf-disabled,
2325
+ .bf-btn.bf-disabled {
2333
2326
  background: #ccc;
2334
2327
  }
2335
2328
  button:hover, button:active, button:focus,
2336
- [type=button]:hover,
2337
- [type=button]:active,
2338
- [type=button]:focus,
2339
- [type=reset]:hover,
2340
- [type=reset]:active,
2341
- [type=reset]:focus,
2342
- [type=submit]:hover,
2343
- [type=submit]:active,
2344
- [type=submit]:focus,
2345
- .bf-btn:hover,
2346
- .bf-btn:active,
2347
- .bf-btn:focus,
2348
- button.bf-disabled:hover,
2349
- button.bf-disabled:active,
2350
- button.bf-disabled:focus,
2351
- [type=button].bf-disabled:hover,
2352
- [type=button].bf-disabled:active,
2353
- [type=button].bf-disabled:focus,
2354
- [type=reset].bf-disabled:hover,
2355
- [type=reset].bf-disabled:active,
2356
- [type=reset].bf-disabled:focus,
2357
- [type=submit].bf-disabled:hover,
2358
- [type=submit].bf-disabled:active,
2359
- [type=submit].bf-disabled:focus,
2360
- .bf-btn.bf-disabled:hover,
2361
- .bf-btn.bf-disabled:active,
2362
- .bf-btn.bf-disabled:focus {
2329
+ [type=button]:hover,
2330
+ [type=button]:active,
2331
+ [type=button]:focus,
2332
+ [type=reset]:hover,
2333
+ [type=reset]:active,
2334
+ [type=reset]:focus,
2335
+ [type=submit]:hover,
2336
+ [type=submit]:active,
2337
+ [type=submit]:focus,
2338
+ .bf-btn:hover,
2339
+ .bf-btn:active,
2340
+ .bf-btn:focus,
2341
+ button.bf-disabled:hover,
2342
+ button.bf-disabled:active,
2343
+ button.bf-disabled:focus,
2344
+ [type=button].bf-disabled:hover,
2345
+ [type=button].bf-disabled:active,
2346
+ [type=button].bf-disabled:focus,
2347
+ [type=reset].bf-disabled:hover,
2348
+ [type=reset].bf-disabled:active,
2349
+ [type=reset].bf-disabled:focus,
2350
+ [type=submit].bf-disabled:hover,
2351
+ [type=submit].bf-disabled:active,
2352
+ [type=submit].bf-disabled:focus,
2353
+ .bf-btn.bf-disabled:hover,
2354
+ .bf-btn.bf-disabled:active,
2355
+ .bf-btn.bf-disabled:focus {
2363
2356
  background: #b3b3b3;
2364
2357
  }
2365
2358
  button:active, button:focus,
2366
- [type=button]:active,
2367
- [type=button]:focus,
2368
- [type=reset]:active,
2369
- [type=reset]:focus,
2370
- [type=submit]:active,
2371
- [type=submit]:focus,
2372
- .bf-btn:active,
2373
- .bf-btn:focus,
2374
- button.bf-disabled:active,
2375
- button.bf-disabled:focus,
2376
- [type=button].bf-disabled:active,
2377
- [type=button].bf-disabled:focus,
2378
- [type=reset].bf-disabled:active,
2379
- [type=reset].bf-disabled:focus,
2380
- [type=submit].bf-disabled:active,
2381
- [type=submit].bf-disabled:focus,
2382
- .bf-btn.bf-disabled:active,
2383
- .bf-btn.bf-disabled:focus {
2359
+ [type=button]:active,
2360
+ [type=button]:focus,
2361
+ [type=reset]:active,
2362
+ [type=reset]:focus,
2363
+ [type=submit]:active,
2364
+ [type=submit]:focus,
2365
+ .bf-btn:active,
2366
+ .bf-btn:focus,
2367
+ button.bf-disabled:active,
2368
+ button.bf-disabled:focus,
2369
+ [type=button].bf-disabled:active,
2370
+ [type=button].bf-disabled:focus,
2371
+ [type=reset].bf-disabled:active,
2372
+ [type=reset].bf-disabled:focus,
2373
+ [type=submit].bf-disabled:active,
2374
+ [type=submit].bf-disabled:focus,
2375
+ .bf-btn.bf-disabled:active,
2376
+ .bf-btn.bf-disabled:focus {
2384
2377
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
2385
2378
  }
2386
- }
2387
- @media (prefers-color-scheme: dark) {
2388
2379
  button:active, button:focus,
2389
- [type=button]:active,
2390
- [type=button]:focus,
2391
- [type=reset]:active,
2392
- [type=reset]:focus,
2393
- [type=submit]:active,
2394
- [type=submit]:focus,
2395
- .bf-btn:active,
2396
- .bf-btn:focus {
2380
+ [type=button]:active,
2381
+ [type=button]:focus,
2382
+ [type=reset]:active,
2383
+ [type=reset]:focus,
2384
+ [type=submit]:active,
2385
+ [type=submit]:focus,
2386
+ .bf-btn:active,
2387
+ .bf-btn:focus {
2397
2388
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
2398
2389
  }
2399
- }
2400
- @media (prefers-color-scheme: dark) {
2401
2390
  .bf-btn--primary.bf-disabled,
2402
- .bf-btn.bf-btn--primary {
2391
+ .bf-btn.bf-btn--primary {
2403
2392
  background: #007bff;
2404
2393
  }
2405
2394
  .bf-btn--primary.bf-disabled:hover, .bf-btn--primary.bf-disabled:active, .bf-btn--primary.bf-disabled:focus,
2406
- .bf-btn.bf-btn--primary:hover,
2407
- .bf-btn.bf-btn--primary:active,
2408
- .bf-btn.bf-btn--primary:focus {
2395
+ .bf-btn.bf-btn--primary:hover,
2396
+ .bf-btn.bf-btn--primary:active,
2397
+ .bf-btn.bf-btn--primary:focus {
2409
2398
  background: #006fe6;
2410
2399
  }
2411
2400
  .bf-btn--primary.bf-disabled:active, .bf-btn--primary.bf-disabled:focus,
2412
- .bf-btn.bf-btn--primary:active,
2413
- .bf-btn.bf-btn--primary:focus {
2401
+ .bf-btn.bf-btn--primary:active,
2402
+ .bf-btn.bf-btn--primary:focus {
2414
2403
  box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.75);
2415
2404
  }
2416
- }
2417
- @media (prefers-color-scheme: dark) {
2418
2405
  a:focus,
2419
- input:focus {
2406
+ input:focus {
2420
2407
  outline-color: #b37400;
2421
2408
  }
2422
- }
2423
- @media (prefers-color-scheme: dark) {
2424
2409
  :focus-visible {
2425
2410
  outline-color: #b37400;
2426
2411
  }
2427
- }
2428
- @media (prefers-color-scheme: dark) {
2429
2412
  .bf-table th,
2430
- .bf-table td {
2413
+ .bf-table td {
2431
2414
  border-color: #666;
2432
2415
  }
2433
- }
2434
- @media (prefers-color-scheme: dark) {
2435
2416
  .bf-table--zebra tbody tr:nth-child(odd),
2436
- .bf-table-responsive--zebra tbody tr:nth-child(odd) {
2417
+ .bf-table-responsive--zebra tbody tr:nth-child(odd) {
2437
2418
  background-color: #333;
2438
2419
  }
2439
2420
  }