____ Trustify ____


Base colors Pallets


$white : #fff;
$black : #000;
$french-blue: #486db5;
$pale-teal: #81c7b0;
$light-mustard: #f6cc62;
$night-rider: #333;
$bluish-grey: #868a8d;
$brown-grey: #b0b0b0;
$very-light-pink: #ccc;
$ice: #e7e8e8;
$rouge: #a6192e;
$pinkish-tan: #daac7a;
$leafy-green: #43ce3f;



____Fonts____



Font Weights


$font_light : 300 ; $font_regular : 400; $font_medium : 600; $font_semi_bold : 700 ; $font_bold : 900 ;

Font Extends


%extend_ff_lato : Lato %extend_ff_dino : Dino 2014

____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.


Header


/* Heading 1: h1 */
font-family: DIN2014-ExtraLight;
font-size: 60px;
color: #FFFFFF;
letter-spacing: -2px;


Heading 2


/* Heading 2: h2 */
font-family: DIN2014-Light;
font-size: 42px;
color: #333333;
letter-spacing: 0;


Heading 3


/* Heading 3: h3 */
font-family: Lato-Light;
font-size: 30px;
color: #868A8D;
letter-spacing: 0;


List Style Type


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


____Buttons and Button type Links____


Selectors :: %green-btn

Selectors :: %blue-btn

Selectors :: %yellow-btn


____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

>