____ Yeah-Mobi Style Guide ____


Base colors Pallets


$white : #fff;
$black: #0000;
$turquoise-blue: #00acc8;
$deep-sea-blue: #00567d;
$water-blue: #0d9ddb;
$orangey-yellow: #feb819;
$greyish-brown: #414141;
$warm-grey: #737373;
$greyish: #aaaaaa;
$pinkish-grey: #c8c8c8;
$cool-grey: #e6e6e6;
$pale-grey: #f1f5f7;
$tealish: #3fcec4;
$manatee: #939598;

____Fonts____


Font families


Aktiv

@extend .extend_ff_aktiv;

Poppins

@extend .extend_ff_poppins;

Font Weights


$aktiv-light: 300; $aktiv-regular: 400; $aktiv-medium: 500; $aktiv-bold: 700;
$poppins-light: 300; $poppins-regular: 400; $poppins-medium: 500; $poppins-bold: 700;

____Typography____


Body / Paragaraphs

Lorem Ipsum passage and generate your own text using any number of characters, words, sentences or paragraphs. Commonly used as placeholder text in the graphic and print industries, Lorem Ipsum's origins extend far back to a scrambled Latin passage from Cicero in the middle ages.



Heading 1

    Selectors :: .H1Left-Dark


Heading 2

    Selectors :: .H2Left-Dark


Heading 3

    Selectors :: .H3Left-Dark


Heading 4

    Selectors :: .H4Left-Dark


Heading5

    Selectors :: .H5Left-Dark


List Style Type


Selector:: .list-item-correct
  • Vestibulum id ligula porta felis euismod semper
  • Vestibulum id ligula porta felis euismod semper


____Buttons and Button type Links____


Selectors :: .banner-pink-button


____Form Elements____


Input/ Select/ Textarea fields





Form field's validation states


Selectors :: .mage-error

Selectors :: .valid



Form field's Disabled state



Selectors :: .disabled
Html Attribute disabled="true" / disabled

Form Checkbox & Radio Button