cronapp-framework-mobile-js 3.0.0-SP.5 → 3.0.0-SP.50

package/components/crn-icon.components.json

@@ -7,7 +7,7 @@
   "description": "Ícone",
   "description_en_US": "Icon",
   "template": "<i class=\"ion ion-android-star icon-font-size-default color-default\" icon-size=\"icon-font-size-default\" icon-theme=\"color-default\"></i>",
-  "wrapper": false,
+  "wrapper": true,
   "properties": {
     "id": {
       "order": 1
@@ -283,9 +283,9 @@
     }
   ],
   "childrenProperties": [
-    {
+        {
       "name": "class",
-      "selector": ":self",
+      "selector": "i",
       "displayName_pt_BR": "Ícone",
       "displayName_en_US": "Icon",
       "type": "icon",

package/components/crn-input-floating.components.json

@@ -127,6 +127,11 @@
       "name": "on-drag",
       "selector": "input",
       "type": "event"
+    },
+    {
+      "name": "ng-required",
+      "selector": "input",
+      "type": "logic"
     }
   ], 
   "attributesForPreview": [

package/components/css/app.css

@@ -128,4 +128,13 @@
 
 .slider-pager .slider-pager-page > i {
   font-size: calc(0.6 * var(--iconSizeSmall, 25px));
-}
+}
+
+.item-floating-label .input-label {
+    position: relative;
+    padding: 5px 0 0 0;
+    opacity: 0;
+    top: 10px;
+    transition: opacity 0.15s ease-in, top 0.2s linear;
+    display: flex;
+  }

package/css/app_2.9.css

@@ -403,4 +403,25 @@ textarea.item {
 
 .login-social .button-bar button span {
     display: none;
+}
+
+@media (max-width: 767px) {
+  .hidden-xs {
+    display: none !important;
+  }
+}
+@media (min-width: 768px) and (max-width: 991px) {
+  .hidden-sm {
+    display: none !important;
+  }
+}
+@media (min-width: 992px) and (max-width: 1199px) {
+  .hidden-md {
+    display: none !important;
+  }
+}
+@media (min-width: 1200px) {
+  .hidden-lg {
+    display: none !important;
+  }
 }

package/css/themes/custom/cosmo/custom-cosmo.css

@@ -231,26 +231,26 @@
     --textColorDark70: #ffffff;
 
     /* Color - Neutral (web e mobile) */
-    --colorNeutral00: #FFFFFF;
-    --colorNeutral10: #F1F1F1;
-    --colorNeutral20: #E3E3E3;
-    --colorNeutral30: #D5D5D5;
-    --colorNeutral40: #C7C7C7;
-    --colorNeutral50: #B9B9B9;
-    --colorNeutral60: #ACACAC;
-    --colorNeutral70: #9E9E9E;
+    --colorNeutral00: #ffffff;
+    --colorNeutral10: #f1f1f1;
+    --colorNeutral20: #e3e3e3;
+    --colorNeutral30: #d5d5d5;
+    --colorNeutral40: #c7c7c7;
+    --colorNeutral50: #b9b9b9;
+    --colorNeutral60: #acacac;
+    --colorNeutral70: #9e9e9e;
     --colorNeutral80: #909090;
     --colorNeutral90: #828282;
     --colorNeutral100: #747474;
     --colorNeutral110: #666666;
-    --colorNeutral120: #5D5D5D;
+    --colorNeutral120: #5d5d5d;
     --colorNeutral130: #535353;
-    --colorNeutral140: #4A4A4A;
+    --colorNeutral140: #4a4a4a;
     --colorNeutral150: #414141;
     --colorNeutral160: #383838;
-    --colorNeutral170: #2E2E2E;
+    --colorNeutral170: #2e2e2e;
     --colorNeutral180: #252525;
-    --colorNeutral190: #1C1C1C;
+    --colorNeutral190: #1c1c1c;
     --colorNeutral200: #131313;
     --colorNeutral210: #090909;
     --colorNeutral220: #000000;
@@ -588,4 +588,75 @@ a#reset-password-login,
     color: var(--textColor30, #838383);
     font-family: var(--fontFamily, "Source Sans Pro", 'Calibri', sans-serif);
     font-size: var(--textNormalSize, 16px);
-}
+}
+
+.button.button-light.button-outline {
+    border-color: var(--colorLight50, #dfdfdf);
+}
+
+.button.button-light.button-outline span,
+.button.button-light.button-outline i {
+    color: var(--textColorLight40, #333333);
+}
+
+.button.button-stable.button-outline {
+    border-color: var(--colorStable60, #b6b6b6);
+}
+
+.button.button-stable.button-outline span,
+.button.button-stable.button-outline i {
+    color: var(--textColorStable40, #444444);
+}
+
+/*Checkbox*/
+.checkbox input:checked:before,
+.checkbox-default input:checked:before {
+    background: var(--colorDefault40, #222222);
+    border-color: var(--colorDefault40, #222222);
+}
+
+.checkbox-positive input:checked:before {
+    background: var(--colorPrimary40, #2780e3);
+    border-color: var(--colorPrimary40, #2780e3);
+}
+
+.checkbox-balanced input:checked:before {
+    background: var(--colorSuccess40, #3fb618);
+    border-color: var(--colorSuccess40, #3fb618);
+}
+
+.checkbox-calm input:checked:before {
+    background: var(--colorCalm40, #11c1f3);
+    border-color: var(--colorCalm40, #11c1f3);
+}
+
+.checkbox-energized input:checked:before {
+    background: var(--colorWarning40, #ff7518);
+    border-color: var(--colorWarning40, #ff7518);
+}
+
+.checkbox-assertive input:checked:before {
+    background: var(--colorDanger40, #ff0039);
+    border-color: var(--colorDanger40, #ff0039);
+}
+
+.checkbox-light input:checked:before,
+.checkbox-light input:checked+.checkbox-icon:before {
+    background: var(--colorLight40, #ffffff);
+    border-color: var(--colorLight50, #c2c2c2);
+}
+
+.checkbox-stable input:checked:before {
+    background: var(--colorStable40, #ffffff);
+    border-color: var(--colorStable40, #ffffff);
+}
+
+.checkbox-royal input:checked:before {
+    background: var(--colorRoyal40, #886aea);
+    border-color: var(--colorRoyal40, #886aea);
+}
+
+.checkbox-dark input:checked:before {
+    background: var(--colorDark40, #444444);
+    border-color: var(--colorDark40, #444444);
+}

package/css/themes/custom/cyborg/custom-cyborg.css

@@ -75,7 +75,7 @@
     --colorDefault10: #dadada;
     --colorDefault20: #b8b8b8;
     --colorDefault30: #909090;
-    --colorDefault40: #555555;
+    --colorDefault40: #424242;
     --colorDefault50: #4a4a4a;
     --colorDefault60: #3e3e3e;
     --colorDefault70: #2f2f2f;
@@ -188,7 +188,7 @@
     --colorLight10: #d6d6d6;
     --colorLight20: #afafaf;
     --colorLight30: #7f7f7f;
-    --colorLight40: #222222;
+    --colorLight40: #adafae;
     --colorLight50: #1e1e1e;
     --colorLight60: #191919;
     --colorLight70: #131313;
@@ -221,7 +221,7 @@
     --colorDark10: #e9eaea;
     --colorDark20: #d7d8d7;
     --colorDark30: #c3c5c4;
-    --colorDark40: #adafae;
+    --colorDark40: #222222;
     --colorDark50: #979998;
     --colorDark60: #7f807f;
     --colorDark70: #5f605f;
@@ -234,26 +234,26 @@
     --textColorDark70: #d5d5d5;
 
     /* Color - Neutral (web e mobile) */
-    --colorNeutral00: #FFFFFF;
-    --colorNeutral10: #F1F1F1;
-    --colorNeutral20: #E3E3E3;
-    --colorNeutral30: #D5D5D5;
-    --colorNeutral40: #C7C7C7;
-    --colorNeutral50: #B9B9B9;
-    --colorNeutral60: #ACACAC;
-    --colorNeutral70: #9E9E9E;
+    --colorNeutral00: #ffffff;
+    --colorNeutral10: #f1f1f1;
+    --colorNeutral20: #e3e3e3;
+    --colorNeutral30: #d5d5d5;
+    --colorNeutral40: #c7c7c7;
+    --colorNeutral50: #b9b9b9;
+    --colorNeutral60: #acacac;
+    --colorNeutral70: #9e9e9e;
     --colorNeutral80: #909090;
     --colorNeutral90: #828282;
     --colorNeutral100: #747474;
     --colorNeutral110: #666666;
-    --colorNeutral120: #5D5D5D;
+    --colorNeutral120: #5d5d5d;
     --colorNeutral130: #535353;
-    --colorNeutral140: #4A4A4A;
+    --colorNeutral140: #4a4a4a;
     --colorNeutral150: #414141;
     --colorNeutral160: #383838;
-    --colorNeutral170: #2E2E2E;
+    --colorNeutral170: #2e2e2e;
     --colorNeutral180: #252525;
-    --colorNeutral190: #1C1C1C;
+    --colorNeutral190: #1c1c1c;
     --colorNeutral200: #131313;
     --colorNeutral210: #090909;
     --colorNeutral220: #000000;
@@ -261,7 +261,7 @@
     /* === Variables used exclusively in the color palette property === */
     /* Components - Button */
     --btnLink: var(--colorPrimary40, #2a9fd6);
-    --btnDefault: var(--colorDefault40, #555555);
+    --btnDefault: var(--colorDefault40, #424242);
     --btnPrimary: var(--colorPrimary40, #2a9fd6);
     --btnSuccess: var(--colorSuccess40, #77b300);
     --btnCalm: var(--colorCalm40, #11c1f3);
@@ -308,7 +308,7 @@
     --colorDark: var(--colorDark40, #adafae);
 
     /* Components - Checkbox */
-    --checkboxDefault: var(--colorDefault40, #555555);
+    --checkboxDefault: var(--colorDefault40, #424242);
     --checkboxPrimary: var(--colorPrimary40, #2a9fd6);
     --checkboxSuccess: var(--colorSuccess40, #77b300);
     --checkboxCalm: var(--colorCalm40, #11c1f3);
@@ -331,7 +331,7 @@
     --borderCheckboxDark: transparent;
 
     /* Components - Toggle */
-    --toggleDefault: var(--colorDefault40, #555555);
+    --toggleDefault: var(--colorDefault40, #424242);
     --togglePrimary: var(--colorPrimary40, #2a9fd6);
     --toggleSuccess: var(--colorSuccess40, #77b300);
     --toggleCalm: var(--colorCalm40, #11c1f3);
@@ -354,7 +354,7 @@
     --borderToggleDark: transparent;
 
     /* Components - Tabs - crn-ion-segment */
-    --bgDefault: var(--colorDefault40, #555555);
+    --bgDefault: var(--colorDefault40, #424242);
     --bgPrimary: var(--colorPrimary40, #2a9fd6);
     --bgSuccess: var(--colorSuccess40, #77b300);
     --bgCalm: var(--colorCalm40, #11c1f3);
@@ -376,7 +376,7 @@
     --borderActiveBackgroundRoyal: transparent;
     --borderActiveBackgroundDark: transparent;
 
-    --activeBackgroundDefault: var(--colorDefault40, #555555);
+    --activeBackgroundDefault: var(--colorDefault40, #424242);
     --activeBackgroundPrimary: var(--colorPrimary40, #2a9fd6);
     --activeBackgroundSuccess: var(--colorSuccess40, #3fb618);
     --activeBackgroundCalm: var(--colorCalm40, #11c1f3);
@@ -410,7 +410,7 @@
     --iconThemeLightDark: var(--textColorDark40, #000000);
 
     /* Components - Old Tabs - pallete false */
-    --tabsDefault: var(--colorDefault40, #555555);
+    --tabsDefault: var(--colorDefault40, #424242);
     --tabsPrimary: var(--colorPrimary40, #2a9fd6);
     --tabsSuccess: var(--colorSuccess40, #77b300);
     --tabsCalm: var(--colorCalm40, #11c1f3);
@@ -554,6 +554,10 @@ ion-footer-bar.bar.bar-default {
     color: var(--textColor60, #939393);
 }
 
+.button.button-stable span {
+    color: var(--textColorStable40, #444444) !important;
+}
+
 /* Login */
 .login-bg {
     background: var(--backgroundLogin40, #060606);
@@ -634,7 +638,7 @@ a#reset-password-login,
 }
 
 .login-bg img[src="node_modules/cronapp-framework-mobile-js/img/logo.svg"],
-.login-bg img[src="assets/app-logo-login.svg"]{
+.login-bg img[src="assets/app-logo-login.svg"] {
     filter: brightness(0) invert(1);
 }