google-buttons-sass 0.1.0

data/vendor/assets/stylesheets/button-groups.scss

@@ -0,0 +1,124 @@
+// BUTTON GROUPS
+// -------------
+
+// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
+.btn-group > .btn:first-child {
+  margin-left: 0;
+  @include border-radius(2px 0px 0px 2px);
+}
+// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
+.btn-group > .g-select,
+.btn-group > .btn:last-child,
+.btn-group > .dropdown-toggle {
+  @include border-radius(0px 2px 2px 0px);
+}
+// Reset corners for large buttons
+.btn-group > .btn.large:first-child {
+  margin-left: 0;
+  @include border-radius(2px 0px 0px 2px);
+}
+.btn-group > .btn.large:last-child,
+.btn-group > .large.dropdown-toggle {
+  @include border-radius(0px 2px 2px 0px);
+}
+
+// Split button dropdowns
+// ----------------------
+
+// Give the line between buttons some depth
+.btn-group > .dropdown-toggle {
+  @include box-shadow(none);
+}
+.btn-group > .dropdown-toggle:hover {
+  @include box-shadow(0 1px 1px rgba(0,0,0,0.1));
+}
+.btn-group > .btn-primary.dropdown-toggle:hover,
+.btn-group > .btn-info.dropdown-toggle:hover,
+.btn-group > .btn-warning.dropdown-toggle:hover, 
+.btn-group > .btn-danger.dropdown-toggle:hover,
+.btn-group > .btn-success.dropdown-toggle:hover,
+.btn-group > .btn-inverse.dropdown-toggle:hover {
+  @include box-shadow(0 1px 1px rgba(0,0,0,0.2));
+}
+.btn-group > .btn.dropdown-toggle:active,
+.btn-group > .btn.dropdown-toggle.active {
+  @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.1));
+}
+.btn-group > .btn-primary.dropdown-toggle:active,
+.btn-group > .btn-primary.dropdown-toggle.active,
+.btn-group > .btn-warning.dropdown-toggle:active,
+.btn-group > .btn-warning.dropdown-toggle.active,
+.btn-group > .btn-danger.dropdown-toggle:active,
+.btn-group > .btn-danger.dropdown-toggle.active,
+.btn-group > .btn-success.dropdown-toggle:active,
+.btn-group > .btn-success.dropdown-toggle.active,
+.btn-group > .btn-info.dropdown-toggle:active,
+.btn-group > .btn-info.dropdown-toggle.active,
+.btn-group > .btn-inverse.dropdown-toggle:active,
+.btn-group > .btn-inverse.dropdown-toggle.active {
+  @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.3));
+}
+.btn-group > .btn-mini.dropdown-toggle {
+  padding: 2px 4px;
+}
+.btn-group > .btn-small.dropdown-toggle {
+  padding: 5px 7px;
+}
+.btn-group > .btn-large.dropdown-toggle {
+  padding: 9px 9px;
+}
+
+.btn-group.open {
+  
+  // The clickable button for toggling the menu
+  // Remove the gradient and set the same inset shadow as the :active state
+  .dropdown-toggle {
+    @include box-shadow(inset 0 1px 6px rgba(0, 0, 0, 0.15));
+  }
+
+  // Keep the hover's background when dropdown is open
+  .btn.dropdown-toggle {
+    background-color: $btnBackground;
+    @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.1));
+  }
+  .btn-primary.dropdown-toggle {
+    background-color: $btnPrimaryBackground;
+    @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.3));
+  }
+  .btn-warning.dropdown-toggle {
+    background-color: $btnWarningBackground;
+    @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.3));
+  }
+  .btn-danger.dropdown-toggle {
+    background-color: $btnDangerBackground;
+    @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.3));
+  }
+  .btn-success.dropdown-toggle {
+    background-color: $btnSuccessBackground;
+    @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.3));
+  }
+  .btn-info.dropdown-toggle {
+    background-color: $btnInfoBackground;
+    @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.3));
+  }
+  .btn-inverse.dropdown-toggle {
+    background-color: $btnInverseBackground;
+    @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.3));
+  }
+}
+
+
+// Reposition the caret
+.btn .caret {
+  margin-top: 8px;
+}
+// Carets in other button sizes
+.btn-mini .caret {
+  margin-top: 5px;
+}
+.btn-small .caret {
+  margin-top: 6px;
+}
+.btn-large .caret {
+  margin-top: 6px;
+}

data/vendor/assets/stylesheets/buttons.scss

@@ -0,0 +1,396 @@
+// BUTTON STYLES
+// -------------
+
+
+// Base styles
+// --------------------------------------------------
+
+// Core
+.btn {
+  position: relative;
+  padding: 4px 12px;
+  margin: 0;
+  
+  color: #333;
+  text-shadow: 0 1px 0 #fff;
+  white-space: nowrap;
+  font-family: $baseFontFamily;
+  font-weight: bold;
+
+  cursor: default;
+  background-color: $btnBackground;
+  @include gradient-vertical(#f5f5f5,#f1f1f1);
+  @include background-clip(padding);
+  border: 1px solid #dcdcdc;
+  @include border-radius(2px);
+  @include box-shadow(none);
+}
+
+// Hover state
+.btn:hover {
+  color: #333;
+  text-shadow: none;
+  border-color: #c6c6c6;
+
+  background-color: #f5f5f5;
+  @include gradient-vertical(#f8f8f8,#f1f1f1);
+  @include box-shadow(0 1px 1px rgba(0,0,0,0.1));
+
+  background-position: 0 0;
+  @include transition(none);
+  z-index: 2;
+}
+
+// Active state
+.btn.active,
+.btn:active {
+  background-color: #f4f4f4;
+  @include gradient-vertical(#f6f6f6,#f1f1f1);
+  @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.1));
+}
+
+.btn:active,
+.btn:focus {
+  /* Blue border on button focus. */
+  border-color: #4D90FE;
+}
+.btn.active {
+  background: #e8e8e8;
+}
+
+// Disabled state
+.btn.disabled,
+.btn.disabled:hover,
+.btn.disabled:active,
+.btn.disabled.active,
+.btn.disabled:focus,
+.btn[disabled],
+.btn[disabled]:hover,
+.btn[disabled]:active,
+.btn[disabled].active,
+.btn[disabled]:focus {
+  color: darken($white, 30%);
+  border-color: darken($white, 15%);
+  background-color: darken($white, 10%);
+  background-image: none;
+  @include box-shadow(none);
+  text-shadow: none;
+}
+
+
+// Button Sizes
+// --------------------------------------------------
+
+// Large
+.btn-large {
+  padding: 9px 14px;
+  font-size: $baseFontSize + 1px;
+  line-height: normal;
+}
+
+// Small
+.btn-small {
+  padding: 5px 9px;
+  font-size: $baseFontSize - 1px;
+  line-height: $baseLineHeight - 5px;
+}
+
+// Mini
+.btn-mini {
+  padding: 2px 6px;
+  font-size: $baseFontSize - 2px;
+  line-height: $baseLineHeight - 7px;
+}
+
+
+// Alternate buttons
+// --------------------------------------------------
+
+// Set text color
+// -------------------------
+.btn-primary,
+.btn-primary:hover,
+.btn-warning,
+.btn-warning:hover,
+.btn-danger,
+.btn-danger:hover,
+.btn-success,
+.btn-success:hover,
+.btn-info,
+.btn-info:hover,
+.btn-inverse,
+.btn-inverse:hover {
+  color: $white;
+  text-shadow: 0 1px rgba(0, 0, 0, 0.1);
+}
+// Provide *some* extra contrast for those who can get it
+.btn-primary:hover,
+.btn-warning:hover,
+.btn-danger:hover,
+.btn-success:hover,
+.btn-info:hover,
+.btn-inverse:hover {
+  @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
+}
+.btn-primary:active,
+.btn-primary.active,
+.btn-warning:active,
+.btn-warning.active,
+.btn-danger:active,
+.btn-danger.active,
+.btn-success:active,
+.btn-success.active,
+.btn-info:active,
+.btn-info.active,
+.btn-inverse:active,
+.btn-inverse.active {
+  @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.3));
+}
+
+.btn-primary.active,
+.btn-primary:active,
+.btn-primary:hover,
+.btn-warning.active,
+.btn-warning:active,
+.btn-warning:hover,
+.btn-danger.active,
+.btn-danger:active,
+.btn-danger:hover,
+.btn-success.active,
+.btn-success:active,
+.btn-success:hover,
+.btn-info.active,
+.btn-info:active,
+.btn-info:hover,
+.btn-inverse.active,
+.btn-inverse:active,
+.btn-inverse:hover {
+  color: white;
+  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+}
+
+
+// Primary Button
+// -------------------------
+.btn-primary {
+  border: 1px solid #3079ED;
+  background-color: $btnPrimaryBackground;
+  @include gradient-vertical(#4d90fe,#4787ed);
+}
+.btn-primary:hover, 
+.btn-primary:focus, 
+.btn-primary:active,
+.btn-primary.active {
+  border: 1px solid #2F5BB7;
+  background-color: #4387f5;
+  @include gradient-vertical(#4d90fe,#357ae8);
+}
+.btn-primary.active {
+  background: darken(#4387f5, 10%);
+}
+.btn-primary.disabled,
+.btn-primary.disabled:hover,
+.btn-primary.disabled:active,
+.btn-primary.disabled.active,
+.btn-primary.disabled:focus,
+.btn-primary[disabled],
+.btn-primary[disabled]:hover,
+.btn-primary[disabled]:active,
+.btn-primary[disabled].active,
+.btn-primary[disabled]:focus {
+  color: darken($white, 10%);
+  border-color: lighten(#3079ED, 10%);
+  background-color: lighten(#4b8cf7, 10%);
+}
+
+
+// Danger Button
+// -------------------------
+.btn-danger {
+  border: 1px solid #C6322A;
+  background-color: $btnDangerBackground;
+  @include gradient-vertical(#dd4b39,#d14836);
+}
+.btn-danger:hover,
+.btn-danger:focus,
+.btn-danger:active {
+  border: 1px solid #AF301F;
+  background-color: #d34332;
+  @include gradient-vertical(#dd4b39,#c53727);
+}
+.btn-danger:active,
+.btn-danger.active {
+  background-color: #cb3d2d;
+  @include gradient-vertical(#dd4b39,#b0281a);
+}
+.btn-danger.active {
+  border-color: darken(#cb3d2d, 10%);
+  background: darken(#cb3d2d, 2%);
+}
+.btn-danger.disabled,
+.btn-danger.disabled:hover,
+.btn-danger.disabled:active,
+.btn-danger.disabled.active,
+.btn-danger.disabled:focus,
+.btn-danger[disabled],
+.btn-danger[disabled]:hover,
+.btn-danger[disabled]:active,
+.btn-danger[disabled].active,
+.btn-danger[disabled]:focus {
+  color: darken($white, 10%);
+  border-color: lighten(#C6322A, 10%);
+  background-color: lighten(#d84a38, 10%);
+}
+
+
+// Warning Button
+// -------------------------
+.btn-warning {
+  border: 1px solid darken($btnWarningBackground, 3%);
+  background-color: $btnWarningBackground;
+  @include gradient-vertical(lighten($orange, 15%), lighten($orange, 10%));
+}
+.btn-warning:hover,
+.btn-warning:focus,
+.btn-warning:active {
+  border: 1px solid darken($btnWarningBackground, 15%);
+  background-color: $btnWarningBackground;
+  @include gradient-vertical(lighten($orange, 15%), $orange);
+}
+.btn-warning:active,
+.btn-warning.active {
+  background-color: $btnWarningBackground;
+  @include gradient-vertical(lighten($orange, 15%), $orange);
+}
+.btn-warning.active {
+  border-color: darken($btnWarningBackground, 15%);
+  background-color: darken($btnWarningBackground, 10%);
+}
+.btn-warning.disabled,
+.btn-warning.disabled:hover,
+.btn-warning.disabled:active,
+.btn-warning.disabled.active,
+.btn-warning.disabled:focus,
+.btn-warning[disabled],
+.btn-warning[disabled]:hover,
+.btn-warning[disabled]:active,
+.btn-warning[disabled].active,
+.btn-warning[disabled]:focus {
+  color: darken($white, 10%);
+  border-color: lighten($btnWarningBackground, 5%);
+  background-color: lighten($btnWarningBackground, 10%);
+}
+
+
+// Success Button
+// -------------------------
+.btn-success {
+  border: 1px solid #359947;
+  background-color: #35aa47;
+  @include gradient-vertical(#35aa47,#35aa47);
+}
+.btn-success:hover,
+.btn-success:focus,
+.btn-success:active {
+  border: 1px solid #508c36;
+  background-color: #2ba142;
+  @include gradient-vertical(#35aa47,#1d943b);
+}
+.btn-success:active,
+.btn-success.active {
+  background-color: #239c3b;
+  @include gradient-vertical(#35aa47,#088728);
+}
+.btn-success.active {
+  border-color: darken(#239c3b, 10%);
+  background: darken(#239c3b, 5%);
+}
+.btn-success.disabled,
+.btn-success.disabled:hover,
+.btn-success.disabled:active,
+.btn-success.disabled.active,
+.btn-success.disabled:focus,
+.btn-success[disabled],
+.btn-success[disabled]:hover,
+.btn-success[disabled]:active,
+.btn-success[disabled].active,
+.btn-success[disabled]:focus {
+  color: darken($white, 10%);
+  border-color: lighten(#359947, 10%);
+  background-color: lighten(#35aa47, 10%);
+}
+
+
+// Info Button
+// -------------------------
+.btn-info {
+  border: 1px solid darken($btnInfoBackground, 5%);
+  background-color: $btnInfoBackground;
+  @include gradient-vertical($btnInfoBackground,$btnInfoBackground);
+}
+.btn-info:hover,
+.btn-info:focus,
+.btn-info:active {
+  border: 1px solid darken($btnInfoBackground, 10%);
+  background-color: $btnInfoBackground;
+  @include gradient-vertical(lighten($btnInfoBackground, 3%), darken($btnInfoBackground, 3%));
+}
+.btn-info:active,
+.btn-info.active {
+  background-color: darken($btnInfoBackground, 8%);
+  @include gradient-vertical(lighten($btnInfoBackground, 3%), darken($btnInfoBackground, 3%));
+}
+.btn-info.active {
+  border-color: darken($btnInfoBackground, 15%);
+  background: darken($btnInfoBackground, 10%);
+}
+.btn-info.disabled,
+.btn-info.disabled:hover,
+.btn-info.disabled:active,
+.btn-info.disabled.active,
+.btn-info.disabled:focus,
+.btn-info[disabled],
+.btn-info[disabled]:hover,
+.btn-info[disabled]:active,
+.btn-info[disabled].active,
+.btn-info[disabled]:focus {
+  color: darken($white, 10%);
+  border-color: lighten($btnInfoBackground, 5%);
+  background-color: lighten($btnInfoBackground, 10%);
+}
+
+
+// Inverse Button
+// -------------------------
+.btn-inverse {
+  border: 1px solid darken($btnInverseBackground, 3%);
+  background-color: $btnInverseBackground;
+  @include gradient-vertical(lighten($btnInverseBackground, 1%), darken($btnInverseBackground, 1%));
+}
+.btn-inverse:hover,
+.btn-inverse:focus,
+.btn-inverse:active {
+  border: 1px solid darken($btnInverseBackground, 9%);
+  background-color: $btnInverseBackground;
+  @include gradient-vertical(lighten($btnInverseBackground, 3%), darken($btnInverseBackground, 6%));
+}
+.btn-inverse:active,
+.btn-inverse.active {
+  background-color: darken(#2d2d2d, 8%);
+  @include gradient-vertical(lighten($btnInverseBackground, 1%), darken($btnInverseBackground, 9%));
+}
+.btn-inverse.disabled,
+.btn-inverse.disabled:hover,
+.btn-inverse.disabled:active,
+.btn-inverse.disabled.active,
+.btn-inverse.disabled:focus,
+.btn-inverse[disabled],
+.btn-inverse[disabled]:hover,
+.btn-inverse[disabled]:active,
+.btn-inverse[disabled].active,
+.btn-inverse[disabled]:focus {
+  color: darken($white, 10%);
+  border-color: lighten($btnInverseBackground, 10%);
+  background-color: lighten($btnInverseBackground, 15%);
+}
+

data/vendor/assets/stylesheets/dropdowns.scss

@@ -0,0 +1,95 @@
+// DROPDOWN MENUS
+// --------------
+
+// The dropdown menu (ul)
+// ----------------------
+.g-select-dropdown,
+.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
+  a {
+    display: block;
+    padding: 6px 15px;
+    clear: both;
+    font-weight: normal;
+    line-height: 18px;
+    color: $dropdownLinkColor;
+    white-space: nowrap;
+  }
+}
+
+.g-select-dropdown li {
+  display: block;
+  padding: 3px 10px;
+  clear: both;
+  font-weight: normal;
+  line-height: 18px;
+  color: $dropdownLinkColor;
+  white-space: nowrap;
+}
+
+// Hover state
+// -----------
+.g-select-dropdown li:hover,
+.dropdown-menu li > a:hover,
+.dropdown-menu .active > a,
+.dropdown-menu .active > a:hover {
+  color: $dropdownLinkColorHover;
+  text-decoration: none;
+  background-color: $dropdownLinkBackgroundHover;
+}
+
+.g-select-dropdown {
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+// 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;
+
+  & > .g-select-dropdown,
+  & > .dropdown-menu {
+    display: block;
+  }
+}
+
+// Typeahead
+// ---------
+.typeahead {
+  @include border-radius(0);
+}