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