gradebook2.sass

@import environment.sass
@import learning_outcome_gradebook.scss

#footer
  display: none
#main
  margin-bottom: 0

$cell_height: 33px

// ******* overrides of the default slick.grid.css styles ********
.slick-sort-indicator
  position: absolute
  bottom: 4px
  left: 0px
.container_1
  .slick-cell
    border: 0
    padding: 0
    overflow: visible
    &.editable
      background: transparent
      border: none
#gradebook_grid .slick-cell.meta-cell
  padding: 0
  border-width: 0 1px
// ******* END overrides of the default slick.grid.css styles ********

.gradebook2 #content
  position: relative
  padding: 0

#gradebook-grid-wrapper
  position: relative

.student-name
  color: #1b7eda
  text-shadow: #fbf8f8 0 0 1px

.meta-cell .avatar
  width: 25px
  height: 25px
  margin-top: 3px
  margin-right: 4px
  float: left
  position: relative
  z-index: 1

.student-placeholder
  display: none
.student-section
  margin-top: -7px
  font-size: 10px
  color: #aaa
.secondary_identifier_cell, .custom_column
  color: #333
  font-size: 10px
  text-align: center
  line-height: 35px

// show and hide student names using a parent css class.
.hide-students
  .student-name, .avatar
    display: none
  .student-placeholder
    display: block
  .secondary_identifier_cell
    text-indent: -9999em

// override the default jquery ui top border
.slick-header.ui-state-default
  border-top: 0
.slick-header-column
  background-color: #f3f4f8
  background-image: none
  padding: 10px
  font-size: 12px
  text-align: center
  font-weight: normal
  // override jqueryUI style
  &.ui-state-default
    height: 30px
  &.hovered-column,
  &.slick-header-column-active,
  &.ui-state-hover
    +vertical-gradient(#e0ecf9, #bdd2e3)

  .slick-column-name
    font-weight: bold
    color: #2f2a34
    text-shadow: #fff 0 0 1px

  a.assignment-name
    font-weight: normal
    color: #1b7ecf
    text-shadow: #fff 0 0 1px

    //this is for the ellises
    overflow: hidden
    text-overflow: ellipsis
    white-space: nowrap
  .muted
    background: url('/images/sound_mute.png') no-repeat center left
    padding-left: 16px
  .assignment-points-possible
    font-weight: normal
    text-shadow: #84848a 0 0 1px
    font-size: 10px
    +opacity(0.5)
    color: #2f2a34
    margin:
      left: 10px
      right: 14px

  .gradebook-header-drop
    z-index: 1 //put it above the "out of"
    background: url('/images/jqueryui/gradebook-header-drop.png') no-repeat top left
    width: 14px
    height: 14px
    position: absolute
    bottom: 3px
    right: 3px
    text-indent: 999px
    +opacity(0)

    //override jqueryui blue border
    border: 0 none

    &:hover, &.ui-menu-trigger-menu-is-open
      background-position: bottom left
      +opacity(1)
  &:hover .gradebook-header-drop
    +opacity(1)


.odd .slick-cell
  background-color: #f5f6f7
.even .slick-cell
  background-color: #fcfcfc
.odd .meta-cell
  background-color: #eff3f4
.even .meta-cell
  background-color: #e6eaec
.odd .total-cell
  background-color: #e0e6e8
.even .total-cell
  background-color: #d7dee1

// overrides of jqueryUI theme
.slick-row.ui-state-active
  color: inherit
  background-image: none
  font-weight: normal
// my styles
.slick-row.ui-state-active  .slick-cell
  background-color: #dfe9f2

.slick-row.ui-state-active .slick-cell.selected
  +vertical-gradient(#d7eaf9, #bedff6)
  :background-color #CDF


.slick-cell div.cell-content
  :text-align center
  :vertical-align middle

.slick-cell.editable
  border-color: #2fa1ff

.slick-cell.ungraded
  background-image: url("/images/4_percent_opacity.png")
  background-repeat: repeat

.gradebook-tooltip
  display: none
  background-color: #444
  color: #fff
  +border-radius(3px)
  padding: 5px 10px
  z-index: 7
  position: absolute
  font-size: 0.8em
  left: 0
  top: -30px
  &:after
    border-color: #444 transparent
    border-style: solid
    border-width: 5px 5px 0
    position: absolute
    bottom: -5px
    width: 0
    left: 15px
    content: ""
  .slick-cell.hover &, .gradebook-cell.focus &, .slick-cell.selected &
    display: block
  &.first-row
    top: 30px
    &:after
      border-top-color: transparent
      border-left-color: transparent
      border-right-color: transparent
      border-bottom: 5px solid #444
      bottom: 30px

.slick-cell.completely-hidden
  display: none

.gradebook-tooltip-last
  left: auto
  right: 0
  &:after
    left: auto
    right: 15px

.gradebook-cell
  padding-top: 8px
  height: $cell_height - 8px
  position: relative
  text-align: center
  border: 1px solid transparent
  border-right: 1px dotted silver
  border-bottom-color: silver
  background-repeat: repeat

  &.late
    background-image: url("/images/gradebook-late-indicator.png")
  &.resubmitted
    background-image: url("/images/gradebook-resubmitted-indicator.png")

.slick-cell.dropped
  background-image: url("/images/gradebook-dropped-indicator.png")
  background-repeat: repeat

.gradebook-cell-turnitin
  position: absolute
  top: 2px
  right: 2px
  z-index: 1
  width: 20px
  height: 16px
  &.no-score
    background-image: url(/images/turnitin_no_score.png)
  &.none-score
    background-image: url(/images/turnitin_none_score.png)
  &.acceptable-score
    background-image: url(/images/turnitin_acceptable_score.png)
  &.warning-score
    background-image: url(/images/turnitin_warning_score.png)
  &.problem-score
    background-image: url(/images/turnitin_problem_score.png)
  &.failure-score
    background-image: url(/images/turnitin_failure_score.png)

.gradebook-cell-comment
  position: absolute
  top: -1px
  right: -1px
  background: url("/images/gradebook-comments-sprite2.png") no-repeat 100% 0
  height: 12px
  width: 12px
  visibility: hidden
  z-index: 2 //needs to be above "normal but below tooltips"
  overflow: hidden

  #gradebook_grid.editable &:hover,
  #gradebook_grid.editable &:focus
    visibility: visible
    background-position: 100% -88px !important
    width: 17px
    height: 17px

  .slick-cell.with-comments &
    visibility: visible
  #gradebook_grid.editable .slick-cell.focus &,
  #gradebook_grid.editable .slick-cell.hover &,
  #gradebook_grid.editable .slick-cell.active &
    visibility: visible
    background-position: 100% -41px
    width: 25px
    height: 25px

.gradebook-cell-comment-label
  +hide-text
  display: inline-block

.gradebook-cell-editable
  height: $cell_height - 1px -8px
  padding-top: 8px
  margin: 0
  border: 1px solid #35a5e5
  background-color: #fff
  box-shadow: 0 0 5px rgba(81, 203, 238, 1)

#gradebook_grid .slick-cell
  z-index: auto
  &.active
    background-color: inherit
    z-index: 5
    border: 1px solid #35a5e5
    top: -1px
    &.editable
      top: 0
      border: 0


.gradebook-cell
  .grade
    border: none
    text-align: center
    outline: none
    font-size: 12px
    width: 100%
    padding: 0
    margin: 0
    background: none
    box-shadow: none !important
  .grade::-webkit-outer-spin-button
    display: none
  .grade::-ms-clear
    display: none
.gradebook-cell-out-of-formatter
  padding-top: 0
  height: $cell_height - 1px
  .overflow-wrapper
    overflow: hidden
    position: relative
    width: 100%
    height: $cell_height - 1px
  .grade-and-outof-wrapper
    position: absolute
    top: 50%
    left: 50%
    width: 400px
    margin-left: -200px
    margin-top: -10px //changeme
    .divider
      padding: 0 1px 0 2px
    .outof, .grade
      width: 200px
      display: inline-block
      background: transparent
    .outof
      +user-select(none)

      text-align: left
      color: #888
    .grade
      border: none
      text-align: right
      outline: none
      font-size: 12px
    .grade::-webkit-outer-spin-button
      display: none

$gradebook_checkbox_width: 16px
.gradebook-checkbox
  +hide-text
  display: block
  position: absolute
  left: 50%
  top: 50%
  width:  $gradebook_checkbox_width
  height: $gradebook_checkbox_width
  margin-top:  -$gradebook_checkbox_width/2
  margin-left: -$gradebook_checkbox_width/2

  background: url("/images/checkbox_sprite3.png") no-repeat 0 0
  &.gradebook-checkbox-pass
    background-position: -48px 0
  &.gradebook-checkbox-fail
    background-position: -64px 0
  &.editable
    &.gradebook-checkbox-pass
      background-position: -16px 0
    &.gradebook-checkbox-fail
      background-position: -32px 0

.minimized
  background-image: url("/images/4_percent_opacity.png")
  .gradebook-cell
    font-size: 0px
    *
      display: none
.minimized .slick-column-name
  display: none

// STUFF FOR HEADER
#gradebook-toolbar
  height: 28px
  padding: 6px 10px
  position: relative
  border-left: none
  border-right: none

.gradebook_filter
  position: absolute
  right: 10px
  top: 6px

.gradebook_filter input
  width: 300px

=gradebook_menu_label($fontsize)
  font-size: $fontsize
  font-weight: bold
  margin-bottom: 0
  vertical-align: 0px !important
  position: relative
  line-height: 1.5

#section-to-show-menu
  width: 200px
  overflow-x: hidden
  overflow-y: auto
  max-height: 275px
  label
    +gradebook_menu_label(12px)
  .ui-state-focus:last-child
    margin: 0 !important

.submission_type_icon
  display: block
  width: 100%
  height: 22px
  background-position: center center
  background-repeat: no-repeat
  .online_text_entry &
    background-image: url('/images/text_entry.png')
  .discussion_topic &
    background-image: url('/images/word_bubble.png')
  .online_upload &
    background-image: url('/images/file.png')
  .pending_review &
    background-image: url('/images/pending_review.png')
  .media_comment &, .media_recording &
    background-image: url('/images/media_comment.gif')
  .quiz &
    background-image: url('/images/quiz.png')

.letter-grade-points
  +opacity(0.4)
  position: absolute
  font-size: 11px
  padding-left: 8px
  line-height: 19px

.final-warning
  margin-left: -16px

.gradebook_drop_down
  li, label
    +gradebook_menu_label(13px)