cronapp-framework-mobile-js 2.9.1 → 2.9.2-SP.2

package/css/themes/custom/aquamarine/custom-aquamarine.css

@@ -267,43 +267,78 @@
     --colorNeutral210: #090909;
     --colorNeutral220: #000000;
 
+    /* === Variables used exclusively in the color palette property === */
     /* Components - Button */
     --btnLink: var(--colorPrimary40, #2c72a8);
-    --btnDefault: var(--colorDefault40, #2ca4a8);
-    --btnPrimary: var(--colorPrimary40, #2c72a8);
-    --btnSuccess: var(--colorSuccess40, #38a82c);
-    --btnCalm: var(--colorCalm40, #11c1f3);
-    --btnWarning: var(--colorWarning40, #daa31f);
-    --btnDanger: var(--colorDanger40, #a82c2c);
-    --btnLight: var(--textColorLight40, #444444);
-    --btnStable: var(--colorStable40, #b2b2b2);
-    --btnRoyal: var(--colorRoyal40, #7e5ee8);
-    --btnDark: var(--colorDark40, #444444);
+    --btnDefault: linear-gradient(90deg, var(--colorDefault40, #2ca4a8) 40%, var(--colorDefault30, #81bdc0) 100%);
+    --btnPrimary: linear-gradient(90deg, var(--colorPrimary40, #2c72a8) 40%, var(--colorPrimary30, #819fc0) 100%);
+    --btnSuccess: linear-gradient(90deg, var(--colorSuccess40, #38a82c) 40%, var(--colorSuccess30, #85c081) 100%);
+    --btnCalm: transparent;
+    --btnWarning: linear-gradient(90deg, var(--colorWarning40, #daa31f) 40%, var(--colorWarning30, #e3bd7e) 100%);
+    --btnDanger: linear-gradient(90deg, var(--colorDanger40, #a82c2c) 40%, var(--colorDanger30, #c08181) 100%);
+    --btnLight: transparent;
+    --btnStable: linear-gradient(90deg, var(--colorStable40, #b2b2b2) 40%, var(--colorStable30, #c7c7c7) 100%);
+    --btnRoyal: linear-gradient(90deg, var(--colorRoyal40, #7e5ee8) 40%, var(--colorRoyal30, #a594ee) 100%);
+    --btnDark: linear-gradient(90deg, var(--colorDark40, #444444) 40%, var(--colorDark30, #898989) 100%);
+
+    --textColorDefault: var(--textColorDefault40, #ffffff);
+    --textColorPrimary: var(--textColorPrimary40, #ffffff);
+    --textColorSuccess: var(--textColorSuccess40, #ffffff);
+    --textColorCalm: var(--colorCalm40, #11c1f3);
+    --textColorWarning: var(--textColorWarning40, #ffffff);
+    --textColorDanger: var(--textColorDanger40, #ffffff);
+    --textColorLight: var(--textColorLight40, #444444);
+    --textColorStable: var(--textColorStable40, #444444);
+    --textColorRoyal: var(--textColorRoyal40, #ffffff);
+    --textColorDark: var(--textColorDark40, #ffffff);
+
+    --borderBtnLink: var(--colorPrimary40, #2c72a8);
+    --borderBtnDefault: transparent;
+    --borderBtnPrimary: transparent;
+    --borderBtnSuccess: transparent;
+    --borderBtnCalm: var(--colorCalm40, #11c1f3);
+    --borderBtnWarning: transparent;
+    --borderBtnDanger: transparent;
+    --borderBtnLight: var(--textColorLight40, #444444);
+    --borderBtnStable: transparent;
+    --borderBtnRoyal: transparent;
+    --borderBtnDark: transparent;
 
     /* Components - Text color */
-    --colorDefault: var(--colorDefault40, #3b448e);
-    --colorPrimary: var(--colorPrimary40, #5665be);
-    --colorSuccess: var(--colorSuccess40, #257d25);
-    --colorCalm: var(--colorDefault40, #3b448e);
-    --colorWarning: var(--colorWarning40, #f0ad4e);
+    --colorDefault: var(--colorDefault40, #2ca4a8);
+    --colorPrimary: var(--colorPrimary40, #2c72a8);
+    --colorSuccess: var(--colorSuccess40, #38a82c);
+    --colorCalm: var(--colorDefault40, #2ca4a8);
+    --colorWarning: var(--colorWarning40, #daa31f);
     --colorDanger: var(--colorDanger40, #ce3a36);
     --colorLight: var(--colorLight50, #c2c2c2);
-    --colorStable: var(--colorStable40, #9c9c9c);
+    --colorStable: var(--colorStable40, #b2b2b2);
     --colorRoyal: var(--colorRoyal40, #7e5ee8);
     --colorDark: var(--colorDark40, #444444);
 
     /* Components - Checkbox */
-    --checkboxDefault: var(--colorDefault40, #3b448e);
-    --checkboxPrimary: var(--colorPrimary40, #5665be);
-    --checkboxSuccess: var(--colorSuccess40, #257d25);
+    --checkboxDefault: var(--colorDefault40, #2ca4a8);
+    --checkboxPrimary: var(--colorPrimary40, #2c72a8);
+    --checkboxSuccess: var(--colorSuccess40, #38a82c);
     --checkboxCalm: var(--colorCalm40, #11c1f3);
-    --checkboxWarning: var(--colorWarning40, #f0ad4e);
+    --checkboxWarning: var(--colorWarning40, #daa31f);
     --checkboxDanger: var(--colorDanger40, #ce3a36);
     --checkboxLight: var(--colorLight40, #dddddd);
     --checkboxStable: var(--colorStable40, #b2b2b2);
     --checkboxRoyal: var(--colorRoyal40, #7e5ee8);
     --checkboxDark: var(--colorDark40, #444444);
 
+    --borderCheckboxDefault: var(--colorDefault40, #2ca4a8);
+    --borderCheckboxPrimary: var(--colorPrimary40, #2c72a8);
+    --borderCheckboxSuccess: var(--colorSuccess40, #38a82c);
+    --borderCheckboxCalm: var(--colorCalm40, #11c1f3);
+    --borderCheckboxWarning: var(--colorWarning40, #daa31f);
+    --borderCheckboxDanger: var(--colorDanger40, #ce3a36);
+    --borderCheckboxLight: var(--colorLight40, #dddddd);
+    --borderCheckboxStable: var(--colorStable40, #b2b2b2);
+    --borderCheckboxRoyal: var(--colorRoyal40, #7e5ee8);
+    --borderCheckboxDark: var(--colorDark40, #444444);
+
     /* Components - Toggle */
     --toggleDefault: var(--colorDefault40, #2ca4a8);
     --togglePrimary: var(--colorPrimary40, #2c72a8);
@@ -316,50 +351,72 @@
     --toggleRoyal: var(--colorRoyal40, #7e5ee8);
     --toggleDark: var(--colorDark40, #444444);
 
+    --borderToggleDefault: var(--colorDefault40, #2ca4a8);
+    --borderTogglePrimary: var(--colorPrimary40, #2c72a8);
+    --borderToggleSuccess: var(--colorSuccess40, #38a82c);
+    --borderToggleCalm: var(--colorCalm40, #11c1f3);
+    --borderToggleWarning: var(--colorWarning40, #daa31f);
+    --borderToggleDanger: var(--colorDanger40, #a82c2c);
+    --borderToggleLight: var(--colorLight50, #c2c2c2);
+    --borderToggleStable: var(--colorStable50, #9c9c9c);
+    --borderToggleRoyal: var(--colorRoyal40, #7e5ee8);
+    --borderToggleDark: var(--colorDark40, #444444);
+
     /* Components - Tabs - crn-ion-segment */
-    --bgDefault: var(--colorDefault40, #2ca4a8);
-    --bgPrimary: var(--colorPrimary40, #2c72a8);
-    --bgSuccess: var(--colorSuccess40, #38a82c);
-    --bgCalm: var(--colorCalm40, #11c1f3);
-    --bgWarning: var(--colorWarning40, #daa31f);
-    --bgDanger: var(--colorDanger40, #a82c2c);
-    --bgLight: var(--colorLight40, #dddddd);
-    --bgStable: var(--colorStable40, #b2b2b2);
-    --bgRoyal: var(--colorRoyal40, #7e5ee8);
-    --bgDark: var(--colorDark40, #444444);
-    
-    --activeBackgroundDefault: var(--colorDefault40, #2ca4a8);
-    --activeBackgroundPrimary: var(--colorPrimary40, #2c72a8);
-    --activeBackgroundSuccess: var(--colorSuccess40, #38a82c);
-    --activeBackgroundCalm: var(--colorCalm40, #11c1f3);
-    --activeBackgroundWarning: var(--colorWarning40, #daa31f);
-    --activeBackgroundDanger: var(--colorDanger40, #a82c2c);
-    --activeBackgroundLight: var(--colorLight40, #dddddd);
-    --activeBackgroundStable: var(--colorStable40, #b2b2b2);
-    --activeBackgroundRoyal: var(--colorRoyal40, #7e5ee8);
-    --activeBackgroundDark: var(--colorDark40, #444444);
-
-    --ionSegmentDefault: var(--textColorDefault40, #2ca4a8);
-    --ionSegmentPrimary: var(--textColorPrimary40, #2c72a8);
-    --ionSegmentSuccess: var(--textColorSuccess40, #38a82c);
-    --ionSegmentCalm: var(--textColorCalm40, #11c1f3);
-    --ionSegmentWarning: var(--textColorWarning40, #daa31f);
-    --ionSegmentDanger: var(--textColorDanger40, #a82c2c);
-    --ionSegmentLight: var(--textColorLight30, #3c3c3c);
+    --bgDefault: var(--colorDefault10, #d7e7e8);
+    --bgPrimary: var(--colorPrimary10, #d7dee8);
+    --bgSuccess: var(--colorSuccess10, #d8e8d7);
+    --bgCalm: var(--colorCalm10, #d6eefb);
+    --bgWarning: var(--colorWarning10, #f4e7d6);
+    --bgDanger: var(--colorDanger10, #e8d7d7);
+    --bgLight: var(--colorLight10, #f5f5f5);
+    --bgStable: var(--colorStable10, #ebebeb);
+    --bgRoyal: var(--colorRoyal10, #e0dbf8);
+    --bgDark: var(--colorDark10, #d9d9d9);
+
+    --borderActiveBackgroundDefault: var(--colorDefault40, #2ca4a8);
+    --borderActiveBackgroundPrimary: var(--colorPrimary40, #2c72a8);
+    --borderActiveBackgroundSuccess: var(--colorSuccess40, #38a82c);
+    --borderActiveBackgroundCalm: var(--colorCalm40, #11c1f3);
+    --borderActiveBackgroundWarning: var(--colorWarning40, #daa31f);
+    --borderActiveBackgroundDanger: var(--colorDanger50, #c71c22);
+    --borderActiveBackgroundLight: var(--colorLight40, #ffffff);
+    --borderActiveBackgroundStable: var(--colorStable40, #b2b2b2);
+    --borderActiveBackgroundRoyal: var(--colorRoyal40, #886aea);
+    --borderActiveBackgroundDark: var(--colorDark40, #444444);
+
+    --activeBackgroundDefault: linear-gradient(90deg, var(--colorDefault40, #2ca4a8) 40%, var(--colorDefault30, #81bdc0) 100%);
+    --activeBackgroundPrimary: linear-gradient(90deg, var(--colorPrimary40, #2c72a8) 40%, var(--colorPrimary30, #819fc0) 100%);
+    --activeBackgroundSuccess: linear-gradient(90deg, var(--colorSuccess40, #38a82c) 40%, var(--colorSuccess30, #85c081) 100%);
+    --activeBackgroundCalm: linear-gradient(90deg, var(--colorCalm40, #11c1f3) 40%, var(--colorCalm30, #7cd1f6) 100%);
+    --activeBackgroundWarning: linear-gradient(90deg, var(--colorWarning40, #daa31f) 40%, var(--colorWarning30, #e3bd7e) 100%);
+    --activeBackgroundDanger: linear-gradient(90deg, var(--colorDanger40, #a82c2c) 40%, var(--colorDanger30, #c08181) 100%);
+    --activeBackgroundLight: linear-gradient(var(--colorLight30, #e5e5e5), var(--colorLight40, #dddddd));
+    --activeBackgroundStable: linear-gradient(90deg, var(--colorStable40, #b2b2b2) 40%, var(--colorStable30, #c7c7c7) 100%);
+    --activeBackgroundRoyal: linear-gradient(var(--colorRoyal30, #a594ee), var(--colorRoyal40, #7e5ee8));
+    --activeBackgroundDark: linear-gradient(var(--colorDark30, #898989), var(--colorDark40, #444444));
+
+    --ionSegmentDefault: var(--textColorDefault40, #ffffff);
+    --ionSegmentPrimary: var(--textColorPrimary40, #ffffff);
+    --ionSegmentSuccess: var(--textColorSuccess40, #ffffff);
+    --ionSegmentCalm: var(--textColorCalm40, #ffffff);
+    --ionSegmentWarning: var(--textColorWarning40, #ffffff);
+    --ionSegmentDanger: var(--textColorDanger40, #ffffff);
+    --ionSegmentLight: var(--textColorLight40, #444444);
     --ionSegmentStable: var(--textColorStable40, #444444);
-    --ionSegmentRoyal: var(--textColorRoyal40, #7e5ee8);
-    --ionSegmentDark: var(--textColorDark40, #444444);
-
-    --iconThemeLightDefault: var(--textColorDefault40, #2ca4a8);
-    --iconThemeLightPrimary: var(--textColorPrimary40, #2c72a8);
-    --iconThemeLightSuccess: var(--textColorSuccess40, #38a82c);
-    --iconThemeLightCalm: var(--textColorCalm40, #11c1f3);
-    --iconThemeLightWarning: var(--textColorWarning40, #daa31f);
-    --iconThemeLightDanger: var(--textColorDanger40, #a82c2c);
-    --iconThemeLightLight: var(--textColorLight30, #3c3c3c);
-    --iconThemeLightStable: var(--textColorStable40, #444444);
-    --iconThemeLightRoyal: var(--textColorRoyal40, #7e5ee8);
-    --iconThemeLightDark: var(--textColorDark40, #444444);
+    --ionSegmentRoyal: var(--textColorRoyal40, #ffffff);
+    --ionSegmentDark: var(--textColorDark40, #ffffff);
+
+    --iconThemeLightDefault: var(--colorDefault40, #2ca4a8);
+    --iconThemeLightPrimary: var(--colorPrimary40, #2c72a8);
+    --iconThemeLightSuccess: var(--colorSuccess40, #38a82c);
+    --iconThemeLightCalm: var(--colorCalm40, #11c1f3);
+    --iconThemeLightWarning: var(--colorWarning40, #daa31f);
+    --iconThemeLightDanger: var(--colorDanger40, #a82c2c);
+    --iconThemeLightLight: var(--colorLight40, #333333);
+    --iconThemeLightStable: var(--colorStable40, #b2b2b2);
+    --iconThemeLightRoyal: var(--colorRoyal40, #7e5ee8);
+    --iconThemeLightDark: var(--colorDark40, #444444);
 
     /* Components - Old Tabs - pallete false */
     --tabsDefault: var(--colorDefault40, #2ca4a8);
@@ -374,28 +431,28 @@
     --tabsDark: var(--colorDark40, #444444);
 
     /* Components - Header */
-    --barDefault: var(--colorDefault70, #185a5c);
-    --barPrimary: var(--colorPrimary40, #2c72a8);
-    --barSuccess: var(--colorSuccess40, #38a82c);
+    --barDefault: linear-gradient(90deg, var(--colorDefault70, #185a5c) 0%, var(--colorPrimary60, #20547b) 100%);
+    --barPrimary: linear-gradient(90deg, var(--colorPrimary40, #2c72a8) 40%, var(--colorPrimary30, #819fc0) 100%);
+    --barSuccess: linear-gradient(90deg, var(--colorSuccess40, #38a82c) 40%, var(--colorSuccess30, #85c081) 100%);
     --barCalm: var(--colorCalm40, #11c1f3);
-    --barWarning: var(--colorWarning40, #daa31f);
-    --barDanger: var(--colorDanger40, #a82c2c);
-    --barLight: var(--colorLight40, #dddddd);
-    --barStable: var(--colorStable40, #b2b2b2);
-    --barRoyal: var(--colorRoyal40, #7e5ee8);
-    --barDark: var(--colorDark40, #444444);
+    --barWarning: linear-gradient(90deg, var(--colorWarning40, #daa31f) 40%, var(--colorWarning30, #e3bd7e) 100%);
+    --barDanger: linear-gradient(90deg, var(--colorDanger40, #a82c2c) 40%, var(--colorDanger30, #c08181) 100%);
+    --barLight: var(--colorLight40, #ffffff);
+    --barStable: linear-gradient(90deg, var(--colorStable40, #b2b2b2) 40%, var(--colorStable30, #c7c7c7) 100%);
+    --barRoyal: linear-gradient(90deg, var(--colorRoyal40, #7e5ee8) 40%, var(--colorRoyal30, #a594ee) 100%);
+    --barDark: linear-gradient(90deg, var(--colorDark40, #444444) 40%, var(--colorDark30, #898989) 100%);
 
     /* Componentes - Footer with icon */
-    --backgroundDefault: var(--colorDefault70, #185a5c);
-    --backgroundPrimary: var(--colorPrimary40, #2c72a8);
-    --backgroundSuccess: var(--colorSuccess40, #38a82c);
+    --backgroundDefault: linear-gradient(90deg, var(--colorDefault70, #185a5c) 0%, var(--colorPrimary60, #20547b) 100%);
+    --backgroundPrimary: linear-gradient(90deg, var(--colorPrimary40, #2c72a8) 40%, var(--colorPrimary30, #819fc0) 100%);
+    --backgroundSuccess: linear-gradient(90deg, var(--colorSuccess40, #38a82c) 40%, var(--colorSuccess30, #85c081) 100%);
     --backgroundCalm: var(--colorCalm40, #11c1f3);
-    --backgroundWarning: var(--colorWarning40, #daa31f);
-    --backgroundDanger: var(--colorDanger40, #a82c2c);
+    --backgroundWarning: linear-gradient(90deg, var(--colorWarning40, #daa31f) 40%, var(--colorWarning30, #e3bd7e) 100%);
+    --backgroundDanger: linear-gradient(90deg, var(--colorDanger40, #a82c2c) 40%, var(--colorDanger30, #c08181) 100%);
     --backgroundLight: transparent;
-    --backgroundStable: var(--colorStable40, #b2b2b2);
-    --backgroundRoyal: var(--colorRoyal40, #7e5ee8);
-    --backgroundDark: var(--colorDark40, #444444);
+    --backgroundStable: linear-gradient(90deg, var(--colorStable40, #b2b2b2) 40%, var(--colorStable30, #c7c7c7) 100%);
+    --backgroundRoyal: linear-gradient(90deg, var(--colorRoyal40, #7e5ee8) 40%, var(--colorRoyal30, #a594ee) 100%);
+    --backgroundDark: linear-gradient(90deg, var(--colorDark40, #444444) 40%, var(--colorDark30, #898989) 100%);
 
     --tabsIconDefault: var(--textColorDefault40, #ffffff);
     --tabsIconPrimary: var(--textColorPrimary40, #ffffff);
@@ -407,6 +464,7 @@
     --tabsIconStable: var(--textColorStable40, #444444);
     --tabsIconRoyal: var(--textColorRoyal40, #ffffff);
     --tabsIconDark: var(--textColorDark40, #ffffff);
+    /* End - Variables used exclusively in the color palette property */
 }
 
 body {
@@ -660,10 +718,10 @@ a#reset-password-login,
     height: calc(var(--textNormalSize, 16px) * 3);
 }
 
-.login-mobile .button span,
-.login-mobile button span,
-.login-mobile .button i,
-.login-mobile button i {
+.login-mobile .item .button span,
+.login-mobile .item button span,
+.login-mobile .item .button i,
+.login-mobile .item button i {
     color: var(--textColorPrimary40, #ffffff);
 }
 
@@ -777,4 +835,8 @@ a#reset-password-login,
     color: var(--textColorLight40, #444444);
     border-color: var(--textColorLight40, #444444);
     opacity: 1;
+}
+
+.login-social .button-bar button {
+    padding: 1px 6px;
 }

package/css/themes/custom/cerulean/button-cerulean.css

@@ -50,18 +50,18 @@ button,
 
 /* Theme default - Outline */
 .button.button-default.button-outline {
-    border-color: var(--colorDefault40, #3b448e);
+    border-color: var(--colorDefault50, #3b448e);
     background: transparent;
 }
 
 .button.button-default.button-outline span,
 .button.button-default.button-outline i {
-    color: var(--colorDefault40, #3b448e);
+    color: var(--colorDefault50, #3b448e);
 }
 
 .button.button-default.button-outline:active,
 .button.button-default.button-outline.activated {
-    background: var(--colorDefault40, #3b448e);
+    background: var(--colorDefault50, #3b448e);
 }
 
 .button.button-default.button-outline:active span,
@@ -367,17 +367,17 @@ button,
 /* Light - Outline */
 
 .button.button-light.button-outline {
-    border-color: var(--colorLight40, #ffffff);
+    border-color: var(--colorLight50, #ffffff);
 }
 
 .button.button-light.button-outline span,
 .button.button-light.button-outline i {
-    color: var(--colorLight40, #ffffff);
+    color: var(--colorLight50, #ffffff);
 }
 
 .button.button-light.button-outline:active,
 .button.button-light.button-outline.activated {
-    background: var(--colorLight40, #ffffff);
+    background: var(--colorLight50, #ffffff);
 }
 
 .button.button-light.button-outline:active span,
@@ -406,17 +406,17 @@ button,
 
 /* Stable - Outline */
 .button.button-stable.button-outline {
-    border-color: var(--colorStable40, #f8f8f8);
+    border-color: var(--colorStable50, #f8f8f8);
 }
 
 .button.button-stable.button-outline span,
 .button.button-stable.button-outline i {
-    color: var(--colorStable40, #f8f8f8);
+    color: var(--colorStable50, #f8f8f8);
 }
 
 .button.button-stable.button-outline:active,
 .button.button-stable.button-outline.activated {
-    background: var(--colorStable40, #f8f8f8);
+    background: var(--colorStable50, #f8f8f8);
 }
 
 .button.button-stable.button-outline:active span,
@@ -474,4 +474,55 @@ button,
 /* Clear */
 .button-clear {
     background: transparent;
+}
+
+/* Colors */
+.button span.default,
+.button i.default {
+    color: var(--textColorDefault40, #ffffff);
+}
+
+.button span.light,
+.button i.light {
+    color: var(--textColorLight40, #444444);
+}
+
+.button span.stable,
+.button i.stable {
+    color: var(--textColorStable40, #f8f8f8);
+}
+
+.button span.positive,
+.button i.positive {
+    color: var(--textColorPrimary40, #444444);
+}
+
+.button span.calm,
+.button i.calm {
+    color: var(--textColorCalm40, #ffffff);
+}
+
+.button span.assertive,
+.button i.assertive {
+    color: var(--textColorDanger40, #ffffff);
+}
+
+.button span.balanced,
+.button i.balanced {
+    color: var(--textColorSuccess40, #ffffff);
+}
+
+.button span.energized,
+.button i.energized {
+    color: var(--textColorWarning40, #ffffff);
+}
+
+.button span.royal,
+.button i.royal {
+    color: var(--textColorRoyal40, #ffffff);
+}
+
+.button span.dark,
+.button i.dark {
+    color: var(--textColorDark40, #ffffff);
 }

package/css/themes/custom/cerulean/crn-ion-segment-cerulean.css

@@ -57,4 +57,12 @@ div.crn-ion-segment-classic ul.active-background-dark li.active,
 div.crn-ion-segment-modern ul.active-background-dark li.active {
     background:  linear-gradient(var(--colorDark30, #898989), var(--colorDark40, #444444));
     border-color: var(--colorDark40, #444444);
+}
+
+div.crn-ion-segment-light .icon-theme-light-default li.active {
+    border-color: var(--textColorDefault40, #3b448e);
+}
+
+div.crn-ion-segment-light .icon-theme-light-default li a {
+    color: var(--textColorDefault40, #3b448e);
 }