zurb-foundation 4.0.5 → 4.0.7
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/.gitignore +1 -0
- data/Gemfile.lock +2 -2
- data/README.md +1 -0
- data/{CHANGELOG.md → docs/CHANGELOG.md} +63 -3
- data/docs/Gemfile +1 -0
- data/docs/Gemfile.lock +2 -0
- data/docs/_sidebar-components.html.erb +1 -0
- data/docs/_sidebar.html.erb +1 -0
- data/docs/changelog.html.erb +1 -205
- data/docs/components/alert-boxes.html.erb +1 -1
- data/docs/components/block-grid.html.erb +1 -1
- data/docs/components/breadcrumbs.html.erb +3 -3
- data/docs/components/button-groups.html.erb +1 -1
- data/docs/components/buttons.html.erb +1 -1
- data/docs/components/dropdown-buttons.html.erb +1 -1
- data/docs/components/dropdown.html.erb +1 -1
- data/docs/components/flex-video.html.erb +1 -1
- data/docs/components/forms.html.erb +1 -1
- data/docs/components/global.html.erb +92 -0
- data/docs/components/inline-lists.html.erb +1 -1
- data/docs/components/keystrokes.html.erb +2 -2
- data/docs/components/labels.html.erb +2 -2
- data/docs/components/orbit.html.erb +10 -2
- data/docs/components/pagination.html.erb +1 -1
- data/docs/components/panels.html.erb +1 -1
- data/docs/components/pricing-tables.html.erb +1 -1
- data/docs/components/progress-bars.html.erb +2 -2
- data/docs/components/section.html.erb +18 -0
- data/docs/components/side-nav.html.erb +1 -1
- data/docs/components/split-buttons.html.erb +1 -1
- data/docs/components/sub-nav.html.erb +1 -1
- data/docs/components/switch.html.erb +1 -1
- data/docs/components/thumbnails.html.erb +1 -1
- data/docs/components/top-bar.html.erb +5 -5
- data/docs/css/docs.scss +0 -1
- data/docs/layout.html.erb +2 -3
- data/docs/sass.html.erb +21 -14
- data/js/foundation/foundation.clearing.js +2 -0
- data/js/foundation/foundation.dropdown.js +10 -10
- data/js/foundation/foundation.joyride.js +9 -12
- data/js/foundation/foundation.js +28 -2
- data/js/foundation/foundation.orbit.js +17 -9
- data/js/foundation/foundation.reveal.js +6 -2
- data/js/foundation/foundation.section.js +30 -18
- data/js/foundation/foundation.topbar.js +18 -8
- data/lib/foundation/generators/USAGE +6 -5
- data/lib/foundation/generators/install_generator.rb +9 -9
- data/lib/foundation/generators/templates/application.html.erb +40 -37
- data/lib/foundation/generators/templates/application.html.haml +5 -2
- data/lib/foundation/generators/templates/application.html.slim +6 -5
- data/lib/foundation/version.rb +1 -1
- data/scss/foundation/_foundation-global.scss +19 -4
- data/scss/foundation/components/_alert-boxes.scss +1 -1
- data/scss/foundation/components/_breadcrumbs.scss +4 -4
- data/scss/foundation/components/_button-groups.scss +8 -8
- data/scss/foundation/components/_buttons.scss +4 -3
- data/scss/foundation/components/_custom-forms.scss +175 -171
- data/scss/foundation/components/_dropdown-buttons.scss +1 -1
- data/scss/foundation/components/_dropdown.scss +1 -1
- data/scss/foundation/components/_flex-video.scss +1 -1
- data/scss/foundation/components/_forms.scss +91 -89
- data/scss/foundation/components/_global.scss +7 -2
- data/scss/foundation/components/_grid.scss +3 -3
- data/scss/foundation/components/_inline-lists.scss +1 -1
- data/scss/foundation/components/_keystrokes.scss +2 -2
- data/scss/foundation/components/_labels.scss +3 -3
- data/scss/foundation/components/_magellan.scss +1 -1
- data/scss/foundation/components/_pagination.scss +1 -1
- data/scss/foundation/components/_panels.scss +1 -1
- data/scss/foundation/components/_pricing-tables.scss +1 -1
- data/scss/foundation/components/_progress-bars.scss +2 -2
- data/scss/foundation/components/_reveal.scss +1 -1
- data/scss/foundation/components/_section.scss +1 -1
- data/scss/foundation/components/_side-nav.scss +1 -1
- data/scss/foundation/components/_split-buttons.scss +1 -1
- data/scss/foundation/components/_sub-nav.scss +1 -1
- data/scss/foundation/components/_switch.scss +3 -3
- data/scss/foundation/components/_thumbs.scss +1 -1
- data/scss/foundation/components/_top-bar.scss +4 -1
- data/scss/foundation/components/_visibility.scss +273 -274
- data/templates/project/scss/_settings.scss +4 -4
- data/templates/project/scss/app.scss +8 -8
- data/templates/upgrade/manifest.rb +7 -12
- metadata +6 -6
- data/index.html +0 -113
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
Description:
|
|
2
|
-
Setup Foundation assets
|
|
2
|
+
Setup Foundation assets in your app and generate new layouts preconfigured to use Foundation
|
|
3
3
|
|
|
4
4
|
Example:
|
|
5
5
|
rails g foundation:install
|
|
6
6
|
|
|
7
|
-
This will
|
|
7
|
+
This will insert foundation require lines into default application assets:
|
|
8
8
|
/app/assets/javascripts/application.js
|
|
9
9
|
/app/assets/stylesheets/application.css
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
This will create:
|
|
11
|
+
And create sample layout (depending of your template engine):
|
|
14
12
|
/app/views/layouts/application.html.erb
|
|
13
|
+
|
|
14
|
+
And foundation variables override file:
|
|
15
|
+
/app/assets/stylesheets/foundation_and_overrides.scss
|
|
@@ -6,9 +6,9 @@ module Foundation
|
|
|
6
6
|
source_root File.join(File.dirname(__FILE__), 'templates')
|
|
7
7
|
argument :layout_name, :type => :string, :default => 'application', :banner => 'layout_name'
|
|
8
8
|
|
|
9
|
-
class_option :haml, :desc => 'Generate HAML layout instead of
|
|
10
|
-
class_option :slim, :desc => 'Generate Slim layout instead of
|
|
11
|
-
|
|
9
|
+
class_option :haml, :desc => 'Generate HAML layout instead of erb', :type => :boolean
|
|
10
|
+
class_option :slim, :desc => 'Generate Slim layout instead of erb', :type => :boolean
|
|
11
|
+
|
|
12
12
|
def add_assets
|
|
13
13
|
# rails_ujs breaks, need to incorporate rails-behavior plugin for this to work seamlessly
|
|
14
14
|
# gsub_file "app/assets/javascripts/application#{detect_js_format[0]}", /\/\/= require jquery\n/, ""
|
|
@@ -17,14 +17,14 @@ module Foundation
|
|
|
17
17
|
settings_file = File.join(File.dirname(__FILE__),"..","..","..","templates","project","scss","_settings.scss")
|
|
18
18
|
create_file "app/assets/stylesheets/foundation_and_overrides.scss", File.read(settings_file)
|
|
19
19
|
append_to_file "app/assets/stylesheets/foundation_and_overrides.scss", "\n@import 'foundation';\n"
|
|
20
|
-
|
|
20
|
+
append_to_file "app/assets/stylesheets/application#{detect_css_format[0]}", "#{detect_css_format[1]} require foundation_and_overrides\n"
|
|
21
21
|
end
|
|
22
|
-
|
|
22
|
+
|
|
23
23
|
def detect_js_format
|
|
24
24
|
return ['.js.coffee', '#='] if File.exist?('app/assets/javascripts/application.js.coffee')
|
|
25
25
|
return ['.js', '//='] if File.exist?('app/assets/javascripts/application.js')
|
|
26
26
|
end
|
|
27
|
-
|
|
27
|
+
|
|
28
28
|
def detect_css_format
|
|
29
29
|
return ['.css', ' *='] if File.exist?('app/assets/stylesheets/application.css')
|
|
30
30
|
return ['.css.sass', ' //='] if File.exist?('app/assets/stylesheets/application.css.sass')
|
|
@@ -34,9 +34,9 @@ module Foundation
|
|
|
34
34
|
end
|
|
35
35
|
|
|
36
36
|
def create_layout
|
|
37
|
-
if options.haml?
|
|
37
|
+
if options.haml?||(defined?(Haml) && !options.slim?)
|
|
38
38
|
template 'application.html.haml', "app/views/layouts/#{file_name}.html.haml"
|
|
39
|
-
elsif options.slim?
|
|
39
|
+
elsif options.slim?||(defined?(Slim) && !options.haml?)
|
|
40
40
|
template 'application.html.slim', "app/views/layouts/#{file_name}.html.slim"
|
|
41
41
|
else
|
|
42
42
|
template 'application.html.erb', "app/views/layouts/#{file_name}.html.erb"
|
|
@@ -50,4 +50,4 @@ module Foundation
|
|
|
50
50
|
end
|
|
51
51
|
end
|
|
52
52
|
end
|
|
53
|
-
end
|
|
53
|
+
end
|
|
@@ -4,40 +4,43 @@
|
|
|
4
4
|
<!--[if IE 7 ]> <html class="ie7" lang="en"> <![endif]-->
|
|
5
5
|
<!--[if IE 8 ]> <html class="ie8" lang="en"> <![endif]-->
|
|
6
6
|
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
|
|
7
|
-
<head>
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
</head>
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
</
|
|
43
|
-
|
|
7
|
+
<head>
|
|
8
|
+
<meta charset="utf-8" />
|
|
9
|
+
|
|
10
|
+
<!-- Uncomment to make IE8 render like IE7 -->
|
|
11
|
+
<!-- <meta http-equiv="X-UA-Compatible" content="IE=7" /> -->
|
|
12
|
+
|
|
13
|
+
<!-- Set the viewport width to device width for mobile -->
|
|
14
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
15
|
+
|
|
16
|
+
<title><%%= content_for?(:title) ? yield(:title) : "Untitled" %></title>
|
|
17
|
+
|
|
18
|
+
<%%= stylesheet_link_tag "application" %>
|
|
19
|
+
<%%= javascript_include_tag "vendor/custom.modernizr" %>
|
|
20
|
+
<%%= csrf_meta_tags %>
|
|
21
|
+
</head>
|
|
22
|
+
|
|
23
|
+
<body>
|
|
24
|
+
|
|
25
|
+
<%%= yield %>
|
|
26
|
+
|
|
27
|
+
<% if false %>
|
|
28
|
+
<script>
|
|
29
|
+
document.write('<script src=' +
|
|
30
|
+
('__proto__' in {} ? '<%%= asset_path("vendor/zepto") %>' : '<%%= asset_path("jquery") %>') +
|
|
31
|
+
'><\/script>');
|
|
32
|
+
</script>
|
|
33
|
+
|
|
34
|
+
<script>
|
|
35
|
+
// Ensure rails_ujs works with Zepto
|
|
36
|
+
$.fn.ajaxSend = function(callback) {
|
|
37
|
+
return this.each(function(){
|
|
38
|
+
$(this).on('ajaxBeforeSend', callback);
|
|
39
|
+
});
|
|
40
|
+
};
|
|
41
|
+
var jQuery = $;
|
|
42
|
+
</script>
|
|
43
|
+
<% end %>
|
|
44
|
+
<%%= javascript_include_tag "application" %>
|
|
45
|
+
</body>
|
|
46
|
+
</html>
|
|
@@ -11,15 +11,18 @@
|
|
|
11
11
|
|
|
12
12
|
-# Uncomment to make IE8 render like IE7
|
|
13
13
|
-# meta http-equiv="X-UA-Compatible" content="IE=7"
|
|
14
|
-
|
|
14
|
+
|
|
15
15
|
-# Set the viewport width to device width for mobile
|
|
16
16
|
%meta{ :name => "viewport", :content => "width=device-width, initial-scale=1.0" }
|
|
17
17
|
|
|
18
18
|
%title= content_for?(:title) ? yield(:title) : "Untitled"
|
|
19
19
|
|
|
20
20
|
= stylesheet_link_tag "application"
|
|
21
|
+
= javascript_include_tag "vendor/custom.modernizr"
|
|
21
22
|
= csrf_meta_tag
|
|
22
23
|
|
|
23
24
|
%body
|
|
25
|
+
|
|
24
26
|
= yield
|
|
25
|
-
|
|
27
|
+
|
|
28
|
+
= javascript_include_tag "application"
|
|
@@ -11,17 +11,18 @@ head
|
|
|
11
11
|
|
|
12
12
|
/ Uncomment to make IE8 render like IE7
|
|
13
13
|
/ meta http-equiv="X-UA-Compatible" content="IE=7"
|
|
14
|
-
|
|
14
|
+
|
|
15
15
|
/ Set the viewport width to device width for mobile
|
|
16
16
|
meta name="viewport" content="width=device-width, initial-scale=1.0"
|
|
17
17
|
|
|
18
18
|
title= content_for?(:title) ? yield(:title) : "Untitled"
|
|
19
19
|
|
|
20
20
|
= stylesheet_link_tag "application"
|
|
21
|
-
|
|
21
|
+
= javascript_include_tag "vendor/custom.modernizr"
|
|
22
22
|
= csrf_meta_tag
|
|
23
23
|
|
|
24
24
|
body
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
|
|
26
|
+
== yield
|
|
27
|
+
|
|
28
|
+
= javascript_include_tag "application"
|
data/lib/foundation/version.rb
CHANGED
|
@@ -3,7 +3,11 @@
|
|
|
3
3
|
// Variables
|
|
4
4
|
//
|
|
5
5
|
|
|
6
|
-
//
|
|
6
|
+
// The default font-size is set to 100% of the browser style sheet (usually 16px)
|
|
7
|
+
// for compatibility with brower-based text zoom or user-set defaults.
|
|
8
|
+
$base-font-size: 100% !default;
|
|
9
|
+
|
|
10
|
+
// Set your base font-size in pixels so emCalc can do its magic below
|
|
7
11
|
$em-base: 16px !default;
|
|
8
12
|
|
|
9
13
|
// We use these to control various global styles
|
|
@@ -13,9 +17,6 @@ $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !
|
|
|
13
17
|
$body-font-weight: normal !default;
|
|
14
18
|
$body-font-style: normal !default;
|
|
15
19
|
|
|
16
|
-
// We use this to control font-smoothing
|
|
17
|
-
$font-smoothing: antialiased !default;
|
|
18
|
-
|
|
19
20
|
// We use these to control text direction settings
|
|
20
21
|
$text-direction: ltr !default; // Controls default global text direction, 'rtl' or 'ltr'
|
|
21
22
|
$default-float: left !default;
|
|
@@ -48,6 +49,20 @@ $shiny-edge-active-color: rgba(#000, .2) !default;
|
|
|
48
49
|
$include-html-classes: true !default;
|
|
49
50
|
$include-print-styles: true !default;
|
|
50
51
|
|
|
52
|
+
$include-html-grid-classes: $include-html-classes !default;
|
|
53
|
+
$include-html-visibility-classes: $include-html-classes !default;
|
|
54
|
+
$include-html-button-classes: $include-html-classes !default;
|
|
55
|
+
$include-html-form-classes: $include-html-classes !default;
|
|
56
|
+
$include-html-media-classes: $include-html-classes !default;
|
|
57
|
+
$include-html-section-classes: $include-html-classes !default;
|
|
58
|
+
$include-html-reveal-classes: $include-html-classes !default;
|
|
59
|
+
$include-html-alert-classes: $include-html-classes !default;
|
|
60
|
+
$include-html-nav-classes: $include-html-classes !default;
|
|
61
|
+
$include-html-label-classes: $include-html-classes !default;
|
|
62
|
+
$include-html-panel-classes: $include-html-classes !default;
|
|
63
|
+
$include-html-pricing-classes: $include-html-classes !default;
|
|
64
|
+
$include-html-progress-classes: $include-html-classes !default;
|
|
65
|
+
$include-html-magellan-classes: $include-html-classes !default;
|
|
51
66
|
|
|
52
67
|
//
|
|
53
68
|
// Functions
|
|
@@ -14,7 +14,7 @@ $crumb-function-factor: 10% !default;
|
|
|
14
14
|
$crumb-border-size: 1px !default;
|
|
15
15
|
$crumb-border-style: solid !default;
|
|
16
16
|
$crumb-border-color: darken($crumb-bg, $crumb-function-factor) !default;
|
|
17
|
-
$crumb-radius: $
|
|
17
|
+
$crumb-radius: $global-radius !default;
|
|
18
18
|
|
|
19
19
|
// We use these to set various text styles for breadcrumbs.
|
|
20
20
|
$crumb-font-size: emCalc(11px) !default;
|
|
@@ -97,12 +97,12 @@ $crumb-slash: "/" !default;
|
|
|
97
97
|
}
|
|
98
98
|
&:first-child a,
|
|
99
99
|
&:first-child span { padding-#{$default-float}: 0; }
|
|
100
|
-
&:first-child:before { content: ""; }
|
|
100
|
+
&:first-child:before { content: " "; }
|
|
101
101
|
|
|
102
102
|
}
|
|
103
103
|
|
|
104
104
|
|
|
105
|
-
@if $include-html-classes {
|
|
105
|
+
@if $include-html-nav-classes {
|
|
106
106
|
|
|
107
107
|
/* Breadcrumbs */
|
|
108
108
|
.breadcrumbs {
|
|
@@ -114,4 +114,4 @@ $crumb-slash: "/" !default;
|
|
|
114
114
|
}
|
|
115
115
|
}
|
|
116
116
|
|
|
117
|
-
}
|
|
117
|
+
}
|
|
@@ -34,12 +34,12 @@ $button-bar-margin-right: emCalc(10px) !default;
|
|
|
34
34
|
|
|
35
35
|
// We use these to control left and right radius on first/last buttons in the group.
|
|
36
36
|
@if $radius == true {
|
|
37
|
-
&:first-child > a, &:first-child > button { @include side-radius($default-float, $button-radius); }
|
|
38
|
-
&:last-child > a, &:last-child > button { @include side-radius($default-opposite, $button-radius); }
|
|
37
|
+
&:first-child, &:first-child > a, &:first-child > button { @include side-radius($default-float, $button-radius); }
|
|
38
|
+
&:last-child, &:last-child > a, &:last-child > button { @include side-radius($default-opposite, $button-radius); }
|
|
39
39
|
}
|
|
40
40
|
@else if $radius {
|
|
41
|
-
&:first-child > a, &:first-child > button { @include side-radius($default-float, $radius); }
|
|
42
|
-
&:last-child > a, &:last-child > button { @include side-radius($default-opposite, $radius); }
|
|
41
|
+
&:first-child, &:first-child > a, &:first-child > button { @include side-radius($default-float, $radius); }
|
|
42
|
+
&:last-child, &:last-child > a, &:last-child > button { @include side-radius($default-opposite, $radius); }
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
// We use this to make the buttons even width across their container
|
|
@@ -51,15 +51,15 @@ $button-bar-margin-right: emCalc(10px) !default;
|
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
// Only include these CSS classes if $include-html-classes: true
|
|
54
|
-
@if $include-html-classes {
|
|
54
|
+
@if $include-html-button-classes {
|
|
55
55
|
|
|
56
56
|
/* Button Groups */
|
|
57
57
|
.button-group { @include button-group-container;
|
|
58
58
|
|
|
59
|
-
|
|
59
|
+
&> * { @include button-group-style(); }
|
|
60
60
|
|
|
61
|
-
&.radius
|
|
62
|
-
&.round
|
|
61
|
+
&.radius > * { @include button-group-style($radius:$button-radius, $float:null); }
|
|
62
|
+
&.round > * { @include button-group-style($radius:$button-round, $float:null); }
|
|
63
63
|
|
|
64
64
|
@for $i from 2 through 8 {
|
|
65
65
|
&.even#{-$i} li { @include button-group-style($even:$i, $float:null); }
|
|
@@ -33,6 +33,7 @@ $button-border-color: darken($primary-color, $button-function-factor) !defau
|
|
|
33
33
|
|
|
34
34
|
// We use this to set the default radius used throughout the core.
|
|
35
35
|
$button-radius: $global-radius !default;
|
|
36
|
+
$button-round: $global-rounded !default;
|
|
36
37
|
|
|
37
38
|
// We use this to set default opacity for disabled buttons.
|
|
38
39
|
$button-disabled-opacity: 0.6 !default;
|
|
@@ -154,10 +155,10 @@ $button-disabled-opacity: 0.6 !default;
|
|
|
154
155
|
//
|
|
155
156
|
|
|
156
157
|
// Only include these classes if the variable is true, otherwise they'll be left out.
|
|
157
|
-
@if $include-html-classes {
|
|
158
|
+
@if $include-html-button-classes {
|
|
158
159
|
|
|
159
160
|
// Default styles applied outside of media query
|
|
160
|
-
.button {
|
|
161
|
+
button, .button {
|
|
161
162
|
@include button-base;
|
|
162
163
|
@include button-size;
|
|
163
164
|
@include button-style;
|
|
@@ -202,7 +203,7 @@ $button-disabled-opacity: 0.6 !default;
|
|
|
202
203
|
&.tiny { @include button-size($padding:false, $full-width:false); }
|
|
203
204
|
|
|
204
205
|
&.radius { @include button-style($bg:false, $radius:true); }
|
|
205
|
-
&.round { @include button-style($bg:false, $radius
|
|
206
|
+
&.round { @include button-style($bg:false, $radius:$button-round); }
|
|
206
207
|
}
|
|
207
208
|
|
|
208
209
|
}
|
|
@@ -43,194 +43,198 @@ $custom-dropdown-width-large: 434px !default;
|
|
|
43
43
|
// they rely on a very specific class naming structure.
|
|
44
44
|
// We may look at updating this in the future.
|
|
45
45
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
46
|
+
// Only include these classes if the variable is true, otherwise they'll be left out.
|
|
47
|
+
@if $include-html-button-classes {
|
|
48
|
+
|
|
49
|
+
/* Custom Checkbox and Radio Inputs */
|
|
50
|
+
form.custom {
|
|
51
|
+
|
|
52
|
+
.custom {
|
|
53
|
+
display: inline-block;
|
|
54
|
+
width: 16px;
|
|
55
|
+
height: 16px;
|
|
56
|
+
position: relative;
|
|
57
|
+
top: 2px;
|
|
58
|
+
border: solid 1px $custom-form-border-color;
|
|
59
|
+
background: $custom-form-bg;
|
|
60
|
+
|
|
61
|
+
&.radio { @include radius(1000px); }
|
|
62
|
+
|
|
63
|
+
&.checkbox {
|
|
64
|
+
&:before {
|
|
65
|
+
content: "";
|
|
66
|
+
display: block;
|
|
67
|
+
line-height: 0.8;
|
|
68
|
+
height: 14px;
|
|
69
|
+
width: 14px;
|
|
70
|
+
text-align: center;
|
|
71
|
+
position: absolute;
|
|
72
|
+
top: 0;
|
|
73
|
+
#{$default-float}: 0;
|
|
74
|
+
font-size: 14px;
|
|
75
|
+
color: #fff;
|
|
76
|
+
}
|
|
73
77
|
}
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
78
|
+
|
|
79
|
+
&.radio.checked {
|
|
80
|
+
&:before {
|
|
81
|
+
content: "";
|
|
82
|
+
display: block;
|
|
83
|
+
width: 8px;
|
|
84
|
+
height: 8px;
|
|
85
|
+
@include radius(1000px);
|
|
86
|
+
background: $custom-form-check-color;
|
|
87
|
+
position: relative;
|
|
88
|
+
top: 3px;
|
|
89
|
+
#{$default-float}: 3px;
|
|
90
|
+
}
|
|
87
91
|
}
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
92
|
+
|
|
93
|
+
&.checkbox.checked {
|
|
94
|
+
&:before {
|
|
95
|
+
content: "\00d7";
|
|
96
|
+
color: $custom-form-check-color;
|
|
97
|
+
}
|
|
94
98
|
}
|
|
95
99
|
}
|
|
96
100
|
}
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
.custom.dropdown {
|
|
102
|
-
display: block;
|
|
103
|
-
position: relative;
|
|
104
|
-
top: 0;
|
|
105
|
-
height: $custom-select-height;
|
|
106
|
-
margin-bottom: $custom-select-margin-bottom;
|
|
107
|
-
margin-top: 0px;
|
|
108
|
-
padding: 0px;
|
|
109
|
-
width: 100%;
|
|
110
|
-
background: $custom-dropdown-bg;
|
|
111
|
-
background: -moz-linear-gradient(top, $custom-dropdown-bg 0%, $custom-select-fade-to-color 100%);
|
|
112
|
-
background: -webkit-linear-gradient(top, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%);
|
|
113
|
-
background: linear-gradient(to bottom, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%);
|
|
114
|
-
-webkit-box-shadow: none;
|
|
115
|
-
box-shadow: none;
|
|
116
|
-
font-size: emCalc(14px);
|
|
117
|
-
vertical-align: top;
|
|
118
|
-
|
|
119
|
-
ul {
|
|
120
|
-
overflow-y: auto;
|
|
121
|
-
max-height: $custom-dropdown-height;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
.current {
|
|
125
|
-
cursor:default;
|
|
126
|
-
white-space: nowrap;
|
|
127
|
-
line-height: $custom-select-height - emCalc(1px);
|
|
128
|
-
color: $input-font-color;
|
|
129
|
-
text-decoration: none;
|
|
130
|
-
overflow: hidden;
|
|
101
|
+
|
|
102
|
+
/* Custom Select Options and Dropdowns */
|
|
103
|
+
form.custom {
|
|
104
|
+
.custom.dropdown {
|
|
131
105
|
display: block;
|
|
132
|
-
|
|
133
|
-
margin-right: $custom-select-height;
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
.selector {
|
|
137
|
-
cursor:default;
|
|
138
|
-
position: absolute;
|
|
139
|
-
width: $form-spacing * 2.5;
|
|
140
|
-
height: $custom-select-height;
|
|
141
|
-
display: block;
|
|
142
|
-
#{$default-opposite}: 0;
|
|
106
|
+
position: relative;
|
|
143
107
|
top: 0;
|
|
144
|
-
|
|
145
|
-
|
|
108
|
+
height: $custom-select-height;
|
|
109
|
+
margin-bottom: $custom-select-margin-bottom;
|
|
110
|
+
margin-top: 0px;
|
|
111
|
+
padding: 0px;
|
|
112
|
+
width: 100%;
|
|
113
|
+
background: $custom-dropdown-bg;
|
|
114
|
+
background: -moz-linear-gradient(top, $custom-dropdown-bg 0%, $custom-select-fade-to-color 100%);
|
|
115
|
+
background: -webkit-linear-gradient(top, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%);
|
|
116
|
+
background: linear-gradient(to bottom, $custom-dropdown-bg 0%,$custom-select-fade-to-color 100%);
|
|
117
|
+
-webkit-box-shadow: none;
|
|
118
|
+
box-shadow: none;
|
|
119
|
+
font-size: emCalc(14px);
|
|
120
|
+
vertical-align: top;
|
|
121
|
+
|
|
122
|
+
ul {
|
|
123
|
+
overflow-y: auto;
|
|
124
|
+
max-height: $custom-dropdown-height;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.current {
|
|
128
|
+
cursor:default;
|
|
129
|
+
white-space: nowrap;
|
|
130
|
+
line-height: $custom-select-height - emCalc(1px);
|
|
131
|
+
color: $input-font-color;
|
|
132
|
+
text-decoration: none;
|
|
133
|
+
overflow: hidden;
|
|
146
134
|
display: block;
|
|
147
|
-
|
|
135
|
+
margin-left: $form-spacing / 2;
|
|
136
|
+
margin-right: $custom-select-height;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.selector {
|
|
140
|
+
cursor:default;
|
|
148
141
|
position: absolute;
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
142
|
+
width: $form-spacing * 2.5;
|
|
143
|
+
height: $custom-select-height;
|
|
144
|
+
display: block;
|
|
145
|
+
#{$default-opposite}: 0;
|
|
146
|
+
top: 0;
|
|
147
|
+
&:after {
|
|
148
|
+
content: "";
|
|
149
|
+
display: block;
|
|
150
|
+
@include css-triangle(5px, $custom-select-triangle-color, top);
|
|
151
|
+
position: absolute;
|
|
152
|
+
left: ($form-spacing * 2.5) / 2 - emCalc(5px);
|
|
153
|
+
top: 50%;
|
|
154
|
+
margin-top: -3px;
|
|
155
|
+
}
|
|
152
156
|
}
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
157
|
+
|
|
158
|
+
&:hover, &.open {
|
|
159
|
+
a.selector {
|
|
160
|
+
&:after { @include css-triangle(5px, $custom-select-triangle-color-open, top); }
|
|
161
|
+
}
|
|
158
162
|
}
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
.disabled {
|
|
162
|
-
color: $custom-select-disabled-color;
|
|
163
|
-
&:hover {
|
|
164
|
-
background: transparent;
|
|
163
|
+
|
|
164
|
+
.disabled {
|
|
165
165
|
color: $custom-select-disabled-color;
|
|
166
|
-
&:
|
|
166
|
+
&:hover {
|
|
167
|
+
background: transparent;
|
|
168
|
+
color: $custom-select-disabled-color;
|
|
169
|
+
&:after { display: none; }
|
|
170
|
+
}
|
|
167
171
|
}
|
|
172
|
+
|
|
173
|
+
&.open ul {
|
|
174
|
+
display: block;
|
|
175
|
+
z-index: 10;
|
|
176
|
+
min-width:100%;
|
|
177
|
+
@include box-sizing(content-box);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
&.small { max-width: $custom-dropdown-width-small; }
|
|
181
|
+
&.medium { max-width: $custom-dropdown-width-medium; }
|
|
182
|
+
&.large { max-width: $custom-dropdown-width-large; }
|
|
183
|
+
&.expand { width: 100% !important; }
|
|
184
|
+
|
|
185
|
+
&.open.small ul { min-width: $custom-dropdown-width-small; @include box-sizing(border-box); }
|
|
186
|
+
&.open.medium ul { min-width: $custom-dropdown-width-medium; @include box-sizing(border-box); }
|
|
187
|
+
&.open.large ul { min-width: $custom-dropdown-width-large; @include box-sizing(border-box); }
|
|
168
188
|
}
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
@include box-sizing(content-box);
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
&.small { max-width: $custom-dropdown-width-small; }
|
|
178
|
-
&.medium { max-width: $custom-dropdown-width-medium; }
|
|
179
|
-
&.large { max-width: $custom-dropdown-width-large; }
|
|
180
|
-
&.expand { width: 100% !important; }
|
|
181
|
-
|
|
182
|
-
&.open.small ul { min-width: $custom-dropdown-width-small; @include box-sizing(border-box); }
|
|
183
|
-
&.open.medium ul { min-width: $custom-dropdown-width-medium; @include box-sizing(border-box); }
|
|
184
|
-
&.open.large ul { min-width: $custom-dropdown-width-large; @include box-sizing(border-box); }
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
.custom.dropdown ul {
|
|
188
|
-
position: absolute;
|
|
189
|
-
width: auto;
|
|
190
|
-
display: none;
|
|
191
|
-
margin: 0;
|
|
192
|
-
#{$default-float}: -$input-border-width;
|
|
193
|
-
top: $custom-dropdown-offset-top;
|
|
194
|
-
-webkit-box-shadow: $custom-dropdown-shadow;
|
|
195
|
-
box-shadow: $custom-dropdown-shadow;
|
|
196
|
-
margin: 0;
|
|
197
|
-
padding: 0;
|
|
198
|
-
background: $custom-dropdown-bg;
|
|
199
|
-
border: $custom-dropdown-border-style $custom-dropdown-border-width $custom-dropdown-border-color;
|
|
200
|
-
font-size: $em-base;
|
|
201
|
-
|
|
202
|
-
li {
|
|
203
|
-
color: $custom-dropdown-font-color;
|
|
204
|
-
font-size: $custom-dropdown-font-size;
|
|
205
|
-
cursor: default;
|
|
206
|
-
padding-top: $custom-dropdown-list-padding;
|
|
207
|
-
padding-bottom: $custom-dropdown-list-padding;
|
|
208
|
-
padding-#{$default-float}: $custom-dropdown-left-padding;
|
|
209
|
-
padding-#{$default-opposite}: $custom-dropdown-right-padding;
|
|
210
|
-
min-height: $custom-dropdown-list-item-min-height;
|
|
211
|
-
line-height: $custom-dropdown-list-item-min-height;
|
|
189
|
+
|
|
190
|
+
.custom.dropdown ul {
|
|
191
|
+
position: absolute;
|
|
192
|
+
width: auto;
|
|
193
|
+
display: none;
|
|
212
194
|
margin: 0;
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
195
|
+
#{$default-float}: -$input-border-width;
|
|
196
|
+
top: $custom-dropdown-offset-top;
|
|
197
|
+
-webkit-box-shadow: $custom-dropdown-shadow;
|
|
198
|
+
box-shadow: $custom-dropdown-shadow;
|
|
199
|
+
margin: 0;
|
|
200
|
+
padding: 0;
|
|
201
|
+
background: $custom-dropdown-bg;
|
|
202
|
+
border: $custom-dropdown-border-style $custom-dropdown-border-width $custom-dropdown-border-color;
|
|
203
|
+
font-size: $em-base;
|
|
204
|
+
|
|
205
|
+
li {
|
|
206
|
+
color: $custom-dropdown-font-color;
|
|
207
|
+
font-size: $custom-dropdown-font-size;
|
|
226
208
|
cursor: default;
|
|
227
|
-
|
|
209
|
+
padding-top: $custom-dropdown-list-padding;
|
|
210
|
+
padding-bottom: $custom-dropdown-list-padding;
|
|
211
|
+
padding-#{$default-float}: $custom-dropdown-left-padding;
|
|
212
|
+
padding-#{$default-opposite}: $custom-dropdown-right-padding;
|
|
213
|
+
min-height: $custom-dropdown-list-item-min-height;
|
|
214
|
+
line-height: $custom-dropdown-list-item-min-height;
|
|
215
|
+
margin: 0;
|
|
216
|
+
white-space: nowrap;
|
|
217
|
+
list-style: none;
|
|
218
|
+
|
|
219
|
+
&.selected {
|
|
220
|
+
background: $custom-dropdown-color-selected;
|
|
221
|
+
color: $custom-dropdown-font-color-selected;
|
|
222
|
+
}
|
|
223
|
+
&:hover {
|
|
224
|
+
background-color: darken($custom-dropdown-color-selected, 4%);
|
|
225
|
+
color: $custom-dropdown-font-color-selected;
|
|
226
|
+
}
|
|
227
|
+
&.selected:hover {
|
|
228
|
+
background: $custom-dropdown-color-selected;
|
|
229
|
+
cursor: default;
|
|
230
|
+
color: $custom-dropdown-font-color-selected;
|
|
231
|
+
}
|
|
228
232
|
}
|
|
233
|
+
|
|
234
|
+
&.show { display: block; }
|
|
229
235
|
}
|
|
230
|
-
|
|
231
|
-
|
|
236
|
+
|
|
237
|
+
/* Custom input, disabled */
|
|
238
|
+
.custom.disabled { background-color: $custom-form-bg-disabled; }
|
|
232
239
|
}
|
|
233
|
-
|
|
234
|
-
/* Custom input, disabled */
|
|
235
|
-
.custom.disabled { background-color: $custom-form-bg-disabled; }
|
|
236
240
|
}
|