bootstrap-jasny 0.1.12

Sign up to get free protection for your applications and to get access to all the features.
Files changed (100) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE.txt +20 -0
  3. data/README.rdoc +27 -0
  4. data/lib/bootstrap-jasny.rb +51 -0
  5. data/lib/bootstrap-jasny/compass_functions.rb +24 -0
  6. data/lib/bootstrap-jasny/engine.rb +7 -0
  7. data/lib/bootstrap-jasny/less_functions.rb +14 -0
  8. data/vendor/assets/fonts/bootstrap/iconic/iconic_fill.eot +0 -0
  9. data/vendor/assets/fonts/bootstrap/iconic/iconic_fill.otf +0 -0
  10. data/vendor/assets/fonts/bootstrap/iconic/iconic_fill.svg +475 -0
  11. data/vendor/assets/fonts/bootstrap/iconic/iconic_fill.ttf +0 -0
  12. data/vendor/assets/fonts/bootstrap/iconic/iconic_fill.woff +0 -0
  13. data/vendor/assets/fonts/bootstrap/iconic/iconic_stroke.eot +0 -0
  14. data/vendor/assets/fonts/bootstrap/iconic/iconic_stroke.otf +0 -0
  15. data/vendor/assets/fonts/bootstrap/iconic/iconic_stroke.svg +492 -0
  16. data/vendor/assets/fonts/bootstrap/iconic/iconic_stroke.ttf +0 -0
  17. data/vendor/assets/fonts/bootstrap/iconic/iconic_stroke.woff +0 -0
  18. data/vendor/assets/images/bootstrap/glyphicons-halflings-white.png +0 -0
  19. data/vendor/assets/images/bootstrap/glyphicons-halflings.png +0 -0
  20. data/vendor/assets/javascripts/bootstrap-affix.js +117 -0
  21. data/vendor/assets/javascripts/bootstrap-alert.js +99 -0
  22. data/vendor/assets/javascripts/bootstrap-button.js +105 -0
  23. data/vendor/assets/javascripts/bootstrap-carousel.js +207 -0
  24. data/vendor/assets/javascripts/bootstrap-collapse.js +167 -0
  25. data/vendor/assets/javascripts/bootstrap-dropdown.js +165 -0
  26. data/vendor/assets/javascripts/bootstrap-fileupload.js +169 -0
  27. data/vendor/assets/javascripts/bootstrap-inputmask.js +355 -0
  28. data/vendor/assets/javascripts/bootstrap-modal.js +247 -0
  29. data/vendor/assets/javascripts/bootstrap-popover.js +114 -0
  30. data/vendor/assets/javascripts/bootstrap-rowlink.js +71 -0
  31. data/vendor/assets/javascripts/bootstrap-scrollspy.js +162 -0
  32. data/vendor/assets/javascripts/bootstrap-tab.js +144 -0
  33. data/vendor/assets/javascripts/bootstrap-tooltip.js +361 -0
  34. data/vendor/assets/javascripts/bootstrap-transition.js +60 -0
  35. data/vendor/assets/javascripts/bootstrap-typeahead.js +524 -0
  36. data/vendor/assets/javascripts/bootstrap.js +21 -0
  37. data/vendor/assets/stylesheets/bootstrap-responsive.less +1 -0
  38. data/vendor/assets/stylesheets/bootstrap.less +2 -0
  39. data/vendor/assets/stylesheets/bootstrap/accordion.less +34 -0
  40. data/vendor/assets/stylesheets/bootstrap/action-areas.less +14 -0
  41. data/vendor/assets/stylesheets/bootstrap/action-links.less +57 -0
  42. data/vendor/assets/stylesheets/bootstrap/alerts.less +79 -0
  43. data/vendor/assets/stylesheets/bootstrap/bootstrap.less +63 -0
  44. data/vendor/assets/stylesheets/bootstrap/breadcrumbs.less +24 -0
  45. data/vendor/assets/stylesheets/bootstrap/button-groups.less +229 -0
  46. data/vendor/assets/stylesheets/bootstrap/buttons.less +228 -0
  47. data/vendor/assets/stylesheets/bootstrap/carousel.less +158 -0
  48. data/vendor/assets/stylesheets/bootstrap/close.less +32 -0
  49. data/vendor/assets/stylesheets/bootstrap/code.less +61 -0
  50. data/vendor/assets/stylesheets/bootstrap/component-animations.less +22 -0
  51. data/vendor/assets/stylesheets/bootstrap/dropdowns.less +237 -0
  52. data/vendor/assets/stylesheets/bootstrap/fileupload.less +105 -0
  53. data/vendor/assets/stylesheets/bootstrap/forms-uneditable.less +159 -0
  54. data/vendor/assets/stylesheets/bootstrap/forms.less +690 -0
  55. data/vendor/assets/stylesheets/bootstrap/grid.less +21 -0
  56. data/vendor/assets/stylesheets/bootstrap/hero-unit.less +25 -0
  57. data/vendor/assets/stylesheets/bootstrap/iconic.less +209 -0
  58. data/vendor/assets/stylesheets/bootstrap/jasny-bootstrap.less +31 -0
  59. data/vendor/assets/stylesheets/bootstrap/jasny-forms.less +99 -0
  60. data/vendor/assets/stylesheets/bootstrap/jasny-forms.responsive-1200px-min.less +16 -0
  61. data/vendor/assets/stylesheets/bootstrap/jasny-forms.responsive-767px-max.less +17 -0
  62. data/vendor/assets/stylesheets/bootstrap/jasny-forms.responsive-768px-979px.less +36 -0
  63. data/vendor/assets/stylesheets/bootstrap/jasny-navs-tabbable.less +148 -0
  64. data/vendor/assets/stylesheets/bootstrap/jasny-responsive.less +27 -0
  65. data/vendor/assets/stylesheets/bootstrap/labels-badges.less +84 -0
  66. data/vendor/assets/stylesheets/bootstrap/layouts-semifluid.less +11 -0
  67. data/vendor/assets/stylesheets/bootstrap/layouts-semifluid.responsive-1200px-min.less +7 -0
  68. data/vendor/assets/stylesheets/bootstrap/layouts.less +16 -0
  69. data/vendor/assets/stylesheets/bootstrap/media.less +55 -0
  70. data/vendor/assets/stylesheets/bootstrap/mixins.less +702 -0
  71. data/vendor/assets/stylesheets/bootstrap/modals.less +95 -0
  72. data/vendor/assets/stylesheets/bootstrap/navbar.less +497 -0
  73. data/vendor/assets/stylesheets/bootstrap/navs.less +409 -0
  74. data/vendor/assets/stylesheets/bootstrap/page-alert.less +23 -0
  75. data/vendor/assets/stylesheets/bootstrap/page-alert.responsive-1200px-min.less +11 -0
  76. data/vendor/assets/stylesheets/bootstrap/page-alert.responsive-767px-max.less +20 -0
  77. data/vendor/assets/stylesheets/bootstrap/pager.less +43 -0
  78. data/vendor/assets/stylesheets/bootstrap/pagination.less +123 -0
  79. data/vendor/assets/stylesheets/bootstrap/popovers.less +133 -0
  80. data/vendor/assets/stylesheets/bootstrap/progress-bars.less +122 -0
  81. data/vendor/assets/stylesheets/bootstrap/reset.less +216 -0
  82. data/vendor/assets/stylesheets/bootstrap/responsive-1200px-min.less +28 -0
  83. data/vendor/assets/stylesheets/bootstrap/responsive-767px-max.less +193 -0
  84. data/vendor/assets/stylesheets/bootstrap/responsive-768px-979px.less +19 -0
  85. data/vendor/assets/stylesheets/bootstrap/responsive-navbar.less +189 -0
  86. data/vendor/assets/stylesheets/bootstrap/responsive-row-desktop.less +23 -0
  87. data/vendor/assets/stylesheets/bootstrap/responsive-tables.less +30 -0
  88. data/vendor/assets/stylesheets/bootstrap/responsive-utilities.less +59 -0
  89. data/vendor/assets/stylesheets/bootstrap/responsive.less +48 -0
  90. data/vendor/assets/stylesheets/bootstrap/rowlink.less +20 -0
  91. data/vendor/assets/stylesheets/bootstrap/scaffolding.less +53 -0
  92. data/vendor/assets/stylesheets/bootstrap/sprites.less +197 -0
  93. data/vendor/assets/stylesheets/bootstrap/tables.less +244 -0
  94. data/vendor/assets/stylesheets/bootstrap/thumbnails.less +53 -0
  95. data/vendor/assets/stylesheets/bootstrap/tooltip.less +70 -0
  96. data/vendor/assets/stylesheets/bootstrap/type.less +247 -0
  97. data/vendor/assets/stylesheets/bootstrap/utilities.less +30 -0
  98. data/vendor/assets/stylesheets/bootstrap/variables.less +302 -0
  99. data/vendor/assets/stylesheets/bootstrap/wells.less +29 -0
  100. metadata +241 -0
@@ -0,0 +1,148 @@
1
+ // Jasny.navs-tabbable.less
2
+ // Improvements for tabbable component declared in navs.less
3
+ // ---------------------------------------------------------
4
+
5
+
6
+ // No outline for tabs and pills
7
+ .nav-tabs > li > a,
8
+ .nav-pills > li > a {
9
+ outline: none;
10
+ }
11
+
12
+ // Disabled tab
13
+ .nav-tabs > li.disabled > a {
14
+ color: #CCCCCC;
15
+ cursor: not-allowed;
16
+ }
17
+
18
+
19
+ // TABBABLE
20
+ // --------
21
+
22
+
23
+ // COMMON STYLES
24
+ // -------------
25
+
26
+ // Clear any floats
27
+ .tabbable {
28
+ .clearfix();
29
+ border-style: solid;
30
+ border-color: #ddd;
31
+ border-width: 0px;
32
+ }
33
+
34
+ // Make the tab content grow correctly
35
+ .tabbable > .nav-tabs {
36
+ margin: 0;
37
+ }
38
+ .tab-content {
39
+ overflow: auto; // prevent content from running below tabs
40
+ border-style: solid;
41
+ border-color: #ddd;
42
+ border-width: 0px;
43
+ padding: 18px 0 0 0;
44
+ }
45
+
46
+ // Tabs on top
47
+ .tabbable-bordered {
48
+ .border-radius(4px);
49
+ > .tab-content {
50
+ border-width: 0 1px 1px 1px;
51
+ padding: 20px 20px 10px 20px;
52
+ .border-radius(0 0 4px 4px);
53
+ }
54
+ }
55
+
56
+ // Container as tabbable
57
+ body > .container.tabbable > .nav-tabs {
58
+ padding-top: 15px;
59
+ }
60
+
61
+ // BOTTOM
62
+ // ------
63
+
64
+ .tabs-below > .tab-content {
65
+ padding: 0 0 10px 0;
66
+ }
67
+ .tabs-below.tabbable-bordered {
68
+ > .tab-content {
69
+ border-width: 1px 1px 0 1px;
70
+ padding: 20px 20px 10px 20px;
71
+ .border-radius(4px 4px 0 0);
72
+ }
73
+ }
74
+ body > .container.tabs-below.tabbable-bodered > .tab-content {
75
+ border-top-width: 0;
76
+ .border-radius(0)
77
+ }
78
+
79
+ // LEFT & RIGHT
80
+ // ------------
81
+
82
+ // Common styles
83
+ .tabs-left,
84
+ .tabs-right {
85
+ margin-bottom: 20px;
86
+ }
87
+ .tabs-left > .nav-tabs,
88
+ .tabs-right > .nav-tabs {
89
+ position: relative;
90
+ z-index: 1;
91
+ margin-bottom: 0;
92
+ }
93
+ .tabs-left > .tab-content,
94
+ .tabs-right > .tab-content {
95
+ overflow: hidden;
96
+ }
97
+
98
+ // Tabs on the left
99
+ .tabs-left > .nav-tabs {
100
+ left: 1px;
101
+ }
102
+ .tabs-left > .nav-tabs > .active > a,
103
+ .tabs-left > .nav-tabs > .active > a:hover {
104
+ border-color: #ddd transparent #ddd #ddd;
105
+ *border-right-color: @white;
106
+ }
107
+ .tabs-left > .tab-content {
108
+ padding: 0 0 0 19px;
109
+ border-left-width: 1px;
110
+ }
111
+ .tabs-left.tabbable-bordered {
112
+ border-width: 0 1px 0 0;
113
+ > .tab-content {
114
+ border-width: 1px 0 1px 1px;
115
+ padding: 20px 20px 10px 20px;
116
+ .border-radius(0 4px 4px 0);
117
+ }
118
+ }
119
+ body > .container.tabs-left.tabbable-bodered > .tab-content {
120
+ border-top-width: 0;
121
+ .border-radius(0 0 4px 0);
122
+ }
123
+
124
+ // Tabs on the right
125
+ .tabs-right > .nav-tabs {
126
+ right: 1px;
127
+ }
128
+ .tabs-right > .nav-tabs > .active > a,
129
+ .tabs-right > .nav-tabs > .active > a:hover {
130
+ border-color: #ddd #ddd #ddd transparent;
131
+ *border-left-color: @white;
132
+ }
133
+ .tabs-right > .tab-content {
134
+ padding: 0 19px 0 0;
135
+ border-right-width: 1px;
136
+ }
137
+ .tabs-right.tabbable-bordered {
138
+ border-width: 0 0 0 1px;
139
+ > .tab-content {
140
+ border-width: 1px 1px 1px 0;
141
+ padding: 20px 20px 10px 20px;
142
+ .border-radius(4px 0 0 4px);
143
+ }
144
+ }
145
+ body > .container.tabs-right.tabbable-bodered > .tab-content {
146
+ border-top-width: 0;
147
+ .border-radius(0 0 0 4px);
148
+ }
@@ -0,0 +1,27 @@
1
+ /*!
2
+ * Jasny Bootstrap Responsive Extensions j3
3
+ *
4
+ * Copyright 2012 Jasny BV
5
+ * Licensed under the Apache License v2.0
6
+ * http://www.apache.org/licenses/LICENSE-2.0
7
+ *
8
+ * Extended with pride by @ArnoldDaniels of jasny.net
9
+ */
10
+
11
+ // Core variables and mixins
12
+ @import "variables.less"; // Modify this for custom colors, font-sizes, etc
13
+ @import "mixins.less";
14
+
15
+ // Grid system and page structure
16
+ @import "layouts-semifluid.responsive-1200px-min.less";
17
+ @import "responsive-row-desktop.less";
18
+ @import "responsive-tables.less";
19
+
20
+ // Base CSS
21
+ @import "jasny-forms.responsive-767px-max.less";
22
+ @import "jasny-forms.responsive-768px-979px.less";
23
+ @import "jasny-forms.responsive-1200px-min.less";
24
+
25
+ // Components: Buttons & Alerts
26
+ @import "page-alert.responsive-767px-max.less";
27
+ @import "page-alert.responsive-1200px-min.less";
@@ -0,0 +1,84 @@
1
+ //
2
+ // Labels and badges
3
+ // --------------------------------------------------
4
+
5
+
6
+ // Base classes
7
+ .label,
8
+ .badge {
9
+ display: inline-block;
10
+ padding: 2px 4px;
11
+ font-size: @baseFontSize * .846;
12
+ font-weight: bold;
13
+ line-height: 14px; // ensure proper line-height if floated
14
+ color: @white;
15
+ vertical-align: baseline;
16
+ white-space: nowrap;
17
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
18
+ background-color: @grayLight;
19
+ }
20
+ // Set unique padding and border-radii
21
+ .label {
22
+ .border-radius(3px);
23
+ }
24
+ .badge {
25
+ padding-left: 9px;
26
+ padding-right: 9px;
27
+ .border-radius(9px);
28
+ }
29
+
30
+ // Empty labels/badges collapse
31
+ .label,
32
+ .badge {
33
+ &:empty {
34
+ display: none;
35
+ }
36
+ }
37
+
38
+ // Hover/focus state, but only for links
39
+ a {
40
+ &.label:hover,
41
+ &.label:focus,
42
+ &.badge:hover,
43
+ &.badge:focus {
44
+ color: @white;
45
+ text-decoration: none;
46
+ cursor: pointer;
47
+ }
48
+ }
49
+
50
+ // Colors
51
+ // Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
52
+ .label,
53
+ .badge {
54
+ // Important (red)
55
+ &-important { background-color: @errorText; }
56
+ &-important[href] { background-color: darken(@errorText, 10%); }
57
+ // Warnings (orange)
58
+ &-warning { background-color: @orange; }
59
+ &-warning[href] { background-color: darken(@orange, 10%); }
60
+ // Success (green)
61
+ &-success { background-color: @successText; }
62
+ &-success[href] { background-color: darken(@successText, 10%); }
63
+ // Info (turquoise)
64
+ &-info { background-color: @infoText; }
65
+ &-info[href] { background-color: darken(@infoText, 10%); }
66
+ // Inverse (black)
67
+ &-inverse { background-color: @grayDark; }
68
+ &-inverse[href] { background-color: darken(@grayDark, 10%); }
69
+ }
70
+
71
+ // Quick fix for labels/badges in buttons
72
+ .btn {
73
+ .label,
74
+ .badge {
75
+ position: relative;
76
+ top: -1px;
77
+ }
78
+ }
79
+ .btn-mini {
80
+ .label,
81
+ .badge {
82
+ top: 0;
83
+ }
84
+ }
@@ -0,0 +1,11 @@
1
+ // Layouts
2
+ // Fixed-width and fluid (with sidebar) layouts
3
+ // --------------------------------------------
4
+
5
+ // Fluid container for small screens, fixed for big screens
6
+ .container-semifluid {
7
+ .container-fixed();
8
+ padding-left: @gridGutterWidth;
9
+ padding-right: @gridGutterWidth;
10
+ max-width: @gridRowWidth;
11
+ }
@@ -0,0 +1,7 @@
1
+ // RESPONSIVE CLASSES
2
+ // ------------------
3
+
4
+ // Semi-fluid container can grow up to size for big desktops
5
+ .container-semifluid {
6
+ max-width: 1170px;
7
+ }
@@ -0,0 +1,16 @@
1
+ //
2
+ // Layouts
3
+ // --------------------------------------------------
4
+
5
+
6
+ // Container (centered, fixed-width layouts)
7
+ .container {
8
+ .container-fixed();
9
+ }
10
+
11
+ // Fluid layouts (left aligned, with sidebar, min- & max-width content)
12
+ .container-fluid {
13
+ padding-right: @gridGutterWidth;
14
+ padding-left: @gridGutterWidth;
15
+ .clearfix();
16
+ }
@@ -0,0 +1,55 @@
1
+ // Media objects
2
+ // Source: http://stubbornella.org/content/?p=497
3
+ // --------------------------------------------------
4
+
5
+
6
+ // Common styles
7
+ // -------------------------
8
+
9
+ // Clear the floats
10
+ .media,
11
+ .media-body {
12
+ overflow: hidden;
13
+ *overflow: visible;
14
+ zoom: 1;
15
+ }
16
+
17
+ // Proper spacing between instances of .media
18
+ .media,
19
+ .media .media {
20
+ margin-top: 15px;
21
+ }
22
+ .media:first-child {
23
+ margin-top: 0;
24
+ }
25
+
26
+ // For images and videos, set to block
27
+ .media-object {
28
+ display: block;
29
+ }
30
+
31
+ // Reset margins on headings for tighter default spacing
32
+ .media-heading {
33
+ margin: 0 0 5px;
34
+ }
35
+
36
+
37
+ // Media image alignment
38
+ // -------------------------
39
+
40
+ .media > .pull-left {
41
+ margin-right: 10px;
42
+ }
43
+ .media > .pull-right {
44
+ margin-left: 10px;
45
+ }
46
+
47
+
48
+ // Media list variation
49
+ // -------------------------
50
+
51
+ // Undo default ul/ol styles
52
+ .media-list {
53
+ margin-left: 0;
54
+ list-style: none;
55
+ }
@@ -0,0 +1,702 @@
1
+ //
2
+ // Mixins
3
+ // --------------------------------------------------
4
+
5
+
6
+ // UTILITY MIXINS
7
+ // --------------------------------------------------
8
+
9
+ // Clearfix
10
+ // --------
11
+ // For clearing floats like a boss h5bp.com/q
12
+ .clearfix {
13
+ *zoom: 1;
14
+ &:before,
15
+ &:after {
16
+ display: table;
17
+ content: "";
18
+ // Fixes Opera/contenteditable bug:
19
+ // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
20
+ line-height: 0;
21
+ }
22
+ &:after {
23
+ clear: both;
24
+ }
25
+ }
26
+
27
+ // Webkit-style focus
28
+ // ------------------
29
+ .tab-focus() {
30
+ // Default
31
+ outline: thin dotted #333;
32
+ // Webkit
33
+ outline: 5px auto -webkit-focus-ring-color;
34
+ outline-offset: -2px;
35
+ }
36
+
37
+ // Center-align a block level element
38
+ // ----------------------------------
39
+ .center-block() {
40
+ display: block;
41
+ margin-left: auto;
42
+ margin-right: auto;
43
+ }
44
+
45
+ // IE7 inline-block
46
+ // ----------------
47
+ .ie7-inline-block() {
48
+ *display: inline; /* IE7 inline-block hack */
49
+ *zoom: 1;
50
+ }
51
+
52
+ // IE7 likes to collapse whitespace on either side of the inline-block elements.
53
+ // Ems because we're attempting to match the width of a space character. Left
54
+ // version is for form buttons, which typically come after other elements, and
55
+ // right version is for icons, which come before. Applying both is ok, but it will
56
+ // mean that space between those elements will be .6em (~2 space characters) in IE7,
57
+ // instead of the 1 space in other browsers.
58
+ .ie7-restore-left-whitespace() {
59
+ *margin-left: .3em;
60
+
61
+ &:first-child {
62
+ *margin-left: 0;
63
+ }
64
+ }
65
+
66
+ .ie7-restore-right-whitespace() {
67
+ *margin-right: .3em;
68
+ }
69
+
70
+ // Sizing shortcuts
71
+ // -------------------------
72
+ .size(@height, @width) {
73
+ width: @width;
74
+ height: @height;
75
+ }
76
+ .square(@size) {
77
+ .size(@size, @size);
78
+ }
79
+
80
+ // Placeholder text
81
+ // -------------------------
82
+ .placeholder(@color: @placeholderText) {
83
+ &:-moz-placeholder {
84
+ color: @color;
85
+ }
86
+ &:-ms-input-placeholder {
87
+ color: @color;
88
+ }
89
+ &::-webkit-input-placeholder {
90
+ color: @color;
91
+ }
92
+ }
93
+
94
+ // Text overflow
95
+ // -------------------------
96
+ // Requires inline-block or block for proper styling
97
+ .text-overflow() {
98
+ overflow: hidden;
99
+ text-overflow: ellipsis;
100
+ white-space: nowrap;
101
+ }
102
+
103
+ // CSS image replacement
104
+ // -------------------------
105
+ // Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
106
+ .hide-text {
107
+ font: 0/0 a;
108
+ color: transparent;
109
+ text-shadow: none;
110
+ background-color: transparent;
111
+ border: 0;
112
+ }
113
+
114
+
115
+ // FONTS
116
+ // --------------------------------------------------
117
+
118
+ #font {
119
+ #family {
120
+ .serif() {
121
+ font-family: @serifFontFamily;
122
+ }
123
+ .sans-serif() {
124
+ font-family: @sansFontFamily;
125
+ }
126
+ .monospace() {
127
+ font-family: @monoFontFamily;
128
+ }
129
+ }
130
+ .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
131
+ font-size: @size;
132
+ font-weight: @weight;
133
+ line-height: @lineHeight;
134
+ }
135
+ .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
136
+ #font > #family > .serif;
137
+ #font > .shorthand(@size, @weight, @lineHeight);
138
+ }
139
+ .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
140
+ #font > #family > .sans-serif;
141
+ #font > .shorthand(@size, @weight, @lineHeight);
142
+ }
143
+ .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) {
144
+ #font > #family > .monospace;
145
+ #font > .shorthand(@size, @weight, @lineHeight);
146
+ }
147
+ }
148
+
149
+
150
+ // FORMS
151
+ // --------------------------------------------------
152
+
153
+ // Block level inputs
154
+ .input-block-level {
155
+ display: block;
156
+ width: 100%;
157
+ min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
158
+ .box-sizing(border-box); // Makes inputs behave like true block-level elements
159
+ }
160
+
161
+
162
+
163
+ // Mixin for form field states
164
+ .formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
165
+ // Set the text color
166
+ .control-label,
167
+ .help-block,
168
+ .help-inline {
169
+ color: @textColor;
170
+ }
171
+ // Style inputs accordingly
172
+ .checkbox,
173
+ .radio,
174
+ input,
175
+ select,
176
+ textarea {
177
+ color: @textColor;
178
+ }
179
+ input,
180
+ select,
181
+ textarea {
182
+ border-color: @borderColor;
183
+ .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
184
+ &:focus {
185
+ border-color: darken(@borderColor, 10%);
186
+ @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%);
187
+ .box-shadow(@shadow);
188
+ }
189
+ }
190
+ // Give a small background color for input-prepend/-append
191
+ .input-prepend .add-on,
192
+ .input-append .add-on {
193
+ color: @textColor;
194
+ background-color: @backgroundColor;
195
+ border-color: @textColor;
196
+ }
197
+ }
198
+
199
+
200
+
201
+ // CSS3 PROPERTIES
202
+ // --------------------------------------------------
203
+
204
+ // Border Radius
205
+ .border-radius(@radius) {
206
+ -webkit-border-radius: @radius;
207
+ -moz-border-radius: @radius;
208
+ border-radius: @radius;
209
+ }
210
+
211
+ // Single Corner Border Radius
212
+ .border-top-left-radius(@radius) {
213
+ -webkit-border-top-left-radius: @radius;
214
+ -moz-border-radius-topleft: @radius;
215
+ border-top-left-radius: @radius;
216
+ }
217
+ .border-top-right-radius(@radius) {
218
+ -webkit-border-top-right-radius: @radius;
219
+ -moz-border-radius-topright: @radius;
220
+ border-top-right-radius: @radius;
221
+ }
222
+ .border-bottom-right-radius(@radius) {
223
+ -webkit-border-bottom-right-radius: @radius;
224
+ -moz-border-radius-bottomright: @radius;
225
+ border-bottom-right-radius: @radius;
226
+ }
227
+ .border-bottom-left-radius(@radius) {
228
+ -webkit-border-bottom-left-radius: @radius;
229
+ -moz-border-radius-bottomleft: @radius;
230
+ border-bottom-left-radius: @radius;
231
+ }
232
+
233
+ // Single Side Border Radius
234
+ .border-top-radius(@radius) {
235
+ .border-top-right-radius(@radius);
236
+ .border-top-left-radius(@radius);
237
+ }
238
+ .border-right-radius(@radius) {
239
+ .border-top-right-radius(@radius);
240
+ .border-bottom-right-radius(@radius);
241
+ }
242
+ .border-bottom-radius(@radius) {
243
+ .border-bottom-right-radius(@radius);
244
+ .border-bottom-left-radius(@radius);
245
+ }
246
+ .border-left-radius(@radius) {
247
+ .border-top-left-radius(@radius);
248
+ .border-bottom-left-radius(@radius);
249
+ }
250
+
251
+ // Drop shadows
252
+ .box-shadow(@shadow) {
253
+ -webkit-box-shadow: @shadow;
254
+ -moz-box-shadow: @shadow;
255
+ box-shadow: @shadow;
256
+ }
257
+
258
+ // Transitions
259
+ .transition(@transition) {
260
+ -webkit-transition: @transition;
261
+ -moz-transition: @transition;
262
+ -o-transition: @transition;
263
+ transition: @transition;
264
+ }
265
+ .transition-delay(@transition-delay) {
266
+ -webkit-transition-delay: @transition-delay;
267
+ -moz-transition-delay: @transition-delay;
268
+ -o-transition-delay: @transition-delay;
269
+ transition-delay: @transition-delay;
270
+ }
271
+ .transition-duration(@transition-duration) {
272
+ -webkit-transition-duration: @transition-duration;
273
+ -moz-transition-duration: @transition-duration;
274
+ -o-transition-duration: @transition-duration;
275
+ transition-duration: @transition-duration;
276
+ }
277
+
278
+ // Transformations
279
+ .rotate(@degrees) {
280
+ -webkit-transform: rotate(@degrees);
281
+ -moz-transform: rotate(@degrees);
282
+ -ms-transform: rotate(@degrees);
283
+ -o-transform: rotate(@degrees);
284
+ transform: rotate(@degrees);
285
+ }
286
+ .scale(@ratio) {
287
+ -webkit-transform: scale(@ratio);
288
+ -moz-transform: scale(@ratio);
289
+ -ms-transform: scale(@ratio);
290
+ -o-transform: scale(@ratio);
291
+ transform: scale(@ratio);
292
+ }
293
+ .translate(@x, @y) {
294
+ -webkit-transform: translate(@x, @y);
295
+ -moz-transform: translate(@x, @y);
296
+ -ms-transform: translate(@x, @y);
297
+ -o-transform: translate(@x, @y);
298
+ transform: translate(@x, @y);
299
+ }
300
+ .skew(@x, @y) {
301
+ -webkit-transform: skew(@x, @y);
302
+ -moz-transform: skew(@x, @y);
303
+ -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885
304
+ -o-transform: skew(@x, @y);
305
+ transform: skew(@x, @y);
306
+ -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
307
+ }
308
+ .translate3d(@x, @y, @z) {
309
+ -webkit-transform: translate3d(@x, @y, @z);
310
+ -moz-transform: translate3d(@x, @y, @z);
311
+ -o-transform: translate3d(@x, @y, @z);
312
+ transform: translate3d(@x, @y, @z);
313
+ }
314
+
315
+ // Backface visibility
316
+ // Prevent browsers from flickering when using CSS 3D transforms.
317
+ // Default value is `visible`, but can be changed to `hidden
318
+ // See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
319
+ .backface-visibility(@visibility){
320
+ -webkit-backface-visibility: @visibility;
321
+ -moz-backface-visibility: @visibility;
322
+ backface-visibility: @visibility;
323
+ }
324
+
325
+ // Background clipping
326
+ // Heads up: FF 3.6 and under need "padding" instead of "padding-box"
327
+ .background-clip(@clip) {
328
+ -webkit-background-clip: @clip;
329
+ -moz-background-clip: @clip;
330
+ background-clip: @clip;
331
+ }
332
+
333
+ // Background sizing
334
+ .background-size(@size) {
335
+ -webkit-background-size: @size;
336
+ -moz-background-size: @size;
337
+ -o-background-size: @size;
338
+ background-size: @size;
339
+ }
340
+
341
+
342
+ // Box sizing
343
+ .box-sizing(@boxmodel) {
344
+ -webkit-box-sizing: @boxmodel;
345
+ -moz-box-sizing: @boxmodel;
346
+ box-sizing: @boxmodel;
347
+ }
348
+
349
+ // User select
350
+ // For selecting text on the page
351
+ .user-select(@select) {
352
+ -webkit-user-select: @select;
353
+ -moz-user-select: @select;
354
+ -ms-user-select: @select;
355
+ -o-user-select: @select;
356
+ user-select: @select;
357
+ }
358
+
359
+ // Resize anything
360
+ .resizable(@direction) {
361
+ resize: @direction; // Options: horizontal, vertical, both
362
+ overflow: auto; // Safari fix
363
+ }
364
+
365
+ // CSS3 Content Columns
366
+ .content-columns(@columnCount, @columnGap: @gridGutterWidth) {
367
+ -webkit-column-count: @columnCount;
368
+ -moz-column-count: @columnCount;
369
+ column-count: @columnCount;
370
+ -webkit-column-gap: @columnGap;
371
+ -moz-column-gap: @columnGap;
372
+ column-gap: @columnGap;
373
+ }
374
+
375
+ // Optional hyphenation
376
+ .hyphens(@mode: auto) {
377
+ word-wrap: break-word;
378
+ -webkit-hyphens: @mode;
379
+ -moz-hyphens: @mode;
380
+ -ms-hyphens: @mode;
381
+ -o-hyphens: @mode;
382
+ hyphens: @mode;
383
+ }
384
+
385
+ // Opacity
386
+ .opacity(@opacity) {
387
+ opacity: @opacity / 100;
388
+ filter: ~"alpha(opacity=@{opacity})";
389
+ }
390
+
391
+
392
+
393
+ // BACKGROUNDS
394
+ // --------------------------------------------------
395
+
396
+ // Add an alphatransparency value to any background or border color (via Elyse Holladay)
397
+ #translucent {
398
+ .background(@color: @white, @alpha: 1) {
399
+ background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
400
+ }
401
+ .border(@color: @white, @alpha: 1) {
402
+ border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
403
+ .background-clip(padding-box);
404
+ }
405
+ }
406
+
407
+ // Gradient Bar Colors for buttons and alerts
408
+ .gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
409
+ color: @textColor;
410
+ text-shadow: @textShadow;
411
+ #gradient > .vertical(@primaryColor, @secondaryColor);
412
+ border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
413
+ border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
414
+ }
415
+
416
+ // Gradients
417
+ #gradient {
418
+ .horizontal(@startColor: #555, @endColor: #333) {
419
+ background-color: @endColor;
420
+ background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
421
+ background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
422
+ background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
423
+ background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
424
+ background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10
425
+ background-repeat: repeat-x;
426
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down
427
+ }
428
+ .vertical(@startColor: #555, @endColor: #333) {
429
+ background-color: mix(@startColor, @endColor, 60%);
430
+ background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
431
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
432
+ background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
433
+ background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
434
+ background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
435
+ background-repeat: repeat-x;
436
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down
437
+ }
438
+ .directional(@startColor: #555, @endColor: #333, @deg: 45deg) {
439
+ background-color: @endColor;
440
+ background-repeat: repeat-x;
441
+ background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+
442
+ background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+
443
+ background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10
444
+ background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10
445
+ }
446
+ .horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
447
+ background-color: mix(@midColor, @endColor, 80%);
448
+ background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
449
+ background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
450
+ background-image: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
451
+ background-image: -o-linear-gradient(left, @startColor, @midColor @colorStop, @endColor);
452
+ background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor);
453
+ background-repeat: no-repeat;
454
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
455
+ }
456
+
457
+ .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
458
+ background-color: mix(@midColor, @endColor, 80%);
459
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
460
+ background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
461
+ background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
462
+ background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
463
+ background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
464
+ background-repeat: no-repeat;
465
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback
466
+ }
467
+ .radial(@innerColor: #555, @outerColor: #333) {
468
+ background-color: @outerColor;
469
+ background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor));
470
+ background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor);
471
+ background-image: -moz-radial-gradient(circle, @innerColor, @outerColor);
472
+ background-image: -o-radial-gradient(circle, @innerColor, @outerColor);
473
+ background-repeat: no-repeat;
474
+ }
475
+ .striped(@color: #555, @angle: 45deg) {
476
+ background-color: @color;
477
+ background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
478
+ background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
479
+ background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
480
+ background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
481
+ background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
482
+ }
483
+ }
484
+ // Reset filters for IE
485
+ .reset-filter() {
486
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
487
+ }
488
+
489
+
490
+
491
+ // COMPONENT MIXINS
492
+ // --------------------------------------------------
493
+
494
+ // Horizontal dividers
495
+ // -------------------------
496
+ // Dividers (basically an hr) within dropdowns and nav lists
497
+ .nav-divider(@top: #e5e5e5, @bottom: @white) {
498
+ // IE7 needs a set width since we gave a height. Restricting just
499
+ // to IE7 to keep the 1px left/right space in other browsers.
500
+ // It is unclear where IE is getting the extra space that we need
501
+ // to negative-margin away, but so it goes.
502
+ *width: 100%;
503
+ height: 1px;
504
+ margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px
505
+ *margin: -5px 0 5px;
506
+ overflow: hidden;
507
+ background-color: @top;
508
+ border-bottom: 1px solid @bottom;
509
+ }
510
+
511
+ // Button backgrounds
512
+ // ------------------
513
+ .buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) {
514
+ // gradientBar will set the background to a pleasing blend of these, to support IE<=9
515
+ .gradientBar(@startColor, @endColor, @textColor, @textShadow);
516
+ *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
517
+ .reset-filter();
518
+
519
+ // in these cases the gradient won't cover the background, so we override
520
+ &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
521
+ color: @textColor;
522
+ background-color: @endColor;
523
+ *background-color: darken(@endColor, 5%);
524
+ }
525
+
526
+ // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
527
+ &:active,
528
+ &.active {
529
+ background-color: darken(@endColor, 10%) e("\9");
530
+ }
531
+ }
532
+
533
+ // Navbar vertical align
534
+ // -------------------------
535
+ // Vertically center elements in the navbar.
536
+ // Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
537
+ .navbarVerticalAlign(@elementHeight) {
538
+ margin-top: (@navbarHeight - @elementHeight) / 2;
539
+ }
540
+
541
+
542
+
543
+ // Grid System
544
+ // -----------
545
+
546
+ // Centered container element
547
+ .container-fixed() {
548
+ margin-right: auto;
549
+ margin-left: auto;
550
+ .clearfix();
551
+ }
552
+
553
+ // Table columns
554
+ .tableColumns(@columnSpan: 1) {
555
+ float: none; // undo default grid column styles
556
+ width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells
557
+ margin-left: 0; // undo default grid column styles
558
+ }
559
+
560
+ // Make a Grid
561
+ // Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
562
+ .makeRow() {
563
+ margin-left: @gridGutterWidth * -1;
564
+ .clearfix();
565
+ }
566
+ .makeColumn(@columns: 1, @offset: 0) {
567
+ float: left;
568
+ margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2);
569
+ width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
570
+ }
571
+
572
+ // The Grid
573
+ #grid {
574
+
575
+ .core (@gridColumnWidth, @gridGutterWidth) {
576
+
577
+ .spanX (@index) when (@index > 0) {
578
+ .span@{index} { .span(@index); }
579
+ .spanX(@index - 1);
580
+ }
581
+ .spanX (0) {}
582
+
583
+ .offsetX (@index) when (@index > 0) {
584
+ .offset@{index} { .offset(@index); }
585
+ .offsetX(@index - 1);
586
+ }
587
+ .offsetX (0) {}
588
+
589
+ .offset (@columns) {
590
+ margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
591
+ }
592
+
593
+ .span (@columns) {
594
+ width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
595
+ }
596
+
597
+ .row {
598
+ margin-left: @gridGutterWidth * -1;
599
+ .clearfix();
600
+ }
601
+
602
+ [class*="span"] {
603
+ float: left;
604
+ min-height: 1px; // prevent collapsing columns
605
+ margin-left: @gridGutterWidth;
606
+ }
607
+
608
+ // Set the container width, and override it for fixed navbars in media queries
609
+ .container,
610
+ .navbar-static-top .container,
611
+ .navbar-fixed-top .container,
612
+ .navbar-fixed-bottom .container { .span(@gridColumns); }
613
+
614
+ // generate .spanX and .offsetX
615
+ .spanX (@gridColumns);
616
+ .offsetX (@gridColumns);
617
+
618
+ }
619
+
620
+ .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {
621
+
622
+ .spanX (@index) when (@index > 0) {
623
+ .span@{index} { .span(@index); }
624
+ .spanX(@index - 1);
625
+ }
626
+ .spanX (0) {}
627
+
628
+ .offsetX (@index) when (@index > 0) {
629
+ .offset@{index} { .offset(@index); }
630
+ .offset@{index}:first-child { .offsetFirstChild(@index); }
631
+ .offsetX(@index - 1);
632
+ }
633
+ .offsetX (0) {}
634
+
635
+ .offset (@columns) {
636
+ margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2);
637
+ *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%);
638
+ }
639
+
640
+ .offsetFirstChild (@columns) {
641
+ margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
642
+ *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
643
+ }
644
+
645
+ .span (@columns) {
646
+ width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
647
+ *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
648
+ }
649
+
650
+ .row-fluid {
651
+ width: 100%;
652
+ .clearfix();
653
+ [class*="span"] {
654
+ .input-block-level();
655
+ float: left;
656
+ margin-left: @fluidGridGutterWidth;
657
+ *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
658
+ }
659
+ [class*="span"]:first-child {
660
+ margin-left: 0;
661
+ }
662
+
663
+ // Space grid-sized controls properly if multiple per line
664
+ .controls-row [class*="span"] + [class*="span"] {
665
+ margin-left: @fluidGridGutterWidth;
666
+ }
667
+
668
+ // generate .spanX and .offsetX
669
+ .spanX (@gridColumns);
670
+ .offsetX (@gridColumns);
671
+ }
672
+
673
+ }
674
+
675
+ .input(@gridColumnWidth, @gridGutterWidth) {
676
+
677
+ .spanX (@index) when (@index > 0) {
678
+ input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index} { .span(@index); }
679
+ .spanX(@index - 1);
680
+ }
681
+ .spanX (0) {}
682
+
683
+ .span(@columns) {
684
+ width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 14;
685
+ }
686
+
687
+ input,
688
+ textarea,
689
+ .uneditable-input {
690
+ margin-left: 0; // override margin-left from core grid system
691
+ }
692
+
693
+ // Space grid-sized controls properly if multiple per line
694
+ .controls-row [class*="span"] + [class*="span"] {
695
+ margin-left: @gridGutterWidth;
696
+ }
697
+
698
+ // generate .spanX
699
+ .spanX (@gridColumns);
700
+
701
+ }
702
+ }