@odyzeo/form-toggle/src/less/variables.less

Odyzeo form toggle component with Vue

/**
* Layout
*/
@break-f-min: 1600px;
@break-f-max: (@break-f-min - 1);
@container-width: 1180px;
@break-l-min: 1240px;
@break-l-max: (@break-l-min - 1);
@break-d-min: 1024px;
@break-d-max: (@break-d-min - 1);
@break-t-min: 768px;
@break-t-max: (@break-t-min - 1);
@break-m-min: 640px;
@break-m-max: (@break-m-min - 1);
@break-s-min: 414px; // iPhone 6+
@break-s-max: (@break-s-min - 1);

/**
* Container
*/
@desktop-container-padding: 20px;
@tablet-container-padding: 15px;
@mobile-container-padding: 10px;

/**
* Grid
*/
@grid-padding-s: 5px;
@grid-padding-m: 5px;
@grid-padding-t: 5px;
@grid-padding-d: 5px;
@grid-padding-l: 5px;
@grid-padding-f: 5px;

/**
* Fonts
*/
@font-family--default: 'Roboto', sans-serif;
@font-family--primary: 'Lato', sans-serif;
@font-size--xxsmall: 11px;
@font-size--xsmall: 12px;
@font-size--small: 14px;
@font-size: 15px;
@font-size--smedium: 16px;
@font-size--medium: 18px;
@font-size--large: 22px;
@font-size--xlarge: 28px;
@font-size--xxlarge: 36px;

@line-height: 1.5;

/**
* Colors
*/
@color--default: #959595;
@color--primary: #e4146b;
@color--secondary: #0092a9;
@color--background: #fff;
@color--danger: #df4012;
@color--success: #38df2f;
@color--info: #1399c0;
@color--facebook: #2e4da7;
@color--twitter: #07a3f4;
@color--google-plus: #ce4136;
@color--linkedin: #1676b7;
@color--dark-grey: #1b1b1b;
@color--focus: #f4a47d;
@color--radio: #50bccb;
@color--block-title: #404040;

/**
* Buttons
*/
@btn-color: #fff;
@btn-background: @color--primary;
@btn-padding: 10px 15px;
@btn-padding--small: 7px 12px;
@btn-padding--large: 12px 17px;
@btn-padding--big: 15px 20px;
@btn-group-margin: 7px;
@btn-radius: 2px;

/**
* Z indexes
*/
@z-hidden: -1;
@z-overlay: 1000;
@z-popup: 10000;
@z-max: 16200;
@z-alerts: 12000;

/**
* Dashboard
*/
@dashboard--container-width: 1200px;