dvl-core 0.0.1

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 (45) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +4 -0
  3. data/.hound.yml +5 -0
  4. data/.ruby-version +1 -0
  5. data/Gemfile +2 -0
  6. data/LICENSE.md +20 -0
  7. data/README.md +35 -0
  8. data/circle.yml +7 -0
  9. data/dvl-core.gemspec +30 -0
  10. data/lib/dvl/core.rb +11 -0
  11. data/lib/dvl/core/version.rb +5 -0
  12. data/preview/app.rb +252 -0
  13. data/script/bootstrap +45 -0
  14. data/script/cibuild +3 -0
  15. data/script/preview +3 -0
  16. data/script/release +38 -0
  17. data/spec/dvl_core_spec.rb +30 -0
  18. data/vendor/assets/javascripts/dvl/core.js +4 -0
  19. data/vendor/assets/javascripts/dvl/core/buttons.js +116 -0
  20. data/vendor/assets/javascripts/dvl/core/dropdowns.js +161 -0
  21. data/vendor/assets/javascripts/dvl/core/modals.js +281 -0
  22. data/vendor/assets/javascripts/dvl/core/tooltips.js +478 -0
  23. data/vendor/assets/stylesheets/dvl/core.scss +21 -0
  24. data/vendor/assets/stylesheets/dvl/core/buttons.scss +152 -0
  25. data/vendor/assets/stylesheets/dvl/core/code.scss +31 -0
  26. data/vendor/assets/stylesheets/dvl/core/dropdowns.scss +309 -0
  27. data/vendor/assets/stylesheets/dvl/core/forms.scss +434 -0
  28. data/vendor/assets/stylesheets/dvl/core/grid.scss +87 -0
  29. data/vendor/assets/stylesheets/dvl/core/includes.scss +163 -0
  30. data/vendor/assets/stylesheets/dvl/core/labels.scss +31 -0
  31. data/vendor/assets/stylesheets/dvl/core/legacy.scss +287 -0
  32. data/vendor/assets/stylesheets/dvl/core/links.scss +53 -0
  33. data/vendor/assets/stylesheets/dvl/core/lists.scss +30 -0
  34. data/vendor/assets/stylesheets/dvl/core/media.scss +24 -0
  35. data/vendor/assets/stylesheets/dvl/core/modals.scss +173 -0
  36. data/vendor/assets/stylesheets/dvl/core/pagination.scss +70 -0
  37. data/vendor/assets/stylesheets/dvl/core/print.scss +69 -0
  38. data/vendor/assets/stylesheets/dvl/core/progress.scss +16 -0
  39. data/vendor/assets/stylesheets/dvl/core/resets.scss +92 -0
  40. data/vendor/assets/stylesheets/dvl/core/shame.scss +35 -0
  41. data/vendor/assets/stylesheets/dvl/core/sidebar.scss +101 -0
  42. data/vendor/assets/stylesheets/dvl/core/tables.scss +122 -0
  43. data/vendor/assets/stylesheets/dvl/core/tooltips.scss +87 -0
  44. data/vendor/assets/stylesheets/dvl/core/typography.scss +158 -0
  45. metadata +228 -0
@@ -0,0 +1,163 @@
1
+ // #### VARIABLES ####
2
+
3
+ // Colors
4
+ $bodyBackgroundColor: #aab2bd;
5
+
6
+ // Grayscale
7
+ $black: #222;
8
+ $darkestGray: #444;
9
+ $blankStateGray: #666;
10
+ $darkerGray: #777;
11
+ $darkGray: #aaa;
12
+ $gray: #ccc;
13
+ $borderGray: #dfdfdf;
14
+ $lightGray: #e5e5e5;
15
+ $lighterGray: #efefef;
16
+ $lightestGray: #f7f7f7;
17
+ $white: #fff;
18
+
19
+ // Blues
20
+ $logoBlue: #009ade;
21
+ $blueGray: #6a6e75;
22
+ $lighterBlueGray: #6a6e75;
23
+ $selectionBackground: #b3d4fc;
24
+ $linkColor: #2e8ad0;
25
+ $bodyFontColor: $darkestGray;
26
+
27
+ // Other Colors
28
+ $successColor: #2aa828;
29
+ $errorColor: #c12f2e;
30
+ $alertColor: $errorColor;
31
+ $blueHighlight: #eaf3fa;
32
+ $mintHighlight: #e7f9e7;
33
+ $questionTextColor: #297cbb;
34
+ $purpleBlue: #6188f5;
35
+
36
+ // Nav
37
+ $navBackground: #434a54;
38
+ $navHoverBackground: #3c434c;
39
+ $navDropdownBackground: $white;
40
+ $navBorderColor: #363b43;
41
+ $navHeight: 60px;
42
+ $navBreakpoint: 800px;
43
+ $navLinkColor: $white;
44
+ $navDropdownHeaderColor: $darkerGray;
45
+
46
+ // Bottom status bar
47
+ $bottomStatusBarHeight: 60px;
48
+
49
+ // Sidebar nav
50
+ $sidebarNavHighlightColor: #267aac;
51
+ $sidebarNavBadgeColor: $successColor;
52
+
53
+ // Corner radius
54
+
55
+ $radius: 3px;
56
+
57
+ // Bold font weight
58
+ $bold: 600;
59
+
60
+ // Typography
61
+ $fontSize: 14;
62
+
63
+ // #### MIXINS ####
64
+
65
+ @mixin font-smoothing() {
66
+ -webkit-font-smoothing: antialiased;
67
+ -moz-osx-font-smoothing: grayscale;
68
+ }
69
+
70
+ @mixin ninety_wrapper() {
71
+ margin: 0 auto;
72
+ width: 90%;
73
+ max-width: 1150px;
74
+ position: relative;
75
+ }
76
+
77
+ @mixin icon($unicode_id) {
78
+ content: $unicode_id;
79
+ font-family: 'FontAwesome';
80
+ }
81
+
82
+ @mixin user_pic($size: 25) {
83
+ width: $size * 1px;
84
+ border-radius: 50%;
85
+ border: 1px solid $gray;
86
+ }
87
+
88
+ @mixin border_top_radius($radius) {
89
+ border-top-left-radius: $radius;
90
+ border-top-right-radius: $radius;
91
+ }
92
+
93
+ @mixin border_right_radius($radius) {
94
+ border-top-right-radius: $radius;
95
+ border-bottom-right-radius: $radius;
96
+ }
97
+
98
+ @mixin border_bottom_radius($radius) {
99
+ border-bottom-left-radius: $radius;
100
+ border-bottom-right-radius: $radius;
101
+ }
102
+
103
+ @mixin border_left_radius($radius) {
104
+ border-top-left-radius: $radius;
105
+ border-bottom-left-radius: $radius;
106
+ }
107
+
108
+ @mixin social_button_color($base_color) {
109
+ background: $base_color;
110
+ &:hover {
111
+ background: darken($base_color, 7%);
112
+ }
113
+ }
114
+
115
+ // Animation mixins
116
+
117
+ $ease_in_quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
118
+ $ease_in_cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
119
+ $ease_in_quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
120
+ $ease_in_quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
121
+ $ease_in_sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
122
+ $ease_in_expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
123
+ $ease_in_circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
124
+ $ease_in_back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
125
+
126
+ $ease_out_quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
127
+ $ease_out_cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
128
+ $ease_out_quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
129
+ $ease_out_quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
130
+ $ease_out_sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
131
+ $ease_out_expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
132
+ $ease_out_circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
133
+ $ease_out_back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
134
+
135
+ $ease_in_out_quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
136
+ $ease_in_out_cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
137
+ $ease_in_out_quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
138
+ $ease_in_out_quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
139
+ $ease_in_out_sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
140
+ $ease_in_out_expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
141
+ $ease_in_out_circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
142
+ $ease_in_out_back: cubic-bezier(0.680, -0.550, 0.265, 1.550);
143
+
144
+
145
+ @mixin cf() {
146
+ &:before, &:after {
147
+ display: table;
148
+ content: " ";
149
+ }
150
+ &:after {
151
+ clear: both;
152
+ }
153
+ }
154
+
155
+ @mixin monospace() {
156
+ font-family: "Lucida Console", monospace;
157
+ }
158
+
159
+ @mixin ellipses {
160
+ overflow: hidden;
161
+ white-space: nowrap;
162
+ text-overflow: ellipsis;
163
+ }
@@ -0,0 +1,31 @@
1
+ // Both custom labels, in the repsonse UI, and tags next to items (like "New" or "Existing" fields in imports.)
2
+
3
+ // #todo separate these into two different patterns
4
+
5
+ .label {
6
+ display: inline-block;
7
+ padding: 0.1rem 0.4rem;
8
+ border-radius: $radius;
9
+ font-size: 0.8rem;
10
+ background-color: $lighterGray;
11
+ color: #333;
12
+ }
13
+
14
+ .label_error {
15
+ background-color: $errorColor;
16
+ color: #fff;
17
+ }
18
+
19
+ .label_success {
20
+ background-color: $successColor;
21
+ color: #fff;
22
+ }
23
+
24
+ .label_info {
25
+ background-color: #1fa3ec;
26
+ color: #fff;
27
+ }
28
+
29
+ .label_warning {
30
+ background-color: #ffd119;
31
+ }
@@ -0,0 +1,287 @@
1
+ // Deprecated styles in Based.
2
+
3
+ // Build Helpers
4
+ //
5
+ // I'll be working towards removing all appearance classes
6
+ // like these from the codebase, via three methods:
7
+ //
8
+ // 1. Integrating the styles directly into the components they're applied to.
9
+ //
10
+ // 2. Reworking site-wide defaults so that these tweaks are no longer needed.
11
+ //
12
+ // 3. Converting these into mixins which we can use in the CSS, rather than
13
+ // bloating the markup.
14
+ //
15
+ // -Josh
16
+
17
+ @mixin build_helpers($x: "") {
18
+
19
+ /* Alignment */
20
+ .#{$x}align_left {
21
+ float: left !important;
22
+ }
23
+
24
+ .#{$x}align_center {
25
+ float: none;
26
+ margin-left: auto;
27
+ margin-right: auto;
28
+ }
29
+
30
+ .#{$x}align_right {
31
+ float: right !important;
32
+ }
33
+
34
+ .#{$x}align_none {
35
+ float: none !important;
36
+ }
37
+
38
+ .#{$x}margin_tn {
39
+ margin-top: 1rem !important;
40
+ }
41
+
42
+ .#{$x}margin_rn {
43
+ margin-right: 1rem !important;
44
+ }
45
+
46
+ .#{$x}margin_bn {
47
+ margin-bottom: 1rem !important;
48
+ }
49
+
50
+ .#{$x}margin_ln {
51
+ margin-left: 1rem !important;
52
+ }
53
+
54
+ .#{$x}margin_th {
55
+ margin-top: 0.5rem !important;
56
+ }
57
+
58
+ .#{$x}margin_rh {
59
+ margin-right: 0.5rem !important;
60
+ }
61
+
62
+ .#{$x}margin_bh {
63
+ margin-bottom: 0.5rem !important;
64
+ }
65
+
66
+ .#{$x}margin_lh {
67
+ margin-left: 0.5rem !important;
68
+ }
69
+
70
+ .#{$x}margin_tq {
71
+ margin-top: 0.25rem !important;
72
+ }
73
+
74
+ .#{$x}margin_rq {
75
+ margin-right: 0.25rem !important;
76
+ }
77
+
78
+ .#{$x}margin_bq {
79
+ margin-bottom: 0.25rem !important;
80
+ }
81
+
82
+ .#{$x}margin_lq {
83
+ margin-left: 0.25rem !important;
84
+ }
85
+
86
+ .#{$x}margin_td {
87
+ margin-top: 2rem !important;
88
+ }
89
+
90
+ .#{$x}margin_rd {
91
+ margin-right: 2rem !important;
92
+ }
93
+
94
+ .#{$x}margin_bd {
95
+ margin-bottom: 2rem !important;
96
+ }
97
+
98
+ .#{$x}margin_ld {
99
+ margin-left: 2rem !important;
100
+ }
101
+
102
+ .#{$x}margin_none {
103
+ margin: 0 !important;
104
+ }
105
+
106
+ /* Paddings */
107
+
108
+ .#{$x}padding_top {
109
+ padding-top: 1rem !important;
110
+ }
111
+
112
+ .#{$x}padding_right {
113
+ padding-right: 1rem !important;
114
+ }
115
+
116
+ .#{$x}padding_bottom {
117
+ padding-bottom: 1rem !important;
118
+ }
119
+
120
+ .#{$x}padding_left {
121
+ padding-left: 1rem !important;
122
+ }
123
+
124
+ .#{$x}padding_none {
125
+ padding: 0 !important;
126
+ }
127
+
128
+ /* Text alignment */
129
+ .#{$x}text_left {
130
+ text-align: left !important;
131
+ }
132
+
133
+ .#{$x}text_center {
134
+ text-align: center !important;
135
+ }
136
+
137
+ .#{$x}text_right {
138
+ text-align: right !important;
139
+ }
140
+
141
+ .#{$x}text_justify {
142
+ text-align: justify !important;
143
+ }
144
+
145
+ /* Font sizing */
146
+ .#{$x}font_huge,
147
+ .#{$x}font_xxl,
148
+ .#{$x}font_xl,
149
+ .#{$x}font_large,
150
+ .#{$x}font_medium,
151
+ .#{$x}font_normal,
152
+ .#{$x}font_smaller,
153
+ .#{$x}font_small {
154
+ color: inherit;
155
+ font-weight: inherit;
156
+ }
157
+
158
+ .#{$x}font_huge,
159
+ .#{$x}font_xxl {
160
+ line-height: 1.333 !important;
161
+ }
162
+
163
+ .#{$x}font_huge {
164
+ font-size: 4.209rem !important;
165
+ }
166
+
167
+ .#{$x}font_xxl {
168
+ font-size: 3.157rem !important;
169
+ }
170
+
171
+ .#{$x}font_xl {
172
+ font-size: 2.369rem !important;
173
+ }
174
+
175
+ .#{$x}font_large {
176
+ font-size: 1.777rem !important;
177
+ }
178
+
179
+ .#{$x}font_medium {
180
+ font-size: 1.333rem !important;
181
+ }
182
+
183
+ .#{$x}font_normal {
184
+ font-size: 1rem !important;
185
+ }
186
+
187
+ .#{$x}font_smaller {
188
+ font-size: 0.9rem !important;
189
+ }
190
+
191
+ .#{$x}font_small {
192
+ font-size: 0.8rem !important;
193
+ }
194
+
195
+ /* Font styles */
196
+ .#{$x}font_thin {
197
+ font-weight: 300;
198
+ }
199
+
200
+ .#{$x}weight_normal {
201
+ font-weight: normal;
202
+ }
203
+
204
+ .#{$x}font_muted {
205
+ color: $darkerGray;
206
+ }
207
+
208
+ @if $x == "" {
209
+ .desk_show, .lap_show, .desk_show_i, .lap_show_i, .desk_show_ib, .lap_show_ib {
210
+ display: none !important;
211
+ }
212
+ } @else {
213
+ .#{$x}hide {
214
+ display: none !important;
215
+ }
216
+
217
+ .#{$x}show {
218
+ display: block !important;
219
+ }
220
+
221
+ .#{$x}show_i {
222
+ display: inline !important;
223
+ }
224
+
225
+ .#{$x}show_ib {
226
+ display: inline-block !important;
227
+ }
228
+
229
+ th.#{$x}show, td.#{$x}show {
230
+ display: table-cell !important;
231
+ }
232
+ }
233
+ }
234
+
235
+ @include build_helpers();
236
+
237
+ @media only screen and (min-width: 640px) {
238
+ @include build_helpers(lap_);
239
+ }
240
+
241
+ @media only screen and (min-width: 960px) {
242
+ @include build_helpers(desk_);
243
+ }
244
+
245
+ .none {
246
+ color: $darkGray;
247
+ }
248
+ .yes {
249
+ color: $successColor;
250
+ }
251
+ .no {
252
+ color: $errorColor;
253
+ }
254
+
255
+ // Hide from screen readers and browsers
256
+ .hidden {
257
+ display: none;
258
+ visibility: hidden;
259
+ }
260
+
261
+ // Visually hidden, available for screen readers - http://cbrac.co/TUcUgH
262
+ .visuallyhidden {
263
+ position: absolute;
264
+ overflow: hidden;
265
+ clip: rect(0 0 0 0);
266
+ margin: -1px;
267
+ padding: 0;
268
+ width: 1px;
269
+ height: 1px;
270
+ border: 0;
271
+ // Add keyboard navigation - http://cbrac.co/RR8gO6
272
+ &.focusable {
273
+ &:active,
274
+ &:focus {
275
+ position: static;
276
+ overflow: visible;
277
+ clip: auto;
278
+ margin: 0;
279
+ width: auto;
280
+ height: auto;
281
+ }
282
+ }
283
+ }
284
+
285
+ .cf {
286
+ @include cf();
287
+ }