underoos 1.0.0 → 1.1.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.
- data/Gemfile +5 -0
- data/Gemfile.lock +21 -7
- data/README.md +85 -10
- data/Rakefile +36 -1
- data/app/assets/javascripts/docs.js +6 -0
- data/app/assets/javascripts/styleguide.coffee +162 -0
- data/app/assets/javascripts/underoos.js +0 -1
- data/app/assets/stylesheets/base/_base.sass +14 -0
- data/app/assets/stylesheets/base/_buttons.sass +68 -0
- data/app/assets/stylesheets/base/_forms.sass +313 -24
- data/app/assets/stylesheets/base/_helpers.sass +27 -13
- data/app/assets/stylesheets/base/_normalize.sass +17 -9
- data/app/assets/stylesheets/base/_scaffold.sass +85 -0
- data/app/assets/stylesheets/base/_tables.sass +77 -0
- data/app/assets/stylesheets/base/_transitions.sass +10 -2
- data/app/assets/stylesheets/base/_typography.sass +183 -21
- data/app/assets/stylesheets/components/_accordions.sass +38 -0
- data/app/assets/stylesheets/components/_breadcrumbs.sass +19 -5
- data/app/assets/stylesheets/components/_button-groups.sass +43 -0
- data/app/assets/stylesheets/components/_carets.sass +13 -2
- data/app/assets/stylesheets/components/_carousels.sass +32 -0
- data/app/assets/stylesheets/components/_close.sass +15 -2
- data/app/assets/stylesheets/components/_components.sass +28 -0
- data/app/assets/stylesheets/components/_decals.sass +14 -0
- data/app/assets/stylesheets/components/_dropdowns.sass +88 -4
- data/app/assets/stylesheets/components/_media.sass +36 -0
- data/app/assets/stylesheets/components/_modals.sass +29 -0
- data/app/assets/stylesheets/components/_nav-lists.sass +20 -0
- data/app/assets/stylesheets/components/_navbars.sass +64 -3
- data/app/assets/stylesheets/components/_notifications.sass +112 -16
- data/app/assets/stylesheets/components/_paddles.sass +26 -0
- data/app/assets/stylesheets/components/_pagination.sass +23 -3
- data/app/assets/stylesheets/components/_pills.sass +80 -0
- data/app/assets/stylesheets/components/_popovers.sass +28 -0
- data/app/assets/stylesheets/components/_progress-bars.sass +33 -1
- data/app/assets/stylesheets/components/_tabs.sass +79 -0
- data/app/assets/stylesheets/components/_tooltips.sass +26 -0
- data/app/assets/stylesheets/components/_wells.sass +9 -0
- data/app/assets/stylesheets/layouts/_containers.sass +12 -0
- data/app/assets/stylesheets/layouts/_layouts.sass +5 -0
- data/app/assets/stylesheets/layouts/_print.sass +5 -1
- data/app/assets/stylesheets/layouts/_queries.sass +18 -15
- data/app/assets/stylesheets/layouts/_upgrades.sass +51 -40
- data/app/assets/stylesheets/mixins/_arrows.sass +13 -1
- data/app/assets/stylesheets/mixins/_clearfixins.sass +18 -4
- data/app/assets/stylesheets/mixins/_coloring.sass +10 -1
- data/app/assets/stylesheets/mixins/_columns.sass +16 -3
- data/app/assets/stylesheets/mixins/_conversions.sass +18 -6
- data/app/assets/stylesheets/mixins/_font-size.sass +16 -1
- data/app/assets/stylesheets/mixins/_image-tools.sass +12 -1
- data/app/assets/stylesheets/mixins/_inline-block.sass +21 -0
- data/app/assets/stylesheets/mixins/_ir.sass +14 -1
- data/app/assets/stylesheets/mixins/_mixins.sass +6 -0
- data/app/assets/stylesheets/mixins/_responsive.sass +16 -0
- data/app/assets/stylesheets/mixins/_sticky-footer.sass +52 -0
- data/app/assets/stylesheets/mixins/_tab-focus.sass +8 -1
- data/app/assets/stylesheets/mixins/_timing-equations.sass +34 -1
- data/app/assets/stylesheets/mixins/_visibility.sass +18 -5
- data/app/assets/stylesheets/polyfills/_box-shadow.sass +10 -0
- data/app/assets/stylesheets/polyfills/_box-sizing.sass +10 -1
- data/app/assets/stylesheets/polyfills/_functions.sass +14 -1
- data/app/assets/stylesheets/polyfills/_opacity.sass +10 -1
- data/app/assets/stylesheets/polyfills/_polyfills.sass +9 -2
- data/app/assets/stylesheets/polyfills/_transition.sass +10 -0
- data/app/assets/stylesheets/polyfills/_user-select.sass +10 -0
- data/app/assets/stylesheets/settings/_config.sass +26 -0
- data/app/assets/stylesheets/settings/_settings.sass +7 -0
- data/app/assets/stylesheets/settings/_theme.sass +189 -0
- data/app/assets/stylesheets/{styleguide.sass → underoos-docs.sass} +20 -116
- data/app/assets/stylesheets/underoos.sass +5 -16
- data/config.ru +1 -3
- data/features/generator.feature +13 -4
- data/lib/generators/underoos/assets_generator.rb +4 -2
- data/lib/underoos/version.rb +1 -1
- data/public/images.html +157 -0
- data/public/index.html +149 -0
- data/public/sherpa.css +306 -0
- data/public/styles.html +5374 -0
- data/script/javascripts +0 -1
- data/sherpa/config.yml +96 -0
- data/sherpa/layouts/images.mustache +17 -0
- data/sherpa/layouts/layout.mustache +77 -0
- data/sherpa/layouts/overview.mustache +19 -0
- data/sherpa/layouts/raw.mustache +25 -0
- data/sherpa/layouts/section.mustache +67 -0
- data/underoos.gemspec +0 -2
- data/vendor/assets/javascripts/bootstrap-alert.js +28 -32
- data/vendor/assets/javascripts/bootstrap-button.js +29 -33
- data/vendor/assets/javascripts/bootstrap-collapse.js +45 -26
- data/vendor/assets/javascripts/bootstrap-dropdown.js +18 -10
- data/vendor/assets/javascripts/bootstrap-modal.js +25 -17
- data/vendor/assets/javascripts/bootstrap-popover.js +13 -10
- data/vendor/assets/javascripts/bootstrap-tab.js +12 -7
- data/vendor/assets/javascripts/bootstrap-tooltip.js +40 -35
- data/vendor/assets/javascripts/bootstrap-transition.js +30 -20
- data/vendor/assets/javascripts/bootstrap-typeahead.js +24 -10
- data/vendor/assets/javascripts/sherpa.coffee +78 -0
- metadata +34 -75
- data/app/assets/javascripts/styleguide.js +0 -132
- data/app/assets/stylesheets/base/_elements.sass +0 -61
- data/app/assets/stylesheets/polyfills/_inline-block.sass +0 -8
- data/app/assets/stylesheets/themes/_default.sass +0 -119
- data/app/controllers/underoos/styleguides_controller.rb +0 -79
- data/app/views/shared/_upgrades.html.haml +0 -12
- data/app/views/underoos/styleguides/_assets.haml +0 -42
- data/app/views/underoos/styleguides/_components.haml +0 -42
- data/app/views/underoos/styleguides/_elements.haml +0 -242
- data/app/views/underoos/styleguides/_forms.haml +0 -305
- data/app/views/underoos/styleguides/_layouts.haml +0 -76
- data/app/views/underoos/styleguides/_palettes.haml +0 -18
- data/app/views/underoos/styleguides/_resources.haml +0 -27
- data/app/views/underoos/styleguides/_tables.haml +0 -124
- data/app/views/underoos/styleguides/_typography.haml +0 -284
- data/app/views/underoos/styleguides/_utilities.haml +0 -270
- data/app/views/underoos/styleguides/components/_accordions.haml +0 -83
- data/app/views/underoos/styleguides/components/_breadcrumbs.haml +0 -42
- data/app/views/underoos/styleguides/components/_button-groups.haml +0 -162
- data/app/views/underoos/styleguides/components/_carets.haml +0 -28
- data/app/views/underoos/styleguides/components/_close.haml +0 -20
- data/app/views/underoos/styleguides/components/_decals.haml +0 -40
- data/app/views/underoos/styleguides/components/_dropdowns.haml +0 -189
- data/app/views/underoos/styleguides/components/_media.haml +0 -78
- data/app/views/underoos/styleguides/components/_modals.haml +0 -42
- data/app/views/underoos/styleguides/components/_nav-lists.haml +0 -52
- data/app/views/underoos/styleguides/components/_navbars.haml +0 -144
- data/app/views/underoos/styleguides/components/_navs-showcase.haml +0 -27
- data/app/views/underoos/styleguides/components/_notifications.haml +0 -169
- data/app/views/underoos/styleguides/components/_paddles.haml +0 -68
- data/app/views/underoos/styleguides/components/_pagination.haml +0 -64
- data/app/views/underoos/styleguides/components/_popovers.haml +0 -33
- data/app/views/underoos/styleguides/components/_progress-bars.haml +0 -72
- data/app/views/underoos/styleguides/components/_tabs-pills.haml +0 -241
- data/app/views/underoos/styleguides/components/_tooltips.haml +0 -37
- data/app/views/underoos/styleguides/components/_wells.haml +0 -29
- data/app/views/underoos/styleguides/index.html.haml +0 -259
- data/app/views/underoos/styleguides/partials/_form-template.haml +0 -171
- data/app/views/underoos/styleguides/partials/_table-data.haml +0 -33
- data/app/views/underoos/styleguides/partials/_transitions.haml +0 -136
- data/config/routes.rb +0 -3
- data/vendor/assets/javascripts/bootstrap-scrollspy.js +0 -125
|
@@ -1,132 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
// This is some dirty link disabling and showcasing behavior
|
|
3
|
-
!function ($) {
|
|
4
|
-
|
|
5
|
-
$(function() {
|
|
6
|
-
var showcase = $('#navs_showcase')
|
|
7
|
-
var nav_lists = $('li', showcase)
|
|
8
|
-
var nav_links = $('li > a', showcase)
|
|
9
|
-
var markup = 'html'
|
|
10
|
-
var html_examples = $('.html')
|
|
11
|
-
var haml_examples = $('.haml')
|
|
12
|
-
var superfriends = [
|
|
13
|
-
'Aquaman'
|
|
14
|
-
,'Batman'
|
|
15
|
-
,'Catwomen'
|
|
16
|
-
,'Daredevil'
|
|
17
|
-
,'Elektra'
|
|
18
|
-
,'Fantastic Four'
|
|
19
|
-
,'Green Lantern'
|
|
20
|
-
,'Hulk'
|
|
21
|
-
,'Iron Man'
|
|
22
|
-
,'Jericho'
|
|
23
|
-
,'Karate Kid'
|
|
24
|
-
,'Lobo'
|
|
25
|
-
,'Mr. Terrific'
|
|
26
|
-
,'Nightwing'
|
|
27
|
-
,'Obsidian'
|
|
28
|
-
,'Plastic Man'
|
|
29
|
-
,'Quicksilver'
|
|
30
|
-
,'Robin'
|
|
31
|
-
,'Superman'
|
|
32
|
-
,'Teenage Mutant Ninja Turtles'
|
|
33
|
-
,'Ultraman'
|
|
34
|
-
,'Vigilante'
|
|
35
|
-
,'Wolverine'
|
|
36
|
-
,'X-Men'
|
|
37
|
-
,'Yellow Jacket'
|
|
38
|
-
,'Zattana'
|
|
39
|
-
]
|
|
40
|
-
|
|
41
|
-
// enable nice looking pre tags
|
|
42
|
-
window.prettyPrint && prettyPrint()
|
|
43
|
-
|
|
44
|
-
// instantiate any tooltips and popovers
|
|
45
|
-
$("a[rel=tooltip]").tooltip()
|
|
46
|
-
$("a[rel=popover]").popover()
|
|
47
|
-
|
|
48
|
-
// Disable anchor links within the docs section
|
|
49
|
-
$('.sg-section [href^=#]').click(function (e) {
|
|
50
|
-
e.preventDefault()
|
|
51
|
-
})
|
|
52
|
-
|
|
53
|
-
// Showcase various classes of nav items
|
|
54
|
-
nav_links.on('click', function(e) {
|
|
55
|
-
e.preventDefault()
|
|
56
|
-
var li = $(this).parent('li')
|
|
57
|
-
var classes = $(this).data('classes')
|
|
58
|
-
nav_lists.removeClass('active')
|
|
59
|
-
$(li).addClass('active')
|
|
60
|
-
showcase.removeClass().addClass(classes)
|
|
61
|
-
})
|
|
62
|
-
|
|
63
|
-
// Fake loading data to showcase a stateful button
|
|
64
|
-
$('#loader_btn').on('click', function(e) {
|
|
65
|
-
var btn = $(this)
|
|
66
|
-
btn.button('loading')
|
|
67
|
-
setTimeout(function() {
|
|
68
|
-
btn.button('complete')
|
|
69
|
-
}, 3000)
|
|
70
|
-
})
|
|
71
|
-
|
|
72
|
-
// Click progress bars to showcase states
|
|
73
|
-
$('.progress').on('click', function(e) {
|
|
74
|
-
var bar = $(this).find('> .bar')
|
|
75
|
-
var pwidth = $(this).width()
|
|
76
|
-
|
|
77
|
-
if (bar.width() === pwidth) {
|
|
78
|
-
bar.css({width:'0%'})
|
|
79
|
-
} else {
|
|
80
|
-
bar.css({width:'100%'})
|
|
81
|
-
}
|
|
82
|
-
})
|
|
83
|
-
|
|
84
|
-
// Test the upgrade message icon
|
|
85
|
-
$('#upgrade_test').on('click', function(e) {
|
|
86
|
-
e.preventDefault()
|
|
87
|
-
$('html').toggleClass('no-js lt-ie8')
|
|
88
|
-
window.scrollTo(0,0)
|
|
89
|
-
})
|
|
90
|
-
|
|
91
|
-
// Test flash messages
|
|
92
|
-
$('.flash-example').on('click', function(e) {
|
|
93
|
-
e.preventDefault()
|
|
94
|
-
var tmpl = '<div class="notification important fade"><p><strong>Pro Tip!</strong> This is a message</p><a class="close" data-dismiss="alert" href="#">×</a></div>'
|
|
95
|
-
var fm = $('#flash_messages')
|
|
96
|
-
fm.html(tmpl)
|
|
97
|
-
var notifier = $(fm.find('.notification')[0])
|
|
98
|
-
var position = ($(this).data('position'))
|
|
99
|
-
fm.removeClass()
|
|
100
|
-
fm.addClass('flash-messages ' + position)
|
|
101
|
-
notifier.addClass('in')
|
|
102
|
-
})
|
|
103
|
-
|
|
104
|
-
// Toggle markup examples when the "!" is hit
|
|
105
|
-
$('html').on('keydown', function(e) {
|
|
106
|
-
if ((e.which === 49 && e.shiftKey)) {
|
|
107
|
-
if (markup === 'html') {
|
|
108
|
-
markup = 'haml'
|
|
109
|
-
html_examples.addClass('hidden')
|
|
110
|
-
haml_examples.removeClass('hidden')
|
|
111
|
-
} else {
|
|
112
|
-
markup = 'html'
|
|
113
|
-
haml_examples.addClass('hidden')
|
|
114
|
-
html_examples.removeClass('hidden')
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
})
|
|
118
|
-
|
|
119
|
-
// Demo the typeahead plugin
|
|
120
|
-
$('#superfriends').typeahead({source:superfriends , items:10})
|
|
121
|
-
|
|
122
|
-
// Simple test for calculating the page size
|
|
123
|
-
// var sizing = $('#page_title')
|
|
124
|
-
// window.onresize = function() {
|
|
125
|
-
// sizing[0].innerHTML = window.innerWidth + 'px'
|
|
126
|
-
// }
|
|
127
|
-
|
|
128
|
-
})
|
|
129
|
-
|
|
130
|
-
}(window.jQuery)
|
|
131
|
-
|
|
132
|
-
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
// Allow images to be fluid
|
|
3
|
-
img
|
|
4
|
-
max-width: 100%
|
|
5
|
-
|
|
6
|
-
// Base Navs, used by tabs, pills, breadcrumbs, pagination, and navigation lists
|
|
7
|
-
.nav
|
|
8
|
-
+clearfixer
|
|
9
|
-
list-style: none
|
|
10
|
-
|
|
11
|
-
.nav > li > a
|
|
12
|
-
display: block
|
|
13
|
-
|
|
14
|
-
.nav.inline > li
|
|
15
|
-
float: left
|
|
16
|
-
|
|
17
|
-
.nav.inline > li > a
|
|
18
|
-
padding-left: 0.5em
|
|
19
|
-
padding-right: 0.5em
|
|
20
|
-
|
|
21
|
-
// Active states for navs get a default cursor
|
|
22
|
-
.nav > .active > a,
|
|
23
|
-
.nav > .active > a:hover
|
|
24
|
-
cursor: default
|
|
25
|
-
.nav > .dropdown.active > a:hover
|
|
26
|
-
cursor: pointer
|
|
27
|
-
|
|
28
|
-
// Headers within a Nav
|
|
29
|
-
.nav .nav-header
|
|
30
|
-
display: block
|
|
31
|
-
color: $component_normal
|
|
32
|
-
font-size: 0.75em
|
|
33
|
-
font-weight: bold
|
|
34
|
-
text-transform: uppercase
|
|
35
|
-
text-shadow: $text_drop_lite
|
|
36
|
-
padding: 0.4em 1em
|
|
37
|
-
|
|
38
|
-
.nav li + .nav-header
|
|
39
|
-
margin-top: 1em
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
// Buttons
|
|
43
|
-
.btn
|
|
44
|
-
+btn-button($standard, $grey6)
|
|
45
|
-
&.info
|
|
46
|
-
+btn-override($info, $white)
|
|
47
|
-
&.important
|
|
48
|
-
+btn-override($important, $white)
|
|
49
|
-
&.success
|
|
50
|
-
+btn-override($success, $white)
|
|
51
|
-
&.warning
|
|
52
|
-
+btn-override($warning, $white)
|
|
53
|
-
&.danger
|
|
54
|
-
+btn-override($danger, $white)
|
|
55
|
-
&.primary
|
|
56
|
-
+btn-override($primary, $white)
|
|
57
|
-
|
|
58
|
-
// Fix standard links to closer resemble `button` elements
|
|
59
|
-
a.btn
|
|
60
|
-
font-weight: bold
|
|
61
|
-
|
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
// ## Base Sizing
|
|
3
|
-
$context_px: 16
|
|
4
|
-
$base_font_size: 14
|
|
5
|
-
$base_width: 1000
|
|
6
|
-
$base_line_height: 1.2
|
|
7
|
-
$base_vertical: $base_font_size * $base_line_height
|
|
8
|
-
|
|
9
|
-
// ## Fonts
|
|
10
|
-
$sans_norm: "HelveticaNeue", "Helvetica Neue", "Helvetica", "Arial", sans-serif
|
|
11
|
-
$serif_norm: "Georgia", "Times", "Times New Roman", serif
|
|
12
|
-
$code_norm: "Bitstream Vera Sans Mono", "Menslo LG M", "Menlo", "Monaco", monospace
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
// ## Colors
|
|
16
|
-
|
|
17
|
-
// greyscale
|
|
18
|
-
$black: #000
|
|
19
|
-
$grey1: #111
|
|
20
|
-
$grey2: #222
|
|
21
|
-
$grey3: #333
|
|
22
|
-
$grey4: #444
|
|
23
|
-
$grey5: #555
|
|
24
|
-
$grey6: #666
|
|
25
|
-
$grey7: #777
|
|
26
|
-
$grey8: #888
|
|
27
|
-
$grey9: #999
|
|
28
|
-
$greyA: #aaa
|
|
29
|
-
$greyB: #bbb
|
|
30
|
-
$greyC: #ccc
|
|
31
|
-
$greyD: #ddd
|
|
32
|
-
$greyE: #eee
|
|
33
|
-
$white: #fff
|
|
34
|
-
$off_white: #fafafa
|
|
35
|
-
$off_grey: #eaeaea
|
|
36
|
-
|
|
37
|
-
// mc roy g biv
|
|
38
|
-
$magenta: #ff00ff
|
|
39
|
-
$cyan: #00ffff
|
|
40
|
-
$red: #b22222
|
|
41
|
-
$orange: #f26522
|
|
42
|
-
$yellow: #ffc40d
|
|
43
|
-
$green: #46a546
|
|
44
|
-
$blue: #268bd2
|
|
45
|
-
$indigo: #4b0082
|
|
46
|
-
$violet: #ee82ee
|
|
47
|
-
|
|
48
|
-
// status
|
|
49
|
-
$standard: #f5f5f5
|
|
50
|
-
$info: $grey9
|
|
51
|
-
$important: $blue
|
|
52
|
-
$success: $green
|
|
53
|
-
$warning: $yellow
|
|
54
|
-
$error: $red
|
|
55
|
-
$danger: $red
|
|
56
|
-
|
|
57
|
-
// ci
|
|
58
|
-
$primary: $blue
|
|
59
|
-
|
|
60
|
-
// misc colors
|
|
61
|
-
$disabled_color: $greyB
|
|
62
|
-
$disabled_bg: $greyE
|
|
63
|
-
$disabled_border: $greyD
|
|
64
|
-
$focus_color: #52a8ec
|
|
65
|
-
$focus_border: rgba($focus_color, 0.8)
|
|
66
|
-
|
|
67
|
-
// component
|
|
68
|
-
$component_normal: $grey6
|
|
69
|
-
$component_active: $white
|
|
70
|
-
$component_bg: transparent
|
|
71
|
-
$component_bg_hover: $greyE
|
|
72
|
-
$component_bg_active: $primary
|
|
73
|
-
$component_border: $greyC
|
|
74
|
-
$component_border_alt: darken($component_border, 10%)
|
|
75
|
-
|
|
76
|
-
// ## Shadows
|
|
77
|
-
$text_inset_dark: 0 -1px 0 rgba($black, 0.25)
|
|
78
|
-
$text_inset_lite: 0 -1px 0 rgba($white, 0.75)
|
|
79
|
-
$text_drop_dark: 0 1px 0 rgba($black, 0.25)
|
|
80
|
-
$text_drop_lite: 0 1px 0 rgba($white, 0.75)
|
|
81
|
-
|
|
82
|
-
$inset_dark: inset 0 1px 4px rgba($black, 0.3)
|
|
83
|
-
$inset_lite: inset 0 1px 4px rgba($white, 0.7)
|
|
84
|
-
$drop_dark: 0 1px 4px rgba($black, 0.3)
|
|
85
|
-
$drop_lite: 0 1px 4px rgba($white, 0.7)
|
|
86
|
-
|
|
87
|
-
$focus_inset: inset 0 1px 3px rgba($black, 0.1)
|
|
88
|
-
$focus_glow: 0 0 8px rgba($focus_color, 0.6)
|
|
89
|
-
$error_glow: 0 0 8px rgba($red, 0.6)
|
|
90
|
-
|
|
91
|
-
// ## Misc
|
|
92
|
-
$radii: 0.4em
|
|
93
|
-
$speed: 0.25s
|
|
94
|
-
|
|
95
|
-
$zindex_dropdown: 1000
|
|
96
|
-
$zindex_tips: 1010
|
|
97
|
-
$zindex_navbar: 1020
|
|
98
|
-
$zindex_modal_backdrop: 1030
|
|
99
|
-
$zindex_modal: 1040
|
|
100
|
-
$zindex_flash_message: 1050
|
|
101
|
-
|
|
102
|
-
// base.sass
|
|
103
|
-
$body_bg: $white
|
|
104
|
-
$body_color: $grey3
|
|
105
|
-
$select_bg: $primary
|
|
106
|
-
$select_color: $white
|
|
107
|
-
$tap_highlight: $primary
|
|
108
|
-
$link_normal: $primary
|
|
109
|
-
$link_hover: darken($link_normal, 20%)
|
|
110
|
-
|
|
111
|
-
// typography.sass
|
|
112
|
-
$header_color: $grey3
|
|
113
|
-
$hr_color: $grey6
|
|
114
|
-
|
|
115
|
-
// forms.sass
|
|
116
|
-
$placeholder: $greyC
|
|
117
|
-
$horiz_offset: 100px
|
|
118
|
-
$input_inset_shadow: inset 0 1px 1px rgba($black, 0.1)
|
|
119
|
-
|
|
@@ -1,79 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
module Underoos
|
|
3
|
-
class StyleguidesController < ActionController::Base
|
|
4
|
-
def index
|
|
5
|
-
@lorem = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
|
|
6
|
-
@lorem_sm = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.'
|
|
7
|
-
@lorem_tiny = 'Lorem ipsum dolor sit amet.'
|
|
8
|
-
@images = Dir['public/images/**/*.{png,jpeg,jpg,gif}'].map {|f| f.sub('public','')}
|
|
9
|
-
|
|
10
|
-
# Palettes
|
|
11
|
-
@greys = [
|
|
12
|
-
{prop:'$black', hex:'#000'},
|
|
13
|
-
{prop:'$grey1', hex:'#111'},
|
|
14
|
-
{prop:'$grey2', hex:'#222'},
|
|
15
|
-
{prop:'$grey3', hex:'#333'},
|
|
16
|
-
{prop:'$grey4', hex:'#444'},
|
|
17
|
-
{prop:'$grey5', hex:'#555'},
|
|
18
|
-
{prop:'$grey6', hex:'#666'},
|
|
19
|
-
{prop:'$grey7', hex:'#777'},
|
|
20
|
-
{prop:'$grey8', hex:'#888'},
|
|
21
|
-
{prop:'$grey9', hex:'#999'},
|
|
22
|
-
{prop:'$greyA', hex:'#aaa'},
|
|
23
|
-
{prop:'$greyB', hex:'#bbb'},
|
|
24
|
-
{prop:'$greyC', hex:'#ccc'},
|
|
25
|
-
{prop:'$greyD', hex:'#ddd'},
|
|
26
|
-
{prop:'$greyE', hex:'#eee'},
|
|
27
|
-
{prop:'$white', hex:'#fff'},
|
|
28
|
-
{prop:'$off_grey', hex:'#eaeaea'},
|
|
29
|
-
{prop:'$off_white', hex:'#fafafa'}
|
|
30
|
-
]
|
|
31
|
-
@rainbow = [
|
|
32
|
-
{prop:'$magenta', hex:'#ff00ff'},
|
|
33
|
-
{prop:'$cyan', hex:'#00ffff'},
|
|
34
|
-
{prop:'$red', hex:'#b22222'},
|
|
35
|
-
{prop:'$orange', hex:'#f26522'},
|
|
36
|
-
{prop:'$yellow', hex:'#ffc40d'},
|
|
37
|
-
{prop:'$green', hex:'#46a546'},
|
|
38
|
-
{prop:'$blue', hex:'#268bd2'},
|
|
39
|
-
{prop:'$indigo', hex:'#4b0082'},
|
|
40
|
-
{prop:'$violet', hex:'#ee82ee'}
|
|
41
|
-
]
|
|
42
|
-
@status = [
|
|
43
|
-
{prop:'$standard', hex:'#f5f5f5'},
|
|
44
|
-
{prop:'$info', hex:'#999'},
|
|
45
|
-
{prop:'$important',hex:'#268bd2'},
|
|
46
|
-
{prop:'$success', hex:'#46a546'},
|
|
47
|
-
{prop:'$warning', hex:'#ffc40d'},
|
|
48
|
-
{prop:'$error', hex:'#b22222'},
|
|
49
|
-
{prop:'$danger', hex:'#b22222'}
|
|
50
|
-
]
|
|
51
|
-
@misc_colors = [
|
|
52
|
-
{prop:'$primary', hex:'#268bd2'},
|
|
53
|
-
{prop:'$disabled_color', hex:'#bbb'},
|
|
54
|
-
{prop:'$disabled_bg', hex:'#eee'},
|
|
55
|
-
{prop:'$disabled_border', hex:'#ddd'},
|
|
56
|
-
{prop:'$focus_color', hex:'#52a8ec'},
|
|
57
|
-
{prop:'$focus_border', hex:'rgba(82,168,236,0.8)'}
|
|
58
|
-
]
|
|
59
|
-
@components = [
|
|
60
|
-
{prop:'$component_normal', hex:'#666'},
|
|
61
|
-
{prop:'$component_active', hex:'#fff'},
|
|
62
|
-
{prop:'$component_bg', hex:'transparent'},
|
|
63
|
-
{prop:'$component_bg_active', hex:'#268bd2'},
|
|
64
|
-
{prop:'$component_bg_hover', hex:'#eee'},
|
|
65
|
-
{prop:'$component_border', hex:'#ccc'},
|
|
66
|
-
{prop:'$component_border_alt', hex:'#b3b3b3'}
|
|
67
|
-
]
|
|
68
|
-
# Stick all palette options into an array of objects for easier documentation
|
|
69
|
-
@palettes = [
|
|
70
|
-
{title:'Greyscale', colors: @greys },
|
|
71
|
-
{title:'mc roy g biv', colors: @rainbow },
|
|
72
|
-
{title:'Status', colors: @status },
|
|
73
|
-
{title:'Miscellaneous', colors: @misc_colors },
|
|
74
|
-
{title:'Components', colors: @components }
|
|
75
|
-
]
|
|
76
|
-
end
|
|
77
|
-
end
|
|
78
|
-
end
|
|
79
|
-
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
#upgrade_notifications
|
|
3
|
-
.upgrade-icon
|
|
4
|
-
%span !
|
|
5
|
-
.upgrade-notification
|
|
6
|
-
#lt_ie8.upgrade-container
|
|
7
|
-
%p Please upgrade to the <a href="http://windows.microsoft.com/en-US/internet-explorer/downloads/ie-9/worldwide-languages">latest version of Internet Explorer</a> or use one of the following browsers:
|
|
8
|
-
%br
|
|
9
|
-
%p <a href="http://www.google.com/chrome/">Google Chrome</a>, <a href="http://www.apple.com/safari/download/">Apple Safari</a>, or <a href="http://www.mozilla.org/en-US/firefox/new/">Mozilla Firefox</a>
|
|
10
|
-
#no_js.upgrade-container
|
|
11
|
-
%p For full functionality of this site it is necessary to enable <a href="http://www.enable-javascript.com/" target="_blank">JavaScript</a>.
|
|
12
|
-
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
#assets_icons.sg-spy-landing
|
|
3
|
-
.sg-subsection
|
|
4
|
-
%h3.sg-subheading Favicon & Touch icons
|
|
5
|
-
.sg-half.pull
|
|
6
|
-
%p Include these icons in the root directory of your project and there is no need for extra markup in the <code><head></code> of your html file.
|
|
7
|
-
%br
|
|
8
|
-
%ol
|
|
9
|
-
%li <samp>favicon.ico</samp> <code>[16x16]</code>
|
|
10
|
-
%li <samp>apple-touch-icon.png</samp> <code>[57x57]</code>
|
|
11
|
-
%li <samp>apple-touch-icon-precomposed.png</samp> <code>[57x57]</code>
|
|
12
|
-
%li <samp>apple-touch-icon-57x57-precomposed.png</samp>
|
|
13
|
-
%li <samp>apple-touch-icon-72x72-precomposed.png</samp>
|
|
14
|
-
%li <samp>apple-touch-icon-114x114-precomposed.png</samp>
|
|
15
|
-
%br
|
|
16
|
-
%p
|
|
17
|
-
%small
|
|
18
|
-
You can optionally include a <code>320x460</code> <code>startup.png</code> in your root directory as well. See the <a href="http://miniapps.co.uk/blog/post/ios-startup-images-using-css-media-queries/">post</a> by Alex Gibson for more information.
|
|
19
|
-
.sg-half.push
|
|
20
|
-
.well
|
|
21
|
-
%img(src='/favicon.ico' alt='favicon')
|
|
22
|
-
%img(src='/apple-touch-icon.png' alt='apple touch icon')
|
|
23
|
-
%img(src='/apple-touch-icon-precomposed.png' alt='apple touch icon')
|
|
24
|
-
%img(src='/apple-touch-icon-57x57-precomposed.png' alt='apple touch icon')
|
|
25
|
-
%img(src='/apple-touch-icon-72x72-precomposed.png' alt='apple touch icon')
|
|
26
|
-
%img(src='/apple-touch-icon-114x114-precomposed.png' alt='apple touch icon')
|
|
27
|
-
.notification.important.fade.in
|
|
28
|
-
%p <strong>Note!</strong> For more information on using icons, see <a href="http://mathiasbynens.be/notes/touch-icons">Mathias Bynens post</a>
|
|
29
|
-
|
|
30
|
-
#assets_gui.sg-spy-landing
|
|
31
|
-
.sg-subsection
|
|
32
|
-
%h3.sg-subheading UI elements
|
|
33
|
-
%p Sprites, icons, graphics, and other image assets used within the application.
|
|
34
|
-
.sg-subsection
|
|
35
|
-
.well
|
|
36
|
-
- @images.each do |image|
|
|
37
|
-
- base = "#{File.basename(image)}"
|
|
38
|
-
%p.sg-note(style="margin: 1.5em 0 1em 0;") #{image}
|
|
39
|
-
%img(src="#{image}" alt="#{base}")
|
|
40
|
-
.notification.important.fade.in
|
|
41
|
-
%p <strong>Note!</strong> Images are auto populated from <code>public/images/*</code>
|
|
42
|
-
|