| 1 | .q-tabs
|
| 2 | flex-direction column
|
| 3 |
|
| 4 | .q-tabs-scroller
|
| 5 | overflow hidden
|
| 6 | color $tabs-color
|
| 7 |
|
| 8 | .q-tab-pane
|
| 9 | padding $tabs-pane-padding
|
| 10 | border $tabs-pane-border
|
| 11 |
|
| 12 | .q-tabs-no-pane-border .q-tab-pane
|
| 13 | border 0
|
| 14 |
|
| 15 | .q-tabs-panes:empty
|
| 16 | display none
|
| 17 |
|
| 18 | .q-tab-icon, .q-tab-label
|
| 19 | opacity $tabs-unselected-opacity
|
| 20 |
|
| 21 | .q-tab
|
| 22 | cursor pointer
|
| 23 | transition color .3s, background .3s
|
| 24 | white-space nowrap
|
| 25 | user-select none
|
| 26 | padding $tabs-padding
|
| 27 | min-height $tabs-min-height
|
| 28 | text-transform $tabs-text-transform
|
| 29 |
|
| 30 | > .q-icon, .q-tab-label
|
| 31 | transition transform .2s
|
| 32 | > .q-icon + .q-tab-label
|
| 33 | margin-top 7px
|
| 34 | .q-tab-label
|
| 35 | text-align center
|
| 36 |
|
| 37 | &.icon-and-label:not(.hide-icon):not(.hide-label)
|
| 38 | padding $tabs-padding-with-icon
|
| 39 | min-height $tabs-min-height-with-icon
|
| 40 |
|
| 41 | .q-tab-icon
|
| 42 | font-size $tabs-icon-font-size
|
| 43 |
|
| 44 | .q-chip
|
| 45 | top 5px
|
| 46 | right 0
|
| 47 | left initial
|
| 48 | color white
|
| 49 | background alpha($dot-color, .75)
|
| 50 |
|
| 51 | &.active
|
| 52 | > .q-icon, .q-tab-label
|
| 53 | transform scale(1.1)
|
| 54 | .q-tab-icon, .q-tab-label
|
| 55 | opacity 1
|
| 56 | &:active
|
| 57 | background rgba(255, 255, 255, .3)
|
| 58 |
|
| 59 | @media (max-width $breakpoint-sm-max)
|
| 60 | .q-tab
|
| 61 | &.hide-icon .q-tab-icon,
|
| 62 | &.hide-label .q-tab-label
|
| 63 | display none !important
|
| 64 | &.hide-icon .q-tab-label
|
| 65 | margin-top 0
|
| 66 |
|
| 67 | @media (max-width $breakpoint-md-max)
|
| 68 | .q-tabs-head:not(.scrollable)
|
| 69 | .q-tabs-scroller, .q-tab
|
| 70 | flex 1 1 auto
|
| 71 |
|
| 72 | @media (min-width $breakpoint-lg-min)
|
| 73 | .q-tab, .q-tab.icon-and-label:not(.hide-icon):not(.hide-label)
|
| 74 | padding-left $tabs-big-screen-horiz-padding
|
| 75 | padding-right $tabs-big-screen-horiz-padding
|
| 76 | .q-tabs-head:not(.scrollable)
|
| 77 | padding-left $tabs-big-screen-side-padding
|
| 78 | padding-right $tabs-big-screen-side-padding
|
| 79 |
|
| 80 | .q-tabs-head
|
| 81 | min-height $tabs-min-height
|
| 82 | overflow hidden
|
| 83 | background $tabs-background
|
| 84 | font-size $tabs-font-size
|
| 85 | font-weight $tabs-font-weight
|
| 86 | transition color .18s ease-in, box-shadow .18s ease-in
|
| 87 | position relative
|
| 88 |
|
| 89 | &:not(.scrollable)
|
| 90 | .q-tabs-left-scroll, .q-tabs-right-scroll
|
| 91 | display none !important
|
| 92 |
|
| 93 | .q-tabs-left-scroll, .q-tabs-right-scroll
|
| 94 | position absolute
|
| 95 | height 100%
|
| 96 | cursor pointer
|
| 97 | color white
|
| 98 | .q-icon
|
| 99 | text-shadow 0 0 10px black
|
| 100 | font-size (1.2 * $tabs-icon-font-size)
|
| 101 | visibility hidden
|
| 102 | &:hover .q-icon
|
| 103 | visibility visible
|
| 104 | &.disabled
|
| 105 | display none
|
| 106 |
|
| 107 | .q-tabs-left-scroll
|
| 108 | left 0
|
| 109 | background linear-gradient(to left, transparent, rgba(255, 255, 255, .5))
|
| 110 | .q-tabs-right-scroll
|
| 111 | right 0
|
| 112 | background linear-gradient(to right, transparent, rgba(255, 255, 255, .5))
|
| 113 |
|
| 114 | .q-tabs-align-justify
|
| 115 | .q-tabs-scroller, .q-tab
|
| 116 | flex 1 1 auto
|
| 117 | .q-tabs-align-center
|
| 118 | justify-content center
|
| 119 | .q-tabs-align-right
|
| 120 | justify-content flex-end
|
| 121 |
|
| 122 | .q-tabs-two-lines .q-tab
|
| 123 | white-space normal
|
| 124 | .q-tab-label
|
| 125 | overflow hidden
|
| 126 | display -webkit-box
|
| 127 | -webkit-box-orient vertical
|
| 128 | -webkit-line-clamp 2
|
| 129 |
|
| 130 | .q-tabs-position-bottom .q-tabs-panes
|
| 131 | order -1
|
| 132 |
|
| 133 | .q-tabs-inverted
|
| 134 | .q-tab
|
| 135 | color $tabs-inverted-color
|
| 136 | &.active
|
| 137 | color $tabs-background
|
| 138 | &:active
|
| 139 | background rgba(0, 0, 0, .1)
|
| 140 |
|
| 141 | .q-tabs-scroller
|
| 142 | color $tabs-background
|
| 143 |
|
| 144 | .q-tabs-left-scroll
|
| 145 | background linear-gradient(to left, transparent, rgba(0, 0, 0, .1))
|
| 146 | .q-tabs-right-scroll
|
| 147 | background linear-gradient(to right, transparent, rgba(0, 0, 0, .1))
|
| 148 |
|
| 149 | .q-tabs-head
|
| 150 | background transparent
|
| 151 |
|
| 152 | &.q-tabs-position-top
|
| 153 | .q-tabs-panes
|
| 154 | border-top $tabs-pane-border
|
| 155 | .q-tab-pane
|
| 156 | border-top 0
|
| 157 |
|
| 158 | &.q-tabs-position-bottom
|
| 159 | .q-tabs-panes
|
| 160 | border-bottom $tabs-pane-border
|
| 161 | .q-tab-pane
|
| 162 | border-bottom 0
|
| 163 |
|
| 164 | body.mobile .q-tabs-scroller
|
| 165 | overflow-y hidden
|
| 166 | overflow-x auto
|
| 167 | will-change scroll-position
|
| 168 | -webkit-overflow-scrolling touch
|