chore: Woot tabs for RTL(#6518)

This commit is contained in:
Sivin Varghese
2023-02-23 18:18:28 +05:30
committed by GitHub
parent 409466bbd5
commit 6407745571
2 changed files with 24 additions and 17 deletions

View File

@@ -12,7 +12,7 @@
border-top-width: 0; border-top-width: 0;
display: flex; display: flex;
min-width: var(--space-mega); min-width: var(--space-mega);
padding: $zero $space-normal; padding: 0 var(--space-normal);
} }
.tabs--with-scroll { .tabs--with-scroll {
@@ -37,26 +37,26 @@
.tabs-title { .tabs-title {
a { a {
font-size: $font-size-default; font-size: var(--font-size-default);
font-weight: $font-weight-medium; font-weight: var(--font-weight-medium);
padding-bottom: $space-slab; padding-bottom: var(--space-slab);
padding-top: $space-slab; padding-top: var(--space-slab);
} }
} }
} }
.tabs-title { .tabs-title {
flex-shrink: 0; flex-shrink: 0;
margin: $zero $space-slab; margin: 0 var(--space-slab);
.badge { .badge {
background: $color-background; background: var(--color-background);
border-radius: $space-small; border-radius: var(--space-small);
color: $color-gray; color: var(--color-gray);
font-size: $font-size-micro; font-size: var(--font-size-micro);
font-weight: $font-weight-black; font-weight: var(--font-weight-black);
margin-left: $space-smaller; margin: 0 var(--space-smaller);
padding: $space-smaller; padding: var(--space-smaller);
} }
&:first-child { &:first-child {
@@ -80,7 +80,7 @@
color: $medium-gray; color: $medium-gray;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
font-size: $font-size-small; font-size: var(--font-size-small);
position: relative; position: relative;
top: 1px; top: 1px;
transition: border-color 0.15s $swift-ease-out-function; transition: border-color 0.15s $swift-ease-out-function;
@@ -88,13 +88,13 @@
&.is-active { &.is-active {
a { a {
border-bottom-color: $color-woot; border-bottom-color: var(--color-woot);
color: $color-woot; color: var(--color-woot);
} }
.badge { .badge {
background: $color-extra-light-blue; background: $color-extra-light-blue;
color: $color-woot; color: var(--color-woot);
} }
} }
} }

View File

@@ -5,6 +5,7 @@
:header-title="inboxName" :header-title="inboxName"
> >
<woot-tabs <woot-tabs
class="settings--tabs"
:index="selectedTabIndex" :index="selectedTabIndex"
:border="false" :border="false"
@change="onTabChange" @change="onTabChange"
@@ -669,6 +670,12 @@ export default {
.settings { .settings {
background: $color-white; background: $color-white;
.settings--tabs {
::v-deep .tabs {
padding: 0;
}
}
.settings--content { .settings--content {
div:last-child { div:last-child {
border-bottom: 0; border-bottom: 0;