Skip to content

Commit

Permalink
fix(comp: tabs): error style when nesting tabs
Browse files Browse the repository at this point in the history 
fix #913
  • Loading branch information
@liuzaijiang
liuzaijiang committed May 19, 2022
1 parent c20fe45 commit aea6e3d
Show file tree
Hide file tree
Showing 3 changed files with 125 additions and 102 deletions.
25 changes: 10 additions & 15 deletions packages/components/modal/demo/Async.vue
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,22 @@
<template>
<IxSpace>
<IxButton @click="visible = !visible">Change visible</IxButton>
<IxButton mode="primary" @click="openModal">Open modal</IxButton>
</IxSpace>
<IxModal v-model:visible="visible" title="This is title" type="confirm" @ok="onOk">
<p>Some contents...</p>
<IxButton mode="primary" @click="showModal">Open Modal with async logic</IxButton>
<IxModal v-model:visible="visible" title="标题" type="confirm" :onOk="onOk">
<p>内容文本...</p>
</IxModal>
</template>

<script setup lang="ts">
import { h, ref } from 'vue'
import { useModal } from '@idux/components/modal'
import { ref } from 'vue'
const visible = ref(false)
const onOk = () =>
new Promise(resolve => {
const isClose = Math.random() > 0.5
setTimeout(() => resolve(isClose), 1000)
setTimeout(() => {
resolve(true)
}, 1000)
})
const { confirm } = useModal()
const content = h('p', 'Some contents...')
const openModal = () => confirm({ title: 'This is title', content, onOk })
const showModal = () => {
visible.value = true
}
</script>
4 changes: 4 additions & 0 deletions packages/components/modal/style/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,10 @@
min-height: @modal-footer-min-height;
padding: @modal-footer-padding;

.@{button-prefix} {
vertical-align: bottom;
}

.@{button-prefix} + .@{button-prefix} {
margin-left: @modal-footer-button-margin-left;
}
Expand Down
198 changes: 111 additions & 87 deletions packages/components/tabs/style/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,104 +170,107 @@
}

&-card {
.@{tabs-prefix}-nav {
z-index: @zindex-l1-1;

&-wrapper {
font-size: @tabs-card-nav-font-size;
}

&-tab {
margin-right: 4px;
border-radius: @tabs-border-radius @tabs-border-radius 0 0;
border-bottom: 1px solid @tabs-nav-border-color;

&:last-child {
margin-right: 0;
}
&-selected:not(.@{tabs-prefix}-nav-tab-disabled) {
border: 1px solid @tabs-nav-border-color;
border-bottom-color: @tabs-card-nav-tab-selected-background-color;
background-color: @tabs-card-nav-tab-selected-background-color;

&::after {
content: ' ';
position: absolute;
top: -1px;
left: -1px;
right: -1px;
height: 2px;
background-color: @tabs-selected-color;
> .@{tabs-prefix}-nav-wrapper {
font-size: @tabs-card-nav-font-size;
> .@{tabs-prefix}-nav {
z-index: @zindex-l1-1;
> .@{tabs-prefix}-nav-tab {
margin-right: 4px;
border-radius: @tabs-border-radius @tabs-border-radius 0 0;
}
}
border-bottom: 1px solid @tabs-nav-border-color;

&-disabled {
&::after {
background-color: @tabs-disabled-color;
}
&:last-child {
margin-right: 0;
}
&-selected:not(.@{tabs-prefix}-nav-tab-disabled) {
border: 1px solid @tabs-nav-border-color;
border-bottom-color: @tabs-card-nav-tab-selected-background-color;
background-color: @tabs-card-nav-tab-selected-background-color;

&::after {
content: ' ';
position: absolute;
top: -1px;
left: -1px;
right: -1px;
height: 2px;
background-color: @tabs-selected-color;
border-radius: @tabs-border-radius @tabs-border-radius 0 0;
}
}

&-disabled {
&::after {
background-color: @tabs-disabled-color;
}
}
}
}
}
}

&-line {
.@{tabs-prefix}-nav {
&-bar {
position: absolute;
background-color: @tabs-nav-bar-color;
transition: left @transition-duration-base @ease-in-out, top @transition-duration-base @ease-in-out;
bottom: 0;
height: @tabs-nav-bar-height;
border-radius: @tabs-border-radius @tabs-border-radius 0 0;
> .@{tabs-prefix}-nav-wrapper {
> .@{tabs-prefix}-nav {
&-bar {
position: absolute;
background-color: @tabs-nav-bar-color;
transition: left @transition-duration-base @ease-in-out, top @transition-duration-base @ease-in-out;
bottom: 0;
height: @tabs-nav-bar-height;
border-radius: @tabs-border-radius @tabs-border-radius 0 0;

&-disabled {
background-color: @tabs-disabled-color;
&-disabled {
background-color: @tabs-disabled-color;
}
}
}

&-disabled {
.@{tabs-prefix}-nav-tab-label {
color: @tabs-disabled-color;
&-disabled {
.@{tabs-prefix}-nav-tab-label {
color: @tabs-disabled-color;
}
}
}

&-pre,
&-next {
border-bottom: none;
&-pre,
&-next {
border-bottom: none;
}
}
}
&.@{tabs-prefix} {
&-nav-start,
&-nav-end {
.@{tabs-prefix} {
> .@{tabs-prefix} {

&-nav-wrapper {
flex-wrap: wrap;
&.@{tabs-prefix}-nav-wrapper-has-scroll {
padding: @tabs-nav-pre-next-width 0;
}
}
> .@{tabs-prefix}-nav {
transform: translateY(0);
flex-direction: column;

&-nav {
transform: translateY(0);
flex-direction: column;

&-bar {
width: @tabs-nav-bar-height;
}
&-bar {
width: @tabs-nav-bar-height;
}

&-border {
height: 100%;
width: 1px;
}
&-border {
height: 100%;
width: 1px;
}

&-tab {
min-height: @tabs-nav-tab-height;
&-tab {
min-height: @tabs-nav-tab-height;
}
}
}


&-pane {
height: 100%;
&-pane-wrapper {
> .@{tabs-prefix}-pane {
height: 100%;
}
}
}
}
Expand All @@ -277,8 +280,8 @@
flex-direction: row;
}

.@{tabs-prefix} {
&-nav {
> .@{tabs-prefix}-nav-wrapper {
> .@{tabs-prefix}-nav {
&-bar {
right: 0;
border-radius: @tabs-border-radius 0 0 @tabs-border-radius;
Expand All @@ -291,20 +294,23 @@
&-tab {
min-height: @tabs-nav-tab-height;
}
}

&-pane-wrapper {

}
}

> .@{tabs-prefix}-pane-wrapper {
padding: 0 0 0 @tabs-pane-padding;
}
}
}

&-nav-end {
&.@{tabs-prefix} {
flex-direction: row-reverse;
}

.@{tabs-prefix} {
> .@{tabs-prefix}-nav-wrapper {
> .@{tabs-prefix} {
&-nav {
&-bar {
left: 0;
Expand All @@ -324,18 +330,22 @@
}
}

&-pane-wrapper {

}
}

> .@{tabs-prefix}-pane-wrapper {
padding: 0 @tabs-pane-padding 0 0;
}
}

}

&-nav-bottom {
&.@{tabs-prefix} {
flex-direction: column-reverse;
}

.@{tabs-prefix} {
> .@{tabs-prefix} {
&-pane-wrapper {
padding: 0 0 @tabs-pane-padding 0;
}
Expand All @@ -345,9 +355,13 @@
}

&-segment {
.@{tabs-prefix}-nav {

&-tab {
> .@{tabs-prefix}-nav-wrapper {
> .@{tabs-prefix}-nav {

> .@{tabs-prefix} {

&-nav-tab {
border: 1px solid @tabs-nav-border-color;
height: @tabs-segment-nav-height;

Expand Down Expand Up @@ -389,6 +403,7 @@
background-color: @tabs-segment-nav-disabled-background-color;
}
}
}

&-pre,
&-next {
Expand All @@ -397,18 +412,27 @@
border-bottom: none;
}
}

}


&.@{tabs-prefix}-nav-primary {
.@{tabs-prefix}-nav-tab {
&-selected:not(.@{tabs-prefix}-nav-tab-disabled) {
background-color: @tabs-segment-nav-primary-active-background-color;

.@{tabs-prefix}-nav-tab-label {
color: @tabs-segment-nav-primary-active-text-color;
}
&:hover {
> .@{tabs-prefix}-nav-wrapper > {

.@{tabs-prefix}-nav >
.@{tabs-prefix}-nav-tab {
&-selected:not(.@{tabs-prefix}-nav-tab-disabled) {
background-color: @tabs-segment-nav-primary-active-background-color;

.@{tabs-prefix}-nav-tab-label {
color: @tabs-segment-nav-primary-active-text-color;
}
&:hover {
.@{tabs-prefix}-nav-tab-label {
color: @tabs-segment-nav-primary-active-text-color;
}
}
}
}
}
Expand Down

0 comments on commit aea6e3d

Please sign in to comment.