wave-ui 2.23.0 → 2.27.0

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

@@ -1,204 +1,214 @@
-// The CSS variables are used in the dynamic-css in order to reuse the same SCSS variable presets.
+// The CSS variables are used in the dynamic-css.js file in order to reuse the same SCSS
+// variable presets.
 :root {
   --base-increment: #{$base-increment};
   --css-scope: #{$css-scope};
 }
 
-#{$css-scope} {
-  // Layout classes.
-  // ----------------------------------------------
-  .show {display: block;}
-  .hide {display: none;}
-  .spacer {flex-grow: 1;}
-
-  .grow {flex-grow: 1;flex-basis: auto;}
-  .no-grow {flex-grow: 0;}
-  .shrink {flex-shrink: 1;margin-left: auto;margin-right: auto;}
-  .no-shrink {flex-shrink: 0;}
-  .fill-width {width: 100%;}
-  .fill-height {height: 100%;}
-  .basis-zero {flex-basis: 0;}
-
-  .align-start {align-items: flex-start;}
-  .align-center {align-items: center;}
-  .align-end {align-items: flex-end;}
-  .align-self-start {align-self: flex-start;}
-  .align-self-center {align-self: center;}
-  .align-self-end {align-self: flex-end;}
-  .align-self-stretch {align-self: stretch;}
-  .justify-start {justify-content: flex-start;}
-  .justify-center {justify-content: center;}
-  .justify-end {justify-content: flex-end;}
-  // There is no justify-self in Flexbox.
-  // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox
-  .justify-space-between {justify-content: space-between;}
-  .justify-space-around {justify-content: space-around;}
-  .justify-space-evenly {justify-content: space-evenly;}
-
-  .text-left {text-align: left;}
-  .text-center {text-align: center;}
-  .text-right {text-align: right;}
-  .text-nowrap {white-space: nowrap;}
-
-  .lh0 {line-height: 1;}
-  .lh1 {line-height: 1.2;}
-  .lh2 {line-height: 1.4;}
-  .lh3 {line-height: 1.6;}
-  .lh4 {line-height: 1.8;}
-  .lh5 {line-height: 2;}
-
-  .d-flex {display: flex;}
-  .d-iflex {display: inline-flex;}
-  .d-block {display: block;}
-  .d-iblock {display: inline-block;}
-  // ----------------------------------------------
-
-  // Borders (from 0 to 6), radii (from 0 to 6 + `m` for max).
-  // ----------------------------------------------
-  @for $i from 1 through 6 {
-    .bd#{$i} {border: $i + px solid $border-color;}
-  }
-  .bd0 {border: none;}
-
-  @for $i from 1 through 6 {
-    .bdrs#{$i} {border-radius: round($i * $base-increment);}
-  }
-  .bdrsr {border-radius: 999em;}
-  .bdrsm {border-radius: 100%;}
-  .bdrs0 {border-radius: 0;}
-  // ----------------------------------------------
-
-  // Shadows (from -6 to 6).
-  // ----------------------------------------------
-  @for $i from -6 through -1 {
-    .sh#{$i} {
-      box-shadow: 0 0 (-1 * round($i * $base-increment)) rgba(#000, max(0.15 * divide(-$i, 2), 0.15)) inset;
+// All these CSS classes will not be generated if the $use-layout-classes is set to false.
+@if $use-layout-classes {
+  #{$css-scope} {
+    // Layout classes.
+    // ----------------------------------------------
+    .show {display: block;}
+    .hide {display: none;}
+    .spacer {flex-grow: 1;}
+
+    .grow {flex-grow: 1;flex-basis: auto;}
+    .no-grow {flex-grow: 0;}
+    .shrink {flex-shrink: 1;margin-left: auto;margin-right: auto;}
+    .no-shrink {flex-shrink: 0;}
+    .fill-width {width: 100%;}
+    .fill-height {height: 100%;}
+    .basis-zero {flex-basis: 0;}
+
+    .align-start {align-items: flex-start;}
+    .align-center {align-items: center;}
+    .align-end {align-items: flex-end;}
+    .align-self-start {align-self: flex-start;}
+    .align-self-center {align-self: center;}
+    .align-self-end {align-self: flex-end;}
+    .align-self-stretch {align-self: stretch;}
+    .justify-start {justify-content: flex-start;}
+    .justify-center {justify-content: center;}
+    .justify-end {justify-content: flex-end;}
+    // There is no justify-self in Flexbox.
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox
+    .justify-space-between {justify-content: space-between;}
+    .justify-space-around {justify-content: space-around;}
+    .justify-space-evenly {justify-content: space-evenly;}
+
+    .text-left {text-align: left;}
+    .text-center {text-align: center;}
+    .text-right {text-align: right;}
+    .text-nowrap {white-space: nowrap;}
+
+    .lh0 {line-height: 1;}
+    .lh1 {line-height: 1.2;}
+    .lh2 {line-height: 1.4;}
+    .lh3 {line-height: 1.6;}
+    .lh4 {line-height: 1.8;}
+    .lh5 {line-height: 2;}
+
+    .d-flex {display: flex;}
+    .d-iflex {display: inline-flex;}
+    .d-block {display: block;}
+    .d-iblock {display: inline-block;}
+    // ----------------------------------------------
+
+    // Borders (from 0 to 6), radii (from 0 to 6 + `m` for max).
+    // ----------------------------------------------
+    @for $i from 1 through 6 {
+      .bd#{$i} {border: $i + px solid $border-color;}
     }
-  }
-  @for $i from 1 through 6 {
-    .sh#{$i} {
-      box-shadow: 0 0 1px rgba(#000, 0.1),
-                  round($base-increment * divide($i, 4)) round($base-increment * divide($i, 4)) round($i * $base-increment) rgba(#000, max(0.15 * divide($i, 2), 0.15));
+    .bdx1 {border-left: 1px solid $border-color;border-right: 1px solid $border-color;}
+    .bdy1 {border-top: 1px solid $border-color;border-bottom: 1px solid $border-color;}
+    .bdl1 {border-left: 1px solid $border-color;}
+    .bdr1 {border-right: 1px solid $border-color;}
+    .bdt1 {border-top: 1px solid $border-color;}
+    .bdb1 {border-bottom: 1px solid $border-color;}
+    .bd0 {border: none;}
+
+    @for $i from 1 through 6 {
+      .bdrs#{$i} {border-radius: round($i * $base-increment);}
     }
-  }
-  .sh0 {box-shadow: none;}
-  // ----------------------------------------------
-
-  // Spaces.
-  // ----------------------------------------------
-  // Margin.
-  @for $i from 0 through 12 {
-    $number: round($i * $base-increment);
-    .ma#{$i} {margin: $number;}
-    @if ($i > 0) {.ma-#{$i} {margin: -$number;}}
-  }
-  .maa {margin: auto;}
-  .ma0 {margin: 0;}
-
-  @for $i from 0 through 12 {
-    $number: round($i * $base-increment);
-    .mx#{$i} {margin-left: $number;margin-right: $number;}
-    .my#{$i} {margin-top: $number;margin-bottom: $number;}
-    @if ($i > 0) {
-      .mx-#{$i} {margin-left: -$number;margin-right: -$number;}
-      .my-#{$i} {margin-top: -$number;margin-bottom: -$number;}
+    .bdrsr {border-radius: 999em;}
+    .bdrsm {border-radius: 100%;}
+    .bdrs0 {border-radius: 0;}
+    // ----------------------------------------------
+
+    // Shadows (from -6 to 6).
+    // ----------------------------------------------
+    @for $i from -6 through -1 {
+      .sh#{$i} {
+        box-shadow: 0 0 (-1 * round($i * $base-increment)) rgba(#000, max(0.15 * divide(-$i, 2), 0.15)) inset;
+      }
     }
-  }
-  .mxa {margin-left: auto;margin-right: auto;}
-  .mya {margin-top: auto;margin-bottom: auto;}
-  .mx0 {margin-left: 0;margin-right: 0;}
-  .my0 {margin-top: 0;margin-bottom: 0;}
-
-  @for $i from 0 through 12 {
-    $number: round($i * $base-increment);
-    .mt#{$i} {margin-top: $number;}
-    .mr#{$i} {margin-right: $number;}
-    .mb#{$i} {margin-bottom: $number;}
-    .ml#{$i} {margin-left: $number;}
-    @if ($i > 0) {
-      .mt-#{$i} {margin-top: -$number;}
-      .mr-#{$i} {margin-right: -$number;}
-      .mb-#{$i} {margin-bottom: -$number;}
-      .ml-#{$i} {margin-left: -$number;}
+    @for $i from 1 through 6 {
+      .sh#{$i} {
+        box-shadow: 0 0 1px rgba(#000, 0.1),
+                    round($base-increment * divide($i, 4)) round($base-increment * divide($i, 4)) round($i * $base-increment) rgba(#000, max(0.15 * divide($i, 2), 0.15));
+      }
     }
-  }
-  .mta {margin-top: auto;}
-  .mra {margin-right: auto;}
-  .mba {margin-bottom: auto;}
-  .mla {margin-left: auto;}
-  .mt0 {margin-top: 0;}
-  .mr0 {margin-right: 0;}
-  .mb0 {margin-bottom: 0;}
-  .ml0 {margin-left: 0;}
-
-  // Padding.
-  @for $i from 1 through 12 {
-    $number: round($i * $base-increment);
-    .pa#{$i} {padding: $number;}
-  }
-  .pa0 {padding: 0;}
+    .sh0 {box-shadow: none;}
+    // ----------------------------------------------
+
+    // Spaces.
+    // ----------------------------------------------
+    // Margin.
+    @for $i from 0 through 12 {
+      $number: round($i * $base-increment);
+      .ma#{$i} {margin: $number;}
+      @if ($i > 0) {.ma-#{$i} {margin: -$number;}}
+    }
+    .maa {margin: auto;}
+    .ma0 {margin: 0;}
+
+    @for $i from 0 through 12 {
+      $number: round($i * $base-increment);
+      .mx#{$i} {margin-left: $number;margin-right: $number;}
+      .my#{$i} {margin-top: $number;margin-bottom: $number;}
+      @if ($i > 0) {
+        .mx-#{$i} {margin-left: -$number;margin-right: -$number;}
+        .my-#{$i} {margin-top: -$number;margin-bottom: -$number;}
+      }
+    }
+    .mxa {margin-left: auto;margin-right: auto;}
+    .mya {margin-top: auto;margin-bottom: auto;}
+    .mx0 {margin-left: 0;margin-right: 0;}
+    .my0 {margin-top: 0;margin-bottom: 0;}
+
+    @for $i from 0 through 12 {
+      $number: round($i * $base-increment);
+      .mt#{$i} {margin-top: $number;}
+      .mr#{$i} {margin-right: $number;}
+      .mb#{$i} {margin-bottom: $number;}
+      .ml#{$i} {margin-left: $number;}
+      @if ($i > 0) {
+        .mt-#{$i} {margin-top: -$number;}
+        .mr-#{$i} {margin-right: -$number;}
+        .mb-#{$i} {margin-bottom: -$number;}
+        .ml-#{$i} {margin-left: -$number;}
+      }
+    }
+    .mta {margin-top: auto;}
+    .mra {margin-right: auto;}
+    .mba {margin-bottom: auto;}
+    .mla {margin-left: auto;}
+    .mt0 {margin-top: 0;}
+    .mr0 {margin-right: 0;}
+    .mb0 {margin-bottom: 0;}
+    .ml0 {margin-left: 0;}
+
+    // Padding.
+    @for $i from 1 through 12 {
+      $number: round($i * $base-increment);
+      .pa#{$i} {padding: $number;}
+    }
+    .pa0 {padding: 0;}
 
-  @for $i from 0 through 12 {
-    $number: round($i * $base-increment);
-    .px#{$i} {padding-left: $number;padding-right: $number;}
-    .py#{$i} {padding-top: $number;padding-bottom: $number;}
-  }
-  .px0 {padding-left: 0;padding-right: 0;}
-  .py0 {padding-top: 0;padding-bottom: 0;}
-
-  @for $i from 0 through 12 {
-    $number: round($i * $base-increment);
-    .pt#{$i} {padding-top: $number;}
-    .pr#{$i} {padding-right: $number;}
-    .pb#{$i} {padding-bottom: $number;}
-    .pl#{$i} {padding-left: $number;}
+    @for $i from 0 through 12 {
+      $number: round($i * $base-increment);
+      .px#{$i} {padding-left: $number;padding-right: $number;}
+      .py#{$i} {padding-top: $number;padding-bottom: $number;}
+    }
+    .px0 {padding-left: 0;padding-right: 0;}
+    .py0 {padding-top: 0;padding-bottom: 0;}
+
+    @for $i from 0 through 12 {
+      $number: round($i * $base-increment);
+      .pt#{$i} {padding-top: $number;}
+      .pr#{$i} {padding-right: $number;}
+      .pb#{$i} {padding-bottom: $number;}
+      .pl#{$i} {padding-left: $number;}
+    }
+    .pt0 {padding-top: 0;}
+    .pr0 {padding-right: 0;}
+    .pb0 {padding-bottom: 0;}
+    .pl0 {padding-left: 0;}
+    // ----------------------------------------------
+
+    // Sizes.
+    // ----------------------------------------------
+    // In all the sizes bellow, round(x / 2) * 2 to always have even numbers.
+    // Different heights with a mix of odd and even numbers will misalign
+    // when vertically centering (vertical-align or align-items center).
+    .size--xs {font-size: round(0.85 * $base-font-size);}
+    .size--sm {font-size: round(1 * $base-font-size);}
+    .size--md {font-size: round(1.1 * $base-font-size);}
+    .size--lg {font-size: round(1.4 * $base-font-size);}
+    .size--xl {font-size: round(1.65 * $base-font-size);}
+    // ----------------------------------------------
+
+    // Grid system.
+    // ----------------------------------------------
+    // CSS variables are not supported in media queries yet
+    // (https://www.w3.org/TR/css-variables-1/#using-variables),
+    // the grid system is done dynamically in dynamic-css.js.
+
+    // @media screen and (min-width: var(--breakpoint-xs)) {
+    //   @for $i from 0 through $grid-base {
+    //     .sm#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
+    //   }
+    // }
+
+    // @media screen and (min-width: var(--breakpoint-sm)) {
+    //   @for $i from 0 through $grid-base {
+    //     .md#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
+    //   }
+    // }
+
+    // @media screen and (min-width: var(--breakpoint-md)) {
+    //   @for $i from 0 through $grid-base {
+    //     .lg#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
+    //   }
+    // }
+
+    // @media screen and (min-width: var(--breakpoint-lg)) {
+    //   @for $i from 0 through $grid-base {
+    //     .xl#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
+    //   }
+    // }
+    // ----------------------------------------------
   }
-  .pt0 {padding-top: 0;}
-  .pr0 {padding-right: 0;}
-  .pb0 {padding-bottom: 0;}
-  .pl0 {padding-left: 0;}
-  // ----------------------------------------------
-
-  // Sizes.
-  // ----------------------------------------------
-  // In all the sizes bellow, round(x / 2) * 2 to always have even numbers.
-  // Different heights with a mix of odd and even numbers will misalign
-  // when vertically centering (vertical-align or align-items center).
-  .size--xs {font-size: round(0.85 * $base-font-size);}
-  .size--sm {font-size: round(1 * $base-font-size);}
-  .size--md {font-size: round(1.1 * $base-font-size);}
-  .size--lg {font-size: round(1.4 * $base-font-size);}
-  .size--xl {font-size: round(1.65 * $base-font-size);}
-  // ----------------------------------------------
-
-  // Grid system.
-  // ----------------------------------------------
-  // CSS variables are not supported in media queries yet
-  // (https://www.w3.org/TR/css-variables-1/#using-variables),
-  // the grid system is done dynamically in dynamic-css.js.
-
-  // @media screen and (min-width: var(--breakpoint-xs)) {
-  //   @for $i from 0 through $grid-base {
-  //     .sm#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
-  //   }
-  // }
-
-  // @media screen and (min-width: var(--breakpoint-sm)) {
-  //   @for $i from 0 through $grid-base {
-  //     .md#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
-  //   }
-  // }
-
-  // @media screen and (min-width: var(--breakpoint-md)) {
-  //   @for $i from 0 through $grid-base {
-  //     .lg#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
-  //   }
-  // }
-
-  // @media screen and (min-width: var(--breakpoint-lg)) {
-  //   @for $i from 0 through $grid-base {
-  //     .xl#{$grid-base - $i} {width: ($grid-base - $i) * 100% / $grid-base;}
-  //   }
-  // }
-  // ----------------------------------------------
 }

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

@@ -8,6 +8,8 @@
 // GLOBAL DEFAULTS.
 // ========================================================
 $css-scope: '.w-app' !default; // Allows control on CSS rules priority.
+// True by default. False allows you to use an external CSS library (like Tailwind).
+$use-layout-classes: true !default;
 
 $base-font-size: 14px !default;
 $base-increment: round(divide($base-font-size, 4)) !default;
@@ -15,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),
@@ -26,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.

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

@@ -1,4 +1,5 @@
 @import './variables';
+@import './mixins';
 @import './base';
 @import './typography';
 @import './layout';

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