BathHacked/energy-sparks

/* Font sizes */
/* Other font definitions also found in common_chart_options.js.erb & live_data.js.erb */

$f-super-big: 60px;
$f0: 50px;
$f1: 37.3px;
$f2: 31.1px;
$f3: 25.9px;
$f4: 21.6px;
$f5: 18px;
$f6: 15px;
$f7: 12.5px;
$f8: 10px;

$default-font-family: 'Quicksand', sans-serif;
$default-font-size: $f5;

.f1 { font-size: $f1; }
.f2 { font-size: $f2; }
.f3 { font-size: $f3; }
.f4 { font-size: $f4; }
.f5 { font-size: $f5; }
.f6 { font-size: $f6; }
.f7 { font-size: $f7; }

body {
  font-family: $default-font-family;
  font-weight: 500;
  font-size: $default-font-size;
  overflow-x: hidden;
}

div.application.container {
  padding-bottom: 30px;
}

.navigation-margin {
  // TBD
}

.top-nav-margin {
  margin-top: 53px;
}

.sub-nav-margin {
  margin-top: 100px;
}

section.home.alerts {
  padding-top: 30px;
}

address {
  display: inline !important;
  font-size: initial;
}

p.small {
  font-size: $f6;
}

.very-small {
  font-size: $f7;
}

.nowrap {
  white-space: nowrap;
}

footer li {
  font-size: $f6;
}

nav li {
  font-size: $f6;
}

.bg-positive {
  background-image: linear-gradient(to right, $bg-positive 0%, $bg-positive-light 100%);
}

.bg-positive-dark {
  background-color: $bg-positive;
}

.bg-positive-light {
  background-color: $bg-positive-light;
}

.bg-neutral {
  background-image: linear-gradient(to right, $bg-neutral 0%, $bg-neutral-light 100%);
}

.bg-negative {
  background-image: linear-gradient(to right, $bg-negative 0%, $bg-negative-light 100%);
}

.bg-negative-dark {
  background-color: $bg-negative;
}

.bg-negative-light {
  background-color: $bg-negative-light;
}

.bg-light-blue {
  background-image: linear-gradient(to right, $light-blue 0%, $lighter-light-blue 100%);
}

section.padded-section {
  padding: 100px 0;
}

div.padded-row {
  padding-top: 30px;
  padding-bottom: 30px;
}

div.callout-text {
  padding-right: 30px;
}

@media (max-width: 767px) {
  section {
    padding: 75px 0;
  }
  section.first {
    padding-top: 75px;
  }
}

div.bio {
  border: none;
}

div.hide {
  display: none;
}

.hidden {
  display: none;
}

table th.actions {
  width: 20%;
}

table th.description {
  width: 50%;
}

th.fixed-width-150 {
  min-width: 150px;
}

.table td.fit {
  white-space: nowrap;
  width: 1px;
}

.table td.overflow {
  white-space: nowrap;
  text-overflow:ellipsis;
  overflow: hidden;
  max-width:1px;
}


div.meter-attributes {
  kbd {
    color: $black;
    background-color: $white;
  }
}

// Stops bootstrap hiding error messages for wrapped inputs
// OK for us as we don't render invalid feedback unless there is an error
.invalid-feedback {
  display: block !important;
}


// imput fields with specified 'pattern' will highlight when invalid
input:invalid {
  color: $new-red;
}

.funnel-image {
  border-radius: 0.5rem 0.5rem;
}

.nav-anchor a {
  position: absolute;
  left: 0px;
  top: -60px;
}

.nav-anchor {
  position: relative;
}

.static-images {
  height: 300px;
  width: 400px;
}

.static-images.small {
  height: 200px;
  width: 300px;
}

.accordion-block {
  padding-top: 20px;
}

dl dt {
  margin-bottom: 0.5rem;
}

.terms-and-conditions {
  ul {
    list-style-type: none;
  }
  ul li {
    margin: 0 0 10px 0;
  }
  table {
    width: 100%;
    margin-bottom: 30px;
  }
  .right {
    text-align: right;
  }
}

.agreements {
  margin-top: 20px;
  margin-bottom: 20px;
}

.text-break {
  white-space: pre-line;
}

.main-breadcrumbs .breadcrumb-item+.breadcrumb-item::before {
  content: quote(">");
}

.main-breadcrumbs {
  background-color: transparent;
  padding: 0;
}

.bg-dark-blue {
  background-color: $dark-blue;
}

.text-white {
  color: $white;
}

.text-dark-blue {
  color: $dark-blue;
}

.card .card-footer.plain {
  border-top: none;
  background-color: white;
}

// fuel colour styles

@each $tag, $colour in $fuel-colours-light {
  .bg-#{$tag}-light {
    background-color: $colour;
  }
}

@each $tag, $colour in $fuel-colours-dark {
  .bg-#{$tag}-dark {
    background-color: $colour;
  }
  .text-#{$tag} {
    color: $colour;
  }
}

@each $tag, $colour in $colours-comparison {
  .bg-#{$tag} {
    background-color: $colour !important;
  }
  .text-#{$tag} {
    text-decoration: underline;
    text-decoration-color: $colour;
    text-decoration-thickness: 3px;
    font-weight: bolder;
  }
}