content_next.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.scss";
@import "components/empty-state.scss";

.context_module .items {
  min-height: 10px; /* sortable on empty */
}

.context_module_item {
  border: none !important;

  &.context_module_item_conditional_info {
    .type_icon i {
      display: inline;
    }

    .conditional_options_count {
      background: #1897D8;
      float: direction(right);
      padding: 2px 15px;
      border-radius: 12px;
      font-size: 11px;
      color: #fff;
    }
  }
}

.al-options a {
  display: block !important;
}

.item-group-container {
  min-height: 450px;
}

.header .publish-icon {
  position: relative;
  bottom: 7px;
}

.context_module .header {
  padding-top: 5px;
  padding-bottom: 5px;
}

.collapse_module_link, .expand_module_link {
  cursor: pointer;
}

.ig-header .icon-lock {
  display: none;
}

.locked .ig-header .icon-lock {
  display: inline;
}

.unlock_at_text {
  font-weight: normal;
  @include fontSize(12px);
}

.add_module_item_link {
  display: inline-block !important;
  margin: 0 10px;
}

.ig-header {
  position: relative;
  display: flex;

  .sortable-handle.reorder_module_link {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
  }

  .ig-header-title {
    flex: 1 1 auto;
  }

  .prerequisites {
    display: flex;
    padding: 0 20px;
    flex: 0 1 auto;
    max-width: 350px;

    .prerequisites_message {
      overflow-wrap: break-word;
      word-wrap: break-word;
      word-break: break-all;
      word-break: break-word;
      hyphens: auto;

      display: flex;
      align-items: center;
      @include fontSize(12px);
      margin: 0;
    }
  }

  .requirements_message {
    display: flex;
    align-items: center;
    flex: 0 0 auto;

    ul {
      display: flex;
      align-items: center;
      font-weight: bold;
    }
  }

  .ig-header-admin {
    flex: 0 0 auto;
    display: flex;
    align-self: center;

    .completion_status {
      margin: 0 16px;
      width: 16px;
      vertical-align: middle;

      i {
        vertical-align: middle;
      }
    }

    .publish-icon {
      display: flex;
      align-items: center;
      padding-#{direction(left)}: 10px;
      padding-top: 12px;
    }
  }
}

.context-modules-main-header {
  height: 33px;
  padding: 15px;
}

.context_module .context_module_items.manageable .context_module_item .move_item_link {
  display: inline !important;
  visibility: visible !important;
}

.context_module {
  border-top: none;
  background-color: transparent;
  min-width: auto;
  margin-bottom: 0;
}

.context_module .header {
  background-color: transparent;
  border-bottom: none;
  padding: auto;
  color: $ic-font-color-dark;
}
.sortable-handle a, .draggable-handle a {
  color: #b4b7ba;
}
.context_module .links a, .context_module .reorder_module_link, .context_module .move_item_link {
  opacity: 1;
}

.context_module_item .completion_requirement {
  font-size: inherit;
  padding-#{direction(left)}: 0;
  margin-top: auto;
  color: inherit;
}

.context_module_item.context_module_item_hover {
  background: #fff;
}

.draggable-handle {
  /* shared with assignments, dry it up */
  color: #b4b7ba;
  margin: direction-sides(0 4px 0 -15px);
  padding: direction-sides(0 0px 0 10px )!important;
}

.sortable-handle,
.draggable-handle,
.draggable-handle a {
  /* not working on headers >:| */
  cursor: move !important;
}

.context_module_item .type_icon i {
  color: inherit;
}

.context_module_placeholder {
  height: 40px !important;
  border: none !important;
}

input.move-module-label-spacer {
  margin-#{direction(right)}: 10px;
}

.move-module-or {
  display: inline-block;
  width: 60px;
  margin-#{direction(left)}: 20px;

}

.move-module-select-spacer {
  margin-top: 10px;
}

.form-element {
  padding: 5px 0;
}

.criterion {
  display: flex;
}

.prereq-req-item {
  flex: 1 1 1;
  padding-#{direction(right)}: 5px;
  .option {
    display: block;
  }
}

.points_possible {
  padding-#{direction(right)}: 5px;
}

.prereq-req-item-delete {
  padding-top: calc((38px - 20px) / 2 );
  position: absolute;
  #{direction(right)}: 5px;
}

.add-item {
  //font-size: 0.9em;
  cursor: pointer;
}

.icon-add {
  padding: 0 5px;
}

.form-section {
  padding: 10px 0 15px;
}

#add_context_module_form {
 padding: 10px 40px 0;
 overflow: visible;
}

.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix {
  padding-#{direction(right)}: 40px;
  padding-#{direction(left)}: 40px;
}

.no-requirements {
  width: 133px;
}

.no-requirements-icon {
  width: 48px;
}
.for-nvda {
  position:absolute;
  #{direction(left)}:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.require-sequential {
  margin-#{direction(left)}: 20px;
}

.header-bar__module-layout {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  small {
    padding-top: 6px;
  }
  form {
    display: inline;
    margin: 0;
  }
}

.item-group-container {
  &.item-group-container--is-empty {
    background: transparent;
    padding: 0;
    border: none;
  }
}