wave-ui 2.25.0 → 2.28.1

package/src/wave-ui/scss/_mixins.scss

@@ -0,0 +1,100 @@
+@mixin default-transition($duration: $transition-duration, $delay: 0s) {
+  transition: $duration $delay ease-in-out;
+}
+
+@mixin out-back-transition($duration: $transition-duration, $delay: 0s) {
+  transition: $duration $delay cubic-bezier(0.18, 0.89, 0.32, 1.28);
+}
+
+/**
+ * Generates a triangle arrow on the edge of an element.
+ *
+ * @param $color: the color to apply to the triangle.
+ * @param $selector: the element selector that receives the modifiers (--top, --left, etc.).
+ * @param $size: the triangle size at the base.
+ * @param $thickness: the border thickness, 0 to remove the border.
+ */
+@mixin triangle($color: white, $selector: '', $size: 7px, $thickness: 1px) {
+  @if ($thickness > 0) {
+    // The underneath border triangle.
+    &:before {
+      content: '';
+      position: absolute;
+      width: 0;
+      height: 0;
+      border: $size solid transparent;
+    }
+
+    &#{$selector}--top:before {
+      top: 100%;
+      left: 50%;
+      border-top-color: inherit;
+      transform: translateX(-50%);
+      margin-top: 0;
+    }
+    &#{$selector}--bottom:before {
+      bottom: 100%;
+      left: 50%;
+      border-bottom-color: inherit;
+      transform: translateX(-50%);
+      margin-bottom: 0;
+    }
+    &#{$selector}--left:before {
+      left: 100%;
+      top: 50%;
+      border-left-color: inherit;
+      transform: translateY(-50%);
+      margin-left: 0;
+    }
+    &#{$selector}--right:before {
+      right: 100%;
+      top: 50%;
+      border-right-color: inherit;
+      transform: translateY(-50%);
+      margin-right: 0;
+    }
+
+    &#{$selector}--align-top:before {transform: none;top: (2 * $base-increment) - 1px;}
+    &#{$selector}--align-bottom:before {transform: none;top: auto;bottom: (2 * $base-increment) - 1px;}
+    &#{$selector}--align-left:before {transform: none;left: (2 * $base-increment) - 1px;}
+    &#{$selector}--align-right:before {transform: none;left: auto;right: (2 * $base-increment) - 1px;}
+  }
+
+  // The colored triangle on top of `:before`.
+  &:after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: ($size - $thickness) solid transparent;
+  }
+  &#{$selector}--top:after {
+    top: 100%;
+    left: 50%;
+    border-top-color: $color;
+    transform: translateX(-50%);
+  }
+  &#{$selector}--bottom:after {
+    bottom: 100%;
+    left: 50%;
+    border-bottom-color: $color;
+    transform: translateX(-50%);
+  }
+  &#{$selector}--left:after {
+    left: 100%;
+    top: 50%;
+    border-left-color: $color;
+    transform: translateY(-50%);
+  }
+  &#{$selector}--right:after {
+    right: 100%;
+    top: 50%;
+    border-right-color: $color;
+    transform: translateY(-50%);
+  }
+
+  &#{$selector}--align-top:after {transform: none;top: 2 * $base-increment;}
+  &#{$selector}--align-bottom:after {transform: none;top: auto;bottom: 2 * $base-increment;}
+  &#{$selector}--align-left:after {transform: none;left: 2 * $base-increment;}
+  &#{$selector}--align-right:after {transform: none;left: auto;right: 2 * $base-increment;}
+}

package/src/wave-ui/scss/_transitions.scss

@@ -142,11 +142,11 @@ $fast-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1);
 
 // Twist.
 // --------------------------------------------------------
-.twist-enter-active {animation: w-twist $transition-duration;}
-.twist-leave-active {animation: w-twist $transition-duration reverse;}
+.twist-enter-active {animation: w-twist ($transition-duration + 0.25s);}
+.twist-leave-active {animation: w-twist ($transition-duration + 0.25s) reverse;}
 @keyframes w-twist {
-  0% {transform: scale(0) rotate(-30deg);}
-  60% {transform: scale(1.03) rotate(5deg);}
+  0% {transform: scale(0) rotate(-70deg);}
+  60% {transform: scale(1.03) rotate(6deg);}
   100% {transform: scale(1) rotate(0deg);}
 }
 // --------------------------------------------------------

package/src/wave-ui/scss/_variables.scss

@@ -17,7 +17,7 @@ $layout-padding: $base-increment * 4 !default; // Applied on the .content-wrap t
 $border-radius: 3px !default;
 $border-color: rgba(0, 0, 0, 0.15);
 $border: 1px solid $border-color !default;
-$transition-duration: 0.2s !default;
+$transition-duration: 0.25s !default;
 $fast-transition-duration: 0.15s !default;
 $box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
              0 2px 2px 0 rgba(0, 0, 0, 0.15),
@@ -28,15 +28,6 @@ $form-field-height: round(2 * $base-font-size) !default;
 // Always an even number for better vertical alignment. (Used in checkbox, radio, switch)
 $small-form-el-size: round(divide(1.3 * $base-font-size, 2)) * 2 !default;
 
-// Mixins.
-@mixin default-transition($duration: $transition-duration, $delay: 0s) {
-  transition: $duration $delay ease-in-out;
-}
-
-@mixin out-back-transition($duration: $transition-duration, $delay: 0s) {
-  transition: $duration $delay cubic-bezier(0.18, 0.89, 0.32, 1.28);
-}
-
 // COMPONENTS DEFAULTS.
 // ========================================================
 // w-drawer.
@@ -66,3 +57,7 @@ $textarea-line-height: 1.2;
 $tooltip-bg-color: #fff;
 $tooltip-color: rgba(0, 0, 0, 0.7);
 // --------------------------------------------------------
+
+// Mixins.
+// --------------------------------------------------------
+@import './mixins';

package/src/wave-ui/utils/index.js

@@ -0,0 +1,11 @@
+/**
+ * Takes CSS classes as a string array or object and turn them into an object.
+ *
+ * @param {String|Array|Object} classes the CSS classes to merge into an object
+ * @return {Object}
+ */
+export const objectifyClasses = (classes = {}) => {
+  if (typeof classes === 'string') classes = { [classes]: true }
+  else if (typeof classes === 'array') classes = { [classes.join(' ')]: true }
+  return classes
+}