diff options
Diffstat (limited to 'debian/missing-sources/wyrm/sass/wyrm_core/_form.sass')
| -rw-r--r-- | debian/missing-sources/wyrm/sass/wyrm_core/_form.sass | 534 |
1 files changed, 534 insertions, 0 deletions
diff --git a/debian/missing-sources/wyrm/sass/wyrm_core/_form.sass b/debian/missing-sources/wyrm/sass/wyrm_core/_form.sass new file mode 100644 index 0000000..3b4a81c --- /dev/null +++ b/debian/missing-sources/wyrm/sass/wyrm_core/_form.sass @@ -0,0 +1,534 @@ +// Form structure +// +// Files located in `wyrm_core/_form.sass`. +// +// Forms follow the following basic struture. `.wy-control-group` +// wraps the label and a `.wy-control`, which itself warps your actual +// form elements. You can decide either to stack or align your forms. +// A help message can be provided in a couple different styles, but +// the most common is `.wy-form-message` as shown below. +// +// Markup: +// <form class="{$modifiers}"> +// <legend>A simple form</legend> +// <fieldset> +// <div class="wy-control-group"> +// <label>Field name</label> +// <div class="wy-control"> +// <input type="text" placeholder="placeholder"/> +// </div> +// <span class="wy-form-message">Help text goes here!</span> +// </div> +// <input type="submit" class="btn" /> +// </fieldset> +// </form> +// +// Styleguide 6 + + +.wy-form-stacked + select + display: block +.wy-form-aligned + input, textarea, select, .wy-help-inline, label + display: inline-block + *display: inline + *zoom: 1 + vertical-align: middle + +.wy-form-aligned + .wy-control-group + > label + display: inline-block + vertical-align: middle + width: 10em + margin: $base-line-height / 4 $base-line-height / 2 0 0 + float: left + .wy-control + float: left + label + display: block + select + margin-top: $base-line-height / 4 + +fieldset + border: 0 + margin: 0 + padding: 0 +legend + display: block + width: 100% + border: 0 + padding: 0 + white-space: normal + margin-bottom: $base-line-height + font-size: 150% + *margin-left: -7px +label + display: block + margin: 0 0 em(5px) 0 + color: $gray-dark + font-size: 90% + +input, select, textarea + font-size: 100% + margin: 0 + vertical-align: baseline + *vertical-align: middle + + +.wy-control-group + margin-bottom: $base-line-height + +outer-container + +clearfix + +.wy-control-group.wy-control-group-required > label:after + content: " *" + color: $red + +// For doing multi part, aligned form blocks within a single label + +.wy-control-group + .wy-form-full, .wy-form-halves, .wy-form-thirds + padding-bottom: $base-line-height / 2 + select + width: 100% + input + &[type="text"], &[type="password"], &[type="email"], &[type="url"], &[type="date"], &[type="month"], &[type="time"], &[type="datetime"], &[type="datetime-local"], &[type="week"], &[type="number"], &[type="search"], &[type="tel"], &[type="color"] + width: 100% +.wy-control-group .wy-form-full + +span-columns(12) + +omega-type + +.wy-control-group .wy-form-halves + +span-columns(6) + +omega-type(2n) + +.wy-control-group .wy-form-thirds + +span-columns(4) + +omega-type(3n) + +// Sometimes you just output text in a form, not an actual input +.wy-control-group.wy-control-group-no-input .wy-control + margin: $base-line-height / 4 0 0 0 + font-size: 90% + +.wy-control-no-input + display: inline-block + margin: $base-line-height / 4 0 0 0 + font-size: 90% + + +// Fluid inputs when needed + +.wy-control-group.fluid-input + input + &[type="text"], &[type="password"], &[type="email"], &[type="url"], &[type="date"], &[type="month"], &[type="time"], &[type="datetime"], &[type="datetime-local"], &[type="week"], &[type="number"], &[type="search"], &[type="tel"], &[type="color"] + width: 100% + +// Inline help for forms + +.wy-form-message-inline + display: inline-block + padding-left: 0.3em + color: #666 + vertical-align: middle + font-size: 90% + +.wy-form-message + display: block + color: $gray-light + font-size: 70% + margin-top: em(5px) + font-style: italic + p + font-size: inherit + font-style: italic + margin-bottom: $base-line-height / 4 + p:last-child + margin-bottom: 0 + +// Generic form elements +// +// Here's the output of common form inputs. The sass itself covers more types +// like email, password, url, date...etc, but I've left them out for brevity. +// +// Markup: +// <div class="wy-control-group"> +// <label>Text field</label> +// <div class="wy-control"> +// <input type="text" placeholder="placeholder"/> +// </div> +// </div> +// <div class="wy-control-group"> +// <label>Textarea</label> +// <div class="wy-control"> +// <textarea></textarea> +// </div> +// </div> +// <div class="wy-control-group"> +// <label>Dropdown</label> +// <div class="wy-control"> +// <select> +// <option></option> +// <option>Option 1</option> +// <option>Option 2</option> +// </select> +// </div> +// </div> +// <div class="wy-control-group"> +// <label>Radio</label> +// <div class="wy-control"> +// <label class="wy-radio"> +// <input type="radio"> +// Option 1 +// </label> +// <label class="wy-radio"> +// <input type="radio"> +// Option 2 +// </label> +// </div> +// </div> +// <div class="wy-control-group"> +// <label>Checkbox</label> +// <div class="wy-control"> +// <label class="wy-checkbox"> +// <input type="checkbox"> +// Option 1 +// </label> +// <label class="wy-checkbox"> +// <input type="checkbox"> +// Option 2 +// </label> +// </div> +// </div> +// +// Styleguide 6.1 + + +input + line-height: normal + +input + &[type="button"], &[type="reset"], &[type="submit"] + -webkit-appearance: button + cursor: pointer + font-family: $base-font-family + *overflow: visible + &[type="text"], &[type="password"], &[type="email"], &[type="url"], &[type="date"], &[type="month"], &[type="time"], &[type="datetime"], &[type="datetime-local"], &[type="week"], &[type="number"], &[type="search"], &[type="tel"], &[type="color"] + -webkit-appearance: none + padding: $base-line-height / 4 + display: inline-block + border: 1px solid $input-border-color + font-size: 80% + font-family: $base-font-family + box-shadow: inset 0 1px 3px $input-shadow-color + border-radius: 0 + +transition(border .3s linear) + +font-smooth + &[type="datetime-local"] + padding: em(5.5px) em(10px) + &[disabled] + cursor: default + &[type="checkbox"], &[type="radio"] + +box-sizing(border-box) + padding: 0 + margin-right: em(5px) + *height: 13px + *width: 13px + &[type="search"] + +box-sizing(border-box) + &::-webkit-search-cancel-button, &::-webkit-search-decoration + -webkit-appearance: none + &[type="text"]:focus, &[type="password"]:focus, &[type="email"]:focus, &[type="url"]:focus, &[type="date"]:focus, &[type="month"]:focus, &[type="time"]:focus, &[type="datetime"]:focus, &[type="datetime-local"]:focus, &[type="week"]:focus, &[type="number"]:focus, &[type="search"]:focus, &[type="tel"]:focus, &[type="color"]:focus + outline: 0 + outline: thin dotted \9 + border-color: $input-focus-color + &.no-focus:focus + border-color: $input-border-color !important + &[type="file"]:focus, &[type="radio"]:focus, &[type="checkbox"]:focus + outline: thin dotted $gray-dark + outline: 1px auto #129FEA + &[type="text"][disabled], &[type="password"][disabled], &[type="email"][disabled], &[type="url"][disabled], &[type="date"][disabled], &[type="month"][disabled], &[type="time"][disabled], &[type="datetime"][disabled], &[type="datetime-local"][disabled], &[type="week"][disabled], &[type="number"][disabled], &[type="search"][disabled], &[type="tel"][disabled], &[type="color"][disabled] + cursor: not-allowed + background-color: darken($input-background-color, 2%) + +input:focus:invalid, textarea:focus:invalid, select:focus:invalid + color: $red + border: 1px solid $red +input:focus:invalid:focus, textarea:focus:invalid:focus, select:focus:invalid:focus + border-color: $red +input + &[type="file"]:focus:invalid:focus, &[type="radio"]:focus:invalid:focus, &[type="checkbox"]:focus:invalid:focus + outline-color: $red + +input.wy-input-large + padding: $base-line-height / 2 + font-size: 100% + + +// Textareas and selects + +textarea + overflow: auto + vertical-align: top + width: 100% + font-family: $base-font-family +select, textarea + padding: em(8px) em(10px) + display: inline-block + border: 1px solid $input-border-color + font-size: 80% + box-shadow: inset 0 1px 3px $input-shadow-color + +transition(border .3s linear) + +font-smooth +select + border: 1px solid $input-border-color + background-color: $input-background-color + &[multiple] + height: auto +select:focus, textarea:focus + outline: 0 +select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] + cursor: not-allowed + background-color: darken($input-background-color, 2%) + +// Checkboxes and radios + +input + &[type="radio"][disabled], &[type="checkbox"][disabled] + cursor: not-allowed +.wy-checkbox, .wy-radio + margin: $base-line-height / 4 0 + // Important because we don't want it overwritten in the case of errors + color: $text-color + display: block + input + vertical-align: baseline + +// Messages and input context + +.wy-form-message-inline + display: inline-block + *display: inline + *zoom: 1 + vertical-align: middle + +// Prefix and suffix for inputs +// +// Wyrm allows some basic prefix and suffic styling for text inputs. +// +// Markup: +// <div class="wy-control-group"> +// <label>Prefix</label> +// <div class="wy-control wy-input-prefix"> +// <span class="wy-input-context">@</span><input type="text" placeholder="placeholder"/> +// </div> +// </div> +// <div class="wy-control-group"> +// <label>Suffix</label> +// <div class="wy-control wy-input-suffix"> +// <input type="text" placeholder="placeholder"/><span class="wy-input-context">@gmail.com</span> +// </div> +// </div> +// +// Styleguide 6.2 + + +.wy-input-prefix, .wy-input-suffix + white-space: nowrap + padding: $base-line-height / 4 + .wy-input-context + line-height: 27px // Hack for the moment. + padding: 0 8px + display: inline-block + font-size: 80% + background-color: $table-stripe-color + border: solid 1px $input-border-color + color: $gray-light + +.wy-input-suffix .wy-input-context + border-left: 0 +.wy-input-prefix .wy-input-context + border-right: 0 + +// Switches +// +// True / false, boolean style switches. +// +// Markup: +// <div class="wy-switch {$modifiers}"><span>Here is some really long text.</span></div> +// +// .active - active state. +// .disabled - disabled. +// +// Styleguide 6.3 + +.wy-switch + position: relative + display: block + height: $base-line-height + margin-top: $base-line-height / 2 + cursor: pointer + &:before + position: absolute + content: "" + display: block + left: 0 + top: 0 + width: $base-line-height * 1.5 + height: $base-line-height / 2 + border-radius: 4px + background: $gray-lighter + +transition(all .2s ease-in-out) + &:after + position: absolute + content: "" + display: block + width: 18px + height: 18px + border-radius: 4px + background: $gray-light + left: -3px + top: -3px + +transition(all .2s ease-in-out) + span + position: absolute + left: $base-line-height * 2 + display: block + font-size: 12px + color: $gray-lighter + line-height: 1 +.wy-switch.active + &:before + background: darken($green, 10%) + &:after + left: $base-line-height + background: $green + +.wy-switch.disabled + cursor: not-allowed + opacity: .8 + + +// Error handling and inline validation +// +// Wyrm has both block and inline level validation depending upon your needs. You can also +// pair these with the global alerts mentioned in the alerts section of this styleguide. +// +// Markup: +// <div class="wy-control-group wy-control-group-error"> +// <label>After the fact error</label> +// <div class="wy-control"> +// <input type="text" placeholder="placeholder"/> +// <span class="wy-form-message">Error text goes here.</span> +// </div> +// </div> +// <div class="wy-control-group"> +// <label>Inline success</label> +// <div class="wy-control wy-inline-validate wy-inline-validate-info"> +// <input type="text" placeholder="placeholder"/> +// <span class="wy-input-context"> You may want to do this.</span> +// </div> +// </div> +// <div class="wy-control-group"> +// <label>Inline success</label> +// <div class="wy-control wy-inline-validate wy-inline-validate-success"> +// <input type="text" placeholder="placeholder"/> +// <span class="wy-input-context"> Woot, way to go.</span> +// </div> +// </div> +// <div class="wy-control-group"> +// <label>Inline error</label> +// <div class="wy-control wy-inline-validate wy-inline-validate-warning"> +// <input type="text" placeholder="placeholder"/> +// <span class="wy-input-context"> Hold on cowboy.</span> +// </div> +// </div> +// <div class="wy-control-group"> +// <label>Inline error</label> +// <div class="wy-control wy-inline-validate wy-inline-validate-danger"> +// <input type="text" placeholder="placeholder"/> +// <span class="wy-input-context"> Damnit, you messed up.</span> +// </div> +// </div> +// +// Styleguide 6.4 + +.wy-control-group.wy-control-group-error + .wy-form-message, > label + color: $red + input + &[type="text"], &[type="password"], &[type="email"], &[type="url"], &[type="date"], &[type="month"], &[type="time"], &[type="datetime"], &[type="datetime-local"], &[type="week"], &[type="number"], &[type="search"], &[type="tel"], &[type="color"] + border: solid 1px $red + textarea + border: solid 1px $red + +.wy-inline-validate + white-space: nowrap + .wy-input-context + padding: em(8px) em(10px) + display: inline-block + font-size: 80% +.wy-inline-validate.wy-inline-validate-success .wy-input-context + color: $green + @extend %icon + @extend .#{$icon-prefix}-#{$icon-ok} +.wy-inline-validate.wy-inline-validate-danger .wy-input-context + color: $red + @extend %icon + @extend .#{$icon-prefix}-#{$icon-remove} +.wy-inline-validate.wy-inline-validate-warning .wy-input-context + color: $orange + @extend %icon + @extend .#{$icon-prefix}-#{$icon-alert} +.wy-inline-validate.wy-inline-validate-info .wy-input-context + color: $blue + @extend %icon + @extend .#{$icon-prefix}-#{$icon-alert} + +// Some generic rotation classes for reading user images + +.rotate-90 + @include transform(rotate(90deg)) +.rotate-180 + @include transform(rotate(180deg)) +.rotate-270 + @include transform(rotate(270deg)) +.mirror + @include transform(scaleX(-1)) + &.rotate-90 + @include transform(scaleX(-1) rotate(90deg)) + &.rotate-180 + @include transform(scaleX(-1) rotate(180deg)) + &.rotate-270 + @include transform(scaleX(-1) rotate(270deg)) + +@media only screen and (max-width: 480px) + .wy-form + button[type="submit"] + margin: 0.7em 0 0 + input + &[type="text"], &[type="password"], &[type="email"], &[type="url"], &[type="date"], &[type="month"], &[type="time"], &[type="datetime"], &[type="datetime-local"], &[type="week"], &[type="number"], &[type="search"], &[type="tel"], &[type="color"] + margin-bottom: 0.3em + display: block + label + margin-bottom: 0.3em + display: block + .wy-form input + &[type="password"], &[type="email"], &[type="url"], &[type="date"], &[type="month"], &[type="time"], &[type="datetime"], &[type="datetime-local"], &[type="week"], &[type="number"], &[type="search"], &[type="tel"], &[type="color"] + margin-bottom: 0 + .wy-form-aligned + .wy-control-group label + margin-bottom: 0.3em + text-align: left + display: block + width: 100% + .wy-control + margin: 1.5em 0 0 0 + .wy-form .wy-help-inline, .wy-form-message-inline, .wy-form-message + display: block + font-size: 80% + padding: $base-line-height / 4 0 + + |