// // // Variables // -------------------------------------------------- // Global values // -------------------------------------------------- // Grays // ------------------------- $gray-darker: lighten(#000, 13.5%) ; //#222 $gray-dark: lighten(#000, 20%) ; //#333 $gray: lighten(#000, 33.5%) ; //#555 $gray-light: lighten(#000, 60%) ; //#999 $gray-lighter: lighten(#000, 93.5%) ; //#eee // Brand colors // ------------------------- //$brand-primary: #EF1778 ; //rose Prestashop //$brand-primary: #1EAEC0 ; //bleu turquoise //$brand-primary: #33556E ; //$brand-primary: #7F8AAE ; $brand-primary: #1D7878 ; $brand-success: #5cb85c ; $brand-warning: #f0ad4e ; $brand-danger: #d9534f ; $brand-info: #5bc0de ; // Scaffolding // ------------------------- $body-bg: $main-color ; $text-color: $gray ; // Links // ------------------------- // $link-color: $brand-primary ; // $link-hover-color: darken($link-color, 15%) ; // Typography // ------------------------- $font-family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif ; // $font-family-serif: Georgia, "Times New Roman", Times, serif ; // $font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace ; // $font-family-base: $font-family-sans-serif ; $font-size-base: 12px ; // $font-size-large: ceil($font-size-base * 1.25) ; ~18px // $font-size-small: ceil($font-size-base * 0.85) ; ~12px // $font-size-mini: ceil($font-size-base * 0.75) ; ~11px $line-height-base: 1.428571429 ; $line-height-computed: floor($font-size-base * $line-height-base) ; $headings-font-family: 'Ubuntu', sans-serif ; $headings-font-weight: 300 ; // $headings-line-height: 1.1 ; // Components // ------------------------- // Based on 14px font-size and 1.428 line-height (~20px to start) $padding-base-vertical: 4px ; // $padding-base-horizontal: 12px ; // $padding-large-vertical: 14px ; // $padding-large-horizontal: 16px ; // $padding-small-vertical: 5px ; // $padding-small-horizontal: 10px ; $border-radius-base: 3px ; // $border-radius-large: 6px ; // $border-radius-small: 3px ; // $component-active-bg: $brand-primary ; // Tables // ------------------------- // $table-bg: transparent ; overall background-color // $table-bg-accent: #f9f9f9 ; for striping $table-bg-hover: $bg-panel-heading-color ; // $table-border-color: #ddd ; table and cell border // Buttons // ------------------------- $btn-default-color: $text-color ; $btn-default-bg: white ; $btn-default-border: #ccc ; $btn-primary-color: $btn-default-color ; $btn-primary-bg: white ; $btn-primary-border: $brand-success ; // $btn-success-color: $btn-default-color ; // $btn-success-bg: $brand-success ; // $btn-success-border: $btn-success-bg ; // $btn-warning-color: $btn-default-color ; // $btn-warning-bg: $brand-warning ; // $btn-warning-border: $btn-warning-bg ; // $btn-danger-color: $btn-default-color ; // $btn-danger-bg: $brand-danger ; // $btn-danger-border: $btn-danger-bg ; // $btn-info-color: $btn-default-color ; // $btn-info-bg: $brand-info ; // $btn-info-border: $btn-info-bg ; // Forms // ------------------------- $input-bg: #FFF ; // $input-bg-disabled: $gray-lighter ; // $input-border: #ccc ; // $input-border-radius: $border-radius-base ; // $input-color-placeholder: $gray-light ; $input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) ; // $input-height-large: (ceil($font-size-large * $line-height-base) + ($padding-large-vertical * 2) + 2) ; // $input-height-small: (ceil($font-size-small * $line-height-base) + ($padding-small-vertical * 2) + 2) ; // Dropdowns // ------------------------- // $dropdown-bg: #fff ; // $dropdown-border: rgba(0,0,0,.15) ; // $dropdown-divider-top: #e5e5e5 ; // $dropdown-divider-bottom: #fff ; // $dropdown-link-active-color: #fff ; // $dropdown-link-active-bg: $component-active-bg ; // $dropdown-link-color: $gray-dark ; // $dropdown-link-hover-color: #fff ; // $dropdown-link-hover-bg: $dropdown-link-active-bg ; // Grid system // -------------------------------------------------- // Number of columns in the grid system // $grid-columns: 12 ; // Padding, to be divided by two and applied to the left and right of all columns $grid-gutter-width: 10px ; // 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-dropdown: 1000 ; // $zindex-popover: 1010 ; // $zindex-tooltip: 1030 ; // $zindex-navbar-fixed: 1030 ; // $zindex-modal-background: 1040 ; // $zindex-modal: 1050 ; // Navbar // ------------------------- // Basics of a navbar $navbar-height: 35px ; // $navbar-color: #777 ; // $navbar-bg: #eee ; // $navbar-padding: floor($grid-gutter-width / 2) ; ~15px // Navbar links // $navbar-link-color: #777 ; // $navbar-link-hover-color: #333 ; // $navbar-link-hover-bg: transparent ; // $navbar-link-active-color: #555 ; // $navbar-link-active-bg: darken($navbar-bg, 10%) ; // $navbar-link-disabled-color: #ccc ; // $navbar-link-disabled-bg: transparent ; // Navbar brand label // $navbar-brand-color: $navbar-link-color ; // $navbar-brand-hover-color: darken($navbar-link-color, 10%) ; // $navbar-brand-hover-bg: transparent ; // Inverted navbar // $navbar-inverse-color: $gray-light ; // $navbar-inverse-bg: #222 ; // Inverted navbar links // $navbar-inverse-link-color: $gray-light ; // $navbar-inverse-link-hover-color: #fff ; // $navbar-inverse-link-hover-bg: transparent ; // $navbar-inverse-link-active-color: $navbar-inverse-link-hover-color ; // $navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%) ; // $navbar-inverse-link-disabled-color: #444 ; // $navbar-inverse-link-disabled-bg: transparent ; // Inverted navbar brand label // $navbar-inverse-brand-color: $navbar-inverse-link-color ; // $navbar-inverse-brand-hover-color: #fff ; // $navbar-inverse-brand-hover-bg: transparent ; // Inverted navbar search // Normal navbar needs no special styles or vars // $navbar-inverse-search-bg: lighten($navbar-inverse-bg, 25%) ; // $navbar-inverse-search-bg-focus: #fff ; // $navbar-inverse-search-border: $navbar-inverse-bg ; // $navbar-inverse-search-placeholder-color: #ccc ; // Pagination // ------------------------- // $pagination-bg: #fff ; // $pagination-border: #ddd ; // $pagination-active-bg: #f5f5f5 ; // Jumbotron // ------------------------- // $jumbotron-bg: $gray-lighter ; // $jumbotron-heading-color: inherit ; // $jumbotron-lead-color: inherit ; // Form states and alerts // ------------------------- // $state-warning-text: #c09853 ; // $state-warning-bg: #fcf8e3 ; // $state-warning-border: darken(adjust-hue($state-warning-bg, -10), 3%) ; // $state-danger-text: #b94a48 ; // $state-danger-bg: #f2dede ; // $state-danger-border: darken(adjust-hue($state-danger-bg, -10), 3%) ; // $state-success-text: #468847 ; // $state-success-bg: #dff0d8 ; // $state-success-border: darken(adjust-hue($state-success-bg, -10), 5%) ; // $state-info-text: #3a87ad ; // $state-info-bg: #d9edf7 ; // $state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) ; // Tooltips and popovers // ------------------------- // $tooltip-color: #fff ; // $tooltip-bg: rgba(0,0,0,.9) ; // $tooltip-arrow-width: 5px ; // $tooltip-arrow-color: $tooltip-bg ; // $popover-bg: #fff ; // $popover-arrow-width: 10px ; // $popover-arrow-color: #fff ; // $popover-title-bg: darken($popover-bg, 3%) ; // Special enhancement for popovers // $popover-arrow-outer-width: ($popover-arrow-width + 1) ; // $popover-arrow-outer-color: rgba(0,0,0,.25) ; // Labels // ------------------------- // $label-success-bg: $brand-success ; // $label-info-bg: $brand-info ; // $label-warning-bg: $brand-warning ; // $label-danger-bg: $brand-danger ; // Modals // ------------------------- // $modal-inner-padding: 20px ; // $modal-title-padding: 15px ; // $modal-title-line-height: $line-height-base ; // Alerts // ------------------------- // $alert-bg: $state-warning-bg ; // $alert-text: $state-warning-text ; // $alert-border: $state-warning-border ; // $alert-border-radius: $border-radius-base ; // $alert-success-bg: $state-success-bg ; // $alert-success-text: $state-success-text ; // $alert-success-border: $state-success-border ; // $alert-danger-bg: $state-danger-bg ; // $alert-danger-text: $state-danger-text ; // $alert-danger-border: $state-danger-border ; // $alert-info-bg: $state-info-bg ; // $alert-info-text: $state-info-text ; // $alert-info-border: $state-info-border ; // Progress bars // ------------------------- // $progress-bg: #f5f5f5 ; // $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: #ddd ; // $list-group-border-radius: $border-radius-base ; // $list-group-hover-bg: #f5f5f5 ; // $list-group-active-color: #fff ; // $list-group-active-bg: $component-active-bg ; // $list-group-active-border: $list-group-active-bg ; // Panels // ------------------------- // $panel-bg: #fff ; // $panel-border: #ddd ; // $panel-border-radius: $border-radius-base ; // $panel-heading-bg: #f5f5f5 ; // $panel-footer-bg: #f5f5f5 ; // $panel-primary-text: #fff ; // $panel-primary-border: $brand-primary ; // $panel-primary-heading-bg: $brand-primary ; // $panel-success-text: $state-success-text ; // $panel-success-border: $state-success-border ; // $panel-success-heading-bg: $state-success-bg ; // $panel-warning-text: $state-warning-text ; // $panel-warning-border: $state-warning-border ; // $panel-warning-heading-bg: $state-warning-bg ; // $panel-danger-text: $state-danger-text ; // $panel-danger-border: $state-danger-border ; // $panel-danger-heading-bg: $state-danger-bg ; // $panel-info-text: $state-info-text ; // $panel-info-border: $state-info-border ; // $panel-info-heading-bg: $state-info-bg ; // Thumbnails // ------------------------- // $thumbnail-caption-color: $text-color ; // $thumbnail-bg: $body-bg ; // $thumbnail-border: #ddd ; // $thumbnail-border-radius: $border-radius-base ; // Wells // ------------------------- $well-bg: darken($bg-content-color,5%) ; // Miscellaneous // ------------------------- // Hr border color // $hr-border: $gray-lighter ; // Horizontal forms & lists // $component-offset-horizontal: 180px ; // Media queries breakpoints // -------------------------------------------------- // Tiny screen / phone $screen-tiny: 480px ; $screen-phone: $screen-tiny ; // Small screen / tablet $screen-small: 768px ; $screen-tablet: $screen-small ; // Medium screen / desktop $screen-medium: 992px ; $screen-desktop: $screen-medium ; // So media queries don't overlap when required, provide a maximum $screen-small-max: ($screen-medium - 1) ; $screen-tablet-max: $screen-small-max ; // Large screen / wide desktop $screen-large: 1200px ; $screen-large-desktop: $screen-large ; // Container sizes // -------------------------------------------------- // Small screen / tablet $container-tablet: 728px ; // Medium screen / desktop $container-desktop: 940px ; // Large screen / wide desktop $container-large-desktop: 1170px ; // Grid system // -------------------------------------------------- // Point at which the navbar stops collapsing // $grid-float-breakpoint: $screen-tablet ;