application.scss

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require commontator/application
 */

@import "bootstrap/functions";
@import "bootstrap/variables";
@import "jquery-ui";

/* set the overriding variables */
$grid-breakpoints: (
  xxxs: 0,
  xxs: 320px,
  xs: 568px,
  sm: 667px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px,
  xxxl: 1600px,
  xxxxl: 1920px,
  xxxxxl: 2160px
);

$container-max-widths: (
  xxxs: 0,
  xxs: 320px,
  xs: 568px,
  sm: 667px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px,
  xxxl: 1600px,
  xxxxl: 1920px,
  xxxxxl: 2160px
);


/* override the !default vars with the values we set above */
@import "bootstrap";
@import "rails_bootstrap_forms";
@import "chapters";
@import "clickers";
@import "colors";
@import "courses";
@import "lectures";
@import "lessons";
@import "main";
@import "media";
@import "notifications";
@import "sections";
@import "tags";
@import "talks";
@import "thyme";
@import "users";
@import "submissions";
@import "vertices";
@import "trix";

$badge-color: #545b62;

trix-toolbar .trix-button-row {
  flex-wrap: wrap;
}

.trix-button-group--file-tools {
  display: none !important;
}

.kaviar-sidebar {
  padding-left: 1rem;
}

.bg-light {
  background-color: #dae0e5;
}

.bg-light[href]:hover {
  background-color: #f8f9fa;
}

.no_display {
  display: none;
}

.no-decoration {
  text-decoration: none;
}

.smaller-font {
  font-size: 0.75em;
}

.quiz {
  font-family: 'Cabin', sans-serif;
}

.correct {
  color: green;
}

.incorrect {
  color: red;
}

.card-xl {
  max-height: 75vh;
  overflow-y: scroll;
}

.card-large {
  max-height: 70vh;
  overflow-y: scroll;
}

.card-medium {
  max-height: 60vh;
  overflow-y: scroll;
}


.card-compact {
  max-height: 50vh;
  overflow-y: scroll;
}

.card-tiny {
  max-height: 30vh;
  overflow-y: scroll;
}

.card-fixed-xxl {
  height: 85vh;
}

.card-fixed-medium {
  height: 65vh;
}

.card-fixed-small {
  height: 20vh;
}

.scrollable {
  overflow-y: scroll;
}


$modal-xl: 1140px !default;
$modal-xxl: 1600px !default;

@include media-breakpoint-up(xl) {
  .modal-xl {
    max-width: $modal-xl;
  }
}

@include media-breakpoint-up(xxl) {
  .modal-xxl {
    max-width: $modal-xxl;
  }
}


.dropdown-menu a {
  text-decoration: none !important;
  color: black;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

.assumption {
  text-decoration: underline;
}

.propertiesCard {
  height: 70vh;
}

.propertiesCardBody {
  overflow-y: scroll;
}

#profileChange {
  display: none;
}

.revertCommontator {
  all: unset;
}

table.submission-table-bordered th {
  border: 1px solid #c5ccd3;
}

table.submission-table-bordered td {
  border: 1px solid #c5ccd3;
}

.exceptionBox {
  background-color: #f8d7da;
}

.error-jumbo {
  margin: auto;
  text-align: center;
  padding: 10px;
}

.flexdiv {
  display: flex;
  justify-content: flex-end;
}

@font-face {
  font-family: 'Roboto';
  src: url('./fonts/Roboto-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/MaterialIcons-Regular.woff2') format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

#main-content-row {
  min-width: 100%;
}

a {
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

.badge {
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

  &:hover,
  &:focus {
    text-decoration: none;
    background-color: $badge-color !important;
    color: white;
  }
}

.btn {
  &:hover {
    text-decoration: none;
  }
}

.nav-link {
  text-decoration: none;

  &:hover {
    text-decoration: none !important;
  }
}

.btn-link {
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

.toast {
  background-color: white;
}