flat-ui-sass 2.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (122) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +18 -0
  3. data/.gitmodules +3 -0
  4. data/Gemfile +4 -0
  5. data/LICENSE.txt +22 -0
  6. data/README.md +256 -0
  7. data/Rakefile +14 -0
  8. data/app/helpers/flat_ui/rails/icon_helper.rb +60 -0
  9. data/bin/fui_convert +9 -0
  10. data/flat-ui-sass.gemspec +28 -0
  11. data/lib/flat-ui-sass.rb +98 -0
  12. data/lib/flat-ui-sass/cli.rb +56 -0
  13. data/lib/flat-ui-sass/engine.rb +13 -0
  14. data/lib/flat-ui-sass/sass_functions.rb +56 -0
  15. data/lib/flat-ui-sass/version.rb +4 -0
  16. data/lib/tasks/converter.rb +99 -0
  17. data/lib/tasks/converter/filesystem.rb +16 -0
  18. data/lib/tasks/converter/flat_ui_fonts_conversion.rb +19 -0
  19. data/lib/tasks/converter/flat_ui_images_conversion.rb +19 -0
  20. data/lib/tasks/converter/flat_ui_js_conversion.rb +28 -0
  21. data/lib/tasks/converter/flat_ui_less_conversion.rb +328 -0
  22. data/lib/tasks/converter/logger.rb +61 -0
  23. data/lib/tasks/flat-ui-sass.rake +8 -0
  24. data/templates/project/_variables.scss.erb +5 -0
  25. data/templates/project/manifest.rb +57 -0
  26. data/templates/project/styles.scss +4 -0
  27. data/vendor/assets/fonts/flat-ui/flat-ui-icons-regular.eot +0 -0
  28. data/vendor/assets/fonts/flat-ui/flat-ui-icons-regular.svg +140 -0
  29. data/vendor/assets/fonts/flat-ui/flat-ui-icons-regular.ttf +0 -0
  30. data/vendor/assets/fonts/flat-ui/flat-ui-icons-regular.woff +0 -0
  31. data/vendor/assets/images/flat-ui/icons/png/Book.png +0 -0
  32. data/vendor/assets/images/flat-ui/icons/png/Calendar.png +0 -0
  33. data/vendor/assets/images/flat-ui/icons/png/Chat.png +0 -0
  34. data/vendor/assets/images/flat-ui/icons/png/Clipboard.png +0 -0
  35. data/vendor/assets/images/flat-ui/icons/png/Compas.png +0 -0
  36. data/vendor/assets/images/flat-ui/icons/png/Gift-Box.png +0 -0
  37. data/vendor/assets/images/flat-ui/icons/png/Infinity-Loop.png +0 -0
  38. data/vendor/assets/images/flat-ui/icons/png/Mail.png +0 -0
  39. data/vendor/assets/images/flat-ui/icons/png/Map.png +0 -0
  40. data/vendor/assets/images/flat-ui/icons/png/Pensils.png +0 -0
  41. data/vendor/assets/images/flat-ui/icons/png/Pocket.png +0 -0
  42. data/vendor/assets/images/flat-ui/icons/png/Retina-Ready.png +0 -0
  43. data/vendor/assets/images/flat-ui/icons/png/Toilet-Paper.png +0 -0
  44. data/vendor/assets/images/flat-ui/icons/png/Watches.png +0 -0
  45. data/vendor/assets/images/flat-ui/icons/svg/book.svg +1 -0
  46. data/vendor/assets/images/flat-ui/icons/svg/calendar.svg +1 -0
  47. data/vendor/assets/images/flat-ui/icons/svg/chat.svg +1 -0
  48. data/vendor/assets/images/flat-ui/icons/svg/clipboard.svg +1 -0
  49. data/vendor/assets/images/flat-ui/icons/svg/clocks.svg +9 -0
  50. data/vendor/assets/images/flat-ui/icons/svg/compas.svg +1 -0
  51. data/vendor/assets/images/flat-ui/icons/svg/gift-box.svg +1 -0
  52. data/vendor/assets/images/flat-ui/icons/svg/loop.svg +5 -0
  53. data/vendor/assets/images/flat-ui/icons/svg/mail.svg +1 -0
  54. data/vendor/assets/images/flat-ui/icons/svg/map.svg +1 -0
  55. data/vendor/assets/images/flat-ui/icons/svg/paper-bag.svg +1 -0
  56. data/vendor/assets/images/flat-ui/icons/svg/pencils.svg +1 -0
  57. data/vendor/assets/images/flat-ui/icons/svg/retina.svg +1 -0
  58. data/vendor/assets/images/flat-ui/icons/svg/toilet-paper.svg +1 -0
  59. data/vendor/assets/images/flat-ui/login/icon.png +0 -0
  60. data/vendor/assets/images/flat-ui/login/imac-2x.png +0 -0
  61. data/vendor/assets/images/flat-ui/login/imac.png +0 -0
  62. data/vendor/assets/images/flat-ui/switch/mask-square.png +0 -0
  63. data/vendor/assets/images/flat-ui/switch/mask.png +0 -0
  64. data/vendor/assets/images/flat-ui/tile/ribbon-2x.png +0 -0
  65. data/vendor/assets/images/flat-ui/tile/ribbon.png +0 -0
  66. data/vendor/assets/images/flat-ui/todo/done-2x.png +0 -0
  67. data/vendor/assets/images/flat-ui/todo/done.png +0 -0
  68. data/vendor/assets/images/flat-ui/todo/search-2x.png +0 -0
  69. data/vendor/assets/images/flat-ui/todo/search.png +0 -0
  70. data/vendor/assets/images/flat-ui/todo/todo-2x.png +0 -0
  71. data/vendor/assets/images/flat-ui/todo/todo.png +0 -0
  72. data/vendor/assets/images/flat-ui/video/fullscreen-2x.png +0 -0
  73. data/vendor/assets/images/flat-ui/video/fullscreen.png +0 -0
  74. data/vendor/assets/images/flat-ui/video/pause-2x.png +0 -0
  75. data/vendor/assets/images/flat-ui/video/pause.png +0 -0
  76. data/vendor/assets/images/flat-ui/video/play-2x.png +0 -0
  77. data/vendor/assets/images/flat-ui/video/play.png +0 -0
  78. data/vendor/assets/images/flat-ui/video/poster.jpg +0 -0
  79. data/vendor/assets/images/flat-ui/video/volume-full-2x.png +0 -0
  80. data/vendor/assets/images/flat-ui/video/volume-full.png +0 -0
  81. data/vendor/assets/images/flat-ui/video/volume-off-2x.png +0 -0
  82. data/vendor/assets/images/flat-ui/video/volume-off.png +0 -0
  83. data/vendor/assets/javascripts/flat-ui.js +2 -0
  84. data/vendor/assets/javascripts/flat-ui/flatui-checkbox.js +112 -0
  85. data/vendor/assets/javascripts/flat-ui/flatui-radio.js +139 -0
  86. data/vendor/assets/stylesheets/flat-ui.scss +1 -0
  87. data/vendor/assets/stylesheets/flat-ui/_mixins.scss +878 -0
  88. data/vendor/assets/stylesheets/flat-ui/_spaces.scss +172 -0
  89. data/vendor/assets/stylesheets/flat-ui/_variables.scss +509 -0
  90. data/vendor/assets/stylesheets/flat-ui/flat-ui.scss +45 -0
  91. data/vendor/assets/stylesheets/flat-ui/modules/_button-groups.scss +110 -0
  92. data/vendor/assets/stylesheets/flat-ui/modules/_buttons.scss +151 -0
  93. data/vendor/assets/stylesheets/flat-ui/modules/_caret.scss +30 -0
  94. data/vendor/assets/stylesheets/flat-ui/modules/_checkbox-and-radio.scss +143 -0
  95. data/vendor/assets/stylesheets/flat-ui/modules/_code.scss +49 -0
  96. data/vendor/assets/stylesheets/flat-ui/modules/_dropdown.scss +223 -0
  97. data/vendor/assets/stylesheets/flat-ui/modules/_footer.scss +76 -0
  98. data/vendor/assets/stylesheets/flat-ui/modules/_forms.scss +188 -0
  99. data/vendor/assets/stylesheets/flat-ui/modules/_glyphicons.scss +135 -0
  100. data/vendor/assets/stylesheets/flat-ui/modules/_input-groups.scss +153 -0
  101. data/vendor/assets/stylesheets/flat-ui/modules/_input-icons.scss +72 -0
  102. data/vendor/assets/stylesheets/flat-ui/modules/_local-fonts.scss +69 -0
  103. data/vendor/assets/stylesheets/flat-ui/modules/_login.scss +111 -0
  104. data/vendor/assets/stylesheets/flat-ui/modules/_navbar.scss +876 -0
  105. data/vendor/assets/stylesheets/flat-ui/modules/_pager.scss +51 -0
  106. data/vendor/assets/stylesheets/flat-ui/modules/_pagination.scss +166 -0
  107. data/vendor/assets/stylesheets/flat-ui/modules/_palette.scss +71 -0
  108. data/vendor/assets/stylesheets/flat-ui/modules/_progress-bars.scss +34 -0
  109. data/vendor/assets/stylesheets/flat-ui/modules/_scaffolding.scss +64 -0
  110. data/vendor/assets/stylesheets/flat-ui/modules/_select.scss +145 -0
  111. data/vendor/assets/stylesheets/flat-ui/modules/_share.scss +44 -0
  112. data/vendor/assets/stylesheets/flat-ui/modules/_slider.scss +105 -0
  113. data/vendor/assets/stylesheets/flat-ui/modules/_switch.scss +150 -0
  114. data/vendor/assets/stylesheets/flat-ui/modules/_tagsinput.scss +121 -0
  115. data/vendor/assets/stylesheets/flat-ui/modules/_thumbnails.scss +38 -0
  116. data/vendor/assets/stylesheets/flat-ui/modules/_tile.scss +54 -0
  117. data/vendor/assets/stylesheets/flat-ui/modules/_todo.scss +110 -0
  118. data/vendor/assets/stylesheets/flat-ui/modules/_tooltip.scss +56 -0
  119. data/vendor/assets/stylesheets/flat-ui/modules/_type.scss +208 -0
  120. data/vendor/assets/stylesheets/flat-ui/modules/_typeahead.scss +41 -0
  121. data/vendor/assets/stylesheets/flat-ui/modules/_video.scss +458 -0
  122. metadata +251 -0
@@ -0,0 +1,49 @@
1
+ //
2
+ // Code (inline and blocK)
3
+ // --------------------------------------------------
4
+
5
+
6
+ // Inline and block code styles
7
+ code,
8
+ kbd,
9
+ pre,
10
+ samp {
11
+ font-family: $font-family-monospace;
12
+ }
13
+
14
+ // Inline code
15
+ code {
16
+ padding: 2px 6px;
17
+ font-size: 85%;
18
+ color: $code-color;
19
+ background-color: $code-bg;
20
+ border-radius: $border-radius-base;
21
+ }
22
+
23
+ // User input typically entered via keyboard
24
+ kbd {
25
+ padding: 2px 6px;
26
+ font-size: 85%;
27
+ color: $kbd-color;
28
+ background-color: $kbd-bg;
29
+ border-radius: $border-radius-base;
30
+ box-shadow: none;
31
+ }
32
+
33
+ // Blocks of code
34
+ pre {
35
+ padding: (($line-height-computed - 6) / 3);
36
+ margin: 0 0 ($line-height-computed / 2);
37
+ font-size: ($font-size-base - 5); // 18px to 13px
38
+ line-height: $line-height-base;
39
+ color: $pre-color;
40
+ background-color: $pre-bg;
41
+ border: 2px solid $pre-border-color;
42
+ border-radius: $pre-border-radius;
43
+ white-space: pre;
44
+ }
45
+
46
+ // Enable scrollable blocks of code
47
+ .pre-scrollable {
48
+ max-height: $pre-scrollable-max-height;
49
+ }
@@ -0,0 +1,223 @@
1
+ //
2
+ // Dropdown
3
+ // --------------------------------------------------
4
+
5
+ .dropdown-menu {
6
+ background-color: $dropdown-background;
7
+ border: none;
8
+ display: block;
9
+ margin-top: 8px;
10
+ opacity: 0;
11
+ padding: 0;
12
+ visibility: hidden;
13
+ @include box-shadow(none);
14
+ @include transition(.25s);
15
+
16
+ // Opened state
17
+ .open > & {
18
+ margin-top: 18px !important;
19
+ opacity: 1;
20
+ visibility: visible;
21
+ }
22
+ li {
23
+ &:first-child {
24
+ dt + a {
25
+ border-radius: 0;
26
+ }
27
+ > a {
28
+ border-radius: $border-radius-large $border-radius-large 0 0;
29
+ padding-top: 8px;
30
+ }
31
+ }
32
+
33
+ &:last-child {
34
+ > a {
35
+ border-radius: 0 0 $border-radius-large $border-radius-large;
36
+ padding-bottom: 10px;
37
+ }
38
+ }
39
+
40
+ &.active,
41
+ &.selected {
42
+ > a,
43
+ > a.highlighted {
44
+ background: $brand-secondary;
45
+ color: $inverse;
46
+
47
+ &:hover,
48
+ &:focus {
49
+ background: mix($brand-secondary, black, 85%);
50
+ color: $inverse;
51
+ }
52
+ }
53
+ }
54
+ > a {
55
+ color: fade($brand-primary, 75%);
56
+ padding: 6px 15px 8px;
57
+ text-decoration: none;
58
+ @include clearfix();
59
+ @include transition(background-color .25s);
60
+
61
+ &:hover,
62
+ &:active,
63
+ &:focus {
64
+ background: mix($inverse, $brand-primary, 85%);
65
+ color: inherit;
66
+ outline: none;
67
+ }
68
+
69
+ &.highlighted {
70
+ background: mix($inverse, $brand-primary, 73.5%);
71
+ color: $inverse;
72
+
73
+ &:hover,
74
+ &:focus {
75
+ background: mix($inverse, $brand-primary, 66%);
76
+ color: $inverse;
77
+ }
78
+ }
79
+
80
+ &:before {
81
+ float: right;
82
+ margin-top: 3px;
83
+ }
84
+ }
85
+
86
+ // Submenu title
87
+ dt {
88
+ font-weight: 300;
89
+ margin-bottom: 3px;
90
+ margin-top: 12px;
91
+ padding: 0 15px;
92
+ }
93
+ }
94
+ @media (max-width: $screen-sm-max) {
95
+ border-radius: 0 0 $border-radius-large $border-radius-large !important;
96
+ }
97
+ .divider {
98
+ margin-top: 3px;
99
+ margin-bottom: 3px;
100
+ }
101
+ }
102
+
103
+ // Dropdown expands to top
104
+ .dropup,
105
+ .navbar-fixed-bottom .dropdown {
106
+ .dropdown-menu {
107
+ margin-bottom: 8px;
108
+ }
109
+ .dropdown-arrow {
110
+ border-bottom: none;
111
+ border-top: 8px outset mix($inverse, $brand-primary, 94%);
112
+ bottom: 100%;
113
+ top: auto;
114
+ }
115
+ }
116
+
117
+ // Second level nav
118
+ .navbar-fixed-bottom .nav > li > ul:before {
119
+ border-bottom: none;
120
+ border-top: 9px outset $brand-primary;
121
+ bottom: 4px;
122
+ top: auto;
123
+ }
124
+
125
+ .open {
126
+ &.dropup {
127
+ > .dropdown-menu {
128
+ margin-bottom: 18px;
129
+ }
130
+ > .dropdown-arrow {
131
+ margin-bottom: 10px;
132
+
133
+ &.dropdown-arrow-inverse {
134
+ border-top-color: $brand-primary;
135
+ }
136
+ }
137
+ }
138
+ > .dropdown-arrow {
139
+ margin-top: 11px;
140
+ opacity: 1;
141
+ }
142
+ }
143
+
144
+ // Arrows
145
+ // --------------------------------------------------
146
+ .dropdown-arrow {
147
+ border-style: solid;
148
+ border-width: 0 8px 7px;
149
+ border-color: transparent transparent mix($inverse, $brand-primary, 94%) transparent;
150
+ height: 0;
151
+ margin-top: 0;
152
+ opacity: 0;
153
+ position: absolute;
154
+ right: 19px;
155
+ top: 100%;
156
+ width: 0;
157
+ z-index: 10;
158
+ -webkit-transform: rotate(360deg); // Make corners smooth
159
+ @include transition(.25s);
160
+ }
161
+
162
+ // Alternate Color
163
+ // --------------------------------------------------
164
+ .dropdown-inverse {
165
+ background-color: $brand-primary;
166
+ color: mix($inverse, black, 80%);
167
+ padding: 4px 0 6px;
168
+
169
+ li {
170
+ margin: 0 4px -2px;
171
+ &:first-child,
172
+ &:last-child {
173
+ > a {
174
+ border-radius: 2px;
175
+ padding-bottom: 7px;
176
+ padding-top: 5px;
177
+ }
178
+ dt + a {
179
+ border-radius: 2px;
180
+ }
181
+ }
182
+
183
+ &.active,
184
+ &.selected {
185
+ > a {
186
+ background: $brand-secondary;
187
+ color: $inverse;
188
+ position: relative;
189
+ z-index: 1;
190
+ }
191
+ }
192
+ dt {
193
+ padding-left: 11px;
194
+ padding-right: 11px;
195
+ }
196
+ .divider {
197
+ margin-left: 11px;
198
+ margin-right: 11px;
199
+ }
200
+ > a {
201
+ border-radius: 2px;
202
+ color: $inverse;
203
+ padding: 5px 11px 7px;
204
+
205
+ &:hover,
206
+ &:active,
207
+ &:focus {
208
+ background: mix($brand-primary, black, 85%);
209
+ }
210
+ &.highlighted {
211
+ background: mix($brand-primary, $inverse, 85%);
212
+ &:hover,
213
+ &:focus {
214
+ background: mix($brand-primary, $inverse, 75%);
215
+ }
216
+ }
217
+ }
218
+ .divider {
219
+ background-color: mix($brand-primary, white, 85%);
220
+ border-bottom-color: mix($brand-primary, white, 85%);
221
+ }
222
+ }
223
+ }
@@ -0,0 +1,76 @@
1
+ //
2
+ // Footer
3
+ // --------------------------------------------------
4
+
5
+ footer {
6
+ background-color: mix($brand-primary, $inverse, 9%);
7
+ color: mix($brand-primary, $inverse, 34%);
8
+ font-size: 15px;
9
+ padding: 0;
10
+
11
+ a {
12
+ color: mix($brand-primary, $inverse, 50%);
13
+ font-weight: 700;
14
+ }
15
+ p {
16
+ font-size: 15px;
17
+ line-height: 20px;
18
+ margin-bottom: 10px;
19
+ }
20
+ }
21
+
22
+ .footer-title {
23
+ margin: 0 0 22px;
24
+ padding-top: 21px;
25
+ font-size: 24px;
26
+ line-height: 40px;
27
+ }
28
+
29
+ .footer-brand {
30
+ display: block;
31
+ margin-bottom: 26px;
32
+ width: 220px;
33
+
34
+ img {
35
+ width: 216px;
36
+ }
37
+ }
38
+
39
+ // FOOTER BANNER
40
+ // ----------------------
41
+ .footer-banner {
42
+ background-color: $brand-secondary;
43
+ color: mix($brand-secondary, $inverse, 20%);
44
+ margin-left: 42px;
45
+ min-height: 316px;
46
+ padding: 0 30px 30px;
47
+
48
+ .footer-title {
49
+ color: $inverse;
50
+ }
51
+ a {
52
+ color: lighten($brand-secondary, 42%);
53
+ text-decoration: underline;
54
+
55
+ &:hover {
56
+ text-decoration: none;
57
+ }
58
+ }
59
+ ul {
60
+ list-style-type: none;
61
+ margin: 0 0 26px;
62
+ padding: 0;
63
+
64
+ li {
65
+ border-top: 1px solid lighten($brand-secondary, 2%);
66
+ line-height: 19px;
67
+ padding: 6px 0;
68
+
69
+ &:first-child {
70
+ border-top: none;
71
+ padding-top: 1px;
72
+ }
73
+ }
74
+ }
75
+ }
76
+
@@ -0,0 +1,188 @@
1
+ //
2
+ // Forms
3
+ // --------------------------------------------------
4
+
5
+
6
+ // Normalize non-controls
7
+ //
8
+ // Restyle and baseline non-control form elements.
9
+
10
+ legend {
11
+ display: block;
12
+ width: 100%;
13
+ padding: 0;
14
+ margin-bottom: $line-height-computed / 2;
15
+ font-size: ($component-font-size-base * 1.6); // ~24px
16
+ line-height: inherit;
17
+ color: $legend-color;
18
+ border-bottom: none;
19
+ }
20
+
21
+ // Normalize form controls
22
+
23
+ // Textarea
24
+ textarea {
25
+ font-size: ceil($font-size-base * 1.071); // ~15px
26
+ line-height: 24px;
27
+ padding: 5px 11px;
28
+ }
29
+
30
+ // Search
31
+ input[type="search"] {
32
+ -webkit-appearance: none !important; // removes rounded corners for searchfields on iOS
33
+ }
34
+
35
+
36
+ // Label
37
+ label {
38
+ font-weight: normal;
39
+ font-size: $component-font-size-base;
40
+ line-height: 2.4; // ~36px
41
+ }
42
+
43
+ // Placeholder
44
+ //
45
+ // Placeholder text gets special styles because when browsers invalidate entire
46
+ // lines if it doesn't understand a selector/
47
+ .form-control {
48
+ @include placeholder(desaturate(lighten($brand-primary, 45%), 15%));
49
+ }
50
+
51
+ // Common form controls
52
+ //
53
+ // Shared size and type resets for form controls. Apply `.form-control` to any
54
+ // of the following form controls:
55
+ //
56
+ // select
57
+ // textarea
58
+ // input[type="text"]
59
+ // input[type="password"]
60
+ // input[type="datetime"]
61
+ // input[type="datetime-local"]
62
+ // input[type="date"]
63
+ // input[type="month"]
64
+ // input[type="time"]
65
+ // input[type="week"]
66
+ // input[type="number"]
67
+ // input[type="email"]
68
+ // input[type="url"]
69
+ // input[type="search"]
70
+ // input[type="tel"]
71
+ // input[type="color"]
72
+
73
+ .form-control {
74
+ border: 2px solid $gray-light;
75
+ color: $brand-primary;
76
+ font-family: $font-family-base;
77
+ font-size: $input-font-size-base;
78
+ line-height: $input-line-height-base;
79
+ padding: 8px 12px;
80
+ height: 42px;
81
+ -webkit-appearance: none;
82
+ border-radius: $input-border-radius;
83
+ @include box-shadow(none);
84
+ @include transition(border .25s linear, color .25s linear, background-color .25s linear);
85
+
86
+ // Customize the `:focus` state
87
+ @include form-control-focus();
88
+
89
+ // Disabled and read-only inputs
90
+ // Note: HTML5 says that controls under a fieldset > legend:first-child won't
91
+ // be disabled if the fieldset is disabled. Due to implementation difficulty,
92
+ // we don't honor that edge case; we style them as disabled anyway.
93
+ &[disabled],
94
+ &[readonly],
95
+ fieldset[disabled] & {
96
+ background-color: $input-bg-disabled;
97
+ border-color: mix($gray, white, 40%);
98
+ color: mix($gray, white, 40%);
99
+ cursor: default;
100
+ @include opacity(.7);
101
+ }
102
+
103
+ // Flat (without border)
104
+ &.flat {
105
+ border-color: transparent;
106
+
107
+ &:hover {
108
+ border-color: $gray-light;
109
+ }
110
+ &:focus {
111
+ border-color: $brand-secondary;
112
+ }
113
+ }
114
+ }
115
+
116
+ // Form control sizing
117
+
118
+ @include input-size('.input-sm', $input-height-small, 6px, 10px, $input-font-size-small, $input-line-height-small);
119
+
120
+ @include input-size('.input-lg', $input-height-large, 10px, 15px, $input-font-size-large, $input-line-height-large);
121
+
122
+ @include input-size('.input-hg', $input-height-huge, 10px, 16px, $input-font-size-huge, $input-line-height-huge);
123
+
124
+ // Form control feedback states
125
+ //
126
+ // Apply contextual and semantic states to individual form controls.
127
+
128
+ // Warning
129
+ .has-warning {
130
+ @include form-control-validation($brand-warning, $brand-warning);
131
+ }
132
+ // Error
133
+ .has-error {
134
+ @include form-control-validation($brand-danger, $brand-danger);
135
+ }
136
+ // Success
137
+ .has-success {
138
+ @include form-control-validation($brand-success, $brand-success);
139
+ }
140
+
141
+ // Help text
142
+ //
143
+ // Apply to any element you wish to create light text for placement immediately
144
+ // below a form control. Use for general help, formatting, or instructional text.
145
+
146
+ .help-block {
147
+ font-size: $component-font-size-base;
148
+ margin-bottom: 5px;
149
+ color: inherit;
150
+ }
151
+
152
+ // Form groups
153
+ //
154
+ // Designed to help with the organization and spacing of vertical forms. For
155
+ // horizontal forms, use the predefined grid classes.
156
+
157
+ .form-group {
158
+ position: relative;
159
+ margin-bottom: 20px;
160
+ }
161
+
162
+ // Horizontal forms
163
+ //
164
+ // Horizontal forms are built on grid classes and allow you to create forms with
165
+ // labels on the left and inputs on the right.
166
+
167
+ .form-horizontal {
168
+
169
+ // Consistent vertical alignment of labels, radios, and checkboxes
170
+ .control-label,
171
+ .radio,
172
+ .checkbox,
173
+ .radio-inline,
174
+ .checkbox-inline {
175
+ margin-top: 0;
176
+ margin-bottom: 0;
177
+ padding-top: 6px;
178
+ }
179
+
180
+ // Make form groups behave like rows
181
+ .form-group {
182
+ @include make-row();
183
+ }
184
+
185
+ .form-control-static {
186
+ padding-top: 6px;
187
+ }
188
+ }