File: D:/HostingSpaces/MBoogaard/oosting-horseriding.com/wwwroot/App_Themes/Global/Skin/variables.less
//
// Variables
// --------------------------------------------------
// Global values
// --------------------------------------------------
@base-unit: 16px;
// Colors
// -------------------------
@color-gray-50: #262524;
@color-gray-70: #403e3d;
@color-gray-80: #504e4c;
@color-gray-90: #696663;
@color-gray-100: #a3a2a2;
@color-gray-130: #bdbbbb;
@color-gray-140: #d6d9d6;
@color-gray-150: #e5e5e5;
@color-gray-160: #f7f7f7;
@color-green-70: #355e00;
@color-green-100: #497d04;
@color-green-120: #95be5f;
@color-green-130: #d7ebbf;
@color-blue-70: #0f6194;
@color-blue-100: #1175ae;
@color-blue-120: #73bae6;
@color-blue-130: #d0e8ed;
@color-red-70: #b12628;
@color-red-100: #e14344;
@color-red-130: #ffdddd;
@color-orange-70: #a15700;
@color-orange-80: #c98209;
@color-orange-100: #f4eac9;
@color-orange-130: #e5e0cb;
@color-purple-100: #784B84;
@color-white: #ffffff;
@color-app-facebook: #3b5998;
@color-app-twitter: #55acee;
// ------------------------
@color-success: @color-green-100;
@color-info: @color-blue-100;
@color-warning: @color-orange-80;
@color-error: @color-red-100;
@body-bg: @color-white;
@text-color: @color-gray-50;
// Links
// -------------------------
@link-color: @color-blue-70;
@link-hover-color: @color-blue-70;
// Typography
// -------------------------
@font-family-sans-serif: "Segoe UI", Helvetica, Verdana, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: "Courier New", monospace;
@font-family-semibold: "Segoe UI Semibold", Helvetica, Verdana, Arial, sans-serif;
@font-family-base: @font-family-sans-serif;
@font-size-base: @base-unit * 0.875; // ~14px
@font-size-large: @base-unit * 1.125; // ~18px
@font-size-huge: @base-unit * 1.5; // ~24px
@font-size-small: @base-unit * 0.75; // ~12px
@line-height-50: @base-unit * 0.625; // ~10px
@line-height-80: @base-unit;
@line-height-100: @base-unit * 1.25; // ~20px
@line-height-150: @base-unit * 1.5;
@line-height-200: @base-unit * 2; // ~32
@headings-font-family: @font-family-base;
@headings-font-weight: bold;
@white-space-width: @base-unit * 0.25;
// Iconography
// -------------------------
@icon-font-path: "./fonts/";
@icon-font-name: "Core-icons";
@icon-size-200: @base-unit * 4; // ~64px App icons on dashboard
@icon-size-150: @base-unit * 2; // ~32px Notifications
@icon-size-130: @base-unit * 1.75; // ~28px Reserved for Kentico logo
@icon-size-100: @base-unit * 1.5; // ~24px Icons in header
@icon-size-80: @base-unit; // ~16px Standard icon size
@icon-size-50: @base-unit * 0.75; // ~12px Tree icons
@icon-size-30: @base-unit * 0.5; // ~8px Only for statuses or indicators
// Icon color on light background
@light-bg-icon-color: @color-gray-70;
@light-bg-icon-hover-color: @color-blue-70;
// Icon color on dark background
@dark-bg-icon-color: @color-gray-100;
// Components
// -------------------------
@padding-base-vertical: @base-unit * 0.25; // ~4px
@padding-base-horizontal: @base-unit; // ~16px
@padding-middle-vertical: @base-unit * 0.375; // ~6px
@padding-middle-horizontal: @base-unit; // ~16px
@padding-large-vertical: @base-unit * 0.625; // ~10px
@padding-large-horizontal: @base-unit; // ~16px
@padding-small-vertical: @base-unit * 0.25; // ~4px
@padding-small-horizontal: @base-unit * 0.5; // ~8px
@padding-xlarge-vertical: @base-unit; // ~16px
@padding-xlarge-horizontal: @base-unit * 1.25; // ~20px
@padding-loader-vertical: @base-unit; // ~16px
@padding-loader-horizontal: @base-unit * 2.5; // ~40px
@padding-350: @base-unit * 3.5; // ~56px
@margin-50: @base-unit * 0.5; // ~8px
@margin-base: @base-unit; // ~16px
@margin-150: @base-unit * 1.5; // ~24px
@border-radius-base: 2px;
@border-radius-large: 3px;
@border-radius-xlarge: 5px;
@border-radius-small: 0px;
@component-active-bg: @color-blue-70;
@caret-width-base: @base-unit * 0.375;
@caret-width-large: @base-unit * 0.375;
// Disabled style for buttons and dropdown menu
@action-disabled-bg: @color-gray-100;
@action-disabled-bg-stripe: @color-gray-130;
@action-disabled-color: @color-gray-90;
// Tables
// -------------------------
@table-cell-padding: @base-unit * 0.375 @base-unit * 0.5;
@table-cell-link: @color-blue-70;
@table-condensed-cell-padding: @base-unit * 0.375;
@table-line-height: @line-height-100;
@table-bg: transparent; // overall background-color
@table-bg-accent: @color-blue-130; // for striping
@table-bg-hover: @table-bg-accent;
@table-bg-hover-border: @color-blue-120;
@table-bg-active: @table-bg-accent;
@table-border-color: @color-gray-150; // table and cell border
@table-first-column-width: @base-unit * 22;
@table-margin-bottom: @base-unit;
@table-th-text-color: @color-gray-50;
@table-th-link-color: @color-gray-50;
@table-th-bg: @color-gray-150;
@table-icon-head-color: @color-gray-100;
@table-textbox-height: @base-unit * 1.375;
// Table main column width
//---------------------------
@main-column-10: 10%;
@main-column-20: 20%;
@main-column-30: 30%;
@main-column-40: 40%;
@main-column-50: 50%;
@main-column-60: 60%;
@main-column-70: 70%;
@main-column-80: 80%;
@main-column-90: 90%;
@main-column-100: 100%;
// Buttons
// -------------------------
@btn-height: @base-unit * 2;
@btn-line-height: @line-height-200;
@btn-shadow-width: 3px;
@btn-default-color: @color-gray-50;
@btn-default-bg: @color-gray-130;
@btn-default-border: @color-gray-100;
@btn-default-box-shadow: @color-gray-100;
@btn-primary-color: @color-white;
@btn-primary-bg: @color-green-100;
@btn-primary-box-shadow: @color-green-70;
@btn-secondary-color: @color-white;
@btn-secondary-bg: @color-blue-100;
@btn-secondary-box-shadow: @color-blue-70;
@btn-link-disabled-color: @color-gray-130;
@btn-icononly-padding: @base-unit * 0.5;
// Forms
// -------------------------
@input-bg: @color-gray-160;
@input-bg-disabled: @color-gray-150;
@input-color: @color-gray-50;
@input-color-disabled: @color-gray-90;
@input-border: @color-gray-130;
@input-border-radius: @border-radius-large;
@input-border-focus: @color-blue-100; // apply as border
@input-border-width: 2px;
@input-color-placeholder: @color-gray-130;
@input-height-base: @base-unit * 2;
@input-height-large: @base-unit * 2.25;
@input-height-small: @base-unit * 1.75;
@input-max-width: @base-unit * 20;
@legend-color: @color-gray-70;
@legend-border-color: @color-gray-150;
@input-group-addon-bg: @color-gray-150;
@input-group-addon-border-color: @input-border;
@switch-height: @base-unit * 1.25; // ~20px
@switch-width: @base-unit * 2.75; // ~44px
@form-group-margin: @base-unit * 0.75;
@form-explanation-text-margin-top: @base-unit * 0.375;
@field-check-color-success: @color-green-100;
@field-check-color-warning: @color-orange-80;
@field-check-color-error: @color-red-100;
@macro-edit-icon-padding: @base-unit * 0.625 @base-unit * 0.375;
// Dropdowns
// -------------------------
@dropdown-bg: @color-gray-70;
@dropdown-divider-bg: @color-gray-80;
@dropdown-min-width: @base-unit * 15;
@dropdown-max-width: @base-unit * 15;
@dropdown-link-active-color: @color-white;
@dropdown-link-active-bg: @color-gray-80;
@dropdown-link-color: @color-white;
@dropdown-link-hover-color: @color-white;
@dropdown-link-hover-bg: @color-gray-80;
@dropdown-link-disabled-color: @dropdown-link-active-bg;
@dropdown-header-color: @color-white;
@dropdown-caret-color: @color-white;
@dropup-color: @color-white;
@dropup-bg: @color-gray-70;
@dropup-item-bg: @color-gray-70;
@dropup-item-hover-bg: @color-gray-80;
@dropup-min-width: @base-unit * 12;
// COMPONENT VARIABLES
// --------------------------------------------------
// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
@zindex-btn-group-active: 2;
@zindex-pagination: 50;
@zindex-codemirror: @zindex-codemirror-fullsreen - 10;
@zindex-codemirror-fullsreen: 500;
@zindex-alert: 10500; // Was 20000
@zindex-alert-info: 10501; // Was 20001
@zindex-navbar-placeholder: 10980;
@zindex-navbar-help: 10990;
@zindex-navbar: 11000;
@zindex-dropdown: 11005;
@zindex-popover: 11010;
@zindex-tooltip: 100001;
@zindex-anchordropup: 20001;
@zindex-navbar-fixed: 11030;
@zindex-modal-background: 11040;
@zindex-modal: 11050;
@zindex-applist: 42000;
@zindex-loader: 42100;
@zindex-tabs: 42110;
@zindex-screen-lockoverlay: @zindex-screen-lock - 1;
@zindex-screen-lock: 42200;
//== Media queries breakpoints
//
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs: 480px;
@screen-xs-min: @screen-xs;
@screen-phone: @screen-xs-min;
// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm: 660px;
@screen-sm-min: @screen-sm;
@screen-tablet: @screen-sm-min;
// Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md: 992px;
@screen-md-min: @screen-md;
@screen-desktop: @screen-md-min;
// Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@screen-lg: 1200px;
@screen-lg-min: @screen-lg;
@screen-lg-desktop: @screen-lg-min;
// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
// Grid system
// --------------------------------------------------
// Number of columns in the grid system
@grid-columns: 12;
// Padding for columns
@grid-gutter-width: @base-unit * 1.5;
// Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width-half: @base-unit * 0.5;
// Point at which the navbar stops collapsing
@grid-float-breakpoint: @screen-tablet;
// Navbar
// -------------------------
// Basics of a navbar
@navbar-height: @base-unit * 3;
@navbar-border-radius: @border-radius-small;
@navbar-padding-horizontal: floor(@grid-gutter-width / 2);
@navbar-padding-vertical: ((@navbar-height - @line-height-100) / 2);
// Navbar links
@navbar-default-link-color: @color-gray-50;
@navbar-default-link-hover-color: @color-gray-50;
@navbar-default-link-hover-bg: transparent;
@navbar-default-link-active-color: @color-gray-50;
@navbar-default-link-active-bg: transparent;
@navbar-default-link-disabled-color: @color-gray-100;
@navbar-default-link-disabled-bg: transparent;
// Navbar text
@navbar-text-line-height: @navbar-height;
// Inverted navbar
//
// Reset inverted navbar basics
@navbar-inverse-color: @color-white;
@navbar-inverse-bg: @color-gray-50;
@navbar-inverse-border: @color-gray-50;
@navbar-inverse-hover-color: @color-gray-80;
// Inverted navbar links
@navbar-inverse-link-color: @color-white;
@navbar-inverse-link-hover-color: @color-white;
@navbar-inverse-text-color: @color-white;
@navbar-inverse-link-hover-bg: transparent;
@navbar-inverse-link-active-color: @navbar-inverse-link-hover-color;
@navbar-inverse-link-active-bg: transparent;
@navbar-inverse-link-disabled-color: @color-gray-70;
@navbar-inverse-link-disabled-bg: transparent;
// Inverted navbar icons
@navbar-inverse-icon-color: @dark-bg-icon-color;
// Inverted navbar search
// Normal navbar needs no special styles or vars
@navbar-inverse-search-bg: @color-gray-150;
@navbar-inverse-search-bg-focus: @color-white;
@navbar-inverse-search-border: @navbar-inverse-bg;
@navbar-inverse-search-placeholder-color: #ccc;
// Inverted navbar toggle
@navbar-inverse-toggle-hover-bg: @color-gray-70;
@navbar-inverse-toggle-icon-bar-bg: @color-white;
@navbar-inverse-toggle-border-color: @color-gray-70;
// Navbar menu (User menu, Chat)
@navbar-menu-bg: @color-gray-70;
// CMS navbars
@cms-navbar-height: @base-unit * 3;
@cms-navbar-toolbar-height: @base-unit * 2.5;
@nav-search-width: @base-unit * 13;
// Help menu navbar
@cms-navbar-help-bg: @color-blue-70;
@cms-navbar-help-hover-bg: @color-blue-100;
@cms-navbar-help-submenu-bg: @color-gray-70;
@cms-navbar-help-submenu-hover-bg: @color-gray-80;
// Chat
// ------------------------
@chat-navbar-room-bg: @color-gray-70;
@chat-navbar-room-hover-bg: @color-gray-80;
@chat-navbar-active-room-bg: @color-green-100;
@chat-navbar-active-room-hover-bg: @color-green-70;
@chat-navbar-room-border-color: @color-gray-80;
@chat-online-color: @color-green-100;
@chat-offline-color: @color-red-70;
@chat-req-number-bg: @btn-secondary-bg;
@chat-room-help-color: @color-gray-70;
@chat-room-offline-user: @color-gray-100;
@chat-room-current-user: @color-blue-70;
@chat-paging-active-color: @color-gray-50;
// Context menu
// ------------------------
@context-menu-bg: @color-gray-70;
@context-menu-hover-bg: @color-gray-80;
@context-menu-divider: @color-gray-80;
@context-submenu-bg: @color-gray-80;
@context-submenu-hover-bg: @color-gray-90;
@context-submenu-divider: @color-gray-90;
// Navs
// -------------------------
@nav-link-padding: @base-unit * 0.625 @base-unit;
@nav-link-hover-bg: @color-gray-150;
@nav-disabled-link-color: @color-gray-130;
@nav-disabled-link-hover-color: @color-gray-130;
@nav-open-link-hover-color: @color-white;
@nav-open-caret-border-color: @color-white;
// Wizard
// -------------------------
@wizard-title-color: @color-white;
@wizard-title-padding: @padding-base-horizontal;
@wizard-title-headings: @font-size-large;
@wizard-title-line: @base-unit;
@wizard-title-border: 1px solid @color-gray-90;
// Tabs
@nav-tabs-container-bg: @color-gray-140;
@nav-tabs-horizontal-height: @base-unit * 3;
@nav-tabs-vertical-width: @base-unit * 13;
@nav-tabs-back-height: @base-unit * 3;
@nav-tabs-active-link-bg: @body-bg;
@nav-tabs-active-link-hover-bg: @color-gray-150;
// Pagination
// -------------------------
@pagination-text-color: @color-gray-50;
@pagination-bg: @color-gray-150;
@pagination-border: @color-gray-100;
@pagination-hover-bg: @color-gray-130;
@pagination-active-bg: @color-blue-70;
@pagination-active-color: @color-white;
@pagination-disabled-color: @color-gray-130;
@pagination-margin-vertical: @base-unit;
@pagination-margin-horizontal: @base-unit;
@pagination-label-color: @color-gray-50;
@pagination-padding-numbers: @base-unit * 0.125 @base-unit * 0.5;
@pagination-line-height-numbers: @line-height-100;
@pagination-padding-first-last: @base-unit * 0.25;
@pagination-height-first-last: @base-unit;
// Uniflat pager
//---------------------------
@uniflat_pager-padding: 0 @base-unit;
@uniflat_pager-margin-bottom: @base-unit;
// Form states and alerts
// -------------------------
@state-warning-text: @color-orange-70;
@state-warning-bg: @color-orange-100;
@state-warning-border: @color-orange-100;
@state-error-text: @color-red-70;
@state-error-bg: @color-red-130;
@state-error-border: @color-red-130;
@state-success-text: @color-green-70;
@state-success-bg: @color-green-130;
@state-success-border: @color-green-130;
@state-info-text: @color-blue-70;
@state-info-bg: @color-blue-130;
@state-info-border: @color-blue-130;
// Tooltips
// -------------------------
@tooltip-max-width: @base-unit * 20;
@tooltip-color: @color-gray-50;
@tooltip-bg: @color-orange-130;
@tooltip-arrow-width: @base-unit * 0.75;
@tooltip-arrow-color: @tooltip-bg;
// Popovers
// -------------------------
@popover-bg: @color-orange-130;
@popover-max-width: 276px;
@popover-border-color: @color-gray-130;
@popover-fallback-border-color: @color-gray-130;
@popover-title-bg: @color-orange-130;
@popover-arrow-width: @base-unit * 0.5;
@popover-arrow-color: @color-orange-130;
@popover-arrow-outer-width: (@popover-arrow-width + 1);
// Alerts
// -------------------------
@alert-link-font-weight: bold;
@alert-success-bg: @state-success-bg;
@alert-success-text: @state-success-text;
@alert-success-icon-color: @color-success;
@alert-success-icon-close-color: @color-success;
@alert-info-bg: @state-info-bg;
@alert-info-text: @state-info-text;
@alert-info-icon-color: @color-info;
@alert-info-icon-close-color: @color-info;
@alert-warning-bg: @state-warning-bg;
@alert-warning-text: @state-warning-text;
@alert-warning-icon-color: @color-warning;
@alert-warning-icon-close-color: @color-warning;
@alert-error-bg: @state-error-bg;
@alert-error-text: @state-error-text;
@alert-error-icon-color: @color-error;
@alert-error-icon-close-color: @color-error;
// Progress bars
// -------------------------
@progress-bg: @color-gray-130;
@progress-bar-color: @color-white;
@progress-bar-bg: @color-blue-70;
@progress-bar-success-bg: @color-green-100;
@progress-bar-warning-bg: @color-warning;
@progress-bar-danger-bg: @color-error;
// Panels
// -------------------------
@panel-bg: @color-white;
@panel-inner-border: @color-gray-130;
@panel-border-radius: @border-radius-small;
@panel-footer-bg: @color-gray-140;
@panel-heading-bg: @color-gray-140;
@panel-title-bg: @color-gray-50;
@panel-title-height: @cms-navbar-height;
@panel-default-text: @color-gray-50;
@panel-default-border: @color-gray-50;
@panel-default-heading-bg: @color-gray-140;
@panel-primary-text: @color-gray-50;
@panel-primary-border: @color-gray-130;
@panel-primary-heading-bg: @color-blue-70;
@panel-success-text: @color-gray-50;
@panel-success-border: @color-gray-130;
@panel-success-heading-bg: @color-green-100;
@panel-warning-text: @color-gray-50;
@panel-warning-border: @color-gray-130;
@panel-warning-heading-bg: @color-warning;
@panel-danger-text: @color-gray-50;
@panel-danger-border: @color-gray-130;
@panel-danger-heading-bg: @color-error;
// Badges
// -------------------------
@badge-color: @color-gray-50;
@badge-link-hover-color: @color-white;
@badge-bg: transparent;
@badge-active-color: @color-white;
@badge-active-bg: transparent;
@badge-font-weight: normal;
@badge-line-height: 1;
@badge-border-radius: @border-radius-base;
@badge-padding-horizontal: @base-unit * 0.4375; // ~7px
@badge-padding-vertical: @base-unit * 0.1875; // ~3px
// Breadcrumbs
// -------------------------
@breadcrumb-color: @color-gray-50;
// Close
// ------------------------
@close-color: @color-gray-50;
@close-font-weight: bold;
@close-text-shadow: 0 1px 0 @color-white;
// Dashboard
// ------------------------
@dashboard-bg: @color-gray-150;
@dashboard-color: @color-gray-50;
@tile-height: @base-unit * 9.75;
@tile-width: @base-unit * 9.75;
@tile-bg: @color-white;
@tile-hover-bg: @color-blue-130;
@tile-red: @color-red-70;
@tile-blue: @color-blue-100;
@tile-green: @color-green-100;
@tile-orange: @color-orange-80;
@tile-gray: @color-gray-70;
@empty-tile-border-width: 3px;
// Code
// ------------------------
@code-color: @color-gray-50;
@code-bg: @color-gray-150;
@pre-bg: @color-gray-150;
@pre-color: @color-gray-50;
@pre-border-color: @color-gray-130;
@pre-scrollable-max-height: 340px;
// Type
// ------------------------
@text-muted: @color-gray-130;
@abbr-border-color: @color-gray-130;
@headings-small-color: @color-gray-130;
@blockquote-small-color: @color-gray-130;
@blockquote-border-color: @color-gray-150;
@page-header-border-color: @color-gray-150;
// Dialogs
// ------------------------
@dialog-header-height: @base-unit * 3;
// Uploader
// -------------------------
@uploader-margin-horizontal: @base-unit * 0.5;
@uploader-background-color: @color-white;
@uploader-min-width: @base-unit * 18;
@uploader-min-width-IE: @base-unit * 18.125;
// Miscellaneous
// -------------------------
// Hr border color
@hr-border: @color-gray-150;
// Horizontal forms & lists
@component-offset-horizontal: 180px;
// Container sizes
// --------------------------------------------------
// Small screen / tablet
@container-tablet: ((720px + @grid-gutter-width));
// Medium screen / desktop
@container-desktop: ((940px + @grid-gutter-width));
// Large screen / wide desktop
@container-lg-desktop: ((1140px + @grid-gutter-width));