While Aios is equipped with a comprehensive design system, SMART Referrals operate with a distinct set of designs specifically tailored for its forms.
This is due to the high level of customisation available to meet client specifications, requiring a more neutral design approach for SMART Referral controls.
Elements such as form fields, labels, colours and spacing can be extensively customised within MeDEdit.
Consequently, when Aios renders these forms, it must inherit and adapt many of these customisable properties to ensure alignment with the client's unique requirements.
For general Aios fields, used in dialogues and any elements not created in MedEdit itself, see Aios Fields and Controls
Examples of Empty Fields
Examples of Populated Fields
/*Fields*/
/*Container and elements*/
.rdoc-field-container {
display: flex;
margin: 10px 10px;
flex-direction: column;
max-width: 300px;
position: relative;
}
.rdoc-field-label {
font-size: 12px;
color: var(--Black);
font-family: var(--rdoc-font-family);
margin-bottom: 5px;
}
.rdoc-field::placeholder {
color: var(--Grey-md);
font-family: var(--rdoc-font-family);
font-size: 12px;
}
.rdoc-field-base::placeholder {
color: var(--Grey-md);
}
/*Normal field*/
.rdoc-field-base {
padding: 5px; /*Only here for neatness on website*/
font-size: 12px;
color: var(--Black);
background-color: var(--SeaBlue-xl);
border: solid 2px var(--SeaBlue-xl);
font-family: var(--rdoc-font-family);
outline: none;
transition: 0s;
}
.rdoc-field-base:hover {
background-color: var(--SeaBlue-l);
border-color: var(--SeaBlue-l);
}
.rdoc-field-base:focus {
border-color: var(--SeaBlue);
background-color: var(--SeaBlue-l);
}
.rdoc-field-base:disabled {
background-color: var(--Grey-xxl);
border-color: var(--Grey-xxl);
color: var(--Grey-d);
}
/*Required Field*/
.rdoc-field-required {
@extend .rdoc-field-base;
background-color: var(--Red-xl);
border: solid 2px var(--Red-xl);
}
.rdoc-field-required:hover {
@extend .rdoc-field-base;
background-color: var(--Red-l);
border-color: var(--Red-l);
}
.rdoc-field-required:focus {
@extend .rdoc-field-base;
border-color: var(--Red);
background-color: var(--Red-l);
}
/*Recommended Field*/
.rdoc-field-rec {
@extend .rdoc-field-base;
background-color: var(--PuertoRico-xl);
border: solid 2px var(--PuertoRico-xl);
}
.rdoc-field-rec:hover {
@extend .rdoc-field-base;
background-color: var(--PuertoRico-l);
border-color: var(--PuertoRico-l);
}
.rdoc-field-rec:focus {
@extend .rdoc-field-base;
border-color: var(--PuertoRico);
background-color: var(--PuertoRico-l);
}
/*Input error Field*/
.rdoc-field-error {
@extend .rdoc-field-base;
background-color: var(--Yellow-xl);
border: solid 2px var(--Yellow-xl);
}
.rdoc-field-error:hover {
@extend .rdoc-field-base;
background-color: var(--Yellow-l);
border-color: var(--Yellow-l);
}
.rdoc-field-error:focus {
@extend .rdoc-field-base;
border-color: var(--Yellow);
background-color: var(--Yellow-l);
}
/*Checkboxes, Tickboxes and Radios*/
.RDOC-checkbox-container,
.RDOC-tickbox-container,
.rdoc-radio-container {
display: flex;
align-items: center;
margin: 2px 2px 2px 2px;
}
.checkbox-RDOC,
.tickbox-RDOC,
.radio-rdoc {
appearance: none;
cursor: pointer;
background-color: transparent;
width: 18px;
height: 18px;
border: 2px solid black;
position: relative;
flex: 0 0 auto;
box-sizing: border-box;
}
.checkbox-RDOC + label,
.tickbox-RDOC + label,
.radio-rdoc + label {
cursor: pointer;
font-size: 12px;
font-family: var(--rdoc-font-family);
margin-left: 5px; /*Just added here for website neatness*/
}
.checkbox-RDOC:disabled,
.tickbox-RDOC:disabled,
.radio-rdoc:disabled {
cursor: not-allowed;
border: 2px solid var(--Grey-m);
background-color: var(--Grey-xl);
}
.checkbox-RDOC:disabled + label,
.tickbox-RDOC:disabled + label,
.radio-rdoc:disabled + label {
color: var(--Grey-d);
cursor: not-allowed;
}
.checkbox-RDOC:indeterminate,
.tickbox-RDOC:indeterminate {
background-color: transparent;
}
.checkbox-RDOC:indeterminate::after,
.tickbox-RDOC:indeterminate::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 9px;
height: 9px;
background: var(--Grey-ml);
border: none;
align-items: center;
}
.checkbox-RDOC:checked,
.tickbox-RDOC:checked,
.radio-rdoc:checked {
background-color: transparent;
border: 2px solid black;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.checkbox-RDOC:checked:disabled,
.tickbox-RDOC:checked:disabled,
.radio-rdoc:checked:disabled {
border: 2px solid var(--Grey-m);
background-color: var(--Grey-xl);
}
/*Radio buttons*/
.radio-rdoc {
border-radius: 50%;
position: relative;
flex: 0 0 auto;
}
.radio-rdoc:checked::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 9px;
height: 9px;
background-color: var(--Grey-md);
border-radius: 50%;
transform: translate(-50%, -50%);
}
.radio-rdoc:checked:disabled::after {
background-color: var(--Grey-md);
}