// // Variables // -------------------------------------------------- // Global values // -------------------------------------------------- // Site specific colour values // -------------------------------------------------- @siteBlue: #15385B; @siteBlueLight: #20558A; @siteBlueDark: #102B45; @siteOrange: #EC501C; @siteOrangeLight: #F07952; @siteOrangeDark: #CB471B; // Grays // ------------------------- @black: #000; @grayDarker: #222; @grayDark: #333; @gray: #666; @grayLight: #999; @grayLighter: #eee; @white: #fff; // Accent colors // ------------------------- @red: #FF0000; @orange: #FF7F00; @pink: #FFC0CB; @purple: #7F00FF; @blue: #0000FF; @blueLight: #007FFF; @green: #00FF00; @greenLight: #009933; @cyan: #00FFFF; @magenta: #FF00FF; @yellow: #ffff00; @yellowDarker: #EEEE00; // Links // ------------------------- @linkColor: #337ab7; @linkColorHover: darken(@linkColor, 15%); // Typography // ------------------------- // Font Family @sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; @serifFontFamily: Georgia, "Times New Roman", Times, serif; // Base Font Family @baseFontFamily: @sansFontFamily; @altFontFamily: @serifFontFamily; // Base Font Size @baseFontSize: 14px; @baseFontSizeLarge: ceil((@baseFontSize * 1.25)); // ~18px @baseFontSizeSmall: ceil((@baseFontSize * 0.85)); // ~12px // Headings @fontSizeH1: 36px; @fontSizeH2: 30px; @fontSizeH3: 24px; @fontSizeH4: 18px; @fontSizeH5: @baseFontSize; @fontSizeH6: 12px; // Base Line Height @baseLineHeight: 1.428571429; // 20/14 @smallLineHeight: 1.33; @LargeLineHeight: 1.5; // By default, this inherits from the ``. @headingsFontFamily: inherit; @headingsFontWeight: 500; @headingsLineHeight: 1.1; @headingsColor: inherit; // Components // ------------------------- // Based on 14px font-size and 1.428 line-height // Paddings @paddingBaseVertical: 6px; @paddingBaseHorizontal: 12px; @paddingSmallVertical: 5px; @paddingSmallHorizontal: 10px; @paddingLargeVertical: 10px; @paddingLargeHorizontal: 16px; // Margins @marginBaseVertical: 6px; @marginBaseHorizontal: 12px; @marginSmallVertical: 5px; @marginSmallHorizontal: 10px; @marginLargeVertical: 10px; @marginLargeHorizontal: 16px; // Border Radius @borderRadiusBase: 4px; @borderRadiusLarge: 6px; @borderRadiusSmall: 3px; // Tables // ------------------------- // Buttons // ------------------------- @btnDefaultColor: #FFFFFF; @btnDefaultBg: @siteBlue; @btnDefaultBorder: darken(@btnDefaultBg, 5%); @btnDefaultBgHighlight: darken(@btnDefaultBg, 10%); @btnPrimaryColor: #FFFFFF; @btnPrimaryBg: @siteOrange; @btnPrimaryBorder: darken(@btnPrimaryBg, 5%); @btnPrimaryBgHighlight: darken(@btnPrimaryBg, 10%); @btnSuccessColor: #FFFFFF; @btnSuccessBg: @green; @btnSuccessBorder: darken(@btnSuccessBg, 5%); @btnSuccessBgHighlight: darken(@btnSuccessBg, 10%); @btnInfoColor: #FFFFFF; @btnInfoBg: @blueLight; @btnInfoBorder: darken(@btnInfoBg, 5%); @btnInfoBgHighlight: darken(@btnInfoBg, 10%); @btnWarningBolor: #FFFFFF; @btnWarningBg: @yellowDarker; @btnWarningBorder: darken(@btnWarningBg, 5%); @btnWarningBgHighlight: darken(@btnWarningBg, 10%); @btnDangerColor: #FFFFFF; @btnDangerBg: @red; @btnDangerBorder: darken(@btnDangerBg, 5%); @btnDangerBgHighlight: darken(@btnDangerBg, 10%); @btnLinkDisabledColor: @grayLight; // Forms // ------------------------- // Dropdowns // ------------------------- // COMPONENT VARIABLES // -------------------------------------------------- // Z-index master list // ------------------------- // Used for a bird's eye view of components dependent on the z-axis @zindexNavbar: 1000; @zindexDropdown: 1000; @zindexPopover: 1060; @zindexTooltip: 1070; @zindexNavbar-fixed: 1030; @zindexModal-background: 1040; @zindexModal: 1050; // Media queries breakpoints // -------------------------------------------------- // Extra small screen / phone @screen-xsmall: 480px; @screen-phone: @screen-xsmall; // Small screen / tablet @screen-small: 768px; @screen-sm: 768px; @screen-tablet: @screen-small; // Medium screen / desktop @screen-medium: 992px; @screen-md: 992px; @screen-desktop: @screen-medium; // Large screen / wide desktop @screen-large: 1200px; @screen-lg: 1200px; @screen-large-desktop: @screen-large; // So media queries don't overlap when required, provide a maximum @screen-xs-max: (@screen-sm - 1); @screen-sm-max: (@screen-md - 1); @screen-md-max: (@screen-lg - 1);