bootstrap-italia 2.15.1 → 2.16.0

package/src/scss/components/_card-old.scss

@@ -0,0 +1,952 @@
+@use 'sass:math';
+
+// Keep till next major? (.card is deprecated)
+
+//
+// Base styles
+//
+
+.card-body {
+  // Enable `flex-grow: 1` for decks and groups so that card blocks take up
+  // as much space as possible, ensuring footers are aligned to the bottom.
+  flex: 1 1 auto;
+  padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
+  color: var(--#{$prefix}card-color);
+}
+
+.card-title {
+  margin-bottom: var(--#{$prefix}card-title-spacer-y);
+}
+
+.card-subtitle {
+  margin-top: calc(-0.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
+  margin-bottom: 0;
+}
+
+.card-text:last-child {
+  margin-bottom: 0;
+}
+
+.card-link {
+  &:hover {
+    text-decoration: if($link-hover-decoration == underline, none, null);
+  }
+
+  + .card-link {
+    margin-left: var(--#{$prefix}card-spacer-x);
+  }
+}
+
+//
+// Optional textual caps
+//
+
+.card-header {
+  padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
+  margin-bottom: 0; // Removes the default margin-bottom of <hN>
+  color: var(--#{$prefix}card-cap-color);
+  background-color: var(--#{$prefix}card-cap-bg);
+  border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
+
+  &:first-child {
+    @include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0);
+  }
+}
+
+.card-footer {
+  padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
+  color: var(--#{$prefix}card-cap-color);
+  background-color: var(--#{$prefix}card-cap-bg);
+  border-top: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
+
+  &:last-child {
+    @include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius));
+  }
+}
+
+//
+// Header navs
+//
+
+.card-header-tabs {
+  margin-right: calc(-0.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
+  margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list
+  margin-left: calc(-0.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
+  border-bottom: 0;
+
+  .nav-link.active {
+    background-color: var(--#{$prefix}card-bg);
+    border-bottom-color: var(--#{$prefix}card-bg);
+  }
+}
+
+.card-header-pills {
+  margin-right: calc(-0.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
+  margin-left: calc(-0.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
+}
+
+// Card image
+.card-img-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: var(--#{$prefix}card-img-overlay-padding);
+  @include border-radius(var(--#{$prefix}card-inner-border-radius));
+}
+
+.card-img,
+.card-img-top,
+.card-img-bottom {
+  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
+}
+
+.card-img,
+.card-img-top {
+  @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
+}
+
+.card-img,
+.card-img-bottom {
+  @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
+}
+
+//
+// Card groups
+//
+
+.card-group {
+  // The child selector allows nested `.card` within `.card-group`
+  // to display properly.
+  > .card {
+    margin-bottom: var(--#{$prefix}card-group-margin);
+  }
+
+  @include media-breakpoint-up(sm) {
+    display: flex;
+    flex-flow: row wrap;
+    // The child selector allows nested `.card` within `.card-group`
+    // to display properly.
+    > .card {
+      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
+      flex: 1 0 0%;
+      margin-bottom: 0;
+
+      + .card {
+        margin-left: 0;
+        border-left: 0;
+      }
+
+      // Handle rounded corners
+      @if $enable-rounded {
+        &:not(:last-child) {
+          @include border-end-radius(0);
+
+          .card-img-top,
+          .card-header {
+            // stylelint-disable-next-line property-disallowed-list
+            border-top-right-radius: 0;
+          }
+          .card-img-bottom,
+          .card-footer {
+            // stylelint-disable-next-line property-disallowed-list
+            border-bottom-right-radius: 0;
+          }
+        }
+
+        &:not(:first-child) {
+          @include border-start-radius(0);
+
+          .card-img-top,
+          .card-header {
+            // stylelint-disable-next-line property-disallowed-list
+            border-top-left-radius: 0;
+          }
+          .card-img-bottom,
+          .card-footer {
+            // stylelint-disable-next-line property-disallowed-list
+            border-bottom-left-radius: 0;
+          }
+        }
+      }
+    }
+  }
+}
+
+.card-wrapper {
+  padding-bottom: $v-gap * 3;
+  display: flex;
+
+  &.card-column {
+    flex-direction: column;
+
+    .card {
+      height: auto !important;
+
+      & + .card {
+        margin-top: 1rem;
+      }
+    }
+  }
+
+  &.card-teaser-wrapper {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex-wrap: wrap;
+
+    &.card-teaser-wrapper-equal {
+      align-items: stretch;
+    }
+
+    & > .card-teaser {
+      flex: 0 0 100%;
+      margin: $v-gap * 2 0;
+      display: flex;
+      flex-wrap: wrap;
+
+      &.border {
+        border-color: $border-color;
+      }
+
+      &.card-teaser-image {
+        padding: 0 !important;
+
+        & > .card-image-wrapper {
+          flex: 1;
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: flex-start;
+
+          &.with-read-more {
+            .card-image-rounded img {
+              border-bottom-right-radius: 0 !important;
+            }
+          }
+        }
+      }
+    }
+
+    .card-flex {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: stretch;
+      position: relative;
+
+      .card-image {
+        position: relative;
+        // background-color: $gray-border;
+        background-color: transparent;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &.card-image-rounded {
+          border-radius: 0 $border-radius $border-radius 0;
+
+          img {
+            border-radius: 0 $border-radius $border-radius 0;
+          }
+        }
+
+        .card-date {
+          background-color: $white;
+          padding: 0.5em 1em;
+          z-index: 1;
+
+          & > *:first-child {
+            font-size: 120%;
+          }
+
+          & > *:last-child {
+            font-size: 80%;
+          }
+        }
+
+        img {
+          z-index: auto;
+          object-fit: cover;
+        }
+      }
+    }
+
+    //Landscape
+    @include media-breakpoint-up(md) {
+      .card-teaser {
+        flex: 0 0 49%;
+      }
+
+      &.card-teaser-block-2 {
+        width: 100%;
+        justify-content: space-between;
+
+        & > .card-teaser {
+          flex: 0 0 49%;
+        }
+      }
+
+      &.card-teaser-block-3 {
+        width: 100%;
+        justify-content: space-between;
+
+        & > .card-teaser {
+          flex: 0 0 32%;
+        }
+      }
+
+      &.card-teaser-start {
+        justify-content: flex-start !important;
+
+        .card-teaser + .card-teaser {
+          margin-left: 1.35rem;
+        }
+      }
+
+      &.card-teaser-end {
+        justify-content: flex-end !important;
+
+        .card-teaser + .card-teaser {
+          margin-left: 1.35rem;
+        }
+      }
+    }
+  }
+
+  //Desktop
+  @include media-breakpoint-up(xl) {
+    &.card-teaser-block-4 {
+      width: 100%;
+      justify-content: space-between;
+
+      & > .card-teaser {
+        flex: 0 0 24%;
+      }
+    }
+
+    &.card-overlapping {
+      margin-top: -32px;
+    }
+  }
+}
+
+.card {
+  // scss-docs-start card-css-vars
+  --#{$prefix}card-spacer-y: #{$card-spacer-y};
+  --#{$prefix}card-spacer-x: #{$card-spacer-x};
+  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
+  --#{$prefix}card-border-width: #{$card-border-width};
+  --#{$prefix}card-border-color: #{$card-border-color};
+  --#{$prefix}card-border-radius: #{$card-border-radius};
+  --#{$prefix}card-box-shadow: #{$card-box-shadow};
+  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
+  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
+  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
+  --#{$prefix}card-cap-bg: #{$card-cap-bg};
+  --#{$prefix}card-cap-color: #{$card-cap-color};
+  --#{$prefix}card-height: #{$card-height};
+  --#{$prefix}card-color: #{$card-color};
+  --#{$prefix}card-bg: #{$card-bg};
+  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
+  --#{$prefix}card-group-margin: #{$card-group-margin};
+  // scss-docs-end card-css-vars
+  display: flex;
+  flex-direction: column;
+  min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
+  height: var(--#{$prefix}card-height);
+  word-wrap: break-word;
+  background-color: var(--#{$prefix}card-bg);
+  background-clip: border-box;
+  border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
+  @include border-radius(var(--#{$prefix}card-border-radius));
+  @include box-shadow(var(--#{$prefix}card-box-shadow));
+
+  > hr {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  > .list-group {
+    border-top: inherit;
+    border-bottom: inherit;
+
+    &:first-child {
+      border-top-width: 0;
+      @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
+    }
+
+    &:last-child {
+      border-bottom-width: 0;
+      @include border-bottom-radius(var(--#{$prefix}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;
+  }
+  border: none;
+  padding: 0;
+  position: relative;
+  width: 100%;
+
+  @each $color, $value in $theme-colors {
+    &.card-bg-#{$color} {
+      background-color: $value;
+
+      .card-body {
+        .card-title,
+        .card-text {
+          color: $white;
+        }
+      }
+    }
+  }
+
+  .card-body {
+    padding: $card-padding;
+
+    h4 {
+      &.card-title {
+        & + .card-text {
+          padding-top: 16px;
+        }
+      }
+    }
+
+    h5 {
+      &.card-title {
+        font-size: $card-h5-size;
+        line-height: $card-h5-line-height;
+        font-weight: $card-h5-fw;
+        color: $card-h5-color;
+        margin-bottom: $v-gap * 2;
+        transition: all 0.3s;
+        &.big-heading {
+          font-size: $card-big-head-size;
+          line-height: $card-big-head-l-h;
+        }
+
+        &.card-title-icon {
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+
+          .icon {
+            margin-right: 0.5em;
+          }
+        }
+      }
+    }
+    h6.card-subtitle {
+      font-weight: normal;
+      margin-bottom: $v-gap * 2;
+      margin-top: -$v-gap * 2;
+    }
+    a {
+      display: inline-block;
+      h5.card-title {
+        color: $card-link-color;
+      }
+      &:hover {
+        h5.card-title {
+          color: var(--bs-link-hover-color);
+        }
+      }
+    }
+    .card-text {
+      font-family: $font-family-serif;
+      font-size: $card-p-size;
+      line-height: $card-p-l-h;
+      color: $card-p-color;
+    }
+    .card-signature {
+      font-style: italic;
+      font-family: $font-family-serif;
+      color: $card-p-color;
+      font-weight: 700;
+      font-size: $card-signature-size;
+      margin-bottom: 0;
+      display: block;
+    }
+    .category-top {
+      font-size: $card-category-size;
+      text-transform: uppercase;
+      color: $card-p-color;
+      margin-bottom: $card-category-m-bottom;
+      a.category {
+        color: $primary;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+      .category {
+        font-weight: 600;
+        letter-spacing: $card-category-l-spacing;
+      }
+      .data {
+        &:before {
+          content: '—';
+          display: inline-block;
+          margin: 0 $v-gap;
+        }
+      }
+    }
+  }
+  // line
+  &:after {
+    content: '';
+    // height: $card-small-line-height;
+    // width: $card-small-line-w;
+    // background: $card-small-line-color;
+    display: block;
+    margin-top: $card-small-line-margin;
+    margin-left: $card-padding;
+  }
+  a.read-more {
+    position: absolute;
+    bottom: $v-gap * 3;
+  }
+  .categoryicon-top {
+    margin-bottom: $card-cat-icon-block-margin;
+    display: flex;
+    align-items: center;
+    .text {
+      font-size: $card-category-size;
+      text-transform: uppercase;
+      letter-spacing: $card-category-l-spacing;
+      color: $card-p-color;
+      line-height: 1rem;
+    }
+    .icon {
+      width: $card-cat-icon-size;
+      height: $card-cat-icon-size;
+      fill: $card-link-color;
+      margin-right: $v-gap * 1;
+      flex-shrink: 0;
+    }
+  }
+  // simple link
+  .simple-link {
+    font-weight: 600;
+    font-size: $card-signature-size;
+    margin-top: $card-simple-link-margin;
+    display: block;
+  }
+  // cards with background
+  &.card-bg {
+    margin-left: math.div($card-padding, 3);
+    margin-right: math.div($card-padding, 3);
+    box-shadow: $card-shadow;
+    background: $card-shadow-bg;
+    &:after {
+      background: transparent;
+    }
+    border-right: none;
+  }
+  // cards with img top
+  &.card-img {
+    // Why the margin?
+    // margin-left: $card-padding/3;
+    // margin-right: $card-padding/3;
+
+    &.shadow .card-body,
+    &.border .card-body,
+    &.border-start .card-body,
+    &.border-end .card-body {
+      padding-left: $card-padding;
+      padding-right: $card-padding;
+    }
+    h5.card-title {
+      font-size: $card-img-heading-size;
+      line-height: $card-img-heading-l-h;
+      margin-bottom: $v-gap * 5;
+    }
+    border-right: none;
+
+    .img-responsive-wrapper {
+      .img-responsive {
+        padding-bottom: 61.29%; /* image proportion 310 x 190 */
+        &.img-responsive-panoramic {
+          padding-bottom: 30.645%; /* image proportion 310 x 95 */
+        }
+      }
+    }
+
+    &.rounded .img-responsive-wrapper {
+      border-top-left-radius: $border-radius;
+      border-top-right-radius: $border-radius;
+    }
+  }
+  .card-calendar {
+    height: 80%;
+    max-height: 80px;
+    width: 80px;
+    border-radius: 4px;
+    background-color: $white;
+    box-shadow:
+      0 1px 4px 0 rgba(0, 0, 0, 0.1),
+      0 4px 8px 0 rgba(0, 0, 0, 0.1);
+    position: absolute;
+    right: 32px;
+    top: 10%;
+    color: #455a64;
+    text-align: center;
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.3;
+    text-transform: capitalize;
+    .card-date {
+      font-size: 1.667em;
+      font-weight: 700;
+      display: block;
+    }
+  }
+
+  &.no-after {
+    content: none;
+    position: relative;
+    &:after {
+      display: none;
+    }
+
+    & > .read-more {
+      &::before {
+        content: '';
+        height: $v-gap * 3;
+        display: block;
+      }
+      padding-top: $v-gap * 2;
+    }
+  }
+
+  // special card
+  &.special-card {
+    .img-responsive-wrapper {
+      overflow: visible;
+      position: relative;
+      width: $special-card-img-width;
+      margin-bottom: $card-padding;
+      &::before,
+      &::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+      &:before {
+        background: $primary-a3;
+        left: $card-padding;
+        top: $card-padding;
+        opacity: 0.3;
+        transition: all 0.3s;
+      }
+      &:after {
+        background: $primary-a3;
+        left: $card-padding * 0.5;
+        top: $card-padding * 0.5;
+        transition: all 0.3s;
+      }
+      .img-responsive {
+        padding-bottom: 122.98%; /* image proportion 214 x 174 */
+        z-index: 1;
+      }
+    }
+    .head-tags {
+      margin-bottom: $card-padding;
+      span.data {
+        font-weight: normal;
+      }
+    }
+    h5.card-title {
+      color: $card-link-color;
+    }
+    &:hover {
+      text-decoration: underline;
+      h5.card-title {
+        color: var(--bs-link-hover-color);
+      }
+      .img-responsive-wrapper {
+        &:before {
+          background: $primary;
+          opacity: 0.3;
+        }
+        &:after {
+          background: $primary;
+        }
+      }
+    }
+  }
+  // card big
+  &.card-big {
+    .card-body {
+      padding: $card-padding * 2;
+      .top-icon {
+        margin-bottom: $card-padding;
+        .icon {
+          width: $card-big-top-icon-size;
+          height: $card-big-top-icon-size;
+          fill: $primary;
+        }
+      }
+
+      h5.card-title {
+        font-size: $card-big-h5-size;
+        line-height: $card-big-h5-l-h;
+      }
+      .card-text {
+        font-size: $card-big-p-size;
+        line-height: $card-big-p-l-h;
+      }
+    }
+    .flag-icon {
+      margin-left: $card-padding * 2;
+    }
+    .etichetta {
+      position: absolute;
+      right: $card-padding * 2;
+      top: $card-padding + $v-gap;
+      //left: $card-padding * 6;
+      justify-content: flex-end;
+    }
+  }
+  &.border-bottom-card {
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      left: 0;
+      right: 0;
+      height: 4px;
+      bottom: 0;
+      background: $primary;
+    }
+  }
+  //head tag
+  .head-tags {
+    justify-content: space-between;
+    display: flex;
+    margin-bottom: $card-padding * 2;
+    .data {
+      font-size: $card-category-size;
+      text-transform: uppercase;
+      color: $card-p-color;
+    }
+  }
+  .card-tag {
+    color: $primary;
+    font-size: $card-category-size;
+    font-weight: bold;
+    letter-spacing: $card-category-l-spacing;
+    padding: 0 $v-gap * 4;
+    border-radius: $tag-radius;
+    border: 1px solid $primary;
+  }
+  // card footer
+  .it-card-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: $card-padding * 2;
+    .card-signature {
+      font-style: italic;
+      font-family: $font-family-serif;
+      color: $card-p-color;
+      font-weight: 700;
+      font-size: $card-signature-size;
+      display: block;
+      margin-bottom: 0;
+    }
+  }
+
+  &.card-teaser {
+    display: inline-flex;
+    // width: auto;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: 24px;
+
+    &:after {
+      content: none;
+    }
+
+    &.card-column {
+      flex-direction: column;
+    }
+
+    .card-header {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: flex-start;
+
+      padding: 1em;
+      width: 100%;
+
+      .icon {
+        margin-right: 0.5rem;
+      }
+
+      @for $i from 1 through 6 {
+        h#{$i} {
+          line-height: 1.5;
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    .card-body {
+      padding: 0;
+      flex: auto;
+
+      .card-text,
+      .card-text > p {
+        margin: 0;
+
+        & + .card-text {
+          margin-top: 16px;
+        }
+      }
+    }
+
+    .icon {
+      min-width: 32px;
+
+      & + .card-body {
+        margin-left: 1em;
+      }
+    }
+
+    .avatar {
+      &.size-xs {
+        min-width: $avatar-base-size * 2;
+      }
+
+      &.size-sm {
+        min-width: $avatar-base-size * 3;
+      }
+
+      &.size-md {
+        min-width: $avatar-base-size * 4;
+      }
+
+      &.size-lg {
+        min-width: $avatar-base-size * 5;
+      }
+
+      &.size-xl {
+        min-width: $avatar-base-size * 10;
+      }
+
+      & + .card-body {
+        flex: 1;
+      }
+    }
+  }
+
+  @each $color, $value in $theme-colors {
+    &.card-teaser-#{$color} {
+      border-left: 8px solid $value;
+    }
+  }
+}
+// flag
+.flag-icon {
+  width: $flag-icon-w;
+  height: $flag-icon-h;
+  box-sizing: content-box;
+  position: relative;
+  background: $flag-icon-color;
+  color: $card-shadow-bg;
+  text-align: center;
+  text-transform: uppercase;
+}
+.flag-icon:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 0;
+  height: 0;
+  border-bottom: 13px solid $card-shadow-bg;
+  border-left: $flag-icon-w * 0.5 solid transparent;
+  border-right: $flag-icon-w * 0.5 solid transparent;
+}
+
+// read more text
+a.read-more {
+  display: flex;
+  align-items: center;
+  color: $card-link-color;
+  text-transform: uppercase;
+  font-weight: bold;
+  letter-spacing: $card-category-l-spacing;
+  font-size: $card-category-size;
+  text-decoration: none;
+  .icon {
+    margin-left: $v-gap;
+    fill: $card-link-color;
+    width: $card-link-icon-size;
+    height: $card-link-icon-size;
+    flex-shrink: 0;
+  }
+  &:hover {
+    text-decoration: underline;
+  }
+}
+//.etichetta
+.etichetta {
+  display: flex;
+  align-items: center;
+  font-size: $card-category-size;
+  text-transform: uppercase;
+  font-weight: bold;
+  letter-spacing: $card-category-l-spacing;
+  color: $card-p-color;
+  .icon {
+    fill: $card-p-color;
+    width: $v-gap * 3;
+    height: $v-gap * 3;
+    margin-right: $v-gap;
+    flex-shrink: 0;
+  }
+}
+// Contextual variation
+.row {
+  [class*='col-'] {
+    //car variation inside cols
+    > .card-wrapper {
+      height: 100%;
+      > .card {
+        height: 100%;
+      }
+    }
+  }
+}
+
+//Tablet horizontal / small desktop
+@include media-breakpoint-up(lg) {
+  .card-wrapper {
+    padding-bottom: 0;
+    &.card-space {
+      padding-bottom: $card-padding * 0.5;
+    }
+    &.card-offset {
+      margin-top: 90px;
+    }
+  }
+  .card {
+    border: none;
+    &.card-bg,
+    &.card-img {
+      margin: 0;
+    }
+  }
+}