qwc2
Version:
QGIS Web Client
85 lines (71 loc) • 1.69 kB
CSS
div.number-input {
border: 1px solid var(--border-color);
position: relative;
display: flex;
height: 2em;
background-color: var(--input-bg-color);
align-items: center;
}
div.number-input-invalid {
background-color: #FFAAAA;
}
div.number-input > input {
min-width: 0;
width: 0;
flex: 1 1 auto;
border: 0;
height: calc(2em - 2px);
background-color: transparent;
text-align: right;
}
div.number-input > input:read-only {
outline: none;
caret-color: transparent;
}
div.number-input-disabled > span.icon {
color: var(--text-color-disabled);
cursor: default;
}
div.number-input:not(.number-input-disabled) > span.icon:hover {
background-color: var(--button-bg-color-hover);
}
/** Normal **/
div.number-input-normal > input {
padding-right: 1.5em;
}
div.number-input > span.icon-chevron-up,
div.number-input > span.icon-chevron-down {
position: absolute;
right: 0;
width: 1.5em;
height: 1em;
user-select: none;
}
div.number-input > span.icon-chevron-up {
top: calc(50% - 1em);
}
div.number-input > span.icon-chevron-down {
bottom: calc(50% - 1em);
}
/** Mobile **/
div.number-input-mobile > input {
padding: 0 2em;
text-align: center;
}
div.number-input > span.icon-plus,
div.number-input > span.icon-minus {
position: absolute;
top: 1px;
bottom: 1px;
width: 2em;
background-color: var(--button-bg-color);
border: 1px solid var(--border-color);
border-radius: 2px;
user-select: none;
}
div.number-input > span.icon-plus {
right: 1px;
}
div.number-input > span.icon-minus {
left: 1px;
}