Skip to content

Commit a4ca6cb

Browse files
stefashkaastefashkaa
authored
Fix collapse shadow and statuses (#505)
1 parent f5c2d79 commit a4ca6cb

File tree

10 files changed

+58
-25
lines changed

10 files changed

+58
-25
lines changed

‎config/storybook/neu-theme-variables.scss

+10-6
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,14 @@ $s-color-utility-body: #F7F3F4;
3030
$s-color-utility-surface: #FDF7FB;
3131
$s-color-utility-overlay: rgba(42, 23, 31, 0.1);
3232
// Status colors
33-
$s-color-status-success: #34AD87;
34-
$s-color-status-warning: #479AEF;
35-
$s-color-status-error: #F754A3;
36-
$s-color-status-success-background: #B9EBDB;
37-
$s-color-status-warning-background: #C6E2FF;
38-
$s-color-status-error-background: #FFD8EB;
33+
$s-color-status-success: #34AD87 !default;
34+
$s-color-status-warning: #EBA332 !default;
35+
$s-color-status-error: #F754A3 !default;
36+
$s-color-status-info: #479AEF !default;
37+
$s-color-status-success-background: #B9EBDB !default;
38+
$s-color-status-warning-background: #FCEEBD !default;
39+
$s-color-status-error-background: #FFD8EB !default;
40+
$s-color-status-info-background: #C6E2FF !default;
3941
// Shadows
4042
$s-shadow-surface: 1px 1px 5px var(--s-shadow-color-dark), inset 1px 1px 1px var(--s-shadow-color-dark); // container
4143
// Size
@@ -71,9 +73,11 @@ $s-size-mini: 24px;
7173
--s-color-status-success: #{$s-color-status-success};
7274
--s-color-status-warning: #{$s-color-status-warning};
7375
--s-color-status-error: #{$s-color-status-error};
76+
--s-color-status-info: #{$s-color-status-info};
7477
--s-color-status-success-background: #{$s-color-status-success-background};
7578
--s-color-status-warning-background: #{$s-color-status-warning-background};
7679
--s-color-status-error-background: #{$s-color-status-error-background};
80+
--s-color-status-info-background: #{$s-color-status-info-background};
7781
// Shadows
7882
--s-shadow-surface: #{$s-shadow-surface};
7983
}

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@soramitsu/soramitsu-js-ui",
3-
"version": "1.0.42",
3+
"version": "1.0.43",
44
"private": false,
55
"publishConfig": {
66
"registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"

‎src/mixins/StatusMixin.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { Status } from '../types'
55
@Component
66
export default class StatusMixin extends Vue {
77
/**
8-
* Status of component. Possible values: `"default"`, `"success"`, `"warning"`, `"error"`.
8+
* Status of component. Possible values: `"default"`, `"success"`, `"warning"`, `"error"`, `"info"`.
99
*
1010
* By default it's set to `"default"`
1111
*/

‎src/styles/collapse.scss

+11-3
Original file line numberDiff line numberDiff line change
@@ -30,18 +30,26 @@
3030
}
3131
.el-icon-arrow-right {
3232
&,
33-
&:before {
33+
&::before {
3434
font-family: var(--s-font-family-icons);
3535
}
36+
&::before {
37+
position: absolute;
38+
transition: transform 0.25s ease-in-out;
39+
}
3640
@extend .s-icon-chevron-down-rounded-16;
3741
font-size: var(--s-icon-font-size-mini);
38-
padding: 8px;
42+
padding: 0 8px;
3943
width: 32px;
4044
height: 32px;
45+
line-height: 32px;
4146
background-color: var(--s-color-base-background);
4247
border-radius: var(--s-border-radius-small);
4348
&.is-active {
44-
transform: scale(1, -1);
49+
transform: none;
50+
&::before {
51+
transform: scale(1, -1);
52+
}
4553
}
4654
&:hover,
4755
&:focus {

‎src/styles/neumorphism/card.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,10 @@
1616
background: var(--s-color-base-background);
1717
border: none;
1818

19-
@include status;
19+
@include status('success');
2020
@include status('warning');
2121
@include status('error');
22+
@include status('info');
2223

2324
.el-card {
2425
&__header, &__body {

‎src/styles/neumorphism/collapse.scss

+17-10
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,24 @@ $neu-collapse-button-border-width: 0px !default;
33
$neu-collapse-button-border-style: solid !default !default;
44
$neu-collapse-button-background-color: var(--s-color-utility-body) !default;
55
$neu-collapse-button-text-color: var(--s-color-base-content-tertiary) !default;
6+
$neu-collapse-button-text-color-hover: var(--s-color-base-content-secondary) !default;
67
$neu-collapse-button-border-color: transparent !default;
78
$neu-collapse-button-box-shadow: var(--s-shadow-element-pressed) !default;
89
$neu-collapse-button-font-size: 28px !default;
9-
.el-collapse.neumorphic .el-icon-arrow-right {
10-
width: $neu-collapse-button-size;
11-
height: $neu-collapse-button-size;
12-
background: $neu-collapse-button-background-color;
13-
border-color: $neu-collapse-button-border-color;
14-
border-style: $neu-collapse-button-border-style;
15-
border-width: $neu-collapse-button-border-width;
16-
box-shadow: $neu-collapse-button-box-shadow;
17-
color: $neu-collapse-button-text-color;
18-
font-size: $neu-collapse-button-font-size;
10+
.el-collapse.neumorphic .el-collapse-item__header {
11+
.el-icon-arrow-right {
12+
width: $neu-collapse-button-size;
13+
height: $neu-collapse-button-size;
14+
line-height: $neu-collapse-button-size;
15+
background: $neu-collapse-button-background-color;
16+
border-color: $neu-collapse-button-border-color;
17+
border-style: $neu-collapse-button-border-style;
18+
border-width: $neu-collapse-button-border-width;
19+
box-shadow: $neu-collapse-button-box-shadow;
20+
color: $neu-collapse-button-text-color;
21+
font-size: $neu-collapse-button-font-size;
22+
}
23+
&:hover .el-icon-arrow-right {
24+
color: $neu-collapse-button-text-color-hover;
25+
}
1926
}

‎src/styles/root.scss

+4
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,11 @@
2727
--s-color-status-success: #{$s-color-status-success};
2828
--s-color-status-warning: #{$s-color-status-warning};
2929
--s-color-status-error: #{$s-color-status-error};
30+
--s-color-status-info: #{$s-color-status-info};
3031
--s-color-status-success-background: #{$s-color-status-success-background};
3132
--s-color-status-warning-background: #{$s-color-status-warning-background};
3233
--s-color-status-error-background: #{$s-color-status-error-background};
34+
--s-color-status-info-background: #{$s-color-status-info-background};
3335
// Dark theme
3436
--s-color-theme-accent--dark: #{$s-color-theme-accent--dark};
3537
--s-color-theme-accent-hover--dark: #{$s-color-theme-accent-hover--dark};
@@ -58,9 +60,11 @@
5860
--s-color-status-success--dark: #{$s-color-status-success--dark};
5961
--s-color-status-warning--dark: #{$s-color-status-warning--dark};
6062
--s-color-status-error--dark: #{$s-color-status-error--dark};
63+
--s-color-status-info--dark: #{$s-color-status-info--dark};
6164
--s-color-status-success-background--dark: #{$s-color-status-success-background--dark};
6265
--s-color-status-warning-background--dark: #{$s-color-status-warning-background--dark};
6366
--s-color-status-error-background--dark: #{$s-color-status-error-background--dark};
67+
--s-color-status-info-background--dark: #{$s-color-status-info-background--dark};
6468
--s-shadow-color-light--dark: #{$s-shadow-color-light--dark};
6569
--s-shadow-color-light-darken--dark: #{$s-shadow-color-light-darken--dark};
6670
--s-shadow-color-light-dark--dark: #{$s-shadow-color-light-dark--dark};

‎src/styles/theme/dark.scss

+4-2
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,13 @@ $s-color-utility-surface--dark: #592D71 !default;
2929
$s-color-utility-overlay--dark: rgba(41, 0, 71, 0.9) !default;
3030
// Status colors
3131
$s-color-status-success--dark: #34AD87 !default;
32-
$s-color-status-warning--dark: #479AEF !default;
32+
$s-color-status-warning--dark: #EBA332 !default;
3333
$s-color-status-error--dark: #F754A3 !default;
34+
$s-color-status-info--dark: #479AEF !default;
3435
$s-color-status-success-background--dark: #34AD87 !default;
35-
$s-color-status-warning-background--dark: #479AEF !default;
36+
$s-color-status-warning-background--dark: #EBA332 !default;
3637
$s-color-status-error-background--dark: #F754A3 !default;
38+
$s-color-status-info-background--dark: #479AEF !default;
3739
// Shadow
3840
// dark variations
3941
$s-shadow-color-dark--dark: rgba(41, 0, 71, 0.33) !default;

‎src/styles/variables.scss

+2
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,11 @@ $s-color-utility-overlay: rgba(0, 0, 0, 0.45) !default;
3131
$s-color-status-success: #009900 !default;
3232
$s-color-status-warning: #FF9900 !default;
3333
$s-color-status-error: #FF0000 !default;
34+
$s-color-status-info: #1070CA !default;
3435
$s-color-status-success-background: #CCEDCC !default;
3536
$s-color-status-warning-background: #FFE3B8 !default;
3637
$s-color-status-error-background: #FFF9FA !default;
38+
$s-color-status-info-background: #DBE4FF !default;
3739
// Shadow
3840
$s-shadow-color-dark: rgba(0, 0, 0, 0.1) !default;
3941
$s-shadow-color-dark-light: rgba(0, 0, 0, 0.02) !default;

‎src/types/index.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export enum Status {
1717
SUCCESS = 'success',
1818
WARNING = 'warning',
1919
ERROR = 'error',
20+
INFO = 'info',
2021
}
2122

2223
export enum Direction {
@@ -51,9 +52,11 @@ export enum Colors {
5152
StatusSuccess = 'status-success',
5253
StatusWarning = 'status-warning',
5354
StatusError = 'status-error',
55+
StatusInfo = 'status-info',
5456
StatusSuccessBackground = 'status-success-background',
5557
StatusWarningBackground = 'status-warning-background',
5658
StatusErrorBackground = 'status-error-background',
59+
StatusInfoBackground = 'status-info-background',
5760
ButtonTertiaryColor = 'button-tertiary-color',
5861
ButtonTertiaryColorActive = 'button-tertiary-color-active',
5962
ButtonTertiaryBackground = 'button-tertiary-background',
@@ -106,9 +109,11 @@ export enum StatusColors {
106109
StatusSuccess = Colors.StatusSuccess,
107110
StatusWarning = Colors.StatusWarning,
108111
StatusError = Colors.StatusError,
112+
StatusInfo = Colors.StatusInfo,
109113
StatusSuccessBackground = Colors.StatusSuccessBackground,
110114
StatusWarningBackground = Colors.StatusWarningBackground,
111-
StatusErrorBackground = Colors.StatusErrorBackground
115+
StatusErrorBackground = Colors.StatusErrorBackground,
116+
StatusInfoBackground = Colors.StatusInfoBackground,
112117
}
113118

114119
export enum TertiaryButtonColors {

0 commit comments

Comments
 (0)