_navbar.scss 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. //
  2. // Mixins: Navbar
  3. //
  4. // Navbar Variant
  5. @mixin navbar-variant($name, $color) {
  6. .navbar-#{$name} {
  7. background-color: $color;
  8. color: color-yiq($color);
  9. &.navbar-light {
  10. .form-control-navbar {
  11. &::placeholder {
  12. color: rgba($gray-800, .8);
  13. }
  14. &,
  15. + .input-group-append > .btn-navbar {
  16. background-color: darken($color, 4%);
  17. border-color: darken($color, 9%);
  18. color: rgba($gray-800, .8);
  19. }
  20. &:focus {
  21. &::placeholder {
  22. color: $gray-800;
  23. }
  24. &,
  25. + .input-group-append .btn-navbar {
  26. background-color: darken($color, 5%);
  27. border-color: darken($color, 9%) !important;
  28. color: $gray-800;
  29. }
  30. }
  31. }
  32. }
  33. &.navbar-dark {
  34. .form-control-navbar {
  35. &::placeholder {
  36. color: rgba($white, .8);
  37. }
  38. &,
  39. + .input-group-append > .btn-navbar {
  40. background-color: lighten($color, 4%);
  41. border-color: lighten($color, 9%);
  42. color: rgba($white, .8);
  43. }
  44. &:focus {
  45. &::placeholder {
  46. color: $white;
  47. }
  48. &,
  49. + .input-group-append .btn-navbar {
  50. background-color: lighten($color, 5%);
  51. border-color: lighten($color, 9%) !important;
  52. color: $white;
  53. }
  54. }
  55. }
  56. }
  57. }
  58. }