zurb-foundation 4.0.5 → 4.0.7

Sign up to get free protection for your applications and to get access to all the features.
Files changed (85) hide show
  1. data/.gitignore +1 -0
  2. data/Gemfile.lock +2 -2
  3. data/README.md +1 -0
  4. data/{CHANGELOG.md → docs/CHANGELOG.md} +63 -3
  5. data/docs/Gemfile +1 -0
  6. data/docs/Gemfile.lock +2 -0
  7. data/docs/_sidebar-components.html.erb +1 -0
  8. data/docs/_sidebar.html.erb +1 -0
  9. data/docs/changelog.html.erb +1 -205
  10. data/docs/components/alert-boxes.html.erb +1 -1
  11. data/docs/components/block-grid.html.erb +1 -1
  12. data/docs/components/breadcrumbs.html.erb +3 -3
  13. data/docs/components/button-groups.html.erb +1 -1
  14. data/docs/components/buttons.html.erb +1 -1
  15. data/docs/components/dropdown-buttons.html.erb +1 -1
  16. data/docs/components/dropdown.html.erb +1 -1
  17. data/docs/components/flex-video.html.erb +1 -1
  18. data/docs/components/forms.html.erb +1 -1
  19. data/docs/components/global.html.erb +92 -0
  20. data/docs/components/inline-lists.html.erb +1 -1
  21. data/docs/components/keystrokes.html.erb +2 -2
  22. data/docs/components/labels.html.erb +2 -2
  23. data/docs/components/orbit.html.erb +10 -2
  24. data/docs/components/pagination.html.erb +1 -1
  25. data/docs/components/panels.html.erb +1 -1
  26. data/docs/components/pricing-tables.html.erb +1 -1
  27. data/docs/components/progress-bars.html.erb +2 -2
  28. data/docs/components/section.html.erb +18 -0
  29. data/docs/components/side-nav.html.erb +1 -1
  30. data/docs/components/split-buttons.html.erb +1 -1
  31. data/docs/components/sub-nav.html.erb +1 -1
  32. data/docs/components/switch.html.erb +1 -1
  33. data/docs/components/thumbnails.html.erb +1 -1
  34. data/docs/components/top-bar.html.erb +5 -5
  35. data/docs/css/docs.scss +0 -1
  36. data/docs/layout.html.erb +2 -3
  37. data/docs/sass.html.erb +21 -14
  38. data/js/foundation/foundation.clearing.js +2 -0
  39. data/js/foundation/foundation.dropdown.js +10 -10
  40. data/js/foundation/foundation.joyride.js +9 -12
  41. data/js/foundation/foundation.js +28 -2
  42. data/js/foundation/foundation.orbit.js +17 -9
  43. data/js/foundation/foundation.reveal.js +6 -2
  44. data/js/foundation/foundation.section.js +30 -18
  45. data/js/foundation/foundation.topbar.js +18 -8
  46. data/lib/foundation/generators/USAGE +6 -5
  47. data/lib/foundation/generators/install_generator.rb +9 -9
  48. data/lib/foundation/generators/templates/application.html.erb +40 -37
  49. data/lib/foundation/generators/templates/application.html.haml +5 -2
  50. data/lib/foundation/generators/templates/application.html.slim +6 -5
  51. data/lib/foundation/version.rb +1 -1
  52. data/scss/foundation/_foundation-global.scss +19 -4
  53. data/scss/foundation/components/_alert-boxes.scss +1 -1
  54. data/scss/foundation/components/_breadcrumbs.scss +4 -4
  55. data/scss/foundation/components/_button-groups.scss +8 -8
  56. data/scss/foundation/components/_buttons.scss +4 -3
  57. data/scss/foundation/components/_custom-forms.scss +175 -171
  58. data/scss/foundation/components/_dropdown-buttons.scss +1 -1
  59. data/scss/foundation/components/_dropdown.scss +1 -1
  60. data/scss/foundation/components/_flex-video.scss +1 -1
  61. data/scss/foundation/components/_forms.scss +91 -89
  62. data/scss/foundation/components/_global.scss +7 -2
  63. data/scss/foundation/components/_grid.scss +3 -3
  64. data/scss/foundation/components/_inline-lists.scss +1 -1
  65. data/scss/foundation/components/_keystrokes.scss +2 -2
  66. data/scss/foundation/components/_labels.scss +3 -3
  67. data/scss/foundation/components/_magellan.scss +1 -1
  68. data/scss/foundation/components/_pagination.scss +1 -1
  69. data/scss/foundation/components/_panels.scss +1 -1
  70. data/scss/foundation/components/_pricing-tables.scss +1 -1
  71. data/scss/foundation/components/_progress-bars.scss +2 -2
  72. data/scss/foundation/components/_reveal.scss +1 -1
  73. data/scss/foundation/components/_section.scss +1 -1
  74. data/scss/foundation/components/_side-nav.scss +1 -1
  75. data/scss/foundation/components/_split-buttons.scss +1 -1
  76. data/scss/foundation/components/_sub-nav.scss +1 -1
  77. data/scss/foundation/components/_switch.scss +3 -3
  78. data/scss/foundation/components/_thumbs.scss +1 -1
  79. data/scss/foundation/components/_top-bar.scss +4 -1
  80. data/scss/foundation/components/_visibility.scss +273 -274
  81. data/templates/project/scss/_settings.scss +4 -4
  82. data/templates/project/scss/app.scss +8 -8
  83. data/templates/upgrade/manifest.rb +7 -12
  84. metadata +6 -6
  85. data/index.html +0 -113
data/lib/foundation/generators/USAGE CHANGED
@@ -1,14 +1,15 @@
1
1
  Description:
2
- Setup Foundation assets on your website or generate new layouts preconfigured to use Foundation
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 replace the default application assets:
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
- rails generate foundation:layout
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
data/lib/foundation/generators/install_generator.rb CHANGED
@@ -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 ERB.', :type => :boolean
10
- class_option :slim, :desc => 'Generate Slim layout instead of ERB.', :type => :boolean
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
- insert_into_file "app/assets/stylesheets/application#{detect_css_format[0]}", "#{detect_css_format[1]} require foundation_and_overrides\n", :after => "require_self\n"
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
data/lib/foundation/generators/templates/application.html.erb CHANGED
@@ -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
- <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
- <body>
23
- <%%= yield %>
24
- <% if false %>
25
- <script>
26
- document.write('<script src=' +
27
- ('__proto__' in {} ? '<%%= asset_path("vendor/zepto") %>' : '<%%= asset_path("jquery") %>') +
28
- '><\/script>');
29
- </script>
30
-
31
- <script>
32
- // Ensure rails_ujs works with Zepto
33
- $.fn.ajaxSend = function(callback) {
34
- return this.each(function(){
35
- $(this).on('ajaxBeforeSend', callback);
36
- });
37
- };
38
- var jQuery = $;
39
- </script>
40
- <% end %>
41
- <%%= javascript_include_tag "application" %>
42
- </body>
43
- </html>
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>
data/lib/foundation/generators/templates/application.html.haml CHANGED
@@ -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
- = javascript_include_tag "application"
27
+
28
+ = javascript_include_tag "application"
data/lib/foundation/generators/templates/application.html.slim CHANGED
@@ -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
- .container
26
- == yield
27
- = javascript_include_tag "application"
25
+
26
+ == yield
27
+
28
+ = javascript_include_tag "application"
data/lib/foundation/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Foundation
2
- VERSION = "4.0.5"
2
+ VERSION = "4.0.7"
3
3
  end
data/scss/foundation/_foundation-global.scss CHANGED
@@ -3,7 +3,11 @@
3
3
  // Variables
4
4
  //
5
5
 
6
- // This is the default html and body font-size for the base em value.
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
data/scss/foundation/components/_alert-boxes.scss CHANGED
@@ -87,7 +87,7 @@ $alert-radius: $global-radius !defa
87
87
  @include radius($radius);
88
88
  }
89
89
 
90
- @if $include-html-classes {
90
+ @if $include-html-alert-classes {
91
91
 
92
92
  /* Foundation Alerts */
93
93
  .alert-box {
data/scss/foundation/components/_breadcrumbs.scss CHANGED
@@ -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: $button-radius !default;
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
+ }
data/scss/foundation/components/_button-groups.scss CHANGED
@@ -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
- li { @include button-group-style(); }
59
+ &> * { @include button-group-style(); }
60
60
 
61
- &.radius li { @include button-group-style($radius:$button-radius, $float:null); }
62
- &.round li { @include button-group-style($radius:1000px, $float:null); }
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); }
data/scss/foundation/components/_buttons.scss CHANGED
@@ -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:1000px); }
206
+ &.round { @include button-style($bg:false, $radius:$button-round); }
206
207
  }
207
208
 
208
209
  }
data/scss/foundation/components/_custom-forms.scss CHANGED
@@ -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
- /* Custom Checkbox and Radio Inputs */
47
- form.custom {
48
-
49
- .custom {
50
- display: inline-block;
51
- width: 16px;
52
- height: 16px;
53
- position: relative;
54
- top: 2px;
55
- border: solid 1px $custom-form-border-color;
56
- background: $custom-form-bg;
57
-
58
- &.radio { @include radius(1000px); }
59
-
60
- &.checkbox {
61
- &:before {
62
- content: "";
63
- display: block;
64
- line-height: 0.8;
65
- height: 14px;
66
- width: 14px;
67
- text-align: center;
68
- position: absolute;
69
- top: 0;
70
- #{$default-float}: 0;
71
- font-size: 14px;
72
- color: #fff;
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
- &.radio.checked {
77
- &:before {
78
- content: "";
79
- display: block;
80
- width: 8px;
81
- height: 8px;
82
- @include radius(1000px);
83
- background: $custom-form-check-color;
84
- position: relative;
85
- top: 3px;
86
- #{$default-float}: 3px;
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
- &.checkbox.checked {
91
- &:before {
92
- content: "\00d7";
93
- color: $custom-form-check-color;
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
- /* Custom Select Options and Dropdowns */
100
- form.custom {
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
- margin-left: $form-spacing / 2;
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
- &:after {
145
- content: "";
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
- @include css-triangle(5px, $custom-select-triangle-color, top);
135
+ margin-left: $form-spacing / 2;
136
+ margin-right: $custom-select-height;
137
+ }
138
+
139
+ .selector {
140
+ cursor:default;
148
141
  position: absolute;
149
- left: ($form-spacing * 2.5) / 2 - emCalc(5px);
150
- top: 50%;
151
- margin-top: -3px;
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
- &:hover, &.open {
156
- a.selector {
157
- &:after { @include css-triangle(5px, $custom-select-triangle-color-open, top); }
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
- &:after { display: none; }
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
- &.open ul {
171
- display: block;
172
- z-index: 10;
173
- min-width:100%;
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
- white-space: nowrap;
214
- list-style: none;
215
-
216
- &.selected {
217
- background: $custom-dropdown-color-selected;
218
- color: $custom-dropdown-font-color-selected;
219
- }
220
- &:hover {
221
- background-color: darken($custom-dropdown-color-selected, 4%);
222
- color: $custom-dropdown-font-color-selected;
223
- }
224
- &.selected:hover {
225
- background: $custom-dropdown-color-selected;
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
- color: $custom-dropdown-font-color-selected;
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
- &.show { display: block; }
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
  }