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.
Files changed (35) hide show
  1. checksums.yaml +4 -4
  2. data/lib/fustrate/rails/version.rb +1 -1
  3. data/vendor/assets/javascripts/fustrate/_module.coffee +14 -8
  4. data/vendor/assets/javascripts/fustrate/components/autocomplete.coffee +4 -4
  5. data/vendor/assets/javascripts/fustrate/components/file_picker.coffee +1 -0
  6. data/vendor/assets/javascripts/fustrate/components/flash.coffee +4 -4
  7. data/vendor/assets/javascripts/fustrate/components/modal.coffee +79 -19
  8. data/vendor/assets/javascripts/fustrate/components/pagination.coffee +5 -5
  9. data/vendor/assets/javascripts/fustrate/generic_form.coffee +4 -5
  10. data/vendor/assets/javascripts/fustrate/generic_page.coffee +6 -6
  11. data/vendor/assets/javascripts/fustrate/generic_table.coffee +2 -2
  12. data/vendor/assets/javascripts/fustrate/listenable.coffee +1 -1
  13. data/vendor/assets/stylesheets/_fustrate.sass +6 -6
  14. data/vendor/assets/stylesheets/awesomplete.sass +2 -1
  15. data/vendor/assets/stylesheets/fustrate/_colors.sass +3 -0
  16. data/vendor/assets/stylesheets/fustrate/_settings.sass +7 -7
  17. data/vendor/assets/stylesheets/fustrate/components/_components.sass +17 -17
  18. data/vendor/assets/stylesheets/fustrate/components/_functions.sass +9 -8
  19. data/vendor/assets/stylesheets/fustrate/components/alerts.sass +26 -18
  20. data/vendor/assets/stylesheets/fustrate/components/buttons.sass +17 -21
  21. data/vendor/assets/stylesheets/fustrate/components/disclosures.sass +5 -5
  22. data/vendor/assets/stylesheets/fustrate/components/dropdowns.sass +24 -19
  23. data/vendor/assets/stylesheets/fustrate/components/flash.sass +21 -16
  24. data/vendor/assets/stylesheets/fustrate/components/forms.sass +99 -92
  25. data/vendor/assets/stylesheets/fustrate/components/grid.sass +15 -23
  26. data/vendor/assets/stylesheets/fustrate/components/labels.sass +13 -12
  27. data/vendor/assets/stylesheets/fustrate/components/modals.sass +97 -49
  28. data/vendor/assets/stylesheets/fustrate/components/pagination.sass +41 -29
  29. data/vendor/assets/stylesheets/fustrate/components/panels.sass +30 -12
  30. data/vendor/assets/stylesheets/fustrate/components/popovers.sass +10 -6
  31. data/vendor/assets/stylesheets/fustrate/components/tables.sass +13 -9
  32. data/vendor/assets/stylesheets/fustrate/components/tabs.sass +6 -6
  33. data/vendor/assets/stylesheets/fustrate/components/tooltips.sass +12 -12
  34. data/vendor/assets/stylesheets/fustrate/components/typography.sass +140 -104
  35. 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-font-size: rem-calc(14)
4
- $input-font-size: rem-calc(14)
5
- $form-element-margin: 0 0 ($form-spacing / 2) 0
6
- $form-disabled-color: #777
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
- font-size: $label-font-size
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
- background: scale-color(#fff, $lightness: -5%)
45
- border: 1px solid scale-color(#fff, $lightness: -20%)
46
- color: #333
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: none
51
+ border-right: 0
50
52
 
51
53
  .postfix
52
- border-left: none
53
-
54
- /* We use this to get basic styling on all basic form elements */
55
- input[type="text"],
56
- input[type="password"],
57
- input[type="date"],
58
- input[type="datetime"],
59
- input[type="datetime-local"],
60
- input[type="month"],
61
- input[type="week"],
62
- input[type="email"],
63
- input[type="number"],
64
- input[type="search"],
65
- input[type="tel"],
66
- input[type="time"],
67
- input[type="url"],
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: 0px
71
- background-color: #fff
72
- font-family: inherit
73
- border: 1px solid scale-color(#fff, $lightness: -20%)
74
- box-shadow: inset 0 1px 2px rgba(0,0,0,0.1)
75
- color: #000
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: #fff
91
- border-color: scale-color(#fff, $lightness: -40%)
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: #ddd
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[type="submit"]
108
- -webkit-appearance: none
109
- -webkit-border-radius: 0px
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
- /* Respect enforced amount of rows for textarea */
116
- textarea[rows]
117
- height: auto
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: 0px
123
- background-color: #fff
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(#fff, $lightness: -20%)
132
- padding: $form-spacing / 2
133
- padding-right: 24px
134
+ border: 1px solid scale-color($white, $lightness: -20%)
135
+ border-radius: 0
136
+ color: $black
134
137
  font-size: $input-font-size
135
- color: #000
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
- border-radius: 0
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: #fff
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: #ddd
153
- border-color: scale-color(#fff, $lightness: -20%)
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
- /* Adjust margin for form elements below */
162
- input[type="file"],
163
- input[type="checkbox"],
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[type="checkbox"] + label,
173
- input[type="radio"] + label
174
- display: inline-block
175
- margin-left: $form-spacing * .5
176
- margin-right: $form-spacing
177
- margin-bottom: 0
178
- vertical-align: baseline
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
- /* Normalize file input width */
181
- input[type="file"]
182
- width: 100%
184
+ // Normalize file input width
185
+ &[type='file']
186
+ width: 100%
183
187
 
184
- input.error,
185
- input.error:focus,
186
- input.error:focus:hover
187
- background: scale_color($red, $lightness: 90%)
188
- border-color: scale_color($red, $lightness: 20%)
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($colNumber, $totalColumns)
6
- @return percentage($colNumber / $totalColumns)
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
- width: auto
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
- width: 100%
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 scale_color($bg, $lightness: -70%)
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 scale_color($bg, $lightness: 70%)
14
+ text-shadow: 0 1px 1px scale-color($bg, $lightness: 70%)
15
15
 
16
16
  =fustrate-labels
17
17
  .label
18
- text-align: center
19
- text-decoration: none
20
- line-height: 1
21
- white-space: nowrap
18
+ +label-color
19
+ border-radius: 3px
22
20
  display: inline-block
23
- position: relative
21
+ font-size: $label-font-size
22
+ line-height: 1
24
23
  margin-bottom: inherit
25
24
  padding: $label-padding
26
- font-size: $label-font-size
27
- border-radius: 3px
28
- +label-color
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("\f00c")
60
+ +font-awesome('\f00c')
60
61
 
61
62
  // X
62
63
  &.no::before
63
- +font-awesome("\f00d")
64
+ +font-awesome('\f00d')