jb-number-input
Version:
number input web component
58 lines (51 loc) • 2.04 kB
CSS
.jb-input-web-component {
--jb-input-input-direction: var(--jb-number-input-input-direction, ltr);
.number-control-wrapper {
.number-control-buttons {
display: flex;
height: 100%;
cursor: pointer;
.number-control-button {
width: var(--jb-number-input-button-width, 36px);
height: 100%;
text-align: center;
}
.increase-number-button {
background: var(--jb-number-input-increase-button-bg, transparent);
border: var(--jb-number-input-increase-button-border, none);
border-radius: var(--jb-number-input-increase-button-border-radius, 0);
box-sizing: border-box;
.increase-icon {
stroke: var(--increase-button-color);
stroke-width: 14px;
height: 100%;
width: 100%;
display: block;
}
&:hover {
.increase-icon {
stroke: var(--increase-button-color-hover);
}
}
}
.decrease-number-button {
border: var(--jb-number-input-decrease-button-border, none);
border-radius: var(--jb-number-input-decrease-button-border-radius, 0);
background: var(--jb-number-input-decrease-button-bg, transparent);
box-sizing: border-box;
.decrease-icon {
stroke: var(--decrease-button-color);
stroke-width: 14px;
height: 100%;
width: 100%;
display: block;
}
&:hover {
.decrease-icon {
stroke: var(--decrease-button-color-hover);
}
}
}
}
}
}