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

package/lib/style/css/design/popovers.less

@@ -0,0 +1,117 @@
+@popover-max-width: 550px;
+@popover-arrow-width: 10px;
+@popover-arrow-outer-width: (@popover-arrow-width + 1);
+
+.popover {
+  &:extend(.shadow-hard-to-bottom);
+  background-clip: padding-box;
+  background-color: @color-white;
+  border-radius: @border-radius-lg;
+  border: 1px solid @gray-light;
+  max-width: @popover-max-width;
+  padding: 0;
+  position: absolute;
+  z-index: @zindex-popover;
+
+  .popover-title {
+    border-bottom: 1px solid @gray-light;
+    padding: 13px 14px;
+    font-weight: normal;
+  }
+
+  .popover-content:not(.ActionBarItemPopover) {
+    //padding: 9px 14px;
+    padding: 15px;
+  }
+
+  .ActionBarItemPopoverContent {
+    padding: 15px;
+  }
+
+  > .arrow {
+    border-width: @popover-arrow-outer-width;
+
+    &,
+    &:after {
+      position: absolute;
+      display: block;
+      width: 0;
+      height: 0;
+      border-color: transparent;
+      border-style: solid;
+    }
+
+    &:after {
+      border-width: @popover-arrow-width;
+      content: "";
+    }
+  }
+
+  &[x-placement^="top"] {
+    > .arrow {
+      left: 50%;
+      border-bottom-width: 0;
+      border-top-color: @gray-light;
+      bottom: -(@popover-arrow-outer-width);
+
+      &:after {
+        content: "";
+        bottom: 1px;
+        margin-left: -(@popover-arrow-width);
+        border-bottom-width: 0;
+        border-top-color: @color-white;
+      }
+    }
+  }
+
+  &[x-placement^="right"] {
+    > .arrow {
+      top: 50%;
+      left: -(@popover-arrow-outer-width);
+      border-left-width: 0;
+      border-right-color: @gray-light;
+
+      &:after {
+        content: "";
+        left: 1px;
+        bottom: -(@popover-arrow-width);
+        border-left-width: 0;
+        border-right-color: @color-white;
+      }
+    }
+  }
+
+  &[x-placement^="bottom"] {
+    > .arrow {
+      left: 50%;
+      border-top-width: 0;
+      border-bottom-color: @gray-light;
+      top: -(@popover-arrow-outer-width);
+
+      &:after {
+        content: "";
+        top: 1px;
+        margin-left: -(@popover-arrow-width);
+        border-top-width: 0;
+        border-bottom-color: @color-white;
+      }
+    }
+  }
+
+  &[x-placement^="left"] {
+    > .arrow {
+      top: 50%;
+      right: -(@popover-arrow-outer-width);
+      border-right-width: 0;
+      border-left-color: @gray-light;
+
+      &:after {
+        content: "";
+        right: 1px;
+        border-right-width: 0;
+        border-left-color: @color-white;
+        bottom: -(@popover-arrow-width);
+      }
+    }
+  }
+}

package/lib/style/css/design/position.less

@@ -0,0 +1,16 @@
+.position-offscreen {
+  left: -10000px !important;
+  opacity: 0 !important;
+  position: fixed !important;
+  top: -10000px !important;
+  width: 100%; // iframe resizer mandatory
+}
+
+.content {
+  &-center {
+      align-content: center;
+      align-items: center;
+      display: flex;
+      justify-content: center;
+  }
+}

package/lib/style/css/design/progress-bars.less

@@ -0,0 +1,131 @@
+.progress-divider {
+  &:not(:last-child) {
+    box-shadow: inset -2px 0 0 @color-white;
+  }
+
+  &:only-child {
+    &:not([style*="width: 100%"]):not([style*="width: 99%"]):not([style*="width: 98%"]) {
+      box-shadow: inset -2px 0 0 @color-white;
+    }
+  }
+}
+
+@keyframes progress-bar-stripes {
+  from  { background-position: 40px 0; }
+  to    { background-position: 0 0; }
+}
+
+.progress {
+  height: 10px;
+  overflow: hidden;
+  background-color: @gray-lighter;
+  border-radius: @border-radius-default;
+  // margin-bottom: @grid-gutter-height;
+
+  .progress-bar {
+    background-color: @brand-primary;
+    color: @color-white;
+    float: left;
+    font-size: @font-size-sm;
+    height: 100%;
+    line-height: @grid-gutter-height;
+    text-align: center;
+    transition: width .6s ease;
+    width: 0%;
+
+    // primary
+    // secondary
+    each(@colors-brand-map, {
+      &.progress-bar-@{key} {
+        background-color: @value !important
+      }
+    })
+
+    // muted
+    // white
+    &.progress-bar-muted {
+      background-color: @gray-lighter !important
+    }
+
+    &.progress-bar-white {
+      background-color: @color-white !important
+    }
+
+    // info
+    // success
+    // warning
+    // danger
+    each(@colors-status-map, {
+      &.progress-bar-@{key} {
+        background-color: @value !important
+      }
+    })
+
+    // darkest
+    // darker
+    // dark
+    // gray
+    // light
+    // lighter
+    // lightest
+    each(@colors-gray-map, {
+      &.progress-bar-@{key} {
+        background-color: @value !important
+      }
+    })
+
+    // highlight-darkest
+    // highlight-darker
+    // highlight-dark
+    // highlight
+    // highlight-light
+    // highlight-lighter
+    // highlight-lightest
+    // highlight-decent
+    each(@colors-highlight-map, {
+      &.progress-bar-@{key} {
+        background-color: @value !important
+      }
+    })
+
+    // status-available
+    // status-driving
+    // status-resting
+    // status-working
+    each(@colors-driving-status-map, {
+      &.progress-bar-@{key} {
+        background-color: @value !important
+      }
+    })
+
+    // rating-1
+    // rating-2
+    // rating-3
+    // rating-4
+    // rating-5
+    each(@colors-rating-map, {
+      &.progress-bar-@{key} {
+        background-color: @value !important
+      }
+    })
+  }
+
+  &.progress-striped .progress-bar, // backward compatibility
+  &.progress-bar-striped {
+    background-size: 20px 20px;
+  }
+}
+
+.progress-striped .progress-bar, // backward compatibility
+.progress-bar-striped {
+  @color: rgba(255,255,255,.15);
+  @angle: 45deg;
+  background-size: 40px 40px;
+  background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent);
+}
+
+.progress.active .progress-bar, // backward compatibility
+.progress-bar.active, // backward compatibility
+.progress-bar-animated {
+  animation:progress-bar-stripes 2s linear infinite;
+}

package/lib/style/css/design/responsive/_imports.less

@@ -0,0 +1,68 @@
+// RIO Theme // Responsive Utility Classes
+.imports-reponsive(@breakpoint) {
+  @suffix: @breakpoint;
+  @import (multiple) "backgrounds.less";
+  @import (multiple) "display.less";
+  @import (multiple) "flexgrid.less";
+  @import (multiple) "floating.less";
+  @import (multiple) "gap.less";
+  @import (multiple) "margin.less";
+  @import (multiple) "overflow.less";
+  @import (multiple) "padding.less";
+  @import (multiple) "position.less";
+  @import (multiple) "sizing.less";
+  @import (multiple) "text.less";
+  @import (multiple) "visibility.less";
+}
+
+// RIO Theme // Utility Classes
+.import-reponsive(@default, @xs, @ls, @sm, @md, @lg, @xl, @print) {
+
+  // Basic Utility Classes
+  & when (@default = true) {
+    .imports-reponsive(~'');
+  }
+
+  // Breakpoints
+  & when (@xs = true) {
+    @media (max-width: @screen-xs-max) {
+      .imports-reponsive(-xs);
+    }
+  }
+
+  & when (@ls = true) {
+    @media (min-width: @screen-ls-min) {
+      .imports-reponsive(-ls);
+    }
+  }
+
+  & when (@sm = true) {
+    @media (min-width: @screen-sm-min) {
+      .imports-reponsive(-sm);
+    }
+  }
+
+  & when (@md = true) {
+    @media (min-width: @screen-md-min) {
+      .imports-reponsive(-md);
+    }
+  }
+
+  & when (@lg = true) {
+    @media (min-width: @screen-lg-min) {
+      .imports-reponsive(-lg);
+    }
+  }
+
+  & when (@xl = true) {
+    @media (min-width: @screen-xl-min) {
+      .imports-reponsive(-xl);
+    }
+  }
+
+  & when (@print = true) {
+    @media print {
+      .imports-reponsive(-print);
+    }
+  }
+}

package/lib/style/css/design/responsive/backgrounds.less

@@ -0,0 +1,32 @@
+.bg-none@{suffix} { background: none !important }
+
+.bg-size-cover@{suffix} { background-size: cover !important }
+.bg-size-100pct@{suffix} { background-size: 100% !important }
+.bg-size-90pct@{suffix} { background-size: 90% !important }
+.bg-size-80pct@{suffix} { background-size: 80% !important }
+.bg-size-70pct@{suffix} { background-size: 70% !important }
+.bg-size-60pct@{suffix} { background-size: 60% !important }
+.bg-size-50pct@{suffix} { background-size: 50% !important }
+.bg-size-40pct@{suffix} { background-size: 40% !important }
+.bg-size-30pct@{suffix} { background-size: 30% !important }
+.bg-size-20pct@{suffix} { background-size: 20% !important }
+.bg-size-10pct@{suffix} { background-size: 10% !important }
+
+.bg-repeat-no@{suffix} { background-repeat: no-repeat !important }
+.bg-repeat-x@{suffix} { background-repeat: repeat-x !important }
+.bg-repeat-y@{suffix} { background-repeat: repeat-y !important }
+.bg-repeat-xy@{suffix} { background-repeat: repeat !important }
+
+.bg-position-top@{suffix} { background-position: top !important }
+.bg-position-top-left@{suffix} { background-position: top left !important }
+.bg-position-top-center@{suffix} { background-position: top center !important }
+.bg-position-top-right@{suffix} { background-position: top right !important }
+.bg-position-center@{suffix} { background-position: center !important }
+.bg-position-center-left@{suffix} { background-position: center left !important }
+.bg-position-center-right@{suffix} { background-position: center right !important }
+.bg-position-bottom@{suffix} { background-position: bottom !important }
+.bg-position-bottom-left@{suffix} { background-position: bottom left !important }
+.bg-position-bottom-center@{suffix} { background-position: bottom center !important }
+.bg-position-bottom-right@{suffix} { background-position: bottom right !important }
+
+.bg-attachment-fixed@{suffix} { background-attachment: fixed !important }

package/lib/style/css/design/responsive/display.less

@@ -0,0 +1,9 @@
+.display-block@{suffix} { display: block !important }
+.display-inline-block@{suffix} { display: inline-block !important }
+.display-flex@{suffix} { display: flex !important }
+.display-inline-flex@{suffix} { display: inline-flex !important }
+.display-grid@{suffix} { display: grid !important }
+.display-inline-grid@{suffix} { display: inline-grid !important }
+.display-inline@{suffix} { display: inline !important }
+.display-contents@{suffix} { display: contents !important}
+.display-none@{suffix} { display: none !important }

package/lib/style/css/design/responsive/flexgrid.less

@@ -0,0 +1,75 @@
+.flex-row@{suffix} { flex-direction: row !important }
+.flex-row-reverse@{suffix} { flex-direction: row-reverse !important }
+
+.flex-column@{suffix} { flex-direction: column !important }
+.flex-column-reverse@{suffix} { flex-direction: column-reverse !important }
+
+.flex-wrap@{suffix} { flex-wrap: wrap !important }
+.flex-nowrap@{suffix} { flex-wrap: nowrap !important }
+.flex-wrap-reverse@{suffix} { flex-wrap: wrap-reverse !important }
+
+.justify-content-start@{suffix} { justify-content: flex-start !important }
+.justify-content-end@{suffix} { justify-content: flex-end !important }
+.justify-content-center@{suffix} { justify-content: center !important }
+.justify-content-between@{suffix} { justify-content: space-between !important }
+.justify-content-around@{suffix} { justify-content: space-around !important }
+
+.align-items-start@{suffix} { align-items: flex-start !important }
+.align-items-end@{suffix} { align-items: flex-end !important }
+.align-items-center@{suffix} { align-items: center !important }
+.align-items-baseline@{suffix} { align-items: baseline !important }
+.align-items-stretch@{suffix} { align-items: stretch !important }
+
+.align-content-start@{suffix} { align-content: flex-start !important }
+.align-content-end@{suffix} { align-content: flex-end !important }
+.align-content-center@{suffix} { align-content: center !important }
+.align-content-between@{suffix} { align-content: space-between !important }
+.align-content-around@{suffix} { align-content: space-around !important }
+.align-content-stretch@{suffix} { align-content: stretch !important }
+
+.align-self-auto@{suffix} { align-self: auto !important }
+.align-self-start@{suffix} { align-self: flex-start !important }
+.align-self-end@{suffix} { align-self: flex-end !important }
+.align-self-center@{suffix} { align-self: center !important }
+.align-self-baseline@{suffix} { align-self: baseline !important }
+.align-self-stretch@{suffix} { align-self: stretch !important }
+
+/* Flexbox - Helper */
+.flex-0-1@{suffix} { flex: 0 1 auto !important }
+.flex-1-0@{suffix} { flex: 1 0 auto !important }
+.flex-1-1@{suffix} { flex: 1 1 auto !important }
+.flex-1-1-0@{suffix} { flex: 1 1 0px !important }
+
+.flex-order-1@{suffix} { order: 1 !important }
+.flex-order-2@{suffix} { order: 2 !important }
+.flex-order-3@{suffix} { order: 3 !important }
+.flex-order-4@{suffix} { order: 4 !important }
+.flex-order-5@{suffix} { order: 5 !important }
+
+each(@sizes-pct, {
+  .flex-basis-@{key}@{suffix} {
+    flex-basis: @value !important;
+  }
+})
+
+/* Grid */
+.grid-cols-none@{suffix} { grid-template-columns: none !important }
+each(@gridColumns, {
+  .grid-cols-@{key}@{suffix} {
+    grid-template-columns: repeat(@value, minmax(0, 1fr)) !important
+  }
+})
+
+// Colspan
+each(@gridColumns, {
+  .grid-colspan-@{key}@{suffix} {
+    grid-column: span @key / span @key !important
+  }
+})
+// .grid-colspan-full@{suffix} { grid-column: 1 / -1 !important }
+.grid-colspan-auto@{suffix} { grid-column: auto !important }
+
+// Placement
+.place-items-center@{suffix} {
+  place-items: center !important;
+}

package/lib/style/css/design/responsive/floating.less

@@ -0,0 +1,4 @@
+/* Floating */
+.float-left@{suffix}, .pull-left@{suffix} { float: left !important } // equivalent to Bootstraps "pull-left"
+.float-right@{suffix}, .pull-right@{suffix} { float: right !important } // equivalent to Bootstraps "pull-right"
+.float-none@{suffix} { float: none !important }

package/lib/style/css/design/responsive/gap.less

@@ -0,0 +1,41 @@
+.gap-0@{suffix} { gap: 0 !important }
+.column-gap-0@{suffix} { column-gap: 0 !important }
+.row-gap-0@{suffix} { row-gap: 0 !important }
+
+[class*="gap-"] {
+  > .panel {
+    margin-bottom: 0;
+  }
+}
+
+// gap px
+each(@spacings-px, {
+  // x & y
+  .gap-@{key}@{suffix} {
+    gap: @value !important;
+  }
+  // x
+  .column-gap-@{key}@{suffix} {
+    column-gap: @value !important;
+  }
+  // y
+  .row-gap-@{key}@{suffix} {
+    row-gap: @value !important;
+  }
+})
+
+// gap pct
+each(@spacings-pct, {
+  // x & y
+  // .gap-@{key}@{suffix} {
+  //   gap: @value !important;
+  // }
+  // x
+  .column-gap-@{key}@{suffix} {
+    column-gap: @value !important;
+  }
+  // y
+  // .row-gap-@{key}@{suffix} {
+  //   row-gap: @value !important;
+  // }
+})

package/lib/style/css/design/responsive/hyphens.less

@@ -0,0 +1,14 @@
+.hyphens-auto@{suffix} { hyphens: auto !important }
+.hyphens-none@{suffix} { hyphens: none !important }
+
+/* Text - Wrapping */
+.white-space-nowrap@{suffix} { white-space: nowrap !important }
+.white-space-normal@{suffix} { white-space: normal !important }
+.white-space-pre-line@{suffix} { white-space: pre-line !important }
+
+.word-break@{suffix} {
+  hyphens: auto;
+  overflow: hidden;
+  word-break: break-word;
+  word-wrap: break-word;
+}

package/lib/style/css/design/responsive/margin.less

@@ -0,0 +1,127 @@
+.margin-auto@{suffix} { margin: auto !important }
+.margin-0@{suffix} { margin: 0 !important }
+
+.margin-left-0@{suffix} { margin-left: 0 !important }
+.margin-right-0@{suffix} { margin-right: 0 !important }
+.margin-top-0@{suffix} { margin-top: 0 !important }
+.margin-bottom-0@{suffix} { margin-bottom: 0 !important }
+
+.margin-x-0@{suffix} { margin-left: 0 !important; margin-right: 0 !important }
+.margin-y-0@{suffix} { margin-top: 0 !important; margin-bottom: 0 !important }
+
+.margin-left-auto@{suffix}, .margin-x-auto@{suffix} { margin-left: auto !important }
+.margin-right-auto@{suffix}, .margin-x-auto@{suffix} { margin-right: auto !important }
+.margin-top-auto@{suffix}, .margin-y-auto@{suffix} { margin-top: auto !important }
+.margin-bottom-auto@{suffix}, .margin-y-auto@{suffix} { margin-bottom: auto !important }
+
+// margin px
+each(@spacings-px, {
+  // surrouding
+  .margin-@{key}@{suffix} {
+    margin: @value !important;
+  }
+  // left
+  .margin-x-@{key}@{suffix},
+  .margin-left-@{key}@{suffix} {
+    margin-left: @value !important;
+  }
+  // right
+  .margin-x-@{key}@{suffix},
+  .margin-right-@{key}@{suffix} {
+    margin-right: @value !important;
+  }
+  // top
+  .margin-y-@{key}@{suffix},
+  .margin-top-@{key}@{suffix} {
+    margin-top: @value !important;
+  }
+  // bottom
+  .margin-y-@{key}@{suffix},
+  .margin-bottom-@{key}@{suffix} {
+    margin-bottom: @value !important;
+  }
+})
+
+// negative margin px
+each(@spacings-px, {
+  // negative surrouding
+  .margin--@{key}@{suffix} {
+    margin: -@value !important;
+  }
+  // negative left
+  .margin-x--@{key}@{suffix},
+  .margin-left--@{key}@{suffix} {
+    margin-left: -@value !important;
+  }
+  // negative right
+  .margin-x--@{key}@{suffix},
+  .margin-right--@{key}@{suffix} {
+    margin-right: -@value !important;
+  }
+  // negative top
+  .margin-y--@{key}@{suffix},
+  .margin-top--@{key}@{suffix} {
+    margin-top: -@value !important;
+  }
+  // negative bottom
+  .margin-y--@{key}@{suffix},
+  .margin-bottom--@{key}@{suffix} {
+    margin-bottom: -@value !important;
+  }
+})
+
+// margin pct
+each(@spacings-pct, {
+  // surrouding
+  .margin-@{key}@{suffix} {
+    margin: @value !important;
+  }
+  // left
+  .margin-x-@{key}@{suffix},
+  .margin-left-@{key}@{suffix} {
+    margin-left: @value !important;
+  }
+  // right
+  .margin-x-@{key}@{suffix},
+  .margin-right-@{key}@{suffix} {
+    margin-right: @value !important;
+  }
+  // top
+  .margin-y-@{key}@{suffix},
+  .margin-top-@{key}@{suffix} {
+    margin-top: @value !important;
+  }
+  // bottom
+  .margin-y-@{key}@{suffix},
+  .margin-bottom-@{key}@{suffix} {
+    margin-bottom: @value !important;
+  }
+})
+
+// negative margin pct
+each(@spacings-pct, {
+  // negative surrouding
+  .margin--@{key}@{suffix} {
+    margin: -@value !important;
+  }
+  // negative left
+  .margin-x--@{key}@{suffix},
+  .margin-left--@{key}@{suffix} {
+    margin-left: -@value !important;
+  }
+  // negative right
+  .margin-x--@{key}@{suffix},
+  .margin-right--@{key}@{suffix} {
+    margin-right: -@value !important;
+  }
+  // negative top
+  .margin-y--@{key}@{suffix},
+  .margin-top--@{key}@{suffix} {
+    margin-top: -@value !important;
+  }
+  // negative bottom
+  .margin-y--@{key}@{suffix},
+  .margin-bottom--@{key}@{suffix} {
+    margin-bottom: -@value !important;
+  }
+})

package/lib/style/css/design/responsive/overflow.less

@@ -0,0 +1,16 @@
+/* Overflow */
+.overflow-hidden@{suffix} { overflow: hidden !important }
+.overflow-x-hidden@{suffix} { overflow-x: hidden !important }
+.overflow-y-hidden@{suffix} { overflow-y: hidden !important }
+
+.overflow-visible@{suffix} { overflow: visible !important }
+.overflow-x-visible@{suffix} { overflow-x: visible !important }
+.overflow-y-visible@{suffix} { overflow-y: visible !important }
+
+.overflow-scroll@{suffix} { overflow: scroll !important }
+.overflow-x-scroll@{suffix} { overflow-x: scroll !important }
+.overflow-y-scroll@{suffix} { overflow-y: scroll !important }
+
+.overflow-auto@{suffix} { overflow: auto !important }
+.overflow-x-auto@{suffix} { overflow-x: auto !important }
+.overflow-y-auto@{suffix} { overflow-y: auto !important }