AdminLte/build/scss/_cards.scss

/*
 * Component: Cards
 * ----------------
 */

.card {
  @extend .mb-3;
  @include box-shadow($card-shadow);

  &.bg-dark {
    &,
    .card-body {
      color: $white;
    }
  }

  &.maximized-card {
    height: 100% !important;
    left: 0;
    max-height: 100% !important;
    max-width: 100% !important;
    position: fixed;
    top: 0;
    width: 100% !important;
    z-index: 9999;
    
    &.was-collapsed .card-body {
      display: block !important;
    }

    [data-widget='collapse'] {
      display: none;
    }

    .card-header,
    .card-footer {
      @include border-radius(0 !important);
    }
  }

  // collapsed mode
  &.collapsed-card {
    .card-body,
    .card-footer {
      display: none;
    }
  }

  .nav.flex-column {
    > li {
      border-bottom: 1px solid $card-border-color;
      margin: 0;

      &:last-of-type {
        border-bottom: none;
      }
    }
  }

  // fixed height to 300px
  &.height-control {
    .card-body {
      max-height: 300px;
      overflow: auto;
    }
  }

  .border-right {
    border-right: 1px solid $card-border-color;
  }

  .border-left {
    border-left: 1px solid $card-border-color;
  }
}

// Maximized Card Body Scroll fix
html.maximized-card {
  overflow: hidden;
}

// Add clearfix to header, body and footer
.card-header,
.card-body,
.card-footer {
  @include clearfix;
}

// Box header
.card-header {
  background-color: transparent;
  border-bottom: 1px solid $card-border-color;
  position: relative;

  @if $enable-rounded {
    @include border-top-radius($border-radius);
  }

  .collapsed-card & {
    border-bottom: none;
  }

  > .card-tools {
    position: absolute;
    right: 1rem;
    top: .5rem;

    [data-toggle='tooltip'] {
      position: relative;
    }
  }
}

.card-title {
  font-size: $card-title-font-size;
  font-weight: $card-title-font-weight;
  margin: 0;
}

// Box Tools Buttons
.btn-tool {
  background: transparent;
  color: $gray-500;
  font-size: $font-size-sm;
  padding: .25rem .5rem;

  .btn-group.show &,
  &:hover {
    color: $gray-700;
  }

  .show &,
  &:focus {
    box-shadow: none !important;
  }
}

// Box Body
.card-body {
  // @include border-radius-sides(0, 0, $border-radius, $border-radius);
  .no-header & {
    // @include border-top-radius($border-radius);
  }

  // Tables within the box body
  > .table {
    margin-bottom: 0;

    > thead > tr > th,
    > thead > tr > td {
      border-top-width: 0;
    }
  }

  // Calendar within the box body
  .fc {
    margin-top: 5px;
  }

  .full-width-chart {
    margin: -19px;
  }

  &.p-0 .full-width-chart {
    margin: -9px;
  }
}

.chart-legend {
  @extend .list-unstyled;
  margin: 10px 0;

  > li {
    @media (max-width: map-get($grid-breakpoints, sm)) {
      float: left;
      margin-right: 10px;
    }
  }
}

// Comment Box
.card-comments {
  background: $gray-100;

  .card-comment {
    @include clearfix;
    border-bottom: 1px solid $gray-200;
    padding: 8px 0;

    &:last-of-type {
      border-bottom: 0;
    }

    &:first-of-type {
      padding-top: 0;
    }

    img {
      @extend .img-sm;
      float: left;
    }
  }

  .comment-text {
    color: lighten($gray-700, 20%);
    margin-left: 40px;
  }

  .username {
    color: $gray-700;
    display: block;
    font-weight: 600;
  }

  .text-muted {
    font-size: 12px;
    font-weight: 400;
  }
}

// Widgets
//-----------

// Widget: TODO LIST
.todo-list {
  list-style: none;
  margin: 0;
  overflow: auto;
  padding: 0;

  // Todo list element
  > li {
    @include border-radius(2px);
    background: $gray-100;
    border-left: 2px solid $gray-200;
    color: $gray-700;
    margin-bottom: 2px;
    padding: 10px;

    &:last-of-type {
      margin-bottom: 0;
    }

    > input[type='checkbox'] {
      margin: 0 10px 0 5px;
    }

    .text {
      display: inline-block;
      font-weight: 600;
      margin-left: 5px;
    }

    // Time labels
    .label {
      font-size: 9px;
      margin-left: 10px;
    }

    // Tools and options box
    .tools {
      color: theme-color('danger');
      display: none;
      float: right;

      // icons
      > .fa,
      > .fas,
      > .far,
      > .fab,
      > .glyphicon,
      > .ion {
        cursor: pointer;
        margin-right: 5px;
      }
    }

    &:hover .tools {
      display: inline-block;
    }

    &.done {
      color: darken($gray-500, 25%);

      .text {
        font-weight: 500;
        text-decoration: line-through;
      }

      .label {
        background: $gray-500 !important;
      }
    }
  }

  // Color varaity
  .danger {
    border-left-color: theme-color('danger');
  }

  .warning {
    border-left-color: theme-color('warning');
  }

  .info {
    border-left-color: theme-color('info');
  }

  .success {
    border-left-color: theme-color('success');
  }

  .primary {
    border-left-color: theme-color('primary');
  }

  .handle {
    cursor: move;
    display: inline-block;
    margin: 0 5px;
  }
}

// END TODO WIDGET

// Input in box
.card-input {
  max-width: 200px;
}

@each $name, $color in $theme-colors {
  .card-#{$name} {
    &:not(.card-outline) {
      .card-header {
        background-color: $color;
        border-bottom: 0;

        &,
        a {
          color: color-yiq($color);
        }
      }
    }

    &.card-outline {
      border-top: 3px solid $color;
    }
  }

  .bg-#{$name},
  .bg-#{$name}-gradient,
  .card-#{$name}:not(.card-outline) {
    .btn-tool {
      color: rgba(color-yiq($color), 0.8);

      &:hover {
        color: color-yiq($color);
      }
    }
  }

  .card.bg-#{$name},
  .card.bg-#{$name}-gradient {
    .bootstrap-datetimepicker-widget {
      .table td,
      .table th {
        border: none;
      }

      table thead tr:first-child th:hover,
      table td.day:hover,
      table td.hour:hover,
      table td.minute:hover,
      table td.second:hover {
        background: darken($color, 8%);
        color: color-yiq($color);
      }

      table td.active,
      table td.active:hover {
        background: lighten($color, 10%);
        color: color-yiq($color);
      }
    }
  }
}