diff --git a/src/components/Tab/STabs.vue b/src/components/Tab/STabs.vue index 51cfa17a..5fff3a8b 100644 --- a/src/components/Tab/STabs.vue +++ b/src/components/Tab/STabs.vue @@ -38,7 +38,7 @@ export default class STabs extends Mixins(BorderRadiusMixin) { * * `"rounded"` works only when position is `"top"` or `"bottom"` */ - @Prop({ type: String, default: '' }) readonly type!: string + @Prop({ type: String, default: '' }) readonly type!: TabsType /** * Will tabs be closable. * @@ -88,10 +88,9 @@ export default class STabs extends Mixins(BorderRadiusMixin) { } get computedType (): string { - if (!(Object.values(TabsType) as Array).includes(this.type)) { - return '' - } - return this.type !== TabsType.ROUNDED ? this.type : '' + if (!(Object.values(TabsType) as Array).includes(this.type)) return '' + if ([TabsType.ROUNDED, TabsType.ACCENT_ROUNDED].includes(this.type)) return '' + return this.type } get computedClasses (): Array { @@ -100,6 +99,10 @@ export default class STabs extends Mixins(BorderRadiusMixin) { ([TabsPosition.TOP, TabsPosition.BOTTOM] as Array).includes(this.position)) { cssClasses.push('s-rounded') } + if (this.type === TabsType.ACCENT_ROUNDED && + ([TabsPosition.TOP, TabsPosition.BOTTOM] as Array).includes(this.position)) { + cssClasses.push('s-accent-rounded') + } if (this.isStandardBorderRadius) { cssClasses.push(`s-border-radius-${this.borderRadius}`) } diff --git a/src/components/Tab/consts.ts b/src/components/Tab/consts.ts index 5ae902a9..cdbbced1 100644 --- a/src/components/Tab/consts.ts +++ b/src/components/Tab/consts.ts @@ -1,5 +1,6 @@ export enum TabsType { ROUNDED = 'rounded', + ACCENT_ROUNDED = 'accent-rounded', CARD = 'card', BORDER_CARD = 'border-card' } diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss index 92a89246..bb58c62e 100644 --- a/src/styles/tabs.scss +++ b/src/styles/tabs.scss @@ -26,6 +26,14 @@ } } } + &.s-accent-rounded { + .el-tabs__nav-wrap { + border-radius: $border-radius; + .el-tabs__item { + border-radius: $border-radius; + } + } + } } } } @@ -91,6 +99,9 @@ .el-tabs__nav-wrap { background-color: var(--s-color-base-background); height: 32px; + .el-tabs__nav { + display: flex; + } .el-tabs__nav-scroll { padding: 2px; } @@ -118,6 +129,41 @@ } } } + &.s-accent-rounded { + $height: 32px; + .el-tabs__header { + height: $height; + width: fit-content; + margin-bottom: 20px; + } + .el-tabs__nav-wrap { + background-color: var(--s-color-base-background); + height: $height; + .el-tabs__nav { + display: flex; + } + &::after, + .el-tabs__active-bar { + height: 0; + } + .el-tabs__item { + padding: 0 18px; + height: $height; + line-height: $height; + transition: 200ms; + &.is-active { + color: var(--s-color-base-on-accent); + background-color: var(--s-color-theme-accent); + i { + color: var(--s-color-base-on-accent); + } + } + i { + line-height: $height; + } + } + } + } .el-tabs__active-bar { background-color: var(--s-color-theme-accent); }