RootZanli & NinjaCr3

: / home / o5t6x7pgljbm / public_html / intuitionexchange.com / assets / scss / components /
Filename : _card.scss
back
//
// Card
// --------------------------------------------------


// Header and footer

.card-header,
.card-footer {
  width: calc(100% - (var(--#{$prefix}card-spacer-x) * 2));
  margin: auto;
  padding: {
    right: 0;
    left: 0;
  }
}


// Header navs

.card-header-tabs,
.card-header-pills {
  margin: 0;
  .nav-item {
    margin-bottom: 0;
  }
  .nav-link.active {
    border-color: var(--#{$prefix}nav-tabs-link-active-border-color);
    background-color: var(--#{$prefix}nav-tabs-link-active-bg);
  }

  &.nav-tabs-alt {
    margin: {
      top: calc(var(--#{$prefix}card-cap-padding-y) * -.625);
      bottom: calc((var(--#{$prefix}card-cap-padding-y) + .0625rem) * -1);
    }
    border-bottom: 0;
  }
}
.card-header-pills .nav-link.active {
  background-color: var(--#{$prefix}nav-pills-link-active-bg);
}


// Hover effect

.card-hover:not(.bg-transparent) {
  transition: $card-transition;
  &:hover {
    transform: translateY(-.25rem);
    @include box-shadow($box-shadow-sm);
  }
  &.shadow-sm:hover {
    @include box-shadow($box-shadow !important);
  }
  &.shadow:hover {
    @include box-shadow($box-shadow-lg !important);
  }
  &.border-primary:hover {
    @include box-shadow($box-shadow-primary !important);
  }
}
.card-hover {
  --#{$prefix}card-icon-hover-color: #{$primary};

  .card-img-overlay {
    transition: opacity .3s ease-in-out;
    opacity: 0;
    z-index: 5;
  }
  .card-icon {
    transition: color .3s ease-in-out;
  }
  &:hover {
    .card-icon {
      color: var(--#{$prefix}card-icon-hover-color) !important;
    }
    .card-img-overlay {
      opacity: 1;
    }
  }
}

.card-hover-primary {
  transition: $card-transition;
  &.shadow-sm:hover,
  &.shadow:hover,
  &:hover {
    @include box-shadow($box-shadow-primary !important);
  }
  .card-title,
  .card-body,
  .text-muted,
  .text-dark,
  .text-nav,
  .text-primary,
  h1, .h1, h2, .h2, h3, .h3,
  h4, .h4, h5, .h5, h6, .h6 {
    transition: color .2s ease-in-out;
  }
  .border-top, .border-end,
  .border-bottom, .border-start {
    transition: border-color .2s ease-in-out;
  }
  .bg-secondary {
    transition: background-color .2s ease-in-out;
  }
  &:hover {
    border-color: var(--#{$prefix}primary) !important;
    background-color: var(--#{$prefix}primary) !important;
    .card-title { color: $white; }
    .card-body { color: rgba($white, .7); }
    .text-muted { color: rgba($white, .5) !important; }
    .text-primary { color: $white !important; }
    .border-top, .border-end,
    .border-bottom, .border-start {
      border-color: $border-light-color !important;
    }
    .bg-secondary {
      background-color: rgba($white, .05) !important;
    }
    h1, .h1, h2, .h2, h3, .h3,
    h4, .h4, h5, .h5, h6, .h6 {
      color: $white !important;
      > a { color: $white !important; }
    }
    .text-dark:not(.badge.bg-white) { color: $white !important; }
    .text-nav:not(.badge.bg-white) { color: $nav-link-dark-mode-color !important; }
  }
}


// Portfolio card

.card-portfolio {
  border: 0;
  background-color: transparent;

  .card-img {
    @include border-radius(var(--#{$prefix}card-border-radius));
    transform: translateZ(0);
    overflow: hidden;

    > img {
      display: block;
      transition: transform .35s ease-in-out;
    }
  }

  .card-body {
    padding: {
      right: 0;
      left: 0;
    }
  }

  @include media-breakpoint-up(md) {
    .card-portfolio-meta {
      transition: opacity .35s ease-in-out;
      opacity: 0;
    }
  
    &:hover {
      .card-img > img {
        transform: scale(1.05);
      }
      .card-portfolio-meta {
        opacity: 1;
      }
    }
  }
}