Showing preview only (384K chars total). Download the full file or copy to clipboard to get everything.
Repository: cbracco/cardinal
Branch: master
Commit: 647fb8a4fe63
Files: 60
Total size: 365.4 KB
Directory structure:
gitextract_ng7ldxh_/
├── .csscomb.json
├── .editorconfig
├── .gitattributes
├── .gitignore
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── base/
│ ├── README.md
│ ├── anchors.less
│ ├── blockquotes.less
│ ├── code.less
│ ├── debug.less
│ ├── embedded-content.less
│ ├── form-elements.less
│ ├── headings.less
│ ├── horizontal-rules.less
│ ├── lists.less
│ ├── mixins/
│ │ ├── antialiasing.less
│ │ ├── clearing.less
│ │ ├── font-face.less
│ │ ├── media-queries.less
│ │ ├── momentum-scrolling.less
│ │ ├── text-truncate.less
│ │ ├── to-rem.less
│ │ └── vertically-centered.less
│ ├── normalize.less
│ ├── print.less
│ ├── reset.less
│ ├── root.less
│ ├── tables.less
│ ├── text-elements.less
│ └── variables.less
├── bower.json
├── cardinal.css
├── cardinal.less
├── components/
│ ├── README.md
│ ├── boxes.less
│ ├── buttons.less
│ ├── forms.less
│ ├── lists.less
│ └── tables.less
├── gulpfile.js
├── index.html
├── layout/
│ ├── README.md
│ ├── grids.less
│ └── wrappers.less
├── package.json
└── utilities/
├── README.md
├── display.less
├── floats.less
├── font-sizes.less
├── margins.less
├── paddings.less
├── positions.less
├── text-alignment.less
├── vertical-alignment.less
├── visually-hidden.less
├── widths.less
└── z-index.less
================================================
FILE CONTENTS
================================================
================================================
FILE: .csscomb.json
================================================
// http://csscomb.com/config
{
// Whether to add a semicolon after the last value/mixin.
"always-semicolon": true,
// Set indent for code inside blocks, including media queries and nested rules.
"block-indent": " ",
// Unify case of hexadecimal colors.
"color-case": "lower",
// Whether to expand hexadecimal colors or use shorthands.
"color-shorthand": true,
// Unify case of element selectors.
"element-case": "lower",
// Add/remove line break at EOF.
"eof-newline": true,
// Add/remove leading zero in dimensions.
"leading-zero": true,
// Unify quotes style.
"quotes": "double",
// Remove all rulesets that contain nothing but spaces.
"remove-empty-rulesets": true,
// Sort unknown properties alphabetically
"sort-order-fallback": "abc",
// Sort properties in particular order.
"sort-order": [
[
"font",
"font-family",
"font-size",
"font-weight",
"font-style",
"font-variant",
"font-size-adjust",
"font-stretch",
"font-effect",
"font-emphasize",
"font-emphasize-position",
"font-emphasize-style",
"font-smooth",
"line-height",
"position",
"z-index",
"top",
"right",
"bottom",
"left",
"display",
"visibility",
"float",
"clear",
"overflow",
"overflow-x",
"overflow-y",
"-ms-overflow-x",
"-ms-overflow-y",
"-webkit-overflow-scrolling",
"clip",
"zoom",
"flex-direction",
"flex-order",
"flex-pack",
"flex-align",
"-webkit-box-sizing",
"-moz-box-sizing",
"box-sizing",
"width",
"min-width",
"max-width",
"height",
"min-height",
"max-height",
"margin",
"margin-top",
"margin-right",
"margin-bottom",
"margin-left",
"padding",
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
"table-layout",
"empty-cells",
"caption-side",
"border-spacing",
"border-collapse",
"list-style",
"list-style-position",
"list-style-type",
"list-style-image",
"content",
"quotes",
"counter-reset",
"counter-increment",
"resize",
"cursor",
"-webkit-user-select",
"-moz-user-select",
"-ms-user-select",
"user-select",
"nav-index",
"nav-up",
"nav-right",
"nav-down",
"nav-left",
"-webkit-transition",
"-moz-transition",
"-ms-transition",
"-o-transition",
"transition",
"-webkit-transition-delay",
"-moz-transition-delay",
"-ms-transition-delay",
"-o-transition-delay",
"transition-delay",
"-webkit-transition-timing-function",
"-moz-transition-timing-function",
"-ms-transition-timing-function",
"-o-transition-timing-function",
"transition-timing-function",
"-webkit-transition-duration",
"-moz-transition-duration",
"-ms-transition-duration",
"-o-transition-duration",
"transition-duration",
"-webkit-transition-property",
"-moz-transition-property",
"-ms-transition-property",
"-o-transition-property",
"transition-property",
"-webkit-transform",
"-moz-transform",
"-ms-transform",
"-o-transform",
"transform",
"-webkit-transform-origin",
"-moz-transform-origin",
"-ms-transform-origin",
"-o-transform-origin",
"transform-origin",
"-webkit-animation",
"-moz-animation",
"-ms-animation",
"-o-animation",
"animation",
"-webkit-animation-name",
"-moz-animation-name",
"-ms-animation-name",
"-o-animation-name",
"animation-name",
"-webkit-animation-duration",
"-moz-animation-duration",
"-ms-animation-duration",
"-o-animation-duration",
"animation-duration",
"-webkit-animation-play-state",
"-moz-animation-play-state",
"-ms-animation-play-state",
"-o-animation-play-state",
"animation-play-state",
"-webkit-animation-timing-function",
"-moz-animation-timing-function",
"-ms-animation-timing-function",
"-o-animation-timing-function",
"animation-timing-function",
"-webkit-animation-delay",
"-moz-animation-delay",
"-ms-animation-delay",
"-o-animation-delay",
"animation-delay",
"-webkit-animation-iteration-count",
"-moz-animation-iteration-count",
"-ms-animation-iteration-count",
"-o-animation-iteration-count",
"animation-iteration-count",
"-webkit-animation-direction",
"-moz-animation-direction",
"-ms-animation-direction",
"-o-animation-direction",
"animation-direction",
"text-align",
"-webkit-text-align-last",
"-moz-text-align-last",
"-ms-text-align-last",
"text-align-last",
"vertical-align",
"white-space",
"text-decoration",
"text-emphasis",
"text-emphasis-color",
"text-emphasis-style",
"text-emphasis-position",
"text-indent",
"-ms-text-justify",
"text-justify",
"letter-spacing",
"word-spacing",
"-ms-writing-mode",
"text-outline",
"text-transform",
"text-wrap",
"text-overflow",
"-ms-text-overflow",
"text-overflow-ellipsis",
"text-overflow-mode",
"-ms-word-wrap",
"word-wrap",
"word-break",
"-ms-word-break",
"-moz-tab-size",
"-o-tab-size",
"tab-size",
"-webkit-hyphens",
"-moz-hyphens",
"hyphens",
"pointer-events",
"opacity",
"filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
"-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
"-ms-interpolation-mode",
"color",
"fill",
"border",
"border-width",
"border-style",
"border-color",
"border-top",
"border-top-width",
"border-top-style",
"border-top-color",
"border-right",
"border-right-width",
"border-right-style",
"border-right-color",
"border-bottom",
"border-bottom-width",
"border-bottom-style",
"border-bottom-color",
"border-left",
"border-left-width",
"border-left-style",
"border-left-color",
"-webkit-border-radius",
"-moz-border-radius",
"border-radius",
"-webkit-border-top-left-radius",
"-moz-border-radius-topleft",
"border-top-left-radius",
"-webkit-border-top-right-radius",
"-moz-border-radius-topright",
"border-top-right-radius",
"-webkit-border-bottom-right-radius",
"-moz-border-radius-bottomright",
"border-bottom-right-radius",
"-webkit-border-bottom-left-radius",
"-moz-border-radius-bottomleft",
"border-bottom-left-radius",
"-webkit-border-image",
"-moz-border-image",
"-o-border-image",
"border-image",
"-webkit-border-image-source",
"-moz-border-image-source",
"-o-border-image-source",
"border-image-source",
"-webkit-border-image-slice",
"-moz-border-image-slice",
"-o-border-image-slice",
"border-image-slice",
"-webkit-border-image-width",
"-moz-border-image-width",
"-o-border-image-width",
"border-image-width",
"-webkit-border-image-outset",
"-moz-border-image-outset",
"-o-border-image-outset",
"border-image-outset",
"-webkit-border-image-repeat",
"-moz-border-image-repeat",
"-o-border-image-repeat",
"border-image-repeat",
"stroke",
"outline",
"outline-width",
"outline-style",
"outline-color",
"outline-offset",
"background",
"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
"background-color",
"background-image",
"background-repeat",
"background-attachment",
"background-position",
"background-position-x",
"-ms-background-position-x",
"background-position-y",
"-ms-background-position-y",
"-webkit-background-clip",
"-moz-background-clip",
"background-clip",
"background-origin",
"-webkit-background-size",
"-moz-background-size",
"-o-background-size",
"background-size",
"box-decoration-break",
"-webkit-box-shadow",
"-moz-box-shadow",
"box-shadow",
"filter:progid:DXImageTransform.Microsoft.gradient",
"-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
"text-shadow",
"text-rendering",
"-webkit-font-smoothing",
"-moz-osx-font-smoothing",
"-webkit-backface-visibility",
"-moz-backface-visibility",
"backface-visibility"
]
],
// Set space after `:` in declarations.
"space-after-colon": " ",
// Set space after combinator (for example, in selectors like `p > a`).
"space-after-combinator": " ",
// Set space after `{`.
"space-after-opening-brace": "\n",
// Set space after selector delimiter.
"space-after-selector-delimiter": "\n",
// Set space before `}`.
"space-before-closing-brace": "\n",
// Set space before `:` in declarations.
"space-before-colon": "",
// Set space before combinator (for example, in selectors like `p > a`).
"space-before-combinator": " ",
// Set space before `{`.
"space-before-opening-brace": " ",
// Set space before selector delimiter.
"space-before-selector-delimiter": "",
// Set space between declarations (i.e. `color: tomato`).
"space-between-declarations": "\n",
// Whether to trim trailing spaces.
"strip-spaces": false,
// Replace hard tabs with spaces
"tab-size": true,
// Whether to remove units in zero-valued dimensions.
"unitless-zero": true,
// Whether to align prefixes in properties and values.
"vendor-prefix-align": true
}
================================================
FILE: .editorconfig
================================================
# EditorConfig helps developers define and maintain consistent coding
# styles between different editors and IDEs
# editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
================================================
FILE: .gitattributes
================================================
* text=auto
================================================
FILE: .gitignore
================================================
.DS_Store
.DS_Store?
._*
.Spotlight-V100
.Trashes
ehthumbs.db
Thumbs.db
bower_components/
node_modules/
npm-debug.log
*.map
================================================
FILE: CHANGELOG.md
================================================
# 3.7.0 (March 24, 2016)
- Add `.breakpoint-prefixes()` mixin (thanks @lukechilds!).
# 3.6.1 (February 10, 2016)
- Fix `@font-face` mixin.
# 3.5.1 (January 18, 2016)
- Remove `outline: 0 none;` from form components.
# 3.5.0 (January 18, 2016)
- Hardcode the value of `@to-rem-font-size` to 16 so that `@font-size` can be overridden.
# 3.4.1 (January 11, 2016)
- Fix incorrect variable used in the grid system.
- Fix `height: auto !important;` from preventing `<textarea>` resizing in latest Chrome, Safari, and Firefox.
# 3.3.1 (January 7, 2016)
- Add back `max-width` mixins removed in 3.3.0 because they caused major breaking changes.
- Add deprecation messages to `max-width` mixins (thanks @lukechilds).
- Deprecate v3.3.0.
# 3.3.0 (December 21, 2015)
- Remove mixins that are not aligned with the “mobile-first” methodology (thanks @mrmrs for calling me out).
# 3.2.9 (December 19, 2015)
- fix incorrect URL (typo) in `README.md`.
# 3.2.8 (December 19, 2015)
- Had to bump version number because I pushed 3.2.7 to npm too soon, and had to unpublish it since version numbers in the CSS files were incorrect.
# 3.2.7 (December 19, 2015)
- Adding credit where credit is due. I cannot believe I forgot to do this (thank you @mrmrs for calling me out).
- Updated code comments.
- Removed some commented-out code.
- Add npm/Bower badges to `README.md`.
# 3.2.6 (September 29, 2015)
- Update `gulp-less` to latest version.
- Update `gulpfile.js`.
# 3.2.5 (August 5, 2015)
- Update some variables to use the `@spacing-*` equivalent value set previously, instead of hard-coded integers.
# 3.2.4 (May 28, 2015)
- Remove `text-rendering` property from headings ([more info](http://cbrac.co/1Fjv7IR)).
- Update `.gitignore` (exclude sourcemaps from repo).
# 3.2.3 (May 15, 2015)
- Update `README.md` to include customization docs.
# 3.2.2 (May 12, 2015)
- Add [Codepen demos](http://codepen.io/collection/nmrWQR/) to documentation.
- Fix typos in `index.html`.
# 3.2.1 (May 12, 2015)
- Add more documentation in the form of `README.md` files.
- Clean up `:focus` styles, move declarations to `root.less`.
# 3.2.0 (May 11, 2015)
- Remove `::selection` styles because they cause iOS 8 to crash in certain scenarios.
- Simplify directory structure for LESS partials
- Add `.list-reset` component modifier.
# 3.1.0 (March 8, 2015)
- Remove `@root-font-family`, `@root-font-size`, and `@root-line-height` variables because they were causing problems. Using `@font-family-*`, `@font-size`, and `@line-height` variables instead as root.
- Use `@font-size-0` variable in `layout/grids.less` instead of `font-size: 0;`
# 3.0.7 (March 8, 2015)
- Fix `.btn-round` bug for `input[type="button"]` and `input[type="submit"]` elements.
# 3.0.6 (February 25, 2015)
- Remove default margin for `.grid-item` elements on `li` elements (thanks, @bassjobsen!).
# 3.0.5 (February 18, 2015)
- Add `!important` to utility classes.
# 3.0.4 (February 16, 2015)
- Fix `@print` typo in `layout/wrappers.less`.
# 3.0.3 (February 9, 2015)
- Add `:disabled` to disabled button styles.
# 3.0.2 (February 9, 2015)
- Update `README.md`.
- Comment out `core/debug.less` by default.
# 3.0.1 (February 5, 2015)
- Update `bower.json` and `README.md`.
# 3.0.0 (February 5, 2015)
- Overhauled Cardinal (huzzah!) to function as a CSS framework only.
- Removed all "boilerplate" files and folders.
- Replaced Grunt with Gulp.
- Moved `test.html` to `index.html`.
- Updated dotfiles, `bower.json`, and `package.json`.
- Moved CSS and LESS files up a level, beginning in the root directory.
- Added a `.csscomb.json` file.
- Changed maximum line length from 72 to 80 characters.
- Added a bunch of useful utility classes.
- Added a simple `debug.less` file to use while developing.
- Updated `README.md`.
# 2.4.5 (November 7, 2014)
- Removed `@viewport` CSS rules because they break Google Chrome’s "device mode" tool. They will be added back when they are needed, or when the bug has been fixed (whichever comes first).
# 2.4.4 (August 14, 2014)
- Added whole gutter styles that were missing in previous versions (via @nastasiu).
# 2.4.3 (August 13, 2014)
- Fixed parent grid gutter styles being applied to nested child grids that may need different gutter styles (via @nastasiu).
# 2.4.2 (July 31, 2014)
- Added missing width classes in `layout.less` (via @nastasiu).
# 2.4.1 (July 31, 2014)
- Added `node_modules/` to the `.gitignore` file (via @brandonb927).
- Added missing grunt dependency to `package.json` file (via @brandonb927).
# 2.4.0 (May 15, 2014)
- Update jQuery to 2.1.1.
- Update Modernizr to 2.8.1.
# 2.3.2 (April 9, 2014)
- Add stylesheet to `test.html`.
- Remove `<nav>` element from `test.html`.
# 2.3.1 (April 8, 2014)
- Updated `test.html` because it was missing many tests. Not sure how they disappeared, but they are back now.
# 2.3.0 (April 7, 2014)
- Added my [html5-test-page](https://github.com/cbracco/html5-test-page) so you can see how some common HTML elements react to Cardinal (thanks [@petsagouris](https://github.com/petsagouris) for getting this going).
- Added a `CONTRIBUTING.md` file with stricter guidelines on how to contribute in hopes that people will actually read it before submitting pull requests.
- Updated `README.md` to mention the new `CONTRIBUTING.md` file.
- Moved uncompressed assets into their own directory.
- Updated `.gitignore` file to ignore new `/dist` directory.
- Cleaned up `gruntfile.js`. It was missing some semicolons, and the default and watch tasks were separated (thanks [@petsagouris](https://github.com/petsagouris)).
- Added `@button-border-radius` LESS variable (thanks [brandonb927](https://github.com/brandonb927)).
- Added `font-weight: 700;` to buttons by default (thanks [brandonb927](https://github.com/brandonb927)).
# 2.2.6 (March 27, 2014)
- Updated normalize.css to 3.0.1.
# 2.2.5 (February 18, 2014)
- Changed headings to inherit the font stack from the body since it is identical (thanks @louisremi!).
# 2.2.4 (February 7, 2014)
- Updated normalize.css to 3.0.0.
# 2.1.4 (February 7, 2014)
- Added a `bower.json` file so Cardinal can be added to the bower registry (thanks [@progsource](https://github.com/progsource)!).
# 2.1.3 (February 2, 2014)
- Changed IE conditional classes to use hyphens instead of underscores.
# 2.1.2 (January 30, 2014)
- Fixed LESS button size referencing the wrong variable, because I’m a bonehead (thanks [@progsource](https://github.com/progsource)!).
# 2.1.1 (January 22, 2014)
- Fix duplicate LICENSE line in README
# 2.1.0 (January 22, 2014)
- Added LESS support (thanks [@brandonb927](https://github.com/brandonb927))! `master` now ships with a `/less` directory and a simple [Grunt](http://gruntjs.com/) build process.
- Added an empty `img/` folder since I usually end up creating one anyways.
- Updated the Table Of Contents heading to include example project information instead.
- Removed `@media` query for extra padding on `<kbd>` elements.
- Nested `caption` styles inside the `table` element.
- Changed some `px` values to `rem` here and there.
# 2.0.2 (January 21, 2014)
- Removed `word-break: break-all` from common typographical elements because it was causing weird wrapping issues in Firefox ([more info here](https://miketaylr.com/posts/2014/01/word-break-break-word.html))
# 2.0.1 (January 17, 2014)
- Changed hr.asterisks to `hr.symbol` for better semantics.
- Added a bottom margin to `hr.symbol`.
# 2.0.0 (January 16, 2014)
- Updated the [documentation website](http://cardinalcss.com)!
- Updated jQuery to 1.10.2.
- Updated Modernizr to 2.7.1.
- Removed minified version of Cardinal.
- Added Chrome Frame support to IE rendering `<meta>` tag.
- Removed `@media` queries on `html` element to resize the entire project.
- Re-ordered and re-grouped styles in `main.css`.
- Added 5 carriage returns in between sections in `main.css` so its easier to see section breaks when scrolling.
- Fixed some overflow issues with form elements.
- Removed the “Helpers” section as well as some unused classes.
- Added practical font-sizing classes for headings (`.h1`, `.h2`, etc).
- Switched indentation from tabs to spaces.
- Updated `<blockquote>` styles and structure.
- Renamed `.lap-*` to `.medium-*`, and `.desk-*` to `.large-*`.
- Removed rounded and hollow variations of `.island` and `.well` classes.
- Changed default styles for form elements, and added a `.fieldset-border` class.
- Added a `.flex-video` class.
- Changed naming conventions to all hyphens (fuck BEM).
- Added boilerplate `humans.txt` and `robots.txt` files to the root directory.
- Added some default HTML elements with appropriate ARIA roles to `index.html`.
- Removed a bunch of `.button` classes and variations.
- Decreased `.wrapper`’s maximum width to `1024px`.
- Added an alternative `.asterisks` style for `<hr>` elements.
- Added `.drop-cap`, `.run-in`, and `.small-caps` classes for some more variety in typographical hierarchy.
# 1.4.0 (November 8, 2013)
- Removed some helper classes for alignment, margins, and paddings. Classes were cluttering HTML markup, and it started to feel like inline styling.
- Moved `.width_auto` classes into the Grid section, where they belong.
- Reverted Google Analytics tracking code back to the version found in [HTML5BP](https://github.com/h5bp/html5-boilerplate/blob/master).
# 1.3.0 (October 21, 2013)
- Updates to make form styles more consistent with `.button` styles.
# 1.2.4 (October 15, 2013)
- Updated word wrapping and hyphenation declaration to include `caption` element and use [a more bulletproof solution](http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/) that works in IE8+, Firefox 6+, iOS 4.2+, Safari 5.1+, and Chrome 13+.
# 1.2.3 (October 11, 2013)
- Added some default styles for the caption element.
# 1.2.2 (October 7, 2013)
- Fixed class conflict with `.font_normal` being used twice (derp). Changed the font sizing helper class to `.font_regular` instead.
# 1.2.1 (October 1, 2013)
- Added more helper classes for font weights.
- Changed `.font_thin` to `.font_light` for consistency.
# 1.2.0 (September 27, 2013)
- Added `.width_auto` class in case you want to change a width class to `width: auto;` at some breakpoint.
- Changed class-naming conventions to avoid possible conflicts. All class names for block/element modifiers are now prefixed with the name of that block/element (eg. `.button_chunky` instead of `.button.chunky`).
- Changed `.table_border_all` to `.table_border_cells` because that makes more sense.
- Removed the `inherit` property from font sizing helper classes because it was causing inheritance issues.
# 1.1.2 (September 20, 2013)
- Added `Arial` to the font stack for headings.
# 1.1.1 (September 17, 2013)
- Added a DNS prefetch to the `<head>` of `index.html` for the version of jQuery being retrieved from Google’s CDN.
# 1.1.0 (August 30, 2013)
- Removed `.h1`, `.h2`, etc. classes. Use `.font_[size]` instead.
- Replaced `.subheading` and `.subheading.muted` with `.font_thin` and `.font_muted`, added `.lap-*` and `.desk-*` versions, and moved the classes to the "Helpers" section. They can be used on any element now, not just headings.
# 1.0 (August 23, 2013)
- Scaled back `.button` classes, removing glossy style and hover states.
- Added `.h1`, `.h2`, `.h3`, `.h4`, `.h5`, `.h6` classes.
- Picked apart [normalize.css](https://github.com/necolas/normalize.css) and placed declarations in their appropriate sections, instead of lazily including the whole thing up top.
- Fixed issues with color consistency, and added their hex values to the top comment block.
- Removed `.table` class, instead applying Cardinal’s default table styles directly on the `<table>` element.
- Changed `.float_*` classes to `.align_*`, and added the `.align_center` class.
- Changed `.text_[size]` classes to `.font_[size]` to better distinguish between the text alignment and font sizing helper classes.
- Re-ordered the `@print` style declarations alphabetically.
- Fixed font-sizing issues with `code`, `figcaption`, `small`, `sup`, and `sub` elements so that they work better in nested situations.
# 0.3.7 (July 23, 2013)
- moved `.text_*` classes to the helpers section so they can be used on `.grid-item` classes
- resized `<h6>` from `1rem` to `0.75rem`
- added `!important` to some helper classes that needed them.
# 0.3.6 (July 18, 2013)
- Added `lap-*` and `desk-*` queries for helper classes.
- Fixed a small comment issue.
# 0.3.5 (July 12, 2013)
- Removed `margin-bottom: 1rem;` from the `.strip` and `.grid-item` classes.
# 0.3.4 (June 25, 2013)
- Updated comment line length to have a maximum of 72 characters.
# 0.3.3 (June 13, 2013)
- Removed IE7 fix for input button outlines.
# 0.3.2 (June 10, 2013)
- Added `.grid_gutter_none` classes so that you can create grids with no gutters, if desired.
# 0.3.1 (June 10, 2013)
- Added Arial to the font stack on the `body` element, and beefed up the font stack for `blockquote` elements.
- Removed some more support for IE ≤ 8.
# 0.3.0 (June 7, 2013)
- **NEW!** Added classes for table styles.
# 0.2.1 (June 1, 2013)
- Word-wrapped/hyphenated more elements per @danielzilli’s [suggestion](https://github.com/cbracco/Cardinal/issues/1).
# 0.2.0 (June 1, 2013)
- **NEW!** Added classes for button styles.
- Added a bottom margin to `.well` and `.island` classes.
- Updated Google Analytics snippet.
# 0.1.4 (June 1, 2013)
- Added .editorconfig file.
# 0.1.3 (May 31, 2013)
- Added conditional classes on the `html` element for IE9.
# 0.1.2 (May 31, 2013)
- Added blank lines to the end of each file, because old habits die hard.
# 0.1.1 (May 30, 2013)
- Removed default border-radius from pre, .island, and .well.
# 0.1.0 (May 30, 2013)
- First stable release! Time for a beer...
- Added LICENSE.md and CHANGELOG.md to the project.
- Updated README.md content.
- Reverted back to jQuery 1.10.0.
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing to this project
*This information is heavily based on [this CONTRIBUTING.md document](https://github.com/necolas/normalize.css/edit/master/CONTRIBUTING.md).*
Before making a contribution, please take a moment to review this document. It will make the process easier and more enjoyable for everyone involved.
Following the guidelines in this document shows that you respect the time of the maintainers of this open-source project. In return, maintainers should show their respect for you by addressing your requests, issues, and contributions in a timely fashion.
## Submitting issues
GitHub’s built-in issue tracker is the preferred channel for bug reports, feature requests, and submitting pull requests.
**Do not** use the issue tracker for personal support questions. They will probably not be addressed.
**Do not** derail or troll issues. Please try to keep things on topic and be respectful to others.
## Bug reports
*Demo or it didn’t happen.*
A bug is a problem that you can demonstrate to a maintainer on this open-source project. Good bug reports are very helpful, and encouraged!
If you are thinking about reporting a bug, please do the following:
1. **Search for existing issues** - it could have already been reported.
2. **Check for fixes** - try to reproduce the bug using the latest release on the `master` branch in the repository.
3. **If the bug persists**, submit an issue and create a live example of the bug using a public service like [jsFiddle](http://jsfiddle.net) or [Codepen](http://codepen.io). Link to your example in the issue that you submit.
Please be as detailed as possible. Ask yourself: What is your environment? What steps will reproduce the issue? What browser(s) and OS experience the problem? What would you expect to be the outcome?
## Feature requests
Feel free to request whatever you like, but please take a moment to think about whether your request is within the scope of the project. You should make a strong case for your request, otherwise the maintaining developers will probably not consider it. Provide as much detail as you can.
## Pull requests
Good pull requests are awesome. Bad pull requests are a headache. They should always be limited by the scope of the request, and avoid including unrelated commits.
**Please file an issue first** before deciding to do a lot of work. Otherwise, you run the risk of wasting time working on something that might not get merged into the project.
Follow this process if you’d like your work to be considered for inclusion in the project:
1. [Fork](http://help.github.com/fork-a-repo/) the project, clone your fork,
and configure the remotes:
```bash
# Clone your fork of the repo into the current directory
git clone https://github.com/<your-username>/cardinal
# Navigate to the newly cloned directory
cd cardinal
# Assign the original repo to a remote called "upstream"
git remote add upstream https://github.com/cbracco/cardinal
```
2. If you cloned a while ago, get the latest changes from upstream:
```bash
git checkout master
git pull upstream master
```
3. **Never work directly on `master`**. Create a new topic branch (off the latest version of `master`) to contain your feature, change, or fix:
```bash
git checkout -b <topic-branch-name>
```
4. Commit your changes in logical chunks. Please adhere to these [git commit
message conventions](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
or your code is unlikely be merged into the main project. Use Git’s
[interactive rebase](https://help.github.com/articles/interactive-rebase)
feature to tidy up your commits before making them public.
Please add a test to the `test.html` file if appropriate, and test
your change(s) in all supported browsers.
5. Locally rebase the upstream development branch into your topic branch:
```bash
git pull --rebase upstream master
```
6. Push your topic branch up to your fork:
```bash
git push origin <topic-branch-name>
```
10. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/) with a clear title and description.
**IMPORTANT**: By submitting a patch, you agree to allow the project owner to
license your work under the same license as that used by the project.
## Maintainers
If you have commit access, please follow this process for merging patches and
cutting new releases.
### Accepting patches
1. Check that a patch is within the scope and philosophy of the project.
2. Check that a patch has any necessary tests and a proper, descriptive commit
message.
3. Test the patch locally.
4. Do not use GitHub’s merge button. Apply the patch to `master` locally
(either via `git am` or by checking the whole branch out). Amend minor
problems with the author’s original commit if necessary. Then push to GitHub.
### Releasing a new version
1. Run `gulp` to compile CSS assets, and use a dedicated commit for these changed files.
1. Add all new functional changes into the CHANGELOG.
2. Use a dedicated commit to increment the version. The version needs to be added to the `CHANGELOG.md` (inc. date), and `package.json` files.
3. The commit message must be of `v0.0.0` format.
4. Create an annotated tag for the version: `git tag -m "v0.0.0" 0.0.0`.
5. Push the changes and tags to GitHub: `git push --tags origin master`
================================================
FILE: LICENSE.md
================================================
Copyright (c) Chris Bracco
MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
of the Software, and to permit persons to whom the Software is furnished to do
so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# Cardinal
[](https://badge.fury.io/js/cardinalcss)
[](https://badge.fury.io/bo/cardinal)
Build more with less.
⚠️ THIS REPO IS NO LONGER BEING ACTIVELY MAINTAINED. USE AT YOUR OWN RISK! ⚠️
- [Go to Website](http://cardinalcss.com)
- [Review the CHANGELOG](https://github.com/cbracco/cardinal/blob/master/CHANGELOG.md)
# Table of Contents
- [What is Cardinal?](#what-is-cardinal)
- [Features](#features)
- [Dependencies](#dependencies)
- [Getting Started](#getting-started)
- [Package Managers](#package-managers)
- [Updating Cardinal](#updating-cardinal)
- [LESS Plugin](#less-plugin)
- [Direct Download](#direct-download)
- [Customizing](#customizing)
- [Including Partials](#including-partials)
- [Modifying Variables](#modifying-variables)
- [Further Documentation](#further-documentation)
- [Browser Support](#browser-support)
- [Contributing](#contributing)
- [Versioning](#versioning)
- [Credits](#credits)
- [License](#license)
# What is Cardinal?
Cardinal is a modular, “mobile-first” CSS framework built with performance and scalability in mind.
The purpose of this framework is to make it easier for front-end web developers to prototype, build, scale, and maintain CSS for responsive websites, user interfaces, and applications. Cardinal omits many aesthetic design decisions that often bog down other CSS frameworks (which are often [UI toolkits, not frameworks](https://speakerdeck.com/csswizardry/what-is-a-css-framework-anyway)), leaving the design and creativity up to you.
# Features
- “Mobile-first” CSS written for the [LESS preprocessor](http://lesscss.org/)
- [normalize.css](https://github.com/necolas/normalize.css)
- Sensible global styles, variables, and useful mixins
- A flexible grid system and encapsulated styles for common UI objects (buttons, forms, tables, etc.)
- A collection of utility classes optimized for great gzip compression
- The entire framework, minified and gzipped, clocks in at a mere **11.27kB**
# Dependencies
If you would like to install Cardinal with the [Bower](http://bower.io/) package manager tool, you will first need to install [Node.js](http://nodejs.org/) on your machine or server. Once you have Node.js installed, make sure npm is installed ([info here](http://blog.npmjs.org/post/85484771375/how-to-install-npm)), and use it to install Bower, like so:
```
npm install -g bower
```
Also, Cardinal depends on the awesome tool [Autoprefixer](https://github.com/postcss/autoprefixer), which adds the proper vendor prefixes that provide the [specified browser support](#browser-support) for this project. This way, you don’t have to worry about manually including the correct prefixes while writing LESS/CSS. You are encouraged to incorporate Autoprefixer into your build process (this is easy to do with tools like [Grunt](http://gruntjs.com/) or [Gulp](http://gulpjs.com/)).
# Getting Started
There are several ways that you can use Cardinal in your new and existing web projects.
## Package Managers
The fastest way to get up-and-running with Cardinal is by using a package manager, like so:
**Bower**
To install Cardinal with [Bower](http://bower.io/), run the following command(s) from your terminal:
```
cd your-project-directory
bower install --save cardinal
```
Once installed, you can find Cardinal here:
```
your-project-directory
│
└───bower_components
│
└───cardinal
```
**npm**
To install Cardinal with [npm](https://www.npmjs.com), run the following command(s) from your terminal:
```
cd your-project-directory
npm install --save cardinalcss
```
Once installed, you can find Cardinal here:
```
your-project-directory
│
└───node_modules
│
└───cardinalcss
```
### Updating Cardinal
You can grab the latest version of Cardinal by running the following command(s):
**Bower**
```
bower update cardinal
```
**npm**
```
npm update cardinal
```
## LESS Plugin
There is also a [LESS.js plugin available](https://github.com/bassjobsen/less-plugin-cardinal) for Cardinal, created and maintained by [@bassjobsen](https://github.com/bassjobsen). You can use this plugin to include Cardinal in your project before your custom project code.
**Installation**
```
npm install less
npm install less-plugin-cardinal
```
**Usage**
```
lessc custom.less --cardinal
```
## Direct Download
If you do not want to use a package manager to integrate Cardinal into your project, you can also download it directly:
**Build from Source**
To do so, you need to already have Node.js and npm installed on your machine. Cardinal uses Gulp to build and watch the CSS files.
```
git clone git@github.com:cbracco/cardinal.git
cd cardinal
npm install
gulp
```
**Download the Zip**
You can also download the `.zip` file and proceed however you wish. Include the minified CSS file in the `<head>` of your project, or modify the LESS files directly (not recommended, since it will be difficult to update to future versions). It’s your world!
- [Download the zip](https://github.com/cbracco/cardinal/archive/master.zip)
# Customizing
## Including Partials
The easiest way to include Cardinal in your project is to include the entire thing before your project files, like so:
```
//
// Vendor
//
@import url("../../path/to/bower_components/cardinal/cardinal.less");
//
// Project
//
@import url("project-file.less");
```
However, you don’t have to use the entire Cardinal framework. The only required partials are located in the `base/` directory:
```
//
// Vendor
//
//
// Base
//
// These variables, mixins, and styles are required if you want to use this
// framework, and they should be included in the following order.
//
// Base -> Variables
@import url("base/variables.less");
// Base -> Mixins
@import url("base/mixins/to-rem.less");
@import url("base/mixins/media-queries.less");
@import url("base/mixins/antialiasing.less");
@import url("base/mixins/clearing.less");
@import url("base/mixins/font-face.less");
@import url("base/mixins/momentum-scrolling.less");
@import url("base/mixins/text-truncate.less");
@import url("base/mixins/vertically-centered.less");
// Base -> Normalize
@import url("base/normalize.less");
// Base -> Reset
@import url("base/reset.less");
// Base -> Debug (DO NOT USE THIS STYLESHEET IN PRODUCTION!)
//@import url("base/debug.less");
// Base -> Default Styles
@import url("base/root.less");
@import url("base/anchors.less");
@import url("base/text-elements.less");
@import url("base/headings.less");
@import url("base/lists.less");
@import url("base/horizontal-rules.less");
@import url("base/blockquotes.less");
@import url("base/code.less");
@import url("base/embedded-content.less");
@import url("base/form-elements.less");
@import url("base/tables.less");
@import url("base/print.less");
```
Beyond that, you can use whatever grid system, components, and utilities you would like. The `base/` directory just sets some good base styles for the framework.
## Modifying Variables
After getting started and including Cardinal, you will probably want to begin customizing it to suit your project. Cardinal has a bunch of LESS variables located in the `base/variables.less` file that can be tweaked to your needs. **These variables should not be edited directly.** The recommended way to make changes to Cardinal LESS variables is to create your own project-specific variables file (e.g. `project-variables.less`), and override the default variables in this file, like so:
```
// project-variables.less
// Typography -> Font Sizes -> Base
$font-size: 17;
//
// Typography -> Line height
//
$line-height: 26;
```
This file should be included in your main LESS file after you’ve included Cardinal.
# Further Documentation
There is a `README.md` file included in each major directory of this project that further details the code located in those directories.
- [Base](https://github.com/cbracco/cardinal/tree/master/base)
- [Components](https://github.com/cbracco/cardinal/tree/master/components)
- [Layout](https://github.com/cbracco/cardinal/tree/master/layout)
- [Utilities](https://github.com/cbracco/cardinal/tree/master/utilities)
# Browser support
Cardinal supports most modern browsers:
* Google Chrome 25+
* Mozilla Firefox 19+
* Safari 6.0+
* iOS Safari 6.0+
* Opera 12.1+
* Android 4.2+
* Internet Explorer 9+
# Contributing
Is something broken? Do you have ideas or feature requests? Please [submit an issue](https://github.com/cbracco/cardinal/issues/new) here on GitHub. Or, if you are feeling especially motivated, write some code and submit a pull request!
**IMPORTANT**: Before doing a bunch of work, please consult the [CONTRIBUTING.md document](https://github.com/cbracco/cardinal/blob/master/CONTRIBUTING.md), which gives detailed instructions on how to contribute to this project. If you do not follow the instructions, your code will probably not make it into this project.
# Versioning
Cardinal will be maintained using the [Semantic Versioning](http://semver.org/) guidelines. From here on out, releases will be numbered using the following format:
`major.minor.patch`
* Breaking backwards compatibility increments `major`, while resetting `minor` and `patch`.
* New code that does not break backwards compatibility increments `minor`, while resetting `patch`.
* Bug fixes and other small changes increment `patch`.
# Credits
Cardinal is a project by [@cbracco](http://twitter.com/cbracco). Its principles and techniques are very influenced by the following projects, organizations, and individuals:
- [OOCSS](http://oocss.org/) ([@stubbornella](https://github.com/stubbornella/))
- [inuit.css](https://github.com/inuitcss/) ([@csswizardry](https://github.com/csswizardry/))
- [SUIT CSS](https://suitcss.github.io/) ([@necolas](https://github.com/necolas/))
- [TACHYONS](http://tachyons.io/) ([@mrmrs](https://github.com/mrmrs/))
- [Basscss](http://www.basscss.com/) ([@jxnblk](https://github.com/jxnblk/))
- [Scally](https://github.com/chris-pearce/scally/) ([@chris-pearce](https://github.com/chris-pearce/))
- [Atomic CSS](http://acss.io/) ([@yahoo](https://github.com/yahoo/))
- [HTML5 Boilerplate](https://github.com/h5bp/html5-boilerplate/) ([@h5bp](https://github.com/h5bp/))
- [Kraken](https://github.com/cferdinandi/kraken/) ([@cferdinandi](https://github.com/cferdinandi/))
...and any others I may have forgotten — let me know if I have, and I will certainly add them.
Many thanks for your hard work and great ideas!
# License
Cardinal is licensed under the MIT Open Source license. For more information, see the [LICENSE.md](https://github.com/cbracco/cardinal/blob/master/LICENSE.md) file in this repository.
================================================
FILE: base/README.md
================================================
# Cardinal Base
The `base/` directory houses all of the essential styles that build the foundation for this framework.
Without `base/`, this framework **will not work correctly.** It is the only required part of Cardinal.
# Table of Contents
- [Overview](#overview)
- [Variables](#variables)
- [Mixins](#mixins)
- [.to-rem()](#to-rem)
- [Media Queries](#media-queries)
- [normalize.css](#normalize-css)
- [Reset](#reset)
- [Debug](#debug)
- [Default Styles](#default-styles)
- [Root](#root)
- [Anchors](#anchors)
- [Text Elements](#text-elements)
- [Headings](#headings)
- [Lists](#lists)
- [Horizontal Rules](#horizontal-rules)
- [Code](#code)
- [Embedded Content](#embedded-content)
- [Form Elements](#form-elements)
- [Tables](#tables)
- [Print](#print)
# Overview
Cardinal Base provides a solid foundation for the framework, including things like:
- Useful LESS [variables](https://github.com/cbracco/cardinal/blob/master/base/variables.less) and [mixins](https://github.com/cbracco/cardinal/tree/master/base/mixins)
- [normalize.css](https://github.com/necolas/normalize.css)
- a [thin reset layer](https://github.com/cbracco/cardinal/blob/master/base/reset.less) on top of normalization
- Sensible default styles for common HTML elements
# Variables
Cardinal stores all of its LESS variables in a single file aptly named `variables.less`. These variables provide some good default settings for any project, but you can easily customize them to suit your needs.
The recommended way to include Cardinal in your project is by using the [Bower package manager](http://bower.io/). In doing so, you will never have to modify Cardinal directly (which makes updating the project as simple as `bower update --save cardinal`).
Instead, you should create your own `variables.less` file in your project’s LESS directory which includes the variables you would like to modify, and include it in your main LESS stylesheet **after** you include Cardinal, like so:
```css
// your-project.less
//
// Vendor
//
@import url("../../path/to/bower_components/cardinal/cardinal.less");
//
// Project
//
@import url("variables.less");
```
# Mixins
A handful of useful LESS mixins are included with Cardinal, several of which are **required** for this framework to function properly. The required mixins are outlined below:
## .to-rem()
The `.to-rem()` mixin is a simple yet powerful function that converts all unitless pixel values to REM units, with a pixel fallback version. The [base value](./mixins/to-rem.less#L5) used to calculate REM values from unitless values is 16. This mixin is used to convert unitless pixel values stored in `variables.less` to REM units.
**It’s strongly encouraged to use this mixin in your own CSS that you write on top of Cardinal.**
### Usage
```css
@unitless-pixel-value: 45;
.selector {
.to-rem(left, @unitless-pixel-value);
.to-rem(padding, 10 5 12);
.to-rem(border, 1, solid green);
.to-rem(box-shadow, 1 1 0 -1, rgba(0, 0, 0, 0.3));
.to-rem(margin, 30 auto 0);
}
```
### Output
```css
.selector {
/*px*/ left: 45px;
/*rem*/ left: 2.8125rem;
/*px*/ padding: 10px 5px 12px 5px;
/*rem*/ padding: 0.625rem 0.3125rem 0.75rem 0.3125rem;
/*px*/ border: 1px solid green;
/*rem*/ border: 0.0625rem solid green;
/*px*/ box-shadow: 1px 1px 0 -1px rgba(0, 0, 0, 0.3);
/*rem*/ box-shadow: 0.0625rem 0.0625rem 0 -0.0625rem rgba(0, 0, 0, 0.3);
/*px*/ margin: 30px auto 0;
/*rem*/ margin: 1.875rem auto 0;
}
```
## Media Queries
The `media-queries.less` file includes a handful of useful mixins that speed up the writing and usage of `@media` queries in your project.
### .screen-\*()
These mixins correspond to the screen sizes declared in `variables.less`. Overriding those variables in your project will also change the values for these mixins.
There are mixins for both `min-width and up` query scenarios and specific intervals (e.g. "Small only").
**NOTE**: `max-width and down` mixins are still available for backwards compatibility, but they have been deprecated and will be removed in the next major version.
#### Usage
```css
/* Small only */
.screen-sm({
.selector {
color: blue;
}
});
/* Medium and up */
.screen-md-min({
.selector {
color: red;
}
});
```
#### Output
```css
/* Small only */
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
.selector {
color: blue;
}
}
/* Medium and up */
@media (min-width: @screen-md-min) {
.selector {
color: red;
}
}
```
### .screens()
If you want to change the styles for a selector at all of the declared screen sizes, you can use the `.screens()` mixin to chain these `@media` queries together, like so:
#### Usage
```css
.my-element {
.screens({
color: red; // xs and up
},{
color: green; // sm and up
},{
color: yellow; // md and up
},{
color: purple; // lg and up
},{
color: blue; // xl and up
},{
color: orange; // xxl and up
});
}
```
#### Output
```css
@media (min-width: @screen-xs-min) {
.my-element {
color: red;
}
}
@media (min-width: @screen-sm-min) {
.my-element {
color: green;
}
}
@media (min-width: @screen-md-min) {
.my-element {
color: yellow;
}
}
@media (min-width: @screen-lg-min) {
.my-element {
color: purple;
}
}
@media (min-width: @screen-xl-min) {
.my-element {
color: blue;
}
}
@media (min-width: @screen-xxl-min) {
.my-element {
color: orange;
}
}
```
### .breakpoint-prefixes()
To generate classes prefixed with breakpoint names for your styles, use the `.breakpoint-prefixes()` mixin. It will generate classes prefixed with `xs-`, `sm-`, `md-`, `lg-`, `xl-` and `xxl-`, and any styles applied to those classes will only be applied at the corresponding @media queries. It will also generate a class with no prefix that can be used at any screen width.
#### Usage
```css
.breakpoint-prefixes({
.@{breakpoint-prefix}my-class {
background: red;
}
});
```
#### Output
```css
.my-class {
background: red;
}
@media (min-width: @screen-xs-min) {
.xs-my-class {
background: red;
}
}
@media (min-width: @screen-sm-min) {
.sm-my-class {
background: red;
}
}
@media (min-width: @screen-md-min) {
.md-my-class {
background: red;
}
}
@media (min-width: @screen-lg-min) {
.lg-my-class {
background: red;
}
}
@media (min-width: @screen-xl-min) {
.xl-my-class {
background: red;
}
}
@media (min-width: @screen-xxl-min) {
.xxl-my-class {
background: red;
}
}
```
# normalize.css
Cardinal includes the 3rd-party library [normalize.css](https://github.com/necolas/normalize.css), which makes browsers render all elements more consistently and in line with modern web standards.
# Reset
On top of [normalize.css](https://github.com/necolas/normalize.css), Cardinal includes a light reset layer to add even more consistency to the framework.
- All elements inherit `box-sizing: border-box;` property from the `<html>` element ([more info](http://cbrac.co/RQrDL5)).
- Remove margins, paddings, and borders from HTML elements ([more info](http://cbrac.co/1Ev9etR)).
- Remove default border for `<iframe>` elements ([more info](http://cbrac.co/1CVyNTj)).
- Remove `:focus` outline on links that cannoy be accessed via keyboard ([more info](http://cbrac.co/1Evazku)).
# Debug
**This stylesheet is for development use only.** Do not include it in your production code/build. It can help you visually detect any nesting issues, invalid markup, or inaccessible code in your project. It is commented out by default, so you will have to explicitly include it in your project’s main LESS file, like so:
```
// your-project.less
//
// Vendor
//
@import url("../../path/to/bower_components/cardinal/cardinal.less");
@import url("../../path/to/bower_components/cardinal/less/base/debug.less");
//
// Project
//
...
```
([more info](http://cbrac.co/1C01g8C))
# Default Styles
After [normalize.css](https://github.com/necolas/normalize.css) and a light reset, Cardinal sets some more default styles for common HTML elements.
## Root
Root defines core styles for the `<html>` element, such as default font family, font size, line height, background and text colors, forcing vertical scrollbars in IE, and more.
It also ensures the `<body>` element is at least the viewport height, sets a consistent margin for common elements to maintain a vertical rhythm, adds word-wrapping and basic hyphenation to common elements, and sets default `:focus` styles for the framework.
## Anchors
[View Demo](http://codepen.io/cbracco/pen/BNKNBo)
Default anchor link styles for this framework reside here.
## Text Elements
[View Demo](http://codepen.io/cbracco/pen/jPqPqm)
This file adds some opinionated default styles for inline text elements, such as adding the appropriate `cursor` styles to `<abbr>` elements, and adding `text-decoration: line-through` styles to `<del>` elements.
## Headings
[View Demo](http://codepen.io/cbracco/pen/PqNqzP)
Headings help break up blocks of text and visual content into consumable chunks, and Cardinal includes some default headings styles to facilitate better readability from the get-go.
## Lists
[View Demo](http://codepen.io/cbracco/pen/vOGOXB)
List elements like `<dl>`, `<ul>`, and `<ol>` also get their own default styles to provide a more consistent experience across browsers.
## Horizontal Rules
[View Demo](http://codepen.io/cbracco/pen/yNONaP)
`<hr>` elements also help break up text and visual content into consumable chunks, and Cardinal normalizes the styling of this element so it displays consistently across browsers.
```
hr {
display: block;
padding: 0;
border: 0;
.to-rem(border-top, @hr-border-width, @hr-border-style @hr-border-color);
}
```
## Blockquotes
[View Demo](http://codepen.io/cbracco/pen/doMopE)
Depending on the type of project, you may never have a use for the `<blockquote>` element, but Cardinal provides some light styling to this element just in case.
The styles are set up for the preferred use case for the `<blockquote>` element, demonstrated below ([more info](http://cbrac.co/18LWCOw)):
```
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit nihil neque distinctio aliquid esse similique et placeat, consequatur hic quas earum sequi nulla voluptas facilis provident eos ab aperiam nisi!</p>
<p>Aperiam tempora veritatis in, officia eos recusandae debitis culpa saepe quam, sapiente, asperiores quidem est nulla consequatur sint earum pariatur dolore neque ipsum. Eum earum possimus, voluptates, numquam veniam tempora!</p>
<footer>
<cite>
<a href="#!">Citation Name</a>
</cite>
</footer>
</blockquote>
```
## Code
[View Demo](http://codepen.io/cbracco/pen/gprpLa)
Again, depending on your project, you may never have a use for basic code styles, but they are included just in case.
Cardinal provides some simple styling to common HTML elements that are used to display programming language code, such as `<kbd>`, `<code>`, and `<pre>`.
## Embedded Content
[View Demo](http://codepen.io/cbracco/pen/pJyJNW)
Cardinal also includes some basic fixes and styles for embedded content (e.g. images, HTML5 audio & video, iframe, canvas, and SVG).
Embedded content elements are responsive out-of-the-box, by simply declaring `width: 100%` on these elements. Images and several other elements can resize automatically, and images will maintain their aspect ratio by way the following:
```
embed,
img,
object,
video {
max-width: 100%;
height: auto;
}
embed,
object {
height: 100%;
}
```
Some basic styles are also given to `<figure>` and `<figcaption>` elements, just in case you need it.
## Form Elements
[View Demo](http://codepen.io/cbracco/pen/xGVGqm)
Forms are notoriously finicky, so this base file aims to remove and normalize the form experience before any major aesthetic design decisions are made.
## Tables
[View Demo](http://codepen.io/cbracco/pen/QbNbvg)
Similarly to forms, tables can be difficult to style correctly. This file corrects some table oddities to make the basic table element behave more consistently across browsers.
## Print
A default `@print` stylesheet is also included in Cardinal, which is an almost-exact copy of the [HTML5 Boilerplate print styles](http://cbrac.co/1PgyYR2).
These styles are inlined to avoid an extra HTTP request.
================================================
FILE: base/anchors.less
================================================
/* ========================================================================== *\
Base -> Anchors ($base-anchors)
\* ========================================================================== */
a {
text-decoration: underline;
color: @anchor-text-color;
&:hover,
&:active,
&:focus {
text-decoration: none;
}
}
================================================
FILE: base/blockquotes.less
================================================
/* ========================================================================== *\
Base -> Blockquotes ($base-blockquotes)
\* ========================================================================== */
blockquote {
color: @blockquote-text-color;
font-family: @blockquote-font-family;
font-style: @blockquote-font-style;
.to-rem(font-size, @blockquote-font-size);
.to-rem(margin-left, @blockquote-margin-left);
.to-rem(padding-left, @blockquote-padding-left);
.to-rem(border-left, @blockquote-border-width, @blockquote-border-style @blockquote-border-color);
p {
margin: 0;
+ p {
.to-rem(margin-top, @spacing-base);
}
}
/**
* Use <cite> inside blockquotes.
*
* @link http://cbrac.co/18LWCOw
*/
cite {
font-family: @blockquote-cite-font-family;
font-style: @blockquote-cite-font-style;
.to-rem(font-size, @blockquote-cite-font-size);
color: @blockquote-cite-text-color;
/**
* Add an m-dash character before the <cite> tag.
*/
&:before {
content: "\2014 \0020";
}
a {
color: @blockquote-cite-anchor-color;
}
}
}
================================================
FILE: base/code.less
================================================
/* ========================================================================== *\
Base -> Code ($base-code)
\* ========================================================================== */
/**
* 1. Correct `font-family` set oddly in Safari 5 and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: @font-family-monospace; /* 1 */
.to-rem(font-size, @code-font-size);
font-style: @code-font-style;
color: @code-text-color;
}
code {
margin: 0;
.to-rem(padding, @code-padding);
white-space: nowrap;
.to-rem(border, @code-border-width, @code-border-style @code-border-color);
.to-rem(border-radius, @code-border-radius);
background-color: @code-background-color;
}
kbd {
position: relative;
top: -1px;
margin-bottom: 1px;
.to-rem(padding, @code-padding);
white-space: nowrap;
.to-rem(border, @code-border-width, @code-border-style @code-border-color);
.to-rem(border-radius, @code-border-radius);
background-color: @code-background-color;
box-shadow: 0 1px 0 @code-border-color, inset 0 0 0 1px @color-white;
}
pre {
position: relative;
overflow: auto;
.to-rem(padding, @code-pre-padding);
white-space: pre;
word-wrap: normal;
word-break: normal;
tab-size: 4;
hyphens: none;
color: @code-pre-text-color;
background: @code-pre-background-color;
/**
* Reset the above <code> styles when nested inside <pre> tags.
*/
code {
display: block;
overflow: auto;
height: 100%;
margin: 0;
padding: 0;
white-space: pre;
color: inherit;
border: none;
border-radius: 0;
background: transparent;
}
}
================================================
FILE: base/debug.less
================================================
/* ========================================================================== *\
Base -> Debug ($base-debug)
\* ========================================================================== */
//
// DO NOT USE THIS STYLESHEET IN PRODUCTION!
//
// This stylesheet is for developers only. It can help you visually detect any
// nesting issues, invalid markup, or inaccessible code in your project.
//
// @link http://cbrac.co/1C01g8C
//
// DO NOT USE THIS STYLESHEET IN PRODUCTION!
//
@debug-outline-width: 5px;
@debug-outline-style: solid;
@debug-outline-color-error: red;
@debug-outline-color-warning: yellow;
//
// Debug
//
// red = error
// yellow = warning
// none = no issues
//
/**
* Images require `alt` attributes, empty `alt` is fine but should be
* double-checked, no `alt` is bad.
*/
img {
outline: @debug-outline-width @debug-outline-style @debug-outline-color-error !important;
}
img[alt] {
outline: none !important;
}
img[alt=""] {
outline: @debug-outline-width @debug-outline-style @debug-outline-color-warning !important;
}
/**
* Double-check any links whose `href` is something questionable.
*/
a[href=""],
a[href="#"],
a[href*="javascript"] {
outline: @debug-outline-width @debug-outline-style @debug-outline-color-warning !important;
}
/**
* Try to avoid using the `target` attribute.
*/
a[target] {
outline: @debug-outline-width @debug-outline-style @debug-outline-color-warning !important;
}
/**
* Ensure any lists only contain <li> as children.
*/
ul,
ol {
> *:not(li) {
outline: @debug-outline-width @debug-outline-style @debug-outline-color-error !important;
}
}
/**
* It's always nice to give <th> the `scope` attribute.
*/
th {
outline: @debug-outline-width @debug-outline-style @debug-outline-color-warning !important;
}
th[scope] {
outline: none !important;
}
/**
* <tr> as child of <table> ain't great, did you need a <thead> or <tbody>?
*/
table > tr {
outline: @debug-outline-width @debug-outline-style @debug-outline-color-warning !important;
}
/**
* `tfoot` needs to come *before* `tbody`.
*/
tbody + tfoot {
outline: @debug-outline-width @debug-outline-style @debug-outline-color-warning !important;
}
/**
* Forms require `action` attributes.
*/
form {
outline: @debug-outline-width @debug-outline-style @debug-outline-color-error !important;
}
form[action] {
outline: none !important;
}
/**
* Various form-field types have required attributes. <input> needs a `type`
* attribute, <textarea> needs `rows` and `cols` attributes, and submit buttons
* need a `value` attribute.
*/
textarea,
input {
outline: @debug-outline-width @debug-outline-style @debug-outline-color-error !important;
}
input[type] {
outline: none !important;
}
textarea[rows][cols] {
outline: none !important;
}
input[type=submit] {
outline: @debug-outline-width @debug-outline-style @debug-outline-color-error !important;
}
input[type=submit][value] {
outline: none !important;
}
/**
* Avoid inline styles wherever possible.
*/
[style] {
outline: @debug-outline-width @debug-outline-style @debug-outline-color-warning !important;
}
================================================
FILE: base/embedded-content.less
================================================
/* ========================================================================== *\
Base -> Embedded Content ($base-embedded-content)
\* ========================================================================== */
/**
* Remove the gap between audio, canvas, iframes, images, videos and the bottom
* of their containers.
*
* @link http://cbrac.co/Q6smqV
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
/**
* Fluid-width <audio>, <canvas>, & <video> elements.
*/
audio,
canvas,
video {
width: 100%;
&:focus {
outline: 1px dotted @color-black;
}
}
/**
* Fluid-width media elements that maintain their aspect ratios.
*/
embed,
img,
object,
video {
max-width: 100%;
height: auto;
}
embed,
object {
height: 100%;
}
/**
* Reset `margin` for figure elements.
*/
figure {
margin-right: auto;
margin-left: auto;
}
/**
* Set <img> elements as block-level inside <figure> elements.
*/
figure > img {
display: block;
}
/**
* Give <figcaption> elements some default styles.
*/
figcaption {
.to-rem(font-size, @font-size-xx-small);
font-style: italic;
.to-rem(margin-top, @figcaption-margin-top);
color: @figcaption-text-color;
}
/**
* 1. If images do not load, the `alt` text will be visually offset and more
* noticeable.
* 2. Improve image resize rendering in IE6/7.
*
* @link http://cbrac.co/11ciIZL
*/
img {
font-style: italic; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */
}
================================================
FILE: base/form-elements.less
================================================
/* ========================================================================== *\
Base -> Form Elements ($base-form-elements)
\* ========================================================================== */
/**
* 1. Avoid the WebKit bug in Android 4.0.* where [2] destroys native
* <audio> and <video> controls.
* 2. Improve usability and consistency of cursor style between
* image-type <input> and others.
*/
button,
html input[type="button"], /* 1 */
input[type="checkbox"],
input[type="file"],
input[type="image"],
input[type="radio"],
input[type="reset"],
input[type="submit"],
label,
select {
cursor: pointer; /* 2 */
}
/**
* Fix vertical alignment inconsistencies with certain form inputs.
*/
input[type="color"],
input[type="range"] {
vertical-align: middle;
}
/**
* 1. Set `min-width` to 0 to avoid overflow issues in Chrome.
* 2. Remove default `margin`, `padding`, and `border` across browsers.
*/
fieldset {
min-width: 0; /* 1 */
margin: 0; /* 2 */
padding: 0; /* 2 */
border: 0; /* 2 */
}
/**
* 1. Set checkbox, image, and radio inputs to `inline-block`, by default.
*/
input[type="checkbox"],
input[type="image"],
input[type="radio"] {
display: inline-block; /* 1 */
width: auto;
}
/**
* 1. Constrict `max-width` for file inputs to avoid overflow issues.
*/
input[type="file"] {
max-width: 100%; /* 1 */
cursor: pointer;
}
/**
* 1. Set search inputs to `border-box` by default. This overrides the
* `content-box` value set by normalize.css.
* 2. Remove rounded corners from iOS search inputs by overriding `appearance:
* textfield` from normalize.css.
*
* @link http://cbrac.co/1xgTke2
*/
input[type="search"] {
box-sizing: border-box; /* 1 */
appearance: none; /* 2 */
}
/**
* Remove rounded corners that iOS and Chrome apply to <input> buttons and
* <select> menus.
*/
input[type="submit"],
input[type="button"],
input[type="image"],
input[type="reset"],
select {
border-radius: 0;
}
/**
* 1. Force Safari to give <legend> elements 100% width.
* 2. Remove `padding` so people aren't caught out if they zero out <fieldset>.
* 3. Correct `color` not being inherited in IE 8/9.
*/
legend {
font-weight: 700;
width: 100%; /* 1 */
padding: 0; /* 2 */
color: @form-legend-text-color; /* 3 */
border: 0;
}
/**
* 1. Restrict width to 100% of its parent to avoid horizontal overflow issues.
* 2. Force `height: auto;` for <textarea> across browsers.
* 3. <textarea> elements should only resize vertically.
*/
textarea {
max-width: 100%; /* 1 */
height: auto; /* 2 */
resize: vertical; /* 3 */
}
================================================
FILE: base/headings.less
================================================
/* ========================================================================== *\
Base -> Headings ($base-headings)
\* ========================================================================== */
/**
* NOTE: Use the `text-rendering` property with caution.
*
* @link http://cbrac.co/SJt8p1
* @link http://cbrac.co/1Fjv7IR
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: @heading-font-family;
font-weight: @heading-font-weight;
color: @heading-text-color;
}
h1,
.h1 {
.to-rem(font-size, @font-size-heading-1);
}
h2,
.h2 {
.to-rem(font-size, @font-size-heading-2);
}
h3,
.h3 {
.to-rem(font-size, @font-size-heading-3);
}
h4,
.h4 {
.to-rem(font-size, @font-size-heading-4);
}
h5,
.h5 {
.to-rem(font-size, @font-size-heading-5);
}
h6,
.h6 {
.to-rem(font-size, @font-size-heading-6);
}
================================================
FILE: base/horizontal-rules.less
================================================
/* ========================================================================== *\
Base -> Horizontal Rules ($base-horizontal-rules)
\* ========================================================================== */
hr {
display: block;
padding: 0;
border: 0;
.to-rem(border-top, @hr-border-width, @hr-border-style @hr-border-color);
}
================================================
FILE: base/lists.less
================================================
/* ========================================================================== *\
Base -> Lists ($base-lists)
\* ========================================================================== */
/**
* Set some basic styles for definition lists.
*/
dl {
dt {
font-weight: @definition-lists-font-weight;
color: @definition-lists-text-color;
}
dd {
margin: 0;
}
}
/**
* Reset the left margin for <ol> and <ul> elements.
*/
ol,
ul {
li {
.to-rem(margin-left, @list-item-margin-left);
}
}
/**
* Set nested `list-style` types for ordered lists.
*/
ol {
list-style: decimal;
& & {
list-style: upper-alpha;
}
& & & {
list-style: lower-roman;
}
& & & & {
list-style: lower-alpha;
}
}
/**
* Remove `margin-bottom` on nested lists.
*/
ol,
ul {
ol,
ul {
margin-bottom: 0;
}
}
================================================
FILE: base/mixins/antialiasing.less
================================================
// =============================================================================
// Base -> Mixins -> Antialiasing
// =============================================================================
.antialiasing() {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
================================================
FILE: base/mixins/clearing.less
================================================
// =============================================================================
// Base -> Mixins -> Clearing
// =============================================================================
//
// Clearfix
//
// 1. The use of `table` rather than `block` is only necessary if using
// `:before` to contain the top-margins of child elements.
// 2. 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 are clearfixed.
//
// @link http://cbrac.co/1FT6aqC
//
.clearfix() {
&:before,
&:after {
display: table; // 1
content: " "; // 2
}
&:after {
clear: both;
}
}
================================================
FILE: base/mixins/font-face.less
================================================
// =============================================================================
// Base -> Mixins -> @font-face
// =============================================================================
//
// Bulletproof @font-face delcarations
//
// @link http://cbrac.co/1KgTgCb
//
.font-face(@ff-name, @ff-file, @ff-weight:normal, @ff-style:normal) {
@font-face {
font-family: "@{ff-name}";
src: url("@{ff-file}.eot");
src: url("@{ff-file}.eot?#iefix") format("embedded-opentype"),
url("@{ff-file}.woff2") format("woff2"),
url("@{ff-file}.woff") format("woff"),
url("@{ff-file}.ttf") format("truetype"),
url("@{ff-file}.svg#@{ff-name}") format("svg");
font-weight: @ff-weight;
font-style: @ff-style;
}
//
// Chrome for Windows rendering fix
//
// @link http://cbrac.co/U4mSbc
//
@media screen and (-webkit-min-device-pixel-ratio: 0) {
@font-face {
font-family: "@{ff-name}";
src: url("@{ff-file}.svg#@{ff-name}") format("svg");
}
}
}
================================================
FILE: base/mixins/media-queries.less
================================================
// =============================================================================
// Base -> Mixins -> Media Queries
// =============================================================================
//
// Media query mixins for various screen sizes.
//
// @link http://cbrac.co/1tB2TXR
//
// Extra-small and up
.screen-xs-min(@rules) {
@media (min-width: @screen-xs-min) {
@rules();
}
}
// Extra-small and down (deprecated)
.screen-xs-max(@rules) {
@media (max-width: @screen-xs-max) {
@rules();
}
}
// Extra-small only
.screen-xs(@rules) {
@media (min-width: @screen-xs-min) and (max-width: @screen-xs-max) {
@rules();
}
}
// Small and up
.screen-sm-min(@rules) {
@media (min-width: @screen-sm-min) {
@rules();
}
}
// Small and down (deprecated)
.screen-sm-max(@rules) {
@media (max-width: @screen-sm-max) {
@rules();
}
}
// Small only
.screen-sm(@rules) {
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
@rules();
}
}
// Medium and up
.screen-md-min(@rules) {
@media (min-width: @screen-md-min) {
@rules();
}
}
// Medium and down (deprecated)
.screen-md-max(@rules) {
@media (max-width: @screen-md-max) {
@rules();
}
}
// Medium only
.screen-md(@rules) {
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
@rules();
}
}
// Large and up
.screen-lg-min(@rules) {
@media (min-width: @screen-lg-min) {
@rules();
}
}
// Large and down (deprecated)
.screen-lg-max(@rules) {
@media (max-width: @screen-lg-max) {
@rules();
}
}
// Large only
.screen-lg(@rules) {
@media (min-width: @screen-lg-min) and (max-width: @screen-lg-max) {
@rules();
}
}
// Extra-large and up
.screen-xl-min(@rules) {
@media (min-width: @screen-xl-min) {
@rules();
}
}
// Extra-large and down (deprecated)
.screen-xl-max(@rules) {
@media (max-width: @screen-xl-max) {
@rules();
}
}
// Extra-large only
.screen-xl(@rules) {
@media (min-width: @screen-xl-min) and (max-width: @screen-xl-max) {
@rules();
}
}
// Extra-extra-large and up
.screen-xxl-min(@rules) {
@media (min-width: @screen-xxl-min) {
@rules();
}
}
//
// Chain media queries together
//
// Usage:
//
// .my-element {
// .screen({
// color: red; // xs and up
// },{
// color: green; // sm and up
// },{
// color: yellow; // md and up
// },{
// color: purple; // lg and up
// },{
// color: blue; // xl and up
// },{
// color: orange; // xxl and up
// });
// }
//
// @link http://cbrac.co/1tB2TXR
//
.screens(@rules-xs, @rules-sm, @rules-md, @rules-lg, @rules-xl, @rules-xxl) {
.screen-xs-min(@rules-xs);
.screen-sm-min(@rules-sm);
.screen-md-min(@rules-md);
.screen-lg-min(@rules-lg);
.screen-xl-min(@rules-xl);
.screen-xxl-min(@rules-xxl);
}
//
// Generate breakpoint classes
//
// Usage:
//
// .breakpoint-prefixes({
// .@{breakpoint-prefix}my-class{ background: red; }
// });
//
.breakpoint-prefixes(@rules) {
@breakpoint-prefixes: xs, sm, md, lg, xl, xxl;
.write-classes(@class, @rules) {
& {
@breakpoint-prefix: @class;
@rules();
}
}
.breakpoint-prefixes-iterate(@i: length(@breakpoint-prefixes), @rules) when (@i > 0) {
.breakpoint-prefixes-iterate(@i - 1, @rules);
@prefix: extract(@breakpoint-prefixes, @i);
@prefix-class: ~"@{prefix}-";
& when (@prefix = xs) {
.screen-xs-min({ .write-classes(@prefix-class, @rules); })
}
& when (@prefix = sm) {
.screen-sm-min({ .write-classes(@prefix-class, @rules); })
}
& when (@prefix = md) {
.screen-md-min({ .write-classes(@prefix-class, @rules); })
}
& when (@prefix = lg) {
.screen-lg-min({ .write-classes(@prefix-class, @rules); })
}
& when (@prefix = xl) {
.screen-xl-min({ .write-classes(@prefix-class, @rules); })
}
& when (@prefix = xxl) {
.screen-xxl-min({ .write-classes(@prefix-class, @rules); })
}
}
.write-classes(~'', @rules);
.breakpoint-prefixes-iterate(length(@breakpoint-prefixes), @rules);
}
================================================
FILE: base/mixins/momentum-scrolling.less
================================================
// =============================================================================
// Base -> Mixins -> Momentum Scrolling
// =============================================================================
.momentum-scrolling() {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
================================================
FILE: base/mixins/text-truncate.less
================================================
// =============================================================================
// Base -> Mixins -> Text Truncate
// =============================================================================
.text-truncate() {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
================================================
FILE: base/mixins/to-rem.less
================================================
// =============================================================================
// Base -> Mixins -> to-REM
// =============================================================================
@to-rem-font-size: 16;
//
// Convert unitless pixel values to rem.
//
// Usage
//
// .selector {
// .to-rem(left, 1);
// .to-rem(padding, 10 5 12);
// .to-rem(border, 1, solid green);
// .to-rem(box-shadow, 1 1 0 -1, rgba(0, 0, 0, 0.3));
// .to-rem(margin, 30 auto 0);
// }
//
// @link http://cbrac.co/15UAPWx
//
.to-rem(@property, @size-values, @rest-link-params : false) {
@property-rem: ~'/*rem*/'@property;
@property-px: ~'/*px*/'@property;
.to-rem-loop();
.to-rem-loop(@amount : length(@size-values), @i : 1) when (@i =< @amount) {
@size-value: extract(@size-values, @i);
& when (iskeyword(@size-value)) {
@px-value : @size-value;
@rem-value : @size-value;
@{property-px}+_ : ~"@{px-value}";
@{property-rem}+_ : ~"@{rem-value}";
}
& when not (iskeyword(@size-value)) {
@px-value : @size-value;
@rem-value : @size-value / @to-rem-font-size;
& when not (@px-value = 0) {
@{property-px}+_ : ~"@{px-value}px";
}
& when (@px-value = 0) {
@{property-px}+_ : @px-value;
}
& when not (@rem-value = 0) {
@{property-rem}+_ : ~"@{rem-value}rem";
}
& when (@rem-value = 0) {
@{property-rem}+_ : @rem-value;
}
}
.to-rem-loop(@amount, (@i + 1));
}
& when not (@rest-link-params = false) {
@{property-px}+_ : @rest-link-params;
}
& when not (@rest-link-params = false) {
@{property-rem}+_ : @rest-link-params;
}
}
================================================
FILE: base/mixins/vertically-centered.less
================================================
// =============================================================================
// Base -> Mixins -> Vertically Centered
// =============================================================================
.vertically-centered() {
position: relative;
top: 50%;
transform: translateY(-50%);
}
================================================
FILE: base/normalize.less
================================================
/*! normalize.css v3.0.2 | 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 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* 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,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
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 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* 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;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
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;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* 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, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit; /* 1 */
font: inherit; /* 2 */
margin: 0; /* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
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/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 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 */
}
/**
* 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;
}
/**
* 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;
}
/**
* 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;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 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 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
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;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
================================================
FILE: base/print.less
================================================
/* ========================================================================== *\
Base -> Print ($base-print)
\* ========================================================================== */
/**
* Print styles extracted from HTML5-Boilerplate
*
* @link http://cbrac.co/1RvNULl
*/
@media print {
/* 1. Black prints faster - http://cbrac.co/XvusCs */
* {
color: @print-text-color !important; /* 1 */
background: transparent !important;
box-shadow: none !important;
text-shadow: none !important;
}
@page {
margin: 0.5cm;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
/* Don’t show links for images, or javascript/internal links */
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
blockquote,
pre {
border: 1px solid @color-gray-dark;
page-break-inside: avoid;
}
h2,
h3,
p {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
img,
tr {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
/* 1. http://cbrac.co/Q6s1o2 */
thead {
display: table-header-group; /* 1 */
}
}
================================================
FILE: base/reset.less
================================================
/* ========================================================================== *\
Base -> Reset ($base-reset)
\* ========================================================================== */
//
// Styles
//
/**
* `border-box`... ALL THE THINGS!
*
* @link http://cbrac.co/RQrDL5
*/
html {
box-sizing: border-box;
}
/**
* Inheriting the `box-sizing` property is a better practice.
*
* @link http://cbrac.co/1tqPFsy
*/
* {
&,
&:before,
&:after {
box-sizing: inherit;
}
}
/**
* Remove margins, paddings, and borders from HTML elements.
*
* @link http://cbrac.co/1Ev9etR
*/
a,
abbr,
acronym,
address,
applet,
article,
aside,
b,
blockquote,
body,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
main,
menu,
nav,
object,
ol,
p,
pre,
q,
s,
samp,
section,
small,
span,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
u,
ul,
var {
margin: 0;
padding: 0;
border: 0;
}
/**
* Remove default border for <iframe> elements.
*
* @link http://cbrac.co/1CVyNTj
*/
iframe {
border: 0;
}
/**
* 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.
*
* It is okay to use `!important` here because we always want this rule to take
* precedence.
*
* @link http://cbrac.co/1Evazku
*/
[tabindex="-1"]:focus {
outline: none !important;
}
================================================
FILE: base/root.less
================================================
/* ========================================================================== *\
Base -> Root ($base-root)
\* ========================================================================== */
/**
* The <html> element.
*
* 1. Set the default `font-size` and `line-height` for the project based on
variables set previously. The `font-size` is represented in `rem`s, and
the `line-height` is represented as a unitless value.
*
* 2. Force a vertical scrollbar.
*
* @link http://cbrac.co/163MspB
*
* 3. Ensure the <html> element's `height` is at least the viewport height.
*
* NOTES:
*
* - Use `text-rendering` with caution.
*
* @link http://cbrac.co/SJt8p1
*
* - Avoid the webkit anti-aliasing trap.
*
* @link http://cbrac.co/TAdhbH
*
* - IE for Windows Phone 8 ignores `-ms-text-size-adjust` if the viewport
* <meta> tag is used.
*
* @link http://cbrac.co/1cFrAvl
*/
html {
font-family: @font-family-sans-serif;
.to-rem(font-size, @font-size); /* 1 */
line-height: @line-height-ratio; /* 1 */
overflow-y: scroll; /* 2 */
height: 100%; /* 3 */
background-color: @root-background-color;
color: @root-text-color;
}
/**
* The <body> element.
*
* 1. Ensure the <body> element's `min-height` is at least the viewport height.
*/
body {
min-height: 100%; /* 1 */
}
/**
* Set a consistent margin for common elements to maintain vertical rhythm.
*/
blockquote,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
hr,
menu,
ol,
p,
pre,
summary,
table,
ul {
.to-rem(margin-bottom, @spacing-base);
}
/**
* Add word wrapping and basic hyphenation to common elements.
*/
caption,
p,
table,
td,
textarea,
th {
word-wrap: break-word;
hyphens: auto;
}
/**
* NOTE: Do not remove :focus styles! It’s an accessibility no-no.
*
* @link http://cbrac.co/1cNYD2l
*/
:focus {
.to-rem(outline, @root-focus-outline-fallback-width, @root-focus-outline-fallback-style @root-focus-outline-fallback-color);
.to-rem(outline, @root-focus-outline-width, @root-focus-outline-style @root-focus-outline-color);
}
================================================
FILE: base/tables.less
================================================
/* ========================================================================== *\
Base -> Tables ($base-tables)
\* ========================================================================== */
table {
width: 100%;
empty-cells: show;
}
th,
tfoot td {
text-align: left;
}
th,
td {
overflow: visible;
}
================================================
FILE: base/text-elements.less
================================================
/* ========================================================================== *\
Base -> Text Elements ($base-text-elements)
\* ========================================================================== */
/**
* Add a help cursor to elements that need one.
*/
abbr,
acronym,
dfn[title] {
cursor: help;
}
/**
* Remove `text-decoration` on links inside <abbr> elements, since there are
* already border styles on the <abbr> element.
*/
abbr a {
text-decoration: none;
}
/**
* Set <acronym> elements to be uppercase by default.
*/
acronym {
text-transform: uppercase;
}
/**
* Set some basic styles for <del> tags.
*/
del {
font-style: @text-del-font-style;
text-decoration: @text-del-text-decoration;
color: @text-del-text-color;
}
/**
* Give <details> elements a pointer cursor.
*/
details {
cursor: pointer;
}
/**
* Set some basic styles for definition lists.
*/
dl {
dt {
font-weight: @text-dt-font-weight;
color: @text-dt-text-color;
}
dd {
margin: 0;
}
}
/**
* Ensure commonly italicized elements are italicized.
*/
em,
i,
cite {
font-style: italic;
}
/**
* Address styling not present in IE9.
*/
ins,
mark {
text-decoration: none;
color: @text-highlights-text-color;
background: @text-highlights-bg-color;
}
================================================
FILE: base/variables.less
================================================
// =============================================================================
// Base -> Variables
// =============================================================================
//
// Variables
//
// This file contains all of the variables used in this framework. You should
// not modify these variables directly. Instead, you should create your own LESS
// file (e.g. `my-project.less`) that imports this framework, then create
// your own variable overrides file (e.g. `variables-custom.less`), and import
// your variables file after you've imported this framework so that LESS
// processes your variables overrides instead of the default variables.
//
// @link http://cbrac.co/1LNVWut
//
//
// Colors -> Grayscale
//
@color-black: #000000;
@color-gray-darkest: lighten(@color-black, 13.5%); // #222222
@color-gray-darker: lighten(@color-black, 26.5%); // #444444
@color-gray-dark: lighten(@color-black, 46.7%); // #777777
@color-gray: lighten(@color-black, 66.5%); // #aaaaaa
@color-gray-light: lighten(@color-black, 87%); // #dedede
@color-gray-lighter: lighten(@color-black, 93.75%); // #efefef
@color-gray-lightest: lighten(@color-black, 97.25%); // #f8f8f8
@color-white: #ffffff;
//
// Colors -> Brand
//
@color-primary: #1fa3ec;
//
// Typography -> Font Sizes
//
// Typography -> Font Sizes -> Base
@font-size: 16;
// Typography -> Font Sizes -> Smaller
@font-size-small: (@font-size - 1);
@font-size-x-small: (@font-size - 2);
@font-size-xx-small: (@font-size - 3);
@font-size-xxx-small: (@font-size - 4);
// Typography -> Font Sizes -> Larger
@font-size-large: (@font-size + 1);
@font-size-x-large: (@font-size + 2);
@font-size-xx-large: (@font-size + 3);
@font-size-xxx-large: (@font-size + 4);
// Typography -> Font Sizes -> 100%
@font-size-100: 100%;
// Typography -> Font Sizes -> 0
@font-size-0: 0;
//
// Typography -> Headings
//
@font-size-heading-1: 36;
@font-size-heading-2: 30;
@font-size-heading-3: 24;
@font-size-heading-4: 20;
@font-size-heading-5: 16;
@font-size-heading-6: 14;
//
// Typography -> Line height
//
@line-height: 24;
@line-height-ratio: (@line-height / @font-size);
//
// Typography -> Fonts
//
@font-family-sans-serif: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
@font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
@font-family-monospace: Monaco, Consolas, "Liberation Mono", Courier, monospace;
//
// Spacing -> Base
//
// The base spacing unit is set equal to the `line-height` by default. This helps
// create a consistent vertical rhythm throughout the framework.
//
@spacing-base: @line-height;
//
// Spacing -> Smaller
//
// Spacing -> Half
@spacing-half: (@spacing-base / 2);
// Spacing -> Thirds
@spacing-third: (@spacing-base / 3);
@spacing-two-thirds: (@spacing-third * 2);
// Spacing -> Fourths
@spacing-fourth: (@spacing-base / 4);
@spacing-three-fourths: (@spacing-fourth * 3);
// Spacing -> Fifths
@spacing-fifth: (@spacing-base / 5);
@spacing-two-fifths: (@spacing-fifth * 2);
@spacing-three-fifths: (@spacing-fifth * 3);
@spacing-four-fifths: (@spacing-fifth * 4);
// Spacing -> Sixths
@spacing-sixth: (@spacing-base / 6);
@spacing-five-sixths: (@spacing-sixth * 5);
// Spacing -> Micro
@spacing-micro: 2;
// Spacing -> 1px
@spacing-1px: 1;
//
// Spacing -> Larger
//
// Spacing -> + Half
@spacing-base-plus-half: (@spacing-base + @spacing-half);
// Spacing -> + Thirds
@spacing-base-plus-third: (@spacing-base + @spacing-third);
@spacing-base-plus-two-thirds: (@spacing-base + (@spacing-third * 2));
// Spacing -> + Fourths
@spacing-base-plus-fourth: (@spacing-base + @spacing-fourth);
@spacing-base-plus-three-fourths: (@spacing-base + (@spacing-fourth * 3));
// Spacing -> + Fifths
@spacing-base-plus-fifth: (@spacing-base + @spacing-fifth);
@spacing-base-plus-two-fifths: (@spacing-base + (@spacing-fifth * 2));
@spacing-base-plus-three-fifths: (@spacing-base + (@spacing-fifth * 3));
@spacing-base-plus-four-fifths: (@spacing-base + (@spacing-fifth * 4));
// Spacing -> + Sixths
@spacing-base-plus-sixth: (@spacing-base + @spacing-sixth);
@spacing-base-plus-five-sixths: (@spacing-base + (@spacing-sixth * 5));
// Spacing -> + Micro
@spacing-base-plus-micro: (@spacing-base + 2);
// Spacing -> + 1px
@spacing-base-plus-1px: (@spacing-base + 1);
// Spacing -> Double
@spacing-double: (@spacing-base * 2);
// Spacing -> Triple
@spacing-triple: (@spacing-base * 3);
// Spacing -> Quadruple
@spacing-quadruple: (@spacing-base * 4);
// Spacing -> Macro
@spacing-macro: (@spacing-base * 8);
// Spacing -> None (0)
@spacing-none: 0;
//
// Breakpoints -> Base
//
@screen-xs: 480px;
@screen-sm: 600px;
@screen-md: 768px;
@screen-lg: 960px;
@screen-xl: 1140px;
@screen-xxl: 1380px;
//
// Breakpoints -> Min-width
//
@screen-xs-min: @screen-xs;
@screen-sm-min: @screen-sm;
@screen-md-min: @screen-md;
@screen-lg-min: @screen-lg;
@screen-xl-min: @screen-xl;
@screen-xxl-min: @screen-xxl;
//
// Breakpoints -> Max-width
//
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
@screen-lg-max: (@screen-xl-min - 1);
@screen-xl-max: (@screen-xxl-min - 1);
//
// Borders -> Border Radius
//
@border-radius-base: 3;
//
// Z-Index
//
@z-index-1: 100;
@z-index-2: 200;
@z-index-3: 300;
@z-index-4: 400;
@z-index-5: 500;
@z-index-6: 600;
@z-index-7: 700;
@z-index-8: 800;
@z-index-9: 900;
@z-index-10: 1000;
//
// Base -> Root
//
@root-background-color: @color-white;
@root-text-color: @color-gray-darker;
@root-focus-outline-fallback-width: @spacing-1px;
@root-focus-outline-fallback-style: dotted;
@root-focus-outline-fallback-color: @color-gray-darkest;
@root-focus-outline-width: 5;
@root-focus-outline-style: auto;
@root-focus-outline-color: -webkit-focus-ring-color;
//
// Base -> Selections
//
@selection-background-color: #b3d4fc;
@selection-inactive-background-color: @color-gray-light;
//
// Base -> Anchors
//
@anchor-text-color: #069;
//
// Base -> Text Elements
//
@text-del-font-style: italic;
@text-del-text-decoration: line-through;
@text-del-text-color: @color-gray-dark;
@text-dt-font-weight: 700;
@text-dt-text-color: @color-gray-darkest;
@text-highlights-bg-color: #ff9;
@text-highlights-text-color: @color-gray-darkest;
//
// Base -> Headings
//
@heading-font-family: @font-family-sans-serif;
@heading-font-weight: 700;
@heading-text-color: @color-gray-darkest;
//
// Base -> Blockquotes
//
@blockquote-font-family: @font-family-serif;
@blockquote-font-style: italic;
@blockquote-font-size: @font-size-heading-3;
@blockquote-text-color: @color-gray-dark;
@blockquote-margin-left: @spacing-base;
@blockquote-padding-left: @spacing-base;
@blockquote-border-width: @spacing-fourth;
@blockquote-border-style: solid;
@blockquote-border-color: @color-gray-light;
@blockquote-cite-font-family: @font-family-sans-serif;
@blockquote-cite-font-style: normal;
@blockquote-cite-font-size: @font-size-x-small;
@blockquote-cite-text-color: @color-gray-dark;
@blockquote-cite-anchor-color: @color-gray-dark;
//
// Base -> Lists
//
@definition-lists-font-weight: 700;
@definition-lists-text-color: @color-gray-darkest;
@list-item-margin-left: @spacing-base;
//
// Base -> Horizontal Rules
//
@hr-border-width: @spacing-1px;
@hr-border-style: solid;
@hr-border-color: @color-gray-light;
//
// Base -> Code
//
@code-font-size: @font-size-x-small;
@code-font-style: normal;
@code-text-color: @color-gray-darkest;
@code-background-color: @color-gray-lightest;
@code-border-width: @spacing-1px;
@code-border-style: solid;
@code-border-color: @color-gray-light;
@code-border-radius: @border-radius-base;
@code-padding: (@spacing-micro) (@spacing-fourth);
@code-pre-padding: @spacing-base;
@code-pre-text-color: @color-gray-darker;
@code-pre-background-color: @color-gray-lightest;
//
// Base -> Embedded Content
//
@figcaption-text-color: @color-gray-dark;
@figcaption-margin-top: @spacing-third;
//
// Base -> Form elements
//
@form-legend-text-color: @color-gray-darkest;
//
// Base -> Print
//
@print-text-color: @color-black;
//
// Layout -> Wrappers
//
@wrapper-width: 94%;
@wrapper-max-width: 1024;
//
// Layout -> Grids
//
@grid-gutter-base: @spacing-base;
@grid-gutter-half: @spacing-half;
@grid-gutter-double: @spacing-double;
@grid-gutter-1px: @spacing-1px;
//
// Layout -> Boxes
//
@box-padding: @spacing-base;
@box-bg-color: @color-gray-lighter;
@box-border-width: @spacing-1px;
@box-border-style: solid;
@box-border-color: @color-gray-light;
@box-border-radius: @border-radius-base;
@box-raise-box-shadow-blur: @spacing-third;
@box-sink-box-shadow-blur: @spacing-third;
//
// Objects -> Buttons
//
@btn-font-family: inherit;
@btn-font-weight: 700;
@btn-line-height: @line-height-ratio;
@btn-padding: 10 14;
@btn-text-color: @color-gray-darker;
@btn-background-color: @color-gray-light;
@btn-border-radius: @border-radius-base;
@btn-focus-outline-width: thin;
@btn-focus-outline-style: dotted;
@btn-focus-outline-color: @color-gray-darkest;
@btn-xs-font-size: @font-size-xxx-small;
@btn-xs-padding: @spacing-sixth @spacing-third;
@btn-sm-font-size: @font-size-xx-small;
@btn-sm-padding: @spacing-fourth 10;
@btn-lg-font-size: @font-size-xxx-large;
@btn-lg-padding: @spacing-two-thirds @spacing-base;
@btn-primary-text-color: @color-white;
@btn-primary-bg-color: @color-primary;
@btn-group-margin: @spacing-none @spacing-micro;
@btn-lg-group-margin: @spacing-none @spacing-sixth;
//
// Objects -> Forms
//
@form-label-margin: @spacing-sixth;
@form-input-line-height: @line-height-ratio;
@form-input-height: 44;
@form-input-padding: @spacing-third;
@form-input-text-color: @color-gray-darkest;
@form-input-border-width: @spacing-1px;
@form-input-border-style: solid;
@form-input-border-color: @color-gray-light;
@form-input-border-radius: @border-radius-base;
@form-input-focus-border-color: @color-primary;
@form-select-padding: 10;
@form-select-background-color: @color-gray-lightest;
//
// Objects -> Lists
//
@list-inline-delimiter-content: ",\00A0"; // Comma
//
// Objects -> Tables
//
@table-caption-font-style: italic;
@table-caption-font-weight: 700;
@table-header-footer-text-color: @color-gray-darkest;
@table-header-footer-bg-color: @color-gray-lighter;
@table-caption-padding-bottom: @spacing-sixth;
@table-cell-padding: @spacing-third;
@table-border-width: @spacing-1px;
@table-border-style: solid;
@table-border-color: @color-gray-light;
@table-stripe-background-color: @color-gray-lightest;
================================================
FILE: bower.json
================================================
{
"name": "cardinal",
"homepage": "http://cardinalcss.com",
"main": "cardinal.css",
"authors": [
"Chris Bracco"
],
"description": "Cardinal is a modular, 'mobile-first' CSS framework built with performance and scalability in mind.",
"keywords": [
"cardinal",
"css",
"less",
"modular",
"mobile-first",
"framework",
"responsive"
],
"license": "MIT",
"ignore": [
"**/.*",
"package.json",
"CONTRIBUTING.md"
]
}
================================================
FILE: cardinal.css
================================================
/*! cardinalcss v3.7.0 | MIT License | http://cardinalcss.com */
@charset "UTF-8";
/*! normalize.css v3.0.2 | 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 */
}
/**
* Remove default margin.
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* 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,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
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 */
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* 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;
}
/* Links
========================================================================== */
/**
* Remove the gray background color from active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* Text-level semantics
========================================================================== */
/**
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/**
* Address styling not present in Safari and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address variable `h1` font-size and margin within `section` and `article`
* contexts in Firefox 4+, Safari, and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Address styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
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;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Embedded content
========================================================================== */
/**
* Remove border when inside `a` element in IE 8/9/10.
*/
img {
border: 0;
}
/**
* Correct overflow not hidden in IE 9/10/11.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* Address margin not present in IE 8/9 and Safari.
*/
figure {
margin: 1em 40px;
}
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Contain overflow in all browsers.
*/
pre {
overflow: auto;
}
/**
* Address odd `em`-unit font size rendering in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
/* 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, and Chrome.
*/
button,
input,
optgroup,
select,
textarea {
color: inherit;
/* 1 */
font: inherit;
/* 2 */
margin: 0;
/* 3 */
}
/**
* Address `overflow` set to `hidden` in IE 8/9/10/11.
*/
button {
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/9/10/11, and Opera.
* Correct `select` style inheritance in Firefox.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
input {
line-height: normal;
}
/**
* It's recommended that you don't attempt to style these elements.
* Firefox's implementation doesn't respect box-sizing, padding, or width.
*
* 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"] {
-moz-box-sizing: border-box;
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;
}
/**
* 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;
/* 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;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 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 */
}
/**
* Remove default vertical scrollbar in IE 8/9/10/11.
*/
textarea {
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;
}
/* Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
/* ========================================================================== *\
Base -> Reset ($base-reset)
\* ========================================================================== */
/**
* `border-box`... ALL THE THINGS!
*
* @link http://cbrac.co/RQrDL5
*/
html {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/**
* Inheriting the `box-sizing` property is a better practice.
*
* @link http://cbrac.co/1tqPFsy
*/
*,
*:before,
*:after {
-moz-box-sizing: inherit;
box-sizing: inherit;
}
/**
* Remove margins, paddings, and borders from HTML elements.
*
* @link http://cbrac.co/1Ev9etR
*/
a,
abbr,
acronym,
address,
applet,
article,
aside,
b,
blockquote,
body,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
main,
menu,
nav,
object,
ol,
p,
pre,
q,
s,
samp,
section,
small,
span,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
u,
ul,
var {
margin: 0;
padding: 0;
border: 0;
}
/**
* Remove default border for <iframe> elements.
*
* @link http://cbrac.co/1CVyNTj
*/
iframe {
border: 0;
}
/**
* 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.
*
* It is okay to use `!important` here because we always want this rule to take
* precedence.
*
* @link http://cbrac.co/1Evazku
*/
[tabindex="-1"]:focus {
outline: none !important;
}
/* ========================================================================== *\
Base -> Root ($base-root)
\* ========================================================================== */
/**
* The <html> element.
*
* 1. Set the default `font-size` and `line-height` for the project based on
variables set previously. The `font-size` is represented in `rem`s, and
the `line-height` is represented as a unitless value.
*
* 2. Force a vertical scrollbar.
*
* @link http://cbrac.co/163MspB
*
* 3. Ensure the <html> element's `height` is at least the viewport height.
*
* NOTES:
*
* - Use `text-rendering` with caution.
*
* @link http://cbrac.co/SJt8p1
*
* - Avoid the webkit anti-aliasing trap.
*
* @link http://cbrac.co/TAdhbH
*
* - IE for Windows Phone 8 ignores `-ms-text-size-adjust` if the viewport
* <meta> tag is used.
*
* @link http://cbrac.co/1cFrAvl
*/
html {
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
/*px*/ font-size: 16px;
/*rem*/ font-size: 1rem;
/* 1 */
line-height: 1.5;
/* 1 */
overflow-y: scroll;
/* 2 */
height: 100%;
/* 3 */
background-color: #ffffff;
color: #444444;
}
/**
* The <body> element.
*
* 1. Ensure the <body> element's `min-height` is at least the viewport height.
*/
body {
min-height: 100%;
/* 1 */
}
/**
* Set a consistent margin for common elements to maintain vertical rhythm.
*/
blockquote,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
hr,
menu,
ol,
p,
pre,
summary,
table,
ul {
/*px*/ margin-bottom: 24px;
/*rem*/ margin-bottom: 1.5rem;
}
/**
* Add word wrapping and basic hyphenation to common elements.
*/
caption,
p,
table,
td,
textarea,
th {
word-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
/**
* NOTE: Do not remove :focus styles! It’s an accessibility no-no.
*
* @link http://cbrac.co/1cNYD2l
*/
:focus {
/*px*/ outline: 1px dotted #222222 5px auto -webkit-focus-ring-color;
/*rem*/ outline: 0.0625rem dotted #222222 0.3125rem auto -webkit-focus-ring-color;
}
/* ========================================================================== *\
Base -> Anchors ($base-anchors)
\* ========================================================================== */
a {
text-decoration: underline;
color: #069;
}
a:hover,
a:active,
a:focus {
text-decoration: none;
}
/* ========================================================================== *\
Base -> Text Elements ($base-text-elements)
\* ========================================================================== */
/**
* Add a help cursor to elements that need one.
*/
abbr,
acronym,
dfn[title] {
cursor: help;
}
/**
* Remove `text-decoration` on links inside <abbr> elements, since there are
* already border styles on the <abbr> element.
*/
abbr a {
text-decoration: none;
}
/**
* Set <acronym> elements to be uppercase by default.
*/
acronym {
text-transform: uppercase;
}
/**
* Set some basic styles for <del> tags.
*/
del {
font-style: italic;
text-decoration: line-through;
color: #777777;
}
/**
* Give <details> elements a pointer cursor.
*/
details {
cursor: pointer;
}
/**
* Set some basic styles for definition lists.
*/
dl dt {
font-weight: 700;
color: #222222;
}
dl dd {
margin: 0;
}
/**
* Ensure commonly italicized elements are italicized.
*/
em,
i,
cite {
font-style: italic;
}
/**
* Address styling not present in IE9.
*/
ins,
mark {
text-decoration: none;
color: #222222;
background: #ff9;
}
/* ========================================================================== *\
Base -> Headings ($base-headings)
\* ========================================================================== */
/**
* NOTE: Use the `text-rendering` property with caution.
*
* @link http://cbrac.co/SJt8p1
* @link http://cbrac.co/1Fjv7IR
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-weight: 700;
color: #222222;
}
h1,
.h1 {
/*px*/ font-size: 36px;
/*rem*/ font-size: 2.25rem;
}
h2,
.h2 {
/*px*/ font-size: 30px;
/*rem*/ font-size: 1.875rem;
}
h3,
.h3 {
/*px*/ font-size: 24px;
/*rem*/ font-size: 1.5rem;
}
h4,
.h4 {
/*px*/ font-size: 20px;
/*rem*/ font-size: 1.25rem;
}
h5,
.h5 {
/*px*/ font-size: 16px;
/*rem*/ font-size: 1rem;
}
h6,
.h6 {
/*px*/ font-size: 14px;
/*rem*/ font-size: 0.875rem;
}
/* ========================================================================== *\
Base -> Lists ($base-lists)
\* ========================================================================== */
/**
* Set some basic styles for definition lists.
*/
dl dt {
font-weight: 700;
color: #222222;
}
dl dd {
margin: 0;
}
/**
* Reset the left margin for <ol> and <ul> elements.
*/
ol li,
ul li {
/*px*/ margin-left: 24px;
/*rem*/ margin-left: 1.5rem;
}
/**
* Set nested `list-style` types for ordered lists.
*/
ol {
list-style: decimal;
}
ol ol {
list-style: upper-alpha;
}
ol ol ol {
list-style: lower-roman;
}
ol ol ol ol {
list-style: lower-alpha;
}
/**
* Remove `margin-bottom` on nested lists.
*/
ol ol,
ul ol,
ol ul,
ul ul {
margin-bottom: 0;
}
/* ========================================================================== *\
Base -> Horizontal Rules ($base-horizontal-rules)
\* ========================================================================== */
hr {
display: block;
padding: 0;
border: 0;
/*px*/ border-top: 1px solid #dedede;
/*rem*/ border-top: 0.0625rem solid #dedede;
}
/* ========================================================================== *\
Base -> Blockquotes ($base-blockquotes)
\* ========================================================================== */
blockquote {
color: #777777;
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
font-style: italic;
/*px*/ font-size: 24px;
/*rem*/ font-size: 1.5rem;
/*px*/ margin-left: 24px;
/*rem*/ margin-left: 1.5rem;
/*px*/ padding-left: 24px;
/*rem*/ padding-left: 1.5rem;
/*px*/ border-left: 6px solid #dedede;
/*rem*/ border-left: 0.375rem solid #dedede;
/**
* Use <cite> inside blockquotes.
*
* @link http://cbrac.co/18LWCOw
*/
}
blockquote p {
margin: 0;
}
blockquote p + p {
/*px*/ margin-top: 24px;
/*rem*/ margin-top: 1.5rem;
}
blockquote cite {
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-style: normal;
/*px*/ font-size: 14px;
/*rem*/ font-size: 0.875rem;
color: #777777;
/**
* Add an m-dash character before the <cite> tag.
*/
}
blockquote cite:before {
content: "\2014 \0020";
}
blockquote cite a {
color: #777777;
}
/* ========================================================================== *\
Base -> Code ($base-code)
\* ========================================================================== */
/**
* 1. Correct `font-family` set oddly in Safari 5 and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: Monaco, Consolas, "Liberation Mono", Courier, monospace;
/* 1 */
/*px*/ font-size: 14px;
/*rem*/ font-size: 0.875rem;
font-style: normal;
color: #222222;
}
code {
margin: 0;
/*px*/ padding: 2px 6px;
/*rem*/ padding: 0.125rem 0.375rem;
white-space: nowrap;
/*px*/ border: 1px solid #dedede;
/*rem*/ border: 0.0625rem solid #dedede;
/*px*/ border-radius: 3px;
/*rem*/ border-radius: 0.1875rem;
background-color: #f8f8f8;
}
kbd {
position: relative;
top: -1px;
margin-bottom: 1px;
/*px*/ padding: 2px 6px;
/*rem*/ padding: 0.125rem 0.375rem;
white-space: nowrap;
/*px*/ border: 1px solid #dedede;
/*rem*/ border: 0.0625rem solid #dedede;
/*px*/ border-radius: 3px;
/*rem*/ border-radius: 0.1875rem;
background-color: #f8f8f8;
box-shadow: 0 1px 0 #dedede, inset 0 0 0 1px #ffffff;
}
pre {
position: relative;
overflow: auto;
/*px*/ padding: 24px;
/*rem*/ padding: 1.5rem;
white-space: pre;
word-wrap: normal;
word-break: normal;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
color: #444444;
background: #f8f8f8;
/**
* Reset the above <code> styles when nested inside <pre> tags.
*/
}
pre code {
display: block;
overflow: auto;
height: 100%;
margin: 0;
padding: 0;
white-space: pre;
color: inherit;
border: none;
border-radius: 0;
background: transparent;
}
/* ========================================================================== *\
Base -> Embedded Content ($base-embedded-content)
\* ========================================================================== */
/**
* Remove the gap between audio, canvas, iframes, images, videos and the bottom
* of their containers.
*
* @link http://cbrac.co/Q6smqV
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
/**
* Fluid-width <audio>, <canvas>, & <video> elements.
*/
audio,
canvas,
video {
width: 100%;
}
audio:focus,
canvas:focus,
video:focus {
outline: 1px dotted #000000;
}
/**
* Fluid-width media elements that maintain their aspect ratios.
*/
embed,
img,
object,
video {
max-width: 100%;
height: auto;
}
embed,
object {
height: 100%;
}
/**
* Reset `margin` for figure elements.
*/
figure {
margin-right: auto;
margin-left: auto;
}
/**
* Set <img> elements as block-level inside <figure> elements.
*/
figure > img {
display: block;
}
/**
* Give <figcaption> elements some default styles.
*/
figcaption {
/*px*/ font-size: 13px;
/*rem*/ font-size: 0.8125rem;
font-style: italic;
/*px*/ margin-top: 8px;
/*rem*/ margin-top: 0.5rem;
color: #777777;
}
/**
* 1. If images do not load, the `alt` text will be visually offset and more
* noticeable.
* 2. Improve image resize rendering in IE6/7.
*
* @link http://cbrac.co/11ciIZL
*/
img {
font-style: italic;
/* 1 */
-ms-interpolation-mode: bicubic;
/* 2 */
}
/* ========================================================================== *\
Base -> Form Elements ($base-form-elements)
\* ========================================================================== */
/**
* 1. Avoid the WebKit bug in Android 4.0.* where [2] destroys native
* <audio> and <video> controls.
* 2. Improve usability and consistency of cursor style between
* image-type <input> and others.
*/
button,
html input[type="button"],
input[type="checkbox"],
input[type="file"],
input[type="image"],
input[type="radio"],
input[type="reset"],
input[type="submit"],
label,
select {
cursor: pointer;
/* 2 */
}
/**
* Fix vertical alignment inconsistencies with certain form inputs.
*/
input[type="color"],
input[type="range"] {
vertical-align: middle;
}
/**
* 1. Set `min-width` to 0 to avoid overflow issues in Chrome.
* 2. Remove default `margin`, `padding`, and `border` across browsers.
*/
fieldset {
min-width: 0;
/* 1 */
margin: 0;
/* 2 */
padding: 0;
/* 2 */
border: 0;
/* 2 */
}
/**
* 1. Set checkbox, image, and radio inputs to `inline-block`, by default.
*/
input[type="checkbox"],
input[type="image"],
input[type="radio"] {
display: inline-block;
/* 1 */
width: auto;
}
/**
* 1. Constrict `max-width` for file inputs to avoid overflow issues.
*/
input[type="file"] {
max-width: 100%;
/* 1 */
cursor: pointer;
}
/**
* 1. Set search inputs to `border-box` by default. This overrides the
* `content-box` value set by normalize.css.
* 2. Remove rounded corners from iOS search inputs by overriding `appearance:
* textfield` from normalize.css.
*
* @link http://cbrac.co/1xgTke2
*/
input[type="search"] {
-moz-box-sizing: border-box;
box-sizing: border-box;
/* 1 */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* 2 */
}
/**
* Remove rounded corners that iOS and Chrome apply to <input> buttons and
* <select> menus.
*/
input[type="submit"],
input[type="button"],
input[type="image"],
input[type="reset"],
select {
border-radius: 0;
}
/**
* 1. Force Safari to give <legend> elements 100% width.
* 2. Remove `padding` so people aren't caught out if they zero out <fieldset>.
* 3. Correct `color` not being inherited in IE 8/9.
*/
legend {
font-weight: 700;
width: 100%;
/* 1 */
padding: 0;
/* 2 */
color: #222222;
/* 3 */
border: 0;
}
/**
* 1. Restrict width to 100% of its parent to avoid horizontal overflow issues.
* 2. Force `height: auto;` for <textarea> across browsers.
* 3. <textarea> elements should only resize vertically.
*/
textarea {
max-width: 100%;
/* 1 */
height: auto;
/* 2 */
resize: vertical;
/* 3 */
}
/* ========================================================================== *\
Base -> Tables ($base-tables)
\* ========================================================================== */
table {
width: 100%;
empty-cells: show;
}
th,
tfoot td {
text-align: left;
}
th,
td {
overflow: visible;
}
/* ========================================================================== *\
Base -> Print ($base-print)
\* ========================================================================== */
/**
* Print styles extracted from HTML5-Boilerplate
*
* @link http://cbrac.co/1RvNULl
*/
@media print {
/* 1. Black prints faster - http://cbrac.co/XvusCs */
* {
color: #000000 !important;
/* 1 */
background: transparent !important;
box-shadow: none !important;
text-shadow: none !important;
}
@page {
margin: 0.5cm;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
/* Don’t show links for images, or javascript/internal links */
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
blockquote,
pre {
border: 1px solid #777777;
page-break-inside: avoid;
}
h2,
h3,
p {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
img,
tr {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
/* 1. http://cbrac.co/Q6s1o2 */
thead {
display: table-header-group;
/* 1 */
}
}
/* ========================================================================== *\
Layout -> Boxes ($layout-boxes)
\* ========================================================================== */
.box {
display: block;
/*px*/ padding: 24px;
/*rem*/ padding: 1.5rem;
background-color: #efefef;
}
.box > *:last-child {
margin-bottom: 0;
}
/**
* Give `.box` a border style.
*/
.box-border {
/*px*/ border: 1px solid #dedede;
/*rem*/ border: 0.0625rem solid #dedede;
}
/**
* Give `.box` rounded edges.
*/
.box-round {
/*px*/ border-radius: 3px;
/*rem*/ border-radius: 0.1875rem;
}
/**
* Remove padding from default `.box`.
*/
.box-flush {
padding: 0;
}
/**
* Give `.box` the appearance of being raised above its surrounding area.
*/
.box-raise {
/*px*/ box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
/*rem*/ box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.15);
}
/**
* Give `.box` the appearance of being sunken beneath its surrounding area.
*/
.box-sink {
/*px*/ box-shadow: 0 0 8px rgba(0, 0, 0, 0.15) inset;
/*rem*/ box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.15) inset;
}
/* ========================================================================== *\
Objects -> Buttons ($objects-buttons)
\* ========================================================================== */
.btn {
font-family: inherit;
font-weight: 700;
line-height: 1.5;
display: inline-block;
margin: 0;
/*px*/ padding: 10px 14px;
/*rem*/ padding: 0.625rem 0.875rem;
cursor: pointer;
text-align: center;
vertical-align: middle;
white-space: nowrap;
text-decoration: none;
color: #444444;
border: 0 none;
background-color: #dedede;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/**
* States
*/
}
.btn:hover {
background-color: #e3e3e3;
}
.btn:active,
.btn.is-active {
background-color: #d9d9d9;
/*px*/ box-shadow: 0 0 8px rgba(0, 0, 0, 0.25) inset;
/*rem*/ box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25) inset;
}
.btn:active:focus {
outline: 0 none;
}
.btn:disabled,
.btn[disabled],
.btn.is-disabled {
cursor: not-allowed;
pointer-events: none;
opacity: 0.50;
box-shadow: none;
text-shadow: none;
}
/**
* Shapes
*/
.btn-round,
input[type="button"].btn-round,
input[type="submit"].btn-round {
/*px*/ border-radius: 3px;
/*rem*/ border-radius: 0.1875rem;
}
/**
* Sizes
*/
.btn-xs {
/*px*/ font-size: 12px;
/*rem*/ font-size: 0.75rem;
/*px*/ padding: 4px 8px;
/*rem*/ padding: 0.25rem 0.5rem;
}
.btn-sm {
/*px*/ font-size: 13px;
/*rem*/ font-size: 0.8125rem;
/*px*/ padding: 6px 10px;
/*rem*/ padding: 0.375rem 0.625rem;
}
.btn-block {
display: block;
}
@media (min-width: 960px) {
.btn-lg,
.btn-block {
/*px*/ font-size: 20px;
/*rem*/ font-size: 1.25rem;
/*px*/ padding: 16px 24px;
/*rem*/ padding: 1rem 1.5rem;
}
}
/**
* Colors
*/
.btn-primary {
color: #ffffff;
background-color: #1fa3ec;
}
.btn-primary:hover {
background-color: #32abee;
}
.btn-primary:active,
.btn-primary.is-active {
background-color: #1399e3;
}
/**
* Groups
*/
.btn-group .btn {
/*px*/ margin: 0 2px;
/*rem*/ margin: 0 0.125rem;
}
.btn-group .btn.btn-lg {
/*px*/ margin: 0 4px;
/*rem*/ margin: 0 0.25rem;
}
.btn-group .btn:first-child {
margin-left: 0;
}
.btn-group .btn:last-child {
margin-right: 0;
}
/* ========================================================================== *\
Objects -> Forms ($objects-forms)
\* ========================================================================== */
.form-label {
display: inline-block;
}
.form-label + .form-input,
.form-label + .form-select,
.form-label + .form-textarea {
/*px*/ margin-top: 4px;
/*rem*/ margin-top: 0.25rem;
}
/**
* Give certain <input>, <select>, and <textarea> elements some default
* styles
*/
.form-input[type="date"],
.form-input[type="datetime"],
.form-input[type="datetime-local"],
.form-input[type="email"],
.form-input[type="month"],
.form-input[type="number"],
.form-input[type="password"],
.form-input[type="search"],
.form-input[type="tel"],
.form-input[type="text"],
.form-input[type="time"],
.form-input[type="url"],
.form-input[type="week"],
.form-select,
.form-textarea {
line-height: 1.5;
display: block;
width: 100%;
/*px*/ height: 44px;
/*rem*/ height: 2.75rem;
/*px*/ padding: 8px;
/*rem*/ padding: 0.5rem;
color: #222222;
/*px*/ border: 1px solid #dedede;
/*rem*/ border: 0.0625rem solid #dedede;
}
.form-input[type="date"]:focus,
.form-input[type="datetime"]:focus,
.form-input[type="datetime-local"]:focus,
.form-input[type="email"]:focus,
.form-input[type="month"]:focus,
.form-input[type="number"]:focus,
.form-input[type="password"]:focus,
.form-input[type="search"]:focus,
.form-input[type="tel"]:focus,
.form-input[type="text"]:focus,
.form-input[type="time"]:focus,
.form-input[type="url"]:focus,
.form-input[type="week"]:focus,
.form-select:focus,
.form-textarea:focus {
border-color: #1fa3ec;
}
/**
* 1. Increase padding to correct line-height in Firefox
* 2. Give <select> menus a solid background color
*/
.form-select {
/*px*/ padding: 10px;
/*rem*/ padding: 0.625rem;
/* 1 */
background: #f8f8f8;
/* 2 */
}
.form-input-round {
/*px*/ border-radius: 3px;
/*rem*/ border-radius: 0.1875rem;
}
/* ========================================================================== *\
Objects -> Lists ($objects-lists)
\* ========================================================================== */
/**
* Bare Lists
*
* Use to remove default list styles from <ol> and <ul> elements.
*/
.list-bare {
list-style: none;
}
.list-bare li {
margin-left: 0;
}
/**
* Reset Lists
*
* Use to remove all list styles from <ol> and <ul> elements.
*/
.list-reset {
margin: 0;
padding: 0;
list-style: none;
}
.list-reset li {
margin-left: 0;
}
/**
* Inline Lists
*
* Create inline-style list items with <ol> and <ul> elements.
*/
.list-inline {
list-style: none;
padding: 0;
}
.list-inline li {
display: inline;
margin-left: 0;
}
/**
* Delimited lists
* Hat tip to @csswizardry for the technique.
*
* @link http://cbrac.co/1RvOzMU
*/
.list-inline-delimited > li + li:before {
content: ",\00A0";
}
/* ========================================================================== *\
Objects -> Tables ($objects-tables)
\* ========================================================================== */
/**
* Wrap a <table> with a `.table-container` element to add horizontal scrolling
* if the <table> contents overflow its grandparent.
*/
.table-container {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
/* Default, borderless */
.table {
width: 100%;
max-width: 100%;
}
.table caption {
font-weight: 700;
font-style: italic;
/*px*/ padding-bottom: 4px;
/*rem*/ padding-bottom: 0.25rem;
}
.table th,
.table tfoot td {
font-weight: 700;
text-align: left;
color: #222222;
}
.table thead th,
.table tfoot td {
background-color: #efefef;
}
.table th,
.table td {
/*px*/ padding: 8px;
/*rem*/ padding: 0.5rem;
vertical-align: top;
}
/**
* Give the <table> element an outer border.
*/
.table-border {
/*px*/ border: 1px solid #dedede;
/*rem*/ border: 0.0625rem solid #dedede;
}
/**
* Give the <table> element inner cell borders.
*/
.table-border-cells th,
.table-border-cells td {
/*px*/ border-top: 1px solid #dedede;
/*rem*/ border-top: 0.0625rem solid #dedede;
/*px*/ border-left: 1px solid #dedede;
/*rem*/ border-left: 0.0625rem solid #dedede;
}
/**
* Give Give the <table> inner row borders.
*/
.table-border-rows th,
.table-border-rows td {
/*px*/ border-top: 1px solid #dedede;
/*rem*/ border-top: 0.0625rem solid #dedede;
}
/**
* Remove border on 1st-row cells to avoid a double border.
*/
.table-border.table-border-cells thead:first-child tr:first-child th,
.table-border.table-border-cells thead:first-child tr:first-child td,
.table-border.table-border-rows thead:first-child tr:first-child th,
.table-border.table-border-rows thead:first-child tr:first-child td {
border-top: 0;
}
/**
* Remove border on 1st cells in every row to create a grid effect.
*/
.table-border-cells tr th:first-child,
.table-border-cells tr td:first-child {
border-left: 0;
}
/**
* Remove border on 1st-row cells to create a grid effect.
*/
.table-border-cells tr:first-child th,
.table-border-cells thead:first-child tr:first-child th {
border-top: 0;
}
/**
* Add a bottom border to the last row in the table.
*/
.table-border-rows tr:last-child td {
/*px*/ border-bottom: 1px solid #dedede;
/*rem*/ border-bottom: 0.0625rem solid #dedede;
}
/**
* Alternate `background-color` for all table rows.
*/
.table-striped tbody > tr:nth-child(odd) > td {
background-color: #f8f8f8;
}
/* ========================================================================== *\
Layout -> Wrappers ($layout-wrappers)
\* ========================================================================== */
.wrapper {
width: 94%;
/*px*/ max-width: 1024px;
/*rem*/ max-width: 64rem;
margin: 0 auto;
}
@media print {
.wrapper {
width: auto;
}
}
/**
* Force `.wrapper` to sit flush with its parent.
*/
.wrapper-flush {
width: 100%;
}
/**
* Remove any width constraints from the `.wrapper`.
*/
.wrapper-full-bleed {
width: auto;
max-width: none;
}
/* ========================================================================== *\
Layout -> Grids ($layout-grids)
\* ========================================================================== */
/**
* Grid System
* Hat tip to @csswizardry for the `display: inline-block` grid technique.
*
* @link http://cbrac.co/1RvPb53
*/
/**
* Grid containers
* 1. Remove default styles in case `.grid` is on a <ul> or <ol> element.
* 2. Default gutter width.
* 3. Hack to remove `inline-block` whitespace. This causes some issues on pre-
* Jellybean and Jellybean versions of Android
*
* @link http://cbrac.co/1xh3hs0
* @link http://cbrac.co/16xcjcl
*/
.grid {
margin: 0;
/* 1 */
/*px*/ margin-left: -24px;
/*rem*/ margin-left: -1.5rem;
/* 2 */
padding: 0;
/* 1 */
list-style: none;
/* 1 */
font-size: 0;
/* 3 */
}
/**
* Grid items
* 1. Remove default styles in case `.grid-item` is on an <li> element.
* 2. `.grid-item` elements are 100% width by default.
* 3. Default gutter width = @grid-gutter-base.
* 4. Ensure `.grid-item` is aligned to the top of its container.
* 5. Reset font size to the global default.
*/
.grid-item {
display: inline-block;
margin-left: 0;
/* 1 */
width: 100%;
/* 2 */
/*px*/ padding-left: 24px;
/*rem*/ padding-left: 1.5rem;
/* 3 */
vertical-align: top;
/* 4 */
/*px*/ font-size: 16px;
/*rem*/ font-size: 1rem;
/* 5 */
}
/**
* Grid items rendering order
* .grid-ltr = left-to-right (default)
* .grid-rtl = right-to-left
*/
.grid-ltr {
direction: ltr;
text-align: left;
}
.grid-ltr > .grid-item {
direction: rtl;
text-align: left;
}
.grid-rtl {
direction: rtl;
text-align: left;
}
.grid-rtl > .grid-item {
direction: ltr;
text-align: left;
}
@media (min-width: 480px) {
.xs-grid-ltr {
direction: ltr;
text-align: left;
}
.xs-grid-ltr > .grid-item {
direction: rtl;
text-align: left;
}
.xs-grid-rtl {
direction: rtl;
text-align: left;
}
.xs-grid-rtl > .grid-item {
direction: ltr;
text-align: left;
}
}
@media (min-width: 600px) {
.sm-grid-ltr {
direction: ltr;
text-align: left;
}
.sm-grid-ltr > .grid-item {
direction: rtl;
text-align: left;
}
.sm-grid-rtl {
direction: rtl;
text-align: left;
}
.sm-grid-rtl > .grid-item {
direction: ltr;
text-align: left;
}
}
@media (min-width: 768px) {
.md-grid-ltr {
direction: ltr;
text-align: left;
}
.md-grid-ltr > .grid-item {
direction: rtl;
text-align: left;
}
.md-grid-rtl {
direction: rtl;
text-align: left;
}
.md-grid-rtl > .grid-item {
direction: ltr;
text-align: left;
}
}
@media (min-width: 960px) {
.lg-grid-ltr {
direction: ltr;
text-align: left;
}
.lg-grid-ltr > .grid-item {
direction: rtl;
text-align: left;
}
.lg-grid-rtl {
direction: rtl;
text-align: left;
}
.lg-grid-rtl > .grid-item {
direction: ltr;
text-align: left;
}
}
@media (min-width: 1140px) {
.xl-grid-ltr {
direction: ltr;
text-align: left;
}
.xl-grid-ltr > .grid-item {
direction: rtl;
text-align: left;
}
.xl-grid-rtl {
direction: rtl;
text-align: left;
}
.xl-grid-rtl > .grid-item {
direction: ltr;
text-align: left;
}
}
@media (min-width: 1380px) {
.xxl-grid-ltr {
direction: ltr;
text-align: left;
}
.xxl-grid-ltr > .grid-item {
direction: rtl;
text-align: left;
}
.xxl-grid-rtl {
direction: rtl;
text-align: left;
}
.xxl-grid-rtl > .grid-item {
direction: ltr;
text-align: left;
}
}
/**
* Grid gutters
*/
.gutter-0,
.gutter-none {
margin-left: 0;
}
.gutter-0 > .grid-item,
.gutter-none > .grid-item {
padding-left: 0;
}
.gutter-1px {
/*px*/ margin-left: -1px;
/*rem*/ margin-left: -0.0625rem;
}
.gutter-1px > .grid-item {
/*px*/ padding-left: 1px;
/*rem*/ padding-left: 0.0625rem;
}
[class~="gutter-1/2"],
.gutter-half {
/*px*/ margin-left: -12px;
/*rem*/ margin-left: -0.75rem;
}
[class~="gutter-1/2"] > .grid-item,
.gutter-half > .grid-item {
/*px*/ padding-left: 12px;
/*rem*/ padding-left: 0.75rem;
}
.gutter-1,
.gutter-whole {
/*px*/ margin-left: -24px;
/*rem*/ margin-left: -1.5rem;
}
.gutter-1 > .grid-item,
.gutter-whole > .grid-item {
/*px*/ padding-left: 24px;
/*rem*/ padding-left: 1.5rem;
}
.gutter-2,
.gutter-double {
/*px*/ margin-left: -48px;
/*rem*/ margin-left: -3rem;
}
.gutter-2 > .grid-item,
.gutter-double > .grid-item {
/*px*/ padding-left: 48px;
/*rem*/ padding-left: 3rem;
}
@media (min-width: 480px) {
.xs-gutter-0,
.xs-gutter-none {
margin-left: 0;
}
.xs-gutter-0 > .grid-item,
.xs-gutter-none > .grid-item {
padding-left: 0;
}
.xs-gutter-1px {
/*px*/ margin-left: -1px;
/*rem*/ margin-left: -0.0625rem;
}
.xs-gutter-1px > .grid-item {
/*px*/ padding-left: 1px;
/*rem*/ padding-left: 0.0625rem;
}
[class~="xs-gutter-1/2"],
.xs-gutter-half {
/*px*/ margin-left: -12px;
/*rem*/ margin-left: -0.75rem;
}
[class~="xs-gutter-1/2"] > .grid-item,
.xs-gutter-half > .grid-item {
/*px*/ padding-left: 12px;
/*rem*/ padding-left: 0.75rem;
}
.xs-gutter-1,
.xs-gutter-whole {
/*px*/ margin-left: -24px;
/*rem*/ margin-left: -1.5rem;
}
.xs-gutter-1 > .grid-item,
.xs-gutter-whole > .grid-item {
/*px*/ padding-left: 24px;
/*rem*/ padding-left: 1.5rem;
}
.xs-gutter-2,
.xs-gutter-double {
/*px*/ margin-left: -48px;
/*rem*/ margin-left: -3rem;
}
.xs-gutter-2 > .grid-item,
.xs-gutter-double > .grid-item {
/*px*/ padding-left: 48px;
/*rem*/ padding-left: 3rem;
}
}
@media (min-width: 600px) {
.sm-gutter-0,
.sm-gutter-none {
margin-left: 0;
}
.sm-gutter-0 > .grid-item,
.sm-gutter-none > .grid-item {
padding-left: 0;
}
.sm-gutter-1px {
/*px*/ margin-left: -1px;
/*rem*/ margin-left: -0.0625rem;
}
.sm-gutter-1px > .grid-item {
/*px*/ padding-left: 1px;
/*rem*/ padding-left: 0.0625rem;
}
[class~="sm-gutter-1/2"],
.sm-gutter-half {
/*px*/ margin-left: -12px;
/*rem*/ margin-left: -0.75rem;
}
[class~="sm-gutter-1/2"] > .grid-item,
.sm-gutter-half > .grid-item {
/*px*/ padding-left: 12px;
/*rem*/ padding-left: 0.75rem;
}
.sm-gutter-1,
.sm-gutter-whole {
/*px*/ margin-left: -24px;
/*rem*/ margin-left: -1.5rem;
}
.sm-gutter-1 > .grid-item,
.sm-gutter-whole > .grid-item {
/*px*/ padding-left: 24px;
/*rem*/ padding-left: 1.5rem;
}
.sm-gutter-2,
.sm-gutter-double {
/*px*/ margin-left: -48px;
/*rem*/ margin-left: -3rem;
}
.sm-gutter-2 > .grid-item,
.sm-gutter-double > .grid-item {
/*px*/ padding-left: 48px;
/*rem*/ padding-left: 3rem;
}
}
@media (min-width: 768px) {
.md-gutter-0,
.md-gutter-none {
margin-left: 0;
}
.md-gutter-0 > .grid-item,
.md-gutter-none > .grid-item {
padding-left: 0;
}
.md-gutter-1px {
/*px*/ margin-left: -1px;
/*rem*/ margin-left: -0.0625rem;
}
.md-gutter-1px > .grid-item {
/*px*/ padding-left: 1px;
/*rem*/ padding-left: 0.0625rem;
}
[class~="md-gutter-1/2"],
.md-gutter-half {
/*px*/ margin-left: -12px;
/*rem*/ margin-left: -0.75rem;
}
[class~="md-gutter-1/2"] > .grid-item,
.md-gutter-half > .grid-item {
/*px*/ padding-left: 12px;
/*rem*/ padding-left: 0.75rem;
}
.md-gutter-1,
.md-gutter-whole {
/*px*/ margin-left: -24px;
/*rem*/ margin-left: -1.5rem;
}
.md-gutter-1 > .grid-item,
.md-gutter-whole > .grid-item {
/*px*/ padding-left: 24px;
/*rem*/ padding-left: 1.5rem;
}
.md-gutter-2,
.md-gutter-double {
/*px*/ margin-left: -48px;
/*rem*/ margin-left: -3rem;
}
.md-gutter-2 > .grid-item,
.md-gutter-double > .grid-item {
/*px*/ padding-left: 48px;
/*rem*/ padding-left: 3rem;
}
}
@media (min-width: 960px) {
.lg-gutter-0,
.lg-gutter-none {
margin-left: 0;
}
.lg-gutter-0 > .grid-item,
.lg-gutter-none > .grid-item {
padding-left: 0;
}
.lg-gutter-1px {
/*px*/ margin-left: -1px;
/*rem*/ margin-left: -0.0625rem;
}
.lg-gutter-1px > .grid-item {
/*px*/ padding-left: 1px;
/*rem*/ padding-left: 0.0625rem;
}
[class~="lg-gutter-1/2"],
.lg-gutter-half {
/*px*/ margin-left: -12px;
/*rem*/ margin-left: -0.75rem;
}
[class~="lg-gutter-1/2"] > .grid-item,
.lg-gutter-half > .grid-item {
/*px*/ padding-left: 12px;
/*rem*/ padding-left: 0.75rem;
}
.lg-gutter-1,
.lg-gutter-whole {
/*px*/ margin-left: -24px;
/*rem*/ margin-left: -1.5rem;
}
.lg-gutter-1 > .grid-item,
.lg-gutter-whole > .grid-item {
/*px*/ padding-left: 24px;
/*rem*/ padding-left: 1.5rem;
}
.lg-gutter-2,
.lg-gutter-double {
/*px*/ margin-left: -48px;
/*rem*/ margin-left: -3rem;
}
.lg-gutter-2 > .grid-item,
.lg-gutter-double > .grid-item {
/*px*/ padding-left: 48px;
/*rem*/ padding-left: 3rem;
}
}
@media (min-width: 1140px) {
.xl-gutter-0,
.xl-gutter-none {
margin-left: 0;
}
.xl-gutter-0 > .grid-item,
.xl-gutter-none > .grid-item {
padding-left: 0;
}
.xl-gutter-1px {
/*px*/ margin-left: -1px;
/*rem*/ margin-left: -0.0625rem;
}
.xl-gutter-1px > .grid-item {
/*px*/ padding-left: 1px;
/*rem*/ padding-left: 0.0625rem;
}
[class~="xl-gutter-1/2"],
.xl-gutter-half {
/*px*/ margin-left: -12px;
/*rem*/ margin-left: -0.75rem;
}
[class~="xl-gutter-1/2"] > .grid-item,
.xl-gutter-half > .grid-item {
/*px*/ padding-left: 12px;
/*rem*/ padding-left: 0.75rem;
}
.xl-gutter-1,
.xl-gutter-whole {
/*px*/ margin-left: -24px;
/*rem*/ margin-left: -1.5rem;
}
.xl-gutter-1 > .grid-item,
.xl-gutter-whole > .grid-item {
/*px*/ padding-left: 24px;
/*rem*/ padding-left: 1.5rem;
}
.xl-gutter-2,
.xl-gutter-double {
/*px*/ margin-left: -48px;
/*rem*/ margin-left: -3rem;
}
.xl-gutter-2 > .grid-item,
.xl-gutter-double > .grid-item {
/*px*/ padding-left: 48px;
/*rem*/ padding-left: 3rem;
}
}
@media (min-width: 1380px) {
.xxl-gutter-0,
.xxl-gutter-none {
margin-left: 0;
}
.xxl-gutter-0 > .grid-item,
.xxl-gutter-none > .grid-item {
padding-left: 0;
}
.xxl-gutter-1px {
/*px*/ margin-left: -1px;
/*rem*/ margin-left: -0.0625rem;
}
.xxl-gutter-1px > .grid-item {
/*px*/ padding-left: 1px;
/*rem*/ padding-left: 0.0625rem;
}
[class~="xxl-gutter-1/2"],
.xxl-gutter-half {
/*px*/ margin-left: -12px;
/*rem*/ margin-left: -0.75rem;
}
[class~="xxl-gutter-1/2"] > .grid-item,
.xxl-gutter-half > .grid-item {
/*px*/ padding-left: 12px;
/*rem*/ padding-left: 0.75rem;
}
.xxl-gutter-1,
.xxl-gutter-whole {
/*px*/ margin-left: -24px;
/*rem*/ margin-left: -1.5rem;
}
.xxl-gutter-1 > .grid-item,
.xxl-gutter-whole > .grid-item {
/*px*/ padding-left: 24px;
/*rem*/ padding-left: 1.5rem;
}
.xxl-gutter-2,
.xxl-gutter-double {
/*px*/ margin-left: -48px;
/*rem*/ margin-left: -3rem;
}
.xxl-gutter-2 > .grid-item,
.xxl-gutter-double > .grid-item {
/*px*/ padding-left: 48px;
/*rem*/ padding-left: 3rem;
}
}
/**
* Grid item alignment
*/
.grid-align-top > .grid-item {
vertical-align: top;
}
.grid-align-middle > .grid-item {
vertical-align: middle;
}
.grid-align-bottom > .grid-item {
vertical-align: bottom;
}
.grid-align-left {
text-align: left;
}
.grid-align-left > .grid-item {
text-align: left;
}
.grid-align-center {
text-align: center;
}
.grid-align-center > .grid-item {
text-align: left;
}
.grid-align-right {
text-align: right;
}
.grid-align-right > .grid-item {
text-align: left;
}
/**
* Grid item "shrink wrap"
*
* Force `.grid-item` to be the width of its content.
*/
.grid-shrink-wrap > .grid-item {
width: auto;
}
/* ========================================================================== *\
Utilities -> Display ($utilities-display)
\* ========================================================================== */
.dn {
display: none !important;
}
.di {
display: inline !important;
}
.db {
display: block !important;
}
/**
* 1. Fix Firefox bug where an <img> styled with `max-width: 100%` inside a
* parent styled `inline-block` displays at its default size, not 100% of the
* parent container.
*/
.dib {
display: inline-block !important;
max-width: 100% !important;
/* 1 */
}
.dit {
display: inline-table !important;
}
.dt {
display: table !important;
table-layout: fixed !important;
width: 100% !important;
}
.dtr {
display: table-row !important;
}
.dtrg {
display: table-row-group !important;
}
.dtc {
display: table-cell !important;
}
.dtcol {
display: table-column !important;
}
.dtcolg {
display: table-column-group !important;
}
@media (min-width: 480px) {
.xs-dn {
display: none !important;
}
.xs-di {
display: inline !important;
}
.xs-db {
display: block !important;
}
/**
* 1. Fix Firefox bug where an <img> styled with `max-width: 100%` inside a
* parent styled `inline-block` displays at its default size, not 100% of the
* parent container.
*/
.xs-dib {
display: inline-block !important;
max-width: 100% !important;
/* 1 */
}
.xs-dit {
display: inline-table !important;
}
.xs-dt {
display: table !important;
table-layout: fixed !important;
width: 100% !important;
}
.xs-dtr {
display: table-row !important;
}
.xs-dtrg {
display: table-row-group !important;
}
.xs-dtc {
display: table-cell !important;
}
.xs-dtcol {
display: table-column !important;
}
.xs-dtcolg {
display: table-column-group !important;
}
}
@media (min-width: 600px) {
.sm-dn {
display: none !important;
}
.sm-di {
display: inline !important;
}
.sm-db {
display: block !important;
}
/**
* 1. Fix Firefox bug where an <img> styled with `max-width: 100%` inside a
* parent styled `inline-block` displays at its default size, not 100% of the
* parent container.
*/
.sm-dib {
display: inline-block !important;
max-width: 100% !important;
/* 1 */
}
.sm-dit {
display: inline-table !important;
}
.sm-dt {
display: table !important;
table-layout: fixed !important;
width: 100% !important;
}
.sm-dtr {
display: table-row !important;
}
.sm-dtrg {
display: table-row-group !important;
}
.sm-dtc {
display: table-cell !important;
}
.sm-dtcol {
display: table-column !important;
}
.sm-dtcolg {
display: table-column-group !important;
}
}
@media (min-width: 768px) {
.md-dn {
display: none !important;
}
.md-di {
display: inline !important;
}
.md-db {
display: block !important;
}
/**
* 1. Fix Firefox bug where an <img> styled with `max-width: 100%` inside a
* parent styled `inline-block` displays at its default size, not 100% of the
* parent container.
*/
.md-dib {
display: inline-block !important;
max-width: 100% !important;
/* 1 */
}
.md-dit {
display: inline-table !important;
}
.md-dt {
display: table !important;
table-layout: fixed !important;
width: 100% !important;
}
.md-dtr {
display: table-row !important;
}
.md-dtrg {
display: table-row-group !important;
}
.md-dtc {
display: table-cell !important;
}
.md-dtcol {
display: table-column !important;
}
.md-dtcolg {
display: table-column-group !important;
}
}
@media (min-width: 960px) {
.lg-dn {
display: none !important;
}
.lg-di {
display: inline !important;
}
.lg-db {
display: block !important;
}
/**
* 1. Fix Firefox bug where an <img> styled with `max-width: 100%` inside a
* parent styled `inline-block` displays at its default size, not 100% of the
* parent container.
*/
.lg-dib {
display: inline-block !important;
max-width: 100% !important;
/* 1 */
}
.lg-dit {
display: inline-table !important;
}
.lg-dt {
display: table !important;
table-layout: fixed !important;
width: 100% !important;
}
.lg-dtr {
display: table-row !important;
}
.lg-dtrg {
display: table-row-group !important;
}
.lg-dtc {
display: table-cell !important;
}
.lg-dtcol {
display: table-column !important;
}
.lg-dtcolg {
display: table-column-group !important;
}
}
@media (min-width: 1140px) {
.xl-dn {
display: none !important;
}
.xl-di {
display: inline !important;
}
.xl-db {
display: block !important;
}
/**
* 1. Fix Firefox bug where an <img> styled with `max-width: 100%` inside a
* parent styled `inline-block` displays at its default size, not 100% of the
* parent container.
*/
.xl-dib {
display: inline-block !important;
max-width: 100% !important;
/* 1 */
}
.xl-dit {
display: inline-table !important;
}
.xl-dt {
display: table !important;
table-layout: fixed !important;
width: 100% !important;
}
.xl-dtr {
display: table-row !important;
}
.xl-dtrg {
display: table-row-group !important;
}
.xl-dtc {
display: table-cell !important;
}
.xl-dtcol {
display: table-column !important;
}
.xl-dtcolg {
display: table-column-group !important;
}
}
@media (min-width: 1380px) {
.xxl-dn {
display: none !important;
}
.xxl-di {
display: inline !important;
}
.xxl-db {
display: block !important;
}
/**
* 1. Fix Firefox bug where an <img> styled with `max-width: 100%` inside a
* parent styled `inline-block` displays at its default size, not 100% of the
* parent container.
*/
.xxl-dib {
display: inline-block !important;
max-width: 100% !important;
/* 1 */
}
.xxl-dit {
display: inline-table !important;
}
.xxl-dt {
display: table !important;
table-layout: fixed !important;
width: 100% !important;
}
.xxl-dtr {
display: table-row !important;
}
.xxl-dtrg {
display: table-row-group !important;
}
.xxl-dtc {
display: table-cell !important;
}
.xxl-dtcol {
display: table-column !important;
}
.xxl-dtcolg {
display: table-column-group !important;
}
}
/* ========================================================================== *\
Utilities -> Font Sizes ($utilities-font-sizes)
\* ========================================================================== */
/**
* Hat tip to @csswizardry for the +/- technique.
*
* @link http://cbrac.co/1Pd1ZKl
*/
.fz--- {
/*px*/ font-size: 12px !important;
/*rem*/ font-size: 0.75rem !important;
}
.fz-- {
/*px*/ font-size: 13px !important;
/*rem*/ font-size: 0.8125rem !important;
}
.fz- {
/*px*/ font-size: 14px !important;
/*rem*/ font-size: 0.875rem !important;
}
.fz {
/*px*/ font-size: 16px !important;
/*rem*/ font-size: 1rem !important;
}
.fz\+ {
/*px*/ font-size: 18px !important;
/*rem*/ font-size: 1.125rem !important;
}
.fz\+\+ {
/*px*/ font-size: 19px !important;
/*rem*/ font-size: 1.1875rem !important;
}
.fz\+\+\+ {
/*px*/ font-size: 20px !important;
/*rem*/ font-size: 1.25rem !important;
}
.fz100 {
font-size: 100% !important;
}
.fz0 {
font-size: 0 !important;
}
@media (min-width: 480px) {
.xs-fz--- {
/*px*/ font-size: 12px !important;
/*rem*/ font-size: 0.75rem !important;
}
.xs-fz-- {
/*px*/ font-size: 13px !important;
/*rem*/ font-size: 0.8125rem !important;
}
.xs-fz- {
/*px*/ font-size: 14px !important;
/*rem*/ font-size: 0.875rem !important;
}
.xs-fz {
/*px*/ font-size: 16px !important;
/*rem*/ font-size: 1rem !important;
}
.xs-fz\+ {
/*px*/ font-size: 18px !important;
/*rem*/ font-size: 1.125rem !important;
}
.xs-fz\+\+ {
/*px*/ font-size: 19px !important;
/*rem*/ font-size: 1.1875rem !important;
}
.xs-fz\+\+\+ {
/*px*/ font-size: 20px !important;
/*rem*/ font-size: 1.25rem !important;
}
.xs-fz100 {
font-size: 100% !important;
}
.xs-fz0 {
font-size: 0 !important;
}
}
@media (min-width: 600px) {
.sm-fz--- {
/*px*/ font-size: 12px !important;
/*rem*/ font-size: 0.75rem !important;
}
.sm-fz-- {
/*px*/ font-size: 13px !important;
/*rem*/ font-size: 0.8125rem !important;
}
.sm-fz- {
/*px*/ font-size: 14px !important;
/*rem*/ font-size: 0.875rem !important;
}
.sm-fz {
/*px*/ font-size: 16px !important;
/*rem*/ font-size: 1rem !important;
}
.sm-fz\+ {
/*px*/ font-size: 18px !important;
/*rem*/ font-size: 1.125rem !important;
}
.sm-fz\+\+ {
/*px*/ font-size: 19px !important;
/*rem*/ font-size: 1.1875rem !important;
}
.sm-fz\+\+\+ {
/*px*/ font-size: 20px !important;
/*rem*/ font-size: 1.25rem !important;
}
.sm-fz100 {
font-size: 100% !important;
}
.sm-fz0 {
font-size: 0 !important;
}
}
@media (min-width: 768px) {
.md-fz--- {
/*px*/ font-size: 12px !important;
/*rem*/ font-size: 0.75rem !important;
}
.md-fz-- {
/*px*/ font-size: 13px !important;
/*rem*/ font-size: 0.8125rem !important;
}
.md-fz- {
/*px*/ font-size: 14px !important;
/*rem*/ font-size: 0.875rem !important;
}
.md-fz {
/*px*/ font-size: 16px !important;
/*rem*/ font-size: 1rem !important;
}
.md-fz\+ {
/*px*/ font-size: 18px !important;
/*rem*/ font-size: 1.125rem !important;
}
.md-fz\+\+ {
/*px*/ font-size: 19px !important;
/*rem*/ font-size: 1.1875rem !important;
}
.md-fz\+\+\+ {
/*px*/ font-size: 20px !important;
/*rem*/ font-size: 1.25rem !important;
}
.md-fz100 {
font-size: 100% !important;
}
.md-fz0 {
font-size: 0 !important;
}
}
@media (min-width: 960px) {
.lg-fz--- {
/*px*/ font-size: 12px !important;
/*rem*/ font-size: 0.75rem !important;
}
.lg-fz-- {
/*px*/ font-size: 13px !important;
/*rem*/ font-size: 0.8125rem !important;
}
.lg-fz- {
/*px*/ font-size: 14px !important;
/*rem*/ font-size: 0.875rem !important;
}
.lg-fz {
/*px*/ font-size: 16px !important;
/*rem*/ font-size: 1rem !important;
}
.lg-fz\+ {
/*px*/ font-size: 18px !important;
/*rem*/ font-size: 1.125rem !important;
}
.lg-fz\+\+ {
/*px*/ font-size: 19px !important;
/*rem*/ font-size: 1.1875rem !important;
}
.lg-fz\+\+\+ {
/*px*/ font-size: 20px !important;
/*rem*/ font-size: 1.25rem !important;
}
.lg-fz100 {
font-size: 100% !important;
}
.lg-fz0 {
font-size: 0 !important;
}
}
@media (min-width: 1140px) {
.xl-fz--- {
/*px*/ font-size: 12px !important;
/*rem*/ font-size: 0.75rem !important;
}
.xl-fz-- {
/*px*/ font-size: 13px !important;
/*rem*/ font-size: 0.8125rem !important;
}
.xl-fz- {
/*px*/ font-size: 14px !important;
/*rem*/ font-size: 0.875rem !important;
}
.xl-fz {
/*px*/ font-size: 16px !important;
/*rem*/ font-size: 1rem !important;
}
.xl-fz\+ {
/*px*/ font-size: 18px !important;
/*rem*/ font-size: 1.125rem !important;
}
.xl-fz\+\+ {
/*px*/ font-size: 19px !important;
/*rem*/ font-size: 1.1875rem !important;
}
.xl-fz\+\+\+ {
/*px*/ font-size: 20px !important;
/*rem*/ font-size: 1.25rem !important;
}
.xl-fz100 {
font-size: 100% !important;
}
.xl-fz0 {
font-size: 0 !important;
}
}
@media (min-width: 1380px) {
.xxl-fz--- {
/*px*/ font-size: 12px !important;
/*rem*/ font-size: 0.75rem !important;
}
.xxl-fz-- {
/*px*/ font-size: 13px !important;
/*rem*/ font-size: 0.8125rem !important;
}
.xxl-fz- {
/*px*/ font-size: 14px !important;
/*rem*/ font-size: 0.875rem !important;
}
.xxl-fz {
/*px*/ font-size: 16px !important;
/*rem*/ font-size: 1rem !important;
}
.xxl-fz\+ {
/*px*/ font-size: 18px !important;
/*rem*/ font-size: 1.125rem !important;
}
.xxl-fz\+\+ {
/*px*/ font-size: 19px !important;
/*rem*/ font-size: 1.1875rem !important;
}
.xxl-fz\+\+\+ {
/*px*/ font-size: 20px !important;
/*rem*/ font-size: 1.25rem !important;
}
.xxl-fz100 {
font-size: 100% !important;
}
.xxl-fz0 {
font-size: 0 !important;
}
}
/* ========================================================================== *\
Utilities -> Floats ($utilities-floats)
\* ========================================================================== */
.fl {
float: left !important;
}
.fr {
float: right !important;
}
.fn {
float: none !important;
}
@media (min-width: 480px) {
.xs-fl {
float: left !important;
}
.xs-fr {
float: right !important;
}
.xs-fn {
float: none !important;
}
}
@media (min-width: 600px) {
.sm-fl {
float: left !important;
}
.sm-fr {
float: right !important;
}
.sm-fn {
float: none !important;
}
}
@media (min-width: 768px) {
.md-fl {
float: left !important;
}
.md-fr {
float: right !important;
}
.md-fn {
float: none !important;
}
}
@media (min-width: 960px) {
.lg-fl {
float: left !important;
}
.lg-fr {
float: right !important;
}
.lg-fn {
float: none !important;
}
}
@media (min-width: 1140px) {
.xl-fl {
float: left !important;
}
.xl-fr {
float: right !important;
}
.xl-fn {
float: none !important;
}
}
@media (min-width: 1380px) {
.xxl-fl {
float: left !important;
}
.xxl-fr {
float: right !important;
}
.xxl-fn {
float: none !important;
}
}
/**
* Clearfix
*
* 1. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
* 2. 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 are clearfixed.
*
* @link http://cbrac.co/1FT6aqC
*/
.cf:before,
.cf:after {
display: table;
content: " ";
}
.cf:after {
clear: both;
}
/**
* Clear floats with an extra markup element.
*
* @link http://cbrac.co/SFv1Ua
*/
.clear {
display: block;
visibility: hidden;
clear: both;
overflow: hidden;
width: 0;
height: 0;
}
/* ========================================================================== *\
Utilities -> Margins ($utilities-margins)
\* ========================================================================== */
/**
* Hat tip to @csswizardry for the +/- technique.
*
* @link http://cbrac.co/1Pd1ZKl
*/
.m {
/*px*/ margin: 24px !important;
/*rem*/ margin: 1.5rem !important;
}
.mt {
/*px*/ margin-top: 24px !important;
/*rem*/ margin-top: 1.5rem !important;
}
.mr {
/*px*/ margin-right: 24px !important;
/*rem*/ margin-right: 1.5rem !important;
}
.mb {
/*px*/ margin-bottom: 24px !important;
/*rem*/ margin-bottom: 1.5rem !important;
}
.ml {
/*px*/ margin-left: 24px !important;
/*rem*/ margin-left: 1.5rem !important;
}
.mh {
/*px*/ margin-right: 24px !important;
/*rem*/ margin-right: 1.5rem !important;
/*px*/ margin-left: 24px !important;
/*rem*/ margin-left: 1.5rem !important;
}
.mv {
/*px*/ margin-top: 24px !important;
/*rem*/ margin-top: 1.5rem !important;
/*px*/ margin-bottom: 24px !important;
/*rem*/ margin-bottom: 1.5rem !important;
}
.m-- {
/*px*/ margin: 6px !important;
/*rem*/ margin: 0.375rem !important;
}
.mt-- {
/*px*/ margin-top: 6px !important;
/*rem*/ margin-top: 0.375rem !important;
}
.mr-- {
/*px*/ margin-right: 6px !important;
/*rem*/ margin-right: 0.375rem !important;
}
.mb-- {
/*px*/ margin-bottom: 6px !important;
/*rem*/ margin-bottom: 0.375rem !important;
}
.ml-- {
/*px*/ margin-left: 6px !important;
/*rem*/ margin-left: 0.375rem !important;
}
.mh-- {
/*px*/ margin-right: 6px !important;
/*rem*/ margin-right: 0.375rem !important;
/*px*/ margin-left: 6px !important;
/*rem*/ margin-left: 0.375rem !important;
}
.mv-- {
/*px*/ margin-top: 6px !important;
/*rem*/ margin-top: 0.375rem !important;
/*px*/ margin-bottom: 6px !important;
/*rem*/ margin-bottom: 0.375rem !important;
}
.m- {
/*px*/ margin: 12px !important;
/*rem*/ margin: 0.75rem !important;
}
.mt- {
/*px*/ margin-top: 12px !important;
/*rem*/ margin-top: 0.75rem !important;
}
.mr- {
/*px*/ margin-right: 12px !important;
/*rem*/ margin-right: 0.75rem !important;
}
.mb- {
/*px*/ margin-bottom: 12px !important;
/*rem*/ margin-bottom: 0.75rem !important;
}
.ml- {
/*px*/ margin-left: 12px !important;
/*rem*/ margin-left: 0.75rem !important;
}
.mh- {
/*px*/ margin-right: 12px !important;
/*rem*/ margin-right: 0.75rem !important;
/*px*/ margin-left: 12px !important;
/*rem*/ margin-left: 0.75rem !important;
}
.mv- {
/*px*/ margin-top: 12px !important;
/*rem*/ margin-top: 0.75rem !important;
/*px*/ margin-bottom: 12px !important;
/*rem*/ margin-bottom: 0.75rem !important;
}
.m\+ {
/*px*/ margin: 48px !important;
/*rem*/ margin: 3rem !important;
}
.mt\+ {
/*px*/ margin-top: 48px !important;
/*rem*/ margin-top: 3rem !important;
}
.mr\+ {
/*px*/ margin-right: 48px !important;
/*rem*/ margin-right: 3rem !important;
}
.mb\+ {
/*px*/ margin-bottom: 48px !important;
/*rem*/ margin-bottom: 3rem !important;
}
.ml\+ {
/*px*/ margin-left: 48px !important;
/*rem*/ margin-left: 3rem !important;
}
.mh\+ {
/*px*/ margin-right: 48px !important;
/*rem*/ margin-right: 3rem !important;
/*px*/ margin-left: 48px !important;
/*rem*/ margin-left: 3rem !important;
}
.mv\+ {
/*px*/ margin-top: 48px !important;
/*rem*/ margin-top: 3rem !important;
/*px*/ margin-bottom: 48px !important;
/*rem*/ margin-bottom: 3rem !important;
}
.m\+\+ {
/*px*/ margin: 96px !important;
/*rem*/ margin: 6rem !important;
}
.mt\+\+ {
/*px*/ margin-top: 96px !important;
/*rem*/ margin-top: 6rem !important;
}
.mr\+\+ {
/*px*/ margin-right: 96px !important;
/*rem*/ margin-right: 6rem !important;
}
.mb\+\+ {
/*px*/ margin-bottom: 96px !important;
/*rem*/ margin-bottom: 6rem !important;
}
.ml\+\+ {
/*px*/ margin-left: 96px !important;
/*rem*/ margin-left: 6rem !important;
}
.mh\+\+ {
/*px*/ margin-right: 96px !important;
/*rem*/ margin-right: 6rem !important;
/*px*/ margin-left: 96px !important;
/*rem*/ margin-left: 6rem !important;
}
.mv\+\+ {
/*px*/ margin-top: 96px !important;
/*rem*/ margin-top: 6rem !important;
/*px*/ margin-bottom: 96px !important;
/*rem*/ margin-bottom: 6rem !important;
}
.m0 {
/*px*/ margin: 0 !important;
/*rem*/ margin: 0 !important;
}
.mt0 {
/*px*/ margin-top: 0 !important;
/*rem*/ margin-top: 0 !important;
}
.mr0 {
/*px*/ margin-right: 0 !important;
/*rem*/ margin-right: 0 !important;
}
.mb0 {
/*px*/ margin-bottom: 0 !important;
/*rem*/ margin-bottom: 0 !important;
}
.ml0 {
/*px*/ margin-left: 0 !important;
/*rem*/ margin-left: 0 !important;
}
.mh0 {
/*px*/ margin-right: 0 !important;
/*rem*/ margin-right: 0 !important;
/*px*/ margin-left: 0 !important;
/*rem*/ margin-left: 0 !important;
}
.mv0 {
/*px*/ margin-top: 0 !important;
/*rem*/ margin-top: 0 !important;
/*px*/ margin-bottom: 0 !important;
/*rem*/ margin-bottom: 0 !important;
}
@media (min-width: 480px) {
.xs-m {
/*px*/ margin: 24px !important;
/*rem*/ margin: 1.5rem !important;
}
.xs-mt {
/*px*/ margin-top: 24px !important;
/*rem*/ margin-top: 1.5rem !important;
}
.xs-mr {
/*px*/ margin-right: 24px !important;
/*rem*/ margin-right: 1.5rem !important;
}
.xs-mb {
/*px*/ margin-bottom: 24px !important;
/*rem*/ margin-bottom: 1.5rem !important;
}
.xs-ml {
/*px*/ margin-left: 24px !important;
/*rem*/ margin-left: 1.5rem !important;
}
.xs-mh {
/*px*/ margin-right: 24px !important;
/*rem*/ margin-right: 1.5rem !important;
/*px*/ margin-left: 24px !important;
/*rem*/ margin-left: 1.5rem !important;
}
.xs-mv {
/*px*/ margin-top: 24px !important;
/*rem*/ margin-top: 1.5rem !important;
/*px*/ margin-bottom: 24px !important;
/*rem*/ margin-bottom: 1.5rem !important;
}
.xs-m-- {
/*px*/ margin: 6px !important;
/*rem*/ margin: 0.375rem !important;
}
.xs-mt-- {
/*px*/ margin-top: 6px !important;
/*rem*/ margin-top: 0.375rem !important;
}
.xs-mr-- {
/*px*/ margin-right: 6px !important;
/*rem*/ margin-right: 0.375rem !important;
}
.xs-mb-- {
/*px*/ margin-bottom: 6px !important;
/*rem*/ margin-bottom: 0.375rem !important;
}
.xs-ml-- {
/*px*/ margin-left: 6px !important;
/*rem*/ margin-left: 0.375rem !important;
}
.xs-mh-- {
/*px*/ margin-right: 6px !important;
/*rem*/ margin-right: 0.375rem !important;
/*px*/ margin-left: 6px !important;
/*rem*/ margin-left: 0.375rem !important;
}
.xs-mv-- {
/*px*/ margin-top: 6px !important;
/*rem*/ margin-top: 0.375rem !important;
/*px*/ margin-bottom: 6px !important;
/*rem*/ margin-bottom: 0.375rem !important;
}
.xs-m- {
/*px*/ margin: 12px !important;
/*rem*/ margin: 0.75rem !important;
}
.xs-mt- {
/*px*/ margin-top: 12px !important;
/*rem*/ margin-top: 0.75rem !important;
}
.xs-mr- {
/*px*/ margin-right: 12px !important;
/*rem*/ margin-right: 0.75rem !important;
}
.xs-mb- {
/*px*/ margin-bottom: 12px !important;
/*rem*/ margin-bottom: 0.75rem !important;
}
.xs-ml- {
/*px*/ margin-left: 12px !important;
/*rem*/ margin-left: 0.75rem !important;
}
.xs-mh- {
/*px*/ margin-right: 12px !important;
/*rem*/ margin-right: 0.75rem !important;
/*px*/ margin-left: 12px !important;
/*rem*/ margin-left: 0.75rem !important;
}
.xs-mv- {
/*px*/ margin-top: 12px !important;
/*rem*/ margin-top: 0.75rem !important;
/*px*/ margin-bottom: 12px !important;
/*rem*/ margin-bottom: 0.75rem !important;
}
.xs-m\+ {
/*px*/ margin: 48px !important;
/*rem*/ margin: 3rem !important;
}
.xs-mt\+ {
/*px*/ margin-top: 48px !important;
/*rem*/ margin-top: 3rem !important;
}
.xs-mr\+ {
/*px*/ margin-right: 48px !important;
/*rem*/ margin-right: 3rem !important;
}
.xs-mb\+ {
/*px*/ margin-bottom: 48px !important;
/*rem*/ margin-bottom: 3rem !important;
}
.xs-ml\+ {
/*px*/ margin-left: 48px !important;
/*rem*/ margin-left: 3rem !important;
}
.xs-mh\+ {
/*px*/ margin-right: 48px !important;
/*rem*/ margin-right: 3rem !important;
/*px*/ margin-left: 48px !important;
/*rem*/ margin-left: 3rem !important;
}
.xs-mv\+ {
/*px*/ margin-top: 48px !important;
/*rem*/ margin-top: 3rem !important;
/*px*/ margin-bottom: 48px !important;
/*rem*/ margin-bottom: 3rem !important;
}
.xs-m\+\+ {
/*px*/ margin: 96px !important;
/*rem*/ margin: 6rem !important;
}
.xs-mt\+\+ {
/*px*/ margin-top: 96px !important;
/*rem*/ margin-top: 6rem !important;
}
.xs-mr\+\+ {
/*px*/ margin-right: 96px !important;
/*rem*/ margin-right: 6rem !important;
}
.xs-mb\+\+ {
/*px*/ margin-bottom: 96px !important;
/*rem*/ margin-bottom: 6rem !important;
}
.xs-ml\+\+ {
/*px*/ margin-left: 96px !important;
/*rem*/ margin-left: 6rem !important;
}
.xs-mh\+\+ {
/*px*/ margin-right: 96px !important;
/*rem*/ margin-right: 6rem !important;
/*px*/ margin-left: 96px !important;
/*rem*/ margin-left: 6rem !important;
}
.xs-mv\+\+ {
/*px*/ margin-top: 96px !important;
/*rem*/ margin-top: 6rem !important;
/*px*/ margin-bottom: 96px !important;
/*rem*/ margin-bottom: 6rem !important;
}
.xs-m0 {
/*px*/ margin: 0 !important;
/*rem*/ margin: 0 !important;
}
.xs-mt0 {
/*px*/ margin-top: 0 !important;
/*rem*/ margin-top: 0 !important;
}
.xs-mr0 {
/*px*/ margin-right: 0 !important;
/*rem*/ margin-right: 0 !important;
}
.xs-mb0 {
/*px*/ margin-bottom: 0 !important;
/*rem*/ margin-bottom: 0 !important;
}
.xs-ml0 {
/*px*/ margin-left: 0 !important;
/*rem*/ margin-left: 0 !important;
}
.xs-mh0 {
/*px*/ margin-right: 0 !important;
/*rem*/ margin-right: 0 !important;
/*px*/ margin-left: 0 !important;
/*rem*/ margin-left: 0 !important;
}
.xs-mv0 {
/*px*/ margin-top: 0 !important;
/*rem*/ margin-top: 0 !important;
/*px*/ margin-bottom: 0 !important;
/*rem*/ margin-bottom: 0 !important;
}
}
@media (min-width: 600px) {
.sm-m {
/*px*/ margin: 24px !important;
/*rem*/ margin: 1.5rem !important;
}
.sm-mt {
/*px*/ margin-top: 24px !important;
/*rem*/ margin-top: 1.5rem !important;
}
.sm-mr {
/*px*/ margin-right: 24px !important;
/*rem*/ margin-right: 1.5rem !important;
}
.sm-mb {
/*px*/ margin-bottom: 24px !important;
/*rem*/ margin-bottom: 1.5rem !important;
}
.sm-ml {
/*px*/ margin-left: 24px !important;
/*rem*/ margin-left: 1.5rem !important;
}
.sm-mh {
/*px*/ margin-right: 24px !important;
/*rem*/ margin-right: 1.5rem !important;
/*px*/ margin-left: 24px !important;
/*rem*/ margin-left: 1.5rem !important;
}
.sm-mv {
/*px*/ margin-top: 24px !important;
/*rem*/ margin-top: 1.5rem !important;
/*px*/ margin-bottom: 24px !important;
/*rem*/ margin-bottom: 1.5rem !important;
}
.sm-m-- {
/*px*/ margin: 6px !important;
/*rem*/ margin: 0.375rem !important;
}
.sm-mt-- {
/*px*/ margin-top: 6px !important;
/*rem*/ margin-top: 0.375rem !important;
}
.sm-mr-- {
/*px*/ margin-right: 6px !important;
/*rem*/ margin-right: 0.375rem !important;
}
.sm-mb-- {
/*px*/ margin-bottom: 6px !important;
/*rem*/ margin-bottom: 0.375rem !important;
}
.sm-ml-- {
/*px*/ margin-left: 6px !important;
/*rem*/ margin-left: 0.375rem !important;
}
.sm-mh-- {
/*px*/ margin-right: 6px !important;
/*rem*/ margin-right: 0.375rem !important;
/*px*/ margin-left: 6px !important;
/*rem*/ margin-left: 0.375rem !important;
}
.sm-mv-- {
/*px*/ margin-top: 6px !important;
/*rem*/ margin-top: 0.375rem !important;
/*px*/ margin-bottom: 6px !important;
/*rem*/ margin-bottom: 0.375rem !important;
}
.sm-m- {
/*px*/ margin: 12px !important;
/*rem*/ margin: 0.75rem !important;
}
.sm-mt- {
/*px*/ margin-top: 12px !important;
/*rem*/ margin-top: 0.75rem !important;
}
.sm-mr- {
/*px*/ margin-right: 12px !important;
/*rem*/ margin-right: 0.75rem !important;
}
.sm-mb- {
/*px*/ margin-bottom: 12px !important;
/*rem*/ margin-bottom: 0.75rem !important;
}
.sm-ml- {
/*px*/ margin-left: 12px !important;
/*rem*/ margin-left: 0.75rem !important;
}
.sm-mh- {
/*px*/ margin-right: 12px !important;
/*rem*/ margin-right: 0.75rem !important;
/*px*/ margin-left: 12px !important;
/*rem*/ margin-left: 0.75rem !important;
}
.sm-mv- {
/*px*/ margin-top: 12px !important;
/*rem*/ margin-top: 0.75rem !important;
/*px*/ margin-bottom: 12px !important;
/*rem*/ margin-bottom: 0.75rem !important;
}
.sm-m\+ {
/*px*/ margin: 48px !important;
/*rem*/ margin: 3rem !important;
}
.sm-mt\+ {
/*px*/ margin-top: 48px !important;
/*rem*/ margin-top: 3rem !important;
}
.sm-mr\+ {
/*px*/ margin-right: 48px !important;
/*rem*/ margin-right: 3rem !important;
}
.sm-mb\+ {
/*px*/ margin-bottom: 48px !important;
/*rem*/ margin-bottom: 3rem !important;
}
.sm-ml\+ {
/*px*/ margin-left: 48px !important;
/*rem*/ margin-left: 3rem !important;
}
.sm-mh\+ {
/*px*/ margin-right: 48px !important;
/*rem*/ margin-right: 3rem !important;
/*px*/ margin-left: 48px !important;
/*rem*/ margin-left: 3rem !important;
}
.sm-mv\+ {
/*px*/ margin-top: 48px !important;
/*rem*/ margin-top: 3rem !important;
/*px*/ margin-bottom: 48px !important;
/*rem*/ margin-bottom: 3rem !important;
}
.sm-m\+\+ {
/*px*/ margin: 96px !important;
/*rem*/ margin: 6rem !important;
}
.sm-mt\+\+ {
/*px*/ margin-top: 96px !important;
/*rem*/ margin-top: 6rem !important;
}
.sm-mr\+\+ {
/*px*/ margin-right: 96px !important;
/*rem*/ margin-right: 6rem !important;
}
.sm-mb\+\+ {
/*px*/ margin-bottom: 96px !important;
/*rem*/ margin-bottom: 6rem !important;
}
.sm-ml\+\+ {
/*px*/ margin-left: 96px !important;
/*rem*/ margin-left: 6rem !important;
}
.sm-mh\+\+ {
/*px*/ margin-right: 96px !important;
/*rem*/ margin-right: 6rem !important;
/*px*/ margin-left: 96px !important;
/*rem*/ margin-left: 6rem !important;
}
.sm-mv\+\+ {
/*px*/ margin-top: 96px !important;
/*rem*/ margin-top: 6rem !important;
/*px*/ margin-bottom: 96px !important;
/*rem*/ margin-bottom: 6rem !important;
}
.sm-m0 {
/*px*/ margin: 0 !important;
/*rem*/ margin: 0 !important;
}
.sm-mt0 {
/*px*/ margin-top: 0 !important;
/*rem*/ margin-top: 0 !important;
}
.sm-mr0 {
/*px*/ margin-right: 0 !important;
/*rem*/ margin-right: 0 !important;
}
.sm-mb0 {
/*px*/ margin-bottom: 0 !important;
/*rem*/ margin-bottom: 0 !important;
}
.sm-ml0 {
/*px*/ margin-left: 0 !important;
/*rem*/ margin-left: 0 !important;
}
.sm-mh0 {
/*px*/ margin-right: 0 !important;
/*rem*/ margin-right: 0 !important;
/*px*/ margin-left: 0 !important;
/*rem*/ margin-left: 0 !important;
}
.sm-mv0 {
/*px*/ margin-top: 0 !important;
/*rem*/ margin-top: 0 !important;
/*px*/ margin-bottom: 0 !important;
/*rem*/ margin-bottom: 0 !important;
}
}
@media (min-width: 768px) {
.md-m {
/*px*/ margin: 24px !important;
/*rem*/ margin: 1.5rem !important;
}
.md-mt {
/*px*/ margin-top: 24px !important;
/*rem*/ margin-top: 1.5rem !important;
}
.md-mr {
/*px*/ margin-right: 24px !important;
/*rem*/ margin-right: 1.5rem !important;
}
.md-mb {
/*px*/ margin-bottom: 24px !important;
/*rem*/ margin-bottom: 1.5rem !important;
}
.md-ml {
/*px*/ margin-left: 24px !important;
/*rem*/ margin-left: 1.5rem !important;
}
.md-mh {
/*px*/ margin-right: 24px !important;
/*rem*/ margin-right: 1.5rem !important;
/*px*/ margin-left: 24px !important;
/*rem*/ margin-left: 1.5rem !important;
}
.md-mv {
/*px*/ margin-top: 24px !important;
/*rem*/ margin-top: 1.5rem !important;
/*px*/ margin-bottom: 24px !important;
/*rem*/ margin-bottom: 1.5rem !important;
}
.md-m-- {
/*px*/ margin: 6px !important;
/*rem*/ margin: 0.375rem !important;
}
.md-mt-- {
/*px*/ margin-top: 6px !important;
/*rem*/ margin-top: 0.375rem !important;
}
.md-mr-- {
/*px*/ margin-right: 6px !important;
/*rem*/ margin-right: 0.375rem !important;
}
.md-mb-- {
/*px*/ margin-bottom: 6px !important;
/*rem*/ margin-bottom: 0.375rem !important;
}
.md-ml-- {
/*px*/ margin-left: 6px !important;
/*rem*/ margin-left: 0.375rem !important;
}
.md-mh-- {
/*px*/ margin-right: 6px !important;
/*rem*/ margin-right: 0.375rem !important;
/*px*/ margin-left: 6px !important;
/*rem*/ margin-left: 0.375rem !important;
}
.md-mv-- {
/*px*/ margin-top: 6px !important;
/*rem*/ margin-top: 0.375rem !important;
/*px*/ margin-bottom: 6px !important;
/*rem*/ margin-bottom: 0.375rem !important;
}
.md-m- {
/*px*/ margin: 12px !important;
/*rem*/ margin: 0.75rem !important;
}
.md-mt- {
/*px*/ margin-top: 12px !important;
/*rem*/ margin-top: 0.75rem !important;
}
.md-mr- {
/*px*/ margin-right: 12px !important;
/*rem*/ margin-right: 0.75rem !important;
}
.md-mb- {
/*px*/ margin-bottom: 12px !important;
/*rem*/ margin-bottom: 0.75rem !important;
}
.md-ml- {
/*px*/ margin-left: 12px !important;
/*rem*/ margin-left: 0.75rem !important;
}
.md-mh- {
/*px*/ margin-right: 12px !important;
/*rem*/ margin-right: 0.75rem !important;
/*px*/ margin-left: 12px !important;
/*rem*/ margin-left: 0.75rem !important;
}
.md-mv- {
/*px*/ margin-top: 12px !important;
/*rem*/ margin-top: 0.75rem !important;
/*px*/ margin-bottom: 12px !important;
/*rem*/ margin-bottom: 0.75rem !important;
}
.md-m\+ {
/*px*/ margin: 48px !important;
/*rem*/ margin: 3rem !important;
}
.md-mt\+ {
/*px*/ margin-top: 48px !important;
/*rem*/ margin-top: 3rem !important;
}
.md-mr\+ {
/*px*/ margin-right: 48px !important;
/*rem*/ margin-right: 3rem !important;
}
.md-mb\+ {
/*px*/ margin-bottom: 48px !important;
/*rem*/ margin-bottom: 3rem !important;
}
.md-ml\+ {
/*px*/ margin-left: 48px !important;
/*rem*/ margin-left: 3rem !important;
}
.md-mh\+ {
/*px*/ margin-right: 48px !important;
/*rem*/ margin-right: 3rem !important;
/*px*/ margin-left: 48px !important;
/*rem*/ margin-left: 3rem !important;
}
.md-mv\+ {
/*px*/ margin-top: 48px !important;
/*rem*/ margin-top: 3rem !important;
/*px*/ margin-bottom: 48px !important;
/*rem*/ margin-bottom: 3rem !important;
}
.md-m\+\+ {
/*px*/ margin: 96px !important;
/*rem*/ margin: 6rem !important;
}
.md-mt\+\+ {
/*px*/ margin-top: 96px !important;
/*rem*/ margin-top: 6rem !important;
}
.md-mr\+\+ {
/*px*/ margin-right: 96px !important;
/*rem*/ margin-right: 6rem !important;
}
.md-mb\+\+ {
/*px*/ margin-bottom: 96px !important;
/*rem*/ margin-bottom: 6rem !important;
}
.md-ml\+\+ {
/*px*/ margin-left: 96px !important;
/*rem*/ margin-left: 6rem !important;
}
.md-mh\+\+ {
/*px*/ margin-right: 96px !important;
/*rem*/ margin-right: 6rem !important;
/*px*/ margin-left: 96px !important;
/*rem*/ margin-left: 6rem !important;
}
.md-mv\+\+ {
/*px*/ margin-top: 96px !important;
/*rem*/ margin-top: 6rem !important;
/*px*/ margin-bottom: 96px !important;
/*rem*/ margin-bottom: 6rem !important;
}
.md-m0 {
/*px*/ margin: 0 !important;
/*rem*/ margin: 0 !important;
}
.md-mt0 {
/*px*/ margin-top: 0 !important;
/*rem*/ margin-top: 0 !important;
}
.md-mr0 {
/*px*/ margin-right: 0 !important;
/*rem*/ margin-right: 0 !important;
}
.md-mb0 {
/*px*/ margin-bottom: 0 !important;
/*rem*/ margin-bottom: 0 !important;
}
.md-ml0 {
/*px*/ margin-left: 0 !important;
/*rem*/ margin-left: 0 !important;
}
.md-mh0 {
/*px*/ margin-right: 0 !important;
/*rem*/ margin-right: 0 !important;
/*px*/ margin-left: 0 !important;
/*rem*/ margin-left: 0 !important;
}
.md-mv0 {
/*px*/ margin-top: 0 !important;
/*rem*/ margin-top: 0 !important;
/*px*/ margin-bottom: 0 !important;
/*rem*/ margin-bottom: 0 !important;
}
}
@media (min-width: 960px) {
.lg-m {
/*px*/ margin: 24px !important;
/*rem*/ margin: 1.5rem !important;
}
.lg-mt {
/*px*/ margin-top: 24px !important;
/*rem*/ margin-top: 1.5rem !important;
}
.lg-mr {
/*px*/ margin-right: 24px !important;
/*rem*/ margin-right: 1.5rem !important;
}
.lg-mb {
/*px*/ margin-bottom: 24px !important;
/*rem*/ margin-bottom: 1.5rem !important;
}
.lg-ml {
/*px*/ margin-left: 24px !important;
/*rem*/ margin-left: 1.5rem !important;
}
.lg-mh {
/*px*/ margin-right: 24px !important;
/*rem*/ margin-right: 1.5rem !important;
/*px*/ margin-left: 24px !important;
/*rem*/ margin-left: 1.5rem !important;
}
.lg-mv {
/*px*/ margin-top: 24px !important;
/*rem*/ margin-top: 1.5rem !important;
/*px*/ margin-bottom: 24px !important;
/*rem*/ margin-bottom: 1.5rem !important;
}
.lg-m-- {
/*px*/ margin: 6px !important;
/*rem*/ margin: 0.375rem !important;
}
.lg-mt-- {
/*px*/ margin-top: 6px !important;
/*rem*/ margin-top: 0.375rem !important;
}
.lg-mr-- {
/*px*/ margin-right: 6px !important;
/*rem*/ margin-right: 0.375rem !important;
}
.lg-mb-- {
/*px*/ margin-bottom: 6px !important;
/*rem*/ margin-bottom: 0.375rem !important;
}
.lg-ml-- {
/*px*/ margin-left: 6px !important;
/*rem*/ margin-left: 0.375rem !important;
}
.lg-mh-- {
/*px*/ margin-right: 6px !important;
/*rem*/ margin-right: 0.375rem !important;
/*px*/ margin-left: 6px !important;
/*rem*/ margin-left: 0.375rem !important;
}
.lg-mv-- {
/*px*/ margin-top: 6px !important;
/*rem*/ margin-top: 0.375rem !important;
/*px*/ margin-bottom: 6px !important;
/*rem*/ margin-bottom: 0.375rem !important;
}
.lg-m- {
/*px*/ margin: 12px !important;
/*rem*/ margin: 0.75rem !important;
}
.lg-mt- {
/*px*/ margin-top: 12px !important;
/*rem*/ margin-top: 0.75rem !important;
}
.lg-mr- {
/*px*/ margin-right: 12px !important;
/*rem*/ margin-right: 0.75rem !important;
}
.lg-mb- {
/*px*/ margin-bottom: 12px !important;
/*rem*/ margin-bottom: 0.75rem !important;
}
.lg-ml- {
/*px*/ margin-left: 12px !important;
/*rem*/ margin-left: 0.75rem !important;
}
.lg-mh- {
/*px*/ margin-right: 12px !important;
/*rem*/ margin-right: 0.75rem !important;
/*px*/ margin-left: 12px !important;
/*rem*/ margin-left: 0.75rem !important;
}
.lg-mv- {
/*px*/ margin-top: 12px !important;
/*rem*/ margin-top: 0.75rem !important;
/*px*/ margin-bottom: 12px !important;
/*rem*/ margin-bottom: 0.75rem !important;
}
.lg-m\+ {
/*px*/ margin: 48px !important;
/*rem*/ margin: 3rem !important;
}
.lg-mt\+ {
/*px*/ margin-top: 48px !important;
/*rem*/ margin-top: 3rem !important;
}
.lg-mr\+ {
/*px*/ margin-right: 48px !important;
/*rem*/ margin-right: 3rem !important;
}
.lg-mb\+ {
/*px*/ margin-bottom: 48px !important;
/*rem*/ margin-bottom: 3rem !important;
}
.lg-ml\+ {
/*px*/ margin-left: 48px !important;
/*rem*/ margin-left: 3rem !important;
}
.lg-mh\+ {
/*px*/ margin-right: 48px !important;
/*rem*/ margin-right: 3rem !important;
/*px*/ margin-left: 48px !important;
/*rem*/ margin-left: 3rem !important;
}
.lg-mv\+ {
/*px*/ margin-top: 48px !important;
/*rem*/ margin-top: 3rem !important;
/*px*/ margin-bottom: 48px !important;
/*rem*/ margin-bottom: 3rem !important;
}
.lg-m\+\+ {
/*px*/ margin: 96px !important;
/*rem*/ margin: 6rem !important;
}
.lg-mt\+\+ {
/*px*/ margin-top: 96px !important;
/*rem*/ margin-top: 6rem !important;
}
.lg-mr\+\+ {
/*px*/ margin-right: 96px !important;
/*rem*/ margin-right: 6rem !important;
}
.lg-mb\+\+ {
/*px*/ margin-bottom: 96px !important;
/*rem*/ margin-bottom: 6rem !important;
}
.lg-ml\+\+ {
/*px*/ margin-left: 96px !important;
/*rem*/ margin-left: 6rem !important;
}
.lg-mh\+\+ {
/*px*/ margin-right: 96px !important;
/*rem*/ margin-right: 6rem !important;
/*px*/ margin-left: 96px !important;
/*rem*/ margin-left: 6rem !important;
}
.lg-mv\+\+ {
/*px*/ margin-top: 96px !important;
/*rem*/ margin-top: 6rem !important;
/*px*/ margin-bottom: 96px !important;
/*rem*/ margin-bottom: 6rem !important;
}
.lg-m0 {
/*px*/ margin: 0 !important;
/*rem*/ margin: 0 !important;
}
.lg-mt0 {
/*px*/ margin-top: 0 !important;
/*rem*/ margin-top: 0 !important;
}
.lg-mr0 {
/*px*/ margin-right: 0 !important;
/*rem*/ margin-right: 0 !important;
}
.lg-mb0 {
/*px*/ margin-bottom: 0 !important;
/*rem*/ margin-bottom: 0 !important;
}
.lg-ml0 {
/*px*/ margin-left: 0 !important;
/*rem*/ margin-left: 0 !important;
}
.lg-mh0 {
/*px*/ margin-right: 0 !important;
/*rem*/ margin-right: 0 !important;
/*px*/ margin-left: 0 !important;
/*rem*/ margin-left: 0 !important;
}
.lg-mv0 {
/*px*/ margin-top: 0 !important;
/*rem*/ margin-top: 0 !important;
/*px*/ margin-bottom: 0 !important;
/*rem*/ margin-bottom: 0 !important;
}
}
@media (min-width: 1140px) {
.xl-m {
/*px*/ margin: 24px !important;
/*rem*/ margin: 1.5rem !important;
}
.xl-mt {
/*px*/ margin-top: 24px !important;
/*rem*/ margin-top: 1.5rem !important;
}
.xl-mr {
/*px*/ margin-right: 24px !important;
/*rem*/ margin-right: 1.5rem !important;
}
.xl-mb {
/*px*/ margin-bottom: 24px !important;
/*rem*/ margin-bottom: 1.5rem !important;
}
.xl-ml {
/*px*/ margin-left: 24px !important;
/*rem*/ margin-left: 1.5rem !important;
}
.xl-mh {
/*px*/ margin-right: 24px !important;
/*rem*/ margin-right: 1.5rem !important;
/*px*/ margin-left: 24px !important;
/*rem*/ margin-left: 1.5rem !important;
}
.xl-mv {
/*px*/ margin-top: 24px !important;
/*rem*/ margin-top: 1.5rem !important;
/*px*/ margin-bottom: 24px !important;
/*rem*/ margin-bottom: 1.5rem !important;
}
.xl-m-- {
/*px*/ margin: 6px !important;
/*rem*/ margin: 0.375rem !important;
}
.xl-mt-- {
/*px*/ margin-top: 6px !important;
/*rem*/ margin-top: 0.375rem !important;
}
.xl-mr-- {
/*px*/ margin-right: 6px !important;
/*rem*/ margin-right: 0.375rem !important;
}
.xl-mb-- {
/*px*/ margin-bottom: 6px !important;
/*rem*/ margin-bottom: 0.375rem !important;
}
.xl-ml-- {
/*px*/ margin-left: 6px !important;
/*rem*/ margin-left: 0.375rem !important;
}
.xl-mh-- {
/*px*/ margin-right: 6px !important;
/*rem*/ margin-right: 0.375rem !important;
/*px*/ margin-left: 6px !important;
/*rem*/ margin-left: 0.375rem !important;
}
.xl-mv-- {
/*px*/ margin-top: 6px !important;
/*rem*/ margin-top: 0.375rem !important;
/*px*/ margin-bottom: 6px !important;
/*rem*/ margin-bottom: 0.375rem !important;
}
.xl-m- {
/*px*/ margin: 12px !important;
/*rem*/ margin: 0.75rem !important;
}
.xl-mt- {
/*px*/ margin-top: 12px !important;
/*rem*/ margin-top: 0.75rem !important;
}
.xl-mr- {
/*px*/ margin-right: 12px !important;
/*rem*/ margin-right: 0.75rem !important;
}
.xl-mb- {
/*px*/ margin-bottom: 12px !important;
/*rem*/ margin-bottom: 0.75rem !important;
}
.xl-ml- {
/*px*/ margin-left: 12px !important;
/*rem*/ margin-left: 0.75rem !important;
}
.xl-mh- {
/*px*/ margin-right: 12px !important;
/*rem*/ margin-right: 0.75rem !important;
/*px*/ margin-left: 12px !important;
/*rem*/ margin-left: 0.75rem !important;
}
.xl-mv- {
/*px*/ margin-top: 12px !important;
/*rem*/ margin-top: 0.75rem !important;
/*px*/ margin-bottom: 12px !important;
/*rem*/ margin-bottom: 0.75rem !important;
}
.xl-m\+ {
/*px*/ margin: 48px !important;
/*rem*/ margin: 3rem !important;
}
.xl-mt\+ {
/*px*/ margin-top: 48px !important;
/*rem*/ margin-top: 3rem !important;
}
.xl-mr\+ {
/*px*/ margin-right: 48px !important;
/*rem*/ margin-right: 3rem !important;
}
.xl-mb\+ {
/*px*/ margin-bottom: 48px !important;
/*rem*/ margin-bottom: 3rem !important;
}
.xl-ml\+ {
/*px*/ margin-left: 48px !important;
/*rem*/ margin-left: 3rem !important;
}
.xl-mh\+ {
/*px*/ margin-right: 48px !important;
/*rem*/ margin-right: 3rem !important;
/*px*/ margin-left: 48px !important;
/*rem*/ margin-left: 3rem !important;
}
.xl-mv\+ {
/*px*/ margin-top: 48px !important;
/*rem*/ margin-top: 3rem !important;
/*px*/ margin-bottom: 48px !important;
/*rem*/ margin-bottom: 3rem !important;
}
.xl-m\+\+ {
/*px*/ margin: 96px !important;
/*rem*/ margin: 6rem !important;
}
.xl-mt\+\+ {
/*px*/ margin-top: 96px !important;
/*rem*/ margin-top: 6rem !important;
}
.xl-mr\+\+ {
/*px*/ margin-right: 96px !important;
/*rem*/ margin-right: 6rem !important;
}
.xl-mb\+\+ {
/*px*/ margin-bottom: 96px !important;
/*rem*/ margin-bottom: 6rem !important;
}
.xl-ml\+\+ {
/*px*/ margin-left: 96px !important;
/*rem*/ margin-left: 6rem !important;
}
.xl-mh\+\+ {
/*px*/ margin-right: 96px !important;
/*rem*/ margin-right: 6rem !important;
/*px*/ margin-left: 96px !important;
/*rem*/ margin-left: 6rem !important;
}
.xl-mv\+\+ {
/*px*/ margin-top: 96px !important;
/*rem*/ margin-top: 6rem !important;
/*px*/ margin-bottom: 96px !important;
/*rem*/ margin-bottom: 6rem !important;
}
.xl-m0 {
/*px*/ margin: 0 !important;
/*rem*/ margin: 0 !important;
}
.xl-mt0 {
/*px*/ margin-top: 0 !important;
/*rem*/ margin-top: 0 !important;
}
.xl-mr0 {
/*px*/ margin-right: 0 !important;
/*rem*/ margin-right: 0 !important;
}
.xl-mb0 {
/*px*/ margin-bottom: 0 !important;
/*rem*/ margin-bottom: 0 !important;
}
.xl-ml0 {
/*px*/ margin-left: 0 !important;
/*rem*/ margin-left: 0 !important;
}
.xl-mh0 {
/*px*/ margin-right: 0 !important;
/*rem*/ margin-right: 0 !important;
/*px*/ margin-left: 0 !important;
/*rem*/ margin-left: 0 !important;
}
.xl-mv0 {
/*px*/ margin-top: 0 !important;
/*rem*/ margin-top: 0 !important;
/*px*/ margin-bottom: 0 !important;
/*rem*/ margin-bottom: 0 !important;
}
}
@media (min-width: 1380px) {
.xxl-m {
/*px*/ margin: 24px !important;
/*rem*/ margin: 1.5rem !important;
}
.xxl-mt {
/*px*/ margin-top: 24px !important;
/*rem*/ margin-top: 1.5rem !important;
}
.xxl-mr {
/*px*/ margin-right: 24px !important;
/*rem*/ margin-right: 1.5rem !important;
}
.xxl-mb {
/*px*/ margin-bottom: 24px !important;
/*rem*/ margin-bottom: 1.5rem !important;
}
.xxl-ml {
/*px*/ margin-left: 24px !important;
/*rem*/ margin-left: 1.5rem !important;
}
.xxl-mh {
/*px*/ margin-right: 24px !important;
/*rem*/ margin-right: 1.5rem !important;
/*px*/ margin-left: 24px !important;
/*rem*/ margin-left: 1.5rem !important;
}
.xxl-mv {
/*px*/ margin-top: 24px !important;
/*rem*/ margin-top: 1.5rem !important;
/*px*/ margin-bottom: 24px !important;
/*rem*/ margin-bottom: 1.5rem !important;
}
.xxl-m-- {
/*px*/ margin: 6px !important;
/*rem*/ margin: 0.375rem !important;
}
.xxl-mt-- {
/*px*/ margin-top: 6px !important;
/*rem*/ margin-top: 0.375rem !important;
}
.xxl-mr-- {
/*px*/ margin-right: 6px !important;
/*rem*/ margin-right: 0.375rem !important;
}
.xxl-mb-- {
/*px*/ margin-bottom: 6px !important;
/*rem*/ margin-bottom: 0.375rem !important;
}
.xxl-ml-- {
/*px*/ margin-left: 6px !important;
/*rem*/ margin-left: 0.375rem !important;
}
.xxl-mh-- {
/*px*/ margin-right: 6px !important;
/*rem*/ margin-right: 0.375rem !important;
/*px*/ margin-left: 6px !important;
/*rem*/ margin-left: 0.375rem !important;
}
.xxl-mv-- {
/*px*/ margin-top: 6px !important;
/*rem*/ margin-top: 0.375rem !important;
/*px*/ margin-bottom: 6px !important;
/*rem*/ margin-bottom: 0.375rem !important;
}
.xxl-m- {
/*px*/ margin: 12px !important;
/*rem*/ margin: 0.75rem !important;
}
.xxl-mt- {
/*px*/ margin-top: 12px !important;
/*rem*/ margin-top: 0.75rem !important;
}
.xxl-mr- {
/*px*/ margin-right: 12px !important;
/*rem*/ margin-right: 0.75rem !important;
}
.xxl-mb- {
/*px*/ margin-bottom: 12px !important;
/*rem*/ margin-bottom: 0.75rem !important;
}
.xxl-ml- {
/*px*/ margin-left: 12px !important;
/*rem*/ margin-left: 0.75rem !important;
}
.xxl-mh- {
/*px*/ margin-right: 12px !important;
/*rem*/ margin-right: 0.75rem !important;
/*px*/ margin-left: 12px !important;
/*rem*/ margin-left: 0.75rem !important;
}
.xxl-mv- {
/*px*/ margin-top: 12px !important;
/*rem*/ margin-top: 0.75rem !important;
/*px*/ margin-bottom: 12px !important;
/*rem*/ margin-bottom: 0.75rem !important;
}
.xxl-m\+ {
/*px*/ margin: 48px !important;
/*rem*/ margin: 3rem !important;
}
.xxl-mt\+ {
/*px*/ margin-top: 48px !important;
/*rem*/ margin-top: 3rem !important;
}
.xxl-mr\+ {
/*px*/ margin-right: 48px !important;
/*rem*/ margin-right: 3rem !important;
}
.xxl-mb\+ {
/*px*/ margin-bottom: 48px !important;
/*rem*/ margin-bottom: 3rem !important;
}
.xxl-ml\+ {
/*px*/ margin-left: 48px !important;
/*rem*/ margin-left: 3rem !important;
}
.xxl-mh\+ {
/*px*/ margin-right: 48px !important;
/*rem*/ margin-right: 3rem !important;
/*px*/ margin-left: 48px !important;
/*rem*/ margin-left: 3rem !important;
}
.xxl-mv\+ {
/*px*/ margin-top: 48px !important;
/*rem*/ margin-top: 3rem !important;
/*px*/ margin-bottom: 48px !important;
/*rem*/ margin-bottom: 3rem !important;
}
.xxl-m\+\+ {
/*px*/ margin: 96px !important;
/*rem*/ margin: 6rem !important;
}
.xxl-mt\+\+ {
/*px*/ margin-top: 96px !important;
/*rem*/ margin-top: 6rem !important;
}
.xxl-mr\+\+ {
/*px*/ margin-right: 96px !important;
/*rem*/ margin-right: 6rem !important;
}
.xxl-mb\+\+ {
/*px*/ margin-bottom: 96px !important;
/*rem*/ margin-bottom: 6rem !important;
}
.xxl-ml\+\+ {
/*px*/ margin-left: 96px !important;
/*rem*/ margin-left: 6rem !important;
}
.xxl-mh\+\+ {
/*px*/ margin-right: 96px !important;
/*rem*/ margin-right: 6rem !important;
/*px*/ margin-left: 96px !important;
/*rem*/ margin-left: 6rem !important;
}
.xxl-mv\+\+ {
/*px*/ margin-top: 96px !important;
/*rem*/ margin-top: 6rem !important;
/*px*/ margin-bottom: 96px !important;
/*rem*/ margin-bottom: 6rem !important;
}
.xxl-m0 {
/*px*/ margin: 0 !important;
/*rem*/ margin: 0 !important;
}
.xxl-mt0 {
/*px*/ margin-top: 0 !important;
/*rem*/ margin-top: 0 !important;
}
.xxl-mr0 {
/*px*/ margin-right: 0 !important;
/*rem*/ margin-right: 0 !important;
}
.xxl-mb0 {
/*px*/ margin-bottom: 0 !important;
/*rem*/ margin-bottom: 0 !important;
}
.xxl-ml0 {
/*px*/ margin-left: 0 !important;
/*rem*/ margin-l
gitextract_ng7ldxh_/
├── .csscomb.json
├── .editorconfig
├── .gitattributes
├── .gitignore
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE.md
├── README.md
├── base/
│ ├── README.md
│ ├── anchors.less
│ ├── blockquotes.less
│ ├── code.less
│ ├── debug.less
│ ├── embedded-content.less
│ ├── form-elements.less
│ ├── headings.less
│ ├── horizontal-rules.less
│ ├── lists.less
│ ├── mixins/
│ │ ├── antialiasing.less
│ │ ├── clearing.less
│ │ ├── font-face.less
│ │ ├── media-queries.less
│ │ ├── momentum-scrolling.less
│ │ ├── text-truncate.less
│ │ ├── to-rem.less
│ │ └── vertically-centered.less
│ ├── normalize.less
│ ├── print.less
│ ├── reset.less
│ ├── root.less
│ ├── tables.less
│ ├── text-elements.less
│ └── variables.less
├── bower.json
├── cardinal.css
├── cardinal.less
├── components/
│ ├── README.md
│ ├── boxes.less
│ ├── buttons.less
│ ├── forms.less
│ ├── lists.less
│ └── tables.less
├── gulpfile.js
├── index.html
├── layout/
│ ├── README.md
│ ├── grids.less
│ └── wrappers.less
├── package.json
└── utilities/
├── README.md
├── display.less
├── floats.less
├── font-sizes.less
├── margins.less
├── paddings.less
├── positions.less
├── text-alignment.less
├── vertical-alignment.less
├── visually-hidden.less
├── widths.less
└── z-index.less
Condensed preview — 60 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (396K chars).
[
{
"path": ".csscomb.json",
"chars": 9994,
"preview": "// http://csscomb.com/config\n{\n // Whether to add a semicolon after the last value/mixin.\n \"always-semicolon\": true,\n\n"
},
{
"path": ".editorconfig",
"chars": 322,
"preview": "# EditorConfig helps developers define and maintain consistent coding\n# styles between different editors and IDEs\n# edit"
},
{
"path": ".gitattributes",
"chars": 12,
"preview": "* text=auto\n"
},
{
"path": ".gitignore",
"chars": 124,
"preview": ".DS_Store\n.DS_Store?\n._*\n.Spotlight-V100\n.Trashes\nehthumbs.db\nThumbs.db\nbower_components/\nnode_modules/\nnpm-debug.log\n*."
},
{
"path": "CHANGELOG.md",
"chars": 13977,
"preview": "# 3.7.0 (March 24, 2016)\n\n- Add `.breakpoint-prefixes()` mixin (thanks @lukechilds!).\n\n# 3.6.1 (February 10, 2016)\n\n- Fi"
},
{
"path": "CONTRIBUTING.md",
"chars": 5400,
"preview": "# Contributing to this project\n\n*This information is heavily based on [this CONTRIBUTING.md document](https://github.com"
},
{
"path": "LICENSE.md",
"chars": 1064,
"preview": "Copyright (c) Chris Bracco\n\nMIT License\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of"
},
{
"path": "README.md",
"chars": 10757,
"preview": "# Cardinal\n\n[](https://badge.fury.io/js/cardinalcss)\n[![Bower ve"
},
{
"path": "base/README.md",
"chars": 12439,
"preview": "# Cardinal Base\n\nThe `base/` directory houses all of the essential styles that build the foundation for this framework.\n"
},
{
"path": "base/anchors.less",
"chars": 330,
"preview": "/* ========================================================================== *\\\n Base -> Anchors ($base-anchors)\n\\* ="
},
{
"path": "base/blockquotes.less",
"chars": 1131,
"preview": "/* ========================================================================== *\\\n Base -> Blockquotes ($base-blockquot"
},
{
"path": "base/code.less",
"chars": 1597,
"preview": "/* ========================================================================== *\\\n Base -> Code ($base-code)\n\\* ======="
},
{
"path": "base/debug.less",
"chars": 3142,
"preview": "/* ========================================================================== *\\\n Base -> Debug ($base-debug)\n\\* ====="
},
{
"path": "base/embedded-content.less",
"chars": 1483,
"preview": "/* ========================================================================== *\\\n Base -> Embedded Content ($base-embe"
},
{
"path": "base/form-elements.less",
"chars": 2679,
"preview": "/* ========================================================================== *\\\n Base -> Form Elements ($base-form-el"
},
{
"path": "base/headings.less",
"chars": 807,
"preview": "/* ========================================================================== *\\\n Base -> Headings ($base-headings)\n\\*"
},
{
"path": "base/horizontal-rules.less",
"chars": 344,
"preview": "/* ========================================================================== *\\\n Base -> Horizontal Rules ($base-hori"
},
{
"path": "base/lists.less",
"chars": 842,
"preview": "/* ========================================================================== *\\\n Base -> Lists ($base-lists)\n\\* ====="
},
{
"path": "base/mixins/antialiasing.less",
"chars": 294,
"preview": "// =============================================================================\n// Base -> Mixins -> Antialiasing\n// =="
},
{
"path": "base/mixins/clearing.less",
"chars": 758,
"preview": "// =============================================================================\n// Base -> Mixins -> Clearing\n// ======"
},
{
"path": "base/mixins/font-face.less",
"chars": 1026,
"preview": "// =============================================================================\n// Base -> Mixins -> @font-face\n// ===="
},
{
"path": "base/mixins/media-queries.less",
"chars": 4062,
"preview": "// =============================================================================\n// Base -> Mixins -> Media Queries\n// ="
},
{
"path": "base/mixins/momentum-scrolling.less",
"chars": 284,
"preview": "// =============================================================================\n// Base -> Mixins -> Momentum Scrolling"
},
{
"path": "base/mixins/text-truncate.less",
"chars": 289,
"preview": "// =============================================================================\n// Base -> Mixins -> Text Truncate\n// ="
},
{
"path": "base/mixins/to-rem.less",
"chars": 1692,
"preview": "// =============================================================================\n// Base -> Mixins -> to-REM\n// ========"
},
{
"path": "base/mixins/vertically-centered.less",
"chars": 296,
"preview": "// =============================================================================\n// Base -> Mixins -> Vertically Centere"
},
{
"path": "base/normalize.less",
"chars": 7798,
"preview": "/*! normalize.css v3.0.2 | MIT License | git.io/normalize */\n\n/**\n * 1. Set default font family to sans-serif.\n * 2. Pre"
},
{
"path": "base/print.less",
"chars": 1262,
"preview": "/* ========================================================================== *\\\n Base -> Print ($base-print)\n\\* ====="
},
{
"path": "base/reset.less",
"chars": 1597,
"preview": "/* ========================================================================== *\\\n Base -> Reset ($base-reset)\n\\* ====="
},
{
"path": "base/root.less",
"chars": 2113,
"preview": "/* ========================================================================== *\\\n Base -> Root ($base-root)\n\\* ======="
},
{
"path": "base/tables.less",
"chars": 313,
"preview": "/* ========================================================================== *\\\n Base -> Tables ($base-tables)\n\\* ==="
},
{
"path": "base/text-elements.less",
"chars": 1289,
"preview": "/* ========================================================================== *\\\n Base -> Text Elements ($base-text-el"
},
{
"path": "base/variables.less",
"chars": 10491,
"preview": "// =============================================================================\n// Base -> Variables\n// ==============="
},
{
"path": "bower.json",
"chars": 473,
"preview": "{\n \"name\": \"cardinal\",\n \"homepage\": \"http://cardinalcss.com\",\n \"main\": \"cardinal.css\",\n \"authors\": [\n \"Chris Brac"
},
{
"path": "cardinal.css",
"chars": 160806,
"preview": "/*! cardinalcss v3.7.0 | MIT License | http://cardinalcss.com */\n@charset \"UTF-8\";\n/*! normalize.css v3.0.2 | MIT Licens"
},
{
"path": "cardinal.less",
"chars": 2039,
"preview": "@charset \"UTF-8\";\n\n//\n// Base\n//\n// These variables, mixins, and styles are required if you want to use this\n// framewor"
},
{
"path": "components/README.md",
"chars": 2040,
"preview": "# Cardinal Components\n\nComponents are the discrete, custom UI elements that consist of specific semantics and styling, a"
},
{
"path": "components/boxes.less",
"chars": 1010,
"preview": "/* ========================================================================== *\\\n Layout -> Boxes ($layout-boxes)\n\\* ="
},
{
"path": "components/buttons.less",
"chars": 2118,
"preview": "/* ========================================================================== *\\\n Objects -> Buttons ($objects-buttons"
},
{
"path": "components/forms.less",
"chars": 1524,
"preview": "/* ========================================================================== *\\\n Objects -> Forms ($objects-forms)\n\\*"
},
{
"path": "components/lists.less",
"chars": 964,
"preview": "/* ========================================================================== *\\\n Objects -> Lists ($objects-lists)\n\\*"
},
{
"path": "components/tables.less",
"chars": 2615,
"preview": "/* ========================================================================== *\\\n Objects -> Tables ($objects-tables)\n"
},
{
"path": "gulpfile.js",
"chars": 2572,
"preview": "// Load dependencies\nvar browserSync = require('browser-sync')\n browserSyncReload = browserSync.reload,\n del = req"
},
{
"path": "index.html",
"chars": 60328,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <title>HTML5 Test Page</title>\n <link rel=\"s"
},
{
"path": "layout/README.md",
"chars": 2291,
"preview": "# Cardinal Layout\n\nThe `layout/` directory is where all the style tools for creating UI layouts exist. These tools work "
},
{
"path": "layout/grids.less",
"chars": 3994,
"preview": "/* ========================================================================== *\\\n Layout -> Grids ($layout-grids)\n\\* ="
},
{
"path": "layout/wrappers.less",
"chars": 556,
"preview": "/* ========================================================================== *\\\n Layout -> Wrappers ($layout-wrappers"
},
{
"path": "package.json",
"chars": 987,
"preview": "{\n \"name\": \"cardinalcss\",\n \"version\": \"3.7.0\",\n \"homepage\": \"http://cardinalcss.com\",\n \"main\": \"cardinal.css\",\n \"au"
},
{
"path": "utilities/README.md",
"chars": 6315,
"preview": "# Cardinal Utilities\n\nThe `utilities/` directory houses all the helper classes included in Cardinal.\n\nUtilities are typi"
},
{
"path": "utilities/display.less",
"chars": 1558,
"preview": "/* ========================================================================== *\\\n Utilities -> Display ($utilities-dis"
},
{
"path": "utilities/floats.less",
"chars": 1235,
"preview": "/* ========================================================================== *\\\n Utilities -> Floats ($utilities-floa"
},
{
"path": "utilities/font-sizes.less",
"chars": 1285,
"preview": "/* ========================================================================== *\\\n Utilities -> Font Sizes ($utilities-"
},
{
"path": "utilities/margins.less",
"chars": 5155,
"preview": "/* ========================================================================== *\\\n Utilities -> Margins ($utilities-mar"
},
{
"path": "utilities/paddings.less",
"chars": 5215,
"preview": "/* ========================================================================== *\\\n Utilities -> Paddings ($utilities-pa"
},
{
"path": "utilities/positions.less",
"chars": 605,
"preview": "/* ========================================================================== *\\\n Utilities -> Positions ($utilities-p"
},
{
"path": "utilities/text-alignment.less",
"chars": 618,
"preview": "/* ========================================================================== *\\\n Utilities -> Text Alignment ($utilit"
},
{
"path": "utilities/vertical-alignment.less",
"chars": 569,
"preview": "/* ========================================================================== *\\\n Utilities -> Vertical Alignment ($ut"
},
{
"path": "utilities/visually-hidden.less",
"chars": 851,
"preview": "/* ========================================================================== *\\\n Utilities -> Visually Hidden ($utili"
},
{
"path": "utilities/widths.less",
"chars": 5463,
"preview": "/* ========================================================================== *\\\n Utilities -> Widths ($utilities-widt"
},
{
"path": "utilities/z-index.less",
"chars": 962,
"preview": "/* ========================================================================== *\\\n Utilities -> Z-Index ($utilities-z-i"
}
]
About this extraction
This page contains the full source code of the cbracco/cardinal GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 60 files (365.4 KB), approximately 112.1k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.