ChurchAngular/src/assets/styles/input-group.scss
2022-09-30 10:53:48 -07:00

109 lines
2.8 KiB
SCSS

@use '../../themes' as *;
.input-group {
border-radius: 1px;
transition-duration: 0.15s;
transition-property: border, background-color, color, box-shadow;
transition-timing-function: ease-in;
border-top: nb-theme(color-basic-default);
input,
textarea {
border-radius: 0.25rem;
min-width: 25px;
width: 1% !important;
max-width: 100% !important;
height: auto;
box-shadow: 0 0 0 0 !important;
position: relative;
flex: 1 1 auto !important;
margin-bottom: 0;
}
> input,
> textarea {
&:not(:last-child) {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
&:last-child {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
}
> rbj-currency-input,
> rbj-email-input {
&:not(:last-child) {
input {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
}
&:last-child {
input {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
}
}
.input-group-append,
.input-group-prepend {
> button {
min-width: 25px !important;
border-radius: 0.25rem;
padding: 0;
height: 100%;
box-shadow: 0 0 0 0 !important;
}
> span,
> .input-group-checkbox,
> .input-group-text {
min-width: 25px !important;
border-radius: 0.25rem;
height: 100%;
box-shadow: 0 0 0 0 !important;
background: nb-theme(background-basic-color-1);
padding: 0.5rem 10px;
width: 100%;
vertical-align: middle;
line-height: normal;
display: inline-block;
text-align: center;
//font-size: medium;
font-weight: 600;
}
nb-checkbox > .label {
padding: 2px 0px 0 5px;
display: flex;
}
}
.input-group-append {
> span,
> .input-group-text,
> .input-group-checkbox,
> button {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
}
.input-group-prepend {
> span,
> .input-group-text,
> .input-group-checkbox,
> button {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
}
.input-group-checkbox {
border: solid 1px nb-theme(border-basic-color-3);
}
&:focus-within {
box-shadow: 0 0px 0px 0.375rem rgba(143, 155, 179, 0.16);
}
}