cronapp-framework-mobile-js
Version:
Javascript library for CronApp's projects
642 lines (579 loc) • 20.9 kB
CSS
/* Fonts */
@import '../../../fonts/news-cycle/NewsCycle.css';
@import '../../../fonts/arial-narrow/arial-narrow.css';
@import '../../../fonts/georgia/georgia.css';
@import '../../../fonts/helvetica-neue/HelveticaNeue.css';
@import '../../../fonts/times-new-roman/Times-New-Roman.css';
/* ==== VARIABLES ==== */
:root {
/* Font */
--fontFamily: "News Cycle", "Arial Narrow", sans-serif;
--textColor: #222222;
--textSmallSize: 13px;
--textNormalSize: 15px;
--textMediumSize: 19px;
--textBigSize: 26px;
--textExtraBigSize: 32px;
--textFullSize: 39px;
--textColor10: #d6d6d6;
--textColor20: #afafaf;
--textColor30: #7f7f7f;
--textColor40: #222222;
--textColor50: #1e1e1e;
--textColor60: #191919;
--textColor70: #131313;
/* Menus - Sizes and Distances */
--menuVerticalWidth: 270px;
--menuSideSize: 20px;
--menuItemBarSize: 6px;
--menuElementOverallPadding: 10px;
--menuItemPaddingSize: calc(var(--menuElementOverallPadding) + 5px);
--menuItemIconWidth: 25px;
/* Background */
--backgroundColor10: #ffffff;
--backgroundColor20: #ffffff;
--backgroundColor30: #ffffff;
--backgroundColor40: #ffffff;
--backgroundColor50: #dfdfdf;
--backgroundColor60: #bbbbbb;
--backgroundColor70: #8c8c8c;
/* Background Login */
--backgroundLogin10: #ffffff;
--backgroundLogin20: #ffffff;
--backgroundLogin30: #ffffff;
--backgroundLogin40: #ffffff;
--backgroundLogin50: #dfdfdf;
--backgroundLogin60: #bbbbbb;
--backgroundLogin70: #8c8c8c;
/* Distances */
--distanceNone: 0;
--distanceSmallest: 5px;
--distanceExtraSmall: 10px;
--distanceSmall: 15px;
--distanceMedium: 20px;
--distanceBig: 30px;
--distanceGiant: 40px;
--distanceTitan: 60px;
/* Border Radius */
--borderRadiusNone: 0;
--borderRadiusSmallest: 5px;
--borderRadiusExtraSmall: 10px;
--borderRadiusSmall: 15px;
--borderRadiusBig: 30px;
--borderRadiusGiant: 40px;
--borderRadiusTitan: 60px;
--borderRadiusFull: 99999px;
/* Color - Theme default */
--colorDefault10: #e9e9e9;
--colorDefault20: #d6d6d6;
--colorDefault30: #c1c1c1;
--colorDefault40: #aaaaaa;
--colorDefault50: #959595;
--colorDefault60: #7d7d7d;
--colorDefault70: #5d5d5d;
--textColorDefault10: #8c8c8c;
--textColorDefault20: #bbbbbb;
--textColorDefault30: #dfdfdf;
--textColorDefault40: #ffffff;
--textColorDefault50: #ffffff;
--textColorDefault60: #ffffff;
--textColorDefault70: #ffffff;
/* Color - Primary - positive */
--colorPrimary10: #f9dddc;
--colorPrimary20: #f4bebc;
--colorPrimary30: #f09997;
--colorPrimary40: #eb6864;
--colorPrimary50: #ce5b58;
--colorPrimary60: #ac4c49;
--colorPrimary70: #813937;
--textColorPrimary10: #8c8c8c;
--textColorPrimary20: #bbbbbb;
--textColorPrimary30: #dfdfdf;
--textColorPrimary40: #ffffff;
--textColorPrimary50: #ffffff;
--textColorPrimary60: #ffffff;
--textColorPrimary70: #ffffff;
/* Color - Success - balanced */
--colorSuccess10: #d6ebd9;
--colorSuccess20: #afd9b6;
--colorSuccess30: #7fc78c;
--colorSuccess40: #22b24c;
--colorSuccess50: #1e9c43;
--colorSuccess60: #198238;
--colorSuccess70: #13612a;
--textColorSuccess10: #8c8c8c;
--textColorSuccess20: #bbbbbb;
--textColorSuccess30: #dfdfdf;
--textColorSuccess40: #ffffff;
--textColorSuccess50: #ffffff;
--textColorSuccess60: #ffffff;
--textColorSuccess70: #ffffff;
/* Color - Warning (web) - energized (mobile) */
--colorWarning10: #fcf8d6;
--colorWarning20: #faf2b0;
--colorWarning30: #f7ec7f;
--colorWarning40: #f5e625;
--colorWarning50: #d7c920;
--colorWarning60: #b3a81b;
--colorWarning70: #867e14;
--textColorWarning10: #8c8c8c;
--textColorWarning20: #bbbbbb;
--textColorWarning30: #dfdfdf;
--textColorWarning40: #ffffff;
--textColorWarning50: #ffffff;
--textColorWarning60: #ffffff;
--textColorWarning70: #ffffff;
/* Color - Danger (web) - assertive (mobile) */
--colorDanger10: #fce0d5;
--colorDanger20: #fac3ae;
--colorDanger30: #f7a37b;
--colorDanger40: #f57a00;
--colorDanger50: #d76b00;
--colorDanger60: #b35900;
--colorDanger70: #864300;
--textColorDanger10: #8c8c8c;
--textColorDanger20: #bbbbbb;
--textColorDanger30: #dfdfdf;
--textColorDanger40: #ffffff;
--textColorDanger50: #ffffff;
--textColorDanger60: #ffffff;
--textColorDanger70: #ffffff;
/* Color - Royal (mobile) */
--colorRoyal10: #e2ddf9;
--colorRoyal20: #c8bef4;
--colorRoyal30: #ab9aef;
--colorRoyal40: #886aea;
--colorRoyal50: #775dcd;
--colorRoyal60: #644eab;
--colorRoyal70: #4a3a80;
--textColorRoyal10: #8c8c8c;
--textColorRoyal20: #bbbbbb;
--textColorRoyal30: #dfdfdf;
--textColorRoyal40: #ffffff;
--textColorRoyal50: #ffffff;
--textColorRoyal60: #ffffff;
--textColorRoyal70: #ffffff;
/* Color - Calm (mobile) */
--colorCalm10: #d7dde5;
--colorCalm20: #b2bdcf;
--colorCalm30: #8398b6;
--colorCalm40: #336699;
--colorCalm50: #2d5986;
--colorCalm60: #254b70;
--colorCalm70: #1c3854;
--textColorCalm10: #8c8c8c;
--textColorCalm20: #bbbbbb;
--textColorCalm30: #dfdfdf;
--textColorCalm40: #ffffff;
--textColorCalm50: #ffffff;
--textColorCalm60: #ffffff;
--textColorCalm70: #ffffff;
/* Color - Light (mobile) */
--colorLight10: #fdfdfe;
--colorLight20: #fbfcfc;
--colorLight30: #fafafb;
--colorLight40: #f8f9fa;
--colorLight50: #d9dadb;
--colorLight60: #b6b6b7;
--colorLight70: #888889;
--textColorLight10: #000000;
--textColorLight20: #000000;
--textColorLight30: #000000;
--textColorLight40: #000000;
--textColorLight50: #7b7b7b;
--textColorLight60: #aeaeae;
--textColorLight70: #d5d5d5;
/* Color - Stable (mobile) */
--colorStable10: #fdfdfd;
--colorStable20: #fbfbfb;
--colorStable30: #fafafa;
--colorStable40: #f8f8f8;
--colorStable50: #d9d9d9;
--colorStable60: #b6b6b6;
--colorStable70: #888888;
--textColorStable10: #252525;
--textColorStable20: #323232;
--textColorStable30: #3c3c3c;
--textColorStable40: #444444;
--textColorStable50: #898989;
--textColorStable60: #b5b5b5;
--textColorStable70: #d9d9d9;
/* Color - Dark (mobile) */
--colorDark10: #d6d6d6;
--colorDark20: #afafaf;
--colorDark30: #7f7f7f;
--colorDark40: #222222;
--colorDark50: #1e1e1e;
--colorDark60: #191919;
--colorDark70: #131313;
--textColorDark10: #8c8c8c;
--textColorDark20: #bbbbbb;
--textColorDark30: #dfdfdf;
--textColorDark40: #ffffff;
--textColorDark50: #ffffff;
--textColorDark60: #ffffff;
--textColorDark70: #ffffff;
/* Color - Neutral (web e mobile) */
--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;
--colorNeutral130: #535353;
--colorNeutral140: #4A4A4A;
--colorNeutral150: #414141;
--colorNeutral160: #383838;
--colorNeutral170: #2E2E2E;
--colorNeutral180: #252525;
--colorNeutral190: #1C1C1C;
--colorNeutral200: #131313;
--colorNeutral210: #090909;
--colorNeutral220: #000000;
/* === Variables used exclusively in the color palette property === */
/* Components - Button */
--btnLink: var(--colorPrimary40, #eb6864);
--btnDefault: var(--colorDefault40, #2ca4a8);
--btnPrimary: var(--colorPrimary40, #eb6864);
--btnSuccess: var(--colorSuccess40, #22b24c);
--btnCalm: var(--colorCalm40, #336699);
--btnWarning: var(--colorWarning40, #f5e625);
--btnDanger: var(--colorDanger40, #f57a00);
--btnLight: var(--colorLight50, #d9dadb);
--btnStable: var(--colorStable40, #f8f8f8);
--btnRoyal: var(--colorRoyal40, #886aea);
--btnDark: var(--colorDark40, #222222);
--textColorDefault: var(--textColorDefault40, #ffffff);
--textColorPrimary: var(--textColorPrimary40, #ffffff);
--textColorSuccess: var(--textColorSuccess40, #ffffff);
--textColorCalm: var(--textColorDefault40, #ffffff);
--textColorWarning: var(--textColorWarning40, #ffffff);
--textColorDanger: var(--textColorDanger40, #ffffff);
--textColorLight: var(--textColorLight40, #333333);
--textColorStable: var(--textColorStable40, #444444);
--textColorRoyal: var(--textColorRoyal40, #ffffff);
--textColorDark: var(--textColorDark40, #ffffff);
--borderBtnLink: transparent;
--borderBtnDefault: transparent;
--borderBtnPrimary: transparent;
--borderBtnSuccess: transparent;
--borderBtnCalm: transparent;
--borderBtnWarning: transparent;
--borderBtnDanger: transparent;
--borderBtnLight: var(--colorLight50, #d9dadb);
--borderBtnStable: transparent;
--borderBtnRoyal: transparent;
--borderBtnDark: transparent;
/* Components - Text color */
--colorDefault: var(--colorDefault40, #3b448e);
--colorPrimary: var(--colorPrimary40, #eb6864);
--colorSuccess: var(--colorSuccess40, #22b24c);
--colorCalm: var(--colorCalm40, #336699);
--colorWarning: var(--colorWarning40, #f5e625);
--colorDanger: var(--colorDanger40, #f57a00);
--colorLight: var(--colorLight50, #d9dadb);
--colorStable: var(--colorStable50, #d9d9d9);
--colorRoyal: var(--colorRoyal40, #886aea);
--colorDark: var(--colorDark40, #222222);
/* Components - Checkbox */
--checkboxDefault: var(--colorDefault40, #3b448e);
--checkboxPrimary: var(--colorPrimary40, #eb6864);
--checkboxSuccess: var(--colorSuccess40, #22b24c);
--checkboxCalm: var(--colorCalm40, #336699);
--checkboxWarning: var(--colorWarning40, #f5e625);
--checkboxDanger: var(--colorDanger40, #f57a00);
--checkboxLight: var(--colorLight50, #d9dadb);
--checkboxStable: var(--colorStable40, #f8f8f8);
--checkboxRoyal: var(--colorRoyal40, #886aea);
--checkboxDark: var(--colorDark40, #222222);
--borderCheckboxDefault: transparent;
--borderCheckboxPrimary: transparent;
--borderCheckboxSuccess: transparent;
--borderCheckboxCalm: transparent;
--borderCheckboxWarning: transparent;
--borderCheckboxDanger: transparent;
--borderCheckboxLight: transparent;
--borderCheckboxStable: transparent;
--borderCheckboxRoyal: transparent;
--borderCheckboxDark: transparent;
/* Components - Toggle */
--toggleDefault: var(--colorDefault40, #3c3c3c);
--togglePrimary: var(--colorPrimary40, #eb6864);
--toggleSuccess: var(--colorSuccess40, #22b24c);
--toggleCalm: var(--colorCalm40, #336699);
--toggleWarning: var(--colorWarning40, #f5e625);
--toggleDanger: var(--colorDanger40, #f57a00);
--toggleLight: var(--colorLight50, #d9dadb);
--toggleStable: var(--colorStable50, #d9d9d9);
--toggleRoyal: var(--colorRoyal40, #886aea);
--toggleDark: var(--colorDark40, #222222);
--borderToggleDefault: transparent;
--borderTogglePrimary: transparent;
--borderToggleSuccess: transparent;
--borderToggleCalm: transparent;
--borderToggleWarning: transparent;
--borderToggleDanger: transparent;
--borderToggleLight: transparent;
--borderToggleStable: transparent;
--borderToggleRoyal: transparent;
--borderToggleDark: transparent;
/* Components - Tabs - crn-ion-segment */
--bgPrimary: var(--colorPrimary40, #eb6864);
--bgDefault: var(--colorDefault40, #375a7f);
--bgSuccess: var(--colorSuccess40, #22b24c);
--bgCalm: var(--colorCalm40, #336699);
--bgWarning: var(--colorWarning40, #f5e625);
--bgDanger: var(--colorDanger40, #f57a00);
--bgLight: var(--colorLight40, #f8f9fa);
--bgStable: var(--colorStable40, #f8f8f8);
--bgRoyal: var(--colorRoyal40, #886aea);
--bgDark: var(--colorDark40, #222222);
--borderActiveBackgroundDefault: transparent;
--borderActiveBackgroundPrimary: transparent;
--borderActiveBackgroundSuccess: transparent;
--borderActiveBackgroundCalm: transparent;
--borderActiveBackgroundWarning: transparent;
--borderActiveBackgroundDanger: transparent;
--borderActiveBackgroundLight: transparent;
--borderActiveBackgroundStable: transparent;
--borderActiveBackgroundRoyal: transparent;
--borderActiveBackgroundDark: transparent;
--activeBackgroundDefault: var(--colorDefault40, #375a7f);
--activeBackgroundPrimary: var(--colorPrimary40, #eb6864);
--activeBackgroundSuccess: var(--colorSuccess40, #22b24c);
--activeBackgroundCalm: var(--colorCalm40, #336699);
--activeBackgroundWarning: var(--colorWarning40, #f5e625);
--activeBackgroundDanger: var(--colorDanger40, #f57a00);
--activeBackgroundLight: var(--colorLight40, #f8f9fa);
--activeBackgroundStable: var(--colorStable40, #f8f8f8);
--activeBackgroundRoyal: var(--colorRoyal40, #886aea);
--activeBackgroundDark: var(--colorDark40, #222222);
--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, #000000);
--ionSegmentStable: var(--textColorStable40, #444444);
--ionSegmentRoyal: var(--textColorRoyal40, #ffffff);
--ionSegmentDark: var(--textColorDark40, #ffffff);
--iconThemeLightDefault: var(--textColorDefault40, #ffffff);
--iconThemeLightPrimary: var(--textColorPrimary40, #ffffff);
--iconThemeLightSuccess: var(--textColorSuccess40, #ffffff);
--iconThemeLightCalm: var(--textColorCalm40, #ffffff);
--iconThemeLightWarning: var(--textColorWarning40, #ffffff);
--iconThemeLightDanger: var(--textColorDanger40, #ffffff);
--iconThemeLightLight: var(--textColorLight40, #000000);
--iconThemeLightStable: var(--textColorStable40, #444444);
--iconThemeLightRoyal: var(--textColorRoyal40, #ffffff);
--iconThemeLightDark: var(--textColorDark40, #ffffff);
/* Components - Old Tabs - pallete false */
--tabsDefault: var(--colorDefault40, #3c3c3c);
--tabsPrimary: var(--colorPrimary40, #eb6864);
--tabsSuccess: var(--colorSuccess40, #22b24c);
--tabsCalm: var(--colorCalm40, #336699);
--tabsWarning: var(--colorWarning40, #f5e625);
--tabsDanger: var(--colorDanger40, #f57a00);
--tabsLight: var(--colorLight40, #f8f9fa);
--tabsStable: var(--colorStable40, #f8f8f8);
--tabsRoyal: var(--colorRoyal40, #886aea);
--tabsDark: var(--colorDark40, #222222);
/* Components - Header */
--barDefault: var(--backgroundLogin40, #ffffff);
--barPrimary: var(--colorPrimary40, #eb6864);
--barSuccess: var(--colorSuccess40, #22b24c);
--barCalm: var(--colorCalm40, #336699);
--barWarning: var(--colorWarning40, #f5e625);
--barDanger: var(--colorDanger40, #f57a00);
--barLight: var(--colorLight40, #f8f9fa);
--barStable: var(--colorStable40, #f8f8f8);
--barRoyal: var(--colorRoyal40, #886aea);
--barDark: var(--colorDark40, #444444);
/* Componentes - Footer with icon */
--backgroundDefault: var(--backgroundLogin40, #ffffff);
--backgroundPrimary: var(--colorPrimary40, #eb6864);
--backgroundSuccess: var(--colorSuccess40, #22b24c);
--backgroundCalm: var(--colorCalm40, #336699);
--backgroundWarning: var(--colorWarning40, #f5e625);
--backgroundDanger: var(--colorDanger40, #f57a00);
--backgroundLight: var(--colorLight40, #f8f9fa);
--backgroundStable: var(--colorStable40, #f8f8f8);
--backgroundRoyal: var(--colorRoyal40, #886aea);
--backgroundDark: var(--colorDark40, #444444);
--tabsIconDefault: var(--textColor40, #222222);
--tabsIconPrimary: var(--textColorPrimary40, #ffffff);
--tabsIconSuccess: var(--textColorSuccess40, #ffffff);
--tabsIconCalm: var(--textColorCalm40, #ffffff);
--tabsIconWarning: var(--textColorWarning40, #ffffff);
--tabsIconDanger: var(--textColorDanger40, #ffffff);
--tabsIconLight: var(--textColorLight40, #000000);
--tabsIconStable: var(--textColorStable40, #444444);
--tabsIconRoyal: var(--textColorRoyal40, #ffffff);
--tabsIconDark: var(--textColorDark40, #ffffff);
/* End - Variables used exclusively in the color palette property */
}
body,
p,
label,
a,
input,
.item {
font-family: "Georgia", var(--fontFamily);
font-size: var(--textNormalSize, 15px);
color: var(--textColor30, #7f7f7f);
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
font-family: "News Cycle", var(--fontFamily);
font-weight: 700;
color: var(--textColor70, #131313);
}
.light,
a.light,
.color-light {
color: var(--colorLight50, #d9dadb);
}
.stable,
a.stable,
.color-stable {
color: var(--colorStable50, #d9d9d9);
}
a,
a:focus,
a:hover {
color: var(--colorPrimary40, #eb6864);
}
/* Botão */
.button.button-light {
border: 1px solid var(--colorLight50, #d9dadb);
}
/* Menu */
.menu-view {
background: var(--backgroundColor40, #ffffff);
color: var(--textColor40, #222222);
}
.menu-view .item-icon-left .icon,
.login-bg .item-icon-left .icon,
.menu-view .user-avatar i {
color: var(--textColor40, #222222);
border-color: var(--textColor30, #7f7f7f);
}
.menu-view .item h2,
.login-bg .item h2,
.menu-view .item h3,
.login-bg .item h3 {
color: var(--textColor40, #222222);
}
/* Cabeçalho */
.bar.bar-default {
background: var(--backgroundLogin40, #ffffff);
color: var(--textColor40, #222222);
}
.bar.bar-default .button .icon,
.bar.bar-default .title,
.bar.bar-default .button span,
.bar.bar-default .button i {
color: var(--textColor40, #222222);
}
.bar.bar-default .button.button-default {
border-color: transparent;
background: var(--colorLight40, #f8f9fa);
color: var(--textColor40, #222222);
}
ion-header-bar.bar.bar-default {
border-bottom: 1px solid var(--colorDefault60, #7d7d7d);
}
ion-footer-bar.bar.bar-default {
border-top: 1px solid var(--colorDefault60, #7d7d7d);
}
/* Abas */
.tabs-striped.background-default .tabs {
background: var(--backgroundLogin40, #ffffff);
}
.tabs-striped.tabs-icon-default .tab-item,
.tabs-striped.tabs-icon-default .tab-item.active,
.tabs-striped.tabs-icon-default .tab-item.activated {
color: var(--textColor40, #222222);
border-color: var(--textColor40, #222222);
}
.tabs-striped.tabs-icon-positive .tab-item,
.tabs-striped.tabs-icon-positive .tab-item.active,
.tabs-striped.tabs-icon-positive .tab-item.activated {
color: var(--textColorPrimary40, #ffffff);
border-color: var(--textColorPrimary40, #ffffff);
}
/* Login */
.login-bg {
background: var(--backgroundColor40, #ffffff);
}
.login-mobile .item-input input::placeholder {
color: var(--textColor30, #7f7f7f);
}
#reset-password-label,
#crn-title-signup,
#crn-heading-reset,
#go-back-login,
a#reset-password-login,
a#button-signup,
.login-mobile input {
color: var(--textColor40, #222222);
}
.login-mobile input:focus,
.login-mobile input {
border-bottom: 1px solid var(--textColor30, #7f7f7f);
}
.login-mobile .button.button-positive,
.login-mobile .button {
background: var(--colorPrimary40, #387ef5);
text-transform: capitalize;
letter-spacing: 0;
border: 0;
}
.login-mobile .button.button-positive.active,
.login-mobile .button.button-positive:active,
.login-mobile .button.button-positive.activated,
.login-mobile .button:active,
.login-mobile .button.activated {
background: var(--colorPrimary60, #387ef5);
color: var(--textColorPrimary40, #ffffff);
}
.login-mobile .button.button-positive span,
.login-mobile .button.button-positive i,
.login-mobile .button.button-positive.active span,
.login-mobile .button.button-positive:active span,
.login-mobile .button.button-positive:focus span,
.login-mobile .button.button-positive:hover span,
.login-mobile .button.button-positive.active i,
.login-mobile .button.button-positive:active i,
.login-mobile .button.button-positive:focus i,
.login-mobile .button.button-positive:hover i,
.login-mobile .button i,
.login-mobile .button span,
.login-mobile .button:active i,
.login-mobile .button:active span,
.login-mobile .button.activated i,
.login-mobile .button.activated span {
color: var(--textColorPrimary40, #ffffff);
}
/* Form */
textarea.item {
border-width: 1px 0;
}