@rio-cloud/rio-uikit 0.15.1 → 0.16.0-beta-3

package/lib/style/css/components/Select.less

@@ -0,0 +1,286 @@
+.select,
+.multiselect {
+
+  &:focus {
+    outline: 0;
+  }
+
+  .placeholder {
+    color: @gray;
+  }
+
+  .dropdown-toggle {
+    position: relative;
+    cursor: pointer;
+    display: inline-flex;
+    justify-content: space-between;
+    width: 100%;
+
+    &.disabled {
+      pointer-events: none;
+      background: @input-bg-disabled;
+
+      .caret {
+        color: @gray;
+      }
+
+      > .selected-option-list {
+        user-select: none;
+
+        &:after {
+          background-image: none;
+        }
+
+        .selected-option {
+          .selected-label {
+            background-color: @gray-light;
+            border-color: @gray-light;
+            color: @gray-lightest !important;
+          }
+
+          .rioglyph {
+            color: @gray-lightest !important;
+          }
+
+          .removeIcon {
+            background-color: darken(@gray-light, 3%);
+            color: @gray-lighter;
+          }
+        }
+      }
+    }
+
+    > span:first-child:not(.selected-option-list) {
+      display: block;
+      margin-right: 5px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    > .selected-option-list {
+      column-gap: 5px;
+      display: flex;
+      line-height: 18px;
+      margin-left: -5px;
+      overflow: hidden;
+      position: relative;
+      white-space: nowrap;
+      width: 100%;
+
+      // &:after {
+      //   content: "";
+      //   position: absolute;
+      //   top: 0;
+      //   right: 0;
+      //   width: 8px;
+      //   height: 100%;
+      //   background-image: linear-gradient(90deg, rgba(255,255,255,0), @input-bg);
+      // }
+
+      > .selected-option {
+        border-radius: 3px;
+        color: @color-white !important;
+        display: flex;
+
+        .rioglyph {
+          color: @color-white !important;
+        }
+
+        > .selected-label {
+          background-color: @brand-primary;
+          border-bottom-left-radius: 3px;
+          border-top-left-radius: 3px;
+          border: 1px solid @brand-primary;
+          padding: 0 4px;
+        }
+
+        > .removeIcon {
+          align-items: center;
+          background-color: @color-highlight-dark;
+          border-bottom-right-radius: 3px;
+          border-top-right-radius: 3px;
+          display: flex;
+          padding: 1px 4px;
+          transition: color 0.2ms ease-in-out;
+
+          &:hover {
+            background-color: darken(@brand-primary, 6%);
+          }
+
+          > .rioglyph {
+            font-size: 12px;
+            position: relative;
+          }
+        }
+      }
+    }
+
+    .select-filter-input,
+    .multiselect-filter-input {
+      background: transparent;
+      border: none;
+      bottom: 1px;
+      height: calc(~"100% - 1px");
+      left: 1px;
+      outline: none;
+      padding: 0 12px;
+      position: absolute;
+      top: 1px;
+      width: calc(~"100% - 30px");
+
+      &-active {
+        background-color: @color-white;
+      }
+    }
+
+    > .clearButton {
+      align-items: center;
+      color: @gray;
+      cursor: pointer;
+      display: flex;
+      height: 100%;
+      justify-content: flex-end;
+      transition: all 0.15s ease-in-out;
+      width: 26px;
+      z-index: 3;
+    }
+  }
+
+  .input-lg {
+    .dropdown-menu {
+      top: @input-height-lg;
+    }
+  }
+
+  .input-sm {
+    .dropdown-menu {
+      top: @input-height-sm;
+    }
+  }
+
+  .dropdown-menu {
+    max-height: @dropdown-max-height;
+    overflow-x: hidden;
+
+    svg {
+      margin-right: 0.5em;
+      vertical-align: middle;
+    }
+
+    > li {
+      > a.focus {
+        text-decoration: none;
+        color: @color-white;
+        background-color: @brand-primary;
+      }
+
+      &.active {
+        > a:before {
+          .rioglyph();
+          content: @rioglyph-ok;
+          font-family: @icon-font-name;
+          font-size: 12px;
+          left: -5px;
+          position: relative;
+        }
+      }
+    }
+  }
+
+  &.dropup.open .dropdown-menu {
+    bottom: 0;
+    left: 0;
+    transform: translateY(~"-@{btn-size-default}");
+
+    .input-sm & {
+      transform: translateY(~"-@{btn-size-sm}");
+    }
+
+    .input-lg & {
+      transform: translateY(~"-@{btn-size-lg}");
+    }
+  }
+
+  .inactiveIcon {
+    .rioglyph, span {
+      color: @gray-light!important;
+    }
+  }
+}
+
+.input-group-btn > .select.dropdown.open {
+  .dropdown-menu {
+    top: @input-height-base;
+  }
+}
+
+// default html5 select styling
+@selectArrowColor: escape('@{gray-dark}');
+select {
+  &.form-control {
+    .form-control;
+
+    .form-group-lg &,
+    &.input-lg {
+      .form-group-lg .form-control;
+    }
+
+    .form-group-sm &,
+    &.input-sm {
+      .form-group-sm .form-control;
+    }
+
+    // disable default appearance
+    outline: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+
+    &::-ms-expand { display: none };
+
+    &:focus {
+      box-shadow: none;
+      border: 1px solid @input-border;
+    }
+
+    &:not([multiple]) {
+      background-image: url(~"data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%22111%22%20height%3D%2271%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.arrow%7Bfill%3A@{selectArrowColor}%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22arrow%22%20fill-rule%3D%22nonzero%22%20d%3D%22M55.5%2071L0%2015.546%2015.563%200%2055.5%2039.878%2095.437%200%20111%2015.546z%22%2F%3E%3C%2Fsvg%3E");
+      background-position: right 10px center;
+      background-repeat: no-repeat;
+      background-size: auto 25%;
+      padding-right: 30px;
+
+      &:focus {
+        box-shadow: none;
+        border: 1px solid @input-border;
+        background-image: url(~"data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%22111%22%20height%3D%2271%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.arrow%7Bfill%3A@{selectArrowColor}%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22arrow%22%20fill-rule%3D%22nonzero%22%20d%3D%22M55.5%200L0%2055.454%2015.563%2071%2055.5%2031.122%2095.437%2071%20111%2055.454z%22%2F%3E%3C%2Fsvg%3E%0A");
+      }
+    }
+  }
+}
+
+.multiselect {
+  .dropdown-toggle {
+    > .selected-option-list {
+      width: auto;
+    }
+
+    .multiselect-filter-input {
+      position: relative;
+      top: 0;
+      flex: 1 0;
+      width: 100%;
+      padding: 0;
+      background: transparent;
+
+      &-active {
+        background-color: @color-white;
+      }
+    }
+    .multiselect-filter-input-placeholder {
+      position: absolute;
+      padding-left: 12px;
+    }
+  }
+}

package/lib/style/css/components/Sidebar.less

@@ -0,0 +1,157 @@
+@sidebar-shadow-color: rgba(0, 0, 0, 0.10);
+
+.Sidebar {
+  position: relative;
+  height: 100%;
+  background-color: @color-white;
+  max-width: 100vw;
+
+  &Content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  &Header {
+    align-items: flex-start;
+    display: flex;
+    flex: 1 1 auto;
+    font-size: 16px;
+    font-weight: bold;
+    min-height: 50px;
+    padding: 13px 10px 10px 10px;
+    position: relative;
+
+    &.show-border {
+      border-bottom: 1px solid @gray-light;
+    }
+
+    .SidebarTitle {
+      flex: 1 1 auto;
+    }
+
+    .SidebarButtons {
+      align-items: center;
+      display: flex;
+      padding: 0 5px 0 0;
+
+      .btn {
+        height: 24px;
+        line-height: 24px;
+        padding: 0 5px 0 5px;
+        width: auto;
+
+        > .rioglyph {
+          font-size: 16px;
+        }
+      }
+
+      &-spacer {
+        background-color: @gray-lighter;
+        height: 14px;
+        width: 1.5px;
+        margin: 0 5px;
+      }
+    }
+  }
+
+  &Body {
+    -webkit-overflow-scrolling: touch;
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    height: 100%;
+    overflow: auto;
+
+    // &:after {
+    //   content: "";
+    //   display: flex;
+    //   flex: 1 0 auto;
+    //   height: 20px;
+    // }
+  }
+
+  &Footer {
+    background: @color-white;
+    border-top: 1px solid @gray-lighter;
+    padding: 10px;
+    position: relative;
+    text-align: right;
+
+    &:before {
+        background: linear-gradient(0deg, rgba(255,255,255,1), rgba(255,255,255,0));
+        content: "";
+        height: 20px;
+        left: 0;
+        pointer-events: none;
+        position: absolute;
+        top: -21px;
+        width: 100%;
+    }
+  }
+
+  &Backdrop {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: -1;
+  }
+
+  &ResizeLimit {
+    display: none;
+    position: absolute;
+    height: 100%;
+    width: 0px;
+    border: 1px dashed @gray-darkest;
+    opacity: 0.2;
+    pointer-events: none;
+  }
+
+  &.fluid {
+
+    // shadow layering order
+    &:not(.closed) {
+      position: relative;
+      z-index: 3;
+      ~ .Sidebar:not(.closed) {
+        z-index: 2;
+        ~ .Sidebar:not(.closed) {
+          z-index: 1;
+        }
+      }
+    }
+
+    .ApplicationLayoutSidebar:not(.right) & {
+      float: left;
+      left: 0;
+      box-shadow: 1px 0 0 0 @gray-light;
+    }
+
+    .ApplicationLayoutSidebar.right & {
+      float: right;
+      box-shadow: -1px 0 0 0 @gray-light;
+    }
+
+  }
+
+  &.fly {
+    position: absolute;
+    top: 0;
+
+    .ApplicationLayoutSidebar:not(.right) & {
+      box-shadow: 5px 5px 5px 0 @sidebar-shadow-color;
+      left: 0;
+    }
+
+    .ApplicationLayoutSidebar.right & {
+      box-shadow: -5px 5px 5px 0 @sidebar-shadow-color;
+      right: 0;
+    }
+  }
+
+  &.closed {
+    display: none;
+  }
+}

package/lib/style/css/components/Slider.less

@@ -0,0 +1,278 @@
+@dim-slider-scale: 1.25;
+
+.range-slider {
+  position: relative;
+  width: 100%;
+  height: 16px;
+
+  input[type="range"] {
+    pointer-events: auto;
+    position: absolute;
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+    border: none;
+    border-radius: 2px;
+    background: transparent;
+    height: 18px;
+    top: 0;
+    outline: none;
+    padding: 0;
+
+    // Thumb & track styling.
+    // Different browsers can not be combined!
+
+    // webkit
+    &::-webkit-slider-thumb {
+      .base-thumb-mixin();
+    }
+    &.changing::-webkit-slider-thumb {
+      transform: scale(@dim-slider-scale);
+    }
+
+    &::-webkit-slider-thumb {
+      &:first-of-type {
+        z-index: 11;
+      }
+      &:last-of-type {
+        z-index: 10;
+      }
+    }
+
+    // moz
+    &::-moz-range-thumb {
+      .base-thumb-mixin();
+
+    }
+    &.changing::-moz-range-thumb {
+      transform: scale(@dim-slider-scale);
+    }
+
+    &::-moz-range-track {
+      .base-track-mixin();
+    }
+
+    &::-moz-focus-outer {
+      border: 0;
+    }
+
+    // ms
+    &::-ms-track {
+      .base-track-mixin();
+    }
+
+    &::-ms-ticks-before,
+    &::-ms-ticks-after {
+      color:transparent;
+      display: block;
+    }
+
+    &::-ms-thumb {
+      .base-thumb-mixin();
+      width: 10px;
+      height: 10px;
+      position: absolute;
+      top: 2px;
+    }
+
+    &.changing::-ms-thumb {
+      transform: scale(@dim-slider-scale);
+    }
+
+    &::-ms-fill-lower,
+    &::-ms-fill-upper {
+      background: transparent;
+    }
+
+    &::-ms-tooltip {
+      visibility: hidden;
+    }
+  }
+
+  // Value label version
+  &.show-value-labels {
+    input[type="range"] {
+      opacity: 0;
+    }
+  }
+
+  .range-track {
+    height: 4px;
+    background: @brand-primary;
+    border-radius: 2px;
+    top: 7px;
+    position: absolute;
+
+    .range-value {
+      position: absolute;
+      bottom: calc(~"100% + 10px");
+      text-align: center;
+      background: @brand-primary;
+      padding: 2px 5px;
+      font-size: 12px;
+      line-height: 12px;
+      border-radius: 2px;
+      color: @color-white;
+
+      &:before {
+        border-color: @brand-primary transparent transparent;
+        border-style: solid;
+        border-width: 4px 4px 0 4px;
+        bottom: 0;
+        content: "";
+        height: 0;
+        left: 50%;
+        position: absolute;
+        transform: translate(-50%, 100%);
+        width: 0;
+      }
+
+      &:after {
+        background: @color-white;
+        border-radius: 9px;
+        border: 2px solid @brand-primary;
+        bottom: -16px;
+        content: "";
+        height: 9px;
+        left: 50%;
+        position: absolute;
+        transform: translateX(-50%);
+        width: 9px;
+      }
+
+      &:first-child {
+        left: auto;
+        right: 0;
+        transform: translateX(50%);
+
+        &:not(:last-child) {
+          left: 0;
+          right: auto;
+          transform: translateX(-50%);
+        }
+      }
+
+      &:last-child:not(:first-child) {
+        left: auto;
+        right: 0;
+        transform: translateX(50%);
+      }
+    }
+  }
+
+  &.large-value-labels {
+    .range-track {
+      .range-value {
+        bottom: calc(~"100% + 15px");
+        padding: 7px 8px 7px;
+        font-size: 18px;
+        line-height: 18px;
+        white-space: nowrap;
+        border-radius: 6px;
+
+        &:after {
+          border-radius: 14px;
+          bottom: -24px;
+          height: 14px;
+          width: 14px;
+        }
+      }
+    }
+  }
+
+  &.hide-value-bar {
+    .range-track {
+      background: none !important;
+    }
+  }
+
+  .range-whole-track {
+    position: absolute;
+    border: none;
+    border-radius: 2px;
+    background: @gray-lighter;
+    width: 100%;
+    height: 4px;
+    top: 7px;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+
+    input[type="range"] {
+      // webkit
+      &::-webkit-slider-thumb {
+        border-color: @gray;
+        pointer-events: none;
+      }
+
+      // moz
+      &::-moz-range-track {
+        border-color: @gray;
+        pointer-events: none;
+      }
+
+      &::-moz-range-thumb {
+        border-color: @gray;
+        pointer-events: none;
+      }
+
+      // ms
+      &::-ms-track {
+        border-color: @gray;
+        pointer-events: none;
+      }
+
+      &::-ms-thumb {
+        border-color: @gray;
+        pointer-events: none;
+      }
+    }
+
+    .range-whole-track,
+    .range-track,
+    .range,
+    .range-value,
+    input[type="range"] {
+      pointer-events: none;
+    }
+
+    .range-track {
+      background-color: @gray;
+    }
+
+    .range-value {
+      background: @gray;
+
+      &:before {
+        border-color: @gray transparent transparent;
+      }
+    }
+  }
+}
+
+.base-track-mixin() {
+  position: relative;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  background: none transparent;
+  border: 0;
+  color: transparent;
+}
+
+.base-thumb-mixin() {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  pointer-events: all;
+  position: relative;
+  width: 14px;
+  height: 14px;
+  border: 2px solid @brand-primary;
+  border-radius: 14px;
+  background: @color-white;
+  outline: 0;
+  cursor: ew-resize;
+
+  &:hover {
+    transform: scale(@dim-slider-scale);
+  }
+}