bike/BikeBikeBike
1
0
Fork 0
Code Issues 4 Pull Requests Projects Releases Wiki Activity

Add BumbleberryOverrideHelper for modern feature support and update main.js for responsive column visibility although not needed with override. Fixes #10

Browse Source
This commit is contained in:
Jonathan Rosenbaum 2026-02-03 06:43:32 +00:00
parent 5e6f962c95
commit c2d1bdd017
5 changed files with 361 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/assets/javascripts/main.js
View File

@ -166,6 +166,20 @@
if (!window.initNodeFunctions) { if (!window.initNodeFunctions) {
window.initNodeFunctions = []; window.initNodeFunctions = [];
} }
// this code is used to hide columns with class "column-set" on small screens
// but is not really necessary, was fixed with bumbleberry_overridehelp.rb
function handleColumnSetVisibility() {
var isMobile = window.innerWidth <= 679;
var elements = document.querySelectorAll('.table-th.column-set, th.column-set');
elements.forEach(function(el) {
el.style.display = isMobile ? 'none' : '';
});
}
window.initNodeFunctions.push(handleColumnSetVisibility);
window.addEventListener('resize', handleColumnSetVisibility);
window.initNodeFunctions.push(function(node) { window.initNodeFunctions.push(function(node) {
forEachElement('.number-field,.email-field,.text-field,.password-field,.search-field', function(field) { forEachElement('.number-field,.email-field,.text-field,.password-field,.search-field', function(field) {
var input = field.querySelector('input'); var input = field.querySelector('input');

389
app/assets/stylesheets/_application.scss
View File

@ -7,14 +7,17 @@ $bug-list: (
"pre-overflow-not-auto": false, "pre-overflow-not-auto": false,
"code-font-not-ems-and-not-monospace": false "code-font-not-ems-and-not-monospace": false
); );
$markup-settings: ("audio": false); $markup-settings: (
"audio": false
);
@import "bumbleberry"; @import "bumbleberry";
@import "settings"; @import "settings";
$zindex-base: 0; $zindex-base: 0;
html, body { html,
body {
color: $black; color: $black;
position: relative; position: relative;
z-index: $zindex-base; z-index: $zindex-base;
@ -25,7 +28,20 @@ body {
padding-bottom: 20vw; padding-bottom: 20vw;
} }
h1, h2, h3, h4, h5, h6, label, button, .button, dt, th, .table-th, nav.sub-menu, legend { h1,
h2,
h3,
h4,
h5,
h6,
label,
button,
.button,
dt,
th,
.table-th,
nav.sub-menu,
legend {
@include font-family(secondary); @include font-family(secondary);
font-weight: normal; font-weight: normal;
} }
@ -35,7 +51,8 @@ h2 {
font-size: 6vw; font-size: 6vw;
} }
h3, legend { h3,
legend {
font-size: 4.5vw; font-size: 4.5vw;
margin: 0.75em 0; margin: 0.75em 0;
line-height: 1.333em; line-height: 1.333em;
@ -100,11 +117,15 @@ a {
display: none; display: none;
} }
table, .table { table,
.table {
margin-bottom: 2em; margin-bottom: 2em;
margin-left: 1em; margin-left: 1em;
th, td, .table-th, .table-td { th,
td,
.table-th,
.table-td {
text-align: left; text-align: left;
padding: 0.25em 0.5em; padding: 0.25em 0.5em;
border: 0.1rem solid $light-gray; border: 0.1rem solid $light-gray;
@ -124,7 +145,8 @@ table, .table {
} }
} }
th, .table-th { th,
.table-th {
background-color: $extra-light-gray; background-color: $extra-light-gray;
&.corner { &.corner {
@ -168,7 +190,7 @@ table, .table {
background-color: lighten($colour-2, 33%); background-color: lighten($colour-2, 33%);
} }
+ .editor { +.editor {
display: none; display: none;
background-color: lighten($colour-1, 50%); background-color: lighten($colour-1, 50%);
@ -190,6 +212,7 @@ table, .table {
} }
.cell-editor { .cell-editor {
&[type=number]::-webkit-inner-spin-button, &[type=number]::-webkit-inner-spin-button,
&[type=number]::-webkit-outer-spin-button { &[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
@ -210,7 +233,8 @@ table, .table {
} }
} }
+ .editor, &.always-edit { +.editor,
&.always-edit {
td { td {
position: relative; position: relative;
vertical-align: top; vertical-align: top;
@ -245,7 +269,7 @@ table, .table {
&.editing { &.editing {
display: none; display: none;
+ .editor { +.editor {
display: table-row; display: table-row;
.cell-editor { .cell-editor {
@ -273,11 +297,15 @@ table, .table {
} }
} }
tr.editable, tr.editor { tr.editable,
tr.editor {
td { td {
white-space: nowrap; white-space: nowrap;
&.date, &.datetime, &.money, &.number { &.date,
&.datetime,
&.money,
&.number {
font-family: monospace; font-family: monospace;
font-size: 1.25em; font-size: 1.25em;
text-align: right; text-align: right;
@ -314,7 +342,7 @@ table, .table {
.table-scroller { .table-scroller {
overflow: auto; overflow: auto;
background-color: $extra-light-gray; background-color: $extra-light-gray;
@include _(box-shadow, inset 0 0 10em 0 rgba(0,0,0,0.125)); @include _(box-shadow, inset 0 0 10em 0 rgba(0, 0, 0, 0.125));
table { table {
background-color: $white; background-color: $white;
@ -439,7 +467,8 @@ body.expanded-element {
display: table-row; display: table-row;
} }
.table-th, .table-td { .table-th,
.table-td {
display: table-cell; display: table-cell;
} }
@ -451,9 +480,14 @@ body.expanded-element {
padding: 1em; padding: 1em;
} }
.table-tr, .table-th, .table-td { .table-tr,
.table-th,
.table-td {
display: block; display: block;
overflow: auto; overflow: auto;
border-width: 0 !important;
border-style: none !important;
border-color: transparent !important;
} }
.table-tr { .table-tr {
@ -461,6 +495,27 @@ body.expanded-element {
} }
} }
// this code is used to hide columns with class "column-set" on small screens
// but is not really necessary, was fixed with bumbleberry_overridehelp.rb
@media only screen and (max-width: 679px) {
.responsive-table {
.table-tr,
.table-th,
.table-td {
border-width: 0 !important;
border-style: none !important;
border-color: transparent !important;
}
}
// th class="column-set" are not necessary in mobile and break newer
// versions of Chrome (144)
th.column-set {
display: none !important;
}
}
button, button,
.button { .button {
@include button; @include button;
@ -492,7 +547,8 @@ button,
background-color: $orange; background-color: $orange;
} }
&.subdued, #main &.subdued { &.subdued,
#main &.subdued {
background-color: $mid-gray; background-color: $mid-gray;
} }
@ -572,7 +628,8 @@ button,
&.center { &.center {
text-align: center; text-align: center;
button, .button { button,
.button {
margin-left: 0.5em; margin-left: 0.5em;
} }
} }
@ -588,7 +645,8 @@ button,
justify-content: center; justify-content: center;
@include _(flex-wrap, wrap); @include _(flex-wrap, wrap);
button, .button { button,
.button {
margin: 0.333em; margin: 0.333em;
} }
} }
@ -604,7 +662,8 @@ button,
background-color: $blue; background-color: $blue;
} }
button[value="cancel"], button.red { button[value="cancel"],
button.red {
background-color: $red; background-color: $red;
} }
@ -614,6 +673,7 @@ button,
} }
#main { #main {
.registration-step-options, .registration-step-options,
.vertical-registration-step-options { .vertical-registration-step-options {
text-align: center; text-align: center;
@ -635,7 +695,7 @@ button,
margin: 0 auto; margin: 0 auto;
.options { .options {
+ fieldset { +fieldset {
margin: 2em 0; margin: 2em 0;
} }
} }
@ -745,7 +805,9 @@ ul.menu {
text-align: center; text-align: center;
margin-bottom: 3em; margin-bottom: 3em;
&.error, &.complete, &.warning { &.error,
&.complete,
&.warning {
display: block; display: block;
} }
@ -799,7 +861,9 @@ nav.sub-menu {
@include default-box-shadow(top, 2); @include default-box-shadow(top, 2);
@include _(text-shadow, 0 0.05em 0.05em $white); @include _(text-shadow, 0 0.05em 0.05em $white);
&:hover, &:active, &:focus { &:hover,
&:active,
&:focus {
background-color: $light-gray; background-color: $light-gray;
} }
@ -833,18 +897,21 @@ nav.sub-menu {
} }
} }
textarea, .textarea { textarea,
.textarea {
display: block; display: block;
width: 100%; width: 100%;
margin: 1em 0; margin: 1em 0;
border: 0.1rem solid $gray; border: 0.1rem solid $gray;
@include _(border-radius, 0.25rem); @include _(border-radius, 0.25rem);
@include _(box-shadow, 0 0 0 0 rgba(0,0,0,0.05)); @include _(box-shadow, 0 0 0 0 rgba(0, 0, 0, 0.05));
@include _(transition, box-shadow 200ms ease-in-out); @include _(transition, box-shadow 200ms ease-in-out);
will-change: box-shadow; will-change: box-shadow;
&:hover, &:focus, &:active { &:hover,
@include _(box-shadow, 0 0 0 0.3em rgba(0,0,0,0.05)); &:focus,
&:active {
@include _(box-shadow, 0 0 0 0.3em rgba(0, 0, 0, 0.05));
} }
} }
@ -853,12 +920,24 @@ textarea, .textarea {
} }
.textarea { .textarea {
.ql-editor p, .ql-editor ol, .ql-editor ul, .ql-editor pre, .ql-editor blockquote, .ql-editor h1, .ql-editor h2, .ql-editor h3, .ql-editor h4, .ql-editor h5, .ql-editor h6 {
.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
margin-bottom: 1em; margin-bottom: 1em;
} }
} }
textarea, .textarea .ql-editor { textarea,
.textarea .ql-editor {
background-image: repeating-linear-gradient(135deg, rgba(#000, 0.025), rgba(#000, 0.025) 0.1em, transparent 0.1em, transparent 0.4em); background-image: repeating-linear-gradient(135deg, rgba(#000, 0.025), rgba(#000, 0.025) 0.1em, transparent 0.1em, transparent 0.4em);
min-height: 15em; min-height: 15em;
font-size: 1.25em; font-size: 1.25em;
@ -872,7 +951,8 @@ textarea, .textarea .ql-editor {
} }
} }
.textarea, .workshop-description { .textarea,
.workshop-description {
> :first-child { > :first-child {
margin-top: 0; margin-top: 0;
} }
@ -895,7 +975,14 @@ textarea, .textarea .ql-editor {
} }
input { input {
&[type="text"], &[type="password"], &[type="tel"], &[type="search"], &[type="email"], &[type="url"], &[type="number"] {
&[type="text"],
&[type="password"],
&[type="tel"],
&[type="search"],
&[type="email"],
&[type="url"],
&[type="number"] {
display: block; display: block;
font-size: 1.25em; font-size: 1.25em;
outline: 0; outline: 0;
@ -906,7 +993,8 @@ input {
border-bottom: 0.15em solid transparent; border-bottom: 0.15em solid transparent;
} }
&[type="number"], &[type="tel"] { &[type="number"],
&[type="tel"] {
@include font-family(secondary); @include font-family(secondary);
} }
} }
@ -968,22 +1056,28 @@ input {
padding: 0.15em 0.5em; padding: 0.15em 0.5em;
background-color: $extra-light-gray; background-color: $extra-light-gray;
@include _(border-radius, 0.25rem); @include _(border-radius, 0.25rem);
@include _(box-shadow, 0 0 0 0 rgba(0,0,0,0.05)); @include _(box-shadow, 0 0 0 0 rgba(0, 0, 0, 0.05));
@include _(transition, box-shadow 200ms ease-in-out); @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); 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 $gray; border: 0.1rem solid $gray;
will-change: box-shadow; will-change: box-shadow;
} }
&:focus, &:active, &:focus { &:focus,
&:active,
&:focus {
label { label {
color: $black; color: $black;
} }
} }
input { input {
&:focus, &:active, &:hover {
@include _(box-shadow, 0 0 0 0.3em rgba(0,0,0,0.05)); &:focus,
&:active,
&:hover {
@include _(box-shadow, 0 0 0 0.3em rgba(0, 0, 0, 0.05));
} }
&[readonly] { &[readonly] {
@ -1023,7 +1117,7 @@ input {
padding: 0.5em; padding: 0.5em;
background-color: $extra-light-gray; background-color: $extra-light-gray;
@include _(border-radius, 0.25rem); @include _(border-radius, 0.25rem);
@include _(box-shadow, 0 0 0 0 rgba(0,0,0,0.05)); @include _(box-shadow, 0 0 0 0 rgba(0, 0, 0, 0.05));
@include _(transition, box-shadow 200ms ease-in-out); @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); 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 $gray; border: 0.1rem solid $gray;
@ -1058,9 +1152,13 @@ input {
} }
} }
label:hover, input:focus + label, input:active + label, label:focus, label:active { label:hover,
input:focus+label,
input:active+label,
label:focus,
label:active {
.file-field-selector { .file-field-selector {
@include _(box-shadow, 0 0 0 0.3em rgba(0,0,0,0.05)); @include _(box-shadow, 0 0 0 0.3em rgba(0, 0, 0, 0.05));
} }
} }
} }
@ -1120,7 +1218,7 @@ input {
margin: 0.33em 0; margin: 0.33em 0;
&:checked { &:checked {
+ div input { +div input {
z-index: $zindex-base + 2; z-index: $zindex-base + 2;
@include _(opacity, 1); @include _(opacity, 1);
} }
@ -1226,7 +1324,7 @@ input {
} }
} }
input:first-child + label { input:first-child+label {
border: 0.1em solid; border: 0.1em solid;
} }
@ -1236,23 +1334,24 @@ input {
left: -100000px; left: -100000px;
z-index: -10; z-index: -10;
&:checked + label { &:checked+label {
@include before { @include before {
background-color: $colour-5; background-color: $colour-5;
} }
@include after { @include after {
visibility: visible; visibility: visible;
@include _(transform, rotate(45deg) scale(1)); @include _(transform, rotate(45deg) scale(1));
} }
} }
&:hover + label { &:hover+label {
@include before { @include before {
background-color: $colour-3; background-color: $colour-3;
} }
} }
&[type="radio"] + label { &[type="radio"]+label {
@include after { @include after {
content: '+'; content: '+';
border: 0; border: 0;
@ -1267,7 +1366,7 @@ input {
} }
} }
&.inline input[type="radio"] + label { &.inline input[type="radio"]+label {
@include after { @include after {
top: -0.15em; top: -0.15em;
left: 0.05em; left: 0.05em;
@ -1283,7 +1382,7 @@ input {
input { input {
z-index: 1; z-index: 1;
opacity: 1!important; opacity: 1 !important;
position: static; position: static;
margin: 0; margin: 0;
font: inherit; font: inherit;
@ -1299,7 +1398,7 @@ input {
margin: 0 2em 5em; margin: 0 2em 5em;
font-size: 0.75em; font-size: 0.75em;
input[type="radio"] + label { input[type="radio"]+label {
@include after { @include after {
top: -0.15em; top: -0.15em;
left: 0.05em; left: 0.05em;
@ -1349,7 +1448,8 @@ form {
@include _(flex, 1); @include _(flex, 1);
} }
button, .button { button,
.button {
margin-left: 1em; margin-left: 1em;
height: 2.6em; height: 2.6em;
} }
@ -1397,12 +1497,13 @@ form {
margin: 0; margin: 0;
} }
button, .button { button,
.button {
display: block; display: block;
width: 100%; width: 100%;
white-space: nowrap; white-space: nowrap;
+ button { +button {
margin-top: 0.5em; margin-top: 0.5em;
} }
} }
@ -1424,7 +1525,7 @@ fieldset {
margin: 0; margin: 0;
} }
+ .input-field-help { +.input-field-help {
overflow: auto; overflow: auto;
margin-bottom: 2em; margin-bottom: 2em;
} }
@ -1452,7 +1553,7 @@ fieldset {
@include _(flex-wrap, wrap); @include _(flex-wrap, wrap);
margin: 0 0 3em 1em; margin: 0 0 3em 1em;
> .input-field { >.input-field {
margin-right: 1em; margin-right: 1em;
@include _(flex, 1); @include _(flex, 1);
} }
@ -1462,12 +1563,13 @@ fieldset {
.fieldgroup { .fieldgroup {
display: block; display: block;
> .input-field { >.input-field {
flex: none; flex: none;
} }
} }
.locale-select, .text-editors { .locale-select,
.text-editors {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -1574,7 +1676,8 @@ fieldset {
.sub-comment { .sub-comment {
font-size: 0.8em; font-size: 0.8em;
.comment-title, time { .comment-title,
time {
top: -1em; top: -1em;
} }
} }
@ -1588,6 +1691,7 @@ fieldset {
#main .columns & form { #main .columns & form {
margin-top: 0; margin-top: 0;
button { button {
@include _(transition, background-color 150ms ease-in-out); @include _(transition, background-color 150ms ease-in-out);
background-color: $mid-gray; background-color: $mid-gray;
@ -1626,12 +1730,16 @@ fieldset {
} }
} }
.flex-form, .flex-column { .flex-form,
button, .button { .flex-column {
button,
.button {
width: 100%; width: 100%;
text-align: center; text-align: center;
+ button, + .button { +button,
+.button {
margin-top: 0.75em; margin-top: 0.75em;
} }
} }
@ -1795,7 +1903,7 @@ ul.warnings {
color: $white; color: $white;
@include _(border-radius, 0); @include _(border-radius, 0);
@include _(box-shadow, inset 0 0 1.5em 0.25em rgba(0, 0, 0, 0.125)); @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 _(text-shadow, 0 0 0.25em rgba(0, 0, 0, 0.5));
@include not-link-like; @include not-link-like;
.title { .title {
@ -1863,9 +1971,11 @@ ul.warnings {
display: table; display: table;
width: 100%; width: 100%;
} }
@if capable_of(flexbox, true) { @if capable_of(flexbox, true) {
@include _-(display, flex); @include _-(display, flex);
} }
list-style: none; list-style: none;
margin: 2em 2em 5em 0; margin: 2em 2em 5em 0;
padding: 0; padding: 0;
@ -1873,12 +1983,15 @@ ul.warnings {
li { li {
position: relative; position: relative;
@if not capable_of(flexbox, true) { @if not capable_of(flexbox, true) {
display: table-cell; display: table-cell;
} }
@if capable_of(flexbox, true) { @if capable_of(flexbox, true) {
@include _(flex, 1); @include _(flex, 1);
} }
padding-top: 1.5em; padding-top: 1.5em;
@include after { @include after {
@ -2247,16 +2360,31 @@ a.logo {
@if capable_of(svg) { @if capable_of(svg) {
@include keyframes(active-logo) { @include keyframes(active-logo) {
0% { fill: $colour-1; } 0% {
15% { fill: $colour-5; } fill: $colour-1;
30% { fill: $colour-3; } }
45% { fill: $colour-4; }
60% { fill: $colour-2; } 15% {
fill: $colour-5;
}
30% {
fill: $colour-3;
}
45% {
fill: $colour-4;
}
60% {
fill: $colour-2;
}
} }
svg.bb-icon-logo { svg.bb-icon-logo {
fill: $colour-1; fill: $colour-1;
} }
svg.bb-icon-logo-text { svg.bb-icon-logo-text {
fill: $black; fill: $black;
} }
@ -2301,7 +2429,8 @@ a.logo {
font-size: 5vw; font-size: 5vw;
margin: 0; margin: 0;
h1, h2 { h1,
h2 {
margin: 0; margin: 0;
} }
@ -2377,7 +2506,8 @@ $header-tilt: 8deg;
position: relative; position: relative;
z-index: $zindex-base; z-index: $zindex-base;
.row, .columns { .row,
.columns {
position: static; position: static;
} }
@ -2423,16 +2553,14 @@ $header-tilt: 8deg;
background-repeat: repeat; background-repeat: repeat;
background-size: 30px 30px; background-size: 30px 30px;
@include _(animation, barberpole 500ms linear infinite); @include _(animation, barberpole 500ms linear infinite);
background-image: linear-gradient( background-image: linear-gradient(45deg,
45deg,
rgba($white, 0.1) 25%, rgba($white, 0.1) 25%,
transparent 25%, transparent 25%,
transparent 50%, transparent 50%,
rgba($white, 0.1) 50%, rgba($white, 0.1) 50%,
rgba($white, 0.1) 75%, rgba($white, 0.1) 75%,
transparent 75%, transparent 75%,
transparent transparent);
);
svg { svg {
vertical-align: middle; vertical-align: middle;
@ -2528,11 +2656,15 @@ $header-tilt: 8deg;
color: $colour-1; color: $colour-1;
@include _(opacity, 0.65); @include _(opacity, 0.65);
margin: -4% -2%; margin: -4% -2%;
@if capable_of(calc) { @if capable_of(calc) {
font-size: calc(5vw + #{rems(7)}); font-size: calc(5vw + #{rems(7)});
} @else { }
@else {
font-size: rems(11); font-size: rems(11);
} }
display: none; display: none;
} }
@ -2584,7 +2716,9 @@ $header-tilt: 8deg;
font-size: 4.1vw; font-size: 4.1vw;
} }
.site-info, .user-controls, .external { .site-info,
.user-controls,
.external {
width: 100%; width: 100%;
text-align: center; text-align: center;
@ -2613,7 +2747,10 @@ $header-tilt: 8deg;
.facebook { .facebook {
a { a {
&:hover, &:active, &:focus {
&:hover,
&:active,
&:focus {
svg { svg {
fill: #3B579D; fill: #3B579D;
} }
@ -2621,7 +2758,8 @@ $header-tilt: 8deg;
} }
} }
.github, .facebook { .github,
.facebook {
display: inline-block; display: inline-block;
margin: 0.5em; margin: 0.5em;
@ -2657,7 +2795,10 @@ $header-tilt: 8deg;
} }
body.error-locale-not-available & { body.error-locale-not-available & {
.github, .facebook, .locales {
.github,
.facebook,
.locales {
visibility: hidden; visibility: hidden;
} }
} }
@ -2683,6 +2824,7 @@ body {
display: -webkit-flex; display: -webkit-flex;
flex-direction: column; flex-direction: column;
} }
min-height: 100vh; min-height: 100vh;
overflow: hidden; overflow: hidden;
} }
@ -2773,7 +2915,8 @@ body {
} }
} }
button, .button { button,
.button {
margin: 0 0.25em 0.5em; margin: 0 0.25em 0.5em;
} }
@ -2817,7 +2960,8 @@ body {
#info-dlg .message { #info-dlg .message {
text-align: left; text-align: left;
p, h4 { p,
h4 {
font-size: 0.8em; font-size: 0.8em;
} }
@ -2861,7 +3005,9 @@ body {
} }
@include keyframes(barberpole) { @include keyframes(barberpole) {
to { background-position: 60px 30px; } to {
background-position: 60px 30px;
}
} }
html :focus { html :focus {
@ -2967,11 +3113,11 @@ html :focus {
float: right; float: right;
cursor: pointer; cursor: pointer;
&:hover + .term { &:hover+.term {
background-color: rgba($colour-3, 0.25); background-color: rgba($colour-3, 0.25);
} }
&:checked + .term { &:checked+.term {
font-style: normal; font-style: normal;
background-color: rgba($colour-5, 0.125); background-color: rgba($colour-5, 0.125);
} }
@ -3009,7 +3155,8 @@ body.policy .policy-agreement ul {
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
.name, .role { .name,
.role {
display: inline; display: inline;
} }
@ -3052,11 +3199,12 @@ body.policy .policy-agreement ul {
box-shadow: 0 0.333em 0 -0.1em $light-gray; box-shadow: 0 0.333em 0 -0.1em $light-gray;
} }
> div { >div {
vertical-align: top; vertical-align: top;
margin-top: 2em; margin-top: 2em;
h3, p:first-child { h3,
p:first-child {
margin-top: 0; margin-top: 0;
} }
@ -3117,7 +3265,7 @@ body.policy .policy-agreement ul {
overflow: hidden; overflow: hidden;
} }
> li { >li {
position: relative; position: relative;
margin-bottom: 1em; margin-bottom: 1em;
border-bottom: 0.1rem solid $light-gray; border-bottom: 0.1rem solid $light-gray;
@ -3150,7 +3298,8 @@ body.policy .policy-agreement ul {
font-size: 1em; font-size: 1em;
} }
h5, h6 { h5,
h6 {
margin: 1em 0 0; margin: 1em 0 0;
} }
} }
@ -3165,7 +3314,8 @@ body.policy .policy-agreement ul {
} }
} }
#main .workshop-interest, .workshop-interest { #main .workshop-interest,
.workshop-interest {
text-align: right; text-align: right;
form { form {
@ -3195,7 +3345,9 @@ body.policy .policy-agreement ul {
@include _(border-radius, 0.25em); @include _(border-radius, 0.25em);
} }
h4, h5, h6 { h4,
h5,
h6 {
margin: 0; margin: 0;
} }
@ -3355,7 +3507,7 @@ body.policy .policy-agreement ul {
height: 1.25em; height: 1.25em;
line-height: 1.25em; line-height: 1.25em;
text-align: center; text-align: center;
margin: 0;// 0.3333em 0 0; margin: 0; // 0.3333em 0 0;
} }
} }
@ -3453,7 +3605,8 @@ fieldset.likert {
.responsive-table.likert { .responsive-table.likert {
margin: 2em 0 1em; margin: 2em 0 1em;
.table-td, .table-thead .table-th { .table-td,
.table-thead .table-th {
text-align: center; text-align: center;
} }
@ -3479,8 +3632,8 @@ fieldset.likert {
:focus, :focus,
input[type="submit"]:focus, input[type="submit"]:focus,
.check-box-field input:focus + label, .check-box-field input:focus+label,
.radio-button-field input:focus + label, .radio-button-field input:focus+label,
.select-field select:focus, .select-field select:focus,
.workshop-link:focus .title, .workshop-link:focus .title,
#main-nav .nav a:focus .title { #main-nav .nav a:focus .title {
@ -3518,7 +3671,8 @@ fieldset.likert {
font-size: 2.25em; font-size: 2.25em;
} }
h3, legend { h3,
legend {
font-size: 1.75em; font-size: 1.75em;
} }
@ -3547,11 +3701,13 @@ fieldset.likert {
@include _(flex, 1); @include _(flex, 1);
} }
button, .button { button,
.button {
margin-left: 1em; margin-left: 1em;
height: 2.6em; height: 2.6em;
+ button, + .button { +button,
+.button {
margin-top: 0; margin-top: 0;
margin-left: 0.75em; margin-left: 0.75em;
} }
@ -3560,6 +3716,7 @@ fieldset.likert {
} }
.input-field { .input-field {
&.big select, &.big select,
&.big input { &.big input {
font-size: 2em; font-size: 2em;
@ -3594,18 +3751,21 @@ fieldset.likert {
margin-right: 1em; margin-right: 1em;
} }
.select-field ~ .number-field, .select-field~.number-field,
.select-field ~ .email-field, .select-field~.email-field,
.select-field ~ .search-field, .select-field~.search-field,
.select-field ~ .telephone-field, .select-field~.telephone-field,
.select-field ~ .password-field, .select-field~.password-field,
.select-field ~ .text-field { .select-field~.text-field {
margin-top: 1em; margin-top: 1em;
} }
} }
.flex-form, .flex-column { .flex-form,
button, .button { .flex-column {
button,
.button {
width: auto; width: auto;
} }
} }
@ -3732,7 +3892,8 @@ fieldset.likert {
} }
} }
.info, .img { .info,
.img {
display: table-cell; display: table-cell;
} }
@ -3871,9 +4032,12 @@ fieldset.likert {
@include _(flex, none); @include _(flex, none);
@include _(flex-basis, auto); @include _(flex-basis, auto);
} }
margin: 0 1em; margin: 0 1em;
} }
.facebook, .external {
.facebook,
.external {
margin: 0; margin: 0;
} }
@ -3882,7 +4046,9 @@ fieldset.likert {
text-align: right; text-align: right;
} }
.site-info, .user-controls, .external { .site-info,
.user-controls,
.external {
width: auto; width: auto;
} }
@ -3920,11 +4086,11 @@ fieldset.likert {
text-align: left; text-align: left;
} }
input:first-child + label { input:first-child+label {
border: 0.1em solid; border: 0.1em solid;
} }
input[type="radio"] + label { input[type="radio"]+label {
@include after { @include after {
top: -0.025em; top: -0.025em;
left: 0.175em; left: 0.175em;
@ -3942,7 +4108,7 @@ fieldset.likert {
} }
} }
input[type="radio"] + label { input[type="radio"]+label {
@include after { @include after {
top: -0.025em; top: -0.025em;
left: 0.175em; left: 0.175em;
@ -4038,7 +4204,8 @@ fieldset.likert {
padding: 0.25em 0.5em; padding: 0.25em 0.5em;
} }
.table-th, .table-td { .table-th,
.table-td {
display: table-cell; display: table-cell;
} }
@ -4054,7 +4221,9 @@ fieldset.likert {
display: table-footer-group; display: table-footer-group;
} }
} }
} // medium }
// medium
@include breakpoint(large) { @include breakpoint(large) {
.responsive-table.likert { .responsive-table.likert {
@ -4069,9 +4238,11 @@ fieldset.likert {
&.no-image { &.no-image {
min-height: 0; min-height: 0;
} }
&.short { &.short {
min-height: rems(25); min-height: rems(25);
} }
&.no-image, &.no-image,
&.short { &.short {
h1 { h1 {

2
app/controllers/application_controller.rb
View File

@ -1,6 +1,8 @@
require 'net/https' require 'net/https'
class ApplicationController < BaseController class ApplicationController < BaseController
include BumbleberryOverrideHelper
protect_from_forgery with: :exception, except: [:do_confirm, :js_error, :admin_update] protect_from_forgery with: :exception, except: [:do_confirm, :js_error, :admin_update]
before_filter :application_setup before_filter :application_setup

11
app/helpers/bumbleberry_override_helper.rb Normal file
View File

@ -0,0 +1,11 @@
module BumbleberryOverrideHelper
MODERN_FEATURES = [:css3_boxsizing, :css_sel3, :flexbox, :css_grid, :svg].freeze
def capable_of(capability)
if MODERN_FEATURES.include?(capability)
true
else
super
end
end
end

6
pnpm-lock.yaml generated
View File

@ -22,14 +22,14 @@ packages:
hasBin: true hasBin: true
dependencies: dependencies:
baseline-browser-mapping: 2.9.19 baseline-browser-mapping: 2.9.19
caniuse-lite: 1.0.30001766 caniuse-lite: 1.0.30001767
electron-to-chromium: 1.5.283 electron-to-chromium: 1.5.283
node-releases: 2.0.27 node-releases: 2.0.27
update-browserslist-db: 1.2.3(browserslist@4.28.1) update-browserslist-db: 1.2.3(browserslist@4.28.1)
dev: false dev: false
/caniuse-lite@1.0.30001766: /caniuse-lite@1.0.30001767:
resolution: {integrity: sha512-4C0lfJ0/YPjJQHagaE9x2Elb69CIqEPZeG0anQt9SIvIoOH4a4uaRl73IavyO+0qZh6MDLH//DrXThEYKHkmYA==} resolution: {integrity: sha512-34+zUAMhSH+r+9eKmYG+k2Rpt8XttfE4yXAjoZvkAPs15xcYQhyBYdalJ65BzivAvGRMViEjy6oKr/S91loekQ==}
dev: false dev: false
/electron-to-chromium@1.5.283: /electron-to-chromium@1.5.283: