1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798 |
- @import '../../style/themes/index';
- @import '../../style/mixins/index';
- @tab-prefix-cls: ~'@{ant-prefix}-tabs';
- .@{tab-prefix-cls}-card {
- > .@{tab-prefix-cls}-nav,
- > div > .@{tab-prefix-cls}-nav {
- .@{tab-prefix-cls}-tab {
- margin: 0;
- padding: @tabs-card-horizontal-padding;
- background: @tabs-card-head-background;
- border: @border-width-base @border-style-base @border-color-split;
- transition: all @animation-duration-slow @ease-in-out;
- &-active {
- color: @tabs-card-active-color;
- background: @component-background;
- }
- }
- .@{tab-prefix-cls}-ink-bar {
- visibility: hidden;
- }
- }
- // ========================== Top & Bottom ==========================
- &.@{tab-prefix-cls}-top,
- &.@{tab-prefix-cls}-bottom {
- > .@{tab-prefix-cls}-nav,
- > div > .@{tab-prefix-cls}-nav {
- .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
- margin-left: @tabs-card-gutter;
- }
- }
- }
- &.@{tab-prefix-cls}-top {
- > .@{tab-prefix-cls}-nav,
- > div > .@{tab-prefix-cls}-nav {
- .@{tab-prefix-cls}-tab {
- border-radius: @border-radius-base @border-radius-base 0 0;
- &-active {
- border-bottom-color: @component-background;
- }
- }
- }
- }
- &.@{tab-prefix-cls}-bottom {
- > .@{tab-prefix-cls}-nav,
- > div > .@{tab-prefix-cls}-nav {
- .@{tab-prefix-cls}-tab {
- border-radius: 0 0 @border-radius-base @border-radius-base;
- &-active {
- border-top-color: @component-background;
- }
- }
- }
- }
- // ========================== Left & Right ==========================
- &.@{tab-prefix-cls}-left,
- &.@{tab-prefix-cls}-right {
- > .@{tab-prefix-cls}-nav,
- > div > .@{tab-prefix-cls}-nav {
- .@{tab-prefix-cls}-tab + .@{tab-prefix-cls}-tab {
- margin-top: @tabs-card-gutter;
- }
- }
- }
- &.@{tab-prefix-cls}-left {
- > .@{tab-prefix-cls}-nav,
- > div > .@{tab-prefix-cls}-nav {
- .@{tab-prefix-cls}-tab {
- border-radius: @border-radius-base 0 0 @border-radius-base;
- &-active {
- border-right-color: @component-background;
- }
- }
- }
- }
- &.@{tab-prefix-cls}-right {
- > .@{tab-prefix-cls}-nav,
- > div > .@{tab-prefix-cls}-nav {
- .@{tab-prefix-cls}-tab {
- border-radius: 0 @border-radius-base @border-radius-base 0;
- &-active {
- border-left-color: @component-background;
- }
- }
- }
- }
- }
|