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

<div class="container">
  <div class="main-content">
    <div class="tc-panel promo-report is-collapsed">
      <div class="tc-panel-header mod-promo-report">
        <div class="tc-panel-header-info">
          <h1 class="tc-panel-header-title mod-promo-report"><span class="icon-starter-report"></span> CERCA Starter Report</h1>
        </div>
        <div class="tc-panel-header-actions">
            <div class="tc-panel-header-actions-item mod-minimize">
              <a class="tc-btn mod-minimize" href="">Expand</a>

mattdetails

.menu
  .school-menu-label Your Schools
  .school-menu-controls
    .menu
    select.school-menu-container
      option.school-menu-item