openshift-origin-console 1.3.2
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/COPYRIGHT +1 -0
- data/Gemfile +21 -0
- data/LICENSE +203 -0
- data/README.md +123 -0
- data/Rakefile +44 -0
- data/app/assets/images/cartridge-edge.gif +0 -0
- data/app/assets/images/console/arrow-down.png +0 -0
- data/app/assets/images/console/console-sprite.png +0 -0
- data/app/assets/images/favicon-32.png +0 -0
- data/app/assets/images/loader-dark.gif +0 -0
- data/app/assets/images/loader.gif +0 -0
- data/app/assets/images/sprite-vert.png +0 -0
- data/app/assets/javascripts/console.js +10 -0
- data/app/assets/javascripts/console/form.js.coffee +51 -0
- data/app/assets/stylesheets/_alerts.scss +84 -0
- data/app/assets/stylesheets/_breadcrumbs.scss +31 -0
- data/app/assets/stylesheets/_buttons.scss +229 -0
- data/app/assets/stylesheets/_code.scss +86 -0
- data/app/assets/stylesheets/_custom.scss +207 -0
- data/app/assets/stylesheets/_footer.scss +54 -0
- data/app/assets/stylesheets/_forms.scss +710 -0
- data/app/assets/stylesheets/_grid.scss +28 -0
- data/app/assets/stylesheets/_input-prepend-append.scss +138 -0
- data/app/assets/stylesheets/_labels.scss +40 -0
- data/app/assets/stylesheets/_mixins.scss +76 -0
- data/app/assets/stylesheets/_override-variables.scss +1 -0
- data/app/assets/stylesheets/_responsive.scss +438 -0
- data/app/assets/stylesheets/_ribbon.scss +57 -0
- data/app/assets/stylesheets/_type.scss +306 -0
- data/app/assets/stylesheets/_utilities.scss +10 -0
- data/app/assets/stylesheets/_variables.scss +131 -0
- data/app/assets/stylesheets/common.css.scss +82 -0
- data/app/assets/stylesheets/console/_application.scss +194 -0
- data/app/assets/stylesheets/console/_base.scss +26 -0
- data/app/assets/stylesheets/console/_breadcrumbs.scss +32 -0
- data/app/assets/stylesheets/console/_buttons.scss +214 -0
- data/app/assets/stylesheets/console/_core.scss +1002 -0
- data/app/assets/stylesheets/console/_dropdowns.scss +63 -0
- data/app/assets/stylesheets/console/_help.scss +54 -0
- data/app/assets/stylesheets/console/_mixins.scss +11 -0
- data/app/assets/stylesheets/console/_navbar.scss +415 -0
- data/app/assets/stylesheets/console/_ribbon.scss +82 -0
- data/app/assets/stylesheets/console/_tile.scss +122 -0
- data/app/assets/stylesheets/origin.css.scss +37 -0
- data/app/controllers/account/dashboard.rb +13 -0
- data/app/controllers/account_controller.rb +3 -0
- data/app/controllers/application_types_controller.rb +80 -0
- data/app/controllers/applications_controller.rb +183 -0
- data/app/controllers/building_controller.rb +81 -0
- data/app/controllers/capability_aware.rb +18 -0
- data/app/controllers/cartridge_types_controller.rb +53 -0
- data/app/controllers/cartridges_controller.rb +43 -0
- data/app/controllers/console/auth/basic.rb +65 -0
- data/app/controllers/console/auth/none.rb +5 -0
- data/app/controllers/console/auth/remote_user.rb +69 -0
- data/app/controllers/console/rescue.rb +48 -0
- data/app/controllers/console_controller.rb +19 -0
- data/app/controllers/console_index_controller.rb +14 -0
- data/app/controllers/domain_aware.rb +26 -0
- data/app/controllers/domain_session_sweeper.rb +29 -0
- data/app/controllers/domains_controller.rb +30 -0
- data/app/controllers/keys_controller.rb +43 -0
- data/app/controllers/scaling_controller.rb +46 -0
- data/app/controllers/sshkey_aware.rb +23 -0
- data/app/controllers/sshkey_session_sweeper.rb +29 -0
- data/app/controllers/user_session_sweeper.rb +29 -0
- data/app/helpers/console/community_helper.rb +78 -0
- data/app/helpers/console/console_helper.rb +26 -0
- data/app/helpers/console/help_helper.rb +270 -0
- data/app/helpers/console/html5_boilerplate_helper.rb +63 -0
- data/app/helpers/console/layout_helper.rb +277 -0
- data/app/helpers/console/model_helper.rb +106 -0
- data/app/helpers/console/secured_helper.rb +5 -0
- data/app/models/alias.rb +10 -0
- data/app/models/application.rb +148 -0
- data/app/models/application_associations.rb +36 -0
- data/app/models/application_template.rb +90 -0
- data/app/models/application_type.rb +258 -0
- data/app/models/async_aware.rb +60 -0
- data/app/models/capabilities.rb +62 -0
- data/app/models/cartridge.rb +122 -0
- data/app/models/cartridge_type.rb +140 -0
- data/app/models/domain.rb +44 -0
- data/app/models/domain_associations.rb +33 -0
- data/app/models/embedded.rb +11 -0
- data/app/models/gear.rb +13 -0
- data/app/models/gear_group.rb +104 -0
- data/app/models/key.rb +87 -0
- data/app/models/quickstart.rb +135 -0
- data/app/models/rest_api.rb +130 -0
- data/app/models/rest_api/base.rb +781 -0
- data/app/models/rest_api/cacheable.rb +91 -0
- data/app/models/rest_api/environment.rb +13 -0
- data/app/models/rest_api/info.rb +34 -0
- data/app/models/rest_api/log_subscriber.rb +29 -0
- data/app/models/rest_api/railties/controller_runtime.rb +37 -0
- data/app/models/user.rb +27 -0
- data/app/models/user_associations.rb +6 -0
- data/app/views/account/_domain.html.haml +14 -0
- data/app/views/account/_keys.html.haml +20 -0
- data/app/views/account/_user.html.haml +5 -0
- data/app/views/account/show.html.haml +15 -0
- data/app/views/application_templates/_application_template.html.haml +5 -0
- data/app/views/application_types/_application_type.html.haml +19 -0
- data/app/views/application_types/_custom.html.haml +19 -0
- data/app/views/application_types/_persisted.html.haml +26 -0
- data/app/views/application_types/_tile.html.haml +9 -0
- data/app/views/application_types/index.html.haml +87 -0
- data/app/views/application_types/search.html.haml +67 -0
- data/app/views/application_types/show.html.haml +219 -0
- data/app/views/applications/_application.html.haml +34 -0
- data/app/views/applications/_applications_filter.html.haml +8 -0
- data/app/views/applications/_footer.html.haml +0 -0
- data/app/views/applications/_name.html.haml +28 -0
- data/app/views/applications/delete.html.haml +19 -0
- data/app/views/applications/get_started.html.haml +145 -0
- data/app/views/applications/index.html.haml +55 -0
- data/app/views/applications/show.html.haml +193 -0
- data/app/views/building/delete.html.haml +22 -0
- data/app/views/building/new.html.haml +57 -0
- data/app/views/building/show.html.haml +12 -0
- data/app/views/cartridge_types/_cartridge_type.html.haml +61 -0
- data/app/views/cartridge_types/index.html.haml +37 -0
- data/app/views/cartridge_types/show.html.haml +21 -0
- data/app/views/cartridges/next_steps.html.haml +58 -0
- data/app/views/cartridges/show.html.haml +1 -0
- data/app/views/console/error.html.haml +58 -0
- data/app/views/console/help.html.haml +90 -0
- data/app/views/console/not_found.html.haml +69 -0
- data/app/views/console/unauthorized.html.haml +7 -0
- data/app/views/domains/_domain.html.haml +14 -0
- data/app/views/domains/_form.html.haml +13 -0
- data/app/views/domains/edit.html.haml +5 -0
- data/app/views/domains/new.html.haml +6 -0
- data/app/views/keys/_form.html.haml +14 -0
- data/app/views/keys/_simple_form.html.haml +14 -0
- data/app/views/keys/new.html.haml +2 -0
- data/app/views/layouts/_footer.html.haml +38 -0
- data/app/views/layouts/_head.html.haml +35 -0
- data/app/views/layouts/console.html.haml +60 -0
- data/app/views/layouts/console/_header.html.haml +44 -0
- data/app/views/layouts/console/_identity.html.haml +7 -0
- data/app/views/layouts/console/_javascripts.html.haml +5 -0
- data/app/views/layouts/console/_stylesheets.html.haml +6 -0
- data/app/views/scaling/delete.html.haml +17 -0
- data/app/views/scaling/new.html.haml +24 -0
- data/app/views/scaling/show.html.haml +81 -0
- data/app/views/shared/_tracking.html.haml +0 -0
- data/conf/console.conf.example +108 -0
- data/conf/openshift_console.conf +10 -0
- data/config/cartridge_types.yml +54 -0
- data/config/initializers/barista_config.rb +86 -0
- data/config/initializers/cartridge_types.rb +5 -0
- data/config/initializers/console_security.rb +1 -0
- data/config/initializers/date_helper.rb +5 -0
- data/config/initializers/extended_logger.rb +51 -0
- data/config/initializers/formtastic.rb +100 -0
- data/config/initializers/inflections.rb +38 -0
- data/config/initializers/rdiscount.rb +8 -0
- data/config/initializers/rest_api.rb +22 -0
- data/config/initializers/sass.rb +30 -0
- data/config/initializers/session_trace.rb +32 -0
- data/config/initializers/x_frame_options.rb +53 -0
- data/config/locales/en.yml +12 -0
- data/lib/active_resource/associations.rb +107 -0
- data/lib/active_resource/associations/builder/association.rb +35 -0
- data/lib/active_resource/associations/builder/belongs_to.rb +5 -0
- data/lib/active_resource/associations/builder/has_many.rb +5 -0
- data/lib/active_resource/associations/builder/has_one.rb +5 -0
- data/lib/active_resource/persistent_connection.rb +341 -0
- data/lib/active_resource/persistent_http_mock.rb +68 -0
- data/lib/active_resource/reflection.rb +78 -0
- data/lib/console.rb +8 -0
- data/lib/console/config_file.rb +13 -0
- data/lib/console/configuration.rb +163 -0
- data/lib/console/engine.rb +28 -0
- data/lib/console/formtastic/bootstrap_form_builder.rb +369 -0
- data/lib/console/rails/app_redirector.rb +40 -0
- data/lib/console/rails/filter_hash.rb +15 -0
- data/lib/console/rails/routes.rb +51 -0
- data/lib/console/version.rb +5 -0
- data/lib/tasks/assets.rake +79 -0
- data/lib/tasks/stats.rake +18 -0
- data/lib/tasks/test_suites.rake +73 -0
- data/test/coverage_helper.rb +27 -0
- data/test/fixtures/cartridges.json +1 -0
- data/test/fixtures/quickstarts.csv +3 -0
- data/test/functional/account_controller_test.rb +14 -0
- data/test/functional/application_types_controller_test.rb +251 -0
- data/test/functional/applications_controller_sanity_test.rb +26 -0
- data/test/functional/applications_controller_test.rb +365 -0
- data/test/functional/building_controller_test.rb +203 -0
- data/test/functional/cartridge_types_controller_isolation_test.rb +68 -0
- data/test/functional/cartridge_types_controller_test.rb +48 -0
- data/test/functional/cartridges_controller_test.rb +83 -0
- data/test/functional/console_auth_basic_controller_test.rb +82 -0
- data/test/functional/console_auth_remote_user_controller_test.rb +90 -0
- data/test/functional/console_index_controller_test.rb +22 -0
- data/test/functional/domains_controller_test.rb +194 -0
- data/test/functional/keys_controller_test.rb +163 -0
- data/test/functional/quickstarts.json +18 -0
- data/test/functional/scaling_controller_test.rb +153 -0
- data/test/integration/assets_test.rb +34 -0
- data/test/integration/help_link_test.rb +43 -0
- data/test/integration/quickstarts_test.rb +24 -0
- data/test/integration/rescue_from_test.rb +25 -0
- data/test/integration/rest_api/application_test.rb +115 -0
- data/test/integration/rest_api/cartridge_test.rb +44 -0
- data/test/integration/rest_api/cartridge_type_test.rb +143 -0
- data/test/integration/rest_api/domain_test.rb +91 -0
- data/test/integration/rest_api/info_test.rb +9 -0
- data/test/integration/rest_api/key_test.rb +85 -0
- data/test/integration/static_pages_test.rb +44 -0
- data/test/rails_app/Rakefile +7 -0
- data/test/rails_app/app/controllers/application_controller.rb +5 -0
- data/test/rails_app/config.ru +4 -0
- data/test/rails_app/config/application.rb +48 -0
- data/test/rails_app/config/boot.rb +10 -0
- data/test/rails_app/config/database.yml +25 -0
- data/test/rails_app/config/environment.rb +5 -0
- data/test/rails_app/config/environments/development.rb +38 -0
- data/test/rails_app/config/environments/production.rb +70 -0
- data/test/rails_app/config/environments/test.rb +43 -0
- data/test/rails_app/config/initializers/auth.rb +0 -0
- data/test/rails_app/config/initializers/backtrace_silencers.rb +7 -0
- data/test/rails_app/config/initializers/inflections.rb +10 -0
- data/test/rails_app/config/initializers/mime_types.rb +5 -0
- data/test/rails_app/config/initializers/secret_token.rb +7 -0
- data/test/rails_app/config/initializers/session_store.rb +8 -0
- data/test/rails_app/config/locales/en.yml +5 -0
- data/test/rails_app/config/routes.rb +4 -0
- data/test/rails_app/script/rails +6 -0
- data/test/support/auth.rb +111 -0
- data/test/support/base.rb +142 -0
- data/test/support/errors.rb +28 -0
- data/test/support/rest_api.rb +189 -0
- data/test/test_helper.rb +14 -0
- data/test/unit/active_model_compliance_test.rb +23 -0
- data/test/unit/async_aware_test.rb +55 -0
- data/test/unit/configuration_test.rb +158 -0
- data/test/unit/filter_hash_test.rb +64 -0
- data/test/unit/helpers/model_helper_test.rb +61 -0
- data/test/unit/overrides_test.rb +9 -0
- data/test/unit/rest_api_test.rb +1590 -0
- data/vendor/assets/javascripts/MIT-LICENSE.txt +20 -0
- data/vendor/assets/javascripts/bootstrap-collapse.js +157 -0
- data/vendor/assets/javascripts/bootstrap-dropdown.js +100 -0
- data/vendor/assets/javascripts/bootstrap-tab.js +135 -0
- data/vendor/assets/javascripts/bootstrap-transition.js +61 -0
- data/vendor/assets/javascripts/jquery.spin.js +47 -0
- data/vendor/assets/javascripts/jquery.ui.widget.js +16 -0
- data/vendor/assets/javascripts/jquery_cookie.js +41 -0
- data/vendor/assets/javascripts/jquery_validate_min.js +51 -0
- data/vendor/assets/javascripts/modernizr.min.js +2 -0
- data/vendor/assets/javascripts/plugins.js +16 -0
- data/vendor/assets/stylesheets/bootstrap/_accordion.scss +28 -0
- data/vendor/assets/stylesheets/bootstrap/_alerts.scss +70 -0
- data/vendor/assets/stylesheets/bootstrap/_breadcrumbs.scss +22 -0
- data/vendor/assets/stylesheets/bootstrap/_button-groups.scss +147 -0
- data/vendor/assets/stylesheets/bootstrap/_buttons.scss +183 -0
- data/vendor/assets/stylesheets/bootstrap/_carousel.scss +121 -0
- data/vendor/assets/stylesheets/bootstrap/_close.scss +18 -0
- data/vendor/assets/stylesheets/bootstrap/_code.scss +57 -0
- data/vendor/assets/stylesheets/bootstrap/_component-animations.scss +18 -0
- data/vendor/assets/stylesheets/bootstrap/_dropdowns.scss +130 -0
- data/vendor/assets/stylesheets/bootstrap/_forms.scss +522 -0
- data/vendor/assets/stylesheets/bootstrap/_grid.scss +8 -0
- data/vendor/assets/stylesheets/bootstrap/_hero-unit.scss +20 -0
- data/vendor/assets/stylesheets/bootstrap/_labels.scss +32 -0
- data/vendor/assets/stylesheets/bootstrap/_layouts.scss +17 -0
- data/vendor/assets/stylesheets/bootstrap/_mixins.scss +602 -0
- data/vendor/assets/stylesheets/bootstrap/_modals.scss +84 -0
- data/vendor/assets/stylesheets/bootstrap/_navbar.scss +299 -0
- data/vendor/assets/stylesheets/bootstrap/_navs.scss +353 -0
- data/vendor/assets/stylesheets/bootstrap/_pager.scss +30 -0
- data/vendor/assets/stylesheets/bootstrap/_pagination.scss +55 -0
- data/vendor/assets/stylesheets/bootstrap/_popovers.scss +49 -0
- data/vendor/assets/stylesheets/bootstrap/_progress-bars.scss +95 -0
- data/vendor/assets/stylesheets/bootstrap/_reset.scss +126 -0
- data/vendor/assets/stylesheets/bootstrap/_scaffolding.scss +33 -0
- data/vendor/assets/stylesheets/bootstrap/_sprites.scss +158 -0
- data/vendor/assets/stylesheets/bootstrap/_tables.scss +150 -0
- data/vendor/assets/stylesheets/bootstrap/_thumbnails.scss +35 -0
- data/vendor/assets/stylesheets/bootstrap/_tooltip.scss +35 -0
- data/vendor/assets/stylesheets/bootstrap/_type.scss +218 -0
- data/vendor/assets/stylesheets/bootstrap/_utilities.scss +23 -0
- data/vendor/assets/stylesheets/bootstrap/_variables.scss +107 -0
- data/vendor/assets/stylesheets/bootstrap/_wells.scss +17 -0
- data/vendor/assets/stylesheets/bootstrap/bootstrap.scss +66 -0
- data/vendor/assets/stylesheets/bootstrap/responsive.scss +334 -0
- metadata +506 -0
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
// HERO UNIT
|
|
2
|
+
// ---------
|
|
3
|
+
|
|
4
|
+
.hero-unit {
|
|
5
|
+
padding: 60px;
|
|
6
|
+
margin-bottom: 30px;
|
|
7
|
+
background-color: #f5f5f5;
|
|
8
|
+
@include border-radius(6px);
|
|
9
|
+
h1 {
|
|
10
|
+
margin-bottom: 0;
|
|
11
|
+
font-size: 60px;
|
|
12
|
+
line-height: 1;
|
|
13
|
+
letter-spacing: -1px;
|
|
14
|
+
}
|
|
15
|
+
p {
|
|
16
|
+
font-size: 18px;
|
|
17
|
+
font-weight: 200;
|
|
18
|
+
line-height: $baseLineHeight * 1.5;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
// LABELS
|
|
2
|
+
// ------
|
|
3
|
+
|
|
4
|
+
// Base
|
|
5
|
+
.label {
|
|
6
|
+
padding: 2px 4px 3px;
|
|
7
|
+
font-size: $baseFontSize * .85;
|
|
8
|
+
font-weight: bold;
|
|
9
|
+
color: $white;
|
|
10
|
+
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
|
11
|
+
background-color: $grayLight;
|
|
12
|
+
@include border-radius(3px);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// Hover state
|
|
16
|
+
.label:hover {
|
|
17
|
+
color: $white;
|
|
18
|
+
text-decoration: none;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
// Colors
|
|
22
|
+
.label-important { background-color: $errorText; }
|
|
23
|
+
.label-important:hover { background-color: darken($errorText, 10%); }
|
|
24
|
+
|
|
25
|
+
.label-warning { background-color: $orange; }
|
|
26
|
+
.label-warning:hover { background-color: darken($orange, 10%); }
|
|
27
|
+
|
|
28
|
+
.label-success { background-color: $successText; }
|
|
29
|
+
.label-success:hover { background-color: darken($successText, 10%); }
|
|
30
|
+
|
|
31
|
+
.label-info { background-color: $infoText; }
|
|
32
|
+
.label-info:hover { background-color: darken($infoText, 10%); }
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Layouts
|
|
3
|
+
// Fixed-width and fluid (with sidebar) layouts
|
|
4
|
+
// --------------------------------------------
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
// Container (centered, fixed-width layouts)
|
|
8
|
+
.container {
|
|
9
|
+
@include container-fixed();
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
// Fluid layouts (left aligned, with sidebar, min- & max-width content)
|
|
13
|
+
.container-fluid {
|
|
14
|
+
padding-left: $gridGutterWidth;
|
|
15
|
+
padding-right: $gridGutterWidth;
|
|
16
|
+
@include clearfix();
|
|
17
|
+
}
|
|
@@ -0,0 +1,602 @@
|
|
|
1
|
+
// Mixins.scss
|
|
2
|
+
// Snippets of reusable CSS to develop faster and keep code readable
|
|
3
|
+
// -----------------------------------------------------------------
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
// UTILITY MIXINS
|
|
7
|
+
// --------------------------------------------------
|
|
8
|
+
|
|
9
|
+
// Clearfix
|
|
10
|
+
// --------
|
|
11
|
+
// For clearing floats like a boss h5bp.com/q
|
|
12
|
+
@mixin clearfix() {
|
|
13
|
+
*zoom: 1;
|
|
14
|
+
&:before,
|
|
15
|
+
&:after {
|
|
16
|
+
display: table;
|
|
17
|
+
content: "";
|
|
18
|
+
}
|
|
19
|
+
&:after {
|
|
20
|
+
clear: both;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// Webkit-style focus
|
|
25
|
+
// ------------------
|
|
26
|
+
@mixin tab-focus() {
|
|
27
|
+
// Default
|
|
28
|
+
outline: thin dotted #333;
|
|
29
|
+
// Webkit
|
|
30
|
+
outline: 5px auto -webkit-focus-ring-color;
|
|
31
|
+
outline-offset: -2px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
// Center-align a block level element
|
|
35
|
+
// ----------------------------------
|
|
36
|
+
@mixin center-block() {
|
|
37
|
+
display: block;
|
|
38
|
+
margin-left: auto;
|
|
39
|
+
margin-right: auto;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// IE7 inline-block
|
|
43
|
+
// ----------------
|
|
44
|
+
@mixin ie7-inline-block() {
|
|
45
|
+
*display: inline; /* IE7 inline-block hack */
|
|
46
|
+
*zoom: 1;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
// IE7 likes to collapse whitespace on either side of the inline-block elements.
|
|
50
|
+
// Ems because we're attempting to match the width of a space character. Left
|
|
51
|
+
// version is for form buttons, which typically come after other elements, and
|
|
52
|
+
// right version is for icons, which come before. Applying both is ok, but it will
|
|
53
|
+
// mean that space between those elements will be .6em (~2 space characters) in IE7,
|
|
54
|
+
// instead of the 1 space in other browsers.
|
|
55
|
+
@mixin ie7-restore-left-whitespace() {
|
|
56
|
+
*margin-left: .3em;
|
|
57
|
+
|
|
58
|
+
&:first-child {
|
|
59
|
+
*margin-left: 0;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
@mixin ie7-restore-right-whitespace() {
|
|
64
|
+
*margin-right: .3em;
|
|
65
|
+
|
|
66
|
+
&:last-child {
|
|
67
|
+
*margin-left: 0;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
// Sizing shortcuts
|
|
72
|
+
// -------------------------
|
|
73
|
+
@mixin size($height: 5px, $width: 5px) {
|
|
74
|
+
width: $width;
|
|
75
|
+
height: $height;
|
|
76
|
+
}
|
|
77
|
+
@mixin square($size: 5px) {
|
|
78
|
+
@include size($size, $size);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
// Placeholder text
|
|
82
|
+
// -------------------------
|
|
83
|
+
@mixin placeholder($color: $placeholderText) {
|
|
84
|
+
:-moz-placeholder {
|
|
85
|
+
color: $color;
|
|
86
|
+
}
|
|
87
|
+
::-webkit-input-placeholder {
|
|
88
|
+
color: $color;
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
// Text overflow
|
|
93
|
+
// -------------------------
|
|
94
|
+
// Requires inline-block or block for proper styling
|
|
95
|
+
@mixin text-overflow() {
|
|
96
|
+
overflow: hidden;
|
|
97
|
+
text-overflow: ellipsis;
|
|
98
|
+
white-space: nowrap;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
// FONTS
|
|
104
|
+
// --------------------------------------------------
|
|
105
|
+
|
|
106
|
+
// Font Stacks
|
|
107
|
+
@mixin font-family-serif {
|
|
108
|
+
font-family: Georgia, "Times New Roman", Times, serif;
|
|
109
|
+
}
|
|
110
|
+
@mixin font-family-sans-serif {
|
|
111
|
+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
112
|
+
}
|
|
113
|
+
@mixin font-family-monospace {
|
|
114
|
+
font-family: Menlo, Monaco, "Courier New", monospace;
|
|
115
|
+
}
|
|
116
|
+
@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
|
117
|
+
font-size: $size;
|
|
118
|
+
font-weight: $weight;
|
|
119
|
+
line-height: $lineHeight;
|
|
120
|
+
}
|
|
121
|
+
@mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
|
122
|
+
@include font-family-serif;
|
|
123
|
+
@include font-shorthand($size, $weight, $lineHeight);
|
|
124
|
+
}
|
|
125
|
+
@mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
|
126
|
+
@include font-family-sans-serif;
|
|
127
|
+
@include font-shorthand($size, $weight, $lineHeight);
|
|
128
|
+
}
|
|
129
|
+
@mixin font-monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) {
|
|
130
|
+
@include font-family-monospace;
|
|
131
|
+
@include font-shorthand($size, $weight, $lineHeight);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
// GRID SYSTEM
|
|
137
|
+
// --------------------------------------------------
|
|
138
|
+
|
|
139
|
+
// Site container
|
|
140
|
+
// -------------------------
|
|
141
|
+
@mixin container-fixed() {
|
|
142
|
+
width: $gridRowWidth;
|
|
143
|
+
margin-left: auto;
|
|
144
|
+
margin-right: auto;
|
|
145
|
+
@include clearfix();
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
// Le grid system
|
|
149
|
+
// -------------------------
|
|
150
|
+
@mixin gridSystem-columns ($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
|
|
151
|
+
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
|
|
152
|
+
}
|
|
153
|
+
@mixin gridSystem-offset($gridColumnWidth, $gridGutterWidth, $columns) {
|
|
154
|
+
margin-left: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1)) + ($gridGutterWidth * 2);
|
|
155
|
+
}
|
|
156
|
+
@mixin gridSystem-gridColumn($gridGutterWidth) {
|
|
157
|
+
float: left;
|
|
158
|
+
margin-left: $gridGutterWidth;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
// Take these values and mixins, and make 'em do their thang
|
|
162
|
+
@mixin gridSystem-generate($gridColumns, $gridColumnWidth, $gridGutterWidth) {
|
|
163
|
+
// Row surrounds the columns
|
|
164
|
+
.row {
|
|
165
|
+
margin-left: $gridGutterWidth * -1;
|
|
166
|
+
@include clearfix();
|
|
167
|
+
}
|
|
168
|
+
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks $dhg)
|
|
169
|
+
[class*="span"] {
|
|
170
|
+
@include gridSystem-gridColumn($gridGutterWidth);
|
|
171
|
+
}
|
|
172
|
+
// Default columns
|
|
173
|
+
.span1 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 1); }
|
|
174
|
+
.span2 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 2); }
|
|
175
|
+
.span3 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 3); }
|
|
176
|
+
.span4 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 4); }
|
|
177
|
+
.span5 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 5); }
|
|
178
|
+
.span6 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 6); }
|
|
179
|
+
.span7 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 7); }
|
|
180
|
+
.span8 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 8); }
|
|
181
|
+
.span9 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 9); }
|
|
182
|
+
.span10 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 10); }
|
|
183
|
+
.span11 { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 11); }
|
|
184
|
+
.span12,
|
|
185
|
+
.container { @include gridSystem-columns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 12); }
|
|
186
|
+
// Offset column options
|
|
187
|
+
.offset1 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 1); }
|
|
188
|
+
.offset2 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 2); }
|
|
189
|
+
.offset3 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 3); }
|
|
190
|
+
.offset4 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 4); }
|
|
191
|
+
.offset5 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 5); }
|
|
192
|
+
.offset6 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 6); }
|
|
193
|
+
.offset7 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 7); }
|
|
194
|
+
.offset8 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 8); }
|
|
195
|
+
.offset9 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 9); }
|
|
196
|
+
.offset10 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 10); }
|
|
197
|
+
.offset11 { @include gridSystem-offset($gridColumnWidth, $gridGutterWidth, 11); }
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
// Fluid grid system
|
|
201
|
+
// -------------------------
|
|
202
|
+
@mixin fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, $columns) {
|
|
203
|
+
width: ($fluidGridColumnWidth * $columns) + ($fluidGridGutterWidth * ($columns - 1));
|
|
204
|
+
}
|
|
205
|
+
@mixin fluidGridSystem-gridColumn($fluidGridGutterWidth) {
|
|
206
|
+
float: left;
|
|
207
|
+
margin-left: $fluidGridGutterWidth;
|
|
208
|
+
}
|
|
209
|
+
// Take these values and mixins, and make 'em do their thang
|
|
210
|
+
@mixin fluidGridSystem-generate($gridColumns, $fluidGridColumnWidth, $fluidGridGutterWidth) {
|
|
211
|
+
// Row surrounds the columns
|
|
212
|
+
.row-fluid {
|
|
213
|
+
width: 100%;
|
|
214
|
+
@include clearfix();
|
|
215
|
+
|
|
216
|
+
// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks $dhg)
|
|
217
|
+
> [class*="span"] {
|
|
218
|
+
@include fluidGridSystem-gridColumn($fluidGridGutterWidth);
|
|
219
|
+
}
|
|
220
|
+
> [class*="span"]:first-child {
|
|
221
|
+
margin-left: 0;
|
|
222
|
+
}
|
|
223
|
+
// Default columns
|
|
224
|
+
> .span1 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 1); }
|
|
225
|
+
> .span2 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 2); }
|
|
226
|
+
> .span3 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 3); }
|
|
227
|
+
> .span4 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 4); }
|
|
228
|
+
> .span5 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 5); }
|
|
229
|
+
> .span6 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 6); }
|
|
230
|
+
> .span7 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 7); }
|
|
231
|
+
> .span8 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 8); }
|
|
232
|
+
> .span9 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 9); }
|
|
233
|
+
> .span10 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 10); }
|
|
234
|
+
> .span11 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 11); }
|
|
235
|
+
> .span12 { @include fluidGridSystem-columns($fluidGridGutterWidth, $fluidGridColumnWidth, 12); }
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
|
|
240
|
+
|
|
241
|
+
// Input grid system
|
|
242
|
+
// -------------------------
|
|
243
|
+
|
|
244
|
+
@mixin inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, $columns) {
|
|
245
|
+
width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 10;
|
|
246
|
+
}
|
|
247
|
+
@mixin inputGridSystem-generate($gridColumns, $gridColumnWidth, $gridGutterWidth) {
|
|
248
|
+
input,
|
|
249
|
+
textarea,
|
|
250
|
+
.uneditable-input {
|
|
251
|
+
&.span1 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 1); }
|
|
252
|
+
&.span2 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 2); }
|
|
253
|
+
&.span3 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 3); }
|
|
254
|
+
&.span4 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 4); }
|
|
255
|
+
&.span5 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 5); }
|
|
256
|
+
&.span6 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 6); }
|
|
257
|
+
&.span7 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 7); }
|
|
258
|
+
&.span8 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 8); }
|
|
259
|
+
&.span9 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 9); }
|
|
260
|
+
&.span10 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 10); }
|
|
261
|
+
&.span11 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 11); }
|
|
262
|
+
&.span12 { @include inputGridSystem-inputColumns($gridGutterWidth, $gridColumnWidth, $gridRowWidth, 12); }
|
|
263
|
+
}
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
// Make a Grid
|
|
267
|
+
// -------------------------
|
|
268
|
+
// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior
|
|
269
|
+
@mixin makeRow() {
|
|
270
|
+
margin-left: $gridGutterWidth * -1;
|
|
271
|
+
@include clearfix();
|
|
272
|
+
}
|
|
273
|
+
@mixin makeColumn($columns: 1) {
|
|
274
|
+
float: left;
|
|
275
|
+
margin-left: $gridGutterWidth;
|
|
276
|
+
width: ($gridColumnWidth * $columns) + ($gridGutterWidth * ($columns - 1));
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
|
|
280
|
+
// FORMS
|
|
281
|
+
// --------------------------------------------------
|
|
282
|
+
|
|
283
|
+
// Block level inputs
|
|
284
|
+
// This is also a class, defined at the bottom of the file
|
|
285
|
+
@mixin input-block-level() {
|
|
286
|
+
display: block;
|
|
287
|
+
width: 100%;
|
|
288
|
+
min-height: 28px; // Make inputs at least the height of their button counterpart
|
|
289
|
+
@include box-sizing(border-box); // Makes inputs behave like true block-level elements
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
|
|
293
|
+
// Form field states (used in forms.scss)
|
|
294
|
+
// --------------------------------------------------
|
|
295
|
+
|
|
296
|
+
// Mixin for form field states
|
|
297
|
+
@mixin formFieldState($textColor: #555, $borderColor: #ccc, $backgroundColor: #f5f5f5) {
|
|
298
|
+
// Set the text color
|
|
299
|
+
> label,
|
|
300
|
+
.help-block,
|
|
301
|
+
.help-inline {
|
|
302
|
+
color: $textColor;
|
|
303
|
+
}
|
|
304
|
+
// Style inputs accordingly
|
|
305
|
+
input,
|
|
306
|
+
select,
|
|
307
|
+
textarea {
|
|
308
|
+
color: $textColor;
|
|
309
|
+
border-color: $borderColor;
|
|
310
|
+
&:focus {
|
|
311
|
+
border-color: darken($borderColor, 10%);
|
|
312
|
+
@include box-shadow(0 0 6px lighten($borderColor, 20%));
|
|
313
|
+
}
|
|
314
|
+
}
|
|
315
|
+
// Give a small background color for input-prepend/-append
|
|
316
|
+
.input-prepend .add-on,
|
|
317
|
+
.input-append .add-on {
|
|
318
|
+
color: $textColor;
|
|
319
|
+
background-color: $backgroundColor;
|
|
320
|
+
border-color: $textColor;
|
|
321
|
+
}
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
// Navbar vertical align
|
|
325
|
+
// -------------------------
|
|
326
|
+
// Vertically center elements in the navbar.
|
|
327
|
+
// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
|
|
328
|
+
@mixin navbarVerticalAlign($elementHeight) {
|
|
329
|
+
margin-top: ($navbarHeight - $elementHeight) / 2;
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
|
|
333
|
+
// CSS3 PROPERTIES
|
|
334
|
+
// --------------------------------------------------
|
|
335
|
+
|
|
336
|
+
// Border Radius
|
|
337
|
+
@mixin border-radius($radius: 5px) {
|
|
338
|
+
-webkit-border-radius: $radius;
|
|
339
|
+
-moz-border-radius: $radius;
|
|
340
|
+
border-radius: $radius;
|
|
341
|
+
}
|
|
342
|
+
|
|
343
|
+
// Drop shadows
|
|
344
|
+
@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
|
|
345
|
+
-webkit-box-shadow: $shadow;
|
|
346
|
+
-moz-box-shadow: $shadow;
|
|
347
|
+
box-shadow: $shadow;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
// Transitions
|
|
351
|
+
@mixin transition($transition) {
|
|
352
|
+
-webkit-transition: $transition;
|
|
353
|
+
-moz-transition: $transition;
|
|
354
|
+
-ms-transition: $transition;
|
|
355
|
+
-o-transition: $transition;
|
|
356
|
+
transition: $transition;
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
// Transformations
|
|
360
|
+
@mixin rotate($degrees) {
|
|
361
|
+
-webkit-transform: rotate($degrees);
|
|
362
|
+
-moz-transform: rotate($degrees);
|
|
363
|
+
-ms-transform: rotate($degrees);
|
|
364
|
+
-o-transform: rotate($degrees);
|
|
365
|
+
transform: rotate($degrees);
|
|
366
|
+
}
|
|
367
|
+
@mixin scale($ratio) {
|
|
368
|
+
-webkit-transform: scale($ratio);
|
|
369
|
+
-moz-transform: scale($ratio);
|
|
370
|
+
-ms-transform: scale($ratio);
|
|
371
|
+
-o-transform: scale($ratio);
|
|
372
|
+
transform: scale($ratio);
|
|
373
|
+
}
|
|
374
|
+
@mixin translate($x: 0, $y: 0) {
|
|
375
|
+
-webkit-transform: translate($x, $y);
|
|
376
|
+
-moz-transform: translate($x, $y);
|
|
377
|
+
-ms-transform: translate($x, $y);
|
|
378
|
+
-o-transform: translate($x, $y);
|
|
379
|
+
transform: translate($x, $y);
|
|
380
|
+
}
|
|
381
|
+
@mixin skew($x: 0, $y: 0) {
|
|
382
|
+
-webkit-transform: skew($x, $y);
|
|
383
|
+
-moz-transform: skew($x, $y);
|
|
384
|
+
-ms-transform: skew($x, $y);
|
|
385
|
+
-o-transform: skew($x, $y);
|
|
386
|
+
transform: skew($x, $y);
|
|
387
|
+
}
|
|
388
|
+
@mixin translate3d($x: 0, $y: 0, $z: 0) {
|
|
389
|
+
-webkit-transform: translate($x, $y, $z);
|
|
390
|
+
-moz-transform: translate($x, $y, $z);
|
|
391
|
+
-ms-transform: translate($x, $y, $z);
|
|
392
|
+
-o-transform: translate($x, $y, $z);
|
|
393
|
+
transform: translate($x, $y, $z);
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
// Background clipping
|
|
397
|
+
// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
|
|
398
|
+
@mixin background-clip($clip) {
|
|
399
|
+
-webkit-background-clip: $clip;
|
|
400
|
+
-moz-background-clip: $clip;
|
|
401
|
+
background-clip: $clip;
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
// Background sizing
|
|
405
|
+
@mixin background-size($size){
|
|
406
|
+
-webkit-background-size: $size;
|
|
407
|
+
-moz-background-size: $size;
|
|
408
|
+
-o-background-size: $size;
|
|
409
|
+
background-size: $size;
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
|
|
413
|
+
// Box sizing
|
|
414
|
+
@mixin box-sizing($boxmodel) {
|
|
415
|
+
-webkit-box-sizing: $boxmodel;
|
|
416
|
+
-moz-box-sizing: $boxmodel;
|
|
417
|
+
box-sizing: $boxmodel;
|
|
418
|
+
}
|
|
419
|
+
|
|
420
|
+
// User select
|
|
421
|
+
// For selecting text on the page
|
|
422
|
+
@mixin user-select($select) {
|
|
423
|
+
-webkit-user-select: $select;
|
|
424
|
+
-moz-user-select: $select;
|
|
425
|
+
-o-user-select: $select;
|
|
426
|
+
user-select: $select;
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
// Resize anything
|
|
430
|
+
@mixin resizable($direction: both) {
|
|
431
|
+
resize: $direction; // Options: horizontal, vertical, both
|
|
432
|
+
overflow: auto; // Safari fix
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
// CSS3 Content Columns
|
|
436
|
+
@mixin content-columns($columnCount, $columnGap: $gridColumnGutter) {
|
|
437
|
+
-webkit-column-count: $columnCount;
|
|
438
|
+
-moz-column-count: $columnCount;
|
|
439
|
+
column-count: $columnCount;
|
|
440
|
+
-webkit-column-gap: $columnGap;
|
|
441
|
+
-moz-column-gap: $columnGap;
|
|
442
|
+
column-gap: $columnGap;
|
|
443
|
+
}
|
|
444
|
+
|
|
445
|
+
// Opacity
|
|
446
|
+
@mixin opacity($opacity: 100) {
|
|
447
|
+
opacity: $opacity / 100;
|
|
448
|
+
filter: alpha(opacity=$opacity);
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
|
|
452
|
+
|
|
453
|
+
// BACKGROUNDS
|
|
454
|
+
// --------------------------------------------------
|
|
455
|
+
|
|
456
|
+
// Add an alphatransparency value to any background or border color (via Elyse Holladay)
|
|
457
|
+
@mixin translucent-background($color: $white, $alpha: 1) {
|
|
458
|
+
background-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
|
459
|
+
}
|
|
460
|
+
@mixin translucent-border($color: $white, $alpha: 1) {
|
|
461
|
+
border-color: hsla(hue($color), saturation($color), lightness($color), $alpha);
|
|
462
|
+
@include background-clip(padding-box);
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
|
|
466
|
+
|
|
467
|
+
// Gradients
|
|
468
|
+
@mixin gradient-horizontal($startColor: #555, $endColor: #333) {
|
|
469
|
+
background-color: $endColor;
|
|
470
|
+
background-image: -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
|
|
471
|
+
background-image: -ms-linear-gradient(left, $startColor, $endColor); // IE10
|
|
472
|
+
background-image: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
|
|
473
|
+
background-image: -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
|
474
|
+
background-image: -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
|
|
475
|
+
background-image: linear-gradient(left, $startColor, $endColor); // Le standard
|
|
476
|
+
background-repeat: repeat-x;
|
|
477
|
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=1), $startColor, $endColor; // IE9 and down
|
|
478
|
+
}
|
|
479
|
+
@mixin gradient-vertical($startColor: #555, $endColor: #333) {
|
|
480
|
+
background-color: mix($startColor, $endColor, 60%);
|
|
481
|
+
background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
|
|
482
|
+
background-image: -ms-linear-gradient(top, $startColor, $endColor); // IE10
|
|
483
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
|
|
484
|
+
background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
|
485
|
+
background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
|
|
486
|
+
background-image: linear-gradient(top, $startColor, $endColor); // The standard
|
|
487
|
+
background-repeat: repeat-x;
|
|
488
|
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0),$startColor,$endColor; // IE9 and down
|
|
489
|
+
}
|
|
490
|
+
@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) {
|
|
491
|
+
background-color: $endColor;
|
|
492
|
+
background-repeat: repeat-x;
|
|
493
|
+
background-image: -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
|
|
494
|
+
background-image: -ms-linear-gradient($deg, $startColor, $endColor); // IE10
|
|
495
|
+
background-image: -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
|
496
|
+
background-image: -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
|
|
497
|
+
background-image: linear-gradient($deg, $startColor, $endColor); // The standard
|
|
498
|
+
}
|
|
499
|
+
@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) {
|
|
500
|
+
background-color: mix($midColor, $endColor, 80%);
|
|
501
|
+
background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor));
|
|
502
|
+
background-image: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
|
503
|
+
background-image: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor);
|
|
504
|
+
background-image: -ms-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
|
505
|
+
background-image: -o-linear-gradient($startColor, $midColor $colorStop, $endColor);
|
|
506
|
+
background-image: linear-gradient($startColor, $midColor $colorStop, $endColor);
|
|
507
|
+
background-repeat: no-repeat;
|
|
508
|
+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$startColor}', endColorstr='#{$endColor}', GradientType=0), $startColor, $endColor; // IE9 and down, gets no color-stop at all the proper fallback
|
|
509
|
+
}
|
|
510
|
+
@mixin gradient-radial($innerColor: #555, $outerColor: #333) {
|
|
511
|
+
background-color: $outerColor;
|
|
512
|
+
background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor));
|
|
513
|
+
background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor);
|
|
514
|
+
background-image: -moz-radial-gradient(circle, $innerColor, $outerColor);
|
|
515
|
+
background-image: -ms-radial-gradient(circle, $innerColor, $outerColor);
|
|
516
|
+
background-repeat: no-repeat;
|
|
517
|
+
// Opera cannot do radial gradients yet
|
|
518
|
+
}
|
|
519
|
+
@mixin gradient-striped($color,$angle: -45deg) {
|
|
520
|
+
background-color: $color;
|
|
521
|
+
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent));
|
|
522
|
+
background-image: -webkit-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
|
|
523
|
+
background-image: -moz-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
|
|
524
|
+
background-image: -ms-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
|
|
525
|
+
background-image: -o-linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
|
|
526
|
+
//background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent);
|
|
527
|
+
}
|
|
528
|
+
|
|
529
|
+
// Gradient Bar Colors for buttons and alerts
|
|
530
|
+
@mixin gradientBar($primaryColor, $secondaryColor) {
|
|
531
|
+
@include gradient-vertical($primaryColor, $secondaryColor);
|
|
532
|
+
border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%);
|
|
533
|
+
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fade-in(rgba(0,0,0,.1), 0.15);
|
|
534
|
+
}
|
|
535
|
+
|
|
536
|
+
// Reset filters for IE
|
|
537
|
+
@mixin reset-filter() {
|
|
538
|
+
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
|
539
|
+
}
|
|
540
|
+
|
|
541
|
+
// Mixin for generating button backgrounds
|
|
542
|
+
// ---------------------------------------
|
|
543
|
+
@mixin buttonBackground($startColor, $endColor) {
|
|
544
|
+
// gradientBar will set the background to a pleasing blend of these, to support IE<=9
|
|
545
|
+
@include gradientBar($startColor, $endColor);
|
|
546
|
+
@include reset-filter();
|
|
547
|
+
|
|
548
|
+
// in these cases the gradient won't cover the background, so we override
|
|
549
|
+
&:hover, &:active, &.active, &.disabled, &[disabled] {
|
|
550
|
+
background-color: $endColor;
|
|
551
|
+
}
|
|
552
|
+
|
|
553
|
+
// IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves
|
|
554
|
+
&:active,
|
|
555
|
+
&.active {
|
|
556
|
+
background-color: darken($endColor, 10%) #{"\9"};
|
|
557
|
+
}
|
|
558
|
+
}
|
|
559
|
+
|
|
560
|
+
|
|
561
|
+
// COMPONENT MIXINS
|
|
562
|
+
// --------------------------------------------------
|
|
563
|
+
|
|
564
|
+
// POPOVER ARROWS
|
|
565
|
+
// -------------------------
|
|
566
|
+
// For tipsies and popovers
|
|
567
|
+
@mixin popoverArrow-top($arrowWidth: 5px) {
|
|
568
|
+
bottom: 0;
|
|
569
|
+
left: 50%;
|
|
570
|
+
margin-left: -$arrowWidth;
|
|
571
|
+
border-left: $arrowWidth solid transparent;
|
|
572
|
+
border-right: $arrowWidth solid transparent;
|
|
573
|
+
border-top: $arrowWidth solid $black;
|
|
574
|
+
}
|
|
575
|
+
@mixin popoverArrow-left($arrowWidth: 5px) {
|
|
576
|
+
top: 50%;
|
|
577
|
+
right: 0;
|
|
578
|
+
margin-top: -$arrowWidth;
|
|
579
|
+
border-top: $arrowWidth solid transparent;
|
|
580
|
+
border-bottom: $arrowWidth solid transparent;
|
|
581
|
+
border-left: $arrowWidth solid $black;
|
|
582
|
+
}
|
|
583
|
+
@mixin popoverArrow-bottom($arrowWidth: 5px) {
|
|
584
|
+
top: 0;
|
|
585
|
+
left: 50%;
|
|
586
|
+
margin-left: -$arrowWidth;
|
|
587
|
+
border-left: $arrowWidth solid transparent;
|
|
588
|
+
border-right: $arrowWidth solid transparent;
|
|
589
|
+
border-bottom: $arrowWidth solid $black;
|
|
590
|
+
}
|
|
591
|
+
@mixin popoverArrow-right($arrowWidth: 5px) {
|
|
592
|
+
top: 50%;
|
|
593
|
+
left: 0;
|
|
594
|
+
margin-top: -$arrowWidth;
|
|
595
|
+
border-top: $arrowWidth solid transparent;
|
|
596
|
+
border-bottom: $arrowWidth solid transparent;
|
|
597
|
+
border-right: $arrowWidth solid $black;
|
|
598
|
+
}
|
|
599
|
+
|
|
600
|
+
.input-block-level {
|
|
601
|
+
@include input-block-level;
|
|
602
|
+
}
|