@brennaveen/bootstrap/less/theme.less

Custom fork of the bootstrap framework for theming.

/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

//
// Load core variables and mixins
// --------------------------------------------------

@import "variables.less";
@import "mixins.less";

body{
    -webkit-font-smoothing: antialiased;
}

strong{
    font-weight: 600;
}

//
// Buttons
// --------------------------------------------------

// Common styles

.btn{
    padding: 9px 15px;
    letter-spacing: .5px;
    // font-weight: 600;
}

.btn-xs, .btn-group-xs > .btn{
    padding: 1px 5px;
}

.btn-sm, .btn-group-sm > .btn {
    padding: 5px 10px;
}

.btn-lg, .btn-group-lg > .btn {
    padding: 10px 16px;
}

.btn-default,
.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger {
//   .box-shadow(1px 1px 4px rgba(0, 0, 0, 0.4));

  // Reset the shadow
  &:active,
  &.active {
    // .box-shadow(1px 1px 4px rgba(0, 0, 0, 0.4));
  }

  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    .box-shadow(none);
  }
}

.btn-link:hover, .btn-link:focus {
    color: @brand-info;
}

.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
    outline: 1px auto @brand-info;
}

// Btn Rounded

.btn-rounded{
    border-radius: 30px;
}

// Btn Circle

.btn-circle{
    border-radius: 50%;
    font-size: 15px;
    height: 54px;
    line-height: 54px;
    overflow: hidden;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    width: 54px;
}

//
// Headers
// --------------------------------------------------

h6, .h6{
    font-weight: 600;
    text-transform: uppercase;
}

//
// Images
// --------------------------------------------------

.thumbnail,
.img-thumbnail {
//   .box-shadow(0 1px 2px rgba(0,0,0,.075));
}


//
// Dropdowns
// --------------------------------------------------

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: @gray-lightest;
}

//
// Navbar
// --------------------------------------------------

.navbar{
    // .box-shadow(1px 1px 4px rgba(0, 0, 0, 0.4));
}

.navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
    line-height: @navbar-height;
    font-size: 20px;
}

// Default navbar
.navbar-default {
  border-radius: @navbar-border-radius;
  @shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
}

// Inverted navbar
.navbar-inverse {
  border-radius: @navbar-border-radius;
  .navbar-nav > .open > a,
  .navbar-nav > .active > a {
    .box-shadow(none);
  }
}

// Undo rounded corners in static and fixed navbars
.navbar-static-top,
.navbar-fixed-top,
.navbar-fixed-bottom {
  border-radius: 0;
}

// Fix active state of dropdown items in collapsed mode
@media (max-width: @grid-float-breakpoint-max) {
  .navbar .navbar-nav .open .dropdown-menu > .active > a {
    &,
    &:hover,
    &:focus {
      color: #fff;
    }
  }
}

.navbar-brand > img{
    display: inline-block;
}

//
// Alerts
// --------------------------------------------------

// Common styles
.alert {
//   @shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);
//   .box-shadow(@shadow);
}

.alert-info .alert-link {
    color: #fff;
    text-decoration: underline;
}

.alert-success .alert-link {
    color: #fff;
    text-decoration: underline;
}

.alert-warning .alert-link {
    color: #fff;
    text-decoration: underline;
}

.alert-danger .alert-link {
    color: #fff;
    text-decoration: underline;
}

//
// Forms
// --------------------------------------------------

.form-control{
    .box-shadow(none);
}

.form-control:focus {
    border-color: @brand-info;
    outline: 0;
    .box-shadow(none);
}

.has-success .form-control:focus{
    .box-shadow(none);
}

.has-warning .form-control:focus{
    .box-shadow(none);
}

.has-error .form-control:focus{
    .box-shadow(none);
}

.help-block{
    font-size: 12px;
}

//
// Progress bars
// --------------------------------------------------


// Mixin for generating new styles
.progress-bar-styles(@color) {
}

// Apply the mixin to the progress bars
.progress-bar            { .progress-bar-styles(@progress-bar-bg); }
.progress-bar-success    { .progress-bar-styles(@progress-bar-success-bg); }
.progress-bar-info       { .progress-bar-styles(@progress-bar-info-bg); }
.progress-bar-warning    { .progress-bar-styles(@progress-bar-warning-bg); }
.progress-bar-danger     { .progress-bar-styles(@progress-bar-danger-bg); }

//
// List groups
// --------------------------------------------------

.list-group {
  border-radius: @border-radius-base;
//   .box-shadow(0 1px 2px rgba(0,0,0,.075));
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  border-color: darken(@list-group-active-border, 7.5%);
}


//
// Panels
// --------------------------------------------------

// Common styles
.panel {
//   .box-shadow(0 1px 2px rgba(0,0,0,.05));
  border: 1px solid @border-color;
}

// Mixin for generating new styles
.panel-heading-styles(@color) {
}

// Apply the mixin to the panel headings only
.panel-default > .panel-heading   { .panel-heading-styles(@panel-default-heading-bg); }
.panel-primary > .panel-heading   { .panel-heading-styles(@panel-primary-heading-bg); }
.panel-success > .panel-heading   { .panel-heading-styles(@panel-success-heading-bg); }
.panel-info > .panel-heading      { .panel-heading-styles(@panel-info-heading-bg); }
.panel-warning > .panel-heading   { .panel-heading-styles(@panel-warning-heading-bg); }
.panel-danger > .panel-heading    { .panel-heading-styles(@panel-danger-heading-bg); }

.panel-title {
    font-size: 20px;
}

.panel-heading, .panel-footer{
    padding: 15px;
}

//
// Wells
// --------------------------------------------------

.well {
  .box-shadow(none);
}

//
// Tables
// --------------------------------------------------

.table th{
    font-weight: 600;
}

.table > thead > tr > th {
    // background-color: @gray-lighter;
    border-left-color: #fff;
    border-right-color: #fff;
    border-bottom-width: 1px;
}

//
// Forms
// --------------------------------------------------

.control-label{
    font-size: 12px;
    font-weight: 600;
}

//
// Labels
// --------------------------------------------------

.label {
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    padding: .2em 1em .3em;
}

//
// Jumbotron
// --------------------------------------------------

.jumbotron{
    border: 1px solid @border-color;
}

//
// Pager
// --------------------------------------------------

.pager li > a, .pager li > span {
    padding: 5px 15px;
}

//
// Popover
// --------------------------------------------------

.popover{
    // .box-shadow(0 1px 2px rgba(0,0,0,.3));
}

//
// Dropdowns
// --------------------------------------------------

.dropdown-menu{
    border: 1px solid @border-color-dark;
    .box-shadow(none);
}

//
// Navs
// --------------------------------------------------
.nav > li > a{
    font-size: 15px;
    letter-spacing: .5px;
}

.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
    background-color: @nav-link-hover-bg;
    border-color: @nav-tabs-link-hover-border-color;
}

.nav-pills > li.active > a{
    .box-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}


.nav-tabs {
  > li > a,
  > li > a:focus {
    margin-right: 0;
    background-color: transparent;
    border: none;
    color: @navbar-default-link-color;
    .box-shadow(inset 0 -1px 0 #ddd);
    .transition(all 0.2s);

    &:hover {
      background-color: transparent;
      .box-shadow(inset 0 -2px 0 @brand-primary);
      color: @brand-primary;
    }
  }

  & > li.active > a,
  & > li.active > a:focus {
    border: none;
    .box-shadow(inset 0 -2px 0 @brand-primary);
    color: @brand-primary;

    &:hover {
      border: none;
      color: @brand-primary;
    }
  }

  & > li.disabled > a {
    .box-shadow(inset 0 -1px 0 #ddd);
  }

  &.nav-justified {

    & > li > a,
    & > li > a:hover,
    & > li > a:focus,
    & > .active > a,
    & > .active > a:hover,
    & > .active > a:focus {
      border: none;
    }
  }

  .dropdown-menu {
    margin-top: 0;
  }
}

.dropdown-menu {
  margin-top: 0;
  border: none;
//   .box-shadow(0 1px 4px rgba(0,0,0,.3));
}

//
// Links
// --------------------------------------------------

a:focus{
        outline: 1px auto @brand-info;
}

//
// Badge
// --------------------------------------------------

.badge{
    min-width: 30px;
}

//
// Breadcrumbs
// --------------------------------------------------

.breadcrumb{
    font-weight: 600;
}

.breadcrumb a{
    color: @gray-dark;
}

//
// Page Header
// --------------------------------------------------

.page-header{
    border: none;
    color: @gray-dark;
}

//
// Scrollbars
// --------------------------------------------------

::-webkit-scrollbar-track
{
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: @border-color;
}

::-webkit-scrollbar
{
	width: 8px;
	background-color: @border-color;
}

::-webkit-scrollbar-thumb
{
	// border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: @gray-light;
}

//
// Angular Toasty
// --------------------------------------------------

#toasty .toast .toast-text .toast-title{
    font-weight: 600;
}

#toasty .toast.toasty-theme-material{
    font-size: 14px;
}

#toasty .toast.toasty-theme-material .toast-text .toast-title{
    font-size: 14px;
    text-transform: none;
}

//
// Angular Loading Bar
// --------------------------------------------------

#loading-bar .bar {
  background: @brand-primary;
}

/* Fancy blur effect */
#loading-bar .peg {
  -moz-box-shadow: @brand-primary 1px 0 6px 1px;
  -ms-box-shadow: @brand-primary 1px 0 6px 1px;
  -webkit-box-shadow: @brand-primary 1px 0 6px 1px;
  box-shadow: @brand-primary 1px 0 6px 1px;
}

#loading-bar-spinner{
  top: 25%;
  left: 49%
}

#loading-bar-spinner .spinner-icon {
  width: 44px;
  height: 44px;
  border-top-color:  @brand-primary;
  border-left-color: @brand-primary;
}

//
// Angular Messages
// --------------------------------------------------

[ng-messages]{
    display: none;
}

.has-error [ng-messages]{
    display: block;
}

//
// Uib Datepicker
// --------------------------------------------------

.uib-daypicker{
  outline: 0;
}

.uib-datepicker .btn-default,
.uib-datepicker-popup .btn-default{
  background-color: #fff;
  box-shadow: none;
}

.uib-datepicker .btn-info,
.uib-datepicker-popup .btn-info{
 background-color: @brand-info;
}

.uib-datepicker .btn-default.disabled,
.uib-datepicker .btn-default[disabled],
.uib-datepicker .btn-default.disabled .text-muted,
.uib-datepicker .btn-default[disabled] .text-muted,
.uib-datepicker-popup .btn-default.disabled,
.uib-datepicker-popup .btn-default[disabled],
.uib-datepicker-popup .btn-default.disabled .text-muted,
.uib-datepicker-popup .btn-default[disabled] .text-muted{
  background-color: transparent;
  color: #ddd;
}

//
// Modals
// --------------------------------------------------

button.close{
    font-size: 35px;
}

button.close:focus{
    outline: @brand-info auto 5px;
}

.modal-header{
    border-bottom: none;
}

.modal-title{
    color: @brand-info;
}

.modal-body{
    background-color: @body-bg;
}

.modal-footer{
    border-top: none;
}

//
// Radios & Checkboxes
// --------------------------------------------------

.radio,
.radio-inline,
.checkbox,
.checkbox-inline {
  label {
    padding-left: 25px;
  }

  input[type="radio"],
  input[type="checkbox"] {
    margin-left: -25px;
  }
}

input[type="radio"],
.radio input[type="radio"],
.radio-inline input[type="radio"] {
  position: relative;
  margin-top: 6px;
  margin-right: 4px;
  vertical-align: top;
  border: none;
  background-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;

  &:focus {
    outline: none;
  }

  &:before,
  &:after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
  }

  &:before {
    position: absolute;
    left: 0;
    top: -6px;
    background-color: @brand-info;
    .scale(0);
  }

  &:after {
    position: relative;
    top: -6px;
    border: 1px solid @gray;
    margin-right: 5px;
  }

  &:checked:before {
    .scale(0.5);
  }

  &:checked:after {
    border-width: 5px;
  }

  &:disabled:checked:before {
    background-color: @gray-lighter;
  }

  &:checked:after {
    border-color: @brand-info;
  }

  &:disabled:after,
  &:disabled:checked:after {
    border-color: @gray-lighter;
  }
}

input[type="checkbox"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  position: relative;
  border: none;
  margin-bottom: -4px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;

  &:focus {
    outline: none;
  }

  &:focus:after {
    border-color: @brand-info;
  }

  &:after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    margin-top: -2px;
    margin-right: 10px;
    border: 1px solid @gray;
    border-radius: 2px;
    .transition(240ms);
  }

  &:checked:before {
    content: "";
    position: absolute;
    top: 0;
    left: 6px;
    display: table;
    width: 6px;
    height: 12px;
    border: 2px solid #fff;
    border-top-width: 0;
    border-left-width: 0;
    .rotate(45deg);
  }

  &:checked:after {
    background-color: @brand-info;
    border-color: @brand-info;
  }

  &:disabled:after {
    border-color: @gray-lighter;
  }

  &:disabled:checked:after {
    background-color: @gray-lighter;
    border-color: transparent;
  }
}

.has-warning {
  input:not([type=checkbox]),
  .form-control,
  input.form-control[readonly],
  input[type=text][readonly],
  [type=text].form-control[readonly],
  input:not([type=checkbox]):focus,
  .form-control:focus {
    border-bottom: none;
    .box-shadow(inset 0 -1px 0 @brand-warning);
  }
}

.has-error {
  input:not([type=checkbox]),
  .form-control,
  input.form-control[readonly],
  input[type=text][readonly],
  [type=text].form-control[readonly],
  input:not([type=checkbox]):focus,
  .form-control:focus {
    border-bottom: none;
    .box-shadow(inset 0 -1px 0 @brand-danger);
  }
}

.has-success {
  input:not([type=checkbox]),
  .form-control,
  input.form-control[readonly],
  input[type=text][readonly],
  [type=text].form-control[readonly],
  input:not([type=checkbox]):focus,
  .form-control:focus {
    border-bottom: none;
    .box-shadow(inset 0 -1px 0 @brand-success);
  }
}

@media all and (-ms-high-contrast:none) {
    .radio input[type="radio"],
    .radio-inline input[type="radio"],
    .checkbox input[type="checkbox"],
    .checkbox-inline input[type="checkbox"] {
        margin-bottom: -1px;
    } /* IE11 - checkbox drops below label otherwise */
}

@-moz-document url-prefix() {
    .radio input[type="radio"],
    .radio-inline input[type="radio"]{
        padding-top: 3px;
    } /* Firefox - checkbox to high for label otherwise */

    input[type="radio"]::before, .radio input[type="radio"]::before, .radio-inline input[type="radio"]::before {
        top: -4px;
    }
}

//
// MDI Icons
// --------------------------------------------------

.mdi::before {
    font-size: 18px;
    line-height: 14px;
    position: relative;
    top: 0px;
}
.btn .mdi::before {
    top: 1px;
}

.input-group-addon .mdi::before{
    top: 2px;
}

//
// Focus Outline
// --------------------------------------------------

:focus {
    outline: @brand-info auto 5px;
}