SWAMPy

✎ CARVE FLESH

EDITING: outcomePopover.scss

/*
 * Copyright (C) 2015 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

@import 'base/environment';
@import 'pages/shared/_outcome_colors';

.outcome-details {
  position: absolute;
  z-index: 1000;
  background-color: #fff;
  border: 1px solid #b0afaf;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.6);
  width: calc(100% - 26px);
  max-width: 500px;
  min-width: 320px;
  padding: 18px 12px;
  border-radius: 8px;
  font-weight: bold;
  color: #4f5f6e;
}

.outcome-details, .outcome-details-dialog {
  .title {
    @include fontSize(14px);
  }
  .chart {
    @include fontSize(11px);
    text-align: center;
    height: 150px;
    padding-bottom: 12px
  }
  .line-graph {
    @include fontSize(10px);
    .guides {
      .tick {
        stroke: lightgrey;
        opacity: 0.7;
      }
      path {
        stroke-width: 0;
      }
    }
    .date-guides {
      path {
        stroke-width: 0;
      }
    }
    .mastery-percentage-guide {
      .tick {
        stroke: #00B416;
        opacity: 0.5;
      }
      path {
        stroke-width: 0;
      }
    }
    .trendline {
      stroke: #9f9f9f
    }
    svg {
      background: #f7f7f7
    }
    .domain {
      fill: none;
      stroke: black;
      stroke-width: 1;
    }
  }
  .ratings {
    font-weight: normal;
    display: inline-block;
    text-align: direction(left);
    margin-bottom: 0px;
    margin-top: 25px;
    .rating {
      list-style-type: none;
    }
    .legend-color {
      width: 13px;
      height: 13px;
      display: inline-block;
      margin-#{direction(right)}: 3px;
      vertical-align: sub;
    }
  }
  .outcome-info {
    clear: both;
    .description {
      font-weight: 200;
    }
  }
  .friendly-description {
    background-color: $ic-color-medium-light;
    padding: 8px;
    margin-top: 10px;
    .friendly-description-info {
      font-weight: 200;
    }
  }
  .mastery {
    clear: both;
    color: #555;
  }
  .last-assessment {
    color: $grayLight;
    font-size: $fontSizeSmall;
  }
  .mastery-details i:before {
    font-size: 1.5em;
  }
  .icon-check-plus:before {
    color: $exceeds-color;
  }
  .icon-check:before {
    color: $mastery-color;
  }
  .icon-plus {
    color: $near-color;
  }
  .icon-x:before {
    color: $remedial-color;
  }
  .method-details {
    background-color: $ic-color-neutral;
    margin-bottom: 0px;
    margin-top: 10px;
    dt {
      width: 140px;
    }
    dd {
      margin-#{direction(left)}: 160px;
      padding-bottom: 10px;
    }
    span {
      display: inline-block;
      font-style: italic;
    }
    .example {
      color: $grayLight;
      font-size: $fontSizeSmall;
    }
    .method-description {
      width: 320px;
    }
  }
}

CANCEL

Name	Type	Size	Modified	Actions
↩ ..	DIR	—	—
📄 outcomePopover.scss	SCSS	3.2 KB	2023-09-24 03:36	EDIT