@rio-cloud/rio-uikit 0.15.0 → 0.16.0-beta-2

package/lib/style/css/animations/scale.less

@@ -0,0 +1,35 @@
+.scale {
+  &-50 { transform: scale(0.5) !important }
+  &-80 { transform: scale(0.8) !important }
+  &-90 { transform: scale(0.9) !important }
+  &-100 { transform: scale(1.0) !important }
+  &-105 { transform: scale(1.05) !important }
+  &-110 { transform: scale(1.1) !important }
+  &-120 { transform: scale(1.2) !important }
+  &-130 { transform: scale(1.3) !important }
+  &-140 { transform: scale(1.4) !important }
+  &-150 { transform: scale(1.5) !important }
+  &-160 { transform: scale(1.6) !important }
+  &-170 { transform: scale(1.7) !important }
+  &-180 { transform: scale(1.8) !important }
+  &-190 { transform: scale(1.9) !important }
+  &-200 { transform: scale(2.0) !important }
+}
+
+.hover-scale {
+  &-50 { &:hover { transform: scale(0.5) !important } }
+  &-80 { &:hover { transform: scale(0.8) !important } }
+  &-90 { &:hover { transform: scale(0.9) !important } }
+  &-100 { &:hover { transform: scale(1.0) !important } }
+  &-105 { &:hover { transform: scale(1.05) !important } }
+  &-110 { &:hover { transform: scale(1.1) !important } }
+  &-120 { &:hover { transform: scale(1.2) !important } }
+  &-130 { &:hover { transform: scale(1.3) !important } }
+  &-140 { &:hover { transform: scale(1.4) !important } }
+  &-150 { &:hover { transform: scale(1.5) !important } }
+  &-160 { &:hover { transform: scale(1.6) !important } }
+  &-170 { &:hover { transform: scale(1.7) !important } }
+  &-180 { &:hover { transform: scale(1.8) !important } }
+  &-190 { &:hover { transform: scale(1.9) !important } }
+  &-200 { &:hover { transform: scale(2.0) !important } }
+}

package/lib/style/css/animations/slide.less

@@ -0,0 +1,39 @@
+// left
+@keyframes slide-out-left {
+  from { transform: translate3d(0, 0, 0) }
+  to { transform: translate3d(-100%, 0, 0) }
+}
+
+.slide-out-left {
+  animation-name: slide-out-left;
+}
+
+// up
+@keyframes slide-out-up {
+  from { transform: translate3d(0, 0, 0) }
+  to { transform: translate3d(0, -100%, 0) }
+}
+
+.slide-out-up {
+  animation-name: slide-out-up;
+}
+
+// down
+@keyframes slide-out-down {
+  from { transform: translate3d(0, 0, 0) }
+  to { transform: translate3d(0, 100%, 0) }
+}
+
+.slide-out-down {
+  animation-name: slide-out-down;
+}
+
+// right
+@keyframes slide-out-right {
+  from { transform: translate3d(0, 0, 0) }
+  to { transform: translate3d(100%, 0, 0) }
+}
+
+.slide-out-right {
+  animation-name: slide-out-right;
+}

package/lib/style/css/animations/spinning.less

@@ -0,0 +1,4 @@
+@keyframes spinning {
+  from { transform: rotate(0deg) }
+  to   { transform: rotate(359deg) }
+}

package/lib/style/css/animations/transition.less

@@ -0,0 +1,129 @@
+.transition-opacity {
+    transition-property: opacity;
+}
+.transition-position {
+    transition-property: position;
+}
+.transition-all {
+    transition-property: all;
+}
+
+.transition-ease {
+    transition-timing-function: ease;
+}
+
+.transition-ease-in-out {
+    transition-timing-function: ease-in-out;
+}
+
+.transition-duration-01 {
+    transition-duration: 0.1s;
+}
+.transition-duration-02 {
+    transition-duration: 0.2s;
+}
+.transition-duration-03 {
+    transition-duration: 0.3s;
+}
+.transition-duration-04 {
+    transition-duration: 0.4s;
+}
+.transition-duration-05 {
+    transition-duration: 0.5s;
+}
+
+[class*="animated-"] {
+    &.loop { animation-direction: alternate }
+
+    &.infinite { animation-iteration-count: infinite }
+    &.repeat-1 {
+        animation-iteration-count: 1;
+        &.loop {
+            animation-iteration-count: 2;
+        }
+    }
+    &.repeat-2 {
+        animation-iteration-count: 2;
+        &.loop {
+            animation-iteration-count: 4;
+        }
+    }
+    &.repeat-3 {
+        animation-iteration-count: 3;
+        &.loop {
+            animation-iteration-count: 6;
+        }
+    }
+
+    &.ease { animation-timing-function: ease }
+    &.linear { animation-timing-function: linear }
+    &.ease-in { animation-timing-function: ease-in }
+    &.ease-out { animation-timing-function: ease-out }
+    &.ease-in-out { animation-timing-function: ease-in-out }
+
+
+}
+
+.animated {
+    animation-fill-mode: both;
+
+    &-3s {
+        transition: all 3s ease;
+        animation-duration: 3s;
+    }
+
+    &-2s {
+        transition: all 2s ease;
+        animation-duration: 2s;
+    }
+
+    &-1s {
+        transition: all 1s ease;
+        animation-duration: 1s;
+    }
+
+    &-09s {
+        transition: all 0.9s ease;
+        animation-duration: 0.9s;
+    }
+
+    &-08s {
+        transition: all 0.8s ease;
+        animation-duration: 0.8s;
+    }
+
+    &-07s {
+        transition: all 0.7s ease;
+        animation-duration: 0.7s;
+    }
+
+    &-06s {
+        transition: all 0.6s ease;
+        animation-duration: 0.6s;
+    }
+
+    &-05s {
+        transition: all 0.5s ease;
+        animation-duration: 0.5s;
+    }
+
+    &-04s {
+        transition: all 0.4s ease;
+        animation-duration: 0.4s;
+    }
+
+    &-03s {
+        transition: all 0.3s ease;
+        animation-duration: 0.3s;
+    }
+
+    &-02s {
+        transition: all 0.2s ease;
+        animation-duration: 0.2s;
+    }
+
+    &-01s {
+        transition: all 0.1s ease;
+        animation-duration: 0.1s;
+    }
+}

package/lib/style/css/animations/translate.less

@@ -0,0 +1,28 @@
+// %
+.translate-x-50pct-y-50pct { transform: translate(-50%, -50%) !important }
+.translate-y-50pct { transform: translateY(-50%) !important }
+.translate-y-100pct { transform: translateY(-100%) !important }
+.translate-x-100pct-y-100pct { transform: translate(-100%, -100%) !important }
+.translate-x50pct-y-50pct { transform: translate(50%, -50%) !important }
+.translate-x100pct-y-100pct { transform: translate(100%, -100%) !important }
+.translate-x50pct { transform: translateX(50%) !important }
+.translate-x100pct { transform: translateX(100%) !important }
+.translate-y50pct { transform: translateY(50%) !important }
+.translate-y100pct { transform: translateY(100%) !important }
+.translate-x-50pct-y50pct { transform: translate(-50%, 50%) !important }
+.translate-x-100pct-y100pct { transform: translate(-100%, 100%) !important }
+.translate-x50pct-y50pct { transform: translate(50%, 50%) !important }
+.translate-x100pct-y100pct { transform: translate(100%, 100%) !important }
+.translate-x-50pct { transform: translateX(-50%) !important }
+.translate-x-100pct { transform: translateX(-100%) !important }
+
+// PX
+.translate-y10 { transform: translateY(10px) !important }
+.translate-y-10 { transform: translateY(-10px) !important }
+
+.hover-translate {
+    &-y-10 { &:hover { transform: translateY(-10px) !important } }
+}
+
+.transform-none { transform: none !important }
+.hover-transform-none:hover { transform: none !important }

package/lib/style/css/bootstrap/dropdowns.less

@@ -34,20 +34,27 @@
   border-radius: @border-radius-base;
   border: 1px solid @dropdown-border;
   box-shadow:0 6px 12px rgba(0,0,0,.175);
-  display: none; // none by default, but block on "open" of the menu
   float: left;
   font-size: @font-size-base;
   left: 0;
   list-style: none;
-  margin: 2px 0 0; // override default ul
+  margin-bottom: 0;
   min-width: 160px;
   padding: 5px 0;
   position: absolute;
   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
   top: 100%;
-  width: 100%;
   z-index: @zindex-dropdown;
 
+  // display: none by default
+  display: none;
+
+  // but display: block when portaled
+  #uikit-root & {
+    display: block;
+    width: auto;
+  }
+
   // Aligns the dropdown menu to right
   //
   // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]`

package/lib/style/css/bootstrap/forms.less

@@ -391,32 +391,35 @@ input[type="checkbox"] {
   }
 }
 // Feedback icon (requires .glyphicon classes)
-.form-control-feedback {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 2; // Ensure icon is above input groups
-  display: block;
-  width: @input-height-base;
-  height: @input-height-base;
-  line-height: @input-height-base;
-  text-align: center;
-  pointer-events: none;
-}
-.input-lg + .form-control-feedback,
-.input-group-lg + .form-control-feedback,
-.form-group-lg .form-control + .form-control-feedback {
-  width: @input-height-large;
-  height: @input-height-large;
-  line-height: @input-height-large;
-}
-.input-sm + .form-control-feedback,
-.input-group-sm + .form-control-feedback,
-.form-group-sm .form-control + .form-control-feedback {
-  width: @input-height-small;
-  height: @input-height-small;
-  line-height: @input-height-small;
-}
+// .form-control-feedback {
+//   background-color: #ffcc00;
+//   border-bottom-right-radius: @border-radius-base;
+//   border-top-right-radius: @border-radius-base;
+//   display: block;
+//   height: @input-height-base - 2;
+//   line-height: @input-height-base - 2;
+//   pointer-events: none;
+//   position: absolute;
+//   right: 2px;
+//   text-align: center;
+//   top: 2px;
+//   width: @input-height-base - 2;
+//   z-index: 2; // Ensure icon is above input groups
+// }
+// .input-lg + .form-control-feedback,
+// .input-group-lg + .form-control-feedback,
+// .form-group-lg .form-control-feedback {
+//   width: @input-height-large - 2;
+//   height: @input-height-large - 2;
+//   line-height: @input-height-large - 2;
+// }
+// .input-sm + .form-control-feedback,
+// .input-group-sm + .form-control-feedback,
+// .form-group-sm .form-control-feedback {
+//   width: @input-height-small - 2;
+//   height: @input-height-small - 2;
+//   line-height: @input-height-small - 2;
+// }
 
 // Feedback states
 .has-success {
@@ -429,16 +432,15 @@ input[type="checkbox"] {
   .form-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
 }
 
-// Reposition feedback icon if input has visible label above
-.has-feedback label {
-
-  & ~ .form-control-feedback {
-    top: (@line-height-computed + 5); // Height of the `label` and its margin
-  }
-  &.sr-only ~ .form-control-feedback {
-    top: 0;
-  }
-}
+// // Reposition feedback icon if input has visible label above
+// .has-feedback label {
+//   & ~ .form-control-feedback {
+//     top: (@line-height-computed + 5); // Height of the `label` and its margin
+//   }
+//   &.sr-only ~ .form-control-feedback {
+//     top: 0;
+//   }
+// }
 
 
 // Help text

package/lib/style/css/bootstrap/input-groups.less

@@ -130,7 +130,9 @@
 .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
 .input-group-btn:last-child > .btn-group:not(:last-child) > .btn,
 .input-group-addon + .form-control:not(:last-child),
+.input-group-addon + .form-control-feedback-wrapper:not(:last-child) .form-control,
 .input-group:not(.ClearableInput) > .form-control:nth-child(1):not(:last-child),
+.input-group:not(.ClearableInput) > .form-control-feedback-wrapper:first-child:not(:last-child) .form-control,
 .input-group > .ClearableInput:not(:last-child) > .form-control,
 .input-group .input-group-addon + .AutoSuggest .ClearableInput > .form-control,
 .input-group .AutoSuggest:not(:last-child) .ClearableInput > .form-control,
@@ -142,6 +144,8 @@
 .input-group-addon:last-child { border-left: 0 }
 
 .input-group .input-group-btn + .form-control:last-child,
+.input-group-addon-label + .form-control,
+.input-group-addon-label + .form-control-feedback-wrapper .form-control,
 .input-group-addon:last-child,
 .input-group-btn:last-child > .btn,
 .input-group-btn:last-child > .btn-group > .btn,

package/lib/style/css/bootstrap/mixins/forms.less

@@ -27,7 +27,7 @@
     }
   }
   // Set validation states also for addons
-  .input-group-addon {
+  .input-group-addon:not(.input-group-addon-label) {
     color: @text-color;
     border-color: @border-color;
     background-color: @background-color;

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

@@ -0,0 +1,93 @@
+.activity {
+  align-items: center;
+  border-radius: @border-radius-round;
+  color: @color-white;
+  display: inline-flex;
+  font-weight: @font-normal;
+
+  + .activity {
+    margin-left: 5px;
+  }
+
+  .activity-icon {
+    border-radius: @border-radius-round;
+    font-size: 20px;
+    line-height: 1;
+    padding: 2px 3px 4px 3px;
+  }
+
+  .activity-text {
+    font-size: 14px;
+    padding: 0 8px 0 5px;
+    white-space: nowrap;
+  }
+
+  &.activity-available {
+    background: darken(@color-status-available, 5%);
+
+    .activity-icon {
+      background: @color-status-available;
+    }
+  }
+
+  &.activity-driving {
+    background: darken(@color-status-driving, 5%);
+
+    .activity-icon {
+      background: @color-status-driving;
+    }
+  }
+
+  &.activity-resting {
+    background: darken(@color-status-resting, 5%);
+
+    .activity-icon {
+      background: @color-status-resting;
+    }
+  }
+
+  &.activity-working {
+    background: darken(@color-status-working, 5%);
+
+    .activity-icon {
+      background: @color-status-working;
+    }
+  }
+
+  // sizes
+  &.activity-sm {
+    .activity-icon {
+      font-size: 16px;
+      padding: 2px 4px 2px 4px;
+    }
+
+    .activity-text {
+      font-size: 12px;
+      padding: 0 8px 0 5px;
+    }
+  }
+
+  &.activity-lg {
+    .activity-icon {
+      font-size: 24px;
+      padding: 3px 4px 5px 4px;
+    }
+
+    .activity-text {
+      font-size: 18px;
+      padding: 0 8px 0 5px;
+    }
+  }
+
+  &.activity-xl {
+    .activity-icon {
+      font-size: 30px;
+      padding: 4px 5px 6px 5px;
+    }
+
+    .activity-text {
+      font-size: 22px;
+      padding: 0 10px 0 7px;
+    }
+  }
+}