/**
 * This _base.scss file (should) only contain variables, mixins and helpers
 * Read the README.TXT in main SASS folder for project details
 */

/**
 * Colour scheme, copied from colors.scss.
 */

// For easier layouting… Will be deleted…
$columnborders: false;

$boltblue: #204460;
$boltbluedarker: darken($boltblue, 5);
$boltbluelighter: lighten($boltblue, 5);

$basebgcolour: #FDFDFA;
$bodytextcolour: #333;

$lightgrey: #CCC;
$light-border: #E8E8E8;
// The color of <hr> lines.
$hr-border: #CCC;

$linkmain: lighten(saturate($boltblue, 50), 4);
$linkvisited: $linkmain;
$linkactive: lighten(saturate($boltblue, 50), 10);

// The padding to the left and right of form-control inputs.
$padding-base-horizontal: 8px;


// Primary button.
$btn-primary-color: #FFF;
$btn-primary-bg: #5d9f11; // Or perhaps a nice dark blue: #1d4268;
$btn-primary-border: darken($btn-primary-bg, 4%);

// Secondary button.
$btn-secondary-bg: #2A78CB;
$btn-secondary-border: darken($btn-secondary-bg, 4%);

// Tertiary button.
$btn-tertiary-bg: desaturate(lighten(#42627B, 20), 12);
$btn-tertiary-border: darken($btn-tertiary-bg, 4%);

// Default button.
$btn-default-color: #666;
$btn-default-bg: #E0E0E0;
$btn-default-border: darken($btn-default-bg, 4%);

$btn-danger-color: #FFF;
$btn-danger-bg: #AA1010;
$btn-danger-border: darken($btn-danger-bg, 4%);

$btn-silent-danger-color: #555;
$btn-silent-danger-bg: #F8F8F8;
$btn-silent-danger-border: darken($btn-danger-bg, 4%);

// Special BOLT button.
$btn-bolt-color: #FFF;
$btn-bolt-bg: $boltblue;
$btn-bolt-border: darken($btn-bolt-bg, 6%);

// Text-links in dropdowns and pop-overs.
$dropdown-link-color: #555;
$dropdown-link-hover-color: $boltbluedarker;
$dropdown-link-hover-bg: #DDD;

// Sidebar panel headings.
$panel-default-heading-bg: #DDD;
$panel-default-border: $light-border;
$panel-border-radius: 0;

// Table border color: mostly used for the contenttype 'overviews'
$table-border-color: #CCC;
$table-bg-accent: #F6F6F9;

// Pagination.
$pagination-color: lighten(desaturate($boltblue, 35), 6);
$pagination-active-bg: lighten(desaturate($boltblue, 35), 6);
$pagination-active-border: lighten(desaturate($boltblue, 35), 3);

// Line-heights for headings. Also influences margin at top and bottom of headings.
$headings-line-height: 1.5;

$nav-tabs-border-color: $btn-tertiary-bg;
$nav-tabs-active-link-hover-border-color: $nav-tabs-border-color;
$nav-tabs-bg: desaturate(lighten($boltblue, 50%), 30);


// The color of the tabs, in the 'edit content' screen.
$filtertabs: mix($basebgcolour, $btn-tertiary-bg, 70);
$filtertab-color: darken($filtertabs, 40);
$filtertab-active-color: #555;

/**
 * Colors in _base.scss.
 */
$sidebarbackground: #33363E;
$sidebartextcolour: #DDD;
$sidebartextcolourcollapsed: #AAA;

$sidebarlink: #CCC;
$sidebarlinkhover: #FFF;
$sidebarlinkactive: #FFF;
$sidebarbackgroundactive: lighten(desaturate($boltblue, 20), 12);
$sidebarbackgroundhover: lighten(desaturate($boltblue, 30), 6);

/**
 * Fonts.
 */
$fonts-family-monospace: Menlo, Consolas, Monaco, "Courier New", monospace;

/**
 * Z-index kerfluffle
 */
$zindex-veryhigh: 100000;
$zindex-secondary-nav: $zindex-veryhigh + 2;
$zindex-backdrop: $zindex-veryhigh + 8;
$zindex-modal-background: $zindex-veryhigh + 22;
$zindex-modal: $zindex-veryhigh + 23;
$zindex-fullscreen-editor: $zindex-veryhigh + 15;


/**
 * New media query approach.
 *
 * Breakpoints
 */
$mid-mobile: (400/16); //25em == 400px, between mobile portrait and landscape
$medium-screens: (768/16); //48em == 768px, Ipad tabs and up
$large-screens: (960/16); //60em == 960px, ye' olde classic 12col width
$wide-screens: (1280/16); //80em == 1280px, anything up and wide

$nav-primary-min-height: 50px;
$nav-secondary-small-width: 280px;
$nav-secondary-large-width: 180px;

$nav-secondary-top-padding: 17px;
$nav-secondary-h-padding: 8px;
$nav-secondary-v-padding: 9px;
$nav-secondary-divider-margin: 14px;
$nav-secondary-divider-padding: 6px;
$nav-secondary-icon-size: 24px;
$nav-secondary-icon-margin: 8px;
$nav-secondary-indent: ($nav-secondary-icon-size + $nav-secondary-icon-margin + 8px);
$nav-secondary-collapsed-width: ($nav-secondary-h-padding + $nav-secondary-indent + 1);

/**
 * Media Query handling.
 */
@mixin respond-to($media) {
    @if $media == mid-mobile {
        @media only screen and (min-width: $mid-mobile + em) {
           @content;
        }
    }
    @if $media == medium-screens {
        @media only screen and (min-width: $medium-screens + em) {
           @content;
        }
    }
    @if $media == large-screens {
        @media only screen and (min-width: $large-screens + em) {
           @content;
        }
    }
    @if $media == wide-screens {
        @media only screen and (min-width: $wide-screens + em) {
           @content;
        }
    }
}

@mixin hide() {
    visibility: hidden;
    display: none;
}

@mixin show() {
    visibility: visible;
    display: block;
}

@mixin nav-secondary-divider() {
    border-top: 1px solid lighten($sidebarbackground, 8);
    padding-top: $nav-secondary-divider-padding;
    margin-top: $nav-secondary-divider-margin;
}

@mixin placeholder() {
    &::-webkit-input-placeholder {
        color: #999 !important;
        font-style: italic !important;
        font-size: 85% !important;
    }
    &:-moz-placeholder { /* FF 4-18 */
        color: #999 !important;
        font-style: italic !important;
        font-size: 85% !important;
    }
    &::-moz-placeholder { /* FF 19+ */
        color: #999 !important;
        font-style: italic !important;
        font-size: 85% !important;
    }
    &:-ms-input-placeholder { /* IE 10+ */
        color: #999 !important;
        font-style: italic !important;
        font-size: 92% !important;
    }
}

// Mixin to add ellipsis.

@mixin ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// Mixin to background image for empty elements.

@mixin background-empty() {
    background: #f8f8f8;
    background-image: url(../img/default_empty.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
