swiperScrollbar + omnibusTooltip

2025-11-13 12:20:16 +01:00
parent e97fa83e4a
commit 0030ce8928
5 changed files with 371 additions and 95 deletions
--- a/style.less
+++ b/style.less
@@ -0,0 +1,125 @@
+.idm__hotspot .add_to_basket{
+  display: flex;
+}
+.idm__hotspot .add_to_basket.--range{
+  flex-direction: column;
+}
+.idm__hotspot .idm-products-banner__qty{
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  align-items: center;
+  gap: 1rem;
+}
+.idm__hotspot .idm-products-banner__qty-input{
+  height: 3rem;
+  text-align: center;
+  border: 1px solid #ccc;
+  width: 60%;
+  max-width: unset;
+  min-width: unset;
+}
+.idm__hotspot .idm-products-banner__qty button{
+  background: #000;
+  height: 3rem;
+  width: 3rem;
+  color: #fff;
+  border-radius: 0.5rem;
+  min-width: 3rem;
+}
+  @keyframes idm-skeleton-loading {
+      to {
+          background-position-x: -200%;
+      }
+  }
+.idm__hotspot.idm-loading{
+  position: relative;
+  overflow: hidden;
+
+  transition: none;
+  border-radius: 8px;
+  background: #eee;
+  background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
+  background-size: 200% 100%;
+  animation: 1.5s idm-skeleton-loading linear infinite;
+  width: 100%;
+  height: 50rem;
+}
+.idm__hotspot.idm-loading .hotspot{
+  opacity: 0;
+}
+@media (max-width: 756px) {
+  .idm__hotspot.idm-loading{
+    width: 100%;
+    height: 50rem;
+  }
+}
+
+/* SWIPER PROGRESS */
+.idm-scrollbar{
+    flex: 1;
+    height: 2px!important;
+    position: relative!important;
+    margin-top: 2rem;
+    cursor: grab;
+}
+.idm-scrollbar.--drag-start .idm-progress{
+    transition: none;
+}
+.idm-progress{
+    position: absolute;
+    z-index: 10;
+    height: calc(100% + 2px);
+    background-color: #0d0d0d;
+    left: 0;
+    top: -1px;
+    transition: all 0.3s;
+    border-radius: 5px;
+}
+
+
+
+/* tooltip */
+.idm_tooltip{
+  --tooltip-background: #111;
+  --tooltip-border: #999;
+  --tooltip-color: #fff;
+  
+  position: relative;
+  &__info_icon{
+    color: var(--tooltip-border);
+    display: inline-block;
+    &:before{
+      content: "";
+      display: block;
+      width: 1.2rem;
+      height: 1.2rem;
+      margin-left: 0.5rem;
+      cursor: pointer;
+      vertical-align: bottom;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='idm_tooltip__info_icon' viewBox='0 0 16 16'%3E%3Cpath d='M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0ZM8,14.667A6.667,6.667,0,1,1,14.667,8,6.667,6.667,0,0,1,8,14.667Z' fill='currentColor'%3E%3C/path%3E%3Cpath d='M11.333,10h-.667a.667.667,0,1,0,0,1.333h.667v4a.667.667,0,0,0,1.333,0v-4A1.333,1.333,0,0,0,11.333,10Z' transform='translate(-3.333 -3.333)' fill='currentColor'%3E%3C/path%3E%3Ccircle cx='1' cy='1' r='1' transform='translate(7 3.333)' fill='currentColor'%3E%3C/circle%3E%3C/svg%3E");
+      background-size: cover;
+    }
+  }
+  &__content{
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s;
+    border-radius: 5px;
+    background: var(--tooltip-background);
+    color: var(--tooltip-color);
+    border: 1px solid var(--tooltip-border);
+    bottom: 150%;
+    padding: 0.5rem 1rem;
+    @media @tablet{
+      &.--one-line{
+        white-space: nowrap;
+      }
+    }
+    &.--visible{
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+}