google-buttons-sass 0.1.0

data/vendor/assets/stylesheets/forms.scss

@@ -0,0 +1,229 @@
+// Forms.less
+// Base styles for various input types, form layouts, and states
+// -------------------------------------------------------------
+
+
+// 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;
+}
+
+// Reset appearance properties for textual inputs and textarea
+// Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
+.g-select,
+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 #d9d9d9;
+  border-top: 1px solid #c0c0c0;
+  @include border-radius($inputBorderRadius);
+  @include box-shadow(none);
+  @include transition(none);
+
+  &:hover {
+    border: 1px solid #b9b9b9;
+    border-top: 1px solid #a0a0a0;
+    @include box-shadow(inset 0 1px 2px rgba(0,0,0,0.1));
+    z-index: 2;
+  }
+
+  // Focus state
+  &:focus,
+  &.focused {
+    outline: none;
+    border: 1px solid #4d90fe;
+    @include transition(none);
+    @include box-shadow(inset 0 1px 2px rgba(0,0,0,0.3));
+  }
+}
+
+
+// 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;
+}
+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));
+}
+input[type="checkbox"]:active,
+input[type="radio"]:active {
+  border-color: #c6c6c6;
+  background: #EBEBEB;
+}
+input[type="checkbox"]:checked,
+input[type="radio"]:checked {
+  background: #fff;
+}
+input[type="checkbox"]:checked::after {
+  content: asset-url("checkmark.png", image);
+  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 #d9d9d9;
+
+  &:hover,
+  &:focus {
+    @include box-shadow(none);
+  }
+}
+
+
+// FORM FIELD FEEDBACK STATES
+// --------------------------
+
+// HTML5 invalid states
+// Shares styles with the .control-group.error above
+.g-select:focus:required:invalid,
+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 {
+  .g-select,
+  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;
+  }
+}
+
+.btn.g-select {
+  font-weight: bold;
+  text-align: left;
+  padding: 4px 8px;
+}
+.btn.g-select:after {
+  content: "";
+  position: absolute;
+  display: inline-block;
+  top: 9px;
+  right: 6px;
+  width: 7px;
+  height: 11px;
+  background-image: asset-url("grey-disclosure-arrow-up-down.png", image);
+  background-repeat: no-repeat;
+}

data/vendor/assets/stylesheets/google-buttons.scss

@@ -0,0 +1,42 @@
+/*!
+ * Google Buttons Bootstrap
+ *
+ * This CSS is intended to be used on top of Twitter Bootstrap, to theme
+ * it in the Google style.
+ *
+ * Constructed by Tim O'Donnell (http://github.com/todc)
+ * Gemmed by Pete Brousalis (http://github.com/brousalis)
+ */
+
+// Bootstrap
+@import "bootstrap-mixins";
+
+// Core variables and mixins
+@import "variables";
+@import "mixins";
+
+// Base CSS
+@import "forms";
+
+// Components: common
+@import "dropdowns";
+@import "wells";
+@import "scrollbars";
+
+// Components: Buttons & Alerts
+@import "buttons";
+@import "button-groups";
+@import "alerts";
+
+// Components: Nav
+@import "navs";
+@import "breadcrumbs";
+@import "pagination";
+@import "pager";
+
+// Components: Popovers
+@import "tooltip";
+@import "popovers";
+
+// Components: Misc
+@import "progress-bars";

data/vendor/assets/stylesheets/mixins.scss

@@ -0,0 +1,44 @@
+// Mixins.less
+// Snippets of reusable CSS to develop faster and keep code readable
+// -----------------------------------------------------------------
+
+// Popover arrows
+// -------------------------
+// For popovers
+@mixin top($arrowWidth: 9px, $color: $white) {
+  bottom: 0;
+  left: 50%;
+  margin-bottom: -$arrowWidth + 6px;
+  margin-left: -$arrowWidth;
+  border-left: $arrowWidth solid transparent;
+  border-right: $arrowWidth solid transparent;
+  border-top: $arrowWidth solid $color;
+}
+@mixin left($arrowWidth: 9px, $color: $white) {
+  top: 50%;
+  right: 0;
+  margin-right: -$arrowWidth + 6px;
+  margin-top: -$arrowWidth;
+  border-top: $arrowWidth solid transparent;
+  border-bottom: $arrowWidth solid transparent;
+  border-left: $arrowWidth solid $color;
+}
+@mixin bottom($arrowWidth: 9px, $color: $white) {
+  top: 0;
+  left: 50%;
+  margin-top: -$arrowWidth + 6px;
+  margin-left: -$arrowWidth;
+  border-left: $arrowWidth solid transparent;
+  border-right: $arrowWidth solid transparent;
+  border-bottom: $arrowWidth solid $color;
+}
+@mixin right($arrowWidth: 9px, $color: $white) {
+  top: 50%;
+  left: 0;
+  margin-left: -$arrowWidth + 6px;
+  margin-top: -$arrowWidth;
+  border-top: $arrowWidth solid transparent;
+  border-bottom: $arrowWidth solid transparent;
+  border-right: $arrowWidth solid $color;
+  border-color: transparent $color;
+}

data/vendor/assets/stylesheets/navs.scss

@@ -0,0 +1,76 @@
+// NAVIGATIONS
+// -----------
+
+.nav-list > .active > a,
+.nav-list > .active > a:hover {
+  background-color: #4D90FE;
+}
+
+// Actual tabs (as links)
+.nav-tabs > li > a {
+  @include border-radius(2px 2px 0 0);
+}
+
+// Links rendered as pills
+.nav-pills > li > a {
+  @include border-radius(2px);
+}
+
+// Active state
+.nav-pills > .active > a,
+.nav-pills > .active > a:hover {
+  background-color: #4D90FE;
+}
+
+
+.nav-tabs.nav-stacked > li:first-child > a {
+  @include border-radius(2px 2px 0 0);
+}
+.nav-tabs.nav-stacked > li:last-child > a {
+  @include border-radius(0 0 2px 2px);
+}
+.nav-tabs.nav-stacked > li > a:hover {
+  border-color: #ddd;
+  z-index: 2;
+}
+
+
+// TABS
+// ----
+
+.nav-tabs > li > a {
+    color: #666;
+}
+.nav-tabs > .active > a,
+.nav-tabs > .active > a:hover {
+    font-weight: bold;
+    color: #333;
+}
+
+
+// DROPDOWNS
+// ---------
+
+.nav-tabs .dropdown-menu {
+  @include border-radius(0); // remove the top rounded corners here since there is a hard edge above the menu
+}
+.nav-pills .dropdown-menu {
+  @include border-radius(0); // make rounded corners match the pills
+}
+
+// BOTTOM
+// ------
+
+.tabs-below > .nav-tabs > li > a {
+  @include border-radius(0 0 2px 2px);
+}
+
+// LEFT & RIGHT
+// ------------
+
+.tabs-left > .nav-tabs > li > a {
+  @include border-radius(2px 0 0 2px);
+}
+.tabs-right > .nav-tabs > li > a {
+  @include border-radius(0 2px 2px 0);
+}

data/vendor/assets/stylesheets/pager.scss

@@ -0,0 +1,40 @@
+// PAGER
+// -----
+
+.pager a {
+  padding: 4px 12px;
+
+  border: 1px solid #dcdcdc;
+  @include border-radius(2px);
+  background-color: $btnBackground;
+  @include gradient-vertical(#f5f5f5,#f1f1f1);
+
+  color: #333;
+  text-shadow: 0 1px 0 #fff;
+  text-decoration: none;
+  white-space: nowrap;
+  font-weight: bold;
+
+  cursor: default;
+  outline: none;
+  overflow: visible;
+}
+.pager a:hover {
+  border-color: #c6c6c6;
+  @include gradient-vertical(#f8f8f8,#f1f1f1);
+  @include box-shadow(0 1px 1px rgba(0,0,0,0.1));
+}
+.pager a:active {
+  background-color: #f4f4f4;
+  @include gradient-vertical(#f6f6f6,#f1f1f1);
+  @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.1));
+}
+.pager .disabled a,
+.pager .disabled a:hover {
+  color: darken($white, 30%);
+  border-color: darken($white, 15%);
+  background-color: $btnBackground;
+  @include gradient-vertical(#f5f5f5,#f1f1f1);
+  @include box-shadow(none);
+  text-shadow: none;
+}

data/vendor/assets/stylesheets/pagination.scss

@@ -0,0 +1,68 @@
+// PAGINATION
+// ----------
+
+.pagination ul {
+  @include border-radius(2px);
+}
+.pagination a {
+  position: relative;
+  padding: 4px 12px;
+  margin-left: -1px;
+
+  border: 1px solid #dcdcdc;
+  background-color: $btnBackground;
+  @include gradient-vertical(#f5f5f5,#f1f1f1);
+
+  color: #333;
+  font-family: $baseFontFamily;
+  font-size: $baseFontSize;
+  font-weight: bold;
+  line-height: $baseLineHeight;
+  text-align: center;
+  text-shadow: 0 1px 0 #fff;
+  white-space: nowrap;
+
+  cursor: default;
+  outline: none;
+  overflow: visible;
+
+  z-index: 1000;
+}
+.pagination a:hover,
+.pagination a:active {
+  border-color: #c6c6c6;
+  z-index: 1010;
+  
+  background-color: #f5f5f5;
+  @include gradient-vertical(#f8f8f8,#f1f1f1);
+  
+  @include box-shadow(0 1px 1px rgba(0,0,0,0.1));
+}
+.pagination a:active {
+  background-color: #f4f4f4;
+  @include gradient-vertical(#f6f6f6,#f1f1f1);
+  @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.1));
+}
+.pagination .active a {
+  color: #4D90FE;
+}
+.pagination .disabled span,
+.pagination .disabled a,
+.pagination .disabled a:hover {
+  color: darken($white, 30%);
+  border-color: darken($white, 15%);
+  background-color: $btnBackground;
+  @include gradient-vertical(#f5f5f5,#f1f1f1);
+  @include box-shadow(none);
+  text-shadow: none;
+}
+.pagination .disabled a [class^="icon-"] {
+	@include opacity(30);
+}
+.pagination li:first-child a {
+  margin-left: 0;
+  @include border-radius(2px 0 0 2px);
+}
+.pagination li:last-child a {
+  @include border-radius(0 2px 2px 0);
+}

data/vendor/assets/stylesheets/popovers.scss

@@ -0,0 +1,36 @@
+// POPOVERS
+// --------
+
+.popover {
+  &.top .arrow          { @include top(); }
+  &.top .arrowbefore    { @include top(10px, #bbb); }
+
+  &.right .arrow        { @include right(); }
+  &.right .arrowbefore  { @include right(10px, #bbb); }
+
+  &.bottom .arrow       { @include bottom(); }
+  &.bottom .arrowbefore { @include bottom(10px, #bbb); }
+
+  &.left .arrow         { @include left();  }
+  &.left .arrowbefore   { @include left(10px, #bbb);  }
+
+  .arrowbefore {
+    position: absolute;
+    width: 0;
+    height: 0;
+  }
+}
+.popover-inner {
+  padding: 0px;
+  border: 1px solid;
+  border-color: #bbb #bbb #a8a8a8;
+  background: #bbb; // has to be full background declaration for IE fallback
+  @include border-radius(0);
+  @include box-shadow(0 1px 3px rgba(0,0,0,0.2));
+}
+.popover-title {
+  @include border-radius(0);
+}
+.popover-content {
+  @include border-radius(0);
+}

data/vendor/assets/stylesheets/progress-bars.scss

@@ -0,0 +1,7 @@
+// PROGRESS BARS
+// -------------
+
+// Outer container
+.progress {
+  @include border-radius(2px);
+}

data/vendor/assets/stylesheets/scrollbars.scss

@@ -0,0 +1,43 @@
+.scrollable::-webkit-scrollbar {
+    height: 16px;
+    width: 12px;
+}
+.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-left: 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: 1px 1px 1px 2px;
+    @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/vendor/assets/stylesheets/sprites.scss

@@ -0,0 +1,12 @@
+// SPRITES
+// Glyphs and icons for buttons, nav, and more
+// -------------------------------------------
+
+[class^="icon-"] {
+  margin-top: -2px;
+}
+
+.disabled > [class^="icon-"],
+.disabled2 > [class^="icon-"] {
+  @include opacity(50);
+}

data/vendor/assets/stylesheets/tooltip.scss

@@ -0,0 +1,10 @@
+// TOOLTIP
+// ------=
+
+.tooltip {
+  font-weight: bold;
+  &.in     { @include opacity(100); }
+}
+.tooltip-inner {
+  @include border-radius(0px);
+}