$bootstrap-sass-asset-helper: false; //* ########### Cajon Scss 3.3.6 ##### */ //* ----- Variables ----- */ //* ######### Colors ######### */ $gray-base: #000; $gray-darker: lighten($gray-base, 13.5%); // #222 $gray-dark: lighten($gray-base, 20%); // #333 $gray: lighten($gray-base, 33.5%); // #555 $gray-light: lighten($gray-base, 60%); // #999 $gray-lighter: lighten($gray-base, 93.5%); // #eee $brand-primary: #00A2D3; $brand-success: #8ac91e; $brand-info: #0bb79d; $brand-warning: #FF851B; $brand-danger: #e0145f; //* ######### Scaffolding ######### */ $body-bg: #fff; $text-color: $gray; $link-color: $brand-primary; $link-hover-color: darken($link-color, 15%); $link-hover-decoration: underline; //* ######### Typography ######### */ $font-family-sans-serif: "Source Sans Pro", "DejaVu Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; $font-family-serif: Georgia, "Times New Roman", Times, serif; $font-family-monospace: Consolas, Menlo, Monaco, monospace; $font-family-base: $font-family-sans-serif; $font-family-base-weight: 400; $font-size-base: 14px; $font-size-large: ceil(($font-size-base * 1.25)); $font-size-small: ceil(($font-size-base * 0.85)); $font-size-h1: ceil(($font-size-base * 4.2)); $font-size-h2: ceil(($font-size-base * 2.6)); $font-size-h3: ceil(($font-size-base * 1.8)); $font-size-h4: ceil(($font-size-base * 1.4)); $font-size-h5: ceil(($font-size-base * 1.2)); $font-size-h6: $font-size-base; $line-height-base: 1.428571429; //* 20/14 */ $line-height-computed: floor(($font-size-base * $line-height-base)); //* ~20px */ $headings-font-family: inherit; $headings-font-weight: 300; $headings-line-height: 1.1; $headings-color: $gray-dark; //* ######### Components ######### */ $padding-base-vertical: 7px; $padding-base-horizontal: 12px; $padding-large-vertical: 13px; $padding-large-horizontal: 16px; $padding-small-vertical: 4px; $padding-small-horizontal: 10px; $padding-xs-vertical: 1px; $padding-xs-horizontal: 5px; $line-height-large: 1.3333333; $line-height-small: 1.5; $border-radius-base: 4px; $border-radius-large: 5px; $border-radius-small: 2px; $component-active-color: #fff; $component-active-bg: $brand-primary; //* Width of the `border` for generating carets that indicator dropdowns. */ $caret-width-base: 4px; $caret-width-large: 5px; //* ######### Tables ######### */ $table-cell-padding: 8px; $table-condensed-cell-padding: 5px; $table-bg: transparent; $table-bg-accent: #f9f9f9; $table-bg-hover: #f5f5f5; $table-bg-active: $table-bg-hover; $table-border-color: $gray-lighter; //* ######### Buttons ######### */ $btn-font-weight: normal; $btn-default-color: $gray; $btn-default-bg: $gray-lighter; $btn-default-border: darken($btn-default-bg, 5%); $btn-primary-color: #fff; $btn-primary-bg: $brand-primary; $btn-primary-border: darken($btn-primary-bg, 5%); $btn-success-color: #fff; $btn-success-bg: $brand-success; $btn-success-border: darken($btn-success-bg, 5%); $btn-info-color: #fff; $btn-info-bg: $brand-info; $btn-info-border: darken($btn-info-bg, 5%); $btn-warning-color: #fff; $btn-warning-bg: $brand-warning; $btn-warning-border: darken($btn-warning-bg, 5%); $btn-danger-color: #fff; $btn-danger-bg: $brand-danger; $btn-danger-border: darken($btn-danger-bg, 5%); $btn-link-disabled-color: $gray-light; $btn-border-radius-base: $border-radius-base; $btn-border-radius-large: $border-radius-large; $btn-border-radius-small: $border-radius-small; //* ######### Forms ######### */ $input-bg: #fff; $input-bg-disabled: $gray-lighter; $input-color: $gray; $input-border: darken(#f8f8f8, 6.5%); $input-border-radius: $border-radius-base; $input-border-radius-large: $border-radius-large; $input-border-radius-small: $border-radius-small; $input-border-focus: #66afe9; $input-color-placeholder: $gray-light; //* .form-control height */ $input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 4); $input-height-large: (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2); $input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2); $form-group-margin-bottom: 15px; $legend-color: $gray-dark; $legend-border-color: #e5e5e5; $input-group-addon-bg: $gray-lighter; $input-group-addon-border-color: $input-border; $cursor-disabled: not-allowed; //* ######### Dropdowns ######### */ $dropdown-bg: #fff; $dropdown-border: $input-border; $dropdown-fallback-border: #ccc; $dropdown-divider-bg: $gray-lighter; $dropdown-link-color: $gray-light; $dropdown-link-hover-color: $gray-dark; $dropdown-link-hover-bg: transparent; $dropdown-link-active-color: $component-active-color; $dropdown-link-active-bg: $component-active-bg; $dropdown-link-disabled-color: $gray-lighter; $dropdown-header-color: $gray-light; $dropdown-caret-color: #000; //* deprecated as of v3.1.0 */ //* ######### Z-indexes -- better leave them as they are ######### */ $zindex-navbar: 1000; $zindex-dropdown: 1000; $zindex-popover: 1060; $zindex-tooltip: 1070; $zindex-navbar-fixed: 1030; $zindex-modal-background: 1040; $zindex-modal: 1050; //* ######### Media Queries - Breakpoints ######### */ //* XS - extra small screens/Phone */ $screen-xs: 480px; //* deprecated as of v3.0.1 */ $screen-xs-min: $screen-xs; $screen-phone: $screen-xs-min; //* deprecated as of v3.0.1 */ //* SM - small screens/tablets */ $screen-sm: 768px; //* deprecated as of v3.0.1 */ $screen-sm-min: $screen-sm; $screen-tablet: $screen-sm-min; //* deprecated as of v3.0.1 */ //* MD - medium screens/Desktops */ $screen-md: 992px; //* deprecated as of v3.0.1 */ $screen-md-min: $screen-md; $screen-desktop: $screen-md-min; //* deprecated as of v3.0.1 */ //* LG - large screens/Wide Ddesktops */ $screen-lg: 1200px; //* deprecated as of v3.0.1 */ $screen-lg-min: $screen-lg; $screen-lg-desktop: $screen-lg-min; //* deprecated as of v3.0.1 */ $screen-xs-max: ($screen-sm-min - 1); $screen-sm-max: ($screen-md-min - 1); $screen-md-max: ($screen-lg-min - 1); //* ######### Grid system ######### */ $grid-columns: 12; //* Grid column count */ $grid-gutter-width: 30px; //* Padding between columns. Gets divided in half for the left and right. */ $grid-float-breakpoint: $screen-md-min; //* Navbar collapse - point at which the navbar becomes uncollapsed. */ $grid-float-breakpoint-max: ($grid-float-breakpoint - 1); //* ######### Container sizes ######### */ //* SM - small screens/Tablet, for $screen-sm-min and up. */ $container-tablet: (720px + $grid-gutter-width); $container-sm: $container-tablet; //* MD - medium screens/Desktops, for $screen-md-min and up. */ $container-desktop: (940px + $grid-gutter-width); $container-md: $container-desktop; //* LG - large screens/wide desktop, for $screen-lg-min and up. */ $container-large-desktop: (1140px + $grid-gutter-width); $container-lg: $container-large-desktop; //* ######### Navbar ######### */ $navbar-height: 72px; $navbar-margin-bottom: $line-height-computed; $navbar-border-radius: $border-radius-base; $navbar-padding-horizontal: floor(($grid-gutter-width / 2)); $navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2); $navbar-collapse-max-height: 340px; //* navbar-default */ $navbar-default-color: $text-color; $navbar-default-bg: #f5f5f5; $navbar-default-border: $input-border; $navbar-default-link-color: $gray; $navbar-default-link-hover-color: $gray-base; $navbar-default-link-hover-bg: transparent; $navbar-default-link-active-color: $navbar-default-link-hover-color; $navbar-default-link-active-bg: transparent; $navbar-default-link-disabled-color: $gray-lighter; $navbar-default-link-disabled-bg: transparent; $navbar-default-brand-color: $navbar-default-link-color; $navbar-default-brand-hover-color: $navbar-default-link-hover-color; $navbar-default-brand-hover-bg: transparent; $navbar-default-toggle-hover-bg: transparent; $navbar-default-toggle-icon-bar-bg: $gray; $navbar-default-toggle-border-color: transparent; //* navbar-inverse */ $navbar-inverse-color: $gray; $navbar-inverse-bg: $gray-darker; $navbar-inverse-border: transparent; $navbar-inverse-link-color: $gray-light; $navbar-inverse-link-hover-color: $gray-lighter; $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: $gray-darker; $navbar-inverse-link-disabled-bg: transparent; $navbar-inverse-brand-color: $navbar-inverse-link-color; $navbar-inverse-brand-hover-color: $navbar-inverse-link-hover-color; $navbar-inverse-brand-hover-bg: transparent; $navbar-inverse-toggle-hover-bg: transparent; $navbar-inverse-toggle-icon-bar-bg: $gray-lighter; $navbar-inverse-toggle-border-color: transparent; //* ######### Navs ######### */ $nav-link-padding: 10px 15px; $nav-link-hover-bg: #fff; $nav-disabled-link-color: $gray-light; $nav-disabled-link-hover-color: $gray-light; $nav-tabs-border-color: $navbar-default-border; $nav-tabs-link-hover-border-color: $gray-lighter; $nav-tabs-active-link-hover-bg: #fff; $nav-tabs-active-link-hover-color: $gray; $nav-tabs-active-link-hover-border-color: $nav-tabs-border-color; $nav-tabs-justified-link-border-color: $nav-tabs-border-color; $nav-tabs-justified-active-link-border-color: $body-bg; $nav-pills-border-radius: $border-radius-base; $nav-pills-active-link-hover-bg: $component-active-bg; $nav-pills-active-link-hover-color: $component-active-color; //* ######### Pagination ######### */ $pagination-color: $btn-default-color; $pagination-bg: $btn-default-bg; $pagination-border: $btn-default-border; $pagination-hover-color: $pagination-color; $pagination-hover-bg: $pagination-bg; $pagination-hover-border: $pagination-border; $pagination-active-color: #fff; $pagination-active-bg: $brand-primary; $pagination-active-border: $btn-primary-border; $pagination-disabled-color: $gray-light; $pagination-disabled-bg: $pagination-bg; $pagination-disabled-border: $pagination-border; //* ######### Pager ######### */ $pager-bg: $pagination-bg; $pager-border: $pagination-border; $pager-border-radius: 15px; $pager-hover-bg: $pagination-hover-bg; $pager-active-bg: $pagination-active-bg; $pager-active-color: $pagination-active-color; $pager-disabled-color: $pagination-disabled-color; //* ######### Jumbotron ######### */ $jumbotron-padding: 30px; $jumbotron-color: inherit; $jumbotron-bg: #fafafa; $jumbotron-heading-color: inherit; $jumbotron-font-size: ceil(($font-size-base * 1.5)); $jumbotron-heading-font-size: ceil(($font-size-base * 4.5)); //* ######### Form states and alerts ######### */ $state-success-text: #fff; $state-success-bg: $brand-success; $state-success-border: darken($state-success-bg, 4%); $state-info-text: #fff; $state-info-bg: $brand-info; $state-info-border: darken($state-info-bg, 12%); $state-warning-text: #fff; $state-warning-bg: $brand-warning; $state-warning-border: darken($state-warning-bg, 5%); $state-danger-text: #fff; $state-danger-bg: $brand-danger; $state-danger-border: darken($state-danger-bg, 10%); //* ######### Tooltips ######### */ $tooltip-max-width: 200px; $tooltip-color: #fff; $tooltip-bg: #000; $tooltip-opacity: 0.9; $tooltip-arrow-width: 5px; $tooltip-arrow-color: $tooltip-bg; //* ######### Popovers ######### */ $popover-bg: #fff; $popover-max-width: 276px; $popover-border-color: rgba(0,0,0,0.2); $popover-fallback-border-color: #ccc; $popover-title-bg: darken($popover-bg, 3%); $popover-arrow-width: 10px; $popover-arrow-color: $popover-bg; $popover-arrow-outer-width: ($popover-arrow-width + 1); $popover-arrow-outer-color: fadein($popover-border-color, 5%); $popover-arrow-outer-fallback-color: darken($popover-fallback-border-color, 20%); //* ######### Labels ######### */ $label-default-bg: $gray-light; $label-primary-bg: $brand-primary; $label-success-bg: $brand-success; $label-info-bg: $brand-info; $label-warning-bg: $brand-warning; $label-danger-bg: $brand-danger; $label-color: #fff; $label-link-hover-color: #fff; //* ######### Modals ######### */ $modal-inner-padding: 20px; $modal-title-padding: 15px; $modal-title-line-height: $line-height-base; $modal-content-bg: #fff; $modal-content-border-color: rgba(0,0,0,.05); $modal-content-fallback-border-color: $gray-lighter; $modal-backdrop-bg: #000; $modal-backdrop-opacity: .5; $modal-header-border-color: #e5e5e5; $modal-footer-border-color: $modal-header-border-color; /* widthts */ $modal-lg: 900px; $modal-md: 600px; $modal-sm: 300px; //* ######### Alerts ######### */ $alert-padding: 15px; $alert-border-radius: $border-radius-base; $alert-link-font-weight: bold; $alert-success-bg: $state-success-bg; $alert-success-text: $state-success-text; $alert-success-border: $state-success-border; $alert-info-bg: $state-info-bg; $alert-info-text: $state-info-text; $alert-info-border: $state-info-border; $alert-warning-bg: $state-warning-bg; $alert-warning-text: $state-warning-text; $alert-warning-border: $state-warning-border; $alert-danger-bg: $state-danger-bg; $alert-danger-text: $state-danger-text; $alert-danger-border: $state-danger-border; //* ######### Progress bars ######### */ $progress-bg: $jumbotron-bg; $progress-bar-color: #fff; $progress-border-radius: $border-radius-base; $progress-bar-bg: $brand-primary; $progress-bar-success-bg: $brand-success; $progress-bar-warning-bg: $brand-warning; $progress-bar-danger-bg: $brand-danger; $progress-bar-info-bg: $brand-info; //* ######### List group ######### */ $list-group-bg: #fff; $list-group-border: $gray-lighter; $list-group-border-radius: $border-radius-base; $list-group-hover-bg: #f5f5f5; $list-group-active-color: $component-active-color; $list-group-active-bg: $component-active-bg; $list-group-active-border: $list-group-active-bg; $list-group-active-text-color: lighten($list-group-active-bg, 40%); $list-group-disabled-color: $gray-light; $list-group-disabled-bg: $gray-lighter; $list-group-disabled-text-color: $list-group-disabled-color; $list-group-link-color: #555; $list-group-link-hover-color: $list-group-link-color; $list-group-link-heading-color: #333; //* ######### Panels ######### */ $panel-bg: #fff; $panel-body-padding: 15px; $panel-heading-padding: 10px 15px; $panel-footer-padding: $panel-heading-padding; $panel-border-radius: $border-radius-base; $panel-inner-border: transparent; $panel-footer-bg: #f5f5f5; $panel-default-text: $gray-dark; $panel-default-border: transparent; $panel-default-heading-bg: #f5f5f5; $panel-primary-text: #fff; $panel-primary-border: transparent; $panel-primary-heading-bg: $brand-primary; $panel-success-text: $state-success-text; $panel-success-border: transparent; $panel-success-heading-bg: $state-success-bg; $panel-info-text: $state-info-text; $panel-info-border: transparent; $panel-info-heading-bg: $state-info-bg; $panel-warning-text: $state-warning-text; $panel-warning-border: transparent; $panel-warning-heading-bg: $state-warning-bg; $panel-danger-text: $state-danger-text; $panel-danger-border: transparent; $panel-danger-heading-bg: $state-danger-bg; //* ######### Thumbnails ######### */ $thumbnail-padding: 4px; $thumbnail-bg: $body-bg; $thumbnail-border: $gray-lighter; $thumbnail-border-radius: $border-radius-base; $thumbnail-caption-color: $text-color; $thumbnail-caption-padding: 9px; //* ######### Wells ######### */ $well-bg: $jumbotron-bg; $well-border: darken($well-bg, 7%); //* ######### Badges ######### */ $badge-color: #fff; $badge-link-hover-color: #fff; $badge-bg: $brand-primary; $badge-active-color: $link-color; $badge-active-bg: #fff; $badge-font-weight: normal; $badge-line-height: 1; $badge-border-radius: 10px; //* ######### Breadcrumbs ######### */ $breadcrumb-padding-vertical: 8px; $breadcrumb-padding-horizontal: 15px; $breadcrumb-bg: $well-bg; $breadcrumb-color: $gray-light; $breadcrumb-active-color: $gray-light; $breadcrumb-separator: ">"; //* ######### Carousel ######### */ $carousel-text-shadow: 0 1px 2px rgba(0,0,0,0.6); $carousel-control-color: #fff; $carousel-control-width: 15%; $carousel-control-opacity: 0.5; $carousel-control-font-size: 20px; $carousel-indicator-active-bg: #fff; $carousel-indicator-border-color: #fff; $carousel-caption-color: #fff; //* ######### Close ######### */ $close-font-weight: bold; $close-color: #fff; $close-text-shadow: 0 1px 0 #fff; //* ######### Code, Kbd, Pre ######### */ $code-color: #c7254e; $code-bg: #f9f2f4; $kbd-color: #fff; $kbd-bg: #333; $pre-bg: #f5f5f5; $pre-color: $gray-dark; $pre-border-color: #ccc; $pre-scrollable-max-height: 340px; //* ######### Type ######### */ $component-offset-horizontal: 180px; $text-muted: $gray-light; $abbr-border-color: $gray-light; $headings-small-color: $gray-light; $blockquote-small-color: $gray-light; $blockquote-font-size: ($font-size-base * 1.25); $blockquote-border-color: $gray-lighter; $page-header-border-color: $gray-lighter; $dl-horizontal-offset: $component-offset-horizontal; $dl-horizontal-breakpoint: $grid-float-breakpoint; $hr-border: $gray-lighter;