spiderly 19.5.2 → 19.5.4-preview.0

package/styles/controls/spiderly-checkbox/spiderly-checkbox.component.scss

@@ -1,23 +1,23 @@
 ::ng-deep {
-    .p-checkbox-false {
-        .p-checkbox-box {
-            border-color: var(--p-checkbox-checked-border-color);
-            background: var(--p-checkbox-checked-background);
-        }
-        .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
-            border-color: var(--p-checkbox-checked-hover-border-color);
-            background: var(--p-checkbox-checked-hover-background);
-        }
-        .p-checkbox-false:has(.p-checkbox.p-disabled) .p-checkbox-false-icon {
-            color: var(--p-checkbox-icon-disabled-color);
-        }
+  .p-checkbox-false {
+    .p-checkbox-box {
+      border-color: var(--p-checkbox-checked-border-color);
+      background: var(--p-checkbox-checked-background);
     }
+    .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
+      border-color: var(--p-checkbox-checked-hover-border-color);
+      background: var(--p-checkbox-checked-hover-background);
+    }
+    .p-checkbox-false:has(.p-checkbox.p-disabled) .p-checkbox-false-icon {
+      color: var(--p-checkbox-icon-disabled-color);
+    }
+  }
 }
 
 .p-checkbox-false-icon {
-    position: absolute; 
-    top: 3px; 
-    left: 2.7px; 
-    font-size: 12.25px; 
-    color: var(--p-checkbox-icon-checked-color);
-}
+  position: absolute;
+  top: 3px;
+  left: 2.7px;
+  font-size: 12.25px;
+  color: var(--p-checkbox-icon-checked-color);
+}

package/styles/styles/layout/_content.scss

@@ -1,14 +1,14 @@
-@use './_variables' as *;
+@use "./_variables" as *;
 
 .layout-main-container {
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-    justify-content: space-between;
-    padding: 7rem 2rem 2rem 4rem;
-    transition: margin-left $transitionDuration;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  justify-content: space-between;
+  padding: 7rem 2rem 2rem 4rem;
+  transition: margin-left $transitionDuration;
 }
 
 .layout-main {
-    flex: 1 1 auto;
+  flex: 1 1 auto;
 }

package/styles/styles/layout/_footer.scss

@@ -1,11 +1,11 @@
-@use './_variables' as *;
+@use "./_variables" as *;
 
 .layout-footer {
-    transition: margin-left $transitionDuration;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-top: 1.5rem;
-    border-top: 1px solid var(--surface-border);
-    margin-top: 2rem;
+  transition: margin-left $transitionDuration;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--surface-border);
+  margin-top: 2rem;
 }

package/styles/styles/layout/_main.scss

@@ -1,35 +1,35 @@
-@use './_variables' as *;
+@use "./_variables" as *;
 
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 html {
-    height: 100%;
-    font-size: $scale;
-    scroll-behavior: smooth;
+  height: 100%;
+  font-size: $scale;
+  scroll-behavior: smooth;
 }
 
 body {
-    font-family: var(--font-family);
-    color: var(--p-text-color);
-    background-color: var(--p-surface-50);
-    margin: 0;
-    padding: 0;
-    min-height: 100%;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  font-family: var(--font-family);
+  color: var(--p-text-color);
+  background-color: var(--p-surface-50);
+  margin: 0;
+  padding: 0;
+  min-height: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 .dark body {
-    background-color: var(--p-surface-950);
+  background-color: var(--p-surface-950);
 }
 
 a {
-    text-decoration: none;
-    color: var(--p-primary-color);
+  text-decoration: none;
+  color: var(--p-primary-color);
 }
 
 .layout-wrapper {
-    min-height: 100vh;
-}
+  min-height: 100vh;
+}

package/styles/styles/layout/_menu.scss

@@ -1,138 +1,145 @@
-@use './_variables' as *;
-@use './_mixins' as *;
+@use "./_variables" as *;
+@use "./_mixins" as *;
 
 .layout-sidebar {
-    position: fixed;
-    width: 300px;
-    height: calc(100vh - 9rem);
-    z-index: 999;
-    overflow-y: auto;
-    user-select: none;
-    top: 7rem;
-    left: 2rem;
-    transition: transform $transitionDuration, left $transitionDuration;
-    background-color: var(--p-content-background);
-    border-radius: var(--p-content-border-radius);
-    padding: 0.5rem 1.5rem;
-    box-shadow: 0px 3px 5px rgba(0, 0, 0, .02), 0px 0px 2px rgba(0, 0, 0, .05), 0px 1px 4px rgba(0, 0, 0, .08);
+  position: fixed;
+  width: 300px;
+  height: calc(100vh - 9rem);
+  z-index: 999;
+  overflow-y: auto;
+  user-select: none;
+  top: 7rem;
+  left: 2rem;
+  transition:
+    transform $transitionDuration,
+    left $transitionDuration;
+  background-color: var(--p-content-background);
+  border-radius: var(--p-content-border-radius);
+  padding: 0.5rem 1.5rem;
+  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-menu {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-
-    .layout-root-menuitem {
-        >.layout-menuitem-root-text {
-            font-size: .857rem;
-            text-transform: uppercase;
-            font-weight: 700;
-            color: var(--surface-900);
-            margin: .75rem 0;
-        }
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+
+  .layout-root-menuitem {
+    > .layout-menuitem-root-text {
+      font-size: 0.857rem;
+      text-transform: uppercase;
+      font-weight: 700;
+      color: var(--surface-900);
+      margin: 0.75rem 0;
+    }
 
-        >a {
-            display: none;
-        }
+    > a {
+      display: none;
     }
+  }
 
-    a {
-        user-select: none;
+  a {
+    user-select: none;
 
-        &.active-menuitem {
-            >.layout-submenu-toggler {
-                transform: rotate(-180deg);
-            }
-        }
+    &.active-menuitem {
+      > .layout-submenu-toggler {
+        transform: rotate(-180deg);
+      }
     }
+  }
 
-    li.active-menuitem {
-        >a {
-            .layout-submenu-toggler {
-                transform: rotate(-180deg);
-            }
-        }
+  li.active-menuitem {
+    > a {
+      .layout-submenu-toggler {
+        transform: rotate(-180deg);
+      }
     }
+  }
 
-    ul {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
 
-        a {
-            display: flex;
-            align-items: center;
-            position: relative;
-            outline: 0 none;
-            color: var(--p-text-color);
-            cursor: pointer;
-            padding: .75rem 1rem;
-            border-radius: var(--p-content-border-radius);
-            transition: background-color $transitionDuration, box-shadow $transitionDuration;
-
-            .layout-menuitem-icon {
-                margin-right: .5rem;
-            }
+    a {
+      display: flex;
+      align-items: center;
+      position: relative;
+      outline: 0 none;
+      color: var(--p-text-color);
+      cursor: pointer;
+      padding: 0.75rem 1rem;
+      border-radius: var(--p-content-border-radius);
+      transition:
+        background-color $transitionDuration,
+        box-shadow $transitionDuration;
+
+      .layout-menuitem-icon {
+        margin-right: 0.5rem;
+      }
+
+      .layout-submenu-toggler {
+        font-size: 75%;
+        margin-left: auto;
+        transition: transform $transitionDuration;
+      }
+
+      &.active-route {
+        font-weight: 700;
+        color: var(--p-primary-color);
+      }
+
+      &:hover {
+        background-color: var(--p-content-hover-background);
+      }
+
+      &:focus {
+        @include focused-inset();
+      }
+    }
 
-            .layout-submenu-toggler {
-                font-size: 75%;
-                margin-left: auto;
-                transition: transform $transitionDuration;
-            }
+    ul {
+      overflow: hidden;
+      border-radius: var(--p-content-border-radius);
 
-            &.active-route {
-                font-weight: 700;
-                color: var(--p-primary-color);
-            }
+      li {
+        a {
+          margin-left: 1rem;
+        }
 
-            &:hover {
-                background-color: var(--p-content-hover-background);
-            }
+        li {
+          a {
+            margin-left: 2rem;
+          }
 
-            &:focus {
-                @include focused-inset();
+          li {
+            a {
+              margin-left: 2.5rem;
             }
-        }
-
-        ul {
-            overflow: hidden;
-            border-radius: var(--p-content-border-radius);
 
             li {
+              a {
+                margin-left: 3rem;
+              }
+
+              li {
                 a {
-                    margin-left: 1rem;
+                  margin-left: 3.5rem;
                 }
 
                 li {
-                    a {
-                        margin-left: 2rem;
-                    }
-
-                    li {
-                        a {
-                            margin-left: 2.5rem;
-                        }
-
-                        li {
-                            a {
-                                margin-left: 3rem;
-                            }
-
-                            li {
-                                a {
-                                    margin-left: 3.5rem;
-                                }
-
-                                li {
-                                    a {
-                                        margin-left: 4rem;
-                                    }
-                                }
-                            }
-                        }
-                    }
+                  a {
+                    margin-left: 4rem;
+                  }
                 }
+              }
             }
+          }
         }
+      }
     }
-}
+  }
+}

package/styles/styles/layout/_mixins.scss

@@ -1,13 +1,13 @@
 @mixin focused() {
-    outline: 0 none;
-    outline-offset: 0;
-    transition: box-shadow .2s;
-    box-shadow: 0 0 0 0.2rem var(--p-primary-400);
+  outline: 0 none;
+  outline-offset: 0;
+  transition: box-shadow 0.2s;
+  box-shadow: 0 0 0 0.2rem var(--p-primary-400);
 }
 
 @mixin focused-inset() {
-    outline: 0 none;
-    outline-offset: 0;
-    transition: box-shadow .2s;
-    box-shadow: inset 0 0 0 0.2rem var(--p-primary-400);
+  outline: 0 none;
+  outline-offset: 0;
+  transition: box-shadow 0.2s;
+  box-shadow: inset 0 0 0 0.2rem var(--p-primary-400);
 }

package/styles/styles/layout/_preloading.scss

@@ -1,47 +1,48 @@
 .preloader {
-    position: fixed;
-    z-index: 999999;
-    background: #edf1f5;
-    width: 100%;
-    height: 100%;
+  position: fixed;
+  z-index: 999999;
+  background: #edf1f5;
+  width: 100%;
+  height: 100%;
 }
 .preloader-content {
-    border: 0 solid transparent;
-    border-radius: 50%;
-    width: 150px;
-    height: 150px;
-    position: absolute;
-    top: calc(50vh - 75px);
-    left: calc(50vw - 75px);
+  border: 0 solid transparent;
+  border-radius: 50%;
+  width: 150px;
+  height: 150px;
+  position: absolute;
+  top: calc(50vh - 75px);
+  left: calc(50vw - 75px);
 }
 
-.preloader-content:before, .preloader-content:after{
-    content: '';
-    border: 1em solid var(--p-primary-color);
-    border-radius: 50%;
-    width: inherit;
-    height: inherit;
-    position: absolute;
-    top: 0;
-    left: 0;
-    animation: loader 2s linear infinite;
-    opacity: 0;
+.preloader-content:before,
+.preloader-content:after {
+  content: "";
+  border: 1em solid var(--p-primary-color);
+  border-radius: 50%;
+  width: inherit;
+  height: inherit;
+  position: absolute;
+  top: 0;
+  left: 0;
+  animation: loader 2s linear infinite;
+  opacity: 0;
 }
 
-.preloader-content:before{
-    animation-delay: 0.5s;
+.preloader-content:before {
+  animation-delay: 0.5s;
 }
 
-@keyframes loader{
-    0%{
-        transform: scale(0);
-        opacity: 0;
-    }
-    50%{
-        opacity: 1;
-    }
-    100%{
-        transform: scale(1);
-        opacity: 0;
-    }
+@keyframes loader {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
 }