505 lines
9.6 KiB
SCSS
505 lines
9.6 KiB
SCSS
// ------------------------------
|
|
// Styling for files located in the openedx/features repository.
|
|
|
|
// Course sidebar sections
|
|
.course-sidebar {
|
|
.section {
|
|
h3 {
|
|
font-size: $font-size-base;
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
|
|
.icon {
|
|
width: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
&:not(:first-child) {
|
|
margin-top: $baseline;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Course call to action message
|
|
.course-message {
|
|
display: flex;
|
|
|
|
.message-author {
|
|
display: inline-block;
|
|
width: 70px;
|
|
height: 70px;
|
|
border-radius: $baseline*7/4;
|
|
border: 1px solid $border-color;
|
|
|
|
@media (max-width: $grid-breakpoints-md) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.message-content {
|
|
@include margin(0, 0, $baseline, $baseline);
|
|
|
|
flex-grow: 1;
|
|
position: relative;
|
|
border: 1px solid $border-color;
|
|
padding: $baseline;
|
|
border-radius: $baseline/4;
|
|
|
|
@media (max-width: $grid-breakpoints-md) {
|
|
width: 100%;
|
|
margin: $baseline 0;
|
|
}
|
|
|
|
&::after,
|
|
&::before {
|
|
@include left(0);
|
|
|
|
top: 25px;
|
|
border: solid transparent;
|
|
height: 0;
|
|
width: 0;
|
|
content: " ";
|
|
position: absolute;
|
|
|
|
@media (max-width: $grid-breakpoints-md) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&::after {
|
|
@include border-right-color($white);
|
|
@include margin-left($baseline*-1+1);
|
|
|
|
border-width: $baseline/2;
|
|
}
|
|
|
|
&::before {
|
|
@include margin-left($baseline*-1);
|
|
@include border-right-color($border-color);
|
|
|
|
border-width: $baseline/2;
|
|
}
|
|
|
|
.message-header {
|
|
@include margin-right($baseline*4);
|
|
|
|
font-weight: $font-semibold;
|
|
margin-bottom: $baseline/2;
|
|
}
|
|
|
|
a:not(.btn) {
|
|
font-weight: $font-semibold;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.dismiss {
|
|
@include right($baseline/4);
|
|
|
|
top: $baseline/4;
|
|
position: absolute;
|
|
cursor: pointer;
|
|
color: $black-t3;
|
|
|
|
&:hover {
|
|
color: $black-t2;
|
|
}
|
|
}
|
|
// Course Goal Message Styling
|
|
.success-message {
|
|
font-size: font-size(small);
|
|
}
|
|
|
|
.goal-options-container {
|
|
margin-top: $baseline;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
.goal-option {
|
|
text-decoration: none;
|
|
font-size: $font-size-base;
|
|
padding: $baseline/2;
|
|
margin: $baseline/4 $baseline/4 0;
|
|
flex-grow: 1;
|
|
|
|
&:not(.dismissible):first-of-type {
|
|
color: theme-color("purchase");
|
|
border-color: theme-color("purchase");
|
|
|
|
&:hover {
|
|
color: theme-color("inverse");
|
|
background-color: theme-color("purchase");
|
|
}
|
|
}
|
|
|
|
&.dismissible {
|
|
@include right($baseline/4);
|
|
|
|
position: absolute;
|
|
top: $baseline/2;
|
|
margin: 0;
|
|
width: auto;
|
|
flex-grow: 1;
|
|
font-size: font-size(small);
|
|
color: theme-color("primary");
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
color: $black-t2;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: $grid-breakpoints-md) {
|
|
flex-direction: column;
|
|
|
|
.goal-option {
|
|
margin-top: $baseline/4;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.message-actions {
|
|
display: flex;
|
|
margin-top: $baseline/2;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
|
|
// Welcome message / Latest Update message
|
|
.welcome-message,
|
|
.update-message {
|
|
border: solid 1px $border-color;
|
|
|
|
@include border-left(solid 4px $black);
|
|
|
|
margin-bottom: $baseline;
|
|
padding: $baseline;
|
|
overflow: hidden;
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
font-size: font-size(large);
|
|
font-weight: $font-bold;
|
|
color: $black;
|
|
}
|
|
|
|
img {
|
|
@include float(left);
|
|
|
|
margin: $baseline/2;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.dismiss-message {
|
|
@include float(right);
|
|
|
|
.btn-link {
|
|
color: palette(grayscale, base);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Course sidebar
|
|
.course-sidebar {
|
|
@include margin-left(0);
|
|
@include padding-left($baseline);
|
|
|
|
// Course Goal Updates
|
|
.section-goals {
|
|
@include float(left);
|
|
|
|
border: 1px solid $border-color;
|
|
padding: $baseline*0.75 $baseline*0.75 $baseline*0.5;
|
|
border-radius: 5px;
|
|
position: relative;
|
|
width: 100%;
|
|
cursor: pointer;
|
|
margin-bottom: $baseline;
|
|
|
|
&.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.edit-goal-select {
|
|
display: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.edit-icon {
|
|
@include right($baseline/4);
|
|
|
|
position: absolute;
|
|
top: $baseline*0.6;
|
|
cursor: pointer;
|
|
border: transparent;
|
|
background-color: transparent;
|
|
|
|
&:hover {
|
|
color: $border-color;
|
|
}
|
|
}
|
|
|
|
.current-goal-container {
|
|
.title {
|
|
@include margin($baseline/5, $baseline*0.4, 0, 0);
|
|
@include float(left);
|
|
}
|
|
|
|
.title-label {
|
|
display: none;
|
|
}
|
|
|
|
.goal {
|
|
@include float(left);
|
|
@include padding-left($baseline*0.4);
|
|
}
|
|
|
|
.response-icon {
|
|
@include margin-left($baseline/4);
|
|
@include right(-1*$baseline);
|
|
|
|
top: $baseline*0.75;
|
|
position: absolute;
|
|
|
|
&.fa-check {
|
|
color: theme-color("success");
|
|
}
|
|
|
|
&.fa-close {
|
|
color: theme-color("error");
|
|
}
|
|
}
|
|
}
|
|
|
|
.section-tools .course-tool:not(:first-child) {
|
|
margin-top: ($baseline / 5);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Course outline
|
|
.course-outline {
|
|
.block-tree {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style-type: none;
|
|
|
|
.section {
|
|
margin: 0 (-1 * $baseline);
|
|
width: calc(100% + (2 * $baseline));
|
|
padding: 0 ($baseline);
|
|
|
|
&:not(:first-child) {
|
|
.section-name {
|
|
margin-top: $baseline;
|
|
}
|
|
}
|
|
|
|
.section-name {
|
|
@include margin(0, 0, ($baseline / 2), ($baseline / 2));
|
|
|
|
padding: 0;
|
|
|
|
.section-title {
|
|
font-weight: $font-bold;
|
|
font-size: 1.1rem;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.outline-item {
|
|
@include padding-left(0);
|
|
}
|
|
|
|
ol.outline-item {
|
|
padding-bottom: $baseline;
|
|
border-bottom: 1px solid $border-color;
|
|
margin: 0 0 ($baseline / 2) 0;
|
|
|
|
.subsection {
|
|
list-style-type: none;
|
|
border: 1px solid transparent;
|
|
border-radius: 3px;
|
|
margin-bottom: $baseline/4;
|
|
|
|
a.outline-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: ($baseline / 2);
|
|
|
|
.subsection-title {
|
|
margin: 0;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: palette(primary, x-back);
|
|
border-radius: $btn-border-radius;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.subsection-text {
|
|
.details {
|
|
font-size: $body-font-size;
|
|
color: theme-color("secondary");
|
|
}
|
|
}
|
|
|
|
.subsection-actions {
|
|
.resume-right {
|
|
position: relative;
|
|
top: calc(50% - (#{$baseline} / 2));
|
|
}
|
|
}
|
|
}
|
|
|
|
&.current {
|
|
border: 1px solid theme-color("primary");
|
|
border-radius: $btn-border-radius;
|
|
|
|
.resume-right {
|
|
@include float(right);
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
border: 1px solid theme-color("primary");
|
|
}
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// date summary
|
|
.date-summary-container {
|
|
.date-summary {
|
|
@include clearfix;
|
|
@include border-left(3px solid $gray-300);
|
|
|
|
padding: $baseline/2;
|
|
|
|
.heading {
|
|
font-size: 0.9rem;
|
|
line-height: 1;
|
|
font-weight: $font-bold;
|
|
color: theme-color("dark");
|
|
}
|
|
|
|
.description {
|
|
margin-top: $baseline/2;
|
|
margin-bottom: $baseline/2;
|
|
display: inline-block;
|
|
}
|
|
|
|
.date-summary-link {
|
|
font-weight: $font-semibold;
|
|
|
|
a {
|
|
color: $link-color;
|
|
font-weight: $font-regular;
|
|
}
|
|
}
|
|
|
|
.date {
|
|
color: theme-color("dark");
|
|
}
|
|
|
|
&-todays-date {
|
|
@include border-left(3px solid $blue);
|
|
}
|
|
|
|
&-verified-upgrade-deadline {
|
|
@include border-left(3px solid $green);
|
|
}
|
|
|
|
&-verification-deadline-passed {
|
|
@include border-left(3px solid $red);
|
|
}
|
|
|
|
&-verification-deadline-retry {
|
|
@include border-left(3px solid $red);
|
|
}
|
|
|
|
&-verification-deadline-upcoming {
|
|
@include border-left(3px solid $orange);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Course Updates Page
|
|
.course-updates {
|
|
.all-updates {
|
|
flex-grow: 1;
|
|
|
|
.updates-article {
|
|
margin: ($baseline*6/5) 0;
|
|
padding-bottom: ($baseline*6/5);
|
|
border-bottom: 1px solid $border-color;
|
|
|
|
.date {
|
|
font-size: font-size(small);
|
|
font-weight: $font-light;
|
|
float: none;
|
|
padding-bottom: ($baseline/4);
|
|
}
|
|
|
|
&:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
img {
|
|
margin: $baseline/2;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Course Reviews Page
|
|
.course-reviews {
|
|
.page-header.has-secondary > .page-header-main {
|
|
display: block;
|
|
position: relative;
|
|
|
|
.toggle-read-write-reviews {
|
|
position: absolute;
|
|
top: $baseline * (-1/2);
|
|
right: $baseline / 2;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.course-reviews-tool {
|
|
margin: ($baseline * 2) ($baseline * 3);
|
|
position: relative;
|
|
text-align: center;
|
|
min-height: 300px;
|
|
|
|
.fa.fa-spinner {
|
|
@include left(50%);
|
|
|
|
font-size: 2rem;
|
|
margin-top: $baseline*3;
|
|
position: absolute;
|
|
}
|
|
|
|
iframe {
|
|
display: block !important;
|
|
}
|
|
}
|
|
}
|