npm - @leapdev/gui - Versions diffs - 0.2.252 → 0.2.255 - Mend

@leapdev/gui 0.2.252 → 0.2.255

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/css/4d-leap.css +1 -1
package/dist/css/auth-leap-addin.css +1 -1
package/dist/css/auth-leap-desktop.css +1 -1
package/dist/css/auth-leap-web.css +1 -1
package/dist/index.html +2 -2
package/dist/scss/4d/_content-app.scss +7 -6
package/dist/scss/auth/theme/components/_icons.scss +39 -0
package/dist/scss/auth/theme/components/_toastr.scss +71 -17
package/dist/scss/auth/theme/features/_auth.scss +171 -41
package/dist/scss/product/4d-leap.scss +1 -1
package/package.json +1 -1

package/dist/scss/auth/theme/components/_icons.scss CHANGED Viewed

@@ -25,3 +25,42 @@ $icon-sizes: (
 @include icon-sizing($icon-sizes);
+$icon_dimension: 1.5rem;
+$microsoft-icon: str-replace(url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI0YzRjNGMyIgZD0iTTMgM2gyMnYyMkgzVjNaIi8+PHBhdGggZmlsbD0iI0YzNTMyNSIgZD0iTTMuOTU3IDMuOTU3aDkuNTY1djkuNTY1SDMuOTU3VjMuOTU3WiIvPjxwYXRoIGZpbGw9IiM4MUJDMDYiIGQ9Ik0xNC40NzggMy45NTdoOS41NjZ2OS41NjVoLTkuNTY2VjMuOTU3WiIvPjxwYXRoIGZpbGw9IiMwNUE2RjAiIGQ9Ik0zLjk1NyAxNC40NzhoOS41NjV2OS41NjZIMy45NTd2LTkuNTY2WiIvPjxwYXRoIGZpbGw9IiNGRkJBMDgiIGQ9Ik0xNC40NzggMTQuNDc4aDkuNTY2djkuNTY2aC05LjU2NnYtOS41NjZaIi8+PC9zdmc+"), "#", "%23");
+$google-icon: str-replace(url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNC41NiAxNC4yNUMyNC41NiAxMy40NyAyNC40OSAxMi43MiAyNC4zNiAxMkgxNFYxNi4yNTVIMTkuOTJDMTkuNjY1IDE3LjYzIDE4Ljg5IDE4Ljc5NSAxNy43MjUgMTkuNTc1VjIyLjMzNUgyMS4yOEMyMy4zNiAyMC40MiAyNC41NiAxNy42IDI0LjU2IDE0LjI1WiIgZmlsbD0iIzQyODVGNCIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE0IDI1QzE2Ljk3IDI1IDE5LjQ2IDI0LjAxNSAyMS4yOCAyMi4zMzVMMTcuNzI1IDE5LjU3NUMxNi43NCAyMC4yMzUgMTUuNDggMjAuNjI1IDE0IDIwLjYyNUMxMS4xMzUgMjAuNjI1IDguNzEwMDEgMTguNjkgNy44NDUwMSAxNi4wOUg0LjE3MDAxVjE4Ljk0QzUuOTgwMDEgMjIuNTM1IDkuNzAwMDEgMjUgMTQgMjVaIiBmaWxsPSIjMzRBODUzIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNy44NDUgMTYuMDlDNy42MjUgMTUuNDMgNy41IDE0LjcyNSA3LjUgMTRDNy41IDEzLjI3NSA3LjYyNSAxMi41NyA3Ljg0NSAxMS45MVY5LjA2SDQuMTdDMy40MjUgMTAuNTQ1IDMgMTIuMjI1IDMgMTRDMyAxNS43NzUgMy40MjUgMTcuNDU1IDQuMTcgMTguOTRMNy44NDUgMTYuMDlaIiBmaWxsPSIjRkJCQzA1Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTQgNy4zNzVDMTUuNjE1IDcuMzc1IDE3LjA2NSA3LjkzIDE4LjIwNSA5LjAyTDIxLjM2IDUuODY1QzE5LjQ1NSA0LjA5IDE2Ljk2NSAzIDE0IDNDOS43MDAwMSAzIDUuOTgwMDEgNS40NjUgNC4xNzAwMSA5LjA2TDcuODQ1MDEgMTEuOTFDOC43MTAwMSA5LjMxIDExLjEzNSA3LjM3NSAxNCA3LjM3NVoiIGZpbGw9IiNFQTQzMzUiLz4KPC9zdmc+Cg=="), "#", "%23");
+$leap_domain_icon: str-replace(url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yNSAzSDNWMjVIMjVWM1pNMTYuMDgwMyAxMy41OTYzTDEyLjg2NjMgMTIuMzUxN0wxOS44NzExIDEzLjQ4MzRMMjAuOTc0NiAxOS44NjY5TDIyIDEwLjY0NDFMMTQuNjI4OSA3TDEyLjg2NjMgMTIuMzUxN0wxMi4zMzE3IDEzLjk3NjdMNiAyMUwxNC41OTQ2IDE2LjY2OUwxNi4wODAzIDEzLjU5NjNaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K"), "#", "%23");
+$external_user_icon: str-replace(url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNy4xMjU3IDI1QzE1Ljg0NzYgMjIuMzg5NSAxNSAxOC45NDQ3IDE1IDE1LjVDMTUuMzE1OCAxNS4zMTA1IDE1LjY4ODYgMTUuMDc1NCAxNi4wOTc4IDE0LjgxNzRDMTYuODcxNCAxNC4zMjk2IDE3Ljc3NTIgMTMuNzU5NyAxOC42NzAyIDEzLjI2MDZDMTkuMTMwOCAxMi4xOTc3IDE4Ljg4MjUgMTEuMzA5IDE4LjcxMTQgMTAuOTAwNkMxOS44Njg4IDguMjc0ODIgMTguNDY4IDYuMTAyMzMgMTguMTcwNyA1LjY4NzJDMTcuNDE3NyAzLjQ2ODMzIDE1LjgxMDIgMyAxNC41ODg0IDNDMTMuMTQgMyAxMS44NTI5IDMuNjUwMiAxMS44MzI1IDMuNjYyMDJDMTAuNDkyNSA0LjIxMDgzIDkuNTc4MTEgNS4wODY1NiA5LjExNjA0IDYuMjY0NjVDOC4zNjk2MyA4LjE2NzA2IDkuMDQ2NzMgMTAuMjU2MyA5LjI5MTk4IDEwLjg5NzlDOC42OTA4NSAxMi4zODQzIDkuMzgzOTUgMTMuMzk5MSA5LjQxNTA1IDEzLjQ0MzdMOS41MDgzNSAxMy41NDE0QzkuNTI0MzUgMTMuNTUzMyAxMS4xMDg3IDE0LjgwNjggMTEuMTA4NyAxNi44MTU2QzExLjEwODcgMTguNzYxMiAxMC4wNjY4IDE5LjExNzMgOC43NDY4MyAxOS41Njc0TDguNTc0IDE5LjYyNTZDNy4wODkxNyAyMC4xMjUzIDQgMjEuMTY1MiA0IDI0LjU0NTNWMjVIMTcuMTI1N1oiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMjIgMjhWMjYuNUMyMiAyNy43MyAyMiAyOCAyMiAyOEMxOSAyOCAxNiAyMiAxNiAxNkMxNy41IDE1LjEgMjAuNSAxMyAyMiAxM0MyMy41IDEzIDI2LjUgMTUuMSAyOCAxNkMyOCAyMiAyNSAyOCAyMiAyOFpNMjIgMjYuNUMyMiAyNS40ODQyIDIyIDIzLjgxMzggMjIgMjEuMUwyNS44NzUyIDIxLjEwNjRDMjYuMjExOCAxOS44ODQ0IDI2LjQzMjUgMTguNTQ1NCAyNi40ODM4IDE3LjE4OTlDMjYuNDkxNCAxNi45ODkyIDI2LjUgMTYuODgxMyAyNi41IDE2Ljg4MTNDMjYuNSAxNi44ODEzIDI1LjI1NTIgMTYuMDY3NiAyNC45OTYxIDE1LjkwMjhDMjQuNzI4OCAxNS43MzMgMjQuNDgzIDE1LjU4MTQgMjQuMjQ5IDE1LjQ0MzFDMjMuMjE4NSAxNC44MzM3IDIyLjQ0MzIgMTQuNTAyMiAyMiAxNC41VjIxLjEzMjVDMjAuNzkwNyAyMS4xMzI1IDE5LjIzNTggMjEuMTMyNSAxOC4xMjM0IDIxLjEzMjVDMTguOTY5NSAyNC4xODUgMjAuNTM4OSAyNi41IDIxLjk5NTcgMjYuNUwyMiAyNi41WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg=="), "#", "%23");
+*[class^='auth_icon'],
+*[class*=' auth_icon'] {
+  width: $icon_dimension;
+  height: $icon_dimension;
+  margin-top: -0.0625rem;
+  margin-right: 1rem;
+  &::before {
+    width: $icon_dimension;
+    height: $icon_dimension;
+    display: inline-block;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    content: '';
+  }
+}
+.auth_icon {
+  &_microsoft::before {
+    background-image: $microsoft-icon;
+  }
+  &_google::before {
+    background-image: $google-icon;
+  }
+  &_leap::before {
+    background-image: $leap_domain_icon;
+  }
+  &_external_user::before {
+    background-image: $external_user_icon;
+  }
+}

package/dist/scss/auth/theme/components/_toastr.scss CHANGED Viewed

@@ -1,24 +1,78 @@
-#toast-container {
-  > .toast {
-    padding: 1rem 2rem !important;
-    background-color: white !important;
-    color: #e63935 !important;
-    border-radius: var(--leap-border-radius) !important;
-    border: 1px solid #ebebeb;
-    margin-bottom: 0;
-    box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.10) !important;
+.toast, #toast-container {
+  padding: 1.25rem 2.75rem 1.25rem 1.25rem;
+  background-color: white !important;
+  border-radius: var(--leap-border-radius) !important;
+  border: 1px solid #ebebeb;
+  margin-bottom: 0;
+  box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.10) !important;
+  transition: box-shadow 0.15s ease-in-out;
+  @media screen and (min-width: 768px) {
+    width: 20rem;
+  }
+  &:hover {
+    box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.18) !important;
     transition: box-shadow 0.15s ease-in-out;
+  }
-    &:hover {
-      box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.18) !important;
-      transition: box-shadow 0.15s ease-in-out;
+  > .toast-title {
+    text-transform: uppercase;
+    font-weight: 600;
+    font-size: 1rem;
+    margin-bottom: 0.25rem;
+  }
+  &.toast-success {
+    >.toast-title {
+      color: $primary;
+    }
+    >.toast-close-button {
+      background-color: $primary;
+      color: #fff;
+      &:hover {
+        background-color: darken($primary, 5%);
+      }
+    }
+  }
+  &.toast-error {
+    color: $danger !important;
+    // > .toast-title {}
+    >.toast-close-button {
+      background-color: $danger;
+      color: #fff;
+      &:hover {
+        background-color: darken($danger, 5%);
+      }
     }
+  }
-    > .toast-title {
-      text-transform: uppercase;
-      color: #e63935 !important;
-      font-weight: 600;
-      font-size: 1rem;
+  .toast-message {
+    max-width: 12.5rem;
+    min-width: 12.5rem;
+  }
+  button.toast-close-button {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background-color: #f7f7f7;
+    color: var(--leap-label-color);
+    border-radius: var(--leap-border-radius);
+    border: none;
+    font-size: 1.4rem !important;
+    font-weight: normal;
+    line-height: 1;
+    padding: 0.0625rem 0.375rem !important;
+    transition: all .15s ease-in-out;
+    opacity: 1;
+    &:hover {
+      transition: all .15s ease-in-out;
+      opacity: 1;
     }
   }
 }

package/dist/scss/auth/theme/features/_auth.scss CHANGED Viewed

@@ -13,7 +13,7 @@ html {
     padding-right: 1rem;
     @media screen and (min-height: 850px) {
-        background-image: url(https://unpkg.com/@leapdev/gui@latest/dist/images/leap-auth/auth-bg.png);
+        background-image: url(/img/auth-bg.png), url('https://unpkg.com/@leapdev/gui@0.2.254/dist/images/leap-auth/auth-bg.png');
         background-position: bottom left;
         background-repeat: no-repeat;
         background-size: 1194px;
@@ -21,18 +21,19 @@ html {
     > .container {
         align-self: center;
-        display: flex;
     }
 }
 .auth {
     margin: 0 auto;
-    padding-bottom: 16vh;
+    padding-bottom: 23vh;
     height: auto;
+    max-width: 24.25rem;
     @media screen and (min-width: 577px) {
-        max-width: 21.25rem;
+        min-width: 21.25rem;
     }
     @media screen and (max-height: 849px) {
@@ -41,6 +42,7 @@ html {
     &_container {
         margin: auto;
+        min-height: 20vh;
     }
     &_logo {
@@ -52,7 +54,6 @@ html {
         @media screen and (max-height: 849px) {
             height: auto;
             margin-bottom: 4vh;
-            margin-top: 4vh;
             > svg {
                 height: 100%;
@@ -127,6 +128,7 @@ html {
             display: block;
             font-weight: 600;
             font-size: 0.875rem;
+            font-style: normal;
             text-align: center;
             width: $or-dim;
             height: $or-dim;
@@ -144,32 +146,7 @@ html {
         }
     }
-    &_btn_microsoft {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-    }
-    $icon_microsoft_dimension: 1.25rem;
-    &_icon_microsoft {
-        width: $icon_microsoft_dimension;
-        height: $icon_microsoft_dimension;
-        margin-top: -0.0625rem;
-        margin-right: 0.5rem;
-        $microsoft-icon: str-replace(url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2_21)'%3E%3Cpath d='M0 0.125H20V20.125H0V0.125Z' fill='%23F3F3F3'/%3E%3Cpath d='M0.869568 0.994564H9.56522V9.69022H0.869568V0.994564Z' fill='%23F35325'/%3E%3Cpath d='M10.4348 0.994564H19.1304V9.69022H10.4348V0.994564Z' fill='%2381BC06'/%3E%3Cpath d='M0.869568 10.5598H9.56522V19.2554H0.869568V10.5598Z' fill='%2305A6F0'/%3E%3Cpath d='M10.4348 10.5598H19.1304V19.2554H10.4348V10.5598Z' fill='%23FFBA08'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2_21'%3E%3Crect width='20' height='20' fill='white' transform='translate(0 0.125)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"), "#", "%23");
-        &::before {
-            width: $icon_microsoft_dimension;
-            height: $icon_microsoft_dimension;
-            display: inline-block;
-            background-repeat: no-repeat;
-            background-size: 100%;
-            content: '';
-            background-image: $microsoft-icon;
-        }
-    }
-    &_permissions {
+    &_permissions, &_codes {
         padding-top: 0.25rem;
         padding-right: 0.25rem;
         padding-bottom: 0.25rem;
@@ -179,18 +156,24 @@ html {
         &:hover > .auth_permissions_list::-webkit-scrollbar-thumb {
             background-color: #333;
-            transition: all 0.25s ease-out;
+            transition: all 0.2s ease-out;
         }
     }
     &_permissions_list {
-        list-style-type: none;
+        background-color: #f7f7f7;
+        min-height: 200px;
+        padding: 1rem;
+    }
+    &_codes_list {
         padding-left: 0;
+    }
+    &_permissions_list,
+    &_codes_list {
+        list-style-type: none;
         margin-bottom: 0;
-        background-color: #f7f7f7;
-        padding: 0.75rem 0.75rem 0.75rem 1rem;
         overflow-y: auto;
-        min-height: 200px;
         max-height: 30vh;
         -webkit-overflow-scrolling: touch;
@@ -208,7 +191,81 @@ html {
                 transition: all 0.25s ease-out;
             }
         }
+    }
+    &_codes_list_item {
+        position: relative;
+        padding: 0.75rem 0.75rem 0.75rem 1rem;
+        background-color: #f7f7f7;
+        border-radius: var(--leap-border-radius);
+        overflow: hidden;
+        &:not(:last-child) {
+            margin-bottom: 0.75rem;
+        }
+    }
+    @media screen and (min-width: 720px) {
+        &_codes_list_item:hover {
+            .auth_codes_action {
+                transform: translateY(0);
+                transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
+                opacity: 1;
+            }
+        }
+        &_codes_action {
+            transform: translateY(8px);
+            transition: all 0.3 cubic-bezier(0.2, 0, 0, 1);
+            opacity: 0;
+            background: #fff;
+            background: linear-gradient(0deg, rgba(247,247,247,1) 0%,rgba(255,255,255,0) 100%);
+            position: absolute;
+            padding: 1rem;
+            bottom: 0;
+            right: 0;
+            left: 0;
+        }
+    }
+    &_codes_info {
+        font-size: 0.875rem;
+        span:first-child {
+            margin-bottom: 4px;
+            display: block;
+            font-weight: 600;
+        }
+        span:last-child {
+            color: var(--leap-label-color);
+            font-size: 90%;
+        }
+    }
+    &_codes_action {
+        .auth_btn:hover {
+            background-color: #fff;
+        }
+    }
+    &_mycodes {
+        list-style: none;
+        list-style: none;
+        padding: 0;
+        margin-bottom: 1rem;
+        code {
+            display: block;
+            font-weight: 600;
+            letter-spacing: 0.125rem;
+            font-size: 1.0625rem;
+            margin-bottom: 0.5rem;
+        }
+        li::last-child {
+            display: flex;
+        }
+    }
+    &_permissions_list {
         > li {
             &:not(:first-child) {
                 margin-top: 1rem;
@@ -230,11 +287,9 @@ html {
         }
     }
-    // @media screen and (min-width: 577px) {
-        &_support_tabcontent {
-            min-height: 21.5rem;
-        }
-    // }
+    &_support_tabcontent {
+        min-height: 21.5rem;
+    }
     &_firm_id {
         position: relative;
@@ -287,4 +342,79 @@ html {
             }
         }
     }
+    &_validation_message {
+        margin: -0.5rem 0 var(--leap-form-group-margin) 0;
+        & > summary {
+            display: flex;
+            align-items: center;
+            gap: 0.25rem;
+            margin-bottom: 0.25rem;
+            font-size: 0.8125rem;
+            list-style: none;
+            color: var(--leap-heading-color);
+            &::-webkit-details-marker {
+                display: none;
+            }
+            > svg {
+                font-size: 1rem;
+            }
+            &:hover {
+                text-decoration: underline;
+            }
+        }
+        &[closed] {
+        }
+        &[open] {
+        }
+        > ul {
+            border-radius: var(--leap-border-radius);
+            background-color: #f7f7f7;
+            list-style: none;
+            padding: 1rem;
+            > li {
+                padding-left: 1rem;
+                position: relative;
+                &::before {
+                    content: '';
+                    display: block;
+                    width: 0.375rem;
+                    height: 0.375rem;
+                    border-radius: 0.375rem;
+                    position: absolute;
+                    background-color: $primary;
+                    top: calc(50% - 0.1875rem);
+                    left: 0;
+                }
+            }
+        }
+    }
+    &_signin_methods {
+        > .auth_btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-transform: none;
+        }
+        @media screen and (min-width: 480px) {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            grid-template-rows: 1fr 1fr;
+            gap: 0.5rem;
+            >.auth_btn {
+                margin: 0;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                max-height: 4rem;
+                height: 4rem;
+                text-align: left;
+                line-height: 1.4;
+                padding: 0 1rem;
+            }
+        }
+    }
 }

package/dist/scss/product/4d-leap.scss CHANGED Viewed

@@ -8,7 +8,7 @@
 @import "../4d/mixins/all";
 @import "../theme/leap4d";
 @import "../4d/variables";
-@import "../4d/content-app";
 // Import shared SCSS files after theme variables
 @import "../4d/base";
+@import "../4d/content-app";

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@leapdev/gui",
-  "version": "0.2.252",
+  "version": "0.2.255",
   "description": "LEAP GUI",
   "author": "LEAP Dev",
   "license": "ISC",