188 lines
6.2 KiB
Plaintext
188 lines
6.2 KiB
Plaintext
//
|
|
// Variables
|
|
// --------------------------------------------------
|
|
|
|
|
|
//== Colors
|
|
//
|
|
// Basic 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, 46.7%); // #777
|
|
@gray-lighter: lighten(@gray-base, 93.5%); // #eee
|
|
|
|
@brand-primary: darken(#428bca, 6.5%);
|
|
@brand-success: #5cb85c;
|
|
@brand-info: #5bc0de;
|
|
@brand-warning: #f0ad4e;
|
|
@brand-danger: #d9534f;
|
|
|
|
|
|
|
|
//== Colors
|
|
//
|
|
|
|
@color__background-body: #fff;
|
|
@color__background-screen: #f1f1f1;
|
|
@color__background-hr: #ccc;
|
|
@color__background-button: #e6e6e6;
|
|
@color__background-pre: #eee;
|
|
@color__background-ins: #fff9c0;
|
|
|
|
@color__text-screen: #21759b;
|
|
@color__text-input: #666;
|
|
@color__text-input-focus: #111;
|
|
@color__link: royalblue;
|
|
@color__link-visited: purple;
|
|
@color__link-hover: midnightblue;
|
|
@color__text-main: #656565;
|
|
|
|
@color__border-button: #ccc #ccc #bbb;
|
|
@color__border-button-hover: #ccc #bbb #aaa;
|
|
@color__border-button-focus: #aaa #bbb #bbb;
|
|
@color__border-input: #ccc;
|
|
@color__border-abbr: #666;
|
|
|
|
//== Typography
|
|
//
|
|
//## Font, line-height, and color for body text, headings, and more.
|
|
|
|
@font__main: "Source Sans Pro", sans-serif;
|
|
@font__code: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
|
|
@font__pre: "Courier 10 Pitch", Courier, monospace;
|
|
@font__line-height-body: 1.5;
|
|
@font__line-height-pre: 1.6;
|
|
|
|
@size__site-main: 100%;
|
|
@size__site-sidebar: 25%;
|
|
|
|
|
|
@font-size-base: 14px;
|
|
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
|
|
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
|
|
|
|
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
|
|
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
|
|
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
|
|
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
|
|
@font-size-h5: @font-size-base;
|
|
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
|
|
|
|
//== Media queries breakpoints
|
|
//
|
|
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
|
|
|
|
@mq-desktop-lg: 1200px; // @screen-lg-desktop;
|
|
@mq-desktop: 992px; // @screen-desktop;
|
|
@mq-tablet: 768px; // @screen-sm-min;
|
|
@mq-mobile: 480px; // @screen-phone;
|
|
|
|
@desktop-lg: ~"only screen and (min-width: @{mq-desktop-lg})";
|
|
@desktop: ~"only screen and (min-width: @{mq-desktop})";
|
|
@tablet: ~"only screen and (min-width: @{mq-tablet})";
|
|
@mobile: ~"only screen and (min-width: @{mq-mobile})";
|
|
|
|
|
|
// Inverse version media queries (for use with max-width)
|
|
// Some components needs to be strictly defined only for mobile
|
|
|
|
@mq-up-to-desktop-lg: (@mq-desktop-lg - 1); // Usually 1199px
|
|
@mq-up-to-desktop: (@mq-desktop - 1); // Usually 991px
|
|
@mq-up-to-tablet: (@mq-tablet - 1); // Usually 767px
|
|
@mq-up-to-mobile: (@mq-mobile - 1); // Usually 479px
|
|
|
|
@upto-desktop-lg: ~"only screen and (max-width: @{mq-up-to-desktop-lg})";
|
|
@upto-desktop: ~"only screen and (max-width: @{mq-up-to-desktop})";
|
|
@upto-tablet: ~"only screen and (max-width: @{mq-up-to-tablet})";
|
|
@upto-mobile: ~"only screen and (max-width: @{mq-up-to-mobile})";
|
|
|
|
@landscape: ~"(max-device-width: @{mq-tablet}) and (orientation:landscape)";
|
|
|
|
|
|
//
|
|
// Horizontal top navbar
|
|
// based on the bootstrap navbar styles and markup
|
|
// ----------------------------------------------------
|
|
|
|
@nav-header-wd: @aside-wd;
|
|
@nav-header-wd-toggled: @aside-wd-collapsed;
|
|
|
|
@nav-top-bg: #23b7e5;
|
|
@nav-top-bg-start: @nav-top-bg;
|
|
@nav-top-bg-end: lighten(@nav-top-bg, 10%);
|
|
@nav-header-bg: transparent;
|
|
|
|
@nav-top-item-mobile: @nav-top-bg;
|
|
@nav-top-item-mobile-active: darken(@nav-top-item-mobile, 20%);
|
|
|
|
@nav-top-item-desktop: #fff;
|
|
@nav-top-item-desktop-active: @nav-top-item-mobile-active;
|
|
|
|
|
|
|
|
@sidebar-bg: @aside-bg;
|
|
|
|
@sidebar-item-color: #515253;
|
|
@sidebar-item-color-active: @nav-top-bg;
|
|
@sidebar-item-bg-active: darken(@sidebar-bg, 1%);
|
|
|
|
@sidebar-icon-color: inherits;
|
|
@sidebar-icon-color-active: @nav-top-bg;
|
|
|
|
@sidebar-bullet-color: rgba(0,0,0,.25);
|
|
@sidebar-bullet-color-active: @sidebar-icon-color-active;
|
|
|
|
@sidebar-heading-color: #919DA8;
|
|
@sidebar-label-color: @sidebar-item-color;
|
|
|
|
@submenu-header-hg: 40px; // Submenu header when hover collapse sidebar
|
|
@sidebar-item-border-wd: 3px;
|
|
@scrollbar-wd: 17px;
|
|
|
|
|
|
|
|
//== Scaffolding
|
|
//
|
|
//## Settings for some of the most global styles.
|
|
|
|
//** Background color for `<body>`.
|
|
@body-bg: #fff;
|
|
//** Global text color on `<body>`.
|
|
@text-color: @gray-dark;
|
|
|
|
//** Global textual link color.
|
|
@link-color: @brand-primary;
|
|
//** Link hover color set via `darken()` function.
|
|
@link-hover-color: darken(@link-color, 15%);
|
|
//** Link hover decoration.
|
|
@link-hover-decoration: underline;
|
|
|
|
|
|
|
|
@aside-wd: 220px;
|
|
@aside-wd-collapsed: 70px;
|
|
@aside-bg: #fff;
|
|
|
|
@content-bg: @body-bg;
|
|
@content-heading-bg: #fafbfc;
|
|
@content-heading-border: #cfdbe2;
|
|
@content-padding: 20px;
|
|
|
|
@footer-hg: 60px;
|
|
|
|
@navbar-hg: 55px; //@navbar-height;
|
|
|
|
@boxed-max-width: 1140px;
|
|
@z-index-main-section: 111;
|
|
|
|
//Navigation
|
|
@nav-bg: #2F4050;
|
|
@nav-text-color: #a7b1c2;
|
|
|
|
// Switch
|
|
@ui-bg-color: #ddd;
|
|
@ui-fg-color: @brand-primary;
|