ToolIcon.scss 831 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. .ToolIcon {
  2. display: inline-block;
  3. position: relative;
  4. }
  5. .ToolIcon__icon {
  6. background-color: #e9ecef;
  7. width: 41px;
  8. height: 41px;
  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_type_button {
  18. padding: 0;
  19. border: none;
  20. margin: 0;
  21. font-size: inherit;
  22. &:hover .ToolIcon__icon {
  23. background-color: #e9ecef;
  24. }
  25. &:active .ToolIcon__icon {
  26. background-color: #ced4da;
  27. }
  28. &:focus .ToolIcon__icon {
  29. box-shadow: 0 0 0 2px #a5d8ff;
  30. }
  31. }
  32. .ToolIcon_type_radio {
  33. position: absolute;
  34. opacity: 0;
  35. &:hover + .ToolIcon__icon {
  36. background-color: #e9ecef;
  37. }
  38. &:checked + .ToolIcon__icon {
  39. background-color: #ced4da;
  40. }
  41. &:focus + .ToolIcon__icon {
  42. box-shadow: 0 0 0 2px #a5d8ff;
  43. }
  44. }