From 1c75cebdbdac3f133b40cdda61733d1d53e033cc Mon Sep 17 00:00:00 2001 From: RDMStreet Date: Wed, 3 Mar 2021 19:18:14 +0000 Subject: [PATCH 1/4] UNK-613 Accent rounded tabs --- src/components/Tab/STabs.vue | 13 ++++++++----- src/components/Tab/consts.ts | 1 + src/styles/tabs.scss | 31 +++++++++++++++++++++++++++++++ 3 files changed, 40 insertions(+), 5 deletions(-) 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..c7037962 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; + } + } + } } } } @@ -118,6 +126,29 @@ } } } + &.s-accent-rounded { + .el-tabs__header { + width: fit-content; + } + .el-tabs__nav-wrap { + background-color: var(--s-color-base-background); + height: 32px; + &::after, + .el-tabs__active-bar { + height: 0; + } + .el-tabs__item { + padding: 0 18px; + height: 32px; + line-height: 32px; + transition: 200ms; + &.is-active { + color: var(--s-color-base-on-accent); + background-color: var(--s-color-theme-accent); + } + } + } + } .el-tabs__active-bar { background-color: var(--s-color-theme-accent); } From c0ab28cedfc3b26e990e62aca9849f532aa959dd Mon Sep 17 00:00:00 2001 From: RDMStreet Date: Wed, 3 Mar 2021 20:36:43 +0000 Subject: [PATCH 2/4] Small fix --- src/styles/tabs.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss index c7037962..b6486b5a 100644 --- a/src/styles/tabs.scss +++ b/src/styles/tabs.scss @@ -99,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; } @@ -133,6 +136,9 @@ .el-tabs__nav-wrap { background-color: var(--s-color-base-background); height: 32px; + .el-tabs__nav { + display: flex; + } &::after, .el-tabs__active-bar { height: 0; From 0b8436191847eab7e92fbc7c2399fff1f64ff757 Mon Sep 17 00:00:00 2001 From: RDMStreet Date: Wed, 3 Mar 2021 20:45:48 +0000 Subject: [PATCH 3/4] Height var --- src/styles/tabs.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss index b6486b5a..0ed6688f 100644 --- a/src/styles/tabs.scss +++ b/src/styles/tabs.scss @@ -130,12 +130,13 @@ } } &.s-accent-rounded { + $height: 32px; .el-tabs__header { width: fit-content; } .el-tabs__nav-wrap { background-color: var(--s-color-base-background); - height: 32px; + height: $height; .el-tabs__nav { display: flex; } @@ -145,8 +146,8 @@ } .el-tabs__item { padding: 0 18px; - height: 32px; - line-height: 32px; + height: $height; + line-height: $height; transition: 200ms; &.is-active { color: var(--s-color-base-on-accent); From 9bcba2f8d4d888833106677e82be6df4b7f4ae6c Mon Sep 17 00:00:00 2001 From: RDMStreet Date: Thu, 4 Mar 2021 14:25:11 +0000 Subject: [PATCH 4/4] Some fixes --- src/styles/tabs.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss index 0ed6688f..bb58c62e 100644 --- a/src/styles/tabs.scss +++ b/src/styles/tabs.scss @@ -132,7 +132,9 @@ &.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); @@ -152,6 +154,12 @@ &.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; } } }