cronapp-framework-js/css/themes/custom/dsgov/form-dsgov.css

Javascript library for CronApp's projects

/* Forms - General */
.form-control.k-textbox,
.input-group .form-control:last-child,
.k-textbox,
input.k-textbox,
textarea.k-textbox,
.k-multiselect .k-multiselect-wrap,
.k-combobox .k-dropdown-wrap,
.k-autocomplete,
.k-autocomplete.k-state-default,
.mce-tinymce.mce-panel,
.cronDynamicSelect .k-dropdown-wrap,
.k-animation-container .k-dropdown .k-dropdown-wrap {
    background: var(--backgroundColor40, #ffffff);
    color: var(--textColor40, #383838);
    border-radius: var(--borderRadiusSmallest, 5px);
    padding: var(--distanceSmallest, 5px) var(--distanceMedium, 20px);
    box-shadow: none;
    height: auto;
    text-indent: 0;
    font-size: var(--textNormalSize, 16px);
}


.form-control.k-textbox,
.input-group .form-control:last-child,
.k-textbox,
input.k-textbox,
textarea.k-textbox,
.k-multiselect .k-multiselect-wrap,
.k-combobox .k-dropdown-wrap,
.k-autocomplete,
.k-autocomplete.k-state-default,
.cronDynamicSelect .k-dropdown-wrap,
.mce-tinymce.mce-panel,
.k-grid .k-dropdown .k-dropdown-wrap,
.k-animation-container .k-dropdown .k-dropdown-wrap,
.cardinput .k-textbox.form-control {
    border: 1px solid var(--colorNeutral90, #828282);
    box-shadow: none;
    width: auto;
    display: flex;
}

.k-radio-label:before {
    border-color: var(--colorNeutral90, #828282);
    box-shadow: none;
}

.form-control::placeholder,
.form-control.k-textbox::placeholder,
.k-textbox::placeholder,
.k-combobox .k-dropdown-wrap input::placeholder,
.k-autocomplete input::placeholder {
    color: var(--colorNeutral70, #9E9E9E);
    font-style: italic;
}

.form-control:hover,
.form-control.k-textbox:hover,
.k-textbox:hover,
.k-combobox .k-dropdown-wrap.k-state-hover,
.k-autocomplete.k-state-hover,
.cronDynamicSelect .k-dropdown-wrap.k-state-hover,
.k-grid .k-dropdown .k-dropdown-wrap.k-state-hover,
.k-animation-container .k-dropdown .k-dropdown-wrap.k-state-hover {
    background: var(--colorNeutral30, #D5D5D5);
}

.k-multiselect.k-state-focused .k-multiselect-wrap,
.k-combobox .k-dropdown-wrap.k-state-focused,
.k-autocomplete.k-state-focused,
.cronDynamicSelect .k-dropdown-wrap.k-state-focused,
.cronDynamicSelect .k-dropdown-wrap.k-state-active,
.k-checkbox:checked+.k-checkbox-label:before,
.k-grid .k-dropdown .k-dropdown-wrap.k-state-focused,
.k-animation-container .k-dropdown .k-dropdown-wrap.k-state-focused {
    border-color: transparent;
    box-shadow: 0 0 0 3px var(--colorWarning50, #dfb306);
}

.k-radio:checked+.k-radio-label:before {
    border-color: var(--colorNeutral80, #909090);
}

.input-group .form-control {
    z-index: unset;
}

/* Forms - General Dropdown */

.k-popup.k-list-container .k-list-optionlabel {
    border-radius: var(--borderRadiusNone, 0);
    border: 0;
}

.k-popup.k-list-container .k-list li.k-state-hover,
.k-popup.k-list-container .k-list-optionlabel.k-state-hover {
    background: var(--colorNeutral20, #E3E3E3);
}

.k-popup.k-list-container .k-list li.k-state-focused,
.k-popup.k-list-container .k-list li.k-state-selected,
.k-popup.k-list-container .k-list-optionlabel.k-state-focused,
.k-popup.k-list-container .k-list-optionlabel.k-state-selected {
    box-shadow: none;
    background: var(--colorDefault10, #d6daeb);
    color: var(--colorDefault60, #0e3b84);
}


.k-combobox .k-dropdown-wrap .k-icon {
    color: var(--colorDefault40, #1351b4);
}

.k-autocomplete>.k-i-close:hover,
.k-combobox .k-dropdown-wrap .k-icon:hover {
    background: var(--colorDefault20, #aeb7da);
    color: var(--colorDefault40, #1351b4);
    padding: 7px;
    border-radius: var(--borderRadiusMedium, 20px);
}

.k-autocomplete>.k-i-close:hover {
    margin-right: 0px;
}

.k-autocomplete>.k-i-close {
    margin-right: 7px;
}

/* Forms - Combobox */
.k-combobox {
    background: transparent;
}

.k-combobox span.k-dropdown-wrap.k-state-active.k-state-border-down {
    box-shadow: none;
    border-color: var(--colorNeutral90, #828282);
}

.k-combobox span.k-dropdown-wrap>span>span {
    display: none;
}

.k-combobox span.k-dropdown-wrap input.k-input,
.k-autocomplete.k-state-default input.k-input {
    background: transparent;
    box-shadow: none;
    text-indent: 0;
    padding: 0;
}

/* Forms - Autocomplete */
.k-autocomplete.k-state-hover {
    background: var(--colorNeutral30, #D5D5D5);
}

.k-autocomplete.k-state-focused {
    border-color: transparent;
    box-shadow: 0 0 0 3px var(--colorWarning50, #dfb306);
}

/* Forms - Checkbox and Radio Buttons */
.k-checkbox-label,
.k-radio-label {
    margin-bottom: 12px;
}

.k-checkbox-label:before {
    border-radius: var(--borderRadiusSmallest, 5px);
}

.k-radio-label:before {
    background: var(--colorNeutral00, #FFFFFF);
    border-width: 1px;
}

.k-checkbox-label {
    padding: 1px;
    padding-left: 34px;
}

.k-checkbox-label:before {
    color: var(--colorDefault40, #1351b4);
    padding: 1px;
}

.k-radio:checked+.k-radio-label:after {
    background: var(--colorDefault40, #1351b4);
    width: calc(var(--textNormalSize, 12px) + 3px);
    height: calc(var(--textNormalSize, 12px) + 3px);
}

/* Forms - Multiselect */
.k-multiselect-wrap .k-select {
    padding-right: 5px;
}

.k-multiselect,
.k-multiselect.k-state-hover {
    background: transparent;
}

.k-multiselect .k-multiselect-wrap.k-floatwrap {
    border-radius: var(--borderRadiusSmallest, 5px);
    border-color: var(--colorNeutral90, #828282);
}

.k-multiselect.k-state-focused .k-multiselect-wrap {
    border-color: transparent;
}

.k-multiselect .k-multiselect-wrap input {
    min-height: auto;
    padding: 0;
}

.k-multiselect .k-multiselect-wrap li,
.k-multiselect .k-multiselect-wrap li:focus {
    padding: 0 25px 0 12px;
    font-size: var(--textNormalSize, 16px);
    min-height: 30px;
    margin-right: 5px;
}

.k-multiselect .k-multiselect-wrap li.k-button:active {
    box-shadow: none;
}

.k-multiselect .k-multiselect-wrap .k-button.k-state-hover .k-select,
.k-multiselect .k-multiselect-wrap li.k-button.k-state-hover {
    background: var(--colorDefault10, #d6daeb);
    color: var(--colorDefault40, #1351b4);
}

.k-multiselect .k-multiselect-wrap li.k-button .k-select {
    background: transparent;
}

.k-multiselect .k-multiselect-wrap li.k-button .k-icon {
    margin-top: -10px;
}

.k-multiselect>.k-multiselect-wrap>.k-i-close {
    top: 14px;
}

/* Forms -  Password */
.cardinput {
    border: 0;
    padding: 0;
}

.cardinput .k-textbox.form-control {
    border: 1px solid var(--colorNeutral90, #828282);
    padding-right: 44px;
}

input.k-textbox:focus,
.cardinput .k-textbox.form-control:focus {
    border-color: transparent;
    box-shadow: 0 0 0 3px var(--colorWarning50, #dfb306);
}

.cardinput button i:before {
    color: var(--colorDefault40, #1351b4);
}

.cardinput button {
    margin-left: -51px;
    position: relative;
    padding: 0px 11px;
}

.cardinput button:hover {
    margin-left: -58px;
    margin-top: 1px;
}

.cardinput button:hover i {
    background: var(--colorDefault10, #d6daeb);
    color: var(--colorDefault40, #1351b4);
    border-radius: 50%;
    padding: 7px;
}

/* Form - Text Input Button */
*[id^="crn-textinputbutton"] .crn-textinputbutton {
    align-items: end;
}

*[id^="crn-textinputbutton"] .form-group {
    margin-bottom: 0;
}

*[id^="crn-textinputbutton"] .form-control {
    display: flex;
    flex-direction: column;
}

*[id^="crn-textinputbutton"] .btn i {
    margin-right: 0;
}

*[id^="crn-textinputbutton"] div[data-component="crn-button"] {
    margin-bottom: 0;
}

.btn i {
    position: inherit;
}


/* Dynamic Select Box */
.cronDynamicSelect {
    background: transparent;
}

.cronDynamicSelect .k-dropdown-wrap .k-input {
    display: inline;
}

/* User Grid Search Input */
#crn-datasource-filter-general .form-group input {
    width: 100%;
}

/* Input with icon - crn-textinputicon */

div[id^="crn-textinputicon"] .input-group {
    display: flex;
    background: var(--backgroundColor40, #ffffff);
    color: var(--textColor40, #383838);
    border-radius: var(--borderRadiusSmallest, 5px);
    padding: 0 10px;
    border: 1px solid var(--colorNeutral90, #828282);
    width: min-content;
}

div[id^="crn-textinputicon"] .input-group:hover {
    background: var(--colorNeutral30, #D5D5D5);
}

div[id^="crn-textinputicon"] .input-group:focus-within {
    border-color: transparent;
    box-shadow: 0 0 0 3px var(--colorWarning50, #dfb306);
}

div[id^="crn-textinputicon"] .input-group .k-textbox {
    border: 0;
    box-shadow: none;
    background: transparent;
}

div[id^="crn-textinputicon"] .input-group .k-button {
    padding: 8px 4px;
    background: transparent;
    color: var(--colorNeutral90, #828282);
}

#starter div[id^="crn-form"] input {
    margin-bottom: 4px;
}