| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116 |
- // *************************************
- //
- // Form
- // -> Fields, selects, & such
- //
- // -------------------------------------
- // Template (Haml)
- // -------------------------------------
- //
- // %form.form
- // %fieldset.form-field
- // %label.form-label(for="email") Email
- // %input.form-input(type="email" id="email")
- //
- // *************************************
- // -------------------------------------
- // Variables
- // -------------------------------------
- // ----- Colors ----- //
- $form-input-background: #fff !default
- $form-input-borderColor: #ddd !default
- $form-input-focus-borderColor: #4e4e5b !default
- // ----- Borders ----- //
- $form-borderRadius: 2px !default
- $form-input-border: 2px solid $form-input-borderColor !default
- // ----- Typography ----- //
- $form-fontSize-m: 90% !default
- // ----- Sizing ----- //
- $form-space: 1.25em !default
- $form-space-xs: 0.2 * $form-space !default
- $form-space-s: 0.5 * $form-space !default
- // -------------------------------------
- // Base
- // -------------------------------------
- .form
- margin-bottom: $form-space
- // -------------------------------------
- // Modifiers
- // -------------------------------------
- // ----- Condensed ----- //
- .form--condensed
- .form-field
- margin-bottom: $form-space-s
- .form-input-search
- margin-right: $b-space
- background: #2C3438
- border-radius: $b-borderRadius
- border: none
- display: inline-block
- float: right
- padding: $form-space-xs
- // -------------------------------------
- // Scaffolding
- // -------------------------------------
- // ----- Field ----- //
- .form-field
- border: 0
- margin-bottom: $form-space
- padding: 0
- // Inline
- .form-field--inline
- .form-btn
- display: block
- line-height: 2.9
- min-width: 100%
- // ----- Input ----- //
- .form-input
- background: $form-input-background
- border: $form-input-border
- box-sizing: border-box
- font-size: 100%
- padding: $form-space-s
- position: relative
- transition: border-color 0.2s ease-in-out
- width: 100%
- &:focus
- border-color: $form-input-focus-borderColor
- outline: none
- // ----- Label ----- //
- .form-label
- display: block
- font-size: $form-fontSize-m
- font-weight: bold
- margin-bottom: $form-space-xs
- // ----- Select ----- //
- .form-select
- min-width: 12.5em // ~200px
|
