todc-bootstrap-sass 0.0.5

data/lib/assets/stylesheets/todc-bootstrap/_scaffolding.scss

@@ -0,0 +1,37 @@
+//
+// Scaffolding
+// --------------------------------------------------
+
+
+// Body reset
+// -------------------------
+
+body {
+  font-family: $baseFontFamily;
+  font-size: $baseFontSize;
+  line-height: $baseLineHeight;
+  color: $textColor;
+  background-color: $bodyBackground;
+}
+
+
+// Images
+// -------------------------
+
+// Rounded corners
+.img-rounded {
+  @include border-radius(4px);
+}
+
+// Add polaroid-esque trim
+.img-polaroid {
+  padding: 0;
+  background-color: #fff;
+  border: 3px solid #FFFFFF;
+  @include box-shadow(0 0 0 1px #AAAAAA);
+}
+// Add a hover state for linked versions only
+a.img-polaroid:hover {
+  border-color: #FFFFFF;
+  @include box-shadow(0 0 0 1px #dedede);
+}

data/lib/assets/stylesheets/todc-bootstrap/_scrollbars.scss

@@ -0,0 +1,48 @@
+//
+// Scrollbars
+// --------------------------------------------------
+
+
+.scrollable::-webkit-scrollbar {
+  height: 16px;
+  width: 10px;
+}
+.scrollable::-webkit-scrollbar-button:start:decrement,
+.scrollable::-webkit-scrollbar-button:end:increment {
+  background-color: transparent;
+  display: block;
+  height: 0;
+}
+.scrollable::-webkit-scrollbar-track {
+  background-clip: padding-box;
+  border: solid
+  transparent;
+  border-width: 0 0 0 4px;
+}
+.scrollable::-webkit-scrollbar-track-piece {
+  background-color: transparent;
+  @include border-radius(0);
+}
+.scrollable::-webkit-scrollbar:hover {
+  background-color: #f3f3f3;
+  border: 1px solid #dbdbdb;
+}
+.scrollable::-webkit-scrollbar-thumb:vertical,
+.scrollable::-webkit-scrollbar-thumb:horizontal {
+  background-color: #c6c6c6;
+  @include border-radius(0);
+}
+.scrollable::-webkit-scrollbar-thumb {
+  background-color: rgba(0,0,0,0.2);
+  border: solid transparent;
+  border-width: 0;
+  @include box-shadow(inset 1px 1px 0 rgba(0,0,0,0.10),inset 0 -1px 0 rgba(0,0,0,0.07));
+  background-clip: padding-box;
+}
+.scrollable::-webkit-scrollbar-thumb:hover {
+  background-color: #949494;
+}
+.scrollable::-webkit-scrollbar-thumb:active{
+  background-color: rgba(0,0,0,0.5);
+  @include box-shadow(inset 1px 1px 3px rgba(0,0,0,0.35));
+}

data/lib/assets/stylesheets/todc-bootstrap/_sprites.scss

@@ -0,0 +1,24 @@
+//
+// Sprites
+// --------------------------------------------------
+
+// [class^="icon-"] {
+//   margin-top: -2px;
+// }
+
+.disabled > [class^="icon-"] {
+  @include opacity(50);
+}
+
+/* Override ßsome of the values in Bootstrap
+/* White icons with optional class, or on hover/active states of certain elements */
+.nav-list > .active > a > [class^="icon-"],
+.nav-list > .active > a > [class*=" icon-"],
+.dropdown-menu > li > a:hover > [class^="icon-"],
+.dropdown-menu > li > a:hover > [class*=" icon-"],
+.dropdown-menu > .active > a > [class^="icon-"],
+.dropdown-menu > .active > a > [class*=" icon-"],
+.dropdown-submenu:hover > a > [class^="icon-"],
+.dropdown-submenu:hover > a > [class*=" icon-"] {
+  background-image: url("@{iconSpritePath}");
+}

data/lib/assets/stylesheets/todc-bootstrap/_tables.scss

@@ -0,0 +1,51 @@
+//
+// Tables
+// --------------------------------------------------
+
+// HOVER EFFECT
+// ------------
+// Placed here since it has to come after the potential zebra striping
+.table-hover {
+  tbody {
+    tr:hover td,
+    tr:hover th {
+      background-color: $tableBackgroundHover;
+    }
+  }
+}
+
+
+// TABLE BACKGROUNDS
+// -----------------
+// Exact selectors below required to override .table-striped
+
+.table tbody tr {
+  &.success td {
+    background-color: $successBackground;
+  }
+  &.error td {
+    background-color: $errorBackground;
+  }
+  &.warning td {
+    background-color: $warningBackground;
+  }
+  &.info td {
+    background-color: $infoBackground;
+  }
+}
+
+// Hover states for .table-hover
+.table-hover tbody tr {
+  &.success:hover td {
+    background-color: darken($successBackground, 5%);
+  }
+  &.error:hover td {
+    background-color: darken($errorBackground, 5%);
+  }
+  &.warning:hover td {
+    background-color: darken($warningBackground, 5%);
+  }
+  &.info:hover td {
+    background-color: darken($infoBackground, 5%);
+  }
+}

data/lib/assets/stylesheets/todc-bootstrap/_thumbnails.scss

@@ -0,0 +1,24 @@
+//
+// Thumbnails
+// --------------------------------------------------
+
+
+// The actual thumbnail (can be `a` or `div`)
+.thumbnail {
+  padding: 0;
+  border: 3px solid #ffffff;
+  @include border-radius(0);
+  @include box-shadow(0 0 0 1px #aaaaaa);
+  @include transition(none);
+}
+// Add a hover state for linked versions only
+a.thumbnail:hover {
+  border-color: #ffffff;
+  @include box-shadow(0 0 0 1px #dedede);
+}
+
+// Images and captions
+.thumbnail .caption {
+  padding: 9px 4px;
+  color: #000000;
+}

data/lib/assets/stylesheets/todc-bootstrap/_todc-mixins.scss

@@ -0,0 +1,71 @@
+// Mixins.less
+// Snippets of reusable CSS to develop faster and keep code readable
+// -----------------------------------------------------------------
+
+
+// COMPONENT MIXINS
+// --------------------------------------------------
+
+// Navbar vertical align
+// -------------------------
+// Vertically center elements in the navbar or other bars.
+// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin.
+// Example: an element has a height of 30px and you want to vertically center it in a bar other than the navbar:
+//          @include navbarVerticalAlign(32px, $navbarGoogleNavHeight);
+@mixin navbarVerticalAlign($elementHeight, $barHeight: $navbarHeight) {
+  margin-top: ($barHeight - $elementHeight) / 2;
+}
+
+// Override Bootstrap's mixin
+@mixin nav-divider($top: #ebebeb, $bottom: $white) {
+  // IE7 needs a set width since we gave a height. Restricting just
+  // to IE7 to keep the 1px left/right space in other browsers.
+  // It is unclear where IE is getting the extra space that we need
+  // to negative-margin away, but so it goes.
+  *width: 100%;
+  height: 1px;
+  margin: (($baseLineHeight / 2) - 1) 0; // 8px 0px
+  *margin: -5px 0 5px;
+  overflow: hidden;
+  background-color: $top;
+  border-bottom: 1px solid $bottom;
+}
+
+// Button backgrounds
+// ------------------
+@mixin btnBackground($startColor, $endColor, $textColor, $borderColor) {
+  border: 1px solid $borderColor;
+  color: $textColor;
+  @include gradient-vertical($startColor, $endColor);
+  *background-color: $startColor;
+  @include reset-filter();
+
+  // in these cases the gradient won't cover the background, so we override
+  &:hover, &:active, &.active, &:focus {
+    border: 1px solid darken($borderColor, 5%);
+    color: $textColor;
+    @include gradient-vertical($startColor, darken($endColor, 5%));
+    @include reset-filter();
+    background-color: darken($endColor, 5%);
+    background-color: darken($endColor, 5%) \9;
+  }
+  &:active, &.active {
+    border: 1px solid darken($borderColor, 10%);
+    @include gradient-vertical($startColor, darken($endColor, 10%));
+    @include reset-filter();
+  }
+  &:focus {
+    border: 1px solid $borderColor;
+    @include box-shadow(inset 0 0 0 1px #fff);
+  }
+  &.disabled, &[disabled],
+  &.disabled:hover, &[disabled]:hover,
+  &.disabled:active, &[disabled]:active,
+  &.disabled:focus, &[disabled]:focus {
+    border: 1px solid $borderColor;
+    @include gradient-vertical($startColor, $endColor);
+    @include reset-filter();
+    background-color: $startColor;
+    background-color: $startColor \9;
+  }
+}

data/lib/assets/stylesheets/todc-bootstrap/_tooltip.scss

@@ -0,0 +1,13 @@
+//
+// Tooltips
+// --------------------------------------------------
+
+
+// Base class
+.tooltip {
+  font-weight: bold;
+  &.in     { @include opacity(100); }
+}
+.tooltip-inner {
+  @include border-radius(0px);
+}

data/lib/assets/stylesheets/todc-bootstrap/_variables.scss

@@ -0,0 +1,386 @@
+//
+// Variables
+// --------------------------------------------------
+
+
+// Global values
+// --------------------------------------------------
+
+
+// Grays
+// -------------------------
+$black:                 #000;
+$grayDarker:            #222;
+$grayDark:              #333;
+$gray:                  #555;
+$grayLight:             #999;
+$grayLighter:           #eee;
+$white:                 #fff;
+
+
+// Accent colors
+// -------------------------
+$blue:                  #4b8cf7;
+$blueDark:              #0064cd;
+$green:                 #46a546;
+$red:                   #9d261d;
+$yellow:                #ffc40d;
+$orange:                #f89406;
+$pink:                  #c3325f;
+$purple:                #7a43b6;
+
+
+// Scaffolding
+// -------------------------
+$bodyBackground:        $white;
+$textColor:             $grayDark;
+
+
+// Links
+// -------------------------
+$linkColor:             #15c;
+$linkColorHover:        #15c;
+
+
+// Typography
+// -------------------------
+$sansFontFamily:        Arial, Helvetica, sans-serif;
+$serifFontFamily:       Georgia, "Times New Roman", Times, serif;
+$monoFontFamily:        Menlo, Monaco, Consolas, "Courier New", monospace;
+
+$baseFontSize:          13px;
+$baseFontFamily:        $sansFontFamily;
+$baseLineHeight:        20px;
+$altFontFamily:         $serifFontFamily;
+
+$headingsFontFamily:    inherit; // empty to use BS default, $baseFontFamily
+$headingsFontWeight:    bold;    // instead of browser default, bold
+$headingsColor:         inherit; // empty to use BS default, $textColor
+
+
+// Component sizing
+// -------------------------
+// Based on 14px font-size and 20px line-height
+
+$fontSizeLarge:         $baseFontSize * 1.25; // ~18px
+$fontSizeSmall:         $baseFontSize * 0.85; // ~12px
+$fontSizeMini:          $baseFontSize * 0.75; // ~11px
+
+$paddingLarge:          11px 19px; // 44px
+$paddingSmall:          2px 10px;  // 26px
+$paddingMini:           1px 6px;   // 24px
+
+$baseBorderRadius:      2px;
+$borderRadiusLarge:     4px;
+$borderRadiusSmall:     1px;
+
+
+// Tables
+// -------------------------
+$tableBackground:                   transparent; // overall background-color
+$tableBackgroundAccent:             #f9f9f9; // for striping
+$tableBackgroundHover:              #ffffd6; // for hover
+$tableBorder:                       #ddd; // table and cell border
+
+// Buttons
+// -------------------------
+$btnBackground:                     #f3f3f3;
+$btnBackgroundHighlight:            darken($white, 10%);
+$btnBorder:                         #ccc;
+
+$btnPrimaryBackground:              #4b8cf7;
+$btnPrimaryBackgroundHighlight:     spin($btnPrimaryBackground, 15%);
+
+$btnInfoBackground:                 #5bc0de;
+$btnInfoBackgroundHighlight:        #2f96b4;
+
+$btnSuccessBackground:              #35aa47;
+$btnSuccessBackgroundHighlight:     #51a351;
+
+$btnWarningBackground:              lighten($orange, 10%);
+$btnWarningBackgroundHighlight:     $orange;
+
+$btnDangerBackground:               #d84a38;
+$btnDangerBackgroundHighlight:      #bd362f;
+
+$btnInverseBackground:              #4e4e4e;
+$btnInverseBackgroundHighlight:     $grayDarker;
+
+
+// Forms
+// -------------------------
+$inputBackground:               $white;
+$inputBorder:                   #d9d9d9;
+$inputBorderRadius:             1px;
+$inputDisabledBackground:       #f1f1f1;
+$formActionsBackground:         #f5f5f5;
+$inputHeight:                   $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
+
+
+// Dropdowns
+// -------------------------
+$dropdownBackground:            $white;
+$dropdownBorder:                rgba(0,0,0,.2);
+$dropdownDividerTop:            #ebebeb;
+$dropdownDividerBottom:         $white;
+
+$dropdownLinkColor:             $grayDark;
+$dropdownLinkColorHover:        $grayDark;
+$dropdownLinkColorActive:       $dropdownLinkColor;
+
+$dropdownLinkBackgroundActive:  $linkColor;
+$dropdownLinkBackgroundHover:   $grayLighter;
+
+
+
+// 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 :)
+$zindexDropdown:          1000;
+$zindexPopover:           1010;
+$zindexTooltip:           1020;
+$zindexFixedNavbar:       1030;
+$zindexModalBackdrop:     1040;
+$zindexModal:             1050;
+
+$zindexFixedGooglebar:    1029;
+$zindexFixedGooglenav:    1028;
+
+
+// Sprite icons path
+// -------------------------
+$iconSpritePath:          image-path("glyphicons-halflings.png");
+$iconWhiteSpritePath:     image-path("glyphicons-halflings-white.png");
+
+// google checkbox icon
+$iconCheckMarkPath:       image-path("checkmark.png");
+
+
+// Input placeholder text color
+// -------------------------
+$placeholderText:         $grayLight;
+
+
+// Hr border color
+// -------------------------
+$hrBorder:                $grayLighter;
+
+
+// Horizontal forms & lists
+// -------------------------
+$horizontalComponentOffset:       180px;
+
+
+// Wells
+// -------------------------
+$wellBackground:                  #f1f1f1;
+
+
+// Navbar
+// -------------------------
+$navbarCollapseWidth:             979px;
+$navbarCollapseDesktopWidth:      $navbarCollapseWidth + 1;
+
+$navbarHeight:                    30px; // 30px Google.com. 24px other Google sites
+$navbarBackgroundHighlight:       #ffffff;
+$navbarBackground:                darken($navbarBackgroundHighlight, 5%);
+$navbarBorder:                    darken($navbarBackground, 12%);
+
+$navbarText:                      $grayLight;
+$navbarLinkColor:                 $grayLight;
+$navbarLinkColorHover:            $white;
+$navbarLinkColorActive:           $navbarLinkColorHover;
+$navbarLinkBackgroundHover:       transparent;
+$navbarLinkBackgroundActive:      $navbarBackground;
+
+$navbarBrandColor:                $navbarLinkColor;
+
+// Inverted navbar
+$navbarInverseBackground:                #111111;
+$navbarInverseBackgroundHighlight:       #222222;
+$navbarInverseBorder:                    #252525;
+
+$navbarInverseText:                      $grayLight;
+$navbarInverseLinkColor:                 $grayLight;
+$navbarInverseLinkColorHover:            $white;
+$navbarInverseLinkColorActive:           $navbarInverseLinkColorHover;
+$navbarInverseLinkBackgroundHover:       transparent;
+$navbarInverseLinkBackgroundActive:      $navbarInverseBackground;
+
+$navbarInverseSearchBackground:          lighten($navbarInverseBackground, 25%);
+$navbarInverseSearchBackgroundFocus:     $white;
+$navbarInverseSearchBorder:              $navbarInverseBackground;
+$navbarInverseSearchPlaceholderColor:    #ccc;
+
+$navbarInverseBrandColor:                $navbarInverseLinkColor;
+
+
+// Googlebar
+// -------------------------
+$navbarGoogleBarCollapseWidth:             979px;
+$navbarGoogleBarCollapseDesktopWidth:      $navbarGoogleBarCollapseWidth + 1;
+
+$navbarGoogleBarHeight:                    44px; // 75px for Google Developer. 44px for Google news. 48px for youtube
+$navbarGoogleBarBackground:                #f1f1f1;
+// $navbarGoogleBarBackgroundHighlight:       darken($navbarGoogleBarBackground, 4.7%);
+$navbarGoogleBarBackgroundHighlight:       lighten($navbarGoogleBarBackground, 1.5%);
+$navbarGoogleBarBorder:                    darken($navbarGoogleBarBackground, 4.7%);
+
+$navbarGoogleBarText:                      #777;
+$navbarGoogleBarLinkColor:                 #777;
+$navbarGoogleBarLinkColorHover:            $grayDark;
+$navbarGoogleBarLinkColorActive:           $navbarGoogleBarLinkColorHover;
+$navbarGoogleBarLinkBackgroundHover:       transparent;
+$navbarGoogleBarLinkBackgroundActive:      $navbarGoogleBarBackground;
+
+$navbarGoogleBarBrandColor:                $navbarGoogleBarLinkColor;
+
+// Inverted Googlebar
+$navbarGoogleBarInverseBackground:                #444;
+$navbarGoogleBarInverseBackgroundHighlight:       $gray;
+$navbarGoogleBarInverseBorder:                    $grayDark;
+
+$navbarGoogleBarInverseText:                      $grayLight;
+$navbarGoogleBarInverseLinkColor:                 $white;
+$navbarGoogleBarInverseLinkColorHover:            $white;
+$navbarGoogleBarInverseLinkColorActive:           $navbarGoogleBarInverseLinkColorHover;
+$navbarGoogleBarInverseLinkBackgroundHover:       transparent;
+$navbarGoogleBarInverseLinkBackgroundActive:      $navbarGoogleBarInverseBackground;
+
+$navbarGoogleBarInverseSearchBackground:          lighten($navbarInverseBackground, 25%);
+$navbarGoogleBarInverseSearchBackgroundFocus:     $white;
+$navbarGoogleBarInverseSearchBorder:              $navbarGoogleBarInverseBackground;
+$navbarGoogleBarInverseSearchPlaceholderColor:    #ccc;
+
+$navbarGoogleBarInverseBrandColor:                $navbarGoogleBarInverseLinkColor;
+
+// Googlenav
+// -------------------------
+$navbarGoogleNavCollapseWidth:             979px;
+$navbarGoogleNavCollapseDesktopWidth:      $navbarGoogleNavCollapseWidth + 1;
+
+$navbarGoogleNavHeight:                    36px; // 37px for Google developer. 39px for Google.com. 42px for Google news
+$navbarGoogleNavBackground:                #fff;
+// $navbarGoogleNavBackground:                $navbarGoogleBarBackground;
+// $navbarGoogleNavBackgroundHighlight:       #fafafa;
+$navbarGoogleNavBackgroundHighlight:       darken($navbarGoogleNavBackground, 5%);
+$navbarGoogleNavBorder:                    darken($navbarGoogleNavBackground, 15.5%); //#d7d7d7
+
+$navbarGoogleNavText:                      #777;
+$navbarGoogleNavLinkColor:                 #777;
+$navbarGoogleNavLinkColorHover:            $grayDark;
+$navbarGoogleNavLinkColorActive:           $navbarGoogleNavLinkColorHover;
+$navbarGoogleNavLinkBackgroundHover:       transparent;
+$navbarGoogleNavLinkBackgroundActive:      #f2f2f2;
+
+$navbarGoogleNavBrandColor:                #dd4b39;
+
+// Inverted Googlenav
+$navbarGoogleNavInverseBackground:                #444;
+$navbarGoogleNavInverseBackgroundHighlight:       $gray;
+$navbarGoogleNavInverseBorder:                    $grayDark;
+
+$navbarGoogleNavInverseText:                      $grayLight;
+$navbarGoogleNavInverseLinkColor:                 $white;
+$navbarGoogleNavInverseLinkColorHover:            $white;
+$navbarGoogleNavInverseLinkColorActive:           $navbarGoogleNavInverseLinkColorHover;
+$navbarGoogleNavInverseLinkBackgroundHover:       transparent;
+$navbarGoogleNavInverseLinkBackgroundActive:      $navbarGoogleNavInverseBackground;
+
+$navbarGoogleNavInverseSearchBackground:          lighten($navbarInverseBackground, 25%);
+$navbarGoogleNavInverseSearchBackgroundFocus:     $white;
+$navbarGoogleNavInverseSearchBorder:              $navbarGoogleNavInverseBackground;
+$navbarGoogleNavInverseSearchPlaceholderColor:    #ccc;
+
+$navbarGoogleNavInverseBrandColor:                $navbarGoogleNavInverseLinkColor;
+
+// Pagination
+// -------------------------
+$paginationBackground:                $btnBackground;
+$paginationBorder:                    #dcdcdc;
+$paginationActiveBackground:          #f5f5f5;
+
+
+// Hero unit
+// -------------------------
+$heroUnitBackground:              $grayLighter;
+$heroUnitHeadingColor:            inherit;
+$heroUnitLeadColor:               inherit;
+
+
+// Form states and alerts
+// -------------------------
+$warningText:             #333; //#c09853;
+$warningBackground:       #f9edbe;
+$warningBorder:           #f0c36d;
+
+$errorText:               #dd4b39;
+$errorBackground:         #f2dede;
+$errorBorder:             #dd4b39;
+
+$successText:             #468847;
+$successBackground:       #dff0d8;
+$successBorder:           darken($successBackground, 20%);
+
+$infoText:                #3a87ad;
+$infoBackground:          #d9edf7;
+$infoBorder:              darken($infoBackground, 20%);
+
+
+// Tooltips and popovers
+// -------------------------
+$tooltipColor:            #fff;
+$tooltipBackground:       #000;
+$tooltipArrowWidth:       5px;
+$tooltipArrowColor:       $tooltipBackground;
+
+$popoverBackground:       #fff;
+$popoverArrowWidth:       10px;
+$popoverArrowColor:       #fff;
+$popoverTitleBackground:  darken($popoverBackground, 3%);
+
+// Special enhancement for popovers
+$popoverArrowOuterWidth:  $popoverArrowWidth + 1;
+$popoverArrowOuterColor:  rgba(0,0,0,.25);
+
+
+
+// GRID
+// --------------------------------------------------
+
+
+// Default 940px grid
+// -------------------------
+$gridColumns:             12;
+$gridColumnWidth:         60px;
+$gridGutterWidth:         20px;
+$gridRowWidth:            ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1));
+
+// 1200px min
+$gridColumnWidth1200:     70px;
+$gridGutterWidth1200:     30px;
+$gridRowWidth1200:        ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1));
+
+// 768px-979px
+$gridColumnWidth768:      42px;
+$gridGutterWidth768:      20px;
+$gridRowWidth768:         ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1));
+
+
+// Fluid grid
+// -------------------------
+$fluidGridColumnWidth:    percentage($gridColumnWidth/$gridRowWidth);
+$fluidGridGutterWidth:    percentage($gridGutterWidth/$gridRowWidth);
+
+// 1200px min
+$fluidGridColumnWidth1200:     percentage($gridColumnWidth1200/$gridRowWidth1200);
+$fluidGridGutterWidth1200:     percentage($gridGutterWidth1200/$gridRowWidth1200);
+
+// 768px-979px
+$fluidGridColumnWidth768:      percentage($gridColumnWidth768/$gridRowWidth768);
+$fluidGridGutterWidth768:      percentage($gridGutterWidth768/$gridRowWidth768);