coveragebook_components 0.9.1 → 0.10.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.
- checksums.yaml +4 -4
- data/app/assets/build/coco/app.css +125 -104
- data/app/assets/build/coco/app.js +10 -6
- data/app/assets/build/coco/book.css +1 -8
- data/app/assets/build/coco/book.js +1 -1
- data/app/assets/css/base/base.css +1 -0
- data/app/assets/css/base/components/coco.css +0 -9
- data/app/assets/css/base/utils/text.css +79 -0
- data/app/components/coco/app/elements/alert/alert.css +14 -46
- data/app/components/coco/app/elements/alert/alert.html.erb +2 -2
- data/app/components/coco/app/elements/alert/alert.rb +11 -16
- data/app/components/coco/app/elements/stamp/stamp.css +103 -0
- data/app/components/coco/app/elements/stamp/stamp.html.erb +3 -0
- data/app/components/coco/app/elements/stamp/stamp.rb +29 -0
- data/app/components/coco/app/layouts/application/application.css +1 -1
- data/app/components/coco/app/layouts/page/page.css +4 -0
- data/app/components/coco/app/layouts/page/page.html.erb +5 -0
- data/app/components/coco/app/layouts/page/page.rb +4 -0
- data/app/components/coco/base/modal/modal.html.erb +2 -2
- data/app/components/coco/base/modal/modal.js +1 -1
- data/app/components/coco/base/modal/modal.rb +6 -4
- data/app/components/coco/base/placeholder/placeholder.html.erb +1 -1
- data/app/components/coco/base/placeholder/placeholder.rb +6 -0
- data/app/helpers/coco/app_helper.rb +17 -0
- data/app/helpers/coco/base_helper.rb +2 -2
- data/config/tailwind.app.config.cjs +1 -1
- data/config/tailwind.book.config.cjs +1 -0
- data/config/tokens.cjs +9 -4
- data/lib/coco/engine.rb +4 -2
- data/lib/coco.rb +1 -1
- metadata +6 -4
- data/app/components/coco/app/blocks/slat/slat.css +0 -9
- data/app/components/coco/app/blocks/slat/slat.rb +0 -13
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: b8872e7a60fbb79859f877a3cd3de06216dace6160d04e09e0a9ce54fed30d49
|
|
4
|
+
data.tar.gz: fc562227556ca75b3dde25211f1a4d8742b085ce0317164e7085b5f9f997aec2
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 26ce2e732310bc88e304110e7d45ec2f27e5f40776e5c461251db4b673743fec294f9a8b91f6dcbbba028084aeeb0aafce8e6b9779ffa99be5dd69049c654eb8
|
|
7
|
+
data.tar.gz: 1dc4db593e2ef260943afb19f54a3d9ccf99d25d6499f3b0efcd40896a22c559ac903852065d2bfe5302e080672d7d4edf56a3bd8712d84a586046223bd3d978
|
|
@@ -707,13 +707,6 @@ select{
|
|
|
707
707
|
font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
708
708
|
--tw-text-opacity: 1;
|
|
709
709
|
color: rgb(17 24 39 / var(--tw-text-opacity))}
|
|
710
|
-
[data-coco] h1,
|
|
711
|
-
[data-coco] h2,
|
|
712
|
-
[data-coco] h3,
|
|
713
|
-
[data-coco] h4,
|
|
714
|
-
[data-coco] h5,
|
|
715
|
-
[data-coco] h6{
|
|
716
|
-
font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}
|
|
717
710
|
/*
|
|
718
711
|
* Tippy dropdown theme
|
|
719
712
|
*/
|
|
@@ -1953,45 +1946,6 @@ select{
|
|
|
1953
1946
|
[data-coco][data-component="app-sidebar-nav"] .nav-item-action [data-component="app-sidebar-nav-item"]{
|
|
1954
1947
|
padding-bottom: 0.625rem}
|
|
1955
1948
|
}
|
|
1956
|
-
[data-coco][data-component="app-slat"]{
|
|
1957
|
-
padding-left: 0.75rem}
|
|
1958
|
-
@media (min-width: 576px){
|
|
1959
|
-
|
|
1960
|
-
[data-coco][data-component="app-slat"]{
|
|
1961
|
-
padding-left: 1.5rem}}
|
|
1962
|
-
@media (min-width: 768px){
|
|
1963
|
-
|
|
1964
|
-
[data-coco][data-component="app-slat"]{
|
|
1965
|
-
padding-left: 2rem}}
|
|
1966
|
-
@media (min-width: 992px){
|
|
1967
|
-
|
|
1968
|
-
[data-coco][data-component="app-slat"]{
|
|
1969
|
-
padding-left: 2.5rem}}
|
|
1970
|
-
@media (min-width: 1200px){
|
|
1971
|
-
|
|
1972
|
-
[data-coco][data-component="app-slat"]{
|
|
1973
|
-
padding-left: 2.75rem}}
|
|
1974
|
-
[data-coco][data-component="app-slat"]{
|
|
1975
|
-
padding-right: 0.75rem}
|
|
1976
|
-
@media (min-width: 576px){
|
|
1977
|
-
|
|
1978
|
-
[data-coco][data-component="app-slat"]{
|
|
1979
|
-
padding-right: 1.5rem}}
|
|
1980
|
-
@media (min-width: 768px){
|
|
1981
|
-
|
|
1982
|
-
[data-coco][data-component="app-slat"]{
|
|
1983
|
-
padding-right: 2rem}}
|
|
1984
|
-
@media (min-width: 992px){
|
|
1985
|
-
|
|
1986
|
-
[data-coco][data-component="app-slat"]{
|
|
1987
|
-
padding-right: 2.5rem}}
|
|
1988
|
-
@media (min-width: 1200px){
|
|
1989
|
-
|
|
1990
|
-
[data-coco][data-component="app-slat"]{
|
|
1991
|
-
padding-right: 2.75rem}}
|
|
1992
|
-
[data-coco][data-component="app-slat"][data-padded="false"]{
|
|
1993
|
-
padding-left: 0px;
|
|
1994
|
-
padding-right: 0px}
|
|
1995
1949
|
[data-coco][data-component="app-slide-editor"] .editor-toolbar{
|
|
1996
1950
|
margin-bottom: 1rem}
|
|
1997
1951
|
@media (min-width: 1200px){
|
|
@@ -2185,14 +2139,14 @@ select{
|
|
|
2185
2139
|
padding-right: 1rem;
|
|
2186
2140
|
padding-top: 0.5rem;
|
|
2187
2141
|
padding-bottom: 0.5rem}
|
|
2188
|
-
|
|
2189
|
-
|
|
2190
|
-
|
|
2191
|
-
|
|
2192
|
-
|
|
2193
|
-
|
|
2194
|
-
|
|
2195
|
-
|
|
2142
|
+
/*
|
|
2143
|
+
.alert-icon {
|
|
2144
|
+
@apply flex items-center p-2 rounded-full;
|
|
2145
|
+
|
|
2146
|
+
.coco-icon {
|
|
2147
|
+
@apply w-5 h-5;
|
|
2148
|
+
}
|
|
2149
|
+
} */
|
|
2196
2150
|
[data-coco][data-component="app-alert"] .alert-body{
|
|
2197
2151
|
padding-left: 1rem;
|
|
2198
2152
|
padding-right: 0.5rem}
|
|
@@ -2268,6 +2222,12 @@ select{
|
|
|
2268
2222
|
|
|
2269
2223
|
[data-coco][data-component="app-alert"][data-banner="true"] .alert-body{
|
|
2270
2224
|
width: auto}}
|
|
2225
|
+
[data-coco][data-component="app-alert"][data-banner="true"] .alert-stamp .coco-icon{
|
|
2226
|
+
--tw-text-opacity: 1;
|
|
2227
|
+
color: rgb(255 255 255 / var(--tw-text-opacity))}
|
|
2228
|
+
[data-coco][data-component="app-alert"][data-banner="true"][data-theme="warning-vivid"] .alert-stamp .coco-icon{
|
|
2229
|
+
--tw-text-opacity: 1;
|
|
2230
|
+
color: rgb(17 24 39 / var(--tw-text-opacity))}
|
|
2271
2231
|
/* Dismissable */
|
|
2272
2232
|
[data-coco][data-component="app-alert"][data-dismissable="true"] .alert-dismiss{
|
|
2273
2233
|
flex: none}
|
|
@@ -2290,9 +2250,6 @@ select{
|
|
|
2290
2250
|
padding-top: 0.375rem;
|
|
2291
2251
|
padding-bottom: 0.375rem;
|
|
2292
2252
|
}
|
|
2293
|
-
[data-coco][data-component="app-alert"][data-condensed="true"] .alert-icon{
|
|
2294
|
-
background-color: transparent !important;
|
|
2295
|
-
padding: 0px}
|
|
2296
2253
|
[data-coco][data-component="app-alert"][data-condensed="true"] .alert-body{
|
|
2297
2254
|
padding-left: 0.75rem}
|
|
2298
2255
|
[data-coco][data-component="app-alert"][data-condensed="true"] .alert-title{
|
|
@@ -2331,7 +2288,7 @@ select{
|
|
|
2331
2288
|
[data-coco][data-component="app-alert"][data-condensed="true"] .alert-container{
|
|
2332
2289
|
padding-top: 0.75rem;
|
|
2333
2290
|
padding-bottom: 0.75rem}
|
|
2334
|
-
[data-coco][data-component="app-alert"][data-condensed="true"] .coco-
|
|
2291
|
+
[data-coco][data-component="app-alert"][data-condensed="true"] .coco-stamp{
|
|
2335
2292
|
margin-top: 0.375rem}
|
|
2336
2293
|
[data-coco][data-component="app-alert"][data-condensed="true"].with-title .alert-message{
|
|
2337
2294
|
margin-top: 0px}
|
|
@@ -2344,7 +2301,7 @@ select{
|
|
|
2344
2301
|
margin-left: auto}
|
|
2345
2302
|
[data-coco][data-component="app-alert"]:not(.with-title):not(.with-action) .alert-container{
|
|
2346
2303
|
align-items: center}
|
|
2347
|
-
[data-coco][data-component="app-alert"]:not(.with-title):not(.with-action) .alert-
|
|
2304
|
+
[data-coco][data-component="app-alert"]:not(.with-title):not(.with-action) .alert-stamp{
|
|
2348
2305
|
align-self: center}
|
|
2349
2306
|
[data-coco][data-component="app-alert"]:not(.with-title):not(.with-action)[data-dismissable="true"] .alert-dismiss{
|
|
2350
2307
|
position: absolute;
|
|
@@ -2358,7 +2315,7 @@ select{
|
|
|
2358
2315
|
padding-top: 0.625rem;
|
|
2359
2316
|
padding-bottom: 0.625rem}
|
|
2360
2317
|
|
|
2361
|
-
[data-coco][data-component="app-alert"] .alert-
|
|
2318
|
+
[data-coco][data-component="app-alert"] .alert-stamp{
|
|
2362
2319
|
align-self: center}
|
|
2363
2320
|
|
|
2364
2321
|
[data-coco][data-component="app-alert"] .alert-body{
|
|
@@ -2379,7 +2336,7 @@ select{
|
|
|
2379
2336
|
padding-top: 0.5rem;
|
|
2380
2337
|
padding-bottom: 0.5rem}
|
|
2381
2338
|
|
|
2382
|
-
[data-coco][data-component="app-alert"][data-condensed="true"] .coco-
|
|
2339
|
+
[data-coco][data-component="app-alert"][data-condensed="true"] .coco-stamp{
|
|
2383
2340
|
margin-top: 0px}
|
|
2384
2341
|
|
|
2385
2342
|
[data-coco][data-component="app-alert"][data-condensed="true"].with-title .alert-message{
|
|
@@ -2439,7 +2396,7 @@ select{
|
|
|
2439
2396
|
padding-top: 0.625rem;
|
|
2440
2397
|
padding-bottom: 0.625rem}
|
|
2441
2398
|
|
|
2442
|
-
[data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line .alert-
|
|
2399
|
+
[data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line .alert-stamp{
|
|
2443
2400
|
align-self: center}
|
|
2444
2401
|
|
|
2445
2402
|
[data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line .alert-body{
|
|
@@ -2460,7 +2417,7 @@ select{
|
|
|
2460
2417
|
padding-top: 0.5rem;
|
|
2461
2418
|
padding-bottom: 0.5rem}
|
|
2462
2419
|
|
|
2463
|
-
[data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line[data-condensed="true"] .coco-
|
|
2420
|
+
[data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line[data-condensed="true"] .coco-stamp{
|
|
2464
2421
|
margin-top: 0px}
|
|
2465
2422
|
|
|
2466
2423
|
[data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line[data-condensed="true"].with-title .alert-message{
|
|
@@ -2490,9 +2447,6 @@ select{
|
|
|
2490
2447
|
[data-coco][data-component="app-alert"][data-theme*="vivid"] .alert-content{
|
|
2491
2448
|
--tw-text-opacity: 1;
|
|
2492
2449
|
color: rgb(255 255 255 / var(--tw-text-opacity))}
|
|
2493
|
-
[data-coco][data-component="app-alert"][data-theme*="vivid"] .alert-icon{
|
|
2494
|
-
--tw-text-opacity: 1;
|
|
2495
|
-
color: rgb(255 255 255 / var(--tw-text-opacity))}
|
|
2496
2450
|
[data-coco][data-component="app-alert"][data-theme*="vivid"] .coco_link:not([data-theme]){
|
|
2497
2451
|
--tw-text-opacity: 1;
|
|
2498
2452
|
color: rgb(255 255 255 / var(--tw-text-opacity))}
|
|
@@ -2504,17 +2458,9 @@ select{
|
|
|
2504
2458
|
[data-coco][data-component="app-alert"][data-theme="positive"]:hover{
|
|
2505
2459
|
--tw-border-opacity: 1;
|
|
2506
2460
|
border-color: rgb(72 160 141 / var(--tw-border-opacity))}
|
|
2507
|
-
[data-coco][data-component="app-alert"][data-theme="positive"] .alert-icon{
|
|
2508
|
-
--tw-bg-opacity: 1;
|
|
2509
|
-
background-color: rgb(163 207 197 / var(--tw-bg-opacity));
|
|
2510
|
-
--tw-text-opacity: 1;
|
|
2511
|
-
color: rgb(26 136 113 / var(--tw-text-opacity))}
|
|
2512
2461
|
[data-coco][data-component="app-alert"][data-theme="positive-vivid"]{
|
|
2513
2462
|
--tw-bg-opacity: 1;
|
|
2514
2463
|
background-color: rgb(26 136 113 / var(--tw-bg-opacity))}
|
|
2515
|
-
[data-coco][data-component="app-alert"][data-theme="positive-vivid"] .alert-icon{
|
|
2516
|
-
--tw-bg-opacity: 1;
|
|
2517
|
-
background-color: rgb(13 97 89 / var(--tw-bg-opacity))}
|
|
2518
2464
|
[data-coco][data-component="app-alert"][data-theme="warning"]{
|
|
2519
2465
|
--tw-border-opacity: 1;
|
|
2520
2466
|
border-color: rgb(252 211 77 / var(--tw-border-opacity));
|
|
@@ -2523,20 +2469,12 @@ select{
|
|
|
2523
2469
|
[data-coco][data-component="app-alert"][data-theme="warning"]:hover{
|
|
2524
2470
|
--tw-border-opacity: 1;
|
|
2525
2471
|
border-color: rgb(251 191 36 / var(--tw-border-opacity))}
|
|
2526
|
-
[data-coco][data-component="app-alert"][data-theme="warning"] .alert-icon{
|
|
2527
|
-
--tw-bg-opacity: 1;
|
|
2528
|
-
background-color: rgb(254 243 199 / var(--tw-bg-opacity));
|
|
2529
|
-
--tw-text-opacity: 1;
|
|
2530
|
-
color: rgb(217 119 6 / var(--tw-text-opacity))}
|
|
2531
2472
|
[data-coco][data-component="app-alert"][data-theme="warning-vivid"]{
|
|
2532
2473
|
--tw-bg-opacity: 1;
|
|
2533
2474
|
background-color: rgb(245 158 11 / var(--tw-bg-opacity))}
|
|
2534
2475
|
[data-coco][data-component="app-alert"][data-theme="warning-vivid"] .alert-content{
|
|
2535
2476
|
--tw-text-opacity: 1;
|
|
2536
2477
|
color: rgb(17 24 39 / var(--tw-text-opacity))}
|
|
2537
|
-
[data-coco][data-component="app-alert"][data-theme="warning-vivid"] .alert-icon{
|
|
2538
|
-
--tw-bg-opacity: 1;
|
|
2539
|
-
background-color: rgb(217 119 6 / var(--tw-bg-opacity))}
|
|
2540
2478
|
[data-coco][data-component="app-alert"][data-theme="warning-vivid"] .coco-link:not([data-theme]){
|
|
2541
2479
|
--tw-text-opacity: 1;
|
|
2542
2480
|
color: rgb(17 24 39 / var(--tw-text-opacity))}
|
|
@@ -2548,17 +2486,9 @@ select{
|
|
|
2548
2486
|
[data-coco][data-component="app-alert"][data-theme="negative"]:hover{
|
|
2549
2487
|
--tw-border-opacity: 1;
|
|
2550
2488
|
border-color: rgb(248 113 113 / var(--tw-border-opacity))}
|
|
2551
|
-
[data-coco][data-component="app-alert"][data-theme="negative"] .alert-icon{
|
|
2552
|
-
--tw-bg-opacity: 1;
|
|
2553
|
-
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
|
|
2554
|
-
--tw-text-opacity: 1;
|
|
2555
|
-
color: rgb(220 38 38 / var(--tw-text-opacity))}
|
|
2556
2489
|
[data-coco][data-component="app-alert"][data-theme="negative-vivid"]{
|
|
2557
2490
|
--tw-bg-opacity: 1;
|
|
2558
2491
|
background-color: rgb(220 38 38 / var(--tw-bg-opacity))}
|
|
2559
|
-
[data-coco][data-component="app-alert"][data-theme="negative-vivid"] .alert-icon{
|
|
2560
|
-
--tw-bg-opacity: 1;
|
|
2561
|
-
background-color: rgb(185 28 28 / var(--tw-bg-opacity))}
|
|
2562
2492
|
[data-coco][data-component="app-alert"][data-theme="info"]{
|
|
2563
2493
|
--tw-border-opacity: 1;
|
|
2564
2494
|
border-color: rgb(125 211 252 / var(--tw-border-opacity));
|
|
@@ -2567,17 +2497,9 @@ select{
|
|
|
2567
2497
|
[data-coco][data-component="app-alert"][data-theme="info"]:hover{
|
|
2568
2498
|
--tw-border-opacity: 1;
|
|
2569
2499
|
border-color: rgb(56 189 248 / var(--tw-border-opacity))}
|
|
2570
|
-
[data-coco][data-component="app-alert"][data-theme="info"] .alert-icon{
|
|
2571
|
-
--tw-bg-opacity: 1;
|
|
2572
|
-
background-color: rgb(186 230 253 / var(--tw-bg-opacity));
|
|
2573
|
-
--tw-text-opacity: 1;
|
|
2574
|
-
color: rgb(2 132 199 / var(--tw-text-opacity))}
|
|
2575
2500
|
[data-coco][data-component="app-alert"][data-theme="info-vivid"]{
|
|
2576
2501
|
--tw-bg-opacity: 1;
|
|
2577
2502
|
background-color: rgb(2 132 199 / var(--tw-bg-opacity))}
|
|
2578
|
-
[data-coco][data-component="app-alert"][data-theme="info-vivid"] .alert-icon{
|
|
2579
|
-
--tw-bg-opacity: 1;
|
|
2580
|
-
background-color: rgb(3 105 161 / var(--tw-bg-opacity))}
|
|
2581
2503
|
/* Themes */
|
|
2582
2504
|
[data-coco][data-component="app-button"][data-theme]{
|
|
2583
2505
|
overflow: hidden;
|
|
@@ -4491,6 +4413,102 @@ select{
|
|
|
4491
4413
|
--tw-scale-y: .9;
|
|
4492
4414
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
4493
4415
|
opacity: 0}
|
|
4416
|
+
[data-coco][data-component="app-stamp"]:not([data-style="compact"]){
|
|
4417
|
+
position: relative;
|
|
4418
|
+
border-radius: 9999px}
|
|
4419
|
+
[data-coco][data-component="app-stamp"]:not([data-style="compact"]) .coco-icon{
|
|
4420
|
+
position: absolute;
|
|
4421
|
+
top: 50%;
|
|
4422
|
+
left: 50%;
|
|
4423
|
+
--tw-translate-x: -50%;
|
|
4424
|
+
--tw-translate-y: -50%;
|
|
4425
|
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
|
|
4426
|
+
/* Sizes */
|
|
4427
|
+
[data-coco][data-component="app-stamp"]:not([data-style="compact"])[data-size="xs"]{
|
|
4428
|
+
height: 1.5rem;
|
|
4429
|
+
width: 1.5rem}
|
|
4430
|
+
[data-coco][data-component="app-stamp"]:not([data-style="compact"])[data-size="sm"]{
|
|
4431
|
+
height: 1.75rem;
|
|
4432
|
+
width: 1.75rem}
|
|
4433
|
+
[data-coco][data-component="app-stamp"]:not([data-style="compact"])[data-size="md"]{
|
|
4434
|
+
height: 2.25rem;
|
|
4435
|
+
width: 2.25rem}
|
|
4436
|
+
[data-coco][data-component="app-stamp"]:not([data-style="compact"])[data-size="lg"]{
|
|
4437
|
+
height: 2.75rem;
|
|
4438
|
+
width: 2.75rem}
|
|
4439
|
+
/* Themes */
|
|
4440
|
+
[data-coco][data-component="app-stamp"][data-theme="positive"][data-style="subtle"]{
|
|
4441
|
+
--tw-bg-opacity: 1;
|
|
4442
|
+
background-color: rgb(163 207 197 / var(--tw-bg-opacity));
|
|
4443
|
+
--tw-text-opacity: 1;
|
|
4444
|
+
color: rgb(26 136 113 / var(--tw-text-opacity))}
|
|
4445
|
+
[data-coco][data-component="app-stamp"][data-theme="positive"][data-style="vivid"]{
|
|
4446
|
+
--tw-bg-opacity: 1;
|
|
4447
|
+
background-color: rgb(26 136 113 / var(--tw-bg-opacity));
|
|
4448
|
+
--tw-text-opacity: 1;
|
|
4449
|
+
color: rgb(255 255 255 / var(--tw-text-opacity))}
|
|
4450
|
+
[data-coco][data-component="app-stamp"][data-theme="positive"][data-style="inverse"]{
|
|
4451
|
+
--tw-bg-opacity: 1;
|
|
4452
|
+
background-color: rgb(13 97 89 / var(--tw-bg-opacity));
|
|
4453
|
+
--tw-text-opacity: 1;
|
|
4454
|
+
color: rgb(255 255 255 / var(--tw-text-opacity))}
|
|
4455
|
+
[data-coco][data-component="app-stamp"][data-theme="positive"][data-style="compact"]{
|
|
4456
|
+
--tw-text-opacity: 1;
|
|
4457
|
+
color: rgb(26 136 113 / var(--tw-text-opacity))}
|
|
4458
|
+
[data-coco][data-component="app-stamp"][data-theme="negative"][data-style="subtle"]{
|
|
4459
|
+
--tw-bg-opacity: 1;
|
|
4460
|
+
background-color: rgb(254 202 202 / var(--tw-bg-opacity));
|
|
4461
|
+
--tw-text-opacity: 1;
|
|
4462
|
+
color: rgb(220 38 38 / var(--tw-text-opacity))}
|
|
4463
|
+
[data-coco][data-component="app-stamp"][data-theme="negative"][data-style="vivid"]{
|
|
4464
|
+
--tw-bg-opacity: 1;
|
|
4465
|
+
background-color: rgb(220 38 38 / var(--tw-bg-opacity));
|
|
4466
|
+
--tw-text-opacity: 1;
|
|
4467
|
+
color: rgb(255 255 255 / var(--tw-text-opacity))}
|
|
4468
|
+
[data-coco][data-component="app-stamp"][data-theme="negative"][data-style="inverse"]{
|
|
4469
|
+
--tw-bg-opacity: 1;
|
|
4470
|
+
background-color: rgb(185 28 28 / var(--tw-bg-opacity));
|
|
4471
|
+
--tw-text-opacity: 1;
|
|
4472
|
+
color: rgb(255 255 255 / var(--tw-text-opacity))}
|
|
4473
|
+
[data-coco][data-component="app-stamp"][data-theme="negative"][data-style="compact"]{
|
|
4474
|
+
--tw-text-opacity: 1;
|
|
4475
|
+
color: rgb(220 38 38 / var(--tw-text-opacity))}
|
|
4476
|
+
[data-coco][data-component="app-stamp"][data-theme="warning"][data-style="subtle"]{
|
|
4477
|
+
--tw-bg-opacity: 1;
|
|
4478
|
+
background-color: rgb(254 243 199 / var(--tw-bg-opacity));
|
|
4479
|
+
--tw-text-opacity: 1;
|
|
4480
|
+
color: rgb(217 119 6 / var(--tw-text-opacity))}
|
|
4481
|
+
[data-coco][data-component="app-stamp"][data-theme="warning"][data-style="vivid"]{
|
|
4482
|
+
--tw-bg-opacity: 1;
|
|
4483
|
+
background-color: rgb(245 158 11 / var(--tw-bg-opacity));
|
|
4484
|
+
--tw-text-opacity: 1;
|
|
4485
|
+
color: rgb(255 255 255 / var(--tw-text-opacity))}
|
|
4486
|
+
[data-coco][data-component="app-stamp"][data-theme="warning"][data-style="inverse"]{
|
|
4487
|
+
--tw-bg-opacity: 1;
|
|
4488
|
+
background-color: rgb(217 119 6 / var(--tw-bg-opacity));
|
|
4489
|
+
--tw-text-opacity: 1;
|
|
4490
|
+
color: rgb(255 255 255 / var(--tw-text-opacity))}
|
|
4491
|
+
[data-coco][data-component="app-stamp"][data-theme="warning"][data-style="compact"]{
|
|
4492
|
+
--tw-text-opacity: 1;
|
|
4493
|
+
color: rgb(217 119 6 / var(--tw-text-opacity))}
|
|
4494
|
+
[data-coco][data-component="app-stamp"][data-theme="info"][data-style="subtle"]{
|
|
4495
|
+
--tw-bg-opacity: 1;
|
|
4496
|
+
background-color: rgb(186 230 253 / var(--tw-bg-opacity));
|
|
4497
|
+
--tw-text-opacity: 1;
|
|
4498
|
+
color: rgb(2 132 199 / var(--tw-text-opacity))}
|
|
4499
|
+
[data-coco][data-component="app-stamp"][data-theme="info"][data-style="vivid"]{
|
|
4500
|
+
--tw-bg-opacity: 1;
|
|
4501
|
+
background-color: rgb(2 132 199 / var(--tw-bg-opacity));
|
|
4502
|
+
--tw-text-opacity: 1;
|
|
4503
|
+
color: rgb(255 255 255 / var(--tw-text-opacity))}
|
|
4504
|
+
[data-coco][data-component="app-stamp"][data-theme="info"][data-style="inverse"]{
|
|
4505
|
+
--tw-bg-opacity: 1;
|
|
4506
|
+
background-color: rgb(3 105 161 / var(--tw-bg-opacity));
|
|
4507
|
+
--tw-text-opacity: 1;
|
|
4508
|
+
color: rgb(255 255 255 / var(--tw-text-opacity))}
|
|
4509
|
+
[data-coco][data-component="app-stamp"][data-theme="info"][data-style="compact"]{
|
|
4510
|
+
--tw-text-opacity: 1;
|
|
4511
|
+
color: rgb(2 132 199 / var(--tw-text-opacity))}
|
|
4494
4512
|
[data-coco][data-component="app-system-banner"] {
|
|
4495
4513
|
}
|
|
4496
4514
|
[data-coco][data-component="app-toast"]{
|
|
@@ -4610,6 +4628,8 @@ select{
|
|
|
4610
4628
|
height: 100%;
|
|
4611
4629
|
overflow-y: auto;
|
|
4612
4630
|
scroll-behavior: smooth;
|
|
4631
|
+
--tw-bg-opacity: 1;
|
|
4632
|
+
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
|
|
4613
4633
|
grid-area: body}
|
|
4614
4634
|
[data-coco][data-component="application-layout"] .layout-sidebar-nav{
|
|
4615
4635
|
scroll-behavior: smooth;
|
|
@@ -4709,6 +4729,10 @@ select{
|
|
|
4709
4729
|
|
|
4710
4730
|
[data-coco][data-component="page-layout"] .page-body{
|
|
4711
4731
|
padding-right: 2.75rem}}
|
|
4732
|
+
[data-coco][data-component="page-layout"] .page-sections > :not([hidden]) ~ :not([hidden]){
|
|
4733
|
+
--tw-space-y-reverse: 0;
|
|
4734
|
+
margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
|
|
4735
|
+
margin-bottom: calc(3rem * var(--tw-space-y-reverse))}
|
|
4712
4736
|
[data-coco][data-component="page-layout"] .page-controls{
|
|
4713
4737
|
position: fixed;
|
|
4714
4738
|
top: 50%;
|
|
@@ -5172,6 +5196,7 @@ select{
|
|
|
5172
5196
|
}
|
|
5173
5197
|
.icon {
|
|
5174
5198
|
}
|
|
5199
|
+
/* branded */
|
|
5175
5200
|
.tippy-dropdown-box{
|
|
5176
5201
|
border-radius: 0.5rem;
|
|
5177
5202
|
border-width: 1px;
|
|
@@ -5303,8 +5328,6 @@ select{
|
|
|
5303
5328
|
.app-alert-stacked[data-condensed="true"] .alert-container{
|
|
5304
5329
|
padding-top: 0.75rem;
|
|
5305
5330
|
padding-bottom: 0.75rem}
|
|
5306
|
-
.app-alert-stacked[data-condensed="true"] .coco-icon{
|
|
5307
|
-
margin-top: 0.375rem}
|
|
5308
5331
|
.app-alert-stacked[data-condensed="true"].with-title .alert-message{
|
|
5309
5332
|
margin-top: 0px}
|
|
5310
5333
|
.app-alert-stacked[data-dismissable="true"] .alert-container{
|
|
@@ -5316,7 +5339,7 @@ select{
|
|
|
5316
5339
|
margin-left: auto}
|
|
5317
5340
|
.app-alert-stacked:not(.with-title):not(.with-action) .alert-container{
|
|
5318
5341
|
align-items: center}
|
|
5319
|
-
.app-alert-stacked:not(.with-title):not(.with-action) .alert-
|
|
5342
|
+
.app-alert-stacked:not(.with-title):not(.with-action) .alert-stamp{
|
|
5320
5343
|
align-self: center}
|
|
5321
5344
|
.app-alert-stacked:not(.with-title):not(.with-action)[data-dismissable="true"] .alert-dismiss{
|
|
5322
5345
|
position: absolute;
|
|
@@ -5328,7 +5351,7 @@ select{
|
|
|
5328
5351
|
align-items: center;
|
|
5329
5352
|
padding-top: 0.625rem;
|
|
5330
5353
|
padding-bottom: 0.625rem}
|
|
5331
|
-
.app-alert-multi-line .alert-
|
|
5354
|
+
.app-alert-multi-line .alert-stamp{
|
|
5332
5355
|
align-self: center}
|
|
5333
5356
|
.app-alert-multi-line .alert-body{
|
|
5334
5357
|
display: flex;
|
|
@@ -5344,8 +5367,6 @@ select{
|
|
|
5344
5367
|
.app-alert-multi-line[data-condensed="true"] .alert-container{
|
|
5345
5368
|
padding-top: 0.5rem;
|
|
5346
5369
|
padding-bottom: 0.5rem}
|
|
5347
|
-
.app-alert-multi-line[data-condensed="true"] .coco-icon{
|
|
5348
|
-
margin-top: 0px}
|
|
5349
5370
|
.app-alert-multi-line[data-condensed="true"].with-title .alert-message{
|
|
5350
5371
|
margin-top: 0px}
|
|
5351
5372
|
.app-alert-multi-line .alert-actions{
|
|
@@ -6178,11 +6178,15 @@
|
|
|
6178
6178
|
"display-2": ["80px", "84px"],
|
|
6179
6179
|
"display-3": ["64px", "68px"],
|
|
6180
6180
|
"display-4": ["48px", "52px"],
|
|
6181
|
-
"
|
|
6182
|
-
"
|
|
6183
|
-
"
|
|
6181
|
+
"relaxed-display-1": ["96px", "104px"],
|
|
6182
|
+
"relaxed-display-2": ["80px", "88px"],
|
|
6183
|
+
"relaxed-display-3": ["64px", "72px"],
|
|
6184
|
+
"relaxed-display-4": ["48px", "56px"],
|
|
6185
|
+
"heading-1": ["40px", "48px"],
|
|
6186
|
+
"heading-2": ["32px", "40px"],
|
|
6187
|
+
"heading-3": ["28px", "36px"],
|
|
6184
6188
|
"heading-4": ["24px", "30px"],
|
|
6185
|
-
"heading-5": ["20px", "
|
|
6189
|
+
"heading-5": ["20px", "24px"],
|
|
6186
6190
|
"heading-6": ["16px", "20px"],
|
|
6187
6191
|
"subheading-1": ["32px", "40px"],
|
|
6188
6192
|
"subheading-2": ["24px", "32px"],
|
|
@@ -14044,7 +14048,7 @@
|
|
|
14044
14048
|
var package_default = {
|
|
14045
14049
|
name: "coveragebook-components",
|
|
14046
14050
|
type: "module",
|
|
14047
|
-
version: "0.
|
|
14051
|
+
version: "0.10.0",
|
|
14048
14052
|
main: "index.js",
|
|
14049
14053
|
repository: "git@github.com:coveragebook/coco.git",
|
|
14050
14054
|
author: "Mark Perkins <mark@coveragebook.com>",
|
|
@@ -24376,7 +24380,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
|
|
|
24376
24380
|
this.hide();
|
|
24377
24381
|
},
|
|
24378
24382
|
visit(url) {
|
|
24379
|
-
navigateTo(url, { frame: this.frame.id });
|
|
24383
|
+
navigateTo(url, { frame: this.frame.id, turbo: true });
|
|
24380
24384
|
},
|
|
24381
24385
|
scrollTo(pos) {
|
|
24382
24386
|
setTimeout(() => {
|
|
@@ -743,14 +743,6 @@ select {
|
|
|
743
743
|
--tw-text-opacity: 1;
|
|
744
744
|
color: rgb(17 24 39 / var(--tw-text-opacity));
|
|
745
745
|
}
|
|
746
|
-
[data-coco] h1,
|
|
747
|
-
[data-coco] h2,
|
|
748
|
-
[data-coco] h3,
|
|
749
|
-
[data-coco] h4,
|
|
750
|
-
[data-coco] h5,
|
|
751
|
-
[data-coco] h6 {
|
|
752
|
-
font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
753
|
-
}
|
|
754
746
|
[data-coco][data-component="avatar"] {
|
|
755
747
|
display: block;
|
|
756
748
|
flex: none;
|
|
@@ -1978,6 +1970,7 @@ select {
|
|
|
1978
1970
|
}
|
|
1979
1971
|
.icon {
|
|
1980
1972
|
}
|
|
1973
|
+
/* branded */
|
|
1981
1974
|
.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}
|
|
1982
1975
|
[data-tippy-root]{max-width:calc(100vw - 10px)}
|
|
1983
1976
|
.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}
|
|
@@ -15598,7 +15598,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
|
|
|
15598
15598
|
this.hide();
|
|
15599
15599
|
},
|
|
15600
15600
|
visit(url) {
|
|
15601
|
-
navigateTo(url, { frame: this.frame.id });
|
|
15601
|
+
navigateTo(url, { frame: this.frame.id, turbo: true });
|
|
15602
15602
|
},
|
|
15603
15603
|
scrollTo(pos) {
|
|
15604
15604
|
setTimeout(() => {
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
@layer utilities {
|
|
2
|
+
.coco-heading-1 {
|
|
3
|
+
@apply font-body text-heading-1;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
.coco-heading-2 {
|
|
7
|
+
@apply font-body text-heading-2;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.coco-heading-3 {
|
|
11
|
+
@apply font-body text-heading-3;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.coco-heading-4 {
|
|
15
|
+
@apply font-body text-heading-4;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.coco-heading-5 {
|
|
19
|
+
@apply font-body text-heading-5;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.coco-heading-6 {
|
|
23
|
+
@apply font-body text-heading-6;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.coco-display-1 {
|
|
27
|
+
@apply font-display text-display-1;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.coco-display-2 {
|
|
31
|
+
@apply font-display text-display-2;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.coco-display-3 {
|
|
35
|
+
@apply font-display text-display-3;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.coco-display-4 {
|
|
39
|
+
@apply font-display text-display-4;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* branded */
|
|
43
|
+
|
|
44
|
+
.coco-branded-heading-1 {
|
|
45
|
+
@apply font-branded text-heading-1;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.coco-branded-heading-2 {
|
|
49
|
+
@apply font-branded text-heading-2;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.coco-branded-heading-3 {
|
|
53
|
+
@apply font-branded text-heading-3;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.coco-branded-heading-4 {
|
|
57
|
+
@apply font-branded text-heading-4;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.coco-branded-heading-5 {
|
|
61
|
+
@apply font-branded text-heading-5;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.coco-branded-display-1 {
|
|
65
|
+
@apply font-branded text-relaxed-display-1;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.coco-branded-display-2 {
|
|
69
|
+
@apply font-branded text-relaxed-display-2;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.coco-branded-display-3 {
|
|
73
|
+
@apply font-branded text-relaxed-display-3;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.coco-branded-display-4 {
|
|
77
|
+
@apply font-branded text-relaxed-display-4;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
@@ -5,14 +5,14 @@
|
|
|
5
5
|
.alert-container {
|
|
6
6
|
@apply flex items-start px-4 py-2 relative;
|
|
7
7
|
}
|
|
8
|
-
|
|
8
|
+
/*
|
|
9
9
|
.alert-icon {
|
|
10
10
|
@apply flex items-center p-2 rounded-full;
|
|
11
11
|
|
|
12
12
|
.coco-icon {
|
|
13
13
|
@apply w-5 h-5;
|
|
14
14
|
}
|
|
15
|
-
}
|
|
15
|
+
} */
|
|
16
16
|
|
|
17
17
|
.alert-body {
|
|
18
18
|
@apply pl-4 pr-2;
|
|
@@ -58,6 +58,14 @@
|
|
|
58
58
|
.alert-body {
|
|
59
59
|
@apply @[1000px]:w-auto;
|
|
60
60
|
}
|
|
61
|
+
|
|
62
|
+
.alert-stamp .coco-icon {
|
|
63
|
+
@apply text-content-light-1;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
&[data-theme="warning-vivid"] .alert-stamp .coco-icon {
|
|
67
|
+
@apply text-content-dark-1;
|
|
68
|
+
}
|
|
61
69
|
}
|
|
62
70
|
|
|
63
71
|
/* Dismissable */
|
|
@@ -80,10 +88,6 @@
|
|
|
80
88
|
@apply py-1.5;
|
|
81
89
|
}
|
|
82
90
|
|
|
83
|
-
.alert-icon {
|
|
84
|
-
@apply p-0 !bg-transparent;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
91
|
.alert-body {
|
|
88
92
|
@apply pl-3;
|
|
89
93
|
}
|
|
@@ -122,10 +126,6 @@
|
|
|
122
126
|
@apply text-content-light-1;
|
|
123
127
|
}
|
|
124
128
|
|
|
125
|
-
.alert-icon {
|
|
126
|
-
@apply text-content-light-1;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
129
|
.coco_link:not([data-theme]) {
|
|
130
130
|
@apply app-link-neutral-light;
|
|
131
131
|
}
|
|
@@ -133,26 +133,14 @@
|
|
|
133
133
|
|
|
134
134
|
&[data-theme="positive"] {
|
|
135
135
|
@apply bg-background-positive-light border-positive-300 hover:border-positive-400;
|
|
136
|
-
|
|
137
|
-
.alert-icon {
|
|
138
|
-
@apply text-content-positive bg-positive-200;
|
|
139
|
-
}
|
|
140
136
|
}
|
|
141
137
|
|
|
142
138
|
&[data-theme="positive-vivid"] {
|
|
143
139
|
@apply bg-background-positive;
|
|
144
|
-
|
|
145
|
-
.alert-icon {
|
|
146
|
-
@apply bg-positive-700;
|
|
147
|
-
}
|
|
148
140
|
}
|
|
149
141
|
|
|
150
142
|
&[data-theme="warning"] {
|
|
151
143
|
@apply bg-background-warning-light border-warning-300 hover:border-warning-400;
|
|
152
|
-
|
|
153
|
-
.alert-icon {
|
|
154
|
-
@apply text-content-warning bg-warning-100;
|
|
155
|
-
}
|
|
156
144
|
}
|
|
157
145
|
|
|
158
146
|
&[data-theme="warning-vivid"] {
|
|
@@ -162,10 +150,6 @@
|
|
|
162
150
|
@apply text-content-dark-1;
|
|
163
151
|
}
|
|
164
152
|
|
|
165
|
-
.alert-icon {
|
|
166
|
-
@apply bg-warning-600;
|
|
167
|
-
}
|
|
168
|
-
|
|
169
153
|
.coco-link:not([data-theme]) {
|
|
170
154
|
@apply app-link-neutral-dark;
|
|
171
155
|
}
|
|
@@ -173,34 +157,18 @@
|
|
|
173
157
|
|
|
174
158
|
&[data-theme="negative"] {
|
|
175
159
|
@apply bg-background-negative-light border-negative-300 hover:border-negative-400;
|
|
176
|
-
|
|
177
|
-
.alert-icon {
|
|
178
|
-
@apply text-content-negative bg-negative-200;
|
|
179
|
-
}
|
|
180
160
|
}
|
|
181
161
|
|
|
182
162
|
&[data-theme="negative-vivid"] {
|
|
183
163
|
@apply bg-background-negative;
|
|
184
|
-
|
|
185
|
-
.alert-icon {
|
|
186
|
-
@apply bg-negative-700;
|
|
187
|
-
}
|
|
188
164
|
}
|
|
189
165
|
|
|
190
166
|
&[data-theme="info"] {
|
|
191
167
|
@apply bg-background-info-light border-info-300 hover:border-info-400;
|
|
192
|
-
|
|
193
|
-
.alert-icon {
|
|
194
|
-
@apply text-content-info bg-info-200;
|
|
195
|
-
}
|
|
196
168
|
}
|
|
197
169
|
|
|
198
170
|
&[data-theme="info-vivid"] {
|
|
199
171
|
@apply bg-background-info;
|
|
200
|
-
|
|
201
|
-
.alert-icon {
|
|
202
|
-
@apply bg-info-700;
|
|
203
|
-
}
|
|
204
172
|
}
|
|
205
173
|
}
|
|
206
174
|
}
|
|
@@ -224,7 +192,7 @@
|
|
|
224
192
|
@apply py-3;
|
|
225
193
|
}
|
|
226
194
|
|
|
227
|
-
.coco-
|
|
195
|
+
.coco-stamp {
|
|
228
196
|
@apply mt-1.5;
|
|
229
197
|
}
|
|
230
198
|
|
|
@@ -249,7 +217,7 @@
|
|
|
249
217
|
@apply items-center;
|
|
250
218
|
}
|
|
251
219
|
|
|
252
|
-
.alert-
|
|
220
|
+
.alert-stamp {
|
|
253
221
|
@apply self-center;
|
|
254
222
|
}
|
|
255
223
|
|
|
@@ -267,7 +235,7 @@
|
|
|
267
235
|
@apply items-center py-2.5;
|
|
268
236
|
}
|
|
269
237
|
|
|
270
|
-
.alert-
|
|
238
|
+
.alert-stamp {
|
|
271
239
|
@apply self-center;
|
|
272
240
|
}
|
|
273
241
|
|
|
@@ -292,7 +260,7 @@
|
|
|
292
260
|
@apply py-2;
|
|
293
261
|
}
|
|
294
262
|
|
|
295
|
-
.coco-
|
|
263
|
+
.coco-stamp {
|
|
296
264
|
@apply mt-0;
|
|
297
265
|
}
|
|
298
266
|
|
|
@@ -2,22 +2,11 @@ module Coco
|
|
|
2
2
|
module App
|
|
3
3
|
module Elements
|
|
4
4
|
class Alert < Coco::Component
|
|
5
|
-
include Concerns::
|
|
5
|
+
include Concerns::AcceptsOptions
|
|
6
6
|
include Concerns::AcceptsTheme
|
|
7
7
|
|
|
8
8
|
THEMES = %W[positive warning negative info positive-vivid warning-vivid negative-vivid info-vivid]
|
|
9
9
|
|
|
10
|
-
THEME_ICONS = {
|
|
11
|
-
positive: :check_circle,
|
|
12
|
-
positive_vivid: :check_circle,
|
|
13
|
-
warning: :alert_triangle,
|
|
14
|
-
warning_vivid: :alert_triangle,
|
|
15
|
-
negative: :alert_circle,
|
|
16
|
-
negative_vivid: :alert_circle,
|
|
17
|
-
info: :info,
|
|
18
|
-
info_vivid: :info
|
|
19
|
-
}.freeze
|
|
20
|
-
|
|
21
10
|
accepts_option :dismissable, from: [true, false], default: false
|
|
22
11
|
accepts_option :dismiss_after_action, from: [true, false], default: true
|
|
23
12
|
accepts_option :banner, from: [true, false], default: false
|
|
@@ -45,13 +34,9 @@ module Coco
|
|
|
45
34
|
end
|
|
46
35
|
|
|
47
36
|
before_render do
|
|
48
|
-
theme = get_option_value(:theme)
|
|
49
|
-
|
|
50
37
|
unless tag_attr?(:id)
|
|
51
38
|
set_tag_attr(:id, "alert-#{rand(1000)}")
|
|
52
39
|
end
|
|
53
|
-
|
|
54
|
-
icon(name: THEME_ICONS[theme.tr("-", "_").to_sym])
|
|
55
40
|
end
|
|
56
41
|
|
|
57
42
|
def dismissable?
|
|
@@ -78,6 +63,16 @@ module Coco
|
|
|
78
63
|
def button_size
|
|
79
64
|
get_option_value(:condensed) ? :xs : :sm
|
|
80
65
|
end
|
|
66
|
+
|
|
67
|
+
def stamp
|
|
68
|
+
type = unvividify(get_option_value(:theme))&.to_sym
|
|
69
|
+
style = if get_option_value(:banner)
|
|
70
|
+
:compact
|
|
71
|
+
else
|
|
72
|
+
vivid? ? :inverse : :subtle
|
|
73
|
+
end
|
|
74
|
+
coco_stamp(type, style:)
|
|
75
|
+
end
|
|
81
76
|
end
|
|
82
77
|
end
|
|
83
78
|
end
|
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
[data-coco][data-component="app-stamp"] {
|
|
3
|
+
&:not([data-style="compact"]) {
|
|
4
|
+
@apply rounded-full relative;
|
|
5
|
+
|
|
6
|
+
.coco-icon {
|
|
7
|
+
@apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
/* Sizes */
|
|
11
|
+
|
|
12
|
+
&[data-size="xs"] {
|
|
13
|
+
@apply w-6 h-6;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
&[data-size="sm"] {
|
|
17
|
+
@apply w-7 h-7;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&[data-size="md"] {
|
|
21
|
+
@apply w-9 h-9;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&[data-size="lg"] {
|
|
25
|
+
@apply w-11 h-11;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/* Themes */
|
|
30
|
+
|
|
31
|
+
&[data-theme="positive"] {
|
|
32
|
+
&[data-style="subtle"] {
|
|
33
|
+
@apply bg-green-200 text-content-positive;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&[data-style="vivid"] {
|
|
37
|
+
@apply bg-background-positive text-content-light-1;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&[data-style="inverse"] {
|
|
41
|
+
@apply bg-green-700 text-content-light-1;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&[data-style="compact"] {
|
|
45
|
+
@apply text-content-positive;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&[data-theme="negative"] {
|
|
50
|
+
&[data-style="subtle"] {
|
|
51
|
+
@apply bg-red-200 text-content-negative;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&[data-style="vivid"] {
|
|
55
|
+
@apply bg-background-negative text-content-light-1;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
&[data-style="inverse"] {
|
|
59
|
+
@apply bg-red-700 text-content-light-1;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
&[data-style="compact"] {
|
|
63
|
+
@apply text-content-negative;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
&[data-theme="warning"] {
|
|
68
|
+
&[data-style="subtle"] {
|
|
69
|
+
@apply bg-amber-100 text-content-warning;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
&[data-style="vivid"] {
|
|
73
|
+
@apply bg-background-warning text-content-light-1;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
&[data-style="inverse"] {
|
|
77
|
+
@apply bg-amber-600 text-content-light-1;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
&[data-style="compact"] {
|
|
81
|
+
@apply text-content-warning;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
&[data-theme="info"] {
|
|
86
|
+
&[data-style="subtle"] {
|
|
87
|
+
@apply bg-blue-200 text-content-info;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
&[data-style="vivid"] {
|
|
91
|
+
@apply bg-background-info text-content-light-1;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
&[data-style="inverse"] {
|
|
95
|
+
@apply bg-blue-700 text-content-light-1;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
&[data-style="compact"] {
|
|
99
|
+
@apply text-content-info;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
module Coco
|
|
2
|
+
module App
|
|
3
|
+
module Elements
|
|
4
|
+
class Stamp < Coco::Component
|
|
5
|
+
include Concerns::AcceptsOptions
|
|
6
|
+
include Concerns::AcceptsTheme
|
|
7
|
+
|
|
8
|
+
THEMES = [
|
|
9
|
+
"positive",
|
|
10
|
+
"negative",
|
|
11
|
+
"warning",
|
|
12
|
+
"info"
|
|
13
|
+
]
|
|
14
|
+
|
|
15
|
+
DEFAULT_THEME = "info"
|
|
16
|
+
|
|
17
|
+
accepts_option :size, from: %i[xs sm md lg], default: :md
|
|
18
|
+
accepts_option :style, from: %i[subtle vivid inverse compact], default: :subtle
|
|
19
|
+
accepts_option :theme, from: THEMES, default: DEFAULT_THEME
|
|
20
|
+
|
|
21
|
+
attr_reader :icon_name
|
|
22
|
+
|
|
23
|
+
def initialize(icon:, **kwargs)
|
|
24
|
+
@icon_name = icon
|
|
25
|
+
end
|
|
26
|
+
end
|
|
27
|
+
end
|
|
28
|
+
end
|
|
29
|
+
end
|
|
@@ -11,6 +11,10 @@ module Coco
|
|
|
11
11
|
renders_one :header
|
|
12
12
|
renders_many :hidden_sections
|
|
13
13
|
|
|
14
|
+
renders_many :sections, ->(**kwargs, &block) do
|
|
15
|
+
coco_tag(:section, **kwargs, &block)
|
|
16
|
+
end
|
|
17
|
+
|
|
14
18
|
renders_one :previous_link, ->(**kwargs) do
|
|
15
19
|
Coco::PagerLink.new(**kwargs, direction: :previous, class: "page-control-previous")
|
|
16
20
|
end
|
|
@@ -24,11 +24,11 @@
|
|
|
24
24
|
<% else %>
|
|
25
25
|
<div data-role="inline-modal-content">
|
|
26
26
|
<% if container_type == :dialog %>
|
|
27
|
-
<%= render Coco::ModalDialog.new(title: title.to_s, dismissable: false) do %>
|
|
27
|
+
<%= render Coco::ModalDialog.new(id: @container_id, title: title.to_s, dismissable: false) do %>
|
|
28
28
|
<%= content %>
|
|
29
29
|
<% end %>
|
|
30
30
|
<% else %>
|
|
31
|
-
<%= coco_panel do %>
|
|
31
|
+
<%= coco_panel(id: @container_id) do %>
|
|
32
32
|
<%= content %>
|
|
33
33
|
<% end %>
|
|
34
34
|
<% end %>
|
|
@@ -9,15 +9,17 @@ module Coco
|
|
|
9
9
|
renders_one :title
|
|
10
10
|
|
|
11
11
|
renders_one :container, types: {
|
|
12
|
-
dialog: ->(**kwargs, &block) do
|
|
12
|
+
dialog: ->(id: nil, **kwargs, &block) do
|
|
13
13
|
@container_content = block
|
|
14
|
+
@container_id = id
|
|
14
15
|
@container_type = :dialog
|
|
15
|
-
Coco::ModalDialog.new(dismissable: get_option_value(:dismissable), **kwargs)
|
|
16
|
+
Coco::ModalDialog.new(dismissable: get_option_value(:dismissable), id:, **kwargs)
|
|
16
17
|
end,
|
|
17
18
|
|
|
18
|
-
lightbox: ->(**kwargs, &block) do
|
|
19
|
+
lightbox: ->(id: nil, **kwargs, &block) do
|
|
19
20
|
@container_type = :lightbox
|
|
20
|
-
|
|
21
|
+
@container_id = id
|
|
22
|
+
Coco::ModalLightbox.new(dismissable: get_option_value(:dismissable), id:, **kwargs)
|
|
21
23
|
end
|
|
22
24
|
}
|
|
23
25
|
|
|
@@ -5,5 +5,11 @@ module Coco
|
|
|
5
5
|
accepts_option :size, from: [:auto, :full], default: :auto
|
|
6
6
|
accepts_option :prose, from: [true, false], default: false
|
|
7
7
|
accepts_option :boxed, from: [true, false], default: true
|
|
8
|
+
|
|
9
|
+
attr_reader :text_content
|
|
10
|
+
|
|
11
|
+
def initialize(text_content: nil, **)
|
|
12
|
+
@text_content = text_content
|
|
13
|
+
end
|
|
8
14
|
end
|
|
9
15
|
end
|
|
@@ -68,6 +68,23 @@ module Coco
|
|
|
68
68
|
render Coco::App::Elements::SeamlessTextarea.new(**), &block
|
|
69
69
|
end
|
|
70
70
|
|
|
71
|
+
def coco_stamp(type = nil, **)
|
|
72
|
+
props = case type
|
|
73
|
+
when :success, :positive
|
|
74
|
+
{icon: :check_circle, theme: :positive}
|
|
75
|
+
when :error, :negative
|
|
76
|
+
{icon: :alert_circle, theme: :negative}
|
|
77
|
+
when :warning
|
|
78
|
+
{icon: :alert_triangle, theme: :warning}
|
|
79
|
+
when :info
|
|
80
|
+
{icon: :info, theme: :info}
|
|
81
|
+
else
|
|
82
|
+
{}
|
|
83
|
+
end
|
|
84
|
+
|
|
85
|
+
render Coco::App::Elements::Stamp.new(**props, **)
|
|
86
|
+
end
|
|
87
|
+
|
|
71
88
|
def coco_snackbar(**, &block)
|
|
72
89
|
render Coco::App::Elements::Snackbar.new(**), &block
|
|
73
90
|
end
|
|
@@ -29,8 +29,8 @@ module Coco
|
|
|
29
29
|
end
|
|
30
30
|
end
|
|
31
31
|
|
|
32
|
-
def coco_placeholder(
|
|
33
|
-
render Coco::Placeholder.new(
|
|
32
|
+
def coco_placeholder(text_content = nil, **, &block)
|
|
33
|
+
render Coco::Placeholder.new(text_content:, **), &block
|
|
34
34
|
end
|
|
35
35
|
|
|
36
36
|
def coco_modal(name = "default", **, &block)
|
|
@@ -12,7 +12,7 @@ module.exports = merge(baseConfig, {
|
|
|
12
12
|
fontFamily: {
|
|
13
13
|
display: [fontFamily.displaySans, ...defaultTheme.fontFamily.sans],
|
|
14
14
|
body: [fontFamily.bodySans, ...defaultTheme.fontFamily.sans],
|
|
15
|
-
|
|
15
|
+
branded: [fontFamily.displaySerif, ...defaultTheme.fontFamily.serif],
|
|
16
16
|
},
|
|
17
17
|
extend: {
|
|
18
18
|
fontSize,
|
|
@@ -12,6 +12,7 @@ module.exports = merge(baseConfig, {
|
|
|
12
12
|
fontFamily: {
|
|
13
13
|
display: [fontFamily.displaySans, ...defaultTheme.fontFamily.sans],
|
|
14
14
|
body: [fontFamily.bodySans, ...defaultTheme.fontFamily.sans],
|
|
15
|
+
branded: [fontFamily.displaySerif, ...defaultTheme.fontFamily.serif],
|
|
15
16
|
},
|
|
16
17
|
extend: {
|
|
17
18
|
fontSize,
|
data/config/tokens.cjs
CHANGED
|
@@ -199,11 +199,16 @@ const fontSize = {
|
|
|
199
199
|
"display-3": ["64px", "68px"],
|
|
200
200
|
"display-4": ["48px", "52px"],
|
|
201
201
|
|
|
202
|
-
"
|
|
203
|
-
"
|
|
204
|
-
"
|
|
202
|
+
"relaxed-display-1": ["96px", "104px"],
|
|
203
|
+
"relaxed-display-2": ["80px", "88px"],
|
|
204
|
+
"relaxed-display-3": ["64px", "72px"],
|
|
205
|
+
"relaxed-display-4": ["48px", "56px"],
|
|
206
|
+
|
|
207
|
+
"heading-1": ["40px", "48px"],
|
|
208
|
+
"heading-2": ["32px", "40px"],
|
|
209
|
+
"heading-3": ["28px", "36px"],
|
|
205
210
|
"heading-4": ["24px", "30px"],
|
|
206
|
-
"heading-5": ["20px", "
|
|
211
|
+
"heading-5": ["20px", "24px"],
|
|
207
212
|
"heading-6": ["16px", "20px"],
|
|
208
213
|
|
|
209
214
|
"subheading-1": ["32px", "40px"],
|
data/lib/coco/engine.rb
CHANGED
|
@@ -30,8 +30,10 @@ module Coco
|
|
|
30
30
|
end
|
|
31
31
|
end
|
|
32
32
|
|
|
33
|
-
Rails.
|
|
34
|
-
Rails.
|
|
33
|
+
if Rails.env.production?
|
|
34
|
+
Rails.application.config.to_prepare do
|
|
35
|
+
Rails.autoloaders.main.eager_load_dir(coco_dir)
|
|
36
|
+
end
|
|
35
37
|
end
|
|
36
38
|
end
|
|
37
39
|
|
data/lib/coco.rb
CHANGED
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: coveragebook_components
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.10.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Mark Perkins
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2023-11-
|
|
11
|
+
date: 2023-11-24 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|
|
@@ -1423,6 +1423,7 @@ files:
|
|
|
1423
1423
|
- app/assets/css/base/components/tooltip.css
|
|
1424
1424
|
- app/assets/css/base/utils/colors.css
|
|
1425
1425
|
- app/assets/css/base/utils/icons.css
|
|
1426
|
+
- app/assets/css/base/utils/text.css
|
|
1426
1427
|
- app/assets/css/book.css
|
|
1427
1428
|
- app/assets/css/book/config.css
|
|
1428
1429
|
- app/assets/css/libs/tippy.css
|
|
@@ -1492,8 +1493,6 @@ files:
|
|
|
1492
1493
|
- app/components/coco/app/blocks/sidebar_nav/navbar/navbar.html.erb
|
|
1493
1494
|
- app/components/coco/app/blocks/sidebar_nav/navbar/navbar.js
|
|
1494
1495
|
- app/components/coco/app/blocks/sidebar_nav/navbar/navbar.rb
|
|
1495
|
-
- app/components/coco/app/blocks/slat/slat.css
|
|
1496
|
-
- app/components/coco/app/blocks/slat/slat.rb
|
|
1497
1496
|
- app/components/coco/app/blocks/slide_editor/slide_editor.css
|
|
1498
1497
|
- app/components/coco/app/blocks/slide_editor/slide_editor.html.erb
|
|
1499
1498
|
- app/components/coco/app/blocks/slide_editor/slide_editor.js
|
|
@@ -1559,6 +1558,9 @@ files:
|
|
|
1559
1558
|
- app/components/coco/app/elements/snackbar/snackbar.html.erb
|
|
1560
1559
|
- app/components/coco/app/elements/snackbar/snackbar.js
|
|
1561
1560
|
- app/components/coco/app/elements/snackbar/snackbar.rb
|
|
1561
|
+
- app/components/coco/app/elements/stamp/stamp.css
|
|
1562
|
+
- app/components/coco/app/elements/stamp/stamp.html.erb
|
|
1563
|
+
- app/components/coco/app/elements/stamp/stamp.rb
|
|
1562
1564
|
- app/components/coco/app/elements/system_banner/system_banner.css
|
|
1563
1565
|
- app/components/coco/app/elements/system_banner/system_banner.html.erb
|
|
1564
1566
|
- app/components/coco/app/elements/system_banner/system_banner.js
|