ToolIcon.scss 953 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. .ToolIcon {
  2. display: inline-block;
  3. position: relative;
  4. }
  5. .ToolIcon__icon {
  6. background-color: #e9ecef;
  7. width: 2.5rem;
  8. height: 2.5rem;
  9. display: flex;
  10. justify-content: center;
  11. align-items: center;
  12. border-radius: var(--space-factor);
  13. svg {
  14. height: 1em;
  15. }
  16. }
  17. .ToolIcon_size_s .ToolIcon__icon {
  18. width: 1.4rem;
  19. height: 1.4rem;
  20. font-size: 0.8em;
  21. }
  22. .ToolIcon_type_button {
  23. padding: 0;
  24. border: none;
  25. margin: 0;
  26. font-size: inherit;
  27. &:hover .ToolIcon__icon {
  28. background-color: #e9ecef;
  29. }
  30. &:active .ToolIcon__icon {
  31. background-color: #ced4da;
  32. }
  33. &:focus .ToolIcon__icon {
  34. box-shadow: 0 0 0 2px #a5d8ff;
  35. }
  36. }
  37. .ToolIcon_type_radio,
  38. .ToolIcon_type_checkbox {
  39. position: absolute;
  40. opacity: 0;
  41. &:hover + .ToolIcon__icon {
  42. background-color: #e9ecef;
  43. }
  44. &:checked + .ToolIcon__icon {
  45. background-color: #ced4da;
  46. }
  47. &:focus + .ToolIcon__icon {
  48. box-shadow: 0 0 0 2px #a5d8ff;
  49. }
  50. }