SWAMPy

✎ CARVE FLESH

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

.CourseImageSelector {
  box-sizing: border-box;
  border: 1px solid $ic-border-dark;
  position: absolute;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.CourseImageSelectorWrapper{
  position: relative;
  margin-bottom: $ic-sp;
  &:not(.wide) {
    height: 146px;
    width: 262px;
  }
  &.wide {
    max-width: 562px;
    & > .CourseImageSelectorContent{
      // this gives the element a height of 20% of the width of its parent
      padding-bottom: 20%;
    }
  }
}
.CourseImageSelector__Overlay {
  height: 100%;
  width: 100%;
  background: rgba($ic-color-light, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.CourseImageSelector__Button {
  position: absolute;
  top: 6px;
  #{direction(right)}: 6px;
}

.CourseImagePicker {
  height: 100%;
}

.CourseImagePicker__Content {
  margin: $ic-sp*2 $ic-sp*8;
}

.CourseImagePicker__Overlay {
  position: fixed;
  top: 0;
  #{direction(left)}: 0;
  #{direction(right)}: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 10;
  background: rgba($ic-color-light, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.DraggingOverlay {
  top: $ic-sp;
  #{direction(left)}: $ic-sp;
  #{direction(right)}: $ic-sp;
  bottom: $ic-sp;
  border: 4px dashed var(--ic-brand-primary);
}

.DraggingOverlay__Content {
  width: 100%;
}

.DraggingOverlay__Icon {
  text-align: center;
  color: var(--ic-brand-primary);
  @include overwrite-default-icon-size($ic-sp*8);
}

.DraggingOverlay__Instructions {
  text-align: center;
  font-size: $ic-font-size--large;
}

.UploadArea {
  border: 2px dotted $ic-border-dark;
  border-radius: $ic-border-radius;
  height: 150px;
  display: flex;
  align-items: center;
}

.UploadArea__Content {
  width: 100%;
}

.UploadArea__Icon {
  text-align: center;
  color: var(--ic-brand-primary);
  @include overwrite-default-icon-size($ic-sp*3.5);
}

.UploadArea__Instructions {
  margin-top: $ic-sp*0.5;
  text-align: center;
}

.UploadArea__FileTypes {
  text-align: center;
  font-style: italic;
  margin-top: $ic-sp;
  font-size: $ic-font-size--xsmall;
}

.FileUpload__Input {
  display: none;
}

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