123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183 |
- /**
- * @class Ext.panel.TimeView
- */
- /**
- * @var {color}
- * Analog Time View background color
- */
- $timeview-background-color: dynamic($background-color);
- /**
- * @var {color}
- * Analog Time View Analog Picker background color
- */
- $timeview-analog-picker-background-color: dynamic(#E0E0E0);
- /**
- * @var {color}
- * Analog Time View Analog Picker text color
- */
- $timeview-analog-picker-color: dynamic($color);
- /**
- * @var {color}
- * Analog Time View Analog Picker text color for active items
- */
- $timeview-analog-picker-active-color: dynamic($light-color);
- /**
- * @var {color}
- * Analog Time View Analog Picker Clock hand color
- */
- $timeview-analog-picker-hand-color: dynamic($base-color);
- /**
- * @var {color}
- * Analog Time View Analog Picker Clock hand color
- */
- $timeview-analog-picker-hand-dot-color: dynamic($background-color);
- @mixin timeview-ui(
- $ui: null,
- $background-color: null,
- $analog-picker-background-color: null,
- $analog-picker-color: null,
- $analog-picker-active-color: null,
- $analog-picker-hand-background-color: null,
- $analog-picker-hand-dot-color: null,
- $analog-picker-hand-color: null,
- $xtype: analogtime
- ) {
- // Bug in edge with psuedo and css properties. using this will de-property the variable
- $edge-analog-time-hand-background-color: mix(#fff, $analog-picker-hand-color, 0%);
- $ui-suffix: ui-suffix($ui);
- .#{$prefix}#{$xtype}#{$ui-suffix} {
- background-color: $background-color;
- width: 280px;
- height: 420px;
- &:not(.#{$prefix}vertical) {
- width: 420px;
- height: 280px;
- }
- .#{$prefix}inner-el {
- position: relative;
- display: flex;
- flex-direction: column;
- height: 100%;
- }
- .#{$prefix}wide & {
- .#{$prefix}inner-el {
- flex-direction: row;
- width: 100%;
- height: auto;
- }
- }
- .#{$prefix}picker-wrap-el {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- flex: 1;
- width: 100%;
- height: 100%;
- }
- .#{$prefix}analog-picker-el {
- position: relative;
- width: 90%;
- background-color: $analog-picker-background-color;
- border-radius: 1000000px;
- // Required for touch dragging in IE11 and Edge
- touch-action: none;
- &:before {
- content: "";
- display: block;
- padding-top: 100%;
- }
- &.animated .#{$prefix}analog-picker-hand-el {
- transition: transform 300ms ease-out;
- }
- &.animated-delayed .#{$prefix}analog-picker-hand-el {
- transition: transform 300ms 200ms ease-out;
- }
- }
- .#{$prefix}analog-picker-face-el {
- @include no-select;
- & > div {
- color: $analog-picker-color;
- position: absolute;
- width: 19px;
- text-align: center;
- top: 50%;
- left: 50%;
- margin: -10px;
- user-select: none;
- cursor: pointer;
- transition: color 200ms ease-out;
- &.active {
- color: $analog-picker-active-color;
- }
- }
- }
- $size: 2px;
- $centerSize: 8px;
- $outerSize: 40px;
- $dotSize: 4px;
- .#{$prefix}analog-picker-hand-el {
- position: absolute;
- top: 50%;
- left: 50%;
- background-color: $analog-picker-hand-color;
- width: 48%;
- height: $size;
- transform-origin: center left;
- transform: rotate(0deg);
- margin-top: -$size/2;
- .#{$prefix}edge & {
- background-color: $edge-analog-time-hand-background-color;
- &:before, &:after {
- background-color: $edge-analog-time-hand-background-color;
- }
- }
- &:before {
- position: absolute;
- top: -($centerSize/2) + ($size/2);
- left: -($centerSize/2);
- content: "";
- width: $centerSize;
- height: $centerSize;
- background-color: $analog-picker-hand-color;
- border-radius: $centerSize;
- }
- &:after {
- position: absolute;
- top: 0;
- right: ($outerSize/2) + ($size/2) - ($dotSize / 2);
- content: "";
- width: $dotSize;
- height: $dotSize;
- border-radius: $outerSize;
- background-color: $analog-picker-hand-color;
- box-shadow: 0 0 0 ($outerSize/2) $analog-picker-hand-color;
- }
- }
- .#{$prefix}analog-picker-el.#{$prefix}analog-picker-dot-indicator .#{$prefix}analog-picker-hand-el:after {
- background-color: $analog-picker-hand-dot-color;
- }
- }
- }
|