ToolIcon.scss 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. :root {
  2. --button-gray-1: #e9ecef;
  3. --button-gray-2: #ced4da;
  4. --button-gray-3: #adb5bd;
  5. --button-blue: #a5d8ff;
  6. }
  7. .ToolIcon {
  8. display: inline-flex;
  9. align-items: center;
  10. position: relative;
  11. font-family: Cascadia;
  12. cursor: pointer;
  13. background-color: var(--button-gray-1);
  14. -webkit-tap-highlight-color: transparent;
  15. border-radius: var(--space-factor);
  16. }
  17. .ToolIcon__icon {
  18. width: 2.5rem;
  19. height: 2.5rem;
  20. display: flex;
  21. justify-content: center;
  22. align-items: center;
  23. border-radius: var(--space-factor);
  24. svg {
  25. position: relative;
  26. height: 1em;
  27. }
  28. & + .ToolIcon__label {
  29. margin-left: 0;
  30. }
  31. }
  32. .ToolIcon__label {
  33. font-family: var(--ui-font);
  34. margin: 0 0.8em;
  35. }
  36. .ToolIcon_size_s .ToolIcon__icon {
  37. width: 1.4rem;
  38. height: 1.4rem;
  39. font-size: 0.8em;
  40. }
  41. .ToolIcon_type_button {
  42. padding: 0;
  43. border: none;
  44. margin: 0;
  45. font-size: inherit;
  46. &:hover {
  47. background-color: var(--button-gray-1);
  48. }
  49. &:active {
  50. background-color: var(--button-gray-2);
  51. }
  52. &:focus {
  53. box-shadow: 0 0 0 2px var(--button-blue);
  54. }
  55. &.ToolIcon--selected {
  56. background-color: var(--button-gray-2);
  57. &:active {
  58. background-color: var(--button-gray-3);
  59. }
  60. }
  61. }
  62. .ToolIcon_type_radio,
  63. .ToolIcon_type_checkbox {
  64. position: absolute;
  65. opacity: 0;
  66. pointer-events: none;
  67. &:checked + .ToolIcon__icon {
  68. background-color: var(--button-gray-2);
  69. }
  70. &:focus + .ToolIcon__icon {
  71. box-shadow: 0 0 0 2px var(--button-blue);
  72. }
  73. &:active + .ToolIcon__icon {
  74. background-color: var(--button-gray-3);
  75. }
  76. }
  77. .ToolIcon_type_floating {
  78. background-color: transparent;
  79. &:hover {
  80. background-color: transparent;
  81. }
  82. &:active {
  83. background-color: transparent;
  84. }
  85. &:focus {
  86. box-shadow: none;
  87. }
  88. .ToolIcon__icon {
  89. width: 2rem;
  90. height: 2em;
  91. }
  92. }
  93. .ToolIcon.ToolIcon__lock {
  94. &.ToolIcon_type_button {
  95. border-radius: 4px;
  96. svg {
  97. position: static;
  98. }
  99. }
  100. &.ToolIcon_type_floating {
  101. margin-left: 0.1rem;
  102. }
  103. }
  104. .ToolIcon__keybinding {
  105. position: absolute;
  106. bottom: 2px;
  107. right: 3px;
  108. font-size: 0.5em;
  109. color: var(--button-gray-3); // OC GRAY 5
  110. font-family: var(--ui-font);
  111. user-select: none;
  112. }