diff --git a/app/assets/stylesheets/_application.scss b/app/assets/stylesheets/_application.scss index b5993d6d9..db8279337 100644 --- a/app/assets/stylesheets/_application.scss +++ b/app/assets/stylesheets/_application.scss @@ -28,7 +28,7 @@ /* login */ @import 'new_styles/login'; @import 'new_styles/registration'; -@import 'new_styles/forms'; +@import 'forms'; /* terms */ @import 'terms'; diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss new file mode 100644 index 000000000..6e72e00c2 --- /dev/null +++ b/app/assets/stylesheets/forms.scss @@ -0,0 +1,96 @@ +// We need these to reset Bootstrap styles +// scss-lint:disable QualifyingElement +input, +input[type=email], +input[type=text], +input[type=password], +textarea { + &, + &:active, + &:invalid, + &:invalid:required, + &:focus, + &:active:focus, + &:invalid:focus, + &:invalid:required:focus { + border-color: $border-grey; + box-shadow: none; + color: $text-dark-grey; + } +} +// scss-lint:enable QualifyingElement + +// Forms described here are only used on the public pages at the moment +.block-form { + margin: 20px auto; + + fieldset { + background-color: $white; + margin-bottom: 1em; + position: relative; // To correctly place the entypo icon + + input { + border-bottom-width: 0; + border-radius: 0; + color: $text-dark-grey; + margin: 0; + } + + .form-control { + font-size: 16px; + height: 40px; + padding: 10px; + padding-left: 40px; + } + + .form-control:first-of-type, + .form-control:first-of-type:focus, + .form-control:first-of-type:invalid, + .form-control:first-of-type:invalid:focus, + .form-control:first-of-type:invalid:required, + .form-control:first-of-type:invalid:required:focus { + border-top-left-radius: 5px; + border-top-right-radius: 5px; + } + + .form-control:last-of-type, + .form-control:last-of-type:focus, + .form-control:last-of-type:invalid, + .form-control:last-of-type:invalid:focus, + .form-control:last-of-type:invalid:required, + .form-control:last-of-type:invalid:required:focus { + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + border-bottom-width: 1px; + } + + [class^="entypo-"], + [class*="entypo-"] { + color: $text-grey; + font-size: 20px; + left: 10px; + line-height: 20px; + position: absolute; + text-align: center; + top: 10px; + width: 20px; + } + + [class^="entypo-"]:nth-of-type(2), + [class*="entypo-"]:nth-of-type(2) { + top: 50px; + } + + [class^="entypo-"]:nth-of-type(3), + [class*="entypo-"]:nth-of-type(3) { + top: 90px; + } + + [class^="entypo-"]:nth-of-type(4), + [class*="entypo-"]:nth-of-type(4) { + top: 130px; + } + + ::placeholder { text-transform: uppercase; } + } +} diff --git a/app/assets/stylesheets/new_styles/_forms.scss b/app/assets/stylesheets/new_styles/_forms.scss deleted file mode 100644 index 881e87b59..000000000 --- a/app/assets/stylesheets/new_styles/_forms.scss +++ /dev/null @@ -1,90 +0,0 @@ -input, -input[type=email], -input[type=text], -input[type=password], -textarea { /* Bootstrap reset */ - &, - &:active, - &:invalid, - &:invalid:required, - &:focus, - &:active:focus, - &:invalid:focus, - &:invalid:required:focus { - border-color: $border-grey; - box-shadow: none; - color : $text-dark-grey; - } -} - -/* autocomplete colors */ -input:-webkit-autofill{ - background-color: #fff !important; - background-image: none !important; -} - -/* Forms described here are only used on the public pages at the moment */ -form.block-form { - margin: 20px auto; - - fieldset { - margin-bottom: 1em; - background-color: #fff; - position: relative; /* To correctly place the entypo icon */ - - input { - color : $text-dark-grey; - margin: 0px; - border-bottom-width: 0px; - border-radius: 0px; - } - - .form-control { - font-size: 16px; - height: 40px; - padding: 10px; - padding-left: 40px; - } - - .form-control:first-of-type { - &, - &:focus, - &:invalid, - &:invalid:focus, - &:invalid:required, - &:invalid:required:focus { - border-top-left-radius: 5px; - border-top-right-radius: 5px; - } - } - - .form-control:last-of-type { - &, - &:focus, - &:invalid, - &:invalid:focus, - &:invalid:required, - &:invalid:required:focus { - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; - border-bottom-width: 1px; - } - } - - [class^="entypo-"], [class*="entypo-"] { - position: absolute; - line-height: 20px; - top: 10px; - left: 10px; - width: 20px; - text-align: center; - color: $text-grey; - font-size: 20px; - &:nth-of-type(2) { top: 50px; } - &:nth-of-type(3) { top: 90px; } - &:nth-of-type(4) { top: 130px; } - } - - ::placeholder { text-transform: uppercase; } - } -}