spiderly 19.3.0 → 19.4.0-preview.0

package/styles/styles/layout/_topbar.scss

@@ -1,236 +1,236 @@
-@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;
-    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;
-      color: var(--surface-900);
-      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();
-      }
-    }
-  
-    .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;
-      }
-    }
-  
-    .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 {
-        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 {
-        margin-left: 0;
-        order: 1;
-      }
-  
-      .profile-button {
-        // burger meni
-        border-radius: 50%;
-        display: inline-flex;
-        margin-left: 0;
-        order: 3;
-      }
-  
-      .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-menu-mobile-active {
-          display: block;
-        }
-  
-        .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;
-          }
-        }
-      }
-    }
-  }
-  
-  .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;
-      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;
-      }
-    }
-  }
-  
-  @media (min-width: 992px) {
-    .display-none-on-desktop{
-      display: none !important;
-    }
+@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;
+    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;
+      color: var(--surface-900);
+      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();
+      }
+    }
+  
+    .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;
+      }
+    }
+  
+    .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 {
+        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 {
+        margin-left: 0;
+        order: 1;
+      }
+  
+      .profile-button {
+        // burger meni
+        border-radius: 50%;
+        display: inline-flex;
+        margin-left: 0;
+        order: 3;
+      }
+  
+      .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-menu-mobile-active {
+          display: block;
+        }
+  
+        .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;
+          }
+        }
+      }
+    }
+  }
+  
+  .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;
+      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;
+      }
+    }
+  }
+  
+  @media (min-width: 992px) {
+    .display-none-on-desktop{
+      display: none !important;
+    }
   }

package/styles/styles/layout/_typography.scss

@@ -1,63 +1,63 @@
-h1, h2, h3, h4, h5, h6 {
-    margin: 1.5rem 0 1rem 0;
-    font-family: inherit;
-    font-weight: 500;
-    line-height: 1.2;
-    color: var(--surface-900);
-
-    &:first-child {
-        margin-top: 0;
-    }
-}
-
-h1 {
-    font-size: 2.5rem;
-}
-
-h2 {
-    font-size: 2rem;
-}
-
-h3 {
-    font-size: 1.75rem;
-}
-
-h4 {
-    font-size: 1.5rem;
-}
-
-h5 {
-    font-size: 1.25rem;
-}
-
-h6 {
-    font-size: 1rem;
-}
-
-mark {
-    background: #FFF8E1;
-    padding: .25rem .4rem;
-    border-radius: var(--p-content-border-radius);
-    font-family: monospace;
-}
-
-blockquote {
-    margin: 1rem 0;
-    padding: 0 2rem;
-    border-left: 4px solid #90A4AE;
-}
-
-hr {
-    border-top: solid var(--surface-border);
-    border-width: 1px 0 0 0;
-    margin: 1rem 0;
-}
-
-p {
-    margin: 0 0 1rem 0;
-    line-height: 1.5;
-
-    &:last-child {
-        margin-bottom: 0;
-    }
-}
+h1, h2, h3, h4, h5, h6 {
+    margin: 1.5rem 0 1rem 0;
+    font-family: inherit;
+    font-weight: 500;
+    line-height: 1.2;
+    color: var(--surface-900);
+
+    &:first-child {
+        margin-top: 0;
+    }
+}
+
+h1 {
+    font-size: 2.5rem;
+}
+
+h2 {
+    font-size: 2rem;
+}
+
+h3 {
+    font-size: 1.75rem;
+}
+
+h4 {
+    font-size: 1.5rem;
+}
+
+h5 {
+    font-size: 1.25rem;
+}
+
+h6 {
+    font-size: 1rem;
+}
+
+mark {
+    background: #FFF8E1;
+    padding: .25rem .4rem;
+    border-radius: var(--p-content-border-radius);
+    font-family: monospace;
+}
+
+blockquote {
+    margin: 1rem 0;
+    padding: 0 2rem;
+    border-left: 4px solid #90A4AE;
+}
+
+hr {
+    border-top: solid var(--surface-border);
+    border-width: 1px 0 0 0;
+    margin: 1rem 0;
+}
+
+p {
+    margin: 0 0 1rem 0;
+    line-height: 1.5;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}

package/styles/styles/layout/_utils.scss

@@ -1,20 +1,20 @@
-.card {
-    background: var(--surface-card);
-    border: 1px solid var(--surface-border);
-    padding: 2rem;
-    margin-bottom: 2rem;
-    box-shadow: var(--card-shadow);
-    border-radius: var(--p-content-border-radius);
-
-    &:last-child {
-        margin-bottom: 0;
-    }
-}
-
-.p-toast {
-    &.p-toast-top-right,
-    &.p-toast-top-left,
-    &.p-toast-top-center {
-        top: 100px;
-    }
+.card {
+    background: var(--surface-card);
+    border: 1px solid var(--surface-border);
+    padding: 2rem;
+    margin-bottom: 2rem;
+    box-shadow: var(--card-shadow);
+    border-radius: var(--p-content-border-radius);
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.p-toast {
+    &.p-toast-top-right,
+    &.p-toast-top-left,
+    &.p-toast-top-center {
+        top: 100px;
+    }
 }