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

package/lib/style/css/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/style/css/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/style/css/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/style/css/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/style/css/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/style/css/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/style/css/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/style/css/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/style/css/mixins/tabs.less

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

package/lib/style/css/mixins/text.less

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

package/lib/style/css/print/print.less

@@ -1,8 +1,5 @@
+// Print utils classes - WORK IN PROGRESS
 @media print {
-    // Print utils classes - WORK IN PROGRESS
-    // @suffix: -print;
-    // @import (multiple) "../utils/responsive-imports.less";
-
     @page { margin: 1cm }
 
     body,

package/lib/style/css/rio-theme/alerts.less

@@ -1,36 +1,18 @@
-@import '../bootstrap/alerts.less';
-
-@alert-padding: 12px;
-@alert-border-radius: @border-radius-base;
-@alert-link-font-weight: bold;
-
-@alert-success-bg: transparent;
-@alert-success-text: @state-success-text;
-@alert-success-border: @state-success-text;
-
-@alert-info-bg: transparent;
-@alert-info-text: @state-info-text;
-@alert-info-border: @state-info-text;
-
-@alert-warning-bg: transparent;
-@alert-warning-text: @state-warning-text;
-@alert-warning-border: @state-warning-text;
-
-@alert-danger-bg: transparent;
-@alert-danger-text: @state-danger-text;
-@alert-danger-border: @state-danger-text;
-
-@alert-primary-bg: transparent;
-@alert-primary-text: @brand-primary;
-@alert-primary-border: @brand-primary;
-
-@alert-secondary-bg: transparent;
-@alert-secondary-text: @brand-secondary;
-@alert-secondary-border: @brand-secondary;
-
 .alert {
-  position: relative;
+  border-color: transparent;
+  border-radius: @border-radius-base;
+  border-style: solid;
   border-width: 2px;
+  padding: 12px;
+  position: relative;
+
+  .alert-link {
+    font-weight: bold;
+  }
+
+  &.alert-dismissible {
+    padding-right: 30px;
+  }
 
   > .close {
     position: absolute;
@@ -39,54 +21,34 @@
     transform: scale(0.75);
   }
 
+  > p,
+  > ul {
+    margin-bottom: 0;
+  }
 
   &.alert- {
     &danger {
-      background-color: lighten(@brand-danger, 57%);
-
-      > .close .rioglyph {
-        color: @brand-danger;
-      }
+      .alert-variant(@brand-danger; 57%);
     }
 
     &warning {
-      background-color: lighten(@brand-warning, 38%);
-
-      > .close .rioglyph {
-        color: @brand-warning;
-      }
+      .alert-variant(@brand-warning; 37.5%);
     }
 
     &success {
-      background-color: lighten(@brand-success, 52%);
-
-      > .close .rioglyph {
-        color: @brand-success;
-      }
+      .alert-variant(@brand-success; 50%);
     }
 
     &info {
-      background-color: lighten(@brand-info, 51%);
-
-      > .close .rioglyph {
-        color: @brand-info;
-      }
+      .alert-variant(@brand-info; 51%);
     }
 
     &primary {
-      background-color: lighten(@brand-primary, 52%);
-
-      > .close .rioglyph {
-        color: @brand-primary;
-      }
+      .alert-variant(@brand-primary; 51%);
     }
 
     &secondary {
-      background-color: lighten(@brand-secondary, 57%);
-
-      > .close .rioglyph {
-        color: @brand-secondary;
-      }
+      .alert-variant(@brand-secondary; 53%);
     }
   }
 }

package/lib/style/css/rio-theme/badges.less

@@ -1,24 +1,19 @@
-@import "../bootstrap/badges.less";
-
-@badge-color: @color-white;
-@badge-link-hover-color: @color-white;
-@badge-bg: @brand-primary;
-@badge-active-color: @link-color;
-@badge-active-bg: @color-white;
-@badge-font-weight: normal;
-@badge-font-weight-bold: 600;
-@badge-line-height: 1;
-@badge-border-radius: 1000px;
-
 .badge {
+  background-color: @gray-dark;
+  border-radius: 1000px;
+  color: @color-white;
+  display: inline-block;
   font-size: 12px;
+  font-weight: normal;
+  line-height: 1;
   padding: 4px 7px;
   vertical-align: baseline;
 
   // Empty badges are just a dot
   &:empty {
-    width: 16px;
     height: 16px;
+    padding: 0;
+    width: 16px;
   }
 
   &.badge-lg {
@@ -32,41 +27,34 @@
     padding: 4px 9px;
   }
 
-  &.badge-default {
-    color: @color-white;
-    background-color: @gray-dark;
-  }
-
   &.badge-primary {
-    color: @color-white;
     background-color: @brand-primary;
   }
 
+  &.badge-secondary {
+    background-color: @brand-secondary;
+  }
+
+  &.badge-info {
+    background-color: @brand-info;
+  }
+
   &.badge-success {
-    color: @color-white;
     background-color: @brand-success;
   }
 
   &.badge-danger {
-    color: @color-white;
     background-color: @brand-danger;
   }
 
   &.badge-warning {
-    color: @color-white;
     background-color: @brand-warning;
   }
 
-  &.badge-info {
-    color: @color-white;
-    background-color: @brand-info;
-  }
-
   &.badge-muted {
     color: @gray-dark;
     box-shadow: inset 0px 0px 0px 1px @gray-light;
     background-color: @gray-lightest;
-    font-weight: @badge-font-weight-bold;
   }
 }
 

package/lib/style/css/rio-theme/blockquote.less

@@ -1,9 +1,7 @@
-// Blockquote
-
 blockquote {
-  padding: 2% 6%;
+  font-size: (@font-size-base * 1.25);
   margin: 0;
-  font-size: @blockquote-font-size;
+  padding: 2% 0 2% 7%;
   position: relative;
 
   &:before {
@@ -19,104 +17,23 @@ blockquote {
     top: 0;
     user-select: none;
     width: 6%;
-    color: @gray-light;
-  }
-
-  &.quote-color-highlight {
-    &:before {
-      color: @color-highlight !important
-    }
-  }
-
-  &.quote-color-primary {
-    &:before {
-      color: @brand-primary !important
-    }
-  }
-
-  &.quote-color-secondary {
-    &:before {
-      color: @brand-secondary !important
-    }
   }
 
-  &.quote-color-white {
-    &:before {
-      color: @color-white !important
+  each(@colors-text, {
+    &.quote-color- {
+      &@{key}:before {
+        color: @value !important
+      }
     }
-  }
-
-  &.quote-color-black {
-    &:before {
-      color:@color-black !important
-    }
-  }
-
-  &.quote-color-darkest {
-    &:before {
-      color: @gray-darkest !important
-    }
-  }
-
-  &.quote-color-darker {
-    &:before {
-      color: @gray-darker !important
-    }
-  }
-
-  &.quote-color-dark {
-    &:before {
-      color: @gray-dark !important
-    }
-  }
+  })
 
-  &.quote-color-gray {
-    &:before {
-      color: @gray !important
+  each(@colors-gray, {
+    &.quote-color- {
+      &@{key}:before {
+        color: @value !important
+      }
     }
-  }
-
-  &.quote-color-light {
-    &:before {
-      color: @gray-light !important
-    }
-  }
-
-  &.quote-color-lighter {
-    &:before {
-      color: @gray-lighter !important
-    }
-  }
-
-  &.quote-color-lightest {
-    &:before {
-      color: @gray-lightest !important
-    }
-  }
-
-  &.quote-color-success {
-    &:before {
-      color: @brand-success !important
-    }
-  }
-
-  &.quote-color-info {
-    &:before {
-      color: @brand-info !important
-    }
-  }
-
-  &.quote-color-warning {
-    &:before {
-      color: @brand-warning !important
-    }
-  }
-
-  &.quote-color-danger {
-    &:before {
-      color: @brand-danger !important
-    }
-  }
+  })
 
   p,
   ul,

package/lib/style/css/rio-theme/mixins/alerts.less

@@ -1 +1,13 @@
-@import "../../bootstrap/mixins/alerts.less";
+.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/style/css/shared/colors.json

@@ -10,10 +10,10 @@
 	"gray-lightest": "#f6f8f9",
 	"brand-primary": "#30b4c0",
 	"brand-secondary": "#b23672",
+	"brand-info": "#4B80A6",
 	"brand-success": "#5cb85c",
 	"brand-warning": "#ff8e3c",
 	"brand-danger": "#d90000",
-	"brand-info": "#4B80A6",
 	"color-status-available": "#239b7d",
 	"color-status-driving": "#3690ae",
 	"color-status-resting": "#626b72",