├── .travis.yml ├── .editorconfig ├── src ├── 02_tools │ ├── _box-sizing.scss │ ├── _clearfix.scss │ ├── _scaling.scss │ └── _breakpoints.scss ├── 07_utilities │ ├── _height.scss │ ├── _inverse.scss │ ├── _displays.scss │ ├── _margin.scss │ ├── _type.scss │ ├── _padding.scss │ └── _colors.scss ├── 04_elements │ ├── _image.scss │ ├── _tables.scss │ ├── _link.scss │ ├── _divider.scss │ ├── _code.scss │ ├── _blockquote.scss │ ├── _button.scss │ ├── _base.scss │ ├── _lists.scss │ ├── _typography.scss │ └── _forms.scss ├── 06_components │ ├── _lead.scss │ ├── _headings.scss │ ├── _card.scss │ ├── _forms.control.scss │ └── _buttons.scss ├── 05_objects │ ├── _zones.scss │ ├── _tables.scss │ ├── _container.scss │ ├── _lists.scss │ ├── _flex.scss │ └── _grid.scss ├── themes │ └── crystal │ │ ├── crystal.scss │ │ └── _settings.scss ├── 03_generic │ └── _reset.scss ├── tent.scss └── 01_settings │ └── _variables.defaults.scss ├── bower.json ├── .gitignore ├── .csscomb.json ├── LICENSE ├── package.json ├── examples ├── index.html └── marketing │ └── index.html ├── README.md └── dist ├── themes ├── crystal.min.css └── crystal.css ├── tent.min.css └── tent.css /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "5.5.0" -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = tab 6 | indent_size = 2 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /src/02_tools/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Box-Sizing 3 | // ========================================================================== 4 | 5 | @mixin box-sizing($box-model) { 6 | box-sizing: $box-model; 7 | } -------------------------------------------------------------------------------- /src/07_utilities/_height.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Standalone Height Modifiers 3 | // ========================================================================== 4 | 5 | .height { 6 | 7 | &-full { height: 100%; } 8 | } -------------------------------------------------------------------------------- /src/04_elements/_image.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Images 3 | // ========================================================================== 4 | 5 | img { 6 | max-width: 100%; 7 | height: auto; 8 | border: 0; 9 | vertical-align: middle; 10 | } -------------------------------------------------------------------------------- /src/04_elements/_tables.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Tables 3 | // ========================================================================== 4 | 5 | table { 6 | border-spacing: 0; 7 | 8 | td { 9 | padding: $table-cell-padding; 10 | } 11 | } -------------------------------------------------------------------------------- /src/06_components/_lead.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Lead 3 | // ========================================================================== 4 | 5 | .lead { 6 | font-weight: $lead-font-weight; 7 | font-size: $lead-font-size; 8 | line-height: $lead-line-height; 9 | } 10 | -------------------------------------------------------------------------------- /src/05_objects/_zones.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Zones 3 | // ========================================================================== 4 | 5 | %zone {} 6 | 7 | #{$zone-header} { @extend %zone; } 8 | #{$zone-content} { @extend %zone; } 9 | #{$zone-footer} { @extend %zone; } 10 | -------------------------------------------------------------------------------- /src/04_elements/_link.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Links 3 | // ========================================================================== 4 | 5 | a { 6 | color: $link-color; 7 | text-decoration: none; 8 | 9 | &:hover, 10 | &:focus, 11 | &:active { 12 | color: $link-hover-color; 13 | } 14 | } -------------------------------------------------------------------------------- /src/02_tools/_clearfix.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Clearfix 3 | // ========================================================================== 4 | 5 | @mixin clearfix() { 6 | &:before, 7 | &:after { 8 | content: ''; 9 | display: table; 10 | } 11 | &:after { 12 | clear: both; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/04_elements/_divider.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Divider 3 | // ========================================================================== 4 | 5 | hr { 6 | display: block; 7 | margin: $divider-margin; 8 | height: $divider-height; 9 | border: none; 10 | background-color: $divider-color; 11 | } -------------------------------------------------------------------------------- /src/04_elements/_code.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Code 3 | // ========================================================================== 4 | 5 | code { 6 | font-family: $font-family-monospace; 7 | font-size: inherit; 8 | color: $code-color; 9 | background-color: $code-bg; 10 | padding: $code-padding; 11 | } -------------------------------------------------------------------------------- /src/07_utilities/_inverse.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Inverse 3 | // ========================================================================== 4 | 5 | .inverse { 6 | color: $base-color-inverse; 7 | 8 | h1, 9 | h2, 10 | h3, 11 | h4, 12 | h5, 13 | h6 { 14 | color:$heading-color-inverse; 15 | } 16 | } -------------------------------------------------------------------------------- /src/04_elements/_blockquote.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Blockquote 3 | // ========================================================================== 4 | 5 | blockquote { 6 | margin: $blockquote-margin; 7 | padding: $blockquote-padding; 8 | border-left: $blockquote-border; 9 | } 10 | 11 | cite { 12 | font-style: $cite-style; 13 | } -------------------------------------------------------------------------------- /src/05_objects/_tables.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Tables 3 | // ========================================================================== 4 | 5 | .table { 6 | 7 | &--stripped .table__body { 8 | 9 | .table__row:not(:nth-child(even)) .table__cell { 10 | background-color: $table-stripped-odd-bg; 11 | } 12 | } 13 | } -------------------------------------------------------------------------------- /src/04_elements/_button.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Button 3 | // ========================================================================== 4 | 5 | button { 6 | border: 0; 7 | margin: 0; 8 | padding: 0; 9 | text-align: inherit; 10 | text-transform: inherit; 11 | font: inherit; 12 | letter-spacing: inherit; 13 | background: none; 14 | cursor: pointer; 15 | overflow: visible; 16 | } -------------------------------------------------------------------------------- /src/07_utilities/_displays.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Standalone Displays 3 | // ========================================================================== 4 | 5 | .display { 6 | 7 | &-block { display: block } 8 | &-flex { display: flex; } 9 | &-inline-block { display: inline-block; } 10 | &-inline { display: inline; } 11 | &-none { display: none; } 12 | &-table { display: table; } 13 | } -------------------------------------------------------------------------------- /src/themes/crystal/crystal.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Crystal Theme 3 | // A Tent CSS design theme 4 | // ========================================================================== 5 | 6 | @import "settings"; 7 | 8 | // ========================================================================== 9 | // Import Tent 10 | // ========================================================================== 11 | 12 | @import "../../tent"; -------------------------------------------------------------------------------- /src/04_elements/_base.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Base 3 | // ========================================================================== 4 | 5 | // Default body properties 6 | body { 7 | background-color: $base-color-bg; 8 | color: $base-color; 9 | font-weight: $base-font-weight; 10 | font-size: 1em; // currently ems cause chrome bug misinterpreting rems on body element 11 | font-family: $font-family-primary; 12 | line-height: $base-line-height; 13 | } -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tent-css", 3 | "description": "A CSS survival kit.", 4 | "main": "package.json", 5 | "authors": [ 6 | "Aaron Mazade " 7 | ], 8 | "license": "MIT", 9 | "keywords": [ 10 | "css", 11 | "flexbox", 12 | "html", 13 | "html5", 14 | "scss", 15 | "sass", 16 | "responsive", 17 | "framework" 18 | ], 19 | "homepage": "https://github.com/ulinaaron/tentcss", 20 | "ignore": [ 21 | "**/.*", 22 | "node_modules", 23 | "bower_components", 24 | "test", 25 | "tests" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /src/04_elements/_lists.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Lists 3 | // ========================================================================== 4 | 5 | ul, 6 | ol { 7 | margin: $list-margin; 8 | padding: $list-padding; 9 | } 10 | 11 | ul { 12 | list-style: $unordered-list-style; 13 | } 14 | 15 | ol { 16 | list-style: $ordered-list-style; 17 | } 18 | 19 | li { 20 | display: list-item; 21 | margin-bottom: map-get($spaces, xxxs); 22 | } 23 | 24 | dl { 25 | margin-top: 0; 26 | margin-bottom: 0; 27 | } 28 | 29 | dd { 30 | margin-left: 0; 31 | } -------------------------------------------------------------------------------- /src/05_objects/_container.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Containers 3 | // ========================================================================== 4 | 5 | .container { 6 | position: relative; 7 | margin: 0 auto; 8 | padding: 0; 9 | width: 100%; 10 | 11 | @include breakpoint-min(sm) { 12 | max-width: map-get($container-max-widths, 'sm'); 13 | } 14 | @include breakpoint-min(md) { 15 | max-width: map-get($container-max-widths, 'md'); 16 | } 17 | @include breakpoint-min(lg) { 18 | max-width: map-get($container-max-widths, 'xl'); 19 | } 20 | 21 | &--fluid { 22 | max-width: 100%; 23 | } 24 | } -------------------------------------------------------------------------------- /src/07_utilities/_margin.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Margin 3 | // ========================================================================== 4 | 5 | .margin { 6 | 7 | // Create margin classes 8 | // For each space key found in the $spaces map from the settings. 9 | @each $space, $margin in $spaces { 10 | &-#{$space} { 11 | margin: $margin; 12 | } 13 | } 14 | 15 | &-y { 16 | margin-left: 0; 17 | margin-right: 0; 18 | } 19 | 20 | &-x { 21 | margin-top: 0; 22 | margin-bottom: 0; 23 | } 24 | 25 | &-nulled { margin: 0; } 26 | } -------------------------------------------------------------------------------- /src/07_utilities/_type.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Standalone Typography Modifiers 3 | // ========================================================================== 4 | 5 | .type { 6 | 7 | &-italic { font-style: $type-italic; } 8 | &-bold { font-weight: $type-bold; } 9 | &-black { font-weight: $type-black; } 10 | &-small { font-size: $type-small; } 11 | &-caps { font-variant: $type-caps;} 12 | &-uppercase {text-transform: uppercase; } 13 | &-justify { text-align: justify; } 14 | &-left { text-align: left; } 15 | &-right { text-align: right; } 16 | &-center { text-align: center; } 17 | } -------------------------------------------------------------------------------- /src/05_objects/_lists.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Lists 3 | // ========================================================================== 4 | 5 | .list { 6 | 7 | &--unstyled, 8 | &--inline { 9 | list-style-type: none; 10 | padding: 0; 11 | } 12 | 13 | &--inline { 14 | 15 | .list__item { 16 | display: inline-block; 17 | 18 | &:not(:last-child) { 19 | padding-right: 25px; 20 | } 21 | } 22 | } 23 | 24 | &--nulled { 25 | 26 | &, 27 | .list__item { 28 | margin: 0; 29 | } 30 | } 31 | } -------------------------------------------------------------------------------- /src/07_utilities/_padding.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Space 3 | // ========================================================================== 4 | 5 | .padding { 6 | 7 | // Create padding classes 8 | // For each space key found in the $spaces map from the settings. 9 | @each $space, $padding in $spaces { 10 | &-#{$space} { 11 | padding: $padding; 12 | } 13 | } 14 | 15 | &-y { 16 | padding-left: 0; 17 | padding-right: 0; 18 | } 19 | 20 | &-x { 21 | padding-top: 0; 22 | padding-bottom: 0; 23 | } 24 | 25 | &-nulled { padding: 0; } 26 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | $RECYCLE.BIN/ 2 | *.cab 3 | *.lnk 4 | *.log 5 | *.msi 6 | *.msm 7 | *.msp 8 | *.pid 9 | *.seed 10 | *~ 11 | .AppleDB 12 | .AppleDesktop 13 | .AppleDouble 14 | .DS_Store 15 | .DocumentRevisions-V100 16 | .LSOverride 17 | .Spotlight-V100 18 | .TemporaryItems 19 | .Trash-* 20 | .Trashes 21 | .VolumeIcon.icns 22 | ._* 23 | .apdisk 24 | .directory 25 | .fseventsd 26 | .lock-wscript 27 | .node_repl_history 28 | .npm 29 | Desktop.ini 30 | Icon 31 | Network Trash Folder 32 | Temporary Items 33 | Thumbs.db 34 | build/Release 35 | coverage 36 | ehthumbs.db 37 | lib-cov 38 | logs 39 | node_modules 40 | npm-debug.log* 41 | pids 42 | prepros.cfg 43 | prepros-6.config 44 | .publish 45 | .vscode 46 | 47 | # Only use maps for local. 48 | *.css.map -------------------------------------------------------------------------------- /src/themes/crystal/_settings.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Crystal Theme - Settings 3 | // A Tent CSS design theme. 4 | // ========================================================================== 5 | 6 | // ========================================================================== 7 | // Colors 8 | // ========================================================================== 9 | 10 | $color-primary: #B10DC9; 11 | $color-secondary: #39CCCC; 12 | $color-tertiary: #FF851B; 13 | 14 | $color-lightest: #FFFFFF; 15 | $color-lighter: #F2F2F2; 16 | $color-light: #E0E0E0; 17 | $color-medium: #A4A4A4; 18 | $color-dark: #6E6E6E; 19 | $color-darker: #444444; 20 | $color-darkest: #111111; 21 | -------------------------------------------------------------------------------- /src/04_elements/_typography.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Typography 3 | // ========================================================================== 4 | 5 | p { 6 | margin: $pararaph-margin; 7 | 8 | &:last-child { 9 | margin-bottom: 0; 10 | } 11 | } 12 | 13 | h1, 14 | h2, 15 | h3, 16 | h4, 17 | h5, 18 | h6 { 19 | display: block; 20 | margin: $heading-margin; 21 | color: $heading-color; 22 | font-weight: inherit; 23 | font-size: inherit; 24 | line-height: $heading-line-height; 25 | 26 | &:last-child { 27 | margin-bottom: 0; 28 | } 29 | } 30 | 31 | h1 { font-size: rem($size-xxxl); } 32 | h2 { font-size: rem($size-xxl); } 33 | h3 { font-size: rem($size-xl); } 34 | h4 { font-size: rem($size-lg); } 35 | h5 { font-size: rem($size-md); } 36 | h6 { font-size: rem($size-sm); } -------------------------------------------------------------------------------- /.csscomb.json: -------------------------------------------------------------------------------- 1 | { 2 | "remove-empty-rulesets": true, 3 | "always-semicolon": true, 4 | "color-case": "lower", 5 | "block-indent": "\t", 6 | "color-shorthand": true, 7 | "element-case": "lower", 8 | "eof-newline": true, 9 | "leading-zero": false, 10 | "quotes": "single", 11 | "sort-order-fallback": "abc", 12 | "space-before-colon": "", 13 | "space-after-colon": " ", 14 | "space-before-combinator": " ", 15 | "space-after-combinator": " ", 16 | "space-between-declarations": "\n", 17 | "space-before-opening-brace": " ", 18 | "space-after-opening-brace": "\n", 19 | "space-after-selector-delimiter": "\n", 20 | "space-before-selector-delimiter": "", 21 | "space-before-closing-brace": "\n", 22 | "strip-spaces": true, 23 | "unitless-zero": true, 24 | "vendor-prefix-align": true 25 | } -------------------------------------------------------------------------------- /src/04_elements/_forms.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Form Elements 3 | // ========================================================================== 4 | 5 | // Remove the default vertical scrollbar in IE. 6 | textarea { overflow: auto; } 7 | 8 | input[type="email"], 9 | input[type="number"], 10 | input[type="search"], 11 | input[type="text"], 12 | input[type="tel"], 13 | input[type="url"], 14 | input[type="password"], 15 | textarea, 16 | select { 17 | display: block; 18 | margin: $form-input-margin; 19 | padding: $form-input-padding; 20 | width: auto; 21 | border: $form-input-border; 22 | border-radius: $form-input-radius; 23 | background-color: $form-input-bg; 24 | color: $form-input-color; 25 | font-size: $form-input-size; 26 | font-family: inherit; 27 | appearance: none; 28 | 29 | &:focus { 30 | border-color: $form-input-focus; 31 | } 32 | } -------------------------------------------------------------------------------- /src/02_tools/_scaling.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Scaling Fuctnions 3 | // ========================================================================== 4 | 5 | @function parseInt($n) { 6 | @return $n / ($n * 0 + 1); 7 | } 8 | 9 | @function rem($value, $scale: $scale-unit) { 10 | $root: $scale; 11 | $val: parseInt($value); 12 | $return: (); 13 | 14 | @if unit($value) == "px" { 15 | $return: append($return, ($val / $root + rem)); 16 | } @else { 17 | $return: append($return, ($val * $root + px)); 18 | } 19 | 20 | @return $return; 21 | } 22 | 23 | @function em($value, $scale: $scale-unit) { 24 | $root: $scale; 25 | $val: parseInt($value); 26 | $return: (); 27 | 28 | @if unit($value) == "px" { 29 | $return: append($return, ($val / $root + em)); 30 | } @else { 31 | $return: append($return, ($val * $root + px)); 32 | } 33 | 34 | @return $return; 35 | } 36 | 37 | 38 | @function line-scale($value) { 39 | 40 | @return $value * $scale-ratio; 41 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright © 2016 CJ Patoilo 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /src/06_components/_headings.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Titles & Subtitles 3 | // ========================================================================== 4 | 5 | .title, 6 | .subtitle { 7 | 8 | &--xxxs { font-size: rem($size-xxxs); } 9 | &--xxs { font-size: rem($size-xxs); } 10 | &--xs { font-size: rem($size-xs); } 11 | &--sm { font-size: rem($size-sm); } 12 | &--md { font-size: rem($size-md); } 13 | &--lg { font-size: rem($size-lg); } 14 | &--xl { font-size: rem($size-xl); } 15 | &--xxl { font-size: rem($size-xxl); } 16 | &--xxxl { font-size: rem($size-xxxl); } 17 | } 18 | 19 | .title { 20 | font-weight: 700; 21 | } 22 | 23 | .subtitle { 24 | font-weight: 100; 25 | } 26 | 27 | // Misc 28 | // -------------------------------------------------- 29 | 30 | .title, 31 | .subtitle { 32 | word-break: break-word; 33 | } 34 | 35 | .title:not(:last-child), 36 | .subtitle:not(:last-child) { 37 | margin-bottom: map-get($spaces, xxs); 38 | } 39 | 40 | // Title Set 41 | // -------------------------------------------------- 42 | 43 | .title-set { 44 | .title { 45 | margin: 0; 46 | } 47 | 48 | .title + .subtitle { 49 | margin-top: 0; 50 | } 51 | } -------------------------------------------------------------------------------- /src/03_generic/_reset.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Reset 3 | // Based on https://github.com/jaydenseric/Fix 4 | // ========================================================================== 5 | 6 | // 1. See https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust 7 | 8 | html { 9 | @include box-sizing(border-box); 10 | line-height: 1; 11 | font-size: 100%; 12 | -ms-text-size-adjust: 100%; // * 1 * 13 | -webkit-text-size-adjust: 100%; // * 1 * 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | // 1. Set global inheritance from box-sizing property set on `html` element. 19 | 20 | *, 21 | *:before, 22 | *:after { 23 | @include box-sizing(inherit); // * 1 * 24 | } 25 | 26 | // 1. Incase custom font was used without a fallback 27 | 28 | body { 29 | margin: 0; 30 | font-family: sans-serif; // * 1 * 31 | } 32 | 33 | iframe { 34 | border: 0; 35 | } 36 | 37 | main { 38 | display: block; 39 | } 40 | 41 | sup { 42 | position: relative; 43 | top: -.5em; 44 | vertical-align: baseline; 45 | font-size: 75%; 46 | line-height: 0; 47 | } 48 | 49 | strong { 50 | font-weight: bold; 51 | } 52 | 53 | figure { 54 | margin: 0; 55 | } 56 | 57 | ::-moz-focus-inner { 58 | border: 0; 59 | padding: 0; 60 | } -------------------------------------------------------------------------------- /src/07_utilities/_colors.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Standalone Colors & Background Modifiers 3 | // ========================================================================== 4 | 5 | .color { 6 | &-primary { color: $color-primary } 7 | &-secondary { color: $color-secondary } 8 | &-tertiary { color: $color-tertiary } 9 | 10 | &-light { color: $color-light } 11 | &-lighter { color: $color-lighter } 12 | &-lightest { color: $color-lightest } 13 | &-medium { color: $color-medium } 14 | &-dark { color: $color-dark } 15 | &-darker { color: $color-darker } 16 | &-darkest { color: $color-darkest } 17 | } 18 | 19 | .bg-color { 20 | &-primary { background-color: $color-primary } 21 | &-secondary { background-color: $color-secondary } 22 | &-tertiary { background-color: $color-tertiary } 23 | 24 | &-light { background-color: $color-light } 25 | &-lighter { background-color: $color-lighter } 26 | &-lightest { background-color: $color-lightest } 27 | &-medium { background-color: $color-medium } 28 | &-dark { background-color: $color-dark } 29 | &-darker { background-color: $color-darker } 30 | &-darkest { background-color: $color-darkest } 31 | } -------------------------------------------------------------------------------- /src/06_components/_card.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Cards 3 | // ========================================================================== 4 | 5 | .card { 6 | display: flex; 7 | flex-direction: column; 8 | overflow: hidden; 9 | margin-bottom: $card-margin; 10 | border: $card-border; 11 | border-radius: $card-radius; 12 | background: $card-bg; 13 | color: $card-color; 14 | 15 | & > :last-child { 16 | margin-bottom: 0; 17 | } 18 | 19 | &__image { 20 | margin: 0 auto; 21 | max-width: 100%; 22 | } 23 | 24 | &__content { 25 | padding: $card-content-padding; 26 | 27 | flex: 1 0 auto; 28 | 29 | & > :last-child { 30 | margin-bottom: 0; 31 | } 32 | } 33 | } 34 | 35 | .card--filled { 36 | background-color: $card-color; 37 | 38 | &.card--primary { background-color: $color-primary; } 39 | &.card--secondary { background-color: $color-secondary; } 40 | &.card--tertiary { background-color: $color-tertiary; } 41 | } 42 | 43 | .card--outlined { 44 | border: $card-outlined-border; 45 | 46 | &.card--primary { border-color: $color-primary; } 47 | &.card--secondary { border-color: $color-secondary; } 48 | &.card--tertiary { border-color: $color-tertiary; } 49 | } 50 | 51 | .card--raised { 52 | box-shadow: $card-raised-shadow; 53 | } 54 | 55 | .card--clear, 56 | .card--feature { 57 | border: 0; 58 | } 59 | 60 | .card--clear { 61 | background: transparent; 62 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tent-css", 3 | "version": "1.4.3", 4 | "description": "A CSS survival kit.", 5 | "author": "Aaron Mazade ", 6 | "style": "dist/tent.css", 7 | "license": "MIT", 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/sitetent/tentcss.git" 11 | }, 12 | "homepage": "http://css.sitetent.com", 13 | "bugs": { 14 | "url": "https://github.com/sitetent/tentcss/issues" 15 | }, 16 | "scripts": { 17 | "version:patch": "npm version patch -m \"Bumped to %s\"", 18 | "tent:expanded": "node-sass --output-style expanded src/tent.scss dist/tent.css", 19 | "tent:compressed": "node-sass --output-style compressed src/tent.scss dist/tent.min.css", 20 | "crystal:expanded": "node-sass --output-style expanded src/themes/crystal/crystal.scss dist/themes/crystal.css", 21 | "crystal:compressed": "node-sass --output-style compressed src/themes/crystal/crystal.scss dist/themes/crystal.min.css", 22 | "autoprefixer": "postcss -u autoprefixer --no-map --autoprefixer.browsers 'last 4 versions' -r dist/*.css", 23 | "serve": "browser-sync start --serveStatic 'examples' --files 'dist/*.css, examples/**/*.html,' --server", 24 | "dev": "parallelshell 'npm run serve' 'npm run watch'", 25 | "watch": "onchange src -- npm run build", 26 | "build": "npm-run-all tent:expanded tent:compressed crystal:expanded crystal:compressed autoprefixer" 27 | }, 28 | "keywords": [ 29 | "css", 30 | "flexbox", 31 | "html", 32 | "html5", 33 | "scss", 34 | "sass", 35 | "responsive", 36 | "framework" 37 | ], 38 | "devDependencies": { 39 | "autoprefixer": "^6.3.7", 40 | "browser-sync": "^2.14.0", 41 | "clean-css": "^3.4.19", 42 | "node-sass": "^3.8.0", 43 | "npm-run-all": "^2.3.0", 44 | "onchange": "^2.5.0", 45 | "parallelshell": "^2.0.0", 46 | "postcss-cli": "^2.5.2" 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/02_tools/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Breakpoints 3 | // ========================================================================== 4 | 5 | // Functions 6 | // ========================================================================== 7 | 8 | @function breakpoint-next($name, $points: $breakpoints, $point-names: map-keys($points)) { 9 | $index: index($point-names, $name); 10 | @return if($index < length($point-names), nth($point-names, $index + 1), null); 11 | } 12 | 13 | @function breakpoint-min($name, $points: $breakpoints) { 14 | $min: map-get($points, $name); 15 | @return if($min != 0, $min, null); 16 | } 17 | 18 | @function breakpoint-max($name, $points: $breakpoints) { 19 | $next: breakpoint-next($name, $points); 20 | $current: breakpoint-min($next, $points); 21 | $threshold: 0.2px; 22 | 23 | @return if($next, em(($current - $threshold)), null); 24 | } 25 | 26 | // Mixins 27 | // ========================================================================== 28 | 29 | @mixin breakpoint-min($name, $points: $breakpoints) { 30 | @if map-has-key($points, $name) { 31 | $min: breakpoint-min($name, $points); 32 | @if $min { 33 | @media (min-width: $min) { 34 | @content; 35 | } 36 | } @else { 37 | @content; 38 | } 39 | } 40 | 41 | @else { 42 | @warn "Unfortunately, no value could be retrieved from `#{$name}`. " 43 | + "Please make sure it is defined in `$breakpoints` map."; 44 | } 45 | } 46 | 47 | @mixin breakpoint-max($name, $points: $breakpoints) { 48 | @if map-has-key($points, $name) { 49 | $max: breakpoint-max($name, $points); 50 | @if $max { 51 | @media (max-width: $max) { 52 | @content; 53 | } 54 | } @else { 55 | @content; 56 | } 57 | } 58 | 59 | @else { 60 | @warn "Unfortunately, no value could be retrieved from `#{$name}`. " 61 | + "Please make sure it is defined in `$breakpoints` map."; 62 | } 63 | } -------------------------------------------------------------------------------- /src/05_objects/_flex.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Flex Object 3 | // ========================================================================== 4 | 5 | .flex { 6 | display: flex; 7 | flex-direction: row; 8 | } 9 | 10 | // Flex Object Modifiers 11 | // ========================================================================== 12 | 13 | .flex--stack { flex-direction: column; } 14 | .flex--top { align-items: flex-start; } 15 | .flex--bottom { align-items: flex-end; } 16 | .flex--center { align-items: center; } 17 | .flex--stretch { align-items: stretch; } 18 | .flex--baseline { align-items: baseline; } 19 | 20 | .flex--justify-center { justify-content: center; } 21 | .flex--justify-start { justify-content: flex-start; } 22 | .flex--justify-end { justify-content: flex-end; } 23 | 24 | // ========================================================================== 25 | // Flex Object Item 26 | // ========================================================================== 27 | 28 | .flex__item { 29 | display: block; 30 | 31 | flex: 1; 32 | } 33 | 34 | .flex__item--top { align-self: flex-start; } 35 | .flex__item--bottom { align-self: flex-end; } 36 | .flex__item--center { align-self: center; } 37 | 38 | 39 | // ========================================================================== 40 | // Flex Object Standalone Utilities 41 | // ========================================================================== 42 | 43 | // Flex Ordering 44 | // ========================================================================== 45 | 46 | .flex-first { order: -1 } 47 | .flex-last { order: 1; } 48 | 49 | @include breakpoint-min(sm) { 50 | .flex-first--sm { order: -1 } 51 | .flex-last--sm { order: 1; } 52 | } 53 | 54 | @include breakpoint-min(md) { 55 | .flex-first--md { order: -1 } 56 | .flex-last--md { order: 1; } 57 | } 58 | 59 | @include breakpoint-min(lg) { 60 | .flex-first--lg { order: -1 } 61 | .flex-last--lg { order: 1; } 62 | } 63 | 64 | @include breakpoint-min(xl) { 65 | .flex-first--xl { order: -1 } 66 | .flex-last--xl { order: 1; } 67 | } 68 | -------------------------------------------------------------------------------- /src/tent.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * Tent CSS 3 | * http://css.sitetent.com 4 | * 5 | * Copyright (c) 2017, Aaron Mazade 6 | * Licensed under the MIT license 7 | */ 8 | 9 | @charset "utf-8"; 10 | 11 | // ========================================================================== 12 | // Import Modules 13 | // ========================================================================== 14 | 15 | // 01 - Settings 16 | // ========================================================================== 17 | 18 | @import "01_settings/variables.defaults"; 19 | 20 | // 02 - Tools 21 | // ========================================================================== 22 | 23 | @import "02_tools/scaling"; 24 | @import "02_tools/breakpoints"; 25 | @import "02_tools/box-sizing"; 26 | 27 | // 03 - Generics 28 | // ========================================================================== 29 | 30 | @import "03_generic/reset"; 31 | 32 | // 04 - Elements 33 | // ========================================================================== 34 | 35 | @import "04_elements/base"; 36 | @import "04_elements/divider"; 37 | @import "04_elements/image"; 38 | @import "04_elements/link"; 39 | @import "04_elements/button"; 40 | @import "04_elements/blockquote"; 41 | @import "04_elements/code"; 42 | @import "04_elements/typography"; 43 | @import "04_elements/forms"; 44 | @import "04_elements/lists"; 45 | @import "04_elements/tables"; 46 | 47 | // 05 - Objects 48 | // ========================================================================== 49 | 50 | @import "05_objects/container"; 51 | @import "05_objects/flex"; 52 | @import "05_objects/grid"; 53 | @import "05_objects/lists"; 54 | @import "05_objects/tables"; 55 | 56 | // 06 - Components 57 | // ========================================================================== 58 | 59 | @import "06_components/headings"; 60 | @import "06_components/lead"; 61 | @import "06_components/buttons"; 62 | @import "06_components/card"; 63 | @import "06_components/forms.control"; 64 | 65 | // 07 - Utilities 66 | // ========================================================================== 67 | 68 | @import "07_utilities/colors"; 69 | @import "07_utilities/inverse"; 70 | @import "07_utilities/displays"; 71 | @import "07_utilities/padding"; 72 | @import "07_utilities/margin"; 73 | @import "07_utilities/height"; 74 | @import "07_utilities/type"; -------------------------------------------------------------------------------- /src/05_objects/_grid.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Grid 3 | // ========================================================================== 4 | 5 | .grid { 6 | @extend .flex; 7 | padding: 0; 8 | width: 100%; 9 | flex-wrap: wrap; 10 | flex-direction: row; 11 | 12 | &--gutterless { 13 | & > .grid__column { 14 | padding: 0; 15 | } 16 | } 17 | } 18 | 19 | // Grid Modifiers 20 | // Extends .flex 21 | // ========================================================================== 22 | 23 | .grid--stack { @extend .flex--stack; } 24 | .grid--top { @extend .flex--top; } 25 | .grid--bottom { @extend .flex--bottom; } 26 | .grid--center { @extend .flex--center; } 27 | .grid--stretch { @extend .flex--stretch; } 28 | .grid--baseline { @extend .flex--baseline; } 29 | 30 | .grid--justify-center { @extend .flex--justify-center; } 31 | .grid--justify-start { @extend .flex--justify-start; } 32 | .grid--justify-end { @extend .flex--justify-end; } 33 | 34 | 35 | // Grid Columns 36 | // ========================================================================== 37 | 38 | 39 | .grid__column { 40 | @extend .flex__item; 41 | margin-left: 0; 42 | max-width: 100%; 43 | width: 100%; 44 | padding-left: $grid-gutter; 45 | padding-right: $grid-gutter; 46 | 47 | // .column-* vertically aligns an individual .column 48 | &--top { @extend .flex__item--top; } 49 | &--bottom { @extend .flex__item--bottom;} 50 | &--center { @extend .flex__item--center; } 51 | 52 | // Explicit Column Percent Sizes 53 | @for $i from 1 through $grid-columns { 54 | $factor: 100% * ($i / $grid-columns); 55 | &--#{$i} { 56 | flex: 0 0 #{$factor}; 57 | max-width: #{$factor}; 58 | } 59 | } 60 | 61 | @each $point in $grid-breakpoints { 62 | @include breakpoint-min($point) { 63 | @for $i from 1 through $grid-columns { 64 | $factor: 100% * ($i / $grid-columns); 65 | &--#{$i}--#{$point} { 66 | flex: 0 0 #{$factor}; 67 | max-width: #{$factor}; 68 | } 69 | } 70 | } 71 | } 72 | } 73 | 74 | // Breakpoint changes for default selectors 75 | // ========================================================================== 76 | 77 | @include breakpoint-min(sm) { 78 | .grid { width: 100%; } 79 | .grid__column { padding: 0 $grid-gutter; } 80 | } 81 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Tent CSS Boilerplate 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 |
19 |

Heading

20 |

Heading

21 |

Heading

22 |

Heading

23 |
Heading
24 |
Heading
25 | 26 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque odit consectetur, pariatur explicabo dolores eaque sunt cum provident numquam, laborum tenetur. Reprehenderit perferendis incidunt, error dolorem architecto sapiente rerum consequatur odit dicta magnam recusandae aut et pariatur. Sint, totam, dignissimos!

27 | 28 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, reprehenderit deleniti. Temporibus, accusamus autem magni commodi totam laudantium consequatur unde eius itaque nostrum esse molestiae adipisci quibusdam dolor recusandae non accusantium illo suscipit quam, dolore. Laborum illum autem, voluptatum quasi.

29 | 30 |
31 |

32 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque id earum sit deleniti amet, maxime? Soluta vitae, quaerat velit doloribus sed culpa assumenda quidem accusamus explicabo quo ea sit recusandae labore deleniti ducimus, ipsum dolorum alias, ipsam suscipit. Maxime, nam! 33 |

34 | John Smith 35 |
36 | 37 |
38 |
39 | 40 |
41 |
42 | 43 | -------------------------------------------------------------------------------- /src/06_components/_forms.control.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Form Controls 3 | // ========================================================================== 4 | 5 | .control__label { 6 | display: block; 7 | margin: 0 0 $form-margin; 8 | font-weight: $form-label-weight; 9 | } 10 | 11 | // Modifier - Control Radio 12 | // ========================================================================== 13 | 14 | .control--radio, 15 | .control--checkbox { 16 | .control__label { 17 | font-weight: 400; 18 | } 19 | } 20 | 21 | // Modifier - Control Inline 22 | // ========================================================================== 23 | 24 | .control--inline { 25 | @extend .flex; 26 | flex-direction: column; 27 | 28 | .control__label:not(:first-child) { 29 | margin-left: 0; 30 | } 31 | 32 | @include breakpoint-min(sm) { 33 | flex-direction: row; 34 | 35 | .control__label:not(:first-child) { 36 | margin-left: map-get($spaces, xxxs); 37 | } 38 | } 39 | 40 | } 41 | 42 | 43 | // Modifier - Control Block 44 | // Expands control for inputs and other form elements 45 | // ========================================================================== 46 | 47 | .control--block { 48 | &, 49 | .control__input, 50 | .control__textarea, 51 | .control__select { 52 | width: 100%; 53 | } 54 | } 55 | 56 | // Control - Select Wrapper 57 | // Turns the control into a wrapper for a better select 58 | // ========================================================================== 59 | 60 | .control--select { 61 | display: inline-block; 62 | vertical-align: top; 63 | position: relative; 64 | margin: 0 0 map-get($spaces, xs); 65 | 66 | &:after { 67 | content: ""; 68 | border: 1px solid $color-primary; 69 | border-right: 0; 70 | border-top: 0; 71 | display: block; 72 | position: absolute; 73 | height: map-get($spaces, xxxs); 74 | pointer-events: none; 75 | transform: rotate(-45deg); 76 | width: map-get($spaces, xxxs); 77 | margin-top: -0.375em; 78 | right: 1.125em; 79 | top: 50%; 80 | z-index: 4; 81 | } 82 | } 83 | 84 | .control__select { 85 | padding-right: map-get($spaces, md); 86 | margin: 0; 87 | } 88 | 89 | // Control - Textarea 90 | // ========================================================================== 91 | 92 | .control__textarea { 93 | 94 | &--sm { min-height: rem($control-textarea-sm); } 95 | &--md { min-height: rem($control-textarea-md); } 96 | &--lg { min-height: rem($control-textarea-lg); } 97 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 | 5 |

6 | 7 | 8 | # Tent CSS 9 | [![Build Status](https://travis-ci.org/sitetent/tentcss.svg?branch=master)](https://travis-ci.org/sitetent/tentcss) 10 | [![npm version](https://badge.fury.io/js/tent-css.svg)](https://badge.fury.io/js/tent-css) 11 | 12 | 13 | 14 | [![Gitter chat](https://badges.gitter.im/tentcss/tentcss.png)](https://gitter.im/tentcss/tentcss) 15 | 16 | **TentCSS 1.x.x is not currently receiving updates.** 17 | 18 | A CSS survival kit. Includes only the essentials to make camp. 19 | 20 | Website - 21 | 22 | Follow on Twitter - [@tentcss](https://twitter.com/tentcss) 23 | 24 | ## Installation 25 | 26 | You can install via [bower](http://bower.io): 27 | 28 | ``` 29 | $ bower install --save tent-css 30 | ``` 31 | 32 | Or, you can install via [npm](http://npmjs.org): 33 | 34 | ``` 35 | $ npm install --save tent-css 36 | ``` 37 | Or, you can clone the source: 38 | 39 | ``` 40 | $ git clone https://github.com/sitetent/tentcss.git 41 | ``` 42 | 43 | Read more about installation on the [documentation](https://css.sitetent.com/docs.html). 44 | 45 | ## How to Use 46 | 47 | Documentation for Tent CSS is updated on the official website: 48 | 49 | [Tent CSS Documentation](https://css.sitetent.com/docs.html) 50 | 51 | ## Related Projects 52 | 53 | - [Tent CSS Markup Snippets Extension for Visual Studio Code](https://github.com/sitetent/tent-snippets-vsc) 54 | 55 | ## Contributing 56 | 57 | You can help make Tent CSS event better! 58 | 59 | ### Before you contribute 60 | 61 | Please before opening a pull request, inquire via GitHub issues to make a case for any proposed change. 62 | Please be as specific as possibe, consider including code examples too. 63 | 64 | Tent CSS has been designed with strict principles in mind that have made it the attractive framework that it is. 65 | Please be mindful that any potential feature requests must conform to these principles. 66 | 67 | ### Creating a pull request 68 | 69 | 1. Fork the repository. 70 | 2. Create a feature branch. `git checkout -b new-feature` 71 | 3. Install the dependencies and run `npm install` 72 | 4. Build any feature before submitting by running `npm run build` 73 | 5. Once you have pushed the branch to Github submit a new [Pull Request](https://github.com/sitetent/tentcss/pulls). 74 | 75 | ## License 76 | 77 | MIT 78 | 79 | ## Credit 80 | 81 | - All of the authors and contributors to the great open source frameworks that have set the pace thus far and going forward. 82 | - The Tent CSS website full-screen hero photo is by [Jamison McAndie](https://unsplash.com/@jamomca). 83 | - Tent CSS is developed with caffine by [Aaron Mazade](http://aaronmazade.com) ([@ulinaaron](https://twitter.com/ulinaaron)). 84 | 85 | 86 | ## Roadmap 87 | 88 | - Addons for more objects and components. 89 | - Better mixin support for default objects and components. Will allow those that desire to include mixins into their own classes rather than class chaining to make object and component variations. 90 | - Example boilerplates for common page types such as marketing and landing pages. 91 | -------------------------------------------------------------------------------- /src/06_components/_buttons.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Buttons 3 | // ========================================================================== 4 | 5 | .button { 6 | display: inline-block; 7 | margin-bottom: map-get($spaces, xxxs); 8 | padding: map-get($button-padding, sm); 9 | border: $button-outlined-border-width solid $button-filled-bg; 10 | border-radius: $button-border-radius; 11 | background-color: $button-filled-bg; 12 | color: $button-filled-color; 13 | text-decoration: none; 14 | text-transform: uppercase; 15 | font-size: inherit; 16 | transition: all 1s ease; 17 | 18 | &.button--primary { 19 | 20 | &:hover, 21 | &:focus, 22 | &:active { 23 | border-color: darken($button-primary-bg, 25%); 24 | background-color: darken($button-primary-bg, 10%); 25 | color: $button-primary-color; 26 | } 27 | } 28 | 29 | &.button--secondary { 30 | 31 | &:hover, 32 | &:focus, 33 | &:active { 34 | border-color: darken($button-secondary-bg, 25%); 35 | background-color: darken($button-secondary-bg, 10%); 36 | color: $button-secondary-color; 37 | } 38 | } 39 | 40 | &.button--tertiary { 41 | 42 | &:hover, 43 | &:focus, 44 | &:active { 45 | border-color: darken($button-tertiary-bg, 25%); 46 | background-color: darken($button-tertiary-bg, 10%); 47 | color: $button-tertiary-color; 48 | } 49 | } 50 | 51 | // Button Sizes 52 | @each $key-sizes, $font-size in $button-sizes { 53 | &--#{$key-sizes} { 54 | padding: map-get($button-padding, $key-sizes); 55 | font-size: $font-size; 56 | } 57 | } 58 | 59 | &--block { 60 | width: 100%; 61 | text-align: center; 62 | } 63 | } 64 | 65 | .button--filled { 66 | 67 | &:hover, 68 | &:focus, 69 | &:active { 70 | border-color: darken($button-filled-bg, 25%); 71 | background-color: darken($button-filled-bg, 10%); 72 | color: $button-filled-color; 73 | } 74 | 75 | &.button--primary { 76 | border-color: $button-primary-bg; 77 | background-color: $button-primary-bg; 78 | color: $button-primary-color; 79 | } 80 | 81 | // Button Colors 82 | &.button--secondary { 83 | border-color: $button-secondary-bg; 84 | background-color: $button-secondary-bg; 85 | color: $button-secondary-color; 86 | } 87 | 88 | &.button--tertiary { 89 | border-color: $button-tertiary-bg; 90 | background-color: $button-tertiary-bg; 91 | color: $button-tertiary-color; 92 | } 93 | } 94 | 95 | .button--outlined { 96 | background-color: transparent; 97 | color: $button-outlined-color; 98 | 99 | &:hover, 100 | &:focus, 101 | &:active { 102 | border-color: darken($button-outlined-color, 25%); 103 | background-color: darken($button-outlined-color, 10%); 104 | color: $button-filled-color; 105 | } 106 | 107 | &.button--primary { 108 | border-color: $button-primary-bg; 109 | color: $button-primary-bg; 110 | } 111 | 112 | &.button--secondary { 113 | border-color: $button-secondary-bg; 114 | color: $button-secondary-bg; 115 | } 116 | 117 | &.button--tertiary { 118 | border-color: $button-tertiary-bg; 119 | color: $button-tertiary-bg; 120 | } 121 | } 122 | 123 | .button--clear { 124 | border-color: transparent; 125 | background-color: transparent; 126 | color: $button-clear-color; 127 | 128 | &:hover, 129 | &:focus, 130 | &:active { 131 | border-bottom: 2px solid $button-clear-color; 132 | color: $button-clear-color; 133 | } 134 | } -------------------------------------------------------------------------------- /examples/marketing/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Tent CSS Examples 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 |
19 |

Ridge Co.

20 |
21 |
22 | 29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |

A catchy headline

39 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam reprehenderit aliquam quibusdam voluptas dicta!
40 | Learn More 41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 | 52 |
53 |
54 |

What we do best.

55 |

56 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam consequatur ad exercitationem nemo, obcaecati ipsa minus in facilis non nihil officiis, tempore, nam aperiam necessitatibus quasi fuga autem. Officia eos inventore maxime et nemo qui minima, harum est saepe corporis! 57 |

58 |
59 |
60 | 61 |
62 | 63 |
64 |
65 | 66 |
67 |
68 |

Good.

69 |

70 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, animi nam. Quod. Lorem ipsum dolor sit amet. 71 |

72 |
73 |
74 | 75 |
76 | 77 |
78 | 79 |
80 |
81 |

Great.

82 |

83 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, animi nam. Quod. Lorem ipsum dolor sit amet. 84 |

85 |
86 |
87 | 88 |
89 | 90 |
91 | 92 |
93 |
94 |

Greatest.

95 |

96 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, animi nam. Quod. Lorem ipsum dolor sit amet. 97 |

98 |
99 |
100 | 101 |
102 |
103 |
104 |
105 |
106 | 115 | 116 | -------------------------------------------------------------------------------- /src/01_settings/_variables.defaults.scss: -------------------------------------------------------------------------------- 1 | // ========================================================================== 2 | // Tool Dependencies for Variables 3 | // ========================================================================== 4 | 5 | @import "../02_tools/scaling"; 6 | 7 | // ========================================================================== 8 | // Colors 9 | // ========================================================================== 10 | 11 | $color-primary: #0074D9 !default; 12 | $color-secondary: #3D9970 !default; 13 | $color-tertiary: #FF4136 !default; 14 | 15 | $color-lightest: #FFFFFF !default; 16 | $color-lighter: #F2F2F2 !default; 17 | $color-light: #E0E0E0 !default; 18 | $color-medium: #A4A4A4 !default; 19 | $color-dark: #6E6E6E !default; 20 | $color-darker: #444444 !default; 21 | $color-darkest: #111111 !default; 22 | 23 | // Base Colors 24 | $base-color: $color-darker !default; 25 | $base-color-inverse: $color-lighter !default; 26 | $base-color-bg: $color-lightest !default; 27 | 28 | // Link Colors 29 | $link-color: $color-primary !default; 30 | $link-hover-color: darken($link-color, 15%) !default; 31 | 32 | // ========================================================================== 33 | // Base 34 | // ========================================================================== 35 | 36 | $base-font-weight: 400 !default; 37 | $base-line-height: 1.6 !default; 38 | 39 | $border-radius: 6px !default; 40 | 41 | // ========================================================================== 42 | // Scaling 43 | // ========================================================================== 44 | 45 | $scale-ratio: 1.250 !default; // Major Third Ratio 46 | $scale-unit: 16 !default; 47 | 48 | // ========================================================================== 49 | // Space Sizes 50 | // ========================================================================== 51 | 52 | // Sets a baseline to be used by all the other space variables. 53 | 54 | $space-base: 8px !default; 55 | 56 | // The Spaces map is great for maintaining consistency in your development. 57 | // Useful for padding and margins. 58 | // 59 | // e.g. property: map-get($spaces, sm); 60 | 61 | $spaces: ( 62 | xxxs: rem($space-base), 63 | xxs: rem($space-base * 2), 64 | xs: rem($space-base * 3), 65 | sm: rem($space-base * 4), 66 | md: rem($space-base * 5), 67 | lg: rem($space-base * 6), 68 | xl: rem($space-base * 7), 69 | xxl: rem($space-base * 8), 70 | xxxl: rem($space-base * 9) 71 | ) !default; 72 | 73 | // ========================================================================== 74 | // Typography 75 | // ========================================================================== 76 | 77 | $font-family-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu,"Open Sans","Helvetica Neue",sans-serif !default; 78 | $font-family-secondary: "Helvetica Neue", Helvetica, Arial, sans-serif !default; 79 | $font-family-monospace: "Lucida Console",Courier,monospace !default; 80 | 81 | $pararaph-margin: 0 0 map-get($spaces, xs) !default; 82 | $heading-margin: 0 0 map-get($spaces, sm) !default; 83 | 84 | // Font Sizes 85 | $size-xxxs: 10px !default; 86 | $size-xxs: 12px !default; 87 | $size-xs: 14px !default; 88 | $size-sm: 16px !default; 89 | $size-md: 18px !default; 90 | $size-lg: 20px !default; 91 | $size-xl: 32px !default; 92 | $size-xxl: 40px !default; 93 | $size-xxxl: 48px !default; 94 | 95 | $size-base: $size-sm !default; 96 | 97 | // ========================================================================== 98 | // Blockquote 99 | // ========================================================================== 100 | 101 | $blockquote-border: 4px solid $color-dark !default; 102 | $blockquote-padding: 0 0 0 map-get($spaces, xxxs) !default; 103 | $blockquote-margin: 0 0 map-get($spaces, xxs) !default; 104 | 105 | $cite-style: italic !default; 106 | 107 | // ========================================================================== 108 | // Code 109 | // ========================================================================== 110 | 111 | $code-color: $color-primary !default; 112 | $code-padding: rem(2px) rem(4px) !default; 113 | $code-bg: $color-lighter !default; 114 | 115 | 116 | // ========================================================================== 117 | // Zones 118 | // ========================================================================== 119 | 120 | $zone-header: "masthead" !default; 121 | $zone-content: "mastcontent" !default; 122 | $zone-footer: "mastfoot" !default; 123 | 124 | 125 | // ========================================================================== 126 | // Containers 127 | // ========================================================================== 128 | 129 | $container-max-widths: ( 130 | sm: rem(540px), 131 | md: rem(720px), 132 | lg: rem(960px), 133 | xl: rem(1140px) 134 | ) !default; 135 | 136 | // ========================================================================== 137 | // Media Query Breakpoints 138 | // ========================================================================== 139 | 140 | // The breakpoint-min() & breakpoint-max() mixins we be rendered in EM units. 141 | // We'll perform the pixel to EM conversion within the mixins. 142 | // Please list breakpoints in pixel values. 143 | 144 | $breakpoints: ( 145 | xs: 0, 146 | sm: 576px, 147 | md: 768px, 148 | lg: 992px, 149 | xl: 1200px, 150 | xxl: 1400px, 151 | xxxl: 1600px 152 | ) !default; 153 | 154 | // ========================================================================== 155 | // Grids 156 | // ========================================================================== 157 | 158 | // Determines which breakpoints will have their own column classses. 159 | // 160 | // e.g. .grid__column--{GRID #}--{BREAKPOINT} 161 | // 162 | // Note: The keys set in the $grid-breakpoints variable must match those found in $breakpoints. 163 | // Otherwise the source will not compile. 164 | $grid-breakpoints: ( 165 | sm, 166 | md, 167 | lg, 168 | xl 169 | ) !default; 170 | 171 | $grid-columns: 12 !default; 172 | 173 | // Gutter is applied to padding-left and padding-right. The value is not split. 174 | $grid-gutter: map-get($spaces, xxs) !default; 175 | 176 | // ========================================================================== 177 | // Dividers 178 | // ========================================================================== 179 | 180 | $divider-margin: map-get($spaces, xs) 0 !default; 181 | $divider-height: 1px !default; 182 | $divider-color: #dbdbdb !default; 183 | 184 | // ========================================================================== 185 | // Lists 186 | // ========================================================================== 187 | 188 | $list-padding: 0 !default; 189 | $list-margin: 0 0 map-get($spaces, xs) !default; 190 | 191 | $unordered-list-style: circle inside !default; 192 | $ordered-list-style: decimal inside !default; 193 | 194 | $list-inline-space: map-get($spaces, xs) !default; 195 | 196 | 197 | // ========================================================================== 198 | // Tables 199 | // ========================================================================== 200 | 201 | $table-cell-padding: map-get($spaces, xxxs) !default; 202 | $table-stripped-odd-bg: $color-lighter !default; 203 | $table-stripped-even-bg: $color-lightest !default; 204 | 205 | 206 | // ========================================================================== 207 | // Headings 208 | // ========================================================================== 209 | 210 | $heading-color: $base-color !default; 211 | $heading-color-inverse: $color-lighter !default; 212 | $heading-line-height: 1.25 !default; 213 | 214 | $lead-font-size: $size-md !default; 215 | $lead-font-weight: 300 !default; 216 | $lead-line-height: 1.6 !default; 217 | 218 | 219 | // ========================================================================== 220 | // Forms 221 | // ========================================================================== 222 | 223 | $form-label-weight: 600 !default; 224 | $form-margin: 0 0 map-get($spaces, xxxs); 225 | 226 | $form-input-margin: 0 0 map-get($spaces, xs) !default; 227 | $form-input-padding: map-get($spaces, xxxs) map-get($spaces, xxs) !default; 228 | $form-input-border: 1px solid $color-light !default; 229 | $form-input-radius: 0 !default; 230 | $form-input-size: map-get($spaces, xxs) !default; 231 | $form-input-color: $color-medium !default; 232 | $form-input-bg: $color-lightest !default; 233 | $form-input-focus: $color-primary !default; 234 | 235 | // Textarea Height Sizes 236 | $control-textarea-sm: 80px !default; 237 | $control-textarea-md: 140px !default; 238 | $control-textarea-lg: 200px !default; 239 | 240 | // ========================================================================== 241 | // Buttons 242 | // ========================================================================== 243 | 244 | $button-filled-color: $base-color-bg !default; 245 | $button-filled-bg: $color-dark !default; 246 | $button-outlined-color: $color-dark !default; 247 | $button-clear-color: $color-dark !default; 248 | 249 | $button-primary-color: $color-lightest !default; 250 | $button-primary-bg: $color-primary !default; 251 | $button-secondary-color: $color-lightest !default; 252 | $button-secondary-bg: $color-secondary !default; 253 | $button-tertiary-color: $color-lightest !default; 254 | $button-tertiary-bg: $color-tertiary !default; 255 | 256 | $button-border-radius: 0 !default; 257 | $button-outlined-border-width: 2px !default; 258 | 259 | // Used for creating button sizes with appropriate font-sizes. 260 | $button-sizes: ( 261 | xxxs: rem($size-xxxs), 262 | xxs: rem($size-xxxs), 263 | xs: rem($size-xxs), 264 | sm: rem($size-xs), 265 | md: rem($size-xs), 266 | lg: rem($size-md), 267 | xl: rem($size-lg), 268 | xxl: rem($size-lg), 269 | xxxl: rem($size-lg) 270 | ) !default; 271 | 272 | // Sets the padding of the corresponding keys in $button-sizes. 273 | $button-padding: ( 274 | xxxs: map-get($spaces, xxxs) map-get($spaces, xxs), 275 | xxs: map-get($spaces, xxxs) map-get($spaces, sm), 276 | xs: map-get($spaces, xxxs) map-get($spaces, xs), 277 | sm: map-get($spaces, xxxs) map-get($spaces, md), 278 | md: map-get($spaces, xxxs) map-get($spaces, md), 279 | lg: map-get($spaces, xxs) map-get($spaces, lg), 280 | xl: map-get($spaces, xxs) map-get($spaces, xl), 281 | xxl: map-get($spaces, xxs) map-get($spaces, xxl), 282 | xxxl: map-get($spaces, xxs) map-get($spaces, xxxl) 283 | ) !default; 284 | 285 | 286 | // ========================================================================== 287 | // Cards 288 | // ========================================================================== 289 | 290 | $card-margin: map-get($spaces, xxs) !default; 291 | $card-border: 1px solid $color-light !default; 292 | $card-radius: 0 !default; 293 | $card-bg: $color-lightest !default; 294 | $card-color: $base-color !default; 295 | $card-raised-shadow: 0 0.2rem 0.4rem 0 rgba(0,0,0,.04), 0 0.2rem 1rem 0 rgba(0,0,0,.10) !default; 296 | 297 | $card-content-padding: map-get($spaces, xxs) !default; 298 | $card-outlined-border: 2px solid transparent !default; 299 | 300 | 301 | // ========================================================================== 302 | // Standalone Typography Modifiers 303 | // ========================================================================== 304 | 305 | $type-bold: 700 !default; 306 | $type-black: 900 !default; 307 | $type-italic: italic !default; 308 | $type-small: 0.7em !default; 309 | $type-caps: small-caps !default; -------------------------------------------------------------------------------- /dist/themes/crystal.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Tent CSS 3 | * http://css.sitetent.com 4 | * 5 | * Copyright (c) 2017, Aaron Mazade 6 | * Licensed under the MIT license 7 | */html{box-sizing:border-box;line-height:1;font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:inherit}body{margin:0;font-family:sans-serif}iframe{border:0}main{display:block}sup{position:relative;top:-.5em;vertical-align:baseline;font-size:75%;line-height:0}strong{font-weight:bold}figure{margin:0}::-moz-focus-inner{border:0;padding:0}body{background-color:#fff;color:#444;font-weight:400;font-size:1em;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Open Sans","Helvetica Neue",sans-serif;line-height:1.6}hr{display:block;margin:1.5rem 0;height:1px;border:none;background-color:#dbdbdb}img{max-width:100%;height:auto;border:0;vertical-align:middle}a{color:#B10DC9;text-decoration:none}a:hover,a:focus,a:active{color:#720881}button{border:0;margin:0;padding:0;text-align:inherit;text-transform:inherit;font:inherit;letter-spacing:inherit;background:none;cursor:pointer;overflow:visible}blockquote{margin:0 0 1rem;padding:0 0 0 .5rem;border-left:4px solid #6E6E6E}cite{font-style:italic}code{font-family:"Lucida Console",Courier,monospace;font-size:inherit;color:#B10DC9;background-color:#F2F2F2;padding:.125rem .25rem}p{margin:0 0 1.5rem}p:last-child{margin-bottom:0}h1,h2,h3,h4,h5,h6{display:block;margin:0 0 2rem;color:#444;font-weight:inherit;font-size:inherit;line-height:1.25}h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child{margin-bottom:0}h1{font-size:3rem}h2{font-size:2.5rem}h3{font-size:2rem}h4{font-size:1.25rem}h5{font-size:1.125rem}h6{font-size:1rem}textarea{overflow:auto}input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea,select{display:block;margin:0 0 1.5rem;padding:.5rem 1rem;width:auto;border:1px solid #E0E0E0;border-radius:0;background-color:#fff;color:#A4A4A4;font-size:1rem;font-family:inherit;appearance:none}input[type="email"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="text"]:focus,input[type="tel"]:focus,input[type="url"]:focus,input[type="password"]:focus,textarea:focus,select:focus{border-color:#B10DC9}ul,ol{margin:0 0 1.5rem;padding:0}ul{list-style:circle inside}ol{list-style:decimal inside}li{display:list-item;margin-bottom:.5rem}dl{margin-top:0;margin-bottom:0}dd{margin-left:0}table{border-spacing:0}table td{padding:.5rem}.container{position:relative;margin:0 auto;padding:0;width:100%}@media (min-width: 576px){.container{max-width:33.75rem}}@media (min-width: 768px){.container{max-width:45rem}}@media (min-width: 992px){.container{max-width:71.25rem}}.container--fluid{max-width:100%}.flex,.grid,.control--inline{display:flex;flex-direction:row}.flex--stack,.grid--stack{flex-direction:column}.flex--top,.grid--top{align-items:flex-start}.flex--bottom,.grid--bottom{align-items:flex-end}.flex--center,.grid--center{align-items:center}.flex--stretch,.grid--stretch{align-items:stretch}.flex--baseline,.grid--baseline{align-items:baseline}.flex--justify-center,.grid--justify-center{justify-content:center}.flex--justify-start,.grid--justify-start{justify-content:flex-start}.flex--justify-end,.grid--justify-end{justify-content:flex-end}.flex__item,.grid__column{display:block;flex:1}.flex__item--top,.grid__column--top{align-self:flex-start}.flex__item--bottom,.grid__column--bottom{align-self:flex-end}.flex__item--center,.grid__column--center{align-self:center}.flex-first{order:-1}.flex-last{order:1}@media (min-width: 576px){.flex-first--sm{order:-1}.flex-last--sm{order:1}}@media (min-width: 768px){.flex-first--md{order:-1}.flex-last--md{order:1}}@media (min-width: 992px){.flex-first--lg{order:-1}.flex-last--lg{order:1}}@media (min-width: 1200px){.flex-first--xl{order:-1}.flex-last--xl{order:1}}.grid{padding:0;width:100%;flex-wrap:wrap;flex-direction:row}.grid--gutterless>.grid__column{padding:0}.grid__column{margin-left:0;max-width:100%;width:100%;padding-left:1rem;padding-right:1rem}.grid__column--1{flex:0 0 8.33333%;max-width:8.33333%}.grid__column--2{flex:0 0 16.66667%;max-width:16.66667%}.grid__column--3{flex:0 0 25%;max-width:25%}.grid__column--4{flex:0 0 33.33333%;max-width:33.33333%}.grid__column--5{flex:0 0 41.66667%;max-width:41.66667%}.grid__column--6{flex:0 0 50%;max-width:50%}.grid__column--7{flex:0 0 58.33333%;max-width:58.33333%}.grid__column--8{flex:0 0 66.66667%;max-width:66.66667%}.grid__column--9{flex:0 0 75%;max-width:75%}.grid__column--10{flex:0 0 83.33333%;max-width:83.33333%}.grid__column--11{flex:0 0 91.66667%;max-width:91.66667%}.grid__column--12{flex:0 0 100%;max-width:100%}@media (min-width: 576px){.grid__column--1--sm{flex:0 0 8.33333%;max-width:8.33333%}.grid__column--2--sm{flex:0 0 16.66667%;max-width:16.66667%}.grid__column--3--sm{flex:0 0 25%;max-width:25%}.grid__column--4--sm{flex:0 0 33.33333%;max-width:33.33333%}.grid__column--5--sm{flex:0 0 41.66667%;max-width:41.66667%}.grid__column--6--sm{flex:0 0 50%;max-width:50%}.grid__column--7--sm{flex:0 0 58.33333%;max-width:58.33333%}.grid__column--8--sm{flex:0 0 66.66667%;max-width:66.66667%}.grid__column--9--sm{flex:0 0 75%;max-width:75%}.grid__column--10--sm{flex:0 0 83.33333%;max-width:83.33333%}.grid__column--11--sm{flex:0 0 91.66667%;max-width:91.66667%}.grid__column--12--sm{flex:0 0 100%;max-width:100%}}@media (min-width: 768px){.grid__column--1--md{flex:0 0 8.33333%;max-width:8.33333%}.grid__column--2--md{flex:0 0 16.66667%;max-width:16.66667%}.grid__column--3--md{flex:0 0 25%;max-width:25%}.grid__column--4--md{flex:0 0 33.33333%;max-width:33.33333%}.grid__column--5--md{flex:0 0 41.66667%;max-width:41.66667%}.grid__column--6--md{flex:0 0 50%;max-width:50%}.grid__column--7--md{flex:0 0 58.33333%;max-width:58.33333%}.grid__column--8--md{flex:0 0 66.66667%;max-width:66.66667%}.grid__column--9--md{flex:0 0 75%;max-width:75%}.grid__column--10--md{flex:0 0 83.33333%;max-width:83.33333%}.grid__column--11--md{flex:0 0 91.66667%;max-width:91.66667%}.grid__column--12--md{flex:0 0 100%;max-width:100%}}@media (min-width: 992px){.grid__column--1--lg{flex:0 0 8.33333%;max-width:8.33333%}.grid__column--2--lg{flex:0 0 16.66667%;max-width:16.66667%}.grid__column--3--lg{flex:0 0 25%;max-width:25%}.grid__column--4--lg{flex:0 0 33.33333%;max-width:33.33333%}.grid__column--5--lg{flex:0 0 41.66667%;max-width:41.66667%}.grid__column--6--lg{flex:0 0 50%;max-width:50%}.grid__column--7--lg{flex:0 0 58.33333%;max-width:58.33333%}.grid__column--8--lg{flex:0 0 66.66667%;max-width:66.66667%}.grid__column--9--lg{flex:0 0 75%;max-width:75%}.grid__column--10--lg{flex:0 0 83.33333%;max-width:83.33333%}.grid__column--11--lg{flex:0 0 91.66667%;max-width:91.66667%}.grid__column--12--lg{flex:0 0 100%;max-width:100%}}@media (min-width: 1200px){.grid__column--1--xl{flex:0 0 8.33333%;max-width:8.33333%}.grid__column--2--xl{flex:0 0 16.66667%;max-width:16.66667%}.grid__column--3--xl{flex:0 0 25%;max-width:25%}.grid__column--4--xl{flex:0 0 33.33333%;max-width:33.33333%}.grid__column--5--xl{flex:0 0 41.66667%;max-width:41.66667%}.grid__column--6--xl{flex:0 0 50%;max-width:50%}.grid__column--7--xl{flex:0 0 58.33333%;max-width:58.33333%}.grid__column--8--xl{flex:0 0 66.66667%;max-width:66.66667%}.grid__column--9--xl{flex:0 0 75%;max-width:75%}.grid__column--10--xl{flex:0 0 83.33333%;max-width:83.33333%}.grid__column--11--xl{flex:0 0 91.66667%;max-width:91.66667%}.grid__column--12--xl{flex:0 0 100%;max-width:100%}}@media (min-width: 576px){.grid{width:100%}.grid__column{padding:0 1rem}}.list--unstyled,.list--inline{list-style-type:none;padding:0}.list--inline .list__item{display:inline-block}.list--inline .list__item:not(:last-child){padding-right:25px}.list--nulled,.list--nulled .list__item{margin:0}.table--stripped .table__body .table__row:not(:nth-child(even)) .table__cell{background-color:#F2F2F2}.title--xxxs,.subtitle--xxxs{font-size:.625rem}.title--xxs,.subtitle--xxs{font-size:.75rem}.title--xs,.subtitle--xs{font-size:.875rem}.title--sm,.subtitle--sm{font-size:1rem}.title--md,.subtitle--md{font-size:1.125rem}.title--lg,.subtitle--lg{font-size:1.25rem}.title--xl,.subtitle--xl{font-size:2rem}.title--xxl,.subtitle--xxl{font-size:2.5rem}.title--xxxl,.subtitle--xxxl{font-size:3rem}.title{font-weight:700}.subtitle{font-weight:100}.title,.subtitle{word-break:break-word}.title:not(:last-child),.subtitle:not(:last-child){margin-bottom:1rem}.title-set .title{margin:0}.title-set .title+.subtitle{margin-top:0}.lead{font-weight:300;font-size:18px;line-height:1.6}.button{display:inline-block;margin-bottom:.5rem;padding:.5rem 2.5rem;border:2px solid #6E6E6E;border-radius:0;background-color:#6E6E6E;color:#fff;text-decoration:none;text-transform:uppercase;font-size:inherit;transition:all 1s ease}.button.button--primary:hover,.button.button--primary:focus,.button.button--primary:active{border-color:#480551;background-color:#870a99;color:#fff}.button.button--secondary:hover,.button.button--secondary:focus,.button.button--secondary:active{border-color:#1b6a6a;background-color:#2ba7a7;color:#fff}.button.button--tertiary:hover,.button.button--tertiary:focus,.button.button--tertiary:active{border-color:#9b4800;background-color:#e76b00;color:#fff}.button--xxxs{padding:.5rem 1rem;font-size:.625rem}.button--xxs{padding:.5rem 2rem;font-size:.625rem}.button--xs{padding:.5rem 1.5rem;font-size:.75rem}.button--sm{padding:.5rem 2.5rem;font-size:.875rem}.button--md{padding:.5rem 2.5rem;font-size:.875rem}.button--lg{padding:1rem 3rem;font-size:1.125rem}.button--xl{padding:1rem 3.5rem;font-size:1.25rem}.button--xxl{padding:1rem 4rem;font-size:1.25rem}.button--xxxl{padding:1rem 4.5rem;font-size:1.25rem}.button--block{width:100%;text-align:center}.button--filled:hover,.button--filled:focus,.button--filled:active{border-color:#2e2e2e;background-color:#555;color:#fff}.button--filled.button--primary{border-color:#B10DC9;background-color:#B10DC9;color:#fff}.button--filled.button--secondary{border-color:#39CCCC;background-color:#39CCCC;color:#fff}.button--filled.button--tertiary{border-color:#FF851B;background-color:#FF851B;color:#fff}.button--outlined{background-color:transparent;color:#6E6E6E}.button--outlined:hover,.button--outlined:focus,.button--outlined:active{border-color:#2e2e2e;background-color:#555;color:#fff}.button--outlined.button--primary{border-color:#B10DC9;color:#B10DC9}.button--outlined.button--secondary{border-color:#39CCCC;color:#39CCCC}.button--outlined.button--tertiary{border-color:#FF851B;color:#FF851B}.button--clear{border-color:transparent;background-color:transparent;color:#6E6E6E}.button--clear:hover,.button--clear:focus,.button--clear:active{border-bottom:2px solid #6E6E6E;color:#6E6E6E}.card{display:flex;flex-direction:column;overflow:hidden;margin-bottom:1rem;border:1px solid #E0E0E0;border-radius:0;background:#fff;color:#444}.card>:last-child{margin-bottom:0}.card__image{margin:0 auto;max-width:100%}.card__content{padding:1rem;flex:1 0 auto}.card__content>:last-child{margin-bottom:0}.card--filled{background-color:#444}.card--filled.card--primary{background-color:#B10DC9}.card--filled.card--secondary{background-color:#39CCCC}.card--filled.card--tertiary{background-color:#FF851B}.card--outlined{border:2px solid transparent}.card--outlined.card--primary{border-color:#B10DC9}.card--outlined.card--secondary{border-color:#39CCCC}.card--outlined.card--tertiary{border-color:#FF851B}.card--raised{box-shadow:0 0.2rem 0.4rem 0 rgba(0,0,0,0.04),0 0.2rem 1rem 0 rgba(0,0,0,0.1)}.card--clear,.card--feature{border:0}.card--clear{background:transparent}.control__label{display:block;margin:0 0 0 0 .5rem;font-weight:600}.control--radio .control__label,.control--checkbox .control__label{font-weight:400}.control--inline{flex-direction:column}.control--inline .control__label:not(:first-child){margin-left:0}@media (min-width: 576px){.control--inline{flex-direction:row}.control--inline .control__label:not(:first-child){margin-left:.5rem}}.control--block,.control--block .control__input,.control--block .control__textarea,.control--block .control__select{width:100%}.control--select{display:inline-block;vertical-align:top;position:relative;margin:0 0 1.5rem}.control--select:after{content:"";border:1px solid #B10DC9;border-right:0;border-top:0;display:block;position:absolute;height:.5rem;pointer-events:none;transform:rotate(-45deg);width:.5rem;margin-top:-0.375em;right:1.125em;top:50%;z-index:4}.control__select{padding-right:2.5rem;margin:0}.control__textarea--sm{min-height:5rem}.control__textarea--md{min-height:8.75rem}.control__textarea--lg{min-height:12.5rem}.color-primary{color:#B10DC9}.color-secondary{color:#39CCCC}.color-tertiary{color:#FF851B}.color-light{color:#E0E0E0}.color-lighter{color:#F2F2F2}.color-lightest{color:#fff}.color-medium{color:#A4A4A4}.color-dark{color:#6E6E6E}.color-darker{color:#444}.color-darkest{color:#111}.bg-color-primary{background-color:#B10DC9}.bg-color-secondary{background-color:#39CCCC}.bg-color-tertiary{background-color:#FF851B}.bg-color-light{background-color:#E0E0E0}.bg-color-lighter{background-color:#F2F2F2}.bg-color-lightest{background-color:#fff}.bg-color-medium{background-color:#A4A4A4}.bg-color-dark{background-color:#6E6E6E}.bg-color-darker{background-color:#444}.bg-color-darkest{background-color:#111}.inverse{color:#F2F2F2}.inverse h1,.inverse h2,.inverse h3,.inverse h4,.inverse h5,.inverse h6{color:#F2F2F2}.display-block{display:block}.display-flex{display:flex}.display-inline-block{display:inline-block}.display-inline{display:inline}.display-none{display:none}.display-table{display:table}.padding-xxxs{padding:.5rem}.padding-xxs{padding:1rem}.padding-xs{padding:1.5rem}.padding-sm{padding:2rem}.padding-md{padding:2.5rem}.padding-lg{padding:3rem}.padding-xl{padding:3.5rem}.padding-xxl{padding:4rem}.padding-xxxl{padding:4.5rem}.padding-y{padding-left:0;padding-right:0}.padding-x{padding-top:0;padding-bottom:0}.padding-nulled{padding:0}.margin-xxxs{margin:.5rem}.margin-xxs{margin:1rem}.margin-xs{margin:1.5rem}.margin-sm{margin:2rem}.margin-md{margin:2.5rem}.margin-lg{margin:3rem}.margin-xl{margin:3.5rem}.margin-xxl{margin:4rem}.margin-xxxl{margin:4.5rem}.margin-y{margin-left:0;margin-right:0}.margin-x{margin-top:0;margin-bottom:0}.margin-nulled{margin:0}.height-full{height:100%}.type-italic{font-style:italic}.type-bold{font-weight:700}.type-black{font-weight:900}.type-small{font-size:.7em}.type-caps{font-variant:small-caps}.type-uppercase{text-transform:uppercase}.type-justify{text-align:justify}.type-left{text-align:left}.type-right{text-align:right}.type-center{text-align:center} 8 | -------------------------------------------------------------------------------- /dist/tent.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Tent CSS 3 | * http://css.sitetent.com 4 | * 5 | * Copyright (c) 2017, Aaron Mazade 6 | * Licensed under the MIT license 7 | */html{box-sizing:border-box;line-height:1;font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:inherit}body{margin:0;font-family:sans-serif}iframe{border:0}main{display:block}sup{position:relative;top:-.5em;vertical-align:baseline;font-size:75%;line-height:0}strong{font-weight:bold}figure{margin:0}::-moz-focus-inner{border:0;padding:0}body{background-color:#fff;color:#444;font-weight:400;font-size:1em;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Open Sans","Helvetica Neue",sans-serif;line-height:1.6}hr{display:block;margin:1.5rem 0;height:1px;border:none;background-color:#dbdbdb}img{max-width:100%;height:auto;border:0;vertical-align:middle}a{color:#0074D9;text-decoration:none}a:hover,a:focus,a:active{color:#004b8d}button{border:0;margin:0;padding:0;text-align:inherit;text-transform:inherit;font:inherit;letter-spacing:inherit;background:none;cursor:pointer;overflow:visible}blockquote{margin:0 0 1rem;padding:0 0 0 .5rem;border-left:4px solid #6E6E6E}cite{font-style:italic}code{font-family:"Lucida Console",Courier,monospace;font-size:inherit;color:#0074D9;background-color:#F2F2F2;padding:.125rem .25rem}p{margin:0 0 1.5rem}p:last-child{margin-bottom:0}h1,h2,h3,h4,h5,h6{display:block;margin:0 0 2rem;color:#444;font-weight:inherit;font-size:inherit;line-height:1.25}h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child{margin-bottom:0}h1{font-size:3rem}h2{font-size:2.5rem}h3{font-size:2rem}h4{font-size:1.25rem}h5{font-size:1.125rem}h6{font-size:1rem}textarea{overflow:auto}input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea,select{display:block;margin:0 0 1.5rem;padding:.5rem 1rem;width:auto;border:1px solid #E0E0E0;border-radius:0;background-color:#fff;color:#A4A4A4;font-size:1rem;font-family:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}input[type="email"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="text"]:focus,input[type="tel"]:focus,input[type="url"]:focus,input[type="password"]:focus,textarea:focus,select:focus{border-color:#0074D9}ul,ol{margin:0 0 1.5rem;padding:0}ul{list-style:circle inside}ol{list-style:decimal inside}li{display:list-item;margin-bottom:.5rem}dl{margin-top:0;margin-bottom:0}dd{margin-left:0}table{border-spacing:0}table td{padding:.5rem}.container{position:relative;margin:0 auto;padding:0;width:100%}@media (min-width: 576px){.container{max-width:33.75rem}}@media (min-width: 768px){.container{max-width:45rem}}@media (min-width: 992px){.container{max-width:71.25rem}}.container--fluid{max-width:100%}.flex,.grid,.control--inline{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}.flex--stack,.grid--stack{-ms-flex-direction:column;flex-direction:column}.flex--top,.grid--top{-ms-flex-align:start;align-items:flex-start}.flex--bottom,.grid--bottom{-ms-flex-align:end;align-items:flex-end}.flex--center,.grid--center{-ms-flex-align:center;align-items:center}.flex--stretch,.grid--stretch{-ms-flex-align:stretch;align-items:stretch}.flex--baseline,.grid--baseline{-ms-flex-align:baseline;align-items:baseline}.flex--justify-center,.grid--justify-center{-ms-flex-pack:center;justify-content:center}.flex--justify-start,.grid--justify-start{-ms-flex-pack:start;justify-content:flex-start}.flex--justify-end,.grid--justify-end{-ms-flex-pack:end;justify-content:flex-end}.flex__item,.grid__column{display:block;-ms-flex:1;flex:1}.flex__item--top,.grid__column--top{-ms-flex-item-align:start;align-self:flex-start}.flex__item--bottom,.grid__column--bottom{-ms-flex-item-align:end;align-self:flex-end}.flex__item--center,.grid__column--center{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}.flex-first{-ms-flex-order:-1;order:-1}.flex-last{-ms-flex-order:1;order:1}@media (min-width: 576px){.flex-first--sm{-ms-flex-order:-1;order:-1}.flex-last--sm{-ms-flex-order:1;order:1}}@media (min-width: 768px){.flex-first--md{-ms-flex-order:-1;order:-1}.flex-last--md{-ms-flex-order:1;order:1}}@media (min-width: 992px){.flex-first--lg{-ms-flex-order:-1;order:-1}.flex-last--lg{-ms-flex-order:1;order:1}}@media (min-width: 1200px){.flex-first--xl{-ms-flex-order:-1;order:-1}.flex-last--xl{-ms-flex-order:1;order:1}}.grid{padding:0;width:100%;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:row;flex-direction:row}.grid--gutterless>.grid__column{padding:0}.grid__column{margin-left:0;max-width:100%;width:100%;padding-left:1rem;padding-right:1rem}.grid__column--1{-ms-flex:0 0 8.33333%;flex:0 0 8.33333%;max-width:8.33333%}.grid__column--2{-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;max-width:16.66667%}.grid__column--3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.grid__column--4{-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;max-width:33.33333%}.grid__column--5{-ms-flex:0 0 41.66667%;flex:0 0 41.66667%;max-width:41.66667%}.grid__column--6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.grid__column--7{-ms-flex:0 0 58.33333%;flex:0 0 58.33333%;max-width:58.33333%}.grid__column--8{-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;max-width:66.66667%}.grid__column--9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.grid__column--10{-ms-flex:0 0 83.33333%;flex:0 0 83.33333%;max-width:83.33333%}.grid__column--11{-ms-flex:0 0 91.66667%;flex:0 0 91.66667%;max-width:91.66667%}.grid__column--12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}@media (min-width: 576px){.grid__column--1--sm{-ms-flex:0 0 8.33333%;flex:0 0 8.33333%;max-width:8.33333%}.grid__column--2--sm{-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;max-width:16.66667%}.grid__column--3--sm{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.grid__column--4--sm{-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;max-width:33.33333%}.grid__column--5--sm{-ms-flex:0 0 41.66667%;flex:0 0 41.66667%;max-width:41.66667%}.grid__column--6--sm{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.grid__column--7--sm{-ms-flex:0 0 58.33333%;flex:0 0 58.33333%;max-width:58.33333%}.grid__column--8--sm{-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;max-width:66.66667%}.grid__column--9--sm{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.grid__column--10--sm{-ms-flex:0 0 83.33333%;flex:0 0 83.33333%;max-width:83.33333%}.grid__column--11--sm{-ms-flex:0 0 91.66667%;flex:0 0 91.66667%;max-width:91.66667%}.grid__column--12--sm{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}@media (min-width: 768px){.grid__column--1--md{-ms-flex:0 0 8.33333%;flex:0 0 8.33333%;max-width:8.33333%}.grid__column--2--md{-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;max-width:16.66667%}.grid__column--3--md{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.grid__column--4--md{-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;max-width:33.33333%}.grid__column--5--md{-ms-flex:0 0 41.66667%;flex:0 0 41.66667%;max-width:41.66667%}.grid__column--6--md{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.grid__column--7--md{-ms-flex:0 0 58.33333%;flex:0 0 58.33333%;max-width:58.33333%}.grid__column--8--md{-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;max-width:66.66667%}.grid__column--9--md{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.grid__column--10--md{-ms-flex:0 0 83.33333%;flex:0 0 83.33333%;max-width:83.33333%}.grid__column--11--md{-ms-flex:0 0 91.66667%;flex:0 0 91.66667%;max-width:91.66667%}.grid__column--12--md{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}@media (min-width: 992px){.grid__column--1--lg{-ms-flex:0 0 8.33333%;flex:0 0 8.33333%;max-width:8.33333%}.grid__column--2--lg{-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;max-width:16.66667%}.grid__column--3--lg{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.grid__column--4--lg{-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;max-width:33.33333%}.grid__column--5--lg{-ms-flex:0 0 41.66667%;flex:0 0 41.66667%;max-width:41.66667%}.grid__column--6--lg{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.grid__column--7--lg{-ms-flex:0 0 58.33333%;flex:0 0 58.33333%;max-width:58.33333%}.grid__column--8--lg{-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;max-width:66.66667%}.grid__column--9--lg{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.grid__column--10--lg{-ms-flex:0 0 83.33333%;flex:0 0 83.33333%;max-width:83.33333%}.grid__column--11--lg{-ms-flex:0 0 91.66667%;flex:0 0 91.66667%;max-width:91.66667%}.grid__column--12--lg{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}@media (min-width: 1200px){.grid__column--1--xl{-ms-flex:0 0 8.33333%;flex:0 0 8.33333%;max-width:8.33333%}.grid__column--2--xl{-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;max-width:16.66667%}.grid__column--3--xl{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.grid__column--4--xl{-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;max-width:33.33333%}.grid__column--5--xl{-ms-flex:0 0 41.66667%;flex:0 0 41.66667%;max-width:41.66667%}.grid__column--6--xl{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.grid__column--7--xl{-ms-flex:0 0 58.33333%;flex:0 0 58.33333%;max-width:58.33333%}.grid__column--8--xl{-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;max-width:66.66667%}.grid__column--9--xl{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.grid__column--10--xl{-ms-flex:0 0 83.33333%;flex:0 0 83.33333%;max-width:83.33333%}.grid__column--11--xl{-ms-flex:0 0 91.66667%;flex:0 0 91.66667%;max-width:91.66667%}.grid__column--12--xl{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}@media (min-width: 576px){.grid{width:100%}.grid__column{padding:0 1rem}}.list--unstyled,.list--inline{list-style-type:none;padding:0}.list--inline .list__item{display:inline-block}.list--inline .list__item:not(:last-child){padding-right:25px}.list--nulled,.list--nulled .list__item{margin:0}.table--stripped .table__body .table__row:not(:nth-child(even)) .table__cell{background-color:#F2F2F2}.title--xxxs,.subtitle--xxxs{font-size:.625rem}.title--xxs,.subtitle--xxs{font-size:.75rem}.title--xs,.subtitle--xs{font-size:.875rem}.title--sm,.subtitle--sm{font-size:1rem}.title--md,.subtitle--md{font-size:1.125rem}.title--lg,.subtitle--lg{font-size:1.25rem}.title--xl,.subtitle--xl{font-size:2rem}.title--xxl,.subtitle--xxl{font-size:2.5rem}.title--xxxl,.subtitle--xxxl{font-size:3rem}.title{font-weight:700}.subtitle{font-weight:100}.title,.subtitle{word-break:break-word}.title:not(:last-child),.subtitle:not(:last-child){margin-bottom:1rem}.title-set .title{margin:0}.title-set .title+.subtitle{margin-top:0}.lead{font-weight:300;font-size:18px;line-height:1.6}.button{display:inline-block;margin-bottom:.5rem;padding:.5rem 2.5rem;border:2px solid #6E6E6E;border-radius:0;background-color:#6E6E6E;color:#fff;text-decoration:none;text-transform:uppercase;font-size:inherit;transition:all 1s ease}.button.button--primary:hover,.button.button--primary:focus,.button.button--primary:active{border-color:#00305a;background-color:#0059a6;color:#fff}.button.button--secondary:hover,.button.button--secondary:focus,.button.button--secondary:active{border-color:#193e2d;background-color:#2e7555;color:#fff}.button.button--tertiary:hover,.button.button--tertiary:focus,.button.button--tertiary:active{border-color:#b60a00;background-color:#ff1103;color:#fff}.button--xxxs{padding:.5rem 1rem;font-size:.625rem}.button--xxs{padding:.5rem 2rem;font-size:.625rem}.button--xs{padding:.5rem 1.5rem;font-size:.75rem}.button--sm{padding:.5rem 2.5rem;font-size:.875rem}.button--md{padding:.5rem 2.5rem;font-size:.875rem}.button--lg{padding:1rem 3rem;font-size:1.125rem}.button--xl{padding:1rem 3.5rem;font-size:1.25rem}.button--xxl{padding:1rem 4rem;font-size:1.25rem}.button--xxxl{padding:1rem 4.5rem;font-size:1.25rem}.button--block{width:100%;text-align:center}.button--filled:hover,.button--filled:focus,.button--filled:active{border-color:#2e2e2e;background-color:#555;color:#fff}.button--filled.button--primary{border-color:#0074D9;background-color:#0074D9;color:#fff}.button--filled.button--secondary{border-color:#3D9970;background-color:#3D9970;color:#fff}.button--filled.button--tertiary{border-color:#FF4136;background-color:#FF4136;color:#fff}.button--outlined{background-color:transparent;color:#6E6E6E}.button--outlined:hover,.button--outlined:focus,.button--outlined:active{border-color:#2e2e2e;background-color:#555;color:#fff}.button--outlined.button--primary{border-color:#0074D9;color:#0074D9}.button--outlined.button--secondary{border-color:#3D9970;color:#3D9970}.button--outlined.button--tertiary{border-color:#FF4136;color:#FF4136}.button--clear{border-color:transparent;background-color:transparent;color:#6E6E6E}.button--clear:hover,.button--clear:focus,.button--clear:active{border-bottom:2px solid #6E6E6E;color:#6E6E6E}.card{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;margin-bottom:1rem;border:1px solid #E0E0E0;border-radius:0;background:#fff;color:#444}.card>:last-child{margin-bottom:0}.card__image{margin:0 auto;max-width:100%}.card__content{padding:1rem;-ms-flex:1 0 auto;flex:1 0 auto}.card__content>:last-child{margin-bottom:0}.card--filled{background-color:#444}.card--filled.card--primary{background-color:#0074D9}.card--filled.card--secondary{background-color:#3D9970}.card--filled.card--tertiary{background-color:#FF4136}.card--outlined{border:2px solid transparent}.card--outlined.card--primary{border-color:#0074D9}.card--outlined.card--secondary{border-color:#3D9970}.card--outlined.card--tertiary{border-color:#FF4136}.card--raised{box-shadow:0 0.2rem 0.4rem 0 rgba(0,0,0,0.04),0 0.2rem 1rem 0 rgba(0,0,0,0.1)}.card--clear,.card--feature{border:0}.card--clear{background:transparent}.control__label{display:block;margin:0 0 0 0 .5rem;font-weight:600}.control--radio .control__label,.control--checkbox .control__label{font-weight:400}.control--inline{-ms-flex-direction:column;flex-direction:column}.control--inline .control__label:not(:first-child){margin-left:0}@media (min-width: 576px){.control--inline{-ms-flex-direction:row;flex-direction:row}.control--inline .control__label:not(:first-child){margin-left:.5rem}}.control--block,.control--block .control__input,.control--block .control__textarea,.control--block .control__select{width:100%}.control--select{display:inline-block;vertical-align:top;position:relative;margin:0 0 1.5rem}.control--select:after{content:"";border:1px solid #0074D9;border-right:0;border-top:0;display:block;position:absolute;height:.5rem;pointer-events:none;transform:rotate(-45deg);width:.5rem;margin-top:-0.375em;right:1.125em;top:50%;z-index:4}.control__select{padding-right:2.5rem;margin:0}.control__textarea--sm{min-height:5rem}.control__textarea--md{min-height:8.75rem}.control__textarea--lg{min-height:12.5rem}.color-primary{color:#0074D9}.color-secondary{color:#3D9970}.color-tertiary{color:#FF4136}.color-light{color:#E0E0E0}.color-lighter{color:#F2F2F2}.color-lightest{color:#fff}.color-medium{color:#A4A4A4}.color-dark{color:#6E6E6E}.color-darker{color:#444}.color-darkest{color:#111}.bg-color-primary{background-color:#0074D9}.bg-color-secondary{background-color:#3D9970}.bg-color-tertiary{background-color:#FF4136}.bg-color-light{background-color:#E0E0E0}.bg-color-lighter{background-color:#F2F2F2}.bg-color-lightest{background-color:#fff}.bg-color-medium{background-color:#A4A4A4}.bg-color-dark{background-color:#6E6E6E}.bg-color-darker{background-color:#444}.bg-color-darkest{background-color:#111}.inverse{color:#F2F2F2}.inverse h1,.inverse h2,.inverse h3,.inverse h4,.inverse h5,.inverse h6{color:#F2F2F2}.display-block{display:block}.display-flex{display:-ms-flexbox;display:flex}.display-inline-block{display:inline-block}.display-inline{display:inline}.display-none{display:none}.display-table{display:table}.padding-xxxs{padding:.5rem}.padding-xxs{padding:1rem}.padding-xs{padding:1.5rem}.padding-sm{padding:2rem}.padding-md{padding:2.5rem}.padding-lg{padding:3rem}.padding-xl{padding:3.5rem}.padding-xxl{padding:4rem}.padding-xxxl{padding:4.5rem}.padding-y{padding-left:0;padding-right:0}.padding-x{padding-top:0;padding-bottom:0}.padding-nulled{padding:0}.margin-xxxs{margin:.5rem}.margin-xxs{margin:1rem}.margin-xs{margin:1.5rem}.margin-sm{margin:2rem}.margin-md{margin:2.5rem}.margin-lg{margin:3rem}.margin-xl{margin:3.5rem}.margin-xxl{margin:4rem}.margin-xxxl{margin:4.5rem}.margin-y{margin-left:0;margin-right:0}.margin-x{margin-top:0;margin-bottom:0}.margin-nulled{margin:0}.height-full{height:100%}.type-italic{font-style:italic}.type-bold{font-weight:700}.type-black{font-weight:900}.type-small{font-size:.7em}.type-caps{font-variant:small-caps}.type-uppercase{text-transform:uppercase}.type-justify{text-align:justify}.type-left{text-align:left}.type-right{text-align:right}.type-center{text-align:center} 8 | -------------------------------------------------------------------------------- /dist/themes/crystal.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Tent CSS 3 | * http://css.sitetent.com 4 | * 5 | * Copyright (c) 2017, Aaron Mazade 6 | * Licensed under the MIT license 7 | */ 8 | html { 9 | box-sizing: border-box; 10 | line-height: 1; 11 | font-size: 100%; 12 | -ms-text-size-adjust: 100%; 13 | -webkit-text-size-adjust: 100%; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | *, 19 | *:before, 20 | *:after { 21 | box-sizing: inherit; 22 | } 23 | 24 | body { 25 | margin: 0; 26 | font-family: sans-serif; 27 | } 28 | 29 | iframe { 30 | border: 0; 31 | } 32 | 33 | main { 34 | display: block; 35 | } 36 | 37 | sup { 38 | position: relative; 39 | top: -.5em; 40 | vertical-align: baseline; 41 | font-size: 75%; 42 | line-height: 0; 43 | } 44 | 45 | strong { 46 | font-weight: bold; 47 | } 48 | 49 | figure { 50 | margin: 0; 51 | } 52 | 53 | ::-moz-focus-inner { 54 | border: 0; 55 | padding: 0; 56 | } 57 | 58 | body { 59 | background-color: #FFFFFF; 60 | color: #444444; 61 | font-weight: 400; 62 | font-size: 1em; 63 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Open Sans", "Helvetica Neue", sans-serif; 64 | line-height: 1.6; 65 | } 66 | 67 | hr { 68 | display: block; 69 | margin: 1.5rem 0; 70 | height: 1px; 71 | border: none; 72 | background-color: #dbdbdb; 73 | } 74 | 75 | img { 76 | max-width: 100%; 77 | height: auto; 78 | border: 0; 79 | vertical-align: middle; 80 | } 81 | 82 | a { 83 | color: #B10DC9; 84 | text-decoration: none; 85 | } 86 | 87 | a:hover, a:focus, a:active { 88 | color: #720881; 89 | } 90 | 91 | button { 92 | border: 0; 93 | margin: 0; 94 | padding: 0; 95 | text-align: inherit; 96 | text-transform: inherit; 97 | font: inherit; 98 | letter-spacing: inherit; 99 | background: none; 100 | cursor: pointer; 101 | overflow: visible; 102 | } 103 | 104 | blockquote { 105 | margin: 0 0 1rem; 106 | padding: 0 0 0 0.5rem; 107 | border-left: 4px solid #6E6E6E; 108 | } 109 | 110 | cite { 111 | font-style: italic; 112 | } 113 | 114 | code { 115 | font-family: "Lucida Console", Courier, monospace; 116 | font-size: inherit; 117 | color: #B10DC9; 118 | background-color: #F2F2F2; 119 | padding: 0.125rem 0.25rem; 120 | } 121 | 122 | p { 123 | margin: 0 0 1.5rem; 124 | } 125 | 126 | p:last-child { 127 | margin-bottom: 0; 128 | } 129 | 130 | h1, 131 | h2, 132 | h3, 133 | h4, 134 | h5, 135 | h6 { 136 | display: block; 137 | margin: 0 0 2rem; 138 | color: #444444; 139 | font-weight: inherit; 140 | font-size: inherit; 141 | line-height: 1.25; 142 | } 143 | 144 | h1:last-child, 145 | h2:last-child, 146 | h3:last-child, 147 | h4:last-child, 148 | h5:last-child, 149 | h6:last-child { 150 | margin-bottom: 0; 151 | } 152 | 153 | h1 { 154 | font-size: 3rem; 155 | } 156 | 157 | h2 { 158 | font-size: 2.5rem; 159 | } 160 | 161 | h3 { 162 | font-size: 2rem; 163 | } 164 | 165 | h4 { 166 | font-size: 1.25rem; 167 | } 168 | 169 | h5 { 170 | font-size: 1.125rem; 171 | } 172 | 173 | h6 { 174 | font-size: 1rem; 175 | } 176 | 177 | textarea { 178 | overflow: auto; 179 | } 180 | 181 | input[type="email"], 182 | input[type="number"], 183 | input[type="search"], 184 | input[type="text"], 185 | input[type="tel"], 186 | input[type="url"], 187 | input[type="password"], 188 | textarea, 189 | select { 190 | display: block; 191 | margin: 0 0 1.5rem; 192 | padding: 0.5rem 1rem; 193 | width: auto; 194 | border: 1px solid #E0E0E0; 195 | border-radius: 0; 196 | background-color: #FFFFFF; 197 | color: #A4A4A4; 198 | font-size: 1rem; 199 | font-family: inherit; 200 | appearance: none; 201 | } 202 | 203 | input[type="email"]:focus, 204 | input[type="number"]:focus, 205 | input[type="search"]:focus, 206 | input[type="text"]:focus, 207 | input[type="tel"]:focus, 208 | input[type="url"]:focus, 209 | input[type="password"]:focus, 210 | textarea:focus, 211 | select:focus { 212 | border-color: #B10DC9; 213 | } 214 | 215 | ul, 216 | ol { 217 | margin: 0 0 1.5rem; 218 | padding: 0; 219 | } 220 | 221 | ul { 222 | list-style: circle inside; 223 | } 224 | 225 | ol { 226 | list-style: decimal inside; 227 | } 228 | 229 | li { 230 | display: list-item; 231 | margin-bottom: 0.5rem; 232 | } 233 | 234 | dl { 235 | margin-top: 0; 236 | margin-bottom: 0; 237 | } 238 | 239 | dd { 240 | margin-left: 0; 241 | } 242 | 243 | table { 244 | border-spacing: 0; 245 | } 246 | 247 | table td { 248 | padding: 0.5rem; 249 | } 250 | 251 | .container { 252 | position: relative; 253 | margin: 0 auto; 254 | padding: 0; 255 | width: 100%; 256 | } 257 | 258 | @media (min-width: 576px) { 259 | .container { 260 | max-width: 33.75rem; 261 | } 262 | } 263 | 264 | @media (min-width: 768px) { 265 | .container { 266 | max-width: 45rem; 267 | } 268 | } 269 | 270 | @media (min-width: 992px) { 271 | .container { 272 | max-width: 71.25rem; 273 | } 274 | } 275 | 276 | .container--fluid { 277 | max-width: 100%; 278 | } 279 | 280 | .flex, .grid, .control--inline { 281 | display: flex; 282 | flex-direction: row; 283 | } 284 | 285 | .flex--stack, .grid--stack { 286 | flex-direction: column; 287 | } 288 | 289 | .flex--top, .grid--top { 290 | align-items: flex-start; 291 | } 292 | 293 | .flex--bottom, .grid--bottom { 294 | align-items: flex-end; 295 | } 296 | 297 | .flex--center, .grid--center { 298 | align-items: center; 299 | } 300 | 301 | .flex--stretch, .grid--stretch { 302 | align-items: stretch; 303 | } 304 | 305 | .flex--baseline, .grid--baseline { 306 | align-items: baseline; 307 | } 308 | 309 | .flex--justify-center, .grid--justify-center { 310 | justify-content: center; 311 | } 312 | 313 | .flex--justify-start, .grid--justify-start { 314 | justify-content: flex-start; 315 | } 316 | 317 | .flex--justify-end, .grid--justify-end { 318 | justify-content: flex-end; 319 | } 320 | 321 | .flex__item, .grid__column { 322 | display: block; 323 | flex: 1; 324 | } 325 | 326 | .flex__item--top, .grid__column--top { 327 | align-self: flex-start; 328 | } 329 | 330 | .flex__item--bottom, .grid__column--bottom { 331 | align-self: flex-end; 332 | } 333 | 334 | .flex__item--center, .grid__column--center { 335 | align-self: center; 336 | } 337 | 338 | .flex-first { 339 | order: -1; 340 | } 341 | 342 | .flex-last { 343 | order: 1; 344 | } 345 | 346 | @media (min-width: 576px) { 347 | .flex-first--sm { 348 | order: -1; 349 | } 350 | .flex-last--sm { 351 | order: 1; 352 | } 353 | } 354 | 355 | @media (min-width: 768px) { 356 | .flex-first--md { 357 | order: -1; 358 | } 359 | .flex-last--md { 360 | order: 1; 361 | } 362 | } 363 | 364 | @media (min-width: 992px) { 365 | .flex-first--lg { 366 | order: -1; 367 | } 368 | .flex-last--lg { 369 | order: 1; 370 | } 371 | } 372 | 373 | @media (min-width: 1200px) { 374 | .flex-first--xl { 375 | order: -1; 376 | } 377 | .flex-last--xl { 378 | order: 1; 379 | } 380 | } 381 | 382 | .grid { 383 | padding: 0; 384 | width: 100%; 385 | flex-wrap: wrap; 386 | flex-direction: row; 387 | } 388 | 389 | .grid--gutterless > .grid__column { 390 | padding: 0; 391 | } 392 | 393 | .grid__column { 394 | margin-left: 0; 395 | max-width: 100%; 396 | width: 100%; 397 | padding-left: 1rem; 398 | padding-right: 1rem; 399 | } 400 | 401 | .grid__column--1 { 402 | flex: 0 0 8.33333%; 403 | max-width: 8.33333%; 404 | } 405 | 406 | .grid__column--2 { 407 | flex: 0 0 16.66667%; 408 | max-width: 16.66667%; 409 | } 410 | 411 | .grid__column--3 { 412 | flex: 0 0 25%; 413 | max-width: 25%; 414 | } 415 | 416 | .grid__column--4 { 417 | flex: 0 0 33.33333%; 418 | max-width: 33.33333%; 419 | } 420 | 421 | .grid__column--5 { 422 | flex: 0 0 41.66667%; 423 | max-width: 41.66667%; 424 | } 425 | 426 | .grid__column--6 { 427 | flex: 0 0 50%; 428 | max-width: 50%; 429 | } 430 | 431 | .grid__column--7 { 432 | flex: 0 0 58.33333%; 433 | max-width: 58.33333%; 434 | } 435 | 436 | .grid__column--8 { 437 | flex: 0 0 66.66667%; 438 | max-width: 66.66667%; 439 | } 440 | 441 | .grid__column--9 { 442 | flex: 0 0 75%; 443 | max-width: 75%; 444 | } 445 | 446 | .grid__column--10 { 447 | flex: 0 0 83.33333%; 448 | max-width: 83.33333%; 449 | } 450 | 451 | .grid__column--11 { 452 | flex: 0 0 91.66667%; 453 | max-width: 91.66667%; 454 | } 455 | 456 | .grid__column--12 { 457 | flex: 0 0 100%; 458 | max-width: 100%; 459 | } 460 | 461 | @media (min-width: 576px) { 462 | .grid__column--1--sm { 463 | flex: 0 0 8.33333%; 464 | max-width: 8.33333%; 465 | } 466 | .grid__column--2--sm { 467 | flex: 0 0 16.66667%; 468 | max-width: 16.66667%; 469 | } 470 | .grid__column--3--sm { 471 | flex: 0 0 25%; 472 | max-width: 25%; 473 | } 474 | .grid__column--4--sm { 475 | flex: 0 0 33.33333%; 476 | max-width: 33.33333%; 477 | } 478 | .grid__column--5--sm { 479 | flex: 0 0 41.66667%; 480 | max-width: 41.66667%; 481 | } 482 | .grid__column--6--sm { 483 | flex: 0 0 50%; 484 | max-width: 50%; 485 | } 486 | .grid__column--7--sm { 487 | flex: 0 0 58.33333%; 488 | max-width: 58.33333%; 489 | } 490 | .grid__column--8--sm { 491 | flex: 0 0 66.66667%; 492 | max-width: 66.66667%; 493 | } 494 | .grid__column--9--sm { 495 | flex: 0 0 75%; 496 | max-width: 75%; 497 | } 498 | .grid__column--10--sm { 499 | flex: 0 0 83.33333%; 500 | max-width: 83.33333%; 501 | } 502 | .grid__column--11--sm { 503 | flex: 0 0 91.66667%; 504 | max-width: 91.66667%; 505 | } 506 | .grid__column--12--sm { 507 | flex: 0 0 100%; 508 | max-width: 100%; 509 | } 510 | } 511 | 512 | @media (min-width: 768px) { 513 | .grid__column--1--md { 514 | flex: 0 0 8.33333%; 515 | max-width: 8.33333%; 516 | } 517 | .grid__column--2--md { 518 | flex: 0 0 16.66667%; 519 | max-width: 16.66667%; 520 | } 521 | .grid__column--3--md { 522 | flex: 0 0 25%; 523 | max-width: 25%; 524 | } 525 | .grid__column--4--md { 526 | flex: 0 0 33.33333%; 527 | max-width: 33.33333%; 528 | } 529 | .grid__column--5--md { 530 | flex: 0 0 41.66667%; 531 | max-width: 41.66667%; 532 | } 533 | .grid__column--6--md { 534 | flex: 0 0 50%; 535 | max-width: 50%; 536 | } 537 | .grid__column--7--md { 538 | flex: 0 0 58.33333%; 539 | max-width: 58.33333%; 540 | } 541 | .grid__column--8--md { 542 | flex: 0 0 66.66667%; 543 | max-width: 66.66667%; 544 | } 545 | .grid__column--9--md { 546 | flex: 0 0 75%; 547 | max-width: 75%; 548 | } 549 | .grid__column--10--md { 550 | flex: 0 0 83.33333%; 551 | max-width: 83.33333%; 552 | } 553 | .grid__column--11--md { 554 | flex: 0 0 91.66667%; 555 | max-width: 91.66667%; 556 | } 557 | .grid__column--12--md { 558 | flex: 0 0 100%; 559 | max-width: 100%; 560 | } 561 | } 562 | 563 | @media (min-width: 992px) { 564 | .grid__column--1--lg { 565 | flex: 0 0 8.33333%; 566 | max-width: 8.33333%; 567 | } 568 | .grid__column--2--lg { 569 | flex: 0 0 16.66667%; 570 | max-width: 16.66667%; 571 | } 572 | .grid__column--3--lg { 573 | flex: 0 0 25%; 574 | max-width: 25%; 575 | } 576 | .grid__column--4--lg { 577 | flex: 0 0 33.33333%; 578 | max-width: 33.33333%; 579 | } 580 | .grid__column--5--lg { 581 | flex: 0 0 41.66667%; 582 | max-width: 41.66667%; 583 | } 584 | .grid__column--6--lg { 585 | flex: 0 0 50%; 586 | max-width: 50%; 587 | } 588 | .grid__column--7--lg { 589 | flex: 0 0 58.33333%; 590 | max-width: 58.33333%; 591 | } 592 | .grid__column--8--lg { 593 | flex: 0 0 66.66667%; 594 | max-width: 66.66667%; 595 | } 596 | .grid__column--9--lg { 597 | flex: 0 0 75%; 598 | max-width: 75%; 599 | } 600 | .grid__column--10--lg { 601 | flex: 0 0 83.33333%; 602 | max-width: 83.33333%; 603 | } 604 | .grid__column--11--lg { 605 | flex: 0 0 91.66667%; 606 | max-width: 91.66667%; 607 | } 608 | .grid__column--12--lg { 609 | flex: 0 0 100%; 610 | max-width: 100%; 611 | } 612 | } 613 | 614 | @media (min-width: 1200px) { 615 | .grid__column--1--xl { 616 | flex: 0 0 8.33333%; 617 | max-width: 8.33333%; 618 | } 619 | .grid__column--2--xl { 620 | flex: 0 0 16.66667%; 621 | max-width: 16.66667%; 622 | } 623 | .grid__column--3--xl { 624 | flex: 0 0 25%; 625 | max-width: 25%; 626 | } 627 | .grid__column--4--xl { 628 | flex: 0 0 33.33333%; 629 | max-width: 33.33333%; 630 | } 631 | .grid__column--5--xl { 632 | flex: 0 0 41.66667%; 633 | max-width: 41.66667%; 634 | } 635 | .grid__column--6--xl { 636 | flex: 0 0 50%; 637 | max-width: 50%; 638 | } 639 | .grid__column--7--xl { 640 | flex: 0 0 58.33333%; 641 | max-width: 58.33333%; 642 | } 643 | .grid__column--8--xl { 644 | flex: 0 0 66.66667%; 645 | max-width: 66.66667%; 646 | } 647 | .grid__column--9--xl { 648 | flex: 0 0 75%; 649 | max-width: 75%; 650 | } 651 | .grid__column--10--xl { 652 | flex: 0 0 83.33333%; 653 | max-width: 83.33333%; 654 | } 655 | .grid__column--11--xl { 656 | flex: 0 0 91.66667%; 657 | max-width: 91.66667%; 658 | } 659 | .grid__column--12--xl { 660 | flex: 0 0 100%; 661 | max-width: 100%; 662 | } 663 | } 664 | 665 | @media (min-width: 576px) { 666 | .grid { 667 | width: 100%; 668 | } 669 | .grid__column { 670 | padding: 0 1rem; 671 | } 672 | } 673 | 674 | .list--unstyled, .list--inline { 675 | list-style-type: none; 676 | padding: 0; 677 | } 678 | 679 | .list--inline .list__item { 680 | display: inline-block; 681 | } 682 | 683 | .list--inline .list__item:not(:last-child) { 684 | padding-right: 25px; 685 | } 686 | 687 | .list--nulled, 688 | .list--nulled .list__item { 689 | margin: 0; 690 | } 691 | 692 | .table--stripped .table__body .table__row:not(:nth-child(even)) .table__cell { 693 | background-color: #F2F2F2; 694 | } 695 | 696 | .title--xxxs, 697 | .subtitle--xxxs { 698 | font-size: 0.625rem; 699 | } 700 | 701 | .title--xxs, 702 | .subtitle--xxs { 703 | font-size: 0.75rem; 704 | } 705 | 706 | .title--xs, 707 | .subtitle--xs { 708 | font-size: 0.875rem; 709 | } 710 | 711 | .title--sm, 712 | .subtitle--sm { 713 | font-size: 1rem; 714 | } 715 | 716 | .title--md, 717 | .subtitle--md { 718 | font-size: 1.125rem; 719 | } 720 | 721 | .title--lg, 722 | .subtitle--lg { 723 | font-size: 1.25rem; 724 | } 725 | 726 | .title--xl, 727 | .subtitle--xl { 728 | font-size: 2rem; 729 | } 730 | 731 | .title--xxl, 732 | .subtitle--xxl { 733 | font-size: 2.5rem; 734 | } 735 | 736 | .title--xxxl, 737 | .subtitle--xxxl { 738 | font-size: 3rem; 739 | } 740 | 741 | .title { 742 | font-weight: 700; 743 | } 744 | 745 | .subtitle { 746 | font-weight: 100; 747 | } 748 | 749 | .title, 750 | .subtitle { 751 | word-break: break-word; 752 | } 753 | 754 | .title:not(:last-child), 755 | .subtitle:not(:last-child) { 756 | margin-bottom: 1rem; 757 | } 758 | 759 | .title-set .title { 760 | margin: 0; 761 | } 762 | 763 | .title-set .title + .subtitle { 764 | margin-top: 0; 765 | } 766 | 767 | .lead { 768 | font-weight: 300; 769 | font-size: 18px; 770 | line-height: 1.6; 771 | } 772 | 773 | .button { 774 | display: inline-block; 775 | margin-bottom: 0.5rem; 776 | padding: 0.5rem 2.5rem; 777 | border: 2px solid #6E6E6E; 778 | border-radius: 0; 779 | background-color: #6E6E6E; 780 | color: #FFFFFF; 781 | text-decoration: none; 782 | text-transform: uppercase; 783 | font-size: inherit; 784 | transition: all 1s ease; 785 | } 786 | 787 | .button.button--primary:hover, .button.button--primary:focus, .button.button--primary:active { 788 | border-color: #480551; 789 | background-color: #870a99; 790 | color: #FFFFFF; 791 | } 792 | 793 | .button.button--secondary:hover, .button.button--secondary:focus, .button.button--secondary:active { 794 | border-color: #1b6a6a; 795 | background-color: #2ba7a7; 796 | color: #FFFFFF; 797 | } 798 | 799 | .button.button--tertiary:hover, .button.button--tertiary:focus, .button.button--tertiary:active { 800 | border-color: #9b4800; 801 | background-color: #e76b00; 802 | color: #FFFFFF; 803 | } 804 | 805 | .button--xxxs { 806 | padding: 0.5rem 1rem; 807 | font-size: 0.625rem; 808 | } 809 | 810 | .button--xxs { 811 | padding: 0.5rem 2rem; 812 | font-size: 0.625rem; 813 | } 814 | 815 | .button--xs { 816 | padding: 0.5rem 1.5rem; 817 | font-size: 0.75rem; 818 | } 819 | 820 | .button--sm { 821 | padding: 0.5rem 2.5rem; 822 | font-size: 0.875rem; 823 | } 824 | 825 | .button--md { 826 | padding: 0.5rem 2.5rem; 827 | font-size: 0.875rem; 828 | } 829 | 830 | .button--lg { 831 | padding: 1rem 3rem; 832 | font-size: 1.125rem; 833 | } 834 | 835 | .button--xl { 836 | padding: 1rem 3.5rem; 837 | font-size: 1.25rem; 838 | } 839 | 840 | .button--xxl { 841 | padding: 1rem 4rem; 842 | font-size: 1.25rem; 843 | } 844 | 845 | .button--xxxl { 846 | padding: 1rem 4.5rem; 847 | font-size: 1.25rem; 848 | } 849 | 850 | .button--block { 851 | width: 100%; 852 | text-align: center; 853 | } 854 | 855 | .button--filled:hover, .button--filled:focus, .button--filled:active { 856 | border-color: #2e2e2e; 857 | background-color: #555555; 858 | color: #FFFFFF; 859 | } 860 | 861 | .button--filled.button--primary { 862 | border-color: #B10DC9; 863 | background-color: #B10DC9; 864 | color: #FFFFFF; 865 | } 866 | 867 | .button--filled.button--secondary { 868 | border-color: #39CCCC; 869 | background-color: #39CCCC; 870 | color: #FFFFFF; 871 | } 872 | 873 | .button--filled.button--tertiary { 874 | border-color: #FF851B; 875 | background-color: #FF851B; 876 | color: #FFFFFF; 877 | } 878 | 879 | .button--outlined { 880 | background-color: transparent; 881 | color: #6E6E6E; 882 | } 883 | 884 | .button--outlined:hover, .button--outlined:focus, .button--outlined:active { 885 | border-color: #2e2e2e; 886 | background-color: #555555; 887 | color: #FFFFFF; 888 | } 889 | 890 | .button--outlined.button--primary { 891 | border-color: #B10DC9; 892 | color: #B10DC9; 893 | } 894 | 895 | .button--outlined.button--secondary { 896 | border-color: #39CCCC; 897 | color: #39CCCC; 898 | } 899 | 900 | .button--outlined.button--tertiary { 901 | border-color: #FF851B; 902 | color: #FF851B; 903 | } 904 | 905 | .button--clear { 906 | border-color: transparent; 907 | background-color: transparent; 908 | color: #6E6E6E; 909 | } 910 | 911 | .button--clear:hover, .button--clear:focus, .button--clear:active { 912 | border-bottom: 2px solid #6E6E6E; 913 | color: #6E6E6E; 914 | } 915 | 916 | .card { 917 | display: flex; 918 | flex-direction: column; 919 | overflow: hidden; 920 | margin-bottom: 1rem; 921 | border: 1px solid #E0E0E0; 922 | border-radius: 0; 923 | background: #FFFFFF; 924 | color: #444444; 925 | } 926 | 927 | .card > :last-child { 928 | margin-bottom: 0; 929 | } 930 | 931 | .card__image { 932 | margin: 0 auto; 933 | max-width: 100%; 934 | } 935 | 936 | .card__content { 937 | padding: 1rem; 938 | flex: 1 0 auto; 939 | } 940 | 941 | .card__content > :last-child { 942 | margin-bottom: 0; 943 | } 944 | 945 | .card--filled { 946 | background-color: #444444; 947 | } 948 | 949 | .card--filled.card--primary { 950 | background-color: #B10DC9; 951 | } 952 | 953 | .card--filled.card--secondary { 954 | background-color: #39CCCC; 955 | } 956 | 957 | .card--filled.card--tertiary { 958 | background-color: #FF851B; 959 | } 960 | 961 | .card--outlined { 962 | border: 2px solid transparent; 963 | } 964 | 965 | .card--outlined.card--primary { 966 | border-color: #B10DC9; 967 | } 968 | 969 | .card--outlined.card--secondary { 970 | border-color: #39CCCC; 971 | } 972 | 973 | .card--outlined.card--tertiary { 974 | border-color: #FF851B; 975 | } 976 | 977 | .card--raised { 978 | box-shadow: 0 0.2rem 0.4rem 0 rgba(0, 0, 0, 0.04), 0 0.2rem 1rem 0 rgba(0, 0, 0, 0.1); 979 | } 980 | 981 | .card--clear, 982 | .card--feature { 983 | border: 0; 984 | } 985 | 986 | .card--clear { 987 | background: transparent; 988 | } 989 | 990 | .control__label { 991 | display: block; 992 | margin: 0 0 0 0 0.5rem; 993 | font-weight: 600; 994 | } 995 | 996 | .control--radio .control__label, 997 | .control--checkbox .control__label { 998 | font-weight: 400; 999 | } 1000 | 1001 | .control--inline { 1002 | flex-direction: column; 1003 | } 1004 | 1005 | .control--inline .control__label:not(:first-child) { 1006 | margin-left: 0; 1007 | } 1008 | 1009 | @media (min-width: 576px) { 1010 | .control--inline { 1011 | flex-direction: row; 1012 | } 1013 | .control--inline .control__label:not(:first-child) { 1014 | margin-left: 0.5rem; 1015 | } 1016 | } 1017 | 1018 | .control--block, 1019 | .control--block .control__input, 1020 | .control--block .control__textarea, 1021 | .control--block .control__select { 1022 | width: 100%; 1023 | } 1024 | 1025 | .control--select { 1026 | display: inline-block; 1027 | vertical-align: top; 1028 | position: relative; 1029 | margin: 0 0 1.5rem; 1030 | } 1031 | 1032 | .control--select:after { 1033 | content: ""; 1034 | border: 1px solid #B10DC9; 1035 | border-right: 0; 1036 | border-top: 0; 1037 | display: block; 1038 | position: absolute; 1039 | height: 0.5rem; 1040 | pointer-events: none; 1041 | transform: rotate(-45deg); 1042 | width: 0.5rem; 1043 | margin-top: -0.375em; 1044 | right: 1.125em; 1045 | top: 50%; 1046 | z-index: 4; 1047 | } 1048 | 1049 | .control__select { 1050 | padding-right: 2.5rem; 1051 | margin: 0; 1052 | } 1053 | 1054 | .control__textarea--sm { 1055 | min-height: 5rem; 1056 | } 1057 | 1058 | .control__textarea--md { 1059 | min-height: 8.75rem; 1060 | } 1061 | 1062 | .control__textarea--lg { 1063 | min-height: 12.5rem; 1064 | } 1065 | 1066 | .color-primary { 1067 | color: #B10DC9; 1068 | } 1069 | 1070 | .color-secondary { 1071 | color: #39CCCC; 1072 | } 1073 | 1074 | .color-tertiary { 1075 | color: #FF851B; 1076 | } 1077 | 1078 | .color-light { 1079 | color: #E0E0E0; 1080 | } 1081 | 1082 | .color-lighter { 1083 | color: #F2F2F2; 1084 | } 1085 | 1086 | .color-lightest { 1087 | color: #FFFFFF; 1088 | } 1089 | 1090 | .color-medium { 1091 | color: #A4A4A4; 1092 | } 1093 | 1094 | .color-dark { 1095 | color: #6E6E6E; 1096 | } 1097 | 1098 | .color-darker { 1099 | color: #444444; 1100 | } 1101 | 1102 | .color-darkest { 1103 | color: #111111; 1104 | } 1105 | 1106 | .bg-color-primary { 1107 | background-color: #B10DC9; 1108 | } 1109 | 1110 | .bg-color-secondary { 1111 | background-color: #39CCCC; 1112 | } 1113 | 1114 | .bg-color-tertiary { 1115 | background-color: #FF851B; 1116 | } 1117 | 1118 | .bg-color-light { 1119 | background-color: #E0E0E0; 1120 | } 1121 | 1122 | .bg-color-lighter { 1123 | background-color: #F2F2F2; 1124 | } 1125 | 1126 | .bg-color-lightest { 1127 | background-color: #FFFFFF; 1128 | } 1129 | 1130 | .bg-color-medium { 1131 | background-color: #A4A4A4; 1132 | } 1133 | 1134 | .bg-color-dark { 1135 | background-color: #6E6E6E; 1136 | } 1137 | 1138 | .bg-color-darker { 1139 | background-color: #444444; 1140 | } 1141 | 1142 | .bg-color-darkest { 1143 | background-color: #111111; 1144 | } 1145 | 1146 | .inverse { 1147 | color: #F2F2F2; 1148 | } 1149 | 1150 | .inverse h1, 1151 | .inverse h2, 1152 | .inverse h3, 1153 | .inverse h4, 1154 | .inverse h5, 1155 | .inverse h6 { 1156 | color: #F2F2F2; 1157 | } 1158 | 1159 | .display-block { 1160 | display: block; 1161 | } 1162 | 1163 | .display-flex { 1164 | display: flex; 1165 | } 1166 | 1167 | .display-inline-block { 1168 | display: inline-block; 1169 | } 1170 | 1171 | .display-inline { 1172 | display: inline; 1173 | } 1174 | 1175 | .display-none { 1176 | display: none; 1177 | } 1178 | 1179 | .display-table { 1180 | display: table; 1181 | } 1182 | 1183 | .padding-xxxs { 1184 | padding: 0.5rem; 1185 | } 1186 | 1187 | .padding-xxs { 1188 | padding: 1rem; 1189 | } 1190 | 1191 | .padding-xs { 1192 | padding: 1.5rem; 1193 | } 1194 | 1195 | .padding-sm { 1196 | padding: 2rem; 1197 | } 1198 | 1199 | .padding-md { 1200 | padding: 2.5rem; 1201 | } 1202 | 1203 | .padding-lg { 1204 | padding: 3rem; 1205 | } 1206 | 1207 | .padding-xl { 1208 | padding: 3.5rem; 1209 | } 1210 | 1211 | .padding-xxl { 1212 | padding: 4rem; 1213 | } 1214 | 1215 | .padding-xxxl { 1216 | padding: 4.5rem; 1217 | } 1218 | 1219 | .padding-y { 1220 | padding-left: 0; 1221 | padding-right: 0; 1222 | } 1223 | 1224 | .padding-x { 1225 | padding-top: 0; 1226 | padding-bottom: 0; 1227 | } 1228 | 1229 | .padding-nulled { 1230 | padding: 0; 1231 | } 1232 | 1233 | .margin-xxxs { 1234 | margin: 0.5rem; 1235 | } 1236 | 1237 | .margin-xxs { 1238 | margin: 1rem; 1239 | } 1240 | 1241 | .margin-xs { 1242 | margin: 1.5rem; 1243 | } 1244 | 1245 | .margin-sm { 1246 | margin: 2rem; 1247 | } 1248 | 1249 | .margin-md { 1250 | margin: 2.5rem; 1251 | } 1252 | 1253 | .margin-lg { 1254 | margin: 3rem; 1255 | } 1256 | 1257 | .margin-xl { 1258 | margin: 3.5rem; 1259 | } 1260 | 1261 | .margin-xxl { 1262 | margin: 4rem; 1263 | } 1264 | 1265 | .margin-xxxl { 1266 | margin: 4.5rem; 1267 | } 1268 | 1269 | .margin-y { 1270 | margin-left: 0; 1271 | margin-right: 0; 1272 | } 1273 | 1274 | .margin-x { 1275 | margin-top: 0; 1276 | margin-bottom: 0; 1277 | } 1278 | 1279 | .margin-nulled { 1280 | margin: 0; 1281 | } 1282 | 1283 | .height-full { 1284 | height: 100%; 1285 | } 1286 | 1287 | .type-italic { 1288 | font-style: italic; 1289 | } 1290 | 1291 | .type-bold { 1292 | font-weight: 700; 1293 | } 1294 | 1295 | .type-black { 1296 | font-weight: 900; 1297 | } 1298 | 1299 | .type-small { 1300 | font-size: 0.7em; 1301 | } 1302 | 1303 | .type-caps { 1304 | font-variant: small-caps; 1305 | } 1306 | 1307 | .type-uppercase { 1308 | text-transform: uppercase; 1309 | } 1310 | 1311 | .type-justify { 1312 | text-align: justify; 1313 | } 1314 | 1315 | .type-left { 1316 | text-align: left; 1317 | } 1318 | 1319 | .type-right { 1320 | text-align: right; 1321 | } 1322 | 1323 | .type-center { 1324 | text-align: center; 1325 | } 1326 | -------------------------------------------------------------------------------- /dist/tent.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Tent CSS 3 | * http://css.sitetent.com 4 | * 5 | * Copyright (c) 2017, Aaron Mazade 6 | * Licensed under the MIT license 7 | */ 8 | html { 9 | box-sizing: border-box; 10 | line-height: 1; 11 | font-size: 100%; 12 | -ms-text-size-adjust: 100%; 13 | -webkit-text-size-adjust: 100%; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | *, 19 | *:before, 20 | *:after { 21 | box-sizing: inherit; 22 | } 23 | 24 | body { 25 | margin: 0; 26 | font-family: sans-serif; 27 | } 28 | 29 | iframe { 30 | border: 0; 31 | } 32 | 33 | main { 34 | display: block; 35 | } 36 | 37 | sup { 38 | position: relative; 39 | top: -.5em; 40 | vertical-align: baseline; 41 | font-size: 75%; 42 | line-height: 0; 43 | } 44 | 45 | strong { 46 | font-weight: bold; 47 | } 48 | 49 | figure { 50 | margin: 0; 51 | } 52 | 53 | ::-moz-focus-inner { 54 | border: 0; 55 | padding: 0; 56 | } 57 | 58 | body { 59 | background-color: #FFFFFF; 60 | color: #444444; 61 | font-weight: 400; 62 | font-size: 1em; 63 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Open Sans", "Helvetica Neue", sans-serif; 64 | line-height: 1.6; 65 | } 66 | 67 | hr { 68 | display: block; 69 | margin: 1.5rem 0; 70 | height: 1px; 71 | border: none; 72 | background-color: #dbdbdb; 73 | } 74 | 75 | img { 76 | max-width: 100%; 77 | height: auto; 78 | border: 0; 79 | vertical-align: middle; 80 | } 81 | 82 | a { 83 | color: #0074D9; 84 | text-decoration: none; 85 | } 86 | 87 | a:hover, a:focus, a:active { 88 | color: #004b8d; 89 | } 90 | 91 | button { 92 | border: 0; 93 | margin: 0; 94 | padding: 0; 95 | text-align: inherit; 96 | text-transform: inherit; 97 | font: inherit; 98 | letter-spacing: inherit; 99 | background: none; 100 | cursor: pointer; 101 | overflow: visible; 102 | } 103 | 104 | blockquote { 105 | margin: 0 0 1rem; 106 | padding: 0 0 0 0.5rem; 107 | border-left: 4px solid #6E6E6E; 108 | } 109 | 110 | cite { 111 | font-style: italic; 112 | } 113 | 114 | code { 115 | font-family: "Lucida Console", Courier, monospace; 116 | font-size: inherit; 117 | color: #0074D9; 118 | background-color: #F2F2F2; 119 | padding: 0.125rem 0.25rem; 120 | } 121 | 122 | p { 123 | margin: 0 0 1.5rem; 124 | } 125 | 126 | p:last-child { 127 | margin-bottom: 0; 128 | } 129 | 130 | h1, 131 | h2, 132 | h3, 133 | h4, 134 | h5, 135 | h6 { 136 | display: block; 137 | margin: 0 0 2rem; 138 | color: #444444; 139 | font-weight: inherit; 140 | font-size: inherit; 141 | line-height: 1.25; 142 | } 143 | 144 | h1:last-child, 145 | h2:last-child, 146 | h3:last-child, 147 | h4:last-child, 148 | h5:last-child, 149 | h6:last-child { 150 | margin-bottom: 0; 151 | } 152 | 153 | h1 { 154 | font-size: 3rem; 155 | } 156 | 157 | h2 { 158 | font-size: 2.5rem; 159 | } 160 | 161 | h3 { 162 | font-size: 2rem; 163 | } 164 | 165 | h4 { 166 | font-size: 1.25rem; 167 | } 168 | 169 | h5 { 170 | font-size: 1.125rem; 171 | } 172 | 173 | h6 { 174 | font-size: 1rem; 175 | } 176 | 177 | textarea { 178 | overflow: auto; 179 | } 180 | 181 | input[type="email"], 182 | input[type="number"], 183 | input[type="search"], 184 | input[type="text"], 185 | input[type="tel"], 186 | input[type="url"], 187 | input[type="password"], 188 | textarea, 189 | select { 190 | display: block; 191 | margin: 0 0 1.5rem; 192 | padding: 0.5rem 1rem; 193 | width: auto; 194 | border: 1px solid #E0E0E0; 195 | border-radius: 0; 196 | background-color: #FFFFFF; 197 | color: #A4A4A4; 198 | font-size: 1rem; 199 | font-family: inherit; 200 | -webkit-appearance: none; 201 | -moz-appearance: none; 202 | appearance: none; 203 | } 204 | 205 | input[type="email"]:focus, 206 | input[type="number"]:focus, 207 | input[type="search"]:focus, 208 | input[type="text"]:focus, 209 | input[type="tel"]:focus, 210 | input[type="url"]:focus, 211 | input[type="password"]:focus, 212 | textarea:focus, 213 | select:focus { 214 | border-color: #0074D9; 215 | } 216 | 217 | ul, 218 | ol { 219 | margin: 0 0 1.5rem; 220 | padding: 0; 221 | } 222 | 223 | ul { 224 | list-style: circle inside; 225 | } 226 | 227 | ol { 228 | list-style: decimal inside; 229 | } 230 | 231 | li { 232 | display: list-item; 233 | margin-bottom: 0.5rem; 234 | } 235 | 236 | dl { 237 | margin-top: 0; 238 | margin-bottom: 0; 239 | } 240 | 241 | dd { 242 | margin-left: 0; 243 | } 244 | 245 | table { 246 | border-spacing: 0; 247 | } 248 | 249 | table td { 250 | padding: 0.5rem; 251 | } 252 | 253 | .container { 254 | position: relative; 255 | margin: 0 auto; 256 | padding: 0; 257 | width: 100%; 258 | } 259 | 260 | @media (min-width: 576px) { 261 | .container { 262 | max-width: 33.75rem; 263 | } 264 | } 265 | 266 | @media (min-width: 768px) { 267 | .container { 268 | max-width: 45rem; 269 | } 270 | } 271 | 272 | @media (min-width: 992px) { 273 | .container { 274 | max-width: 71.25rem; 275 | } 276 | } 277 | 278 | .container--fluid { 279 | max-width: 100%; 280 | } 281 | 282 | .flex, .grid, .control--inline { 283 | display: -ms-flexbox; 284 | display: flex; 285 | -ms-flex-direction: row; 286 | flex-direction: row; 287 | } 288 | 289 | .flex--stack, .grid--stack { 290 | -ms-flex-direction: column; 291 | flex-direction: column; 292 | } 293 | 294 | .flex--top, .grid--top { 295 | -ms-flex-align: start; 296 | align-items: flex-start; 297 | } 298 | 299 | .flex--bottom, .grid--bottom { 300 | -ms-flex-align: end; 301 | align-items: flex-end; 302 | } 303 | 304 | .flex--center, .grid--center { 305 | -ms-flex-align: center; 306 | align-items: center; 307 | } 308 | 309 | .flex--stretch, .grid--stretch { 310 | -ms-flex-align: stretch; 311 | align-items: stretch; 312 | } 313 | 314 | .flex--baseline, .grid--baseline { 315 | -ms-flex-align: baseline; 316 | align-items: baseline; 317 | } 318 | 319 | .flex--justify-center, .grid--justify-center { 320 | -ms-flex-pack: center; 321 | justify-content: center; 322 | } 323 | 324 | .flex--justify-start, .grid--justify-start { 325 | -ms-flex-pack: start; 326 | justify-content: flex-start; 327 | } 328 | 329 | .flex--justify-end, .grid--justify-end { 330 | -ms-flex-pack: end; 331 | justify-content: flex-end; 332 | } 333 | 334 | .flex__item, .grid__column { 335 | display: block; 336 | -ms-flex: 1; 337 | flex: 1; 338 | } 339 | 340 | .flex__item--top, .grid__column--top { 341 | -ms-flex-item-align: start; 342 | align-self: flex-start; 343 | } 344 | 345 | .flex__item--bottom, .grid__column--bottom { 346 | -ms-flex-item-align: end; 347 | align-self: flex-end; 348 | } 349 | 350 | .flex__item--center, .grid__column--center { 351 | -ms-flex-item-align: center; 352 | -ms-grid-row-align: center; 353 | align-self: center; 354 | } 355 | 356 | .flex-first { 357 | -ms-flex-order: -1; 358 | order: -1; 359 | } 360 | 361 | .flex-last { 362 | -ms-flex-order: 1; 363 | order: 1; 364 | } 365 | 366 | @media (min-width: 576px) { 367 | .flex-first--sm { 368 | -ms-flex-order: -1; 369 | order: -1; 370 | } 371 | .flex-last--sm { 372 | -ms-flex-order: 1; 373 | order: 1; 374 | } 375 | } 376 | 377 | @media (min-width: 768px) { 378 | .flex-first--md { 379 | -ms-flex-order: -1; 380 | order: -1; 381 | } 382 | .flex-last--md { 383 | -ms-flex-order: 1; 384 | order: 1; 385 | } 386 | } 387 | 388 | @media (min-width: 992px) { 389 | .flex-first--lg { 390 | -ms-flex-order: -1; 391 | order: -1; 392 | } 393 | .flex-last--lg { 394 | -ms-flex-order: 1; 395 | order: 1; 396 | } 397 | } 398 | 399 | @media (min-width: 1200px) { 400 | .flex-first--xl { 401 | -ms-flex-order: -1; 402 | order: -1; 403 | } 404 | .flex-last--xl { 405 | -ms-flex-order: 1; 406 | order: 1; 407 | } 408 | } 409 | 410 | .grid { 411 | padding: 0; 412 | width: 100%; 413 | -ms-flex-wrap: wrap; 414 | flex-wrap: wrap; 415 | -ms-flex-direction: row; 416 | flex-direction: row; 417 | } 418 | 419 | .grid--gutterless > .grid__column { 420 | padding: 0; 421 | } 422 | 423 | .grid__column { 424 | margin-left: 0; 425 | max-width: 100%; 426 | width: 100%; 427 | padding-left: 1rem; 428 | padding-right: 1rem; 429 | } 430 | 431 | .grid__column--1 { 432 | -ms-flex: 0 0 8.33333%; 433 | flex: 0 0 8.33333%; 434 | max-width: 8.33333%; 435 | } 436 | 437 | .grid__column--2 { 438 | -ms-flex: 0 0 16.66667%; 439 | flex: 0 0 16.66667%; 440 | max-width: 16.66667%; 441 | } 442 | 443 | .grid__column--3 { 444 | -ms-flex: 0 0 25%; 445 | flex: 0 0 25%; 446 | max-width: 25%; 447 | } 448 | 449 | .grid__column--4 { 450 | -ms-flex: 0 0 33.33333%; 451 | flex: 0 0 33.33333%; 452 | max-width: 33.33333%; 453 | } 454 | 455 | .grid__column--5 { 456 | -ms-flex: 0 0 41.66667%; 457 | flex: 0 0 41.66667%; 458 | max-width: 41.66667%; 459 | } 460 | 461 | .grid__column--6 { 462 | -ms-flex: 0 0 50%; 463 | flex: 0 0 50%; 464 | max-width: 50%; 465 | } 466 | 467 | .grid__column--7 { 468 | -ms-flex: 0 0 58.33333%; 469 | flex: 0 0 58.33333%; 470 | max-width: 58.33333%; 471 | } 472 | 473 | .grid__column--8 { 474 | -ms-flex: 0 0 66.66667%; 475 | flex: 0 0 66.66667%; 476 | max-width: 66.66667%; 477 | } 478 | 479 | .grid__column--9 { 480 | -ms-flex: 0 0 75%; 481 | flex: 0 0 75%; 482 | max-width: 75%; 483 | } 484 | 485 | .grid__column--10 { 486 | -ms-flex: 0 0 83.33333%; 487 | flex: 0 0 83.33333%; 488 | max-width: 83.33333%; 489 | } 490 | 491 | .grid__column--11 { 492 | -ms-flex: 0 0 91.66667%; 493 | flex: 0 0 91.66667%; 494 | max-width: 91.66667%; 495 | } 496 | 497 | .grid__column--12 { 498 | -ms-flex: 0 0 100%; 499 | flex: 0 0 100%; 500 | max-width: 100%; 501 | } 502 | 503 | @media (min-width: 576px) { 504 | .grid__column--1--sm { 505 | -ms-flex: 0 0 8.33333%; 506 | flex: 0 0 8.33333%; 507 | max-width: 8.33333%; 508 | } 509 | .grid__column--2--sm { 510 | -ms-flex: 0 0 16.66667%; 511 | flex: 0 0 16.66667%; 512 | max-width: 16.66667%; 513 | } 514 | .grid__column--3--sm { 515 | -ms-flex: 0 0 25%; 516 | flex: 0 0 25%; 517 | max-width: 25%; 518 | } 519 | .grid__column--4--sm { 520 | -ms-flex: 0 0 33.33333%; 521 | flex: 0 0 33.33333%; 522 | max-width: 33.33333%; 523 | } 524 | .grid__column--5--sm { 525 | -ms-flex: 0 0 41.66667%; 526 | flex: 0 0 41.66667%; 527 | max-width: 41.66667%; 528 | } 529 | .grid__column--6--sm { 530 | -ms-flex: 0 0 50%; 531 | flex: 0 0 50%; 532 | max-width: 50%; 533 | } 534 | .grid__column--7--sm { 535 | -ms-flex: 0 0 58.33333%; 536 | flex: 0 0 58.33333%; 537 | max-width: 58.33333%; 538 | } 539 | .grid__column--8--sm { 540 | -ms-flex: 0 0 66.66667%; 541 | flex: 0 0 66.66667%; 542 | max-width: 66.66667%; 543 | } 544 | .grid__column--9--sm { 545 | -ms-flex: 0 0 75%; 546 | flex: 0 0 75%; 547 | max-width: 75%; 548 | } 549 | .grid__column--10--sm { 550 | -ms-flex: 0 0 83.33333%; 551 | flex: 0 0 83.33333%; 552 | max-width: 83.33333%; 553 | } 554 | .grid__column--11--sm { 555 | -ms-flex: 0 0 91.66667%; 556 | flex: 0 0 91.66667%; 557 | max-width: 91.66667%; 558 | } 559 | .grid__column--12--sm { 560 | -ms-flex: 0 0 100%; 561 | flex: 0 0 100%; 562 | max-width: 100%; 563 | } 564 | } 565 | 566 | @media (min-width: 768px) { 567 | .grid__column--1--md { 568 | -ms-flex: 0 0 8.33333%; 569 | flex: 0 0 8.33333%; 570 | max-width: 8.33333%; 571 | } 572 | .grid__column--2--md { 573 | -ms-flex: 0 0 16.66667%; 574 | flex: 0 0 16.66667%; 575 | max-width: 16.66667%; 576 | } 577 | .grid__column--3--md { 578 | -ms-flex: 0 0 25%; 579 | flex: 0 0 25%; 580 | max-width: 25%; 581 | } 582 | .grid__column--4--md { 583 | -ms-flex: 0 0 33.33333%; 584 | flex: 0 0 33.33333%; 585 | max-width: 33.33333%; 586 | } 587 | .grid__column--5--md { 588 | -ms-flex: 0 0 41.66667%; 589 | flex: 0 0 41.66667%; 590 | max-width: 41.66667%; 591 | } 592 | .grid__column--6--md { 593 | -ms-flex: 0 0 50%; 594 | flex: 0 0 50%; 595 | max-width: 50%; 596 | } 597 | .grid__column--7--md { 598 | -ms-flex: 0 0 58.33333%; 599 | flex: 0 0 58.33333%; 600 | max-width: 58.33333%; 601 | } 602 | .grid__column--8--md { 603 | -ms-flex: 0 0 66.66667%; 604 | flex: 0 0 66.66667%; 605 | max-width: 66.66667%; 606 | } 607 | .grid__column--9--md { 608 | -ms-flex: 0 0 75%; 609 | flex: 0 0 75%; 610 | max-width: 75%; 611 | } 612 | .grid__column--10--md { 613 | -ms-flex: 0 0 83.33333%; 614 | flex: 0 0 83.33333%; 615 | max-width: 83.33333%; 616 | } 617 | .grid__column--11--md { 618 | -ms-flex: 0 0 91.66667%; 619 | flex: 0 0 91.66667%; 620 | max-width: 91.66667%; 621 | } 622 | .grid__column--12--md { 623 | -ms-flex: 0 0 100%; 624 | flex: 0 0 100%; 625 | max-width: 100%; 626 | } 627 | } 628 | 629 | @media (min-width: 992px) { 630 | .grid__column--1--lg { 631 | -ms-flex: 0 0 8.33333%; 632 | flex: 0 0 8.33333%; 633 | max-width: 8.33333%; 634 | } 635 | .grid__column--2--lg { 636 | -ms-flex: 0 0 16.66667%; 637 | flex: 0 0 16.66667%; 638 | max-width: 16.66667%; 639 | } 640 | .grid__column--3--lg { 641 | -ms-flex: 0 0 25%; 642 | flex: 0 0 25%; 643 | max-width: 25%; 644 | } 645 | .grid__column--4--lg { 646 | -ms-flex: 0 0 33.33333%; 647 | flex: 0 0 33.33333%; 648 | max-width: 33.33333%; 649 | } 650 | .grid__column--5--lg { 651 | -ms-flex: 0 0 41.66667%; 652 | flex: 0 0 41.66667%; 653 | max-width: 41.66667%; 654 | } 655 | .grid__column--6--lg { 656 | -ms-flex: 0 0 50%; 657 | flex: 0 0 50%; 658 | max-width: 50%; 659 | } 660 | .grid__column--7--lg { 661 | -ms-flex: 0 0 58.33333%; 662 | flex: 0 0 58.33333%; 663 | max-width: 58.33333%; 664 | } 665 | .grid__column--8--lg { 666 | -ms-flex: 0 0 66.66667%; 667 | flex: 0 0 66.66667%; 668 | max-width: 66.66667%; 669 | } 670 | .grid__column--9--lg { 671 | -ms-flex: 0 0 75%; 672 | flex: 0 0 75%; 673 | max-width: 75%; 674 | } 675 | .grid__column--10--lg { 676 | -ms-flex: 0 0 83.33333%; 677 | flex: 0 0 83.33333%; 678 | max-width: 83.33333%; 679 | } 680 | .grid__column--11--lg { 681 | -ms-flex: 0 0 91.66667%; 682 | flex: 0 0 91.66667%; 683 | max-width: 91.66667%; 684 | } 685 | .grid__column--12--lg { 686 | -ms-flex: 0 0 100%; 687 | flex: 0 0 100%; 688 | max-width: 100%; 689 | } 690 | } 691 | 692 | @media (min-width: 1200px) { 693 | .grid__column--1--xl { 694 | -ms-flex: 0 0 8.33333%; 695 | flex: 0 0 8.33333%; 696 | max-width: 8.33333%; 697 | } 698 | .grid__column--2--xl { 699 | -ms-flex: 0 0 16.66667%; 700 | flex: 0 0 16.66667%; 701 | max-width: 16.66667%; 702 | } 703 | .grid__column--3--xl { 704 | -ms-flex: 0 0 25%; 705 | flex: 0 0 25%; 706 | max-width: 25%; 707 | } 708 | .grid__column--4--xl { 709 | -ms-flex: 0 0 33.33333%; 710 | flex: 0 0 33.33333%; 711 | max-width: 33.33333%; 712 | } 713 | .grid__column--5--xl { 714 | -ms-flex: 0 0 41.66667%; 715 | flex: 0 0 41.66667%; 716 | max-width: 41.66667%; 717 | } 718 | .grid__column--6--xl { 719 | -ms-flex: 0 0 50%; 720 | flex: 0 0 50%; 721 | max-width: 50%; 722 | } 723 | .grid__column--7--xl { 724 | -ms-flex: 0 0 58.33333%; 725 | flex: 0 0 58.33333%; 726 | max-width: 58.33333%; 727 | } 728 | .grid__column--8--xl { 729 | -ms-flex: 0 0 66.66667%; 730 | flex: 0 0 66.66667%; 731 | max-width: 66.66667%; 732 | } 733 | .grid__column--9--xl { 734 | -ms-flex: 0 0 75%; 735 | flex: 0 0 75%; 736 | max-width: 75%; 737 | } 738 | .grid__column--10--xl { 739 | -ms-flex: 0 0 83.33333%; 740 | flex: 0 0 83.33333%; 741 | max-width: 83.33333%; 742 | } 743 | .grid__column--11--xl { 744 | -ms-flex: 0 0 91.66667%; 745 | flex: 0 0 91.66667%; 746 | max-width: 91.66667%; 747 | } 748 | .grid__column--12--xl { 749 | -ms-flex: 0 0 100%; 750 | flex: 0 0 100%; 751 | max-width: 100%; 752 | } 753 | } 754 | 755 | @media (min-width: 576px) { 756 | .grid { 757 | width: 100%; 758 | } 759 | .grid__column { 760 | padding: 0 1rem; 761 | } 762 | } 763 | 764 | .list--unstyled, .list--inline { 765 | list-style-type: none; 766 | padding: 0; 767 | } 768 | 769 | .list--inline .list__item { 770 | display: inline-block; 771 | } 772 | 773 | .list--inline .list__item:not(:last-child) { 774 | padding-right: 25px; 775 | } 776 | 777 | .list--nulled, 778 | .list--nulled .list__item { 779 | margin: 0; 780 | } 781 | 782 | .table--stripped .table__body .table__row:not(:nth-child(even)) .table__cell { 783 | background-color: #F2F2F2; 784 | } 785 | 786 | .title--xxxs, 787 | .subtitle--xxxs { 788 | font-size: 0.625rem; 789 | } 790 | 791 | .title--xxs, 792 | .subtitle--xxs { 793 | font-size: 0.75rem; 794 | } 795 | 796 | .title--xs, 797 | .subtitle--xs { 798 | font-size: 0.875rem; 799 | } 800 | 801 | .title--sm, 802 | .subtitle--sm { 803 | font-size: 1rem; 804 | } 805 | 806 | .title--md, 807 | .subtitle--md { 808 | font-size: 1.125rem; 809 | } 810 | 811 | .title--lg, 812 | .subtitle--lg { 813 | font-size: 1.25rem; 814 | } 815 | 816 | .title--xl, 817 | .subtitle--xl { 818 | font-size: 2rem; 819 | } 820 | 821 | .title--xxl, 822 | .subtitle--xxl { 823 | font-size: 2.5rem; 824 | } 825 | 826 | .title--xxxl, 827 | .subtitle--xxxl { 828 | font-size: 3rem; 829 | } 830 | 831 | .title { 832 | font-weight: 700; 833 | } 834 | 835 | .subtitle { 836 | font-weight: 100; 837 | } 838 | 839 | .title, 840 | .subtitle { 841 | word-break: break-word; 842 | } 843 | 844 | .title:not(:last-child), 845 | .subtitle:not(:last-child) { 846 | margin-bottom: 1rem; 847 | } 848 | 849 | .title-set .title { 850 | margin: 0; 851 | } 852 | 853 | .title-set .title + .subtitle { 854 | margin-top: 0; 855 | } 856 | 857 | .lead { 858 | font-weight: 300; 859 | font-size: 18px; 860 | line-height: 1.6; 861 | } 862 | 863 | .button { 864 | display: inline-block; 865 | margin-bottom: 0.5rem; 866 | padding: 0.5rem 2.5rem; 867 | border: 2px solid #6E6E6E; 868 | border-radius: 0; 869 | background-color: #6E6E6E; 870 | color: #FFFFFF; 871 | text-decoration: none; 872 | text-transform: uppercase; 873 | font-size: inherit; 874 | transition: all 1s ease; 875 | } 876 | 877 | .button.button--primary:hover, .button.button--primary:focus, .button.button--primary:active { 878 | border-color: #00305a; 879 | background-color: #0059a6; 880 | color: #FFFFFF; 881 | } 882 | 883 | .button.button--secondary:hover, .button.button--secondary:focus, .button.button--secondary:active { 884 | border-color: #193e2d; 885 | background-color: #2e7555; 886 | color: #FFFFFF; 887 | } 888 | 889 | .button.button--tertiary:hover, .button.button--tertiary:focus, .button.button--tertiary:active { 890 | border-color: #b60a00; 891 | background-color: #ff1103; 892 | color: #FFFFFF; 893 | } 894 | 895 | .button--xxxs { 896 | padding: 0.5rem 1rem; 897 | font-size: 0.625rem; 898 | } 899 | 900 | .button--xxs { 901 | padding: 0.5rem 2rem; 902 | font-size: 0.625rem; 903 | } 904 | 905 | .button--xs { 906 | padding: 0.5rem 1.5rem; 907 | font-size: 0.75rem; 908 | } 909 | 910 | .button--sm { 911 | padding: 0.5rem 2.5rem; 912 | font-size: 0.875rem; 913 | } 914 | 915 | .button--md { 916 | padding: 0.5rem 2.5rem; 917 | font-size: 0.875rem; 918 | } 919 | 920 | .button--lg { 921 | padding: 1rem 3rem; 922 | font-size: 1.125rem; 923 | } 924 | 925 | .button--xl { 926 | padding: 1rem 3.5rem; 927 | font-size: 1.25rem; 928 | } 929 | 930 | .button--xxl { 931 | padding: 1rem 4rem; 932 | font-size: 1.25rem; 933 | } 934 | 935 | .button--xxxl { 936 | padding: 1rem 4.5rem; 937 | font-size: 1.25rem; 938 | } 939 | 940 | .button--block { 941 | width: 100%; 942 | text-align: center; 943 | } 944 | 945 | .button--filled:hover, .button--filled:focus, .button--filled:active { 946 | border-color: #2e2e2e; 947 | background-color: #555555; 948 | color: #FFFFFF; 949 | } 950 | 951 | .button--filled.button--primary { 952 | border-color: #0074D9; 953 | background-color: #0074D9; 954 | color: #FFFFFF; 955 | } 956 | 957 | .button--filled.button--secondary { 958 | border-color: #3D9970; 959 | background-color: #3D9970; 960 | color: #FFFFFF; 961 | } 962 | 963 | .button--filled.button--tertiary { 964 | border-color: #FF4136; 965 | background-color: #FF4136; 966 | color: #FFFFFF; 967 | } 968 | 969 | .button--outlined { 970 | background-color: transparent; 971 | color: #6E6E6E; 972 | } 973 | 974 | .button--outlined:hover, .button--outlined:focus, .button--outlined:active { 975 | border-color: #2e2e2e; 976 | background-color: #555555; 977 | color: #FFFFFF; 978 | } 979 | 980 | .button--outlined.button--primary { 981 | border-color: #0074D9; 982 | color: #0074D9; 983 | } 984 | 985 | .button--outlined.button--secondary { 986 | border-color: #3D9970; 987 | color: #3D9970; 988 | } 989 | 990 | .button--outlined.button--tertiary { 991 | border-color: #FF4136; 992 | color: #FF4136; 993 | } 994 | 995 | .button--clear { 996 | border-color: transparent; 997 | background-color: transparent; 998 | color: #6E6E6E; 999 | } 1000 | 1001 | .button--clear:hover, .button--clear:focus, .button--clear:active { 1002 | border-bottom: 2px solid #6E6E6E; 1003 | color: #6E6E6E; 1004 | } 1005 | 1006 | .card { 1007 | display: -ms-flexbox; 1008 | display: flex; 1009 | -ms-flex-direction: column; 1010 | flex-direction: column; 1011 | overflow: hidden; 1012 | margin-bottom: 1rem; 1013 | border: 1px solid #E0E0E0; 1014 | border-radius: 0; 1015 | background: #FFFFFF; 1016 | color: #444444; 1017 | } 1018 | 1019 | .card > :last-child { 1020 | margin-bottom: 0; 1021 | } 1022 | 1023 | .card__image { 1024 | margin: 0 auto; 1025 | max-width: 100%; 1026 | } 1027 | 1028 | .card__content { 1029 | padding: 1rem; 1030 | -ms-flex: 1 0 auto; 1031 | flex: 1 0 auto; 1032 | } 1033 | 1034 | .card__content > :last-child { 1035 | margin-bottom: 0; 1036 | } 1037 | 1038 | .card--filled { 1039 | background-color: #444444; 1040 | } 1041 | 1042 | .card--filled.card--primary { 1043 | background-color: #0074D9; 1044 | } 1045 | 1046 | .card--filled.card--secondary { 1047 | background-color: #3D9970; 1048 | } 1049 | 1050 | .card--filled.card--tertiary { 1051 | background-color: #FF4136; 1052 | } 1053 | 1054 | .card--outlined { 1055 | border: 2px solid transparent; 1056 | } 1057 | 1058 | .card--outlined.card--primary { 1059 | border-color: #0074D9; 1060 | } 1061 | 1062 | .card--outlined.card--secondary { 1063 | border-color: #3D9970; 1064 | } 1065 | 1066 | .card--outlined.card--tertiary { 1067 | border-color: #FF4136; 1068 | } 1069 | 1070 | .card--raised { 1071 | box-shadow: 0 0.2rem 0.4rem 0 rgba(0, 0, 0, 0.04), 0 0.2rem 1rem 0 rgba(0, 0, 0, 0.1); 1072 | } 1073 | 1074 | .card--clear, 1075 | .card--feature { 1076 | border: 0; 1077 | } 1078 | 1079 | .card--clear { 1080 | background: transparent; 1081 | } 1082 | 1083 | .control__label { 1084 | display: block; 1085 | margin: 0 0 0 0 0.5rem; 1086 | font-weight: 600; 1087 | } 1088 | 1089 | .control--radio .control__label, 1090 | .control--checkbox .control__label { 1091 | font-weight: 400; 1092 | } 1093 | 1094 | .control--inline { 1095 | -ms-flex-direction: column; 1096 | flex-direction: column; 1097 | } 1098 | 1099 | .control--inline .control__label:not(:first-child) { 1100 | margin-left: 0; 1101 | } 1102 | 1103 | @media (min-width: 576px) { 1104 | .control--inline { 1105 | -ms-flex-direction: row; 1106 | flex-direction: row; 1107 | } 1108 | .control--inline .control__label:not(:first-child) { 1109 | margin-left: 0.5rem; 1110 | } 1111 | } 1112 | 1113 | .control--block, 1114 | .control--block .control__input, 1115 | .control--block .control__textarea, 1116 | .control--block .control__select { 1117 | width: 100%; 1118 | } 1119 | 1120 | .control--select { 1121 | display: inline-block; 1122 | vertical-align: top; 1123 | position: relative; 1124 | margin: 0 0 1.5rem; 1125 | } 1126 | 1127 | .control--select:after { 1128 | content: ""; 1129 | border: 1px solid #0074D9; 1130 | border-right: 0; 1131 | border-top: 0; 1132 | display: block; 1133 | position: absolute; 1134 | height: 0.5rem; 1135 | pointer-events: none; 1136 | transform: rotate(-45deg); 1137 | width: 0.5rem; 1138 | margin-top: -0.375em; 1139 | right: 1.125em; 1140 | top: 50%; 1141 | z-index: 4; 1142 | } 1143 | 1144 | .control__select { 1145 | padding-right: 2.5rem; 1146 | margin: 0; 1147 | } 1148 | 1149 | .control__textarea--sm { 1150 | min-height: 5rem; 1151 | } 1152 | 1153 | .control__textarea--md { 1154 | min-height: 8.75rem; 1155 | } 1156 | 1157 | .control__textarea--lg { 1158 | min-height: 12.5rem; 1159 | } 1160 | 1161 | .color-primary { 1162 | color: #0074D9; 1163 | } 1164 | 1165 | .color-secondary { 1166 | color: #3D9970; 1167 | } 1168 | 1169 | .color-tertiary { 1170 | color: #FF4136; 1171 | } 1172 | 1173 | .color-light { 1174 | color: #E0E0E0; 1175 | } 1176 | 1177 | .color-lighter { 1178 | color: #F2F2F2; 1179 | } 1180 | 1181 | .color-lightest { 1182 | color: #FFFFFF; 1183 | } 1184 | 1185 | .color-medium { 1186 | color: #A4A4A4; 1187 | } 1188 | 1189 | .color-dark { 1190 | color: #6E6E6E; 1191 | } 1192 | 1193 | .color-darker { 1194 | color: #444444; 1195 | } 1196 | 1197 | .color-darkest { 1198 | color: #111111; 1199 | } 1200 | 1201 | .bg-color-primary { 1202 | background-color: #0074D9; 1203 | } 1204 | 1205 | .bg-color-secondary { 1206 | background-color: #3D9970; 1207 | } 1208 | 1209 | .bg-color-tertiary { 1210 | background-color: #FF4136; 1211 | } 1212 | 1213 | .bg-color-light { 1214 | background-color: #E0E0E0; 1215 | } 1216 | 1217 | .bg-color-lighter { 1218 | background-color: #F2F2F2; 1219 | } 1220 | 1221 | .bg-color-lightest { 1222 | background-color: #FFFFFF; 1223 | } 1224 | 1225 | .bg-color-medium { 1226 | background-color: #A4A4A4; 1227 | } 1228 | 1229 | .bg-color-dark { 1230 | background-color: #6E6E6E; 1231 | } 1232 | 1233 | .bg-color-darker { 1234 | background-color: #444444; 1235 | } 1236 | 1237 | .bg-color-darkest { 1238 | background-color: #111111; 1239 | } 1240 | 1241 | .inverse { 1242 | color: #F2F2F2; 1243 | } 1244 | 1245 | .inverse h1, 1246 | .inverse h2, 1247 | .inverse h3, 1248 | .inverse h4, 1249 | .inverse h5, 1250 | .inverse h6 { 1251 | color: #F2F2F2; 1252 | } 1253 | 1254 | .display-block { 1255 | display: block; 1256 | } 1257 | 1258 | .display-flex { 1259 | display: -ms-flexbox; 1260 | display: flex; 1261 | } 1262 | 1263 | .display-inline-block { 1264 | display: inline-block; 1265 | } 1266 | 1267 | .display-inline { 1268 | display: inline; 1269 | } 1270 | 1271 | .display-none { 1272 | display: none; 1273 | } 1274 | 1275 | .display-table { 1276 | display: table; 1277 | } 1278 | 1279 | .padding-xxxs { 1280 | padding: 0.5rem; 1281 | } 1282 | 1283 | .padding-xxs { 1284 | padding: 1rem; 1285 | } 1286 | 1287 | .padding-xs { 1288 | padding: 1.5rem; 1289 | } 1290 | 1291 | .padding-sm { 1292 | padding: 2rem; 1293 | } 1294 | 1295 | .padding-md { 1296 | padding: 2.5rem; 1297 | } 1298 | 1299 | .padding-lg { 1300 | padding: 3rem; 1301 | } 1302 | 1303 | .padding-xl { 1304 | padding: 3.5rem; 1305 | } 1306 | 1307 | .padding-xxl { 1308 | padding: 4rem; 1309 | } 1310 | 1311 | .padding-xxxl { 1312 | padding: 4.5rem; 1313 | } 1314 | 1315 | .padding-y { 1316 | padding-left: 0; 1317 | padding-right: 0; 1318 | } 1319 | 1320 | .padding-x { 1321 | padding-top: 0; 1322 | padding-bottom: 0; 1323 | } 1324 | 1325 | .padding-nulled { 1326 | padding: 0; 1327 | } 1328 | 1329 | .margin-xxxs { 1330 | margin: 0.5rem; 1331 | } 1332 | 1333 | .margin-xxs { 1334 | margin: 1rem; 1335 | } 1336 | 1337 | .margin-xs { 1338 | margin: 1.5rem; 1339 | } 1340 | 1341 | .margin-sm { 1342 | margin: 2rem; 1343 | } 1344 | 1345 | .margin-md { 1346 | margin: 2.5rem; 1347 | } 1348 | 1349 | .margin-lg { 1350 | margin: 3rem; 1351 | } 1352 | 1353 | .margin-xl { 1354 | margin: 3.5rem; 1355 | } 1356 | 1357 | .margin-xxl { 1358 | margin: 4rem; 1359 | } 1360 | 1361 | .margin-xxxl { 1362 | margin: 4.5rem; 1363 | } 1364 | 1365 | .margin-y { 1366 | margin-left: 0; 1367 | margin-right: 0; 1368 | } 1369 | 1370 | .margin-x { 1371 | margin-top: 0; 1372 | margin-bottom: 0; 1373 | } 1374 | 1375 | .margin-nulled { 1376 | margin: 0; 1377 | } 1378 | 1379 | .height-full { 1380 | height: 100%; 1381 | } 1382 | 1383 | .type-italic { 1384 | font-style: italic; 1385 | } 1386 | 1387 | .type-bold { 1388 | font-weight: 700; 1389 | } 1390 | 1391 | .type-black { 1392 | font-weight: 900; 1393 | } 1394 | 1395 | .type-small { 1396 | font-size: 0.7em; 1397 | } 1398 | 1399 | .type-caps { 1400 | font-variant: small-caps; 1401 | } 1402 | 1403 | .type-uppercase { 1404 | text-transform: uppercase; 1405 | } 1406 | 1407 | .type-justify { 1408 | text-align: justify; 1409 | } 1410 | 1411 | .type-left { 1412 | text-align: left; 1413 | } 1414 | 1415 | .type-right { 1416 | text-align: right; 1417 | } 1418 | 1419 | .type-center { 1420 | text-align: center; 1421 | } 1422 | --------------------------------------------------------------------------------