cronapp-framework-mobile-js
Version:
Javascript library for CronApp's projects
615 lines (553 loc) • 20.3 kB
CSS
/* Fonts */
@import '../../../fonts/roboto/roboto.css';
@import '../../../fonts/helvetica-neue/HelveticaNeue.css';
/* ==== VARIABLES ==== */
:root {
/* Font */
--fontFamily: "Roboto", "Helvetica Neue", Arial, sans-serif;
--textColor: #3e3f3a;
--textSmallSize: 12px;
--textNormalSize: 14px;
--textMediumSize: 18px;
--textBigSize: 24px;
--textExtraBigSize: 30px;
--textFullSize: 36px;
--textColor10: #d8d8d8;
--textColor20: #b3b4b3;
--textColor30: #878785;
--textColor40: #3e3f3a;
--textColor50: #363733;
--textColor60: #2d2e2a;
--textColor70: #222320;
/* 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: #d8d8d8;
--colorDefault20: #b3b4b3;
--colorDefault30: #878785;
--colorDefault40: #3e3f3a;
--colorDefault50: #363733;
--colorDefault60: #2d2e2a;
--colorDefault70: #222320;
--textColorDefault10: #8c8c8c;
--textColorDefault20: #bbbbbb;
--textColorDefault30: #dfdfdf;
--textColorDefault40: #ffffff;
--textColorDefault50: #ffffff;
--textColorDefault60: #ffffff;
--textColorDefault70: #ffffff;
/* Color - Primary - positive */
--colorPrimary10: #d7dbe2;
--colorPrimary20: #b1bac8;
--colorPrimary30: #8394ab;
--colorPrimary40: #325d88;
--colorPrimary50: #2c5177;
--colorPrimary60: #254464;
--colorPrimary70: #1b334a;
--textColorPrimary10: #8c8c8c;
--textColorPrimary20: #bbbbbb;
--textColorPrimary30: #dfdfdf;
--textColorPrimary40: #ffffff;
--textColorPrimary50: #ffffff;
--textColorPrimary60: #ffffff;
--textColorPrimary70: #ffffff;
/* Color - Success - balanced */
--colorSuccess10: #e4efd9;
--colorSuccess20: #cce2b6;
--colorSuccess30: #b2d48c;
--colorSuccess40: #93c54b;
--colorSuccess50: #81ac42;
--colorSuccess60: #6c9037;
--colorSuccess70: #516c29;
--textColorSuccess10: #8c8c8c;
--textColorSuccess20: #bbbbbb;
--textColorSuccess30: #dfdfdf;
--textColorSuccess40: #ffffff;
--textColorSuccess50: #ffffff;
--textColorSuccess60: #ffffff;
--textColorSuccess70: #ffffff;
/* Color - Warning (web) - energized (mobile) */
--colorWarning10: #fce0d8;
--colorWarning20: #f9c4b3;
--colorWarning30: #f7a486;
--colorWarning40: #f47c3c;
--colorWarning50: #d66d35;
--colorWarning60: #b35b2c;
--colorWarning70: #864421;
--textColorWarning10: #8c8c8c;
--textColorWarning20: #bbbbbb;
--textColorWarning30: #dfdfdf;
--textColorWarning40: #ffffff;
--textColorWarning50: #ffffff;
--textColorWarning60: #ffffff;
--textColorWarning70: #ffffff;
/* Color - Danger (web) - assertive (mobile) */
--colorDanger10: #f4dada;
--colorDanger20: #ebb8b7;
--colorDanger30: #e28f8d;
--colorDanger40: #d9534f;
--colorDanger50: #be4945;
--colorDanger60: #9f3d3a;
--colorDanger70: #772d2b;
--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: #d7e9f6;
--colorCalm20: #b0d6ef;
--colorCalm30: #80c2e8;
--colorCalm40: #29abe0;
--colorCalm50: #2496c4;
--colorCalm60: #1e7da4;
--colorCalm70: #165e7b;
--textColorCalm10: #8c8c8c;
--textColorCalm20: #bbbbbb;
--textColorCalm30: #dfdfdf;
--textColorCalm40: #ffffff;
--textColorCalm50: #ffffff;
--textColorCalm60: #ffffff;
--textColorCalm70: #ffffff;
/* Color - Light (mobile) */
--colorLight10: #fdfcfb;
--colorLight20: #fbfaf7;
--colorLight30: #faf7f4;
--colorLight40: #f8f5f0;
--colorLight50: #d9d7d2;
--colorLight60: #b6b3b0;
--colorLight70: #888683;
--textColorLight10: #53534c;
--textColorLight20: #6f6f66;
--textColorLight30: #85847a;
--textColorLight40: #98978b;
--textColorLight50: #b5b5ad;
--textColorLight60: #cecec9;
--textColorLight70: #e5e5e3;
/* 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: #d8d8d8;
--colorDark20: #b3b4b3;
--colorDark30: #878785;
--colorDark40: #3e3f3a;
--colorDark50: #363733;
--colorDark60: #2d2e2a;
--colorDark70: #222320;
--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(--colorSuccess40, #93c54b);
--btnDefault: var(--colorDefault40, #3e3f3a);
--btnPrimary: var(--colorPrimary40, #325d88);
--btnSuccess: var(--colorSuccess40, #93c54b);
--btnCalm: var(--colorCalm40, #29abe0);
--btnWarning: var(--colorWarning40, #f47c3c);
--btnDanger: var(--colorDanger40, #d9534f);
--btnLight: var(--colorLight40, #f8f5f0);
--btnStable: var(--colorStable40, #f8f8f8);
--btnRoyal: var(--colorRoyal40, #886aea);
--btnDark: var(--colorDark40, #3e3f3a);
--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: transparent;
--borderBtnStable: transparent;
--borderBtnRoyal: transparent;
--borderBtnDark: transparent;
/* Components - Text color */
--colorDefault: var(--colorDefault40, #3e3f3a);
--colorPrimary: var(--colorPrimary40, #325d88);
--colorSuccess: var(--colorSuccess40, #93c54b);
--colorCalm: var(--colorCalm40, #29abe0);
--colorWarning: var(--colorWarning40, #f47c3c);
--colorDanger: var(--colorDanger40, #d9534f);
--colorLight: var(--colorLight50, #d9d7d2);
--colorStable: var(--colorStable50, #d9d9d9);
--colorRoyal: var(--colorRoyal40, #886aea);
--colorDark: var(--colorDark40, #3e3f3a);
/* Components - Checkbox */
--checkboxDefault: var(--colorDefault40, #3e3f3a);
--checkboxPrimary: var(--colorPrimary40, #325d88);
--checkboxSuccess: var(--colorSuccess40, #93c54b);
--checkboxCalm: var(--colorCalm40, #29abe0);
--checkboxWarning: var(--colorWarning40, #f47c3c);
--checkboxDanger: var(--colorDanger40, #d9534f);
--checkboxLight: var(--colorLight50, #d9d7d2);
--checkboxStable: var(--colorStable40, #f8f8f8);
--checkboxRoyal: var(--colorRoyal40, #886aea);
--checkboxDark: var(--colorDark40, #3e3f3a);
--borderCheckboxDefault: transparent;
--borderCheckboxPrimary: transparent;
--borderCheckboxSuccess: transparent;
--borderCheckboxCalm: transparent;
--borderCheckboxWarning: transparent;
--borderCheckboxDanger: transparent;
--borderCheckboxLight: transparent;
--borderCheckboxStable: transparent;
--borderCheckboxRoyal: transparent;
--borderCheckboxDark: transparent;
/* Components - Toggle */
--toggleDefault: var(--colorDefault50, #363733);
--togglePrimary: var(--colorPrimary40, #325d88);
--toggleSuccess: var(--colorSuccess40, #93c54b);
--toggleCalm: var(--colorCalm40, #29abe0);
--toggleWarning: var(--colorWarning40, #f47c3c);
--toggleDanger: var(--colorDanger40, #d9534f);
--toggleLight: var(--colorLight50, #d9d7d2);
--toggleStable: var(--colorStable50, #d9d9d9);
--toggleRoyal: var(--colorRoyal40, #886aea);
--toggleDark: var(--colorDark40, #3e3f3a);
--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 */
--bgDefault: var(--colorDefault40, #3e3f3a);
--bgPrimary: var(--colorPrimary40, #325d88);
--bgSuccess: var(--colorSuccess40, #93c54b);
--bgCalm: var(--colorCalm40, #29abe0);
--bgWarning: var(--colorWarning40, #f47c3c);
--bgDanger: var(--colorDanger40, #d9534f);
--bgLight: var(--colorLight40, #f8f5f0);
--bgStable: var(--colorStable40, #f8f8f8);
--bgRoyal: var(--colorRoyal40, #886aea);
--bgDark: var(--colorDark40, #3e3f3a);
--borderActiveBackgroundDefault: transparent;
--borderActiveBackgroundPrimary: transparent;
--borderActiveBackgroundSuccess: transparent;
--borderActiveBackgroundCalm: transparent;
--borderActiveBackgroundWarning: transparent;
--borderActiveBackgroundDanger: transparent;
--borderActiveBackgroundLight: transparent;
--borderActiveBackgroundStable: transparent;
--borderActiveBackgroundRoyal: transparent;
--borderActiveBackgroundDark: transparent;
--activeBackgroundDefault: var(--colorDefault40, #3e3f3a);
--activeBackgroundPrimary: var(--colorPrimary40, #325d88);
--activeBackgroundSuccess: var(--colorSuccess40, #93c54b);
--activeBackgroundCalm: var(--colorCalm40, #29abe0);
--activeBackgroundWarning: var(--colorWarning40, #f47c3c);
--activeBackgroundDanger: var(--colorDanger40, #d9534f);
--activeBackgroundLight: var(--colorLight40, #f8f5f0);
--activeBackgroundStable: var(--colorStable40, #f8f8f8);
--activeBackgroundRoyal: var(--colorRoyal40, #886aea);
--activeBackgroundDark: var(--colorDark40, #3e3f3a);
--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, #2d2d2d);
--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, #ffffff);
--iconThemeLightStable: var(--textColorStable40, #444444);
--iconThemeLightRoyal: var(--textColorRoyal40, #ffffff);
--iconThemeLightDark: var(--textColorDark40, #ffffff);
/* Components - Old Tabs - pallete false */
--tabsDefault: var(--colorDefault40, #3e3f3a);
--tabsPrimary: var(--colorPrimary40, #325d88);
--tabsSuccess: var(--colorSuccess40, #93c54b);
--tabsCalm: var(--colorCalm40, #29abe0);
--tabsWarning: var(--colorWarning40, #f47c3c);
--tabsDanger: var(--colorDanger40, #d9534f);
--tabsLight: var(--colorLight40, #f8f5f0);
--tabsStable: var(--colorStable40, #f8f8f8);
--tabsRoyal: var(--colorRoyal40, #886aea);
--tabsDark: var(--colorDark40, #3e3f3a);
/* Components - Header */
--barDefault: var(--colorDefault40, #3e3f3a);
--barPrimary: var(--colorPrimary40, #325d88);
--barSuccess: var(--colorSuccess40, #93c54b);
--barCalm: var(--colorCalm40, #29abe0);
--barWarning: var(--colorWarning40, #f47c3c);
--barDanger: var(--colorDanger40, #d9534f);
--barLight: var(--colorLight40, #f8f5f0);
--barStable: var(--colorStable40, #f8f8f8);
--barRoyal: var(--colorRoyal40, #886aea);
--barDark: var(--colorDark40, #3e3f3a);
/* Componentes - Footer with icon */
--backgroundDefault: var(--colorDefault40, #3e3f3a);
--backgroundPrimary: var(--colorPrimary40, #325d88);
--backgroundSuccess: var(--colorSuccess40, #93c54b);
--backgroundCalm: var(--colorCalm40, #29abe0);
--backgroundWarning: var(--colorWarning40, #f47c3c);
--backgroundDanger: var(--colorDanger40, #d9534f);
--backgroundLight: var(--colorLight40, #f8f5f0);
--backgroundStable: var(--colorStable40, #f8f8f8);
--backgroundRoyal: var(--colorRoyal40, #886aea);
--backgroundDark: var(--colorDark40, #3e3f3a);
--tabsIconDefault: var(--colorPrimary40, #325d88);
--tabsIconPrimary: var(--textColorPrimary40, #ffffff);
--tabsIconSuccess: var(--textColorSuccess40, #ffffff);
--tabsIconCalm: var(--textColorCalm40, #ffffff);
--tabsIconWarning: var(--textColorWarning40, #ffffff);
--tabsIconDanger: var(--textColorDanger40, #ffffff);
--tabsIconLight: var(--textColorLight40, #ffffff);
--tabsIconStable: var(--textColorStable40, #444444);
--tabsIconRoyal: var(--textColorRoyal40, #ffffff);
--tabsIconDark: var(--textColorDark40, #ffffff);
/* End - Variables used exclusively in the color palette property */
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.button span {
font-weight: 400;
}
.stable,
a.stable,
.color-stable {
color: var(--colorStable50, #d9d9d9);
}
.light,
a.light,
.color-light {
color: var(--colorLight50, #b5b5ad);
}
a,
a:focus,
a:active,
a:hover {
color: var(--colorSuccess40, #93c54b);
}
/* Login */
.login-bg {
background: var(--backgroundLogin40, #ffffff);
}
.login-mobile .item-input input::placeholder {
color: var(--textColor30, #878785);
}
.login-mobile input:focus,
.login-mobile input {
border-bottom: 1px solid var(--textColor30, #878785);
}
.login-mobile .button.button-positive,
.login-mobile .button {
text-transform: capitalize;
letter-spacing: 0;
background: var(--colorPrimary40, #325d88);
border-color: transparent;
color: var(--textColorPrimary40, #ffffff);
}
.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 {
color: var(--textColorPrimary40, #ffffff);
background: var(--colorPrimary50, #2c5177);
}
.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);
}
.login-mobile input::placeholder {
color: var(--textColor30, #878785);
}
#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, #3e3f3a);
}
/* Abas */
.tabs-striped.background-default .tabs {
background: var(--colorDefault40, #474949);
}
.tabs-striped.tabs-icon-default .tab-item.active,
.tabs-striped.tabs-icon-default .tab-item.activated {
color: var(--textColorDefault40, #474949);
border-color: var(--textColorDefault40, #474949);
}
.tabs-striped.tabs-icon-default .tab-item {
color: var(--textColorDefault40, #474949);
}
/* color - abas */
/* icon-theme-light */
div.crn-ion-segment-light.icon-theme-light-default li a,
.ion-segment-default li a {
color: var(--colorDefault40, #3e3f3a);
}
div.crn-ion-segment-light.icon-theme-light-assertive li a,
.ion-segment-assertive li a {
color: var(--colorDanger40, #ef473a);
}
div.crn-ion-segment-light.icon-theme-light-balanced li a,
.ion-segment-balanced li a {
color: var(--colorSuccess40, #33cd5f);
}
div.crn-ion-segment-light.icon-theme-light-energized li a,
.ion-segment-energized li a {
color: var(--colorWarning40, #ffc900);
}
div.crn-ion-segment-light.icon-theme-light-calm li a,
.ion-segment-calm li a {
color: var(--colorCalm40, #11c1f3);
}
div.crn-ion-segment-light.icon-theme-light-positive li a,
.ion-segment-positive li a {
color: var(--colorPrimary40, #387ef5);
}
div.crn-ion-segment-light.icon-theme-light-royal li a,
.ion-segment-royal li a {
color: var(--colorRoyal40, #886aea);
}
div.crn-ion-segment-light.icon-theme-light-dark li a,
.ion-segment-dark li a {
color: var(--colorDark40, #444444);
}