chore: Woot tabs for RTL(#6518)
This commit is contained in:
@@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user