_theme.scss (8849B)
1 /*! 2 * Bootstrap v3.3.7 (http://getbootstrap.com) 3 * Copyright 2011-2016 Twitter, Inc. 4 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 5 */ 6 7 // 8 // Load core variables and mixins 9 // -------------------------------------------------- 10 11 @import "variables"; 12 @import "mixins"; 13 14 15 // 16 // Buttons 17 // -------------------------------------------------- 18 19 // Common styles 20 .btn-default, 21 .btn-primary, 22 .btn-success, 23 .btn-info, 24 .btn-warning, 25 .btn-danger { 26 text-shadow: 0 -1px 0 rgba(0,0,0,.2); 27 $shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075); 28 @include box-shadow($shadow); 29 30 // Reset the shadow 31 &:active, 32 &.active { 33 @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); 34 } 35 36 &.disabled, 37 &[disabled], 38 fieldset[disabled] & { 39 @include box-shadow(none); 40 } 41 42 .badge { 43 text-shadow: none; 44 } 45 } 46 47 // Mixin for generating new styles 48 @mixin btn-styles($btn-color: #555) { 49 @include gradient-vertical($start-color: $btn-color, $end-color: darken($btn-color, 12%)); 50 @include reset-filter; // Disable gradients for IE9 because filter bleeds through rounded corners; see https://github.com/twbs/bootstrap/issues/10620 51 background-repeat: repeat-x; 52 border-color: darken($btn-color, 14%); 53 54 &:hover, 55 &:focus { 56 background-color: darken($btn-color, 12%); 57 background-position: 0 -15px; 58 } 59 60 &:active, 61 &.active { 62 background-color: darken($btn-color, 12%); 63 border-color: darken($btn-color, 14%); 64 } 65 66 &.disabled, 67 &[disabled], 68 fieldset[disabled] & { 69 &, 70 &:hover, 71 &:focus, 72 &.focus, 73 &:active, 74 &.active { 75 background-color: darken($btn-color, 12%); 76 background-image: none; 77 } 78 } 79 } 80 81 // Common styles 82 .btn { 83 // Remove the gradient for the pressed/active state 84 &:active, 85 &.active { 86 background-image: none; 87 } 88 } 89 90 // Apply the mixin to the buttons 91 .btn-default { @include btn-styles($btn-default-bg); text-shadow: 0 1px 0 #fff; border-color: #ccc; } 92 .btn-primary { @include btn-styles($btn-primary-bg); } 93 .btn-success { @include btn-styles($btn-success-bg); } 94 .btn-info { @include btn-styles($btn-info-bg); } 95 .btn-warning { @include btn-styles($btn-warning-bg); } 96 .btn-danger { @include btn-styles($btn-danger-bg); } 97 98 99 // 100 // Images 101 // -------------------------------------------------- 102 103 .thumbnail, 104 .img-thumbnail { 105 @include box-shadow(0 1px 2px rgba(0,0,0,.075)); 106 } 107 108 109 // 110 // Dropdowns 111 // -------------------------------------------------- 112 113 .dropdown-menu > li > a:hover, 114 .dropdown-menu > li > a:focus { 115 @include gradient-vertical($start-color: $dropdown-link-hover-bg, $end-color: darken($dropdown-link-hover-bg, 5%)); 116 background-color: darken($dropdown-link-hover-bg, 5%); 117 } 118 .dropdown-menu > .active > a, 119 .dropdown-menu > .active > a:hover, 120 .dropdown-menu > .active > a:focus { 121 @include gradient-vertical($start-color: $dropdown-link-active-bg, $end-color: darken($dropdown-link-active-bg, 5%)); 122 background-color: darken($dropdown-link-active-bg, 5%); 123 } 124 125 126 // 127 // Navbar 128 // -------------------------------------------------- 129 130 // Default navbar 131 .navbar-default { 132 @include gradient-vertical($start-color: lighten($navbar-default-bg, 10%), $end-color: $navbar-default-bg); 133 @include reset-filter; // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered 134 border-radius: $navbar-border-radius; 135 $shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075); 136 @include box-shadow($shadow); 137 138 .navbar-nav > .open > a, 139 .navbar-nav > .active > a { 140 @include gradient-vertical($start-color: darken($navbar-default-link-active-bg, 5%), $end-color: darken($navbar-default-link-active-bg, 2%)); 141 @include box-shadow(inset 0 3px 9px rgba(0,0,0,.075)); 142 } 143 } 144 .navbar-brand, 145 .navbar-nav > li > a { 146 text-shadow: 0 1px 0 rgba(255,255,255,.25); 147 } 148 149 // Inverted navbar 150 .navbar-inverse { 151 @include gradient-vertical($start-color: lighten($navbar-inverse-bg, 10%), $end-color: $navbar-inverse-bg); 152 @include reset-filter; // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered; see https://github.com/twbs/bootstrap/issues/10257 153 border-radius: $navbar-border-radius; 154 .navbar-nav > .open > a, 155 .navbar-nav > .active > a { 156 @include gradient-vertical($start-color: $navbar-inverse-link-active-bg, $end-color: lighten($navbar-inverse-link-active-bg, 2.5%)); 157 @include box-shadow(inset 0 3px 9px rgba(0,0,0,.25)); 158 } 159 160 .navbar-brand, 161 .navbar-nav > li > a { 162 text-shadow: 0 -1px 0 rgba(0,0,0,.25); 163 } 164 } 165 166 // Undo rounded corners in static and fixed navbars 167 .navbar-static-top, 168 .navbar-fixed-top, 169 .navbar-fixed-bottom { 170 border-radius: 0; 171 } 172 173 // Fix active state of dropdown items in collapsed mode 174 @media (max-width: $grid-float-breakpoint-max) { 175 .navbar .navbar-nav .open .dropdown-menu > .active > a { 176 &, 177 &:hover, 178 &:focus { 179 color: #fff; 180 @include gradient-vertical($start-color: $dropdown-link-active-bg, $end-color: darken($dropdown-link-active-bg, 5%)); 181 } 182 } 183 } 184 185 186 // 187 // Alerts 188 // -------------------------------------------------- 189 190 // Common styles 191 .alert { 192 text-shadow: 0 1px 0 rgba(255,255,255,.2); 193 $shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05); 194 @include box-shadow($shadow); 195 } 196 197 // Mixin for generating new styles 198 @mixin alert-styles($color) { 199 @include gradient-vertical($start-color: $color, $end-color: darken($color, 7.5%)); 200 border-color: darken($color, 15%); 201 } 202 203 // Apply the mixin to the alerts 204 .alert-success { @include alert-styles($alert-success-bg); } 205 .alert-info { @include alert-styles($alert-info-bg); } 206 .alert-warning { @include alert-styles($alert-warning-bg); } 207 .alert-danger { @include alert-styles($alert-danger-bg); } 208 209 210 // 211 // Progress bars 212 // -------------------------------------------------- 213 214 // Give the progress background some depth 215 .progress { 216 @include gradient-vertical($start-color: darken($progress-bg, 4%), $end-color: $progress-bg) 217 } 218 219 // Mixin for generating new styles 220 @mixin progress-bar-styles($color) { 221 @include gradient-vertical($start-color: $color, $end-color: darken($color, 10%)); 222 } 223 224 // Apply the mixin to the progress bars 225 .progress-bar { @include progress-bar-styles($progress-bar-bg); } 226 .progress-bar-success { @include progress-bar-styles($progress-bar-success-bg); } 227 .progress-bar-info { @include progress-bar-styles($progress-bar-info-bg); } 228 .progress-bar-warning { @include progress-bar-styles($progress-bar-warning-bg); } 229 .progress-bar-danger { @include progress-bar-styles($progress-bar-danger-bg); } 230 231 // Reset the striped class because our mixins don't do multiple gradients and 232 // the above custom styles override the new `.progress-bar-striped` in v3.2.0. 233 .progress-bar-striped { 234 @include gradient-striped; 235 } 236 237 238 // 239 // List groups 240 // -------------------------------------------------- 241 242 .list-group { 243 border-radius: $border-radius-base; 244 @include box-shadow(0 1px 2px rgba(0,0,0,.075)); 245 } 246 .list-group-item.active, 247 .list-group-item.active:hover, 248 .list-group-item.active:focus { 249 text-shadow: 0 -1px 0 darken($list-group-active-bg, 10%); 250 @include gradient-vertical($start-color: $list-group-active-bg, $end-color: darken($list-group-active-bg, 7.5%)); 251 border-color: darken($list-group-active-border, 7.5%); 252 253 .badge { 254 text-shadow: none; 255 } 256 } 257 258 259 // 260 // Panels 261 // -------------------------------------------------- 262 263 // Common styles 264 .panel { 265 @include box-shadow(0 1px 2px rgba(0,0,0,.05)); 266 } 267 268 // Mixin for generating new styles 269 @mixin panel-heading-styles($color) { 270 @include gradient-vertical($start-color: $color, $end-color: darken($color, 5%)); 271 } 272 273 // Apply the mixin to the panel headings only 274 .panel-default > .panel-heading { @include panel-heading-styles($panel-default-heading-bg); } 275 .panel-primary > .panel-heading { @include panel-heading-styles($panel-primary-heading-bg); } 276 .panel-success > .panel-heading { @include panel-heading-styles($panel-success-heading-bg); } 277 .panel-info > .panel-heading { @include panel-heading-styles($panel-info-heading-bg); } 278 .panel-warning > .panel-heading { @include panel-heading-styles($panel-warning-heading-bg); } 279 .panel-danger > .panel-heading { @include panel-heading-styles($panel-danger-heading-bg); } 280 281 282 // 283 // Wells 284 // -------------------------------------------------- 285 286 .well { 287 @include gradient-vertical($start-color: darken($well-bg, 5%), $end-color: $well-bg); 288 border-color: darken($well-bg, 10%); 289 $shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1); 290 @include box-shadow($shadow); 291 }