_theme.scss 8.4 KB

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