mattdetails

.tc-panel.cerca-starter-report
  .tc-panel-header
    .tc-panel-header-title CERCA Starter
    .tc-panel-header-actions
      .btn.btn-info.mod-data-key
  .tc-panel-subhead.mod-chart-key
    .chart-key-container.mod-key-cerca-starter
      .chart-key-item.mod-proficient
        .chart-key-icon
        .chart-key-title

mattdetails

SATORI CSS Guide

As of right now, this guide is heavily based on the Trello CSS Guide - We'll slowly but surely write our own documentation based on our agreed upon rules and guides.

---

1. Tools
2. Components
   • Modifiers

• State

mattdetails

<ng-template #notCoveredEngineView>
  <ul class="parts-list">
    <li class="parts-list-item" *ngFor="let part of column['Not Covered']">
      {{ optionDetails[part] }}
    </li>
  </ul>
</ng-template>

mattdetails

.item__LHe52 {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  box-orient: vertical;

mattdetails

.chart-key-icon.mod-needs-grading {
  color: $primary-lt-blue
  &:before {
    content: "mode_edit"
  }
}

mattdetails

if displayCercaStarterReport
  if schoolClassUsers.students.length
  table.tables.starter-table
    thead.starter-table-head
      tr.starter-table-head-row
        th.starter-table-head-cell.mod-student
        th.starter-table-head-cell.mod-starter-average CERCA Starter Average
        th.starter-table-head-cell Conceptual Understanding
        th.starter-table-head-cell Background Knowledge
        th.starter-table-head-cell Applied Practice

mattdetails

if displayCercaStarterReport
  table.tables.starter-table
    thead.starter-table-head
      tr.starter-table-head-row
        th.starter-table-head-cell.mod-student
        th.starter-table-head-cell.mod-starter-average CERCA Starter Average
        th.starter-table-head-cell Conceptual Understanding
        th.starter-table-head-cell Background Knowledge
        th.starter-table-head-cell Applied Practice
    tbody.starter-table-body

mattdetails

.chart-key-item
  i.chart-key-icon.mod-not-available N/A
  h3.chart-key-title.mod-no-description No Lessons Available

mattdetails

$gray-light: #f2f2f2;

$panel-border-color: darken($gray-light, 10%);

.panel {
  border: 2px $panel-border-color solid;
  padding: 20px;
}

mattdetails

.tc-panel
  .tc-panel-header">
    tc-panel-header-info
      h1.tc-panel-header-title Panel Title
    .tc-panel-header-actions
      .tc-panel-header-actions-item
        | Optional actions area - basically floats right.
  .tc-panel-subhead
    | Subhead row
  .tc-panel-content