SWAMPy

✎ CARVE FLESH

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

// Shared between:
// - bundles/login.scss
// - bundles/otp_login.scss

////////////////////////////////////////
/// Theme Editor Variables & Customization
//
/// These are the variables we will be overriding in the
/// Theme Editor. Note the ic-brand- prefix to denote
/// which are customizable.
////////////////////////////////////////
// ic-brand-Login-body-bgd-color
// ic-brand-Login-logo
// ic-brand-Login-body-bgd-shadow-color
// ic-brand-Login-body-bgd-image
// ic-brand-Login-Content-bgd-color
// ic-brand-Login-Content-border-color
// ic-brand-Login-Content-inner-bgd
// ic-brand-Login-Content-inner-border
// ic-brand-Login-Content-inner-body-bgd
// ic-brand-Login-Content-inner-body-border
// ic-brand-Login-Content-label-text-color
// ic-brand-Login-Content-password-text-color
// ic-brand-Login-footer-link-color
// ic-brand-Login-footer-link-color-hover
// ic-brand-Login-instructure-logo

$ic-Login-border-radius: 5px;
$modal_box_width: 623px;
$modal_box_padding: 20px;
$ic-Login-confirmation-bgd: #34444f;

////////////////////////////////////////
// New Login Styles
////////////////////////////////////////
.ic-Layout-contentMain {
  padding: 0;
}

body.ic-Login-Body { // apply the background to the body element so that you don't see white bg as you scroll
  background-color: var(--ic-brand-Login-body-bgd-color);
  background-image:
    linear-gradient(transparent, transparent 80%, var(--ic-brand-Login-body-bgd-shadow-color)),
    var(--ic-brand-Login-body-bgd-image); // if there is a custom image
  background-size: cover;
  background-attachment: fixed;
  height: 100vh; // enable full height
}
.ic-Login {
  display: flex;
  justify-content: center;
  color: $ic-color-light;
}
.ic-Login__container {
  margin-top: $ic-sp*2;
}
.ic-Login__content {
  width: 400px;
  margin: 0 auto;
  background: var(--ic-brand-Login-Content-bgd-color);
  border: 5px solid var(--ic-brand-Login-Content-border-color);
  padding: $ic-sp;
  border-radius: $ic-Login-border-radius;
}
.ic-Login__innerContent {
  padding-top: $ic-sp*2;
  background: var(--ic-brand-Login-Content-inner-bgd);
  border: 2px solid var(--ic-brand-Login-Content-inner-border);
  border-radius: $ic-Login-border-radius;
}
.ic-Login__title {
  color: var(--ic-brand-Login-Content-label-text-color);
}
.ic-Login__text {
  color: var(--ic-brand-Login-Content-label-text-color);
}
//////////
// Login Body
//////////
.ic-Login__body {
  background: var(--ic-brand-Login-Content-inner-body-bgd);
  border: 2px solid var(--ic-brand-Login-Content-inner-body-border);
  padding: direction-sides($ic-sp*1.5 $ic-sp*1.5 $ic-sp $ic-sp*1.5);
  margin-top: $ic-sp;
}
// these have !important because Canvas specificity on labels and
// links will override these if we don't
.ic-Form-control--login .ic-Label {
  color: var(--ic-brand-Login-Content-label-text-color) !important;
}
.ic-Login__link {
  color: var(--ic-brand-Login-Content-password-text-color) !important;
  text-decoration: underline;
}
.ic-Login__body__error {
  display: block;
  position:relative;
  top: auto;
  #{direction(left)}: auto;
  max-width: 400px;
}

//////////
// Login Header
//////////
.ic-Login-header {
  padding: 0 $ic-sp*1.5;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ic-Login-header__logo {
  flex: 0 0 160px;
  // Fix Firefox bug where flexed container doesn't
  // constrain its contents
  min-width: 1px;
}

.ic-Login-header__links {
  flex: 1;
  text-align: direction(right);
  @include fontSize(13px);
  line-height: 1.3;
  box-sizing: border-box;
  padding-#{direction(left)}: $ic-sp;

.ic-Login__link {
    display: block;
    margin-top: $ic-sp*0.5;

&:first-of-type {
      margin-top: 0;
    }
  }
}

.ic-Login__actions {
  display: flex;
  align-items: center;
  .ic-Login__actions-timeout {
    flex: 1;
    label {
      color: var(--ic-brand-Login-Content-label-text-color);
    }

input[type="checkbox"] {
      &:focus {
        outline: 1px solid var(--ic-brand-Login-Content-password-text-color);
        outline-offset: 1px;
      }
    }
  }
  .ic-Login__actions--right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }
  .ic-Login__actions--left {
    flex: 1;
    text-align: direction(left);
  }
  .ic-Form-control {
    margin-bottom: 0; // override to help vertical alignment
  }
  // simulating a ghost button to work for default high contrast login screen
  .Button--login {
    padding: $ic-sp*0.5 $ic-sp*3;
    background: transparent;
    color: var(--ic-brand-Login-Content-password-text-color);
    border: 1px solid var(--ic-brand-Login-Content-password-text-color);
    overflow: visible;

&::before {
      content: "";
      position: absolute;
      top: -0.375rem;
      #{direction(left)}: -0.375rem;
      #{direction(right)}: -0.375rem;
      bottom: -0.375rem;
      border: 1px solid var(--ic-brand-Login-Content-password-text-color);
      border-radius: 0.375rem;
      opacity: 0;
    }

&:focus {
      box-shadow: none;
      &::before {
        opacity: 1;
      }
    }

&::after {
      content: "";
      position: absolute;
      top: 0;
      #{direction(left)}: 0;
      #{direction(right)}: 0;
      bottom: 0;
      border-radius: 0.175rem;
    }

&:hover::after {
      background: var(--ic-brand-Login-Content-password-text-color);
      opacity: 0.1;
    }
  }
}
//////////
// Forgot Password
//////////
.ic-Login__forgot-text {
  color: var(--ic-brand-Login-Content-password-text-color);
  @include fontSize($ic-font-size--small);
  padding: direction-sides(0 0 $ic-sp*2 0);
  margin: 0;
  line-height: $ic-sp*2;
}
//////////
// Enrollment Links
//////////
.ic-Login_enroll {
  text-align: center;
  padding: $ic-sp 0;
}
//////////
// Login Footer
//////////
// this hides the default application footer on
// the login screen so we can have a different
// placement for it
body.ic-Login-Body #footer.ic-app-footer {
  display: none !important;
}
body.ic-Login-Body #footer.ic-Login-footer {
  display: block !important;
}
// end

.ic-Login-footer {
  .ic-Login-footer__logo-link {
    display: block;
    text-align: center;
    .ic-Instructure-Logo {
      fill: var(--ic-brand-Login-instructure-logo);
    }
    &:hover,
    &:focus {
      span {
      border-bottom: 1px solid var(--ic-brand-Login-footer-link-color);
      }
    }
  }
  // hide icon that gets added thru makeAllExternalLinksExternalLinks
  .external_link_icon {display: none !important;}

.ic-Login-footer__links {
    padding: $ic-sp;
    text-align: center;
    a, .menu-item__text, .external {
      @include ic-focus-base;
      &:focus {
        @include ic-focus-variant;
      }
      color: var(--ic-brand-Login-footer-link-color);
      @include fontSize(11px);
      padding: 0 $ic-sp*0.5;
      white-space: nowrap;
      text-decoration: underline;

&:hover,
      &:focus {
        background-color: none;
        color: var(--ic-brand-Login-footer-link-color-hover);
        text-decoration: none;
      }
      // to counteract specificity being used in _external_link stylesheet
      span {
      text-decoration: none;
      }
    }
  }
}
//////////
// Register Banner
//////////
.ic-Login__register-banner {

.ic-Login__banner-title {
    font-weight: normal;
  }
  .ic-Login__banner-subtitle {
    font-weight: bold;
  }
}
//////////
// Unauthorized
//////////
#unauthorized_holder {
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 1);
  margin: 30px auto 20px;
  width: $modal_box_width + 2 * $modal_box_padding;
  #modal-box.login-box {
    margin: 0;
    box-shadow: none;
  }
  #unauthorized_message {
    margin: 0;
    width: auto;
    padding: 15px $modal_box_padding;
    line-height: 1.2;
    &.ui-state-error:before {
      top: 15px;
    }
    h2, .h2 {
      height: 41px;
      margin: direction-sides(0 0 -5px 0);
      padding: direction-sides(0 0 0 60px);
      color: #000;
    }
    p {
      padding: direction-sides(0 0 0 60px);
      margin: 0;
      font-size: 1.25em;
      font-weight: normal;
    }
  }
}

.ic-Login-confirmation__headline {
  margin: 0 0 $ic-sp;
}

.ic-Login-confirmation__actions {
  margin-top: $ic-sp*2;
  text-align: direction(right);
}

////
// Styles specific to the confirmation box, using new UI variables
////
body.body--login-confirmation {
  background: darken($ic-Login-confirmation-bgd, 3%);
}

.ic-Login-confirmation {
  box-sizing: border-box;
  border-radius: $baseBorderRadius;
  box-shadow: 0 1px 4px 1px rgba(black, 0.4);
  width: 400px;
  margin: $ic-sp*3 auto 0;
  width: 696px;
  form { margin-bottom: 0; } //override default margin on forms
}

.ic-Login-confirmation__header {
  background: $ic-Login-confirmation-bgd;
  border-top-#{direction(left)}-radius: $baseBorderRadius;
  border-top-#{direction(right)}-radius: $baseBorderRadius;
  padding: $ic-sp*1.5;
}

.ic-Login-confirmation__logo {
  width: 140px; height: 35px;
}

.ic-Login-confirmation__content {
  padding: $ic-sp*2;
  background: $ic-color-light;
  border-bottom-#{direction(left)}-radius: $baseBorderRadius;
  border-bottom-#{direction(right)}-radius: $baseBorderRadius;
}

.ic-Login-confirmation__auth-icon {
  display: inline-block;
  max-width: 72px;
  height: auto;
  vertical-align: middle;
  margin-#{direction(right)}: $ic-sp;
}

CANCEL

Name	Type	Size	Modified	Actions
↩ ..	DIR	—	—
📄 _ic-login-sso.scss	SCSS	2.5 KB	2023-09-24 03:36	EDIT
📄 _ic-login.scss	SCSS	9.7 KB	2023-09-24 03:36	EDIT
📄 _login_otp.scss	SCSS	927 B	2023-09-24 03:36	EDIT
📄 _registration_dialog.scss	SCSS	1.4 KB	2023-09-24 03:36	EDIT