ExampleSidebar.scss 957 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. .sidebar {
  2. height: 100%;
  3. width: 0;
  4. position: absolute;
  5. z-index: 1;
  6. top: 0;
  7. left: 0;
  8. background-color: #111;
  9. overflow-x: hidden;
  10. transition: 0.5s;
  11. padding-top: 60px;
  12. &.open {
  13. width: 300px;
  14. }
  15. &-links {
  16. display: flex;
  17. flex-direction: column;
  18. padding: 20px;
  19. button {
  20. padding: 10px;
  21. margin: 10px;
  22. background: #faa2c1;
  23. color: #fff;
  24. border: none;
  25. cursor: pointer;
  26. }
  27. }
  28. }
  29. .sidebar a {
  30. padding: 8px 8px 8px 32px;
  31. text-decoration: none;
  32. font-size: 25px;
  33. color: #818181;
  34. display: block;
  35. transition: 0.3s;
  36. }
  37. .sidebar a:hover {
  38. color: #f1f1f1;
  39. }
  40. .sidebar .closebtn {
  41. position: absolute;
  42. top: 0;
  43. right: 0;
  44. font-size: 36px;
  45. margin-left: 50px;
  46. }
  47. .openbtn {
  48. font-size: 20px;
  49. cursor: pointer;
  50. background-color: #111;
  51. color: white;
  52. padding: 10px 15px;
  53. border: none;
  54. display: flex;
  55. margin-left: 50px;
  56. }
  57. .sidebar-open {
  58. margin-left: 300px;
  59. }