cronapp-framework-js 2.9.3 → 2.9.4-RC.3

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, #383838);
+    color: var(--textColor40, #333333);
     border-radius: var(--borderRadiusSmallest, 5px);
     padding: var(--distanceSmallest, 5px) var(--distanceMedium, 20px);
     box-shadow: none;
@@ -21,7 +21,6 @@ textarea.k-textbox,
     font-size: var(--textNormalSize, 16px);
 }
 
-
 .form-control.k-textbox,
 .input-group .form-control:last-child,
 .k-textbox,
@@ -36,14 +35,7 @@ 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(--colorNeutral90, #828282);
-    box-shadow: none;
-    width: auto;
-    display: flex;
-}
-
-.k-radio-label:before {
-    border-color: var(--colorNeutral90, #828282);
+    border: 1px solid var(--colorLight70, #8c8c8c);
     box-shadow: none;
 }
 
@@ -56,9 +48,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,
@@ -67,28 +59,17 @@ textarea.k-textbox,
     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);
+.cronMultiSelect .k-multiselect-wrap .k-icon:hover {
+    background: var(--colorDefault20, #ACC2E5);
+    color: var(--colorDefault40, #1351b4);
+    border-radius: var(--borderRadiusFull, 99999px);
 }
 
-.input-group .form-control {
+.cronDynamicSelect .k-dropdown-wrap.k-state-hover:n .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;
@@ -96,7 +77,9 @@ 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(--colorNeutral20, #E3E3E3);
+    background: var(--colorLight50, #E3E3E3);
+    box-shadow: none;
+    border-radius: 0;
 }
 
 .k-popup.k-list-container .k-list li.k-state-focused,
@@ -104,27 +87,29 @@ 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(--colorDefault10, #d6daeb);
-    color: var(--colorDefault60, #0e3b84);
+    background: var(--colorDefault40, #1351b4);
+    color: var(--textColorDefault40, #ffffff);
+    border-radius: 0;
 }
 
+.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, #aeb7da);
+    background: var(--colorDefault20, #ACC2E5);
     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;
 }
@@ -156,29 +141,26 @@ 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-label,
-.k-radio-label {
-    margin-bottom: 12px;
+.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: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 {
+    width: 20px;
+    height: 20px;
+    line-height: 20px;
 }
 
 .k-checkbox-label:before {
@@ -186,6 +168,15 @@ textarea.k-textbox,
     padding: 1px;
 }
 
+.k-radio-label {
+    margin-bottom: 12px;
+}
+
+.k-radio-label:before {
+    background: var(--colorNeutral00, #FFFFFF);
+    border-width: 1px;
+}
+
 .k-radio:checked+.k-radio-label:after {
     background: var(--colorDefault40, #1351b4);
     width: calc(var(--textNormalSize, 12px) + 3px);
@@ -197,8 +188,7 @@ textarea.k-textbox,
     padding-right: 5px;
 }
 
-.k-multiselect,
-.k-multiselect.k-state-hover {
+.k-multiselect {
     background: transparent;
 }
 
@@ -228,9 +218,9 @@ textarea.k-textbox,
     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);
+.k-multiselect-wrap .k-button.k-state-hover .k-select,
+.k-multiselect-wrap li.k-button.k-state-hover {
+    background: var(--colorDefault20, #ACC2E5);
     color: var(--colorDefault40, #1351b4);
 }
 
@@ -242,49 +232,11 @@ textarea.k-textbox,
     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 {
+.k-multiselect>.k-multiselect-wrap>.k-i-close,
+.k-dropdown-wrap .k-select .k-icon {
     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;
@@ -294,11 +246,6 @@ input.k-textbox:focus,
     margin-bottom: 0;
 }
 
-*[id^="crn-textinputbutton"] .form-control {
-    display: flex;
-    flex-direction: column;
-}
-
 *[id^="crn-textinputbutton"] .btn i {
     margin-right: 0;
 }
@@ -311,7 +258,6 @@ input.k-textbox:focus,
     position: inherit;
 }
 
-
 /* Dynamic Select Box */
 .cronDynamicSelect {
     background: transparent;
@@ -331,26 +277,22 @@ input.k-textbox:focus,
 div[id^="crn-textinputicon"] .input-group {
     display: flex;
     background: var(--backgroundColor40, #ffffff);
-    color: var(--textColor40, #383838);
+    color: var(--textColor40, #333333);
     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 {
@@ -379,5 +321,225 @@ div[id^="crn-textinputicon"] .input-group .k-button {
 
 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, #3b448e);
+    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;
 }