diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss deleted file mode 100644 index 98b63e3..0000000 --- a/app/assets/stylesheets/application.scss +++ /dev/null @@ -1,1914 +0,0 @@ -@import "bumbleberry"; -@import "settings"; - -html, body { - color: #333; - position: relative; - z-index: -1; -} - -h1, h2, h3, h4, h5, label, button, .button, dt, th, nav.sub-menu { - @include font-family(secondary); - font-weight: normal; -} - -h2 { - margin: 0; - font-size: 6vw; -} - -p { - font-size: 4vw; -} - -a { - text-decoration: none; - color: $colour-1; - border-bottom: 0 solid; - outline: 0; - position: relative; - - @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, translateY(-1em)); - } - - &:hover, - &:active, - &:focus { - @include after { - border-bottom: 0.1em solid; - opacity: 1; - transform: translateY(0); - } - } -} - -table { - margin-bottom: 2em; - margin-left: 1em; - background-color: #F8F8F8; - width: 100%; - @include default-box-shadow(top, 2, true); - - th, td { - text-align: left; - padding: 0.25em 0.5em; - - &:first-child { - padding-left: 1em; - } - - &:last-child { - padding-right: 1em; - } - } -} - -button, -.button { - position: relative; - display: inline-block; - color: $white; - background-color: $colour-1; - border: 0; - padding: 0.5em 1em; - font-size: 1.25em; - outline: 0; - border-bottom: 0.125em solid rgba(0, 0, 0, 0.15); - @include _(border-radius, 0.15em); - @include default-box-shadow(top, 2); - overflow: hidden; - cursor: pointer; - @include _(text-stroke, 1px rgba(0, 0, 0, 0.25)); - - @include before-and-after { - content: ''; - position: absolute; - display: block; - top: 0; - right: 100%; - font-size: 1.15em; - background-color: rgba(0, 0, 0, 0); - border-color: transparent; - @include _(transition, all 250ms ease-in-out); - } - @include before { - height: 100%; - width: 100%; - margin-right: 1em; - } - @include after { - border-style: solid; - border-width: 1em 0 1em 1em; - } - - &:hover, - &:focus, - &:hover, - &:focus { - @include before-and-after { - right: -1em; - border-left-color: rgba(0, 0, 0, 0.15); - } - } - &:hover, - &:focus { - @include before { - background-color: rgba(0, 0, 0, 0.15); - } - } - - &:active { - @include _(transform, scale(0.95)); - - @include after { - left: 120%; - } - } - - &:disabled { - @include _(opacity, 0.5); - cursor: inherit; - - @include before-and-after { - display: none; - } - } - - #main &[type="submit"] { - background-color: $colour-5; - - &[value="send"] { - background-color: $colour-4; - } - } - - &.register { - background-color: $colour-4; - //@include _(text-shadow, 0 0 0.15em rgba(0, 0, 0, 0.5)); - } - - form.logout & { - background-color: #666; - } - - #main &.modify { - background-color: $colour-5; - } - - #main &.delete { - background-color: $colour-4; - } -} - -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 { - $line-height: 2em; - display: block; - width: 100%; - min-height: $line-height * 4; - font-size: 1.25em; - margin: 1em 0; - padding: 0 0.5em; - line-height: $line-height; - border: 0.1rem solid #E8E8E8; - outline: 0; - background: linear-gradient( - to bottom, - transparent, - transparent ($line-height - 0.05em), - rgba($colour-1, 0.33) 0.05em, - rgba($colour-1, 0.33) - ); - background-size: 100% $line-height; - border-radius: 0 0 1em 0; - color: #000; - font-weight: bold; - @include default-box-shadow(top, 2); - @include _(transition, box-shadow 100ms ease-in-out); - - &:hover, &:focus, &:active { - @include default-box-shadow(top, 1); - } -} - -input { - &[type="text"], &[type="password"], &[type="telephone"], &[type="search"], &[type="email"], &[type="url"] { - 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; - //@include default-box-shadow(top, 2, false, 0 0.05em 0 0 #666); - //@include _(transition, box-shadow 100ms ease-in-out); - - &:hover, &:focus, &:active { - //@include default-box-shadow(top, 2, false, 0 0.15em 0 0 $colour-1); - } - } -} - -.number-field, -.email-field, -.text-field { - position: relative; - //overflow: hidden; - margin-bottom: 2em; - background-color: #F8F8F8; - @include default-box-shadow(top, 1.5, false, 0 0.05em 0 0 #666); - @include _(transition, background-image 100ms ease-in-out); - $fn: ''; - $capability: get_capability(map-get($compatibility-map, css-gradients)); - @if $capability == yx or $capability == ax or $capability == y or $capability == a { - $fn: '-#{$browser_prefix}-'; - } - @include _(background-size, 8px 8px); - - label { - position: absolute; - z-index: 2; - font-size: 1em; - //float: left; - //@include font-family(primary); - //font-weight: bold; - //left: 0; - //top: 0; - padding: 0.25em 0.667em; - width: auto; - //background-color: #333; - @include _(transition, 'transform 250ms ease-in-out, color 250ms ease-in-out, background-color 250ms ease-in-out'); - //@include _(transform-origin, left center); - //@include _(transform, scale(1) translateY(0)); - top: 100%; - //@include _(transform, translateY(100%) scale(0.75)); - @include _(transform, translateY(0) scale(0.75)); - @include _(transform-origin, 0 0); - //line-height: 1em; - line-height: 1.5em; - background-color: transparent; - color: #333; - } - - &.empty { - background-color: $white;//#E8E8E8; - background-image: - #{$fn}repeating-linear-gradient( - -45deg, #DDD, - #DDD 1px, transparent 1px, - transparent 6px - ); - label { - z-index: 0; - @include _(transform, translateY(-100%) scale(1)); - background-color: transparent; - color: #888; - } - input { - //@include _(box-shadow, none); - } - } - - input { - margin: 0; - position: relative; - z-index: 1; - padding: 0.15em 0.5em; - background-color: transparent; - border: 0; - } - - &.big input { - font-size: 2em; - } - - &:focus, &:active { - label { - color: #333; - } - } - input { - &:focus, &:active { - @include _(box-shadow, inset 0 0 1em 1em #E8E8E8); - } - } - /*input { - &:focus, &:active, &:not([value=""]) { - + label { - @include _(transform, scale(0.75) translateY(-20%)); - top: -0.5em; - } - } - }*/ -} - -.input-field.other-field label { - - input { - float: left; - margin: 0.33em 0; - - &:checked { - + div input { - //display: block; - z-index: 1; - @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: -1; - 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-bottom: 1em; - margin-left: 1em; -} - -.check-box-field, -.radio-button-field { - @include clearfix; - margin-bottom: 1em; - position: relative; - - label { - float: left; - @include default-box-shadow(top); - background-color: $colour-2; - text-align: center; - position: relative; - margin: 0 1em 3em; - padding: 0.5em; - cursor: pointer; - @include _(transition, #{'transform, background-color 100ms, 100ms ease-in-out, ease-in-out'}); - - &:hover { - @include _(transform, scale(1.1)); - } - - @include before-and-after { - content: ''; - position: absolute; - visibility: hidden; - @include _(transition, transform 200ms ease-in-out); - @include _(transition, transform 200ms cubic-bezier(0, 0.38, 0.9, 2)); - } - - @include before { - background-color: $colour-5; - bottom: -0.3em; - right: -0.5em; - width: 2em; - height: 2em; - border-radius: 50%; - @include _(transform, scale(0)); - @include default-box-shadow(top); - } - - @include after { - border: 0.5em solid $white; - border-left: none; - border-top: none; - width: 1em; - height: 2em; - font-size: 0.6em; - bottom: 0.3em; - right: 0.3em; - @include _(transform, scale(0) rotate(45deg)); - } - } - - svg { - width: 100%; - height: 100%; - margin-bottom: 0.75em; - fill: $white; - stroke: rgba(0, 0, 0, 0.667); - stroke-width: 0.05em; - - + svg { - position: absolute; - top: 0; - left: 0; - right: 0; - @include _(opacity, 0.75); - } - } - - input { - position: absolute; - opacity: 0; - left: 1em; - bottom: 0.5em; - - &:checked + label { - background-color: $colour-1; - @include _(transform, scale(1.25)); - - @include before { - visibility: visible; - @include _(transform, scale(1)); - } - - @include after { - visibility: visible; - @include _(transform, scale(1) rotate(45deg)); - } - } - } -} - -.check-box-field { - label { - color: $white; - font-weight: normal; - @include font-family(secondary); - @include _(text-stroke, 0.5px #000); - - @include before { - font-size: 0.6em; - bottom: -0.8em; - } - - @include after { - font-size: 0.3em; - bottom: -0.5em; - } - } -} - -.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; - } -} - -form { - &.composition { - textarea { - height: 16em; - } - } -} - -.actions { - text-align: center; - margin: 0 1em; - - button, .button { - margin: 0 0.25em; - } - - &.right { - text-align: right; - - .note { - float: left; - color: $colour-1; - font-weight: bold; - font-size: 1.25em; - } - } -} - -::-webkit-resizer { - visibility: hidden; - cursor: nw-resize; -} - -@include selection { - background-color: rgba($colour-2, 0.75); - color: rgba($white, 0.75); -} - -#main-nav { - position: relative; - top: 0; - left: 0; - width: 100%; - background-color: $white; - @include default-box-shadow(top, 2); - z-index: 1; - - .nav { - text-align: center; - clear: left; - overflow: auto; - background-color: $colour-3; - - a { - position: relative; - display: inline-block; - margin: 0; - padding: 1em 0; - float: left; - font-weight: normal; - @include font-family(secondary); - text-decoration: none; - font-size: 2.25vw; - outline: none; - border: 0; - width: 33.33%; - background-color: $colour-5; - color: $white; - @include _(text-shadow, 0 0 0.35em #000); - - @include after { - display: none; - } - - @include before { - background-color: $colour-5; - } - - &:nth-child(2) { - background-color: $colour-4; - - @include before { - background-color: $colour-4; - } - } - - &:nth-child(3) { - background-color: $colour-3; - - @include before { - background-color: $colour-3; - } - } - } - } - - .actions { - text-align: center; - position: absolute; - top: rems(0.5); - right: rems(1); - font-size: 3.1vw; - - > a, > form { - vertical-align: middle; - margin: 0 0 0.5em; - } - } -} - -#main { - position: relative; - z-index: -1; - max-width: (rems(68) - $sidebar-width) * 2; - background-color: $white; - padding-bottom: rems(2); - - article { - padding: rems(2.5) 7.5%; - - &.supplementary { - //background-color: $colour-3; - margin: rems(1) 7.5%; - overflow: hidden; - border-radius: 0.33em; - border: 0.1rem solid #DDD; - background-color: #F7F7F7; - @include default-box-shadow(top, 2); - } - - figure { - float: left; - background-size: cover; - background-position: center; - background-repeat: no-repeat; - width: 33%; - height: 12em; - margin-left: -1em; - margin-top: 2em; - margin-right: 1.5em; - margin: 2em 1.5em 1.5em -1.5em; - } - } -} - -a.logo { - display: inline-block; - font-size: rems(5); - text-decoration: none; - padding: 0.1em; - border: 0; - float: left; - @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: #333; - } - - .logo svg { - display: inline-block; - height: 1em; - width: 1em; - float: left; - } - - .logo:hover svg.bb-icon-logo { - @include _(animation, active-logo 4s infinite); - } -} - -#banner { - clear: left; - - figure { - width: 100%; - max-width: rems(60); - margin: 0; - } - - img { - width: 100%; - @include default-box-shadow; - } -} - -$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: -1; - - 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; } - } - - @if capable_of(css-mixblendmode) { - position: relative; - - body.home & { - $colours: ($colour-2, $colour-5, $colour-4, $colour-3, $colour-1); - $gradient: (90deg); - $w: 100% / length($colours); - $i: 0; - @each $colour in $colours { - $gradient: append($gradient, #{$colour} #{$w * $i}, comma); - $i: $i + 1; - $gradient: append($gradient, #{$colour} #{$w * $i}, comma); - } - background-image: linear-gradient($gradient); - } - - .cover { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: -1; - background-size: inherit; - background-position: inherit; - -webkit-filter: saturate(25%); - filter: saturate(25%); - @include _(mix-blend-mode, multiply); - } - } - - &.no-image, - &.short { - h1 { - text-align: center; - font-size: 3.5em; - margin: 0.25em 0.5em; - position: relative; - z-index: 1; - @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; - } -} - -#footer { - padding: 1em; - - .copy { - @include clearfix; - - a { - float: right; - color: #666; - } - } - - .facebook, .locale { - float: left; - - a { - @include after { - display: none; - } - svg { - @include _(transition, fill 250ms ease-in-out); - } - &:hover, &:active, &:focus { - svg { - fill: #3B579D; - } - } - } - } - - .github, .facebook { - .icons { - width: 1.5em; - height: 1.5em; - fill: #333; - vertical-align: middle; - } - } - - .github { - position: relative; - background-color: $white; - border-radius: 0.25em; - border: 0.1em solid #DDD; - padding: 0.5em 0.5em 0.5em 2em; - text-align: center; - z-index: 1; - margin-bottom: 0.5em; - - 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); - } - - &:hover .icons { - fill: #4183C4; - } - } - - .locale { - @if capable_of(css3_selectors) { - margin: 0 0.5em; - - #select-language { - position: absolute; - visibility: hidden; - } - - .launch { - display: block; - height: 1.5em; - padding: 0 0.125em; - border-radius: 0.1em; - background-color: #888; - color: #E7E7E7; - text-align: center; - line-height: 1.5em; - font-weight: normal; - @include font-family(secondary); - @include _(transition, 150ms background-color ease-in-out); - cursor: pointer; - - &:hover { - background-color: #333; - } - - @include after { - content: '×'; - display: block; - position: fixed; - top: 0.5em; - left: -1em; - z-index: 11; - color: #333; - font-size: 2em; - opacity: 0; - @include _(transition, 250ms left ease-in-out); - } - } - - .selector { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - padding: 1em 4em; - overflow: auto; - background-color: $white; - z-index: 10; - @include _(transform, scale(0)); - @include _(transform-origin, 6.25em _calc('100% - 2em', 98%)); - @include _(transition, 250ms all ease-in-out); - } - - ul { - list-style: none; - padding: 0; - margin: 0; - text-align: center; - } - - li { - position: relative; - display: inline-block; - min-width: 6em; - margin: 1em; - text-align: center; - border-radius: 0.33em; - overflow: hidden; - @include default-box-shadow; - @include _(transform, scale(1)); - @include _(transition, 100ms transform ease-in-out); - - a { - display: block; - position: static; - background-color: $colour-1; - font-weight: normal; - @include font-family(secondary); - line-height: 1.5em; - color: $white; - - @include before { - content: ''; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1; - } - } - - span { - padding: 1em; - height: 3.25em; - display: block; - } - - &:hover { - @include _(transform, scale(1.25)); - } - } - - #select-language:checked ~ label { - @include after { - display: block; - left: 0.25em; - opacity: 1; - } - } - - #select-language:checked ~ .selector { - @include _(transform, scale(1)); - } - } @else { - display: none; - } - } -} - -@include breakpoint(medium) { - h2 { - font-size: 2.25em; - } - - p { - font-size: 1.4em; - } - - #banner { - figure { - margin: rems(-20) auto rems(2); - } - } - - #main { - clear: right; - - .columns { - form { - margin-top: 2em; - } - } - - .lingua-franca-navigation { - width: 25%; - @include clearfix; - - ul { - padding: 0; - list-style: none; - font-weight: normal; - @include font-family(secondary); - - ul { - margin-left: 1em; - margin-bottom: 1em; - @include font-family(primary); - } - } - - .current { - @include before { - content: ''; - display: block; - position: absolute; - width: 0; - height: 0; - left: -1.5em; - top: 0.6667em; - border-width: 1em 0 1em 1em; - border-color: transparent transparent transparent #333; - border-style: solid; - font-size: 0.25em; - } - } - } - - #lingua-franca-keys { - width: 75%; - float: right; - } - } - - #main-nav { - height: rems(6); - - .nav { - width: 80%; - clear: none; - padding-top: rems(1.5); - background-color: transparent; - overflow: visible; - - a { - padding: 0; - float: none; - width: auto; - margin: 0 0.5em 0.75em; - font-size: 1em; - color: #666; - background-color: transparent; - @include _(text-shadow, 0 0.125em 0.25em #888); - - &:nth-child(n) { - background-color: transparent; - } - - &.current { - color: $colour-1; - } - - @include after { - content: ''; - display: block; - position: absolute; - bottom: -0.1em; - right: 0; - left: 0; - width: 0; - margin: 0 auto; - opacity: 0; - border-bottom: 0.15em solid; - @include _(box-shadow, 0 0.075em 0.15em #888); - @include _(transition, all 250ms ease-in-out); - @include _(transform, none); - } - - &:hover, - &:active, - &:focus { - @include after { - opacity: 1; - width: 100%; - } - } - } - } - - .actions { - font-size: 2vw; - } - } - - #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: 1; - @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 { - .github { - bottom: 0.5em; - left: 4em; - float: left; - } - .facebook { - position: absolute; - left: 0.5em; - } - .locale { - position: absolute; - left: 2em; - } - } -} - -@include breakpoint(large) { - #banner { - body.fixed-banner & { - position: fixed; - top: 0; - right: 0; - left: $sidebar-width; - z-index: 1; - } - - figure { - width: 90%; - } - } - - #main-nav { - position: fixed; - width: $sidebar-width; - height: 100%; - @include default-box-shadow(left, 2); - - .nav { - text-align: left; - padding-top: rems(9); - width: 100%; - - a { - font-size: 1.6em; - margin: 0.75em 1em; - @include _(transition, color 250ms ease-in-out); - - &:hover, &:active, &:focus { - color: #333; - - @include before { - @include _(opacity, 1) - } - } - } - } - - .actions { - position: relative; - top: 0; - right: 0; - font-size: 1em; - } - } - - #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; - } - } - } - - a.logo { - display: block; - float: none; - font-size: rems(7.5); - padding: 0.2em; - } - - .actions { - margin: 4em 2em 0 0; - } - - #footer { - position: fixed; - z-index: 1; - bottom: 0; - left: 0; - width: $sidebar-width; - - .github { - position: absolute; - border-color: transparent; - max-width: 2.25em; - height: 2.25em; - left: 0.5em; - bottom: 0.333em; - overflow: hidden; - color: transparent; - padding: 0.333em; - line-height: 1.5em; - @include _(transition, all 250ms ease-in-out); - - &:hover { - max-width: _calc('100% - 1em', 100%); - color: #333; - border-color: #DDD; - @include default-box-shadow(top, 2, true); - } - - .icons { - float: left; - width: 1.5em; - height: 1.5em; - fill: #333; - vertical-align: middle; - position: static; - } - - a { - margin: 0 0.5em; - font-size: 0.8em; - font-weight: bold; - color: inherit; - position: static; - - &:hover { - text-decoration: underline; - - @include after { - display: none; - } - } - } - } - .facebook, .locale { - position: relative; - left: 2.5em; - bottom: 0.25em; - } - } -} - -@mixin header-colour($page, $colour) { - body.#{$page} { - #header-title { - background-color: $colour; - - rect { - fill: $colour; - } - } - } -} - -@include header-colour(about, $colour-1); -@include header-colour(policy, $colour-3); - -#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 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: #333; - 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 { - //display: block; - 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: 2; - @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: #333; - 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; - background-color: #F8F8F8; - @include default-box-shadow(top, 2, true); -} - -.lingua-franca-translations { - position: relative; - @include default-box-shadow(top, 2); -} - -.lingua-franca-translations .translation-examples { - //width: 100%; - padding: 0 7.5%; - z-index: 1; - background-color: $white; - padding-bottom: 0.5vh; -} - -html #lingua-franca-translation-form { - @include _(box-shadow, none); -} - -.lingua-franca-translations .translation-examples ul { - list-style: none; - padding: 0; - white-space: nowrap; - overflow-x: auto; - overflow-y: hidden; - width: 100%; - height: 6vh; - padding-top: 0.25em; - z-index: 1; - margin: 0; -} - -.lingua-franca-translations .translation-examples li { - display: inline-block; - position: relative; - width: 5vw; - height: 5vh; - margin: 0 0.5em; - - @include after { - content: ''; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - cursor: pointer; - outline: 0.25em solid rgba($colour-2, 0.25); - background-color: rgba($colour-2, 0.25); - outline-color: rgba($colour-2, 0.25); - @include _(transition, '#{background-color, outline-color 250ms, 250ms ease-in-out, ease-in-out}'); - } - - iframe { - @include _(transform, scale(0.05) translate(-950vw, -950vh)); - width: 100vw; - height: 100vh; - @include _(transform-origin, 50% 50%); - //@include _(transition, '#{transform, position, z-index 250ms, 250ms, 0 ease-in-out, ease-in-out, linear 0, 250ms, 0}'); - position: fixed; - margin: auto - } - - &:hover { - @include after { - background-color: rgba($colour-3, 0); - outline-color: rgba($colour-3, 0.5); - } - } - - &.open { - iframe { - top: 0; - left: 0; - z-index: 100; - //margin: auto; - @include _(transform, scale(0.75) translate(0, 0)); - @include default-box-shadow(top, 2); - - @include breakpoint(large) { - left: 8.75rem; - } - } - - @include after { - left: 0; - top: 0; - right: 0; - bottom: 0; - background-color: rgba($colour-3, 0.5); - position: fixed; - z-index: 99; - } - - /*@include before { - content: ''; - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 101; - cursor: pointer; - }*/ - } -} - -.highlight-key { - outline: 3rem solid rgba($colour-2, 0.5); -} - -#lingua-franca-translation-form button[type="submit"] { - margin-right: 0.25em; -} - -.translation-history .translation-diff-info, -.translation-history .diff ul { - list-style: none; - padding: 0; -} - -.translation-history .translation-diff-info li { - margin-bottom: 0.5em; - font-style: italic; -} - -.translation-history .translation-diff-info li, -.translation-history .diff li { - width: 50%; - display: inline-block; - float: left; -} - -#lingua-franca-keys td a .undefined { - font-style: italic; - color: #888; -} - -.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; - border-radius: 50%; - } - } - - .money .stat { - background-color: $colour-5; - } - - .percent { - font-size: 1.5em; - } - - .value { - position: relative; - z-index: 1; - } - - .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; - - .name, .role { - display: inline; - } - - .role { - color: #666; - - @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: #333; - } - - 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; - @include default-box-shadow(top, 2); - @include _(transition, transform 150ms ease-in-out); - - &:hover, &:focus, &:active { - z-index: 1; - @include _(transform, scale(1.1)); - } - - @include before { - content: ''; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1; - cursor: pointer; - @include _(box-shadow, inset 0em -2em 2em -1em $white); - } - - @include after { - display: none; - } - } -} \ No newline at end of file diff --git a/app/assets/stylesheets/foundation_and_overrides.scss b/app/assets/stylesheets/foundation_and_overrides.scss deleted file mode 100644 index 1b37cc2..0000000 --- a/app/assets/stylesheets/foundation_and_overrides.scss +++ /dev/null @@ -1,1209 +0,0 @@ -// -// FOUNDATION SETTINGS -// - -// This is the default html and body font-size for the base rem value. -// $rem-base: 16px; - -// Allows the use of rem-calc() or lower-bound() in your settings -@import "foundation/functions"; - -// $experimental: true; - -// The default font-size is set to 100% of the browser style sheet (usually 16px) -// for compatibility with brower-based text zoom or user-set defaults. - -// Since the typical default browser font-size is 16px, that makes the calculation for grid size. -// If you want your base font-size to be different and not have it affect the grid breakpoints, -// set $rem-base to $base-font-size and make sure $base-font-size is a px value. -// $base-font-size: 100%; - -// The $base-line-height is 100% while $base-font-size is 150% -// $base-line-height: 150%; - -// We use this to control whether or not CSS classes come through in the gem files. -// $include-html-classes: true; -// $include-print-styles: true; -// $include-html-global-classes: $include-html-classes; - -// Grid - -// $include-html-grid-classes: $include-html-classes; - -// $row-width: rem-calc(1000); -// $column-gutter: rem-calc(30); -// $total-columns: 12; - - -// We use these to control header font styles -//$header-font-family: 'ff-ernestine-web-pro', sans-serif;//join("Open Sans", $body-font-family); -//$header-font-family: 'alte_haas_groteskbold', 'Alte Haas Grotesk', sans-serif;//join("Open Sans", $body-font-family); -$header-font-family: 'AlteHaasGroteskBold', sans-serif;//join("Open Sans", $body-font-family); -$header-font-weight: bold; -$icons: FontAwesome;//join("Open Sans", $body-font-family); -// $header-font-style: normal; -// $header-font-color: #222; -// $header-line-height: 1.4; -// $header-top-margin: .2rem; -// $header-bottom-margin: .5rem; -// $header-text-rendering: optimizeLegibility; - -$color-1: #00ADEF; // blue -$color-2: #A0C700; // green -$color-3: #F11845; // pink -$color-4: #FFCC00; // yellow -$color-5: #D3BE9B; // beige - -$conference-color: $color-1; -$organization-color: $color-2; -$article-color: $color-3; - -//$white: #EEEEE0; -$white: #FFF; -$black: #393939; -$gray: #E1E1E1; - -// We use these to control various global styles -$body-bg: $white; -$body-font-color: $black; -//$body-font-family: 'Scotch Micro', serif; -$body-font-family: 'Source Sans Pro', sans-serif; -// $body-font-weight: normal; -// $body-font-style: normal; - -// We use this to control font-smoothing -// $font-smoothing: antialiased; - -// We use these to control text direction settings -// $text-direction: ltr; -// $opposite-direction: right; -// $default-float: left; - -$primary-color: $color-1; -$secondary-color: $color-2; -$alert-color: $color-3; -$success-color: $color-2; -$warning-color: $color-4; -$info-color: $color-5; - -// We use these to make sure border radius matches unless we want it different. -// $global-radius: 3px; -// $global-rounded: 1000px; - -// We use these to control inset shadow shiny edges and depressions. -// $shiny-edge-size: 0 1px 0; -// $shiny-edge-color: rgba(#fff, .5); -// $shiny-edge-active-color: rgba(#000, .2); - -// Media Query Ranges -$small-range: (0em, 45em); -$medium-range: (45.063em, 64em); -$large-range: (64.063em, 90em); -$xlarge-range: (90.063em, 120em); -$xxlarge-range: (120.063em); - -$screen: "only screen"; - -$landscape: "#{$screen} and (orientation: landscape)"; -$portrait: "#{$screen} and (orientation: portrait)"; -$small-up: $screen; -$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})"; -$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})"; -$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})"; -$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})"; -$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})"; -$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})"; -$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})"; -$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})"; -$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})"; - -// Legacy -$small: $medium-up; -$medium: $medium-up; -$large: $large-up; - -//We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet -// $cursor-crosshair-value: crosshair; -// $cursor-default-value: default; -// $cursor-pointer-value: pointer; -// $cursor-help-value: help; -// $cursor-text-value: text; - -// Accordion - -// $include-html-accordion-classes: $include-html-classes; - -// $accordion-navigation-padding: rem-calc(16); -// $accordion-navigation-bg-color: #efefef ; -// $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%); -// $accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%); -// $accordion-navigation-font-color: #222; -// $accordion-navigation-font-size: rem-calc(16); -// $accordion-navigation-font-family: $body-font-family; - -// $accordion-content-padding: $column-gutter/2; -// $accordion-content-active-bg-color: #fff; - -// Alert Boxes - -// $include-html-alert-classes: $include-html-classes; - -// We use this to control alert padding. -// $alert-padding-top: rem-calc(14); -// $alert-padding-default-float: $alert-padding-top; -// $alert-padding-opposite-direction: $alert-padding-top + rem-calc(10); -// $alert-padding-bottom: $alert-padding-top; - -// We use these to control text style. -// $alert-font-weight: normal; -// $alert-font-size: rem-calc(13); -// $alert-font-color: #fff; -// $alert-font-color-alt: scale-color($secondary-color, $lightness: -66%); - -// We use this for close hover effect. -// $alert-function-factor: -14%; - -// We use these to control border styles. -// $alert-border-style: solid; -// $alert-border-width: 1px; -// $alert-border-color: scale-color($primary-color, $lightness: $alert-function-factor); -// $alert-bottom-margin: rem-calc(20); - -// We use these to style the close buttons -// $alert-close-color: #333; -// $alert-close-top: 50%; -// $alert-close-position: rem-calc(5); -// $alert-close-font-size: rem-calc(22); -// $alert-close-opacity: 0.3; -// $alert-close-opacity-hover: 0.5; -// $alert-close-padding: 9px 6px 4px; - -// We use this to control border radius -// $alert-radius: $global-radius; - -// Block Grid - -// $include-html-grid-classes: $include-html-classes; - -// We use this to control the maximum number of block grid elements per row -// $block-grid-elements: 12; -$block-grid-default-spacing: rem-calc(20); -$align-block-grid-to-grid: true; - -// Enables media queries for block-grid classes. Set to false if writing semantic HTML. -// $block-grid-media-queries: true; - -// Breadcrumbs - -// $include-html-nav-classes: $include-html-classes; - -// We use this to set the background color for the breadcrumb container. -// $crumb-bg: scale-color($secondary-color, $lightness: 55%); - -// We use these to set the padding around the breadcrumbs. -// $crumb-padding: rem-calc(9 14 9); -// $crumb-side-padding: rem-calc(12); - -// We use these to control border styles. -// $crumb-function-factor: -10%; -// $crumb-border-size: 1px; -// $crumb-border-style: solid; -// $crumb-border-color: scale-color($crumb-bg, $lightness: $crumb-function-factor); -// $crumb-radius: $global-radius; - -// We use these to set various text styles for breadcrumbs. -// $crumb-font-size: rem-calc(11); -// $crumb-font-color: $primary-color; -// $crumb-font-color-current: #333; -// $crumb-font-color-unavailable: #999; -// $crumb-font-transform: uppercase; -// $crumb-link-decor: underline; - -// We use these to control the slash between breadcrumbs -// $crumb-slash-color: #aaa; -// $crumb-slash: "/"; - -// -// BUTTONS -// - -// $include-html-button-classes: $include-html-classes; - -// We use these to build padding for buttons. -// $button-tny: rem-calc(10); -$button-sml: 0.25rem; -$button-med: 1.3333rem; -$button-lrg: 2rem; - -// We use this to control the display property. -// $button-display: inline-block; -// $button-margin-bottom: rem-calc(20); - -// We use these to control button text styles. -$button-font-family: $header-font-family; -$button-font-color: $white; -$button-font-color-alt: $secondary-color; -// $button-font-tny: rem-calc(11); -// $button-font-sml: rem-calc(13); -// $button-font-med: rem-calc(16); -// $button-font-lrg: rem-calc(20); -$button-font-weight: bold; -$button-font-align: center; - -// We use these to control various hover effects. -// $button-function-factor: 5%; - -// We use these to control button border styles. -$button-border-width: 0.15em; -$button-border-style: solid; -$button-border-color: transparent; - -// We use this to set the default radius used throughout the core. -$button-radius: 0; -// $button-round: $global-rounded; - -// We use this to set default opacity for disabled buttons. -// $button-disabled-opacity: 0.7; - -// Button Groups - -// $include-html-button-classes: $include-html-classes; - -// Sets the margin for the right side by default, and the left margin if right-to-left direction is used -// $button-bar-margin-opposite: rem-calc(10); -// $button-group-border-width: 1px; - -// Clearing - -// $include-html-clearing-classes: $include-html-classes; - -// We use these to set the background colors for parts of Clearing. -// $clearing-bg: #333; -// $clearing-caption-bg: $clearing-bg; -// $clearing-carousel-bg: rgba (51,51,51,0.8); -// $clearing-img-bg: $clearing-bg; - -// We use these to style the close button -// $clearing-close-color: #ccc; -// $clearing-close-size: 30px; - -// We use these to style the arrows -// $clearing-arrow-size: 12px; -// $clearing-arrow-color: $clearing-close-color; - -// We use these to style captions -// $clearing-caption-font-color: #ccc; -// $clearing-caption-font-size: 0.875em; -// $clearing-caption-padding: 10px 30px 20px; - -// We use these to make the image and carousel height and style -// $clearing-active-img-height: 85%; -// $clearing-carousel-height: 120px; -// $clearing-carousel-thumb-width: 120px; -// $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255); - -// Dropdown - -// $include-html-dropdown-classes: $include-html-classes; - -// We use these to controls height and width styles. -// $f-dropdown-max-width: 200px; -// $f-dropdown-height: auto; -// $f-dropdown-max-height: none; -// $f-dropdown-margin-top: 2px; - -// We use this to control the background color -// $f-dropdown-bg: #fff; - -// We use this to set the border styles for dropdowns. -// $f-dropdown-border-style: solid; -// $f-dropdown-border-width: 1px; -// $f-dropdown-border-color: scale-color(#fff, $lightness: -20%); - -// We use these to style the triangle pip. -// $f-dropdown-triangle-size: 6px; -// $f-dropdown-triangle-color: #fff; -// $f-dropdown-triangle-side-offset: 10px; - -// We use these to control styles for the list elements. -// $f-dropdown-list-style: none; -// $f-dropdown-font-color: #555; -// $f-dropdown-font-size: rem-calc(14); -// $f-dropdown-list-padding: rem-calc(5, 10); -// $f-dropdown-line-height: rem-calc(18); -// $f-dropdown-list-hover-bg: #eeeeee ; -// $dropdown-mobile-default-float: 0; - -// We use this to control the styles for when the dropdown has custom content. -// $f-dropdown-content-padding: rem-calc(20); - -// Dropdown Buttons - -// $include-html-button-classes: $include-html-classes; - -// We use these to set the color of the pip in dropdown buttons -// $dropdown-button-pip-color: #fff; -// $dropdown-button-pip-color-alt: #333; - -// $button-pip-tny: rem-calc(6); -// $button-pip-sml: rem-calc(7); -// $button-pip-med: rem-calc(9); -// $button-pip-lrg: rem-calc(11); - -// We use these to style tiny dropdown buttons -// $dropdown-button-padding-tny: $button-pip-tny * 7; -// $dropdown-button-pip-size-tny: $button-pip-tny; -// $dropdown-button-pip-opposite-tny: $button-pip-tny * 3; -// $dropdown-button-pip-top-tny: -$button-pip-tny / 2 + rem-calc(1); - -// We use these to style small dropdown buttons -// $dropdown-button-padding-sml: $button-pip-sml * 7; -// $dropdown-button-pip-size-sml: $button-pip-sml; -// $dropdown-button-pip-opposite-sml: $button-pip-sml * 3; -// $dropdown-button-pip-top-sml: -$button-pip-sml / 2 + rem-calc(1); - -// We use these to style medium dropdown buttons -// $dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3); -// $dropdown-button-pip-size-med: $button-pip-med - rem-calc(3); -// $dropdown-button-pip-opposite-med: $button-pip-med * 2.5; -// $dropdown-button-pip-top-med: -$button-pip-med / 2 + rem-calc(2); - -// We use these to style large dropdown buttons -// $dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3); -// $dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6); -// $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5; -// $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3); - -// Flex Video - -// $include-html-media-classes: $include-html-classes; - -// We use these to control video container padding and margins -// $flex-video-padding-top: rem-calc(25); -// $flex-video-padding-bottom: 67.5%; -// $flex-video-margin-bottom: rem-calc(16); - -// We use this to control widescreen bottom padding -// $flex-video-widescreen-padding-bottom: 57.25%; - -// Forms - -// $include-html-form-classes: $include-html-classes; - -// We use this to set the base for lots of form spacing and positioning styles -// $form-spacing: rem-calc(16); - -// We use these to style the labels in different ways -// $form-label-pointer: pointer; -$form-label-font-size: inherit;//rem-calc(14); -// $form-label-font-weight: normal; -// $form-label-font-color: scale-color(#000, $lightness: 30%); -$form-label-bottom-margin: 0; -// $input-font-family: inherit; -$input-font-color: $black; -$input-font-size: 1.6667rem; -$input-bg-color: $white; -$input-focus-bg-color: #FFF;//scale-color(#fff, $lightness: -2%); -// $input-border-color: scale-color(#fff, $lightness: -20%); -// $input-focus-border-color: scale-color(#fff, $lightness: -40%); -// $input-border-style: solid; -$input-border-width: 0; -// $input-disabled-bg: #ddd; -$input-box-shadow: none;//inset 0 1px 2px rgba(0,0,0,0.1); -$input-include-glowing-effect: false; - -// We use these to style the fieldset border and spacing. -// $fieldset-border-style: solid; -// $fieldset-border-width: 1px; -// $fieldset-border-color: #ddd; -$fieldset-padding: 1.5em 1.5em 1.5em 3em; -$fieldset-margin: 2em 0; - -// We use these to style the legends when you use them -// $legend-bg: #fff; -$legend-font-weight: normal; -$legend-padding: 0 1em; - -// We use these to style the prefix and postfix input elements -// $input-prefix-bg: scale-color(#fff, $lightness: -5%); -// $input-prefix-border-color: scale-color(#fff, $lightness: -20%); -// $input-prefix-border-size: 1px; -// $input-prefix-border-type: solid; -// $input-prefix-overflow: hidden; -// $input-prefix-font-color: #333; -// $input-prefix-font-color-alt: #fff; - -// We use these to style the error states for inputs and labels -// $input-error-message-padding: rem-calc(6 9 9); -// $input-error-message-top: -1px; -// $input-error-message-font-size: rem-calc(12); -// $input-error-message-font-weight: normal; -// $input-error-message-font-style: italic; -// $input-error-message-font-color: #fff; -// $input-error-message-font-color-alt: #333; - -// We use this to style the glowing effect of inputs when focused -// $glowing-effect-fade-time: 0.45s; -// $glowing-effect-color: $input-focus-border-color; - -// Select variables -// $select-bg-color: #fafafa; - -// Inline Lists - -// $include-html-inline-list-classes: $include-html-classes; - -// We use this to control the margins and padding of the inline list. -// $inline-list-top-margin: 0; -// $inline-list-opposite-margin: 0; -// $inline-list-bottom-margin: rem-calc(17); -// $inline-list-default-float-margin: rem-calc(-22); - -// $inline-list-padding: 0; - -// We use this to control the overflow of the inline list. -// $inline-list-overflow: hidden; - -// We use this to control the list items -// $inline-list-display: block; - -// We use this to control any elments within list items -// $inline-list-children-display: block; - -// Joyride - -// $include-html-joyride-classes: $include-html-classes; - -// Controlling default Joyride styles -// $joyride-tip-bg: #333; -// $joyride-tip-default-width: 300px; -// $joyride-tip-padding: rem-calc(18 20 24); -// $joyride-tip-border: solid 1px #555; -// $joyride-tip-radius: 4px; -// $joyride-tip-position-offset: 22px; - -// Here, we're setting the tip dont styles -// $joyride-tip-font-color: #fff; -// $joyride-tip-font-size: rem-calc(14); -// $joyride-tip-header-weight: bold; - -// This changes the nub size -// $joyride-tip-nub-size: 10px; - -// This adjusts the styles for the timer when its enabled -// $joyride-tip-timer-width: 50px; -// $joyride-tip-timer-height: 3px; -// $joyride-tip-timer-color: #666; - -// This changes up the styles for the close button -// $joyride-tip-close-color: #777; -// $joyride-tip-close-size: 24px; -// $joyride-tip-close-weight: normal; - -// When Joyride is filling the screen, we use this style for the bg -// $joyride-screenfill: rgba(0,0,0,0.5); - -// Keystrokes - -// $include-html-type-classes: $include-html-classes; - -// We use these to control text styles. -// $keystroke-font: "Consolas", "Menlo", "Courier", monospace; -// $keystroke-font-size: rem-calc(14); -// $keystroke-font-color: #222; -// $keystroke-font-color-alt: #fff; -// $keystroke-function-factor: -7%; - -// We use this to control keystroke padding. -// $keystroke-padding: rem-calc(2 4 0); - -// We use these to control background and border styles. -// $keystroke-bg: scale-color(#fff, $lightness: $keystroke-function-factor); -// $keystroke-border-style: solid; -// $keystroke-border-width: 1px; -// $keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor); -// $keystroke-radius: $global-radius; - -// Labels - -// $include-html-label-classes: $include-html-classes; - -// We use these to style the labels -// $label-padding: rem-calc(4 8 6); -// $label-radius: $global-radius; - -// We use these to style the label text -$label-font-sizing: 1em;//rem-calc(11); -// $label-font-weight: normal; -// $label-font-color: #333; -// $label-font-color-alt: #fff; -// $label-font-family: $body-font-family; - -// Magellan - -// $include-html-magellan-classes: $include-html-classes; - -// $magellan-bg: #fff; -// $magellan-padding: 10px; - -// Off-canvas - -// $tabbar-bg: #333; -// $tabbar-height: rem-calc(45); -// $tabbar-line-height: $tabbar-height; -// $tabbar-color: #FFF; -// $tabbar-middle-padding: 0 rem-calc(10); - -// Off Canvas Divider Styles -// $tabbar-right-section-border: solid 1px scale-color($tabbar-bg, $lightness: 13%); -// $tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%); - -// Off Canvas Tab Bar Headers -// $tabbar-header-color: #FFF; -// $tabbar-header-weight: bold; -// $tabbar-header-line-height: $tabbar-height; -// $tabbar-header-margin: 0; - -// Off Canvas Menu Variables -// $off-canvas-width: 250px; -// $off-canvas-bg: #333; - -// Off Canvas Menu List Variables -// $off-canvas-label-padding: 0.3rem rem-calc(15); -// $off-canvas-label-color: #999; -// $off-canvas-label-text-transform: uppercase; -// $off-canvas-label-font-weight: bold; -// $off-canvas-label-bg: #444; -// $off-canvas-label-border-top: 1px solid scale-color(#444, $lightness: 14%); -// $off-canvas-label-border-bottom: none; -// $off-canvas-label-margin:0; -// $off-canvas-link-padding: rem-calc(10, 15); -// $off-canvas-link-color: rgba(#FFF, 0.7); -// $off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%); - -// Off Canvas Menu Icon Variables -// $tabbar-menu-icon-color: $black; -// $tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%); - -// $tabbar-menu-icon-text-indent: rem-calc(35); -// $tabbar-menu-icon-width: $tabbar-height; -// $tabbar-menu-icon-height: $tabbar-height; -// $tabbar-menu-icon-line-height: rem-calc(33); -// $tabbar-menu-icon-padding: 0; - -// $tabbar-hamburger-icon-width: rem-calc(16); -// $tabbar-hamburger-icon-left: rem-calc(13); -// $tabbar-hamburger-icon-top: rem-calc(5); - -// Off Canvas Back-Link Overlay -// $off-canvas-overlay-transition: background 300ms ease; -// $off-canvas-overlay-cursor: pointer; -// $off-canvas-overlay-box-shadow: -4px 0 4px rgba(#000, 0.5), 4px 0 4px rgba(#000, 0.5); -// $off-canvas-overlay-background: rgba(#FFF, 0.2); -// $off-canvas-overlay-background-hover: rgba(#FFF, 0.05); - -// Transition Variables -// $menu-slide: "transform 500ms ease"; - -// Orbit - -// $include-html-orbit-classes: $include-html-classes; - -// We use these to control the caption styles -// $orbit-container-bg: none; -// $orbit-caption-bg: rgba(51,51,51, 0.8); -// $orbit-caption-font-color: #fff; -// $orbit-caption-font-size: rem-calc(14); -// $orbit-caption-position: "bottom"; // Supported values: "bottom", "under" -// $orbit-caption-padding: rem-calc(10 14); -// $orbit-caption-height: auto; - -// We use these to control the left/right nav styles -// $orbit-nav-bg: none; -// $orbit-nav-bg-hover: rgba(0,0,0,0.3); -// $orbit-nav-arrow-color: #fff; -// $orbit-nav-arrow-color-hover: #fff; - -// We use these to control the timer styles -// $orbit-timer-bg: rgba(255,255,255,0.3); -// $orbit-timer-show-progress-bar: true; - -// We use these to control the bullet nav styles -// $orbit-bullet-nav-color: #ccc; -// $orbit-bullet-nav-color-active: #999; -// $orbit-bullet-radius: rem-calc(9); - -// We use these to controls the style of slide numbers -// $orbit-slide-number-bg: rgba(0,0,0,0); -// $orbit-slide-number-font-color: #fff; -// $orbit-slide-number-padding: rem-calc(5); - -// Graceful Loading Wrapper and preloader -// $wrapper-class: "slideshow-wrapper"; -// $preloader-class: "preloader"; - -// Pagination - -// $include-html-nav-classes: $include-html-classes; - -// We use these to control the pagination container -// $pagination-height: rem-calc(24); -// $pagination-margin: rem-calc(-5); - -// We use these to set the list-item properties -// $pagination-li-float: $default-float; -// $pagination-li-height: rem-calc(24); -// $pagination-li-font-color: #222; -// $pagination-li-font-size: rem-calc(14); -// $pagination-li-margin: rem-calc(5); - -// We use these for the pagination anchor links -// $pagination-link-pad: rem-calc(1 10 1); -// $pagination-link-font-color: #999; -// $pagination-link-active-bg: scale-color(#fff, $lightness: -10%); - -// We use these for disabled anchor links -// $pagination-link-unavailable-cursor: default; -// $pagination-link-unavailable-font-color: #999; -// $pagination-link-unavailable-bg-active: transparent; - -// We use these for currently selected anchor links -// $pagination-link-current-background: $primary-color; -// $pagination-link-current-font-color: #fff; -// $pagination-link-current-font-weight: bold; -// $pagination-link-current-cursor: default; -// $pagination-link-current-active-bg: $primary-color; - -// Panels - -// $include-html-panel-classes: $include-html-classes; - -// We use these to control the background and border styles -// $panel-bg: scale-color(#fff, $lightness: -5%); -// $panel-border-style: solid; -// $panel-border-size: 1px; - -// We use this % to control how much we darken things on hover -// $panel-function-factor: -11%; -// $panel-border-color: scale-color($panel-bg, $lightness: $panel-function-factor); - -// We use these to set default inner padding and bottom margin -// $panel-margin-bottom: rem-calc(20); -// $panel-padding: rem-calc(20); - -// We use these to set default font colors -// $panel-font-color: #333; -// $panel-font-color-alt: #fff; - -// $panel-header-adjust: true; -// $callout-panel-link-color: $primary-color; - -// Pricing Tables - -// $include-html-pricing-classes: $include-html-classes; - -// We use this to control the border color -// $price-table-border: solid 1px #ddd; - -// We use this to control the bottom margin of the pricing table -// $price-table-margin-bottom: rem-calc(20); - -// We use these to control the title styles -// $price-title-bg: #333; -// $price-title-padding: rem-calc(15 20); -// $price-title-align: center; -// $price-title-color: #eee; -// $price-title-weight: normal; -// $price-title-size: rem-calc(16); -// $price-title-font-family: $body-font-family; - -// We use these to control the price styles -// $price-money-bg: #f6f6f6 ; -// $price-money-padding: rem-calc(15 20); -// $price-money-align: center; -// $price-money-color: #333; -// $price-money-weight: normal; -// $price-money-size: rem-calc(32); -// $price-money-font-family: $body-font-family; - - -// We use these to control the description styles -// $price-bg: #fff; -// $price-desc-color: #777; -// $price-desc-padding: rem-calc(15); -// $price-desc-align: center; -// $price-desc-font-size: rem-calc(12); -// $price-desc-weight: normal; -// $price-desc-line-height: 1.4; -// $price-desc-bottom-border: dotted 1px #ddd; - -// We use these to control the list item styles -// $price-item-color: #333; -// $price-item-padding: rem-calc(15); -// $price-item-align: center; -// $price-item-font-size: rem-calc(14); -// $price-item-weight: normal; -// $price-item-bottom-border: dotted 1px #ddd; - -// We use these to control the CTA area styles -// $price-cta-bg: #fff; -// $price-cta-align: center; -// $price-cta-padding: rem-calc(20 20 0); - -// Progress Meters - -// $include-html-media-classes: $include-html-classes; - -// We use this to se the prog bar height -// $progress-bar-height: rem-calc(25); -// $progress-bar-color: #f6f6f6 ; - -// We use these to control the border styles -// $progress-bar-border-color: scale-color(#fff, $lightness: -20%); -// $progress-bar-border-size: 1px; -// $progress-bar-border-style: solid; -// $progress-bar-border-radius: $global-radius; - -// We use these to control the margin & padding -// $progress-bar-pad: rem-calc(2); -// $progress-bar-margin-bottom: rem-calc(10); - -// We use these to set the meter colors -// $progress-meter-color: $primary-color; -// $progress-meter-secondary-color: $secondary-color; -// $progress-meter-success-color: $success-color; -// $progress-meter-alert-color: $alert-color; - -// Reveal - -// $include-html-reveal-classes: $include-html-classes; - -// We use these to control the style of the reveal overlay. -// $reveal-overlay-bg: rgba(#000, .45); -// $reveal-overlay-bg-old: #000; - -// We use these to control the style of the modal itself. -// $reveal-modal-bg: #fff; -// $reveal-position-top: 50px; -// $reveal-default-width: 80%; -// $reveal-modal-padding: rem-calc(20); -// $reveal-box-shadow: 0 0 10px rgba(#000,.4); - -// We use these to style the reveal close button -// $reveal-close-font-size: rem-calc(22); -// $reveal-close-top: rem-calc(8); -// $reveal-close-side: rem-calc(11); -// $reveal-close-color: #aaa; -// $reveal-close-weight: bold; - -// We use these to control the modal border -// $reveal-border-style: solid; -// $reveal-border-width: 1px; -// $reveal-border-color: #666; - -// $reveal-modal-class: "reveal-modal"; -// $close-reveal-modal-class: "close-reveal-modal"; - -// Side Nav - -// $include-html-nav-classes: $include-html-classes; - -// We use this to control padding. -// $side-nav-padding: rem-calc(14 0); - -// We use these to control list styles. -// $side-nav-list-type: none; -// $side-nav-list-position: inside; -// $side-nav-list-margin: rem-calc(0 0 7 0); - -// We use these to control link styles. -// $side-nav-link-color: $primary-color; -// $side-nav-link-color-active: scale-color(#000, $lightness: 30%); -// $side-nav-font-size: rem-calc(14); -// $side-nav-font-weight: normal; -// $side-nav-font-family: $body-font-family; -// $side-nav-active-font-family: $side-nav-font-family; - - - -// We use these to control border styles -// $side-nav-divider-size: 1px; -// $side-nav-divider-style: solid; -// $side-nav-divider-color: scale-color(#fff, $lightness: -10%); - -// Split Buttons - -// $include-html-button-classes: $include-html-classes; - -// We use these to control different shared styles for Split Buttons -// $split-button-function-factor: 10%; -// $split-button-pip-color: #fff; -// $split-button-pip-color-alt: #333; -// $split-button-active-bg-tint: rgba(0,0,0,0.1); - -// We use these to control tiny split buttons -// $split-button-padding-tny: $button-pip-tny * 10; -// $split-button-span-width-tny: $button-pip-tny * 6; -// $split-button-pip-size-tny: $button-pip-tny; -// $split-button-pip-top-tny: $button-pip-tny * 2; -// $split-button-pip-default-float-tny: rem-calc(-6); - -// We use these to control small split buttons -// $split-button-padding-sml: $button-pip-sml * 10; -// $split-button-span-width-sml: $button-pip-sml * 6; -// $split-button-pip-size-sml: $button-pip-sml; -// $split-button-pip-top-sml: $button-pip-sml * 1.5; -// $split-button-pip-default-float-sml: rem-calc(-6); - -// We use these to control medium split buttons -// $split-button-padding-med: $button-pip-med * 9; -// $split-button-span-width-med: $button-pip-med * 5.5; -// $split-button-pip-size-med: $button-pip-med - rem-calc(3); -// $split-button-pip-top-med: $button-pip-med * 1.5; -// $split-button-pip-default-float-med: rem-calc(-6); - -// We use these to control large split buttons -// $split-button-padding-lrg: $button-pip-lrg * 8; -// $split-button-span-width-lrg: $button-pip-lrg * 5; -// $split-button-pip-size-lrg: $button-pip-lrg - rem-calc(6); -// $split-button-pip-top-lrg: $button-pip-lrg + rem-calc(5); -// $split-button-pip-default-float-lrg: rem-calc(-6); - -// Sub Nav - -// $include-html-nav-classes: $include-html-classes; - -// We use these to control margin and padding -// $sub-nav-list-margin: rem-calc(-4 0 18); -// $sub-nav-list-padding-top: rem-calc(4); - -// We use this to control the definition -// $sub-nav-font-family: $body-font-family; -// $sub-nav-font-size: rem-calc(14); -// $sub-nav-font-color: #999; -// $sub-nav-font-weight: normal; -// $sub-nav-text-decoration: none; -// $sub-nav-border-radius: 3px; -// $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%); - - -// We use these to control the active item styles - -// $sub-nav-active-font-weight: normal; -// $sub-nav-active-bg: $primary-color; -// $sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%); -// $sub-nav-active-color: #fff; -// $sub-nav-active-padding: rem-calc(3 16); -// $sub-nav-active-cursor: default; - -// $sub-nav-item-divider: ""; -// $sub-nav-item-divider-margin: rem-calc(12); - -// -// SWITCH -// - -// $include-html-form-classes: $include-html-classes; - -// Controlling border styles and background colors for the switch container -// $switch-border-color: scale-color(#fff, $lightness: -20%); -// $switch-border-style: solid; -// $switch-border-width: 1px; -// $switch-bg: #fff; - -// We use these to control the switch heights for our default classes -// $switch-height-tny: 22px; -// $switch-height-sml: 28px; -// $switch-height-med: 36px; -// $switch-height-lrg: 44px; -// $switch-bottom-margin: rem-calc(20); - -// We use these to control default font sizes for our classes. -// $switch-font-size-tny: 11px; -// $switch-font-size-sml: 12px; -// $switch-font-size-med: 14px; -// $switch-font-size-lrg: 17px; -// $switch-label-side-padding: 6px; - -// We use these to style the switch-paddle -// $switch-paddle-bg: #fff; -// $switch-paddle-fade-to-color: scale-color($switch-paddle-bg, $lightness: -10%); -// $switch-paddle-border-color: scale-color($switch-paddle-bg, $lightness: -35%); -// $switch-paddle-border-width: 1px; -// $switch-paddle-border-style: solid; -// $switch-paddle-transition-speed: .1s; -// $switch-paddle-transition-ease: ease-out; -// $switch-positive-color: scale-color($success-color, $lightness: 94%); -// $switch-negative-color: #f5f5f5; - -// Outline Style for tabbing through switches -// $switch-label-outline: 1px dotted #888; - -// Tables - -// $include-html-table-classes: $include-html-classes; - -// These control the background color for the table and even rows -// $table-bg: #fff; -// $table-even-row-bg: #f9f9f9 ; - -// These control the table cell border style -// $table-border-style: solid; -// $table-border-size: 1px; -// $table-border-color: #ddd; - -// These control the table head styles -// $table-head-bg: #f5f5f5 ; -// $table-head-font-size: rem-calc(14); -// $table-head-font-color: #222; -// $table-head-font-weight: bold; -// $table-head-padding: rem-calc(8 10 10); - -// These control the row padding and font styles -// $table-row-padding: rem-calc(9 10); -// $table-row-font-size: rem-calc(14); -// $table-row-font-color: #222; -// $table-line-height: rem-calc(18); - -// These are for controlling the display and margin of tables -// $table-display: table-cell; -// $table-margin-bottom: rem-calc(20); - -// -// TABS -// - -// $include-html-tabs-classes: $include-html-classes; - -// $tabs-navigation-padding: rem-calc(16); -// $tabs-navigation-bg-color: #efefef ; -// $tabs-navigation-active-bg-color: #fff; -// $tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%); -// $tabs-navigation-font-color: #222; -// $tabs-navigation-font-size: rem-calc(16); -// $tabs-navigation-font-family: $body-font-family; - -// $tabs-content-margin-bottom: rem-calc(24); -// $tabs-content-padding: $column-gutter/2; - -// $tabs-vertical-navigation-margin-bottom: 1.25rem; - -// -// THUMBNAILS -// - -// $include-html-media-classes: $include-html-classes; - -// We use these to control border styles -// $thumb-border-style: solid; -// $thumb-border-width: 4px; -// $thumb-border-color: #fff; -// $thumb-box-shadow: 0 0 0 1px rgba(#000,.2); -// $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5); - -// Radius and transition speed for thumbs -// $thumb-radius: $global-radius; -// $thumb-transition-speed: 200ms; - -// -// TOOLTIPS -// - -// $include-html-tooltip-classes: $include-html-classes; - -// $has-tip-border-bottom: dotted 1px #ccc; -// $has-tip-font-weight: bold; -// $has-tip-font-color: #333; -// $has-tip-border-bottom-hover: dotted 1px scale-color($primary-color, $lightness: -55%); -// $has-tip-font-color-hover: $primary-color; -// $has-tip-cursor-type: help; - -// $tooltip-padding: rem-calc(12); -// $tooltip-bg: #333; -// $tooltip-font-size: rem-calc(14); -// $tooltip-font-weight: normal; -// $tooltip-font-color: #fff; -// $tooltip-line-height: 1.3; -// $tooltip-close-font-size: rem-calc(10); -// $tooltip-close-font-weight: normal; -// $tooltip-close-font-color: #777; -// $tooltip-font-size-sml: rem-calc(14); -// $tooltip-radius: $global-radius; -// $tooltip-pip-size: 5px; - -// -// TOP BAR -// - -// $include-html-top-bar-classes: false;//$include-html-classes; - -// Background color for the top bar -$topbar-arrows: false; - -$topbar-bg-color: $black; -$topbar-bg: transparent;//$black; - -// Height and margin -$topbar-height: 5em; -// $topbar-margin-bottom: 0; - -// Controlling the styles for the title in the top bar -$topbar-title-weight: 800; -$topbar-title-font-size: 2em; - -// Style the top bar dropdown elements -$topbar-dropdown-bg: transparent; -// $topbar-dropdown-link-color: #fff; -$topbar-dropdown-link-bg: $black; -// $topbar-dropdown-link-weight: normal; -// $topbar-dropdown-toggle-size: 5px; -// $topbar-dropdown-toggle-color: #fff; -// $topbar-dropdown-toggle-alpha: 0.4; - -// Set the link colors and styles for top-level nav -$topbar-link-color: $white; -$topbar-link-color-hover: rgba($white, 0.75); -$topbar-link-color-active: $white; -// $topbar-link-weight: normal; -// $topbar-link-font-size: rem-calc(13); -// $topbar-link-hover-lightness: -10%; // Darken by 10% -$topbar-link-bg-hover: lighten($black, 25); -$topbar-link-bg-active: $black; -$topbar-link-bg-active-hover: $topbar-link-bg-hover; // scale-color($primary-color, $lightness: -14%); -$topbar-link-font-family: $header-font-family; - -// $topbar-button-font-size: 0.75rem; - -// $topbar-dropdown-label-color: #777; -// $topbar-dropdown-label-text-transform: uppercase; -// $topbar-dropdown-label-font-weight: bold; -// $topbar-dropdown-label-font-size: rem-calc(10); -$topbar-dropdown-label-bg: $color-1; - -// Top menu icon styles -$topbar-menu-link-transform: uppercase; -$topbar-menu-link-font-size: 1em; -// $topbar-menu-link-weight: bold; -$topbar-menu-link-color: $white; -$topbar-menu-icon-color: $white; -// $topbar-menu-link-color-toggled: #888; -// $topbar-menu-icon-color-toggled: #888; - -// Transitions and breakpoint styles -// $topbar-transition-speed: 300ms; -// Using rem-calc for the below breakpoint causes issues with top bar -$topbar-breakpoint: #{upper-bound($small-range)}; // Change to 9999px for always mobile layout -// $topbar-media-query: "only screen and (min-width: #{upper-bound($medium-range)})"; - -// Divider Styles -// $topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%); -// $topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%); - -// Sticky Class -// $topbar-sticky-class: ".sticky"; -// $topbar-arrows: true; //Set false to remove the triangle icon from the menu item - -// -// TYPOGRAPHY -// - -// $include-html-type-classes: $include-html-classes; -$include-open-sans: false; - -// We use these to control header font sizes -// $h1-font-size: rem-calc(44); -// $h2-font-size: rem-calc(37); -// $h3-font-size: rem-calc(27); -// $h4-font-size: rem-calc(23); -// $h5-font-size: rem-calc(18); -// $h6-font-size: 1rem; - -// These control how subheaders are styled. -// $subheader-line-height: 1.4; -// $subheader-font-color: scale-color($header-font-color, $lightness: 35%); -// $subheader-font-weight: 300; -// $subheader-top-margin: .2rem; -// $subheader-bottom-margin: .5rem; - -// A general styling -// $small-font-size: 60%; -// $small-font-color: scale-color($header-font-color, $lightness: 35%); - -// We use these to style paragraphs -// $paragraph-font-family: inherit; -// $paragraph-font-weight: normal; -$paragraph-font-size: 1.1rem; -$paragraph-line-height: 1.5em; -// $paragraph-margin-bottom: rem-calc(20); -// $paragraph-aside-font-size: rem-calc(14); -// $paragraph-aside-line-height: 1.35; -// $paragraph-aside-font-style: italic; -// $paragraph-text-rendering: optimizeLegibility; - -// We use these to style tags -// $code-color: scale-color($alert-color, $lightness: -27%); -// $code-font-family: Consolas, 'Liberation Mono', Courier, monospace; -// $code-font-weight: bold; - -// We use these to style anchors -// $anchor-text-decoration: none; -// $anchor-font-color: $primary-color; -// $anchor-font-color-hover: scale-color($primary-color, $lightness: -14%); - -// We use these to style the
element -// $hr-border-width: 1px; -// $hr-border-style: solid; -// $hr-border-color: #ddd; -// $hr-margin: rem-calc(20); - -// We use these to style lists -// $list-style-position: outside; -// $list-side-margin: 1.1rem; -// $list-ordered-side-margin: 1.4rem; -// $list-side-margin-no-bullet: 0; -// $list-nested-margin: rem-calc(20); -// $definition-list-header-weight: bold; -// $definition-list-header-margin-bottom: .3rem; -// $definition-list-margin-bottom: rem-calc(12); - -// We use these to style blockquotes -// $blockquote-font-color: scale-color($header-font-color, $lightness: 35%); -// $blockquote-padding: rem-calc(9 20 0 19); -// $blockquote-border: 1px solid #ddd; -// $blockquote-cite-font-size: rem-calc(13); -// $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%); -// $blockquote-cite-link-color: $blockquote-cite-font-color; - -// Acronym styles -// $acronym-underline: 1px dotted #ddd; - -// We use these to control padding and margin -// $microformat-padding: rem-calc(10 12); -// $microformat-margin: rem-calc(0 0 20 0); - -// We use these to control the border styles -// $microformat-border-width: 1px; -// $microformat-border-style: solid; -// $microformat-border-color: #ddd; - -// We use these to control full name font styles -// $microformat-fullname-font-weight: bold; -// $microformat-fullname-font-size: rem-calc(15); - -// We use this to control the summary font styles -// $microformat-summary-font-weight: bold; - -// We use this to control abbr padding -// $microformat-abbr-padding: rem-calc(0 1); - -// We use this to control abbr font styles -// $microformat-abbr-font-weight: bold; -// $microformat-abbr-font-decoration: none; - -// -// VISIBILITY CLASSES -// - -// $include-html-visibility-classes: $include-html-classes; - -@import 'foundation'; diff --git a/config/environments/preview.rb b/config/environments/preview.rb index c5d7959..5bf718d 100644 --- a/config/environments/preview.rb +++ b/config/environments/preview.rb @@ -66,7 +66,7 @@ BikeBike::Application.configure do # application.js, application.css, and all non-JS/CSS in app/assets folder are already added. # config.assets.precompile += %w( search.js ) config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif) - config.action_controller.asset_host = "https://preview-cdn.bikebike.org" + #config.action_controller.asset_host = "https://preview-cdn.bikebike.org" # Ignore bad email addresses and do not raise email delivery errors. # Set this to true and configure the email server for immediate delivery to raise delivery errors. diff --git a/config/environments/production.rb b/config/environments/production.rb index cf3a012..9f8616b 100644 --- a/config/environments/production.rb +++ b/config/environments/production.rb @@ -66,7 +66,7 @@ BikeBike::Application.configure do # application.js, application.css, and all non-JS/CSS in app/assets folder are already added. # config.assets.precompile += %w( search.js ) #config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif) - config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif *.svg application/*.scss web-fonts/*.scss) + config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif *.svg) #config.action_controller.asset_host = "https://cdn.bikebike.org" # Ignore bad email addresses and do not raise email delivery errors.