refactor

tjek · Mar 22, 2024 · 9a2e619 · 9a2e619
1 parent 311588e
commit 9a2e619
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 64 deletions.
diff --git a/lib/kits/core-ui/page-decorations.styl b/lib/kits/core-ui/page-decorations.styl
@@ -26,68 +26,6 @@
 
     .sgn-pagedecoration-hidden
         display none
-
-
-    .sgn-pagedecoration-hotspot
-        position absolute
-        z-index 99
-        box-shadow unset
-        border 0
-        opacity 1
-
-    .sgn-pagedecoration-hotspot-link
-        text-decoration none
-        font-size 14px
-
-
-
-    .sgn-pagedecoration-hotspot-link-label
-        outline 0
-        background-color #fff
-        color #3e3e3e
-        border-radius 12px
-        padding 8px
-        box-shadow rgba(0, 0, 0,  0.4) 0px 5px 16px, rgba(0, 0, 0, 0.2) 0px 0px 1px
-        white-space nowrap
-        overflow hidden
-        text-overflow ellipsis
-        margin-left auto
-        margin-right auto
-        opacity 0
-
-    .sgn-pagedecoration-hotspot-link-content
-        display flex
-        align-items flex-end
-        padding 0.5rem
-
-        &:hover
-            background-color rgba(#fff, 0.1)
-            box-shadow 0 0 15px rgba(#000, 0.3)
-            border-radius 4px
-            border 2px solid rgba(#fff, 0.8)
-
-            .sgn-pagedecoration-hotspot-link-label
-                animation-name sgn-animate-pagedecoration
-                animation-timing-function ease
-                animation-duration .1s
-                opacity 1
-
-    .sgn-pagedecoration-hotspot-link-icon
-        position absolute
-        right 4px
-        top 4px
-        color #3e3e3e
-        border-radius 6px
-        padding 6px
-        background-color #fff
-        box-shadow rgba(0, 0, 0,  0.4) 0px 5px 16px, rgba(0, 0, 0, 0.2) 0px 0px 1px
-
-        svg
-            width 20px
-
-
-
-
 
 @keyframes sgn-animate-pagedecoration
     0%

diff --git a/lib/kits/paged-publication/bootstrapper.ts b/lib/kits/paged-publication/bootstrapper.ts
@@ -44,7 +44,7 @@ export default class Bootstrapper {
         });
     }
 
-    transformPageDecrationHotspots(pageDecorations: V2PageDecoration[]) {
+    transformPageDecorationHotspots(pageDecorations: V2PageDecoration[]) {
         const filteredPageDecorations = pageDecorations?.filter(
             (pageDecoration) => pageDecoration.hotspots?.length
         );
@@ -89,7 +89,7 @@ export default class Bootstrapper {
 
         if (pageDecorations?.length) {
             pageDecorationHotspots =
-                this.transformPageDecrationHotspots(pageDecorations);
+                this.transformPageDecorationHotspots(pageDecorations);
 
             if (pageDecorationHotspots.length) {
                 hotspots = hotspots.concat(pageDecorationHotspots);

diff --git a/lib/kits/paged-publication/viewer.styl b/lib/kits/paged-publication/viewer.styl
@@ -161,6 +161,61 @@
     &:hover
         opacity 1
 
+.sgn-pagedecoration-hotspot
+    position absolute
+    z-index 99
+    box-shadow unset
+    border 0
+    opacity 1
+
+.sgn-pagedecoration-hotspot-link
+    text-decoration none
+    font-size 14px
+
+.sgn-pagedecoration-hotspot-link-label
+    outline 0
+    background-color #fff
+    color #3e3e3e
+    border-radius 12px
+    padding 8px
+    box-shadow rgba(0, 0, 0,  0.4) 0px 5px 16px, rgba(0, 0, 0, 0.2) 0px 0px 1px
+    white-space nowrap
+    overflow hidden
+    text-overflow ellipsis
+    margin-left auto
+    margin-right auto
+    opacity 0
+
+.sgn-pagedecoration-hotspot-link-content
+    display flex
+    align-items flex-end
+    padding 0.5rem
+
+    &:hover
+        background-color rgba(#fff, 0.1)
+        box-shadow 0 0 15px rgba(#000, 0.3)
+        border-radius 4px
+        border 2px solid rgba(#fff, 0.8)
+
+        .sgn-pagedecoration-hotspot-link-label
+            animation-name sgn-animate-pagedecoration
+            animation-timing-function ease
+            animation-duration .1s
+            opacity 1
+
+.sgn-pagedecoration-hotspot-link-icon
+    position absolute
+    right 4px
+    top 4px
+    color #3e3e3e
+    border-radius 6px
+    padding 6px
+    background-color #fff
+    box-shadow rgba(0, 0, 0,  0.4) 0px 5px 16px, rgba(0, 0, 0, 0.2) 0px 0px 1px
+
+    svg
+        width 20px
+
 @media (pointer: coarse)
     .sgn-pp__hotspot
         opacity 0 !important