diff --git a/.gitignore b/.gitignore old mode 100644 new mode 100755 index a75f3f4..04ba31f --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,14 @@ -.DS_Store *.zip -node_modules -*~ +*.rar +.DS_Store +.Thumbs +.thumbs ._* ~* +*~ +node_modules +build +.conf +.ftpconfig +.sftpconfig +package-lock.json \ No newline at end of file diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 0000000..35ebc7d --- /dev/null +++ b/.stylelintrc @@ -0,0 +1,25 @@ +{ + "rules": { + "block-closing-brace-empty-line-before": "never", + "block-closing-brace-newline-after": "always", + "declaration-block-semicolon-newline-after": "always", + "block-opening-brace-space-before": "always", + "color-hex-case": "lower", + "color-named": "never", + "color-no-invalid-hex": true, + "function-comma-newline-after": "never-multi-line", + "function-comma-space-after": "always", + "no-duplicate-selectors": true, + "no-eol-whitespace": true, + "indentation": "tab", + "number-leading-zero": "always", + "property-no-unknown": [ true, { + "ignoreProperties": [ + "composes" + ] + }], + "selector-list-comma-newline-after": "always", + "unit-case": "lower", + "unit-whitelist": ["em", "rem", "s", "vmax", "vmin", "vh", "vw", "%", "px"] + } +} \ No newline at end of file diff --git a/dist/kayros.css b/dist/kayros.css index 707cb50..fbaa59e 100644 --- a/dist/kayros.css +++ b/dist/kayros.css @@ -1,6 +1,6 @@ /** * ============================== - * Kayros 0.1.0 | MIT License + * Kayros 0.1.1 | MIT License * http://aegisframework.com/ * ============================== */ @@ -74,7 +74,7 @@ a { color: inherit; cursor: pointer; background-color: transparent; - -webkit-text-decoration-skip: objects; + -webkit-text-decoration-skip: objects; } a:active, @@ -88,11 +88,6 @@ abbr[title] { text-decoration: underline dotted; } -b, -strong { - font-weight: inherit; -} - b, strong { font-weight: bolder; @@ -135,7 +130,6 @@ sup { img { border-style: none; -webkit-user-drag: none; - user-drag: none; -webkit-touch-callout: none; border: 0; max-width: 100%; @@ -184,7 +178,7 @@ input { button, select { - -webkit-appearance: none; + -webkit-appearance: none; -moz-appearance: none; border: none; outline: none; @@ -285,53 +279,36 @@ th { padding: 0; } -.unselectable, img { +.unselectable, +img { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } - /** * ============================== * Grid System * ============================== */ -.container, -.row .col { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - padding-left: 1rem; - padding-right: 1rem; +.row { + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + flex-direction: row; + align-items: center; + align-content: center; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + width: 100%; } -.row { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - display: -webkit-box; - display: -moz-box; - display: -webkit-flex; - display: -ms-flexbox; - display: box; - display: flex; - -webkit-box-lines: multiple; - -moz-box-lines: multiple; - -o-box-lines: multiple; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin-left: -1rem; - margin-right: -1rem; - align-content: center; - align-items: center; -} - -.row.align-center{ +.row.align-center { justify-content: center; - } .row.stretch { @@ -358,2094 +335,313 @@ th { justify-content: space-around } -.row .col.auto { - -webkit-box-flex: 1; - -moz-box-flex: 1; - -o-box-flex: 1; - box-flex: 1; - -webkit-flex: 1 1 0 !important; - -ms-flex: 1 1 0 !important; - flex: 1 1 0 !important; +.row .col { + flex-grow: 0; + flex-shrink: 0; + flex-basis: auto; } -.row > div { - -webkit-flex-basis: 100%; - flex-basis: 100%; +.row .col.auto { + -webkit-box-flex: 1; + -moz-box-flex: 1; + -o-box-flex: 1; + -webkit-flex: 1 1 0 !important; + -ms-flex: 1 1 0 !important; + flex: 1 1 0 !important; } .row .col.s1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; + width: calc(100% / 12); } .row .col.s2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; + width: calc(100% / 6); } .row .col.s3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; + width: 25%; } .row .col.s4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; -} - -.row .col.s5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; + width: calc(100% / 3); } .row .col.s6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; -} - -.row .col.s7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; -} - -.row .col.s8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; -} - -.row .col.s9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; -} - -.row .col.s10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; -} - -.row .col.s11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; + width: 50%; } .row .col.s12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; + width: 100%; } .row .col.offset-s1 { - margin-left: 8.333333333333334%; + margin-left: calc(100% / 12); } .row .col.offset-s2 { - margin-left: 16.666666666666668%; + margin-left: calc(100% / 6); } .row .col.offset-s3 { - margin-left: 25%; + margin-left: 25%; } .row .col.offset-s4 { - margin-left: 33.333333333333336%; -} - -.row .col.offset-s5 { - margin-left: 41.66666666666667%; + margin-left: calc(100% / 3); } .row .col.offset-s6 { - margin-left: 50%; -} - -.row .col.offset-s7 { - margin-left: 58.333333333333336%; -} - -.row .col.offset-s8 { - margin-left: 66.66666666666667%; -} - -.row .col.offset-s9 { - margin-left: 75%; -} - -.row .col.offset-s10 { - margin-left: 83.33333333333334%; -} - -.row .col.offset-s11 { - margin-left: 91.66666666666667%; + margin-left: 50%; } @media (min-width: 601px) { - .row .col.m1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; - } - - .row .col.m2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; - } - - .row .col.m3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - - .row .col.m4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; - } - - .row .col.m5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; - } - - .row .col.m6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - - .row .col.m7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; - } - - .row .col.m8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; - } - - .row .col.m9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - - .row .col.m10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; - } - - .row .col.m11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; - } - - .row .col.m12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - - .row .col.offset-m1 { - margin-left: 8.333333333333334%; - } - - .row .col.offset-m2 { - margin-left: 16.666666666666668%; - } - - .row .col.offset-m3 { - margin-left: 25%; - } - - .row .col.offset-m4 { - margin-left: 33.333333333333336%; - } - - .row .col.offset-m5 { - margin-left: 41.66666666666667%; - } - - .row .col.offset-m6 { - margin-left: 50%; - } - - .row .col.offset-m7 { - margin-left: 58.333333333333336%; - } - - .row .col.offset-m8 { - margin-left: 66.66666666666667%; - } - - .row .col.offset-m9 { - margin-left: 75%; - } - - .row .col.offset-m10 { - margin-left: 83.33333333333334%; - } - - .row .col.offset-m11 { - margin-left: 91.66666666666667%; - } - -} - -@media (min-width: 992px) { - .row .col.l1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; - } - - .row .col.l2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; - } - - .row .col.l3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - - .row .col.l4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; - } - - .row .col.l5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; - } - - .row .col.l6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - - .row .col.l7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; - } - - .row .col.l8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; - } - - .row .col.l9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - - .row .col.l10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; - } - - .row .col.l11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; - } - - .row .col.l12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - - .row .col.offset-l1 { - margin-left: 8.333333333333334%; - } - - .row .col.offset-l2 { - margin-left: 16.666666666666668%; - } - - .row .col.offset-l3 { - margin-left: 25%; - } - - .row .col.offset-l4 { - margin-left: 33.333333333333336%; - } - - .row .col.offset-l5 { - margin-left: 41.66666666666667%; - } - - .row .col.offset-l6 { - margin-left: 50%; - } - - .row .col.offset-l7 { - margin-left: 58.333333333333336%; - } - - .row .col.offset-l8 { - margin-left: 66.66666666666667%; - } - - .row .col.offset-l9 { - margin-left: 75%; - } - - .row .col.offset-l10 { - margin-left: 83.33333333333334%; - } - - .row .col.offset-l11 { - margin-left: 91.66666666666667%; - } - -} - -@media (min-width: 1200px) { - .row .col.xl1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; - } - - .row .col.xl2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; - } - - .row .col.xl3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - - .row .col.xl4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; - } - - .row .col.xl5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; - } - - .row .col.xl6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - - .row .col.xl7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; - } - - .row .col.xl8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; - } - - .row .col.xl9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - - .row .col.xl10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; - } - - .row .col.xl11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; - } - - .row .col.xl12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - - .row .col.offset-xl1 { - margin-left: 8.333333333333334%; - } - - .row .col.offset-xl2 { - margin-left: 16.666666666666668%; - } - - .row .col.offset-xl3 { - margin-left: 25%; - } - - .row .col.offset-xl4 { - margin-left: 33.333333333333336%; - } - - .row .col.offset-xl5 { - margin-left: 41.66666666666667%; - } - - .row .col.offset-xl6 { - margin-left: 50%; - } - - .row .col.offset-xl7 { - margin-left: 58.333333333333336%; - } - - .row .col.offset-xl8 { - margin-left: 66.66666666666667%; - } - - .row .col.offset-xl9 { - margin-left: 75%; - } - - .row .col.offset-xl10 { - margin-left: 83.33333333333334%; - } - - .row .col.offset-xl11 { - margin-left: 91.66666666666667%; - } - -} - -@media (min-width: 1900px) { - .row .col.xxl1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; - } - - .row .col.xxl2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; - } - - .row .col.xxl3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - - .row .col.xxl4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; - } - - .row .col.xxl5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; - } - - .row .col.xxl6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - - .row .col.xxl7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; - } - - .row .col.xxl8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; - } - - .row .col.xxl9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - - .row .col.xxl10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; - } - - .row .col.xxl11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; - } - - .row .col.xxl12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - - .row .col.offset-xxl1 { - margin-left: 8.333333333333334%; - } - - .row .col.offset-xxl2 { - margin-left: 16.666666666666668%; - } - - .row .col.offset-xxl3 { - margin-left: 25%; - } - - .row .col.offset-xxl4 { - margin-left: 33.333333333333336%; - } - - .row .col.offset-xxl5 { - margin-left: 41.66666666666667%; - } - - .row .col.offset-xxl6 { - margin-left: 50%; - } - - .row .col.offset-xxl7 { - margin-left: 58.333333333333336%; - } - - .row .col.offset-xxl8 { - margin-left: 66.66666666666667%; - } - - .row .col.offset-xxl9 { - margin-left: 75%; - } - - .row .col.offset-xxl10 { - margin-left: 83.33333333333334%; - } - - .row .col.offset-xxl11 { - margin-left: 91.66666666666667%; - } - -} - -@media (min-width: 2560px) { - .row .col.r1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; - } - - .row .col.r2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; - } - - .row .col.r3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - - .row .col.r4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; - } - - .row .col.r5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; - } - - .row .col.r6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - - .row .col.r7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; - } - - .row .col.r8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; - } - - .row .col.r9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - - .row .col.r10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; - } - - .row .col.r11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; - } - - .row .col.r12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - - .row .col.offset-r1 { - margin-left: 8.333333333333334%; - } - - .row .col.offset-r2 { - margin-left: 16.666666666666668%; - } - - .row .col.offset-r3 { - margin-left: 25%; - } - - .row .col.offset-r4 { - margin-left: 33.333333333333336%; - } - - .row .col.offset-r5 { - margin-left: 41.66666666666667%; - } - - .row .col.offset-r6 { - margin-left: 50%; - } - - .row .col.offset-r7 { - margin-left: 58.333333333333336%; - } - - .row .col.offset-r8 { - margin-left: 66.66666666666667%; - } - - .row .col.offset-r9 { - margin-left: 75%; - } - - .row .col.offset-r10 { - margin-left: 83.33333333333334%; - } - - .row .col.offset-r11 { - margin-left: 91.66666666666667%; - } - -}/** -* ============================== -* Grid System -* ============================== -*/ - -.container, -.row .col { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - padding-left: 1rem; - padding-right: 1rem; -} - -.row { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - display: -webkit-box; - display: -moz-box; - display: -webkit-flex; - display: -ms-flexbox; - display: box; - display: flex; - -webkit-box-lines: multiple; - -moz-box-lines: multiple; - -o-box-lines: multiple; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin-left: -1rem; - margin-right: -1rem; - align-content: center; - align-items: center; -} - -.row.align-center{ - justify-content: center; - -} - -.row.stretch { - align-content: stretch; -} - -.row.around { - align-content: space-around; -} - -.row.align-left { - justify-content: flex-start; -} - -.row.align-right { - justify-content: flex-end; -} - -.row.align-center-between { - justify-content: space-between; -} - -.row.align-center-around { - justify-content: space-around -} - -.row .col.auto { - -webkit-box-flex: 1; - -moz-box-flex: 1; - -o-box-flex: 1; - box-flex: 1; - -webkit-flex: 1 1 0 !important; - -ms-flex: 1 1 0 !important; - flex: 1 1 0 !important; -} - -.row > div { - -webkit-flex-basis: 100%; - flex-basis: 100%; -} - -.row .col.s1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; -} - -.row .col.s2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; -} - -.row .col.s3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; -} - -.row .col.s4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; -} - -.row .col.s5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; -} - -.row .col.s6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; -} - -.row .col.s7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; -} - -.row .col.s8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; -} - -.row .col.s9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; -} - -.row .col.s10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; -} - -.row .col.s11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; -} - -.row .col.s12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; -} - -.row .col.offset-s1 { - margin-left: 8.333333333333334%; -} - -.row .col.offset-s2 { - margin-left: 16.666666666666668%; -} - -.row .col.offset-s3 { - margin-left: 25%; -} + .row .col.m1 { + width: calc(100% / 12); + } -.row .col.offset-s4 { - margin-left: 33.333333333333336%; -} + .row .col.m2 { + width: calc(100% / 6); + } -.row .col.offset-s5 { - margin-left: 41.66666666666667%; -} + .row .col.m3 { + width: 25%; + } -.row .col.offset-s6 { - margin-left: 50%; -} + .row .col.m4 { + width: calc(100% / 3); + } -.row .col.offset-s7 { - margin-left: 58.333333333333336%; -} + .row .col.m6 { + width: 50%; + } -.row .col.offset-s8 { - margin-left: 66.66666666666667%; -} + .row .col.m12 { + width: 100%; + } -.row .col.offset-s9 { - margin-left: 75%; -} + .row .col.offset-m1 { + margin-left: calc(100% / 12); + } -.row .col.offset-s10 { - margin-left: 83.33333333333334%; -} + .row .col.offset-m2 { + margin-left: calc(100% / 6); + } -.row .col.offset-s11 { - margin-left: 91.66666666666667%; -} + .row .col.offset-m3 { + margin-left: 25%; + } -@media (min-width: 601px) { - .row .col.m1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; - } - - .row .col.m2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; - } - - .row .col.m3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - - .row .col.m4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; - } - - .row .col.m5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; - } - - .row .col.m6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - - .row .col.m7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; - } - - .row .col.m8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; - } - - .row .col.m9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - - .row .col.m10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; - } - - .row .col.m11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; - } - - .row .col.m12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - - .row .col.offset-m1 { - margin-left: 8.333333333333334%; - } - - .row .col.offset-m2 { - margin-left: 16.666666666666668%; - } - - .row .col.offset-m3 { - margin-left: 25%; - } - - .row .col.offset-m4 { - margin-left: 33.333333333333336%; - } - - .row .col.offset-m5 { - margin-left: 41.66666666666667%; - } - - .row .col.offset-m6 { - margin-left: 50%; - } - - .row .col.offset-m7 { - margin-left: 58.333333333333336%; - } - - .row .col.offset-m8 { - margin-left: 66.66666666666667%; - } - - .row .col.offset-m9 { - margin-left: 75%; - } - - .row .col.offset-m10 { - margin-left: 83.33333333333334%; - } - - .row .col.offset-m11 { - margin-left: 91.66666666666667%; - } + .row .col.offset-m4 { + margin-left: calc(100% / 3); + } + .row .col.offset-m6 { + margin-left: 50%; + } } @media (min-width: 992px) { - .row .col.l1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; - } - - .row .col.l2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; - } - - .row .col.l3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - - .row .col.l4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; - } - - .row .col.l5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; - } - - .row .col.l6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - - .row .col.l7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; - } - - .row .col.l8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; - } - - .row .col.l9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - - .row .col.l10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; - } - - .row .col.l11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; - } - - .row .col.l12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - - .row .col.offset-l1 { - margin-left: 8.333333333333334%; - } - - .row .col.offset-l2 { - margin-left: 16.666666666666668%; - } - - .row .col.offset-l3 { - margin-left: 25%; - } - - .row .col.offset-l4 { - margin-left: 33.333333333333336%; - } - - .row .col.offset-l5 { - margin-left: 41.66666666666667%; - } - - .row .col.offset-l6 { - margin-left: 50%; - } - - .row .col.offset-l7 { - margin-left: 58.333333333333336%; - } - - .row .col.offset-l8 { - margin-left: 66.66666666666667%; - } - - .row .col.offset-l9 { - margin-left: 75%; - } - - .row .col.offset-l10 { - margin-left: 83.33333333333334%; - } - - .row .col.offset-l11 { - margin-left: 91.66666666666667%; - } - -} - -@media (min-width: 1200px) { - .row .col.xl1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; - } - - .row .col.xl2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; - } - - .row .col.xl3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - - .row .col.xl4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; - } - - .row .col.xl5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; - } - - .row .col.xl6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - - .row .col.xl7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; - } - - .row .col.xl8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; - } - - .row .col.xl9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - - .row .col.xl10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; - } - - .row .col.xl11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; - } - - .row .col.xl12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - - .row .col.offset-xl1 { - margin-left: 8.333333333333334%; - } - - .row .col.offset-xl2 { - margin-left: 16.666666666666668%; - } - - .row .col.offset-xl3 { - margin-left: 25%; - } - - .row .col.offset-xl4 { - margin-left: 33.333333333333336%; - } - - .row .col.offset-xl5 { - margin-left: 41.66666666666667%; - } - - .row .col.offset-xl6 { - margin-left: 50%; - } - - .row .col.offset-xl7 { - margin-left: 58.333333333333336%; - } - - .row .col.offset-xl8 { - margin-left: 66.66666666666667%; - } - - .row .col.offset-xl9 { - margin-left: 75%; - } - - .row .col.offset-xl10 { - margin-left: 83.33333333333334%; - } - - .row .col.offset-xl11 { - margin-left: 91.66666666666667%; - } + .row .col.l1 { + width: calc(100% / 12); + } -} + .row .col.l2 { + width: calc(100% / 6); + } -@media (min-width: 1900px) { - .row .col.xxl1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; - } - - .row .col.xxl2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; - } - - .row .col.xxl3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - - .row .col.xxl4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; - } - - .row .col.xxl5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; - } - - .row .col.xxl6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - - .row .col.xxl7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; - } - - .row .col.xxl8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; - } - - .row .col.xxl9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - - .row .col.xxl10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; - } - - .row .col.xxl11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; - } - - .row .col.xxl12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - - .row .col.offset-xxl1 { - margin-left: 8.333333333333334%; - } - - .row .col.offset-xxl2 { - margin-left: 16.666666666666668%; - } - - .row .col.offset-xxl3 { - margin-left: 25%; - } - - .row .col.offset-xxl4 { - margin-left: 33.333333333333336%; - } - - .row .col.offset-xxl5 { - margin-left: 41.66666666666667%; - } - - .row .col.offset-xxl6 { - margin-left: 50%; - } - - .row .col.offset-xxl7 { - margin-left: 58.333333333333336%; - } - - .row .col.offset-xxl8 { - margin-left: 66.66666666666667%; - } - - .row .col.offset-xxl9 { - margin-left: 75%; - } - - .row .col.offset-xxl10 { - margin-left: 83.33333333333334%; - } - - .row .col.offset-xxl11 { - margin-left: 91.66666666666667%; - } + .row .col.l3 { + width: 25%; + } -} + .row .col.l4 { + width: calc(100% / 3); + } -@media (min-width: 2560px) { - .row .col.r1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; - } - - .row .col.r2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; - } - - .row .col.r3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - - .row .col.r4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; - } - - .row .col.r5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; - } - - .row .col.r6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - - .row .col.r7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; - } - - .row .col.r8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; - } - - .row .col.r9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - - .row .col.r10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; - } - - .row .col.r11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; - } - - .row .col.r12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - - .row .col.offset-r1 { - margin-left: 8.333333333333334%; - } - - .row .col.offset-r2 { - margin-left: 16.666666666666668%; - } - - .row .col.offset-r3 { - margin-left: 25%; - } - - .row .col.offset-r4 { - margin-left: 33.333333333333336%; - } - - .row .col.offset-r5 { - margin-left: 41.66666666666667%; - } - - .row .col.offset-r6 { - margin-left: 50%; - } - - .row .col.offset-r7 { - margin-left: 58.333333333333336%; - } - - .row .col.offset-r8 { - margin-left: 66.66666666666667%; - } - - .row .col.offset-r9 { - margin-left: 75%; - } - - .row .col.offset-r10 { - margin-left: 83.33333333333334%; - } - - .row .col.offset-r11 { - margin-left: 91.66666666666667%; - } - -}/** -* ============================== -* Grid System -* ============================== -*/ + .row .col.l6 { + width: 50%; + } -.container, -.row .col { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - padding-left: 1rem; - padding-right: 1rem; -} + .row .col.l12 { + width: 100%; + } -.row { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - display: -webkit-box; - display: -moz-box; - display: -webkit-flex; - display: -ms-flexbox; - display: box; - display: flex; - -webkit-box-lines: multiple; - -moz-box-lines: multiple; - -o-box-lines: multiple; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin-left: -1rem; - margin-right: -1rem; - align-content: center; - align-items: center; -} - -.row.align-center{ - justify-content: center; + .row .col.offset-l1 { + margin-left: calc(100% / 12); + } -} + .row .col.offset-l2 { + margin-left: calc(100% / 6); + } -.row.stretch { - align-content: stretch; -} + .row .col.offset-l3 { + margin-left: 25%; + } -.row.around { - align-content: space-around; -} + .row .col.offset-l4 { + margin-left: calc(100% / 3); + } -.row.align-left { - justify-content: flex-start; + .row .col.offset-l6 { + margin-left: 50%; + } } -.row.align-right { - justify-content: flex-end; -} +@media (min-width: 1200px) { + .row .col.xl1 { + width: calc(100% / 12); + } -.row.align-center-between { - justify-content: space-between; -} + .row .col.xl2 { + width: calc(100% / 6); + } -.row.align-center-around { - justify-content: space-around -} + .row .col.xl3 { + width: 25%; + } -.row .col.auto { - -webkit-box-flex: 1; - -moz-box-flex: 1; - -o-box-flex: 1; - box-flex: 1; - -webkit-flex: 1 1 0 !important; - -ms-flex: 1 1 0 !important; - flex: 1 1 0 !important; -} + .row .col.xl4 { + width: calc(100% / 3); + } -.row > div { - -webkit-flex-basis: 100%; - flex-basis: 100%; -} + .row .col.xl6 { + width: 50%; + } -.row .col.s1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; -} + .row .col.xl12 { + width: 100%; + } -.row .col.s2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; -} + .row .col.offset-xl1 { + margin-left: calc(100% / 12); + } -.row .col.s3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; -} + .row .col.offset-xl2 { + margin-left: calc(100% / 6); + } -.row .col.s4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; -} + .row .col.offset-xl3 { + margin-left: 25%; + } -.row .col.s5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; -} + .row .col.offset-xl4 { + margin-left: calc(100% / 3); + } -.row .col.s6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; + .row .col.offset-xl6 { + margin-left: 50%; + } } -.row .col.s7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; -} +@media (min-width: 1900px) { + .row .col.xxl1 { + width: calc(100% / 12); + } -.row .col.s8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; -} + .row .col.xxl2 { + width: calc(100% / 6); + } -.row .col.s9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; -} + .row .col.xxl3 { + width: 25%; + } -.row .col.s10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; -} + .row .col.xxl4 { + width: calc(100% / 3); + } -.row .col.s11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; -} + .row .col.xxl6 { + width: 50%; + } -.row .col.s12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; -} + .row .col.xxl12 { + width: 100%; + } -.row .col.offset-s1 { - margin-left: 8.333333333333334%; -} + .row .col.offset-xxl1 { + margin-left: calc(100% / 12); + } -.row .col.offset-s2 { - margin-left: 16.666666666666668%; -} + .row .col.offset-xxl2 { + margin-left: calc(100% / 6); + } -.row .col.offset-s3 { - margin-left: 25%; -} + .row .col.offset-xxl3 { + margin-left: 25%; + } -.row .col.offset-s4 { - margin-left: 33.333333333333336%; -} + .row .col.offset-xxl4 { + margin-left: calc(100% / 3); + } -.row .col.offset-s5 { - margin-left: 41.66666666666667%; + .row .col.offset-xxl6 { + margin-left: 50%; + } } -.row .col.offset-s6 { - margin-left: 50%; -} +@media (min-width: 2560px) { + .row .col.r1 { + width: calc(100% / 12); + } -.row .col.offset-s7 { - margin-left: 58.333333333333336%; -} + .row .col.r2 { + width: calc(100% / 6); + } -.row .col.offset-s8 { - margin-left: 66.66666666666667%; -} + .row .col.r3 { + width: 25%; + } -.row .col.offset-s9 { - margin-left: 75%; -} + .row .col.r4 { + width: calc(100% / 3); + } -.row .col.offset-s10 { - margin-left: 83.33333333333334%; -} + .row .col.r6 { + width: 50%; + } -.row .col.offset-s11 { - margin-left: 91.66666666666667%; -} + .row .col.r7 { + width: calc(100% / (12/7)); + } -@media (min-width: 601px) { - .row .col.m1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; - } - - .row .col.m2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; - } - - .row .col.m3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - - .row .col.m4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; - } - - .row .col.m5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; - } - - .row .col.m6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - - .row .col.m7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; - } - - .row .col.m8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; - } - - .row .col.m9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - - .row .col.m10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; - } - - .row .col.m11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; - } - - .row .col.m12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - - .row .col.offset-m1 { - margin-left: 8.333333333333334%; - } - - .row .col.offset-m2 { - margin-left: 16.666666666666668%; - } - - .row .col.offset-m3 { - margin-left: 25%; - } - - .row .col.offset-m4 { - margin-left: 33.333333333333336%; - } - - .row .col.offset-m5 { - margin-left: 41.66666666666667%; - } - - .row .col.offset-m6 { - margin-left: 50%; - } - - .row .col.offset-m7 { - margin-left: 58.333333333333336%; - } - - .row .col.offset-m8 { - margin-left: 66.66666666666667%; - } - - .row .col.offset-m9 { - margin-left: 75%; - } - - .row .col.offset-m10 { - margin-left: 83.33333333333334%; - } - - .row .col.offset-m11 { - margin-left: 91.66666666666667%; - } + .row .col.r8 { + width: calc(100% / (12/8)); + } -} + .row .col.r9 { + width: calc(100% / (12/9)); + } -@media (min-width: 992px) { - .row .col.l1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; - } - - .row .col.l2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; - } - - .row .col.l3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - - .row .col.l4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; - } - - .row .col.l5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; - } - - .row .col.l6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - - .row .col.l7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; - } - - .row .col.l8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; - } - - .row .col.l9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - - .row .col.l10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; - } - - .row .col.l11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; - } - - .row .col.l12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - - .row .col.offset-l1 { - margin-left: 8.333333333333334%; - } - - .row .col.offset-l2 { - margin-left: 16.666666666666668%; - } - - .row .col.offset-l3 { - margin-left: 25%; - } - - .row .col.offset-l4 { - margin-left: 33.333333333333336%; - } - - .row .col.offset-l5 { - margin-left: 41.66666666666667%; - } - - .row .col.offset-l6 { - margin-left: 50%; - } - - .row .col.offset-l7 { - margin-left: 58.333333333333336%; - } - - .row .col.offset-l8 { - margin-left: 66.66666666666667%; - } - - .row .col.offset-l9 { - margin-left: 75%; - } - - .row .col.offset-l10 { - margin-left: 83.33333333333334%; - } - - .row .col.offset-l11 { - margin-left: 91.66666666666667%; - } + .row .col.r10 { + width: calc(100% / (12/10)); + } -} + .row .col.r11 { + width: calc(100% / (12/11)); + } -@media (min-width: 1200px) { - .row .col.xl1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; - } - - .row .col.xl2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; - } - - .row .col.xl3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - - .row .col.xl4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; - } - - .row .col.xl5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; - } - - .row .col.xl6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - - .row .col.xl7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; - } - - .row .col.xl8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; - } - - .row .col.xl9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - - .row .col.xl10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; - } - - .row .col.xl11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; - } - - .row .col.xl12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - - .row .col.offset-xl1 { - margin-left: 8.333333333333334%; - } - - .row .col.offset-xl2 { - margin-left: 16.666666666666668%; - } - - .row .col.offset-xl3 { - margin-left: 25%; - } - - .row .col.offset-xl4 { - margin-left: 33.333333333333336%; - } - - .row .col.offset-xl5 { - margin-left: 41.66666666666667%; - } - - .row .col.offset-xl6 { - margin-left: 50%; - } - - .row .col.offset-xl7 { - margin-left: 58.333333333333336%; - } - - .row .col.offset-xl8 { - margin-left: 66.66666666666667%; - } - - .row .col.offset-xl9 { - margin-left: 75%; - } - - .row .col.offset-xl10 { - margin-left: 83.33333333333334%; - } - - .row .col.offset-xl11 { - margin-left: 91.66666666666667%; - } + .row .col.r12 { + width: 100%; + } -} + .row .col.offset-r1 { + margin-left: calc(100% / 12); + } -@media (min-width: 1900px) { - .row .col.xxl1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; - } - - .row .col.xxl2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; - } - - .row .col.xxl3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - - .row .col.xxl4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; - } - - .row .col.xxl5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; - } - - .row .col.xxl6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - - .row .col.xxl7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; - } - - .row .col.xxl8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; - } - - .row .col.xxl9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - - .row .col.xxl10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; - } - - .row .col.xxl11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; - } - - .row .col.xxl12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - - .row .col.offset-xxl1 { - margin-left: 8.333333333333334%; - } - - .row .col.offset-xxl2 { - margin-left: 16.666666666666668%; - } - - .row .col.offset-xxl3 { - margin-left: 25%; - } - - .row .col.offset-xxl4 { - margin-left: 33.333333333333336%; - } - - .row .col.offset-xxl5 { - margin-left: 41.66666666666667%; - } - - .row .col.offset-xxl6 { - margin-left: 50%; - } - - .row .col.offset-xxl7 { - margin-left: 58.333333333333336%; - } - - .row .col.offset-xxl8 { - margin-left: 66.66666666666667%; - } - - .row .col.offset-xxl9 { - margin-left: 75%; - } - - .row .col.offset-xxl10 { - margin-left: 83.33333333333334%; - } - - .row .col.offset-xxl11 { - margin-left: 91.66666666666667%; - } + .row .col.offset-r2 { + margin-left: calc(100% / 6); + } -} + .row .col.offset-r3 { + margin-left: 25%; + } -@media (min-width: 2560px) { - .row .col.r1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; - } - - .row .col.r2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; - } - - .row .col.r3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - - .row .col.r4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; - } - - .row .col.r5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; - } - - .row .col.r6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - - .row .col.r7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; - } - - .row .col.r8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; - } - - .row .col.r9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - - .row .col.r10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; - } - - .row .col.r11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; - } - - .row .col.r12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - - .row .col.offset-r1 { - margin-left: 8.333333333333334%; - } - - .row .col.offset-r2 { - margin-left: 16.666666666666668%; - } - - .row .col.offset-r3 { - margin-left: 25%; - } - - .row .col.offset-r4 { - margin-left: 33.333333333333336%; - } - - .row .col.offset-r5 { - margin-left: 41.66666666666667%; - } - - .row .col.offset-r6 { - margin-left: 50%; - } - - .row .col.offset-r7 { - margin-left: 58.333333333333336%; - } - - .row .col.offset-r8 { - margin-left: 66.66666666666667%; - } - - .row .col.offset-r9 { - margin-left: 75%; - } - - .row .col.offset-r10 { - margin-left: 83.33333333333334%; - } - - .row .col.offset-r11 { - margin-left: 91.66666666666667%; - } + .row .col.offset-r4 { + margin-left: calc(100% / 3); + } + .row .col.offset-r6 { + margin-left: 50%; + } } /** * ============================== @@ -2469,7 +665,9 @@ th { * ============================== */ -.full-hero, .hero, .hero-transparent { +.full-hero, +.hero, +.hero-transparent { height: 100%; color: #fff; background-repeat: no-repeat; @@ -2483,21 +681,22 @@ th { .hero::before, .full-hero::before { content: ''; - width: 100%; - height: 100%; - background: rgba(0,0,0,0.5); - display: block; - position: absolute; - top: 0; - left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + display: block; + position: absolute; + top: 0; + left: 0; } .hero.light::before, -.full-hero.light::before{ - background: rgba(255, 255, 255, 0.5); +.full-hero.light::before { + background: rgba(255, 255, 255, 0.5); } -.hero, .hero-transparent { +.hero, +.hero-transparent { height: 50%; } /** @@ -2523,10 +722,10 @@ th { .middle { top: 50%; left: 50%; - -webkit-transform: translate(-50%,-50%); - -moz-transform: translate(-50%,-50%); - -o-transform: translate(-50%,-50%); - -ms-transform: translate(-50%,-50%); + -webkit-transform: translate(-50%, -50%); + -moz-transform: translate(-50%, -50%); + -o-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); position: absolute; } @@ -2734,7 +933,6 @@ th { height: 100%; float: left; max-height: 100%; - } .wrapper.offset-sn-m { @@ -2790,7 +988,6 @@ th { height: 100%; float: left; max-height: 100%; - } .wrapper.offset-sn-l { @@ -2846,7 +1043,6 @@ th { height: 100%; float: left; max-height: 100%; - } .wrapper.offset-sn-xl { @@ -2861,21 +1057,21 @@ th { */ .circle { - background: #ddd; - border-radius: 50%; - height: 0; - padding-bottom: 100%; - width: 100%; + background: #ddd; + border-radius: 50%; + height: 0; + padding-bottom: 100%; + width: 100%; } .circle-content { - color: #fff; - float: left; - line-height: 1; - margin-top: -0.5em; - padding-top: 50%; - text-align: center; - width: 100%; + color: #fff; + float: left; + line-height: 1; + margin-top: -0.5em; + padding-top: 50%; + text-align: center; + width: 100%; } /** * ============================== @@ -2893,8 +1089,8 @@ code, kbd, pre, samp { - font-family: monospace, monospace; - font-size: 1em; + font-family: monospace, monospace; + font-size: 1em; } /** * ============================== @@ -2938,16 +1134,23 @@ samp { * ============================== */ -*, *:before, *:after { +*, +*:before, +*:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } -.container { - margin: 0 auto; - max-width: 60rem; - width: 95%; +::-webkit-scrollbar { + background: transparent; + width: 5px; + height: 5px; +} + +::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.2); + border-radius: 3px; } .clearfix:before, @@ -2964,6 +1167,10 @@ samp { *zoom: 1; } -.no-scrollbar::-webkit-scrollbar { - width: 0 !important; +::selection { + background: rgba(0, 188, 212, 0.2); +} + +::-moz-selection { + background: rgba(0, 188, 212, 0.2); } \ No newline at end of file diff --git a/dist/kayros.min.css b/dist/kayros.min.css index f2efcce..4999264 100644 --- a/dist/kayros.min.css +++ b/dist/kayros.min.css @@ -1,2 +1,2 @@ -/* Kayros 0.1.0 | MIT License | http://aegisframework.com/ */ -html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body,html{overflow-x:hidden;height:100%;width:100%}body{font-size:100%;color:#424242}body,h1,h2,h3,h4,h5,h6{margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{text-decoration:none;color:inherit;cursor:pointer;background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none;-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none;border:0;max-width:100%}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}optgroup{font-weight:700}button,input{overflow:visible}button,select{-webkit-appearance:none;-moz-appearance:none;border:none;outline:none;text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{resize:none;overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}.unselectable,img{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.container,.row .col{box-sizing:border-box;padding-left:1rem;padding-right:1rem}.row{box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:box;display:flex;-webkit-box-lines:multiple;-moz-box-lines:multiple;-o-box-lines:multiple;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-1rem;margin-right:-1rem;align-content:center;align-items:center}.row.align-center{justify-content:center}.row.stretch{align-content:stretch}.row.around{align-content:space-around}.row.align-left{justify-content:flex-start}.row.align-right{justify-content:flex-end}.row.align-center-between{justify-content:space-between}.row.align-center-around{justify-content:space-around}.row .col.auto{-webkit-box-flex:1;-o-box-flex:1;box-flex:1;-ms-flex:1 1 0!important;flex:1 1 0!important}.row>div{flex-basis:100%}.row .col.s1{flex-basis:8.333333333333334%}.row .col.s2{flex-basis:16.666666666666668%}.row .col.s3{flex-basis:25%}.row .col.s4{flex-basis:33.333333333333336%}.row .col.s5{flex-basis:41.66666666666667%}.row .col.s6{flex-basis:50%}.row .col.s7{flex-basis:58.333333333333336%}.row .col.s8{flex-basis:66.66666666666667%}.row .col.s9{flex-basis:75%}.row .col.s10{flex-basis:83.33333333333334%}.row .col.s11{flex-basis:91.66666666666667%}.row .col.s12{flex-basis:100%}.row .col.offset-s1{margin-left:8.333333333333334%}.row .col.offset-s2{margin-left:16.666666666666668%}.row .col.offset-s3{margin-left:25%}.row .col.offset-s4{margin-left:33.333333333333336%}.row .col.offset-s5{margin-left:41.66666666666667%}.row .col.offset-s6{margin-left:50%}.row .col.offset-s7{margin-left:58.333333333333336%}.row .col.offset-s8{margin-left:66.66666666666667%}.row .col.offset-s9{margin-left:75%}.row .col.offset-s10{margin-left:83.33333333333334%}.row .col.offset-s11{margin-left:91.66666666666667%}@media (min-width:601px){.row .col.m1{flex-basis:8.333333333333334%}.row .col.m2{flex-basis:16.666666666666668%}.row .col.m3{flex-basis:25%}.row .col.m4{flex-basis:33.333333333333336%}.row .col.m5{flex-basis:41.66666666666667%}.row .col.m6{flex-basis:50%}.row .col.m7{flex-basis:58.333333333333336%}.row .col.m8{flex-basis:66.66666666666667%}.row .col.m9{flex-basis:75%}.row .col.m10{flex-basis:83.33333333333334%}.row .col.m11{flex-basis:91.66666666666667%}.row .col.m12{flex-basis:100%}.row .col.offset-m1{margin-left:8.333333333333334%}.row .col.offset-m2{margin-left:16.666666666666668%}.row .col.offset-m3{margin-left:25%}.row .col.offset-m4{margin-left:33.333333333333336%}.row .col.offset-m5{margin-left:41.66666666666667%}.row .col.offset-m6{margin-left:50%}.row .col.offset-m7{margin-left:58.333333333333336%}.row .col.offset-m8{margin-left:66.66666666666667%}.row .col.offset-m9{margin-left:75%}.row .col.offset-m10{margin-left:83.33333333333334%}.row .col.offset-m11{margin-left:91.66666666666667%}}@media (min-width:992px){.row .col.l1{flex-basis:8.333333333333334%}.row .col.l2{flex-basis:16.666666666666668%}.row .col.l3{flex-basis:25%}.row .col.l4{flex-basis:33.333333333333336%}.row .col.l5{flex-basis:41.66666666666667%}.row .col.l6{flex-basis:50%}.row .col.l7{flex-basis:58.333333333333336%}.row .col.l8{flex-basis:66.66666666666667%}.row .col.l9{flex-basis:75%}.row .col.l10{flex-basis:83.33333333333334%}.row .col.l11{flex-basis:91.66666666666667%}.row .col.l12{flex-basis:100%}.row .col.offset-l1{margin-left:8.333333333333334%}.row .col.offset-l2{margin-left:16.666666666666668%}.row .col.offset-l3{margin-left:25%}.row .col.offset-l4{margin-left:33.333333333333336%}.row .col.offset-l5{margin-left:41.66666666666667%}.row .col.offset-l6{margin-left:50%}.row .col.offset-l7{margin-left:58.333333333333336%}.row .col.offset-l8{margin-left:66.66666666666667%}.row .col.offset-l9{margin-left:75%}.row .col.offset-l10{margin-left:83.33333333333334%}.row .col.offset-l11{margin-left:91.66666666666667%}}@media (min-width:1200px){.row .col.xl1{flex-basis:8.333333333333334%}.row .col.xl2{flex-basis:16.666666666666668%}.row .col.xl3{flex-basis:25%}.row .col.xl4{flex-basis:33.333333333333336%}.row .col.xl5{flex-basis:41.66666666666667%}.row .col.xl6{flex-basis:50%}.row .col.xl7{flex-basis:58.333333333333336%}.row .col.xl8{flex-basis:66.66666666666667%}.row .col.xl9{flex-basis:75%}.row .col.xl10{flex-basis:83.33333333333334%}.row .col.xl11{flex-basis:91.66666666666667%}.row .col.xl12{flex-basis:100%}.row .col.offset-xl1{margin-left:8.333333333333334%}.row .col.offset-xl2{margin-left:16.666666666666668%}.row .col.offset-xl3{margin-left:25%}.row .col.offset-xl4{margin-left:33.333333333333336%}.row .col.offset-xl5{margin-left:41.66666666666667%}.row .col.offset-xl6{margin-left:50%}.row .col.offset-xl7{margin-left:58.333333333333336%}.row .col.offset-xl8{margin-left:66.66666666666667%}.row .col.offset-xl9{margin-left:75%}.row .col.offset-xl10{margin-left:83.33333333333334%}.row .col.offset-xl11{margin-left:91.66666666666667%}}@media (min-width:1900px){.row .col.xxl1{flex-basis:8.333333333333334%}.row .col.xxl2{flex-basis:16.666666666666668%}.row .col.xxl3{flex-basis:25%}.row .col.xxl4{flex-basis:33.333333333333336%}.row .col.xxl5{flex-basis:41.66666666666667%}.row .col.xxl6{flex-basis:50%}.row .col.xxl7{flex-basis:58.333333333333336%}.row .col.xxl8{flex-basis:66.66666666666667%}.row .col.xxl9{flex-basis:75%}.row .col.xxl10{flex-basis:83.33333333333334%}.row .col.xxl11{flex-basis:91.66666666666667%}.row .col.xxl12{flex-basis:100%}.row .col.offset-xxl1{margin-left:8.333333333333334%}.row .col.offset-xxl2{margin-left:16.666666666666668%}.row .col.offset-xxl3{margin-left:25%}.row .col.offset-xxl4{margin-left:33.333333333333336%}.row .col.offset-xxl5{margin-left:41.66666666666667%}.row .col.offset-xxl6{margin-left:50%}.row .col.offset-xxl7{margin-left:58.333333333333336%}.row .col.offset-xxl8{margin-left:66.66666666666667%}.row .col.offset-xxl9{margin-left:75%}.row .col.offset-xxl10{margin-left:83.33333333333334%}.row .col.offset-xxl11{margin-left:91.66666666666667%}}@media (min-width:2560px){.row .col.r1{flex-basis:8.333333333333334%}.row .col.r2{flex-basis:16.666666666666668%}.row .col.r3{flex-basis:25%}.row .col.r4{flex-basis:33.333333333333336%}.row .col.r5{flex-basis:41.66666666666667%}.row .col.r6{flex-basis:50%}.row .col.r7{flex-basis:58.333333333333336%}.row .col.r8{flex-basis:66.66666666666667%}.row .col.r9{flex-basis:75%}.row .col.r10{flex-basis:83.33333333333334%}.row .col.r11{flex-basis:91.66666666666667%}.row .col.r12{flex-basis:100%}.row .col.offset-r1{margin-left:8.333333333333334%}.row .col.offset-r2{margin-left:16.666666666666668%}.row .col.offset-r3{margin-left:25%}.row .col.offset-r4{margin-left:33.333333333333336%}.row .col.offset-r5{margin-left:41.66666666666667%}.row .col.offset-r6{margin-left:50%}.row .col.offset-r7{margin-left:58.333333333333336%}.row .col.offset-r8{margin-left:66.66666666666667%}.row .col.offset-r9{margin-left:75%}.row .col.offset-r10{margin-left:83.33333333333334%}.row .col.offset-r11{margin-left:91.66666666666667%}}.scroll-x{overflow-x:scroll}.full-hero,.hero,.hero-transparent{height:100%;color:#fff;background-repeat:no-repeat;background-position:50%;background-size:cover;text-align:center;position:relative;overflow:hidden}.full-hero:before,.hero:before{content:"";width:100%;height:100%;background:rgba(0,0,0,.5);display:block;position:absolute;top:0;left:0}.full-hero.light:before,.hero.light:before{background:hsla(0,0%,100%,.5)}.hero,.hero-transparent{height:50%}.vertical>*{display:block}.horizontal>*{display:inline-block}.bottom{bottom:0;margin:0}.bottom,.middle{position:absolute}.middle{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}.center{margin:0 auto;left:0;right:0}.left{left:0}.right{right:0}.align-center{text-align:center}.align-left{text-align:left}.align-right{text-align:right}.align-justify{text-align:justify}.padded-0{padding:0}.padded-1{padding:1em}.padded-2{padding:2em}.padded-3{padding:3em}.padded-4{padding:4em}.padded-5{padding:5em}.wrapper{width:100%;height:100%}.nav{width:100%;text-align:right;z-index:1;background-color:#fff;min-height:3em}.nav .logo{float:left;display:inline-block;padding:1rem;max-width:50%;vertical-align:middle;max-height:3em;overflow:hidden;font-size:inherit}.nav img.logo{padding:.5em}.nav .logo img{max-width:100%;max-height:3em}.nav h1.logo{margin-left:.1em}.nav.fixed{position:fixed;overflow:auto;max-height:100%}.nav>ul{margin:0;padding:0;display:none;width:auto}.nav>ul.active,.nav ul>li{display:block}.nav ul>li{width:100%;list-style:none;cursor:pointer;text-align:center}.nav ul>li>a{padding:1em;display:block}.nav ul>li:empty{padding:1em}.nav li a:hover{background-color:rgba(0,0,0,.1)}.nav .menu-icon{padding:1em;text-align:right;right:0;display:inline-block;cursor:pointer;vertical-align:middle}.offset-sn-l,.offset-sn-m,.offset-tn{margin-top:2em}@media (min-width:601px){.nav.top-m>.logo{max-width:30%}.nav.top-m>ul{display:inline-block;max-width:70%;max-height:100%}.nav.top-m>ul.full{width:100%;max-width:100%;text-align:center}.nav.top-m>ul>li{display:inline-block;width:auto}.nav.side-m .menu-icon,.nav.top-m .menu-icon{display:none}.nav.side-m .logo{float:none;display:block;text-align:center;max-height:7em;margin:0 auto;max-width:100%;padding:1em}.nav.side-m>ul{display:block}.nav.side-m{width:30%;height:100%;float:left;max-height:100%}.wrapper.offset-sn-m{width:70%;float:right;margin-top:0}}@media (min-width:992px){.nav.top-l>.logo{max-width:20%}.nav.top-l>ul{display:inline-block;max-width:80%;max-height:100%}.nav.top-l>ul.full{width:100%;max-width:100%;text-align:center}.nav.top-l>ul>li{display:inline-block;width:auto}.nav.side-l .menu-icon,.nav.top-l .menu-icon{display:none}.nav.side-l .logo{float:none;display:block;text-align:center;max-height:7em;margin:0 auto;max-width:100%;padding:1em}.nav.side-l>ul{display:block}.nav.side-l{width:20%;height:100%;float:left;max-height:100%}.wrapper.offset-sn-l{width:80%;float:right;margin-top:0}}@media (min-width:1200px){.nav.top-xl>.logo{max-width:30%}.nav.top-xl>ul{display:inline-block;max-width:80%;max-height:100%}.nav.top-xl>ul.full{width:100%;max-width:100%;text-align:center}.nav.top-xl>ul>li{display:inline-block;width:auto}.nav.side-xl .menu-icon,.nav.top-xl .menu-icon{display:none}.nav.side-xl .logo{float:none;display:block;text-align:center;max-height:7em;margin:0 auto;max-width:100%;padding:1em}.nav.side-xl>ul{display:block}.nav.side-xl{width:20%;height:100%;float:left;max-height:100%}.wrapper.offset-sn-xl{width:80%;float:right}}.circle{background:#ddd;border-radius:50%;height:0;padding-bottom:100%;width:100%}.circle-content{color:#fff;float:left;line-height:1;margin-top:-.5em;padding-top:50%;text-align:center;width:100%}pre{background:#f5f5f5;padding:1em;overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}.md-depth-1{border:1px solid rgba(0,0,0,.1)}.md-depth-2{box-shadow:0 1.5px 4px rgba(0,0,0,.24),0 1.5px 6px rgba(0,0,0,.12)}.md-depth-3{box-shadow:0 3px 12px rgba(0,0,0,.23),0 3px 12px rgba(0,0,0,.16)}.md-depth-4{box-shadow:0 6px 12px rgba(0,0,0,.23),0 10px 40px rgba(0,0,0,.19)}.md-depth-5{box-shadow:0 10px 20px rgba(0,0,0,.22),0 14px 56px rgba(0,0,0,.25)}.md-depth-6{box-shadow:0 15px 24px rgba(0,0,0,.22),0 19px 76px rgba(0,0,0,.3)}.md-separator{margin:0;margin-bottom:.5em;border:1px solid #ddd;border-bottom:0}*,:after,:before{box-sizing:border-box}.container{margin:0 auto;max-width:60rem;width:95%}.clearfix:after,.clearfix:before{content:" ";display:table}.clearfix:after{clear:both}.clearfix{*zoom:1}.no-scrollbar::-webkit-scrollbar{width:0!important} \ No newline at end of file +/* Kayros 0.1.1 | MIT License | http://aegisframework.com/ */ +html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body,html{overflow-x:hidden;height:100%;width:100%}body{font-size:100%;color:#424242}body,h1,h2,h3,h4,h5,h6{margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{text-decoration:none;color:inherit;cursor:pointer;background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none;-webkit-user-drag:none;-webkit-touch-callout:none;border:0;max-width:100%}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}optgroup{font-weight:700}button,input{overflow:visible}button,select{-webkit-appearance:none;-moz-appearance:none;border:none;outline:none;text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{resize:none;overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}.unselectable,img{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.row{display:-webkit-box;display:-ms-flexbox;display:flex;flex-direction:row;align-items:center;align-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;width:100%}.row.align-center{justify-content:center}.row.stretch{align-content:stretch}.row.around{align-content:space-around}.row.align-left{justify-content:flex-start}.row.align-right{justify-content:flex-end}.row.align-center-between{justify-content:space-between}.row.align-center-around{justify-content:space-around}.row .col{flex-grow:0;flex-shrink:0;flex-basis:auto}.row .col.auto{-webkit-box-flex:1;-o-box-flex:1;-ms-flex:1 1 0!important;flex:1 1 0!important}.row .col.s1{width:8.33333%}.row .col.s2{width:16.66667%}.row .col.s3{width:25%}.row .col.s4{width:33.33333%}.row .col.s6{width:50%}.row .col.s12{width:100%}.row .col.offset-s1{margin-left:8.33333%}.row .col.offset-s2{margin-left:16.66667%}.row .col.offset-s3{margin-left:25%}.row .col.offset-s4{margin-left:33.33333%}.row .col.offset-s6{margin-left:50%}@media (min-width:601px){.row .col.m1{width:8.33333%}.row .col.m2{width:16.66667%}.row .col.m3{width:25%}.row .col.m4{width:33.33333%}.row .col.m6{width:50%}.row .col.m12{width:100%}.row .col.offset-m1{margin-left:8.33333%}.row .col.offset-m2{margin-left:16.66667%}.row .col.offset-m3{margin-left:25%}.row .col.offset-m4{margin-left:33.33333%}.row .col.offset-m6{margin-left:50%}}@media (min-width:992px){.row .col.l1{width:8.33333%}.row .col.l2{width:16.66667%}.row .col.l3{width:25%}.row .col.l4{width:33.33333%}.row .col.l6{width:50%}.row .col.l12{width:100%}.row .col.offset-l1{margin-left:8.33333%}.row .col.offset-l2{margin-left:16.66667%}.row .col.offset-l3{margin-left:25%}.row .col.offset-l4{margin-left:33.33333%}.row .col.offset-l6{margin-left:50%}}@media (min-width:1200px){.row .col.xl1{width:8.33333%}.row .col.xl2{width:16.66667%}.row .col.xl3{width:25%}.row .col.xl4{width:33.33333%}.row .col.xl6{width:50%}.row .col.xl12{width:100%}.row .col.offset-xl1{margin-left:8.33333%}.row .col.offset-xl2{margin-left:16.66667%}.row .col.offset-xl3{margin-left:25%}.row .col.offset-xl4{margin-left:33.33333%}.row .col.offset-xl6{margin-left:50%}}@media (min-width:1900px){.row .col.xxl1{width:8.33333%}.row .col.xxl2{width:16.66667%}.row .col.xxl3{width:25%}.row .col.xxl4{width:33.33333%}.row .col.xxl6{width:50%}.row .col.xxl12{width:100%}.row .col.offset-xxl1{margin-left:8.33333%}.row .col.offset-xxl2{margin-left:16.66667%}.row .col.offset-xxl3{margin-left:25%}.row .col.offset-xxl4{margin-left:33.33333%}.row .col.offset-xxl6{margin-left:50%}}@media (min-width:2560px){.row .col.r1{width:8.33333%}.row .col.r2{width:16.66667%}.row .col.r3{width:25%}.row .col.r4{width:33.33333%}.row .col.r6{width:50%}.row .col.r7{width:58.33333%}.row .col.r8{width:66.66667%}.row .col.r9{width:75%}.row .col.r10{width:83.33333%}.row .col.r11{width:91.66667%}.row .col.r12{width:100%}.row .col.offset-r1{margin-left:8.33333%}.row .col.offset-r2{margin-left:16.66667%}.row .col.offset-r3{margin-left:25%}.row .col.offset-r4{margin-left:33.33333%}.row .col.offset-r6{margin-left:50%}}.scroll-x{overflow-x:scroll}.full-hero,.hero,.hero-transparent{height:100%;color:#fff;background-repeat:no-repeat;background-position:50%;background-size:cover;text-align:center;position:relative;overflow:hidden}.full-hero:before,.hero:before{content:"";width:100%;height:100%;background:rgba(0,0,0,.5);display:block;position:absolute;top:0;left:0}.full-hero.light:before,.hero.light:before{background:hsla(0,0%,100%,.5)}.hero,.hero-transparent{height:50%}.vertical>*{display:block}.horizontal>*{display:inline-block}.bottom{bottom:0;margin:0}.bottom,.middle{position:absolute}.middle{top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}.center{margin:0 auto;left:0;right:0}.left{left:0}.right{right:0}.align-center{text-align:center}.align-left{text-align:left}.align-right{text-align:right}.align-justify{text-align:justify}.padded-0{padding:0}.padded-1{padding:1em}.padded-2{padding:2em}.padded-3{padding:3em}.padded-4{padding:4em}.padded-5{padding:5em}.wrapper{width:100%;height:100%}.nav{width:100%;text-align:right;z-index:1;background-color:#fff;min-height:3em}.nav .logo{float:left;display:inline-block;padding:1rem;max-width:50%;vertical-align:middle;max-height:3em;overflow:hidden;font-size:inherit}.nav img.logo{padding:.5em}.nav .logo img{max-width:100%;max-height:3em}.nav h1.logo{margin-left:.1em}.nav.fixed{position:fixed;overflow:auto;max-height:100%}.nav>ul{margin:0;padding:0;display:none;width:auto}.nav>ul.active,.nav ul>li{display:block}.nav ul>li{width:100%;list-style:none;cursor:pointer;text-align:center}.nav ul>li>a{padding:1em;display:block}.nav ul>li:empty{padding:1em}.nav li a:hover{background-color:rgba(0,0,0,.1)}.nav .menu-icon{padding:1em;text-align:right;right:0;display:inline-block;cursor:pointer;vertical-align:middle}.offset-sn-l,.offset-sn-m,.offset-tn{margin-top:2em}@media (min-width:601px){.nav.top-m>.logo{max-width:30%}.nav.top-m>ul{display:inline-block;max-width:70%;max-height:100%}.nav.top-m>ul.full{width:100%;max-width:100%;text-align:center}.nav.top-m>ul>li{display:inline-block;width:auto}.nav.side-m .menu-icon,.nav.top-m .menu-icon{display:none}.nav.side-m .logo{float:none;display:block;text-align:center;max-height:7em;margin:0 auto;max-width:100%;padding:1em}.nav.side-m>ul{display:block}.nav.side-m{width:30%;height:100%;float:left;max-height:100%}.wrapper.offset-sn-m{width:70%;float:right;margin-top:0}}@media (min-width:992px){.nav.top-l>.logo{max-width:20%}.nav.top-l>ul{display:inline-block;max-width:80%;max-height:100%}.nav.top-l>ul.full{width:100%;max-width:100%;text-align:center}.nav.top-l>ul>li{display:inline-block;width:auto}.nav.side-l .menu-icon,.nav.top-l .menu-icon{display:none}.nav.side-l .logo{float:none;display:block;text-align:center;max-height:7em;margin:0 auto;max-width:100%;padding:1em}.nav.side-l>ul{display:block}.nav.side-l{width:20%;height:100%;float:left;max-height:100%}.wrapper.offset-sn-l{width:80%;float:right;margin-top:0}}@media (min-width:1200px){.nav.top-xl>.logo{max-width:30%}.nav.top-xl>ul{display:inline-block;max-width:80%;max-height:100%}.nav.top-xl>ul.full{width:100%;max-width:100%;text-align:center}.nav.top-xl>ul>li{display:inline-block;width:auto}.nav.side-xl .menu-icon,.nav.top-xl .menu-icon{display:none}.nav.side-xl .logo{float:none;display:block;text-align:center;max-height:7em;margin:0 auto;max-width:100%;padding:1em}.nav.side-xl>ul{display:block}.nav.side-xl{width:20%;height:100%;float:left;max-height:100%}.wrapper.offset-sn-xl{width:80%;float:right}}.circle{background:#ddd;border-radius:50%;height:0;padding-bottom:100%;width:100%}.circle-content{color:#fff;float:left;line-height:1;margin-top:-.5em;padding-top:50%;text-align:center;width:100%}pre{background:#f5f5f5;padding:1em;overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}.md-depth-1{border:1px solid rgba(0,0,0,.1)}.md-depth-2{box-shadow:0 1.5px 4px rgba(0,0,0,.24),0 1.5px 6px rgba(0,0,0,.12)}.md-depth-3{box-shadow:0 3px 12px rgba(0,0,0,.23),0 3px 12px rgba(0,0,0,.16)}.md-depth-4{box-shadow:0 6px 12px rgba(0,0,0,.23),0 10px 40px rgba(0,0,0,.19)}.md-depth-5{box-shadow:0 10px 20px rgba(0,0,0,.22),0 14px 56px rgba(0,0,0,.25)}.md-depth-6{box-shadow:0 15px 24px rgba(0,0,0,.22),0 19px 76px rgba(0,0,0,.3)}.md-separator{margin:0;margin-bottom:.5em;border:1px solid #ddd;border-bottom:0}*,:after,:before{box-sizing:border-box}::-webkit-scrollbar{background:transparent;width:5px;height:5px}::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:3px}.clearfix:after,.clearfix:before{content:" ";display:table}.clearfix:after{clear:both}.clearfix{*zoom:1}::selection{background:rgba(0,188,212,.2)}::-moz-selection{background:rgba(0,188,212,.2)} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..3bf6858 --- /dev/null +++ b/index.html @@ -0,0 +1,202 @@ + + + + + + + + + Kayros Test File + + + + + + + + + + + + +
+

Grid

+
+
+
+ Column s12 +
+
+ +
+
+ Column s6 +
+
+ +
+
+ Column s6 +
+
+ +
+
+ Column s4 +
+
+ +
+
+ Column s4 +
+
+
+
+ Column s4 +
+
+ +
+
+ Column s3 +
+
+
+
+ Column s3 +
+
+
+
+ Column s3 +
+
+
+
+ Column s3 +
+
+ +
+
+ Column s2 +
+
+ +
+
+ Column s2 +
+
+ +
+
+ Column s2 +
+
+ +
+
+ Column s2 +
+
+ +
+
+ Column s2 +
+
+ +
+
+ Column s2 +
+
+ +
+
+ Column s1 +
+
+ +
+
+ Column s1 +
+
+ +
+
+ Column s1 +
+
+ +
+
+ Column s1 +
+
+ +
+
+ Column s1 +
+
+ +
+
+ Column s1 +
+
+ +
+
+ Column s1 +
+
+ +
+
+ Column s1 +
+
+ +
+
+ Column s1 +
+
+ +
+
+ Column s1 +
+
+ +
+
+ Column s1 +
+
+ +
+
+ Column s1 +
+
+ +
+
+ + \ No newline at end of file diff --git a/package.json b/package.json index a8ee39a..c6bd8c4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "kayros", - "version": "0.1.0", + "version": "0.1.1", "description": "Aegis CSS Library", "main": "gulpfile.js", "repository": { @@ -26,4 +26,4 @@ "gulp-header": "^1.8.8", "gulp-rename": "^1.2.2" } -} +} \ No newline at end of file diff --git a/src/alignment.css b/src/alignment.css index ccb90dd..d270e52 100644 --- a/src/alignment.css +++ b/src/alignment.css @@ -21,10 +21,10 @@ .middle { top: 50%; left: 50%; - -webkit-transform: translate(-50%,-50%); - -moz-transform: translate(-50%,-50%); - -o-transform: translate(-50%,-50%); - -ms-transform: translate(-50%,-50%); + -webkit-transform: translate(-50%, -50%); + -moz-transform: translate(-50%, -50%); + -o-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); position: absolute; } diff --git a/src/circles.css b/src/circles.css index 0e11c3e..66b8143 100644 --- a/src/circles.css +++ b/src/circles.css @@ -5,19 +5,19 @@ */ .circle { - background: #ddd; - border-radius: 50%; - height: 0; - padding-bottom: 100%; - width: 100%; + background: #ddd; + border-radius: 50%; + height: 0; + padding-bottom: 100%; + width: 100%; } .circle-content { - color: #fff; - float: left; - line-height: 1; - margin-top: -0.5em; - padding-top: 50%; - text-align: center; - width: 100%; + color: #fff; + float: left; + line-height: 1; + margin-top: -0.5em; + padding-top: 50%; + text-align: center; + width: 100%; } \ No newline at end of file diff --git a/src/code.css b/src/code.css index 5a8f002..0163c32 100644 --- a/src/code.css +++ b/src/code.css @@ -14,6 +14,6 @@ code, kbd, pre, samp { - font-family: monospace, monospace; - font-size: 1em; + font-family: monospace, monospace; + font-size: 1em; } \ No newline at end of file diff --git a/src/fixes.css b/src/fixes.css index d6d1f21..6ab1bc3 100644 --- a/src/fixes.css +++ b/src/fixes.css @@ -4,16 +4,23 @@ * ============================== */ -*, *:before, *:after { +*, +*:before, +*:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } -.container { - margin: 0 auto; - max-width: 60rem; - width: 95%; +::-webkit-scrollbar { + background: transparent; + width: 5px; + height: 5px; +} + +::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.2); + border-radius: 3px; } .clearfix:before, @@ -30,6 +37,10 @@ *zoom: 1; } -.no-scrollbar::-webkit-scrollbar { - width: 0 !important; +::selection { + background: rgba(0, 188, 212, 0.2); +} + +::-moz-selection { + background: rgba(0, 188, 212, 0.2); } \ No newline at end of file diff --git a/src/grid.css b/src/grid.css index 75a11c5..a203492 100644 --- a/src/grid.css +++ b/src/grid.css @@ -4,40 +4,23 @@ * ============================== */ -.container, -.row .col { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - padding-left: 1rem; - padding-right: 1rem; -} - .row { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - display: -webkit-box; - display: -moz-box; - display: -webkit-flex; - display: -ms-flexbox; - display: box; - display: flex; - -webkit-box-lines: multiple; - -moz-box-lines: multiple; - -o-box-lines: multiple; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin-left: -1rem; - margin-right: -1rem; - align-content: center; - align-items: center; -} - -.row.align-center{ + display: -webkit-box; + display: -moz-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + flex-direction: row; + align-items: center; + align-content: center; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + width: 100%; +} + +.row.align-center { justify-content: center; - } .row.stretch { @@ -64,2092 +47,311 @@ justify-content: space-around } -.row .col.auto { - -webkit-box-flex: 1; - -moz-box-flex: 1; - -o-box-flex: 1; - box-flex: 1; - -webkit-flex: 1 1 0 !important; - -ms-flex: 1 1 0 !important; - flex: 1 1 0 !important; +.row .col { + flex-grow: 0; + flex-shrink: 0; + flex-basis: auto; } -.row > div { - -webkit-flex-basis: 100%; - flex-basis: 100%; +.row .col.auto { + -webkit-box-flex: 1; + -moz-box-flex: 1; + -o-box-flex: 1; + -webkit-flex: 1 1 0 !important; + -ms-flex: 1 1 0 !important; + flex: 1 1 0 !important; } .row .col.s1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; + width: calc(100% / 12); } .row .col.s2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; + width: calc(100% / 6); } .row .col.s3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; + width: 25%; } .row .col.s4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; -} - -.row .col.s5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; + width: calc(100% / 3); } .row .col.s6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; -} - -.row .col.s7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; -} - -.row .col.s8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; -} - -.row .col.s9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; -} - -.row .col.s10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; -} - -.row .col.s11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; + width: 50%; } .row .col.s12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; + width: 100%; } .row .col.offset-s1 { - margin-left: 8.333333333333334%; + margin-left: calc(100% / 12); } .row .col.offset-s2 { - margin-left: 16.666666666666668%; + margin-left: calc(100% / 6); } .row .col.offset-s3 { - margin-left: 25%; + margin-left: 25%; } .row .col.offset-s4 { - margin-left: 33.333333333333336%; -} - -.row .col.offset-s5 { - margin-left: 41.66666666666667%; + margin-left: calc(100% / 3); } .row .col.offset-s6 { - margin-left: 50%; -} - -.row .col.offset-s7 { - margin-left: 58.333333333333336%; -} - -.row .col.offset-s8 { - margin-left: 66.66666666666667%; -} - -.row .col.offset-s9 { - margin-left: 75%; -} - -.row .col.offset-s10 { - margin-left: 83.33333333333334%; -} - -.row .col.offset-s11 { - margin-left: 91.66666666666667%; + margin-left: 50%; } @media (min-width: 601px) { - .row .col.m1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; - } - - .row .col.m2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; - } - - .row .col.m3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - - .row .col.m4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; - } - - .row .col.m5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; - } - - .row .col.m6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - - .row .col.m7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; - } - - .row .col.m8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; - } - - .row .col.m9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - - .row .col.m10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; - } - - .row .col.m11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; - } - - .row .col.m12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - - .row .col.offset-m1 { - margin-left: 8.333333333333334%; - } - - .row .col.offset-m2 { - margin-left: 16.666666666666668%; - } - - .row .col.offset-m3 { - margin-left: 25%; - } - - .row .col.offset-m4 { - margin-left: 33.333333333333336%; - } - - .row .col.offset-m5 { - margin-left: 41.66666666666667%; - } - - .row .col.offset-m6 { - margin-left: 50%; - } - - .row .col.offset-m7 { - margin-left: 58.333333333333336%; - } - - .row .col.offset-m8 { - margin-left: 66.66666666666667%; - } - - .row .col.offset-m9 { - margin-left: 75%; - } - - .row .col.offset-m10 { - margin-left: 83.33333333333334%; - } - - .row .col.offset-m11 { - margin-left: 91.66666666666667%; - } - -} - -@media (min-width: 992px) { - .row .col.l1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; - } - - .row .col.l2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; - } - - .row .col.l3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - - .row .col.l4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; - } - - .row .col.l5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; - } - - .row .col.l6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - - .row .col.l7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; - } - - .row .col.l8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; - } - - .row .col.l9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - - .row .col.l10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; - } - - .row .col.l11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; - } - - .row .col.l12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - - .row .col.offset-l1 { - margin-left: 8.333333333333334%; - } - - .row .col.offset-l2 { - margin-left: 16.666666666666668%; - } - - .row .col.offset-l3 { - margin-left: 25%; - } - - .row .col.offset-l4 { - margin-left: 33.333333333333336%; - } - - .row .col.offset-l5 { - margin-left: 41.66666666666667%; - } - - .row .col.offset-l6 { - margin-left: 50%; - } - - .row .col.offset-l7 { - margin-left: 58.333333333333336%; - } - - .row .col.offset-l8 { - margin-left: 66.66666666666667%; - } - - .row .col.offset-l9 { - margin-left: 75%; - } - - .row .col.offset-l10 { - margin-left: 83.33333333333334%; - } - - .row .col.offset-l11 { - margin-left: 91.66666666666667%; - } + .row .col.m1 { + width: calc(100% / 12); + } -} + .row .col.m2 { + width: calc(100% / 6); + } -@media (min-width: 1200px) { - .row .col.xl1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; - } - - .row .col.xl2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; - } - - .row .col.xl3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - - .row .col.xl4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; - } - - .row .col.xl5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; - } - - .row .col.xl6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - - .row .col.xl7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; - } - - .row .col.xl8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; - } - - .row .col.xl9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - - .row .col.xl10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; - } - - .row .col.xl11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; - } - - .row .col.xl12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - - .row .col.offset-xl1 { - margin-left: 8.333333333333334%; - } - - .row .col.offset-xl2 { - margin-left: 16.666666666666668%; - } - - .row .col.offset-xl3 { - margin-left: 25%; - } - - .row .col.offset-xl4 { - margin-left: 33.333333333333336%; - } - - .row .col.offset-xl5 { - margin-left: 41.66666666666667%; - } - - .row .col.offset-xl6 { - margin-left: 50%; - } - - .row .col.offset-xl7 { - margin-left: 58.333333333333336%; - } - - .row .col.offset-xl8 { - margin-left: 66.66666666666667%; - } - - .row .col.offset-xl9 { - margin-left: 75%; - } - - .row .col.offset-xl10 { - margin-left: 83.33333333333334%; - } - - .row .col.offset-xl11 { - margin-left: 91.66666666666667%; - } + .row .col.m3 { + width: 25%; + } -} + .row .col.m4 { + width: calc(100% / 3); + } -@media (min-width: 1900px) { - .row .col.xxl1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; - } - - .row .col.xxl2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; - } - - .row .col.xxl3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - - .row .col.xxl4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; - } - - .row .col.xxl5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; - } - - .row .col.xxl6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - - .row .col.xxl7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; - } - - .row .col.xxl8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; - } - - .row .col.xxl9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - - .row .col.xxl10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; - } - - .row .col.xxl11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; - } - - .row .col.xxl12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - - .row .col.offset-xxl1 { - margin-left: 8.333333333333334%; - } - - .row .col.offset-xxl2 { - margin-left: 16.666666666666668%; - } - - .row .col.offset-xxl3 { - margin-left: 25%; - } - - .row .col.offset-xxl4 { - margin-left: 33.333333333333336%; - } - - .row .col.offset-xxl5 { - margin-left: 41.66666666666667%; - } - - .row .col.offset-xxl6 { - margin-left: 50%; - } - - .row .col.offset-xxl7 { - margin-left: 58.333333333333336%; - } - - .row .col.offset-xxl8 { - margin-left: 66.66666666666667%; - } - - .row .col.offset-xxl9 { - margin-left: 75%; - } - - .row .col.offset-xxl10 { - margin-left: 83.33333333333334%; - } - - .row .col.offset-xxl11 { - margin-left: 91.66666666666667%; - } - -} + .row .col.m6 { + width: 50%; + } -@media (min-width: 2560px) { - .row .col.r1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; - } - - .row .col.r2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; - } - - .row .col.r3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - - .row .col.r4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; - } - - .row .col.r5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; - } - - .row .col.r6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - - .row .col.r7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; - } - - .row .col.r8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; - } - - .row .col.r9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - - .row .col.r10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; - } - - .row .col.r11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; - } - - .row .col.r12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - - .row .col.offset-r1 { - margin-left: 8.333333333333334%; - } - - .row .col.offset-r2 { - margin-left: 16.666666666666668%; - } - - .row .col.offset-r3 { - margin-left: 25%; - } - - .row .col.offset-r4 { - margin-left: 33.333333333333336%; - } - - .row .col.offset-r5 { - margin-left: 41.66666666666667%; - } - - .row .col.offset-r6 { - margin-left: 50%; - } - - .row .col.offset-r7 { - margin-left: 58.333333333333336%; - } - - .row .col.offset-r8 { - margin-left: 66.66666666666667%; - } - - .row .col.offset-r9 { - margin-left: 75%; - } - - .row .col.offset-r10 { - margin-left: 83.33333333333334%; - } - - .row .col.offset-r11 { - margin-left: 91.66666666666667%; - } - -}/** -* ============================== -* Grid System -* ============================== -*/ + .row .col.m12 { + width: 100%; + } -.container, -.row .col { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - padding-left: 1rem; - padding-right: 1rem; -} + .row .col.offset-m1 { + margin-left: calc(100% / 12); + } -.row { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - display: -webkit-box; - display: -moz-box; - display: -webkit-flex; - display: -ms-flexbox; - display: box; - display: flex; - -webkit-box-lines: multiple; - -moz-box-lines: multiple; - -o-box-lines: multiple; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin-left: -1rem; - margin-right: -1rem; - align-content: center; - align-items: center; -} + .row .col.offset-m2 { + margin-left: calc(100% / 6); + } -.row.align-center{ - justify-content: center; + .row .col.offset-m3 { + margin-left: 25%; + } -} - -.row.stretch { - align-content: stretch; -} - -.row.around { - align-content: space-around; -} - -.row.align-left { - justify-content: flex-start; -} - -.row.align-right { - justify-content: flex-end; -} - -.row.align-center-between { - justify-content: space-between; -} - -.row.align-center-around { - justify-content: space-around -} - -.row .col.auto { - -webkit-box-flex: 1; - -moz-box-flex: 1; - -o-box-flex: 1; - box-flex: 1; - -webkit-flex: 1 1 0 !important; - -ms-flex: 1 1 0 !important; - flex: 1 1 0 !important; -} - -.row > div { - -webkit-flex-basis: 100%; - flex-basis: 100%; -} - -.row .col.s1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; -} - -.row .col.s2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; -} - -.row .col.s3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; -} - -.row .col.s4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; -} - -.row .col.s5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; -} - -.row .col.s6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; -} - -.row .col.s7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; -} - -.row .col.s8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; -} - -.row .col.s9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; -} - -.row .col.s10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; -} - -.row .col.s11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; -} - -.row .col.s12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; -} - -.row .col.offset-s1 { - margin-left: 8.333333333333334%; -} - -.row .col.offset-s2 { - margin-left: 16.666666666666668%; -} - -.row .col.offset-s3 { - margin-left: 25%; -} - -.row .col.offset-s4 { - margin-left: 33.333333333333336%; -} - -.row .col.offset-s5 { - margin-left: 41.66666666666667%; -} - -.row .col.offset-s6 { - margin-left: 50%; -} - -.row .col.offset-s7 { - margin-left: 58.333333333333336%; -} - -.row .col.offset-s8 { - margin-left: 66.66666666666667%; -} - -.row .col.offset-s9 { - margin-left: 75%; -} - -.row .col.offset-s10 { - margin-left: 83.33333333333334%; -} - -.row .col.offset-s11 { - margin-left: 91.66666666666667%; -} - -@media (min-width: 601px) { - .row .col.m1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; - } - - .row .col.m2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; - } - - .row .col.m3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - - .row .col.m4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; - } - - .row .col.m5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; - } - - .row .col.m6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - - .row .col.m7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; - } - - .row .col.m8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; - } - - .row .col.m9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - - .row .col.m10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; - } - - .row .col.m11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; - } - - .row .col.m12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - - .row .col.offset-m1 { - margin-left: 8.333333333333334%; - } - - .row .col.offset-m2 { - margin-left: 16.666666666666668%; - } - - .row .col.offset-m3 { - margin-left: 25%; - } - - .row .col.offset-m4 { - margin-left: 33.333333333333336%; - } - - .row .col.offset-m5 { - margin-left: 41.66666666666667%; - } - - .row .col.offset-m6 { - margin-left: 50%; - } - - .row .col.offset-m7 { - margin-left: 58.333333333333336%; - } - - .row .col.offset-m8 { - margin-left: 66.66666666666667%; - } - - .row .col.offset-m9 { - margin-left: 75%; - } - - .row .col.offset-m10 { - margin-left: 83.33333333333334%; - } - - .row .col.offset-m11 { - margin-left: 91.66666666666667%; - } + .row .col.offset-m4 { + margin-left: calc(100% / 3); + } + .row .col.offset-m6 { + margin-left: 50%; + } } @media (min-width: 992px) { - .row .col.l1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; - } - - .row .col.l2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; - } - - .row .col.l3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - - .row .col.l4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; - } - - .row .col.l5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; - } - - .row .col.l6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - - .row .col.l7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; - } - - .row .col.l8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; - } - - .row .col.l9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - - .row .col.l10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; - } - - .row .col.l11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; - } - - .row .col.l12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - - .row .col.offset-l1 { - margin-left: 8.333333333333334%; - } - - .row .col.offset-l2 { - margin-left: 16.666666666666668%; - } - - .row .col.offset-l3 { - margin-left: 25%; - } - - .row .col.offset-l4 { - margin-left: 33.333333333333336%; - } - - .row .col.offset-l5 { - margin-left: 41.66666666666667%; - } - - .row .col.offset-l6 { - margin-left: 50%; - } - - .row .col.offset-l7 { - margin-left: 58.333333333333336%; - } - - .row .col.offset-l8 { - margin-left: 66.66666666666667%; - } - - .row .col.offset-l9 { - margin-left: 75%; - } - - .row .col.offset-l10 { - margin-left: 83.33333333333334%; - } - - .row .col.offset-l11 { - margin-left: 91.66666666666667%; - } - -} - -@media (min-width: 1200px) { - .row .col.xl1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; - } - - .row .col.xl2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; - } - - .row .col.xl3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - - .row .col.xl4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; - } - - .row .col.xl5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; - } - - .row .col.xl6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - - .row .col.xl7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; - } - - .row .col.xl8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; - } - - .row .col.xl9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - - .row .col.xl10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; - } - - .row .col.xl11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; - } - - .row .col.xl12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - - .row .col.offset-xl1 { - margin-left: 8.333333333333334%; - } - - .row .col.offset-xl2 { - margin-left: 16.666666666666668%; - } - - .row .col.offset-xl3 { - margin-left: 25%; - } - - .row .col.offset-xl4 { - margin-left: 33.333333333333336%; - } - - .row .col.offset-xl5 { - margin-left: 41.66666666666667%; - } - - .row .col.offset-xl6 { - margin-left: 50%; - } - - .row .col.offset-xl7 { - margin-left: 58.333333333333336%; - } - - .row .col.offset-xl8 { - margin-left: 66.66666666666667%; - } - - .row .col.offset-xl9 { - margin-left: 75%; - } - - .row .col.offset-xl10 { - margin-left: 83.33333333333334%; - } - - .row .col.offset-xl11 { - margin-left: 91.66666666666667%; - } - -} + .row .col.l1 { + width: calc(100% / 12); + } -@media (min-width: 1900px) { - .row .col.xxl1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; - } - - .row .col.xxl2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; - } - - .row .col.xxl3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - - .row .col.xxl4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; - } - - .row .col.xxl5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; - } - - .row .col.xxl6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - - .row .col.xxl7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; - } - - .row .col.xxl8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; - } - - .row .col.xxl9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - - .row .col.xxl10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; - } - - .row .col.xxl11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; - } - - .row .col.xxl12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - - .row .col.offset-xxl1 { - margin-left: 8.333333333333334%; - } - - .row .col.offset-xxl2 { - margin-left: 16.666666666666668%; - } - - .row .col.offset-xxl3 { - margin-left: 25%; - } - - .row .col.offset-xxl4 { - margin-left: 33.333333333333336%; - } - - .row .col.offset-xxl5 { - margin-left: 41.66666666666667%; - } - - .row .col.offset-xxl6 { - margin-left: 50%; - } - - .row .col.offset-xxl7 { - margin-left: 58.333333333333336%; - } - - .row .col.offset-xxl8 { - margin-left: 66.66666666666667%; - } - - .row .col.offset-xxl9 { - margin-left: 75%; - } - - .row .col.offset-xxl10 { - margin-left: 83.33333333333334%; - } - - .row .col.offset-xxl11 { - margin-left: 91.66666666666667%; - } + .row .col.l2 { + width: calc(100% / 6); + } -} + .row .col.l3 { + width: 25%; + } -@media (min-width: 2560px) { - .row .col.r1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; - } - - .row .col.r2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; - } - - .row .col.r3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - - .row .col.r4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; - } - - .row .col.r5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; - } - - .row .col.r6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - - .row .col.r7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; - } - - .row .col.r8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; - } - - .row .col.r9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - - .row .col.r10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; - } - - .row .col.r11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; - } - - .row .col.r12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - - .row .col.offset-r1 { - margin-left: 8.333333333333334%; - } - - .row .col.offset-r2 { - margin-left: 16.666666666666668%; - } - - .row .col.offset-r3 { - margin-left: 25%; - } - - .row .col.offset-r4 { - margin-left: 33.333333333333336%; - } - - .row .col.offset-r5 { - margin-left: 41.66666666666667%; - } - - .row .col.offset-r6 { - margin-left: 50%; - } - - .row .col.offset-r7 { - margin-left: 58.333333333333336%; - } - - .row .col.offset-r8 { - margin-left: 66.66666666666667%; - } - - .row .col.offset-r9 { - margin-left: 75%; - } - - .row .col.offset-r10 { - margin-left: 83.33333333333334%; - } - - .row .col.offset-r11 { - margin-left: 91.66666666666667%; - } - -}/** -* ============================== -* Grid System -* ============================== -*/ + .row .col.l4 { + width: calc(100% / 3); + } -.container, -.row .col { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - padding-left: 1rem; - padding-right: 1rem; -} + .row .col.l6 { + width: 50%; + } -.row { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - display: -webkit-box; - display: -moz-box; - display: -webkit-flex; - display: -ms-flexbox; - display: box; - display: flex; - -webkit-box-lines: multiple; - -moz-box-lines: multiple; - -o-box-lines: multiple; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin-left: -1rem; - margin-right: -1rem; - align-content: center; - align-items: center; -} + .row .col.l12 { + width: 100%; + } -.row.align-center{ - justify-content: center; + .row .col.offset-l1 { + margin-left: calc(100% / 12); + } -} + .row .col.offset-l2 { + margin-left: calc(100% / 6); + } -.row.stretch { - align-content: stretch; -} + .row .col.offset-l3 { + margin-left: 25%; + } -.row.around { - align-content: space-around; -} + .row .col.offset-l4 { + margin-left: calc(100% / 3); + } -.row.align-left { - justify-content: flex-start; + .row .col.offset-l6 { + margin-left: 50%; + } } -.row.align-right { - justify-content: flex-end; -} +@media (min-width: 1200px) { + .row .col.xl1 { + width: calc(100% / 12); + } -.row.align-center-between { - justify-content: space-between; -} + .row .col.xl2 { + width: calc(100% / 6); + } -.row.align-center-around { - justify-content: space-around -} + .row .col.xl3 { + width: 25%; + } -.row .col.auto { - -webkit-box-flex: 1; - -moz-box-flex: 1; - -o-box-flex: 1; - box-flex: 1; - -webkit-flex: 1 1 0 !important; - -ms-flex: 1 1 0 !important; - flex: 1 1 0 !important; -} + .row .col.xl4 { + width: calc(100% / 3); + } -.row > div { - -webkit-flex-basis: 100%; - flex-basis: 100%; -} + .row .col.xl6 { + width: 50%; + } -.row .col.s1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; -} + .row .col.xl12 { + width: 100%; + } -.row .col.s2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; -} + .row .col.offset-xl1 { + margin-left: calc(100% / 12); + } -.row .col.s3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; -} + .row .col.offset-xl2 { + margin-left: calc(100% / 6); + } -.row .col.s4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; -} + .row .col.offset-xl3 { + margin-left: 25%; + } -.row .col.s5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; -} + .row .col.offset-xl4 { + margin-left: calc(100% / 3); + } -.row .col.s6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; + .row .col.offset-xl6 { + margin-left: 50%; + } } -.row .col.s7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; -} +@media (min-width: 1900px) { + .row .col.xxl1 { + width: calc(100% / 12); + } -.row .col.s8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; -} + .row .col.xxl2 { + width: calc(100% / 6); + } -.row .col.s9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; -} + .row .col.xxl3 { + width: 25%; + } -.row .col.s10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; -} + .row .col.xxl4 { + width: calc(100% / 3); + } -.row .col.s11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; -} + .row .col.xxl6 { + width: 50%; + } -.row .col.s12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; -} + .row .col.xxl12 { + width: 100%; + } -.row .col.offset-s1 { - margin-left: 8.333333333333334%; -} + .row .col.offset-xxl1 { + margin-left: calc(100% / 12); + } -.row .col.offset-s2 { - margin-left: 16.666666666666668%; -} + .row .col.offset-xxl2 { + margin-left: calc(100% / 6); + } -.row .col.offset-s3 { - margin-left: 25%; -} + .row .col.offset-xxl3 { + margin-left: 25%; + } -.row .col.offset-s4 { - margin-left: 33.333333333333336%; -} + .row .col.offset-xxl4 { + margin-left: calc(100% / 3); + } -.row .col.offset-s5 { - margin-left: 41.66666666666667%; + .row .col.offset-xxl6 { + margin-left: 50%; + } } -.row .col.offset-s6 { - margin-left: 50%; -} +@media (min-width: 2560px) { + .row .col.r1 { + width: calc(100% / 12); + } -.row .col.offset-s7 { - margin-left: 58.333333333333336%; -} + .row .col.r2 { + width: calc(100% / 6); + } -.row .col.offset-s8 { - margin-left: 66.66666666666667%; -} + .row .col.r3 { + width: 25%; + } -.row .col.offset-s9 { - margin-left: 75%; -} + .row .col.r4 { + width: calc(100% / 3); + } -.row .col.offset-s10 { - margin-left: 83.33333333333334%; -} + .row .col.r6 { + width: 50%; + } -.row .col.offset-s11 { - margin-left: 91.66666666666667%; -} + .row .col.r7 { + width: calc(100% / (12/7)); + } -@media (min-width: 601px) { - .row .col.m1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; - } - - .row .col.m2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; - } - - .row .col.m3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - - .row .col.m4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; - } - - .row .col.m5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; - } - - .row .col.m6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - - .row .col.m7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; - } - - .row .col.m8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; - } - - .row .col.m9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - - .row .col.m10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; - } - - .row .col.m11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; - } - - .row .col.m12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - - .row .col.offset-m1 { - margin-left: 8.333333333333334%; - } - - .row .col.offset-m2 { - margin-left: 16.666666666666668%; - } - - .row .col.offset-m3 { - margin-left: 25%; - } - - .row .col.offset-m4 { - margin-left: 33.333333333333336%; - } - - .row .col.offset-m5 { - margin-left: 41.66666666666667%; - } - - .row .col.offset-m6 { - margin-left: 50%; - } - - .row .col.offset-m7 { - margin-left: 58.333333333333336%; - } - - .row .col.offset-m8 { - margin-left: 66.66666666666667%; - } - - .row .col.offset-m9 { - margin-left: 75%; - } - - .row .col.offset-m10 { - margin-left: 83.33333333333334%; - } - - .row .col.offset-m11 { - margin-left: 91.66666666666667%; - } + .row .col.r8 { + width: calc(100% / (12/8)); + } -} + .row .col.r9 { + width: calc(100% / (12/9)); + } -@media (min-width: 992px) { - .row .col.l1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; - } - - .row .col.l2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; - } - - .row .col.l3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - - .row .col.l4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; - } - - .row .col.l5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; - } - - .row .col.l6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - - .row .col.l7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; - } - - .row .col.l8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; - } - - .row .col.l9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - - .row .col.l10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; - } - - .row .col.l11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; - } - - .row .col.l12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - - .row .col.offset-l1 { - margin-left: 8.333333333333334%; - } - - .row .col.offset-l2 { - margin-left: 16.666666666666668%; - } - - .row .col.offset-l3 { - margin-left: 25%; - } - - .row .col.offset-l4 { - margin-left: 33.333333333333336%; - } - - .row .col.offset-l5 { - margin-left: 41.66666666666667%; - } - - .row .col.offset-l6 { - margin-left: 50%; - } - - .row .col.offset-l7 { - margin-left: 58.333333333333336%; - } - - .row .col.offset-l8 { - margin-left: 66.66666666666667%; - } - - .row .col.offset-l9 { - margin-left: 75%; - } - - .row .col.offset-l10 { - margin-left: 83.33333333333334%; - } - - .row .col.offset-l11 { - margin-left: 91.66666666666667%; - } + .row .col.r10 { + width: calc(100% / (12/10)); + } -} + .row .col.r11 { + width: calc(100% / (12/11)); + } -@media (min-width: 1200px) { - .row .col.xl1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; - } - - .row .col.xl2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; - } - - .row .col.xl3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - - .row .col.xl4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; - } - - .row .col.xl5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; - } - - .row .col.xl6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - - .row .col.xl7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; - } - - .row .col.xl8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; - } - - .row .col.xl9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - - .row .col.xl10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; - } - - .row .col.xl11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; - } - - .row .col.xl12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - - .row .col.offset-xl1 { - margin-left: 8.333333333333334%; - } - - .row .col.offset-xl2 { - margin-left: 16.666666666666668%; - } - - .row .col.offset-xl3 { - margin-left: 25%; - } - - .row .col.offset-xl4 { - margin-left: 33.333333333333336%; - } - - .row .col.offset-xl5 { - margin-left: 41.66666666666667%; - } - - .row .col.offset-xl6 { - margin-left: 50%; - } - - .row .col.offset-xl7 { - margin-left: 58.333333333333336%; - } - - .row .col.offset-xl8 { - margin-left: 66.66666666666667%; - } - - .row .col.offset-xl9 { - margin-left: 75%; - } - - .row .col.offset-xl10 { - margin-left: 83.33333333333334%; - } - - .row .col.offset-xl11 { - margin-left: 91.66666666666667%; - } + .row .col.r12 { + width: 100%; + } -} + .row .col.offset-r1 { + margin-left: calc(100% / 12); + } -@media (min-width: 1900px) { - .row .col.xxl1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; - } - - .row .col.xxl2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; - } - - .row .col.xxl3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - - .row .col.xxl4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; - } - - .row .col.xxl5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; - } - - .row .col.xxl6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - - .row .col.xxl7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; - } - - .row .col.xxl8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; - } - - .row .col.xxl9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - - .row .col.xxl10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; - } - - .row .col.xxl11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; - } - - .row .col.xxl12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - - .row .col.offset-xxl1 { - margin-left: 8.333333333333334%; - } - - .row .col.offset-xxl2 { - margin-left: 16.666666666666668%; - } - - .row .col.offset-xxl3 { - margin-left: 25%; - } - - .row .col.offset-xxl4 { - margin-left: 33.333333333333336%; - } - - .row .col.offset-xxl5 { - margin-left: 41.66666666666667%; - } - - .row .col.offset-xxl6 { - margin-left: 50%; - } - - .row .col.offset-xxl7 { - margin-left: 58.333333333333336%; - } - - .row .col.offset-xxl8 { - margin-left: 66.66666666666667%; - } - - .row .col.offset-xxl9 { - margin-left: 75%; - } - - .row .col.offset-xxl10 { - margin-left: 83.33333333333334%; - } - - .row .col.offset-xxl11 { - margin-left: 91.66666666666667%; - } + .row .col.offset-r2 { + margin-left: calc(100% / 6); + } -} + .row .col.offset-r3 { + margin-left: 25%; + } -@media (min-width: 2560px) { - .row .col.r1 { - -webkit-flex-basis: 8.333333333333334%; - flex-basis: 8.333333333333334%; - } - - .row .col.r2 { - -webkit-flex-basis: 16.666666666666668%; - flex-basis: 16.666666666666668%; - } - - .row .col.r3 { - -webkit-flex-basis: 25%; - flex-basis: 25%; - } - - .row .col.r4 { - -webkit-flex-basis: 33.333333333333336%; - flex-basis: 33.333333333333336%; - } - - .row .col.r5 { - -webkit-flex-basis: 41.66666666666667%; - flex-basis: 41.66666666666667%; - } - - .row .col.r6 { - -webkit-flex-basis: 50%; - flex-basis: 50%; - } - - .row .col.r7 { - -webkit-flex-basis: 58.333333333333336%; - flex-basis: 58.333333333333336%; - } - - .row .col.r8 { - -webkit-flex-basis: 66.66666666666667%; - flex-basis: 66.66666666666667%; - } - - .row .col.r9 { - -webkit-flex-basis: 75%; - flex-basis: 75%; - } - - .row .col.r10 { - -webkit-flex-basis: 83.33333333333334%; - flex-basis: 83.33333333333334%; - } - - .row .col.r11 { - -webkit-flex-basis: 91.66666666666667%; - flex-basis: 91.66666666666667%; - } - - .row .col.r12 { - -webkit-flex-basis: 100%; - flex-basis: 100%; - } - - .row .col.offset-r1 { - margin-left: 8.333333333333334%; - } - - .row .col.offset-r2 { - margin-left: 16.666666666666668%; - } - - .row .col.offset-r3 { - margin-left: 25%; - } - - .row .col.offset-r4 { - margin-left: 33.333333333333336%; - } - - .row .col.offset-r5 { - margin-left: 41.66666666666667%; - } - - .row .col.offset-r6 { - margin-left: 50%; - } - - .row .col.offset-r7 { - margin-left: 58.333333333333336%; - } - - .row .col.offset-r8 { - margin-left: 66.66666666666667%; - } - - .row .col.offset-r9 { - margin-left: 75%; - } - - .row .col.offset-r10 { - margin-left: 83.33333333333334%; - } - - .row .col.offset-r11 { - margin-left: 91.66666666666667%; - } + .row .col.offset-r4 { + margin-left: calc(100% / 3); + } + .row .col.offset-r6 { + margin-left: 50%; + } } \ No newline at end of file diff --git a/src/hero.css b/src/hero.css index 0c683bf..7ebbb51 100644 --- a/src/hero.css +++ b/src/hero.css @@ -4,7 +4,9 @@ * ============================== */ -.full-hero, .hero, .hero-transparent { +.full-hero, +.hero, +.hero-transparent { height: 100%; color: #fff; background-repeat: no-repeat; @@ -18,20 +20,21 @@ .hero::before, .full-hero::before { content: ''; - width: 100%; - height: 100%; - background: rgba(0,0,0,0.5); - display: block; - position: absolute; - top: 0; - left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + display: block; + position: absolute; + top: 0; + left: 0; } .hero.light::before, -.full-hero.light::before{ - background: rgba(255, 255, 255, 0.5); +.full-hero.light::before { + background: rgba(255, 255, 255, 0.5); } -.hero, .hero-transparent { +.hero, +.hero-transparent { height: 50%; } \ No newline at end of file diff --git a/src/navigation.css b/src/navigation.css index b5757f3..27f67b9 100644 --- a/src/navigation.css +++ b/src/navigation.css @@ -144,7 +144,6 @@ height: 100%; float: left; max-height: 100%; - } .wrapper.offset-sn-m { @@ -200,7 +199,6 @@ height: 100%; float: left; max-height: 100%; - } .wrapper.offset-sn-l { @@ -256,7 +254,6 @@ height: 100%; float: left; max-height: 100%; - } .wrapper.offset-sn-xl { diff --git a/src/normalize.css b/src/normalize.css index c241caa..add7221 100644 --- a/src/normalize.css +++ b/src/normalize.css @@ -67,7 +67,7 @@ a { color: inherit; cursor: pointer; background-color: transparent; - -webkit-text-decoration-skip: objects; + -webkit-text-decoration-skip: objects; } a:active, @@ -81,11 +81,6 @@ abbr[title] { text-decoration: underline dotted; } -b, -strong { - font-weight: inherit; -} - b, strong { font-weight: bolder; @@ -128,7 +123,6 @@ sup { img { border-style: none; -webkit-user-drag: none; - user-drag: none; -webkit-touch-callout: none; border: 0; max-width: 100%; @@ -177,7 +171,7 @@ input { button, select { - -webkit-appearance: none; + -webkit-appearance: none; -moz-appearance: none; border: none; outline: none; @@ -278,9 +272,10 @@ th { padding: 0; } -.unselectable, img { +.unselectable, +img { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -} +} \ No newline at end of file