/** * Form classes * * @author splitfire - http://splitfire.fr * @version 1.0 * */ /* Input decoration ----------------------------------*/ input[type="text"], input[type="password"], textarea, input[type="file"], input[type="email"], input[type="url"], input[type="number"], input[type="tel"], input[type="date"], input[type="datetime"] { display: inline-block; background-color: #f1f1f1; border: 1px solid #acacac; outline: none; padding: 8px 12px; font-size: 13px; color: #222; box-sizing : border-box; } input[type="text"]:focus, input[type="password"]:focus, textarea:focus, input[type="file"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="date"]:focus, input[type="datetime"]:focus { //border-color: rgba(53, 122, 232, 0.7); border-color:rgba(#0099CC,0.7); background-color: white; //box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(53, 122, 232, 0.7); box-shadow: 0 1px 1px rgba(0,0,0,0.075) inset, 0 0 8px rgba(#0099CC,0.7); outline: 0 none; } /* decoration formulaire __________________________*/ .required { color: #DD1919; } .error-form { color: #DD1919; margin-top: 0; } /* Formulaire inline __________________________*/ .form-line { line-height: normal; & label { display: block; margin-bottom: 10px; clear: both; } & .input { margin-bottom:15px; } & .button { margin: 20px 0; } } /* Formulaire horizontal __________________________*/ .form-horizontal { margin: 0 0 20px 0; .group { margin-bottom: 15px; &:after { clear: both; } & > label { //cursor: pointer; display: block; float: left; width:160px; padding-top: 5px; text-align: right; @include mq($to:phone){float: none; text-align: left} } } & .input { margin-left:200px; @include mq($to:phone){margin-left:0} & input, select, .chzn-container, .btn { margin-bottom:10px; } & p.information { margin-top: -5px; } } & .button { margin:20px 0 0 200px; @include mq($to:phone){margin-left:0} } } /* Input link ----------------------------------*/ .link-input { line-height: 32px; } /* Input size ----------------------------------*/ .sf-input-x-small { width: 50px; } .sf-input-small { width: 100px; } .sf-input-medium { width: 200px; } .sf-input-x-medium { width: 330px; } .sf-input-large { width: 350px; } .sf-input-x-large { width: 400px; } .sf-input-auto { width:100%; } @include mq($to:phone) { [class*="sf-input"]:not(.chosen) { width:100%; } } /* ------------------------------------*/ .sf-input-inline { display: inline-block; vertical-align: middle; }