cronapp-framework-mobile-js 1.0.4

package/css/themes/custom/theme-general/crn-ion-header-bar.css

@@ -0,0 +1,418 @@
+.button .icon {
+    font-size: var(--textBigSize, 18px);
+}
+
+.bar .button-bar .button,
+.bar .buttons .button {
+    line-height: 1;
+    padding: 0 6px;
+}
+
+/* Default */
+.bar.bar-default.bar-footer,
+.bar.bar-default {
+    border-color: var(--colorDefault40, #3b448e);
+    background: var(--colorDefault40, #3b448e);
+    color: var(--textColorDefault40, #ffffff);
+}
+
+.bar.bar-default .button .icon,
+.bar.bar-default .title {
+    color: var(--textColorDefault40, #ffffff);
+}
+
+/* Light */
+.bar.bar-light.bar-footer,
+.bar.bar-light {
+    border-color: var(--colorLight40, #ffffff);
+    background: var(--colorLight40, #ffffff);
+    color: var(--textColorLight40, #444444);
+}
+
+.bar.bar-light .button .icon,
+.bar.bar-light .title {
+    color: var(--textColorLight40, #444444);
+}
+
+/* Stable */
+.bar.bar-stable.bar-footer,
+.bar.bar-stable {
+    border-color: var(--colorStable40, #f8f8f8);
+    background: var(--colorStable40, #f8f8f8);
+    color: var(--textColorStable40, #444444);
+}
+
+.bar.bar-stable .button .icon,
+.bar.bar-stable .title {
+    color: var(--textColorStable40, #444444);
+}
+
+/* Positive */
+.bar.bar-positive.bar-footer,
+.bar.bar-positive {
+    border-color: var(--colorPrimary40, #387ef5);
+    background: var(--colorPrimary40, #387ef5);
+    color: var(--textColorPrimary40, #ffffff);
+}
+
+.bar.bar-positive .button .icon,
+.bar.bar-positive .title {
+    color: var(--textColorPrimary40, #ffffff);
+}
+
+/* Calm */
+.bar.bar-calm.bar-footer,
+.bar.bar-calm {
+    border-color: var(--colorCalm40, #11c1f3);
+    background: var(--colorCalm40, #11c1f3);
+    color: var(--textColorCalm40, #ffffff);
+}
+
+.bar.bar-calm .button .icon,
+.bar.bar-calm .title {
+    color: var(--textColorCalm40, #ffffff);
+}
+
+/* Assertive */
+.bar.bar-assertive.bar-footer,
+.bar.bar-assertive {
+    border-color: var(--colorDanger40, #ef473a);
+    background: var(--colorDanger40, #ef473a);
+    color: var(--textColorDanger40, #ffffff);
+}
+
+.bar.bar-assertive .button .icon,
+.bar.bar-assertive .title {
+    color: var(--textColorDanger40, #ffffff);
+}
+
+/* Balanced */
+.bar.bar-balanced.bar-footer,
+.bar.bar-balanced {
+    border-color: var(--colorSuccess40, #33cd5f);
+    background: var(--colorSuccess40, #33cd5f);
+    color: var(--textColorSuccess40, #ffffff);
+}
+
+.bar.bar-balanced .button .icon,
+.bar.bar-balanced .title {
+    color: var(--textColorSuccess40, #ffffff);
+}
+
+/* Energized */
+.bar.bar-energized.bar-footer,
+.bar.bar-energized {
+    border-color: var(--colorWarning40, #ffc900);
+    background: var(--colorWarning40, #ffc900);
+    color: var(--textColorWarning40, #ffffff);
+}
+
+.bar.bar-energized .button .icon,
+.bar.bar-energized .title {
+    color: var(--textColorWarning40, #ffffff);
+}
+
+/* Royal */
+.bar.bar-royal.bar-footer,
+.bar.bar-royal {
+    border-color: var(--colorRoyal40, #886aea);
+    background: var(--colorRoyal40, #886aea);
+    color: var(--textColorRoyal40, #ffffff);
+}
+
+.bar.bar-royal .button .icon,
+.bar.bar-royal .title {
+    color: var(--textColorRoyal40, #ffffff);
+}
+
+/* Dark */
+.bar.bar-dark.bar-footer,
+.bar.bar-dark {
+    border-color: var(--colorDark40, #444444);
+    background: var(--colorDark40, #444444);
+    color: var(--textColorDark40, #ffffff);
+}
+
+.bar.bar-dark .button .icon,
+.bar.bar-dark .title {
+    color: var(--textColorDark40, #ffffff);
+}
+
+.bar .title,
+.platform-android .bar .title {
+    font-size: var(--textMediumSize, 18px);
+    font-weight: 400;
+}
+
+/* white */
+.bar.bar-white.bar-footer,
+.bar.bar-white {
+    border-color: var(--white, #ffffff);
+    background: var(--white, #ffffff);
+    color: var(--textColor40, #393939);
+}
+
+.bar.bar-white .button .icon,
+.bar.bar-white .title {
+    color: var(--textColor40, #393939);
+}
+
+/* gray */
+.bar.bar-gray.bar-footer,
+.bar.bar-gray {
+    border-color: var(--gray, #333);
+    background: var(--gray, #333);
+    color: var(--white, #fff);
+}
+
+.bar.bar-gray .button .icon,
+.bar.bar-gray .title {
+    color: var(--white, #fff);
+}
+
+/* black */
+.bar.bar-black.bar-footer,
+.bar.bar-black {
+    border-color: var(--black, #000);
+    background: var(--black, #000);
+    color: var(--white, #fff);
+}
+
+.bar.bar-black .button .icon,
+.bar.bar-black .title {
+    color: var(--white, #fff);
+}
+
+/* blue */
+.bar.bar-blue.bar-footer,
+.bar.bar-blue {
+    border-color: var(--blue, #0247FE);
+    background: var(--blue, #0247FE);
+    color: var(--white, #fff);
+}
+
+.bar.bar-blue .button .icon,
+.bar.bar-blue .title {
+    color: var(--white, #fff);
+}
+
+/* light-blue */
+.bar.bar-light-blue.bar-footer,
+.bar.bar-light-blue {
+    border-color: var(--light-blue, #85A5FF);
+    background: var(--light-blue, #85A5FF);
+    color: var(--white, #fff);
+}
+
+.bar.bar-light-blue .button .icon,
+.bar.bar-light-blue .title {
+    color: var(--white, #fff);
+}
+
+/* dark-blue */
+.bar.bar-dark-blue.bar-footer,
+.bar.bar-dark-blue {
+    border-color: var(--dark-blue, #00217A);
+    background: var(--dark-blue, #00217A);
+    color: var(--white, #fff);
+}
+
+.bar.bar-dark-blue .button .icon,
+.bar.bar-dark-blue .title {
+    color: var(--white, #fff);
+}
+
+/* purple */
+.bar.bar-purple.bar-footer,
+.bar.bar-purple {
+    border-color: var(--purple, #3D01A4);
+    background: var(--purple, #3D01A4);
+    color: var(--white, #fff);
+}
+
+.bar.bar-purple .button .icon,
+.bar.bar-purple .title {
+    color: var(--white, #fff);
+}
+
+/* light-purple */
+.bar.bar-blight-purple.bar-footer,
+.bar.bar-light-purple {
+    border-color: var(--light-purple, #B285FF);
+    background: var(--light-purple, #B285FF);
+    color: var(--white, #fff);
+}
+
+.bar.bar-light-purple .button .icon,
+.bar.bar-light-purple .title {
+    color: var(--white, #fff);
+}
+
+/* dark-purple */
+.bar.bar-dark-purple.bar-footer,
+.bar.bar-dark-purple {
+    border-color: var(--dark-purple, #2D007A);
+    background: var(--dark-purple, #2D007A);
+    color: var(--white, #fff);
+}
+
+.bar.bar-dark-purple .button .icon,
+.bar.bar-dark-purple .title {
+    color: var(--white, #fff);
+}
+
+/* red */
+.bar.bar-red.bar-footer,
+.bar.bar-red {
+    border-color: var(--red, #FE2712);
+    background: var(--red, #FE2712);
+    color: var(--white, #fff);
+}
+
+.bar.bar-red .button .icon,
+.bar.bar-red .title {
+    color: var(--white, #fff);
+}
+
+/* light-red */
+.bar.bar-light-red.bar-footer,
+.bar.bar-light-red {
+    border-color: var(--light-red, #FE8F84);
+    background: var(--light-red, #FE8F84);
+    color: var(--white, #fff);
+}
+
+.bar.bar-light-red .button .icon,
+.bar.bar-light-red .title {
+    color: var(--white, #fff);
+}
+
+/* dark-red */
+.bar.bar-dark-red.bar-footer,
+.bar.bar-dark-red {
+    border-color: var(--dark-red, #7A0B00);
+    background: var(--dark-red, #7A0B00);
+    color: var(--white, #fff);
+}
+
+.bar.bar-dark-red .button .icon,
+.bar.bar-dark-red .title {
+    color: var(--white, #fff);
+}
+
+/* orange */
+.bar.bar-orange.bar-footer,
+.bar.bar-orange {
+    border-color: var(--orange, #FB9B02);
+    background: var(--orange, #FB9B02);
+    color: var(--white, #fff);
+}
+
+.bar.bar-orange .button .icon,
+.bar.bar-orange .title {
+    color: var(--white, #fff);
+}
+
+/* light-orange */
+.bar.bar-light-orange.bar-footer,
+.bar.bar-light-orange {
+    border-color: var(--light-orange, #FFD085);
+    background: var(--light-orange, #FFD085);
+    color: var(--textColor40, #393939);
+}
+
+.bar.bar-light-orange .button .icon,
+.bar.bar-light-orange .title {
+    color: var(--textColor40, #393939);
+}
+
+/* dark-orange */
+.bar.bar-dark-orange.bar-footer,
+.bar.bar-dark-orange {
+    border-color: var(--dark-orange, #7A4B00);
+    background: var(--dark-orange, #7A4B00);
+    color: var(--white, #fff);
+}
+
+.bar.bar-dark-orange .button .icon,
+.bar.bar-dark-orange .title {
+    color: var(--white, #fff);
+}
+
+/* yellow */
+.bar.bar-yellow.bar-footer,
+.bar.bar-yellow {
+    border-color: var(--yellow, #FFFF33);
+    background: var(--yellow, #FFFF33);
+    color: var(--textColor40, #393939);
+}
+
+.bar.bar-yellow .button .icon,
+.bar.bar-yellow .title {
+    color: var(--textColor40, #393939);
+}
+
+/* light-yellow */
+.bar.bar-light-yellow.bar-footer,
+.bar.bar-light-yellow {
+    border-color: var(--light-yellow, #FFFF85);
+    background: var(--light-yellow, #FFFF85);
+    color: var(--textColor40, #393939);
+}
+
+.bar.bar-light-yellow .button .icon,
+.bar.bar-light-yellow .title {
+    color: var(--textColor40, #393939);
+}
+
+/* dark-yellow */
+.bar.bar-dark-yellow.bar-footer,
+.bar.bar-dark-yellow {
+    border-color: var(--dark-yellow, #7A7A00);
+    background: var(--dark-yellow, #7A7A00);
+    color: var(--white, #fff);
+}
+
+.bar.bar-dark-yellow .button .icon,
+.bar.bar-dark-yellow .title {
+    color: var(--white, #fff);
+}
+
+/* green */
+.bar.bar-green.bar-footer,
+.bar.bar-green {
+    border-color: var(--green, #66B032);
+    background: var(--green, #66B032);
+    color: var(--white, #fff);
+}
+
+.bar.bar-green .button .icon,
+.bar.bar-green .title {
+    color: var(--white, #fff);
+}
+
+/* light-green */
+.bar.bar-light-green.bar-footer,
+.bar.bar-light-green {
+    border-color: var(--light-green, #B7FF85);
+    background: var(--light-green, #B7FF85);
+    color: var(--textColor40, #393939);
+}
+
+.bar.bar-light-green .button .icon,
+.bar.bar-light-green .title {
+    color: var(--textColor40, #393939);
+}
+
+/* dark-green */
+.bar.bar-dark-green.bar-footer,
+.bar.bar-dark-green {
+    border-color: var(--dark-green, #337A00);
+    background: var(--dark-green, #337A00);
+    color: var(--white, #fff);
+}
+
+.bar.bar-dark-green .button .icon,
+.bar.bar-dark-green .title {
+    color: var(--white, #fff);
+}

package/css/themes/custom/theme-general/crn-ion-segment.css

@@ -0,0 +1,234 @@
+/* icon-theme */
+.crn-ion-segment-modern ul.active-background-default li.active a,
+.crn-ion-segment-classic ul.active-background-default li.active a {
+    color: var(--textColorDefault40, #838383);
+}
+
+.crn-ion-segment-modern ul.active-background-assertive li.active a,
+.crn-ion-segment-classic ul.active-background-assertive li.active a {
+    color: var(--textColorDanger40, #ffffff);
+}
+
+.crn-ion-segment-modern ul.active-background-positive li.active a,
+.crn-ion-segment-classic ul.active-background-positive li.active a {
+    color: var(--textColorPrimary40, #ffffff);
+}
+
+.crn-ion-segment-modern ul.active-background-balanced li.active a,
+.crn-ion-segment-classic ul.active-background-balanced li.active a {
+    color: var(--textColorSuccess40, #ffffff);
+}
+
+.crn-ion-segment-modern ul.active-background-energized li.active a,
+.crn-ion-segment-classic ul.active-background-energized li.active a {
+    color: var(--textColorWarning40, #ffffff);
+}
+
+.crn-ion-segment-modern ul.active-background-royal li.active a,
+.crn-ion-segment-classic ul.active-background-royal li.active a {
+    color: var(--textColorRoyal40, #ffffff);
+}
+
+.crn-ion-segment-modern ul.active-background-calm li.active a,
+.crn-ion-segment-classic ul.active-background-calm li.active a {
+    color: var(--textColorCalm40, #ffffff);
+}
+
+.crn-ion-segment-modern ul.active-background-light li.active a,
+.crn-ion-segment-classic ul.active-background-light li.active a {
+    color: var(--textColorLight40, #333333);
+}
+
+.crn-ion-segment-modern ul.active-background-stable li.active a,
+.crn-ion-segment-classic ul.active-background-stable li.active a {
+    color: var(--textColorStable40, #ffffff);
+}
+
+.crn-ion-segment-modern ul.active-background-dark li.active a,
+.crn-ion-segment-classic ul.active-background-dark li.active a {
+    color: var(--textColorDark40, #ffffff);
+}
+
+
+/* icon-theme-light */
+div.crn-ion-segment-light.icon-theme-light-default li a,
+.ion-segment-default li a {
+    color: var(--textColorDefault40, #3b448e);
+}
+
+div.crn-ion-segment-light.icon-theme-light-assertive li a,
+.ion-segment-assertive li a {
+    color: var(--textColorDanger40, #ef473a);
+}
+
+div.crn-ion-segment-light.icon-theme-light-balanced li a,
+.ion-segment-balanced li a {
+    color: var(--textColorSuccess40, #33cd5f);
+}
+
+div.crn-ion-segment-light.icon-theme-light-energized li a,
+.ion-segment-energized li a {
+    color: var(--textColorWarning40, #ffc900);
+}
+
+div.crn-ion-segment-light.icon-theme-light-light li a,
+.ion-segment-light li a {
+    color: var(--textColorLight40, #ffffff);
+}
+
+div.crn-ion-segment-light.icon-theme-light-stable li a,
+.ion-segment-stable li a {
+    color: var(--textColorStable40, #f8f8f8);
+}
+
+div.crn-ion-segment-light.icon-theme-light-calm li a,
+.ion-segment-calm li a {
+    color: var(--textColorCalm40, #11c1f3);
+}
+
+div.crn-ion-segment-light.icon-theme-light-positive li a,
+.ion-segment-positive li a {
+    color: var(--textColorPrimary40, #387ef5);
+}
+
+div.crn-ion-segment-light.icon-theme-light-royal li a,
+.ion-segment-royal li a {
+    color: var(--textColorRoyal40, #886aea);
+}
+
+div.crn-ion-segment-light.icon-theme-light-dark li a,
+.ion-segment-dark li a {
+    color: var(--textColorDark40, #444444);
+}
+
+/* background-color */
+
+.bg-default {
+    background: var(--colorDefault10, #d8d9e3);
+}
+
+.bg-assertive {
+    background: var(--colorDanger10, #fad9d8);
+}
+
+.bg-balanced {
+    background: var(--colorSuccess10, #d7f1dc);
+}
+
+.bg-energized {
+    background: var(--colorWarning10, #fff0d5);
+}
+
+.bg-light {
+    background: var(--colorLight10, #ffffff);
+}
+
+.bg-stable {
+    background: var(--colorStable10, #fdfdfd);
+}
+
+.bg-calm {
+    background: var(--colorCalm10, #d6eefb);
+}
+
+.bg-positive {
+    background: var(--colorPrimary10, #d8e0fc);
+}
+
+.bg-royal {
+    background: var(--colorRoyal10, #e2ddf9);
+}
+
+.bg-dark {
+    background: var(--colorDark10, #d9d9d9);
+}
+
+
+/* background-color-active */
+div.crn-ion-segment-classic ul.active-background-default li.active,
+div.crn-ion-segment-modern ul.active-background-default li.active {
+    background: var(--colorDefault40, #3b448e);
+}
+
+div.crn-ion-segment-classic ul.active-background-assertive li.active,
+div.crn-ion-segment-modern ul.active-background-assertive li.active {
+    background: var(--colorDanger40, #ef473a);
+}
+
+div.crn-ion-segment-classic ul.active-background-balanced li.active,
+div.crn-ion-segment-modern ul.active-background-balanced li.active {
+    background: var(--colorSuccess40, #33cd5f);
+}
+
+div.crn-ion-segment-classic ul.active-background-energized li.active,
+div.crn-ion-segment-modern ul.active-background-energized li.active {
+    background: var(--colorWarning40, #ffc900);
+}
+
+div.crn-ion-segment-classic ul.active-background-light li.active,
+div.crn-ion-segment-modern ul.active-background-light li.active {
+    background: var(--colorLight40, #ffffff);
+}
+
+div.crn-ion-segment-classic ul.active-background-stable li.active,
+div.crn-ion-segment-modern ul.active-background-stable li.active {
+    background: var(--colorStable40, #f8f8f8);
+}
+
+div.crn-ion-segment-classic ul.active-background-calm li.active,
+div.crn-ion-segment-modern ul.active-background-calm li.active {
+    background: var(--colorCalm40, #11c1f3);
+}
+
+div.crn-ion-segment-classic ul.active-background-positive li.active,
+div.crn-ion-segment-modern ul.active-background-positive li.active {
+    background: var(--colorPrimary40, #387ef5);
+}
+
+div.crn-ion-segment-classic ul.active-background-royal li.active,
+div.crn-ion-segment-modern ul.active-background-royal li.active {
+    background: var(--colorRoyal40, #886aea);
+}
+
+div.crn-ion-segment-classic ul.active-background-dark li.active,
+div.crn-ion-segment-modern ul.active-background-dark li.active {
+    background: var(--colorDark40, #444444);
+}
+
+
+/*  light background-color-active */
+div.crn-ion-segment-light.icon-theme-light-assertive li.active {
+    border-color: var(--colorDanger40, #ef473a);
+}
+
+div.crn-ion-segment-light.icon-theme-light-balanced li.active {
+    border-color: var(--colorSuccess40, #33cd5f);
+}
+
+div.crn-ion-segment-light.icon-theme-light-energized li.active {
+    border-color: var(--colorWarning40, #ffc900);
+}
+
+div.crn-ion-segment-light.icon-theme-light-light li.active {
+    border-color: var(--colorLight40, #ffffff);
+}
+
+div.crn-ion-segment-light.icon-theme-light-stable li.active {
+    border-color: var(--colorStable40, #f8f8f8);
+}
+
+div.crn-ion-segment-light.icon-theme-light-calm li.active {
+    border-color: var(--colorCalm40, #11c1f3);
+}
+
+div.crn-ion-segment-light.icon-theme-light-positive li.active {
+    border-color: var(--colorPrimary40, #387ef5);
+}
+
+div.crn-ion-segment-light.icon-theme-light-royal li.active {
+    border-color: var(--colorRoyal40, #886aea);
+}
+
+div.crn-ion-segment-light.icon-theme-light-dark li.active {
+    border-color: var(--colorDark40, #444444);
+}

package/css/themes/custom/theme-general/icon.css

@@ -0,0 +1,39 @@
+i.default {
+    color: var(--textColorDefault40, #3b448e);
+}
+
+i.light {
+    color: var(--textColorLight40, #ffffff);
+}
+
+i.stable {
+    color: var(--textColorStable40, #f8f8f8);
+}
+
+i.positive {
+    color: var(--textColorPrimary40, #387ef5);
+}
+
+i.calm {
+    color: var(--textColorCalm40, #ffffff);
+}
+
+i.assertive {
+    color: var(--textColorDanger40, #ef473a);
+}
+
+i.balanced {
+    color: var(--textColorSuccess40, #33cd5f);
+}
+
+i.energized {
+    color: var(--textColorWarning40, #ffc900);
+}
+
+i.royal {
+    color: var(--textColorRoyal40, #886aea);
+}
+
+i.dark {
+    color: var(--textColorDark40, #444444);
+}