diff --git a/README.md b/README.md index cdfa8817..f4c983b9 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,18 @@ #Responsive -##A super lightweight HTML, CSS, and JavaScript framework for building responsive websites +##A super lightweight HTML, SASS, CSS, and JavaScript framework for building responsive websites -###Bootstrap and Foundation are too heavy. +###Responsive is the developers framework. +Frameworks like Bootstrap and Foundation are too design opinionated and heavy. They're great for prototyping but every time +you start a real, front-facing, project with them you have to overwrite lots of designer styles that do nothing to add to the +functionality of the website. That costs developers time and money. -They're great for prototyping but every time you start a real, front-facing, project with them you have to overwrite lots of designer styles that do nothing to add to the functionality of the website. That's annoying! - -**Responsive** has been built with that in mind. It has been specifically designed and coded to be as lightweight as possible to prevent the need to undo styles set by the framework itself and allow developers to write efficient code and speed up development time. - -**Responsive** is tiny. The combined CSS and JavaScript is **only 20.6kb minified and gzipped** but there is a lot of functionality built into the framework. It's designed to be dropped-in, as-is to your website such as you would with [Normalize.css](http://necolas.github.io/normalize.css/). +**Responsive** has been built with that in mind. It is the result of thousands of hours of real, client driven web development and +testing; specifically developed to be as lightweight as possible to prevent the need to undo styles set by the framework itself +and allow developers to write efficient code and lower costs. + +**Responsive** is tiny. The combined output CSS and JavaScript is **only 24.8kb minified and gzipped** but there is a lot of functionality +built into the framework with touch, right-to-left language, and accessibility support. It's designed to be dropped-in, as-is to your website such as you would with [Normalize.css](http://necolas.github.io/normalize.css/). Browser support covers IE8+ as well as all other modern browsers. @@ -16,9 +20,9 @@ Browser support covers IE8+ as well as all other modern browsers. Responsives' documentation, included in the [gh-pages](https://github.com/ResponsiveBP/Responsive/tree/gh-pages) repo. It is built with [Jekyll](http://jekyllrb.com) and publicly hosted on GitHub Pages at [http://responsivebp.com](http://responsivebp.com). The docs may also be run locally. -1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation) (requires v1.5). +1. If necessary, [install Jekyll](http://jekyllrb.com/docs/installation) (requires v2.2). - **If you are running Windows** please read this [unofficial guide](https://github.com/juthilo/run-jekyll-on-windows/) to get Jekyll up and running without problems. -2. From the root `/Responsive` directory, run `jekyll serve --baseurl '' --watch` in the command line. +2. From the root `/Responsive` directory, run `jekyll serve --watch` in the command line. - Open [http://localhost:4000](http://localhost:4000) in your browser to view the compiled docs. @@ -28,9 +32,9 @@ Learn more about using Jekyll by reading its [documentation](http://jekyllrb.com Contribution is most welcome, that's the whole idea! Together as a community we can build a boilerplate for building responsive sites that will ensure that high standards can be delivered across all devices. -Please adhere to existing JavaScript and CSS styles though when submitting code and ensure that you test thoroughly on multiple devices, we don't want another Semicolongate ;) +Please adhere to existing JavaScript and SASS styles though when submitting code and ensure that you test thoroughly on multiple devices, we don't want another Semicolongate ;) -##Building the CSS and Javascript +##Building the SASS and Javascript The build process for Responsive is powered by [gulpjs](http://gulpjs.com/). To build Responsive you will need to first install the required plugins using the following commands from the root `/Responsive` directory: diff --git a/bower.json b/bower.json index 856d0066..ab418537 100644 --- a/bower.json +++ b/bower.json @@ -1,14 +1,12 @@ { "name": "responsive", - "version": "2.5.7", + "version": "3.0.0", "homepage": "http://responsivebp.com", "authors": [ "James South" ], "license": "MIT", "main": [ - "./build/responsive.ie10mobilefix.js", - "./build/responsive.ie10mobilefix.min.js", "./build/responsive.js", "./build/responsive.min.js", "./build/responsive.css", @@ -25,8 +23,8 @@ ], "dependencies": { "html5shiv": "3.7.2", - "jquery": "2.1.0", - "jquery-legacy": "jquery#1.11", + "jquery": "2.1.1", + "jquery-legacy": "jquery#1.11.1", "respond": "1.4.2" } -} +} \ No newline at end of file diff --git a/build/responsive.css b/build/responsive.css index a703bc87..0060b188 100644 --- a/build/responsive.css +++ b/build/responsive.css @@ -1,41 +1,38 @@ -/* ==|== Responsive ============================================================= - Author: James South - twitter : http://twitter.com/James_M_South - github : https://github.com/ResponsiveBP/Responsive - Copyright (c), James South. - Licensed under the MIT License. - ============================================================================== */ - -/*! Responsive v2.5.7 | MIT License | responsivebp.com */ -/*! normalize.css v3.0.0 | MIT License | git.io/normalize */ - +/** ==|== Responsive ============================================================= + Author: James South + twitter : http://twitter.com/James_M_South + github : https://github.com/ResponsiveBP/Responsive + Copyright (c), James South. + Licensed under the MIT License. + ============================================================================== */ +/*! Responsive v3.0.0 | MIT License | responsivebp.com */ +/*! normalize.css v3.0.1 | MIT License | git.io/normalize */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ - html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} + font-family: sans-serif; + /* 1 */ + -ms-text-size-adjust: 100%; + /*2 */ + -webkit-text-size-adjust: 100%; + /*2 */ } /** * Remove default margin. */ - body { - margin: 0; -} + margin: 0; } -/* HTML5 display definitions +/**HTML5 display definitions ========================================================================== */ - /** - * Correct `block` display not defined in IE 8/9. + * Correct `block` display not defined for any HTML5 element in IE 8/9. + * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. + * Correct `block` display not defined for `main` in IE 11. */ - article, aside, details, @@ -48,241 +45,194 @@ main, nav, section, summary { - display: block; -} + display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ - audio, canvas, progress, video { - display: inline-block; /* 1 */ - vertical-align: baseline; /* 2 */ -} + display: inline-block; + /* 1 */ + vertical-align: baseline; + /*2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ - audio:not([controls]) { display: none; - height: 0; -} + height: 0; } /** - * Address `[hidden]` styling not present in IE 8/9. - * Hide the `template` element in IE, Safari, and Firefox < 22. + * Address `[hidden]` styling not present in IE 8/9/10. + * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */ - [hidden], template { - display: none; -} + display: none; } -/* Links +/**Links ========================================================================== */ - /** * Remove the gray background color from active links in IE 10. */ - a { - background: transparent; -} + background: transparent; } /** * Improve readability when focused and also mouse hovered in all browsers. */ - a:active, a:hover { - outline: 0; -} + outline: 0; } -/* Text-level semantics +/**Text-level semantics ========================================================================== */ - /** - * Address styling not present in IE 8/9, Safari 5, and Chrome. + * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ - abbr[title] { - border-bottom: 1px dotted; -} + border-bottom: 1px dotted; } /** - * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ - b, strong { - font-weight: bold; -} + font-weight: bold; } /** - * Address styling not present in Safari 5 and Chrome. + * Address styling not present in Safari and Chrome. */ - dfn { - font-style: italic; -} + font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari 5, and Chrome. + * contexts in Firefox 4+, Safari, and Chrome. */ - h1 { font-size: 2em; - margin: 0.67em 0; -} + margin: 0.67em 0; } /** * Address styling not present in IE 8/9. */ - mark { background: #ff0; - color: #000; -} + color: #000; } /** * Address inconsistent and variable font size in all browsers. */ - small { - font-size: 80%; -} + font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ - sub, sup { font-size: 75%; line-height: 0; position: relative; - vertical-align: baseline; -} + vertical-align: baseline; } sup { - top: -0.5em; -} + top: -0.5em; } sub { - bottom: -0.25em; -} + bottom: -0.25em; } -/* Embedded content +/**Embedded content ========================================================================== */ - /** - * Remove border when inside `a` element in IE 8/9. + * Remove border when inside `a` element in IE 8/9/10. */ - img { - border: 0; -} + border: 0; } /** - * Correct overflow displayed oddly in IE 9. + * Correct overflow not hidden in IE 9/10/11. */ - svg:not(:root) { - overflow: hidden; -} + overflow: hidden; } -/* Grouping content +/**Grouping content ========================================================================== */ - /** - * Address margin not present in IE 8/9 and Safari 5. + * Address margin not present in IE 8/9 and Safari. */ - figure { - margin: 1em 40px; -} + margin: 1em 40px; } /** * Address differences between Firefox and other browsers. */ - hr { - -moz-box-sizing: content-box; box-sizing: content-box; - height: 0; -} + height: 0; } /** * Contain overflow in all browsers. */ - pre { - overflow: auto; -} + overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ - code, kbd, pre, samp { font-family: monospace, monospace; - font-size: 1em; -} + font-size: 1em; } -/* Forms +/**Forms ========================================================================== */ - /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ - /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. - * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. + * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ - button, input, optgroup, select, textarea { - color: inherit; /* 1 */ - font: inherit; /* 2 */ - margin: 0; /* 3 */ -} + color: inherit; + /* 1 */ + font: inherit; + /*2 */ + margin: 0; + /* 3 */ } /** - * Address `overflow` set to `hidden` in IE 8/9/10. + * Address `overflow` set to `hidden` in IE 8/9/10/11. */ - button { - overflow: visible; -} + overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Firefox, IE 8+, and Opera + * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ - button, select { - text-transform: none; -} + text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` @@ -291,42 +241,36 @@ select { * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ - button, -html input[type="button"], /* 1 */ +html input[type="button"], input[type="reset"], input[type="submit"] { - -webkit-appearance: button; /* 2 */ - cursor: pointer; /* 3 */ -} + -webkit-appearance: button; + /*2 */ + cursor: pointer; + /* 3 */ } /** * Re-set default cursor for disabled elements. */ - button[disabled], html input[disabled] { - cursor: default; -} + cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ - button::-moz-focus-inner, input::-moz-focus-inner { border: 0; - padding: 0; -} + padding: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ - input { - line-height: normal; -} + line-height: normal; } /** * It's recommended that you don't attempt to style these elements. @@ -335,2493 +279,2639 @@ input { * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ - input[type="checkbox"], input[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} + box-sizing: border-box; + /* 1 */ + padding: 0; + /*2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ - input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { - height: auto; -} + height: auto; } /** - * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * 1. Address `appearance` set to `searchfield` in Safari and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari and Chrome * (include `-moz` to future-proof). */ - input[type="search"] { - -webkit-appearance: textfield; /* 1 */ - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; /* 2 */ - box-sizing: content-box; -} + -webkit-appearance: textfield; + /* 1 */ + /*2 */ + box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ - input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} + -webkit-appearance: none; } /** * Define consistent border, margin, and padding. */ - fieldset { border: 1px solid #c0c0c0; margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} + padding: 0.35em 0.625em 0.75em; } /** - * 1. Correct `color` not being inherited in IE 8/9. + * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ - legend { - border: 0; /* 1 */ - padding: 0; /* 2 */ -} + border: 0; + /* 1 */ + padding: 0; + /*2 */ } /** - * Remove default vertical scrollbar in IE 8/9. + * Remove default vertical scrollbar in IE 8/9/10/11. */ - textarea { - overflow: auto; -} + overflow: auto; } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ - optgroup { - font-weight: bold; -} + font-weight: bold; } -/* Tables +/**Tables ========================================================================== */ - /** * Remove most spacing between table cells. */ - table { border-collapse: collapse; - border-spacing: 0; -} + border-spacing: 0; } td, th { - padding: 0; -} -/* + padding: 0; } + +/** + * 1. Use the iOS devices hardware accelerator to provide native scrolling. + */ +html { + -webkit-overflow-scrolling: touch; + /* 1 */ + color: #222222; + font-size: 100%; + line-height: 1.4; + box-sizing: border-box; } + +/** * Fix the box model * Overwrite Normalize rather than edit it. */ -*, *:before, *:after, -hr, input[type="search"] { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} +*, :before, :after, +hr, input[type=search] { + box-sizing: inherit; } -/* - * IE10 in Windows (Phone) 8 - * Support for responsive views via media queries do not work in IE10 on mobile for - * versions prior to WP8 Update 3 (GDR3). - */ -@-ms-viewport { - width: device-width; -} +a:focus, area:focus, button:focus, input:focus, object:focus, select:focus, textarea:focus, [tabindex]:focus, .carousel > figure:focus:before { + outline: 2px solid #4d90fe; + outline-offset: -1px; } -/* - * 1. Use the iOS devices hardware accelerator to provide native scrolling. +/** + * Set a focus on elements that can recieve it. + * http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex */ -html { - -webkit-overflow-scrolling: touch; /* 1 */ - font-size: 100%; - line-height: 1.4; - color: #222; -} +/** + * Suppress the focus outline on links that cannot be accessed via keyboard. + * This prevents an unwanted focus outline from appearing around elements that + * might still respond to pointer events. + */ +[tabindex="-1"]:focus { + outline: none !important; } -/* +/** * Headers * 1: Improve rendering of screen fonts. * 2: Prevent page breaking. */ h1, h2, h3, h4, h5, h6 { - text-rendering: optimizeLegibility; /* 1 */ - page-break-after: avoid; /* 2 */ -} + text-rendering: optimizeLegibility; + /* 1 */ + page-break-after: avoid; + /*2 */ } -/* +/** * Remove text-shadow in selection highlight: h5bp.com/i * These selection rule sets have to be separate. * Customize the background colour to match your design. */ - ::-moz-selection { - background: #b3d4fc; - text-shadow: none; -} + background: #b3d4fc; + text-shadow: none; } ::selection { - background: #b3d4fc; - text-shadow: none; -} + background: #b3d4fc; + text-shadow: none; } -/* +/** * A better looking default horizontal rule */ - hr { - display: block; - height: 1px; - border: 0; - border-top: 1px solid #c0c0c0; - margin: 1em 0; - padding: 0; -} + display: block; + height: 1px; + border: 0; + border-top: 1px solid silver; + margin: 1em 0; + padding: 0; } -/* +/** * Add query indicator to abbr */ abbr { - cursor: help; -} -.container { - margin: 0 auto; - /* Manages width in a single place */ - width: 95%; - max-width: 1140px; -} - - .fixed .container, - .container.fixed { - /* Manages width in a single place */ - width: 1140px; - } + cursor: help; } + +/**Manages width in a single place */ +.container, .modal-ajax.container, +.modal-iframe { + margin: 0 auto; + max-width: 1140px; + width: 95%; } + .container.fixed, + .fixed.modal-iframe, .fixed .container, + .fixed .modal-iframe { + width: 1140px; } + +/**Columns */ +[class*=col-] { + display: block; + width: 100%; + float: left; + min-height: 1px; } + [dir="rtl"] [class*=col-] { + float: right; } + [class*=col-][class*=offset], [class*=col-][class*=push], [class*=col-][class*=pull] { + position: relative; } + +.no-gutter.pad-gutter > [class*=col-] { + padding: 0 1%; } /* - * Clearfix: contain floats + * Extra small */ -.row:before, -.row:after { - content: ""; - display: table; -} - -.row:after { +@media (max-width: 47.99em) { + [class*=col-].reset-xs-only { clear: both; -} - -/*cols*/ -[class*="col-"] { - position: relative; - display: block; - min-height: 1px; - float: left; - width: 100%; -} - -.row [class*="col-"] + [class*="col-"] { - margin-left: 2%; -} - -.row.no-gutter > [class*="col-"] + [class*="col-"], -.row [class*="col-"] + [class*="col-s"], -.row [class*="col-"] + [class*="col-m"], -.row [class*="col-"] + [class*="col-l"] { + margin-left: 0 !important; } + [dir="rtl"] [class*=col-].reset-xs-only { + margin-right: 0 !important; } } +[class*=col-xs] + [class*=col-xs] { + margin-left: 2%; } + [dir="rtl"] [class*=col-xs] + [class*=col-xs] { margin-left: 0; -} + margin-right: 2%; } -.row [class*="col-xs"] + [class*="col-"] { - margin-left: 2%; -} - -.row [class*="col-xs-12"] + [class*="col-xs-"], -.row [class*="col-xs-"] + [class*="col-xs-12"] { +.no-gutter > [class*=col-xs] { + margin-left: 0; } + [dir="rtl"] .no-gutter > [class*=col-xs] { margin-left: 0; -} - -.row.no-gutter.pad-gutter > [class*="col-"] { - padding: 0 1%; -} + margin-right: 0; } -@media (max-width: 47.99em) { - .row [class*="col-"].reset-xs-only { - margin-left: 0 !important; - clear: both; - } - - .row [class*="col-"][class*="push-xs-right-only"] { - float: right; - } -} - -.row [class*="col-"].reset-xs { - margin-left: 0 !important; - clear: both; -} +[class*=col-].reset-xs { + clear: both; + margin-left: 0 !important; } + [dir="rtl"] [class*=col-].reset-xs { + margin-right: 0 !important; } -.row [class*="col-"][class*="push-xs-right"] { - float: right; -} +.col-xs-1 { + width: 6.5%; } -/* Full width calculated with margins */ -.row [class*="col-"] + [class*="col-xs-12"], -.col-xs-12 { +.offset-xs-1 { + margin-left: 8.5%; } + [dir="rtl"] .offset-xs-1 { margin-left: 0; -} - -.col-xs-12 { - width: 100%; -} - -.col-xs-11 { - width: 91.5%; -} - -.col-xs-10 { - width: 83%; -} - -.col-xs-9 { - width: 74.5%; -} - -.col-xs-8 { - width: 66%; -} - -.col-xs-7 { - width: 57.5%; -} - -.col-xs-6 { - width: 49%; -} + margin-right: 8.5%; } -.col-xs-5 { - width: 40.5%; -} +[class*=col-] + .offset-xs-1 { + margin-left: 10.5%; } + [dir="rtl"] [class*=col-] + .offset-xs-1 { + margin-left: 0; + margin-right: 10.5%; } -.col-xs-4 { - width: 32%; -} +.push-xs-1 { + left: 8.5%; } + [dir="rtl"] .push-xs-1 { + left: auto; + right: 8.5%; } -.col-xs-3 { - width: 23.5%; -} +.pull-xs-1 { + right: 8.5%; } + [dir="rtl"] .pull-xs-1 { + right: auto; + left: 8.5%; } .col-xs-2 { - width: 15%; -} - -.col-xs-1 { - width: 6.5%; -} - -/* No gutter margins */ -.no-gutter > .col-xs-11 { - width: 91.6667%; -} - -.no-gutter > .col-xs-10 { - width: 83.3333%; -} + width: 15%; } -.no-gutter > .col-xs-9 { - width: 75%; -} +.offset-xs-2 { + margin-left: 17%; } + [dir="rtl"] .offset-xs-2 { + margin-left: 0; + margin-right: 17%; } -.no-gutter > .col-xs-8 { - width: 66.6667%; -} +[class*=col-] + .offset-xs-2 { + margin-left: 19%; } + [dir="rtl"] [class*=col-] + .offset-xs-2 { + margin-left: 0; + margin-right: 19%; } -.no-gutter > .col-xs-7 { - width: 58.3333%; -} +.push-xs-2 { + left: 17%; } + [dir="rtl"] .push-xs-2 { + left: auto; + right: 17%; } -.no-gutter > .col-xs-6 { - width: 50%; -} +.pull-xs-2 { + right: 17%; } + [dir="rtl"] .pull-xs-2 { + right: auto; + left: 17%; } -.no-gutter > .col-xs-5 { - width: 41.6667%; -} +.col-xs-3 { + width: 23.5%; } -.no-gutter > .col-xs-4 { - width: 33.3333%; -} +.offset-xs-3 { + margin-left: 25.5%; } + [dir="rtl"] .offset-xs-3 { + margin-left: 0; + margin-right: 25.5%; } -.no-gutter > .col-xs-3 { - width: 25%; -} +[class*=col-] + .offset-xs-3 { + margin-left: 27.5%; } + [dir="rtl"] [class*=col-] + .offset-xs-3 { + margin-left: 0; + margin-right: 27.5%; } -.no-gutter > .col-xs-2 { - width: 16.6667%; -} +.push-xs-3 { + left: 25.5%; } + [dir="rtl"] .push-xs-3 { + left: auto; + right: 25.5%; } -.no-gutter > .col-xs-1 { - width: 8.3333%; -} +.pull-xs-3 { + right: 25.5%; } + [dir="rtl"] .pull-xs-3 { + right: auto; + left: 25.5%; } +.col-xs-4 { + width: 32%; } -/* offsetting cols */ -.offset-xs-11 { - margin-left: 93.5%; -} +.offset-xs-4 { + margin-left: 34%; } + [dir="rtl"] .offset-xs-4 { + margin-left: 0; + margin-right: 34%; } -.row [class*="col-"] + .offset-xs-11 { - margin-left: 95.5%; -} +[class*=col-] + .offset-xs-4 { + margin-left: 36%; } + [dir="rtl"] [class*=col-] + .offset-xs-4 { + margin-left: 0; + margin-right: 36%; } -.offset-xs-10 { - margin-left: 85%; -} +.push-xs-4 { + left: 34%; } + [dir="rtl"] .push-xs-4 { + left: auto; + right: 34%; } -.row [class*="col-"] + .offset-xs-10 { - margin-left: 87%; -} +.pull-xs-4 { + right: 34%; } + [dir="rtl"] .pull-xs-4 { + right: auto; + left: 34%; } -.offset-xs-9 { - margin-left: 76.5%; -} +.col-xs-5 { + width: 40.5%; } -.row [class*="col-"] + .offset-xs-9 { - margin-left: 78.5%; -} +.offset-xs-5 { + margin-left: 42.5%; } + [dir="rtl"] .offset-xs-5 { + margin-left: 0; + margin-right: 42.5%; } -.offset-xs-8 { - margin-left: 68%; -} +[class*=col-] + .offset-xs-5 { + margin-left: 44.5%; } + [dir="rtl"] [class*=col-] + .offset-xs-5 { + margin-left: 0; + margin-right: 44.5%; } -.row [class*="col-"] + .offset-xs-8 { - margin-left: 70%; -} +.push-xs-5 { + left: 42.5%; } + [dir="rtl"] .push-xs-5 { + left: auto; + right: 42.5%; } -.offset-xs-7 { - margin-left: 59.5%; -} +.pull-xs-5 { + right: 42.5%; } + [dir="rtl"] .pull-xs-5 { + right: auto; + left: 42.5%; } -.row [class*="col-"] + .offset-xs-7 { - margin-left: 61.5%; -} +.col-xs-6 { + width: 49%; } .offset-xs-6 { - margin-left: 51%; -} - -.row [class*="col-"] + .offset-xs-6 { - margin-left: 53%; -} + margin-left: 51%; } + [dir="rtl"] .offset-xs-6 { + margin-left: 0; + margin-right: 51%; } -.offset-xs-5 { - margin-left: 42.5%; -} +[class*=col-] + .offset-xs-6 { + margin-left: 53%; } + [dir="rtl"] [class*=col-] + .offset-xs-6 { + margin-left: 0; + margin-right: 53%; } -.row [class*="col-"] + .offset-xs-5 { - margin-left: 44.5%; -} +.push-xs-6 { + left: 51%; } + [dir="rtl"] .push-xs-6 { + left: auto; + right: 51%; } -.offset-xs-4 { - margin-left: 34%; -} +.pull-xs-6 { + right: 51%; } + [dir="rtl"] .pull-xs-6 { + right: auto; + left: 51%; } -.row [class*="col-"] + .offset-xs-4 { - margin-left: 36%; -} +.col-xs-7 { + width: 57.5%; } -.offset-xs-3 { - margin-left: 25.5%; -} +.offset-xs-7 { + margin-left: 59.5%; } + [dir="rtl"] .offset-xs-7 { + margin-left: 0; + margin-right: 59.5%; } -.row [class*="col-"] + .offset-xs-3 { - margin-left: 27.5%; -} +[class*=col-] + .offset-xs-7 { + margin-left: 61.5%; } + [dir="rtl"] [class*=col-] + .offset-xs-7 { + margin-left: 0; + margin-right: 61.5%; } -.offset-xs-2 { - margin-left: 17%; -} +.push-xs-7 { + left: 59.5%; } + [dir="rtl"] .push-xs-7 { + left: auto; + right: 59.5%; } -.row [class*="col-"] + .offset-xs-2 { - margin-left: 19%; -} +.pull-xs-7 { + right: 59.5%; } + [dir="rtl"] .pull-xs-7 { + right: auto; + left: 59.5%; } -.offset-xs-1 { - margin-left: 8.5%; -} - -.row [class*="col-"] + .offset-xs-1 { - margin-left: 10.5%; -} - -/*No gutter margin*/ -.no-gutter > .offset-xs-11, -.no-gutter > [class*="col-"] + [class*="col-"].offset-xs-11 { - margin-left: 91.6667%; -} - -.no-gutter > .offset-xs-10, -.no-gutter > [class*="col-"] + [class*="col-"].offset-xs-10 { - margin-left: 83.3333%; -} - -.no-gutter > .offset-xs-9, -.no-gutter > [class*="col-"] + [class*="col-"].offset-xs-9 { - margin-left: 75%; -} - -.no-gutter > .offset-xs-8, -.no-gutter > [class*="col-"] + [class*="col-"].offset-xs-8 { - margin-left: 66.6667%; -} - -.no-gutter > .offset-xs-7, -.no-gutter > [class*="col-"] + [class*="col-"].offset-xs-7 { - margin-left: 58.3333%; -} - -.no-gutter > .offset-xs-6, -.no-gutter > [class*="col-"] + [class*="col-"].offset-xs-6 { - margin-left: 50%; -} - -.no-gutter > .offset-xs-5, -.no-gutter > [class*="col-"] + [class*="col-"].offset-xs-5 { - margin-left: 41.6667%; -} - -.no-gutter > .offset-xs-4, -.no-gutter > [class*="col-"] + [class*="col-"].offset-xs-4 { - margin-left: 33.3333%; -} - -.no-gutter > .offset-xs-3, -.no-gutter > [class*="col-"] + [class*="col-"].offset-xs-3 { - margin-left: 25%; -} - -.no-gutter > .offset-xs-2, -.no-gutter > [class*="col-"] + [class*="col-"].offset-xs-2 { - margin-left: 16.6667%; -} - -.no-gutter > .offset-xs-1, -.no-gutter > [class*="col-"] + [class*="col-"].offset-xs-1 { - margin-left: 8.3333%; -} - -/* pushing cols */ -.push-xs-11 { - left: 93.5%; -} +.col-xs-8 { + width: 66%; } -.push-xs-10 { - left: 85%; -} +.offset-xs-8 { + margin-left: 68%; } + [dir="rtl"] .offset-xs-8 { + margin-left: 0; + margin-right: 68%; } -.push-xs-9 { - left: 76.5%; -} +[class*=col-] + .offset-xs-8 { + margin-left: 70%; } + [dir="rtl"] [class*=col-] + .offset-xs-8 { + margin-left: 0; + margin-right: 70%; } .push-xs-8 { - left: 68%; -} - -.push-xs-7 { - left: 59.5%; -} - -.push-xs-6 { - left: 51%; -} - -.push-xs-5 { - left: 42.5%; -} + left: 68%; } + [dir="rtl"] .push-xs-8 { + left: auto; + right: 68%; } -.push-xs-4 { - left: 34%; -} +.pull-xs-8 { + right: 68%; } + [dir="rtl"] .pull-xs-8 { + right: auto; + left: 68%; } -.push-xs-3 { - left: 25.5%; -} +.col-xs-9 { + width: 74.5%; } -.push-xs-2 { - left: 17%; -} +.offset-xs-9 { + margin-left: 76.5%; } + [dir="rtl"] .offset-xs-9 { + margin-left: 0; + margin-right: 76.5%; } -.push-xs-1 { - left: 8.5%; -} +[class*=col-] + .offset-xs-9 { + margin-left: 78.5%; } + [dir="rtl"] [class*=col-] + .offset-xs-9 { + margin-left: 0; + margin-right: 78.5%; } -/*No gutter margin*/ -.no-gutter > .push-xs-11 { - left: 91.6667%; -} +.push-xs-9 { + left: 76.5%; } + [dir="rtl"] .push-xs-9 { + left: auto; + right: 76.5%; } -.no-gutter > .push-xs-10 { - left: 83.3333%; -} +.pull-xs-9 { + right: 76.5%; } + [dir="rtl"] .pull-xs-9 { + right: auto; + left: 76.5%; } -.no-gutter > .push-xs-9 { - left: 75%; -} +.col-xs-10 { + width: 83%; } -.no-gutter > .push-xs-8 { - left: 66.6667%; -} +.offset-xs-10 { + margin-left: 85%; } + [dir="rtl"] .offset-xs-10 { + margin-left: 0; + margin-right: 85%; } -.no-gutter > .push-xs-7 { - left: 58.3333%; -} +[class*=col-] + .offset-xs-10 { + margin-left: 87%; } + [dir="rtl"] [class*=col-] + .offset-xs-10 { + margin-left: 0; + margin-right: 87%; } -.no-gutter > .push-xs-6 { - left: 50%; -} +.push-xs-10 { + left: 85%; } + [dir="rtl"] .push-xs-10 { + left: auto; + right: 85%; } -.no-gutter > .push-xs-5 { - left: 41.6667%; -} +.pull-xs-10 { + right: 85%; } + [dir="rtl"] .pull-xs-10 { + right: auto; + left: 85%; } -.no-gutter > .push-xs-4 { - left: 33.3333%; -} +.col-xs-11 { + width: 91.5%; } -.no-gutter > .push-xs-3 { - left: 25%; -} +.offset-xs-11 { + margin-left: 93.5%; } + [dir="rtl"] .offset-xs-11 { + margin-left: 0; + margin-right: 93.5%; } -.no-gutter > .push-xs-2 { - left: 16.6667%; -} +[class*=col-] + .offset-xs-11 { + margin-left: 95.5%; } + [dir="rtl"] [class*=col-] + .offset-xs-11 { + margin-left: 0; + margin-right: 95.5%; } -.no-gutter > .push-xs-1 { - left: 8.3333%; -} +.push-xs-11 { + left: 93.5%; } + [dir="rtl"] .push-xs-11 { + left: auto; + right: 93.5%; } -/* pulling cols */ .pull-xs-11 { - right: 93.5%; -} - -.pull-xs-10 { - right: 85%; -} - -.pull-xs-9 { - right: 76.5%; -} + right: 93.5%; } + [dir="rtl"] .pull-xs-11 { + right: auto; + left: 93.5%; } -.pull-xs-8 { - right: 68%; -} +.col-xs-12 { + width: 100%; } -.pull-xs-7 { - right: 59.5%; -} - -.pull-xs-6 { - right: 51%; -} - -.pull-xs-5 { - right: 42.5%; -} - -.pull-xs-4 { - right: 34%; -} - -.pull-xs-3 { - right: 25.5%; -} - -.pull-xs-2 { - right: 17%; -} - -.pull-xs-1 { - right: 8.5%; -} - -/*No gutter margin*/ -.no-gutter > .pull-xs-11 { - right: 91.6667%; -} - -.no-gutter > .pull-xs-10 { - right: 83.3333%; -} - -.no-gutter > .pull-xs-9 { - right: 75%; -} - -.no-gutter > .pull-xs-8 { - right: 66.6667%; -} - -.no-gutter > .pull-xs-7 { - right: 58.3333%; -} - -.no-gutter > .pull-xs-6 { - right: 50%; -} - -.no-gutter > .pull-xs-5 { - right: 41.6667%; -} - -.no-gutter > .pull-xs-4 { - right: 33.3333%; -} - -.no-gutter > .pull-xs-3 { - right: 25%; -} - -.no-gutter > .pull-xs-2 { - right: 16.6667%; -} +.col-xs-12, +[class*=col-] + [class*=col-xs-12] { + margin-left: 0; } + [dir="rtl"] .col-xs-12, [dir="rtl"] + [class*=col-] + [class*=col-xs-12] { + margin-right: 0; } +.no-gutter > .col-xs-1 { + width: 8.3333%; } +.no-gutter > .offset-xs-1 { + margin-left: 8.3333%; } + [dir="rtl"] .no-gutter > .offset-xs-1 { + margin-left: 0; + margin-right: 8.3333%; } +.no-gutter > .push-xs-1 { + left: 8.3333%; } + [dir="rtl"] .no-gutter > .push-xs-1 { + left: auto; + right: 8.3333%; } .no-gutter > .pull-xs-1 { - right: 8.3333%; -} - -@media (min-width: 48em) and (max-width: 61.99em) { - .row [class*="col-"].reset-s-only { - margin-left: 0 !important; - clear: both; - } - - .row [class*="col-"][class*="push-s-right-only"] { - float: right; - } -} - -@media (min-width: 48em) { - .row [class*="col-"].reset-s { - margin-left: 0 !important; - clear: both; - } - - .row [class*="col-"][class*="push-s-right"] { - float: right; - } - - .row [class*="col-"] + [class*="col-s"] { - margin-left: 2%; - } - - .row [class*="col-"] + [class*="col-s-12"], - .col-s-12 { - margin-left: 0; - } - - .col-s-12 { - width: 100%; - } - - .col-s-11 { - width: 91.5%; - } - - .col-s-10 { - width: 83%; - } - - .col-s-9 { - width: 74.5%; - } - - .col-s-8 { - width: 66%; - } - - .col-s-7 { - width: 57.5%; - } - - .col-s-6 { - width: 49%; - } - - .col-s-5 { - width: 40.5%; - } - - .col-s-4 { - width: 32%; - } - - .col-s-3 { - width: 23.5%; - } - - .col-s-2 { - width: 15%; - } - - .col-s-1 { - width: 6.5%; - } - - /* No gutter margins */ - .no-gutter > .col-s-11 { - width: 91.6667%; - } - - .no-gutter > .col-s-10 { - width: 83.3333%; - } - - .no-gutter > .col-s-9 { - width: 75%; - } - - .no-gutter > .col-s-8 { - width: 66.6667%; - } - - .no-gutter > .col-s-7 { - width: 58.3333%; - } - - .no-gutter > .col-s-6 { - width: 50%; - } - - .no-gutter > .col-s-5 { - width: 41.6667%; - } - - .no-gutter > .col-s-4 { - width: 33.3333%; - } - - .no-gutter > .col-s-3 { - width: 25%; - } - - .no-gutter > .col-s-2 { - width: 16.6667%; - } - - .no-gutter > .col-s-1 { - width: 8.3333%; - } - - /* offsetting cols */ - .offset-s-11 { - margin-left: 93.5%; - } - - .row [class*="col-"] + .offset-s-11 { - margin-left: 95.5%; - } - - .offset-s-10 { - margin-left: 85%; - } - - .row [class*="col-"] + .offset-s-10 { - margin-left: 87%; - } - - .offset-s-9 { - margin-left: 76.5%; - } - - .row [class*="col-"] + .offset-s-9 { - margin-left: 78.5%; - } - - .offset-s-8 { - margin-left: 68%; - } - - .row [class*="col-"] + .offset-s-8 { - margin-left: 70%; - } - - .offset-s-7 { - margin-left: 59.5%; - } - - .row [class*="col-"] + .offset-s-7 { - margin-left: 61.5%; - } - - .offset-s-6 { - margin-left: 51%; - } - - .row [class*="col-"] + .offset-s-6 { - margin-left: 53%; - } - - .offset-s-5 { - margin-left: 42.5%; - } - - .row [class*="col-"] + .offset-s-5 { - margin-left: 44.5%; - } - - .offset-s-4 { - margin-left: 34%; - } - - .row [class*="col-"] + .offset-s-4 { - margin-left: 36%; - } - - .offset-s-3 { - margin-left: 25.5%; - } - - .row [class*="col-"] + .offset-s-3 { - margin-left: 27.5%; - } - - .offset-s-2 { - margin-left: 17%; - } - - .row [class*="col-"] + .offset-s-2 { - margin-left: 19%; - } - - .offset-s-1 { - margin-left: 8.5%; - } - - .row [class*="col-"] + .offset-s-1 { - margin-left: 10.5%; - } - - /*No gutter margin*/ - .no-gutter > .offset-s-11, - .no-gutter > [class*="col-"] + [class*="col-"].offset-s-11 { - margin-left: 91.6667%; - } - - .no-gutter > .offset-s-10, - .no-gutter > [class*="col-"] + [class*="col-"].offset-s-10 { - margin-left: 83.3333%; - } - - .no-gutter > .offset-s-9, - .no-gutter > [class*="col-"] + [class*="col-"].offset-s-9 { - margin-left: 75%; - } - - .no-gutter > .offset-s-8, - .no-gutter > [class*="col-"] + [class*="col-"].offset-s-8 { - margin-left: 66.6667%; - } - - .no-gutter > .offset-s-7, - .no-gutter > [class*="col-"] + [class*="col-"].offset-s-7 { - margin-left: 58.3333%; - } - - .no-gutter > .offset-s-6, - .no-gutter > [class*="col-"] + [class*="col-"].offset-s-6 { - margin-left: 50%; - } - - .no-gutter > .offset-s-5, - .no-gutter > [class*="col-"] + [class*="col-"].offset-s-5 { - margin-left: 41.6667%; - } - - .no-gutter > .offset-s-4, - .no-gutter > [class*="col-"] + [class*="col-"].offset-s-4 { - margin-left: 33.3333%; - } - - .no-gutter > .offset-s-3, - .no-gutter > [class*="col-"] + [class*="col-"].offset-s-3 { - margin-left: 25%; - } - - .no-gutter > .offset-s-2, - .no-gutter > [class*="col-"] + [class*="col-"].offset-s-2 { - margin-left: 16.6667%; - } - - .no-gutter > .offset-s-1, - .no-gutter > [class*="col-"] + [class*="col-"].offset-s-1 { - margin-left: 8.3333%; - } - - /* pushing cols */ - .push-s-11 { - left: 93.5%; - } - - .push-s-10 { - left: 85%; - } - - .push-s-9 { - left: 76.5%; - } - - .push-s-8 { - left: 68%; - } - - .push-s-7 { - left: 59.5%; - } - - .push-s-6 { - left: 51%; - } - - .push-s-5 { - left: 42.5%; - } - - .push-s-4 { - left: 34%; - } - - .push-s-3 { - left: 25.5%; - } - - .push-s-2 { - left: 17%; - } - - .push-s-1 { - left: 8.5%; - } - - /*No gutter margin*/ - .no-gutter > .push-s-11 { - left: 91.6667%; - } - - .no-gutter > .push-s-10 { - left: 83.3333%; - } - - .no-gutter > .push-s-9 { - left: 75%; - } - - .no-gutter > .push-s-8 { - left: 66.6667%; - } - - .no-gutter > .push-s-7 { - left: 58.3333%; - } - - .no-gutter > .push-s-6 { - left: 50%; - } - - .no-gutter > .push-s-5 { - left: 41.6667%; - } - - .no-gutter > .push-s-4 { - left: 33.3333%; - } - - .no-gutter > .push-s-3 { - left: 25%; - } - - .no-gutter > .push-s-2 { - left: 16.6667%; - } - - .no-gutter > .push-s-1 { - left: 8.3333%; - } - - /* pulling cols */ - .pull-s-11 { - right: 93.5%; - } - - .pull-s-10 { - right: 85%; - } - - .pull-s-9 { - right: 76.5%; - } - - .pull-s-8 { - right: 68%; - } - - .pull-s-7 { - right: 59.5%; - } - - .pull-s-6 { - right: 51%; - } - - .pull-s-5 { - right: 42.5%; - } - - .pull-s-4 { - right: 34%; - } - - .pull-s-3 { - right: 25.5%; - } - - .pull-s-2 { - right: 17%; - } - - .pull-s-1 { - right: 8.5%; - } - - /*No gutter margin*/ - .no-gutter > .pull-s-11 { - right: 91.6667%; - } - - .no-gutter > .pull-s-10 { - right: 83.3333%; - } - - .no-gutter > .pull-s-9 { - right: 75%; - } - - .no-gutter > .pull-s-8 { - right: 66.6667%; - } - - .no-gutter > .pull-s-7 { - right: 58.3333%; - } - - .no-gutter > .pull-s-6 { - right: 50%; - } - - .no-gutter > .pull-s-5 { - right: 41.6667%; - } - - .no-gutter > .pull-s-4 { - right: 33.3333%; - } - - .no-gutter > .pull-s-3 { - right: 25%; - } - - .no-gutter > .pull-s-2 { - right: 16.6667%; - } - - .no-gutter > .pull-s-1 { - right: 8.3333%; - } -} - -@media (min-width: 62em) and (max-width: 74.99em) { - .row [class*="col-"].reset-m-only { - margin-left: 0 !important; - clear: both; - } - - .row [class*="col-"][class*="push-m-right-only"] { - float: right; - } -} - -@media (min-width: 62em) { - .row [class*="col-"].reset-m { - margin-left: 0 !important; - clear: both; - } - - .row [class*="col-"][class*="push-m-right"] { - float: right; - } - - .row [class*="col-"] + [class*="col-m"] { - margin-left: 2%; - } - - .row [class*="col-"] + [class*="col-m-12"], - .col-m-12 { - margin-left: 0; - } - - .col-m-12 { - width: 100%; - } - - .col-m-11 { - width: 91.5%; - } - - .col-m-10 { - width: 83%; - } - - .col-m-9 { - width: 74.5%; - } - - .col-m-8 { - width: 66%; - } - - .col-m-7 { - width: 57.5%; - } - - .col-m-6 { - width: 49%; - } - - .col-m-5 { - width: 40.5%; - } - - .col-m-4 { - width: 32%; - } - - .col-m-3 { - width: 23.5%; - } - - .col-m-2 { - width: 15%; - } - - .col-m-1 { - width: 6.5%; - } - - /* No gutter margins */ - .no-gutter > .col-m-11 { - width: 91.6667%; - } - - .no-gutter > .col-m-10 { - width: 83.3333%; - } - - .no-gutter > .col-m-9 { - width: 75%; - } - - .no-gutter > .col-m-8 { - width: 66.6667%; - } - - .no-gutter > .col-m-7 { - width: 58.3333%; - } - - .no-gutter > .col-m-6 { - width: 50%; - } - - .no-gutter > .col-m-5 { - width: 41.6667%; - } - - .no-gutter > .col-m-4 { - width: 33.3333%; - } - - .no-gutter > .col-m-3 { - width: 25%; - } - - .no-gutter > .col-m-2 { - width: 16.6667%; - } - - .no-gutter > .col-m-1 { - width: 8.3333%; - } - - - /* offsetting cols */ - .offset-m-11 { - margin-left: 93.5%; - } - - .row [class*="col-"] + .offset-m-11 { - margin-left: 95.5%; - } - - .offset-m-10 { - margin-left: 85%; - } - - .row [class*="col-"] + .offset-m-10 { - margin-left: 87%; - } - - .offset-m-9 { - margin-left: 76.5%; - } - - .row [class*="col-"] + .offset-m-9 { - margin-left: 78.5%; - } - - .offset-m-8 { - margin-left: 68%; - } - - .row [class*="col-"] + .offset-m-8 { - margin-left: 70%; - } - - .offset-m-7 { - margin-left: 59.5%; - } - - .row [class*="col-"] + .offset-m-7 { - margin-left: 61.5%; - } - - .offset-m-6 { - margin-left: 51%; - } - - .row [class*="col-"] + .offset-m-6 { - margin-left: 53%; - } - - .offset-m-5 { - margin-left: 42.5%; - } - - .row [class*="col-"] + .offset-m-5 { - margin-left: 44.5%; - } - - .offset-m-4 { - margin-left: 34%; - } - - .row [class*="col-"] + .offset-m-4 { - margin-left: 36%; - } - - .offset-m-3 { - margin-left: 25.5%; - } - - .row [class*="col-"] + .offset-m-3 { - margin-left: 27.5%; - } - - .offset-m-2 { - margin-left: 17%; - } - - .row [class*="col-"] + .offset-m-2 { - margin-left: 19%; - } - - .offset-m-1 { - margin-left: 8.5%; - } - - .row [class*="col-"] + .offset-m-1 { - margin-left: 10.5%; - } - - /*No gutter margin*/ - .no-gutter > .offset-m-11, - .no-gutter > [class*="col-"] + [class*="col-"].offset-m-11 { - margin-left: 91.6667%; - } - - .no-gutter > .offset-m-10, - .no-gutter > [class*="col-"] + [class*="col-"].offset-m-10 { - margin-left: 83.3333%; - } - - .no-gutter > .offset-m-9, - .no-gutter > [class*="col-"] + [class*="col-"].offset-m-9 { - margin-left: 75%; - } - - .no-gutter > .offset-m-8, - .no-gutter > [class*="col-"] + [class*="col-"].offset-m-8 { - margin-left: 66.6667%; - } - - .no-gutter > .offset-m-7, - .no-gutter > [class*="col-"] + [class*="col-"].offset-m-7 { - margin-left: 58.3333%; - } - - .no-gutter > .offset-m-6, - .no-gutter > [class*="col-"] + [class*="col-"].offset-m-6 { - margin-left: 50%; - } - - .no-gutter > .offset-m-5, - .no-gutter > [class*="col-"] + [class*="col-"].offset-m-5 { - margin-left: 41.6667%; - } - - .no-gutter > .offset-m-4, - .no-gutter > [class*="col-"] + [class*="col-"].offset-m-4 { - margin-left: 33.3333%; - } - - .no-gutter > .offset-m-3, - .no-gutter > [class*="col-"] + [class*="col-"].offset-m-3 { - margin-left: 25%; - } - - .no-gutter > .offset-m-2, - .no-gutter > [class*="col-"] + [class*="col-"].offset-m-2 { - margin-left: 16.6667%; - } - - .no-gutter > .offset-m-1, - .no-gutter > [class*="col-"] + [class*="col-"].offset-m-1 { - margin-left: 8.3333%; - } - /* pushing cols */ - .push-m-11 { - left: 93.5%; - } - - .push-m-10 { - left: 85%; - } - - .push-m-9 { - left: 76.5%; - } - - .push-m-8 { - left: 68%; - } - - .push-m-7 { - left: 59.5%; - } - - .push-m-6 { - left: 51%; - } - - .push-m-5 { - left: 42.5%; - } - - .push-m-4 { - left: 34%; - } - - .push-m-3 { - left: 25.5%; - } - - .push-m-2 { - left: 17%; - } - - .push-m-1 { - left: 8.5%; - } - - /*No gutter margin*/ - .no-gutter > .push-m-11 { - left: 91.6667%; - } - - .no-gutter > .push-m-10 { - left: 83.3333%; - } - - .no-gutter > .push-m-9 { - left: 75%; - } - - .no-gutter > .push-m-8 { - left: 66.6667%; - } - - .no-gutter > .push-m-7 { - left: 58.3333%; - } - - .no-gutter > .push-m-6 { - left: 50%; - } - - .no-gutter > .push-m-5 { - left: 41.6667%; - } - - .no-gutter > .push-m-4 { - left: 33.3333%; - } - - .no-gutter > .push-m-3 { - left: 25%; - } - - .no-gutter > .push-m-2 { - left: 16.6667%; - } - - .no-gutter > .push-m-1 { - left: 8.3333%; - } - - /* pulling cols */ - .pull-m-11 { - right: 93.5%; - } - - .pull-m-10 { - right: 85%; - } - - .pull-m-9 { - right: 76.5%; - } - - .pull-m-8 { - right: 68%; - } - - .pull-m-7 { - right: 59.5%; - } - - .pull-m-6 { - right: 51%; - } - - .pull-m-5 { - right: 42.5%; - } - - .pull-m-4 { - right: 34%; - } - - .pull-m-3 { - right: 25.5%; - } - - .pull-m-2 { - right: 17%; - } - - .pull-m-1 { - right: 8.5%; - } - - /*No gutter margin*/ - .no-gutter > .pull-m-11 { - right: 91.6667%; - } - - .no-gutter > .pull-m-10 { - right: 83.3333%; - } - - .no-gutter > .pull-m-9 { - right: 75%; - } - - .no-gutter > .pull-m-8 { - right: 66.6667%; - } - - .no-gutter > .pull-m-7 { - right: 58.3333%; - } - - .no-gutter > .pull-m-6 { - right: 50%; - } - - .no-gutter > .pull-m-5 { - right: 41.6667%; - } - - .no-gutter > .pull-m-4 { - right: 33.3333%; - } - - .no-gutter > .pull-m-3 { - right: 25%; - } - - .no-gutter > .pull-m-2 { - right: 16.6667%; - } - - .no-gutter > .pull-m-1 { - right: 8.3333%; - } -} - -@media (min-width: 75em) { - .row [class*="col-"].reset-l { - margin-left: 0 !important; - clear: both; - } - - .row [class*="col-"][class*="push-l-right"] { - float: right; - } - - .row [class*="col-"] + [class*="col-l"] { - margin-left: 2%; - } - - .row [class*="col-"] + [class*="col-l-12"], - .col-l-12 { - margin-left: 0; - } - - .col-l-12 { - width: 100%; - } - - .col-l-11 { - width: 91.5%; - } - - .col-l-10 { - width: 83%; - } - - .col-l-9 { - width: 74.5%; - } - - .col-l-8 { - width: 66%; - } - - .col-l-7 { - width: 57.5%; - } - - .col-l-6 { - width: 49%; - } - - .col-l-5 { - width: 40.5%; - } - - .col-l-4 { - width: 32%; - } - - .col-l-3 { - width: 23.5%; - } - - .col-l-2 { - width: 15%; - } - - .col-l-1 { - width: 6.5%; - } - - /* No gutter margins */ - .no-gutter > .col-l-11 { - width: 91.6667%; - } - - .no-gutter > .col-l-10 { - width: 83.3333%; - } - - .no-gutter > .col-l-9 { - width: 75%; - } - - .no-gutter > .col-l-8 { - width: 66.6667%; - } - - .no-gutter > .col-l-7 { - width: 58.3333%; - } - - .no-gutter > .col-l-6 { - width: 50%; - } - - .no-gutter > .col-l-5 { - width: 41.6667%; - } - - .no-gutter > .col-l-4 { - width: 33.3333%; - } - - .no-gutter > .col-l-3 { - width: 25%; - } - - .no-gutter > .col-l-2 { - width: 16.6667%; - } - - .no-gutter > .col-l-1 { - width: 8.3333%; - } - - - /* offsetting cols */ - .offset-l-11 { - margin-left: 93.5%; - } - - .row [class*="col-"] + .offset-l-11 { - margin-left: 95.5%; - } - - .offset-l-10 { - margin-left: 85%; - } - - .row [class*="col-"] + .offset-l-10 { - margin-left: 87%; - } - - .offset-l-9 { - margin-left: 76.5%; - } - - .row [class*="col-"] + .offset-l-9 { - margin-left: 78.5%; - } - - .offset-l-8 { - margin-left: 68%; - } - - .row [class*="col-"] + .offset-l-8 { - margin-left: 70%; - } - - .offset-l-7 { - margin-left: 59.5%; - } - - .row [class*="col-"] + .offset-l-7 { - margin-left: 61.5%; - } - - .offset-l-6 { - margin-left: 51%; - } - - .row [class*="col-"] + .offset-l-6 { - margin-left: 53%; - } - - .offset-l-5 { - margin-left: 42.5%; - } - - .row [class*="col-"] + .offset-l-5 { - margin-left: 44.5%; - } - - .offset-l-4 { - margin-left: 34%; - } - - .row [class*="col-"] + .offset-l-4 { - margin-left: 36%; - } - - .offset-l-3 { - margin-left: 25.5%; - } - - .row [class*="col-"] + .offset-l-3 { - margin-left: 27.5%; - } - - .offset-l-2 { - margin-left: 17%; - } - - .row [class*="col-"] + .offset-l-2 { - margin-left: 19%; - } - - .offset-l-1 { - margin-left: 8.5%; - } - - .row [class*="col-"] + .offset-l-1 { - margin-left: 10.5%; - } - - /*No gutter margin*/ - .no-gutter > .offset-l-11, - .no-gutter > [class*="col-"] + [class*="col-"].offset-l-11 { - margin-left: 91.6667%; - } - - .no-gutter > .offset-l-10, - .no-gutter > [class*="col-"] + [class*="col-"].offset-l-10 { - margin-left: 83.3333%; - } - - .no-gutter > .offset-l-9, - .no-gutter > [class*="col-"] + [class*="col-"].offset-l-9 { - margin-left: 75%; - } - - .no-gutter > .offset-l-8, - .no-gutter > [class*="col-"] + [class*="col-"].offset-l-8 { - margin-left: 66.6667%; - } - - .no-gutter > .offset-l-7, - .no-gutter > [class*="col-"] + [class*="col-"].offset-l-7 { - margin-left: 58.3333%; - } - - .no-gutter > .offset-l-6, - .no-gutter > [class*="col-"] + [class*="col-"].offset-l-6 { - margin-left: 50%; - } - - .no-gutter > .offset-l-5, - .no-gutter > [class*="col-"] + [class*="col-"].offset-l-5 { - margin-left: 41.6667%; - } - - .no-gutter > .offset-l-4, - .no-gutter > [class*="col-"] + [class*="col-"].offset-l-4 { - margin-left: 33.3333%; - } - - .no-gutter > .offset-l-3, - .no-gutter > [class*="col-"] + [class*="col-"].offset-l-3 { - margin-left: 25%; - } - - .no-gutter > .offset-l-2, - .no-gutter > [class*="col-"] + [class*="col-"].offset-l-2 { - margin-left: 16.6667%; - } - - .no-gutter > .offset-l-1, - .no-gutter > [class*="col-"] + [class*="col-"].offset-l-1 { - margin-left: 8.3333%; - } - - /* pushing cols */ - .push-l-11 { - left: 93.5%; - } - - .push-l-10 { - left: 85%; - } - - .push-l-9 { - left: 76.5%; - } - - .push-l-8 { - left: 68%; - } - - .push-l-7 { - left: 59.5%; - } - - .push-l-6 { - left: 51%; - } - - .push-l-5 { - left: 42.5%; - } - - .push-l-4 { - left: 34%; - } - - .push-l-3 { - left: 25.5%; - } - - .push-l-2 { - left: 17%; - } - - .push-l-1 { - left: 8.5%; - } - - /*No gutter margin*/ - .no-gutter > .push-l-11 { - left: 91.6667%; - } - - .no-gutter > .push-l-10 { - left: 83.3333%; - } - - .no-gutter > .push-l-9 { - left: 75%; - } - - .no-gutter > .push-l-8 { - left: 66.6667%; - } - - .no-gutter > .push-l-7 { - left: 58.3333%; - } - - .no-gutter > .push-l-6 { - left: 50%; - } - - .no-gutter > .push-l-5 { - left: 41.6667%; - } - - .no-gutter > .push-l-4 { - left: 33.3333%; - } - - .no-gutter > .push-l-3 { - left: 25%; - } - - .no-gutter > .push-l-2 { - left: 16.6667%; - } - - .no-gutter > .push-l-1 { - left: 8.3333%; - } - - /* pulling cols */ - .pull-l-11 { - right: 93.5%; - } - - .pull-l-10 { - right: 85%; - } - - .pull-l-9 { - right: 76.5%; - } - - .pull-l-8 { - right: 68%; - } - - .pull-l-7 { - right: 59.5%; - } - - .pull-l-6 { - right: 51%; - } - - .pull-l-5 { - right: 42.5%; - } - - .pull-l-4 { - right: 34%; - } - - .pull-l-3 { - right: 25.5%; - } - - .pull-l-2 { - right: 17%; - } - - .pull-l-1 { - right: 8.5%; - } - - /*No gutter margin*/ - .no-gutter > .pull-l-11 { - right: 91.6667%; - } - - .no-gutter > .pull-l-10 { - right: 83.3333%; - } - - .no-gutter > .pull-l-9 { - right: 75%; - } - - .no-gutter > .pull-l-8 { - right: 66.6667%; - } - - .no-gutter > .pull-l-7 { - right: 58.3333%; - } - - .no-gutter > .pull-l-6 { - right: 50%; - } - - .no-gutter > .pull-l-5 { - right: 41.6667%; - } - - .no-gutter > .pull-l-4 { - right: 33.3333%; - } - - .no-gutter > .pull-l-3 { - right: 25%; - } - - .no-gutter > .pull-l-2 { - right: 16.6667%; - } - - .no-gutter > .pull-l-1 { - right: 8.3333%; - } -} + right: 8.3333%; } + [dir="rtl"] .no-gutter > .pull-xs-1 { + right: auto; + left: 8.3333%; } +.no-gutter > .col-xs-2 { + width: 16.6667%; } +.no-gutter > .offset-xs-2 { + margin-left: 16.6667%; } + [dir="rtl"] .no-gutter > .offset-xs-2 { + margin-left: 0; + margin-right: 16.6667%; } +.no-gutter > .push-xs-2 { + left: 16.6667%; } + [dir="rtl"] .no-gutter > .push-xs-2 { + left: auto; + right: 16.6667%; } +.no-gutter > .pull-xs-2 { + right: 16.6667%; } + [dir="rtl"] .no-gutter > .pull-xs-2 { + right: auto; + left: 16.6667%; } +.no-gutter > .col-xs-3 { + width: 25%; } +.no-gutter > .offset-xs-3 { + margin-left: 25%; } + [dir="rtl"] .no-gutter > .offset-xs-3 { + margin-left: 0; + margin-right: 25%; } +.no-gutter > .push-xs-3 { + left: 25%; } + [dir="rtl"] .no-gutter > .push-xs-3 { + left: auto; + right: 25%; } +.no-gutter > .pull-xs-3 { + right: 25%; } + [dir="rtl"] .no-gutter > .pull-xs-3 { + right: auto; + left: 25%; } +.no-gutter > .col-xs-4 { + width: 33.3333%; } +.no-gutter > .offset-xs-4 { + margin-left: 33.3333%; } + [dir="rtl"] .no-gutter > .offset-xs-4 { + margin-left: 0; + margin-right: 33.3333%; } +.no-gutter > .push-xs-4 { + left: 33.3333%; } + [dir="rtl"] .no-gutter > .push-xs-4 { + left: auto; + right: 33.3333%; } +.no-gutter > .pull-xs-4 { + right: 33.3333%; } + [dir="rtl"] .no-gutter > .pull-xs-4 { + right: auto; + left: 33.3333%; } +.no-gutter > .col-xs-5 { + width: 41.6667%; } +.no-gutter > .offset-xs-5 { + margin-left: 41.6667%; } + [dir="rtl"] .no-gutter > .offset-xs-5 { + margin-left: 0; + margin-right: 41.6667%; } +.no-gutter > .push-xs-5 { + left: 41.6667%; } + [dir="rtl"] .no-gutter > .push-xs-5 { + left: auto; + right: 41.6667%; } +.no-gutter > .pull-xs-5 { + right: 41.6667%; } + [dir="rtl"] .no-gutter > .pull-xs-5 { + right: auto; + left: 41.6667%; } +.no-gutter > .col-xs-6 { + width: 50%; } +.no-gutter > .offset-xs-6 { + margin-left: 50%; } + [dir="rtl"] .no-gutter > .offset-xs-6 { + margin-left: 0; + margin-right: 50%; } +.no-gutter > .push-xs-6 { + left: 50%; } + [dir="rtl"] .no-gutter > .push-xs-6 { + left: auto; + right: 50%; } +.no-gutter > .pull-xs-6 { + right: 50%; } + [dir="rtl"] .no-gutter > .pull-xs-6 { + right: auto; + left: 50%; } +.no-gutter > .col-xs-7 { + width: 58.3333%; } +.no-gutter > .offset-xs-7 { + margin-left: 58.3333%; } + [dir="rtl"] .no-gutter > .offset-xs-7 { + margin-left: 0; + margin-right: 58.3333%; } +.no-gutter > .push-xs-7 { + left: 58.3333%; } + [dir="rtl"] .no-gutter > .push-xs-7 { + left: auto; + right: 58.3333%; } +.no-gutter > .pull-xs-7 { + right: 58.3333%; } + [dir="rtl"] .no-gutter > .pull-xs-7 { + right: auto; + left: 58.3333%; } +.no-gutter > .col-xs-8 { + width: 66.6667%; } +.no-gutter > .offset-xs-8 { + margin-left: 66.6667%; } + [dir="rtl"] .no-gutter > .offset-xs-8 { + margin-left: 0; + margin-right: 66.6667%; } +.no-gutter > .push-xs-8 { + left: 66.6667%; } + [dir="rtl"] .no-gutter > .push-xs-8 { + left: auto; + right: 66.6667%; } +.no-gutter > .pull-xs-8 { + right: 66.6667%; } + [dir="rtl"] .no-gutter > .pull-xs-8 { + right: auto; + left: 66.6667%; } +.no-gutter > .col-xs-9 { + width: 75%; } +.no-gutter > .offset-xs-9 { + margin-left: 75%; } + [dir="rtl"] .no-gutter > .offset-xs-9 { + margin-left: 0; + margin-right: 75%; } +.no-gutter > .push-xs-9 { + left: 75%; } + [dir="rtl"] .no-gutter > .push-xs-9 { + left: auto; + right: 75%; } +.no-gutter > .pull-xs-9 { + right: 75%; } + [dir="rtl"] .no-gutter > .pull-xs-9 { + right: auto; + left: 75%; } +.no-gutter > .col-xs-10 { + width: 83.3333%; } +.no-gutter > .offset-xs-10 { + margin-left: 83.3333%; } + [dir="rtl"] .no-gutter > .offset-xs-10 { + margin-left: 0; + margin-right: 83.3333%; } +.no-gutter > .push-xs-10 { + left: 83.3333%; } + [dir="rtl"] .no-gutter > .push-xs-10 { + left: auto; + right: 83.3333%; } +.no-gutter > .pull-xs-10 { + right: 83.3333%; } + [dir="rtl"] .no-gutter > .pull-xs-10 { + right: auto; + left: 83.3333%; } +.no-gutter > .col-xs-11 { + width: 91.6667%; } +.no-gutter > .offset-xs-11 { + margin-left: 91.6667%; } + [dir="rtl"] .no-gutter > .offset-xs-11 { + margin-left: 0; + margin-right: 91.6667%; } +.no-gutter > .push-xs-11 { + left: 91.6667%; } + [dir="rtl"] .no-gutter > .push-xs-11 { + left: auto; + right: 91.6667%; } +.no-gutter > .pull-xs-11 { + right: 91.6667%; } + [dir="rtl"] .no-gutter > .pull-xs-11 { + right: auto; + left: 91.6667%; } +.no-gutter > .col-xs-12 { + width: 100%; } +.no-gutter > .offset-xs-12 { + margin-left: 100%; } + [dir="rtl"] .no-gutter > .offset-xs-12 { + margin-left: 0; + margin-right: 100%; } +.no-gutter > .push-xs-12 { + left: 100%; } + [dir="rtl"] .no-gutter > .push-xs-12 { + left: auto; + right: 100%; } +.no-gutter > .pull-xs-12 { + right: 100%; } + [dir="rtl"] .no-gutter > .pull-xs-12 { + right: auto; + left: 100%; } -/* - * Unordered and ordered lists - * Scale the padding/margin with the base font. - */ -ul, ol { - margin: 1em 0; - padding-left: 2.5em; -} - - ul ul, ol ol { - margin: 0; - } - - /* - * No bullets on first level. - */ - ul.no-bullets, - ol.no-bullets { - padding-left: 0; - } - - ul.no-bullets > li, - ol.no-bullets > li { - list-style: none; - } - - /* - * Coloured lists. - */ - ul.colored, ol.colored { - padding-left: 40px; - } - - ul.colored > li, ol.colored > li { - list-style-type: none; - position: relative; - } - - /* - * 1. Escaped unicode coloured circle. - * 2. Edit this property to change all colored class lists. - * 3. Normalize funky webkit margin - */ - ul.colored > li:before, - ol.colored > li:before { - content: "\25CF"; /* 1 */ - color: #00a9ec; /* 2 */ - font-weight: bold; - font-size: 1em; - text-align: right; - position: absolute; - left: -1em; - top: 0; - text-decoration: none; - -webkit-margin-start: -.25em; /* 3 */ - } - - /* - * Counter increment to replace standard numbers. - */ - ol.colored { - counter-reset: foo; - } - - ol.colored > li { - counter-increment: foo; - } - - /* - * Use the :before pseudo element to supply numbers. - * 1. The counter value. - * 2. Normalize funky webkit margin - */ - ol.colored > li:before { - content: counter(foo)"."; /* 1 */ - left: -3.125em; - font-weight: normal; - width: 2.5em; - -webkit-margin-start: 0; /* 2 */ - } - -/* - * Prevent dt and dd collapse. +/* + * Small */ -dt, dd { - min-height: 1.4em; -} - - +@media (min-width: 48em) and (max-width: 61.99em) { + [class*=col-].reset-s-only { + clear: both; + margin-left: 0 !important; } + [dir="rtl"] [class*=col-].reset-s-only { + margin-right: 0 !important; } } @media (min-width: 48em) { - - /* Definition lists */ - - /* - * Horizontally styled definition list - */ - - .dl-horizontal > dt { - float: left; - clear: left; - width: 150px; - overflow: hidden; - text-align: right; - -ms-text-overflow: ellipsis; - -o-text-overflow: ellipsis; - text-overflow: ellipsis; - white-space: nowrap; - } - - .dl-horizontal > dd { - margin-left: 166px; - } -} -/* - * Make it responsive - */ -table { - max-width: 100%; - width: 100%; - margin: 1em 0; -} - - table th, table td { - padding: .5em; - text-align: left; - vertical-align: top; - } - -/* - * Bordered tables - */ -.table-bordered { - border-collapse: separate; - border: solid 1px #c0c0c0; - border-left-width: 0; -} - - .table-bordered th, - .table-bordered td { - border-top: 1px solid #c0c0c0; - border-left: 1px solid #c0c0c0; - } - - .table-bordered thead:first-child tr:first-child th, - .table-bordered tbody:first-child tr:first-child td { - border-top-width: 0; - } - -/* - * Striped tables - */ -.table-striped tbody > tr:nth-child(odd) > td, -.table-striped tbody > tr:nth-child(odd) > th, -.table-row-alt > td, -.table-row-alt > th { - background-color: #e7e7e7; -} - - + [class*=col-s] + [class*=col-s] { + margin-left: 2%; } + [dir="rtl"] [class*=col-s] + [class*=col-s] { + margin-left: 0; + margin-right: 2%; } + + .no-gutter > [class*=col-s] { + margin-left: 0; } + [dir="rtl"] .no-gutter > [class*=col-s] { + margin-left: 0; + margin-right: 0; } + + [class*=col-].reset-s { + clear: both; + margin-left: 0 !important; } + [dir="rtl"] [class*=col-].reset-s { + margin-right: 0 !important; } + + .col-s-1 { + width: 6.5%; } + + .offset-s-1 { + margin-left: 8.5%; } + [dir="rtl"] .offset-s-1 { + margin-left: 0; + margin-right: 8.5%; } + + [class*=col-] + .offset-s-1 { + margin-left: 10.5%; } + [dir="rtl"] [class*=col-] + .offset-s-1 { + margin-left: 0; + margin-right: 10.5%; } + + .push-s-1 { + left: 8.5%; } + [dir="rtl"] .push-s-1 { + left: auto; + right: 8.5%; } + + .pull-s-1 { + right: 8.5%; } + [dir="rtl"] .pull-s-1 { + right: auto; + left: 8.5%; } + + .col-s-2 { + width: 15%; } + + .offset-s-2 { + margin-left: 17%; } + [dir="rtl"] .offset-s-2 { + margin-left: 0; + margin-right: 17%; } + + [class*=col-] + .offset-s-2 { + margin-left: 19%; } + [dir="rtl"] [class*=col-] + .offset-s-2 { + margin-left: 0; + margin-right: 19%; } + + .push-s-2 { + left: 17%; } + [dir="rtl"] .push-s-2 { + left: auto; + right: 17%; } + + .pull-s-2 { + right: 17%; } + [dir="rtl"] .pull-s-2 { + right: auto; + left: 17%; } + + .col-s-3 { + width: 23.5%; } + + .offset-s-3 { + margin-left: 25.5%; } + [dir="rtl"] .offset-s-3 { + margin-left: 0; + margin-right: 25.5%; } + + [class*=col-] + .offset-s-3 { + margin-left: 27.5%; } + [dir="rtl"] [class*=col-] + .offset-s-3 { + margin-left: 0; + margin-right: 27.5%; } + + .push-s-3 { + left: 25.5%; } + [dir="rtl"] .push-s-3 { + left: auto; + right: 25.5%; } + + .pull-s-3 { + right: 25.5%; } + [dir="rtl"] .pull-s-3 { + right: auto; + left: 25.5%; } + + .col-s-4 { + width: 32%; } + + .offset-s-4 { + margin-left: 34%; } + [dir="rtl"] .offset-s-4 { + margin-left: 0; + margin-right: 34%; } + + [class*=col-] + .offset-s-4 { + margin-left: 36%; } + [dir="rtl"] [class*=col-] + .offset-s-4 { + margin-left: 0; + margin-right: 36%; } + + .push-s-4 { + left: 34%; } + [dir="rtl"] .push-s-4 { + left: auto; + right: 34%; } + + .pull-s-4 { + right: 34%; } + [dir="rtl"] .pull-s-4 { + right: auto; + left: 34%; } + + .col-s-5 { + width: 40.5%; } + + .offset-s-5 { + margin-left: 42.5%; } + [dir="rtl"] .offset-s-5 { + margin-left: 0; + margin-right: 42.5%; } + + [class*=col-] + .offset-s-5 { + margin-left: 44.5%; } + [dir="rtl"] [class*=col-] + .offset-s-5 { + margin-left: 0; + margin-right: 44.5%; } + + .push-s-5 { + left: 42.5%; } + [dir="rtl"] .push-s-5 { + left: auto; + right: 42.5%; } + + .pull-s-5 { + right: 42.5%; } + [dir="rtl"] .pull-s-5 { + right: auto; + left: 42.5%; } + + .col-s-6 { + width: 49%; } + + .offset-s-6 { + margin-left: 51%; } + [dir="rtl"] .offset-s-6 { + margin-left: 0; + margin-right: 51%; } + + [class*=col-] + .offset-s-6 { + margin-left: 53%; } + [dir="rtl"] [class*=col-] + .offset-s-6 { + margin-left: 0; + margin-right: 53%; } + + .push-s-6 { + left: 51%; } + [dir="rtl"] .push-s-6 { + left: auto; + right: 51%; } + + .pull-s-6 { + right: 51%; } + [dir="rtl"] .pull-s-6 { + right: auto; + left: 51%; } + + .col-s-7 { + width: 57.5%; } + + .offset-s-7 { + margin-left: 59.5%; } + [dir="rtl"] .offset-s-7 { + margin-left: 0; + margin-right: 59.5%; } + + [class*=col-] + .offset-s-7 { + margin-left: 61.5%; } + [dir="rtl"] [class*=col-] + .offset-s-7 { + margin-left: 0; + margin-right: 61.5%; } + + .push-s-7 { + left: 59.5%; } + [dir="rtl"] .push-s-7 { + left: auto; + right: 59.5%; } + + .pull-s-7 { + right: 59.5%; } + [dir="rtl"] .pull-s-7 { + right: auto; + left: 59.5%; } + + .col-s-8 { + width: 66%; } + + .offset-s-8 { + margin-left: 68%; } + [dir="rtl"] .offset-s-8 { + margin-left: 0; + margin-right: 68%; } + + [class*=col-] + .offset-s-8 { + margin-left: 70%; } + [dir="rtl"] [class*=col-] + .offset-s-8 { + margin-left: 0; + margin-right: 70%; } + + .push-s-8 { + left: 68%; } + [dir="rtl"] .push-s-8 { + left: auto; + right: 68%; } + + .pull-s-8 { + right: 68%; } + [dir="rtl"] .pull-s-8 { + right: auto; + left: 68%; } + + .col-s-9 { + width: 74.5%; } + + .offset-s-9 { + margin-left: 76.5%; } + [dir="rtl"] .offset-s-9 { + margin-left: 0; + margin-right: 76.5%; } + + [class*=col-] + .offset-s-9 { + margin-left: 78.5%; } + [dir="rtl"] [class*=col-] + .offset-s-9 { + margin-left: 0; + margin-right: 78.5%; } + + .push-s-9 { + left: 76.5%; } + [dir="rtl"] .push-s-9 { + left: auto; + right: 76.5%; } + + .pull-s-9 { + right: 76.5%; } + [dir="rtl"] .pull-s-9 { + right: auto; + left: 76.5%; } + + .col-s-10 { + width: 83%; } + + .offset-s-10 { + margin-left: 85%; } + [dir="rtl"] .offset-s-10 { + margin-left: 0; + margin-right: 85%; } + + [class*=col-] + .offset-s-10 { + margin-left: 87%; } + [dir="rtl"] [class*=col-] + .offset-s-10 { + margin-left: 0; + margin-right: 87%; } + + .push-s-10 { + left: 85%; } + [dir="rtl"] .push-s-10 { + left: auto; + right: 85%; } + + .pull-s-10 { + right: 85%; } + [dir="rtl"] .pull-s-10 { + right: auto; + left: 85%; } + + .col-s-11 { + width: 91.5%; } + + .offset-s-11 { + margin-left: 93.5%; } + [dir="rtl"] .offset-s-11 { + margin-left: 0; + margin-right: 93.5%; } + + [class*=col-] + .offset-s-11 { + margin-left: 95.5%; } + [dir="rtl"] [class*=col-] + .offset-s-11 { + margin-left: 0; + margin-right: 95.5%; } + + .push-s-11 { + left: 93.5%; } + [dir="rtl"] .push-s-11 { + left: auto; + right: 93.5%; } + + .pull-s-11 { + right: 93.5%; } + [dir="rtl"] .pull-s-11 { + right: auto; + left: 93.5%; } + + .col-s-12 { + width: 100%; } + + .col-s-12, + [class*=col-] + [class*=col-s-12] { + margin-left: 0; } + [dir="rtl"] .col-s-12, [dir="rtl"] + [class*=col-] + [class*=col-s-12] { + margin-right: 0; } + + .no-gutter > .col-s-1 { + width: 8.3333%; } + .no-gutter > .offset-s-1 { + margin-left: 8.3333%; } + [dir="rtl"] .no-gutter > .offset-s-1 { + margin-left: 0; + margin-right: 8.3333%; } + .no-gutter > .push-s-1 { + left: 8.3333%; } + [dir="rtl"] .no-gutter > .push-s-1 { + left: auto; + right: 8.3333%; } + .no-gutter > .pull-s-1 { + right: 8.3333%; } + [dir="rtl"] .no-gutter > .pull-s-1 { + right: auto; + left: 8.3333%; } + .no-gutter > .col-s-2 { + width: 16.6667%; } + .no-gutter > .offset-s-2 { + margin-left: 16.6667%; } + [dir="rtl"] .no-gutter > .offset-s-2 { + margin-left: 0; + margin-right: 16.6667%; } + .no-gutter > .push-s-2 { + left: 16.6667%; } + [dir="rtl"] .no-gutter > .push-s-2 { + left: auto; + right: 16.6667%; } + .no-gutter > .pull-s-2 { + right: 16.6667%; } + [dir="rtl"] .no-gutter > .pull-s-2 { + right: auto; + left: 16.6667%; } + .no-gutter > .col-s-3 { + width: 25%; } + .no-gutter > .offset-s-3 { + margin-left: 25%; } + [dir="rtl"] .no-gutter > .offset-s-3 { + margin-left: 0; + margin-right: 25%; } + .no-gutter > .push-s-3 { + left: 25%; } + [dir="rtl"] .no-gutter > .push-s-3 { + left: auto; + right: 25%; } + .no-gutter > .pull-s-3 { + right: 25%; } + [dir="rtl"] .no-gutter > .pull-s-3 { + right: auto; + left: 25%; } + .no-gutter > .col-s-4 { + width: 33.3333%; } + .no-gutter > .offset-s-4 { + margin-left: 33.3333%; } + [dir="rtl"] .no-gutter > .offset-s-4 { + margin-left: 0; + margin-right: 33.3333%; } + .no-gutter > .push-s-4 { + left: 33.3333%; } + [dir="rtl"] .no-gutter > .push-s-4 { + left: auto; + right: 33.3333%; } + .no-gutter > .pull-s-4 { + right: 33.3333%; } + [dir="rtl"] .no-gutter > .pull-s-4 { + right: auto; + left: 33.3333%; } + .no-gutter > .col-s-5 { + width: 41.6667%; } + .no-gutter > .offset-s-5 { + margin-left: 41.6667%; } + [dir="rtl"] .no-gutter > .offset-s-5 { + margin-left: 0; + margin-right: 41.6667%; } + .no-gutter > .push-s-5 { + left: 41.6667%; } + [dir="rtl"] .no-gutter > .push-s-5 { + left: auto; + right: 41.6667%; } + .no-gutter > .pull-s-5 { + right: 41.6667%; } + [dir="rtl"] .no-gutter > .pull-s-5 { + right: auto; + left: 41.6667%; } + .no-gutter > .col-s-6 { + width: 50%; } + .no-gutter > .offset-s-6 { + margin-left: 50%; } + [dir="rtl"] .no-gutter > .offset-s-6 { + margin-left: 0; + margin-right: 50%; } + .no-gutter > .push-s-6 { + left: 50%; } + [dir="rtl"] .no-gutter > .push-s-6 { + left: auto; + right: 50%; } + .no-gutter > .pull-s-6 { + right: 50%; } + [dir="rtl"] .no-gutter > .pull-s-6 { + right: auto; + left: 50%; } + .no-gutter > .col-s-7 { + width: 58.3333%; } + .no-gutter > .offset-s-7 { + margin-left: 58.3333%; } + [dir="rtl"] .no-gutter > .offset-s-7 { + margin-left: 0; + margin-right: 58.3333%; } + .no-gutter > .push-s-7 { + left: 58.3333%; } + [dir="rtl"] .no-gutter > .push-s-7 { + left: auto; + right: 58.3333%; } + .no-gutter > .pull-s-7 { + right: 58.3333%; } + [dir="rtl"] .no-gutter > .pull-s-7 { + right: auto; + left: 58.3333%; } + .no-gutter > .col-s-8 { + width: 66.6667%; } + .no-gutter > .offset-s-8 { + margin-left: 66.6667%; } + [dir="rtl"] .no-gutter > .offset-s-8 { + margin-left: 0; + margin-right: 66.6667%; } + .no-gutter > .push-s-8 { + left: 66.6667%; } + [dir="rtl"] .no-gutter > .push-s-8 { + left: auto; + right: 66.6667%; } + .no-gutter > .pull-s-8 { + right: 66.6667%; } + [dir="rtl"] .no-gutter > .pull-s-8 { + right: auto; + left: 66.6667%; } + .no-gutter > .col-s-9 { + width: 75%; } + .no-gutter > .offset-s-9 { + margin-left: 75%; } + [dir="rtl"] .no-gutter > .offset-s-9 { + margin-left: 0; + margin-right: 75%; } + .no-gutter > .push-s-9 { + left: 75%; } + [dir="rtl"] .no-gutter > .push-s-9 { + left: auto; + right: 75%; } + .no-gutter > .pull-s-9 { + right: 75%; } + [dir="rtl"] .no-gutter > .pull-s-9 { + right: auto; + left: 75%; } + .no-gutter > .col-s-10 { + width: 83.3333%; } + .no-gutter > .offset-s-10 { + margin-left: 83.3333%; } + [dir="rtl"] .no-gutter > .offset-s-10 { + margin-left: 0; + margin-right: 83.3333%; } + .no-gutter > .push-s-10 { + left: 83.3333%; } + [dir="rtl"] .no-gutter > .push-s-10 { + left: auto; + right: 83.3333%; } + .no-gutter > .pull-s-10 { + right: 83.3333%; } + [dir="rtl"] .no-gutter > .pull-s-10 { + right: auto; + left: 83.3333%; } + .no-gutter > .col-s-11 { + width: 91.6667%; } + .no-gutter > .offset-s-11 { + margin-left: 91.6667%; } + [dir="rtl"] .no-gutter > .offset-s-11 { + margin-left: 0; + margin-right: 91.6667%; } + .no-gutter > .push-s-11 { + left: 91.6667%; } + [dir="rtl"] .no-gutter > .push-s-11 { + left: auto; + right: 91.6667%; } + .no-gutter > .pull-s-11 { + right: 91.6667%; } + [dir="rtl"] .no-gutter > .pull-s-11 { + right: auto; + left: 91.6667%; } + .no-gutter > .col-s-12 { + width: 100%; } + .no-gutter > .offset-s-12 { + margin-left: 100%; } + [dir="rtl"] .no-gutter > .offset-s-12 { + margin-left: 0; + margin-right: 100%; } + .no-gutter > .push-s-12 { + left: 100%; } + [dir="rtl"] .no-gutter > .push-s-12 { + left: auto; + right: 100%; } + .no-gutter > .pull-s-12 { + right: 100%; } + [dir="rtl"] .no-gutter > .pull-s-12 { + right: auto; + left: 100%; } } /* - * Overflow helpers + * Medium */ -.table-scrollable { - width: 100%; - margin: 1em 0; - overflow: auto; - overflow-y: hidden; -} - - .table-scrollable table { - margin: 0; - } -@media (max-width: 47.99em) { +@media (min-width: 62em) and (max-width: 74.99em) { + [class*=col-].reset-m-only { + clear: both; + margin-left: 0 !important; } + [dir="rtl"] [class*=col-].reset-m-only { + margin-right: 0 !important; } } +@media (min-width: 62em) { + [class*=col-m] + [class*=col-m] { + margin-left: 2%; } + [dir="rtl"] [class*=col-m] + [class*=col-m] { + margin-left: 0; + margin-right: 2%; } + + .no-gutter > [class*=col-m] { + margin-left: 0; } + [dir="rtl"] .no-gutter > [class*=col-m] { + margin-left: 0; + margin-right: 0; } + + [class*=col-].reset-m { + clear: both; + margin-left: 0 !important; } + [dir="rtl"] [class*=col-].reset-m { + margin-right: 0 !important; } + + .col-m-1 { + width: 6.5%; } + + .offset-m-1 { + margin-left: 8.5%; } + [dir="rtl"] .offset-m-1 { + margin-left: 0; + margin-right: 8.5%; } + + [class*=col-] + .offset-m-1 { + margin-left: 10.5%; } + [dir="rtl"] [class*=col-] + .offset-m-1 { + margin-left: 0; + margin-right: 10.5%; } + + .push-m-1 { + left: 8.5%; } + [dir="rtl"] .push-m-1 { + left: auto; + right: 8.5%; } + + .pull-m-1 { + right: 8.5%; } + [dir="rtl"] .pull-m-1 { + right: auto; + left: 8.5%; } + + .col-m-2 { + width: 15%; } + + .offset-m-2 { + margin-left: 17%; } + [dir="rtl"] .offset-m-2 { + margin-left: 0; + margin-right: 17%; } + + [class*=col-] + .offset-m-2 { + margin-left: 19%; } + [dir="rtl"] [class*=col-] + .offset-m-2 { + margin-left: 0; + margin-right: 19%; } + + .push-m-2 { + left: 17%; } + [dir="rtl"] .push-m-2 { + left: auto; + right: 17%; } + + .pull-m-2 { + right: 17%; } + [dir="rtl"] .pull-m-2 { + right: auto; + left: 17%; } + + .col-m-3 { + width: 23.5%; } + + .offset-m-3 { + margin-left: 25.5%; } + [dir="rtl"] .offset-m-3 { + margin-left: 0; + margin-right: 25.5%; } + + [class*=col-] + .offset-m-3 { + margin-left: 27.5%; } + [dir="rtl"] [class*=col-] + .offset-m-3 { + margin-left: 0; + margin-right: 27.5%; } + + .push-m-3 { + left: 25.5%; } + [dir="rtl"] .push-m-3 { + left: auto; + right: 25.5%; } + + .pull-m-3 { + right: 25.5%; } + [dir="rtl"] .pull-m-3 { + right: auto; + left: 25.5%; } + + .col-m-4 { + width: 32%; } + + .offset-m-4 { + margin-left: 34%; } + [dir="rtl"] .offset-m-4 { + margin-left: 0; + margin-right: 34%; } + + [class*=col-] + .offset-m-4 { + margin-left: 36%; } + [dir="rtl"] [class*=col-] + .offset-m-4 { + margin-left: 0; + margin-right: 36%; } + + .push-m-4 { + left: 34%; } + [dir="rtl"] .push-m-4 { + left: auto; + right: 34%; } + + .pull-m-4 { + right: 34%; } + [dir="rtl"] .pull-m-4 { + right: auto; + left: 34%; } + + .col-m-5 { + width: 40.5%; } + + .offset-m-5 { + margin-left: 42.5%; } + [dir="rtl"] .offset-m-5 { + margin-left: 0; + margin-right: 42.5%; } + + [class*=col-] + .offset-m-5 { + margin-left: 44.5%; } + [dir="rtl"] [class*=col-] + .offset-m-5 { + margin-left: 0; + margin-right: 44.5%; } + + .push-m-5 { + left: 42.5%; } + [dir="rtl"] .push-m-5 { + left: auto; + right: 42.5%; } + + .pull-m-5 { + right: 42.5%; } + [dir="rtl"] .pull-m-5 { + right: auto; + left: 42.5%; } + + .col-m-6 { + width: 49%; } + + .offset-m-6 { + margin-left: 51%; } + [dir="rtl"] .offset-m-6 { + margin-left: 0; + margin-right: 51%; } + + [class*=col-] + .offset-m-6 { + margin-left: 53%; } + [dir="rtl"] [class*=col-] + .offset-m-6 { + margin-left: 0; + margin-right: 53%; } + + .push-m-6 { + left: 51%; } + [dir="rtl"] .push-m-6 { + left: auto; + right: 51%; } + + .pull-m-6 { + right: 51%; } + [dir="rtl"] .pull-m-6 { + right: auto; + left: 51%; } + + .col-m-7 { + width: 57.5%; } + + .offset-m-7 { + margin-left: 59.5%; } + [dir="rtl"] .offset-m-7 { + margin-left: 0; + margin-right: 59.5%; } + + [class*=col-] + .offset-m-7 { + margin-left: 61.5%; } + [dir="rtl"] [class*=col-] + .offset-m-7 { + margin-left: 0; + margin-right: 61.5%; } + + .push-m-7 { + left: 59.5%; } + [dir="rtl"] .push-m-7 { + left: auto; + right: 59.5%; } + + .pull-m-7 { + right: 59.5%; } + [dir="rtl"] .pull-m-7 { + right: auto; + left: 59.5%; } + + .col-m-8 { + width: 66%; } + + .offset-m-8 { + margin-left: 68%; } + [dir="rtl"] .offset-m-8 { + margin-left: 0; + margin-right: 68%; } + + [class*=col-] + .offset-m-8 { + margin-left: 70%; } + [dir="rtl"] [class*=col-] + .offset-m-8 { + margin-left: 0; + margin-right: 70%; } + + .push-m-8 { + left: 68%; } + [dir="rtl"] .push-m-8 { + left: auto; + right: 68%; } + + .pull-m-8 { + right: 68%; } + [dir="rtl"] .pull-m-8 { + right: auto; + left: 68%; } + + .col-m-9 { + width: 74.5%; } + + .offset-m-9 { + margin-left: 76.5%; } + [dir="rtl"] .offset-m-9 { + margin-left: 0; + margin-right: 76.5%; } + + [class*=col-] + .offset-m-9 { + margin-left: 78.5%; } + [dir="rtl"] [class*=col-] + .offset-m-9 { + margin-left: 0; + margin-right: 78.5%; } + + .push-m-9 { + left: 76.5%; } + [dir="rtl"] .push-m-9 { + left: auto; + right: 76.5%; } + + .pull-m-9 { + right: 76.5%; } + [dir="rtl"] .pull-m-9 { + right: auto; + left: 76.5%; } + + .col-m-10 { + width: 83%; } + + .offset-m-10 { + margin-left: 85%; } + [dir="rtl"] .offset-m-10 { + margin-left: 0; + margin-right: 85%; } + + [class*=col-] + .offset-m-10 { + margin-left: 87%; } + [dir="rtl"] [class*=col-] + .offset-m-10 { + margin-left: 0; + margin-right: 87%; } + + .push-m-10 { + left: 85%; } + [dir="rtl"] .push-m-10 { + left: auto; + right: 85%; } + + .pull-m-10 { + right: 85%; } + [dir="rtl"] .pull-m-10 { + right: auto; + left: 85%; } + + .col-m-11 { + width: 91.5%; } + + .offset-m-11 { + margin-left: 93.5%; } + [dir="rtl"] .offset-m-11 { + margin-left: 0; + margin-right: 93.5%; } + + [class*=col-] + .offset-m-11 { + margin-left: 95.5%; } + [dir="rtl"] [class*=col-] + .offset-m-11 { + margin-left: 0; + margin-right: 95.5%; } + + .push-m-11 { + left: 93.5%; } + [dir="rtl"] .push-m-11 { + left: auto; + right: 93.5%; } + + .pull-m-11 { + right: 93.5%; } + [dir="rtl"] .pull-m-11 { + right: auto; + left: 93.5%; } + + .col-m-12 { + width: 100%; } + + .col-m-12, + [class*=col-] + [class*=col-m-12] { + margin-left: 0; } + [dir="rtl"] .col-m-12, [dir="rtl"] + [class*=col-] + [class*=col-m-12] { + margin-right: 0; } + + .no-gutter > .col-m-1 { + width: 8.3333%; } + .no-gutter > .offset-m-1 { + margin-left: 8.3333%; } + [dir="rtl"] .no-gutter > .offset-m-1 { + margin-left: 0; + margin-right: 8.3333%; } + .no-gutter > .push-m-1 { + left: 8.3333%; } + [dir="rtl"] .no-gutter > .push-m-1 { + left: auto; + right: 8.3333%; } + .no-gutter > .pull-m-1 { + right: 8.3333%; } + [dir="rtl"] .no-gutter > .pull-m-1 { + right: auto; + left: 8.3333%; } + .no-gutter > .col-m-2 { + width: 16.6667%; } + .no-gutter > .offset-m-2 { + margin-left: 16.6667%; } + [dir="rtl"] .no-gutter > .offset-m-2 { + margin-left: 0; + margin-right: 16.6667%; } + .no-gutter > .push-m-2 { + left: 16.6667%; } + [dir="rtl"] .no-gutter > .push-m-2 { + left: auto; + right: 16.6667%; } + .no-gutter > .pull-m-2 { + right: 16.6667%; } + [dir="rtl"] .no-gutter > .pull-m-2 { + right: auto; + left: 16.6667%; } + .no-gutter > .col-m-3 { + width: 25%; } + .no-gutter > .offset-m-3 { + margin-left: 25%; } + [dir="rtl"] .no-gutter > .offset-m-3 { + margin-left: 0; + margin-right: 25%; } + .no-gutter > .push-m-3 { + left: 25%; } + [dir="rtl"] .no-gutter > .push-m-3 { + left: auto; + right: 25%; } + .no-gutter > .pull-m-3 { + right: 25%; } + [dir="rtl"] .no-gutter > .pull-m-3 { + right: auto; + left: 25%; } + .no-gutter > .col-m-4 { + width: 33.3333%; } + .no-gutter > .offset-m-4 { + margin-left: 33.3333%; } + [dir="rtl"] .no-gutter > .offset-m-4 { + margin-left: 0; + margin-right: 33.3333%; } + .no-gutter > .push-m-4 { + left: 33.3333%; } + [dir="rtl"] .no-gutter > .push-m-4 { + left: auto; + right: 33.3333%; } + .no-gutter > .pull-m-4 { + right: 33.3333%; } + [dir="rtl"] .no-gutter > .pull-m-4 { + right: auto; + left: 33.3333%; } + .no-gutter > .col-m-5 { + width: 41.6667%; } + .no-gutter > .offset-m-5 { + margin-left: 41.6667%; } + [dir="rtl"] .no-gutter > .offset-m-5 { + margin-left: 0; + margin-right: 41.6667%; } + .no-gutter > .push-m-5 { + left: 41.6667%; } + [dir="rtl"] .no-gutter > .push-m-5 { + left: auto; + right: 41.6667%; } + .no-gutter > .pull-m-5 { + right: 41.6667%; } + [dir="rtl"] .no-gutter > .pull-m-5 { + right: auto; + left: 41.6667%; } + .no-gutter > .col-m-6 { + width: 50%; } + .no-gutter > .offset-m-6 { + margin-left: 50%; } + [dir="rtl"] .no-gutter > .offset-m-6 { + margin-left: 0; + margin-right: 50%; } + .no-gutter > .push-m-6 { + left: 50%; } + [dir="rtl"] .no-gutter > .push-m-6 { + left: auto; + right: 50%; } + .no-gutter > .pull-m-6 { + right: 50%; } + [dir="rtl"] .no-gutter > .pull-m-6 { + right: auto; + left: 50%; } + .no-gutter > .col-m-7 { + width: 58.3333%; } + .no-gutter > .offset-m-7 { + margin-left: 58.3333%; } + [dir="rtl"] .no-gutter > .offset-m-7 { + margin-left: 0; + margin-right: 58.3333%; } + .no-gutter > .push-m-7 { + left: 58.3333%; } + [dir="rtl"] .no-gutter > .push-m-7 { + left: auto; + right: 58.3333%; } + .no-gutter > .pull-m-7 { + right: 58.3333%; } + [dir="rtl"] .no-gutter > .pull-m-7 { + right: auto; + left: 58.3333%; } + .no-gutter > .col-m-8 { + width: 66.6667%; } + .no-gutter > .offset-m-8 { + margin-left: 66.6667%; } + [dir="rtl"] .no-gutter > .offset-m-8 { + margin-left: 0; + margin-right: 66.6667%; } + .no-gutter > .push-m-8 { + left: 66.6667%; } + [dir="rtl"] .no-gutter > .push-m-8 { + left: auto; + right: 66.6667%; } + .no-gutter > .pull-m-8 { + right: 66.6667%; } + [dir="rtl"] .no-gutter > .pull-m-8 { + right: auto; + left: 66.6667%; } + .no-gutter > .col-m-9 { + width: 75%; } + .no-gutter > .offset-m-9 { + margin-left: 75%; } + [dir="rtl"] .no-gutter > .offset-m-9 { + margin-left: 0; + margin-right: 75%; } + .no-gutter > .push-m-9 { + left: 75%; } + [dir="rtl"] .no-gutter > .push-m-9 { + left: auto; + right: 75%; } + .no-gutter > .pull-m-9 { + right: 75%; } + [dir="rtl"] .no-gutter > .pull-m-9 { + right: auto; + left: 75%; } + .no-gutter > .col-m-10 { + width: 83.3333%; } + .no-gutter > .offset-m-10 { + margin-left: 83.3333%; } + [dir="rtl"] .no-gutter > .offset-m-10 { + margin-left: 0; + margin-right: 83.3333%; } + .no-gutter > .push-m-10 { + left: 83.3333%; } + [dir="rtl"] .no-gutter > .push-m-10 { + left: auto; + right: 83.3333%; } + .no-gutter > .pull-m-10 { + right: 83.3333%; } + [dir="rtl"] .no-gutter > .pull-m-10 { + right: auto; + left: 83.3333%; } + .no-gutter > .col-m-11 { + width: 91.6667%; } + .no-gutter > .offset-m-11 { + margin-left: 91.6667%; } + [dir="rtl"] .no-gutter > .offset-m-11 { + margin-left: 0; + margin-right: 91.6667%; } + .no-gutter > .push-m-11 { + left: 91.6667%; } + [dir="rtl"] .no-gutter > .push-m-11 { + left: auto; + right: 91.6667%; } + .no-gutter > .pull-m-11 { + right: 91.6667%; } + [dir="rtl"] .no-gutter > .pull-m-11 { + right: auto; + left: 91.6667%; } + .no-gutter > .col-m-12 { + width: 100%; } + .no-gutter > .offset-m-12 { + margin-left: 100%; } + [dir="rtl"] .no-gutter > .offset-m-12 { + margin-left: 0; + margin-right: 100%; } + .no-gutter > .push-m-12 { + left: 100%; } + [dir="rtl"] .no-gutter > .push-m-12 { + left: auto; + right: 100%; } + .no-gutter > .pull-m-12 { + right: 100%; } + [dir="rtl"] .no-gutter > .pull-m-12 { + right: auto; + left: 100%; } } /* - * Basic layout. + * Large */ - [data-table-list] { - opacity: 0; - } - - .table-list { - display: block; - } - - .table-list thead, - .table-list tfoot, - .table-list th { - display: none; - } - - .table-list tbody, - .table-list tr, - .table-list td, - .table-list th[scope="row"] { - display: block; - } - - .table-list tr:before, - .table-list tr:after { - content: ""; - display: table; - } - - .table-list tr:after { - clear: both; - } - - .table-list td, - .table-list th[scope="row"] { - float: left; - width: 100%; - } - - .table-list td:before, - .table-list td:after, - .table-list th[scope="row"]:before, - .table-list th[scope="row"]:after { - content: attr(data-thead); - font-weight: bold; - display: block; - padding: .5em 0; - } - - .table-list td:after, - .table-list th[scope="row"]:after { - content: attr(data-tfoot); - } - - /* - * Bordered - */ - .table-list.table-bordered { - border-top-style: none; - } -} +@media (min-width: 75em) { + [class*=col-l] + [class*=col-l] { + margin-left: 2%; } + [dir="rtl"] [class*=col-l] + [class*=col-l] { + margin-left: 0; + margin-right: 2%; } + + .no-gutter > [class*=col-l] { + margin-left: 0; } + [dir="rtl"] .no-gutter > [class*=col-l] { + margin-left: 0; + margin-right: 0; } + + [class*=col-].reset-l { + clear: both; + margin-left: 0 !important; } + [dir="rtl"] [class*=col-].reset-l { + margin-right: 0 !important; } + + .col-l-1 { + width: 6.5%; } + + .offset-l-1 { + margin-left: 8.5%; } + [dir="rtl"] .offset-l-1 { + margin-left: 0; + margin-right: 8.5%; } + + [class*=col-] + .offset-l-1 { + margin-left: 10.5%; } + [dir="rtl"] [class*=col-] + .offset-l-1 { + margin-left: 0; + margin-right: 10.5%; } + + .push-l-1 { + left: 8.5%; } + [dir="rtl"] .push-l-1 { + left: auto; + right: 8.5%; } + + .pull-l-1 { + right: 8.5%; } + [dir="rtl"] .pull-l-1 { + right: auto; + left: 8.5%; } + + .col-l-2 { + width: 15%; } + + .offset-l-2 { + margin-left: 17%; } + [dir="rtl"] .offset-l-2 { + margin-left: 0; + margin-right: 17%; } + + [class*=col-] + .offset-l-2 { + margin-left: 19%; } + [dir="rtl"] [class*=col-] + .offset-l-2 { + margin-left: 0; + margin-right: 19%; } + + .push-l-2 { + left: 17%; } + [dir="rtl"] .push-l-2 { + left: auto; + right: 17%; } + + .pull-l-2 { + right: 17%; } + [dir="rtl"] .pull-l-2 { + right: auto; + left: 17%; } + + .col-l-3 { + width: 23.5%; } + + .offset-l-3 { + margin-left: 25.5%; } + [dir="rtl"] .offset-l-3 { + margin-left: 0; + margin-right: 25.5%; } + + [class*=col-] + .offset-l-3 { + margin-left: 27.5%; } + [dir="rtl"] [class*=col-] + .offset-l-3 { + margin-left: 0; + margin-right: 27.5%; } + + .push-l-3 { + left: 25.5%; } + [dir="rtl"] .push-l-3 { + left: auto; + right: 25.5%; } + + .pull-l-3 { + right: 25.5%; } + [dir="rtl"] .pull-l-3 { + right: auto; + left: 25.5%; } + + .col-l-4 { + width: 32%; } + + .offset-l-4 { + margin-left: 34%; } + [dir="rtl"] .offset-l-4 { + margin-left: 0; + margin-right: 34%; } + + [class*=col-] + .offset-l-4 { + margin-left: 36%; } + [dir="rtl"] [class*=col-] + .offset-l-4 { + margin-left: 0; + margin-right: 36%; } + + .push-l-4 { + left: 34%; } + [dir="rtl"] .push-l-4 { + left: auto; + right: 34%; } + + .pull-l-4 { + right: 34%; } + [dir="rtl"] .pull-l-4 { + right: auto; + left: 34%; } + + .col-l-5 { + width: 40.5%; } + + .offset-l-5 { + margin-left: 42.5%; } + [dir="rtl"] .offset-l-5 { + margin-left: 0; + margin-right: 42.5%; } + + [class*=col-] + .offset-l-5 { + margin-left: 44.5%; } + [dir="rtl"] [class*=col-] + .offset-l-5 { + margin-left: 0; + margin-right: 44.5%; } + + .push-l-5 { + left: 42.5%; } + [dir="rtl"] .push-l-5 { + left: auto; + right: 42.5%; } + + .pull-l-5 { + right: 42.5%; } + [dir="rtl"] .pull-l-5 { + right: auto; + left: 42.5%; } + + .col-l-6 { + width: 49%; } + + .offset-l-6 { + margin-left: 51%; } + [dir="rtl"] .offset-l-6 { + margin-left: 0; + margin-right: 51%; } + + [class*=col-] + .offset-l-6 { + margin-left: 53%; } + [dir="rtl"] [class*=col-] + .offset-l-6 { + margin-left: 0; + margin-right: 53%; } + + .push-l-6 { + left: 51%; } + [dir="rtl"] .push-l-6 { + left: auto; + right: 51%; } + + .pull-l-6 { + right: 51%; } + [dir="rtl"] .pull-l-6 { + right: auto; + left: 51%; } + + .col-l-7 { + width: 57.5%; } + + .offset-l-7 { + margin-left: 59.5%; } + [dir="rtl"] .offset-l-7 { + margin-left: 0; + margin-right: 59.5%; } + + [class*=col-] + .offset-l-7 { + margin-left: 61.5%; } + [dir="rtl"] [class*=col-] + .offset-l-7 { + margin-left: 0; + margin-right: 61.5%; } + + .push-l-7 { + left: 59.5%; } + [dir="rtl"] .push-l-7 { + left: auto; + right: 59.5%; } + + .pull-l-7 { + right: 59.5%; } + [dir="rtl"] .pull-l-7 { + right: auto; + left: 59.5%; } + + .col-l-8 { + width: 66%; } + + .offset-l-8 { + margin-left: 68%; } + [dir="rtl"] .offset-l-8 { + margin-left: 0; + margin-right: 68%; } + + [class*=col-] + .offset-l-8 { + margin-left: 70%; } + [dir="rtl"] [class*=col-] + .offset-l-8 { + margin-left: 0; + margin-right: 70%; } + + .push-l-8 { + left: 68%; } + [dir="rtl"] .push-l-8 { + left: auto; + right: 68%; } + + .pull-l-8 { + right: 68%; } + [dir="rtl"] .pull-l-8 { + right: auto; + left: 68%; } + + .col-l-9 { + width: 74.5%; } + + .offset-l-9 { + margin-left: 76.5%; } + [dir="rtl"] .offset-l-9 { + margin-left: 0; + margin-right: 76.5%; } + + [class*=col-] + .offset-l-9 { + margin-left: 78.5%; } + [dir="rtl"] [class*=col-] + .offset-l-9 { + margin-left: 0; + margin-right: 78.5%; } + + .push-l-9 { + left: 76.5%; } + [dir="rtl"] .push-l-9 { + left: auto; + right: 76.5%; } + + .pull-l-9 { + right: 76.5%; } + [dir="rtl"] .pull-l-9 { + right: auto; + left: 76.5%; } + + .col-l-10 { + width: 83%; } + + .offset-l-10 { + margin-left: 85%; } + [dir="rtl"] .offset-l-10 { + margin-left: 0; + margin-right: 85%; } + + [class*=col-] + .offset-l-10 { + margin-left: 87%; } + [dir="rtl"] [class*=col-] + .offset-l-10 { + margin-left: 0; + margin-right: 87%; } + + .push-l-10 { + left: 85%; } + [dir="rtl"] .push-l-10 { + left: auto; + right: 85%; } + + .pull-l-10 { + right: 85%; } + [dir="rtl"] .pull-l-10 { + right: auto; + left: 85%; } + + .col-l-11 { + width: 91.5%; } + + .offset-l-11 { + margin-left: 93.5%; } + [dir="rtl"] .offset-l-11 { + margin-left: 0; + margin-right: 93.5%; } + + [class*=col-] + .offset-l-11 { + margin-left: 95.5%; } + [dir="rtl"] [class*=col-] + .offset-l-11 { + margin-left: 0; + margin-right: 95.5%; } + + .push-l-11 { + left: 93.5%; } + [dir="rtl"] .push-l-11 { + left: auto; + right: 93.5%; } + + .pull-l-11 { + right: 93.5%; } + [dir="rtl"] .pull-l-11 { + right: auto; + left: 93.5%; } + + .col-l-12 { + width: 100%; } + + .col-l-12, + [class*=col-] + [class*=col-l-12] { + margin-left: 0; } + [dir="rtl"] .col-l-12, [dir="rtl"] + [class*=col-] + [class*=col-l-12] { + margin-right: 0; } + + .no-gutter > .col-l-1 { + width: 8.3333%; } + .no-gutter > .offset-l-1 { + margin-left: 8.3333%; } + [dir="rtl"] .no-gutter > .offset-l-1 { + margin-left: 0; + margin-right: 8.3333%; } + .no-gutter > .push-l-1 { + left: 8.3333%; } + [dir="rtl"] .no-gutter > .push-l-1 { + left: auto; + right: 8.3333%; } + .no-gutter > .pull-l-1 { + right: 8.3333%; } + [dir="rtl"] .no-gutter > .pull-l-1 { + right: auto; + left: 8.3333%; } + .no-gutter > .col-l-2 { + width: 16.6667%; } + .no-gutter > .offset-l-2 { + margin-left: 16.6667%; } + [dir="rtl"] .no-gutter > .offset-l-2 { + margin-left: 0; + margin-right: 16.6667%; } + .no-gutter > .push-l-2 { + left: 16.6667%; } + [dir="rtl"] .no-gutter > .push-l-2 { + left: auto; + right: 16.6667%; } + .no-gutter > .pull-l-2 { + right: 16.6667%; } + [dir="rtl"] .no-gutter > .pull-l-2 { + right: auto; + left: 16.6667%; } + .no-gutter > .col-l-3 { + width: 25%; } + .no-gutter > .offset-l-3 { + margin-left: 25%; } + [dir="rtl"] .no-gutter > .offset-l-3 { + margin-left: 0; + margin-right: 25%; } + .no-gutter > .push-l-3 { + left: 25%; } + [dir="rtl"] .no-gutter > .push-l-3 { + left: auto; + right: 25%; } + .no-gutter > .pull-l-3 { + right: 25%; } + [dir="rtl"] .no-gutter > .pull-l-3 { + right: auto; + left: 25%; } + .no-gutter > .col-l-4 { + width: 33.3333%; } + .no-gutter > .offset-l-4 { + margin-left: 33.3333%; } + [dir="rtl"] .no-gutter > .offset-l-4 { + margin-left: 0; + margin-right: 33.3333%; } + .no-gutter > .push-l-4 { + left: 33.3333%; } + [dir="rtl"] .no-gutter > .push-l-4 { + left: auto; + right: 33.3333%; } + .no-gutter > .pull-l-4 { + right: 33.3333%; } + [dir="rtl"] .no-gutter > .pull-l-4 { + right: auto; + left: 33.3333%; } + .no-gutter > .col-l-5 { + width: 41.6667%; } + .no-gutter > .offset-l-5 { + margin-left: 41.6667%; } + [dir="rtl"] .no-gutter > .offset-l-5 { + margin-left: 0; + margin-right: 41.6667%; } + .no-gutter > .push-l-5 { + left: 41.6667%; } + [dir="rtl"] .no-gutter > .push-l-5 { + left: auto; + right: 41.6667%; } + .no-gutter > .pull-l-5 { + right: 41.6667%; } + [dir="rtl"] .no-gutter > .pull-l-5 { + right: auto; + left: 41.6667%; } + .no-gutter > .col-l-6 { + width: 50%; } + .no-gutter > .offset-l-6 { + margin-left: 50%; } + [dir="rtl"] .no-gutter > .offset-l-6 { + margin-left: 0; + margin-right: 50%; } + .no-gutter > .push-l-6 { + left: 50%; } + [dir="rtl"] .no-gutter > .push-l-6 { + left: auto; + right: 50%; } + .no-gutter > .pull-l-6 { + right: 50%; } + [dir="rtl"] .no-gutter > .pull-l-6 { + right: auto; + left: 50%; } + .no-gutter > .col-l-7 { + width: 58.3333%; } + .no-gutter > .offset-l-7 { + margin-left: 58.3333%; } + [dir="rtl"] .no-gutter > .offset-l-7 { + margin-left: 0; + margin-right: 58.3333%; } + .no-gutter > .push-l-7 { + left: 58.3333%; } + [dir="rtl"] .no-gutter > .push-l-7 { + left: auto; + right: 58.3333%; } + .no-gutter > .pull-l-7 { + right: 58.3333%; } + [dir="rtl"] .no-gutter > .pull-l-7 { + right: auto; + left: 58.3333%; } + .no-gutter > .col-l-8 { + width: 66.6667%; } + .no-gutter > .offset-l-8 { + margin-left: 66.6667%; } + [dir="rtl"] .no-gutter > .offset-l-8 { + margin-left: 0; + margin-right: 66.6667%; } + .no-gutter > .push-l-8 { + left: 66.6667%; } + [dir="rtl"] .no-gutter > .push-l-8 { + left: auto; + right: 66.6667%; } + .no-gutter > .pull-l-8 { + right: 66.6667%; } + [dir="rtl"] .no-gutter > .pull-l-8 { + right: auto; + left: 66.6667%; } + .no-gutter > .col-l-9 { + width: 75%; } + .no-gutter > .offset-l-9 { + margin-left: 75%; } + [dir="rtl"] .no-gutter > .offset-l-9 { + margin-left: 0; + margin-right: 75%; } + .no-gutter > .push-l-9 { + left: 75%; } + [dir="rtl"] .no-gutter > .push-l-9 { + left: auto; + right: 75%; } + .no-gutter > .pull-l-9 { + right: 75%; } + [dir="rtl"] .no-gutter > .pull-l-9 { + right: auto; + left: 75%; } + .no-gutter > .col-l-10 { + width: 83.3333%; } + .no-gutter > .offset-l-10 { + margin-left: 83.3333%; } + [dir="rtl"] .no-gutter > .offset-l-10 { + margin-left: 0; + margin-right: 83.3333%; } + .no-gutter > .push-l-10 { + left: 83.3333%; } + [dir="rtl"] .no-gutter > .push-l-10 { + left: auto; + right: 83.3333%; } + .no-gutter > .pull-l-10 { + right: 83.3333%; } + [dir="rtl"] .no-gutter > .pull-l-10 { + right: auto; + left: 83.3333%; } + .no-gutter > .col-l-11 { + width: 91.6667%; } + .no-gutter > .offset-l-11 { + margin-left: 91.6667%; } + [dir="rtl"] .no-gutter > .offset-l-11 { + margin-left: 0; + margin-right: 91.6667%; } + .no-gutter > .push-l-11 { + left: 91.6667%; } + [dir="rtl"] .no-gutter > .push-l-11 { + left: auto; + right: 91.6667%; } + .no-gutter > .pull-l-11 { + right: 91.6667%; } + [dir="rtl"] .no-gutter > .pull-l-11 { + right: auto; + left: 91.6667%; } + .no-gutter > .col-l-12 { + width: 100%; } + .no-gutter > .offset-l-12 { + margin-left: 100%; } + [dir="rtl"] .no-gutter > .offset-l-12 { + margin-left: 0; + margin-right: 100%; } + .no-gutter > .push-l-12 { + left: 100%; } + [dir="rtl"] .no-gutter > .push-l-12 { + left: auto; + right: 100%; } + .no-gutter > .pull-l-12 { + right: 100%; } + [dir="rtl"] .no-gutter > .pull-l-12 { + right: auto; + left: 100%; } } .alert { - background-color: #FCF8E3; - border: 1px solid #F2E187; - color: #9C8611; - margin: 1em 0; - padding: 0 2.17em 0 1em; -} - - .alert:before, .alert:after { - content: ""; - display: table; - } - - .alert:after { - clear: both; - } - -.alert-heading { - color: inherit; -} - -.alert .close { - color: inherit; + position: relative; + margin: 1em 0; + padding: 0 1em; + background-color: #fcf8e3; + border: 1px solid #f2e187; + color: #6e5e0c; } + .alert .close { + position: relative; + right: -1.73em; + top: .13em; float: right; + color: inherit; font-size: 1.17em; font-weight: bold; - line-height: 1em; - position: relative; - right: -1.17em; - text-decoration: none; - top: 0.33em; -} - + line-height: 1em; } + [dir="rtl"] .alert .close { + float: left; + right: auto; + left: -1.73em; } + .alert .close, .alert .close:active, .alert .close:focus, .alert .close:hover { + background-color: transparent; + border: none; } .alert .close:hover { - text-decoration: underline; - } -/* - * Remove the gap between images, videos, audio and canvas and the bottom of - * their containers: h5bp.com/i/440 - */ + text-decoration: underline; } -audio, -canvas, -img, -video { - vertical-align: middle; -} +.alert-dismissable { + padding-right: 2.17em; } + [dir="rtl"] .alert-dismissable { + padding-right: 1em; + padding-left: 2.17em; } -/* - * Make the image responsive. - */ -img { - max-width: 100%; - height: auto; -} +.alert-heading { + color: inherit; } -/* - * Remove the border around images in anchors. +/** + * Normalize button borders, color, and padding. + * 1: Remove rounded corners on iPhone. + * 2: Remove 300ms touch delay. */ -a img { - border: none; -} - +button, +input[type="submit"], +input[type="button"], +input[type="reset"] { + -webkit-appearance: none; + /* 1 */ + border-radius: 0; + /* 1 */ + color: inherit; + cursor: pointer; + display: inline-block; + padding: .5em 1em; + line-height: normal; + margin-bottom: 0; + background: #dadada; + border: solid 1px silver; + -ms-touch-action: manipulation; + touch-action: manipulation; + /*2 */ + text-decoration: none; + /** + * Inline buttons designed for rendering next to inputs. + * 1. Fix inline-block margin. + * 2. Pad buttons. + */ } + button:hover, + input[type="submit"]:hover, + input[type="button"]:hover, + input[type="reset"]:hover { + background-color: #cdcdcd; + border: solid 1px silver; } + button:active, + input[type="submit"]:active, + input[type="button"]:active, + input[type="reset"]:active { + background-color: #e7e7e7; + outline: none; } + button.btn-inline, + input[type="submit"].btn-inline, + input[type="button"].btn-inline, + input[type="reset"].btn-inline { + margin-left: -.27em; + /* 1 */ + padding: .25em 1em; + /*2 */ } + [dir="rtl"] button.btn-inline, [dir="rtl"] + input[type="submit"].btn-inline, [dir="rtl"] + input[type="button"].btn-inline, [dir="rtl"] + input[type="reset"].btn-inline { + margin-left: auto; + margin-right: -.27em; } -/* - * Properly scale your video on any device based on YouTube/Dailymotion ratio. +/** + * 1. Fix IOS 6/7 opacity issue */ -.media { - position: relative; - padding-top: 30px; - padding-bottom: 56.25%; - height: 0; - height: auto; - max-width: 100%; - margin-bottom: 1em; - overflow: hidden; -} +button[disabled], +input[type="submit"][disabled], +input[type="button"][disabled], +input[type="reset"][disabled] { + background-color: #e7e7e7; + color: #5d5d5d; + cursor: not-allowed; + opacity: 1; + /* 1 */ } -/* - * Scrollable media +/** + * Reset width for inputs */ -.media-scroll { - overflow-y: auto; - -webkit-overflow-scrolling: touch; -} +input[type="submit"], input[type="reset"], input[type="button"] { + max-width: none; + width: auto; } -/* - * Widescreen mode. +/** + * Grouped buttons. */ -.media.widescreen { - padding-bottom: 45%; -} +.btn-group { + display: inline-block; + position: relative; + vertical-align: middle; + white-space: nowrap; } + .btn-group > button, + .btn-group > input[type="submit"], + .btn-group > input[type="button"], + .btn-group > input[type="reset"] { + float: left; } + [dir="rtl"] .btn-group > button, [dir="rtl"] + .btn-group > input[type="submit"], [dir="rtl"] + .btn-group > input[type="button"], [dir="rtl"] + .btn-group > input[type="reset"] { + float: right; } /* - * Vimeo places the controls on the player itself. + * Colors and padding. */ -.media.vimeo { - padding-top: 0; -} +pre, +code, +samp, +kbd { + padding: .5em; + background-color: #f7f7f9; + border: 1px solid silver; + color: #ad0d36; } -/* - * Instagram - */ -.media.instagram { - height: auto; - max-width: none; - padding-bottom: 120%; -} +code > kbd { + background-color: #e8e8ee; } /* - * Vine + * Prevent overlap on concurrent lines. */ -.media.vine { - height: auto; - max-width: none; - padding-bottom: 100%; -} +code, +samp, +kbd { + padding: .0667em .25em; } /* - * Getty + * Prevent wrapping. */ -.media.getty { - height: auto; - padding-bottom: 79.96632996632997%; -} - -.media.video { - padding-top: 0; -} +kbd { + white-space: nowrap; } /* - * The actual player. + * Reassert no wrapping. */ -.media iframe, -.media object, -.media embed, -.media video { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - padding: 0; - margin: 0; - border: 0; - outline: none; - background-color: transparent; -} +pre { + overflow-x: auto; + /* + * Remove borders etc in pre. + */ } + pre code, + pre samp { + padding: 0; + border: none; } + pre code { + word-wrap: normal; + white-space: pre; } /* - * Position the image absolutely and then move it's four positions - * 1000000% out of the container. This with an auto margin is the core of the trick. - * Why such a large number? Firefox seems to have issue when using larger images even - * at 100%. + * Fixed height with overflow. + */ +.pre-scrollable { + max-height: 20em; + overflow-y: scroll; } + +/** + * Normalize */ -.media img { - position: absolute; - top: -1000000%; - right: -1000000%; - bottom: -1000000%; - left: -1000000%; - margin: auto; - width: 100%; -} -/* Normalize */ .form { - margin: 1em 0; -} + margin: 1em 0; } fieldset { - padding: 0; - margin: 0; - border: 0; -} + border: 0; + margin: 0; + padding: 0; } legend { - display: block; - width: 100%; - font-size: 1.17em; - margin-bottom: 1em; -} + display: block; + width: 100%; + margin-bottom: 1em; } +label, +label .input-group { + display: block; + margin-bottom: 1em; } label[for] { - cursor: pointer; -} + cursor: pointer; } +label > input, +label > input[type="checkbox"], +label > input[type="radio"], +label > select { + display: inline-block; + margin: 0 1em 0 0; + vertical-align: text-top; } select, textarea, input, .no-edit { - font-family: inherit; - padding: .25em; - color: #222; - background-color: #fff; - border-radius: 0; - border: 1px solid #c0c0c0; - width: 100%; - display: block; - margin-bottom: 1em; -} + background: white; + border: 1px solid silver; + border-radius: 0; + color: #222222; + display: block; + font-family: inherit; + margin-bottom: 1em; + padding: .25em; + width: 100%; + /* + * Disabled + * 1. Override the value set in normalize.css + * 2. Fix IOS 6/7 opacity issue + */ } + select[disabled], + textarea[disabled], + input[disabled], + .no-edit[disabled] { + background: #ebebeb; + border-color: silver; + color: silver; + cursor: not-allowed !important; + /* 1 */ + opacity: 1; } -label, -.input-group { - display: block; - margin-bottom: 1em; -} +/* + * Clean up that hideous file input. + */ +input[type="file"]::-ms-value { + background: white; + border: none; } + +input[type="file"]::-ms-browse { + background: #dadada; + border: solid 1px silver; + color: #222222; } + input[type="file"]::-ms-browse:active { + background-color: #e7e7e7; } input[type="color"] { - max-width: 105px; -} + max-width: 105px; } -@-moz-document url-prefix() { - /* - * Remove excess padding in Firefox - */ - input[type="color"] { - min-height: 1.8em; - padding: 0; - } -} +/* + * Declared separately to reduce selector duplication + * for padding + */ +input[type="radio"], +input[type="checkbox"] { + display: block; + line-height: inherit; + margin: .1875em .1875em .1875em 0; + min-height: 1em; + min-width: 1em; + padding: 0; + width: auto; } +input[type="radio"] { + border-color: transparent \9; + border-radius: 1em; } /* - * Add range styles for IE8 and IE9 - */ + * Add range styles for IE8 and IE9 + */ input[type="range"] { - padding: .25em 0; - padding: .25em \9; - background-color: #fff \9; - border: 1px solid transparent; - border: 1px solid #c0c0c0 \9; -} + background-color: #fff \9; + border: 1px solid #c0c0c0 \9; + border: 1px solid transparent; + padding: .25em 0; + padding: .25em \9; } + +/* + * Inline + */ +input.inline-block, +select.inline-block { + width: auto; } /* * 1. Remove borders and padding on range controls in IE10+ */ x::-ms-reveal, -input[type="range"] { /* 1 */ - border: 1px solid transparent; - padding: .25em 0; -} +input[type="range"] { + /* 1 */ + border: 1px solid transparent; + padding: .25em 0; } /* * Fix field styling on iPhone and iPad. @@ -2843,70 +2933,11 @@ input[type="tel"], input[type="email"], input[type="url"], input[type="color"] { - -webkit-appearance: none; /* 1 */ -} - -@media (-webkit-min-device-pixel-ratio:0) { - - /* - * Fix field styling on iPhone and iPad. - * 1. Add a select indicator - */ - select { - background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMC4wMzEiIGhlaWdodD0iMTAuNSI+PHBvbHlnb24gZmlsbD0iIzIyMiIgcG9pbnRzPSIxMSwwIDUuNSw5IDAsMCIvPjwvc3ZnPg==); /* 1 */ - background-repeat: no-repeat; - background-position: right center; - padding-right: 1.67em; - } - - /* - * Fix changing height issues on iOS7. - */ - input[type="datetime-local"], - input[type="date"], - input[type="week"], - input[type="month"], - input[type="time"], - input[type="number"] { - min-height: 2em; - } - - /* - * Remove excess padding in Webkit - */ - input[type="color"] { - min-height: 1.8em; - padding: 0; - } - - input[type="color"]::-webkit-color-swatch-wrapper { - padding: 0; - } - - input[type="color"]::-webkit-color-swatch { - border: none; - } -} - -/* - * Declared separately to reduce selector duplication - * for padding - */ -input[type="radio"], -input[type="checkbox"] { - padding: 0; - display: block; - margin: .1875em .1875em .1875em 0; - width: auto; - min-height: 1em; - min-width: 1em; - line-height: inherit; -} + -webkit-appearance: none; + /* 1 */ } -input[type="radio"] { - border-color: transparent \9; - border-radius: 1em; -} +select option { + height: 100%; } /* * Textareas : Multiple resizable options. @@ -2915,87 +2946,28 @@ input[type="radio"] { * 3: None */ textarea { - height: auto; - resize: both; - min-height: 5.25em; -} - - textarea.horizontal { - resize: horizontal; /* 1 */ - } - - textarea.vertical { - resize: vertical; /* 2 */ - } - - textarea.no-resize { - resize: none; /* 3 */ - } - -select option { - height: 100%; -} - -/* - * Focus - */ -textarea:focus, -input:focus, -select:focus, -.no-edit:focus { - border: 1px solid #00a9ec; - outline: 0; -} - -input[type="range"]:focus, -input[type="checkbox"]:focus, -input[type="radio"]:focus, -input[type="checkbox"]:checked { - border-color: transparent; - outline: 1px solid #00a9ec; - outline-offset: -1px; -} - -input[type="checkbox"]:focus, -input[type="checkbox"]:checked { - border-color: #c0c0c0; -} + height: auto; + min-height: 5.25em; + resize: both; } + textarea.horizontal { + resize: horizontal; + /* 1 */ } + textarea.vertical { + resize: vertical; + /*2 */ } + textarea.no-resize { + resize: none; + /* 3 */ } /* * Read only */ .no-edit, [readonly] { - cursor: not-allowed; - border-color: #ebebeb; -} - -/* - * Disabled - * 1. Override the value set in normalize.css - * 2. Fix IOS 6/7 opacity issue - */ -input[disabled], -select[disabled], -textarea[disabled] { - cursor: not-allowed !important; /* 1 */ - background-color: #ebebeb; - border-color: #c0c0c0; - color: #c0c0c0; - outline: 0 !important; - opacity: 1; -} - -label > input, -label > input[type="checkbox"], -label > input[type="radio"], -label > select { - display: inline-block; - margin: 0 1em 0 0; - vertical-align: text-top; -} + border-color: #ebebeb; + cursor: not-allowed; } -/* +/* * Placeholder : These have to be kept separate * 1. Safari and Chrome * 2. Firefox 4-18 @@ -3003,1093 +2975,1329 @@ label > select { * 4. IE10+ */ ::-webkit-input-placeholder { - color: #c0c0c0; /* 1 */ -} + color: silver; + /* 1 */ } :-moz-placeholder { - color: #c0c0c0; /* 2 */ -} + color: silver; + /*2 */ } ::-moz-placeholder { - color: #c0c0c0; /* 3 */ -} + color: silver; + /* 3 */ } :-ms-input-placeholder { - color: #c0c0c0; /* 4 */ -} + color: silver; + /* 4 */ } + +/* + * Actions - Contains buttons + */ +.form-actions { + margin: 1em 0; + padding: 1em 0; } + +@-moz-document url-prefix() { + /* + * Remove excess padding in Firefox + */ + input[type="color"] { + min-height: 1.8em; + padding: 0; } } +@media (-webkit-min-device-pixel-ratio: 0) { + /* + * Fix changing height issues on iOS7. + */ + input[type="datetime-local"], + input[type="date"], + input[type="week"], + input[type="month"], + input[type="time"], + input[type="number"] { + min-height: 2em; } + + /* + * Remove excess padding in Webkit + */ + input[type="color"] { + min-height: 1.8em; + padding: 0; } + input[type="color"]::-webkit-color-swatch-wrapper { + padding: 0; } + input[type="color"]::-webkit-color-swatch { + border: none; } + /* + * Fix field styling on iPhone and iPad. + * 1. Add a select indicator + */ + select { + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMC4wMzEiIGhlaWdodD0iMTAuNSI+PHBvbHlnb24gZmlsbD0iIzIyMiIgcG9pbnRzPSIxMSwwIDUuNSw5IDAsMCIvPjwvc3ZnPg==); + /* 1 */ + background-repeat: no-repeat; + background-position: right center; + padding-right: 1.67em; } + [dir="rtl"] select { + background-position: .67em center; + padding-right: 0; + padding-left: 1.67em; } } /* - * Full Width + * Unordered and ordered lists + * Scale the padding/margin with the base font. */ -.full-width { - max-width: 100% !important; - width: 100% !important; -} +ul, +ol { + margin: 1em 0; + padding-left: 2.5em; } + [dir="rtl"] ul, [dir="rtl"] + ol { + padding-left: 0; + padding-right: 2.5em; } + +ul ul, +ol ol { + margin: 0; } /* - * Inline + * No bullets on first level. */ -input.inline-block, -select.inline-block { - width: auto; -} +ul.no-bullets, +ol.no-bullets { + padding-left: 0; } + [dir="rtl"] ul.no-bullets, [dir="rtl"] + ol.no-bullets { + padding-right: 0; } + ul.no-bullets > li, + ol.no-bullets > li { + list-style: none; } /* - * Actions - Contains buttons + * Coloured lists. */ -.form-actions { - margin: 1em 0; - padding: 1em 0; -} +ul.colored, +ol.colored { + padding-left: 40px; } + ul.colored > li, + ol.colored > li { + list-style-type: none; + position: relative; + /* + * 1. Normalize funky webkit margin + * 2. Escaped unicode coloured circle. + * 3. Edit this property to change all colored class lists. + */ } + ul.colored > li:before, + ol.colored > li:before { + position: absolute; + top: 0; + left: -1em; + -webkit-margin-start: -.25em; + /* 1 */ + content: "\25cf"; + /*2 */ + color: #00a9ec; + /* 3 */ + font-size: 1em; + font-weight: bold; + text-align: right; + text-decoration: none; } + [dir="rtl"] ul.colored > li:before, [dir="rtl"] + ol.colored > li:before { + left: auto; + right: -1em; + text-align: left; } + /* - * Normalize button borders, color, and padding. - * 1: Remove rounded corners on iPhone. - * 2: Remove 300ms touch delay. + * Counter increment to replace standard numbers. */ +ol.colored { + counter-reset: foo; } + ol.colored > li { + counter-increment: foo; + /* + * Use the :before pseudo element to supply numbers. + * 1. The counter value. + * 2. Normalize funky webkit margin + */ } + ol.colored > li:before { + content: counter(foo) "."; + /* 1 */ + font-weight: normal; + left: -3.125em; + width: 2.5em; + -webkit-margin-start: 0; + /*2 */ } + [dir="rtl"] ol.colored > li:before { + left: auto; + right: -3.125em; } -button, -input[type="submit"], -input[type="button"], -input[type="reset"], -[role="button"] { - -webkit-appearance: none; /* 1 */ - border-radius: 0; /* 1 */ - display: inline-block; - padding: .5em 1em; - margin-bottom: 0; - line-height: normal; - border: solid 1px #c0c0c0; - background-color: #dadada; - color: inherit; - cursor: pointer; - -ms-touch-action: none; /* 2 */ - touch-action: none; /* 2 */ -} +/**Definition lists + * Prevent dt and dd collapse. + */ +dt, dd { + min-height: 1.4em; } + +@media (min-width: 48em) { + /* + * Horizontally styled definition list + */ + .dl-horizontal > dt { + clear: left; + float: left; + width: 9.375em; + white-space: nowrap; + overflow: hidden; + text-align: right; + text-overflow: ellipsis; } + [dir="rtl"] .dl-horizontal > dt { + clear: right; + float: right; + text-align: left; } + .dl-horizontal > dd { + margin-left: 10.375em; } + [dir="rtl"] .dl-horizontal > dd { + margin-left: auto; + margin-right: 10.375em; } } +/* + * Remove the gap between images, videos, audio and canvas and the bottom of + * their containers: h5bp.com/i/440 + */ +audio, +canvas, +img, +video { + vertical-align: middle; } /* - * Reset width for inputs + * Make the image responsive. + * 1: Fix svg aspect scaling in IE */ -input[type="submit"], -input[type="reset"], -input[type="button"] { - width: auto; +img { + max-width: 100%; + height: auto; } + img[src*=".svg"] { + width: 100% \9; + /* 1 */ } + +x::-ms-reveal, +img[src*=".svg"] { + width: 100%; + /* 1 */ } + +/* + * Remove the border around images in anchors. + */ +a img { + border: none; } + +/* + * Properly scale your video on any device based on common ratios. + * The code here is based on research and work by Theirry Koblentz, Anders Andersen, + * Niklaus Gerber, and Jeff Hobbs. + */ +.media { + height: 0; + height: auto; + margin-bottom: 1em; + max-width: 100%; + overflow: hidden; + padding-bottom: 56.25%; + padding-top: 30px; + position: relative; } + .media.widescreen { + padding-bottom: 45%; } + .media.vimeo { + padding-top: 0; } + .media.instagram { + height: auto; max-width: none; -} + padding-bottom: 120%; } + .media.vine { + height: auto; + max-width: none; + padding-bottom: 100%; } + .media.getty { + height: auto; + padding-bottom: 79.9663%; } + .media.video { + padding-top: 0; } + .media iframe, + .media object, + .media embed, + .media video { + background-color: transparent; + border: 0; + height: 100%; + left: 0; + margin: 0; + outline: none; + padding: 0; + position: absolute; + top: 0; + width: 100%; } + .media img { + /* + * Position the image absolutely and then move it's four positions + * 1000000% out of the container. This with an auto margin is the core of the trick. + * Why such a large number? Firefox seems to have issue when using larger images even + * at 100%. + */ + bottom: -1000000%; + left: -1000000%; + margin: auto; + position: absolute; + right: -1000000%; + top: -1000000%; + width: 100%; } + .media.media-scroll { + overflow-y: auto; + -webkit-overflow-scrolling: touch; } - /* - * Button states. - */ - button:hover, - input[type="submit"]:hover, - input[type="button"]:hover, - input[type="reset"]:hover, - [role="button"]:hover { - background-color: #cdcdcd; - } - - button:focus, - input[type="submit"]:focus, - input[type="button"]:focus, - input[type="reset"]:focus, - [role="button"]:focus { - outline: 1px solid #00a9ec; - outline-offset: -1px; - } - - button:active, - input[type="submit"]:active, - input[type="button"]:active, - input[type="reset"]:active, - [role="button"]:active { - background-color: #e7e7e7; - outline: none; - } - -[role="button"], -[role="button"]:hover, -[role="button"]:focus, -[role="button"]:active { - color: inherit; - text-decoration: none; -} +/* + * Make it responsive + */ +table { + margin: 1em 0; + max-width: 100%; + width: 100%; } + table th, + table td { + padding: .5em; + text-align: left; + vertical-align: top; } + [dir="rtl"] table th, [dir="rtl"] + table td { + text-align: right; } /* - * 1. Fix IOS 6/7 opacity issue + * Bordered tables + */ +.table-bordered { + border: 1px solid silver; + border-left-width: 0; + border-collapse: separate; } + .table-bordered th, + .table-bordered td { + border-top: 1px solid silver; + border-left: 1px solid silver; } + .table-bordered thead:first-child tr:first-child th, + .table-bordered tbody:first-child tr:first-child td { + border-top-width: 0; } + +/* + * Striped tables + */ +.table-striped tbody > tr:nth-child(odd) > td, +.table-striped tbody > tr:nth-child(odd) > th, +.table-row-alt > td, +.table-row-alt > th { + background-color: #ebebeb; } + +/* + * Overflow helpers */ - button[disabled], - input[type="submit"][disabled], - input[type="button"][disabled], - input[type="reset"][disabled], - [role="button"].disabled { - color: #5d5d5d; - background-color: #e7e7e7; - cursor: not-allowed; - opacity: 1 /* 1 */; - } +.table-scrollable { + margin: 1em 0; + overflow-y: hidden; + overflow-x: auto; + width: 100%; } + .table-scrollable table { + margin: 0; } + +.autosize, +[data-autosize] { + overflow: hidden; + -webkit-transition: height .3s linear; + transition: height .3s linear; } + +.autosize-clone { + position: absolute; + top: -99999px; + left: -99999px; + visibility: hidden; + overflow: hidden; + -webkit-transition: none; + transition: none; } + [dir="rtl"] .autosize-clone { + left: auto; + right: -99999px; } +/* + * 1: Prevent font shift on chrome. + */ +.carousel { + margin-bottom: 1em; + overflow: hidden; + position: relative; + -webkit-backface-visibility: hidden; + /* 1 */ + -webkit-perspective: 1000; + /* 1 */ + /* + * Default slide version + */ + /* + * Indicators + */ /* - * Inline buttons designed for rendering next to inputs. - * 1. Fix inline-block margin. - * 2. Pad buttons. - */ - button.btn-inline, - input[type="submit"].btn-inline, - input[type="button"].btn-inline, - input[type="reset"].btn-inline, - [role="button"].btn-inline { - margin-left: -.27em; /* 1 */ - padding: .25em 1em; /* 2 */ - } + * Next Last version + */ } + .carousel.no-transition > figure { + -webkit-transition-duration: 0s !important; + transition-duration: 0s !important; } + .carousel > figure { + margin: 0; + display: none; + position: relative; + -webkit-transition: .7s ease-in-out left; + transition: .7s ease-in-out left; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + [dir="rtl"] .carousel > figure { + -webkit-transition: .7s ease-in-out right; + transition: .7s ease-in-out right; } + .carousel > figure:focus:before { + content: ""; + position: absolute; + z-index: 1; + top: 1px; + right: 1px; + bottom: 1px; + left: 1px; + pointer-events: none; } + .carousel > figure > img { + display: block; + width: 100%; } + .carousel > figure > figcaption { + position: absolute; + bottom: 0; + width: 100%; + padding: 1px 1em; + background-color: #222222; + color: white; } + .carousel > ol { + left: 0; + list-style: none; + margin: 0; + padding: 0; + position: absolute; + right: 0; + text-align: center; + top: 1em; + z-index: 3; } + .carousel > ol li { + background-color: transparent; + border: 2px solid #222222; + cursor: pointer; + display: inline-block; + height: 1em; + margin: 1px; + text-indent: -9999px; + width: 1em; } + .carousel > ol li:hover { + background-color: silver; } + .carousel > ol .active { + background-color: white; } + .carousel > ol .active:hover { + background-color: white; } + .carousel .carousel-active, + .carousel .next, + .carousel .prev, + .carousel .swipe { + display: block; } + .carousel .carousel-active, + .carousel .next.left, + .carousel .prev.right { + left: 0; } + [dir="rtl"] .carousel .carousel-active, [dir="rtl"] + .carousel .next.left, [dir="rtl"] + .carousel .prev.right { + left: auto; + right: 0; } + .carousel .carousel-active { + position: relative !important; + z-index: 1; } + .carousel .carousel-active > figcaption { + position: static; } + .carousel .next, + .carousel .prev, + .carousel .swipe { + position: absolute; + z-index: 0; + top: 0; + width: 100%; + height: 100%; } + .carousel .next, + .carousel .carousel-active.right { + left: 100%; } + [dir="rtl"] .carousel .next, [dir="rtl"] + .carousel .carousel-active.right { + left: auto; + right: 100%; } + [dir="rtl"] .carousel .next.swiping, [dir="rtl"] + .carousel .carousel-active.right.swiping { + right: -100%; } + .carousel .prev, + .carousel .carousel-active.left { + left: -100%; } + [dir="rtl"] .carousel .prev, [dir="rtl"] + .carousel .carousel-active.left { + left: auto; + right: -100%; } + [dir="rtl"] .carousel .prev.swiping, [dir="rtl"] + .carousel .carousel-active.left.swiping { + right: 100%; } + +.carousel-control { + position: absolute; + left: 1px; + top: 40%; + z-index: 3; + display: block; + width: 2em; + margin-top: -1em; + padding: .5em; + font-size: 2em; + font-weight: bold; + text-align: center; } + [dir="rtl"] .carousel-control { + left: auto; + right: 1px; } + .carousel-control.forward { + left: auto; + right: 1px; } + [dir="rtl"] .carousel-control.forward { + right: auto; + left: 1px; } + .carousel-control, .carousel-control:active, .carousel-control:visited, .carousel-control:hover, .carousel-control:focus { + background-color: transparent; + border: none; + color: white; + text-decoration: none; } + .carousel-control:hover { + text-decoration: underline; } + +/* + * Fade version + */ +.carousel-fade > figure { + position: absolute; + top: 0; + right: 0 !important; + bottom: 0; + left: 0 !important; + width: 100%; + height: 100%; + opacity: 0; } + .carousel-fade > figure, [dir="rtl"] .carousel-fade > figure { + -webkit-transition: opacity .7s ease-in-out; + transition: opacity .7s ease-in-out; } +.carousel-fade > figure.swipe, +.carousel-fade > figure.next, +.carousel-fade > figure.prev { + z-index: 1; + opacity: 1; } +.carousel-fade > .carousel-active.swipe { + z-index: 2; } +.carousel-fade > .carousel-active { + position: relative; } +.carousel-fade .carousel-active { + opacity: 1; } + .carousel-fade .carousel-active.left, .carousel-fade .carousel-active.right { + z-index: 2; + opacity: 0; } +.carousel-fade .carousel-control, .carousel-fade .carousel-control:visited { + z-index: 3; } + +.accordion { + border: solid 1px silver; + margin-bottom: .125em; } + +.accordion-head { + border-bottom: solid 1px silver; + display: block; } + .accordion-head a { + display: block; + padding: .5em; } -/* - * Grouped buttons. - */ +.accordion-body { + padding: 0 .5em; } + .accordion-body.collapse { + margin-top: -1px; } -/* - * Clearfix: contain floats - */ -.btn-group:before, -.btn-group:after { - content: ""; - display: table; -} +.trans, +.collapse { + -webkit-transition: height .5s ease, width .5s ease; + transition: height .5s ease, width .5s ease; } -.btn-group:after { - clear: both; -} +.expand, +.collapse { + display: block; + height: auto; + margin-top: 0; + overflow: hidden; + position: relative; + width: auto; } -.btn-group { - position: relative; - display: inline-block; - white-space: nowrap; - vertical-align: middle; -} +.collapse { + height: 0; } + .collapse.width { + height: auto; + width: 0; } - .btn-group > * { - float: left; - } +.modal-on, +.modal-lock > body { + -ms-touch-action: none; + touch-action: none; + height: 100%; + overflow: hidden; } /* - * Colors and padding. + * IE10+ class the scrollbar on the side as a separate level. */ -pre, code, samp, kbd { - background-color: #f7f7f9; - border: 1px solid #c0c0c0; - color: #ad0d36; - padding: .5em; -} +x::-ms-reveal, +.modal-on { + margin-right: 0 !important; } + +.modal-overlay { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 2147483647; + width: 100%; + height: 100%; + overflow: hidden; + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQI12NgYGDYDAAAuAC0TCbBxgAAAABJRU5ErkJggg==); + background-repeat: repeat; + -webkit-overflow-scrolling: touch; + -webkit-backface-visibility: hidden; + text-align: center; } + .modal-overlay:before { + content: ""; + display: inline-block; + height: 100%; + width: 1px; + margin-right: -1px; + vertical-align: middle; } + [dir="rtl"] .modal-overlay:before { + margin-right: 0; + margin-left: -1px; } /* - * Prevent overlap on concurrent lines. + * 1: Embedded animated gif. */ -code, samp, kbd { - padding: .067em .25em; -} +.modal-loader:after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 3; + width: 28px; + height: 28px; + margin: auto; + content: ""; + background-image: url(data:image/gif;base64,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); + /* 1 */ + background-position: center center; + background-repeat: no-repeat; + border-radius: 100%; } + +.modal { + display: inline-block; + max-height: 95%; + max-width: 95%; + vertical-align: middle; + margin: 0 auto; + overflow: auto; } + +.modal-iframe, +.modal-image { + overflow: hidden; } + +.modal-iframe .media, +.modal-iframe iframe { + max-height: 100%; + max-width: 100%; } + +.modal-iframe .media { + background-color: #fff; + margin-bottom: 0; } + +.modal-image > img { + max-height: 100%; } + +.modal-content { + max-height: 100%; + overflow: auto; + padding: 1em; + background-color: white; + text-align: left; } + [dir="rtl"] .modal-content { + text-align: right; } + +.modal-header, +.modal-footer { + position: fixed; + top: 0; + right: 0; + left: 0; + color: #fff; } + +.modal-header { + padding: 0 4.555em; } + +.modal-footer { + top: auto; + bottom: 0; } + +.modal-close { + position: fixed; + top: 1px; + right: 1px; + z-index: 2; + display: inline-block; + padding: .83em; + font-size: 1.5em; + font-weight: bold; + color: white; } + [dir="rtl"] .modal-close { + right: auto; + left: 1px; } + +.modal-direction { + position: fixed; + top: 49%; + left: 0; + z-index: 2; + display: block; + width: 2em; + padding: .5em; + color: white; + font-size: 2em; + font-weight: bold; + text-align: center; } + [dir="rtl"] .modal-direction { + right: 0; } + .modal-direction.next { + left: auto; + right: 0; } + [dir="rtl"] .modal-direction.next { + right: auto; + left: 0; } + +.modal-close, .modal-close:hover, .modal-close:active, .modal-close:focus, +.modal-direction, +.modal-direction:hover, +.modal-direction:active, +.modal-direction:focus { + background-color: transparent; + border: none; } +.modal-close:hover, +.modal-direction:hover { + text-decoration: underline; } -/* - * Prevent wrapping. - */ -kbd { - white-space: nowrap; -} +@media (max-width: 47.99em) { + /* + * Force the columns to display as rows on small viewports. + * Headers are applied with data attributes. + */ + [data-table-list] { + opacity: 0; } + + .table-list { + display: block; } + .table-list thead, + .table-list tfoot, + .table-list th { + position: absolute; + clip: rect(0 0 0 0); + overflow: hidden; + visibility: hidden; } + .table-list tbody, + .table-list tr, + .table-list td, + .table-list th[scope=row] { + position: static; + display: block; + overflow: visible; + visibility: visible; } + .table-list tr:before, .table-list tr:after { + content: ""; + display: table; } + .table-list tr:after { + clear: both; } + .table-list td, + .table-list th[scope=row] { + float: left; + width: 100%; } + [dir="rtl"] .table-list td, [dir="rtl"] + .table-list th[scope=row] { + float: right; } + .table-list td:before, .table-list td:after { + display: block; + padding: .5em 0; + font-weight: bold; } + .table-list td:before { + content: attr(data-thead); } + .table-list th[scope=row]:before, .table-list th[scope=row]:after { + display: block; + padding: .5em 0; + font-weight: bold; } + .table-list th[scope=row]:before { + content: attr(data-thead); } + .table-list td:after, + .table-list th[scope=row]:after { + content: attr(data-tfoot); } + .table-list.table-bordered { + border-top-style: none; } } +.tabs { + position: relative; } + .tabs > ul { + list-style: none; + border-bottom: 1px solid silver; + margin-top: 0; + padding: 0; } + .tabs > ul > li { + float: left; + margin-bottom: -1px; } + [dir="rtl"] .tabs > ul > li { + float: right; } + .tabs > ul > li > a { + display: block; + line-height: 2em; + margin-right: .2em; + padding: 0 1em; + border: 1px solid transparent; + text-decoration: none; + cursor: pointer; } + [dir="rtl"] .tabs > ul > li > a { + margin-right: 0; + margin-left: .2em; } + .tabs > ul > li > a:hover { + background-color: #ebebeb; + border-color: silver; } + .tabs > ul > li.tab-active > a, .tabs > ul > li.tab-active > a:hover { + background-color: white; + border: 1px solid silver; + border-bottom-color: transparent; + color: #454545; + cursor: default; } + .tabs > * { + display: none; } + .tabs > ul, + .tabs .tab-pane-active { + display: block; } /* - * Remove borders etc in pre. + * Clearfix: contain floats + * + * For modern browsers + * 1. The space content is one way to avoid an Opera bug when the + * `contenteditable` attribute is included anywhere else in the document. + * Otherwise it causes space to appear at the top and bottom of elements + * that receive the `clearfix` class. + * 2. The use of `table` rather than `block` is only necessary if using + * `:before` to contain the top-margins of child elements. */ -pre code, -pre samp { - border: none; - padding: 0; -} +.clearfix:before, .row:before, .alert:before, .btn-group:before, .tabs > ul:before, .clearfix:after, .row:after, .alert:after, .btn-group:after, .tabs > ul:after { + content: ""; + /* 1 */ + display: table; + /*2 */ } +.clearfix:after, .row:after, .alert:after, .btn-group:after, .tabs > ul:after { + clear: both; } /* - * Reassert no wrapping. + * Float helpers */ -pre { - overflow-x: auto; -} - - pre code { - -ms-word-wrap: normal; - word-wrap: normal; - white-space: pre; - } +.push { + float: right !important; } + [dir="rtl"] .push { + float: left !important; } + +.pull { + float: left !important; } + [dir="rtl"] .pull { + float: right !important; } + +.push-xs { + float: right !important; } + [dir="rtl"] .push-xs { + float: left !important; } + +.pull-xs { + float: left !important; } + [dir="rtl"] .pull-xs { + float: right !important; } +@media (max-width: 47.99em) { + .push-xs-only { + float: right !important; } + [dir="rtl"] .push-xs-only { + float: left !important; } + + .pull-xs-only { + float: left !important; } + [dir="rtl"] .pull-xs-only { + float: right !important; } } +@media (min-width: 48em) { + .push-s { + float: right !important; } + [dir="rtl"] .push-s { + float: left !important; } + + .pull-s { + float: left !important; } + [dir="rtl"] .pull-s { + float: right !important; } } +@media (min-width: 48em) and (max-width: 61.99em) { + .push-s-only { + float: right !important; } + [dir="rtl"] .push-s-only { + float: left !important; } + + .pull-s-only { + float: left !important; } + [dir="rtl"] .pull-s-only { + float: right !important; } } +@media (min-width: 62em) { + .push-m { + float: right !important; } + [dir="rtl"] .push-m { + float: left !important; } + + .pull-m { + float: left !important; } + [dir="rtl"] .pull-m { + float: right !important; } } +@media (min-width: 62em) and (max-width: 74.99em) { + .push-m-only { + float: right !important; } + [dir="rtl"] .push-m-only { + float: left !important; } + + .pull-m-only { + float: left !important; } + [dir="rtl"] .pull-m-only { + float: right !important; } } +@media (min-width: 75em) { + .push-l { + float: right !important; } + [dir="rtl"] .push-l { + float: left !important; } + + .pull-l { + float: left !important; } + [dir="rtl"] .pull-l { + float: right !important; } } /* - * Fixed height with overflow. + * Layout helpers */ -.pre-scrollable { - max-height: 20em; - overflow-y: scroll; -} -.accordion { - border: solid 1px #c0c0c0; - margin-bottom: .125em; -} +.block { + display: block !important; } -.accordion-head { - display: block; - padding: .5em; - cursor: pointer; - border-bottom: solid 1px #c0c0c0; -} +.inline-block { + display: inline-block !important; } - .accordion-head a { - outline: none; - } +.inline { + display: inline !important; } -.accordion-body { - padding: 0 .5em; -} +.block-xs { + display: block; } - .accordion-body.collapse { - margin-top: -1px; - } +.inline-block-xs { + display: inline-block; } -.trans, .collapse { - -moz-transition: height 0.5s ease, width 0.5s ease; - -o-transition: height 0.5s ease, width 0.5s ease; - -webkit-transition: height 0.5s ease, width 0.5s ease; - transition: height 0.5s ease, width 0.5s ease; -} +.inline-xs { + display: inline; } -.expand, .collapse { - position: relative; - display: block; - height: auto; - width: auto; - overflow: hidden; - margin-top: 0; -} +@media (max-width: 47.99em) { + .block-xs-only { + display: block !important; } -.collapse { - height: 0; -} + .inline-block-xs-only { + display: inline-block !important; } - .collapse.width { - height: auto; - width: 0; - } -.autosize, -[data-autosize] { - overflow: hidden; - -webkit-transition: height 0.3s linear; - -moz-transition: height 0.3s linear; - -o-transition: height 0.3s linear; - transition: height 0.3s linear; -} -.carousel { - position: relative; - overflow: hidden; - margin-bottom: 1em; - -webkit-backface-visibility: hidden; - -webkit-perspective: 1000; -} - - /* - * Default slide version - */ - .carousel > figure { - margin: 0; - display: none; - position: relative; - -webkit-transition: .7s ease-in-out -webkit-transform,.7s ease-in-out left; - -moz-transition: .7s ease-in-out -moz-transform,.7s ease-in-out left; - -o-transition: .7s ease-in-out -o-transform,.7s ease-in-out left; - transition: .7s ease-in-out transform,.7s ease-in-out left; - -webkit-transform: translate3d(0,0,0); - -moz-transform: translate3d(0,0,0); - -ms-transform: translate3d(0,0,0); - -o-transform: translate3d(0,0,0); - transform: translate3d(0,0,0); - } - - .carousel > figure > img { - display: block; - width: 100%; - } - - .carousel.no-transition > figure { - -moz-transition-duration: 0s !important; - -o-transition-duration: 0s !important; - -webkit-transition-duration: 0s !important; - transition-duration: 0s !important; - } - - /* - * Next Last version - */ - .carousel .carousel-active, - .carousel .next, - .carousel .prev, - .carousel .swipe { - display: block; - } - - .carousel .carousel-active, - .carousel .next.left, - .carousel .prev.right { - left: 0; - } - - .carousel .carousel-active { - position: relative !important; - z-index: 1; - } - - .carousel .next, - .carousel .prev, - .carousel .swipe { - position: absolute; - top: 0; - z-index: 0; - width: 100%; - height: 100%; - } - - .carousel .next, - .carousel .carousel-active.right { - left: 100%; - } + .inline-xs-only { + display: inline !important; } } +@media (min-width: 48em) { + .block-s { + display: block !important; } - .carousel .prev, - .carousel .carousel-active.left { - left: -100%; - } + .inline-block-s { + display: inline-block !important; } -.carousel-control, -.carousel-control:visited { - position: absolute; - display: block; - width: 2em; - top: 40%; - left: 0; - padding: .5em; - margin-top: -1em; - font-size: 2em; - font-weight: bold; - text-align: center; - color: #fff; - text-decoration: none; - z-index: 3; -} + .inline-s { + display: inline !important; } } +@media (min-width: 48em) and (max-width: 61.99em) { + .block-s-only { + display: block !important; } - .carousel-control.right { - left: auto; - right: 0; - } + .inline-block-s-only { + display: inline-block !important; } - .carousel-control:hover { - text-decoration: underline; - } + .inline-s-only { + display: inline !important; } } +@media (min-width: 62em) { + .block-m { + display: block !important; } -.carousel > figure > figcaption { - padding: 1px 1em; - background-color: #111; - color: #fff; - position: absolute; - width: 100%; - bottom: 0; -} + .inline-block-m { + display: inline-block !important; } -.carousel > .carousel-active > figcaption { - position: static; -} + .inline-m { + display: inline !important; } } +@media (min-width: 62em) and (max-width: 74.99em) { + .block-m-only { + display: block !important; } -/* - * Fade version - */ -.carousel-fade > figure { - -webkit-transition: opacity .7s ease-in-out; - -moz-transition: opacity .7s ease-in-out; - -o-transition: opacity .7s ease-in-out; - transition: opacity .7s ease-in-out; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 0; -} + .inline-block-m-only { + display: inline-block !important; } -.carousel-fade .carousel-active { - opacity: 1; -} - - .carousel-fade .carousel-active.left, - .carousel-fade .carousel-active.right { - -webkit-transform: none; - -moz-transform: none; - -ms-transform: none; - -o-transform: none; - transform: none; - left: 0\9; - opacity: 0; - z-index: 2; - } + .inline-m-only { + display: inline !important; } } +@media (min-width: 75em) { + .block-l { + display: block !important; } -.carousel-fade > figure.swipe, -.carousel-fade > figure.next, -.carousel-fade > figure.prev { - -webkit-transform: none; - -moz-transform: none; - -ms-transform: none; - -o-transform: none; - transform: none; - left: 0\9; - z-index: 1; - opacity: 1; -} + .inline-block-l { + display: inline-block !important; } -.carousel-fade > .carousel-active.swipe { - z-index: 2; -} + .inline-l { + display: inline !important; } } +/* + * Text align helpers + */ +.text-left { + text-align: left !important; } -.carousel-fade > .carousel-active { - position: relative; -} +.text-right { + text-align: right !important; } -.carousel-fade .carousel-control, -.carousel-fade .carousel-control:visited { - z-index: 3; -} +.text-center { + text-align: center !important; } -/* - * Indicators - */ -.carousel > ol { - position: absolute; - top: 1em; - left: 0; - right: 0; - z-index: 3; - margin: 0; - padding: 0; - text-align: center; - list-style: none; -} +.text-xs-left { + text-align: left !important; } - .carousel > ol li { - display: inline-block; - width: 1em; - height: 1em; - margin: 1px; - text-indent: -9999px; - cursor: pointer; - border: 2px solid #111; - background-color: transparent; - } +.text-xs-right { + text-align: right !important; } - .carousel > ol .active { - background-color: #fff; - } +.text-xs-center { + text-align: center !important; } -.tabs { - position: relative; -} - - .tabs > ul { - list-style: none; - border-bottom: 1px solid #c0c0c0; - padding: 0; - margin-top: 0; - } - - .tabs > ul:before, .tabs > ul:after { - content: ""; - display: table; - } - - .tabs > ul:after { - clear: both; - } - - .tabs > ul > li { - float: left; - margin-bottom: -1px; - } - - .tabs > ul > li > a { - text-decoration: none; - display: block; - cursor: pointer; - padding: 0 1em; - line-height: 2em; - border: 1px solid transparent; - margin-right: .2em; - outline: none; - } - - .tabs > ul > li > a:hover { - background-color: #ebebeb; - border-color: #c0c0c0; - } - - .tabs > ul > li.tab-active > a, - .tabs > ul > li.tab-active > a:hover { - color: #454545; - cursor: default; - background-color: #fff; - border: 1px solid #c0c0c0; - border-bottom-color: transparent; - } - - .tabs > * { - display: none; - } - - .tabs > ul, - .tabs > *.tab-pane-active { - display: block; - } -.lightbox-on, -.lightbox-lock > body { - height: 100%; - overflow: hidden; - -ms-touch-action: none; - touch-action: none; -} - -/* - * 1: Average browser max z-index. - * 2: IE8 transparent background. - * 3. Use the iOS devices hardware accelerator to provide native scrolling. - * 4. Prevent font rendering issues on Webkit. - */ -.lightbox-overlay { - position: fixed; - overflow: hidden; - z-index: 2147483647; /* 1 */ - left: 0; - top: 0; - right: 0; - bottom: 0; - height: 100%; - width: 100%; - text-align: center; - background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQI12NgYGDYDAAAuAC0TCbBxgAAAABJRU5ErkJggg=='); - background-repeat: repeat; - -webkit-overflow-scrolling: touch; /* 3 */ - -webkit-backface-visibility: hidden; /* 4 */ -} +@media (max-width: 47.99em) { + .text-xs-left-only { + text-align: left !important; } -/* - * 1: Forces height calculations to work in JavaScript. - */ -.lightbox-header, .lightbox-footer { - padding: 1px 1em; /* 1 */ - margin: -1px 0; /* 1 */ - width: 100%; - color: #fff; - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 1; - overflow: hidden; -} + .text-xs-right-only { + text-align: right !important; } -.lightbox-header { - padding-right: 4.555em; -} + .text-xs-center-only { + text-align: center !important; } } +@media (min-width: 48em) { + .text-s-left { + text-align: left !important; } -.lightbox-footer { - top: auto; - bottom: 0; -} + .text-s-right { + text-align: right !important; } -.lightbox-overlay:before { - content: ""; - display: inline-block; - height: 100%; - vertical-align: middle; - width: 1px; - margin-right: -1px; - margin-left: -.25em; -} + .text-s-center { + text-align: center !important; } } +@media (min-width: 48em) and (max-width: 61.99em) { + .text-s-left { + text-align: left !important; } -/* - * 1: Embedded animated gif. - */ -.lightbox-overlay.lightbox-loader:after { - position: absolute; - width: 28px; - height: 28px; - border-radius: 100%; - margin: auto; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-image: url(data:image/gif;base64,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); /* 1 */ - background-position: center center; - background-repeat: no-repeat; - content: " "; - z-index: 3; -} + .text-s-right { + text-align: right !important; } -.lightbox { - display: inline-block; - vertical-align: middle; - max-height: 100%; - max-width: 100%; - margin: 0 auto; - overflow: auto; -} - - .lightbox.lightbox-ajax { - width: 100%; - max-width: 1140px; - } - - .lightbox.lightbox-iframe { - width: 100%; - max-width: 900px; - overflow: hidden; - } - - .lightbox.lightbox-image { - overflow: hidden; - } - -.lightbox-content { - background-color: #fff; - padding: 1em; - text-align: left; - max-height: 100%; - overflow: auto; -} - -.lightbox > img { - max-height: 100%; - max-width: none\9; - width: auto\9; -} - /* IE9 and IE10 still read the \9 hack*/ - .lightbox > img:nth-of-type(1n) { - max-width: 100%\9; - } - -.lightbox > .media { - background-color: #111; - margin: 0 auto; -} - -.lightbox-close { - position: fixed; - right: 0; - top: 0; - z-index: 2; - display: inline-block; - padding: 0.83em; - color: #fff; - font-size: 1.5em; - font-weight: bold; - text-decoration: none; -} + .text-s-center { + text-align: center !important; } } +@media (min-width: 62em) { + .text-m-left { + text-align: left !important; } - .lightbox-close:hover { - text-decoration: underline; - } + .text-m-right { + text-align: right !important; } + .text-m-center { + text-align: center !important; } } +@media (min-width: 62em) and (max-width: 74.99em) { + .text-m-left { + text-align: left !important; } -.lightbox-direction, -.lightbox-direction:visited { - position: fixed; - display: block; - width: 2em; - top: 49%; - left: 0; - padding: .5em; - font-size: 2em; - font-weight: bold; - text-align: center; - color: #fff; - text-decoration: none; - z-index: 2; -} + .text-m-right { + text-align: right !important; } - .lightbox-direction.right { - left: auto; - right: 0; - } + .text-m-center { + text-align: center !important; } } +@media (min-width: 75em) { + .text-l-left { + text-align: left !important; } + + .text-l-right { + text-align: right !important; } + + .text-l-center { + text-align: center !important; } } +.grid-state-indicator { + position: absolute; + top: -99999px; + left: -99999px; + height: 1px; + width: 0; } + [dir="rtl"] .grid-state-indicator { + left: auto; + right: -99999px; } - .lightbox-direction:hover { - text-decoration: underline; - } +@media (min-width: 48em) { + .grid-state-indicator { + width: 1px; } } +@media (min-width: 62em) { + .grid-state-indicator { + width: 2px; } } +@media (min-width: 75em) { + .grid-state-indicator { + width: 3px; } } /* * Image replacement */ .ir { - background-color: transparent; - border: 0; - overflow: hidden; -} - - .ir:before { - content: ""; - display: block; - width: 0; - height: 150%; - } + background-color: transparent; + border: 0; + overflow: hidden; } + .ir:before { + content: ""; + display: block; + height: 150%; + width: 0; } /* * Hide from both screen readers and browsers: h5bp.com/u */ - .hidden { - display: none !important; - visibility: hidden; -} + display: none !important; + visibility: hidden; } /* * Hide only visually, but have it available for screen readers: h5bp.com/v */ - .visuallyhidden { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - width: 1px; -} - + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; /* - * Extends the .visuallyhidden class to allow the element to be focusable - * when navigated to via the keyboard: h5bp.com/p - */ - - .visuallyhidden.focusable:active, - .visuallyhidden.focusable:focus { - clip: auto; - height: auto; - margin: 0; - overflow: visible; - position: static; - width: auto; - } + * Extends the .visuallyhidden class to allow the element to be focusable + * when navigated to via the keyboard: h5bp.com/p + */ } + .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + width: auto; } /* * Hide visually and from screen readers, but maintain layout */ - .invisible { - visibility: hidden; -} - -/* - * Clearfix: contain floats - * - * For modern browsers - * 1. The space content is one way to avoid an Opera bug when the - * `contenteditable` attribute is included anywhere else in the document. - * Otherwise it causes space to appear at the top and bottom of elements - * that receive the `clearfix` class. - * 2. The use of `table` rather than `block` is only necessary if using - * `:before` to contain the top-margins of child elements. - */ - -.clearfix:before, -.clearfix:after { - content: " "; /* 1 */ - display: table; /* 2 */ -} - -.clearfix:after { - clear: both; -} - -/* - * Float helpers - */ -.push-left { - float: left !important; -} - -.push-right { - float: right !important; -} - -/* - * Layout helpers - */ -.block { - display: block !important; -} - -.inline-block { - display: inline-block !important; -} - -.inline { - display: inline !important; -} + visibility: hidden; } /* * Fade opacity with animation */ .fade-out { - opacity: 0 !important; -} + opacity: 0 !important; } /* * Opacity helper to add to elements to allow fade animation */ +.fade-out, .fade-in { - opacity: 1 !important; -} + -webkit-transition: opacity .3s; + transition: opacity .3s; } -.fade-out, .fade-in { - -moz-transition: opacity 0.3s; - -o-transition: opacity 0.3s; - -webkit-transition: opacity 0.3s; - transition: opacity 0.3s; -} +.fade-in { + opacity: 1 !important; } /* - * Responsive helpers to toggle visibility. + * Responsive helpers to toggle visibility. */ - .visible-xs, .visible-s, .visible-m, .visible-l { - display: none !important; -} + display: none !important; } @media (max-width: 47.99em) { - .hidden-xs { - display: none !important; - } + .hidden-xs { + display: none !important; } - .visible-xs { - display: block !important; - } + .visible-xs { + display: block !important; } - table.visible-xs { - display: table; - } + table.visible-xs { + display: table; } - thead.visible-xs { - display: table-header-group !important; - } + thead.visible-xs { + display: table-header-group !important; } - tfoot.visible-xs { - display: table-footer-group !important; - } + tfoot.visible-xs { + display: table-footer-group !important; } - tr.visible-xs { - display: table-row !important; - } + tr.visible-xs { + display: table-row !important; } - th.visible-xs, - td.visible-xs { - display: table-cell !important; - } + th.visible-xs, + td.visible-xs { + display: table-cell !important; } - col.visible-xs { - display: table-column !important; - } + col.visible-xs { + display: table-column !important; } - caption.visible-xs { - display: table-caption !important; - } -} - -/* - * 769 > viewport < 991px - */ + caption.visible-xs { + display: table-caption !important; } } @media (min-width: 48em) and (max-width: 61.99em) { - .hidden-s { - display: none !important; - } - - .visible-s { - display: block !important; - } + .hidden-s { + display: none !important; } - table.visible-s { - display: table !important; - } + .visible-s { + display: block !important; } - thead.visible-s { - display: table-header-group !important; - } + table.visible-s { + display: table; } - tfoot.visible-s { - display: table-footer-group !important; - } + thead.visible-s { + display: table-header-group !important; } - tr.visible-s { - display: table-row !important; - } + tfoot.visible-s { + display: table-footer-group !important; } - th.visible-s, - td.visible-s { - display: table-cell !important; - } + tr.visible-s { + display: table-row !important; } - col.visible-s { - display: table-column !important; - } + th.visible-s, + td.visible-s { + display: table-cell !important; } - caption.visible-s { - display: table-caption !important; - } -} + col.visible-s { + display: table-column !important; } -/* - * 992px > viewport < 1200px - */ + caption.visible-s { + display: table-caption !important; } } @media (min-width: 62em) and (max-width: 74.99em) { - .hidden-m { - display: none !important; - } + .hidden-m { + display: none !important; } - .visible-m { - display: block !important; - } + .visible-m { + display: block !important; } - table.visible-m { - display: table !important; - } + table.visible-m { + display: table; } - thead.visible-m { - display: table-header-group !important; - } + thead.visible-m { + display: table-header-group !important; } - tfoot.visible-m { - display: table-footer-group !important; - } + tfoot.visible-m { + display: table-footer-group !important; } - tr.visible-m { - display: table-row !important; - } + tr.visible-m { + display: table-row !important; } - th.visible-m, - td.visible-m { - display: table-cell !important; - } + th.visible-m, + td.visible-m { + display: table-cell !important; } - col.visible-m { - display: table-column !important; - } + col.visible-m { + display: table-column !important; } - caption.visible-m { - display: table-caption !important; - } -} - -/* - * viewport > 1200px - */ + caption.visible-m { + display: table-caption !important; } } @media (min-width: 75em) { - .hidden-l { - display: none !important; - } - - .visible-l { - display: block !important; - } + .hidden-l { + display: none !important; } - table.visible-l { - display: table !important; - } + .visible-l { + display: block !important; } - thead.visible-l { - display: table-header-group !important; - } + table.visible-l { + display: table; } - tfoot.visible-l { - display: table-footer-group !important; - } + thead.visible-l { + display: table-header-group !important; } - tr.visible-l { - display: table-row !important; - } + tfoot.visible-l { + display: table-footer-group !important; } - th.visible-l, - td.visible-l { - display: table-cell !important; - } + tr.visible-l { + display: table-row !important; } - col.visible-l { - display: table-column !important; - } + th.visible-l, + td.visible-l { + display: table-cell !important; } - caption.visible-l { - display: table-caption !important; - } -} + col.visible-l { + display: table-column !important; } + caption.visible-l { + display: table-caption !important; } } @media print { - * { - background: transparent !important; - color: #000 !important; /* Black prints faster: h5bp.com/s */ - box-shadow: none !important; - text-shadow: none !important; - } - - a, - a:visited { - text-decoration: underline; - } - - a[href]:after { - content: " (" attr(href) ")"; - } - - abbr[title]:after { - content: " (" attr(title) ")"; - } - - /* - * Don't show links for images, or javascript/internal links - */ - - .ir a:after, - a[href^="javascript:"]:after, - a[href^="#"]:after { - content: ""; - } - - pre, - blockquote { - border: 1px solid #999; - page-break-inside: avoid; - } - - thead { - display: table-header-group; /* h5bp.com/t */ - } - - tr, - img { - page-break-inside: avoid; - } - - img { - max-width: 100% !important; - } - - @page { - margin: 0.5cm; - } - - p, - h2, - h3 { - orphans: 3; - widows: 3; - } - - h2, - h3 { - page-break-after: avoid; - } -} \ No newline at end of file + * { + background: transparent !important; + color: #000 !important; + /**Black prints faster: h5bp.com/s */ + box-shadow: none !important; + text-shadow: none !important; } + + a, + a:visited { + text-decoration: underline; } + + a[href]:after { + content: " (" attr(href) ")"; } + + abbr[title]:after { + content: " (" attr(title) ")"; } + + /* + * Don't show links that are fragment identifiers, + * or use the `javascript:` pseudo protocol + */ + a[href^="#"]:after, + a[href^="javascript:"]:after { + content: ""; } + + pre, + blockquote { + border: 1px solid #999; + page-break-inside: avoid; } + + thead { + display: table-header-group; + /**h5bp.com/t */ } + + tr, + img { + page-break-inside: avoid; } + + img { + max-width: 100% !important; } + + p, + h2, + h3 { + orphans: 3; + widows: 3; } + + h2, + h3 { + page-break-after: avoid; } } diff --git a/build/responsive.ie10mobilefix.js b/build/responsive.ie10mobilefix.js deleted file mode 100644 index 389e6569..00000000 --- a/build/responsive.ie10mobilefix.js +++ /dev/null @@ -1,17 +0,0 @@ -/*! Responsive v2.5.7 | MIT License | responsivebp.com */ - -(function () { - - "use strict"; - - /** IE10 in Windows (Phone) 8 - * Support for responsive views via media queries do not work in IE10 on mobile for - * versions prior to WP8 Update 3 (GDR3). - * This script has to be inserted in the head before any other scripts due to timing issues.*/ - if (navigator.userAgent.match(/IEMobile\/10\.0/)) { - var msViewportStyle = document.createElement("style"); - msViewportStyle.appendChild(document.createTextNode("@-ms-viewport{width:auto!important}")); - document.querySelector("head").appendChild(msViewportStyle); - } - -}()); diff --git a/build/responsive.ie10mobilefix.min.js b/build/responsive.ie10mobilefix.min.js deleted file mode 100644 index 1805865d..00000000 --- a/build/responsive.ie10mobilefix.min.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! Responsive v2.5.7 | MIT License | responsivebp.com */ -!function(){"use strict";if(navigator.userAgent.match(/IEMobile\/10\.0/)){var e=document.createElement("style");e.appendChild(document.createTextNode("@-ms-viewport{width:auto!important}")),document.querySelector("head").appendChild(e)}}(); \ No newline at end of file diff --git a/build/responsive.js b/build/responsive.js index 3837dcc2..68eb2240 100644 --- a/build/responsive.js +++ b/build/responsive.js @@ -6,7 +6,7 @@ Licensed under the MIT License. ============================================================================== */ -/*! Responsive v2.5.7 | MIT License | responsivebp.com */ +/*! Responsive v3.0.0 | MIT License | responsivebp.com */ /* * Responsive Core @@ -18,6 +18,60 @@ "use strict"; + $.pseudoUnique = function (length) { + /// Returns a pseudo unique alpha-numeric string of the given length. + /// The length of the string to return. Defaults to 8. + /// The pseudo unique alpha-numeric string. + + var len = length || 8, + text = "", + possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789", + max = possible.length; + + if (len > max) { + len = max; + } + + for (var i = 0; i < len; i += 1) { + text += possible.charAt(Math.floor(Math.random() * max)); + } + + return text; + }; + + $.support.rtl = (function () { + /// Returns a value indicating whether the current page is setup for right-to-left languages. + /// + /// True if right-to-left language support is set up; otherwise false. + /// + + return $("html[dir=rtl]").length ? true : false; + }()); + + $.support.currentGrid = (function () { + /// Returns a value indicating what grid range the current browser width is within. + /// + /// An object containing two properties. + /// 1: grid - The current applied grid; either xs, s, m, or l. + /// 2: index - The index of the current grid in the range. + /// 3: range - The available grid range. + /// + + var $div = $("
").addClass("grid-state-indicator").prependTo("body"); + + return function () { + // These numbers match values in the css + var grids = ["xs", "s", "m", "l"], + key = parseInt($div.width(), 10); + + return { + grid: grids[parseInt($div.width(), 10)], + index: key, + range: grids + }; + }; + }()); + $.support.transition = (function () { /// Returns a value indicating whether the browser supports CSS transitions. /// True if the current browser supports css transitions. @@ -147,33 +201,29 @@ }; }; - $.fn.swipe = function (options) { + var addSwipe = function ($elem, handler) { /// Adds swiping functionality to the given element. - /// - /// A collection of optional settings to apply. - /// 1: namespace - The namespace for isolating the touch events. + /// + /// The jQuery object representing the given node(s). /// /// The jQuery object for chaining. - var defaults = { - namespace: null, - touchAction: "none" - }, - settings = $.extend({}, defaults, options); - - var ns = settings.namespace ? "." + settings.namespace : "", - eswipestart = "swipestart" + ns, - eswipemove = "swipemove" + ns, - eswipeend = "swipeend" + ns, + var ns = handler.namespace ? "." + handler.namespace : "", + eswipestart = "swipestart", + eswipemove = "swipemove", + eswipeend = "swipeend", etouch = getEvents(ns); - return this.each(function () { - var $this = $(this); + // Set the touchaction variable for move. + var touchAction = handler.data && handler.data.touchAction || "none"; - if (supportPointer) { - // Enable extended touch events on IE. - $this.css({ "-ms-touch-action": "" + settings.touchAction + "", "touch-action": "" + settings.touchAction + "" }); - } + if (supportPointer) { + // Enable extended touch events on supported browsers before any touch events. + $elem.css({ "-ms-touch-action": "" + touchAction + "", "touch-action": "" + touchAction + "" }); + } + + return $elem.each(function () { + var $this = $(this); var start = {}, delta = {}, @@ -207,11 +257,11 @@ // Mimic touch action on iProducts. // Should also prevent bounce. if (!isPointer) { - switch (settings.touchAction) { + switch (touchAction) { case "pan-x": case "pan-y": - isScrolling = settings.touchAction === "pan-x" ? + isScrolling = touchAction === "pan-x" ? Math.abs(dy) < Math.abs(dx) : Math.abs(dx) < Math.abs(dy); @@ -230,7 +280,6 @@ } moveEvent = $.Event(eswipemove, { delta: { x: dx, y: dy } }); - $this.trigger(moveEvent); if (moveEvent.isDefaultPrevented()) { @@ -309,15 +358,13 @@ }); }; - $.fn.removeSwipe = function (namespace) { + var removeSwipe = function ($elem, handler) { /// Removes swiping functionality from the given element. - /// The namespace for isolating the touch events. - /// The jQuery object for chaining. - var ns = namespace ? "." + namespace : "", + var ns = handler.namespace ? "." + handler.namespace : "", etouch = getEvents(ns); - return this.each(function () { + return $elem.each(function () { // Disable extended touch events on ie. // Unbind events. @@ -326,6 +373,15 @@ }); }; + // Create special events so we can use on/off. + $.event.special.swipe = { + add: function (handler) { + addSwipe($(this), handler); + }, + remove: function (handler) { + removeSwipe($(this), handler); + } + }; }()); $.extend($.expr[":"], { @@ -399,59 +455,13 @@ // General variables and methods. var resisizeTimer, eready = "ready" + ns, - eresize = "resize" + ns + " orientationchange" + ns, - ekeyup = "keyup" + ns, - epaste = "paste" + ns, - ecut = "cut" + ns, + eresize = "resize orientationchange", + ekeyup = "keyup", + epaste = "paste", + ecut = "cut", esize = "size" + ns, esized = "sized" + ns; - // Private methods. - var bindEvents = function () { - - this.$element.on(ekeyup + " " + epaste + " " + ecut, function (event) { - - var $this = $(this), - delay = 0; - - if (event.type === "paste" || event.type === "cut") { - delay = 5; - } - - w.setTimeout(function () { - - // Run the size method. - $this.autoSize("size"); - - }, delay); - }); - - }, - createClone = function () { - - var self = this, - attributes = this.options.removeAttributes, - classes = this.options.removeClasses, - $element = this.$element, - clone = function () { - - // Create a clone and offset it removing all specified attributes classes and data. - self.$clone = self.$element.clone() - .css({ "position": "absolute", "top": "-99999px", "left": "-99999px", "visibility": "hidden", "overflow": "hidden" }) - .attr({ "tabindex": -1, "rows": 2 }) - .removeAttr("id name data-autosize " + attributes) - .removeClass(classes) - .insertAfter($element); - - // jQuery goes spare if you try to remove null data. - if (classes) { - self.$clone.removeData(classes); - } - }; - - $.when(clone()).then(this.size()); - }; - // AutoSize class definition var AutoSize = function (element, options) { @@ -465,8 +475,36 @@ this.sizing = null; // Initial setup. - bindEvents.call(this); - createClone.call(this); + this.clone(); + + // Bind events + this.$element.on([ekeyup, epaste, ecut].join(" "), $.proxy(this.change, this)); + }; + + AutoSize.prototype.clone = function () { + + var self = this, + attributes = this.options.removeAttributes, + classes = this.options.removeClasses, + $element = this.$element, + clone = function () { + + // Create a clone and offset it removing all specified attributes classes and data. + self.$clone = self.$element.clone() + .attr({ "tabindex": -1, "rows": 2, "aria-hidden": true }) + .removeAttr("id name data-autosize " + attributes) + .removeClass(classes) + .removeClass(classes) + .addClass("autosize-clone") + .insertAfter($element); + + // jQuery goes spare if you try to remove null data. + if (classes) { + self.$clone.removeData(classes); + } + }; + + $.when(clone()).then(this.size()); }; AutoSize.prototype.size = function () { @@ -527,6 +565,23 @@ } }; + AutoSize.prototype.change = function (event) { + + var self = this, + delay = 0; + + if (event.type === "paste" || event.type === "cut") { + delay = 5; + } + + w.setTimeout(function () { + + // Run the size method. + self.size(); + + }, delay); + }; + // Plug-in definition $.fn.autoSize = function (options) { @@ -541,9 +596,8 @@ $this.data("r.autosize", (data = new AutoSize(this, opts))); } - // Run the appropriate function is a string is passed. - if (typeof options === "string") { - data[options](); + if (options === "size") { + data.size(); } }); }; @@ -558,20 +612,6 @@ return this; }; - // Data API - $(document).on(eready, function () { - - $("textarea[data-autosize]").each(function () { - - var $this = $(this), - data = $this.data("r.autosizeOptions"), - options = data || $.buildDataOptions($this, {}, "autosize", "r"); - - // Run the autosize method. - $this.autoSize(options); - }); - }); - $(w).on(eresize, function () { if (resisizeTimer) { @@ -580,18 +620,31 @@ var resize = function () { - $("textarea[data-autosize]").each(function () { + $("textarea.autosize").each(function () { var autosize = $(this).data("r.autosize"); if (autosize) { autosize.size(); } - }); }; resisizeTimer = w.setTimeout(resize, 5); }); + // Data API + $(document).on(eready, function () { + + $("textarea[data-autosize]").each(function () { + + var $this = $(this).addClass("autosize"), + data = $this.data("r.autosizeOptions"), + options = data || $.buildDataOptions($this, {}, "autosize", "r"); + + // Run the autosize method. + $this.autoSize(options); + }); + }); + w.RESPONSIVE_AUTOSIZE = true; }(jQuery, window, ".r.autosize")); @@ -611,194 +664,117 @@ // General variables. var supportTransition = $.support.transition, - emouseenter = "mouseenter" + ns, - emouseleave = "mouseleave" + ns, - eclick = "click" + ns, + rtl = $.support.rtl, + emouseenter = "mouseenter", + emouseleave = "mouseleave", + ekeydown = "keydown", + eclick = "click", eready = "ready" + ns, eslide = "slide" + ns, eslid = "slid" + ns; - // Private methods. - var getActiveIndex = function () { - - var $activeItem = this.$element.find(".carousel-active"); - this.$items = $activeItem.parent().children("figure"); - - return this.$items.index($activeItem); - }, - - manageLazyImages = function () { - if (!this.data("lazyLoaded")) { - - this.find("img[data-src]").each(function () { - if (this.src.length === 0) { - this.src = this.getAttribute("data-src"); - } - }); - - this.data("lazyLoaded", true); - } - }, - - manageTouch = function () { - - this.$element.swipe({ namespace: "r.carousel", touchAction: "pan-y" }) - .on("swipemove.r.carousel", $.proxy(function (event) { - - if (this.sliding) { - return; - } - - this.pause(); - - // Left is next. - var isNext = event.delta.x < 0, - type = isNext ? "next" : "prev", - fallback = isNext ? "first" : "last", - activePosition = getActiveIndex.call(this), - $activeItem = $(this.$items[activePosition]), - $nextItem = $activeItem[type]("figure"); - - if (this.$items.length === 1) { - return; - } - - if (!$nextItem.length) { - - if (!this.options.wrap) { - return; - } - - $nextItem = this.$element.children("figure")[fallback](); - } - - if ($nextItem.hasClass("carousel-active")) { - return; - } - - if (this.options.lazyLoadImages && this.options.lazyOnDemand) { - // Load the next image. - manageLazyImages.call($nextItem); - } - - // Get the distance swiped as a percentage. - var width = $activeItem.width(), - percent = parseFloat((event.delta.x / width) * 100), - diff = isNext ? 100 : -100; - - // Shift the items but put a limit on sensitivity. - if (Math.abs(percent) < 100 && Math.abs(percent) > 5) { - this.$element.addClass("no-transition"); - if (this.options.mode === "slide") { - $activeItem.css({ "left": percent + "%" }); - $nextItem.addClass("swipe").css({ "left": (percent + diff) + "%" }); - } else { - $activeItem.addClass("swipe").css({ "opacity": 1 - Math.abs((percent / 100)) }); - $nextItem.addClass("swipe"); - } - } - - }, this)) - .on("swipeend.r.carousel", $.proxy(function (event) { - - if (this.sliding || !this.$element.hasClass("no-transition")) { - return; - } - - var direction = event.direction, - method = "next"; - - if (direction === "right") { - method = "prev"; - } - - // Re-enable the transitions. - this.$element.removeClass("no-transition"); - - if (supportTransition) { - - // Trim the animation duration based on the current position. - var activePosition = getActiveIndex.call(this), - $activeItem = $(this.$items[activePosition]); - - if (!this.translationDuration) { - this.translationDuration = parseFloat($activeItem.css("transition-duration")); - } - - // Get the distance and turn it into into a percentage - // to calculate the duration. Whichever is lowest is used. - var width = $activeItem.width(), - percentageTravelled = parseInt((Math.abs(event.delta.x) / width) * 100, 10), - swipeDuration = (((event.duration / 1000) * 100) / percentageTravelled), - newDuration = (((100 - percentageTravelled) / 100) * (Math.min(this.translationDuration, swipeDuration))); - - // Set the new temporary duration. - this.$items.each(function () { - $(this).css({ "transition-duration": newDuration + "s" }); - }); - } - - this.cycle(); - this[method](); - - }, this)); - }; + var keys = { + SPACE: 32, + LEFT: 37, + RIGHT: 39 + }; // Carousel class definition var Carousel = function (element, options) { this.$element = $(element); this.defaults = { - interval: 5000, + interval: 0, // Better for a11y mode: "slide", pause: "hover", wrap: true, - enabletouch: true, - lazyLoadImages: true, - lazyOnDemand: true + keyboard: true, + touch: true, + lazyImages: true, + lazyOnDemand: true, + nextTrigger: null, + nextHint: "Next (" + (rtl ? "Left" : "Right") + " Arrow)", + previousTrigger: null, + previousHint: "Previous (" + (rtl ? "Right" : "Left") + " Arrow)", + indicators: null }; this.options = $.extend({}, this.defaults, options); this.paused = null; this.interval = null; this.sliding = null; this.$items = null; - this.$indicators = []; this.translationDuration = null; + this.$nextTrigger = this.options.nextTrigger ? $(this.nextTrigger) : this.$element.find(".carousel-control.forward"); + this.$previousTrigger = this.options.previousTrigger ? $(this.previousTrigger) : this.$element.find(".carousel-control.back"); + this.$indicators = this.options.indicators ? $(this.indicators) : this.$element.find("ol > li"); + this.id = this.$element.attr("id") || "carousel-" + $.pseudoUnique(); + + var self = this; + + // Add the css class to support fade. + this.options.mode === "fade" && this.$element.addClass("carousel-fade"); + + if (this.options.lazyImages && !this.options.lazyOnDemand) { + $(w).on("load", $.proxy(this.lazyimages), this); + } + // Add a11y features. + this.$element.attr({ "role": "listbox", "id": this.id }); + this.$element.children("figure").each(function () { + var $this = $(this), + active = $this.hasClass("carousel-active"); + + $this.attr({ + "role": "option", + "aria-selected": active, + "tabindex": active ? 0 : -1 + }); + }); + + // Find and add a11y to controls. + var $controls = this.$nextTrigger.add(this.$previousTrigger); + $controls.each(function () { + var $this = $(this).attr({ "tabindex": 0, "aria-controls": self.id }); + !$this.is("button") ? $this.attr({ "role": "button" }) : $this.attr({ "type": "button" }); + if (!$this.find(".visuallyhidden").length) { + $("").addClass("visuallyhidden") + .html($this.is(self.$nextTrigger.selector) ? self.options.nextHint : self.options.previousHint) + .appendTo($this); + } + }); + + // Find and a11y indicators. + this.$indicators.attr({ "role": "button", "aria-controls": self.id }); + + // Bind events + // Not namespaced as we want to keep behaviour when not using data api. if (this.options.pause === "hover") { - // Bind the mouse enter/leave events - if (!$.support.touchEvents && $.support.pointerEvents) { + // Bind the mouse enter/leave events. + if (!$.support.touchEvents && !$.support.pointerEvents) { this.$element.on(emouseenter, $.proxy(this.pause, this)) .on(emouseleave, $.proxy(this.cycle, this)); } } - // Add the css class to support fade. - this.options.mode === "fade" && this.$element.addClass("carousel-fade"); - - if (this.options.enabletouch) { - manageTouch.call(this); + if (this.options.touch) { + // You always have to pass the third parameter if setting data. + this.$element.on("swipe.carousel", { touchAction: "pan-y" }, true) + .on("swipemove.carousel", $.proxy(this.swipemove, this)) + .on("swipeend.carousel", $.proxy(this.swipeend, this)); } - var self = this; - if (this.options.lazyLoadImages && !this.options.lazyOnDemand) { - $(w).on("load", function () { - manageLazyImages.call(self.$element); - }); + if (this.options.keyboard) { + this.$element.on(ekeydown, $.proxy(this.keydown, this)); } - // Find and bind indicators. - $("[data-carousel-slide-to]").each(function () { - var $this = $(this), - $target = $($this.attr("data-carousel-target") || $this.attr("href")); + $(document).on(eclick, "[aria-controls=" + this.id + "]", $.proxy(this.click, this)); + }; - if ($target[0] === element) { - var $parent = $this.parents("ol:first"); - if ($.inArray($parent[0], self.$indicators) === -1) { - self.$indicators.push($parent[0]); - } - } - }); + Carousel.prototype.activeindex = function () { + var $activeItem = this.$element.find(".carousel-active"); + this.$items = $activeItem.parent().children("figure"); + + return this.$items.index($activeItem); }; Carousel.prototype.cycle = function (event) { @@ -824,7 +800,7 @@ Carousel.prototype.to = function (position) { - var activePosition = getActiveIndex.call(this), + var activePosition = this.activeindex(), self = this; if (position > (this.$items.length - 1) || position < 0) { @@ -922,13 +898,13 @@ slideEvent = $.Event(eslide, { relatedTarget: $nextItem[0], direction: direction }); this.$element.trigger(slideEvent); - if (this.sliding || slideEvent.isDefaultPrevented()) { + if (slideEvent.isDefaultPrevented()) { return false; } - if (this.options.lazyLoadImages && this.options.lazyOnDemand) { + if (this.options.lazyImages && this.options.lazyOnDemand) { // Load the next image. - manageLazyImages.call($nextItem); + this.lazyimages.call($nextItem); } // Good to go? Then let's slide. @@ -939,30 +915,22 @@ } // Highlight the correct indicator. - if (this.$indicators.length) { - $.each(this.$indicators, function () { - var $this = $(this); - $this.find(".active").removeClass("active"); - self.$element.one(eslid, function () { - var $nextIndicator = $($this.children()[getActiveIndex.call(self)]); - if ($nextIndicator) { - $nextIndicator.addClass("active"); - } - }); - }); - } + this.$element.one(eslid, function () { + self.$indicators.removeClass("active") + .eq(self.activeindex()).addClass("active"); + }); var complete = function () { if (self.$items) { // Clear the transition properties if set. - self.$items.each(function () { - $(this).css({ "transition-duration": "" }); - }); + self.$items.removeClass("swiping").css({ "transition-duration": "" }); } - $activeItem.removeClass(["carousel-active", direction].join(" ")); - $nextItem.removeClass([type, direction].join(" ")).addClass("carousel-active"); + $activeItem.removeClass(["carousel-active", direction].join(" ")) + .attr({ "aria-selected": false, "tabIndex": -1 }); + $nextItem.removeClass([type, direction].join(" ")).addClass("carousel-active") + .attr({ "aria-selected": true, "tabIndex": 0 }); self.sliding = false; slidEvent = $.Event(eslid, { relatedTarget: $nextItem[0], direction: direction }); @@ -979,7 +947,7 @@ // Clear the added css. if (this.$items) { this.$items.each(function () { - $(this).removeClass("swipe").css({ "left": "", "opacity": "" }); + $(this).removeClass("swipe swipe-next").css({ "left": "", "right": "", "opacity": "" }); }); } @@ -994,76 +962,240 @@ return this; }; - // Plug-in definition - $.fn.carousel = function (options) { + Carousel.prototype.keydown = function (event) { - return this.each(function () { + var which = event && event.which; - var $this = $(this), - data = $this.data("r.carousel"), - opts = typeof options === "object" ? options : null; + if (which === keys.LEFT || which === keys.RIGHT) { - if (!data) { - // Check the data and reassign if not present. - $this.data("r.carousel", (data = new Carousel(this, opts))); + event.preventDefault(); + event.stopPropagation(); + + // Seek out the correct direction indicator, shift, and focus. + switch (which) { + case keys.LEFT: + if (rtl) { + this.next(); + this.$nextTrigger.focus(); + } else { + this.prev(); + this.$previousTrigger.focus(); + } + break; + case keys.RIGHT: + if (rtl) { + this.prev(); + this.$previousTrigger.focus(); + } else { + this.next(); + this.$nextTrigger.focus(); + } + break; } + } + }; - if (typeof options === "number") { - // Cycle to the given number. - data.to(options); + Carousel.prototype.click = function (event) { - } else if (typeof options === "string" || (options = opts.slide)) { + if (!event) { + return; + } - data[options](); + event.preventDefault(); + event.stopPropagation(); + var $this = $(event.target), + indicator = $this.is(this.$indicators.selector); - } else if (data.options.interval) { - data.cycle(); - } - }); + if (indicator) { + this.to($this.index()); + } else if ($this.is(this.$nextTrigger.selector)) { + this.next(); + } + else if ($this.is(this.$previousTrigger.selector)) { + this.prev(); + } }; - // Set the public constructor. - $.fn.carousel.Constructor = Carousel; - - // No conflict. - var old = $.fn.carousel; - $.fn.carousel.noConflict = function () { - $.fn.carousel = old; - return this; - }; + Carousel.prototype.swipemove = function (event) { - // Data API - $(document).on(eclick, ":attrStart(data-carousel-slide)", function (event) { + if (this.sliding) { + return; + } - event.preventDefault(); + this.pause(); - var $this = $(this), - data = $this.data("r.carouselOptions"), - options = data || $.buildDataOptions($this, {}, "carousel", "r"), - $target = $(options.target || (options.target = $this.attr("href"))), - slideIndex = options.slideTo, - carousel = $target.data("r.carousel"); + // Left is next. + var isNext = event.delta.x < 0, + type = isNext ? (rtl ? "prev" : "next") : (rtl ? "next" : "prev"), + fallback = isNext ? (rtl ? "last" : "first") : (rtl ? "first" : "last"), + activePosition = this.activeindex(), + $activeItem = this.$items.eq(activePosition), + $nextItem = $activeItem[type]("figure"); - if (carousel) { - typeof slideIndex === "number" ? carousel.to(slideIndex) : carousel[options.slide](); + if (this.$items.length === 1) { + return; } - }).on(eready, function () { + this.$items.removeClass("swipe-next"); - $(".carousel").each(function () { + if (!$nextItem.length) { - var $this = $(this), - data = $this.data("r.carouselOptions"), - options = data || $.buildDataOptions($this, {}, "carousel", "r"); + if (!this.options.wrap) { + return; + } - $this.carousel(options); - }); - }); + $nextItem = this.$element.children("figure")[fallback](); + } - w.RESPONSIVE_CAROUSEL = true; + if ($nextItem.hasClass("carousel-active")) { + return; + } -}(jQuery, window, ".r.carousel")); -/* + if (this.options.lazyImages && this.options.lazyOnDemand) { + // Load the next image. + this.lazyimages.call($nextItem); + } + + // Get the distance swiped as a percentage. + var width = $activeItem.width(), + percent = parseFloat((event.delta.x / width) * 100), + diff = isNext ? 100 : -100; + + if (rtl) { + percent *= -1; + } + + // Shift the items but put a limit on sensitivity. + if (Math.abs(percent) < 100 && Math.abs(percent) > 5) { + this.$element.addClass("no-transition"); + if (this.options.mode === "slide") { + if (rtl) { + $activeItem.addClass("swiping").css({ "right": percent + "%" }); + $nextItem.addClass("swipe swipe-next").css({ "right": (percent - diff) + "%" }); + } else { + $activeItem.addClass("swiping").css({ "left": percent + "%" }); + $nextItem.addClass("swipe swipe-next").css({ "left": (percent + diff) + "%" }); + } + } else { + $activeItem.addClass("swipe").css({ "opacity": 1 - Math.abs((percent / 100)) }); + $nextItem.addClass("swipe swipe-next"); + } + } else { + this.cycle(); + } + }; + + Carousel.prototype.swipeend = function (event) { + + if (this.sliding || !this.$element.hasClass("no-transition")) { + return; + } + + var direction = event.direction, + method = "next"; + + if (direction === "right") { + method = "prev"; + } + + // Re-enable the transitions. + this.$element.removeClass("no-transition"); + + if (supportTransition) { + + // Trim the animation duration based on the current position. + var activePosition = this.activeindex(), + $activeItem = this.$items.eq(activePosition); + + if (!this.translationDuration) { + this.translationDuration = parseFloat($activeItem.css("transition-duration")); + } + + // Get the distance and turn it into into a percentage + // to calculate the duration. Whichever is lowest is used. + var width = $activeItem.width(), + percentageTravelled = parseInt((Math.abs(event.delta.x) / width) * 100, 10), + swipeDuration = (((event.duration / 1000) * 100) / percentageTravelled), + newDuration = (((100 - percentageTravelled) / 100) * (Math.min(this.translationDuration, swipeDuration))); + + // Set the new temporary duration. + this.$items.each(function () { + $(this).css({ "transition-duration": newDuration + "s" }); + }); + } + + this.cycle(); + this.slide(method, $(this.$items.filter(".swipe-next"))); + }; + + Carousel.prototype.lazyimages = function () { + if (!this.data("lazyLoaded")) { + + this.find("img[data-src]").each(function () { + if (this.src.length === 0) { + this.src = this.getAttribute("data-src"); + } + }); + + this.data("lazyLoaded", true); + } + }; + + // Plug-in definition + $.fn.carousel = function (options) { + + return this.each(function () { + + var $this = $(this), + data = $this.data("r.carousel"), + opts = typeof options === "object" ? options : null; + + if (!data) { + // Check the data and reassign if not present. + $this.data("r.carousel", (data = new Carousel(this, opts))); + } + + if (typeof options === "number") { + // Cycle to the given number. + data.to(options); + + } else if (typeof options === "string" && /(cycle|pause|next|prev)/.test(options) || (options = opts.slide)) { + + data[options](); + + } else if (data.options.interval) { + data.pause().cycle(); + } + }); + }; + + // Set the public constructor. + $.fn.carousel.Constructor = Carousel; + + // No conflict. + var old = $.fn.carousel; + $.fn.carousel.noConflict = function () { + $.fn.carousel = old; + return this; + }; + + // Data API + $(document).on(eready, function () { + + $(".carousel").each(function () { + + var $this = $(this), + data = $this.data("r.carouselOptions"), + options = data || $.buildDataOptions($this, {}, "carousel", "r"); + + $this.carousel(options); + }); + }); + + w.RESPONSIVE_CAROUSEL = true; + +}(jQuery, window, ".r.carousel")); +/* * Responsive Dismiss */ @@ -1078,16 +1210,41 @@ } // General variables. - var eclick = "click" + ns, + var eready = "ready" + ns, + eclick = "click", edismiss = "dismiss" + ns, edismissed = "dismissed" + ns; // Dismiss class definition - var Dismiss = function (element, target) { + var Dismiss = function (element, options) { - this.$element = $(element); - this.$target = this.$element.parents(target); + this.defaults = { + closeHint: "Click to close" + }; + + this.options = $.extend({}, this.defaults, options); + + this.$element = $(element).attr({ "type": "button" }); + this.$target = this.$element.closest(options.target); this.dismissing = null; + + // A11y goodness. + if (this.$element.is("button")) { + $(element).attr({ "type": "button" }); + } + + if (this.$target.hasClass("alert")) { + this.$target.attr({ "role": "alert" }); + } + + if (!this.$element.find(".visuallyhidden").length) { + $("").addClass("visuallyhidden") + .html(this.options.closeHint) + .appendTo(this.$element); + } + + // Bind events + this.$element.on(eclick, $.proxy(this.click, this)); }; Dismiss.prototype.close = function () { @@ -1096,12 +1253,12 @@ $target = this.$target, self = this, complete = function () { - self.dismissing = false; - $target.addClass("hidden").trigger($.Event(edismissed)); + $target.addClass("hidden").attr({ "aria-hidden": true, "tabindex": -1 }); + self.$element.trigger($.Event(edismissed)); }; - $target.trigger(dismissEvent); + this.$element.trigger(dismissEvent); if (this.dismissing || dismissEvent.isDefaultPrevented()) { return; @@ -1117,8 +1274,13 @@ this.$target.onTransitionEnd(complete); }; + Dismiss.prototype.click = function (event) { + event.preventDefault(); + this.close(); + }; + // Plug-in definition - $.fn.dismiss = function (target) { + $.fn.dismiss = function (options) { return this.each(function () { @@ -1127,11 +1289,13 @@ if (!data) { // Check the data and reassign if not present. - $this.data("dismiss", (data = new Dismiss(this, target + ":first"))); + $this.data("dismiss", (data = new Dismiss(this, options))); } // Close the element. - data.close(); + if (options === "close") { + data.close(); + } }); }; @@ -1146,19 +1310,18 @@ }; // Data API - $("body").on(eclick, ":attrStart(data-dismiss)", function (event) { + $(document).on(eready, function () { - event.preventDefault(); + $("button[data-dismiss-target]").each(function () { - var $this = $(this), - data = $this.data("r.dismissOptions"), - options = data || $.buildDataOptions($this, {}, "dismiss", "r"), - target = options.target || (options.target = $this.attr("href")); + var $this = $(this), + data = $this.data("r.dismissOptions"), + options = data || $.buildDataOptions($this, {}, "dismiss", "r"); + + // Run the dismiss method. + $this.dismiss(options); + }); - // Run the dismiss method. - if (target) { - $(this).dismiss(options.target); - } }); w.RESPONSIVE_DISMISS = true; @@ -1179,47 +1342,27 @@ // General variables. var supportTransition = w.getComputedStyle && $.support.transition, - eclick = "click" + ns, + rtl = $.support.rtl, + eready = "ready" + ns, + eclick = "click", + ekeydown = "keydown", eshow = "show" + ns, eshown = "shown" + ns, ehide = "hide" + ns, ehidden = "hidden" + ns; - // Private methods. - var transition = function (method, startEvent, completeEvent) { - - var self = this, - complete = function () { - - // The event to expose. - var eventToTrigger = $.Event(completeEvent); - - // Ensure the height/width is set to auto. - self.$element.removeClass("trans")[self.options.dimension](""); - - self.transitioning = false; - self.$element.trigger(eventToTrigger); - }; - - if (this.transitioning || startEvent.isDefaultPrevented()) { - return; - } - - this.transitioning = true; - - // Remove or add the expand classes. - this.$element.trigger(startEvent)[method]("collapse"); - this.$element[startEvent.type === "show" ? "addClass" : "removeClass"]("expand trans"); - - this.$element.onTransitionEnd(complete); + var keys = { + SPACE: 32, + LEFT: 37, + RIGHT: 39 }; // The Dropdown class definition var Dropdown = function (element, options) { this.$element = $(element); + this.$target = $(options.target); this.defaults = { - toggle: true, dimension: "height" }; this.options = $.extend({}, this.defaults, options); @@ -1228,57 +1371,94 @@ this.endSize = null; if (this.options.parent) { - this.$parent = this.$element.parents(this.options.parent + ":first"); + this.$parent = this.$target.closest(this.options.parent); } - // Check to see if the plug-in is set to toggle and trigger - // the correct internal method if so. - if (this.options.toggle) { - this.toggle(); + // Add accessibility features. + if (this.$parent) { + this.$parent.attr({ "role": "tablist", "aria-multiselectable": "true" }) + .find("div:not(.collapse,.accordion-body)").attr("role", "presentation"); + } else { + $(".accordion").find("div:not(.collapse,.accordion-body)").addBack().attr("role", "presentation"); } + + var $tab = $("[href=" + this.options.target + "], [data-dropdown-target=" + this.options.target + "]"), + tabId = $tab.attr("id") || "dropdown-" + $.pseudoUnique(), + paneId = this.$target.attr("id") || "dropdown-" + $.pseudoUnique(), + active = !this.$target.hasClass("collapse"); + + $tab.attr({ + "id": tabId, + "role": "tab", + "aria-controls": paneId, + "aria-selected": active, + "aria-expanded": active, + "tabindex": 0 + }); + + this.$target.attr({ + "id": paneId, + "role": "tabpanel", + "aria-labelledby": tabId, + "aria-hidden": !active, + "tabindex": active ? 0 : -1 + }); + + // Bind events. + this.$element.on(eclick, $.proxy(this.click, this)); + this.$element.on(ekeydown, $.proxy(this.keydown, this)); }; Dropdown.prototype.show = function () { - if (this.transitioning || this.$element.hasClass("expand")) { + if (this.transitioning || this.$target.hasClass("expand")) { return; } - var dimension = this.options.dimension, - actives = this.$parent && this.$parent.find(".dropdown-group:not(.collapse)"), - hasData; - - if (actives && actives.length) { - hasData = actives.data("r.dropdown"); - actives.dropdown("hide"); - - if (!hasData) { - actives.data("r.dropdown", null); - } + var self = this, + dimension = this.options.dimension, + $actives = []; + + if (this.$parent) { + // Get all the related open panes. + $actives = this.$parent.find(" > [role=presentation] > [role=presentation]").children("[role=tab]"); + + $actives = $.grep($actives, function (a) { + var data = $(a).data("r.dropdown"), + $target = data && data.$target; + + return $target && $target.hasClass("dropdown-group") && !$target.hasClass("collapse") && data.$parent && data.$parent[0] === self.$parent[0]; + }); } // Set the height/width to zero then to the height/width // so animation can take place. - this.$element[dimension](0); + this.$target[dimension](0); if (supportTransition) { // Calculate the height/width. - this.$element[dimension]("auto"); - this.endSize = w.getComputedStyle(this.$element[0])[dimension]; + this.$target[dimension]("auto"); + this.endSize = w.getComputedStyle(this.$target[0])[dimension]; // Reset to zero and force repaint. - this.$element[dimension](0).redraw(); + this.$target[dimension](0).redraw(); } - this.$element[dimension](this.endSize || ""); + this.$target[dimension](this.endSize || ""); + + this.transition("removeClass", $.Event(eshow), eshown); - transition.call(this, "removeClass", $.Event(eshow), eshown); + if ($actives && $actives.length) { + $.each($actives, function () { + $(this).dropdown("hide"); + }); + } }; Dropdown.prototype.hide = function () { - if (this.transitioning || this.$element.hasClass("collapse")) { + if (this.transitioning || this.$target.hasClass("collapse")) { return; } @@ -1289,20 +1469,118 @@ if (supportTransition) { // Set the height to auto, calculate the height/width and reset. - size = w.getComputedStyle(this.$element[0])[dimension]; + size = w.getComputedStyle(this.$target[0])[dimension]; // Reset the size and force repaint. - this.$element[dimension](size).redraw(); // Force reflow ; + this.$target[dimension](size).redraw(); // Force reflow ; } - this.$element.removeClass("expand"); - this.$element[dimension](0); - transition.call(this, "addClass", $.Event(ehide), ehidden); + this.$target.removeClass("expand"); + this.$target[dimension](0); + this.transition("addClass", $.Event(ehide), ehidden); }; Dropdown.prototype.toggle = function () { - // Run the correct command based on the presence of the class 'collapse'. - this[this.$element.hasClass("collapse") ? "show" : "hide"](); + // Run the correct command based on the presence of the class "collapse". + this[this.$target.hasClass("collapse") ? "show" : "hide"](); + }; + + Dropdown.prototype.transition = function (method, startEvent, completeEvent) { + + var self = this, + doShow = method === "removeClass", + complete = function () { + + // The event to expose. + var eventToTrigger = $.Event(completeEvent); + + // Ensure the height/width is set to auto. + self.$target.removeClass("trans")[self.options.dimension](""); + + self.transitioning = false; + + // Set the correct aria attributes. + self.$target.attr({ + "aria-hidden": !doShow, + "tabindex": doShow ? 0 : -1, + }); + + + var $tab = $("#" + self.$target.attr("aria-labelledby")).attr({ + "aria-selected": doShow, + "aria-expanded": doShow + }); + + if (doShow) { + $tab.focus(); + } + + // Toggle any children. + self.$target.find("[tabindex]:not(.collapse)").attr({ + "aria-hidden": !doShow, + "tabindex": doShow ? 0 : -1, + }); + + self.$element.trigger(eventToTrigger); + }; + + if (this.transitioning || startEvent.isDefaultPrevented()) { + return; + } + + this.transitioning = true; + + // Remove or add the expand classes. + this.$element.trigger(startEvent); + this.$target[method]("collapse"); + this.$target[startEvent.type === "show" ? "addClass" : "removeClass"]("expand trans"); + + this.$target.onTransitionEnd(complete); + }; + + Dropdown.prototype.click = function (event) { + event.preventDefault(); + event.stopPropagation(); + this.toggle(); + }; + + Dropdown.prototype.keydown = function (event) { + + var which = event.which; + + if (which === keys.SPACE || which === keys.LEFT || which === keys.RIGHT) { + + event.preventDefault(); + event.stopPropagation(); + + var $this = $(event.target), + $parent = this.options.parent ? $this.closest("[role=tablist]") : $this.closest(".accordion"), + $items = $parent.find(" > [role=presentation] > [role=presentation]").children("[role=tab]"), + index = $items.index($items.filter(":focus")), + length = $items.length; + + if (which === keys.SPACE) { + $($items.eq(index)).data("r.dropdown").toggle(); + return; + } + + if (which === keys.LEFT) { + rtl ? index += 1 : index -= 1; + } else if (which === keys.RIGHT) { + rtl ? index -= 1 : index += 1; + } + + // Ensure that the index stays within bounds. + if (index === length) { + index = 0; + } + + if (index < 0) { + index = length - 1; + } + + $($items.eq(index)).data("r.dropdown").show(); + } }; // Plug-in definition @@ -1318,7 +1596,7 @@ } // Run the appropriate function if a string is passed. - if (typeof options === "string") { + if (typeof options === "string" && /(show|hide|toggle)/.test(options)) { data[options](); } }); @@ -1335,24 +1613,22 @@ }; // Dropdown data api initialization. - $("body").on(eclick, ":attrStart(data-dropdown)", function (event) { - - event.preventDefault(); - - var $this = $(this), - data = $this.data("r.dropdownOptions"), - options = data || $.buildDataOptions($this, {}, "dropdown", "r"), - target = options.target || (options.target = $this.attr("href")), - $target = $(target), - params = $target.data("r.dropdown") ? "toggle" : options; + $(document).on(eready, function () { + $(":attrStart(data-dropdown)").each(function () { + var $this = $(this), + data = $this.data("r.dropdownOptions"), + options = data || $.buildDataOptions($this, {}, "dropdown", "r"); - // Run the dropdown method. - $target.dropdown(params); + options.target || (options.target = $this.attr("href")); + // Run the dropdown method. + $this.dropdown(options); + }); }); w.RESPONSIVE_DROPDOWN = true; }(jQuery, window, ".r.dropdown")); + /* * Responsive Lightbox */ @@ -1364,33 +1640,40 @@ "use strict"; - if (w.RESPONSIVE_LIGHTBOX) { + if (w.RESPONSIVE_MODAL) { return; } - // General variables. var $window = $(w), $html = $("html"), $body = $("body"), - $overlay = $("
").addClass("lightbox-overlay lightbox-loader fade-out"), - $lightbox = $("
").addClass("lightbox fade-out").appendTo($overlay), - $header = $("
").addClass("lightbox-header fade-out"), - $footer = $("
").addClass("lightbox-footer fade-out"), - $img = null, - $iframe = null, - $content = null, - $close = $("").attr({ "href": "#", "title": "Close (Esc)" }).addClass("lightbox-close fade-out").html("x"), - $previous = $("").attr({ "href": "#", "title": "Previous (Left Arrow)" }).addClass("lightbox-direction left hidden"), - $next = $("").attr({ "href": "#", "title": "Next (Right Arrow)" }).addClass("lightbox-direction right hidden"), - $placeholder = $("
").addClass("lightbox-placeholder"), - scrollbarWidth = 0, - lastScroll = 0, + $overlay = $("
").attr({ "role": "document" }).addClass("modal-overlay modal-loader fade-out"), + $modal = $("
").addClass("modal fade-out").appendTo($overlay), + $header = $("
").addClass("modal-header fade-out"), + $footer = $("
").addClass("modal-footer fade-out"), + $close = $(" +

+
+ +

Form

+ Launch internal overlay containing a form + +

Wrapped Image

+
+ + + +
+ +

Mobile Redirect

+

Should redirect on viewports of 768px and below. (settable)

+
+ + + +
+ +

Should redirect on when the current applied grid is "s" and below. (settable)

+
+ + + +
+ +

Grouped

+
+
+ Grouped Item 1 +
+
+ Grouped Item 2 +
+
+ Grouped Item 3 +
+
+ Grouped Item 4 +
+
+ + + + + + + + + + + + + diff --git a/tests/tables/basic.html b/tests/css/ltr/tables/basic.html similarity index 51% rename from tests/tables/basic.html rename to tests/css/ltr/tables/basic.html index ab35ef3a..ef562d0f 100644 --- a/tests/tables/basic.html +++ b/tests/css/ltr/tables/basic.html @@ -7,20 +7,23 @@ Table Tests - + - + - +
+
+
+

Table with overflow wrapper

+

Wrap the table in a container with the class .table-scrollable.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Header1Header2Header3Header4Header5Header6Header7Header8
Footer1Footer2Footer3Footer4Footer5Footer6Footer7Footer8
Data1Data2Data3Data4Data5Data6Data7Data8
Data1Data2Data3Data4Data5Data6Data7Data8
Data1Data2Data3Data4Data5Data6Data7Data8
Data1Data2Data3Data4Data5Data6Data7Data8
+
+
+
- - + - - - - - - - + diff --git a/tests/css/ltr/tables/tablelist.html b/tests/css/ltr/tables/tablelist.html new file mode 100644 index 00000000..6579cd90 --- /dev/null +++ b/tests/css/ltr/tables/tablelist.html @@ -0,0 +1,270 @@ + + + + + + + + Table Tests + + + + + + + + + + + + +
+ +

TableList

+
+

Resize to convert the table into a list.

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TitleDirectorSynopsisRelease Year
Star Wars: Episode IV - A New HopeGeorge LucasLuke Skywalker joins forces with a Jedi Knight...1977
Star Wars: Episode V - The Empire Strikes BackIrvin KershnerAfter the rebels have been brutally overpowered by...1980
Star Wars: Episode VI - Return of the JediRichard MarquandAfter rescuing Han Solo from the palace of Jabba...1983
+
+
+
+
+

TableList

+

JavaScript enabled, add attribute data-table-list

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Header1Header2Header3Header4
Footer1Footer2Footer3Footer4
Data1Data2 with a larger amount of copy to demonstrate what happens when we drop down the display width to less than 48em.Data3Data4
Data1Data2Data3Data4
Data1Data2Data3Data4
Data1Data2Data3Data4
+
+
+

TableList Striped

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Header1Header2Header3Header4
Footer1Footer2Footer3Footer4
Data1Data2 with a larger amount of copy to demonstrate what happens when we drop down the display width to less than 48em.Data3Data4
Data1Data2Data3Data4
Data1Data2Data3Data4
Data1Data2Data3Data4
+
+
+
+
+

TableList Bordered

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Header1Header2Header3Header4
Footer1Footer2Footer3Footer4
Data1Data2 with a larger amount of copy to demonstrate what happens when we drop down the display width to less than 48em.Data3Data4
Data1Data2Data3Data4
Data1Data2Data3Data4
Data1Data2Data3Data4
+
+
+

TableList Striped Bordered

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Header1Header2Header3Header4
Footer1Footer2Footer3Footer4
Data1Data2 with a larger amount of copy to demonstrate what happens when we drop down the display width to less than 48em.Data3Data4
Data1Data2Data3Data4
Data1Data2Data3Data4
Data1Data2Data3Data4
+
+
+
+ + + + + + + + + + diff --git a/tests/tabs/all.html b/tests/css/ltr/tabs/all.html similarity index 87% rename from tests/tabs/all.html rename to tests/css/ltr/tabs/all.html index a3d7c7aa..1962f706 100644 --- a/tests/tabs/all.html +++ b/tests/css/ltr/tabs/all.html @@ -7,22 +7,26 @@ Tabs Tests - + - + - +
+

Tabs

+

Tabs can be triggered by spacebar, enter or by left and right arrows. Appropriate aria attributes (I think) have been added.

@@ -75,12 +79,12 @@

Tabs

- + - + diff --git a/tests/css/rtl/alerts/all.html b/tests/css/rtl/alerts/all.html new file mode 100644 index 00000000..148e2f33 --- /dev/null +++ b/tests/css/rtl/alerts/all.html @@ -0,0 +1,58 @@ + + + + + + + + Dismiss Tests + + + + + + + + + + + +
+ +

Dismiss

+
+
+
+

Alert

+
+ +

Alert block

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+

Phasellus vitae nibh justo. Integer a ligula vel enim ultricies mollis ut ac tortor.

+
+
+
+
+ + + + + + + + + + + + + + + + diff --git a/tests/css/rtl/autosize/all.html b/tests/css/rtl/autosize/all.html new file mode 100644 index 00000000..774b3f13 --- /dev/null +++ b/tests/css/rtl/autosize/all.html @@ -0,0 +1,58 @@ + + + + + + + + Autosize Tests + + + + + + + + + + + +
+ +

Autosize

+
+
+
+

Standard Example

+ +
+
+

Extra Data-Attributes Example

+ +

Extra data-attributes configured to allow removal of problematic classes or attributes that could affect the cloned element used for calculating size.

+
+
+
+ + + + + + + + + + + + + + + + diff --git a/tests/css/rtl/base/helpers.html b/tests/css/rtl/base/helpers.html new file mode 100644 index 00000000..296a34e0 --- /dev/null +++ b/tests/css/rtl/base/helpers.html @@ -0,0 +1,137 @@ + + + + + + + + Base Tests + + + + + + + + + + + +
+ +

Base

+
+

Helpers

+
+

Responsive helpers.

+

+ These helpers allow you to toggle the visibility of elements as the viewport scales. + Em + values are calculated at the browser body default of + 16px = 1em. +

+
+

Visible Example: Green means visible

+
+ +
+
+ +
+
+ +
+
+ +
+
+
+

Hidden Example: Red means hidden

+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ + + + + + + + + + diff --git a/tests/css/rtl/base/typography.html b/tests/css/rtl/base/typography.html new file mode 100644 index 00000000..c15340bd --- /dev/null +++ b/tests/css/rtl/base/typography.html @@ -0,0 +1,154 @@ + + + + + + + + Base Tests + + + + + + + + + + + +
+ +

Base

+
+

Typography

+
+

Headings

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Header ElementDefault Dimensions
+

h1 element

+ 		+ 
font-size: 2em;
+margin: .67em 0;
+
+

h2 element

+ 		+ 
font-size: 1.5em;
+margin: .83em 0;
+
+

h3 element

+ 		+ 
font-size: 1.17em;
+margin: 1em 0;
+
+

h4 element

+ 		+ 
font-size: 1em;
+margin: 1.33em 0;
+
+
h5 element
+ 		+ 
font-size: .83em;
+margin: 1.67em 0;
+
+
h6 element
+ 		+ 
font-size: .67em;
+margin: 2.33em 0;
+
+
+
+

Hr element

+
+
+
+

Inline Typographical Elements

+
+
+

+ q element inside a q element example
+ s element example
+ small element example
+ span element example
+ strong element example
+ sub element example
+ sup element example
+ u element example
+ var element + example +

+
+
+

+ cite element example
+ del element example
+ dfn element and dfn element with title examples
+ em element example
+ i element example
+ ins element example
+ mark element example
+ abbr + example
+ ruby example +

+
+
+
+
+
+

I am a quote saying something wonderfully profound.

+ Awesome McAwesomeson. +
+
+
+
+
+ + + + + + + + + + diff --git a/tests/css/rtl/buttons/all.html b/tests/css/rtl/buttons/all.html new file mode 100644 index 00000000..02f923a5 --- /dev/null +++ b/tests/css/rtl/buttons/all.html @@ -0,0 +1,176 @@ + + + + + + + + Button Tests + + + + + + + + + + + +
+ +

Buttons

+
+
+

Default Button Styles

+

All styles are attribute based.

+

+ Button states are: + :hover, :focus, :active, and :disabled. +

+
+
+

Button

+

Standard button element.

+ +
+
+

Input : Button

+

Standard input[type="button"] element.

+ +
+
+
+
+

Input : Submit

+

Standard input[type="submit"] element.

+ +
+
+

Input : Reset

+

Standard input[type="reset"] element.

+ +
+
+
+
+
+
+

Disabled State

+
+

Button

+

Standard button element.

+ +
+
+

Input : Button

+

Standard input[type="button"] element.

+ +
+
+

Input : Submit

+

Standard input[type="submit"] element.

+ +
+
+

Input : Reset

+

Standard input[type="reset"] element.

+ +
+
+
+

Inline buttons

+

Add the class .btn-inline

+
+

Button

+

Standard button element.

+ + +
+
+

Input : Button

+

Standard input[type="button"] element.

+ + +
+
+

Input : Submit

+

Standard input[type="submit"] element.

+ + +
+
+

Input : Reset

+

Standard input[type="reset"] element.

+ + +
+
+
+
+
+

Grouped Buttons

+

Wrap the buttons in a div with class .btn-group

+
+
+

Button

+

Standard button element.

+
+ + + + +
+
+
+

Input : Button

+

Standard input[type="button"] element.

+
+ + + + +
+
+
+
+
+

Input : Submit

+

Standard input[type="submit"] element.

+
+ + + + +
+
+
+

Input : Reset

+

Standard input[type="reset"] element.

+
+ + + + +
+
+
+
+
+ + + + + + + + + + diff --git a/tests/css/rtl/carousel/all.html b/tests/css/rtl/carousel/all.html new file mode 100644 index 00000000..4a93cbc9 --- /dev/null +++ b/tests/css/rtl/carousel/all.html @@ -0,0 +1,123 @@ + + + + + + + + Carousel Tests + + + + + + + + + + + +
+ +

Carousel

+
+

Keys left, right, space, and enter will slide the carousel as will click.

+

Appropriate aria attributes have been added to the various componants.

+
+
+

Slide Mode - Automatic slide enabled.

+ +
+
+

Fade Mode

+ + +
+
+
+ + + + + + + + + + + diff --git a/tests/carousel/all.html b/tests/css/rtl/carousel/lazy-load.html similarity index 55% rename from tests/carousel/all.html rename to tests/css/rtl/carousel/lazy-load.html index ee604651..9017340e 100644 --- a/tests/carousel/all.html +++ b/tests/css/rtl/carousel/lazy-load.html @@ -1,5 +1,5 @@  - + @@ -7,20 +7,23 @@ Carousel Tests - + - + - +
+

Carousel

@@ -28,76 +31,70 @@

Carousel

Slide Mode

- -
    -
  1. 1
    2. -
  2. 2
    3. -
  3. 3
    4. -

Fade Mode

@@ -106,13 +103,13 @@

Third Thumbnail label

- + - + @@ -120,4 +117,4 @@

Third Thumbnail label

- + \ No newline at end of file diff --git a/tests/css/rtl/code/all.html b/tests/css/rtl/code/all.html new file mode 100644 index 00000000..0e746d00 --- /dev/null +++ b/tests/css/rtl/code/all.html @@ -0,0 +1,169 @@ + + + + + + + + Code Tests + + + + + + + + + + + +
+ +

Code

+
+
+
+

Inline Code

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. + Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget + libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut + libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut + gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna + consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero + in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi + at sem facilisis semper ac in est. +

+
+
+

Pre

+

This is the Panel constructor:

+ 
function Panel(element, canClose, closeHandler) {
+  this.element = element;
+  this.canClose = canClose;
+  this.closeHandler = function () { 
+    
+    if (closeHandler) {
+    
+    closeHandler(); 
+    }
+  };
+}
+
+
+
+
+

Inline Code

+

+ In the following snippet, + samp + and kbd elements are mixed in the contents of a pre element to show a session of Zork I. +

+ + 
You are in an open field west of a big white house with 
+a boarded front door.
+There is a small mailbox here.
+> open mailbox
+Opening the mailbox reveals:
+A leaflet.
+>
+
+
+

Fixed Height

+

Add the class .pre-scrollable.

+ 
pre, code, samp, kbd {
+    background-color: #f7f7f9;
+    border: 1px solid #e1e1e8;
+    color: #dd1144;
+    padding: .13em .25em;
+}
+code {
+    padding: .067em .25em;
+    white-space: nowrap;
+}
+pre code,
+pre samp {
+    border: none;
+    padding: 0;
+    white-space: pre-wrap;
+}
+.pre-scrollable {
+    max-height: 20em;
+    overflow-y: scroll;
+}
+
+
+
+
+

The following shows a contemporary poem that uses the pre element to preserve its unusual formatting, which forms an intrinsic part of the poem itself.

+ 
                maxling
+it is with a          heart
+               heavy
+that i admit loss of a feline
+        so           loved
+a friend lost to the
+        unknown
+                                (night)
+~cdr 11dec07
+
+
+ 
<div id="carousel-2" class="carousel" data-carousel-mode="fade" data-carousel-interval="5000">
+    <!-- Carousel Indicators-->
+    <ol>
+        <li data-carousel-target="#carousel-2" data-carousel-slide-to="0" class="active"></li>
+        <li data-carousel-target="#carousel-2" data-carousel-slide-to="1"></li>
+        <li data-carousel-target="#carousel-2" data-carousel-slide-to="2"></li>
+    </ol>
+    <!-- Carousel Items-->
+    <figure class="carousel-active">
+        <img src="../test-assets/img/hydrangeas.jpg" alt="hydrangeas">
+        <figcaption>
+            <h4>First Thumbnail label</h4>
+            <p>Lorem ipsum dolor sit amet, consectetur ...</p>
+        </figcaption>
+    </figure>
+    <figure>
+        <img src="../test-assets/img/chrysanthemum.jpg" alt="chrysanthemum">
+        <figcaption>
+            <h4>Second Thumbnail label</h4>
+            <p>Lorem ipsum dolor sit amet, consectetur ...</p>
+        </figcaption>
+    </figure>
+    <figure>
+        <img src="../test-assets/img/desert.jpg" alt="desert">
+        <figcaption>
+            <h4>Third Thumbnail label</h4>
+            <p>Lorem ipsum dolor sit amet, consectetur ...</p>
+        </figcaption>
+    </figure>
+    <!-- Carousel Controls-->
+    <a class="left carousel-control" href="#carousel-2" data-carousel-slide="prev"><</a>
+    <a class="right carousel-control" href="#carousel-2" data-carousel-slide="next">></a>
+</div>
+
+
+
+ + + + + + + + + + + + + + + + diff --git a/tests/dismiss/all.html b/tests/css/rtl/dismiss/all.html similarity index 84% rename from tests/dismiss/all.html rename to tests/css/rtl/dismiss/all.html index fc84aef6..d7d82a9c 100644 --- a/tests/dismiss/all.html +++ b/tests/css/rtl/dismiss/all.html @@ -1,5 +1,5 @@  - + @@ -25,21 +25,21 @@

Dismiss

-
- x +
+

Adding the plugin inside any element will hide the closest parent to the plugin matching the given selector on click.

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum justo leo, tincidunt at nulla sed, aliquam fermentum mauris. - Quisque laoreet, enim et volutpat faucibus, nisi ante gravida dolor, nec ornare libero sapien quis est. Curabitur nec aliquet - lacus, sed suscipit neque. Etiam ut sapien tempus, malesuada enim ut, semper diam. Aliquam erat volutpat. Donec eget posuere ligula. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum justo leo, tincidunt at nulla sed, aliquam fermentum mauris. + Quisque laoreet, enim et volutpat faucibus, nisi ante gravida dolor, nec ornare libero sapien quis est. Curabitur nec aliquet + lacus, sed suscipit neque. Etiam ut sapien tempus, malesuada enim ut, semper diam. Aliquam erat volutpat. Donec eget posuere ligula. Proin fermentum et turpis ut rutrum. Nunc vitae nunc fermentum, aliquam mauris ac, tincidunt dui.

- Cras at laoreet enim. Etiam tincidunt mi ut mi tristique facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Cras sed nunc ut nisl laoreet adipiscing. Quisque a fermentum libero. Nam at facilisis neque, quis tempus purus. Quisque ultrices - est at augue ultricies, vitae rutrum nisl imperdiet. Nullam non erat non mauris eleifend laoreet. Ut nibh nisl, consequat id eleifend + Cras at laoreet enim. Etiam tincidunt mi ut mi tristique facilisis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Cras sed nunc ut nisl laoreet adipiscing. Quisque a fermentum libero. Nam at facilisis neque, quis tempus purus. Quisque ultrices + est at augue ultricies, vitae rutrum nisl imperdiet. Nullam non erat non mauris eleifend laoreet. Ut nibh nisl, consequat id eleifend nec, tristique quis mauris. Maecenas cursus mi nec lorem elementum pulvinar. Vestibulum eu sem quam.

@@ -49,19 +49,19 @@

Dismiss

- - + - - - - - - + + + + + + diff --git a/tests/css/rtl/dropdown/all.html b/tests/css/rtl/dropdown/all.html new file mode 100644 index 00000000..eee306c7 --- /dev/null +++ b/tests/css/rtl/dropdown/all.html @@ -0,0 +1,229 @@ + + + + + + + + Dropdown Tests + + + + + + + + + + + +
+ +

Dropdown

+
+

Ungrouped panes allow tabbing between headers but only to their panels when expanded.

+

Grouped panes can only be tabbed to if they are expanded. Left and right will navigate between pane headers in this instance.

+

Both space and enter will toggle state as will click.

+
+

Accordion

+
+

Un-Grouped

+ +
+
+ + Accordion group item 1 + +
+
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum. +

+
+
+
+
+ + Accordion group item 2 + +
+
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum. +

+
+
+
+
+ + Accordion group item 3 + +
+
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum. +

+
+
+
+
+

Grouped

+

Add data-dropdown-parent="selector" to the trigger and class .dropdown-group to each target.

+
+
+
+ + Accordion group item 1 + +
+
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum. +

+
+
+ + Accordion group item 1 + +
+
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum. +

+
+
+
+
+
+
+ + Accordion group item 2 + +
+
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum. +

+
+
+
+
+ + Accordion group item 3 + +
+
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum. +

+
+
+
+
+
+
+

Basic Vertical

+
+

Below

+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum. +

+
+
+
+

Above

+
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum. +

+
+ +
+
+
+

Basic Horizontal

+
+

Note: To prevent word wrap fix the height and width of the item within your target container.

+
+
+ +
+
+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum. +

+
+
+
+
+
+ + + + + + + + + + + diff --git a/tests/css/rtl/forms/standard.html b/tests/css/rtl/forms/standard.html new file mode 100644 index 00000000..ebc208d5 --- /dev/null +++ b/tests/css/rtl/forms/standard.html @@ -0,0 +1,314 @@ + + + + + + + + Form Tests + + + + + + + + + + + +
+ +

Forms

+
+
+
+
+ Standard Form +
+
+ + + + +

Support text to help describe the input.

+ + No edit + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + +
+ +
+ +
+ + +
+ +
+ + +
+ + +
+
+
+
+ + +
+
+
+
+
+
+
+ Horizontal Form +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +

Support text to help describe the input.

+
+
+
+
+ +
+
+ No edit +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ + +
+
+
+
+ +
+
+ + +
+
+
+
+ +
+
+ +
+
+
+
+
+
+ + +
+
+ + +
+
+
+
+ + + + + + + + + + diff --git a/tests/css/rtl/grid/fixed.html b/tests/css/rtl/grid/fixed.html new file mode 100644 index 00000000..cd8f5e59 --- /dev/null +++ b/tests/css/rtl/grid/fixed.html @@ -0,0 +1,142 @@ + + + + + + + + Fixed - Grid Tests + + + + + + + + + + + +
+ +

Grid

+
+

Fixed Container

+

Add class .fixed to the container and use .col-xs-{number} on the columns.

+
+
+ 12 +
+
+
+
+ 11 +
+
+ 1 +
+
+
+
+ 10 +
+
+ 2 +
+
+
+
+ 9 +
+
+ 3 +
+
+
+
+ 8 +
+
+ 4 +
+
+
+
+ 7 +
+
+ 5 +
+
+
+
+ 6 +
+
+ 6 +
+
+
+
+ 5 +
+
+ 7 +
+
+
+
+ 4 +
+
+ 8 +
+
+
+
+ 3 +
+
+ 9 +
+
+
+
+ 2 +
+
+ 10 +
+
+
+
+ 1 +
+
+ 11 +
+
+
+ + + + + + + + + + + + + + + + diff --git a/tests/css/rtl/grid/nested-columns.html b/tests/css/rtl/grid/nested-columns.html new file mode 100644 index 00000000..21ee39f8 --- /dev/null +++ b/tests/css/rtl/grid/nested-columns.html @@ -0,0 +1,78 @@ + + + + + + + + Nested Columns - Grid Tests + + + + + + + + + + + +
+ +

Grid

+
+

Nested Columns

+
+
+ 6 + +
+
+ 6 + +
+
+ 6 + +
+
+
+
+ 6 + +
+
+ 6 + +
+
+ 6 + +
+
+
+
+
+ + + + + + + + + + + + + + + + diff --git a/tests/css/rtl/grid/no-gutter-l.html b/tests/css/rtl/grid/no-gutter-l.html new file mode 100644 index 00000000..4cb48f47 --- /dev/null +++ b/tests/css/rtl/grid/no-gutter-l.html @@ -0,0 +1,142 @@ + + + + + + + + No Gutter Large - Grid Tests + + + + + + + + + + + +
+ +

Grid

+
+

No Gutter - L

+

Add class .no-gutter to the row.

+
+
+ 12 +
+
+
+
+ 11 +
+
+ 1 +
+
+
+
+ 10 +
+
+ 2 +
+
+
+
+ 9 +
+
+ 3 +
+
+
+
+ 8 +
+
+ 4 +
+
+
+
+ 7 +
+
+ 5 +
+
+
+
+ 6 +
+
+ 6 +
+
+
+
+ 5 +
+
+ 7 +
+
+
+
+ 4 +
+
+ 8 +
+
+
+
+ 3 +
+
+ 9 +
+
+
+
+ 2 +
+
+ 10 +
+
+
+
+ 1 +
+
+ 11 +
+
+
+ + + + + + + + + + + + + + + + diff --git a/tests/css/rtl/grid/no-gutter-m.html b/tests/css/rtl/grid/no-gutter-m.html new file mode 100644 index 00000000..b0e664eb --- /dev/null +++ b/tests/css/rtl/grid/no-gutter-m.html @@ -0,0 +1,142 @@ + + + + + + + + No Gutter Medium - Grid Tests + + + + + + + + + + + +
+ +

Grid

+
+

No Gutter - M

+

Add class .no-gutter to the row.

+
+
+ 12 +
+
+
+
+ 11 +
+
+ 1 +
+
+
+
+ 10 +
+
+ 2 +
+
+
+
+ 9 +
+
+ 3 +
+
+
+
+ 8 +
+
+ 4 +
+
+
+
+ 7 +
+
+ 5 +
+
+
+
+ 6 +
+
+ 6 +
+
+
+
+ 5 +
+
+ 7 +
+
+
+
+ 4 +
+
+ 8 +
+
+
+
+ 3 +
+
+ 9 +
+
+
+
+ 2 +
+
+ 10 +
+
+
+
+ 1 +
+
+ 11 +
+
+
+ + + + + + + + + + + + + + + + diff --git a/tests/css/rtl/grid/no-gutter-s.html b/tests/css/rtl/grid/no-gutter-s.html new file mode 100644 index 00000000..9244b606 --- /dev/null +++ b/tests/css/rtl/grid/no-gutter-s.html @@ -0,0 +1,142 @@ + + + + + + + + No Gutter Small - Grid Tests + + + + + + + + + + + +
+ +

Grid

+
+

No Gutter - S

+

Add class .no-gutter to the row.

+
+
+ 12 +
+
+
+
+ 11 +
+
+ 1 +
+
+
+
+ 10 +
+
+ 2 +
+
+
+
+ 9 +
+
+ 3 +
+
+
+
+ 8 +
+
+ 4 +
+
+
+
+ 7 +
+
+ 5 +
+
+
+
+ 6 +
+
+ 6 +
+
+
+
+ 5 +
+
+ 7 +
+
+
+
+ 4 +
+
+ 8 +
+
+
+
+ 3 +
+
+ 9 +
+
+
+
+ 2 +
+
+ 10 +
+
+
+
+ 1 +
+
+ 11 +
+
+
+ + + + + + + + + + + + + + + + diff --git a/tests/css/rtl/grid/no-gutter-xs.html b/tests/css/rtl/grid/no-gutter-xs.html new file mode 100644 index 00000000..4102c963 --- /dev/null +++ b/tests/css/rtl/grid/no-gutter-xs.html @@ -0,0 +1,142 @@ + + + + + + + + No Gutter X Small - Grid Tests + + + + + + + + + + + +
+ +

Grid

+
+

No Gutter - XS

+

Add class .no-gutter to the row.

+
+
+ 12 +
+
+
+
+ 11 +
+
+ 1 +
+
+
+
+ 10 +
+
+ 2 +
+
+
+
+ 9 +
+
+ 3 +
+
+
+
+ 8 +
+
+ 4 +
+
+
+
+ 7 +
+
+ 5 +
+
+
+
+ 6 +
+
+ 6 +
+
+
+
+ 5 +
+
+ 7 +
+
+
+
+ 4 +
+
+ 8 +
+
+
+
+ 3 +
+
+ 9 +
+
+
+
+ 2 +
+
+ 10 +
+
+
+
+ 1 +
+
+ 11 +
+
+
+ + + + + + + + + + + + + + + + diff --git a/tests/css/rtl/grid/offset-columns.html b/tests/css/rtl/grid/offset-columns.html new file mode 100644 index 00000000..f5b499a8 --- /dev/null +++ b/tests/css/rtl/grid/offset-columns.html @@ -0,0 +1,265 @@ + + + + + + + + Offset - Grid Tests + + + + + + + + + + + +
+ +

Grid

+
+
+

Offset Columns

+

Add class .offset-{size}-{number} to the column.

+
+
+ 1 + +
+
+ 1 + +
+
+
+
+ 2 + +
+
+
+
+ 3 + +
+
+
+
+ 4 + +
+
+
+
+ 5 + +
+
+
+
+ 6 + +
+
+
+
+ 7 + +
+
+
+
+ 8 + +
+
+
+
+ 9 + +
+
+
+
+ 10 + +
+
+
+
+ 11 + +
+
+
+
+
+
+
+
+ 1 + +
+
+ 1 + +
+
+
+
+ 2 + +
+
+
+
+ 3 + +
+
+
+
+ 4 + +
+
+
+
+ 5 + +
+
+
+
+ 6 + +
+
+
+
+ 7 + +
+
+
+
+ 8 + +
+
+
+
+ 9 + +
+
+
+
+ 10 + +
+
+
+
+ 11 + +
+
+
+
+
+
+
+
+ 4 +
+
+ 4 +
+
+
+
+ 4 +
+
+
+
+
+
+
+
+ 4 +
+
+ 4 +
+
+
+
+ 4 +
+
+
+ + +
+
+
+
+
+ 3 +
+
+ 3 +
+
+
+
+ 3 +
+
+
+
+
+
+
+
+ 3 +
+
+ 3 +
+
+
+
+ 3 +
+
+
+
+ + + + + + + + + + + + + + + + diff --git a/tests/css/rtl/grid/reset.html b/tests/css/rtl/grid/reset.html new file mode 100644 index 00000000..f336fc7a --- /dev/null +++ b/tests/css/rtl/grid/reset.html @@ -0,0 +1,170 @@ + + + + + + + + Reset - Grid Tests + + + + + + + + + + + +
+ +

Grid

+
+
+

Reset Columns

+

Add class .reset-{size} to the column.

+
+
+
12
+
3
+ +
+
+
12
+
3
+ +
+
+
12
+
3
+ +
+
+
12
+
3
+ +
+
+
+
+
+
+
+
+
6
+
3
+ +
+
+
6
+
3
+ +
+
+
6
+
3
+ +
+
+
6
+
3
+ +
+
+
+
+
+
+
+
+
12
+
3
+ +
+
+
12
+
3
+ +
+
+
12
+
3
+ +
+
+
12
+
3
+ +
+
+
+
+
+
+
+
+
12
+
3
+ +
+
+
12
+
3
+ +
+
+
12
+
3
+ +
+
+
12
+
3
+ +
+
+
+
+
+
+
+
+ +
8
+
12
+
+
+ +
12
+
+
+ +
12
+
+
+
+
+ + + + + + + + + + + + + + + + diff --git a/tests/css/rtl/grid/resize.html b/tests/css/rtl/grid/resize.html new file mode 100644 index 00000000..df9b47a8 --- /dev/null +++ b/tests/css/rtl/grid/resize.html @@ -0,0 +1,114 @@ + + + + + + + + Resize - Grid Tests + + + + + + + + + + + +
+ +

Grid

+
+

Resized Columns

+

+ Add class .col-{size}-{number} to the column. +

+

+ Add class .reset-{size} to the columns to reset the margin. +

+ +
+
+
12
+
6
+ +
+
+
12
+
6
+ +
+
+
12
+
6
+ +
+
+
12
+
6
+ +
+
+
12
+
6
+ +
+
+
12
+
6
+ +
+
+
12
+
6
+ +
+
+
12
+
6
+ +
+
+ +
+
+
+
+
6
+ +
+
+
6
+ +
+
+
12
+ +
+
+
+ + + + + + + + + + + + + + + + diff --git a/tests/css/rtl/grid/spaced.html b/tests/css/rtl/grid/spaced.html new file mode 100644 index 00000000..dd880ace --- /dev/null +++ b/tests/css/rtl/grid/spaced.html @@ -0,0 +1,79 @@ + + + + + + + + Spaced - Grid Tests + + + + + + + + + + + +
+ +

Grid

+
+

Spaced Columns

+

+ Add class .push-{size}-{number} to the column. +

+

Standard

+
+
3
+
3
+
+
+
3
+
3
+
+

No Gutter

+
+
3
+
3
+
+
+
3
+
3
+
+ +

Pad Gutter

+
+
3
+
3
+
+
+
3
+
3
+
+
+ + + + + + + + + + + + + + + + diff --git a/tests/css/rtl/grid/standard-l.html b/tests/css/rtl/grid/standard-l.html new file mode 100644 index 00000000..32a0f17b --- /dev/null +++ b/tests/css/rtl/grid/standard-l.html @@ -0,0 +1,154 @@ + + + + + + + + Standard Large - Grid Tests + + + + + + + + + + + +
+ +

Grid

+
+

Standard - L

+
+
+ 12 +
+
+
+
+ 11 +
+
+ 1 +
+
+
+
+ 10 +
+
+ 2 +
+
+
+
+ 9 +
+
+ 3 +
+
+
+
+ 8 +
+
+ 4 +
+
+
+
+ 7 +
+
+ 5 +
+
+
+
+ 6 +
+
+ 6 +
+
+
+
+ 5 +
+
+ 7 +
+
+
+
+ 4 +
+
+ 8 +
+
+
+
+ 3 +
+
+ 9 +
+
+
+
+ 2 +
+
+ 10 +
+
+
+
+ 1 +
+
+ 11 +
+
+
+ +
+
+
+
+
+ 12 +
+
+ 12 +
+
+
+ + + + + + + + + + + + + + + + diff --git a/tests/css/rtl/grid/standard-m.html b/tests/css/rtl/grid/standard-m.html new file mode 100644 index 00000000..7c3cbf6c --- /dev/null +++ b/tests/css/rtl/grid/standard-m.html @@ -0,0 +1,154 @@ + + + + + + + + Standard Medium - Grid Tests + + + + + + + + + + + +
+ +

Grid

+
+

Standard - M

+
+
+ 12 +
+
+
+
+ 11 +
+
+ 1 +
+
+
+
+ 10 +
+
+ 2 +
+
+
+
+ 9 +
+
+ 3 +
+
+
+
+ 8 +
+
+ 4 +
+
+
+
+ 7 +
+
+ 5 +
+
+
+
+ 6 +
+
+ 6 +
+
+
+
+ 5 +
+
+ 7 +
+
+
+
+ 4 +
+
+ 8 +
+
+
+
+ 3 +
+
+ 9 +
+
+
+
+ 2 +
+
+ 10 +
+
+
+
+ 1 +
+
+ 11 +
+
+
+ +
+
+
+
+
+ 12 +
+
+ 12 +
+
+
+ + + + + + + + + + + + + + + + diff --git a/tests/css/rtl/grid/standard-s.html b/tests/css/rtl/grid/standard-s.html new file mode 100644 index 00000000..58319872 --- /dev/null +++ b/tests/css/rtl/grid/standard-s.html @@ -0,0 +1,153 @@ + + + + + + + + Standard Small - Grid Tests + + + + + + + + + + + +
+ +

Grid

+
+

Standard - S

+
+
+ 12 +
+
+
+
+ 11 +
+
+ 1 +
+
+
+
+ 10 +
+
+ 2 +
+
+
+
+ 9 +
+
+ 3 +
+
+
+
+ 8 +
+
+ 4 +
+
+
+
+ 7 +
+
+ 5 +
+
+
+
+ 6 +
+
+ 6 +
+
+
+
+ 5 +
+
+ 7 +
+
+
+
+ 4 +
+
+ 8 +
+
+
+
+ 3 +
+
+ 9 +
+
+
+
+ 2 +
+
+ 10 +
+
+
+
+ 1 +
+
+ 11 +
+
+
+ +
+
+
+
+
+ 12 +
+
+ 12 +
+
+
+ + + + + + + + + + + + + + + diff --git a/tests/css/rtl/grid/standard-xs.html b/tests/css/rtl/grid/standard-xs.html new file mode 100644 index 00000000..0e34eb43 --- /dev/null +++ b/tests/css/rtl/grid/standard-xs.html @@ -0,0 +1,153 @@ + + + + + + + + Standard X Small - Tests + + + + + + + + + + + +
+ +

Grid

+
+

Standard - XS

+
+
+ 12 +
+
+
+
+ 11 +
+
+ 1 +
+
+
+
+ 10 +
+
+ 2 +
+
+
+
+ 9 +
+
+ 3 +
+
+
+
+ 8 +
+
+ 4 +
+
+
+
+ 7 +
+
+ 5 +
+
+
+
+ 6 +
+
+ 6 +
+
+
+
+ 5 +
+
+ 7 +
+
+
+
+ 4 +
+
+ 8 +
+
+
+
+ 3 +
+
+ 9 +
+
+
+
+ 2 +
+
+ 10 +
+
+
+
+ 1 +
+
+ 11 +
+
+
+ +
+
+
+
+
+ 12 +
+
+ 12 +
+
+
+ + + + + + + + + + + + + + + diff --git a/tests/css/rtl/grid/swapped.html b/tests/css/rtl/grid/swapped.html new file mode 100644 index 00000000..65a76ef3 --- /dev/null +++ b/tests/css/rtl/grid/swapped.html @@ -0,0 +1,135 @@ + + + + + + + + Swapped - Grid Tests + + + + + + + + + + + +
+

Grid

+
+

Switched Columns

+

+ Add class .push-{size}-{number} to the column. +

+

+ Add class .pull-{size}-{number} to the column. +

+
+

X-Small

+

+ Standard +

+
+
First
+
Last
+
+ +

No Gutter

+
+
First
+
Last
+
+ +

Pad Gutter

+
+
First
+
Last
+
+
+
+

Small

+

+ Standard +

+
+
First
+
Last
+
+ +

No Gutter

+
+
First
+
Last
+
+ +

Pad Gutter

+
+
First
+
Last
+
+
+ +
+

Medium

+

+ Standard +

+
+
First
+
Last
+
+ +

No Gutter

+
+
First
+
Last
+
+ +

Pad Gutter

+
+
First
+
Last
+
+
+ +
+

Large

+

+ Standard +

+
+
First
+
Last
+
+ +

No Gutter

+
+
First
+
Last
+
+ +

Pad Gutter

+
+
First
+
Last
+
+
+
+ + + + + + + + + + diff --git a/tests/css/rtl/lists/all.html b/tests/css/rtl/lists/all.html new file mode 100644 index 00000000..96cee5d5 --- /dev/null +++ b/tests/css/rtl/lists/all.html @@ -0,0 +1,175 @@ + + + + + + + + List Tests + + + + + + + + + + + +
+ +

Lists

+
+
+
+

Standard

+
    +
  • first
    • +
  • second
    • +
  • + third +
      +
    • alpha
      • +
    • beta
      • +
    • gamma
      • +
    • delta
      • +
    +
    • +
  • fourth
    • +
+ +
    +
  1. first
    2. +
  2. second
    3. +
  3. + third +
      +
    1. alpha
      2. +
    2. beta
      3. +
    3. gamma
      4. +
    4. delta
      5. +
    +
    4. +
  4. fourth
    5. +
+
+
+

No bullets

+

Add class .no-bullets

+
    +
  • first
    • +
  • second
    • +
  • + third +
      +
    • alpha
      • +
    • beta
      • +
    • gamma
      • +
    • delta
      • +
    +
    • +
  • fourth
    • +
+ +
    +
  1. first
    2. +
  2. second
    3. +
  3. + third +
      +
    1. alpha
      2. +
    2. beta
      3. +
    3. gamma
      4. +
    4. delta
      5. +
    +
    4. +
  4. fourth
    5. +
+
+
+

Coloured

+

Add class .colored

+
    +
  • first
    • +
  • second
    • +
  • + third +
      +
    • alpha
      • +
    • beta
      • +
    • gamma
      • +
    • delta
      • +
    +
    • +
  • fourth
    • +
+ +
    +
  1. first
    2. +
  2. second
    3. +
  3. + third +
      +
    1. alpha
      2. +
    2. beta
      3. +
    3. gamma
      4. +
    4. delta
      5. +
    +
    4. +
  4. fourth
    5. +
+
+
+
+

Definition Lists

+
+

Standard

+
+
Description list
+
A group of terms and their definitions.
+
Name of the term
+
Description of the term.
+
Secondary description of the term.
+
Name of the term
+
+ Description of the term with lots of copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Phasellus vitae nibh justo. Integer a ligula vel enim ultricies mollis ut ac tortor. +
+
+
+
+

Horizontal Layout

+

Add class .dl-horizontal

+
+
Description list
+
A group of terms and their definitions.
+
Name of the term
+
Description of the term.
+
Secondary description of the term.
+
Name of the term
+
+ Description of the term with lots of copy. Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Phasellus vitae nibh justo. Integer a ligula vel enim ultricies mollis ut ac tortor. +
+
+
+
+
+ + + + + + + + + + diff --git a/tests/media/iframe.html b/tests/css/rtl/media/iframe.html similarity index 55% rename from tests/media/iframe.html rename to tests/css/rtl/media/iframe.html index ec44bd05..ea5035ec 100644 --- a/tests/media/iframe.html +++ b/tests/css/rtl/media/iframe.html @@ -1,5 +1,5 @@  - + @@ -7,88 +7,90 @@ Media Tests - + - + - +
+

Media

-

Iframe

+

Iframe

-

Youtube

+

Youtube

Add class .media to the media container.

- +
-

Dailymotion

+

Dailymotion

Add class .media to the media container.

- +
-
-

Google Maps

-

Add classes .media and .google-map to the media container.

-
- +

Google Maps

+

Add classes .media to the media container.

+
+
- View Larger Map + View Larger Map
-

Vimeo

+

Vimeo

Add classes .media and .vimeo to the media container.

- +
-

Vine

+

Vine

Add classes .media and .vine to the media container.

-

Instagram

+

Instagram

Add classes .media and .instagram to the media container.

- +
-

Getty

+

Getty

Add classes .media and .getty to the media container.

- +
-

Getty

+

Getty

Add classes .media and .getty to the media container.

- +
@@ -104,13 +106,13 @@

Getty

- + - + diff --git a/tests/css/rtl/media/image.html b/tests/css/rtl/media/image.html new file mode 100644 index 00000000..d989b78e --- /dev/null +++ b/tests/css/rtl/media/image.html @@ -0,0 +1,79 @@ + + + + + + + + Media Tests + + + + + + + + + + + +
+ +

Media

+
+
+

Images

+
+
+ responsive image +
+
+ responsive image +
+
+ responsive image +
+
+ responsive image +
+
+
+
+

Constrained Images

+

Wrap the image in a container with the class .media.

+
+
+
+ responsive image +
+
+
+
+ responsive image +
+
+
+
+ responsive image +
+
+
+
+
+ + + + + + + + + + diff --git a/tests/css/rtl/media/video.html b/tests/css/rtl/media/video.html new file mode 100644 index 00000000..4b7a7579 --- /dev/null +++ b/tests/css/rtl/media/video.html @@ -0,0 +1,72 @@ + + + + + + + + Media Tests + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/tests/css/rtl/misc/swipe.html b/tests/css/rtl/misc/swipe.html new file mode 100644 index 00000000..5c7e375c --- /dev/null +++ b/tests/css/rtl/misc/swipe.html @@ -0,0 +1,226 @@ + + + + + + + + Responsive Tests + + + + + + + + + + + + +
+

Swipe Tests

+

Swipe the pink box to test directional detection support.

+

Swipe the blue box to test draggable support.

+
+ +
+
+ Swipe Me +
+
+ +
+
+ Drag Me +
+
+
+

Extra copy to test native scroll

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tortor nunc, volutpat fringilla tincidunt a, tempor quis massa. Etiam tincidunt pharetra turpis ut consequat. Nam at lobortis turpis. Nam condimentum id lectus ut feugiat. Suspendisse eget tellus nunc. Sed quis nunc blandit, vehicula tellus eu, adipiscing lacus. Phasellus metus felis, tincidunt in dapibus et, placerat sed mi. Praesent odio risus, accumsan at euismod et, posuere a ante. Sed mollis purus lacus. Morbi eget magna commodo, adipiscing nisl in, imperdiet lacus. Aliquam ut aliquet urna. Nam sit amet mollis erat, quis molestie nulla. Phasellus posuere at orci id blandit. Nunc varius risus non tortor tincidunt varius. Duis eros tellus, pulvinar sit amet iaculis eget, accumsan sit amet sapien. Phasellus metus diam, feugiat sed ipsum ut, luctus malesuada mi. +

+

+ Donec mattis metus lacus, vitae vehicula lacus fringilla ut. Etiam et iaculis leo. Phasellus pellentesque turpis id nibh adipiscing congue. Integer id volutpat justo. Donec egestas leo non adipiscing interdum. Sed vestibulum viverra ipsum, nec sollicitudin tellus venenatis id. Phasellus sit amet tincidunt lorem, ut dignissim est. Ut a turpis metus. Sed accumsan lacinia felis eu feugiat. Morbi vel lacinia sem, convallis congue quam. Donec tincidunt adipiscing ornare. Donec cursus sapien sit amet placerat aliquam. Aenean posuere gravida nulla et tincidunt. Aliquam eget enim sit amet sem egestas suscipit ac vel ipsum. +

+

+ Vestibulum ut tellus ut dui consequat porttitor et non dolor. Quisque dignissim condimentum justo in egestas. Mauris dui risus, laoreet at diam in, molestie imperdiet nisl. Suspendisse potenti. Aliquam in rutrum magna, a tincidunt nulla. Sed faucibus blandit erat consequat congue. Phasellus varius libero ipsum, sit amet fringilla tellus tempor nec. Nam blandit dignissim mauris sed ultrices. Morbi sollicitudin ipsum id eros scelerisque, vel fringilla magna hendrerit. Sed pellentesque ligula sem, vel bibendum mauris ultrices ac. Sed ac orci malesuada, sagittis enim at, vehicula est. Donec nec adipiscing tellus. Sed adipiscing sapien non quam molestie, sit amet lacinia est ullamcorper. Suspendisse aliquet consequat purus vel fringilla. Suspendisse fermentum tincidunt dolor ac congue. Suspendisse potenti. +

+

+ Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eu elit id nulla porttitor pellentesque iaculis vitae turpis. Integer blandit ante vitae lectus ultrices, porta sodales quam condimentum. Aenean viverra aliquet risus, ut eleifend risus blandit vel. Sed sollicitudin felis ut adipiscing molestie. Cras risus urna, porta sed mi interdum, semper laoreet magna. In fermentum mauris dolor. Duis sodales imperdiet lorem, quis pretium nibh vehicula fermentum. +

+

+ Phasellus quis sapien blandit nunc congue egestas. Sed sagittis arcu mollis nunc fermentum dapibus. Integer eu sem eu magna tincidunt feugiat ac nec elit. Pellentesque eget libero accumsan, convallis eros sed, euismod lectus. Nulla facilisi. Aenean sit amet lorem vitae enim vulputate ultrices at id nunc. Integer dapibus vehicula fermentum. Etiam at bibendum sapien, eget pretium felis. Ut gravida arcu nunc. Aliquam erat magna, dictum elementum accumsan non, dapibus ut massa. Mauris aliquam sit amet dui a dapibus. Sed sit amet augue iaculis, tincidunt arcu vitae, feugiat mi. Curabitur interdum lacinia elementum. Nulla in metus tortor. Suspendisse elementum sem non odio tincidunt, vel malesuada ligula dapibus. Praesent vel risus non orci viverra varius quis sit amet diam. +

+
+
+ + + + + + + + + + + + diff --git a/tests/css/rtl/modal/all.html b/tests/css/rtl/modal/all.html new file mode 100644 index 00000000..3537d353 --- /dev/null +++ b/tests/css/rtl/modal/all.html @@ -0,0 +1,140 @@ + + + + + + + + Lightbox Tests + + + + + + + + + + + +
+ +

Lightbox

+
+

Relatively loaded target

+ Launch relative overlay + +

External target with iframe header and footer

+ Launch external overlay + +

External target with iframe header and footer and scrollbars

+ Launch external overlay + +

Youtube

+ Launch Youtube overlay + +

Vimeo

+ Launch Vimeo overlay + +

Google Maps

+ Launch Google Map overlay + +

Internal target

+ Launch internal overlay + + +

Internal target

+ Launch modal overlay + + + +

Form

+ Launch internal overlay containing a form + +

Wrapped Image

+
+ + + +
+ +

Mobile Redirect

+

Should redirect on viewports of 768px and below. (settable)

+
+ + + +
+ +

Grouped

+
+
+ Grouped Item 1 +
+
+ Grouped Item 2 +
+
+ Grouped Item 3 +
+
+ Grouped Item 4 +
+
+
+ + + + + + + + + + diff --git a/tests/css/rtl/modal/modal.html b/tests/css/rtl/modal/modal.html new file mode 100644 index 00000000..327faebd --- /dev/null +++ b/tests/css/rtl/modal/modal.html @@ -0,0 +1,185 @@ + + + + + + + + modal Tests + + + + + + + + + + + +
+ +

Modal

+
+

Relatively loaded target

+ Launch relative overlay + +

External target with iframe header and footer

+ Launch external overlay + +

External target with iframe header and footer and scrollbars

+ Launch external overlay + +

Youtube

+ Launch Youtube overlay + +

Vimeo

+ Launch Vimeo overlay + +

Google Maps

+ Launch Google Map overlay + +

Internal target

+ Launch internal overlay + + +

Linked Internal Targets Showing Steps

+ Launch internal overlay + + + +

Internal target

+ Launch modal overlay + + +

Form

+ Launch internal overlay containing a form + +

Wrapped Image

+
+ + + +
+ +

Mobile Redirect

+

Should redirect on viewports of 768px and below. (settable)

+
+ + + +
+ +

Should redirect on when the current applied grid is "s" and below. (settable)

+
+ + + +
+ +

Grouped

+
+
+ Grouped Item 1 +
+
+ Grouped Item 2 +
+
+ Grouped Item 3 +
+
+ Grouped Item 4 +
+
+
+ + + + + + + + + + + + diff --git a/tests/css/rtl/tables/basic.html b/tests/css/rtl/tables/basic.html new file mode 100644 index 00000000..5f20c7f3 --- /dev/null +++ b/tests/css/rtl/tables/basic.html @@ -0,0 +1,210 @@ + + + + + + + + Table Tests + + + + + + + + + + + +
+ +

Tables

+
+
+
+

Standard Table

+ + + + + + + + + + + + + + + + + + + + + + + + + +
HeaderHeaderHeader
DataDataData
DataDataData
DataDataData
+
+
+

Bordered Table

+

Add the class .table-bordered to the table.

+ + + + + + + + + + + + + + + + + + + + + + + + + +
HeaderHeaderHeader
DataDataData
DataDataData
DataDataData
+
+
+
+
+

Striped Table

+

Add the class .table-striped to the table. If IE8 support is required, add class .table-row-alt to the appropriate table row.

+ + + + + + + + + + + + + + + + + + + + + + + + + +
HeaderHeaderHeader
DataDataData
DataDataData
DataDataData
+
+
+
+
+

Table with overflow wrapper

+

Wrap the table in a container with the class .table-scrollable.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Header1Header2Header3Header4Header5Header6Header7Header8
Footer1Footer2Footer3Footer4Footer5Footer6Footer7Footer8
Data1Data2Data3Data4Data5Data6Data7Data8
Data1Data2Data3Data4Data5Data6Data7Data8
Data1Data2Data3Data4Data5Data6Data7Data8
Data1Data2Data3Data4Data5Data6Data7Data8
+
+
+
+
+ + + + + + + + + + diff --git a/tests/css/rtl/tables/tablelist.html b/tests/css/rtl/tables/tablelist.html new file mode 100644 index 00000000..5dded180 --- /dev/null +++ b/tests/css/rtl/tables/tablelist.html @@ -0,0 +1,270 @@ + + + + + + + + Table Tests + + + + + + + + + + + + +
+ +

TableList

+
+

Resize to convert the table into a list.

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TitleDirectorSynopsisRelease Year
Star Wars: Episode IV - A New HopeGeorge LucasLuke Skywalker joins forces with a Jedi Knight...1977
Star Wars: Episode V - The Empire Strikes BackIrvin KershnerAfter the rebels have been brutally overpowered by...1980
Star Wars: Episode VI - Return of the JediRichard MarquandAfter rescuing Han Solo from the palace of Jabba...1983
+
+
+
+
+

TableList

+

JavaScript enabled, add attribute data-table-list

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Header1Header2Header3Header4
Footer1Footer2Footer3Footer4
Data1Data2 with a larger amount of copy to demonstrate what happens when we drop down the display width to less than 48em.Data3Data4
Data1Data2Data3Data4
Data1Data2Data3Data4
Data1Data2Data3Data4
+
+
+

TableList Striped

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Header1Header2Header3Header4
Footer1Footer2Footer3Footer4
Data1Data2 with a larger amount of copy to demonstrate what happens when we drop down the display width to less than 48em.Data3Data4
Data1Data2Data3Data4
Data1Data2Data3Data4
Data1Data2Data3Data4
+
+
+
+
+

TableList Bordered

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Header1Header2Header3Header4
Footer1Footer2Footer3Footer4
Data1Data2 with a larger amount of copy to demonstrate what happens when we drop down the display width to less than 48em.Data3Data4
Data1Data2Data3Data4
Data1Data2Data3Data4
Data1Data2Data3Data4
+
+
+

TableList Striped Bordered

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Header1Header2Header3Header4
Footer1Footer2Footer3Footer4
Data1Data2 with a larger amount of copy to demonstrate what happens when we drop down the display width to less than 48em.Data3Data4
Data1Data2Data3Data4
Data1Data2Data3Data4
Data1Data2Data3Data4
+
+
+
+ + + + + + + + + + diff --git a/tests/css/rtl/tabs/all.html b/tests/css/rtl/tabs/all.html new file mode 100644 index 00000000..c57c791f --- /dev/null +++ b/tests/css/rtl/tabs/all.html @@ -0,0 +1,90 @@ + + + + + + + + Tabs Tests + + + + + + + + + + + +
+ +

Tabs

+
+

Tabs can be triggered by spacebar, enter or by left and right arrows. Appropriate aria attributes (I think) have been added.

+
+
+
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+ +
+
+
+ +
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+ +
+
+ Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. +
+
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. +
+
+

+ Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. +

+
+
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. +
+
+
+
+
+ + + + + + + + + + diff --git a/tests/test-assets/css/tests.css b/tests/css/test-assets/css/tests.css similarity index 93% rename from tests/test-assets/css/tests.css rename to tests/css/test-assets/css/tests.css index 3ba71662..248102c7 100644 --- a/tests/test-assets/css/tests.css +++ b/tests/css/test-assets/css/tests.css @@ -30,6 +30,11 @@ background-color: #434343; } +.pad-gutter > [class*="col-"] span { + background-color: #de3838; + display: block; +} + /* ========================================================================== Dropdown ========================================================================== */ diff --git a/tests/test-assets/img/768x400.jpg b/tests/css/test-assets/img/768x400.jpg similarity index 100% rename from tests/test-assets/img/768x400.jpg rename to tests/css/test-assets/img/768x400.jpg diff --git a/tests/test-assets/img/768x600.jpg b/tests/css/test-assets/img/768x600.jpg similarity index 100% rename from tests/test-assets/img/768x600.jpg rename to tests/css/test-assets/img/768x600.jpg diff --git a/tests/test-assets/img/768x900.jpg b/tests/css/test-assets/img/768x900.jpg similarity index 100% rename from tests/test-assets/img/768x900.jpg rename to tests/css/test-assets/img/768x900.jpg diff --git a/tests/test-assets/img/768x900_thumb.jpg b/tests/css/test-assets/img/768x900_thumb.jpg similarity index 100% rename from tests/test-assets/img/768x900_thumb.jpg rename to tests/css/test-assets/img/768x900_thumb.jpg diff --git a/tests/css/test-assets/img/SVG_logo.svg b/tests/css/test-assets/img/SVG_logo.svg new file mode 100644 index 00000000..e4b7e589 --- /dev/null +++ b/tests/css/test-assets/img/SVG_logo.svg @@ -0,0 +1,259 @@ + + + SVG Logo + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + SVG + + + + + + + + diff --git a/tests/test-assets/img/chrysanthemum.jpg b/tests/css/test-assets/img/chrysanthemum.jpg similarity index 100% rename from tests/test-assets/img/chrysanthemum.jpg rename to tests/css/test-assets/img/chrysanthemum.jpg diff --git a/tests/test-assets/img/desert.jpg b/tests/css/test-assets/img/desert.jpg similarity index 100% rename from tests/test-assets/img/desert.jpg rename to tests/css/test-assets/img/desert.jpg diff --git a/tests/test-assets/img/hydrangeas.jpg b/tests/css/test-assets/img/hydrangeas.jpg similarity index 100% rename from tests/test-assets/img/hydrangeas.jpg rename to tests/css/test-assets/img/hydrangeas.jpg diff --git a/tests/test-assets/js/jquery.googleanalytics.min.js b/tests/css/test-assets/js/jquery.googleanalytics.min.js similarity index 100% rename from tests/test-assets/js/jquery.googleanalytics.min.js rename to tests/css/test-assets/js/jquery.googleanalytics.min.js diff --git a/tests/test-assets/js/responsive.js b/tests/css/test-assets/js/responsive.js similarity index 100% rename from tests/test-assets/js/responsive.js rename to tests/css/test-assets/js/responsive.js diff --git a/tests/test-assets/js/vendor/html5shiv.min.js b/tests/css/test-assets/js/vendor/html5shiv.min.js similarity index 100% rename from tests/test-assets/js/vendor/html5shiv.min.js rename to tests/css/test-assets/js/vendor/html5shiv.min.js diff --git a/tests/test-assets/js/vendor/jquery-1.10.2.min.js b/tests/css/test-assets/js/vendor/jquery-1.10.2.min.js similarity index 100% rename from tests/test-assets/js/vendor/jquery-1.10.2.min.js rename to tests/css/test-assets/js/vendor/jquery-1.10.2.min.js diff --git a/tests/test-assets/js/vendor/jquery-2.0.3.min.js b/tests/css/test-assets/js/vendor/jquery-2.0.3.min.js similarity index 100% rename from tests/test-assets/js/vendor/jquery-2.0.3.min.js rename to tests/css/test-assets/js/vendor/jquery-2.0.3.min.js diff --git a/tests/test-assets/js/vendor/respond.min.js b/tests/css/test-assets/js/vendor/respond.min.js similarity index 100% rename from tests/test-assets/js/vendor/respond.min.js rename to tests/css/test-assets/js/vendor/respond.min.js diff --git a/tests/test-assets/video/big_buck_bunny.mp4 b/tests/css/test-assets/video/big_buck_bunny.mp4 similarity index 100% rename from tests/test-assets/video/big_buck_bunny.mp4 rename to tests/css/test-assets/video/big_buck_bunny.mp4 diff --git a/tests/test-assets/video/big_buck_bunny.ogv b/tests/css/test-assets/video/big_buck_bunny.ogv similarity index 100% rename from tests/test-assets/video/big_buck_bunny.ogv rename to tests/css/test-assets/video/big_buck_bunny.ogv diff --git a/tests/test-assets/video/big_buck_bunny.webm b/tests/css/test-assets/video/big_buck_bunny.webm similarity index 100% rename from tests/test-assets/video/big_buck_bunny.webm rename to tests/css/test-assets/video/big_buck_bunny.webm diff --git a/tests/test-assets/video/poster.jpg b/tests/css/test-assets/video/poster.jpg similarity index 100% rename from tests/test-assets/video/poster.jpg rename to tests/css/test-assets/video/poster.jpg diff --git a/tests/test-template.html b/tests/css/test-template.html similarity index 89% rename from tests/test-template.html rename to tests/css/test-template.html index 5f2133b5..1ab04bfb 100644 --- a/tests/test-template.html +++ b/tests/css/test-template.html @@ -28,10 +28,10 @@

Title

- + diff --git a/tests/dropdown/basic.html b/tests/dropdown/basic.html deleted file mode 100644 index 71580bc4..00000000 --- a/tests/dropdown/basic.html +++ /dev/null @@ -1,94 +0,0 @@ - - - - - - - - Dropdown Tests - - - - - - - - - -
-

Dropdown

-
-
-

Vertical

-
-

Below

- -
-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud - exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute - irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia - deserunt mollit anim id est laborum. -

-
-
-
-

Above

-
-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud - exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute - irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia - deserunt mollit anim id est laborum. -

-
- -
-
-
-

Horizontal

-
-

Note: To prevent word wrap fix the height and width of the item within your target container.

-
-
- -
-
-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud - exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute - irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia - deserunt mollit anim id est laborum. -

-
-
-
-
-
- - - - - - - - - - - - - - - - diff --git a/tests/grid/reflow.html b/tests/grid/reflow.html deleted file mode 100644 index 4961637c..00000000 --- a/tests/grid/reflow.html +++ /dev/null @@ -1,105 +0,0 @@ - - - - - - - - Grid Tests - - - - - - - - - - - -
-

Grid

-
-

Reflown Columns

-

- A 3 column layout with the main content in the middle yet first in the markup is pretty much the holy grail of layouts. No easy task! -
- To make this possible at present the gutterless layout has to be used as the margins in gutters make alignment difficult though it may be possible to - switch them out for padding. -

-

The Rules:

-

- Add class .no-gutter to the row. -

-

- Add class .col-{size}-{number} to the column. -

-

- Add class .push-{size}-{number} to offset the columns from the left. -

-

- Add class .pull-{size}-{number} to offset the columns from the right. -

-

- Add class .push-{size}-right to the columns to float right. -

-
-
-

Main

-

- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod - tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, - quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. - Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, - vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan -

-
-
-

Primary

-

- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod - tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, - quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. - Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, - vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan - - Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod - tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, - quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. - Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, - vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan -

-
-
-

Secondary

-

- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod - tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, - quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. - Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, - vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan -

-
-
-
- - - - - - - - - - - - - - - - diff --git a/tests/grid/spaced.html b/tests/grid/spaced.html deleted file mode 100644 index 93eb07bb..00000000 --- a/tests/grid/spaced.html +++ /dev/null @@ -1,55 +0,0 @@ - - - - - - - - Grid Tests - - - - - - - - - - - -
-

Grid

-
-

Spaced Columns

-

- Add class .no-gutter to the row. -

-

- Add class .push-{size}-{number} to the column. -

-
-
3
-
3
-
-
- - - - - - - - - - - - - - - - diff --git a/tests/media/image.html b/tests/media/image.html deleted file mode 100644 index e29c3aed..00000000 --- a/tests/media/image.html +++ /dev/null @@ -1,81 +0,0 @@ - - - - - - - - Media Tests - - - - - - - - - - - -
-

Media

-
-
-

Images

-
-
- responsive image -
-
- responsive image -
-
- responsive image -
-
-
-
-

Constrained Images

-

Wrap the image in a container with the class .media.

-
-
-
- responsive image -
-
-
-
- responsive image -
-
-
-
- responsive image -
-
-
- - -
-
- - - - - - - - - - - - - - - - diff --git a/tests/tables/responsive.html b/tests/tables/responsive.html deleted file mode 100644 index 1efb8fda..00000000 --- a/tests/tables/responsive.html +++ /dev/null @@ -1,284 +0,0 @@ - - - - - - - - Table Tests - - - - - - - - - - - - -
-

Tables

-
-
-
-

TableList

-

JavaScript enabled, add attribute data-table-list

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Header1Header2Header3Header4
Footer1Footer2Footer3Footer4
Data1Data2 with a larger amount of copy to demonstrate what happens when we drop down the display width to less than 48em.Data3Data4
Data1Data2Data3Data4
Data1Data2Data3Data4
Data1Data2Data3Data4
-
-
-

TableList Striped

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Header1Header2Header3Header4
Footer1Footer2Footer3Footer4
Data1Data2 with a larger amount of copy to demonstrate what happens when we drop down the display width to less than 48em.Data3Data4
Data1Data2Data3Data4
Data1Data2Data3Data4
Data1Data2Data3Data4
-
-
-
-
-

TableList Bordered

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Header1Header2Header3Header4
Footer1Footer2Footer3Footer4
Data1Data2 with a larger amount of copy to demonstrate what happens when we drop down the display width to less than 48em.Data3Data4
Data1Data2Data3Data4
Data1Data2Data3Data4
Data1Data2Data3Data4
-
-
-

TableList Bordered

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Header1Header2Header3Header4
Footer1Footer2Footer3Footer4
Data1Data2 with a larger amount of copy to demonstrate what happens when we drop down the display width to less than 48em.Data3Data4
Data1Data2Data3Data4
Data1Data2Data3Data4
Data1Data2Data3Data4
-
-
-
-
-

Table with overflow wrapper

-

Wrap the table in a container with the class .table-scrollable.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Header1Header2Header3Header4
Header1Header2Header3Header4
Data1Data2Data3Data4
Data1Data2Data3Data4
Data1Data2Data3Data4
Data1Data2Data3Data4
-
-
-
-
- - - - - - - - - -