on-standards-rails 1.5.1.1 → 2.0.0.pre.alpha

data/vendor/assets/stylesheets/on-standards/_breadcrumb.scss

@@ -0,0 +1,23 @@
+.breadcrumb {
+  padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal;
+  margin-bottom: $spacer-y;
+  list-style: none;
+  background-color: $breadcrumb-bg;
+  @include border-radius($border-radius);
+  @include clearfix;
+
+  > li {
+    float: left;
+
+    + li::before {
+      padding-right: .5rem;
+      padding-left: .5rem;
+      color: $breadcrumb-divider-color;
+      content: "#{$breadcrumb-divider}";
+    }
+  }
+
+  > .active {
+    color: $breadcrumb-active-color;
+  }
+}

data/vendor/assets/stylesheets/on-standards/_button-group.scss

@@ -0,0 +1,293 @@
+// Make the div behave like a button
+.button-group,
+.button-group-vertical {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle; // match .button alignment given font-size hack above
+
+  > .button {
+    position: relative;
+    float: left;
+
+    // Bring the "active" button to the front
+    &:focus,
+    &:active,
+    &.active {
+      z-index: 2;
+    }
+    @include hover {
+      z-index: 2;
+    }
+  }
+}
+
+// Color variants for buttons
+@mixin active-variant($color, $text-color: #fff) {
+  $highlight: tint($color, 20%);
+  $press:     shade($color, 20%);
+  &:hover {
+    background: $highlight;
+    border-color: $highlight;
+    color: $text-color;
+  }
+  &:active {
+    background: $press;
+    border-color: $press;
+    color: $text-color;
+  }
+  &.active {
+    background: $color;
+    border-color: $color;
+    color: $text-color;
+    &:hover {
+      background: $highlight;
+      border-color: $highlight;
+    }
+    &:active {
+      background: $press;
+      border-color: $press;
+    }
+  }
+}
+
+.button-group,
+.button-group-vertical {
+  > .button {
+    box-shadow: none;
+    &.active {
+      &:hover {
+        background: $button-highlight-color;
+        border-color: $button-highlight-color;
+      }
+      &:active {
+        background: $button-press-color;
+        border-color: $button-press-color;
+      }
+    }
+    &.active-color-green {
+      @include active-variant($green);
+    }
+    &.active-color-orange {
+      @include active-variant($orange);
+    }
+    &.active-color-pink {
+      @include active-variant($pink);
+    }
+    &.active-color-purple {
+      @include active-variant($purple);
+    }
+    &.active-color-cyan {
+      @include active-variant($cyan);
+    }
+    &.active-color-blue {
+      @include active-variant($blue);
+    }
+    &.active-color-muted {
+      @include active-variant($button-secondary-border, $body-color);
+    }
+  }
+}
+
+
+// Prevent double borders when buttons are next to each other
+.button-group {
+  .button + .button,
+  .button + .button-group,
+  .button-group + .button,
+  .button-group + .button-group {
+    margin-left: -$input-button-border-width;
+  }
+}
+
+// Optional: Group multiple button groups together for a toolbar
+.button-toolbar {
+  margin-left: -5px; // Offset the first child's margin
+  @include clearfix();
+
+  .button-group,
+  .input-group {
+    float: left;
+  }
+
+  > .button,
+  > .button-group,
+  > .input-group {
+    margin-left: 5px;
+  }
+}
+
+.button-group > .button:not(:first-child):not(:last-child):not(.dropdown-toggle) {
+  border-radius: 0;
+}
+
+// Set corners individual because sometimes a single button can be in a .button-group and we need :first-child and :last-child to both match
+.button-group > .button:first-child {
+  margin-left: 0;
+
+  &:not(:last-child):not(.dropdown-toggle) {
+    @include border-right-radius(0);
+  }
+}
+// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
+.button-group > .button:last-child:not(:first-child),
+.button-group > .dropdown-toggle:not(:first-child) {
+  @include border-left-radius(0);
+}
+
+// Custom edits for including button-groups within button-groups (useful for including dropdown buttons within a button-group)
+.button-group > .button-group {
+  float: left;
+}
+.button-group > .button-group:not(:first-child):not(:last-child) > .button {
+  border-radius: 0;
+}
+.button-group > .button-group:first-child:not(:last-child) {
+  > .button:last-child,
+  > .dropdown-toggle {
+    @include border-right-radius(0);
+  }
+}
+.button-group > .button-group:last-child:not(:first-child) > .button:first-child {
+  @include border-left-radius(0);
+}
+
+// On active and open, don't show outline
+.button-group .dropdown-toggle:active,
+.button-group.open .dropdown-toggle {
+  outline: 0;
+}
+
+
+// Sizing
+//
+// Remix the default button sizing classes into new ones for easier manipulation.
+
+.button-group-xsmall > .button { @extend .button-xsmall; }
+.button-group-small > .button { @extend .button-small; }
+.button-group-large > .button { @extend .button-large; }
+
+
+//
+// Split button dropdowns
+//
+
+// Give the line between buttons some depth
+.button-group > .button + .dropdown-toggle {
+  padding-right: 8px;
+  padding-left: 8px;
+}
+.button-group > .button-lg + .dropdown-toggle {
+  padding-right: 12px;
+  padding-left: 12px;
+}
+
+// The clickable button for toggling the menu
+// Remove the gradient and set the same inset shadow as the :active state
+.button-group.open .dropdown-toggle {
+  @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
+
+  // Show no shadow for `.button-link` since it has no other button styles.
+  &.button-link {
+    @include box-shadow(none);
+  }
+}
+
+
+// Reposition the caret
+.button .caret {
+  margin-left: 0;
+}
+// Carets in other button sizes
+.button-lg .caret {
+  border-width: $caret-width-lg $caret-width-lg 0;
+  border-bottom-width: 0;
+}
+// Upside down carets for .dropup
+.dropup .button-lg .caret {
+  border-width: 0 $caret-width-lg $caret-width-lg;
+}
+
+
+
+//
+// Vertical button groups
+//
+
+.button-group-vertical {
+  > .button,
+  > .button-group,
+  > .button-group > .button {
+    display: block;
+    float: none;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  // Clear floats so dropdown menus can be properly placed
+  > .button-group {
+    @include clearfix();
+
+    > .button {
+      float: none;
+    }
+  }
+
+  > .button + .button,
+  > .button + .button-group,
+  > .button-group + .button,
+  > .button-group + .button-group {
+    margin-top: -$input-button-border-width;
+    margin-left: 0;
+  }
+}
+
+.button-group-vertical > .button {
+  &:not(:first-child):not(:last-child) {
+    border-radius: 0;
+  }
+  &:first-child:not(:last-child) {
+    border-top-right-radius: $button-border-radius;
+    @include border-bottom-radius(0);
+  }
+  &:last-child:not(:first-child) {
+    border-bottom-left-radius: $button-border-radius;
+    @include border-top-radius(0);
+  }
+}
+.button-group-vertical > .button-group:not(:first-child):not(:last-child) > .button {
+  border-radius: 0;
+}
+.button-group-vertical > .button-group:first-child:not(:last-child) {
+  > .button:last-child,
+  > .dropdown-toggle {
+    @include border-bottom-radius(0);
+  }
+}
+.button-group-vertical > .button-group:last-child:not(:first-child) > .button:first-child {
+  @include border-top-radius(0);
+}
+
+
+// Checkbox and radio options
+//
+// In order to support the browser's form validation feedback, powered by the
+// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
+// `display: none;` or `visibility: hidden;` as that also hides the popover.
+// Simply visually hiding the inputs via `opacity` would leave them clickable in
+// certain cases which is prevented by using `clip` and `pointer-events`.
+// This way, we ensure a DOM element is visible to position the popover from.
+//
+// See https://github.com/twbs/bootstrap/pull/12794 and
+// https://github.com/twbs/bootstrap/pull/14559 for more information.
+
+[data-toggle="buttons"] {
+  > .button,
+  > .button-group > .button {
+    input[type="radio"],
+    input[type="checkbox"] {
+      position: absolute;
+      clip: rect(0,0,0,0);
+      pointer-events: none;
+    }
+  }
+}

data/vendor/assets/stylesheets/on-standards/_buttons.scss

@@ -0,0 +1,241 @@
+//
+// Base styles
+//
+
+// Some buttons share the same highlight and press states.
+$button-highlight-color: button-highlight($brand-action);
+$button-press-color:     button-press($brand-action);
+
+button,
+.button {
+  outline: none;
+  &:focus,
+  &.focus {
+    outline: none;
+  }
+}
+
+.button {
+  display: inline-block;
+  font-weight: $button-font-weight;
+  text-align: center;
+  background: $gray-20;
+  white-space: nowrap;
+  vertical-align: middle;
+  user-select: none;
+  cursor: default;
+  border: $input-button-border-width solid transparent;
+  @include button-size($button-padding-y, $button-padding-x, $font-size-base, $line-height, $button-border-radius);
+  @include hover-focus {
+    text-decoration: none;
+  }
+
+  &:active,
+  &.active {
+    background-image: none;
+    outline: 0;
+  }
+
+  &.disabled,
+  &:disabled {
+    cursor: $cursor-disabled;
+    opacity: .5;
+    @include box-shadow(none);
+    @include hover {
+      box-shadow: none;
+      background-color: $gray-20;
+    }
+  }
+
+  &:focus,
+  &.focus {
+    box-shadow: inset 0 0 0 1px white;
+  }
+
+  @include hover {
+    color: white;
+    background-color: $button-highlight-color;
+    border-color: $button-highlight-color;
+    box-shadow: $box-shadow-1;
+  }
+
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    color: white;
+    background-color: $button-press-color;
+    border-color: $button-press-color;
+    background-image: none;
+    box-shadow: none;
+  }
+}
+
+// Future-proof disabling of clicks on `<a>` elements
+a.button.disabled,
+fieldset[disabled] a.button {
+  pointer-events: none;
+}
+
+
+//
+// Buttons
+//
+
+.button-primary {
+  @include button-variant($button-primary-color, $button-primary-bg, $button-primary-border);
+}
+
+.button-secondary {
+  &:focus,
+  &.focus {
+    box-shadow: inset 0 0 0 1px $button-secondary-border;
+    &:hover {
+      color: white;
+      box-shadow: $box-shadow-1;
+    }
+  }
+  &:active,
+  &.active {
+    &:focus,
+    &.focus {
+      background-color: $button-press-color;
+      border-color: $button-press-color;
+      box-shadow: none;
+      color: white;
+    }
+  }
+  @include button-variant($button-secondary-color, $button-secondary-bg, $button-secondary-border);
+}
+
+//
+// Alternate buttons
+//
+
+.button-warning {
+  @include alternate-button-variant($button-warning-color, $button-warning-bg, $button-warning-border);
+}
+.button-danger {
+  @include alternate-button-variant($button-danger-color, $button-danger-bg, $button-danger-border);
+}
+.button-inverse {
+  @include alternate-button-variant($button-inverse-color, $button-inverse-bg, $button-inverse-border);
+  &:focus,
+  &.focus {
+    color: $button-inverse-color;
+    box-shadow: inset 0 0 0 1px $button-inverse-color;
+  }
+}
+
+// Remove all backgrounds
+.button-primary-outline {
+  @include button-outline-variant($button-primary-bg);
+}
+.button-warning-outline {
+  @include button-outline-variant($button-warning-bg, $body-color);
+}
+.button-danger-outline {
+  @include button-outline-variant($button-danger-bg);
+}
+
+//
+// Link buttons
+//
+
+// Make a button look and behave like a link
+.button-link {
+  font-weight: normal;
+  color: $link-color;
+  border-radius: 0;
+  transition: none;
+  cursor: pointer;
+
+  &,
+  &:active,
+  &.active,
+  &:disabled,
+  &:hover {
+    background-color: transparent;
+    box-shadow: none;
+  }
+  &,
+  &:focus,
+  &:active {
+    border-color: transparent;
+
+  }
+  @include hover {
+    border-color: transparent;
+    color: $link-hover-color;
+  }
+  @include hover-focus {
+    color: $link-hover-color;
+    text-decoration: $link-hover-decoration;
+    background-color: transparent;
+  }
+  &:disabled {
+    @include hover-focus {
+      color: $button-link-disabled-color;
+      text-decoration: none;
+    }
+  }
+  &.text-muted,
+  &.text-danger {
+    text-decoration: underline;
+  }
+  &.text-muted:hover {
+    color: lighten($text-muted, 10%) !important;
+  }
+  &.text-danger:hover {
+    color: lighten($brand-danger, 10%) !important;
+  }
+}
+
+
+//
+// Button Sizes
+//
+.button-xsmall {
+  // line-height: ensure proper height of button next to small input
+  @include button-size($button-padding-y-xsm, $button-padding-x-xsm, $font-size-1, $line-height-sm, $button-border-radius-sm);
+}
+.button-small {
+  // line-height: ensure proper height of button next to small input
+  @include button-size($button-padding-y-sm, $button-padding-x-sm, $font-size-1, $line-height-sm, $button-border-radius-sm);
+}
+.button-large {
+  // line-height: ensure even-numbered height of button next to large input
+  @include button-size($button-padding-y-lg, $button-padding-x-lg, $font-size-3, $line-height-lg, $button-border-radius-lg);
+}
+.button-xlarge {
+  // line-height: ensure even-numbered height of button next to large input
+  @include button-size($button-padding-y-xlg, $button-padding-x-xlg, $font-size-4, $line-height-lg, $button-border-radius-lg);
+}
+.button-xxlarge {
+  // line-height: ensure even-numbered height of button next to large input
+  @include button-size($button-padding-y-xxlg, $button-padding-x-xxlg, $font-size-5, $line-height-lg, $button-border-radius-lg);
+}
+
+
+
+//
+// Block button
+//
+
+.button-block {
+  display: block;
+  width: 100%;
+}
+
+// Vertically space out multiple block buttons
+.button-block + .button-block {
+  margin-top: 5px;
+}
+
+// Specificity overrides
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+  &.button-block {
+    width: 100%;
+  }
+}