From 271d9e05cd874cf730d0059a25f15f6dc3cadcc9 Mon Sep 17 00:00:00 2001 From: James Polley Date: Sat, 30 Sep 2017 13:24:14 +1000 Subject: [PATCH] Style stripe payment form It's rough but it at least outlines the box for credit card details --- static/src/css/app.css | 26 + static/src/lca2018/css/app.css | 1724 -------------------------------- 2 files changed, 26 insertions(+), 1724 deletions(-) delete mode 100644 static/src/lca2018/css/app.css diff --git a/static/src/css/app.css b/static/src/css/app.css index 97289099..754519a8 100644 --- a/static/src/css/app.css +++ b/static/src/css/app.css @@ -107,3 +107,29 @@ div.system-message p.system-message-title { font-size: 12px; padding: 5px 0 0 12px; } + +/** + * The CSS shown here will not be introduced in the Quickstart guide, but shows + * how you can use CSS to style your Element's container. + */ +.StripeElement { + background-color: white; + padding: 8px 12px; + border-radius: 4px; + border: 3px solid transparent; + box-shadow: 1px 3px 5px 1px #e6ebf1; + -webkit-transition: box-shadow 150ms ease; + transition: box-shadow 150ms ease; +} + +.StripeElement--focus { + box-shadow: 1px 3px 5px 1px #cfd7df; +} + +.StripeElement--invalid { + border-color: #fa755a; +} + +.StripeElement--webkit-autofill { + background-color: #fefde5 !important; +} diff --git a/static/src/lca2018/css/app.css b/static/src/lca2018/css/app.css deleted file mode 100644 index 679ce47b..00000000 --- a/static/src/lca2018/css/app.css +++ /dev/null @@ -1,1724 +0,0 @@ -@charset "UTF-8"; -/** - * Media Queries - *Try* and make everything fit within these - use @from/to/between - */ -/** - * Font definitions - */ -/** - * Transitions - */ -/** - * Padding - * Usage: padding: $padding-rythm*2 - */ -/* -* Colours -*/ -/** - * Purpose-based colors - */ -/** - * z-index stack - */ -/** - * Misc - */ -/* --------------------------------------------------------------------------- - - Content-first media queries - =========================== - - Taken from Dominic Whittle with permission by Jonny Scholes - - @TODO make these media query wrappers work as described. - - from( n ) { ... } - Styles elements from (and inclusive) of n. - Useful for adding complexity as viewport size increases. - - to( n ) { ... } - Styles elements up to but not including n. - Effectively, max-width n-1 - Useful for the occasional small screen only style. - - n must be unitless CSS pixels; e.g., 768 or 1024 - It gets converted to em. - - from-to( x, y ) { ... } - - - All take an additional $legacy parameter. - - - // Examples - - @include to( $BreakpointSmall ) { - // max-width( 320/16em ) - .nav {} - } - - @include from-to( $BreakpointMedium, 1280, legacy ) { - // min-width( 320/16em ), max-width( 1280-1 ) - .nav {} - } - - @include from( 1280 ) { - // min-width 1280 - .nav {} - } ---------------------------------------------------------------------------- */ -.panel--content, .l-speaker-page, .l-header, .l-content-page--richtext, .l-404, .styleguide { - max-width: 1746px; - margin: 0 40px; -} - -@media (min-width: 48em) { - .panel--content, .l-speaker-page, .l-header, .l-content-page--richtext, .l-404, .styleguide { - margin: 0 70px; - } -} - -@media (min-width: 64em) { - .panel--content, .l-speaker-page, .l-header, .l-content-page--richtext, .l-404, .styleguide { - margin: 0 160px; - } -} - -@media (min-width: 80em) { - .panel--content, .l-speaker-page, .l-header, .l-content-page--richtext, .l-404, .styleguide { - margin: 0 200px; - } -} - -@media (min-width: 1946px) { - .panel--content, .l-speaker-page, .l-header, .l-content-page--richtext, .l-404, .styleguide { - margin: 0 auto; - } -} - -.panel--content, .l-speaker-page { - display: -ms-flexbox; - display: flex; - -ms-flex-align: start; - align-items: flex-start; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -ms-flex-direction: column; - flex-direction: column; -} - -@media (min-width: 48em) { - .panel--content, .l-speaker-page { - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-pack: justify; - justify-content: space-between; - } -} - -.panel--1-3, .l-speaker-page--portrait, .l-footer--logos { - -ms-flex-order: 1; - order: 1; - width: 100%; -} - -@media (min-width: 48em) { - .panel--1-3, .l-speaker-page--portrait, .l-footer--logos { - -ms-flex-order: 0; - order: 0; - width: auto; - -ms-flex-preferred-size: calc((100% / 3) - 1.25rem * 2); - flex-basis: calc((100% / 3) - 1.25rem * 2); - } -} - -.panel--2-3, .l-speaker-page--content, .l-footer--text { - -ms-flex-order: 2; - order: 2; - width: 100%; -} - -@media (min-width: 48em) { - .panel--2-3, .l-speaker-page--content, .l-footer--text { - -ms-flex-order: 0; - order: 0; - width: auto; - -ms-flex-preferred-size: calc(((100% / 3) * 2) - 1.25rem * 2); - flex-basis: calc(((100% / 3) * 2) - 1.25rem * 2); - } -} - -/*! normalize.css v2.1.2 | MIT License | git.io/normalize */ -/* ========================================================================== - HTML5 display definitions - ========================================================================== */ -/** - * Correct `block` display not defined in IE 8/9. - */ -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -nav, -section, -summary { - display: block; -} - -/** - * Correct `inline-block` display not defined in IE 8/9. - */ -audio, -canvas, -video { - display: inline-block; -} - -/** - * Prevent modern browsers from displaying `audio` without controls. - * Remove excess height in iOS 5 devices. - */ -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Address styling not present in IE 8/9. - */ -[hidden] { - display: none; -} - -/* ========================================================================== - Base - ========================================================================== */ -/** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS text size adjust after orientation change, without disabling - * user zoom. - */ -html { - font-family: sans-serif; - /* 1 */ - -ms-text-size-adjust: 100%; - /* 2 */ - -webkit-text-size-adjust: 100%; - /* 2 */ -} - -/** - * Remove default margin. - */ -body { - margin: 0; -} - -/* ========================================================================== - Links - ========================================================================== */ -/** - * Address `outline` inconsistency between Chrome and other browsers. - */ -a:focus { - outline: none; -} - -/** - * Improve readability when focused and also mouse hovered in all browsers. - */ -a:active, -a:hover { - outline: 0; -} - -/* ========================================================================== - Typography - ========================================================================== */ -/** - * Address variable `h1` font-size and margin within `section` and `article` - * contexts in Firefox 4+, Safari 5, and Chrome. - */ -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/** - * Address styling not present in IE 8/9, Safari 5, and Chrome. - */ -abbr[title] { - border-bottom: 1px dotted; -} - -/** - * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. - */ -b, -strong { - font-weight: bold; -} - -/** - * Address styling not present in Safari 5 and Chrome. - */ -dfn { - font-style: italic; -} - -/** - * Address differences between Firefox and other browsers. - */ -hr { - box-sizing: content-box; - height: 0; -} - -/** - * Address styling not present in IE 8/9. - */ -mark { - background: #ff0; - color: #000; -} - -/** - * Correct font family set oddly in Safari 5 and Chrome. - */ -code, -kbd, -pre, -samp { - font-family: monospace, serif; - font-size: 1em; -} - -/** - * Improve readability of pre-formatted text in all browsers. - */ -pre { - white-space: pre-wrap; -} - -/** - * Set consistent quote types. - */ -q { - quotes: "\201C" "\201D" "\2018" "\2019"; -} - -/** - * Address inconsistent and variable font size in all browsers. - */ -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` affecting `line-height` in all browsers. - */ -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -/* ========================================================================== - Embedded content - ========================================================================== */ -/** - * Remove border when inside `a` element in IE 8/9. - */ -img { - border: 0; -} - -/** - * Correct overflow displayed oddly in IE 9. - */ -svg:not(:root) { - overflow: hidden; -} - -/* ========================================================================== - Figures - ========================================================================== */ -/** - * Address margin not present in IE 8/9 and Safari 5. - */ -figure { - margin: 0; -} - -/* ========================================================================== - Forms - ========================================================================== */ -/** - * Define consistent border, margin, and padding. - */ -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -/** - * 1. Correct `color` not being inherited in IE 8/9. - * 2. Remove padding so people aren't caught out if they zero out fieldsets. - */ -legend { - border: 0; - /* 1 */ - padding: 0; - /* 2 */ -} - -/** - * 1. Correct font family not being inherited in all browsers. - * 2. Correct font size not being inherited in all browsers. - * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. - */ -button, -input, -select, -textarea { - font-family: inherit; - /* 1 */ - font-size: 100%; - /* 2 */ - margin: 0; - /* 3 */ -} - -/** - * Address Firefox 4+ setting `line-height` on `input` using `!important` in - * the UA stylesheet. - */ -button, -input { - line-height: normal; -} - -/** - * Address inconsistent `text-transform` inheritance for `button` and `select`. - * All other form control elements do not inherit `text-transform` values. - * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. - * Correct `select` style inheritance in Firefox 4+ and Opera. - */ -button, -select { - text-transform: none; -} - -/** - * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` - * and `video` controls. - * 2. Correct inability to style clickable `input` types in iOS. - * 3. Improve usability and consistency of cursor style between image-type - * `input` and others. - */ -button, -html input[type="button"], -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; - /* 2 */ - cursor: pointer; - /* 3 */ -} - -/** - * Re-set default cursor for disabled elements. - */ -button[disabled], -html input[disabled] { - cursor: default; -} - -/** - * 1. Address box sizing set to `content-box` in IE 8/9. - * 2. Remove excess padding in IE 8/9. - */ -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; - /* 1 */ - padding: 0; - /* 2 */ -} - -/** - * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. - * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome - * (include `-moz` to future-proof). - */ -input[type="search"] { - -webkit-appearance: textfield; - /* 1 */ - /* 2 */ - box-sizing: content-box; -} - -/** - * Remove inner padding and search cancel button in Safari 5 and Chrome - * on OS X. - */ -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * Remove inner padding and border in Firefox 4+. - */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -/** - * 1. Remove default vertical scrollbar in IE 8/9. - * 2. Improve readability and alignment in all browsers. - */ -textarea { - overflow: auto; - /* 1 */ - vertical-align: top; - /* 2 */ -} - -/* ========================================================================== - Tables - ========================================================================== */ -/** - * Remove most spacing between table cells. - */ -table { - border-collapse: collapse; - border-spacing: 0; - margin-top: 1em; - margin-bottom: 1em; -} - -/* ========================================================================== - Custom Defaults - ========================================================================== */ -*, -*:before, -*:after { - box-sizing: border-box; -} - -.form-field { - border: 1px solid #3ab1c9; -} - -.form-field input[type='text'], .form-field input[type='tel'], .form-field input[type='number'], .form-field input[type='password'], .form-field input[type='email'], textarea { - color: #0c486c; - padding: 10px; - width: 100%; - border: 0; -} - -.form-field input[type='text']:focus::-webkit-input-placeholder, .form-field input[type='tel']:focus::-webkit-input-placeholder, .form-field input[type='number']:focus::-webkit-input-placeholder, .form-field input[type='password']:focus::-webkit-input-placeholder, .form-field input[type='email']:focus::-webkit-input-placeholder { - opacity: 0.2; -} - -.form-field input[type='text']:focus::-moz-placeholder, .form-field input[type='tel']:focus::-moz-placeholder, .form-field input[type='number']:focus::-moz-placeholder, .form-field input[type='password']:focus::-moz-placeholder, .form-field input[type='email']:focus::-moz-placeholder { - opacity: 0.2; -} - -.form-field input[type='text']:focus:-ms-input-placeholder, .form-field input[type='tel']:focus:-ms-input-placeholder, .form-field input[type='number']:focus:-ms-input-placeholder, .form-field input[type='password']:focus:-ms-input-placeholder, .form-field input[type='email']:focus:-ms-input-placeholder { - opacity: 0.2; -} - -.form-field input[type='text']:focus::placeholder, .form-field input[type='tel']:focus::placeholder, .form-field input[type='number']:focus::placeholder, .form-field input[type='password']:focus::placeholder, .form-field input[type='email']:focus::placeholder { - opacity: 0.2; -} - -.form-field input[type='text']::-webkit-input-placeholder, .form-field input[type='tel']::-webkit-input-placeholder, .form-field input[type='number']::-webkit-input-placeholder, .form-field input[type='password']::-webkit-input-placeholder, .form-field input[type='email']::-webkit-input-placeholder { - opacity: 1; - color: #0c486c; -} - -.form-field input[type='text']::-moz-placeholder, .form-field input[type='tel']::-moz-placeholder, .form-field input[type='number']::-moz-placeholder, .form-field input[type='password']::-moz-placeholder, .form-field input[type='email']::-moz-placeholder { - opacity: 1; - color: #0c486c; -} - -.form-field input[type='text']:-ms-input-placeholder, .form-field input[type='tel']:-ms-input-placeholder, .form-field input[type='number']:-ms-input-placeholder, .form-field input[type='password']:-ms-input-placeholder, .form-field input[type='email']:-ms-input-placeholder { - opacity: 1; - color: #0c486c; -} - -.form-field input[type='text']::placeholder, .form-field input[type='tel']::placeholder, .form-field input[type='number']::placeholder, .form-field input[type='password']::placeholder, .form-field input[type='email']::placeholder { - opacity: 1; - color: #0c486c; -} - -.form-field + .form-field { - margin-top: 20px; - margin-top: 1.25rem; -} - -body { - font-size: 16px; - font-family: "Roboto", sans-serif; - line-height: 1.4; - color: #0c486c; - font-size: 4vw; -} - -@media (min-width: 25em) { - body { - font-size: 2.2vw; - } -} - -@media (min-width: 64em) { - body { - font-size: 2vw; - } -} - -@media (min-width: 80em) { - body { - font-size: 28px; - } -} - -.lede { - margin: 30px 0; - margin: 1.875rem 0; - font-size: 4.2vw; -} - -@media (min-width: 25em) { - .lede { - font-size: 3vw; - } -} - -@media (min-width: 64em) { - .lede { - font-size: 2vw; - margin: 3.375rem 0; - } -} - -@media (min-width: 80em) { - .lede { - font-size: 28px; - } -} - -h1, -h2, -h3, -h4, -h5, -h6 { - font-family: "Titillium Web", sans-serif; - font-weight: 900; - text-transform: uppercase; - margin: 0; - line-height: 0.9; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -a { - color: inherit; - text-decoration: none; - border-bottom: 1px solid #3ab1c9; - transition: color 300ms; -} - -a:hover, a:focus, a:active { - color: #3ab1c9; -} - -ul, -ol { - padding: 0; - /* margin: 0; */ -} - -ul > li, -ol > li { - list-style-position: outside; - margin-left: 1em; -} - -blockquote { - margin-left: 0; - padding-left: 20px; - padding-left: 1.25rem; - font-style: italic; - border-left: 1px solid #3ab1c9; -} - -table th { - font-family: "Titillium Web", sans-serif; - font-weight: 900; - text-transform: uppercase; -} - -.track-name { - margin-top: 0; - margin-bottom: 0; - font-weight: bold; - text-transform: none; -} - -table th, table td { - padding: 10px; - padding: 0.625rem; - text-align: left; -} - -table th:not(:first-of-type), table td:not(:first-of-type) { - border-left: 1px solid #0c486c; -} - -table tr:not(:last-of-type) { - border-bottom: 1px solid #0c486c; -} - -table.alt th { - font-family: "Titillium Web", sans-serif; - font-weight: 900; - text-transform: uppercase; -} - -table.alt th, table.alt td { - padding: 10px; - padding: 0.625rem; - text-align: left; -} - -table.alt th:not(:first-of-type), table.alt td:not(:first-of-type) { - border-left: 1px solid #3ab1c9; -} - -table.alt tr:not(:last-of-type) { - border-bottom: 1px solid #3ab1c9; -} - -/* -* Hide only visually, but have it available for screen readers: h5bp.com/v -*/ -.visuallyhidden { - border: 0; - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0 !important; - position: absolute !important; - width: 1px; -} - -.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { - clip: auto; - height: auto; - margin: 0; - overflow: visible; - position: static; - width: auto; -} - -.btn { - display: inline-block; - background: transparent; - color: #0c486c; - text-decoration: none; - border: 1px solid #3ab1c9; - padding: 10px 20px; - padding: 0.625rem 1.25rem; - border-radius: 0.625rem; - transition: all 300ms ease-in-out; - line-height: normal; -} - -.btn:hover, .btn:focus, .btn:active { - color: #3ab1c9; - border-color: #3ab1c9; - cursor: pointer; -} - -.btn__white { - color: white; - border-color: white; -} - -.btn__white:hover { - background-color: white; - border-color: white; - color: #0c486c; -} - -@media (min-width: 48em) { - .btn { - border: 3px solid #0c486c; - } - .btn__white { - border-color: white; - } -} - -@media (min-width: 64em) { - .btn { - padding: 0.625rem 2.5rem; - } -} - -.btn__compact { - padding: 0.625rem 1.25rem; - border: 1px solid #3ab1c9; -} - -.btn__active { - border: solid #3ab1c9; -} - - -.btn-group { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; -} - -.btn-group > .btn, -.btn-group > .btn-svg { - display: inline-block; - margin-right: 20px; - margin-right: 1.25rem; -} - -.btn-svg { - width: 2em; - height: 2em; - position: relative; - border-bottom: 0; - display: block; -} - -.btn-svg > svg { - position: absolute; - left: 0; - top: 0; - height: 100%; - width: 100%; -} - -.btn-svg__alt { - color: #3ab1c9; -} - -.btn-svg__alt:hover { - color: #0c486c; -} - -.select { - position: relative; -} - -.select select { - outline: 0; - border: 0; - width: 100%; - background-color: white; - color: #0c486c; - padding: 10px; - padding-right: 35px; - appearance: none; - -moz-appearance: none; - -webkit-appearance: none; -} - -.select select:active { - background-color: whitesmoke; -} - -.select select::-ms-expand { - display: none; -} - -.select:after { - content: ' '; - display: block; - position: absolute; - border-right: 1px solid #3ab1c9; - border-bottom: 1px solid #3ab1c9; - right: 15px; - top: 9px; - width: 15px; - height: 15px; - transform: rotate(45deg); -} - -.boolean-group { - border: 0; - list-style: none; - margin-bottom: 0; -} - -.boolean-group--row { - display: block; -} - -.boolean-group--row + .boolean-group--row { - margin-top: 6.666px; - margin-top: 0.41667rem; -} - -.boolean-group--row > label { - position: relative; - padding-left: 17px; - display: block; - vertical-align: top; -} - -.boolean-group--row > label:before { - content: ''; - width: 12px; - height: 12px; - display: block; - position: absolute; - border: 1px solid #3ab1c9; - top: calc(50% - 12px / 2); - left: 0; -} - -.boolean-group--row > label:after { - transition: all 300ms ease-in-out; - background-color: #0c486c; - content: ''; - display: block; - position: absolute; - width: 0; - height: 0; - left: 6px; - top: calc(50% - 12px / 2 + 4px * 1.5); -} - -.boolean-group--row > input { - display: none; -} - -.boolean-group--row > input:checked ~ label:after { - width: calc(12px - 4px); - height: calc(12px - 4px); - left: 2px; - top: calc(50% - 12px / 2 + (4px / 2)); -} - -.boolean-group--row > input[type="radio"] ~ label:before, .boolean-group--row > input[type="radio"] ~ label:after { - border-radius: 100%; -} - -.panel { - padding: 40px 0; - padding: 2.5rem 0; - /* - * Tabbed panel styles - */ -} - -.panel--content { - position: relative; - z-index: 1; -} - -.panel--section-title { - margin: 4px 0; - margin: 0.25rem 0; -} - -.panel--1-2 { - margin: 20px 0; - margin: 1.25rem 0; - width: 100%; -} - -.panel__bg { - background-color: #0c486c; - color: white; - position: relative; -} - -.panel--bg { - position: absolute; - opacity: 0.3; - background-position: center; - background-size: cover; - background-blend-mode: multiply; - width: 100%; - height: 100%; - top: 0; - left: 0; -} - -.panel--tabs { - display: block; -} - -.panel--tab-title { - margin: 20px 0; - margin: 1.25rem 0; -} - -.panel--tab-content { - display: none; - -ms-flex-item-align: start; - align-self: flex-start; -} - -.panel--tab-content > *:first-child { - margin-top: 0; -} - -.panel--tab-content.is-active { - display: block; -} - -.panel--tab-controls { - margin-bottom: 20px; - margin-bottom: 1.25rem; - display: block; - width: 100%; -} - -.panel--tab-controls-title { - margin-top: 0; -} - -.panel--tab-switch { - margin-right: 20px; - margin-right: 1.25rem; - border-bottom: 0; -} - -.panel--tab-switch:hover, .panel--tab-switch.is-active { - cursor: pointer; - border-bottom: 1px solid #3ab1c9; -} - -.panel__compact { - padding-top: 10px 0; - padding-top: 0.625rem 0; -} - -.panel__compact.panel__first { - padding-top: 0 0; - padding-top: 0 0; -} - -.panel__compact.panel__last { - padding-bottom: 10px; - padding-bottom: 0.625rem; -} - -.panel__compact .panel--content { - -ms-flex-align: start; - -ms-grid-row-align: flex-start; - align-items: flex-start; -} - -.panel__compact .panel--1-3 { - width: 100%; - margin-bottom: 2em; - -} - -@media (min-width: 48em) { - .panel { - padding: 0; - } - .panel--section-title { - margin: 3.75rem 0; - } - .panel--1-2 { - margin: 0.625rem 0; - -ms-flex-preferred-size: 46%; - flex-basis: 46%; - } - .panel--1-3, .panel--2-3, .panel--1-2 { - margin: 0; - } - .panel--content { - height: 700px; - -ms-flex-align: center; - -ms-grid-row-align: center; - align-items: center; - } - .panel__compact { - padding-top: 5rem; - } - - .panel__compact.panel__first { - padding-top: 0rem; - } - - .panel__compact.panel__last { - padding-bottom: 2.5rem; - } - .panel__compact .panel--content { - height: auto; - } -} - -.illustration { - width: 35%; - padding-top: 35%; - position: relative; - border-radius: 100%; - box-shadow: 0px 0px 26px rgba(0, 0, 0, 0.5); - margin-bottom: 20px; - margin-bottom: 1.25rem; -} - -.illustration > svg { - display: block; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -.illustration > img { - display: block; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -@media (min-width: 48em) { - .illustration { - width: 100%; - padding-top: 100%; - margin-bottom: 0; - box-shadow: 0px 0px 51px rgba(0, 0, 0, 0.5); - } -} - -.link-list { - list-style: none; - margin-top: 20px; - margin-top: 1.25rem; -} - -.link-list--item + .link-list--item { - margin-top: 10px; - margin-top: 0.625rem; -} - -.link-list--link { - font-weight: 600; -} - -@media (min-width: 48em) { - .link-list { - margin-top: 0; - } - .link-list--item + .link-list--item { - margin-top: 1.25rem; - } -} - -@media (min-width: 48em) { - .right-floating-image { - width: 30%; - float: right; - margin: 4rem; - margin-right: 0; - } -} - -.portrait { - position: relative; - overflow: hidden; - width: 35%; - border-radius: 100%; - box-shadow: 0px 0px 26px rgba(0, 0, 0, 0.5); - margin-bottom: 20px; - margin-bottom: 1.25rem; -} - -.portrait:before { - content: ""; - display: block; - padding-top: 100%; -} - -.portrait--img { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: 100%; - height: 100%; - background-size: cover; - background-position: center; -} - -@media (min-width: 48em) { - .portrait { - width: 100%; - margin-bottom: 0; - box-shadow: 0px 0px 51px rgba(0, 0, 0, 0.5); - } -} - -.menu-dropdown { - position: absolute; - left: 0; - padding-top: 20px; - padding-top: 1.25rem; - display: none; - z-index: 50; -} - -.menu-dropdown:before { - position: absolute; - content: ''; - background: linear-gradient(45deg, #89d0de 50%, transparent 50%); - width: 20px; - width: 1.25rem; - height: 20px; - height: 1.25rem; - top: 0; - left: 0; -} - -.menu-dropdown__last { - right: 0; - left: auto; -} - -.menu-dropdown__last:before { - background: linear-gradient(-45deg, #89d0de 50%, transparent 50%); - left: auto; - right: 0; -} - -.menu-dropdown .link-list { - font-size: 0.8em; - background-color: #89d0de; - padding-top: 20px; - padding-top: 1.25rem; -} - -.menu-dropdown .link-list--item { - margin: 0; - display: block; -} - -.menu-dropdown .link-list--item:hover { - background-color: #0c486c; - color: white; -} - -.menu-dropdown .link-list--link { - font-weight: normal; - border: 0; - padding: 6.666px 40px 6.666px 20px; - padding: 0.41667rem 2.5rem 0.41667rem 1.25rem; - width: 100%; - height: 100%; - display: block; - white-space: nowrap; -} - -.menu-dropdown .link-list--link:hover { - color: white; -} - -.mobile-menu { - position: absolute; - width: 100%; - height: auto; - background-color: white; - left: 0; - top: 0; - bottom: 0; - opacity: 0; - will-change: opacity; - transition: all 300ms ease-in-out; - pointer-events: none; - z-index: 100; - display: block; - margin-bottom: -150%; -} - -.mobile-menu--list { - margin: auto; - text-align: center; - margin-top: 20%; - list-style: none; -} - -.mobile-menu--item > a { - font-size: 2em; - border: 0; -} - -.mobile-menu--item__primary > a { - font-size: 2.5em; - font-family: "Titillium Web", sans-serif; - font-weight: 900; - text-transform: uppercase; -} - -.mobile-menu.is-active { - opacity: 1; - pointer-events: all; -} - -@media (min-width: 48em) { - .mobile-menu { - display: none !important; - } -} - -.l-header { - display: -ms-flexbox; - display: flex; - -ms-flex-pack: justify; - justify-content: space-between; - margin-top: 50px; - margin-top: 3.125rem; -} - -.l-header--logo { - display: inline-block; - width: 65%; -} - -.l-header--logo > svg { - display: block; - width: 100%; - height: 100%; -} - -.l-header--logo > a { - border: 0; -} - -.l-header--menu-opener { - float: right; - width: 22px; - height: 22px; - position: relative; - -ms-flex-item-align: start; - align-self: flex-start; - border: 0; - z-index: 101; -} - -.l-header--menu-opener:after, .l-header--menu-opener:before { - transition: all 300ms ease-in-out; - content: ''; - width: 100%; - height: 4.4px; - display: block; - position: absolute; - left: 0; - transform-origin: center; - background-color: #0c486c; -} - -.l-header--menu-opener:before { - top: 0; - box-shadow: 0 8.8px #0c486c; -} - -.l-header--menu-opener:after { - bottom: 0; -} - -.l-header--menu-opener.is-active:before { - transform: translateY(8.8px) rotate(45deg); - box-shadow: 0 8.8px rgba(12, 72, 108, 0); -} - -.l-header--menu-opener.is-active:after { - transform: translateY(-8.8px) rotate(-45deg); -} - -.l-header--links { - height: 100%; - -ms-flex-item-align: start; - align-self: flex-start; - display: none; - list-style: none; - white-space: nowrap; -} - -.l-header--nav { - display: inline-block; - margin-right: 10px; - margin-right: 0.625rem; - vertical-align: top; - position: relative; -} - -.l-header--nav:hover > .menu-dropdown { - display: block; -} - -.l-header--nav > a { - vertical-align: top; - border: 0; - font-size: 0.8em; -} - -@media (min-width: 25em) { - .l-header--logo { - width: 200px; - margin-right: 2.5rem; - } -} - -@media (min-width: 48em) { - .l-header { - /*margin-top: 6.25rem; /* issue #44. We don't like this. */ - } - .l-header--menu-opener { - display: none !important; - } - .l-header--links { - display: inline-block; - } - .l-header--logo { - width: 255px; - } -} - -@media (min-width: 64em) { - .l-header--logo { - width: 300px; - } - .l-header--nav { - margin-right: 1.25rem; - } -} - -.l-speaker-page { - margin-top: 60px; - margin-top: 3.75rem; -} - -.l-speaker-page--portrait { - width: 100%; -} - -@media (min-width: 48em) { - .l-speaker-page { - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - margin-top: 5rem; - } - .l-speaker-page--content *:first-child { - margin-top: 0; - } - .l-speaker-page--portrait { - width: auto; - } -} - -.l-footer { - display: -ms-flexbox; - display: flex; - -ms-flex-align: center; - align-items: center; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -ms-flex-direction: column; - flex-direction: column; - margin-top: 100px; - margin-top: 3.25rem; - padding: 50px 40px; - padding: 3.125rem 40px; - width: 100%; -} - -.l-footer--logos { - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -ms-flex-pack: distribute; - justify-content: space-around; - margin-top: 20px; - margin-top: 1.25rem; -} - -.l-footer--logo { - max-width: 100%; - -ms-flex-preferred-size: 45%; - flex-basis: 45%; - margin-top: 1em; - margin-bottom: 1em; -} - -.l-footer--logo > svg, .l-footer--logo > img { - display: block; - width: 100%; - height: 100%; -} - - -.l-footer__alt { - /* background-color: #0c486c; */ - background-color: transparent; - color: white; -} - -@media (min-width: 48em) { - .l-footer { - /*padding: 6.25rem 70px; /* issue #44 too much padding */ - padding: 3.25rem 70px; - -ms-flex-direction: row; - flex-direction: row; - -ms-flex-pack: justify; - justify-content: space-between; - } - .l-footer--logos { - margin-top: 0; - } -} - -@media (min-width: 64em) { - .l-footer { - /*padding: 6.25rem 160px; */ - padding: 3.25rem 160px; - } -} - -@media (min-width: 80em) { - .l-footer { - /*padding: 6.25rem 200px;*/ - padding: 3.25rem 200px; - } - .l-footer--logo { - margin-bottom: 0; - -ms-flex-preferred-size: auto; - flex-basis: auto; - } -} - -@media (min-width: 1946px) { - .l-footer { - padding: 3.25rem auto; - /*padding: 6.25rem auto;*/ - } -} - -.l-content-page { - margin-top: 80px; - margin-top: 5rem; -} - -.l-content-page--image { - height: 200px; - width: 100%; - margin: 7vw 0; - background-size: cover; - background-position: center; -} - -@media (min-width: 48em) { - .l-content-page--image { - height: 350px; - } -} - -@media (min-width: 64em) { - .l-content-page--image { - height: 500px; - } -} - -@media (min-width: 80em) { - .l-content-page--image { - height: 600px; - } -} - -.l-404 { - margin-top: 80px; - margin-top: 5rem; -} - -@media (min-width: 64em) { - .l-404--content { - max-width: 50%; - } -} - -.styleguide > .black { - background-color: black; - padding: 20px; -} - -.fieldWrapper { - margin-top: 1em; - margin-bottom: 1em; -} - -.has-errors { - margin-bottom: 0.5em; - padding: 0.5em; - background-color: #ebe0e0; -} - -.errorlist { - margin-top: 0.1em; - - list-style-type: none; - color: #6c0c0c; -} - -.text-right { - text-align: right; -} - -.vertical-small { - margin-top: 1em; -} - -.vertical-bigger { - margin-top: 2em; -} - - -/* Schedule timetable for mobile */ - -@media only screen and (max-width: 480px) { - - .calendar { - line-height: 1.0; - } - - .calendar thead { - display: none; - } - - .calendar tr, - .calendar td - { - display: block; - padding: 0.5ex; - font-size: small; - } - - .calendar td, - .calendar td:not(:first-of-type) { - border: 0px; - } - - .calendar .slot .title, - .calendar .slot .speaker, - .calendar .slot .room - { - display: block; - line-height: 1.2; - } - - .calendar .slot .room - { - font-style: italic; - } -} - -/* Schedule timetable needs some more specific font sizes */ - -@media not screen and (max-width: 480px) { - - .calendar td { - font-size: small; - } - - .slot { - padding-left: 0.625rem; - padding-top: 0.2rem; - padding-bottom: 0.625rem; - padding-right: 0.625rem; - vertical-align: middle; - } - - .calendar th { - border-bottom: 1px solid #0c486c; - border-left: 0px !important; - } - - .calendar .title { - display: block; - padding-bottom: 0.5vh; - } - - .slot-shortbreak { - color: #fff ; - } - - .slot-tutorial { - vertical-align: top; - } - - .time { - font-size: xx-small; - line-height: 0.4; - vertical-align: middle; - padding-top: 0.25rem; - } - - .calendar .slot .room { - display: none; - } -} - - -/* ------------------------------------------------------------------------------------------------ - -Shame -===== - -1. If it’s a hack, it goes in shame.css. -2. Document all hacks fully: - a. What part of the codebase does it relate to? - b. Why was this needed? - c. How does this fix it? - d. How might you fix it properly, given more time? -3. Do not blame the developer; if they explained why they had to do it then their reasons are -probably (hopefully) valid. -4. Try and clean shame.css up when you have some down time. - -via: http://csswizardry.com/2013/04/shame-css/ - ------------------------------------------------------------------------------------------------- */ - -/*# sourceMappingURL=maps/app.css.map */