UNPKG

quasar

Version:

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

quasar.dev

quasarframework/quasar

156 lines (126 loc) • 3.4 kB
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
button.q-btn -webkit-appearance button .q-btn display inline-block position relative outline 0 border 0 vertical-align middle padding 0 font-size $button-font-size line-height $button-line-height text-decoration none color inherit background transparent overflow visible font-weight $button-font-weight text-transform uppercase .q-icon, .q-spinner font-size $button-line-height &.disabled opacity .7 !important &__wrapper padding $button-padding min-height 2.572em border-radius inherit width 100% height 100% pointer-events none &:before content '' display block position absolute left 0 right 0 top 0 bottom 0 border-radius inherit box-shadow $button-shadow &--actionable cursor pointer label, input, textarea, button, a pointer-events all &.q-btn--standard .q-btn__wrapper:before // This places the button active raise shadow behind adjacent elements // Active raise shadow will still be visible under adjacent transparent elements, this is ok and coherent with a desired transparency effect. // Visible active raise shadow can be removed by specifying a background color to the button // Visible active raise shadow can be removed by specifying a flat or outline button type transition box-shadow $button-transition &:active, &.q-btn--active .q-btn__wrapper:before box-shadow $button-shadow-active &--no-uppercase text-transform none &--rectangle border-radius $button-border-radius &--outline background transparent !important .q-btn__wrapper:before border 1px solid currentColor &--push border-radius $button-push-border-radius .q-btn__wrapper:before border-bottom 3px solid rgba(0, 0, 0, .15) &.q-btn--actionable transition $button-transition .q-btn__wrapper:before transition top $button-transition, bottom $button-transition, border-bottom-width $button-transition &:active, &.q-btn--active transform translateY(2px) .q-btn__wrapper:before border-bottom-width 0 &--rounded border-radius $button-rounded-border-radius &--round border-radius 50% .q-btn__wrapper padding 0 min-width 3em min-height 3em &--flat, &--outline, &--unelevated .q-btn__wrapper:before box-shadow none &--dense .q-btn__wrapper padding $button-dense-padding min-height 2em &.q-btn--round .q-btn__wrapper padding 0 min-height 2.4em min-width 2.4em .on-left margin-right 6px .on-right margin-left 6px &--fab, &--fab-mini .q-icon font-size 24px width 100% height 100% &--fab .q-btn__wrapper height 56px width 56px &--fab-mini .q-btn__wrapper height 40px width 40px // workaround for alignment/sizing change when showing loader &__content transition opacity .3s z-index 0 &--hidden opacity 0 pointer-events none &__progress border-radius inherit overflow hidden &-indicator transition transform .3s transform-origin top left background rgba(255, 255, 255, .25) &--dark .q-btn__progress-indicator background rgba(0, 0, 0, .2)