Add support for disabled tabs

This commit is contained in:
Diggory Blake 2023-01-15 00:47:16 +00:00
parent 92e232b006
commit bd0a409db5
No known key found for this signature in database
GPG Key ID: E6BDFA83146ABD40

View File

@ -50,15 +50,21 @@ $tabs-toggle-link-active-color: $link-invert !default
margin-bottom: -#{$tabs-border-bottom-width}
padding: $tabs-link-padding
vertical-align: top
&:hover
border-bottom-color: $tabs-link-hover-border-bottom-color
color: $tabs-link-hover-color
li
display: block
&.is-active
a
border-bottom-color: $tabs-link-active-border-bottom-color
color: $tabs-link-active-color
&.is-disabled
a
cursor: not-allowed
opacity: 0.5
&:not(.is-disabled)
a:hover
border-bottom-color: $tabs-link-hover-border-bottom-color
color: $tabs-link-hover-color
ul
align-items: center
border-bottom-color: $tabs-border-bottom-color
@ -98,15 +104,16 @@ $tabs-toggle-link-active-color: $link-invert !default
border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
+rtl
border-radius: 0 0 $tabs-boxed-link-radius $tabs-boxed-link-radius
&:hover
background-color: $tabs-boxed-link-hover-background-color
border-bottom-color: $tabs-boxed-link-hover-border-bottom-color
li
&.is-active
a
background-color: $tabs-boxed-link-active-background-color
border-color: $tabs-boxed-link-active-border-color
border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important
&:not(.is-disabled)
a:hover
background-color: $tabs-boxed-link-hover-background-color
border-bottom-color: $tabs-boxed-link-hover-border-bottom-color
&.is-fullwidth
li
flex-grow: 1
@ -118,10 +125,6 @@ $tabs-toggle-link-active-color: $link-invert !default
border-width: $tabs-toggle-link-border-width
margin-bottom: 0
position: relative
&:hover
background-color: $tabs-toggle-link-hover-background-color
border-color: $tabs-toggle-link-hover-border-color
z-index: 2
li
& + li
+ltr-property("margin", -#{$tabs-toggle-link-border-width}, false)
@ -145,6 +148,11 @@ $tabs-toggle-link-active-color: $link-invert !default
border-color: $tabs-toggle-link-active-border-color
color: $tabs-toggle-link-active-color
z-index: 1
&:not(.is-disabled)
a:hover
background-color: $tabs-toggle-link-hover-background-color
border-color: $tabs-toggle-link-hover-border-color
z-index: 2
ul
border-bottom: none
&.is-toggle-rounded