Lines Matching refs:button

19 .button-bar {
27 .button-bar__item {
33 .button-bar__item > input {
44 .button-bar__button {
48 .button-bar__item:disabled {
108 .button,
109 .topcoat-button,
110 .topcoat-button--quiet,
111 .topcoat-button--large,
112 .topcoat-button--large--quiet,
113 .topcoat-button--cta,
114 .topcoat-button--large--cta,
115 .topcoat-button-bar__button,
116 .topcoat-button-bar__button--large {
140 .button--quiet {
146 .button--disabled,
147 .topcoat-button:disabled,
148 .topcoat-button--quiet:disabled,
149 .topcoat-button--large:disabled,
150 .topcoat-button--large--quiet:disabled,
151 .topcoat-button--cta:disabled,
152 .topcoat-button--large--cta:disabled,
153 .topcoat-button-bar__button:disabled,
154 .topcoat-button-bar__button--large:disabled {
160 .topcoat-button,
161 .topcoat-button--quiet,
162 .topcoat-button--large,
163 .topcoat-button--large--quiet,
164 .topcoat-button--cta,
165 .topcoat-button--large--cta,
166 .topcoat-button-bar__button,
167 .topcoat-button-bar__button--large {
181 .topcoat-button:hover,
182 .topcoat-button--quiet:hover,
183 .topcoat-button--large:hover,
184 .topcoat-button--large--quiet:hover,
185 .topcoat-button-bar__button:hover,
186 .topcoat-button-bar__button--large:hover {
190 .topcoat-button:active,
191 .topcoat-button--large:active,
192 .topcoat-button-bar__button:active,
193 .topcoat-button-bar__button--large:active,
194 :checked + .topcoat-button-bar__button {
199 .topcoat-button:focus,
200 .topcoat-button--quiet:focus,
201 .topcoat-button--large:focus,
202 .topcoat-button--large--quiet:focus,
203 .topcoat-button--cta:focus,
204 .topcoat-button--large--cta:focus,
205 .topcoat-button-bar__button:focus,
206 .topcoat-button-bar__button--large:focus {
212 .topcoat-button--quiet {
218 .topcoat-button--quiet:hover,
219 .topcoat-button--large--quiet:hover {
225 .topcoat-button--quiet:active,
226 .topcoat-button--large--quiet:active {
234 .topcoat-button--large,
235 .topcoat-button--large--quiet,
236 .topcoat-button-bar__button--large {
243 .topcoat-button--large--quiet {
249 .topcoat-button--cta,
250 .topcoat-button--large--cta {
259 .topcoat-button--cta:hover,
260 .topcoat-button--large--cta:hover {
264 .topcoat-button--cta:active,
265 .topcoat-button--large--cta:active {
270 .topcoat-button--large--cta {
277 .button-bar,
278 .topcoat-button-bar {
286 .button-bar__item,
287 .topcoat-button-bar__item {
293 .button-bar__item > input,
294 .topcoat-button-bar__item > input {
305 .button-bar__button {
309 .button-bar__item:disabled {
321     <div class="topcoat-button-bar">
322       <div class="topcoat-button-bar__item">
323         <button class="topcoat-button-bar__button">One</button>
325       <div class="topcoat-button-bar__item">
326         <button class="topcoat-button-bar__button">Two</button>
328       <div class="topcoat-button-bar__item">
329         <button class="topcoat-button-bar__button">Three</button>
333     mobile button bar: http://codepen.io/Topcoat/pen/kdKyg
339     - button
344 .topcoat-button-bar > .topcoat-button-bar__item:first-child {
349 .topcoat-button-bar > .topcoat-button-bar__item:last-child {
354 .topcoat-button-bar__item:first-child > .topcoat-button-bar__button,
355 .topcoat-button-bar__item:first-child > .topcoat-button-bar__button--large {
359 .topcoat-button-bar__item:last-child > .topcoat-button-bar__button,
360 .topcoat-button-bar__item:last-child > .topcoat-button-bar__button--large {
364 .topcoat-button-bar__button {
368 .topcoat-button-bar__button:focus,
369 .topcoat-button-bar__button--large:focus {
375   description: A button bar, only larger
379     <div class="topcoat-button-bar">
380       <div class="topcoat-button-bar__item">
381         <button class="topcoat-button-bar__button--large">One</button>
383       <div class="topcoat-button-bar__item">
384         <button class="topcoat-button-bar__button--large">Two</button>
386       <div class="topcoat-button-bar__item">
387         <button class="topcoat-button-bar__button--large">Three</button>
395     - button
401 .topcoat-button-bar__button--large {
423 .button {
447 .button--quiet {
453 .button--disabled {
513 .button,
514 .topcoat-button,
515 .topcoat-button--quiet,
516 .topcoat-button--large,
517 .topcoat-button--large--quiet,
518 .topcoat-button--cta,
519 .topcoat-button--large--cta {
543 .button--quiet {
549 .button--disabled,
550 .topcoat-button:disabled,
551 .topcoat-button--quiet:disabled,
552 .topcoat-button--large:disabled,
553 .topcoat-button--large--quiet:disabled,
554 .topcoat-button--cta:disabled,
555 .topcoat-button--large--cta:disabled {
563   description: A simple button
570     <button class="topcoat-button">Button</button>
571     <button class="topcoat-button" disabled>Button</button>
573     mobile button: http://codepen.io/Topcoat/pen/DpKtf
578     - button
581 .topcoat-button,
582 .topcoat-button--quiet,
583 .topcoat-button--large,
584 .topcoat-button--large--quiet,
585 .topcoat-button--cta,
586 .topcoat-button--large--cta {
600 .topcoat-button:hover,
601 .topcoat-button--quiet:hover,
602 .topcoat-button--large:hover,
603 .topcoat-button--large--quiet:hover {
607 .topcoat-button:active,
608 .topcoat-button--large:active {
613 .topcoat-button:focus,
614 .topcoat-button--quiet:focus,
615 .topcoat-button--large:focus,
616 .topcoat-button--large--quiet:focus,
617 .topcoat-button--cta:focus,
618 .topcoat-button--large--cta:focus {
626   description: A simple, yet quiet button
628     :active: Quiet button active state
633     <button class="topcoat-button--quiet">Button</button>
634     <button class="topcoat-button--quiet" disabled>Button</button>
639     - button
643 .topcoat-button--quiet {
649 .topcoat-button--quiet:hover,
650 .topcoat-button--large--quiet:hover {
656 .topcoat-button--quiet:active,
657 .topcoat-button--large--quiet:active {
667   description: A big ol button
674     <button class="topcoat-button--large" >Button</button>
675     <button class="topcoat-button--large" disabled>Button</button>
680     - button
684 .topcoat-button--large,
685 .topcoat-button--large--quiet {
694   description: A large, yet quiet button
701     <button class="topcoat-button--large--quiet" >Button</button>
702     <button class="topcoat-button--large--quiet" disabled>Button</button>
707     - button
712 .topcoat-button--large--quiet {
727     <button class="topcoat-button--cta" >Button</button>
728     <button class="topcoat-button--cta" disabled>Button</button>
733     - button
737 .topcoat-button--cta,
738 .topcoat-button--large--cta {
747 .topcoat-button--cta:hover,
748 .topcoat-button--large--cta:hover {
752 .topcoat-button--cta:active,
753 .topcoat-button--large--cta:active {
767     <button class="topcoat-button--large--cta" >Button</button>
768     <button class="topcoat-button--large--cta" disabled>Button</button>
773     - button
778 .topcoat-button--large--cta {
1092 .button,
1093 .topcoat-icon-button,
1094 .topcoat-icon-button--quiet,
1095 .topcoat-icon-button--large,
1096 .topcoat-icon-button--large--quiet {
1120 .button--quiet {
1126 .button--disabled,
1127 .topcoat-icon-button:disabled,
1128 .topcoat-icon-button--quiet:disabled,
1129 .topcoat-icon-button--large:disabled,
1130 .topcoat-icon-button--large--quiet:disabled {
1138   description: Like button, but it has an icon.
1145     <button class="topcoat-icon-button">
1147     </button>
1148     <button class="topcoat-icon-button" disabled>
1150     </button>
1155     - button
1159 .topcoat-icon-button,
1160 .topcoat-icon-button--quiet,
1161 .topcoat-icon-button--large,
1162 .topcoat-icon-button--large--quiet {
1175 .topcoat-icon-button:hover,
1176 .topcoat-icon-button--quiet:hover,
1177 .topcoat-icon-button--large:hover,
1178 .topcoat-icon-button--large--quiet:hover {
1182 .topcoat-icon-button:active {
1187 .topcoat-icon-button:focus,
1188 .topcoat-icon-button--quiet:focus,
1189 .topcoat-icon-button--quiet:hover:focus,
1190 .topcoat-icon-button--large:focus,
1191 .topcoat-icon-button--large--quiet:focus,
1192 .topcoat-icon-button--large--quiet:hover:focus {
1200   description: Like quiet button, but it has an icon.
1207     <button class="topcoat-icon-button--quiet">
1209     </button>
1210     <button class="topcoat-icon-button--quiet" disabled>
1212     </button>
1217     - button
1222 .topcoat-icon-button--quiet {
1228 .topcoat-icon-button--quiet:hover,
1229 .topcoat-icon-button--large--quiet:hover {
1235 .topcoat-icon-button--quiet:active,
1236 .topcoat-icon-button--large--quiet:active {
1246   description: Like large button, but it has an icon.
1253     <button class="topcoat-icon-button--large">
1255     </button>
1256     <button class="topcoat-icon-button--large" disabled>
1258     </button>
1263     - button
1268 .topcoat-icon-button--large,
1269 .topcoat-icon-button--large--quiet {
1275 .topcoat-icon-button--large:active {
1282   description: Like large button, but it has an icon and this one is quiet.
1288     <button class="topcoat-icon-button--large--quiet">
1290     </button>
1291     <button class="topcoat-icon-button--large--quiet" disabled>
1293     </button>
1298     - button
1304 .topcoat-icon-button--large--quiet {
1983 .radio-button {
2008 .radio-button:before,
2009 .radio-button:after {
2015 .radio-button:after {
2023 .radio-button:before {
2029 .radio-button--disabled {
2082 .radio-button,
2098 .topcoat-radio-button {
2109 .radio-button:before,
2110 .radio-button:after,
2118 .radio-button:after,
2127 .radio-button:before,
2134 .radio-button--disabled,
2143   description: A button that can play music, but usually just plays ads.
2147     <label class="topcoat-radio-button">
2154     <label class="topcoat-radio-button">
2162     <label class="topcoat-radio-button">
2170     <label class="topcoat-radio-button">
2197 .topcoat-radio-button {
2473 input[type="search"]::-webkit-search-cancel-button {
2536 input[type="search"]::-webkit-search-cancel-button {
2591 .topcoat-search-input::-webkit-search-cancel-button,
2593 .topcoat-search-input--large::-webkit-search-cancel-button,
2979 .button,
3004 .button--quiet {
3010 .button--disabled,
3017 .button-bar,
3026 .button-bar__item,
3033 .button-bar__item > input,
3045 .button-bar__button {
3049 .button-bar__item:disabled {
3064         <button class="topcoat-tab-bar__button">One</button>
3068         <button class="topcoat-tab-bar__button">Two</button>
3072         <button class="topcoat-tab-bar__button">Three</button>