viniBaxter-desk_front 0.3.1 → 0.4.0

data/lib/viniBaxter/sass/desk_front/beckyBaxter/custom/_dropdown.scss

@@ -0,0 +1,361 @@
+.dropdown-menu {
+    border: 0;
+    box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2);
+    border-radius: $border-radius-xs;
+    @include transitions($fast-transition-time, $transition-linear);
+
+    &.dropdown-menu-right {
+      &:before, &:after {
+        left:auto;
+        right: 10px;
+      }
+    }
+
+    &.dropdown-black {
+      background: linear-gradient(to bottom, $black 0%, $black-states 100%);
+      border: 1px solid $default;
+      .dropdown-item {
+        color: rgba(255, 255, 255, 0.7);
+      }
+
+      .dropdown-divider {
+        border-color: $default;
+      }
+
+      &:before {
+        color: $black;
+        z-index: 2;
+      }
+
+      &:after {
+        display: inline-block;
+        position: absolute;
+        width: 0;
+        height: 0;
+        z-index: 1;
+        vertical-align: middle;
+        content: "";
+        top: -6px;
+        left: 10px;
+        right: auto;
+        color: $default;
+        border-bottom: .4em solid;
+        border-right: .4em solid transparent;
+        border-left: .4em solid transparent;
+      }
+
+      &.dropdown-menu-right {
+        &:after {
+          left: auto;
+          right: 10px;
+        }
+      }
+
+      .dropup & {
+        &:after {
+          color: $black-states;
+          z-index: 2;
+        }
+
+        &:before {
+          display: inline-block;
+          position: absolute;
+          width: 0;
+          height: 0;
+          vertical-align: middle;
+          content: "";
+          top: auto;
+          bottom: -6px;
+          right: auto;
+          left: 10px;
+          color: $dark-background;
+          border-top: .4em solid;
+          border-right: .4em solid transparent;
+          border-left: .4em solid transparent;
+          border-bottom: none;
+          z-index: 1;
+        }
+      }
+    }
+
+    i {
+        margin-right: 5px;
+        position: relative;
+        top: 1px;
+    }
+
+    .tim-icons {
+        margin-right: 10px;
+        position: relative;
+        top: 4px;
+        font-size: 18px;
+        margin-top: -5px;
+        opacity: .5;
+    }
+
+    .dropdown-item {
+        &.active,
+        &:active{
+            color: inherit;
+        }
+    }
+
+    .dropup & {
+        &:before {
+            display: none;
+        }
+
+        &:after {
+          display: inline-block;
+          position: absolute;
+          width: 0;
+          height: 0;
+          vertical-align: middle;
+          content: "";
+          top: auto;
+          bottom: -5px;
+          right: auto;
+          left: 10px;
+          color: $white;
+          border-top: .4em solid;
+          border-right: .4em solid transparent;
+          border-left: .4em solid transparent;
+          border-bottom: none;
+        }
+
+        &.dropdown-menu-right {
+          &:after, &:before {
+            right: 10px;
+            left: auto;
+          }
+        }
+    }
+
+
+
+    &:before {
+      display: inline-block;
+      position: absolute;
+      width: 0;
+      height: 0;
+      vertical-align: middle;
+      content: "";
+      top: -5px;
+      left: 10px;
+      right: auto;
+      color: $white;
+      border-bottom: .4em solid;
+      border-right: .4em solid transparent;
+      border-left: .4em solid transparent;
+    }
+
+
+
+    &.dropdown-menu-right {
+      right: 0 !important;
+      left: auto !important;
+    }
+
+    .dropdown-item,
+    .bootstrap-select &.inner li a {
+      font-size: $font-size-sm;
+      padding-top: .6rem;
+      padding-bottom: .6rem;
+      margin-top: 5px;
+      @include transitions($fast-transition-time, $transition-linear);
+
+      &:hover,
+      &:focus {
+        background-color: $opacity-gray-3;
+      }
+
+      &.disabled,
+      &:disabled {
+        color: $default-opacity;
+
+        &:hover,
+        &:focus {
+          background-color: transparent;
+          box-shadow: none;
+        }
+      }
+    }
+
+
+    .dropdown-divider {
+        background-color: $opacity-gray-5;
+    }
+
+    .dropdown-header:not([href]):not([tabindex]) {
+        color: $default-opacity;
+        font-size: $font-size-xs;
+        text-transform: uppercase;
+        font-weight: $font-weight-bold;
+    }
+
+    &.dropdown-primary {
+        @include dropdown-colors(darken($primary, 3%),$opacity-8,$white, $opacity-2);
+    }
+
+    &.dropdown-info {
+        @include dropdown-colors(darken($info, 3%),$opacity-8,$white, $opacity-2);
+    }
+
+    &.dropdown-danger {
+        @include dropdown-colors(darken($danger, 3%),$opacity-8,$white, $opacity-2);
+    }
+
+    &.dropdown-success {
+        @include dropdown-colors(darken($success, 3%),$opacity-8,$white, $opacity-2);
+    }
+
+    &.dropdown-warning {
+        @include dropdown-colors(darken($warning, 3%),$opacity-8,$white, $opacity-2);
+    }
+
+    .dropdown &,
+    .dropup:not(.bootstrap-select) &,
+    .bootstrap-select &:not(.inner),
+    &.bootstrap-datetimepicker-widget.bottom {
+        @include transform-translate-y-dropdown(-20px);
+        visibility: hidden;
+        display: block;
+        @include opacity(0);
+        top: 100% !important;
+    }
+
+    &.bootstrap-datetimepicker-widget.top {
+      @include transform-translate-y-dropdown(-20px);
+      visibility: hidden;
+      display: block;
+      @include opacity(0);
+    }
+
+    &.bootstrap-datetimepicker-widget.top,
+    &.bootstrap-datetimepicker-widget.bottom {
+        @include transform-translate-y-dropdown(-20px);
+    }
+
+    .bootstrap-select.dropup &:not(.inner){
+        @include transform-translate-y-dropdown(25px);
+    }
+
+    .dropup:not(.bootstrap-select) &{
+        @include transform-translate-y-dropdown(20px);
+        top: auto !important;
+        bottom: 100%;
+    }
+
+    .dropdown.show &,
+    .bootstrap-select.show &:not(.inner),
+    &.bootstrap-datetimepicker-widget.top.open,
+    &.bootstrap-datetimepicker-widget.bottom.open,
+    .dropup.show:not(.bootstrap-select) &,
+    .navbar .dropdown.show &{
+        @include opacity(1);
+        visibility: visible;
+        @include transform-translate-y-dropdown(1px);
+    }
+
+    &.bootstrap-datetimepicker-widget.top.open,
+    &.bootstrap-datetimepicker-widget.bottom.open{
+        @include transform-translate-y-dropdown(0px);
+    }
+
+    .dropup.show:not(.bootstrap-select) &{
+        @include transform-translate-y-dropdown(-2px);
+    }
+
+    &.dropdown-navbar{
+      left: -80px;
+      &:before, &:after{
+        left: auto;
+        right: 17px;
+      }
+    }
+
+
+}
+
+.btn{
+    cursor: pointer;
+
+    &.dropdown-toggle[data-toggle="dropdown"]{
+        padding:10px;
+        margin: 0;
+        margin-bottom: 5px;
+
+        &:after{
+          content: "";
+          margin-left: 5px;
+        }
+
+    }
+
+    span.bs-caret{
+      display: none;
+    }
+
+    &.btn-link{
+      &.dropdown-toggle{
+        height: 22px;
+        padding: 0;
+        margin-right: 5px;
+      }
+    }
+}
+
+.dropdown-toggle:after{
+
+  content: unset;
+
+}
+
+.btn:not(:disabled):not(.disabled).active:focus,
+ .btn:not(:disabled):not(.disabled):active:focus,
+ .show>.btn.dropdown-toggle:focus{
+   box-shadow: none;
+ }
+
+// Dropown: Sizes
+
+.dropdown-menu-sm {
+    min-width: 100px;
+    border: $border-radius-lg;
+}
+
+.dropdown-menu-lg {
+    min-width: 260px;
+    border-radius: $border-radius-lg;
+}
+
+.dropdown-menu-xl {
+    min-width: 450px;
+    border-radius: $border-radius-lg;
+}
+
+@include media-breakpoint-down(md){
+  .button-dropdown{
+      display: none;
+  }
+  .dropdown-toggle:after{
+      display: inline-block;
+      width: 0;
+      height: 0;
+      margin-left: .255em;
+      vertical-align: .255em;
+      content: "";
+      border-top: .3em solid;
+      border-right: .3em solid transparent;
+      border-bottom: 0;
+      border-left: .3em solid transparent;
+
+  }
+}
+
+
+@include media-breakpoint-up(lg){
+  .dropdown-menu .dropdown-item{
+    color: $dark-gray;
+  }
+}

data/lib/viniBaxter/sass/desk_front/beckyBaxter/custom/_example-pages.scss

@@ -0,0 +1,319 @@
+.login-page {
+    .card-login {
+        border-radius: $border-radius-lg;
+        padding-bottom: $padding-base-horizontal;
+
+        .card-header {
+          padding: 0 0 100px;
+          overflow: hidden;
+          img{
+            position: absolute;
+          }
+          .card-title{
+            position: relative;
+            font-size: 5em;
+            font-weight: 900;
+            color: $black;
+            text-transform: lowercase;
+            margin-left: -5px;
+            z-index: 1;
+          }
+        }
+        .btn-wd{
+            min-width: 180px;
+        }
+
+        .logo-container{
+            width: 65px;
+            margin: 0 auto;
+            margin-bottom: 55px;
+
+            img{
+                width: 100%;
+            }
+        }
+
+        .input-group:last-child{
+            margin-bottom: 40px;
+        }
+
+        &.card-plain{
+            @include input-coloured-bg($opacity-5, $white, $white, $transparent-bg, $opacity-1, $opacity-2);
+
+            .input-group-addon,
+            .form-group.no-border .input-group-addon,
+            .input-group.no-border .input-group-addon{
+                color: $opacity-8;
+            }
+        }
+
+        &.card-white{
+
+          background: $white;
+
+          .card-header{
+            .card-title{
+              color: $white;
+            }
+          }
+
+          @include form-control-placeholder(rgba($black,0.4), 1);
+            .has-danger{
+              .form-control, .input-group-prepend .input-group-text{
+                border-color: $danger-states;
+              }
+            }
+
+            .input-group-prepend .input-group-text{
+              border-color: rgba($black-states,0.2);
+              color: $black-states;
+            }
+
+            .form-control{
+              color: $black;
+              border-color: rgba($black-states,0.2);
+              &:focus{
+                border-color: $primary;
+              }
+            }
+
+          .form-group.no-border,
+          .input-group.no-border{
+              .form-control,
+              .form-control + .input-group-prepend .input-group-text,
+              .form-control + .input-group-append .input-group-text,
+              .input-group-prepend .input-group-text,
+              .input-group-append .input-group-text{
+                  background-color: $opacity-gray-3;
+                  &:focus,
+                  &:active,
+                  &:active{
+                      background-color: $opacity-gray-5;
+                  }
+              }
+
+              .form-control{
+                  &:focus{
+                      & + .input-group-prepend .input-group-text,
+                      & + .input-group-append .input-group-text{
+
+                          background-color: $transparent-bg;
+                      }
+                  }
+              }
+
+
+          }
+
+          .input-group[disabled]{
+              .input-group-prepend .input-group-text,
+              .input-group-append .input-group-text{
+                  background-color: $black;
+              }
+          }
+
+          .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control{
+            background: $light-gray;
+            border-color: rgba($black-states,0.3);
+          }
+
+          .input-group-focus{
+              .input-group-prepend .input-group-text,
+              .input-group-append .input-group-text,
+              .form-control{
+                background-color: $white;
+                border-color: $primary;
+              }
+
+              &.no-border{
+                  .input-group-prepend .input-group-text,
+                  .input-group-append .input-group-text{
+
+                      background-color: $opacity-gray-5;
+                  }
+              }
+          }
+          .input-group-prepend .input-group-text {
+              border-right: none;
+          }
+
+          .input-group-append .input-group-text {
+              border-left: none;
+          }
+
+          .has-danger .form-control:focus, .has-success.input-group-focus .input-group-append .input-group-text, .has-success.input-group-focus .input-group-prepend .input-group-text {
+            border-color: $danger-states;
+          }
+
+          .has-success .form-control:focus, .has-success.input-group-focus .input-group-append .input-group-text, .has-success.input-group-focus .input-group-prepend .input-group-text {
+            border-color: darken($success, 10%);
+          }
+
+        }
+    }
+
+    .link{
+        font-size: 10px;
+        text-decoration: none;
+    }
+
+    .card-black{
+      .link{
+        color: $white;
+      }
+    }
+}
+
+.full-page{
+    & > .content,
+    & > .footer{
+        position: relative;
+        z-index: 4;
+    }
+
+    & > .content{
+        padding-bottom: 150px;
+        padding-top: 150px;
+    }
+
+    .footer{
+        position: absolute;
+        width: 100%;
+        bottom: 0;
+        padding-left: 48px;
+        padding-right: 48px;
+
+        .container{
+            color: $white;
+        }
+    }
+
+    .full-page-background{
+        position: absolute;
+        z-index: 1;
+        height: 100%;
+        width: 100%;
+        display: block;
+        top: 0;
+        left: 0;
+        background-size: cover;
+        background-position: center center;
+    }
+
+
+
+    &.pricing-page{
+        .description{
+            margin-bottom: 65px;
+            color: rgba($white,0.7);
+        }
+    }
+
+    &.register-page{
+        .info-horizontal{
+            padding: 0px 0px 20px;
+        }
+
+        .info-horizontal{
+            text-align: left !important;
+
+            .icon{
+                margin-top: 0;
+
+                >i{
+                    font-size: 2em;
+                }
+
+                &.icon-circle{
+                    width: 65px;
+                    height: 65px;
+                    max-width: 65px;
+                    margin-top: 8px;
+
+                    i{
+                        display: table;
+                        margin: 0 auto;
+                        line-height: 3.5;
+                        font-size: 1.9em;
+                    }
+                }
+            }
+            .description{
+                overflow: hidden;
+                .info-title{
+                  margin-bottom: 20px;
+                }
+            }
+
+        }
+    }
+
+    &.pricing-page, &.login-page, &.lock-page, &.register-page {
+      min-height: 100vh;
+      background: radial-gradient($background-black, $background-states-black);
+    }
+}
+
+@include media-breakpoint-down(sm){
+
+  .landing-page .section-story-overview .image-container:nth-child(2) {
+    margin-left: 0;
+    margin-bottom: 30px;
+  }
+
+  .login-page .card-login .card-header img {
+    width: 70%;
+  }
+}
+
+@include media-breakpoint-down(xs){
+  .register-page .full-page >.content {
+    padding-top: 50px;
+  }
+
+  .page-header{
+    .container h6.category-absolute{
+        width: 90%;
+    }
+  }
+}
+
+@media only screen
+and (min-device-width : 768px)
+and (max-device-width : 1024px)
+and (orientation : landscape) {
+
+  .pricing-page,
+  .register-page,
+  .login-page,
+  .lock-page {
+    .navbar .navbar-toggle .navbar-toggler{
+      display: none;
+    }
+  }
+
+}
+
+@media only screen
+and (min-device-width : 768px)
+and (max-device-width : 1024px)
+and (orientation : portrait) {
+  .register-page .full-page .content {
+    .card-register {
+      margin-top: 3rem!important;
+    }
+  }
+}
+
+@include media-breakpoint-down(md){
+  .lock-page,
+  .login-page,
+  .pricing-page,
+  .register-page {
+    .navbar {
+      .navbar-wrapper .navbar-toggle {
+        display: none !important;
+      }
+    }
+  }
+}