431 lines
14 KiB
SCSS
431 lines
14 KiB
SCSS
// //
|
|
// 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: #313A45 ;
|
|
$brand-success: #5cb85c ;
|
|
|
|
// $brand-warning: #f0ad4e ;
|
|
// $brand-danger: #d9534f ;
|
|
// $brand-info: #5bc0de ;
|
|
|
|
// Scaffolding
|
|
// -------------------------
|
|
|
|
$body-bg: darken($brand-primary,30%) ;
|
|
// $text-color: $gray-dark ;
|
|
|
|
// 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: lighten($brand-primary,40%) ;
|
|
|
|
// $table-border-color: #ddd ; table and cell border
|
|
|
|
|
|
// Buttons
|
|
// -------------------------
|
|
|
|
// $btn-default-color: #fff ;
|
|
$btn-default-bg: #48525F ;
|
|
// $btn-default-border: $btn-default-bg ;
|
|
|
|
// $btn-primary-color: $btn-default-color ;
|
|
// $btn-primary-bg: $brand-primary ;
|
|
// $btn-primary-border: $btn-primary-bg ;
|
|
|
|
// $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: 30px ;
|
|
|
|
|
|
// 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: 50px ;
|
|
// $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 ;
|