coveragebook_components 0.7.4 → 0.7.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/build/coco/app.css +133 -2
  3. data/app/assets/build/coco/app.js +177 -109
  4. data/app/assets/build/coco/book.css +164 -1
  5. data/app/assets/build/coco/book.js +158 -89
  6. data/app/assets/css/libs/tippy.css +4 -0
  7. data/app/components/coco/base/modal/modal.css +55 -1
  8. data/app/components/coco/base/modal/modal.html.erb +2 -2
  9. data/app/components/coco/base/modal/modal.js +41 -2
  10. data/app/components/coco/base/modal/modal.rb +14 -8
  11. data/app/components/coco/base/modal_dialog/modal_dialog.css +1 -1
  12. data/app/components/coco/base/modal_dialog/modal_dialog.js +1 -1
  13. data/app/components/coco/base/modal_lightbox/modal_lightbox.css +35 -0
  14. data/app/components/coco/base/modal_lightbox/modal_lightbox.html.erb +13 -0
  15. data/app/components/coco/base/modal_lightbox/modal_lightbox.js +35 -0
  16. data/app/components/coco/base/modal_lightbox/modal_lightbox.rb +19 -0
  17. data/app/helpers/coco/base_helper.rb +7 -1
  18. data/lib/coco.rb +1 -1
  19. metadata +6 -2
data/app/assets/build/coco/book.css CHANGED
@@ -664,6 +664,9 @@ select {
664
664
  --tw-backdrop-saturate: ;
665
665
  --tw-backdrop-sepia: ;
666
666
  }
667
+ [data-tippy-root] {
668
+ z-index: 10010 !important;
669
+ }
667
670
  [data-coco] .tippy-box {
668
671
  white-space: normal;
669
672
  background-color: transparent;
@@ -964,6 +967,7 @@ select {
964
967
  inset: 0px;
965
968
  z-index: 10000;
966
969
  overflow-y: auto;
970
+ scroll-behavior: smooth;
967
971
  }
968
972
  [data-coco][data-component="modal"] .modal-overlay {
969
973
  position: fixed;
@@ -989,6 +993,89 @@ select {
989
993
  [data-coco][data-component="modal"] .modal-content {
990
994
  display: contents;
991
995
  }
996
+ /* transitions */
997
+ [data-coco][data-component="modal"] .modal-overlay.overlay-enter {
998
+ transition-duration: 200ms;
999
+ transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
1000
+ }
1001
+ [data-coco][data-component="modal"] .modal-overlay.overlay-enter-start {
1002
+ opacity: 0;
1003
+ }
1004
+ [data-coco][data-component="modal"] .modal-overlay.overlay-enter-end {
1005
+ opacity: 1;
1006
+ }
1007
+ [data-coco][data-component="modal"] .modal-overlay.overlay-leave {
1008
+ transition-duration: 150ms;
1009
+ transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
1010
+ }
1011
+ [data-coco][data-component="modal"] .modal-overlay.overlay-leave-start {
1012
+ opacity: 1;
1013
+ }
1014
+ [data-coco][data-component="modal"] .modal-overlay.overlay-leave-end {
1015
+ opacity: 0;
1016
+ }
1017
+ [data-coco][data-component="modal"] .modal-container.container-enter {
1018
+ transition-duration: 400ms;
1019
+ transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
1020
+ }
1021
+ [data-coco][data-component="modal"] .modal-container.container-enter-start {
1022
+ --tw-translate-y: 1rem;
1023
+ 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));
1024
+ opacity: 0;
1025
+ }
1026
+ @media (min-width: 576px) {
1027
+
1028
+ [data-coco][data-component="modal"] .modal-container.container-enter-start {
1029
+ --tw-translate-y: 0px;
1030
+ --tw-scale-x: .95;
1031
+ --tw-scale-y: .95;
1032
+ 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));
1033
+ }
1034
+ }
1035
+ [data-coco][data-component="modal"] .modal-container.container-enter-end {
1036
+ --tw-translate-y: 0px;
1037
+ 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));
1038
+ opacity: 1;
1039
+ }
1040
+ @media (min-width: 576px) {
1041
+
1042
+ [data-coco][data-component="modal"] .modal-container.container-enter-end {
1043
+ --tw-scale-x: 1;
1044
+ --tw-scale-y: 1;
1045
+ 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));
1046
+ }
1047
+ }
1048
+ [data-coco][data-component="modal"] .modal-container.container-leave {
1049
+ transition-duration: 150ms;
1050
+ transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
1051
+ }
1052
+ [data-coco][data-component="modal"] .modal-container.container-leave-start {
1053
+ --tw-translate-y: 0px;
1054
+ 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));
1055
+ opacity: 1;
1056
+ }
1057
+ @media (min-width: 576px) {
1058
+
1059
+ [data-coco][data-component="modal"] .modal-container.container-leave-start {
1060
+ --tw-scale-x: 1;
1061
+ --tw-scale-y: 1;
1062
+ 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));
1063
+ }
1064
+ }
1065
+ [data-coco][data-component="modal"] .modal-container.container-leave-end {
1066
+ --tw-translate-y: 1rem;
1067
+ 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));
1068
+ opacity: 0;
1069
+ }
1070
+ @media (min-width: 576px) {
1071
+
1072
+ [data-coco][data-component="modal"] .modal-container.container-leave-end {
1073
+ --tw-translate-y: 0px;
1074
+ --tw-scale-x: .95;
1075
+ --tw-scale-y: .95;
1076
+ 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));
1077
+ }
1078
+ }
992
1079
  .modal-frame {
993
1080
  display: contents;
994
1081
  }
@@ -1005,7 +1092,6 @@ select {
1005
1092
  position: relative;
1006
1093
  display: flex;
1007
1094
  align-items: center;
1008
- justify-content: center;
1009
1095
  height: 3.5rem;
1010
1096
  border-top-left-radius: 0.75rem;
1011
1097
  border-top-right-radius: 0.75rem;
@@ -1088,6 +1174,83 @@ select {
1088
1174
  border-top-left-radius: 0px;
1089
1175
  border-top-right-radius: 0px;
1090
1176
  }
1177
+ [data-coco][data-component="modal-lightbox"] {
1178
+ position: relative;
1179
+ width: -moz-fit-content;
1180
+ width: fit-content;
1181
+ }
1182
+ [data-coco][data-component="modal-lightbox"] .modal-lightbox-close {
1183
+ position: absolute;
1184
+ right: -0.375rem;
1185
+ top: -0.375rem;
1186
+ z-index: 20;
1187
+ flex: none;
1188
+ border-radius: 9999px;
1189
+ padding: 0.5rem;
1190
+ transition-property: all;
1191
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1192
+ transition-duration: 150ms;
1193
+ }
1194
+ @media (min-width: 576px) {
1195
+
1196
+ [data-coco][data-component="modal-lightbox"] .modal-lightbox-close {
1197
+ right: -1rem;
1198
+ top: -1rem;
1199
+ }
1200
+ }
1201
+ [data-coco][data-component="modal-lightbox"] .modal-lightbox-close {
1202
+ --tw-bg-opacity: 1;
1203
+ background-color: rgb(17 24 39 / var(--tw-bg-opacity));
1204
+ --tw-text-opacity: 1;
1205
+ color: rgb(255 255 255 / var(--tw-text-opacity));
1206
+ --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
1207
+ --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
1208
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1209
+ }
1210
+ [data-coco][data-component="modal-lightbox"] .modal-lightbox-close:focus {
1211
+ outline: 2px solid transparent;
1212
+ outline-offset: 2px;
1213
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1214
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1215
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1216
+ }
1217
+ [data-coco][data-component="modal-lightbox"] .modal-lightbox-content {
1218
+ position: relative;
1219
+ min-height: 100px;
1220
+ min-width: 100px;
1221
+ overflow: hidden;
1222
+ border-radius: 0.75rem;
1223
+ width: -moz-fit-content;
1224
+ width: fit-content;
1225
+ }
1226
+ [data-coco][data-component="modal-lightbox"] .modal-lightbox-loader {
1227
+ position: absolute;
1228
+ inset: 0px;
1229
+ display: flex;
1230
+ align-items: center;
1231
+ justify-content: center;
1232
+ background-color: rgb(0 0 0 / 0.6);
1233
+ --tw-text-opacity: 1;
1234
+ color: rgb(255 255 255 / var(--tw-text-opacity));
1235
+ opacity: 0.7;
1236
+ }
1237
+ [data-coco][data-component="modal-lightbox"] .modal-lightbox-media {
1238
+ position: relative;
1239
+ z-index: 10;
1240
+ }
1241
+ [data-coco][data-component="modal-lightbox"] .modal-lightbox-media img {
1242
+ width: 100%;
1243
+ }
1244
+ [data-coco][data-component="modal-lightbox"].\!loaded .modal-lightbox-content {
1245
+ --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
1246
+ --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
1247
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1248
+ }
1249
+ [data-coco][data-component="modal-lightbox"].loaded .modal-lightbox-content {
1250
+ --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
1251
+ --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
1252
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1253
+ }
1091
1254
  [data-coco][data-component="placeholder"] {
1092
1255
  border-width: 1px;
1093
1256
  border-style: dashed;