15821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* Copyright (c) 2012 The Chromium Authors. All rights reserved. 25821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Use of this source code is governed by a BSD-style license that can be 35821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * found in the LICENSE file. 45821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 55821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 65821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* This file defines styles for form controls. The order of rule blocks is 75821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * important as there are some rules with equal specificity that rely on order 85821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * as a tiebreaker. These are marked with OVERRIDE. 95821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* Default state **************************************************************/ 125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles):-webkit-any(button, 145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='button'], 155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='submit']):not(.custom-appearance):not(.link-button), 165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)select, 175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)input[type='checkbox'], 185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)input[type='radio'] { 195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-appearance: none; 205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-user-select: none; 215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-image: -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); 225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border: 1px solid rgba(0, 0, 0, 0.25); 235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border-radius: 2px; 245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) inset 0 1px 2px rgba(255, 255, 255, 0.75); 265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) color: #444; 275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) font: inherit; 285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) margin: 0 1px 0 0; 295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) text-shadow: 0 1px 0 rgb(240, 240, 240); 305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles):-webkit-any(button, 335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='button'], 345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='submit']):not(.custom-appearance):not(.link-button), 355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)select { 365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) min-height: 2em; 375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) min-width: 4em; 385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)<if expr="is_win"> 395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* The following platform-specific rule is necessary to get adjacent 405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * buttons, text inputs, and so forth to align on their borders while also 415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * aligning on the text's baselines. */ 425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) padding-bottom: 1px; 435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)</if> 445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles):-webkit-any(button, 475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='button'], 485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='submit']):not(.custom-appearance):not(.link-button) { 495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-padding-end: 10px; 505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-padding-start: 10px; 515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)select { 545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-appearance: none; 555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-padding-end: 20px; 565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-padding-start: 6px; 575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* OVERRIDE */ 585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-image: url('../images/select.png'), 595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-linear-gradient(#ededed, #ededed 38%, #dedede); 605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-position: right center; 615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-repeat: no-repeat; 625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)html[dir='rtl'] select { 655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-position: center left; 665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)input[type='checkbox'] { 695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) bottom: 2px; 705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) height: 13px; 715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) position: relative; 725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) vertical-align: middle; 735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) width: 13px; 745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)input[type='radio'] { 775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* OVERRIDE */ 785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border-radius: 100%; 795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) bottom: 3px; 805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) height: 15px; 815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) position: relative; 825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) vertical-align: middle; 835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) width: 15px; 845821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* TODO(estade): add more types here? */ 875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)input[type='password'], 885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)input[type='search'], 895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)input[type='text'], 905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)input[type='url'], 915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)input[type='number'], 925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)input:not([type]), 935821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)textarea { 945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border: 1px solid #bfbfbf; 955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border-radius: 2px; 965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) box-sizing: border-box; 975821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) color: #444; 985821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) font: inherit; 995821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) margin: 0; 1005821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* Use min-height to accommodate addditional padding for touch as needed. */ 1015821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) min-height: 2em; 1025821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) padding: 3px; 1035821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)<if expr="is_win or is_macosx"> 1045821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* For better alignment between adjacent buttons and inputs. */ 1055821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) padding-bottom: 4px; 1065821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)</if> 1075821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1085821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1095821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)input[type='search'] { 1105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-appearance: textfield; 1115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* NOTE: Keep a relatively high min-width for this so we don't obscure the end 1125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * of the default text in relatively spacious languages (i.e. German). */ 1135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) min-width: 160px; 1145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* Checked ********************************************************************/ 1175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)input[type='checkbox']:checked::before { 1195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-user-select: none; 1205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-image: url('../images/check.png'); 1215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-size: 100% 100%; 1225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) content: ''; 1235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: block; 1245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) height: 100%; 1255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) width: 100%; 1265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)html[dir='rtl'] input[type='checkbox']:checked::before { 1295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-transform: scaleX(-1); 1305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)input[type='radio']:checked::before { 1335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-color: #666; 1345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border-radius: 100%; 1355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) bottom: 3px; 1365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) content: ''; 1375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: block; 1385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) left: 3px; 1395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) position: absolute; 1405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) right: 3px; 1415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) top: 3px; 1425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* Hover **********************************************************************/ 1455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles):enabled:hover:-webkit-any( 1475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) select, 1485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='checkbox'], 1495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='radio'], 1505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) :-webkit-any( 1515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) button, 1525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='button'], 1535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='submit']):not(.custom-appearance):not(.link-button)) { 1545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-image: -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0); 1555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border-color: rgba(0, 0, 0, 0.3); 1565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), 1575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) inset 0 1px 2px rgba(255, 255, 255, 0.95); 1585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) color: black; 1595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles):enabled:hover:-webkit-any(select) { 1625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* OVERRIDE */ 1635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-image: url('../images/select.png'), 1645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-linear-gradient(#f0f0f0, #f0f0f0 38%, #e0e0e0); 1655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* Active *********************************************************************/ 1685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles):enabled:active:-webkit-any( 1705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) select, 1715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='checkbox'], 1725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='radio'], 1735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) :-webkit-any( 1745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) button, 1755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='button'], 1765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='submit']):not(.custom-appearance):not(.link-button)) { 1775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-image: -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); 1785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) box-shadow: none; 1795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) text-shadow: none; 1805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles):enabled:active:-webkit-any(select) { 1835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* OVERRIDE */ 1845821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-image: url('../images/select.png'), 1855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-linear-gradient(#e7e7e7, #e7e7e7 38%, #d7d7d7); 1865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* Disabled *******************************************************************/ 1895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles):disabled:-webkit-any( 1915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) button, 1925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='button'], 1935821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='submit']):not(.custom-appearance):not(.link-button), 1945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)select:disabled { 1955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-image: -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6); 1965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border-color: rgba(80, 80, 80, 0.2); 1975821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) box-shadow: 0 1px 0 rgba(80, 80, 80, 0.08), 1985821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) inset 0 1px 2px rgba(255, 255, 255, 0.75); 1995821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) color: #aaa; 2005821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 2015821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2025821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)select:disabled { 2035821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* OVERRIDE */ 2045821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-image: url('../images/disabled_select.png'), 2055821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-linear-gradient(#f1f1f1, #f1f1f1 38%, #e6e6e6); 2065821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 2075821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2085821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)input:disabled:-webkit-any([type='checkbox'], 2095821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) [type='radio']) { 2105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) opacity: .75; 2115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 2125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)input:disabled:-webkit-any([type='password'], 2145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) [type='search'], 2155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) [type='text'], 2165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) [type='url'], 2175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) :not([type])) { 2185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) color: #999; 2195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 2205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* Focus **********************************************************************/ 2225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles):enabled:focus:-webkit-any( 2245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) select, 2255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='checkbox'], 2265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='password'], 2275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='radio'], 2285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='search'], 2295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='text'], 2305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='url'], 2315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input:not([type]), 2325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) :-webkit-any( 2335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) button, 2345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='button'], 2355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) input[type='submit']):not(.custom-appearance):not(.link-button)) { 2365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* OVERRIDE */ 2375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-transition: border-color 200ms; 2385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* We use border color because it follows the border radius (unlike outline). 2395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * This is particularly noticeable on mac. */ 2405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border-color: rgb(77, 144, 254); 2415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) outline: none; 2425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 2435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* Link buttons ***************************************************************/ 2455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).link-button { 2475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-box-shadow: none; 2485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background: transparent none; 2495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border: none; 2505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) color: rgb(17, 85, 204); 2515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) cursor: pointer; 2525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* Input elements have -webkit-small-control which can override the body font. 2535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Resolve this by using 'inherit'. */ 2545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) font: inherit; 2555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) margin: 0; 2565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) padding: 0 4px; 2575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 2585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).link-button:hover { 2605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) text-decoration: underline; 2615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 2625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).link-button:active { 2645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) color: rgb(5, 37, 119); 2655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) text-decoration: underline; 2665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 2675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).link-button[disabled] { 2695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) color: #999; 2705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) cursor: default; 2715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) text-decoration: none; 2725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 2735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* Checkbox/radio helpers ****************************************************** 2755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 2765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * .checkbox and .radio classes wrap labels. Checkboxes and radios should use 2775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * these classes with the markup structure: 2785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * 2795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * <div class="checkbox"> 2805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * <label> 2815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * <input type="checkbox"></input> 2825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * <span> 2835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * </label> 2845821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * </div> 2855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) */ 2865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles):-webkit-any(.checkbox, .radio) label { 2885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* Don't expand horizontally: <http://crbug.com/112091>. */ 2895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: -webkit-inline-box; 2905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) padding-bottom: 7px; 2915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) padding-top: 7px; 2925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 2935821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 2945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles):-webkit-any(.checkbox, .radio) label input ~ span { 2955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-margin-start: 0.6em; 2965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* Make sure long spans wrap at the same horizontal position they start. */ 2975821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: block; 2985821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 2995821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 3005821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles):-webkit-any(.checkbox, .radio) label:hover { 3015821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) color: black; 3025821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 3035821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 3045821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)label > input:disabled:-webkit-any([type='checkbox'], [type='radio']) ~ span { 3055821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) color: #999; 3065821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 307