_sidebar.scss 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. .sidebar-right{
  2. position: fixed;
  3. width: 20%;
  4. height: 100%;
  5. right: calc( -20% + 0.5rem);
  6. top: 0;
  7. transition: 0.3s right ease;
  8. #icone_list{
  9. z-index: 999;
  10. position: fixed;
  11. top: 0;
  12. right: 0;
  13. }
  14. .list-projets{
  15. height: 100%;
  16. overflow: auto;
  17. .container{
  18. margin: auto;
  19. ul{
  20. text-align: left;
  21. margin: 0;
  22. span.cat{
  23. display: block;
  24. line-height: 3rem;
  25. font-weight: bold;
  26. padding-left: 23px;
  27. }
  28. li{
  29. display: inline-flex;
  30. width: 100%;
  31. margin-top: -6px;
  32. position: relative;
  33. &::before{
  34. position: absolute;
  35. content: " ";
  36. display: inline-block;
  37. min-width: 10px;
  38. height: 100%;
  39. }
  40. &.culturelle{
  41. &::before{
  42. background: $color_culturelle;
  43. }
  44. }
  45. &.sociale{
  46. &::before{
  47. background: $color_sociale;
  48. }
  49. }
  50. &.publique{
  51. &::before{
  52. background: $color_publique;
  53. }
  54. }
  55. &:hover{
  56. &::before{
  57. min-width: 100%;
  58. transition: 0.6s min-width;
  59. }
  60. }
  61. }
  62. a{
  63. color: black;
  64. display: block;
  65. padding-left: 1rem;
  66. z-index: 999;
  67. width: 100%;
  68. &.active{
  69. color: black;
  70. }
  71. }
  72. }
  73. }
  74. }
  75. &.is-active{
  76. right: 0;
  77. transition: 0.3s right ease;
  78. }
  79. }