File Manager

//COLORS
@color-text-prime: #354052;
@color-text-second: #7F8FA4;
@color-divider-gray: #E2E6EC;
@color-icon: #616E7C;
@color-url: #7F8FA4;
//@color-highlight: #fbfbfb;
@color-highlight: #f9f9f9;
@color-white: #ffffff;
@color-gray: #D3DDEA;
@color-light-gray: #f2f3f5;
@color-orange: #FFA700;
@color-green: #5FCE19;
@color-blue: #1A84EE;
@color-red: #ff1563;
@color-yellow: #FFD400;
@color-pink: #FF1563;
@color-red-dark: #FF0040;
@color-dark-gray: #A9B2BC;

//-------------------------------

//WIDTHS
@page-wrap: 1600px;

//HEIGHTS
@wrap-min-height: 720px;

//FONT
@import "font";

//font weight
@light: 300;
@regular: 400;
@medium: 500;
@bold: 700;

//font family
@roboto: 'Roboto Amelia', sans-serif;

//-------------------------------

//font size
@huge-fs: 40px;
@big-fs: 30px;
@semi-big-fs: 24px;
@medium-fs: 20px;
@semi-medium-fs: 18px;
@regular-fs: 16px;
@small-fs: 14px;
@mini-fs: 12px;

//color
@h1-color: @color-text-prime;
@h2-color: @color-text-prime;
@h3-color: @color-text-prime;
@h4-color: @color-text-prime;
@h5-color: @color-text-prime;

//weight
@h1-fw: @regular;
@h2-fw: @regular;
@h3-fw: @medium;
@h4-fw: @medium;

//line height
@h1-lh: 1.5;
@h2-lh: 1.5;
@h3-lh: 1.5;
@h4-lh: 1.5;

@h1-fs: @medium-fs;
@h2-fs: @medium-fs;
@h3-fs: @regular-fs;
@h4-fs: @regular-fs;

//padding and margin
@h1-padding: 28px 0 28px 0;
@padding-big: 24px;
@padding-medium: 16px;
@padding-small: 8px;

@margin-big: 24px;
@margin-medium: 16px;
@margin-small: 8px;

//-------------------------------

// MEDIA QUERIES

//brakepoints
@bp-xsmall-max: 479px;
@bp-xsmall-min: 481px;
@bp-small-max: 767px;
@bp-small-min: 768px;
@bp-medium-max: 991px;
@bp-medium-min: 992px;
@bp-large-max: 1199px;
@bp-large-min: 1200px;
@bp-xlarge-max: 1600px;
@bp-xlarge-min: 1601px;

//@media
@less-then-xlarge: ~"only screen and ( max-width:" @bp-xlarge-max ~")";
@less-then-large: ~"only screen and ( max-width:" @bp-large-max ~")";
@less-then-medium: ~"only screen and ( max-width:" @bp-medium-max ~")";
@less-then-small: ~"only screen and ( max-width:" @bp-small-max ~")";
@less-then-xsmall: ~"only screen and ( max-width:" @bp-xsmall-max ~")";

@more-then-xlarge: ~"only screen and ( min-width:" @bp-xlarge-min ~")";
@more-then-large: ~"only screen and ( min-width:" @bp-large-min ~")";
@more-then-medium: ~"only screen and ( min-width:" @bp-medium-min ~")";
@more-then-small: ~"only screen and ( min-width:" @bp-small-min ~")";

@from-small-to-medium: ~"only screen and (min-width:" @bp-small-min ~") and (max-width:" @bp-medium-max ~")";
@from-medium-to-large: ~"only screen and (min-width:" @bp-medium-min ~") and (max-width:" @bp-large-max ~")";
@from-medium-to-xlarge: ~"only screen and (min-width:" @bp-medium-min ~") and (max-width:" @bp-xlarge-max ~")";
@from-large-to-xlarge: ~"only screen and (min-width:" @bp-large-min ~") and (max-width:" @bp-xlarge-max ~")";

//-------------------------------

// BORDERS / DIVIDERS

//border radius

@border-radius: 6px;

//-------------------------------

// BUTTONS

//color
@btn-light-bg: @color-white;
@btn-light-font: @color-white;
@btn-blue-bg: @color-blue;
@btn-dark-font: @color-text-prime;

//font weight
@btn-fw: @medium;

//font size
@btn-xlarge-fs: 15px;
@btn-large-fs: 15px;
@btn-small-fs: 14px;

//border radius
@btn-border-radius: 6px;

//padding
@btn-xlarge-pad: 20px 65px;
@btn-large-pad: 13px 20px;
@btn-medium-pad: 10px 20px;
@btn-small-pad: 10px 15px;

//letter spacing
@btn-letter-spacing: 1px;

//-------------------------------

// SECTIONS

//-------------------------------

@section-padding: 80px 0 50px;

//-------------------------------