bea-ui
Version:
React component library
2,122 lines (1,896 loc) • 139 kB
CSS
body, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, dl, dd, ol, ul, form, fieldset, legend,
figure, table, th, td, caption, hr {
margin: 0;
padding: 0; }
h1, h2, h3 {
font-weight: inherit; }
body {
font-weight: normal; }
/**
* Styleguide styles
*
* Provides page Orb css (i.e. font resets) to allow consistent overrides
* to when it's used on a BBC page
*
* TODO: Integrate ORB into styleguide
*/
body {
font-size: 62.5%;
font-family: Arial,Helvetica,freesans,sans-serif;
line-height: 1; }
.b-g-p, .b-r .b-g-p {
padding: 0 8px; }
.b-g-m, .b-r .b-g-m {
margin: 0 8px; }
@media screen and (min-width: 400px) {
.b-g-p, .b-r .b-g-p {
padding: 0 16px; }
.b-g-m, .b-r .b-g-m {
margin: 0 16px; } }
@media screen and (min-width: 1008px) {
.b-g-p, .b-r .b-g-p {
padding: 0 16px; }
.b-g-m, .b-g-p, .b-r .b-g-m, .b-r .b-g-p {
max-width: 976px;
margin: 0 auto; } }
@media screen and (min-width: 1280px) {
.b-pw-1280 .b-g-m, .b-pw-1280 .b-g-p, .b-pw-1280 .b-r .b-g-m, .b-pw-1280 .b-r .b-g-p {
max-width: 1248px; } }
/*------------------------------------* # GRANDSTAND
\*------------------------------------*/
/*------------------------------------* # SCRIPT-SPECIFIC OVERRIDES
\*------------------------------------*/
/* Lines */
/* Links */
/* Text */
.gel-canon {
font-size: 28px;
font-size: 1.75rem;
line-height: 32px;
line-height: 2rem; }
@media (min-width: 20em) {
.gel-canon {
font-size: 32px;
font-size: 2rem;
line-height: 36px;
line-height: 2.25rem; } }
@media (min-width: 37.5em) {
.gel-canon {
font-size: 52px;
font-size: 3.25rem;
line-height: 56px;
line-height: 3.5rem; }
.no-touch .gel-canon {
font-size: 44px;
font-size: 2.75rem;
line-height: 48px;
line-height: 3rem; } }
.gel-canon-bold {
font-size: 28px;
font-size: 1.75rem;
line-height: 32px;
line-height: 2rem;
font-weight: bold;
letter-spacing: -1px;
letter-spacing: -0.0625rem; }
@media (min-width: 20em) {
.gel-canon-bold {
font-size: 32px;
font-size: 2rem;
line-height: 36px;
line-height: 2.25rem; } }
@media (min-width: 37.5em) {
.gel-canon-bold {
font-size: 52px;
font-size: 3.25rem;
line-height: 56px;
line-height: 3.5rem; }
.no-touch .gel-canon-bold {
font-size: 44px;
font-size: 2.75rem;
line-height: 48px;
line-height: 3rem; } }
.gel-trafalgar {
font-size: 20px;
font-size: 1.25rem;
line-height: 24px;
line-height: 1.5rem; }
@media (min-width: 20em) {
.gel-trafalgar {
font-size: 24px;
font-size: 1.5rem;
line-height: 28px;
line-height: 1.75rem; } }
@media (min-width: 37.5em) {
.gel-trafalgar {
font-size: 36px;
font-size: 2.25rem;
line-height: 40px;
line-height: 2.5rem; }
.no-touch .gel-trafalgar {
font-size: 32px;
font-size: 2rem;
line-height: 36px;
line-height: 2.25rem; } }
.gel-trafalgar-bold {
font-size: 20px;
font-size: 1.25rem;
line-height: 24px;
line-height: 1.5rem;
font-weight: bold;
letter-spacing: -1px;
letter-spacing: -0.0625rem; }
@media (min-width: 20em) {
.gel-trafalgar-bold {
font-size: 24px;
font-size: 1.5rem;
line-height: 28px;
line-height: 1.75rem; } }
@media (min-width: 37.5em) {
.gel-trafalgar-bold {
font-size: 36px;
font-size: 2.25rem;
line-height: 40px;
line-height: 2.5rem; }
.no-touch .gel-trafalgar-bold {
font-size: 32px;
font-size: 2rem;
line-height: 36px;
line-height: 2.25rem; } }
.gel-paragon {
font-size: 20px;
font-size: 1.25rem;
line-height: 24px;
line-height: 1.5rem; }
@media (min-width: 20em) {
.gel-paragon {
font-size: 22px;
font-size: 1.375rem;
line-height: 26px;
line-height: 1.625rem; } }
@media (min-width: 37.5em) {
.gel-paragon {
font-size: 30px;
font-size: 1.875rem;
line-height: 34px;
line-height: 2.125rem; }
.no-touch .gel-paragon {
font-size: 28px;
font-size: 1.75rem;
line-height: 32px;
line-height: 2rem; } }
.gel-paragon-bold {
font-size: 20px;
font-size: 1.25rem;
line-height: 24px;
line-height: 1.5rem;
font-weight: bold;
letter-spacing: -1px;
letter-spacing: -0.0625rem; }
@media (min-width: 20em) {
.gel-paragon-bold {
font-size: 22px;
font-size: 1.375rem;
line-height: 26px;
line-height: 1.625rem; } }
@media (min-width: 37.5em) {
.gel-paragon-bold {
font-size: 30px;
font-size: 1.875rem;
line-height: 34px;
line-height: 2.125rem; }
.no-touch .gel-paragon-bold {
font-size: 28px;
font-size: 1.75rem;
line-height: 32px;
line-height: 2rem; } }
.gel-double-pica {
font-size: 20px;
font-size: 1.25rem;
line-height: 24px;
line-height: 1.5rem; }
@media (min-width: 37.5em) {
.gel-double-pica {
font-size: 26px;
font-size: 1.625rem;
line-height: 30px;
line-height: 1.875rem; }
.no-touch .gel-double-pica {
font-size: 24px;
font-size: 1.5rem;
line-height: 28px;
line-height: 1.75rem; } }
.gel-double-pica-bold {
font-size: 20px;
font-size: 1.25rem;
line-height: 24px;
line-height: 1.5rem;
font-weight: bold;
letter-spacing: -1px;
letter-spacing: -0.0625rem; }
@media (min-width: 37.5em) {
.gel-double-pica-bold {
font-size: 26px;
font-size: 1.625rem;
line-height: 30px;
line-height: 1.875rem; }
.no-touch .gel-double-pica-bold {
font-size: 24px;
font-size: 1.5rem;
line-height: 28px;
line-height: 1.75rem; } }
.gel-great-primer {
font-size: 18px;
font-size: 1.125rem;
line-height: 22px;
line-height: 1.375rem; }
@media (min-width: 37.5em) {
.gel-great-primer {
font-size: 21px;
font-size: 1.3125rem;
line-height: 24px;
line-height: 1.5rem; }
.no-touch .gel-great-primer {
font-size: 20px;
font-size: 1.25rem; } }
.gel-great-primer-bold {
font-size: 18px;
font-size: 1.125rem;
line-height: 22px;
line-height: 1.375rem;
font-weight: bold; }
@media (min-width: 20em) {
.gel-great-primer-bold {
letter-spacing: -1px;
letter-spacing: -0.0625rem; } }
@media (min-width: 37.5em) {
.gel-great-primer-bold {
font-size: 21px;
font-size: 1.3125rem;
line-height: 24px;
line-height: 1.5rem; }
.no-touch .gel-great-primer-bold {
font-size: 20px;
font-size: 1.25rem; } }
.gel-pica {
font-size: 15px;
font-size: 0.9375rem;
line-height: 20px;
line-height: 1.25rem; }
@media (min-width: 20em) {
.gel-pica {
font-size: 16px;
font-size: 1rem;
line-height: 20px;
line-height: 1.25rem; } }
@media (min-width: 37.5em) {
.gel-pica {
font-size: 18px;
font-size: 1.125rem;
line-height: 22px;
line-height: 1.375rem; }
.no-touch .gel-pica {
font-size: 16px;
font-size: 1rem;
line-height: 20px;
line-height: 1.25rem; } }
.gel-pica-bold {
font-size: 15px;
font-size: 0.9375rem;
line-height: 20px;
line-height: 1.25rem;
font-weight: bold; }
@media (min-width: 20em) {
.gel-pica-bold {
font-size: 16px;
font-size: 1rem;
line-height: 20px;
line-height: 1.25rem; } }
@media (min-width: 37.5em) {
.gel-pica-bold {
font-size: 18px;
font-size: 1.125rem;
line-height: 22px;
line-height: 1.375rem; }
.no-touch .gel-pica-bold {
font-size: 16px;
font-size: 1rem;
line-height: 20px;
line-height: 1.25rem; } }
.gel-long-primer {
font-size: 15px;
font-size: 0.9375rem;
line-height: 18px;
line-height: 1.125rem; }
@media (min-width: 37.5em) {
.gel-long-primer {
line-height: 20px;
line-height: 1.25rem; }
.no-touch .gel-long-primer {
font-size: 14px;
font-size: 0.875rem;
line-height: 18px;
line-height: 1.125rem; } }
.gel-long-primer-bold {
font-size: 15px;
font-size: 0.9375rem;
line-height: 18px;
line-height: 1.125rem;
font-weight: bold; }
@media (min-width: 37.5em) {
.gel-long-primer-bold {
line-height: 20px;
line-height: 1.25rem; }
.no-touch .gel-long-primer-bold {
font-size: 14px;
font-size: 0.875rem;
line-height: 18px;
line-height: 1.125rem; } }
.gel-brevier {
font-size: 14px;
font-size: 0.875rem;
line-height: 16px;
line-height: 1rem; }
@media (min-width: 20em) {
.gel-brevier {
line-height: 18px;
line-height: 1.125rem; } }
@media (min-width: 37.5em) {
.no-touch .gel-brevier {
font-size: 13px;
font-size: 0.8125rem;
line-height: 16px;
line-height: 1rem; } }
.gel-brevier-bold {
font-size: 14px;
font-size: 0.875rem;
line-height: 16px;
line-height: 1rem;
font-weight: bold; }
@media (min-width: 20em) {
.gel-brevier-bold {
line-height: 18px;
line-height: 1.125rem; } }
@media (min-width: 37.5em) {
.no-touch .gel-brevier-bold {
font-size: 13px;
font-size: 0.8125rem;
line-height: 16px;
line-height: 1rem; } }
.gel-minion {
font-size: 12px;
font-size: 0.75rem;
line-height: 16px;
line-height: 1rem;
text-transform: uppercase; }
@media (min-width: 37.5em) {
.gel-minion {
font-size: 13px;
font-size: 0.8125rem; }
.no-touch .gel-minion {
font-size: 12px;
font-size: 0.75rem; } }
.gel-minion-bold {
font-size: 12px;
font-size: 0.75rem;
line-height: 16px;
line-height: 1rem;
text-transform: uppercase;
font-weight: bold; }
@media (min-width: 37.5em) {
.gel-minion-bold {
font-size: 13px;
font-size: 0.8125rem; }
.no-touch .gel-minion-bold {
font-size: 12px;
font-size: 0.75rem; } }
.gel-body-copy {
font-size: 15px;
font-size: 0.9375rem;
line-height: 20px;
line-height: 1.25rem; }
@media (min-width: 20em) {
.gel-body-copy {
font-size: 16px;
font-size: 1rem;
line-height: 22px;
line-height: 1.375rem; } }
@media (min-width: 37.5em) {
.gel-body-copy {
font-size: 18px;
font-size: 1.125rem;
line-height: 24px;
line-height: 1.5rem; }
.no-touch .gel-body-copy {
font-size: 16px;
font-size: 1rem;
line-height: 22px;
line-height: 1.375rem; } }
body {
font-family: Helvetica, Arial, freesans, sans-serif; }
/* autoprefixer: off */
/**
* Grid containing element
*/
.gel-wrap {
max-width: 1008px;
margin: 0 auto;
padding-right: 8px;
padding-left: 8px; }
@media (min-width: 25em) {
.gel-wrap {
padding-left: 16px;
padding-right: 16px; } }
@media (min-width: 80em) {
.b-pw-1280 .gel-wrap {
max-width: 1280px; } }
/**
* A grid row
*/
.gel-layout {
list-style: none;
direction: ltr;
text-align: left;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-flex-grow: 1;
-ms-flex-grow: 1;
flex-grow: 1;
margin-right: 0;
margin-left: -8px;
padding-right: 0;
padding-left: 0; }
@media (min-width: 37.5em) {
.gel-layout {
margin-left: -16px; } }
/**
* A single grid item
*/
.gel-layout__item {
width: 100%;
display: inline-block;
padding-left: 8px;
text-align: left;
vertical-align: top; }
@media (min-width: 37.5em) {
.gel-layout__item {
padding-left: 16px; } }
/**
* Layouts with no gutters.
*/
.gel-layout--flush {
margin-left: 0; }
.gel-layout--flush > .gel-layout__item {
padding-left: 0; }
/**
* Reversed rendered order of layout items, e.g. items 1, 2, 3, 4 in your
* markup will display in order 4, 3, 2, 1 on your page
*/
.gel-layout--rev {
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse; }
.no-flexbox .gel-layout--rev {
direction: rtl;
text-align: left; }
.no-flexbox .gel-layout--rev > .gel-layout__item {
direction: ltr;
text-align: left; }
/**
* Align layout items to the vertical centers of each other
*/
.gel-layout--middle {
-webkit-align-items: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center; }
.gel-layout--middle > .gel-layout__item {
vertical-align: middle; }
/**
* Align layout items to the vertical bottoms of each other
*/
.gel-layout--bottom {
-webkit-align-items: flex-end;
-ms-flex-align: end;
-ms-grid-row-align: flex-end;
align-items: flex-end; }
.gel-layout--bottom > .gel-layout__item {
vertical-align: bottom; }
/**
* Make the layout items fill up from the right hand side
*/
.gel-layout--right {
text-align: right;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end; }
.gel-layout--right > .gel-layout__item {
text-align: left; }
/**
* Make the layout items fill up from the center outward
*/
.gel-layout--center {
text-align: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center; }
.gel-layout--center > .gel-layout__item {
text-align: left; }
/**
* Cause layout items to take up a non-explicit amount of width
*/
.gel-layout--auto > .gel-layout__item {
width: auto; }
/**
* Disable the flexbox grid
*
* 1. Prevents floated layout items from shrinking the layout
*/
.gel-layout--no-flex {
min-width: 100%; }
.gel-layout--no-flex,
.gel-layout--no-flex > .gel-layout__item {
display: block;
display: inline-block; }
/**
* Force items to be of equal height
*/
.gel-layout--equal > .gel-layout__item {
display: -webkit-flex;
display: flex; }
/**
* Allow items to devide the space equally between the number of items
*/
.gel-layout--fit > .gel-layout__item {
width: auto;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto; }
/**
* Align a single grid item to the top
*/
.gel-layout__item--top {
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start; }
/**
* Align a single grid item to the center
*/
.gel-layout__item--center {
-webkit-align-self: center;
-ms-flex-item-align: center;
align-self: center; }
/**
* Align a single grid item to the bottom
*/
.gel-layout__item--bottom {
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end; }
.gel-1\/1 {
width: 100% !important; }
.gel-1\/2 {
width: 50% !important; }
.gel-1\/3 {
width: 33.3333333333% !important; }
.gel-2\/3 {
width: 66.6666666667% !important; }
.gel-1\/4 {
width: 25% !important; }
.gel-2\/4 {
width: 50% !important; }
.gel-3\/4 {
width: 75% !important; }
.gel-1\/5 {
width: 20% !important; }
.gel-2\/5 {
width: 40% !important; }
.gel-3\/5 {
width: 60% !important; }
.gel-4\/5 {
width: 80% !important; }
.gel-1\/8 {
width: 12.5% !important; }
.gel-2\/8 {
width: 25% !important; }
.gel-3\/8 {
width: 37.5% !important; }
.gel-4\/8 {
width: 50% !important; }
.gel-5\/8 {
width: 62.5% !important; }
.gel-6\/8 {
width: 75% !important; }
.gel-7\/8 {
width: 87.5% !important; }
.gel-1\/10 {
width: 10% !important; }
.gel-2\/10 {
width: 20% !important; }
.gel-3\/10 {
width: 30% !important; }
.gel-4\/10 {
width: 40% !important; }
.gel-5\/10 {
width: 50% !important; }
.gel-6\/10 {
width: 60% !important; }
.gel-7\/10 {
width: 70% !important; }
.gel-8\/10 {
width: 80% !important; }
.gel-9\/10 {
width: 90% !important; }
.gel-1\/12 {
width: 8.3333333333% !important; }
.gel-2\/12 {
width: 16.6666666667% !important; }
.gel-3\/12 {
width: 25% !important; }
.gel-4\/12 {
width: 33.3333333333% !important; }
.gel-5\/12 {
width: 41.6666666667% !important; }
.gel-6\/12 {
width: 50% !important; }
.gel-7\/12 {
width: 58.3333333333% !important; }
.gel-8\/12 {
width: 66.6666666667% !important; }
.gel-9\/12 {
width: 75% !important; }
.gel-10\/12 {
width: 83.3333333333% !important; }
.gel-11\/12 {
width: 91.6666666667% !important; }
.gel-1\/24 {
width: 4.1666666667% !important; }
.gel-2\/24 {
width: 8.3333333333% !important; }
.gel-3\/24 {
width: 12.5% !important; }
.gel-4\/24 {
width: 16.6666666667% !important; }
.gel-5\/24 {
width: 20.8333333333% !important; }
.gel-6\/24 {
width: 25% !important; }
.gel-7\/24 {
width: 29.1666666667% !important; }
.gel-8\/24 {
width: 33.3333333333% !important; }
.gel-9\/24 {
width: 37.5% !important; }
.gel-10\/24 {
width: 41.6666666667% !important; }
.gel-11\/24 {
width: 45.8333333333% !important; }
.gel-12\/24 {
width: 50% !important; }
.gel-13\/24 {
width: 54.1666666667% !important; }
.gel-14\/24 {
width: 58.3333333333% !important; }
.gel-15\/24 {
width: 62.5% !important; }
.gel-16\/24 {
width: 66.6666666667% !important; }
.gel-17\/24 {
width: 70.8333333333% !important; }
.gel-18\/24 {
width: 75% !important; }
.gel-19\/24 {
width: 79.1666666667% !important; }
.gel-20\/24 {
width: 83.3333333333% !important; }
.gel-21\/24 {
width: 87.5% !important; }
.gel-22\/24 {
width: 91.6666666667% !important; }
.gel-23\/24 {
width: 95.8333333333% !important; }
@media (min-width: 15em) {
.gel-1\/1\@xs {
width: 100% !important; }
.gel-1\/2\@xs {
width: 50% !important; }
.gel-1\/3\@xs {
width: 33.3333333333% !important; }
.gel-2\/3\@xs {
width: 66.6666666667% !important; }
.gel-1\/4\@xs {
width: 25% !important; }
.gel-2\/4\@xs {
width: 50% !important; }
.gel-3\/4\@xs {
width: 75% !important; }
.gel-1\/5\@xs {
width: 20% !important; }
.gel-2\/5\@xs {
width: 40% !important; }
.gel-3\/5\@xs {
width: 60% !important; }
.gel-4\/5\@xs {
width: 80% !important; }
.gel-1\/8\@xs {
width: 12.5% !important; }
.gel-2\/8\@xs {
width: 25% !important; }
.gel-3\/8\@xs {
width: 37.5% !important; }
.gel-4\/8\@xs {
width: 50% !important; }
.gel-5\/8\@xs {
width: 62.5% !important; }
.gel-6\/8\@xs {
width: 75% !important; }
.gel-7\/8\@xs {
width: 87.5% !important; }
.gel-1\/10\@xs {
width: 10% !important; }
.gel-2\/10\@xs {
width: 20% !important; }
.gel-3\/10\@xs {
width: 30% !important; }
.gel-4\/10\@xs {
width: 40% !important; }
.gel-5\/10\@xs {
width: 50% !important; }
.gel-6\/10\@xs {
width: 60% !important; }
.gel-7\/10\@xs {
width: 70% !important; }
.gel-8\/10\@xs {
width: 80% !important; }
.gel-9\/10\@xs {
width: 90% !important; }
.gel-1\/12\@xs {
width: 8.3333333333% !important; }
.gel-2\/12\@xs {
width: 16.6666666667% !important; }
.gel-3\/12\@xs {
width: 25% !important; }
.gel-4\/12\@xs {
width: 33.3333333333% !important; }
.gel-5\/12\@xs {
width: 41.6666666667% !important; }
.gel-6\/12\@xs {
width: 50% !important; }
.gel-7\/12\@xs {
width: 58.3333333333% !important; }
.gel-8\/12\@xs {
width: 66.6666666667% !important; }
.gel-9\/12\@xs {
width: 75% !important; }
.gel-10\/12\@xs {
width: 83.3333333333% !important; }
.gel-11\/12\@xs {
width: 91.6666666667% !important; }
.gel-1\/24\@xs {
width: 4.1666666667% !important; }
.gel-2\/24\@xs {
width: 8.3333333333% !important; }
.gel-3\/24\@xs {
width: 12.5% !important; }
.gel-4\/24\@xs {
width: 16.6666666667% !important; }
.gel-5\/24\@xs {
width: 20.8333333333% !important; }
.gel-6\/24\@xs {
width: 25% !important; }
.gel-7\/24\@xs {
width: 29.1666666667% !important; }
.gel-8\/24\@xs {
width: 33.3333333333% !important; }
.gel-9\/24\@xs {
width: 37.5% !important; }
.gel-10\/24\@xs {
width: 41.6666666667% !important; }
.gel-11\/24\@xs {
width: 45.8333333333% !important; }
.gel-12\/24\@xs {
width: 50% !important; }
.gel-13\/24\@xs {
width: 54.1666666667% !important; }
.gel-14\/24\@xs {
width: 58.3333333333% !important; }
.gel-15\/24\@xs {
width: 62.5% !important; }
.gel-16\/24\@xs {
width: 66.6666666667% !important; }
.gel-17\/24\@xs {
width: 70.8333333333% !important; }
.gel-18\/24\@xs {
width: 75% !important; }
.gel-19\/24\@xs {
width: 79.1666666667% !important; }
.gel-20\/24\@xs {
width: 83.3333333333% !important; }
.gel-21\/24\@xs {
width: 87.5% !important; }
.gel-22\/24\@xs {
width: 91.6666666667% !important; }
.gel-23\/24\@xs {
width: 95.8333333333% !important; } }
@media (min-width: 25em) {
.gel-1\/1\@s {
width: 100% !important; }
.gel-1\/2\@s {
width: 50% !important; }
.gel-1\/3\@s {
width: 33.3333333333% !important; }
.gel-2\/3\@s {
width: 66.6666666667% !important; }
.gel-1\/4\@s {
width: 25% !important; }
.gel-2\/4\@s {
width: 50% !important; }
.gel-3\/4\@s {
width: 75% !important; }
.gel-1\/5\@s {
width: 20% !important; }
.gel-2\/5\@s {
width: 40% !important; }
.gel-3\/5\@s {
width: 60% !important; }
.gel-4\/5\@s {
width: 80% !important; }
.gel-1\/8\@s {
width: 12.5% !important; }
.gel-2\/8\@s {
width: 25% !important; }
.gel-3\/8\@s {
width: 37.5% !important; }
.gel-4\/8\@s {
width: 50% !important; }
.gel-5\/8\@s {
width: 62.5% !important; }
.gel-6\/8\@s {
width: 75% !important; }
.gel-7\/8\@s {
width: 87.5% !important; }
.gel-1\/10\@s {
width: 10% !important; }
.gel-2\/10\@s {
width: 20% !important; }
.gel-3\/10\@s {
width: 30% !important; }
.gel-4\/10\@s {
width: 40% !important; }
.gel-5\/10\@s {
width: 50% !important; }
.gel-6\/10\@s {
width: 60% !important; }
.gel-7\/10\@s {
width: 70% !important; }
.gel-8\/10\@s {
width: 80% !important; }
.gel-9\/10\@s {
width: 90% !important; }
.gel-1\/12\@s {
width: 8.3333333333% !important; }
.gel-2\/12\@s {
width: 16.6666666667% !important; }
.gel-3\/12\@s {
width: 25% !important; }
.gel-4\/12\@s {
width: 33.3333333333% !important; }
.gel-5\/12\@s {
width: 41.6666666667% !important; }
.gel-6\/12\@s {
width: 50% !important; }
.gel-7\/12\@s {
width: 58.3333333333% !important; }
.gel-8\/12\@s {
width: 66.6666666667% !important; }
.gel-9\/12\@s {
width: 75% !important; }
.gel-10\/12\@s {
width: 83.3333333333% !important; }
.gel-11\/12\@s {
width: 91.6666666667% !important; }
.gel-1\/24\@s {
width: 4.1666666667% !important; }
.gel-2\/24\@s {
width: 8.3333333333% !important; }
.gel-3\/24\@s {
width: 12.5% !important; }
.gel-4\/24\@s {
width: 16.6666666667% !important; }
.gel-5\/24\@s {
width: 20.8333333333% !important; }
.gel-6\/24\@s {
width: 25% !important; }
.gel-7\/24\@s {
width: 29.1666666667% !important; }
.gel-8\/24\@s {
width: 33.3333333333% !important; }
.gel-9\/24\@s {
width: 37.5% !important; }
.gel-10\/24\@s {
width: 41.6666666667% !important; }
.gel-11\/24\@s {
width: 45.8333333333% !important; }
.gel-12\/24\@s {
width: 50% !important; }
.gel-13\/24\@s {
width: 54.1666666667% !important; }
.gel-14\/24\@s {
width: 58.3333333333% !important; }
.gel-15\/24\@s {
width: 62.5% !important; }
.gel-16\/24\@s {
width: 66.6666666667% !important; }
.gel-17\/24\@s {
width: 70.8333333333% !important; }
.gel-18\/24\@s {
width: 75% !important; }
.gel-19\/24\@s {
width: 79.1666666667% !important; }
.gel-20\/24\@s {
width: 83.3333333333% !important; }
.gel-21\/24\@s {
width: 87.5% !important; }
.gel-22\/24\@s {
width: 91.6666666667% !important; }
.gel-23\/24\@s {
width: 95.8333333333% !important; } }
@media (min-width: 37.5em) {
.gel-1\/1\@m {
width: 100% !important; }
.gel-1\/2\@m {
width: 50% !important; }
.gel-1\/3\@m {
width: 33.3333333333% !important; }
.gel-2\/3\@m {
width: 66.6666666667% !important; }
.gel-1\/4\@m {
width: 25% !important; }
.gel-2\/4\@m {
width: 50% !important; }
.gel-3\/4\@m {
width: 75% !important; }
.gel-1\/5\@m {
width: 20% !important; }
.gel-2\/5\@m {
width: 40% !important; }
.gel-3\/5\@m {
width: 60% !important; }
.gel-4\/5\@m {
width: 80% !important; }
.gel-1\/8\@m {
width: 12.5% !important; }
.gel-2\/8\@m {
width: 25% !important; }
.gel-3\/8\@m {
width: 37.5% !important; }
.gel-4\/8\@m {
width: 50% !important; }
.gel-5\/8\@m {
width: 62.5% !important; }
.gel-6\/8\@m {
width: 75% !important; }
.gel-7\/8\@m {
width: 87.5% !important; }
.gel-1\/10\@m {
width: 10% !important; }
.gel-2\/10\@m {
width: 20% !important; }
.gel-3\/10\@m {
width: 30% !important; }
.gel-4\/10\@m {
width: 40% !important; }
.gel-5\/10\@m {
width: 50% !important; }
.gel-6\/10\@m {
width: 60% !important; }
.gel-7\/10\@m {
width: 70% !important; }
.gel-8\/10\@m {
width: 80% !important; }
.gel-9\/10\@m {
width: 90% !important; }
.gel-1\/12\@m {
width: 8.3333333333% !important; }
.gel-2\/12\@m {
width: 16.6666666667% !important; }
.gel-3\/12\@m {
width: 25% !important; }
.gel-4\/12\@m {
width: 33.3333333333% !important; }
.gel-5\/12\@m {
width: 41.6666666667% !important; }
.gel-6\/12\@m {
width: 50% !important; }
.gel-7\/12\@m {
width: 58.3333333333% !important; }
.gel-8\/12\@m {
width: 66.6666666667% !important; }
.gel-9\/12\@m {
width: 75% !important; }
.gel-10\/12\@m {
width: 83.3333333333% !important; }
.gel-11\/12\@m {
width: 91.6666666667% !important; }
.gel-1\/24\@m {
width: 4.1666666667% !important; }
.gel-2\/24\@m {
width: 8.3333333333% !important; }
.gel-3\/24\@m {
width: 12.5% !important; }
.gel-4\/24\@m {
width: 16.6666666667% !important; }
.gel-5\/24\@m {
width: 20.8333333333% !important; }
.gel-6\/24\@m {
width: 25% !important; }
.gel-7\/24\@m {
width: 29.1666666667% !important; }
.gel-8\/24\@m {
width: 33.3333333333% !important; }
.gel-9\/24\@m {
width: 37.5% !important; }
.gel-10\/24\@m {
width: 41.6666666667% !important; }
.gel-11\/24\@m {
width: 45.8333333333% !important; }
.gel-12\/24\@m {
width: 50% !important; }
.gel-13\/24\@m {
width: 54.1666666667% !important; }
.gel-14\/24\@m {
width: 58.3333333333% !important; }
.gel-15\/24\@m {
width: 62.5% !important; }
.gel-16\/24\@m {
width: 66.6666666667% !important; }
.gel-17\/24\@m {
width: 70.8333333333% !important; }
.gel-18\/24\@m {
width: 75% !important; }
.gel-19\/24\@m {
width: 79.1666666667% !important; }
.gel-20\/24\@m {
width: 83.3333333333% !important; }
.gel-21\/24\@m {
width: 87.5% !important; }
.gel-22\/24\@m {
width: 91.6666666667% !important; }
.gel-23\/24\@m {
width: 95.8333333333% !important; } }
@media (min-width: 56.25em) {
.gel-1\/1\@l {
width: 100% !important; }
.gel-1\/2\@l {
width: 50% !important; }
.gel-1\/3\@l {
width: 33.3333333333% !important; }
.gel-2\/3\@l {
width: 66.6666666667% !important; }
.gel-1\/4\@l {
width: 25% !important; }
.gel-2\/4\@l {
width: 50% !important; }
.gel-3\/4\@l {
width: 75% !important; }
.gel-1\/5\@l {
width: 20% !important; }
.gel-2\/5\@l {
width: 40% !important; }
.gel-3\/5\@l {
width: 60% !important; }
.gel-4\/5\@l {
width: 80% !important; }
.gel-1\/8\@l {
width: 12.5% !important; }
.gel-2\/8\@l {
width: 25% !important; }
.gel-3\/8\@l {
width: 37.5% !important; }
.gel-4\/8\@l {
width: 50% !important; }
.gel-5\/8\@l {
width: 62.5% !important; }
.gel-6\/8\@l {
width: 75% !important; }
.gel-7\/8\@l {
width: 87.5% !important; }
.gel-1\/10\@l {
width: 10% !important; }
.gel-2\/10\@l {
width: 20% !important; }
.gel-3\/10\@l {
width: 30% !important; }
.gel-4\/10\@l {
width: 40% !important; }
.gel-5\/10\@l {
width: 50% !important; }
.gel-6\/10\@l {
width: 60% !important; }
.gel-7\/10\@l {
width: 70% !important; }
.gel-8\/10\@l {
width: 80% !important; }
.gel-9\/10\@l {
width: 90% !important; }
.gel-1\/12\@l {
width: 8.3333333333% !important; }
.gel-2\/12\@l {
width: 16.6666666667% !important; }
.gel-3\/12\@l {
width: 25% !important; }
.gel-4\/12\@l {
width: 33.3333333333% !important; }
.gel-5\/12\@l {
width: 41.6666666667% !important; }
.gel-6\/12\@l {
width: 50% !important; }
.gel-7\/12\@l {
width: 58.3333333333% !important; }
.gel-8\/12\@l {
width: 66.6666666667% !important; }
.gel-9\/12\@l {
width: 75% !important; }
.gel-10\/12\@l {
width: 83.3333333333% !important; }
.gel-11\/12\@l {
width: 91.6666666667% !important; }
.gel-1\/24\@l {
width: 4.1666666667% !important; }
.gel-2\/24\@l {
width: 8.3333333333% !important; }
.gel-3\/24\@l {
width: 12.5% !important; }
.gel-4\/24\@l {
width: 16.6666666667% !important; }
.gel-5\/24\@l {
width: 20.8333333333% !important; }
.gel-6\/24\@l {
width: 25% !important; }
.gel-7\/24\@l {
width: 29.1666666667% !important; }
.gel-8\/24\@l {
width: 33.3333333333% !important; }
.gel-9\/24\@l {
width: 37.5% !important; }
.gel-10\/24\@l {
width: 41.6666666667% !important; }
.gel-11\/24\@l {
width: 45.8333333333% !important; }
.gel-12\/24\@l {
width: 50% !important; }
.gel-13\/24\@l {
width: 54.1666666667% !important; }
.gel-14\/24\@l {
width: 58.3333333333% !important; }
.gel-15\/24\@l {
width: 62.5% !important; }
.gel-16\/24\@l {
width: 66.6666666667% !important; }
.gel-17\/24\@l {
width: 70.8333333333% !important; }
.gel-18\/24\@l {
width: 75% !important; }
.gel-19\/24\@l {
width: 79.1666666667% !important; }
.gel-20\/24\@l {
width: 83.3333333333% !important; }
.gel-21\/24\@l {
width: 87.5% !important; }
.gel-22\/24\@l {
width: 91.6666666667% !important; }
.gel-23\/24\@l {
width: 95.8333333333% !important; } }
@media (min-width: 63em) {
.gel-1\/1\@xl {
width: 100% !important; }
.gel-1\/2\@xl {
width: 50% !important; }
.gel-1\/3\@xl {
width: 33.3333333333% !important; }
.gel-2\/3\@xl {
width: 66.6666666667% !important; }
.gel-1\/4\@xl {
width: 25% !important; }
.gel-2\/4\@xl {
width: 50% !important; }
.gel-3\/4\@xl {
width: 75% !important; }
.gel-1\/5\@xl {
width: 20% !important; }
.gel-2\/5\@xl {
width: 40% !important; }
.gel-3\/5\@xl {
width: 60% !important; }
.gel-4\/5\@xl {
width: 80% !important; }
.gel-1\/8\@xl {
width: 12.5% !important; }
.gel-2\/8\@xl {
width: 25% !important; }
.gel-3\/8\@xl {
width: 37.5% !important; }
.gel-4\/8\@xl {
width: 50% !important; }
.gel-5\/8\@xl {
width: 62.5% !important; }
.gel-6\/8\@xl {
width: 75% !important; }
.gel-7\/8\@xl {
width: 87.5% !important; }
.gel-1\/10\@xl {
width: 10% !important; }
.gel-2\/10\@xl {
width: 20% !important; }
.gel-3\/10\@xl {
width: 30% !important; }
.gel-4\/10\@xl {
width: 40% !important; }
.gel-5\/10\@xl {
width: 50% !important; }
.gel-6\/10\@xl {
width: 60% !important; }
.gel-7\/10\@xl {
width: 70% !important; }
.gel-8\/10\@xl {
width: 80% !important; }
.gel-9\/10\@xl {
width: 90% !important; }
.gel-1\/12\@xl {
width: 8.3333333333% !important; }
.gel-2\/12\@xl {
width: 16.6666666667% !important; }
.gel-3\/12\@xl {
width: 25% !important; }
.gel-4\/12\@xl {
width: 33.3333333333% !important; }
.gel-5\/12\@xl {
width: 41.6666666667% !important; }
.gel-6\/12\@xl {
width: 50% !important; }
.gel-7\/12\@xl {
width: 58.3333333333% !important; }
.gel-8\/12\@xl {
width: 66.6666666667% !important; }
.gel-9\/12\@xl {
width: 75% !important; }
.gel-10\/12\@xl {
width: 83.3333333333% !important; }
.gel-11\/12\@xl {
width: 91.6666666667% !important; }
.gel-1\/24\@xl {
width: 4.1666666667% !important; }
.gel-2\/24\@xl {
width: 8.3333333333% !important; }
.gel-3\/24\@xl {
width: 12.5% !important; }
.gel-4\/24\@xl {
width: 16.6666666667% !important; }
.gel-5\/24\@xl {
width: 20.8333333333% !important; }
.gel-6\/24\@xl {
width: 25% !important; }
.gel-7\/24\@xl {
width: 29.1666666667% !important; }
.gel-8\/24\@xl {
width: 33.3333333333% !important; }
.gel-9\/24\@xl {
width: 37.5% !important; }
.gel-10\/24\@xl {
width: 41.6666666667% !important; }
.gel-11\/24\@xl {
width: 45.8333333333% !important; }
.gel-12\/24\@xl {
width: 50% !important; }
.gel-13\/24\@xl {
width: 54.1666666667% !important; }
.gel-14\/24\@xl {
width: 58.3333333333% !important; }
.gel-15\/24\@xl {
width: 62.5% !important; }
.gel-16\/24\@xl {
width: 66.6666666667% !important; }
.gel-17\/24\@xl {
width: 70.8333333333% !important; }
.gel-18\/24\@xl {
width: 75% !important; }
.gel-19\/24\@xl {
width: 79.1666666667% !important; }
.gel-20\/24\@xl {
width: 83.3333333333% !important; }
.gel-21\/24\@xl {
width: 87.5% !important; }
.gel-22\/24\@xl {
width: 91.6666666667% !important; }
.gel-23\/24\@xl {
width: 95.8333333333% !important; } }
@media (min-width: 80em) {
.b-pw-1280 .gel-1\/1\@xxl {
width: 100% !important; }
.b-pw-1280 .gel-1\/2\@xxl {
width: 50% !important; }
.b-pw-1280 .gel-1\/3\@xxl {
width: 33.3333333333% !important; }
.b-pw-1280 .gel-2\/3\@xxl {
width: 66.6666666667% !important; }
.b-pw-1280 .gel-1\/4\@xxl {
width: 25% !important; }
.b-pw-1280 .gel-2\/4\@xxl {
width: 50% !important; }
.b-pw-1280 .gel-3\/4\@xxl {
width: 75% !important; }
.b-pw-1280 .gel-1\/5\@xxl {
width: 20% !important; }
.b-pw-1280 .gel-2\/5\@xxl {
width: 40% !important; }
.b-pw-1280 .gel-3\/5\@xxl {
width: 60% !important; }
.b-pw-1280 .gel-4\/5\@xxl {
width: 80% !important; }
.b-pw-1280 .gel-1\/8\@xxl {
width: 12.5% !important; }
.b-pw-1280 .gel-2\/8\@xxl {
width: 25% !important; }
.b-pw-1280 .gel-3\/8\@xxl {
width: 37.5% !important; }
.b-pw-1280 .gel-4\/8\@xxl {
width: 50% !important; }
.b-pw-1280 .gel-5\/8\@xxl {
width: 62.5% !important; }
.b-pw-1280 .gel-6\/8\@xxl {
width: 75% !important; }
.b-pw-1280 .gel-7\/8\@xxl {
width: 87.5% !important; }
.b-pw-1280 .gel-1\/10\@xxl {
width: 10% !important; }
.b-pw-1280 .gel-2\/10\@xxl {
width: 20% !important; }
.b-pw-1280 .gel-3\/10\@xxl {
width: 30% !important; }
.b-pw-1280 .gel-4\/10\@xxl {
width: 40% !important; }
.b-pw-1280 .gel-5\/10\@xxl {
width: 50% !important; }
.b-pw-1280 .gel-6\/10\@xxl {
width: 60% !important; }
.b-pw-1280 .gel-7\/10\@xxl {
width: 70% !important; }
.b-pw-1280 .gel-8\/10\@xxl {
width: 80% !important; }
.b-pw-1280 .gel-9\/10\@xxl {
width: 90% !important; }
.b-pw-1280 .gel-1\/12\@xxl {
width: 8.3333333333% !important; }
.b-pw-1280 .gel-2\/12\@xxl {
width: 16.6666666667% !important; }
.b-pw-1280 .gel-3\/12\@xxl {
width: 25% !important; }
.b-pw-1280 .gel-4\/12\@xxl {
width: 33.3333333333% !important; }
.b-pw-1280 .gel-5\/12\@xxl {
width: 41.6666666667% !important; }
.b-pw-1280 .gel-6\/12\@xxl {
width: 50% !important; }
.b-pw-1280 .gel-7\/12\@xxl {
width: 58.3333333333% !important; }
.b-pw-1280 .gel-8\/12\@xxl {
width: 66.6666666667% !important; }
.b-pw-1280 .gel-9\/12\@xxl {
width: 75% !important; }
.b-pw-1280 .gel-10\/12\@xxl {
width: 83.3333333333% !important; }
.b-pw-1280 .gel-11\/12\@xxl {
width: 91.6666666667% !important; }
.b-pw-1280 .gel-1\/24\@xxl {
width: 4.1666666667% !important; }
.b-pw-1280 .gel-2\/24\@xxl {
width: 8.3333333333% !important; }
.b-pw-1280 .gel-3\/24\@xxl {
width: 12.5% !important; }
.b-pw-1280 .gel-4\/24\@xxl {
width: 16.6666666667% !important; }
.b-pw-1280 .gel-5\/24\@xxl {
width: 20.8333333333% !important; }
.b-pw-1280 .gel-6\/24\@xxl {
width: 25% !important; }
.b-pw-1280 .gel-7\/24\@xxl {
width: 29.1666666667% !important; }
.b-pw-1280 .gel-8\/24\@xxl {
width: 33.3333333333% !important; }
.b-pw-1280 .gel-9\/24\@xxl {
width: 37.5% !important; }
.b-pw-1280 .gel-10\/24\@xxl {
width: 41.6666666667% !important; }
.b-pw-1280 .gel-11\/24\@xxl {
width: 45.8333333333% !important; }
.b-pw-1280 .gel-12\/24\@xxl {
width: 50% !important; }
.b-pw-1280 .gel-13\/24\@xxl {
width: 54.1666666667% !important; }
.b-pw-1280 .gel-14\/24\@xxl {
width: 58.3333333333% !important; }
.b-pw-1280 .gel-15\/24\@xxl {
width: 62.5% !important; }
.b-pw-1280 .gel-16\/24\@xxl {
width: 66.6666666667% !important; }
.b-pw-1280 .gel-17\/24\@xxl {
width: 70.8333333333% !important; }
.b-pw-1280 .gel-18\/24\@xxl {
width: 75% !important; }
.b-pw-1280 .gel-19\/24\@xxl {
width: 79.1666666667% !important; }
.b-pw-1280 .gel-20\/24\@xxl {
width: 83.3333333333% !important; }
.b-pw-1280 .gel-21\/24\@xxl {
width: 87.5% !important; }
.b-pw-1280 .gel-22\/24\@xxl {
width: 91.6666666667% !important; }
.b-pw-1280 .gel-23\/24\@xxl {
width: 95.8333333333% !important; } }
/*------------------------------------* # BULLET
\*------------------------------------*/
/**
* The `bullet` pattern is used to align an icon with some text,
* similar to how a bullet point has the icon and the text
*
<span class="gs-o-bullet [ gs-o-bullet- | gs-o-bullet+ | gs-o-bullet--essential | gs-o-bullet--block | gs-o-bullet--reverse ]">
<span class="gs-o-bullet__icon gel-icon">
<svg>
<use xlink:href="#gel-icon-duration"></use>
</svg>
</span>
<span class="gs-o-bullet__text">18:30 - 18:34</span>
</span>
*
*/
.gs-o-bullet {
display: inline-block; }
/**
* 1.
* |[icon] Text here |
* |wraps around |
* |below the icon |
*
* 2. Scale the icon proportionally with the text
*
* 3. Essential Modifier - only essential icons are shown on core
*/
.gs-o-bullet__icon {
/* [1] */
display: none;
visibility: hidden;
height: 1em;
/* [2] */
width: 1em;
/* [2] */
vertical-align: middle;
display: inline-block;
visibility: visible; }
.gs-o-bullet--essential .gs-o-bullet__icon {
/* [3] */
display: inline-block;
visibility: visible; }
/**
* 4. Block Modifier
* |[icon] Text here does |
* | not wrap around|
* | below icon |
* This is styled to look like a traditional list, but with custom icons
* The icon sits on top of the text's left margin, so it's recommended to use .gs-u-bullet+
* for it to have sufficient spacing
*
* Example usage:
<span class="gs-o-bullet gs-o-bullet+ gs-o-bullet--block">
<span class="gs-o-bullet__icon gel-icon">
<svg>
<use xlink:href="#gel-icon-duration"></use>
</svg>
</span>
<span class="gs-o-bullet__text">18:30 - 18:34</span>
</span>
*/
.gs-o-bullet--block {
/* [4] */
position: relative; }
.gs-o-bullet--block .gs-o-bullet__icon {
/* [4] */
left: 0;
position: absolute;
top: 0; }
.gs-o-bullet__text {
display: inline-block;
vertical-align: middle; }
/* SPACING */
/**
* For non-essential icons, we only want the space before text
* on enhanced, since the icon isn't shown on core
*/
/**
* If both icon and text are present we need to space them out
*/
.gs-o-bullet__icon + .gs-o-bullet__text {
margin-left: 8px; }
/**
* Reduced spacing between icon and text
*/
.gs-o-bullet\- .gs-o-bullet__icon + .gs-o-bullet__text {
margin-left: 4px; }
/**
* Increased spacing between icon and text
*/
.gs-o-bullet\+ .gs-o-bullet__icon + .gs-o-bullet__text {
margin-left: 16px; }
/*
* For essential icons, we want spacing between the icon and text
* on both core and enhanced
*/
.gs-o-bullet--essential .gs-o-bullet__icon + .gs-o-bullet__text {
margin-left: 8px; }
.gs-o-bullet--essential .gs-o-bullet\- .gs-o-bullet__icon + .gs-o-bullet__text {
margin-left: 4px; }
.gs-o-bullet--essential .gs-o-bullet\+ .gs-o-bullet__icon + .gs-o-bullet__text {
margin-left: 16px; }
/**
* If you need the icon to sit after the text you can reverse
* the bullet
*/
.gs-o-bullet--reverse {
direction: rtl; }
.gs-o-bullet--reverse .gs-o-bullet__icon {
margin-right: 0;
margin-left: 4px; }
/*------------------------------------* # BUTTON
\*------------------------------------*/
/**
* 1. Allow us to style box model properties.
* 2. Line different sized buttons up a little nicer.
* 3. Normalize some styles.
* 4. Fixes odd inner spacing in IE7.
*/
.gs-o-button {
display: inline-block;
/* [1] */
vertical-align: middle;
/* [2] */
position: relative;
overflow: visible;
/* [4] */
margin: 0;
/* [3] */
padding: 8px;
text-align: center;
/* [3] */
border: 0;
/* [3] */ }
.gs-o-button:hover, .gs-o-button:active {
text-decoration: none;
/* [3] */
cursor: pointer; }
.gs-o-button:active {
top: 1px; }
.gs-o-button--big {
padding: 16px; }
.gs-o-button--full {
display: block;
width: 100%; }
.gs-o-button--primary {
background-color: #252525;
color: #fff; }
.gs-o-button--primary:hover, .gs-o-button--primary:active {
background-color: #121212; }
.gs-o-button--secondary {
background-color: #ededed;
color: #252525; }
.gs-o-button--secondary:hover, .gs-o-button--secondary:active {
background-color: #e0e0e0; }
.gs-o-button--clear {
background-color: transparent;
color: #252525; }
.gs-o-button--clear:hover, .gs-o-button--clear:active {
background-color: transparent;
color: #121212; }
.gs-o-button--white {
background: #fff;
color: #252525; }
.gs-o-button--white:hover, .gs-o-button--white:active {
background: #fff;
color: #121212; }
.gs-o-button--my-bbc {
background-color: #006def;
color: #fff; }
.gs-o-button--my-bbc:hover {
background-color: #005bc8; }
.gs-o-button--share {
background-color: #4a9442;
color: #fff; }
.gs-o-button--share:hover {
background-color: #41823a; }
.gs-o-button--border {
border: 1px solid #121212; }
.gs-o-button[disabled],
.gs-o-button--disabled {
opacity: .2;
cursor: auto; }
.gs-o-button[disabled]:active,
.gs-o-button--disabled:active {
top: 0; }
/*------------------------------------* # FAUX BLOCK LINK
\*------------------------------------*/
/*
* The `Faux Block Link` pattern allows you to make an entire block
* a link, whilst having links nested within in that block also clickable.
*
* The main link (i.e. the faux block link) is absolutely positioned across the entire
* block, any nested links have a little z-index bump to lift them on top. Nice.
*
* This implementation is not compatible with IE8 and below. On these browsers
* this falls back to being two standard anchors.
*
* EXAMPLE IMPLEMENTATION - http://codepen.io/anon/pen/NAwZpd
<div class="gs-o-faux-block-link">
<a href="http://www.bbc.co.uk/news" class="gs-o-faux-block-link__overlay-link">
<h3>Heading</h3>
</a>
<p>This is some summary <a href="http://www.bbc.co.uk/sport">text</a>/p>
</div>
Our implementation is based on http://codepen.io/IschaGast/pen/Qjxpxo
*/
/*
* Fixes the issue where the faux block links work intermittently on
* IE9 and IE10, and ensures that all areas of the block act as a link
*/
.gs-o-faux-block-link {
position: relative; }
.gs-o-faux-block-link a,
.gs-o-faux-block-link abbr[title] {
position: relative;
z-index: 2; }
.gs-o-faux-block-link .gs-o-faux-block-link__overlay-link {
position: static; }
.gs-o-faux-block-link .gs-o-faux-block-link__overlay-link:before {
bottom: 0;
content: "";
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
white-space: nowrap;
z-index: 1; }
.ie9 .gs-o-faux-block-link .gs-o-faux-block-link__overlay-link:before {
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) repeat 0 0; }
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.gs-o-faux-block-link .gs-o-faux-block-link__overlay-link:before {
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) repeat 0 0; } }
/**
* This class allows you to have a seperate overlay href rather than using :before
* Useful if you have a position relative between the link and the container div where the .gs-o-faux-block-link
* should overlay.
*/
.gs-o-faux-block-link .gs-o-faux-block-link__overlay {
display: none;
visibility: hidden;
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7) repeat 0 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
visibility: visible;
overflow: hidden;
text-indent: 200%;
white-space: nowrap; }
.gs-o-faux-block-link .gs-o-faux-block-link__overlay:hover {
cursor: pointer; }
/**
* Increased specificity so it trumps ".faux-block-link a"
*
* 1. IE Fix - Elements have a solid black background in high contrast mode on PC without this.
*/
.gs-o-faux-block-link__overlay.gs-o-faux-block-link__overlay {
opacity: 0;
/* [1] */
position: absolute;
z-index: 0; }
/*------------------------------------* # FLAG OBJECT
\*------------------------------------*/
/**
* The flag object is a design pattern similar to the media object, however it
* utilises `display: table[-cell];` to give us control over the vertical
* alignments of the text and image. csswizardry.com/2013/05/the-flag-object
*
<div class="gs-o-flag">
<div class="gs-o-flag__img">
<img src="..." />
</div>
<div class="gs-o-flag__body">
<p>Some content</p>
</div>
</div>
*
*/
/**
* 1. Allows us to control vertical alignments
* 2. Force the object to be the full width of its parent. Combined with [1],
* this makes the object behave in a quasi-`display: block;` manner.
*/
.gs-o-flag {
display: table;
/* [1] */
width: 100%;
/* [2] */
table-layout: fixed; }
/**
* Items within a flag object. There should only ever be one of each.
*
* 1. Default to aligning content to their middles.
*/
.gs-o-flag__img,
.gs-o-flag__body {
display: table-cell;
vertical-align: middle;
/* [1] */ }
/**
* Flag images have a space between them and the body of the object.
*/
.gs-o-flag__img {
padding-right: 8px; }
.gs-o-flag__img > img {
display: block;
max-width: none; }
/**
* The container for the main content of the flag object.
*
* 1. Forces the `.flag__body` to take up all remaining space.
*/
.gs-o-flag__body {
width: 100%;
/* [1] */ }
.gs-o-flag__body,
.gs-o-flag__body > :last-child {
margin-bottom: 0; }
/*------------------------------------* # ICONS
\*------------------------------------*/
/**
* 1. Inherit the width and height from the parent element, without
* without this the SVG will just scale out to a large size
* 2. Inherit from the `color` value of the parent element
*/
.gel-icon {
display: inline-block; }
.gel-icon svg {
width: inherit;
/* [1] */
height: inherit;
/* [1] */
fill: currentColor;
/* [2] */ }
/**
* Lets make the loading spinner, spin
*/
.gel-icon--loading {
-webkit-animation-name: gel-spin;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: gel-spin;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
animation-name: gel-spin;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: linear; }
@-moz-keyframes gel-spin {
0% {
-moz-transform: rotate(0deg); }
100% {
-moz-transform: rotate(360deg); } }
@-webkit-keyframes gel-spin {
0% {
-webkit-transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg); } }
@keyframes gel-spin {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }
/*------------------------------------* # LIST-INLINE
\*------------------------------------*/
/**
* The list-inline object simply displays a list of items in one line.
*
* E.g:
*
Item 1 Item 2 Item 3 Item 4
*
*/
.gs-o-list-inline {
margin: 0;
padding: 0;
list-style: none; }
.gs-o-list-inline > li {
display: inline-block;
vertical-align: middle; }
/**
* Comma delimited list to semantically mark up lists of tags, etc.
*
* E.g:
*
Item 1, Item 2, Item 3, Item 4
*
* N.B. This component requires that you remove the whitespace between LIs.
*
*/
.gs-o-list-inline--delimited > li + li:before {
content: ',\00A0'; }
/**
* Solid line divided list of items
*
* Eg.
*
Item 1 | Item 2 | Item 3 | Item 4
*
* 1. Offset the margin-top applied to items
*
*/
.gs-o-list-inline--divided {
margin-top: -4px;
/* [1] */ }
.gs-o-list-inline--divided > li {
margin-right: 6px;
margin-top: 4px;
padding-right: 6px;
border-right: 1px solid #dbdbdb; }
.gs-o-list-inline--divided > li:last-child {
margin-right: 0;
padding-right: 0;
border-right: 0; }
/**
* Solid line spaced list of items
*
* Eg.
*
Item 1 Item 2 Item 3 Item 4
*
* 1. Offset the margin-top applied to items
*/
.gs-o-list-inline--spaced {
margin-top: -4px;
/* [1] */ }
.gs-o-list-inline--spaced > li {
margin-right: 8px;
margin-top: 4px; }
.gs-o-list-inline--spaced > li:last-child {
margin-right: 0; }
/*------------------------------------* # LIST-UI
\*------------------------------------*/
/**
* The UI list object creates blocky list items with a keyline separator out of
* a `ul` or `ol`.
*/
.gs-o-list-ui,
.gs-o-list-ui__item {
border: 0 solid #dbdbdb; }
.gs-o-list-ui {
margin: 0;
margin-bottom: 16px;
padding: 0;
list-style: none;
border-top-width: 1px; }
/**
* A subtle border variant of the list ui
*/
.gs-o-list-ui--subtle {
border-top-color: #ededed; }
.gs-o-list-ui--subtle .gs-o-list-ui__item {
border-bottom-color: #ededed; }
.gs-o-list-ui--top-no-border {
border-top-width: 0; }
.gs-o-