@getflip/swirl-components 0.423.0 → 0.423.1
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.
- package/components.json +1 -1
- package/dist/cjs/swirl-icon-arrow-left_4.cjs.entry.js +1 -1
- package/dist/collection/components/swirl-thumbnail/swirl-thumbnail.css +7 -3
- package/dist/components/assets/pdfjs/pdf.worker.min.mjs +1 -1
- package/dist/components/swirl-thumbnail2.js +1 -1
- package/dist/esm/swirl-icon-arrow-left_4.entry.js +1 -1
- package/dist/swirl-components/{p-839d86c3.entry.js → p-5d34bd5d.entry.js} +1 -1
- package/dist/swirl-components/swirl-components.esm.js +1 -1
- package/package.json +1 -1
package/components.json
CHANGED
|
@@ -57,7 +57,7 @@ const SwirlIconMoreVertikal = class {
|
|
|
57
57
|
};
|
|
58
58
|
SwirlIconMoreVertikal.style = swirlIconCss;
|
|
59
59
|
|
|
60
|
-
const swirlThumbnailCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.thumbnail{position:relative;display:inline-flex;overflow:hidden;padding:0.0625rem;border-radius:var(--s-border-radius-s)}.thumbnail--size-s{--swirl-thumbnail-size:2.5rem}.thumbnail--size-m{--swirl-thumbnail-size:3rem}.thumbnail--size-l{--swirl-thumbnail-size:4rem}.thumbnail--size-xl{--swirl-thumbnail-size:5rem;border-radius:var(--s-border-radius-sm)}.thumbnail--size-xl .thumbnail__buttons{transform:scale(0.75)}.thumbnail--size-2xl{--swirl-thumbnail-size:7.5rem;border-radius:var(--s-border-radius-sm)}.thumbnail--format-landscape{width:var(--swirl-thumbnail-size);aspect-ratio:4 / 3}.thumbnail--format-portrait{height:var(--swirl-thumbnail-size);aspect-ratio:3 / 4}.thumbnail--format-square{width:var(--swirl-thumbnail-size);height:var(--swirl-thumbnail-size)}.thumbnail--has-progress .thumbnail__timestamp{bottom:var(--s-space-8)}.thumbnail--interactive .thumbnail__image-wrapper{position:relative;padding:0;border:none;background-color:transparent;cursor:pointer}.thumbnail--interactive .thumbnail__image-wrapper:hover:after{position:absolute;background-color:rgba(0, 0, 0, 0.15);content:\"\";inset:0}.thumbnail--interactive .thumbnail__image-wrapper:active:after{position:absolute;background-color:rgba(0, 0, 0, 0.3);content:\"\";inset:0}.thumbnail__image-wrapper{overflow:hidden;width:100%;height:100%;border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.03125rem rgba(0, 0, 0, 0.1)}.thumbnail__image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.thumbnail__progress-indicator{position:absolute;z-index:1;right:0;bottom:0;left:0}.thumbnail__buttons{position:absolute;
|
|
60
|
+
const swirlThumbnailCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.thumbnail{position:relative;display:inline-flex;overflow:hidden;padding:0.0625rem;border-radius:var(--s-border-radius-s)}.thumbnail--size-s{--swirl-thumbnail-size:2.5rem}.thumbnail--size-m{--swirl-thumbnail-size:3rem}.thumbnail--size-l{--swirl-thumbnail-size:4rem}.thumbnail--size-xl{--swirl-thumbnail-size:5rem;border-radius:var(--s-border-radius-sm)}.thumbnail--size-xl .thumbnail__buttons{transform:scale(0.75)}.thumbnail--size-2xl{--swirl-thumbnail-size:7.5rem;border-radius:var(--s-border-radius-sm)}.thumbnail--format-landscape{width:var(--swirl-thumbnail-size);aspect-ratio:4 / 3}.thumbnail--format-portrait{height:var(--swirl-thumbnail-size);aspect-ratio:3 / 4}.thumbnail--format-square{width:var(--swirl-thumbnail-size);height:var(--swirl-thumbnail-size)}.thumbnail--has-progress .thumbnail__timestamp{bottom:var(--s-space-8)}.thumbnail--interactive .thumbnail__image-wrapper{position:relative;padding:0;border:none;background-color:transparent;cursor:pointer}.thumbnail--interactive .thumbnail__image-wrapper:hover:after{position:absolute;background-color:rgba(0, 0, 0, 0.15);content:\"\";inset:0}.thumbnail--interactive .thumbnail__image-wrapper:active:after{position:absolute;background-color:rgba(0, 0, 0, 0.3);content:\"\";inset:0}.thumbnail__image-wrapper{overflow:hidden;width:100%;height:100%;border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.03125rem rgba(0, 0, 0, 0.1)}.thumbnail__image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.thumbnail__progress-indicator{position:absolute;z-index:1;right:0;bottom:0;left:0}.thumbnail__buttons{position:absolute;z-index:1;top:var(--s-space-4);right:var(--s-space-4)}@media (hover: hover){.thumbnail__buttons{opacity:0}.thumbnail:hover .thumbnail__buttons{opacity:1}}.thumbnail__timestamp{position:absolute;z-index:1;bottom:var(--s-space-4);left:var(--s-space-4);display:block;overflow:hidden;max-width:calc(100% - 2 * var(--s-space-4));height:1.5rem;padding-right:var(--s-space-8);padding-left:var(--s-space-8);align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.6);font-size:var(--s-font-size-sm);line-height:1.5rem;white-space:nowrap;text-overflow:ellipsis}";
|
|
61
61
|
|
|
62
62
|
const SwirlThumbnail = class {
|
|
63
63
|
constructor(hostRef) {
|
|
@@ -106,15 +106,19 @@
|
|
|
106
106
|
|
|
107
107
|
.thumbnail__buttons {
|
|
108
108
|
position: absolute;
|
|
109
|
-
opacity: 0;
|
|
110
109
|
z-index: 1;
|
|
111
110
|
top: var(--s-space-4);
|
|
112
111
|
right: var(--s-space-4);
|
|
113
112
|
}
|
|
114
113
|
|
|
115
|
-
|
|
116
|
-
|
|
114
|
+
@media (hover: hover) {
|
|
115
|
+
.thumbnail__buttons {
|
|
116
|
+
opacity: 0;
|
|
117
117
|
}
|
|
118
|
+
.thumbnail:hover .thumbnail__buttons {
|
|
119
|
+
opacity: 1;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
118
122
|
|
|
119
123
|
.thumbnail__timestamp {
|
|
120
124
|
position: absolute;
|