diff --git a/package.json b/package.json
index d79b26a6..f596b1be 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@soramitsu/soramitsu-js-ui",
- "version": "1.0.17",
+ "version": "1.0.18",
"private": false,
"publishConfig": {
"registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"
diff --git a/src/stories/SImage.stories.ts b/src/stories/SImage.stories.ts
index d1436374..3150d3d9 100644
--- a/src/stories/SImage.stories.ts
+++ b/src/stories/SImage.stories.ts
@@ -10,16 +10,17 @@ export default {
export const configurable = () => ({
components: { SImage },
- template: ``,
+ template: `
+ `,
props: {
src: {
default: text('Src', 'https://picsum.photos/1024')
@@ -47,23 +48,24 @@ export const configurable = () => ({
export const LazyImages = () => ({
components: { SImage },
- template: `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
`,
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`,
data: () => ({
imageSrc: 'https://picsum.photos/1024/300'
})
diff --git a/src/stories/SSkeleton.stories.ts b/src/stories/SSkeleton.stories.ts
index 38283f69..79fdc51a 100644
--- a/src/stories/SSkeleton.stories.ts
+++ b/src/stories/SSkeleton.stories.ts
@@ -16,27 +16,28 @@ export const configurable = () => ({
SSkeletonItem,
SImage
},
- template: `
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
`,
+ template: `
+
+
+
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+
`,
props: {
animated: {
default: boolean('Animated', true)
@@ -67,13 +68,14 @@ export const SkeletonItem = () => ({
SSkeleton,
SSkeletonItem
},
- template: `
-
-
-
-
-
-
`,
+ template: `
+
+
+
+
+
+
+
`,
props: {
element: {
default: select('Element', Object.values(SkeletonItemElement), SkeletonItemElement.TEXT)
diff --git a/src/stories/STooltip.stories.ts b/src/stories/STooltip.stories.ts
index 257cd16d..4e96a696 100644
--- a/src/stories/STooltip.stories.ts
+++ b/src/stories/STooltip.stories.ts
@@ -86,7 +86,7 @@ export const withDifferentPlacement = () => ({
components: { STooltip, SButton, SRow, SMain },
template: `
-
+
{{ placement }}
@@ -94,6 +94,9 @@ export const withDifferentPlacement = () => ({
props: {
items: {
default: () => differentPlacementData
+ },
+ borderRadius: {
+ default: select('BorderRadius', Object.values(BorderRadius), BorderRadius.SMALL)
}
}
})
diff --git a/src/styles/neumorphism/tooltip.scss b/src/styles/neumorphism/tooltip.scss
index 800cb1e1..c4eafbfc 100644
--- a/src/styles/neumorphism/tooltip.scss
+++ b/src/styles/neumorphism/tooltip.scss
@@ -2,6 +2,8 @@ $neu-tooltip-max-width: 236px !default;
$neu-tooltip-padding: 6px 8px !default;
$neu-tooltip-line-height: 12px !default;
$neu-tooltip-background-color: var(--s-color-base-content-secondary) !default;
+$neu-tooltip-arrow-shift: calc(var(--s-border-radius-mini) / 4);
+$neu-tooltip-arrow-width: 8px;
.el-tooltip__popper.neumorphic {
max-width: $neu-tooltip-max-width;
@@ -38,6 +40,7 @@ $neu-tooltip-background-color: var(--s-color-base-content-secondary) !default;
&[x-placement^="right"] .popper__arrow {
border-right-color: $neu-tooltip-background-color;
border-bottom-color: transparent;
+ border-right-width: $neu-tooltip-arrow-width;
&::after {
border-right-color: inherit;
}
@@ -45,9 +48,61 @@ $neu-tooltip-background-color: var(--s-color-base-content-secondary) !default;
&[x-placement^="left"] .popper__arrow {
border-left-color: $neu-tooltip-background-color;
border-bottom-color: transparent;
+ border-left-width: $neu-tooltip-arrow-width;
&::after {
border-left-color: inherit;
}
}
}
-}
\ No newline at end of file
+ &.s-border-radius {
+ &-mini {
+ &[x-placement^="right"],
+ &[x-placement^="right-start"],
+ &[x-placement^="left"],
+ &[x-placement^="left-start"] {
+ .popper__arrow {
+ margin-top: $neu-tooltip-arrow-shift;
+ }
+ }
+ &[x-placement^="right-end"],
+ &[x-placement^="left-end"] {
+ .popper__arrow {
+ margin-bottom: $neu-tooltip-arrow-shift;
+ }
+ }
+ }
+ &-small {
+ &[x-placement^="right"],
+ &[x-placement^="right-start"],
+ &[x-placement^="left"],
+ &[x-placement^="left-start"] {
+ .popper__arrow {
+ margin-top: calc(#{$neu-tooltip-arrow-shift} / 2);
+ }
+ }
+ &[x-placement^="right-end"],
+ &[x-placement^="left-end"] {
+ .popper__arrow {
+ margin-bottom: calc(#{$neu-tooltip-arrow-shift} / 2);
+ }
+ }
+ }
+ &-medium,
+ &-big {
+ &[x-placement^="right"],
+ &[x-placement^="right-start"],
+ &[x-placement^="left"],
+ &[x-placement^="left-start"] {
+ .popper__arrow {
+ margin-top: -2px;
+ }
+ }
+ &[x-placement^="right-end"],
+ &[x-placement^="left-end"] {
+ .popper__arrow {
+ margin-bottom: -2px;
+ }
+ }
+ }
+ }
+}
diff --git a/src/styles/option.scss b/src/styles/option.scss
index 661abc91..6939c70c 100644
--- a/src/styles/option.scss
+++ b/src/styles/option.scss
@@ -1,4 +1,4 @@
.s-option {
padding-left: $s-basic-spacing * 2;
padding-right: $s-basic-spacing * 2;
-}
\ No newline at end of file
+}
diff --git a/src/styles/table.scss b/src/styles/table.scss
index 9c14d1c6..b9cdb281 100644
--- a/src/styles/table.scss
+++ b/src/styles/table.scss
@@ -187,4 +187,4 @@
.el-table--enable-row-hover.s-hierarchical-table-level:not(.s-hierarchical-table-level--last) .el-table__body tr.s-hierarchical-table-row:hover > td {
background: transparent;
}
-}
\ No newline at end of file
+}