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

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

@@ -25,10 +25,6 @@
     padding: 0;
 }
 
-.bootstrap-datetimepicker-widget.dropdown-menu.timepicker-sbs {
-    width: 100%;
-}
-
 .bootstrap-datetimepicker-widget table td.day {
     border-radius: var(--borderRadiusMedium, 20px);
     font-weight: 600;
@@ -41,8 +37,8 @@
 .bootstrap-datetimepicker-widget table td span.timepicker-hour,
 .bootstrap-datetimepicker-widget table td span.timepicker-minute,
 .bootstrap-datetimepicker-widget table td span.timepicker-second {
-    color: var(--textColor40, #383838);
-    border: 1px solid var(--textColor40, #383838);
+    color: var(--textColor40, #333333);
+    border: 1px solid var(--colorLight60, #bbbbbb);
     border-radius: var(--borderRadiusSmallest, 5px) !important;
     width: 50px !important;
     height: 50px !important;
@@ -79,7 +75,7 @@
 }
 
 .bootstrap-datetimepicker-widget table th {
-    color: var(--textColor40, #383838);
+    color: var(--textColor40, #333333);
     font-weight: 400;
 }
 
@@ -93,18 +89,33 @@
     background: transparent;
 }
 
-/* Data e hora */
+/* seta do modal do calendario */
+.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
+    border-bottom-color: var(--backgroundColor40, #ffffff);
+}
+
+.bootstrap-datetimepicker-widget.dropdown-menu.top:after {
+    border-top-color: var(--backgroundColor40, #ffffff);
+}
 
+.bootstrap-datetimepicker-widget.dropdown-menu.bottom::before {
+    border-bottom-color: transparent;
+}
+
+.bootstrap-datetimepicker-widget.dropdown-menu.top::before {
+    border-top-color: transparent;
+}
+
+/* Data e hora */
 *[id^="crn-datepicker"] .form-group label+div,
 *[id^="crn-timepicker"] .form-group label+div,
 *[id^="crn-datetimepicker"] .form-group label+div {
     background: var(--backgroundColor40, #ffffff);
-    color: var(--textColor40, #383838);
+    color: var(--textColor40, #333333);
     border-radius: var(--borderRadiusSmallest, 5px);
     padding: var(--distanceSmallest, 5px) var(--distanceSmall, 20px);
     border: 1px solid var(--colorNeutral90, #828282);
     box-shadow: none;
-    width: min-content;
     display: flex;
 }
 
@@ -112,7 +123,6 @@
 *[id^="crn-timepicker"] .form-group label+div input,
 *[id^="crn-datetimepicker"] .form-group label+div input {
     border: 0;
-    width: min-content;
     padding: 0 4px;
     background: transparent;
 }
@@ -139,7 +149,7 @@
 *[id^="crn-timepicker"] .form-group label+div:focus,
 *[id^="crn-datetimepicker"] .form-group label+div:focus {
     border-color: transparent;
-    box-shadow: 0 0 0 3px var(--colorWarning50, #ffcd07);
+    box-shadow: 0 0 0 3px var(--colorWarning50, #dfb306);
 }
 
 *[id^="crn-datepicker"] .form-group label+div input:hover,
@@ -159,7 +169,8 @@ cron-calendar.k-calendar .k-footer,
 cron-calendar.k-calendar .k-header,
 .k-calendar .k-footer .k-nav-today {
     background: var(--backgroundColor40, #ffffff);
-    color: var(--textColor40, #383838);
+    color: var(--colorDefault40, #1351b4);
+    font-weight: 600;
 }
 
 .k-calendar td.k-state-hover,
@@ -167,7 +178,8 @@ cron-calendar.k-calendar .k-header,
 .k-calendar .k-header .k-link.k-nav-next,
 .k-calendar .k-header .k-link.k-nav-prev,
 .k-calendar .k-header .k-icon {
-    color: var(--textColor40, #383838);
+    color: var(--colorDefault40, #1351b4);
+    font-weight: 600;
 }
 
 cron-calendar.k-widget {
@@ -181,51 +193,111 @@ cron-calendar.k-widget {
 .k-calendar .k-footer .k-nav-today:hover {
     background: var(--backgroundColor50, #dfdfdf);
     box-shadow: none;
+    color: var(--colorDefault40, #1351b4);
 }
 
 .k-calendar th {
-    background: var(--backgroundColor50, #dfdfdf);
+    background: transparent;
+    font-weight: 600;
+    border: 0;
 }
 
+.k-calendar td.k-state-selected,
 .k-calendar td.k-state-hover,
 .k-calendar td.k-state-focused.k-state-selected.k-state-hover,
 .k-calendar .k-state-selected.k-state-hover,
 .k-listview>.k-state-focused.k-state-selected,
 .k-state-selected td.k-state-focused,
-td.k-state-focused.k-state-selected,
-.k-state-selected {
-    box-shadow: inset 0 0 10px 3px var(--colorDefault30, #7c8ec8);
+td.k-state-focused.k-state-selected {
+    box-shadow: none;
+    border-radius: 50%;
+    background: var(--colorDefault10, #d6daeb);
+    color: var(--colorDefault40, #1351b4);
 }
 
-.k-calendar td.k-state-hover .k-link {
-    color: var(--textColor40, #383838);
+.k-calendar .k-content .k-link,
+.k-calendar .k-content,
+.k-calendar .k-content th {
+    text-align: center;
+    padding: 0;
 }
 
-.k-calendar .k-today.k-state-selected.k-state-hover{
-    background: var(--colorDefault10, #d6daeb);
+.bootstrap-datetimepicker-widget table td.active,
+.bootstrap-datetimepicker-widget table td.active:hover,
+.k-calendar .k-today.k-state-selected {
+    background: var(--colorDanger10, #f7d6d5);
+    border-color: var(--colorDanger10, #f7d6d5);
+    color: var(--colorDanger70, #7d1304);
+    border-radius: 99999px;
+    text-shadow: none;
+}
+
+.bootstrap-datetimepicker-widget table td.active,
+.bootstrap-datetimepicker-widget table td.active:hover {
+    border-color: transparent;
+}
+
+.k-calendar .k-content .k-other-month .k-link,
+.k-calendar .k-link,
+.k-scheduler-navigation .k-nav-next .k-link,
+.k-scheduler-navigation .k-nav-prev .k-link,
+.k-scheduler-header th,
+.k-scheduler-header-wrap,
+.k-scheduler-table td,
+.k-scheduler-times,
+.k-scheduler-times th,
+.k-scheduler-times tr {
+    color: var(--colorDefault40, #1351b4);
 }
 
 .k-calendar .k-content .k-other-month .k-link {
-    color: var(--textColor30, #858585);
+    color: var(--colorDefault30, #5A85CB);
 }
 
-.k-calendar td.k-state-selected {
-    background: transparent;
+.k-calendar .k-today.k-state-selected .k-link {
+    color: var(--colorDanger70, #7d1304);
 }
 
-/* seta do modal do calendario */
-.bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
-    border-bottom-color: var(--backgroundColor40, #ffffff);
+.k-calendar td {
+    border-radius: 50%;
 }
 
-.bootstrap-datetimepicker-widget.dropdown-menu.top:after {
-    border-top-color: var(--backgroundColor40, #ffffff);
+.k-calendar td.k-state-hover .k-link {
+    color: var(--colorDefault40, #1351b4);
 }
 
-.bootstrap-datetimepicker-widget.dropdown-menu.bottom::before {
-    border-bottom-color: transparent;
+.k-calendar .k-today.k-state-selected.k-state-hover {
+    background: var(--colorDefault10, #d6daeb);
 }
 
-.bootstrap-datetimepicker-widget.dropdown-menu.top::before {
-    border-top-color: transparent;
+.bootstrap-datetimepicker-widget table th {
+    font-weight: 400;
+    text-transform: capitalize;
+}
+
+.k-calendar .k-content td:not(.k-other-month) .k-link {
+    font-weight: 500;
+}
+
+.bootstrap-datetimepicker-widget table td span.active {
+    background-color: var(--colorDefault40, #1351b4);
+    color: var(--textColorDefault40, #ffffff);
+    text-shadow: none;
+}
+
+@media only screen and (max-width: 1024px) {
+
+    .k-scheduler .k-scheduler-toolbar ul .k-nav-current.k-state-hover .k-link .k-icon,
+    .k-scheduler .k-scheduler-toolbar ul .k-nav-current.k-state-hover .k-link,
+    .k-scheduler-navigation .k-nav-next .k-icon,
+    .k-scheduler-toolbar>ul .k-link,
+    .k-calendar .k-state-selected.k-state-hover .k-link,
+    .k-edge .k-scheduler-toolbar>ul.k-scheduler-views>li.k-current-view>.k-link,
+    .k-ff .k-scheduler-toolbar>ul.k-scheduler-views>li.k-current-view>.k-link,
+    .k-ie11 .k-scheduler-toolbar>ul.k-scheduler-views>li.k-current-view>.k-link,
+    .k-safari .k-scheduler-toolbar>ul.k-scheduler-views>li.k-current-view>.k-link,
+    .k-webkit .k-scheduler-toolbar>ul.k-scheduler-views>li.k-current-view>.k-link {
+        color: var(--colorDefault40, #1351b4);
+    }
+
 }

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

@@ -0,0 +1,309 @@
+.k-checkbox-label:before {
+    border-width: 1.5px;
+}
+
+.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,
+.checkbox-default .k-checkbox-label:hover:before,
+.checkbox-default .k-checkbox:checked+.k-checkbox-label:hover:before,
+.checkbox-default .k-checkbox:checked:hover+.k-checkbox-label:before,
+.checkbox-default .k-checkbox:hover+.k-checkbox-label:before,
+.k-checkbox:focus+.k-checkbox-label:before,
+.checkbox-default .k-checkbox:focus+.k-checkbox-label:before,
+.checkbox-default:hover .k-checkbox-label:before {
+    background: var(--colorDefault10, #d6daeb);
+    border-color: var(--colorLight60, #bbbbbb);
+}
+
+/* Efeito hover */
+.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,
+.k-checkbox:hover+.k-checkbox-label:before,
+.checkbox-default .k-checkbox-label:hover:before,
+.checkbox-default .k-checkbox:checked+.k-checkbox-label:hover:before,
+.checkbox-default .k-checkbox:checked:hover+.k-checkbox-label:before,
+.checkbox-default .k-checkbox:hover+.k-checkbox-label:before,
+.checkbox-default .k-checkbox:focus+.k-checkbox-label:before,
+.checkbox-default .k-checkbox:hover+.k-checkbox-label:before,
+.checkbox-primary .k-checkbox:checked+.k-checkbox-label:before,
+.checkbox-primary .k-checkbox:indeterminate+.k-checkbox-label:before,
+.checkbox-primary .k-checkbox-label:hover:before,
+.checkbox-primary .k-checkbox:checked+.k-checkbox-label:hover:before,
+.checkbox-primary .k-checkbox:checked:hover+.k-checkbox-label:before,
+.checkbox-primary .k-checkbox-label:active:before,
+.checkbox-primary .k-checkbox:active+.k-checkbox-label:before,
+.checkbox-primary .k-checkbox:focus+.k-checkbox-label:before,
+.checkbox-primary .k-checkbox:hover+.k-checkbox-label:before,
+.checkbox-primary .k-checkbox:checked+.k-checkbox-label:after,
+.checkbox-primary .k-checkbox:indeterminate+.k-checkbox-label:after,
+.checkbox-primary .k-checkbox-label:before,
+.checkbox-success .k-checkbox:checked+.k-checkbox-label:before,
+.checkbox-success .k-checkbox:indeterminate+.k-checkbox-label:before,
+.checkbox-success .k-checkbox-label:hover:before,
+.checkbox-success .k-checkbox:checked+.k-checkbox-label:hover:before,
+.checkbox-success .k-checkbox:checked:hover+.k-checkbox-label:before,
+.checkbox-success .k-checkbox-label:active:before,
+.checkbox-success .k-checkbox:active+.k-checkbox-label:before,
+.checkbox-success .k-checkbox:focus+.k-checkbox-label:before,
+.checkbox-success .k-checkbox:hover+.k-checkbox-label:before,
+.checkbox-success .k-checkbox:checked+.k-checkbox-label:after,
+.checkbox-success .k-checkbox:indeterminate+.k-checkbox-label:after,
+.checkbox-success .k-checkbox-label:before,
+.checkbox-info .k-checkbox:checked+.k-checkbox-label:before,
+.checkbox-info .k-checkbox:indeterminate+.k-checkbox-label:before,
+.checkbox-info .k-checkbox-label:hover:before,
+.checkbox-info .k-checkbox:checked+.k-checkbox-label:hover:before,
+.checkbox-info .k-checkbox:checked:hover+.k-checkbox-label:before,
+.checkbox-info .k-checkbox-label:active:before,
+.checkbox-info .k-checkbox:active+.k-checkbox-label:before,
+.checkbox-info .k-checkbox:focus+.k-checkbox-label:before,
+.checkbox-info .k-checkbox:hover+.k-checkbox-label:before,
+.checkbox-info .k-checkbox:checked+.k-checkbox-label:after,
+.checkbox-info .k-checkbox:indeterminate+.k-checkbox-label:after,
+.checkbox-info .k-checkbox-label:before,
+.checkbox-warning .k-checkbox:checked+.k-checkbox-label:before,
+.checkbox-warning .k-checkbox:indeterminate+.k-checkbox-label:before,
+.checkbox-warning .k-checkbox-label:hover:before,
+.checkbox-warning .k-checkbox:checked+.k-checkbox-label:hover:before,
+.checkbox-warning .k-checkbox:checked:hover+.k-checkbox-label:before,
+.checkbox-warning .k-checkbox-label:active:before,
+.checkbox-warning .k-checkbox:active+.k-checkbox-label:before,
+.checkbox-warning .k-checkbox:focus+.k-checkbox-label:before,
+.checkbox-warning .k-checkbox:hover+.k-checkbox-label:before,
+.checkbox-warning .k-checkbox:checked+.k-checkbox-label:after,
+.checkbox-warning .k-checkbox:indeterminate+.k-checkbox-label:after,
+.checkbox-warning .k-checkbox-label:before,
+.checkbox-danger .k-checkbox:checked+.k-checkbox-label:before,
+.checkbox-danger .k-checkbox:indeterminate+.k-checkbox-label:before,
+.checkbox-danger .k-checkbox-label:hover:before,
+.checkbox-danger .k-checkbox:checked+.k-checkbox-label:hover:before,
+.checkbox-danger .k-checkbox:checked:hover+.k-checkbox-label:before,
+.checkbox-danger .k-checkbox-label:active:before,
+.checkbox-danger .k-checkbox:active+.k-checkbox-label:before,
+.checkbox-danger .k-checkbox:focus+.k-checkbox-label:before,
+.checkbox-danger .k-checkbox:hover+.k-checkbox-label:before,
+.checkbox-danger .k-checkbox:checked+.k-checkbox-label:after,
+.checkbox-danger .k-checkbox:indeterminate+.k-checkbox-label:after,
+.checkbox-danger .k-checkbox-label:before,
+.checkbox-light .k-checkbox-label:hover:before,
+.checkbox-light .k-checkbox:checked+.k-checkbox-label:hover:before,
+.checkbox-light .k-checkbox:checked:hover+.k-checkbox-label:before,
+.checkbox-light .k-checkbox:hover+.k-checkbox-label:before,
+.checkbox-light .k-checkbox:focus+.k-checkbox-label:before,
+.checkbox-stable .k-checkbox-label:hover:before,
+.checkbox-stable .k-checkbox:checked+.k-checkbox-label:hover:before,
+.checkbox-stable .k-checkbox:checked:hover+.k-checkbox-label:before,
+.checkbox-stable .k-checkbox:hover+.k-checkbox-label:before,
+.checkbox-stable .k-checkbox:focus+.k-checkbox-label:before,
+.checkbox-stable .k-checkbox:hover+.k-checkbox-label:before,
+.checkbox-royal .k-checkbox:checked+.k-checkbox-label:before,
+.checkbox-royal .k-checkbox:indeterminate+.k-checkbox-label:before,
+.checkbox-royal .k-checkbox-label:hover:before,
+.checkbox-royal .k-checkbox:checked+.k-checkbox-label:hover:before,
+.checkbox-royal .k-checkbox:checked:hover+.k-checkbox-label:before,
+.checkbox-royal .k-checkbox-label:active:before,
+.checkbox-royal .k-checkbox:active+.k-checkbox-label:before,
+.checkbox-royal .k-checkbox:focus+.k-checkbox-label:before,
+.checkbox-royal .k-checkbox:hover+.k-checkbox-label:before,
+.checkbox-royal .k-checkbox:checked+.k-checkbox-label:after,
+.checkbox-royal .k-checkbox:indeterminate+.k-checkbox-label:after,
+.checkbox-royal .k-checkbox-label:before,
+.checkbox-dark .k-checkbox:checked+.k-checkbox-label:before,
+.checkbox-dark .k-checkbox:indeterminate+.k-checkbox-label:before,
+.checkbox-dark .k-checkbox-label:hover:before,
+.checkbox-dark .k-checkbox:checked+.k-checkbox-label:hover:before,
+.checkbox-dark .k-checkbox:checked:hover+.k-checkbox-label:before,
+.checkbox-dark .k-checkbox-label:active:before,
+.checkbox-dark .k-checkbox:active+.k-checkbox-label:before,
+.checkbox-dark .k-checkbox:focus+.k-checkbox-label:before,
+.checkbox-dark .k-checkbox:hover+.k-checkbox-label:before,
+.checkbox-dark .k-checkbox:checked+.k-checkbox-label:after,
+.checkbox-dark .k-checkbox:indeterminate+.k-checkbox-label:after,
+.checkbox-dark .k-checkbox-label:before {
+    box-shadow: none;
+    background: var(--colorDefault10, #d6daeb);
+}
+
+/* Efeito focus */
+.k-checkbox:focus+.k-checkbox-label:before,
+.checkbox-default .k-checkbox:focus+.k-checkbox-label:before,
+.checkbox-primary .k-checkbox:focus+.k-checkbox-label:before,
+.checkbox-success .k-checkbox:focus+.k-checkbox-label:before,
+.checkbox-info .k-checkbox:focus+.k-checkbox-label:before,
+.checkbox-warning .k-checkbox:focus+.k-checkbox-label:before,
+.checkbox-danger .k-checkbox:focus+.k-checkbox-label:before,
+.checkbox-light .k-checkbox:focus+.k-checkbox-label:before,
+.checkbox-stable .k-checkbox:focus+.k-checkbox-label:before,
+.checkbox-royal .k-checkbox:focus+.k-checkbox-label:before,
+.checkbox-dark .k-checkbox:focus+.k-checkbox-label:before {
+    box-shadow: 0 0 0 2px var(--colorWarning50, #dfb306);
+    border-color: var(--colorWarning50, #dfb306);
+}
+
+/* Default */
+.k-checkbox:checked+.k-checkbox-label:before,
+.k-checkbox:indeterminate+.k-checkbox-label:before,
+.k-checkbox-label:hover:before,
+.k-checkbox-label:active:before,
+.k-checkbox:active+.k-checkbox-label:before,
+.k-checkbox:checked+.k-checkbox-label:after,
+.k-checkbox:indeterminate+.k-checkbox-label:after,
+.k-checkbox-label:before,
+.checkbox-default .k-checkbox:checked+.k-checkbox-label:before,
+.checkbox-default .k-checkbox:indeterminate+.k-checkbox-label:before,
+.checkbox-default .k-checkbox-label:active:before,
+.checkbox-default .k-checkbox:active+.k-checkbox-label:before,
+.checkbox-default .k-checkbox:checked+.k-checkbox-label:after,
+.checkbox-default .k-checkbox:indeterminate+.k-checkbox-label:after,
+.checkbox-default .k-checkbox-label:before {
+    border-color: var(--colorLight60, #bbbbbb);
+    box-shadow: none;
+}
+
+.k-checkbox:checked+.k-checkbox-label:before,
+.k-checkbox:indeterminate+.k-checkbox-label:before,
+.k-checkbox:checked+.k-checkbox-label:after,
+.k-checkbox:indeterminate+.k-checkbox-label:after,
+.checkbox-default .k-checkbox:checked+.k-checkbox-label:before,
+.checkbox-default .k-checkbox:indeterminate+.k-checkbox-label:before,
+.checkbox-default .k-checkbox:checked+.k-checkbox-label:after,
+.checkbox-default .k-checkbox:indeterminate+.k-checkbox-label:after {
+    background: transparent;
+    color: var(--colorDefault40, #1351b4);
+}
+
+/* Primary */
+.checkbox-primary .k-checkbox:checked+.k-checkbox-label:before,
+.checkbox-primary .k-checkbox:indeterminate+.k-checkbox-label:before,
+.checkbox-primary .k-checkbox:checked+.k-checkbox-label:after,
+.checkbox-primary .k-checkbox:indeterminate+.k-checkbox-label:after {
+    background: transparent;
+    color: var(--colorDefault40, #1351b4);
+}
+
+/* success */
+.checkbox-success .k-checkbox:checked+.k-checkbox-label:before,
+.checkbox-success .k-checkbox:indeterminate+.k-checkbox-label:before,
+.checkbox-success .k-checkbox:checked+.k-checkbox-label:after,
+.checkbox-success .k-checkbox:indeterminate+.k-checkbox-label:after {
+    background: transparent;
+    color: var(--colorDefault40, #1351b4);
+}
+
+/* info */
+.checkbox-info .k-checkbox:checked+.k-checkbox-label:before,
+.checkbox-info .k-checkbox:indeterminate+.k-checkbox-label:before,
+.checkbox-info .k-checkbox:checked+.k-checkbox-label:after,
+.checkbox-info .k-checkbox:indeterminate+.k-checkbox-label:after {
+    background: transparent;
+    color: var(--colorDefault40, #1351b4);
+}
+
+/* warning */
+.checkbox-warning .k-checkbox:checked+.k-checkbox-label:before,
+.checkbox-warning .k-checkbox:indeterminate+.k-checkbox-label:before,
+.checkbox-warning .k-checkbox:checked+.k-checkbox-label:after,
+.checkbox-warning .k-checkbox:indeterminate+.k-checkbox-label:after {
+    background: transparent;
+    color: var(--colorDefault40, #1351b4);
+}
+
+/* danger */
+.checkbox-danger .k-checkbox:checked+.k-checkbox-label:before,
+.checkbox-danger .k-checkbox:indeterminate+.k-checkbox-label:before,
+.checkbox-danger .k-checkbox:checked+.k-checkbox-label:after,
+.checkbox-danger .k-checkbox:indeterminate+.k-checkbox-label:after {
+    background: transparent;
+    color: var(--colorDefault40, #1351b4);
+}
+
+/* light */
+.checkbox-light .k-checkbox:checked+.k-checkbox-label:before,
+.checkbox-light .k-checkbox:indeterminate+.k-checkbox-label:before,
+.checkbox-light .k-checkbox:checked+.k-checkbox-label:after,
+.checkbox-light .k-checkbox:indeterminate+.k-checkbox-label:after,
+.checkbox-light .k-checkbox-label:before {
+    border-color: var(--colorLight50, #dfdfdf);
+    box-shadow: none;
+}
+
+.checkbox-light .k-checkbox:checked+.k-checkbox-label:before,
+.checkbox-light .k-checkbox:indeterminate+.k-checkbox-label:before,
+.checkbox-light .k-checkbox-label:hover:before,
+.checkbox-light .k-checkbox:checked+.k-checkbox-label:hover:before,
+.checkbox-light .k-checkbox:checked:hover+.k-checkbox-label:before,
+.checkbox-light .k-checkbox:hover+.k-checkbox-label:before,
+.checkbox-light .k-checkbox-label:active:before,
+.checkbox-light .k-checkbox:active+.k-checkbox-label:before,
+.checkbox-light .k-checkbox:focus+.k-checkbox-label:before,
+.checkbox-light .k-checkbox:checked+.k-checkbox-label:after,
+.checkbox-light .k-checkbox:indeterminate+.k-checkbox-label:after,
+.checkbox-light .k-checkbox-label:before {
+    border-color: var(--colorLight60, #bbbbbb);
+}
+
+.checkbox-light .k-checkbox:checked+.k-checkbox-label:before,
+.checkbox-light .k-checkbox:indeterminate+.k-checkbox-label:before,
+.checkbox-light .k-checkbox:checked+.k-checkbox-label:after,
+.checkbox-light .k-checkbox:indeterminate+.k-checkbox-label:after {
+    background: transparent;
+    color: var(--colorDefault40, #1351b4);
+}
+
+/* Stable */
+.checkbox-stable .k-checkbox:checked+.k-checkbox-label:before,
+.checkbox-stable .k-checkbox:indeterminate+.k-checkbox-label:before,
+.checkbox-stable .k-checkbox-label:active:before,
+.checkbox-stable .k-checkbox:active+.k-checkbox-label:before,
+.checkbox-stable .k-checkbox:checked+.k-checkbox-label:after,
+.checkbox-stable .k-checkbox:indeterminate+.k-checkbox-label:after,
+.checkbox-stable .k-checkbox-label:before {
+    border-color: var(--colorStable60, #b6b6b6);
+    box-shadow: none;
+}
+
+.checkbox-stable .k-checkbox:checked+.k-checkbox-label:before,
+.checkbox-stable .k-checkbox:indeterminate+.k-checkbox-label:before,
+.checkbox-stable .k-checkbox-label:hover:before,
+.checkbox-stable .k-checkbox:checked+.k-checkbox-label:hover:before,
+.checkbox-stable .k-checkbox:checked:hover+.k-checkbox-label:before,
+.checkbox-stable .k-checkbox:hover+.k-checkbox-label:before,
+.checkbox-stable .k-checkbox-label:active:before,
+.checkbox-stable .k-checkbox:active+.k-checkbox-label:before,
+.checkbox-stable .k-checkbox:focus+.k-checkbox-label:before,
+.checkbox-stable .k-checkbox:hover+.k-checkbox-label:before,
+.checkbox-stable .k-checkbox:checked+.k-checkbox-label:after,
+.checkbox-stable .k-checkbox:indeterminate+.k-checkbox-label:after,
+.checkbox-stable .k-checkbox-label:before {
+    border-color: var(--colorStable70, #888888);
+}
+
+.checkbox-stable .k-checkbox:checked+.k-checkbox-label:before,
+.checkbox-stable .k-checkbox:indeterminate+.k-checkbox-label:before,
+.checkbox-stable .k-checkbox:checked+.k-checkbox-label:after,
+.checkbox-stable .k-checkbox:indeterminate+.k-checkbox-label:after {
+    background: transparent;
+    color: var(--colorDefault40, #1351b4);
+}
+
+/* Royal */
+.checkbox-royal .k-checkbox:checked+.k-checkbox-label:before,
+.checkbox-royal .k-checkbox:indeterminate+.k-checkbox-label:before,
+.checkbox-royal .k-checkbox:checked+.k-checkbox-label:after,
+.checkbox-royal .k-checkbox:indeterminate+.k-checkbox-label:after {
+    background: transparent;
+    color: var(--colorDefault40, #1351b4);
+}
+
+/* Dark */
+.checkbox-dark .k-checkbox:checked+.k-checkbox-label:before,
+.checkbox-dark .k-checkbox:indeterminate+.k-checkbox-label:before,
+.checkbox-dark .k-checkbox:checked+.k-checkbox-label:after,
+.checkbox-dark .k-checkbox:indeterminate+.k-checkbox-label:after {
+    background: transparent;
+    color: var(--colorDefault40, #1351b4);
+}