cronapp-framework-js 2.9.4-RC.3 → 2.9.4-SP.2

package/css/themes/custom/dsgov/form-dsgov.css

@@ -12,7 +12,7 @@ textarea.k-textbox,
 .cronDynamicSelect .k-dropdown-wrap,
 .k-animation-container .k-dropdown .k-dropdown-wrap {
     background: var(--backgroundColor40, #ffffff);
-    color: var(--textColor40, #333333);
+    color: var(--textColor40, #383838);
     border-radius: var(--borderRadiusSmallest, 5px);
     padding: var(--distanceSmallest, 5px) var(--distanceMedium, 20px);
     box-shadow: none;
@@ -21,6 +21,7 @@ textarea.k-textbox,
     font-size: var(--textNormalSize, 16px);
 }
 
+
 .form-control.k-textbox,
 .input-group .form-control:last-child,
 .k-textbox,
@@ -35,7 +36,14 @@ textarea.k-textbox,
 .k-grid .k-dropdown .k-dropdown-wrap,
 .k-animation-container .k-dropdown .k-dropdown-wrap,
 .cardinput .k-textbox.form-control {
-    border: 1px solid var(--colorLight70, #8c8c8c);
+    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;
 }
 
@@ -48,9 +56,9 @@ textarea.k-textbox,
     font-style: italic;
 }
 
+.form-control:hover,
 .form-control.k-textbox:hover,
 .k-textbox:hover,
-.cronMultiSelect.k-state-hover .k-multiselect-wrap,
 .k-combobox .k-dropdown-wrap.k-state-hover,
 .k-autocomplete.k-state-hover,
 .cronDynamicSelect .k-dropdown-wrap.k-state-hover,
@@ -59,17 +67,28 @@ textarea.k-textbox,
     background: var(--colorNeutral30, #D5D5D5);
 }
 
-.cronMultiSelect .k-multiselect-wrap .k-icon:hover {
-    background: var(--colorDefault20, #ACC2E5);
-    color: var(--colorDefault40, #1351b4);
-    border-radius: var(--borderRadiusFull, 99999px);
+.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);
 }
 
-.cronDynamicSelect .k-dropdown-wrap.k-state-hover:n .input-group .form-control {
+.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;
@@ -77,9 +96,7 @@ textarea.k-textbox,
 
 .k-popup.k-list-container .k-list li.k-state-hover,
 .k-popup.k-list-container .k-list-optionlabel.k-state-hover {
-    background: var(--colorLight50, #E3E3E3);
-    box-shadow: none;
-    border-radius: 0;
+    background: var(--colorNeutral20, #E3E3E3);
 }
 
 .k-popup.k-list-container .k-list li.k-state-focused,
@@ -87,29 +104,27 @@ textarea.k-textbox,
 .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(--colorDefault40, #1351b4);
-    color: var(--textColorDefault40, #ffffff);
-    border-radius: 0;
+    background: var(--colorDefault10, #d6daeb);
+    color: var(--colorDefault60, #0e3b84);
 }
 
-.k-list>.k-state-hover,
-.k-popup .k-list .k-state-focused {
-    border-radius: 0;
-}
 
-.k-autocomplete>.k-i-close,
 .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, #ACC2E5);
+    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;
 }
@@ -141,40 +156,34 @@ textarea.k-textbox,
     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:focus+.k-checkbox-label:before,
-.k-checkbox:focus+.k-checkbox-label:hover:before,
-.k-checkbox:checked+.k-checkbox-label:active:before,
-.k-checkbox:checked:active+.k-checkbox-label:before,
-.k-checkbox-label:hover:before,
-.k-checkbox:checked+.k-checkbox-label:hover:before,
-.k-checkbox:checked:hover+.k-checkbox-label:before,
-.k-checkbox:hover+.k-checkbox-label:before {
-    box-shadow: none;
+.k-checkbox-label,
+.k-radio-label {
+    margin-bottom: 12px;
 }
 
 .k-checkbox-label:before {
     border-radius: var(--borderRadiusSmallest, 5px);
 }
 
-.k-checkbox-label:before {
-    width: 20px;
-    height: 20px;
-    line-height: 20px;
+.k-radio-label:before {
+    background: var(--colorNeutral00, #FFFFFF);
+    border-width: 1px;
 }
 
-.k-checkbox-label:before {
-    color: var(--colorDefault40, #1351b4);
+.k-checkbox-label {
     padding: 1px;
+    padding-left: 34px;
 }
 
-.k-radio-label {
-    margin-bottom: 12px;
-}
-
-.k-radio-label:before {
-    background: var(--colorNeutral00, #FFFFFF);
-    border-width: 1px;
+.k-checkbox-label:before {
+    color: var(--colorDefault40, #1351b4);
+    padding: 1px;
 }
 
 .k-radio:checked+.k-radio-label:after {
@@ -188,7 +197,8 @@ textarea.k-textbox,
     padding-right: 5px;
 }
 
-.k-multiselect {
+.k-multiselect,
+.k-multiselect.k-state-hover {
     background: transparent;
 }
 
@@ -218,9 +228,9 @@ textarea.k-textbox,
     box-shadow: none;
 }
 
-.k-multiselect-wrap .k-button.k-state-hover .k-select,
-.k-multiselect-wrap li.k-button.k-state-hover {
-    background: var(--colorDefault20, #ACC2E5);
+.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);
 }
 
@@ -232,11 +242,49 @@ textarea.k-textbox,
     margin-top: -10px;
 }
 
-.k-multiselect>.k-multiselect-wrap>.k-i-close,
-.k-dropdown-wrap .k-select .k-icon {
+.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;
@@ -246,6 +294,11 @@ textarea.k-textbox,
     margin-bottom: 0;
 }
 
+*[id^="crn-textinputbutton"] .form-control {
+    display: flex;
+    flex-direction: column;
+}
+
 *[id^="crn-textinputbutton"] .btn i {
     margin-right: 0;
 }
@@ -258,6 +311,7 @@ textarea.k-textbox,
     position: inherit;
 }
 
+
 /* Dynamic Select Box */
 .cronDynamicSelect {
     background: transparent;
@@ -277,22 +331,26 @@ textarea.k-textbox,
 div[id^="crn-textinputicon"] .input-group {
     display: flex;
     background: var(--backgroundColor40, #ffffff);
-    color: var(--textColor40, #333333);
+    color: var(--textColor40, #383838);
     border-radius: var(--borderRadiusSmallest, 5px);
     padding: 0 10px;
     border: 1px solid var(--colorNeutral90, #828282);
-    /* width: min-content; */
+    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;
-    width: 100%;
 }
 
 div[id^="crn-textinputicon"] .input-group .k-button {
@@ -303,243 +361,4 @@ div[id^="crn-textinputicon"] .input-group .k-button {
 
 #starter div[id^="crn-form"] input {
     margin-bottom: 4px;
-}
-
-/* Input with icon */
-.layout-template-modern:focus-within {
-    border: 1px solid var(--colorNeutral90, #828282);
-    background: var(--backgroundColor40, #ffffff);
-}
-
-.layout-template-modern input.k-textbox {
-    padding-left: 5px;
-}
-
-.layout-template-modern.input-group .k-button {
-    padding: 0px 14px;
-}
-
-div[id^="crn-textinputicon"] .input-group.layout-template-modern .k-button:hover,
-div[id^="crn-textinputicon"] .input-group.layout-template-modern .k-button {
-    color: var(--colorDefault40, #1351b4);
-}
-
-/*==== Combobox ====*/
-
-/* Primary */
-.combobox-primary .k-multiselect .k-button {
-    background: transparent;
-    color: var(--colorPrimary40, #1351b4);
-    border: 1px solid var(--colorPrimary40, #1351b4);
-}
-
-
-.combobox-primary .k-multiselect-wrap .k-button.k-state-hover .k-select,
-.combobox-primary .k-multiselect-wrap .k-button:hover {
-    background: var(--colorPrimary10, #C3CDDD);
-    color: var(--colorPrimary40, #1351b4);
-    border: 1px solid var(--colorPrimary40, #1351b4);
-}
-
-/* success */
-.combobox-success .k-multiselect .k-button {
-    border-color: transparent;
-}
-
-.combobox-success .k-multiselect-wrap .k-button.k-state-hover .k-select,
-.combobox-success .k-multiselect-wrap .k-button:hover {
-    color: var(--textColorSuccess40, #ffffff);
-    background: var(--colorSuccess50, #13771d);
-    border-color: var(--colorSuccess50, #13771d);
-}
-
-/* info */
-.combobox-info .k-multiselect .k-button {
-    border-color: transparent;
-}
-
-.combobox-info .k-multiselect-wrap .k-button.k-state-hover .k-select,
-.combobox-info .k-multiselect-wrap .k-button:hover {
-    color: var(--textColorCalm40, #ffffff);
-    background: var(--colorCalm50, #1250b2);
-    border-color: var(--colorCalm50, #1250b2);
-}
-
-/* warning */
-.combobox-warning .k-multiselect .k-button {
-    border-color: transparent;
-}
-
-.combobox-warning .k-multiselect-wrap .k-button.k-state-hover .k-select,
-.combobox-warning .k-multiselect-wrap .k-button:hover {
-    color: var(--textColorWarning40, #ffffff);
-    background: var(--colorWarning50, #dfb306);
-    border-color: transparent;
-}
-
-/* danger */
-.combobox-danger .k-multiselect .k-button {
-    border-color: transparent;
-}
-
-.combobox-danger .k-multiselect-wrap .k-button.k-state-hover .k-select,
-.combobox-danger .k-multiselect-wrap .k-button:hover {
-    color: var(--textColorDanger40, #ffffff);
-    background: var(--colorDanger50, #c91e06);
-    border-color: transparent;
-}
-
-/* light */
-.combobox-light .k-multiselect .k-button {
-    background: var(--colorLight40, #ffffff);
-    border: 1px solid var(--colorLight50, #dfdfdf);
-    color: var(--textColorLight40, #333333);
-}
-
-.combobox-light .k-multiselect-wrap .k-button.k-state-hover .k-select,
-.combobox-light .k-multiselect-wrap .k-button:hover {
-    color: var(--textColorLight40, #333333);
-    background: var(--colorLight50, #dfdfdf);
-    border-color: transparent;
-}
-
-/* Stable */
-.combobox-stable .k-multiselect .k-button {
-    background: var(--colorStable40, #f8f8f8);
-    border-color: transparent;
-    color: var(--textColorStable40, #333333);
-}
-
-.combobox-stable .k-multiselect-wrap .k-button.k-state-hover .k-select,
-.combobox-stable .k-multiselect-wrap .k-button:hover {
-    color: var(--textColorStable40, #333333);
-    background: var(--colorStable50, #d9d9d9);
-    border-color: transparent;
-}
-
-/* Royal */
-.combobox-royal .k-multiselect .k-button {
-    border-color: transparent;
-}
-
-.combobox-royal .k-multiselect-wrap .k-button.k-state-hover .k-select,
-.combobox-royal .k-multiselect-wrap .k-button:hover {
-    color: var(--textColorRoyal40, #ffffff);
-    background: var(--colorRoyal50, #7778c0);
-    border-color: transparent;
-}
-
-/* Dark */
-.combobox-dark .k-multiselect .k-button {
-    border-color: transparent;
-}
-
-.combobox-dark .k-multiselect-wrap .k-button.k-state-hover .k-select,
-.combobox-dark .k-multiselect-wrap .k-button:hover {
-    color: var(--textColorDark40, #ffffff);
-    background: var(--colorDark50, #061939);
-    border-color: transparent;
-}
-
-.k-picker-wrap.k-state-default,
-form.k-filter-menu .k-textbox {
-    border: 1px solid var(--colorLight70, #8c8c8c);
-    border-radius: var(--borderRadiusSmallest, 5px);
-}
-
-.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-grid .k-dropdown .k-dropdown-wrap.k-state-focused,
-.k-animation-container .k-dropdown .k-dropdown-wrap.k-state-focused,
-.k-autocomplete.k-state-focused,
-div[id^="crn-textinputicon"] .input-group:focus-within,
-textarea.k-textbox:focus,
-input.k-textbox:focus,
-.cardinput:focus-within,
-.k-picker-wrap.k-state-default.k-state-focused {
-    border-color: transparent;
-    box-shadow: 0 0 0 3px var(--colorWarning60, #bb9605);
-}
-
-input:-webkit-autofill:focus{
-    -webkit-box-shadow: 0 0 0 3px var(--colorWarning60, #bb9605) !important;
-}
-
-.cardinput:focus-within input {
-    box-shadow: none;
-}
-
-.k-picker-wrap.k-state-default.k-state-hover,
-form.k-filter-menu .k-textbox:hover {
-    background: var(--colorNeutral30, #D5D5D5);
-}
-
-.k-multiselect-wrap .k-button.k-state-hover .k-select {
-    border: 0 !important;
-    background: transparent !important;
-}
-
-.k-list-container,
-.k-popup .k-list .k-item {
-    background: var(--backgroundColor40, #ffffff);
-    border-color: var(--colorLight50, #dfdfdf);
-}
-
-div[data-component="crn-textinputicon"] .form-group {
-    margin-bottom: 5px;
-}
-
-div[data-component="crn-textinputicon"] .form-group,
-.form-group label {
-    font-weight: 600;
-}
-
-.form-group .k-checkbox-label {
-    font-weight: 400;
-}
-
-/* Forms -  Password */
-.cardinput {
-    border: 1px solid var(--colorNeutral90, #828282);
-    padding: 0;
-}
-
-.cardinput .k-textbox.form-control {
-    border: 0;
-    padding: var(--distanceSmallest, 5px) var(--distanceMedium, 20px);
-    padding-right: 44px;
-    background: transparent;
-}
-
-.cardinput button i:before {
-    color: var(--colorDefault40, #1351b4);
-}
-
-.cardinput:hover {
-    background: var(--colorNeutral30, #D5D5D5);
-}
-
-.cardinput:hover input {
-    background: transparent;
-}
-
-.cardinput button i {
-    padding: 7px;
-    border-radius: 50%;
-}
-
-.cardinput button:hover i:hover,
-.cardinput button:hover i {
-    background: var(--colorDefault20, #ACC2E5);
-    color: var(--colorDefault40, #1351b4);
-}
-
-.k-combobox>.k-dropdown-wrap>.k-i-close,
-.k-autocomplete>.k-i-close,
-.k-multiselect-wrap>.k-i-close {
-    right: 6px;
-    padding: 7px;
 }