diff --git a/config/storybook/neu-theme-variables.scss b/config/storybook/neu-theme-variables.scss index 04e56408..e1aed7f5 100644 --- a/config/storybook/neu-theme-variables.scss +++ b/config/storybook/neu-theme-variables.scss @@ -30,12 +30,14 @@ $s-color-utility-body: #F7F3F4; $s-color-utility-surface: #FDF7FB; $s-color-utility-overlay: rgba(42, 23, 31, 0.1); // Status colors -$s-color-status-success: #34AD87; -$s-color-status-warning: #479AEF; -$s-color-status-error: #F754A3; -$s-color-status-success-background: #B9EBDB; -$s-color-status-warning-background: #C6E2FF; -$s-color-status-error-background: #FFD8EB; +$s-color-status-success: #34AD87 !default; +$s-color-status-warning: #EBA332 !default; +$s-color-status-error: #F754A3 !default; +$s-color-status-info: #479AEF !default; +$s-color-status-success-background: #B9EBDB !default; +$s-color-status-warning-background: #FCEEBD !default; +$s-color-status-error-background: #FFD8EB !default; +$s-color-status-info-background: #C6E2FF !default; // Shadows $s-shadow-surface: 1px 1px 5px var(--s-shadow-color-dark), inset 1px 1px 1px var(--s-shadow-color-dark); // container // Size @@ -71,9 +73,11 @@ $s-size-mini: 24px; --s-color-status-success: #{$s-color-status-success}; --s-color-status-warning: #{$s-color-status-warning}; --s-color-status-error: #{$s-color-status-error}; + --s-color-status-info: #{$s-color-status-info}; --s-color-status-success-background: #{$s-color-status-success-background}; --s-color-status-warning-background: #{$s-color-status-warning-background}; --s-color-status-error-background: #{$s-color-status-error-background}; + --s-color-status-info-background: #{$s-color-status-info-background}; // Shadows --s-shadow-surface: #{$s-shadow-surface}; } diff --git a/package.json b/package.json index 553d5154..b1bd6c90 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@soramitsu/soramitsu-js-ui", - "version": "1.0.42", + "version": "1.0.43", "private": false, "publishConfig": { "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/" diff --git a/src/mixins/StatusMixin.ts b/src/mixins/StatusMixin.ts index d545e857..69683bbb 100644 --- a/src/mixins/StatusMixin.ts +++ b/src/mixins/StatusMixin.ts @@ -5,7 +5,7 @@ import { Status } from '../types' @Component export default class StatusMixin extends Vue { /** - * Status of component. Possible values: `"default"`, `"success"`, `"warning"`, `"error"`. + * Status of component. Possible values: `"default"`, `"success"`, `"warning"`, `"error"`, `"info"`. * * By default it's set to `"default"` */ diff --git a/src/styles/collapse.scss b/src/styles/collapse.scss index a29bfd73..8cc2fac8 100644 --- a/src/styles/collapse.scss +++ b/src/styles/collapse.scss @@ -30,18 +30,26 @@ } .el-icon-arrow-right { &, - &:before { + &::before { font-family: var(--s-font-family-icons); } + &::before { + position: absolute; + transition: transform 0.25s ease-in-out; + } @extend .s-icon-chevron-down-rounded-16; font-size: var(--s-icon-font-size-mini); - padding: 8px; + padding: 0 8px; width: 32px; height: 32px; + line-height: 32px; background-color: var(--s-color-base-background); border-radius: var(--s-border-radius-small); &.is-active { - transform: scale(1, -1); + transform: none; + &::before { + transform: scale(1, -1); + } } &:hover, &:focus { diff --git a/src/styles/neumorphism/card.scss b/src/styles/neumorphism/card.scss index 9ab59e6e..1b97caf0 100644 --- a/src/styles/neumorphism/card.scss +++ b/src/styles/neumorphism/card.scss @@ -16,9 +16,10 @@ background: var(--s-color-base-background); border: none; - @include status; + @include status('success'); @include status('warning'); @include status('error'); + @include status('info'); .el-card { &__header, &__body { diff --git a/src/styles/neumorphism/collapse.scss b/src/styles/neumorphism/collapse.scss index 8a39616b..4d663e22 100644 --- a/src/styles/neumorphism/collapse.scss +++ b/src/styles/neumorphism/collapse.scss @@ -3,17 +3,24 @@ $neu-collapse-button-border-width: 0px !default; $neu-collapse-button-border-style: solid !default !default; $neu-collapse-button-background-color: var(--s-color-utility-body) !default; $neu-collapse-button-text-color: var(--s-color-base-content-tertiary) !default; +$neu-collapse-button-text-color-hover: var(--s-color-base-content-secondary) !default; $neu-collapse-button-border-color: transparent !default; $neu-collapse-button-box-shadow: var(--s-shadow-element-pressed) !default; $neu-collapse-button-font-size: 28px !default; -.el-collapse.neumorphic .el-icon-arrow-right { - width: $neu-collapse-button-size; - height: $neu-collapse-button-size; - background: $neu-collapse-button-background-color; - border-color: $neu-collapse-button-border-color; - border-style: $neu-collapse-button-border-style; - border-width: $neu-collapse-button-border-width; - box-shadow: $neu-collapse-button-box-shadow; - color: $neu-collapse-button-text-color; - font-size: $neu-collapse-button-font-size; +.el-collapse.neumorphic .el-collapse-item__header { + .el-icon-arrow-right { + width: $neu-collapse-button-size; + height: $neu-collapse-button-size; + line-height: $neu-collapse-button-size; + background: $neu-collapse-button-background-color; + border-color: $neu-collapse-button-border-color; + border-style: $neu-collapse-button-border-style; + border-width: $neu-collapse-button-border-width; + box-shadow: $neu-collapse-button-box-shadow; + color: $neu-collapse-button-text-color; + font-size: $neu-collapse-button-font-size; + } + &:hover .el-icon-arrow-right { + color: $neu-collapse-button-text-color-hover; + } } diff --git a/src/styles/root.scss b/src/styles/root.scss index 8ec23d64..a048bfdf 100644 --- a/src/styles/root.scss +++ b/src/styles/root.scss @@ -27,9 +27,11 @@ --s-color-status-success: #{$s-color-status-success}; --s-color-status-warning: #{$s-color-status-warning}; --s-color-status-error: #{$s-color-status-error}; + --s-color-status-info: #{$s-color-status-info}; --s-color-status-success-background: #{$s-color-status-success-background}; --s-color-status-warning-background: #{$s-color-status-warning-background}; --s-color-status-error-background: #{$s-color-status-error-background}; + --s-color-status-info-background: #{$s-color-status-info-background}; // Dark theme --s-color-theme-accent--dark: #{$s-color-theme-accent--dark}; --s-color-theme-accent-hover--dark: #{$s-color-theme-accent-hover--dark}; @@ -58,9 +60,11 @@ --s-color-status-success--dark: #{$s-color-status-success--dark}; --s-color-status-warning--dark: #{$s-color-status-warning--dark}; --s-color-status-error--dark: #{$s-color-status-error--dark}; + --s-color-status-info--dark: #{$s-color-status-info--dark}; --s-color-status-success-background--dark: #{$s-color-status-success-background--dark}; --s-color-status-warning-background--dark: #{$s-color-status-warning-background--dark}; --s-color-status-error-background--dark: #{$s-color-status-error-background--dark}; + --s-color-status-info-background--dark: #{$s-color-status-info-background--dark}; --s-shadow-color-light--dark: #{$s-shadow-color-light--dark}; --s-shadow-color-light-darken--dark: #{$s-shadow-color-light-darken--dark}; --s-shadow-color-light-dark--dark: #{$s-shadow-color-light-dark--dark}; diff --git a/src/styles/theme/dark.scss b/src/styles/theme/dark.scss index 97a688ee..3a1bd88d 100644 --- a/src/styles/theme/dark.scss +++ b/src/styles/theme/dark.scss @@ -29,11 +29,13 @@ $s-color-utility-surface--dark: #592D71 !default; $s-color-utility-overlay--dark: rgba(41, 0, 71, 0.9) !default; // Status colors $s-color-status-success--dark: #34AD87 !default; -$s-color-status-warning--dark: #479AEF !default; +$s-color-status-warning--dark: #EBA332 !default; $s-color-status-error--dark: #F754A3 !default; +$s-color-status-info--dark: #479AEF !default; $s-color-status-success-background--dark: #34AD87 !default; -$s-color-status-warning-background--dark: #479AEF !default; +$s-color-status-warning-background--dark: #EBA332 !default; $s-color-status-error-background--dark: #F754A3 !default; +$s-color-status-info-background--dark: #479AEF !default; // Shadow // dark variations $s-shadow-color-dark--dark: rgba(41, 0, 71, 0.33) !default; diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 442215dc..b4b70412 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -31,9 +31,11 @@ $s-color-utility-overlay: rgba(0, 0, 0, 0.45) !default; $s-color-status-success: #009900 !default; $s-color-status-warning: #FF9900 !default; $s-color-status-error: #FF0000 !default; +$s-color-status-info: #1070CA !default; $s-color-status-success-background: #CCEDCC !default; $s-color-status-warning-background: #FFE3B8 !default; $s-color-status-error-background: #FFF9FA !default; +$s-color-status-info-background: #DBE4FF !default; // Shadow $s-shadow-color-dark: rgba(0, 0, 0, 0.1) !default; $s-shadow-color-dark-light: rgba(0, 0, 0, 0.02) !default; diff --git a/src/types/index.ts b/src/types/index.ts index 6de40621..33dc419f 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -17,6 +17,7 @@ export enum Status { SUCCESS = 'success', WARNING = 'warning', ERROR = 'error', + INFO = 'info', } export enum Direction { @@ -51,9 +52,11 @@ export enum Colors { StatusSuccess = 'status-success', StatusWarning = 'status-warning', StatusError = 'status-error', + StatusInfo = 'status-info', StatusSuccessBackground = 'status-success-background', StatusWarningBackground = 'status-warning-background', StatusErrorBackground = 'status-error-background', + StatusInfoBackground = 'status-info-background', ButtonTertiaryColor = 'button-tertiary-color', ButtonTertiaryColorActive = 'button-tertiary-color-active', ButtonTertiaryBackground = 'button-tertiary-background', @@ -106,9 +109,11 @@ export enum StatusColors { StatusSuccess = Colors.StatusSuccess, StatusWarning = Colors.StatusWarning, StatusError = Colors.StatusError, + StatusInfo = Colors.StatusInfo, StatusSuccessBackground = Colors.StatusSuccessBackground, StatusWarningBackground = Colors.StatusWarningBackground, - StatusErrorBackground = Colors.StatusErrorBackground + StatusErrorBackground = Colors.StatusErrorBackground, + StatusInfoBackground = Colors.StatusInfoBackground, } export enum TertiaryButtonColors {