.hide--until-sm - button is hidden UNTIL we hit the sm viewport size.
.hide--until-md - button is hidden UNTIL we hit the md viewport size.
.hide--until-lg - button is hidden UNTIL we hit the lg viewport size.
.hide--until-xl - button is hidden UNTIL we hit the xl viewport size.
.hide--after-sm - button is hidden AFTER we hit the sm viewport size.
.hide--after-md - button is hidden AFTER we hit the md viewport size.
.hide--after-lg - button is hidden AFTER we hit the lg viewport size.
.hide--after-xl - button is hidden AFTER we hit the xl viewport size.
Style guide: Common.Hide
*/
.hide {
display: none;
/* Element is hidden BEFORE a certain breakpoint */
}
@media (min-width: 30.0625rem) {
.hide--until-sm {
display: block;
}
}
@media (min-width: 48.0625rem) {
.hide--until-md {
display: block;
}
}
@media (min-width: 61.9375rem) {
.hide--until-lg {
display: block;
}
}
@media (min-width: 86.3125rem) {
.hide--until-xl {
display: block;
}
}
/*Element is hidden AFTER a certain breakpoint*/
.hide--after-sm {
display: block;
}
@media (min-width: 30.0625rem) {
.hide--after-sm {
display: none;
}
}
.hide--after-md {
display: block;
}
@media (min-width: 48.0625rem) {
.hide--after-md {
display: none;
}
}
.hide--after-lg {
display: block;
}
@media (min-width: 61.9375rem) {
.hide--after-lg {
display: none;
}
}
/*FLEX hide*/
.hide-flex {
display: none;
/* Element is hidden BEFORE a certain breakpoint */
}
@media (min-width: 30.0625rem) {
.hide-flex--until-sm {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
@media (min-width: 48.0625rem) {
.hide-flex--until-md {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
@media (min-width: 61.9375rem) {
.hide-flex--until-lg {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
@media (min-width: 86.3125rem) {
.hide-flex--until-xl {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
}
/*Element is hidden AFTER a certain breakpoint*/
.hide-flex--after-sm {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
@media (min-width: 30.0625rem) {
.hide-flex--after-sm {
display: none;
}
}
.hide-flex--after-md {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
@media (min-width: 48.0625rem) {
.hide-flex--after-md {
display: none;
}
}
.hide-flex--after-lg {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
@media (min-width: 61.9375rem) {
.hide-flex--after-lg {
display: none;
}
}
/*
Sizes
Some preset width and height classes in both sm-xxl and fixed rem based sizes.
These are designed primarily for image content
Style guide: Common.Sizes
*/
/*
Min Height
Mainly Used for Image / Backgroun image blocks - see card examples
Markup:
Content
.min-h-xs - Xtra Small
.min-h-sm - Small
.min-h-md - Medium
.min-h-lg - Large
Style guide: Common.Sizes.Heights
*/
.h-auto {
height: auto;
}
.w-auto {
height: auto;
}
.min-h-xs {
min-height:72px;
min-height:4.5rem;
}
.min-h-sm {
min-height:128px;
min-height:8rem;
}
.min-h-md {
min-height:256px;
min-height:16rem;
}
.min-h-lg {
min-height:384px;
min-height:24rem;
}
.min-h-xl {
min-height:512px;
min-height:32rem;
}
.min-h-xxl {
min-height:640px;
min-height:40rem;
}
.min-h--xxxl {
min-height:720px;
min-height:45rem;
}
.min-h--100vh {
min-height: 100vh;
}
.min-h-full {
min-height:100%;
max-height: 100%;
}
@media (max-width: 30rem) {
.min-h-full-until-sm {
min-height:100%;
max-height: 100%;
}
}
@media (max-width: 48rem) {
.min-h-full-until-md {
min-height:100%;
max-height: 100%;
}
}
@media (max-width: 61.875rem) {
.min-h-full-until-lg {
min-height:100%;
max-height: 100%;
}
}
@media (max-width: 61.875rem) {
.min-h-full-until-xl {
min-height:100%;
max-height: 100%;
}
}
@media (max-width: 120rem) {
.min-h-full-until-xxl {
min-height:100%;
max-height: 100%;
}
}
.max-h--xs {
max-height:72px;
max-height:4.5rem;
}
.max-h--sm {
max-height:128px;
max-height:8rem;
}
.max-h--md {
max-height:256px;
max-height:16rem;
}
.max-h--lg {
max-height:384px;
max-height:24rem;
}
.max-h--xl {
max-height:512px;
max-height:32rem;
}
.max-h--xxl {
max-height:640px;
max-height:40rem;
}
.max-h--xxxl {
max-height:720px;
max-height:45rem;
}
.max-h--full {
max-height:100vh;
}
@media (max-width: 30rem) {
.max-h--full-until-sm {
max-height:100vh;
}
}
@media (max-width: 48rem) {
.max-h--full-until-md {
max-height:100vh;
}
}
@media (max-width: 61.875rem) {
.max-h--full-until-lg {
max-height:100vh;
}
}
@media (max-width: 61.875rem) {
.max-h--full-until-xl {
max-height:100vh;
}
}
@media (max-width: 120rem) {
.max-h--full-until-xxl {
max-height:100vh;
}
}
/**width based on viewports with some other standard sizes **/
.min-w {
min-width: 40px;
}
.min-w--72 {
min-width:72px;
}
.min-w--128 {
min-width: 128px;
}
.min-w--sm {
}
.min-w--md {
}
.min-w--lg {
}
/*
Grid
Our base css-grid layout for responsive design.
12-column grid and be used as a layout skeleton for an entire page, or within / combined with other elements for finer content control.
Combining column classes inside the grid container allows us to control the column's span based on pre-determined breakpoints as seup in the mixins file.
If we do not denote a column class, the grid default to a column span of 1.
Markup:
Style guide: Common.Checkbox.Defaults
*/
/*
Checkbox - Label on Top
With a modifier class "chk--label-top" we can display as such
Markup:
Style guide: Common.Checkbox.Label on Top
*/
/*
Checkbox - Label on Bottom
With a modifier class "chk--label-bottom" we can display as such
Markup:
Style guide: Common.Checkbox.Label on Bottom
*/
/*
Checkbox - No Icon
We can display with no icon
Our color mofifiers will alter based on the existence of this modifier class.
For Example, our 'chk--positive' modifier class will fill the radio rather than outline it.
Markup:
Style guide: Common.Checkbox.No Icon
*/
/*
Radio
Radio Input Variations
Style guide: Common.Radios
*/
/*
Radio Defaults
Standard radio implementation with default font icons
Markup:
Style guide: Common.Radios.Default
*/
/*
Radios - Label on Top
With a modifier class "rad--label-top" we can display as such
Markup:
Style guide: Common.Radios.Label on Top
*/
/*
Radios - Label on Bottom
With a modifier class "rad--label-bottom" we can display as such
Markup:
Style guide: Common.Radios.Label on Bottom
*/
/*
Radios - No Icon
We can display with no icon
Our color mofifiers will alter based on the existence of this modifier class.
For Example, our 'rad--positive' modifier class will fill the radio rather than outline it.
Markup:
Style guide: Common.Radios.No Icon
*/
/*
Radios - Star Icon (for rating select)
We can display with no icon
Our color mofifiers will alter based on the existence of this modifier class.
For Example, our 'rad--positive' modifier class will fill the radio rather than outline it.
Markup:
Style guide: Common.Radios.Product Select v2*/
.chk--product-select input:not(:checked) + label:hover, .rad--product-select input:not(:checked) + label:hover, .switch--product-select input:not(:checked) + label:hover {
border-color: rgba(44, 53, 92, 0.1);
background-color: rgba(255, 255, 255, 0.75);
cursor: pointer;
opacity: 1;
}
/*Radios - Product Select
With the product select modifier we can make out product selections semantic and keyboard navagable
**note** we have two **optional custom tags** for use with this modifier class, **product-name** and **product-price** which when used will format the items accordingly
Markup:
.jumbo--underlay - Adds a translucent underlay for better text readability.
.jumbo--pad - Adds padding
.jumbo--underlay.jumbo--pad - with repsonsive padding and a translucent underlay for better text readability
.jumbo--underlay.jumbo--underlay-t-b.jumbo--pad - Combined padding and underlay with top to bottom gradient
.jumbo--underlay.jumbo--underlay-l-r.jumbo--pad - Combined padding and underlay with left to right gradient
.jumbo--underlay.jumbo--underlay-b-t.jumbo--pad - Combined padding and underlay with bottom to top gradient
.jumbo--underlay.jumbo--underlay-t-b.jumbo--pad.jumbo--min-xxxl - Combined padding and underlay with top to bottom gradient, min height xxxl
Style guide: Common.Jumbo
*/
.jumbo {
background-size:cover;
background-repeat: no-repeat;
-o-object-fit: cover;
object-fit: cover;
background-position:center;
}
/* element */
.jumbo__content {
color: white;
text-transform: capitalize;
}
.jumbo__icons {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap:nowrap;
flex-wrap:nowrap;
font-size: 40px;
}
/* modifiers*/
.jumbo--brand-1 {
background: #4A5899;
}
.jumbo--brand-2 {
background: #FDA913;
}
.jumbo--pad {
/* @mixin responsive-pad; */
padding: 16px;
padding: 1rem;
}
.jumbo--underlay {
position: relative
}
.jumbo--underlay::before {
display: block;
content: "";
position: absolute;
background: rgba(44, 53, 92, 0.5);
top:0;
right:0;
bottom:0;
left:0;
}
.jumbo--underlay .jumbo__content {
position: relative;
}
.jumbo--underlay-t-b::before {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.3)), to(transparent));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent);
}
.jumbo--underlay-l-r::before {
background-image: -webkit-gradient(linear, left top, right top, from(rgba(205, 207, 211, 0.3)), to(transparent));
background-image: linear-gradient(to right, rgba(205, 207, 211, 0.3), transparent);
}
.jumbo--underlay-b-t::before {
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(205, 207, 211, 0.3)), to(transparent));
background-image: linear-gradient(to top, rgba(205, 207, 211, 0.3), transparent);
}
.jumbo--underlay-brand-1-lr::before {
background-image: radial-gradient(circle, rgba(2, 0, 36, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
}
/*Desktop Height Modifiers*/
.jumbo--min-xs {
min-height:72px;
min-height:4.5rem;
}
.jumbo--min-sm {
min-height:128px;
min-height:8rem;
}
@media (min-width: 61.9375rem) {
.jumbo--min-md {
min-height:256px;
min-height:16rem;
}
.jumbo--min-lg {
min-height:384px;
min-height:24rem;
}
.jumbo--min-xl {
min-height:512px;
min-height:32rem;
}
.jumbo--min-xxl {
min-height:640px;
min-height:40rem;
}
.jumbo--min-xxxl {
min-height:720px;
min-height:45rem;
}
}
.jumbo--min-full {
min-height:100vh;
}
.jumbo--max-xs {
max-height:72px;
max-height:4.5rem;
}
.jumbo--max-sm {
max-height:128px;
max-height:8rem;
}
.jumbo--max-md {
max-height:256px;
max-height:16rem;
}
.jumbo-max-lg {
max-height:384px;
max-height:24rem;
}
.jumbo-max-xl {
max-height:512px;
max-height:32rem;
}
.jumbo-max-xxl {
max-height:640px;
max-height:40rem;
}
.jumbo-max-xxxl {
max-height:720px;
max-height:45rem;
}
.jumbo-max-full {
max-height:100vh;
}
/*
Card
Simple border and drop shadow container for anywhere we want to show a card
Combine with layout classes for full control.
Here's some examples using outher valable *classes* to control the card's content
**.card__header (optional)**
displays a header as a per-determined flexbox with a bottom border and justify space between
**.card__body (optional)**
This is a flexbox that expands to fill available space. this should normally be used if we want containers above or below (eg header and footer) to fit their own content, and the main card content container (body) will stretch to the remaining height of the card
**.card__img (optional)**
this is a background image container that only needs to be added if we want to include additional effects when the modifier 'card--is-link' is applied
**.card__footer (optional)**
displays a footer as a pre-determined flexbox with a top border and justify space between
See [Demos](section-demos.html). section for advanced card examples .
Markup:
Optional Header
Content
.card--is-link - if we want our card to be a link we can add this modifier which will make any 'card__img' classs slightly darker, and fully opaque on hover.
Style guide: Common.Card
*/
.card {
border: 2px solid rgba(44, 53, 92, 0.1);
border: 0.125rem solid rgba(44, 53, 92, 0.1);
/* box-shadow: 0px 4px 4px 0px color(var(--grey-7) alpha(0.10)); */
-webkit-box-shadow: 0px 0.5rem 0.5rem 0px rgba(44, 53, 92, 0.15);
box-shadow: 0px 0.5rem 0.5rem 0px rgba(44, 53, 92, 0.15);
background: white;
border-radius: 8px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width:100%;
overflow: hidden;
}
.card__img {
-webkit-transition: .3s;
transition: .3s;
background-size: cover;
position: relative;
background-position: center;
}
.card__body {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.card__header, .card__footer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap:16px;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
padding: 16px;
padding: 1rem;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.card__header {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
border-bottom: 2px solid rgba(44, 53, 92, 0.1);
border-bottom: 0.125rem solid rgba(44, 53, 92, 0.1);
border-radius: 8px 8px 0 0;
}
.card__header--noflex {
display: block;
}
.card__footer {
border-top: 2px solid rgba(44, 53, 92, 0.1);
border-top: 0.125rem solid rgba(44, 53, 92, 0.1);
border-radius: 0 0 8px 8px
}
.card__footer a {
color:#FDA913;
}
.card--fill-parent {
position: relative;
min-width:100%;
min-height: 100%;
max-width: 100%;
max-height:100%;
}
.card--no-border {
border-color: transparent;
}
.card--no-shadow {
-webkit-box-shadow: none;
box-shadow: none;
}
.card--no-background {
background: none;
}
.card--is-link {
/* transform: scale(1); */
-webkit-transition: 0.3s;
transition: 0.3s
}
.card--is-link .card__img {
-webkit-transition: 0.3s;
transition: 0.3s;/*background-size: 100%;*//*position: relative;*/
}
.card--is-link .card__img:after {
-webkit-transition: 0.3s;
transition: 0.3s;
position: absolute;
content: "";
top:0;
right:0;
bottom:0;
left:0;
background-color: rgba(0, 0, 0, .3);
}
.card--is-link:hover {/*transform: scale(1.02);*/
-webkit-box-shadow: 0px 1rem 1rem 0px rgba(44, 53, 92, 0.15);
box-shadow: 0px 1rem 1rem 0px rgba(44, 53, 92, 0.15);
cursor: pointer;
}
.card--is-link:hover .card__img {
-webkit-transition: 0.3s;
transition: 0.3s;/*background-size: 105%;*/
}
.card--is-link:hover .card__img:after {
background-color: transparent;
}
.mobile-toolbar {
display: block;
position: fixed;
bottom:0;
left:0;
right:0;
-webkit-box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, .25);
box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, .25);
background: white;
visibility: visible;
}
.mobile-toolbar__content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
gap:16px;
padding: 16px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.mobile-toolbar__content > .input-item {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
@media (min-width: 30.0625rem) {
.mobile-toolbar--until-sm {
display:none;
visibility: hidden;
}
}
@media (min-width: 48.0625rem) {
.mobile-toolbar--until-md {
display:none;
visibility: hidden;
}
}
@media (min-width: 61.9375rem) {
.mobile-toolbar--until-lg {
display:none;
visibility: hidden;
}
}
@media (min-width: 86.3125rem) {
.mobile-toolbar--until-xl {
display:none;
visibility: hidden;
}
}
@media (max-width: 30rem) {
.fixed-mobile {
position: fixed;
bottom:0;
left:0;
right:0;
-webkit-box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, .25);
box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, .25);
background: white;
visibility: visible;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
z-index: 997;
}
}
@media (max-width: 48rem) {
.fixed-mobile--until-md {
position: fixed;
bottom:0;
left:0;
right:0;
-webkit-box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, .25);
box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, .25);
background: white;
visibility: visible;
z-index: 997;
}
}
@media (max-width: 61.875rem) {
.fixed-mobile--until-lg {
position: fixed;
bottom:0;
left:0;
right:0;
-webkit-box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, .25);
box-shadow: 0px -4px 4px 0px rgba(0, 0, 0, .25);
background: white;
visibility: visible;
z-index: 997;
}
.fixed-mobile--until-lg .fixed-mobile__expanded-view {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden;
overflow-y: auto;
display: none;
}
.fixed-mobile--until-lg--expanded {
top:0;
}
.fixed-mobile--until-lg--expanded .fixed-mobile__expanded-view {
display: block;
}
}
/*
Modal
Basic Modal Example with tabbale focus trap. Modal can be closed via the close button, by clicking outside, or by pressing 'Escape'.
The **modal__body** is REQUIRED and will auto-size based on the content inside. If the size extends beyond the modal's height, it will auto scroll.
***Important*** - for blazor apps, where we add a modal to the DOM on a click, we must ensure that the modal has a class modifier of 'modal--open'. This is because the modal class has been created to allow for content already in the DOM to be 'modalized'
Markup:
Modal Optional Header
Absolute Tag
Content Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Style guide: Common.Modal
*/
.modal {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, .2);
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-backdrop-filter: blur(1px);
backdrop-filter: blur(1px);
-webkit-transition: all 0.5s;
transition: all 0.5s;
z-index: 9999999;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
display: none;
}
.modal__container {
-webkit-box-shadow: 0px 3rem 3rem 0px rgba(44, 53, 92, 0.5);
box-shadow: 0px 3rem 3rem 0px rgba(44, 53, 92, 0.5);
position: relative;
overflow: auto;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: auto;
max-height: 90%;
min-width: 220px;
max-width: 760px;
border-radius: 8px;
overflow: hidden;
-webkit-transition: all 0.4s;
transition: all 0.4s;
background-color: #ffffff;
}
@media (min-width: 48.0625rem) {
.modal__container {
min-width: 468px;
}
}
.modal__header {
border-bottom: 2px solid rgba(44, 53, 92, 0.1);
border-bottom: 0.125rem solid rgba(44, 53, 92, 0.1);
}
.modal__footer {
border-top: 2px solid rgba(44, 53, 92, 0.1);
border-top: 0.125rem solid rgba(44, 53, 92, 0.1);
}
.modal__body {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: auto;
position: relative;
}
.modal__body-no-scroll {
overflow: hidden;
}
.modal.is-active, .modal--active {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
z-index: 999;
}
.modal--md-1 .modal__container {
min-width:50vw;
}
.modal--md-2 .modal__container {
min-width:50vw;
}
.modal--lg .modal__container {
min-width:75vw;
}
.modal--xl .modal__container {
min-width:90vw;
}
.modal--fullscreen .modal__container {
min-width: 100vw;
min-height: 100vh;
width:100vw;
height:100vh;
max-width: 100vw;
max-height: 100vh;
border-radius: 0!important;
}
@media (max-width: 61.875rem) {
.modal--full-screen-mobile .modal__container {
min-width:100%;
min-height:100%;
max-width:100%;
max-height:100%;
border-radius:0;
}
}
.modal--transparent .modal__container {
background-color: transparent;
-webkit-box-shadow: none;
box-shadow: none;
}
.modal--animate-bottom .modal__container {
-webkit-animation-name: fadeInBottom;
animation-name: fadeInBottom;
-webkit-animation-duration: .3s;
animation-duration: .3s;
-webkit-animation-timing-function: cubic-bezier(.17, .67, .75, 1.02);
animation-timing-function: cubic-bezier(.17, .67, .75, 1.02);
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
-webkit-animation-direction: normal;
animation-direction: normal;
}
.modal--open {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
z-index: 999;
}
/*
Structure
We use postcss with a gulp process to create and compile individual CSS files for each project we create.
The steps we take to do this are:
1. create a file and name it according to the project.#, eg: zikomo-core.css
2. import the post css files we want to include - by only including what the project needs, we can ensure the minimal possible css file size.
3. Common classes - these are pre-created classes we can use individually or combined to help crteate the UI we want directly in out html / components
4. widgets - these are more specific and detailed BEM classes that require a specific structure. Normally only one widget class (with optional modifier classes) will be used on a parent element, and will affect html tags contained within. See the widgets section for more details.
5. Vendor classes - these are for third party plug ins, such as flickity, date pickers etc
Styleguide 0
*/
/*
Adding / Extending Classes
Generally, our css repository should be expaned upon as and when we want to add, or add modifiers to classes.
1. we should not alter pre-existing classes to do this
2. instead we create either
- a modifier class that will adjust the outcome in some way
- a new class
- a new css file that uses the same classes / class names, that we will import **instead** of the default version
3. For example, i have a client that wants animated input classes. We then are faced with a decision on how to add such UI to our available classes
- can we modify our existing common inputs?
- do we need to create a new class entirely
Styleguide 0.Structure
*/
/*
Brand Variables (Required)
Every branded css file we create must contain a colors.css file **in it's own directory**.
For example, the color variables listed below are defined in the brands/zikomocore/color.css file.
Our brand css files must all have the **same** variables, with only the values changed to suit the brand's individual colors.
We use these variables, eg var(--brand-1) instead of hex codes to define our colors in or css classes.
This way, when we compile our postcss, all common, widget and vendor classes that use these variables will **inherit** the correct colors, thus producing a fully branded css file.
Brand color guides can be found in the respective **FIGMA** files under the /Brands/ directory.
Styleguide 0.Brand Color Variables
*/
/*
Text
**NOTE:** These are examples of the variables set in the /brand/colors.css file. They should be used **only** in other css files when constructing classes, and **not** directly in our html.
var(--text-primary) - #4F5165; Primary Text
var(--text-secondary) - #1F2132; Secondary Text
var(--text-light) - #D2D4E1; Light Text
var(--text-link) - #C1B098; Default Hyperlink
Styleguide 0.Brand Color Variables.Text
*/
/*
Brand 1
**NOTE:** These are examples of the variables set in the /brand/colors.css file. They should be used **only** in other css files when constructing classes, and **not** directly in our html.
var(--brand-1) - #4F5165; Primary Brand
var(--brand-1--tint-1) - #8488A7;
var(--brand-1--tint-2) - #A7AAC3;
var(--brand-1--shade-1) - #3B3E5A;
var(--brand-1--shade-2) - #1F2132;
Styleguide 0.Brand Color Variables.Brand 1
*/
/*
Brand 2
**NOTE:** These are examples of the variables set in the /brand/colors.css file. They should be used **only** in other css files when constructing classes, and **not** directly in our html.
var(--brand-2) Brand 1 - #C1B098; Secondary Brand
var(--brand-2--tint-1) - #DBCDBA;
var(--brand-2--tint-2) - #E7DDD0;
var(--brand-2--shade-1) - #B19B7C;
var(--brand-2--shade-2) - #8A7353;
Styleguide 0.Brand Color Variables.Brand 2
*/
/*
Greyscale
**NOTE:** These are examples of the variables set in the /brand/colors.css file. They should be used **only** in other css files when constructing classes, and **not** directly in our html.
var(--white) white - #ffffff; White
var(--grey-0) grey 0 - #ffffff; Grey 0
var(--grey-1) grey 1 - #F1F2F9; Grey 1
var(--grey-2) grey 2 - #E4E6F0; Grey 2
var(--grey-3) grey 3 - #D2D4E1; Grey 3
var(--grey-4) grey 4 - #C3C6D9; Grey 4
var(--grey-5) grey 5 - #A3A7BD; Grey 5
var(--grey-6) grey 6 - #8589A7; Grey 6
var(--grey-7) grey 7 - #5F637C; Grey 7
Styleguide 0.Brand Color Variables.Greyscale
*/
/*
Success / Warning / Negative
**NOTE:** These are examples of the variables set in the /brand/colors.css file. They should be used **only** in other css files when constructing classes, and **not** directly in our html.
var(--positive) - #0BBA7A; Success Default
var(--positive--tint-1) - #2CDD9C; Success Highlight
var(--positive--shade-1) - #017C4F; Success Shade
var(--warning) - #E3BC85; Warning Default
var(--warning--tint-1) - #F4D3A5; Warning Highlight
var(--warning--shade-1) - #C19049; Warning Shade
var(--negative) - #C42B35; Negative Default
var(--negative--tint-1) - #E9626B; Negative Highlight
var(--negative--shade-1) - #A1141D; Negative Shade
Styleguide 0.Brand Color Variables.Success / Warning / Negative
*/
/*
Borders
Typically you would set borders within targeted classes for specific UI, however we do have some basic border classes availale for use directly in html elements.
Markup:
.img--max-md - base max height
Style guide: Common.Images.1 Standard Images
*/
/*
Background Images
Background Image Class Modifier can be combined with additional modifiers to give some basic control.
Markup:
.img--min-sm - base min height small
.img--min-md - base min height medium
.img--min-lg - base min height large
.img--min-xl - base min height extra large
.img--min-md.img--bg-center - Position center
Style guide: Common.Images.2 Background Images
*/
.img {
width:100%;
max-width: 100%;
height: auto;
}
.img--bg {
position: relative;
background-size:cover!important;
background-repeat: no-repeat!important;
-o-object-fit: cover !important;
object-fit: cover !important;
background-position:center!important;
/* overflow: hidden; */
}
.img--bg-contain {
position: relative;
background-size: contain;
width: 100%;
height: 100%;
background-repeat: no-repeat;
}
.img--bg-center {
background-position:center;
}
.img--underlay {
position: relative
}
.img--underlay::before {
display: block;
content: "";
position: absolute;
background: rgba(44, 53, 92, 0.5);
top:0;
right:0;
bottom:0;
left:0;
}
.img--underlay .jumbo__content {
position: relative;
}
.img-h-s {
height: 12px;
height: 0.75rem;
width: auto;
}
.img-h-r {
height: 16px;
height: 1rem;
width: auto;
}
.img-h-h1 {
height: 48px;
height: 3rem;
width: auto;
}
.img-h-h2 {
height: 40px;
height: 2.5rem;
width: auto;
}
.img-h-h3 {
height: 32px;
height: 2rem;
width: auto;
}
.img-h-h4 {
height: 24px;
height: 1.5rem;
width: auto;
}
.img-h-h5 {
height: 20px;
height: 1.25rem;
width: auto;
}
.img--underlay-t-b::before {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.3)), to(transparent));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), transparent);
}
.img--underlay-l-r::before {
background-image: -webkit-gradient(linear, left top, right top, from(rgba(205, 207, 211, 0.3)), to(transparent));
background-image: linear-gradient(to right, rgba(205, 207, 211, 0.3), transparent);
}
.img--underlay-b-t::before {
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(205, 207, 211, 0.3)), to(transparent));
background-image: linear-gradient(to top, rgba(205, 207, 211, 0.3), transparent);
}
.img--min-xs {
min-height:72px;
min-height:4.5rem;
}
.img--min-sm {
min-height:128px;
min-height:8rem;
}
.img--min-md {
min-height:256px;
min-height:16rem;
}
.img--min-lg {
min-height:384px;
min-height:24rem;
}
.img--min-xl {
min-height:512px;
min-height:32rem;
}
.img--min-xxl {
min-height:640px;
min-height:40rem;
}
.img--min-xxxl {
min-height:720px;
min-height:45rem;
}
.img--min-full {
min-height:100vh;
}
.img--max-xs {
max-height:72px;
max-height:4.5rem;
}
.img--max-sm {
max-height:128px;
max-height:8rem;
}
.img--max-md {
max-height:256px;
max-height:16rem;
}
.img-max-lg {
max-height:384px;
max-height:24rem;
}
.img-max-xl {
max-height:512px;
max-height:32rem;
}
.img-max-xxl {
max-height:640px;
max-height:40rem;
}
.img-max-xxxl {
max-height:720px;
max-height:45rem;
}
.img-max-full {
max-height:100vh;
}
/*
Ribbon
Usually used over an image
**Note** We must include a child tag inside of the ribbon class. This allows the ribbon to size based on the content.
Markup:
.breadcrumbs--dash - Displays a dash instead of the default slash
.breadcrumbs--chevron - Displays a chevron instead of the default slash
.breadcrumbs--comma - Displays a comma instead of the default slash
Style guide: Common.Breadcrumbs
*/
.breadcrumbs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.breadcrumbs > * {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.breadcrumbs > *:not(:last-of-type):after {
content:"/";
padding:0 4px;
}
.breadcrumbs--chevron > *:not(:last-of-type):after {/*content:" > "*/
font-family: 'zikomo' !important;
content: "\e906";
}
.breadcrumbs--dash > *:not(:last-of-type):after {
content: "-";
}
.breadcrumbs--comma > *:not(:last-of-type):after {
content: ",";
}
.nav-links a {
display: block;
}
.tabs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap:nowrap;
flex-wrap:nowrap;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.tabs > a, .tabs button, .tabs a:active {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background: transparent;
border-color: transparent;
border-bottom: 8px solid rgb(244, 245, 249);
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-decoration: none;
padding: 8px;
padding: 0.5rem;
}
@media (min-width: 48.0625rem) {
.tabs > a, .tabs button, .tabs a:active {
padding: 16px;
padding: 1rem;
}
}
@media (min-width: 61.9375rem) {
.tabs > a, .tabs button, .tabs a:active {
padding: 24px;
padding: 1.5rem;
}
}
@media (min-width: 86.3125rem) {
.tabs > a, .tabs button, .tabs a:active {
padding: 32px;
padding: 2rem;
}
}
.tabs > a, .tabs button, .tabs a:active {
-webkit-transition: 0.3s;
transition: 0.3s;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
color: rgb(44, 53, 92);
white-space: nowrap;
}
.tabs > a.active, .tabs > a.activetab, .tabs button.active, .tabs button.activetab, .tabs a:active.active, .tabs a:active.activetab {
border-bottom-color: #4A5899;
color: #4A5899;
}
.date-box{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 8px;
border: 1px solid rgb(244, 245, 249);
border-radius: 4px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
white-space: nowrap;
text-align: center;
line-height: 1.1;
background-color: rgb(247, 248, 251);
min-width: 72px;
}
/*
Drop Shadows
Simple drop shadows.
Style guide: Common.Drop Shadows
*/
/*
Box Shadows (Dark)
For quick box shadows we can use.
Note: shadow color is defined in the barnd's color variables file. Like the greyscales, this should be derivative of the darkest brand color, adjusted with a very low saturation, so that it's almost grey, but ratains a very slight hint of the brand color.
Markup:
Box Shadow
.bs-dark-sm - Small
.bs-dark-md - Medium
.bs-dark-lg - Large
.bs-dark-xl - Xtra Large
Style guide: Common.Shadows.Box Shadows (Dark)
*/
/*
Box Shadows (Medium)
For quick box shadows we can use.
Note: shadow color is defined in the barnd's color variables file. Like the greyscales, this should be derivative of the darkest brand color, adjusted with a very low saturation, so that it's almost grey, but ratains a very slight hint of the brand color.
Markup:
Box Shadow
.bs-medium-sm - Small
.bs-medium-md - Medium
.bs-medium-lg - Large
.bs-medium-xl - Xtra Large
Style guide: Common.Shadows.Box Shadows (Medium)
*/
.bs-dark {
-webkit-box-shadow: 0px 0.25rem 0.25rem 0px rgba(44, 53, 92, 0.5);
box-shadow: 0px 0.25rem 0.25rem 0px rgba(44, 53, 92, 0.5);
}
.bs-dark-sm {
-webkit-box-shadow: 0px 0.5rem 0.5rem 0px rgba(44, 53, 92, 0.5);
box-shadow: 0px 0.5rem 0.5rem 0px rgba(44, 53, 92, 0.5);
}
.bs-dark-md {
-webkit-box-shadow: 0px 1rem 1rem 0px rgba(44, 53, 92, 0.5);
box-shadow: 0px 1rem 1rem 0px rgba(44, 53, 92, 0.5);
}
.bs-dark-lg {
-webkit-box-shadow: 0px 2rem 2rem 0px rgba(44, 53, 92, 0.5);
box-shadow: 0px 2rem 2rem 0px rgba(44, 53, 92, 0.5);
}
.bs-dark-xl {
-webkit-box-shadow: 0px 3rem 3rem 0px rgba(44, 53, 92, 0.5);
box-shadow: 0px 3rem 3rem 0px rgba(44, 53, 92, 0.5);
}
.bs-medium {
-webkit-box-shadow: 0px 0.25rem 0.25rem 0px rgba(44, 53, 92, 0.15);
box-shadow: 0px 0.25rem 0.25rem 0px rgba(44, 53, 92, 0.15);
}
.bs-medium-sm {
-webkit-box-shadow: 0px 0.5rem 0.5rem 0px rgba(44, 53, 92, 0.15);
box-shadow: 0px 0.5rem 0.5rem 0px rgba(44, 53, 92, 0.15);
}
.bs-medium-md {
-webkit-box-shadow: 0px 1rem 1rem 0px rgba(44, 53, 92, 0.15);
box-shadow: 0px 1rem 1rem 0px rgba(44, 53, 92, 0.15);
}
.bs-medium-lg {
-webkit-box-shadow: 0px 2rem 2rem 0px rgba(44, 53, 92, 0.15);
box-shadow: 0px 2rem 2rem 0px rgba(44, 53, 92, 0.15);
}
.bs-medium-xl {
-webkit-box-shadow: 0px 3rem 3rem 0px rgba(44, 53, 92, 0.15);
box-shadow: 0px 3rem 3rem 0px rgba(44, 53, 92, 0.15);
}
.bs-b-dark-sm {
-webkit-box-shadow: 0px 0.5rem 0.5rem -0.5rem rgba(44, 53, 92, 0.5);
box-shadow: 0px 0.5rem 0.5rem -0.5rem rgba(44, 53, 92, 0.5);
}
/*
Text Shadows
For quick text shadows we can use.
Note: shadow color is defined in the barnd's color variables file. Like the greyscales, this should be derivative of the darkest brand color, adjusted with a very low saturation, so that it's almost grey, but ratains a very slight hint of the brand color.
Markup:
Text Shadow
.ts-dark-sm - Small
.ts-dark-md - Medium
.ts-dark-lg - Large
Style guide: Common.Shadows.Text Shadows
*/
.ts-dark {
text-shadow: 0 2.4px 2.4px rgba(44, 53, 92, 0.5);
text-shadow: 0 0.15rem 0.15rem rgba(44, 53, 92, 0.5);
}
.ts-dark-sm {
text-shadow: 0 4px 4px rgba(44, 53, 92, 0.5);
text-shadow: 0 0.25rem 0.25rem rgba(44, 53, 92, 0.5);
}
.ts-dark-md {
text-shadow: 0 8px 8px rgba(44, 53, 92, 0.5);
text-shadow: 0 0.5rem 0.5rem rgba(44, 53, 92, 0.5);
}
.ts-dark-lg {
text-shadow: 0 12px 12px rgba(44, 53, 92, 0.5);
text-shadow: 0 0.75rem 0.75rem rgba(44, 53, 92, 0.5);
}
/*
Hovers
Our base css-grid layout for responsive design.
12-column grid and be used as a layout skeleton for an entire page, or within / combined with other elements for finer content control.
Combining column classes inside the grid container allows us to control the column's span based on pre-determined breakpoints as seup in the mixins file.
If we do not denote a column class, the grid default to a column span of 1.
Markup:
.route--positive - Sets the indicator arrow to the positive color. Use case might be to indicate a **direct** route
.route--negative - Sets the indicator arrow to the negative color. Use case might be to indicate an **indirect** route
.route--boxed - Sets the indicator arrow to the negative color. Use case might be to indicate an **indirect** route
Style guide: Travel.Route
*/
.route {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
min-width: 100%;
}
.route__ab {
padding:@mixin pad;
}
.route__indicator {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
display: flex;
position: relative;
}
.route__arrow {
height: 8px;
height: 0.5rem;
background: #4A5899;
width:100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
position: relative;
margin: 4px 0;
margin: .25rem 0
/* margin: 0 42px 0 42px; */
}
.route__arrow::after {
position: absolute;
font-family: 'zikomo' !important;
content:"\e906";
color: #4A5899;
display: block;
right:-8px;
right:-0.5rem;
top:50%;
font-size: 24px;
font-size: 1.5rem;
line-height:32px;
line-height:2rem;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.route--positive .route__arrow {
background: #1B998B;
}
.route--positive .route__arrow::after {
color: #1B998B;
}
.route--negative .route__arrow {
background: #9E2A2B;
}
.route--negative .route__arrow::after {
color: #9E2A2B;
}
.route--boxed .route__ab {
background-color: rgb(247, 248, 251);
}
/*widgets*/
.app-header img {
width:100%;
max-width: 100%;
height: auto;
max-height:60px;
-webkit-transition: .3s;
transition: .3s;
}
/*default setting is for smaller mobile */
.drawer__header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 16px;
padding: 1rem;
border-bottom: 1px solid rgb(244, 245, 249);
}
@media (min-width: 30.0625rem) {
.drawer--until-sm {
position: static;
-webkit-transform:none;
transform:none;
z-index: 0;
}
.drawer--until-sm .drawer__header {
display:none;
visibility: hidden;
}
}
@media (min-width: 48.0625rem) {
.drawer--until-md {
position: static;
-webkit-transform:none;
transform:none;
z-index: 0;
}
.drawer--until-md .drawer__header {
display:none;
visibility: hidden;
}
}
@media (max-width: 61.875rem) {
.drawer--until-lg {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-transition: 0.15s;
transition: 0.15s;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
background-color: white;
border-radius: 0;
}
}
@media (min-width: 61.9375rem) {
.drawer--until-lg {
position: static!important;
-webkit-transform:none!important;
transform:none!important;
z-index: 0!important;
-webkit-box-shadow: none!important;
box-shadow: none!important;
}
.drawer--until-lg .drawer__header {
display:none;
visibility: hidden;
}
.drawer--until-lg .drawer__footer {
display:none;
visibility: hidden;
}
}
@media (min-width: 86.3125rem) {
.drawer--until-xl {
position: static;
-webkit-transform:none;
transform:none;
z-index: 0;
}
.drawer--until-xl .drawer__header {
display:none;
visibility: hidden;
}
.drawer--until-xl .drawer__footer {
display:none;
visibility: hidden;
}
}
.drawer__body {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.drawer--sm {
max-width: 481px;
max-width: 30.0625rem;
}
.drawer--md {
max-width: 769px;
max-width: 48.0625rem;
}
.drawer--lg {
max-width: 991px;
max-width: 61.9375rem;
}
.drawer--open {
background: white;
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-box-shadow: 1rem 0 1rem rgba(0, 0, 0, 0.2);
box-shadow: 1rem 0 1rem rgba(0, 0, 0, 0.2);
z-index: 998;
overflow: hidden;
}
.drawer--open .drawer__body {
padding: 16px;
padding: 1rem;
overflow: hidden;
overflow-y: auto;
}
.drawer--right {
left: auto;
right: 0;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.drawer--right.drawer--open {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.mobile-nav a {
display: block;
width: 100%;
border-bottom: 1px solid rgb(245, 247, 250);
padding: 16px;
color: #4A5899;
}
usp-item {
max-width: 280px;
min-width:280px;
min-height: 100%
}
usp-item img, usp-item .icon {
}
usp-title {
}
usp-description {
}
/*
Calendars
Basic ui skeleton for calendars.
Weight: 5
Style guide: Calendars
*/
/*
Basic Calendar
Typically used for either a date picker or basic price calendar.
The basic calendar allows us to style the calendar in a variety of ways by adding buttons, links or whatever elements we want in the list elements.
In the following example we just use a button class to determine the current day, which we would apply programatically.
Markup:
Su
Mo
Tu
We
Th
Fr
Sa
.calendar--no-gap - no gap between li
.calendar--btn-circle - circled days
Style guide: Calendars.Basic
*/
/*
Basic Prices Calendar
Still using the basic calendar class we can display as a price calendar with options to highlight the best price etc.
Markup:
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
2
Lorem ipsum dolor
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
3
Lorem ipsum dolor
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
