grading_period_sets.scss

/*
 * Copyright (C) 2016 - 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 "components/context_search";

.ItemGroup__header {
  background-color: $lightBackground;
  border: 1px solid $ic-border-light;
  min-height: 30px;
  padding: $ic-sp;
  position: relative;
}

.ItemGroup__header__toggle {
  display: inline-block;
  flex: 0 0 auto;
  margin: auto;
  text-decoration: none;
}

.ItemGroup__header__details {
  display: flex;
  flex: 1 1 auto;
}

.ItemGroup__header__title {
  display: inline-block;
  flex: 1 1 auto;
  font-weight: bold;
  line-height: 20px;
  margin: auto;
  text-decoration: none;
}

.ItemGroup__header__admin {
  align-self: center;
  float: direction(right);
  display: inline-block;
  flex: 0 0 auto;
}

.header-bar.no-line {
  border: none;
}

.ic-Form-actions.below-line {
  border: none;
  border-top: 1px solid $ic-border-light;
  padding: direction-sides($spacing-width 0 0 0);
  background: none;
}

.ic-Input {
  min-width: 0;
}

// GRADING PERIOD SET FORM

.GradingPeriodSetForm {
  background: darken($ic-color-light, 3%);
  border: 1px solid $ic-border-light;
  margin-bottom: $ic-sp*2;
}

// GRADING PERIOD SET

.GradingPeriodSet--expanded,
.GradingPeriodSet--collapsed {
  border-radius: $baseBorderRadius;
  margin-bottom: $ic-sp*2;
}

.GradingPeriodSet--expanded {
  .ItemGroup__header {
    border-radius: direction-corners($baseBorderRadius $baseBorderRadius 0 0);
  }
}

.GradingPeriodSet--collapsed {
  .ItemGroup__header {
    border-radius: $baseBorderRadius;
  }
}

.GradingPeriodSet__title {
  display: inline;
  font-weight: bold;
  @include fontSize($ic-font-size--small);
}

.GradingPeriodSet__toggle {
  color: $ic-font-color-dark;
}

// GRADING PERIOD LIST

.GradingPeriodList {
  border-#{direction(left)}: 1px solid $ic-border-light;
  border-#{direction(right)}: 1px solid $ic-border-light;
}

// GRADING PERIOD LIST -- PERIOD

.GradingPeriodList__period,
.GradingPeriodList__period--editing {
  border-bottom: 1px solid $ic-border-light;

  &::last-child {
    border-bottom: none;
  }
}

.GradingPeriodList__period {
  border-bottom: 1px solid $ic-border-light;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 0;
  padding: 14px;
}

.GradingPeriodList__period__attributes {
  display: flex;
  flex: 1 1 auto;
  margin: 0;
}

.GradingPeriodList__period__attribute {
  line-height: 20px;
}

.GradingPeriodList__period__actions {
  display: flex;
  flex: 0 0 auto;
}

// GRADING PERIOD LIST -- NEW PERIOD

.GradingPeriodList__new-period {
  border-bottom-style: dashed;
  border-color: $ic-border-light;
  border-#{direction(left)}-style: dashed;
  border-#{direction(right)}-style: dashed;
  border-top-style: none;
}

.GradingPeriodList__new-period__add-button {
  line-height: 20px;
  margin: 10px 0;
  padding: 2px 0;

  &:hover {
    text-decoration: none;
  }
}

.GradingPeriodList__new-period--editing {
  border-#{direction(left)}: 1px solid $ic-border-light;
  border-#{direction(right)}: 1px solid $ic-border-light;
  border-bottom: 1px solid $ic-border-light;
}