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

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

@@ -0,0 +1,224 @@
+@dim-checkbox-size-default: 16px;
+@dim-checkbox-size-lg: 20px;
+@color-disabled-inverted: darken(@gray-darker, 20%);
+
+.checkbox {
+  color: @gray-darkest;
+  cursor: pointer;
+  font-size: @font-size-default;
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.checkbox + .checkbox {
+  margin-top: 0; // Overwrite BS default
+}
+
+.checkbox > label,
+.checkbox label {
+  padding-left: 0;
+}
+
+.checkbox-inline {
+  padding-left: 0;
+  padding-right: 0;
+  margin-right: 15px;
+}
+
+.checkbox,
+.checkbox-inline {
+  // focused state
+  &:focus {
+    outline: none;
+
+    // use tag name for being stronger than the checked style and to avoid using important
+    input[type='checkbox'] + .checkbox-text:before {
+      border-color: @gray-darker;
+    }
+  }
+
+  input[type='checkbox'] {
+    &:not(:required) {
+      display: none;
+    };
+
+    &:required {
+      margin-left: 1px;
+      opacity: 0;
+      pointer-events: none;
+    };
+
+    + .checkbox-text,
+    + .checkbox-text-wrapper > .checkbox-text {
+      align-items: flex-start;
+      cursor: pointer;
+      display: flex;
+      font-weight: @font-normal;
+      column-gap: 7px;
+      text-align: left;
+
+      .table-checkbox & {
+        justify-content: center;
+      }
+
+      // FALLBACK
+      .css-no-gap & {
+        > span {
+          margin-left: 5px;
+        }
+      }
+
+      &:before,
+      &:after {
+        -webkit-font-smoothing: antialiased;
+        background-color: transparent;
+        border-radius: @border-radius-sm;
+        border: 1px solid @gray;
+        display: block;
+        font-family: @icon-font-name;
+        font-style: normal;
+        font-weight: @font-normal;
+        height: @dim-checkbox-size-default;
+        margin-top: 2px;
+        min-height: @dim-checkbox-size-default;
+        min-width: @dim-checkbox-size-default;
+        position: relative;
+        width: @dim-checkbox-size-default;
+      }
+
+      &:before {
+        content: '';
+      }
+
+      > span {
+        flex: 1 1;
+
+        &:empty {
+          display: none;
+        }
+      }
+    }
+
+    + .checkbox-icon {
+      align-items: center;
+      display: flex;
+
+      &.label-vertical {
+        align-items: center;
+        flex-direction: column;
+        hyphens: auto;
+        overflow: hidden;
+        text-align: center;
+        word-break: break-word;
+        word-wrap: break-word;
+      }
+
+      &.label-horizontal {
+        .checkbox-label {
+          margin-left: 5px;
+        }
+      }
+
+      .rioglyph {
+        color: @gray;
+        display: block;
+      }
+
+      .checkbox-label {
+        color: @gray-darkest;
+      }
+    }
+
+    // Define style for 'checked' state
+    &:checked {
+      + .checkbox-text,
+      + .checkbox-text-wrapper > .checkbox-text {
+        &:before {
+          .rioglyph();
+          content: @rioglyph-ok;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 88%;
+          color: @color-white;
+          border-color: @brand-primary;
+          background-color: @brand-primary;
+          animation: checkbox-tick 100ms ease-in;
+        }
+      }
+
+      + .checkbox-icon {
+        .rioglyph {
+          animation: checkbox-tick 100ms ease-in;
+          color: @brand-primary;
+        }
+      }
+    }
+
+    &.no-animation + .checkbox-text:before {
+      animation: none;
+    }
+
+    // Define style for 'diabled' state
+    &:disabled + .checkbox-text {
+      //color: @gray-light;
+      opacity: 0.5;
+      cursor: not-allowed;
+
+      &:before {
+        border-color: @gray-light;
+        background-color: @gray-light;
+      }
+    }
+
+    // indeterminate state is used in combination with other checkboxes
+    // where they have different selection state
+    &:indeterminate + .checkbox-text:before {
+      .rioglyph();
+      content: @rioglyph-minus-light;
+      color: @brand-primary;
+      border-color: @brand-primary;
+      background-color: @color-white;
+    }
+
+    // Define colors for error case
+    &.error + .checkbox-text,
+    &:required:focus:not(:checked) + .checkbox-text {
+      &:before {
+        border-color: @brand-danger;
+      }
+    }
+
+    // Define larger size for checkbox only
+    &.large,
+    &.input-lg {
+      + .checkbox-text:before {
+        font-size: 16px;
+        height: @dim-checkbox-size-lg;
+        margin-top: 0;
+        min-height: @dim-checkbox-size-lg;
+        min-width: @dim-checkbox-size-lg;
+        width: @dim-checkbox-size-lg;
+      }
+    }
+  }
+}
+
+.checkbox-right > .checkbox-text {
+  flex-direction: row-reverse;
+  > span {
+    text-align: right;
+  }
+}
+
+@keyframes checkbox-tick {
+  0% {
+    transform: scale(0);
+  }
+  90% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}

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

@@ -0,0 +1,115 @@
+.ClearableInput {
+  flex: 1 0 auto;
+  transition: all 0.2s ease-in-out;
+
+  // > .withClearButton {
+  //   padding-right: 30px;
+  // }
+
+  > .clearButton {
+    .inputClearButton();
+  }
+
+  > .form-control {
+    &.disabled,
+    &[disabled] {
+      + .clearButton {
+        display: none
+      }
+    }
+  }
+
+  > .form-control {
+    border-radius: @border-radius-default;
+  }
+
+  .Autosuggest & {
+    border-radius: @border-radius-default 0 0 @border-radius-default;
+  }
+
+  // disable ms default clear button
+  ::-ms-clear {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+}
+
+// Case for having addons
+.input-group {
+  .input-group-addon + .ClearableInput {
+    > .form-control {
+      padding-left: 30px;
+
+      .form-group-lg & {
+        padding-left: 48px;
+      }
+    }
+  }
+
+  &.ClearableInput {
+    + .input-group-addon {
+      padding-left: @padding-default-horizontal;
+      z-index: 3;
+
+      .form-group-lg & {
+        padding-left: @padding-lg-horizontal;
+      }
+    }
+  }
+
+  > .ClearableInput:not(:last-child) > .form-control {
+    border-right: none;
+  }
+}
+
+// Case for having feedback-icons
+.form-group.has-feedback {
+  .ClearableInput {
+    > .form-control {
+      padding-right: 52px;
+    }
+
+    .clearButton {
+      right: 28px;
+    }
+  }
+
+  .ClearableInput + .form-control-feedback {
+    z-index: 3;
+  }
+}
+
+// The inputClearButton class is used for multiple inputs such as clearableInput, DateRangePicker...
+.inputClearButton {
+  align-items: center;
+  background: @color-white;
+  border-radius: @border-radius-default;
+  bottom: 2px;
+  color: @gray;
+  cursor: pointer;
+  display: flex;
+  justify-content: flex-start;
+  position: absolute;
+  right: 2px;
+  top: 2px;
+  transition: all 0.15s ease-in-out;
+  width: 20px;
+  z-index: 3;
+
+  @duration: 0.2s;
+  animation: fadeInAnimation @duration;
+
+  @keyframes fadeInAnimation {
+    from { opacity: 0 }
+    to   { opacity: 1 }
+  }
+
+  &:hover {
+    color: darken(@gray, 20%);
+  }
+
+  > .clearButtonIcon {
+    font-size: 16px;
+  }
+}

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

@@ -0,0 +1,142 @@
+.counter {
+  counter-reset: rio-counter;
+
+  @counterSizeSmall: 30px;
+  @counterSizeNormal: 40px;
+  @counterSizeLarge: 50px;
+
+  > * {
+    display: flex;
+    align-items: center;
+    flex: 1 0 auto;
+    position: relative;
+
+    &:before {
+      content: counter(rio-counter);
+      counter-increment: rio-counter;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      border-style: solid;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    &[data-count]:before {
+      content: attr(data-count);
+    }
+  }
+
+  &.size-small {
+    > * {
+      padding-left: @counterSizeSmall * 1.25;
+      margin-bottom: @counterSizeSmall * 0.5;
+      min-height: @counterSizeSmall;
+
+      &:before {
+        font-size: @counterSizeSmall * 0.5;
+        line-height: @counterSizeSmall * 0.5;
+        width: @counterSizeSmall;
+        height: @counterSizeSmall;
+        border-width: 2px;
+        border-radius: @counterSizeSmall;
+        margin-right: @counterSizeSmall * 0.5;
+      }
+    }
+  }
+
+  &:not([class*="size-"]) {
+    > * {
+      padding-left: @counterSizeNormal * 1.25;
+      margin-bottom: @counterSizeNormal * 0.5;
+      min-height: @counterSizeNormal;
+
+      &:before {
+        font-size: @counterSizeNormal * 0.5;
+        line-height: @counterSizeNormal * 0.5;
+        width: @counterSizeNormal;
+        height: @counterSizeNormal;
+        border-width: 2px;
+        border-radius: @counterSizeNormal;
+        margin-right: @counterSizeNormal * 0.5;
+      }
+    }
+  }
+
+  &.size-large {
+    > * {
+      padding-left: @counterSizeLarge * 1.25;
+      margin-bottom: @counterSizeLarge * 0.5;
+      min-height: @counterSizeLarge;
+
+      &:before {
+        font-size: @counterSizeLarge * 0.5;
+        line-height: @counterSizeLarge * 0.5;
+        width: @counterSizeLarge;
+        height: @counterSizeLarge;
+        border-width: 2px;
+        border-radius: @counterSizeLarge;
+        margin-right: @counterSizeLarge * 0.5;
+      }
+    }
+  }
+
+  &:not([class*="color-"]),
+  &.color-gray {
+    > * {
+      &:before {
+        color: @gray;
+        border-color: @gray;
+      }
+    }
+    &.filled {
+      > * {
+        &:before {
+          background-color: @gray;
+          border: none;
+          color: @color-white;
+        }
+      }
+    }
+  }
+
+  &.color-highlight, // backward compatibility
+  &.color-primary {
+    > * {
+      &:before {
+        color: @brand-primary;
+        border-color: @brand-primary;
+      }
+    }
+    &.filled {
+      > * {
+        &:before {
+          background-color: @brand-primary;
+          border: none;
+          color: @color-white;
+        }
+      }
+    }
+  }
+
+  &.color-onboarding, // backward compatibility
+  &.color-secondary {
+    > * {
+      &:before {
+        color: @brand-secondary;
+        border-color: @brand-secondary;
+      }
+    }
+    &.filled {
+      > * {
+        &:before {
+          background-color: @brand-secondary;
+          border: none;
+          color: @color-white;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,100 @@
+@dim-dataTabs-arrow: 10px;
+
+.DataTabsContainer {
+  .expander-panel & {
+    padding-top: 1px;
+  }
+
+  &.DataTab-bordered {
+    border: 1px solid @nav-tabs-border-color;
+  }
+
+  // vertical
+  &.DataTabs-vertical {
+    display: flex;
+
+    .DataTabsWrapper {
+      width: 200px;
+
+      .DataTabs {
+        flex-direction: column;
+        margin-bottom: 0;
+      }
+
+      + * {
+        flex: 1 1 0;
+      }
+    }
+  }
+}
+
+.DataTabsWrapper {
+  background: @color-white;
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-bottom: 8px;
+
+  // vertical
+  .DataTabs-vertical & {
+    padding-bottom: 0;
+    padding-right: 8px;
+    overflow-x: hidden;
+    overflow-y: hidden;
+  }
+}
+
+.DataTabs {
+  .list-unstyled();
+  display: flex;
+  border-bottom: none;
+
+  .DataTab {
+    flex: 1 0;
+    padding: 15px;
+    position: relative;
+    transition: background 100ms ease-in-out ~"," box-shadow 100ms ease-in-out 100ms;
+
+    &:not(.active) {
+      box-shadow: inset 0px -1px 0px @nav-tabs-border-color;
+      transition: background 100ms ease-in-out;
+
+      // vertical
+      .DataTabs-vertical & {
+        box-shadow: inset 0px -1px 0px @nav-tabs-border-color ~"," inset -1px 0 0px @nav-tabs-border-color;
+
+        &:last-child {
+          margin-bottom: -1px;
+        }
+      }
+    }
+
+    .arrow {
+      background-color: @color-highlight-dark;
+      bottom: 0;
+      display: block;
+      height: @dim-dataTabs-arrow;
+      opacity: 0;
+      position: absolute;
+      transform: rotate(-45deg);
+      width: @dim-dataTabs-arrow;
+
+      &.in {
+        bottom: -(@dim-dataTabs-arrow / 2);
+        opacity: 1;
+        transition: opacity 100ms ease-in 100ms ~"," bottom 100ms ease-in 100ms;
+      }
+
+      // vertical
+      .DataTabs-vertical & {
+        bottom: calc(~"50% - (@{dim-dataTabs-arrow} / 2)");
+        right: 0;
+
+        &.in {
+          right: -(@dim-dataTabs-arrow / 2);
+          bottom: calc(~"50% - (@{dim-dataTabs-arrow} / 2)");
+          transition: opacity 100ms ease-in 100ms ~"," right 100ms ease-in 100ms;
+        }
+      }
+    }
+  }
+}