vbax-becky_thatcher 0.1.0

data/lib/vbax/sass/becky_thatcher/bootstrap/utilities/_spacing.scss

@@ -0,0 +1,51 @@
+// stylelint-disable declaration-no-important
+
+// Margin and Padding
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    @each $prop, $abbrev in (margin: m, padding: p) {
+      @each $size, $length in $spacers {
+
+        .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
+        .#{$abbrev}t#{$infix}-#{$size},
+        .#{$abbrev}y#{$infix}-#{$size} {
+          #{$prop}-top: $length !important;
+        }
+        .#{$abbrev}r#{$infix}-#{$size},
+        .#{$abbrev}x#{$infix}-#{$size} {
+          #{$prop}-right: $length !important;
+        }
+        .#{$abbrev}b#{$infix}-#{$size},
+        .#{$abbrev}y#{$infix}-#{$size} {
+          #{$prop}-bottom: $length !important;
+        }
+        .#{$abbrev}l#{$infix}-#{$size},
+        .#{$abbrev}x#{$infix}-#{$size} {
+          #{$prop}-left: $length !important;
+        }
+      }
+    }
+
+    // Some special margin utils
+    .m#{$infix}-auto { margin: auto !important; }
+    .mt#{$infix}-auto,
+    .my#{$infix}-auto {
+      margin-top: auto !important;
+    }
+    .mr#{$infix}-auto,
+    .mx#{$infix}-auto {
+      margin-right: auto !important;
+    }
+    .mb#{$infix}-auto,
+    .my#{$infix}-auto {
+      margin-bottom: auto !important;
+    }
+    .ml#{$infix}-auto,
+    .mx#{$infix}-auto {
+      margin-left: auto !important;
+    }
+  }
+}

data/lib/vbax/sass/becky_thatcher/bootstrap/utilities/_text.scss

@@ -0,0 +1,58 @@
+// stylelint-disable declaration-no-important
+
+//
+// Text
+//
+
+.text-monospace { font-family: $font-family-monospace; }
+
+// Alignment
+
+.text-justify  { text-align: justify !important; }
+.text-nowrap   { white-space: nowrap !important; }
+.text-truncate { @include text-truncate; }
+
+// Responsive alignment
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .text#{$infix}-left   { text-align: left !important; }
+    .text#{$infix}-right  { text-align: right !important; }
+    .text#{$infix}-center { text-align: center !important; }
+  }
+}
+
+// Transformation
+
+.text-lowercase  { text-transform: lowercase !important; }
+.text-uppercase  { text-transform: uppercase !important; }
+.text-capitalize { text-transform: capitalize !important; }
+
+// Weight and italics
+
+.font-weight-light  { font-weight: $font-weight-light !important; }
+.font-weight-normal { font-weight: $font-weight-normal !important; }
+.font-weight-bold   { font-weight: $font-weight-bold !important; }
+.font-italic        { font-style: italic !important; }
+
+// Contextual colors
+
+.text-white { color: $white !important; }
+
+@each $color, $value in $theme-colors {
+  @include text-emphasis-variant(".text-#{$color}", $value);
+}
+
+.text-body { color: $body-color !important; }
+.text-muted { color: $text-muted !important; }
+
+.text-black-50 { color: rgba($black, .5) !important; }
+.text-white-50 { color: rgba($white, .5) !important; }
+
+// Misc
+
+.text-hide {
+  @include text-hide($ignore-warning: true);
+}

data/lib/vbax/sass/becky_thatcher/bootstrap/utilities/_visibility.scss

@@ -0,0 +1,11 @@
+//
+// Visibility utilities
+//
+
+.visible {
+  @include invisible(visible);
+}
+
+.invisible {
+  @include invisible(hidden);
+}

data/lib/vbax/sass/becky_thatcher/custom/_alerts.scss

@@ -0,0 +1,89 @@
+.alert{
+    border: 0;
+    color: $white;
+
+    .alert-link{
+      color: $white;
+    }
+
+    &.alert-success{
+      background-color: darken($success, 10%);
+    }
+
+    i.fa,
+    i.tim-icons{
+        font-size: $font-paragraph;
+    }
+
+    .close{
+        color: $white;
+        opacity: .9;
+        text-shadow: none;
+        line-height: 0;
+        outline: 0;
+    }
+
+    span[data-notify="icon"]{
+      font-size: 22px;
+      display: block;
+      left: 19px;
+      position: absolute;
+      top: 50%;
+      margin-top: -11px;
+    }
+
+    button.close{
+      position: absolute;
+      right: 15px;
+      top: 50%;
+      margin-top: -13px;
+      width: 25px;
+      height: 25px;
+      padding: 3px;
+    }
+
+    .close ~ span{
+        display: block;
+        max-width: 89%;
+    }
+
+    &.alert-with-icon{
+        padding-left: 65px;
+    }
+}
+
+.alert-dismissible {
+    .close {
+        top: 50%;
+        right: $alert-padding-x;
+        padding: 0;
+        transform: translateY(-50%);
+        color: rgba($white, .6);
+        opacity: 1;
+
+        &:hover,
+        &:focus {
+            color: rgba($white, .9);
+            opacity: 1 !important;
+        }
+
+        @include media-breakpoint-down(xs) {
+            top: 1rem;
+            right: .5rem;
+        }
+
+        &>span:not(.sr-only) {
+            font-size: 1.5rem;
+            background-color: transparent;
+            color: rgba($white, .6);
+        }
+
+        &:hover,
+        &:focus {
+            &>span:not(.sr-only) {
+                background-color: transparent;
+                color: rgba($white, .9);
+            }
+        }
+    }
+}

data/lib/vbax/sass/becky_thatcher/custom/_avatars.scss

@@ -0,0 +1,51 @@
+.avatar {
+	color: $white;
+	background-color: $gray-500;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	font-size: $font-paragraph;
+	border-radius: 50%;
+	height: 48px;
+	width: 48px;
+}
+
+.avatar img {
+	width: 100%;
+	border-radius: 50%;
+}
+
+.avatar + .avatar-content {
+	display: inline-block;
+	margin-left: .75rem;
+}
+.avatar-lg {
+	width: 58px;
+	height: 58px;
+	font-size: $font-size-sm;
+}
+
+.avatar-sm {
+	width: 38px;
+	height: 38px;
+	font-size: $font-size-sm;
+}
+
+// Overlapped avatars
+
+.avatar-group {
+	.avatar {
+		position: relative;
+		z-index: 2;
+		border: 2px solid $card-bg;
+
+		&:hover {
+			z-index: 3;
+		}
+	}
+
+	.avatar + .avatar {
+		margin-left: -1rem;
+
+	}
+}

data/lib/vbax/sass/becky_thatcher/custom/_badge.scss

@@ -0,0 +1,25 @@
+/*           badges             */
+.badge{
+    text-transform: uppercase;
+    line-height: 12px;
+    border: none;
+    text-decoration: none;
+    margin-bottom: 5px;
+
+    &:hover,
+    &:focus{
+      text-decoration: none;
+    }
+}
+
+.badge-icon{
+  padding: 0.4em 0.55em;
+
+  i {
+     font-size: 0.8em;
+  }
+}
+
+.badge-success{
+    @include badge-variant(darken($success,10%));
+}

data/lib/vbax/sass/becky_thatcher/custom/_buttons.scss

@@ -0,0 +1,281 @@
+.btn,
+.navbar .navbar-nav > a.btn{
+    border-width: $border-thick;
+    border: none;
+    position: relative;
+    overflow: hidden;
+    margin:4px 1px;
+    border-radius: $border-radius-lg;
+    cursor: pointer;
+
+    @include btn-styles($default, $default-states);
+
+    &:hover,
+    &:focus{
+        @include opacity(1);
+        outline: 0 !important;
+    }
+    &:active,
+    &.active,
+    .open > &.dropdown-toggle {
+         @include box-shadow(none);
+         outline: 0 !important;
+    }
+
+    .badge{
+      margin: 0;
+    }
+
+    &.btn-icon {
+        // see above for color variations
+        height: $icon-size-regular;
+        min-width: $icon-size-regular;
+        width: $icon-size-regular;
+        padding: 0;
+        font-size: $icon-font-size-regular;
+        overflow: hidden;
+        position: relative;
+        line-height: normal;
+
+        &.btn-simple{
+            padding: 0;
+        }
+
+        &.btn-sm{
+            height: $icon-size-sm;
+            min-width: $icon-size-sm;
+            width: $icon-size-sm;
+
+            .fa,
+            .far,
+            .fas,
+            .tim-icons{
+                font-size: $icon-font-size-sm;
+            }
+        }
+
+        &.btn-lg{
+            height: $icon-size-lg;
+            min-width: $icon-size-lg;
+            width: $icon-size-lg;
+
+            .fa,
+            .far,
+            .fas,
+            .tim-icons{
+                font-size: $icon-font-size-lg;
+            }
+        }
+
+        &:not(.btn-footer) .tim-icons,
+        &:not(.btn-footer) .fa,
+        &:not(.btn-footer) .far,
+        &:not(.btn-footer) .fas{
+            position: absolute;
+            font-size: 1em;
+            top: 50%;
+            left: 50%;
+            transform: translate(-12px, -12px);
+            line-height: 1.5626rem;
+            width: 24px;
+        }
+
+    }
+
+    &:not(.btn-icon) .tim-icons{
+        position: relative;
+        top: 1px;
+    }
+
+    span{
+      position: relative;
+      display: block;
+    }
+
+  &.btn-link.dropdown-toggle {
+    color: $dark-gray;
+  }
+
+  &.dropdown-toggle:after {
+    margin-left: 30px !important;
+  }
+}
+
+// Apply the mixin to the buttons
+// .btn-default { @include btn-styles($default-color, $default-states-color); }
+.btn-primary { @include btn-styles($primary, $primary-states);
+
+              }
+.btn-success { @include btn-styles($success, $success-states);
+
+              }
+.btn-info    { @include btn-styles($info, $info-states);
+
+              }
+.btn-warning { @include btn-styles($warning, $warning-states);
+                &:not(:disabled):not(.disabled):active{
+                  color: $white;
+                }
+              }
+.btn-danger  { @include btn-styles($danger, $danger-states);
+
+              }
+.btn-neutral { @include btn-styles($white, $white); }
+
+.btn{
+     &:disabled,
+     &[disabled],
+     &.disabled{
+        @include opacity(.5);
+        pointer-events: none;
+    }
+}
+.btn-simple{
+    border: $border;
+    border-color: $default;
+    box-shadow: none;
+    padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1;
+    background-color: $transparent-bg;
+}
+
+.btn-simple,
+.btn-link{
+    &.disabled,
+    &:disabled,
+    &[disabled],
+    fieldset[disabled] & {
+        &,
+        &:hover,
+        &:focus,
+        &.focus,
+        &:active,
+        &.active {
+            background: $transparent-bg;
+        }
+    }
+}
+
+.btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active{
+  box-shadow: 2px 2px 6px rgba(0,0,0,.4);
+}
+.btn-link{
+    border: $none;
+    box-shadow: none;
+    padding: $padding-base-vertical $padding-base-horizontal;
+    background: $transparent-bg;
+    color: $gray-300;
+    font-weight: $font-weight-bold;
+
+  &:hover {
+    box-shadow: none !important;
+    transform: none !important;
+  }
+}
+
+.btn-lg{
+   @include btn-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-base, $border-radius-lg);
+}
+.btn-sm{
+    @include btn-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-base, $border-radius-sm);
+}
+
+.btn-wd {
+    min-width: 140px;
+}
+.btn-group.select{
+    width: 100%;
+}
+
+.btn-group {
+  .btn.active {
+    box-shadow: 2px 2px 6px rgba(0,0,0,.4);
+    transform: translateY(-1px);
+    -webkit-transform: translateY(-1px);
+  }
+
+  label.btn.active {
+    transform: translateY(0);
+    -webkit-transform: translateY(0);
+  }
+}
+
+
+.btn-group.select .btn{
+    text-align: left;
+}
+.btn-group.select .caret{
+    position: absolute;
+    top: 50%;
+    margin-top: -1px;
+    right: 8px;
+}
+
+.btn-round{
+    border-width: $border-thin;
+    border-radius: $btn-round-radius;
+
+    &.btn-simple{
+        padding: $padding-btn-vertical - 1  $padding-round-horizontal - 1;
+    }
+}
+
+.no-caret {
+  &.dropdown-toggle::after {
+    display: none;
+  }
+}
+
+.btn{
+  // social buttons
+  &.btn-facebook {
+    @include social-buttons-color($facebook, $facebook-states);
+  }
+  &.btn-twitter {
+    @include social-buttons-color($twitter, $twitter-states);
+  }
+  &.btn-pinterest {
+    @include social-buttons-color($pinterest, $pinterest-states);
+  }
+  &.btn-google {
+    @include social-buttons-color($google-plus, $google-plus-states);
+  }
+  &.btn-linkedin {
+    @include social-buttons-color($linkedin, $linkedin-states);
+  }
+  &.btn-dribbble {
+    @include social-buttons-color($dribbble, $dribbble-states);
+  }
+  &.btn-github {
+    @include social-buttons-color($github, $github-states);
+  }
+  &.btn-youtube {
+    @include social-buttons-color($youtube, $youtube-states);
+  }
+  &.btn-instagram {
+    @include social-buttons-color($instagram, $instagram-states);
+  }
+  &.btn-reddit {
+    @include social-buttons-color($reddit, $reddit-states);
+  }
+  &.btn-tumblr {
+    @include social-buttons-color($tumblr, $tumblr-states);
+  }
+  &.btn-behance {
+    @include social-buttons-color($behance, $behance-states);
+  }
+}
+
+.btn-secondary:not(:disabled):not(.disabled):active,
+.btn-secondary:not(:disabled):not(.disabled).active,
+.show > .btn-secondary.dropdown-toggle {
+    color: $white;
+}
+
+
+
+@include media-breakpoint-down(md) {
+  .btn-group .btn {
+    padding-left: $padding-round-horizontal;
+    padding-right: $padding-round-horizontal;
+  }
+}