coveragebook_components 0.8.8 → 0.8.9

Sign up to get free protection for your applications and to get access to all the features.
@@ -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
  }