DS-2618 by maikelkoopman: complete components of social base theme

.gitignore

+# OS
+.DS_Store
+
+# Ignore bundler config
+/.bundle
+
+# Ignore the build directory
+/build
+/dist
+lib
+.publish/
+
+# Applications & Tools
+.idea
+bower_components
+config.codekit
+node_modules
+npm-debug.log
+**/*.log
+/.cache
+
+# SASS #
+.sass-cache
+*.sass-cache*
+**/sass/*.css
+*.css.map

components/00-config/_colors.scss

+$gray-base:              #000 !default;
+$gray-darker:            lighten($gray-base, 13.5%) !default; // #222
+$gray-dark:              lighten($gray-base, 20%) !default;   // #333
+$gray:                   lighten($gray-base, 33.5%) !default; // #555
+$gray-light:             #777777 !default;
+$gray-light-1:           #adadad !default;
+$gray-lighter:           #e6e6e6 !default;
+$gray-lighter-1:         #f7f7f7 !default;
+$gray-lightest:          #f3f3f3 !default;
+
+$default-color:         #4d4d4d !default;
+$brand-primary:         #29abe2 !default;
+$brand-secondary:       #1f80aa !default;
+$brand-accent:          #ffc142 !default;
+
+$brand-primary-dark:      mix(black, $brand-primary, 30%) !default;
+
+$state-success-text:             #3c763d !default;
+$state-success-bg:               #dff0d8 !default;
+$state-success-border:           darken(adjust-hue($state-success-bg, -10), 5%) !default;
+
+$state-info-text:                #31708f !default;
+$state-info-bg:                  #d9edf7 !default;
+$state-info-border:              darken(adjust-hue($state-info-bg, -10), 7%) !default;
+
+$state-warning-text:             #8a6d3b !default;
+$state-warning-bg:               #fcf8e3 !default;
+$state-warning-border:           darken(adjust-hue($state-warning-bg, -10), 5%) !default;
+
+$state-danger-text:              #a94442 !default;
+$state-danger-bg:                #f2dede !default;
+$state-danger-border:            darken(adjust-hue($state-danger-bg, -10), 5%) !default;

components/00-config/_mixins.scss

+@import "mixins/alerts";
+@import "mixins/background-variant";
+@import "mixins/buttons";
+@import "mixins/labels";
+@import "mixins/style-variant";
+@import "mixins/table-row";
+@import "mixins/text-emphasis";

components/00-config/_settings.scss

+@import 'colors';
+@import 'variables';
+@import 'mixins';

components/00-config/_variables.scss

+$border-radius-base:        10px !default;
+$border-radius-large:       12px !default;
+$border-radius-small:       8px !default;
+
+@import "variables/alerts";
+@import "variables/badges";
+@import "variables/buttons";
+@import "variables/cards";
+@import "variables/components";
+@import "variables/dropdown";
+@import "variables/labels";
+@import "variables/links";
+@import "variables/list-group";
+@import "variables/navbar";
+@import "variables/pagination";
+@import "variables/popover";
+@import "variables/tooltip";
+@import "variables/type";

components/00-config/mixins/_alerts.scss

+// Alerts
+
+@mixin alert-variant($background, $border, $text-color) {
+  background-color: $background;
+  border-color: $border;
+  color: $text-color;
+
+  hr {
+    border-top-color: darken($border, 5%);
+  }
+  .alert-link {
+    color: darken($text-color, 10%);
+  }
+}

components/00-config/mixins/_background-variant.scss

+// Contextual backgrounds
+
+// [converter] $parent hack
+@mixin bg-variant($parent, $color) {
+  #{$parent} {
+    background-color: $color;
+  }
+  a#{$parent}:hover,
+  a#{$parent}:focus {
+    background-color: darken($color, 10%);
+  }
+}

components/00-config/mixins/_buttons.scss

+// Button variants
+//
+// Easily pump out default styles, as well as :hover, :focus, :active,
+// and disabled options for all buttons
+
+@mixin button-variant($color, $background, $border) {
+  color: $color;
+  background-color: $background;
+  border-color: $border;
+  fill: $color;
+
+  &:focus,
+  &.focus {
+    color: $color;
+    background-color: darken($background, 10%);
+        border-color: darken($border, 25%);
+  }
+  &:hover {
+    color: $color;
+    background-color: darken($background, 10%);
+        border-color: darken($border, 12%);
+  }
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    color: $color;
+    background-color: darken($background, 10%);
+        border-color: darken($border, 12%);
+
+    &:hover,
+    &:focus,
+    &.focus {
+      color: $color;
+      background-color: darken($background, 17%);
+          border-color: darken($border, 25%);
+    }
+  }
+  &:active,
+  &.active,
+  .open > &.dropdown-toggle {
+    background-image: none;
+  }
+  &.disabled,
+  &[disabled],
+  fieldset[disabled] & {
+    &:hover,
+    &:focus,
+    &.focus {
+      background-color: $background;
+          border-color: $border;
+    }
+  }
+
+  .badge {
+    color: $background;
+    background-color: $color;
+  }
+}

components/00-config/mixins/_forms.scss

+// Form control focus state
+//
+// Generate a customized focus state and for any input with the specified color,
+// which defaults to the `$input-border-focus` variable.
+//
+// We highly encourage you to not customize the default value, but instead use
+// this to tweak colors on an as-needed basis. This aesthetic change is based on
+// WebKit's default styles, but applicable to a wider range of browsers. Its
+// usability and accessibility should be taken into account with any change.
+//
+// Example usage: change the default blue border and shadow to white for better
+// contrast against a dark gray background.
+@mixin form-control-focus($color: $input-border-focus) {
+  $color-rgba: rgba(red($color), green($color), blue($color), .6);
+  &:focus {
+    border-color: $color;
+    outline: 0;
+    border-bottom: 1px solid $color;
+    box-shadow: 0 2px 0 0 $color;
+  }
+}

components/00-config/mixins/_labels.scss

+// Labels
+
+@mixin label-variant($color) {
+  background-color: $color;
+
+  &[href] {
+    &:hover,
+    &:focus {
+      background-color: darken($color, 10%);
+    }
+  }
+}

components/00-config/mixins/_style-variant.scss

+// Contextual backgrounds
+
+// [converter] $parent hack
+@mixin style-variant($parent, $color, $type-color) {
+  #{$parent} {
+    background-color: $color;
+    border-color: $color;
+    color: $type-color;
+  }
+
+  a#{$parent}:hover,
+  a#{$parent}:focus {
+    background-color: darken($color, 10%);
+    border-color: darken($color, 10%);
+    color: $type-color;
+  }
+}

components/00-config/mixins/_table-row.scss

+// Tables
+
+@mixin table-row-variant($state, $background) {
+  // Exact selectors below required to override `.table-striped` and prevent
+  // inheritance to nested tables.
+  .table > thead > tr,
+  .table > tbody > tr,
+  .table > tfoot > tr {
+    > td.#{$state},
+    > th.#{$state},
+    &.#{$state} > td,
+    &.#{$state} > th {
+      background-color: $background;
+    }
+  }
+
+  // Hover states for `.table-hover`
+  // Note: this is not available for cells or rows within `thead` or `tfoot`.
+  .table-hover > tbody > tr {
+    > td.#{$state}:hover,
+    > th.#{$state}:hover,
+    &.#{$state}:hover > td,
+    &:hover > .#{$state},
+    &.#{$state}:hover > th {
+      background-color: darken($background, 5%);
+    }
+  }
+}

components/00-config/mixins/_text-emphasis.scss

+// Typography
+
+// [converter] $parent hack
+@mixin text-emphasis-variant($parent, $color) {
+  #{$parent} {
+    color: $color;
+  }
+  a#{$parent}:hover,
+  a#{$parent}:focus {
+    color: darken($color, 10%);
+  }
+}

components/00-config/variables/_alerts.scss

+$alert-border-radius:         $border-radius-base !default;
+
+$alert-success-bg:            $state-success-bg !default;
+$alert-success-text:          $state-success-text !default;
+$alert-success-border:        $state-success-border !default;
+
+$alert-info-bg:               $state-info-bg !default;
+$alert-info-text:             $state-info-text !default;
+$alert-info-border:           $state-info-border !default;
+
+$alert-warning-bg:            $state-warning-bg !default;
+$alert-warning-text:          $state-warning-text !default;
+$alert-warning-border:        $state-warning-border !default;
+
+$alert-danger-bg:             $state-danger-bg !default;
+$alert-danger-text:           $state-danger-text !default;
+$alert-danger-border:         $state-danger-border !default;

components/00-config/variables/_badges.scss

+$badge-color:                 #fff !default;
+//** Linked badge text color on hover
+$badge-link-hover-color:      #fff !default;
+$badge-bg:                    $brand-secondary !default;
+
+//** Badge text color in active nav link
+$badge-active-color:          $link-color !default;
+//** Badge background color in active nav link
+$badge-active-bg:             #fff !default;
+
+$badge-border-radius:         $font-size-small !default;

components/00-config/variables/_breadcrumb.scss

+//** Breadcrumb background color
+$breadcrumb-bg:                 transparent !default;
+
+//** Text color of current page in the breadcrumb
+$breadcrumb-active-color:        $gray !default;

components/00-config/variables/_buttons.scss

+// Styles
+$btn-default-color:              $default-color !default;
+$btn-default-bg:                 white !default;
+$btn-default-border:             $gray-light-1 !default;
+
+$btn-primary-color:              white !default;
+$btn-primary-bg:                 $brand-primary !default;
+$btn-primary-border:             $brand-primary !default;
+
+$btn-accent-color:               $gray-dark !default;
+$btn-accent-bg:                  $brand-accent !default;
+$btn-accent-border:              $brand-accent !default;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius-base:         $border-radius-base !default;
+$btn-border-radius-large:        $border-radius-large !default;
+$btn-border-radius-small:        $border-radius-small !default;

components/00-config/variables/_cards.scss

+$card-bg:                  white !default;
+$card-border-radius:       $border-radius-base !default;

components/00-config/variables/_components.scss

+$border-radius-base:        10px !default;
+$border-radius-large:       12px !default;
+$border-radius-small:       8px !default;
+
+$padding-base-vertical:      6px !default;
+$padding-base-horizontal:    12px !default;
+
+$padding-large-vertical:     10px !default;
+$padding-large-horizontal:   16px !default;
+
+$padding-small-vertical:     5px !default;
+$padding-small-horizontal:   10px !default;
+
+$padding-xs-vertical:        1px !default;
+$padding-xs-horizontal:      5px !default;
+
+//** Width of the `border` for generating carets that indicator dropdowns.
+$caret-width-base:          4px !default;
+//** Carets increase slightly in size for larger components.
+$caret-width-large:         5px !default;

components/00-config/variables/_dropdown.scss

+//** Hover color for dropdown links.
+$dropdown-link-hover-color:      darken($default-color, 5%) !default;
+//** Hover background for dropdown links.
+$dropdown-link-hover-bg:         #f5f5f5 !default;
+
+
+//** Active dropdown menu item text color.
+$dropdown-link-active-color:     #fff  !default;
+//** Active dropdown menu item background color.
+$dropdown-link-active-bg:        $brand-secondary !default;