Proyectos de Subversion Moodle

//

// Base styles

//

.editing .block_with_controls {

  min-height: 320px;

}

.card {

  margin-bottom: 40px;

  padding: 0;

  position: relative;

  display: flex;

  flex-direction: column;

  min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106

  height: $card-height;

  word-wrap: break-word;

  //background-color: $card-bg;

  background-clip: border-box;

  //border: $card-border-width solid $card-border-color;

  //@include border-radius($card-border-radius);

  .theme-dark & {

    background-color: rgba($dm-card-bg, .6);

    //border: $card-border-width solid $dm-card-border-color;

  }

  .drawer & {

    border: 0;

    .theme-dark & {

      border: 0;

    }

  }

  // &.block_myoverview,

  &.block_recentlyaccessedcourses {

    border: 0;

    background-color: transparent!important;

  }

  >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($card-inner-border-radius);

    }

    &:last-child {

      border-bottom-width: 0;

      @include border-bottom-radius($card-inner-border-radius);

    }

  }

  &:last-of-type {

    margin-bottom: 0;

  }

  // 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 {

  // 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;

  // Workaround for the image size bug in IE

  // See: https://github.com/twbs/bootstrap/pull/28855

  min-height: 1px;

  color: $card-color;

  &.alert-info {

    padding: 10px;

    border-radius: $btn-border-radius;

  }

  .theme-dark & {

    color: $dm-card-color;

  }

  .generaltable tbody tr {

    border: 0;

  }

}

.card-title {

  margin-bottom: .5rem;

  font-weight: $font-weight-medium;

  font-size: $font-size-xs;

  line-height: 135%;

  color: $body-color-light;

  letter-spacing: .025rem;

  .theme-dark & {

    color: $dm-body-color-light;

  }

  a {

    color: $body-color-light;

    .theme-dark & {

      color: $dm-body-color-light;

    }

  }

}

.card-subtitle {

  margin-top: -$card-spacer-y * 0.5;

  margin-bottom: 0;

}

.card-text {

  font-size: $font-size-sm;

  color: $body-color-secondary;

  .theme-dark & {

    color: $dm-body-color-secondary;

  }

}

.card-text:last-child {

  margin-bottom: 0;

}

.card-link {

  @include hover() {

    text-decoration: none;

  }

  +.card-link {

    margin-left: $card-spacer-x;

  }

}

//

// Optional textual caps

//

.card-header {

  padding: $card-spacer-y $card-spacer-x;

  margin-bottom: 0; // Removes the default margin-bottom of <hN>

  color: $card-cap-color;

  background-color: $card-cap-bg;

  #page-admin-tool-dataprivacy-summary & {

    padding: 5px 0;

  }

  .theme-dark & {

    color: $dm-card-cap-color;

    background-color: $dm-card-cap-bg;

  }

  .course-selected & {

    padding: 20px 0;

    font-size: $font-size-md;

  }

  &:first-child {

    @include border-radius($card-inner-border-radius $card-inner-border-radius 0 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;

  .theme-dark & {

    color: $dm-card-cap-color;

    background-color: $dm-card-cap-bg;

    border-top: $card-border-width solid $dm-card-border-color;

  }

  &:last-child {

    @include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);

  }

  #data-listview-content & {

    padding: 0;

  }

}

.card {

  .footer {

    a {

      margin-right: 16px;

    }

    br {

      display: none;

    }

  }

}

//

// Header navs

//

.card-header-tabs {

  margin-right: -$card-spacer-x * 0.5;

  margin-bottom: -$card-spacer-y;

  margin-left: -$card-spacer-x * 0.5;

  border-bottom: 0;

}

.card-header-pills {

  margin-right: -$card-spacer-x * 0.5;

  margin-left: -$card-spacer-x * 0.5;

}

// Card image

.card-img-overlay {

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  padding: $card-img-overlay-padding;

  @include border-radius($card-inner-border-radius);

}

.card-img,

.card-img-top,

.card-img-bottom {

  flex-shrink: 0; // For IE: https://github.com/twbs/bootstrap/issues/29396

  width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch

}

.card-img,

.card-img-top {

  @include border-top-radius($card-inner-border-radius);

}

.card-img,

.card-img-bottom {

  @include border-bottom-radius($card-inner-border-radius);

}

// Card deck

.card-deck {

  .card {

    margin-bottom: $card-deck-margin;

  }

  @include media-breakpoint-up(sm) {

    display: flex;

    flex-flow: row wrap;

    margin-right: -$card-deck-margin;

    margin-left: -$card-deck-margin;

    .card {

      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4

      flex: 1 0 0%;

      margin-right: $card-deck-margin;

      margin-bottom: 0; // Override the default

      margin-left: $card-deck-margin;

    }

  }

}

//

// Card groups

//

.card-group {

  // The child selector allows nested `.card` within `.card-group`

  // to display properly.

  >.card {

    margin-bottom: $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-right-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-left-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;

          }

        }

      }

    }

  }

}

//

// Columns

//

.card-columns {

  .card {

    margin-bottom: $card-columns-margin;

  }

  @include media-breakpoint-up(sm) {

    column-count: $card-columns-count;

    column-gap: $card-columns-gap;

    orphans: 1;

    widows: 1;

    .card {

      display: inline-block; // Don't let them vertically span multiple columns

      width: 100%; // Don't let their width change

    }

  }

}

//

// Accordion

//

.accordion {

  >.card {

    overflow: hidden;

    &:not(:last-of-type) {

      border-bottom: 0;

      @include border-bottom-radius(0);

    }

    &:not(:first-of-type) {

      @include border-top-radius(0);

    }

    >.card-header {

      @include border-radius(0);

      margin-bottom: -$card-border-width;

    }

  }

}

// Remove styles for HTML blocks

.block_html {

  padding: 0;

  border: none;

  border-radius: 0;

  .theme-dark & {

    border: none;

    .card-body {

      padding: 0;

    }

  }

}

// Moodle 4.4

.course-card .card-img-top,

.theme-card .card-img-top {

  aspect-ratio: 16 / 9;

  background-position: center;

  background-size: cover;

}

.theme-card {

  width: 100%;

  border-radius: $btn-border-radius;

  border: 1px solid $border-color;

  .theme-dark & {

    border-color: $dm-border-color;

  }

  form {

    width: 100%;

  }

  .btn-link {

    width: 30px;

    height: 30px;

    background-color: $gray-100;

    color: $body-color;

    border-radius: 100%;

    &:hover {

      background-color: var(--primary-color-100);

      color: var(--main-theme-color);

    }

    .theme-dark & {

      background-color: $dm-gray-100;

      color: $dm-body-color;

    }

  }

  .h5 {

    font-size: 18px;

    margin-bottom: 0;

  }

}