_sidebar.scss 1.5 KB

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