ui_bibz 3.0.13 → 4.0.0.beta4

data/app/assets/stylesheets/sass/containers/_panel.scss

@@ -0,0 +1,330 @@
+$panel-spacer:                       .75rem !default;
+$panel-spacer-y:                     .75rem !default;
+$panel-spacer-x:                     1.25rem !default;
+$panel-border-width:                 $border-width !default;
+$panel-border-radius:                $border-radius !default;
+$panel-border-color:                 $card-border-color;
+$panel-inner-border-radius:          calc(#{$panel-border-radius} - #{$panel-border-width}) !default;
+$panel-cap-bg:                       $card-cap-bg;
+$panel-bg:                           $card-bg;
+
+$panel-img-overlay-padding:          1.25rem !default;
+
+$panel-group-margin:                 $panel-spacer/2 !default;
+$panel-deck-margin:                  $panel-group-margin !default;
+
+$panel-columns-count:                3 !default;
+$panel-columns-gap:                  1.25rem !default;
+$panel-columns-margin:               $panel-spacer-y !default;
+
+.panel {
+  margin: 0;
+  padding: 0;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: $panel-bg;
+  background-clip: border-box;
+  border: $panel-border-width solid $panel-border-color;
+  @include border-radius($panel-border-radius);
+
+  > hr {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  > .list-group:first-child {
+    .list-group-item:first-child {
+      @include border-top-radius($panel-border-radius);
+    }
+  }
+
+  > .list-group:last-child {
+    .list-group-item:last-child {
+      @include border-bottom-radius($panel-border-radius);
+    }
+  }
+
+  // Select all panel toolbar except the first
+  > .panel-toolbar ~ .panel-toolbar {
+    border-top: $panel-border-width solid $panel-border-color;
+    border-bottom: $panel-border-width solid $panel-border-color;
+  }
+
+  // Select first panel-toolbar
+  > .panel-toolbar {
+    border-top: none;
+    padding: $panel-spacer;
+    background-color: $panel-cap-bg;
+    border-bottom: $panel-border-width solid $panel-border-color;
+  }
+
+  > .panel-toolbar ~ .panel-toolbar {
+    border-bottom: none !important;
+  }
+  // Select last panel-toolbar
+
+}
+
+.panel-body {
+  // Enable `flex-grow: 1` for decks and groups so that panel blocks take up
+  // as much space as possible, ensuring footers are aligned to the bottom.
+  flex: 1 1 auto;
+  padding: $panel-spacer;
+}
+
+.panel-title {
+  margin-bottom: $panel-spacer-y;
+}
+
+.panel-subtitle {
+  margin-top: -($panel-spacer-y / 2);
+  margin-bottom: 0;
+}
+
+.panel-text:last-child {
+  margin-bottom: 0;
+}
+
+.panel-link {
+  &:hover {
+    text-decoration: none;
+  }
+
+  + .panel-link {
+    margin-left: $panel-spacer-x;
+  }
+}
+
+//
+// Optional textual caps
+//
+
+.panel-header {
+  padding: $panel-spacer;
+  margin-bottom: 0; // Removes the default margin-bottom of <hN>
+  background-color: $panel-cap-bg;
+  border-bottom: $panel-border-width solid $panel-border-color;
+  display: flex;
+
+  > div:not(.dropdown) {
+    position: relative;
+    display: inline-flex;
+    vertical-align: middle;
+  }
+
+  &:first-child {
+    @include border-radius($panel-inner-border-radius $panel-inner-border-radius 0 0);
+  }
+
+  + .list-group {
+    .list-group-item:first-child {
+      border-top: 0;
+    }
+  }
+
+  .panel-title {
+    padding: 0;
+    margin: 0;
+  }
+}
+
+
+.panel-footer {
+  padding: $panel-spacer-y;
+  background-color: $panel-cap-bg;
+  border-top: $panel-border-width solid $panel-border-color;
+
+  &:last-child {
+    @include border-radius(0 0 $panel-inner-border-radius $panel-inner-border-radius);
+  }
+}
+
+.panel-toolbar .btn-toolbar{
+  margin: 0;
+}
+
+//
+// Header navs
+//
+
+.panel-header-tabs {
+  margin-right: -($panel-spacer-x / 2);
+  margin-bottom: -$panel-spacer-y;
+  margin-left: 0;
+  border-bottom: 0;
+}
+
+.panel-header-pills {
+  margin-right: -($panel-spacer-x / 2);
+  margin-left: -($panel-spacer-x / 2);
+}
+
+// panel image
+.panel-img-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: $panel-img-overlay-padding;
+}
+
+.panel-img {
+  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
+  @include border-radius($panel-inner-border-radius);
+}
+
+// panel image caps
+.panel-img-top {
+  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
+  @include border-top-radius($panel-inner-border-radius);
+}
+
+.panel-img-bottom {
+  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
+  @include border-bottom-radius($panel-inner-border-radius);
+}
+
+
+// panel deck
+
+.panel-deck {
+  display: flex;
+  padding: $panel-spacer;
+  flex-direction: column;
+
+  & > .panel {
+    margin-bottom: $panel-deck-margin;
+  }
+
+  @include media-breakpoint-up(sm) {
+    flex-flow: row wrap;
+    margin-right: -$panel-deck-margin;
+    margin-left: -$panel-deck-margin;
+
+    & > .panel {
+      display: flex;
+      // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
+      flex: 1 0 0%;
+      flex-direction: column;
+      margin-right: $panel-deck-margin;
+      margin-bottom: 0; // Override the default
+      margin-left: $panel-deck-margin;
+    }
+  }
+}
+
+
+//
+// panel groups
+//
+
+.panel-group {
+  display: flex;
+  flex-direction: column;
+
+  .panel {
+    border-radius: 0;
+    border: none;
+    border-right: $panel-border-width solid $panel-border-color;
+    margin-bottom: $panel-group-margin;
+  }
+
+  .panel:last-child {
+    border-right: none;
+  }
+
+  @include media-breakpoint-up(sm) {
+    flex-flow: row wrap;
+
+    .panel {
+      // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
+      flex: 1 0 0%;
+      margin-bottom: 0;
+
+      + .panel {
+        margin-left: 0;
+        border-left: 0;
+      }
+
+
+      // Handle rounded corners
+      @if $enable-rounded {
+        &:first-child {
+          @include border-end-radius(0);
+
+          .panel-img-top,
+          .panel-header {
+            border-top-right-radius: 0;
+          }
+          .panel-img-bottom,
+          .panel-footer {
+            border-bottom-right-radius: 0;
+          }
+        }
+
+        &:last-child {
+          @include border-start-radius(0);
+
+          .panel-img-top,
+          .panel-header {
+            border-top-left-radius: 0;
+          }
+          .panel-img-bottom,
+          .panel-footer {
+            border-bottom-left-radius: 0;
+          }
+        }
+
+        &:only-child {
+          @include border-radius($panel-border-radius);
+
+          .panel-img-top,
+          .panel-header {
+            @include border-top-radius($panel-border-radius);
+          }
+          .panel-img-bottom,
+          .panel-footer {
+            @include border-bottom-radius($panel-border-radius);
+          }
+        }
+
+        &:not(:first-child):not(:last-child):not(:only-child) {
+          @include border-radius(0);
+
+          .panel-img-top,
+          .panel-img-bottom,
+          .panel-header,
+          .panel-footer {
+            @include border-radius(0);
+          }
+        }
+      }
+    }
+  }
+}
+
+
+//
+// Columns
+//
+
+.panel-columns {
+  padding: $panel-spacer;
+  .panel {
+    margin-bottom: $panel-columns-margin;
+  }
+
+  @include media-breakpoint-up(sm) {
+    column-count: $panel-columns-count;
+    column-gap: $panel-columns-gap;
+
+    .panel {
+      display: inline-block; // Don't let them vertically span multiple columns
+      width: 100%; // Don't let their width change
+    }
+  }
+}

data/app/assets/stylesheets/sass/forms/_bootstrap_select.sass

@@ -0,0 +1,5 @@
+.bootstrap-select button
+  min-height: 40px
+
+.bootstrap-select .dropdown-menu li a
+  min-height: 32px

data/app/assets/stylesheets/sass/forms/_button.sass

@@ -0,0 +1,3 @@
+.btn
+  .empty-space
+    margin-left: -4px

data/app/assets/stylesheets/sass/forms/_combobox.sass

@@ -0,0 +1,32 @@
+.combobox
+  width: 100%
+  position: relative
+
+.combobox-list
+  position: absolute
+  z-index: 99
+  top: 100%
+  left: 0
+  right: 0
+
+.combobox .turbo-frame-error
+  position: absolute
+  z-index: 99
+  top: 100%
+  left: 0
+  right: 0
+  padding: 10px
+  cursor: pointer
+  background-color: #fff
+  border-bottom: 1px solid #d4d4d4
+  border-left: 1px solid #d4d4d4
+  border-right: 1px solid #d4d4d4
+
+.input-group > .combobox:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback)
+  input
+    border-top-left-radius: 0
+    border-bottom-left-radius: 0
+
+.input-group:not(.has-validation) > .combobox:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating)
+  input
+    border-radius: 0px

data/app/assets/stylesheets/sass/forms/_date_picker.sass

@@ -0,0 +1,3 @@
+.date_picker
+  min-width: 104px
+

data/app/assets/stylesheets/sass/forms/_form_check.sass

@@ -0,0 +1,10 @@
+@each $color, $value in $theme-colors
+  .form-check-input-#{$color}
+    &:checked
+      background-color: $value
+      border-color: $value
+
+    &:focus
+      border-color: $value
+      outline: 0
+      box-shadow: 0 0 0 $input-btn-focus-width rgba($value, $input-btn-focus-color-opacity)

data/app/assets/stylesheets/sass/forms/_formula_field.sass

@@ -0,0 +1,17 @@
+.formula_field
+  input
+    border-bottom-right-radius: 0.25rem !important
+    border-top-right-radius: 0.25rem !important
+  .fix-border-right
+    border-bottom-right-radius: 0 !important
+    border-top-right-radius: 0 !important
+  width: 100%
+  .form-control[readonly]
+    background-color: darken($body-bg, 2%)
+  .formula-field_alert, .formula-field-result, .formula-field-sign
+    display: none
+  .formula-field:first-child
+    flex-grow: 3
+
+.formula-field-alert
+  padding-top: 10px

data/app/assets/stylesheets/sass/forms/_multiselect.sass

@@ -0,0 +1,44 @@
+.multiselect-container
+  padding: 10px
+.multiselect-container > li > a > label
+  padding: 3px 20px 3px 10px
+  > input[type=checkbox]
+    margin-bottom: 0px
+
+.multiselect-container
+  height: max-content // fix with bootstrap v 5.0.0-beta1
+  .filter
+    margin: 5px
+
+.without-caret
+  .dropdown-toggle::after
+    content: none
+
+.ui_surround_field > .multiselect-native-select .multiselect
+  border-radius: 0px
+
+// .ui_surround_field .multiselect-native-select .multiselect
+.ui_surround_field .multiselect-native-select:first-child .multiselect
+  @include border-start-radius($border-radius)
+
+.ui_surround_field .multiselect-native-select:last-child .multiselect
+  @include border-end-radius($border-radius)
+
+.multiselect-native-select
+  button.multiselect
+    padding-right: 30px !important
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e")
+  .dropdown-menu
+    padding: 0
+    flex-direction: column
+    &.show
+      display: flex !important
+
+  .multiselect-filter
+    background-color: white
+    position: sticky
+    top: 0px
+    z-index: 1
+  .dropdown-menu
+    overflow: auto
+    max-height: 300px

data/app/assets/stylesheets/sass/forms/_range.sass

@@ -0,0 +1,44 @@
+// Fix Add datalist to range field
+.form-range
+  appearance: auto
+
+// Fix Add datalist to range field
+input[type=range]
+  & + datalist
+    width: 100%
+    display: flex
+    justify-content: space-between
+
+
+@each $color, $value in $theme-colors
+  .form-range-#{$color}
+    -webkit-appearance: none
+    appearance: none
+    &:focus
+      &::-webkit-slider-thumb
+        box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width rgba($value, $input-btn-focus-color-opacity)
+    &::-webkit-slider-thumb
+      appearance: none
+      @include gradient-bg($value)
+      &:active
+        @include gradient-bg(lighten($value, 15%))
+    &::-webkit-slider-runnable-track
+      background-color: $value
+
+  .form-range-thumb-#{$color}
+    -webkit-appearance: none
+    appearance: none
+    &:focus
+      &::-webkit-slider-thumb
+        box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width rgba($value, $input-btn-focus-color-opacity)
+    &::-webkit-slider-thumb
+      appearance: none
+      @include gradient-bg($value)
+      &:active
+        @include gradient-bg(lighten($value, 15%))
+
+  .form-range-track-#{$color}
+    -webkit-appearance: none
+    appearance: none
+    &::-webkit-slider-runnable-track
+      background-color: $value

data/app/assets/stylesheets/sass/forms/_slider.sass

@@ -0,0 +1,136 @@
+$slider-bg-color: #DEE2E6
+$slider-height: 8px
+$slider-color: $primary
+$thumb-size: 16px
+$thumb-color: $primary
+$thumb-radius: 50%
+
+.slider
+  position: relative
+  height: $slider-height
+  border-radius: 10px
+  text-align: left
+  margin: .5rem 0
+  background-color: $slider-bg-color
+  & > div
+    position: absolute
+    left: 7px
+    right: 7px
+    height: $slider-height
+    & > .slider-inverse-left
+      position: absolute
+      left: 0
+      height: $slider-height
+      border-radius: 10px
+      background-color: $slider-bg-color
+      margin: 0 7px
+    & > .slider-inverse-right
+      position: absolute
+      right: 0
+      height: $slider-height
+      border-radius: 10px
+      background-color: $slider-bg-color
+      margin: 0 7px
+    & > .slider-range
+      position: absolute
+      left: 0
+      height: $slider-height
+      background-color: $slider-color
+      border-radius: 14px
+    & > .slider-thumb
+      position: absolute
+      top: -4px
+      z-index: 2
+      height: $thumb-size
+      width: $thumb-size
+      text-align: left
+      margin-left: -11px
+      cursor: pointer
+      //box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4)
+      background-color: $thumb-color
+      border-radius: $thumb-radius
+      outline: none
+      &:active
+        box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width rgba($slider-color , $input-btn-focus-color-opacity)
+  & > input[type=range]
+    position: absolute
+    pointer-events: none
+    -webkit-appearance: none
+    cursor: pointer
+    z-index: 3
+    height: $slider-height
+    width: 100%
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
+    filter: alpha(opacity=0)
+    -moz-opacity: 0
+    -khtml-opacity: 0
+    opacity: 0
+div.slider
+  & > input[type=range]::-ms-track
+    -webkit-appearance: none
+    background: transparent
+    color: transparent
+  & > input[type=range]::-moz-range-track
+    -moz-appearance: none
+    background: transparent
+    color: transparent
+  & > input[type=range]:focus
+    outline: none
+    &::-webkit-slider-runnable-track
+      background: transparent
+      border: transparent
+  & > input[type=range]::-ms-thumb
+    pointer-events: all
+    width: $thumb-size
+    height: $thumb-size
+    border-radius: $thumb-radius
+    border: 0 none
+  & > input[type=range]::-moz-range-thumb
+    pointer-events: all
+    width: $thumb-size
+    height: $thumb-size
+    border-radius: $thumb-radius
+    border: 0 none
+  & > input[type=range]::-webkit-slider-thumb
+    pointer-events: all
+    width: $thumb-size
+    height: $thumb-size
+    border-radius: $thumb-radius
+    border: 0 none
+    -webkit-appearance: none
+  & > input[type=range]::-ms-fill-lower
+    background: transparent
+    border: 0 none
+  & > input[type=range]::-ms-fill-upper
+    background: transparent
+    border: 0 none
+  & > input[type=range]::-ms-tooltip
+    display: none
+
+.slider.disabled > div > .slider-thumb, .slider.disabled > div > .slider-range
+  background-color: $gray-500
+
+@each $color, $value in $theme-colors
+  .slider-#{$color}
+    input[type=range]
+      -webkit-appearance: none
+      appearance: none
+      &:focus, &:active, &:hover
+        &::-webkit-slider-thumb
+          box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-btn-focus-width rgba($value, $input-btn-focus-color-opacity) !important
+    & > div
+      & > .slider-range
+        background-color: $value
+      & > .slider-thumb
+        background-color: $value
+
+  .slider-track-#{$color}
+    background-color: $value
+    input[type=range]::-webkit-slider-runnable-track
+      background-color: $value
+      appearance: none
+    & > div
+      & > .slider-inverse-right
+        background-color: $value
+      & > .slider-inverse-left
+        background-color: $value

data/app/assets/stylesheets/sass/forms/_surround_field.sass

@@ -0,0 +1,25 @@
+.ui_surround_field
+  .custom-control
+    .custom-control-label
+      margin-left: 0px !important
+      padding-right: 10px
+      margin-right: 0
+    .custom-control-label:after, .custom-control-label:before
+      right: 0
+      left: 0
+
+  flex-wrap: nowrap
+  .mr-sm-2
+    margin-right: 0px !important
+  input:not(:first-child):not(:last-child)
+    border-radius: 0px
+    input
+      margin-left: 0.5rem
+  select:not(:first-child):not(:last-child)
+    border-radius: 0px
+
+.form-group-invalid
+  & input
+    border-color: $danger
+  & .invalid-feedback
+    display: block

data/app/assets/stylesheets/sass/notifications/_badge.sass

@@ -0,0 +1,5 @@
+// fix undernline when the badge is a link
+a.badge
+  text-decoration: none
+  &:hover
+    color: white

data/app/assets/stylesheets/sass/notifications/_glyph.sass

@@ -0,0 +1,3 @@
+@each $key, $value in $states_colors
+  .glyph-#{$key}
+    color: $value

data/app/assets/stylesheets/sass/notifications/_star.sass

@@ -0,0 +1,2 @@
+.stars-notation
+  white-space: nowrap

data/app/assets/stylesheets/sass/notifications/_toast.sass

@@ -0,0 +1,3 @@
+.toast .toast-header img
+  width: 20px
+  height: 20px