spiderly 19.5.2 → 19.5.4-preview.0

package/styles/styles/layout/_responsive.scss

@@ -1,102 +1,102 @@
-@use './_variables' as *;
+@use "./_variables" as *;
 
 @media screen and (min-width: 1960px) {
-    .layout-main, .landing-wrapper {
-        width: 1504px;
-        margin-left: auto !important;
-        margin-right: auto !important;
-    }
-
+  .layout-main,
+  .landing-wrapper {
+    width: 1504px;
+    margin-left: auto !important;
+    margin-right: auto !important;
+  }
 }
 
 @media (min-width: 992px) {
-    .layout-wrapper {
-        &.layout-overlay {
-            .layout-main-container {
-                margin-left: 0;
-                padding-left: 2rem;
-            }
+  .layout-wrapper {
+    &.layout-overlay {
+      .layout-main-container {
+        margin-left: 0;
+        padding-left: 2rem;
+      }
 
-            .layout-sidebar {
-                transform: translateX(-100%);
-                left: 0;
-                top: 0;
-                height: 100vh;
-                border-top-left-radius: 0;
-                border-bottom-left-radius: 0;
-            }
+      .layout-sidebar {
+        transform: translateX(-100%);
+        left: 0;
+        top: 0;
+        height: 100vh;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
 
-            &.layout-overlay-active {
-                .layout-sidebar {
-                    transform: translateX(0);
-                }
-            }
+      &.layout-overlay-active {
+        .layout-sidebar {
+          transform: translateX(0);
         }
+      }
+    }
 
-        &.layout-static {
-            .layout-main-container {
-                margin-left: 300px;
-            }
-
-            &.layout-static-inactive {
-                .layout-sidebar {
-                    transform: translateX(-100%);
-                    left: 0;
-                }
+    &.layout-static {
+      .layout-main-container {
+        margin-left: 300px;
+      }
 
-                .layout-main-container {
-                    margin-left: 0;
-                    padding-left: 2rem;
-                }
-            }
+      &.layout-static-inactive {
+        .layout-sidebar {
+          transform: translateX(-100%);
+          left: 0;
         }
 
-        .layout-mask {
-            display: none;
+        .layout-main-container {
+          margin-left: 0;
+          padding-left: 2rem;
         }
+      }
     }
+
+    .layout-mask {
+      display: none;
+    }
+  }
 }
 
 @media (max-width: 991px) {
-    .blocked-scroll {
-        overflow: hidden;
-    }
+  .blocked-scroll {
+    overflow: hidden;
+  }
 
-    .layout-wrapper {
-        .layout-main-container {
-            margin-left: 0;
-            padding-left: 2rem;
-        }
+  .layout-wrapper {
+    .layout-main-container {
+      margin-left: 0;
+      padding-left: 2rem;
+    }
 
-        .layout-sidebar {
-            transform: translateX(-100%);
-            left: 0;
-            top: 0;
-            height: 100vh;
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-        }
+    .layout-sidebar {
+      transform: translateX(-100%);
+      left: 0;
+      top: 0;
+      height: 100vh;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
 
-        .layout-mask {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            z-index: 998;
-            width: 100%;
-            height: 100%;
-            background-color: var(--maskbg);
-        }
+    .layout-mask {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 998;
+      width: 100%;
+      height: 100%;
+      background-color: var(--maskbg);
+    }
 
-        &.layout-mobile-active {
-            .layout-sidebar {
-                transform: translateX(0);
-            }
+    &.layout-mobile-active {
+      .layout-sidebar {
+        transform: translateX(0);
+      }
 
-            .layout-mask {
-                display: block;
-                animation: fadein $transitionDuration;
-            }
-        }
+      .layout-mask {
+        display: block;
+        animation: fadein $transitionDuration;
+      }
     }
+  }
 }

package/styles/styles/layout/_spiderly-controls.scss

@@ -1,4 +1,4 @@
-@use './_variables' as *;
+@use "./_variables" as *;
 
 .spiderly-tooltip-invalid.p-tooltip .p-tooltip-text {
   background-color: $errorColorLight !important;

package/styles/styles/layout/_topbar.scss

@@ -1,236 +1,241 @@
-@use './_variables' as *;
-@use './_mixins' as *;
+@use "./_variables" as *;
+@use "./_mixins" as *;
 
 .layout-topbar {
-    position: fixed;
-    height: 5rem;
-    z-index: 997;
-    left: 0;
-    top: 0;
-    width: 100%;
-    padding: 0 2rem;
-    background-color: var(--surface-card);
-    transition: left $transitionDuration;
+  position: fixed;
+  height: 5rem;
+  z-index: 997;
+  left: 0;
+  top: 0;
+  width: 100%;
+  padding: 0 2rem;
+  background-color: var(--surface-card);
+  transition: left $transitionDuration;
+  display: flex;
+  align-items: center;
+  box-shadow:
+    0px 3px 5px rgba(0, 0, 0, 0.02),
+    0px 0px 2px rgba(0, 0, 0, 0.05),
+    0px 1px 4px rgba(0, 0, 0, 0.08);
+
+  .layout-topbar-logo {
     display: flex;
     align-items: center;
-    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.02), 0px 0px 2px rgba(0, 0, 0, 0.05),
-      0px 1px 4px rgba(0, 0, 0, 0.08);
+    color: var(--surface-900);
+    font-size: 1.5rem;
+    font-weight: 500;
+    width: 300px;
+    border-radius: var(--p-content-border-radius);
 
-    .layout-topbar-logo {
-      display: flex;
-      align-items: center;
-      color: var(--surface-900);
+    img {
+      height: 2.5rem;
+      margin-right: 0.5rem;
+    }
+
+    &:focus {
+      @include focused();
+    }
+  }
+
+  .layout-topbar-button {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    color: var(--p-text-color-secondary);
+    background-color: transparent;
+    border-color: transparent;
+    // border-radius: 50%;
+    // width: 3rem;
+    // height: 3rem;
+    cursor: pointer;
+    transition: background-color $transitionDuration;
+
+    &:hover {
+      color: var(--p-text-color);
+      background-color: var(--p-content-hover-background);
+    }
+
+    &:focus {
+      @include focused();
+    }
+
+    i {
       font-size: 1.5rem;
-      font-weight: 500;
-      width: 300px;
-      border-radius: var(--p-content-border-radius);
-  
-      img {
-        height: 2.5rem;
-        margin-right: 0.5rem;
-      }
-  
-      &:focus {
-        @include focused();
-      }
     }
-  
+
+    span {
+      font-size: 1rem;
+      display: none;
+    }
+  }
+
+  .layout-menu-button {
+    border-radius: 50%;
+    width: 3rem;
+    height: 3rem;
+    margin-left: 2rem;
+  }
+
+  // .layout-topbar-menu-button {
+  //   display: none;
+
+  //   i {
+  //     font-size: 1.25rem;
+  //   }
+  // }
+
+  .profile-button {
+    margin: 0 0 0 auto;
+    padding: 0;
+    list-style: none;
+    display: flex;
+
     .layout-topbar-button {
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-      position: relative;
-      color: var(--p-text-color-secondary);
-      background-color: transparent;
-      border-color: transparent;
-      // border-radius: 50%;
-      // width: 3rem;
-      // height: 3rem;
-      cursor: pointer;
-      transition: background-color $transitionDuration;
-  
-      &:hover {
-        color: var(--p-text-color);
-        background-color: var(--p-content-hover-background);
-      }
-  
-      &:focus {
-        @include focused();
-      }
-  
-      i {
-        font-size: 1.5rem;
-      }
-  
-      span {
-        font-size: 1rem;
-        display: none;
-      }
+      margin-left: 1rem;
     }
-  
+  }
+}
+
+@media (max-width: 991px) {
+  .display-none-on-mobile {
+    display: none !important;
+  }
+
+  .layout-topbar {
+    justify-content: space-between;
+
+    .layout-topbar-logo {
+      width: auto;
+      order: 2;
+    }
+
     .layout-menu-button {
-      border-radius: 50%;
-      width: 3rem;
-      height: 3rem;
-      margin-left: 2rem;
+      margin-left: 0;
+      order: 1;
     }
-  
-    // .layout-topbar-menu-button {
-    //   display: none;
-  
-    //   i {
-    //     font-size: 1.25rem;
-    //   }
-    // }
-  
+
     .profile-button {
-      margin: 0 0 0 auto;
-      padding: 0;
-      list-style: none;
-      display: flex;
-  
-      .layout-topbar-button {
-        margin-left: 1rem;
-      }
+      // burger meni
+      border-radius: 50%;
+      display: inline-flex;
+      margin-left: 0;
+      order: 3;
     }
-  }
-  
-  @media (max-width: 991px) {
 
-    .display-none-on-mobile{
-      display: none !important;
-    }
+    .layout-topbar-menu {
+      // div koji obgrljuje buttone
+      margin-left: 0;
+      position: absolute;
+      flex-direction: column;
+      background-color: var(--surface-overlay);
+      box-shadow:
+        0px 3px 5px rgba(0, 0, 0, 0.02),
+        0px 0px 2px rgba(0, 0, 0, 0.05),
+        0px 1px 4px rgba(0, 0, 0, 0.08);
+      border-radius: var(--p-content-border-radius);
+      padding: 1rem;
+      right: 2rem;
+      top: 5rem;
+      min-width: 15rem;
+      display: none;
+      -webkit-animation: scalein 0.15s linear;
+      animation: scalein 0.15s linear;
 
-    .layout-topbar {
-      justify-content: space-between;
-  
-      .layout-topbar-logo {
-        width: auto;
-        order: 2;
-      }
-  
-      .layout-menu-button {
-        margin-left: 0;
-        order: 1;
-      }
-  
-      .profile-button {
-        // burger meni
-        border-radius: 50%;
-        display: inline-flex;
-        margin-left: 0;
-        order: 3;
+      &.layout-topbar-menu-mobile-active {
+        display: block;
       }
-  
-      .layout-topbar-menu {
-        // div koji obgrljuje buttone
+
+      .layout-topbar-button {
         margin-left: 0;
-        position: absolute;
-        flex-direction: column;
-        background-color: var(--surface-overlay);
-        box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.02),
-          0px 0px 2px rgba(0, 0, 0, 0.05), 0px 1px 4px rgba(0, 0, 0, 0.08);
+        display: flex;
+        width: 100%;
+        height: auto;
+        justify-content: flex-start;
         border-radius: var(--p-content-border-radius);
         padding: 1rem;
-        right: 2rem;
-        top: 5rem;
-        min-width: 15rem;
-        display: none;
-        -webkit-animation: scalein 0.15s linear;
-        animation: scalein 0.15s linear;
-  
-        &.layout-topbar-menu-mobile-active {
-          display: block;
+
+        i {
+          font-size: 1rem;
+          margin-right: 0.5rem;
         }
-  
-        .layout-topbar-button {
-          margin-left: 0;
-          display: flex;
-          width: 100%;
-          height: auto;
-          justify-content: flex-start;
-          border-radius: var(--p-content-border-radius);
-          padding: 1rem;
-  
-          i {
-            font-size: 1rem;
-            margin-right: 0.5rem;
-          }
-  
-          span {
-            font-weight: medium;
-            display: block;
-          }
+
+        span {
+          font-weight: medium;
+          display: block;
         }
       }
     }
   }
-  
-  .layout-topbar-profile-dropdown-menu {
-    //   background-color: var(--surface-card);
-    display: none;
-    position: absolute;
-    background-color: var(--surface-overlay);
-    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.02), 0px 0px 2px rgba(0, 0, 0, 0.05),
-      0px 1px 4px rgba(0, 0, 0, 0.08);
+}
+
+.layout-topbar-profile-dropdown-menu {
+  //   background-color: var(--surface-card);
+  display: none;
+  position: absolute;
+  background-color: var(--surface-overlay);
+  box-shadow:
+    0px 3px 5px rgba(0, 0, 0, 0.02),
+    0px 0px 2px rgba(0, 0, 0, 0.05),
+    0px 1px 4px rgba(0, 0, 0, 0.08);
+  border-radius: var(--p-content-border-radius);
+  padding: 1rem;
+  right: 2rem;
+  top: 5rem;
+  min-width: 15rem;
+  -webkit-animation: scalein 0.15s linear;
+  animation: scalein 0.15s linear;
+  //   height: 150px;
+  //   width: 280px;
+  z-index: 10;
+
+  &.layout-topbar-menu-mobile-active {
+    display: block;
+  }
+
+  @media (max-width: 991px) {
+    width: 210px;
+    right: 1rem;
+    top: 4.5rem;
+  }
+
+  .layout-topbar-profile-dropdown-button {
+    margin-left: 0;
+    display: flex;
+    align-items: center;
+    position: relative;
+    color: var(--p-text-color-secondary);
+    width: 100%;
+    height: auto;
+    justify-content: flex-start;
     border-radius: var(--p-content-border-radius);
     padding: 1rem;
-    right: 2rem;
-    top: 5rem;
-    min-width: 15rem;
-    -webkit-animation: scalein 0.15s linear;
-    animation: scalein 0.15s linear;
-    //   height: 150px;
-    //   width: 280px;
-    z-index: 10;
-  
-    &.layout-topbar-menu-mobile-active {
-      display: block;
+    cursor: pointer;
+    transition: background-color $transitionDuration;
+
+    &:hover {
+      color: var(--p-text-color);
+      background-color: var(--p-content-hover-background);
     }
-  
-    @media (max-width: 991px) {
-      width: 210px;
-      right: 1rem;
-      top: 4.5rem;
+
+    &:focus {
+      @include focused();
     }
-  
-    .layout-topbar-profile-dropdown-button {
-      margin-left: 0;
-      display: flex;
-      align-items: center;
-      position: relative;
-      color: var(--p-text-color-secondary);
-      width: 100%;
-      height: auto;
-      justify-content: flex-start;
-      border-radius: var(--p-content-border-radius);
-      padding: 1rem;
-      cursor: pointer;
-      transition: background-color $transitionDuration;
-  
-      &:hover {
-        color: var(--p-text-color);
-        background-color: var(--p-content-hover-background);
-      }
-  
-      &:focus {
-        @include focused();
-      }
-  
-      i {
-        font-size: 1rem;
-        margin-right: 0.5rem;
-      }
-  
-      span {
-        font-weight: medium;
-        display: block;
-      }
+
+    i {
+      font-size: 1rem;
+      margin-right: 0.5rem;
     }
-  }
-  
-  @media (min-width: 992px) {
-    .display-none-on-desktop{
-      display: none !important;
+
+    span {
+      font-weight: medium;
+      display: block;
     }
-  }
+  }
+}
+
+@media (min-width: 992px) {
+  .display-none-on-desktop {
+    display: none !important;
+  }
+}