_bootswatch.scss 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
  1. // Lux 4.3.1
  2. // Bootswatch
  3. // Variables ===================================================================
  4. $web-font-path: "https://fonts.googleapis.com/css?family=Nunito+Sans:400,600" !default;
  5. @import url($web-font-path);
  6. // Navbar ======================================================================
  7. .navbar {
  8. font-size: $font-size-sm;
  9. text-transform: uppercase;
  10. font-weight: 600;
  11. &-nav {
  12. .nav-link {
  13. padding-top: .715rem;
  14. padding-bottom: .715rem;
  15. }
  16. }
  17. &-brand {
  18. margin-right: 2rem;
  19. }
  20. }
  21. .bg-primary {
  22. background-color: $gray-900 !important;
  23. }
  24. .bg-light {
  25. border: 1px solid rgba(0, 0, 0, 0.1);
  26. &.navbar-fixed-top {
  27. border-width: 0 0 1px 0;
  28. }
  29. &.navbar-bottom-top {
  30. border-width: 1px 0 0 0;
  31. }
  32. }
  33. .nav-item {
  34. margin-right: 2rem;
  35. }
  36. // Buttons =====================================================================
  37. .btn {
  38. font-size: $font-size-sm;
  39. text-transform: uppercase;
  40. &-sm {
  41. font-size: 10px;
  42. }
  43. &-warning {
  44. &,
  45. &:hover,
  46. &:not([disabled]):not(.disabled):active,
  47. &:focus {
  48. color: $white;
  49. }
  50. }
  51. }
  52. .btn-outline-secondary {
  53. border-color: $gray-600;
  54. color: $gray-600;
  55. &:not([disabled]):not(.disabled):hover,
  56. &:not([disabled]):not(.disabled):focus,
  57. &:not([disabled]):not(.disabled):active {
  58. background-color: $gray-400;
  59. border-color: $gray-400;
  60. color: $white;
  61. }
  62. &:not([disabled]):not(.disabled):focus {
  63. box-shadow: 0 0 0 0.2rem rgba($gray-400, 0.5);
  64. }
  65. }
  66. [class*="btn-outline-"] {
  67. border-width: 2px;
  68. }
  69. .border-secondary {
  70. border: 1px solid $gray-400 !important;
  71. }
  72. // Typography ==================================================================
  73. body {
  74. font-weight: 200;
  75. letter-spacing: 1px;
  76. }
  77. h1, h2, h3, h4, h5, h6 {
  78. text-transform: uppercase;
  79. letter-spacing: 3px;
  80. }
  81. .text-secondary {
  82. color: $body-color !important;
  83. }
  84. // Tables ======================================================================
  85. th {
  86. font-size: $font-size-sm;
  87. text-transform: uppercase;
  88. }
  89. .table {
  90. th, td {
  91. padding: 1.5rem;
  92. }
  93. &-sm {
  94. th, td {
  95. padding: 0.75rem;
  96. }
  97. }
  98. }
  99. // Forms =======================================================================
  100. .custom-switch {
  101. .custom-control-label {
  102. &::after {
  103. top: calc(0.15625rem + 2px);
  104. left: calc(-2.25rem + 2px);
  105. width: calc(1rem - 4px);
  106. height: calc(1rem - 4px);
  107. }
  108. }
  109. }
  110. // Navs ========================================================================
  111. .dropdown-menu {
  112. font-size: $font-size-sm;
  113. text-transform: none;
  114. }
  115. // Indicators ==================================================================
  116. .badge {
  117. padding-top: 0.28rem;
  118. &-pill {
  119. border-radius: 10rem;
  120. }
  121. }
  122. // Progress bars ===============================================================
  123. // Containers ==================================================================
  124. .list-group-item {
  125. h1, h2, h3, h4, h5, h6,
  126. .h1, .h2, .h3, .h4, .h5, .h6 {
  127. color: inherit;
  128. }
  129. }
  130. .card {
  131. &-title,
  132. &-header {
  133. color: inherit;
  134. }
  135. }