index.scss

/*
 * VARIABLES
 */

/* manage global CSS vars here */

/* status colors: defined here, used and exported below */
$status1: #f3ff00;
$status2: #ffa500;
$status3: #F26C4F;
$status4: #ff0000;
$status5: #5974a2;
$status6: #58a1a1;
$status7: #4CDB4C;
$status8: #845440;
$status9: #d6a490;

// circle styles for the divIcons on the map
$circlesize: 12;
$circlesize_mobile: $circlesize + 2;
$circleopacity: 0.85;

/* 
 * EXPORTS
 */

/* export any variables also used in JavaScript here. 
   Dividing by units, makes them unitless (but always strings) */
:export {
  status1: $status1;
  status2: $status2;
  status3: $status3;
  status4: $status4;
  status5: $status5;
  status6: $status6;
  status7: $status7;
  status8: $status8;
  status9: $status9;

  circlesize: $circlesize;
  circlesize_mobile: $circlesize_mobile;
  circleopacity: $circleopacity;
}

/* General page elements */

* { padding: 0; margin: 0; outline: 0; }
html, body, #map { height: 100% }
#map { margin:8px 0 0; width: auto; }
div.content-container {padding:10px 15px;}
div.table-container { width: 100%; font-size:90%; margin-bottom: 0; padding-bottom: 0; }
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */

/* some utility definitions */
.right  { text-align:right; }
.left   { text-align:left; }
.center { text-align:center; }

/* the container around the map/table tabs */
div#container { 
  padding: 10px 10px 0; 
  margin: 0; 
  background-color: #fff; 
  border: 1px solid #ddd; 
  border-radius: 4px 4px 0 0; 
}

/* Buttons placed inline with nav tabs */
div.nav-button-wrapper { 
  display: inline; 
  a { 
    text-decoration:none; 
    cursor: pointer;
    padding: 10px 15px;
    &:hover {
      background: #e6e6e6;
      color: #337ab7;
      border-radius:3px;
    }
  }
}

/* Simple CSS navigation tabs*/

div.tab-wrapper input.tab {
  display: none;
}
div.tab-wrapper label.tab {
  box-sizing: border-box;
  display: inline-block;
  padding: 10px 15px;
  color: #aaa;
  margin-bottom: -1px;
  margin-left: -1px;
  font-weight:400;
}
div.tab-wrapper label.tab:before {
  content:'';
  display:block;
  width:100%;
  /*height:15px; causes overflow at bottom of tab content ! */
  background-color:#fff;
  position:absolute;
  bottom:-11px;
  left:0;
  z-index:10;  
}
div.tab-wrapper label.tab:hover {
  color: #666;
  cursor: pointer;
}
div.tab-wrapper input.tab:checked + label.tab {
  position: relative;
  color: #000;
  background: #fff;
  border: 1px solid #bbb;
  border-bottom: 1px solid #fff;
  border-radius: 3px 3px 0 0;
}
div.tab-wrapper input.tab:checked + label.tab:after {
  display: block;
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

div.content {
  border-top: 1px solid #ddd;
  display: none;
  margin: 0 -10px 0;
  /*keep tabs at top, content overflow scroll below, after resizing content body*/
  overflow-y: auto;
}

/* important: if adding a new tab, include markup for it here */
input#map-tab:checked ~ div#map-content,
input#table-tab:checked ~ div#table-content,
input#about-tab:checked ~ div#about-content,
input#help-tab:checked ~ div#help-content {
  display: block;
}

/* Map country results */
div#country-results { 
  padding: 10px;
  font-size: 14px;
  line-height: 15px;
  position: absolute;
  top: 72px;
  left: 12px;
  background: #fff;
  border-radius: 4px;
  color: #333; 
  box-shadow: 0 1px 5px rgba(0,0,0,0.4); 
  z-index: 1004; 
  min-width:20px; min-height:20px;
}

div#country-results div#results-title h3 {
  margin-top:0;
  margin-bottom:8px;
  white-space:nowrap;
  margin-right:1em;
} 

div#country-results div#total-count {
  margin-top: 5px;
  font-size: 16px;
  font-weight:400;
  color: #666;
}

div#country-results div#total-count span.zoom {
  font-size: 12px;
  font-weight: 300;
  margin-left: 1em;
}

// div#country-results div#type-count {
//   margin-top: 10px;
// }

// div#country-results div#type-count > div {
//   margin-bottom:5px;
// } 

// div#country-results div#type-count > div > span {
//   float:right;
//   margin-right: 8px;
// }

div#results-icon {
  position:absolute;
  box-shadow: 0 1px 5px rgba(0,0,0,0.4);
  width:40px; 
  height:40px; 
  z-index:1001;
  border-radius: 4px;
  top:73px;
  left:13px;
  background:#fff;
  color: #444;
  font-size:22px;
  text-align: center;
  line-height:45px;
}

/* Layer control panel and hidden icon */
div.layer-control { 
  padding: 7px;
  font-size: 12px;
  line-height: 15px;
  position: absolute;
  bottom: 22px;
  right: 12px;
  background: #fff;
  border-radius: 4px;
  color: #333;
  box-shadow: 0 1px 5px rgba(0,0,0,0.4); 
  z-index: 1005; 
  overflow-y: auto;
  min-width: 135px;

  label { display: block; font-weight: normal; margin-left: 3px; }
  input { margin: -3px 0 0; vertical-align: middle; }

  div.circle { float: left; margin: 0 6px 0 0; width:13px; height:13px; border-radius:50%; border: 1px solid rgba(100,100,100,0.8); }

  div.leaflet-control-layers-separator { margin: 5px -7px 5px -7px; }

  div#layer-control-clear {
    text-align: center;
    margin-bottom:4.8px;
    font-size: 11px;
    span {
      cursor: pointer;
      color: #337ab7;
      &:hover {
        text-decoration: underline;
      }
    }
  }

}

/* Map legend and map marker styles */
/* legend markers used in map legend, lines and circles*/

// div.layer-control span.legend-title {
//   font-weight: bold;
//   font-size:14px;
//   display: inline-block;
//   margin: 4px 0 5px;
// }
.leaflet-control-layers-overlays {margin:4px 0 6px;}
.leaflet-control-layers-group label, .leaflet-control-layers-group input {cursor: pointer;}
.leaflet-control-layers-group label { padding-left: 0;}
.leaflet-control-layers-base label { padding-left: 4px;}
.leaflet-control-layers-group-name { font-weight:bold; display:block; margin-bottom: 2px;}
.leaflet-control-layers-group { margin-bottom: 0.4em;}
.leaflet-control-layers-separator { margin: 5px -7px 5px -7px; }

/*leaflet div icon styles - used on map in lieu of circle markers */
.circle-div { opacity: $circleopacity; border:1px solid rgba(100,100,100,0.5); border-radius:50%; }
/* class names */
.status1 {background: $status1;}
.status2 {background: $status2;}
.status3 {background: $status3;}
.status4 {background: $status4;}
.status5 {background: $status5;}
.status6 {background: $status6;}
.status7 {background: $status7;}
.status8 {background: $status8;}
.status9 {background: $status9;}

/* map tooltip style */
.fossil-tooltip { background: #111; color: #fff; border:none; padding:0; margin: 0; font-weight:bold; padding: .25em 0.8em; height: auto; display:block !important; font-size:14px; height: 24px; line-height:14px; }
.leaflet-tooltip-left::before,
.leaflet-tooltip-left::after, 
.leaflet-tooltip-right::before, 
.leaflet-tooltip-right::after { 
  border-left-color: transparent; border-right-color: transparent;
}

/* custom leaflet control for back button */
.btn-back { background: #0f4e8c; }
.btn-back a { color: #fff; font-weight:bold; text-decoration:none !important; }

/* SEARCH */
span.glyphicon-search {
  position: static;
  z-index: 2;
  color: #777;
  cursor:pointer;
  &:hover {
    color: #333;
  }
}

div#search-icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  /* float: right; */
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 33px;
}

div.searchwrapper {
  position: absolute;
  z-index:9999;
  right: 10px;
  label {
    font-weight: 500;
  }
}

/* only shows after something types into search input */
div.searchwrapper a.clear-search {
  font-size:11px;
  position:absolute;
  top:11px;
  right:35px;
  display:none;
  cursor:pointer;
}

div#search-icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  /* float: right; */
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 33px;
}

form#search select {
  border-radius: 0;
  height: 34px;
  border-color: #ccc;
  margin-right: 3px;
}

form#search input { 
  border-top-left-radius: 3px; 
  border-top-right-radius: 3px; 
  border-bottom-left-radius:3px; 
  border-bottom-right-radius: 3px; 
  width: calc(100vw - 20px);
  max-width: 300px;

  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;

  position: relative;
  top: -1px;
}

// form#search input#autocomplete {
//   position: absolute;
//   top: 0px; right: 0px;
//   // opacity: 0;
//   color: #999;
//   border: 0;
// }

form#search input.collapsed { 
  width: 33px;
}

form#search input:not(.collapsed) { 
  padding-top: 10px;
  padding-bottom: 10px;
}

form.search-form input:focus {
  border: 1px solid #333;
}

div#suggestions {
  display: none;
  position: absolute;
  top: 45px;
  right: 10px;
  background: #fff;
  width: 300px;
  height: auto;
  max-height: 400px;
  padding: 5px;
  overflow-y: scroll;
  z-index: 10000;
  div.suggestion {
    cursor: pointer;
    padding: 2px 10px;
    margin-left: -5px;
    margin-right: -5px;
    &:hover {
      background: #f3f0f0;
    }
  }
  mark {
    color: #111;
    font-weight: 500;
    background-color: inherit;
    background: inherit;
    padding: 0;
  }
}

// pleasewait spinner
#pleasewait { 
  position:absolute; 
  background-color: rgba(255,255,255,0.8);
  z-index:1000000; 
  width: 100%;
  height: 100vh;
  img {
    position: fixed;
    margin-left: -30px;
    margin-top: -30px;
    top:50%; left:50%; 
  }

}

/* Datatables overrides and table styles */
div#table h3 {margin-top: 10px;}
.dataTables_filter { display: none !important; }
td.highlight { font-weight: bold; color: #111; background-color: #fcede8 !important; font-size: 105%; }
.cell-right { text-align: right; }
/* this should be easily configurable in datatables, except that it's not */
.totals.dataTable thead > tr > th { text-align: right !important; padding-right: 8px !important;}
div.dataTables_info {float:right; margin-right:10px;}
div.dataTables_paginate {text-align: center; float:none; margin-top: 10px;}

/* Bootstrap overrides */
div.modal { z-index: 10000; }
.modal-lg { width: 98%; margin: 5% auto; }
.btn-justify-80 { min-width: 150px; max-width: 150px; }
.panel { border-radius: 0; }
#btn-main-menu { color:#fff; background:#e84c22; font-weight:bold; }
#btn-main-menu:focus { outline: none; }
/* override bootstrap input style */
input.form-control:focus, select.form-control:focus { 
  border: solid 1px #ccc; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); transition: none; -moz-transition: none; -webkit-transition: none; 
}
/* override bootstrap table td padding */
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
  padding: 4px;
}
/*force smaller font size on table*/
div#table table.table {
  font-size:12px;
}

/*Prunecluster (a leaflet clustering library) styles*/
.prunecluster { font-size: 12px; border-radius: 20px; transition: all 0.3s linear; }
.leaflet-marker-icon:not(.no-anim),
.leaflet-marker-shadow:not(.no-anim),
.leaflet-markercluster-icon:not(.no-anim) {
    transition: all 0.3s linear;
}
/* Prunecluster animations */
.leaflet-zoom-anim .leaflet-zoom-animated.leaflet-marker-icon:not(.no-anim),
.leaflet-zoom-anim .leaflet-zoom-animated.leaflet-marker-shadow:not(.no-anim),
.leaflet-zoom-anim .leaflet-zoom-animated.leaflet-markercluster-icon:not(.no-anim) {
    transition: transform 0.25s cubic-bezier(0,0,0.25,1);
}
/* additional prunecluster styles */
.prunecluster div { width: 30px; height: 30px; text-align: center; margin-left: 5px; margin-top: 5px; border-radius: 50%;}
.prunecluster div span { line-height: 30px; }
.prunecluster-small { background-color: #b5e28c; background-color: rgba(181, 226, 140, 0.6); }
.prunecluster-small div { width: 28px; height: 28px; background-color: #6ecc39; background-color: rgba(110, 204, 57, 0.6); }
.prunecluster-small div span { line-height: 28px; }
.prunecluster-medium { background-color: #f1d357; background-color: rgba(241, 211, 87, 0.6);}
.prunecluster-medium div { background-color: #f0c20c; background-color: rgba(240, 194, 12, 0.6);}
.prunecluster-large { background-color: #fd9c73; background-color: rgba(253, 156, 115, 0.6);}
.prunecluster-large div { width: 34px; height: 34px; background-color: #f18017; background-color: rgba(241, 128, 23, 0.6);}
.prunecluster-large div span { line-height: 34px; }


// wiki page links on modal
a[data-name="wiki_page"] {
  font-weight: bold;
}

/* Media Queries */
/* styles specific to larger screens: only apply above stated pixel width (greater or equal to); */
@media (min-width:768px) {
  /*extra large button; extends .btn */
  // .btn-xlarge {margin: 0 12px; padding: 18px 28px;font-size: 22px; line-height: normal; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
  .modal-lg { width: 50%; margin: 10% auto; }
}

/* styles specific to smaller screens: applies below this width (less or equal to); */
@media screen and (max-width: 835px) {
  form#search input {width: 320px;}
}

@media screen and (max-width: 810px) {
  form#search label {display:none}
}

@media screen and (max-width: 767px) {
  .btn-justify-80 { font-size: 90%; min-width: 83px; max-width: 83px;}
  div.layer-control { max-height:350px; }
  div#home-button-wrapper a:hover {background: #fff;}

  div.table-container { font-size:85%; }
  form#search input:not(.collapsed) { 
    height: 42px;
  }

}

@media screen and (max-width: 430px) {
  /* because attribution takes up two lines on small screens, have to bump up the bottom on the layer control */
  div.layer-control {bottom: 37px;}
}

@media screen and (max-width: 400px) {
  div.table-container table.table { font-size:11px; }
  div#layers-icon { bottom: 40px };
  div.tab-wrapper label.tab {padding: 10px 12px;}
  div#home-button-wrapper {float:right; display:inline; margin-top:4px;}
  div#home-button-wrapper a {padding:0; font-size:85%;}
}

@media screen and (max-width: 374px) {
  div.tab-wrapper label.tab {padding: 10px 10px;}
}
@media screen and (max-width: 325px) {
  div#home-button-wrapper {margin:0;display:inline;}
}

/* on moderately short screens, shrink the layer control height */
@media screen and (max-height: 700px) {
  div.layer-control { max-height:480px; }
}

/* on short screens, shrink the layer control some more */
@media screen and (max-height: 550px) {
  div.layer-control { max-height:380px; }
}

/* on very short screens, we have to shrink the layer control even more */
@media screen and (max-height: 375px) {
  div.layer-control { max-height:280px; }
}