gaf-mobile/app/styles/themes/variables.less

GAF mobile Web site

/*  Variables
    1. Max supported site width - Is equivalent to Galaxy S4 in landscape
    2. Provides a default top and bottom padding to section elements
    3. Constrain width and define side padding for section elements
    4. Primary colour variables - Note: not yet finalised
    5. Adjusts height of headers and all affected selectors site-wide
*/

@import "typography.less";

/* Global */
//*****************************************
@body-bg: #f0f0f0;
@body-bg-light: #ffffff;
@border: 1px solid @septenary-color-xlight;
@border-radius: 4px;
@padding: 16px;
@max-width: 640px; // 1.

@hero-bg: #1a7ab6;
@large-icon: #98caf1;
@star-ratings: #ffc105; // This is not ideal but it matches the background-image svg's.
@pvp-btn: #fa4052;

/* Site Bg Color */
@site-bg--mid: #fafcff;
@site-bg--dark: #2a313f;

/* Z-Index stacking order */
@zindex-snap-drawer: 1;
@zindex-snap-content: 2;
@zindex-header-secondary: 3;
@zindex-header: 4;
@zindex-popover: 5;
@zindex-modal: 6;
@zindex-overlay: 7;


// 2.
.default-vertical-padding  {
    padding-top: @padding;
    padding-bottom: @padding;
}

// 3.
.section-inner {
    position: relative;
    max-width: @max-width;
    padding-left: @padding;
    padding-right: @padding;
    margin: 0 auto;
}

/**
 * Spacing values
 * https://confluence.flnltd.com/display/FREEL/Spacings
 */
@spacing-xxsmall: 4px;
@spacing-xsmall: 8px;
@spacing-small: 16px;
@spacing-mid: 24px;
@spacing-large: 32px;
@spacing-xlarge: 48px;
@spacing-xxlarge: 64px;
@spacing-xxxlarge: 72px;
@spacing-xxxxlarge: 96px;

/* Navigation */
//*****************************************
@header-height: 56px; // 5.
@second-nav-bg: @body-bg;
@secondary-header-height: 44px; // 5.

@snap-bg: @quaternary-color-xdark;
@snap-bg-dark: @quaternary-color-xxdark;
@snap-border: @quaternary-color-dark;
@snap-footer-height: 35px;
@snap-drawer-text: #B6B8BB;
@snap-drawer-text--active: @text-color-light;
@snap-footer-text: @quaternary-color-xlight;

@announcement-height: 74px;

/* Typography */
//*****************************************
@type-size-huge: 42px;
@type-size-xxxlge: 30px;
@type-size-xxlge: 26px;
@type-size-xlge: 22px;
@type-size-lge: 18px;
@type-size-mid: 16px;
@type-size: 14px;
@type-size-sml: 12px;
@type-size-xsml: 11px;

@type-weight-light: 300;
@type-weight-regular: 400;
@type-weight-medium: 700;
@type-weight-bold: 900;

@text-color-light: @septenary-color-xxxlight;
@text-color-mid: @quaternary-color-light;
@text-color-dark: @septenary-color-xxdark;
@text-color-xdark: #232727;

@link-color: #2f88cc;
@link-color-hover: #2470a9;

.mob-primary-font {
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    line-height: 1.3em;
    font-weight: @type-weight-regular;
}

/* Border Color */
//*****************************************
@border-color: #eaeaea;
@border-color--dark: @quaternary-color-xxxlight;

/* Forms */
//*****************************************
@input-focus: @info-notify-color;
@input-height: 46px;
@input-type-size: 14px;
@input-border-color: @quaternary-color-xxxlight;
@input-border-radius: 3px;

@input-placeholder-color: #75787d;

/* tables */
//*****************************************
@table-hl-color:#fffdd8;
@table-hl-border-color:#e5e4c0;

/* Home page - Categories */
//*****************************************
@category-color-01: #48d7d7;
@category-color-02: #fa5072;
@category-color-03: #ffa338;
@category-color-04: #ffc006;
@category-color-05: #cc3232;
@category-color-06: #4dbfe9;

/* social media */
//*****************************************
@social-media-icon-color:#fff;
@facebook-color:#3b5998;
@linkedin-color:#1683bb;
@twitter-color:#25a8e0;
@gplus-color:#ce3633;
@youtube-color:#ce322e;
@rss-color:#ef802e;
@instagram-color:#2e5e86;

/* Upgrade Tags */
//*****************************************
@featured-color:#eb860e;
@private-color:#ffa33b;
@assisted-color:#895acc;
@urgent-color:#d22c02;
@recommended-color:#d22c02;
@sealed-color:#66c8ec;
@fulltime-color:#71be7c;
@nda-color:#006ca5;
@extend-color:@septenary-color;

/* Notification colors */
//*****************************************

@common-notify-color: @quaternary-color-xdark;
@success-notify-color: @quinary-color;
@error-notify-color: @senary-color-light;
@warning-notify-color: @tertiary-color;
@bid-notify-color: @primary-color;
@info-notify-color: @primary-color-dark;

/* Cards */
//*****************************************
@cards-bg-color: @site-bg--mid;

/* Style Guide Colors */
//*****************************************

/**
 * Colors
 *
 * Currently available colors
 *
 * Styleguide 1
 */

/**
 * Primary Colors
 *
 * #f2fafd - @primary-color-xxxxlight
 * #ccedf9 - @primary-color-xxxlight
 * #99daf3 - @primary-color-xxlight
 * #66c8ec - @primary-color-xlight
 * #33b5e6 - @primary-color-light
 * #00a3e0 - @primary-color
 * #0088c3 - @primary-color-dark
 * #006ca5 - @primary-color-xdark
 * #00578a - @primary-color-xxdark
 * #004770 - @primary-color-xxxdark
 *
 * Markup: colors.html
 *
 * Styleguide 1.1
 */

/* Blues */
@primary-color-xxxxlight:#e5f7ff;
@primary-color-xxxlight:#c3ecfe;
@primary-color-xxlight:#a4def5;
@primary-color-xlight:#5cc5ee;
@primary-color-light:#34b5e8;
@primary-color:#17a1e6;
@primary-color-dark:#0088cf;
@primary-color-xdark:#227dc4; /* Please don't use this colour */
@primary-color-xxdark:#005c95; /* Please don't use this colour */
@primary-color-xxxdark: #0e4369;

/**
 * Secondary Colors
 *
 * #fedce3 - @secondary-color-xxxlight
 * #fdb9c7 - @secondary-color-xxlight
 * #fc96aa - @secondary-color-xlight
 * #fb738e - @secondary-color-light
 * #fa5072 - @secondary-color
 * #ed4469 - @secondary-color-dark
 * #e0375f - @secondary-color-xdark
 * #d42856 - @secondary-color-xxdark
 * #c8154c - @secondary-color-xxxdark
 *
 * Markup: colors.html
 *
 * Styleguide 1.2
 */

/* Pinks */
@secondary-color-xxxlight:#ffc4d9;
@secondary-color-xxlight:#ff8eb6;
@secondary-color-xlight:#ff588e;
@secondary-color-light:#ff437d;
@secondary-color: #f52068;
@secondary-color-dark:#e91260;
@secondary-color-xdark:#e3005b; /* Please don't use this colour */
@secondary-color-xxdark:#dc0057; /* Please don't use this colour */
@secondary-color-xxxdark:#b20142;

/**
 * Tertiary Colors
 *
 * #ffe9cf - @tertiary-color-xxxlight
 * #ffd39f - @tertiary-color-xxlight
 * #ffb763 - @tertiary-color-xlight
 * #ffa133 - @tertiary-color-light
 * #ff910f - @tertiary-color
 * #f28507 - @tertiary-color-dark
 * #e67e07 - @tertiary-color-xdark
 * #d97707 - @tertiary-color-xxdark
 * #cc7006 - @tertiary-color-xxxdark
 *
 * Markup: colors.html
 *
 * Styleguide 1.3
 */

/* Oranges */
@tertiary-color-xxxlight:#fffad4;
@tertiary-color-xxlight:#ffeba8;
@tertiary-color-xlight:#ffc24e;
@tertiary-color-light:#ffa32d;
@tertiary-color:#fc8c14;
@tertiary-color-dark:#f77d0e;
@tertiary-color-xdark:#f57207; /* Please don't use this colour */
@tertiary-color-xxdark:#e96800; /* Please don't use this colour */
@tertiary-color-xxxdark:#ad4d00;


/**
 * Quaternary Colors
 *
 * #f4f4f4 - @quaternary-color-xxxxxlight
 * #ededee - @quaternary-color-xxxxlight
 * #c8c9cc - @quaternary-color-xxxlight
 * #a3a5a9 - @quaternary-color-xxlight
 * #7e8187 - @quaternary-color-xlight
 * #595c65 - @quaternary-color-light
 * #464a53 - @quaternary-color
 * #3c3f47 - @quaternary-color-dark
 * #31343b - @quaternary-color-xdark
 * #26282e - @quaternary-color-xxdark
 * #1c1d21 - @quaternary-color-xxxdark
 *
 * Markup: colors.html
 *
 * Styleguide 1.4
 */

/* Charcoals */
@quaternary-color-xxxxxlight: #F7F7F7;
@quaternary-color-xxxxlight: #F0F0F0;
@quaternary-color-xxxlight: #DEDEDE;
@quaternary-color-xxlight: #BEC0C2;
@quaternary-color-xlight: #75787d;
@quaternary-color-light: #4D525B;


@quaternary-color: #363f4d;
@quaternary-color-dark: #2b3340;
@quaternary-color-xdark: #1f2836;
@quaternary-color-xxdark: #161e2c;
@quaternary-color-xxxdark: #0e1724;


/**
 * Quinary Colors
 *
 * #e3f4e1 - @quinary-color-xxxlight
 * #c7e9c2 - @quinary-color-xxlight
 * #a5db9c - @quinary-color-xlight
 * #89cf7e - @quinary-color-light
 * #74c767 - @quinary-color
 * #6dba61 - @quinary-color-dark
 * #65ad5a - @quinary-color-xdark
 * #5ea154 - @quinary-color-xxdark
 * #56944d - @quinary-color-xxxdark
 *
 * Markup: colors.html
 *
 * Styleguide 1.5
 */

/* Green */
@quinary-color-xxxlight:#ddf5d3;
@quinary-color-xxlight:#c2ebbc;
@quinary-color-xlight:#95de90;
@quinary-color-light:#72cc72;
@quinary-color:#5dc26a;
@quinary-color-dark:#4fb55d;
@quinary-color-xdark:#379e54; /* Please don't use this colour */
@quinary-color-xxdark:#2a934d; /* Please don't use this colour */
@quinary-color-xxxdark:#2f6543;

/**
 * Senary Colors
 *
 * #f5d6d6 - @senary-color-xxxlight
 * #ebadad - @senary-color-xxlight
 * #de7a7a - @senary-color-xlight
 * #d45151 - @senary-color-light
 * #cc3232 - @senary-color
 * #bf2a2a - @senary-color-dark
 * #b32727 - @senary-color-xdark
 * #a62424 - @senary-color-xxdark
 * #992222 - @senary-color-xxxdark
 *
 * Markup: colors.html
 *
 * Styleguide 1.6
 */

/* Red */
@senary-color-xxxlight: #ffcdc7;
@senary-color-xxlight: #ffb7a3;
@senary-color-xlight: #ff624d;
@senary-color-light: #f84438;
@senary-color: #eb3730;
@senary-color-dark: #e02a28;
@senary-color-xdark: #d31721; /* Please don't use this colour */
@senary-color-xxdark: #c20014; /* Please don't use this colour */
@senary-color-xxxdark: #891b21;

/**
 * Septenary Colors
 *
 * #fff - @septenary-color-xxxlight
 * #eee - @septenary-color-xxlight
 * #ccc - @septenary-color-xlight
 * #aaa - @septenary-color-light
 * #767676 - @septenary-color
 * #555 - @septenary-color-dark
 * #444 - @septenary-color-xdark
 * #333 - @septenary-color-xxdark
 * #000 - @septenary-color-xxxdark
 *
 * Markup: colors.html
 *
 * Styleguide 1.7
 */

/* Mono */
@septenary-color-xxxlight:#fff;
@septenary-color-xxlight:#eee;
@septenary-color-xlight:#ccc;
@septenary-color-light:#aaa;
@septenary-color:#767676;
@septenary-color-dark:#555;
@septenary-color-xdark:#444;
@septenary-color-xxdark:#333;
@septenary-color-xxxdark:#000;