SWAMPy

✎ CARVE FLESH

EDITING: _steps.scss

/*
 * Copyright (C) 2018 - 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/>.
 */

.steps-main {
  width: 100%;
  position: absolute;
  #{direction(right)}: 0px;
  transition: all 0.5s linear;
}

.steps-main-status-label {
  animation: 1.0s ease 0s normal forwards 1 fadein;
  position: absolute;
  #{direction(right)}: 140px;
  top: 4px;
}

.steps-container-collapsed {
  transition: all 0.5s linear;
  position: absolute;
  #{direction(right)}: 8px;
  width: 120px;

.step-item-label {
    visibility: hidden;
  }

.progressionContainer {
    visibility: hidden;
  }
}

.steps {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.step {
  margin: -32px 0 0;
  padding: 0;
  min-width: 0.0625rem;
  flex: 1;
}

.step-expanded {
  &:last-of-type {
    flex: 0.5;
  }

&:first-of-type {
    flex: 0.5;
  }
}

.progressionContainer {
  position: relative;
  height: 32px;
  display: flex;
  align-items: center;
}

.progression {
  flex: 1;
  height: 0.0625rem;
  background: $ic-color-medium;
}

.completeProgression {
  position: absolute;
  display: block;
  width: 100%;
  height: 0.125rem;
  offset-inline-start: 0;
  top: calc(50% - (0.125rem / 2));
  background: $shamrock;
  transition: transform 0.2s;
  transform-origin: left center;
}

[dir="rtl"] .completeProgression {
  transform-origin: right center;
}

@keyframes fadein {
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

CANCEL

Name	Type	Size	Modified	Actions
↩ ..	DIR	—	—
📄 _file_select_items.scss	SCSS	1.5 KB	2023-09-24 03:36	EDIT
📄 _step_items.scss	SCSS	3.2 KB	2023-09-24 03:36	EDIT
📄 _steps.scss	SCSS	2.1 KB	2023-09-24 03:36	EDIT
📄 _student_header.scss	SCSS	1.2 KB	2023-09-24 03:36	EDIT
📄 _students_comments.scss	SCSS	1.2 KB	2023-09-24 03:36	EDIT