cronapp-framework-mobile-js/components/css/app.css

Javascript library for CronApp's projects

@import "tabs-color.css";
@import 'background-color.css';
@import 'icon-size.css';
@import 'crn-ion-segment.css';
@import 'crn-ion-footer-bar.css';
@import 'color-default.css';

:root {
    --white: #ffffff;
    --white_focus_hover: #dfdfdf;
    --gray: #333333;
    --gray_focus_hover: #2d2d2d;
    --black: #000000;
    --black_focus_hover: #7b7b7b;
    --blue: #0247FE;
    --blue_focus_hover: #01278b;
    --light-blue: #85A5FF;
    --light-blue_focus_hover: #495a8c;
    --dark-blue: #00217A;
    --dark-blue_focus_hover: #001243;
    --purple: #3D01A4;
    --purple_focus_hover: #21015a;
    --light-purple: #B285FF;
    --light-purple_focus_hover: #61498c;
    --dark-purple: #2D007A;
    --dark-purple_focus_hover: #190043;
    --red: #FE2712;
    --red_focus_hover: #8b150a;
    --light-red: #FE8F84;
    --light-red_focus_hover: #8b4e48;
    --dark-red: #7A0B00;
    --dark-red_focus_hover: #430600;
    --orange: #FB9B02;
    --orange_focus_hover: #895501;
    --light-orange: #FFD085;
    --light-orange_focus_hover: #8c7249;
    --dark-orange: #7A4B00;
    --dark-orange_focus_hover: #432900;
    --yellow: #FFFF33;
    --yellow_focus_hover: #8c8c1c;
    --light-yellow: #FFFF85;
    --light-yellow_focus_hover: #8c8c49;
    --dark-yellow: #7A7A00;
    --dark-yellow_focus_hover: #434300;
    --green: #66B032;
    --green_focus_hover: #38601b;
    --light-green: #B7FF85;
    --light-green_focus_hover: #648c49;
    --dark-green: #337A00;
    --dark-green_focus_hover: #1c4300;
}

.font-size-100 {
    font-size: 100%;
}

.font-size-200 {
    font-size: 200%;
}

.font-size-300 {
    font-size: 300%;
}

.font-size-400 {
    font-size: 400%;
}

.font-size-500 {
    font-size: 500%;
}

.font-size-600 {
    font-size: 600%;
}

.font-size-700 {
    font-size: 700%;
}

.top-13 {
    top: 13%;
}

.top-50 {
    top: 50%;
}

.top-78 {
    top: 78%;
}

.font-size-small {
  font-size: var(--textSmallSize, 12px);
}

.font-size-normal {
    font-size: var(--textNormalSize, 14px);
}

.font-size-default {
    font-size: var(--textMediumSize, 16px);
}

.font-size-big {
    font-size: var(--textBigSize, 18px);
}

.font-size-extra-big {
    font-size: var(--textExtraBigSize, 23px);
}

.icon-font-size-default {
    font-size: var(--iconSizeDefault, 28px);
}

.icon-font-size-small {
    font-size: var(--iconSizeSmall, 25px);
}

.icon-font-size-big {
    font-size: var(--iconSizeBig, 31px);
}

.icon-font-size-extra-big {
    font-size: var(--iconSizeExtraBig, 34px);
}

.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;
  }