TimeView.scss 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. /**
  2. * @class Ext.panel.TimeView
  3. */
  4. /**
  5. * @var {color}
  6. * Analog Time View background color
  7. */
  8. $timeview-background-color: dynamic($background-color);
  9. /**
  10. * @var {color}
  11. * Analog Time View Analog Picker background color
  12. */
  13. $timeview-analog-picker-background-color: dynamic(#E0E0E0);
  14. /**
  15. * @var {color}
  16. * Analog Time View Analog Picker text color
  17. */
  18. $timeview-analog-picker-color: dynamic($color);
  19. /**
  20. * @var {color}
  21. * Analog Time View Analog Picker text color for active items
  22. */
  23. $timeview-analog-picker-active-color: dynamic($light-color);
  24. /**
  25. * @var {color}
  26. * Analog Time View Analog Picker Clock hand color
  27. */
  28. $timeview-analog-picker-hand-color: dynamic($base-color);
  29. /**
  30. * @var {color}
  31. * Analog Time View Analog Picker Clock hand color
  32. */
  33. $timeview-analog-picker-hand-dot-color: dynamic($background-color);
  34. @mixin timeview-ui(
  35. $ui: null,
  36. $background-color: null,
  37. $analog-picker-background-color: null,
  38. $analog-picker-color: null,
  39. $analog-picker-active-color: null,
  40. $analog-picker-hand-background-color: null,
  41. $analog-picker-hand-dot-color: null,
  42. $analog-picker-hand-color: null,
  43. $xtype: analogtime
  44. ) {
  45. // Bug in edge with psuedo and css properties. using this will de-property the variable
  46. $edge-analog-time-hand-background-color: mix(#fff, $analog-picker-hand-color, 0%);
  47. $ui-suffix: ui-suffix($ui);
  48. .#{$prefix}#{$xtype}#{$ui-suffix} {
  49. background-color: $background-color;
  50. width: 280px;
  51. height: 420px;
  52. &:not(.#{$prefix}vertical) {
  53. width: 420px;
  54. height: 280px;
  55. }
  56. .#{$prefix}inner-el {
  57. position: relative;
  58. display: flex;
  59. flex-direction: column;
  60. height: 100%;
  61. }
  62. .#{$prefix}wide & {
  63. .#{$prefix}inner-el {
  64. flex-direction: row;
  65. width: 100%;
  66. height: auto;
  67. }
  68. }
  69. .#{$prefix}picker-wrap-el {
  70. display: flex;
  71. flex-direction: column;
  72. justify-content: center;
  73. align-items: center;
  74. flex: 1;
  75. width: 100%;
  76. height: 100%;
  77. }
  78. .#{$prefix}analog-picker-el {
  79. position: relative;
  80. width: 90%;
  81. background-color: $analog-picker-background-color;
  82. border-radius: 1000000px;
  83. // Required for touch dragging in IE11 and Edge
  84. touch-action: none;
  85. &:before {
  86. content: "";
  87. display: block;
  88. padding-top: 100%;
  89. }
  90. &.animated .#{$prefix}analog-picker-hand-el {
  91. transition: transform 300ms ease-out;
  92. }
  93. &.animated-delayed .#{$prefix}analog-picker-hand-el {
  94. transition: transform 300ms 200ms ease-out;
  95. }
  96. }
  97. .#{$prefix}analog-picker-face-el {
  98. @include no-select;
  99. & > div {
  100. color: $analog-picker-color;
  101. position: absolute;
  102. width: 19px;
  103. text-align: center;
  104. top: 50%;
  105. left: 50%;
  106. margin: -10px;
  107. user-select: none;
  108. cursor: pointer;
  109. transition: color 200ms ease-out;
  110. &.active {
  111. color: $analog-picker-active-color;
  112. }
  113. }
  114. }
  115. $size: 2px;
  116. $centerSize: 8px;
  117. $outerSize: 40px;
  118. $dotSize: 4px;
  119. .#{$prefix}analog-picker-hand-el {
  120. position: absolute;
  121. top: 50%;
  122. left: 50%;
  123. background-color: $analog-picker-hand-color;
  124. width: 48%;
  125. height: $size;
  126. transform-origin: center left;
  127. transform: rotate(0deg);
  128. margin-top: -$size/2;
  129. .#{$prefix}edge & {
  130. background-color: $edge-analog-time-hand-background-color;
  131. &:before, &:after {
  132. background-color: $edge-analog-time-hand-background-color;
  133. }
  134. }
  135. &:before {
  136. position: absolute;
  137. top: -($centerSize/2) + ($size/2);
  138. left: -($centerSize/2);
  139. content: "";
  140. width: $centerSize;
  141. height: $centerSize;
  142. background-color: $analog-picker-hand-color;
  143. border-radius: $centerSize;
  144. }
  145. &:after {
  146. position: absolute;
  147. top: 0;
  148. right: ($outerSize/2) + ($size/2) - ($dotSize / 2);
  149. content: "";
  150. width: $dotSize;
  151. height: $dotSize;
  152. border-radius: $outerSize;
  153. background-color: $analog-picker-hand-color;
  154. box-shadow: 0 0 0 ($outerSize/2) $analog-picker-hand-color;
  155. }
  156. }
  157. .#{$prefix}analog-picker-el.#{$prefix}analog-picker-dot-indicator .#{$prefix}analog-picker-hand-el:after {
  158. background-color: $analog-picker-hand-dot-color;
  159. }
  160. }
  161. }