﻿
// Theme Colors *open* { These default theme colors are provided to prevent compiling errors. Any custom themes should override these. }
@theme-1:                        #428bca; // bootstrap primary blue
@theme-1-text:                   #fff;
//--
@theme-2:                        @gray-darker; // admin bar
@theme-2-text:                   lighten(@gray-darker, 70%);
//--
@theme-3:                        lighten(@theme-1, 20%); // header
@theme-3-text:                   darken(@theme-3, 55%);
//--
@theme-4:                        lighten(@theme-1, 30%); // page title
@theme-4-text:                   darken(@theme-4, 50%);
//--
@theme-5:                        lighten(@theme-1, 40%); // badge bar
@theme-5-text:                   darken(@theme-5, 45%);
//--
@theme-6:                        lighten(@theme-1, 45%); // family bar
@theme-6-text:                   darken(@theme-6, 40%);
//--
@theme-7:                        spin(@theme-1, -135); // accent color
@theme-7-text:                   #fff;
//--
@theme-8:                        @gray-light; // action buttons / type labels
@theme-8-text:                   #fff;

/*
    The accent colors are deprecated and should not be used in new theme development. They will be
    removed in SF v 6.0.
*/
@accent-color:                   @theme-1;
@accent-text-color:              @theme-1-text;
//--
@accent-light-color:             @theme-2;
@accent-light-text-color:        @theme-2-text;
//--
@accent-semibold-color:          @theme-3; // #c2b8a7;
@accent-semibold-text-color:     @theme-3-text;// #616161;
//--
@accent-bold-color:              @theme-4;
@accent-bold-text-color:         @theme-4-text;

//// Header
@header-bg:                      @theme-3; // The header background color.
@header-text-color:              @theme-3-text; // The header text color.
//--
@header-hambuger-color:          #fff; // The text color of the header minimizer.
@header-hambuger-bg:             @brand-primary; // The background color of the header minimizer.
@header-hamburger-border:        @brand-primary; // The border color of the header minimizer.

//// Main Navigation

@nav-bg:                         @theme-2;                   // The background color of the main navigation.
@nav-color:                      @theme-2-text;                // The text color of the main navigation.
@nav-logo-bg:                    darken(@nav-bg, 5%);  // The background color of the icon corner.
@nav-sub-bg:                     lighten(@theme-2, 5%); // The background of the secondary navigation.
@nav-sub-color:                  @theme-2-text;      // The text color of the secondary navigation.
@nav-sub-title-color:            @theme-1;                // The text color of the title on the secondary navigation.
@nav-sub-heading-color:          darken(@theme-2-text, 20%);              // The text color of the heading on the secondary navigation.
@nav-sub-heading-border:         darken(@nav-sub-heading-color, 30%);             // The border color of the heading on the secondary navigation.
@nav-sub-text-rollover-color:    @nav-sub-color; // The text color on roll-over for the secondary navigation.
@nav-sub-text-rollover-bg:       @nav-bg;           // The background color for text on roll-over for the seconday navigation.

//// Page Title
@pagetitle-bg:                   @theme-4;          // The background color of the page title section.
@pagetitle-text-color:           @theme-4-text;  // The text color of the page title section.

//// Footer
@footer-bg:                      @header-bg;             // The background color of the footer.
@footer-color:                   @header-text-color;  // The text color of the footer.

//// Admin Bar
@adminbar-bg:                    @theme-2;
@adminbar-text-color:            @theme-2-text;

// Global Styles *open*
@photo-border:                   @theme-3;   // Standard border color for photos.
@help-color:                     #86b8cc;           // The color of the help icon used in SF.
@required-field-color:           #eca9a7; // Color of the small dot that denotes required fields.

//// Scroll Bars
@scroll-track-color:             #aaa; // Color of the scrollbar track line.
@scroll-thumb-color:             #ccc; // Color of the scrollbar thumb which moves up and down the track line.

//// Scroll Bars
@spinner-bg:                     @btn-primary-bg;       // The background color of the wait spinner.
@spinner-color:                  @btn-primary-color; // The bar color of the wait spinner.

//// Picker
@picker-action-bg:               #e3ded7;     // The background color of the actions bar at the bottom of the picker dropdown.

//// Date Picker
@datepicker-highlight-bg:        @theme-7;         // Background color for highlighting dates and selector elements of the datepicker.
@datepicker-highlight-color:     @theme-7-text; // Text color for highlighting dates and selector elements of the datepicker.

//// Image Editor
@imageeditor-bg:                 @photo-border;              // The background for the image editor roll-over. This control is used to upload images.
@imageeditor-color:              contrast(@photo-border); // The icon color for the image editor roll-over. This control is used to upload images.

// modal extension
@modal-backdrop-opacity:         .5;

// // Panel
@panel-text:                     @text-color; // The text color of the panel.
@panel-border:                   darken(@theme-6, 10%);                  // The panel's border color.
@panel-top-border-color:         darken(@panel-border, 5%);           // Color of the panel's top border often used as an accent color.
//--
@panel-heading-bg:               @theme-6;                  // The background color of the panel's header.
@panel-heading-text-color:       @theme-6-text;              // The heading's text color.
@panel-heading-border:           darken(@panel-heading-bg, 30%); // The headings border color.
//--
@panel-following-active-bg:      @panel-top-border-color;   // The background color of the following square when it's active at the top of panels that support the following feature (e.g. Group Details block).
//--
@panel-footer-color:             @panel-text;              // The color text of the panel's footer.


// Grid
@grid-border-color:              #ddd;   // The border color of the grids cells.
@grid-padding:                   8px;         // The default padding of the grid cells.

//// Filter Section
@grid-filter-bg:                 @panel-heading-bg;        // The background color of the filter section of the grid.
@grid-filter-color:              @panel-heading-text-color; // The text color of the filter section of the grid.

//// Grid Header
@grid-column-header-bg:          transparent;                        // The background color of the grid header.
@grid-column-header-text-color:  @text-color;     // The text color of the grid header.
@grid-column-header-font-size:   14px;                    // The font size of the grid header.
@grid-column-header-font-weight: @font-weight-semibold; // The font weight of the grid header.
@grid-column-header-border-color: @grid-border-color;    // The border color of the grid header.
//--
@grid-column-header-bold-bg:     @nav-bg;                   // Background color for bold table headers like the merge person page.
@grid-column-header-bold-color:  @nav-color;             // The text color for bold table headers like the merge person page.

//// Row Striping
@grid-row-even-bg:               @panel-bg;         // The even rows background color.
@grid-row-even-color:            @panel-text;  // The even rows text color.
@grid-row-odd-bg:                darken(@grid-row-even-bg, 3%);         // The odd rows background color.
@grid-row-odd-color:             @text-color;   // The odd rows text color.

//// Hover
@grid-hover-bg:                  #D5E6ED;            // Row background color when hovered over.
@grid-hover-color:               @text-color;     // Row text color when hovered over.

//// Section Headers
@grid-section-bg:                @theme-4;          // Some grids like the person merge grid have section headers to group like rows. This styles the background of these rows.
@grid-section-color:             @theme-4-text;  // Some grids like the person merge grid have section headers to group like rows. This styles the text of these rows.

//// Pager Section
@grid-pager-bg:                  @panel-heading-bg;
@grid-pager-color:               @panel-heading-text-color;
//--
@grid-pager-button-bg:           darken(@grid-pager-bg, 5%);
@grid-pager-button-color:        @text-color;
@grid-pager-button-border:       darken(@grid-pager-button-bg, 20%);
@grid-pager-button-active-bg:    lighten(@grid-pager-button-bg, 10%);

//// Footer
@grid-footer-bg:                 @panel-heading-bg;
@grid-footer-text-color:         @panel-heading-text-color;
@grid-footer-font-size:          10px;
@grid-footer-font-weight:        300;
//--
@grid-footer-button-bg:          darken(@grid-footer-bg, 5%);
@grid-footer-button-text-color:  @text-color;
@grid-footer-button-border:      darken(@grid-footer-bg, 20%);

// Person Profile
//// Bio Bar
@persondetails-bio-bg:              @theme-4;
@persondetails-bio-color:           @theme-4-text;
@persondetails-bio-action-color:    #fff;
@persondetails-bio-action-bg:       #6a6a6a;
@persondetails-bio-action-border:   darken(@persondetails-bio-action-bg, 5%);
@persondetails-bio-photo-border:    @header-bg;
@persondetails-bio-photo-following: #817b72;

//// Badge Bar
@persondetails-badge-bg:            @theme-5;
@persondetails-badge-color:         @theme-5-text;

//// Family Bar
@persondetails-familybar-bg:            @theme-6;
@persondetails-familybar-color:         @theme-6-text;
@persondetails-familybar-action-color:  #fff;
@persondetails-familybar-action-bg:     #6a6a6a;
@persondetails-familybar-action-border: darken(@persondetails-bio-action-bg, 5%);
@persondetails-familybar-photo-bg:      darken(@persondetails-familybar-bg, 20%);

// Note Types

//// Alert / Hightlight Note
@note-highlight-bg:                 @alert-danger-bg;
@note-highlight-text:               @alert-danger-text;
@note-highlight-border:             @alert-danger-border;

//// Private / Personal Note
@note-personal-bg:                  @alert-info-bg;
@note-personal-text:                @alert-info-text;
@note-personal-border:              @alert-info-border;

// Modals
@modal-header-bg:                   @theme-2;
@modal-header-text-color:           @theme-2-text;
@modal-body-bg:                     @body-bg;
@modal-body-text-color:             @text-color;
@modal-footer-bg:                   @theme-4;
@modal-footer-text-color:           @theme-4-text;
@modal-dropshadow-color:            rgba(0,0,0,0.6);

// Tooltip
@tooltip-header-bg:                 @theme-8;
@tooltip-header-text-color:         @theme-8-text;

// Pills
@nav-pills-link-color:              @link-color;  // The color of the none active pill link.
//--
@nav-pills-container-bg:            transparent; // the background color for the well-pillwrap class used on the security dialog, communication mediums and template details.
@nav-pills-container-border:        transparent; // The border color of the well-pillwrap classed used on the security dialog, communication mediums and template details.

// List As Blocks { Used on many administration pages and pages like 'My Workflows', 'Connections' and 'Calendar'. }
@listasblocks-bg:                    @theme-6;
@listasblocks-border-color:          darken(@theme-6, 10%);
@listasblocks-color:                 @theme-6-text;
@listasblocks-rollover-bg:           @theme-8;
@listasblocks-rollover-text-color:   @theme-8-text;
@listasblocks-rollover-border-color: darken(@listasblocks-rollover-bg, 5%);
@listasblocks-active-bg:             @theme-8;
@listasblocks-active-border-color:   darken(@listasblocks-active-bg, 10%);
@listasblocks-active-color:          @theme-8-text;

// Tags { Styles for the tag control used on the person profile. }
@tag-bg:                            #c2b8a7;
@tag-text-color:                    #231f20;
@tag-border-radius:                 @border-radius-base;
@tag-dot-color:                     #dbd5cb;
@tag-bg-alt:                        #d0c6b4;

// Autocomplete Styles
@autocomplete-bg:                   @theme-4;
@autocomplete-border:               darken(@autocomplete-bg, 10%);
@autocomplete-text:                 @theme-4;
@autocomplete-rollover-bg:          darken(@autocomplete-bg, 10%);  // the background color of the rollover for autocompletes.

// Smart Search
@smartsearch-bg:                         rgba(255, 255, 255, .1);
@smartsearch-border-color:               #2c2c2c;
@smartsearch-box-shadow:                 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.15);
@smartsearch-input-text-color:           @header-text-color;
@smartsearch-input-selection-background: #2e2e2e;
@smartsearch-input-selection-text-color: #fff;
@smartsearch-text-color:                 @header-text-color;

// Wizard Styles { Used on pages like 'Calendar' and 'Event Registration' to help guide the user through a complex series of screens. }
@wizard-bg:                         @gray-lighter;
@wizard-item-bar-color:             #bbb;
@wizard-item-bar-complete-color:    darken(@wizard-item-bar-color, 10%);
//--
@wizard-item-label-active-color:    @text-color;
@wizard-item-icon-active-color:     @nav-pills-active-link-hover-color;
@wizard-item-icon-active-bg:        @nav-pills-active-link-hover-bg;
//--
@wizard-item-label-complete-color:  @wizard-item-label-active-color;
@wizard-item-icon-complete-color:   @wizard-item-icon-color;
@wizard-item-icon-complete-bg:      @wizard-item-icon-active-bg;
//--
@wizard-item-label-color:           lighten(@wizard-item-label-active-color, 25%);
@wizard-item-icon-color:            @wizard-item-icon-active-color;
@wizard-item-icon-bg:               lighten(@wizard-item-icon-active-bg, 25%);

// Tree Viewer
@tree-rollover-bg:                  lighten(@theme-7, 20%);         // Background color of the rollover for items in the treeview.
@tree-rollover-color:               @theme-7-text;      // Text color of the rollover for items in the treeview.
@tree-selected-bg:                  #6a6a6a;         // Background color of selected items in the treeview.
@tree-selected-color:               #ffffff;      // Text color of selected items in the treeview.

// Buttons
@btn-action-color:                  @theme-8-text;
@btn-action-bg:                     @theme-8;
@btn-action-border:                 darken(@btn-action-bg, 5%);
//--
@btn-security-color:                @btn-default-color;
@btn-security-bg:                   @btn-default-bg;
@btn-security-border:               @btn-default-border;
//--
@btn-link-disabled-color:           @gray-light;

// Custom Alerts
@alert-default-bg:                  @gray-lighter; 
@alert-default-border:              darken(@alert-default-bg, 10%); 
@alert-default-text:                @text-color;

// Custom Labels { The bootstrap labels use the brand colors. }
@label-campus-bg:                   #83758f;   // Used for identifing campuses.
@label-type-bg:                     @theme-8;  // Used for showing the 'type' of an idea. For instance on the group viewer this highlights the group's type.

@label-critical-bg:                 #ee7624;

// Below Not in SF Theme

// Block Specific
@checkin-group-border-color:        #afd074;
@checkin-area-border-color:         #5593a4;

// Constants
@const-border-darken-amt:           10%; // creates a border color by darkening the background by this amount

// Font Weights
@font-weight-light:                 300;
@font-weight-bold:                  700;
@font-weight-semibold:              600;

// Alerts
@alert-success-link-border-bottom:  1px dotted @alert-success-text;
@alert-info-link-border-bottom:     1px dotted @alert-info-text;
@alert-warning-link-border-bottom:  1px dotted @alert-warning-text;
@alert-danger-link-border-bottom:   1px dotted @alert-danger-text;


// Helper Variables
// -------------------------

// spacing multipliers / used to multiply by the grid-gutter-width to get spacing sizes
@spacing-sm: 0.25;
@spacing-md: 0.5;
@spacing-lg: 1;
@spacing-xl: 2;

@spacing-sm-px: @grid-gutter-width * @spacing-sm;
@spacing-md-px: @grid-gutter-width * @spacing-md;
@spacing-lg-px: @grid-gutter-width * @spacing-lg;
@spacing-xl-px: @grid-gutter-width * @spacing-xl;

// Media queries
// Example usage:
// @media @sm {
//   body {
//     background: red;
//   }
// }
@xs: ~"(min-width: @{screen-xs-min})";
@sm: ~"(min-width: @{screen-sm-min})";
@md: ~"(min-width: @{screen-md-min})";
@lg: ~"(min-width: @{screen-lg-min})";
@sm-only: ~"(min-width: @{screen-sm}) and (max-width: @{screen-sm-max})";
@md-only: ~"(min-width: @{screen-md}) and (max-width: @{screen-md-max})";
