ToolIcon.scss 972 B

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