@import "variables.less";
|
@import "../common/SpinWheel.less";
|
|
@mbl-PickerItemHeight: 100px;
|
@mbl-PickerItemWidth: 100px;
|
|
.mblSpinWheel {
|
background-image: none !important;
|
border: none !important;
|
margin: auto 0;
|
height: 400px !important;
|
width: auto !important;
|
display: -ms-flexbox;
|
color: @win-foreground-color;
|
|
& .mblSpinWheelSlot {
|
-ms-flex-preferred-size: auto;
|
border: none;
|
-ms-user-select: none;
|
text-align: left !important;
|
overflow: hidden;
|
margin: 0px !important;
|
width: @mbl-PickerItemWidth !important;
|
|
&:empty {
|
display: none !important;
|
}
|
|
&:not([widgetId]) {
|
top: 150px;
|
height: 94px !important;
|
width: 86px !important;
|
padding: 0 0 0 8px !important;
|
margin-right: 6px !important;
|
background-color: @win-inactive-color;
|
line-height: 4.5;
|
}
|
}
|
|
& .mblSpinWheelSlotContainer:not(.mblSelectedSlot) {
|
& .mblSpinWheelSlotLabel:not(.mblSelectedSlotItem) {
|
opacity: 0;
|
-ms-transition: opacity 0.4s ease-out;
|
&:before {
|
opacity: 0;
|
transition: opacity 0.4s ease-out;
|
}
|
}
|
}
|
|
& .mblSpinWheelSlotLabel:not(.mblSelectedSlotItem) {
|
opacity: 1;
|
-ms-transition: opacity 0.4s ease-out;
|
&:before {
|
opacity: 1;
|
transition: opacity 0.4s ease-out;
|
}
|
}
|
|
& .mblSpinWheelSlotLabel {
|
border: none;
|
margin: 0px;
|
color: @win-disabled-color;
|
height: @mbl-PickerItemHeight;
|
line-height: 3.5;
|
font-size: @win-font-size-extra-large;
|
|
&.mblSelectedSlotItem {
|
color: @win-foreground-color;
|
&:before {
|
background-color: @win-disabled-color;
|
z-index: -1;
|
}
|
}
|
|
&:before {
|
content: '';
|
position: absolute;
|
width: 90px;
|
height: 90px;
|
border: 2px solid @win-disabled-color;
|
left: 0px;
|
}
|
|
&.mblSpinWheelSlotLabelGray {
|
opacity: 0.3;
|
|
&:before{
|
opacity: 0.3;
|
}
|
}
|
}
|
|
& .mblSpinWheelBar {
|
display: none;
|
}
|
|
& .mblSpinWheelSlotTouch {
|
background-color: @win-bg-color;
|
opacity: 0.01;
|
}
|
}
|
|
.mblTooltip.mblOpener {
|
& .mblSpinWheelDatePicker {
|
left: calc(~"50% - 150px");
|
position: absolute !important;
|
top: 50%;
|
bottom: 50%;
|
width: 300px !important;
|
}
|
}
|
