improve .tab-disabled

This commit is contained in:
Pouya Saadeghi 2023-02-22 21:43:05 +03:00
parent 4be87529d0
commit 23bedf165e
2 changed files with 7 additions and 6 deletions

View File

@ -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;
}
}

View File

@ -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' },