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: `
- - - - -
`, + template: ` +
+ + + + +
`, 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 +}