diff --git a/styleguide/.eslintrc.js b/styleguide/.eslintrc.js
index 769f54cff..ab800e647 100644
--- a/styleguide/.eslintrc.js
+++ b/styleguide/.eslintrc.js
@@ -1,18 +1,14 @@
module.exports = {
root: true,
env: {
- browser: true,
node: true
},
- parserOptions: {
- parser: 'babel-eslint'
- },
- extends: ['plugin:vue/recommended', 'plugin:prettier/recommended'],
- // required to lint *.vue files
- plugins: ['vue', 'prettier'],
- // add your custom rules here
+ extends: ['plugin:vue/strongly-recommended', '@vue/prettier'],
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+ },
+ parserOptions: {
+ parser: 'babel-eslint'
}
}
diff --git a/styleguide/src/system/components/data-input/shared/input.scss b/styleguide/src/system/components/data-input/shared/input.scss
index b0f30f5db..adbfa7489 100755
--- a/styleguide/src/system/components/data-input/shared/input.scss
+++ b/styleguide/src/system/components/data-input/shared/input.scss
@@ -2,7 +2,7 @@
.#{$class}-wrap {
position: relative;
}
-
+
.#{$class} {
appearance: none;
box-sizing: border-box;
@@ -12,57 +12,51 @@
width: 100%;
padding: $input-padding-vertical $space-x-small;
height: $input-height;
-
+
color: $text-color-base;
background: $background-color-base;
-
border: $input-border-size solid $border-color-base;
border-radius: $border-radius-base;
outline: none;
transition: all $duration-short $ease-out;
-
+
&::placeholder {
color: $text-color-disabled;
}
-
.ds-input-has-focus &,
&:focus {
border-color: $border-color-active;
background: $background-color-base;
}
-
.ds-input-is-disabled &,
&:disabled {
color: $text-color-disabled;
opacity: $opacity-disabled;
cursor: not-allowed;
}
-
.ds-input-has-error & {
border-color: $border-color-danger;
}
}
-
.ds-input-size-small {
font-size: $font-size-small;
-
+
.#{$class} {
font-size: $input-font-size-small;
height: $input-height-small;
padding: $input-padding-vertical-small $space-x-small;
}
}
-
.ds-input-size-large {
font-size: $font-size-large;
-
+
.#{$class} {
font-size: $input-font-size-large;
height: $input-height-large;
padding: $input-padding-vertical-large $space-x-small;
}
}
-
+
.#{$class}-icon,
.#{$class}-icon-right {
position: absolute;
@@ -76,7 +70,7 @@
color: $text-color-softer;
transition: color $duration-short $ease-out;
pointer-events: none;
-
+
.ds-input-has-focus & {
color: $text-color-base;
}
@@ -89,15 +83,28 @@
width: $input-height-large;
}
}
-
+
+ .ds-input-size-small & {
+ width: $input-height-small;
+ }
+
+ .ds-input-size-large & {
+ width: $input-height-large;
+ }
+ }
+
.#{$class}-icon-right {
right: 0;
left: auto;
}
-
+
.#{$class}-has-icon {
padding-left: $input-height;
-
+
+ .ds-input-size-small & {
+ padding-left: $input-height-small;
+ }
+
.ds-input-size-small & {
padding-left: $input-height-small;
}
@@ -106,7 +113,7 @@
padding-left: $input-height-large;
}
}
-
+
.#{$class}-has-icon-right {
padding-right: $input-height;
@@ -117,5 +124,9 @@
.ds-input-size-large & {
padding-right: $input-height-large;
}
- }
+
+ .ds-input-size-large & {
+ padding-right: $input-height-large;
+ }
+ }
}
diff --git a/styleguide/src/system/components/navigation/Menu/Menu.vue b/styleguide/src/system/components/navigation/Menu/Menu.vue
index 03ad2a88b..7d36fd6cc 100644
--- a/styleguide/src/system/components/navigation/Menu/Menu.vue
+++ b/styleguide/src/system/components/navigation/Menu/Menu.vue
@@ -13,9 +13,13 @@
:route="route"
:parents="[]"
:name="route.name">
-
+
+
+