ducky/web

Paddy 2015-05-03

0:99a43a6d1d30 Go to Latest

ducky/web/src/styles/base/_forms.scss

First commit. Setup project structure, start getting our registration flow set up. At this point, it runs successfully locally, assuming the auth server is running locally at slightly.local:8080. So, uh... on my computer. Also, we currently have the Register button (on the register page) disabled always, because we still need to hook up form validation and set the this.state.valid property. If that property is set to true, then the button is enabled again. Still to do: validation, logging in. Then what we have written works, minus some configuration stuff that still needs to be figured out.

Download raw file
View source Diff to previous Annotate
History
paddy@0 1 fieldset {
paddy@0 2 background-color: lighten($base-border-color, 10%);
paddy@0 3 border: $base-border;
paddy@0 4 margin: 0 0 $small-spacing;
paddy@0 5 padding: $base-spacing;
paddy@0 6 }
paddy@0 7
paddy@0 8 input,
paddy@0 9 label,
paddy@0 10 select {
paddy@0 11 display: block;
paddy@0 12 font-family: $base-font-family;
paddy@0 13 font-size: $base-font-size;
paddy@0 14 }
paddy@0 15
paddy@0 16 label {
paddy@0 17 font-weight: 600;
paddy@0 18 margin-bottom: $small-spacing / 2;
paddy@0 19
paddy@0 20 &.required::after {
paddy@0 21 content: "*";
paddy@0 22 }
paddy@0 23
paddy@0 24 abbr {
paddy@0 25 display: none;
paddy@0 26 }
paddy@0 27 }
paddy@0 28
paddy@0 29 #{$all-text-inputs},
paddy@0 30 select[multiple=multiple],
paddy@0 31 textarea {
paddy@0 32 background-color: $base-background-color;
paddy@0 33 border: $base-border;
paddy@0 34 border-radius: $base-border-radius;
paddy@0 35 box-shadow: $form-box-shadow;
paddy@0 36 box-sizing: border-box;
paddy@0 37 font-family: $base-font-family;
paddy@0 38 font-size: $base-font-size;
paddy@0 39 margin-bottom: $base-spacing / 2;
paddy@0 40 padding: $base-spacing / 3;
paddy@0 41 transition: border-color;
paddy@0 42 width: 100%;
paddy@0 43
paddy@0 44 &:hover {
paddy@0 45 border-color: darken($base-border-color, 10%);
paddy@0 46 }
paddy@0 47
paddy@0 48 &:focus {
paddy@0 49 border-color: $action-color;
paddy@0 50 box-shadow: $form-box-shadow-focus;
paddy@0 51 outline: none;
paddy@0 52 }
paddy@0 53 }
paddy@0 54
paddy@0 55 textarea {
paddy@0 56 resize: vertical;
paddy@0 57 }
paddy@0 58
paddy@0 59 input[type="search"] {
paddy@0 60 @include appearance(none);
paddy@0 61 }
paddy@0 62
paddy@0 63 input[type="checkbox"],
paddy@0 64 input[type="radio"] {
paddy@0 65 display: inline;
paddy@0 66 margin-right: $small-spacing / 2;
paddy@0 67 }
paddy@0 68
paddy@0 69 input[type="file"] {
paddy@0 70 padding-bottom: $small-spacing;
paddy@0 71 width: 100%;
paddy@0 72 }
paddy@0 73
paddy@0 74 select {
paddy@0 75 margin-bottom: $base-spacing;
paddy@0 76 max-width: 100%;
paddy@0 77 width: auto;
paddy@0 78 }