library/components/_form.sass at master · mvcss/library · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
// *************************************
//
//   Form
//   -> User input environment
//      CodePen: http://codepen.io/drewbarontini/pen/mbIwj
//
// -------------------------------------
//   Template (Haml)
// -------------------------------------
//
// %form.form[s|l]
//
//   %fieldset.form-field[checkbox|inline|radio]
//
//     .form-field-item
//
//     %label.form-label
//
//     %input.form-input
//
//     %select.form-select
//
// *************************************

// -------------------------------------
//   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: 100% !default
$form-fontSize-s: 90% !default

// ----- Sizing ----- //

$form-space: 1.25em !default
$form-space-xs: $form-space * 0.25 !default
$form-space-s: $form-space * 0.5 !default
$form-space-l: $form-space * 2 !default

// -------------------------------------
//   Base
// -------------------------------------

.form
  margin-bottom: $form-space

// -------------------------------------
//   Modifiers
// -------------------------------------

// ----- Sizes ----- //

// Small

.form--s

  .form-field
    margin-bottom: $form-space-s

// Large

.form--l

  .form-field
    margin-bottom: $form-space-l

// -------------------------------------
//   Scaffolding
// -------------------------------------

// ----- Field ----- //

.form-field
  border: 0
  margin: 0 0 $form-space
  padding: 0

// Checkbox & Radio

.form-field--checkbox,
.form-field--radio

  .form-input
    display: inline-block
    margin-right: $form-space-xs
    width: auto

  .form-label
    display: inline-block

// Inline

.form-field--inline

  .form-btn
    display: block
    line-height: 2.9
    min-width: 100%

// Item

.form-field-item
  margin-bottom: $form-space-s

  &:last-child
    margin-bottom: 0

// ----- Help ----- //

.form-help
  margin-bottom: 0

// ----- Input ----- //

.form-input
  background: $form-input-background
  border: $form-input-border
  border-radius: $form-borderRadius
  box-sizing: border-box
  font-size: $form-fontSize
  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-s
  font-weight: bold
  margin-bottom: $form-space-xs

// ----- Select ----- //

.form-select
  min-width: 12.5em // ~200px