You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_settings-button.scss 1.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. .settings-button {
  2. &-container {
  3. position: relative;
  4. .toolbox-icon {
  5. align-items: center;
  6. cursor: pointer;
  7. display: flex;
  8. background-color: #fff;
  9. border-radius: 50%;
  10. border: 1px solid #d1dbe8;
  11. justify-content: center;
  12. width: 38px;
  13. height: 38px;
  14. &:hover {
  15. background-color: #daebfa;
  16. border: 1px solid #daebfa;
  17. }
  18. &.toggled {
  19. background: #2a3a4b;
  20. border: 1px solid #5e6d7a;
  21. svg {
  22. fill: #fff;
  23. }
  24. &:hover {
  25. background-color: #5e6d7a;
  26. }
  27. }
  28. &.disabled, .disabled & {
  29. cursor: initial;
  30. color: #fff;
  31. background-color: #a4b8d1;
  32. &:hover {
  33. background-color: #a4b8d1;
  34. }
  35. }
  36. svg {
  37. fill: #5e6d7a;
  38. }
  39. }
  40. }
  41. &-small-icon {
  42. background: #FFF;
  43. border: 1px solid rgba(0, 0, 0, 0.2);
  44. border-radius: 50%;
  45. bottom: 0;
  46. box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
  47. cursor: pointer;
  48. height: 16px;
  49. position: absolute;
  50. text-align: center;
  51. right: 4px;
  52. width: 16px;
  53. &> svg {
  54. fill: #5e6d7a;
  55. margin-top: 5px;
  56. }
  57. &--disabled {
  58. background-color: #a4b8d1;
  59. cursor: default;
  60. }
  61. &--hovered {
  62. bottom: -1px;
  63. height: 20px;
  64. right: 2px;
  65. width: 20px;
  66. &> svg {
  67. margin-top: 6px;
  68. }
  69. }
  70. }
  71. }