fustrate-rails 0.3.3 → 0.4.0
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/lib/fustrate/rails/version.rb +1 -1
- data/vendor/assets/javascripts/fustrate/_module.coffee +14 -8
- data/vendor/assets/javascripts/fustrate/components/autocomplete.coffee +4 -4
- data/vendor/assets/javascripts/fustrate/components/file_picker.coffee +1 -0
- data/vendor/assets/javascripts/fustrate/components/flash.coffee +4 -4
- data/vendor/assets/javascripts/fustrate/components/modal.coffee +79 -19
- data/vendor/assets/javascripts/fustrate/components/pagination.coffee +5 -5
- data/vendor/assets/javascripts/fustrate/generic_form.coffee +4 -5
- data/vendor/assets/javascripts/fustrate/generic_page.coffee +6 -6
- data/vendor/assets/javascripts/fustrate/generic_table.coffee +2 -2
- data/vendor/assets/javascripts/fustrate/listenable.coffee +1 -1
- data/vendor/assets/stylesheets/_fustrate.sass +6 -6
- data/vendor/assets/stylesheets/awesomplete.sass +2 -1
- data/vendor/assets/stylesheets/fustrate/_colors.sass +3 -0
- data/vendor/assets/stylesheets/fustrate/_settings.sass +7 -7
- data/vendor/assets/stylesheets/fustrate/components/_components.sass +17 -17
- data/vendor/assets/stylesheets/fustrate/components/_functions.sass +9 -8
- data/vendor/assets/stylesheets/fustrate/components/alerts.sass +26 -18
- data/vendor/assets/stylesheets/fustrate/components/buttons.sass +17 -21
- data/vendor/assets/stylesheets/fustrate/components/disclosures.sass +5 -5
- data/vendor/assets/stylesheets/fustrate/components/dropdowns.sass +24 -19
- data/vendor/assets/stylesheets/fustrate/components/flash.sass +21 -16
- data/vendor/assets/stylesheets/fustrate/components/forms.sass +99 -92
- data/vendor/assets/stylesheets/fustrate/components/grid.sass +15 -23
- data/vendor/assets/stylesheets/fustrate/components/labels.sass +13 -12
- data/vendor/assets/stylesheets/fustrate/components/modals.sass +97 -49
- data/vendor/assets/stylesheets/fustrate/components/pagination.sass +41 -29
- data/vendor/assets/stylesheets/fustrate/components/panels.sass +30 -12
- data/vendor/assets/stylesheets/fustrate/components/popovers.sass +10 -6
- data/vendor/assets/stylesheets/fustrate/components/tables.sass +13 -9
- data/vendor/assets/stylesheets/fustrate/components/tabs.sass +6 -6
- data/vendor/assets/stylesheets/fustrate/components/tooltips.sass +12 -12
- data/vendor/assets/stylesheets/fustrate/components/typography.sass +140 -104
- metadata +5 -5
@@ -1,126 +1,129 @@
|
|
1
1
|
// We use this to set the base for lots of form spacing and positioning styles
|
2
|
-
$form-spacing: rem-calc(16)
|
3
|
-
$label-
|
4
|
-
$
|
5
|
-
$
|
6
|
-
$form-
|
2
|
+
$form-spacing: rem-calc(16) !default
|
3
|
+
$label-color: #4d4d4d !default
|
4
|
+
$label-font-size: rem-calc(14) !default
|
5
|
+
$input-font-size: rem-calc(14) !default
|
6
|
+
$form-element-margin: 0 0 ($form-spacing / 2) 0 !default
|
7
|
+
$form-disabled-color: #777 !default
|
8
|
+
$form-disabled-bg-color: #ddd !default
|
7
9
|
|
8
10
|
=fustrate-forms
|
9
11
|
form
|
10
12
|
margin: 0 0 $form-spacing
|
11
13
|
|
12
14
|
label
|
13
|
-
|
14
|
-
color: #4d4d4d
|
15
|
+
color: $label-color
|
15
16
|
cursor: pointer
|
16
17
|
display: block
|
18
|
+
font-size: $label-font-size
|
17
19
|
font-weight: normal
|
18
20
|
line-height: 1.5
|
19
21
|
margin-bottom: 0
|
20
22
|
|
21
23
|
&.inline
|
24
|
+
display: inline-block
|
25
|
+
float: none !important
|
22
26
|
margin: $form-element-margin
|
23
27
|
padding: $form-spacing / 2 + rem-calc(1px) rem-calc(5px)
|
24
|
-
float: none !important
|
25
28
|
text-align: right
|
26
|
-
display: inline-block
|
27
29
|
|
28
30
|
select::-ms-expand
|
29
31
|
display: none
|
30
32
|
|
31
33
|
.prefix,
|
32
34
|
.postfix
|
35
|
+
background: scale-color($white, $lightness: -5%)
|
36
|
+
border: 1px solid scale-color($white, $lightness: -20%)
|
37
|
+
color: $label-color
|
33
38
|
display: block
|
34
|
-
position: relative
|
35
|
-
z-index: 2
|
36
|
-
text-align: center
|
37
|
-
width: 100%
|
38
|
-
padding-top: 0
|
39
|
-
padding-bottom: 0
|
40
|
-
overflow: hidden
|
41
39
|
font-size: $label-font-size
|
42
40
|
height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1))
|
43
41
|
line-height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1))
|
44
|
-
|
45
|
-
|
46
|
-
|
42
|
+
overflow: hidden
|
43
|
+
padding-bottom: 0
|
44
|
+
padding-top: 0
|
45
|
+
position: relative
|
46
|
+
text-align: center
|
47
|
+
width: 100%
|
48
|
+
z-index: 2
|
47
49
|
|
48
50
|
.prefix
|
49
|
-
border-right:
|
51
|
+
border-right: 0
|
50
52
|
|
51
53
|
.postfix
|
52
|
-
border-left:
|
53
|
-
|
54
|
-
|
55
|
-
input[type=
|
56
|
-
input[type=
|
57
|
-
input[type=
|
58
|
-
input[type=
|
59
|
-
input[type=
|
60
|
-
input[type=
|
61
|
-
input[type=
|
62
|
-
input[type=
|
63
|
-
input[type=
|
64
|
-
input[type=
|
65
|
-
input[type=
|
66
|
-
input[type=
|
67
|
-
input[type=
|
54
|
+
border-left: 0
|
55
|
+
|
56
|
+
// We use this to get basic styling on all basic form elements
|
57
|
+
input[type='date'],
|
58
|
+
input[type='datetime-local'],
|
59
|
+
input[type='datetime'],
|
60
|
+
input[type='email'],
|
61
|
+
input[type='month'],
|
62
|
+
input[type='number'],
|
63
|
+
input[type='password'],
|
64
|
+
input[type='search'],
|
65
|
+
input[type='tel'],
|
66
|
+
input[type='text'],
|
67
|
+
input[type='time'],
|
68
|
+
input[type='url'],
|
69
|
+
input[type='week'],
|
68
70
|
textarea
|
69
71
|
-webkit-appearance: none
|
70
|
-
-webkit-border-radius:
|
71
|
-
background-color:
|
72
|
-
|
73
|
-
|
74
|
-
box-
|
75
|
-
color:
|
72
|
+
-webkit-border-radius: 0
|
73
|
+
background-color: $white
|
74
|
+
border: 1px solid scale-color($white, $lightness: -20%)
|
75
|
+
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1)
|
76
|
+
box-sizing: border-box
|
77
|
+
color: $black
|
76
78
|
display: block
|
79
|
+
font-family: inherit
|
77
80
|
font-size: $input-font-size
|
81
|
+
height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1))
|
78
82
|
margin: $form-element-margin
|
79
83
|
padding: $form-spacing / 2
|
80
|
-
height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1))
|
81
|
-
width: 100%
|
82
|
-
box-sizing: border-box
|
83
84
|
transition: box-shadow 450ms, border-color 450ms ease-in-out
|
85
|
+
width: 100%
|
84
86
|
|
85
87
|
&.inline
|
86
|
-
width: auto
|
87
88
|
display: inline-block
|
89
|
+
width: auto
|
88
90
|
|
89
91
|
&:focus
|
90
|
-
background:
|
91
|
-
border-color: scale-color(
|
92
|
+
background: $white
|
93
|
+
border-color: scale-color($white, $lightness: -40%)
|
94
|
+
box-shadow: 0 0 5px scale-color($white, $lightness: -40%)
|
92
95
|
outline: none
|
93
|
-
box-shadow: 0 0 5px scale_color(#fff, $lightness: -40%)
|
94
96
|
|
95
97
|
&:disabled,
|
96
98
|
&[disabled],
|
97
99
|
&[readonly],
|
98
100
|
fieldset[disabled] &
|
99
|
-
background-color:
|
100
|
-
cursor: disabled
|
101
|
+
background-color: $form-disabled-bg-color
|
101
102
|
color: $form-disabled-color
|
103
|
+
cursor: disabled
|
102
104
|
|
103
105
|
td &:only-child,
|
104
106
|
th &:only-child
|
105
107
|
margin: 0
|
106
108
|
|
107
|
-
input
|
108
|
-
|
109
|
-
|
109
|
+
input
|
110
|
+
&[type='submit']
|
111
|
+
-webkit-appearance: none
|
112
|
+
-webkit-border-radius: 0
|
110
113
|
|
111
114
|
textarea
|
112
115
|
height: auto
|
113
116
|
min-height: 50px
|
117
|
+
white-space: pre-line
|
114
118
|
|
115
|
-
|
116
|
-
|
117
|
-
|
119
|
+
// Respect enforced amount of rows for textarea
|
120
|
+
&[rows]
|
121
|
+
height: auto
|
118
122
|
|
119
|
-
/* Add height value for select elements to match text input height */
|
120
123
|
select
|
121
124
|
-webkit-appearance: none !important
|
122
|
-
-webkit-border-radius:
|
123
|
-
background-color:
|
125
|
+
-webkit-border-radius: 0
|
126
|
+
background-color: $white
|
124
127
|
|
125
128
|
// The custom arrow have some fake horizontal padding so we can align it
|
126
129
|
// from the right side of the element without relying on CSS3
|
@@ -128,61 +131,65 @@ $form-disabled-color: #777
|
|
128
131
|
background-position: 100% center
|
129
132
|
background-repeat: no-repeat
|
130
133
|
|
131
|
-
border: 1px solid scale-color(
|
132
|
-
|
133
|
-
|
134
|
+
border: 1px solid scale-color($white, $lightness: -20%)
|
135
|
+
border-radius: 0
|
136
|
+
color: $black
|
134
137
|
font-size: $input-font-size
|
135
|
-
|
138
|
+
// Add height value for select elements to match text input height
|
139
|
+
height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1))
|
136
140
|
line-height: normal
|
137
|
-
|
141
|
+
padding: $form-spacing / 2
|
142
|
+
padding-right: 24px
|
138
143
|
width: 100%
|
139
144
|
|
140
145
|
&.inline
|
141
|
-
width: auto
|
142
146
|
display: inline-block
|
147
|
+
width: auto
|
143
148
|
|
144
149
|
&:hover
|
145
|
-
background-color:
|
146
|
-
|
147
|
-
height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1))
|
150
|
+
background-color: $white
|
148
151
|
|
149
152
|
&:disabled,
|
150
153
|
&[disabled],
|
151
154
|
&[disabled]:hover
|
152
|
-
background-color:
|
153
|
-
border-color: scale-color(
|
154
|
-
cursor: disabled
|
155
|
+
background-color: $form-disabled-bg-color
|
156
|
+
border-color: scale-color($white, $lightness: -20%)
|
155
157
|
color: $form-disabled-color
|
158
|
+
cursor: disabled
|
156
159
|
|
157
160
|
&[multiple]
|
158
|
-
height: auto
|
159
161
|
background-image: none
|
162
|
+
height: auto
|
160
163
|
|
161
|
-
|
162
|
-
input[type=
|
163
|
-
input[type=
|
164
|
-
input[type="radio"],
|
164
|
+
input[type='checkbox'],
|
165
|
+
input[type='file'],
|
166
|
+
input[type='radio'],
|
165
167
|
select
|
168
|
+
// Adjust margin for form elements below
|
166
169
|
margin: $form-element-margin
|
167
170
|
|
168
171
|
td &:only-child,
|
169
172
|
th &:only-child
|
170
173
|
margin: 0
|
171
174
|
|
172
|
-
input
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
175
|
+
input
|
176
|
+
&[type='checkbox'] + label,
|
177
|
+
&[type='radio'] + label
|
178
|
+
display: inline-block
|
179
|
+
margin-bottom: 0
|
180
|
+
margin-left: $form-spacing * .5
|
181
|
+
margin-right: $form-spacing
|
182
|
+
vertical-align: baseline
|
179
183
|
|
180
|
-
|
181
|
-
|
182
|
-
|
184
|
+
// Normalize file input width
|
185
|
+
&[type='file']
|
186
|
+
width: 100%
|
183
187
|
|
184
|
-
input
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
188
|
+
input,
|
189
|
+
select,
|
190
|
+
textarea
|
191
|
+
&.error,
|
192
|
+
&.error:focus,
|
193
|
+
&.error:focus:hover
|
194
|
+
background: scale-color($red, $lightness: 90%)
|
195
|
+
border-color: scale-color($red, $lightness: 20%)
|
@@ -2,8 +2,8 @@ $row-width: rem-calc(1000)
|
|
2
2
|
$total-columns: 12
|
3
3
|
$column-gutter: rem-calc(30)
|
4
4
|
|
5
|
-
@function grid-calc($
|
6
|
-
@return percentage($
|
5
|
+
@function grid-calc($col-number, $col-count)
|
6
|
+
@return percentage($col-number / $col-count)
|
7
7
|
|
8
8
|
// Use +grid-row(nest) to include a nested row
|
9
9
|
// Use +grid-row(collapse) to collapsed a container row margins
|
@@ -11,30 +11,27 @@ $column-gutter: rem-calc(30)
|
|
11
11
|
// Use +grid-row to use a container row
|
12
12
|
=grid-row($behavior: false)
|
13
13
|
@if $behavior == nest
|
14
|
-
|
15
|
-
margin-left: -($column-gutter / 2)
|
16
|
-
margin-right: -($column-gutter / 2)
|
17
|
-
margin-top: 0
|
18
|
-
margin-bottom: 0
|
14
|
+
margin: 0 (-($column-gutter / 2))
|
19
15
|
max-width: none
|
16
|
+
width: auto
|
20
17
|
|
21
18
|
@else if $behavior == collapse
|
22
|
-
width: 100%
|
23
19
|
margin: 0
|
24
20
|
max-width: $row-width
|
21
|
+
width: 100%
|
25
22
|
|
26
23
|
@else if $behavior == nest-collapse
|
27
|
-
width: auto
|
28
24
|
margin: 0
|
29
25
|
max-width: none
|
26
|
+
width: auto
|
30
27
|
|
31
28
|
@else
|
32
|
-
|
29
|
+
margin-bottom: 0
|
33
30
|
margin-left: auto
|
34
31
|
margin-right: auto
|
35
32
|
margin-top: 0
|
36
|
-
margin-bottom: 0
|
37
33
|
max-width: $row-width
|
34
|
+
width: 100%
|
38
35
|
|
39
36
|
// Clearfix for all rows
|
40
37
|
+clearfix
|
@@ -80,8 +77,8 @@ $column-gutter: rem-calc(30)
|
|
80
77
|
left: grid-calc($push, $total-columns)
|
81
78
|
right: auto
|
82
79
|
@if $pull
|
83
|
-
right: grid-calc($pull, $total-columns)
|
84
80
|
left: auto
|
81
|
+
right: grid-calc($pull, $total-columns)
|
85
82
|
|
86
83
|
@if $float
|
87
84
|
@if $float == left or $float == true
|
@@ -93,9 +90,9 @@ $column-gutter: rem-calc(30)
|
|
93
90
|
|
94
91
|
// If centered, get rid of float and add appropriate margins
|
95
92
|
@if $center
|
93
|
+
float: none
|
96
94
|
margin-left: auto
|
97
95
|
margin-right: auto
|
98
|
-
float: none
|
99
96
|
|
100
97
|
// If offset, calculate appropriate margins
|
101
98
|
@if $offset
|
@@ -116,7 +113,6 @@ $column-gutter: rem-calc(30)
|
|
116
113
|
.columns
|
117
114
|
+grid-column($columns: false, $position: true)
|
118
115
|
|
119
|
-
|
120
116
|
@for $i from 1 through $total-columns
|
121
117
|
.#{$size}-#{$i}
|
122
118
|
+grid-column($columns: $i, $collapse: null, $float: false)
|
@@ -126,11 +122,11 @@ $column-gutter: rem-calc(30)
|
|
126
122
|
+grid-column($offset: $i, $collapse: null, $float: false)
|
127
123
|
|
128
124
|
.#{$size}-reset-order
|
125
|
+
float: left
|
126
|
+
left: auto
|
129
127
|
margin-left: 0
|
130
128
|
margin-right: 0
|
131
|
-
left: auto
|
132
129
|
right: auto
|
133
|
-
float: left
|
134
130
|
|
135
131
|
.column.#{$size}-centered,
|
136
132
|
.columns.#{$size}-centered
|
@@ -138,9 +134,9 @@ $column-gutter: rem-calc(30)
|
|
138
134
|
|
139
135
|
.column.#{$size}-uncentered,
|
140
136
|
.columns.#{$size}-uncentered
|
137
|
+
float: left
|
141
138
|
margin-left: 0
|
142
139
|
margin-right: 0
|
143
|
-
float: left
|
144
140
|
|
145
141
|
// Fighting [class*="column"] + [class*="column"]:last-child
|
146
142
|
.column.#{$size}-centered:last-child,
|
@@ -161,8 +157,8 @@ $column-gutter: rem-calc(30)
|
|
161
157
|
+grid-row
|
162
158
|
|
163
159
|
&.fluid
|
164
|
-
width: 100%
|
165
160
|
max-width: 100%
|
161
|
+
width: 100%
|
166
162
|
|
167
163
|
&.collapse
|
168
164
|
> .column,
|
@@ -187,11 +183,6 @@ $column-gutter: rem-calc(30)
|
|
187
183
|
& + &.end
|
188
184
|
float: left
|
189
185
|
|
190
|
-
[class*="column"] + [class*="column"]:last-child
|
191
|
-
float: right
|
192
|
-
[class*="column"] + [class*="column"].end
|
193
|
-
float: left
|
194
|
-
|
195
186
|
@media #{$small-up}
|
196
187
|
+grid-html-classes($size: small)
|
197
188
|
|
@@ -200,5 +191,6 @@ $column-gutter: rem-calc(30)
|
|
200
191
|
|
201
192
|
@media #{$large-up}
|
202
193
|
+grid-html-classes($size: large)
|
194
|
+
|
203
195
|
.large-column-count-2
|
204
196
|
+columns(2)
|
@@ -8,24 +8,24 @@ $label-font-color-alt: #fff
|
|
8
8
|
|
9
9
|
@if lightness($bg) < 70%
|
10
10
|
color: $label-font-color-alt
|
11
|
-
text-shadow: 0 1px 1px
|
11
|
+
text-shadow: 0 1px 1px scale-color($bg, $lightness: -70%)
|
12
12
|
@else
|
13
13
|
color: $label-font-color
|
14
|
-
text-shadow: 0 1px 1px
|
14
|
+
text-shadow: 0 1px 1px scale-color($bg, $lightness: 70%)
|
15
15
|
|
16
16
|
=fustrate-labels
|
17
17
|
.label
|
18
|
-
|
19
|
-
|
20
|
-
line-height: 1
|
21
|
-
white-space: nowrap
|
18
|
+
+label-color
|
19
|
+
border-radius: 3px
|
22
20
|
display: inline-block
|
23
|
-
|
21
|
+
font-size: $label-font-size
|
22
|
+
line-height: 1
|
24
23
|
margin-bottom: inherit
|
25
24
|
padding: $label-padding
|
26
|
-
|
27
|
-
|
28
|
-
|
25
|
+
position: relative
|
26
|
+
text-align: center
|
27
|
+
text-decoration: none
|
28
|
+
white-space: nowrap
|
29
29
|
|
30
30
|
td.status:last-child &:only-child,
|
31
31
|
&.fw
|
@@ -33,6 +33,7 @@ $label-font-color-alt: #fff
|
|
33
33
|
|
34
34
|
&.round
|
35
35
|
border-radius: 1000px
|
36
|
+
|
36
37
|
&.sharp
|
37
38
|
border-radius: 0
|
38
39
|
|
@@ -56,8 +57,8 @@ $label-font-color-alt: #fff
|
|
56
57
|
|
57
58
|
// Check Mark
|
58
59
|
&.yes::before
|
59
|
-
+font-awesome(
|
60
|
+
+font-awesome('\f00c')
|
60
61
|
|
61
62
|
// X
|
62
63
|
&.no::before
|
63
|
-
+font-awesome(
|
64
|
+
+font-awesome('\f00d')
|