vbax-becky_thatcher 0.1.0

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

@@ -0,0 +1,257 @@
+// Modals
+// Design element Dialogs
+// --------------------------------------------------
+.modal-content {
+  border: 0;
+
+  // Modal header
+  // Top section of the modal w/ title and dismiss
+
+  .modal-header {
+    border-bottom: none;
+
+    & button {
+        position: absolute;
+        right: 27px;
+        top: 24px;
+        outline: 0;
+        padding: 1rem;
+        margin: -1rem -1rem -1rem auto;
+    }
+    .title{
+        color: $black;
+        margin-top: 5px;
+        margin-bottom: 0;
+    }
+
+    .modal-title{
+      color: $black;
+    }
+
+    i.tim-icons {
+      font-size: 16px;
+    }
+  }
+
+
+  // Modal body
+  // Where all modal content resides (sibling of .modal-header and .modal-footer)
+  .modal-body {
+    line-height: 1.9;
+
+    p{
+      color: $black;
+    }
+  }
+  // Footer (for actions)
+  .modal-footer {
+    border-top: 0;
+    -webkit-justify-content: space-between; /* Safari 6.1+ */
+    justify-content: space-between;
+
+    button {
+      margin: 0;
+      padding-left: 16px;
+      padding-right: 16px;
+      width: auto;
+
+      &.pull-left {
+        padding-left: 5px;
+        padding-right: 5px;
+        position: relative;
+        left: -5px;
+      }
+    }
+
+  }
+  .modal-body + .modal-footer {
+    padding-top: 0;
+  }
+}
+.modal-backdrop {
+  background: rgba(0,0,0,0.3);
+}
+
+.modal{
+  .modal-login{
+    max-width: 320px;
+
+    .card-login{
+        .logo-container{
+            width: 65px;
+            margin-bottom: 38px;
+            margin-top: 27px;
+        }
+    }
+  }
+
+    &.modal-mini{
+        p{
+            text-align: center;
+        }
+
+        .modal-dialog{
+            max-width: 255px;
+            margin: 0 auto;
+
+
+        }
+
+        &.show .modal-dialog{
+            -webkit-transform: translate(0,30%);
+            -o-transform: translate(0,30%);
+            transform: translate(0,30%);
+        }
+
+
+        .modal-footer{
+            button{
+                text-transform: uppercase;
+                color: $white;
+
+                &:first-child{
+                    opacity: .5;
+                }
+            }
+        }
+    }
+
+    .modal-profile{
+        width: 70px;
+        height: 70px;
+        background-color: $white;
+        border-radius: 50%;
+        text-align: center;
+        line-height: 5.7;
+        box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.3);
+
+        i{
+            color: $primary;
+            font-size: 21px;
+            margin-top: -10px;
+        }
+
+        &[class*="modal-profile-"]{
+            i{
+                color: $white;
+            }
+        }
+
+        &.modal-profile-primary{
+            background-color: $primary;
+        }
+
+        &.modal-profile-danger{
+            background-color: $danger;
+        }
+
+        &.modal-profile-warning{
+            background-color: $warning;
+        }
+        &.modal-profile-success{
+            background-color: $success;
+        }
+
+        &.modal-profile-info{
+            background-color: $info;
+        }
+    }
+
+    &.modal-default{
+        @include modal-colors($white, $black);
+    }
+
+    &.modal-primary{
+        @include modal-colors($primary, $white);
+    }
+
+    &.modal-danger{
+        @include modal-colors($danger, $white);
+    }
+
+    &.modal-warning{
+        @include modal-colors($warning, $white);
+    }
+
+    &.modal-success{
+        @include modal-colors($success, $white);
+    }
+
+    &.modal-info{
+        @include modal-colors($info, $white);
+    }
+
+    .modal-header .close{
+        color: $danger;
+        text-shadow: none;
+
+        &:hover,
+        &:focus{
+            opacity: 1;
+        }
+    }
+
+    &.modal-black{
+      .modal-content{
+        background: linear-gradient(to bottom, $black 0%, $black-states 100%);
+        color: rgba($white, 0.8);
+        .modal-header{
+          .modal-title, .title{
+            color: rgba($white, 0.9);
+          }
+        }
+        .modal-body{
+          p{
+            color: rgba($white, 0.8);
+          }
+        }
+      }
+      h1, h2, h3, h4, h5, h6, p{
+        color: $white;
+      }
+    }
+}
+
+.modal-search{
+  .modal-dialog{
+    margin: 20px auto;
+    max-width: 650px;
+    input{
+      border: none;
+      font-size: 17px;
+      font-weight: 100;
+    }
+    span{
+      font-size: 35px;
+      color: $search-gray;
+    }
+  }
+  .modal-content{
+    .modal-header{
+      padding: 24px;
+    }
+  }
+
+  .modal-header .close{
+    color: $dark-background;
+    top: 30px !important;
+  }
+
+  .modal-footer{
+    border-top: 2px solid #f9f9f9;
+    margin: 0px 25px 20px;
+  }
+}
+
+
+@include media-breakpoint-down(xs) {
+  .modal {
+    &.show .modal-dialog {
+      transform: translateY(10%);
+
+      &.modal-notice {
+        transform: translateY(3%);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,85 @@
+.nav-link {
+    color: $nav-link-color;
+
+    &:hover {
+        color: theme-color("primary");
+    }
+}
+
+// Pills
+
+.nav-pills {
+
+    .nav-link {
+    	  padding: $nav-pills-padding-y $nav-pills-padding-x;
+        color: $nav-pills-link-color;
+        font-weight: 500;
+        background-color: $nav-pills-bg;
+        transition: $transition-base;
+
+        &:hover {
+        	color: $nav-pills-link-hover-color;
+        }
+    }
+
+    .nav-link.active,
+    .show > .nav-link {
+        color: $nav-pills-link-active-color;
+        background-color: $nav-pills-link-active-bg;
+    }
+
+
+}
+
+@include media-breakpoint-down(sm) {
+    .nav-pills:not(.nav-pills-circle) {
+        .nav-item {
+            padding-right: 0;
+        }
+    }
+}
+
+// Nav pills circle
+
+.nav-pills-circle {
+    .nav-link {
+        text-align: center;
+        height: 60px;
+        width: 60px;
+        padding: 0;
+        line-height: 60px;
+        border-radius: 50%;
+    }
+
+    .nav-link-icon {
+        i, svg {
+            font-size: 1rem;
+        }
+    }
+}
+
+// Nav wrapper
+.nav-wrapper {
+    padding: 1rem 0;
+    @include border-top-radius($card-border-radius);
+
+    + .card {
+        @include border-top-radius(0);
+        @include border-bottom-radius($card-border-radius);
+    }
+}
+
+
+@include media-breakpoint-down(sm) {
+  .nav-tabs {
+    display: inline-block;
+    width: 100%;
+    padding-left: 100px;
+    padding-right: 100px;
+    text-align: center;
+
+    .nav-item > .nav-link {
+        margin-bottom: 5px;
+    }
+  }
+}