#master { form label { display: block; margin-bottom: 7px; @include rem('font-size',$font__small-size); font-weight: bold; text-transform: uppercase; } legend { display: block; @include rem('font-size',$font__small-size); font-weight: bold; text-transform: uppercase; color: $color__gray; } fieldset { margin-bottom: 1.5em; } form label .input { margin-top: 7px; } form .forgetmenot label { display: inline-block; margin-bottom: 0; @include rem('font-size',$font__main-size); font-weight: normal; text-transform: none; } form { > p, > div { @include rem('margin-bottom',20px); } table { tr { padding: 0; margin: 0; &:last-child { td { padding-bottom: 0; } } } td { padding: 0; margin: 0; @include rem('padding-bottom',20px); } } } .sq-input, .wc-stripe-elements-field, input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea { border: 2px solid $color__form-border; -webkit-border-radius: $input__radius; -moz-border-radius: $input__radius; border-radius: $input__radius; outline: none; background: #fff; @include rem('font-size',$font__main-size); font-weight: normal; text-transform: none; box-shadow: none; } .option-white-text { input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea { border-color: #ffffff; } } select, .select2-container .select2-selection--single, .select2-choice { height: 53px; padding: 12px 46px 12px 12px; line-height: 1.3; // max line height before safari starts to offset border: 2px solid $color__form-border; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; background-color: #fff; @include background-2x('img/select-caret','png'); background-size: 15px 9px; background-repeat: no-repeat; background-position: 94% center; background-position: calc(100% - 20px) center; @include rem('font-size',$font__main-size); font-weight: normal; text-transform: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; box-shadow: none; } .select2-selection__rendered { color: $color__text; padding: 0; } .select2-container .select2-selection--single, .select2-container .select2-choice { padding: 12px 46px 12px 12px; border: 2px solid $color__form-border; border-radius: 0; } .select2-container .select2-selection--single .select2-selection__arrow, .select2-container .select2-choice .select2-arrow { display: none; } .select2-container .select2-choice > .select2-chosen { } .select2-search { margin-top: 0; padding: 0; } .select2-dropdown { border: 0; border-bottom: 2px solid $color__border; border-radius: 0; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.08); } .select2-results__option { padding-left: 12px; padding-right: 12px; } .select2-search__field { border-width: 0 !important; } .select2-results { border-top: 2px solid $color__border; } .select-w-caret { display: inline-block; position: relative; width: 100%; cursor: pointer; } .select-w-caret select { height: 42px; padding: 5px 56px 5px 16px; border: 2px solid $color__form-border; outline: none; background: #fff; } .select-w-caret .caret { display: inline-block; position: absolute; top: 0; right: 0; width: 43px; height: 42px; border: 2px solid $color__form-border; @include rem('font-size',$font__large-size); line-height: 37px; text-align: center; pointer-events: none; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="range"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="time"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="color"]:focus, textarea:focus { } .sq-input, .wc-stripe-elements-field, input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"] { height: 53px; padding: 12px; width: 100%; } textarea { width: 100%; padding: 11px 12px; } select { width: 100%; } input[type="radio"], input[type="checkbox"] { display: inline-block; clear: none; outline: 0; line-height: 0; text-align: center; vertical-align: middle; cursor: pointer; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; } input[type="radio"] { width: 15px; min-width: 15px; height: 15px; border: 2px solid $color__form-border; } input[type="checkbox"] { width: 16px; min-width: 16px; height: 16px; border: 2px solid $color__form-border; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } label > input[type="checkbox"] + span, input[type="checkbox"] + span, input[type="checkbox"] + label { margin-left: 10px; } label input[type="checkbox"] { margin-right: 3px; } input[type="radio"]:focus, input[type="checkbox"]:focus { outline: 0; } input[type="radio"] { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } input[type="radio"]:checked:before, input[type="checkbox"]:checked:before { font-size: 16px; font-family:"Genericons-Neue"; display:inline-block; vertical-align:top; line-height:1; font-weight:normal; font-style:normal; speak:none; text-decoration:inherit; text-transform:none; text-rendering:auto; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } input[type="radio"]:checked:before { @include rem('font-size',$font__main-size); line-height: 15px; } input[type="checkbox"]:checked:before { margin-left: -6px; @include rem('font-size',$font__super-size); line-height: 14px; } input[type="checkbox"]:checked:before { width: 20px; content: "\f418"; } input[type="radio"]:checked:before { width: 7px; height: 7px; margin-top: 2px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; background: #000; text-indent: -9999px; content: ""; } input[type="radio"] + span, input[type="checkbox"] + span, input[type="radio"] + label, input[type="checkbox"] + label { display: inline-block; margin-bottom: 0; margin-left: 10px; vertical-align: middle; letter-spacing: 0; @include rem('font-size',$font__small-size); font-weight: bold; text-transform: uppercase; cursor: pointer; } } ::-webkit-input-placeholder { color: $color__text-light; } :-moz-placeholder { color: $color__text-light; } ::-moz-placeholder { color: $color__text-light; } :-ms-input-placeholder { color: $color__text-light; }