benivo-ui-library/variables.less

Benivo UI library

// Variables
// All variables
//

//local variables
@gpresourceUrl: "https://gpresource.blob.core.windows.net";

// Breakpoints
@xl: ~"only screen and (min-width : 1200px)";
@lg: ~"only screen and (min-width : 992px)";
@md: ~"only screen and (min-width : 768px)";
@sm: ~"only screen and (min-width : 576px)";
@xs: ~"only screen and (max-width : 575px)";

@xl-max: ~"only screen and (max-width : 1199px)";
@lg-max: ~"only screen and (max-width : 991px)";
@md-max: ~"only screen and (max-width : 767px)";

//Containers
// @container-max-width: 1164px;
@gatter: 12px;

//Content
@content-max-width: 710px;

//Icons
//
@chat-icon-img: url('@{gpresourceUrl}/assets/img/icons/integrations-freshchat%403x.jpg');
@si-icon-img: url('@{gpresourceUrl}/assets/img/icons/si-icon.svg');
@si-icon-img-white: url('@{gpresourceUrl}/assets/img/icons/si-icon-white.svg');
@google-icon: url('@{gpresourceUrl}/assets/img/icons/google-icon.png');
@lock-icon: url('@{gpresourceUrl}/assets/img/icons/lock-icon.svg');

// Spacing
@spacer: 1rem;
// Borders
@border-radius: 4px;
// Box shadow
@box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);

// Links
//
// Style anchor elements.
@link-decoration: none;
@link-hover-decoration: underline;
@link-transition: all 0.2s ease-out;
@link-style: normal;
@link-weight: @font-weight-normal;
// Fonts
//
// Font, line-height, and color for body text, headings, and more.
// stylelint-disable value-keyword-case
@font-family: proxima-nova, sans-serif;
// stylelint-enable value-keyword-case
@font-size: 1rem; // Assumes the browser default, typically `16px`
@font-size-extra-lg: (@font-size * 1.625); //26px
@font-size-lg: (@font-size * 1.25);
@font-size-sm: (@font-size * .875); //14px
@lg-font-size: @font-size * 1.375; //22px
@small-font-size: .875rem; //14px
@extra-small-font-size: .75rem; //12px
@extra-small-line-height: 1.5;

@font-weight-light: 300;
@font-weight-normal: 400;
@font-weight-medium: 500;
@font-weight-semibold: 600;
@font-weight-bold: 700;

@font-weight: @font-weight-normal;
@line-height: 1.4;
@letter-spacing: 1;

// Headdings
@headings-margin-top: (@spacer * 1.25);
@headings-margin-bottom: (@spacer * 1.375);
@headings-font-family: inherit;
@headings-font-weight: @font-weight-semibold;
@headings-line-height: 1.4;
@heading-text-transform: none;

@h1-font-size: @font-size * 2.25; // 36px
@h1-font-family: @headings-font-family;
@h1-font-weight: @headings-font-weight;
@h1-line-height: @headings-line-height;
@h1-text-transform: @heading-text-transform;

@h2-font-size: @font-size * 1.625; //26px
@h2-font-family: @headings-font-family;
@h2-font-weight: @headings-font-weight;
@h2-line-height: @headings-line-height;
@h2-text-transform: @heading-text-transform;

@h3-font-size: @font-size * 1.375; //22px
@h3-font-family: @headings-font-family;
@h3-font-weight: @headings-font-weight;
@h3-line-height: @headings-line-height;
@h3-text-transform: @heading-text-transform;

@h4-font-size: @font-size * 1.25; //20px
@h5-font-size: @font-size * 1.125; //18px

@h6-font-size: @font-size; //16px
@h6-font-family: @headings-font-family;
@h6-font-weight: @headings-font-weight;
@h6-line-height: @headings-line-height;
@h6-text-transform: @heading-text-transform;

// Paragraphs
@mark-padding: .2em;

// Horizontal rule
@hr-margin-y: @spacer * 2;
@hr-border-width: .2em;

//z-index
@zindex-dropdown: 1000;
@zindex-sticky: 1020;
@zindex-fixed-low-priority: 1025;
@zindex-fixed: 1030;
@zindex-fixed-high-priority: 1035;
@zindex-modal-backdrop: 1040;
@zindex-offcanvas: 1050;
@zindex-modal: 1060;
@zindex-popover: 1070;
@zindex-tooltip: 1080;
@z-index-tooltip-low-priority: 1020;
@z-index-info-banner-low-priority: 900;
@zindex-dropdown-high-priority: 1090;

// List
@dt-font-weight: @font-weight-bold;
@list-inline-padding: .5rem;
// Table
@tabel-padding: 12px 10px;
@tabel-font-size: @small-font-size;
@tabel-font-weight: @font-weight-normal;
@table-th-font-size: @extra-small-font-size;
@table-th-text-transform: uppercase;
@tabel-th-font-weight: @font-weight-bold;
// Si-icon
@si-width: 1.5rem;
@si-height: 1.25rem;
//
// Buttons
//
@btn-font-family: @font-family;
@btn-font-weight: @font-weight-semibold;
@btn-font-size: 0.875rem;
@btn-xs-font-size: .875rem;
@btn-sm-font-size: .875rem;
@btn-md-font-size: 1rem;
@btn-lg-font-size: 1rem;
@btn-xl-font-size: 1.1rem;
@btn-line-height: 1;
@btn-letter-spaceing: normal;
@btn-text-decoration: none;
@btn-text-style: normal;
@btn-text-transform: none;
@btn-brd-radius: .5rem;
@btn-brd: 1px;
@btn-brd-color: rgba(0, 0, 0, 0.12);
@btn-border: @btn-brd solid transparent;
@btn-transition: all 0.2s ease-out;
@btn-mrg-right: @spacer;
@btn-min-width: 150px;
// Default Button
@default-btn-bg-gradient: none;
@default-btn-hover-bg-gradient: none;

// Secondary Button
@secondary-btn-bg-gradient: none;
@secondary-btn-hover-bg-gradient: none;

// Button sizes
@btn-padding: .5rem .75rem;
@btn-xs-padding: .5rem .75rem;
@btn-sm-padding: .625rem .875rem;
@btn-md-padding: .625rem 1rem;
@btn-lg-padding: .75rem 1.1rem;
@btn-xl-padding: .1rem 1.8rem;
//
// Forms
//
//form label
@form-label-font-size: .875rem;
@form-label-font-wight: @font-weight-semibold;
//Form fields
@form-border-radius: @border-radius;
@form-box-shadow: none;
@form-line-height: 1.4;
@form-line-height-mobile: 2;
@form-font-family: inherit;
@form-font-size: 1rem;
@form-font-weight: @font-weight-normal;

// Datepicker
//
@calendarBorder: solid 1px var(--border-200);
@calendarBoxShadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08);
@calendarFont: @font-family;
@calendarFontWeight: @font-weight-normal;
@calendarFontSize: .85rem; // 14px
@calendarHeaderFontSize: @calendarFontSize;

@calendarWeekDaysBorder: 1px solid rgba(223, 227, 233, 0.5);
@calendarWeekDaysFontSize: 10px;

@calendarDayBorder: 1px solid transparent;
@calendarDayBrdRadius: 50%;
@calendarDayFontWeight: @font-weight-bold;

//Header
//
@header-box-shadow: 0 1px 0 rgba(79, 90, 101, 0.1);
@header-height: 70px;
@header-bg-gradient: none;
@header-bg-gradient-str: transparent;
@header-bg-gradient-end: transparent;

//Branding
@branding-img-url: "";
@branding-padding-top: 15px;
@branding-padding-bottom: @branding-padding-top;
@bnv-logo-dark: url('https://gpresource.blob.core.windows.net/assets/img/logo/benivo-logo-dark.svg');
@bnv-logo-dark-small: url('https://gpresource.blob.core.windows.net/assets/img/logo/benivo-logo-dark-small.svg');
@bnv-powered-dark: url('https://gpresource.blob.core.windows.net/assets/img/logo/powered-benivo-dark.svg');
@bnv-powered-light: url('https://gpresource.blob.core.windows.net/assets/img/logo/powered-benivo-light.svg');

//Navigation
@nav-font-weight: @font-weight-normal;
@nav-font-family: @font-family;
@nav-font-style: normal;
@nav-text-transform: none;