titon-toolkit 0.14.0 → 1.0.0.rc1
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.
- checksums.yaml +4 -4
- data/readme.md +18 -13
- data/scss/ie8.scss +23 -16
- data/scss/toolkit/_common.scss +126 -7
- data/scss/toolkit/{modules → components}/accordion.scss +3 -25
- data/scss/toolkit/{modules → components}/blackout.scss +0 -7
- data/scss/toolkit/{ui → components}/breadcrumbs.scss +26 -16
- data/scss/toolkit/{ui → components}/button-group.scss +1 -8
- data/scss/toolkit/{ui → components}/button.scss +0 -5
- data/scss/toolkit/components/carousel.scss +147 -0
- data/scss/toolkit/{ui → components}/dropdown.scss +30 -27
- data/scss/toolkit/{modules → components}/flyout.scss +0 -6
- data/scss/toolkit/{layout → components}/grid.scss +1 -1
- data/scss/toolkit/components/icon.scss +60 -0
- data/scss/toolkit/{layout → components}/input-group.scss +3 -1
- data/scss/toolkit/components/input.scss +112 -0
- data/scss/toolkit/components/label.scss +106 -0
- data/scss/toolkit/components/lazy-load.scss +12 -0
- data/scss/toolkit/{ui → components}/matrix.scss +0 -7
- data/scss/toolkit/{modules → components}/modal.scss +44 -44
- data/scss/toolkit/{ui/alert.scss → components/notice.scss} +13 -20
- data/scss/toolkit/{ui → components}/pagination.scss +0 -14
- data/scss/toolkit/{ui → components}/pin.scss +0 -5
- data/scss/toolkit/{modules → components}/popover.scss +4 -16
- data/scss/toolkit/{ui → components}/progress.scss +15 -12
- data/scss/toolkit/{modules → components}/showcase.scss +30 -60
- data/scss/toolkit/{layout → components}/table.scss +0 -0
- data/scss/toolkit/{modules → components}/tabs.scss +0 -16
- data/scss/toolkit/{modules → components}/tooltip.scss +1 -15
- data/scss/toolkit/{modules → components}/type-ahead.scss +1 -4
- data/scss/toolkit/effects/pill.scss +4 -2
- data/scss/toolkit/layout/base.scss +68 -30
- data/scss/toolkit/layout/code.scss +2 -3
- data/scss/toolkit/layout/form.scss +71 -25
- data/scss/toolkit/layout/typography.scss +8 -8
- data/scss/toolkit/mixins/_grid.scss +0 -8
- data/scss/toolkit/mixins/_layout.scss +3 -14
- data/scss/toolkit/mixins/_responsive.scss +0 -14
- data/scss/toolkit/themes/titon.scss +116 -98
- data/scss/toolkit.scss +26 -25
- data/version.md +1 -1
- metadata +30 -32
- data/scss/toolkit/_variables.scss +0 -63
- data/scss/toolkit/mixins/_themes.scss +0 -98
- data/scss/toolkit/modules/carousel.scss +0 -183
- data/scss/toolkit/themes/tomorrow-night.scss +0 -582
- data/scss/toolkit/ui/icon.scss +0 -22
- data/scss/toolkit/ui/label-badge.scss +0 -76
- data/scss/toolkit/ui/lazy-load.scss +0 -19
@@ -6,20 +6,6 @@
|
|
6
6
|
|
7
7
|
@import "../common";
|
8
8
|
|
9
|
-
/**
|
10
|
-
* <nav class="pagination small pill">
|
11
|
-
* <ul>
|
12
|
-
* <li><a href="" class="button">Previous</a></li>
|
13
|
-
* <li><a href="" class="button">1</a></li>
|
14
|
-
* <li><a href="" class="button">2</a></li>
|
15
|
-
* <li class="active"><a href="" class="button">3</a></li>
|
16
|
-
* <li><a href="" class="button">4</a></li>
|
17
|
-
* <li><a href="" class="button">5</a></li>
|
18
|
-
* <li class="disabled"><a href="" class="button">Next</a></li>
|
19
|
-
* </ul>
|
20
|
-
* </nav>
|
21
|
-
*/
|
22
|
-
|
23
9
|
.pagination {
|
24
10
|
display: block;
|
25
11
|
margin: $margin 0;
|
@@ -6,18 +6,6 @@
|
|
6
6
|
|
7
7
|
@import "../common";
|
8
8
|
|
9
|
-
/**
|
10
|
-
* Should be used in conjunction with the JavaScript Titon.Popover module.
|
11
|
-
*
|
12
|
-
* <div class="popover">
|
13
|
-
* <div class="popover-inner">
|
14
|
-
* <div class="popover-head">Popover Title</div>
|
15
|
-
* <div class="popover-body">Popover Content</div>
|
16
|
-
* </div>
|
17
|
-
* <div class="popover-arrow"></div>
|
18
|
-
* </div>
|
19
|
-
*/
|
20
|
-
|
21
9
|
.popover {
|
22
10
|
position: absolute;
|
23
11
|
top: 0;
|
@@ -37,12 +25,12 @@
|
|
37
25
|
}
|
38
26
|
|
39
27
|
&.center-left .popover-arrow {
|
40
|
-
border-left-color:
|
28
|
+
border-left-color: $gray-dark;
|
41
29
|
right: -16px;
|
42
30
|
}
|
43
31
|
|
44
32
|
&.center-right .popover-arrow {
|
45
|
-
border-right-color:
|
33
|
+
border-right-color: $gray-dark;
|
46
34
|
left: -16px;
|
47
35
|
}
|
48
36
|
|
@@ -53,12 +41,12 @@
|
|
53
41
|
}
|
54
42
|
|
55
43
|
&.top-center .popover-arrow {
|
56
|
-
border-top-color:
|
44
|
+
border-top-color: $gray-dark;
|
57
45
|
bottom: -16px;
|
58
46
|
}
|
59
47
|
|
60
48
|
&.bottom-center .popover-arrow {
|
61
|
-
border-bottom-color:
|
49
|
+
border-bottom-color: $gray-dark;
|
62
50
|
top: -16px;
|
63
51
|
}
|
64
52
|
}
|
@@ -6,30 +6,33 @@
|
|
6
6
|
|
7
7
|
@import "../common";
|
8
8
|
|
9
|
-
$progress-transition: $default-transition !default;
|
10
|
-
|
11
|
-
/**
|
12
|
-
* <div class="progress">
|
13
|
-
* <div class="progress-bar" style="width: 50%">50%</div>
|
14
|
-
* </div>
|
15
|
-
*/
|
16
|
-
|
17
9
|
.progress {
|
18
|
-
height: 20px;
|
19
10
|
overflow: hidden;
|
20
11
|
position: relative;
|
21
12
|
background: $gray;
|
22
13
|
|
14
|
+
&.small .progress-bar {
|
15
|
+
height: 1rem;
|
16
|
+
line-height: .75rem;
|
17
|
+
font-size: $small-size;
|
18
|
+
}
|
19
|
+
|
20
|
+
&.large .progress-bar {
|
21
|
+
height: 2rem;
|
22
|
+
line-height: 1.75rem;
|
23
|
+
font-size: $large-size;
|
24
|
+
}
|
25
|
+
|
23
26
|
@include clear-fix;
|
24
27
|
}
|
25
28
|
|
26
29
|
.progress-bar {
|
27
|
-
height:
|
28
|
-
line-height:
|
30
|
+
height: 1.5rem;
|
31
|
+
line-height: 1.25rem;
|
29
32
|
overflow: hidden;
|
30
33
|
position: relative;
|
31
34
|
text-align: center;
|
32
|
-
font-size:
|
35
|
+
font-size: $medium-size;
|
33
36
|
background: $gray-darkest;
|
34
37
|
float: left;
|
35
38
|
@include transition(width .6s, background $progress-transition);
|
@@ -6,24 +6,6 @@
|
|
6
6
|
|
7
7
|
@import "../common";
|
8
8
|
|
9
|
-
$showcase-transition: $default-transition !default;
|
10
|
-
|
11
|
-
/**
|
12
|
-
* Should be used in conjunction with the JavaScript Titon.Showcase module.
|
13
|
-
*
|
14
|
-
* <div class="showcase">
|
15
|
-
* <div class="showcase-inner">
|
16
|
-
* <ul class="showcase-items"></u>
|
17
|
-
* <ol class="showcase-tabs"></ol>
|
18
|
-
* <a href="javascript:;" class="showcase-prev showcase-event-prev"><span class="icon-chevron-sign-left"></span></a>
|
19
|
-
* <a href="javascript:;" class="showcase-next showcase-event-next"><span class="icon-chevron-sign-right"></span></a>
|
20
|
-
* <button type="button" class="close showcase-event-close">
|
21
|
-
* <span class="x">×</span>
|
22
|
-
* </button>
|
23
|
-
* </div>
|
24
|
-
* </div>
|
25
|
-
*/
|
26
|
-
|
27
9
|
.showcase {
|
28
10
|
position: fixed;
|
29
11
|
top: 50%;
|
@@ -37,12 +19,6 @@ $showcase-transition: $default-transition !default;
|
|
37
19
|
backface-visibility: hidden;
|
38
20
|
@include transform(translateX(-50%) translateY(-50%));
|
39
21
|
|
40
|
-
.close {
|
41
|
-
position: absolute;
|
42
|
-
top: -1px;
|
43
|
-
right: -35px;
|
44
|
-
}
|
45
|
-
|
46
22
|
&.is-loading,
|
47
23
|
&.is-single {
|
48
24
|
.showcase-prev,
|
@@ -50,13 +26,27 @@ $showcase-transition: $default-transition !default;
|
|
50
26
|
.showcase-tabs {
|
51
27
|
display: none !important;
|
52
28
|
}
|
29
|
+
}
|
53
30
|
|
54
|
-
|
55
|
-
|
31
|
+
&.is-loading {
|
32
|
+
.showcase-close {
|
33
|
+
display: none !important;
|
56
34
|
}
|
57
35
|
}
|
58
36
|
}
|
59
37
|
|
38
|
+
.showcase-close {
|
39
|
+
position: absolute;
|
40
|
+
top: $padding;
|
41
|
+
right: $padding;
|
42
|
+
line-height: 1rem;
|
43
|
+
opacity: $showcase-opacity;
|
44
|
+
padding: $padding;
|
45
|
+
|
46
|
+
.x { color: #fff; }
|
47
|
+
&:hover { opacity: 1; }
|
48
|
+
}
|
49
|
+
|
60
50
|
.showcase-inner {
|
61
51
|
position: relative;
|
62
52
|
padding: $padding;
|
@@ -121,19 +111,25 @@ $showcase-transition: $default-transition !default;
|
|
121
111
|
width: auto;
|
122
112
|
height: auto;
|
123
113
|
z-index: 5;
|
124
|
-
|
125
|
-
color: #fff;
|
126
|
-
opacity: .65;
|
114
|
+
opacity: $showcase-opacity;
|
127
115
|
top: 50%;
|
128
116
|
@include transform(translateY(-50%)); // move up 50% of their height
|
129
117
|
|
130
|
-
|
118
|
+
.arrow-left,
|
119
|
+
.arrow-right {
|
131
120
|
color: #fff;
|
132
|
-
|
121
|
+
font-size: 2rem;
|
133
122
|
}
|
134
123
|
|
135
|
-
&:
|
136
|
-
|
124
|
+
&:hover { opacity: 1; }
|
125
|
+
&:focus { outline: none; }
|
126
|
+
|
127
|
+
// Large icons for large resolutions
|
128
|
+
@include if-tablet-landscape {
|
129
|
+
.arrow-left,
|
130
|
+
.arrow-right {
|
131
|
+
font-size: 3rem;
|
132
|
+
}
|
137
133
|
}
|
138
134
|
}
|
139
135
|
|
@@ -141,34 +137,8 @@ $showcase-transition: $default-transition !default;
|
|
141
137
|
.showcase-next { right: $padding; }
|
142
138
|
|
143
139
|
.showcase-tabs {
|
144
|
-
list-style: none;
|
145
|
-
line-height: 100%;
|
146
|
-
margin: 0;
|
147
|
-
padding: $padding;
|
148
140
|
position: absolute;
|
149
|
-
top: $padding;
|
141
|
+
top: ($padding * 2);
|
150
142
|
left: 50%;
|
151
|
-
z-index: 5;
|
152
143
|
@include transform(translateX(-50%)); // move left 50% of their width
|
153
|
-
|
154
|
-
li {
|
155
|
-
display: inline-block;
|
156
|
-
margin: 0 3px;
|
157
|
-
}
|
158
|
-
|
159
|
-
a {
|
160
|
-
display: inline-block;
|
161
|
-
border: 2px solid #fff;
|
162
|
-
height: 10px;
|
163
|
-
width: 10px;
|
164
|
-
border-radius: 50%;
|
165
|
-
opacity: .65;
|
166
|
-
background: black(0);
|
167
|
-
|
168
|
-
&:hover { opacity: 1; }
|
169
|
-
&.is-active { background: #fff; }
|
170
|
-
}
|
171
|
-
|
172
|
-
// Hide if no tabs
|
173
|
-
&:empty { display: none; }
|
174
144
|
}
|
File without changes
|
@@ -6,22 +6,6 @@
|
|
6
6
|
|
7
7
|
@import "../common";
|
8
8
|
|
9
|
-
/**
|
10
|
-
* Should be used in conjunction with the JavaScript Titon.Tabs module.
|
11
|
-
*
|
12
|
-
* <div id="tabs" class="tabs">
|
13
|
-
* <nav class="tabs-nav">
|
14
|
-
* <ul>
|
15
|
-
* <li><a href="#tab-1">Tab 1</a></li>
|
16
|
-
* <li><a href="#tab-2">Tab 2</a></li>
|
17
|
-
* </ul>
|
18
|
-
* </nav>
|
19
|
-
*
|
20
|
-
* <section id="tab-1" class="tabs-section"></section>
|
21
|
-
* <section id="tab-2" class="tabs-section"></section>
|
22
|
-
* </div>
|
23
|
-
*/
|
24
|
-
|
25
9
|
.tabs {
|
26
10
|
text-align: left;
|
27
11
|
}
|
@@ -6,20 +6,6 @@
|
|
6
6
|
|
7
7
|
@import "../common";
|
8
8
|
|
9
|
-
$tooltip-transition: $default-transition !default;
|
10
|
-
|
11
|
-
/**
|
12
|
-
* Should be used in conjunction with the JavaScript Titon.Tooltip module.
|
13
|
-
*
|
14
|
-
* <div class="tooltip">
|
15
|
-
* <div class="tooltip-inner">
|
16
|
-
* <div class="tooltip-head">Tooltip Title</div>
|
17
|
-
* <div class="tooltip-body">Tooltip Content</div>
|
18
|
-
* </div>
|
19
|
-
* <div class="tooltip-arrow"></div>
|
20
|
-
* </div>
|
21
|
-
*/
|
22
|
-
|
23
9
|
.tooltip {
|
24
10
|
position: absolute;
|
25
11
|
top: 0;
|
@@ -108,7 +94,7 @@ $tooltip-transition: $default-transition !default;
|
|
108
94
|
|
109
95
|
&.flip-rotate {
|
110
96
|
@include transition(transform $tooltip-transition);
|
111
|
-
@include transform(rotate(-
|
97
|
+
@include transform(rotate(-15deg));
|
112
98
|
|
113
99
|
&.show {
|
114
100
|
@include transform(rotate(0deg));
|
@@ -6,10 +6,6 @@
|
|
6
6
|
|
7
7
|
@import "../common";
|
8
8
|
|
9
|
-
/**
|
10
|
-
* Should be used in conjunction with the JavaScript Titon.TypeAhead module.
|
11
|
-
*/
|
12
|
-
|
13
9
|
.type-ahead {
|
14
10
|
position: absolute;
|
15
11
|
top: 0;
|
@@ -49,6 +45,7 @@
|
|
49
45
|
|
50
46
|
.type-ahead-shadow {
|
51
47
|
position: relative;
|
48
|
+
height: 2rem;
|
52
49
|
|
53
50
|
input {
|
54
51
|
position: absolute;
|
@@ -33,16 +33,18 @@
|
|
33
33
|
.button-group.button-group--vertical.pill {
|
34
34
|
border-radius: $pill;
|
35
35
|
|
36
|
-
.button { border-radius: 0; }
|
37
|
-
|
38
36
|
> li:first-child .button,
|
39
37
|
> .button:first-child {
|
40
38
|
border-top-left-radius: $pill;
|
41
39
|
border-top-right-radius: $pill;
|
40
|
+
border-bottom-left-radius: 0;
|
41
|
+
border-bottom-right-radius: 0;
|
42
42
|
}
|
43
43
|
|
44
44
|
> li:last-child .button,
|
45
45
|
> .button:last-child {
|
46
|
+
border-top-left-radius: 0;
|
47
|
+
border-top-right-radius: 0;
|
46
48
|
border-bottom-left-radius: $pill;
|
47
49
|
border-bottom-right-radius: $pill;
|
48
50
|
}
|
@@ -7,7 +7,7 @@
|
|
7
7
|
@import "../common";
|
8
8
|
|
9
9
|
// Use border-box for everything
|
10
|
-
*, *:after, *:before { @include box-sizing(border-box); }
|
10
|
+
*, *:after, *:before { @include box-sizing("border-box"); }
|
11
11
|
|
12
12
|
// Alignment
|
13
13
|
.align-left { text-align: left; }
|
@@ -35,14 +35,20 @@
|
|
35
35
|
.static { position: static; }
|
36
36
|
|
37
37
|
// Layout
|
38
|
-
.clear { clear: both; display: block; margin: 0; padding: 0; }
|
39
38
|
.clear-fix { @include clear-fix; }
|
39
|
+
.clear {
|
40
|
+
clear: both;
|
41
|
+
display: block;
|
42
|
+
margin: 0;
|
43
|
+
padding: 0;
|
44
|
+
}
|
40
45
|
|
41
46
|
// Styles
|
42
47
|
.round { border-radius: $round; }
|
43
48
|
.is-draggable { cursor: move; }
|
49
|
+
.is-dragging { cursor: grabbing; }
|
44
50
|
.is-disabled,
|
45
|
-
|
51
|
+
[disabled] { cursor: not-allowed !important; }
|
46
52
|
|
47
53
|
// Carets
|
48
54
|
.caret-up,
|
@@ -56,38 +62,70 @@ button[disabled] { cursor: not-allowed !important; pointer-events: none; }
|
|
56
62
|
width: 0;
|
57
63
|
}
|
58
64
|
|
59
|
-
.caret-up { border-bottom-color:
|
60
|
-
.caret-down { border-top-color:
|
61
|
-
.caret-left { border-right-color:
|
62
|
-
.caret-right { border-left-color:
|
63
|
-
|
64
|
-
//
|
65
|
-
.x
|
65
|
+
.caret-up { border-bottom-color: inherit; top: -2px; }
|
66
|
+
.caret-down { border-top-color: inherit; bottom: -2px; }
|
67
|
+
.caret-left { border-right-color: inherit; }
|
68
|
+
.caret-right { border-left-color: inherit; }
|
69
|
+
|
70
|
+
// Arrows, Characters
|
71
|
+
.x,
|
72
|
+
.arrow-up,
|
73
|
+
.arrow-down,
|
74
|
+
.arrow-left,
|
75
|
+
.arrow-right {
|
66
76
|
@include reset-inline-block;
|
67
|
-
|
68
|
-
font: bold 1.5rem/100% Arial, sans-serif;
|
77
|
+
font: bold 1.5rem/1rem Arial, sans-serif;
|
69
78
|
text-transform: uppercase;
|
70
79
|
}
|
71
80
|
|
72
|
-
.
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
}
|
81
|
+
.x:before { content: "\00D7"; /* times */ }
|
82
|
+
|
83
|
+
.arrow-up:before,
|
84
|
+
.arrow-left:before,
|
85
|
+
.arrow-down:before,
|
86
|
+
.arrow-right:before {
|
87
|
+
display: inline-block;
|
88
|
+
position: relative;
|
89
|
+
}
|
90
|
+
|
91
|
+
.arrow-up:before,
|
92
|
+
.arrow-left:before { content: "\000AB"; /* laquo */ }
|
93
|
+
.arrow-down:before,
|
94
|
+
.arrow-right:before { content: "\000BB"; /* raquo */ }
|
87
95
|
|
88
|
-
|
89
|
-
|
96
|
+
.arrow-left:before,
|
97
|
+
.arrow-right:before { top: -2px; }
|
90
98
|
|
91
|
-
|
99
|
+
.arrow-up:before,
|
100
|
+
.arrow-down:before {
|
101
|
+
right: -2px;
|
102
|
+
@include transform(rotate(90deg));
|
103
|
+
}
|
104
|
+
|
105
|
+
// Bullets
|
106
|
+
.bullets {
|
107
|
+
list-style: none;
|
108
|
+
line-height: 100%;
|
109
|
+
margin: 0;
|
110
|
+
padding: 0;
|
111
|
+
|
112
|
+
li {
|
113
|
+
display: inline-block;
|
114
|
+
margin: 0 3px;
|
92
115
|
}
|
116
|
+
|
117
|
+
a {
|
118
|
+
display: inline-block;
|
119
|
+
border: 3px solid #fff;
|
120
|
+
height: 10px;
|
121
|
+
width: 10px;
|
122
|
+
border-radius: 50%;
|
123
|
+
opacity: $default-opacity;
|
124
|
+
background: black(0);
|
125
|
+
|
126
|
+
&:hover { opacity: 1; border-width: 2px; }
|
127
|
+
@include active-state { background: #fff; }
|
128
|
+
}
|
129
|
+
|
130
|
+
&:empty { display: none; }
|
93
131
|
}
|
@@ -18,8 +18,8 @@ var,
|
|
18
18
|
kbd {
|
19
19
|
display: inline-block;
|
20
20
|
background: $gray-dark;
|
21
|
-
border-radius:
|
22
|
-
padding:
|
21
|
+
border-radius: $round;
|
22
|
+
padding: .2em .4em;
|
23
23
|
}
|
24
24
|
|
25
25
|
pre {
|
@@ -27,7 +27,6 @@ pre {
|
|
27
27
|
margin: $margin 0;
|
28
28
|
background: $gray-light;
|
29
29
|
border: 1px solid $gray-dark;
|
30
|
-
border-radius: 3px;
|
31
30
|
text-align: left;
|
32
31
|
direction: ltr;
|
33
32
|
white-space: pre;
|
@@ -48,7 +48,9 @@ label,
|
|
48
48
|
//-------------------- Inputs --------------------//
|
49
49
|
|
50
50
|
.input,
|
51
|
-
.input-static
|
51
|
+
.input-static,
|
52
|
+
.input-radio,
|
53
|
+
.input-checkbox {
|
52
54
|
@include reset-inline-block;
|
53
55
|
border: 1px solid $gray-dark;
|
54
56
|
font-size: $medium-size;
|
@@ -58,15 +60,14 @@ label,
|
|
58
60
|
.input {
|
59
61
|
background: $gray-lightest;
|
60
62
|
border-radius: $round;
|
61
|
-
@include transition(all
|
63
|
+
@include transition(all $default-transition);
|
62
64
|
|
63
65
|
&:hover { border-color: $gray-darkest; }
|
64
|
-
&:focus { border-color: $info; box-shadow: 0 0 5px $info-light; outline: none; }
|
65
66
|
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
67
|
+
&:focus {
|
68
|
+
border-color: $info;
|
69
|
+
box-shadow: 0 0 5px $info-light;
|
70
|
+
outline: none;
|
70
71
|
}
|
71
72
|
|
72
73
|
&[readonly] {
|
@@ -74,38 +75,51 @@ label,
|
|
74
75
|
border: 1px solid $gray-dark;
|
75
76
|
box-shadow: none;
|
76
77
|
}
|
78
|
+
|
79
|
+
@include disabled-state {
|
80
|
+
cursor: not-allowed;
|
81
|
+
color: $gray-darkest;
|
82
|
+
border-color: $gray;
|
83
|
+
}
|
77
84
|
}
|
78
85
|
|
79
|
-
.input-static
|
86
|
+
.input-static,
|
87
|
+
.input-radio,
|
88
|
+
.input-checkbox {
|
80
89
|
background: transparent;
|
81
90
|
border-color: transparent;
|
82
91
|
padding-left: 0;
|
83
92
|
padding-right: 0;
|
84
93
|
}
|
85
94
|
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
textarea.input {
|
90
|
-
line-height: 135%;
|
91
|
-
min-height: 150px;
|
92
|
-
}
|
93
|
-
|
94
|
-
.radio,
|
95
|
-
.checkbox {
|
96
|
-
display: inline-block;
|
97
|
-
vertical-align: middle;
|
98
|
-
cursor: pointer;
|
95
|
+
.input-radio,
|
96
|
+
.input-checkbox {
|
97
|
+
padding: 0;
|
99
98
|
|
100
99
|
input[type="checkbox"],
|
101
100
|
input[type="radio"] {
|
102
101
|
vertical-align: middle;
|
103
102
|
position: relative;
|
104
103
|
top: -1px;
|
105
|
-
margin-right:
|
104
|
+
margin-right: 5px;
|
106
105
|
}
|
107
106
|
}
|
108
107
|
|
108
|
+
select.input {
|
109
|
+
-webkit-appearance: none;
|
110
|
+
padding: $medium-padding - .05rem; // fixes vertical alignment
|
111
|
+
}
|
112
|
+
|
113
|
+
select.input[multiple] {
|
114
|
+
min-height: 150px;
|
115
|
+
max-height: 500px;
|
116
|
+
}
|
117
|
+
|
118
|
+
textarea.input {
|
119
|
+
line-height: 135%;
|
120
|
+
min-height: 150px;
|
121
|
+
}
|
122
|
+
|
109
123
|
//-------------------- Fields, Labels --------------------//
|
110
124
|
|
111
125
|
.field {
|
@@ -114,18 +128,44 @@ textarea.input {
|
|
114
128
|
&.is-required {
|
115
129
|
.field-label { font-weight: bold; }
|
116
130
|
}
|
131
|
+
}
|
132
|
+
|
133
|
+
.field:not(.is-disabled) {
|
134
|
+
&.is-error {
|
135
|
+
.input {
|
136
|
+
border-color: $error;
|
137
|
+
|
138
|
+
&:focus { box-shadow: 0 0 5px $error-light; }
|
139
|
+
}
|
140
|
+
|
141
|
+
.input-radio,
|
142
|
+
.input-checkbox {
|
143
|
+
color: $error-dark;
|
144
|
+
}
|
145
|
+
}
|
117
146
|
|
118
|
-
|
147
|
+
&.is-success {
|
148
|
+
.input {
|
149
|
+
border-color: $success;
|
150
|
+
|
151
|
+
&:focus { box-shadow: 0 0 5px $success-light; }
|
152
|
+
}
|
153
|
+
|
154
|
+
.input-radio,
|
155
|
+
.input-checkbox {
|
156
|
+
color: $success-dark;
|
157
|
+
}
|
158
|
+
}
|
119
159
|
}
|
120
160
|
|
121
161
|
.field-label {
|
122
162
|
display: block;
|
123
163
|
vertical-align: middle;
|
124
|
-
margin-bottom:
|
164
|
+
margin-bottom: .5em;
|
125
165
|
}
|
126
166
|
|
127
167
|
.field-help {
|
128
|
-
margin-top:
|
168
|
+
margin-top: .5em;
|
129
169
|
font-size: $small-size;
|
130
170
|
}
|
131
171
|
|
@@ -153,10 +193,16 @@ textarea.input {
|
|
153
193
|
.form-actions {
|
154
194
|
display: inline-block;
|
155
195
|
vertical-align: middle;
|
196
|
+
line-height: normal;
|
156
197
|
margin-right: $margin;
|
157
198
|
margin-bottom: $margin / 2;
|
158
199
|
}
|
159
200
|
|
160
201
|
.field-label { margin: 0 ($margin / 2) 0 0; }
|
161
202
|
.field-help { display: none; }
|
203
|
+
|
204
|
+
.input-radio,
|
205
|
+
.input-checkbox {
|
206
|
+
padding: $medium-padding 0;
|
207
|
+
}
|
162
208
|
}
|