/* * Amazium (http://www.amazium.co.uk) * Copyright 2010 - 2013, Mike Ballan * Licensed under MIT (https://github.com/OwlyStuff/Amazium/blob/master/LICENSE) */ /*********************************************** Forms with labels ***********************************************/ form { margin:0 0 16px; padding:0; display:inline-block; width:100%; } label { margin:0; padding:0 16px 0 0; float:left; text-align:right; width:30%; height:40px; font-family:sans-serif; font-size:14px; line-height:40px; color:#666; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } label.checkbox, label.radio { text-align:left; width:auto; } form span { margin:10px 0; padding:0; display:block; overflow:hidden; float:left; } fieldset { margin:0 0 20px 0; padding:0; display:block; position:relative; top:0; left:0; } fieldset small { margin:0 0 0 30%; padding:3px 8px; font-family:sans-serif; font-size:11px; line-height:20px; color:#FFF; border-color:#E74C3C; background-color:#E74C3C; width:70%; float:right; display:inline-block; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } input, textarea, select, textarea { margin:0; padding:0 10px; display:block; border-radius:0; width:70%; height:40px; font-family:sans-serif; font-size:14px; line-height:40px; color:#555; border:solid 1px #BBB; overflow:hidden; position:relative; top:0; left:0; outline:0 none; box-sizing:border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-appearance:none; } textarea { padding:0 0 0 10px; resize:none; min-height:100px; overflow-y:auto; } input[type="search"] { -webkit-padding-start:0; } /*********************************************** Styled Select fields ***********************************************/ .select { margin:0; padding:0; position:relative; display:inline-block; width:70%; right:0; top:0; height:40px; background:#FFF; overflow:hidden; border:solid 1px #BBB; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } .select:after { margin:0; padding:0; content:'\25be'; color:#999; line-height:35px; text-align:center; right:0; top:0; background:#FFF; width:38px; height:38px; position:absolute; pointer-events:none; } .select select { padding:10px; padding-top:11px; -webkit-padding-before:0; -webkit-padding-start:6px; width:100%; height:40px; font-family:sans-serif; font-size:14px; line-height:40px; float:left; color:#999; border:none; display:block; -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; } .select option { padding:10px; border-bottom:1px solid #F2F2F2; } .select optgroup { padding:0 10px; color:#000; background-color:#FFF; } .select optgroup[label] { padding-top:10px; background-color:#FFF; font-style:normal; } .select optgroup option { border-bottom:1px solid #F2F2F2; font-family:sans-serif; font-size:12px; line-height:40px; } .select optgroup option:first-child { margin:10px 0 0 0; border-top:1px solid #F2F2F2; } /*********************************************** Styled Checkboxes ***********************************************/ .checkbox { padding:8px 0 0; width:70%; float:right; } .checkbox > span { margin:0 0 10px; padding:0 20px 0 0; float:left; position:relative; top:0; left:0; width:auto; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } .checkbox > span label { padding:2px 0 0 32px; width:100%; height:auto; font-family:sans-serif; font-size:14px; line-height:20px; text-align:left; cursor:pointer; float:none; display:block; position:relative; left:0; top:0; } input[type="checkbox"], input[type="checkbox"]:not(:focus):invalid { width:22px; height:22px; position:absolute; top:0; left:0; } input[type="checkbox"] + label:before { margin:0; content:'\2718'; position:absolute; left:0; top:0; background-color:#FFF; border:1px solid #CCC; cursor:pointer; display:inline-block; height:20px; width:20px; text-align:center; font-family:sans-serif; font-size:13px; line-height:22px; color:#CCC; transition:all .3s linear 0s; -moz-transition:all .3s linear 0s; -webkit-transition:all .3s linear 0s; -o-transition:all .3s linear 0s; } input[type="checkbox"]:checked + label:before { background-color:#000; content:'\2714'; border-color:#000; color:#FFF; transition:all .6s linear 0s; -moz-transition:all .6s linear 0s; -webkit-transition:all .6s linear 0s; -o-transition:all .6s linear 0s; } input[type="checkbox"] + label + small { margin:0; padding:0 0 0 32px; background:none; border:none; color:#E74C3C; width:auto; float:none; } /*********************************************** Styled Radio button ***********************************************/ .radio { padding:8px 0 0; width:70%; float:right; } .radio > span { margin:0 0 10px; padding:0 20px 0 0; float:left; position:relative; top:0; left:0; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } .radio > span label { margin:0; padding:2px 0 0 32px; width:100%; height:auto; font-family:sans-serif; font-size:14px; line-height:20px; text-align:left; cursor:pointer; display:block; position:relative; left:0; top:0; } input[type="radio"], input[type="radio"]:not(:focus):invalid { width:22px; height:22px; border:none; position:absolute; top:0; left:0; } input[type="radio"] + label:before { margin:0; content:''; position:absolute; left:0; top:0; background-color:#FFF; border:1px solid #CCC; cursor:pointer; display:inline-block; height:20px; width:20px; text-align:center; font-family:sans-serif; font-size:13px; line-height:22px; color:#CCC; border-radius:50%; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; transition:all .3s linear 0s; -moz-transition:all .3s linear 0s; -webkit-transition:all .3s linear 0s; -o-transition:all .3s linear 0s; } input[type="radio"]:checked + label:before { border:7px solid #000; transition:all .3s linear 0s; -moz-transition:all .3s linear 0s; -webkit-transition:all .3s linear 0s; -o-transition:all .3s linear 0s; } input[type="radio"] + label + small { margin:0; padding:0 0 0 32px; background:none; border:none; color:#E74C3C; width:auto; float:none; } /*********************************************** Validation ***********************************************/ input:not(:focus):invalid { -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; } input:focus:invalid, .error input, select:focus:invalid, input[type="checkbox"]:focus:invalid, input[type="checkbox"]:focus:invalid + label:before { color:#E74C3C; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; } input:focus:invalid::-webkit-input-placeholder { color:#E74C3C; opacity:1; } input:focus:invalid:-moz-placeholder { color:#E74C3C; opacity:1; } input:focus:invalid::-moz-placeholder { color:#E74C3C; opacity:1; } input:focus:invalid:-ms-input-placeholder { color:#E74C3C; opacity:1; } .error input + small { margin:0; padding:3px 8px; font-family:sans-serif; font-size:11px; line-height:20px; color:#FFF; border-color:#E74C3C; background-color:#E74C3C; width:70%; float:right; display:inline-block; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } /*********************************************** Buttons ***********************************************/ input[type="button"], input[type="submit"], input[type="reset"] { margin:6px 6px 6px 0; padding:0 10px; display:inline-block; height:40px; font-family:sans-serif; font-size:14px; line-height:40px; font-weight:normal; color:#fff; border:1px solid #000; float:left; width:auto; background-color:#000; cursor:pointer; -webkit-appearance:none; } input.first { margin-left:30%; } input[type="button"] { color:#FFF; border-color:#000; background-color:#000; transition:all .3s linear 0s; -moz-transition:all .3s linear 0s; -webkit-transition:all .3s linear 0s; -o-transition:all .3s linear 0s; } input[type="submit"] { color:#FFF; border-color:#18acb3; background-color:#18acb3; transition:all .3s linear 0s; -moz-transition:all .3s linear 0s; -webkit-transition:all .3s linear 0s; -o-transition:all .3s linear 0s; } input[type="reset"] { color:#999; border-color:#CCC; background-color:#FFF; transition:all .3s linear 0s; -moz-transition:all .3s linear 0s; -webkit-transition:all .3s linear 0s; -o-transition:all .3s linear 0s; } input:hover[type="button"] { border-color:#CCC; background-color:#FFF; color:#333; } input:hover[type="submit"] { border-color:#1990b3; background-color:#1990b3; color:#FFF; } input:hover[type="reset"] { border-color:#000; background-color:#000; color:#FFF; } /*********************************************** Forms without labels ***********************************************/ .hide-lables label { display:none; } .hide-lables .checkbox label, .hide-lables .radio label { display:block; } .hide-lables input, .hide-lables textarea, .hide-lables select, .hide-lables .select, .hide-lables fieldset.error input + small { width:100%; } .hide-lables small { margin:0; width:100%; } .hide-lables .radio, .hide-lables .checkbox { width:100%; float:right; } input[type="checkbox"], input[type="checkbox"]:not(:focus):invalid, input[type="radio"], input[type="radio"]:not(:focus):invalid { width:20px; height:20px; } /*********************************************** Validation ***********************************************/ .hide-lables input:not(:focus):invalid + small { width:100%; } /*********************************************** Buttons ***********************************************/ .hide-lables input[type="button"], .hide-lables input[type="submit"], .hide-lables input[type="reset"] { margin:6px 6px 6px 0; width:auto; } /*********************************************** Placeholder ***********************************************/ ::-webkit-input-placeholder { color:#333; opacity:.5; } :-moz-placeholder { color:#333; opacity:.5; } ::-moz-placeholder { color:#333; opacity:.5; } :-ms-input-placeholder { color:#333; opacity:.5; } :focus::-webkit-input-placeholder { color:#333; opacity:1; } :focus:-moz-placeholder { color:#333; opacity:1; } :focus::-moz-placeholder { color:#333; opacity:1; } :focus:-ms-input-placeholder { color:#333; opacity:1; } input:focus { color:#000; border-color:#999; outline:none; } textarea:focus { color:#000; border-color:#999; outline:none; } select:focus { color:#000; border-color:#999; outline:none; } /*********************************************** NYSMNYD ***********************************************/ .nysmnyd-labels fieldset label { display:block; position:absolute; left:1px; top:0; height:auto; width:auto; z-index:1; font-family:sans-serif; font-size:12px; line-height:40px; color:#999; transition:all .1s ease-out 0s; -moz-transition:all .1s ease-out 0s; -webkit-transition:all .1s ease-out 0s; -o-transition:all .1s ease-out 0s; } .nysmnyd-labels fieldset.show-all label { top:-27px; transition:all .1s ease-out 0s; -moz-transition:all .1s ease-out 0s; -webkit-transition:all .1s ease-out 0s; -o-transition:all .1s ease-out 0s; } .nysmnyd-labels input, .nysmnyd-labels .select, .nysmnyd-labels textarea { z-index:2; } .nysmnyd-labels input, .nysmnyd-labels textarea, .nysmnyd-labels select, .nysmnyd-labels .select, .nysmnyd-labels fieldset.error input + small, .nysmnyd-labels fieldset input:not(:focus):invalid + small, .nysmnyd-labels small { width:100%; } .nysmnyd-labels .radio, .nysmnyd-labels .checkbox { width:100%; float:right; }