@visns-studio/visns-components 4.10.48 → 5.0.1-8.1

package/src/components/crm/auth/styles/Login.module.scss

@@ -1,21 +1,22 @@
 .formItem {
     width: 50%;
-    padding: 0.5em;
     position: relative;
     box-sizing: border-box;
 
     .fi__label {
         position: relative;
+        display: flex;
+        align-items: center;
     }
 
     .fi__span {
         position: absolute;
         transition: all 200ms;
-        opacity: 0.8;
+        opacity: 1;
         left: 0;
-        padding: 19px 20px;
         transform-origin: top left;
         cursor: text;
+        padding: 0 1rem;
     }
 
     .fi__div {
@@ -23,14 +24,14 @@
         opacity: 0.8;
         left: 0;
         padding: 19px 13px;
-        border-radius: var(--br);
-        border: 1px solid rgba(var(--paragraph-color-rgb), 0.15);
+        border-radius: var(--radius);
+        border: 1px solid rgba(var(--paragraph-rgb), 0.15);
         box-shadow: none;
     }
 
     .fi__toggle {
         width: max-content;
-        padding: 0px 10px 0px 0;
+        padding: 0 10px 0 0;
         box-sizing: border-box;
         display: inline;
     }
@@ -43,45 +44,43 @@
     }
 }
 
-.fwItem {
-    flex-basis: 100%;
+.fwItem,
+.fwBuilderItem {
+    grid-column: 1 / -1;
+    width: 100%;
 }
 
-.lastItem {
-    .btn {
-        width: 100%;
-    }
+.lastItem .btn {
+    width: 100%;
 }
 
 .loginlogo {
     display: block;
     width: 100%;
-    max-width: 140px;
+    max-width: 200px;
     height: auto;
     margin: 0 auto;
     padding-bottom: 1rem;
 }
 
 .logincontainer {
+    width: 100%;
     min-height: 100vh;
-    flex-grow: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    align-content: center;
-    flex-wrap: wrap;
+    display: grid;
+    place-items: center;
+    padding: 1rem;
 }
 
 .login {
     width: 35rem;
-    height: auto;
     padding: 1rem;
     margin: 0;
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 0.5rem;
 
     > .formItem {
-        padding: 0.25em 0;
+        padding: 0;
 
         small {
             position: absolute;
@@ -94,12 +93,11 @@
     }
 
     > .loginitem {
-        width: 100%;
+        grid-column: 1 / -1;
         padding: 0.25em 0;
 
         label {
             width: 100%;
-            padding-bottom: 0.25rem;
         }
 
         button {
@@ -108,27 +106,28 @@
     }
 }
 
-.forgotten {
-    span {
-        display: block;
-        text-align: center;
-        color: var(--paragraph-color);
-        padding: 1rem 0;
+.forgotten span {
+    display: block;
+    text-align: center;
+    color: var(--paragraph-color);
+    padding: 1rem 0;
 
-        a {
-            color: var(--highlight-color);
-            text-decoration: none;
-        }
+    a {
+        color: var(--secondary-color);
+        text-decoration: none;
     }
 }
 
 .lcontainer {
-    --sidebar-width: 35%;
     min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .lwrap {
-    display: flex;
+    display: grid;
+    grid-template-columns: var(--sidebar-width) 1fr;
 }
 
 .aside {
@@ -139,14 +138,6 @@
     width: var(--sidebar-width);
 }
 
-.fwItem {
-    flex-basis: 100%;
-}
-
-.lastItem .btn {
-    width: 100%;
-}
-
 .btn {
     width: max-content;
     display: inline-block;
@@ -154,51 +145,30 @@
     padding: 0.65rem 1rem;
     cursor: pointer;
     font-size: 1rem;
-    color: var(--tertiary-color);
+    color: var(--third-color);
     text-decoration: none;
     overflow: hidden;
     background: var(--primary-color);
-    border: 1px solid rgba(var(--primary-color--rgb), 1.1);
-    border-radius: var(--br);
+    border: 1px solid rgba(var(--primary-rgb), 1.1);
+    border-radius: var(--radius);
     outline: none;
-    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1) 0s;
-    font-size: 1.25em;
+    transition: all 0.2s cubic-bezier(0.85, 0, 0.15, 1);
+
+    &:hover {
+        color: var(--bg-color);
+        background: var(--secondary-color);
+        border: 1px solid rgba(var(--secondary-rgb), 1.05);
+    }
 }
 
 input:not(:placeholder-shown) + .fi__span,
 textarea:not(:placeholder-shown) + .fi__span,
 select:not(:placeholder-shown) + .fi__span {
-    transform: translateY(-40%) translateX(10px) scale(0.75);
+    transform: translateY(-135%) translateX(10px) scale(0.9);
     opacity: 1;
-    padding: 0 4px;
-    background: var(--tertiary-color);
-    font-weight: 300;
-}
-
-@media (max-width: 1024px) {
-    body {
-        font-size: 85%;
-    }
-
-    .aside {
-        width: 100%;
-        transform: translateX(-2000px);
-        transition: all 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
-        will-change: transform;
-        z-index: 500;
-    }
-
-    .logincontainer {
-        min-height: 100vh;
-        flex-grow: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        align-content: center;
-        flex-wrap: wrap;
-    }
-
-    .login {
-        width: 95%;
-    }
+    padding: 0;
+    background: var(--bg-color);
+    font-weight: 400;
+    transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
+    color: rgba(var(--paragraph-rgb), 0.65) !important;
 }

package/src/components/crm/auth/styles/Profile.module.scss

@@ -3,11 +3,11 @@
 input:not(:placeholder-shown) + .fi__span,
 textarea:not(:placeholder-shown) + .fi__span,
 select:not(:placeholder-shown) + .fi__span {
-    transform: translateY(-40%) translateX(10px) scale(0.75);
+    transform: translateY(-40%) translateX(10px) scale(0.9);
     opacity: 1;
-    padding: 0 4px;
+    padding: 0 0.25rem;
     background: var(--tertiary-color);
-    font-weight: 300;
+    font-weight: 400;
     border-radius: var(--br);
 }
 
@@ -41,42 +41,12 @@ select:not(:placeholder-shown) + .fi__span {
     box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
 }
 
-.crmtitle {
-    border: none;
-    min-height: auto;
-    padding: 10px 20px;
-    margin: 0;
-    background: var(--tertiary-color);
-    border-radius: var(--br);
-    border: 1px solid rgba(var(--item-color-rgb), 1.15);
-    position: relative;
-}
-
-.crmtitle h1 {
-    font-weight: 700;
-    font-size: 1.45em;
-    margin: 0;
-    padding: 0.65rem 0;
-}
-
-.crmtitle h1 a {
-    text-decoration: none;
-    color: rgba(var(--secondary-color-rgb), 1.1);
-    font-weight: 300;
-}
-
-.crmtitle h1 svg {
-    color: rgba(var(--primary-color-rgb), 0.25);
-    position: relative;
-    top: 2px;
-    margin: 0 0.25rem;
-}
-
 .grid__subrow {
     width: 100%;
     display: flex;
     flex-wrap: wrap;
     height: auto;
+    gap: 0.35rem;
 }
 
 .grid__subnav {
@@ -86,35 +56,127 @@ select:not(:placeholder-shown) + .fi__span {
     border: 1px solid var(--border-color);
     box-sizing: border-box;
     padding: 5px;
-    margin: 5px;
+    margin: 0.5rem 0;
     height: auto;
 }
 
-.grid__subcontent {
-    flex: 0 1 85%;
+.grid__subnav {
+    flex: 1;
     background: white;
     border-radius: var(--br);
-    border: 1px solid var(--border-color);
     box-sizing: border-box;
+    padding: 5px;
+    margin: 8px 0;
+    height: auto;
+    box-shadow: 0 4px 0 rgba(var(--primary-color-rgb), 0.05);
+}
+
+.grid__subnav > ul {
+    width: 100%;
+    list-style: none;
     padding: 0;
-    margin: 5px;
+    margin: 0;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.grid__subnav > ul li {
+    width: 100%;
+    margin-bottom: 3px;
+}
+
+.grid__subnav > ul li a {
+    width: 100%;
+    padding: 0.35rem 1rem;
+    box-sizing: border-box;
+    display: block;
+    text-decoration: none;
+    background: rgba(var(--primary-rgb), 0.05);
+    color: var(--primary-color);
+    border-radius: 5px;
+    transition: background 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
+    outline: none;
+    cursor: pointer;
+}
+
+.grid__subnav > ul li:hover a {
+    background: var(--primary-color);
+    color: var(--tertiary-color);
+}
+
+.grid__subnav > ul li .subactive {
+    font-weight: 700;
+    background: var(--primary-color);
+    color: var(--tertiary-color);
+}
+
+.grid__subcontent {
+    flex: 0 1 80%;
+    background: var(--tertiary-color);
+    border-radius: var(--br);
+    border: 1px solid rgba(var(--primary-rgb), 0.05);
+    box-sizing: border-box;
+    padding: 2px;
+    margin: 8px 0;
     height: auto;
     position: relative;
 }
 
+.grid__subcontent h2 {
+    color: var(--primary-color);
+    font-size: 1.35em;
+    padding: 0;
+    margin: 0 0 30px 0;
+}
+
 .gridtxt__header {
     width: 100%;
     display: block;
-    background: var(--border-color);
+    background: rgba(var(--primary-rgb), 0.05);
     box-sizing: border-box;
     padding: 10px 20px;
-    border-top-left-radius: var(--br);
-    border-top-right-radius: var(--br);
+    border-radius: var(--br);
     margin-bottom: 0;
     font-weight: 700;
     text-align: center;
     color: var(--paragraph-color);
-    position: relative;
+}
+
+.gridtxt__header span {
+    font-weight: 700;
+}
+
+.gridtxt > ul {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: row;
+    flex-wrap: wrap;
+    list-style: none;
+    box-sizing: border-box;
+    padding: 0.85rem;
+    margin: 0;
+}
+
+.gridtxt > ul li {
+    flex: 0 0 calc(50% - 10px);
+    padding: 0.85rem;
+    box-sizing: border-box;
+    border: 1px solid rgba(var(--primary-rgb), 0.095);
+    color: var(--paragraph-color);
+    background: rgba(var(--primary-rgb), 0.015);
+    margin: 5px;
+    border-radius: var(--br);
+    line-height: 1.45;
+    font-size: 1rem;
+}
+
+.gridtxt > ul .fw-grid-item {
+    flex: 0 0 calc(100% - 10px);
+}
+
+.gridtxt > ul .notecolor {
+    border: 1px solid var(--secondary-color);
 }
 
 .formcontainer {
@@ -143,7 +205,7 @@ select:not(:placeholder-shown) + .fi__span {
 .fi__span {
     position: absolute;
     transition: all 200ms;
-    opacity: 0.8;
+    opacity: 1;
     left: 0;
     padding: 19px 20px;
     transform-origin: top left;
@@ -233,3 +295,47 @@ select:not(:placeholder-shown) + .fi__span {
 .inputError {
     border-color: red !important;
 }
+
+
+.crmtitle {
+    min-height: auto;
+    padding: 1rem;
+    margin: 0;
+    background: white;
+    border-radius: var(--br);
+    border: 1px solid rgba(var(--primary-rgb), 0.15);
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    h1 {
+        font-weight: 700;
+        font-size: 1.25rem;
+        margin: 0;
+        padding: 0;
+        line-height: 1;
+
+        a {
+            text-decoration: none;
+            color: var(--secondary-color);
+            font-weight: 400;
+        }
+
+        svg {
+            color: rgba(var(--primary-color-rgb), 0.5);
+            position: relative;
+            top: 2px;
+            margin: 0 0.25rem;
+        }
+    }
+
+    .titleInfo {
+        width: max-content;
+    }
+    
+    .titleInfo span {
+        font-size: 0.875em;
+        color: rgba(var(--paragraph-color-rgb), 0.65);
+    }
+}

package/src/components/crm/auth/styles/Reset.module.scss

@@ -1,11 +1,17 @@
 .formItem {
     width: 50%;
-    padding: 0.5em;
     position: relative;
     box-sizing: border-box;
 
+    h1 {
+        text-align: center;
+        font-size: 1.25rem;
+    }
+
     .fi__label {
         position: relative;
+        display: flex;
+        align-items: center;
     }
 
     .fi__span {
@@ -13,9 +19,9 @@
         transition: all 200ms;
         opacity: 0.8;
         left: 0;
-        padding: 19px 20px;
         transform-origin: top left;
         cursor: text;
+        padding: 0 1rem;
     }
 
     .fi__div {
@@ -23,14 +29,14 @@
         opacity: 0.8;
         left: 0;
         padding: 19px 13px;
-        border-radius: var(--br);
-        border: 1px solid rgba(var(--paragraph-color-rgb), 0.15);
+        border-radius: var(--radius);
+        border: 1px solid rgba(var(--paragraph-rgb), 0.15);
         box-shadow: none;
     }
 
     .fi__toggle {
         width: max-content;
-        padding: 0px 10px 0px 0;
+        padding: 0 10px 0 0;
         box-sizing: border-box;
         display: inline;
     }
@@ -43,8 +49,10 @@
     }
 }
 
-.fwItem {
-    flex-basis: 100%;
+.fwItem,
+.fwBuilderItem {
+    grid-column: 1 / -1;
+    width: 100%;
 }
 
 .lastItem {
@@ -72,16 +80,33 @@
     flex-wrap: wrap;
 }
 
+.loginlogo {
+    display: block;
+    width: 100%;
+    max-width: 200px;
+    height: auto;
+    margin: 0 auto;
+    padding-bottom: 1rem;
+}
+
+.logincontainer {
+    width: 100%;
+    min-height: 100vh;
+    display: grid;
+    place-items: center;
+    padding: 1rem;
+}
+
 .login {
     width: 35rem;
-    height: auto;
     padding: 1rem;
     margin: 0;
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 0.5rem;
 
     > .formItem {
-        padding: 0.25em 0;
+        padding: 0;
 
         small {
             position: absolute;
@@ -94,12 +119,11 @@
     }
 
     > .loginitem {
-        width: 100%;
+        grid-column: 1 / -1;
         padding: 0.25em 0;
 
         label {
             width: 100%;
-            padding-bottom: 0.25rem;
         }
 
         button {
@@ -108,27 +132,28 @@
     }
 }
 
-.forgotten {
-    span {
-        display: block;
-        text-align: center;
-        color: var(--paragraph-color);
-        padding: 1rem 0;
+.forgotten span {
+    display: block;
+    text-align: center;
+    color: var(--paragraph-color);
+    padding: 1rem 0;
 
-        a {
-            color: var(--highlight-color);
-            text-decoration: none;
-        }
+    a {
+        color: var(--secondary-color);
+        text-decoration: none;
     }
 }
 
 .lcontainer {
-    --sidebar-width: 35%;
     min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .lwrap {
-    display: flex;
+    display: grid;
+    grid-template-columns: var(--sidebar-width) 1fr;
 }
 
 .aside {
@@ -139,14 +164,6 @@
     width: var(--sidebar-width);
 }
 
-.fwItem {
-    flex-basis: 100%;
-}
-
-.lastItem .btn {
-    width: 100%;
-}
-
 .btn {
     width: max-content;
     display: inline-block;
@@ -168,9 +185,10 @@
 input:not(:placeholder-shown) + .fi__span,
 textarea:not(:placeholder-shown) + .fi__span,
 select:not(:placeholder-shown) + .fi__span {
-    transform: translateY(-40%) translateX(10px) scale(0.75);
+    transform: translateY(-110%) translateX(10px) scale(0.75);
     opacity: 1;
-    padding: 0 4px;
-    background: var(--tertiary-color);
+    padding: 0;
+    background: var(--bg-color);
     font-weight: 300;
-}
+    transition: all 0.5s cubic-bezier(0.5, 0.5, 0, 1);
+}