better-xcloud/src/assets/css/web-components.styl

99 lines
2.1 KiB
Stylus

.bx-select {
display: flex;
align-items: center;
flex: 0 1 auto;
select {
// Render offscreen instead of "display: none" so we could get its size
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
visibility: hidden !important;
}
> div, button.bx-select-value {
min-width: 120px;
text-align: left;
margin: 0 8px;
line-height: 24px;
vertical-align: middle;
background: #fff;
color: #000;
border-radius: 4px;
padding: 2px 8px;
flex: 1;
}
> div {
display: inline-block;
input {
display: inline-block;
margin-right: 8px;
}
label {
margin-bottom: 0;
font-size: 14px;
width: 100%;
span {
display: block;
font-size: 10px;
font-weight: bold;
text-align: left;
line-height: initial;
}
}
}
button.bx-select-value {
border: none;
display: inline-flex;
cursor: pointer;
min-height: 30px;
font-size: 0.9rem;
align-items: center;
span {
flex: 1;
text-align: left;
display: inline-block;
}
input {
margin: 0 4px;
accent-color: var(--bx-primary-button-color);
}
&:hover,
&:focus {
input {
accent-color: var(--bx-danger-button-color);
}
&::after {
border-color: #4d4d4d !important;
}
}
}
button.bx-button {
border: none;
height: 24px;
width: 24px;
padding: 0;
line-height: 24px;
color: #fff;
border-radius: 4px;
font-weight: bold;
font-size: 12px;
font-family: var(--bx-monospaced-font);
flex-shrink: 0;
span {
line-height: unset;
}
}
}