titon-toolkit 0.9.4 → 0.10.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (44) hide show
  1. data/license.md +23 -0
  2. data/readme.md +93 -0
  3. data/src/lib/titon-toolkit.rb +2 -2
  4. data/src/scss/toolkit.scss +3 -3
  5. data/src/scss/toolkit/effects/visual.scss +47 -47
  6. data/src/scss/toolkit/layout/base.scss +32 -32
  7. data/src/scss/toolkit/layout/code.scss +38 -38
  8. data/src/scss/toolkit/layout/form.scss +86 -86
  9. data/src/scss/toolkit/layout/grid.scss +31 -31
  10. data/src/scss/toolkit/layout/input-group.scss +41 -41
  11. data/src/scss/toolkit/layout/responsive.scss +21 -21
  12. data/src/scss/toolkit/layout/table.scss +59 -59
  13. data/src/scss/toolkit/layout/typography.scss +18 -18
  14. data/src/scss/toolkit/mixins/_grid.scss +8 -8
  15. data/src/scss/toolkit/mixins/_layout.scss +36 -36
  16. data/src/scss/toolkit/mixins/_responsive.scss +56 -56
  17. data/src/scss/toolkit/mixins/_themes.scss +78 -78
  18. data/src/scss/toolkit/modules/accordion.scss +33 -33
  19. data/src/scss/toolkit/modules/blackout.scss +13 -13
  20. data/src/scss/toolkit/modules/carousel.scss +141 -141
  21. data/src/scss/toolkit/modules/flyout.scss +57 -57
  22. data/src/scss/toolkit/modules/modal.scss +206 -206
  23. data/src/scss/toolkit/modules/popover.scss +58 -58
  24. data/src/scss/toolkit/modules/showcase.scss +135 -135
  25. data/src/scss/toolkit/modules/tabs.scss +29 -29
  26. data/src/scss/toolkit/modules/tooltip.scss +109 -109
  27. data/src/scss/toolkit/modules/type-ahead.scss +44 -44
  28. data/src/scss/toolkit/themes/titon.scss +242 -242
  29. data/src/scss/toolkit/themes/tomorrow-night.scss +322 -322
  30. data/src/scss/toolkit/ui/alert.scss +29 -29
  31. data/src/scss/toolkit/ui/breadcrumbs.scss +41 -41
  32. data/src/scss/toolkit/ui/button-group.scss +181 -181
  33. data/src/scss/toolkit/ui/button.scss +31 -31
  34. data/src/scss/toolkit/ui/dropdown.scss +83 -83
  35. data/src/scss/toolkit/ui/icon.scss +5 -5
  36. data/src/scss/toolkit/ui/label-badge.scss +48 -48
  37. data/src/scss/toolkit/ui/lazy-load.scss +8 -5
  38. data/src/scss/toolkit/ui/matrix.scss +26 -0
  39. data/src/scss/toolkit/ui/pagination.scss +108 -108
  40. data/src/scss/toolkit/ui/pin.scss +5 -5
  41. data/src/scss/toolkit/ui/progress.scss +20 -20
  42. data/version.md +1 -0
  43. metadata +17 -5
  44. checksums.yaml +0 -15
data/license.md ADDED
@@ -0,0 +1,23 @@
1
+ Copyright (c) 2013, The Titon Project
2
+ All rights reserved.
3
+
4
+ Redistribution and use in source and binary forms, with or without
5
+ modification, are permitted provided that the following conditions are met:
6
+
7
+ * Redistributions of source code must retain the above copyright notice,
8
+ this list of conditions and the following disclaimer.
9
+
10
+ * Redistributions in binary form must reproduce the above copyright notice,
11
+ this list of conditions and the following disclaimer in the documentation
12
+ and/or other materials provided with the distribution.
13
+
14
+ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
15
+ AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
16
+ IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
17
+ DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
18
+ FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
19
+ DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
20
+ SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
21
+ CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
22
+ OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
23
+ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
data/readme.md ADDED
@@ -0,0 +1,93 @@
1
+ # Toolkit v0.10.0 #
2
+
3
+ Toolkit is a collection of very powerful user-interface components and utility classes.
4
+ Each component represents encapsulated HTML, CSS and JS functionality for role specific page elements.
5
+
6
+ Titon makes use of the latest and greatest technology. This includes CSS3 for animation (fade, slide, etc),
7
+ Sass for CSS pre-processing, Grunt for task and package management, and Intern for unit testing.
8
+
9
+ #### Requirements ####
10
+ * **HTML5**
11
+ * **CSS3**
12
+ * **MooTools 1.4** (for JS components)
13
+ * Core
14
+ * More/Class.Binds
15
+ * More/Elements.From
16
+ * More/Element.Shortcuts
17
+ * More/Locale
18
+ * More/Drag (optional: Modal)
19
+ * More/Array.Extras (optional: Flyout)
20
+ * More/Element.Position (optional: Tooltip)
21
+ * More/Element.Event.Pseudos (optional: Tooltip)
22
+
23
+ #### Tested Against ####
24
+ * Chrome 26, 28
25
+ * Firefox 20, 23
26
+ * Internet Explorer 10
27
+ * Opera 12
28
+ * Safari 5
29
+
30
+ ## Javascript Components ##
31
+ #### Modules ####
32
+ * `Accordion` - Provides collapsible support to a list of sections
33
+ * `Blackout` - Displays a transparent black element over the document
34
+ * `Carousel` - Provides a 16:9 responsive carousel with panels that slide or fade in
35
+ * `Flyout` - Displays nested flyout menus that appear below an element that activates it
36
+ * `Modal` - Displays dynamic modals that will display above the content
37
+ * `Popover` - Displays dynamic notification elements over an element
38
+ * `Showcase` - Provides a lightbox style image gallery
39
+ * `Tabs` - Provides tabbed support to an element containing navigation tabs and sections
40
+ * `Tooltip` - Displays dynamic tooltips over an element or the mouse cursor
41
+ * `TypeAhead` - Displays a list of possible options below an input while typing
42
+
43
+ #### Utilities ####
44
+ * `LazyLoad` - Provides an easy way to lazy-load images (inline and background) while scrolling
45
+ * `Matrix` - Reorganizes elements into a modular cascading grid (masonry style)
46
+ * `Pin` - Pin an element in a container that stays within the viewport while scrolling
47
+ * `Toggle` - Toggles the display of a target element; useful for triggering transitions
48
+
49
+ #### Extensions ####
50
+ Titon also provides classes that build upon MooTools itself. These classes do not require the Titon library.
51
+
52
+ * `Timers` - Provides timer and interval management within the class layer
53
+ * `Cache` - Provides local and session storage within the class layer
54
+
55
+ ## CSS Components ##
56
+ #### Layout ####
57
+ * `Base` - Provides utility and helper classes
58
+ * `Code` - Styles for code blocks
59
+ * `Form` - Allows for vertical, horizontal and inline forms; also provides default styles
60
+ * `Grid` - Implements a fluid 12 column grid system with responsive support for all devices
61
+ * `InputGroup` - Allows for the grouping of inputs with buttons and static blocks
62
+ * `Responsive` - Responsive classes for mobile, tablet and desktop resolutions
63
+ * `Table` - Styles for tables
64
+ * `Typography` - Resets and default styles for typography
65
+
66
+ #### UI ####
67
+ * `Alert` - Styles for block level notification messages
68
+ * `Breadcrumbs` - Styles for bread crumb navigation trails
69
+ * `Button` - Styles for generic cross-browser compatible buttons
70
+ * `ButtonGroup` - Allows for the grouping of multiple buttons into 1 visual styled button
71
+ * `Dropdown` - Allows for toggleable dropdown menus with support for nested menus
72
+ * `Icon` - Allows for inline image sprites to be used at 12, 16, 24, 32, and 64 sizes
73
+ * `Label` - Styles for inline tag labels
74
+ * `Badge` - Styles for inline notification bubbles
75
+ * `Pagination` - Styles for pagination lists
76
+ * `Pin` - Animations for element pinning
77
+ * `Progress` - Basic styles for progress bars
78
+
79
+ #### Themes ####
80
+ * `Titon` - Titon specific theme that mimics Twitter Bootstrap
81
+ * `TomorrowNight` - Tomorrow Night theme for all Titon components
82
+
83
+ ## Authors ##
84
+ * Miles Johnson - https://github.com/milesj
85
+
86
+ #### Third Party ####
87
+ * `Normalize.css` provided by Nicolas Gallagher
88
+ * `Iconic` icon set provided by P.J. Onori
89
+
90
+ ## Known Issues ##
91
+ * Slide in modal animations do not work correctly in Chrome/IE
92
+ * Flip modal animations do not work in Opera
93
+ * Tooltip positioning does not work in Opera
@@ -3,6 +3,6 @@ require 'compass'
3
3
  root = File.join(File.dirname(__FILE__), "..")
4
4
 
5
5
  Compass::Frameworks.register("toolkit",
6
- :stylesheets_directory => File.join(root, "scss"),
7
- :templates_directory => File.join(root, "templates")
6
+ :stylesheets_directory => File.join(root, "scss"),
7
+ :templates_directory => File.join(root, "templates")
8
8
  )
@@ -1,7 +1,7 @@
1
1
  /**
2
- * @copyright Copyright 2010-2013, The Titon Project
3
- * @license http://opensource.org/licenses/bsd-license.php
4
- * @link http://titon.io
2
+ * @copyright 2010-2013, The Titon Project
3
+ * @license http://opensource.org/licenses/bsd-license.php
4
+ * @link http://titon.io
5
5
  */
6
6
 
7
7
  @import "normalize";
@@ -1,7 +1,7 @@
1
1
  /**
2
- * @copyright Copyright 2010-2013, The Titon Project
3
- * @license http://opensource.org/licenses/bsd-license.php
4
- * @link http://titon.io
2
+ * @copyright 2010-2013, The Titon Project
3
+ * @license http://opensource.org/licenses/bsd-license.php
4
+ * @link http://titon.io
5
5
  */
6
6
 
7
7
  @import "../common";
@@ -9,67 +9,67 @@
9
9
  //-------------------- Gloss --------------------//
10
10
 
11
11
  .visual-gloss {
12
- &:after {
13
- content: "";
14
- position: absolute;
15
- width: 100%;
16
- height: 60%;
17
- top: 1%;
18
- left: 0;
19
- border-radius: 0 0 2rem 2rem / 0 0 1rem 1rem;
20
- @include background-image(linear-gradient(left, white(.3) 0%, white(0) 50%, white(.3) 100%));
21
- }
12
+ &:after {
13
+ content: "";
14
+ position: absolute;
15
+ width: 100%;
16
+ height: 60%;
17
+ top: 1%;
18
+ left: 0;
19
+ border-radius: 0 0 2rem 2rem / 0 0 1rem 1rem;
20
+ @include background-image(linear-gradient(left, white(.3) 0%, white(0) 50%, white(.3) 100%));
21
+ }
22
22
 
23
- &.round:after {
24
- border-radius: .2rem .2rem 2rem 2rem / .5rem .5rem 1rem 1rem;
25
- width: 98%;
26
- left: 1.5%;
27
- }
23
+ &.round:after {
24
+ border-radius: .2rem .2rem 2rem 2rem / .5rem .5rem 1rem 1rem;
25
+ width: 98%;
26
+ left: 1.5%;
27
+ }
28
28
 
29
- &.pill:after,
30
- &.oval:after,
31
- &.skew:after {
32
- width: 90%;
33
- left: 5.5%;
34
- }
29
+ &.pill:after,
30
+ &.oval:after,
31
+ &.skew:after {
32
+ width: 90%;
33
+ left: 5.5%;
34
+ }
35
35
 
36
- &.pill:after { border-radius: 1rem 1rem 2rem 2rem / 1rem 1rem 1rem 1rem; }
37
- &.oval:after { border-radius: 5rem 5rem 4rem 4rem / 1.5rem 1.5rem 1.5rem 1.5rem; }
38
- &.skew:after { border-radius: 1rem 1rem 3rem 3rem / 1rem 1rem 2rem 2rem; }
36
+ &.pill:after { border-radius: 1rem 1rem 2rem 2rem / 1rem 1rem 1rem 1rem; }
37
+ &.oval:after { border-radius: 5rem 5rem 4rem 4rem / 1.5rem 1.5rem 1.5rem 1.5rem; }
38
+ &.skew:after { border-radius: 1rem 1rem 3rem 3rem / 1rem 1rem 2rem 2rem; }
39
39
  }
40
40
 
41
41
  //-------------------- Reflection --------------------//
42
42
 
43
43
  .visual-reflect:after {
44
- content: "";
45
- position: absolute;
46
- width: 100%;
47
- height: 50%;
48
- top: 0;
49
- left: 0;
50
- @include background-image(linear-gradient(top, white(0), white(.3)));
44
+ content: "";
45
+ position: absolute;
46
+ width: 100%;
47
+ height: 50%;
48
+ top: 0;
49
+ left: 0;
50
+ @include background-image(linear-gradient(top, white(0), white(.3)));
51
51
  }
52
52
 
53
53
  //-------------------- Glare --------------------//
54
54
 
55
55
  .visual-glare:after {
56
- content: "";
57
- position: absolute;
58
- width: 100%;
59
- height: 100%;
60
- top: 0;
61
- left: 0;
62
- @include background-image(linear-gradient(160deg, white(.5) 0%, white(.1) 50%, white(0) 50%, white(.3) 100%));
56
+ content: "";
57
+ position: absolute;
58
+ width: 100%;
59
+ height: 100%;
60
+ top: 0;
61
+ left: 0;
62
+ @include background-image(linear-gradient(160deg, white(.5) 0%, white(.1) 50%, white(0) 50%, white(.3) 100%));
63
63
  }
64
64
 
65
65
  //-------------------- Popout --------------------//
66
66
 
67
67
  .visual-popout {
68
- box-shadow: 0 6px 0 0 black(.25) !important;
69
- top: -3px;
68
+ box-shadow: 0 6px 0 0 black(.25) !important;
69
+ top: -3px;
70
70
 
71
- &:active {
72
- box-shadow: 0 3px 0 0 black(.5) !important;
73
- top: 0;
74
- }
71
+ &:active {
72
+ box-shadow: 0 3px 0 0 black(.5) !important;
73
+ top: 0;
74
+ }
75
75
  }
@@ -1,7 +1,7 @@
1
1
  /**
2
- * @copyright Copyright 2010-2013, The Titon Project
3
- * @license http://opensource.org/licenses/bsd-license.php
4
- * @link http://titon.io
2
+ * @copyright 2010-2013, The Titon Project
3
+ * @license http://opensource.org/licenses/bsd-license.php
4
+ * @link http://titon.io
5
5
  */
6
6
 
7
7
  @import "../common";
@@ -49,11 +49,11 @@ button[disabled] { cursor: not-allowed !important; pointer-events: none; }
49
49
  .caret-down,
50
50
  .caret-left,
51
51
  .caret-right {
52
- @include reset-inline-block;
53
- border: 5px solid transparent;
54
- content: "";
55
- height: 0;
56
- width: 0;
52
+ @include reset-inline-block;
53
+ border: 5px solid transparent;
54
+ content: "";
55
+ height: 0;
56
+ width: 0;
57
57
  }
58
58
 
59
59
  .caret-up { border-bottom-color: $foreground-color; }
@@ -63,31 +63,31 @@ button[disabled] { cursor: not-allowed !important; pointer-events: none; }
63
63
 
64
64
  // Close
65
65
  .x {
66
- @include reset-inline-block;
67
- color: $foreground-color;
68
- font: bold 1.5rem/100% Arial, sans-serif;
69
- text-transform: uppercase;
66
+ @include reset-inline-block;
67
+ color: $foreground-color;
68
+ font: bold 1.5rem/100% Arial, sans-serif;
69
+ text-transform: uppercase;
70
70
  }
71
71
 
72
72
  .close {
73
- @include reset-inline-block;
74
- width: 30px;
75
- height: 30px;
76
- line-height: 30px;
77
- text-align: center;
78
- background: white(.5);
79
- border-radius: 2px;
80
- cursor: pointer;
81
-
82
- .x {
83
- color: black(.5);
84
- position: relative;
85
- top: -1px;
86
- }
87
-
88
- &:hover {
89
- background: white(.8);
90
-
91
- .x { color: black(.75); }
92
- }
73
+ @include reset-inline-block;
74
+ width: 30px;
75
+ height: 30px;
76
+ line-height: 30px;
77
+ text-align: center;
78
+ background: white(.5);
79
+ border-radius: 2px;
80
+ cursor: pointer;
81
+
82
+ .x {
83
+ color: black(.5);
84
+ position: relative;
85
+ top: -1px;
86
+ }
87
+
88
+ &:hover {
89
+ background: white(.8);
90
+
91
+ .x { color: black(.75); }
92
+ }
93
93
  }
@@ -1,7 +1,7 @@
1
1
  /**
2
- * @copyright Copyright 2010-2013, The Titon Project
3
- * @license http://opensource.org/licenses/bsd-license.php
4
- * @link http://titon.io
2
+ * @copyright 2010-2013, The Titon Project
3
+ * @license http://opensource.org/licenses/bsd-license.php
4
+ * @link http://titon.io
5
5
  */
6
6
 
7
7
  @import "../common";
@@ -10,52 +10,52 @@ code,
10
10
  var,
11
11
  kbd,
12
12
  pre {
13
- font: normal .8rem/115% Consolas, Monaco, 'Andale Mono', monospace;
13
+ font: normal .8rem/115% Consolas, Monaco, 'Andale Mono', monospace;
14
14
  }
15
15
 
16
16
  code,
17
17
  var,
18
18
  kbd {
19
- display: inline-block;
20
- background: $gray-dark;
21
- border-radius: 2px;
22
- padding: 2px 4px;
19
+ display: inline-block;
20
+ background: $gray-dark;
21
+ border-radius: 2px;
22
+ padding: 2px 4px;
23
23
  }
24
24
 
25
25
  pre {
26
- padding: $padding;
27
- margin: $margin 0;
28
- background: $gray-light;
29
- border: 1px solid $gray-dark;
30
- border-radius: 3px;
31
- text-align: left;
32
- direction: ltr;
33
- white-space: pre;
34
- word-spacing: normal;
35
- font-size: .9rem;
36
- overflow-x: auto;
26
+ padding: $padding;
27
+ margin: $margin 0;
28
+ background: $gray-light;
29
+ border: 1px solid $gray-dark;
30
+ border-radius: 3px;
31
+ text-align: left;
32
+ direction: ltr;
33
+ white-space: pre;
34
+ word-spacing: normal;
35
+ font-size: .9rem;
36
+ overflow-x: auto;
37
37
 
38
- code {
39
- padding: 0;
40
- margin: 0;
41
- color: inherit;
42
- font: inherit;
43
- white-space: pre-wrap;
44
- background: transparent;
45
- border: none;
46
- }
38
+ code {
39
+ padding: 0;
40
+ margin: 0;
41
+ color: inherit;
42
+ font: inherit;
43
+ white-space: pre-wrap;
44
+ background: transparent;
45
+ border: none;
46
+ }
47
47
 
48
- &.code--scrollable {
49
- max-height: 350px;
50
- overflow-y: auto;
51
- }
48
+ &.code--scrollable {
49
+ max-height: 350px;
50
+ overflow-y: auto;
51
+ }
52
52
  }
53
53
 
54
54
  kbd {
55
- background: #fff;
56
- position: relative;
57
- border: 1px solid $gray-dark;
58
- border-top-color: $gray-dark;
59
- box-shadow: 0 2px 0 1px $gray-darkest;
60
- top: -3px;
55
+ background: #fff;
56
+ position: relative;
57
+ border: 1px solid $gray-dark;
58
+ border-top-color: $gray-dark;
59
+ box-shadow: 0 2px 0 1px $gray-darkest;
60
+ top: -3px;
61
61
  }
@@ -1,7 +1,7 @@
1
1
  /**
2
- * @copyright Copyright 2010-2013, The Titon Project
3
- * @license http://opensource.org/licenses/bsd-license.php
4
- * @link http://titon.io
2
+ * @copyright 2010-2013, The Titon Project
3
+ * @license http://opensource.org/licenses/bsd-license.php
4
+ * @link http://titon.io
5
5
  */
6
6
 
7
7
  @import "../common";
@@ -9,20 +9,20 @@
9
9
  form { text-align: left; }
10
10
 
11
11
  fieldset {
12
- padding: $padding 0;
13
- margin: 0;
14
- border: 0;
15
- border-top: 1px solid $gray-dark;
16
-
17
- &.legendless {
18
- border: 0;
19
- padding: 0;
20
- }
12
+ padding: $padding 0;
13
+ margin: 0;
14
+ border: 0;
15
+ border-top: 1px solid $gray-dark;
16
+
17
+ &.legendless {
18
+ border: 0;
19
+ padding: 0;
20
+ }
21
21
  }
22
22
 
23
23
  legend {
24
- font-size: 1.3rem;
25
- padding-right: $padding;
24
+ font-size: 1.3rem;
25
+ padding-right: $padding;
26
26
  }
27
27
 
28
28
  select[multiple],
@@ -30,129 +30,129 @@ select[size] { height: auto; }
30
30
 
31
31
  // Reset browser styles
32
32
  input::-moz-focus-inner {
33
- padding: 0;
34
- border: 0;
33
+ padding: 0;
34
+ border: 0;
35
35
  }
36
36
 
37
37
  // Required values to match browser restrictions
38
38
  label,
39
39
  .input-static {
40
- font-size: inherit;
41
- line-height: normal;
40
+ font-size: inherit;
41
+ line-height: normal;
42
42
  }
43
43
 
44
44
  //-------------------- Inputs --------------------//
45
45
 
46
46
  .input,
47
47
  .input-static {
48
- @include reset-inline-block;
49
- border: 1px solid $gray-dark;
50
- font-size: $medium-size;
51
- padding: $medium-padding;
48
+ @include reset-inline-block;
49
+ border: 1px solid $gray-dark;
50
+ font-size: $medium-size;
51
+ padding: $medium-padding;
52
52
  }
53
53
 
54
54
  .input {
55
- background: $gray-lightest;
56
- border-radius: $round;
57
- @include transition(all .3s);
58
-
59
- &:hover { border-color: $gray-darkest; }
60
- &:focus { border-color: $info; box-shadow: 0 0 5px $info-light; outline: 0; }
61
-
62
- @include disabled-state {
63
- cursor: not-allowed;
64
- color: $gray-darkest;
65
- border-color: $gray;
66
- }
67
-
68
- &[readonly] {
69
- color: $gray-darkest;
70
- border: 1px solid $gray-dark;
71
- box-shadow: none;
72
- }
55
+ background: $gray-lightest;
56
+ border-radius: $round;
57
+ @include transition(all .3s);
58
+
59
+ &:hover { border-color: $gray-darkest; }
60
+ &:focus { border-color: $info; box-shadow: 0 0 5px $info-light; outline: 0; }
61
+
62
+ @include disabled-state {
63
+ cursor: not-allowed;
64
+ color: $gray-darkest;
65
+ border-color: $gray;
66
+ }
67
+
68
+ &[readonly] {
69
+ color: $gray-darkest;
70
+ border: 1px solid $gray-dark;
71
+ box-shadow: none;
72
+ }
73
73
  }
74
74
 
75
75
  .input-static {
76
- background: transparent;
77
- border-color: transparent;
78
- padding-left: 0;
79
- padding-right: 0;
76
+ background: transparent;
77
+ border-color: transparent;
78
+ padding-left: 0;
79
+ padding-right: 0;
80
80
  }
81
81
 
82
82
  select.input { padding: $medium-padding - .05; } // fixes vertical alignment
83
83
  select.input[multiple] { min-height: 150px; max-height: 500px; }
84
84
 
85
85
  textarea.input {
86
- line-height: 135%;
87
- min-height: 150px;
86
+ line-height: 135%;
87
+ min-height: 150px;
88
88
  }
89
89
 
90
90
  .radio,
91
91
  .checkbox {
92
- display: inline-block;
93
- vertical-align: middle;
94
- cursor: pointer;
95
-
96
- input[type="checkbox"],
97
- input[type="radio"] {
98
- vertical-align: middle;
99
- position: relative;
100
- top: -1px;
101
- margin-right: 3px;
102
- }
92
+ display: inline-block;
93
+ vertical-align: middle;
94
+ cursor: pointer;
95
+
96
+ input[type="checkbox"],
97
+ input[type="radio"] {
98
+ vertical-align: middle;
99
+ position: relative;
100
+ top: -1px;
101
+ margin-right: 3px;
102
+ }
103
103
  }
104
104
 
105
105
  //-------------------- Fields, Labels --------------------//
106
106
 
107
107
  .field {
108
- margin-bottom: $margin;
108
+ margin-bottom: $margin;
109
109
 
110
- &.is-required {
111
- .field-label { font-weight: bold; }
112
- }
110
+ &.is-required {
111
+ .field-label { font-weight: bold; }
112
+ }
113
113
 
114
- @include field-style;
114
+ @include field-style;
115
115
  }
116
116
 
117
117
  .field-label {
118
- display: block;
119
- vertical-align: middle;
120
- margin-bottom: 7px;
118
+ display: block;
119
+ vertical-align: middle;
120
+ margin-bottom: 7px;
121
121
  }
122
122
 
123
123
  .field-help {
124
- margin-top: 7px;
125
- font-size: $small-size;
124
+ margin-top: 7px;
125
+ font-size: $small-size;
126
126
  }
127
127
 
128
128
  .form-actions {
129
- text-align: center;
129
+ text-align: center;
130
130
  }
131
131
 
132
132
  //-------------------- Modifiers --------------------//
133
133
 
134
134
  .form--horizontal {
135
- .field { @include grid-row; }
135
+ .field { @include grid-row; }
136
136
 
137
- .field-label {
138
- text-align: right;
139
- border: 1px solid transparent; // matches input sizes
140
- padding-top: $medium-padding;
141
- }
137
+ .field-label {
138
+ text-align: right;
139
+ border: 1px solid transparent; // matches input sizes
140
+ padding-top: $medium-padding;
141
+ }
142
142
 
143
- .field-col { padding-left: $margin; }
143
+ .field-col { padding-left: $margin; }
144
144
  }
145
145
 
146
146
  .form--inline {
147
- .field,
148
- .field-label,
149
- .form-actions {
150
- display: inline-block;
151
- vertical-align: middle;
152
- margin-right: $margin;
153
- margin-bottom: $margin / 2;
154
- }
155
-
156
- .field-label { margin: 0 ($margin / 2) 0 0; }
157
- .field-help { display: none; }
147
+ .field,
148
+ .field-label,
149
+ .form-actions {
150
+ display: inline-block;
151
+ vertical-align: middle;
152
+ margin-right: $margin;
153
+ margin-bottom: $margin / 2;
154
+ }
155
+
156
+ .field-label { margin: 0 ($margin / 2) 0 0; }
157
+ .field-help { display: none; }
158
158
  }