@leapdev/gui 0.2.235 → 0.2.238

package/dist/scss/auth/theme/components/_nav.scss

@@ -0,0 +1,79 @@
+.nav-link {
+  text-transform: uppercase;
+}
+
+.nav-tabs {
+  background-color: var(--leap-tabs-background);
+  white-space: nowrap;
+  width: 100%;
+  flex-wrap: nowrap;
+
+  @if not $is-desktop {
+    border-bottom: 0.0625rem solid var(--leap-border-color);
+  }
+
+  .nav-link {
+    background-color: transparent;
+    color: var(--leap-body-text-color);
+    padding: var(--leap-tabs-padding);
+    font-weight: var(--leap-tabs-font-weight);
+    font-size: var(--leap-tabs-font-size);
+    text-transform: var(--leap-tabs-casing);
+    letter-spacing: var(--leap-tabs-letter-spacing);
+    border-radius: 0;
+    border: none;
+    position: relative;
+    z-index: 1;
+
+    &::after {
+      content: '';
+      position: absolute;
+      height: 0.125rem;
+      width: 100%;
+      left: 0;
+      bottom: -1px;
+      transform: scaleX(0);
+      z-index: 10;
+
+      @if $enable-transitions {
+        transition: all .25s ease-out;
+      }
+    }
+
+    @if $is-desktop {
+      &, &:hover {
+        cursor: default;
+        user-select: none;
+      }
+    }
+
+    // IE Fix
+    display: inline-block;
+
+    &:hover {
+      color: var(--leap-primary-color);
+      background-color: var(--leap-body-background-color);
+
+      @if not $is-desktop {
+        &::after {
+          background: var(--leap-tabs-link-hover-border);
+          transform: scaleX(1);
+        }
+      }
+    }
+
+    &:not(.active):hover {
+      background-color: var(--leap-tabs-link-hover-background);
+    }
+
+    &.active {
+      background-color: transparent;
+      border-color: transparent;
+      color: var(--leap-tabs-link-active-color);
+      &::after {
+        background: var(--leap-tabs-link-active-border);
+        transform: scaleX(1);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+#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;
+    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;
+      color: #e63935 !important;
+      font-weight: 600;
+      font-size: 1rem;
+    }
+  }
+}

package/dist/scss/auth/theme/components/forms/_checkbox.scss

@@ -0,0 +1,73 @@
+.form-check {
+  position: relative;
+  padding-left: $input-padding-left;
+
+  > input[type="checkbox"] {
+    -webkit-appearance:none;/* Hides the default checkbox style */
+    height: $input-4d-options-dimension;
+    width: $input-4d-options-dimension;
+    border: $input-4d-options-border-width solid var(--leap-border-color);
+    background-color: $white;
+    outline: none;
+    margin: 0;
+    left: 0;
+    position: absolute;
+    cursor: pointer;
+  }
+
+  > input[type="checkbox"] {
+      border-radius: $input-4d-checkbox-border-radius;
+
+      @if $enable-transitions {
+        transition: box-shadow .15s ease-in-out;
+      }
+
+      &:before {
+        position: absolute;
+        top: -0.0625rem;
+        left: -0.0625rem;
+        line-height: 0.6;
+        font-size: 0.97rem;
+        text-align: center;
+      }
+
+      &:checked {
+        background-color: $input-4d-checkbox-checked-bg-color;
+        border-color: $input-4d-checkbox-checked-border-color;
+
+        &:focus, &:active {
+          border-color: var(--leap-primary-color);
+          box-shadow: var(--leap-input-box-shadow);
+        }
+      }
+
+      &:checked:before {
+        content: '';
+        width: $input-4d-options-dimension;
+        height: $input-4d-options-dimension;
+        background-repeat: none;
+        background-position: center center;
+        background-image: $custom-checkbox-indicator-icon-checked;
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+      }
+
+      &:hover {
+        border-color: $input-4d-checkbox-hover-border-color;
+        box-shadow: $input-4d-checkbox-hover-boxshadow;
+        color: $input-4d-checkbox-hover-text-color;
+      }
+
+      &:active {
+        background-color: $input-4d-checkbox-active-bg-color;
+        border-color: $input-4d-checkbox-active-border-color;
+        color: var(--leap-primary-color);
+      }
+
+      &:not(.form-check-inline) {
+        top: $input-4d-options-top;
+      }
+  }
+}

package/dist/scss/auth/theme/components/forms/_form-control.scss

@@ -0,0 +1,59 @@
+// Prepend /w Icon
+.form-control {
+  color: var(--leap-input-color);
+  font-size: var(--leap-font-size);
+  border-color: var(--leap-border-color);
+  padding: var(--leap-input-padding-x) var(--leap-input-padding-y);
+
+  &:not(textarea) {
+    height: var(--leap-input-height);
+    max-height: var(--leap-input-height);
+  }
+
+  &::placeholder {
+    color: var(--leap-input-placeholder-color);
+  }
+
+  &:focus {
+    border-color: var(--leap-input-focus-border-color);
+  }
+
+  @if $enable-transitions {
+    box-shadow: 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    &:focus {
+      box-shadow: var(--leap-input-box-shadow);
+    }
+  }
+  @if $is-desktop {
+    &:focus {
+      box-shadow: none;
+    }
+  }
+  
+  &:disabled, &:read-only:not(select) {
+    cursor: not-allowed;
+    color: var(--leap-input-disabled-color);
+    background-color: var(--leap-input-disabled-background);
+    border-color: var(--leap-input-disabled-border);
+  }
+}
+
+.form-control {
+  &-sm { min-width: 12rem; }
+  &-md { min-width: 15rem; }
+  &-lg { min-width: 20rem; }
+}
+
+select.form-control {
+  position: relative;
+  padding-top: var(--leap-select-padding-y);
+  padding-bottom: var(--leap-select-padding-y);
+  background-position: calc(100% - #{$chevron-width / 2}) 50%;
+  background-repeat: no-repeat;
+  background-image: $custom-select-chevron;
+  line-height: 1;
+}
+
+textarea.form-control {
+  resize: none;
+}

package/dist/scss/auth/theme/components/forms/_form-group.scss

@@ -0,0 +1,8 @@
+.form-group {
+  margin-bottom: var(--leap-form-group-margin);
+
+  label {
+    color: var(--leap-label-color);
+    font-weight: var(--leap-label-font-weight);
+  }
+}

package/dist/scss/auth/theme/components/forms/_forms.scss

@@ -0,0 +1,4 @@
+@import './form-control';
+@import './form-group';
+@import './input-group';
+@import './checkbox';

package/dist/scss/auth/theme/components/forms/_input-group.scss

@@ -0,0 +1,43 @@
+
+
+.input-group.input-group-prepend {
+  display: flex;
+  flex-direction: row-reverse;
+  position: relative;
+ 
+  > .form-control {
+    z-index: 0;
+    padding-left: calc(1rem + (var(--leap-input-padding-x) * 3));
+  }
+
+  > .input-group-text {
+      width: var(--leap-input-height);
+      height: var(--leap-input-height);
+      justify-content: center;
+      align-items: center;
+      padding: 0;
+      border: none;
+      position: absolute;
+      left: 0;
+      z-index: 1;
+      background: transparent;
+      display: flex;
+
+    .icon {
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+}
+
+.input-group-text {
+  color: var(--leap-input-color);
+}
+ 
+// Prepend Validation
+.input-group-prepend > .form-control.is-valid + .input-group-text {
+  border-color: $form-feedback-valid-color;
+}
+.input-group-prepend > .form-control.is-invalid + .input-group-text {
+  border-color: $form-feedback-invalid-color;
+}

package/dist/scss/auth/theme/css-variables/_leap-4d.scss

@@ -0,0 +1,74 @@
+$enable-transitions:                      false;
+$button-is-uppercase:                     false;
+$is-desktop:                              true;
+
+$input-4d-options-dimension:              .8125rem;
+$input-4d-checkbox-border-radius:         0 !default;
+$input-4d-options-top:                    0.25rem !default;
+$input-4d-options-border-width:           1px;
+$input-4d-checkbox-default-border-color:  #333;
+
+$custom-checkbox-indicator-indeterminate-color: #333;
+$custom-checkbox-indicator-icon-checked:  str-replace(url("data:image/svg+xml;charset=uft8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'><path fill='#1E365E' fill-rule='evenodd' d='M5.725 9.635 11.715 4l-.685-.728-5.985 5.63-2.72-2.928-.733.68 2.724 2.933-.001.002.214.227.466.502.003-.003.002.002.335-.315.393-.365-.003-.002Z' clip-rule='evenodd'/></svg%3E"), "#","%23");
+$input-4d-checkbox-checked-bg-color:      #fff !default;
+$input-4d-checkbox-checked-border-color:  #333;
+
+$input-4d-checkbox-hover-text-color:    #0078D7;
+$input-4d-checkbox-hover-border-color:  #0078D7;
+
+$input-4d-checkbox-active-bg-color:     #CCE4F7;
+$input-4d-checkbox-active-border-color: #1E365E;
+$input-4d-checkbox-active-text-color:   #1E365E;
+$input-4d-checkbox-hover-boxshadow:     none;
+$input-padding-left:                    1.0125rem;
+
+$chevron-width:                         0.375rem;
+$custom-select-chevron-color:         #131313;
+$custom-select-chevron:                 str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M4.24264069 3.53553391L7.77817459 0l.70710678.70710678-3.5355339 3.53553391-.70710678.70710678L0 .70710678.70710678 0 4.2426407 3.53553391z'/%3E%3C/svg%3E"), "#","%23");
+
+:root {
+  --leap-font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; 
+  --leap-font-size: 0.8125rem;
+  --leap-primary-color: #1E365E;
+  --leap-body-background-color: #F0F0F0;
+  --leap-body-text-color: #444;
+  --leap-label-color: #444444;
+  --leap-label-font-weight: 400;
+  --leap-heading-color: #0060AC ;
+  --leap-form-group-margin: 0.75rem;
+
+  --leap-border-radius: 0;
+  --leap-border-color: #7A7A7A;
+  --leap-input-height: 1.375rem;
+  --leap-input-padding-x: 1.6px;
+  --leap-input-padding-y: 1.6px;
+  --leap-input-color: #444;
+  --leap-input-disabled-color: #6e7781;
+  --leap-input-disabled-background: #efefef;
+  --leap-input-disabled-border: #abadb3;
+  --leap-input-focus-border-color: #0078d7;
+  --leap-input-placeholder-color: #6c757d;
+  --leap-input-box-shadow: none;
+  --leap-input-addon-padding: 0 0.4375rem;
+
+  --leap-select-padding-y: 0.125rem;
+
+  --leap-btn-height: 1.9258rem;
+  --leap-btn-fontsize: 0.8125rem;
+  --leap-btn-fontweight: 400;
+  --leap-btn-padding: 0.344rem 0.75rem;
+  --leap-btn-border-color: #7a7a7a;
+  --leap-btn-hover-border-color: #1c365f;
+  --leap-btn-hover-background-color: #dceef9;
+
+  --leap-tabs-background: #F6F6F6;
+  --leap-tabs-padding: 0.5rem 1rem;
+  --leap-tabs-font-weight: 400;
+  --leap-tabs-font-size: .8125rem;
+  --leap-tabs-link-hover-border: #1E365E;
+  --leap-tabs-link-hover-background: #F0F0F0;
+  --leap-tabs-link-active-border: #DA782D;
+  --leap-tabs-link-active-color: #DA782D;
+  --leap-tabs-casing: unset;
+  --leap-tabs-letter-spacing: 0.0063rem;
+}

package/dist/scss/auth/theme/css-variables/_leap.scss

@@ -0,0 +1,77 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500,600&display=swap');
+
+$enable-transitions:                      true;
+$button-is-uppercase:                     true;
+$is-desktop:                              false;
+$input-4d-options-dimension:              1rem;
+$input-4d-checkbox-border-radius:         0 !default;
+$input-4d-options-top:                    0.1875rem !default;
+$input-4d-options-border-width:           1px;
+$input-4d-checkbox-default-border-color:  #1E365E;
+
+$custom-checkbox-indicator-indeterminate-color: #1E365E;
+$custom-checkbox-indicator-icon-checked:  str-replace(url("data:image/svg+xml;chatset=uft8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolygon fill='#{$custom-checkbox-indicator-indeterminate-color}' points='4 6 7 9 12 4 12 7 7 12 4 9'%3E%3C/polygon%3E%3C/svg%3E"), "#","%23");
+$input-4d-checkbox-checked-bg-color:      #fef7f0 !default;
+$input-4d-checkbox-checked-border-color:  #d6d6d6;
+
+$input-4d-checkbox-hover-text-color:    #1E365E;
+$input-4d-checkbox-hover-border-color:  #1E365E;
+$input-4d-checkbox-hover-boxshadow:     none;
+
+$input-4d-checkbox-active-border-color: #1E365E;
+$input-4d-checkbox-active-bg-color:     rgba(0,96,172,.12);
+$input-4d-checkbox-active-border-color: #1E365E;
+$input-4d-checkbox-active-text-color:   white;
+$input-padding-left:                    1.5rem;
+
+$chevron-width:                         0.625rem;
+$custom-select-chevron:                 str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 8 5'%3e%3cpath fill='currentColor' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"), "#","%23");
+
+// $custom-select-disabled-bg:                     $input-disabled-bg;
+
+:root {
+  --leap-font-family: Open Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;  
+  --leap-font-size: 0.875rem;
+  --leap-primary-color: #1E365E;
+  --leap-body-background-color: #fff;
+  --leap-body-text-color: #333;
+  --leap-label-color: #333;
+  --leap-label-font-weight: 400;
+  --leap-heading-color: #1E365E;
+  --leap-form-group-margin: 1rem;
+
+  --leap-border-radius: 0.25rem;
+  --leap-border-color: #d6d6d6;
+  --leap-input-height: 2.5rem;
+  --leap-input-padding-x: 0.375rem;
+  --leap-input-padding-y: 0.75rem;
+  --leap-input-color: #333;
+  --leap-input-disabled-color: #6e7781;
+  --leap-input-disabled-background: #fafafa;
+  --leap-input-disabled-border: #abadb3;
+  --leap-input-focus-border-color: #1E365E;
+  --leap-input-placeholder-color: #717880;
+  --leap-input-box-shadow: inset 0 0 0 rgb(19 19 19 / 0%), 0 0 0 0.15rem #cdd3dc;
+  --leap-input-addon-padding: 0.375rem 1rem;
+
+  --leap-select-padding-y: 0.125rem;
+
+  --leap-btn-height: 2.6875rem;
+  --leap-btn-fontsize: 0.875rem;
+  --leap-btn-fontweight: 400;
+  --leap-btn-padding: 0.75rem 1.875rem;
+  --leap-btn-border-color: #d6d6d6;
+  --leap-btn-hover-border-color: #1E365E;
+  --leap-btn-hover-background-color: rgba(30, 54, 94, 0.12);
+
+  --leap-tabs-background: transparent;
+  --leap-tabs-padding: 0.5rem 1rem;
+  --leap-tabs-font-weight: 600;
+  --leap-tabs-font-size: .8125rem;
+  --leap-tabs-link-hover-border: #1E365E;
+  --leap-tabs-link-hover-background: #e9eaec;
+  --leap-tabs-link-active-border: #DA782D;
+  --leap-tabs-link-active-color: #DA782D;
+  --leap-tabs-casing: uppercase;
+  --leap-tabs-letter-spacing: 0.0063rem;
+}

package/dist/scss/auth/theme/css-variables/_office-addin.scss

@@ -0,0 +1,73 @@
+$enable-transitions:                      false;
+$button-is-uppercase:                     false;
+$is-desktop:                              true;
+
+$input-4d-options-dimension:              .8125rem;
+$input-4d-checkbox-border-radius:         0 !default;
+$input-4d-options-top:                    0.25rem !default;
+$input-4d-options-border-width:           1px;
+$input-4d-checkbox-default-border-color:  #333;
+
+$custom-checkbox-indicator-indeterminate-color: #333;
+$custom-checkbox-indicator-icon-checked:  str-replace(url("data:image/svg+xml;charset=uft8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'><path fill='#1E365E' fill-rule='evenodd' d='M5.725 9.635 11.715 4l-.685-.728-5.985 5.63-2.72-2.928-.733.68 2.724 2.933-.001.002.214.227.466.502.003-.003.002.002.335-.315.393-.365-.003-.002Z' clip-rule='evenodd'/></svg%3E"), "#","%23");
+$input-4d-checkbox-checked-bg-color:      #fff !default;
+$input-4d-checkbox-checked-border-color:  #333;
+
+$input-4d-checkbox-hover-text-color:    #0078D7;
+$input-4d-checkbox-hover-border-color:  #0078D7;
+
+$input-4d-checkbox-active-bg-color:     #CCE4F7;
+$input-4d-checkbox-active-border-color: #1E365E;
+$input-4d-checkbox-active-text-color:   #1E365E;
+$input-4d-checkbox-hover-boxshadow:     none;
+$input-padding-left:                    1.0125rem;
+
+$chevron-width:                         0.375rem;
+$custom-select-chevron:                 str-replace(url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M4.24264069 3.53553391L7.77817459 0l.70710678.70710678-3.5355339 3.53553391-.70710678.70710678L0 .70710678.70710678 0 4.2426407 3.53553391z'/%3E%3C/svg%3E"), "#","%23");
+
+:root {
+  --leap-font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; 
+  --leap-font-size: 0.8125rem;
+  --leap-primary-color: #1E365E;
+  --leap-body-background-color: #F0F0F0;
+  --leap-body-text-color: #444;
+  --leap-label-color: #444444;
+  --leap-label-font-weight: 400;
+  --leap-heading-color: #0060AC ;
+  --leap-form-group-margin: 0.75rem;
+
+  --leap-border-radius: 0;
+  --leap-border-color: #7A7A7A;
+  --leap-input-height: 1.375rem;
+  --leap-input-padding-x: 0.1rem;
+  --leap-input-padding-y: 0.1rem;
+  --leap-input-color: #444;
+  --leap-input-disabled-color: #6e7781;
+  --leap-input-disabled-background: #efefef;
+  --leap-input-disabled-border: #abadb3;
+  --leap-input-focus-border-color: #0078d7;
+  --leap-input-placeholder-color: #6c757d;
+  --leap-input-box-shadow: none;
+  --leap-input-addon-padding: 0 0.4375rem;
+
+  --leap-select-padding-y: 0.125rem;
+
+  --leap-btn-height: 1.9258rem;
+  --leap-btn-fontsize: 0.8125rem;
+  --leap-btn-fontweight: 400;
+  --leap-btn-padding: 0.344rem 0.75rem;
+  --leap-btn-border-color: #7a7a7a;
+  --leap-btn-hover-border-color: #1c365f;
+  --leap-btn-hover-background-color: #dceef9;
+
+  --leap-tabs-background: #F6F6F6;
+  --leap-tabs-padding: 0.5rem 1rem;
+  --leap-tabs-font-weight: 400;
+  --leap-tabs-font-size: .8125rem;
+  --leap-tabs-link-hover-border: #1E365E;
+  --leap-tabs-link-hover-background: #F0F0F0;
+  --leap-tabs-link-active-border: #DA782D;
+  --leap-tabs-link-active-color: #DA782D;
+  --leap-tabs-casing: unset;
+  --leap-tabs-letter-spacing: 0.0063rem;
+}