_bootswatch.scss 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417
  1. // Slate 3.3.4
  2. // Bootswatch
  3. // -----------------------------------------------------
  4. @mixin btn-shadow($color){
  5. @include gradient-vertical-three-colors(lighten($color, 6%), $color, 60%, darken($color, 4%));
  6. filter: none;
  7. }
  8. @mixin btn-shadow-inverse($color){
  9. @include gradient-vertical-three-colors(darken($color, 24%), darken($color, 18%), 40%, darken($color, 14%));
  10. filter: none;
  11. }
  12. // Navbar =====================================================================
  13. .navbar {
  14. @include btn-shadow($navbar-default-bg);
  15. border: 1px solid rgba(0, 0, 0, 0.6);
  16. text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  17. &-inverse {
  18. @include btn-shadow($navbar-inverse-bg);
  19. .badge {
  20. background-color: $navbar-inverse-link-active-bg;
  21. }
  22. }
  23. &-nav > li > a {
  24. border-right: 1px solid rgba(0, 0, 0, 0.2);
  25. border-left: 1px solid rgba(255, 255, 255, 0.1);
  26. &:hover {
  27. @include btn-shadow-inverse($navbar-default-bg);
  28. border-left-color: transparent;
  29. }
  30. }
  31. .nav .open > a {
  32. border-color: transparent;
  33. }
  34. &-nav > li.active > a {
  35. border-left-color: transparent;
  36. }
  37. &-form {
  38. margin-left: 5px;
  39. margin-right: 5px;
  40. }
  41. }
  42. // Buttons ====================================================================
  43. .btn,
  44. .btn:hover {
  45. border-color: rgba(0, 0, 0, 0.6);
  46. text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  47. }
  48. .btn-default {
  49. @include btn-shadow($btn-default-bg);
  50. &:hover {
  51. @include btn-shadow-inverse($btn-default-bg);
  52. }
  53. }
  54. .btn-primary {
  55. @include btn-shadow($btn-primary-bg);
  56. &:hover {
  57. @include btn-shadow-inverse($btn-primary-bg);
  58. }
  59. }
  60. .btn-success {
  61. @include btn-shadow($btn-success-bg);
  62. &:hover {
  63. @include btn-shadow-inverse($btn-success-bg);
  64. }
  65. }
  66. .btn-info {
  67. @include btn-shadow($btn-info-bg);
  68. &:hover {
  69. @include btn-shadow-inverse($btn-info-bg);
  70. }
  71. }
  72. .btn-warning {
  73. @include btn-shadow($btn-warning-bg);
  74. &:hover {
  75. @include btn-shadow-inverse($btn-warning-bg);
  76. }
  77. }
  78. .btn-danger {
  79. @include btn-shadow($btn-danger-bg);
  80. &:hover {
  81. @include btn-shadow-inverse($btn-danger-bg);
  82. }
  83. }
  84. .btn-link,
  85. .btn-link:hover {
  86. border-color: transparent;
  87. }
  88. // Typography =================================================================
  89. h1, h2, h3, h4, h5, h6 {
  90. text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
  91. }
  92. .text-primary,
  93. .text-primary:hover {
  94. color: $brand-primary;
  95. }
  96. .text-success,
  97. .text-success:hover {
  98. color: $brand-success;
  99. }
  100. .text-danger,
  101. .text-danger:hover {
  102. color: $brand-danger;
  103. }
  104. .text-warning,
  105. .text-warning:hover {
  106. color: $brand-warning;
  107. }
  108. .text-info,
  109. .text-info:hover {
  110. color: $brand-info;
  111. }
  112. // Tables =====================================================================
  113. .table {
  114. .success,
  115. .warning,
  116. .danger,
  117. .info {
  118. color: #fff;
  119. }
  120. &-bordered tbody {
  121. tr.success,
  122. tr.warning,
  123. tr.danger {
  124. td,
  125. &:hover td {
  126. border-color: $table-border-color;
  127. }
  128. }
  129. }
  130. }
  131. .table-responsive > .table {
  132. background-color: $table-bg;
  133. }
  134. // Forms ======================================================================
  135. input,
  136. textarea {
  137. color: $input-color;
  138. }
  139. .has-warning {
  140. .help-block,
  141. .control-label,
  142. .form-control-feedback {
  143. color: $brand-warning;
  144. }
  145. .form-control,
  146. .form-control:focus {
  147. border-color: $brand-warning;
  148. }
  149. .input-group-addon {
  150. background-color: $body-bg;
  151. border: none;
  152. }
  153. }
  154. .has-error {
  155. .help-block,
  156. .control-label,
  157. .form-control-feedback {
  158. color: $brand-danger;
  159. }
  160. .form-control,
  161. .form-control:focus {
  162. border-color: $brand-danger;
  163. }
  164. .input-group-addon {
  165. background-color: $body-bg;
  166. border: none;
  167. }
  168. }
  169. .has-success {
  170. .help-block,
  171. .control-label,
  172. .form-control-feedback {
  173. color: $brand-success;
  174. }
  175. .form-control,
  176. .form-control:focus {
  177. border-color: $brand-success;
  178. }
  179. .input-group-addon {
  180. background-color: $body-bg;
  181. border: none;
  182. }
  183. }
  184. legend {
  185. color: #fff;
  186. }
  187. .input-group-addon {
  188. border-color: rgba(0, 0, 0, 0.6);
  189. text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  190. @include btn-shadow($btn-default-bg);
  191. color: $btn-default-color;
  192. }
  193. // Navs =======================================================================
  194. .nav {
  195. .open > a,
  196. .open > a:hover,
  197. .open > a:focus {
  198. border-color: rgba(0, 0, 0, 0.6);
  199. }
  200. }
  201. .nav-pills {
  202. & > li > a {
  203. @include btn-shadow($btn-default-bg);
  204. border: 1px solid rgba(0, 0, 0, 0.6);
  205. text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  206. &:hover {
  207. @include btn-shadow-inverse($btn-default-bg);
  208. border: 1px solid rgba(0, 0, 0, 0.6);
  209. }
  210. }
  211. & > li.active > a,
  212. & > li.active > a:hover {
  213. background-color: none;
  214. @include btn-shadow-inverse($btn-default-bg);
  215. border: 1px solid rgba(0, 0, 0, 0.6);
  216. }
  217. & > li.disabled > a,
  218. & > li.disabled > a:hover {
  219. @include btn-shadow($btn-default-bg);
  220. }
  221. }
  222. .pagination {
  223. & > li > a,
  224. & > li > span {
  225. text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  226. @include btn-shadow($btn-default-bg);
  227. &:hover {
  228. @include btn-shadow-inverse($btn-default-bg);
  229. }
  230. }
  231. & > li.active > a,
  232. & > li.active > span {
  233. @include btn-shadow-inverse($btn-default-bg);
  234. }
  235. & > li.disabled > a,
  236. & > li.disabled > a:hover,
  237. & > li.disabled > span,
  238. & > li.disabled > span:hover {
  239. background-color: transparent;
  240. @include btn-shadow($btn-default-bg);
  241. }
  242. }
  243. .pager {
  244. & > li > a {
  245. @include btn-shadow($btn-default-bg);
  246. text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  247. &:hover {
  248. @include btn-shadow-inverse($btn-default-bg);
  249. }
  250. }
  251. & > li.disabled > a,
  252. & > li.disabled > a:hover {
  253. background-color: transparent;
  254. @include btn-shadow($btn-default-bg);
  255. }
  256. }
  257. .breadcrumb {
  258. border: 1px solid rgba(0, 0, 0, 0.6);
  259. text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  260. @include btn-shadow($btn-default-bg);
  261. }
  262. // Indicators =================================================================
  263. .alert {
  264. .alert-link,
  265. a {
  266. color: #fff;
  267. text-decoration: underline;
  268. }
  269. .close {
  270. color: $close-color;
  271. text-decoration: none;
  272. }
  273. }
  274. // Progress bars ==============================================================
  275. // Containers =================================================================
  276. a.thumbnail:hover,
  277. a.thumbnail:focus,
  278. a.thumbnail.active {
  279. border-color: $thumbnail-border;
  280. }
  281. a.list-group-item {
  282. &.active,
  283. &.active:hover,
  284. &.active:focus {
  285. border-color: $list-group-border;
  286. }
  287. &-success {
  288. &.active {
  289. background-color: $state-success-bg;
  290. }
  291. &.active:hover,
  292. &.active:focus {
  293. background-color: darken($state-success-bg, 5%);
  294. }
  295. }
  296. &-warning {
  297. &.active {
  298. background-color: $state-warning-bg;
  299. }
  300. &.active:hover,
  301. &.active:focus {
  302. background-color: darken($state-warning-bg, 5%);
  303. }
  304. }
  305. &-danger {
  306. &.active {
  307. background-color: $state-danger-bg;
  308. }
  309. &.active:hover,
  310. &.active:focus {
  311. background-color: darken($state-danger-bg, 5%);
  312. }
  313. }
  314. }
  315. .jumbotron {
  316. border: 1px solid rgba(0, 0, 0, 0.6);
  317. }
  318. .panel-primary,
  319. .panel-success,
  320. .panel-danger,
  321. .panel-warning,
  322. .panel-info {
  323. .panel-heading {
  324. border-color: #000;
  325. }
  326. }