187 lines
3.3 KiB
SCSS
187 lines
3.3 KiB
SCSS
// Styles for INPUTS
|
||
input:not([role="combobox"]) {
|
||
font-size: 1.2rem;
|
||
color: $dark_gray;
|
||
height: auto;
|
||
width: 100%;
|
||
border: 0;
|
||
padding: 6px 8px;
|
||
box-shadow: 0px 0px 10px $light_gray;
|
||
&[type="checkbox"] {
|
||
width: inherit;
|
||
}
|
||
&:focus {
|
||
background-color: $white;
|
||
box-shadow: 0px 0px 10px $translucent;
|
||
}
|
||
&.bulk-day-selector {
|
||
width: 10%;
|
||
box-shadow: none;
|
||
margin-bottom: 0.75rem !important;
|
||
margin-top: 0.75rem !important;
|
||
height: 1.5rem;
|
||
vertical-align: top;
|
||
&.margin-left {
|
||
margin-left: 20%;
|
||
}
|
||
}
|
||
&.day {
|
||
display: none;
|
||
}
|
||
&.dim {
|
||
background: darken($white, 2%) !important;
|
||
}
|
||
&.error {
|
||
border: 2px solid $red;
|
||
background-color: $white !important;
|
||
color: $red;
|
||
}
|
||
&:not([type="checkbox"]):not([type="radio"]) {
|
||
-moz-appearance: textfield;
|
||
}
|
||
}
|
||
|
||
.input-error-wrapper {
|
||
height: 0;
|
||
}
|
||
|
||
.input-error {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
width: 15px;
|
||
height: 15px;
|
||
color: $white;
|
||
background: $red;
|
||
padding: 2px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.day-selector-wrapper {
|
||
display: inline-block;
|
||
width: 10%;
|
||
height: 3rem;
|
||
}
|
||
|
||
.week-row {
|
||
height: 30.5px;
|
||
width: 108%;
|
||
margin-left: -1rem;
|
||
}
|
||
|
||
select {
|
||
border: none;
|
||
padding: 7px;
|
||
background: $white;
|
||
width: 100%;
|
||
}
|
||
|
||
.filter-search {
|
||
span {
|
||
width: 100%;
|
||
}
|
||
i {
|
||
position: absolute;
|
||
top: 30%;
|
||
right: 0.65rem;
|
||
color: $dark_gray
|
||
}
|
||
&.dim {
|
||
Button {
|
||
background: darken($white, 2%) !important;
|
||
&:hover {
|
||
background: darken($white, 2%) !important;
|
||
}
|
||
}
|
||
}
|
||
&.disabled {
|
||
pointer-events: none;
|
||
button {
|
||
background: darken($white, 10%) !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
.filter-search-item-none::after {
|
||
content: "*";
|
||
}
|
||
|
||
.filter-search-heading-item {
|
||
pointer-events: none;
|
||
font-weight: bold;
|
||
&:before {
|
||
content: "➖";
|
||
font-weight: bold;
|
||
color: inherit;
|
||
}
|
||
}
|
||
|
||
.fb-checkbox {
|
||
input[type="checkbox"] {
|
||
position: relative;
|
||
border-radius: 0;
|
||
-webkit-appearance: none;
|
||
border: 0.5px solid $gray;
|
||
width: 2rem;
|
||
height: 2rem;
|
||
background: $white;
|
||
margin-top: 0;
|
||
cursor: pointer;
|
||
&:before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: $white;
|
||
opacity: 0.5;
|
||
}
|
||
&:checked:after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0.5rem;
|
||
bottom: 0.5rem;
|
||
border: solid $dark_gray;
|
||
border-width: 0 3px 3px 0;
|
||
transform: rotate(45deg);
|
||
padding: 0.6rem 0.3rem;
|
||
}
|
||
}
|
||
&.partial:after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0.75rem;
|
||
bottom: 1.2rem;
|
||
border: solid $dark_gray;
|
||
border-width: 0 0 3px 0;
|
||
padding: 0.6rem 0.3rem;
|
||
}
|
||
&.large {
|
||
input[type="checkbox"] {
|
||
width: 3rem;
|
||
height: 3rem;
|
||
&:checked:after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0.9rem;
|
||
bottom: 0.5rem;
|
||
border: solid $dark_gray;
|
||
border-width: 0 4px 4px 0;
|
||
transform: rotate(45deg);
|
||
padding: 1rem 0.3rem;
|
||
}
|
||
}
|
||
}
|
||
&.disabled {
|
||
cursor: not-allowed;
|
||
input[type="checkbox"] {
|
||
background: $light_gray;
|
||
pointer-events: none;
|
||
&:checked:after {
|
||
border-color: $gray;
|
||
}
|
||
}
|
||
}
|
||
}
|