Last active
September 3, 2021 15:48
-
-
Save jaredLunde/1980ff00df05e8ee148f8da906655949 to your computer and use it in GitHub Desktop.
Compiled with node-sass
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /****************************************************************************** | |
| *** * | |
| *** Curls.css * | |
| *** A flexible flebox-based CSS framework * | |
| *** (c) 2016 Jared Lunde * | |
| *** * | |
| ******************************************************************************/ | |
| /** | |
| ** Browser resets | |
| **/ | |
| html, body, div, span, iframe, | |
| h1, h2, .type--h2, h3, .type--h3, h4, .type--h4, h5, .type--h5, h6, .type--h6, p, blockquote, pre, | |
| a, abbr, acronym, address, big, cite, code, | |
| del, dfn, em, img, ins, kbd, q, s, samp, | |
| small, strike, strong, sub, sup, tt, var, | |
| b, u, i, center, | |
| dl, dt, dd, ol, ul, li, | |
| fieldset, form, label, legend, | |
| table, caption, tbody, tfoot, thead, tr, th, td, | |
| article, aside, canvas, details, embed, | |
| figure, figcaption, footer, header, hgroup, | |
| menu, nav, output, ruby, section, summary, | |
| time, mark, audio, video { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| vertical-align: baseline; } | |
| ol, ul { | |
| list-style: none; } | |
| blockquote, q { | |
| quotes: none; } | |
| blockquote:before, blockquote:after, | |
| q:before, q:after { | |
| content: ''; | |
| content: none; } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; } | |
| svg:not(:root) { | |
| overflow: hidden; } | |
| a:active, | |
| a:hover { | |
| outline-width: 0; } | |
| details, | |
| main, | |
| summary { | |
| display: block; } | |
| /** | |
| ** Core | |
| **/ | |
| .toggler__container { | |
| border-radius: 10000000px; } | |
| .select.select--open .select__menu, .dropdown.dropdown.dropdown--open .dropdown__menu, .popover.popover--open, | |
| .no-touchevents .popover:hover, .tooltip.tooltip--open, | |
| .no-touchevents .tooltip:hover { | |
| z-index: 1; | |
| opacity: 1; } | |
| .select__menu, .dropdown__menu, .popover, .tooltip { | |
| z-index: -1000; | |
| opacity: 0; } | |
| .navbar.navbar--fixed-top, | |
| .navbar--fixed-top { | |
| position: fixed; | |
| left: 0; | |
| right: 0; | |
| top: 0; | |
| bottom: auto; | |
| width: 100%; } | |
| .navbar.navbar--fixed-bottom, | |
| .navbar--fixed-bottom { | |
| position: fixed; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| top: auto; | |
| width: 100%; } | |
| .dropdown__menu { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: auto; } | |
| *, *:before, *:after { | |
| /** border-box for all, as it should be */ | |
| box-sizing: border-box; } | |
| a { | |
| cursor: pointer; } | |
| .row, .flex, [type=submit] > *, .input-group, .btn-group, .paginate, .checkbox, .toggler, .checkbox label, .toggler label, .checkbox__box, .checkbox__box > *, .checkbox__checkmark, .checkbox__checkmark > *, .toggler__container, .toggler__handle, .select, .dropdown, .navbar .navbar__link, .navbar > a, .navbar > li > a, .navbar > h1, .navbar > h2, .navbar > .type--h2, .navbar > h3, .navbar > .type--h3, .navbar > h4, .navbar > .type--h4, .navbar > h5, .navbar > .type--h5, .navbar > h6, .navbar > .type--h6, | |
| .navbar > .type--h1, .navbar > li > h1, .navbar > li > h2, .navbar > li > .type--h2, .navbar > li > h3, .navbar > li > .type--h3, .navbar > li > h4, .navbar > li > .type--h4, .navbar > li > h5, .navbar > li > .type--h5, .navbar > li > h6, .navbar > li > .type--h6, | |
| .navbar > li > .type--h1, .navbar, .navbar > *, .paginate ul, | |
| .paginate ol, | |
| .paginate li, .paginate > a, | |
| .paginate li a, | |
| .paginate__link, .card, .card header, .card .card__header, .card footer, .card .card__footer, .list, .list > li > a, .list.list--x > li, .avatar { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: flex; } | |
| .flex--fixed, .input-group > *, .btn-group > *, .paginate > *, .input-group > button, .btn-group > button, .paginate > button, .input-group > .btn, .btn-group > .btn, .paginate > .btn, .navbar > * { | |
| -webkit-box: 0; | |
| -webkit-flex: 0 0 auto; | |
| flex: 0 0 auto; } | |
| .col, .flex--fluid, .input-group input, .btn-group input, .paginate input, .btn-group button { | |
| -webkit-box: 1; | |
| -webkit-flex: 1 0 auto; | |
| flex: 1 0 auto; | |
| max-width: none; } | |
| .flex--first { | |
| -webkit-box-ordinal-group: 0; | |
| -webkit-order: -1; | |
| order: -1; } | |
| .flex--last { | |
| -webkit-box-ordinal-group: 2; | |
| -webkit-order: 1; | |
| order: 1; } | |
| .flex--grow, .list > li, .list.list--x > li { | |
| -webkit-box: 1; | |
| -webkit-flex: 1 0 auto; | |
| flex: 1 0 auto; } | |
| .flex--shrink { | |
| -webkit-box: 0; | |
| -webkit-flex: 0 1 auto; | |
| flex: 0 1 auto; } | |
| .row, .flex--x { | |
| -webkit-box-direction: normal; | |
| -webkit-box-orient: horizontal; | |
| -webkit-flex-direction: row; | |
| flex-direction: row; } | |
| .flex--y, .select, .card, .list { | |
| -webkit-box-direction: normal; | |
| -webkit-box-orient: vertical; | |
| -webkit-flex-direction: column; | |
| flex-direction: column; } | |
| .row { | |
| -webkit-flex-wrap: wrap; | |
| /** | |
| @if $value == nowrap { | |
| -ms-flex-wrap: none; | |
| } @else { | |
| -ms-flex-wrap: $value; | |
| } | |
| */ | |
| flex-wrap: wrap; } | |
| .flex--x-reverse { | |
| -webkit-box-direction: reverse; | |
| -webkit-box-orient: horizontal; | |
| -webkit-flex-direction: row-reverse; | |
| flex-direction: row-reverse; } | |
| .flex--y-reverse { | |
| -webkit-box-direction: reverse; | |
| -webkit-box-orient: vertical; | |
| -webkit-flex-direction: column-reverse; | |
| flex-direction: column-reverse; } | |
| .flex--wrap-reverse { | |
| -webkit-flex-wrap: wrap-reverse; | |
| /** | |
| @if $value == nowrap { | |
| -ms-flex-wrap: none; | |
| } @else { | |
| -ms-flex-wrap: $value; | |
| } | |
| */ | |
| flex-wrap: wrap-reverse; } | |
| .flex--nowrap, .input-group, .btn-group, .paginate, .navbar, .list.list--x > li { | |
| -webkit-flex-wrap: nowrap; | |
| /** | |
| @if $value == nowrap { | |
| -ms-flex-wrap: none; | |
| } @else { | |
| -ms-flex-wrap: $value; | |
| } | |
| */ | |
| flex-wrap: nowrap; } | |
| .flex--x-left, .toggler__container { | |
| -webkit-box-pack: start; | |
| -webkit-justify-content: flex-start; | |
| justify-content: flex-start; } | |
| .flex--x-right, .toggler.enabled .toggler__container { | |
| -webkit-box-pack: end; | |
| -webkit-justify-content: flex-end; | |
| justify-content: flex-end; } | |
| .flex--x-center, .input-group, .btn-group, .paginate, .checkbox__box, .checkbox__checkmark, .avatar { | |
| -webkit-box-pack: center; | |
| -webkit-justify-content: center; | |
| justify-content: center; } | |
| .flex--x-around { | |
| justify-content: space-between; | |
| -webkit-justify-content: space-around; | |
| justify-content: space-around; } | |
| .flex--x-between { | |
| -webkit-box-pack: justify; | |
| -font-box-pack: justify; | |
| -webkit-justify-content: space-between; | |
| justify-content: space-between; } | |
| .flex--y-top, .drawer { | |
| -webkit-box-align: start; | |
| -webkit-align-items: flex-start; | |
| align-items: flex-start; } | |
| .flex--y-bottom { | |
| -webkit-box-align: end; | |
| -webkit-align-items: flex-end; | |
| align-items: flex-end; } | |
| .flex--y-center, [type=submit], .input-group > *, .btn-group > *, .paginate > *, .input-group > button, .btn-group > button, .paginate > button, .input-group > .btn, .btn-group > .btn, .paginate > .btn, .checkbox label, .toggler label, .checkbox__box, .checkbox__checkmark, .toggler__container, button, .btn, .select__toggler, | |
| button.select__toggler, | |
| .btn.select__toggler, .dropdown, .dropdown__toggler, | |
| button.dropdown__toggler, | |
| .btn.dropdown__toggler, .navbar .navbar__link, .navbar > a, .navbar > li > a, .navbar > h1, .navbar > h2, .navbar > .type--h2, .navbar > h3, .navbar > .type--h3, .navbar > h4, .navbar > .type--h4, .navbar > h5, .navbar > .type--h5, .navbar > h6, .navbar > .type--h6, | |
| .navbar > .type--h1, .navbar > li > h1, .navbar > li > h2, .navbar > li > .type--h2, .navbar > li > h3, .navbar > li > .type--h3, .navbar > li > h4, .navbar > li > .type--h4, .navbar > li > h5, .navbar > li > .type--h5, .navbar > li > h6, .navbar > li > .type--h6, | |
| .navbar > li > .type--h1, .navbar, .navbar > *, .navbar > li, .paginate > a, | |
| .paginate li a, | |
| .paginate__link, .list > li, .list > li > a, .list.list--x > li, .avatar { | |
| -webkit-box-align: center; | |
| -webkit-align-items: center; | |
| align-items: center; } | |
| .flex--y-stretch, .input-group, .btn-group, .paginate, .checkbox, .toggler, .list.list--x { | |
| -webkit-box-align: stretch; | |
| -webkit-align-items: stretch; | |
| align-items: stretch; } | |
| .flex--y-between { | |
| -webkit-box-align: space-between; | |
| -webkit-align-items: space-between; | |
| align-items: space-between; } | |
| .flex--y-around { | |
| -webkit-box-align: space-around; | |
| -webkit-align-items: space-around; | |
| align-items: space-around; } | |
| .flex--y-baseline { | |
| -webkit-box-align: baseline; | |
| -webkit-align-items: baseline; | |
| align-items: baseline; } | |
| .flex--content-top { | |
| -webkit-align-content: flex-start; | |
| /** | |
| @if $value == flex-start { | |
| -ms-flex-line-pack: start; | |
| } @else if $value == flex-end { | |
| -ms-flex-line-pack: end; | |
| } @else { | |
| -ms-flex-line-pack: $value; | |
| }*/ | |
| align-content: flex-start; } | |
| .flex--content-bottom { | |
| -webkit-align-content: flex-end; | |
| /** | |
| @if $value == flex-start { | |
| -ms-flex-line-pack: start; | |
| } @else if $value == flex-end { | |
| -ms-flex-line-pack: end; | |
| } @else { | |
| -ms-flex-line-pack: $value; | |
| }*/ | |
| align-content: flex-end; } | |
| .flex--content-center { | |
| -webkit-align-content: center; | |
| /** | |
| @if $value == flex-start { | |
| -ms-flex-line-pack: start; | |
| } @else if $value == flex-end { | |
| -ms-flex-line-pack: end; | |
| } @else { | |
| -ms-flex-line-pack: $value; | |
| }*/ | |
| align-content: center; } | |
| .flex--content-stretch { | |
| -webkit-align-content: stretch; | |
| /** | |
| @if $value == flex-start { | |
| -ms-flex-line-pack: start; | |
| } @else if $value == flex-end { | |
| -ms-flex-line-pack: end; | |
| } @else { | |
| -ms-flex-line-pack: $value; | |
| }*/ | |
| align-content: stretch; } | |
| .flex--content-between { | |
| -webkit-align-content: space-between; | |
| /** | |
| @if $value == flex-start { | |
| -ms-flex-line-pack: start; | |
| } @else if $value == flex-end { | |
| -ms-flex-line-pack: end; | |
| } @else { | |
| -ms-flex-line-pack: $value; | |
| }*/ | |
| align-content: space-between; } | |
| .flex--content-around { | |
| -webkit-align-content: space-around; | |
| /** | |
| @if $value == flex-start { | |
| -ms-flex-line-pack: start; | |
| } @else if $value == flex-end { | |
| -ms-flex-line-pack: end; | |
| } @else { | |
| -ms-flex-line-pack: $value; | |
| }*/ | |
| align-content: space-around; } | |
| .flex--self-top { | |
| -webkit-align-self: flex-start; | |
| /** | |
| @if $value == flex-start { | |
| -ms-flex-item-align: start; | |
| } @else if $value == flex-end { | |
| -ms-flex-item-align: end; | |
| } @else { | |
| -ms-flex-item-align: $value; | |
| }*/ | |
| align-self: flex-start; } | |
| .flex--self-bottom { | |
| -webkit-align-self: flex-end; | |
| /** | |
| @if $value == flex-start { | |
| -ms-flex-item-align: start; | |
| } @else if $value == flex-end { | |
| -ms-flex-item-align: end; | |
| } @else { | |
| -ms-flex-item-align: $value; | |
| }*/ | |
| align-self: flex-end; } | |
| .flex--self-center, .select__caret, .dropdown__caret { | |
| -webkit-align-self: center; | |
| /** | |
| @if $value == flex-start { | |
| -ms-flex-item-align: start; | |
| } @else if $value == flex-end { | |
| -ms-flex-item-align: end; | |
| } @else { | |
| -ms-flex-item-align: $value; | |
| }*/ | |
| align-self: center; } | |
| .flex--self-stretch, .navbar .navbar__link, .navbar > a, .navbar > li > a, .navbar > h1, .navbar > h2, .navbar > .type--h2, .navbar > h3, .navbar > .type--h3, .navbar > h4, .navbar > .type--h4, .navbar > h5, .navbar > .type--h5, .navbar > h6, .navbar > .type--h6, | |
| .navbar > .type--h1, .navbar > li > h1, .navbar > li > h2, .navbar > li > .type--h2, .navbar > li > h3, .navbar > li > .type--h3, .navbar > li > h4, .navbar > li > .type--h4, .navbar > li > h5, .navbar > li > .type--h5, .navbar > li > h6, .navbar > li > .type--h6, | |
| .navbar > li > .type--h1, .navbar > li, .paginate ul, | |
| .paginate ol, | |
| .paginate li, .paginate > a, | |
| .paginate li a, | |
| .paginate__link, .list > li > a { | |
| -webkit-align-self: stretch; | |
| /** | |
| @if $value == flex-start { | |
| -ms-flex-item-align: start; | |
| } @else if $value == flex-end { | |
| -ms-flex-item-align: end; | |
| } @else { | |
| -ms-flex-item-align: $value; | |
| }*/ | |
| align-self: stretch; } | |
| .flex--self-baseline { | |
| -webkit-align-self: baseline; | |
| /** | |
| @if $value == flex-start { | |
| -ms-flex-item-align: start; | |
| } @else if $value == flex-end { | |
| -ms-flex-item-align: end; | |
| } @else { | |
| -ms-flex-item-align: $value; | |
| }*/ | |
| align-self: baseline; } | |
| .row { | |
| -webkit-flex-basis: 100%; | |
| flex-basis: 100%; } | |
| .col { | |
| position: relative; } | |
| .p--gutters-l { | |
| padding-left: 12px; } | |
| @media only screen and (min-width: 1360px) { | |
| .p--gutters-l { | |
| padding-left: 12px; } } | |
| @media only screen and (max-width: 1359px) { | |
| .p--gutters-l { | |
| padding-left: 8px; } } | |
| @media only screen and (max-width: 1023px) { | |
| .p--gutters-l { | |
| padding-left: 6px; } } | |
| @media only screen and (max-width: 639px) { | |
| .p--gutters-l { | |
| padding-left: 6px; } } | |
| @media only screen and (max-width: 324px) { | |
| .p--gutters-l { | |
| padding-left: 4px; } } | |
| .p--gutters-r { | |
| padding-right: 12px; } | |
| @media only screen and (min-width: 1360px) { | |
| .p--gutters-r { | |
| padding-right: 12px; } } | |
| @media only screen and (max-width: 1359px) { | |
| .p--gutters-r { | |
| padding-right: 8px; } } | |
| @media only screen and (max-width: 1023px) { | |
| .p--gutters-r { | |
| padding-right: 6px; } } | |
| @media only screen and (max-width: 639px) { | |
| .p--gutters-r { | |
| padding-right: 6px; } } | |
| @media only screen and (max-width: 324px) { | |
| .p--gutters-r { | |
| padding-right: 4px; } } | |
| .p--gutters-t { | |
| padding-top: 12px; } | |
| @media only screen and (min-width: 1360px) { | |
| .p--gutters-t { | |
| padding-top: 12px; } } | |
| @media only screen and (max-width: 1359px) { | |
| .p--gutters-t { | |
| padding-top: 8px; } } | |
| @media only screen and (max-width: 1023px) { | |
| .p--gutters-t { | |
| padding-top: 6px; } } | |
| @media only screen and (max-width: 639px) { | |
| .p--gutters-t { | |
| padding-top: 6px; } } | |
| @media only screen and (max-width: 324px) { | |
| .p--gutters-t { | |
| padding-top: 4px; } } | |
| .p--gutters-b { | |
| padding-bottom: 12px; } | |
| @media only screen and (min-width: 1360px) { | |
| .p--gutters-b { | |
| padding-bottom: 12px; } } | |
| @media only screen and (max-width: 1359px) { | |
| .p--gutters-b { | |
| padding-bottom: 8px; } } | |
| @media only screen and (max-width: 1023px) { | |
| .p--gutters-b { | |
| padding-bottom: 6px; } } | |
| @media only screen and (max-width: 639px) { | |
| .p--gutters-b { | |
| padding-bottom: 6px; } } | |
| @media only screen and (max-width: 324px) { | |
| .p--gutters-b { | |
| padding-bottom: 4px; } } | |
| .row, .col, .input-group .select__toggler, .btn-group .select__toggler, .navbar, .p--gutters-x { | |
| padding-left: 12px; | |
| padding-right: 12px; } | |
| @media only screen and (min-width: 1360px) { | |
| .row, .col, .input-group .select__toggler, .btn-group .select__toggler, .navbar, .p--gutters-x { | |
| padding-left: 12px; | |
| padding-right: 12px; } } | |
| @media only screen and (max-width: 1359px) { | |
| .row, .col, .input-group .select__toggler, .btn-group .select__toggler, .navbar, .p--gutters-x { | |
| padding-left: 8px; | |
| padding-right: 8px; } } | |
| @media only screen and (max-width: 1023px) { | |
| .row, .col, .input-group .select__toggler, .btn-group .select__toggler, .navbar, .p--gutters-x { | |
| padding-left: 6px; | |
| padding-right: 6px; } } | |
| @media only screen and (max-width: 639px) { | |
| .row, .col, .input-group .select__toggler, .btn-group .select__toggler, .navbar, .p--gutters-x { | |
| padding-left: 6px; | |
| padding-right: 6px; } } | |
| @media only screen and (max-width: 324px) { | |
| .row, .col, .input-group .select__toggler, .btn-group .select__toggler, .navbar, .p--gutters-x { | |
| padding-left: 4px; | |
| padding-right: 4px; } } | |
| .p--gutters-y { | |
| padding-top: 12px; | |
| padding-bottom: 12px; } | |
| @media only screen and (min-width: 1360px) { | |
| .p--gutters-y { | |
| padding-top: 12px; | |
| padding-bottom: 12px; } } | |
| @media only screen and (max-width: 1359px) { | |
| .p--gutters-y { | |
| padding-top: 8px; | |
| padding-bottom: 8px; } } | |
| @media only screen and (max-width: 1023px) { | |
| .p--gutters-y { | |
| padding-top: 6px; | |
| padding-bottom: 6px; } } | |
| @media only screen and (max-width: 639px) { | |
| .p--gutters-y { | |
| padding-top: 6px; | |
| padding-bottom: 6px; } } | |
| @media only screen and (max-width: 324px) { | |
| .p--gutters-y { | |
| padding-top: 4px; | |
| padding-bottom: 4px; } } | |
| .navbar .navbar__link, .navbar > a, .navbar > li > a, .navbar > h1, .navbar > h2, .navbar > .type--h2, .navbar > h3, .navbar > .type--h3, .navbar > h4, .navbar > .type--h4, .navbar > h5, .navbar > .type--h5, .navbar > h6, .navbar > .type--h6, | |
| .navbar > .type--h1, .navbar > li > h1, .navbar > li > h2, .navbar > li > .type--h2, .navbar > li > h3, .navbar > li > .type--h3, .navbar > li > h4, .navbar > li > .type--h4, .navbar > li > h5, .navbar > li > .type--h5, .navbar > li > h6, .navbar > li > .type--h6, | |
| .navbar > li > .type--h1, .tooltip, .p--gutters { | |
| padding: 12px; } | |
| @media only screen and (min-width: 1360px) { | |
| .navbar .navbar__link, .navbar > a, .navbar > li > a, .navbar > h1, .navbar > h2, .navbar > .type--h2, .navbar > h3, .navbar > .type--h3, .navbar > h4, .navbar > .type--h4, .navbar > h5, .navbar > .type--h5, .navbar > h6, .navbar > .type--h6, | |
| .navbar > .type--h1, .navbar > li > h1, .navbar > li > h2, .navbar > li > .type--h2, .navbar > li > h3, .navbar > li > .type--h3, .navbar > li > h4, .navbar > li > .type--h4, .navbar > li > h5, .navbar > li > .type--h5, .navbar > li > h6, .navbar > li > .type--h6, | |
| .navbar > li > .type--h1, .tooltip, .p--gutters { | |
| padding: 12px; } } | |
| @media only screen and (max-width: 1359px) { | |
| .navbar .navbar__link, .navbar > a, .navbar > li > a, .navbar > h1, .navbar > h2, .navbar > .type--h2, .navbar > h3, .navbar > .type--h3, .navbar > h4, .navbar > .type--h4, .navbar > h5, .navbar > .type--h5, .navbar > h6, .navbar > .type--h6, | |
| .navbar > .type--h1, .navbar > li > h1, .navbar > li > h2, .navbar > li > .type--h2, .navbar > li > h3, .navbar > li > .type--h3, .navbar > li > h4, .navbar > li > .type--h4, .navbar > li > h5, .navbar > li > .type--h5, .navbar > li > h6, .navbar > li > .type--h6, | |
| .navbar > li > .type--h1, .tooltip, .p--gutters { | |
| padding: 8px; } } | |
| @media only screen and (max-width: 1023px) { | |
| .navbar .navbar__link, .navbar > a, .navbar > li > a, .navbar > h1, .navbar > h2, .navbar > .type--h2, .navbar > h3, .navbar > .type--h3, .navbar > h4, .navbar > .type--h4, .navbar > h5, .navbar > .type--h5, .navbar > h6, .navbar > .type--h6, | |
| .navbar > .type--h1, .navbar > li > h1, .navbar > li > h2, .navbar > li > .type--h2, .navbar > li > h3, .navbar > li > .type--h3, .navbar > li > h4, .navbar > li > .type--h4, .navbar > li > h5, .navbar > li > .type--h5, .navbar > li > h6, .navbar > li > .type--h6, | |
| .navbar > li > .type--h1, .tooltip, .p--gutters { | |
| padding: 6px; } } | |
| @media only screen and (max-width: 639px) { | |
| .navbar .navbar__link, .navbar > a, .navbar > li > a, .navbar > h1, .navbar > h2, .navbar > .type--h2, .navbar > h3, .navbar > .type--h3, .navbar > h4, .navbar > .type--h4, .navbar > h5, .navbar > .type--h5, .navbar > h6, .navbar > .type--h6, | |
| .navbar > .type--h1, .navbar > li > h1, .navbar > li > h2, .navbar > li > .type--h2, .navbar > li > h3, .navbar > li > .type--h3, .navbar > li > h4, .navbar > li > .type--h4, .navbar > li > h5, .navbar > li > .type--h5, .navbar > li > h6, .navbar > li > .type--h6, | |
| .navbar > li > .type--h1, .p--gutters { | |
| padding: 6px; } } | |
| @media only screen and (max-width: 324px) { | |
| .navbar .navbar__link, .navbar > a, .navbar > li > a, .navbar > h1, .navbar > h2, .navbar > .type--h2, .navbar > h3, .navbar > .type--h3, .navbar > h4, .navbar > .type--h4, .navbar > h5, .navbar > .type--h5, .navbar > h6, .navbar > .type--h6, | |
| .navbar > .type--h1, .navbar > li > h1, .navbar > li > h2, .navbar > li > .type--h2, .navbar > li > h3, .navbar > li > .type--h3, .navbar > li > h4, .navbar > li > .type--h4, .navbar > li > h5, .navbar > li > .type--h5, .navbar > li > h6, .navbar > li > .type--h6, | |
| .navbar > li > .type--h1, .p--gutters { | |
| padding: 4px; } } | |
| .p--gutters-2l { | |
| padding-left: 24px; } | |
| @media only screen and (min-width: 1360px) { | |
| .p--gutters-2l { | |
| padding-left: 24px; } } | |
| @media only screen and (max-width: 1359px) { | |
| .p--gutters-2l { | |
| padding-left: 16px; } } | |
| @media only screen and (max-width: 1023px) { | |
| .p--gutters-2l { | |
| padding-left: 12px; } } | |
| @media only screen and (max-width: 639px) { | |
| .p--gutters-2l { | |
| padding-left: 12px; } } | |
| @media only screen and (max-width: 324px) { | |
| .p--gutters-2l { | |
| padding-left: 8px; } } | |
| .p--gutters-2r { | |
| padding-right: 24px; } | |
| @media only screen and (min-width: 1360px) { | |
| .p--gutters-2r { | |
| padding-right: 24px; } } | |
| @media only screen and (max-width: 1359px) { | |
| .p--gutters-2r { | |
| padding-right: 16px; } } | |
| @media only screen and (max-width: 1023px) { | |
| .p--gutters-2r { | |
| padding-right: 12px; } } | |
| @media only screen and (max-width: 639px) { | |
| .p--gutters-2r { | |
| padding-right: 12px; } } | |
| @media only screen and (max-width: 324px) { | |
| .p--gutters-2r { | |
| padding-right: 8px; } } | |
| .p--gutters-2t { | |
| padding-top: 24px; } | |
| @media only screen and (min-width: 1360px) { | |
| .p--gutters-2t { | |
| padding-top: 24px; } } | |
| @media only screen and (max-width: 1359px) { | |
| .p--gutters-2t { | |
| padding-top: 16px; } } | |
| @media only screen and (max-width: 1023px) { | |
| .p--gutters-2t { | |
| padding-top: 12px; } } | |
| @media only screen and (max-width: 639px) { | |
| .p--gutters-2t { | |
| padding-top: 12px; } } | |
| @media only screen and (max-width: 324px) { | |
| .p--gutters-2t { | |
| padding-top: 8px; } } | |
| .p--gutters-2b { | |
| padding-bottom: 24px; } | |
| @media only screen and (min-width: 1360px) { | |
| .p--gutters-2b { | |
| padding-bottom: 24px; } } | |
| @media only screen and (max-width: 1359px) { | |
| .p--gutters-2b { | |
| padding-bottom: 16px; } } | |
| @media only screen and (max-width: 1023px) { | |
| .p--gutters-2b { | |
| padding-bottom: 12px; } } | |
| @media only screen and (max-width: 639px) { | |
| .p--gutters-2b { | |
| padding-bottom: 12px; } } | |
| @media only screen and (max-width: 324px) { | |
| .p--gutters-2b { | |
| padding-bottom: 8px; } } | |
| .p--gutters-2x { | |
| padding-left: 24px; | |
| padding-right: 24px; } | |
| @media only screen and (min-width: 1360px) { | |
| .p--gutters-2x { | |
| padding-left: 24px; | |
| padding-right: 24px; } } | |
| @media only screen and (max-width: 1359px) { | |
| .p--gutters-2x { | |
| padding-left: 16px; | |
| padding-right: 16px; } } | |
| @media only screen and (max-width: 1023px) { | |
| .p--gutters-2x { | |
| padding-left: 12px; | |
| padding-right: 12px; } } | |
| @media only screen and (max-width: 639px) { | |
| .p--gutters-2x { | |
| padding-left: 12px; | |
| padding-right: 12px; } } | |
| @media only screen and (max-width: 324px) { | |
| .p--gutters-2x { | |
| padding-left: 8px; | |
| padding-right: 8px; } } | |
| .p--gutters-2y { | |
| padding-top: 24px; | |
| padding-bottom: 24px; } | |
| @media only screen and (min-width: 1360px) { | |
| .p--gutters-2y { | |
| padding-top: 24px; | |
| padding-bottom: 24px; } } | |
| @media only screen and (max-width: 1359px) { | |
| .p--gutters-2y { | |
| padding-top: 16px; | |
| padding-bottom: 16px; } } | |
| @media only screen and (max-width: 1023px) { | |
| .p--gutters-2y { | |
| padding-top: 12px; | |
| padding-bottom: 12px; } } | |
| @media only screen and (max-width: 639px) { | |
| .p--gutters-2y { | |
| padding-top: 12px; | |
| padding-bottom: 12px; } } | |
| @media only screen and (max-width: 324px) { | |
| .p--gutters-2y { | |
| padding-top: 8px; | |
| padding-bottom: 8px; } } | |
| .p--gutters-2 { | |
| padding: 24px; } | |
| @media only screen and (min-width: 1360px) { | |
| .p--gutters-2 { | |
| padding: 24px; } } | |
| @media only screen and (max-width: 1359px) { | |
| .p--gutters-2 { | |
| padding: 16px; } } | |
| @media only screen and (max-width: 1023px) { | |
| .p--gutters-2 { | |
| padding: 12px; } } | |
| @media only screen and (max-width: 639px) { | |
| .p--gutters-2 { | |
| padding: 12px; } } | |
| @media only screen and (max-width: 324px) { | |
| .p--gutters-2 { | |
| padding: 8px; } } | |
| .m--gutters-l { | |
| margin-left: 12px; } | |
| @media only screen and (min-width: 1360px) { | |
| .m--gutters-l { | |
| margin-left: 12px; } } | |
| @media only screen and (max-width: 1359px) { | |
| .m--gutters-l { | |
| margin-left: 8px; } } | |
| @media only screen and (max-width: 1023px) { | |
| .m--gutters-l { | |
| margin-left: 6px; } } | |
| @media only screen and (max-width: 639px) { | |
| .m--gutters-l { | |
| margin-left: 6px; } } | |
| @media only screen and (max-width: 324px) { | |
| .m--gutters-l { | |
| margin-left: 4px; } } | |
| .m--gutters-r { | |
| margin-right: 12px; } | |
| @media only screen and (min-width: 1360px) { | |
| .m--gutters-r { | |
| margin-right: 12px; } } | |
| @media only screen and (max-width: 1359px) { | |
| .m--gutters-r { | |
| margin-right: 8px; } } | |
| @media only screen and (max-width: 1023px) { | |
| .m--gutters-r { | |
| margin-right: 6px; } } | |
| @media only screen and (max-width: 639px) { | |
| .m--gutters-r { | |
| margin-right: 6px; } } | |
| @media only screen and (max-width: 324px) { | |
| .m--gutters-r { | |
| margin-right: 4px; } } | |
| .m--gutters-t { | |
| margin-top: 12px; } | |
| @media only screen and (min-width: 1360px) { | |
| .m--gutters-t { | |
| margin-top: 12px; } } | |
| @media only screen and (max-width: 1359px) { | |
| .m--gutters-t { | |
| margin-top: 8px; } } | |
| @media only screen and (max-width: 1023px) { | |
| .m--gutters-t { | |
| margin-top: 6px; } } | |
| @media only screen and (max-width: 639px) { | |
| .m--gutters-t { | |
| margin-top: 6px; } } | |
| @media only screen and (max-width: 324px) { | |
| .m--gutters-t { | |
| margin-top: 4px; } } | |
| .m--gutters-b { | |
| margin-bottom: 12px; } | |
| @media only screen and (min-width: 1360px) { | |
| .m--gutters-b { | |
| margin-bottom: 12px; } } | |
| @media only screen and (max-width: 1359px) { | |
| .m--gutters-b { | |
| margin-bottom: 8px; } } | |
| @media only screen and (max-width: 1023px) { | |
| .m--gutters-b { | |
| margin-bottom: 6px; } } | |
| @media only screen and (max-width: 639px) { | |
| .m--gutters-b { | |
| margin-bottom: 6px; } } | |
| @media only screen and (max-width: 324px) { | |
| .m--gutters-b { | |
| margin-bottom: 4px; } } | |
| .m--gutters-x { | |
| margin-left: 12px; | |
| margin-right: 12px; } | |
| @media only screen and (min-width: 1360px) { | |
| .m--gutters-x { | |
| margin-left: 12px; | |
| margin-right: 12px; } } | |
| @media only screen and (max-width: 1359px) { | |
| .m--gutters-x { | |
| margin-left: 8px; | |
| margin-right: 8px; } } | |
| @media only screen and (max-width: 1023px) { | |
| .m--gutters-x { | |
| margin-left: 6px; | |
| margin-right: 6px; } } | |
| @media only screen and (max-width: 639px) { | |
| .m--gutters-x { | |
| margin-left: 6px; | |
| margin-right: 6px; } } | |
| @media only screen and (max-width: 324px) { | |
| .m--gutters-x { | |
| margin-left: 4px; | |
| margin-right: 4px; } } | |
| .input-group, .btn-group, .paginate, button, .btn, .card, .m--gutters-y { | |
| margin-top: 12px; | |
| margin-bottom: 12px; } | |
| @media only screen and (min-width: 1360px) { | |
| .input-group, .btn-group, .paginate, button, .btn, .card, .m--gutters-y { | |
| margin-top: 12px; | |
| margin-bottom: 12px; } } | |
| @media only screen and (max-width: 1359px) { | |
| .input-group, .btn-group, .paginate, button, .btn, .card, .m--gutters-y { | |
| margin-top: 8px; | |
| margin-bottom: 8px; } } | |
| @media only screen and (max-width: 1023px) { | |
| .input-group, .btn-group, .paginate, button, .btn, .card, .m--gutters-y { | |
| margin-top: 6px; | |
| margin-bottom: 6px; } } | |
| @media only screen and (max-width: 639px) { | |
| .input-group, .btn-group, .paginate, button, .btn, .card, .m--gutters-y { | |
| margin-top: 6px; | |
| margin-bottom: 6px; } } | |
| @media only screen and (max-width: 324px) { | |
| .input-group, .btn-group, .paginate, button, .btn, .card, .m--gutters-y { | |
| margin-top: 4px; | |
| margin-bottom: 4px; } } | |
| .navbar > .dropdown, | |
| .navbar > li > .dropdown, | |
| .navbar > .btn-group, | |
| .navbar > li > .btn-group, | |
| .navbar > .input-group, | |
| .navbar > li > .input-group, .m--gutters { | |
| margin: 12px; } | |
| @media only screen and (min-width: 1360px) { | |
| .navbar > .dropdown, | |
| .navbar > li > .dropdown, | |
| .navbar > .btn-group, | |
| .navbar > li > .btn-group, | |
| .navbar > .input-group, | |
| .navbar > li > .input-group, .m--gutters { | |
| margin: 12px; } } | |
| @media only screen and (max-width: 1359px) { | |
| .navbar > .dropdown, | |
| .navbar > li > .dropdown, | |
| .navbar > .btn-group, | |
| .navbar > li > .btn-group, | |
| .navbar > .input-group, | |
| .navbar > li > .input-group, .m--gutters { | |
| margin: 8px; } } | |
| @media only screen and (max-width: 1023px) { | |
| .navbar > .dropdown, | |
| .navbar > li > .dropdown, | |
| .navbar > .btn-group, | |
| .navbar > li > .btn-group, | |
| .navbar > .input-group, | |
| .navbar > li > .input-group, .m--gutters { | |
| margin: 6px; } } | |
| @media only screen and (max-width: 639px) { | |
| .navbar > .dropdown, | |
| .navbar > li > .dropdown, | |
| .navbar > .btn-group, | |
| .navbar > li > .btn-group, | |
| .navbar > .input-group, | |
| .navbar > li > .input-group, .m--gutters { | |
| margin: 6px; } } | |
| @media only screen and (max-width: 324px) { | |
| .navbar > .dropdown, | |
| .navbar > li > .dropdown, | |
| .navbar > .btn-group, | |
| .navbar > li > .btn-group, | |
| .navbar > .input-group, | |
| .navbar > li > .input-group, .m--gutters { | |
| margin: 4px; } } | |
| .m--gutters-2l { | |
| margin-left: 24px; } | |
| @media only screen and (min-width: 1360px) { | |
| .m--gutters-2l { | |
| margin-left: 24px; } } | |
| @media only screen and (max-width: 1359px) { | |
| .m--gutters-2l { | |
| margin-left: 16px; } } | |
| @media only screen and (max-width: 1023px) { | |
| .m--gutters-2l { | |
| margin-left: 12px; } } | |
| @media only screen and (max-width: 639px) { | |
| .m--gutters-2l { | |
| margin-left: 12px; } } | |
| @media only screen and (max-width: 324px) { | |
| .m--gutters-2l { | |
| margin-left: 8px; } } | |
| .m--gutters-2r { | |
| margin-right: 24px; } | |
| @media only screen and (min-width: 1360px) { | |
| .m--gutters-2r { | |
| margin-right: 24px; } } | |
| @media only screen and (max-width: 1359px) { | |
| .m--gutters-2r { | |
| margin-right: 16px; } } | |
| @media only screen and (max-width: 1023px) { | |
| .m--gutters-2r { | |
| margin-right: 12px; } } | |
| @media only screen and (max-width: 639px) { | |
| .m--gutters-2r { | |
| margin-right: 12px; } } | |
| @media only screen and (max-width: 324px) { | |
| .m--gutters-2r { | |
| margin-right: 8px; } } | |
| .m--gutters-2t { | |
| margin-top: 24px; } | |
| @media only screen and (min-width: 1360px) { | |
| .m--gutters-2t { | |
| margin-top: 24px; } } | |
| @media only screen and (max-width: 1359px) { | |
| .m--gutters-2t { | |
| margin-top: 16px; } } | |
| @media only screen and (max-width: 1023px) { | |
| .m--gutters-2t { | |
| margin-top: 12px; } } | |
| @media only screen and (max-width: 639px) { | |
| .m--gutters-2t { | |
| margin-top: 12px; } } | |
| @media only screen and (max-width: 324px) { | |
| .m--gutters-2t { | |
| margin-top: 8px; } } | |
| .m--gutters-2b { | |
| margin-bottom: 24px; } | |
| @media only screen and (min-width: 1360px) { | |
| .m--gutters-2b { | |
| margin-bottom: 24px; } } | |
| @media only screen and (max-width: 1359px) { | |
| .m--gutters-2b { | |
| margin-bottom: 16px; } } | |
| @media only screen and (max-width: 1023px) { | |
| .m--gutters-2b { | |
| margin-bottom: 12px; } } | |
| @media only screen and (max-width: 639px) { | |
| .m--gutters-2b { | |
| margin-bottom: 12px; } } | |
| @media only screen and (max-width: 324px) { | |
| .m--gutters-2b { | |
| margin-bottom: 8px; } } | |
| .m--gutters-2x { | |
| margin-left: 24px; | |
| margin-right: 24px; } | |
| @media only screen and (min-width: 1360px) { | |
| .m--gutters-2x { | |
| margin-left: 24px; | |
| margin-right: 24px; } } | |
| @media only screen and (max-width: 1359px) { | |
| .m--gutters-2x { | |
| margin-left: 16px; | |
| margin-right: 16px; } } | |
| @media only screen and (max-width: 1023px) { | |
| .m--gutters-2x { | |
| margin-left: 12px; | |
| margin-right: 12px; } } | |
| @media only screen and (max-width: 639px) { | |
| .m--gutters-2x { | |
| margin-left: 12px; | |
| margin-right: 12px; } } | |
| @media only screen and (max-width: 324px) { | |
| .m--gutters-2x { | |
| margin-left: 8px; | |
| margin-right: 8px; } } | |
| .m--gutters-2y { | |
| margin-top: 24px; | |
| margin-bottom: 24px; } | |
| @media only screen and (min-width: 1360px) { | |
| .m--gutters-2y { | |
| margin-top: 24px; | |
| margin-bottom: 24px; } } | |
| @media only screen and (max-width: 1359px) { | |
| .m--gutters-2y { | |
| margin-top: 16px; | |
| margin-bottom: 16px; } } | |
| @media only screen and (max-width: 1023px) { | |
| .m--gutters-2y { | |
| margin-top: 12px; | |
| margin-bottom: 12px; } } | |
| @media only screen and (max-width: 639px) { | |
| .m--gutters-2y { | |
| margin-top: 12px; | |
| margin-bottom: 12px; } } | |
| @media only screen and (max-width: 324px) { | |
| .m--gutters-2y { | |
| margin-top: 8px; | |
| margin-bottom: 8px; } } | |
| .m--gutters-2 { | |
| margin: 24px; } | |
| @media only screen and (min-width: 1360px) { | |
| .m--gutters-2 { | |
| margin: 24px; } } | |
| @media only screen and (max-width: 1359px) { | |
| .m--gutters-2 { | |
| margin: 16px; } } | |
| @media only screen and (max-width: 1023px) { | |
| .m--gutters-2 { | |
| margin: 12px; } } | |
| @media only screen and (max-width: 639px) { | |
| .m--gutters-2 { | |
| margin: 12px; } } | |
| @media only screen and (max-width: 324px) { | |
| .m--gutters-2 { | |
| margin: 8px; } } | |
| @media only screen and (min-width: 1360px) { | |
| .hide--xl, .x0--xl { | |
| display: none !important; } } | |
| @media only screen and (max-width: 1359px) { | |
| .hide--lg, .x0--lg { | |
| display: none !important; } } | |
| @media only screen and (max-width: 1023px) { | |
| .hide--md, .x0--md { | |
| display: none !important; } } | |
| @media only screen and (max-width: 639px) { | |
| .hide--sm, .x0--sm { | |
| display: none !important; } } | |
| @media only screen and (max-width: 324px) { | |
| .hide--xs, .x0--xs { | |
| display: none !important; } } | |
| .btn--blue .btn, | |
| .btn--blue button, | |
| .btn.btn--blue, .bg--blue { | |
| background: #30A9DE; } | |
| .bc--blue { | |
| border-color: #30A9DE; } | |
| .btn--dark-blue .btn, | |
| .btn--dark-blue button, | |
| .btn.btn--dark-blue, .bg--dark-blue { | |
| background: #229dd3; } | |
| .bc--dark-blue { | |
| border-color: #229dd3; } | |
| .btn--light-blue .btn, | |
| .btn--light-blue button, | |
| .btn.btn--light-blue, .bg--light-blue { | |
| background: #72c4e9; } | |
| .bc--light-blue { | |
| border-color: #72c4e9; } | |
| .btn--green .btn, | |
| .btn--green button, | |
| .btn.btn--green, .bg--green { | |
| background: #2dc483; } | |
| .bc--green { | |
| border-color: #2dc483; } | |
| .btn--dark-green .btn, | |
| .btn--dark-green button, | |
| .btn.btn--dark-green, .bg--dark-green { | |
| background: #28af75; } | |
| .bc--dark-green { | |
| border-color: #28af75; } | |
| .btn--light-green .btn, | |
| .btn--light-green button, | |
| .btn.btn--light-green, .bg--light-green { | |
| background: #a1e9ca; } | |
| .bc--light-green { | |
| border-color: #a1e9ca; } | |
| .btn--red .btn, | |
| .btn--red button, | |
| .btn.btn--red, .bg--red { | |
| background: #E53A40; } | |
| .bc--red { | |
| border-color: #E53A40; } | |
| .btn--dark-red .btn, | |
| .btn--dark-red button, | |
| .btn.btn--dark-red, .bg--dark-red { | |
| background: #d01c22; } | |
| .bc--dark-red { | |
| border-color: #d01c22; } | |
| .btn--light-red .btn, | |
| .btn--light-red button, | |
| .btn.btn--light-red, .bg--light-red { | |
| background: #eb676c; } | |
| .bc--light-red { | |
| border-color: #eb676c; } | |
| .btn--yellow .btn, | |
| .btn--yellow button, | |
| .btn.btn--yellow, .bg--yellow { | |
| background: #ffc952; } | |
| .bc--yellow { | |
| border-color: #ffc952; } | |
| .btn--dark-yellow .btn, | |
| .btn--dark-yellow button, | |
| .btn.btn--dark-yellow, .bg--dark-yellow { | |
| background: #ffb91f; } | |
| .bc--dark-yellow { | |
| border-color: #ffb91f; } | |
| .btn--light-yellow .btn, | |
| .btn--light-yellow button, | |
| .btn.btn--light-yellow, .bg--light-yellow { | |
| background: #ffd985; } | |
| .bc--light-yellow { | |
| border-color: #ffd985; } | |
| .btn--orange .btn, | |
| .btn--orange button, | |
| .btn.btn--orange, .bg--orange { | |
| background: #e87d34; } | |
| .bc--orange { | |
| border-color: #e87d34; } | |
| .btn--dark-orange .btn, | |
| .btn--dark-orange button, | |
| .btn.btn--dark-orange, .bg--dark-orange { | |
| background: #d16318; } | |
| .bc--dark-orange { | |
| border-color: #d16318; } | |
| .btn--light-orange .btn, | |
| .btn--light-orange button, | |
| .btn.btn--light-orange, .bg--light-orange { | |
| background: #f0a979; } | |
| .bc--light-orange { | |
| border-color: #f0a979; } | |
| .btn--lightest-grey .btn, | |
| .btn--lightest-grey button, | |
| .btn.btn--lightest-grey, .bg--lightest-grey { | |
| background: #f4f4f5; } | |
| .bc--lightest-grey { | |
| border-color: #f4f4f5; } | |
| .btn--lighter-grey .btn, | |
| .btn--lighter-grey button, | |
| .btn.btn--lighter-grey, .bg--lighter-grey { | |
| background: #dbdbda; } | |
| .bc--lighter-grey { | |
| border-color: #dbdbda; } | |
| .btn--light-grey .btn, | |
| .btn--light-grey button, | |
| .btn.btn--light-grey, .bg--light-grey { | |
| background: #9c9c99; } | |
| .bc--light-grey { | |
| border-color: #9c9c99; } | |
| .btn--grey .btn, | |
| .btn--grey button, | |
| .btn.btn--grey, .bg--grey { | |
| background: #6f6567; } | |
| .bc--grey { | |
| border-color: #6f6567; } | |
| .btn--dark-grey .btn, | |
| .btn--dark-grey button, | |
| .btn.btn--dark-grey, .bg--dark-grey { | |
| background: #544d4e; } | |
| .bc--dark-grey { | |
| border-color: #544d4e; } | |
| .btn--darker-grey .btn, | |
| .btn--darker-grey button, | |
| .btn.btn--darker-grey, .bg--darker-grey { | |
| background: #474142; } | |
| .bc--darker-grey { | |
| border-color: #474142; } | |
| .btn--darkest-grey .btn, | |
| .btn--darkest-grey button, | |
| .btn.btn--darkest-grey, .bg--darkest-grey { | |
| background: #3a3435; } | |
| .bc--darkest-grey { | |
| border-color: #3a3435; } | |
| .btn--black .btn, | |
| .btn--black button, | |
| .btn.btn--black, .bg--black { | |
| background: #2c2829; } | |
| .bc--black { | |
| border-color: #2c2829; } | |
| .btn--white .btn, | |
| .btn--white button, | |
| .btn.btn--white, .bg--white { | |
| background: #fefeff; } | |
| .bc--white { | |
| border-color: #fefeff; } | |
| .cols--1 { | |
| -webkit-column-count: 1; | |
| -moz-column-count: 1; | |
| column-count: 1; } | |
| .cols--2 { | |
| -webkit-column-count: 2; | |
| -moz-column-count: 2; | |
| column-count: 2; } | |
| .cols--3 { | |
| -webkit-column-count: 3; | |
| -moz-column-count: 3; | |
| column-count: 3; } | |
| .cols--4 { | |
| -webkit-column-count: 4; | |
| -moz-column-count: 4; | |
| column-count: 4; } | |
| .cols--5 { | |
| -webkit-column-count: 5; | |
| -moz-column-count: 5; | |
| column-count: 5; } | |
| .cols--6 { | |
| -webkit-column-count: 6; | |
| -moz-column-count: 6; | |
| column-count: 6; } | |
| .cols--7 { | |
| -webkit-column-count: 7; | |
| -moz-column-count: 7; | |
| column-count: 7; } | |
| .cols--8 { | |
| -webkit-column-count: 8; | |
| -moz-column-count: 8; | |
| column-count: 8; } | |
| .cols--9 { | |
| -webkit-column-count: 9; | |
| -moz-column-count: 9; | |
| column-count: 9; } | |
| .cols--10 { | |
| -webkit-column-count: 10; | |
| -moz-column-count: 10; | |
| column-count: 10; } | |
| .cols--11 { | |
| -webkit-column-count: 11; | |
| -moz-column-count: 11; | |
| column-count: 11; } | |
| .cols--12 { | |
| -webkit-column-count: 12; | |
| -moz-column-count: 12; | |
| column-count: 12; } | |
| /** Creates placeholders and classes */ | |
| .m--y0, .m--t0 { | |
| margin-top: 0rem !important; } | |
| .m--y0, .m--b0 { | |
| margin-bottom: 0rem !important; } | |
| .m--x0, .m--r0 { | |
| margin-right: 0rem !important; } | |
| .m--x0, .m--l0 { | |
| margin-left: 0rem !important; } | |
| .m--0 { | |
| margin: 0rem !important; } | |
| .p--y0, .card > p + p, | |
| .card > h1 + p, | |
| .card > h2 + p, | |
| .card > .type--h2 + p, | |
| .card > h3 + p, | |
| .card > .type--h3 + p, | |
| .card > h4 + p, | |
| .card > .type--h4 + p, | |
| .card > h5 + p, | |
| .card > .type--h5 + p, | |
| .card > h6 + p, | |
| .card > .type--h6 + p, | |
| .card > .type--h1 + p, .p--t0 { | |
| padding-top: 0rem !important; } | |
| .p--y0, .p--b0 { | |
| padding-bottom: 0rem !important; } | |
| .p--x0, .p--r0 { | |
| padding-right: 0rem !important; } | |
| .p--x0, .p--l0 { | |
| padding-left: 0rem !important; } | |
| .grid--nopad, | |
| .row--nopad, | |
| .col--nopad, | |
| .row.row--nopad, | |
| .col.col--nopad, .btn-group.btn--l, | |
| .btn-group.btn--m, | |
| .btn-group.btn--s, .navbar.grid--nopad, .p--0 { | |
| padding: 0rem !important; } | |
| .m--y1, .m--t1 { | |
| margin-top: 0.25rem !important; } | |
| .m--y1, .m--b1 { | |
| margin-bottom: 0.25rem !important; } | |
| .m--x1, .m--r1 { | |
| margin-right: 0.25rem !important; } | |
| .m--x1, .m--l1 { | |
| margin-left: 0.25rem !important; } | |
| .m--1 { | |
| margin: 0.25rem !important; } | |
| .p--y1, .p--t1 { | |
| padding-top: 0.25rem !important; } | |
| .p--y1, .p--b1 { | |
| padding-bottom: 0.25rem !important; } | |
| .p--x1, .p--r1 { | |
| padding-right: 0.25rem !important; } | |
| .p--x1, .p--l1 { | |
| padding-left: 0.25rem !important; } | |
| .p--1 { | |
| padding: 0.25rem !important; } | |
| .m--y2, .m--t2 { | |
| margin-top: 0.5rem !important; } | |
| .m--y2, .m--b2 { | |
| margin-bottom: 0.5rem !important; } | |
| .card > .navbar > button, .card > .navbar > .btn, .card > .navbar > li > button, .card > .navbar > li > .btn, .m--x2, .m--r2 { | |
| margin-right: 0.5rem !important; } | |
| .card > .navbar > button, .card > .navbar > .btn, .card > .navbar > li > button, .card > .navbar > li > .btn, .m--x2, .m--l2 { | |
| margin-left: 0.5rem !important; } | |
| .m--2 { | |
| margin: 0.5rem !important; } | |
| .p--y2, .p--t2 { | |
| padding-top: 0.5rem !important; } | |
| .p--y2, .p--b2 { | |
| padding-bottom: 0.5rem !important; } | |
| .card > .navbar, .card > .navbar > a, .card > .navbar > li > a, .p--x2, .p--r2 { | |
| padding-right: 0.5rem !important; } | |
| .card > .navbar, .card > .navbar > a, .card > .navbar > li > a, .p--x2, .p--l2 { | |
| padding-left: 0.5rem !important; } | |
| .p--2 { | |
| padding: 0.5rem !important; } | |
| .card > .navbar > button, .card > .navbar > .btn, .card > .navbar > li > button, .card > .navbar > li > .btn, .m--y3, .m--t3 { | |
| margin-top: 1rem !important; } | |
| .card > .navbar > button, .card > .navbar > .btn, .card > .navbar > li > button, .card > .navbar > li > .btn, .m--y3, .m--b3 { | |
| margin-bottom: 1rem !important; } | |
| .m--x3, .m--r3 { | |
| margin-right: 1rem !important; } | |
| .m--x3, .m--l3 { | |
| margin-left: 1rem !important; } | |
| .card > .btn, .card > button, .m--3 { | |
| margin: 1rem !important; } | |
| .card > .navbar > a, .card > .navbar > li > a, .p--y3, .p--t3 { | |
| padding-top: 1rem !important; } | |
| .card > .navbar > a, .card > .navbar > li > a, .p--y3, .p--b3 { | |
| padding-bottom: 1rem !important; } | |
| .p--x3, .p--r3 { | |
| padding-right: 1rem !important; } | |
| .p--x3, .p--l3 { | |
| padding-left: 1rem !important; } | |
| .card > a:not(.btn):not(.card__image), .card p, | |
| .card .card__link, | |
| .card .card__row, .card h1, .card h2, .card .type--h2, .card h3, .card .type--h3, .card h4, .card .type--h4, .card h5, .card .type--h5, .card h6, .card .type--h6, | |
| .card .type--h1, .p--3 { | |
| padding: 1rem !important; } | |
| .m--y4, .m--t4 { | |
| margin-top: 2rem !important; } | |
| .m--y4, .m--b4 { | |
| margin-bottom: 2rem !important; } | |
| .m--x4, .m--r4 { | |
| margin-right: 2rem !important; } | |
| .m--x4, .m--l4 { | |
| margin-left: 2rem !important; } | |
| .m--4 { | |
| margin: 2rem !important; } | |
| .p--y4, .p--t4 { | |
| padding-top: 2rem !important; } | |
| .p--y4, .p--b4 { | |
| padding-bottom: 2rem !important; } | |
| .p--x4, .p--r4 { | |
| padding-right: 2rem !important; } | |
| .p--x4, .p--l4 { | |
| padding-left: 2rem !important; } | |
| .p--4 { | |
| padding: 2rem !important; } | |
| .m--y5, .m--t5 { | |
| margin-top: 4rem !important; } | |
| .m--y5, .m--b5 { | |
| margin-bottom: 4rem !important; } | |
| .m--x5, .m--r5 { | |
| margin-right: 4rem !important; } | |
| .m--x5, .m--l5 { | |
| margin-left: 4rem !important; } | |
| .m--5 { | |
| margin: 4rem !important; } | |
| .p--y5, .p--t5 { | |
| padding-top: 4rem !important; } | |
| .p--y5, .p--b5 { | |
| padding-bottom: 4rem !important; } | |
| .p--x5, .p--r5 { | |
| padding-right: 4rem !important; } | |
| .p--x5, .p--l5 { | |
| padding-left: 4rem !important; } | |
| .p--5 { | |
| padding: 4rem !important; } | |
| .m--y6, .m--t6 { | |
| margin-top: 8rem !important; } | |
| .m--y6, .m--b6 { | |
| margin-bottom: 8rem !important; } | |
| .m--x6, .m--r6 { | |
| margin-right: 8rem !important; } | |
| .m--x6, .m--l6 { | |
| margin-left: 8rem !important; } | |
| .m--6 { | |
| margin: 8rem !important; } | |
| .p--y6, .p--t6 { | |
| padding-top: 8rem !important; } | |
| .p--y6, .p--b6 { | |
| padding-bottom: 8rem !important; } | |
| .p--x6, .p--r6 { | |
| padding-right: 8rem !important; } | |
| .p--x6, .p--l6 { | |
| padding-left: 8rem !important; } | |
| .p--6 { | |
| padding: 8rem !important; } | |
| .m--y7, .m--t7 { | |
| margin-top: 16rem !important; } | |
| .m--y7, .m--b7 { | |
| margin-bottom: 16rem !important; } | |
| .m--x7, .m--r7 { | |
| margin-right: 16rem !important; } | |
| .m--x7, .m--l7 { | |
| margin-left: 16rem !important; } | |
| .m--7 { | |
| margin: 16rem !important; } | |
| .p--y7, .p--t7 { | |
| padding-top: 16rem !important; } | |
| .p--y7, .p--b7 { | |
| padding-bottom: 16rem !important; } | |
| .p--x7, .p--r7 { | |
| padding-right: 16rem !important; } | |
| .p--x7, .p--l7 { | |
| padding-left: 16rem !important; } | |
| .p--7 { | |
| padding: 16rem !important; } | |
| .m--y8, .m--t8 { | |
| margin-top: 32rem !important; } | |
| .m--y8, .m--b8 { | |
| margin-bottom: 32rem !important; } | |
| .m--x8, .m--r8 { | |
| margin-right: 32rem !important; } | |
| .m--x8, .m--l8 { | |
| margin-left: 32rem !important; } | |
| .m--8 { | |
| margin: 32rem !important; } | |
| .p--y8, .p--t8 { | |
| padding-top: 32rem !important; } | |
| .p--y8, .p--b8 { | |
| padding-bottom: 32rem !important; } | |
| .p--x8, .p--r8 { | |
| padding-right: 32rem !important; } | |
| .p--x8, .p--l8 { | |
| padding-left: 32rem !important; } | |
| .p--8 { | |
| padding: 32rem !important; } | |
| .type--xxs { | |
| font-size: 0.75rem; | |
| line-height: 1.1; } | |
| @media only screen and (max-width: 324px) { | |
| .type--xxs { | |
| font-size: 0.675rem; } } | |
| .type--xs { | |
| font-size: 0.875rem; | |
| line-height: 1.1; } | |
| @media only screen and (max-width: 324px) { | |
| .type--xs { | |
| font-size: 0.7875rem; } } | |
| .type--sm, .select__caret, .dropdown__caret { | |
| font-size: 1rem; | |
| line-height: 1.1; } | |
| @media only screen and (max-width: 324px) { | |
| .type--sm, .select__caret, .dropdown__caret { | |
| font-size: 0.9rem; } } | |
| .type--md { | |
| font-size: 1.1875rem; | |
| line-height: 1.1; } | |
| @media only screen and (max-width: 324px) { | |
| .type--md { | |
| font-size: 1.06875rem; } } | |
| .type--lg { | |
| text-rendering: optimizeLegibility; | |
| font-size: 1.4375rem; | |
| line-height: 1.1; } | |
| @media only screen and (max-width: 324px) { | |
| .type--lg { | |
| text-rendering: optimizeLegibility; | |
| font-size: 1.29375rem; } } | |
| .type--xl { | |
| text-rendering: optimizeLegibility; | |
| font-size: 2.25rem; | |
| line-height: 1.1; } | |
| @media only screen and (max-width: 324px) { | |
| .type--xl { | |
| text-rendering: optimizeLegibility; | |
| font-size: 2.025rem; } } | |
| .type--xxl { | |
| text-rendering: optimizeLegibility; | |
| font-size: 3rem; | |
| line-height: 1.1; } | |
| @media only screen and (max-width: 324px) { | |
| .type--xxl { | |
| text-rendering: optimizeLegibility; | |
| font-size: 2.7rem; } } | |
| .type--blue { | |
| color: #30A9DE; } | |
| .type--dark-blue { | |
| color: #229dd3; } | |
| .type--light-blue { | |
| color: #72c4e9; } | |
| .type--green { | |
| color: #2dc483; } | |
| .type--dark-green { | |
| color: #28af75; } | |
| .type--light-green { | |
| color: #a1e9ca; } | |
| .type--red { | |
| color: #E53A40; } | |
| .type--dark-red { | |
| color: #d01c22; } | |
| .type--light-red { | |
| color: #eb676c; } | |
| .type--yellow { | |
| color: #ffc952; } | |
| .type--dark-yellow { | |
| color: #ffb91f; } | |
| .type--light-yellow { | |
| color: #ffd985; } | |
| .type--orange { | |
| color: #e87d34; } | |
| .type--dark-orange { | |
| color: #d16318; } | |
| .type--light-orange { | |
| color: #f0a979; } | |
| .type--lightest-grey { | |
| color: #f4f4f5; } | |
| .type--lighter-grey { | |
| color: #dbdbda; } | |
| .type--light-grey { | |
| color: #9c9c99; } | |
| .type--grey { | |
| color: #6f6567; } | |
| .type--dark-grey { | |
| color: #544d4e; } | |
| .type--darker-grey { | |
| color: #474142; } | |
| .type--darkest-grey { | |
| color: #3a3435; } | |
| .type--black { | |
| color: #2c2829; } | |
| .type--white { | |
| color: #fefeff; } | |
| .type--thin { | |
| font-weight: 100; } | |
| .type--ultra-light { | |
| font-weight: 200; } | |
| .type--light { | |
| font-weight: 300; } | |
| .type--regular { | |
| font-weight: 400; } | |
| .type--medium { | |
| font-weight: 500; } | |
| .type--semi-bold { | |
| font-weight: 600; } | |
| .type--bold { | |
| font-weight: 700; } | |
| .type--heavy { | |
| font-weight: 800; } | |
| .type--ultra-heavy { | |
| font-weight: 900; } | |
| .type--left { | |
| text-align: left; | |
| justify-content: left; } | |
| .type--right { | |
| text-align: right; | |
| justify-content: right; } | |
| .type--center { | |
| text-align: center; | |
| justify-content: center; } | |
| body { | |
| text-rendering: optimizeSpeed; } | |
| .select__caret, .dropdown__caret { | |
| -webkit-transition: transform 0.16s ease-out; | |
| transition: transform 0.16s ease-out; } | |
| /** | |
| ** Core | |
| **/ | |
| /** Creates placeholders and classes */ | |
| .bw--0 { | |
| border-width: 0rem; | |
| border-style: solid; } | |
| .bw--t0 { | |
| border-top-width: 0rem; | |
| border-top-style: solid; } | |
| .bw--r0 { | |
| border-right-width: 0rem; | |
| border-right-style: solid; } | |
| .bw--b0 { | |
| border-bottom-width: 0rem; | |
| border-bottom-style: solid; } | |
| .bw--l0 { | |
| border-left-width: 0rem; | |
| border-left-style: solid; } | |
| .bw--1 { | |
| border-width: 0.0625rem; | |
| border-style: solid; } | |
| .bw--t1 { | |
| border-top-width: 0.0625rem; | |
| border-top-style: solid; } | |
| .bw--r1 { | |
| border-right-width: 0.0625rem; | |
| border-right-style: solid; } | |
| .bw--b1 { | |
| border-bottom-width: 0.0625rem; | |
| border-bottom-style: solid; } | |
| .bw--l1 { | |
| border-left-width: 0.0625rem; | |
| border-left-style: solid; } | |
| .bw--2 { | |
| border-width: 0.125rem; | |
| border-style: solid; } | |
| .bw--t2 { | |
| border-top-width: 0.125rem; | |
| border-top-style: solid; } | |
| .bw--r2 { | |
| border-right-width: 0.125rem; | |
| border-right-style: solid; } | |
| .bw--b2 { | |
| border-bottom-width: 0.125rem; | |
| border-bottom-style: solid; } | |
| .bw--l2 { | |
| border-left-width: 0.125rem; | |
| border-left-style: solid; } | |
| .bw--3 { | |
| border-width: 0.25rem; | |
| border-style: solid; } | |
| .bw--t3 { | |
| border-top-width: 0.25rem; | |
| border-top-style: solid; } | |
| .bw--r3 { | |
| border-right-width: 0.25rem; | |
| border-right-style: solid; } | |
| .bw--b3 { | |
| border-bottom-width: 0.25rem; | |
| border-bottom-style: solid; } | |
| .bw--l3 { | |
| border-left-width: 0.25rem; | |
| border-left-style: solid; } | |
| .bw--4 { | |
| border-width: 0.375rem; | |
| border-style: solid; } | |
| .bw--t4 { | |
| border-top-width: 0.375rem; | |
| border-top-style: solid; } | |
| .bw--r4 { | |
| border-right-width: 0.375rem; | |
| border-right-style: solid; } | |
| .bw--b4 { | |
| border-bottom-width: 0.375rem; | |
| border-bottom-style: solid; } | |
| .bw--l4 { | |
| border-left-width: 0.375rem; | |
| border-left-style: solid; } | |
| .bw--5 { | |
| border-width: 0.625rem; | |
| border-style: solid; } | |
| .bw--t5 { | |
| border-top-width: 0.625rem; | |
| border-top-style: solid; } | |
| .bw--r5 { | |
| border-right-width: 0.625rem; | |
| border-right-style: solid; } | |
| .bw--b5 { | |
| border-bottom-width: 0.625rem; | |
| border-bottom-style: solid; } | |
| .bw--l5 { | |
| border-left-width: 0.625rem; | |
| border-left-style: solid; } | |
| .br--0 { | |
| border-radius: 0rem; } | |
| .br--t0 { | |
| border-top-left-radius: 0rem; | |
| border-top-right-radius: 0rem; } | |
| .br--r0 { | |
| border-top-right-radius: 0rem; | |
| border-bottom-right-radius: 0rem; } | |
| .br--b0 { | |
| border-bottom-left-radius: 0rem; | |
| border-bottom-right-radius: 0rem; } | |
| .br--l0 { | |
| border-top-left-radius: 0rem; | |
| border-bottom-left-radius: 0rem; } | |
| .br--1 { | |
| border-radius: 0.25rem; } | |
| .br--t1 { | |
| border-top-left-radius: 0.25rem; | |
| border-top-right-radius: 0.25rem; } | |
| .br--r1 { | |
| border-top-right-radius: 0.25rem; | |
| border-bottom-right-radius: 0.25rem; } | |
| .br--b1 { | |
| border-bottom-left-radius: 0.25rem; | |
| border-bottom-right-radius: 0.25rem; } | |
| .br--l1 { | |
| border-top-left-radius: 0.25rem; | |
| border-bottom-left-radius: 0.25rem; } | |
| .br--2 { | |
| border-radius: 0.5rem; } | |
| .br--t2 { | |
| border-top-left-radius: 0.5rem; | |
| border-top-right-radius: 0.5rem; } | |
| .br--r2 { | |
| border-top-right-radius: 0.5rem; | |
| border-bottom-right-radius: 0.5rem; } | |
| .br--b2 { | |
| border-bottom-left-radius: 0.5rem; | |
| border-bottom-right-radius: 0.5rem; } | |
| .br--l2 { | |
| border-top-left-radius: 0.5rem; | |
| border-bottom-left-radius: 0.5rem; } | |
| .br--3 { | |
| border-radius: 1rem; } | |
| .br--t3 { | |
| border-top-left-radius: 1rem; | |
| border-top-right-radius: 1rem; } | |
| .br--r3 { | |
| border-top-right-radius: 1rem; | |
| border-bottom-right-radius: 1rem; } | |
| .br--b3 { | |
| border-bottom-left-radius: 1rem; | |
| border-bottom-right-radius: 1rem; } | |
| .br--l3 { | |
| border-top-left-radius: 1rem; | |
| border-bottom-left-radius: 1rem; } | |
| .br--4 { | |
| border-radius: 2rem; } | |
| .br--t4 { | |
| border-top-left-radius: 2rem; | |
| border-top-right-radius: 2rem; } | |
| .br--r4 { | |
| border-top-right-radius: 2rem; | |
| border-bottom-right-radius: 2rem; } | |
| .br--b4 { | |
| border-bottom-left-radius: 2rem; | |
| border-bottom-right-radius: 2rem; } | |
| .br--l4 { | |
| border-top-left-radius: 2rem; | |
| border-bottom-left-radius: 2rem; } | |
| .br--5 { | |
| border-radius: 1000rem; } | |
| .br--t5 { | |
| border-top-left-radius: 1000rem; | |
| border-top-right-radius: 1000rem; } | |
| .br--r5 { | |
| border-top-right-radius: 1000rem; | |
| border-bottom-right-radius: 1000rem; } | |
| .br--b5 { | |
| border-bottom-left-radius: 1000rem; | |
| border-bottom-right-radius: 1000rem; } | |
| .br--l5 { | |
| border-top-left-radius: 1000rem; | |
| border-bottom-left-radius: 1000rem; } | |
| .divider { | |
| background: rgba(0, 0, 0, 0.12); | |
| height: 1px; | |
| width: 100%; | |
| display: block; | |
| position: relative; | |
| clear: both; } | |
| .disabled, .paginate > a.disabled, | |
| .paginate li a.disabled, | |
| .paginate__link.disabled { | |
| color: rgba(0, 0, 0, 0.24); } | |
| .no-touchevents .disabled:hover { | |
| cursor: not-allowed; | |
| color: rgba(0, 0, 0, 0.24); } | |
| /** | |
| ** Flexibility | |
| **/ | |
| /** | |
| ** Core | |
| **/ | |
| /** Creates placeholders and classes */ | |
| /** | |
| ** Typography | |
| **/ | |
| /** | |
| ** Core | |
| **/ | |
| /** Creates placeholders and classes */ | |
| html { | |
| word-wrap: break-word; | |
| /** the zoom makes zero sense to me */ | |
| -webkit-text-size-adjust: 100%; | |
| -ms-text-size-adjust: 100%; | |
| text-size-adjust: 100%; } | |
| pre { | |
| -webkit-font-smoothing: auto; | |
| font-smoothing: auto; } | |
| body { | |
| letter-spacing: inherit; | |
| font-weight: 300; | |
| color: #6f6567; | |
| font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", sans-serif; | |
| font-size: 1rem; | |
| line-height: 1.1; } | |
| @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 125dpi) { | |
| body { | |
| -webkit-font-smoothing: antialiased; | |
| font-smoothing: antialiased; } } | |
| h1, h2, .type--h2, h3, .type--h3, h4, .type--h4, h5, .type--h5, h6, .type--h6, .type--h1 { | |
| text-align: left; | |
| letter-spacing: inherit; | |
| text-rendering: optimizeLegibility; | |
| font-weight: 300; | |
| color: #6f6567; | |
| font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", sans-serif; | |
| font-size: 3rem; | |
| line-height: 1.1; } | |
| h2, .type--h2 { | |
| text-rendering: optimizeLegibility; | |
| font-size: 2.25rem; } | |
| h3, .type--h3 { | |
| text-rendering: optimizeLegibility; | |
| font-size: 1.4375rem; } | |
| h4, .type--h4 { | |
| font-size: 1.1875rem; } | |
| h5, .type--h5 { | |
| font-size: 1rem; } | |
| h6, .type--h6 { | |
| font-size: 0.875rem; } | |
| p { | |
| padding: 0; | |
| margin: 0 0 0.25rem; | |
| text-align: left; | |
| word-break: break-word; | |
| letter-spacing: inherit; | |
| font-weight: 300; | |
| color: inherit; | |
| font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", sans-serif; | |
| font-size: 1rem; | |
| line-height: 1.4; } | |
| /** | |
| ** Grid (.grid, .col, .row) | |
| **/ | |
| /** | |
| ** Core | |
| **/ | |
| /** Creates placeholders and classes */ | |
| /** Creates placeholders and classes */ | |
| .x1, .x1--xl { | |
| max-width: 6.25%; | |
| -webkit-flex-basis: 6.25%; | |
| flex-basis: 6.25%; } | |
| .x2, .x2--xl { | |
| max-width: 12.5%; | |
| -webkit-flex-basis: 12.5%; | |
| flex-basis: 12.5%; } | |
| .x3, .x3--xl { | |
| max-width: 18.75%; | |
| -webkit-flex-basis: 18.75%; | |
| flex-basis: 18.75%; } | |
| .x4, .x4--xl { | |
| max-width: 25%; | |
| -webkit-flex-basis: 25%; | |
| flex-basis: 25%; } | |
| .x5, .x5--xl { | |
| max-width: 31.25%; | |
| -webkit-flex-basis: 31.25%; | |
| flex-basis: 31.25%; } | |
| .x6, .x6--xl { | |
| max-width: 37.5%; | |
| -webkit-flex-basis: 37.5%; | |
| flex-basis: 37.5%; } | |
| .x7, .x7--xl { | |
| max-width: 43.75%; | |
| -webkit-flex-basis: 43.75%; | |
| flex-basis: 43.75%; } | |
| .x8, .x8--xl { | |
| max-width: 50%; | |
| -webkit-flex-basis: 50%; | |
| flex-basis: 50%; } | |
| .x9, .x9--xl { | |
| max-width: 56.25%; | |
| -webkit-flex-basis: 56.25%; | |
| flex-basis: 56.25%; } | |
| .x10, .x10--xl { | |
| max-width: 62.5%; | |
| -webkit-flex-basis: 62.5%; | |
| flex-basis: 62.5%; } | |
| .x11, .x11--xl { | |
| max-width: 68.75%; | |
| -webkit-flex-basis: 68.75%; | |
| flex-basis: 68.75%; } | |
| .x12, .x12--xl { | |
| max-width: 75%; | |
| -webkit-flex-basis: 75%; | |
| flex-basis: 75%; } | |
| .x13, .x13--xl { | |
| max-width: 81.25%; | |
| -webkit-flex-basis: 81.25%; | |
| flex-basis: 81.25%; } | |
| .x14, .x14--xl { | |
| max-width: 87.5%; | |
| -webkit-flex-basis: 87.5%; | |
| flex-basis: 87.5%; } | |
| .x15, .x15--xl { | |
| max-width: 93.75%; | |
| -webkit-flex-basis: 93.75%; | |
| flex-basis: 93.75%; } | |
| .x16, .x16--xl { | |
| max-width: 100%; | |
| -webkit-flex-basis: 100%; | |
| flex-basis: 100%; } | |
| @media only screen and (max-width: 1359px) { | |
| .x1--lg { | |
| max-width: 8.33333%; | |
| -webkit-flex-basis: 8.33333%; | |
| flex-basis: 8.33333%; } | |
| .x2--lg { | |
| max-width: 16.66667%; | |
| -webkit-flex-basis: 16.66667%; | |
| flex-basis: 16.66667%; } | |
| .x3--lg { | |
| max-width: 25%; | |
| -webkit-flex-basis: 25%; | |
| flex-basis: 25%; } | |
| .x4--lg { | |
| max-width: 33.33333%; | |
| -webkit-flex-basis: 33.33333%; | |
| flex-basis: 33.33333%; } | |
| .x5--lg { | |
| max-width: 41.66667%; | |
| -webkit-flex-basis: 41.66667%; | |
| flex-basis: 41.66667%; } | |
| .x6--lg { | |
| max-width: 50%; | |
| -webkit-flex-basis: 50%; | |
| flex-basis: 50%; } | |
| .x7--lg { | |
| max-width: 58.33333%; | |
| -webkit-flex-basis: 58.33333%; | |
| flex-basis: 58.33333%; } | |
| .x8--lg { | |
| max-width: 66.66667%; | |
| -webkit-flex-basis: 66.66667%; | |
| flex-basis: 66.66667%; } | |
| .x9--lg { | |
| max-width: 75%; | |
| -webkit-flex-basis: 75%; | |
| flex-basis: 75%; } | |
| .x10--lg { | |
| max-width: 83.33333%; | |
| -webkit-flex-basis: 83.33333%; | |
| flex-basis: 83.33333%; } | |
| .x11--lg { | |
| max-width: 91.66667%; | |
| -webkit-flex-basis: 91.66667%; | |
| flex-basis: 91.66667%; } | |
| .x12--lg { | |
| max-width: 100%; | |
| -webkit-flex-basis: 100%; | |
| flex-basis: 100%; } } | |
| @media only screen and (max-width: 1023px) { | |
| .x1--md { | |
| max-width: 12.5%; | |
| -webkit-flex-basis: 12.5%; | |
| flex-basis: 12.5%; } | |
| .x2--md { | |
| max-width: 25%; | |
| -webkit-flex-basis: 25%; | |
| flex-basis: 25%; } | |
| .x3--md { | |
| max-width: 37.5%; | |
| -webkit-flex-basis: 37.5%; | |
| flex-basis: 37.5%; } | |
| .x4--md { | |
| max-width: 50%; | |
| -webkit-flex-basis: 50%; | |
| flex-basis: 50%; } | |
| .x5--md { | |
| max-width: 62.5%; | |
| -webkit-flex-basis: 62.5%; | |
| flex-basis: 62.5%; } | |
| .x6--md { | |
| max-width: 75%; | |
| -webkit-flex-basis: 75%; | |
| flex-basis: 75%; } | |
| .x7--md { | |
| max-width: 87.5%; | |
| -webkit-flex-basis: 87.5%; | |
| flex-basis: 87.5%; } | |
| .x8--md { | |
| max-width: 100%; | |
| -webkit-flex-basis: 100%; | |
| flex-basis: 100%; } } | |
| @media only screen and (max-width: 639px) { | |
| .x1--sm { | |
| max-width: 25%; | |
| -webkit-flex-basis: 25%; | |
| flex-basis: 25%; } | |
| .x2--sm { | |
| max-width: 50%; | |
| -webkit-flex-basis: 50%; | |
| flex-basis: 50%; } | |
| .x3--sm { | |
| max-width: 75%; | |
| -webkit-flex-basis: 75%; | |
| flex-basis: 75%; } | |
| .x4--sm { | |
| max-width: 100%; | |
| -webkit-flex-basis: 100%; | |
| flex-basis: 100%; } } | |
| @media only screen and (max-width: 324px) { | |
| .x1--xs { | |
| max-width: 25%; | |
| -webkit-flex-basis: 25%; | |
| flex-basis: 25%; } | |
| .x2--xs { | |
| max-width: 50%; | |
| -webkit-flex-basis: 50%; | |
| flex-basis: 50%; } | |
| .x3--xs { | |
| max-width: 75%; | |
| -webkit-flex-basis: 75%; | |
| flex-basis: 75%; } | |
| .x4--xs { | |
| max-width: 100%; | |
| -webkit-flex-basis: 100%; | |
| flex-basis: 100%; } } | |
| /** | |
| ** Multi-column layout (.cols) | |
| **/ | |
| /** | |
| ** Core | |
| **/ | |
| /** Creates placeholders and classes */ | |
| .cols { | |
| display: block; | |
| overflow: visible; } | |
| .cols > * { | |
| /** Prevents weird overflowing into the next column */ | |
| display: inline-block; | |
| width: 100%; } | |
| @media only screen and (max-width: 324px) { | |
| .cols { | |
| -webkit-column-gap: 8px; | |
| -moz-column-gap: 8px; | |
| column-gap: 8px; } } | |
| @media only screen and (max-width: 639px) { | |
| .cols { | |
| -webkit-column-gap: 12px; | |
| -moz-column-gap: 12px; | |
| column-gap: 12px; } } | |
| @media only screen and (max-width: 1023px) { | |
| .cols { | |
| -webkit-column-gap: 12px; | |
| -moz-column-gap: 12px; | |
| column-gap: 12px; } } | |
| @media only screen and (max-width: 1359px) { | |
| .cols { | |
| -webkit-column-gap: 16px; | |
| -moz-column-gap: 16px; | |
| column-gap: 16px; } } | |
| @media only screen and (min-width: 1360px) { | |
| .cols { | |
| -webkit-column-gap: 24px; | |
| -moz-column-gap: 24px; | |
| column-gap: 24px; } } | |
| /** Form (default form styles) **/ | |
| /** | |
| ** Core | |
| **/ | |
| /** Creates placeholders and classes */ | |
| [type=text], | |
| [type=email], | |
| [type=tel], | |
| [type=url], | |
| [type=search], | |
| [type=submit], | |
| [type=date], | |
| [type=password], | |
| textarea, | |
| button { | |
| appearance: none; | |
| -moz-appearance: none; | |
| -webkit-appearance: none; | |
| outline: none; | |
| margin: 0; } | |
| [type=text], | |
| [type=email], | |
| [type=tel], | |
| [type=number], | |
| [type=url], | |
| [type=password], | |
| [type=date], | |
| [type=search], .input-group label, .btn-group label, .paginate label, .input-group .input-group__member, .btn-group .input-group__member, .paginate .input-group__member { | |
| border-radius: 0.25rem; | |
| background: #f4f4f5; | |
| padding: 8px 13px 8px 13px; | |
| margin: 0; | |
| border: 0.0625rem solid rgba(0, 0, 0, 0.12); | |
| width: auto; | |
| font-weight: 300; | |
| color: #6f6567; | |
| font-family: inherit; | |
| font-size: 1rem; | |
| line-height: normal; } | |
| [type=submit] { | |
| background: #fefeff; | |
| border: 0.0625rem solid rgba(0, 0, 0, 0.12); | |
| padding: 8px 13px 8px 13px; | |
| margin: 0; | |
| border-radius: 0.25rem; | |
| font-weight: 700; | |
| color: #6f6567; | |
| font-family: inherit; | |
| font-size: 1rem; | |
| line-height: 1.1; } | |
| .no-touchevents [type=submit]:hover { | |
| cursor: pointer; | |
| background: #f2f2f2; | |
| color: #6f6567; } | |
| .no-touchevents [type=submit]:active { | |
| background: #ededed; | |
| color: #6f6567; } | |
| textarea { | |
| background: #f4f4f5; | |
| padding: 8px 13px 8px 13px; | |
| margin: 0; | |
| border: 0.0625rem solid rgba(0, 0, 0, 0.12); | |
| border-radius: 0.25rem; | |
| overflow: auto; | |
| font-weight: 300; | |
| color: #6f6567; | |
| font-family: inherit; | |
| font-size: 1rem; | |
| line-height: 1.4; } | |
| .placeholder, *::-webkit-input-placeholder, *:-moz-placeholder, *::-moz-placeholder, *:-ms-input-placeholder { | |
| opacity: 0.9; | |
| font-weight: 300; | |
| color: #6f6567; | |
| font-family: inherit; | |
| font-size: 1rem; | |
| line-height: normal; } | |
| button, | |
| select { | |
| text-transform: none; } | |
| [type="number"]::-webkit-inner-spin-button, | |
| [type="number"]::-webkit-outer-spin-button { | |
| height: auto; } | |
| [type="search"] { | |
| -webkit-appearance: none; | |
| outline-offset: -2px; } | |
| button::-moz-focus-inner { | |
| border: 0; | |
| margin: 0; | |
| padding: 0; } | |
| :focus { | |
| outline: 0; } | |
| input[type=date] { | |
| min-height: normal; } | |
| select { | |
| font-weight: 300; | |
| color: #6f6567; | |
| font-family: inherit; | |
| font-size: 1rem; | |
| line-height: normal; } | |
| *::-webkit-input-placeholder { | |
| /* Chrome + Safari */ } | |
| *:-moz-placeholder { | |
| /* FF 4-18 */ } | |
| *::-moz-placeholder { | |
| /* FF 19+ */ } | |
| *:-ms-input-placeholder { | |
| /* IE 10+ */ } | |
| /** Input Group (.input-group) */ | |
| /** | |
| ** Input Group | |
| **/ | |
| /** | |
| ** Core | |
| **/ | |
| /** Creates placeholders and classes */ | |
| .input-group, .btn-group, .paginate { | |
| position: relative; } | |
| .input-group label, .btn-group label, .paginate label, .input-group .input-group__member, .btn-group .input-group__member, .paginate .input-group__member { | |
| background: #e7e7e9; } | |
| .input-group > *, .btn-group > *, .paginate > *, .input-group > button, .btn-group > button, .paginate > button, .input-group > .btn, .btn-group > .btn, .paginate > .btn { | |
| margin: 0; } | |
| .input-group > *:first-child:not(:last-child), .btn-group > *:first-child:not(:last-child), .paginate > *:first-child:not(:last-child) { | |
| border-top-right-radius: 0 !important; | |
| border-bottom-right-radius: 0 !important; } | |
| .input-group > *:last-child:not(:first-child), .btn-group > *:last-child:not(:first-child), .paginate > *:last-child:not(:first-child) { | |
| border-left: 0 !important; | |
| border-top-left-radius: 0 !important; | |
| border-bottom-left-radius: 0 !important; } | |
| .input-group > *:not(:first-child):not(:last-child), .btn-group > *:not(:first-child):not(:last-child), .paginate > *:not(:first-child):not(:last-child) { | |
| border-left: 0 !important; | |
| border-radius: 0 !important; } | |
| /** Checkbox (.checkbox) */ | |
| /** | |
| ** Checkbox | |
| **/ | |
| /** | |
| ** Core | |
| **/ | |
| /** Creates placeholders and classes */ | |
| .checkbox, .toggler { | |
| padding: 0 8px; } | |
| .checkbox input[type=checkbox], .toggler input[type=checkbox] { | |
| display: none; } | |
| .checkbox label, .toggler label { | |
| padding: 0 0 0 8px; | |
| font-size: 1rem; | |
| line-height: 100%; } | |
| .checkbox label:hover, .toggler label:hover { | |
| cursor: pointer; } | |
| .checkbox__box { | |
| border-width: 1px; | |
| border-style: solid; | |
| border-color: rgba(0, 0, 0, 0.07); | |
| background: #9c9c99; | |
| color: #30A9DE; | |
| border-radius: 10000000px; | |
| height: 24px; | |
| width: 24px; } | |
| .checkbox__box { | |
| -webkit-transition: background 0.16s linear; | |
| transition: background 0.16s linear; } | |
| .checkbox__box:hover { | |
| cursor: pointer; } | |
| .no-touchevents .checkbox__box:hover .checkbox__checkmark { | |
| visibility: visible; | |
| opacity: 0.5; } | |
| .no-touchevents .checkbox:not(.checked):hover, .no-touchevents .toggler:not(.checked):hover { | |
| cursor: pointer; } | |
| .no-touchevents .checkbox:not(.checked):hover .checkbox__checkmark, .no-touchevents .toggler:not(.checked):hover .checkbox__checkmark { | |
| opacity: 0.5; | |
| visibility: visible; } | |
| .no-touchevents .checkbox.checked .checkbox__box:hover .checkbox__checkmark, .no-touchevents .checked.toggler .checkbox__box:hover .checkbox__checkmark { | |
| opacity: 1.0; } | |
| .checkbox__checkmark { | |
| color: #fefeff; | |
| visibility: hidden; | |
| opacity: 0; } | |
| .checkbox__checkmark { | |
| -webkit-transition: opacity 0.16s ease-in 0s; | |
| transition: opacity 0.16s ease-in 0s; } | |
| .checkbox.checked .checkbox__checkmark, .checked.toggler .checkbox__checkmark { | |
| visibility: visible; | |
| opacity: 1.0; | |
| color: #fefeff; } | |
| .checkbox.checked .checkbox__checkmark, .checked.toggler .checkbox__checkmark { | |
| -webkit-transition: opacity 0.16s ease-out 0s; | |
| transition: opacity 0.16s ease-out 0s; } | |
| .checkbox.checked .checkbox__box, .checked.toggler .checkbox__box { | |
| border-color: #30A9DE; | |
| background: #30A9DE; } | |
| /** Toggler (.toggler) */ | |
| /** | |
| ** Toggler | |
| **/ | |
| /** | |
| ** Core | |
| **/ | |
| /** Creates placeholders and classes */ | |
| /** | |
| ** Checkbox | |
| **/ | |
| /** | |
| ** Core | |
| **/ | |
| /** Creates placeholders and classes */ | |
| .toggler label:hover { | |
| cursor: pointer; } | |
| .toggler__container { | |
| width: 50px; | |
| height: 24px; | |
| border-width: 1px; | |
| border-style: solid; | |
| border-color: rgba(0, 0, 0, 0.07); | |
| background: #9c9c99; | |
| padding: 2px; } | |
| .toggler__container, .toggler__handle { | |
| -webkit-transition: background 0.16s ease-in; | |
| transition: background 0.16s ease-in; } | |
| .toggler__container:hover { | |
| cursor: pointer; } | |
| .toggler.enabled .toggler__container { | |
| border-color: #30A9DE; | |
| background: #30A9DE; } | |
| .toggler__handle { | |
| border-radius: 100%; | |
| width: 20px; | |
| height: 20px; | |
| background: #fefeff; | |
| border-color: rgba(0, 0, 0, 0.24); | |
| border-width: 1px; | |
| border-style: solid; } | |
| .toggler.enabled .toggler__handle { | |
| margin-left: auto; | |
| background: #fefeff; | |
| border-color: #30A9DE; } | |
| /** Select (.select) */ | |
| /** | |
| ** Select (.select) | |
| **/ | |
| /** | |
| ** Core | |
| **/ | |
| /** Creates placeholders and classes */ | |
| /** | |
| ** Button (.btn) | |
| **/ | |
| /** | |
| ** Core | |
| **/ | |
| /** Creates placeholders and classes */ | |
| /** | |
| ** Input Group | |
| **/ | |
| /** | |
| ** Core | |
| **/ | |
| /** Creates placeholders and classes */ | |
| button, .btn { | |
| background: #30A9DE; | |
| color: #fff; | |
| border-style: solid; | |
| border-width: 0.0625rem; | |
| border-color: rgba(0, 0, 0, 0.12); | |
| border-radius: 0.25rem; | |
| line-height: 1.1; | |
| outline: 0; } | |
| button.hover, .hover.btn, .no-touchevents .btn:hover, | |
| .no-touchevents button:hover { | |
| cursor: pointer; | |
| background: #46b2e2; | |
| color: white; | |
| border-style: solid; | |
| border-width: 0.0625rem; | |
| border-color: rgba(0, 0, 0, 0.12); } | |
| button.active, .active.btn, .no-touchevents .btn:active, | |
| .no-touchevents button:active { | |
| cursor: pointer; | |
| background: #229dd3; | |
| color: white; | |
| border-style: solid; | |
| border-width: 0.0625rem; | |
| border-color: rgba(0, 0, 0, 0.12); } | |
| .btn--s, | |
| .btn--s button, | |
| .btn--s .btn { | |
| padding: 8px 13px 8px 13px; | |
| font-weight: 300; | |
| font-size: 1rem; | |
| line-height: 1rem; } | |
| .btn--m, | |
| .btn--m button, | |
| .btn--m .btn { | |
| padding: 12px 19px 12px 19px; | |
| font-weight: 300; | |
| font-size: 1.1875rem; | |
| line-height: 1.1875rem; } | |
| .btn--l, | |
| .btn--l button, | |
| .btn--l .btn { | |
| padding: 16px 26px 16px 26px; | |
| text-rendering: optimizeLegibility; | |
| font-weight: 300; | |
| font-size: 1.4375rem; | |
| line-height: 1.4375rem; } | |
| .btn--blue .btn.active, | |
| .btn--blue button.active, | |
| .btn.btn--blue.active { | |
| background: #229dd3; } | |
| .no-touchevents .btn.btn--blue:hover, .no-touchevents .btn.btn--blue.hover, | |
| .no-touchevents .btn--blue .btn:hover, | |
| .no-touchevents .btn--blue .btn.hover, | |
| .no-touchevents .btn--blue button:hover, | |
| .no-touchevents .btn--blue button.hover { | |
| background: #46b2e2; } | |
| .no-touchevents .btn.btn--blue:active, | |
| .no-touchevents .btn--blue .btn:active, | |
| .no-touchevents .btn--blue button:active { | |
| background: #229dd3; } | |
| .btn--dark-blue .btn.active, | |
| .btn--dark-blue button.active, | |
| .btn.btn--dark-blue.active { | |
| background: #1e8dbd; } | |
| .no-touchevents .btn.btn--dark-blue:hover, .no-touchevents .btn.btn--dark-blue.hover, | |
| .no-touchevents .btn--dark-blue .btn:hover, | |
| .no-touchevents .btn--dark-blue .btn.hover, | |
| .no-touchevents .btn--dark-blue button:hover, | |
| .no-touchevents .btn--dark-blue button.hover { | |
| background: #30a9de; } | |
| .no-touchevents .btn.btn--dark-blue:active, | |
| .no-touchevents .btn--dark-blue .btn:active, | |
| .no-touchevents .btn--dark-blue button:active { | |
| background: #1e8dbd; } | |
| .btn--light-blue .btn.active, | |
| .btn--light-blue button.active, | |
| .btn.btn--light-blue.active { | |
| background: #5cbbe5; } | |
| .no-touchevents .btn.btn--light-blue:hover, .no-touchevents .btn.btn--light-blue.hover, | |
| .no-touchevents .btn--light-blue .btn:hover, | |
| .no-touchevents .btn--light-blue .btn.hover, | |
| .no-touchevents .btn--light-blue button:hover, | |
| .no-touchevents .btn--light-blue button.hover { | |
| background: #88ceec; } | |
| .no-touchevents .btn.btn--light-blue:active, | |
| .no-touchevents .btn--light-blue .btn:active, | |
| .no-touchevents .btn--light-blue button:active { | |
| background: #5cbbe5; } | |
| .btn--green .btn.active, | |
| .btn--green button.active, | |
| .btn.btn--green.active { | |
| background: #28af75; } | |
| .no-touchevents .btn.btn--green:hover, .no-touchevents .btn.btn--green.hover, | |
| .no-touchevents .btn--green .btn:hover, | |
| .no-touchevents .btn--green .btn.hover, | |
| .no-touchevents .btn--green button:hover, | |
| .no-touchevents .btn--green button.hover { | |
| background: #39d290; } | |
| .no-touchevents .btn.btn--green:active, | |
| .no-touchevents .btn--green .btn:active, | |
| .no-touchevents .btn--green button:active { | |
| background: #28af75; } | |
| .btn--dark-green .btn.active, | |
| .btn--dark-green button.active, | |
| .btn.btn--dark-green.active { | |
| background: #239b67; } | |
| .no-touchevents .btn.btn--dark-green:hover, .no-touchevents .btn.btn--dark-green.hover, | |
| .no-touchevents .btn--dark-green .btn:hover, | |
| .no-touchevents .btn--dark-green .btn.hover, | |
| .no-touchevents .btn--dark-green button:hover, | |
| .no-touchevents .btn--dark-green button.hover { | |
| background: #2dc483; } | |
| .no-touchevents .btn.btn--dark-green:active, | |
| .no-touchevents .btn--dark-green .btn:active, | |
| .no-touchevents .btn--dark-green button:active { | |
| background: #239b67; } | |
| .btn--light-green .btn.active, | |
| .btn--light-green button.active, | |
| .btn.btn--light-green.active { | |
| background: #8ce5be; } | |
| .no-touchevents .btn.btn--light-green:hover, .no-touchevents .btn.btn--light-green.hover, | |
| .no-touchevents .btn--light-green .btn:hover, | |
| .no-touchevents .btn--light-green .btn.hover, | |
| .no-touchevents .btn--light-green button:hover, | |
| .no-touchevents .btn--light-green button.hover { | |
| background: #b5eed6; } | |
| .no-touchevents .btn.btn--light-green:active, | |
| .no-touchevents .btn--light-green .btn:active, | |
| .no-touchevents .btn--light-green button:active { | |
| background: #8ce5be; } | |
| .btn--red .btn.active, | |
| .btn--red button.active, | |
| .btn.btn--red.active { | |
| background: #e2232a; } | |
| .no-touchevents .btn.btn--red:hover, .no-touchevents .btn.btn--red.hover, | |
| .no-touchevents .btn--red .btn:hover, | |
| .no-touchevents .btn--red .btn.hover, | |
| .no-touchevents .btn--red button:hover, | |
| .no-touchevents .btn--red button.hover { | |
| background: #e85156; } | |
| .no-touchevents .btn.btn--red:active, | |
| .no-touchevents .btn--red .btn:active, | |
| .no-touchevents .btn--red button:active { | |
| background: #e2232a; } | |
| .btn--dark-red .btn.active, | |
| .btn--dark-red button.active, | |
| .btn.btn--dark-red.active { | |
| background: #ba191e; } | |
| .no-touchevents .btn.btn--dark-red:hover, .no-touchevents .btn.btn--dark-red.hover, | |
| .no-touchevents .btn--dark-red .btn:hover, | |
| .no-touchevents .btn--dark-red .btn.hover, | |
| .no-touchevents .btn--dark-red button:hover, | |
| .no-touchevents .btn--dark-red button.hover { | |
| background: #e2232a; } | |
| .no-touchevents .btn.btn--dark-red:active, | |
| .no-touchevents .btn--dark-red .btn:active, | |
| .no-touchevents .btn--dark-red button:active { | |
| background: #ba191e; } | |
| .btn--light-red .btn.active, | |
| .btn--light-red button.active, | |
| .btn.btn--light-red.active { | |
| background: #e85156; } | |
| .no-touchevents .btn.btn--light-red:hover, .no-touchevents .btn.btn--light-red.hover, | |
| .no-touchevents .btn--light-red .btn:hover, | |
| .no-touchevents .btn--light-red .btn.hover, | |
| .no-touchevents .btn--light-red button:hover, | |
| .no-touchevents .btn--light-red button.hover { | |
| background: #ee7e82; } | |
| .no-touchevents .btn.btn--light-red:active, | |
| .no-touchevents .btn--light-red .btn:active, | |
| .no-touchevents .btn--light-red button:active { | |
| background: #e85156; } | |
| .btn--yellow .btn.active, | |
| .btn--yellow button.active, | |
| .btn.btn--yellow.active { | |
| background: #ffc139; } | |
| .no-touchevents .btn.btn--yellow:hover, .no-touchevents .btn.btn--yellow.hover, | |
| .no-touchevents .btn--yellow .btn:hover, | |
| .no-touchevents .btn--yellow .btn.hover, | |
| .no-touchevents .btn--yellow button:hover, | |
| .no-touchevents .btn--yellow button.hover { | |
| background: #ffd16c; } | |
| .no-touchevents .btn.btn--yellow:active, | |
| .no-touchevents .btn--yellow .btn:active, | |
| .no-touchevents .btn--yellow button:active { | |
| background: #ffc139; } | |
| .btn--dark-yellow .btn.active, | |
| .btn--dark-yellow button.active, | |
| .btn.btn--dark-yellow.active { | |
| background: #ffb106; } | |
| .no-touchevents .btn.btn--dark-yellow:hover, .no-touchevents .btn.btn--dark-yellow.hover, | |
| .no-touchevents .btn--dark-yellow .btn:hover, | |
| .no-touchevents .btn--dark-yellow .btn.hover, | |
| .no-touchevents .btn--dark-yellow button:hover, | |
| .no-touchevents .btn--dark-yellow button.hover { | |
| background: #ffc139; } | |
| .no-touchevents .btn.btn--dark-yellow:active, | |
| .no-touchevents .btn--dark-yellow .btn:active, | |
| .no-touchevents .btn--dark-yellow button:active { | |
| background: #ffb106; } | |
| .btn--light-yellow .btn.active, | |
| .btn--light-yellow button.active, | |
| .btn.btn--light-yellow.active { | |
| background: #ffd16c; } | |
| .no-touchevents .btn.btn--light-yellow:hover, .no-touchevents .btn.btn--light-yellow.hover, | |
| .no-touchevents .btn--light-yellow .btn:hover, | |
| .no-touchevents .btn--light-yellow .btn.hover, | |
| .no-touchevents .btn--light-yellow button:hover, | |
| .no-touchevents .btn--light-yellow button.hover { | |
| background: #ffe19f; } | |
| .no-touchevents .btn.btn--light-yellow:active, | |
| .no-touchevents .btn--light-yellow .btn:active, | |
| .no-touchevents .btn--light-yellow button:active { | |
| background: #ffd16c; } | |
| .btn--orange .btn.active, | |
| .btn--orange button.active, | |
| .btn.btn--orange.active { | |
| background: #e56e1d; } | |
| .no-touchevents .btn.btn--orange:hover, .no-touchevents .btn.btn--orange.hover, | |
| .no-touchevents .btn--orange .btn:hover, | |
| .no-touchevents .btn--orange .btn.hover, | |
| .no-touchevents .btn--orange button:hover, | |
| .no-touchevents .btn--orange button.hover { | |
| background: #eb8c4b; } | |
| .no-touchevents .btn.btn--orange:active, | |
| .no-touchevents .btn--orange .btn:active, | |
| .no-touchevents .btn--orange button:active { | |
| background: #e56e1d; } | |
| .btn--dark-orange .btn.active, | |
| .btn--dark-orange button.active, | |
| .btn.btn--dark-orange.active { | |
| background: #ba5815; } | |
| .no-touchevents .btn.btn--dark-orange:hover, .no-touchevents .btn.btn--dark-orange.hover, | |
| .no-touchevents .btn--dark-orange .btn:hover, | |
| .no-touchevents .btn--dark-orange .btn.hover, | |
| .no-touchevents .btn--dark-orange button:hover, | |
| .no-touchevents .btn--dark-orange button.hover { | |
| background: #e56e1d; } | |
| .no-touchevents .btn.btn--dark-orange:active, | |
| .no-touchevents .btn--dark-orange .btn:active, | |
| .no-touchevents .btn--dark-orange button:active { | |
| background: #ba5815; } | |
| .btn--light-orange .btn.active, | |
| .btn--light-orange button.active, | |
| .btn.btn--light-orange.active { | |
| background: #ed9a62; } | |
| .no-touchevents .btn.btn--light-orange:hover, .no-touchevents .btn.btn--light-orange.hover, | |
| .no-touchevents .btn--light-orange .btn:hover, | |
| .no-touchevents .btn--light-orange .btn.hover, | |
| .no-touchevents .btn--light-orange button:hover, | |
| .no-touchevents .btn--light-orange button.hover { | |
| background: #f2b890; } | |
| .no-touchevents .btn.btn--light-orange:active, | |
| .no-touchevents .btn--light-orange .btn:active, | |
| .no-touchevents .btn--light-orange button:active { | |
| background: #ed9a62; } | |
| .btn--lightest-grey .btn.active, | |
| .btn--lightest-grey button.active, | |
| .btn.btn--lightest-grey.active { | |
| background: #e7e7e9; } | |
| .no-touchevents .btn.btn--lightest-grey:hover, .no-touchevents .btn.btn--lightest-grey.hover, | |
| .no-touchevents .btn--lightest-grey .btn:hover, | |
| .no-touchevents .btn--lightest-grey .btn.hover, | |
| .no-touchevents .btn--lightest-grey button:hover, | |
| .no-touchevents .btn--lightest-grey button.hover { | |
| background: white; } | |
| .no-touchevents .btn.btn--lightest-grey:active, | |
| .no-touchevents .btn--lightest-grey .btn:active, | |
| .no-touchevents .btn--lightest-grey button:active { | |
| background: #e7e7e9; } | |
| .btn--lighter-grey .btn.active, | |
| .btn--lighter-grey button.active, | |
| .btn.btn--lighter-grey.active { | |
| background: #cececd; } | |
| .no-touchevents .btn.btn--lighter-grey:hover, .no-touchevents .btn.btn--lighter-grey.hover, | |
| .no-touchevents .btn--lighter-grey .btn:hover, | |
| .no-touchevents .btn--lighter-grey .btn.hover, | |
| .no-touchevents .btn--lighter-grey button:hover, | |
| .no-touchevents .btn--lighter-grey button.hover { | |
| background: #e8e8e7; } | |
| .no-touchevents .btn.btn--lighter-grey:active, | |
| .no-touchevents .btn--lighter-grey .btn:active, | |
| .no-touchevents .btn--lighter-grey button:active { | |
| background: #cececd; } | |
| .btn--light-grey .btn.active, | |
| .btn--light-grey button.active, | |
| .btn.btn--light-grey.active { | |
| background: #90908c; } | |
| .no-touchevents .btn.btn--light-grey:hover, .no-touchevents .btn.btn--light-grey.hover, | |
| .no-touchevents .btn--light-grey .btn:hover, | |
| .no-touchevents .btn--light-grey .btn.hover, | |
| .no-touchevents .btn--light-grey button:hover, | |
| .no-touchevents .btn--light-grey button.hover { | |
| background: #a9a9a6; } | |
| .no-touchevents .btn.btn--light-grey:active, | |
| .no-touchevents .btn--light-grey .btn:active, | |
| .no-touchevents .btn--light-grey button:active { | |
| background: #90908c; } | |
| .btn--grey .btn.active, | |
| .btn--grey button.active, | |
| .btn.btn--grey.active { | |
| background: #62595b; } | |
| .no-touchevents .btn.btn--grey:hover, .no-touchevents .btn.btn--grey.hover, | |
| .no-touchevents .btn--grey .btn:hover, | |
| .no-touchevents .btn--grey .btn.hover, | |
| .no-touchevents .btn--grey button:hover, | |
| .no-touchevents .btn--grey button.hover { | |
| background: #7c7173; } | |
| .no-touchevents .btn.btn--grey:active, | |
| .no-touchevents .btn--grey .btn:active, | |
| .no-touchevents .btn--grey button:active { | |
| background: #62595b; } | |
| .btn--dark-grey .btn.active, | |
| .btn--dark-grey button.active, | |
| .btn.btn--dark-grey.active { | |
| background: #474142; } | |
| .no-touchevents .btn.btn--dark-grey:hover, .no-touchevents .btn.btn--dark-grey.hover, | |
| .no-touchevents .btn--dark-grey .btn:hover, | |
| .no-touchevents .btn--dark-grey .btn.hover, | |
| .no-touchevents .btn--dark-grey button:hover, | |
| .no-touchevents .btn--dark-grey button.hover { | |
| background: #62595b; } | |
| .no-touchevents .btn.btn--dark-grey:active, | |
| .no-touchevents .btn--dark-grey .btn:active, | |
| .no-touchevents .btn--dark-grey button:active { | |
| background: #474142; } | |
| .btn--darker-grey .btn.active, | |
| .btn--darker-grey button.active, | |
| .btn.btn--darker-grey.active { | |
| background: #3a3435; } | |
| .no-touchevents .btn.btn--darker-grey:hover, .no-touchevents .btn.btn--darker-grey.hover, | |
| .no-touchevents .btn--darker-grey .btn:hover, | |
| .no-touchevents .btn--darker-grey .btn.hover, | |
| .no-touchevents .btn--darker-grey button:hover, | |
| .no-touchevents .btn--darker-grey button.hover { | |
| background: #544d4e; } | |
| .no-touchevents .btn.btn--darker-grey:active, | |
| .no-touchevents .btn--darker-grey .btn:active, | |
| .no-touchevents .btn--darker-grey button:active { | |
| background: #3a3435; } | |
| .btn--darkest-grey .btn.active, | |
| .btn--darkest-grey button.active, | |
| .btn.btn--darkest-grey.active { | |
| background: #2c2829; } | |
| .no-touchevents .btn.btn--darkest-grey:hover, .no-touchevents .btn.btn--darkest-grey.hover, | |
| .no-touchevents .btn--darkest-grey .btn:hover, | |
| .no-touchevents .btn--darkest-grey .btn.hover, | |
| .no-touchevents .btn--darkest-grey button:hover, | |
| .no-touchevents .btn--darkest-grey button.hover { | |
| background: #474142; } | |
| .no-touchevents .btn.btn--darkest-grey:active, | |
| .no-touchevents .btn--darkest-grey .btn:active, | |
| .no-touchevents .btn--darkest-grey button:active { | |
| background: #2c2829; } | |
| .btn--black .btn.active, | |
| .btn--black button.active, | |
| .btn.btn--black.active { | |
| background: #1f1c1d; } | |
| .no-touchevents .btn.btn--black:hover, .no-touchevents .btn.btn--black.hover, | |
| .no-touchevents .btn--black .btn:hover, | |
| .no-touchevents .btn--black .btn.hover, | |
| .no-touchevents .btn--black button:hover, | |
| .no-touchevents .btn--black button.hover { | |
| background: #3a3435; } | |
| .no-touchevents .btn.btn--black:active, | |
| .no-touchevents .btn--black .btn:active, | |
| .no-touchevents .btn--black button:active { | |
| background: #1f1c1d; } | |
| .btn--white .btn.active, | |
| .btn--white button.active, | |
| .btn.btn--white.active { | |
| background: #e5e5ff; } | |
| .no-touchevents .btn.btn--white:hover, .no-touchevents .btn.btn--white.hover, | |
| .no-touchevents .btn--white .btn:hover, | |
| .no-touchevents .btn--white .btn.hover, | |
| .no-touchevents .btn--white button:hover, | |
| .no-touchevents .btn--white button.hover { | |
| background: white; } | |
| .no-touchevents .btn.btn--white:active, | |
| .no-touchevents .btn--white .btn:active, | |
| .no-touchevents .btn--white button:active { | |
| background: #e5e5ff; } | |
| .btn--transparent .btn, | |
| .btn--transparent button, | |
| .btn.btn--transparent { | |
| background: transparent; } | |
| .btn--transparent .btn.active, | |
| .btn--transparent button.active, | |
| .btn.btn--transparent.active { | |
| background: rgba(0, 0, 0, 0.2); } | |
| .no-touchevents .btn.btn--transparent:hover, .no-touchevents .btn.btn--transparent.hover, | |
| .no-touchevents .btn--transparent .btn:hover, | |
| .no-touchevents .btn--transparent .btn.hover, | |
| .no-touchevents .btn--transparent button:hover, | |
| .no-touchevents .btn--transparent button.hover { | |
| background: rgba(0, 0, 0, 0.1); } | |
| .no-touchevents .btn.btn--transparent:active, | |
| .no-touchevents .btn--transparent .btn:active, | |
| .no-touchevents .btn--transparent button:active { | |
| background: rgba(0, 0, 0, 0.2); } | |
| .select__toggler.hover, | |
| button.select__toggler.hover, | |
| .btn.select__toggler.hover, .no-touchevents .select__toggler:hover { | |
| cursor: pointer; | |
| background: transparent; | |
| color: #897e80; | |
| border-style: solid; | |
| border-width: 0 0 0.0625rem; | |
| border-color: #6f6567; | |
| border-radius: 0; } | |
| .select__toggler.active, | |
| button.select__toggler.active, | |
| .btn.select__toggler.active, .select.select.select--open .select__toggler, | |
| .no-touchevents .select.select.select--open .select__toggler:hover, .no-touchevents .select__toggler:active { | |
| cursor: pointer; | |
| background: transparent; | |
| color: #6f6567; | |
| border-style: solid; | |
| border-width: 0 0 0.0625rem; | |
| border-color: #6f6567; | |
| border-radius: 0; } | |
| .select { | |
| position: relative; | |
| -webkit-transform: translateY(100%); | |
| -moz-transform: translateY(100%); | |
| transform: translateY(100%); } | |
| .select select { | |
| display: none; } | |
| .select.select--open .select__menu { | |
| margin-top: -1px; | |
| -webkit-transform: translateY(0); | |
| -moz-transform: translateY(0); | |
| transform: translateY(0); } | |
| .select.select--open .select__menu, .dropdown.dropdown.dropdown--open .dropdown__menu { | |
| -webkit-transition: opacity 0.16s ease-in 0s, visiblity 0.16s ease-in 0s, z-index 0.16s ease-in 0s, transform 0.16s ease-in 0s; | |
| transition: opacity 0.16s ease-in 0s, visiblity 0.16s ease-in 0s, z-index 0.16s ease-in 0s, transform 0.16s ease-in 0s; } | |
| .select__menu { | |
| position: absolute; | |
| background: #fefeff; | |
| max-height: 200px; | |
| overflow-y: auto; | |
| -webkit-overflow-scrolling: touch; | |
| border-color: rgba(0, 0, 0, 0.12); | |
| border-style: solid; | |
| border-width: 0.0625rem; | |
| border-radius: 0 0 2px 2px; | |
| padding: 0 0 0 0; | |
| text-align: left; | |
| width: auto; | |
| top: 100%; | |
| min-width: 100%; | |
| -webkit-transform: translateY(100%); | |
| -moz-transform: translateY(100%); | |
| transform: translateY(100%); | |
| -webkit-box-shadow: 0 4px 6px 0px rgba(0, 0, 0, 0.24); | |
| box-shadow: 0 4px 6px 0px rgba(0, 0, 0, 0.24); } | |
| .select__menu, .dropdown__menu { | |
| -webkit-transition: opacity 0.16s ease-out 0s, visiblity 0.16s ease-out 0s, z-index 0.16s ease-out 0s, transform 0.16s ease-out 0s; | |
| transition: opacity 0.16s ease-out 0s, visiblity 0.16s ease-out 0s, z-index 0.16s ease-out 0s, transform 0.16s ease-out 0s; } | |
| .select__menu li { | |
| width: 100%; | |
| padding: 8px 13px 8px 13px; } | |
| .no-touchevents .select__menu li:hover { | |
| cursor: pointer; | |
| color: #6f6567; | |
| background: #f4f4f5; | |
| border-color: transparent; | |
| border-style: none; | |
| border-width: 0; } | |
| .no-touchevents .select__menu li:active { | |
| color: #544d4e; | |
| background: #9c9c99; | |
| border-color: transparent; | |
| border-style: none; | |
| border-width: 0; } | |
| .input-group > .select:first-child:not(:last-child) .select__toggler, .btn-group > .select:first-child:not(:last-child) .select__toggler { | |
| border-top-right-radius: 0 !important; | |
| border-bottom-right-radius: 0 !important; } | |
| .input-group > .select:last-child:not(:first-child) .select__toggler, .btn-group > .select:last-child:not(:first-child) .select__toggler { | |
| border-left: 0 !important; | |
| border-top-left-radius: 0 !important; | |
| border-bottom-left-radius: 0 !important; } | |
| .input-group > .select:not(:first-child):not(:last-child) .select__toggler, .btn-group > .select:not(:first-child):not(:last-child) .select__toggler { | |
| border-left: 0 !important; | |
| border-radius: 0 !important; } | |
| .input-group .select, .btn-group .select { | |
| margin: 0; } | |
| .select__caret { | |
| left: 6px; | |
| color: #6f6567; | |
| position: relative; } | |
| .select.select--open .select__caret { | |
| top: -1px; | |
| -webkit-transform: rotate(180deg); | |
| -moz-transform: rotate(180deg); | |
| transform: rotate(180deg); } | |
| .select__toggler, | |
| button.select__toggler, | |
| .btn.select__toggler { | |
| background: none; | |
| color: #6f6567; | |
| border-style: solid; | |
| border-width: 0 0 0.0625rem; | |
| border-color: #6f6567; | |
| border-radius: 0; | |
| line-height: 1.1; | |
| padding: 8px 8px 8px 0; | |
| width: 100%; | |
| margin: 0; } | |
| /** Button (.button) **/ | |
| /** | |
| ** Button (.btn) | |
| **/ | |
| /** | |
| ** Core | |
| **/ | |
| /** Creates placeholders and classes */ | |
| /** | |
| ** Input Group | |
| **/ | |
| /** | |
| ** Core | |
| **/ | |
| /** Creates placeholders and classes */ | |
| /** Navigation */ | |
| /** Dropdown (.dropdown) **/ | |
| /** | |
| ** Dropdown (.dropdown) | |
| **/ | |
| /** | |
| ** Core | |
| **/ | |
| /** Creates placeholders and classes */ | |
| /** | |
| ** Button (.btn) | |
| **/ | |
| /** | |
| ** Core | |
| **/ | |
| /** Creates placeholders and classes */ | |
| /** | |
| ** Input Group | |
| **/ | |
| /** | |
| ** Core | |
| **/ | |
| /** Creates placeholders and classes */ | |
| .dropdown__toggler.hover, | |
| button.dropdown__toggler.hover, | |
| .btn.dropdown__toggler.hover, .no-touchevents .dropdown__toggler:hover { | |
| cursor: pointer; | |
| background: none; | |
| color: #897e80; | |
| border-style: solid; | |
| border-width: 0.0625rem; | |
| border-color: rgba(0, 0, 0, 0.12); | |
| border-radius: 0.25rem; } | |
| .dropdown__toggler.active, | |
| button.dropdown__toggler.active, | |
| .btn.dropdown__toggler.active, .dropdown.dropdown.dropdown--open .dropdown__toggler, | |
| .no-touchevents .dropdown.dropdown.dropdown--open .dropdown__toggler:hover, .no-touchevents .dropdown__toggler:active { | |
| cursor: pointer; | |
| background: #f7f6f6; | |
| color: #6f6567; | |
| border-style: solid; | |
| border-width: 0.0625rem; | |
| border-color: rgba(0, 0, 0, 0.12); | |
| border-radius: 0.25rem; } | |
| .dropdown { | |
| position: relative; } | |
| .dropdown.dropdown.dropdown--open .dropdown__menu { | |
| margin-top: -3px; | |
| z-index: 1; | |
| opacity: 1.0; | |
| -webkit-transform: translate3d(0, 0, 0); | |
| -moz-transform: translate3d(0, 0, 0); | |
| transform: translate3d(0, 0, 0); } | |
| .input-group > .dropdown:first-child:not(:last-child) .dropdown__toggler, .btn-group > .dropdown:first-child:not(:last-child) .dropdown__toggler { | |
| border-top-right-radius: 0 !important; | |
| border-bottom-right-radius: 0 !important; } | |
| .input-group > .dropdown:last-child:not(:first-child) .dropdown__toggler, .btn-group > .dropdown:last-child:not(:first-child) .dropdown__toggler { | |
| border-left: 0 !important; | |
| border-top-left-radius: 0 !important; | |
| border-bottom-left-radius: 0 !important; } | |
| .input-group > .dropdown:not(:first-child):not(:last-child) .dropdown__toggler, .btn-group > .dropdown:not(:first-child):not(:last-child) .dropdown__toggler { | |
| border-left: 0 !important; | |
| border-radius: 0 !important; } | |
| .input-group .dropdown, .btn-group .dropdown { | |
| margin: 0; } | |
| .dropdown__caret { | |
| left: 6px; | |
| color: #6f6567; | |
| position: relative; } | |
| .dropdown.dropdown--open .dropdown__caret { | |
| top: -1px; | |
| -webkit-transform: rotate(180deg); | |
| -moz-transform: rotate(180deg); | |
| transform: rotate(180deg); } | |
| .dropdown__toggler, | |
| button.dropdown__toggler, | |
| .btn.dropdown__toggler { | |
| background: none; | |
| color: #6f6567; | |
| border-style: solid; | |
| border-width: 0.0625rem; | |
| border-color: rgba(0, 0, 0, 0.12); | |
| border-radius: 0.25rem; | |
| line-height: 1.1; | |
| width: 100%; | |
| margin: 0; } | |
| .dropdown__menu { | |
| z-index: -1000; | |
| background: #fefeff; | |
| border-color: rgba(0, 0, 0, 0.12); | |
| border-style: solid; | |
| border-width: 0.0625rem; | |
| border-radius: 0 0 2px 2px; | |
| padding: 0 0 0 0; | |
| width: auto; | |
| min-width: 100%; | |
| text-align: left; | |
| overflow-y: auto; | |
| -webkit-overflow-scrolling: touch; | |
| opacity: 0.0; | |
| -webkit-transform: perspective(400px) translate3d(0, 100%, -200px); | |
| -moz-transform: perspective(400px) translate3d(0, 100%, -200px); | |
| transform: perspective(400px) translate3d(0, 100%, -200px); | |
| -webkit-box-shadow: 0 4px 6px 0px rgba(0, 0, 0, 0.24); | |
| box-shadow: 0 4px 6px 0px rgba(0, 0, 0, 0.24); } | |
| .dropdown__menu li a { | |
| display: block; | |
| clear: both; | |
| white-space: nowrap; | |
| color: #3a3435; | |
| background: #fefeff; | |
| border-color: transparent; | |
| border-style: none; | |
| border-width: 0; | |
| padding: 8px 13px 8px 13px; } | |
| .no-touchevents .dropdown__menu li a:hover { | |
| color: #6f6567; | |
| background: #f4f4f5; | |
| border-color: transparent; | |
| border-style: none; | |
| border-width: 0; } | |
| .no-touchevents .dropdown__menu li a:active { | |
| color: #544d4e; | |
| background: #9c9c99; | |
| border-color: transparent; | |
| border-style: none; | |
| border-width: 0; } | |
| .dropdown__heading { | |
| white-space: nowrap; | |
| clear: both; | |
| padding: 12px 13px 7px 13px; | |
| font-weight: 400; | |
| color: #6f6567; | |
| font-size: 1rem; | |
| line-height: 1.1; } | |
| /** Navbar (.navbar) **/ | |
| /** | |
| ** Navbar (.navbar) | |
| **/ | |
| /** | |
| ** Core | |
| **/ | |
| /** Creates placeholders and classes */ | |
| .navbar { | |
| position: relative; | |
| background: #fefeff; | |
| border-style: solid; | |
| border-width: 0.0625rem 0; | |
| border-color: rgba(0, 0, 0, 0.12); | |
| width: 100%; } | |
| .navbar .navbar__link, .navbar > a, .navbar > li > a, | |
| .navbar > li > a, | |
| .navbar > a { | |
| font-weight: 400; } | |
| .navbar + .navbar { | |
| border-top: 0; } | |
| .navbar .navbar { | |
| border: 0; | |
| width: auto; | |
| background: transparent; } | |
| .navbar--overflow { | |
| overflow-x: auto; | |
| -webkit-overflow-scrolling: touch; } | |
| .navbar__link, .navbar > a, .navbar > li > a { | |
| background: transparent; } | |
| .no-touchevents .navbar__link:active, .no-touchevents .navbar > a:active, .no-touchevents .navbar > li > a:active, | |
| .no-touchevents .navbar__link.active:hover, | |
| .no-touchevents .navbar > a.active:hover, | |
| .no-touchevents .navbar > li > a.active:hover, | |
| .navbar__link.active, | |
| .navbar > a.active, | |
| .navbar > li > a.active, | |
| .navbar > a.active, | |
| .navbar > a:active, | |
| .navbar > li > a.active, | |
| .navbar > li > a:active { | |
| background: transparent; | |
| color: #6f6567; } | |
| .no-touchevents .navbar__link:hover, .no-touchevents .navbar > a:hover, .no-touchevents .navbar > li > a:hover { | |
| background: transparent; | |
| color: #6f6567; } | |
| .navbar--sticky { | |
| position: -webkit-sticky; | |
| position: -moz-sticky; | |
| position: -ms-sticky; | |
| position: sticky; } | |
| .navbar.navbar--fixed-top, | |
| .navbar--fixed-top { | |
| border-top: 0; } | |
| .navbar.navbar--fixed-bottom, | |
| .navbar--fixed-bottom { | |
| border-bottom: 0; } | |
| /** Paginate (.paginate) **/ | |
| /** | |
| ** Paginate (.paginate) | |
| **/ | |
| /** | |
| ** Core | |
| **/ | |
| /** Creates placeholders and classes */ | |
| /** | |
| ** Core | |
| **/ | |
| /** Creates placeholders and classes */ | |
| .paginate { | |
| width: auto; | |
| border: 0; | |
| font-weight: 400; | |
| font-size: 1.125rem; | |
| line-height: 1.1; } | |
| .paginate > a:first-child:not(:last-child), | |
| .paginate .paginate__link:first-child:not(:last-child), | |
| .paginate li:first-child:not(:last-child) a { | |
| border-top-right-radius: 0 !important; | |
| border-bottom-right-radius: 0 !important; } | |
| .paginate > a:last-child:not(:first-child), | |
| .paginate .paginate__link:last-child:not(:first-child), | |
| .paginate li:last-child:not(:first-child) a { | |
| border-left: 0 !important; | |
| border-top-left-radius: 0 !important; | |
| border-bottom-left-radius: 0 !important; } | |
| .paginate > a:not(:first-child):not(:last-child), | |
| .paginate .paginate__link:not(:first-child):not(:last-child), | |
| .paginate li:not(:first-child):not(:last-child) a { | |
| border-left: 0 !important; | |
| border-radius: 0 !important; } | |
| .paginate > a, | |
| .paginate li a, | |
| .paginate__link { | |
| color: #30A9DE; | |
| border-width: 0.0625rem; | |
| border-style: solid; | |
| border-color: rgba(0, 0, 0, 0.14); | |
| background: #fefeff; | |
| border-radius: 0.25rem; | |
| padding: 8px 16px; } | |
| .paginate > a.active, | |
| .paginate li a.active, | |
| .paginate__link.active { | |
| color: #6f6567; } | |
| .no-touchevents .paginate > a:hover, | |
| .no-touchevents .paginate li a:hover, | |
| .no-touchevents .paginate__link:hover { | |
| color: #6f6567; } | |
| .no-touchevents .paginate .disabled:hover { | |
| color: rgba(0, 0, 0, 0.24); } | |
| /** Drawer (.drawer) **/ | |
| /** | |
| ** Drawer (.drawer) | |
| **/ | |
| /** | |
| ** Core | |
| **/ | |
| /** Creates placeholders and classes */ | |
| .drawer { | |
| display: block; | |
| position: fixed; | |
| top: 0; | |
| bottom: 0; | |
| left: 0; | |
| min-height: 100%; | |
| background: #f4f4f5; | |
| z-index: -1000; | |
| border-width: 0 0.0625rem 0 0; | |
| border-style: solid; | |
| border-color: rgba(0, 0, 0, 0.12); | |
| overflow-y: auto; | |
| -webkit-transform: translate3d(-100%, 0, 0); | |
| -moz-transform: translate3d(-100%, 0, 0); | |
| transform: translate3d(-100%, 0, 0); | |
| -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.24); | |
| box-shadow: 0 0 6px rgba(0, 0, 0, 0.24); } | |
| .drawer, .drawer.drawer--open, .drawer.drawer--top, .drawer.drawer--top.drawer--open, .drawer.drawer--right, .drawer.drawer--right.drawer--open, .drawer.drawer--bottom, .drawer.drawer--bottom.drawer--open { | |
| -webkit-transition: transform 0.48s ease-in-out 0s, z-index 0.48s ease-in-out 0s; | |
| transition: transform 0.48s ease-in-out 0s, z-index 0.48s ease-in-out 0s; } | |
| .drawer.drawer--absolute { | |
| position: absolute; } | |
| .drawer.drawer--open { | |
| -webkit-transform: translate3d(0, 0, 0); | |
| -moz-transform: translate3d(0, 0, 0); | |
| transform: translate3d(0, 0, 0); | |
| z-index: 2147483647; } | |
| .drawer .list { | |
| border: 0; | |
| margin: 0; } | |
| .drawer.drawer--top { | |
| left: 0; | |
| right: 0; | |
| top: 0; | |
| bottom: auto; | |
| min-width: 100%; | |
| min-height: initial; | |
| border-width: 0 0 0.0625rem 0; | |
| -webkit-transform: translate3d(0, -100%, 0); | |
| -moz-transform: translate3d(0, -100%, 0); | |
| transform: translate3d(0, -100%, 0); } | |
| .drawer.drawer--top.drawer.drawer--open { | |
| -webkit-transform: translate3d(0, 0, 0); | |
| -moz-transform: translate3d(0, 0, 0); | |
| transform: translate3d(0, 0, 0); } | |
| .drawer.drawer--right { | |
| left: auto; | |
| top: 0; | |
| bottom: 0; | |
| right: 0; | |
| border-width: 0 0 0 0.0625rem; | |
| -webkit-transform: translate3d(100%, 0, 0); | |
| -moz-transform: translate3d(100%, 0, 0); | |
| transform: translate3d(100%, 0, 0); } | |
| .drawer.drawer--right.drawer.drawer--open { | |
| -webkit-transform: translate3d(0, 0, 0); | |
| -moz-transform: translate3d(0, 0, 0); | |
| transform: translate3d(0, 0, 0); } | |
| .drawer.drawer--bottom { | |
| left: 0; | |
| top: auto; | |
| bottom: 0; | |
| right: 0; | |
| min-height: initial; | |
| width: 100%; | |
| border-width: 0.0625rem 0 0 0; | |
| -webkit-transform: translate3d(0, 100%, 0); | |
| -moz-transform: translate3d(0, 100%, 0); | |
| transform: translate3d(0, 100%, 0); } | |
| .drawer.drawer--bottom.drawer.drawer--open { | |
| -webkit-transform: translate3d(0, 0, 0); | |
| -moz-transform: translate3d(0, 0, 0); | |
| transform: translate3d(0, 0, 0); } | |
| /** Card (.card) */ | |
| /** | |
| ** Card (.card) | |
| **/ | |
| /** | |
| ** Core | |
| **/ | |
| /** Creates placeholders and classes */ | |
| .card { | |
| background: #fefeff; | |
| border-width: 0.0625rem; | |
| border-style: solid; | |
| border-color: rgba(0, 0, 0, 0.12); | |
| border-radius: 2px; | |
| width: 100%; } | |
| .card > *:not(.button):not(button):first-child { | |
| border-top: 0; } | |
| .card > *:not(.button):not(button):last-child { | |
| border-bottom: 0; } | |
| .card > *:first-child { | |
| border-top-right-radius: 2px; | |
| border-top-left-radius: 2px; } | |
| .card > *:last-child { | |
| border-bottom-right-radius: 2px; | |
| border-bottom-left-radius: 2px; } | |
| .card header, .card .card__header { | |
| width: 100%; | |
| background: #f1f1f3; | |
| border-width: 0.0625rem 0; | |
| border-color: rgba(0, 0, 0, 0.07); | |
| border-style: solid; } | |
| .card header + .navbar, .card .card__header + .navbar { | |
| border-top: 0; } | |
| .card footer, .card .card__footer { | |
| width: 100%; | |
| background: #f1f1f3; | |
| border-width: 0.0625rem 0; | |
| border-color: rgba(0, 0, 0, 0.07); | |
| border-style: solid; } | |
| .card footer > .navbar, .card .card__footer > .navbar { | |
| border: 0; } | |
| .card .navbar { | |
| background: transparent; } | |
| .card > p { | |
| width: 100%; | |
| margin: 0; } | |
| .card > img, | |
| .card > figure img, | |
| .card__image, | |
| .card__image img, | |
| .card > video, | |
| .card__video, | |
| .card__video video { | |
| width: 100%; | |
| margin: 0; | |
| padding: 0; | |
| display: block; } | |
| .card > img:first-child, | |
| .card__image, | |
| .card > img:last-child, | |
| .card > video:first-child, | |
| .card__video, | |
| .card > video:last-child { | |
| overflow: hidden; } | |
| /** List (.list) **/ | |
| /** | |
| ** Card (.card) | |
| **/ | |
| /** | |
| ** Core | |
| **/ | |
| /** Creates placeholders and classes */ | |
| .list { | |
| background: #fefeff; | |
| border-color: rgba(0, 0, 0, 0.12); | |
| border-style: solid; | |
| border-width: 0.0625rem; | |
| border-radius: 0 0 2px 2px; | |
| padding: 0 0 0 0; | |
| width: auto; | |
| min-width: inherit; | |
| text-align: left; | |
| -webkit-flex-basis: 100%; | |
| flex-basis: 100%; } | |
| .list > li { | |
| width: 100%; | |
| border-color: none; | |
| border-style: auto; | |
| border-width: 0 0 0 0; } | |
| .list > li > a { | |
| width: 100%; | |
| white-space: nowrap; | |
| color: #30A9DE; | |
| background: transparent; | |
| border-color: transparent; | |
| border-style: none; | |
| border-width: 0; | |
| padding: 8px 13px 8px 13px; } | |
| .list > li:last-child { | |
| border-bottom: 0; } | |
| .list li.list.list__item, | |
| .list .list__item { | |
| display: block; | |
| padding: 8px 13px 8px 13px; } | |
| .list li.list__heading, | |
| .list .list__heading { | |
| white-space: nowrap; | |
| clear: both; | |
| padding: 12px 13px 7px 13px; | |
| border-color: none; | |
| border-style: auto; | |
| border-width: 0; | |
| font-weight: 400; | |
| color: #6f6567; | |
| font-size: 1rem; | |
| line-height: 1.1; } | |
| .list.list--x > li { | |
| border-color: none; | |
| border-style: auto; | |
| border-width: 0 0 0 0; | |
| width: auto; } | |
| .list.list--x > li:last-child { | |
| border-right: 0; } | |
| .list.list--x li.list__heading, | |
| .list.list--x .list__heading { | |
| padding-top: 0; | |
| padding-bottom: 0; } | |
| .no-touchevents .list > li > a:hover { | |
| color: #6f6567; | |
| background: #f4f4f5; | |
| border-color: transparent; | |
| border-style: none; | |
| border-width: 0; } | |
| .no-touchevents .list > li > a:active { | |
| color: #6f6567; | |
| background: #9c9c99; | |
| border-color: transparent; | |
| border-style: none; | |
| border-width: 0; } | |
| /** Popover (.popover) **/ | |
| /** | |
| ** Core | |
| **/ | |
| /** Creates placeholders and classes */ | |
| .popover { | |
| display: block; | |
| position: absolute; | |
| background: #fefeff; | |
| border-width: 0.0625rem; | |
| border-color: rgba(0, 0, 0, 0.12); | |
| border-style: solid; | |
| border-radius: 0.25rem; | |
| top: calc(100% + 2.25rem); | |
| -webkit-transform: perspective(400px) translate3d(0, 100%, -200px); | |
| -moz-transform: perspective(400px) translate3d(0, 100%, -200px); | |
| transform: perspective(400px) translate3d(0, 100%, -200px); } | |
| .popover.popover--open, | |
| .no-touchevents .popover:hover { | |
| -webkit-transform: translate3d(0, 0, 0); | |
| -moz-transform: translate3d(0, 0, 0); | |
| transform: translate3d(0, 0, 0); | |
| -webkit-transition-delay: 0.24s; | |
| transition-delay: 0.24s; } | |
| .popover.popover--bottom:before, | |
| .no-touchevents .popover.popover--bottom:hover:before { | |
| left: calc(24px - 0.0625rem); } | |
| .popover.popover--bottom:before, | |
| .no-touchevents .popover.popover--bottom:hover:before { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| content: ""; | |
| position: absolute; | |
| border-width: 0 1rem 0.8125rem 1rem; | |
| border-color: transparent transparent rgba(0, 0, 0, 0.12) transparent; | |
| top: -0.875rem; } | |
| .popover.popover--bottom:after, | |
| .no-touchevents .popover.popover--bottom:hover:after { | |
| left: 24px; } | |
| .popover.popover--bottom:after, | |
| .no-touchevents .popover.popover--bottom:hover:after { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| content: ""; | |
| position: absolute; | |
| border-width: 0 0rem 0.75rem 0rem; | |
| border-color: transparent transparent #fefeff transparent; | |
| top: -0.75rem; } | |
| .popover.popover--bottom, .popover.popover--top, .popover.popover--left, .popover.popover--right, .tooltip.tooltip--bottom, .tooltip.tooltip--top, .tooltip.tooltip--left, .tooltip.tooltip--right { | |
| -webkit-transition: opacity 0.08s ease-out 0.24s, visiblity 0.08s ease-out 0.24s, z-index 0.08s ease-out 0.24s, transform 0.08s ease-out 0.24s; | |
| transition: opacity 0.08s ease-out 0.24s, visiblity 0.08s ease-out 0.24s, z-index 0.08s ease-out 0.24s, transform 0.08s ease-out 0.24s; } | |
| .popover.popover--top { | |
| top: auto; | |
| bottom: calc(100% + 2.25rem); | |
| -webkit-transform: translate3d(0, -100%, 0); | |
| -moz-transform: translate3d(0, -100%, 0); | |
| transform: translate3d(0, -100%, 0); } | |
| .popover.popover--open.popover--top, | |
| .no-touchevents .popover.popover--top:hover, .popover.popover--open.popover--left, | |
| .no-touchevents .popover.popover--left:hover, .popover.popover--open.popover--right, | |
| .no-touchevents .popover.popover--right:hover, .tooltip.tooltip--open.tooltip--top, | |
| .no-touchevents .tooltip.tooltip--top:hover, .tooltip.tooltip--open.tooltip--left, | |
| .no-touchevents .tooltip.tooltip--left:hover, .tooltip.tooltip--open.tooltip--right, | |
| .no-touchevents .tooltip.tooltip--right:hover { | |
| -webkit-transition: opacity 0.08s ease-in 0.12s, visiblity 0.08s ease-in 0.12s, z-index 0.08s ease-in 0.12s, transform 0.08s ease-in 0.12s; | |
| transition: opacity 0.08s ease-in 0.12s, visiblity 0.08s ease-in 0.12s, z-index 0.08s ease-in 0.12s, transform 0.08s ease-in 0.12s; } | |
| .popover.popover--left { | |
| right: calc(100% + 2.25rem); | |
| -webkit-transform: translate3d(-100%, 0, 0); | |
| -moz-transform: translate3d(-100%, 0, 0); | |
| transform: translate3d(-100%, 0, 0); } | |
| .popover.popover--right { | |
| left: calc(100% + 2.25rem); | |
| -webkit-transform: translate3d(100%, 0, 0); | |
| -moz-transform: translate3d(100%, 0, 0); | |
| transform: translate3d(100%, 0, 0); } | |
| .popover.popover--top:before, | |
| .no-touchevents .popover.popover--top:hover:before { | |
| left: calc(24px - 0.0625rem); } | |
| .popover.popover--top:before, | |
| .no-touchevents .popover.popover--top:hover:before { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| content: ""; | |
| position: absolute; | |
| border-width: 0.8125rem 1rem 0 1rem; | |
| border-color: rgba(0, 0, 0, 0.12) transparent transparent transparent; | |
| bottom: -0.875rem; } | |
| .popover.popover--top:after, | |
| .no-touchevents .popover.popover--top:hover:after { | |
| left: 24px; } | |
| .popover.popover--top:after, | |
| .no-touchevents .popover.popover--top:hover:after { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| content: ""; | |
| position: absolute; | |
| border-width: 0.75rem 0rem 0 0rem; | |
| border-color: #fefeff transparent transparent transparent; | |
| bottom: -0.75rem; } | |
| .popover.popover--open.popover.popover--top, | |
| .no-touchevents .popover.popover--top:hover { | |
| top: auto; | |
| bottom: calc(100% + 0.875rem); } | |
| .popover.popover--left:before, | |
| .no-touchevents .popover.popover--left:hover:before { | |
| top: calc(50% - 0.4375rem); } | |
| .popover.popover--left:before, | |
| .no-touchevents .popover.popover--left:hover:before { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| content: ""; | |
| position: absolute; | |
| border-width: 1rem 0 1rem 0.8125rem; | |
| border-color: transparent transparent transparent rgba(0, 0, 0, 0.12); | |
| left: auto; | |
| right: -0.875rem; } | |
| .popover.popover--left:after, | |
| .no-touchevents .popover.popover--left:hover:after { | |
| top: calc(50% - 0.375rem); } | |
| .popover.popover--left:after, | |
| .no-touchevents .popover.popover--left:hover:after { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| content: ""; | |
| position: absolute; | |
| border-width: 0rem 0 0rem 0.75rem; | |
| border-color: transparent transparent transparent #fefeff; | |
| left: auto; | |
| right: -0.75rem; } | |
| .popover.popover--open.popover.popover--left, | |
| .no-touchevents .popover.popover--left:hover { | |
| top: -50%; | |
| right: calc(100% + 0.875rem); } | |
| .popover.popover--right:before, | |
| .no-touchevents .popover.popover--right:hover:before { | |
| top: calc(50% - 0.4375rem); } | |
| .popover.popover--right:before, | |
| .no-touchevents .popover.popover--right:hover:before { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| content: ""; | |
| position: absolute; | |
| border-width: 1rem 0.8125rem 1rem 0; | |
| border-color: transparent rgba(0, 0, 0, 0.12) transparent transparent; | |
| left: -0.875rem; } | |
| .popover.popover--right:after, | |
| .no-touchevents .popover.popover--right:hover:after { | |
| top: calc(50% - 0.375rem); } | |
| .popover.popover--right:after, | |
| .no-touchevents .popover.popover--right:hover:after { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| content: ""; | |
| position: absolute; | |
| border-width: 0rem 0.75rem 0rem 0; | |
| border-color: transparent #fefeff transparent transparent; | |
| left: -0.75rem; } | |
| .popover.popover--open.popover.popover--right, | |
| .no-touchevents .popover.popover--right:hover { | |
| top: -50%; | |
| left: calc(100% + 0.875rem); } | |
| .popover__container { | |
| position: relative; } | |
| .popover > .card, | |
| .popover > .navbar, | |
| .popover > .list { | |
| border: 0; | |
| margin: 0; | |
| border-radius: 0.25rem; } | |
| .popover > .card header, .popover > .card .card__header, | |
| .popover > .navbar header, | |
| .popover > .navbar .card__header, | |
| .popover > .list header, | |
| .popover > .list .card__header { | |
| background: #fefeff; } | |
| /** Tooltip (.tooltip) **/ | |
| /** | |
| ** Core | |
| **/ | |
| /** Creates placeholders and classes */ | |
| .tooltip { | |
| display: block; | |
| position: absolute; | |
| background: #544d4e; | |
| border-width: 0.0625rem; | |
| border-color: #544d4e; | |
| border-style: solid; | |
| border-radius: 0.25rem; | |
| white-space: nowrap; | |
| top: calc(100% + 1.25rem); | |
| font-weight: 400; | |
| color: #fefeff; | |
| font-size: 1rem; | |
| line-height: 1.1; } | |
| .tooltip.tooltip--open, | |
| .no-touchevents .tooltip:hover { | |
| top: calc(100% + 0.625rem); | |
| -webkit-transform: translate3d(0, 0, 0); | |
| -moz-transform: translate3d(0, 0, 0); | |
| transform: translate3d(0, 0, 0); | |
| -webkit-transition-delay: 0.24s; | |
| transition-delay: 0.24s; } | |
| .tooltip.tooltip--bottom:before, | |
| .no-touchevents .tooltip.tooltip--bottom:hover:before { | |
| left: calc(12px - 0.0625rem); } | |
| .tooltip.tooltip--bottom:before, | |
| .no-touchevents .tooltip.tooltip--bottom:hover:before { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| content: ""; | |
| position: absolute; | |
| border-width: 0 0rem 0.5625rem 0rem; | |
| border-color: transparent transparent #544d4e transparent; | |
| top: -0.625rem; } | |
| .tooltip.tooltip--bottom:after, | |
| .no-touchevents .tooltip.tooltip--bottom:hover:after { | |
| left: 12px; } | |
| .tooltip.tooltip--bottom:after, | |
| .no-touchevents .tooltip.tooltip--bottom:hover:after { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| content: ""; | |
| position: absolute; | |
| border-width: 0 0rem 0.5rem 0rem; | |
| border-color: transparent transparent #544d4e transparent; | |
| top: -0.5rem; } | |
| .tooltip.tooltip--bottom { | |
| -webkit-transform: translate3d(0, 100%, 0); | |
| -moz-transform: translate3d(0, 100%, 0); | |
| transform: translate3d(0, 100%, 0); } | |
| .tooltip.tooltip--top { | |
| top: auto; | |
| bottom: calc(100% + 1.25rem); | |
| -webkit-transform: translate3d(0, -100%, 0); | |
| -moz-transform: translate3d(0, -100%, 0); | |
| transform: translate3d(0, -100%, 0); } | |
| .tooltip.tooltip--open.tooltip.tooltip--top, | |
| .no-touchevents .tooltip.tooltip--top:hover { | |
| -webkit-transform: translate3d(0, 0, 0); | |
| -moz-transform: translate3d(0, 0, 0); | |
| transform: translate3d(0, 0, 0); } | |
| .tooltip.tooltip--left { | |
| right: calc(100% + 1.25rem); | |
| -webkit-transform: translate3d(-100%, 0, 0); | |
| -moz-transform: translate3d(-100%, 0, 0); | |
| transform: translate3d(-100%, 0, 0); } | |
| .tooltip.tooltip--open.tooltip.tooltip--left, | |
| .no-touchevents .tooltip.tooltip--left:hover { | |
| -webkit-transform: translate3d(0, 0, 0); | |
| -moz-transform: translate3d(0, 0, 0); | |
| transform: translate3d(0, 0, 0); } | |
| .tooltip.tooltip--right { | |
| left: calc(100% + 1.25rem); | |
| -webkit-transform: translate3d(100%, 0, 0); | |
| -moz-transform: translate3d(100%, 0, 0); | |
| transform: translate3d(100%, 0, 0); } | |
| .tooltip.tooltip--open.tooltip.tooltip--right, | |
| .no-touchevents .tooltip.tooltip--right:hover { | |
| -webkit-transform: translate3d(0, 0, 0); | |
| -moz-transform: translate3d(0, 0, 0); | |
| transform: translate3d(0, 0, 0); } | |
| .tooltip.tooltip--top:before, | |
| .no-touchevents .tooltip.tooltip--top:hover:before { | |
| left: calc(12px - 0.0625rem); } | |
| .tooltip.tooltip--top:before, | |
| .no-touchevents .tooltip.tooltip--top:hover:before { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| content: ""; | |
| position: absolute; | |
| border-width: 0.5625rem 0rem 0 0rem; | |
| border-color: #544d4e transparent transparent transparent; | |
| bottom: -0.625rem; } | |
| .tooltip.tooltip--top:after, | |
| .no-touchevents .tooltip.tooltip--top:hover:after { | |
| left: 12px; } | |
| .tooltip.tooltip--top:after, | |
| .no-touchevents .tooltip.tooltip--top:hover:after { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| content: ""; | |
| position: absolute; | |
| border-width: 0.5rem 0rem 0 0rem; | |
| border-color: #544d4e transparent transparent transparent; | |
| bottom: -0.5rem; } | |
| .tooltip.tooltip--open.tooltip.tooltip--top, | |
| .no-touchevents .tooltip.tooltip--top:hover { | |
| top: auto; | |
| bottom: calc(100% + 0.625rem); } | |
| .tooltip.tooltip--left:before, | |
| .no-touchevents .tooltip.tooltip--left:hover:before { | |
| top: calc(50% - 0.3125rem); } | |
| .tooltip.tooltip--left:before, | |
| .no-touchevents .tooltip.tooltip--left:hover:before { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| content: ""; | |
| position: absolute; | |
| border-width: 0rem 0 0rem 0.5625rem; | |
| border-color: transparent transparent transparent #544d4e; | |
| left: auto; | |
| right: -0.625rem; } | |
| .tooltip.tooltip--left:after, | |
| .no-touchevents .tooltip.tooltip--left:hover:after { | |
| top: calc(50% - 0.25rem); } | |
| .tooltip.tooltip--left:after, | |
| .no-touchevents .tooltip.tooltip--left:hover:after { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| content: ""; | |
| position: absolute; | |
| border-width: 0rem 0 0rem 0.5rem; | |
| border-color: transparent transparent transparent #544d4e; | |
| left: auto; | |
| right: -0.5rem; } | |
| .tooltip.tooltip--open.tooltip.tooltip--left, | |
| .no-touchevents .tooltip.tooltip--left:hover { | |
| top: -50%; | |
| right: calc(100% + 0.625rem); } | |
| .tooltip.tooltip--right:before, | |
| .no-touchevents .tooltip.tooltip--right:hover:before { | |
| top: calc(50% - 0.3125rem); } | |
| .tooltip.tooltip--right:before, | |
| .no-touchevents .tooltip.tooltip--right:hover:before { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| content: ""; | |
| position: absolute; | |
| border-width: 0rem 0.5625rem 0rem 0; | |
| border-color: transparent #544d4e transparent transparent; | |
| left: -0.625rem; } | |
| .tooltip.tooltip--right:after, | |
| .no-touchevents .tooltip.tooltip--right:hover:after { | |
| top: calc(50% - 0.25rem); } | |
| .tooltip.tooltip--right:after, | |
| .no-touchevents .tooltip.tooltip--right:hover:after { | |
| -webkit-transform: rotate(360deg); | |
| transform: rotate(360deg); | |
| width: 0; | |
| height: 0; | |
| border-style: solid; | |
| content: ""; | |
| position: absolute; | |
| border-width: 0rem 0.5rem 0rem 0; | |
| border-color: transparent #544d4e transparent transparent; | |
| left: -0.5rem; } | |
| .tooltip.tooltip--open.tooltip.tooltip--right, | |
| .no-touchevents .tooltip.tooltip--right:hover { | |
| top: -50%; | |
| left: calc(100% + 0.625rem); } | |
| .tooltip__container { | |
| position: relative; } | |
| /** Avatar (.avatar) **/ | |
| /** | |
| ** Core | |
| **/ | |
| /** Creates placeholders and classes */ | |
| .avatar.avatar--xs, .avatar.avatar--s, .avatar.avatar--m, .avatar.avatar--l, .avatar.avatar--xl, .avatar { | |
| width: 36px; | |
| height: 36px; | |
| background: transparent; | |
| border-width: 0; | |
| border-style: auto; | |
| border-color: none; | |
| border-radius: 100%; | |
| position: relative; } | |
| .avatar.avatar--xs { | |
| width: 24px; | |
| height: 24px; } | |
| .avatar.avatar--s { | |
| width: 36px; | |
| height: 36px; } | |
| .avatar.avatar--m { | |
| width: 64px; | |
| height: 64px; } | |
| .avatar.avatar--l { | |
| width: 96px; | |
| height: 96px; } | |
| .avatar.avatar--xl { | |
| width: 128px; | |
| height: 128px; } | |
| .avatar { | |
| position: relative; | |
| z-index: 1; } | |
| .avatar img { | |
| min-height: 100%; | |
| min-width: 100%; | |
| object-fit: cover; | |
| border-radius: 100%; } | |
| /** | |
| ** Colors | |
| **/ | |
| /** | |
| ** Core | |
| **/ | |
| /** Creates placeholders and classes */ | |
| a { | |
| text-decoration: none; | |
| color: #30A9DE; | |
| -webkit-tap-highlight-color: rgba(0, 0, 0, 0.07); } | |
| .no-touchevents a:hover { | |
| color: #6f6567; } | |
| .no-touchevents a:active { | |
| color: #6f6567; } | |
| -moz-selection, ::selection, textarea::selection { | |
| background: #72c4e9; | |
| color: #fefeff; } | |
| body { | |
| background: #f9f9fa; } | |
| /** | |
| ** Spacing | |
| **/ | |
| /** | |
| ** Core | |
| **/ | |
| /** Creates placeholders and classes */ | |
| /** Creates placeholders and classes */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment