course_wizard.scss

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

//============================
// Layout Functional Variables
//============================
$ic-wizard-color-dark-neutral: $ic-color-dark;

.ic-wizard-box {
  transition: all 1s $ic-transition;
  width: 100%;
  height: 100%;
  background: $ic-wizard-color-dark-neutral;
  position: fixed;
  bottom: 0; #{direction(left)}: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: url("/images/wizard-bg.jpg") no-repeat center center;
  background-size: cover;
  transform: translate3d(0,100%,0);
  opacity: 0;
  @include breakpoint(desktop) { flex-direction: row; }

  &.ic-wizard-box--is-open {
    transform: translate3d(0,0,0);
    opacity: 1;
  }

  *, *:before, *:after { box-sizing: border-box; }
}

.ic-wizard-box__header {
  flex: 1.3;
  display: flex;
  flex-direction: column;
  order: 1;
  @if $use_high_contrast { background: $ic-wizard-color-dark-neutral; }
  @else { background: rgba($ic-wizard-color-dark-neutral, 0.9); }

  @include breakpoint(mini-tablet) {
    flex-direction: row;
  }
  @include breakpoint(desktop) {
    flex: 1;
    order: 0;
    flex-direction: column;
  }
}

.ic-wizard-box__logo-link {
  background: url("/images/canvas-logo.svg") no-repeat $ic-sp+4 50%;
  background-size: 114px 27px;
  border-#{direction(left)}: 4px solid transparent;
  flex: 0 0 36px;

  &:hover, &:focus {
    border-color: var(--ic-brand-primary);
    background-color: rgba($ic-color-light, 0.1);
  }
  @include breakpoint(mini-tablet) {
    flex: 1;
  }
  @include breakpoint(tablet) {
    background-size: 144px 34px;
  }
  @include breakpoint(desktop) {
    flex: 0 0 $ic-sp*9;
  }

}

.ic-wizard-box__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  @include breakpoint(mini-tablet) {
    flex: 2;
  }
  @include breakpoint(desktop) { flex: 1; }
}

.ic-wizard-box__nav-checklist {
  list-style-type: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  li {
    margin: 0;
    line-height: 1;
    flex: 1;
    display: flex;
  }
}

.ic-wizard-box__content-trigger {
  flex: 1;
  display: flex;
  align-items: center;
  user-select: none;
  padding: direction-sides(0 $ic-sp 0 $ic-sp*4);
  border-#{direction(left)}: 4px solid transparent;
  background: url("/images/wizard-todo-unchecked.svg") no-repeat $ic-sp 50%;
  background-size: 18px 18px;

  @if $use_high_contrast {
    color: $ic-color-light;
    &:hover, &:focus, &.ic-wizard-box__content-trigger--active {
      background-color: var(--ic-brand-primary);
      color: canvas-light;
    }
  }
  @else {
    color: rgba($ic-color-light, 0.9);
    &:hover, &:focus, &.ic-wizard-box__content-trigger--active {
      background-color: rgba($ic-color-light, 0.1);
      color: $ic-color-light;
    }
  }

  @include breakpoint(desktop) { @include fontSize(15px); }

  &:hover, &:focus, &.ic-wizard-box__content-trigger--active {
    border-#{direction(left)}-color: var(--ic-brand-primary);
    text-decoration: none;
    color: $ic-color-light;
  }

  &.ic-wizard-box__content-trigger--checked {
    background-image: url("/images/wizard-todo-checked.svg");
  }
}

.ic-wizard-box__main {
  flex: 2;
  display: flex;
  flex-direction: column;

  @if $use_high_contrast { background: rgba( $ic-wizard-color-dark-neutral, 0.9); }
  @else { background: linear-gradient(to bottom, rgba($ic-wizard-color-dark-neutral, 0.75) 0%,rgba(0,0,0,0) 100%); }
}

.ic-wizard-box__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ic-wizard-box__close {
  text-align: direction(right);
}

.ic-wizard-box__headline {
  line-height: 0.85;
  @include fontSize(36px);
  text-align: center;
  color: $ic-color-light;
  font-weight: bold;
  margin: 0;
  @include breakpoint(mini-tablet) {
    @include fontSize(48px);
    padding: $ic-sp 0;
  }
  @include breakpoint(tablet) {
    @include fontSize(60px);
  }
  @include breakpoint(desktop) {
    @include fontSize(72px);
    padding: $ic-sp*2 0;
  }
}

.ic-wizard-box__message {
  flex: 1;
  display: flex;
  align-items: center;
}


.ic-wizard-box__message-layout {
  position: relative;
  perspective: 500px;

  @include breakpoint(mini-tablet) {
    margin: 0 $ic-sp;
  }
  @include breakpoint(tablet) {
    margin: 0 $ic-sp*2;
  }
  @include breakpoint(desktop) {
    max-width: 600px;
    margin: 0;
  }
}

.ic-wizard-box__message-icon {
  display: none;

  @include breakpoint(mini-tablet) {
    transition: all 1s $ic-transition;
    opacity: 0;
    transform: scale(0) translate3d(0,50%,0);

    display: block;
    background: $ic-wizard-color-dark-neutral;
    width: 72px; height: 72px;
    border-radius: 100%;
    position: absolute;
    #{direction(left)}: 50%; top: -36px;
    z-index: 1;
    margin-#{direction(left)}: -36px;
    display: flex;
    align-items: center;
    justify-content: center;

    &.ic-wizard-box__message-icon--is-fired {
      opacity: 1;
      transform: scale(1) translate3d(0,0,0);
    }

    i[class*=icon-], i[class^=icon-] {
      width: auto; height: auto;
      color: $ic-color-light;
      line-height: 1;
      &:before {
        font-size: $ic-sp*3;
        top: 0;
      }
    }

  }

  @include breakpoint(tablet) {
    i[class*=icon-], i[class^=icon-] {
      &:before { font-size: $ic-sp*3; }
    }
  }

  @include breakpoint(desktop) {
    width: 120px; height: 120px;
    top: -60px; #{direction(left)}: 50%;
    margin-#{direction(left)}: -60px;
    i[class*=icon-], i[class^=icon-] {
      &:before { font-size: $ic-sp*5; }
    }
  }

}

.ic-wizard-box__message-inner {
  transition: all 1s $ic-transition;
  opacity: 0;
  transform: translate3d(0,50%,0);
  background: rgba($ic-color-light, 0.9);
  padding: direction-sides($ic-sp*4 $ic-sp*2 $ic-sp*2 $ic-sp*2);
  box-shadow: 0 1px 4px 1px rgba(black, 0.3);
  text-align: center;

  &.ic-wizard-box__message-inner--is-fired {
    opacity: 1;
    transform: translate3d(0,0,0);
  }

  @if $use_high_contrast { background: $ic-color-light; }
  @else { background: rgba($ic-color-light, 0.9); }

  @include breakpoint(mini-tablet) {
    border-radius: $baseBorderRadius;
  }
  @include breakpoint(desktop) { padding: direction-sides($ic-sp*7 $ic-sp*2 $ic-sp*2 $ic-sp*2); }

}

.ic-wizard-box__message-button {
  margin-top: $ic-sp*2;
}

.ic-wizard-box__message-text {
  margin-bottom: 0;

  @include breakpoint(desktop) {
    @include fontSize(15px);
    line-height: 1.6;
  }
}


// Styles for specific React Components
@import "pages/course_wizard/CourseWizard";