coveragebook_components 0.8.8 → 0.8.9

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.
@@ -14044,7 +14044,7 @@
14044
14044
  var package_default = {
14045
14045
  name: "coveragebook-components",
14046
14046
  type: "module",
14047
- version: "0.8.8",
14047
+ version: "0.8.9",
14048
14048
  main: "index.js",
14049
14049
  repository: "git@github.com:coveragebook/coco.git",
14050
14050
  author: "Mark Perkins <mark@coveragebook.com>",
@@ -1128,15 +1128,34 @@ select {
1128
1128
  .modal-frame {
1129
1129
  display: contents;
1130
1130
  }
1131
+ /*
1132
+ Limit the size of modal content when rendered in the
1133
+ host page rather than displayed as a modal.
1134
+ */
1135
+ [data-role="inline-modal-content"] {
1136
+ margin-left: auto;
1137
+ margin-right: auto;
1138
+ max-width: 42rem;
1139
+ }
1140
+ [data-role="inline-modal-content"] [data-component="modal-dialog"] {
1141
+ border-radius: 0.75rem;
1142
+ border-width: 1px;
1143
+ --tw-border-opacity: 1;
1144
+ border-color: rgb(209 213 219 / var(--tw-border-opacity));
1145
+ --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
1146
+ --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
1147
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1148
+ }
1131
1149
  [data-coco][data-component="modal-dialog"] {
1132
1150
  width: 100%;
1133
1151
  border-radius: 0.75rem;
1152
+ }
1153
+ .modal-frame [data-coco][data-component="modal-dialog"] {
1134
1154
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
1135
1155
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
1136
1156
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1137
- max-width: 42rem;
1157
+ max-width: 42rem; /* temp until sizes added */
1138
1158
  }
1139
- /* temp until sizes added */
1140
1159
  [data-coco][data-component="modal-dialog"] .modal-dialog-header {
1141
1160
  position: relative;
1142
1161
  display: flex;
@@ -1360,6 +1379,29 @@ select {
1360
1379
  [data-coco][data-component="pager-link"][data-direction="next"] .coco-icon {
1361
1380
  margin-right: -0.25rem;
1362
1381
  }
1382
+ [data-coco][data-component="panel"] {
1383
+ display: contents;
1384
+ }
1385
+ [data-coco][data-component="panel"] .panel-content {
1386
+ display: contents;
1387
+ }
1388
+ /* Only style Coco panels that are not rendered inside legacy panel components */
1389
+ [data-coco][data-component="panel"]:not([data-component="panel"] [data-component="panel"]) {
1390
+ display: block;
1391
+ border-radius: 0.75rem;
1392
+ border-width: 1px;
1393
+ --tw-border-opacity: 1;
1394
+ border-color: rgb(209 213 219 / var(--tw-border-opacity));
1395
+ --tw-bg-opacity: 1;
1396
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1397
+ --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
1398
+ --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
1399
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1400
+ }
1401
+ [data-coco][data-component="panel"]:not([data-component="panel"] [data-component="panel"]) .panel-content {
1402
+ display: block;
1403
+ padding: max(min(5%, 2rem), 1rem);
1404
+ }
1363
1405
  [data-coco][data-component="placeholder"] {
1364
1406
  padding: 1rem;
1365
1407
  }