hootstrap 0.1.0

data/assets/stylesheets/hootstrap/base/mixins/_background.scss

@@ -0,0 +1,8 @@
+// Contextual backgrounds
+
+@mixin bg-variant-hover($parent, $color) {
+  #{$parent}:hover {
+    @include transition($transition-base);
+    background-color: $color !important;
+  }
+}

data/assets/stylesheets/hootstrap/base/mixins/_button.scss

@@ -0,0 +1,42 @@
+// Button variants
+//
+// Easily pump out default styles, as well as :hover, :focus, :active,
+// and disabled options for all buttons
+
+@mixin button-variants($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%)) {
+  color: color-yiq($background);
+  background: linear-gradient(to right, $background, lighten($background, 5%));
+  background-color: $background;
+  border-color: $border;
+  @include box-shadow($btn-box-shadow);
+
+  @include hover {
+    color: color-yiq($active-background);
+    background: linear-gradient(to right, $active-background, $background);
+    background-color: $active-background;
+    border-color: $active-border;
+    // box-shadow: 0 1px 1px 0 rgba($gray-dark, 0.15);
+  }
+
+  &:focus,
+  &.focus {
+    background-color: $active-background;
+    box-shadow: 0 0 0 1px $white, 0 0 0 3px rgba($active-background, 0.25);
+  }
+
+  // Disabled comes first so active can properly restyle
+  &.disabled,
+  &:disabled {
+    background-color: $background;
+    border-color: $border;
+  }
+
+  &:active,
+  &.active,
+  .show > &.dropdown-toggle {
+    background-color: $active-background;
+    background-image: none; // Remove the gradient for the pressed/active state
+    border-color: $active-border;
+    @include box-shadow($btn-active-box-shadow);
+  }
+}

data/assets/stylesheets/hootstrap/base/mixins/_toast.scss

@@ -0,0 +1,16 @@
+@mixin toast-variant($background, $border, $color) {
+  color: $color;
+  background-color: $background;
+  border-color: $border;
+
+  .close {
+    color: $color;
+    opacity: 0.75;
+    text-shadow: none;
+
+    &:hover,
+    &:focus {
+      opacity: 1;
+    }
+  }
+}

data/assets/stylesheets/hootstrap/base/mixins/_tooltip.scss

@@ -0,0 +1,29 @@
+@mixin tooltip-arrow($color, $position: up) {
+  $degrees: 0;
+  $height: 6px;
+  $width: 18px;
+
+  @if ($position == down) {
+    $degrees: 180 18 6;
+  } @else if ($position == left) {
+    $degrees: -90 18 18;
+    $width: 6px;
+    $height: 18px;
+  } @else if ($position == right) {
+    $degrees: 90 6 6;
+    $width: 6px;
+    $height: 18px;
+  }
+
+  background: no-repeat
+    url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%22#{$width * 2}%22%20height%3D%22#{$height * 2}%22%3E%3Cpath%20fill%3D%22#{$color}%22%20transform%3D%22rotate(#{$degrees})%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E');
+  background-size: 100% auto;
+  width: $width;
+  height: $height;
+}
+
+@mixin tooltip-effects() {
+  opacity: 0;
+  pointer-events: none;
+  @include transition(all 0.18s ease-out 0.18s);
+}

data/assets/stylesheets/hootstrap/components/_alert.scss

@@ -0,0 +1,7 @@
+.alert-notice {
+  @extend .alert-success;
+}
+
+.alert-alert {
+  @extend .alert-danger;
+}

data/assets/stylesheets/hootstrap/components/_badge.scss

@@ -0,0 +1,3 @@
+.badge {
+  line-height: $badge-line-height;
+}

data/assets/stylesheets/hootstrap/components/_base.scss

@@ -0,0 +1,6 @@
+@import "hootstrap/components/alert";
+@import "hootstrap/components/badge";
+@import "hootstrap/components/button";
+@import "hootstrap/components/forms";
+@import "hootstrap/components/loader";
+@import "hootstrap/components/tooltip";

data/assets/stylesheets/hootstrap/components/_button.scss

@@ -0,0 +1,9 @@
+//
+// Base styles
+//
+
+@each $color, $value in $theme-colors {
+  .btn-#{$color} {
+    @include button-variants($value, $value);
+  }
+}

data/assets/stylesheets/hootstrap/components/_forms.scss

@@ -0,0 +1,64 @@
+//
+// Textual form controls
+//
+
+.form-control {
+  transition: all $base-duration $base-timing;
+}
+
+//
+// Target select specifically
+//
+select.form-control {
+  max-width: 100%;
+  padding-right: 24px;
+  padding-right: 8px \9;
+  background: $white
+    url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC")
+    no-repeat right 8px center;
+  background-image: none \9;
+  background-size: 8px 10px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+//
+// Form Errors and Validation
+//
+
+.form-group-error {
+  background-color: $form-group-error-bg;
+  border-radius: $form-group-error-border-radius;
+  border: 1px solid $form-group-error-border;
+  color: $form-group-error-color;
+  display: inline-block;
+  font-size: $font-size-sm;
+  margin-top: 0.15rem;
+  padding: $form-group-error-padding-y $form-group-error-padding-x;
+  position: relative;
+  z-index: 3;
+
+  &::before,
+  &::after {
+    border: solid transparent;
+    bottom: 100%;
+    content: " ";
+    height: 0;
+    left: 10px;
+    pointer-events: none;
+    position: absolute;
+    width: 0;
+  }
+
+  &::before {
+    border-bottom-color: $form-group-error-border;
+    border-width: 6px;
+    margin-left: -1px;
+  }
+
+  &::after {
+    border-bottom-color: $form-group-error-bg;
+    border-width: 5px;
+  }
+}

data/assets/stylesheets/hootstrap/components/_loader.scss

@@ -0,0 +1,27 @@
+.loader,
+.loader::after {
+  border-radius: 50%;
+  height: $loader-width;
+  width: $loader-width;
+}
+
+.loader {
+  animation: loader 0.95s infinite linear;
+  border-bottom: 0.25rem solid $loader-bg;
+  border-left: 0.25rem solid $loader-fg;
+  border-right: 0.25rem solid $loader-bg;
+  border-top: 0.25rem solid $loader-bg;
+  position: relative;
+  text-indent: -9999em;
+  transform: translateZ(0);
+}
+
+@keyframes loader {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

data/assets/stylesheets/hootstrap/components/_tooltip.scss

@@ -0,0 +1,274 @@
+// Copyright (c) 2016 Claudio Holanda
+
+// IE 11 button bugfix
+button[data-toggle="tooltip"] {
+  overflow: visible;
+}
+
+[data-toggle="tooltip"] {
+  position: relative;
+
+  // Fixing iOS Safari event issue.
+  // More info at: https://goo.gl/w8JF4W
+  cursor: pointer;
+
+  &::before,
+  &::after {
+    position: absolute;
+    z-index: 99;
+  }
+
+  &:after {
+    @include tooltip-effects();
+    background: $tooltip-bg;
+    border-radius: $border-radius;
+    color: $tooltip-color;
+    content: attr(title);
+    font-size: $font-size-sm;
+    padding: $tooltip-padding-y $tooltip-padding-x;
+    white-space: nowrap;
+  }
+
+  &:before {
+    @include tooltip-arrow($tooltip-arrow-color);
+    @include tooltip-effects();
+
+    content: '';
+  }
+
+  &:hover {
+    &:before,
+    &:after {
+      opacity: $tooltip-opacity;
+      pointer-events: auto;
+    }
+  }
+
+  &.font-awesome:after {
+    font-family: FontAwesome;
+  }
+
+  &[data-placement="top"] {
+    &:after {
+      bottom: 100%;
+      left: 50%;
+      margin-bottom: 5px + $tooltip-arrow-height;
+      transform: translate(-50%, 10px);
+      transform-origin: top;
+    }
+
+    &:before {
+      bottom: 100%;
+      left: 50%;
+      margin-bottom: 5px;
+      transform: translate(-50%, 10px);
+      transform-origin: top;
+    }
+
+    &:hover {
+      &:after {
+        transform: translate(-50%, 0);
+      }
+
+      &:before {
+        transform: translate(-50%, 0);
+      }
+    }
+  }
+
+  &[data-placement="top-left"] {
+    &:after {
+      bottom: 100%;
+      left: 0;
+      margin-bottom: 5px + $tooltip-arrow-height;
+      transform: translate(0, 10px);
+      transform-origin: top;
+    }
+
+    &:before {
+      bottom: 100%;
+      left: 5px;
+      margin-bottom: 5px;
+      transform: translate(0, 10px);
+      transform-origin: top;
+    }
+
+    &:hover {
+      &:after {
+        transform: translate(0, 0);
+      }
+
+      &:before {
+        transform: translate(0, 0);
+      }
+    }
+  }
+
+  &[data-placement="top-right"] {
+    &:after {
+      bottom: 100%;
+      right: 0;
+      margin-bottom: 5px + $tooltip-arrow-height;
+      transform: translate(0, 10px);
+      transform-origin: top;
+    }
+
+    &:before {
+      bottom: 100%;
+      right: 5px;
+      margin-bottom: 5px;
+      transform: translate(0, 10px);
+      transform-origin: top;
+    }
+
+    &:hover {
+      &:after {
+        transform: translate(0, 0);
+      }
+
+      &:before {
+        transform: translate(0, 0);
+      }
+    }
+  }
+
+  &[data-placement='bottom'] {
+    &:after {
+      left: 50%;
+      margin-top: 5px + $tooltip-arrow-height;
+      top: 100%;
+      transform: translate(-50%, -10px);
+    }
+
+    &:before {
+      @include tooltip-arrow($tooltip-arrow-color, 'down');
+
+      left: 50%;
+      margin-top: 5px;
+      top: 100%;
+      transform: translate(-50%, -10px);
+    }
+
+    &:hover {
+      &:after {
+        transform: translate(-50%, 0);
+      }
+
+      &:before {
+        transform: translate(-50%, 0);
+      }
+    }
+  }
+
+  &[data-placement='bottom-left'] {
+    &:after {
+      left: 0;
+      margin-top: 5px + $tooltip-arrow-height;
+      top: 100%;
+      transform: translate(0, -10px);
+    }
+
+    &:before {
+      @include tooltip-arrow($tooltip-arrow-color, 'down');
+
+      left: 5px;
+      margin-top: 5px;
+      top: 100%;
+      transform: translate(0, -10px);
+    }
+
+    &:hover {
+      &:after {
+        transform: translate(0, 0);
+      }
+
+      &:before {
+        transform: translate(0, 0);
+      }
+    }
+  }
+
+  &[data-placement='bottom-right'] {
+    &:after {
+      right: 0;
+      margin-top: 5px + $tooltip-arrow-height;
+      top: 100%;
+      transform: translate(0, -10px);
+    }
+
+    &:before {
+      @include tooltip-arrow($tooltip-arrow-color, 'down');
+
+      right: 5px;
+      margin-top: 5px;
+      top: 100%;
+      transform: translate(0, -10px);
+    }
+
+    &:hover {
+      &:after {
+        transform: translate(0, 0);
+      }
+
+      &:before {
+        transform: translate(0, 0);
+      }
+    }
+  }
+
+  &[data-placement='left'] {
+    &:after {
+      margin-right: 5px + $tooltip-arrow-height;
+      right: 100%;
+      top: 50%;
+      transform: translate(10px, -50%);
+    }
+
+    &:before {
+      @include tooltip-arrow($tooltip-arrow-color, 'left');
+
+      margin-right: 5px;
+      right: 100%;
+      top: 50%;
+      transform: translate(10px, -50%);
+    }
+
+    &:hover {
+      &:after {
+        transform: translate(0, -50%);
+      }
+
+      &:before {
+        transform: translate(0, -50%);
+      }
+    }
+  }
+
+  &[data-placement='right'] {
+    &:after {
+      left: 100%;
+      margin-left: 5px + $tooltip-arrow-height;
+      top: 50%;
+      transform: translate(-10px, -50%);
+    }
+
+    &:before {
+      @include tooltip-arrow($tooltip-arrow-color, 'right');
+
+      left: 100%;
+      margin-left: 5px;
+      top: 50%;
+      transform: translate(-10px, -50%);
+    }
+
+    &:hover {
+      &:after {
+        transform: translate(0, -50%);
+      }
+
+      &:before {
+        transform: translate(0, -50%);
+      }
+    }
+  }
+}

data/assets/stylesheets/hootstrap/patterns/_base.scss

@@ -0,0 +1,5 @@
+@import "hootstrap/patterns/card";
+@import "hootstrap/patterns/list-group";
+@import "hootstrap/patterns/navbar";
+@import "hootstrap/patterns/search";
+@import "hootstrap/patterns/toast";

data/assets/stylesheets/hootstrap/patterns/_card.scss

@@ -0,0 +1,8 @@
+//
+// Base styles
+//
+
+.card {
+  border: none;
+  box-shadow: $card-box-shadow;
+}

data/assets/stylesheets/hootstrap/patterns/_list-group.scss

@@ -0,0 +1,8 @@
+.list-group-flush-modal > .list-group-item:first-child {
+  border-top: 0;
+}
+
+.list-group-flush-modal > .list-group-item:last-child {
+  border-bottom-left-radius: $border-radius;
+  border-bottom-right-radius: $border-radius;
+}

data/assets/stylesheets/hootstrap/patterns/_navbar.scss

@@ -0,0 +1,3 @@
+.navbar {
+  box-shadow: $navbar-box-shadow;
+}

data/assets/stylesheets/hootstrap/patterns/_search.scss

@@ -0,0 +1,45 @@
+.search-group {
+  display: flex;
+  flex: 100%;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+
+  .search-group-input {
+    display: inline-block;
+    flex-grow: 1;
+    vertical-align: middle;
+    width: auto;
+  }
+
+  .search-group-button {
+    margin-left: 1rem;
+  }
+
+  @include media-breakpoint-up(lg) {
+    .search-group-button {
+      min-width: 130px;
+    }
+  }
+
+  @include media-breakpoint-down(md) {
+    // Display inputs as blocks.
+    .search-group-input {
+      display: block;
+      margin: 0 0 0.5rem !important;
+      width: 100%;
+    }
+
+    // Split buttons (submit, clear) into row with each
+    // at 50%.
+    .search-group-button,
+    .btn:not(.search-group-button) {
+      flex-grow: 1;
+      margin-left: 0 !important;
+    }
+
+    .btn:not(.search-group-button) {
+      margin-right: 0.5rem !important;
+    }
+  }
+}

data/assets/stylesheets/hootstrap/patterns/_toast.scss

@@ -0,0 +1,34 @@
+.toast-container {
+  position: fixed;
+  left: calc(50% - #{$toast-width / 2});
+  top: 1rem;
+  width: $toast-width;
+  z-index: 999999;
+
+  &[aria-hidden="true"] {
+    visibility: hidden;
+  }
+}
+
+.toast {
+  @include border-radius($toast-border-radius);
+  border: $toast-border-width solid transparent;
+  margin-left: auto;
+  margin-right: auto;
+  padding: $toast-padding-y $toast-padding-x;
+  width: $toast-width;
+
+  .close {
+    margin-left: $spacer / 4;
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .toast-#{$color} {
+    @include toast-variant(
+      theme-color-level($color, -10),
+      theme-color-level($color, -9),
+      theme-color-level($color, 6)
+    );
+  }
+}

data/assets/stylesheets/hootstrap/reset/_base.scss

@@ -0,0 +1 @@
+@import "hootstrap/reset/html";

data/assets/stylesheets/hootstrap/reset/_html.scss

@@ -0,0 +1,4 @@
+html {
+  position: relative;
+  min-height: 100%;
+}

data/assets/stylesheets/hootstrap/utils/_background.scss

@@ -0,0 +1,3 @@
+@each $color, $value in $theme-colors {
+  @include bg-variant-hover(".bg-#{$color}-hover", $value);
+}

data/assets/stylesheets/hootstrap/utils/_base.scss

@@ -0,0 +1,5 @@
+@import "hootstrap/utils/background";
+@import "hootstrap/utils/flex";
+@import "hootstrap/utils/opacity";
+@import "hootstrap/utils/sizing";
+@import "hootstrap/utils/typography";

data/assets/stylesheets/hootstrap/utils/_flex.scss

@@ -0,0 +1,3 @@
+.flex-grow {
+  flex: 1;
+}

data/assets/stylesheets/hootstrap/utils/_opacity.scss

@@ -0,0 +1,3 @@
+.o-75 {
+  opacity: 0.75;
+}

data/assets/stylesheets/hootstrap/utils/_sizing.scss

@@ -0,0 +1,16 @@
+//
+// Sizing at breakpoints
+//
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-down($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    @each $prop, $abbrev in (width: w, height: h) {
+      @each $size, $length in $sizes {
+        .#{$abbrev}#{$infix}-#{$size} {
+          #{$prop}: $length !important;
+        }
+      }
+    }
+  }
+}