zurb-foundation 3.1.1 → 3.2.0.rc1
Sign up to get free protection for your applications and to get access to all the features.
- data/.rbenv-version +1 -0
- data/CHANGELOG.md +51 -0
- data/README.md +10 -4
- data/index.html +0 -7
- data/lib/foundation/generators/USAGE +1 -1
- data/lib/foundation/generators/layout_generator.rb +5 -4
- data/lib/foundation/version.rb +1 -1
- data/marketing/.rbenv-version +1 -0
- data/scss/foundation.scss +3 -1
- data/scss/foundation/_settings.scss +159 -47
- data/scss/foundation/common/_forms.scss +23 -30
- data/scss/foundation/common/_globals.scss +4 -8
- data/scss/foundation/common/_ratios.scss +17 -17
- data/scss/foundation/common/_typography.scss +6 -3
- data/scss/foundation/components/_grid.scss +16 -93
- data/scss/foundation/components/modules/_all.scss +2 -0
- data/scss/foundation/components/modules/_buttons.scss +5 -25
- data/scss/foundation/components/modules/_clearing.scss +46 -0
- data/scss/foundation/components/modules/_joyride.scss +224 -0
- data/scss/foundation/components/modules/_mqueries.scss +451 -0
- data/scss/foundation/components/modules/_navbar.scss +1 -37
- data/scss/foundation/components/modules/_orbit.scss +57 -198
- data/scss/foundation/components/modules/_reveal.scss +3 -24
- data/scss/foundation/components/modules/_tabs.scss +15 -40
- data/scss/foundation/components/modules/_topbar.scss +12 -113
- data/scss/foundation/components/modules/_ui.scss +20 -145
- data/templates/project/index.html +4 -10
- data/templates/project/scss/_settings.scss +129 -31
- data/templates/project/scss/app.scss +1 -1
- data/test/buttons.html +0 -6
- data/test/clearing.html +74 -0
- data/test/config.rb +1 -1
- data/test/elements.html +67 -13
- data/test/forms.html +0 -6
- data/test/grid.html +5 -11
- data/test/index.html +18 -20
- data/test/joyride.html +126 -0
- data/test/magellan.html +112 -0
- data/test/navigation.html +27 -19
- data/test/orbit.html +11 -12
- data/test/reveal.html +0 -6
- data/test/scss/_settings.scss +200 -140
- data/test/scss/styles.scss +48 -1
- data/test/tabs.html +12 -18
- data/test/template.html +4 -12
- data/test/topbar.html +1 -10
- data/test/type.html +8 -14
- data/vendor/assets/javascripts/foundation/app.js +17 -13
- data/vendor/assets/javascripts/foundation/index.js +3 -0
- data/vendor/assets/javascripts/foundation/jquery.event.move.js +580 -0
- data/vendor/assets/javascripts/foundation/jquery.event.swipe.js +130 -0
- data/vendor/assets/javascripts/foundation/jquery.foundation.accordion.js +24 -7
- data/vendor/assets/javascripts/foundation/jquery.foundation.buttons.js +39 -20
- data/vendor/assets/javascripts/foundation/jquery.foundation.clearing.js +468 -0
- data/vendor/assets/javascripts/foundation/jquery.foundation.forms.js +2 -4
- data/vendor/assets/javascripts/foundation/jquery.foundation.joyride.js +635 -0
- data/vendor/assets/javascripts/foundation/jquery.foundation.magellan.js +85 -0
- data/vendor/assets/javascripts/foundation/jquery.foundation.navigation.js +28 -4
- data/vendor/assets/javascripts/foundation/jquery.foundation.orbit.js +84 -28
- data/vendor/assets/javascripts/foundation/jquery.foundation.tabs.js +4 -4
- data/vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js +18 -14
- data/vendor/assets/javascripts/foundation/jquery.foundation.topbar.js +15 -5
- data/vendor/assets/javascripts/foundation/modernizr.foundation.js +3 -3
- metadata +23 -9
data/.rbenv-version
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
1.9.3-p194
|
data/CHANGELOG.md
ADDED
@@ -0,0 +1,51 @@
|
|
1
|
+
# Changelog
|
2
|
+
We'll keep you up to date with what we've released so you at least have a gist of what goes into each update. For the most part, we'll try to list things out as detailed as we see necessary.
|
3
|
+
|
4
|
+
---
|
5
|
+
|
6
|
+
### 3.1.1- September 19, 2012
|
7
|
+
Updating Top Bar navigation implementation pattern to wrap `.contain-to-grid` and/or `.fixed` around the `nav` element to prevent horizontal scroll bars when using `.contain-to-grid`. Updated the topBar breakpoint option so users only need to update the Scss variable.
|
8
|
+
|
9
|
+
### **3.1**- September 14, 2012
|
10
|
+
Launched new features, a new Add-ons section to the marketing site, Right to left language support, and fixed bugs.
|
11
|
+
|
12
|
+
With this release of Foundation, we include:
|
13
|
+
* Downloadable HTML template pages that can be copy/pasted into an existing project or added to your project upon downloading from the customizer.
|
14
|
+
* The Add-on's section includes a round-up of all the playground pieces, etc that aren't officially included in Foundation, but built to work with it. This includes: [Templates](http://foundation.zurb.com/templates.php), [Icon Fonts](http://foundation.zurb.com/icon-fonts.php), [Off-Canvas Layouts](http://foundation.zurb.com/off-canvas.php), [Responsive Tables](http://foundation.zurb.com/responsive-tables.php), [SVG Social Icons](http://foundation.zurb.com/social-icons.php), and [Omnigraffle Stencils](http://foundation.zurb.com/stencils.php).
|
15
|
+
* Foundation now includes a [responsive top navigation](http://foundation.zurb.com/navigation.php) bar that lets you have control over when it responds and what you include in it. We've made it really easy to customize using Scss.
|
16
|
+
* Right-to-left language support straight out of the box. You can adjust this in the settings.scss file or upon downloading with the customizer.
|
17
|
+
* New UI Styles for Progress Bars and Image Thumbs.
|
18
|
+
* Updated to include jQuery 1.8.1
|
19
|
+
* Orbit thumbnail documentation.
|
20
|
+
* Better Reveal size documentation.
|
21
|
+
|
22
|
+
### 3.0.9- August 14, 2012
|
23
|
+
Bug fixes and locking down dependencies.
|
24
|
+
|
25
|
+
### 3.0.8- August 10, 2012
|
26
|
+
Numerous bugfixes. Added media query toggle plugin. Removed marketing site from repository and included a new `test/` directory to help contributors test patches.
|
27
|
+
|
28
|
+
New features: Media Query Toggler, block-grid mobile layouts, font-size customizer options and included modular scale gem as dependancy for SCSS version.
|
29
|
+
|
30
|
+
### 3.0.7- July 30, 2012
|
31
|
+
Numerous JS bug fixes, added generators for Rails and refactored SCSS directory for better maintainability and scalability over time. CSS files weren't affected by this refactoring.
|
32
|
+
|
33
|
+
### 3.0.6- July 20, 2012
|
34
|
+
Numerous bugfixes including dropdown buttons on touch devices, Modernizr update with IE8Compat, split button colors, and more. Split out the functions in app.js to be part of the Gem and only initialized in app.js, so you can keep a clean distinction between your JS and Foundation's (if you want to). Added an [accordion](http://foundation.zurb.com/elements.php) element.
|
35
|
+
|
36
|
+
### 3.0.5- July 10, 2012
|
37
|
+
Fixed Compass performance issues by separating out each Foundation file and removing extraneous imports.
|
38
|
+
|
39
|
+
### 3.0.4- July 6, 2012
|
40
|
+
Fixed a number of bugs around the Sass/Gem installs and documentation. Some smaller items:
|
41
|
+
* Fixed a bug with dropdown buttons to allow clicking on their anchors again.
|
42
|
+
* Added styles for HTML5 (and other) input styles, not just text.
|
43
|
+
* Added error states back to the forms documentation.
|
44
|
+
* Flyouts in a nav bar can now expand up as well as down.
|
45
|
+
* In SCSS you can now set $base-size correctly, but we're still working to correct modifying the $ratio variable.
|
46
|
+
|
47
|
+
### 3.0.1 to 3.0.3- July 2 to July 4, 2012
|
48
|
+
Various bug fixes with the downloader, gem, and Sass install.
|
49
|
+
|
50
|
+
### **3.0**- June 30, 2012
|
51
|
+
Initial launch of Foundation 3, deprecating Foundation 2.2.1. Major enhancements include Sass/SCSS development, new grid system with box-sizing: border-box, new form styles, new UI elements, retooled download and install options, new docs, new marketing site.
|
data/README.md
CHANGED
@@ -3,9 +3,9 @@ Welcome to Foundation
|
|
3
3
|
|
4
4
|
Foundation is the most advanced responsive front-end framework in the world. With Foundation you can quickly prototype and build sites or apps that work on any kind of device, with tons of included layout constructs (like a full responsive grid), elements and best practices.
|
5
5
|
|
6
|
-
Homepage: http://foundation.zurb.com
|
7
|
-
Documentation: http://foundation.zurb.com/docs
|
8
|
-
Download: http://foundation.zurb.com/download.php
|
6
|
+
Homepage: http://foundation.zurb.com
|
7
|
+
Documentation: http://foundation.zurb.com/docs
|
8
|
+
Download: http://foundation.zurb.com/download.php
|
9
9
|
|
10
10
|
Foundation is MIT-licensed and absolutely free to use. Foundation wouldn't be possible without the support of the entire ZURB team, our friends and colleagues who gave feedback, and some luminaries who did some heavy lifting that we took advantage of (thanks guys).
|
11
11
|
|
@@ -38,6 +38,7 @@ WordPress
|
|
38
38
|
Joomla
|
39
39
|
|
40
40
|
* [Joomla Template](https://github.com/meridiansoftech/joomla_foundation_template) by Arnold Mwumva Ford, Meridian Softech
|
41
|
+
* [Joomla Template](https://github.com/antonydoyle/siegeengine) by Antony Doyle, Siege21
|
41
42
|
|
42
43
|
Drupal
|
43
44
|
|
@@ -57,7 +58,8 @@ MODX
|
|
57
58
|
|
58
59
|
.NET
|
59
60
|
|
60
|
-
* [NuGet Package for ASP.Net MVC](http://www.nuget.org/packages/
|
61
|
+
* [NuGet Package for ASP.Net MVC](http://www.nuget.org/packages/Foundation3_MVC4) by Edward Charbeneau, @EdCharbeneau
|
62
|
+
|
61
63
|
|
62
64
|
CodeIgniter
|
63
65
|
|
@@ -90,6 +92,10 @@ Modular Scale
|
|
90
92
|
|
91
93
|
* [Modular Scale](https://github.com/scottkellum/modular-scale) by Mason Wendell and Scott Kellum
|
92
94
|
|
95
|
+
Ruby on Rails SASS Gems
|
96
|
+
|
97
|
+
* [Foundation Icons 2](https://github.com/zaiste/foundation-icons-sass-rails) by J. P. Nowak
|
98
|
+
|
93
99
|
MIT Open Source License
|
94
100
|
=======================
|
95
101
|
|
data/index.html
CHANGED
@@ -1,8 +1,6 @@
|
|
1
1
|
<!DOCTYPE html>
|
2
2
|
|
3
3
|
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
|
4
|
-
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
|
5
|
-
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
|
6
4
|
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
|
7
5
|
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
|
8
6
|
<head>
|
@@ -18,11 +16,6 @@
|
|
18
16
|
|
19
17
|
<script src="vendor/assets/javascripts/foundation/modernizr.foundation.js"></script>
|
20
18
|
|
21
|
-
<!-- IE Fix for HTML5 Tags -->
|
22
|
-
<!--[if lt IE 9]>
|
23
|
-
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
24
|
-
<![endif]-->
|
25
|
-
|
26
19
|
</head>
|
27
20
|
<body>
|
28
21
|
|
@@ -7,21 +7,22 @@ module Foundation
|
|
7
7
|
argument :layout_name, :type => :string, :default => 'application', :banner => 'layout_name'
|
8
8
|
|
9
9
|
class_option :haml, :desc => 'Generate HAML layout instead of ERB.', :type => :boolean
|
10
|
-
|
10
|
+
class_option :slim, :desc => 'Generate Slim layout instead of ERB.', :type => :boolean
|
11
|
+
|
11
12
|
def create_layout
|
12
13
|
if options.haml?
|
13
14
|
template 'application.html.haml', "app/views/layouts/#{file_name}.html.haml"
|
14
|
-
elsif
|
15
|
+
elsif options.slim?
|
15
16
|
template 'application.html.slim', "app/views/layouts/#{file_name}.html.slim"
|
16
17
|
else
|
17
18
|
template 'application.html.erb', "app/views/layouts/#{file_name}.html.erb"
|
18
19
|
end
|
19
20
|
end
|
20
|
-
|
21
|
+
|
21
22
|
private
|
22
23
|
def file_name
|
23
24
|
layout_name.underscore.downcase
|
24
25
|
end
|
25
26
|
end
|
26
27
|
end
|
27
|
-
end
|
28
|
+
end
|
data/lib/foundation/version.rb
CHANGED
@@ -0,0 +1 @@
|
|
1
|
+
1.9.3-p194
|
data/scss/foundation.scss
CHANGED
@@ -1,5 +1,4 @@
|
|
1
1
|
@charset "UTF-8";
|
2
|
-
|
3
2
|
// Foundation Features
|
4
3
|
// =============
|
5
4
|
|
@@ -16,3 +15,6 @@
|
|
16
15
|
@import "foundation/common/base";
|
17
16
|
|
18
17
|
@import "foundation/components/grid", "foundation/components/modules/all";
|
18
|
+
|
19
|
+
// Media Queries Overrides
|
20
|
+
@import "foundation/components/modules/mqueries";
|
@@ -6,20 +6,7 @@ $rowWidth: 1000px !default;
|
|
6
6
|
$columnGutter: 30px !default;
|
7
7
|
$totalColumns: 12 !default;
|
8
8
|
$mobileTotalColumns: 4 !default;
|
9
|
-
|
10
|
-
// Text Direction Settings
|
11
|
-
|
12
|
-
$textDirection: ltr !default; // Controls default global text direction, 'rtl' or 'ltr'
|
13
|
-
$defaultFloat: left !default; // Change this to 'right' for right-to-left languages
|
14
|
-
$defaultOpposite: right !default; // Change this to 'left' for right-to-left languages
|
15
|
-
|
16
|
-
@if $textDirection == ltr {
|
17
|
-
$defaultFloat: left;
|
18
|
-
$defaultOpposite: right;
|
19
|
-
} @else {
|
20
|
-
$defaultFloat: right;
|
21
|
-
$defaultOpposite: left;
|
22
|
-
}
|
9
|
+
$blockGridElements: 12 !default; // Highest number of block grid elements, Maximum of 24 supported
|
23
10
|
|
24
11
|
// Colors Settings
|
25
12
|
|
@@ -38,11 +25,27 @@ $darkEdge: rgba(#000, .2) !default;
|
|
38
25
|
|
39
26
|
$headerFontFamily: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
|
40
27
|
$headerFontWeight: bold !default;
|
28
|
+
$headerFontStyle: normal !default;
|
41
29
|
$headerFontColor: #222 !default;
|
42
30
|
$bodyFontFamily: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
|
43
31
|
$bodyFontWeight: normal !default;
|
32
|
+
$bodyFontStyle: normal !default;
|
44
33
|
$bodyFontColor: $txtColor !default;
|
45
34
|
|
35
|
+
// Text Direction Settings
|
36
|
+
|
37
|
+
$textDirection: ltr !default; // Controls default global text direction, 'rtl' or 'ltr'
|
38
|
+
$defaultFloat: left !default; // Change this to 'right' for right-to-left languages
|
39
|
+
$defaultOpposite: right !default; // Change this to 'left' for right-to-left languages
|
40
|
+
|
41
|
+
@if $textDirection == ltr {
|
42
|
+
$defaultFloat: left;
|
43
|
+
$defaultOpposite: right;
|
44
|
+
} @else {
|
45
|
+
$defaultFloat: right;
|
46
|
+
$defaultOpposite: left;
|
47
|
+
}
|
48
|
+
|
46
49
|
// Button Settings
|
47
50
|
|
48
51
|
$buttonRadius: 3px !default;
|
@@ -55,41 +58,80 @@ $largeBtnBase: $btnBase + 5 !default;
|
|
55
58
|
// Form Settings
|
56
59
|
|
57
60
|
$formSpacing: 12px !default;
|
61
|
+
$labelFontWeight: 500 !default;
|
62
|
+
$labelFontColor: lighten(#000, 30%) !default;
|
63
|
+
$labelBtmMargin: 3px !default;
|
64
|
+
$inputFontColor: rgba(0,0,0,0.75) !default;
|
65
|
+
$inputFontSize: 14px !default;
|
66
|
+
$inputBgColor: #fff !default;
|
67
|
+
$inputFocusBgColor: darken(#fff, 2%) !default;
|
68
|
+
$inputBorderColor: darken(#fff, 20%) !default;
|
69
|
+
$inputFocusBorderColor: darken(#fff, 30%) !default;
|
70
|
+
$inputBorderStyle: solid !default;
|
71
|
+
$inputBorderWidth: 1px !default;
|
72
|
+
$inputBorderRadius: 2px !default;
|
73
|
+
$fieldsetBorderRadius: 3px !default;
|
74
|
+
|
75
|
+
// Custom Form Settings
|
76
|
+
|
77
|
+
$custFormBorderColor: #ccc !default;
|
78
|
+
$custFormBgColor: #fff !default;
|
79
|
+
$custCheckColor: #222 !default;
|
80
|
+
$custSelectCurrentFontColor: #141414 !default;
|
81
|
+
$custSelectBgColor: #fff !default;
|
82
|
+
$custSelectBorderColor: #ddd !default;
|
83
|
+
$custSelectTriangleColor: #aaa !default;
|
84
|
+
$custSelectTriangleColorOpen: #222 !default;
|
85
|
+
$custSelectDropHeight: 200px !default;
|
86
|
+
$custDropdownBgColor: #fff !default;
|
87
|
+
$custDropdownBorderColor: darken(#fff, 20%) !default;
|
88
|
+
$custDropdownFontColor: #555 !default;
|
89
|
+
$custDropdownSelectedBgColor: lighten(#2ba6cb, 40%) !default;
|
90
|
+
$custDropdownSelectedFontColor: #000 !default;
|
91
|
+
$custFormDisabledBgColor: #ddd !default;
|
58
92
|
|
59
93
|
// Tab Settings
|
60
94
|
|
61
95
|
$tabHeight: 40px !default;
|
96
|
+
$tabTermFontSize: 12px;
|
62
97
|
|
63
98
|
// Nav Bar Settings
|
64
99
|
|
65
100
|
$navBarHeight: 40px !default;
|
66
101
|
$navFlyoutBaseWidth: 250px !default;
|
67
102
|
|
103
|
+
// Top Bar Settings
|
104
|
+
|
105
|
+
$topBarBgColor: #222 !default;
|
106
|
+
$topBarHeight: 45px !default;
|
107
|
+
$topBarHeightMobile: 45px !default;
|
108
|
+
$topBarBtmMargin: 30px !default;
|
109
|
+
$topBarTitleWeight: bold !default;
|
110
|
+
$topBarTitleSize: 17px !default;
|
111
|
+
$topBarLinkColor: #fff !default;
|
112
|
+
$topBarLinkWeight: bold !default;
|
113
|
+
$topBarLinkSize: 13px !default;
|
114
|
+
$topBarDropBgColor: #222 !default;
|
115
|
+
$topBarDropLinkColor: #fff !default;
|
116
|
+
$topBarDropToggleSize: 5px !default;
|
117
|
+
$topBarDropToggleColor: #fff !default;
|
118
|
+
$topBarDropToggleAlpha: 0.5 !default;
|
119
|
+
$topBarSearchWidth: 200px !default;
|
120
|
+
$topBarBreakPoint: 940px !default; // Change to 9999px for always mobile layout
|
121
|
+
$topBarNavToggleSize: 8px !default;
|
122
|
+
|
68
123
|
// UI Settings
|
69
124
|
|
70
125
|
$thumbRadius: 3px !default;
|
71
|
-
|
72
126
|
$progBarHeight: 25px !default;
|
73
|
-
$progBarBorderColor: darken(
|
127
|
+
$progBarBorderColor: darken(#fff, 20%) !default;
|
74
128
|
$progBarBorderSize: 1px !default;
|
75
129
|
$progBarPad: 2px !default;
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
$mainWidth: 80% !default;
|
80
|
-
$complementaryWidth: 20% !default;
|
81
|
-
|
82
|
-
// Modular Scale Settings
|
83
|
-
|
84
|
-
// $ratio: $golden; // THIS IS DEFAULT IN MODULAR-SCALE
|
85
|
-
$baseFontSize: 14px !default;
|
86
|
-
$importantModNum: 44px !default;
|
87
|
-
$base-size: $baseFontSize $importantModNum;
|
88
|
-
// Produced the following list of values: 14, 17, 23, 27, 37, 44, 59, 71, 95, 115;
|
89
|
-
// http://www.modularscale.com by Tim Brown
|
90
|
-
// https://github.com/scottkellum/modular-scale by scottkellum
|
130
|
+
$linkListBottomMargin: 17px -22px !default;
|
131
|
+
$tableBorderRadius: 3px !default;
|
91
132
|
|
92
133
|
// Tooltip Settings
|
134
|
+
|
93
135
|
$hasTipBorderBottom: dotted 1px #ccc !default;
|
94
136
|
$hasTipFontWeight: bold !default;
|
95
137
|
$hasTipFontColor: #333 !default;
|
@@ -97,29 +139,99 @@ $hasTipBorderBottomHover: dotted 1px darken($mainColor, 20%) !default;
|
|
97
139
|
$hasTipFontColorHover: $mainColor !default;
|
98
140
|
$tooltipBackgroundColor: #000 !default;
|
99
141
|
$tooltipBackgroundOpacity: 0.85 !default;
|
100
|
-
$tooltipFontSize:
|
142
|
+
$tooltipFontSize: 12px !default;
|
101
143
|
$tooltipFontWeight: bold !default;
|
102
144
|
$tooltipFontColor: #fff !default;
|
103
145
|
$tapToCloseFontSize: 10 !default;
|
104
146
|
$tapToCloseFontWeight: normal !default;
|
105
147
|
$tapToCloseFontColor: #888 !default;
|
106
|
-
$
|
107
|
-
$
|
148
|
+
$tooltipFontSizeScreenSm: 14 !default;
|
149
|
+
$tooltipBgOpacityScreenSm: 0.85 !default;
|
150
|
+
$tooltipBorderRadius: 4px !default;
|
151
|
+
|
152
|
+
// Pricing Table Settings
|
153
|
+
|
154
|
+
$priceTableBorder: solid 1px #ddd !default;
|
155
|
+
$priceTitleBgColor: #ddd !default;
|
156
|
+
$priceTitlePadding: 15px 20px !default;
|
157
|
+
$priceTitleAlign: center !default;
|
158
|
+
$priceTitleColor: #333 !default;
|
159
|
+
$priceTitleWeight: bold !default;
|
160
|
+
$priceTitleSize: 16px !default;
|
161
|
+
|
162
|
+
$priceMoneyBgColor: #eee !default;
|
163
|
+
$priceMoneyPadding: 15px 20px !default;
|
164
|
+
$priceMoneyAlign: center !default;
|
165
|
+
$priceMoneyColor: #333 !default;
|
166
|
+
$priceMoneyWeight: normal !default;
|
167
|
+
$priceMoneySize: 20px !default;
|
168
|
+
|
169
|
+
$priceBgColor: #fff !default;
|
170
|
+
$priceDescColor: #777 !default;
|
171
|
+
$priceDescPadding: 15px !default;
|
172
|
+
$priceDescAlign: center !default;
|
173
|
+
$priceDescFontSize: 12px !default;
|
174
|
+
$priceDescWeight: normal !default;
|
175
|
+
$priceDescLineHeight: 1.4 !default;
|
176
|
+
$priceDescBtmBorder: dotted 1px #ddd !default;
|
177
|
+
|
178
|
+
$priceItemColor: #333 !default;
|
179
|
+
$priceItemPadding: 15px !default;
|
180
|
+
$priceItemAlign: center !default;
|
181
|
+
$priceItemFontSize: 14px !default;
|
182
|
+
$priceItemWeight: normal !default;
|
183
|
+
$priceItemBtmBorder: dotted 1px #ddd !default;
|
184
|
+
|
185
|
+
$priceCtaBgColor: #f5f5f5 !default;
|
186
|
+
$priceCtaAlign: center !default;
|
187
|
+
$priceCtaPadding: 20px !default;
|
188
|
+
|
189
|
+
// Orbit Settings
|
190
|
+
|
191
|
+
$orbitCaptionBgColorOldBrowser: #000 !default;
|
192
|
+
$orbitCaptionBgColor: rgba(0,0,0,.6) !default;
|
193
|
+
$orbitCaptionFontColor: #fff !default;
|
194
|
+
$orbitBulletNavColor: #999 !default;
|
195
|
+
$orbitBulletNavColorActive: #222 !default;
|
196
|
+
$orbitHasThumbBorderColor: #000 !default;
|
197
|
+
$orbitHasThumbBorderWidth: 2px !default;
|
198
|
+
$orbitHasThumbBorderStyle: solid !default;
|
199
|
+
$orbitSlideNumBgColor: rgba(0,0,0,0.7) !default;
|
200
|
+
$orbitSlideNumFontColor: #fff !default;
|
201
|
+
$orbitSlideNumPadding: 5px !default;
|
202
|
+
|
203
|
+
// Clearing Settings
|
204
|
+
$clearingBg: rgba(0,0,0,0.8) !default;
|
205
|
+
$clearingOldBrowserBg: rgb(0,0,0) !default;
|
206
|
+
$clearingCaptionBg: rgba(0,0,0,0.7) !default;
|
207
|
+
$clearingCaptionOldBrowserBg: rgb(0,0,0) !default;
|
208
|
+
$clearingCaptionFontColor: #fff !default;
|
209
|
+
$clearingCloseColor: #fff !default;
|
210
|
+
$clearingArrowColor: #fff !default;
|
211
|
+
$clearingArrowSize: 16px !default;
|
212
|
+
$clearingCarouselOldBrowserBg: rgb(0,0,0) !default;
|
213
|
+
$clearingCarouselBg: rgba(0,0,0,0.75) !default;
|
214
|
+
$clearingCarouselHeight: 150px !default;
|
215
|
+
$clearingCarouselThumbHeight: 150px !default;
|
216
|
+
$clearingCarouselThumbWidth: 175px !default;
|
217
|
+
$clearingCarouselThumbActiveBorder: 4px solid rgb(255,255,255) !default;
|
218
|
+
$clearingImgOldBrowserBg: rgb(0,0,0) !default;
|
219
|
+
$clearingImgBg: rgba(0,0,0,0.75) !default;
|
108
220
|
|
109
|
-
//
|
221
|
+
// Off Canvas Width Settings
|
110
222
|
|
111
|
-
$
|
112
|
-
$
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
$
|
117
|
-
$
|
118
|
-
$
|
119
|
-
$
|
120
|
-
|
121
|
-
|
122
|
-
|
223
|
+
$mainWidth: 80% !default;
|
224
|
+
$complementaryWidth: 20% !default;
|
225
|
+
|
226
|
+
// Modular Scale Settings
|
227
|
+
|
228
|
+
// $ratio: $golden; // THIS IS DEFAULT IN MODULAR-SCALE
|
229
|
+
$baseFontSize: 14px !default;
|
230
|
+
$importantModNum: 44px !default;
|
231
|
+
$base-size: $baseFontSize $importantModNum;
|
232
|
+
// Produced the following list of values: 14, 17, 23, 27, 37, 44, 59, 71, 95, 115;
|
233
|
+
// http://www.modularscale.com by Tim Brown
|
234
|
+
// https://github.com/scottkellum/modular-scale by scottkellum
|
123
235
|
|
124
236
|
// Media Queries
|
125
237
|
|
@@ -14,16 +14,12 @@
|
|
14
14
|
}
|
15
15
|
}
|
16
16
|
|
17
|
-
label { font-size: ms(0); color:
|
17
|
+
label { font-size: ms(0); color: $labelFontColor; cursor: pointer; display: block; font-weight: $labelFontWeight; margin-bottom: $labelBtmMargin;
|
18
18
|
|
19
19
|
&.right { float: none; text-align: right; }
|
20
20
|
&.inline { line-height: (ms(0) + ($formSpacing * 1.5)); margin: 0 0 $formSpacing 0; }
|
21
21
|
}
|
22
22
|
|
23
|
-
@media only screen and (max-width: $screenSmall - 1) {
|
24
|
-
label.right { text-align: left; }
|
25
|
-
}
|
26
|
-
|
27
23
|
.prefix, .postfix { display: block; position: relative; z-index: 2; text-align: center; width: 100%; padding-top: 0; padding-bottom: 0; height: (ms(0) + ($formSpacing * 1.5)); line-height: (ms(0) + ($formSpacing * 1.5)) - 1; }
|
28
24
|
a.button.prefix, a.button.postfix { padding-#{$defaultFloat}: 0; padding-#{$defaultOpposite}: 0; text-align: center; }
|
29
25
|
span.prefix, span.postfix { background: darken($white, 5%); border: 1px solid darken($white, 20%); }
|
@@ -31,11 +27,11 @@
|
|
31
27
|
.prefix { #{$defaultFloat}: 2px; @include border-corner-radius(top, $defaultFloat, 2px); @include border-corner-radius(bottom, $defaultFloat, 2px); overflow:hidden; }
|
32
28
|
.postfix { #{$defaultOpposite}: 2px; @include border-corner-radius(top, $defaultOpposite, 2px); @include border-corner-radius(bottom, $defaultOpposite, 2px); }
|
33
29
|
|
34
|
-
input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea { font-family:
|
30
|
+
input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea { background-color: $inputBgColor; font-family: inherit; border: $inputBorderWidth $inputBorderStyle $inputBorderColor; @include border-radius($inputBorderRadius); @include box-shadow(inset 0 1px 2px rgba(0,0,0,0.1)); color: $inputFontColor; display: block; font-size: $inputFontSize; margin: 0 0 $formSpacing 0; padding: ($formSpacing / 2); height: (ms(0) + ($formSpacing * 1.5)); width: 100%; @include transition(all 0.15s linear);
|
35
31
|
|
36
32
|
&.oversize { font-size: ms(1); padding: (($formSpacing - 4) / 2) ($formSpacing / 2); }
|
37
33
|
|
38
|
-
&:focus { background:
|
34
|
+
&:focus { background: $inputFocusBgColor; outline: none !important; border-color: $inputFocusBorderColor; }
|
39
35
|
&[disabled] { background-color: #ddd; }
|
40
36
|
}
|
41
37
|
|
@@ -44,7 +40,7 @@
|
|
44
40
|
select { width: 100%; }
|
45
41
|
|
46
42
|
/* Fieldsets */
|
47
|
-
fieldset { border: solid 1px #ddd;
|
43
|
+
fieldset { border: solid 1px #ddd; @include border-radius($fieldsetBorderRadius); padding: 12px 12px 0; margin: 18px 0;
|
48
44
|
|
49
45
|
legend { font-weight: bold; background: $white; padding: 0 3px; margin: 0; margin-#{$defaultFloat}: -3px; }
|
50
46
|
}
|
@@ -52,39 +48,36 @@
|
|
52
48
|
/* Errors */
|
53
49
|
.error input, input.error, .error textarea, textarea.error { border-color: $alertColor; background-color: rgba($alertColor, 0.1); }
|
54
50
|
.error label, label.error { color: $alertColor; }
|
55
|
-
.error small, small.error { display: block; padding: 6px 4px; margin-top: -($formSpacing) - 1; margin-bottom: $formSpacing; background: $alertColor; color: #fff;
|
56
|
-
|
57
|
-
|
58
|
-
@for $i from 1 through $totalColumns {
|
59
|
-
input[type="text"].#{convert-number-to-word($i)}, input[type="password"].#{convert-number-to-word($i)}, input[type="date"].#{convert-number-to-word($i)}, input[type="datetime"].#{convert-number-to-word($i)}, input[type="email"].#{convert-number-to-word($i)}, input[type="number"].#{convert-number-to-word($i)}, input[type="search"].#{convert-number-to-word($i)}, input[type="tel"].#{convert-number-to-word($i)}, input[type="time"].#{convert-number-to-word($i)}, input[type="url"].#{convert-number-to-word($i)}, textarea.#{convert-number-to-word($i)} { width: 100% !important; }
|
60
|
-
}
|
51
|
+
.error small, small.error { display: block; padding: 6px 4px; margin-top: -($formSpacing) - 1; margin-bottom: $formSpacing; background: $alertColor; color: #fff; font-size: ms(0) - 2; font-weight: bold; @include border-corner-radius(bottom, $defaultFloat, 2px); @include border-corner-radius(bottom, $defaultOpposite, $inputBorderRadius); }
|
52
|
+
.error textarea, textarea.error {
|
53
|
+
&:focus { background: darken($white, 2%); border-color: darken($white, 30%); }
|
61
54
|
}
|
62
|
-
|
63
55
|
/* Custom Forms ---------------------- */
|
64
56
|
|
65
57
|
form.custom {
|
66
58
|
|
67
|
-
span.custom { display: inline-block; width: 16px; height: 16px; position: relative; top: 2px; border: solid 1px
|
59
|
+
span.custom { display: inline-block; width: 16px; height: 16px; position: relative; top: 2px; border: solid 1px $custFormBorderColor; background: $custFormBgColor;
|
68
60
|
|
69
61
|
&.radio { @include border-radius(100px); }
|
70
62
|
&.checkbox {
|
71
63
|
&:before { content: ""; display: block; line-height: 0.8; height: 14px; width: 14px; text-align: center; position: absolute; top: 0; #{$defaultFloat}: 0; font-size: 14px; color: #fff; }
|
72
64
|
}
|
73
65
|
&.radio.checked {
|
74
|
-
&:before { content: ""; display: block; width: 8px; height: 8px; @include border-radius(100px); background:
|
66
|
+
&:before { content: ""; display: block; width: 8px; height: 8px; @include border-radius(100px); background: $custCheckColor; position: relative; top: 3px; #{$defaultFloat}: 3px; }
|
75
67
|
}
|
76
68
|
&.checkbox.checked {
|
77
|
-
&:before { content: "\00d7"; color:
|
69
|
+
&:before { content: "\00d7"; color: $custCheckColor; }
|
78
70
|
}
|
79
71
|
}
|
80
72
|
div.custom.dropdown { display: block; position: relative; width: auto; height: 28px; margin-bottom: 9px; margin-top: 2px;
|
81
73
|
|
82
|
-
|
83
|
-
a.
|
84
|
-
|
74
|
+
ul { overflow-y: auto; max-height: $custSelectDropHeight; }
|
75
|
+
a.current { display: block; width: auto; line-height: 26px; min-height: 28px; padding: 0; padding-#{$defaultFloat}: 6px; padding-#{$defaultOpposite}: 38px; border: solid 1px $custSelectBorderColor; color: $custSelectCurrentFontColor; background-color: $custSelectBgColor; white-space: nowrap; }
|
76
|
+
a.selector { position: absolute; width: 27px; height: 28px; display: block; #{$defaultOpposite}: 0; top: 0; border: solid 1px $custSelectBorderColor;
|
77
|
+
&:after { content: ""; display: block; @include cssTriangle(5px, $custSelectTriangleColor, top); position: absolute; #{$defaultFloat}: 50%; top: 50%; margin-top: -2px; margin-#{$defaultFloat}: -5px; }
|
85
78
|
}
|
86
79
|
&:hover, &.open {
|
87
|
-
a.selector { &:after { @include cssTriangle(5px,
|
80
|
+
a.selector { &:after { @include cssTriangle(5px, $custSelectTriangleColorOpen, top); } }
|
88
81
|
}
|
89
82
|
|
90
83
|
&.open ul { display: block; z-index: 10; }
|
@@ -100,23 +93,23 @@
|
|
100
93
|
&.open.expand ul { width: 100% !important; }
|
101
94
|
}
|
102
95
|
|
103
|
-
div.custom.dropdown ul { position: absolute; width: auto; display: none; margin: 0; #{$defaultFloat}: 0; top: 27px; margin: 0; padding: 0; background:
|
96
|
+
div.custom.dropdown ul { position: absolute; width: auto; display: none; margin: 0; #{$defaultFloat}: 0; top: 27px; margin: 0; padding: 0; background: $custDropdownBgColor; background: rgba($custDropdownBgColor,0.95); border: solid 1px $custDropdownBorderColor;
|
104
97
|
|
105
|
-
li { color:
|
106
|
-
li.selected { background:
|
98
|
+
li { color: $custDropdownFontColor; font-size: ms(0) - 1; cursor: pointer; padding: 3px; padding-#{$defaultFloat}: 6px; padding-#{$defaultOpposite}: 38px; min-height: 18px; line-height: 18px; margin: 0; white-space: nowrap; list-style: none; }
|
99
|
+
li.selected { background: $custDropdownSelectedBgColor; color: $custDropdownSelectedFontColor;
|
107
100
|
&:after { content: "\2013"; position: absolute; #{$defaultOpposite}: 10px; }
|
108
101
|
}
|
109
|
-
li:hover { background-color:
|
110
|
-
&:after { content: "\2013"; position: absolute; #{$defaultOpposite}: 10px; color:
|
102
|
+
li:hover { background-color: $custDropdownSelectedBgColor; color: $custDropdownSelectedFontColor;
|
103
|
+
&:after { content: "\2013"; position: absolute; #{$defaultOpposite}: 10px; color: darken($custDropdownSelectedBgColor, 10%); }
|
111
104
|
}
|
112
|
-
li.selected:hover { background:
|
113
|
-
&:after { color:
|
105
|
+
li.selected:hover { background: $custDropdownSelectedBgColor; cursor: default; color: $custDropdownSelectedFontColor;
|
106
|
+
&:after { color: $custDropdownSelectedFontColor; }
|
114
107
|
}
|
115
108
|
&.show { display: block; }
|
116
109
|
}
|
117
110
|
|
118
111
|
/* Custom input, disabled */
|
119
|
-
.custom.disabled { background-color:
|
112
|
+
.custom.disabled { background-color: $custFormDisabledBgColor; }
|
120
113
|
}
|
121
114
|
|
122
115
|
/* Correct FF custom dropdown height */
|