improve .tab-disabled
This commit is contained in:
parent
4be87529d0
commit
23bedf165e
|
@ -6,7 +6,7 @@
|
|||
color: var(--tab-color);
|
||||
padding-left: var(--tab-padding, 1rem);
|
||||
padding-right: var(--tab-padding, 1rem);
|
||||
&.tab-active {
|
||||
&.tab-active:not(.tab-disabled):not([disabled]) {
|
||||
@apply border-base-content border-opacity-100 text-opacity-100;
|
||||
}
|
||||
&:focus {
|
||||
|
@ -25,7 +25,7 @@
|
|||
&-disabled:hover,
|
||||
&[disabled],
|
||||
&[disabled]:hover {
|
||||
@apply border-opacity-0 bg-neutral bg-opacity-20 text-base-content text-opacity-20;
|
||||
@apply text-base-content text-opacity-20 cursor-not-allowed;
|
||||
}
|
||||
}
|
||||
.tab-bordered {
|
||||
|
@ -42,7 +42,7 @@
|
|||
padding-left: var(--tab-padding, 1rem);
|
||||
padding-right: var(--tab-padding, 1rem);
|
||||
padding-top: var(--tab-border, 1px);
|
||||
&.tab-active {
|
||||
&.tab-active:not(.tab-disabled):not([disabled]) {
|
||||
background-color: var(--tab-bg);
|
||||
border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px);
|
||||
border-left-color: var(--tab-border-color);
|
||||
|
@ -92,7 +92,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.tab-lifted.tab-active + .tab-lifted.tab-active {
|
||||
.tab-lifted.tab-active:not(.tab-disabled):not([disabled]) + .tab-lifted.tab-active:not(.tab-disabled):not([disabled]) {
|
||||
&:before {
|
||||
background: none;
|
||||
}
|
||||
|
@ -102,7 +102,7 @@
|
|||
.tab {
|
||||
@apply rounded-btn;
|
||||
}
|
||||
.tab-active {
|
||||
.tab-active:not(.tab-disabled):not([disabled]) {
|
||||
@apply bg-primary text-primary-content hover:text-primary-content;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -14,11 +14,12 @@ published: true
|
|||
<ClassTable
|
||||
data="{[
|
||||
{ type:'component', class: 'tabs', desc: 'Container of tab items' },
|
||||
{ type:'modifier', class: 'tabs-boxed', desc: 'Adds a box style to tabs container' },
|
||||
{ type:'component', class: 'tab', desc: 'A tab item' },
|
||||
{ type:'modifier', class: 'tab-active', desc: 'For the active tab' },
|
||||
{ type:'modifier', class: 'tab-disabled', desc: 'For a visually disabled tab' },
|
||||
{ type:'modifier', class: 'tab-bordered', desc: 'Adds bottom border to tab item' },
|
||||
{ type:'modifier', class: 'tab-lifted', desc: 'Adds lifted style to tab item' },
|
||||
{ type:'modifier', class: 'tabs-boxed', desc: 'Adds a box style to tabs container' },
|
||||
{ type:'responsive', class: 'tab-xs', desc: 'Shows tab in extra small size' },
|
||||
{ type:'responsive', class: 'tab-sm', desc: 'Shows tab in small size' },
|
||||
{ type:'responsive', class: 'tab-md', desc: 'Shows tab in medium (default) size' },
|
||||
|
|
Loading…
Reference in New Issue