viniBaxter-spa_landing 0.1.0 → 0.9

data/lib/viniBaxter/sass/spa_landing-basic-nav.scss

@@ -0,0 +1,8 @@
+// bootstrap
+@import 'bootstrap/bootstrap';
+
+// Theme functions
+@import 'spa_landing/theme/functions';
+
+// Theme core
+@import 'spa_landing/theme/theme-basic-nav';

data/lib/viniBaxter/sass/spa_landing-nav.scss

@@ -0,0 +1,8 @@
+// bootstrap
+@import 'bootstrap/bootstrap';
+
+// Theme functions
+@import 'spa_landing/theme/functions';
+
+// Theme core
+@import 'spa_landing/theme/theme';

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

@@ -3,8 +3,8 @@
 // Library overrides
 //
 
-[data-aos="img-skewed-item-left"],
-[data-aos="img-skewed-item-right"] {
+[data-aos='img-skewed-item-left'],
+[data-aos='img-skewed-item-right'] {
   opacity: 0;
   transition-property: opacity, transform, -webkit-transform;
   will-change: opacity, transform, -webkit-transform;
@@ -14,19 +14,21 @@
     opacity: 1;
   }
 }
-
-[data-aos="img-skewed-item-left"] {
-  transform: rotateY(-$img-skewed-rotate-y + 15deg) rotateX($img-skewed-rotate-x - 10deg) translate3d(0, 100px, 0);
+[data-aos='img-skewed-item-left'] {
+  transform: rotateY(-$img-skewed-rotate-y + 15deg)
+    rotateX($img-skewed-rotate-x - 10deg) translate3d(0, 100px, 0);
 
   &.aos-animate {
-    transform: rotateY(-$img-skewed-rotate-y) rotateX($img-skewed-rotate-x) translate3d(0, 0, 0);
+    transform: rotateY(-$img-skewed-rotate-y) rotateX($img-skewed-rotate-x)
+      translate3d(0, 0, 0);
   }
 }
-
-[data-aos="img-skewed-item-right"] {
-  transform: rotateY($img-skewed-rotate-y - 15deg) rotateX($img-skewed-rotate-x - 10deg) translate3d(0, 100px, 0);
+[data-aos='img-skewed-item-right'] {
+  transform: rotateY($img-skewed-rotate-y - 15deg)
+    rotateX($img-skewed-rotate-x - 10deg) translate3d(0, 100px, 0);
 
   &.aos-animate {
-    transform: rotateY($img-skewed-rotate-y) rotateX($img-skewed-rotate-x) translate3d(0, 0, 0);
+    transform: rotateY($img-skewed-rotate-y) rotateX($img-skewed-rotate-x)
+      translate3d(0, 0, 0);
   }
-}
+}

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

@@ -19,10 +19,10 @@
     position: absolute;
     width: 0;
     height: 0;
-    background-image: url('avatar-status.svg'),
-      url('avatar-group.svg'),
-      url('avatar-group-hover.svg'),
-      url('avatar-group-hover-last.svg');
+    background-image: url(image-path('desk_front/avatar-status.svg')),
+      url(image-path('desk_front/avatar-group.svg')),
+      url(image-path('desk_front/avatar-group-hover.svg')),
+      url(image-path('desk_front/avatar-group-hover-last.svg'));
   }
 }
 
@@ -46,7 +46,6 @@
 
 .avatar-online,
 .avatar-offline {
-
   &::before {
     content: '';
     position: absolute;
@@ -58,7 +57,7 @@
   }
 
   .avatar-img {
-    mask-image: url(#{$path-to-img}/masks/avatar-status.svg);
+    mask-image: url(image-path('desk_front/avatar-status.svg'));
     mask-size: 100% 100%;
   }
 }
@@ -92,9 +91,15 @@
 }
 
 .avatar-xl {
-  width: $avatar-size-xl;
-  height: $avatar-size-xl;
-  font-size: $avatar-size-xl / 3;
+  width: $avatar-size-lg;
+  height: $avatar-size-lg;
+  font-size: $avatar-size-lg / 3;
+
+  @include media-breakpoint-up(md) {
+    width: $avatar-size-xl;
+    height: $avatar-size-xl;
+    font-size: $avatar-size-xl / 3;
+  }
 }
 
 .avatar-xxl {
@@ -142,34 +147,34 @@
 
   // Shift every next avatar left
 
-  .avatar+.avatar {
+  .avatar + .avatar {
     margin-left: -$avatar-size-base / 4;
   }
 
-  .avatar-xs+.avatar-xs {
+  .avatar-xs + .avatar-xs {
     margin-left: -$avatar-size-xs / 4;
   }
 
-  .avatar-sm+.avatar-sm {
+  .avatar-sm + .avatar-sm {
     margin-left: -$avatar-size-sm / 4;
   }
 
-  .avatar-lg+.avatar-lg {
+  .avatar-lg + .avatar-lg {
     margin-left: -$avatar-size-lg / 4;
   }
 
-  .avatar-xl+.avatar-xl {
+  .avatar-xl + .avatar-xl {
     margin-left: -$avatar-size-xl / 4;
   }
 
-  .avatar-xxl+.avatar-xxl {
+  .avatar-xxl + .avatar-xxl {
     margin-left: -$avatar-size-xxl / 4;
   }
 
   // Add some spacing between avatars
 
   .avatar:not(:last-child) {
-    mask-image: url(#{$path-to-img}/masks/avatar-group.svg);
+    mask-image: url(image-path('desk_front/avatar-group.svg'));
     mask-size: 100% 100%;
   }
 
@@ -179,14 +184,13 @@
     mask-image: none;
     z-index: 1;
 
-    +.avatar {
-      mask-image: url(#{$path-to-img}/masks/avatar-group-hover.svg);
+    + .avatar {
+      mask-image: url(image-path('desk_front/avatar-group-hover.svg'));
       mask-size: 100% 100%;
 
       &:last-child {
-        mask-image: url(#{$path-to-img}/masks/avatar-group-hover-last.svg);
+        mask-image: url(image-path('desk_front/avatar-group-hover-last.svg'));
       }
     }
   }
-
-}
+}

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);
+  }
+}