canvas-lms/app/stylesheets/components/_components.scss

.toolbar {
  @include ui-widget-header-bg-and-text;
  padding: $contentBoxPadding / 2;
  font-size: $baseFontSize;
  line-height: $baseLineHeight;

  .header {
    font-size: 16px;
  }
}

// List View

$ic-brand-course-nav-link--active: $ic-brand-primary;

.list-view {
  overflow: auto;
  & > header,
  // oldskool compat
  #section-tabs-header {
    @if $use_new_styles {
      font-size: 14px;
      font-weight: 500;
      margin: 0 0 $ic-sp/2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    @else {
      background-color: transparent;
      margin-top: 0;
      padding: 8px 7px;
      font-weight: bold;
      color: $gray-dark;
      // oldskool overrides
      font-size: $baseFontSize;
      margin-bottom: 0;
      line-height: 19px;
      height: inherit;
    }
  }
  #section-tabs-header-subtitle {
    display: block;
    font-size: 11px;
    font-style: italic;
    color: inherit;
    @if $use_new_styles == false {
      margin-bottom: $ic-sp/2;
      padding: 0 $ic-sp*0.75;
    }
  }

  & > *:first-child {
    border-top: 0 !important; // oldskool important
  }

  & > ul,
  // oldskool overrides
  & > nav > ul {
    list-style: none;
    margin: 0;
    padding: 0;

    & > li {
      padding: 0;
      & > a {
        display: block;
        text-decoration: none;
        @if $use_new_styles {
          color: $ic-color-dark;
          font-weight: 300;
          border-radius: $baseBorderRadius;
          padding: $ic-sp/2 $ic-sp;
          @include breakpoint(short) { padding: $ic-sp/4 $ic-sp; }
          &:hover, &:focus { background: lighten($ic-color-neutral, 5%); }
        }
        // Default UI styles
        @else {
          color: ensure-contrast($gray, $lightBackground);
          padding: 4px 8px;

          &:hover, &:focus {
            @if $use_high_contrast {
              background: #333;
              color: #fff;
              text-decoration: underline;
            }
            @else { background: $white; }
          }
          &:hover {
            text-decoration: none;
            background: $ic-course-sidenav_list-item--bg-color;
            color: $ic-course-sidenav_list-item--active-font-color;
          }
        }

        & > span {
          white-space: nowrap;
        }

      }

      &:last-child > a {
        border-bottom: 0;
      }
    }
  }

  // lists w/o headers still need a strong border
  & > ul + ul {
    border-top: 1px solid $ic-border-light;
  }

  a.active {
    @if $use_new_styles {
      background-color: $ic-brand-course-nav-link--active;
      font-weight: 500;
      color: $ic-color-light;
      &:hover, &:focus { background-color: $ic-brand-primary; }
      .nav-badge {
        background: $ic-color-light;
        color: $ic-brand-primary;
      }
    }
    @else {
      /// active state colors and backgrounds on left sidenav
      background: $ic-course-sidenav_list-item--bg-color;
      color: $ic-course-sidenav_list-item--active-font-color;
      &:hover {
        background: $ic-course-sidenav_list-item--bg-color;
        color: $ic-course-sidenav_list-item--active-font-color;
      }
    }
  }
}
.image-block {
  @if $use_new_styles { display: flex; }
  @else { @include clearfix; }

  .image-block-image {
    @if $use_new_styles { margin-right: $ic-sp; }
    @else {
      float: left;
      margin-right: $contentBoxPadding;
    }
  }
  .image-block-content {
    @if $use_new_styles {
      flex: 1;
    }
    @else {
      display: table-cell;
      vertical-align: top;
      width: 10000px;
    }
  }
}

.box-shadow {
  box-shadow: 0 2px 4px rgba(0,0,0,.25)
}

.page-action-list {
  @include reset-list;
  a {
    display: block;
    padding: 8px 0;
    @if $use_new_styles {
      color: $ic-color-dark;
      font-weight: 500;
      border-bottom: 1px solid $ic-border-light;
    }
    @else {
      color: $gray;
      font-weight: bold;
      border-bottom: solid 1px lighten($grayLight, 10%);
      box-shadow: 0 1px 0px rgba(255, 255, 255, 0.85);
    }

    &:hover, &:focus {
      @if $use_new_styles { color: $ic-link-color; }
      @else { color: $blue; }
    }

    @if $use_high_contrast { text-decoration: none; }

    &:active {
      color: $grayLight;
    }
  }
}

@if $use_new_styles { * + .page-action-list { margin-top: $ic-sp; } }