You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
112 lines
2.1 KiB
112 lines
2.1 KiB
@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; |
|
} |
|
}
|
|
|