viniBaxter-spa_landing 0.6.0 → 0.9

data/lib/viniBaxter/sass/spa_landing/theme/_buttons.scss

@@ -13,6 +13,14 @@
 }
 
 
+// Sizing
+
+.btn-xs {
+  padding: $input-btn-padding-y-xs $input-btn-padding-x-xs;
+  font-size: $input-btn-font-size-xs;
+}
+
+
 // Custom colors
 
 .btn-white {
@@ -41,6 +49,21 @@
   }
 }
 
+.btn-gray-300-20 {
+  background-color: rgba($gray-300, .2);
+  color: $white;
+
+  @include hover-focus {
+    background-color: rgba($gray-300, .25);
+    color: $white;
+  }
+
+  &.active {
+    background-color: rgba($gray-300, .25);
+    color: $white;
+  }
+}
+
 .btn-gray-400 {
   background-color: $gray-400;
   color: $white;
@@ -56,6 +79,38 @@
   }
 }
 
+.btn-gray-400-10 {
+  background-color: rgba($gray-400, .1);
+  color: $white;
+
+  @include hover-focus {
+    background-color: rgba($gray-400, .15);
+    color: $white;
+  }
+
+  &.active {
+    background-color: rgba($gray-400, .15);
+    color: $white;
+  }
+}
+
+.btn-outline-white {
+  border-color: $gray-300;
+  color: $body-color;
+
+  @include hover-focus {
+    background-color: darken($white, 5%);
+    border-color: $gray-400;
+    color: $body-color;
+  }
+
+  &.active {
+    background-color: darken($white, 5%);
+    border-color: $gray-400;
+    color: $body-color;
+  }
+}
+
 .btn-outline-gray-300 {
   border-color: $gray-300;
   color: $primary;
@@ -96,12 +151,12 @@
   padding-left: $btn-padding-y;
   padding-right: $btn-padding-y;
   border-radius: $rounded-pill;
+}
 
-  > * {
-    display: block;
-    line-height: 1;
-    width: 1em;
-  }
+.btn-rounded-circle > * {
+  display: block;
+  line-height: 1;
+  width: 1em;
 }
 
 .btn-rounded-circle.btn-lg {
@@ -113,3 +168,8 @@
   padding-left: $btn-padding-y-sm;
   padding-right: $btn-padding-y-sm;
 }
+
+.btn-rounded-circle.btn-xs {
+  padding-left: $btn-padding-y-xs;
+  padding-right: $btn-padding-y-xs;
+}

data/lib/viniBaxter/sass/spa_landing/theme/_card.scss

@@ -10,6 +10,11 @@
   width: 100%;
 }
 
+.card-header {
+  background-color: transparent;
+  border-bottom: $border-width solid $border-color;
+}
+
 .card-body {
   display: block;
   flex-grow: 0;
@@ -220,3 +225,58 @@ a.card, a.card-body, a.card-footer, a.card-meta {
 .card:hover > .card-zoom > [class*="card-img"] {
   transform: scale(1.1);
 }
+
+
+// Card list
+
+.card-list .list-link {
+  position: relative;
+}
+
+.card-list .list-link::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -$card-spacer-x;
+  border-right: $border-width * 2 solid $primary;
+  display: none;
+}
+
+.card-list .list-link:hover {
+  color: $body-color !important;
+}
+
+.card-list .active .list-link {
+  color: $body-color !important;
+}
+
+.card-list .active .list-link::before {
+  display: block;
+}
+
+
+// Card bleed
+
+@include media-breakpoint-down(sm) {
+
+  .card-bleed {
+    width: auto;
+    min-width: 100%;
+    margin-right: -$grid-gutter-width / 2;
+    margin-left: -$grid-gutter-width / 2;
+    border-radius: 0;
+  }
+
+  .card-bleed .card-footer,
+  .card-bleed .card-header,
+  .card-bleed .card-body {
+    padding-right: $grid-gutter-width / 2;
+    padding-left: $grid-gutter-width / 2;
+    border-radius: 0;
+  }
+
+  .card-bleed .card-list .list-link::before {
+    left: -$grid-gutter-width / 2;
+  }
+}

data/lib/viniBaxter/sass/spa_landing/theme/_choices.scss

@@ -0,0 +1,20 @@
+//
+// choices.scss
+//
+
+.choices::after {
+  display: none;
+}
+
+// Dropdown menu
+.choices .dropdown-menu {
+  width: 100%;
+}
+
+// Specifying explicitely because Choices.js won't allow you to specify multiple classnames at the same time
+.choices .form-control-xs ~ .dropdown-menu,
+.choices .custom-select-xs ~ .dropdown-menu {
+  width: auto;
+  min-width: 100%;
+  padding: $dropdown-padding-y-xs $dropdown-padding-x-xs;
+}

data/lib/viniBaxter/sass/spa_landing/theme/_custom-forms.scss

@@ -3,9 +3,7 @@
 // Extended from Bootstrap
 //
 
-//
-// Custom switch
-//
+// Switch
 
 .custom-switch {
   min-height: $custom-switch-height;
@@ -34,10 +32,7 @@
   }
 }
 
-
-//
-// Dark version
-//
+// Switch dark
 
 .custom-switch-dark {
 
@@ -63,3 +58,20 @@
     }
   }
 }
+
+
+// Custom select
+
+// Sizing
+
+.custom-select-sm {
+  background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x-sm center / $custom-select-bg-size;
+}
+
+.custom-select-xs {
+  height: $custom-select-height-xs;
+  padding: $custom-select-padding-y-xs ($custom-select-padding-x-xs + $custom-select-indicator-padding-xs) $custom-select-padding-y-xs $custom-select-padding-x-xs;
+  background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x-xs center / $custom-select-bg-size;
+  line-height: $custom-select-line-height-xs;
+  font-size: $custom-select-font-size-xs;
+}

data/lib/viniBaxter/sass/spa_landing/theme/_dropdown-extend.scss

@@ -0,0 +1,113 @@
+.dropdown-menu {
+  i {
+    margin-right: 5px;
+    position: relative;
+    top: 1px;
+  }
+
+  .now-ui-icons {
+    margin-right: 10px;
+    position: relative;
+    top: 4px;
+    font-size: 18px;
+    margin-top: -5px;
+    opacity: 0.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-color;
+      border-top: 0.4em solid;
+      border-right: 0.4em solid transparent;
+      border-left: 0.4em solid transparent;
+    }
+
+    &.dropdown-menu-right {
+      &:after {
+        right: 10px;
+        left: auto;
+      }
+    }
+  }
+
+  .dropdown-item,
+  .bootstrap-select &.inner li a {
+    font-size: $font-size-small;
+    padding-top: 0.6rem;
+    padding-bottom: 0.6rem;
+    margin-top: 5px;
+    @include transition($fast-transition-time, $transition-linear);
+
+    &:hover,
+    &:focus {
+      background-color: $opacity-gray-3;
+    }
+
+    &.disabled,
+    &:disabled {
+      color: $default-color-opacity;
+
+      &:hover,
+      &:focus {
+        background-color: transparent;
+      }
+    }
+  }
+
+  // Dropdown
+  .dropdown &:not(.inner),
+  &.bootstrap-datetimepicker-widget {
+    @include transform-translate-y-dropdown(-25px);
+    visibility: hidden;
+    display: block;
+    @include opacity(0);
+    top: 100% !important;
+  }
+
+  .dropdown.show &:not(.inner),
+  &.bootstrap-datetimepicker-widget.bottom.open,
+  &.bootstrap-datetimepicker-widget.top.open {
+    @include opacity(1);
+    visibility: visible;
+    @include transform-translate-y-dropdown(0px);
+  }
+
+  // Dropup
+  .dropup &:not(.inner),
+  &.bootstrap-datetimepicker-widget.top {
+    visibility: hidden;
+    @include opacity(0);
+    @include transform-translate-y-dropdown(25px);
+    display: block;
+    top: auto !important;
+    bottom: 100% !important;
+  }
+
+  .dropup.show &:not(.inner),
+  &.bootstrap-datetimepicker-widget.top.open {
+    visibility: visible;
+    @include opacity(1);
+    @include transform-translate-y-dropdown(-1px);
+  }
+}

data/lib/viniBaxter/sass/spa_landing/theme/_dropdown.scss

@@ -8,7 +8,6 @@
   padding-right: $dropdown-padding-x;
 }
 
-
 // Item
 
 .dropdown-item {
@@ -26,7 +25,6 @@
   margin-top: $dropdown-item-spacing-y;
 }
 
-
 // Link (optional)
 
 .dropdown-link {
@@ -41,7 +39,6 @@
   }
 }
 
-
 // Header
 
 .dropdown-header {
@@ -50,29 +47,32 @@
   padding-top: 0;
   padding-bottom: $headings-margin-bottom;
   font-size: $h6-font-size;
-  font-weight: $font-weight-bold;
+  font-weight: $font-weight-light;
   line-height: $h6-line-height;
   text-transform: uppercase;
-  letter-spacing: .08em;
+  letter-spacing: 0.08em;
 }
 
-
 // Toggle
 
 .dropdown-toggle::after {
-  font-family: "Feather";
+  font-family: 'Feather';
   vertical-align: middle;
   border: none !important;
-  content: "\e92e";
+  content: '\e92e';
 }
 
 .dropright > .dropdown-toggle::after {
-  content: "\e930";
+  content: '\e930';
 }
 
-
 // Sizing
 
+.dropdown-menu-xs {
+  min-width: $dropdown-min-width-xs;
+  padding: $dropdown-padding-y-xs $dropdown-padding-x-xs;
+}
+
 .dropdown-menu-md {
   min-width: $dropdown-min-width-md;
 }
@@ -88,19 +88,18 @@
 .dropdown-menu-lg,
 .dropdown-menu-xl {
   padding: $dropdown-padding-y-lg $dropdown-padding-x-lg;
-
-  .dropdown-item,
-  .dropdown-header {
-    margin-left: -$dropdown-padding-x-lg;
-    margin-right: -$dropdown-padding-x-lg;
-    padding-left: $dropdown-item-padding-x-lg;
-    padding-right: $dropdown-item-padding-x-lg;
-  }
 }
 
+.dropdown-menu-lg .dropdown-item,
+.dropdown-menu-xl .dropdown-header {
+  margin-left: -$dropdown-padding-x-lg;
+  margin-right: -$dropdown-padding-x-lg;
+  padding-left: $dropdown-item-padding-x-lg;
+  padding-right: $dropdown-item-padding-x-lg;
+}
 
 // Positioning
 
 .dropright > .dropdown-menu {
   top: -$dropdown-padding-y;
-}
+}

data/lib/viniBaxter/sass/spa_landing/theme/_dropdown_creative.scss

@@ -0,0 +1,140 @@
+.dropdown-menu {
+  border: 0;
+  box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2);
+  border-radius: $border-radius-extra-small;
+  @include custom_transition($fast-transition-time, $transition-linear);
+  font-size: $font-size-base;
+
+  &.dropdown-menu-right {
+    &:before {
+      left: auto;
+      right: 10px;
+    }
+  }
+
+  .dropdown & {
+    @include transform-translate-y-dropdown(-25px);
+    visibility: hidden;
+    display: block;
+    @include opacity(0);
+    top: 100% !important;
+  }
+
+  .dropdown.show &,
+  &.open {
+    @include opacity(1);
+    visibility: visible;
+    @include transform-translate-y-dropdown(0px);
+  }
+
+  .dropdown-item,
+  .bootstrap-select &.inner li a {
+    font-size: $font-size-small;
+    padding-top: 0.6rem;
+    padding-bottom: 0.6rem;
+    margin-top: 5px;
+    @include custom_transition($fast-transition-time, $transition-linear);
+    outline: none;
+
+    &:hover,
+    &:focus {
+      background-color: $opacity-gray-3;
+    }
+
+    &.disabled,
+    &:disabled {
+      color: $default-color-opacity;
+
+      &:hover,
+      &:focus {
+        background-color: transparent;
+      }
+    }
+  }
+
+  &:before {
+    display: inline-block;
+    position: absolute;
+    width: 0;
+    height: 0;
+    vertical-align: middle;
+    content: '';
+    top: -5px;
+    left: 10px;
+    right: auto;
+    color: $white-color;
+    border-bottom: 0.4em solid;
+    border-right: 0.4em solid transparent;
+    border-left: 0.4em solid transparent;
+  }
+
+  .dropdown-divider {
+    background-color: $opacity-gray-5;
+  }
+
+  .dropdown-header:not([href]):not([tabindex]) {
+    color: $default-color-opacity;
+    font-size: $font-size-mini;
+    text-transform: uppercase;
+    font-weight: $font-weight-bold;
+  }
+
+  &.dropdown-primary {
+    @include dropdown-colors(
+      darken($primary-color, 3%),
+      $opacity-8,
+      $white-color,
+      $opacity-2
+    );
+  }
+
+  &.dropdown-info {
+    @include dropdown-colors(
+      darken($info-color, 3%),
+      $opacity-8,
+      $white-color,
+      $opacity-2
+    );
+  }
+
+  &.dropdown-danger {
+    @include dropdown-colors(
+      darken($danger-color, 3%),
+      $opacity-8,
+      $white-color,
+      $opacity-2
+    );
+  }
+
+  &.dropdown-success {
+    @include dropdown-colors(
+      darken($success-color, 3%),
+      $opacity-8,
+      $white-color,
+      $opacity-2
+    );
+  }
+
+  &.dropdown-warning {
+    @include dropdown-colors(
+      darken($warning-color, 3%),
+      $opacity-8,
+      $white-color,
+      $opacity-2
+    );
+  }
+}
+.button-dropdown {
+  padding-right: $padding-base-horizontal;
+  cursor: pointer;
+
+  & .dropdown-toggle {
+    padding-top: $padding-base-vertical;
+    padding-bottom: $padding-base-vertical;
+    display: block;
+
+    &:after {
+      display: none;
+    }
+  }
+}