viniBaxter-spa_landing 0.1.0 → 0.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d8a22f20f1e2c3feccb16cd27799c3b9eb518344f1c65f090640d80c6ecfe4db
-  data.tar.gz: 299c3d29d4abc1a60bb08f3bd3285072a98ce08b74698d9e66baffb85b413b89
+  metadata.gz: 6954c7a3c5c1ea024f2df059c41007bf9d679f0d5a5862dcf58e20f82f2d3b1c
+  data.tar.gz: 4557f403822e6dd78115be86b584d428bdfa2bf58e94ee988ebf6711b9081bdb
 SHA512:
-  metadata.gz: 569eb1dc5d832e2f94e68edfc9db94bce72ac533dd4e50739f7d56d62ba5894b285cb09ddd188d165c10b854e1c87b33d46ee926e3d417984c0f1d1bb99d0aef
-  data.tar.gz: 4827b4b5720ad44afc0290e7686727b5f91e99e2e46f8500575421fcee12000a1befb3e61595bff17d1d2ed124f0646fc09f70217181b70f8f7a73ba50f8e869
+  metadata.gz: ea3d2867cf103e8dea442d6931d8a8194c04c827a12298c6a6b08c01d9d951f075e05989bf48fa9c1a65666ba23e8de888cf23360edae2d0dd267717c388fcec
+  data.tar.gz: 41e2982c7d06fee479e992343aa6020a335102bb7cc1f92d3586bd912428f26dbcd1ee7c5d6240e4fc834feb397191f012f18fc97cacd8dda3813a9edb351ffe

data/app/assets/images/spa_landing/avatar-group-hover-last.svg

@@ -0,0 +1,9 @@
+<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <mask id="avatarGroupHoverLast">
+      <rect width="100" height="100" fill="white"></rect>
+      <circle cx="-25" cy="50" r="55" fill="black"></circle>
+    </mask>
+  </defs>
+  <rect width="100" height="100" fill="green" mask="url(#avatarGroupHoverLast)"></rect>
+</svg>

data/app/assets/images/spa_landing/avatar-group-hover.svg

@@ -0,0 +1,10 @@
+<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <mask id="avatarGroupHover">
+      <rect width="100" height="100" fill="white"></rect>
+      <circle cx="125" cy="50" r="55" fill="black"></circle>
+      <circle cx="-25" cy="50" r="55" fill="black"></circle>
+    </mask>
+  </defs>
+  <rect width="100" height="100" fill="green" mask="url(#avatarGroupHover)"></rect>
+</svg>

data/app/assets/images/spa_landing/avatar-group.svg

@@ -0,0 +1,9 @@
+<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <mask id="avatarGroup">
+      <rect width="100" height="100" fill="white"></rect>
+      <circle cx="125" cy="50" r="55" fill="black"></circle>
+    </mask>
+  </defs>
+  <rect width="100" height="100" fill="green" mask="url(#avatarGroup)"></rect>
+</svg>

data/app/assets/images/spa_landing/avatar-status.svg

@@ -0,0 +1,9 @@
+<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <mask id="avatarStatus">
+      <rect width="100" height="100" fill="white"></rect>
+      <circle cx="85" cy="85" r="15" fill="black"></circle>
+    </mask>
+  </defs>
+  <rect width="100" height="100" fill="green" mask="url(#avatarStatus)"></rect>
+</svg>

data/lib/viniBaxter/sass/{spa_landing/scss → bootstrap}/_breadcrumb.scss

@@ -10,6 +10,8 @@
 }
 
 .breadcrumb-item {
+  display: flex;
+
   // The separator between breadcrumbs (by default, a forward-slash: "/")
   + .breadcrumb-item {
     padding-left: $breadcrumb-item-padding;

data/lib/viniBaxter/sass/{spa_landing/scss → bootstrap}/_buttons.scss

@@ -10,13 +10,19 @@
   font-weight: $btn-font-weight;
   color: $body-color;
   text-align: center;
+  text-decoration: if($link-decoration == none, null, none);
   white-space: $btn-white-space;
   vertical-align: middle;
-  cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
   user-select: none;
   background-color: transparent;
   border: $btn-border-width solid transparent;
-  @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);
+  @include button-size(
+    $btn-padding-y,
+    $btn-padding-x,
+    $btn-font-size,
+    $btn-line-height,
+    $btn-border-radius
+  );
   @include transition($btn-transition);
 
   @include hover() {
@@ -37,12 +43,16 @@
     @include box-shadow(none);
   }
 
-  &:not(:disabled):not(.disabled):active,
-  &:not(:disabled):not(.disabled).active {
-    @include box-shadow($btn-active-box-shadow);
+  &:not(:disabled):not(.disabled) {
+    cursor: if($enable-pointer-cursor-for-buttons, pointer, null);
 
-    &:focus {
-      @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+    &:active,
+    &.active {
+      @include box-shadow($btn-active-box-shadow);
+
+      &:focus {
+        @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
+      }
     }
   }
 }
@@ -53,7 +63,6 @@ fieldset:disabled a.btn {
   pointer-events: none;
 }
 
-
 //
 // Alternate buttons
 //
@@ -70,6 +79,33 @@ fieldset:disabled a.btn {
   }
 }
 
+// Gradient
+@each $color, $value in $theme-gradient-colors {
+  .btn-gradient-#{$color} {
+    @include set-gradient-button($color);
+    width: 200px;
+    color: $light;
+    background-size: 300% 100%;
+    transition: all 0.4s ease-in-out;
+    &:hover {
+      background-position: 100% 0;
+      transition: all 0.4s ease-in-out;
+    }
+  }
+}
+
+@each $color, $value in $theme-gradient-colors {
+  .btn-outline-gradient-#{$color} {
+    @include set-gradient-button($color);
+    background-origin: border-box;
+    box-shadow: 2px 1000px 1px #fff inset;
+    color: $value;
+    border-color: rgba(255, 255, 255, 0) !important;
+    &:hover {
+      color: $value;
+    }
+  }
+}
 
 //
 // Link buttons
@@ -89,7 +125,6 @@ fieldset:disabled a.btn {
   &:focus,
   &.focus {
     text-decoration: $link-hover-decoration;
-    box-shadow: none;
   }
 
   &:disabled,
@@ -101,20 +136,30 @@ fieldset:disabled a.btn {
   // No need for an active state here
 }
 
-
 //
 // Button Sizes
 //
 
 .btn-lg {
-  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
+  @include button-size(
+    $btn-padding-y-lg,
+    $btn-padding-x-lg,
+    $btn-font-size-lg,
+    $btn-line-height-lg,
+    $btn-border-radius-lg
+  );
 }
 
 .btn-sm {
-  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
+  @include button-size(
+    $btn-padding-y-sm,
+    $btn-padding-x-sm,
+    $btn-font-size-sm,
+    $btn-line-height-sm,
+    $btn-border-radius-sm
+  );
 }
 
-
 //
 // Block button
 //
@@ -130,9 +175,9 @@ fieldset:disabled a.btn {
 }
 
 // Specificity overrides
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
+input[type='submit'],
+input[type='reset'],
+input[type='button'] {
   &.btn-block {
     width: 100%;
   }

data/lib/viniBaxter/sass/{spa_landing/scss → bootstrap}/_card.scss

@@ -19,17 +19,27 @@
     margin-left: 0;
   }
 
-  > .list-group:first-child {
-    .list-group-item:first-child {
-      @include border-top-radius($card-border-radius);
+  > .list-group {
+    border-top: inherit;
+    border-bottom: inherit;
+
+    &:first-child {
+      border-top-width: 0;
+      @include border-top-radius($card-inner-border-radius);
     }
-  }
 
-  > .list-group:last-child {
-    .list-group-item:last-child {
-      @include border-bottom-radius($card-border-radius);
+    &:last-child  {
+      border-bottom-width: 0;
+      @include border-bottom-radius($card-inner-border-radius);
     }
   }
+
+  // Due to specificity of the above selector (`.card > .list-group`), we must
+  // use a child selector here to prevent double borders.
+  > .card-header + .list-group,
+  > .list-group + .card-footer {
+    border-top: 0;
+  }
 }
 
 .card-body {
@@ -80,16 +90,11 @@
   &:first-child {
     @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
   }
-
-  + .list-group {
-    .list-group-item:first-child {
-      border-top: 0;
-    }
-  }
 }
 
 .card-footer {
   padding: $card-spacer-y $card-spacer-x;
+  color: $card-cap-color;
   background-color: $card-cap-bg;
   border-top: $card-border-width solid $card-border-color;
 
@@ -123,6 +128,7 @@
   bottom: 0;
   left: 0;
   padding: $card-img-overlay-padding;
+  @include border-radius($card-inner-border-radius);
 }
 
 .card-img,
@@ -258,6 +264,8 @@
 //
 
 .accordion {
+  overflow-anchor: none;
+
   > .card {
     overflow: hidden;
 

data/lib/viniBaxter/sass/{spa_landing/scss → bootstrap}/_close.scss

@@ -30,7 +30,6 @@ button.close {
   padding: 0;
   background-color: transparent;
   border: 0;
-  appearance: none;
 }
 
 // Future-proof disabling of clicks on `<a>` elements

data/lib/viniBaxter/sass/{spa_landing/scss → bootstrap}/_custom-forms.scss

@@ -9,6 +9,7 @@
 
 .custom-control {
   position: relative;
+  z-index: 1;
   display: block;
   min-height: $font-size-base * $line-height-base;
   padding-left: $custom-control-gutter + $custom-control-indicator-size;
@@ -135,10 +136,10 @@
 
   .custom-control-input:disabled {
     &:checked ~ .custom-control-label::before {
-      background-color: $custom-control-indicator-checked-disabled-bg;
+      @include gradient-bg($custom-control-indicator-checked-disabled-bg);
     }
     &:indeterminate ~ .custom-control-label::before {
-      background-color: $custom-control-indicator-checked-disabled-bg;
+      @include gradient-bg($custom-control-indicator-checked-disabled-bg);
     }
   }
 }
@@ -161,7 +162,7 @@
 
   .custom-control-input:disabled {
     &:checked ~ .custom-control-label::before {
-      background-color: $custom-control-indicator-checked-disabled-bg;
+      @include gradient-bg($custom-control-indicator-checked-disabled-bg);
     }
   }
 }
@@ -204,7 +205,7 @@
 
   .custom-control-input:disabled {
     &:checked ~ .custom-control-label::before {
-      background-color: $custom-control-indicator-checked-disabled-bg;
+      @include gradient-bg($custom-control-indicator-checked-disabled-bg);
     }
   }
 }
@@ -237,8 +238,9 @@
     border-color: $custom-select-focus-border-color;
     outline: 0;
     @if $enable-shadows {
-      box-shadow: $custom-select-box-shadow, $custom-select-focus-box-shadow;
+      @include box-shadow($custom-select-box-shadow, $custom-select-focus-box-shadow);
     } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
       box-shadow: $custom-select-focus-box-shadow;
     }
 

data/lib/viniBaxter/sass/{spa_landing/scss → bootstrap}/_dropdown.scss

@@ -128,6 +128,7 @@
   font-weight: $font-weight-normal;
   color: $dropdown-link-color;
   text-align: inherit; // For `<button>`s
+  text-decoration: if($link-decoration == none, null, none);
   white-space: nowrap; // prevent links from randomly breaking onto new lines
   background-color: transparent; // For `<button>`s
   border: 0; // For `<button>`s
@@ -176,7 +177,7 @@
 // Dropdown section headers
 .dropdown-header {
   display: block;
-  padding: $dropdown-padding-y $dropdown-item-padding-x;
+  padding: $dropdown-header-padding;
   margin-bottom: 0; // for use with heading elements
   @include font-size($font-size-sm);
   color: $dropdown-header-color;

data/lib/viniBaxter/sass/{spa_landing/scss → bootstrap}/_forms.scss

@@ -59,6 +59,15 @@
   }
 }
 
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"] {
+  &.form-control {
+    appearance: none; // Fix appearance for date inputs in Safari
+  }
+}
+
 select.form-control {
   &:focus::-ms-value {
     // Suppress the nested default white text on blue background highlight given to

data/lib/viniBaxter/sass/{spa_landing/scss → bootstrap}/_functions.scss

@@ -8,7 +8,7 @@
   $prev-key: null;
   $prev-num: null;
   @each $key, $num in $map {
-    @if $prev-num == null or unit($num) == "%" or unit($prev-num) == "%" {
+    @if $prev-num == null or unit($num) == '%' or unit($prev-num) == '%' {
       // Do nothing
     } @else if not comparable($prev-num, $num) {
       @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
@@ -22,11 +22,13 @@
 
 // Starts at zero
 // Used to ensure the min-width of the lowest breakpoint starts at 0.
-@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
-  $values: map-values($map);
-  $first-value: nth($values, 1);
-  @if $first-value != 0 {
-    @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
+@mixin _assert-starts-at-zero($map, $map-name: '$grid-breakpoints') {
+  @if length($map) > 0 {
+    $values: map-values($map);
+    $first-value: nth($values, 1);
+    @if $first-value != 0 {
+      @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
+    }
   }
 }
 
@@ -38,11 +40,16 @@
 // @param {String} $search - Substring to replace
 // @param {String} $replace ('') - New value
 // @return {String} - Updated string
-@function str-replace($string, $search, $replace: "") {
+@function str-replace($string, $search, $replace: '') {
   $index: str-index($string, $search);
 
   @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+    @return str-slice($string, 1, $index - 1) + $replace +
+      str-replace(
+        str-slice($string, $index + str-length($search)),
+        $search,
+        $replace
+      );
   }
 
   @return $string;
@@ -50,9 +57,14 @@
 
 // See https://codepen.io/kevinweber/pen/dXWoRw
 @function escape-svg($string) {
-  @if str-index($string, "data:image/svg+xml") {
+  @if str-index($string, 'data:image/svg+xml') {
     @each $char, $encoded in $escaped-characters {
-      $string: str-replace($string, $char, $encoded);
+      // Do not escape the url brackets
+      @if str-index($string, 'url(') == 1 {
+        $string: url('#{str-replace(str-slice($string, 6, -3), $char, $encoded)}');
+      } @else {
+        $string: str-replace($string, $char, $encoded);
+      }
     }
   }
 
@@ -75,20 +87,20 @@
 }
 
 // Retrieve color Sass maps
-@function color($key: "blue") {
+@function color($key: 'blue') {
   @return map-get($colors, $key);
 }
 
-@function theme-color($key: "primary") {
+@function theme-color($key: 'primary') {
   @return map-get($theme-colors, $key);
 }
 
-@function gray($key: "100") {
+@function gray($key: '100') {
   @return map-get($grays, $key);
 }
 
 // Request a theme color level
-@function theme-color-level($color-name: "primary", $level: 0) {
+@function theme-color-level($color-name: 'primary', $level: 0) {
   $color: theme-color($color-name);
   $color-base: if($level > 0, $black, $white);
   $level: abs($level);
@@ -106,11 +118,20 @@
     @return $value1;
   }
 
-  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
+  @if type-of($value1) ==
+    number and
+    type-of($value2) ==
+    number and
+    comparable($value1, $value2)
+  {
     @return $value1 + $value2;
   }
 
-  @return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + unquote(" + ") + $value2);
+  @return if(
+    $return-calc == true,
+    calc(#{$value1} + #{$value2}),
+    $value1 + unquote(' + ') + $value2
+  );
 }
 
 @function subtract($value1, $value2, $return-calc: true) {
@@ -126,9 +147,18 @@
     @return $value1;
   }
 
-  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
+  @if type-of($value1) ==
+    number and
+    type-of($value2) ==
+    number and
+    comparable($value1, $value2)
+  {
     @return $value1 - $value2;
   }
 
-  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
+  @return if(
+    $return-calc == true,
+    calc(#{$value1} - #{$value2}),
+    $value1 + unquote(' - ') + $value2
+  );
 }