vendor/assets/stylesheets/furatto/_variables.scss in furatto-0.0.1 vs vendor/assets/stylesheets/furatto/_variables.scss in furatto-0.0.2
- old
+ new
@@ -2,269 +2,266 @@
$VARIABLES
\*------------------------------------*/
/**
* Variables for manage the different styles
*
- * Designed and built @kurenn
+ * Designed and built @kurenn and @eldelentes
*/
-/* Body */
-/* ---- */
-$bg-color: #fefefe !default;
-/*$bg-color: #ebe7df;*/
+// Body
+$bg-color: #FFF !default;
-/* Fonts */
-/* ----- */
-$font-family: 'Lato', 'Helvetica Neue';
-$base-font-size: 16px;
-$base-line-height: 20px;
-$base-font-weight: 500;
+// Fonts
+$font-family: 'Lato', 'Helvetica Neue' !default;
+$base-font-size: 16px !default;
+$base-line-height: 20px !default;
+$base-font-weight: 500 !default;
+$base-font-color: #333 !default;
-/* Border */
-/* ------ */
-$base-radius: 2px;
+// Border
+$base-radius: 2px !default;
-/* Colors */
-/* ------ */
+// Colors
-//Reds
-$red: #e74c3c;
-$dark-red: #C0392B;
+// Reds
+$red: #e74c3c !default;
+$dark-red: #c0392b !default;
-//Hipsters
-$info: #1ABC9C;
-$dark-info: #16A085;
+// Hipsters
+$info: #1ABC9C !default;
+$dark-info: #16A085 !default;
-//Inverse
-$dark-inverse: #2C3E50;
-$inverse: #34495E;
+$aqua: #00CA74 !default;
+$dark-aqua: #03AE72 !default;
-//Blues
-$dark-blue: #2980B9;
-$blue: #3498DB;
+// Inverse
+$dark-inverse: #242730 !default;
+$inverse: #2E323E !default;
-//Grays
-$dark-gray: #7F8C8D;
-$gray: #95a5a6;
-$light-gray: #ecf0f1;
+// Blues
+$dark-blue: #2980b9 !default;
+$blue: #3498db !default;
-//Purples
-$purple: #9B59B6;
-$dark-purple: #8E44AD;
+// Grays
+$dark-gray: #7F8C8D !default;
+$gray: #95a5a6 !default;
+$light-gray: #ecf0f1 !default;
-//Greens
-$green: #2ECC71;
-$dark-green: #27AE60;
+// Purples
+$purple: #9B59B6 !default;
+$dark-purple: #8E44AD !default;
-//Orange
-$dark-orange: #f39c12;
-$orange: #f1c40f;
+// Greens
+$green: #2ecc71 !default;
+$dark-green: #27ae60 !default;
-//Black
-$dark-black: #232323;
-$black: lighten($dark-black, 10%);
+// Yellows
+$yellow: #FFD02C !default;
+$dark-yellow: #DCB334 !default;
-//White
-$white: #FFF;
+// Orange
+$dark-orange: #d35400 !default;
+$orange: #e67e22 !default;
-//All colors
-$colors: primary $dark-blue $blue, //class name, bg color, hover bg color
- success $dark-green $green,
- danger $dark-red $red,
- warning $dark-orange $orange,
- inverse $dark-inverse $inverse,
- info $dark-info $info,
- default $dark-gray $gray,
- funky $dark-purple $purple,
- dark $dark-black $black;
+// Blacks
+$black: #191C20 !default;
+$dark-black: #262626 !default;
-/* Buttons */
-/* ------- */
+// White
+$white: #FFF !default;
-$font-size-large: $base-font-size * 1.25; // ~18px
-$font-size-xlarge: $base-font-size * 1.50; // ~24px
-$font-size-small: $base-font-size * 0.85; // ~12px
-$font-size-mini: $base-font-size * 0.75; // ~11px
+// Muted
+$muted-color: #555 !default;
-$padding-large: 11px 19px; // 44px
-$padding-small: 2px 10px; // 26px
-$padding-mini: 0 6px; // 22px
-$padding-xlarge: 20px 30px; // 44px
+// Light1
+$light-color: #6F6F6F !default;
-/* Alerts */
-/* ------ */
-$warning-alert-color: #d38305;
-$warning-header-color: #cc6633;
+// All colors
+$colors: info $blue $dark-blue, // class name, bg color, hover bg color
+ success $green $dark-green,
+ danger $red $dark-red,
+ warning $orange $dark-orange,
+ primary $inverse $dark-inverse,
+ funky $purple $dark-purple;
-$success-alert-color: #006633;
-$success-header-color: #006633;
+// Jumbo
+$jumbo-container-bg-color: #3498d9 !default;
+$jumbo-container-bg-gradient: #67b2e3 !default;
-$info-alert-color: #195999;
-$info-header-color: #195999;
+// Buttons
+$font-size-large: $base-font-size * 1.25 !default; // ~18px
+$font-size-xlarge: $base-font-size * 1.50 !default; // ~24px
+$font-size-small: $base-font-size * 0.85 !default; // ~12px
+$font-size-mini: $base-font-size * 0.75 !default; // ~11px
-$danger-alert-color: #993333;
-$danger-header-color: #993333;
+$padding-large: 11px 19px !default; // 44px
+$padding-small: 2px 10px !default; // 26px
+$padding-mini: 0 6px !default; // 22px
+$padding-xlarge: 20px 30px !default; // 44px
+$padding-xxlarge: 20px 50px !default; // 44px
-/* Navbar */
-/* ------ */
-$navbar-height: 55px;
-$navbar-bg-color: #232323;
-$navbar-border: #38393a;
-$navbar-text: #eaeaea;
-$navbar-brand-color: $navbar-text;
-$navbar-link-color-active: #FFF;
-$navbar-alpha: 0.75;
+// HR
+$hr-color: #DDD !default;
-/* Vertical Navbar */
-/* --------------- */
-$vrt-navbar-background: #232323;
-$vrt-navbar-width: 4em;
-$vrt-navbar-height: $vrt-navbar-width;
-$vrt-navbar-lineheight: 2em;
-$vrt-navbar-border: #000;
-$vrt-navbar-links-bg: $blue;
-$vrt-navbar-links-color: #FFF;
-$vrt-navbar-li-hover: $blue;
+// BLOCKQUOTE
+$blockquote-color: #777 !default;
+$blockquote-border-color: #DDD !default;
-/* Inputs */
-/* ------ */
-$input-color: #34495e;
-$input-border-radius: 2px;
-$input-bg: #FFF;
-$input-border-color: #CCC;
-$input-focus-color: $blue;
-/* Tables */
-/* ------ */
-$table-color: #FFF;
-$table-header-primary: $dark-blue;
-$table-border-color: #d2d2d2;
-$table-striped-color: #f9f9f9;
+// Alerts
+$warning-alert-color: $orange !default;
+$warning-header-color: $dark-orange !default;
-/* Responsive Navbar */
-/* ----------------- */
-$nav-bar-collapse-width: 979px;
-$nav-bar-collapse-width-desktop: $nav-bar-collapse-width + 1;
+$success-alert-color: $dark-green !default;
+$success-header-color: $dark-green !default;
-/* Images */
-/* ------ */
-$img-border: $dark-green;
+$info-alert-color: $dark-blue !default;
+$info-header-color: $dark-blue !default;
-/* Select */
-/* ------ */
-$select-bg: $dark-info;
-$select-text-color: #FFF;
-$select-options-bg: $inverse;
+$danger-alert-color: $dark-red !default;
+$danger-header-color: $dark-red !default;
-/* Checkbox and radio buttons */
-/* -------------------------- */
-$ch-rb-color: $dark-info;
+// Navbar
+$navbar-height: 51px !default;
+$navbar-bg-color: #2d313d !default;
+$navbar-border: #38393a !default;
+$navbar-text: #eaeaea !default;
+$navbar-brand-color: $navbar-text !default;
+$navbar-link-color-active: #FFF !default;
+$navbar-inverse-bg-color: #FFF !default;
+$navbar-inverse-text: #0088cc !default;
-/* Grid */
-/* ---- */
+// Panel
+$panel-inverse-bg: $white !default;
+$panel-inverse-active-color: #555 !default;
+$panel-inverse-active-bg: #EFEFEF !default;
+$panel-inverse-link-color: #0088cc !default;
-// Default 940px grid
-// -------------------------
-$gridColumns: 12 !default;
-$gridColumnWidth: 60px !default;
-$gridGutterWidth: 20px !default;
-$gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)) !default;
+// Inputs
+$input-color: #34495e !default;
+$input-border-radius: 4px !default;
+$input-bg: #FFF !default;
+$input-border-color: #CCC !default;
+$input-focus-color: $blue !default;
-// 1200px min
-$gridColumnWidth1200: 70px !default;
-$gridGutterWidth1200: 30px !default;
-$gridRowWidth1200: ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1)) !default;
+// Tables
+$table-color: #FFF !default;
+$table-header-primary: $dark-blue !default;
+$table-border-color: #d2d2d2 !default;
+$table-striped-color: #f9f9f9 !default;
-// 768px-979px
-$gridColumnWidth768: 42px !default;
-$gridGutterWidth768: 20px !default;
-$gridRowWidth768: ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1)) !default;
+// Responsive Navbar
+$nav-bar-collapse-width: 979px !default;
+$nav-bar-collapse-width-desktop: $nav-bar-collapse-width + 1 !default;
+// Images
+$img-border: $dark-green !default;
-/* Fluid grid */
-/* ---------- */
-$fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth) !default;
-$fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth) !default;
+// Forms
+$input-height: $base-line-height + 10px !default; // base line-height + 8px vertical padding + 2px top/bottom border
-// 1200px min
-$fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200) !default;
-$fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200) !default;
+// Dashboard
+$dashboard-primary-bg-color: $inverse !default;
+$dashboard-info-bg-color: $blue !default;
+$dashboard-funky-bg-color: $purple !default;
+$dashboard-danger-bg-color: $red !default;
+$dashboard-warning-bg-color: $orange !default;
+$dashboard-success-bg-color: $green !default;
+$dashboard-inverse-bg-color: #34495e !default;
-// 768px-979px
-$fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768) !default;
-$fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768) !default;
+// Footer
+$footer-text-color: #232323 !default;
+$footer-anchor-color: #777 !default;
+$footer-height: 80px !default;
+$footer-anchor-size: 13px !default;
-/* Forms */
-/* ----- */
-$inputHeight: $base-line-height + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
+// Icons
+$icon-base-color: $dark-inverse !default;
+$icon-base-inverse-color: #FFF !default;
+$icon-small-size: 2em !default;
+$icon-medium-size: 4em !default;
+$icon-large-size: 6em !default;
+$icon-xlarge-size: 8em !default;
+$icon-xxlarge-size: 10em !default;
-/* Footer */
-/* ------ */
-$footer-bg: lighten($navbar-bg-color, 0.5);
-$footer-text-color: #FFF;
-$footer-height: 80px;
+// Links
+$link-color: #0088cc !default;
-/* Icons */
-/* ----- */
-$icon-base-color: $dark-inverse;
-$icon-base-inverse-color: #FFF;
-$icon-small-size: 2em;
-$icon-medium-size: 4em;
-$icon-large-size: 6em;
-$icon-xlarge-size: 8em;
-$icon-xxlarge-size: 10em;
+// Headings
+$headings-color: #222 !default;
-/* Links */
-/* ----- */
-$link-color: #0088cc;
+// Pagination
+$pagination-color: desaturate(lighten($inverse, 57.5%), 17%) !default;
-/* Headings */
-/* -------- */
-$headings-color: #4b4b4b;
+// Toolbars
+$toolbar-bg-color: #232323 !default;
-/* Color Lists */
-/* ----------- */
-$color-list-item-height: 16px;
-$color-list-item-width: $color-list-item-height;
-
-/* Pagination */
-/* ---------- */
-$pagination-color: desaturate(lighten($inverse, 57.5%), 17%);
-
-/* Toolbars */
-/* -------- */
-$toolbar-bg-color: #232323;
-
-/* Dropdown */
-/* -------- */
+// Dropdown
$zindex-dropdown: 1000 !default;
$dropdown-bg: $white !default;
-$dropdown-border: rgba(0,0,0,0.2);
+$dropdown-border: rgba(0,0,0,0.2) !default;
$dropdown-link-color: $dark-gray !default;
$dropdown-link-color-hover: $white !default;
-$dropdown-link-color-hover-bg: lighten($blue, 10%);
+$dropdown-link-color-hover-bg: lighten($blue, 10%) !default;
-/* Code */
-/*---------------------*/
-$code-bg: #fafafa;
-$code-font-size: 0.8em;
+// Code
+$code-bg: #f7f7f9 !default;
+$code-font-size: 0.8em !default;
+$code-comment-color: #999 !default;
+$code-tag-color: #2f6f9f !default;
+$code-css-property-color: #333 !default;
+$code-color: #d44950 !default;
-/* Calendar */
-/*---------------------*/
-$calendar-highlight-color: #b1dcfb;
-$calendar-highlighted-color: #0089ec;
+// Calendar
+$calendar-highlight-color: #b1dcfb !default;
+$calendar-highlighted-color: #0089ec !default;
-/* Font Awesome Icons */
-/* ------------------ */
+// Container center
+$container-center-width: 90% !default;
+
+// Modal
+$modal-max-width: 630px !default;
+$modal-min-width: 320px !default;
+
+// Responsive widths
+
+// Extra small screen / phone
+$screen-xs: 480px !default;
+$screen-xs-min: $screen-xs !default;
+$screen-phone: $screen-xs-min !default;
+
+// Small screen / tablet
+$screen-sm: 768px !default;
+$screen-sm-min: $screen-sm !default;
+$screen-tablet: $screen-sm-min !default;
+
+// Medium screen / desktop
+$screen-md: 992px !default;
+$screen-md-min: $screen-md !default;
+$screen-desktop: $screen-md-min !default;
+
+// Large screen / wide desktop
+// Note: Deprecated $screen-lg and $screen-lg-desktop as of v3.0.1
+$screen-lg: 1200px !default;
+$screen-lg-min: $screen-lg !default;
+$screen-lg-desktop: $screen-lg-min !default;
+
+// So media queries don't overlap when required, provide a maximum
+$screen-xs-max: ($screen-sm-min - 1) !default;
+$screen-sm-max: ($screen-md-min - 1) !default;
+$screen-md-max: ($screen-lg-min - 1) !default;
+
+// Font Awesome Icons
+
$FontAwesomePath: "/assets/fontawesome" !default;
$FontAwesomeVersion: "3.2.1" !default;
$borderColor: #eeeeee !default;
$iconMuted: #eeeeee !default;
$iconLight: white !default;
$iconDark: #333333 !default; //1d1d1b
-$icons-li-width: (30em/14);
+$icons-li-width: (30em/14) !default;
$glass: "\f000";
$music: "\f001";
$search: "\f002";
$envelope-alt: "\f003";