navbar-style.css 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
  2. * {
  3. font-family: 'Open Sans', sans-serif;
  4. margin: 0;
  5. padding: 0;
  6. box-sizing: border-box;
  7. }
  8. .sidebar {
  9. position: fixed;
  10. top: 0;
  11. left: 0;
  12. height: 400px;
  13. width: 250;
  14. color: #FFF;
  15. }
  16. .sidebar li {
  17. list-style: none;
  18. }
  19. .nav-link {
  20. text-decoration: none;
  21. font-weight: 400;
  22. color: #479FF8;
  23. }
  24. .nav-item {
  25. width: 246px;
  26. height: 48px;
  27. margin-bottom: 8px;
  28. display: flex;
  29. background-color: #FFF;
  30. padding-left: 8px;
  31. gap: 12px;
  32. flex-shrink: 0;
  33. align-items: center;
  34. }
  35. .nav-item-active {
  36. width: 246px;
  37. height: 48px;
  38. margin-bottom: 8px;
  39. display: flex;
  40. background-color: #479FF8;
  41. align-items: center;
  42. border-radius: 10px;
  43. padding-left: 8px;
  44. align-items: center;
  45. text-align: center;
  46. }
  47. .sidebar span {
  48. margin-left: 12px;
  49. text-align: center;
  50. vertical-align: middle;
  51. line-height: 48px;
  52. }
  53. .sidebar img {
  54. vertical-align: middle;
  55. }
  56. .nav-arrow {
  57. position: fixed;
  58. top: 0;
  59. left: 0;
  60. width: 72px;
  61. height: 40px;
  62. align-items: center;
  63. border-radius: 6px;
  64. border: 1px solid #D8D8D8;
  65. background: #FFF;
  66. box-shadow: 4px 5px 40px 0px #E5E5E5;
  67. margin-top: 24px;
  68. margin-left: 40px;
  69. }
  70. .border-arrow {
  71. height: 40px;
  72. position: relative;
  73. }
  74. .arrow {
  75. position: absolute;
  76. margin: auto;
  77. left: 0;
  78. top: 0;
  79. bottom: 0;
  80. right: 0;
  81. width: 24px;
  82. height: 24px;
  83. color: #479FF8;
  84. }