// // Load core variables and mixins // -------------------------------------------------- @import "bootstrap/variables"; @import "bootstrap/mixins"; // // Buttons // -------------------------------------------------- // Common styles .btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger { text-shadow: 0 -1px 0 rgba(0,0,0,.2); $shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075); @include box-shadow($shadow); // Reset the shadow &:active, &.active { @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); } } // Mixin for generating new styles @mixin btn-styles($btn-color: #555) { @include gradient-vertical($start-color: $btn-color, $end-color: darken($btn-color, 10%)); border-color: darken($btn-color, 12%); &:active, &.active { background-color: darken($btn-color, 10%); border-color: darken($btn-color, 12%); } } // Common styles .btn { // Remove the gradient for the pressed/active state &:active, &.active { background-image: none; } } // Apply the mixin to the buttons .btn-default { @include btn-styles($btn-default-bg); text-shadow: 0 1px 0 #fff; border-color: #ccc; } .btn-primary { @include btn-styles($btn-primary-bg); } .btn-success { @include btn-styles($btn-success-bg); } .btn-warning { @include btn-styles($btn-warning-bg); } .btn-danger { @include btn-styles($btn-danger-bg); } .btn-info { @include btn-styles($btn-info-bg); } // // Images // -------------------------------------------------- .thumbnail, .img-thumbnail { @include box-shadow(0 1px 2px rgba(0,0,0,.075)); } // // Dropdowns // -------------------------------------------------- .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { @include gradient-vertical($start-color: $dropdown-link-hover-bg, $end-color: darken($dropdown-link-hover-bg, 5%)); background-color: darken($dropdown-link-hover-bg, 5%); } // // Navbar // -------------------------------------------------- // Basic navbar .navbar { @include gradient-vertical($start-color: lighten($navbar-default-bg, 10%), $end-color: $navbar-default-bg); border-radius: $navbar-border-radius; $shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075); @include box-shadow($shadow); .navbar-nav > .active > a { background-color: $navbar-default-bg; } } .navbar-brand, .navbar-nav > li > a { text-shadow: 0 1px 0 rgba(255,255,255,.25); } // Inverted navbar .navbar-inverse { @include gradient-vertical($start-color: lighten($navbar-inverse-bg, 10%), $end-color: $navbar-inverse-bg); .navbar-nav > .active > a { background-color: $navbar-inverse-bg; } .navbar-brand, .navbar-nav > li > a { text-shadow: 0 -1px 0 rgba(0,0,0,.25); } } // Undo rounded corners in static and fixed navbars .navbar-static-top, .navbar-fixed-top, .navbar-fixed-bottom { border-radius: 0; } // // Alerts // -------------------------------------------------- // Common styles .alert { text-shadow: 0 1px 0 rgba(255,255,255,.2); $shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05); @include box-shadow($shadow); } // Mixin for generating new styles @mixin alert-styles($color) { @include gradient-vertical($start-color: $color, $end-color: darken($color, 7.5%)); border-color: darken($color, 15%); } // Apply the mixin to the alerts .alert-success { @include alert-styles($alert-success-bg); } .alert-info { @include alert-styles($alert-info-bg); } .alert-warning { @include alert-styles($alert-warning-bg); } .alert-danger { @include alert-styles($alert-danger-bg); } // // Progress bars // -------------------------------------------------- // Give the progress background some depth .progress { @include gradient-vertical($start-color: darken($progress-bg, 4%), $end-color: $progress-bg) } // Mixin for generating new styles @mixin progress-bar-styles($color) { @include gradient-vertical($start-color: $color, $end-color: darken($color, 10%)); } // Apply the mixin to the progress bars .progress-bar { @include progress-bar-styles($progress-bar-bg); } .progress-bar-success { @include progress-bar-styles($progress-bar-success-bg); } .progress-bar-info { @include progress-bar-styles($progress-bar-info-bg); } .progress-bar-warning { @include progress-bar-styles($progress-bar-warning-bg); } .progress-bar-danger { @include progress-bar-styles($progress-bar-danger-bg); } // // List groups // -------------------------------------------------- .list-group { border-radius: $border-radius-base; @include box-shadow(0 1px 2px rgba(0,0,0,.075)); } .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus { text-shadow: 0 -1px 0 darken($list-group-active-bg, 10%); @include gradient-vertical($start-color: $list-group-active-bg, $end-color: darken($list-group-active-bg, 7.5%)); border-color: darken($list-group-active-border, 7.5%); } // // Panels // -------------------------------------------------- // Common styles .panel { @include box-shadow(0 1px 2px rgba(0,0,0,.05)); } // Mixin for generating new styles @mixin panel-heading-styles($color) { @include gradient-vertical($start-color: $color, $end-color: darken($color, 5%)); } // Apply the mixin to the panel headings only .panel-default > .panel-heading { @include panel-heading-styles($panel-default-heading-bg); } .panel-primary > .panel-heading { @include panel-heading-styles($panel-primary-heading-bg); } .panel-success > .panel-heading { @include panel-heading-styles($panel-success-heading-bg); } .panel-info > .panel-heading { @include panel-heading-styles($panel-info-heading-bg); } .panel-warning > .panel-heading { @include panel-heading-styles($panel-warning-heading-bg); } .panel-danger > .panel-heading { @include panel-heading-styles($panel-danger-heading-bg); } // // Wells // -------------------------------------------------- .well { @include gradient-vertical($start-color: darken($well-bg, 5%), $end-color: $well-bg); border-color: darken($well-bg, 10%); $shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1); @include box-shadow($shadow); }