@leapdev/gui 0.2.227 → 0.2.232

package/dist/scss/4d/_variables.scss

@@ -2,7 +2,7 @@
 //
 // Quickly modify global styling by enabling or disabling optional features.
 
-$is-sirius:                    true !default;
+$is-sirius:                    false !default;
 $is-dark-theme:                false !default;
 $enable-navbar-fixed-top:      true;
 $enable-transitions:           false;
@@ -91,7 +91,7 @@ $grid-gutter-width:           2rem;
 // stylelint-disable value-keyword-case
 $font-family-base:
   //TitleX Default Fonts
-  'Open Sans',
+  // 'Open Sans',
   // Safari for OS X and iOS (San Francisco)
   -apple-system,
     // Chrome < 56 for OS X (San Francisco)
@@ -109,7 +109,7 @@ $font-family-base:
 // Font Sizes
 //
 $font-size-lg:                0.875rem;                //14px
-$font-size-base:              0.75rem;                 //12px
+$font-size-base:              0.8125rem;               //13px
 $font-size-sm:                0.687rem;                //11px
 $font-size-xs:                0.687rem !default;       //11px
 
@@ -174,7 +174,10 @@ $icons-path:                  "~ag-grid-community/src/styles/ag-theme-material/i
 
 // Buttons + Forms
 //
+$label-font-size:             0.8125rem       !default;
 $label-margin-bottom:         0.313rem        !default;
+$label-font-weight:           400             !default;
+$label-font-color:            $body-color !default;
 $form-group-margin-bottom:    0.750rem        !default;
 
 // Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
@@ -184,8 +187,8 @@ $input-border-color:          $gray-var-9 !default;
 $input-focus-border-color:    $blue-var-3 !default;
 $input-readonly-border-color: $gray-var-7 !default;
 
-$input-padding-x:             0.250rem;
-$input-padding-y:             0.125rem;
+$input-padding-x:             0.1rem;
+$input-padding-y:             0.1rem;
 
 $input-padding-y-lg:          0.6875rem !default;
 $input-padding-x-lg:          0.8125rem !default;
@@ -209,8 +212,8 @@ $input-btn-padding-x-sm:      1.000rem;
 $input-btn-padding-y-lg:      0.38rem;
 $input-btn-padding-x-lg:      0.8125rem;
 
-$input-line-height:           1.750;
-$input-height:                1.750rem !default;
+$input-line-height:           1.371;
+$input-height:                calc(1.371em + 0.2rem + 4px) !default;
 $input-height-lg:             2.25rem !default;
 
 $input-btn-focus-width:       0;
@@ -230,6 +233,7 @@ $custom-select-box-shadow:    $input-box-shadow;
 //
 $select-bg:                   $gray-var-4 !default;
 $select-border-color:         $gray-var-8 !default;
+$select-shadow-focus-color:   transparent;
 
 // Default Range and Custom Range
 //
@@ -373,7 +377,7 @@ $custom-select-chevron-color:                   $gray-var-11;
 
 $custom-checkbox-indicator-icon-indeterminate:  str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect fill='#{$custom-checkbox-indicator-indeterminate-color}' x='3' y='7' width='10' height='2'/%3E%3C/svg%3E"), "#", "%23");
 
-$custom-checkbox-indicator-icon-checked:        str-replace(url("data:image/svg+xml;charset=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");
+$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='#{$gray-var-11}' 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");
 
 $custom-radio-indicator-icon-checked:           str-replace(url("data:image/svg+xml;charset=uft8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle fill='#{$custom-checkbox-indicator-indeterminate-color}' cx='8' cy='8' r='3'%3E%3C/circle%3E%3C/svg%3E"), "#","%23");
 
@@ -383,22 +387,26 @@ $custom-select-focus-box-shadow:                $input-btn-focus-box-shadow;
 $custom-select-disabled-bg:                     $input-disabled-bg;
 
 // Windows Native Option Controls
-$input-4d-options-dimension:                    0.812rem;
-$input-4d-options-top:                          0.07rem;
+$input-4d-options-dimension:                    0.8125rem;
+$input-4d-options-top:                          0.1875rem;
 $input-4d-options-border-width:                 1px;
 $input-4d-options-to-text-whitespace:           $input-4d-options-dimension + 0.2;
+$input-4d-checkbox-border-radius:               0 !default;
 $input-4d-checkbox-default-border-color:        $gray-var-11;
+$input-4d-checkbox-hover-boxshadow:             none;
 $input-4d-checkbox-hover-border-color:          $blue-var-3;
 $input-4d-checkbox-hover-text-color:            $blue-var-3;
+$input-4d-checkbox-checked-bg-color:            white !default;
+$input-4d-checkbox-checked-border-color:        $gray-var-11;
 $input-4d-checkbox-active-bg-color:             $default-clickable-bg-hover;
 $input-4d-checkbox-active-border-color:         theme-color('primary');
 $input-4d-checkbox-active-text-color:           theme-color('primary');
 
-$input-4d-radio-tick-dimension:                 0.437rem;
+$input-4d-radio-tick-dimension:                 0.4375rem;
 $input-4d-radio-default-border-color:           $gray-var-11;
 $input-4d-radio-hover-border-color:             $blue-var-3;
 $input-4d-radio-hover-text-color:               $blue-var-3;
-$input-4d-radio-active-bg-color:                $default-clickable-bg-hover;
+$input-4d-radio-active-bg-color:                $gray-var-11;
 $input-4d-radio-active-border-color:            theme-color('primary');
 $input-4d-radio-active-text-color:              theme-color('primary');
 
@@ -508,17 +516,26 @@ $table-dark-thead-bg:         theme-color('primary-darker');
 //
 $opacity-translucent-lighten: rgba($white,0.09);
 $opacity-translucent-darken:  darken($body-bg,3%);
+
+$nav-tabs-bg:                 $gray-var-1;
 $nav-tabs-border-color:       $border-color;
 $nav-tabs-border-width:       0 !default;
 $nav-tabs-active-border-width:0 !default;
-
-$nav-tabs-link-active-bg:     $body-bg !default;
+$nav-tabs-link-font-size:     0.8125rem !default;
+$nav-tabs-link-is-uppercase:  false;
+$nav-tabs-link-letter-spacing:0.0063rem !default;
+$nav-tabs-link-font-weight:   400 !default;
+$nav-tabs-link-padding-x:     0.625rem !default;
+$nav-tabs-link-padding-y:     1rem !default;
 $nav-tabs-link-hover-bg:      $body-bg !default;
-$nav-tabs-bg:                 $gray-var-1;
-$nav-tabs-link-active-bg:     transparent;
-$nav-tabs-link-active-color:  theme-color('secondary') !default;
+$nav-tabs-link-hover-border:  transparent !default;
+$nav-tabs-link-active-bg:     transparent !default;
+$nav-tabs-link-active-color:  theme-color('secondary-darker') !default;
 $nav-tabs-link-active-border: theme-color('secondary-darker') !default;
-$nav-tabs-stacked-padding:    0.937rem 1.562rem !default;
+$nav-tabs-stacked-padding:    0.625rem 1rem !default;
+$nav-tabs-link-min-height:    auto;
+$nav-tabs-link-min-width:     auto;
+$nav-tabs-link-max-width:     auto;
 $navbar-nav-link-padding-x:   1rem;
 
 // Navbar dark

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

@@ -29,7 +29,7 @@
   }
 
   &_footer {
-    background: theme-color("light");
+    background-color: theme-color("light");
     padding: 1rem;
     width: 100%;
     margin-top: auto;
@@ -43,6 +43,7 @@
         z-index: 1030;
         right: 0;
         left: 0;
+        transform: translateZ(0);
     }
 
     .page_footer {
@@ -98,4 +99,7 @@
     }
   }
 
+  .btn-group leap-button:not(:first-child) {
+    margin-left: 0.5rem;
+  }
 }

package/dist/scss/4d/components/responsive-table.scss

@@ -0,0 +1,50 @@
+.responsive-table {
+  table {
+    border-collapse: collapse;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    table-layout: fixed;
+
+    th {
+      font-weight: inherit;
+    }
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  .responsive-table {
+    table {
+      border: 0;
+      thead {
+        border: none;
+        clip: rect(0 0 0 0);
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        width: 1px;
+      }
+
+      tr {
+        display: block;
+        margin-bottom: 0.5rem;
+        border-bottom: 1px solid $hr-border-color;
+      }
+
+      td {
+        display: block;
+        margin-bottom: 0.5rem;
+        &::before {
+          /*
+          * aria-label has no advantage, it won't be read inside a table
+          content: attr(aria-label);
+          */
+          content: attr(data-label);
+          float: left;
+        }
+      }
+    }
+  }
+}

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

@@ -19,4 +19,8 @@
     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

@@ -13,13 +13,30 @@ select {
   }
 
   &:not([multiple]):not(:hover) {
-    // background-color: $select-bg !important;
-    // border-color: $select-border-color;
+    background-color: $select-bg !important;
+    border-color: $select-border-color;
   }
 }
 
 .ng-select .ng-select-container {
-  border: 1px solid $input-border-color !important;
+  box-shadow: none;
+  border: 1px solid $select-border-color;
+
+  @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 +49,64 @@ 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');
+    border: 1px solid $select-border-color;
   }
 }
+
+@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,74 @@
 
 .nav-tabs {
   background-color: $nav-tabs-bg;
+
+  @if $is-sirius {
+    border-bottom: 1px 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;
+
+    &::after {
+      content: '';
+      position: absolute;
+      height: 2px;
+      width: 100%;
+      left: 0;
+      bottom: -1px;
+      transform: scaleX(0);
+
+      @if $is-sirius {
+        transition: all .25s ease-out;
+      }
+    }
+
+    @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 +116,27 @@
     }
   }
 }
+
+@include mobile-device-only {
+  leap-tabs-menu .toolbar {
+    position: sticky;
+    top: 0;
+    z-index: 1030;
+  }
+  .nav-tabs {
+    display: block !important;
+    white-space: nowrap;
+    width: 100%;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    background-color: white;
+
+    .nav-link {
+      display: inline-block;
+
+      > span {
+        display: block;
+      }
+    }
+  } 
+}