app/assets/stylesheets/base.css.scss
$light: 300;
$bold: 800;
// $bg-color: #FFFFFF; //main background color, white
// $nav: #F8F8F8;
// $dark: #2c2c2c;
// $light-grey: #787878;
// $base: #406DE4;
// $light: #E7F0FA;
// $accent: #FFBD31;
// $red-accent: #D84765;
$bg-color: #FFFFFF; //main background color, white
$nav: #F8F8F8;
$dark: #2c2c2c;
$light-grey: #787878;
$base: #3f5666;
$light: #E7F0FA;
$accent: #FFB632;
$red-accent: #D84765;
$lg-green: #82d29e;
// These need to be removed, but log files, caches prevent removal.
$off-white: red; // deprecated
$deeper-blue: red; // deprecated
$accent-yellow: red; // depreacted
$grey-blue: red; // deprecated
$cream: red; // deprecated
$primary-blue: #428BCA; // bootstrap primary blue
$grey: #969795;
$dynamic: #F0AD4E; //used for live stats and accents
a {
color: inherit;
cursor: pointer;
}
a:hover {
text-decoration: none;
color: inherit;
a:focus {
text-decoration: none;
color: inherit;
}
}
html {
-ms-overflow-style: none;
position: relative;
// height: 100%;
}
body {
background-color: $bg-color;
// background-image: image-url("noise.png");
color: $dark;
padding-top: 68px;
font-family : 'Open Sans',Verdana,Helvetica,sans-serif;
line-height: 1;
max-width: 100%;
overflow-x: hidden;
min-height: 100%;
}
html, body {
height: 100%;
}
/* Margin
========================================================================== */
$margin: 25px;
$margin-large: 35px;
$margin-small: 15px;
.margin { margin: $margin; }
.margin-top { margin-top: $margin !important; }
.margin-bottom { margin-bottom: $margin !important; }
.margin-left { margin-left: $margin !important; }
.margin-right { margin-right: $margin !important; }
/*
* Larger margins
*/
.margin-large { margin: $margin-large; }
.margin-large-top { margin-top: $margin-large !important; }
.margin-large-bottom { margin-bottom: $margin-large !important; }
.margin-large-left { margin-left: $margin-large !important; }
.margin-large-right { margin-right: $margin-large !important; }
/*
* Smaller margins
*/
.margin-small { margin: $margin-small; }
.margin-small-top { margin-top: $margin-small !important; }
.margin-small-bottom { margin-bottom: $margin-small !important; }
.margin-small-left { margin-left: $margin-small !important; }
.margin-small-right { margin-right: $margin-small !important; }
/*
* Remove margins
*/
.margin-remove { margin: 0 !important; }
.margin-top-remove { margin-top: 0 !important; }
.margin-bottom-remove { margin-bottom: 0 !important; }
/* ======================================================================== */
.btn-base {
background-color: $base;
color: $bg-color;
/* unvisited link */
a:link {
text-decoration: none;
}
/* visited link */
a:visited {
text-decoration: none;
}
/* mouse over link */
a:hover {
text-decoration: none;
}
/* selected link */
a:active {
text-decoration: none;
}
&.active {
text-decoration: none;
background-color: $grey;
color: white;
font-weight: $bold;
}
&.focus {
text-decoration: none;
background-color: $grey;
color: white;
font-weight: $bold;
}
}
.btn-light {
background-color: $light;
color: $dark;
}
.btn-accent {
background-color: $accent;
color: $dark;
}
.btn-red {
background-color: $red-accent;
color: $dark;
}
.btn-green {
background-color: $lg-green;
color: white;
}
.btn-grey {
background-color: $grey;
color: white;
}
#wrap {
min-height: 100%;
}
#main {
overflow-x: hidden;
padding-bottom: 68px; /* make same height as footer */
}
.footer {
position: relative;
// margin-top: -68px;
min-height: 68px;
clear: both;
background-color: $grey;
background-image: image-url("noise.png");
color: white;
padding-top: 12px;
}
b, strong {
font-weight: $bold;
}
.navbar-main {
padding-top: rem-calc(5px);
padding-bottom: rem-calc(5px);
z-index: 9;
border: none;
margin-bottom: 15px;
min-height: 68px;
background-image: image-url("noise.png");
background-color: $lg-green;
line-height: rem-calc(24px);
a {
color: $bg-color !important;
}
.dropdown-item {
color: $dark !important;
}
}
.navbar-logo {
background-image: image-url("new_logo_white.png");
background-repeat: no-repeat;
background-size: 100%;
height: 3em;
width: 3em;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
.navbar-logo-2 {
background-image: image-url("new_logo_white.png");
height: 3em;
width: 3em;
background-size: 100%;
background-repeat: no-repeat;
}
.navbar-market {
top: 68px;
}
.add {
color: green;
}
.remove {
color: $red-accent
}
.btn-map-label {
padding-left: 2px;
}
.breadcrumb {
// background-color: $primary-blue;
background-image: image-url("noise.png");
}
.progress {
// background-color: $off-white;
background-image: image-url("noise.png");
}
.progress-bar-grey {
// background-color: $light-grey;
background-image: image-url("noise.png");
}
.live {
color: $accent;
&.little {
font-size: rem-calc(15px);
}
}
.little {
font-size: rem-calc(15px);
font-weight: normal;
}
.center {
text-align: center;
}
.pad_for_footer {
margin-bottom: 60px
}
.btn-open-donation, .btn-open-donation:hover {
color: $nav;
background-color: $red-accent;
text-transform: uppercase;
}
.btn-donate, .btn-donate:hover {
color: $bg-color;
background-color: $base;
background-image: image-url("noise.png");
text-transform: uppercase;
}
.btn-donate-go {
color: $bg-color;
background-color: $base;
background-image: image-url("noise.png");
width: 50px;
height: 50px;
font-size: rem-calc(18px);
font-weight: $bold;
text-transform: uppercase;;
}
.header-image {
margin-top: -20px;
width: 100%;
text-align: center;
position: relative;
}
.controls {
color: red !important;
}
.featurette {
padding: 0;
margin-top: 2em;
.featurette-heading {
font-size: 2.3rem;
margin: 2rem 0;
}
p.lead {
font-size: 1.5rem;
line-height: 2.4rem;
}
.container {
margin-top: rem-calc(30px);
margin-bottom: rem-calc(30px);
}
hr {
border: none;
height: rem-calc(10px);
margin: 0;
padding: 0;
}
}
.title {
font-size: rem-calc(28px);
font-weight: $bold;
text-transform: uppercase;
&.show {
font-size: rem-calc(42px);
margin-top: -30px;
margin-bottom: -15px;
}
}
.content {
// color: $off-white;
}
.rn-content {
// color: $off-white;
padding-top: 24px;
padding-right: 24px;
}
.rn-title {
// color: $off-white;
font-size: rem-calc(28px);
font-weight: $bold;
text-transform: uppercase;
padding-right: 20px;
&.show {
font-size: rem-calc(42px);
margin-top: -30px;
margin-bottom: -15px;
}
}
.tile {
cursor: pointer;
}
.rating {
// color: $off-white;
}
.modal-header {
border: 0;
// background-color: #5A6C77;
// background-image: inherit;
}
.modal-title {
// color: $off-white;
font-size: rem-calc(24px);
font-weight: $bold;
text-transform: uppercase;
}
.modal-body {
.mb-title {
// color: $off-white;
font-size: rem-calc(18px);
font-weight: $bold;
text-transform: uppercase;
}
}
.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
// background-color: #5A6C77;
}
.tabs-below, .tabs-right, .tabs-left {
.nav-tabs {
border-bottom: 0;
}
}
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: none;
}
.tab-content > .active,
.pill-content > .active {
display: block;
}
.tabs-left, .tabs-right {
> .nav-tabs > li {
float: none;
> a {
min-width: 74px;
margin-right: 0;
margin-bottom: 3px;
}
}
}
.tabs-left > .nav-tabs {
float: left;
margin-right: 19px;
border-right: 1px solid #ddd;
> li > a {
margin-right: -1px;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
&:hover, &:focus {
// border-color: #eee #ddd #eee #eee;
}
}
> .active a {
&, &:hover, &:focus {
// border-color: #ddd transparent #ddd #ddd;
// *border-right-color: #fff;
}
}
}
.tabs-right > .nav-tabs {
float: right;
margin-left: 19px;
padding: 5px;
// border-left: 1px solid #ddd;
> li > a {
// margin-left: -1px;
-webkit-border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
border-radius: 6px 6px 6px 6px;
border: none;
// background-color: $nav;
// color: black;
&:hover, &:focus {
// background-color: $lilac;
// color: $dynamic;
// border: none;
}
}
> .active a {
&, &:hover, &:focus {
border: none;
// *border-left-color: #fff;
// color: $dynamic;
// background-color: $bg-color;
}
}
}
#editor {
max-height: 250px;
height: 250px;
background-color: white;
border-collapse: separate;
border: 1px solid rgb(204, 204, 204);
padding: 4px;
box-sizing: content-box;
-webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
border-top-right-radius: 3px; border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px; border-top-left-radius: 3px;
overflow: scroll;
outline: none;
}
.floater-0 {
position: fixed;
top: 4em;
right: 1em;
z-index: 10;
}
.close {
margin-left: .5em;
}
.floater-1{
position: fixed;
top: 8em;
right: 1em;
z-index: 10;
}
.floater-2{
position: fixed;
top: 12em;
right: 1em;
z-index: 10;
}
.push-down {
margin-bottom: 2em;
}
#sticky {
width: 100%;
border-radius: 0;
// background-color: $dark;
background-image: image-url("noise.png");
top: -1em;
}
#sticky.stick {
position: fixed;
top: 68px;
z-index: 10;
border-radius: 0;
}
#msticky {
width: 100%;
// margin-top: 2em;
// border-radius: 0;
background-color: $nav;
background-image: image-url("noise.png");
// top: -1em;
}
#msticky.mstick {
position: fixed;
left: 0;
top: 68px;
z-index: 10;
border-radius: 0;
padding: 1em;
}
.noisy {
background-image: image-url("noise.png");
// background-color: $nav;
}
.create {
// border-color: $lg-green;
border-width: .1em;
}
.update {
// border-color: $accent;
border-width: .1em;
}
.clear {
margin-top: 4em;
}
// this is to control the packery object
// .packery-sizer, .packery-object {
// width: 500px;
// }