app/assets/stylesheets/framework_and_overrides.css
//***********************************************************
// BOOTSTRAP VARIABLES OVERRIDES
// Color system
$brand-primary: #428bca;
$brand-success: #5cb85c;
$brand-warning: #f0ad4e;
$brand-danger: #d9534f;
$brand-info: #5bc0de;
// Body scaffolding
$body-bg: #ffffff;
$text-color: #373737;
$link-color: $brand-primary;
$link-hover-color: darken($link-color, 15%);
// Typography
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700);
$font-family-sans-serif: 'Open Sans', arial, sans-serif;
$font-family-serif: Georgia, 'Times New Roman', Times, serif;
$font-family-monospace: 'Menlo','Monaco','Consolas','Courier New', monospace;
$font-family-base: $font-family-sans-serif;
$font-size-base: 14px;
// Headings
$headings-font-family: $font-family-base;
$headings-font-weight: 700;
$headings-color: inherit;
// Code blocks
$code-color: #c7254e;
$code-bg: #f9f2f4;
$pre-color: #373737;
$pre-bg: #f5f5f5;
$pre-border-color: #cccccc;
// Components: Padding
$padding-base-vertical: 6px;
$padding-large-vertical: 10px;
$padding-small-vertical: 5px;
$padding-base-horizontal: 12px;
$padding-large-horizontal: 16px;
$padding-small-horizontal: 10px;
// Components: Rounded corners
$border-radius-base: 4px;
$border-radius-large: 6px;
$border-radius-small: 3px;
// Components: Active state
$component-active-color: #ffffff;
$component-active-bg: $brand-primary;
// Components: Carets
$caret-width-base: 4px;
$caret-width-large: 5px;
// Buttons: Global
$btn-font-weight: normal;
$btn-link-disabled-color: #cccccc;
// Buttons: Default
$btn-default-color: #ffffff;
$btn-default-bg: #bbbbbb;
$btn-default-border: #cccccc;
// Buttons: Primary
$btn-primary-color: $btn-default-color;
$btn-primary-bg: $brand-primary;
$btn-primary-border: darken($btn-primary-bg, 5%);
// Buttons: Info
$btn-info-color: $btn-default-color;
$btn-info-bg: $brand-info;
$btn-info-border: darken($btn-info-bg, 5%);
// Buttons: Warning
$btn-warning-color: $btn-default-color;
$btn-warning-bg: $brand-warning;
$btn-warning-border: darken($btn-warning-bg, 5%);
// Buttons: Danger
$btn-danger-color: $btn-default-color;
$btn-danger-bg: $brand-danger;
$btn-danger-border: darken($btn-danger-bg, 5%);
// Form states and alerts
$state-success-text: #468847;
$state-success-bg: #dff0d8;
$state-success-border: darken($state-success-bg, 5%);
$state-warning-text: #c09853;
$state-warning-bg: #fcf8e3;
$state-warning-border: darken($state-warning-bg, 3%);
$state-danger-text: #b94a48;
$state-danger-bg: #f2dede;
$state-danger-border: darken($state-danger-bg, 3%);
$state-info-text: #3a87ad;
$state-info-bg: #d9edf7;
$state-info-border: darken($state-info-bg, 7%);
// Alerts: Base styles
$alert-padding: 15px;
$alert-border-radius: $border-radius-base;
$alert-link-font-weight: bold;
// Alerts: Warning
$alert-warning-text: $state-warning-text;
$alert-warning-bg: $state-warning-bg;
$alert-warning-border: $state-warning-border;
// Alerts: Success
$alert-success-text: $state-success-text;
$alert-success-bg: $state-success-bg;
$alert-success-border: $state-success-border;
// Alerts: Danger
$alert-danger-text: $state-danger-text;
$alert-danger-bg: $state-danger-bg;
$alert-danger-border: $state-danger-border;
//Alerts: Info
$alert-info-text: $state-info-text;
$alert-info-bg: $state-info-bg;
$alert-info-border: $state-info-border;
// Navbar: Base styles
$navbar-height: 50px;
$navbar-margin-bottom: 4px;
$navbar-padding-horizontal: 15px;
$navbar-padding-vertical: 13px;
$navbar-border-radius: 0px;
// Navbar: Default navbar
// -> Basics
$navbar-default-color: #777777;
$navbar-default-bg: #f8f8f8;
$navbar-default-border: darken($navbar-default-bg, 7%);
// -> Links
$navbar-default-link-color: #777777;
$navbar-default-link-hover-color: #333333;
$navbar-default-link-hover-bg: $navbar-default-bg;
$navbar-default-link-active-color: #555555;
$navbar-default-link-active-bg: darken($navbar-default-bg, 7%);
$navbar-default-link-disabled-color: #cccccc;
$navbar-default-link-disabled-bg:$navbar-default-bg;
// -> Brand
$navbar-default-brand-color: $navbar-default-link-color;
$navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%);
$navbar-default-brand-hover-bg: $navbar-default-bg;
// -> Toggle
$navbar-default-toggle-hover-bg: #dddddd;
$navbar-default-toggle-icon-bar-bg: #cccccc;
$navbar-default-toggle-border-color: #dddddd;
// Navbar: Inverted navbar
// -> Basics
$navbar-inverse-color: #eeeeee;
$navbar-inverse-bg: #222222;
$navbar-inverse-border: darken($navbar-inverse-bg, 7%);
// -> Links
$navbar-inverse-link-color: #eeeeee;
$navbar-inverse-link-hover-color: #ffffff;
$navbar-inverse-link-hover-bg: $navbar-inverse-bg;
$navbar-inverse-link-active-color: #ffffff;
$navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 7%);
$navbar-inverse-link-disabled-color: #444444;
$navbar-inverse-link-disabled-bg:$navbar-inverse-bg;
// -> Brand
$navbar-inverse-brand-color: $navbar-inverse-link-color;
$navbar-inverse-brand-hover-color: #ffffff;
$navbar-inverse-brand-hover-bg: $navbar-inverse-bg;
// -> Toggle
$navbar-inverse-toggle-hover-bg: #333333;
$navbar-inverse-toggle-icon-bar-bg: #ffffff;
$navbar-inverse-toggle-border-color: #333333;
// Nav: Default nav
// -> Common values
$nav-link-padding: 10px 15px;
$nav-link-hover-bg: #eeeeee;
$nav-disabled-link-color: #cccccc;
$nav-disabled-link-hover-color: #cccccc;
$nav-open-link-hover-color: #ffffff;
$nav-open-caret-border-color: #ffffff;
// -> Pills
$nav-pills-active-link-hover-color: #ffffff;
$nav-pills-active-link-hover-bg: $component-active-bg;
// -> Tabs
$nav-tabs-border-color: #dddddd;
$nav-tabs-link-hover-border-color: #eeeeee;
$nav-tabs-active-link-hover-color: #bbbbbb;
$nav-tabs-active-link-hover-bg: $body-bg;
$nav-tabs-active-link-hover-border-color: #dddddd;
$nav-tabs-justified-link-border-color: #dddddd;
$nav-tabs-justified-active-link-border-color: $body-bg;
// Tables
// -> Default padding for <th>s and <td>s
$table-cell-padding: 8px;
// -> Default padding cells in .table-condensed
$table-condensed-cell-padding: 5px;
// -> Default background color used for all tables.
$table-bg: $body-bg;
// -> Background color used for .table-striped.
$table-bg-accent: #f9f9f9;
// -> Background color used for .table-hover.
$table-bg-hover: #f5f5f5;
// -> Border color for table and cell borders.
$table-border-color: #dddddd;
// Forms
// -> Inputs
$input-color: $text-color; // Text color for <input>s
$input-bg: #ffffff; // <input> background color
$input-border: #cccccc; // <input> border color
$input-border-radius: $border-radius-base; // <input> border radius
$input-color-placeholder: #eeeeee; // Placeholder text color
// -> Input states
$input-border-focus: #66afe9; // Border color for inputs on focus
$input-bg-disabled: #dddddd; // <input disabled> background color
// -> Input sizes
$input-height-base: 38px; // Default .form-control height
$input-height-large: 46px; // Large .form-control height
$input-height-small: 28px; // Small .form-control height
// -> Legend
$legend-color: #aaaaaa;
$legend-border-color: #e5e5e5;
// -> Input groups
$input-group-addon-bg: #cccccc; // Background color for textual input addons
$input-group-addon-border-color: $input-border; // Border color for textual input addons
// Dropdowns
// -> Dropdown menu
$dropdown-bg: #ffffff; // Dropdown menu background color
$dropdown-border: #373737; // Dropdown menu border color
$dropdown-fallback-border: #cccccc; // Dropdown menu border color for IE8
$dropdown-caret-color: #dddddd; // Indicator arrow for showing an element has a dropdown
$dropdown-divider-bg: #e5e5e5; // Dropdown divider top border color
$dropdown-header-color: #dddddd; // Text color for headers within dropdown menus
// -> Dropdown items
$dropdown-link-color: $text-color; // Dropdown text color
$dropdown-link-hover-color: darken($dropdown-link-color,5%); // Hovered dropdown menu entry text color
$dropdown-link-hover-bg: #f5f5f5; // Hovered dropdown menu entry text color
$dropdown-link-active-color: $component-active-color; // Active dropdown menu entry text color
$dropdown-link-active-bg: $component-active-bg; // Active dropdown menu entry background color
$dropdown-link-disabled-color: #dddddd; // Disabled dropdown menu entry background color
// Panels and wells
// -> Common panel styles
$panel-bg: #ffffff;
$panel-inner-border: #dddddd; // Border color for elements within panels
$panel-border-radius: $border-radius-base;
$panel-footer-bg: #f5f5f5;
// -> Contextual panel colors
// --> Default
$panel-default-text: #373737;
$panel-default-border: #dddddd;
$panel-default-heading-bg: #f5f5f5;
// --> Primary
$panel-primary-text: #ffffff;
$panel-primary-border: $brand-primary;
$panel-primary-heading-bg: $brand-primary;
// --> Success
$panel-success-text: $state-success-text;
$panel-success-border: $state-success-border;
$panel-success-heading-bg: $state-success-bg;
// --> Info
$panel-info-text: $state-info-text;
$panel-info-border: $state-info-border;
$panel-info-heading-bg: $state-info-bg;
// --> Warning
$panel-warning-text: $state-warning-text;
$panel-warning-border: $state-warning-border;
$panel-warning-heading-bg: $state-warning-bg;
// --> Danger
$panel-danger-text: $state-danger-text;
$panel-danger-border: $state-danger-border;
$panel-danger-heading-bg: $state-danger-bg;
// -> Wells
$well-bg: #f5f5f5;
// Jumbotron
$jumbotron-padding: 30px;
$jumbotron-bg: #cccccc;
$jumbotron-font-size: ceil($font-size-base * 1.5);
$jumbotron-color: $text-color;
$jumbotron-heading-color: $headings-color;
// Carousel
$carousel-text-shadow: 0px 1px 2px #373737;
$carousel-control-color: #ffffff;
$carousel-caption-color: #ffffff;
$carousel-indicator-border-color: #ffffff;
$carousel-indicator-active-bg: #ffffff;
// Labels
$label-color: #ffffff; // Default label text color
$label-link-hover-color: #ffffff; // Default text color of a linked label
$label-default-bg: #cccccc; // Default label background color
$label-primary-bg: $brand-primary; // Primary label background color
$label-success-bg: $brand-success; // Success label background color
$label-info-bg: $brand-info; // Info label background color
$label-warning-bg: $brand-warning; // Warning label background color
$label-danger-bg: $brand-danger; // Danger label background color
// Close button
$close-font-weight: bold;
$close-color: #000000;
$close-text-shadow: 0px 1px 0px #ffffff;
// Type
$text-muted: #cccccc; // Text muted color
$abbr-border-color: #cccccc; // Abbreviations and acronyms border color
$headings-small-color: #cccccc; // Headings small color
$blockquote-small-color: #cccccc; // Blockquote small color
$blockquote-border-color: #eeeeee; // Blockquote border color
$page-header-border-color: #eeeeee; // Page header border color
// Other
$hr-border: #cccccc; // Horizontal line color
$component-offset-horizontal: 180px; // Horizontal offset for forms and lists
//***********************************************************
@import "bootstrap";
@import "font-awesome";
//***********************************************************
// TESTING CLASSES
.shigh{
background-color: yellow;
}
.shigh2{
background-color: red;
}
.shigh3{
background-color: blue;
}
//***********************************************************
//***********************************************************
// APPLICATION-WIDE
html,body{
height: 100%;
}
#wrap{
min-height: 100%;
padding-bottom: 120px;
}
img{
@extend .img-responsive;
}
//***********************************************************
//***********************************************************
// FLASH MESSAGES
.alert{
margin-top: -4px;
}
//***********************************************************
//***********************************************************
// NAVBAR
.navbar-brand {
font-size: inherit;
}
//***********************************************************
//***********************************************************
// ERRORS
#error_explanation{
color: $brand-danger;
ul{
margin-left: 8px;
padding-left: 8px;
}
h2{
display:none;
}
}
.error-text{
color: $brand-danger;
}
.field_with_errors{
.form-control{
border: 1px solid $brand-danger;
}
label{
color: $brand-danger;
}
}
//***********************************************************
//***********************************************************
// FOOTER
#footer{
background-color: $navbar-default-bg;
color: $navbar-default-color;
height: 100px;
margin-top: -100px;
letter-spacing: 1px;
.footer-first-row{
padding-top: 20px;
}
}
//***********************************************************
#map-container { height: 400px; border-radius: 16px 16px; border-color: #fff; border-style: solid; box-shadow: 2px 2px 10px #B1B1B1; border-width: 7px; }
#map-canvas {
height: 384px;
width: 100%;
}
/* Bootstrap Css Map Fix*/
#map-container #map-canvas img {
max-width: none;
}
/* Bootstrap Css Map Fix*/
#map-container #map-canvas label {
width: auto; display:inline;
}
#search_options {
margin: 18px 0;
}
#geocoding,
#reverse_geocoding {
background-color: #e6e6e6;
border-style: solid;
border-radius: 11px;
border-color: #e6e6e6;
color: #666;
padding: 0 8px;
text-decoration: none;
}
.btn-group .active {
background-color: green !important;
border-color: green !important;
color: #fff !important;
}
#geocoding_fields,
#reverse_geocoding_fields {
display: none;
z-index: 100;
margin-left: 74px;
margin-top: -52px;
position: absolute;
}
.search_box {
width: 250px;
height: 43px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.4;
color: #555555;
background-color: #ffffff;
border: 1px solid #e7e7e7;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.14);
}
.submit_button {
font-weight: lighter;
cursor: pointer;
width: 90px;
background-color: #F8BD00;
color: #fff;
border-radius: 3px;
text-transform: uppercase;
margin: 0 auto;
text-align: center;
font-size: 1.13 rem;
border: 0;
padding: 10px 0;
outline: 0;
letter-spacing: .05em;
&:hover {
background-color: #ffe804;
}
}
.control-ui{
background-color: white;
border-style: solid;
border-width: 2px;
cursor: pointer;
text-align: center;
width: 90px;
height: 30px;
}
.control-text{
front-family: Arial,sans-serif;
font-size: 12px;
padding: 4px 4px;
}
.fullscreen{
position: fixed !important;
height: 100% !important;
left: 0;
top: 0;
z-index: 100;
}