coveragebook_components 0.7.10 → 0.8.0.beta.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (61) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/build/coco/app.css +1065 -148
  3. data/app/assets/build/coco/app.js +255 -47
  4. data/app/assets/build/coco/book.css +26 -0
  5. data/app/assets/css/app/tippy.css +4 -0
  6. data/app/components/coco/app/blocks/header/header.css +43 -0
  7. data/app/components/coco/app/blocks/header/header.html.erb +30 -0
  8. data/app/components/coco/app/blocks/header/header.js +11 -0
  9. data/app/components/coco/app/blocks/header/header.rb +35 -0
  10. data/app/components/coco/app/blocks/nav_drawer/nav_drawer.css +48 -3
  11. data/app/components/coco/app/blocks/nav_drawer/nav_drawer.html.erb +14 -6
  12. data/app/components/coco/app/blocks/nav_drawer/nav_drawer.js +18 -1
  13. data/app/components/coco/app/blocks/nav_drawer/nav_drawer.rb +26 -1
  14. data/app/components/coco/app/blocks/sidebar_nav/sidebar_nav.css +104 -0
  15. data/app/components/coco/app/blocks/sidebar_nav/sidebar_nav.html.erb +42 -0
  16. data/app/components/coco/app/blocks/sidebar_nav/sidebar_nav.js +28 -0
  17. data/app/components/coco/app/blocks/sidebar_nav/sidebar_nav.rb +28 -0
  18. data/app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.css +165 -0
  19. data/app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.html.erb +43 -0
  20. data/app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.js +41 -0
  21. data/app/components/coco/app/blocks/sidebar_nav_item/sidebar_nav_item.rb +98 -0
  22. data/app/components/coco/app/elements/alert/alert.css +65 -18
  23. data/app/components/coco/app/elements/alert/alert.html.erb +4 -4
  24. data/app/components/coco/app/elements/alert/alert.js +4 -3
  25. data/app/components/coco/app/elements/alert/alert.rb +10 -0
  26. data/app/components/coco/app/elements/button/button.css +58 -0
  27. data/app/components/coco/app/elements/button/button.rb +1 -1
  28. data/app/components/coco/app/elements/button_group/button_group.rb +4 -0
  29. data/app/components/coco/app/elements/color_picker/color_picker.rb +1 -1
  30. data/app/components/coco/app/elements/menu/menu.css +1 -0
  31. data/app/components/coco/app/elements/menu/menu.html.erb +1 -1
  32. data/app/components/coco/app/elements/menu/menu.rb +2 -1
  33. data/app/components/coco/app/elements/menu_items/user_profile/user_profile.css +22 -0
  34. data/app/components/coco/app/elements/menu_items/user_profile/user_profile.html.erb +17 -0
  35. data/app/components/coco/app/elements/menu_items/user_profile/user_profile.rb +20 -0
  36. data/app/components/coco/app/elements/notice/notice.css +4 -0
  37. data/app/components/coco/app/elements/snackbar/snackbar.css +8 -1
  38. data/app/components/coco/app/elements/snackbar/snackbar.rb +2 -2
  39. data/app/components/coco/app/elements/system_banner/system_banner.html.erb +2 -1
  40. data/app/components/coco/app/elements/system_banner/system_banner.js +35 -2
  41. data/app/components/coco/app/elements/system_banner/system_banner.rb +47 -3
  42. data/app/components/coco/app/layouts/application/application.css +104 -4
  43. data/app/components/coco/app/layouts/application/application.html.erb +28 -7
  44. data/app/components/coco/app/layouts/application/application.js +16 -0
  45. data/app/components/coco/app/layouts/application/application.rb +11 -3
  46. data/app/components/coco/base/avatar/avatar.css +25 -0
  47. data/app/components/coco/base/avatar/avatar.rb +20 -0
  48. data/app/components/coco/base/modal/modal.html.erb +1 -1
  49. data/app/components/coco/concerns/accepts_tag_attributes.rb +6 -2
  50. data/app/components/coco/concerns/acts_as_button_group.rb +5 -0
  51. data/app/helpers/coco/app_helper.rb +16 -0
  52. data/app/helpers/coco/base_helper.rb +4 -0
  53. data/config/tokens.cjs +4 -1
  54. data/lib/coco.rb +1 -1
  55. metadata +22 -10
  56. data/app/components/coco/app/blocks/banner/banner.css +0 -5
  57. data/app/components/coco/app/blocks/banner/banner.rb +0 -8
  58. data/app/components/coco/app/blocks/nav_bar/nav_bar.css +0 -51
  59. data/app/components/coco/app/blocks/nav_bar/nav_bar.html.erb +0 -23
  60. data/app/components/coco/app/blocks/nav_bar/nav_bar.js +0 -31
  61. data/app/components/coco/app/blocks/nav_bar/nav_bar.rb +0 -19
@@ -544,6 +544,9 @@ select{
544
544
  [x-cloak] {
545
545
  display: none !important;
546
546
  }
547
+ :root {
548
+ --snackbar-bottom-offset: 2rem;
549
+ }
547
550
 
548
551
  *, ::before, ::after{
549
552
  --tw-border-spacing-x: 0;
@@ -716,6 +719,30 @@ select{
716
719
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
717
720
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
718
721
  border-color: rgba(0, 12, 39, 0.1)}
722
+ .tippy-box[data-theme~="coco-naked-dropdown"] {
723
+ width: -moz-min-content;
724
+ width: min-content;
725
+ }
726
+ [data-coco][data-component="avatar"]{
727
+ display: block;
728
+ flex: none;
729
+ overflow: hidden;
730
+ border-radius: 9999px}
731
+ [data-coco][data-component="avatar"] img{
732
+ width: 100%;
733
+ border-radius: 9999px}
734
+ [data-coco][data-component="avatar"][data-size="sm"]{
735
+ height: 1.25rem;
736
+ width: 1.25rem}
737
+ [data-coco][data-component="avatar"][data-size="md"]{
738
+ height: 1.5rem;
739
+ width: 1.5rem}
740
+ [data-coco][data-component="avatar"][data-size="lg"]{
741
+ height: 1.75rem;
742
+ width: 1.75rem}
743
+ [data-coco][data-component="avatar"][data-size="xl"]{
744
+ height: 2rem;
745
+ width: 2rem}
719
746
  [data-coco].coco-button{
720
747
  display: flex;
721
748
  width: auto;
@@ -1162,161 +1189,587 @@ select{
1162
1189
  justify-content: center}
1163
1190
  [data-coco][data-component="placeholder"][data-size="full"] .placeholder-content{
1164
1191
  margin: auto}
1165
- [data-coco][data-component="app-banner"]{
1166
- padding-top: 0.5rem;
1167
- padding-bottom: 0.5rem;
1168
- text-align: center;
1169
- padding-left: 0.75rem}
1170
- @media (min-width: 576px){
1171
-
1172
- [data-coco][data-component="app-banner"]{
1173
- padding-left: 1.5rem}}
1174
- @media (min-width: 768px){
1175
-
1176
- [data-coco][data-component="app-banner"]{
1177
- padding-left: 2rem}}
1178
- @media (min-width: 992px){
1179
-
1180
- [data-coco][data-component="app-banner"]{
1181
- padding-left: 2.5rem}}
1182
- @media (min-width: 1200px){
1183
-
1184
- [data-coco][data-component="app-banner"]{
1185
- padding-left: 2.75rem}}
1186
- [data-coco][data-component="app-banner"]{
1187
- padding-right: 0.75rem}
1188
- @media (min-width: 576px){
1189
-
1190
- [data-coco][data-component="app-banner"]{
1191
- padding-right: 1.5rem}}
1192
- @media (min-width: 768px){
1193
-
1194
- [data-coco][data-component="app-banner"]{
1195
- padding-right: 2rem}}
1196
- @media (min-width: 992px){
1197
-
1198
- [data-coco][data-component="app-banner"]{
1199
- padding-right: 2.5rem}}
1200
- @media (min-width: 1200px){
1201
-
1202
- [data-coco][data-component="app-banner"]{
1203
- padding-right: 2.75rem}}
1204
- [data-coco][data-component="app-navbar"]{
1192
+ [data-coco][data-component="app-header"]{
1205
1193
  container-type: inline-size}
1206
- [data-coco][data-component="app-navbar"] .nav-content{
1194
+ [data-coco][data-component="app-header"] .header-content{
1207
1195
  display: flex;
1208
- height: 2.75rem;
1196
+ height: 3.5rem;
1209
1197
  align-items: center;
1210
1198
  --tw-bg-opacity: 1;
1211
- background-color: rgb(15 118 110 / var(--tw-bg-opacity));
1199
+ background-color: rgb(66 116 132 / var(--tw-bg-opacity));
1212
1200
  padding-left: 0.75rem}
1213
1201
  @media (min-width: 576px){
1214
1202
 
1215
- [data-coco][data-component="app-navbar"] .nav-content{
1203
+ [data-coco][data-component="app-header"] .header-content{
1216
1204
  padding-left: 1.5rem}}
1217
1205
  @media (min-width: 768px){
1218
1206
 
1219
- [data-coco][data-component="app-navbar"] .nav-content{
1207
+ [data-coco][data-component="app-header"] .header-content{
1220
1208
  padding-left: 2rem}}
1221
1209
  @media (min-width: 992px){
1222
1210
 
1223
- [data-coco][data-component="app-navbar"] .nav-content{
1211
+ [data-coco][data-component="app-header"] .header-content{
1224
1212
  padding-left: 2.5rem}}
1225
1213
  @media (min-width: 1200px){
1226
1214
 
1227
- [data-coco][data-component="app-navbar"] .nav-content{
1215
+ [data-coco][data-component="app-header"] .header-content{
1228
1216
  padding-left: 2.75rem}}
1229
- [data-coco][data-component="app-navbar"] .nav-content{
1217
+ [data-coco][data-component="app-header"] .header-content{
1230
1218
  padding-right: 0.75rem}
1231
1219
  @media (min-width: 576px){
1232
1220
 
1233
- [data-coco][data-component="app-navbar"] .nav-content{
1221
+ [data-coco][data-component="app-header"] .header-content{
1234
1222
  padding-right: 1.5rem}}
1235
1223
  @media (min-width: 768px){
1236
1224
 
1237
- [data-coco][data-component="app-navbar"] .nav-content{
1225
+ [data-coco][data-component="app-header"] .header-content{
1238
1226
  padding-right: 2rem}}
1239
1227
  @media (min-width: 992px){
1240
1228
 
1241
- [data-coco][data-component="app-navbar"] .nav-content{
1229
+ [data-coco][data-component="app-header"] .header-content{
1242
1230
  padding-right: 2.5rem}}
1243
1231
  @media (min-width: 1200px){
1244
1232
 
1245
- [data-coco][data-component="app-navbar"] .nav-content{
1233
+ [data-coco][data-component="app-header"] .header-content{
1246
1234
  padding-right: 2.75rem}}
1247
- @container (min-width: 32rem){
1248
-
1249
- [data-coco][data-component="app-navbar"] .nav-content{
1250
- height: 3.5rem}}
1251
- [data-coco][data-component="app-navbar"] .nav-logo{
1252
- margin-right: 2rem;
1235
+ [data-coco][data-component="app-header"] .header-logo{
1236
+ margin-right: 1.5rem;
1253
1237
  flex: none}
1254
- [data-coco][data-component="app-navbar"] .nav-logo-small{
1255
- height: 1.5rem}
1256
- @container (min-width: 32rem){
1238
+ [data-coco][data-component="app-header"] .header-logo-no-wordmark{
1239
+ height: 1.75rem;
1240
+ --tw-translate-x: 0.25rem;
1241
+ 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))}
1242
+ @media (min-width: 380px){
1257
1243
 
1258
- [data-coco][data-component="app-navbar"] .nav-logo-small{
1244
+ [data-coco][data-component="app-header"] .header-logo-no-wordmark{
1259
1245
  display: none}}
1260
- [data-coco][data-component="app-navbar"] .nav-logo-full{
1246
+ [data-coco][data-component="app-header"] .header-logo-full{
1261
1247
  display: none;
1262
1248
  height: 1.75rem}
1263
- @container (min-width: 32rem){
1249
+ @media (min-width: 380px){
1264
1250
 
1265
- [data-coco][data-component="app-navbar"] .nav-logo-full{
1251
+ [data-coco][data-component="app-header"] .header-logo-full{
1266
1252
  display: block}}
1267
- [data-coco][data-component="app-navbar"] .nav-links{
1253
+ [data-coco][data-component="app-header"] .header-links{
1268
1254
  display: flex;
1269
1255
  width: 100%;
1270
- align-items: center;
1271
- overflow: hidden}
1272
- [data-coco][data-component="app-navbar"] .nav-link-group{
1273
- display: flex;
1256
+ align-items: center}
1257
+ [data-coco][data-component="app-header"] .header-link-group{
1274
1258
  align-items: center;
1275
1259
  -moz-column-gap: 1.5rem;
1276
1260
  column-gap: 1.5rem}
1277
- [data-coco][data-component="app-navbar"] .nav-link-group .nav-button > .button-inner{
1278
- gap: 0.5rem;
1279
- white-space: nowrap;
1280
- padding-top: 0.5rem;
1281
- padding-bottom: 0.5rem;
1282
- font-size: 14px;
1283
- line-height: 16px;
1284
- --tw-text-opacity: 1;
1285
- color: rgb(255 255 255 / var(--tw-text-opacity))}
1286
- @container (min-width: 64rem){
1261
+ [data-coco][data-component="app-header"] .header-secondary{
1262
+ margin-left: auto;
1263
+ --tw-translate-x: 0.5rem;
1264
+ 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))}
1265
+ @media (min-width: 576px){
1287
1266
 
1288
- [data-coco][data-component="app-navbar"] .nav-link-group .nav-button > .button-inner{
1289
- font-size: 16px;
1290
- line-height: 20px}}
1291
- [data-coco][data-component="app-navbar"] .nav-link-group .nav-button [data-component="icon"]{
1292
- height: 1rem;
1293
- width: 1rem}
1294
- [data-coco][data-component="app-navbar"] .nav-secondary{
1295
- margin-left: auto}
1296
- [data-coco][data-component="app-navbar"] .nav-mobile-controls{
1267
+ [data-coco][data-component="app-header"] .header-secondary{
1268
+ --tw-translate-x: 17px;
1269
+ 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))}}
1270
+ [data-coco][data-component="app-header"] .header-mobile-controls{
1297
1271
  margin-left: auto;
1298
- margin-right: -0.5rem;
1299
1272
  display: flex;
1300
- align-items: center;
1301
- --tw-text-opacity: 1;
1302
- color: rgb(255 255 255 / var(--tw-text-opacity))}
1303
- [data-coco][data-component="app-navbar"] .nav-mobile-controls [data-component="app-button"]{
1304
- padding: 0.5rem}
1273
+ --tw-translate-x: 0.5rem;
1274
+ 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));
1275
+ align-items: center}
1276
+ @container (min-width: 56rem){
1277
+
1278
+ [data-coco][data-component="app-header"] .header-mobile-controls{
1279
+ display: none}}
1280
+ @media (min-width: 576px){
1281
+
1282
+ [data-coco][data-component="app-header"] .header-mobile-controls{
1283
+ --tw-translate-x: 1rem;
1284
+ 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))}}
1285
+ @media (min-width: 768px){
1286
+
1287
+ [data-coco][data-component="app-header"] .header-mobile-controls{
1288
+ --tw-translate-x: 1.5rem;
1289
+ 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))}}
1290
+ [data-coco][data-component="app-header"].with-nav-drawer .header-link-group{
1291
+ display: none}
1292
+ @container (min-width: 56rem){
1293
+
1294
+ [data-coco][data-component="app-header"].with-nav-drawer .header-link-group{
1295
+ display: flex}}
1305
1296
  [data-coco][data-component="app-nav-drawer"]{
1297
+ pointer-events: none;
1306
1298
  position: fixed;
1307
- top: 0px;
1299
+ top: 3.5rem;
1308
1300
  left: 0px;
1309
1301
  bottom: 0px;
1310
- height: 100vh;
1311
- width: 340px;
1302
+ width: 100vw;
1312
1303
  overflow: hidden;
1304
+ height: var(--app-height)}
1305
+ [data-coco][data-component="app-nav-drawer"] .nav-drawer-overlay{
1306
+ pointer-events: none;
1307
+ position: absolute;
1308
+ inset: 0px;
1309
+ --tw-bg-opacity: 1;
1310
+ background-color: rgb(0 0 0 / var(--tw-bg-opacity));
1311
+ opacity: 0;
1312
+ transition-property: opacity;
1313
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1314
+ transition-duration: 150ms}
1315
+ [data-coco][data-component="app-nav-drawer"] .nav-drawer-content{
1316
+ position: absolute;
1317
+ top: 0px;
1318
+ right: 0px;
1319
+ bottom: 0px;
1320
+ --tw-translate-x: 100%;
1321
+ 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));
1322
+ overflow: auto;
1313
1323
  --tw-bg-opacity: 1;
1314
1324
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1325
+ padding-top: 1rem;
1326
+ padding-bottom: 1rem;
1327
+ transition-property: transform;
1328
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1329
+ transition-duration: 150ms;
1330
+ max-width: 340px;
1331
+ min-width: 280px;
1332
+ width: -moz-fit-content;
1333
+ width: fit-content}
1334
+ [data-coco][data-component="app-nav-drawer"] .nav-drawer-item:last-child{
1335
+ margin-bottom: 2.5rem}
1336
+ [data-coco][data-component="app-nav-drawer"] .nav-drawer-button{
1337
+ width: 100%;
1338
+ --tw-text-opacity: 1;
1339
+ color: rgb(31 41 55 / var(--tw-text-opacity))}
1340
+ [data-coco][data-component="app-nav-drawer"] .nav-drawer-button:hover{
1341
+ --tw-bg-opacity: 1;
1342
+ background-color: rgb(243 244 246 / var(--tw-bg-opacity));
1343
+ --tw-text-opacity: 1;
1344
+ color: rgb(17 24 39 / var(--tw-text-opacity))}
1345
+ [data-coco][data-component="app-nav-drawer"] .nav-drawer-button .button-inner{
1346
+ margin-left: 0px;
1347
+ margin-right: 0px;
1348
+ padding-left: 1rem;
1349
+ padding-right: 1rem;
1350
+ padding-top: 0.75rem;
1351
+ padding-bottom: 0.75rem}
1352
+ [data-coco][data-component="app-nav-drawer"] .nav-drawer-heading{
1353
+ margin-left: 1rem;
1354
+ margin-right: 1rem;
1355
+ margin-top: 1rem;
1356
+ margin-bottom: 0.5rem;
1357
+ border-bottom-width: 1px;
1358
+ --tw-border-opacity: 1;
1359
+ border-color: rgb(209 213 219 / var(--tw-border-opacity));
1360
+ padding-bottom: 0.75rem;
1361
+ color: rgb(17 24 39 / 0.5)}
1362
+ [data-coco][data-component="app-nav-drawer"] .nav-drawer-divider{
1363
+ margin-top: 0.75rem;
1364
+ margin-bottom: 0.75rem;
1365
+ height: 0px;
1366
+ border-top-width: 1px;
1367
+ --tw-border-opacity: 1;
1368
+ border-color: rgb(209 213 219 / var(--tw-border-opacity))}
1369
+ [data-coco][data-component="app-nav-drawer"] [data-component="app-notice"]{
1370
+ margin-bottom: 1rem}
1371
+ .drawer-open [data-coco][data-component="app-nav-drawer"]{
1372
+ pointer-events: auto}
1373
+ .drawer-open [data-coco][data-component="app-nav-drawer"] .nav-drawer-overlay{
1374
+ pointer-events: auto;
1375
+ opacity: 0.6;
1376
+ -webkit-backdrop-filter: blur(2px);
1377
+ backdrop-filter: blur(2px)}
1378
+ .drawer-open [data-coco][data-component="app-nav-drawer"] .nav-drawer-content{
1379
+ pointer-events: auto;
1380
+ --tw-translate-x: 0px;
1381
+ 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));
1315
1382
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
1316
1383
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
1317
1384
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
1318
- [data-coco][data-component="app-nav-drawer"] .nav-inner{
1319
- padding: 1rem}
1385
+ [data-coco][data-component="app-sidebar-nav"]{
1386
+ --tw-bg-opacity: 1;
1387
+ background-color: rgb(31 41 55 / var(--tw-bg-opacity));
1388
+ -webkit-font-smoothing: antialiased;
1389
+ -moz-osx-font-smoothing: grayscale;
1390
+ display: grid;
1391
+ height: 3.5rem;
1392
+ width: 100%;
1393
+ grid-template-rows: repeat(1, minmax(0, 1fr));
1394
+ grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1fr)}
1395
+ [data-coco][data-component="app-sidebar-nav"] .nav-action .nav-item-label{
1396
+ display: none;
1397
+ --tw-text-opacity: 1 !important;
1398
+ color: rgb(0 153 121 / var(--tw-text-opacity)) !important}
1399
+ [data-coco][data-component="app-sidebar-nav"] .nav-actions-button{
1400
+ --tw-bg-opacity: 1;
1401
+ background-color: rgb(0 153 121 / var(--tw-bg-opacity));
1402
+ --tw-text-opacity: 1;
1403
+ color: rgb(255 255 255 / var(--tw-text-opacity));
1404
+ transition-property: all;
1405
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1406
+ transition-duration: 150ms;
1407
+ margin-left: auto;
1408
+ margin-right: auto;
1409
+ display: flex;
1410
+ height: 2.5rem;
1411
+ width: 2.5rem;
1412
+ cursor: pointer;
1413
+ align-items: center;
1414
+ justify-content: center;
1415
+ border-radius: 9999px}
1416
+ [data-coco][data-component="app-sidebar-nav"] .nav-actions-button:hover {
1417
+ transform: scale(1.05);
1418
+ }
1419
+ [data-coco][data-component="app-sidebar-nav"] .nav-actions-button .coco-icon{
1420
+ height: 1.5rem;
1421
+ width: 1.5rem}
1422
+ [data-coco][data-component="app-sidebar-nav"] .nav-item{
1423
+ display: none;
1424
+ height: 100%;
1425
+ width: 100%;
1426
+ justify-content: center}
1427
+ @media (min-width: 576px){
1428
+
1429
+ [data-coco][data-component="app-sidebar-nav"] .nav-item{
1430
+ display: contents}}
1431
+ [data-coco][data-component="app-sidebar-nav"] .mobile-nav-item{
1432
+ display: flex}
1433
+ @media (min-width: 576px){
1434
+
1435
+ [data-coco][data-component="app-sidebar-nav"] .mobile-nav-item{
1436
+ display: contents}
1437
+ [data-coco][data-component="app-sidebar-nav"]{
1438
+ display: block;
1439
+ height: 100%;
1440
+ width: 4.5rem}
1441
+
1442
+ [data-coco][data-component="app-sidebar-nav"] .nav-action .nav-item-label{
1443
+ display: block}
1444
+
1445
+ [data-coco][data-component="app-sidebar-nav"] .nav-actions-button{
1446
+ margin-bottom: 0.5rem;
1447
+ height: 3.5rem;
1448
+ width: 3.5rem}
1449
+
1450
+ [data-coco][data-component="app-sidebar-nav"] .nav-actions-button .coco-icon{
1451
+ height: 2rem;
1452
+ width: 2rem}}
1453
+ @media (min-width: 768px) {
1454
+
1455
+ [data-coco][data-component="app-sidebar-nav"]{
1456
+ display: block;
1457
+ height: 100%;
1458
+ width: 6rem}
1459
+
1460
+ [data-coco][data-component="app-sidebar-nav"] .nav-action .nav-item-label{
1461
+ display: block}
1462
+
1463
+ [data-coco][data-component="app-sidebar-nav"] .nav-actions-button{
1464
+ height: 72px;
1465
+ width: 72px}
1466
+
1467
+ [data-coco][data-component="app-sidebar-nav"] .nav-actions-button .coco-icon{
1468
+ height: 2.5rem;
1469
+ width: 2.5rem}
1470
+ }
1471
+ @media (max-height: 760px) and (min-width: 576px) {
1472
+ [data-coco][data-component="app-sidebar-nav"]{
1473
+ display: block;
1474
+ height: 100%;
1475
+ width: 4.5rem}
1476
+
1477
+ [data-coco][data-component="app-sidebar-nav"] .nav-action .nav-item-label{
1478
+ display: block}
1479
+
1480
+ [data-coco][data-component="app-sidebar-nav"] .nav-actions-button{
1481
+ margin-bottom: 0.5rem;
1482
+ height: 3.5rem;
1483
+ width: 3.5rem}
1484
+
1485
+ [data-coco][data-component="app-sidebar-nav"] .nav-actions-button .coco-icon{
1486
+ height: 2rem;
1487
+ width: 2rem}
1488
+ }
1489
+ .sidebar-nav-action{
1490
+ display: flex;
1491
+ align-items: flex-start;
1492
+ padding: 0.25rem}
1493
+ .sidebar-nav-action .sidebar-nav-action-icon{
1494
+ margin-right: 0.75rem;
1495
+ flex: none;
1496
+ --tw-text-opacity: 1;
1497
+ color: rgb(255 255 255 / var(--tw-text-opacity))}
1498
+ .sidebar-nav-action .sidebar-nav-action-detail{
1499
+ width: 100%;
1500
+ text-align: left}
1501
+ .sidebar-nav-action .sidebar-nav-action-label{
1502
+ margin-bottom: 0.125rem;
1503
+ font-weight: 600;
1504
+ --tw-text-opacity: 1;
1505
+ color: rgb(255 255 255 / var(--tw-text-opacity))}
1506
+ .sidebar-nav-action .sidebar-nav-action-description{
1507
+ font-size: 12px;
1508
+ line-height: 16px}
1509
+ .sidebar-nav-menu a.sidebar-nav-actions-item {
1510
+ width: 320px;
1511
+ }
1512
+ [data-coco][data-component="app-sidebar-nav-item"]{
1513
+ flex: none;
1514
+ --tw-bg-opacity: 1;
1515
+ background-color: rgb(31 41 55 / var(--tw-bg-opacity));
1516
+ text-align: center;
1517
+ --tw-text-opacity: 1;
1518
+ color: rgb(156 163 175 / var(--tw-text-opacity));
1519
+ text-decoration-line: none;
1520
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
1521
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1522
+ transition-duration: 150ms;
1523
+ display: flex;
1524
+ width: 100%;
1525
+ flex-direction: column;
1526
+ align-items: center;
1527
+ justify-content: center;
1528
+ padding-left: 1rem;
1529
+ padding-right: 1rem}
1530
+ [data-coco][data-component="app-sidebar-nav-item"][href]:hover{
1531
+ --tw-text-opacity: 1;
1532
+ color: rgb(255 255 255 / var(--tw-text-opacity))}
1533
+ [data-coco][data-component="app-sidebar-nav-item"] .nav-item-icon{
1534
+ margin-left: auto;
1535
+ margin-right: auto;
1536
+ display: block;
1537
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
1538
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1539
+ transition-duration: 150ms;
1540
+ height: 1.5rem;
1541
+ width: 1.5rem}
1542
+ [data-coco][data-component="app-sidebar-nav-item"] .nav-item-label{
1543
+ margin-top: 0.125rem;
1544
+ display: block;
1545
+ font-size: 10px;
1546
+ line-height: 12px;
1547
+ font-weight: 600;
1548
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
1549
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1550
+ transition-duration: 150ms}
1551
+ @media (min-width: 576px){
1552
+
1553
+ [data-coco][data-component="app-sidebar-nav-item"].emphasised .nav-item-icon{
1554
+ --tw-text-opacity: 1;
1555
+ color: rgb(0 153 121 / var(--tw-text-opacity))}}
1556
+ [data-coco][data-component="app-sidebar-nav-item"].active{
1557
+ --tw-text-opacity: 1;
1558
+ color: rgb(255 255 255 / var(--tw-text-opacity))}
1559
+ [data-coco][data-component="app-sidebar-nav-item"]:hover .nav-item-icon{
1560
+ --tw-text-opacity: 1;
1561
+ color: rgb(255 255 255 / var(--tw-text-opacity))}
1562
+ @media (min-width: 576px){
1563
+
1564
+ [data-coco][data-component="app-sidebar-nav-item"]:hover.emphasised .nav-item-icon{
1565
+ --tw-text-opacity: 1;
1566
+ color: rgb(0 153 121 / var(--tw-text-opacity))}}
1567
+ [data-coco][data-component="app-sidebar-nav-item"]:hover .nav-item-label{
1568
+ --tw-text-opacity: 1;
1569
+ color: rgb(255 255 255 / var(--tw-text-opacity))}
1570
+ @media (min-width: 576px) {
1571
+ [data-coco][data-component="app-sidebar-nav-item"]{
1572
+ display: block;
1573
+ padding-left: 0.5rem;
1574
+ padding-right: 0.5rem;
1575
+ padding-top: 1rem;
1576
+ padding-bottom: 1rem}
1577
+
1578
+ [data-coco][data-component="app-sidebar-nav-item"][href]:hover{
1579
+ --tw-bg-opacity: 1;
1580
+ background-color: rgb(17 24 39 / var(--tw-bg-opacity))}
1581
+
1582
+ [data-coco][data-component="app-sidebar-nav-item"] .nav-item-icon{
1583
+ height: 1.75rem;
1584
+ width: 1.75rem}
1585
+
1586
+ [data-coco][data-component="app-sidebar-nav-item"] .nav-item-label{
1587
+ margin-top: 0.25rem;
1588
+ font-size: 10px;
1589
+ line-height: 12px}
1590
+
1591
+ [data-coco][data-component="app-sidebar-nav-item"].active{
1592
+ --tw-bg-opacity: 1;
1593
+ background-color: rgb(55 65 81 / var(--tw-bg-opacity));
1594
+ --tw-text-opacity: 1;
1595
+ color: rgb(255 255 255 / var(--tw-text-opacity))}
1596
+
1597
+ [data-coco][data-component="app-sidebar-nav-item"].active:hover{
1598
+ --tw-bg-opacity: 1;
1599
+ background-color: rgb(55 65 81 / var(--tw-bg-opacity))}
1600
+ }
1601
+ @media (min-width: 768px) {
1602
+
1603
+ [data-coco][data-component="app-sidebar-nav-item"]{
1604
+ padding-top: 1.25rem;
1605
+ padding-bottom: 1.25rem}
1606
+
1607
+ [data-coco][data-component="app-sidebar-nav-item"][href]:hover{
1608
+ --tw-bg-opacity: 1;
1609
+ background-color: rgb(17 24 39 / var(--tw-bg-opacity))}
1610
+
1611
+ [data-coco][data-component="app-sidebar-nav-item"] .nav-item-icon{
1612
+ height: 2rem;
1613
+ width: 2rem}
1614
+
1615
+ [data-coco][data-component="app-sidebar-nav-item"] .nav-item-label{
1616
+ font-size: 12px;
1617
+ line-height: 14px}
1618
+
1619
+ [data-coco][data-component="app-sidebar-nav-item"].active{
1620
+ --tw-bg-opacity: 1;
1621
+ background-color: rgb(55 65 81 / var(--tw-bg-opacity));
1622
+ --tw-text-opacity: 1;
1623
+ color: rgb(255 255 255 / var(--tw-text-opacity))}
1624
+
1625
+ [data-coco][data-component="app-sidebar-nav-item"].active:hover{
1626
+ --tw-bg-opacity: 1;
1627
+ background-color: rgb(55 65 81 / var(--tw-bg-opacity))}
1628
+ }
1629
+ @media (max-height: 760px) and (min-width: 576px) {
1630
+ [data-coco][data-component="app-sidebar-nav-item"]{
1631
+ display: block;
1632
+ padding-left: 0.5rem;
1633
+ padding-right: 0.5rem;
1634
+ padding-top: 1rem;
1635
+ padding-bottom: 1rem}
1636
+
1637
+ [data-coco][data-component="app-sidebar-nav-item"][href]:hover{
1638
+ --tw-bg-opacity: 1;
1639
+ background-color: rgb(17 24 39 / var(--tw-bg-opacity))}
1640
+
1641
+ [data-coco][data-component="app-sidebar-nav-item"] .nav-item-icon{
1642
+ height: 1.75rem;
1643
+ width: 1.75rem}
1644
+
1645
+ [data-coco][data-component="app-sidebar-nav-item"] .nav-item-label{
1646
+ margin-top: 0.25rem;
1647
+ font-size: 10px;
1648
+ line-height: 12px}
1649
+
1650
+ [data-coco][data-component="app-sidebar-nav-item"].active{
1651
+ --tw-bg-opacity: 1;
1652
+ background-color: rgb(55 65 81 / var(--tw-bg-opacity));
1653
+ --tw-text-opacity: 1;
1654
+ color: rgb(255 255 255 / var(--tw-text-opacity))}
1655
+
1656
+ [data-coco][data-component="app-sidebar-nav-item"].active:hover{
1657
+ --tw-bg-opacity: 1;
1658
+ background-color: rgb(55 65 81 / var(--tw-bg-opacity))}
1659
+ }
1660
+ .sidebar-nav-menu > :not([hidden]) ~ :not([hidden]){
1661
+ --tw-divide-y-reverse: 0;
1662
+ border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
1663
+ border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
1664
+ border-color: rgb(156 163 175 / 0.2)}
1665
+ .sidebar-nav-menu{
1666
+ overflow: hidden;
1667
+ --tw-bg-opacity: 1;
1668
+ background-color: rgb(31 41 55 / var(--tw-bg-opacity));
1669
+ --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
1670
+ --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
1671
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
1672
+ @media (min-width: 576px){
1673
+
1674
+ .sidebar-nav-menu{
1675
+ border-top-right-radius: 0.375rem;
1676
+ border-bottom-right-radius: 0.375rem}}
1677
+ [data-placement="bottom"] .sidebar-nav-menu{
1678
+ border-bottom-right-radius: 0.375rem;
1679
+ border-bottom-left-radius: 0.375rem}
1680
+ [data-placement="top"] .sidebar-nav-menu{
1681
+ border-top-left-radius: 0.375rem;
1682
+ border-top-right-radius: 0.375rem}
1683
+ .sidebar-nav-menu .sidebar-nav-menu-select{
1684
+ width: 100%;
1685
+ border-width: 0px;
1686
+ background-color: transparent;
1687
+ font-weight: 600;
1688
+ --tw-text-opacity: 1;
1689
+ color: rgb(229 231 235 / var(--tw-text-opacity))}
1690
+ .sidebar-nav-menu .sidebar-nav-menu-select:hover{
1691
+ --tw-bg-opacity: 1;
1692
+ background-color: rgb(17 24 39 / var(--tw-bg-opacity))}
1693
+ .sidebar-nav-menu .sidebar-nav-menu-select:focus{
1694
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1695
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1696
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}
1697
+ .sidebar-nav-menu .sidebar-nav-menu-select:active{
1698
+ --tw-bg-opacity: 1;
1699
+ background-color: rgb(17 24 39 / var(--tw-bg-opacity))}
1700
+ .sidebar-nav-menu .sidebar-nav-menu-item{
1701
+ display: flex;
1702
+ width: 100%;
1703
+ align-items: center;
1704
+ --tw-bg-opacity: 1;
1705
+ background-color: rgb(31 41 55 / var(--tw-bg-opacity));
1706
+ padding: 0.75rem;
1707
+ text-align: center;
1708
+ --tw-text-opacity: 1;
1709
+ color: rgb(156 163 175 / var(--tw-text-opacity));
1710
+ text-decoration-line: none;
1711
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
1712
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
1713
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
1714
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1715
+ transition-duration: 150ms}
1716
+ .sidebar-nav-menu .coco-link.sidebar-nav-menu-item:hover{
1717
+ --tw-bg-opacity: 1;
1718
+ background-color: rgb(17 24 39 / var(--tw-bg-opacity))}
1719
+ .sidebar-nav-menu .sidebar-nav-menu-item-text{
1720
+ min-width: 0px;
1721
+ overflow: hidden;
1722
+ text-overflow: ellipsis;
1723
+ white-space: nowrap;
1724
+ font-weight: 600;
1725
+ --tw-text-opacity: 1;
1726
+ color: rgb(255 255 255 / var(--tw-text-opacity));
1727
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
1728
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1729
+ transition-duration: 150ms}
1730
+ .sidebar-nav-menu .sidebar-nav-menu-item-qualifier{
1731
+ margin-left: auto;
1732
+ flex: none;
1733
+ padding-left: 1rem;
1734
+ font-size: 14px;
1735
+ line-height: 16px}
1736
+ .sidebar-nav-menu .sidebar-nav-menu-select{
1737
+ font-size: 1rem;
1738
+ line-height: 1.5rem}
1739
+ .sidebar-nav-menu .sidebar-nav-menu-item{
1740
+ font-size: 1rem;
1741
+ line-height: 1.5rem;
1742
+ width: 280px}
1743
+ @media (min-width: 576px) {
1744
+ .sidebar-nav-menu .sidebar-nav-menu-select{
1745
+ font-size: 0.875rem;
1746
+ line-height: 1.25rem}
1747
+
1748
+ .sidebar-nav-menu .sidebar-nav-menu-item{
1749
+ font-size: 0.875rem;
1750
+ line-height: 1.25rem;
1751
+ width: 240px}
1752
+ }
1753
+ @media (min-width: 768px) {
1754
+ .sidebar-nav-menu .sidebar-nav-menu-select{
1755
+ font-size: 1rem;
1756
+ line-height: 1.5rem}
1757
+
1758
+ .sidebar-nav-menu .sidebar-nav-menu-item{
1759
+ font-size: 1rem;
1760
+ line-height: 1.5rem;
1761
+ width: 280px}
1762
+ }
1763
+ @media (max-height: 760px) and (min-width: 576px) {
1764
+ .sidebar-nav-menu .sidebar-nav-menu-select{
1765
+ font-size: 0.875rem;
1766
+ line-height: 1.25rem}
1767
+
1768
+ .sidebar-nav-menu .sidebar-nav-menu-item{
1769
+ font-size: 0.875rem;
1770
+ line-height: 1.25rem;
1771
+ width: 240px}
1772
+ }
1320
1773
  [data-coco][data-component="app-slat"]{
1321
1774
  padding-left: 0.75rem}
1322
1775
  @media (min-width: 576px){
@@ -1545,7 +1998,10 @@ select{
1545
1998
  position: relative;
1546
1999
  display: flex;
1547
2000
  align-items: flex-start;
1548
- padding: 1rem}
2001
+ padding-left: 1rem;
2002
+ padding-right: 1rem;
2003
+ padding-top: 0.5rem;
2004
+ padding-bottom: 0.5rem}
1549
2005
  [data-coco][data-component="app-alert"] .alert-icon{
1550
2006
  display: flex;
1551
2007
  align-items: center;
@@ -1563,15 +2019,13 @@ select{
1563
2019
  color: rgb(17 24 39 / var(--tw-text-opacity))}
1564
2020
  [data-coco][data-component="app-alert"] .alert-title{
1565
2021
  font-size: 16px;
1566
- line-height: 24px;
2022
+ line-height: 20px;
1567
2023
  font-weight: 700}
1568
2024
  [data-coco][data-component="app-alert"] .alert-message{
1569
2025
  font-size: 16px;
1570
2026
  line-height: 24px}
1571
2027
  [data-coco][data-component="app-alert"] .alert-message a{
1572
2028
  color: currentColor}
1573
- [data-coco][data-component="app-alert"].with-title .alert-message{
1574
- margin-top: 0.25rem}
1575
2029
  [data-coco][data-component="app-alert"] .alert-actions{
1576
2030
  display: flex;
1577
2031
  align-items: center}
@@ -1588,6 +2042,42 @@ select{
1588
2042
  /* Banner style */
1589
2043
  [data-coco][data-component="app-alert"][data-banner="true"]{
1590
2044
  border-radius: 0px}
2045
+ [data-coco][data-component="app-alert"][data-banner="true"] .alert-container{
2046
+ padding-left: 0.75rem}
2047
+ @media (min-width: 576px){
2048
+
2049
+ [data-coco][data-component="app-alert"][data-banner="true"] .alert-container{
2050
+ padding-left: 1.5rem}}
2051
+ @media (min-width: 768px){
2052
+
2053
+ [data-coco][data-component="app-alert"][data-banner="true"] .alert-container{
2054
+ padding-left: 2rem}}
2055
+ @media (min-width: 992px){
2056
+
2057
+ [data-coco][data-component="app-alert"][data-banner="true"] .alert-container{
2058
+ padding-left: 2.5rem}}
2059
+ @media (min-width: 1200px){
2060
+
2061
+ [data-coco][data-component="app-alert"][data-banner="true"] .alert-container{
2062
+ padding-left: 2.75rem}}
2063
+ [data-coco][data-component="app-alert"][data-banner="true"] .alert-container{
2064
+ padding-right: 0.75rem}
2065
+ @media (min-width: 576px){
2066
+
2067
+ [data-coco][data-component="app-alert"][data-banner="true"] .alert-container{
2068
+ padding-right: 1.5rem}}
2069
+ @media (min-width: 768px){
2070
+
2071
+ [data-coco][data-component="app-alert"][data-banner="true"] .alert-container{
2072
+ padding-right: 2rem}}
2073
+ @media (min-width: 992px){
2074
+
2075
+ [data-coco][data-component="app-alert"][data-banner="true"] .alert-container{
2076
+ padding-right: 2.5rem}}
2077
+ @media (min-width: 1200px){
2078
+
2079
+ [data-coco][data-component="app-alert"][data-banner="true"] .alert-container{
2080
+ padding-right: 2.75rem}}
1591
2081
  @container (min-width: 1000px){
1592
2082
 
1593
2083
  [data-coco][data-component="app-alert"][data-banner="true"] .alert-container{
@@ -1599,17 +2089,37 @@ select{
1599
2089
  [data-coco][data-component="app-alert"][data-dismissable="true"] .alert-dismiss{
1600
2090
  flex: none}
1601
2091
  [data-coco][data-component="app-alert"][data-dismissable="true"] .alert-dismiss .coco-button .button-element{
2092
+ background-color: transparent;
1602
2093
  --tw-text-opacity: 1;
1603
- color: rgb(31 41 55 / var(--tw-text-opacity))}
2094
+ color: rgb(31 41 55 / var(--tw-text-opacity));
2095
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
2096
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
2097
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
2098
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2099
+ transition-duration: 150ms}
1604
2100
  [data-coco][data-component="app-alert"][data-dismissable="true"] .alert-dismiss .coco-button .button-element:hover{
2101
+ background-color: rgb(255 255 255 / 0.1);
1605
2102
  --tw-text-opacity: 1;
1606
2103
  color: rgb(17 24 39 / var(--tw-text-opacity))}
1607
- [data-coco][data-component="app-alert"] .alert-title {
1608
- matgin-top: -1px;
1609
- margin-bottom: 2px;
1610
- }
2104
+ /* Condensed */
2105
+ [data-coco][data-component="app-alert"][data-condensed="true"] .alert-icon .coco-icon{
2106
+ height: 1rem;
2107
+ width: 1rem}
2108
+ [data-coco][data-component="app-alert"][data-condensed="true"] .alert-body{
2109
+ padding-left: 0.75rem}
2110
+ [data-coco][data-component="app-alert"][data-condensed="true"] .alert-title{
2111
+ font-size: 14px;
2112
+ line-height: 20px}
2113
+ [data-coco][data-component="app-alert"][data-condensed="true"] .alert-message{
2114
+ font-size: 14px;
2115
+ line-height: 20px}
2116
+ [data-coco][data-component="app-alert"] .alert-container{
2117
+ padding-top: 1rem;
2118
+ padding-bottom: 1rem}
1611
2119
  [data-coco][data-component="app-alert"] .alert-actions{
1612
- margin-top: 0.5rem}
2120
+ margin-top: 0.75rem}
2121
+ [data-coco][data-component="app-alert"].with-title .alert-message{
2122
+ margin-top: 0.25rem}
1613
2123
  [data-coco][data-component="app-alert"][data-dismissable="true"] .alert-container{
1614
2124
  padding-right: 3rem}
1615
2125
  [data-coco][data-component="app-alert"][data-dismissable="true"] .alert-dismiss{
@@ -1617,9 +2127,11 @@ select{
1617
2127
  top: 0.5rem;
1618
2128
  right: 0.5rem;
1619
2129
  margin-left: auto}
1620
- @container (min-width: 500px){
2130
+ @container (min-width: 576px){
1621
2131
  [data-coco][data-component="app-alert"] .alert-container{
1622
- align-items: center}
2132
+ align-items: center;
2133
+ padding-top: 0.625rem;
2134
+ padding-bottom: 0.625rem}
1623
2135
 
1624
2136
  [data-coco][data-component="app-alert"] .alert-icon{
1625
2137
  align-self: center}
@@ -1636,24 +2148,35 @@ select{
1636
2148
  margin-bottom: 0;
1637
2149
  }
1638
2150
 
2151
+ [data-coco][data-component="app-alert"].with-title .alert-message{
2152
+ margin-top: 0.25rem}
2153
+
2154
+ [data-coco][data-component="app-alert"][data-condensed="true"].with-title .alert-message{
2155
+ margin-top: 0.125rem}
2156
+
1639
2157
  [data-coco][data-component="app-alert"] .alert-actions{
1640
2158
  margin-top: 0px;
1641
2159
  margin-left: auto}
1642
- [data-coco][data-component="app-alert"][data-dismissable="true"] .alert-container{
1643
- padding-right: 0.75rem}
2160
+ [data-coco][data-component="app-alert"][data-dismissable="true"] .alert-body{
2161
+ padding-right: 2.5rem}
1644
2162
 
1645
2163
  [data-coco][data-component="app-alert"][data-dismissable="true"] .alert-dismiss{
1646
- position: relative;
1647
- top: auto;
1648
- right: auto;
1649
- display: flex;
1650
- flex-direction: column}}
2164
+ position: absolute;
2165
+ right: 0.75rem;
2166
+ top: 50%;
2167
+ --tw-translate-y: -50%;
2168
+ 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))}}
1651
2169
  /* Layout */
1652
2170
  @container (min-width: 1000px){
2171
+ [data-coco][data-component="app-alert"][data-single-line="true"]:not(.force-multi-line) .alert-container{
2172
+ padding-top: 0.75rem;
2173
+ padding-bottom: 0.75rem}
2174
+
1653
2175
  [data-coco][data-component="app-alert"][data-single-line="true"]:not(.force-multi-line) .alert-content{
1654
2176
  display: flex;
1655
2177
  width: 100%;
1656
2178
  align-items: center}
2179
+
1657
2180
  [data-coco][data-component="app-alert"][data-single-line="true"]:not(.force-multi-line) .alert-content > :not([hidden]) ~ :not([hidden]){
1658
2181
  --tw-space-x-reverse: 0;
1659
2182
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@@ -1662,10 +2185,25 @@ select{
1662
2185
  [data-coco][data-component="app-alert"][data-single-line="true"]:not(.force-multi-line) .alert-title{
1663
2186
  white-space: nowrap}
1664
2187
 
2188
+ [data-coco][data-component="app-alert"][data-single-line="true"]:not(.force-multi-line).with-title .alert-message{
2189
+ margin-top: 0px}
2190
+
1665
2191
  [data-coco][data-component="app-alert"][data-single-line="true"]:not(.force-multi-line) .alert-link{
1666
2192
  display: none}
2193
+ [data-coco][data-component="app-alert"][data-single-line="true"]:not(.force-multi-line)[data-dismissable="true"] .alert-container{
2194
+ padding-left: 3rem;
2195
+ padding-right: 3rem}
2196
+
2197
+ [data-coco][data-component="app-alert"][data-single-line="true"]:not(.force-multi-line)[data-dismissable="true"] .alert-dismiss{
2198
+ position: absolute;
2199
+ right: 21px;
2200
+ top: 50%;
2201
+ --tw-translate-y: -50%;
2202
+ 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))}
1667
2203
  [data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line .alert-container{
1668
- align-items: center}
2204
+ align-items: center;
2205
+ padding-top: 0.625rem;
2206
+ padding-bottom: 0.625rem}
1669
2207
 
1670
2208
  [data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line .alert-icon{
1671
2209
  align-self: center}
@@ -1682,25 +2220,33 @@ select{
1682
2220
  margin-bottom: 0;
1683
2221
  }
1684
2222
 
2223
+ [data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line.with-title .alert-message{
2224
+ margin-top: 0.25rem}
2225
+
2226
+ [data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line[data-condensed="true"].with-title .alert-message{
2227
+ margin-top: 0.125rem}
2228
+
1685
2229
  [data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line .alert-actions{
1686
2230
  margin-top: 0px;
1687
2231
  margin-left: auto}
1688
- [data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line[data-dismissable="true"] .alert-container{
1689
- padding-right: 0.75rem}
2232
+ [data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line[data-dismissable="true"] .alert-body{
2233
+ padding-right: 2.5rem}
1690
2234
 
1691
2235
  [data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line[data-dismissable="true"] .alert-dismiss{
1692
- position: relative;
1693
- top: auto;
1694
- right: auto;
1695
- display: flex;
1696
- flex-direction: column}}
2236
+ position: absolute;
2237
+ right: 0.75rem;
2238
+ top: 50%;
2239
+ --tw-translate-y: -50%;
2240
+ 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))}}
1697
2241
  /* Themes */
1698
2242
  [data-coco][data-component="app-alert"][data-theme]{
1699
2243
  transition-property: all;
1700
2244
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1701
2245
  transition-duration: 150ms}
1702
2246
  [data-coco][data-component="app-alert"][data-theme*="vivid"]{
1703
- border-style: none}
2247
+ border-style: none;
2248
+ -webkit-font-smoothing: antialiased;
2249
+ -moz-osx-font-smoothing: grayscale}
1704
2250
  [data-coco][data-component="app-alert"][data-theme*="vivid"] .alert-content{
1705
2251
  --tw-text-opacity: 1;
1706
2252
  color: rgb(255 255 255 / var(--tw-text-opacity))}
@@ -2124,6 +2670,26 @@ select{
2124
2670
  [data-coco][data-component="app-button"][data-theme="text-neutral-dark"][data-disabled="true"]{
2125
2671
  opacity: 0.3}
2126
2672
  /* Responsive resizing */
2673
+ [data-coco][data-component="app-button"][data-size="xs"] .button-content{
2674
+ font-size: 12px;
2675
+ line-height: 14px}
2676
+ [data-coco][data-component="app-button"][data-size="xs"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size="xs"] .button-toggle{
2677
+ height: 0.875rem;
2678
+ width: 0.875rem}
2679
+ [data-coco][data-component="app-button"][data-size="xs"][data-theme] .button-element{
2680
+ padding-top: 0.5rem;
2681
+ padding-bottom: 0.5rem;
2682
+ padding-left: 0.75rem;
2683
+ padding-right: 0.75rem}
2684
+ [data-coco][data-component="app-button"][data-size="xs"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size="xs"][data-theme][data-collapsed="true"] > .button-element .button-icon{
2685
+ margin-left: -0.375rem;
2686
+ margin-right: -0.375rem}
2687
+ [data-coco][data-component="app-button"][data-size="xs"][data-theme|="text"] .button-element{
2688
+ padding-left: 0.25rem;
2689
+ padding-right: 0.25rem}
2690
+ [data-coco][data-component="app-button"][data-size="xs"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size="xs"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
2691
+ padding-left: 0.5rem;
2692
+ padding-right: 0.5rem}
2127
2693
  [data-coco][data-component="app-button"][data-size="sm"] .button-content{
2128
2694
  font-size: 14px;
2129
2695
  line-height: 16px}
@@ -2185,6 +2751,29 @@ select{
2185
2751
  padding-left: 0.75rem;
2186
2752
  padding-right: 0.75rem}
2187
2753
  @media (min-width: 768px) {
2754
+ [data-coco][data-component="app-button"][data-size-md="xs"] .button-content{
2755
+ font-size: 12px;
2756
+ line-height: 14px}
2757
+
2758
+ [data-coco][data-component="app-button"][data-size-md="xs"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-md="xs"] .button-toggle{
2759
+ height: 0.875rem;
2760
+ width: 0.875rem}
2761
+ [data-coco][data-component="app-button"][data-size-md="xs"][data-theme] .button-element{
2762
+ padding-top: 0.5rem;
2763
+ padding-bottom: 0.5rem;
2764
+ padding-left: 0.75rem;
2765
+ padding-right: 0.75rem}
2766
+
2767
+ [data-coco][data-component="app-button"][data-size-md="xs"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-md="xs"][data-theme][data-collapsed="true"] > .button-element .button-icon{
2768
+ margin-left: -0.375rem;
2769
+ margin-right: -0.375rem}
2770
+ [data-coco][data-component="app-button"][data-size-md="xs"][data-theme|="text"] .button-element{
2771
+ padding-left: 0.25rem;
2772
+ padding-right: 0.25rem}
2773
+
2774
+ [data-coco][data-component="app-button"][data-size-md="xs"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-md="xs"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
2775
+ padding-left: 0.5rem;
2776
+ padding-right: 0.5rem}
2188
2777
  [data-coco][data-component="app-button"][data-size-md="sm"] .button-content{
2189
2778
  font-size: 14px;
2190
2779
  line-height: 16px}
@@ -2256,6 +2845,29 @@ select{
2256
2845
  padding-right: 0.75rem}
2257
2846
  }
2258
2847
  @media (min-width: 992px) {
2848
+ [data-coco][data-component="app-button"][data-size-lg="xs"] .button-content{
2849
+ font-size: 12px;
2850
+ line-height: 14px}
2851
+
2852
+ [data-coco][data-component="app-button"][data-size-lg="xs"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-lg="xs"] .button-toggle{
2853
+ height: 0.875rem;
2854
+ width: 0.875rem}
2855
+ [data-coco][data-component="app-button"][data-size-lg="xs"][data-theme] .button-element{
2856
+ padding-top: 0.5rem;
2857
+ padding-bottom: 0.5rem;
2858
+ padding-left: 0.75rem;
2859
+ padding-right: 0.75rem}
2860
+
2861
+ [data-coco][data-component="app-button"][data-size-lg="xs"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-lg="xs"][data-theme][data-collapsed="true"] > .button-element .button-icon{
2862
+ margin-left: -0.375rem;
2863
+ margin-right: -0.375rem}
2864
+ [data-coco][data-component="app-button"][data-size-lg="xs"][data-theme|="text"] .button-element{
2865
+ padding-left: 0.25rem;
2866
+ padding-right: 0.25rem}
2867
+
2868
+ [data-coco][data-component="app-button"][data-size-lg="xs"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-lg="xs"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
2869
+ padding-left: 0.5rem;
2870
+ padding-right: 0.5rem}
2259
2871
  [data-coco][data-component="app-button"][data-size-lg="sm"] .button-content{
2260
2872
  font-size: 14px;
2261
2873
  line-height: 16px}
@@ -2327,6 +2939,29 @@ select{
2327
2939
  padding-right: 0.75rem}
2328
2940
  }
2329
2941
  @media (min-width: 1200px) {
2942
+ [data-coco][data-component="app-button"][data-size-xl="xs"] .button-content{
2943
+ font-size: 12px;
2944
+ line-height: 14px}
2945
+
2946
+ [data-coco][data-component="app-button"][data-size-xl="xs"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-xl="xs"] .button-toggle{
2947
+ height: 0.875rem;
2948
+ width: 0.875rem}
2949
+ [data-coco][data-component="app-button"][data-size-xl="xs"][data-theme] .button-element{
2950
+ padding-top: 0.5rem;
2951
+ padding-bottom: 0.5rem;
2952
+ padding-left: 0.75rem;
2953
+ padding-right: 0.75rem}
2954
+
2955
+ [data-coco][data-component="app-button"][data-size-xl="xs"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xl="xs"][data-theme][data-collapsed="true"] > .button-element .button-icon{
2956
+ margin-left: -0.375rem;
2957
+ margin-right: -0.375rem}
2958
+ [data-coco][data-component="app-button"][data-size-xl="xs"][data-theme|="text"] .button-element{
2959
+ padding-left: 0.25rem;
2960
+ padding-right: 0.25rem}
2961
+
2962
+ [data-coco][data-component="app-button"][data-size-xl="xs"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xl="xs"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
2963
+ padding-left: 0.5rem;
2964
+ padding-right: 0.5rem}
2330
2965
  [data-coco][data-component="app-button"][data-size-xl="sm"] .button-content{
2331
2966
  font-size: 14px;
2332
2967
  line-height: 16px}
@@ -2398,6 +3033,38 @@ select{
2398
3033
  padding-right: 0.75rem}
2399
3034
  }
2400
3035
  @media (min-width: 1400px) {
3036
+ [data-coco][data-component="app-button"][data-size-xxl="xs"] .button-content,
3037
+ [data-coco][data-component="app-button"][data-size-2xl="xs"] .button-content{
3038
+ font-size: 12px;
3039
+ line-height: 14px}
3040
+
3041
+ [data-coco][data-component="app-button"][data-size-xxl="xs"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-xxl="xs"] .button-toggle,
3042
+ [data-coco][data-component="app-button"][data-size-2xl="xs"] .button-icon [data-component="icon"],
3043
+ [data-coco][data-component="app-button"][data-size-2xl="xs"] .button-toggle{
3044
+ height: 0.875rem;
3045
+ width: 0.875rem}
3046
+ [data-coco][data-component="app-button"][data-size-xxl="xs"][data-theme] .button-element,
3047
+ [data-coco][data-component="app-button"][data-size-2xl="xs"][data-theme] .button-element{
3048
+ padding-top: 0.5rem;
3049
+ padding-bottom: 0.5rem;
3050
+ padding-left: 0.75rem;
3051
+ padding-right: 0.75rem}
3052
+
3053
+ [data-coco][data-component="app-button"][data-size-xxl="xs"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xxl="xs"][data-theme][data-collapsed="true"] > .button-element .button-icon,
3054
+ [data-coco][data-component="app-button"][data-size-2xl="xs"][data-theme].icon-only > .button-element .button-icon,
3055
+ [data-coco][data-component="app-button"][data-size-2xl="xs"][data-theme][data-collapsed="true"] > .button-element .button-icon{
3056
+ margin-left: -0.375rem;
3057
+ margin-right: -0.375rem}
3058
+ [data-coco][data-component="app-button"][data-size-xxl="xs"][data-theme|="text"] .button-element,
3059
+ [data-coco][data-component="app-button"][data-size-2xl="xs"][data-theme|="text"] .button-element{
3060
+ padding-left: 0.25rem;
3061
+ padding-right: 0.25rem}
3062
+
3063
+ [data-coco][data-component="app-button"][data-size-xxl="xs"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xxl="xs"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon,
3064
+ [data-coco][data-component="app-button"][data-size-2xl="xs"][data-theme|="text"].icon-only > .button-element .button-icon,
3065
+ [data-coco][data-component="app-button"][data-size-2xl="xs"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
3066
+ padding-left: 0.5rem;
3067
+ padding-right: 0.5rem}
2401
3068
  [data-coco][data-component="app-button"][data-size-xxl="sm"] .button-content,
2402
3069
  [data-coco][data-component="app-button"][data-size-2xl="sm"] .button-content{
2403
3070
  font-size: 14px;
@@ -2496,6 +3163,29 @@ select{
2496
3163
  padding-right: 0.75rem}
2497
3164
  }
2498
3165
  @media (min-width: 1800px) {
3166
+ [data-coco][data-component="app-button"][data-size-max="xs"] .button-content{
3167
+ font-size: 12px;
3168
+ line-height: 14px}
3169
+
3170
+ [data-coco][data-component="app-button"][data-size-max="xs"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-max="xs"] .button-toggle{
3171
+ height: 0.875rem;
3172
+ width: 0.875rem}
3173
+ [data-coco][data-component="app-button"][data-size-max="xs"][data-theme] .button-element{
3174
+ padding-top: 0.5rem;
3175
+ padding-bottom: 0.5rem;
3176
+ padding-left: 0.75rem;
3177
+ padding-right: 0.75rem}
3178
+
3179
+ [data-coco][data-component="app-button"][data-size-max="xs"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-max="xs"][data-theme][data-collapsed="true"] > .button-element .button-icon{
3180
+ margin-left: -0.375rem;
3181
+ margin-right: -0.375rem}
3182
+ [data-coco][data-component="app-button"][data-size-max="xs"][data-theme|="text"] .button-element{
3183
+ padding-left: 0.25rem;
3184
+ padding-right: 0.25rem}
3185
+
3186
+ [data-coco][data-component="app-button"][data-size-max="xs"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-max="xs"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
3187
+ padding-left: 0.5rem;
3188
+ padding-right: 0.5rem}
2499
3189
  [data-coco][data-component="app-button"][data-size-max="sm"] .button-content{
2500
3190
  font-size: 14px;
2501
3191
  line-height: 16px}
@@ -3239,6 +3929,7 @@ select{
3239
3929
  [data-coco][data-component="app-menu"] {
3240
3930
  width: -moz-fit-content;
3241
3931
  width: fit-content;
3932
+ max-width: 240px;
3242
3933
  }
3243
3934
  [data-coco][data-component="app-menu"] .menu-item > *{
3244
3935
  width: 100%}
@@ -3311,9 +4002,42 @@ select{
3311
4002
  [data-coco][data-component="app-menu-button"] .menu-item:last-child > *{
3312
4003
  border-bottom-right-radius: 0.375rem;
3313
4004
  border-bottom-left-radius: 0.375rem}
4005
+ [data-coco][data-component="app-user-profile"]{
4006
+ display: grid;
4007
+ grid-template-rows: repeat(1, minmax(0, 1fr));
4008
+ gap: 0.75rem;
4009
+ padding-left: 1rem;
4010
+ padding-right: 1rem;
4011
+ padding-top: 0.375rem;
4012
+ padding-bottom: 0.375rem;
4013
+ grid-template-columns: min-content 1fr}
4014
+ [data-coco][data-component="app-user-profile"] .user-profile-avatar{
4015
+ display: flex;
4016
+ align-items: center}
4017
+ [data-coco][data-component="app-user-profile"] .user-profile-details > :not([hidden]) ~ :not([hidden]){
4018
+ --tw-space-y-reverse: 0;
4019
+ margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
4020
+ margin-bottom: calc(0.25rem * var(--tw-space-y-reverse))}
4021
+ [data-coco][data-component="app-user-profile"] .user-profile-name{
4022
+ overflow: hidden;
4023
+ text-overflow: ellipsis;
4024
+ white-space: nowrap;
4025
+ font-weight: 600}
4026
+ [data-coco][data-component="app-user-profile"] .user-profile-email{
4027
+ overflow: hidden;
4028
+ text-overflow: ellipsis;
4029
+ white-space: nowrap;
4030
+ font-size: 14px;
4031
+ line-height: 16px;
4032
+ font-style: italic;
4033
+ --tw-text-opacity: 1;
4034
+ color: rgb(107 114 128 / var(--tw-text-opacity))}
3314
4035
  [data-coco][data-component="app-notice"]{
3315
4036
  overflow: hidden;
3316
4037
  border-radius: 0.75rem}
4038
+ [data-coco][data-component="app-notice"] div[class="alert-container"]{
4039
+ padding-top: 1rem;
4040
+ padding-bottom: 1rem}
3317
4041
  [data-coco][data-component="app-seamless-textarea"]{
3318
4042
  color: currentColor}
3319
4043
  [data-coco][data-component="app-seamless-textarea"] textarea{
@@ -3418,10 +4142,10 @@ select{
3418
4142
  position: static}
3419
4143
  [data-coco][data-component="app-snackbar"][data-position="fixed"]{
3420
4144
  position: fixed;
3421
- bottom: 2rem;
3422
4145
  left: 50%;
3423
4146
  --tw-translate-x: -50%;
3424
4147
  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));
4148
+ bottom: var(--snackbar-bottom-offset);
3425
4149
  z-index: 10001}
3426
4150
  /* Themes */
3427
4151
  [data-coco][data-component="app-snackbar"][data-theme="positive"] .snackbar-icon{
@@ -3537,14 +4261,103 @@ select{
3537
4261
  justify-content: flex-start}
3538
4262
  [data-coco][data-component="app-toolbar"] .toolbar-section-end{
3539
4263
  justify-content: flex-end}
3540
- [data-coco][data-component="app-application-layout"]{
4264
+ [data-coco][data-component="application-layout"]{
4265
+ position: absolute;
4266
+ inset: 0px;
3541
4267
  display: grid;
3542
- height: 100vh;
3543
4268
  width: 100vw;
3544
- grid-template-rows: min-content 1fr;
3545
- overflow: hidden}
3546
- [data-coco][data-component="app-application-layout"] .app-main{
3547
- overflow: auto}
4269
+ overflow: hidden;
4270
+ height: var(--app-height);
4271
+
4272
+ grid-template-areas: "body";
4273
+ grid-template-rows: 1fr;
4274
+ grid-template-columns: 1fr}
4275
+ [data-coco][data-component="application-layout"].with-header {
4276
+ grid-template-areas: "header" "body";
4277
+ grid-template-rows: min-content 1fr;
4278
+ }
4279
+ [data-coco][data-component="application-layout"].with-header.with-banner {
4280
+ grid-template-areas: "header" "body" "banner";
4281
+ grid-template-rows: min-content 1fr min-content;
4282
+ }
4283
+ [data-coco][data-component="application-layout"].with-header.with-banner.with-sidebar-nav {
4284
+ grid-template-areas: "header" "body" "banner" "sidebar";
4285
+ grid-template-rows: min-content 1fr min-content min-content;
4286
+ }
4287
+ [data-coco][data-component="application-layout"].with-header:not(.with-banner).with-sidebar-nav {
4288
+ grid-template-areas: "header" "body" "sidebar";
4289
+ grid-template-rows: min-content 1fr min-content;
4290
+ }
4291
+ [data-coco][data-component="application-layout"].with-sidebar-nav {
4292
+ --snackbar-bottom-offset: 4rem;
4293
+ }
4294
+ [data-coco][data-component="application-layout"]:not(.with-header).with-banner {
4295
+ grid-template-areas: "body" "banner";
4296
+ grid-template-rows: 1fr min-content;
4297
+ }
4298
+ [data-coco][data-component="application-layout"] .layout-banner{
4299
+ z-index: 10;
4300
+ width: 100vw;
4301
+ grid-area: banner;
4302
+ height: -moz-min-content;
4303
+ height: min-content}
4304
+ [data-coco][data-component="application-layout"] .layout-header{
4305
+ z-index: 10;
4306
+ width: 100vw;
4307
+ grid-area: header;
4308
+ height: -moz-min-content;
4309
+ height: min-content}
4310
+ [data-coco][data-component="application-layout"] .layout-body{
4311
+ position: relative;
4312
+ z-index: 0;
4313
+ height: 100%;
4314
+ overflow-y: auto;
4315
+ scroll-behavior: smooth;
4316
+ grid-area: body}
4317
+ [data-coco][data-component="application-layout"] .layout-sidebar-nav{
4318
+ scroll-behavior: smooth;
4319
+ scrollbar-width: none;
4320
+ grid-area: sidebar;
4321
+ height: -moz-min-content;
4322
+ height: min-content}
4323
+ [data-coco][data-component="application-layout"] .layout-sidebar-nav::-webkit-scrollbar {
4324
+ display: none;
4325
+ }
4326
+ @media (min-width: 576px) {
4327
+ [data-coco][data-component="application-layout"] {
4328
+
4329
+ grid-template-areas: "body";
4330
+ grid-template-rows: 1fr
4331
+ }
4332
+ [data-coco][data-component="application-layout"] .layout-sidebar-nav{
4333
+ height: 100%;
4334
+ overflow: auto;
4335
+ width: -moz-min-content;
4336
+ width: min-content}
4337
+
4338
+ [data-coco][data-component="application-layout"] .layout-sidebar-nav > *{
4339
+ height: 100%}
4340
+
4341
+ [data-coco][data-component="application-layout"].with-sidebar-nav {
4342
+ --snackbar-bottom-offset: 2.5rem;
4343
+ }
4344
+ [data-coco][data-component="application-layout"].with-header.with-banner {
4345
+ grid-template-areas: "banner" "header" "body";
4346
+ grid-template-rows: min-content min-content 1fr;
4347
+ grid-template-columns: 1fr;
4348
+ }
4349
+
4350
+ [data-coco][data-component="application-layout"].with-header.with-banner.with-sidebar-nav {
4351
+ grid-template-areas: "banner banner" "header header" "sidebar body";
4352
+ grid-template-rows: min-content min-content 1fr;
4353
+ grid-template-columns: min-content 1fr;
4354
+ }
4355
+ [data-coco][data-component="application-layout"].with-header:not(.with-banner).with-sidebar-nav {
4356
+ grid-template-areas: "header header" "sidebar body";
4357
+ grid-template-rows: min-content 1fr;
4358
+ grid-template-columns: min-content 1fr;
4359
+ }
4360
+ }
3548
4361
  [data-coco][data-component="book-editable-slide"] {
3549
4362
  /*
3550
4363
  * slide-padding-lg at max (1480px): 240px (16.2%)
@@ -3998,12 +4811,73 @@ select{
3998
4811
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
3999
4812
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
4000
4813
  border-color: rgba(0, 12, 39, 0.1)}
4001
- .app-alert-stacked .alert-title {
4002
- matgin-top: -1px;
4003
- margin-bottom: 2px;
4004
- }
4814
+ .sidebar-nav-vertical-condensed .nav-action .nav-item-label{
4815
+ display: block}
4816
+ .sidebar-nav-vertical-condensed .nav-actions-button{
4817
+ margin-bottom: 0.5rem;
4818
+ height: 3.5rem;
4819
+ width: 3.5rem}
4820
+ .sidebar-nav-vertical-condensed .nav-actions-button .coco-icon{
4821
+ height: 2rem;
4822
+ width: 2rem}
4823
+ .sidebar-nav-vertical .nav-action .nav-item-label{
4824
+ display: block}
4825
+ .sidebar-nav-vertical .nav-actions-button{
4826
+ height: 72px;
4827
+ width: 72px}
4828
+ .sidebar-nav-vertical .nav-actions-button .coco-icon{
4829
+ height: 2.5rem;
4830
+ width: 2.5rem}
4831
+ .sidebar-nav-item-vertical-condensed .nav-item-icon{
4832
+ height: 1.75rem;
4833
+ width: 1.75rem}
4834
+ .sidebar-nav-item-vertical-condensed .nav-item-label{
4835
+ margin-top: 0.25rem;
4836
+ font-size: 10px;
4837
+ line-height: 12px}
4838
+ .sidebar-nav-item-vertical-condensed.active{
4839
+ --tw-bg-opacity: 1;
4840
+ background-color: rgb(55 65 81 / var(--tw-bg-opacity));
4841
+ --tw-text-opacity: 1;
4842
+ color: rgb(255 255 255 / var(--tw-text-opacity))}
4843
+ .sidebar-nav-item-vertical-condensed.active:hover{
4844
+ --tw-bg-opacity: 1;
4845
+ background-color: rgb(55 65 81 / var(--tw-bg-opacity))}
4846
+ .sidebar-nav-item-vertical .nav-item-icon{
4847
+ height: 2rem;
4848
+ width: 2rem}
4849
+ .sidebar-nav-item-vertical .nav-item-label{
4850
+ font-size: 12px;
4851
+ line-height: 14px}
4852
+ .sidebar-nav-item-vertical.active{
4853
+ --tw-bg-opacity: 1;
4854
+ background-color: rgb(55 65 81 / var(--tw-bg-opacity));
4855
+ --tw-text-opacity: 1;
4856
+ color: rgb(255 255 255 / var(--tw-text-opacity))}
4857
+ .sidebar-nav-item-vertical.active:hover{
4858
+ --tw-bg-opacity: 1;
4859
+ background-color: rgb(55 65 81 / var(--tw-bg-opacity))}
4860
+ .sidebar-nav-menu-small .sidebar-nav-menu-select{
4861
+ font-size: 0.875rem;
4862
+ line-height: 1.25rem}
4863
+ .sidebar-nav-menu-small .sidebar-nav-menu-item{
4864
+ font-size: 0.875rem;
4865
+ line-height: 1.25rem;
4866
+ width: 240px}
4867
+ .sidebar-nav-menu-large .sidebar-nav-menu-select{
4868
+ font-size: 1rem;
4869
+ line-height: 1.5rem}
4870
+ .sidebar-nav-menu-large .sidebar-nav-menu-item{
4871
+ font-size: 1rem;
4872
+ line-height: 1.5rem;
4873
+ width: 280px}
4874
+ .app-alert-stacked .alert-container{
4875
+ padding-top: 1rem;
4876
+ padding-bottom: 1rem}
4005
4877
  .app-alert-stacked .alert-actions{
4006
- margin-top: 0.5rem}
4878
+ margin-top: 0.75rem}
4879
+ .app-alert-stacked.with-title .alert-message{
4880
+ margin-top: 0.25rem}
4007
4881
  .app-alert-stacked[data-dismissable="true"] .alert-container{
4008
4882
  padding-right: 3rem}
4009
4883
  .app-alert-stacked[data-dismissable="true"] .alert-dismiss{
@@ -4012,7 +4886,9 @@ select{
4012
4886
  right: 0.5rem;
4013
4887
  margin-left: auto}
4014
4888
  .app-alert-multi-line .alert-container{
4015
- align-items: center}
4889
+ align-items: center;
4890
+ padding-top: 0.625rem;
4891
+ padding-bottom: 0.625rem}
4016
4892
  .app-alert-multi-line .alert-icon{
4017
4893
  align-self: center}
4018
4894
  .app-alert-multi-line .alert-body{
@@ -4024,17 +4900,24 @@ select{
4024
4900
  .app-alert-multi-line .alert-title {
4025
4901
  margin-bottom: 0;
4026
4902
  }
4903
+ .app-alert-multi-line.with-title .alert-message{
4904
+ margin-top: 0.25rem}
4905
+ .app-alert-multi-line[data-condensed="true"].with-title .alert-message{
4906
+ margin-top: 0.125rem}
4027
4907
  .app-alert-multi-line .alert-actions{
4028
4908
  margin-top: 0px;
4029
4909
  margin-left: auto}
4030
- .app-alert-multi-line[data-dismissable="true"] .alert-container{
4031
- padding-right: 0.75rem}
4910
+ .app-alert-multi-line[data-dismissable="true"] .alert-body{
4911
+ padding-right: 2.5rem}
4032
4912
  .app-alert-multi-line[data-dismissable="true"] .alert-dismiss{
4033
- position: relative;
4034
- top: auto;
4035
- right: auto;
4036
- display: flex;
4037
- flex-direction: column}
4913
+ position: absolute;
4914
+ right: 0.75rem;
4915
+ top: 50%;
4916
+ --tw-translate-y: -50%;
4917
+ 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))}
4918
+ .app-alert-single-line .alert-container{
4919
+ padding-top: 0.75rem;
4920
+ padding-bottom: 0.75rem}
4038
4921
  .app-alert-single-line .alert-content{
4039
4922
  display: flex;
4040
4923
  width: 100%;
@@ -4045,8 +4928,42 @@ select{
4045
4928
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)))}
4046
4929
  .app-alert-single-line .alert-title{
4047
4930
  white-space: nowrap}
4931
+ .app-alert-single-line.with-title .alert-message{
4932
+ margin-top: 0px}
4048
4933
  .app-alert-single-line .alert-link{
4049
4934
  display: none}
4935
+ .app-alert-single-line[data-dismissable="true"] .alert-container{
4936
+ padding-left: 3rem;
4937
+ padding-right: 3rem}
4938
+ .app-alert-single-line[data-dismissable="true"] .alert-dismiss{
4939
+ position: absolute;
4940
+ right: 21px;
4941
+ top: 50%;
4942
+ --tw-translate-y: -50%;
4943
+ 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))}
4944
+ .app-button-xs .button-content{
4945
+ font-size: 12px;
4946
+ line-height: 14px}
4947
+ .app-button-xs .button-icon [data-component="icon"],
4948
+ .app-button-xs .button-toggle{
4949
+ height: 0.875rem;
4950
+ width: 0.875rem}
4951
+ .app-button-xs[data-theme] .button-element{
4952
+ padding-top: 0.5rem;
4953
+ padding-bottom: 0.5rem;
4954
+ padding-left: 0.75rem;
4955
+ padding-right: 0.75rem}
4956
+ .app-button-xs[data-theme].icon-only > .button-element .button-icon,
4957
+ .app-button-xs[data-theme][data-collapsed="true"] > .button-element .button-icon{
4958
+ margin-left: -0.375rem;
4959
+ margin-right: -0.375rem}
4960
+ .app-button-xs[data-theme|="text"] .button-element{
4961
+ padding-left: 0.25rem;
4962
+ padding-right: 0.25rem}
4963
+ .app-button-xs[data-theme|="text"].icon-only > .button-element .button-icon,
4964
+ .app-button-xs[data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
4965
+ padding-left: 0.5rem;
4966
+ padding-right: 0.5rem}
4050
4967
  .app-button-sm .button-content{
4051
4968
  font-size: 14px;
4052
4969
  line-height: 16px}