SWAMPy

✎ CARVE FLESH

EDITING: _course_settings.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/>.
 */

// section tabs variables
$section_tabs_color: $ic-font-color-dark;
$section_tabs_hover_background_color: $ic-bg-light-neutral;
$section_tabs_border_top_color: $ic-border-color;
$section_tabs_border_bottom_color: $ic-border-color;
$section_tabs_to_be_hidden_color: $ic-font-color--subdued;

// #TODO - looks like a lot of these styles are being overridden by the _same_ styles that were
// possibly left in the <style> tag of this area in canvas. So a lot of these are being overridden.
// Need to investigate and consolidate these to get the styles out of the head tag.

#course_form .date_entry {
  width: 165px;
}

#course-status {
  font-size: 0.875rem !important;
  font-weight: normal;
}

.users-wrapper {
  border: 1px solid #ccc;
  margin-bottom: 1.4em;
  h3,
  .h3 {
    @include fontSize(18px);
    margin: 0;
    padding: 8px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ccc;
    line-height: 1em;
  }
  .pagination-loading {
    padding: 8px;
    display: block;
    text-align: center;
    text-decoration: none;
    background-color: #06a9ee;
    color: white;
  }
}

ul.user_list {
  list-style: none;
  padding: 0px;
  margin: 0;
  max-height: 300px;
  min-height: 50px;
  overflow: auto;
  li.none {
    padding: 8px;
  }
}

ul.user_list li.user {
  min-height: 30px;
  padding-#{direction(left)}: 10px;
  color: #444;
  line-height: 1em;
  padding: 8px;
  margin: 0;
  border-bottom: 1px solid #ccc;
  &:last-child {
    border-bottom: 0;
  }
  > span.pending {
    width: 0;
    height: 0;
    padding: 0;
    margin: direction-sides((-8px) 0 0 -8px);
    border-bottom: 10px solid transparent;
    border-#{direction(left)}: 10px solid #06a9ee;
    display: block;
    position: relative;
  }
}

ul.user_list li.user:hover {
  background-color: $ic-bg-light-primary;
}

ul.user_list li.user .email {
  font-size: 0.8em;
  margin-#{direction(left)}: 10px;
}

ul.user_list li.user .associated_user {
  display: none;
  font-size: 0.8em;
  margin-#{direction(left)}: 10px;
}

ul.user_list li.user.observer_enrollment .associated_user {
  display: block;
}

ul.user_list li.user .section {
  font-size: 0.8em;
  margin-#{direction(left)}: 10px;
}

ul.user_list li.user .short_name {
  font-size: 0.8em;
  margin-#{direction(left)}: 10px;
  margin-top: 2px;
}

ul.user_list li.user .associated_user_name:hover {
  text-decoration: underline;
}

ul.user_list li.user .enrollment_type {
  font-size: 0.8em;
  margin: (-2px) 10px 0px;
}

ul.user_list li.user .links {
  float: direction(right);
  padding-#{direction(right)}: 20px;
  padding-top: 5px;
  visibility: hidden;
}

ul.user_list li.user .links a {
  text-decoration: none;
}

ul.user_list li.user:hover .links {
  float: direction(right);
  padding-#{direction(right)}: 20px;
  visibility: visible;
}

ul.user_list div.enrollment_type.pending {
  color: #888;
  font-style: italic;
}

.add-course-users {
  border: 1px solid #ccc;
  margin-bottom: 1.4em;
  .header {
    padding: 8px;
    border-bottom: 1px solid #ccc;
    background-color: #f7f7f7;
    .id-holder {
      float: direction(left);
      padding-#{direction(right)}: 1em;
    }
  }
  #user_list_boxes {
    overflow: hidden;
    margin: 8px;
    #user_list_textarea_container {
      height: auto;
    }
    #user_list_parsed {
      height: auto;
      width: 98%;
    }
  }
}

#sections {
  @include reset-list;
  max-width: 500px;
  list-style-type: none;
}

#sections .section {
  padding: 3px 2px;
}

#sections .section .section_links {
  float: direction(right);
}

#sections .section .users_count {
  padding-#{direction(left)}: 5px;
}

#edit_section_form {
  float: direction(left);
}

.nav_list {
  @include reset-list;
  width: 400px;
  max-width: calc(100vw - 22px);
  margin: 20px 0;
  li.enabled {
    &:hover {
      span {
        display: block;
      }
    }
  }
  li.navitem {
    color: $section_tabs_color;
    cursor: pointer;
    display: block;
    @include fontSize($ic-font-size--small);
    padding: direction-sides(4px 0 4px 25px);
    border: solid $section_tabs_border_bottom_color;
    border-width: 0 1px 1px;
    &:hover {
      background-color: $section_tabs_hover_background_color;
      z-index: 0;
      position: static;
      text-decoration: none;
      .disabled_message {
        display: none;
      }
    }
    .disabled_message {
      display: none;
    }
  }
  li.disabled {
    padding: direction-sides(4px 0 4px 0px);
    border-bottom: 1px solid $section_tabs_border_top_color;
  }
}

#nav_disabled_list {
  li.navitem {
    color: $section_tabs_to_be_hidden_color;
    .disabled_message {
      display: block;
      font-size: 0.8em;
      padding-#{direction(left)}: 10px;
      line-height: 0.7em;
      font-style: italic;
    }
  }
}

.token_input {
  width: 100%;
}

#user_sections {
  list-style: none;
  margin: 0;
  padding: 0;
  li {
    @include name_bubbles;
    clear: direction(left);
  }
}

#edit_sections {
  a.browser {
    background: transparent url(/images/messages/context-search-sprite.png) 0 0 no-repeat;
  }
}

#right-side table.summary {
  margin-top: 20px;
  caption h3 {
    line-height: inherit;
    margin: 0;
    @include fontSize(13px);
    font-weight: bold;
  }
}

.course-settings-sub-navigation-lti .new_badge {
  background-color: #bc3aa6;
  color: white;
  @include fontSize(10px);
  font-weight: normal;
  text-transform: uppercase;
  top: 1px;
}

// new icons need a bit more space when used with
// a link in the right-side-bar
.Button--course-settings {
  i[class*='icon-'],
  i[class^='icon-'] {
    margin-#{direction(right)}: 0.5rem;
  }
}

#course_form div.coursesettings {
  width: 100%;
  display: flex;
  flex-direction: column;

input[type='checkbox'] + label {
    vertical-align: baseline;
  }
  input,
  select,
  td {
    vertical-align: baseline;
  }
  .form-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 0.25rem;

& > div:nth-of-type(1) {
      flex: 1;
    }
    & > div:nth-of-type(2) {
      flex: 4;
    }
    & > div {
      padding-#{direction(right)}: 10px;
    }
    .form-label {
      & label {
        font-weight: bold;
      }
      & .form-label-info {
        margin-top: $ic-sp*0.25;
      }
    }

@media screen and (max-width: 900px) {
      &.form-row > div {
        // At smaller sizes, expand the label to be
        // larger width, so it enacts the flex-wrap
        flex: unset;
        width: 100%;
      }
      // Re-enable wrapping on smaller screen sizes.
      .nobr {
        white-space: normal;
      }
      .syllabus-visibility {
        display: block;
      }
    }
    .checkbox-flex-container {
      // Because we are wrapping, we need to force the
      // checkboxes to inline. We'll use flex to do that.
      display: flex;
      input {
        margin-#{direction(right)}: 0.25rem;
      }
    }
  }
  .tall-row {
    padding-top: 3px;
  }
  .aside {
    font-size: 0.9em;
  }
  .checklabelfix {
    vertical-align: -4px;
  }
  .license_help_link img,
  #course_locale,
  #course_default_wiki_editing_roles {
    vertical-align: baseline;
  }
  .palign {
    line-height: 100%;
    margin-bottom: 10px;
  }
  .top-hint {
    margin-top: 10px;
    margin-bottom: 5px;
  }
  .bottom-hint {
    margin-bottom: 15px;
  }
  select#course_locale + span {
    white-space: nowrap;
  }
  i.date-warning {
    padding: direction-sides(8px 0 0 8px);
    color: $btnWarningBackground;
  }
  select {
    width: 350px;
    max-width: 100%;
  }
  input[type="text"], textarea {
    width: 332px;
    max-width: 100%;
  }

// A few small exceptions
  .course-visibility-row,
  .course-conclude-at-row,
  .course-participation-row,
  .language-row,
  .course-paces-row,
  .friendly-name-row {
    align-items: flex-start;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .friendly-name-row .form-label {
    padding-top: 0.65rem;
  }
}

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

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

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

.drag_and_drop_warning {
  @include accessibility-prompt($is-link: false);
}

a.long {
  min-width: 20px;
}

.not-locked {
  min-width: 16px;
  content: 'p';
}

td.e-tool-table-data {
  line-height: 33px;
}

td.center-text {
  text-align: center;
}

.panel-border {
  border-radius: 10px;
  border: 1px solid #ccc;
  padding: 15px;
  width: 322px;
  max-width: 100%;
}

.master_course_restrictions {
  display: none;
  margin-top: 5px;
  margin-#{direction(left)}: 18px;
}

.master_course_restrictions .ic-Checkbox-group {
  margin-#{direction(left)}: 18px;
}

.caution-text {
  display: flex;
  & i {
    color: $ic-color-danger;
    margin-#{direction(left)}: -0.1rem;
    margin-#{direction(right)}: 0.3rem;
  }
  & p {
    margin: 0;
  }
  &:not(.shown) {
    display: none;
  }
}

.disabled-warning {
  &:not(.shown) {
    display: none;
  }
}

#csp_options {
  margin-top: 10px;
}

CANCEL

Name	Type	Size	Modified	Actions
↩ ..	DIR	—	—
📄 _blueprint_settings.scss	SCSS	1.8 KB	2023-09-24 03:36	EDIT
📄 _course_settings.scss	SCSS	9.5 KB	2023-09-24 03:36	EDIT
📄 _CourseImageSelector.scss	SCSS	2.9 KB	2023-09-24 03:39	EDIT