├── README.md ├── .gitattributes ├── scss ├── components │ ├── _styles-media.scss │ ├── _var.scss │ ├── _styles-tables.scss │ ├── _container.scss │ ├── _typography.scss │ ├── _grid-offset.scss │ ├── _styles-forms.scss │ ├── _grid-basic.scss │ ├── _styles-buttons.scss │ ├── _styles-helpers.scss │ ├── _grid-column-count-layout.scss │ ├── _grid-children-layout.scss │ └── _grid-layout.scss └── taffy.scss ├── LICENSE ├── ChangeLog.txt └── css ├── taffy-0.6.5.min.css └── taffy-0.6.5.css /README.md: -------------------------------------------------------------------------------- 1 | # Taffy CSS Framework 2 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto -------------------------------------------------------------------------------- /scss/components/_styles-media.scss: -------------------------------------------------------------------------------- 1 | /*******************************MEDIA*******************************/ 2 | 3 | .media{ 4 | max-width: 100%; 5 | height: auto; 6 | } 7 | 8 | .media--embed{ 9 | position: relative; 10 | padding-bottom: 56.25%; /* 16:9 */ 11 | padding-top: 25px; 12 | height: 0; 13 | } 14 | 15 | .media--embed iframe{ 16 | position: absolute; 17 | top: 0; 18 | left: 0; 19 | width: 100%; 20 | height: 100%; 21 | } -------------------------------------------------------------------------------- /scss/components/_var.scss: -------------------------------------------------------------------------------- 1 | /*******************************SIZING************************/ 2 | $size1: .512rem; 3 | $size2: .8rem; 4 | $size3: 1rem; 5 | $size4: 1.563rem; 6 | $size5: 1.953rem; 7 | $size6: 2.441rem; 8 | 9 | /*******************************FLUID TYPOGRAPHY************************/ 10 | 11 | $text-base-min: 16px; 12 | $text-base-max: 22px; 13 | 14 | $text-min-width: 320px; 15 | $text-max-width: 1000px; 16 | 17 | /*******************************COLORS************************/ 18 | $color-primary: #EA1B64; 19 | $color-secondary: #333; 20 | 21 | /*******************************GRID************************/ 22 | $grid-gutter: $size1; -------------------------------------------------------------------------------- /scss/taffy.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | // Variables; 4 | @import "components/_var"; 5 | 6 | // CONTAINER; 7 | @import "components/_container"; 8 | 9 | // GRID; 10 | @import "components/_grid-basic"; 11 | @import "components/_grid-children-layout"; 12 | @import "components/_grid-column-count-layout"; 13 | @import "components/_grid-offset"; 14 | 15 | // TYPOGRAPHY; 16 | @import "components/_typography"; 17 | 18 | // BASIC ELEMENT STYLES; 19 | @import "components/_styles-buttons"; 20 | @import "components/_styles-forms"; 21 | @import "components/_styles-tables"; 22 | @import "components/_styles-media"; 23 | @import "components/_styles-helpers"; 24 | -------------------------------------------------------------------------------- /scss/components/_styles-tables.scss: -------------------------------------------------------------------------------- 1 | /*******************************TABLES*******************************/ 2 | 3 | table{ 4 | border-collapse: collapse; 5 | border-spacing: 0; 6 | width: 100%; 7 | max-width: 100%; 8 | } 9 | 10 | thead th{ 11 | border-bottom: 2px solid #cfcfcf; 12 | } 13 | 14 | tfoot th{ 15 | border-top: 2px solid #cfcfcf; 16 | } 17 | 18 | td, th{ 19 | text-align: left; 20 | padding: .5rem; 21 | } 22 | 23 | td{ 24 | border-bottom: 1px solid #cfcfcf; 25 | } 26 | 27 | 28 | .table-striped tbody tr:nth-child(2n){ 29 | background-color: #ededed; 30 | } 31 | 32 | .table-bordered{ 33 | border: solid 1px #cfcfcf; 34 | } 35 | 36 | .table-highlight tr:hover:not(.table-selected){ 37 | background-color: #d2d2d2 !important; 38 | } 39 | 40 | table .table-selected{ 41 | background-color: #ffff83 !important; 42 | } -------------------------------------------------------------------------------- /scss/components/_container.scss: -------------------------------------------------------------------------------- 1 | /*******************************GENERAL*******************************/ 2 | 3 | html { 4 | box-sizing: border-box; 5 | } 6 | 7 | *, 8 | *:before, 9 | *:after { 10 | box-sizing: inherit; 11 | padding: 0; 12 | margin: 0; 13 | } 14 | 15 | body{ 16 | padding: 0; 17 | margin: 0; 18 | } 19 | 20 | /*******************************CONTAINER*******************************/ 21 | .container { 22 | position: relative; 23 | } 24 | 25 | @media screen and (min-width: 1000px) { 26 | .container { 27 | margin: 0 auto; 28 | max-width: 960px; 29 | width: 960px; 30 | } 31 | 32 | } 33 | 34 | @media screen and (min-width: 1192px) { 35 | .container { 36 | max-width: 1152px; 37 | width: 1152px; 38 | } 39 | } 40 | 41 | @media screen and (min-width: 1384px) { 42 | .container { 43 | max-width: 1344px; 44 | width: 1344px; 45 | } 46 | } -------------------------------------------------------------------------------- /scss/components/_typography.scss: -------------------------------------------------------------------------------- 1 | /*******************************TYPOGRAPHY*******************************/ 2 | 3 | html{ 4 | font-size: $text-base-min; 5 | } 6 | 7 | @media screen and (min-width: $text-min-width) { 8 | .html{ 9 | font-size: calc($text-base-min + ($text-base-max - $text-base-min) * (100vw - $text-min-width) / ($text-max-width - $text-min-width)); 10 | } 11 | 12 | } 13 | 14 | @media (min-width: $text-max-width) { 15 | html{ 16 | font-size: $text-base-max 17 | } 18 | } 19 | 20 | 21 | 22 | body { 23 | background-color: white; 24 | font-weight: 400; 25 | line-height: 1.45; 26 | color: #333; 27 | } 28 | 29 | p { 30 | margin: .6em 0; 31 | } 32 | 33 | h1, h2, h3, h4 { 34 | font-weight: inherit; 35 | line-height: 1.2; 36 | margin: .512em 0; 37 | } 38 | 39 | h1 { 40 | margin-top: 0; 41 | font-size: 2.441em; 42 | } 43 | 44 | h2 {font-size: 1.953em;} 45 | 46 | h3 {font-size: 1.563em;} 47 | 48 | h4 {font-size: 1.25em;} 49 | 50 | small, .font_small {font-size: 0.8em;} -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Logan Carlile 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. -------------------------------------------------------------------------------- /scss/components/_grid-offset.scss: -------------------------------------------------------------------------------- 1 | /*******************************GRID OFFSET*******************************/ 2 | 3 | 4 | .is-75p--offset{ 5 | margin-left: 75%; 6 | } 7 | 8 | .is-50p--offset{ 9 | margin-left: 50%; 10 | } 11 | 12 | .is-25p--offset{ 13 | margin-left: 25%; 14 | } 15 | 16 | .is-66p--offset{ 17 | margin-left: 66.66666%; 18 | } 19 | 20 | .is-33p--offset{ 21 | margin-left: 33.33333%; 22 | } 23 | 24 | .is-100p--offset{ 25 | margin-left: 100%; 26 | } 27 | 28 | .is-1--offset{ 29 | margin-left: 8.33333%; 30 | } 31 | 32 | .is-2--offset{ 33 | margin-left: 16.66666%; 34 | } 35 | 36 | .is-3--offset{ 37 | margin-left: 25%; 38 | } 39 | 40 | .is-4--offset{ 41 | margin-left: 33.33333%; 42 | } 43 | 44 | 45 | .is-5--offset{ 46 | margin-left: 41.66666%; 47 | } 48 | 49 | .is-6--offset{ 50 | margin-left: 50%; 51 | } 52 | 53 | .is-7--offset{ 54 | margin-left: 58.33333%; 55 | } 56 | 57 | .is-8--offset{ 58 | margin-left: 66.66666%; 59 | } 60 | 61 | .is-9--offset{ 62 | margin-left: 75%; 63 | } 64 | 65 | .is-10--offset{ 66 | margin-left: 83.33333%; 67 | } 68 | 69 | .is-11--offset{ 70 | margin-left: 91.66666%; 71 | } 72 | 73 | 74 | .is-12--offset{ 75 | margin-left: 100%; 76 | } 77 | -------------------------------------------------------------------------------- /scss/components/_styles-forms.scss: -------------------------------------------------------------------------------- 1 | /*******************************FORMS*******************************/ 2 | 3 | input:not([type=submit]):not([type=button]),textarea,select{ 4 | -moz-appearance: none; 5 | -webkit-appearance: none; 6 | -webkit-box-align: center; 7 | -ms-flex-align: center; 8 | align-items: center; 9 | border: 1px solid transparent; 10 | border-radius: 3px; 11 | box-shadow: none; 12 | display: -webkit-inline-box; 13 | display: -ms-inline-flexbox; 14 | display: inline-flex; 15 | height: 2.25em; 16 | -webkit-box-pack: start; 17 | -ms-flex-pack: start; 18 | justify-content: flex-start; 19 | line-height: 1.5; 20 | padding-bottom: calc(0.375em - 1px); 21 | padding-left: calc(0.625em - 1px); 22 | padding-right: calc(0.625em - 1px); 23 | padding-top: calc(0.375em - 1px); 24 | position: relative; 25 | vertical-align: top; 26 | background-color: white; 27 | border-color: #dbdbdb; 28 | color: #363636; 29 | box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1); 30 | max-width: 100%; 31 | width: 100%; 32 | margin-bottom: .5rem; 33 | } 34 | 35 | textarea{ 36 | display: block; 37 | max-height: 600px; 38 | max-width: 100%; 39 | min-height: 150px; 40 | min-width: 100%; 41 | padding: 0.625em; 42 | resize: vertical; 43 | } 44 | 45 | label{ 46 | display: block; 47 | max-width: 100%; 48 | margin-bottom: .5rem; 49 | } -------------------------------------------------------------------------------- /ChangeLog.txt: -------------------------------------------------------------------------------- 1 | # Change Log 2 | All notable changes to this project will be documented in this file. 3 | 4 | ## 0.6.5 - 2017-07-01 5 | ### Added 6 | -Grid Browser Support 7 | - Grid now works with IE 10+ 8 | - Grid does not work, but automatically stacks for IE 9 at any screen-size 9 | 10 | 11 | ## 0.6.0 - 2017-06-30 12 | ### Added 13 | - Grid Column Count 14 | - Column Count Grow 15 | - Column Count Center 16 | - Column Count Responsive 17 | - Grid Gapless 18 | - SCSS Support 19 | - Taffy is now modular, use what you need only. 20 | - Use variables to change specifics of Taffy. 21 | - Github 22 | ### Changed 23 | - Changed it so you don't need to add the class ".grid__col" to a column for it behave like a column. 24 | 25 | ## 0.3.0 - 2017-06-21 26 | ### Added 27 | - Tables 28 | - Add more to Helpers 29 | 30 | ## 0.2.0 - 2017-06-20 31 | ### Added 32 | -Grid Offset 33 | 34 | ## 0.1.6 - 2017-06-20 35 | ### Changed 36 | - Changed the class "is-x-percent" to "is-xp". For example: "is-50-percent" now is declared using "is-50p" 37 | 38 | ## 0.1.5 - 2017-06-18 39 | ### Added 40 | - Added Media 41 | ### Fixed 42 | - Fixed Responsive Children Sizing so "--small" worked as intended. 43 | 44 | ## 0.1.0 - 2017-06-17 45 | ### Added 46 | TAFFY BETA RELEASE 47 | - Added Getting Started 48 | - Added Container 49 | - Added Grid 50 | - Added Grid Column Sizing 51 | - Added Grid 12 Columns 52 | - Added Grid Specific Sizing 53 | - Added Fluid Typography 54 | - Added Buttons 55 | - Added Forms 56 | - Added Helpers -------------------------------------------------------------------------------- /scss/components/_grid-basic.scss: -------------------------------------------------------------------------------- 1 | /*******************************GRID & COLUMNS*******************************/ 2 | 3 | .grid{ 4 | display: -webkit-box; 5 | display: -ms-flexbox; 6 | display: flex; 7 | -ms-flex-wrap: wrap; 8 | flex-wrap: wrap; 9 | -webkit-box-orient: vertical; 10 | -webkit-box-direction: normal; 11 | -ms-flex-direction: column; 12 | flex-direction: column; 13 | } 14 | 15 | 16 | .grid>*{ 17 | -ms-flex-preferred-size: 100%; 18 | flex-basis: 100%; 19 | padding: .512rem 0; 20 | } 21 | 22 | 23 | .grid__col{ 24 | -ms-flex-preferred-size: 100%; 25 | flex-basis: 100%; 26 | padding: .512rem 0; 27 | } 28 | 29 | 30 | /*This gets applied when the device width is above 768px*/ 31 | @media screen and (min-width: 768px){ 32 | .grid { 33 | -webkit-box-orient: horizontal; 34 | -webkit-box-direction: normal; 35 | -ms-flex-direction: row; 36 | flex-direction: row; 37 | } 38 | .grid>*{ 39 | -webkit-box-flex: 1; 40 | -ms-flex: 1; 41 | flex: 1; 42 | padding: .512rem; 43 | } 44 | .grid__col{ 45 | -webkit-box-flex: 1; 46 | -ms-flex: 1; 47 | flex: 1; 48 | padding: .512rem; 49 | } 50 | 51 | } 52 | 53 | 54 | 55 | /*GRID COMPATIBILITY IE10+*/ 56 | @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 57 | .grid { display:block;} 58 | 59 | /*This gets applied when the device width is above 768px*/ 60 | @media screen and (min-width: 768px){ 61 | .grid{display: flex} 62 | .grid_col{display: inline-block;} 63 | .grid>*{display: inline-block;} 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /scss/components/_styles-buttons.scss: -------------------------------------------------------------------------------- 1 | /*******************************BUTTONS*******************************/ 2 | 3 | .btn, .btn--ghost,.btn--sharp,.btn--ghost--sharp{ 4 | -moz-appearance: none; 5 | -webkit-appearance: none; 6 | -webkit-box-align: center; 7 | -ms-flex-align: center; 8 | align-items: center; 9 | box-shadow: none; 10 | display: -webkit-inline-box; 11 | display: -ms-inline-flexbox; 12 | display: inline-flex; 13 | height: 2.25em; 14 | -webkit-box-pack: start; 15 | -ms-flex-pack: start; 16 | justify-content: flex-start; 17 | line-height: 1.5; 18 | padding-bottom: calc(0.375em - 1px); 19 | padding-left: calc(0.625em - 1px); 20 | padding-right: calc(0.625em - 1px); 21 | padding-top: calc(0.375em - 1px); 22 | position: relative; 23 | vertical-align: top; 24 | -webkit-touch-callout: none; 25 | -webkit-user-select: none; 26 | -moz-user-select: none; 27 | -ms-user-select: none; 28 | user-select: none; 29 | color: #363636; 30 | cursor: pointer; 31 | -webkit-box-pack: center; 32 | -ms-flex-pack: center; 33 | justify-content: center; 34 | padding-left: 0.75em; 35 | padding-right: 0.75em; 36 | text-align: center; 37 | white-space: nowrap; 38 | text-decoration: none; 39 | font-size: 1em; 40 | } 41 | 42 | .btn{ 43 | background-color: gainsboro; 44 | border: none; 45 | border-radius: 3px; 46 | } 47 | 48 | .btn--ghost{ 49 | border: solid 2px gainsboro; 50 | background-color: transparent; 51 | border-radius: 3px; 52 | 53 | } 54 | 55 | .btn--sharp{ 56 | background-color: gainsboro; 57 | border-radius: 0; 58 | border: none; 59 | } 60 | 61 | .btn--ghost--sharp{ 62 | border: solid 2px gainsboro; 63 | background-color: transparent; 64 | border-radius: 0; 65 | } -------------------------------------------------------------------------------- /scss/components/_styles-helpers.scss: -------------------------------------------------------------------------------- 1 | /*******************************HELPERS*******************************/ 2 | 3 | .text-center{ 4 | text-align: center; 5 | } 6 | 7 | .text-left{ 8 | text-align: left; 9 | } 10 | 11 | .text-right{ 12 | text-align: right; 13 | } 14 | 15 | .text-justify{ 16 | text-align: justify; 17 | } 18 | 19 | .text-lowercase{ 20 | text-transform: lowercase; 21 | } 22 | 23 | .text-uppercase{ 24 | text-transform: uppercase; 25 | } 26 | 27 | .text-capitalize{ 28 | text-transform: capitalize; 29 | } 30 | 31 | .text-normal{ 32 | font-weight: normal; 33 | } 34 | 35 | .text-bold{ 36 | font-weight: bold; 37 | } 38 | 39 | .text-italic{ 40 | font-style: italic; 41 | } 42 | 43 | .vertically-center{ 44 | display:-webkit-box; 45 | display:-ms-flexbox; 46 | display:flex; 47 | -webkit-box-pack: center; 48 | -ms-flex-pack: center; 49 | justify-content:center; 50 | -webkit-box-align: center; 51 | -ms-flex-align: center; 52 | -ms-grid-row-align: center; 53 | align-items:center; 54 | } 55 | 56 | .float-left{ 57 | float: left; 58 | } 59 | 60 | .float-right{ 61 | float: right; 62 | } 63 | 64 | .no-margin{ 65 | margin: 0 !important; 66 | } 67 | 68 | .no-padding{ 69 | margin: 0 !important; 70 | } 71 | 72 | .block{ 73 | display: block; 74 | } 75 | 76 | .inline-block{ 77 | display: inline-block; 78 | } 79 | 80 | .inline{ 81 | display: inline; 82 | } 83 | 84 | .show{ 85 | display: block !important; 86 | } 87 | 88 | .hide{ 89 | display: none !important; 90 | } 91 | 92 | .screen-reader{ 93 | border: 0; 94 | clip: rect(1px,1px,1px,1px); 95 | clip-path: inset( 50% ); 96 | height: 1px; 97 | margin: -1px; 98 | overflow: hidden; 99 | padding: 0; 100 | position: absolute; 101 | width: 1px; 102 | word-wrap: normal; 103 | } 104 | 105 | .content-buffer{ 106 | padding: 40px 0; 107 | } 108 | 109 | 110 | @media (max-width : 600px){ 111 | .content-buffer{ 112 | padding: 20px 3%; 113 | } 114 | } -------------------------------------------------------------------------------- /scss/components/_grid-column-count-layout.scss: -------------------------------------------------------------------------------- 1 | /*******************************GRID COLUMN COUNT*******************************/ 2 | 3 | .grid-1>*,.grid-2>*,.grid-3>*,.grid-4>*,.grid-5>*,.grid-6>*,.grid-7>*,.grid-8>*,.grid-9>*,.grid-10>*,.grid-11>*,.grid-12>*,.grid-1--large>*,.grid-2--large>*,.grid-3--large>*,.grid-4--large>*,.grid-5--large>*,.grid-6--large>*,.grid-7--large>*,.grid-8--large>*,.grid-9--large>*,.grid-10--large>*,.grid-11--large>*,.grid-12--large>*,.grid-1--medium>*,.grid-2--medium>*,.grid-3--medium>*,.grid-4--medium>*,.grid-5--medium>*,.grid-6--medium>*,.grid-7--medium>*,.grid-8--medium>*,.grid-9--medium>*,.grid-10--medium>*,.grid-11--medium>*,.grid-12--medium>*,.grid-1--small>*,.grid-2--small>*,.grid-3--small>*,.grid-4--small>*,.grid-5--small>*,.grid-6--small>*,.grid-7--small>*,.grid-8--small>*,.grid-9--small>*,.grid-10--small>*,.grid-11--small>*,.grid-12--small>*{ 4 | -webkit-box-flex: 0; 5 | -ms-flex: none; 6 | flex: none; 7 | } 8 | 9 | .grid-1>*{ 10 | width: 100%; 11 | } 12 | 13 | .grid-2>*{ 14 | width: 50%; 15 | } 16 | 17 | .grid-3>*{ 18 | width: 33.33333%; 19 | } 20 | 21 | .grid-4>*{ 22 | width: 25%; 23 | } 24 | 25 | .grid-5>*{ 26 | width: 20%; 27 | } 28 | 29 | .grid-6>*{ 30 | width: 16.66666%; 31 | } 32 | 33 | .grid-7>*{ 34 | width: 14.28571%; 35 | } 36 | 37 | .grid-8>*{ 38 | width: 12.5%; 39 | } 40 | 41 | .grid-9>*{ 42 | width: 11.11111%; 43 | } 44 | 45 | .grid-10>*{ 46 | width: 10%; 47 | } 48 | 49 | .grid-11>*{ 50 | width: 9.09090%; 51 | } 52 | 53 | .grid-12>*{ 54 | width: 8.33333%; 55 | } 56 | 57 | 58 | @media (max-width : 768px){ 59 | 60 | .grid-1>*,.grid-2>*,.grid-3>*,.grid-4>*,.grid-5>*,.grid-6>*,.grid-7>*,.grid-8>*,.grid-9>*,.grid-10>*,.grid-11>*,.grid-12>*{ 61 | width: 100%; 62 | } 63 | 64 | } 65 | 66 | 67 | 68 | @media (min-width : 1000px){ 69 | 70 | .grid-1--large>*{ 71 | width: 100%; 72 | } 73 | 74 | .grid-2--large>*{ 75 | width: 50%; 76 | } 77 | 78 | .grid-3--large>*{ 79 | width: 33.33333%; 80 | } 81 | 82 | .grid-4--large>*{ 83 | width: 25%; 84 | } 85 | 86 | .grid-5--large>*{ 87 | width: 20%; 88 | } 89 | 90 | .grid-6--large>*{ 91 | width: 16.66666%; 92 | } 93 | 94 | .grid-7--large>*{ 95 | width: 14.28571%; 96 | } 97 | 98 | .grid-8--large>*{ 99 | width: 12.5%; 100 | } 101 | 102 | .grid-9--large>*{ 103 | width: 11.11111%; 104 | } 105 | 106 | .grid-10--large>*{ 107 | width: 10%; 108 | } 109 | 110 | .grid-11--large>*{ 111 | width: 9.09090%; 112 | } 113 | 114 | .grid-12>*{ 115 | width: 8.33333%; 116 | } 117 | 118 | } 119 | 120 | 121 | @media (max-width : 1000px){ 122 | 123 | .grid-1--medium>*{ 124 | width: 100%; 125 | } 126 | 127 | .grid-2--medium>*{ 128 | width: 50%; 129 | } 130 | 131 | .grid-3--medium>*{ 132 | width: 33.33333%; 133 | } 134 | 135 | .grid-4--medium>*{ 136 | width: 25%; 137 | } 138 | 139 | .grid-5--medium>*{ 140 | width: 20%; 141 | } 142 | 143 | .grid-6--medium>*{ 144 | width: 16.66666%; 145 | } 146 | 147 | .grid-7--medium>*{ 148 | width: 14.28571%; 149 | } 150 | 151 | .grid-8--medium>*{ 152 | width: 12.5%; 153 | } 154 | 155 | .grid-9--medium>*{ 156 | width: 11.11111%; 157 | } 158 | 159 | .grid-10--medium>*{ 160 | width: 10%; 161 | } 162 | 163 | .grid-11--medium>*{ 164 | width: 9.09090%; 165 | } 166 | 167 | .grid-12--medium>*{ 168 | width: 8.33333%; 169 | } 170 | 171 | } 172 | 173 | 174 | @media (max-width : 768px){ 175 | 176 | .grid-1--small,.grid-2--small,.grid-3--small,.grid-4--small,.grid-5--small,.grid-6--small,.grid-7--small,.grid-8--small,.grid-9--small,.grid-10--small,.grid-11--small,.grid-12--small{ 177 | -webkit-box-orient: horizontal; 178 | -webkit-box-direction: normal; 179 | -ms-flex-direction: row; 180 | flex-flow: row; 181 | } 182 | 183 | .grid-1--small>*,.grid-2--small>*,.grid-3--small>*,.grid-4--small>*,.grid-5--small>*,.grid-6--small>*,.grid-7--small>*,.grid-8--small>*,.grid-9--small>*,.grid-10--small>*,.grid-11--small>*,.grid-12--small>*{ 184 | padding: .512rem; 185 | } 186 | 187 | .grid-1--small>*{ 188 | width: 100%; 189 | } 190 | 191 | .grid-2--small>*{ 192 | width: 50%; 193 | } 194 | 195 | .grid-3--small>*{ 196 | width: 33.33333%; 197 | } 198 | 199 | .grid-4--small>*{ 200 | width: 25%; 201 | } 202 | 203 | .grid-5--small>*{ 204 | width: 20%; 205 | } 206 | 207 | .grid-6--small>*{ 208 | width: 16.66666%; 209 | } 210 | 211 | .grid-7--small>*{ 212 | width: 14.28571%; 213 | } 214 | 215 | .grid-8--small>*{ 216 | width: 12.5%; 217 | } 218 | 219 | .grid-9--small>*{ 220 | width: 11.11111%; 221 | } 222 | 223 | .grid-10--small>*{ 224 | width: 10%; 225 | } 226 | 227 | .grid-11--small>*{ 228 | width: 9.09090%; 229 | } 230 | 231 | .grid-12--small>*{ 232 | width: 8.33333%; 233 | } 234 | 235 | } 236 | 237 | 238 | /*******************************GRID COLUMN COUNT REMAINDERS*******************************/ 239 | 240 | .grid-grow>*{ 241 | -webkit-box-flex: 1; 242 | -ms-flex-positive: 1; 243 | flex-grow: 1; 244 | } 245 | 246 | .grid-center{ 247 | -webkit-box-pack: center; 248 | -ms-flex-pack: center; 249 | justify-content: center; 250 | } 251 | 252 | .grid-gapless>*{ 253 | padding: 0 !important; 254 | } -------------------------------------------------------------------------------- /scss/components/_grid-children-layout.scss: -------------------------------------------------------------------------------- 1 | /*******************************GRID LAYOUTS*******************************/ 2 | 3 | .is-1,.is-2,.is-3,.is-4,.is-5,.is-6,.is-7,.is-8,.is-9,.is-10,.is-11,.is-12,.is-25p,.is-50p,.is-75p,.is-33p,.is-66p,.is-100p,.is-75p--large,.is-50p--large,.is-25p--large,.is-66p--large,.is-33p--large,.is-100p--large,.is-1--large,.is-2--large,.is-3--large,.is-4--large,.is-5--large,.is-6--large,.is-7--large,.is-8--large,.is-9--large,.is-10--large,.is-11--large,.is-12--large,.is-75p--medium,.is-50p--medium,.is-25p--medium,.is-66p--medium,.is-33p--medium,.is-100p--medium,.is-1--medium,.is-2--medium,.is-3--medium,.is-4--medium,.is-5--medium,.is-6--medium,.is-7--medium,.is-8--medium,.is-9--medium,.is-10--medium,.is-11--medium,.is-12--medium,.is-75p--small,.is-50p--small,.is-25p--small,.is-66p--small,.is-33p--small,.is-100p--small,.is-1--small,.is-2--small,.is-3--small,.is-4--small,.is-5--small,.is-6--small,.is-7--small,.is-8--small,.is-9--small,.is-10--small,.is-11--small,.is-12--small{ 4 | -webkit-box-flex: 0; 5 | -ms-flex: none; 6 | flex: none; 7 | } 8 | 9 | .is-75p{ 10 | width: 75%; 11 | } 12 | 13 | .is-50p{ 14 | width: 50%; 15 | } 16 | 17 | .is-25p{ 18 | width: 25%; 19 | } 20 | 21 | .is-66p{ 22 | width: 66.66666%; 23 | } 24 | 25 | .is-33p{ 26 | width: 33.33333%; 27 | } 28 | 29 | .is-100p{ 30 | width: 100%; 31 | } 32 | 33 | .is-1{ 34 | width: 8.33333%; 35 | } 36 | 37 | .is-2{ 38 | width: 16.66666%; 39 | } 40 | 41 | .is-3{ 42 | width: 25%; 43 | } 44 | 45 | .is-4{ 46 | width: 33.33333%; 47 | } 48 | 49 | 50 | .is-5{ 51 | width: 41.66666%; 52 | } 53 | 54 | .is-6{ 55 | width: 50%; 56 | } 57 | 58 | .is-7{ 59 | width: 58.33333%; 60 | } 61 | 62 | .is-8{ 63 | width: 66.66666%; 64 | } 65 | 66 | .is-9{ 67 | width: 75%; 68 | } 69 | 70 | .is-10{ 71 | width: 83.33333%; 72 | } 73 | 74 | .is-11{ 75 | width: 91.66666%; 76 | } 77 | 78 | 79 | .is-12{ 80 | width: 100%; 81 | } 82 | 83 | 84 | 85 | 86 | @media (max-width : 768px){ 87 | 88 | .is-1,.is-2,.is-3,.is-4,.is-5,.is-6,.is-7,.is-8,.is-9,.is-10,.is-11,.is-12,.is-25p,.is-50p,.is-75p,.is-33p,.is-66p,.is-100p{ 89 | width: 100%; 90 | } 91 | 92 | } 93 | 94 | 95 | 96 | @media (min-width : 1000px){ 97 | 98 | .is-75p--large{ 99 | width: 75%; 100 | } 101 | 102 | .is-50p--large{ 103 | width: 50%; 104 | } 105 | 106 | .is-25p--large{ 107 | width: 25%; 108 | } 109 | 110 | .is-66p--large{ 111 | width: 66.66666%; 112 | } 113 | 114 | .is-33p--large{ 115 | width: 33.33333%; 116 | } 117 | 118 | .is-100p--large{ 119 | width: 100%; 120 | } 121 | 122 | .is-1--large{ 123 | width: 8.33333%; 124 | } 125 | 126 | .is-2--large{ 127 | width: 16.66666%; 128 | } 129 | 130 | .is-3--large{ 131 | width: 25%; 132 | } 133 | 134 | .is-4--large{ 135 | width: 33.33333%; 136 | } 137 | 138 | 139 | .is-5--large{ 140 | width: 41.66666%; 141 | } 142 | 143 | .is-6--large{ 144 | width: 50%; 145 | } 146 | 147 | .is-7--large{ 148 | width: 58.33333%; 149 | } 150 | 151 | .is-8--large{ 152 | width: 66.66666%; 153 | } 154 | 155 | .is-9--large{ 156 | width: 75%; 157 | } 158 | 159 | .is-10--large{ 160 | width: 83.33333%; 161 | } 162 | 163 | .is-11--large{ 164 | width: 91.66666%; 165 | } 166 | 167 | 168 | .is-12--large{ 169 | width: 100%; 170 | } 171 | 172 | } 173 | 174 | 175 | 176 | @media (max-width : 1000px){ 177 | 178 | .is-75p--medium{ 179 | width: 75%; 180 | } 181 | 182 | .is-50p--medium{ 183 | width: 50%; 184 | } 185 | 186 | .is-25p--medium{ 187 | width: 25%; 188 | } 189 | 190 | .is-66p--medium{ 191 | width: 66.66666%; 192 | } 193 | 194 | .is-33p--medium{ 195 | width: 33.33333%; 196 | } 197 | 198 | .is-100p--medium{ 199 | width: 100%; 200 | } 201 | 202 | .is-1--medium{ 203 | width: 8.33333%; 204 | } 205 | 206 | .is-2--medium{ 207 | width: 16.66666%; 208 | } 209 | 210 | .is-3--medium{ 211 | width: 25%; 212 | } 213 | 214 | .is-4--medium{ 215 | width: 33.33333%; 216 | } 217 | 218 | 219 | .is-5--medium{ 220 | width: 41.66666%; 221 | } 222 | 223 | .is-6--medium{ 224 | width: 50%; 225 | } 226 | 227 | .is-7--medium{ 228 | width: 58.33333%; 229 | } 230 | 231 | .is-8--medium{ 232 | width: 66.66666%; 233 | } 234 | 235 | .is-9--medium{ 236 | width: 75%; 237 | } 238 | 239 | .is-10--medium{ 240 | width: 83.33333%; 241 | } 242 | 243 | .is-11--medium{ 244 | width: 91.66666%; 245 | } 246 | 247 | 248 | .is-12--medium{ 249 | width: 100%; 250 | } 251 | 252 | } 253 | 254 | 255 | @media (max-width : 768px){ 256 | 257 | .is-75p--small{ 258 | width: 75%; 259 | } 260 | 261 | .is-50p--small{ 262 | width: 50%; 263 | } 264 | 265 | .is-25p--small{ 266 | width: 25%; 267 | } 268 | 269 | .is-66p--small{ 270 | width: 66.66666%; 271 | } 272 | 273 | .is-33p--small{ 274 | width: 33.33333%; 275 | } 276 | 277 | .is-100p--small{ 278 | width: 100%; 279 | } 280 | 281 | .is-1--small{ 282 | width: 8.33333%; 283 | } 284 | 285 | .is-2--small{ 286 | width: 16.66666%; 287 | } 288 | 289 | .is-3--small{ 290 | width: 25%; 291 | } 292 | 293 | .is-4--small{ 294 | width: 33.33333%; 295 | } 296 | 297 | 298 | .is-5--small{ 299 | width: 41.66666%; 300 | } 301 | 302 | .is-6--small{ 303 | width: 50%; 304 | } 305 | 306 | .is-7--small{ 307 | width: 58.33333%; 308 | } 309 | 310 | .is-8--small{ 311 | width: 66.66666%; 312 | } 313 | 314 | .is-9--small{ 315 | width: 75%; 316 | } 317 | 318 | .is-10--small{ 319 | width: 83.33333%; 320 | } 321 | 322 | .is-11--small{ 323 | width: 91.66666%; 324 | } 325 | 326 | 327 | .is-12--small{ 328 | width: 100%; 329 | } 330 | 331 | } -------------------------------------------------------------------------------- /css/taffy-0.6.5.min.css: -------------------------------------------------------------------------------- 1 | html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit;padding:0;margin:0}body{padding:0;margin:0}.container{position:relative}@media screen and (min-width: 1000px){.container{margin:0 auto;max-width:960px;width:960px}}@media screen and (min-width: 1192px){.container{max-width:1152px;width:1152px}}@media screen and (min-width: 1384px){.container{max-width:1344px;width:1344px}}.grid{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.grid>*{-ms-flex-preferred-size:100%;flex-basis:100%;padding:.512rem 0}.grid__col{-ms-flex-preferred-size:100%;flex-basis:100%;padding:.512rem 0}@media screen and (min-width: 768px){.grid{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.grid>*{-webkit-box-flex:1;-ms-flex:1;flex:1;padding:.512rem}.grid__col{-webkit-box-flex:1;-ms-flex:1;flex:1;padding:.512rem}}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){.grid{display:block}}@media screen and (-ms-high-contrast: active) and (min-width: 768px), screen and (-ms-high-contrast: none) and (min-width: 768px){.grid{display:flex}.grid_col{display:inline-block}.grid>*{display:inline-block}}.is-1,.is-2,.is-3,.is-4,.is-5,.is-6,.is-7,.is-8,.is-9,.is-10,.is-11,.is-12,.is-25p,.is-50p,.is-75p,.is-33p,.is-66p,.is-100p,.is-75p--large,.is-50p--large,.is-25p--large,.is-66p--large,.is-33p--large,.is-100p--large,.is-1--large,.is-2--large,.is-3--large,.is-4--large,.is-5--large,.is-6--large,.is-7--large,.is-8--large,.is-9--large,.is-10--large,.is-11--large,.is-12--large,.is-75p--medium,.is-50p--medium,.is-25p--medium,.is-66p--medium,.is-33p--medium,.is-100p--medium,.is-1--medium,.is-2--medium,.is-3--medium,.is-4--medium,.is-5--medium,.is-6--medium,.is-7--medium,.is-8--medium,.is-9--medium,.is-10--medium,.is-11--medium,.is-12--medium,.is-75p--small,.is-50p--small,.is-25p--small,.is-66p--small,.is-33p--small,.is-100p--small,.is-1--small,.is-2--small,.is-3--small,.is-4--small,.is-5--small,.is-6--small,.is-7--small,.is-8--small,.is-9--small,.is-10--small,.is-11--small,.is-12--small{-webkit-box-flex:0;-ms-flex:none;flex:none}.is-75p{width:75%}.is-50p{width:50%}.is-25p{width:25%}.is-66p{width:66.66666%}.is-33p{width:33.33333%}.is-100p{width:100%}.is-1{width:8.33333%}.is-2{width:16.66666%}.is-3{width:25%}.is-4{width:33.33333%}.is-5{width:41.66666%}.is-6{width:50%}.is-7{width:58.33333%}.is-8{width:66.66666%}.is-9{width:75%}.is-10{width:83.33333%}.is-11{width:91.66666%}.is-12{width:100%}@media (max-width: 768px){.is-1,.is-2,.is-3,.is-4,.is-5,.is-6,.is-7,.is-8,.is-9,.is-10,.is-11,.is-12,.is-25p,.is-50p,.is-75p,.is-33p,.is-66p,.is-100p{width:100%}}@media (min-width: 1000px){.is-75p--large{width:75%}.is-50p--large{width:50%}.is-25p--large{width:25%}.is-66p--large{width:66.66666%}.is-33p--large{width:33.33333%}.is-100p--large{width:100%}.is-1--large{width:8.33333%}.is-2--large{width:16.66666%}.is-3--large{width:25%}.is-4--large{width:33.33333%}.is-5--large{width:41.66666%}.is-6--large{width:50%}.is-7--large{width:58.33333%}.is-8--large{width:66.66666%}.is-9--large{width:75%}.is-10--large{width:83.33333%}.is-11--large{width:91.66666%}.is-12--large{width:100%}}@media (max-width: 1000px){.is-75p--medium{width:75%}.is-50p--medium{width:50%}.is-25p--medium{width:25%}.is-66p--medium{width:66.66666%}.is-33p--medium{width:33.33333%}.is-100p--medium{width:100%}.is-1--medium{width:8.33333%}.is-2--medium{width:16.66666%}.is-3--medium{width:25%}.is-4--medium{width:33.33333%}.is-5--medium{width:41.66666%}.is-6--medium{width:50%}.is-7--medium{width:58.33333%}.is-8--medium{width:66.66666%}.is-9--medium{width:75%}.is-10--medium{width:83.33333%}.is-11--medium{width:91.66666%}.is-12--medium{width:100%}}@media (max-width: 768px){.is-75p--small{width:75%}.is-50p--small{width:50%}.is-25p--small{width:25%}.is-66p--small{width:66.66666%}.is-33p--small{width:33.33333%}.is-100p--small{width:100%}.is-1--small{width:8.33333%}.is-2--small{width:16.66666%}.is-3--small{width:25%}.is-4--small{width:33.33333%}.is-5--small{width:41.66666%}.is-6--small{width:50%}.is-7--small{width:58.33333%}.is-8--small{width:66.66666%}.is-9--small{width:75%}.is-10--small{width:83.33333%}.is-11--small{width:91.66666%}.is-12--small{width:100%}}.grid-1>*,.grid-2>*,.grid-3>*,.grid-4>*,.grid-5>*,.grid-6>*,.grid-7>*,.grid-8>*,.grid-9>*,.grid-10>*,.grid-11>*,.grid-12>*,.grid-1--large>*,.grid-2--large>*,.grid-3--large>*,.grid-4--large>*,.grid-5--large>*,.grid-6--large>*,.grid-7--large>*,.grid-8--large>*,.grid-9--large>*,.grid-10--large>*,.grid-11--large>*,.grid-12--large>*,.grid-1--medium>*,.grid-2--medium>*,.grid-3--medium>*,.grid-4--medium>*,.grid-5--medium>*,.grid-6--medium>*,.grid-7--medium>*,.grid-8--medium>*,.grid-9--medium>*,.grid-10--medium>*,.grid-11--medium>*,.grid-12--medium>*,.grid-1--small>*,.grid-2--small>*,.grid-3--small>*,.grid-4--small>*,.grid-5--small>*,.grid-6--small>*,.grid-7--small>*,.grid-8--small>*,.grid-9--small>*,.grid-10--small>*,.grid-11--small>*,.grid-12--small>*{-webkit-box-flex:0;-ms-flex:none;flex:none}.grid-1>*{width:100%}.grid-2>*{width:50%}.grid-3>*{width:33.33333%}.grid-4>*{width:25%}.grid-5>*{width:20%}.grid-6>*{width:16.66666%}.grid-7>*{width:14.28571%}.grid-8>*{width:12.5%}.grid-9>*{width:11.11111%}.grid-10>*{width:10%}.grid-11>*{width:9.09090%}.grid-12>*{width:8.33333%}@media (max-width: 768px){.grid-1>*,.grid-2>*,.grid-3>*,.grid-4>*,.grid-5>*,.grid-6>*,.grid-7>*,.grid-8>*,.grid-9>*,.grid-10>*,.grid-11>*,.grid-12>*{width:100%}}@media (min-width: 1000px){.grid-1--large>*{width:100%}.grid-2--large>*{width:50%}.grid-3--large>*{width:33.33333%}.grid-4--large>*{width:25%}.grid-5--large>*{width:20%}.grid-6--large>*{width:16.66666%}.grid-7--large>*{width:14.28571%}.grid-8--large>*{width:12.5%}.grid-9--large>*{width:11.11111%}.grid-10--large>*{width:10%}.grid-11--large>*{width:9.09090%}.grid-12>*{width:8.33333%}}@media (max-width: 1000px){.grid-1--medium>*{width:100%}.grid-2--medium>*{width:50%}.grid-3--medium>*{width:33.33333%}.grid-4--medium>*{width:25%}.grid-5--medium>*{width:20%}.grid-6--medium>*{width:16.66666%}.grid-7--medium>*{width:14.28571%}.grid-8--medium>*{width:12.5%}.grid-9--medium>*{width:11.11111%}.grid-10--medium>*{width:10%}.grid-11--medium>*{width:9.09090%}.grid-12--medium>*{width:8.33333%}}@media (max-width: 768px){.grid-1--small,.grid-2--small,.grid-3--small,.grid-4--small,.grid-5--small,.grid-6--small,.grid-7--small,.grid-8--small,.grid-9--small,.grid-10--small,.grid-11--small,.grid-12--small{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-flow:row}.grid-1--small>*,.grid-2--small>*,.grid-3--small>*,.grid-4--small>*,.grid-5--small>*,.grid-6--small>*,.grid-7--small>*,.grid-8--small>*,.grid-9--small>*,.grid-10--small>*,.grid-11--small>*,.grid-12--small>*{padding:.512rem}.grid-1--small>*{width:100%}.grid-2--small>*{width:50%}.grid-3--small>*{width:33.33333%}.grid-4--small>*{width:25%}.grid-5--small>*{width:20%}.grid-6--small>*{width:16.66666%}.grid-7--small>*{width:14.28571%}.grid-8--small>*{width:12.5%}.grid-9--small>*{width:11.11111%}.grid-10--small>*{width:10%}.grid-11--small>*{width:9.09090%}.grid-12--small>*{width:8.33333%}}.grid-grow>*{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.grid-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.grid-gapless>*{padding:0 !important}.is-75p--offset{margin-left:75%}.is-50p--offset{margin-left:50%}.is-25p--offset{margin-left:25%}.is-66p--offset{margin-left:66.66666%}.is-33p--offset{margin-left:33.33333%}.is-100p--offset{margin-left:100%}.is-1--offset{margin-left:8.33333%}.is-2--offset{margin-left:16.66666%}.is-3--offset{margin-left:25%}.is-4--offset{margin-left:33.33333%}.is-5--offset{margin-left:41.66666%}.is-6--offset{margin-left:50%}.is-7--offset{margin-left:58.33333%}.is-8--offset{margin-left:66.66666%}.is-9--offset{margin-left:75%}.is-10--offset{margin-left:83.33333%}.is-11--offset{margin-left:91.66666%}.is-12--offset{margin-left:100%}html{font-size:16px}@media screen and (min-width: 320px){.html{font-size:calc($text-base-min + ($text-base-max - $text-base-min) * (100vw - $text-min-width) / ($text-max-width - $text-min-width))}}@media (min-width: 1000px){html{font-size:22px}}body{background-color:white;font-weight:400;line-height:1.45;color:#333}p{margin:.6em 0}h1,h2,h3,h4{font-weight:inherit;line-height:1.2;margin:.512em 0}h1{margin-top:0;font-size:2.441em}h2{font-size:1.953em}h3{font-size:1.563em}h4{font-size:1.25em}small,.font_small{font-size:0.8em}.btn,.btn--ghost,.btn--sharp,.btn--ghost--sharp{-moz-appearance:none;-webkit-appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-shadow:none;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:2.25em;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;line-height:1.5;padding-bottom:calc(0.375em - 1px);padding-left:calc(0.625em - 1px);padding-right:calc(0.625em - 1px);padding-top:calc(0.375em - 1px);position:relative;vertical-align:top;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#363636;cursor:pointer;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding-left:0.75em;padding-right:0.75em;text-align:center;white-space:nowrap;text-decoration:none;font-size:1em}.btn{background-color:gainsboro;border:none;border-radius:3px}.btn--ghost{border:solid 2px gainsboro;background-color:transparent;border-radius:3px}.btn--sharp{background-color:gainsboro;border-radius:0;border:none}.btn--ghost--sharp{border:solid 2px gainsboro;background-color:transparent;border-radius:0}input:not([type=submit]):not([type=button]),textarea,select{-moz-appearance:none;-webkit-appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:1px solid transparent;border-radius:3px;box-shadow:none;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;height:2.25em;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;line-height:1.5;padding-bottom:calc(0.375em - 1px);padding-left:calc(0.625em - 1px);padding-right:calc(0.625em - 1px);padding-top:calc(0.375em - 1px);position:relative;vertical-align:top;background-color:white;border-color:#dbdbdb;color:#363636;box-shadow:inset 0 1px 2px rgba(10,10,10,0.1);max-width:100%;width:100%;margin-bottom:.5rem}textarea{display:block;max-height:600px;max-width:100%;min-height:150px;min-width:100%;padding:0.625em;resize:vertical}label{display:block;max-width:100%;margin-bottom:.5rem}table{border-collapse:collapse;border-spacing:0;width:100%;max-width:100%}thead th{border-bottom:2px solid #cfcfcf}tfoot th{border-top:2px solid #cfcfcf}td,th{text-align:left;padding:.5rem}td{border-bottom:1px solid #cfcfcf}.table-striped tbody tr:nth-child(2n){background-color:#ededed}.table-bordered{border:solid 1px #cfcfcf}.table-highlight tr:hover:not(.table-selected){background-color:#d2d2d2 !important}table .table-selected{background-color:#ffff83 !important}.media{max-width:100%;height:auto}.media--embed{position:relative;padding-bottom:56.25%;padding-top:25px;height:0}.media--embed iframe{position:absolute;top:0;left:0;width:100%;height:100%}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-justify{text-align:justify}.text-lowercase{text-transform:lowercase}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.text-normal{font-weight:normal}.text-bold{font-weight:bold}.text-italic{font-style:italic}.vertically-center{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center}.float-left{float:left}.float-right{float:right}.no-margin{margin:0 !important}.no-padding{margin:0 !important}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.show{display:block !important}.hide{display:none !important}.screen-reader{border:0;clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal}.content-buffer{padding:40px 0}@media (max-width: 600px){.content-buffer{padding:20px 3%}} 2 | -------------------------------------------------------------------------------- /scss/components/_grid-layout.scss: -------------------------------------------------------------------------------- 1 | /*******************************GRID LAYOUTS*******************************/ 2 | 3 | .is-1,.is-2,.is-3,.is-4,.is-5,.is-6,.is-7,.is-8,.is-9,.is-10,.is-11,.is-12,.is-25p,.is-50p,.is-75p,.is-33p,.is-66p,.is-100p,.is-75p--large,.is-50p--large,.is-25p--large,.is-66p--large,.is-33p--large,.is-100p--large,.is-1--large,.is-2--large,.is-3--large,.is-4--large,.is-5--large,.is-6--large,.is-7--large,.is-8--large,.is-9--large,.is-10--large,.is-11--large,.is-12--large,.is-75p--medium,.is-50p--medium,.is-25p--medium,.is-66p--medium,.is-33p--medium,.is-100p--medium,.is-1--medium,.is-2--medium,.is-3--medium,.is-4--medium,.is-5--medium,.is-6--medium,.is-7--medium,.is-8--medium,.is-9--medium,.is-10--medium,.is-11--medium,.is-12--medium,.is-75p--small,.is-50p--small,.is-25p--small,.is-66p--small,.is-33p--small,.is-100p--small,.is-1--small,.is-2--small,.is-3--small,.is-4--small,.is-5--small,.is-6--small,.is-7--small,.is-8--small,.is-9--small,.is-10--small,.is-11--small,.is-12--small{ 4 | -webkit-box-flex: 0; 5 | -ms-flex: none; 6 | flex: none; 7 | } 8 | 9 | .is-75p{ 10 | width: calc(75% - (2*.512rem)); 11 | } 12 | 13 | .is-50p{ 14 | width: calc(50% - (2*.512rem)); 15 | } 16 | 17 | .is-25p{ 18 | width: calc(25% - (2*.512rem)); 19 | } 20 | 21 | .is-66p{ 22 | width: calc(66.66666% - (2*.512rem)); 23 | } 24 | 25 | .is-33p{ 26 | width: calc(33.33333% - (2*.512rem)); 27 | } 28 | 29 | .is-100p{ 30 | width: calc(100% - (2*.512rem)); 31 | } 32 | 33 | .is-1{ 34 | width: calc(8.33333% - (2*.512rem)); 35 | } 36 | 37 | .is-2{ 38 | width: calc(16.66666% - (2*.512rem)); 39 | } 40 | 41 | .is-3{ 42 | width: calc(25% - (2*.512rem)); 43 | } 44 | 45 | .is-4{ 46 | width: calc(33.33333% - (2*.512rem)); 47 | } 48 | 49 | 50 | .is-5{ 51 | width: calc(41.66666% - (2*.512rem)); 52 | } 53 | 54 | .is-6{ 55 | width: calc(50% - (2*.512rem)); 56 | } 57 | 58 | .is-7{ 59 | width: calc(58.33333% - (2*.512rem)); 60 | } 61 | 62 | .is-8{ 63 | width: calc(66.66666% - (2*.512rem)); 64 | } 65 | 66 | .is-9{ 67 | width: calc(75% - (2*.512rem)); 68 | } 69 | 70 | .is-10{ 71 | width: calc(83.33333% - (2*.512rem)); 72 | } 73 | 74 | .is-11{ 75 | width: calc(91.66666% - (2*.512rem)); 76 | } 77 | 78 | 79 | .is-12{ 80 | width: calc(100% - (2*.512rem)); 81 | } 82 | 83 | 84 | 85 | 86 | @media (max-width : 768px){ 87 | 88 | .is-1,.is-2,.is-3,.is-4,.is-5,.is-6,.is-7,.is-8,.is-9,.is-10,.is-11,.is-12,.is-25p,.is-50p,.is-75p,.is-33p,.is-66p,.is-100p{ 89 | width: 100%; 90 | } 91 | 92 | } 93 | 94 | 95 | 96 | @media (min-width : 1000px){ 97 | 98 | .is-75p--large{ 99 | width: calc(75% - (2*.512rem)); 100 | } 101 | 102 | .is-50p--large{ 103 | width: calc(50% - (2*.512rem)); 104 | } 105 | 106 | .is-25p--large{ 107 | width: calc(25% - (2*.512rem)); 108 | } 109 | 110 | .is-66p--large{ 111 | width: calc(66.66666% - (2*.512rem)); 112 | } 113 | 114 | .is-33p--large{ 115 | width: calc(33.33333% - (2*.512rem)); 116 | } 117 | 118 | .is-100p--large{ 119 | width: calc(100% - (2*.512rem)); 120 | } 121 | 122 | .is-1--large{ 123 | width: calc(8.33333% - (2*.512rem)); 124 | } 125 | 126 | .is-2--large{ 127 | width: calc(16.66666% - (2*.512rem)); 128 | } 129 | 130 | .is-3--large{ 131 | width: calc(25% - (2*.512rem)); 132 | } 133 | 134 | .is-4--large{ 135 | width: calc(33.33333% - (2*.512rem)); 136 | } 137 | 138 | 139 | .is-5--large{ 140 | width: calc(41.66666% - (2*.512rem)); 141 | } 142 | 143 | .is-6--large{ 144 | width: calc(50% - (2*.512rem)); 145 | } 146 | 147 | .is-7--large{ 148 | width: calc(58.33333% - (2*.512rem)); 149 | } 150 | 151 | .is-8--large{ 152 | width: calc(66.66666% - (2*.512rem)); 153 | } 154 | 155 | .is-9--large{ 156 | width: calc(75% - (2*.512rem)); 157 | } 158 | 159 | .is-10--large{ 160 | width: calc(83.33333% - (2*.512rem)); 161 | } 162 | 163 | .is-11--large{ 164 | width: calc(91.66666% - (2*.512rem)); 165 | } 166 | 167 | 168 | .is-12--large{ 169 | width: calc(100% - (2*.512rem)); 170 | } 171 | 172 | } 173 | 174 | 175 | 176 | @media (max-width : 1000px){ 177 | 178 | .is-75p--medium{ 179 | width: calc(75% - (2*.512rem)); 180 | } 181 | 182 | .is-50p--medium{ 183 | width: calc(50% - (2*.512rem)); 184 | } 185 | 186 | .is-25p--medium{ 187 | width: calc(25% - (2*.512rem)); 188 | } 189 | 190 | .is-66p--medium{ 191 | width: calc(66.66666% - (2*.512rem)); 192 | } 193 | 194 | .is-33p--medium{ 195 | width: calc(33.33333% - (2*.512rem)); 196 | } 197 | 198 | .is-100p--medium{ 199 | width: calc(100% - (2*.512rem)); 200 | } 201 | 202 | .is-1--medium{ 203 | width: calc(8.33333% - (2*.512rem)); 204 | } 205 | 206 | .is-2--medium{ 207 | width: calc(16.66666% - (2*.512rem)); 208 | } 209 | 210 | .is-3--medium{ 211 | width: calc(25% - (2*.512rem)); 212 | } 213 | 214 | .is-4--medium{ 215 | width: calc(33.33333% - (2*.512rem)); 216 | } 217 | 218 | 219 | .is-5--medium{ 220 | width: calc(41.66666% - (2*.512rem)); 221 | } 222 | 223 | .is-6--medium{ 224 | width: calc(50% - (2*.512rem)); 225 | } 226 | 227 | .is-7--medium{ 228 | width: calc(58.33333% - (2*.512rem)); 229 | } 230 | 231 | .is-8--medium{ 232 | width: calc(66.66666% - (2*.512rem)); 233 | } 234 | 235 | .is-9--medium{ 236 | width: calc(75% - (2*.512rem)); 237 | } 238 | 239 | .is-10--medium{ 240 | width: calc(83.33333% - (2*.512rem)); 241 | } 242 | 243 | .is-11--medium{ 244 | width: calc(91.66666% - (2*.512rem)); 245 | } 246 | 247 | 248 | .is-12--medium{ 249 | width: calc(100% - (2*.512rem)); 250 | } 251 | 252 | } 253 | 254 | 255 | @media (max-width : 768px){ 256 | 257 | .is-75p--small{ 258 | width: calc(75% - (2*.512rem)); 259 | } 260 | 261 | .is-50p--small{ 262 | width: calc(50% - (2*.512rem)); 263 | } 264 | 265 | .is-25p--small{ 266 | width: calc(25% - (2*.512rem)); 267 | } 268 | 269 | .is-66p--small{ 270 | width: calc(66.66666% - (2*.512rem)); 271 | } 272 | 273 | .is-33p--small{ 274 | width: calc(33.33333% - (2*.512rem)); 275 | } 276 | 277 | .is-100p--small{ 278 | width: calc(100% - (2*.512rem)); 279 | } 280 | 281 | .is-1--small{ 282 | width: calc(8.33333% - (2*.512rem)); 283 | } 284 | 285 | .is-2--small{ 286 | width: calc(16.66666% - (2*.512rem)); 287 | } 288 | 289 | .is-3--small{ 290 | width: calc(25% - (2*.512rem)); 291 | } 292 | 293 | .is-4--small{ 294 | width: calc(33.33333% - (2*.512rem)); 295 | } 296 | 297 | 298 | .is-5--small{ 299 | width: calc(41.66666% - (2*.512rem)); 300 | } 301 | 302 | .is-6--small{ 303 | width: calc(50% - (2*.512rem)); 304 | } 305 | 306 | .is-7--small{ 307 | width: calc(58.33333% - (2*.512rem)); 308 | } 309 | 310 | .is-8--small{ 311 | width: calc(66.66666% - (2*.512rem)); 312 | } 313 | 314 | .is-9--small{ 315 | width: calc(75% - (2*.512rem)); 316 | } 317 | 318 | .is-10--small{ 319 | width: calc(83.33333% - (2*.512rem)); 320 | } 321 | 322 | .is-11--small{ 323 | width: calc(91.66666% - (2*.512rem)); 324 | } 325 | 326 | 327 | .is-12--small{ 328 | width: calc(100% - (2*.512rem)); 329 | } 330 | 331 | } 332 | 333 | /*******************************GRID COLUMN COUNT*******************************/ 334 | 335 | .grid-1>*,.grid-2>*,.grid-3>*,.grid-4>*,.grid-5>*,.grid-6>*,.grid-7>*,.grid-8>*,.grid-9>*,.grid-10>*,.grid-11>*,.grid-12>*,.grid-1--large>*,.grid-2--large>*,.grid-3--large>*,.grid-4--large>*,.grid-5--large>*,.grid-6--large>*,.grid-7--large>*,.grid-8--large>*,.grid-9--large>*,.grid-10--large>*,.grid-11--large>*,.grid-12--large>*,.grid-1--medium>*,.grid-2--medium>*,.grid-3--medium>*,.grid-4--medium>*,.grid-5--medium>*,.grid-6--medium>*,.grid-7--medium>*,.grid-8--medium>*,.grid-9--medium>*,.grid-10--medium>*,.grid-11--medium>*,.grid-12--medium>*,.grid-1--small>*,.grid-2--small>*,.grid-3--small>*,.grid-4--small>*,.grid-5--small>*,.grid-6--small>*,.grid-7--small>*,.grid-8--small>*,.grid-9--small>*,.grid-10--small>*,.grid-11--small>*,.grid-12--small>*{ 336 | flex: none; 337 | } 338 | 339 | .grid-1>*{ 340 | width: calc(100% - (2*.512rem)); 341 | } 342 | 343 | .grid-2>*{ 344 | width: calc(50% - (2*.512rem)); 345 | } 346 | 347 | .grid-3>*{ 348 | width: calc(33.33333% - (2*.512rem)); 349 | } 350 | 351 | .grid-4>*{ 352 | width: calc(25% - (2*.512rem)); 353 | } 354 | 355 | .grid-5>*{ 356 | width: calc(20% - (2*.512rem)); 357 | } 358 | 359 | .grid-6>*{ 360 | width: calc(16.66666% - (2*.512rem)); 361 | } 362 | 363 | .grid-7>*{ 364 | width: calc(14.28571% - (2*.512rem)); 365 | } 366 | 367 | .grid-8>*{ 368 | width: calc(12.5% - (2*.512rem)); 369 | } 370 | 371 | .grid-9>*{ 372 | width: calc(11.11111% - (2*.512rem)); 373 | } 374 | 375 | .grid-10>*{ 376 | width: calc(10% - (2*.512rem)); 377 | } 378 | 379 | .grid-11>*{ 380 | width: calc(9.09090% - (2*.512rem)); 381 | } 382 | 383 | .grid-12>*{ 384 | width: calc(8.33333% - (2*.512rem)); 385 | } 386 | 387 | 388 | @media (max-width : 768px){ 389 | 390 | .grid-1>*,.grid-2>*,.grid-3>*,.grid-4>*,.grid-5>*,.grid-6>*,.grid-7>*,.grid-8>*,.grid-9>*,.grid-10>*,.grid-11>*,.grid-12>*{ 391 | width: 100%; 392 | } 393 | 394 | } 395 | 396 | 397 | 398 | @media (min-width : 1000px){ 399 | 400 | .grid-1--large>*{ 401 | width: calc(100% - (2*.512rem)); 402 | } 403 | 404 | .grid-2--large>*{ 405 | width: calc(50% - (2*.512rem)); 406 | } 407 | 408 | .grid-3--large>*{ 409 | width: calc(33.33333% - (2*.512rem)); 410 | } 411 | 412 | .grid-4--large>*{ 413 | width: calc(25% - (2*.512rem)); 414 | } 415 | 416 | .grid-5--large>*{ 417 | width: calc(20% - (2*.512rem)); 418 | } 419 | 420 | .grid-6--large>*{ 421 | width: calc(16.66666% - (2*.512rem)); 422 | } 423 | 424 | .grid-7--large>*{ 425 | width: calc(14.28571% - (2*.512rem)); 426 | } 427 | 428 | .grid-8--large>*{ 429 | width: calc(12.5% - (2*.512rem)); 430 | } 431 | 432 | .grid-9--large>*{ 433 | width: calc(11.11111% - (2*.512rem)); 434 | } 435 | 436 | .grid-10--large>*{ 437 | width: calc(10% - (2*.512rem)); 438 | } 439 | 440 | .grid-11--large>*{ 441 | width: calc(9.09090% - (2*.512rem)); 442 | } 443 | 444 | .grid-12--large>*{ 445 | width: calc(8.33333% - (2*.512rem)); 446 | } 447 | 448 | } 449 | 450 | 451 | @media (max-width : 1000px){ 452 | 453 | .grid-1--medium>*{ 454 | width: calc(100% - (2*.512rem)); 455 | } 456 | 457 | .grid-2--medium>*{ 458 | width: calc(50% - (2*.512rem)); 459 | } 460 | 461 | .grid-3--medium>*{ 462 | width: calc(33.33333% - (2*.512rem)); 463 | } 464 | 465 | .grid-4--medium>*{ 466 | width: calc(25% - (2*.512rem)); 467 | } 468 | 469 | .grid-5--medium>*{ 470 | width: calc(20% - (2*.512rem)); 471 | } 472 | 473 | .grid-6--medium>*{ 474 | width: calc(16.66666% - (2*.512rem)); 475 | } 476 | 477 | .grid-7--medium>*{ 478 | width: calc(14.28571% - (2*.512rem)); 479 | } 480 | 481 | .grid-8--medium>*{ 482 | width: calc(12.5% - (2*.512rem)); 483 | } 484 | 485 | .grid-9--medium>*{ 486 | width: calc(11.11111% - (2*.512rem)); 487 | } 488 | 489 | .grid-10--medium>*{ 490 | width: calc(10% - (2*.512rem)); 491 | } 492 | 493 | .grid-11--medium>*{ 494 | width: calc(9.09090% - (2*.512rem)); 495 | } 496 | 497 | .grid-12--medium>*{ 498 | width: calc(8.33333% - (2*.512rem)); 499 | } 500 | 501 | } 502 | 503 | 504 | @media (max-width : 768px){ 505 | 506 | .grid-1--small>*{ 507 | width: calc(100% - (2*.512rem)); 508 | } 509 | 510 | .grid-2--small>*{ 511 | width: calc(50% - (2*.512rem)); 512 | } 513 | 514 | .grid-3--small>*{ 515 | width: calc(33.33333% - (2*.512rem)); 516 | } 517 | 518 | .grid-4--small>*{ 519 | width: calc(25% - (2*.512rem)); 520 | } 521 | 522 | .grid-5--small>*{ 523 | width: calc(20% - (2*.512rem)); 524 | } 525 | 526 | .grid-6--small>*{ 527 | width: calc(16.66666% - (2*.512rem)); 528 | } 529 | 530 | .grid-7--small>*{ 531 | width: calc(14.28571% - (2*.512rem)); 532 | } 533 | 534 | .grid-8--small>*{ 535 | width: calc(12.5% - (2*.512rem)); 536 | } 537 | 538 | .grid-9--small>*{ 539 | width: calc(11.11111% - (2*.512rem)); 540 | } 541 | 542 | .grid-10--small>*{ 543 | width: calc(10% - (2*.512rem)); 544 | } 545 | 546 | .grid-11--small>*{ 547 | width: calc(9.09090% - (2*.512rem)); 548 | } 549 | 550 | .grid-12--small>*{ 551 | width: calc(8.33333% - (2*.512rem)); 552 | } 553 | 554 | } 555 | 556 | 557 | /*******************************GRID COLUMN COUNT REMAINDERS*******************************/ 558 | 559 | .grid-grow>*{ 560 | flex-grow: 1; 561 | } 562 | 563 | .grid-center{ 564 | justify-content: center; 565 | } -------------------------------------------------------------------------------- /css/taffy-0.6.5.css: -------------------------------------------------------------------------------- 1 | /*******************************GENERAL*******************************/ 2 | 3 | html { 4 | box-sizing: border-box; 5 | } 6 | 7 | *, 8 | *:before, 9 | *:after { 10 | box-sizing: inherit; 11 | padding: 0; 12 | margin: 0; 13 | } 14 | 15 | body{ 16 | padding: 0; 17 | margin: 0; 18 | } 19 | 20 | /*******************************TYPOGRAPHY*******************************/ 21 | 22 | html { 23 | font-size: 16px; 24 | } 25 | 26 | @media screen and (min-width: 320px) { 27 | html{ 28 | font-size: calc(16px + 6 * ((100vw - 320px) / 680)); 29 | } 30 | } 31 | 32 | @media (min-width: 1000px) { 33 | html{ 34 | font-size: 22px; 35 | } 36 | } 37 | 38 | 39 | 40 | body { 41 | background-color: white; 42 | font-weight: 400; 43 | line-height: 1.45; 44 | color: #333; 45 | } 46 | 47 | p { 48 | margin: .6em 0; 49 | } 50 | 51 | h1, h2, h3, h4 { 52 | font-weight: inherit; 53 | line-height: 1.2; 54 | margin: .512em 0; 55 | } 56 | 57 | h1 { 58 | margin-top: 0; 59 | font-size: 2.441em; 60 | } 61 | 62 | h2 {font-size: 1.953em;} 63 | 64 | h3 {font-size: 1.563em;} 65 | 66 | h4 {font-size: 1.25em;} 67 | 68 | small, .font_small {font-size: 0.8em;} 69 | 70 | 71 | 72 | /*******************************CONTAINER*******************************/ 73 | .container { 74 | position: relative; 75 | } 76 | 77 | @media screen and (min-width: 1000px) { 78 | .container { 79 | margin: 0 auto; 80 | max-width: 960px; 81 | width: 960px; 82 | } 83 | 84 | } 85 | 86 | @media screen and (min-width: 1192px) { 87 | .container { 88 | max-width: 1152px; 89 | width: 1152px; 90 | } 91 | } 92 | 93 | @media screen and (min-width: 1384px) { 94 | .container { 95 | max-width: 1344px; 96 | width: 1344px; 97 | } 98 | } 99 | 100 | /*******************************GRID & COLUMNS*******************************/ 101 | 102 | .grid{ 103 | display: -webkit-box; 104 | display: -ms-flexbox; 105 | display: flex; 106 | -ms-flex-wrap: wrap; 107 | flex-wrap: wrap; 108 | -webkit-box-orient: vertical; 109 | -webkit-box-direction: normal; 110 | -ms-flex-direction: column; 111 | flex-direction: column; 112 | } 113 | 114 | 115 | .grid>*{ 116 | -ms-flex-preferred-size: 100%; 117 | flex-basis: 100%; 118 | padding: .512rem 0; 119 | } 120 | 121 | 122 | .grid__col{ 123 | -ms-flex-preferred-size: 100%; 124 | flex-basis: 100%; 125 | padding: .512rem 0; 126 | } 127 | 128 | 129 | /*This gets applied when the device width is above 768px*/ 130 | @media screen and (min-width: 768px){ 131 | .grid { 132 | -webkit-box-orient: horizontal; 133 | -webkit-box-direction: normal; 134 | -ms-flex-direction: row; 135 | flex-direction: row; 136 | } 137 | .grid>*{ 138 | -webkit-box-flex: 1; 139 | -ms-flex: 1; 140 | flex: 1; 141 | padding: .512rem; 142 | } 143 | .grid__col{ 144 | -webkit-box-flex: 1; 145 | -ms-flex: 1; 146 | flex: 1; 147 | padding: .512rem; 148 | } 149 | 150 | } 151 | 152 | 153 | 154 | /*GRID COMPATIBILITY IE10+*/ 155 | @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 156 | .grid { display:block;} 157 | 158 | /*This gets applied when the device width is above 768px*/ 159 | @media screen and (min-width: 768px){ 160 | .grid{display: flex} 161 | .grid_col{display: inline-block;} 162 | .grid>*{display: inline-block;} 163 | } 164 | } 165 | 166 | 167 | 168 | /*******************************GRID LAYOUTS*******************************/ 169 | 170 | .is-1,.is-2,.is-3,.is-4,.is-5,.is-6,.is-7,.is-8,.is-9,.is-10,.is-11,.is-12,.is-25p,.is-50p,.is-75p,.is-33p,.is-66p,.is-100p,.is-75p--large,.is-50p--large,.is-25p--large,.is-66p--large,.is-33p--large,.is-100p--large,.is-1--large,.is-2--large,.is-3--large,.is-4--large,.is-5--large,.is-6--large,.is-7--large,.is-8--large,.is-9--large,.is-10--large,.is-11--large,.is-12--large,.is-75p--medium,.is-50p--medium,.is-25p--medium,.is-66p--medium,.is-33p--medium,.is-100p--medium,.is-1--medium,.is-2--medium,.is-3--medium,.is-4--medium,.is-5--medium,.is-6--medium,.is-7--medium,.is-8--medium,.is-9--medium,.is-10--medium,.is-11--medium,.is-12--medium,.is-75p--small,.is-50p--small,.is-25p--small,.is-66p--small,.is-33p--small,.is-100p--small,.is-1--small,.is-2--small,.is-3--small,.is-4--small,.is-5--small,.is-6--small,.is-7--small,.is-8--small,.is-9--small,.is-10--small,.is-11--small,.is-12--small{ 171 | -webkit-box-flex: 0; 172 | -ms-flex: none; 173 | flex: none; 174 | } 175 | 176 | .is-75p{ 177 | width: 75%; 178 | } 179 | 180 | .is-50p{ 181 | width: 50%; 182 | } 183 | 184 | .is-25p{ 185 | width: 25%; 186 | } 187 | 188 | .is-66p{ 189 | width: 66.66666%; 190 | } 191 | 192 | .is-33p{ 193 | width: 33.33333%; 194 | } 195 | 196 | .is-100p{ 197 | width: 100%; 198 | } 199 | 200 | .is-1{ 201 | width: 8.33333%; 202 | } 203 | 204 | .is-2{ 205 | width: 16.66666%; 206 | } 207 | 208 | .is-3{ 209 | width: 25%; 210 | } 211 | 212 | .is-4{ 213 | width: 33.33333%; 214 | } 215 | 216 | 217 | .is-5{ 218 | width: 41.66666%; 219 | } 220 | 221 | .is-6{ 222 | width: 50%; 223 | } 224 | 225 | .is-7{ 226 | width: 58.33333%; 227 | } 228 | 229 | .is-8{ 230 | width: 66.66666%; 231 | } 232 | 233 | .is-9{ 234 | width: 75%; 235 | } 236 | 237 | .is-10{ 238 | width: 83.33333%; 239 | } 240 | 241 | .is-11{ 242 | width: 91.66666%; 243 | } 244 | 245 | 246 | .is-12{ 247 | width: 100%; 248 | } 249 | 250 | 251 | 252 | 253 | @media (max-width : 768px){ 254 | 255 | .is-1,.is-2,.is-3,.is-4,.is-5,.is-6,.is-7,.is-8,.is-9,.is-10,.is-11,.is-12,.is-25p,.is-50p,.is-75p,.is-33p,.is-66p,.is-100p{ 256 | width: 100%; 257 | } 258 | 259 | } 260 | 261 | 262 | 263 | @media (min-width : 1000px){ 264 | 265 | .is-75p--large{ 266 | width: 75%; 267 | } 268 | 269 | .is-50p--large{ 270 | width: 50%; 271 | } 272 | 273 | .is-25p--large{ 274 | width: 25%; 275 | } 276 | 277 | .is-66p--large{ 278 | width: 66.66666%; 279 | } 280 | 281 | .is-33p--large{ 282 | width: 33.33333%; 283 | } 284 | 285 | .is-100p--large{ 286 | width: 100%; 287 | } 288 | 289 | .is-1--large{ 290 | width: 8.33333%; 291 | } 292 | 293 | .is-2--large{ 294 | width: 16.66666%; 295 | } 296 | 297 | .is-3--large{ 298 | width: 25%; 299 | } 300 | 301 | .is-4--large{ 302 | width: 33.33333%; 303 | } 304 | 305 | 306 | .is-5--large{ 307 | width: 41.66666%; 308 | } 309 | 310 | .is-6--large{ 311 | width: 50%; 312 | } 313 | 314 | .is-7--large{ 315 | width: 58.33333%; 316 | } 317 | 318 | .is-8--large{ 319 | width: 66.66666%; 320 | } 321 | 322 | .is-9--large{ 323 | width: 75%; 324 | } 325 | 326 | .is-10--large{ 327 | width: 83.33333%; 328 | } 329 | 330 | .is-11--large{ 331 | width: 91.66666%; 332 | } 333 | 334 | 335 | .is-12--large{ 336 | width: 100%; 337 | } 338 | 339 | } 340 | 341 | 342 | 343 | @media (max-width : 1000px){ 344 | 345 | .is-75p--medium{ 346 | width: 75%; 347 | } 348 | 349 | .is-50p--medium{ 350 | width: 50%; 351 | } 352 | 353 | .is-25p--medium{ 354 | width: 25%; 355 | } 356 | 357 | .is-66p--medium{ 358 | width: 66.66666%; 359 | } 360 | 361 | .is-33p--medium{ 362 | width: 33.33333%; 363 | } 364 | 365 | .is-100p--medium{ 366 | width: 100%; 367 | } 368 | 369 | .is-1--medium{ 370 | width: 8.33333%; 371 | } 372 | 373 | .is-2--medium{ 374 | width: 16.66666%; 375 | } 376 | 377 | .is-3--medium{ 378 | width: 25%; 379 | } 380 | 381 | .is-4--medium{ 382 | width: 33.33333%; 383 | } 384 | 385 | 386 | .is-5--medium{ 387 | width: 41.66666%; 388 | } 389 | 390 | .is-6--medium{ 391 | width: 50%; 392 | } 393 | 394 | .is-7--medium{ 395 | width: 58.33333%; 396 | } 397 | 398 | .is-8--medium{ 399 | width: 66.66666%; 400 | } 401 | 402 | .is-9--medium{ 403 | width: 75%; 404 | } 405 | 406 | .is-10--medium{ 407 | width: 83.33333%; 408 | } 409 | 410 | .is-11--medium{ 411 | width: 91.66666%; 412 | } 413 | 414 | 415 | .is-12--medium{ 416 | width: 100%; 417 | } 418 | 419 | } 420 | 421 | 422 | @media (max-width : 768px){ 423 | 424 | .is-75p--small{ 425 | width: 75%; 426 | } 427 | 428 | .is-50p--small{ 429 | width: 50%; 430 | } 431 | 432 | .is-25p--small{ 433 | width: 25%; 434 | } 435 | 436 | .is-66p--small{ 437 | width: 66.66666%; 438 | } 439 | 440 | .is-33p--small{ 441 | width: 33.33333%; 442 | } 443 | 444 | .is-100p--small{ 445 | width: 100%; 446 | } 447 | 448 | .is-1--small{ 449 | width: 8.33333%; 450 | } 451 | 452 | .is-2--small{ 453 | width: 16.66666%; 454 | } 455 | 456 | .is-3--small{ 457 | width: 25%; 458 | } 459 | 460 | .is-4--small{ 461 | width: 33.33333%; 462 | } 463 | 464 | 465 | .is-5--small{ 466 | width: 41.66666%; 467 | } 468 | 469 | .is-6--small{ 470 | width: 50%; 471 | } 472 | 473 | .is-7--small{ 474 | width: 58.33333%; 475 | } 476 | 477 | .is-8--small{ 478 | width: 66.66666%; 479 | } 480 | 481 | .is-9--small{ 482 | width: 75%; 483 | } 484 | 485 | .is-10--small{ 486 | width: 83.33333%; 487 | } 488 | 489 | .is-11--small{ 490 | width: 91.66666%; 491 | } 492 | 493 | 494 | .is-12--small{ 495 | width: 100%; 496 | } 497 | 498 | } 499 | 500 | /*******************************GRID OFFSET*******************************/ 501 | 502 | 503 | .is-75p--offset{ 504 | margin-left: 75%; 505 | } 506 | 507 | .is-50p--offset{ 508 | margin-left: 50%; 509 | } 510 | 511 | .is-25p--offset{ 512 | margin-left: 25%; 513 | } 514 | 515 | .is-66p--offset{ 516 | margin-left: 66.66666%; 517 | } 518 | 519 | .is-33p--offset{ 520 | margin-left: 33.33333%; 521 | } 522 | 523 | .is-100p--offset{ 524 | margin-left: 100%; 525 | } 526 | 527 | .is-1--offset{ 528 | margin-left: 8.33333%; 529 | } 530 | 531 | .is-2--offset{ 532 | margin-left: 16.66666%; 533 | } 534 | 535 | .is-3--offset{ 536 | margin-left: 25%; 537 | } 538 | 539 | .is-4--offset{ 540 | margin-left: 33.33333%; 541 | } 542 | 543 | 544 | .is-5--offset{ 545 | margin-left: 41.66666%; 546 | } 547 | 548 | .is-6--offset{ 549 | margin-left: 50%; 550 | } 551 | 552 | .is-7--offset{ 553 | margin-left: 58.33333%; 554 | } 555 | 556 | .is-8--offset{ 557 | margin-left: 66.66666%; 558 | } 559 | 560 | .is-9--offset{ 561 | margin-left: 75%; 562 | } 563 | 564 | .is-10--offset{ 565 | margin-left: 83.33333%; 566 | } 567 | 568 | .is-11--offset{ 569 | margin-left: 91.66666%; 570 | } 571 | 572 | 573 | .is-12--offset{ 574 | margin-left: 100%; 575 | } 576 | 577 | 578 | /*******************************GRID COLUMN COUNT*******************************/ 579 | 580 | .grid-1>*,.grid-2>*,.grid-3>*,.grid-4>*,.grid-5>*,.grid-6>*,.grid-7>*,.grid-8>*,.grid-9>*,.grid-10>*,.grid-11>*,.grid-12>*,.grid-1--large>*,.grid-2--large>*,.grid-3--large>*,.grid-4--large>*,.grid-5--large>*,.grid-6--large>*,.grid-7--large>*,.grid-8--large>*,.grid-9--large>*,.grid-10--large>*,.grid-11--large>*,.grid-12--large>*,.grid-1--medium>*,.grid-2--medium>*,.grid-3--medium>*,.grid-4--medium>*,.grid-5--medium>*,.grid-6--medium>*,.grid-7--medium>*,.grid-8--medium>*,.grid-9--medium>*,.grid-10--medium>*,.grid-11--medium>*,.grid-12--medium>*,.grid-1--small>*,.grid-2--small>*,.grid-3--small>*,.grid-4--small>*,.grid-5--small>*,.grid-6--small>*,.grid-7--small>*,.grid-8--small>*,.grid-9--small>*,.grid-10--small>*,.grid-11--small>*,.grid-12--small>*{ 581 | -webkit-box-flex: 0; 582 | -ms-flex: none; 583 | flex: none; 584 | } 585 | 586 | .grid-1>*{ 587 | width: 100%; 588 | } 589 | 590 | .grid-2>*{ 591 | width: 50%; 592 | } 593 | 594 | .grid-3>*{ 595 | width: 33.33333%; 596 | } 597 | 598 | .grid-4>*{ 599 | width: 25%; 600 | } 601 | 602 | .grid-5>*{ 603 | width: 20%; 604 | } 605 | 606 | .grid-6>*{ 607 | width: 16.66666%; 608 | } 609 | 610 | .grid-7>*{ 611 | width: 14.28571%; 612 | } 613 | 614 | .grid-8>*{ 615 | width: 12.5%; 616 | } 617 | 618 | .grid-9>*{ 619 | width: 11.11111%; 620 | } 621 | 622 | .grid-10>*{ 623 | width: 10%; 624 | } 625 | 626 | .grid-11>*{ 627 | width: 9.09090%; 628 | } 629 | 630 | .grid-12>*{ 631 | width: 8.33333%; 632 | } 633 | 634 | 635 | @media (max-width : 768px){ 636 | 637 | .grid-1>*,.grid-2>*,.grid-3>*,.grid-4>*,.grid-5>*,.grid-6>*,.grid-7>*,.grid-8>*,.grid-9>*,.grid-10>*,.grid-11>*,.grid-12>*{ 638 | width: 100%; 639 | } 640 | 641 | } 642 | 643 | 644 | 645 | @media (min-width : 1000px){ 646 | 647 | .grid-1--large>*{ 648 | width: 100%; 649 | } 650 | 651 | .grid-2--large>*{ 652 | width: 50%; 653 | } 654 | 655 | .grid-3--large>*{ 656 | width: 33.33333%; 657 | } 658 | 659 | .grid-4--large>*{ 660 | width: 25%; 661 | } 662 | 663 | .grid-5--large>*{ 664 | width: 20%; 665 | } 666 | 667 | .grid-6--large>*{ 668 | width: 16.66666%; 669 | } 670 | 671 | .grid-7--large>*{ 672 | width: 14.28571%; 673 | } 674 | 675 | .grid-8--large>*{ 676 | width: 12.5%; 677 | } 678 | 679 | .grid-9--large>*{ 680 | width: 11.11111%; 681 | } 682 | 683 | .grid-10--large>*{ 684 | width: 10%; 685 | } 686 | 687 | .grid-11--large>*{ 688 | width: 9.09090%; 689 | } 690 | 691 | .grid-12>*{ 692 | width: 8.33333%; 693 | } 694 | 695 | } 696 | 697 | 698 | @media (max-width : 1000px){ 699 | 700 | .grid-1--medium>*{ 701 | width: 100%; 702 | } 703 | 704 | .grid-2--medium>*{ 705 | width: 50%; 706 | } 707 | 708 | .grid-3--medium>*{ 709 | width: 33.33333%; 710 | } 711 | 712 | .grid-4--medium>*{ 713 | width: 25%; 714 | } 715 | 716 | .grid-5--medium>*{ 717 | width: 20%; 718 | } 719 | 720 | .grid-6--medium>*{ 721 | width: 16.66666%; 722 | } 723 | 724 | .grid-7--medium>*{ 725 | width: 14.28571%; 726 | } 727 | 728 | .grid-8--medium>*{ 729 | width: 12.5%; 730 | } 731 | 732 | .grid-9--medium>*{ 733 | width: 11.11111%; 734 | } 735 | 736 | .grid-10--medium>*{ 737 | width: 10%; 738 | } 739 | 740 | .grid-11--medium>*{ 741 | width: 9.09090%; 742 | } 743 | 744 | .grid-12--medium>*{ 745 | width: 8.33333%; 746 | } 747 | 748 | } 749 | 750 | 751 | @media (max-width : 768px){ 752 | 753 | .grid-1--small,.grid-2--small,.grid-3--small,.grid-4--small,.grid-5--small,.grid-6--small,.grid-7--small,.grid-8--small,.grid-9--small,.grid-10--small,.grid-11--small,.grid-12--small{ 754 | -webkit-box-orient: horizontal; 755 | -webkit-box-direction: normal; 756 | -ms-flex-direction: row; 757 | flex-direction: row; 758 | } 759 | 760 | .grid-1--small>*,.grid-2--small>*,.grid-3--small>*,.grid-4--small>*,.grid-5--small>*,.grid-6--small>*,.grid-7--small>*,.grid-8--small>*,.grid-9--small>*,.grid-10--small>*,.grid-11--small>*,.grid-12--small>*{ 761 | padding: .512rem; 762 | } 763 | 764 | .grid-1--small>*{ 765 | width: 100%; 766 | } 767 | 768 | .grid-2--small>*{ 769 | width: 50%; 770 | } 771 | 772 | .grid-3--small>*{ 773 | width: 33.33333%; 774 | } 775 | 776 | .grid-4--small>*{ 777 | width: 25%; 778 | } 779 | 780 | .grid-5--small>*{ 781 | width: 20%; 782 | } 783 | 784 | .grid-6--small>*{ 785 | width: 16.66666%; 786 | } 787 | 788 | .grid-7--small>*{ 789 | width: 14.28571%; 790 | } 791 | 792 | .grid-8--small>*{ 793 | width: 12.5%; 794 | } 795 | 796 | .grid-9--small>*{ 797 | width: 11.11111%; 798 | } 799 | 800 | .grid-10--small>*{ 801 | width: 10%; 802 | } 803 | 804 | .grid-11--small>*{ 805 | width: 9.09090%; 806 | } 807 | 808 | .grid-12--small>*{ 809 | width: 8.33333%; 810 | } 811 | 812 | } 813 | 814 | 815 | /*******************************GRID COLUMN COUNT REMAINDERS*******************************/ 816 | 817 | .grid-grow>*{ 818 | -webkit-box-flex: 1; 819 | -ms-flex-positive: 1; 820 | flex-grow: 1; 821 | } 822 | 823 | .grid-center{ 824 | -webkit-box-pack: center; 825 | -ms-flex-pack: center; 826 | justify-content: center; 827 | } 828 | 829 | .grid-gapless>*{ 830 | padding: 0 !important; 831 | } 832 | 833 | 834 | /*******************************BUTTONS*******************************/ 835 | 836 | .btn, .btn--ghost,.btn--sharp,.btn--ghost--sharp{ 837 | -moz-appearance: none; 838 | -webkit-appearance: none; 839 | -webkit-box-align: center; 840 | -ms-flex-align: center; 841 | align-items: center; 842 | box-shadow: none; 843 | display: -webkit-inline-box; 844 | display: -ms-inline-flexbox; 845 | display: inline-flex; 846 | height: 2.25em; 847 | -webkit-box-pack: start; 848 | -ms-flex-pack: start; 849 | justify-content: flex-start; 850 | line-height: 1.5; 851 | padding-bottom: calc(0.375em - 1px); 852 | padding-left: calc(0.625em - 1px); 853 | padding-right: calc(0.625em - 1px); 854 | padding-top: calc(0.375em - 1px); 855 | position: relative; 856 | vertical-align: top; 857 | -webkit-touch-callout: none; 858 | -webkit-user-select: none; 859 | -moz-user-select: none; 860 | -ms-user-select: none; 861 | user-select: none; 862 | color: #363636; 863 | cursor: pointer; 864 | -webkit-box-pack: center; 865 | -ms-flex-pack: center; 866 | justify-content: center; 867 | padding-left: 0.75em; 868 | padding-right: 0.75em; 869 | text-align: center; 870 | white-space: nowrap; 871 | text-decoration: none; 872 | font-size: 1em; 873 | } 874 | 875 | .btn{ 876 | background-color: gainsboro; 877 | border: none; 878 | border-radius: 3px; 879 | } 880 | 881 | .btn--ghost{ 882 | border: solid 2px gainsboro; 883 | background-color: transparent; 884 | border-radius: 3px; 885 | 886 | } 887 | 888 | .btn--sharp{ 889 | background-color: gainsboro; 890 | border-radius: 0; 891 | border: none; 892 | } 893 | 894 | .btn--ghost--sharp{ 895 | border: solid 2px gainsboro; 896 | background-color: transparent; 897 | border-radius: 0; 898 | } 899 | 900 | /*******************************UNORDERED LISTS*******************************/ 901 | 902 | ul{ 903 | list-style-type: none; 904 | } 905 | 906 | ul li{ 907 | padding: 5px 0; 908 | } 909 | 910 | /*******************************HELPERS*******************************/ 911 | 912 | .text-center{ 913 | text-align: center; 914 | } 915 | 916 | .text-left{ 917 | text-align: left; 918 | } 919 | 920 | .text-right{ 921 | text-align: right; 922 | } 923 | 924 | .text-justify{ 925 | text-align: justify; 926 | } 927 | 928 | .text-lowercase{ 929 | text-transform: lowercase; 930 | } 931 | 932 | .text-uppercase{ 933 | text-transform: uppercase; 934 | } 935 | 936 | .text-capitalize{ 937 | text-transform: capitalize; 938 | } 939 | 940 | .text-normal{ 941 | font-weight: normal; 942 | } 943 | 944 | .text-bold{ 945 | font-weight: bold; 946 | } 947 | 948 | .text-italic{ 949 | font-style: italic; 950 | } 951 | 952 | .vertically-center{ 953 | display:-webkit-box; 954 | display:-ms-flexbox; 955 | display:flex; 956 | -webkit-box-pack: center; 957 | -ms-flex-pack: center; 958 | justify-content:center; 959 | -webkit-box-align: center; 960 | -ms-flex-align: center; 961 | -ms-grid-row-align: center; 962 | align-items:center; 963 | } 964 | 965 | .float-left{ 966 | float: left; 967 | } 968 | 969 | .float-right{ 970 | float: right; 971 | } 972 | 973 | .no-margin{ 974 | margin: 0 !important; 975 | } 976 | 977 | .no-padding{ 978 | margin: 0 !important; 979 | } 980 | 981 | .block{ 982 | display: block; 983 | } 984 | 985 | .inline-block{ 986 | display: inline-block; 987 | } 988 | 989 | .inline{ 990 | display: inline; 991 | } 992 | 993 | .show{ 994 | display: block !important; 995 | } 996 | 997 | .hide{ 998 | display: none !important; 999 | } 1000 | 1001 | .screen-reader{ 1002 | border: 0; 1003 | clip: rect(1px,1px,1px,1px); 1004 | clip-path: inset( 50% ); 1005 | height: 1px; 1006 | margin: -1px; 1007 | overflow: hidden; 1008 | padding: 0; 1009 | position: absolute; 1010 | width: 1px; 1011 | word-wrap: normal; 1012 | } 1013 | 1014 | .content-buffer{ 1015 | padding: 40px 0; 1016 | } 1017 | 1018 | 1019 | @media (max-width : 600px){ 1020 | .content-buffer{ 1021 | padding: 20px 3%; 1022 | } 1023 | } 1024 | 1025 | /*******************************FORMS*******************************/ 1026 | 1027 | input:not([type=submit]):not([type=button]),textarea,select{ 1028 | -moz-appearance: none; 1029 | -webkit-appearance: none; 1030 | -webkit-box-align: center; 1031 | -ms-flex-align: center; 1032 | align-items: center; 1033 | border: 1px solid transparent; 1034 | border-radius: 3px; 1035 | box-shadow: none; 1036 | display: -webkit-inline-box; 1037 | display: -ms-inline-flexbox; 1038 | display: inline-flex; 1039 | height: 2.25em; 1040 | -webkit-box-pack: start; 1041 | -ms-flex-pack: start; 1042 | justify-content: flex-start; 1043 | line-height: 1.5; 1044 | padding-bottom: calc(0.375em - 1px); 1045 | padding-left: calc(0.625em - 1px); 1046 | padding-right: calc(0.625em - 1px); 1047 | padding-top: calc(0.375em - 1px); 1048 | position: relative; 1049 | vertical-align: top; 1050 | background-color: white; 1051 | border-color: #dbdbdb; 1052 | color: #363636; 1053 | box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1); 1054 | max-width: 100%; 1055 | width: 100%; 1056 | margin-bottom: .5rem; 1057 | } 1058 | 1059 | textarea{ 1060 | display: block; 1061 | max-height: 600px; 1062 | max-width: 100%; 1063 | min-height: 150px; 1064 | min-width: 100%; 1065 | padding: 0.625em; 1066 | resize: vertical; 1067 | } 1068 | 1069 | label{ 1070 | display: block; 1071 | max-width: 100%; 1072 | margin-bottom: .5rem; 1073 | } 1074 | 1075 | /*******************************TABLES*******************************/ 1076 | 1077 | table{ 1078 | border-collapse: collapse; 1079 | border-spacing: 0; 1080 | width: 100%; 1081 | max-width: 100%; 1082 | } 1083 | 1084 | thead th{ 1085 | border-bottom: 2px solid #cfcfcf; 1086 | } 1087 | 1088 | tfoot th{ 1089 | border-top: 2px solid #cfcfcf; 1090 | } 1091 | 1092 | td, th{ 1093 | text-align: left; 1094 | padding: .5rem; 1095 | } 1096 | 1097 | td{ 1098 | border-bottom: 1px solid #cfcfcf; 1099 | } 1100 | 1101 | 1102 | .table-striped tbody tr:nth-child(2n){ 1103 | background-color: #ededed; 1104 | } 1105 | 1106 | .table-bordered{ 1107 | border: solid 1px #cfcfcf; 1108 | } 1109 | 1110 | .table-highlight tr:hover:not(.table-selected){ 1111 | background-color: #d2d2d2 !important; 1112 | } 1113 | 1114 | table .table-selected{ 1115 | background-color: #ffff83 !important; 1116 | } 1117 | 1118 | 1119 | /*******************************MEDIA*******************************/ 1120 | 1121 | .media{ 1122 | max-width: 100%; 1123 | height: auto; 1124 | } 1125 | 1126 | .media--embed{ 1127 | position: relative; 1128 | padding-bottom: 56.25%; /* 16:9 */ 1129 | padding-top: 25px; 1130 | height: 0; 1131 | } 1132 | 1133 | .media--embed iframe{ 1134 | position: absolute; 1135 | top: 0; 1136 | left: 0; 1137 | width: 100%; 1138 | height: 100%; 1139 | } --------------------------------------------------------------------------------