index.scss 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. @import "./../common/abstracts/_mixin.scss";
  2. @import "./../common/abstracts/variable.scss";
  3. .wot-theme-dark {
  4. @include b(number-keyboard) {
  5. background: $-dark-background5;
  6. @include e(header){
  7. color: $-dark-color;
  8. }
  9. }
  10. }
  11. @include b(number-keyboard) {
  12. width: 100%;
  13. background: $-number-keyboard-background;
  14. color: $-color-black;
  15. user-select: none;
  16. @include m(with-title) {
  17. border-radius: 20px 20px 0 0;
  18. }
  19. @include e(header) {
  20. position: relative;
  21. display: flex;
  22. align-items: center;
  23. justify-content: center;
  24. box-sizing: content-box;
  25. height: $-number-keyboard-title-height;
  26. padding-top: 6px;
  27. color: $-number-keyboard-title-color;
  28. font-size: $-number-keyboard-title-font-size;
  29. }
  30. @include e(title) {
  31. display: inline-block;
  32. font-weight: normal;
  33. &-left {
  34. position: absolute;
  35. left: 0;
  36. }
  37. }
  38. @include e(body) {
  39. display: flex;
  40. padding: 6px 0 0 6px;
  41. }
  42. @include e(keys) {
  43. display: flex;
  44. flex: 3;
  45. flex-wrap: wrap;
  46. }
  47. @include e(close) {
  48. position: absolute;
  49. display: flex;
  50. align-items: center;
  51. right: 0;
  52. height: 100%;
  53. padding: $-number-keyboard-close-padding;
  54. color: $-number-keyboard-close-color;
  55. font-size: $-number-keyboard-close-font-size;
  56. background-color: transparent;
  57. border: none;
  58. @include m(hover){
  59. opacity: 0.6;
  60. }
  61. }
  62. @include e(sidebar) {
  63. display: flex;
  64. flex: 1;
  65. flex-direction: column;
  66. }
  67. }