index.scss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. @import "./../../common/abstracts/_mixin.scss";
  2. @import "./../../common/abstracts/variable.scss";
  3. .wot-theme-dark {
  4. @include b(key) {
  5. background: $-dark-background2;
  6. color: $-dark-color;
  7. &:active {
  8. background-color: $-dark-background4;
  9. }
  10. @include m(active) {
  11. background-color: $-dark-background4;
  12. }
  13. }
  14. }
  15. .wd-key-wrapper {
  16. position: relative;
  17. flex: 1;
  18. flex-basis: 33%;
  19. box-sizing: border-box;
  20. padding: 0 6px 6px 0;
  21. @include m(wider) {
  22. flex-basis: 66%;
  23. }
  24. }
  25. @include b(key) {
  26. display: flex;
  27. align-items: center;
  28. justify-content: center;
  29. height: $-number-keyboard-key-height;
  30. font-size: $-number-keyboard-key-font-size;
  31. line-height: 1.5;
  32. background: $-number-keyboard-key-background;
  33. border-radius: $-number-keyboard-key-border-radius;
  34. &:active {
  35. background-color: $-number-keyboard-key-active-color;
  36. }
  37. @include m(large) {
  38. position: absolute;
  39. top: 0;
  40. right: 6px;
  41. bottom: 6px;
  42. left: 0;
  43. height: auto;
  44. }
  45. @include m(delete, close) {
  46. font-size: $-number-keyboard-delete-font-size;
  47. }
  48. @include m(active) {
  49. background-color: $-number-keyboard-key-active-color;
  50. }
  51. @include m(close) {
  52. color: $-number-keyboard-button-text-color;
  53. background: $-number-keyboard-button-background;
  54. &:active {
  55. background: $-number-keyboard-button-background;
  56. opacity: $-number-keyboard-button-active-opacity;
  57. }
  58. }
  59. @include edeep(loading-icon) {
  60. color: $-number-keyboard-button-text-color;
  61. }
  62. @include edeep(icon) {
  63. font-size: $-number-keyboard-icon-size;
  64. }
  65. }