@rio-cloud/rio-uikit 0.16.1-beta-9 → 0.16.1-beta-10

package/lib/styles/mixins/alerts.less

@@ -0,0 +1,13 @@
+.alert-variant(@color; @background-opacity) {
+  background-color: lighten(@color, @background-opacity);
+  border-color: @color;
+  color: @color;
+
+  .alert-link {
+    color: @color;
+  }
+
+  > .close .rioglyph {
+    color: @color;
+  }
+}

package/lib/styles/mixins/border-radius.less

@@ -0,0 +1,16 @@
+.border-top-radius(@radius) {
+  border-top-right-radius: @radius !important;
+  border-top-left-radius: @radius !important;
+}
+.border-right-radius(@radius) {
+  border-bottom-right-radius: @radius !important;
+  border-top-right-radius: @radius !important;
+}
+.border-bottom-radius(@radius) {
+  border-bottom-right-radius: @radius !important;
+  border-bottom-left-radius: @radius !important;
+}
+.border-left-radius(@radius) {
+  border-bottom-left-radius: @radius !important;
+  border-top-left-radius: @radius !important;
+}

package/lib/styles/mixins/buttons.less

@@ -0,0 +1,117 @@
+.button-variant(
+      @important: ~'';
+      @background;
+      @border;
+      @color;
+      @hover-background: darken(@background, 10%);
+      @active-background: darken(@background, 10%);
+      @focus-background: darken(@background, 5%);
+      @active-hover-background: darken(@background, 17%);
+      @hover-border: darken(@border, 12%);
+      @active-border: darken(@border, 12%);
+      @focus-border: @border;
+      @active-hover-border: darken(@border, 25%);
+      @hover-color: @color;
+      @active-color: @color;
+      @focus-color: @color;
+      @active-hover-color: @color;
+    )
+  {
+  color: @color @important;
+  background-color: @background @important;
+  border: 1px solid @border @important;
+
+  &:focus,
+  &.focus {
+    background-color: @focus-background @important;
+    border-color: @focus-border @important;
+    color: @focus-color @important;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: @hover-background @important;
+      border-color: @hover-border @important;
+      color: @hover-color @important;
+    }
+  }
+
+  &:active,
+  &.active,
+  .open > .dropdown-toggle& {
+    background-color: @active-background @important;
+    border-color: @active-border @important;
+    color: @active-color @important;
+
+    @media (hover: hover) {
+      &:hover,
+      &:focus,
+      &.focus {
+        background-color: @active-hover-background @important;
+        border-color: @active-hover-border @important;
+        color: @active-hover-color @important;
+      }
+    }
+  }
+
+  &:active,
+  &.active,
+  .open > .dropdown-toggle& {
+    background-image: none @important;
+  }
+
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    &:hover,
+    &:focus,
+    &.focus {
+      background-color: @background @important;
+      border-color: @border @important;
+    }
+  }
+
+  .badge {
+    color: @background @important;
+    background-color: @color @important;
+  }
+}
+
+.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
+  border-radius: @border-radius;
+  font-size: @font-size;
+  line-height: @line-height;
+  padding: @padding-vertical @padding-horizontal;
+}
+
+.rio-btn(@size, @suffix) {
+  .btn@{suffix} {
+    height: @size;
+
+    > .rioglyph {
+      font-size: @size * 0.5;
+      margin: 0 @size * 0.15 0 0;
+      top: auto;
+
+      &[class*='chevron-'] {
+        font-size: @size * 0.3;
+      }
+    }
+
+    &.btn-icon-right {
+      > .rioglyph {
+        margin: 0 0 0 5px;
+        order: 2;
+      }
+    }
+
+    &.btn-icon-only {
+      width: @size;
+
+      > .rioglyph {
+        font-size: @size * 0.6;
+        margin: 0;
+      }
+    }
+  }
+}

package/lib/styles/mixins/clearfix.less

@@ -0,0 +1,9 @@
+.clearfix() {
+  &:after {
+    content: " ";
+    visibility: hidden;
+    display: block;
+    height: 0;
+    clear: both;
+  }
+}

package/lib/styles/mixins/cols.less

@@ -0,0 +1,59 @@
+// Make grid cols
+.make-grid-columns() {
+  // Common styles for all sizes of grid columns, widths 1-12
+  .col(@index) { // initial
+    @item: ~".col-@{index}, .col-xs-@{index}, .col-ls-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}, .col-xl-@{index}";
+    .col((@index + 1), @item);
+  }
+  .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo
+    @item: ~".col-@{index}, .col-xs-@{index}, .col-ls-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}, .col-xl-@{index}";
+    .col((@index + 1), ~"@{list}, @{item}");
+  }
+  // .col(@index, @list) when (@index > @grid-columns) { // terminal
+  //   @{list} {
+  //     position: relative;
+  //     // Prevent columns from collapsing when empty
+  //     min-height: 1px;
+  //     // Inner gutter via padding
+  //     padding-left:  ceil((@grid-gutter-width / 2));
+  //     padding-right: floor((@grid-gutter-width / 2));
+  //   }
+  // }
+  .col(1); // kickstart it
+}
+
+.float-grid-columns(@class) {
+  .col(@index) { // initial
+    @item: ~".col@{class}@{index}";
+    .col((@index + 1), @item);
+  }
+  .col(@index, @list) when (@index =< @grid-columns) { // general
+    @item: ~".col@{class}@{index}";
+    .col((@index + 1), ~"@{list}, @{item}");
+  }
+  // .col(@index, @list) when (@index > @grid-columns) { // terminal
+  //   @{list} {
+  //     float: left;
+  //   }
+  // }
+  .col(1); // kickstart it
+}
+
+.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
+  .col@{class}@{index} {
+    width: percentage((@index / @grid-columns));
+  }
+}
+
+// Basic looping in LESS
+.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
+  .calc-grid-column(@index, @class, @type);
+  // next iteration
+  .loop-grid-columns((@index - 1), @class, @type);
+}
+
+// Create grid for specific class
+.make-grid(@class) {
+  .float-grid-columns(@class);
+  .loop-grid-columns(@grid-columns, @class, width);
+}

package/lib/styles/mixins/forms.less

@@ -0,0 +1,61 @@
+.form-control-validation(@text-color: #555; @border-color: #ccc; @background-color: #f5f5f5) {
+    // Color the label and help text
+    .help-block,
+    .control-label,
+    .radio,
+    .checkbox,
+    .radio-inline,
+    .checkbox-inline,
+    &.radio label,
+    &.checkbox label,
+    &.radio-inline label,
+    &.checkbox-inline label  {
+      color: @text-color;
+    }
+    // Set the border and box shadow on specific inputs to match
+    .form-control {
+      border-color: @border-color;
+      box-shadow:inset 0 1px 1px rgba(0,0,0,.075); // Redeclare so transitions work
+      &:focus {
+        border-color: darken(@border-color, 10%);
+        box-shadow: inset 0 1px 1px rgba(0,0,0,.075)~"," 0 0 6px lighten(@border-color, 20%);
+      }
+    }
+    // Set validation states also for addons
+    .input-group-addon:not(.input-group-addon-label) {
+      color: @text-color;
+      border-color: @border-color;
+      background-color: @background-color;
+    }
+    // Optional feedback icon
+    .form-control-feedback {
+      color: @text-color;
+    }
+  }
+
+  .form-control-focus(@color: @input-border-focus) {
+    @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
+    &:focus {
+      border-color: @color;
+      outline: 0;
+      box-shadow:inset 0 1px 1px rgba(0,0,0,.075)~"," 0 0 8px @color-rgba;
+    }
+  }
+
+  .input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) {
+    height: @input-height;
+    padding: @padding-vertical @padding-horizontal;
+    font-size: @font-size;
+    line-height: @line-height;
+    border-radius: @border-radius;
+
+    select& {
+      height: @input-height;
+      line-height: @input-height;
+    }
+
+    textarea&,
+    select[multiple]& {
+      height: auto;
+    }
+  }

package/lib/styles/mixins/panels.less

@@ -0,0 +1,27 @@
+.panel-variant(@panel-color; @panel-border-color; @text-color) {
+  &:not(.panel-blank):not(.panel-separator) {
+    border-color: @panel-border-color;
+  }
+
+  & > .panel-heading {
+    color: @text-color;
+    background-color: @panel-color;
+    border-color: @panel-border-color;
+
+    + .panel-collapse > .panel-body {
+      border-top-color: @panel-border-color;
+    }
+
+    .badge {
+      color: @text-color;
+      background-color: @panel-color;
+    }
+  }
+
+  & > .panel-footer {
+    border-top: 1px solid @panel-border-color;
+    + .panel-collapse > .panel-body {
+      border-bottom-color: @panel-border-color;
+    }
+  }
+}

package/lib/styles/mixins/placeholder.less

@@ -0,0 +1,17 @@
+.placeholder(@color: @input-color-placeholder) {
+    // Firefox
+    &::-moz-placeholder {
+        color: @color;
+        opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
+    }
+
+    // Internet Explorer
+    &:-ms-input-placeholder {
+        color: @color;
+    }
+
+    // Rest
+    &::-webkit-input-placeholder {
+        color: @color;
+    }
+}

package/lib/styles/mixins/reset.less

@@ -0,0 +1,27 @@
+.reset-filter() {
+  filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
+}
+
+.reset-list() {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.reset-text() {
+  font-family: @font-family-base;
+  font-style: normal;
+  font-weight: normal;
+  letter-spacing: normal;
+  line-break: auto;
+  line-height: @line-height-default;
+  text-align: left;
+  text-align: start;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  white-space: normal;
+  word-break: normal;
+  word-spacing: normal;
+  word-wrap: normal;
+}

package/lib/styles/mixins/sizings.less

@@ -0,0 +1,21 @@
+.sizing-vh(@type; @suffix; @offset: 0px) {
+    .@{type}-25vh@{suffix} {
+        @{type}: calc(~"25vh - @{offset}") !important;
+        @{type}: calc(~"var(--vh, 1vh) * 25 - @{offset}") !important;
+    };
+
+    .@{type}-50vh@{suffix} {
+        @{type}: calc(~"50vh - @{offset}") !important;
+        @{type}: calc(~"var(--vh, 1vh) * 50 - @{offset}") !important;
+    };
+
+    .@{type}-75vh@{suffix} {
+        @{type}: calc(~"75vh - @{offset}") !important;
+        @{type}: calc(~"var(--vh, 1vh) * 75 - @{offset}") !important;
+    };
+
+    .@{type}-100vh@{suffix} {
+        @{type}: calc(~"100vh - @{offset}") !important;
+        @{type}: calc(~"var(--vh, 1vh) * 100 - @{offset}") !important;
+    };
+}

package/lib/styles/mixins/spinner.less

@@ -0,0 +1,30 @@
+.spinnerMixin(@spinnerSize, @spinnerColor) {
+  position: relative;
+  width: (@spinnerSize * 1px);
+  height: (@spinnerSize * 1px);
+  animation: spinning 5s linear infinite;
+
+  div {
+    display: block;
+    position: absolute;
+    width: 90%;
+    height: 90%;
+    margin: 5%;
+    border: if((@spinnerSize < 25), 2.5px, ((@spinnerSize / 10) * 1px)) solid @spinnerColor;
+    border-radius: 50%;
+    animation: spinning 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: @spinnerColor transparent transparent transparent;
+
+    &:nth-child(1) {
+      animation-delay: -0.45s;
+    }
+
+    &:nth-child(2) {
+      animation-delay: -0.3s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: -0.15s;
+    }
+  }
+}

package/lib/styles/mixins/table.less

@@ -0,0 +1,26 @@
+.table-row-variant(@state; @background) {
+  // Exact selectors below required to override `.table-striped` and prevent
+  // inheritance to nested tables.
+  .table > thead > tr,
+  .table > tbody > tr,
+  .table > tfoot > tr {
+    > td.@{state},
+    > th.@{state},
+    &.@{state} > td,
+    &.@{state} > th {
+      background-color: @background;
+    }
+  }
+
+  // Hover states for `.table-hover`
+  // Note: this is not available for cells or rows within `thead` or `tfoot`.
+  .table-hover > tbody > tr {
+    > td.@{state}:hover,
+    > th.@{state}:hover,
+    &.@{state}:hover > td,
+    &:hover > .@{state},
+    &.@{state}:hover > th {
+      background-color: darken(@background, 5%);
+    }
+  }
+}

package/lib/styles/mixins/tabs.less

@@ -0,0 +1,4 @@
+.tab-focus() {
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}

package/lib/styles/mixins/text.less

@@ -0,0 +1,5 @@
+.text-overflow() {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/lib/styles/print/print.less

@@ -0,0 +1,163 @@
+// Print utils classes - WORK IN PROGRESS
+@media print {
+    @page { margin: 1cm }
+
+    body,
+    #root {
+        background: transparent !important;
+    }
+
+    // Bootstrap Stuff
+    *,
+    *:before,
+    *:after {
+        box-shadow: none !important;
+        text-shadow: none !important;
+    }
+
+    a,
+    a:visited {
+        text-decoration: underline !important;
+    }
+
+    a[href^="#"]:after,
+    a[href^="javascript:"]:after {
+        content: "" !important;
+    }
+
+    thead {
+        display: table-header-group !important;
+    }
+
+    tr,
+    img {
+        page-break-inside: avoid !important;
+    }
+
+    img {
+        max-width: 100% !important;
+    }
+
+    p,
+    h2,
+    h3 {
+        orphans: 3 !important;
+        widows: 3 !important;
+    }
+
+    h2,
+    h3 {
+        page-break-after: avoid !important;
+    }
+
+    // RIO Content
+    .printable-content {
+        // hide class
+        .non-printable,
+        .table-toolbar-cards-sorting,
+        .table-checkbox,
+        .table-action  {
+            display: none !important;
+        }
+
+        .ApplicationLayoutHeader,
+        .ApplicationLayoutBody,
+        .ApplicationLayoutSidebar {
+            &:not(.print-area) {
+                display: none !important;
+            }
+        }
+
+        .ApplicationLayoutBody,
+        .ApplicationLayoutSidebar,
+        .ApplicationLayoutSidebar .Sidebar {
+            float: none !important;
+            //height: auto !important;
+            overflow: visible !important;
+            width: 100% !important;
+        }
+
+        .ApplicationLayoutBody {
+            .module-content {
+                background: transparent !important;
+            }
+        }
+
+        .ApplicationLayoutSidebar {
+            .SidebarContent {
+                display: block !important;
+
+                .SidebarHeader,
+                .SidebarBody {
+                    display: block !important;
+                }
+
+                .SidebarFooter {
+                    display: none !important;
+                }
+            }
+        }
+
+        // Components
+        .table {
+            display: table !important;
+            border-collapse: collapse !important;
+
+            colgroup {
+                display: none !important;
+            }
+
+            tr {
+                th,
+                td {
+                    background-color: @color-white !important;
+                    border: 1px solid #ddd !important;
+                    padding: 10px !important;
+                    white-space: pre-wrap !important;
+                    word-break: break-word !important;
+
+                    &.sort-column {
+                        > span:first-child {
+                            padding-left: 0 !important;
+                        }
+                        .sort-arrows {
+                            display: none !important;
+                        }
+                    }
+                }
+            }
+
+            &.table-cards {
+                tbody {
+                    display: block !important;
+                    margin: 0 !important;
+
+                    tr {
+                        margin: 0 0 10px 0 !important;
+                    }
+                }
+            }
+        }
+
+        .StatusBar {
+            width: 100% !important;
+
+            .display-flex,
+            .progress {
+                display: block !important;
+                flex: unset !important;
+                width: 100% !important;
+            }
+
+            .progress-bar {
+                border-top-width: 5px !important;
+                border-top-style: solid !important;
+
+                &.progress-bar-status-resting { border-top-color: @color-status-resting !important }
+                &.progress-bar-status-driving { border-top-color: @color-status-driving !important }
+                &.progress-bar-status-working { border-top-color: @color-status-working !important }
+                &.progress-bar-status-available { border-top-color: @color-status-available !important }
+            }
+        }
+    }
+}