_header.scss 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. #header {
  2. background: $header-bg;
  3. color: $white;
  4. text-align: center;
  5. padding: 1rem;
  6. a {
  7. display: inline-block;
  8. }
  9. #logo-svg {
  10. @extend .default-animation;
  11. width: $logo-width;
  12. height: $logo-height;
  13. path {
  14. @extend .default-animation;
  15. fill: $white;
  16. }
  17. }
  18. }
  19. .searchbox {
  20. margin-top: 0.5rem;
  21. position: relative;
  22. border: 1px solid lighten($header-bg, 5%);
  23. background: darken($header-bg,5%);
  24. border-radius: 4px;
  25. label {
  26. color: rgba($white, 0.8);
  27. position: absolute;
  28. left: 10px;
  29. top: 3px;
  30. }
  31. span {
  32. color: rgba($white, 0.6);
  33. position: absolute;
  34. right: 10px;
  35. top: 3px;
  36. cursor: pointer;
  37. &:hover {
  38. color: rgba($white, 0.9);
  39. }
  40. }
  41. input {
  42. display: inline-block;
  43. color: $white;
  44. width: 100%;
  45. height: 30px;
  46. background: transparent;
  47. border: 0;
  48. padding: 0 25px 0 30px;
  49. margin: 0;
  50. font-weight: $font-weight-regular;
  51. @include placeholder {
  52. color: rgba($white, 0.6);
  53. }
  54. }
  55. }