Repository: tachyons-css/tachyons-sass Branch: main Commit: 2dce89b83729 Files: 69 Total size: 154.9 KB Directory structure: gitextract_kjoxddf9/ ├── .editorconfig ├── .gitignore ├── .travis.yml ├── build.js ├── license ├── package.json ├── readme.md ├── scss/ │ ├── _aspect-ratios.scss │ ├── _background-position.scss │ ├── _background-size.scss │ ├── _border-colors.scss │ ├── _border-radius.scss │ ├── _border-style.scss │ ├── _border-widths.scss │ ├── _borders.scss │ ├── _box-shadow.scss │ ├── _box-sizing.scss │ ├── _clears.scss │ ├── _code.scss │ ├── _coordinates.scss │ ├── _debug-children.scss │ ├── _debug-grid.scss │ ├── _debug.scss │ ├── _debug_children.scss │ ├── _display.scss │ ├── _flexbox.scss │ ├── _floats.scss │ ├── _font-family.scss │ ├── _font-style.scss │ ├── _font-weight.scss │ ├── _forms.scss │ ├── _gradients.scss │ ├── _heights.scss │ ├── _hovers.scss │ ├── _images.scss │ ├── _letter-spacing.scss │ ├── _line-height.scss │ ├── _links.scss │ ├── _lists.scss │ ├── _max-widths.scss │ ├── _module-template.scss │ ├── _negative-margins.scss │ ├── _nested.scss │ ├── _normalize.scss │ ├── _opacity.scss │ ├── _outlines.scss │ ├── _overflow.scss │ ├── _position.scss │ ├── _rotations.scss │ ├── _skins-pseudo.scss │ ├── _skins.scss │ ├── _spacing.scss │ ├── _styles.scss │ ├── _tables.scss │ ├── _text-align.scss │ ├── _text-decoration.scss │ ├── _text-transform.scss │ ├── _type-scale.scss │ ├── _typography.scss │ ├── _utilities.scss │ ├── _variables.scss │ ├── _vertical-align.scss │ ├── _visibility.scss │ ├── _white-space.scss │ ├── _widths.scss │ ├── _word-break.scss │ └── _z-index.scss ├── tachyons.scss └── test.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: .editorconfig ================================================ # http://editorconfig.org root = true [*] indent_style = space indent_size = 2 charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true [*.md] trim_trailing_whitespace = false ================================================ FILE: .gitignore ================================================ node_modules/ ================================================ FILE: .travis.yml ================================================ language: node_js node_js: - '6' - '7' ================================================ FILE: build.js ================================================ 'use strict' const fs = require('fs') const glob = require('glob') const cssScss = require('css-scss') const stream = require('stream') glob('./node_modules/tachyons-custom/src/**/*.css', (err, files) => { if (err) { throw err } files.forEach(file => { var css = fs.readFileSync(file, 'utf8') var fileName = file.replace(/(\.\/node_modules\/tachyons-custom\/src\/|\.css)/g, '') if (fileName !== 'tachyons' && fileName !== '_debug') { fs.writeFileSync('scss/' + fileName + '.scss', cssScss(css)) } }) }) const tachyonsCSS = fs.createReadStream('./node_modules/tachyons-custom/src/tachyons.css') const tachyonsSCSS = fs.createWriteStream('./tachyons.scss') tachyonsCSS.on('data', (data) => { const sassStream = new stream.Readable() sassStream.push( data .toString('utf8') .replace(/\.\/_/g, 'scss/') // Update paths .replace(/^((.|\n)+)(\n \/\*\sModules(.|\n)+)(\n\/\*\sVariables(.|\n)+)/g, '$1$5$3') // Move import orders .replace(/\/\*(.*)\*\//g, '// $1') // Change single-line comments to // .replace(/\/\*|\s\*\/?/g, '//') // Change multi-line comments to // ) sassStream.push(null) sassStream.pipe(tachyonsSCSS) }) ================================================ FILE: license ================================================ The MIT License (MIT) Copyright (c) 2015 @mrmrs (mrmrs.io) 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: package.json ================================================ { "name": "tachyons-sass", "description": "Transpiled Sass partials for Tachyons", "author": "John Otander", "version": "4.9.5", "style": "tachyons.scss", "scripts": { "start": "node build.js", "test": "ava", "lint": "standard --fix" }, "repository": "tachyons-css/tachyons-sass", "keywords": [ "tachyons", "tachyons-css", "css", "sass", "scss" ], "license": "MIT", "dependencies": { "tachyons-custom": "^4.9.5" }, "devDependencies": { "ava": "^3.15.0", "css-scss": "^0.1.1", "glob": "^7.1.3", "node-sass": "^6.0.1", "standard": "^12.0.1" } } ================================================ FILE: readme.md ================================================ # tachyons-sass [![Build Status](https://travis-ci.org/tachyons-css/tachyons-sass.svg?branch=master)](https://travis-ci.org/tachyons-css/tachyons-sass) Transpiled partials for Tachyons. ## Installation ```bash npm install --save tachyons-sass ``` ## Usage ```scss @import "path/to/tachyons.scss"; ``` ## License MIT ## Contributing 1. Fork it 2. Create your feature branch (`git checkout -b my-new-feature`) 3. Commit your changes (`git commit -am 'Add some feature'`) 4. Push to the branch (`git push origin my-new-feature`) 5. Create new Pull Request Built by [@mrmrs_](https://twitter.com/mrmrs_) & [@4lpine](https://twitter.com/4lpine). *** > This package was initially generated with [yeoman](http://yeoman.io) and the [p generator](https://github.com/johnotander/generator-p.git). ================================================ FILE: scss/_aspect-ratios.scss ================================================ // Converted Variables // Custom Media Query Variables /* ASPECT RATIOS */ /* This is for fluid media that is embedded from third party sites like youtube, vimeo etc. * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e * Make sure there are no height and width attributes on the embedded media. * Adapted from: https://github.com/suitcss/components-flex-embed * * Example: * *
* *
* * */ .aspect-ratio { height: 0; position: relative; } .aspect-ratio--16x9 { padding-bottom: 56.25%; } .aspect-ratio--9x16 { padding-bottom: 177.77%; } .aspect-ratio--4x3 { padding-bottom: 75%; } .aspect-ratio--3x4 { padding-bottom: 133.33%; } .aspect-ratio--6x4 { padding-bottom: 66.6%; } .aspect-ratio--4x6 { padding-bottom: 150%; } .aspect-ratio--8x5 { padding-bottom: 62.5%; } .aspect-ratio--5x8 { padding-bottom: 160%; } .aspect-ratio--7x5 { padding-bottom: 71.42%; } .aspect-ratio--5x7 { padding-bottom: 140%; } .aspect-ratio--1x1 { padding-bottom: 100%; } .aspect-ratio--object { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; } @media #{$breakpoint-not-small}{ .aspect-ratio-ns { height: 0; position: relative; } .aspect-ratio--16x9-ns { padding-bottom: 56.25%; } .aspect-ratio--9x16-ns { padding-bottom: 177.77%; } .aspect-ratio--4x3-ns { padding-bottom: 75%; } .aspect-ratio--3x4-ns { padding-bottom: 133.33%; } .aspect-ratio--6x4-ns { padding-bottom: 66.6%; } .aspect-ratio--4x6-ns { padding-bottom: 150%; } .aspect-ratio--8x5-ns { padding-bottom: 62.5%; } .aspect-ratio--5x8-ns { padding-bottom: 160%; } .aspect-ratio--7x5-ns { padding-bottom: 71.42%; } .aspect-ratio--5x7-ns { padding-bottom: 140%; } .aspect-ratio--1x1-ns { padding-bottom: 100%; } .aspect-ratio--object-ns { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; } } @media #{$breakpoint-medium}{ .aspect-ratio-m { height: 0; position: relative; } .aspect-ratio--16x9-m { padding-bottom: 56.25%; } .aspect-ratio--9x16-m { padding-bottom: 177.77%; } .aspect-ratio--4x3-m { padding-bottom: 75%; } .aspect-ratio--3x4-m { padding-bottom: 133.33%; } .aspect-ratio--6x4-m { padding-bottom: 66.6%; } .aspect-ratio--4x6-m { padding-bottom: 150%; } .aspect-ratio--8x5-m { padding-bottom: 62.5%; } .aspect-ratio--5x8-m { padding-bottom: 160%; } .aspect-ratio--7x5-m { padding-bottom: 71.42%; } .aspect-ratio--5x7-m { padding-bottom: 140%; } .aspect-ratio--1x1-m { padding-bottom: 100%; } .aspect-ratio--object-m { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; } } @media #{$breakpoint-large}{ .aspect-ratio-l { height: 0; position: relative; } .aspect-ratio--16x9-l { padding-bottom: 56.25%; } .aspect-ratio--9x16-l { padding-bottom: 177.77%; } .aspect-ratio--4x3-l { padding-bottom: 75%; } .aspect-ratio--3x4-l { padding-bottom: 133.33%; } .aspect-ratio--6x4-l { padding-bottom: 66.6%; } .aspect-ratio--4x6-l { padding-bottom: 150%; } .aspect-ratio--8x5-l { padding-bottom: 62.5%; } .aspect-ratio--5x8-l { padding-bottom: 160%; } .aspect-ratio--7x5-l { padding-bottom: 71.42%; } .aspect-ratio--5x7-l { padding-bottom: 140%; } .aspect-ratio--1x1-l { padding-bottom: 100%; } .aspect-ratio--object-l { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; } } ================================================ FILE: scss/_background-position.scss ================================================ // Converted Variables // Custom Media Query Variables /* BACKGROUND POSITION Base: bg = background Modifiers: -center = center center -top = top center -right = center right -bottom = bottom center -left = center left Media Query Extensions: -ns = not-small -m = medium -l = large */ .bg-center { background-repeat: no-repeat; background-position: center center; } .bg-top { background-repeat: no-repeat; background-position: top center; } .bg-right { background-repeat: no-repeat; background-position: center right; } .bg-bottom { background-repeat: no-repeat; background-position: bottom center; } .bg-left { background-repeat: no-repeat; background-position: center left; } @media #{$breakpoint-not-small} { .bg-center-ns { background-repeat: no-repeat; background-position: center center; } .bg-top-ns { background-repeat: no-repeat; background-position: top center; } .bg-right-ns { background-repeat: no-repeat; background-position: center right; } .bg-bottom-ns { background-repeat: no-repeat; background-position: bottom center; } .bg-left-ns { background-repeat: no-repeat; background-position: center left; } } @media #{$breakpoint-medium} { .bg-center-m { background-repeat: no-repeat; background-position: center center; } .bg-top-m { background-repeat: no-repeat; background-position: top center; } .bg-right-m { background-repeat: no-repeat; background-position: center right; } .bg-bottom-m { background-repeat: no-repeat; background-position: bottom center; } .bg-left-m { background-repeat: no-repeat; background-position: center left; } } @media #{$breakpoint-large} { .bg-center-l { background-repeat: no-repeat; background-position: center center; } .bg-top-l { background-repeat: no-repeat; background-position: top center; } .bg-right-l { background-repeat: no-repeat; background-position: center right; } .bg-bottom-l { background-repeat: no-repeat; background-position: bottom center; } .bg-left-l { background-repeat: no-repeat; background-position: center left; } } ================================================ FILE: scss/_background-size.scss ================================================ // Converted Variables // Custom Media Query Variables /* BACKGROUND SIZE Docs: http://tachyons.io/docs/themes/background-size/ Media Query Extensions: -ns = not-small -m = medium -l = large */ /* Often used in combination with background image set as an inline style on an html element. */ .cover { background-size: cover!important; } .contain { background-size: contain!important; } @media #{$breakpoint-not-small} { .cover-ns { background-size: cover!important; } .contain-ns { background-size: contain!important; } } @media #{$breakpoint-medium} { .cover-m { background-size: cover!important; } .contain-m { background-size: contain!important; } } @media #{$breakpoint-large} { .cover-l { background-size: cover!important; } .contain-l { background-size: contain!important; } } ================================================ FILE: scss/_border-colors.scss ================================================ // Converted Variables // Custom Media Query Variables /* BORDER COLORS Docs: http://tachyons.io/docs/themes/borders/ Border colors can be used to extend the base border classes ba,bt,bb,br,bl found in the _borders.css file. The base border class by default will set the color of the border to that of the current text color. These classes are for the cases where you desire for the text and border colors to be different. Base: b = border Modifiers: --color-name = each color variable name is also a border color name */ .b--black { border-color: $black; } .b--near-black { border-color: $near-black; } .b--dark-gray { border-color: $dark-gray; } .b--mid-gray { border-color: $mid-gray; } .b--gray { border-color: $gray; } .b--silver { border-color: $silver; } .b--light-silver { border-color: $light-silver; } .b--moon-gray { border-color: $moon-gray; } .b--light-gray { border-color: $light-gray; } .b--near-white { border-color: $near-white; } .b--white { border-color: $white; } .b--white-90 { border-color: $white-90; } .b--white-80 { border-color: $white-80; } .b--white-70 { border-color: $white-70; } .b--white-60 { border-color: $white-60; } .b--white-50 { border-color: $white-50; } .b--white-40 { border-color: $white-40; } .b--white-30 { border-color: $white-30; } .b--white-20 { border-color: $white-20; } .b--white-10 { border-color: $white-10; } .b--white-05 { border-color: $white-05; } .b--white-025 { border-color: $white-025; } .b--white-0125 { border-color: $white-0125; } .b--black-90 { border-color: $black-90; } .b--black-80 { border-color: $black-80; } .b--black-70 { border-color: $black-70; } .b--black-60 { border-color: $black-60; } .b--black-50 { border-color: $black-50; } .b--black-40 { border-color: $black-40; } .b--black-30 { border-color: $black-30; } .b--black-20 { border-color: $black-20; } .b--black-10 { border-color: $black-10; } .b--black-05 { border-color: $black-05; } .b--black-025 { border-color: $black-025; } .b--black-0125 { border-color: $black-0125; } .b--dark-red { border-color: $dark-red; } .b--red { border-color: $red; } .b--light-red { border-color: $light-red; } .b--orange { border-color: $orange; } .b--gold { border-color: $gold; } .b--yellow { border-color: $yellow; } .b--light-yellow { border-color: $light-yellow; } .b--purple { border-color: $purple; } .b--light-purple { border-color: $light-purple; } .b--dark-pink { border-color: $dark-pink; } .b--hot-pink { border-color: $hot-pink; } .b--pink { border-color: $pink; } .b--light-pink { border-color: $light-pink; } .b--dark-green { border-color: $dark-green; } .b--green { border-color: $green; } .b--light-green { border-color: $light-green; } .b--navy { border-color: $navy; } .b--dark-blue { border-color: $dark-blue; } .b--blue { border-color: $blue; } .b--light-blue { border-color: $light-blue; } .b--lightest-blue { border-color: $lightest-blue; } .b--washed-blue { border-color: $washed-blue; } .b--washed-green { border-color: $washed-green; } .b--washed-yellow { border-color: $washed-yellow; } .b--washed-red { border-color: $washed-red; } .b--transparent { border-color: $transparent; } .b--inherit { border-color: inherit; } ================================================ FILE: scss/_border-radius.scss ================================================ // Converted Variables // Custom Media Query Variables /* BORDER RADIUS Docs: http://tachyons.io/docs/themes/border-radius/ Base: br = border-radius Modifiers: 0 = 0/none 1 = 1st step in scale 2 = 2nd step in scale 3 = 3rd step in scale 4 = 4th step in scale Literal values: -100 = 100% -pill = 9999px Media Query Extensions: -ns = not-small -m = medium -l = large */ .br0 { border-radius: $border-radius-none } .br1 { border-radius: $border-radius-1; } .br2 { border-radius: $border-radius-2; } .br3 { border-radius: $border-radius-3; } .br4 { border-radius: $border-radius-4; } .br-100 { border-radius: $border-radius-circle; } .br-pill { border-radius: $border-radius-pill; } .br--bottom { border-top-left-radius: 0; border-top-right-radius: 0; } .br--top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .br--right { border-top-left-radius: 0; border-bottom-left-radius: 0; } .br--left { border-top-right-radius: 0; border-bottom-right-radius: 0; } @media #{$breakpoint-not-small} { .br0-ns { border-radius: $border-radius-none } .br1-ns { border-radius: $border-radius-1; } .br2-ns { border-radius: $border-radius-2; } .br3-ns { border-radius: $border-radius-3; } .br4-ns { border-radius: $border-radius-4; } .br-100-ns { border-radius: $border-radius-circle; } .br-pill-ns { border-radius: $border-radius-pill; } .br--bottom-ns { border-top-left-radius: 0; border-top-right-radius: 0; } .br--top-ns { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .br--right-ns { border-top-left-radius: 0; border-bottom-left-radius: 0; } .br--left-ns { border-top-right-radius: 0; border-bottom-right-radius: 0; } } @media #{$breakpoint-medium} { .br0-m { border-radius: $border-radius-none } .br1-m { border-radius: $border-radius-1; } .br2-m { border-radius: $border-radius-2; } .br3-m { border-radius: $border-radius-3; } .br4-m { border-radius: $border-radius-4; } .br-100-m { border-radius: $border-radius-circle; } .br-pill-m { border-radius: $border-radius-pill; } .br--bottom-m { border-top-left-radius: 0; border-top-right-radius: 0; } .br--top-m { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .br--right-m { border-top-left-radius: 0; border-bottom-left-radius: 0; } .br--left-m { border-top-right-radius: 0; border-bottom-right-radius: 0; } } @media #{$breakpoint-large} { .br0-l { border-radius: $border-radius-none } .br1-l { border-radius: $border-radius-1; } .br2-l { border-radius: $border-radius-2; } .br3-l { border-radius: $border-radius-3; } .br4-l { border-radius: $border-radius-4; } .br-100-l { border-radius: $border-radius-circle; } .br-pill-l { border-radius: $border-radius-pill; } .br--bottom-l { border-top-left-radius: 0; border-top-right-radius: 0; } .br--top-l { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .br--right-l { border-top-left-radius: 0; border-bottom-left-radius: 0; } .br--left-l { border-top-right-radius: 0; border-bottom-right-radius: 0; } } ================================================ FILE: scss/_border-style.scss ================================================ // Converted Variables // Custom Media Query Variables /* BORDER STYLES Docs: http://tachyons.io/docs/themes/borders/ Depends on base border module in _borders.css Base: b = border-style Modifiers: --none = none --dotted = dotted --dashed = dashed --solid = solid Media Query Extensions: -ns = not-small -m = medium -l = large */ .b--dotted { border-style: dotted; } .b--dashed { border-style: dashed; } .b--solid { border-style: solid; } .b--none { border-style: none; } @media #{$breakpoint-not-small} { .b--dotted-ns { border-style: dotted; } .b--dashed-ns { border-style: dashed; } .b--solid-ns { border-style: solid; } .b--none-ns { border-style: none; } } @media #{$breakpoint-medium} { .b--dotted-m { border-style: dotted; } .b--dashed-m { border-style: dashed; } .b--solid-m { border-style: solid; } .b--none-m { border-style: none; } } @media #{$breakpoint-large} { .b--dotted-l { border-style: dotted; } .b--dashed-l { border-style: dashed; } .b--solid-l { border-style: solid; } .b--none-l { border-style: none; } } ================================================ FILE: scss/_border-widths.scss ================================================ // Converted Variables // Custom Media Query Variables /* BORDER WIDTHS Docs: http://tachyons.io/docs/themes/borders/ Base: bw = border-width Modifiers: 0 = 0 width border 1 = 1st step in border-width scale 2 = 2nd step in border-width scale 3 = 3rd step in border-width scale 4 = 4th step in border-width scale 5 = 5th step in border-width scale Media Query Extensions: -ns = not-small -m = medium -l = large */ .bw0 { border-width: $border-width-none; } .bw1 { border-width: $border-width-1; } .bw2 { border-width: $border-width-2; } .bw3 { border-width: $border-width-3; } .bw4 { border-width: $border-width-4; } .bw5 { border-width: $border-width-5; } /* Resets */ .bt-0 { border-top-width: $border-width-none } .br-0 { border-right-width: $border-width-none } .bb-0 { border-bottom-width: $border-width-none } .bl-0 { border-left-width: $border-width-none } @media #{$breakpoint-not-small} { .bw0-ns { border-width: $border-width-none; } .bw1-ns { border-width: $border-width-1; } .bw2-ns { border-width: $border-width-2; } .bw3-ns { border-width: $border-width-3; } .bw4-ns { border-width: $border-width-4; } .bw5-ns { border-width: $border-width-5; } .bt-0-ns { border-top-width: $border-width-none } .br-0-ns { border-right-width: $border-width-none } .bb-0-ns { border-bottom-width: $border-width-none } .bl-0-ns { border-left-width: $border-width-none } } @media #{$breakpoint-medium} { .bw0-m { border-width: $border-width-none; } .bw1-m { border-width: $border-width-1; } .bw2-m { border-width: $border-width-2; } .bw3-m { border-width: $border-width-3; } .bw4-m { border-width: $border-width-4; } .bw5-m { border-width: $border-width-5; } .bt-0-m { border-top-width: $border-width-none } .br-0-m { border-right-width: $border-width-none } .bb-0-m { border-bottom-width: $border-width-none } .bl-0-m { border-left-width: $border-width-none } } @media #{$breakpoint-large} { .bw0-l { border-width: $border-width-none; } .bw1-l { border-width: $border-width-1; } .bw2-l { border-width: $border-width-2; } .bw3-l { border-width: $border-width-3; } .bw4-l { border-width: $border-width-4; } .bw5-l { border-width: $border-width-5; } .bt-0-l { border-top-width: $border-width-none } .br-0-l { border-right-width: $border-width-none } .bb-0-l { border-bottom-width: $border-width-none } .bl-0-l { border-left-width: $border-width-none } } ================================================ FILE: scss/_borders.scss ================================================ // Converted Variables // Custom Media Query Variables /* BORDERS Docs: http://tachyons.io/docs/themes/borders/ Base: b = border Modifiers: a = all t = top r = right b = bottom l = left n = none Media Query Extensions: -ns = not-small -m = medium -l = large */ .ba { border-style: solid; border-width: 1px; } .bt { border-top-style: solid; border-top-width: 1px; } .br { border-right-style: solid; border-right-width: 1px; } .bb { border-bottom-style: solid; border-bottom-width: 1px; } .bl { border-left-style: solid; border-left-width: 1px; } .bn { border-style: none; border-width: 0; } @media #{$breakpoint-not-small} { .ba-ns { border-style: solid; border-width: 1px; } .bt-ns { border-top-style: solid; border-top-width: 1px; } .br-ns { border-right-style: solid; border-right-width: 1px; } .bb-ns { border-bottom-style: solid; border-bottom-width: 1px; } .bl-ns { border-left-style: solid; border-left-width: 1px; } .bn-ns { border-style: none; border-width: 0; } } @media #{$breakpoint-medium} { .ba-m { border-style: solid; border-width: 1px; } .bt-m { border-top-style: solid; border-top-width: 1px; } .br-m { border-right-style: solid; border-right-width: 1px; } .bb-m { border-bottom-style: solid; border-bottom-width: 1px; } .bl-m { border-left-style: solid; border-left-width: 1px; } .bn-m { border-style: none; border-width: 0; } } @media #{$breakpoint-large} { .ba-l { border-style: solid; border-width: 1px; } .bt-l { border-top-style: solid; border-top-width: 1px; } .br-l { border-right-style: solid; border-right-width: 1px; } .bb-l { border-bottom-style: solid; border-bottom-width: 1px; } .bl-l { border-left-style: solid; border-left-width: 1px; } .bn-l { border-style: none; border-width: 0; } } ================================================ FILE: scss/_box-shadow.scss ================================================ // Converted Variables // Custom Media Query Variables /* BOX-SHADOW Docs: http://tachyons.io/docs/themes/box-shadow/ Media Query Extensions: -ns = not-small -m = medium -l = large */ .shadow-1 { box-shadow: $box-shadow-1; } .shadow-2 { box-shadow: $box-shadow-2; } .shadow-3 { box-shadow: $box-shadow-3; } .shadow-4 { box-shadow: $box-shadow-4; } .shadow-5 { box-shadow: $box-shadow-5; } @media #{$breakpoint-not-small} { .shadow-1-ns { box-shadow: $box-shadow-1; } .shadow-2-ns { box-shadow: $box-shadow-2; } .shadow-3-ns { box-shadow: $box-shadow-3; } .shadow-4-ns { box-shadow: $box-shadow-4; } .shadow-5-ns { box-shadow: $box-shadow-5; } } @media #{$breakpoint-medium} { .shadow-1-m { box-shadow: $box-shadow-1; } .shadow-2-m { box-shadow: $box-shadow-2; } .shadow-3-m { box-shadow: $box-shadow-3; } .shadow-4-m { box-shadow: $box-shadow-4; } .shadow-5-m { box-shadow: $box-shadow-5; } } @media #{$breakpoint-large} { .shadow-1-l { box-shadow: $box-shadow-1; } .shadow-2-l { box-shadow: $box-shadow-2; } .shadow-3-l { box-shadow: $box-shadow-3; } .shadow-4-l { box-shadow: $box-shadow-4; } .shadow-5-l { box-shadow: $box-shadow-5; } } ================================================ FILE: scss/_box-sizing.scss ================================================ // Converted Variables // Custom Media Query Variables /* BOX SIZING */ html, body, div, article, section, main, footer, header, form, fieldset, legend, pre, code, a, h1,h2,h3,h4,h5,h6, p, ul, ol, li, dl, dt, dd, textarea, table, td, th, tr, input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="text"], input[type="url"], .border-box { box-sizing: border-box; } ================================================ FILE: scss/_clears.scss ================================================ // Converted Variables // Custom Media Query Variables /* CLEARFIX http://tachyons.io/docs/layout/clearfix/ */ /* Nicolas Gallaghers Clearfix solution Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */ .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; } .cl { clear: left; } .cr { clear: right; } .cb { clear: both; } .cn { clear: none; } @media #{$breakpoint-not-small} { .cl-ns { clear: left; } .cr-ns { clear: right; } .cb-ns { clear: both; } .cn-ns { clear: none; } } @media #{$breakpoint-medium} { .cl-m { clear: left; } .cr-m { clear: right; } .cb-m { clear: both; } .cn-m { clear: none; } } @media #{$breakpoint-large} { .cl-l { clear: left; } .cr-l { clear: right; } .cb-l { clear: both; } .cn-l { clear: none; } } ================================================ FILE: scss/_code.scss ================================================ // Converted Variables // Custom Media Query Variables /* CODE */ .pre { overflow-x: auto; overflow-y: hidden; overflow: scroll; } ================================================ FILE: scss/_coordinates.scss ================================================ // Converted Variables // Custom Media Query Variables /* COORDINATES Docs: http://tachyons.io/docs/layout/position/ Use in combination with the position module. Base: top bottom right left Modifiers: -0 = literal value 0 -1 = literal value 1 -2 = literal value 2 --1 = literal value -1 --2 = literal value -2 Media Query Extensions: -ns = not-small -m = medium -l = large */ .top-0 { top: 0; } .right-0 { right: 0; } .bottom-0 { bottom: 0; } .left-0 { left: 0; } .top-1 { top: 1rem; } .right-1 { right: 1rem; } .bottom-1 { bottom: 1rem; } .left-1 { left: 1rem; } .top-2 { top: 2rem; } .right-2 { right: 2rem; } .bottom-2 { bottom: 2rem; } .left-2 { left: 2rem; } .top--1 { top: -1rem; } .right--1 { right: -1rem; } .bottom--1 { bottom: -1rem; } .left--1 { left: -1rem; } .top--2 { top: -2rem; } .right--2 { right: -2rem; } .bottom--2 { bottom: -2rem; } .left--2 { left: -2rem; } .absolute--fill { top: 0; right: 0; bottom: 0; left: 0; } @media #{$breakpoint-not-small} { .top-0-ns { top: 0; } .left-0-ns { left: 0; } .right-0-ns { right: 0; } .bottom-0-ns { bottom: 0; } .top-1-ns { top: 1rem; } .left-1-ns { left: 1rem; } .right-1-ns { right: 1rem; } .bottom-1-ns { bottom: 1rem; } .top-2-ns { top: 2rem; } .left-2-ns { left: 2rem; } .right-2-ns { right: 2rem; } .bottom-2-ns { bottom: 2rem; } .top--1-ns { top: -1rem; } .right--1-ns { right: -1rem; } .bottom--1-ns { bottom: -1rem; } .left--1-ns { left: -1rem; } .top--2-ns { top: -2rem; } .right--2-ns { right: -2rem; } .bottom--2-ns { bottom: -2rem; } .left--2-ns { left: -2rem; } .absolute--fill-ns { top: 0; right: 0; bottom: 0; left: 0; } } @media #{$breakpoint-medium} { .top-0-m { top: 0; } .left-0-m { left: 0; } .right-0-m { right: 0; } .bottom-0-m { bottom: 0; } .top-1-m { top: 1rem; } .left-1-m { left: 1rem; } .right-1-m { right: 1rem; } .bottom-1-m { bottom: 1rem; } .top-2-m { top: 2rem; } .left-2-m { left: 2rem; } .right-2-m { right: 2rem; } .bottom-2-m { bottom: 2rem; } .top--1-m { top: -1rem; } .right--1-m { right: -1rem; } .bottom--1-m { bottom: -1rem; } .left--1-m { left: -1rem; } .top--2-m { top: -2rem; } .right--2-m { right: -2rem; } .bottom--2-m { bottom: -2rem; } .left--2-m { left: -2rem; } .absolute--fill-m { top: 0; right: 0; bottom: 0; left: 0; } } @media #{$breakpoint-large} { .top-0-l { top: 0; } .left-0-l { left: 0; } .right-0-l { right: 0; } .bottom-0-l { bottom: 0; } .top-1-l { top: 1rem; } .left-1-l { left: 1rem; } .right-1-l { right: 1rem; } .bottom-1-l { bottom: 1rem; } .top-2-l { top: 2rem; } .left-2-l { left: 2rem; } .right-2-l { right: 2rem; } .bottom-2-l { bottom: 2rem; } .top--1-l { top: -1rem; } .right--1-l { right: -1rem; } .bottom--1-l { bottom: -1rem; } .left--1-l { left: -1rem; } .top--2-l { top: -2rem; } .right--2-l { right: -2rem; } .bottom--2-l { bottom: -2rem; } .left--2-l { left: -2rem; } .absolute--fill-l { top: 0; right: 0; bottom: 0; left: 0; } } ================================================ FILE: scss/_debug-children.scss ================================================ // Converted Variables // Custom Media Query Variables /* DEBUG CHILDREN Docs: http://tachyons.io/docs/debug/ Just add the debug class to any element to see outlines on its children. */ .debug * { outline: 1px solid gold; } .debug-white * { outline: 1px solid white; } .debug-black * { outline: 1px solid black; } ================================================ FILE: scss/_debug-grid.scss ================================================ // Converted Variables // Custom Media Query Variables /* DEBUG GRID http://tachyons.io/docs/debug-grid/ Can be useful for debugging layout issues or helping to make sure things line up perfectly. Just tack one of these classes onto a parent element. */ .debug-grid { background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTRDOTY4N0U2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTRDOTY4N0Q2N0VFMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3NjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3NzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsBS+GMAAAAjSURBVHjaYvz//z8DLsD4gcGXiYEAGBIKGBne//fFpwAgwAB98AaF2pjlUQAAAABJRU5ErkJggg==) repeat top left; } .debug-grid-16 { background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODYyRjhERDU2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODYyRjhERDQ2N0YyMTFFNjg2MzZDQjkwNkQ4MjgwMEIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QTY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3QjY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvCS01IAAABMSURBVHjaYmR4/5+BFPBfAMFm/MBgx8RAGWCn1AAmSg34Q6kBDKMGMDCwICeMIemF/5QawEipAWwUhwEjMDvbAWlWkvVBwu8vQIABAEwBCph8U6c0AAAAAElFTkSuQmCC) repeat top left; } .debug-grid-8-solid { background:white url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAAAAD/4QMxaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzExMSA3OS4xNTgzMjUsIDIwMTUvMDkvMTAtMDE6MTA6MjAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE1IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIxMjI0OTczNjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIxMjI0OTc0NjdCMzExRTZCMkJDRTI0MDgxMDAyMTcxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjEyMjQ5NzE2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjEyMjQ5NzI2N0IzMTFFNkIyQkNFMjQwODEwMDIxNzEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAbGhopHSlBJiZBQi8vL0JHPz4+P0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHAR0pKTQmND8oKD9HPzU/R0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0dHR0f/wAARCAAIAAgDASIAAhEBAxEB/8QAWQABAQAAAAAAAAAAAAAAAAAAAAYBAQEAAAAAAAAAAAAAAAAAAAIEEAEBAAMBAAAAAAAAAAAAAAABADECA0ERAAEDBQAAAAAAAAAAAAAAAAARITFBUWESIv/aAAwDAQACEQMRAD8AoOnTV1QTD7JJshP3vSM3P//Z) repeat top left; } .debug-grid-16-solid { background:white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NzY3MkJEN0U2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NzY3MkJEN0Y2N0M1MTFFNkIyQkNFMjQwODEwMDIxNzEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3NjcyQkQ3QzY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo3NjcyQkQ3RDY3QzUxMUU2QjJCQ0UyNDA4MTAwMjE3MSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pve6J3kAAAAzSURBVHjaYvz//z8D0UDsMwMjSRoYP5Gq4SPNbRjVMEQ1fCRDg+in/6+J1AJUxsgAEGAA31BAJMS0GYEAAAAASUVORK5CYII=) repeat top left; } ================================================ FILE: scss/_debug.scss ================================================ // Converted Variables // Custom Media Query Variables body { outline: 1px solid #2980B9!important; } article { outline: 1px solid #3498DB!important; } nav { outline: 1px solid #0088C3!important; } aside { outline: 1px solid #33A0CE!important; } section { outline: 1px solid #66B8DA!important; } header { outline: 1px solid #99CFE7!important; } footer { outline: 1px solid #CCE7F3!important; } h1 { outline: 1px solid #162544!important; } h2 { outline: 1px solid #314E6E!important; } h3 { outline: 1px solid #3E5E85!important; } h4 { outline: 1px solid #449BAF!important; } h5 { outline: 1px solid #C7D1CB!important; } h6 { outline: 1px solid #4371D0!important; } main { outline: 1px solid #2F4F90!important; } address { outline: 1px solid #1A2C51!important; } div { outline: 1px solid #036CDB!important; } p { outline: 1px solid #AC050B!important; } hr { outline: 1px solid #FF063F!important; } pre { outline: 1px solid #850440!important; } blockquote { outline: 1px solid #F1B8E7!important; } ol { outline: 1px solid #FF050C!important; } ul { outline: 1px solid #D90416!important; } li { outline: 1px solid #D90416!important; } dl { outline: 1px solid #FD3427!important; } dt { outline: 1px solid #FF0043!important; } dd { outline: 1px solid #E80174!important; } figure { outline: 1px solid #FF00BB!important; } figcaption { outline: 1px solid #BF0032!important; } table { outline: 1px solid #00CC99!important; } caption { outline: 1px solid #37FFC4!important; } thead { outline: 1px solid #98DACA!important; } tbody { outline: 1px solid #64A7A0!important; } tfoot { outline: 1px solid #22746B!important; } tr { outline: 1px solid #86C0B2!important; } th { outline: 1px solid #A1E7D6!important; } td { outline: 1px solid #3F5A54!important; } col { outline: 1px solid #6C9A8F!important; } colgroup { outline: 1px solid #6C9A9D!important; } button { outline: 1px solid #DA8301!important; } datalist { outline: 1px solid #C06000!important; } fieldset { outline: 1px solid #D95100!important; } form { outline: 1px solid #D23600!important; } input { outline: 1px solid #FCA600!important; } keygen { outline: 1px solid #B31E00!important; } label { outline: 1px solid #EE8900!important; } legend { outline: 1px solid #DE6D00!important; } meter { outline: 1px solid #E8630C!important; } optgroup { outline: 1px solid #B33600!important; } option { outline: 1px solid #FF8A00!important; } output { outline: 1px solid #FF9619!important; } progress { outline: 1px solid #E57C00!important; } select { outline: 1px solid #E26E0F!important; } textarea { outline: 1px solid #CC5400!important; } details { outline: 1px solid #33848F!important; } summary { outline: 1px solid #60A1A6!important; } command { outline: 1px solid #438DA1!important; } menu { outline: 1px solid #449DA6!important; } del { outline: 1px solid #BF0000!important; } ins { outline: 1px solid #400000!important; } img { outline: 1px solid #22746B!important; } iframe { outline: 1px solid #64A7A0!important; } embed { outline: 1px solid #98DACA!important; } object { outline: 1px solid #00CC99!important; } param { outline: 1px solid #37FFC4!important; } video { outline: 1px solid #6EE866!important; } audio { outline: 1px solid #027353!important; } source { outline: 1px solid #012426!important; } canvas { outline: 1px solid #A2F570!important; } track { outline: 1px solid #59A600!important; } map { outline: 1px solid #7BE500!important; } area { outline: 1px solid #305900!important; } a { outline: 1px solid #FF62AB!important; } em { outline: 1px solid #800B41!important; } strong { outline: 1px solid #FF1583!important; } i { outline: 1px solid #803156!important; } b { outline: 1px solid #CC1169!important; } u { outline: 1px solid #FF0430!important; } s { outline: 1px solid #F805E3!important; } small { outline: 1px solid #D107B2!important; } abbr { outline: 1px solid #4A0263!important; } q { outline: 1px solid #240018!important; } cite { outline: 1px solid #64003C!important; } dfn { outline: 1px solid #B4005A!important; } sub { outline: 1px solid #DBA0C8!important; } sup { outline: 1px solid #CC0256!important; } time { outline: 1px solid #D6606D!important; } code { outline: 1px solid #E04251!important; } kbd { outline: 1px solid #5E001F!important; } samp { outline: 1px solid #9C0033!important; } var { outline: 1px solid #D90047!important; } mark { outline: 1px solid #FF0053!important; } bdi { outline: 1px solid #BF3668!important; } bdo { outline: 1px solid #6F1400!important; } ruby { outline: 1px solid #FF7B93!important; } rt { outline: 1px solid #FF2F54!important; } rp { outline: 1px solid #803E49!important; } span { outline: 1px solid #CC2643!important; } br { outline: 1px solid #DB687D!important; } wbr { outline: 1px solid #DB175B!important; } ================================================ FILE: scss/_debug_children.scss ================================================ // Converted Variables // Custom Media Query Variables /* DEBUG CHILDREN Just add the debug class to any element to see outlines on its children. */ .debug * { outline: 1px solid gold; } ================================================ FILE: scss/_display.scss ================================================ // Converted Variables // Custom Media Query Variables /* DISPLAY Docs: http://tachyons.io/docs/layout/display Base: d = display Modifiers: n = none b = block ib = inline-block it = inline-table t = table tc = table-cell tr = table-row tcol = table-column tcolg = table-column-group Media Query Extensions: -ns = not-small -m = medium -l = large */ .dn { display: none; } .di { display: inline; } .db { display: block; } .dib { display: inline-block; } .dit { display: inline-table; } .dt { display: table; } .dtc { display: table-cell; } .dt-row { display: table-row; } .dt-row-group { display: table-row-group; } .dt-column { display: table-column; } .dt-column-group { display: table-column-group; } /* This will set table to full width and then all cells will be equal width */ .dt--fixed { table-layout: fixed; width: 100%; } @media #{$breakpoint-not-small} { .dn-ns { display: none; } .di-ns { display: inline; } .db-ns { display: block; } .dib-ns { display: inline-block; } .dit-ns { display: inline-table; } .dt-ns { display: table; } .dtc-ns { display: table-cell; } .dt-row-ns { display: table-row; } .dt-row-group-ns { display: table-row-group; } .dt-column-ns { display: table-column; } .dt-column-group-ns { display: table-column-group; } .dt--fixed-ns { table-layout: fixed; width: 100%; } } @media #{$breakpoint-medium} { .dn-m { display: none; } .di-m { display: inline; } .db-m { display: block; } .dib-m { display: inline-block; } .dit-m { display: inline-table; } .dt-m { display: table; } .dtc-m { display: table-cell; } .dt-row-m { display: table-row; } .dt-row-group-m { display: table-row-group; } .dt-column-m { display: table-column; } .dt-column-group-m { display: table-column-group; } .dt--fixed-m { table-layout: fixed; width: 100%; } } @media #{$breakpoint-large} { .dn-l { display: none; } .di-l { display: inline; } .db-l { display: block; } .dib-l { display: inline-block; } .dit-l { display: inline-table; } .dt-l { display: table; } .dtc-l { display: table-cell; } .dt-row-l { display: table-row; } .dt-row-group-l { display: table-row-group; } .dt-column-l { display: table-column; } .dt-column-group-l { display: table-column-group; } .dt--fixed-l { table-layout: fixed; width: 100%; } } ================================================ FILE: scss/_flexbox.scss ================================================ // Converted Variables // Custom Media Query Variables /* FLEXBOX Media Query Extensions: -ns = not-small -m = medium -l = large */ .flex { display: flex; } .inline-flex { display: inline-flex; } /* 1. Fix for Chrome 44 bug. * https://code.google.com/p/chromium/issues/detail?id=506893 */ .flex-auto { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } .flex-none { flex: none; } .flex-column { flex-direction: column; } .flex-row { flex-direction: row; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-wrap-reverse { flex-wrap: wrap-reverse; } .flex-column-reverse { flex-direction: column-reverse; } .flex-row-reverse { flex-direction: row-reverse; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-center { align-items: center; } .items-baseline { align-items: baseline; } .items-stretch { align-items: stretch; } .self-start { align-self: flex-start; } .self-end { align-self: flex-end; } .self-center { align-self: center; } .self-baseline { align-self: baseline; } .self-stretch { align-self: stretch; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-around { justify-content: space-around; } .content-start { align-content: flex-start; } .content-end { align-content: flex-end; } .content-center { align-content: center; } .content-between { align-content: space-between; } .content-around { align-content: space-around; } .content-stretch { align-content: stretch; } .order-0 { order: 0; } .order-1 { order: 1; } .order-2 { order: 2; } .order-3 { order: 3; } .order-4 { order: 4; } .order-5 { order: 5; } .order-6 { order: 6; } .order-7 { order: 7; } .order-8 { order: 8; } .order-last { order: 99999; } .flex-grow-0 { flex-grow: 0; } .flex-grow-1 { flex-grow: 1; } .flex-shrink-0 { flex-shrink: 0; } .flex-shrink-1 { flex-shrink: 1; } @media #{$breakpoint-not-small} { .flex-ns { display: flex; } .inline-flex-ns { display: inline-flex; } .flex-auto-ns { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } .flex-none-ns { flex: none; } .flex-column-ns { flex-direction: column; } .flex-row-ns { flex-direction: row; } .flex-wrap-ns { flex-wrap: wrap; } .flex-nowrap-ns { flex-wrap: nowrap; } .flex-wrap-reverse-ns { flex-wrap: wrap-reverse; } .flex-column-reverse-ns { flex-direction: column-reverse; } .flex-row-reverse-ns { flex-direction: row-reverse; } .items-start-ns { align-items: flex-start; } .items-end-ns { align-items: flex-end; } .items-center-ns { align-items: center; } .items-baseline-ns { align-items: baseline; } .items-stretch-ns { align-items: stretch; } .self-start-ns { align-self: flex-start; } .self-end-ns { align-self: flex-end; } .self-center-ns { align-self: center; } .self-baseline-ns { align-self: baseline; } .self-stretch-ns { align-self: stretch; } .justify-start-ns { justify-content: flex-start; } .justify-end-ns { justify-content: flex-end; } .justify-center-ns { justify-content: center; } .justify-between-ns { justify-content: space-between; } .justify-around-ns { justify-content: space-around; } .content-start-ns { align-content: flex-start; } .content-end-ns { align-content: flex-end; } .content-center-ns { align-content: center; } .content-between-ns { align-content: space-between; } .content-around-ns { align-content: space-around; } .content-stretch-ns { align-content: stretch; } .order-0-ns { order: 0; } .order-1-ns { order: 1; } .order-2-ns { order: 2; } .order-3-ns { order: 3; } .order-4-ns { order: 4; } .order-5-ns { order: 5; } .order-6-ns { order: 6; } .order-7-ns { order: 7; } .order-8-ns { order: 8; } .order-last-ns { order: 99999; } .flex-grow-0-ns { flex-grow: 0; } .flex-grow-1-ns { flex-grow: 1; } .flex-shrink-0-ns { flex-shrink: 0; } .flex-shrink-1-ns { flex-shrink: 1; } } @media #{$breakpoint-medium} { .flex-m { display: flex; } .inline-flex-m { display: inline-flex; } .flex-auto-m { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } .flex-none-m { flex: none; } .flex-column-m { flex-direction: column; } .flex-row-m { flex-direction: row; } .flex-wrap-m { flex-wrap: wrap; } .flex-nowrap-m { flex-wrap: nowrap; } .flex-wrap-reverse-m { flex-wrap: wrap-reverse; } .flex-column-reverse-m { flex-direction: column-reverse; } .flex-row-reverse-m { flex-direction: row-reverse; } .items-start-m { align-items: flex-start; } .items-end-m { align-items: flex-end; } .items-center-m { align-items: center; } .items-baseline-m { align-items: baseline; } .items-stretch-m { align-items: stretch; } .self-start-m { align-self: flex-start; } .self-end-m { align-self: flex-end; } .self-center-m { align-self: center; } .self-baseline-m { align-self: baseline; } .self-stretch-m { align-self: stretch; } .justify-start-m { justify-content: flex-start; } .justify-end-m { justify-content: flex-end; } .justify-center-m { justify-content: center; } .justify-between-m { justify-content: space-between; } .justify-around-m { justify-content: space-around; } .content-start-m { align-content: flex-start; } .content-end-m { align-content: flex-end; } .content-center-m { align-content: center; } .content-between-m { align-content: space-between; } .content-around-m { align-content: space-around; } .content-stretch-m { align-content: stretch; } .order-0-m { order: 0; } .order-1-m { order: 1; } .order-2-m { order: 2; } .order-3-m { order: 3; } .order-4-m { order: 4; } .order-5-m { order: 5; } .order-6-m { order: 6; } .order-7-m { order: 7; } .order-8-m { order: 8; } .order-last-m { order: 99999; } .flex-grow-0-m { flex-grow: 0; } .flex-grow-1-m { flex-grow: 1; } .flex-shrink-0-m { flex-shrink: 0; } .flex-shrink-1-m { flex-shrink: 1; } } @media #{$breakpoint-large} { .flex-l { display: flex; } .inline-flex-l { display: inline-flex; } .flex-auto-l { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ } .flex-none-l { flex: none; } .flex-column-l { flex-direction: column; } .flex-row-l { flex-direction: row; } .flex-wrap-l { flex-wrap: wrap; } .flex-nowrap-l { flex-wrap: nowrap; } .flex-wrap-reverse-l { flex-wrap: wrap-reverse; } .flex-column-reverse-l { flex-direction: column-reverse; } .flex-row-reverse-l { flex-direction: row-reverse; } .items-start-l { align-items: flex-start; } .items-end-l { align-items: flex-end; } .items-center-l { align-items: center; } .items-baseline-l { align-items: baseline; } .items-stretch-l { align-items: stretch; } .self-start-l { align-self: flex-start; } .self-end-l { align-self: flex-end; } .self-center-l { align-self: center; } .self-baseline-l { align-self: baseline; } .self-stretch-l { align-self: stretch; } .justify-start-l { justify-content: flex-start; } .justify-end-l { justify-content: flex-end; } .justify-center-l { justify-content: center; } .justify-between-l { justify-content: space-between; } .justify-around-l { justify-content: space-around; } .content-start-l { align-content: flex-start; } .content-end-l { align-content: flex-end; } .content-center-l { align-content: center; } .content-between-l { align-content: space-between; } .content-around-l { align-content: space-around; } .content-stretch-l { align-content: stretch; } .order-0-l { order: 0; } .order-1-l { order: 1; } .order-2-l { order: 2; } .order-3-l { order: 3; } .order-4-l { order: 4; } .order-5-l { order: 5; } .order-6-l { order: 6; } .order-7-l { order: 7; } .order-8-l { order: 8; } .order-last-l { order: 99999; } .flex-grow-0-l { flex-grow: 0; } .flex-grow-1-l { flex-grow: 1; } .flex-shrink-0-l { flex-shrink: 0; } .flex-shrink-1-l { flex-shrink: 1; } } ================================================ FILE: scss/_floats.scss ================================================ // Converted Variables // Custom Media Query Variables /* FLOATS http://tachyons.io/docs/layout/floats/ 1. Floated elements are automatically rendered as block level elements. Setting floats to display inline will fix the double margin bug in ie6. You know... just in case. 2. Don't forget to clearfix your floats with .cf Base: f = float Modifiers: l = left r = right n = none Media Query Extensions: -ns = not-small -m = medium -l = large */ .fl { float: left; _display: inline; } .fr { float: right; _display: inline; } .fn { float: none; } @media #{$breakpoint-not-small} { .fl-ns { float: left; _display: inline; } .fr-ns { float: right; _display: inline; } .fn-ns { float: none; } } @media #{$breakpoint-medium} { .fl-m { float: left; _display: inline; } .fr-m { float: right; _display: inline; } .fn-m { float: none; } } @media #{$breakpoint-large} { .fl-l { float: left; _display: inline; } .fr-l { float: right; _display: inline; } .fn-l { float: none; } } ================================================ FILE: scss/_font-family.scss ================================================ // Converted Variables // Custom Media Query Variables /* FONT FAMILY GROUPS Docs: http://tachyons.io/docs/typography/font-family/ */ .sans-serif { font-family: $sans-serif; } .serif { font-family: $serif; } .system-sans-serif { font-family: sans-serif; } .system-serif { font-family: serif; } /* Monospaced Typefaces (for code) */ /* From http://cssfontstack.com */ code, .code { font-family: Consolas, monaco, monospace; } .courier { font-family: 'Courier Next', courier, monospace; } /* Sans-Serif Typefaces */ .helvetica { font-family: 'helvetica neue', helvetica, sans-serif; } .avenir { font-family: 'avenir next', avenir, sans-serif; } /* Serif Typefaces */ .athelas { font-family: athelas, georgia, serif; } .georgia { font-family: georgia, serif; } .times { font-family: times, serif; } .bodoni { font-family: "Bodoni MT", serif; } .calisto { font-family: "Calisto MT", serif; } .garamond { font-family: garamond, serif; } .baskerville { font-family: baskerville, serif; } ================================================ FILE: scss/_font-style.scss ================================================ // Converted Variables // Custom Media Query Variables /* FONT STYLE Docs: http://tachyons.io/docs/typography/font-style/ Media Query Extensions: -ns = not-small -m = medium -l = large */ .i { font-style: italic; } .fs-normal { font-style: normal; } @media #{$breakpoint-not-small} { .i-ns { font-style: italic; } .fs-normal-ns { font-style: normal; } } @media #{$breakpoint-medium} { .i-m { font-style: italic; } .fs-normal-m { font-style: normal; } } @media #{$breakpoint-large} { .i-l { font-style: italic; } .fs-normal-l { font-style: normal; } } ================================================ FILE: scss/_font-weight.scss ================================================ // Converted Variables // Custom Media Query Variables /* FONT WEIGHT Docs: http://tachyons.io/docs/typography/font-weight/ Base fw = font-weight Modifiers: 1 = literal value 100 2 = literal value 200 3 = literal value 300 4 = literal value 400 5 = literal value 500 6 = literal value 600 7 = literal value 700 8 = literal value 800 9 = literal value 900 Media Query Extensions: -ns = not-small -m = medium -l = large */ .normal { font-weight: normal; } .b { font-weight: bold; } .fw1 { font-weight: 100; } .fw2 { font-weight: 200; } .fw3 { font-weight: 300; } .fw4 { font-weight: 400; } .fw5 { font-weight: 500; } .fw6 { font-weight: 600; } .fw7 { font-weight: 700; } .fw8 { font-weight: 800; } .fw9 { font-weight: 900; } @media #{$breakpoint-not-small} { .normal-ns { font-weight: normal; } .b-ns { font-weight: bold; } .fw1-ns { font-weight: 100; } .fw2-ns { font-weight: 200; } .fw3-ns { font-weight: 300; } .fw4-ns { font-weight: 400; } .fw5-ns { font-weight: 500; } .fw6-ns { font-weight: 600; } .fw7-ns { font-weight: 700; } .fw8-ns { font-weight: 800; } .fw9-ns { font-weight: 900; } } @media #{$breakpoint-medium} { .normal-m { font-weight: normal; } .b-m { font-weight: bold; } .fw1-m { font-weight: 100; } .fw2-m { font-weight: 200; } .fw3-m { font-weight: 300; } .fw4-m { font-weight: 400; } .fw5-m { font-weight: 500; } .fw6-m { font-weight: 600; } .fw7-m { font-weight: 700; } .fw8-m { font-weight: 800; } .fw9-m { font-weight: 900; } } @media #{$breakpoint-large} { .normal-l { font-weight: normal; } .b-l { font-weight: bold; } .fw1-l { font-weight: 100; } .fw2-l { font-weight: 200; } .fw3-l { font-weight: 300; } .fw4-l { font-weight: 400; } .fw5-l { font-weight: 500; } .fw6-l { font-weight: 600; } .fw7-l { font-weight: 700; } .fw8-l { font-weight: 800; } .fw9-l { font-weight: 900; } } ================================================ FILE: scss/_forms.scss ================================================ // Converted Variables // Custom Media Query Variables /* FORMS */ .input-reset { -webkit-appearance: none; -moz-appearance: none; } .button-reset::-moz-focus-inner, .input-reset::-moz-focus-inner { border: 0; padding: 0; } ================================================ FILE: scss/_gradients.scss ================================================ // Converted Variables // Custom Media Query Variables /* GRADIENTS */ .gradient-blue { background-image: linear-gradient(#4570B0, #0081C2); } .gradient-blue-reversed { background-image: linear-gradient(#0081C2, #4570B0); } .gradient-light-blue { background-image: linear-gradient(#76D3FE, #008AE0); } .gradient-light-blue-reversed { background-image: linear-gradient(#008AE0, #76D3FE); } ================================================ FILE: scss/_heights.scss ================================================ // Converted Variables // Custom Media Query Variables /* HEIGHTS Docs: http://tachyons.io/docs/layout/heights/ Base: h = height min-h = min-height min-vh = min-height vertical screen height vh = vertical screen height Modifiers 1 = 1st step in height scale 2 = 2nd step in height scale 3 = 3rd step in height scale 4 = 4th step in height scale 5 = 5th step in height scale -25 = literal value 25% -50 = literal value 50% -75 = literal value 75% -100 = literal value 100% -auto = string value of auto -inherit = string value of inherit Media Query Extensions: -ns = not-small -m = medium -l = large */ /* Height Scale */ .h1 { height: $height-1; } .h2 { height: $height-2; } .h3 { height: $height-3; } .h4 { height: $height-4; } .h5 { height: $height-5; } /* Height Percentages - Based off of height of parent */ .h-25 { height: 25%; } .h-50 { height: 50%; } .h-75 { height: 75%; } .h-100 { height: 100%; } .min-h-100 { min-height: 100%; } /* Screen Height Percentage */ .vh-25 { height: 25vh; } .vh-50 { height: 50vh; } .vh-75 { height: 75vh; } .vh-100 { height: 100vh; } .min-vh-100 { min-height: 100vh; } /* String Properties */ .h-auto { height: auto; } .h-inherit { height: inherit; } @media #{$breakpoint-not-small} { .h1-ns { height: $height-1; } .h2-ns { height: $height-2; } .h3-ns { height: $height-3; } .h4-ns { height: $height-4; } .h5-ns { height: $height-5; } .h-25-ns { height: 25%; } .h-50-ns { height: 50%; } .h-75-ns { height: 75%; } .h-100-ns { height: 100%; } .min-h-100-ns { min-height: 100%; } .vh-25-ns { height: 25vh; } .vh-50-ns { height: 50vh; } .vh-75-ns { height: 75vh; } .vh-100-ns { height: 100vh; } .min-vh-100-ns { min-height: 100vh; } .h-auto-ns { height: auto; } .h-inherit-ns { height: inherit; } } @media #{$breakpoint-medium} { .h1-m { height: $height-1; } .h2-m { height: $height-2; } .h3-m { height: $height-3; } .h4-m { height: $height-4; } .h5-m { height: $height-5; } .h-25-m { height: 25%; } .h-50-m { height: 50%; } .h-75-m { height: 75%; } .h-100-m { height: 100%; } .min-h-100-m { min-height: 100%; } .vh-25-m { height: 25vh; } .vh-50-m { height: 50vh; } .vh-75-m { height: 75vh; } .vh-100-m { height: 100vh; } .min-vh-100-m { min-height: 100vh; } .h-auto-m { height: auto; } .h-inherit-m { height: inherit; } } @media #{$breakpoint-large} { .h1-l { height: $height-1; } .h2-l { height: $height-2; } .h3-l { height: $height-3; } .h4-l { height: $height-4; } .h5-l { height: $height-5; } .h-25-l { height: 25%; } .h-50-l { height: 50%; } .h-75-l { height: 75%; } .h-100-l { height: 100%; } .min-h-100-l { min-height: 100%; } .vh-25-l { height: 25vh; } .vh-50-l { height: 50vh; } .vh-75-l { height: 75vh; } .vh-100-l { height: 100vh; } .min-vh-100-l { min-height: 100vh; } .h-auto-l { height: auto; } .h-inherit-l { height: inherit; } } ================================================ FILE: scss/_hovers.scss ================================================ // Converted Variables // Custom Media Query Variables /* HOVER EFFECTS Docs: http://tachyons.io/docs/themes/hovers/ - Dim - Glow - Hide Child - Underline text - Grow - Pointer - Shadow */ /* Dim element on hover by adding the dim class. */ .dim { opacity: 1; transition: opacity .15s ease-in; } .dim:hover, .dim:focus { opacity: .5; transition: opacity .15s ease-in; } .dim:active { opacity: .8; transition: opacity .15s ease-out; } /* Animate opacity to 100% on hover by adding the glow class. */ .glow { transition: opacity .15s ease-in; } .glow:hover, .glow:focus { opacity: 1; transition: opacity .15s ease-in; } /* Hide child & reveal on hover: Put the hide-child class on a parent element and any nested element with the child class will be hidden and displayed on hover or focus.
Hidden until hover or focus
Hidden until hover or focus
Hidden until hover or focus
Hidden until hover or focus
*/ .hide-child .child { opacity: 0; transition: opacity .15s ease-in; } .hide-child:hover .child, .hide-child:focus .child, .hide-child:active .child { opacity: 1; transition: opacity .15s ease-in; } .underline-hover:hover, .underline-hover:focus { text-decoration: underline; } /* Can combine this with overflow-hidden to make background images grow on hover * even if you are using background-size: cover */ .grow { -moz-osx-font-smoothing: grayscale; backface-visibility: hidden; transform: translateZ(0); transition: transform 0.25s ease-out; } .grow:hover, .grow:focus { transform: scale(1.05); } .grow:active { transform: scale(.90); } .grow-large { -moz-osx-font-smoothing: grayscale; backface-visibility: hidden; transform: translateZ(0); transition: transform .25s ease-in-out; } .grow-large:hover, .grow-large:focus { transform: scale(1.2); } .grow-large:active { transform: scale(.95); } /* Add pointer on hover */ .pointer:hover { cursor: pointer; } /* Add shadow on hover. Performant box-shadow animation pattern from http://tobiasahlin.com/blog/how-to-animate-box-shadow/ */ .shadow-hover { cursor: pointer; position: relative; transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .shadow-hover::after { content: ''; box-shadow: 0px 0px 16px 2px rgba( 0, 0, 0, .2 ); border-radius: inherit; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .shadow-hover:hover::after, .shadow-hover:focus::after { opacity: 1; } /* Combine with classes in skins and skins-pseudo for * many different transition possibilities. */ .bg-animate, .bg-animate:hover, .bg-animate:focus { transition: background-color .15s ease-in-out; } ================================================ FILE: scss/_images.scss ================================================ // Converted Variables // Custom Media Query Variables /* IMAGES Docs: http://tachyons.io/docs/elements/images/ */ /* Responsive images! */ img { max-width: 100%; } ================================================ FILE: scss/_letter-spacing.scss ================================================ // Converted Variables // Custom Media Query Variables /* LETTER SPACING Docs: http://tachyons.io/docs/typography/tracking/ Media Query Extensions: -ns = not-small -m = medium -l = large */ .tracked { letter-spacing: $letter-spacing-1; } .tracked-tight { letter-spacing: $letter-spacing-tight; } .tracked-mega { letter-spacing: $letter-spacing-2; } @media #{$breakpoint-not-small} { .tracked-ns { letter-spacing: $letter-spacing-1; } .tracked-tight-ns { letter-spacing: $letter-spacing-tight; } .tracked-mega-ns { letter-spacing: $letter-spacing-2; } } @media #{$breakpoint-medium} { .tracked-m { letter-spacing: $letter-spacing-1; } .tracked-tight-m { letter-spacing: $letter-spacing-tight; } .tracked-mega-m { letter-spacing: $letter-spacing-2; } } @media #{$breakpoint-large} { .tracked-l { letter-spacing: $letter-spacing-1; } .tracked-tight-l { letter-spacing: $letter-spacing-tight; } .tracked-mega-l { letter-spacing: $letter-spacing-2; } } ================================================ FILE: scss/_line-height.scss ================================================ // Converted Variables // Custom Media Query Variables /* LINE HEIGHT / LEADING Docs: http://tachyons.io/docs/typography/line-height Media Query Extensions: -ns = not-small -m = medium -l = large */ .lh-solid { line-height: $line-height-solid; } .lh-title { line-height: $line-height-title; } .lh-copy { line-height: $line-height-copy; } @media #{$breakpoint-not-small} { .lh-solid-ns { line-height: $line-height-solid; } .lh-title-ns { line-height: $line-height-title; } .lh-copy-ns { line-height: $line-height-copy; } } @media #{$breakpoint-medium} { .lh-solid-m { line-height: $line-height-solid; } .lh-title-m { line-height: $line-height-title; } .lh-copy-m { line-height: $line-height-copy; } } @media #{$breakpoint-large} { .lh-solid-l { line-height: $line-height-solid; } .lh-title-l { line-height: $line-height-title; } .lh-copy-l { line-height: $line-height-copy; } } ================================================ FILE: scss/_links.scss ================================================ // Converted Variables // Custom Media Query Variables /* LINKS Docs: http://tachyons.io/docs/elements/links/ */ .link { text-decoration: none; transition: color .15s ease-in; } .link:link, .link:visited { transition: color .15s ease-in; } .link:hover { transition: color .15s ease-in; } .link:active { transition: color .15s ease-in; } .link:focus { transition: color .15s ease-in; outline: 1px dotted currentColor; } ================================================ FILE: scss/_lists.scss ================================================ // Converted Variables // Custom Media Query Variables /* LISTS http://tachyons.io/docs/elements/lists/ */ .list { list-style-type: none; } ================================================ FILE: scss/_max-widths.scss ================================================ // Converted Variables // Custom Media Query Variables /* MAX WIDTHS Docs: http://tachyons.io/docs/layout/max-widths/ Base: mw = max-width Modifiers 1 = 1st step in width scale 2 = 2nd step in width scale 3 = 3rd step in width scale 4 = 4th step in width scale 5 = 5th step in width scale 6 = 6st step in width scale 7 = 7nd step in width scale 8 = 8rd step in width scale 9 = 9th step in width scale -100 = literal value 100% -none = string value none Media Query Extensions: -ns = not-small -m = medium -l = large */ /* Max Width Percentages */ .mw-100 { max-width: 100%; } /* Max Width Scale */ .mw1 { max-width: $max-width-1; } .mw2 { max-width: $max-width-2; } .mw3 { max-width: $max-width-3; } .mw4 { max-width: $max-width-4; } .mw5 { max-width: $max-width-5; } .mw6 { max-width: $max-width-6; } .mw7 { max-width: $max-width-7; } .mw8 { max-width: $max-width-8; } .mw9 { max-width: $max-width-9; } /* Max Width String Properties */ .mw-none { max-width: none; } @media #{$breakpoint-not-small} { .mw-100-ns { max-width: 100%; } .mw1-ns { max-width: $max-width-1; } .mw2-ns { max-width: $max-width-2; } .mw3-ns { max-width: $max-width-3; } .mw4-ns { max-width: $max-width-4; } .mw5-ns { max-width: $max-width-5; } .mw6-ns { max-width: $max-width-6; } .mw7-ns { max-width: $max-width-7; } .mw8-ns { max-width: $max-width-8; } .mw9-ns { max-width: $max-width-9; } .mw-none-ns { max-width: none; } } @media #{$breakpoint-medium} { .mw-100-m { max-width: 100%; } .mw1-m { max-width: $max-width-1; } .mw2-m { max-width: $max-width-2; } .mw3-m { max-width: $max-width-3; } .mw4-m { max-width: $max-width-4; } .mw5-m { max-width: $max-width-5; } .mw6-m { max-width: $max-width-6; } .mw7-m { max-width: $max-width-7; } .mw8-m { max-width: $max-width-8; } .mw9-m { max-width: $max-width-9; } .mw-none-m { max-width: none; } } @media #{$breakpoint-large} { .mw-100-l { max-width: 100%; } .mw1-l { max-width: $max-width-1; } .mw2-l { max-width: $max-width-2; } .mw3-l { max-width: $max-width-3; } .mw4-l { max-width: $max-width-4; } .mw5-l { max-width: $max-width-5; } .mw6-l { max-width: $max-width-6; } .mw7-l { max-width: $max-width-7; } .mw8-l { max-width: $max-width-8; } .mw9-l { max-width: $max-width-9; } .mw-none-l { max-width: none; } } ================================================ FILE: scss/_module-template.scss ================================================ // Converted Variables // Custom Media Query Variables /* MODULE NAME Use this scaffolding to create or extend your own modules with tachyons style architecture. */ @media #{$breakpoint-not-small} { } @media #{$breakpoint-medium} { } @media #{$breakpoint-large} { } ================================================ FILE: scss/_negative-margins.scss ================================================ // Converted Variables // Custom Media Query Variables /* NEGATIVE MARGINS Base: n = negative Modifiers: a = all t = top r = right b = bottom l = left 1 = 1st step in spacing scale 2 = 2nd step in spacing scale 3 = 3rd step in spacing scale 4 = 4th step in spacing scale 5 = 5th step in spacing scale 6 = 6th step in spacing scale 7 = 7th step in spacing scale Media Query Extensions: -ns = not-small -m = medium -l = large */ .na1 { margin: -$spacing-extra-small; } .na2 { margin: -$spacing-small; } .na3 { margin: -$spacing-medium; } .na4 { margin: -$spacing-large; } .na5 { margin: -$spacing-extra-large; } .na6 { margin: -$spacing-extra-extra-large; } .na7 { margin: -$spacing-extra-extra-extra-large; } .nl1 { margin-left: -$spacing-extra-small; } .nl2 { margin-left: -$spacing-small; } .nl3 { margin-left: -$spacing-medium; } .nl4 { margin-left: -$spacing-large; } .nl5 { margin-left: -$spacing-extra-large; } .nl6 { margin-left: -$spacing-extra-extra-large; } .nl7 { margin-left: -$spacing-extra-extra-extra-large; } .nr1 { margin-right: -$spacing-extra-small; } .nr2 { margin-right: -$spacing-small; } .nr3 { margin-right: -$spacing-medium; } .nr4 { margin-right: -$spacing-large; } .nr5 { margin-right: -$spacing-extra-large; } .nr6 { margin-right: -$spacing-extra-extra-large; } .nr7 { margin-right: -$spacing-extra-extra-extra-large; } .nb1 { margin-bottom: -$spacing-extra-small; } .nb2 { margin-bottom: -$spacing-small; } .nb3 { margin-bottom: -$spacing-medium; } .nb4 { margin-bottom: -$spacing-large; } .nb5 { margin-bottom: -$spacing-extra-large; } .nb6 { margin-bottom: -$spacing-extra-extra-large; } .nb7 { margin-bottom: -$spacing-extra-extra-extra-large; } .nt1 { margin-top: -$spacing-extra-small; } .nt2 { margin-top: -$spacing-small; } .nt3 { margin-top: -$spacing-medium; } .nt4 { margin-top: -$spacing-large; } .nt5 { margin-top: -$spacing-extra-large; } .nt6 { margin-top: -$spacing-extra-extra-large; } .nt7 { margin-top: -$spacing-extra-extra-extra-large; } @media #{$breakpoint-not-small} { .na1-ns { margin: -$spacing-extra-small; } .na2-ns { margin: -$spacing-small; } .na3-ns { margin: -$spacing-medium; } .na4-ns { margin: -$spacing-large; } .na5-ns { margin: -$spacing-extra-large; } .na6-ns { margin: -$spacing-extra-extra-large; } .na7-ns { margin: -$spacing-extra-extra-extra-large; } .nl1-ns { margin-left: -$spacing-extra-small; } .nl2-ns { margin-left: -$spacing-small; } .nl3-ns { margin-left: -$spacing-medium; } .nl4-ns { margin-left: -$spacing-large; } .nl5-ns { margin-left: -$spacing-extra-large; } .nl6-ns { margin-left: -$spacing-extra-extra-large; } .nl7-ns { margin-left: -$spacing-extra-extra-extra-large; } .nr1-ns { margin-right: -$spacing-extra-small; } .nr2-ns { margin-right: -$spacing-small; } .nr3-ns { margin-right: -$spacing-medium; } .nr4-ns { margin-right: -$spacing-large; } .nr5-ns { margin-right: -$spacing-extra-large; } .nr6-ns { margin-right: -$spacing-extra-extra-large; } .nr7-ns { margin-right: -$spacing-extra-extra-extra-large; } .nb1-ns { margin-bottom: -$spacing-extra-small; } .nb2-ns { margin-bottom: -$spacing-small; } .nb3-ns { margin-bottom: -$spacing-medium; } .nb4-ns { margin-bottom: -$spacing-large; } .nb5-ns { margin-bottom: -$spacing-extra-large; } .nb6-ns { margin-bottom: -$spacing-extra-extra-large; } .nb7-ns { margin-bottom: -$spacing-extra-extra-extra-large; } .nt1-ns { margin-top: -$spacing-extra-small; } .nt2-ns { margin-top: -$spacing-small; } .nt3-ns { margin-top: -$spacing-medium; } .nt4-ns { margin-top: -$spacing-large; } .nt5-ns { margin-top: -$spacing-extra-large; } .nt6-ns { margin-top: -$spacing-extra-extra-large; } .nt7-ns { margin-top: -$spacing-extra-extra-extra-large; } } @media #{$breakpoint-medium} { .na1-m { margin: -$spacing-extra-small; } .na2-m { margin: -$spacing-small; } .na3-m { margin: -$spacing-medium; } .na4-m { margin: -$spacing-large; } .na5-m { margin: -$spacing-extra-large; } .na6-m { margin: -$spacing-extra-extra-large; } .na7-m { margin: -$spacing-extra-extra-extra-large; } .nl1-m { margin-left: -$spacing-extra-small; } .nl2-m { margin-left: -$spacing-small; } .nl3-m { margin-left: -$spacing-medium; } .nl4-m { margin-left: -$spacing-large; } .nl5-m { margin-left: -$spacing-extra-large; } .nl6-m { margin-left: -$spacing-extra-extra-large; } .nl7-m { margin-left: -$spacing-extra-extra-extra-large; } .nr1-m { margin-right: -$spacing-extra-small; } .nr2-m { margin-right: -$spacing-small; } .nr3-m { margin-right: -$spacing-medium; } .nr4-m { margin-right: -$spacing-large; } .nr5-m { margin-right: -$spacing-extra-large; } .nr6-m { margin-right: -$spacing-extra-extra-large; } .nr7-m { margin-right: -$spacing-extra-extra-extra-large; } .nb1-m { margin-bottom: -$spacing-extra-small; } .nb2-m { margin-bottom: -$spacing-small; } .nb3-m { margin-bottom: -$spacing-medium; } .nb4-m { margin-bottom: -$spacing-large; } .nb5-m { margin-bottom: -$spacing-extra-large; } .nb6-m { margin-bottom: -$spacing-extra-extra-large; } .nb7-m { margin-bottom: -$spacing-extra-extra-extra-large; } .nt1-m { margin-top: -$spacing-extra-small; } .nt2-m { margin-top: -$spacing-small; } .nt3-m { margin-top: -$spacing-medium; } .nt4-m { margin-top: -$spacing-large; } .nt5-m { margin-top: -$spacing-extra-large; } .nt6-m { margin-top: -$spacing-extra-extra-large; } .nt7-m { margin-top: -$spacing-extra-extra-extra-large; } } @media #{$breakpoint-large} { .na1-l { margin: -$spacing-extra-small; } .na2-l { margin: -$spacing-small; } .na3-l { margin: -$spacing-medium; } .na4-l { margin: -$spacing-large; } .na5-l { margin: -$spacing-extra-large; } .na6-l { margin: -$spacing-extra-extra-large; } .na7-l { margin: -$spacing-extra-extra-extra-large; } .nl1-l { margin-left: -$spacing-extra-small; } .nl2-l { margin-left: -$spacing-small; } .nl3-l { margin-left: -$spacing-medium; } .nl4-l { margin-left: -$spacing-large; } .nl5-l { margin-left: -$spacing-extra-large; } .nl6-l { margin-left: -$spacing-extra-extra-large; } .nl7-l { margin-left: -$spacing-extra-extra-extra-large; } .nr1-l { margin-right: -$spacing-extra-small; } .nr2-l { margin-right: -$spacing-small; } .nr3-l { margin-right: -$spacing-medium; } .nr4-l { margin-right: -$spacing-large; } .nr5-l { margin-right: -$spacing-extra-large; } .nr6-l { margin-right: -$spacing-extra-extra-large; } .nr7-l { margin-right: -$spacing-extra-extra-extra-large; } .nb1-l { margin-bottom: -$spacing-extra-small; } .nb2-l { margin-bottom: -$spacing-small; } .nb3-l { margin-bottom: -$spacing-medium; } .nb4-l { margin-bottom: -$spacing-large; } .nb5-l { margin-bottom: -$spacing-extra-large; } .nb6-l { margin-bottom: -$spacing-extra-extra-large; } .nb7-l { margin-bottom: -$spacing-extra-extra-extra-large; } .nt1-l { margin-top: -$spacing-extra-small; } .nt2-l { margin-top: -$spacing-small; } .nt3-l { margin-top: -$spacing-medium; } .nt4-l { margin-top: -$spacing-large; } .nt5-l { margin-top: -$spacing-extra-large; } .nt6-l { margin-top: -$spacing-extra-extra-large; } .nt7-l { margin-top: -$spacing-extra-extra-extra-large; } } ================================================ FILE: scss/_nested.scss ================================================ // Converted Variables // Custom Media Query Variables /* NESTED Tachyons module for styling nested elements that are generated by a cms. */ .nested-copy-line-height p, .nested-copy-line-height ul, .nested-copy-line-height ol { line-height: $line-height-copy; } .nested-headline-line-height h1, .nested-headline-line-height h2, .nested-headline-line-height h3, .nested-headline-line-height h4, .nested-headline-line-height h5, .nested-headline-line-height h6 { line-height: $line-height-title; } .nested-list-reset ul, .nested-list-reset ol { padding-left: 0; margin-left: 0; list-style-type: none; } .nested-copy-indent p+p { text-indent: $letter-spacing-1; margin-top: $spacing-none; margin-bottom: $spacing-none; } .nested-copy-seperator p+p { margin-top: $spacing-copy-separator; } .nested-img img { width: 100%; max-width: 100%; display: block; } .nested-links a { color: $blue; transition: color .15s ease-in; } .nested-links a:hover, .nested-links a:focus { color: $light-blue; transition: color .15s ease-in; } ================================================ FILE: scss/_normalize.scss ================================================ // Converted Variables // Custom Media Query Variables /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and in iOS. */ html { line-height: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /** * Add the correct display in IE 9-. */ article, aside, footer, header, nav, section { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in IE. */ figcaption, figure, main { /* 1 */ display: block; } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * 1. Remove the bottom border in Chrome 57- and Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Add the correct display in IE 9-. */ audio, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], /* 1 */ [type="reset"], [type="submit"] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * 1. Add the correct display in IE 9-. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. */ details, /* 1 */ menu { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting ========================================================================== */ /** * Add the correct display in IE 9-. */ canvas { display: inline-block; } /** * Add the correct display in IE. */ template { display: none; } /* Hidden ========================================================================== */ /** * Add the correct display in IE 10-. */ [hidden] { display: none; } ================================================ FILE: scss/_opacity.scss ================================================ // Converted Variables // Custom Media Query Variables /* OPACITY Docs: http://tachyons.io/docs/themes/opacity/ */ .o-100 { opacity: 1; } .o-90 { opacity: .9; } .o-80 { opacity: .8; } .o-70 { opacity: .7; } .o-60 { opacity: .6; } .o-50 { opacity: .5; } .o-40 { opacity: .4; } .o-30 { opacity: .3; } .o-20 { opacity: .2; } .o-10 { opacity: .1; } .o-05 { opacity: .05; } .o-025 { opacity: .025; } .o-0 { opacity: 0; } ================================================ FILE: scss/_outlines.scss ================================================ // Converted Variables // Custom Media Query Variables /* OUTLINES Media Query Extensions: -ns = not-small -m = medium -l = large */ .outline { outline: 1px solid; } .outline-transparent { outline: 1px solid transparent; } .outline-0 { outline: 0; } @media #{$breakpoint-not-small} { .outline-ns { outline: 1px solid; } .outline-transparent-ns { outline: 1px solid transparent; } .outline-0-ns { outline: 0; } } @media #{$breakpoint-medium} { .outline-m { outline: 1px solid; } .outline-transparent-m { outline: 1px solid transparent; } .outline-0-m { outline: 0; } } @media #{$breakpoint-large} { .outline-l { outline: 1px solid; } .outline-transparent-l { outline: 1px solid transparent; } .outline-0-l { outline: 0; } } ================================================ FILE: scss/_overflow.scss ================================================ // Converted Variables // Custom Media Query Variables /* OVERFLOW Media Query Extensions: -ns = not-small -m = medium -l = large */ .overflow-visible { overflow: visible; } .overflow-hidden { overflow: hidden; } .overflow-scroll { overflow: scroll; } .overflow-auto { overflow: auto; } .overflow-x-visible { overflow-x: visible; } .overflow-x-hidden { overflow-x: hidden; } .overflow-x-scroll { overflow-x: scroll; } .overflow-x-auto { overflow-x: auto; } .overflow-y-visible { overflow-y: visible; } .overflow-y-hidden { overflow-y: hidden; } .overflow-y-scroll { overflow-y: scroll; } .overflow-y-auto { overflow-y: auto; } @media #{$breakpoint-not-small} { .overflow-visible-ns { overflow: visible; } .overflow-hidden-ns { overflow: hidden; } .overflow-scroll-ns { overflow: scroll; } .overflow-auto-ns { overflow: auto; } .overflow-x-visible-ns { overflow-x: visible; } .overflow-x-hidden-ns { overflow-x: hidden; } .overflow-x-scroll-ns { overflow-x: scroll; } .overflow-x-auto-ns { overflow-x: auto; } .overflow-y-visible-ns { overflow-y: visible; } .overflow-y-hidden-ns { overflow-y: hidden; } .overflow-y-scroll-ns { overflow-y: scroll; } .overflow-y-auto-ns { overflow-y: auto; } } @media #{$breakpoint-medium} { .overflow-visible-m { overflow: visible; } .overflow-hidden-m { overflow: hidden; } .overflow-scroll-m { overflow: scroll; } .overflow-auto-m { overflow: auto; } .overflow-x-visible-m { overflow-x: visible; } .overflow-x-hidden-m { overflow-x: hidden; } .overflow-x-scroll-m { overflow-x: scroll; } .overflow-x-auto-m { overflow-x: auto; } .overflow-y-visible-m { overflow-y: visible; } .overflow-y-hidden-m { overflow-y: hidden; } .overflow-y-scroll-m { overflow-y: scroll; } .overflow-y-auto-m { overflow-y: auto; } } @media #{$breakpoint-large} { .overflow-visible-l { overflow: visible; } .overflow-hidden-l { overflow: hidden; } .overflow-scroll-l { overflow: scroll; } .overflow-auto-l { overflow: auto; } .overflow-x-visible-l { overflow-x: visible; } .overflow-x-hidden-l { overflow-x: hidden; } .overflow-x-scroll-l { overflow-x: scroll; } .overflow-x-auto-l { overflow-x: auto; } .overflow-y-visible-l { overflow-y: visible; } .overflow-y-hidden-l { overflow-y: hidden; } .overflow-y-scroll-l { overflow-y: scroll; } .overflow-y-auto-l { overflow-y: auto; } } ================================================ FILE: scss/_position.scss ================================================ // Converted Variables // Custom Media Query Variables /* POSITIONING Docs: http://tachyons.io/docs/layout/position/ Media Query Extensions: -ns = not-small -m = medium -l = large */ .static { position: static; } .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } @media #{$breakpoint-not-small} { .static-ns { position: static; } .relative-ns { position: relative; } .absolute-ns { position: absolute; } .fixed-ns { position: fixed; } } @media #{$breakpoint-medium} { .static-m { position: static; } .relative-m { position: relative; } .absolute-m { position: absolute; } .fixed-m { position: fixed; } } @media #{$breakpoint-large} { .static-l { position: static; } .relative-l { position: relative; } .absolute-l { position: absolute; } .fixed-l { position: fixed; } } ================================================ FILE: scss/_rotations.scss ================================================ // Converted Variables // Custom Media Query Variables /* ROTATIONS */ .rotate-45 { transform: rotate(45deg); } .rotate-90 { transform: rotate(90deg); } .rotate-135 { transform: rotate(135deg); } .rotate-180 { transform: rotate(180deg); } .rotate-225 { transform: rotate(225deg); } .rotate-270 { transform: rotate(270deg); } .rotate-315 { transform: rotate(315deg); } @media #{$breakpoint-not-small}{ .rotate-45-ns { transform: rotate(45deg); } .rotate-90-ns { transform: rotate(90deg); } .rotate-135-ns { transform: rotate(135deg); } .rotate-180-ns { transform: rotate(180deg); } .rotate-225-ns { transform: rotate(225deg); } .rotate-270-ns { transform: rotate(270deg); } .rotate-315-ns { transform: rotate(315deg); } } @media #{$breakpoint-medium}{ .rotate-45-m { transform: rotate(45deg); } .rotate-90-m { transform: rotate(90deg); } .rotate-135-m { transform: rotate(135deg); } .rotate-180-m { transform: rotate(180deg); } .rotate-225-m { transform: rotate(225deg); } .rotate-270-m { transform: rotate(270deg); } .rotate-315-m { transform: rotate(315deg); } } @media #{$breakpoint-large}{ .rotate-45-l { transform: rotate(45deg); } .rotate-90-l { transform: rotate(90deg); } .rotate-135-l { transform: rotate(135deg); } .rotate-180-l { transform: rotate(180deg); } .rotate-225-l { transform: rotate(225deg); } .rotate-270-l { transform: rotate(270deg); } .rotate-315-l { transform: rotate(315deg); } } ================================================ FILE: scss/_skins-pseudo.scss ================================================ // Converted Variables // Custom Media Query Variables /* SKINS:PSEUDO Customize the color of an element when it is focused or hovered over. */ .hover-black:hover, .hover-black:focus { color: $black; } .hover-near-black:hover, .hover-near-black:focus { color: $near-black; } .hover-dark-gray:hover, .hover-dark-gray:focus { color: $dark-gray; } .hover-mid-gray:hover, .hover-mid-gray:focus { color: $mid-gray; } .hover-gray:hover, .hover-gray:focus { color: $gray; } .hover-silver:hover, .hover-silver:focus { color: $silver; } .hover-light-silver:hover, .hover-light-silver:focus { color: $light-silver; } .hover-moon-gray:hover, .hover-moon-gray:focus { color: $moon-gray; } .hover-light-gray:hover, .hover-light-gray:focus { color: $light-gray; } .hover-near-white:hover, .hover-near-white:focus { color: $near-white; } .hover-white:hover, .hover-white:focus { color: $white; } .hover-black-90:hover, .hover-black-90:focus { color: $black-90; } .hover-black-80:hover, .hover-black-80:focus { color: $black-80; } .hover-black-70:hover, .hover-black-70:focus { color: $black-70; } .hover-black-60:hover, .hover-black-60:focus { color: $black-60; } .hover-black-50:hover, .hover-black-50:focus { color: $black-50; } .hover-black-40:hover, .hover-black-40:focus { color: $black-40; } .hover-black-30:hover, .hover-black-30:focus { color: $black-30; } .hover-black-20:hover, .hover-black-20:focus { color: $black-20; } .hover-black-10:hover, .hover-black-10:focus { color: $black-10; } .hover-white-90:hover, .hover-white-90:focus { color: $white-90; } .hover-white-80:hover, .hover-white-80:focus { color: $white-80; } .hover-white-70:hover, .hover-white-70:focus { color: $white-70; } .hover-white-60:hover, .hover-white-60:focus { color: $white-60; } .hover-white-50:hover, .hover-white-50:focus { color: $white-50; } .hover-white-40:hover, .hover-white-40:focus { color: $white-40; } .hover-white-30:hover, .hover-white-30:focus { color: $white-30; } .hover-white-20:hover, .hover-white-20:focus { color: $white-20; } .hover-white-10:hover, .hover-white-10:focus { color: $white-10; } .hover-inherit:hover, .hover-inherit:focus { color: inherit; } .hover-bg-black:hover, .hover-bg-black:focus { background-color: $black; } .hover-bg-near-black:hover, .hover-bg-near-black:focus { background-color: $near-black; } .hover-bg-dark-gray:hover, .hover-bg-dark-gray:focus { background-color: $dark-gray; } .hover-bg-mid-gray:hover, .hover-bg-mid-gray:focus { background-color: $mid-gray; } .hover-bg-gray:hover, .hover-bg-gray:focus { background-color: $gray; } .hover-bg-silver:hover, .hover-bg-silver:focus { background-color: $silver; } .hover-bg-light-silver:hover, .hover-bg-light-silver:focus { background-color: $light-silver; } .hover-bg-moon-gray:hover, .hover-bg-moon-gray:focus { background-color: $moon-gray; } .hover-bg-light-gray:hover, .hover-bg-light-gray:focus { background-color: $light-gray; } .hover-bg-near-white:hover, .hover-bg-near-white:focus { background-color: $near-white; } .hover-bg-white:hover, .hover-bg-white:focus { background-color: $white; } .hover-bg-transparent:hover, .hover-bg-transparent:focus { background-color: $transparent; } .hover-bg-black-90:hover, .hover-bg-black-90:focus { background-color: $black-90; } .hover-bg-black-80:hover, .hover-bg-black-80:focus { background-color: $black-80; } .hover-bg-black-70:hover, .hover-bg-black-70:focus { background-color: $black-70; } .hover-bg-black-60:hover, .hover-bg-black-60:focus { background-color: $black-60; } .hover-bg-black-50:hover, .hover-bg-black-50:focus { background-color: $black-50; } .hover-bg-black-40:hover, .hover-bg-black-40:focus { background-color: $black-40; } .hover-bg-black-30:hover, .hover-bg-black-30:focus { background-color: $black-30; } .hover-bg-black-20:hover, .hover-bg-black-20:focus { background-color: $black-20; } .hover-bg-black-10:hover, .hover-bg-black-10:focus { background-color: $black-10; } .hover-bg-white-90:hover, .hover-bg-white-90:focus { background-color: $white-90; } .hover-bg-white-80:hover, .hover-bg-white-80:focus { background-color: $white-80; } .hover-bg-white-70:hover, .hover-bg-white-70:focus { background-color: $white-70; } .hover-bg-white-60:hover, .hover-bg-white-60:focus { background-color: $white-60; } .hover-bg-white-50:hover, .hover-bg-white-50:focus { background-color: $white-50; } .hover-bg-white-40:hover, .hover-bg-white-40:focus { background-color: $white-40; } .hover-bg-white-30:hover, .hover-bg-white-30:focus { background-color: $white-30; } .hover-bg-white-20:hover, .hover-bg-white-20:focus { background-color: $white-20; } .hover-bg-white-10:hover, .hover-bg-white-10:focus { background-color: $white-10; } .hover-dark-red:hover, .hover-dark-red:focus { color: $dark-red; } .hover-red:hover, .hover-red:focus { color: $red; } .hover-light-red:hover, .hover-light-red:focus { color: $light-red; } .hover-orange:hover, .hover-orange:focus { color: $orange; } .hover-gold:hover, .hover-gold:focus { color: $gold; } .hover-yellow:hover, .hover-yellow:focus { color: $yellow; } .hover-light-yellow:hover, .hover-light-yellow:focus { color: $light-yellow; } .hover-purple:hover, .hover-purple:focus { color: $purple; } .hover-light-purple:hover, .hover-light-purple:focus { color: $light-purple; } .hover-dark-pink:hover, .hover-dark-pink:focus { color: $dark-pink; } .hover-hot-pink:hover, .hover-hot-pink:focus { color: $hot-pink; } .hover-pink:hover, .hover-pink:focus { color: $pink; } .hover-light-pink:hover, .hover-light-pink:focus { color: $light-pink; } .hover-dark-green:hover, .hover-dark-green:focus { color: $dark-green; } .hover-green:hover, .hover-green:focus { color: $green; } .hover-light-green:hover, .hover-light-green:focus { color: $light-green; } .hover-navy:hover, .hover-navy:focus { color: $navy; } .hover-dark-blue:hover, .hover-dark-blue:focus { color: $dark-blue; } .hover-blue:hover, .hover-blue:focus { color: $blue; } .hover-light-blue:hover, .hover-light-blue:focus { color: $light-blue; } .hover-lightest-blue:hover, .hover-lightest-blue:focus { color: $lightest-blue; } .hover-washed-blue:hover, .hover-washed-blue:focus { color: $washed-blue; } .hover-washed-green:hover, .hover-washed-green:focus { color: $washed-green; } .hover-washed-yellow:hover, .hover-washed-yellow:focus { color: $washed-yellow; } .hover-washed-red:hover, .hover-washed-red:focus { color: $washed-red; } .hover-bg-dark-red:hover, .hover-bg-dark-red:focus { background-color: $dark-red; } .hover-bg-red:hover, .hover-bg-red:focus { background-color: $red; } .hover-bg-light-red:hover, .hover-bg-light-red:focus { background-color: $light-red; } .hover-bg-orange:hover, .hover-bg-orange:focus { background-color: $orange; } .hover-bg-gold:hover, .hover-bg-gold:focus { background-color: $gold; } .hover-bg-yellow:hover, .hover-bg-yellow:focus { background-color: $yellow; } .hover-bg-light-yellow:hover, .hover-bg-light-yellow:focus { background-color: $light-yellow; } .hover-bg-purple:hover, .hover-bg-purple:focus { background-color: $purple; } .hover-bg-light-purple:hover, .hover-bg-light-purple:focus { background-color: $light-purple; } .hover-bg-dark-pink:hover, .hover-bg-dark-pink:focus { background-color: $dark-pink; } .hover-bg-hot-pink:hover, .hover-bg-hot-pink:focus { background-color: $hot-pink; } .hover-bg-pink:hover, .hover-bg-pink:focus { background-color: $pink; } .hover-bg-light-pink:hover, .hover-bg-light-pink:focus { background-color: $light-pink; } .hover-bg-dark-green:hover, .hover-bg-dark-green:focus { background-color: $dark-green; } .hover-bg-green:hover, .hover-bg-green:focus { background-color: $green; } .hover-bg-light-green:hover, .hover-bg-light-green:focus { background-color: $light-green; } .hover-bg-navy:hover, .hover-bg-navy:focus { background-color: $navy; } .hover-bg-dark-blue:hover, .hover-bg-dark-blue:focus { background-color: $dark-blue; } .hover-bg-blue:hover, .hover-bg-blue:focus { background-color: $blue; } .hover-bg-light-blue:hover, .hover-bg-light-blue:focus { background-color: $light-blue; } .hover-bg-lightest-blue:hover, .hover-bg-lightest-blue:focus { background-color: $lightest-blue; } .hover-bg-washed-blue:hover, .hover-bg-washed-blue:focus { background-color: $washed-blue; } .hover-bg-washed-green:hover, .hover-bg-washed-green:focus { background-color: $washed-green; } .hover-bg-washed-yellow:hover, .hover-bg-washed-yellow:focus { background-color: $washed-yellow; } .hover-bg-washed-red:hover, .hover-bg-washed-red:focus { background-color: $washed-red; } .hover-bg-inherit:hover, .hover-bg-inherit:focus { background-color: inherit; } ================================================ FILE: scss/_skins.scss ================================================ // Converted Variables // Custom Media Query Variables /* SKINS Docs: http://tachyons.io/docs/themes/skins/ Classes for setting foreground and background colors on elements. If you haven't declared a border color, but set border on an element, it will be set to the current text color. */ /* Text colors */ .black-90 { color: $black-90; } .black-80 { color: $black-80; } .black-70 { color: $black-70; } .black-60 { color: $black-60; } .black-50 { color: $black-50; } .black-40 { color: $black-40; } .black-30 { color: $black-30; } .black-20 { color: $black-20; } .black-10 { color: $black-10; } .black-05 { color: $black-05; } .white-90 { color: $white-90; } .white-80 { color: $white-80; } .white-70 { color: $white-70; } .white-60 { color: $white-60; } .white-50 { color: $white-50; } .white-40 { color: $white-40; } .white-30 { color: $white-30; } .white-20 { color: $white-20; } .white-10 { color: $white-10; } .black { color: $black; } .near-black { color: $near-black; } .dark-gray { color: $dark-gray; } .mid-gray { color: $mid-gray; } .gray { color: $gray; } .silver { color: $silver; } .light-silver { color: $light-silver; } .moon-gray { color: $moon-gray; } .light-gray { color: $light-gray; } .near-white { color: $near-white; } .white { color: $white; } .dark-red { color: $dark-red; } .red { color: $red; } .light-red { color: $light-red; } .orange { color: $orange; } .gold { color: $gold; } .yellow { color: $yellow; } .light-yellow { color: $light-yellow; } .purple { color: $purple; } .light-purple { color: $light-purple; } .dark-pink { color: $dark-pink; } .hot-pink { color: $hot-pink; } .pink { color: $pink; } .light-pink { color: $light-pink; } .dark-green { color: $dark-green; } .green { color: $green; } .light-green { color: $light-green; } .navy { color: $navy; } .dark-blue { color: $dark-blue; } .blue { color: $blue; } .light-blue { color: $light-blue; } .lightest-blue { color: $lightest-blue; } .washed-blue { color: $washed-blue; } .washed-green { color: $washed-green; } .washed-yellow { color: $washed-yellow; } .washed-red { color: $washed-red; } .color-inherit { color: inherit; } .bg-black-90 { background-color: $black-90; } .bg-black-80 { background-color: $black-80; } .bg-black-70 { background-color: $black-70; } .bg-black-60 { background-color: $black-60; } .bg-black-50 { background-color: $black-50; } .bg-black-40 { background-color: $black-40; } .bg-black-30 { background-color: $black-30; } .bg-black-20 { background-color: $black-20; } .bg-black-10 { background-color: $black-10; } .bg-black-05 { background-color: $black-05; } .bg-white-90 { background-color: $white-90; } .bg-white-80 { background-color: $white-80; } .bg-white-70 { background-color: $white-70; } .bg-white-60 { background-color: $white-60; } .bg-white-50 { background-color: $white-50; } .bg-white-40 { background-color: $white-40; } .bg-white-30 { background-color: $white-30; } .bg-white-20 { background-color: $white-20; } .bg-white-10 { background-color: $white-10; } /* Background colors */ .bg-black { background-color: $black; } .bg-near-black { background-color: $near-black; } .bg-dark-gray { background-color: $dark-gray; } .bg-mid-gray { background-color: $mid-gray; } .bg-gray { background-color: $gray; } .bg-silver { background-color: $silver; } .bg-light-silver { background-color: $light-silver; } .bg-moon-gray { background-color: $moon-gray; } .bg-light-gray { background-color: $light-gray; } .bg-near-white { background-color: $near-white; } .bg-white { background-color: $white; } .bg-transparent { background-color: $transparent; } .bg-dark-red { background-color: $dark-red; } .bg-red { background-color: $red; } .bg-light-red { background-color: $light-red; } .bg-orange { background-color: $orange; } .bg-gold { background-color: $gold; } .bg-yellow { background-color: $yellow; } .bg-light-yellow { background-color: $light-yellow; } .bg-purple { background-color: $purple; } .bg-light-purple { background-color: $light-purple; } .bg-dark-pink { background-color: $dark-pink; } .bg-hot-pink { background-color: $hot-pink; } .bg-pink { background-color: $pink; } .bg-light-pink { background-color: $light-pink; } .bg-dark-green { background-color: $dark-green; } .bg-green { background-color: $green; } .bg-light-green { background-color: $light-green; } .bg-navy { background-color: $navy; } .bg-dark-blue { background-color: $dark-blue; } .bg-blue { background-color: $blue; } .bg-light-blue { background-color: $light-blue; } .bg-lightest-blue { background-color: $lightest-blue; } .bg-washed-blue { background-color: $washed-blue; } .bg-washed-green { background-color: $washed-green; } .bg-washed-yellow { background-color: $washed-yellow; } .bg-washed-red { background-color: $washed-red; } .bg-inherit { background-color: inherit; } ================================================ FILE: scss/_spacing.scss ================================================ // Converted Variables // Custom Media Query Variables /* Variables */ /* SPACING Docs: http://tachyons.io/docs/layout/spacing/ An eight step powers of two scale ranging from 0 to 16rem. Base: p = padding m = margin Modifiers: a = all h = horizontal v = vertical t = top r = right b = bottom l = left 0 = none 1 = 1st step in spacing scale 2 = 2nd step in spacing scale 3 = 3rd step in spacing scale 4 = 4th step in spacing scale 5 = 5th step in spacing scale 6 = 6th step in spacing scale 7 = 7th step in spacing scale Media Query Extensions: -ns = not-small -m = medium -l = large */ .pa0 { padding: $spacing-none; } .pa1 { padding: $spacing-extra-small; } .pa2 { padding: $spacing-small; } .pa3 { padding: $spacing-medium; } .pa4 { padding: $spacing-large; } .pa5 { padding: $spacing-extra-large; } .pa6 { padding: $spacing-extra-extra-large; } .pa7 { padding: $spacing-extra-extra-extra-large; } .pl0 { padding-left: $spacing-none; } .pl1 { padding-left: $spacing-extra-small; } .pl2 { padding-left: $spacing-small; } .pl3 { padding-left: $spacing-medium; } .pl4 { padding-left: $spacing-large; } .pl5 { padding-left: $spacing-extra-large; } .pl6 { padding-left: $spacing-extra-extra-large; } .pl7 { padding-left: $spacing-extra-extra-extra-large; } .pr0 { padding-right: $spacing-none; } .pr1 { padding-right: $spacing-extra-small; } .pr2 { padding-right: $spacing-small; } .pr3 { padding-right: $spacing-medium; } .pr4 { padding-right: $spacing-large; } .pr5 { padding-right: $spacing-extra-large; } .pr6 { padding-right: $spacing-extra-extra-large; } .pr7 { padding-right: $spacing-extra-extra-extra-large; } .pb0 { padding-bottom: $spacing-none; } .pb1 { padding-bottom: $spacing-extra-small; } .pb2 { padding-bottom: $spacing-small; } .pb3 { padding-bottom: $spacing-medium; } .pb4 { padding-bottom: $spacing-large; } .pb5 { padding-bottom: $spacing-extra-large; } .pb6 { padding-bottom: $spacing-extra-extra-large; } .pb7 { padding-bottom: $spacing-extra-extra-extra-large; } .pt0 { padding-top: $spacing-none; } .pt1 { padding-top: $spacing-extra-small; } .pt2 { padding-top: $spacing-small; } .pt3 { padding-top: $spacing-medium; } .pt4 { padding-top: $spacing-large; } .pt5 { padding-top: $spacing-extra-large; } .pt6 { padding-top: $spacing-extra-extra-large; } .pt7 { padding-top: $spacing-extra-extra-extra-large; } .pv0 { padding-top: $spacing-none; padding-bottom: $spacing-none; } .pv1 { padding-top: $spacing-extra-small; padding-bottom: $spacing-extra-small; } .pv2 { padding-top: $spacing-small; padding-bottom: $spacing-small; } .pv3 { padding-top: $spacing-medium; padding-bottom: $spacing-medium; } .pv4 { padding-top: $spacing-large; padding-bottom: $spacing-large; } .pv5 { padding-top: $spacing-extra-large; padding-bottom: $spacing-extra-large; } .pv6 { padding-top: $spacing-extra-extra-large; padding-bottom: $spacing-extra-extra-large; } .pv7 { padding-top: $spacing-extra-extra-extra-large; padding-bottom: $spacing-extra-extra-extra-large; } .ph0 { padding-left: $spacing-none; padding-right: $spacing-none; } .ph1 { padding-left: $spacing-extra-small; padding-right: $spacing-extra-small; } .ph2 { padding-left: $spacing-small; padding-right: $spacing-small; } .ph3 { padding-left: $spacing-medium; padding-right: $spacing-medium; } .ph4 { padding-left: $spacing-large; padding-right: $spacing-large; } .ph5 { padding-left: $spacing-extra-large; padding-right: $spacing-extra-large; } .ph6 { padding-left: $spacing-extra-extra-large; padding-right: $spacing-extra-extra-large; } .ph7 { padding-left: $spacing-extra-extra-extra-large; padding-right: $spacing-extra-extra-extra-large; } .ma0 { margin: $spacing-none; } .ma1 { margin: $spacing-extra-small; } .ma2 { margin: $spacing-small; } .ma3 { margin: $spacing-medium; } .ma4 { margin: $spacing-large; } .ma5 { margin: $spacing-extra-large; } .ma6 { margin: $spacing-extra-extra-large; } .ma7 { margin: $spacing-extra-extra-extra-large; } .ml0 { margin-left: $spacing-none; } .ml1 { margin-left: $spacing-extra-small; } .ml2 { margin-left: $spacing-small; } .ml3 { margin-left: $spacing-medium; } .ml4 { margin-left: $spacing-large; } .ml5 { margin-left: $spacing-extra-large; } .ml6 { margin-left: $spacing-extra-extra-large; } .ml7 { margin-left: $spacing-extra-extra-extra-large; } .mr0 { margin-right: $spacing-none; } .mr1 { margin-right: $spacing-extra-small; } .mr2 { margin-right: $spacing-small; } .mr3 { margin-right: $spacing-medium; } .mr4 { margin-right: $spacing-large; } .mr5 { margin-right: $spacing-extra-large; } .mr6 { margin-right: $spacing-extra-extra-large; } .mr7 { margin-right: $spacing-extra-extra-extra-large; } .mb0 { margin-bottom: $spacing-none; } .mb1 { margin-bottom: $spacing-extra-small; } .mb2 { margin-bottom: $spacing-small; } .mb3 { margin-bottom: $spacing-medium; } .mb4 { margin-bottom: $spacing-large; } .mb5 { margin-bottom: $spacing-extra-large; } .mb6 { margin-bottom: $spacing-extra-extra-large; } .mb7 { margin-bottom: $spacing-extra-extra-extra-large; } .mt0 { margin-top: $spacing-none; } .mt1 { margin-top: $spacing-extra-small; } .mt2 { margin-top: $spacing-small; } .mt3 { margin-top: $spacing-medium; } .mt4 { margin-top: $spacing-large; } .mt5 { margin-top: $spacing-extra-large; } .mt6 { margin-top: $spacing-extra-extra-large; } .mt7 { margin-top: $spacing-extra-extra-extra-large; } .mv0 { margin-top: $spacing-none; margin-bottom: $spacing-none; } .mv1 { margin-top: $spacing-extra-small; margin-bottom: $spacing-extra-small; } .mv2 { margin-top: $spacing-small; margin-bottom: $spacing-small; } .mv3 { margin-top: $spacing-medium; margin-bottom: $spacing-medium; } .mv4 { margin-top: $spacing-large; margin-bottom: $spacing-large; } .mv5 { margin-top: $spacing-extra-large; margin-bottom: $spacing-extra-large; } .mv6 { margin-top: $spacing-extra-extra-large; margin-bottom: $spacing-extra-extra-large; } .mv7 { margin-top: $spacing-extra-extra-extra-large; margin-bottom: $spacing-extra-extra-extra-large; } .mh0 { margin-left: $spacing-none; margin-right: $spacing-none; } .mh1 { margin-left: $spacing-extra-small; margin-right: $spacing-extra-small; } .mh2 { margin-left: $spacing-small; margin-right: $spacing-small; } .mh3 { margin-left: $spacing-medium; margin-right: $spacing-medium; } .mh4 { margin-left: $spacing-large; margin-right: $spacing-large; } .mh5 { margin-left: $spacing-extra-large; margin-right: $spacing-extra-large; } .mh6 { margin-left: $spacing-extra-extra-large; margin-right: $spacing-extra-extra-large; } .mh7 { margin-left: $spacing-extra-extra-extra-large; margin-right: $spacing-extra-extra-extra-large; } @media #{$breakpoint-not-small} { .pa0-ns { padding: $spacing-none; } .pa1-ns { padding: $spacing-extra-small; } .pa2-ns { padding: $spacing-small; } .pa3-ns { padding: $spacing-medium; } .pa4-ns { padding: $spacing-large; } .pa5-ns { padding: $spacing-extra-large; } .pa6-ns { padding: $spacing-extra-extra-large; } .pa7-ns { padding: $spacing-extra-extra-extra-large; } .pl0-ns { padding-left: $spacing-none; } .pl1-ns { padding-left: $spacing-extra-small; } .pl2-ns { padding-left: $spacing-small; } .pl3-ns { padding-left: $spacing-medium; } .pl4-ns { padding-left: $spacing-large; } .pl5-ns { padding-left: $spacing-extra-large; } .pl6-ns { padding-left: $spacing-extra-extra-large; } .pl7-ns { padding-left: $spacing-extra-extra-extra-large; } .pr0-ns { padding-right: $spacing-none; } .pr1-ns { padding-right: $spacing-extra-small; } .pr2-ns { padding-right: $spacing-small; } .pr3-ns { padding-right: $spacing-medium; } .pr4-ns { padding-right: $spacing-large; } .pr5-ns { padding-right: $spacing-extra-large; } .pr6-ns { padding-right: $spacing-extra-extra-large; } .pr7-ns { padding-right: $spacing-extra-extra-extra-large; } .pb0-ns { padding-bottom: $spacing-none; } .pb1-ns { padding-bottom: $spacing-extra-small; } .pb2-ns { padding-bottom: $spacing-small; } .pb3-ns { padding-bottom: $spacing-medium; } .pb4-ns { padding-bottom: $spacing-large; } .pb5-ns { padding-bottom: $spacing-extra-large; } .pb6-ns { padding-bottom: $spacing-extra-extra-large; } .pb7-ns { padding-bottom: $spacing-extra-extra-extra-large; } .pt0-ns { padding-top: $spacing-none; } .pt1-ns { padding-top: $spacing-extra-small; } .pt2-ns { padding-top: $spacing-small; } .pt3-ns { padding-top: $spacing-medium; } .pt4-ns { padding-top: $spacing-large; } .pt5-ns { padding-top: $spacing-extra-large; } .pt6-ns { padding-top: $spacing-extra-extra-large; } .pt7-ns { padding-top: $spacing-extra-extra-extra-large; } .pv0-ns { padding-top: $spacing-none; padding-bottom: $spacing-none; } .pv1-ns { padding-top: $spacing-extra-small; padding-bottom: $spacing-extra-small; } .pv2-ns { padding-top: $spacing-small; padding-bottom: $spacing-small; } .pv3-ns { padding-top: $spacing-medium; padding-bottom: $spacing-medium; } .pv4-ns { padding-top: $spacing-large; padding-bottom: $spacing-large; } .pv5-ns { padding-top: $spacing-extra-large; padding-bottom: $spacing-extra-large; } .pv6-ns { padding-top: $spacing-extra-extra-large; padding-bottom: $spacing-extra-extra-large; } .pv7-ns { padding-top: $spacing-extra-extra-extra-large; padding-bottom: $spacing-extra-extra-extra-large; } .ph0-ns { padding-left: $spacing-none; padding-right: $spacing-none; } .ph1-ns { padding-left: $spacing-extra-small; padding-right: $spacing-extra-small; } .ph2-ns { padding-left: $spacing-small; padding-right: $spacing-small; } .ph3-ns { padding-left: $spacing-medium; padding-right: $spacing-medium; } .ph4-ns { padding-left: $spacing-large; padding-right: $spacing-large; } .ph5-ns { padding-left: $spacing-extra-large; padding-right: $spacing-extra-large; } .ph6-ns { padding-left: $spacing-extra-extra-large; padding-right: $spacing-extra-extra-large; } .ph7-ns { padding-left: $spacing-extra-extra-extra-large; padding-right: $spacing-extra-extra-extra-large; } .ma0-ns { margin: $spacing-none; } .ma1-ns { margin: $spacing-extra-small; } .ma2-ns { margin: $spacing-small; } .ma3-ns { margin: $spacing-medium; } .ma4-ns { margin: $spacing-large; } .ma5-ns { margin: $spacing-extra-large; } .ma6-ns { margin: $spacing-extra-extra-large; } .ma7-ns { margin: $spacing-extra-extra-extra-large; } .ml0-ns { margin-left: $spacing-none; } .ml1-ns { margin-left: $spacing-extra-small; } .ml2-ns { margin-left: $spacing-small; } .ml3-ns { margin-left: $spacing-medium; } .ml4-ns { margin-left: $spacing-large; } .ml5-ns { margin-left: $spacing-extra-large; } .ml6-ns { margin-left: $spacing-extra-extra-large; } .ml7-ns { margin-left: $spacing-extra-extra-extra-large; } .mr0-ns { margin-right: $spacing-none; } .mr1-ns { margin-right: $spacing-extra-small; } .mr2-ns { margin-right: $spacing-small; } .mr3-ns { margin-right: $spacing-medium; } .mr4-ns { margin-right: $spacing-large; } .mr5-ns { margin-right: $spacing-extra-large; } .mr6-ns { margin-right: $spacing-extra-extra-large; } .mr7-ns { margin-right: $spacing-extra-extra-extra-large; } .mb0-ns { margin-bottom: $spacing-none; } .mb1-ns { margin-bottom: $spacing-extra-small; } .mb2-ns { margin-bottom: $spacing-small; } .mb3-ns { margin-bottom: $spacing-medium; } .mb4-ns { margin-bottom: $spacing-large; } .mb5-ns { margin-bottom: $spacing-extra-large; } .mb6-ns { margin-bottom: $spacing-extra-extra-large; } .mb7-ns { margin-bottom: $spacing-extra-extra-extra-large; } .mt0-ns { margin-top: $spacing-none; } .mt1-ns { margin-top: $spacing-extra-small; } .mt2-ns { margin-top: $spacing-small; } .mt3-ns { margin-top: $spacing-medium; } .mt4-ns { margin-top: $spacing-large; } .mt5-ns { margin-top: $spacing-extra-large; } .mt6-ns { margin-top: $spacing-extra-extra-large; } .mt7-ns { margin-top: $spacing-extra-extra-extra-large; } .mv0-ns { margin-top: $spacing-none; margin-bottom: $spacing-none; } .mv1-ns { margin-top: $spacing-extra-small; margin-bottom: $spacing-extra-small; } .mv2-ns { margin-top: $spacing-small; margin-bottom: $spacing-small; } .mv3-ns { margin-top: $spacing-medium; margin-bottom: $spacing-medium; } .mv4-ns { margin-top: $spacing-large; margin-bottom: $spacing-large; } .mv5-ns { margin-top: $spacing-extra-large; margin-bottom: $spacing-extra-large; } .mv6-ns { margin-top: $spacing-extra-extra-large; margin-bottom: $spacing-extra-extra-large; } .mv7-ns { margin-top: $spacing-extra-extra-extra-large; margin-bottom: $spacing-extra-extra-extra-large; } .mh0-ns { margin-left: $spacing-none; margin-right: $spacing-none; } .mh1-ns { margin-left: $spacing-extra-small; margin-right: $spacing-extra-small; } .mh2-ns { margin-left: $spacing-small; margin-right: $spacing-small; } .mh3-ns { margin-left: $spacing-medium; margin-right: $spacing-medium; } .mh4-ns { margin-left: $spacing-large; margin-right: $spacing-large; } .mh5-ns { margin-left: $spacing-extra-large; margin-right: $spacing-extra-large; } .mh6-ns { margin-left: $spacing-extra-extra-large; margin-right: $spacing-extra-extra-large; } .mh7-ns { margin-left: $spacing-extra-extra-extra-large; margin-right: $spacing-extra-extra-extra-large; } } @media #{$breakpoint-medium} { .pa0-m { padding: $spacing-none; } .pa1-m { padding: $spacing-extra-small; } .pa2-m { padding: $spacing-small; } .pa3-m { padding: $spacing-medium; } .pa4-m { padding: $spacing-large; } .pa5-m { padding: $spacing-extra-large; } .pa6-m { padding: $spacing-extra-extra-large; } .pa7-m { padding: $spacing-extra-extra-extra-large; } .pl0-m { padding-left: $spacing-none; } .pl1-m { padding-left: $spacing-extra-small; } .pl2-m { padding-left: $spacing-small; } .pl3-m { padding-left: $spacing-medium; } .pl4-m { padding-left: $spacing-large; } .pl5-m { padding-left: $spacing-extra-large; } .pl6-m { padding-left: $spacing-extra-extra-large; } .pl7-m { padding-left: $spacing-extra-extra-extra-large; } .pr0-m { padding-right: $spacing-none; } .pr1-m { padding-right: $spacing-extra-small; } .pr2-m { padding-right: $spacing-small; } .pr3-m { padding-right: $spacing-medium; } .pr4-m { padding-right: $spacing-large; } .pr5-m { padding-right: $spacing-extra-large; } .pr6-m { padding-right: $spacing-extra-extra-large; } .pr7-m { padding-right: $spacing-extra-extra-extra-large; } .pb0-m { padding-bottom: $spacing-none; } .pb1-m { padding-bottom: $spacing-extra-small; } .pb2-m { padding-bottom: $spacing-small; } .pb3-m { padding-bottom: $spacing-medium; } .pb4-m { padding-bottom: $spacing-large; } .pb5-m { padding-bottom: $spacing-extra-large; } .pb6-m { padding-bottom: $spacing-extra-extra-large; } .pb7-m { padding-bottom: $spacing-extra-extra-extra-large; } .pt0-m { padding-top: $spacing-none; } .pt1-m { padding-top: $spacing-extra-small; } .pt2-m { padding-top: $spacing-small; } .pt3-m { padding-top: $spacing-medium; } .pt4-m { padding-top: $spacing-large; } .pt5-m { padding-top: $spacing-extra-large; } .pt6-m { padding-top: $spacing-extra-extra-large; } .pt7-m { padding-top: $spacing-extra-extra-extra-large; } .pv0-m { padding-top: $spacing-none; padding-bottom: $spacing-none; } .pv1-m { padding-top: $spacing-extra-small; padding-bottom: $spacing-extra-small; } .pv2-m { padding-top: $spacing-small; padding-bottom: $spacing-small; } .pv3-m { padding-top: $spacing-medium; padding-bottom: $spacing-medium; } .pv4-m { padding-top: $spacing-large; padding-bottom: $spacing-large; } .pv5-m { padding-top: $spacing-extra-large; padding-bottom: $spacing-extra-large; } .pv6-m { padding-top: $spacing-extra-extra-large; padding-bottom: $spacing-extra-extra-large; } .pv7-m { padding-top: $spacing-extra-extra-extra-large; padding-bottom: $spacing-extra-extra-extra-large; } .ph0-m { padding-left: $spacing-none; padding-right: $spacing-none; } .ph1-m { padding-left: $spacing-extra-small; padding-right: $spacing-extra-small; } .ph2-m { padding-left: $spacing-small; padding-right: $spacing-small; } .ph3-m { padding-left: $spacing-medium; padding-right: $spacing-medium; } .ph4-m { padding-left: $spacing-large; padding-right: $spacing-large; } .ph5-m { padding-left: $spacing-extra-large; padding-right: $spacing-extra-large; } .ph6-m { padding-left: $spacing-extra-extra-large; padding-right: $spacing-extra-extra-large; } .ph7-m { padding-left: $spacing-extra-extra-extra-large; padding-right: $spacing-extra-extra-extra-large; } .ma0-m { margin: $spacing-none; } .ma1-m { margin: $spacing-extra-small; } .ma2-m { margin: $spacing-small; } .ma3-m { margin: $spacing-medium; } .ma4-m { margin: $spacing-large; } .ma5-m { margin: $spacing-extra-large; } .ma6-m { margin: $spacing-extra-extra-large; } .ma7-m { margin: $spacing-extra-extra-extra-large; } .ml0-m { margin-left: $spacing-none; } .ml1-m { margin-left: $spacing-extra-small; } .ml2-m { margin-left: $spacing-small; } .ml3-m { margin-left: $spacing-medium; } .ml4-m { margin-left: $spacing-large; } .ml5-m { margin-left: $spacing-extra-large; } .ml6-m { margin-left: $spacing-extra-extra-large; } .ml7-m { margin-left: $spacing-extra-extra-extra-large; } .mr0-m { margin-right: $spacing-none; } .mr1-m { margin-right: $spacing-extra-small; } .mr2-m { margin-right: $spacing-small; } .mr3-m { margin-right: $spacing-medium; } .mr4-m { margin-right: $spacing-large; } .mr5-m { margin-right: $spacing-extra-large; } .mr6-m { margin-right: $spacing-extra-extra-large; } .mr7-m { margin-right: $spacing-extra-extra-extra-large; } .mb0-m { margin-bottom: $spacing-none; } .mb1-m { margin-bottom: $spacing-extra-small; } .mb2-m { margin-bottom: $spacing-small; } .mb3-m { margin-bottom: $spacing-medium; } .mb4-m { margin-bottom: $spacing-large; } .mb5-m { margin-bottom: $spacing-extra-large; } .mb6-m { margin-bottom: $spacing-extra-extra-large; } .mb7-m { margin-bottom: $spacing-extra-extra-extra-large; } .mt0-m { margin-top: $spacing-none; } .mt1-m { margin-top: $spacing-extra-small; } .mt2-m { margin-top: $spacing-small; } .mt3-m { margin-top: $spacing-medium; } .mt4-m { margin-top: $spacing-large; } .mt5-m { margin-top: $spacing-extra-large; } .mt6-m { margin-top: $spacing-extra-extra-large; } .mt7-m { margin-top: $spacing-extra-extra-extra-large; } .mv0-m { margin-top: $spacing-none; margin-bottom: $spacing-none; } .mv1-m { margin-top: $spacing-extra-small; margin-bottom: $spacing-extra-small; } .mv2-m { margin-top: $spacing-small; margin-bottom: $spacing-small; } .mv3-m { margin-top: $spacing-medium; margin-bottom: $spacing-medium; } .mv4-m { margin-top: $spacing-large; margin-bottom: $spacing-large; } .mv5-m { margin-top: $spacing-extra-large; margin-bottom: $spacing-extra-large; } .mv6-m { margin-top: $spacing-extra-extra-large; margin-bottom: $spacing-extra-extra-large; } .mv7-m { margin-top: $spacing-extra-extra-extra-large; margin-bottom: $spacing-extra-extra-extra-large; } .mh0-m { margin-left: $spacing-none; margin-right: $spacing-none; } .mh1-m { margin-left: $spacing-extra-small; margin-right: $spacing-extra-small; } .mh2-m { margin-left: $spacing-small; margin-right: $spacing-small; } .mh3-m { margin-left: $spacing-medium; margin-right: $spacing-medium; } .mh4-m { margin-left: $spacing-large; margin-right: $spacing-large; } .mh5-m { margin-left: $spacing-extra-large; margin-right: $spacing-extra-large; } .mh6-m { margin-left: $spacing-extra-extra-large; margin-right: $spacing-extra-extra-large; } .mh7-m { margin-left: $spacing-extra-extra-extra-large; margin-right: $spacing-extra-extra-extra-large; } } @media #{$breakpoint-large} { .pa0-l { padding: $spacing-none; } .pa1-l { padding: $spacing-extra-small; } .pa2-l { padding: $spacing-small; } .pa3-l { padding: $spacing-medium; } .pa4-l { padding: $spacing-large; } .pa5-l { padding: $spacing-extra-large; } .pa6-l { padding: $spacing-extra-extra-large; } .pa7-l { padding: $spacing-extra-extra-extra-large; } .pl0-l { padding-left: $spacing-none; } .pl1-l { padding-left: $spacing-extra-small; } .pl2-l { padding-left: $spacing-small; } .pl3-l { padding-left: $spacing-medium; } .pl4-l { padding-left: $spacing-large; } .pl5-l { padding-left: $spacing-extra-large; } .pl6-l { padding-left: $spacing-extra-extra-large; } .pl7-l { padding-left: $spacing-extra-extra-extra-large; } .pr0-l { padding-right: $spacing-none; } .pr1-l { padding-right: $spacing-extra-small; } .pr2-l { padding-right: $spacing-small; } .pr3-l { padding-right: $spacing-medium; } .pr4-l { padding-right: $spacing-large; } .pr5-l { padding-right: $spacing-extra-large; } .pr6-l { padding-right: $spacing-extra-extra-large; } .pr7-l { padding-right: $spacing-extra-extra-extra-large; } .pb0-l { padding-bottom: $spacing-none; } .pb1-l { padding-bottom: $spacing-extra-small; } .pb2-l { padding-bottom: $spacing-small; } .pb3-l { padding-bottom: $spacing-medium; } .pb4-l { padding-bottom: $spacing-large; } .pb5-l { padding-bottom: $spacing-extra-large; } .pb6-l { padding-bottom: $spacing-extra-extra-large; } .pb7-l { padding-bottom: $spacing-extra-extra-extra-large; } .pt0-l { padding-top: $spacing-none; } .pt1-l { padding-top: $spacing-extra-small; } .pt2-l { padding-top: $spacing-small; } .pt3-l { padding-top: $spacing-medium; } .pt4-l { padding-top: $spacing-large; } .pt5-l { padding-top: $spacing-extra-large; } .pt6-l { padding-top: $spacing-extra-extra-large; } .pt7-l { padding-top: $spacing-extra-extra-extra-large; } .pv0-l { padding-top: $spacing-none; padding-bottom: $spacing-none; } .pv1-l { padding-top: $spacing-extra-small; padding-bottom: $spacing-extra-small; } .pv2-l { padding-top: $spacing-small; padding-bottom: $spacing-small; } .pv3-l { padding-top: $spacing-medium; padding-bottom: $spacing-medium; } .pv4-l { padding-top: $spacing-large; padding-bottom: $spacing-large; } .pv5-l { padding-top: $spacing-extra-large; padding-bottom: $spacing-extra-large; } .pv6-l { padding-top: $spacing-extra-extra-large; padding-bottom: $spacing-extra-extra-large; } .pv7-l { padding-top: $spacing-extra-extra-extra-large; padding-bottom: $spacing-extra-extra-extra-large; } .ph0-l { padding-left: $spacing-none; padding-right: $spacing-none; } .ph1-l { padding-left: $spacing-extra-small; padding-right: $spacing-extra-small; } .ph2-l { padding-left: $spacing-small; padding-right: $spacing-small; } .ph3-l { padding-left: $spacing-medium; padding-right: $spacing-medium; } .ph4-l { padding-left: $spacing-large; padding-right: $spacing-large; } .ph5-l { padding-left: $spacing-extra-large; padding-right: $spacing-extra-large; } .ph6-l { padding-left: $spacing-extra-extra-large; padding-right: $spacing-extra-extra-large; } .ph7-l { padding-left: $spacing-extra-extra-extra-large; padding-right: $spacing-extra-extra-extra-large; } .ma0-l { margin: $spacing-none; } .ma1-l { margin: $spacing-extra-small; } .ma2-l { margin: $spacing-small; } .ma3-l { margin: $spacing-medium; } .ma4-l { margin: $spacing-large; } .ma5-l { margin: $spacing-extra-large; } .ma6-l { margin: $spacing-extra-extra-large; } .ma7-l { margin: $spacing-extra-extra-extra-large; } .ml0-l { margin-left: $spacing-none; } .ml1-l { margin-left: $spacing-extra-small; } .ml2-l { margin-left: $spacing-small; } .ml3-l { margin-left: $spacing-medium; } .ml4-l { margin-left: $spacing-large; } .ml5-l { margin-left: $spacing-extra-large; } .ml6-l { margin-left: $spacing-extra-extra-large; } .ml7-l { margin-left: $spacing-extra-extra-extra-large; } .mr0-l { margin-right: $spacing-none; } .mr1-l { margin-right: $spacing-extra-small; } .mr2-l { margin-right: $spacing-small; } .mr3-l { margin-right: $spacing-medium; } .mr4-l { margin-right: $spacing-large; } .mr5-l { margin-right: $spacing-extra-large; } .mr6-l { margin-right: $spacing-extra-extra-large; } .mr7-l { margin-right: $spacing-extra-extra-extra-large; } .mb0-l { margin-bottom: $spacing-none; } .mb1-l { margin-bottom: $spacing-extra-small; } .mb2-l { margin-bottom: $spacing-small; } .mb3-l { margin-bottom: $spacing-medium; } .mb4-l { margin-bottom: $spacing-large; } .mb5-l { margin-bottom: $spacing-extra-large; } .mb6-l { margin-bottom: $spacing-extra-extra-large; } .mb7-l { margin-bottom: $spacing-extra-extra-extra-large; } .mt0-l { margin-top: $spacing-none; } .mt1-l { margin-top: $spacing-extra-small; } .mt2-l { margin-top: $spacing-small; } .mt3-l { margin-top: $spacing-medium; } .mt4-l { margin-top: $spacing-large; } .mt5-l { margin-top: $spacing-extra-large; } .mt6-l { margin-top: $spacing-extra-extra-large; } .mt7-l { margin-top: $spacing-extra-extra-extra-large; } .mv0-l { margin-top: $spacing-none; margin-bottom: $spacing-none; } .mv1-l { margin-top: $spacing-extra-small; margin-bottom: $spacing-extra-small; } .mv2-l { margin-top: $spacing-small; margin-bottom: $spacing-small; } .mv3-l { margin-top: $spacing-medium; margin-bottom: $spacing-medium; } .mv4-l { margin-top: $spacing-large; margin-bottom: $spacing-large; } .mv5-l { margin-top: $spacing-extra-large; margin-bottom: $spacing-extra-large; } .mv6-l { margin-top: $spacing-extra-extra-large; margin-bottom: $spacing-extra-extra-large; } .mv7-l { margin-top: $spacing-extra-extra-extra-large; margin-bottom: $spacing-extra-extra-extra-large; } .mh0-l { margin-left: $spacing-none; margin-right: $spacing-none; } .mh1-l { margin-left: $spacing-extra-small; margin-right: $spacing-extra-small; } .mh2-l { margin-left: $spacing-small; margin-right: $spacing-small; } .mh3-l { margin-left: $spacing-medium; margin-right: $spacing-medium; } .mh4-l { margin-left: $spacing-large; margin-right: $spacing-large; } .mh5-l { margin-left: $spacing-extra-large; margin-right: $spacing-extra-large; } .mh6-l { margin-left: $spacing-extra-extra-large; margin-right: $spacing-extra-extra-large; } .mh7-l { margin-left: $spacing-extra-extra-extra-large; margin-right: $spacing-extra-extra-extra-large; } } ================================================ FILE: scss/_styles.scss ================================================ // Converted Variables // Custom Media Query Variables /* STYLES Add custom styles here. */ ================================================ FILE: scss/_tables.scss ================================================ // Converted Variables // Custom Media Query Variables /* TABLES Docs: http://tachyons.io/docs/elements/tables/ */ .collapse { border-collapse: collapse; border-spacing: 0; } .striped--light-silver:nth-child(odd) { background-color: $light-silver; } .striped--moon-gray:nth-child(odd) { background-color: $moon-gray; } .striped--light-gray:nth-child(odd) { background-color: $light-gray; } .striped--near-white:nth-child(odd) { background-color: $near-white; } .stripe-light:nth-child(odd) { background-color: $white-10; } .stripe-dark:nth-child(odd) { background-color: $black-10; } ================================================ FILE: scss/_text-align.scss ================================================ // Converted Variables // Custom Media Query Variables /* TEXT ALIGN Docs: http://tachyons.io/docs/typography/text-align/ Base t = text-align Modifiers l = left r = right c = center j = justify Media Query Extensions: -ns = not-small -m = medium -l = large */ .tl { text-align: left; } .tr { text-align: right; } .tc { text-align: center; } .tj { text-align: justify; } @media #{$breakpoint-not-small} { .tl-ns { text-align: left; } .tr-ns { text-align: right; } .tc-ns { text-align: center; } .tj-ns { text-align: justify; } } @media #{$breakpoint-medium} { .tl-m { text-align: left; } .tr-m { text-align: right; } .tc-m { text-align: center; } .tj-m { text-align: justify; } } @media #{$breakpoint-large} { .tl-l { text-align: left; } .tr-l { text-align: right; } .tc-l { text-align: center; } .tj-l { text-align: justify; } } ================================================ FILE: scss/_text-decoration.scss ================================================ // Converted Variables // Custom Media Query Variables /* TEXT DECORATION Docs: http://tachyons.io/docs/typography/text-decoration/ Media Query Extensions: -ns = not-small -m = medium -l = large */ .strike { text-decoration: line-through; } .underline { text-decoration: underline; } .no-underline { text-decoration: none; } @media #{$breakpoint-not-small} { .strike-ns { text-decoration: line-through; } .underline-ns { text-decoration: underline; } .no-underline-ns { text-decoration: none; } } @media #{$breakpoint-medium} { .strike-m { text-decoration: line-through; } .underline-m { text-decoration: underline; } .no-underline-m { text-decoration: none; } } @media #{$breakpoint-large} { .strike-l { text-decoration: line-through; } .underline-l { text-decoration: underline; } .no-underline-l { text-decoration: none; } } ================================================ FILE: scss/_text-transform.scss ================================================ // Converted Variables // Custom Media Query Variables /* TEXT TRANSFORM Docs: http://tachyons.io/docs/typography/text-transform/ Base: tt = text-transform Modifiers c = capitalize l = lowercase u = uppercase n = none Media Query Extensions: -ns = not-small -m = medium -l = large */ .ttc { text-transform: capitalize; } .ttl { text-transform: lowercase; } .ttu { text-transform: uppercase; } .ttn { text-transform: none; } @media #{$breakpoint-not-small} { .ttc-ns { text-transform: capitalize; } .ttl-ns { text-transform: lowercase; } .ttu-ns { text-transform: uppercase; } .ttn-ns { text-transform: none; } } @media #{$breakpoint-medium} { .ttc-m { text-transform: capitalize; } .ttl-m { text-transform: lowercase; } .ttu-m { text-transform: uppercase; } .ttn-m { text-transform: none; } } @media #{$breakpoint-large} { .ttc-l { text-transform: capitalize; } .ttl-l { text-transform: lowercase; } .ttu-l { text-transform: uppercase; } .ttn-l { text-transform: none; } } ================================================ FILE: scss/_type-scale.scss ================================================ // Converted Variables // Custom Media Query Variables /* TYPE SCALE Docs: http://tachyons.io/docs/typography/scale/ Base: f = font-size Modifiers 1 = 1st step in size scale 2 = 2nd step in size scale 3 = 3rd step in size scale 4 = 4th step in size scale 5 = 5th step in size scale 6 = 6th step in size scale Media Query Extensions: -ns = not-small -m = medium -l = large */ /* * For Hero/Marketing Titles * * These generally are too large for mobile * so be careful using them on smaller screens. * */ .f-6, .f-headline { font-size: $font-size-headline; } .f-5, .f-subheadline { font-size: $font-size-subheadline; } /* Type Scale */ .f1 { font-size: $font-size-1; } .f2 { font-size: $font-size-2; } .f3 { font-size: $font-size-3; } .f4 { font-size: $font-size-4; } .f5 { font-size: $font-size-5; } .f6 { font-size: $font-size-6; } .f7 { font-size: $font-size-7; } @media #{$breakpoint-not-small}{ .f-6-ns, .f-headline-ns { font-size: $font-size-headline; } .f-5-ns, .f-subheadline-ns { font-size: $font-size-subheadline; } .f1-ns { font-size: $font-size-1; } .f2-ns { font-size: $font-size-2; } .f3-ns { font-size: $font-size-3; } .f4-ns { font-size: $font-size-4; } .f5-ns { font-size: $font-size-5; } .f6-ns { font-size: $font-size-6; } .f7-ns { font-size: $font-size-7; } } @media #{$breakpoint-medium} { .f-6-m, .f-headline-m { font-size: $font-size-headline; } .f-5-m, .f-subheadline-m { font-size: $font-size-subheadline; } .f1-m { font-size: $font-size-1; } .f2-m { font-size: $font-size-2; } .f3-m { font-size: $font-size-3; } .f4-m { font-size: $font-size-4; } .f5-m { font-size: $font-size-5; } .f6-m { font-size: $font-size-6; } .f7-m { font-size: $font-size-7; } } @media #{$breakpoint-large} { .f-6-l, .f-headline-l { font-size: $font-size-headline; } .f-5-l, .f-subheadline-l { font-size: $font-size-subheadline; } .f1-l { font-size: $font-size-1; } .f2-l { font-size: $font-size-2; } .f3-l { font-size: $font-size-3; } .f4-l { font-size: $font-size-4; } .f5-l { font-size: $font-size-5; } .f6-l { font-size: $font-size-6; } .f7-l { font-size: $font-size-7; } } ================================================ FILE: scss/_typography.scss ================================================ // Converted Variables // Custom Media Query Variables /* TYPOGRAPHY http://tachyons.io/docs/typography/measure/ Media Query Extensions: -ns = not-small -m = medium -l = large */ /* Measure is limited to ~66 characters */ .measure { max-width: $measure; } /* Measure is limited to ~80 characters */ .measure-wide { max-width: $measure-wide; } /* Measure is limited to ~45 characters */ .measure-narrow { max-width: $measure-narrow; } /* Book paragraph style - paragraphs are indented with no vertical spacing. */ .indent { text-indent: 1em; margin-top: 0; margin-bottom: 0; } .small-caps { font-variant: small-caps; } /* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */ .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media #{$breakpoint-not-small} { .measure-ns { max-width: $measure; } .measure-wide-ns { max-width: $measure-wide; } .measure-narrow-ns { max-width: $measure-narrow; } .indent-ns { text-indent: 1em; margin-top: 0; margin-bottom: 0; } .small-caps-ns { font-variant: small-caps; } .truncate-ns { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } @media #{$breakpoint-medium} { .measure-m { max-width: $measure; } .measure-wide-m { max-width: $measure-wide; } .measure-narrow-m { max-width: $measure-narrow; } .indent-m { text-indent: 1em; margin-top: 0; margin-bottom: 0; } .small-caps-m { font-variant: small-caps; } .truncate-m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } @media #{$breakpoint-large} { .measure-l { max-width: $measure; } .measure-wide-l { max-width: $measure-wide; } .measure-narrow-l { max-width: $measure-narrow; } .indent-l { text-indent: 1em; margin-top: 0; margin-bottom: 0; } .small-caps-l { font-variant: small-caps; } .truncate-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } ================================================ FILE: scss/_utilities.scss ================================================ // Converted Variables // Custom Media Query Variables /* UTILITIES Media Query Extensions: -ns = not-small -m = medium -l = large */ /* Equivalent to .overflow-y-scroll */ .overflow-container { overflow-y: scroll; } .center { margin-right: auto; margin-left: auto; } .mr-auto { margin-right: auto; } .ml-auto { margin-left: auto; } @media #{$breakpoint-not-small}{ .center-ns { margin-right: auto; margin-left: auto; } .mr-auto-ns { margin-right: auto; } .ml-auto-ns { margin-left: auto; } } @media #{$breakpoint-medium}{ .center-m { margin-right: auto; margin-left: auto; } .mr-auto-m { margin-right: auto; } .ml-auto-m { margin-left: auto; } } @media #{$breakpoint-large}{ .center-l { margin-right: auto; margin-left: auto; } .mr-auto-l { margin-right: auto; } .ml-auto-l { margin-left: auto; } } ================================================ FILE: scss/_variables.scss ================================================ // Converted Variables $sans-serif: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial, sans-serif !default; $serif: georgia, serif !default; $code: consolas, monaco, monospace !default; $font-size-headline: 6rem !default; $font-size-subheadline: 5rem !default; $font-size-1: 3rem !default; $font-size-2: 2.25rem !default; $font-size-3: 1.5rem !default; $font-size-4: 1.25rem !default; $font-size-5: 1rem !default; $font-size-6: .875rem !default; $font-size-7: .75rem !default; $letter-spacing-tight: -.05em !default; $letter-spacing-1: .1em !default; $letter-spacing-2: .25em !default; $line-height-solid: 1 !default; $line-height-title: 1.25 !default; $line-height-copy: 1.5 !default; $measure: 30em !default; $measure-narrow: 20em !default; $measure-wide: 34em !default; $spacing-none: 0 !default; $spacing-extra-small: .25rem !default; $spacing-small: .5rem !default; $spacing-medium: 1rem !default; $spacing-large: 2rem !default; $spacing-extra-large: 4rem !default; $spacing-extra-extra-large: 8rem !default; $spacing-extra-extra-extra-large: 16rem !default; $spacing-copy-separator: 1.5em !default; $height-1: 1rem !default; $height-2: 2rem !default; $height-3: 4rem !default; $height-4: 8rem !default; $height-5: 16rem !default; $width-1: 1rem !default; $width-2: 2rem !default; $width-3: 4rem !default; $width-4: 8rem !default; $width-5: 16rem !default; $max-width-1: 1rem !default; $max-width-2: 2rem !default; $max-width-3: 4rem !default; $max-width-4: 8rem !default; $max-width-5: 16rem !default; $max-width-6: 32rem !default; $max-width-7: 48rem !default; $max-width-8: 64rem !default; $max-width-9: 96rem !default; $border-radius-none: 0 !default; $border-radius-1: .125rem !default; $border-radius-2: .25rem !default; $border-radius-3: .5rem !default; $border-radius-4: 1rem !default; $border-radius-circle: 100% !default; $border-radius-pill: 9999px !default; $border-width-none: 0 !default; $border-width-1: .125rem !default; $border-width-2: .25rem !default; $border-width-3: .5rem !default; $border-width-4: 1rem !default; $border-width-5: 2rem !default; $box-shadow-1: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ) !default; $box-shadow-2: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ) !default; $box-shadow-3: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ) !default; $box-shadow-4: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ) !default; $box-shadow-5: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ) !default; $black: #000 !default; $near-black: #111 !default; $dark-gray: #333 !default; $mid-gray: #555 !default; $gray: #777 !default; $silver: #999 !default; $light-silver: #aaa !default; $moon-gray: #ccc !default; $light-gray: #eee !default; $near-white: #f4f4f4 !default; $white: #fff !default; $transparent: transparent !default; $black-90: rgba(0,0,0,.9) !default; $black-80: rgba(0,0,0,.8) !default; $black-70: rgba(0,0,0,.7) !default; $black-60: rgba(0,0,0,.6) !default; $black-50: rgba(0,0,0,.5) !default; $black-40: rgba(0,0,0,.4) !default; $black-30: rgba(0,0,0,.3) !default; $black-20: rgba(0,0,0,.2) !default; $black-10: rgba(0,0,0,.1) !default; $black-05: rgba(0,0,0,.05) !default; $black-025: rgba(0,0,0,.025) !default; $black-0125: rgba(0,0,0,.0125) !default; $white-90: rgba(255,255,255,.9) !default; $white-80: rgba(255,255,255,.8) !default; $white-70: rgba(255,255,255,.7) !default; $white-60: rgba(255,255,255,.6) !default; $white-50: rgba(255,255,255,.5) !default; $white-40: rgba(255,255,255,.4) !default; $white-30: rgba(255,255,255,.3) !default; $white-20: rgba(255,255,255,.2) !default; $white-10: rgba(255,255,255,.1) !default; $white-05: rgba(255,255,255,.05) !default; $white-025: rgba(255,255,255,.025) !default; $white-0125: rgba(255,255,255,.0125) !default; $dark-red: #e7040f !default; $red: #ff4136 !default; $light-red: #ff725c !default; $orange: #ff6300 !default; $gold: #ffb700 !default; $yellow: #ffd700 !default; $light-yellow: #fbf1a9 !default; $purple: #5e2ca5 !default; $light-purple: #a463f2 !default; $dark-pink: #d5008f !default; $hot-pink: #ff41b4 !default; $pink: #ff80cc !default; $light-pink: #ffa3d7 !default; $dark-green: #137752 !default; $green: #19a974 !default; $light-green: #9eebcf !default; $navy: #001b44 !default; $dark-blue: #00449e !default; $blue: #357edd !default; $light-blue: #96ccff !default; $lightest-blue: #cdecff !default; $washed-blue: #f6fffe !default; $washed-green: #e8fdf5 !default; $washed-yellow: #fffceb !default; $washed-red: #ffdfdf !default; // Custom Media Query Variables $breakpoint-not-small: 'screen and (min-width: 30em)' !default; $breakpoint-medium: 'screen and (min-width: 30em) and (max-width: 60em)' !default; $breakpoint-large: 'screen and (min-width: 60em)' !default; /* VARIABLES */ ================================================ FILE: scss/_vertical-align.scss ================================================ // Converted Variables // Custom Media Query Variables /* VERTICAL ALIGN Media Query Extensions: -ns = not-small -m = medium -l = large */ .v-base { vertical-align: baseline; } .v-mid { vertical-align: middle; } .v-top { vertical-align: top; } .v-btm { vertical-align: bottom; } @media #{$breakpoint-not-small} { .v-base-ns { vertical-align: baseline; } .v-mid-ns { vertical-align: middle; } .v-top-ns { vertical-align: top; } .v-btm-ns { vertical-align: bottom; } } @media #{$breakpoint-medium} { .v-base-m { vertical-align: baseline; } .v-mid-m { vertical-align: middle; } .v-top-m { vertical-align: top; } .v-btm-m { vertical-align: bottom; } } @media #{$breakpoint-large} { .v-base-l { vertical-align: baseline; } .v-mid-l { vertical-align: middle; } .v-top-l { vertical-align: top; } .v-btm-l { vertical-align: bottom; } } ================================================ FILE: scss/_visibility.scss ================================================ // Converted Variables // Custom Media Query Variables /* VISIBILITY Media Query Extensions: -ns = not-small -m = medium -l = large */ /* Text that is hidden but accessible Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ .clip { position: fixed !important; _position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } @media #{$breakpoint-not-small} { .clip-ns { position: fixed !important; _position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } } @media #{$breakpoint-medium} { .clip-m { position: fixed !important; _position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } } @media #{$breakpoint-large} { .clip-l { position: fixed !important; _position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } } ================================================ FILE: scss/_white-space.scss ================================================ // Converted Variables // Custom Media Query Variables /* WHITE SPACE Media Query Extensions: -ns = not-small -m = medium -l = large */ .ws-normal { white-space: normal; } .nowrap { white-space: nowrap; } .pre { white-space: pre; } @media #{$breakpoint-not-small} { .ws-normal-ns { white-space: normal; } .nowrap-ns { white-space: nowrap; } .pre-ns { white-space: pre; } } @media #{$breakpoint-medium} { .ws-normal-m { white-space: normal; } .nowrap-m { white-space: nowrap; } .pre-m { white-space: pre; } } @media #{$breakpoint-large} { .ws-normal-l { white-space: normal; } .nowrap-l { white-space: nowrap; } .pre-l { white-space: pre; } } ================================================ FILE: scss/_widths.scss ================================================ // Converted Variables // Custom Media Query Variables /* WIDTHS Docs: http://tachyons.io/docs/layout/widths/ Base: w = width Modifiers 1 = 1st step in width scale 2 = 2nd step in width scale 3 = 3rd step in width scale 4 = 4th step in width scale 5 = 5th step in width scale -10 = literal value 10% -20 = literal value 20% -25 = literal value 25% -30 = literal value 30% -33 = literal value 33% -34 = literal value 34% -40 = literal value 40% -50 = literal value 50% -60 = literal value 60% -70 = literal value 70% -75 = literal value 75% -80 = literal value 80% -90 = literal value 90% -100 = literal value 100% -third = 100% / 3 (Not supported in opera mini or IE8) -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8) -auto = string value auto Media Query Extensions: -ns = not-small -m = medium -l = large */ /* Width Scale */ .w1 { width: $width-1; } .w2 { width: $width-2; } .w3 { width: $width-3; } .w4 { width: $width-4; } .w5 { width: $width-5; } .w-10 { width: 10%; } .w-20 { width: 20%; } .w-25 { width: 25%; } .w-30 { width: 30%; } .w-33 { width: 33%; } .w-34 { width: 34%; } .w-40 { width: 40%; } .w-50 { width: 50%; } .w-60 { width: 60%; } .w-70 { width: 70%; } .w-75 { width: 75%; } .w-80 { width: 80%; } .w-90 { width: 90%; } .w-100 { width: 100%; } .w-third { width: calc(100% / 3); } .w-two-thirds { width: calc(100% / 1.5); } .w-auto { width: auto; } @media #{$breakpoint-not-small} { .w1-ns { width: $width-1; } .w2-ns { width: $width-2; } .w3-ns { width: $width-3; } .w4-ns { width: $width-4; } .w5-ns { width: $width-5; } .w-10-ns { width: 10%; } .w-20-ns { width: 20%; } .w-25-ns { width: 25%; } .w-30-ns { width: 30%; } .w-33-ns { width: 33%; } .w-34-ns { width: 34%; } .w-40-ns { width: 40%; } .w-50-ns { width: 50%; } .w-60-ns { width: 60%; } .w-70-ns { width: 70%; } .w-75-ns { width: 75%; } .w-80-ns { width: 80%; } .w-90-ns { width: 90%; } .w-100-ns { width: 100%; } .w-third-ns { width: calc(100% / 3); } .w-two-thirds-ns { width: calc(100% / 1.5); } .w-auto-ns { width: auto; } } @media #{$breakpoint-medium} { .w1-m { width: $width-1; } .w2-m { width: $width-2; } .w3-m { width: $width-3; } .w4-m { width: $width-4; } .w5-m { width: $width-5; } .w-10-m { width: 10%; } .w-20-m { width: 20%; } .w-25-m { width: 25%; } .w-30-m { width: 30%; } .w-33-m { width: 33%; } .w-34-m { width: 34%; } .w-40-m { width: 40%; } .w-50-m { width: 50%; } .w-60-m { width: 60%; } .w-70-m { width: 70%; } .w-75-m { width: 75%; } .w-80-m { width: 80%; } .w-90-m { width: 90%; } .w-100-m { width: 100%; } .w-third-m { width: calc(100% / 3); } .w-two-thirds-m { width: calc(100% / 1.5); } .w-auto-m { width: auto; } } @media #{$breakpoint-large} { .w1-l { width: $width-1; } .w2-l { width: $width-2; } .w3-l { width: $width-3; } .w4-l { width: $width-4; } .w5-l { width: $width-5; } .w-10-l { width: 10%; } .w-20-l { width: 20%; } .w-25-l { width: 25%; } .w-30-l { width: 30%; } .w-33-l { width: 33%; } .w-34-l { width: 34%; } .w-40-l { width: 40%; } .w-50-l { width: 50%; } .w-60-l { width: 60%; } .w-70-l { width: 70%; } .w-75-l { width: 75%; } .w-80-l { width: 80%; } .w-90-l { width: 90%; } .w-100-l { width: 100%; } .w-third-l { width: calc(100% / 3); } .w-two-thirds-l { width: calc(100% / 1.5); } .w-auto-l { width: auto; } } ================================================ FILE: scss/_word-break.scss ================================================ // Converted Variables // Custom Media Query Variables /* WORD BREAK Base: word = word-break Media Query Extensions: -ns = not-small -m = medium -l = large */ .word-normal { word-break: normal; } .word-wrap { word-break: break-all; } .word-nowrap { word-break: keep-all; } @media #{$breakpoint-not-small} { .word-normal-ns { word-break: normal; } .word-wrap-ns { word-break: break-all; } .word-nowrap-ns { word-break: keep-all; } } @media #{$breakpoint-medium} { .word-normal-m { word-break: normal; } .word-wrap-m { word-break: break-all; } .word-nowrap-m { word-break: keep-all; } } @media #{$breakpoint-large} { .word-normal-l { word-break: normal; } .word-wrap-l { word-break: break-all; } .word-nowrap-l { word-break: keep-all; } } ================================================ FILE: scss/_z-index.scss ================================================ // Converted Variables // Custom Media Query Variables /* Z-INDEX Base z = z-index Modifiers -0 = literal value 0 -1 = literal value 1 -2 = literal value 2 -3 = literal value 3 -4 = literal value 4 -5 = literal value 5 -999 = literal value 999 -9999 = literal value 9999 -max = largest accepted z-index value as integer -inherit = string value inherit -initial = string value initial -unset = string value unset MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index Spec: http://www.w3.org/TR/CSS2/zindex.html Articles: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ Tips on extending: There might be a time worth using negative z-index values. Or if you are using tachyons with another project, you might need to adjust these values to suit your needs. */ .z-0 { z-index: 0; } .z-1 { z-index: 1; } .z-2 { z-index: 2; } .z-3 { z-index: 3; } .z-4 { z-index: 4; } .z-5 { z-index: 5; } .z-999 { z-index: 999; } .z-9999 { z-index: 9999; } .z-max { z-index: 2147483647; } .z-inherit { z-index: inherit; } .z-initial { z-index: initial; } .z-unset { z-index: unset; } ================================================ FILE: tachyons.scss ================================================ // ! TACHYONS v4.9.0 | http://tachyons.io // // // ________ ______ // ___ __/_____ _________ /______ ______________________ // __ / _ __ `/ ___/_ __ \_ / / / __ \_ __ \_ ___/ // _ / / /_/ // /__ _ / / / /_/ // /_/ / / / /(__ ) // /_/ \__,_/ \___/ /_/ /_/_\__, / \____//_/ /_//____/ // /____/ // // TABLE OF CONTENTS // // 1. External Library Includes // - Normalize.css | http://normalize.css.github.io // 2. Tachyons Modules // 3. Variables // - Media Queries // - Colors // 4. Debugging // - Debug all // - Debug children // // // External Library Includes @import 'scss/normalize'; // Variables // Importing here will allow you to override any variables in the modules @import 'scss/variables'; // Debugging @import 'scss/debug-children'; @import 'scss/debug-grid'; // Uncomment out the line below to help debug layout issues // @import 'scss/debug'; // Modules @import 'scss/box-sizing'; @import 'scss/aspect-ratios'; @import 'scss/images'; @import 'scss/background-size'; @import 'scss/background-position'; @import 'scss/outlines'; @import 'scss/borders'; @import 'scss/border-colors'; @import 'scss/border-radius'; @import 'scss/border-style'; @import 'scss/border-widths'; @import 'scss/box-shadow'; @import 'scss/code'; @import 'scss/coordinates'; @import 'scss/clears'; @import 'scss/display'; @import 'scss/flexbox'; @import 'scss/floats'; @import 'scss/font-family'; @import 'scss/font-style'; @import 'scss/font-weight'; @import 'scss/forms'; @import 'scss/heights'; @import 'scss/letter-spacing'; @import 'scss/line-height'; @import 'scss/links'; @import 'scss/lists'; @import 'scss/max-widths'; @import 'scss/widths'; @import 'scss/overflow'; @import 'scss/position'; @import 'scss/opacity'; @import 'scss/rotations'; @import 'scss/skins'; @import 'scss/skins-pseudo'; @import 'scss/spacing'; @import 'scss/negative-margins'; @import 'scss/tables'; @import 'scss/text-decoration'; @import 'scss/text-align'; @import 'scss/text-transform'; @import 'scss/type-scale'; @import 'scss/typography'; @import 'scss/utilities'; @import 'scss/visibility'; @import 'scss/white-space'; @import 'scss/vertical-align'; @import 'scss/hovers'; @import 'scss/z-index'; @import 'scss/nested'; @import 'scss/styles'; ================================================ FILE: test.js ================================================ const fs = require('fs'); const test = require('ava'); const sass = require('node-sass'); test('tachyons-sass is able to be compiled by node-sass', t => { t.plan(1) const scss = fs.readFileSync('tachyons.scss', 'utf8') t.notThrows(() => { sass.renderSync({ data: scss }) }) })