quasar/src/components/tab/tabs.mat.styl at v0.15 · hipertracker/quasar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
.q-tabs
  flex-direction column

.q-tabs-scroller
  overflow hidden

.q-tab-pane
  padding $tabs-pane-padding
  border $tabs-pane-border

.q-tabs-no-pane-border .q-tab-pane
  border 0

.q-tabs-panes:empty
  display none

.q-tabs-normal
  .q-tab-icon, .q-tab-label
    opacity $tabs-unselected-opacity

.q-tab
  cursor pointer
  transition color .3s, background .3s
  white-space nowrap
  user-select none
  padding $tabs-padding
  min-height $tabs-min-height
  text-transform $tabs-text-transform

  > .q-icon + .q-tab-label
    margin-top 4px

  .q-chip
    top 5px
    right 5px
    left auto
    min-height auto
    color white
    background alpha($dot-color, .75)

  &.active
    .q-tab-icon, .q-tab-label
      opacity 1

.q-tab-label
  text-align center

.q-tab-icon
  font-size $tabs-icon-font-size

@media (max-width $breakpoint-sm-max)
  .q-tab
    &.hide-icon .q-tab-icon,
    &.hide-label .q-tab-label
      display none !important
    &.hide-icon .q-tab-label
        margin-top 0

@media (max-width $breakpoint-md-max)
  .q-tabs-head:not(.scrollable)
    .q-tabs-scroller, .q-tab
      flex 1 1 auto

@media (min-width $breakpoint-lg-min)
  .q-tab
    padding-left $tabs-big-screen-horiz-padding
    padding-right $tabs-big-screen-horiz-padding
  .q-tabs-head:not(.scrollable)
    padding-left $tabs-big-screen-side-padding
    padding-right $tabs-big-screen-side-padding

.q-tabs-head
  min-height $tabs-min-height
  overflow hidden
  font-size $tabs-font-size
  font-weight $tabs-font-weight
  transition color .18s ease-in, box-shadow .18s ease-in
  position relative

  &:not(.scrollable)
    .q-tabs-left-scroll, .q-tabs-right-scroll
      display none !important

.q-tabs-left-scroll, .q-tabs-right-scroll
  position absolute
  height 100%
  cursor pointer
  color white
  top 0
  .q-icon
    text-shadow 0 0 10px black
    font-size (1.2 * $tabs-icon-font-size)
    visibility hidden
  &.disabled
    display none
.q-tabs:hover
  .q-tabs-left-scroll, .q-tabs-right-scroll
    .q-icon
      visibility visible

.q-tabs-left-scroll
  left 0 /* rtl:ignore */
.q-tabs-right-scroll
  right 0 /* rtl:ignore */

.q-tabs-align-justify
  .q-tabs-scroller, .q-tab
    flex 1 1 auto
.q-tabs-align-center
  justify-content center
.q-tabs-align-right
  justify-content flex-end

.q-tabs-bar
  border $tabs-border-width solid currentColor
  border-width 0
  position absolute
  height 0
  left 0
  right 0
.q-tabs-global-bar
  width 1px
  transform scale(0)
  transform-origin left center
  transition transform
  transition-duration .15s
  transition-timing-function cubic-bezier(.4, .0, 1, 1)
  &.contract
    transition-duration .18s
    transition-timing-function cubic-bezier(.0, .0, .2, 1)

.q-tabs-global-bar-container.highlight > .q-tabs-global-bar
  display none

.q-tabs-two-lines .q-tab
  white-space normal
  .q-tab-label
    overflow hidden
    display -webkit-box
    -webkit-box-orient vertical
    -webkit-line-clamp 2

.q-tabs-position-top
  .q-tabs-bar
    bottom 0
    border-bottom-width $tabs-border-width

.q-tabs-position-bottom
  .q-tabs-bar
    top 0
    border-top-width $tabs-border-width
  .q-tabs-panes
    order -1

.q-tabs-inverted
  .q-tabs-head
    background white

  &.q-tabs-position-top
    .q-tabs-panes
      border-top $tabs-pane-border
    .q-tab-pane
      border-top 0

  &.q-tabs-position-bottom
    .q-tabs-panes
      border-bottom $tabs-pane-border
    .q-tab-pane
      border-bottom 0

body.mobile .q-tabs-scroller
  overflow-y hidden
  overflow-x auto
  will-change scroll-position
  -webkit-overflow-scrolling touch