viniBaxter-desk_front 0.5.0 → 12.0.0

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

@@ -1,361 +1,363 @@
 .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);
+  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-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-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-divider {
-        border-color: $default;
+    &.dropdown-menu-right {
+      &:after {
+        left: auto;
+        right: 10px;
       }
+    }
 
-      &:before {
-        color: $black;
+    .dropup & {
+      &:after {
+        color: $black-states;
         z-index: 2;
       }
 
-      &:after {
+      &:before {
         display: inline-block;
         position: absolute;
         width: 0;
         height: 0;
-        z-index: 1;
         vertical-align: middle;
         content: "";
-        top: -6px;
-        left: 10px;
+        top: auto;
+        bottom: -6px;
         right: auto;
-        color: $default;
-        border-bottom: .4em solid;
+        left: 10px;
+        color: $dark-background;
+        border-top: .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;
-        }
+        border-bottom: none;
+        z-index: 1;
       }
     }
+  }
 
-    i {
-        margin-right: 5px;
-        position: relative;
-        top: 1px;
-    }
+  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;
-    }
+  .tim-icons {
+    margin-right: 10px;
+    position: relative;
+    top: 4px;
+    font-size: 18px;
+    margin-top: -5px;
+    opacity: .5;
+  }
 
-    .dropdown-item {
-        &.active,
-        &:active{
-            color: inherit;
-        }
-    }
+  .dropdown-item {
 
-    .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;
-          }
-        }
+    &.active,
+    &:active {
+      color: inherit;
     }
+  }
 
-
-
+  .dropup & {
     &:before {
+      display: none;
+    }
+
+    &:after {
       display: inline-block;
       position: absolute;
       width: 0;
       height: 0;
       vertical-align: middle;
       content: "";
-      top: -5px;
-      left: 10px;
+      top: auto;
+      bottom: -5px;
       right: auto;
+      left: 10px;
       color: $white;
-      border-bottom: .4em solid;
+      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;
+      }
+    }
+  }
 
-    &.dropdown-menu-right {
-      right: 0 !important;
-      left: auto !important;
+  // &: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;
     }
 
-    .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);
+    &.disabled,
+    &:disabled {
+      color: $default-opacity;
 
       &:hover,
       &:focus {
-        background-color: $opacity-gray-3;
-      }
-
-      &.disabled,
-      &:disabled {
-        color: $default-opacity;
-
-        &:hover,
-        &:focus {
-          background-color: transparent;
-          box-shadow: none;
-        }
+        background-color: transparent;
+        box-shadow: none;
       }
     }
+  }
 
+  .dropdown-divider {
+    background-color: $opacity-gray-5;
+  }
 
-    .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-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-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-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-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-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-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;
+  }
 
-    .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 {
-      @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-datetimepicker-widget.top,
-    &.bootstrap-datetimepicker-widget.bottom {
-        @include transform-translate-y-dropdown(-20px);
-    }
+  .bootstrap-select.dropup &:not(.inner) {
+    @include transform-translate-y-dropdown(25px);
+  }
 
-    .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%;
+  }
 
-    .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);
+  }
 
-    .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);
+  }
 
-    &.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);
+  }
 
-    .dropup.show:not(.bootstrap-select) &{
-        @include transform-translate-y-dropdown(-2px);
-    }
+  &.dropdown-navbar {
+    left: -80px;
 
-    &.dropdown-navbar{
-      left: -80px;
-      &:before, &:after{
-        left: auto;
-        right: 17px;
-      }
+    &:before,
+    &:after {
+      left: auto;
+      right: 17px;
     }
-
+  }
 
 }
 
-.btn{
-    cursor: pointer;
+.btn {
+  cursor: pointer;
 
-    &.dropdown-toggle[data-toggle="dropdown"]{
-        padding:10px;
-        margin: 0;
-        margin-bottom: 5px;
-
-        &:after{
-          content: "";
-          margin-left: 5px;
-        }
+  &.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;
-      }
+  span.bs-caret {
+    display: none;
+  }
+
+  &.btn-link {
+    &.dropdown-toggle {
+      height: 22px;
+      padding: 0;
+      margin-right: 5px;
     }
+  }
 }
 
-.dropdown-toggle:after{
+.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;
- }
+.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;
+  min-width: 100px;
+  border: $border-radius-lg;
 }
 
 .dropdown-menu-lg {
-    min-width: 260px;
-    border-radius: $border-radius-lg;
+  min-width: 260px;
+  border-radius: $border-radius-lg;
 }
 
 .dropdown-menu-xl {
-    min-width: 450px;
-    border-radius: $border-radius-lg;
+  min-width: 450px;
+  border-radius: $border-radius-lg;
 }
 
-@include media-breakpoint-down(md){
-  .button-dropdown{
-      display: none;
+@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;
+
+  .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{
+@include media-breakpoint-up(lg) {
+  .dropdown-menu .dropdown-item {
     color: $dark-gray;
   }
-}
+}