Base de code pour une application electron a base d'angular.

app-menu.component.scss 1.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. .menu {
  2. cursor: default;
  3. user-select: none;
  4. display: flex;
  5. position: relative;
  6. flex-grow: 0;
  7. flex-shrink: 0;
  8. flex-direction: column;
  9. overflow: hidden;
  10. width: 200px;
  11. padding: 0;
  12. background-color: rgba(0, 0, 0, .15);
  13. height: 100%;
  14. &.reducted {
  15. width: 48px;
  16. }
  17. svg:hover>path {
  18. fill: rgba(154, 19, 19, 0.8);
  19. }
  20. >a {
  21. display: flex;
  22. align-items: center;
  23. height: 44px;
  24. color:initial;
  25. text-decoration: none;
  26. &:hover {
  27. background-color: rgba(255, 255, 255, 0.1);
  28. }
  29. &.selected {
  30. background-color: rgba(154, 19, 19, 0.6);
  31. &:hover {
  32. background-color: rgba(154, 19, 19, 0.8);
  33. }
  34. }
  35. >span {
  36. display: flex;
  37. align-items: center;
  38. color: rgb(255, 255, 255);
  39. font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  40. font-size: 15px;
  41. letter-spacing: 0.4pt;
  42. padding: 0px 16px;
  43. transition: transform 0.1s ease-in 0s;
  44. user-select: none;
  45. &:active{
  46. transition: transform 0s ease-in 0s;
  47. transform: scale(0.97);
  48. }
  49. >i {
  50. margin-right: 8px;
  51. height: 44px;
  52. display: flex;
  53. align-items: center;
  54. }
  55. }
  56. }
  57. }