3758 lines
56 KiB
SCSS
3758 lines
56 KiB
SCSS
@import "bumbleberry";
|
||
@import "settings";
|
||
|
||
$zindex-base: 0;
|
||
|
||
html, body {
|
||
color: $black;
|
||
position: relative;
|
||
z-index: $zindex-base;
|
||
}
|
||
|
||
body {
|
||
padding-bottom: 20vw;
|
||
}
|
||
|
||
h1, h2, h3, h4, h5, h6, label, button, .button, dt, th, .table-th, nav.sub-menu {
|
||
@include font-family(secondary);
|
||
font-weight: normal;
|
||
}
|
||
|
||
h2 {
|
||
margin: 0;
|
||
font-size: 6vw;
|
||
}
|
||
|
||
h3 {
|
||
font-size: 4.5vw;
|
||
}
|
||
|
||
h3.subtitle {
|
||
font-size: 1.5em;
|
||
}
|
||
|
||
h4 {
|
||
font-size: 1.25em;
|
||
}
|
||
|
||
h5 {
|
||
font-size: 1.125em;
|
||
}
|
||
|
||
h6 {
|
||
font-size: 1em;
|
||
}
|
||
|
||
p {
|
||
font-size: 4vw;
|
||
}
|
||
|
||
a {
|
||
text-decoration: none;
|
||
color: $link-colour;
|
||
border-bottom: 0 solid;
|
||
outline: 0;
|
||
position: relative;
|
||
cursor: pointer;
|
||
|
||
@include after {
|
||
content: '';
|
||
position: absolute;
|
||
border-bottom: 0 solid;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
opacity: 0;
|
||
@include _(transition, all 150ms ease-in-out);
|
||
@include _(transform-origin, 25% 50%);
|
||
@include _(transform, scaleX(0));
|
||
}
|
||
|
||
&:hover,
|
||
&:active,
|
||
&:focus {
|
||
@include after {
|
||
border-bottom: 0.1em solid;
|
||
opacity: 1;
|
||
@include _(transform, scaleX(1));
|
||
}
|
||
}
|
||
}
|
||
|
||
.screen-reader-text {
|
||
clip: rect(1px, 1px, 1px, 1px);
|
||
height: 1px;
|
||
width: 1px;
|
||
overflow: hidden;
|
||
position: absolute !important;
|
||
}
|
||
|
||
table, .table {
|
||
margin-bottom: 2em;
|
||
margin-left: 1em;
|
||
// background-color: #F8F8F8;
|
||
// width: 100%;
|
||
// @include default-box-shadow(top, 2, true);
|
||
|
||
th, td, .table-th, .table-td {
|
||
text-align: left;
|
||
padding: 0.25em 0.5em;
|
||
border: 0.1rem solid #EEE;
|
||
|
||
&.center {
|
||
text-align: center;
|
||
}
|
||
|
||
&.big {
|
||
font-size: 1.5em;
|
||
}
|
||
|
||
/*&:first-child {
|
||
padding-left: 1em;
|
||
}
|
||
|
||
&:last-child {
|
||
padding-right: 1em;
|
||
}*/
|
||
|
||
&.status {
|
||
width: 0.1rem;
|
||
background-color: transparent;
|
||
border: 0;
|
||
}
|
||
}
|
||
|
||
th, .table-th {
|
||
background-color: #F8F8F8;
|
||
|
||
&.corner {
|
||
background-color: transparent;
|
||
border: 0;
|
||
}
|
||
}
|
||
|
||
tbody th {
|
||
width: 0.1rem;
|
||
}
|
||
}
|
||
|
||
.table {
|
||
display: table;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
.table-tr {
|
||
display: table-row;
|
||
}
|
||
|
||
.table-th, .table-td {
|
||
display: table-cell;
|
||
}
|
||
|
||
button,
|
||
.button {
|
||
@include button;
|
||
vertical-align: top;
|
||
|
||
#main &[type="submit"] {
|
||
background-color: $colour-5;
|
||
|
||
&[value="send"] {
|
||
background-color: $colour-4;
|
||
}
|
||
}
|
||
|
||
&.register {
|
||
background-color: $colour-4;
|
||
}
|
||
|
||
form.logout & {
|
||
background-color: #666;
|
||
}
|
||
|
||
#main &.modify {
|
||
background-color: $colour-5;
|
||
}
|
||
|
||
&.delete,
|
||
#main &.delete {
|
||
background-color: $colour-4;
|
||
}
|
||
|
||
#main &.secondary {
|
||
background-color: $colour-1;
|
||
}
|
||
|
||
&.subdued, #main &.subdued {
|
||
background-color: #888;
|
||
}
|
||
|
||
#main &.accented {
|
||
background-color: $colour-2;
|
||
}
|
||
|
||
&.facebook {
|
||
background-color: #3A5795;
|
||
}
|
||
|
||
&.small {
|
||
font-size: 0.9em;
|
||
}
|
||
}
|
||
|
||
a.button {
|
||
@include after {
|
||
border-bottom: 1em solid transparent;
|
||
left: auto;
|
||
bottom: auto;
|
||
@include _(transform, none);
|
||
}
|
||
}
|
||
|
||
nav.sub-menu {
|
||
display: inline-block;
|
||
margin: 2rem 0 0;
|
||
text-align: center;
|
||
|
||
a {
|
||
margin: 0 1em 0.5em 0;
|
||
background-color: #E8E8E8;
|
||
color: #888;
|
||
display: inline-block;
|
||
padding: 0.25em 0.75em 0.333em;
|
||
font-size: 0.9em;
|
||
border: 1px solid #AAA;
|
||
border-bottom-width: 0.2em;
|
||
//@include _(text-shadow, 0 0.125em 0.25em #BBB);
|
||
@include _(border-radius, 0.15em);
|
||
@include default-box-shadow(top, 2);
|
||
@include _(text-shadow, 0 0.05em 0.05em #FFF);
|
||
|
||
&:hover, &:active, &:focus {
|
||
background-color: #D8D8D8;
|
||
}
|
||
|
||
&.current {
|
||
background-color: #CCC;
|
||
color: #666;
|
||
padding: 0.333em 0.75em 0.25em;
|
||
}
|
||
|
||
@include after {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@include breakpoint(medium) {
|
||
border: 1px solid #AAA;
|
||
background-color: #AAA;
|
||
border-bottom-width: 0.125em;
|
||
@include _(border-radius, 0.15em);
|
||
@include default-box-shadow(top, 2);
|
||
|
||
a {
|
||
border: 0;
|
||
margin: 0 1px 0 0;
|
||
float: left;
|
||
@include _(border-radius, 0);
|
||
@include _(box-shadow, none);
|
||
|
||
&:last-child {
|
||
margin: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
textarea, .textarea {
|
||
display: block;
|
||
width: 100%;
|
||
min-height: 15em;
|
||
font-size: 1.25em;
|
||
line-height: 1.5em;
|
||
margin: 1em 0;
|
||
padding: 0.75em;
|
||
border: 0.1rem solid #E8E8E8;
|
||
outline: 0;
|
||
@include _(border-radius, 0.25rem);
|
||
color: inherit;
|
||
background-image: repeating-linear-gradient(135deg, rgba(#000, 0.025), rgba(#000, 0.025) 0.1em, transparent 0.1em, transparent 0.4em);
|
||
@include _(box-shadow, 0 0 0 0 rgba(0,0,0,0.05));
|
||
@include _(transition, box-shadow 200ms ease-in-out);
|
||
will-change: box-shadow;
|
||
|
||
&[data-edit-on="click"],
|
||
&[data-edit-on="focus"] {
|
||
cursor: text;
|
||
}
|
||
|
||
&:hover, &:focus, &:active {
|
||
@include _(box-shadow, 0 0 0 0.3em rgba(0,0,0,0.05));
|
||
}
|
||
}
|
||
|
||
.textarea, .workshop-description {
|
||
> :first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
> :last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
p {
|
||
font-size: 1.125em;
|
||
}
|
||
|
||
h1 {
|
||
font-size: 1.667em;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 1.25em;
|
||
}
|
||
}
|
||
|
||
input {
|
||
&[type="text"], &[type="password"], &[type="tel"], &[type="search"], &[type="email"], &[type="url"], &[type="number"] {
|
||
display: block;
|
||
font-size: 1.25em;
|
||
outline: 0;
|
||
border: 0;
|
||
margin: 1em 0;
|
||
width: 100%;
|
||
padding: 0.25em 0.5em;
|
||
border-bottom: 0.15em solid transparent;
|
||
}
|
||
|
||
&[type="number"], &[type="tel"] {
|
||
@include font-family(secondary);
|
||
}
|
||
}
|
||
|
||
.number-field,
|
||
.email-field,
|
||
.telephone-field,
|
||
.text-field {
|
||
position: relative;
|
||
margin-bottom: 2em;
|
||
color: inherit;
|
||
|
||
&.empty {
|
||
label {
|
||
z-index: $zindex-base + 3;
|
||
@include _(transform, translateY(-100%) scale(1));
|
||
background-color: transparent;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
&.big input {
|
||
@include font-family(secondary);
|
||
|
||
.composition & {
|
||
margin-top: 1em;
|
||
}
|
||
}
|
||
|
||
label,
|
||
&.focused label {
|
||
position: absolute;
|
||
z-index: $zindex-base + 3;
|
||
font-size: 1em;
|
||
padding: 0.25em 0.667em;
|
||
width: auto;
|
||
@include _(transition, 'transform 250ms ease-in-out, color 250ms ease-in-out, background-color 250ms ease-in-out');
|
||
top: 100%;
|
||
left: 0;
|
||
@include _(transform, translateY(0) scale(0.75));
|
||
@include _(transform-origin, 0 0);
|
||
line-height: 1.5em;
|
||
background-color: transparent;
|
||
color: $black;
|
||
cursor: text;
|
||
will-change: transform, color, background-color;
|
||
}
|
||
|
||
input {
|
||
margin: 0;
|
||
position: relative;
|
||
z-index: $zindex-base + 2;
|
||
padding: 0.15em 0.5em;
|
||
background-color: #F8F8F8;
|
||
@include _(border-radius, 0.25rem);
|
||
@include _(box-shadow, 0 0 0 0 rgba(0,0,0,0.05));
|
||
@include _(transition, box-shadow 200ms ease-in-out);
|
||
background-image: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.025), rgba(0, 0, 0, 0.025) 0.1rem, transparent 0.1rem, transparent 0.4rem);
|
||
border: 0.1rem solid #E8E8E8;
|
||
will-change: box-shadow;
|
||
}
|
||
|
||
&:focus, &:active, &:focus {
|
||
|
||
label {
|
||
color: $black;
|
||
}
|
||
}
|
||
input {
|
||
&:focus, &:active, &:hover {
|
||
@include _(box-shadow, 0 0 0 0.3em rgba(0,0,0,0.05));
|
||
}
|
||
}
|
||
}
|
||
.number-field,
|
||
.email-field,
|
||
.telephone-field,
|
||
.text-field,
|
||
.text-area-field {
|
||
text-align: left;
|
||
}
|
||
|
||
.telephone-field {
|
||
max-width: 15em;
|
||
}
|
||
|
||
@include keyframes(bend) {
|
||
to {
|
||
@include _(transform, skewX(-5deg));
|
||
}
|
||
}
|
||
|
||
.hidden {
|
||
display: none !important;
|
||
}
|
||
|
||
.field-error {
|
||
display: block;
|
||
background-color: rgba($colour-2, 0.333);
|
||
@include font-family(secondary);
|
||
padding: 0.5em 1em;
|
||
margin: 0 0.2em;
|
||
text-align: center;
|
||
@include default-box-shadow(top, 2);
|
||
}
|
||
|
||
.input-field {
|
||
.field-error {
|
||
float: right;
|
||
@include _(transform, skewX(-15deg));
|
||
@include _(transform-origin, 0 100%);
|
||
@include _(animation, bend ease-in-out 500ms infinite alternate both);
|
||
}
|
||
|
||
&.check-box-field {
|
||
&.has-error {
|
||
margin-top: 3em;
|
||
}
|
||
|
||
.field-error {
|
||
position: absolute;
|
||
bottom: 100%;
|
||
right: 0;
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
|
||
&.small select,
|
||
&.small input {
|
||
font-size: 1em;
|
||
@include font-family(secondary)
|
||
}
|
||
}
|
||
|
||
.input-field.other-field label {
|
||
|
||
input {
|
||
float: left;
|
||
margin: 0.33em 0;
|
||
|
||
&:checked {
|
||
+ div input {
|
||
z-index: $zindex-base + 2;
|
||
@include _(opacity, 1);
|
||
}
|
||
}
|
||
}
|
||
|
||
div {
|
||
float: left;
|
||
position: relative;
|
||
margin: 0 0.25em;
|
||
font-size: 1em;
|
||
|
||
input {
|
||
//display: none;
|
||
@include _(opacity, 0);
|
||
@include _(transition, opacity 250ms ease-in-out);
|
||
z-index: $zindex-base;
|
||
position: absolute;
|
||
width: auto;
|
||
margin: 0;
|
||
border: 1px solid #CCC;
|
||
height: 1.5em;
|
||
left: 0;
|
||
top: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.number-field {
|
||
display: inline-block;
|
||
font-size: 1.5em;
|
||
|
||
input {
|
||
text-align: right;
|
||
}
|
||
}
|
||
|
||
.input-field-help {
|
||
margin: 0.5em 1em 0;
|
||
line-height: 1.3333em;
|
||
font-size: 1.125em;
|
||
}
|
||
|
||
.check-box-field,
|
||
.check-box-field.vertical,
|
||
.radio-button-field {
|
||
@include clearfix;
|
||
margin-bottom: 3em;
|
||
position: relative;
|
||
@include default-box-shadow(top);
|
||
|
||
td &,
|
||
.table-td & {
|
||
@include _(box-shadow, none);
|
||
margin: 0;
|
||
}
|
||
|
||
label {
|
||
display: block;
|
||
background-color: #FFF;
|
||
height: 2.333em;
|
||
font-weight: normal;
|
||
font-size: 1.25em;
|
||
@include font-family(secondary);
|
||
text-align: center;
|
||
position: relative;
|
||
padding: 0.5em 0.5em 0.5em 3em;
|
||
cursor: pointer;
|
||
border: 0.1em solid;
|
||
border-top: 0;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
@include _(transition, #{'transform, background-color 100ms, 100ms ease-in-out, ease-in-out'});
|
||
|
||
@include before-and-after {
|
||
content: '';
|
||
position: absolute;
|
||
@include _(transition, transform 200ms ease-in-out);
|
||
}
|
||
|
||
@include before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 2.333em;
|
||
height: 100%;
|
||
border-right: inherit;
|
||
}
|
||
|
||
@include after {
|
||
content: '';
|
||
position: absolute;
|
||
visibility: hidden;
|
||
left: 0.75em;
|
||
top: 0.25em;
|
||
border: 0.2em solid #FFF;
|
||
width: 0.75em;
|
||
height: 1.5em;
|
||
border-width: 0 .2em 0.2em 0;
|
||
@include _(transform, rotate(45deg) scale(0));
|
||
@include _(transition, transform 200ms cubic-bezier(0, 0.38, 0.9, 2));
|
||
}
|
||
}
|
||
|
||
input:first-child + label {
|
||
border: 0.1em solid;
|
||
}
|
||
|
||
input {
|
||
position: fixed;
|
||
opacity: 0 !important;
|
||
left: -100000px;
|
||
z-index: -10;
|
||
|
||
&:checked + label {
|
||
@include before {
|
||
background-color: $colour-5;
|
||
}
|
||
@include after {
|
||
visibility: visible;
|
||
@include _(transform, rotate(45deg) scale(1));
|
||
}
|
||
}
|
||
|
||
&:hover + label {
|
||
@include before {
|
||
background-color: $colour-3;
|
||
}
|
||
}
|
||
|
||
&[type="radio"] + label {
|
||
@include after {
|
||
content: '+';
|
||
border: 0;
|
||
font-size: 2.5em;
|
||
top: 0;//-0.25em;
|
||
left: 0.175em;
|
||
// top: -0.125em;
|
||
// left: 0.05em;
|
||
line-height: 1em;
|
||
color: #FFF;
|
||
height: 1em;
|
||
width: 1em;
|
||
}
|
||
}
|
||
}
|
||
|
||
.other {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 2.333em;
|
||
|
||
input {
|
||
z-index: 1;
|
||
opacity: 1!important;
|
||
position: static;
|
||
margin: 0;
|
||
font: inherit;
|
||
height: 100%;
|
||
text-align: inherit;
|
||
cursor: inherit;
|
||
}
|
||
}
|
||
}
|
||
|
||
.check-box-field.vertical {
|
||
display: block;
|
||
margin: 0 2em 5em;
|
||
font-size: 0.75em;
|
||
}
|
||
|
||
.check-box-field.inline {
|
||
display: inline-block;
|
||
|
||
label {
|
||
float: left;
|
||
min-width: 7.5em;
|
||
}
|
||
|
||
&.vertical {
|
||
label {
|
||
float: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.check-box-field.small {
|
||
font-size: 0.75em;
|
||
|
||
&.small label {
|
||
font-size: 1.125em;
|
||
}
|
||
}
|
||
|
||
.check-box-field.big {
|
||
font-size: 1em;
|
||
}
|
||
|
||
.radio-button-field {
|
||
label {
|
||
width: 7em;
|
||
height: 5em;
|
||
}
|
||
}
|
||
.single-check-box-field,
|
||
.single-radio-button-field {
|
||
margin-left: 1em;
|
||
}
|
||
|
||
.date-span {
|
||
margin-left: 1em;
|
||
|
||
label, input {
|
||
display: block;
|
||
height: 1.5em;
|
||
margin: 0 0.5em 1em 0;
|
||
}
|
||
|
||
label {
|
||
height: 1.5em;
|
||
}
|
||
|
||
input {
|
||
@include default-box-shadow(top);
|
||
background-color: $colour-1;
|
||
color: $white;
|
||
border: 0;
|
||
padding: 0 0.25em;
|
||
font-weight: normal;
|
||
@include font-family(secondary);
|
||
@include _(text-stroke, 0.5px #000);
|
||
}
|
||
|
||
.date-labels {
|
||
float: left;
|
||
}
|
||
|
||
.date-field {
|
||
overflow: auto;
|
||
}
|
||
}
|
||
|
||
.requesting {
|
||
opacity: 0.5;
|
||
-webkit-filter: blur(5px);
|
||
}
|
||
|
||
form {
|
||
@include _(transition, 'opacity 250ms ease-in-out, filter 250ms ease-in-out, -webkit-filter 250ms ease-in-out');
|
||
|
||
&.composition {
|
||
textarea {
|
||
height: 16em;
|
||
}
|
||
}
|
||
|
||
&.mini-flex-form {
|
||
@include _-(display, flex);
|
||
@include _(align-items, flex-start);
|
||
|
||
.input-field {
|
||
@include _(flex, 1);
|
||
}
|
||
|
||
button, .button {
|
||
margin-left: 1em;
|
||
height: 2.6em;
|
||
}
|
||
}
|
||
}
|
||
|
||
#main .columns th form {
|
||
display: inline;
|
||
vertical-align: super;
|
||
margin: 0 0 0 0.5em;
|
||
|
||
button {
|
||
float: right;
|
||
}
|
||
}
|
||
|
||
#main .columns th.form,
|
||
#main .columns .table-th.form {
|
||
display: none;
|
||
}
|
||
|
||
#main .columns td.form,
|
||
#main .columns .table-td.form {
|
||
border: 0;
|
||
|
||
form {
|
||
margin: 0;
|
||
}
|
||
|
||
button {
|
||
display: block;
|
||
width: 100%;
|
||
|
||
+ button {
|
||
margin-top: 0.5em;
|
||
}
|
||
}
|
||
}
|
||
|
||
fieldset {
|
||
margin: 0;
|
||
padding: 0;
|
||
border: 0;
|
||
|
||
&.centered {
|
||
margin-top: 3em;
|
||
text-align: center;
|
||
}
|
||
|
||
&.right-help {
|
||
text-align: center;
|
||
|
||
.input-field {
|
||
margin: 0;
|
||
}
|
||
|
||
+ .input-field-help {
|
||
overflow: auto;
|
||
margin-bottom: 2em;
|
||
}
|
||
}
|
||
}
|
||
|
||
.fieldgroup {
|
||
@include _-(display, flex);
|
||
@include _-(display, inline-flex);
|
||
@include _(align-items, flex-end);
|
||
@include _(flex-wrap, wrap);
|
||
margin: 0 0 3em 1em;
|
||
|
||
> .input-field {
|
||
margin-right: 1em;
|
||
@include _(flex, 1);
|
||
}
|
||
}
|
||
|
||
.view-object {
|
||
margin-bottom: 3em;
|
||
}
|
||
|
||
.comments {
|
||
list-style: none;
|
||
|
||
.comment {
|
||
position: relative;
|
||
border: 0.1rem solid #EEE;
|
||
border-radius: 0.25rem;
|
||
padding: 1em;
|
||
margin-top: 2em;
|
||
}
|
||
|
||
.comment-body {
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.comment-title {
|
||
position: absolute;
|
||
top: -0.75em;
|
||
left: 0.5em;
|
||
margin: 0;
|
||
padding: 0 0.5em;
|
||
background-color: #FFF;
|
||
}
|
||
|
||
time {
|
||
position: absolute;
|
||
top: -0.75em;
|
||
right: 0.75em;
|
||
background-color: #FFF;
|
||
padding: 0 0.5em;
|
||
}
|
||
|
||
.sub-comment {
|
||
font-size: 0.8em;
|
||
|
||
.comment-title, time {
|
||
top: -1em;
|
||
}
|
||
}
|
||
|
||
.text-area-field {
|
||
overflow: hidden;
|
||
max-height: 0;
|
||
padding: 0.3em;
|
||
@include _(transition, max-height 150ms ease-in-out);
|
||
}
|
||
|
||
#main .columns & form {
|
||
margin-top: 0;
|
||
button {
|
||
@include _(transition, background-color 150ms ease-in-out);
|
||
background-color: #888;
|
||
}
|
||
|
||
&.open {
|
||
@include _(opacity, 1);
|
||
|
||
.text-area-field {
|
||
max-height: 12em;
|
||
}
|
||
|
||
button {
|
||
background-color: $colour-5;
|
||
}
|
||
}
|
||
}
|
||
|
||
button {
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
#comments {
|
||
textarea {
|
||
font-size: 1.25em;
|
||
min-height: 7.5em;
|
||
}
|
||
|
||
.actions {
|
||
margin: 0;
|
||
|
||
button {
|
||
margin: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.flex-form, .flex-column {
|
||
button, .button {
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.flex-inputs {
|
||
@include _-(display, flex);
|
||
@include _(align-items, flex-end);
|
||
@include _(flex-wrap, wrap);
|
||
@include _(justify-content, flex-end);
|
||
margin-bottom: 2em;
|
||
|
||
.input-field {
|
||
margin: 0 0.5em;
|
||
}
|
||
|
||
.stretch-item {
|
||
@include _(flex, 1);
|
||
@include _(flex-basis, 100%);
|
||
|
||
select {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.actions {
|
||
text-align: center;
|
||
margin: 0 1em;
|
||
|
||
button, .button {
|
||
margin: 0 0.25em 1em;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
&.left {
|
||
text-align: left;
|
||
}
|
||
|
||
&.right {
|
||
text-align: right;
|
||
|
||
.note {
|
||
float: left;
|
||
color: $colour-1;
|
||
font-weight: bold;
|
||
font-size: 1.25em;
|
||
}
|
||
|
||
.left {
|
||
float: left;
|
||
}
|
||
}
|
||
|
||
&.fill {
|
||
@include _-(display, flex);
|
||
@include _(flex-wrap, wrap);
|
||
|
||
> button, > .button {
|
||
flex: 1;
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.conferences-view_workshop & {
|
||
margin-bottom: 5em;
|
||
}
|
||
|
||
&.next-prev {
|
||
@include _-(display, flex);
|
||
@include _(flex-wrap, wrap);
|
||
@include _(flex-direction, row-reverse);
|
||
margin: 0;
|
||
clear: both;
|
||
|
||
button, .button {
|
||
margin-bottom: 1em;
|
||
}
|
||
}
|
||
}
|
||
|
||
.test-preview {
|
||
padding: 0 1em;
|
||
border: 0.1em solid #CCC;
|
||
background-color: #F8F8F8;
|
||
|
||
h4 {
|
||
border-bottom: 0.1rem solid #CCC;
|
||
padding: 1em 0 0.75em;
|
||
font-size: 1.5em;
|
||
margin: 0 0 1em 0;
|
||
}
|
||
|
||
h5 {
|
||
font-size: 1.25em;
|
||
}
|
||
|
||
h6, p {
|
||
font-size: 1.125em;
|
||
}
|
||
}
|
||
|
||
ul.warnings {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
ul.warnings li,
|
||
.warning-info {
|
||
position: relative;
|
||
min-height: 4em;
|
||
border: 0.2em solid rgba(0, 0, 0, 0.1);
|
||
background-color: rgba($colour-3, 0.333);
|
||
padding: 1em 1em 1em 4em;
|
||
@include font-family(secondary);
|
||
text-align: left;
|
||
margin: 1em;
|
||
width: auto;
|
||
@include default-box-shadow(top, 2);
|
||
|
||
@include before {
|
||
content: '!';
|
||
display: block;
|
||
position: absolute;
|
||
top: 0.5em;
|
||
left: 0.5em;
|
||
width: 1.5em;
|
||
height: 1.5em;
|
||
background-color: $black;
|
||
color: $white;
|
||
text-align: center;
|
||
line-height: 1.5em;
|
||
font-size: 1.5em;
|
||
background-color: $colour-3;
|
||
@include _(border-radius, 50%);
|
||
@include default-box-shadow(top, 2);
|
||
}
|
||
}
|
||
|
||
.warning-info {
|
||
display: inline-block;
|
||
margin: 0;
|
||
vertical-align: bottom;
|
||
}
|
||
|
||
::-webkit-resizer {
|
||
visibility: hidden;
|
||
cursor: nw-resize;
|
||
}
|
||
|
||
@include selection {
|
||
background-color: rgba($colour-2, 0.75);
|
||
color: rgba($white, 0.75);
|
||
}
|
||
|
||
#main-nav {
|
||
@include font-family(secondary);
|
||
overflow: hidden;
|
||
|
||
.nav {
|
||
position: fixed;
|
||
z-index: 100;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 0;
|
||
font-size: 6vw;
|
||
background-color: #FFF;
|
||
@include _-(display, flex);
|
||
@include _(box-shadow, 0 0 2em -0.5em rgba(0, 0, 0, 0.5));
|
||
|
||
a.policy {
|
||
background-color: $colour-5;
|
||
@include _(order, 1);
|
||
}
|
||
|
||
a.about {
|
||
background-color: $colour-3;
|
||
@include _(order, 1);
|
||
}
|
||
|
||
form, .register {
|
||
background-color: $colour-2;
|
||
}
|
||
|
||
a, form {
|
||
width: 33%;
|
||
@include _(flex, 1);
|
||
}
|
||
|
||
a, form, button {
|
||
text-align: center;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
a, button {
|
||
display: inline-block;
|
||
font-weight: normal;
|
||
padding: 0.5em 0;
|
||
color: #FFF;
|
||
@include _(border-radius, 0);
|
||
@include _(box-shadow, inset 0 0 1.5em 0.25em rgba(0, 0, 0, 0.125));
|
||
@include _(text-shadow, 0 0 0.25em rgba(0,0,0,0.5));
|
||
|
||
@include after {
|
||
display: none;
|
||
}
|
||
|
||
.title {
|
||
font-size: 0.8em;
|
||
}
|
||
}
|
||
|
||
button {
|
||
background-color: transparent;
|
||
border: 0;
|
||
font-size: 1em;
|
||
width: 100%;
|
||
@include _(text-stroke, 0);
|
||
|
||
@include before {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
form {
|
||
display: inline;
|
||
}
|
||
|
||
.strlen-12, .strlen-13 {
|
||
.title {
|
||
font-size: 0.7em;
|
||
}
|
||
}
|
||
|
||
.strlen-14, .strlen-15 {
|
||
.title {
|
||
font-size: 0.6333em;
|
||
}
|
||
}
|
||
|
||
body.error-locale-not-available & {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.logo {
|
||
font-size: 5em;
|
||
}
|
||
}
|
||
|
||
.flow-steps {
|
||
ul {
|
||
display: block;
|
||
position: relative;
|
||
list-style: none;
|
||
padding: 0;
|
||
margin-top: -1em;
|
||
//overflow: hidden;
|
||
text-align: center;
|
||
@include default-box-shadow(top, 2);
|
||
@include clearfix;
|
||
}
|
||
|
||
li {
|
||
position: relative;
|
||
display: block;
|
||
@include font-family(secondary);
|
||
color: $white;
|
||
background-color: #BBB;
|
||
border: 0;
|
||
padding: 1em 1.5em;
|
||
font-size: 1.25em;
|
||
outline: 0;
|
||
cursor: default;
|
||
@include _(text-stroke, 1px rgba(0, 0, 0, 0.25));
|
||
|
||
&:last-child {
|
||
@include _(border-radius, 0 0 0.15em 0.15em);
|
||
}
|
||
|
||
&.enabled {
|
||
background-color: $colour-1;
|
||
|
||
&.current {
|
||
background-color: lighten(desaturate($colour-1, 33%), 15%);
|
||
}
|
||
}
|
||
}
|
||
|
||
a {
|
||
color: inherit;
|
||
position: static;
|
||
|
||
@include before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
}
|
||
|
||
@include after {
|
||
border-bottom: 0 solid rgba(0,0,0,0.25);
|
||
}
|
||
|
||
@include after {
|
||
border-bottom: 0.2em solid rgba(0,0,0,0.25);
|
||
}
|
||
}
|
||
|
||
#registration-steps {
|
||
|
||
li {
|
||
&:first-child {
|
||
@include _(border-radius, 0.15em 0.15em 0 0);
|
||
}
|
||
|
||
&:last-child {
|
||
@include _(border-radius, 0);
|
||
}
|
||
|
||
&.enabled {
|
||
background-color: $colour-5;
|
||
|
||
&.current {
|
||
background-color: lighten(desaturate($colour-5, 33%), 15%);
|
||
//text-decoration: underline;
|
||
}
|
||
}
|
||
|
||
@include after {
|
||
content: '';
|
||
position: absolute;
|
||
z-index: 1;
|
||
top: 2.25em;
|
||
left: 0;
|
||
right: 0;
|
||
width: 1.25em;
|
||
height: 1.25em;
|
||
margin: auto;
|
||
border: 0 solid;
|
||
border-width: 0.1em 0.1em 0 0;
|
||
background-color: inherit;
|
||
@include _(transform, rotate(135deg));
|
||
@include _(transition, 'transform 200ms ease-in-out, background-color 200ms ease-in-out');
|
||
@include _(box-shadow, 0.2em -0.4em 0.8em -0.4em #000);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#main article #registration-admin-menu {
|
||
margin: 1em 0 0;
|
||
padding: 0;
|
||
list-style: none;
|
||
|
||
a {
|
||
display: block;
|
||
padding: 0.5em 0.75em;
|
||
border: 0.1rem solid #EEE;
|
||
border-top: 0;
|
||
border-right: 0;
|
||
|
||
@include after {
|
||
display: none;
|
||
}
|
||
|
||
&:hover {
|
||
background-color: #EEE;
|
||
}
|
||
}
|
||
li {
|
||
margin: 0;
|
||
|
||
&.current {
|
||
a {
|
||
color: $white;
|
||
background-color: $colour-5;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.data-set {
|
||
display: table-row;
|
||
}
|
||
|
||
.data-set-key, .data-set-value {
|
||
display: table-cell;
|
||
padding: 0.25em 0.5em;
|
||
vertical-align: top;
|
||
border-bottom: 0.1rem solid #EEE;
|
||
}
|
||
|
||
.data-set-key {
|
||
font-size: 1em;
|
||
width: 1rem;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.data-set:last-child {
|
||
.data-set-key, .data-set-value {
|
||
border: 0;
|
||
}
|
||
}
|
||
|
||
.details {
|
||
display: table;
|
||
width: 100%;
|
||
|
||
&.inline {
|
||
width: auto;
|
||
}
|
||
}
|
||
|
||
.space, .address {
|
||
.data-set-key, .data-set-value {
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.admin-blocks {
|
||
@include _-(display, inline-flex);
|
||
@include _(flex-wrap, wrap);
|
||
@include _(align-items, flex-start);
|
||
@include _(justify-content, flex-start);
|
||
list-style: none;
|
||
padding: 0;
|
||
|
||
> li {
|
||
max-width: 25em;
|
||
border: 0.1rem solid #EEE;
|
||
padding: 1em;
|
||
margin: 0.25em;
|
||
@include _(flex, 1);
|
||
background-color: #F8F8F8;
|
||
@include default-box-shadow(top, 2);
|
||
}
|
||
|
||
.actions {
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.title {
|
||
margin: 0 0 1em;
|
||
padding: 0 0 0.5em;
|
||
border-bottom: 0.1rem solid #EEE;
|
||
}
|
||
|
||
.amenities {
|
||
list-style: none;
|
||
padding: 0;
|
||
|
||
> li {
|
||
font-weight: bold;
|
||
white-space: nowrap;
|
||
display: inline-block;
|
||
padding: 0 0.5em;
|
||
line-height: 1.5em;
|
||
font-size: 0.8em;
|
||
border: 0.1rem solid #CCC;
|
||
background-color: #EEE;
|
||
@include _(border-radius, 0.125rem);
|
||
}
|
||
}
|
||
}
|
||
|
||
#admin-housing {
|
||
#hosts {
|
||
background-color: $white;
|
||
|
||
ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.host {
|
||
padding: 0.5em;
|
||
border: 0.1em solid #EEE;
|
||
background-color: #F8F8F8;
|
||
|
||
&.status-good {
|
||
background-color: rgba($colour-5, 0.1);
|
||
}
|
||
|
||
&.status-warning {
|
||
background-color: rgba($colour-3, 0.1);
|
||
}
|
||
|
||
&.status-error {
|
||
background-color: rgba($colour-2, 0.1);
|
||
}
|
||
}
|
||
|
||
h4 {
|
||
margin: 0 0.5em 0 0;
|
||
float: left;
|
||
}
|
||
|
||
h5 {
|
||
margin: 1em 0 0;
|
||
}
|
||
|
||
.email {
|
||
color: #888;
|
||
|
||
@include before {
|
||
content: '(';
|
||
}
|
||
|
||
@include after {
|
||
content: ')';
|
||
}
|
||
}
|
||
|
||
.guests {
|
||
clear: left;
|
||
@include _-(display, flex);
|
||
}
|
||
|
||
.space {
|
||
@include _(flex, 1);
|
||
}
|
||
|
||
.place-guest {
|
||
background-color: $colour-5;
|
||
|
||
&.booked {
|
||
background-color: $colour-4;
|
||
}
|
||
|
||
&.unwanted {
|
||
background-color: #888;
|
||
}
|
||
|
||
&.overbooked {
|
||
background-color: $colour-2;
|
||
}
|
||
}
|
||
|
||
.warning, .error {
|
||
display: inline-block;
|
||
font-style: italic;
|
||
padding: 0 0.5em;
|
||
margin-left: 0.5em;
|
||
border: 0.1em solid rgba($black, 0.25);
|
||
@include _(border-radius, 0.125em);
|
||
@include _(transform, skewX(-15deg));
|
||
@include _(transform-origin, 0 100%);
|
||
@include _(animation, bend ease-in-out 500ms infinite alternate both);
|
||
}
|
||
|
||
.warning {
|
||
background-color: lighten($colour-3, 25%);
|
||
}
|
||
|
||
.error {
|
||
background-color: lighten($colour-2, 25%);
|
||
}
|
||
}
|
||
|
||
#guests {
|
||
.guests {
|
||
@include _-(display, flex);
|
||
//@include _(align-items, flex-start);
|
||
@include _(flex-wrap, wrap);
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.guest {
|
||
flex: 1;
|
||
margin: 0.5em;
|
||
border: 0.1rem solid #EEE;
|
||
background-color: #F8F8F8;
|
||
padding: 0.5em;
|
||
}
|
||
|
||
h4 {
|
||
margin: 0 0 0.5em;
|
||
}
|
||
|
||
.set-host {
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
#admin-workshop_times {
|
||
.workshop-blocks {
|
||
td, th {
|
||
vertical-align: top;
|
||
}
|
||
}
|
||
|
||
.table-tr.new {
|
||
.table-th {
|
||
background-color: transparent;
|
||
border: 0;
|
||
}
|
||
|
||
.table-td {
|
||
background-color: transparent;
|
||
border: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.details.org-members {
|
||
padding: 1em;
|
||
border: 0.1rem solid #EEE;
|
||
border-bottom: 0;
|
||
}
|
||
|
||
table.schedule {
|
||
width: 100%;
|
||
margin: 0 0 1em;
|
||
|
||
td {
|
||
text-align: center;
|
||
|
||
&.empty {
|
||
border-top: 0;
|
||
border-bottom: 0;
|
||
background-color: #F8F8F8;
|
||
}
|
||
|
||
&.workshop {
|
||
background-color: lighten($colour-1, 40%);
|
||
|
||
&.filled {
|
||
background-color: lighten($colour-1, 25%);
|
||
}
|
||
}
|
||
|
||
&.event {
|
||
background-color: lighten($colour-2, 25%);
|
||
}
|
||
|
||
&.meal {
|
||
background-color: lighten($colour-3, 25%);
|
||
}
|
||
|
||
.title {
|
||
@include font-family(secondary);
|
||
}
|
||
|
||
.status {
|
||
display: inline-block;
|
||
text-align: left;
|
||
float: right;
|
||
font-size: 0.9em;
|
||
margin-top: 0.5em;
|
||
}
|
||
|
||
.conflict-score {
|
||
text-align: right;
|
||
|
||
.title {
|
||
@include font-family(secondary);
|
||
}
|
||
}
|
||
|
||
.errors {
|
||
position: relative;
|
||
border-top: 0.1rem solid #666;
|
||
margin-top: 0.5em;
|
||
padding-top: 0.25em;
|
||
|
||
@include before {
|
||
content: '!';
|
||
display: inline-block;
|
||
position: absolute;
|
||
z-index: 1;
|
||
top: 0;
|
||
left: -1.2em;
|
||
width: 1em;
|
||
color: $white;
|
||
@include font-family(secondary);
|
||
}
|
||
|
||
@include after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0.1em;
|
||
left: -1.333em;
|
||
width: 0;
|
||
height: 0;
|
||
font-size: 1.25em;
|
||
border: 0.5em solid;
|
||
border-left-color: transparent;
|
||
border-right-color: transparent;
|
||
border-width: 0 0.5em 0.75em;
|
||
color: darken($colour-2, 25%);
|
||
}
|
||
}
|
||
|
||
#main .columns & form {
|
||
margin-top: 0;
|
||
|
||
button {
|
||
margin-top: 0.5em;
|
||
float: left;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
#admin-schedule {
|
||
.workshop-list {
|
||
@include _-(display, flex);
|
||
@include _(flex-wrap, wrap);
|
||
padding: 0;
|
||
|
||
li {
|
||
@include _(flex, 1);
|
||
@include _(flex-basis, 48%);
|
||
margin: 1%;
|
||
@include _(transition, background-color 250ms ease-in-out);
|
||
|
||
.title {
|
||
@include _(transition, background-color 250ms ease-in-out);
|
||
}
|
||
|
||
&.booked {
|
||
background-color: lighten($colour-1, 40%);
|
||
|
||
.not-booked-only {
|
||
display: none;
|
||
}
|
||
|
||
.data-set-key, .data-set-value {
|
||
border-bottom-color: #888;
|
||
}
|
||
}
|
||
|
||
&.not-booked {
|
||
|
||
.booked-only {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.field-error {
|
||
background-color: lighten($colour-2, 22.5%);
|
||
margin: 0;
|
||
}
|
||
|
||
.already-booked {
|
||
overflow: hidden;
|
||
max-height: 0;
|
||
|
||
&.is-true {
|
||
max-height: 3em;
|
||
@include _(transition, max-height 150ms ease-in-out);
|
||
}
|
||
}
|
||
|
||
.workshop-description {
|
||
max-height: none;
|
||
}
|
||
|
||
.details {
|
||
margin: 0 5% 1em;
|
||
width: 90%;
|
||
}
|
||
}
|
||
|
||
#main .columns & form {
|
||
margin: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
#main {
|
||
position: relative;
|
||
background-color: $white;
|
||
padding-bottom: rems(2);
|
||
@include _(flex, 1);
|
||
|
||
article {
|
||
padding: rems(2.5) 0;
|
||
margin: 0 1em;
|
||
|
||
&.supplementary {
|
||
margin: rems(1) 7.5%;
|
||
overflow: hidden;
|
||
@include _(border-radius, 0.33em);
|
||
border: 0.1rem solid #DDD;
|
||
background-color: #F7F7F7;
|
||
@include default-box-shadow(top, 2);
|
||
}
|
||
|
||
ul {
|
||
font-size: 1.125em;
|
||
line-height: 1.5em;
|
||
}
|
||
|
||
li {
|
||
margin-bottom: 0.5em;
|
||
}
|
||
}
|
||
|
||
.featured-image-container {
|
||
@include _-(display, flex);
|
||
@include _(flex-wrap, wrap);
|
||
|
||
figure {
|
||
@include _(order, 1);
|
||
width: 100%;
|
||
height: 12em;
|
||
margin: 0;
|
||
background-size: cover;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
}
|
||
}
|
||
|
||
a.logo {
|
||
display: inline-block;
|
||
font-size: rems(5);
|
||
text-decoration: none;
|
||
padding: 0.1em;
|
||
border: 0;
|
||
float: left;
|
||
overflow: auto;
|
||
@include clearfix;
|
||
|
||
&:hover,
|
||
&:active,
|
||
&:focus {
|
||
@include after {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
@if capable_of(svg) {
|
||
|
||
@include keyframes(active-logo) {
|
||
0% { fill: $colour-1; }
|
||
15% { fill: $colour-5; }
|
||
30% { fill: $colour-3; }
|
||
45% { fill: $colour-4; }
|
||
60% { fill: $colour-2; }
|
||
}
|
||
|
||
@include keyframes(banner-load) {
|
||
0% { fill: #888; }
|
||
}
|
||
|
||
svg.bb-icon-logo {
|
||
fill: $colour-1;
|
||
}
|
||
svg.bb-icon-logo-text {
|
||
fill: $black;
|
||
}
|
||
|
||
.logo:hover svg.bb-icon-logo {
|
||
@include _(animation, active-logo 4s infinite);
|
||
}
|
||
}
|
||
|
||
.logo .icons {
|
||
display: inline-block;
|
||
height: 1em;
|
||
width: 1em;
|
||
float: left;
|
||
}
|
||
|
||
#banner {
|
||
clear: left;
|
||
float: none;
|
||
margin: 1em auto 0;
|
||
text-align: center;
|
||
|
||
body.home & {
|
||
max-width: 40em;
|
||
}
|
||
|
||
figure {
|
||
position: relative;
|
||
width: 100%;
|
||
max-width: rems(60);
|
||
margin: 0;
|
||
}
|
||
|
||
img {
|
||
width: 100%;
|
||
}
|
||
|
||
.title {
|
||
font-size: 5vw;
|
||
margin: 1em auto 2em;
|
||
|
||
h1, h2 {
|
||
margin: 0;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 1.15em;
|
||
}
|
||
}
|
||
|
||
.secondary {
|
||
font-size: 0.85em;
|
||
line-height: 2em;
|
||
}
|
||
}
|
||
|
||
$header-tilt: 8deg;
|
||
|
||
#header-title {
|
||
font-size: 2.25vw;
|
||
background-size: cover;
|
||
background-position: 50% 20%;
|
||
background-repeat: no-repeat;
|
||
background-color: $colour-1;
|
||
color: #EEE;
|
||
overflow: hidden;
|
||
position: relative;
|
||
z-index: $zindex-base;
|
||
|
||
.row, .columns {
|
||
position: static;
|
||
}
|
||
|
||
rect {
|
||
fill: $colour-1;
|
||
}
|
||
|
||
svg {
|
||
.colour-1 { fill: $colour-1; }
|
||
.colour-2 { fill: $colour-2; }
|
||
.colour-3 { fill: $colour-3; }
|
||
.colour-4 { fill: $colour-4; }
|
||
.colour-5 { fill: $colour-5; }
|
||
}
|
||
|
||
.cover {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: $zindex-base;
|
||
background-size: inherit;
|
||
background-position: inherit;
|
||
}
|
||
|
||
@if capable_of(css-mixblendmode) {
|
||
position: relative;
|
||
|
||
.cover {
|
||
-webkit-filter: saturate(25%);
|
||
filter: saturate(25%);
|
||
@include _(mix-blend-mode, multiply);
|
||
}
|
||
}
|
||
|
||
&.no-image,
|
||
&.short {
|
||
h1 {
|
||
text-align: center;
|
||
font-size: 3.5em;
|
||
margin: 1.75em 0 .75em;
|
||
position: relative;
|
||
z-index: $zindex-base + 2;
|
||
@include _(text-shadow, 0 0 0.15em #000);
|
||
}
|
||
}
|
||
|
||
svg {
|
||
display: none;
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.title {
|
||
position: relative;
|
||
padding: 1%;
|
||
overflow: hidden;
|
||
text-align: center;
|
||
@include _(text-shadow, 0 0.2em 0.5em rgba(32, 32, 32, 0.5))
|
||
}
|
||
|
||
.background {
|
||
position: absolute;
|
||
@include _(transform, rotate($header-tilt));
|
||
color: $colour-1;
|
||
@include _(opacity, 0.65);
|
||
margin: -4% -2%;
|
||
@if capable_of(calc) {
|
||
font-size: calc(5vw + #{rems(7)});
|
||
} @else {
|
||
font-size: rems(11);
|
||
}
|
||
display: none;
|
||
}
|
||
|
||
.details {
|
||
position: relative;
|
||
display: inline-block;
|
||
color: $white;
|
||
@include _(text-shadow, 0 0.2em 0.5em rgba(32, 32, 32, 0.75));
|
||
}
|
||
|
||
.primary {
|
||
font-size: 2.5em;
|
||
margin: 0;
|
||
}
|
||
|
||
.secondary {
|
||
font-size: 1.5em;
|
||
}
|
||
|
||
body.error-locale-not-available & {
|
||
background-color: $colour-5;
|
||
}
|
||
|
||
body.error-500 & {
|
||
background-position: 50% 50%;
|
||
background-color: $colour-2;
|
||
}
|
||
|
||
body.error-403 & {
|
||
background-position: 50% 33%;
|
||
}
|
||
}
|
||
|
||
#footer {
|
||
padding: 1em;
|
||
|
||
footer {
|
||
@include _-(display, flex);
|
||
@include _(flex-flow, row wrap);
|
||
@include _(align-items, flex-end);
|
||
font-size: 4.1vw;
|
||
}
|
||
|
||
// .github {
|
||
// @include _(flex, 1);
|
||
// @include _(flex-basis, 50%);
|
||
// }
|
||
|
||
.site-info, .user-controls, .external {
|
||
width: 100%;
|
||
text-align: center;
|
||
|
||
a {
|
||
text-align: right;
|
||
white-space: nowrap;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
.external {
|
||
margin-bottom: 1em;
|
||
}
|
||
|
||
.my-account {
|
||
margin-right: 0.5em;
|
||
}
|
||
|
||
.logout {
|
||
margin-left: 0.5em;
|
||
}
|
||
|
||
.contact-us {
|
||
line-height: 2.5em;
|
||
}
|
||
|
||
.facebook {
|
||
a {
|
||
&:hover, &:active, &:focus {
|
||
svg {
|
||
fill: #3B579D;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.github, .facebook {
|
||
display: inline-block;
|
||
margin: 0.5em;
|
||
|
||
a {
|
||
@include after {
|
||
display: none;
|
||
}
|
||
svg {
|
||
@include _(transition, fill 250ms ease-in-out);
|
||
}
|
||
}
|
||
|
||
.icons {
|
||
width: 1.5em;
|
||
height: 1.5em;
|
||
fill: $black;
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
|
||
.github {
|
||
//position: relative;
|
||
//background-color: $white;
|
||
//@include _(border-radius, 0.25em);
|
||
//border: 0.1em solid #DDD;
|
||
//padding: 0.5em 0.5em 0.5em 2em;
|
||
//text-align: center;
|
||
//z-index: $zindex-base + 2;
|
||
|
||
//a {
|
||
// margin: 0 0.5em;
|
||
// font-size: 0.8em;
|
||
// font-weight: bold;
|
||
// color: inherit;
|
||
//}
|
||
|
||
//.icons {
|
||
// position: absolute;
|
||
// left: 0.5em;
|
||
// top: 0.45em;
|
||
// @include _(transition, 150ms fill ease-in-out);
|
||
//}
|
||
a {
|
||
@include after {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
&:hover .icons {
|
||
fill: #4183C4;
|
||
}
|
||
}
|
||
|
||
ul.locales {
|
||
@include _(flex, 1);
|
||
@include _(flex-basis, 100%);
|
||
padding: 0;
|
||
margin: 1em 0;
|
||
list-style: none;
|
||
text-align: center;
|
||
}
|
||
|
||
body.error-locale-not-available & {
|
||
.github, .facebook, .locales {
|
||
visibility: hidden;
|
||
}
|
||
}
|
||
}
|
||
|
||
body.error-locale-not-available {
|
||
.locales {
|
||
list-style: none;
|
||
padding: 0;
|
||
text-align: center;
|
||
|
||
li {
|
||
margin-bottom: 1em;
|
||
}
|
||
}
|
||
}
|
||
|
||
body {
|
||
#primary-content {
|
||
@include _(transition, 'filter 250ms ease-in-out, -webkit-filter 250ms ease-in-out');
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 100vh;
|
||
overflow: hidden;
|
||
}
|
||
|
||
&.has-overlay {
|
||
overflow: hidden;
|
||
|
||
#primary-content {
|
||
-webkit-filter: blur(5px);
|
||
@include _(filter, blur(5px));
|
||
}
|
||
|
||
#overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
cursor: pointer;
|
||
z-index: 1000;
|
||
}
|
||
}
|
||
}
|
||
|
||
#content-overlay {
|
||
display: none;
|
||
|
||
body.has-overlay & {
|
||
display: block;
|
||
}
|
||
|
||
.dlg {
|
||
@include before {
|
||
content: '';
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
background-color: rgba($black, 0);
|
||
@include _(transition, background-color 250ms ease-in-out);
|
||
}
|
||
|
||
&.open {
|
||
@include before {
|
||
background-color: rgba($black, 0.5);
|
||
}
|
||
|
||
.dlg-content {
|
||
@include _(transform, rotateZ(0deg));
|
||
}
|
||
}
|
||
}
|
||
|
||
.dlg-content {
|
||
position: fixed;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
max-width: 50rem;
|
||
max-height: 100%;
|
||
font-size: 0.9em;
|
||
overflow-y: auto;
|
||
margin: auto;
|
||
z-index: 1001;
|
||
background-color: $white;
|
||
text-align: center;
|
||
@include _(transition, transform 500ms ease-in-out);
|
||
@include _(transform, rotateX(-90deg));
|
||
@include _(transform-origin, center 250%);
|
||
}
|
||
|
||
.title {
|
||
padding: 0.5em;
|
||
background-color: $colour-5;
|
||
color: $white;
|
||
@include _(text-stroke, 1px rgba(0, 0, 0, 0.25));
|
||
}
|
||
|
||
.dlg-inner {
|
||
padding: 0 2em 2em;
|
||
}
|
||
|
||
button, .button {
|
||
margin: 0 0.25em 0.5em;
|
||
}
|
||
|
||
.message {
|
||
margin-bottom: 2em;
|
||
}
|
||
|
||
#info-dlg .title {
|
||
background-color: $colour-1;
|
||
font-size: 1.5em;
|
||
text-align: left;
|
||
}
|
||
|
||
#info-dlg .message {
|
||
text-align: left;
|
||
|
||
p, h4 {
|
||
font-size: 0.8em;
|
||
}
|
||
|
||
h3 {
|
||
font-size: 1em;
|
||
}
|
||
|
||
h5 {
|
||
font-size: 0.667em;
|
||
}
|
||
|
||
h6 {
|
||
font-size: 0.8em;
|
||
}
|
||
}
|
||
|
||
#login-dlg .title {
|
||
font-size: 2em;
|
||
margin-bottom: 1em;
|
||
}
|
||
|
||
#contact-dlg {
|
||
.title {
|
||
background-color: $colour-4;
|
||
}
|
||
|
||
.email-field {
|
||
margin-top: 2em;
|
||
}
|
||
|
||
textarea {
|
||
min-height: 7.5em;
|
||
}
|
||
}
|
||
}
|
||
|
||
@include keyframes(fade-out) {
|
||
to {
|
||
@include _(opacity, 0.25);
|
||
}
|
||
}
|
||
|
||
@include keyframes(colour-out) {
|
||
to {
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
|
||
html :focus {
|
||
outline: 0;
|
||
}
|
||
|
||
@mixin header-colour($page, $colour) {
|
||
body.#{$page} {
|
||
#header-title {
|
||
background-color: $colour;
|
||
|
||
rect {
|
||
fill: $colour;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
@include header-colour(about, $colour-3);
|
||
@include header-colour(policy, $colour-5);
|
||
|
||
#bike_small + label {
|
||
padding: 0.5em 2.5em;
|
||
}
|
||
|
||
#bike_medium + label {
|
||
padding: 0.5em 1.5em;
|
||
}
|
||
|
||
#main .three-options {
|
||
text-align: center;
|
||
|
||
button {
|
||
background-color: $colour-4;
|
||
width: 6em;
|
||
font-size: 1.5em;
|
||
margin: 0.25em;
|
||
|
||
&:first-child {
|
||
background-color: $colour-3;
|
||
}
|
||
|
||
&:last-child {
|
||
background-color: $colour-5;
|
||
}
|
||
}
|
||
}
|
||
|
||
#main .skip {
|
||
button {
|
||
background-color: #CCC;
|
||
}
|
||
}
|
||
|
||
#main form.payment {
|
||
text-align: center;
|
||
|
||
input[type="number"] {
|
||
margin-top: 1em;
|
||
font-size: 1.5em;
|
||
text-align: center;
|
||
width: 4em;
|
||
height: 1.9em;
|
||
border: 0;
|
||
@include default-box-shadow(top);
|
||
background-color: $black;
|
||
color: $colour-3;
|
||
vertical-align: bottom;
|
||
}
|
||
|
||
> button {
|
||
background-color: $colour-1;
|
||
}
|
||
|
||
.currency {
|
||
color: #888;
|
||
font-size: 1.667em;
|
||
}
|
||
}
|
||
|
||
#main ul.workshops {
|
||
list-style: none;
|
||
padding: 0;// 1em;
|
||
text-align: center;
|
||
@include default-box-shadow(top, 2, true);
|
||
background-color: #F8F8F8;
|
||
|
||
li {
|
||
display: inline-block;
|
||
margin: 0.5em;
|
||
vertical-align: middle;
|
||
|
||
@include before {
|
||
content: '';
|
||
display: none;
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
background-color: #000;
|
||
z-index: 99;
|
||
@include _(opacity, 0.5);
|
||
}
|
||
|
||
&.view {
|
||
@include before {
|
||
display: block;
|
||
}
|
||
|
||
.info {
|
||
left: 0;
|
||
right: 0;
|
||
top: 50%;
|
||
@include _(transform, translateY(-50%) scale(1));
|
||
|
||
@include breakpoint(large) {
|
||
left: 19rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
h4, h5 {
|
||
color: $white;
|
||
background-color: $colour-1;
|
||
@include _(text-stroke, 1px rgba(0, 0, 0, 0.25));
|
||
}
|
||
|
||
h4 {
|
||
max-width: 10em;
|
||
cursor: pointer;
|
||
margin: 0;
|
||
padding: 1em;
|
||
position: relative;
|
||
@include default-box-shadow(top);
|
||
@include _(transition, transform 100ms ease-in-out);
|
||
|
||
&:hover {
|
||
z-index: $zindex-base + 3;
|
||
@include _(transform, scale(1.25));
|
||
}
|
||
}
|
||
|
||
h5 {
|
||
font-size: 1.5em;
|
||
margin: 0;
|
||
padding: 0.5em 1em;
|
||
|
||
+ p {
|
||
margin-top: 0;
|
||
}
|
||
}
|
||
|
||
p {
|
||
padding: 1em;
|
||
max-height: 50vh;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
form {
|
||
text-align: center;
|
||
}
|
||
|
||
button {
|
||
margin: 1em 0.5em;
|
||
}
|
||
|
||
[contenteditable] {
|
||
outline: none;
|
||
}
|
||
|
||
.info {
|
||
position: fixed;
|
||
background-color: $white;
|
||
color: $black;
|
||
left: auto;
|
||
right: auto;
|
||
top: auto;
|
||
z-index: 100;
|
||
max-width: 40em;
|
||
max-height: 40em;
|
||
margin: auto;
|
||
text-align: left;
|
||
@include _(transition, all 250ms ease-in-out);
|
||
@include _(transform, translateY(0) scale(0));
|
||
@include default-box-shadow(top);
|
||
}
|
||
|
||
[value="delete"] {
|
||
background-color: $colour-2;
|
||
}
|
||
|
||
[value="cancel"] {
|
||
background-color: $colour-4;
|
||
}
|
||
}
|
||
|
||
.conferences-register .policy-agreement {
|
||
padding: 0.25em 1em;
|
||
margin: 0 0 3em;
|
||
border: 0.1em solid #DDD;
|
||
@include _(border-radius, 0.25em);
|
||
@include default-box-shadow(top, 2);
|
||
}
|
||
|
||
body.policy .policy-agreement ul {
|
||
padding: 0 1.5em 0;
|
||
}
|
||
|
||
.stats {
|
||
list-style: none;
|
||
|
||
h3 {
|
||
display: inline-block;
|
||
}
|
||
|
||
.stat {
|
||
position: relative;
|
||
padding: 0 0.25em;
|
||
margin: 0.5em;
|
||
font-size: 2em;
|
||
display: inline-block;
|
||
color: $white;
|
||
background-color: $colour-1;
|
||
@include default-box-shadow(top, 2);
|
||
@include _(text-stroke, 1px rgba(0, 0, 0, 0.25));
|
||
|
||
&.important {
|
||
width: 2em;
|
||
height: 2em;
|
||
line-height: 2em;
|
||
text-align: center;
|
||
@include _(border-radius, 50%);
|
||
}
|
||
}
|
||
|
||
.money .stat {
|
||
background-color: $colour-5;
|
||
}
|
||
|
||
.percent {
|
||
font-size: 1.5em;
|
||
}
|
||
|
||
.value {
|
||
position: relative;
|
||
z-index: $zindex-base + 2;
|
||
}
|
||
|
||
.stat-with-label {
|
||
display: inline-block;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
background-color: $colour-3;
|
||
margin: 0.5em;
|
||
@include default-box-shadow(top, 2);
|
||
|
||
.stat {
|
||
margin-top: 0.25em;
|
||
}
|
||
}
|
||
|
||
.label {
|
||
padding: 0.5em 0.5em 0;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.breakdown {
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.email-preview {
|
||
max-width: 40rem;
|
||
margin: 2em auto 0;
|
||
padding: 0.25em 1em;
|
||
background-color: #F8F8F8;
|
||
@include default-box-shadow(top, 2, true);
|
||
}
|
||
|
||
.facilitators {
|
||
display: inline-block;
|
||
|
||
.facilitator {
|
||
margin: 0 0 0.5em 0.5em;
|
||
padding: 1.5em 0.5em 0.5em;
|
||
border-top: 0.1em solid #CCC;
|
||
|
||
&:first-child {
|
||
border: 0;
|
||
padding-top: 0;
|
||
}
|
||
}
|
||
|
||
.name {
|
||
position: relative;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.details {
|
||
margin-top: 0.5em;
|
||
}
|
||
|
||
.email {
|
||
margin-bottom: 0.5em;
|
||
}
|
||
|
||
.name, .role {
|
||
display: inline;
|
||
}
|
||
|
||
.role {
|
||
color: #666;
|
||
white-space: nowrap;
|
||
|
||
@include before {
|
||
content: '(';
|
||
}
|
||
|
||
@include after {
|
||
content: ')';
|
||
}
|
||
|
||
&:last-child {
|
||
@include after {
|
||
content: ')';
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.workshop-previews {
|
||
position: relative;
|
||
list-style: none;
|
||
padding: 0;
|
||
|
||
p {
|
||
padding: 0 1rem 0.5rem;
|
||
font-size: 1em;
|
||
color: $black;
|
||
}
|
||
|
||
h4 {
|
||
color: $white;
|
||
background-color: $colour-1;
|
||
padding: 0.5em 1em;
|
||
margin: 0;
|
||
@include _(text-stroke, 1px rgba(0, 0, 0, 0.25));
|
||
}
|
||
|
||
a {
|
||
display: block;
|
||
max-height: 10em;
|
||
overflow: hidden;
|
||
margin: 0.5em 0;
|
||
@include default-box-shadow(top, 2);
|
||
@include _(transition, transform 150ms ease-in-out);
|
||
|
||
&:hover, &:focus, &:active {
|
||
z-index: $zindex-base + 2;
|
||
@include _(transform, scale(1.1));
|
||
}
|
||
|
||
@include before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: $zindex-base + 2;
|
||
cursor: pointer;
|
||
@include _(box-shadow, inset 0em -2em 2em -1em $white);
|
||
}
|
||
|
||
@include after {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.translated-content.block {
|
||
display: inherit;
|
||
}
|
||
|
||
html[data-lingua-franca-example="html"] {
|
||
$caption-height: 4rem;
|
||
@include _(transform, translateY($caption-height));
|
||
|
||
#lingua-franca-window-caption {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: $caption-height;
|
||
background-color: #CCC;
|
||
z-index: 1000;
|
||
font-size: 1rem;
|
||
@include _(transform, translateY($caption-height * -1));
|
||
|
||
.window-tab {
|
||
height: 1.75rem;
|
||
position: relative;
|
||
background-color: #EEE;
|
||
float: left;
|
||
padding: 0.25em 2em 0 1em;
|
||
margin: 0.25em 1em;
|
||
@include _(border-radius, 0.5em 0.5em 0 0);
|
||
color: #444;
|
||
@include font-family(secondary);
|
||
|
||
@include after {
|
||
content: '×';
|
||
position: absolute;
|
||
right: 0.5em;
|
||
top: 0.25em;
|
||
}
|
||
}
|
||
|
||
i {
|
||
font-style: normal;
|
||
}
|
||
|
||
.window-minimize,
|
||
.window-maximize {
|
||
@include after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0.75em;
|
||
right: 2em;
|
||
border-style: solid;
|
||
border-width: 0 0.5em 0.5em 0.5em;
|
||
border-left-color: transparent;
|
||
border-right-color: transparent;
|
||
}
|
||
}
|
||
|
||
.window-minimize {
|
||
@include after {
|
||
right: 3.5em;
|
||
border-top-width: 0.5em;
|
||
border-bottom-width: 0;
|
||
}
|
||
}
|
||
|
||
.window-close {
|
||
@include after {
|
||
content: '×';
|
||
position: absolute;
|
||
right: 0.25em;
|
||
top: 0.1em;
|
||
font-size: 1.75em;
|
||
line-height: 1em;
|
||
}
|
||
}
|
||
|
||
.window-url-bar {
|
||
position: absolute;
|
||
top: $caption-height / 2;
|
||
left: 0;
|
||
width: 100%;
|
||
height: $caption-height / 2;
|
||
background-color: #EEE;
|
||
|
||
.url-bar {
|
||
position: absolute;
|
||
top: 0.25rem;
|
||
left: 3.5rem;
|
||
bottom: 0.25rem;
|
||
right: 0.25rem;
|
||
background-color: #FFF;
|
||
border: 1px solid #CCC;
|
||
padding: 0 0.25rem;
|
||
font-size: 0.8em;
|
||
line-height: 1.75em;
|
||
}
|
||
}
|
||
|
||
.window-back,
|
||
.window-forward {
|
||
@include after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0.5em;
|
||
top: 0.5em;
|
||
border-style: solid;
|
||
border-width: 0.5em 0.75em 0.5em 0;
|
||
border-top-color: transparent;
|
||
border-bottom-color: transparent;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
.window-forward {
|
||
@include after {
|
||
left: 2em;
|
||
border-right-width: 0;
|
||
border-left-width: 0.75em;
|
||
}
|
||
}
|
||
}
|
||
|
||
@include translation-pointer;
|
||
}
|
||
|
||
.workshop-notes {
|
||
p {
|
||
font-size: 1em;
|
||
}
|
||
}
|
||
|
||
.workshop-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
|
||
.workshop-description {
|
||
font-size: 0.8em;
|
||
max-height: 20em;
|
||
padding: 1em;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.workshop-link {
|
||
position: static;
|
||
|
||
@include before {
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0
|
||
}
|
||
@include after {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
> li {
|
||
position: relative;
|
||
margin-bottom: 1em;
|
||
border: 0.2em solid;
|
||
@include _(border-radius, 0.25em);
|
||
@include _(transition, box-shadow 250ms ease-in-out);
|
||
will-change: box-shadow;
|
||
|
||
ul {
|
||
padding-left: 2.5em;
|
||
margin-bottom: 1.5em;
|
||
}
|
||
|
||
li {
|
||
border: 0;
|
||
}
|
||
|
||
&:hover {
|
||
@include default-box-shadow;
|
||
}
|
||
|
||
&.interested {
|
||
.workshop-interest {
|
||
background-color: rgba($colour-5, 0.5);
|
||
}
|
||
}
|
||
|
||
&.mine {
|
||
.workshop-interest {
|
||
background-color: lighten($colour-1, 25%);
|
||
background-color: rgba($colour-1, 0.5);
|
||
}
|
||
}
|
||
}
|
||
|
||
.title {
|
||
margin: 0;
|
||
background-color: $black;
|
||
color: #FFF;
|
||
padding: 0.25em 0.5em 0.5em;
|
||
}
|
||
|
||
p {
|
||
margin-top: 0;
|
||
font-size: 1em;
|
||
}
|
||
|
||
.workshop-interest {
|
||
padding: 0.5em 1em;
|
||
font-weight: bold;
|
||
background-color: #EEE;
|
||
}
|
||
}
|
||
|
||
#main .workshop-interest {
|
||
text-align: right;
|
||
|
||
form {
|
||
display: inline;
|
||
}
|
||
|
||
button {
|
||
font-size: 0.9em;
|
||
margin: 1em;
|
||
background-color: $colour-1;
|
||
vertical-align: middle;
|
||
|
||
&.delete {
|
||
background-color: $colour-4;
|
||
}
|
||
}
|
||
|
||
body.home & {
|
||
text-align: left;
|
||
font-style: italic;
|
||
color: #888;
|
||
margin-top: -0.5em;
|
||
margin-bottom: -0.5em;
|
||
margin-left: 1em;
|
||
}
|
||
}
|
||
|
||
.original-text {
|
||
margin: 0 0 1em 1em;
|
||
|
||
.value {
|
||
border: 0.1em solid #DDD;
|
||
padding: 1em;
|
||
margin: 1em 0 3em 0;
|
||
background-color: #F8F8F8;
|
||
@include _(border-radius, 0.25em);
|
||
}
|
||
|
||
h4, h5, h6 {
|
||
margin: 0;
|
||
}
|
||
|
||
h5 {
|
||
font-size: 1em;
|
||
}
|
||
|
||
h6 {
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
p {
|
||
margin: 0.5em 0;
|
||
font-size: 0.9em;
|
||
}
|
||
}
|
||
|
||
.facilitator .button {
|
||
font-size: 0.9em;
|
||
vertical-align: -0.75em;
|
||
}
|
||
|
||
#main .facilitators .actions {
|
||
margin: 0;
|
||
}
|
||
|
||
#main form.add-facilitator {
|
||
button {
|
||
height: 2.4em;
|
||
font-size: 0.9em;
|
||
}
|
||
}
|
||
|
||
.conferences-edit_schedule {
|
||
#main {
|
||
.location {
|
||
padding-top: 0.25em;
|
||
}
|
||
.errors {
|
||
padding: 0.25em;
|
||
background-color: $colour-2;
|
||
color: $white;
|
||
@include _(text-stroke, 0.5px #000);
|
||
}
|
||
.conflict-score {
|
||
padding: 0.25em;
|
||
background-color: $colour-3;
|
||
color: $black;
|
||
}
|
||
.all-workshops, .all-events {
|
||
list-style: none;
|
||
padding: 0;
|
||
|
||
li {
|
||
margin: 0.5em;
|
||
padding: 0.5em;
|
||
border: 1px solid #CCC;
|
||
background-color: lighten($colour-1, 35);
|
||
@include default-box-shadow(top, 2);
|
||
|
||
&.error {
|
||
outline: 0.2em solid $colour-2;
|
||
outline-offset: -0.2em;
|
||
}
|
||
}
|
||
|
||
h3 {
|
||
margin: 0;
|
||
}
|
||
|
||
.workshop-interest {
|
||
color: #888;
|
||
text-align: left;
|
||
margin: 0.25em 0;
|
||
}
|
||
|
||
.error-description {
|
||
background-color: $colour-2;
|
||
color: $white;
|
||
padding: 0.5em;
|
||
margin-top: 0.5em;
|
||
}
|
||
|
||
.warnings {
|
||
background-color: $colour-3;
|
||
color: $black;
|
||
padding: 0.5em;
|
||
margin-top: 0.5em;
|
||
list-style: none;
|
||
|
||
li {
|
||
padding: 0;
|
||
margin: 0;
|
||
background-color: transparent;
|
||
@include _(box-shadow, none);
|
||
}
|
||
}
|
||
}
|
||
.day_parts {
|
||
list-style: none;
|
||
|
||
h4 {
|
||
display: inline-block;
|
||
min-width: 12.5em;
|
||
margin: 0.25em 0;
|
||
}
|
||
|
||
select, .select {
|
||
float: right;
|
||
min-width: 5em;
|
||
}
|
||
|
||
.select {
|
||
padding-left: 0.25em;
|
||
}
|
||
}
|
||
.actions {
|
||
margin: 2em;
|
||
}
|
||
.unsaved {
|
||
@include font-family(secondary);
|
||
background-color: lighten($colour-3, 25);
|
||
margin: 0 5em 2em;
|
||
padding: 0.5em;
|
||
}
|
||
.all-events {
|
||
li {
|
||
background-color: lighten($colour-5, 35);
|
||
|
||
&.meal {
|
||
background-color: lighten($colour-3, 25);
|
||
}
|
||
}
|
||
|
||
h3 {
|
||
margin-bottom: 0.5em;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.conferences-schedule {
|
||
.actions {
|
||
margin: 2em;
|
||
}
|
||
|
||
ul.events, ul.locations {
|
||
list-style: none;
|
||
|
||
.button {
|
||
float: left;
|
||
font-size: 1em;
|
||
margin-bottom: 0.5em;
|
||
margin-right: 0.5em;
|
||
}
|
||
|
||
h3 {
|
||
display: inline-block;
|
||
margin: 0.25em 0 0;
|
||
}
|
||
|
||
li {
|
||
clear: both;
|
||
}
|
||
}
|
||
}
|
||
|
||
.programme {
|
||
|
||
.schedule {
|
||
width: auto;
|
||
margin: 0;
|
||
min-width: 100%;
|
||
@include _(box-shadow, none);
|
||
table-layout: fixed;
|
||
border-spacing: 0.25em;
|
||
border-collapse: separate;
|
||
|
||
td {
|
||
position: relative;
|
||
vertical-align: middle;
|
||
|
||
.title {
|
||
text-align: center;
|
||
@include font-family(secondary);
|
||
color: #666;
|
||
}
|
||
|
||
|
||
&.previewable {
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
@include default-box-shadow(top, 2);
|
||
}
|
||
}
|
||
|
||
&.workshop {
|
||
background-color: lighten($colour-1, 35);
|
||
border: 0.25em solid $colour-1;
|
||
|
||
.preview {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
|
||
@include after {
|
||
display: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
&.event {
|
||
background-color: lighten($colour-5, 35);
|
||
border: 0.25em solid $colour-5;
|
||
}
|
||
|
||
&.meal {
|
||
background-color: lighten($colour-3, 25);
|
||
border: 0.25em solid $colour-3;
|
||
}
|
||
|
||
&.not-interested {
|
||
.title {
|
||
opacity: 0.5;
|
||
}
|
||
}
|
||
|
||
.info {
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: 1000;
|
||
background-color: $white;
|
||
text-align: left;
|
||
overflow-y: auto;
|
||
@include _(transition, transform 250ms ease-in-out);
|
||
@include _(transform-origin, center bottom);
|
||
@include _(transform, rotate(180deg) translate3d(0, 0, 0));
|
||
|
||
.close {
|
||
float: right;
|
||
font-size: 2em;
|
||
|
||
@include before {
|
||
content: '×';
|
||
padding: 0 0.5em;
|
||
}
|
||
|
||
@include after {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
h2 {
|
||
margin-bottom: 0.5em;
|
||
}
|
||
}
|
||
|
||
&:target .info {
|
||
@include _(transform, rotate(0) translate3d(0, 0, 0));
|
||
}
|
||
}
|
||
}
|
||
|
||
.programme-day {
|
||
margin-top: 2em;
|
||
}
|
||
|
||
.programme-day-part {
|
||
overflow-x: auto;
|
||
}
|
||
}
|
||
|
||
.select-field {
|
||
line-height: 1.75em;
|
||
|
||
select {
|
||
display: block;
|
||
height: 1.75em;
|
||
font-family: inherit;
|
||
font-size: 1.5em;
|
||
padding: 0 0.5em;
|
||
border: 0.1rem solid #CCC;
|
||
cursor: pointer;
|
||
@include default-box-shadow(top, 1.5, false);
|
||
|
||
td &,
|
||
.table-td & {
|
||
@include _(box-shadow, none);
|
||
}
|
||
}
|
||
|
||
&.full select {
|
||
width: 100%;
|
||
margin-bottom: 2em;
|
||
}
|
||
}
|
||
|
||
.toggleable {
|
||
@include _(transition, 'transform 250ms ease-in-out, max-height 250ms ease-in-out, visibility 0s linear 250ms');
|
||
@include _(transform, scaleY(0));
|
||
@include _(transform-origin, 0 0);
|
||
max-height: 0;
|
||
visibility: hidden;
|
||
|
||
&.open {
|
||
@include _(transition, 'transform 250ms ease-in-out, max-height 250ms ease-in-out');
|
||
max-height: 100em;
|
||
visibility: visible;
|
||
@include _(transform, scaleX(1));
|
||
}
|
||
}
|
||
|
||
.on-top-only, .on-top-controls {
|
||
display: none !important;
|
||
}
|
||
|
||
html[data-ontop] {
|
||
body {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.on-top-target {
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
padding: 1em;
|
||
margin: 0 !important;
|
||
z-index: 100;
|
||
overflow: auto;
|
||
}
|
||
|
||
.on-top-control {
|
||
position: fixed;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: 101;
|
||
margin: 0 !important;
|
||
padding: 1em;
|
||
background-color: #F8F8F8;
|
||
@include default-box-shadow(bottom, 2);
|
||
}
|
||
|
||
.on-top-controls {
|
||
overflow: auto;
|
||
|
||
.on-top-close {
|
||
float: right;
|
||
background-color: $colour-4;
|
||
}
|
||
}
|
||
|
||
.on-top-only, .on-top-controls {
|
||
display: inherit !important;
|
||
|
||
&.space {
|
||
display: block !important;
|
||
}
|
||
}
|
||
|
||
.not-on-top {
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
@include breakpoint(medium) {
|
||
:focus,
|
||
input[type="submit"]:focus,
|
||
.check-box-field input:focus + label,
|
||
.radio-button-field input:focus + label,
|
||
.select-field select:focus,
|
||
.workshop-link:focus .title,
|
||
#main-nav .nav a:focus .title {
|
||
html[data-input="kb"] & {
|
||
outline: 0.25rem solid rgba($colour-2, 0.5);
|
||
outline-offset: 0.2rem;
|
||
z-index: 1;
|
||
}
|
||
}
|
||
|
||
html[data-input="kb"] {
|
||
#main-nav .logo:focus {
|
||
outline-offset: -0.2em;
|
||
}
|
||
|
||
.workshop-link:focus,
|
||
#main-nav .nav a:focus {
|
||
outline: none;
|
||
}
|
||
}
|
||
|
||
body {
|
||
padding-bottom: 0;
|
||
}
|
||
|
||
h2 {
|
||
font-size: 2.25em;
|
||
}
|
||
|
||
h3 {
|
||
font-size: 1.4em;
|
||
}
|
||
|
||
p {
|
||
font-size: 1.25em;
|
||
}
|
||
|
||
fieldset {
|
||
&.right-help {
|
||
float: left;
|
||
text-align: left;
|
||
margin-right: 1.5em;
|
||
}
|
||
}
|
||
|
||
form {
|
||
&.flex-form {
|
||
@include _-(display, flex);
|
||
@include _(align-items, flex-start);
|
||
|
||
.input-field {
|
||
@include _(flex, 1);
|
||
}
|
||
|
||
button, .button {
|
||
margin-left: 1em;
|
||
height: 2.6em;
|
||
}
|
||
}
|
||
}
|
||
|
||
.input-field {
|
||
&.big select,
|
||
&.big input {
|
||
font-size: 2em;
|
||
}
|
||
}
|
||
|
||
.flex-column {
|
||
@include _-(display, flex);
|
||
@include _(align-items, flex-start);
|
||
margin-top: 1em;
|
||
|
||
p:first-child {
|
||
margin-top: 0;
|
||
}
|
||
|
||
.stretch-item {
|
||
@include _(flex, 1);
|
||
margin-right: 1em;
|
||
}
|
||
}
|
||
|
||
.flex-form, .flex-column {
|
||
button, .button {
|
||
width: auto;
|
||
}
|
||
}
|
||
|
||
.flex-inputs {
|
||
.stretch-item {
|
||
@include _(flex, 1);
|
||
@include _(flex-basis, auto);
|
||
}
|
||
}
|
||
|
||
#main-nav {
|
||
.logo {
|
||
margin-top: 0.25em;
|
||
font-size: 4.25em;
|
||
}
|
||
|
||
.nav {
|
||
position: static;
|
||
font-size: 1.8em;
|
||
display: block;
|
||
text-align: right;
|
||
background-color: transparent;
|
||
@include _(box-shadow, none);
|
||
|
||
form {
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
|
||
.nav a, .nav button {
|
||
width: auto;
|
||
min-width: 3.5em;
|
||
overflow: visible;
|
||
margin-left: 0.725em;
|
||
line-height: 3em;
|
||
padding: 0 0 1em;
|
||
color: $black;
|
||
@include _(box-shadow, none);
|
||
@include _(text-shadow, none);
|
||
|
||
@include before-and-after {
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
background-color: rgba(0, 0, 0, 0.33);
|
||
z-index: -1;
|
||
margin: 0;
|
||
border: 0;
|
||
font-size: 1em;
|
||
left: -0.51em;
|
||
right: -0.51em;
|
||
top: 0;
|
||
height: 0;
|
||
width: auto;
|
||
@include _(opacity, 1);
|
||
@include _(transition, height 150ms ease-in-out);
|
||
@include _(transform, rotate(-20deg) scaleX(0.94) scaleY(1.5) translate(-0.5em, -0.5em));
|
||
@include _(transform-origin, 0 0);
|
||
}
|
||
|
||
@include after {
|
||
height: 3em;
|
||
@include _(opacity, 0.1);
|
||
}
|
||
@include before {
|
||
box-shadow: 0 0 2em -0.5em rgba(#000, 0.75);
|
||
@include _(opacity, 0.33);
|
||
}
|
||
|
||
&.current {
|
||
z-index: 2;
|
||
|
||
@include before {
|
||
height: 3em;
|
||
@include _(opacity, 0.67);
|
||
}
|
||
}
|
||
|
||
&:hover {
|
||
@include before {
|
||
height: 3em;
|
||
}
|
||
}
|
||
}
|
||
|
||
.nav a {
|
||
&[class] {
|
||
background-color: transparent;
|
||
}
|
||
|
||
&.policy {
|
||
@include before-and-after {
|
||
background-color: $colour-5;
|
||
}
|
||
}
|
||
|
||
&.about {
|
||
@include before-and-after {
|
||
background-color: $colour-3;
|
||
}
|
||
}
|
||
}
|
||
|
||
.nav a.register, .nav button {
|
||
@include before-and-after {
|
||
background-color: $colour-2;
|
||
}
|
||
&:focus, &:active {
|
||
@include _(transform, none);
|
||
}
|
||
}
|
||
}
|
||
|
||
#banner {
|
||
margin: 3em auto;
|
||
|
||
figure {
|
||
min-height: 40em;
|
||
margin: rems(-20) auto rems(2);
|
||
}
|
||
|
||
.title {
|
||
font-size: 1.9em;
|
||
margin: 3em 0 1em;
|
||
}
|
||
|
||
img {
|
||
@include _(box-shadow, 0 0 2em -0.5em rgba(0, 0, 0, 0.5));
|
||
}
|
||
}
|
||
|
||
.flow-steps {
|
||
#registration-steps {
|
||
li {
|
||
display: inline-block;
|
||
text-align: center;
|
||
float: left;
|
||
|
||
@include after {
|
||
content: '';
|
||
top: 1.125em;
|
||
left: auto;
|
||
right: -0.25em;
|
||
@include _(transform, rotate(45deg));
|
||
}
|
||
|
||
/*&.enabled:hover,
|
||
&.enabled:hover ~ li {
|
||
@include after {
|
||
@include _(transform, rotate(-135deg));
|
||
background-color: transparent;
|
||
}
|
||
}*/
|
||
|
||
&:first-child {
|
||
@include _(border-radius, 0.15em 0 0 0.15em);
|
||
}
|
||
|
||
&:last-child {
|
||
@include _(border-radius, 0);
|
||
}
|
||
}
|
||
}
|
||
|
||
#post-registration-steps {
|
||
margin-bottom: -2em;
|
||
|
||
li {
|
||
&:last-child {
|
||
@include _(border-bottom-right-radius, 0.15em);
|
||
@include _(border-bottom-left-radius, 0.15em);
|
||
}
|
||
|
||
&:first-child {
|
||
@include _(border-top-right-radius, 0.15em);
|
||
@include _(border-bottom-left-radius, 0);
|
||
}
|
||
}
|
||
}
|
||
|
||
ul {
|
||
display: inline-block;
|
||
text-align: left;
|
||
margin-top: -4em;
|
||
vertical-align: top;
|
||
}
|
||
|
||
li {
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
#registration-admin-menu {
|
||
a {
|
||
margin: 0;
|
||
}
|
||
}
|
||
|
||
ul.warnings {
|
||
li {
|
||
margin: 1em 4em;
|
||
}
|
||
}
|
||
|
||
.warning-info {
|
||
margin-left: 1em;
|
||
}
|
||
|
||
.workshop-list {
|
||
padding: 0 2em;
|
||
}
|
||
|
||
#main {
|
||
clear: right;
|
||
|
||
article {
|
||
padding: rems(2.5) 7.5%;
|
||
}
|
||
|
||
.columns {
|
||
form {
|
||
margin-top: 2em;
|
||
}
|
||
}
|
||
|
||
.featured-image-container {
|
||
display: block;
|
||
|
||
figure {
|
||
float: left;
|
||
width: 33%;
|
||
margin: 0 1.5em 1em -1.5em;
|
||
}
|
||
}
|
||
}
|
||
|
||
#header-title {
|
||
min-height: rems(35);
|
||
font-size: 1em;
|
||
|
||
&.short {
|
||
font-size: 2em;
|
||
min-height: rems(15);
|
||
|
||
h1 {
|
||
position: absolute;
|
||
bottom: 0;
|
||
text-align: left;
|
||
font-size: 2em;
|
||
}
|
||
|
||
@include before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
z-index: $zindex-base + 2;
|
||
@include _(box-shadow, inset 0 -13rem 3em -4rem rgba(0, 0, 0, 0.8));
|
||
@include _(transition, opacity 250ms ease-in-out);
|
||
}
|
||
}
|
||
|
||
&.no-image {
|
||
min-height: 0;
|
||
font-size: 1em;
|
||
}
|
||
|
||
svg {
|
||
display: block;
|
||
}
|
||
|
||
svg rect {
|
||
@include _(animation, banner-load 1s ease-in-out);
|
||
}
|
||
|
||
.title {
|
||
text-align: left;
|
||
width: 110%;
|
||
background-color: rgba($white, 0.5);
|
||
@include _(transform, rotate(-$header-tilt) translate3d(0, 0, 0));
|
||
@include _(transform-origin, 0 100%);
|
||
}
|
||
|
||
.details {
|
||
text-align: right;
|
||
color: #000;
|
||
}
|
||
|
||
.background {
|
||
display: block;
|
||
}
|
||
|
||
.primary {
|
||
padding: 12% 0 0 0.25em;
|
||
}
|
||
}
|
||
|
||
#footer {
|
||
footer {
|
||
font-size: 1em;
|
||
}
|
||
|
||
.github {
|
||
@include _(flex, none);
|
||
@include _(flex-basis, auto);
|
||
margin: 0 1em;
|
||
//bottom: 0.5em;
|
||
//float: left;
|
||
//margin-right: 1em;
|
||
//margin-left: 1em;
|
||
//margin-bottom: -0.3333em;
|
||
}
|
||
.facebook, .external {
|
||
margin: 0;
|
||
}
|
||
|
||
.site-info {
|
||
width: auto;
|
||
text-align: right;
|
||
}
|
||
|
||
.site-info, .user-controls, .external {
|
||
width: auto;
|
||
}
|
||
|
||
ul.locales {
|
||
@include _(flex, none);
|
||
@include _(flex-basis, auto);
|
||
@include _(flex-grow, 1);
|
||
margin: 0 0 0 2em;
|
||
text-align: left;
|
||
}
|
||
}
|
||
|
||
.check-box-field,
|
||
.radio-button-field {
|
||
@include _-(display, flex);
|
||
|
||
label {
|
||
@include _(flex, 1);
|
||
border: 0.1em solid;
|
||
border-left: 0;
|
||
text-align: left;
|
||
}
|
||
|
||
input:first-child + label {
|
||
border: 0.1em solid;
|
||
}
|
||
}
|
||
|
||
.admin-blocks {
|
||
> li {
|
||
@include _(flex, none);
|
||
min-width: 12em;
|
||
}
|
||
}
|
||
}
|
||
|
||
@include breakpoint(large) {
|
||
#main-nav {
|
||
.nav {
|
||
font-size: 1.9em;
|
||
margin-top: 0;
|
||
}
|
||
}
|
||
|
||
#banner {
|
||
body.fixed-banner & {
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
left: $sidebar-width;
|
||
z-index: $zindex-base + 2;
|
||
}
|
||
|
||
figure {
|
||
width: 90%;
|
||
}
|
||
}
|
||
|
||
#main {
|
||
padding-left: $sidebar-width;
|
||
//min-height: 100vh;
|
||
}
|
||
|
||
#header-title {
|
||
&.no-image {
|
||
min-height: 0;
|
||
}
|
||
&.short {
|
||
min-height: rems(25);
|
||
}
|
||
&.no-image,
|
||
&.short {
|
||
h1 {
|
||
text-align: left;
|
||
margin: 0.67em 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
#main-nav .logo {
|
||
font-size: 5em;
|
||
}
|
||
|
||
a.logo {
|
||
display: block;
|
||
float: none;
|
||
padding: 0.2em;
|
||
}
|
||
|
||
.actions {
|
||
margin: 4em 2em 0 0;
|
||
}
|
||
|
||
#footer {
|
||
overflow: visible;
|
||
padding: 0;
|
||
width: 100%;
|
||
margin-bottom: 1em;
|
||
//height: 4.5em;
|
||
|
||
footer {
|
||
max-width: $row-width;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
}
|