todc-bootstrap-sass 0.0.5

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

@@ -0,0 +1,117 @@
+//
+// Dropdown menus
+// --------------------------------------------------
+
+
+// The dropdown menu (ul)
+// ----------------------
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: $zindexDropdown;
+  display: none; // none by default, but block on "open" of the menu
+  float: left;
+  min-width: 160px;
+  padding: 0 0 6px 0;
+  margin: 1px 0 0; // override default ul
+  list-style: none;
+  background-color: $dropdownBackground;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0,0,0,.2);
+  *border-right-width: 2px;
+  *border-bottom-width: 2px;
+  @include border-radius(0);
+  @include box-shadow(0 2px 4px rgba(0,0,0,.2));
+  -webkit-background-clip: padding-box;
+     -moz-background-clip: padding;
+          background-clip: padding-box;
+
+  // Aligns the dropdown menu to right
+  &.pull-right {
+    right: 0;
+    left: auto;
+  }
+
+  // Dividers (basically an hr) within the dropdown
+  .divider {
+    @include nav-divider($dropdownDividerTop, $dropdownDividerBottom);
+  }
+
+  // Links within the dropdown menu
+  li > a {
+    padding: 3px 30px;
+    position: relative;
+
+    // icon within the menu item
+    i {
+      position: absolute;
+      left: 7px;
+      top: 4px;
+    }
+  }
+}
+
+// Hover state
+// -----------
+.dropdown-menu li > a:hover,
+.dropdown-menu li > a:focus,
+.dropdown-submenu:hover > a {
+  color: $dropdownLinkColorHover;
+  @include gradient-vertical($dropdownLinkBackgroundHover, $dropdownLinkBackgroundHover);
+}
+
+// Active state
+// ------------
+.dropdown-menu .active > a,
+.dropdown-menu .active > a:hover {
+  color: $dropdownLinkColorActive;
+  @include gradient-vertical($dropdownLinkBackgroundHover, $dropdownLinkBackgroundHover);
+}
+
+// Open state for the dropdown
+// ---------------------------
+.open {
+  // IE7's z-index only goes to the nearest positioned ancestor, which would
+  // make the menu appear below buttons that appeared later on the page
+  *z-index: $zindexDropdown;
+
+  & > .dropdown-menu {
+    display: block;
+  }
+}
+
+// Sub menus
+// ---------------------------
+// Default dropdowns
+.dropdown-submenu > .dropdown-menu {
+  @include border-radius(0);
+}
+
+// Dropups
+.dropup .dropdown-submenu > .dropdown-menu {
+  @include border-radius(0);
+}
+
+// Caret to indicate there is a submenu
+.dropdown-submenu > a:after {
+  border-left-color: darken($dropdownBackground, 50%);
+  margin-right: -20px;
+}
+.dropdown-submenu:hover > a:after {
+  border-left-color: #000000;
+}
+
+// Left aligned submenus
+.dropdown-submenu.pull-left {
+  > .dropdown-menu {
+    @include border-radius(0);
+    margin-left: 18px;
+  }
+}
+
+// Typeahead
+// ---------
+.typeahead {
+  @include border-radius(0);
+}

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

@@ -0,0 +1,248 @@
+//
+// Forms
+// --------------------------------------------------
+
+
+// Form controls
+// -------------------------
+
+// Shared size and type resets
+select,
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"],
+.uneditable-input {
+  padding: 4px 8px;
+  font-size: $baseFontSize;
+  @include border-radius($inputBorderRadius);
+}
+
+// Reset appearance properties for textual inputs and textarea
+// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
+input,
+textarea {
+  width: 210px;
+}
+// Reset height since textareas have rows
+textarea {
+  padding-right: 4px;
+}
+// Everything else
+textarea,
+input[type="text"],
+input[type="password"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="date"],
+input[type="month"],
+input[type="time"],
+input[type="week"],
+input[type="number"],
+input[type="email"],
+input[type="url"],
+input[type="search"],
+input[type="tel"],
+input[type="color"],
+.uneditable-input {
+  border: 1px solid $inputBorder;
+  border-top-color: darken($inputBorder, 10%);
+  @include box-shadow(none);
+  @include transition(none);
+
+  &:hover {
+    border: 1px solid #b9b9b9;
+    border-top-color: #a0a0a0;
+    @include box-shadow(inset 0 1px 2px rgba(0,0,0,0.1));
+  }
+
+  // Focus state
+  &:focus {
+    outline: 0 \9;
+    border-color: #4d90fe;
+    @include box-shadow(inset 0 1px 2px rgba(0,0,0,0.3));
+    @include transition(none);
+  }
+}
+
+
+// CHECKBOXES & RADIOS
+// -------------------
+
+// Google style
+input[type="checkbox"],
+input[type="radio"] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 13px;
+  height: 13px;
+  background: white;
+  border: 1px solid #dcdcdc;
+  @include border-radius(1px);
+  @include box-sizing(border-box);
+  position: relative;
+
+  // override styles for IE
+  box-sizing: content-box \9;
+  width: 16px \9;
+  height: 16px \9;
+  border-width: 0 \9;
+}
+input[type="radio"] {
+  @include border-radius(1em);
+  width: 15px;
+  height: 15px;
+}
+input[type="checkbox"]:hover {
+  border-color: #c6c6c6;
+  @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.1));
+
+  // no box shadow for IE
+  box-shadow: none \9;
+}
+input[type="checkbox"]:active,
+input[type="radio"]:active {
+  border-color: #c6c6c6;
+  background-color: #ebebeb;
+  // override the bkgd color for IE
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffffffff', GradientType=0);
+}
+input[type="checkbox"]:checked,
+input[type="radio"]:checked {
+  background: #fff;
+}
+input[type="checkbox"]:checked::after {
+  content: url($iconCheckMarkPath);
+  display: block;
+  position: absolute;
+  top: -6px;
+  left: -5px;
+}
+input[type="radio"]:checked::after {
+  content: '';
+  display: block;
+  position: relative;
+  top: 3px;
+  left: 3px;
+  width: 7px;
+  height: 7px;
+  background: #666;
+  @include border-radius(1em);
+}
+input[type="checkbox"]:focus,
+input[type="radio"]:focus {
+  outline: none;
+  border-color: #4d90fe;
+}
+
+
+// DISABLED STATE
+// --------------
+
+// Disabled and read-only inputs
+input[disabled],
+select[disabled],
+textarea[disabled] {
+  cursor: not-allowed;
+  border: 1px solid #e5e5e5;
+  background: #f1f1f1;
+
+  &:hover {
+    @include box-shadow(none);
+  }
+}
+input[readonly],
+select[readonly],
+textarea[readonly] {
+  cursor: not-allowed;
+  border: 1px solid $inputBorder;
+
+  &:hover,
+  &:focus {
+    @include box-shadow(none);
+  }
+}
+
+
+// INPUT GROUPS
+// ------------
+
+.input-prepend {
+  input,
+  select,
+  .uneditable-input {
+    @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
+  }
+}
+
+.input-append {
+  input,
+  select,
+  .uneditable-input {
+    @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
+  }
+}
+
+// Remove all border-radius for inputs with both prepend and append
+.input-prepend.input-append {
+  input,
+  select,
+  .uneditable-input {
+    @include border-radius(0);
+  }
+}
+
+
+// FORM FIELD FEEDBACK STATES
+// --------------------------
+
+// HTML5 invalid states
+// Shares styles with the .control-group.error above
+input:focus:required:invalid,
+textarea:focus:required:invalid,
+select:focus:required:invalid {
+  color: #b94a48;
+  border-color: #ee5f5b;
+  &:focus {
+    border-color: #4d90fe;
+    @include box-shadow(0);
+  }
+}
+
+
+// HORIZONTAL & VERTICAL FORMS
+// ---------------------------
+
+// Common properties
+// -----------------
+
+.form-search,
+.form-inline,
+.form-horizontal {
+  input,
+  textarea,
+  select,
+  .help-inline,
+  .uneditable-input,
+  .input-prepend,
+  .input-append {
+    display: inline-block;
+    @include ie7-inline-block();
+    margin-bottom: 0;
+  }
+  // Re-hide hidden elements due to specifity
+  .hide {
+    display: none;
+  }
+}

data/lib/assets/stylesheets/todc-bootstrap/_google-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/_labels-badges.scss

@@ -0,0 +1,31 @@
+//
+// Labels and badges
+// --------------------------------------------------
+
+
+// Base classes
+
+// Set unique padding and border-radii
+.label {
+  @include border-radius(0);
+}
+
+// Colors
+// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
+@each $item in label, badge {
+  // Important (red)
+  .#{$item}-important         { background-color: $errorText; }
+  .#{$item}-important[href]   { background-color: darken($errorText, 10%); }
+  // Warnings (orange)
+  .#{$item}-warning           { background-color: $orange; }
+  .#{$item}-warning[href]     { background-color: darken($orange, 10%); }
+  // Success (green)
+  .#{$item}-success           { background-color: $successText; }
+  .#{$item}-success[href]     { background-color: darken($successText, 10%); }
+  // Info (turquoise)
+  .#{$item}-info              { background-color: $infoText; }
+  .#{$item}-info[href]        { background-color: darken($infoText, 10%); }
+  // Inverse (black)
+  .#{$item}-inverse           { background-color: $grayDark; }
+  .#{$item}-inverse[href]     { background-color: darken($grayDark, 10%); }
+}