traxxx-web/assets/css/inputs.css

284 lines
4.2 KiB
CSS

.input {
box-sizing: border-box;
padding: .5rem .75rem;
font-size: 1rem;
flex-basis: 0;
border: solid 1px var(--grey-light-30);
border-radius: .25rem;
background: var(--grey-light-60);
font: inherit;
&:focus {
outline: none;
border-color: var(--primary-light-10);
}
}
.input-inline {
border-radius: 0;
border: none;
border-bottom: solid 1px var(--grey-light-30);
background: var(--background);
}
.button {
display: inline-flex;
flex-shrink: 0;
align-items: stretch;
box-sizing: border-box;
padding: .5rem 0 .5rem .5rem;
border: none;
border-radius: .25rem;
background: var(--background);
box-shadow: 0 0 3px var(--shadow-weak-30);
color: var(--shadow-strong-30);
font-size: .9rem;
font-weight: bold;
.icon {
height: auto;
padding: 0 .75rem 0 .25rem;
fill: var(--shadow-strong-20);
}
&:hover {
cursor: pointer;
background: var(--primary);
color: var(--text-light);
.icon {
fill: var(--text-light);
}
}
&:focus {
outline: none;
}
}
.button-label {
margin-right: .75rem;
}
.button-submit {
color: var(--primary);
justify-content: center;
&:hover:not(:disabled) {
background: var(--primary);
cursor: pointer;
}
&:disabled {
background: var(--shadow-weak-10);
}
}
.button-inline {
border: none;
background: none;
color: var(--grey-dark-20);
padding: 0 0 .5rem 0;
font-size: 1rem;
font-weight: bold;
.icon {
fill: var(--grey-dark-20);
padding-left: none;
}
&:hover {
cursor: pointer;
background: none;
color: var(--primary);
.icon {
fill: var(--primary);
}
}
&:focus {
outline: none;
}
}
.button-cancel {
background: none;
color: var(--shadow-strong-10);
font-weight: normal;
&:hover:not(:disabled) {
color: var(--error);
cursor: pointer;
}
&:disabled {
color: var(--shadow-weak-10);
}
}
.radio {
margin: 0 .5rem 0 0;
}
.filter-section {
width: 100%;
border-bottom: solid 1px var(--shadow-hint);
margin-bottom: .25rem;
}
.label-values {
flex-shrink: 0;
font-weight: normal;
}
.filter-split {
display: flex;
align-items: center;
}
.toggle-container,
.range-container {
display: flex;
flex-grow: 1;
align-items: center;
padding: .5rem 0;
&.on {
.toggle-label.on {
color: var(--enabled);
.icon {
fill: var(--enabled);
}
}
.toggle {
background-color: var(--enabled-background);
&::-webkit-slider-thumb {
background: var(--enabled);
}
&::-moz-range-thumb {
background: var(--enabled);
}
}
}
&.off {
.toggle-label.off {
color: var(--disabled);
.icon {
fill: var(--disabled);
}
}
.toggle {
background-color: var(--disabled-background);
&::-webkit-slider-thumb {
background: var(--disabled);
}
&::-moz-range-thumb {
background: var(--disabled);
}
}
}
}
.toggle-label {
display: inline-flex;
justify-content: center;
min-width: 1.5rem;
flex-shrink: 0;
padding: 0 .5rem;
color: var(--shadow);
font-weight: bold;
font-size: .9rem;
&.on {
text-align: right;
}
.icon {
fill: var(--shadow);
}
&:hover {
cursor: pointer;
&.on {
color: var(--enabled);
.icon {
fill: var(--enabled);
}
}
&.off {
color: var(--disabled);
.icon {
fill: var(--disabled);
}
}
}
}
.filter-label {
display: flex;
justify-content: space-between;
padding: .5rem 0 .25rem .25rem;
color: var(--shadow);
font-weight: bold;
font-size: .9rem;
.label {
width: 100%;
display: flex;
align-items: center;
text-transform: capitalize;
}
.checkbox {
margin: 0 .75rem 0 0;
}
.icon {
margin: 0 .5rem 0 0;
}
}
.toggle {
width: 0;
flex-grow: 1;
height: 1.25rem;
appearance: none;
border-radius: 1rem;
background-color: var(--shadow-weak-40);
background-image: radial-gradient(circle, var(--shadow-weak-10) .3rem, transparent calc(.3rem + 1px));
cursor: pointer;
&::-webkit-slider-thumb {
appearance: none;
background: var(--disabled-handle);
width: 1.25rem;
height: 1.25rem;
border-radius: .625rem;
box-shadow: 0 0 3px var(--shadow-weak-10);
}
&::-moz-range-thumb {
appearance: none;
background: var(--disabled-handle);
width: 1.25rem;
height: 1.25rem;
border: none;
border-radius: .625rem;
box-shadow: 0 0 3px var(--shadow-weak-10);
}
}