153 lines
3.8 KiB
SCSS
153 lines
3.8 KiB
SCSS
.box-sizing-content {
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
div.material-container {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-around;
|
|
margin-top: 30px;
|
|
border: 1px solid whitesmoke;
|
|
padding: 21px;
|
|
border-radius: 4px;
|
|
}
|
|
h4.title {
|
|
text-align: center;
|
|
margin-bottom: 45px;
|
|
}
|
|
:root {
|
|
--omrs-color-ink-lowest-contrast: rgba(47, 60, 85, 0.18);
|
|
--omrs-color-ink-low-contrast: rgba(60, 60, 67, 0.3);
|
|
--omrs-color-ink-medium-contrast: rgba(19, 19, 21, 0.6);
|
|
--omrs-color-interaction: rgba(19, 19, 21, 0.6);
|
|
--omrs-color-interaction-minus-two: rgba(73, 133, 224, 0.12);
|
|
--omrs-color-danger: #b50706;
|
|
--omrs-color-bg-low-contrast: #eff1f2;
|
|
--omrs-color-ink-high-contrast: rgba(19, 19, 21, 0.6);
|
|
--omrs-color-bg-high-contrast: #ffffff;
|
|
}
|
|
/** END: Non Openmrs CSS **/
|
|
div.omrs-input-group {
|
|
margin-bottom: 1.5rem;
|
|
position: relative;
|
|
width: 20.4375rem;
|
|
}
|
|
|
|
/* Input*/
|
|
.omrs-input-underlined > input,
|
|
.omrs-input-filled > input {
|
|
border: none;
|
|
/*border-bottom: 0.125rem solid var(--omrs-color-ink-medium-contrast);*/
|
|
width: 100%;
|
|
height: 2rem;
|
|
font-size: 1.0625rem;
|
|
padding-left: 0.875rem;
|
|
line-height: 147.6%;
|
|
padding-top: 0.825rem;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.omrs-input-underlined > input:focus,
|
|
.omrs-input-filled > input:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.omrs-input-underlined > .omrs-input-label,
|
|
.omrs-input-filled > .omrs-input-label {
|
|
position: absolute;
|
|
top: 1rem;
|
|
left: 0.875rem;
|
|
line-height: 147.6%;
|
|
color: var(--omrs-color-ink-medium-contrast);
|
|
transition: top 0.2s;
|
|
}
|
|
|
|
.omrs-input-underlined > svg,
|
|
.omrs-input-filled > svg {
|
|
position: absolute;
|
|
top: 1rem;
|
|
right: 0.875rem;
|
|
fill: var(--omrs-color-ink-medium-contrast);
|
|
}
|
|
|
|
.omrs-input-underlined > .omrs-input-helper,
|
|
.omrs-input-filled > .omrs-input-helper {
|
|
font-size: 1rem;
|
|
color: var(--omrs-color-ink-medium-contrast);
|
|
letter-spacing: 0.0275rem;
|
|
margin: 0.125rem 0.875rem;
|
|
}
|
|
|
|
.omrs-input-underlined > input:hover,
|
|
.omrs-input-filled > input:hover {
|
|
background: var(--omrs-color-interaction-minus-two);
|
|
border-color: var(--omrs-color-ink-high-contrast);
|
|
}
|
|
|
|
/* TODO WILL NEED TO DO THIS PROGRAMATICALLY */
|
|
/*
|
|
.omrs-input-underlined > input:focus + .omrs-input-label,
|
|
.omrs-input-underlined > input:valid + .omrs-input-label,
|
|
.omrs-input-filled
|
|
> input:focus
|
|
+ .omrs-input-label
|
|
.omrs-input-filled
|
|
> input:valid
|
|
+ .omrs-input-label {
|
|
top: 0;
|
|
font-size: 1rem;
|
|
margin-bottom: 32px;
|
|
}
|
|
*/
|
|
|
|
/* Programmed version above */
|
|
.omrs-input-underlined > .jumped {
|
|
transition: transform 0.2s ease-out, color 0.2s ease-out,
|
|
-webkit-transform 0.2s ease-out;
|
|
top: -0.6rem;
|
|
font-size: 1rem;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.omrs-input-underlined:not(.omrs-input-danger)
|
|
> input:focus
|
|
+ .omrs-input-label,
|
|
.omrs-input-filled:not(.omrs-input-danger) > input:focus + .omrs-input-label {
|
|
color: var(--omrs-color-interaction);
|
|
}
|
|
|
|
.omrs-input-underlined:not(.omrs-input-danger) > input:focus,
|
|
.omrs-input-filled:not(.omrs-input-danger) > input:focus {
|
|
border-color: var(--omrs-color-interaction);
|
|
}
|
|
|
|
.omrs-input-underlined:not(.omrs-input-danger) > input:focus ~ svg,
|
|
.omrs-input-filled:not(.omrs-input-danger) > input:focus ~ svg {
|
|
fill: var(--omrs-color-ink-high-contrast);
|
|
}
|
|
|
|
/** DISABLED **/
|
|
|
|
.omrs-input-underlined > input:disabled {
|
|
background: var(--omrs-color-bg-low-contrast);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.omrs-input-underlined > input:disabled + .omrs-input-label,
|
|
.omrs-input-underlined > input:disabled ~ .omrs-input-helper {
|
|
color: var(--omrs-color-ink-low-contrast);
|
|
}
|
|
|
|
.omrs-input-underlined > input:disabled ~ svg {
|
|
fill: var(--omrs-color-ink-low-contrast);
|
|
}
|
|
|
|
/** DANGER **/
|
|
|
|
.omrs-input-underlined.omrs-input-danger > .omrs-input-label,
|
|
.omrs-input-underlined.omrs-input-danger > .omrs-input-helper,
|
|
.omrs-input-filled.omrs-input-danger > .omrs-input-label,
|
|
.omrs-input-filled.omrs-input-danger > .omrs-input-helper {
|
|
color: var(--omrs-color-danger);
|
|
}
|