FileMaster

Edit File: _variables.less

@custom-font-selected: unselected;
@font-url: "";

& when (@custom-font-selected = unselected) {
 @import "../common/font";
};

& when (@custom-font-selected = selected) {
 @font-face {
  font-family: @font;
  src: url(@font-url) format('woff'), url(@font-url) format('woff2'), url(@font-url);
 }
}

//COLORS
@color-text-second: #354052;
@color-divider-gray: #E2E6EC;
@color-icon: #616E7C;
@color-url: #7F8FA4;
@color-highlight: #f9f9f9;
@color-dark-gray: #A9B2BC;
@color-gray: #D3DDEA;
@color-light-gray: #f2f3f5;
//@color-red: #FF4949;
@color-green: #5FCE19;
@color-orange: #FFA700;
@color-blue: #1A84EE;
@color-black: #000000;
@color-red: #FF0000;

//customizable
@color-accent: #1A84EE;
@color-white: #FFFFFF;
@color-text-prime: #354052;
@color-bgr: #FFFFFF;
@color-gradient1: #1A84EE;
@color-gradient2: #0454A2;
@color-dropdown: #FFFFFF;
@color-dropdown-text: #354052;
@color-input: #FFFFFF;
@color-input-text: #354052;

@color-search-filters-bg: #fff;

// sbs - (STEP BY STEP), ssf - (SELECT SERVICE FORM)
@sbs-ssf-bgr-color: #FFFFFF;
@sbs-ssf-text-color: #354052;
@sbs-ssf-input-color: #FFFFFF;
@sbs-ssf-input-text-color: #354052;
@sbs-ssf-dropdown-color: #FFFFFF;
@sbs-ssf-dropdown-text-color: #354052;
// sbs - (STEP BY STEP), cf - (CALENDAR FORM)
@sbs-cf-gradient1: #1A84EE;
@sbs-cf-gradient2: #0454A2;
@sbs-cf-gradient-angle: 135deg;
@sbs-cf-text-color: #FFFFFF;
// sbs - (STEP BY STEP), rsf - (RECURRING SETUP FORM)
@sbs-rsf-gradient1: #1A84EE;
@sbs-rsf-gradient2: #0454A2;
@sbs-rsf-gradient-angle: 135deg;
@sbs-rsf-text-color: #FFFFFF;
@sbs-rsf-input-color: rgba(0, 0, 0, 0);
@sbs-rsf-input-text-color: #FFFFFF;
@sbs-rsf-dropdown-color: #FFFFFF;
@sbs-rsf-dropdown-text-color: #354052;
// sbs - (STEP BY STEP), rdf - (RECURRING DATES FORM)
@sbs-rdf-bgr-color: #FFFFFF;
@sbs-rdf-text-color: #354052;
@sbs-rdf-input-color: #FFFFFF;
@sbs-rdf-input-text-color: #354052;
@sbs-rdf-dropdown-color: #FFFFFF;
@sbs-rdf-dropdown-text-color: #354052;
// sbs - (STEP BY STEP), spf - (SELECT PACKAGE FORM)
@sbs-spf-bgr-color: #FFFFFF;
@sbs-spf-text-color: #354052;
@sbs-spf-input-color: #FFFFFF;
@sbs-spf-input-text-color: #354052;
@sbs-spf-dropdown-color: #FFFFFF;
@sbs-spf-dropdown-text-color: #354052;
// sbs - (STEP BY STEP), pif - (PACKAGE INFO FORM)
@sbs-pif-bgr-color: #FFFFFF;
@sbs-pif-text-color: #354052;
// sbs - (STEP BY STEP), psf - (PACKAGE SETUP FORM)
@sbs-psf-gradient1: #1A84EE;
@sbs-psf-gradient2: #0454A2;
@sbs-psf-gradient-angle: 135deg;
@sbs-psf-text-color: #FFFFFF;
@sbs-psf-input-color: rgba(0, 0, 0, 0);
@sbs-psf-input-text-color: #FFFFFF;
@sbs-psf-dropdown-color: #FFFFFF;
@sbs-psf-dropdown-text-color: #354052;
// sbs - (STEP BY STEP), plf - (PACKAGE LIST FORM)
@sbs-plf-bgr-color: #FFFFFF;
@sbs-plf-text-color: #354052;
// sbs - (STEP BY STEP), caf - (CONFIRMATION APPOINTMENT FORM)
@sbs-caf-bgr-color: #FFFFFF;
@sbs-caf-text-color: #354052;
@sbs-caf-input-color: #FFFFFF;
@sbs-caf-input-text-color: #354052;
@sbs-caf-dropdown-color: #FFFFFF;
@sbs-caf-dropdown-text-color: #354052;
// sbs - (STEP BY STEP), cpf - (CONFIRMATION PACKAGE FORM)
@sbs-cpf-bgr-color: #FFFFFF;
@sbs-cpf-text-color: #354052;
@sbs-cpf-input-color: #FFFFFF;
@sbs-cpf-input-text-color: #354052;
@sbs-cpf-dropdown-color: #FFFFFF;
@sbs-cpf-dropdown-text-color: #354052;
// sbs - (STEP BY STEP), coa - (CONGRATULATION APPOINTMENT)
@sbs-coa-bgr-color: #FFFFFF;
@sbs-coa-text-color: #354052;
@sbs-coa-input-color: #FFFFFF;
@sbs-coa-input-text-color: #354052;
@sbs-coa-dropdown-color: #FFFFFF;
@sbs-coa-dropdown-text-color: #354052;
// sbs - (STEP BY STEP), cop - (CONGRATULATION PACKAGE)
@sbs-cop-bgr-color: #FFFFFF;
@sbs-cop-text-color: #354052;
@sbs-cop-input-color: #FFFFFF;
@sbs-cop-input-text-color: #354052;
@sbs-cop-dropdown-color: #FFFFFF;
@sbs-cop-dropdown-text-color: #354052;
// cf - (CATALOG FORM), ssf - (SELECT SERVICE FORM)
@cf-ssf-bgr-color: #FFFFFF;
@cf-ssf-text-color: #354052;
@cf-ssf-input-color: #FFFFFF;
@cf-ssf-input-text-color: #354052;
@cf-ssf-dropdown-color: #FFFFFF;
@cf-ssf-dropdown-text-color: #354052;
// cf - (CATALOG FORM), cf - (CALENDAR FORM)
@cf-cf-gradient1: #1A84EE;
@cf-cf-gradient2: #0454A2;
@cf-cf-gradient-angle: 135deg;
@cf-cf-text-color: #FFFFFF;
// cf - (CATALOG FORM), rsf - (RECURRING SETUP FORM)
@cf-rsf-gradient1: #1A84EE;
@cf-rsf-gradient2: #0454A2;
@cf-rsf-gradient-angle: 135deg;
@cf-rsf-text-color: #FFFFFF;
@cf-rsf-input-color: rgba(0, 0, 0, 0);
@cf-rsf-input-text-color: #FFFFFF;
@cf-rsf-dropdown-color: #FFFFFF;
@cf-rsf-dropdown-text-color: #354052;
// cf - (CATALOG FORM), rdf - (RECURRING DATES FORM)
@cf-rdf-bgr-color: #FFFFFF;
@cf-rdf-text-color: #354052;
@cf-rdf-input-color: #FFFFFF;
@cf-rdf-input-text-color: #354052;
@cf-rdf-dropdown-color: #FFFFFF;
@cf-rdf-dropdown-text-color: #354052;
// cf - (CATALOG FORM), psf - (PACKAGE SETUP FORM)
@cf-psf-gradient1: #1A84EE;
@cf-psf-gradient2: #0454A2;
@cf-psf-gradient-angle: 135deg;
@cf-psf-text-color: #FFFFFF;
@cf-psf-input-color: rgba(0, 0, 0, 0);
@cf-psf-input-text-color: #FFFFFF;
@cf-psf-dropdown-color: #FFFFFF;
@cf-psf-dropdown-text-color: #354052;
// cf - (CATALOG FORM), plf - (PACKAGE LIST FORM)
@cf-plf-bgr-color: #FFFFFF;
@cf-plf-text-color: #354052;
// cf - (CATALOG FORM), caf - (CONFIRMATION APPOINTMENT FORM)
@cf-caf-bgr-color: #FFFFFF;
@cf-caf-text-color: #354052;
@cf-caf-input-color: #FFFFFF;
@cf-caf-input-text-color: #354052;
@cf-caf-dropdown-color: #FFFFFF;
@cf-caf-dropdown-text-color: #354052;
// cf - (CATALOG FORM), cpf - (CONFIRMATION PACKAGE FORM)
@cf-cpf-bgr-color: #FFFFFF;
@cf-cpf-text-color: #354052;
@cf-cpf-input-color: #FFFFFF;
@cf-cpf-input-text-color: #354052;
@cf-cpf-dropdown-color: #FFFFFF;
@cf-cpf-dropdown-text-color: #354052;
// cf - (CATALOG FORM), coa - (CONGRATULATIONS APPOINTMENT FORM)
@cf-coa-bgr-color: #FFFFFF;
@cf-coa-text-color: #354052;
@cf-coa-input-color: #FFFFFF;
@cf-coa-input-text-color: #354052;
@cf-coa-dropdown-color: #FFFFFF;
@cf-coa-dropdown-text-color: #354052;
// cf - (CATALOG FORM), cop - (CONGRATULATIONS PACKAGE FORM)
@cf-cop-bgr-color: #FFFFFF;
@cf-cop-text-color: #354052;
@cf-cop-input-color: #FFFFFF;
@cf-cop-input-text-color: #354052;
@cf-cop-dropdown-color: #FFFFFF;
@cf-cop-dropdown-text-color: #354052;
// elf - (EVENT LIST FORM)
@elf-bgr-color: #FFFFFF;
@elf-text-color: #354052;
@elf-input-color: #FFFFFF;
@elf-input-text-color: #354052;
@elf-dropdown-color: #FFFFFF;
@elf-dropdown-text-color: #354052;
// ecf - (EVENT CALENDAR FORM), cef - (CONFIRM EVENT FORM)
@ecf-cef-bgr-color: #FFFFFF;
@ecf-cef-text-color: #354052;
@ecf-cef-input-color: #FFFFFF;
@ecf-cef-input-text-color: #354052;
@ecf-cef-dropdown-color: #FFFFFF;
@ecf-cef-dropdown-text-color: #354052;
// ecf - (EVENT CALENDAR FORM), coe - (CONGRATULATIONS EVENT FORM)
@ecf-coe-bgr-color: #FFFFFF;
@ecf-coe-text-color: #354052;
@ecf-coe-input-color: #FFFFFF;
@ecf-coe-input-text-color: #354052;
@ecf-coe-dropdown-color: #FFFFFF;
@ecf-coe-dropdown-text-color: #354052;

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

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

//WIDTHS
@page-wrap: 1600px;

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

//FONTS
// Roboto
// @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext');

// Lato
// @import url('https://fonts.googleapis.com/css?family=Lato:300,400,700&subset=latin-ext');

// Merriweather
// @import url('https://fonts.googleapis.com/css?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap&css');
// font-family: 'Merriweather', serif;

// Montserrat
// @import url('https://fonts.googleapis.com/css?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap&css');
// font-family: 'Montserrat', sans-serif;

// Mulish
// @import url('https://fonts.googleapis.com/css?family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap&css');
// font-family: 'Mulish', sans-serif;

// Nunito
// @import url('https://fonts.googleapis.com/css?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap&css');
// font-family: 'Nunito', sans-serif;

// Asap Condensed
// @import url('https://fonts.googleapis.com/css?family=Asap+Condensed:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap&css');
// font-family: 'Asap Condensed', sans-serif;

// Open Sans
// @import url('https://fonts.googleapis.com/css?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap&css');
// font-family: 'Open Sans', sans-serif;

// Barlow
// @import url('https://fonts.googleapis.com/css?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap&css');
// font-family: 'Barlow', sans-serif;

// Oswald
// @import url('https://fonts.googleapis.com/css?family=Oswald:wght@200;300;400;500;600;700&display=swap&css');
// font-family: 'Oswald', sans-serif;

// Bitter
// @import url('https://fonts.googleapis.com/css?family=Bitter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap&css');
// font-family: 'Bitter', serif;

// Poppins
// @import url('https://fonts.googleapis.com/css?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap&css');
// font-family: 'Poppins', sans-serif;

// Carme
// @import url('https://fonts.googleapis.com/css?family=Carme&display=swap&css');

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

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

//font size
@big-fs: 24px;
@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: @light;
@h3-fw: @regular;
@h4-fw: @medium;

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

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

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

@margin-extra-big: 56px;
@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-small-to-large: ~"only screen and (min-width:" @bp-small-min ~") and (max-width:" @bp-large-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;

//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;

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

Back