From 706654082d96dadeb0295e7b78e0837690fac1e1 Mon Sep 17 00:00:00 2001
From: Philippe Rail <philipperail@gmail.com>
Date: Fri, 2 Feb 2018 11:28:05 -0500
Subject: [PATCH 01/17] Seven shades of grey

---
 src/components/datepicker/datepicker.scss   |  2 +-
 src/components/dialog/dialog.scss           |  2 +-
 src/components/fullpage/fullpage.scss       |  4 +-
 src/components/icon-button/icon-button.scss |  2 +-
 src/components/input-style/input-style.scss |  2 +-
 src/components/menu-item/menu-item.scss     |  2 +-
 src/components/navbar-item/navbar-item.scss |  2 +-
 src/components/panel/panel.scss             |  2 +-
 src/components/scroll-top/scroll-top.scss   |  2 +-
 src/styles/abstracts/_mixins.scss           |  8 ++--
 src/styles/abstracts/_var-color.scss        | 43 ++++++++-------------
 src/styles/base/_typography.scss            |  4 +-
 12 files changed, 33 insertions(+), 42 deletions(-)

diff --git a/src/components/datepicker/datepicker.scss b/src/components/datepicker/datepicker.scss
index 8843ab062..7682dbaad 100644
--- a/src/components/datepicker/datepicker.scss
+++ b/src/components/datepicker/datepicker.scss
@@ -62,7 +62,7 @@ $m-datepicker--item-dimension: $m-touch-size !default;
 
         &:hover,
         &:focus {
-            color: $m-color--black-grey-lighter;
+            color: $m-color--grey-darker;
         }
     }
 
diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss
index be08276a0..02ba47bf1 100644
--- a/src/components/dialog/dialog.scss
+++ b/src/components/dialog/dialog.scss
@@ -148,7 +148,7 @@ $m-dialog--max-width--s: 420px !default;
 
     &__header {
         position: relative;
-        background: $m-color--black-grey;
+        background: $m-color--grey-darker;
         color: $m-color--white;
         justify-content: space-between;
 
diff --git a/src/components/fullpage/fullpage.scss b/src/components/fullpage/fullpage.scss
index dcddc8b3a..f0e5b3b06 100644
--- a/src/components/fullpage/fullpage.scss
+++ b/src/components/fullpage/fullpage.scss
@@ -80,7 +80,7 @@
     }
 
     &__header {
-        background-color: $m-color--black-grey;
+        background-color: $m-color--grey-darker;
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -104,7 +104,7 @@
             align-items: center;
             justify-content: center;
             width: var(--m-min-height-header);
-            background-color: $m-color--black-grey-darker;
+            background-color: $m-color--grey-darkest;
         }
 
         &__center {
diff --git a/src/components/icon-button/icon-button.scss b/src/components/icon-button/icon-button.scss
index bbf13fa8b..ccb39d1e8 100644
--- a/src/components/icon-button/icon-button.scss
+++ b/src/components/icon-button/icon-button.scss
@@ -53,7 +53,7 @@
             }
 
             &::before {
-                background: $m-color--black-grey-light;
+                background: $m-color--grey-dark;
             }
         }
 
diff --git a/src/components/input-style/input-style.scss b/src/components/input-style/input-style.scss
index 84aa14844..65d0f1510 100644
--- a/src/components/input-style/input-style.scss
+++ b/src/components/input-style/input-style.scss
@@ -209,7 +209,7 @@ $m-input-style--padding: 6px !default;
         margin-bottom: 4px; // Magic number
         font-size: $m-font-size;
         font-weight: $m-font-weight;
-        color: $m-color--black-grey-lighter;
+        color: $m-color--grey-darker;
         cursor: pointer;
 
         .m-icon {
diff --git a/src/components/menu-item/menu-item.scss b/src/components/menu-item/menu-item.scss
index f44e26180..32a845bd0 100644
--- a/src/components/menu-item/menu-item.scss
+++ b/src/components/menu-item/menu-item.scss
@@ -48,7 +48,7 @@ $m-menu-item--color-active: $m-color--grey-lightest !default;
 
             .m-menu-item {
                 &__icon {
-                    color: $m-color--black-grey;
+                    color: $m-color--grey-darker;
                 }
             }
         }
diff --git a/src/components/navbar-item/navbar-item.scss b/src/components/navbar-item/navbar-item.scss
index 7c0e71fb2..9d44682e5 100644
--- a/src/components/navbar-item/navbar-item.scss
+++ b/src/components/navbar-item/navbar-item.scss
@@ -90,7 +90,7 @@ a {
             a,
             button {
                 color: $m-color--white;
-                background: $m-color--black-grey-light;
+                background: $m-color--grey-dark;
             }
         }
     }
diff --git a/src/components/panel/panel.scss b/src/components/panel/panel.scss
index bf7c2a174..4425deb4f 100644
--- a/src/components/panel/panel.scss
+++ b/src/components/panel/panel.scss
@@ -20,7 +20,7 @@ $m-panel--screen--min: 640px;
     }
 
     &.m--is-skin-darker {
-        background: $m-color--black-grey;
+        background: $m-color--grey-darker;
         color: $m-color--white;
     }
 
diff --git a/src/components/scroll-top/scroll-top.scss b/src/components/scroll-top/scroll-top.scss
index 80abf6a84..3de9eb188 100644
--- a/src/components/scroll-top/scroll-top.scss
+++ b/src/components/scroll-top/scroll-top.scss
@@ -19,7 +19,7 @@
         width: 28px;
         height: 28px;
         padding: 0;
-        background-color: $m-color--black-grey-dark;
+        background-color: $m-color--grey-darker;
         border: none;
         border-radius: $m-border-radius--s;
         opacity: 0.3;
diff --git a/src/styles/abstracts/_mixins.scss b/src/styles/abstracts/_mixins.scss
index e579de521..66d3211a1 100644
--- a/src/styles/abstracts/_mixins.scss
+++ b/src/styles/abstracts/_mixins.scss
@@ -145,17 +145,17 @@
         > ul > li::before,
         &::before {
             border-radius: 50%;
-            border: 1px solid $m-color--black-grey-light;
+            border: 1px solid $m-color--grey-dark;
         }
 
         &::before,
         > ul > li > ul > li::before {
-            background: $m-color--black-grey-light;
+            background: $m-color--grey-dark;
         }
 
         > ul > li > ul > li::before,
         > ul > li > ul > li > ul > li::before {
-            border: 1px solid $m-color--black-grey-light;
+            border: 1px solid $m-color--grey-dark;
         }
 
         > ul > li > ul > li > ul > li > ul > li::before {
@@ -163,7 +163,7 @@
             height: 0;
             border-style: solid;
             border-width: 3px 0 3px 4px;
-            border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) $m-color--black-grey-light;
+            border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) $m-color--grey-dark;
         }
     }
 }
diff --git a/src/styles/abstracts/_var-color.scss b/src/styles/abstracts/_var-color.scss
index 74ef310a5..c9b5c4c1e 100644
--- a/src/styles/abstracts/_var-color.scss
+++ b/src/styles/abstracts/_var-color.scss
@@ -5,55 +5,46 @@ $m-color--ul-blue: #09f;
 $m-color--ul-yellow: #ffc103;
 $m-color--ul-red: #e30513;
 
-// ======================================================================
-//  Black grey
-// ======================================================================
-$m-color--black-grey-darker: #232323 !default;
-$m-color--black-grey-dark: #2e2e2e !default;
-$m-color--black-grey: #3d3d3d !default;
-$m-color--black-grey-light: #4f4f4f !default;
-$m-color--black-grey-lighter: #666 !default;
-
 // ======================================================================
 //  Grey
 // ======================================================================
-$m-color--grey-darker: #999 !default;
-$m-color--grey-dark: #b0b0b0 !default;
-$m-color--grey: #dadada !default;
-$m-color--grey-light: #e8e8e8 !default;
-$m-color--grey-lighter: #f1f1f1 !default;
-$m-color--grey-lightest: #f7f7f7 !default;
+$m-color--grey-darkest: #1f1f1f !default;
+$m-color--grey-darker: #3d3d3d !default;
+$m-color--grey-dark: #696969 !default;
+$m-color--grey: #929292 !default;
+$m-color--grey-light: #d7d7d7 !default;
+$m-color--grey-lighter: #f4f4f4 !default;
+$m-color--grey-lightest: #f9f9f9 !default;
 
 // ======================================================================
 //  General color
 // ======================================================================
 $m-color--black: #000;
-$m-color--text: $m-color--black-grey;
+$m-color--text: $m-color--grey-darker;
 $m-color--white: #fff;
 
 // ======================================================================
 //  Success colors
 // ======================================================================
-$m-color--success-dark: #008964 !default;
+$m-color--success-dark: #009962 !default;
 $m-color--success: #00c77f !default;
-$m-color--success-light: #abe5c3 !default;
+$m-color--success-light: #cdf3e3 !default;
 $m-color--success-lightest: #eaf9f1 !default;
 
 // ======================================================================
 //  Warning colors
 // ======================================================================
-$m-color--warning-dark: #edaf00 !default;
+// $m-color--warning-dark: #edaf00 !default;
 $m-color--warning: $m-color--ul-yellow !default;
-$m-color--warning-light: #ffec5d !default;
-$m-color--warning-lightest: #fffdcf !default;
+// $m-color--warning-light: #ffec5d  !default;
+$m-color--warning-lightest: #fff8e6 !default;
 
 // ======================================================================
 //  Error colors
 // ======================================================================
-$m-color--error-dark: #c00 !default;
+$m-color--error-dark: #b3040f !default;
 $m-color--error: $m-color--ul-red !default;
-$m-color--error-light: #f7081f !default;
-$m-color--error-lightest: #ffdcdc !default;
+$m-color--error-lightest: #fcf2f3 !default;
 
 // ======================================================================
 //  Interactive colors
@@ -77,9 +68,9 @@ $m-color--accent-lightest: #ffeecf !default;
 // ======================================================================
 //  Active colors
 // ======================================================================
-$m-color--active-dark: $m-color--warning-dark !default;
+// $m-color--active-dark: $m-color--warning-dark !default;
 $m-color--active: $m-color--ul-yellow !default;
-$m-color--active-light: $m-color--warning-light !default;
+// $m-color--active-light: $m-color--warning-light !default;
 $m-color--active-lightest: $m-color--warning-lightest !default;
 
 // ======================================================================
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index 4d30319fd..a99a33fa3 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -183,7 +183,7 @@ a {
         font-family: $m-font-family;
         font-size: $m-font-size--s;
         font-weight: $m-font-weight--bold;
-        background: $m-color--warning-light;
-        box-shadow: 0 0 0 2px $m-color--warning-light;
+        background: $m-color--warning-lightest;
+        box-shadow: 0 0 0 2px $m-color--warning-lightest;
     }
 }

From a5a57c6ec1eca80354b589a3a2e6b9ac66ee06af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Par=C3=A9?= <raph.pare@outlook.com>
Date: Fri, 2 Feb 2018 13:55:05 -0500
Subject: [PATCH 02/17] Update input-width

---
 src/components/dropdown/dropdown.html   |  4 +-
 src/components/dropdown/dropdown.ts     |  6 +--
 src/components/textarea/textarea.html   |  2 +-
 src/components/textarea/textarea.ts     | 10 ++---
 src/components/textfield/textfield.html |  3 +-
 src/components/textfield/textfield.ts   |  4 +-
 src/mixins/input-width/input-width.ts   | 54 +++++++++++++++++++++++++
 7 files changed, 70 insertions(+), 13 deletions(-)
 create mode 100644 src/mixins/input-width/input-width.ts

diff --git a/src/components/dropdown/dropdown.html b/src/components/dropdown/dropdown.html
index 2796ed35d..ce09b338e 100644
--- a/src/components/dropdown/dropdown.html
+++ b/src/components/dropdown/dropdown.html
@@ -1,6 +1,6 @@
 <div class="m-dropdown"
      :class="{ 'm--is-open': open, 'm--is-disabled': disabled, 'm--is-waiting': waiting, 'm--is-filterable': filterable }"
-     :style="{ width: width, 'max-width': maxWidth }"
+     :style="{ width: width, maxWidth: inputMaxWidth }"
      ref="mDropdown">
     <m-input-style ref="mInputStyle"
                    :label="label"
@@ -10,7 +10,7 @@
                    :empty="isEmpty"
                    :error="hasError"
                    :valid="isValid"
-                   :width="width"
+                   width="100%"
                    :icon-name="iconName"
                    @mousedown="inputOnMousedown"
                    @mouseup="inputOnMouseup"
diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts
index 0d4f8b840..24b434442 100644
--- a/src/components/dropdown/dropdown.ts
+++ b/src/components/dropdown/dropdown.ts
@@ -9,6 +9,7 @@ import DropdownItemPlugin, { MDropdownInterface, MDropdownItem, BaseDropdown, Ba
 import { MDropdownGroup } from '../dropdown-group/dropdown-group';
 import { InputState, InputStateMixin } from '../../mixins/input-state/input-state';
 import { InputPopup } from '../../mixins/input-popup/input-popup';
+import { InputWidth, InputMaxWidth } from '../../mixins/input-width/input-width';
 import { MediaQueries, MediaQueriesMixin } from '../../mixins/media-queries/media-queries';
 import MediaQueriesPlugin from '../../utils/media-queries/media-queries';
 import i18nPlugin from '../../utils/i18n/i18n';
@@ -26,7 +27,8 @@ const DROPDOWN_STYLE_TRANSITION: string = 'max-height 0.3s ease';
     mixins: [
         InputState,
         InputPopup,
-        MediaQueries
+        MediaQueries,
+        InputWidth
     ]
 })
 export class MDropdown extends BaseDropdown implements MDropdownInterface {
@@ -41,8 +43,6 @@ export class MDropdown extends BaseDropdown implements MDropdownInterface {
     public iconName: string;
     @Prop()
     public filterable: boolean;
-    @Prop({ default: DROPDOWN_MAX_WIDTH })
-    public width: string;
     @Prop()
     public textNoData: string;
     @Prop()
diff --git a/src/components/textarea/textarea.html b/src/components/textarea/textarea.html
index 4ddb28b60..cae07f6ea 100644
--- a/src/components/textarea/textarea.html
+++ b/src/components/textarea/textarea.html
@@ -6,7 +6,7 @@
                   'm--has-icon' : hasIcon,
                   'm--has-label': hasLabel }"
      @click="onClick"
-     :style="{ width: width, maxWidth: maxWidth }">
+     :style="{ width: width, maxWidth: inputMaxWidth }">
     <m-input-style :disabled="isDisabled"
                    :waiting="isWaiting"
                    :error="textareaError"
diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts
index 06dfb3ef2..281f13249 100644
--- a/src/components/textarea/textarea.ts
+++ b/src/components/textarea/textarea.ts
@@ -9,21 +9,21 @@ import { InputManagement } from '../../mixins/input-management/input-management'
 import { KeyCode } from '../../utils/keycode/keycode';
 import InputStyle from '../input-style/input-style';
 import ValidationMesagePlugin from '../validation-message/validation-message';
+import { InputWidth, InputMaxWidth } from '../../mixins/input-width/input-width';
 
 @WithRender
 @Component({
     mixins: [
         InputState,
-        InputManagement
+        InputManagement,
+        InputWidth
     ]
 })
 export class MTextarea extends ModulVue {
     @Prop()
     public maxlength: number;
-    @Prop({ default: '100%' })
-    public width: string;
-    @Prop({ default: '420px' })
-    public maxWidth: string;
+
+    public maxWidth: string = InputMaxWidth.Medium;
 
     private internalTextareaError: boolean = false;
     private textareaHeight: string;
diff --git a/src/components/textfield/textfield.html b/src/components/textfield/textfield.html
index a71280a83..c883a127a 100644
--- a/src/components/textfield/textfield.html
+++ b/src/components/textfield/textfield.html
@@ -6,7 +6,8 @@
                 'm--has-icon' : hasIcon,
                 'm--has-label': hasLabel },
                 'm--is-type-' + inputType ]"
-     @click="onClick">
+     @click="onClick"
+     :style="{ width: width, maxWidth: inputMaxWidth }">
     <m-input-style :disabled="isDisabled"
                    :waiting="isWaiting"
                    :error="hasError"
diff --git a/src/components/textfield/textfield.ts b/src/components/textfield/textfield.ts
index 83147417e..17682cb2d 100644
--- a/src/components/textfield/textfield.ts
+++ b/src/components/textfield/textfield.ts
@@ -10,6 +10,7 @@ import { InputManagement } from '../../mixins/input-management/input-management'
 import { KeyCode } from '../../utils/keycode/keycode';
 import InputStyle from '../input-style/input-style';
 import ValidationMesagePlugin from '../validation-message/validation-message';
+import { InputWidth, InputMaxWidth } from '../../mixins/input-width/input-width';
 import ButtonPlugin from '../button/button';
 
 export enum MTextfieldType {
@@ -27,7 +28,8 @@ const ICON_NAME_PASSWORD_HIDDEN: string = 'default';
 @Component({
     mixins: [
         InputState,
-        InputManagement
+        InputManagement,
+        InputWidth
     ]
 })
 export class MTextfield extends ModulVue {
diff --git a/src/mixins/input-width/input-width.ts b/src/mixins/input-width/input-width.ts
new file mode 100644
index 000000000..584e81ec7
--- /dev/null
+++ b/src/mixins/input-width/input-width.ts
@@ -0,0 +1,54 @@
+import { ModulVue } from '../../utils/vue/vue';
+import { PluginObject } from 'vue';
+import Component from 'vue-class-component';
+import { Prop } from 'vue-property-decorator';
+import { MediaQueries, MediaQueriesMixin } from '../../mixins/media-queries/media-queries';
+import { KeyCode } from '../../utils/keycode/keycode';
+
+export enum InputMaxWidth {
+    None = 'none',
+    XSmall = 'x-small',
+    Small = 'small',
+    Regular = 'regular',
+    Medium = 'medium',
+    Large = 'large'
+}
+
+@Component({
+    mixins: [MediaQueries]
+})
+export class InputWidth extends ModulVue {
+    @Prop({ default: '100%' })
+    public width: string;
+
+    @Prop({ default: InputMaxWidth.Regular })
+    public maxWidth: string;
+
+    public internalMaxWidth: string | undefined;
+
+    private get inputMaxWidth(): string | undefined {
+        switch (this.maxWidth) {
+            case InputMaxWidth.None:
+                this.internalMaxWidth = undefined;
+                break;
+            case InputMaxWidth.XSmall:
+                this.internalMaxWidth = '72px';
+                break;
+            case InputMaxWidth.Small:
+                this.internalMaxWidth = '144px';
+                break;
+            case InputMaxWidth.Regular:
+                this.internalMaxWidth = '288px';
+                break;
+            case InputMaxWidth.Medium:
+                this.internalMaxWidth = '608px';
+                break;
+            case InputMaxWidth.Large:
+                this.internalMaxWidth = '800px';
+                break;
+            default:
+                this.internalMaxWidth = this.maxWidth;
+        }
+        return this.internalMaxWidth;
+    }
+}

From ad9191601fe4387e9c539a18a0caebf01a4f66d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Par=C3=A9?= <raph.pare@outlook.com>
Date: Wed, 7 Feb 2018 08:36:00 -0500
Subject: [PATCH 03/17] Update color

---
 src/components/accordion/accordion.scss           | 4 ++--
 src/components/dropdown-group/dropdown-group.scss | 5 -----
 src/styles/abstracts/_var-color.scss              | 7 +------
 3 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/src/components/accordion/accordion.scss b/src/components/accordion/accordion.scss
index 5a91d74db..3a52aae29 100644
--- a/src/components/accordion/accordion.scss
+++ b/src/components/accordion/accordion.scss
@@ -3,8 +3,8 @@ $m-accordion--icon-l-width: 12px;
 $m-accordion--icon-width: 10px;
 $m-accordion--icon-l-height: 2px;
 $m-accordion--icon-height: 1px;
-$m-accordion--border-size: 2px;
-$m-accordion--border-color: $m-color--grey-light;
+$m-accordion--border-size: $m-border-width;
+$m-accordion--border-color: $m-color--border;
 $m-accordion--color: $m-color--accent;
 
 .m-accordion {
diff --git a/src/components/dropdown-group/dropdown-group.scss b/src/components/dropdown-group/dropdown-group.scss
index f40088be5..a254a05f2 100644
--- a/src/components/dropdown-group/dropdown-group.scss
+++ b/src/components/dropdown-group/dropdown-group.scss
@@ -1,9 +1,4 @@
 @import 'abstracts/variables';
-$m-dropdown--color-hover: $m-color--grey-lightest !default;
-$m-dropdown--color-select: $m-color--grey-lighter !default;
-$m-dropdown--color-focus: $m-color--interactive-lightest !default;
-$m-dropdown--color-active: $m-color--interactive-lightest !default;
-$m-dropdown--margin: $m-padding--xs !default;
 
 .m-dropdown-group {
     .m-dropdown-group__header {
diff --git a/src/styles/abstracts/_var-color.scss b/src/styles/abstracts/_var-color.scss
index c9b5c4c1e..88f5a8824 100644
--- a/src/styles/abstracts/_var-color.scss
+++ b/src/styles/abstracts/_var-color.scss
@@ -6,7 +6,7 @@ $m-color--ul-yellow: #ffc103;
 $m-color--ul-red: #e30513;
 
 // ======================================================================
-//  Grey
+//  Seven Shades of Grey
 // ======================================================================
 $m-color--grey-darkest: #1f1f1f !default;
 $m-color--grey-darker: #3d3d3d !default;
@@ -34,9 +34,7 @@ $m-color--success-lightest: #eaf9f1 !default;
 // ======================================================================
 //  Warning colors
 // ======================================================================
-// $m-color--warning-dark: #edaf00 !default;
 $m-color--warning: $m-color--ul-yellow !default;
-// $m-color--warning-light: #ffec5d  !default;
 $m-color--warning-lightest: #fff8e6 !default;
 
 // ======================================================================
@@ -68,10 +66,7 @@ $m-color--accent-lightest: #ffeecf !default;
 // ======================================================================
 //  Active colors
 // ======================================================================
-// $m-color--active-dark: $m-color--warning-dark !default;
 $m-color--active: $m-color--ul-yellow !default;
-// $m-color--active-light: $m-color--warning-light !default;
-$m-color--active-lightest: $m-color--warning-lightest !default;
 
 // ======================================================================
 //  disabled colors

From 5de3b2fccd5af7b51d072e716a1412be2153aca6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Par=C3=A9?= <raph.pare@outlook.com>
Date: Wed, 7 Feb 2018 11:56:33 -0500
Subject: [PATCH 04/17] /dialog-full-screen: textarea

---
 src/components/textarea/textarea.html |  1 -
 src/components/textarea/textarea.ts   | 13 +++++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/textarea/textarea.html b/src/components/textarea/textarea.html
index cae07f6ea..f47f5c902 100644
--- a/src/components/textarea/textarea.html
+++ b/src/components/textarea/textarea.html
@@ -23,7 +23,6 @@
                   @focus="onFocus"
                   @blur="onBlur"
                   @change="onChange"
-                  @input="onInput"
                   ref="input"
                   v-model="model"
                   :style="{ maxWidth: maxWidth }"></textarea>
diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts
index 281f13249..30efbd91b 100644
--- a/src/components/textarea/textarea.ts
+++ b/src/components/textarea/textarea.ts
@@ -1,7 +1,7 @@
 import { ModulVue } from '../../utils/vue/vue';
 import { PluginObject } from 'vue';
 import Component from 'vue-class-component';
-import { Prop } from 'vue-property-decorator';
+import { Prop, Watch } from 'vue-property-decorator';
 import WithRender from './textarea.html?style=./textarea.scss';
 import { TEXTAREA_NAME } from '../component-names';
 import { InputState } from '../../mixins/input-state/input-state';
@@ -28,6 +28,15 @@ export class MTextarea extends ModulVue {
     private internalTextareaError: boolean = false;
     private textareaHeight: string;
 
+    protected mounted(): void {
+        this.adjustHeight();
+    }
+
+    @Watch('value')
+    private valueChanged() {
+        this.adjustHeight();
+    }
+
     private get valueLenght(): number {
         let lenght: number = this.as<InputManagement>().internalValue.length;
         if (lenght > this.maxlength) {
@@ -50,7 +59,7 @@ export class MTextarea extends ModulVue {
         return !this.textareaError && this.as<InputState>().isValid;
     }
 
-    private onInput(event): void {
+    private adjustHeight(): void {
         let el: HTMLElement = (this.$refs.input as HTMLElement);
         setTimeout(() => {
             el.style.height = 'auto';

From e4f4be0308447ae53260d38d923c40918b63fa0f Mon Sep 17 00:00:00 2001
From: Philippe Rail <philipperail@gmail.com>
Date: Fri, 9 Feb 2018 10:55:34 -0500
Subject: [PATCH 05/17] Updates line-height and headings styles.

---
 src/styles/abstracts/_var-font.scss | 2 +-
 src/styles/base/_typography.scss    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/styles/abstracts/_var-font.scss b/src/styles/abstracts/_var-font.scss
index 8ac296461..dac07e079 100644
--- a/src/styles/abstracts/_var-font.scss
+++ b/src/styles/abstracts/_var-font.scss
@@ -34,4 +34,4 @@ $m-font-weight--light: 200 !default;
 // ======================================================================
 //  Line height
 // ======================================================================
-$m-line-height: 1.4 !default;
+$m-line-height: 1.3 !default;
diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss
index 4d30319fd..af6fb9845 100644
--- a/src/styles/base/_typography.scss
+++ b/src/styles/base/_typography.scss
@@ -15,7 +15,7 @@ h6,
 .m-u--h5,
 .m-u--h6 {
     font-family: $m-font-family;
-    font-weight: $m-font-weight--black;
+    font-weight: $m-font-weight--bold;
     line-height: 1.1;
 }
 

From a3bdca3517015426374b1c6c3e36a53a095cd2bf Mon Sep 17 00:00:00 2001
From: Jean-Philippe Guilmette <jean-philippe.guilmette@dti.ulaval.ca>
Date: Fri, 9 Feb 2018 15:00:11 -0500
Subject: [PATCH 06/17] Add padding prop to dropdown to remove it

---
 src/components/dropdown/dropdown.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/dropdown/dropdown.html b/src/components/dropdown/dropdown.html
index 2796ed35d..0b01c895e 100644
--- a/src/components/dropdown/dropdown.html
+++ b/src/components/dropdown/dropdown.html
@@ -55,6 +55,7 @@
              :leave="transitionLeave"
              :padding-header="false"
              :padding-body="false"
+             :padding="false"
              :focus-management="isMqMaxS"
              :close-on-backdrop="true">
         <template slot="header" v-if="isMqMaxS && (hasLabel || filterable)">

From 9c7040bad9837b962e5fa520f4b137deded7fd6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Par=C3=A9?= <raph.pare@outlook.com>
Date: Fri, 9 Feb 2018 17:47:08 -0500
Subject: [PATCH 07/17] /input-width: limit-text

---
 src/assets/icons/.DS_Store              | Bin 0 -> 6148 bytes
 src/components/limit-text/limit-text.ts |   8 ++++----
 src/components/menu/menu.ts             |   2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/icons/.DS_Store

diff --git a/src/assets/icons/.DS_Store b/src/assets/icons/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..557ef6883b4976c27dad070fd1cc080fce5641d9
GIT binary patch
literal 6148
zcmeH~J!%6%427R!7lt%jrkutH$PET#pTHMLVQ>>{aER+UdY*ooY+RcqJc0B^niaeI
z6+0^cw);N40~3G^-4$C8Gc)EZeBqAs{dl{4UN2`>yb8QT%#4)@v;EqZh=2%)fCz|y
z2rP&|p5oZNF6f!`C?X&N%OK$2hemhpr6V;y9Sku7P}eMnaUHV+wRwTsOGhdzG^^>s
zs?}l)@p`mVTV2;nM{2giYWT3av-uQ5vuuYoCN%3I3L+o^GXks3CqMrW^hfjmtVO8^
zh`>K1VC(&HzvD~Q+4|@8y#7&DUk^GpE@$}l6Trle;x~F2_nR-My>z6qLeq~xU{DZ&
HrxN%91)33=

literal 0
HcmV?d00001

diff --git a/src/components/limit-text/limit-text.ts b/src/components/limit-text/limit-text.ts
index 3951e7f38..6fd7330f8 100644
--- a/src/components/limit-text/limit-text.ts
+++ b/src/components/limit-text/limit-text.ts
@@ -30,23 +30,23 @@ export class MLimitText extends ModulVue {
     private maxHeight: number = 0;
     private overflow: boolean = false;
 
-    protected mounted() {
+    protected mounted(): void {
         Vue.nextTick(() => {
             this.computeHeight();
         });
     }
 
-    protected updated() {
+    protected updated(): void {
         this.computeHeight();
     }
 
-    private computeHeight() {
+    private computeHeight(): void {
         this.contentHeight = (this.$refs.container as HTMLElement).scrollHeight;
         this.maxHeight = (this.$refs.test as HTMLElement).clientHeight * this.lines;
         this.overflow = this.contentHeight > this.maxHeight;
     }
 
-    private get maxHeightStyle() {
+    private get maxHeightStyle(): string | undefined {
         if (this.overflow) {
             return this.propOpen ? this.contentHeight + 'px' : this.maxHeight + 'px';
         }
diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts
index 1dd61e686..d7c1048bd 100644
--- a/src/components/menu/menu.ts
+++ b/src/components/menu/menu.ts
@@ -20,7 +20,7 @@ export enum MOptionsMenuSkin {
 export class MMenu extends BaseMenu implements MMenuInterface {
 
     @Prop({
-        default: MPopperPlacement.BottomStart,
+        default: MPopperPlacement.Bottom,
         validator: value =>
             value == MPopperPlacement.Bottom ||
             value == MPopperPlacement.BottomEnd ||

From 42c7eca693a43aaec902ae25ef58ce24e013fab3 Mon Sep 17 00:00:00 2001
From: Philippe Rail <philipperail@gmail.com>
Date: Mon, 12 Feb 2018 14:12:52 -0500
Subject: [PATCH 08/17] Add full-height prop to list-item component

---
 src/components/list-item/list-item.html | 3 ++-
 src/components/list-item/list-item.scss | 7 ++++++-
 src/components/list-item/list-item.ts   | 4 +++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/list-item/list-item.html b/src/components/list-item/list-item.html
index 7e9798ad6..adf079261 100644
--- a/src/components/list-item/list-item.html
+++ b/src/components/list-item/list-item.html
@@ -6,7 +6,8 @@
               'm--has-border-top': borderTop,
               'm--has-border-bottom': borderBottom,
               'm--has-menu': $slots['menu'],
-              'm--is-full-width': fullWidth }">
+              'm--is-full-width': fullWidth,
+              'm--is-full-height': fullHeight }">
     <div class="m-list-item__content">
         <slot></slot>
     </div>
diff --git a/src/components/list-item/list-item.scss b/src/components/list-item/list-item.scss
index 181b5a469..ede49d2d4 100644
--- a/src/components/list-item/list-item.scss
+++ b/src/components/list-item/list-item.scss
@@ -7,7 +7,7 @@
     padding-right: 0;
     padding-left: 0;
 
-    @media (min-width: $m-mq--min--s) {
+    @media (min-width: $m-mq--min--s + 1) {
         padding-right: $m-spacing;
         padding-left: $m-spacing;
     }
@@ -46,6 +46,11 @@
         padding-right: 0;
     }
 
+    &.m--is-full-height {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
     &.m--has-icon,
     &.m--has-menu,
     &.m--is-waiting {
diff --git a/src/components/list-item/list-item.ts b/src/components/list-item/list-item.ts
index a609c5da9..2a1583787 100644
--- a/src/components/list-item/list-item.ts
+++ b/src/components/list-item/list-item.ts
@@ -19,9 +19,11 @@ export class MListItem extends Vue {
     public disabled: boolean;
     @Prop()
     public waiting: boolean;
-    @Prop()
+    @Prop({ default: false })
     public fullWidth: boolean;
     @Prop({ default: false })
+    public fullHeight: boolean;
+    @Prop({ default: false })
     public borderTop: boolean;
     @Prop({ default: false })
     public borderBottom: boolean;

From 0c7cee9c52df06a60c5e1df8f67266dbe73c8d7d Mon Sep 17 00:00:00 2001
From: Philippe Rail <philipperail@gmail.com>
Date: Mon, 12 Feb 2018 16:41:27 -0500
Subject: [PATCH 09/17] Has been added to link component : 'text' value to mode
 attribute, skin attribute with 'light' value

Also, sass variables in link.scss was changed to css custom properties
---
 src/components/link/link.html        |  3 +++
 src/components/link/link.scss        | 33 +++++++++++++++++++---------
 src/components/link/link.ts          | 19 ++++++++++++++++
 src/styles/abstracts/_var-color.scss |  9 ++++++++
 4 files changed, 54 insertions(+), 10 deletions(-)

diff --git a/src/components/link/link.html b/src/components/link/link.html
index bc2fa7119..46ddf4587 100644
--- a/src/components/link/link.html
+++ b/src/components/link/link.html
@@ -3,6 +3,7 @@
                  :class="{ 'm--is-unvisited': isUnvisited,
                            'm--is-disabled': disabled,
                            'm--no-underline': !underline,
+                           'm--is-skin-light': isSkinLight,
                            'm--has-right-icon' : isIconPositionRight,
                            'm--has-left-icon' : !isIconPositionRight }"
                  :to="routerLinkUrl"
@@ -19,6 +20,8 @@
                  'm--is-disabled': disabled,
                  'm--no-underline': !underline,
                  'm--is-button': isButton,
+                 'm--is-text-link': isTextLink,
+                 'm--is-skin-light': isSkinLight,
                  'm--has-right-icon' : isIconPositionRight,
                  'm--has-left-icon' : !isIconPositionRight }"
        :href="propUrl"
diff --git a/src/components/link/link.scss b/src/components/link/link.scss
index 79d9b3a70..93ec0ff59 100644
--- a/src/components/link/link.scss
+++ b/src/components/link/link.scss
@@ -23,51 +23,51 @@
         }
     }
 
-    &:not(.m--is-disabled) {
+    &:not(.m--is-disabled):not(.m--is-text-link) {
         &:not(.m--no-underline) {
             .m-link__text {
                 transition: box-shadow $m-transition-duration--s ease;
-                box-shadow: 0 0 rgba($m-color--interactive, 0);
+                box-shadow: 0 0 rgba($m-color--interactive, 0); // rgba doesn't seem to work with css variables in hex value... but in this case it doesn't matter though.
             }
 
             &:not(.m--is-unvisited):visited {
-                color: $m-color--interactive-darker;
+                color: var(--m-color--interactive-darker);
             }
 
             &:hover,
             &:focus {
                 .m-link__text {
-                    box-shadow: 0 1px $m-color--interactive-light;
+                    box-shadow: 0 1px var(--m-color--interactive-light);
                 }
             }
 
             &:active {
                 .m-link__text {
-                    box-shadow: 0 1px $m-color--interactive-dark;
+                    box-shadow: 0 1px var(--m-color--interactive-dark);
                 }
             }
         }
 
         &:not(.m--is-unvisited):visited {
-            color: $m-color--interactive-darker;
+            color: var(--m-color--interactive-darker);
 
             &:hover,
             &:focus {
-                color: $m-color--interactive-light;
+                color: var(--m-color--interactive-light);
             }
 
             &:active {
-                color: $m-color--interactive-dark;
+                color: var(--m-color--interactive-dark);
             }
         }
 
         &:hover,
         &:focus {
-            color: $m-color--interactive-light;
+            color: var(--m-color--interactive-light);
         }
 
         &:active {
-            color: $m-color--interactive-dark;
+            color: var(--m-color--interactive-dark);
         }
     }
 
@@ -76,6 +76,19 @@
         cursor: default;
     }
 
+    &.m--is-text-link {
+        color: $m-color--text;
+    }
+
+    &.m--is-skin-light {
+        --m-color--interactive-darker: $m-color--white;
+        --m-color--interactive-dark: $m-color--white;
+        --m-color--interactive: $m-color--white;
+        --m-color--interactive-light: $m-color--white;
+        --m-color--interactive-lighter: $m-color--white;
+        --m-color--interactive-lightest: $m-color--white;
+    }
+
     &:focus {
         outline: none;
     }
diff --git a/src/components/link/link.ts b/src/components/link/link.ts
index 0ce64590e..6a9253d4d 100644
--- a/src/components/link/link.ts
+++ b/src/components/link/link.ts
@@ -10,6 +10,7 @@ import I18nPlugin from '../i18n/i18n';
 export enum MLinkMode {
     RouterLink = 'router-link',
     Link = 'link',
+    Text = 'text',
     Button = 'button'
 }
 
@@ -18,6 +19,10 @@ export enum MLinkIconPosition {
     Right = 'right'
 }
 
+export enum MLinkSkin {
+    light = 'light'
+}
+
 const ICON_NAME_DEFAULT: string = 'chevron';
 
 @WithRender
@@ -31,6 +36,7 @@ export class MLink extends ModulVue {
         validator: value =>
             value == MLinkMode.RouterLink ||
             value == MLinkMode.Link ||
+            value == MLinkMode.Text ||
             value == MLinkMode.Button
     })
     public mode: MLinkMode;
@@ -43,6 +49,11 @@ export class MLink extends ModulVue {
 
     @Prop({ default: true })
     public underline: boolean;
+    @Prop({
+        validator: value =>
+            value == MLinkSkin.light
+    })
+    public skin: MLinkSkin;
 
     @Prop()
     public target: string;
@@ -82,6 +93,14 @@ export class MLink extends ModulVue {
         return this.mode == MLinkMode.Button;
     }
 
+    private get isTextLink(): boolean {
+        return this.mode == MLinkMode.Text;
+    }
+
+    private get isSkinLight(): boolean {
+        return this.skin == MLinkSkin.light;
+    }
+
     private get isUnvisited(): boolean {
         return this.isButton ? true : this.unvisited;
     }
diff --git a/src/styles/abstracts/_var-color.scss b/src/styles/abstracts/_var-color.scss
index 74ef310a5..ca92dbd8e 100644
--- a/src/styles/abstracts/_var-color.scss
+++ b/src/styles/abstracts/_var-color.scss
@@ -58,6 +58,15 @@ $m-color--error-lightest: #ffdcdc !default;
 // ======================================================================
 //  Interactive colors
 // ======================================================================
+:root {
+    --m-color--interactive-darker: #0075c3;
+    --m-color--interactive-dark: #0587e1;
+    --m-color--interactive: $m-color--ul-blue;
+    --m-color--interactive-light: #36adff;
+    --m-color--interactive-lighter: #6ed2ff;
+    --m-color--interactive-lightest: #dffaff;
+}
+
 $m-color--interactive-darker: #0075c3 !default;
 $m-color--interactive-dark: #0587e1 !default;
 $m-color--interactive: $m-color--ul-blue !default;

From 43f32ba04f51029d55325be20116180e7a80901e Mon Sep 17 00:00:00 2001
From: Philippe Rail <philipperail@gmail.com>
Date: Tue, 13 Feb 2018 10:13:40 -0500
Subject: [PATCH 10/17] Quick fix, change edit-window grey variable

---
 src/components/edit-window/edit-window.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/edit-window/edit-window.scss b/src/components/edit-window/edit-window.scss
index fdf492c2d..0999648eb 100644
--- a/src/components/edit-window/edit-window.scss
+++ b/src/components/edit-window/edit-window.scss
@@ -87,7 +87,7 @@
         justify-content: space-between;
         width: 100%;
         color: $m-color--white;
-        background: $m-color--black-grey;
+        background: $m-color--grey-darker;
 
         h1,
         h2,

From ddb4d4d8b7a1fb227fda786642a4d0e035e92ce6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Par=C3=A9?= <raph.pare@outlook.com>
Date: Wed, 14 Feb 2018 08:46:30 -0500
Subject: [PATCH 11/17] Feature/textarea (#55)

Text area and updates to input width
---
 src/components/textarea/textarea.html | 1 -
 src/components/textarea/textarea.ts   | 6 ++----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/textarea/textarea.html b/src/components/textarea/textarea.html
index f47f5c902..6ea1b499e 100644
--- a/src/components/textarea/textarea.html
+++ b/src/components/textarea/textarea.html
@@ -40,5 +40,4 @@
             {{ valueLenght }}<strong>/{{ maxlength }}</strong>
         </div>
     </div>
-
 </div>
diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts
index 30efbd91b..37485e8ab 100644
--- a/src/components/textarea/textarea.ts
+++ b/src/components/textarea/textarea.ts
@@ -61,10 +61,8 @@ export class MTextarea extends ModulVue {
 
     private adjustHeight(): void {
         let el: HTMLElement = (this.$refs.input as HTMLElement);
-        setTimeout(() => {
-            el.style.height = 'auto';
-            el.style.height = el.scrollHeight + 'px';
-        });
+        el.style.height = 'auto';
+        el.style.height = el.scrollHeight + 'px';
     }
 }
 

From 971951d0e4f702480519c360e17c36b7b70c59b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Par=C3=A9?= <raph.pare@outlook.com>
Date: Wed, 14 Feb 2018 08:53:29 -0500
Subject: [PATCH 12/17] Feature/input width (#56)

Input-width
---
 src/components/dropdown/dropdown.html         |  2 +-
 src/components/textarea/textarea.html         |  2 +-
 src/components/textfield/textfield.html       |  2 +-
 src/components/textfield/textfield.ts         |  2 --
 .../input-management/input-management.ts      |  2 ++
 src/mixins/input-width/input-width.ts         | 28 +++++++++----------
 6 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/dropdown/dropdown.html b/src/components/dropdown/dropdown.html
index ed3402843..d81c89fab 100644
--- a/src/components/dropdown/dropdown.html
+++ b/src/components/dropdown/dropdown.html
@@ -1,6 +1,6 @@
 <div class="m-dropdown"
      :class="{ 'm--is-open': open, 'm--is-disabled': disabled, 'm--is-waiting': waiting, 'm--is-filterable': filterable }"
-     :style="{ width: width, maxWidth: inputMaxWidth }"
+     :style="{ width: inputWidth, maxWidth: inputMaxWidth }"
      ref="mDropdown">
     <m-input-style ref="mInputStyle"
                    :label="label"
diff --git a/src/components/textarea/textarea.html b/src/components/textarea/textarea.html
index 6ea1b499e..c43c8e680 100644
--- a/src/components/textarea/textarea.html
+++ b/src/components/textarea/textarea.html
@@ -6,7 +6,7 @@
                   'm--has-icon' : hasIcon,
                   'm--has-label': hasLabel }"
      @click="onClick"
-     :style="{ width: width, maxWidth: inputMaxWidth }">
+     :style="{ width: inputWidth, maxWidth: inputMaxWidth }">
     <m-input-style :disabled="isDisabled"
                    :waiting="isWaiting"
                    :error="textareaError"
diff --git a/src/components/textfield/textfield.html b/src/components/textfield/textfield.html
index c883a127a..34993d1a5 100644
--- a/src/components/textfield/textfield.html
+++ b/src/components/textfield/textfield.html
@@ -7,7 +7,7 @@
                 'm--has-label': hasLabel },
                 'm--is-type-' + inputType ]"
      @click="onClick"
-     :style="{ width: width, maxWidth: inputMaxWidth }">
+     :style="{ width: inputWidth, maxWidth: inputMaxWidth }">
     <m-input-style :disabled="isDisabled"
                    :waiting="isWaiting"
                    :error="hasError"
diff --git a/src/components/textfield/textfield.ts b/src/components/textfield/textfield.ts
index 17682cb2d..21d560b13 100644
--- a/src/components/textfield/textfield.ts
+++ b/src/components/textfield/textfield.ts
@@ -46,8 +46,6 @@ export class MTextfield extends ModulVue {
     public type: MTextfieldType;
     @Prop({ default: true })
     public passwordIcon: boolean;
-    @Prop()
-    public asterisk: boolean;
 
     private passwordAsText: boolean = false;
 
diff --git a/src/mixins/input-management/input-management.ts b/src/mixins/input-management/input-management.ts
index a1a4c8002..8b6ec46db 100644
--- a/src/mixins/input-management/input-management.ts
+++ b/src/mixins/input-management/input-management.ts
@@ -18,6 +18,8 @@ export class InputManagement extends ModulVue {
     public placeholder: string;
     @Prop()
     public readonly: boolean;
+    @Prop()
+    public asterisk: boolean;
 
     public internalValue: string = '';
     private internalIsFocus: boolean = false;
diff --git a/src/mixins/input-width/input-width.ts b/src/mixins/input-width/input-width.ts
index 584e81ec7..21a48befb 100644
--- a/src/mixins/input-width/input-width.ts
+++ b/src/mixins/input-width/input-width.ts
@@ -2,7 +2,6 @@ import { ModulVue } from '../../utils/vue/vue';
 import { PluginObject } from 'vue';
 import Component from 'vue-class-component';
 import { Prop } from 'vue-property-decorator';
-import { MediaQueries, MediaQueriesMixin } from '../../mixins/media-queries/media-queries';
 import { KeyCode } from '../../utils/keycode/keycode';
 
 export enum InputMaxWidth {
@@ -14,9 +13,7 @@ export enum InputMaxWidth {
     Large = 'large'
 }
 
-@Component({
-    mixins: [MediaQueries]
-})
+@Component
 export class InputWidth extends ModulVue {
     @Prop({ default: '100%' })
     public width: string;
@@ -24,31 +21,34 @@ export class InputWidth extends ModulVue {
     @Prop({ default: InputMaxWidth.Regular })
     public maxWidth: string;
 
-    public internalMaxWidth: string | undefined;
-
     private get inputMaxWidth(): string | undefined {
+        let maxWidth: string | undefined;
         switch (this.maxWidth) {
             case InputMaxWidth.None:
-                this.internalMaxWidth = undefined;
+                maxWidth = undefined;
                 break;
             case InputMaxWidth.XSmall:
-                this.internalMaxWidth = '72px';
+                maxWidth = '72px';
                 break;
             case InputMaxWidth.Small:
-                this.internalMaxWidth = '144px';
+                maxWidth = '144px';
                 break;
             case InputMaxWidth.Regular:
-                this.internalMaxWidth = '288px';
+                maxWidth = '288px';
                 break;
             case InputMaxWidth.Medium:
-                this.internalMaxWidth = '608px';
+                maxWidth = '608px';
                 break;
             case InputMaxWidth.Large:
-                this.internalMaxWidth = '800px';
+                maxWidth = '800px';
                 break;
             default:
-                this.internalMaxWidth = this.maxWidth;
+                maxWidth = this.maxWidth;
         }
-        return this.internalMaxWidth;
+        return maxWidth;
+    }
+
+    private get inputWidth(): string | undefined {
+        return this.width == 'none' ? undefined : this.width;
     }
 }

From 6a648d37b3deb44ac866880cf562708f4432c0e5 Mon Sep 17 00:00:00 2001
From: Philippe Rail <Atiomi@users.noreply.github.com>
Date: Wed, 14 Feb 2018 10:09:30 -0500
Subject: [PATCH 13/17] Quick fix, the link must be white. (#65)

---
 src/components/link/link.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/link/link.scss b/src/components/link/link.scss
index 93ec0ff59..a8dede4fe 100644
--- a/src/components/link/link.scss
+++ b/src/components/link/link.scss
@@ -87,6 +87,8 @@
         --m-color--interactive-light: $m-color--white;
         --m-color--interactive-lighter: $m-color--white;
         --m-color--interactive-lightest: $m-color--white;
+
+        color: $m-color--white;
     }
 
     &:focus {

From fb5320d3859eb8b5bd9bf5c11665ae754e94ae7b Mon Sep 17 00:00:00 2001
From: Philippe Rail <Atiomi@users.noreply.github.com>
Date: Wed, 14 Feb 2018 13:08:49 -0500
Subject: [PATCH 14/17] Vertical align the label and his icon (#68)

---
 src/components/radio-group/radio-group.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/radio-group/radio-group.scss b/src/components/radio-group/radio-group.scss
index ce1e7496b..935994f38 100644
--- a/src/components/radio-group/radio-group.scss
+++ b/src/components/radio-group/radio-group.scss
@@ -6,6 +6,8 @@
         margin-bottom: $m-margin--s;
         font-size: $m-font-size;
         font-weight: $m-font-weight--bold;
+        display: flex;
+        align-items: center;
     }
 
     &__body {

From ba8a4c78667ed8dd87b199a69bd2d968949fe97f Mon Sep 17 00:00:00 2001
From: Philippe Rail <Atiomi@users.noreply.github.com>
Date: Wed, 14 Feb 2018 15:48:41 -0500
Subject: [PATCH 15/17] Quick fix, clean up useless code (#69)

---
 src/components/textarea/textarea.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/textarea/textarea.ts b/src/components/textarea/textarea.ts
index 37485e8ab..48c7a1534 100644
--- a/src/components/textarea/textarea.ts
+++ b/src/components/textarea/textarea.ts
@@ -23,8 +23,6 @@ export class MTextarea extends ModulVue {
     @Prop()
     public maxlength: number;
 
-    public maxWidth: string = InputMaxWidth.Medium;
-
     private internalTextareaError: boolean = false;
     private textareaHeight: string;
 

From 135a7837c8a3af75e47d59b351d1e5478497f2eb Mon Sep 17 00:00:00 2001
From: Philippe Rail <Atiomi@users.noreply.github.com>
Date: Wed, 14 Feb 2018 15:49:30 -0500
Subject: [PATCH 16/17] Feature/seven shades of grey (#70)

* Continue sass variable migration to css custom properties and more

Change header grey value to better reflect the pre merge grey shades

* Separate sass color variables and css custom color properties

Separate sass color variables and css custom color properties to fix performance issues

* Quick fix, typo in file name

* Revert colors back to hex value
---
 src/components/dialog/dialog.scss            |  2 +-
 src/components/edit-window/edit-window.scss  |  2 +-
 src/styles/abstracts/_cp-color.scss          | 93 ++++++++++++++++++++
 src/styles/abstracts/_cp-layout.scss         |  7 ++
 src/styles/abstracts/_custom-properties.scss |  3 +
 src/styles/abstracts/_var-color.scss         | 11 +--
 src/styles/abstracts/_var-layout.scss        |  4 -
 src/styles/main.scss                         |  1 +
 8 files changed, 107 insertions(+), 16 deletions(-)
 create mode 100644 src/styles/abstracts/_cp-color.scss
 create mode 100644 src/styles/abstracts/_cp-layout.scss
 create mode 100644 src/styles/abstracts/_custom-properties.scss

diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss
index 29ea24bfe..18a048b91 100644
--- a/src/components/dialog/dialog.scss
+++ b/src/components/dialog/dialog.scss
@@ -146,7 +146,7 @@ $m-dialog--max-width--s: 420px !default;
 
     &__header {
         position: relative;
-        background: $m-color--grey-darker;
+        background-color: var(--m-color--header-dark);
         color: $m-color--white;
         display: flex;
         align-items: center;
diff --git a/src/components/edit-window/edit-window.scss b/src/components/edit-window/edit-window.scss
index 0999648eb..7cab7027b 100644
--- a/src/components/edit-window/edit-window.scss
+++ b/src/components/edit-window/edit-window.scss
@@ -87,7 +87,7 @@
         justify-content: space-between;
         width: 100%;
         color: $m-color--white;
-        background: $m-color--grey-darker;
+        background-color: var(--m-color--header-dark);
 
         h1,
         h2,
diff --git a/src/styles/abstracts/_cp-color.scss b/src/styles/abstracts/_cp-color.scss
new file mode 100644
index 000000000..433a55ac1
--- /dev/null
+++ b/src/styles/abstracts/_cp-color.scss
@@ -0,0 +1,93 @@
+// ======================================================================
+//  css customs properties
+// ======================================================================
+:root {
+
+    // ======================================================================
+    //  Official color of Université Laval
+    // ======================================================================
+    --m-color--ul-blue: #09f;
+    --m-color--ul-yellow: #ffc103;
+    --m-color--ul-red: #e00413;
+
+    // ======================================================================
+    //  Seven Shades of Grey to rules them all!
+    // ======================================================================
+    --m-color--grey-darkest: #1f1f1f;
+    --m-color--grey-darker: #3d3d3d;
+    --m-color--grey-dark: #696969;
+    --m-color--grey: #929292;
+    --m-color--grey-light: #d7d7d7;
+    --m-color--grey-lighter: #f4f4f4;
+    --m-color--grey-lightest: #f9f9f9;
+
+    // ======================================================================
+    //  General color
+    // ======================================================================
+    --m-color--black: #000;
+    --m-color--text: var(--m-color--grey-darker);
+    --m-color--white: #fff;
+
+    // ======================================================================
+    //  Success colors
+    // ======================================================================
+    --m-color--success-dark: #009962;
+    --m-color--success: #00c77f;
+    --m-color--success-light: #cdf3e3;
+    --m-color--success-lightest: #eaf9f1;
+
+    // ======================================================================
+    //  Warning colors
+    // ======================================================================
+    --m-color--warning: var(--m-color--ul-yellow);
+    --m-color--warning-lightest: #fff8e6;
+
+    // ======================================================================
+    //  Error colors
+    // ======================================================================
+    --m-color--error-dark: #b3040f;
+    --m-color--error: var(--m-color--ul-red);
+    --m-color--error-lightest: #fcf2f3;
+
+    // ======================================================================
+    //  Interactive colors
+    // ======================================================================
+    --m-color--interactive-darker: #0075c3;
+    --m-color--interactive-dark: #0587e1;
+    --m-color--interactive: var(--m-color--ul-blue);
+    --m-color--interactive-light: #36adff;
+    --m-color--interactive-lighter: #6ed2ff;
+    --m-color--interactive-lightest: #dffaff;
+
+    // ======================================================================
+    //  Accent colors
+    // ======================================================================
+    --m-color--accent-dark: #ed8514;
+    --m-color--accent: #f39612;
+    --m-color--accent-light: #ffaa26;
+    --m-color--accent-lightest: #ffeecf;
+
+    // ======================================================================
+    //  Active colors
+    // ======================================================================
+    --m-color--active: var(--m-color--ul-yellow);
+
+    // ======================================================================
+    //  disabled colors
+    // ======================================================================
+    --m-color--disabled: var(--m-color--grey-lighter);
+    --m-color--disabled-light: var(--m-color--grey-lighter);
+
+    // ======================================================================
+    //  Scrollbar colors
+    // ======================================================================
+    --m-color--scrollbar: var(--m-color--grey);
+    --m-color--scrollbar-light: var(--m-color--grey-lighter);
+
+    // ======================================================================
+    //  UI colors
+    // ======================================================================
+    --m-color--border-dark: var(--m-color--grey-dark);
+    --m-color--border: var(--m-color--grey-light);
+    --m-color--header-dark: var(--m-color--grey-darkest);
+}
diff --git a/src/styles/abstracts/_cp-layout.scss b/src/styles/abstracts/_cp-layout.scss
new file mode 100644
index 000000000..a7dcbc89e
--- /dev/null
+++ b/src/styles/abstracts/_cp-layout.scss
@@ -0,0 +1,7 @@
+// ======================================================================
+//  css customs layout properties
+// ======================================================================
+:root {
+    --m-min-height-header: 88px;
+}
+
diff --git a/src/styles/abstracts/_custom-properties.scss b/src/styles/abstracts/_custom-properties.scss
new file mode 100644
index 000000000..f7734d941
--- /dev/null
+++ b/src/styles/abstracts/_custom-properties.scss
@@ -0,0 +1,3 @@
+@import
+    'cp-color',
+    'cp-layout'
diff --git a/src/styles/abstracts/_var-color.scss b/src/styles/abstracts/_var-color.scss
index 611f8078d..2415433f1 100644
--- a/src/styles/abstracts/_var-color.scss
+++ b/src/styles/abstracts/_var-color.scss
@@ -47,15 +47,6 @@ $m-color--error-lightest: #fcf2f3 !default;
 // ======================================================================
 //  Interactive colors
 // ======================================================================
-:root {
-    --m-color--interactive-darker: #0075c3;
-    --m-color--interactive-dark: #0587e1;
-    --m-color--interactive: $m-color--ul-blue;
-    --m-color--interactive-light: #36adff;
-    --m-color--interactive-lighter: #6ed2ff;
-    --m-color--interactive-lightest: #dffaff;
-}
-
 $m-color--interactive-darker: #0075c3 !default;
 $m-color--interactive-dark: #0587e1 !default;
 $m-color--interactive: $m-color--ul-blue !default;
@@ -80,7 +71,7 @@ $m-color--active: $m-color--ul-yellow !default;
 // ======================================================================
 //  disabled colors
 // ======================================================================
-$m-color--disabled: $m-color--grey-light !default;
+$m-color--disabled: $m-color--grey-lighter !default;
 $m-color--disabled-light: $m-color--grey-lighter !default;
 
 // ======================================================================
diff --git a/src/styles/abstracts/_var-layout.scss b/src/styles/abstracts/_var-layout.scss
index 596125704..83cfaebb1 100644
--- a/src/styles/abstracts/_var-layout.scss
+++ b/src/styles/abstracts/_var-layout.scss
@@ -43,7 +43,3 @@ $m-spacing--m: 24px !default;
 $m-spacing: 16px !default;
 $m-spacing--s: 8px !default;
 $m-spacing--xs: 4px !default;
-
-:root {
-    --m-min-height-header: 88px;
-}
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 79e3a0724..5c0763aa2 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -5,6 +5,7 @@
 // ======================================================================
 @import
     'abstracts/variables',
+    'abstracts/custom-properties',
     'abstracts/var-color-calendar';
 
 // ======================================================================

From a2fe09af7b06065cb9a6cb2828f01fc6c075e0e9 Mon Sep 17 00:00:00 2001
From: Martin Simard <martin.simard@dti.ulaval.ca>
Date: Wed, 14 Feb 2018 16:09:26 -0500
Subject: [PATCH 17/17] release 1.0.0-beta.18

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 44c2dab1e..e9f42673a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@ulaval/modul-components",
-  "version": "1.0.0-beta.17",
+  "version": "1.0.0-beta.18",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index de4aba574..c593a4f43 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ulaval/modul-components",
-  "version": "1.0.0-beta.17",
+  "version": "1.0.0-beta.18",
   "description": "Component library",
   "author": "Martin Simard <martin.simard@dti.ulaval.ca>",
   "private": false,