diff --git a/build/scss/AdminLTE.scss b/build/scss/AdminLTE.scss index bba3bf625..e0a4d1e10 100644 --- a/build/scss/AdminLTE.scss +++ b/build/scss/AdminLTE.scss @@ -62,3 +62,7 @@ // ------------- @import "miscellaneous"; @import "print"; + +// Skins +// ----- +@import "skins/all-skins"; \ No newline at end of file diff --git a/build/scss/_bootstrap_variables.scss b/build/scss/_bootstrap_variables.scss index 681f27b03..f12556720 100644 --- a/build/scss/_bootstrap_variables.scss +++ b/build/scss/_bootstrap_variables.scss @@ -1 +1,620 @@ -$var1: 3; \ No newline at end of file +// Variables +// +// Copy settings from this file into the provided `_custom.scss` to override +// the Bootstrap defaults without modifying key, versioned files. + + +// Table of ontents +// +// Colors +// Options +// Spacing +// Body +// Links +// Grid breakpoints +// Grid containers +// Grid columns +// Fonts +// Components + +// General variable structure +// +// Variable format should follow the `$component-modifier-state-property` order. + + +// Colors +// +// Grayscale and brand colors for use across Bootstrap. + +$gray-dark: #373a3c !default; +$gray: #55595c !default; +$gray-light: #818a91 !default; +$gray-lighter: #eceeef !default; +$gray-lightest: #f7f7f9 !default; + +$brand-primary: #0275d8 !default; +$brand-success: #5cb85c !default; +$brand-info: #5bc0de !default; +$brand-warning: #f0ad4e !default; +$brand-danger: #d9534f !default; + + +// Options +// +// Quickly modify global styling by enabling or disabling optional features. + +$enable-flex: false !default; +$enable-rounded: true !default; +$enable-shadows: false !default; +$enable-gradients: false !default; +$enable-transitions: false !default; +$enable-hover-media-query: false !default; + + +// Spacing +// +// Control the default styling of most Bootstrap elements by modifying these +// variables. Mostly focused on spacing. + +$spacer: 1rem !default; +$spacer-x: $spacer !default; +$spacer-y: $spacer !default; +$border-width: .0625rem !default; + + +// Body +// +// Settings for the `
` element. + +$body-bg: #fff !default; +$body-color: $gray-dark !default; + + +// Links +// +// Style anchor elements. + +$link-color: $brand-primary !default; +$link-hover-color: darken($link-color, 15%) !default; +$link-hover-decoration: underline !default; + + +// Grid breakpoints +// +// Define the minimum and maximum dimensions at which your layout will change, +// adapting to different screen sizes, for use in media queries. + +$grid-breakpoints: ( + // Extra small screen / phone + xs: 0, + // Small screen / phone + sm: 34em, + // Medium screen / tablet + md: 48em, + // Large screen / desktop + lg: 62em, + // Extra large screen / wide desktop + xl: 75em +) !default; + + +// Grid containers +// +// Define the maximum width of `.container` for different screen sizes. + +$container-max-widths: ( + sm: 34rem, // 480 + md: 45rem, // 720 + lg: 60rem, // 960 + xl: 72.25rem // 1140 +) !default; + + +// Grid columns +// +// Set the number of columns and specify the width of the gutters. + +$grid-columns: 12 !default; +$grid-gutter-width: 1.875rem !default; // 30px + + +// Typography +// +// Font, line-height, and color for body text, headings, and more. + +$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default; +$font-family-serif: Georgia, "Times New Roman", Times, serif !default; +$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default; +$font-family-base: $font-family-sans-serif !default; + +// Pixel value used to responsively scale all typography. Applied to the `` element. +$font-size-root: 16px !default; + +$font-size-base: 1rem !default; +$font-size-lg: 1.25rem !default; +$font-size-sm: .85rem !default; +$font-size-xs: .75rem !default; + +$font-size-h1: 2.5rem !default; +$font-size-h2: 2rem !default; +$font-size-h3: 1.75rem !default; +$font-size-h4: 1.5rem !default; +$font-size-h5: 1.25rem !default; +$font-size-h6: 1rem !default; + +$display1-size: 3.5rem !default; +$display2-size: 4.5rem !default; +$display3-size: 5.5rem !default; +$display4-size: 6rem !default; + +$display1-weight: 300 !default; +$display2-weight: 300 !default; +$display3-weight: 300 !default; +$display4-weight: 300 !default; + +$line-height: 1.5 !default; + +$headings-margin-bottom: ($spacer / 2) !default; +$headings-font-family: inherit !default; +$headings-font-weight: 500 !default; +$headings-line-height: 1.1 !default; +$headings-color: inherit !default; + +$lead-font-size: 1.25rem !default; +$lead-font-weight: 300 !default; + +$text-muted: $gray-light !default; + +$abbr-border-color: $gray-light !default; + +$blockquote-small-color: $gray-light !default; +$blockquote-font-size: ($font-size-base * 1.25) !default; +$blockquote-border-color: $gray-lighter !default; + +$hr-border-color: rgba(0,0,0,.1) !default; +$hr-border-width: $border-width; + + +// Components +// +// Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). + +$line-height-lg: (4/3) !default; +$line-height-sm: 1.5 !default; + +$border-radius: .25rem !default; +$border-radius-lg: .3rem !default; +$border-radius-sm: .2rem !default; + +$component-active-color: #fff !default; +$component-active-bg: $brand-primary !default; + +$caret-width: .3em !default; +$caret-width-lg: $caret-width !default; + + +// Tables +// +// Customizes the `.table` component with basic values, each used across all table variations. + +$table-cell-padding: .75rem !default; +$table-sm-cell-padding: .3rem !default; + +$table-bg: transparent !default; +$table-bg-accent: #f9f9f9 !default; +$table-bg-hover: #f5f5f5 !default; +$table-bg-active: $table-bg-hover !default; + +$table-border-color: $gray-lighter !default; + + +// Buttons +// +// For each of Bootstrap's buttons, define text, background and border color. + +$btn-padding-x: 1rem; +$btn-padding-y: .375rem; +$btn-font-weight: normal !default; + +$btn-primary-color: #fff !default; +$btn-primary-bg: $brand-primary !default; +$btn-primary-border: $btn-primary-bg !default; + +$btn-secondary-color: $gray-dark !default; +$btn-secondary-bg: #fff !default; +$btn-secondary-border: #ccc !default; + +$btn-info-color: #fff !default; +$btn-info-bg: $brand-info !default; +$btn-info-border: $btn-info-bg !default; + +$btn-success-color: #fff !default; +$btn-success-bg: $brand-success !default; +$btn-success-border: $btn-success-bg !default; + +$btn-warning-color: #fff !default; +$btn-warning-bg: $brand-warning !default; +$btn-warning-border: $btn-warning-bg !default; + +$btn-danger-color: #fff !default; +$btn-danger-bg: $brand-danger !default; +$btn-danger-border: $btn-danger-bg !default; + +$btn-link-disabled-color: $gray-light !default; + +$btn-padding-x-sm: .75rem !default; +$btn-padding-y-sm: .25rem !default; + +$btn-padding-x-lg: 1.25rem !default; +$btn-padding-y-lg: .75rem !default; + +// Allows for customizing button radius independently from global border radius +$btn-border-radius: $border-radius; +$btn-border-radius-lg: $border-radius-lg; +$btn-border-radius-sm: $border-radius-sm; + + +// Forms + +$input-padding-x: .75rem !default; +$input-padding-y: .375rem !default; + +$input-bg: #fff !default; +$input-bg-disabled: $gray-lighter !default; + +$input-color: $gray !default; +$input-border: #ccc !default; +$input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default; + +$input-border-radius: $border-radius !default; +$input-border-radius-lg: $border-radius-lg !default; +$input-border-radius-sm: $border-radius-sm !default; + +$input-border-focus: #66afe9 !default; +$input-box-shadow-focus: rgba(102,175,233,.6) !default; + +$input-color-placeholder: #999 !default; + +$input-padding-x-sm: .75rem !default; +$input-padding-y-sm: .275rem !default; + +$input-padding-x-lg: 1.25rem !default; +$input-padding-y-lg: .75rem !default; + +$input-height: (($font-size-base * $line-height) + ($input-padding-y * 2) + ($border-width * 2)) !default; +$input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2) + ($border-width * 2)) !default; +$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2) + ($border-width * 2)) !default; + +$form-group-margin-bottom: 15px; + +$input-group-addon-bg: $gray-lighter !default; +$input-group-addon-border-color: $input-border !default; + +$cursor-disabled: not-allowed !default; + +// Form validation icons +$form-icon-success: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNoZWNrIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMiA3OTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYxMiA3OTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiM1Q0I4NUMiIGQ9Ik0yMzMuOCw2MTAuMWMtMTMuMywwLTI1LjktNi4yLTM0LTE2LjlMOTAuNSw0NDguOEM3Ni4zLDQzMCw4MCw0MDMuMyw5OC44LDM4OS4xYzE4LjgtMTQuMyw0NS41LTEwLjUsNTkuOCw4LjNsNzEuOSw5NWwyMjAuOS0yNTAuNWMxMi41LTIwLDM4LjgtMjYuMSw1OC44LTEzLjZjMjAsMTIuNCwyNi4xLDM4LjcsMTMuNiw1OC44TDI3MCw1OTBjLTcuNCwxMi0yMC4yLDE5LjQtMzQuMywyMC4xQzIzNS4xLDYxMC4xLDIzNC41LDYxMC4xLDIzMy44LDYxMC4xeiIvPjwvc3ZnPg=="; +$form-icon-warning: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9Ildhcm5pbmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNjEyIDc5MiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgNjEyIDc5MiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iI0YwQUQ0RSIgZD0iTTYwMyw2NDAuMmwtMjc4LjUtNTA5Yy0zLjgtNi42LTEwLjgtMTAuNi0xOC41LTEwLjZzLTE0LjcsNC4xLTE4LjUsMTAuNkw5LDY0MC4yYy0zLjcsNi41LTMuNiwxNC40LDAuMiwyMC44YzMuOCw2LjUsMTAuOCwxMC40LDE4LjMsMTAuNGg1NTcuMWM3LjUsMCwxNC41LTMuOSwxOC4zLTEwLjRDNjA2LjYsNjU0LjYsNjA2LjcsNjQ2LjYsNjAzLDY0MC4yeiBNMzM2LjYsNjEwLjJoLTYxLjJWNTQ5aDYxLjJWNjEwLjJ6IE0zMzYuNiw1MDMuMWgtNjEuMlYzMDQuMmg2MS4yVjUwMy4xeiIvPjwvc3ZnPg=="; +$form-icon-error: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNyb3NzIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYxMiA3OTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYxMiA3OTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiNEOTUzNEYiIGQ9Ik00NDcsNTQ0LjRjLTE0LjQsMTQuNC0zNy42LDE0LjQtNTEuOSwwTDMwNiw0NTEuN2wtODkuMSw5Mi43Yy0xNC40LDE0LjQtMzcuNiwxNC40LTUxLjksMGMtMTQuNC0xNC40LTE0LjQtMzcuNiwwLTUxLjlsOTIuNC05Ni40TDE2NSwyOTkuNmMtMTQuNC0xNC40LTE0LjQtMzcuNiwwLTUxLjlzMzcuNi0xNC40LDUxLjksMGw4OS4yLDkyLjdsODkuMS05Mi43YzE0LjQtMTQuNCwzNy42LTE0LjQsNTEuOSwwYzE0LjQsMTQuNCwxNC40LDM3LjYsMCw1MS45TDM1NC43LDM5Nmw5Mi40LDk2LjRDNDYxLjQsNTA2LjgsNDYxLjQsNTMwLDQ0Nyw1NDQuNHoiLz48L3N2Zz4="; + + +// Dropdowns +// +// Dropdown menu container and contents. + +$dropdown-bg: #fff !default; +$dropdown-border: rgba(0,0,0,.15) !default; +$dropdown-divider-bg: #e5e5e5 !default; + +$dropdown-link-color: $gray-dark !default; +$dropdown-link-hover-color: darken($gray-dark, 5%) !default; +$dropdown-link-hover-bg: #f5f5f5 !default; + +$dropdown-link-active-color: $component-active-color !default; +$dropdown-link-active-bg: $component-active-bg !default; + +$dropdown-link-disabled-color: $gray-light !default; + +$dropdown-header-color: $gray-light !default; + + +// Z-index master list +// +// Warning: Avoid customizing these values. They're used for a bird's eye view +// of components dependent on the z-axis and are designed to all work together. +// +// Note: These variables are not generated into the Customizer. + +$zindex-navbar: 1000 !default; +$zindex-dropdown: 1000 !default; +$zindex-popover: 1060 !default; +$zindex-tooltip: 1070 !default; +$zindex-navbar-fixed: 1030 !default; +$zindex-navbar-sticky: 1030 !default; +$zindex-modal-bg: 1040 !default; +$zindex-modal: 1050 !default; + + +// Navbar + +$navbar-border-radius: $border-radius !default; +$navbar-padding-horizontal: $spacer !default; +$navbar-padding-vertical: ($spacer / 2) !default; + +$navbar-dark-color: rgba(255,255,255,.5); +$navbar-dark-hover-color: rgba(255,255,255,.75); +$navbar-dark-active-color: rgba(255,255,255,1); +$navbar-dark-disabled-color: rgba(255,255,255,.25); + +$navbar-light-color: rgba(0,0,0,.3); +$navbar-light-hover-color: rgba(0,0,0,.6); +$navbar-light-active-color: rgba(0,0,0,.8); +$navbar-light-disabled-color: rgba(0,0,0,.15); + + +// Navs + +$nav-link-padding: .5em 1em !default; +$nav-link-hover-bg: $gray-lighter !default; + +$nav-disabled-link-color: $gray-light !default; +$nav-disabled-link-hover-color: $gray-light !default; + +$nav-tabs-border-color: #ddd !default; + +$nav-tabs-link-hover-border-color: $gray-lighter !default; + +$nav-tabs-active-link-hover-bg: $body-bg !default; +$nav-tabs-active-link-hover-color: $gray !default; +$nav-tabs-active-link-hover-border-color: #ddd !default; + +$nav-tabs-justified-link-border-color: #ddd !default; +$nav-tabs-justified-active-link-border-color: $body-bg !default; + +$nav-pills-border-radius: $border-radius !default; +$nav-pills-active-link-hover-bg: $component-active-bg !default; +$nav-pills-active-link-hover-color: $component-active-color !default; + + +// Pagination + +$pagination-padding-x: .75rem !default; +$pagination-padding-y: .5rem !default; +$pagination-padding-x-sm: .75rem !default; +$pagination-padding-y-sm: .275rem !default; +$pagination-padding-x-lg: 1.5rem !default; +$pagination-padding-y-lg: .75rem !default; + + +$pagination-color: $link-color !default; +$pagination-bg: #fff !default; +$pagination-border: #ddd !default; + +$pagination-hover-color: $link-hover-color !default; +$pagination-hover-bg: $gray-lighter !default; +$pagination-hover-border: #ddd !default; + +$pagination-active-color: #fff !default; +$pagination-active-bg: $brand-primary !default; +$pagination-active-border: $brand-primary !default; + +$pagination-disabled-color: $gray-light !default; +$pagination-disabled-bg: #fff !default; +$pagination-disabled-border: #ddd !default; + + +// Pager + +$pager-bg: $pagination-bg !default; +$pager-border: $pagination-border !default; +$pager-border-radius: 15px !default; + +$pager-hover-bg: $pagination-hover-bg !default; + +$pager-active-bg: $pagination-active-bg !default; +$pager-active-color: $pagination-active-color !default; + +$pager-disabled-color: $pagination-disabled-color !default; + + +// Jumbotron + +$jumbotron-padding: 2rem !default; +$jumbotron-bg: $gray-lighter !default; + + +// Form states and alerts +// +// Define colors for form feedback states and, by default, alerts. + +$state-success-text: #3c763d !default; +$state-success-bg: #dff0d8 !default; +$state-success-border: darken($state-success-bg, 5%) !default; + +$state-info-text: #31708f !default; +$state-info-bg: #d9edf7 !default; +$state-info-border: darken($state-info-bg, 7%) !default; + +$state-warning-text: #8a6d3b !default; +$state-warning-bg: #fcf8e3 !default; +$state-warning-border: darken($state-warning-bg, 5%) !default; + +$state-danger-text: #a94442 !default; +$state-danger-bg: #f2dede !default; +$state-danger-border: darken($state-danger-bg, 5%) !default; + + +// Tooltips + +$tooltip-max-width: 200px !default; +$tooltip-color: #fff !default; +$tooltip-bg: #000 !default; +$tooltip-opacity: .9 !default; + +$tooltip-arrow-width: 5px !default; +$tooltip-arrow-color: $tooltip-bg !default; + + +// Popovers + +$popover-bg: #fff !default; +$popover-max-width: 276px !default; +$popover-border-color: rgba(0,0,0,.2) !default; +$popover-fallback-border-color: #ccc !default; + +$popover-title-bg: darken($popover-bg, 3%) !default; + +$popover-arrow-width: 10px !default; +$popover-arrow-color: $popover-bg !default; + +$popover-arrow-outer-width: ($popover-arrow-width + 1) !default; +$popover-arrow-outer-color: fade-in($popover-border-color, 0.05) !default; +$popover-arrow-outer-fallback-color: darken($popover-fallback-border-color, 20%) !default; + + +// Labels + +$label-default-bg: $gray-light !default; +$label-primary-bg: $brand-primary !default; +$label-success-bg: $brand-success !default; +$label-info-bg: $brand-info !default; +$label-warning-bg: $brand-warning !default; +$label-danger-bg: $brand-danger !default; + +$label-color: #fff !default; +$label-link-hover-color: #fff !default; + + +// Modals + +// Padding applied to the modal body +$modal-inner-padding: 15px !default; + +$modal-title-padding: 15px !default; +$modal-title-line-height: $line-height !default; + +$modal-content-bg: #fff !default; +$modal-content-border-color: rgba(0,0,0,.2) !default; + +$modal-backdrop-bg: #000 !default; +$modal-backdrop-opacity: .5 !default; +$modal-header-border-color: #e5e5e5 !default; +$modal-footer-border-color: $modal-header-border-color !default; + +$modal-lg: 900px !default; +$modal-md: 600px !default; +$modal-sm: 300px !default; + + +// Alerts +// +// Define alert colors, border radius, and padding. + +$alert-padding: 15px !default; +$alert-border-radius: $border-radius !default; +$alert-link-font-weight: bold !default; + +$alert-success-bg: $state-success-bg !default; +$alert-success-text: $state-success-text !default; +$alert-success-border: $state-success-border !default; + +$alert-info-bg: $state-info-bg !default; +$alert-info-text: $state-info-text !default; +$alert-info-border: $state-info-border !default; + +$alert-warning-bg: $state-warning-bg !default; +$alert-warning-text: $state-warning-text !default; +$alert-warning-border: $state-warning-border !default; + +$alert-danger-bg: $state-danger-bg !default; +$alert-danger-text: $state-danger-text !default; +$alert-danger-border: $state-danger-border !default; + + +// Progress bars + +$progress-bg: #f5f5f5 !default; +$progress-bar-color: #fff !default; +$progress-border-radius: $border-radius !default; + +$progress-bar-bg: $brand-primary !default; +$progress-bar-success-bg: $brand-success !default; +$progress-bar-warning-bg: $brand-warning !default; +$progress-bar-danger-bg: $brand-danger !default; +$progress-bar-info-bg: $brand-info !default; + + +// List group + +$list-group-bg: #fff !default; +$list-group-border: #ddd !default; +$list-group-border-radius: $border-radius !default; + +$list-group-hover-bg: #f5f5f5 !default; +$list-group-active-color: $component-active-color !default; +$list-group-active-bg: $component-active-bg !default; +$list-group-active-border: $list-group-active-bg !default; +$list-group-active-text-color: lighten($list-group-active-bg, 40%) !default; + +$list-group-disabled-color: $gray-light !default; +$list-group-disabled-bg: $gray-lighter !default; +$list-group-disabled-text-color: $list-group-disabled-color !default; + +$list-group-link-color: #555 !default; +$list-group-link-hover-color: $list-group-link-color !default; +$list-group-link-heading-color: #333 !default; + + +// Image thumbnails + +$thumbnail-padding: .25rem !default; +$thumbnail-bg: $body-bg !default; +$thumbnail-border: #ddd !default; +$thumbnail-border-radius: $border-radius !default; + + +// Breadcrumbs + +$breadcrumb-padding-vertical: .75rem !default; +$breadcrumb-padding-horizontal: 1rem !default; + +$breadcrumb-bg: $gray-lighter !default; +$breadcrumb-divider-color: $gray-light !default; +$breadcrumb-active-color: $gray-light !default; +$breadcrumb-divider: "/" !default; + + +// Carousel + +$carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default; + +$carousel-control-color: #fff !default; +$carousel-control-width: 15% !default; +$carousel-control-opacity: .5 !default; +$carousel-control-font-size: 20px !default; + +$carousel-indicator-active-bg: #fff !default; +$carousel-indicator-border-color: #fff !default; + +$carousel-caption-color: #fff !default; + + +// Close + +$close-font-weight: bold !default; +$close-color: #000 !default; +$close-text-shadow: 0 1px 0 #fff !default; + + +// Code + +$code-color: #bd4147 !default; +$code-bg: #f7f7f9 !default; + +$kbd-color: #fff !default; +$kbd-bg: #333 !default; + +$pre-bg: #f7f7f9 !default; +$pre-color: $gray-dark !default; +$pre-border-color: #ccc !default; +$pre-scrollable-max-height: 340px !default; diff --git a/build/scss/_boxes.scss b/build/scss/_boxes.scss index 1a029ff1a..18f47ce9c 100644 --- a/build/scss/_boxes.scss +++ b/build/scss/_boxes.scss @@ -28,7 +28,7 @@ border-top-color: $green; } &.box-default { - border-top-color: $gray; + border-top-color: $box-default-border-top-color; } // collapsed mode @@ -224,10 +224,10 @@ padding: 5px; font-size: 12px; background: transparent; - color: darken($box-default-border-top-color, 20%); + color: $gray-light; .open &, &:hover { - color: darken($box-default-border-top-color, 40%); + color: $gray; } &.btn:active { box-shadow: none; diff --git a/build/scss/_core.scss b/build/scss/_core.scss index 8902e75e9..02f439432 100644 --- a/build/scss/_core.scss +++ b/build/scss/_core.scss @@ -13,8 +13,6 @@ body { body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-weight: 400; overflow-x: hidden; overflow-y: auto; } @@ -35,7 +33,7 @@ body { } .layout-boxed { - background: url('${boxed-layout-bg-image-path}') repeat fixed; + background: url('#{$boxed-layout-bg-image-path}') repeat fixed; } /* @@ -75,7 +73,7 @@ transition: transform $transition-rule; .content-wrapper, .right-side { min-height: 100%; - background-color: $body-bg; + background-color: $main-bg; z-index: 800; } @@ -83,7 +81,7 @@ transition: transform $transition-rule; background: #fff; padding: 15px; color: #444; - border-top: 1px solid $gray; + border-top: 1px solid $gray-lighter; } /* Fixed layout */ diff --git a/build/scss/_header.scss b/build/scss/_header.scss index f72637d75..5db69c36b 100644 --- a/build/scss/_header.scss +++ b/build/scss/_header.scss @@ -4,244 +4,5 @@ */ .main-header { - position: relative; - max-height: 100px; - z-index: 1030; - //Navbar - > .navbar { - transition: margin-left $transition-speed $transition-fn; - margin-bottom: 0; - margin-left: $sidebar-width; - border: none; - padding: $navbar-padding-vertical $navbar-padding-horizontal; - border-radius: 0; - .layout-top-nav & { - margin-left: 0; - } - } - //Navbar search text input - #navbar-search-input.form-control { - background: rgba(255, 255, 255, 0.2); - border-color: transparent; - &:focus, - &:active { - border-color: rgba(0, 0, 0, 1); - background: rgba(255, 255, 255, 1); - } - &::-moz-placeholder { - color: #ccc; - opacity: 1; - } - &:-ms-input-placeholder { - color: #ccc; - } - &::-webkit-input-placeholder { - color: #ccc; - } - } - //Navbar Right Menu - .navbar-custom-menu, - .navbar-right { - float: right; - @media (max-width: map-get($grid-breakpoints, sm)) { - a { - color: inherit; - background: transparent; - } - } - } - .navbar-right { - @media (max-width: $screen-header-collapse) { - float: none; - .navbar-collapse & { - margin: 7.5px -15px; - } - > li { - color: inherit; - border: 0; - } - } - } - //Navbar toggle button - .sidebar-toggle { - float: left; - background-color: transparent; - background-image: none; - padding: $navbar-padding-vertical $navbar-padding-horizontal; - //Add the fontawesome bars icon - font-family: fontAwesome; - &:before { - content: "\f0c9"; - } - &:hover { - color: #fff; - } - &:focus, - &:active { - background: transparent; - } - } - .sidebar-toggle .icon-bar { - display: none; - } - //Navbar User Menu - .navbar .nav > li.user > a { - > .fa, - > .glyphicon, - > .ion { - margin-right: 5px; - } - } - - //Labels in navbar - .navbar .nav > li > a > .label { - position: absolute; - top: 9px; - right: 7px; - text-align: center; - font-size: 9px; - padding: 2px 3px; - line-height: 9px; - } - - //Logo bar - .logo { - transition: width $transition-speed $transition-fn; - display: block; - float: left; - font-size: 20px; - line-height: 50px; - text-align: center; - width: $sidebar-width; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - padding: $navbar-padding-vertical $navbar-padding-horizontal; - font-weight: 300; - overflow: hidden; - //Add support to sidebar mini by allowing the user to create - //2 logo designs. mini and lg - .logo-lg { - //should be visibile when sidebar isn't collapsed - display: block; - } - .logo-mini { - display: none; - } - } - //Navbar Brand. Alternative logo with layout-top-nav - .navbar-brand { - color: #fff; - } -} - -// Content Header -.content-header { - position: relative; - padding: 15px 15px 0 15px; - // Header Text - > h1 { - margin: 0; - font-size: 24px; - > small { - font-size: 15px; - display: inline-block; - padding-left: 4px; - font-weight: 300; - } - } - - > .breadcrumb { - float: right; - background: transparent; - margin-top: 0; - margin-bottom: 0; - font-size: 12px; - padding: 7px 5px; - position: absolute; - top: 15px; - right: 10px; - @include border-radius(2px); - > li > a { - color: #444; - text-decoration: none; - display: inline-block; - > .fa, > .glyphicon, > .ion { - margin-right: 5px; - } - } - > li + li:before { - content: '>\00a0'; - } - } - - @media (max-width: map-get($grid-breakpoints, sm)) { - > .breadcrumb { - position: relative; - margin-top: 5px; - top: 0; - right: 0; - float: none; - background: $gray; - padding-left: 10px; - li:before { - color: darken($gray, 20%); - } - } - } -} - -.navbar-toggle { - color: #fff; - border: 0; - margin: 0; - padding: $navbar-padding-vertical $navbar-padding-horizontal; -} - -//Control navbar scaffolding on x-small screens -@media (max-width: map-get($grid-breakpoints, sm)) { - .navbar-custom-menu .navbar-nav > li { - float: left; - } - - //Dont't let links get full width - .navbar-custom-menu .navbar-nav { - margin: 0; - float: left; - } - - .navbar-custom-menu .navbar-nav > li > a { - padding-top: 15px; - padding-bottom: 15px; - line-height: 20px; - } -} - -// Collapse header -@media (max-width: $screen-header-collapse) { - .main-header { - position: relative; - .logo, - .navbar { - width: 100%; - float: none; - } - .navbar { - margin: 0; - } - .navbar-custom-menu { - float: right; - } - } -} - -.navbar-collapse.pull-left { - @media (max-width: map-get($grid-breakpoints, sm)) { - float: none !important; - + .navbar-custom-menu { - display: block; - position: absolute; - top: 0; - right: 40px; - } - } -} +} \ No newline at end of file diff --git a/build/scss/_mixins.scss b/build/scss/_mixins.scss index 5a87e6ce6..32032fe72 100644 --- a/build/scss/_mixins.scss +++ b/build/scss/_mixins.scss @@ -174,7 +174,7 @@ } input[type="text"] { color: #666; - @include border-radius(2px, 0, 2px, 0); + @include border-radius-sides(2px, 0, 2px, 0); &:focus, &:focus + .input-group-btn .btn { background-color: #fff; color: #666; @@ -185,7 +185,7 @@ } .btn { color: #999; - @include border-radius(0, 2px, 0, 2px); + @include border-radius-sides(0, 2px, 0, 2px); } } } @@ -279,7 +279,7 @@ } input[type="text"] { color: #666; - @include border-radius(2px, 0, 2px, 0); + @include border-radius-sides(2px, 0, 2px, 0); &:focus, &:focus + .input-group-btn .btn { background-color: #fff; @@ -291,7 +291,7 @@ } .btn { color: #999; - @include border-radius(0, 2px, 0, 2px); + @include border-radius-sides(0, 2px, 0, 2px); } } @media (min-width: map-get($grid-breakpoints, sm)) { diff --git a/build/scss/_navs.scss b/build/scss/_navs.scss index ce763c4fb..daaccde09 100644 --- a/build/scss/_navs.scss +++ b/build/scss/_navs.scss @@ -8,7 +8,7 @@ > li > a:active, > li > a:focus { color: #444; - background: #f7f7f7; + //background: #f7f7f7; } } diff --git a/build/scss/_variables.scss b/build/scss/_variables.scss index f7dcdd225..3719c24bb 100644 --- a/build/scss/_variables.scss +++ b/build/scss/_variables.scss @@ -28,7 +28,7 @@ $fuchsia: #F012BE; $purple: #605ca8; $maroon: #D81B60; $black: #111; -$gray: #d2d6de; +//$gray: #d2d6de; //LAYOUT //-------------------------------------------------------- @@ -40,12 +40,12 @@ $boxed-layout-max-width: 1024px; //When the logo should go to the top of the screen $screen-header-collapse: map-get($grid-breakpoints, xs); -//Link colors (Aka: tags) +//Link colors (aka: tags) $link-color: $light-blue; $link-hover-color: lighten($link-color, 15%); //Body background (Affects main content background only) -$body-bg: #ecf0f5; +$main-bg: #ecf0f5; //SIDEBAR SKINS //-------------------------------------------------------- @@ -81,7 +81,7 @@ $box-boxshadow: 0 1px 1px rgba(0, 0, 0, 0.125); $box-padding: 10px; //Box variants -$box-default-border-top-color: #d2d6de; +$box-default-border-top-color: $gray-light;//#d2d6de; //BUTTONS //-------------------------------------------------------- @@ -118,6 +118,5 @@ $attachment-border-radius: 3px; //-------------------------------------------------------- //Transition global options -$transition-speed: 3s; -$transition-fn: ease-in-out; -//cubic-bezier(0.32,1.25,0.375,1.15); +$transition-speed: 0.3s; +$transition-fn: ease-in-out; \ No newline at end of file diff --git a/build/scss/skins/_all-skins.scss b/build/scss/skins/_all-skins.scss index ec07547ff..2c48b5967 100644 --- a/build/scss/skins/_all-skins.scss +++ b/build/scss/skins/_all-skins.scss @@ -1,13 +1,13 @@ //All skins in one file -@import "skin-blue.less"; -@import "skin-blue-light.less"; -@import "skin-black.less"; -@import "skin-black-light.less"; -@import "skin-green.less"; -@import "skin-green-light.less"; -@import "skin-red.less"; -@import "skin-red-light.less"; -@import "skin-yellow.less"; -@import "skin-yellow-light.less"; -@import "skin-purple.less"; -@import "skin-purple-light.less"; +@import "skin-blue"; +@import "skin-blue-light"; +@import "skin-black"; +@import "skin-black-light"; +@import "skin-green"; +@import "skin-green-light"; +@import "skin-red"; +@import "skin-red-light"; +@import "skin-yellow"; +@import "skin-yellow-light"; +@import "skin-purple"; +@import "skin-purple-light"; diff --git a/build/scss/skins/skin-black-light.scss b/build/scss/skins/skin-black-light.scss index 400ff2535..8875d5aff 100644 --- a/build/scss/skins/skin-black-light.scss +++ b/build/scss/skins/skin-black-light.scss @@ -2,10 +2,6 @@ * Skin: Black * ----------- */ -@import "../../bootstrap-less/mixins.less"; -@import "../../bootstrap-less/variables.less"; -@import "../variables.less"; -@import "../mixins.less"; /* skin-black navbar */ .skin-black-light { @@ -20,7 +16,7 @@ border-right: 1px solid #eee; } > .navbar { - @include navbar-variant(#fff; #333; #999; #fff); + @include navbar-variant(#fff, #333, #999, #fff); > .sidebar-toggle { color: #333; border-right: 1px solid #eee; @@ -41,10 +37,10 @@ } } > .logo { - @include logo-variant(#fff; #333); + @include logo-variant(#fff, #333); border-right: 1px solid #eee; @media (max-width: $screen-header-collapse) { - @include logo-variant(#222; #fff); + @include logo-variant(#222, #fff); border-right: none; } } diff --git a/build/scss/skins/skin-black.scss b/build/scss/skins/skin-black.scss index 50e9cfa72..3c3389a1f 100644 --- a/build/scss/skins/skin-black.scss +++ b/build/scss/skins/skin-black.scss @@ -2,10 +2,6 @@ * Skin: Black * ----------- */ -@import "../../bootstrap-less/mixins.less"; -@import "../../bootstrap-less/variables.less"; -@import "../variables.less"; -@import "../mixins.less"; /* skin-black navbar */ .skin-black { @@ -20,7 +16,7 @@ border-right: 1px solid #eee; } > .navbar { - @include navbar-variant(#fff; #333; #999; #fff); + @include navbar-variant(#fff, #333, #999, #fff); > .sidebar-toggle { color: #333; border-right: 1px solid #eee; @@ -41,10 +37,10 @@ } } > .logo { - @include logo-variant(#fff; #333); + @include logo-variant(#fff, #333); border-right: 1px solid #eee; @media (max-width: $screen-header-collapse) { - @include logo-variant(#222; #fff); + @include logo-variant(#222, #fff); border-right: none; } } diff --git a/build/scss/skins/skin-blue-light.scss b/build/scss/skins/skin-blue-light.scss index f4f3b50b2..c316e18dd 100644 --- a/build/scss/skins/skin-blue-light.scss +++ b/build/scss/skins/skin-blue-light.scss @@ -2,16 +2,12 @@ * Skin: Blue * ---------- */ -@import "../../bootstrap-less/mixins.less"; -@import "../../bootstrap-less/variables.less"; -@import "../variables.less"; -@import "../mixins.less"; .skin-blue-light { //Navbar .main-header { .navbar { - @include navbar-variant($light-blue; #fff); + @include navbar-variant($light-blue, #fff); .sidebar-toggle { color: #fff; &:hover { diff --git a/build/scss/skins/skin-blue.scss b/build/scss/skins/skin-blue.scss index 3b85ec93d..2657825e9 100644 --- a/build/scss/skins/skin-blue.scss +++ b/build/scss/skins/skin-blue.scss @@ -2,16 +2,11 @@ * Skin: Blue * ---------- */ -@import "../../bootstrap-less/mixins.less"; -@import "../../bootstrap-less/variables.less"; -@import "../variables.less"; -@import "../mixins.less"; - .skin-blue { //Navbar .main-header { .navbar { - @include navbar-variant($light-blue; #fff); + @include navbar-variant($light-blue, #fff); .sidebar-toggle { color: #fff; &:hover { diff --git a/build/scss/skins/skin-green-light.scss b/build/scss/skins/skin-green-light.scss index 2f3226b61..66ba66f56 100644 --- a/build/scss/skins/skin-green-light.scss +++ b/build/scss/skins/skin-green-light.scss @@ -2,16 +2,12 @@ * Skin: Green * ----------- */ -@import "../../bootstrap-less/mixins.less"; -@import "../../bootstrap-less/variables.less"; -@import "../variables.less"; -@import "../mixins.less"; .skin-green-light { //Navbar .main-header { .navbar { - @include navbar-variant($green; #fff); + @include navbar-variant($green, #fff); .sidebar-toggle { color: #fff; &:hover { diff --git a/build/scss/skins/skin-green.scss b/build/scss/skins/skin-green.scss index 11cf418ee..24db324c6 100644 --- a/build/scss/skins/skin-green.scss +++ b/build/scss/skins/skin-green.scss @@ -2,16 +2,12 @@ * Skin: Green * ----------- */ -@import "../../bootstrap-less/mixins.less"; -@import "../../bootstrap-less/variables.less"; -@import "../variables.less"; -@import "../mixins.less"; .skin-green { //Navbar .main-header { .navbar { - @include navbar-variant($green; #fff); + @include navbar-variant($green, #fff); .sidebar-toggle { color: #fff; &:hover { diff --git a/build/scss/skins/skin-purple-light.scss b/build/scss/skins/skin-purple-light.scss index 824fed060..8974b6fd8 100644 --- a/build/scss/skins/skin-purple-light.scss +++ b/build/scss/skins/skin-purple-light.scss @@ -2,16 +2,12 @@ * Skin: Purple * ------------ */ -@import "../../bootstrap-less/mixins.less"; -@import "../../bootstrap-less/variables.less"; -@import "../variables.less"; -@import "../mixins.less"; .skin-purple-light { //Navbar .main-header { .navbar { - @include navbar-variant($purple; #fff); + @include navbar-variant($purple, #fff); .sidebar-toggle { color: #fff; &:hover { diff --git a/build/scss/skins/skin-purple.scss b/build/scss/skins/skin-purple.scss index f675a24ee..8c90e4960 100644 --- a/build/scss/skins/skin-purple.scss +++ b/build/scss/skins/skin-purple.scss @@ -2,16 +2,12 @@ * Skin: Purple * ------------ */ -@import "../../bootstrap-less/mixins.less"; -@import "../../bootstrap-less/variables.less"; -@import "../variables.less"; -@import "../mixins.less"; .skin-purple { //Navbar .main-header { .navbar { - @include navbar-variant($purple; #fff); + @include navbar-variant($purple, #fff); .sidebar-toggle { color: #fff; &:hover { diff --git a/build/scss/skins/skin-red-light.scss b/build/scss/skins/skin-red-light.scss index b3e1d5b72..6843a14cb 100644 --- a/build/scss/skins/skin-red-light.scss +++ b/build/scss/skins/skin-red-light.scss @@ -2,16 +2,12 @@ * Skin: Red * --------- */ -@import "../../bootstrap-less/mixins.less"; -@import "../../bootstrap-less/variables.less"; -@import "../variables.less"; -@import "../mixins.less"; .skin-red-light { //Navbar .main-header { .navbar { - @include navbar-variant($red; #fff); + @include navbar-variant($red, #fff); .sidebar-toggle { color: #fff; &:hover { diff --git a/build/scss/skins/skin-red.scss b/build/scss/skins/skin-red.scss index 999951f0d..1412d4d45 100644 --- a/build/scss/skins/skin-red.scss +++ b/build/scss/skins/skin-red.scss @@ -2,16 +2,12 @@ * Skin: Red * --------- */ -@import "../../bootstrap-less/mixins.less"; -@import "../../bootstrap-less/variables.less"; -@import "../variables.less"; -@import "../mixins.less"; .skin-red { //Navbar .main-header { .navbar { - @include navbar-variant($red; #fff); + @include navbar-variant($red, #fff); .sidebar-toggle { color: #fff; &:hover { diff --git a/build/scss/skins/skin-yellow-light.scss b/build/scss/skins/skin-yellow-light.scss index 8a2a91743..ac7028e3e 100644 --- a/build/scss/skins/skin-yellow-light.scss +++ b/build/scss/skins/skin-yellow-light.scss @@ -2,16 +2,12 @@ * Skin: Yellow * ------------ */ -@import "../../bootstrap-less/mixins.less"; -@import "../../bootstrap-less/variables.less"; -@import "../variables.less"; -@import "../mixins.less"; .skin-yellow-light { //Navbar .main-header { .navbar { - @include navbar-variant($yellow; #fff); + @include navbar-variant($yellow, #fff); .sidebar-toggle { color: #fff; &:hover { diff --git a/build/scss/skins/skin-yellow.scss b/build/scss/skins/skin-yellow.scss index cdeb1762e..d98c0a1ac 100644 --- a/build/scss/skins/skin-yellow.scss +++ b/build/scss/skins/skin-yellow.scss @@ -2,16 +2,12 @@ * Skin: Yellow * ------------ */ -@import "../../bootstrap-less/mixins.less"; -@import "../../bootstrap-less/variables.less"; -@import "../variables.less"; -@import "../mixins.less"; .skin-yellow { //Navbar .main-header { .navbar { - @include navbar-variant($yellow; #fff); + @include navbar-variant($yellow, #fff); .sidebar-toggle { color: #fff; &:hover {