customizable_bootstrap 0.9.5 → 0.10.1

data/lib/generators/customizable_bootstrap/install/templates/stylesheets/font.css.scss

@@ -1,9 +1,24 @@
-$sansFontFamily: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-$serifFontFamily: Georgia, 'Times New Roman', Times, serif;
-$monoFontFamily: Menlo, Monaco, Consolas, 'Courier New', monospace;
-$baseFontSize: 13px;
-$baseFontFamily: $sansFontFamily;
-$baseLineHeight: 18px;
-$altFontFamily: $serifFontFamily;
-$headingsFontFamily: $sansFontFamily;
-$headingsFontWeight: bold;
+$font-family-sans-serif: Open Sans;
+$font-family-serif: PT Serif;
+$font-family-monospace: Monaco;
+$font-family-base: $font-family-sans-serif;
+$font-size-base: 14px;
+$font-size-large: ceil($font-size-base * 1.25);
+$font-size-small: ceil($font-size-base * 0.85);
+$font-size-h1: floor(($font-size-base * 2.6));
+$font-size-h2: floor(($font-size-base * 2.15));
+$font-size-h3: floor(($font-size-base * 1.7));
+$font-size-h4: floor(($font-size-base * 1.25));
+$font-size-h5: $font-size-base;
+$font-size-h6: floor(($font-size-base * 0.85));
+$line-height-base: 1.428571429;
+$line-height-computed: floor($font-size-base * $line-height-base);
+$headings-font-family: $font-family-base;
+$headings-font-weight: 500;
+$headings-line-height: 1.1;
+$headings-color: inherit;
+$jumbotron-font-size: ceil(($font-size-base * 1.5));
+
+// Sprites
+$icon-font-path: '../app/fonts/';
+$icon-font-name: glyphicons-halflings-regular;

data/lib/generators/customizable_bootstrap/install/templates/stylesheets/index.css.scss

@@ -2,12 +2,12 @@
 // You'll break it.
 //
 // Actually, you can customize it at will.
+//
+// Special thanks to pikock http://www.pikock.com/, who provided the less on which this sass was based.
 
 @import './font';
 @import './colors';
-@import './grid';
-@import './layers';
+@import './spacing';
 @import 'bootstrap';
-@import 'bootstrap-responsive';
 // @import 'font-awesome';
 @import './overrides';

data/lib/generators/customizable_bootstrap/install/templates/stylesheets/spacing.css.scss

@@ -0,0 +1,50 @@
+$padding-base-vertical: 6px;
+$padding-base-horizontal: 12px;
+$padding-large-vertical: 10px;
+$padding-large-horizontal: 16px;
+$padding-small-vertical: 5px;
+$padding-small-horizontal: 10px;
+$border-radius-base: 4px;
+$border-radius-large: 6px;
+$border-radius-small: 3px;
+$line-height-large: 1.33;
+$line-height-small: 1.5;
+
+$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2);
+$input-height-large: (floor($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2);
+$input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2);
+
+$table-cell-padding: 8px;
+$table-condensed-cell-padding: 5px;
+$table-cell-padding: 8px;
+$table-condensed-cell-padding: 5px;
+
+$navbar-height: 50px;
+$navbar-margin-bottom: $line-height-computed;
+
+$navbar-border-radius: $border-radius-base;
+$navbar-padding-horizontal: floor($grid-gutter-width / 2);
+$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2);
+
+$nav-link-padding: 10px 15px;
+
+$nav-pills-border-radius: $border-radius-base;
+
+$jumbotron-padding: 30px;
+
+
+$pager-border-radius: 15px;
+
+
+$tooltip-max-width: 200px;
+
+$tooltip-arrow-width: 5px;
+
+
+$popover-max-width: 276px;
+
+$popover-arrow-width: 10px;
+$popover-arrow-outer-width: ($popover-arrow-width + 1);
+
+
+$list-group-border-radius: $border-radius-base;

data/spec/dummy/app/assets/stylesheets/customizable_bootstrap/colors.css.scss

@@ -1,100 +1,184 @@
+// Grays
+$gray-darker: #222222;
+$gray-dark: #333333;
+$gray: #555555;
+$gray-light: #999999;
+$gray-lighter: #eeeeee;
 
-/* Colors to be used in the rest of the file */
-$black: #000;
-$gray: #555;
-$grayDark: #333;
-$grayDarker: #222;
-$grayLight: #999;
-$grayLighter: #ccc;
-$grayLightness: #ddd;
-$grayLightest: #eee;
-$grayLightVery: #f5f5f5;
-$grayLightExtremely: #f9f9f9;
-$white: #fff;
-$blue: #049cdb;
-$blueDark: #0064cd;
-$green: #46a546;
-$red: #9d261d;
-$yellow: #ffc40d;
-$orange: #f89406;
-$pink: #c3325f;
-$purple: #7a43b6;
-
-
-/* Assignments of colors to useful variable names */
-$bodyBackground: $white;
-$textColor: $grayDark;
-$linkColor: $blue;
-$linkColorHover: darken($linkColor, 15%);
-
-$tableBackground: transparent;
-$tableBackgroundAccent: $grayLightExtremely;
-$tableBackgroundHover: $grayLightVery;
-$tableBorder: $grayLightness;
-$hrBorder: $grayLightest;
-
-$btnBackground: $white;
-$btnBackgroundHighlight: darken($btnBackground, 10%);
-$btnBorder: $grayLighter;
-$btnDangerBackground: $red;
-$btnDangerBackgroundHighlight: darken($btnDangerBackground, 10%);
-$btnInfoBackground: $blue;
-$btnInfoBackgroundHighlight: darken($btnInfoBackground, 10%);
-$btnInverseBackground: $gray;
-$btnInverseBackgroundHighlight: darken($gray, 10%);
-$btnPrimaryBackground: $blueDark;
-$btnPrimaryBackgroundHighlight: darken($btnPrimaryBackground, 10%);
-$btnSuccessBackground: $green;
-$btnSuccessBackgroundHighlight: darken($btnSuccessBackground, 10%);
-$btnWarningBackground: $orange;
-$btnWarningBackgroundHighlight: darken($btnWarningBackground, 10%);
-
-$inputBackground: $white;
-$inputBorder: $grayLighter;
-$inputBorderRadius: 3px;
-$inputDisabledBackground: $grayLightest;
-$formActionsBackground: $grayLightVery;
-$placeholderText: $grayLight;
-
-$dropdownBackground: $white;
-$dropdownBorder: fadeout($black, .2);
-$dropdownDividerBottom: $white;
-$dropdownDividerTop: $grayLightest;
-$dropdownLinkBackgroundHover: $linkColor;
-$dropdownLinkColor: $grayDark;
-$dropdownLinkColorHover: $white;
-
-$iconSpritePath: '../../img/glyphicons-halflings.png';
-$iconWhiteSpritePath: '../../img/glyphicons-halflings-white.png';
-
-$navbarBackground: $grayDarker;
-$navbarBackgroundHighlight: $grayDark;
-$navbarLinkColor: $grayLight;
-$navbarLinkColorHover: $white;
-$navbarBrandColor: $navbarLinkColor;
-$navbarHeight: 40px;
-$navbarLinkBackgroundActive: $navbarBackground;
-$navbarLinkBackgroundHover: transparent;
-$navbarLinkColorActive: $navbarLinkColorHover;
-$navbarSearchBackground: lighten($navbarBackground, 25%);
-$navbarSearchBackgroundFocus: $white;
-$navbarSearchBorder: darken($navbarSearchBackground, 30%);
-$navbarSearchPlaceholderColor: $grayLighter;
-$navbarText: $grayLight;
-
-$heroUnitBackground: $grayLightest;
-$heroUnitHeadingColor: inherit;
-$heroUnitLeadColor: inherit;
-
-$warningBackground: lighten($orange, 50%);
-$warningBorder: darken($warningBackground, 3%);
-$warningText: $orange;
-$errorBackground: lighten($red, 50%);
-$errorBorder: darken($errorBackground, 3%);
-$errorText: $red;
-$successBackground: lighten($green, 50%);
-$successBorder: darken($successBackground, 3%);
-$successText: $green;
-$infoBackground: lighten($blue, 50%);
-$infoBorder: darken($infoBackground, 3%);
-$infoText: $blue;
+
+// Brand Colors
+$brand-primary: #428bca;
+$brand-success: #5cb85c;
+$brand-warning: #f0ad4e;
+$brand-danger: #d9534f;
+$brand-info: #5bc0de;
+
+
+// Scaffolding
+$body-bg: #fff;
+$text-color: $gray-dark;
+$link-color: $brand-primary;
+$link-hover-color: darken($link-color, 15%);
+$component-active-bg: $brand-primary;
+
+
+// Buttons
+$btn-font-weight: normal;
+$btn-default-color: #333;
+$btn-default-bg: #fff;
+$btn-default-border: #ccc;
+$btn-primary-color: #fff;
+$btn-primary-bg: $brand-primary;
+$btn-primary-border: darken($btn-primary-bg, 5%);
+$btn-success-color: #fff;
+$btn-success-bg: $brand-success;
+$btn-success-border: darken($btn-success-bg, 5%);
+$btn-warning-color: #fff;
+$btn-warning-bg: $brand-warning;
+$btn-warning-border: darken($btn-warning-bg, 5%);
+$btn-danger-color: #fff;
+$btn-danger-bg: $brand-danger;
+$btn-danger-border: darken($btn-danger-bg, 5%);
+$btn-info-color: #fff;
+$btn-info-bg: $brand-info;
+$btn-info-border: darken($btn-info-bg, 5%);
+$btn-link-disabled-color: $gray-light;
+
+
+// Dropdowns
+$dropdown-bg: #fff;
+$dropdown-border: rgba(0,0,0,.15);
+$dropdown-divider-bg: #e5e5e5;
+$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;
+$dropdown-link-disabled-color: $gray-light;
+$dropdown-header-color: $gray-light;
+$dropdown-caret-color: #000;
+
+
+// Forms
+$input-bg: #fff;
+$input-bg-disabled: $gray-lighter;
+$input-color: $gray;
+$input-border: #ccc;
+$input-border-radius: $border-radius-base;
+$input-color-placeholder: $gray-light;
+$legend-color: $gray-dark;
+$legend-border-color: #e5e5e5;
+$input-group-addon-bg: $gray-lighter;
+$input-group-addon-border-color: $input-border;
+
+
+// Table
+$table-bg: transparent;
+$table-bg-accent: #f9f9f9;
+$table-bg-hover: #f5f5f5;
+$table-bg-active: $table-bg-hover;
+$table-border-color: #ddd;
+
+
+// Navbar
+$navbar-default-color: #777;
+$navbar-default-bg: #f8f8f8;
+$navbar-default-border: darken($navbar-default-bg, 6.5%);
+$navbar-default-link-color: #777;
+$navbar-default-link-hover-color: #333;
+$navbar-default-link-hover-bg: transparent;
+$navbar-default-link-active-color:  #555;
+$navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%);
+$navbar-default-link-disabled-color:  #ccc;
+$navbar-default-link-disabled-bg: transparent;
+$navbar-default-brand-color: $navbar-default-link-color;
+$navbar-default-brand-hover-color: darken($navbar-default-link-color, 10%);
+$navbar-default-brand-hover-bg: transparent;
+$navbar-default-toggle-hover-bg: #ddd;
+$navbar-default-toggle-icon-bar-bg: #888;
+$navbar-default-toggle-border-color: #ddd;
+
+
+// Navs Tabs
+$nav-link-hover-bg: $gray-lighter;
+$nav-disabled-link-color: $gray-light;
+$nav-disabled-link-hover-color: $gray-light;
+$nav-tabs-border-color: #ddd;
+$nav-tabs-link-hover-border-color: $gray-lighter;
+$nav-tabs-active-link-hover-bg: $body-bg;
+$nav-tabs-active-link-hover-color: $gray;
+$nav-tabs-active-link-hover-border-color: #ddd;
+$nav-tabs-justified-link-border-color: #ddd;
+$nav-tabs-justified-active-link-border-color: $body-bg;
+$nav-pills-active-link-hover-bg: $component-active-bg;
+$nav-pills-active-link-hover-color: #fff;
+
+
+// Jumbotron
+$jumbotron-color: inherit;
+$jumbotron-bg: $gray-lighter;
+
+
+// Pagination
+$pagination-bg: #fff;
+$pagination-border: #ddd;
+$pagination-hover-bg: $gray-lighter;
+$pagination-hover-color: $link-hover-color;
+$pagination-hover-border: #ddd;
+$pagination-active-bg: $brand-primary;
+$pagination-active-color: #fff;
+$pagination-active-border: $brand-primary;
+$pagination-disabled-color: $gray-light;
+$pagination-disabled-bg: #fff;
+$pagination-disabled-border: #ddd;
+$pager-bg: $pagination-bg;
+$pager-border: $pagination-border;
+$pager-hover-bg: $pagination-hover-bg;
+$pager-active-bg: $pagination-active-bg;
+$pager-active-color: $pagination-active-color;
+$pager-bg: $pagination-bg;
+$pager-disabled-color: $gray-light;
+
+
+// Form States
+$state-warning-text: #c09853;
+$state-warning-bg: #fcf8e3;
+$state-warning-border: darken(spin($state-warning-bg, -10), 3%);
+$state-danger-text: #b94a48;
+$state-danger-bg: #f2dede;
+$state-danger-border: darken(spin($state-danger-bg, -10), 3%);
+$state-success-text: #468847;
+$state-success-bg: #dff0d8;
+$state-success-border: darken(spin($state-success-bg, -10), 5%);
+$state-info-text: #3a87ad;
+$state-info-bg: #d9edf7;
+$state-info-border: darken(spin($state-info-bg, -10), 7%);
+
+
+// ToolTip
+$tooltip-color: #fff;
+$tooltip-bg: #000;
+$tooltip-arrow-color: $tooltip-bg;
+$tooltip-opacity: .9;
+
+
+// Popover
+$popover-bg: #fff;
+$popover-border-color: rgba(0,0,0,.2);
+$popover-fallback-border-color: #ccc;
+$popover-title-bg: darken($popover-bg, 3%);
+$popover-arrow-color: #fff;
+$popover-arrow-outer-color: rgba(0,0,0,.25);
+$popover-arrow-outer-fallback-color: #999;
+
+
+// List Group
+$list-group-bg: #fff;
+$list-group-border: #ddd;
+$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;
+$list-group-active-text-color: lighten($list-group-active-bg, 40%);
+$list-group-link-color: #555;
+$list-group-link-heading-color: #333;

data/spec/dummy/app/assets/stylesheets/customizable_bootstrap/font.css.scss

@@ -1,9 +1,24 @@
-$sansFontFamily: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-$serifFontFamily: Georgia, 'Times New Roman', Times, serif;
-$monoFontFamily: Menlo, Monaco, Consolas, 'Courier New', monospace;
-$baseFontSize: 13px;
-$baseFontFamily: $sansFontFamily;
-$baseLineHeight: 18px;
-$altFontFamily: $serifFontFamily;
-$headingsFontFamily: $sansFontFamily;
-$headingsFontWeight: bold;
+$font-family-sans-serif: Open Sans;
+$font-family-serif: PT Serif;
+$font-family-monospace: Monaco;
+$font-family-base: $font-family-sans-serif;
+$font-size-base: 14px;
+$font-size-large: ceil($font-size-base * 1.25);
+$font-size-small: ceil($font-size-base * 0.85);
+$font-size-h1: floor(($font-size-base * 2.6));
+$font-size-h2: floor(($font-size-base * 2.15));
+$font-size-h3: floor(($font-size-base * 1.7));
+$font-size-h4: floor(($font-size-base * 1.25));
+$font-size-h5: $font-size-base;
+$font-size-h6: floor(($font-size-base * 0.85));
+$line-height-base: 1.428571429;
+$line-height-computed: floor($font-size-base * $line-height-base);
+$headings-font-family: $font-family-base;
+$headings-font-weight: 500;
+$headings-line-height: 1.1;
+$headings-color: inherit;
+$jumbotron-font-size: ceil(($font-size-base * 1.5));
+
+// Sprites
+$icon-font-path: '../app/fonts/';
+$icon-font-name: glyphicons-halflings-regular;

data/spec/dummy/app/assets/stylesheets/customizable_bootstrap/index.css.scss

@@ -2,12 +2,12 @@
 // You'll break it.
 //
 // Actually, you can customize it at will.
+//
+// Special thanks to pikock http://www.pikock.com/, who provided the less on which this sass was based.
 
 @import './font';
 @import './colors';
-@import './grid';
-@import './layers';
+@import './spacing';
 @import 'bootstrap';
-@import 'bootstrap-responsive';
 // @import 'font-awesome';
 @import './overrides';

data/spec/dummy/app/assets/stylesheets/customizable_bootstrap/overrides.css.scss

@@ -1,10 +1,6 @@
 // These rules override those given within bootstrap. They can use
 // mixins and variables.
 
-body {
-  padding-top: 60px;
-}
-
 .clear-right {
   clear: right;
 }