Add files via upload

src/scss/utilities/_alert.scss

@@ -0,0 +1,53 @@
+//
+// Base styles
+//
+
+.alert {
+  padding: $alert-padding-y $alert-padding-x;
+  margin-bottom: $alert-margin-bottom;
+  border: none;
+  @include border-radius($alert-border-radius);
+}
+
+// Provide class for links that match alerts
+.alert-link {
+  font-weight: $alert-link-font-weight;
+}
+
+
+// Dismissible alerts
+.alert-dismissible {
+  .close {
+    top: 0;
+    right: 0;
+    padding: $alert-padding-y $alert-padding-x;
+    @include transition($transition-base);
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+
+
+// Alternate styles
+// Override alert theme colors without mixin.
+@each $color, $value in $theme-colors {
+  .alert-#{$color} {
+    color: lighten($value, 48%);
+    background-color: $value;
+
+    .alert-link {
+      color: lighten($value, 48%);
+    }
+
+    // Exception for alerts with a light background.
+    @if $color == "light" {
+      color: color-yiq($value);
+
+      .alert-link {
+        color: color-yiq($value);
+      }
+    }
+  }
+}

src/scss/utilities/_badge.scss

@@ -0,0 +1,49 @@
+// Base class
+//
+// Requires one of the contextual, color modifier classes for `color` and
+// `background-color`.
+
+.badge {
+  padding: $badge-padding-y $badge-padding-x;
+  font-size: $badge-font-size;
+  font-weight: $badge-font-weight;
+  font-family: $badge-font-family;
+  color: $badge-color;
+
+  @include border-radius($badge-border-radius);
+}
+
+// Badge anchor transitions
+a.badge {
+  @include transition($transition-base);
+}
+
+// Pill badges
+.badge-pill {
+  padding-right: $badge-pill-padding-x;
+  padding-left: $badge-pill-padding-x;
+  @include border-radius($badge-pill-border-radius);
+}
+
+// Squared badges
+.badge-squared {
+  @include border-radius(0);
+}
+
+// Contextual Colors
+@each $color, $value in $theme-colors {
+  .badge-#{$color} {
+    @include badge-variant($value);
+  }
+
+  .badge-outline-#{$color} {
+    background: none;
+    border: 1px solid $value;
+    color: $value;
+
+    // Fix light outlined badges
+    @if ( $value == theme-color("light") ) {
+      color: color-yiq($value);
+    }
+  }
+}

src/scss/utilities/_button-group.scss

@@ -0,0 +1,90 @@
+// stylelint-disable selector-no-qualifying-type
+
+// Make the div behave like a button
+.btn-group,
+.btn-group-vertical {
+  // Prevent double borders when buttons are next to each other
+  .btn + .btn,
+  .btn + .btn-group,
+  .btn-group + .btn,
+  .btn-group + .btn-group {
+    margin-left: -$btn-border-width;
+  }
+}
+
+.btn-group {
+  // Reset rounded corners
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .btn {
+    @include border-right-radius(0);
+  }
+
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) > .btn {
+    @include border-left-radius(0);
+  }
+}
+
+// Sizing
+//
+// Remix the default button sizing classes into new ones for easier manipulation.
+
+.btn-group-sm > .btn { @extend .btn-sm; }
+.btn-group-lg > .btn { @extend .btn-lg; }
+
+
+//
+// Split button dropdowns
+//
+
+.dropdown-toggle-split {
+  padding-right: $btn-padding-x * .75;
+  padding-left: $btn-padding-x * .75;
+}
+
+.btn-sm + .dropdown-toggle-split {
+  padding-right: $btn-padding-x-sm * .75;
+  padding-left: $btn-padding-x-sm * .75;
+}
+
+.btn-lg + .dropdown-toggle-split {
+  padding-right: $btn-padding-x-lg * .75;
+  padding-left: $btn-padding-x-lg * .75;
+}
+
+
+// The clickable button for toggling the menu
+// Set the same inset shadow as the :active state
+.btn-group.show .dropdown-toggle {
+  @include box-shadow($btn-active-box-shadow);
+
+  // Show no shadow for `.btn-link` since it has no other button styles.
+  &.btn-link {
+    @include box-shadow(none);
+  }
+}
+
+
+//
+// Vertical button groups
+//
+
+.btn-group-vertical {
+  > .btn + .btn,
+  > .btn + .btn-group,
+  > .btn-group + .btn,
+  > .btn-group + .btn-group {
+    margin-top: -$btn-border-width;
+  }
+
+  // Reset rounded corners
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .btn {
+    @include border-bottom-radius(0);
+  }
+
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) > .btn {
+    @include border-top-radius(0);
+  }
+}

src/scss/utilities/_buttons.scss

@@ -0,0 +1,158 @@
+// scss-lint:disable QualifyingElement
+
+//
+// Base styles
+//
+
+.btn {
+  font-weight: $btn-font-weight;
+  font-family: $btn-font-family;
+  border: $input-btn-border-width solid transparent;
+
+  @include button-size(
+    $btn-padding-y,
+    $btn-padding-x,
+    $btn-font-size,
+    $input-btn-line-height,
+    $btn-border-radius
+  );
+
+  @include transition($btn-transition);
+
+  &:hover,
+  &.hover {
+    cursor: pointer;
+  }
+
+  &:focus,
+  &.focus {
+    @include box-shadow(none);
+  }
+
+  &:not([disabled]):not(.disabled):active,
+  &:not([disabled]):not(.disabled).active {
+    background-image: none;
+    @include box-shadow(none);
+  }
+
+  //
+  // Class modifiers
+  //
+
+  &.btn-squared {
+    border-radius: 0;
+  }
+
+  &.btn-pill {
+    border-radius: $btn-pill-border-radius;
+  }
+}
+
+//
+// Alternate buttons
+//
+
+@each $color, $value in $theme-colors {
+  .btn-#{$color} {
+    @include button-variant($value);
+  }
+}
+
+// White buttons
+.btn-white {
+  @include button-variant($white);
+}
+
+// Black buttons
+.btn-black {
+  @include button-variant($black);
+}
+
+// Outlined default buttons
+@each $color, $value in $theme-colors {
+  .btn-outline-#{$color} {
+    @include button-outline-variant($value);
+  }
+}
+
+// White outline buttons
+.btn-outline-white {
+  @include button-outline-variant($white);
+  color: $white;
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active {
+    color: $black;
+  }
+}
+
+// Black outline buttons
+.btn-outline-black {
+  @include button-outline-variant($black);
+  color: $black;
+
+  &:not(:disabled):not(.disabled):active,
+  &:not(:disabled):not(.disabled).active {
+    color: $white;
+  }
+}
+
+
+//
+// Link buttons
+//
+
+// Make a button look and behave like a link
+.btn-link {
+  font-weight: $font-weight-normal;
+  color: $link-color;
+
+  @include hover {
+    color: $link-hover-color;
+    text-decoration: $link-hover-decoration;
+  }
+
+  &:focus,
+  &.focus {
+    text-decoration: $link-hover-decoration;
+  }
+
+  &:disabled {
+    color: $btn-link-disabled-color;
+  }
+}
+
+
+//
+// Button Sizes
+//
+
+.btn-lg {
+  @include button-size(
+    $btn-padding-y-lg,
+    $btn-padding-x-lg,
+    $btn-font-size-lg,
+    $btn-line-height-lg,
+    $btn-border-radius-lg
+  );
+}
+
+.btn-sm {
+  @include button-size(
+    $btn-padding-y-sm,
+    $btn-padding-x-sm,
+    $btn-font-size-sm,
+    $btn-line-height-sm,
+    $btn-border-radius-sm
+  );
+}
+
+
+//
+// Block button
+//
+
+// Vertically space out multiple block buttons
+.btn-block + .btn-block {
+  margin-top: $btn-block-spacing-y;
+}