src/styles.scss
@import './app/variables';
@import './planet-mat-theme.scss';
body {
font-family: $font-family;
margin: 0;
.gradient-background {
background: linear-gradient(to bottom, #000000, $primary);
}
a,
a:hover {
text-decoration: none;
color: inherit;
}
.primary-text-color {
color: $primary;
}
.primary-color {
background-color: $primary;
color: $primary-text;
}
.accent-color {
background-color: $accent;
color: $accent-text;
}
.accent-text-color {
color: $accent;
}
.warn-text-color {
color: $warn;
}
.grey-text-color {
color: $grey-text;
}
.bg-light-grey {
background-color: $light-grey;
}
.bg-grey {
background-color: $grey;
}
.display-flex {
display: flex;
}
// Add an empty span within a mat-toolbar-row to separate left & right aligned content
.toolbar-fill {
flex: 1 1 auto;
}
// Add to forms within toolbars to display next to other content
.toolbar-form {
display: inline-block;
}
// Use to reset font size to base
.font-size-1 {
font-size: 1rem;
}
.full-width {
width: 100%;
}
// Use to give elements horizontal space
.margin-lr {
margin: 0 5px;
}
// Use to give elements vertical space
.margin-tb {
margin: 5px 0;
}
// Use to give elements horizontal and vertical space
.margin-tblr {
margin: 5px 5px;
}
// Use for text in all caps. It avoids problems for screen readers to use this rather than all caps in HTML
// See https://webaim.org/techniques/fonts/#caps
.uppercase {
text-transform: uppercase;
}
// For clickable items which don't have a cursor change by default
.cursor-pointer {
cursor: pointer;
}
// Creates helper classes for smaller and larger horizontal spacing
@mixin margin-lr {
@for $i from 1 through 10 {
.margin-lr-#{$i} {
margin: 0 #{$i}px;
}
}
}
@include margin-lr;
// Hide an element, but render its space
.invisible {
visibility: hidden;
}
// Hide an element entirely, making space for other elements
.hidden {
display: none;
}
.button-icon-text mat-icon {
margin: 0 3px;
}
.mini-icon-button {
height: 1.5em;
width: 1.5em;
vertical-align: baseline;
font: inherit;
.mat-icon {
font-size: inherit;
height: 1.125em;
line-height: 1.125;
width: 1em;
vertical-align: top;
}
}
$list-title-height: 36px;
.list-content-menu, .table-selection-top {
align-self: start;
}
.table-selection-top {
height: $list-title-height;
min-height: $list-title-height;
}
// Style which places menu icon in upper right corner of table cell
.list-content-menu {
display: grid;
grid-template-areas:
'hd mn'
'progress .'
'tags .'
'cn .';
grid-template-columns: auto 50px;
grid-template-rows: $list-title-height 1fr min-content min-content;
.header {
grid-area: hd;
margin: 8px 0;
}
.content {
grid-area: cn;
text-align: justify;
text-justify: inter-word;
max-height: 6rem;
overflow-y: auto;
margin: 0.5rem 0;
}
.menu {
grid-area: mn;
}
.tags-list {
grid-area: tags;
}
.course-progress {
grid-area: progress;
margin-bottom: 0.5rem;
}
}
.list-content-menu-auto {
grid-template-rows: auto 1fr min-content;
}
// the colored stars are placed on top of the uncolored ones
// the width is set dynamically with JS
$stars-margin: 1px;
// Each mat-icon star is 24x24 (5 stars = 120px). Will need to change if star sizes change
$stars-width: calc(120px + (10 * #{$stars-margin}));
.stars {
display: inline-block;
color: $grey;
position: relative;
// Each mat-icon star is 24x24. Will need to change if star sizes change
width: $stars-width;
mat-icon {
padding: 0 $stars-margin;
}
span {
color: $accent;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: inline-flex;
* {
display: inline;
}
}
}
.list-item-rating {
display: grid;
margin: 5px 0;
grid-template-areas:
'ratio rating'
'total rating'
'your your-label';
// 5 mat-icon stars are 120px
grid-template-columns: 130px 1fr;
grid-template-rows: 2.5rem 1fr 1fr;
align-items: center;
.stats-ratio {
grid-area: ratio;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1.75rem 0.75rem;
grid-template-areas: 'm-icon f-icon' 'bar bar';
mat-icon {
align-self: start;
}
.male-icon {
grid-area: m-icon;
}
.female-icon {
grid-area: f-icon;
justify-self: end;
}
planet-stacked-bar {
grid-area: bar;
align-self: end;
}
}
.stats-total, .avg-rating, .your-rating-label {
text-align: center;
}
.stats-total {
grid-area: total;
}
.avg-rating {
grid-area: rating;
align-self: start;
.rating-number {
font-size: 2.5rem;
display: block;
}
}
.your-rating {
grid-area: your;
}
.your-rating-label {
grid-area: your-label;
}
}
.compress-rating .list-item-rating {
grid-template-areas:
'ratio'
'total'
'rating'
'your'
'your-label';
grid-template-columns: 1fr;
grid-template-rows: 1fr;
.avg-rating {
.rating-number {
font-size: 1.5rem;
}
}
}
// create an empty bar with only the border and add another bar inside it with dynamic width calculated with JS
.rating-bar {
display: block;
height: 10px;
border: 1px solid $accent;
margin-top: 0.5em;
div {
background-color: $accent;
height: 100%;
}
}
.small {
font-size: 0.75rem;
}
mat-table .highlight, .primary-lighter-color {
background-color: $primary-lighter;
}
mat-table, .primary-light-color {
background-color: $primary-light;
}
// Fix for checkboxes changing vertical alignment in cells when clicked as of Dec 28, 2017
// See https://github.com/angular/material2/issues/8600 & the 'Include Overflow Styling' section of
// https://material.angular.io/components/table/overview#selection
// Note checkbox column must be named "select" in table
.mat-column-select {
overflow: visible;
}
.planet-radio-section {
display: grid;
align-content: center;
align-items: center;
height: 60px;
}
.planet-radio-button {
margin: 10px;
}
// Remove the underline from mat-form-field for custom fields
.mat-form-field-type-no-underline .mat-form-field-underline {
display: none;
}
.mat-form-field-dynamic-width .mat-form-field-infix {
width: auto;
}
.profile-image-update {
border-radius: 50%;
margin-left: 2rem;
width: 14rem;
height: 14rem;
}
.profile-image-large {
border-radius: 50%;
width: 70%;
}
.profile-image {
max-width: 50px;
height: 50px;
padding: 3px;
}
.space-container {
margin: 0.75rem;
}
.primary-link-hover a:hover {
color: $primary;
}
.view-container {
background-color: $white;
padding: 1rem;
}
// Style to make the view-container fill the available screen space
// 352px = 5 * 64px toolbars + 32px of padding
// Overflow must be set on children
.view-container.view-full-height {
height: $view-container-height;
overflow-y: auto;
box-sizing: border-box;
}
.view-container.view-full-height.view-table {
padding: 0;
position: relative;
display: grid;
// 56px is height of paginator
grid-template-rows: 1fr 56px;
mat-table {
overflow-y: auto;
mat-header-row {
position: sticky;
top: 0;
z-index: 10;
}
}
}
.view-container.view-full-height.no-toolbar {
height: $view-container-height-no-toolbar;
}
// Width of a form with 3 standard matInputs (180px + 10px of padding)
.form-width-3 {
width: 550px;
}
.vertical-form {
display: flex;
flex-direction: column;
}
// Add to a mat-option to remove the checkbox
.hide-checkbox > .mat-pseudo-checkbox {
display: none;
}
.ole-logo {
filter: brightness(0) invert(1);
}
mat-toolbar:first-child > mat-form-field,
mat-toolbar:first-child > planet-selector,
.mat-toolbar form .mat-form-field,
.input-icon {
margin-top: 10px;
&.mat-form-field-type-no-underline {
margin-top: inherit;
}
}
mat-dialog-actions, mat-card-footer.action-buttons {
display: flex;
justify-content: flex-end;
}
mat-row mat-cell {
flex-wrap: wrap;
.mat-raised-button {
margin: 0.125rem 0.25rem 0.125rem 0;
}
}
.course-progress {
display: grid;
grid-template-columns: max-content 1fr;
grid-column-gap: 0.5rem;
margin-bottom: 0.5rem;
planet-courses-progress-bar {
height: 1rem;
width: 100%;
}
}
.collections-search {
.mat-form-field-wrapper {
padding: 0;
}
.mat-form-field-infix {
border: 0;
}
}
@media only screen and (max-width: $screen-sm) {
.collections-search {
display: flex;
justify-content: center;
align-items: center;
}
}
.radio-icon-label {
display: flex;
align-items: center;
}
.planet-chip-label {
padding: 4px 6px;
min-height: 24px;
}
.form-container {
width: calc(#{$form-width-3} + 20px);
}
.form-spacing {
width: $form-width-3;
display: grid;
grid-column-gap: 5px;
grid-template-columns: repeat(auto-fit, $form-field-width);
mat-form-field {
grid-column: span 1;
}
.full-width {
grid-column: 1 / -1;
}
.new-line {
grid-column-start: 1;
}
}
.mat-input-element[readonly]{
color: $grey;
}
.mat-menu-panel.notification-menu {
overflow: hidden;
.mat-menu-content {
div.notification-items {
max-height: calc(100vh - 100px);
overflow-y: auto;
}
}
}
@media only screen and (max-width: $screen-md) {
.form-container {
width: calc(#{$form-width-2} + 20px);
}
.form-spacing {
width: $form-width-2;
}
}
@media only screen and (max-width: $screen-sm) {
.form-container {
width: calc(#{$form-width-1} + 20px);
}
.form-spacing {
width: $form-width-1;
}
}
mat-radio-group[required] > label:after {
content: " *";
}
.inner-gaps {
display: grid;
grid-gap: 3px;
grid-auto-columns: max-content;
}
.inner-gaps.by-column {
grid-auto-flow: column;
}
.ellipsis-text {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.ellipsis-title {
white-space: pre;
overflow: hidden;
text-overflow: ellipsis;
& + button{
min-width: auto;
}
}
mat-toolbar.action-buttons {
margin: 0;
}
.action-buttons {
margin: 0 0 0.5rem 0;
& > * {
margin: 0 0 0 0.25rem;
}
& > *:first-child {
margin: 0;
}
}
.checkbox-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-column-gap: 0.5rem;
margin-bottom: 1rem;
}
.card-grid {
grid-column-gap: 0.5rem;
grid-row-gap: 0.5rem;
margin: 0.25rem;
}
mat-tab-group.tabs-padding .mat-tab-body {
padding-top: 0.5rem;
}
.chip-no-style {
pointer-events: none;
&:focus::after {
opacity: 0;
}
&> mat-icon {
pointer-events: auto;
}
}
// For the members page roles
@media(max-width: $screen-sm) {
.mat-column-roles .mat-chip-list div.mat-chip-list-wrapper {
flex-wrap: nowrap;
}
}
// Course/Resources Details ellipsis menu
.actions-menu .mat-menu-content {
display: flex;
flex-flow: column;
gap: 1rem;
padding: 1rem;
text-align: center;
}
}