coveragebook_components 0.7.4 → 0.7.6
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/build/coco/app.css +133 -2
- data/app/assets/build/coco/app.js +179 -109
- data/app/assets/build/coco/book.css +164 -1
- data/app/assets/build/coco/book.js +160 -89
- data/app/assets/css/libs/tippy.css +4 -0
- data/app/components/coco/base/modal/modal.css +55 -1
- data/app/components/coco/base/modal/modal.html.erb +2 -2
- data/app/components/coco/base/modal/modal.js +43 -2
- data/app/components/coco/base/modal/modal.rb +14 -8
- data/app/components/coco/base/modal_dialog/modal_dialog.css +1 -1
- data/app/components/coco/base/modal_dialog/modal_dialog.js +1 -1
- data/app/components/coco/base/modal_lightbox/modal_lightbox.css +35 -0
- data/app/components/coco/base/modal_lightbox/modal_lightbox.html.erb +13 -0
- data/app/components/coco/base/modal_lightbox/modal_lightbox.js +35 -0
- data/app/components/coco/base/modal_lightbox/modal_lightbox.rb +19 -0
- data/app/helpers/coco/base_helper.rb +7 -1
- data/lib/coco.rb +1 -1
- metadata +6 -2
@@ -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;
|