@openui5/sap.m
Version:
OpenUI5 UI Library sap.m
344 lines (341 loc) • 7.01 kB
text/less
/* =========================================== */
/* CSS for control sap.m/WheelSlider */
/* Base Styles */
/* =========================================== */
.sapMWS {
display: inline-block;
overflow: hidden;
height: 3rem;
vertical-align: middle;
text-align: center;
box-sizing: border-box;
cursor: pointer;
margin-top: 2rem;
.sapMWSLabel {
display: none;
box-sizing: border-box;
height: 2rem;
line-height: 2rem;
width: 4.5rem;
text-align: center;
font-size: @sapMFontSmallSize;
color: @sapUiContentLabelColor;
text-align: center;
vertical-align: middle;
}
.sapMWSArrows {
display: none;
box-sizing: border-box;
}
.sapMWSInner {
overflow: hidden;
height: 100%;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
.sapMWSItem {
height: 3rem;
line-height: 3rem;
width: 4.5rem;
box-sizing: border-box;
background: @sapUiSelected;
border: 1px solid @sapUiListBorderColor;
font-size: @sapMFontMediumSize;
color: @sapUiContentContrastTextColor;
text-align: center;
&:hover {
background: @sapUiHighlight;
color: @sapUiContentContrastTextColor;
}
&:active {
background: @sapUiHighlight;
color: @sapUiContentContrastTextColor;
}
&:focus {
outline: 1px dotted @sapUiContentContrastFocusColor;
outline-offset: -3px;
}
}
.sapMWSSelectionFrame {
width: 4.5rem;
height: 3rem;
position: absolute;
box-sizing: border-box;
display: none;
}
& > ul {
list-style: none;
margin: 0;
padding: 0;
}
}
&.sapMWSExpanded {
height: 100%;
cursor: default;
margin: 0;
.sapMWSLabel {
display: block;
}
.sapMWSArrows {
display: none;
}
.sapMWSInner {
height: calc(100% - 2rem);
max-height: 100%; //because of the SliderValuesN classes below
.sapMWSItem {
background: @sapUiListBackground;
color: @sapUiBaseText;
border: 1px solid @sapUiListBorderColor;
&:hover {
background: @sapUiHighlight;
}
&:active {
background: @sapUiHighlight;
color: @sapUiContentContrastTextColor;
}
&:focus {
outline: 1px dotted @sapUiContentFocusColor;
outline-offset: -3px;
}
}
.sapMWSSelectionFrame {
display: block;
outline: 0.125rem solid @sapUiContentForegroundBorderColor;
outline-offset: -0.313rem;
&:hover {
& + ul > li.sapMWSItem.sapMWSItemSelected {
background: @sapUiHighlight;
}
}
&:active {
& + ul > li.sapMWSItem.sapMWSItemSelected {
background: @sapUiSelected;
color: @sapUiContentContrastTextColor;
}
}
}
}
.sapMWSInner.SliderValues3 {
height: 9rem;
}
.sapMWSInner.SliderValues4 {
height: 12rem;
}
.sapMWSInner.SliderValues5 {
height: 15rem;
}
.sapMWSInner.SliderValues6 {
height: 18rem;
}
.sapMWSInner.SliderValues7 {
height: 21rem;
}
.sapMWSInner.SliderValues8 {
height: 24rem;
}
.sapMWSInner.SliderValues9 {
height: 27rem;
}
.sapMWSInner.SliderValues10 {
height: 30rem;
}
.sapMWSInner.SliderValues11 {
height: 33rem;
}
.sapMWSInner.SliderValues12 {
height: 36rem;
}
}
&:focus {
outline: none;
}
}
.sapUiSizeCompact {
.sapMWS {
height: 2rem;
.sapMWSLabel {
width: 4rem;
}
.sapMWSInner {
.sapMWSItem {
height: 2rem;
line-height: 2rem;
width: 4rem;
box-sizing: border-box;
}
.sapMWSSelectionFrame {
width: 4rem;
height: 2rem;
}
}
&.sapMWSExpanded {
height: 100%;
cursor: default;
margin: 0;
.sapMWSArrows {
display: block;
}
.sapMWSInner {
height: ~"calc(100% - 6rem)";
max-height: ~"calc(100% - 6rem)";
}
.sapMWSInner.SliderValues3 {
height: 6rem;
}
.sapMWSInner.SliderValues4 {
height: 8rem;
}
.sapMWSInner.SliderValues5 {
height: 10rem;
}
.sapMWSInner.SliderValues6 {
height: 12rem;
}
.sapMWSInner.SliderValues7 {
height: 14rem;
}
.sapMWSInner.SliderValues8 {
height: 16rem;
}
.sapMWSInner.SliderValues9 {
height: 18rem;
}
.sapMWSInner.SliderValues10 {
height: 20rem;
}
.sapMWSInner.SliderValues11 {
height: 22rem;
}
.sapMWSInner.SliderValues12 {
height: 24rem;
}
}
}
}
.sap-phone {
.sapMWS {
display: inline-block;
height: 3rem;
text-align: center;
overflow: hidden;
cursor: pointer;
vertical-align: middle;
box-sizing: border-box;
.sapMWSLabel {
height: 2rem;
width: 4.5rem;
display: none;
font-size: @sapMFontSmallSize;
color: @sapUiContentLabelColor;
text-align: center;
vertical-align: middle;
}
.sapMWSArrows {
display: none;
}
.sapMWSInner {
height: 100%;
//for Android 4.1 - 4.3 calc is not supported, so use 100% instead
max-height: 100%;
overflow: hidden;
.sapMWSItem {
height: 3rem;
line-height: 3rem;
width: 4.5rem;
box-sizing: border-box;
background: @sapUiSelected;
border: 1px solid @sapUiListBorderColor;
font-size: @sapMFontMediumSize;
color: @sapUiContentContrastTextColor;
text-align: center;
&:active {
background: @sapUiHighlight;
color: @sapUiContentContrastTextColor;
}
&:focus {
outline: 1px dotted @sapUiContentContrastFocusColor;
outline-offset: -3px;
}
}
.sapMWSSelectionFrame {
width: 4.5rem;
height: 3rem;
position: absolute;
display: none;
box-sizing: border-box;
}
}
&.sapMWSExpanded {
height: 100%;
cursor: default;
.sapMWSLabel {
display: block;
}
.sapMWSArrows {
display: none;
}
.sapMWSInner {
height: calc(100% - 2rem);
//for Android 4.1 - 4.3 calc is not supported, so use 100% instead
max-height: 100%;
overflow: hidden;
.sapMWSItem {
height: 3rem;
line-height: 3rem;
width: 4.5rem;
box-sizing: border-box;
background: @sapUiListBackground;
color: @sapUiBaseText;
border: 1px solid @sapUiListBorderColor;
&:active {
background: @sapUiHighlight;
color: @sapUiContentContrastTextColor;
}
&:focus {
outline: 1px dotted @sapUiContentFocusColor;
outline-offset: -3px;
}
}
.sapMWSSelectionFrame {
display: block;
outline: 0.125rem solid @sapUiContentForegroundBorderColor;
outline-offset: -0.313rem;
}
}
.sapMWSInner.SliderValues3 {
height: 9rem;
}
.sapMWSInner.SliderValues4 {
height: 12rem;
}
.sapMWSInner.SliderValues5 {
height: 15rem;
}
.sapMWSInner.SliderValues6 {
height: 18rem;
}
.sapMWSInner.SliderValues7 {
height: 21rem;
}
.sapMWSInner.SliderValues8 {
height: 24rem;
}
.sapMWSInner.SliderValues9 {
height: 27rem;
}
.sapMWSInner.SliderValues10 {
height: 30rem;
}
.sapMWSInner.SliderValues11 {
height: 33rem;
}
.sapMWSInner.SliderValues12 {
height: 36rem;
}
}
&:focus {
outline: none;
}
}
}