diff --git a/.travis.yml b/.travis.yml index 241fb2577..049f097ca 100644 --- a/.travis.yml +++ b/.travis.yml @@ -23,7 +23,7 @@ install: - docker build --build-arg BUILD_COMMIT=$TRAVIS_COMMIT --target production -t humanconnection/nitro-web . - docker-compose -f docker-compose.yml -f docker-compose.travis.yml up -d - git clone https://github.com/Human-Connection/Nitro-Backend.git ../Nitro-Backend - - git -C "../Nitro-Backend" checkout $BACKEND_BRANCH + - git -C "../Nitro-Backend" checkout $BACKEND_BRANCH || git -C "../Nitro-Backend" checkout master - docker-compose -f ../Nitro-Backend/docker-compose.yml -f ../Nitro-Backend/docker-compose.travis.yml up -d - yarn global add cypress wait-on - yarn add cypress-cucumber-preprocessor diff --git a/assets/styles/main.scss b/assets/styles/main.scss index 03e994149..d22f3ec08 100644 --- a/assets/styles/main.scss +++ b/assets/styles/main.scss @@ -34,12 +34,6 @@ $easeOut: cubic-bezier(0.19, 1, 0.22, 1); background: #fff; } -.tags { - .ds-tag { - margin-right: $space-xx-small; - } -} - blockquote { display: block; padding: 15px 20px 15px 45px; @@ -164,6 +158,16 @@ hr { } } +.ds-card .ds-section { + padding: 0; + margin-left: -$space-base; + margin-right: -$space-base; + + .ds-container { + padding: $space-base; + } +} + [class$="menu-popover"] { min-width: 130px; diff --git a/components/Author.vue b/components/Author.vue index c4f289bc9..f1f57113b 100644 --- a/components/Author.vue +++ b/components/Author.vue @@ -111,7 +111,7 @@ /> - + diff --git a/components/FollowButton.vue b/components/FollowButton.vue index 04818dc94..3540726d2 100644 --- a/components/FollowButton.vue +++ b/components/FollowButton.vue @@ -4,7 +4,7 @@ :loading="loading" icon="plus" primary - full-width + fullwidth @click.prevent="follow" > Folgen diff --git a/components/LoadMore.vue b/components/LoadMore.vue index cb38c218b..dfe00a693 100644 --- a/components/LoadMore.vue +++ b/components/LoadMore.vue @@ -4,8 +4,8 @@ style="text-align: center" > diff --git a/components/LocaleSwitch.vue b/components/LocaleSwitch.vue index 76060bd20..a326d4616 100644 --- a/components/LocaleSwitch.vue +++ b/components/LocaleSwitch.vue @@ -25,11 +25,11 @@ slot="popover" slot-scope="{toggleMenu}" class="locale-menu-popover" - :is-exact="isExact" + :matcher="matcher" :routes="routes" > { cy.get('input[id=name]') .clear() .type(name) - cy.contains('Save') + cy.get('[type=submit]') .click() - .wait(200) + .not('[disabled]') myName = name } @@ -31,7 +31,9 @@ When('I save {string} as my location', location => { cy.get('.ds-select-option') .contains(location) .click() - cy.contains('Save').click() + cy.get('[type=submit]') + .click() + .not('[disabled]') myLocation = location }) @@ -39,7 +41,9 @@ When('I have the following self-description:', text => { cy.get('textarea[id=bio]') .clear() .type(text) - cy.contains('Save').click() + cy.get('[type=submit]') + .click() + .not('[disabled]') aboutMeText = text }) diff --git a/layouts/default.vue b/layouts/default.vue index b6f6ebe47..0a37d2abe 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -59,10 +59,10 @@
{ return { x: 0, y: 0 } } diff --git a/package.json b/package.json index f558f5adc..edf111d23 100644 --- a/package.json +++ b/package.json @@ -47,12 +47,12 @@ "date-fns": "^2.0.0-alpha.26", "express": "^4.16.3", "graphql": "^14.0.2", - "graphql-tag": "^2.10.0", + "graphql-tag": "^2.10.1", "jsonwebtoken": "^8.3.0", "nuxt": "^2.0.0", "nuxt-env": "^0.0.4", "nuxt-sass-resources-loader": "^2.0.5", - "portal-vue": "^1.5.1", + "portal-vue": "~1.5.1", "v-tooltip": "^2.0.0-rc.33", "vue-count-to": "^1.0.13", "vue-izitoast": "1.1.2", diff --git a/pages/admin.vue b/pages/admin.vue index e6d0fd66b..34d8b0567 100644 --- a/pages/admin.vue +++ b/pages/admin.vue @@ -5,7 +5,10 @@ - + @@ -70,7 +70,7 @@ - +

{{ post.commentsCount }} @@ -268,6 +267,7 @@ export default { object-position: center; } } + .ds-card-footer { padding: 0; diff --git a/pages/settings.vue b/pages/settings.vue index f97376a62..e302cba44 100644 --- a/pages/settings.vue +++ b/pages/settings.vue @@ -5,7 +5,10 @@ - + - - - {{ $t('settings.data.name') }} - - - - - - - - + + + + {{ $t('settings.data.name') }} + + + + + + + + + + + + + diff --git a/styleguide/src/system/components/data-input/Form/demo.md b/styleguide/src/system/components/data-input/Form/demo.md new file mode 100644 index 000000000..4ca238131 --- /dev/null +++ b/styleguide/src/system/components/data-input/Form/demo.md @@ -0,0 +1,130 @@ +## Basic usage + +Most commonly you want the form to handle a set of data and display appropriate input fields for each piece of data. + +```html + + +``` + +## Advanced usage / Validation + +Use a schema to provide validation for the form inputs. Use scoped slots to get access to the forms errors and functions like reset. + +```html + + +``` diff --git a/styleguide/src/system/components/data-input/Form/style.scss b/styleguide/src/system/components/data-input/Form/style.scss new file mode 100644 index 000000000..e69de29bb diff --git a/styleguide/src/system/components/data-input/FormItem/FormItem.vue b/styleguide/src/system/components/data-input/FormItem/FormItem.vue old mode 100755 new mode 100644 index 44ffc1813..c59f70c61 --- a/styleguide/src/system/components/data-input/FormItem/FormItem.vue +++ b/styleguide/src/system/components/data-input/FormItem/FormItem.vue @@ -6,7 +6,7 @@ :label="$parentInput.label" :for="$parentInput.id" /> - + @@ -21,6 +21,5 @@ export default { } - diff --git a/styleguide/src/system/components/data-input/FormItem/InputError.vue b/styleguide/src/system/components/data-input/FormItem/InputError.vue old mode 100755 new mode 100644 diff --git a/styleguide/src/system/components/data-input/FormItem/InputLabel.vue b/styleguide/src/system/components/data-input/FormItem/InputLabel.vue old mode 100755 new mode 100644 diff --git a/styleguide/src/system/components/data-input/FormItem/style.scss b/styleguide/src/system/components/data-input/FormItem/style.scss old mode 100755 new mode 100644 diff --git a/styleguide/src/system/components/data-input/Input/Input.vue b/styleguide/src/system/components/data-input/Input/Input.vue index 22b7cbb42..6fb3d6eca 100755 --- a/styleguide/src/system/components/data-input/Input/Input.vue +++ b/styleguide/src/system/components/data-input/Input/Input.vue @@ -13,7 +13,7 @@ iconRight && `ds-input-has-icon-right` ]" :id="id" - :name="name" + :name="name ? name : model" :type="type" :autofocus="autofocus" :placeholder="placeholder" @@ -48,7 +48,8 @@ export default { mixins: [inputMixin], props: { /** - * The type of this input `url, text, password, email, search, textarea`. + * The type of this input. + * @options url|text|password|email|search|textarea */ type: { type: String, @@ -64,13 +65,6 @@ export default { type: String, default: null }, - /** - * The name of the field for better accessibility - */ - name: { - type: String, - default: null - }, /** * Whether the input should be automatically focused */ @@ -78,13 +72,6 @@ export default { type: Boolean, default: false }, - /** - * Whether the input should be read-only - */ - readonly: { - type: Boolean, - default: false - }, /** * How many rows this input should have (only for type="textarea") */ diff --git a/styleguide/src/system/components/data-input/Input/demo.md b/styleguide/src/system/components/data-input/Input/demo.md old mode 100755 new mode 100644 index 7e1eb604d..a5d195f7f --- a/styleguide/src/system/components/data-input/Input/demo.md +++ b/styleguide/src/system/components/data-input/Input/demo.md @@ -1,7 +1,7 @@ ## Basic usage ``` - + ``` ## Usage with label @@ -10,7 +10,13 @@ + placeholder="Name ..." /> +``` + +## Disabled + +``` + ``` ## Input types diff --git a/styleguide/src/system/components/data-input/Input/style.scss b/styleguide/src/system/components/data-input/Input/style.scss old mode 100755 new mode 100644 diff --git a/styleguide/src/system/components/data-input/Radio/Radio.vue b/styleguide/src/system/components/data-input/Radio/Radio.vue new file mode 100644 index 000000000..06524f98d --- /dev/null +++ b/styleguide/src/system/components/data-input/Radio/Radio.vue @@ -0,0 +1,123 @@ + + + + + + + diff --git a/styleguide/src/system/components/data-input/Radio/demo.md b/styleguide/src/system/components/data-input/Radio/demo.md new file mode 100644 index 000000000..7f9c8f59c --- /dev/null +++ b/styleguide/src/system/components/data-input/Radio/demo.md @@ -0,0 +1,74 @@ +## Basic usage + +``` + +``` + +## Usage with label + +``` + +``` + +## Bind to a value + +Use v-model to bind a value to the select input. + +``` + + +``` + +## Style variations + +``` + +``` + +## Validation + +We use async-validator schemas for validation. + +If you need to validate more than one field it is better to use the form component. + +``` + + +``` diff --git a/styleguide/src/system/components/data-input/Radio/style.scss b/styleguide/src/system/components/data-input/Radio/style.scss new file mode 100644 index 000000000..39c4a8c29 --- /dev/null +++ b/styleguide/src/system/components/data-input/Radio/style.scss @@ -0,0 +1,56 @@ +.ds-radio { + outline: none; + + .ds-input-is-disabled &, + &:disabled { + color: $text-color-disabled; + opacity: $opacity-disabled; + pointer-events: none; + cursor: not-allowed; + } +} + +.ds-radio-option { + &:not(.ds-button) { + @include inline-space($space-small); + } + display: inline-flex; + align-items: center; + cursor: pointer; + user-select: none; +} + +.ds-radio-option-mark { + display: inline-block; + position: relative; + width: $font-size-base; + height: $font-size-base; + border: $input-border-size solid $border-color-base; + background-color: $background-color-base; + border-radius: $border-radius-circle; + margin-right: $space-xx-small; + + &:before { + position: absolute; + content: ''; + top: 50%; + left: 50%; + transform: translateY(-50%) translateX(-50%) scale(0); + opacity: 0; + width: $font-size-x-small; + height: $font-size-x-small; + border-radius: $border-radius-circle; + background-color: $text-color-primary; + transition: all $duration-short $ease-in-sharp; + + .ds-radio-option-is-selected & { + opacity: 1; + transform: translateY(-50%) translateX(-50%) scale(1); + } + } +} + +.ds-radio-option-label { + font-size: $font-size-base; + cursor: pointer; +} \ No newline at end of file diff --git a/styleguide/src/system/components/data-input/Select/Select.vue b/styleguide/src/system/components/data-input/Select/Select.vue index 3f16da80c..382e328d1 100755 --- a/styleguide/src/system/components/data-input/Select/Select.vue +++ b/styleguide/src/system/components/data-input/Select/Select.vue @@ -2,8 +2,12 @@
+ :key="value[labelProp] || value"> - {{ value }} + color="primary" + :size="size"> + {{ value[labelProp] || value }}
+ + + {{ innerValue[labelProp] || innerValue }} +
{{ placeholder }}
- - - {{ innerValue }} -
-
    +
    + {{ noOptionsAvailable }} +
    +
    + {{ noOptionsFound }} "{{ searchString }}" +
    +
    • + :key="option[labelProp] || option"> - {{ option.label || option }} + {{ option[labelProp] || option }}
    @@ -134,7 +151,7 @@ import DsChip from '@@/components/typography/Chip/Chip' import DsIcon from '@@/components/typography/Icon/Icon' /** - * Used for handling basic user input. + * Used for letting the user choose values from a set of options. * @version 1.0.0 */ export default { @@ -151,7 +168,8 @@ export default { data() { return { searchString: '', - pointer: 0 + pointer: 0, + isOpen: false } }, props: { @@ -169,13 +187,6 @@ export default { type: Boolean, default: false }, - /** - * Whether the input should be read-only - */ - readonly: { - type: Boolean, - default: false - }, /** * The name of the input's icon. */ @@ -199,12 +210,33 @@ export default { return [] } }, + /** + * The prop to use as the label when options are objects + */ + labelProp: { + type: String, + default: 'label' + }, /** * Whether the options are searchable */ searchable: { type: Boolean, default: true + }, + /** + * Message to show when no options are available + */ + noOptionsAvailable: { + type: String, + default: 'No options available.' + }, + /** + * Message to show when the search result is empty + */ + noOptionsFound: { + type: String, + default: 'No options found for:' } }, computed: { @@ -251,13 +283,22 @@ export default { resetSearch() { this.searchString = '' }, - handleClick() { + openAndFocus() { + this.open() if (!this.focus || this.multiple) { this.$refs.search.focus() this.handleFocus() } }, + open() { + this.resetSearch() + this.isOpen = true + }, close() { + this.isOpen = false + }, + closeAndBlur() { + this.close() this.$refs.search.blur() this.handleBlur() }, @@ -271,6 +312,20 @@ export default { this.deselectOption(this.innerValue.length - 1) } }, + handleKeyUp() { + if (!this.isOpen) { + this.open() + return + } + this.pointerPrev() + }, + handleKeyDown() { + if (!this.isOpen) { + this.open() + return + } + this.pointerNext() + }, setPointer(index) { this.pointer = index }, diff --git a/styleguide/src/system/components/data-input/Select/__snapshots__/spec.js.snap b/styleguide/src/system/components/data-input/Select/__snapshots__/spec.js.snap old mode 100755 new mode 100644 diff --git a/styleguide/src/system/components/data-input/Select/demo.md b/styleguide/src/system/components/data-input/Select/demo.md old mode 100755 new mode 100644 index c80c9c391..1eae59135 --- a/styleguide/src/system/components/data-input/Select/demo.md +++ b/styleguide/src/system/components/data-input/Select/demo.md @@ -65,7 +65,7 @@ Use the multiple prop to allow the user selecting multiple values. ## Options as objects -Options can be objects with a label and a value property. +Options can be objects. You can define which property to show as the label by defining label-prop. Defaults to "label". ``` + + + + diff --git a/styleguide/src/system/components/layout/Spinner/demo.md b/styleguide/src/system/components/layout/Spinner/demo.md new file mode 100644 index 000000000..dd47915c0 --- /dev/null +++ b/styleguide/src/system/components/layout/Spinner/demo.md @@ -0,0 +1,21 @@ +## Spinning loading indicator + +Multiple sizes + +```html + + + + + +``` + +Inverse color + +```html + + + + + +``` \ No newline at end of file diff --git a/styleguide/src/system/components/layout/Spinner/style.scss b/styleguide/src/system/components/layout/Spinner/style.scss new file mode 100644 index 000000000..4d961269d --- /dev/null +++ b/styleguide/src/system/components/layout/Spinner/style.scss @@ -0,0 +1,64 @@ +$size-small: $space-base; +$size-base: $space-large; +$size-large: $space-x-large; + +.ds-spinner { + animation: rotate 16s linear infinite; + position: relative; + display: inline-block; + width: $size-base; + height: $size-base; + + &.ds-size-small { + width: $size-small; + height: $size-small; + } + &.ds-size-large { + width: $size-large; + height: $size-large; + } + +} + +.ds-spinner-circle { + stroke: $text-color-soft; + stroke-linecap: round; + animation: dash 1.5s ease-in-out infinite; + + .ds-spinner-inverse & { + stroke: $color-primary-inverse; + } + + .ds-spinner-primary & { + stroke: $text-color-primary; + } + + .ds-spinner-secondary & { + stroke: $text-color-secondary; + } + + .ds-spinner-danger & { + stroke: $text-color-danger; + } +} + +@keyframes rotate { + 100% { + transform: rotate(2160deg); + } +} + +@keyframes dash { + 0% { + stroke-dasharray: 1, 150; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -35; + } + 100% { + stroke-dasharray: 90, 150; + stroke-dashoffset: -124; + } +} diff --git a/styleguide/src/system/components/navigation/Button/Button.vue b/styleguide/src/system/components/navigation/Button/Button.vue index d806a9d6e..971d156ca 100644 --- a/styleguide/src/system/components/navigation/Button/Button.vue +++ b/styleguide/src/system/components/navigation/Button/Button.vue @@ -10,26 +10,28 @@ ghost && `ds-button-ghost`, iconOnly && `ds-button-icon-only`, hover && `ds-button-hover`, - fullWidth && `ds-button-full-width`, - loading && `ds-button-loading` + fullwidth && `ds-button-fullwidth`, + loading && `ds-button-loading`, + right && `ds-button-right` ]" :name="name" v-bind="bindings" :is="linkTag"> - - - - - - +
    + + + + +
    + @@ -52,7 +54,7 @@ export default { }, /** * The size used for the text. - * `small, base, large` + * @options small|base|large */ size: { type: String, @@ -63,7 +65,7 @@ export default { }, /** * The component / tag used for this button - * `router-link, a` + * @options router-link|a|button */ linkTag: { type: String, @@ -84,7 +86,6 @@ export default { }, /** * Primary style - * `true, false` */ primary: { type: Boolean, @@ -92,7 +93,6 @@ export default { }, /** * Secondary style - * `true, false` */ secondary: { type: Boolean, @@ -100,7 +100,6 @@ export default { }, /** * Danger style - * `true, false` */ danger: { type: Boolean, @@ -108,7 +107,6 @@ export default { }, /** * Toggle the hover state - * `true, false` */ hover: { type: Boolean, @@ -116,7 +114,6 @@ export default { }, /** * Make the buttons background transparent - * `true, false` */ ghost: { type: Boolean, @@ -130,16 +127,16 @@ export default { default: null }, /** - * The name of the buttons right icon. + * Put the icon to the right. */ - iconRight: { - type: String, - default: null + right: { + type: Boolean, + default: false }, /** * Should the button spread to the full with of the parent? */ - fullWidth: { + fullwidth: { type: Boolean, default: false }, @@ -166,7 +163,7 @@ export default { return bindings }, iconOnly() { - return !this.$slots.default && this.icon && !this.iconRight + return !this.$slots.default && this.icon } }, methods: { diff --git a/styleguide/src/system/components/navigation/Button/demo.md b/styleguide/src/system/components/navigation/Button/demo.md index 5e1b0f4ae..b98278dc8 100644 --- a/styleguide/src/system/components/navigation/Button/demo.md +++ b/styleguide/src/system/components/navigation/Button/demo.md @@ -4,7 +4,7 @@ Use a primary button to draw the users attention to important actions. Use defau A danger button should be used only for destructive actions. -``` +```html Default Primary Secondary @@ -15,7 +15,7 @@ A danger button should be used only for destructive actions. Use a ghost button for secondary actions. -``` +```html Default Primary Secondary @@ -26,7 +26,7 @@ Use a ghost button for secondary actions. Use different sizes to create hierarchy. -``` +```html Small Base Large @@ -35,15 +35,15 @@ Use different sizes to create hierarchy. ## Button full width -``` -Full Width +```html +Full Width ``` ## Button states A button can take different states. -``` +```html Default state Disabled state Hover state @@ -54,9 +54,9 @@ A button can take different states. Add an icon to a button to help the user identify the button's action. -``` -Click me -Click me +```html +Click me +Click me ``` @@ -65,7 +65,7 @@ Add an icon to a button to help the user identify the button's action. Provide a path to the button. You can pass a url string or a Vue router path object. -``` +```html Click me Click me ``` diff --git a/styleguide/src/system/components/navigation/Button/style.scss b/styleguide/src/system/components/navigation/Button/style.scss index 2646719e3..d125c6592 100644 --- a/styleguide/src/system/components/navigation/Button/style.scss +++ b/styleguide/src/system/components/navigation/Button/style.scss @@ -37,10 +37,25 @@ border-radius: $border-radius-base; // box-shadow: $box-shadow-inset; opacity: 0; - visiblity: hidden; + visibility: hidden; pointer-events: none; } + &:after { + position: absolute; + content: ''; + top: 1px; + left: 1px; + right: 1px; + bottom: 1px; + border-radius: $border-radius-base; + border: 1px dotted currentColor; + opacity: 0; + visibility: hidden; + pointer-events: none; + transition: all $duration-short $ease-out; + } + &:focus { outline: none; } @@ -181,7 +196,8 @@ padding: 0; border-radius: $border-radius-rounded; - &:before { + &:before, + &:after { border-radius: $border-radius-rounded; } @@ -202,17 +218,49 @@ line-height: inherit; display: inline-block; white-space: nowrap; - margin: 0 $font-space-small; - - &:first-child { - margin-left: 0; - } - - &:last-child { - margin-right: 0; - } } -.ds-button-full-width { +.ds-button-fullwidth { width: 100%; } + +.ds-button-wrap { + transition: opacity 150ms ease-in-out; + display: flex; + align-items: center; + + & > * { + margin: 0 $font-space-small; + } + & > *:first-child { + margin-left: 0; + } + & > *:last-child { + margin-right: 0; + } + + .ds-button-loading & { + opacity: 0.1; + } +} + +.ds-button-right > .ds-button-wrap { + & > *:first-child { + margin-right: 0; + margin-left: $font-space-small; + } + & > *:last-child { + margin-right: 0; + margin-left: 0; + } +} + +.ds-button-right .ds-button-wrap { + flex-flow: row-reverse; +} + +.ds-button .ds-spinner { + position: absolute; + width: 60% !important; + height: 60% !important; +} diff --git a/styleguide/src/system/components/navigation/Menu/Menu.vue b/styleguide/src/system/components/navigation/Menu/Menu.vue index 7d36fd6cc..16b4d8883 100644 --- a/styleguide/src/system/components/navigation/Menu/Menu.vue +++ b/styleguide/src/system/components/navigation/Menu/Menu.vue @@ -13,9 +13,10 @@ :route="route" :parents="[]" :name="route.name"> + + name="menuitem"> @@ -64,7 +65,7 @@ export default { }, /** * The default component / tag used for the link of menu items - * `router-link, a` + * @options router-link|a */ linkTag: { type: String, @@ -98,6 +99,15 @@ export default { return route.name } }, + /** + * Function that matches items exactly + */ + matcher: { + type: Function, + default: () => { + return false + } + }, /** * Function that checks if the url must be matched exactly in order to activate the menu item. By default only '/' must be matched exactly. */ diff --git a/styleguide/src/system/components/navigation/Menu/MenuItem.vue b/styleguide/src/system/components/navigation/Menu/MenuItem.vue index 0926d0803..39979df1e 100644 --- a/styleguide/src/system/components/navigation/Menu/MenuItem.vue +++ b/styleguide/src/system/components/navigation/Menu/MenuItem.vue @@ -15,8 +15,7 @@ v-if="route" class="ds-menu-item-link" :class="[ - isExact && 'router-active-link', - isExact && 'router-link-exact-active' + matcher && 'router-link-exact-active' ]" v-bind="bindings" :exact="isExact" @@ -76,7 +75,7 @@ export default { }, /** * The component / tag used for the link of this route - * `router-link, a` + * @options router-link|a */ linkTag: { type: String, @@ -110,6 +109,9 @@ export default { isExact() { return this.$parentMenu.isExact(this.url) }, + matcher() { + return this.$parentMenu.matcher(this.url, this.route) + }, level() { return this.parents.length }, diff --git a/styleguide/src/system/components/navigation/Menu/demo.md b/styleguide/src/system/components/navigation/Menu/demo.md index ffdc13169..45f97247c 100644 --- a/styleguide/src/system/components/navigation/Menu/demo.md +++ b/styleguide/src/system/components/navigation/Menu/demo.md @@ -214,7 +214,7 @@ If you want to keep the sub menu for this menu item, be sure to use the `ds-menu diff --git a/styleguide/src/system/components/navigation/Menu/style.scss b/styleguide/src/system/components/navigation/Menu/style.scss index 2a59e6781..0bd99b637 100644 --- a/styleguide/src/system/components/navigation/Menu/style.scss +++ b/styleguide/src/system/components/navigation/Menu/style.scss @@ -45,20 +45,18 @@ ul.ds-menu-list { padding: $space-x-small $space-small; transition: color $duration-short $ease-out; border-left: 2px solid transparent; - - &.router-link-active, - &.nuxt-link-active { + + &.router-link-active { color: $text-color-link-active; } - + &:hover { color: $text-color-link-active; } - - &.router-link-exact-active, - &.nuxt-link-exact-active { + + &.router-link-exact-active { color: $text-color-link; - // background-color: $background-color-soft; + background-color: $background-color-soft; border-left: 2px solid $color-primary; } @@ -117,14 +115,12 @@ ul.ds-menu-list { &, &:hover, - &.router-link-exact-active, - &.nuxt-link-exact-active { + &.router-link-exact-active { background-color: transparent; } &:hover, - &.router-link-active, - &.nuxt-link-active { + &.router-link-active { &:before { opacity: 1; } diff --git a/styleguide/src/system/components/typography/Chip/Chip.vue b/styleguide/src/system/components/typography/Chip/Chip.vue old mode 100755 new mode 100644 index b5baed90b..ad57f3267 --- a/styleguide/src/system/components/typography/Chip/Chip.vue +++ b/styleguide/src/system/components/typography/Chip/Chip.vue @@ -1,5 +1,5 @@