@leapdev/gui 0.2.229 → 0.2.234

package/dist/scss/4d/components/section.scss

@@ -1,9 +1,10 @@
 
 // Specific to word-app
 .section-header {
-  display: flex;
+  display: grid;
   margin: 0.5rem 0;
   align-items: center;
+  grid-template-columns: auto 1fr;
 
   .btn,
   .btn-link {
@@ -15,8 +16,21 @@
   }
 }
 .section_title {
+  > * {
+    width: auto;
+    overflow-wrap: break-word;
+    word-break: break-word;
+    white-space: break-word;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   h3 {
     margin-bottom: 0;
     line-height: 1;
   }
+
+  h3, h4 {
+    text-transform: uppercase;
+  }
 }

package/dist/scss/4d/mixins/_all.scss

@@ -1 +1,2 @@
-@import './chevron';
+@import './chevron';
+@import './mobile-device';

package/dist/scss/4d/mixins/_mobile-device.scss

@@ -0,0 +1,8 @@
+@mixin mobile-device-only() {
+  @media screen and (max-width: 844px) 
+  and (-webkit-min-device-pixel-ratio: 2),
+  screen and (max-width: 844px) 
+  and (-webkit-min-device-pixel-ratio: 3) { 
+    @content;
+  }
+}

package/dist/scss/4d/overrides/buttons/buttons.scss

@@ -3,6 +3,11 @@
   color: $body-color;
 }
 
+// Min width so we don't have short buttons
+.btn:not(.btn-icon-only, .btn-block, .btn-link) {
+  min-width: 7.5rem;
+}
+
 .btn {
   &:disabled {
     color: $btn-disabled-color;
@@ -45,3 +50,18 @@
     color: $white !important;
   }
 }
+
+@include mobile-device-only {
+  // .btn:not(.btn-block) {
+  //   width: 100%;
+  //   display: block;
+  //   margin-bottom: 1rem;
+  // }
+}
+
+// Properly style [block] buttons on page_footer
+@include mobile-device-only {
+  .page_footer .col:not(:last-child) .btn-block {
+    margin-bottom: 0.5rem;
+  }
+}

package/dist/scss/4d/overrides/forms/form-group.scss

@@ -5,4 +5,17 @@
   .card & {
     margin-bottom: 0;
   }
+
+  label, .form-check-label, .form-label {
+    font-size: $label-font-size;
+    font-weight: $label-font-weight;
+    color: $label-font-color;
+    letter-spacing: 0.01rem;
+  }
 }
+
+.form-group {
+  @include mobile-device-only {
+    margin-bottom: 1rem !important;
+  }
+}

package/dist/scss/4d/overrides/forms/forms.scss

@@ -5,7 +5,6 @@
 @import "input-select";
 @import "input-text";
 @import "input-group";
-@import "input-range";
 @import "legend";
 @import "tables";
 

package/dist/scss/4d/overrides/forms/input-group.scss

@@ -17,6 +17,20 @@
       background-color: transparent !important;
     }
   }
+
+  .form-group {
+    margin-bottom: 0;
+
+    &.row {
+      margin-left: 0;
+      margin-right: 0;
+
+      > .col {
+        padding-left: 0;
+        padding-right: 0;
+      }
+    }
+  }
 }
 
 .input-group-prepend {

package/dist/scss/4d/overrides/forms/input-options.scss

@@ -1,3 +1,7 @@
+.form-check {
+  padding-left: $input-4d-options-to-text-whitespace;
+}
+
 .form-check, .form-check-inline {
   position: relative;
 
@@ -7,7 +11,6 @@
     height: $input-4d-options-dimension;
     width: $input-4d-options-dimension;
     border: $input-4d-options-border-width solid $input-4d-checkbox-default-border-color;
-
     background-color: $white;
     outline: none;
     margin: 0;
@@ -17,18 +20,38 @@
   }
 
   > input[type="checkbox"] {
-      border-radius: $border-radius-sm;
+      border-radius: $input-4d-checkbox-border-radius;
+
+      @if $is-sirius {
+        transition: box-shadow .15s ease-in-out;
+      }
+
       &:before {
         position: absolute;
-        top: 0.05rem;
-        left: -0.08rem;
+        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: $input-4d-checkbox-active-border-color;
+          box-shadow: $input-btn-focus-box-shadow;
+        }
+      }
+
       &:checked:before {
-        content: '\2713';
+        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 {
@@ -37,6 +60,7 @@
 
       &:hover {
         border-color: $input-4d-checkbox-hover-border-color;
+        box-shadow: $input-4d-checkbox-hover-boxshadow;
         color: $input-4d-checkbox-hover-text-color;
       }
 
@@ -52,20 +76,32 @@
   }
 
   > input[type="radio"] {
-    border-radius: $input-4d-options-dimension;
+      border-radius: $input-4d-options-dimension;
+
+      @if $is-sirius {
+        transition: box-shadow .15s ease-in-out;
+      }
+
       &:before {
         position: absolute;
         $top: $input-4d-radio-tick-dimension / 2;
-        top: calc(50% - 0.2186rem);
-        left: calc(50% - 0.2186rem);
+        top: calc(50% - #{$top});
+        left: calc(50% - #{$top});
         width: $input-4d-radio-tick-dimension;
         height: $input-4d-radio-tick-dimension;
         border-radius: 50%;
         background-color: $input-4d-radio-default-border-color;
       }
 
-      &:checked:before {
-        content: '';
+      &:checked {
+        background-color: $input-4d-checkbox-checked-bg-color;
+        &:before {
+          content: '';
+          background-color: $input-4d-radio-active-bg-color;
+        }
+        &:focus, &:active {
+          box-shadow: $input-btn-focus-box-shadow;
+        }
       }
 
       &:disabled {
@@ -80,7 +116,6 @@
       }
 
       &:active {
-        background-color: $input-4d-radio-active-bg-color;
         border-color: $input-4d-radio-active-border-color;
         &:before {
           background-color: $input-4d-radio-active-text-color;
@@ -94,7 +129,6 @@
 }
 
 .form-check-inline {
-  padding-left: $input-4d-options-to-text-whitespace;
   margin-right: 0;
   & ~ & {
     margin-left: $form-check-inline-margin-x;

package/dist/scss/4d/overrides/forms/input-select.scss

@@ -1,5 +1,6 @@
 select {
-  color: $btn-dropdown-color;
+  // color: $btn-dropdown-color;
+  color: theme-color('default') !important;
   text-align: $btn-dropdown-alignment;
   padding-right: 1rem;
   outline: none;
@@ -15,11 +16,30 @@ select {
   &:not([multiple]):not(:hover) {
     // background-color: $select-bg !important;
     // border-color: $select-border-color;
-  }
+    background-color: white !important;
+    border: 1px solid $select-border-color;
+  } 
 }
 
 .ng-select .ng-select-container {
-  border: 1px solid $input-border-color !important;
+  box-shadow: none;
+  border: 1px solid $select-border-color !important;
+
+  @if $is-sirius {
+    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+  }
+}
+
+@if not $is-sirius {
+  .input-group {
+    .ng-select .ng-select-container {
+      border-color: $gray-var-9;
+    }
+
+    .ng-select-wrapper {
+      margin-left: -0.0625rem;
+    }
+  }
 }
 
 .ng-placeholder {
@@ -32,13 +52,56 @@ ng-select-focused,
   background-color: #fff;
   border-color: theme-color('blue-var-3');
   outline: 0;
-  box-shadow: 0 0 0 0.2rem rgba(theme-color('primary'),.25) !important;
+  // box-shadow: 0 0 0 0.2rem rgba(theme-color('primary'),.25) !important;
 }
 
-select {
-  color: theme-color('default') !important;
-  &:not([multiple]):not(:hover) {
-    background-color: white !important;
-    border: 1px solid theme-color('gray-var-9');
+@if $is-sirius {
+  .ng-select-opened {
+    > .ng-select-container {
+      border-color: $select-border-focus-color !important;
+      box-shadow: 0 0 0 0.15rem $select-shadow-focus-color !important;
+      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    }
+  }
+
+  .ng-arrow-wrapper:hover > .ng-arrow {
+    border-top-color:  #666 !important;
+  }
+
+  .ng-select-opened {
+    .ng-arrow, .ng-arrow-wrapper:hover > .ng-arrow {
+      border-color: transparent transparent #666 !important;
+    }
+
+    .ng-arrow {
+      border-width: 0.1563rem 0.3125rem 0.3125rem;
+    }
   }
 }
+@else {
+  .ng-select .ng-select-container {
+    background-color: #e5e5e5 !important;
+    height: 1.5635rem !important;
+    min-height: 1.5635rem !important;
+    min-height: 1.5635rem !important;
+    font-size: 0.8125rem;
+
+    .ng-arrow-wrapper, .ng-arrow {
+      width: 1.5625rem !important;
+      height: 1.5625rem !important;
+    }
+
+    .ng-arrow {
+      display: block;
+      border: none !important;
+      background-position: calc(100% - #{$chevron-width / 2}) 50%;
+      background-repeat: no-repeat;
+      background-image: $custom-select-chevron;
+      top: 0 !important;
+    }
+    &:hover {
+      background-color: #dceef9 !important;
+      border-color: #0078d7 !important;
+    }
+  }
+}

package/dist/scss/4d/overrides/forms/input-text.scss

@@ -7,4 +7,10 @@ input {
   &[readonly], &:disabled  {
     border-color: $input-readonly-border-color;
   }
+}
+
+.form-control {
+  &:focus {
+    border-color: $input-focus-border-color;
+  }
 }

package/dist/scss/4d/overrides/grid/_grid.scss

@@ -0,0 +1,13 @@
+@include mobile-device-only {
+  ::-webkit-scrollbar {
+    display: none;
+    -ms-overflow-style: none;
+    overflow: -moz-scrollbars-none;
+  }
+
+  .col, [class*="col-"], [class*=" col-"] {
+    flex: 100% !important;
+    max-width: 100% !important;
+    min-width: 100% !important;
+  }
+}

package/dist/scss/4d/overrides/nav/navbar.scss

@@ -10,19 +10,85 @@
 
 .nav-tabs {
   background-color: $nav-tabs-bg;
+
+  @if $is-sirius {
+    border-bottom: 0.0625rem solid $border-color;
+  }
+
   .nav-link {
+    background-color: transparent;
     color: $body-color;
-    padding: $nav-tabs-stacked-padding;
+    padding: $nav-tabs-link-padding-x $nav-tabs-link-padding-y;
+    font-weight: $nav-tabs-link-font-weight;
+    font-size: $nav-tabs-link-font-size;
+    border-radius: 0;
+    position: relative;
+    min-height: $nav-tabs-link-min-height;
+    max-width: $nav-tabs-link-max-width;
+    min-width: $nav-tabs-link-min-width;
+    z-index: 1;
+
+    &::after {
+      content: '';
+      position: absolute;
+      height: 0.125rem;
+      width: 100%;
+      left: 0;
+      bottom: -1px;
+      transform: scaleX(0);
+      z-index: 10;
+
+      @if $is-sirius {
+        transition: all .25s ease-out;
+      }
+
+
+      @include mobile-device-only {
+        &::after {
+          height: 0.25rem;
+          bottom: -0.125rem;
+        }
+      }
+
+    }
+
+    @if $nav-tabs-link-is-uppercase {
+      text-transform: uppercase;
+    }
+    
+    @if not $is-sirius {
+      &, &:hover {
+        cursor: default;
+      }
+    }
 
     // IE Fix
     display: inline-block;
 
+    &:hover {
+      color: theme-color('primary');
+      background-color: $nav-tabs-link-hover-bg;
+
+      &::after {
+        background: $nav-tabs-link-hover-border;
+        transform: scaleX(1);
+      }
+    }
+
     &:not(.active):hover {
-      background-color: $navbar-light-hover-bg;
+      background-color: $nav-tabs-link-hover-bg;
     }
+
     &.active {
       color: $nav-tabs-link-active-color;
-      @include box-shadow(0 2px 0 0 $nav-tabs-link-active-border);
+      &::after {
+        background: $nav-tabs-link-active-border;
+        transform: scaleX(1);
+      }
+    }
+
+    > span {
+      letter-spacing: $nav-tabs-link-letter-spacing;
     }
   }
 }
@@ -61,3 +127,44 @@
     }
   }
 }
+// leap-tabs-menu .toolbar {
+//   // position: -webkit-sticky;
+//   position: fixed;
+//   top: 0;
+//   display: block;
+//   z-index: 1030;
+// }
+@include mobile-device-only {
+  leap-tabs-menu .toolbar {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    z-index: 1500;
+
+    display: block !important;
+    white-space: nowrap;
+    width: 100%;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    background-color: white;
+  }
+  .nav-tabs {
+    display: flex !important;
+    flex-wrap: nowrap;
+    width: 100%;
+
+    .nav-link {
+      display: inline-block;
+
+      &:not(.activated) {
+        position: relative;
+        margin-bottom: -0.0625rem;
+        border-bottom: 1px solid $border-color;
+      }
+
+      > span {
+        display: block;
+      }
+    }
+  } 
+}

package/dist/scss/4d/overrides/product/_bylawyers.scss

@@ -68,22 +68,29 @@ h3 {
   letter-spacing: 0.2px;
 }
 
+// .form-check, .form-check-inline {
+//   .form-check-label {
+//     margin-left: 0.5rem;
+//   }
+//   > input[type="radio"]:not(.form-check-inline) {
+//     top: 0.2rem !important;
+//   }
+//   > input[type="checkbox"] {
+//      top: 0.2rem !important;
+//       &:before {
+//         top: 0.09rem !important;
+//         left: 0 !important;
+//       }
+//   }
+// }
+
 .form-check, .form-check-inline {
-  .form-check-label {
-    margin-left: 0.5rem;
-  }
   > input[type="radio"]:not(.form-check-inline) {
     top: 0.2rem !important;
   }
-  > input[type="checkbox"] {
-     top: 0.2rem !important;
-      &:before {
-        top: 0.09rem !important;
-        left: 0 !important;
-      }
-  }
 }
 
+
 .card {
   border-radius: $border-radius-sm;
 }

package/dist/scss/4d/overrides/product/_leapweb.scss

@@ -1,15 +1,22 @@
-
-
 .ng-dropdown-panel.ng-select-bottom {
   border-color: $border-color !important;
 }
 
+.ng-select-container {
+  min-height: $input-height !important;
+  border-radius: $border-radius-sm !important;
+
+  .ng-value-container {
+    line-height: $line-height-base !important;
+    padding: $input-padding-y $input-padding-x !important;
+  }
+}
+
 .btn {
   border-radius: $border-radius !important;
   padding: $input-padding-y $input-padding-x !important;
 }
 
-
 .alert {
   border-radius: $border-radius-sm !important;
   font-size: $font-size-base;
@@ -21,54 +28,20 @@
   }
 }
 
-
 .form-group {
   margin-bottom: 0.35rem !important;
 }
 
-
-.ng-select-container {
-  min-height: $input-height !important;
-  border-radius: $border-radius-sm !important;
-
-
-  .ng-value-container {
-    line-height: $line-height-base !important;
-    padding: $input-padding-y $input-padding-x !important;
-  }
-}
-
-
 .form-check, .form-check-inline {
-  .form-check-label {
-    margin-left: 0.5rem;
-  }
   > input[type="radio"]:not(.form-check-inline) {
     top: 0.2rem !important;
   }
-  > input[type="checkbox"] {
-     top: 0.2rem !important;
-      &:before {
-        top: 0.09rem !important;
-        left: 0 !important;
-      }
-  }
 }
-
-
-
-.ng-dropdown-panel.ng-select-bottom {
-  border-color: $border-color !important;
-}
-
-.alert {
-  border-radius: $border-radius-sm !important;
-  .close {
-    font-size: $font-size-lg;
+.form-group {
+  @include mobile-device-only {
+    margin-bottom: 1rem !important;
   }
 }
-
-
 .card {
   border-radius: $border-radius-sm;
 }
@@ -107,22 +80,6 @@ h3 {
   letter-spacing: -0.5px;
 }
 
-.form-check, .form-check-inline {
-  .form-check-label {
-    margin-left: 0.5rem;
-  }
-  > input[type="radio"]:not(.form-check-inline) {
-    top: 0.2rem !important;
-  }
-  > input[type="checkbox"] {
-     top: 0.2rem !important;
-      &:before {
-        top: 0.09rem !important;
-        left: 0 !important;
-      }
-  }
-}
-
 .card {
   border-radius: $border-radius-sm;
 }

package/dist/scss/4d/overrides/typography/page-header.scss

@@ -16,6 +16,37 @@
   font-weight: $font-weight-bold;
 }
 
+@if not $is-sirius {
+  .section_title {
+    width: 100%;
+  }
+  .section_title .h5:first-child, 
+  .section_title h5:first-child { font-size: 0.75rem; }
+
+  .section_title .h6:first-child, 
+  .section_title h6:first-child { font-size: 0.6875rem; }
+
+  .section_title .h5:first-child,
+  .section_title h5:first-child,
+  .section_title .h6:first-child,
+  .section_title h6:first-child  {
+    font-weight: 600;
+    text-transform: uppercase;
+    position: relative;
+    white-space: nowrap;
+    overflow: hidden;
+
+    &::after {
+      border-top: 1px solid $gray-var-6;
+      content: "";
+      position: absolute;
+      top: 0.5rem;
+      width: 100%;
+      margin-left: 2%;
+    }
+  } 
+}
+
 .section-subtitle {
   font-size: $font-size-base;
   color: var(--primary, theme-color("default"));

package/package.json

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