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

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/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;
+    }
+  }
+}