_bootswatch.scss 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. // Spacelab 3.3.4
  2. // Bootswatch
  3. // -----------------------------------------------------
  4. @import url("//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700");
  5. @mixin btn-shadow($color){
  6. @include gradient-vertical-three-colors(lighten($color, 15%), $color, 50%, darken($color, 4%));
  7. filter: none;
  8. border: 1px solid darken($color, 10%);
  9. }
  10. // Navbar =====================================================================
  11. .navbar {
  12. @include btn-shadow($navbar-default-bg);
  13. text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  14. &-inverse {
  15. @include btn-shadow($navbar-inverse-bg);
  16. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  17. .badge {
  18. background-color: #fff;
  19. color: $navbar-inverse-bg;
  20. }
  21. }
  22. .badge {
  23. text-shadow: none;
  24. }
  25. &-nav > li > a,
  26. &-nav > li > a:hover {
  27. padding-top: ($navbar-padding-vertical + 2px);
  28. padding-bottom: ($navbar-padding-vertical - 2px);
  29. @include transition(color ease-in-out .2s);
  30. }
  31. &-brand,
  32. &-brand:hover {
  33. @include transition(color ease-in-out .2s);
  34. }
  35. .caret,
  36. .caret:hover {
  37. @include transition(border-color ease-in-out .2s);
  38. }
  39. .dropdown-menu {
  40. text-shadow: none;
  41. }
  42. }
  43. // Buttons ====================================================================
  44. .btn {
  45. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  46. &-default {
  47. @include btn-shadow($btn-default-bg);
  48. &:hover {
  49. @include btn-shadow(darken($btn-default-bg, 4%));
  50. }
  51. }
  52. &-primary {
  53. @include btn-shadow($btn-primary-bg);
  54. &:hover {
  55. @include btn-shadow(darken($btn-primary-bg, 4%));
  56. }
  57. }
  58. &-success {
  59. @include btn-shadow($btn-success-bg);
  60. &:hover {
  61. @include btn-shadow(darken($btn-success-bg, 4%));
  62. }
  63. }
  64. &-info {
  65. @include btn-shadow($btn-info-bg);
  66. &:hover {
  67. @include btn-shadow(darken($btn-info-bg, 4%));
  68. }
  69. }
  70. &-warning {
  71. @include btn-shadow($btn-warning-bg);
  72. &:hover {
  73. @include btn-shadow(darken($btn-warning-bg, 4%));
  74. }
  75. }
  76. &-danger {
  77. @include btn-shadow($btn-danger-bg);
  78. &:hover {
  79. @include btn-shadow(darken($btn-danger-bg, 4%));
  80. }
  81. }
  82. &:active,
  83. &.active {
  84. background-image: none;
  85. @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
  86. }
  87. }
  88. // Typography =================================================================
  89. // Tables =====================================================================
  90. // Forms ======================================================================
  91. // Navs =======================================================================
  92. // Indicators =================================================================
  93. // Progress bars ==============================================================
  94. // Containers =================================================================
  95. .panel {
  96. &-primary {
  97. .panel-title {
  98. color: #fff;
  99. }
  100. }
  101. }