general.scss

@import 'assets/material-theme.scss';
@import './print.scss';

body {
  background-color: #ccc;
  margin: 0px;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

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

.semi-bold {
  font-weight: 700;
}

.btn-primary[disabled] {
  color: rgba(0, 0, 0, 0.26) !important;
  background-color: rgba(0, 0, 0, 0.12) !important;
}

.btn-primary,
.btn-secondary,
.btn-delete {
  min-width: 100px !important;
  font-weight: 400 !important;
  letter-spacing: 1px;
  font-size: 14px;
}

.btn-primary {
  background-color: #0479a8 !important;
  color: white !important;
}

.btn-secondary {
  color: map-get($uw-primary, 500) !important;
  border: 1px solid #b7b7b7 !important;
  border-radius: 4px !important;
}

.btn-link {
  color: map-get($uw-primary, 500) !important;
}

.btn-delete {
  background-color: #b5261e;
  color: white;
}

.in-progress-icon {
  color: #457a3b;
}

.problem-icon {
  color: #f7c376;
}

.error-icon {
  color: map-get($uw-accent, 600);
}

.help-icon {
  color: map-get($uw-primary, 500);
}

.in-progress-icon,
.problem-icon,
.error-icon,
.help-icon,
.not-offered {
  font-size: 16px !important;
  margin-left: 5px;
  padding-top: 5px;
  &:hover,
  &:focus {
    cursor: default;
    opacity: 0.9;
  }
}

.mat-icon,
.material-icons {
  &:hover,
  &:focus {
    opacity: 0.8;
  }
}

.cdk-drop-list-dragging {
  position: relative;
  .cdk-drag-placeholder {
    opacity: 0.4;
    min-height: 100% !important;
    height: 100% !important;
    transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
    border-radius: 5px;
  }
}

.cdk-drag-animating {
  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);
}
.course-list.cdk-drop-list-dragging .course-wrapper:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1) !important;
}

.no-courses {
  padding: 20px 10px;
}

.list-comma::before {
  content: ', ';
}

.list-comma:first-child::before {
  content: '';
}

/*

	Note: The follow styles need to be in the global styles file
	and they need !important.

	The following styles switch the display of the terms hidden within the
	mat-expansion-panel. By default they are always displaying flex, causing
	the drop zone hitbox to mess up and register terms that are in closed panels.

	The !important is needed to overwrite the default styles applied by the mat-expansion-panel
	and these styles need to be in this file because the mat-expansion-panel's body is a seperate
	component and it's styles are encapsulated and cannot be styled directly from one of our components

*/
.term-container-wrapper {
  display: none !important;
}

.mat-expanded,
.ng-animating {
  .term-container-wrapper {
    display: flex !important;
  }
}

// Menus styles

.course-item-menu,
.mat-menu-content {
  width: 200px !important;
}

.saved-for-later-list {
  border-bottom: 1px solid #f1f1f1 !important;
}

// Dialogs styles

.mat-dialog-container {
  min-width: 400px;
  padding: 0px !important;
  .dialog-with-toolbar {
    padding: 0 45px 25px 45px;
    margin: 0px;
  }
}

.dialog-toolbar {
  height: 54px !important;
  padding-right: 0px !important;
  .dialog-toolbar-title {
    flex: 1 1 auto;
    font-weight: 400;
  }
  .close-btn {
    min-height: 55px;
  }
}

// Media queries

@media screen and (max-width: 800px) {
  .mat-dialog-container {
    min-width: 100%;
  }
}

@media screen and (max-width: 957px) {
  .mat-dialog-container {
    .dialog-with-toolbar {
      padding-top: 20px;
    }
  }
}