From 46ccaef6a4f4415e54405dea9ef0c84936beb338 Mon Sep 17 00:00:00 2001 From: MubeenFayyaz-Arbisoft Date: Wed, 5 Mar 2025 14:17:27 +0500 Subject: [PATCH] feat: add styling for MFE --- paragon/_account.scss | 543 +++++---- paragon/_discussion.scss | 475 +++++--- paragon/_footer.scss | 862 +++++++------- paragon/_learning.scss | 533 ++++++--- paragon/_overrides.scss | 841 ++++++------- paragon/_profile.scss | 719 +++++------ paragon/_progress.scss | 400 ++++--- paragon/_variables.scss | 4 +- themes/dark/_extras.scss | 2435 ++++++++++++++++++++------------------ 9 files changed, 3736 insertions(+), 3076 deletions(-) diff --git a/paragon/_account.scss b/paragon/_account.scss index ae7240a5..9c3cd68c 100644 --- a/paragon/_account.scss +++ b/paragon/_account.scss @@ -1,261 +1,324 @@ .page__account-settings { - max-width: 1600px; - margin: 0 auto; - padding: 35px 15px 20px !important; - .form-control { - padding: 6px 10px; - font-size: 14px; - line-height: 20px; - height: 32px; + max-width: 1600px; + margin: 0 auto; + padding: 35px 15px 20px !important; + .form-control { + padding: 6px 10px; + font-size: 14px; + line-height: 20px; + height: 32px; + &:hover, + &:focus { + box-shadow: none; + background-color: $concrete; } - h1 { - color: $text-color; - font-size: 24px; - line-height: 30px; - font-weight: 700; - margin: 0 0 20px; + } + + h1 { + color: $text-color; + font-size: 24px; + line-height: 30px; + font-weight: 700; + margin: 0 0 20px; + } + .account-section { + font-size: 14px; + line-height: 20px; + color: $text-color-primary; + margin-bottom: 20px !important; + p { + margin: 0 0 15px; } - .account-section { - font-size: 14px; - line-height: 20px; - color: $text-color-primary; - p { - margin: 0 0 15px; - } - h2.section-heading { - font-size: 18px; - line-height: 24px; - font-weight: 700; - margin: 0 0 15px; - color: $text-color; - } + h2.section-heading { + font-size: 18px; + line-height: 24px; + font-weight: 700; + margin: 0 0 15px; + color: $text-color; } - .row { - @include media-breakpoint-up(md) { - margin: 0; + @include media-breakpoint-up(md) { + margin-bottom: 64px !important; + } + } + .row { + @include media-breakpoint-up(md) { + margin: 0; + } + .col-md-2 { + position: sticky; + top: 10px; + z-index: 2000; + width: 100%; + flex: 100%; + max-width: 100%; + @include media-breakpoint-up(md) { + flex: 240px; + max-width: 240px; + padding: 0 0 30px; + } + .jump-nav { + padding: 0; + &.position-sticky { + position: static !important; + @include media-breakpoint-up(md) { + position: sticky !important; + } } - .col-md-2 { - flex: 100%; - max-width: 100%; - @include media-breakpoint-up(md) { - flex: 240px; - max-width: 240px; - padding: 0 0 30px; - } - .jump-nav { - padding: 0; - &.position-sticky { - position: static !important; - @include media-breakpoint-up(md) { - position: sticky !important; - } - } - ul { - padding: 0; - margin: 0; - li { - margin: 0 0 2px; - &.font-weight-bold { - a { - background: $primary-light; - color: $primary; - text-decoration: none; - } - } - a { - display: block; - font-size: 14px; - font-weight: 500; - line-height: 20px; - color: $primary; - text-decoration: none; - padding: 8px 12px; - border-radius: 6px; - &:hover { - background: $primary-light; - color: $primary; - text-decoration: none; - } - } - } - } + ul { + overflow: auto; + width: 100%; + z-index: 10; + position: sticky; + top: 0; + border-radius: 10px; + background-color: #fff; + border: 2px solid $primary; + padding: 5px 10px !important; + flex-direction: row; + display: flex; + li { + flex: none; + margin-bottom: 0; + + &.font-weight-bold { + a { + background: $concrete; + color: $text-color !important; + text-decoration: none; + } } - } - .col-md-10 { - flex: 100%; - max-width: 100%; - @include media-breakpoint-up(md) { - flex: 500px; - max-width: 500px; - padding: 0 0 0 50px; + a { + display: block; + font-size: 14px; + font-weight: 500; + line-height: 20px; + color: $text-color !important; + text-decoration: none; + padding: 8px 12px; + border-radius: 6px; + &:hover { + background: $concrete; + text-decoration: none; + } } - @include media-breakpoint-up(lg) { - flex: 750px; - max-width: 750px; + } + @include media-breakpoint-up(md) { + padding: 0; + margin: 0; + border: 0 !important; + background-color: transparent !important; + flex-direction: column; + display: flex; + li { + margin: 0 0 2px; } + } } + } } - #delete-account { - p.text-danger { - margin: 0 0 15px; - font-weight: 400; - font-size: 14px; - } - a.standalone-link { - color: $primary; - } - button.btn-outline-danger { - padding: 7px 13px !important; - border: 1px solid #D1D5DB !important; - font-size: 14px !important; - color: #374151; - text-decoration: none; - font-weight: 500; + .col-md-10 { + flex: 100%; + max-width: 100%; + width: 100%; + @include media-breakpoint-up(md) { + flex: 500px; + max-width: 500px; + padding: 0 0 0 50px; + } + @include media-breakpoint-up(lg) { + flex: 750px; + max-width: 750px; + } + } + } + #delete-account { + p.text-danger { + margin: 0 0 15px; + font-weight: 400; + font-size: 14px; + } + a.standalone-link { + color: $text-color; + text-decoration: none; + &:hover { + text-decoration: underline; + text-decoration-color: $text-color; + text-underline-offset: 3px; + } + } + button.btn-outline-danger { + padding: 8px 14px !important; + border: 1px solid #d1d5db !important; + font-size: 14px !important; + color: #374151; + text-decoration: none; + font-weight: 500; + &:hover { + background-color: #fbf2f3; + } + } + } + + .pgn-transition-replace-group + .form-group { + border: 1px solid $concrete; + border-left: 8px solid $concrete; + padding: 15px !important; + margin: 0 0 15px !important; + border-radius: 8px; + font-size: 14px; + color: $text-color; + h6 { + font-weight: 600; + font-size: 18px; + color: $text-color; + margin: 5px 0 0 !important; + } + p { + margin: 10px 0 0; + button { + &.btn-link { + font-weight: 600; + font-size: 16px; + color: $text-color; } + } } - .pgn-transition-replace-group + .form-group { - border: 1px solid #E5E7EB; - border-left: 8px solid $primary-light; - padding: 15px !important; - margin: 0 0 15px !important; - border-radius: 8px; - font-size: 14px; - color: $text-color; - h6 { - font-weight: 600; - font-size: 18px; - color: $text-color; - margin: 5px 0 0 !important; + .alert-warning { + margin: 10px 0 0 !important; + box-shadow: none; + padding: 15px !important; + background: $concrete !important; + a { + color: $primary; + } + } + } + .pgn-transition-replace-group { + border: 1px solid $concrete; + border-left: 8px solid $concrete; + padding: 15px !important; + margin: 0 0 15px !important; + border-radius: 8px; + font-size: 14px; + color: $text-color; + p.h6 { + font-weight: 600; + font-size: 16px; + color: $text-color; + margin: 5px 0 0 !important; + } + p.small.text-muted, + div.pgn__form-text.pgn__form-text-default { + background: $concrete !important; + padding: 10px 15px; + border-radius: 6px; + font-size: 14px; + line-height: 20px; + color: $text-color !important; + margin: 10px 0 0 !important; + &:empty { + display: none; + } + } + .form-group { + margin: 0; + p.text-truncate, + p[data-hj-suppress="true"] { + font-weight: 600; + font-size: 16px; + color: $text-color-primary; + margin: 5px 0 0 !important; + button { + font-weight: 600; + font-size: 16px; + color: $text-color; + margin: 0 !important; + text-decoration: none; + &:hover { + text-decoration: underline; + } } - p { - margin: 10px 0 0; - button { - &.btn-link { - font-weight: 600; - font-size: 16px; - color: $primary; - } - } + } + .d-flex.align-items-start { + h6 { + padding: 6px 66px 6px 0; + font-size: 18px; + font-weight: 600; + line-height: 24px; + color: $text-color; + margin: 0; } - .alert-warning { - margin: 10px 0 0 !important; - box-shadow: none; - padding: 15px !important; - background: $primary-light !important; - a { - color: $primary; - } + button { + padding: 7px 13px !important; + border: 1px solid $primary !important; + color: #fff; + text-decoration: none; + font-size: 14px; + font-weight: 500; + line-height: 20px; + margin: 0 !important; + position: absolute; + right: 15px; + top: 15px; + background: $primary; + svg { + display: none; + } + &:hover { + background-color: $primary-hover !important; + border: 1px solid $primary-hover !important; + } } - } - .pgn-transition-replace-group { - border: 1px solid #E5E7EB; - border-left: 8px solid $primary-light; - padding: 15px !important; - margin: 0 0 15px !important; - border-radius: 8px; - font-size: 14px; - color: $text-color; - p.h6 { - font-weight: 600; + p { + .small.text-muted { font-size: 16px; - color: $text-color; - margin: 5px 0 0 !important; - } - p.small.text-muted, div.pgn__form-text.pgn__form-text-default { - background: $primary-light; - padding: 10px 15px; - border-radius: 6px; - font-size: 14px; + color: $text-color-primary !important; line-height: 20px; - color: $text-color !important; - margin: 10px 0 0 !important; - &:empty { - display: none; - } - } - .form-group { - margin: 0; - p.text-truncate, p[data-hj-suppress="true"] { - font-weight: 600; - font-size: 16px; - color: $text-color-primary; - margin: 5px 0 0 !important; - button { - font-weight: 600; - font-size: 16px; - color: $primary; - margin: 0 !important; - } - } - .d-flex.align-items-start { - h6 { - padding: 6px 66px 6px 0; - font-size: 18px; - font-weight: 600; - line-height: 24px; - color: $text-color; - margin: 0; - } - button { - padding: 7px 13px !important; - border: 1px solid $primary !important; - color: #fff; - text-decoration: none; - font-size: 14px; - font-weight: 500; - line-height: 20px; - margin: 0 !important; - position: absolute; - right: 15px; - top: 15px; - background: $primary; - svg { - display: none; - } - } - p { - .small.text-muted { - font-size: 16px; - color: $text-color-primary !important; - line-height: 20px; - } - } - } + } } - form { - .pgn__form-control-decorator-group { - margin: 10px 0 0; - } - label.h6 { - font-size: 18px; - font-weight: 600; - line-height: 24px; - color: $text-color; - margin: 0; - } - >p { - text-align: end; - display: flex; - flex-direction: row-reverse; - margin: 0; - button { - padding: 7px 13px !important; - border: 1px solid $primary !important; - color: #fff; - text-decoration: none; - font-size: 14px; - font-weight: 500; - line-height: 20px; - margin: 0 0 0 15px !important; - background: $primary; - border-radius: 8px; - &.btn-outline-primary { - background: #fff !important; - border-color: #D1D5DB !important; - color: #374151; - } - } + } + } + form { + .pgn__form-control-decorator-group { + margin: 10px 0 0; + } + label.h6 { + font-size: 18px; + font-weight: 600; + line-height: 24px; + color: $text-color; + margin: 0; + } + > p { + text-align: end; + display: flex; + flex-direction: row-reverse; + margin: 0; + button { + padding: 7px 13px !important; + border: 1px solid $primary !important; + color: #fff; + text-decoration: none; + font-size: 14px; + font-weight: 500; + line-height: 20px; + margin: 0 0 0 15px !important; + background: $primary; + border-radius: 8px; + &:hover { + background-color: $primary-hover !important; + border: 1px solid $primary-hover !important; + } + &.btn-outline-primary { + background: #fff !important; + border-color: #d1d5db !important; + color: #374151; + &:hover { + background-color: $concrete !important; } + } } - } + } + } + } } diff --git a/paragon/_discussion.scss b/paragon/_discussion.scss index 1ae3d1ce..cb80938d 100644 --- a/paragon/_discussion.scss +++ b/paragon/_discussion.scss @@ -1,121 +1,135 @@ // Discussion style #root #courseTabsNavigation { - padding: 20px 15px !important; - max-width: 1600px; - margin: 0 auto; - width: 100%; - border: none; - .container-xl { - padding: 0 !important; - } - + .container-xl { - .position-relative.mb-4 { - margin: 0 !important; - } + padding: 20px 15px !important; + max-width: 1600px; + margin: 0 auto; + width: 100%; + border: none; + .container-xl { + padding: 0 !important; + } + + .container-xl { + .position-relative.mb-4 { + margin: 0 !important; } + } } #root .header-action-bar { -max-width: 1600px; -margin: 0 auto; -width: 100%; -padding: 0 15px; -box-shadow: none; -position: static; -.navbar { - padding: 0 0 28px; + max-width: 1600px; + margin: 0 auto; + width: 100%; + padding: 0 15px; + box-shadow: none; + position: static; + z-index: 100 !important; + .navbar { + padding: 0 0 32px; @include media-breakpoint-down(sm) { - display: block !important; + display: block !important; } .nav-button-group { - border: 1px solid #E5E7EB; - border-radius: 6px; - padding: 0 !important; - overflow: hidden; - @include media-breakpoint-down(sm) { + border: 1px solid #e5e7eb; + border-radius: 6px; + padding: 0 !important; + overflow: hidden; + @include media-breakpoint-down(sm) { margin: 0 0 10px; - } - .nav-item { + } + .nav-item { &:first-child { - .nav-link { + .nav-link { border-left: none !important; - } + } } .nav-link { - border: none; - border-radius: 0 !important; - border-left: 1px solid #E5E7EB !important; - font-size: 14px; - line-height: 20px; - font-weight: 500; - padding: 9px 17px; - @include media-breakpoint-down(sm) { - padding: 9px 12px; - } - &:hover { - background: $primary-light !important; - } - &.active { + color: $text-color !important; + border: none; + border-radius: 0 !important; + border-left: 1px solid #e5e7eb !important; + font-size: 14px; + line-height: 20px; + font-weight: 500; + padding: 9px 17px; + &:hover { + background-color: $concrete !important; + } + &.active { background: $primary !important; + color: #fff !important; + &:hover { + background: $primary !important; + color: #fff !important; + } + } + @include media-breakpoint-down(sm) { + padding: 9px 12px; + } } - } - - } + } } .border-right.border-light-400.mx-3 { - display: none !important; + display: none !important; } .btn.btn-brand { - padding: 9px 17px; - font-size: 16px; - line-height: 22px; - font-weight: 500; - border-radius: 6px; - background: $primary; - margin: 0 0 0 12px; - white-space: nowrap; + padding: 9px 17px; + font-size: 16px; + line-height: 22px; + font-weight: 500; + border-radius: 6px; + background: $primary; + margin: 0 0 0 12px; + white-space: nowrap; + &:hover { + background-color: $primary-hover !important; + } } .pgn__searchfield { - border: none; - background: $primary-light; - border-radius: 6px; - overflow: hidden; - @include media-breakpoint-down(sm) { + border: none; + background: $concrete; + border-radius: 6px; + overflow: hidden; + @include media-breakpoint-down(sm) { width: 100%; - } - &:after { + } + &:after { display: none !important; - } - form { + } + form { background: none; flex-flow: row-reverse; border: none; border-radius: 6px; .form-control { - background: $primary-light !important; - padding-left: 0; - font-size: 14px; - &:focus{ - box-shadow: none; - } + background: $concrete !important; + padding-left: 0; + font-size: 14px; + &:focus { + box-shadow: none; + } } .pointer-cursor-hover { - margin: 0 !important; - padding: 0 0.75rem !important; + margin: 0 !important; + padding: 0 0.75rem !important; } + } } - } -} + } } .pgn__pageBanner__accentB { -margin: 0 0 30px; + margin: 0 0 30px; } #root .header-action-bar + .d-flex.flex-row.position-relative { -max-width: 1600px; -margin: 0 auto; -padding: 0 15px 30px; -width: 100%; -.flex-column.position-sticky.d-flex { + max-width: 1600px; + margin: 0 auto; + padding: 0 15px 30px; + width: 100%; + border: 1px solid $concrete; + border-radius: 8px !important; + padding: 0 !important; + margin-bottom: 30px !important; + overflow: hidden; + .flex-column.position-sticky.d-flex { position: relative !important; top: 0 !important; max-height: 100% !important; @@ -124,104 +138,287 @@ width: 100%; width: 100% !important; min-width: 290px !important; @include media-breakpoint-down(sm) { - max-width: 100% !important; + max-width: 100% !important; } .pgn-transition-replace-group { - .collapsible-body { + .collapsible-body { padding: 10px !important; .list-group-flush { - width: 33.33%; - .filter-menu { + width: 33.33%; + .filter-menu { font-size: 12px; padding: 0 0 5px !important; align-items: flex-start !important; .pgn__icon { - width: 20px !important; - height: 17px; - margin: 0 5px 0 0 !important; + width: 20px !important; + height: 17px; + margin: 0 5px 0 0 !important; } .text-truncate { - white-space: normal !important; + white-space: normal !important; } + } } - } + } } + .discussion-posts { + border: 1px solid $concrete; + border-radius: 8px 0 0 8px !important; + .btn-icon:hover .btn-icon__icon svg path { + fill: $primary !important; + } } -} -.d-flex.bg-light-400.flex-column { + } + .d-flex.flex-column.w-75.w-xs-100.w-xl-75.align-items-center.overflow-auto { + background-color: $concrete; + border-radius: 0 8px 8px 0 !important; + } + .d-flex.bg-light-400.flex-column { max-width: 65%; @include media-breakpoint-down(sm) { - max-width: 100%; + max-width: 100%; } .post-form { - @include media-breakpoint-down(sm) { + border: unset !important; + @include media-breakpoint-down(sm) { margin: 0 !important; - } - .justify-content-end button { + } + .justify-content-end button { padding: 7px 11px !important; font-size: 12px; font-weight: 500; - } - .font-style.d-flex.flex-row { + } + .font-style.d-flex.flex-row { @include media-breakpoint-down(sm) { - display: block !important + display: block !important; } - } - .card { + } + .card { width: 170px !important; @include media-breakpoint-down(sm) { - width: 120px !important; + width: 120px !important; } .pgn__card-section { - @include media-breakpoint-down(sm) { - padding: 10px !important; - } - } - } + @include media-breakpoint-down(sm) { + padding: 10px !important; + } } + } } + } } .discussion-posts { - .d-flex.flex-row.border-bottom.border-light-400 { - font-size: 14px; - button { - min-width: 98px !important; - text-align: left !important; - } + .d-flex.flex-row.border-bottom.border-light-400 { + font-size: 14px; + button { + min-width: 98px !important; + text-align: left !important; } + } } #root { - .header-action-bar.shadow-none.border-light-300.border-bottom { - padding: 0 15px !important; - margin: 0 0 10px; - .navbar { - padding-left: 0 !important; - padding-right: 0 !important; - } - h4 { - font-size: 14px; - font-weight: 700 !important; - } - button { - font-size: 14px; + .header-action-bar.shadow-none.border-light-300.border-bottom { + padding: 0 15px !important; + margin: 0 0 10px; + .navbar { + padding-left: 0 !important; + padding-right: 0 !important; + } + h4 { + font-size: 14px; + font-weight: 700 !important; + } + button { + font-size: 14px; + } + } +} +.masquerade-bar { + .btn-brand { + background: $primary; + border-color: $primary; + } +} +div[data-learner-type="b2c_learner"] div[role="heading"].h2, +div[role="heading"].h2 { + font-size: 24px; + line-height: 30px; +} + +html[data-mce-style] { + color: lightslategray; +} +.mce-content-body { + color: inherit; + background-color: transparent; +} + +.post-summary-comment-count-dimensions { + width: 24px !important; + height: 24px !important; + display: flex; + align-items: center; + padding: 3px !important; + svg { + color: $text-color; + width: 22px; + height: 22px; + + path { + stroke: $text-color !important; + } + } + &:hover { + background: #f0eeed !important; + border-radius: 100px; + svg { + color: $primary; + width: 22px; + height: 22px; + path { + stroke: $primary !important; + } + } + } +} + +.post-summary-like-dimensions, +.post-summary-icons-dimensions { + &.pgn__icon { + border-radius: 100px !important; + width: 24px !important; + padding: 5px; + height: 24px !important; + } + svg { + color: $text-color; + path { + stroke: $text-color !important; + } + } + &:hover { + background: #f0eeed !important; + padding: 5px !important; + svg { + color: $primary; + path { + stroke: $primary !important; + } + } + } +} + +.post-footer-icon-dimensions { + &.pgn__icon { + border-radius: 100px !important; + width: 24px !important; + padding: 5px; + height: 24px !important; + } + svg { + color: $text-color; + path { + stroke: $text-color !important; + } + } + &:hover { + background: #f0eeed !important; + padding: 5px !important; + .follow-icon-dimensions { + svg { + color: $primary; + path { + fill: $primary !important; + stroke: $primary !important; } + } } + } +} +.standalone-link { + &:hover { + color: $text-color !important; + } } -.masquerade-bar { - .btn-brand { - background: $primary; - border-color: $primary; +select.form-control, +input { + &:hover, + &:focus { + background-color: $concrete !important; + } +} + +.pgn__card .pgn__card-section { + .text-primary-300 { + color: $primary !important; + } + .text-gray-700 { + color: $text-color; + } + &:hover { + border-color: $primary !important; + } +} +.post-form { + .w-100.p-2.bg-light-200 { + .btn-icon:hover .btn-icon__icon svg path { + fill: $primary !important; + } + } + .d-flex.justify-content-end { + .btn.btn-outline-primary { + color: #374151 !important; + border-color: #d1d5db !important; + &:hover { + background-color: $concrete !important; + } + } + } +} + +.pgn__icon.icon-size { + border-radius: 100px !important; + width: 28px !important; + padding: 5px; + margin: 0 !important; + height: 28px !important; + svg { + color: $text-color; + path { + stroke: $text-color !important; + } + } + &:hover { + background: #f0eeed !important; + padding: 5px !important; + svg { + color: $primary; + path { + stroke: $primary !important; + } } + } } -div[data-learner-type=b2c_learner] div[role=heading].h2, div[role=heading].h2 { - font-size: 24px; - line-height: 30px; +.d-flex.align-items-center.pt-1 { + gap: 12px; + .d-flex.align-items-center { + gap: 8px; + } } -html[data-mce-style]{ - color: lightslategray; +.hover-button { + height: 36px !important; + button.btn-icon.btn-icon-primary { + height: 36px !important; + &:hover { + background-color: transparent !important; + .like-icon-dimensions, .follow-icon-dimensions, .dropdown-icon-dimensions{ + &.btn-icon__icon svg path { + stroke: $primary !important; + fill: $primary !important; + } + } + + } + } } -.mce-content-body{ - color: inherit; - background-color: transparent; -} \ No newline at end of file diff --git a/paragon/_footer.scss b/paragon/_footer.scss index 1b64ce4d..72ff779f 100644 --- a/paragon/_footer.scss +++ b/paragon/_footer.scss @@ -1,443 +1,505 @@ // footer style .wrapper-footer { - padding: 25px 0; - border-top: 1px solid #E5E7EB; - @include media-breakpoint-up(md) { - padding: 45px 0; - } + padding: 25px 0; + border-top: 1px solid #e5e7eb; + @include media-breakpoint-up(md) { + padding: 45px 0; + } } footer.tutor-container { - margin: 0 auto; - padding: 0 15px; - max-width: 1600px; - text-align: center; - @include media-breakpoint-up(lg) { - text-align: left; + margin: 0 auto; + padding: 0 15px; + max-width: 1600px; + text-align: center; + @include media-breakpoint-up(lg) { + text-align: left; + } + .footer-top { + margin: 0 0 15px; + &:after { + clear: both; + display: block; + content: ""; } - .footer-top { + .powered-area { + margin: 0 0 10px; + @include media-breakpoint-up(md) { margin: 0 0 15px; + } + @include media-breakpoint-up(lg) { + float: left; + } + } + } + .logo-list { + list-style: none; + margin: 0; + padding: 0; + letter-spacing: -0.3em; + li { + display: inline-block; + vertical-align: middle; + padding: 0 5px; + letter-spacing: normal; + position: relative; + font-size: 12px; + line-height: 18px; + color: $text-color-primary; + &:first-child { + padding-left: 0; + } + &:last-child { + padding-left: 20px; &:after { - clear: both; - display: block; - content: ""; - } - .powered-area { - margin: 0 0 10px; - @include media-breakpoint-up(md) { - margin: 0 0 15px; - } - @include media-breakpoint-up(lg) { - float: left; - } + position: absolute; + left: 5px; + top: 50%; + content: ""; + width: 1px; + height: 29px; + margin: -14px 0 0; + background: $text-color-primary; } + } } - .logo-list { - list-style: none; - margin: 0; - padding: 0; - letter-spacing: -.3em; - li { - display: inline-block; - vertical-align: middle; - padding: 0 5px; - letter-spacing: normal; - position: relative; - font-size: 12px; - line-height: 18px; - color: $text-color-primary; - &:first-child { - padding-left: 0; - } - &:last-child { - padding-left: 20px; - &:after { - position: absolute; - left: 5px; - top: 50%; - content: ""; - width: 1px; - height: 29px; - margin: -14px 0 0; - background: $text-color-primary;; - } - } + } + .nav-colophon { + display: block; + overflow: hidden; + ol { + text-align: center; + li { + display: inline-block; + vertical-align: top; + padding: 0 8px; + font-size: 14px; + line-height: 20px; + @include media-breakpoint-up(md) { + padding: 0 12px; + font-size: 16px; + line-height: 24px; } - } - .nav-colophon { - display: block; - overflow: hidden; - ol { - text-align: center; - li { - display: inline-block; - vertical-align: top; - padding: 0 8px; - font-size: 14px; - line-height: 20px; - @include media-breakpoint-up(md) { - padding: 0 12px; - font-size: 16px; - line-height: 24px; - } - a { - color: $light-dark; - text-decoration: none; - &:hover { - color: #000; - text-decoration: none; - } - } - } + a { + color: $light-dark; + text-decoration: none; + &:hover { + color: #000; + text-decoration: none; + } } + } } - .copyright-site { - display: block; - font-size: 12px; - line-height: 16px; - color: $light-dark; - } + } + .copyright-site { + display: block; + font-size: 12px; + line-height: 16px; + color: $light-dark; + } } .pgn__pageBanner__accentA { - background: #FFFBEB !important; - color: #B45309 !important; - button { - color: #B45309 !important; - white-space: nowrap; - } + background: #fffbeb !important; + color: #b45309 !important; + button { + color: #b45309 !important; + white-space: nowrap; + } } #dashboard-container { - padding: 0 !important; - #dashboard-content { + padding: 0 !important; + #dashboard-content { + .main_container { + padding: 30px 15px !important; + } + @include media-breakpoint-up(lg) { + min-height: calc(100vh - 232px); + padding: 40px 15px !important; + } + } + .container-mw-xl.container-fluid { + max-width: 1600px !important; + padding: 35px 15px !important; + .row { + margin: 0 -15px; + .course-list-column { + flex: 0 0 100%; + max-width: 100%; + padding: 0 15px; @include media-breakpoint-up(lg) { - min-height: calc(100vh - 232px); + flex: 0 0 70%; + max-width: 70%; } - } - .container-mw-xl.container-fluid { - max-width: 1600px !important; - padding: 35px 15px !important; - .row { - margin: 0 -15px; - .course-list-column { - flex: 0 0 100%; - max-width: 100%; - padding: 0 15px; - @include media-breakpoint-up(lg) { - flex: 0 0 70%; - max-width: 70%; + .course-list-heading-container { + display: block; + h2 { + margin: 0 0 5px; + font-size: 24px; + line-height: 30px; + color: $text-color; + } + } + .course-card { + margin: 0 0 16px !important; + .pgn__card { + border-radius: 8px; + border: 1px solid $concrete !important; + box-shadow: none !important; + .flex-column { + > div { + flex-direction: column; + .pgn__card-wrapper-image-cap { + width: 100% !important; + max-width: 100% !important; + } + @media screen and (min-width: 590px) { + display: flex !important; + flex-direction: row; + .pgn__card-wrapper-image-cap { + width: 275px !important; + height: 145px; + } } - .course-list-heading-container { - display: block; - h2 { - margin: 0 0 5px; - font-size: 24px; - line-height: 30px; - color: $text-color; + } + .course-card-banners { + display: block !important; + .alert-content, + .related-programs-banner { + padding: 2px 16px; + font-size: 12px; + line-height: 20px; + .alert-icon { + margin: 0 5px 0 0; + width: 20px; + } + svg { + width: 21px; + height: 24px; + } + .related-programs-list-container { + li { + margin: 0 0 2px !important; } + } } - .course-card { - margin: 0 0 16px !important; - .pgn__card { - border-radius: 8px; - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.1) !important; - .flex-column { - >div { - @media screen and (min-width: 590px) { - display: flex !important; - } - } - .course-card-banners { - display: block !important; - .alert-content, .related-programs-banner { - padding: 2px 16px; - font-size: 12px; - line-height: 20px; - .alert-icon { - margin: 0 5px 0 0; - width: 20px; - } - svg { - width: 21px; - height: 24px; - } - .related-programs-list-container { - li { - margin: 0 0 2px !important; - } - } - } - .alert-success { - .alert-message-content { - a { - background: none; - padding: 0; - font-size: inherit; - line-height: inherit; - } - } - } - } - } - .pgn__card-wrapper-image-cap.horizontal { - min-width: 100%; - max-width: 100%; - @media screen and (min-width: 590px) { - min-width: 225px; - max-width: 225px; - } - @include media-breakpoint-up(md) { - min-width: 275px; - max-width: 275px; - } - img { - width: 100%; - height: 145px; - } - } - .pgn__card-body { - display: flex; - flex-direction: column; - } - .pgn__card-header { - padding: 9px 21px 0; - .pgn__card-header-content { - margin: 0; - h3 { - font-size: 16px; - font-weight: 600; - color: #292C2E; - margin: 0; - } - } - .pgn__card-header-actions { - margin: 0 0 0 15px; - height: 15px; - } - .pgn__dropdown-toggle-iconbutton { - width: auto; - height: auto; - transform: rotate(90deg); - } - .dropdown-menu { - inset: unset !important; - margin: 0px !important; - transform: none !important; - left: auto !important; - right: 0 !important; - width: auto !important; - min-width: 20px !important; - top: 30px !important; - padding: 0; - a { - font-size: 14px; - font-weight: 500; - } - } - } - .pgn__card-section { - padding: 0 21px 18px; - .small { - font-size: 12px; - color: $text-color-primary; - } - } - .pgn__card-footer { - padding: 0 21px 20px; - } - .pgn__action-row { - flex-direction: row; - button, a { - font-size: 14px; - line-height: 20px; - font-weight: 500; - padding: 4px 18px; - border-radius: 6px; - margin: 0; - &:before { - display: none; - } - &.btn-outline-primary { - border: 1px solid #D1D5DB; - color: #374151; - padding: 2px 13px; - margin: 0 7px 0 0; - .btn-icon-before { - width: 20px !important; - margin: 2px 3px 0 0; - } - svg { - width: 17px; - height: 20px; - } - } - } - } + .alert-success { + .alert-message-content { + a { + background: none; + padding: 0; + font-size: inherit; + line-height: inherit; } + } } + .alert-content { + background-color: $concrete !important; + padding: 6px 18px !important; + align-items: center; + .alert-message-content { + color: $text-color; + } + } + } } - .course-filter-controls-container { - text-align: right; - margin: 0 0 15px; - .btn.btn-outline-primary { - border-color: #D1D5DB; - padding: 3px 11px; - font-size: 12px; - line-height: 24px; - font-weight: 500; - color: #374151; - border-radius: 4px; - box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05); - span { - margin: 0; - } - svg { - width: 16px; - fill: #374151; - } + .pgn__card-wrapper-image-cap.horizontal { + min-width: 100%; + max-width: 100%; + @media screen and (min-width: 590px) { + min-width: 225px; + max-width: 225px; + } + @include media-breakpoint-up(md) { + min-width: 275px; + max-width: 275px; + } + img { + width: 100%; + height: 145px; + } + } + .pgn__card-body { + display: flex; + flex-direction: column; + } + .pgn__card-header { + padding: 9px 21px 0; + .pgn__card-header-content { + margin: 0; + h3 { + font-size: 16px; + font-weight: 600; + color: #292c2e; + margin: 0; } - #course-filter-controls-card { - box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), 0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.10); - padding: 15px 15px 3px; - width: 344px; - height: auto; - .pgn__form-control-set > * + * { - margin: 0; - } - .h-100.bg-primary-200.mx-3.my-0 { - display: none !important; - } - .filter-form-col { - margin: 0 !important; - width: 152px; - &.text-left { - width: auto; - border-left: 1px solid #ECF0F4; - padding-left: 20px; - margin-left: 10px; - } - .pgn__form-group { - margin: 0; - } - .filter-form-heading { - font-size: 14px; - font-weight: 500; - color: #191B23; - } - .pgn__form-label { - font-size: 14px; - line-height: 20px; - color: #191B23; - } - .pgn__form-checkbox-input:focus::before, .pgn__form-radio-input:focus::before { display: none !important; } - input[type=radio], input[type=checkbox] { - box-shadow: none !important; - min-width: 20px; - min-height: 20px; - height: 20px; - width: 20px; - border: 1px solid #C4C7CF; - &:checked { - border-color: #15376D; - } - } - input[type=checkbox] { - border-radius: 4px; - } + } + .pgn__card-header-actions { + margin: 0 0 0 15px; + height: 15px; + button { + svg { + color: $text-color; + border-radius: 100px; + &:hover { + background-color: $primary !important; + color: #fff; } + } + } + } + .pgn__dropdown-toggle-iconbutton { + width: auto; + height: auto; + transform: rotate(90deg); + } + .dropdown-menu { + inset: unset !important; + margin: 0px !important; + transform: none !important; + left: auto !important; + right: 0 !important; + width: auto !important; + min-width: 20px !important; + top: 30px !important; + padding: 0; + a { + font-size: 14px; + font-weight: 500; } + } + } + .pgn__card-section { + padding: 0 21px 18px; + .small { + font-size: 12px; + color: $text-color-primary; + } + } + .pgn__card-footer { + padding: 0 21px 20px; } - .sidebar-column { - flex: 0 0 100%; - max-width: 100%; - padding: 0 15px; - @include media-breakpoint-up(lg) { - flex: 0 0 30%; - max-width: 30%; - padding: 80px 15px 0; + .pgn__action-row { + flex-direction: row; + button, + a { + font-size: 14px; + line-height: 20px; + font-weight: 500; + padding: 4px 18px; + border-radius: 6px; + margin: 0; + &:before { + display: none; } - h2.course-list-title { - display: none !important; + &.btn-outline-primary { + border: 1px solid #d1d5db; + color: #374151; + padding: 2px 13px; + margin: 0 7px 0 0; + .btn-icon-before { + width: 20px !important; + margin: 2px 3px 0 0; + } + svg { + width: 17px; + height: 20px; + } + &:hover { + border: 1px solid $concrete !important; + background-color: $concrete !important; + } } - .widget-sidebar { - padding: 0 !important; - #looking-for-challenge-widget { - padding: 0 !important; - box-shadow: none !important; - @include media-breakpoint-up(lg) { - padding: 0 0 0 25px !important; - } - .pgn__card-wrapper-image-cap { - display: none !important; - } - .pgn__card-body { - padding: 0 !important; - h4 { - font-size: 16px; - color: $text-color; - margin: 0 0 8px; - } - a { - color: $primary; - font-size: 12px; - line-height: 18px; - font-weight: 500; - svg { - width: 18px; - fill: $primary; - } - } - } - } + &:hover { + border: 1px solid $primary-hover !important; + background-color: $primary-hover !important; } + } } + } } + } + .course-filter-controls-container { + text-align: right; + margin: 0 0 15px; + .btn.btn-outline-primary { + border-color: #d1d5db; + padding: 4px 12px; + font-size: 12px; + line-height: 24px; + font-weight: 500; + color: #374151; + border-radius: 4px; + span { + margin: 0; + } + svg { + width: 16px; + fill: #374151; + } + &:hover { + background-color: $concrete !important; + } + } + #course-filter-controls-card { + box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.05), + 0px 4px 6px -2px rgba(0, 0, 0, 0.05), + 0px 10px 15px -3px rgba(0, 0, 0, 0.1); + padding: 15px 15px 3px; + width: 344px; + height: auto; + .pgn__form-control-set > * + * { + margin: 0; + } + .h-100.bg-primary-200.mx-3.my-0 { + display: none !important; + } + .filter-form-col { + margin: 0 !important; + width: 152px; + &.text-left { + width: auto; + border-left: 1px solid #ecf0f4; + padding-left: 20px; + margin-left: 10px; + } + .pgn__form-group { + margin: 0; + } + .filter-form-heading { + font-size: 14px; + font-weight: 500; + color: #191b23; + } + .pgn__form-label { + font-size: 14px; + line-height: 20px; + color: #191b23; + } + .pgn__form-checkbox-input:focus::before, + .pgn__form-radio-input:focus::before { + display: none !important; + } + input[type="radio"], + input[type="checkbox"] { + box-shadow: none !important; + min-width: 20px; + min-height: 20px; + height: 20px; + width: 20px; + border: 1px solid #c4c7cf; + &:checked { + border-color: #15376d; + } + } + input[type="checkbox"] { + border-radius: 4px; + } + } + } + } + .sidebar-column { + flex: 0 0 100%; + max-width: 100%; + padding: 0 15px; + @include media-breakpoint-up(lg) { + flex: 0 0 30%; + max-width: 30%; + padding: 80px 15px 0; + } + h2.course-list-title { + display: none !important; + } + .widget-sidebar { + padding: 0 !important; + #looking-for-challenge-widget { + padding: 0 !important; + box-shadow: none !important; + @include media-breakpoint-up(lg) { + padding: 0 0 0 25px !important; + } + .pgn__card-wrapper-image-cap { + display: none !important; + } + .pgn__card-body { + padding: 0 !important; + h4 { + font-size: 16px; + color: $text-color; + margin: 0 0 8px; + } + a { + color: $primary; + font-size: 12px; + line-height: 18px; + font-weight: 500; + svg { + width: 18px; + fill: $primary; + } + } + } + } + } + } } + } } #no-courses-content-view { - box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.06), 0px 1px 3px 0px rgba(0,0,0,0.18); - border: none; - padding: 30px 15px; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.06), + 0px 1px 3px 0px rgba(0, 0, 0, 0.18); + border: none; + padding: 30px 15px; + font-size: 14px; + color: $text-color; + img { + width: 170px; + margin: 0 auto 50px; + } + h1 { + margin: 0 0 5px; + color: $text-color; + font-size: 16px; + font-weight: 700; + line-height: 24px; + } + p { + margin: 0 0 27px; + } + a.btn-brand { + background: $primary; + border-color: $primary; + margin: 0; font-size: 14px; - color: $text-color-primary; - img { - width: 170px; - margin: 0 auto 50px; - } - h1 { - margin: 0 0 5px; - color: $text-color; - font-size: 16px; - font-weight: 700; - line-height: 24px; + font-weight: 500; + line-height: 24px; + padding: 3px 11px; + .btn-icon-before { + height: auto; + margin: 0; } - p { - margin: 0 0 27px; - } - a.btn-brand { - background: $primary; - border-color: $primary; - margin: 0; - font-size: 14px; - font-weight: 500; - line-height: 24px; - padding: 3px 11px; - .btn-icon-before { - height: auto; - margin: 0; - } - svg { - width: 20px; - } + svg { + width: 20px; } + } } #course-list-active-filters { - .pgn__chip.pgn__chip-light { - background: $primary; - * { - color: white; - fill: white; + .pgn__chip.pgn__chip-light { + background-color: $primary !important; + border: 0 !important; + &:hover { + background-color: $primary-hover !important; + &:before { + display: none !important; } + } + * { + color: white; + fill: white; } - .btn.btn-link { - font-size: 14px; - } -} \ No newline at end of file + } + .btn.btn-link { + font-size: 14px; + &:hover { + color: $text-color !important; + } + } +} diff --git a/paragon/_learning.scss b/paragon/_learning.scss index d0604c54..98afee5a 100644 --- a/paragon/_learning.scss +++ b/paragon/_learning.scss @@ -1,229 +1,374 @@ #courseHome-outline { - .pgn_collapsible { - border-radius: 8px; - border: 1px solid #E5E7EB; - border-left: 8px solid $primary-light; - } - .collapsible-trigger { - padding: 8px 20px; - border: none !important; - font-size: 18px; - line-height: 24px; - @include media-breakpoint-up(md) { - font-size: 18px; - line-height: 30px; - padding: 14px 24px; - } - .fa-check-circle { - width: 20px; - height: 20px; - @include media-breakpoint-up(md) { - width: 24px; - height: 24px; - } - } - .text-success { - color: $primary !important; + .pgn_collapsible { + border-radius: 8px; + border: 1px solid $concrete; + border-left: 8px solid $concrete; + + } + .collapsible-trigger { + padding: 8px 20px; + border: none !important; + font-size: 18px; + padding: 16px 24px; + color: #111827 !important; + line-height: 30px; + gap: 16px; + @include media-breakpoint-up(md) { + font-size: 18px; + line-height: 30px; + padding: 14px 24px; + } + .fa-check-circle { + width: 20px; + height: 20px; + @include media-breakpoint-up(md) { + width: 24px; + height: 24px; + } + } + .text-success { + color: $primary !important; + } + .align-middle.col-6 { + padding-left: 0; + } + .d-flex.row { + .col-7.ml-3.text-dark-500 { + flex: 0 0 83.33333333%; + max-width: 83.33333333%; + } + .row { + margin: 0; + padding: 0 0 0 40px; + } + } + } + .collapsible-body { + padding: 0 0 0 56px; + border: none; + .sub-section-list-item { + margin-bottom: 16px; + &:last-child { + margin-bottom: 0; + } + } + @include media-breakpoint-up(md) { + padding: 0 0 0 91px; + } + .text-success { + color: $primary !important; + } + ol { + padding: 0 0 15px; + li { + div { + @include media-breakpoint-down(md) { + line-height: 18px; + } } - .align-middle.col-6 { - padding-left: 0; + a { + color: $text-color; + font-size: 15px; + @include media-breakpoint-up(md) { + font-size: 18px; + } } - .d-flex.row { - .col-7.ml-3.text-dark-500 { - flex: 0 0 83.33333333%; - max-width: 83.33333333%; - } - .row { - margin: 0; - padding: 0 0 0 40px; - } + .border-top { + border: none !important; } + } } - .collapsible-body { - padding: 0 0 0 56px; - border: none; - @include media-breakpoint-up(md) { - padding: 0 0 0 91px; - } - .text-success { - color: $primary !important; - } - ol { - padding: 0 0 15px; - li { - div { - @include media-breakpoint-down(md) { - line-height: 18px; - } - } - a { - color: $text-color; - font-size: 15px; - @include media-breakpoint-up(md) { - font-size: 18px; - } - } - .border-top { border: none !important; } - } + .sub-section-wrapper { + display: flex; + align-items: center; + gap: 16px; + svg { + width: 22px; + height: 22px; + } + .inner-section-text { + display: flex; + align-items: center; + gap: 16px; + a { + color: #111827 !important; + font-size: 18px; + line-height: 30px; + font-weight: 400; } + } } + } } #root { - .bg-light-400 { - background: $primary-light !important; + .bg-light-400 { + background: $primary-light !important; + } + .alert.alert-success { + box-shadow: none; + a { + background: #15376d; + padding: 9px 17px; + font-size: 16px; + line-height: 24px; + border-radius: 6px; + border: none; + &.inline-link { + background: none; + padding: 0; + font-size: inherit; + line-height: inherit; + } } - .alert.alert-success { - box-shadow: none; - a { - background: #15376D; - padding: 9px 17px; - font-size: 16px; - line-height: 24px; - border-radius: 6px; - border: none; - &.inline-link { - background: none; - padding: 0; - font-size: inherit; - line-height: inherit; - } - } + } + .course-main-heading { + margin-bottom: 36px; + } + .course-outline-tab { + .alert-content.raised-card { + background-color: transparent !important; + padding: 0 !important; + .pgn__alert-message-wrapper-stacked { + display: flex; + align-items: flex-start; + } + .pgn__alert-actions { + flex-grow: unset !important; + margin-top: 0 !important; + } } - .course-outline-tab { - .raised-card { - background: $primary-light; - box-shadow: none !important; - &.alert-content { - background: none; - padding: 0; - .alert-message-content { - float: left; - width: calc(100% - 88px); - } - .pgn__alert-actions { - margin: 0; - float: right; - } - } - .pgn__card-header-actions { - @include media-breakpoint-down(md) { - margin-left: 0; - } - a { - background: $primary; - padding: 9px 17px; - font-size: 16px; - line-height: 24px; - border-radius: 6px; - border: none; - @include media-breakpoint-down(md) { - width: 100%; - } - } - } - .pgn__card-header { - display: block; - @include media-breakpoint-up(md) { - display: flex; - } - } + .raised-card { + padding: 14px 20px 0 20px; + background-color: $concrete !important; + line-height: 24px !important; + border-radius: 6px; + box-shadow: none !important; + margin-bottom: 16px !important; + &.alert-content { + background: none; + padding: 0; + .alert-message-content { + float: left; + width: calc(100% - 88px); } - .pgn__card-header-content { - margin: 22px 0 0; - .pgn__card-header-title-md { - font-size: 18px; - line-height: 22px; - color: $text-color; - } + .pgn__alert-actions { + margin: 0; + float: right; + } + } + .pgn__card-header-actions { + gap: 16px; + margin: 0 !important; + @include media-breakpoint-down(md) { + margin-left: 0; + } + a { + background: $primary; + padding: 9px 17px; + font-size: 16px; + line-height: 24px; + border-radius: 6px; + border: none; + &:hover, + &:focus { + background-color: #6a32d1 !important; + } + @include media-breakpoint-down(md) { + width: 100%; + } } - .col-12.col-md-auto.p-0 { - .btn { - font-size: 16px !important; - } + } + .pgn__card-header { + display: block; + padding: 0; + align-items: center; + gap: 10px; + &-content { + margin: 0 !important; + overflow: unset; } + @include media-breakpoint-up(md) { + display: flex; + } + + } } + .pgn__card-header-content { + margin: 22px 0 0; + .pgn__card-header-title-md { + font-size: 18px; + line-height: 22px; + color: $text-color; + } + } + .col-12.col-md-auto.p-0 { + .btn { + font-size: 16px !important; + } + } + } } #root .course-outline-tab .col-12.col-md-auto.p-0 .btn { - background: none !important; - color: $primary !important; + background: none !important; + padding: 10px 17px !important; + color: #111827 !important; + font-size: 16px !important; + border: 1px solid #111827 !important; + &:hover, + &:focus { + background-color: #f3f3f3 !important; + } + &:before { + content: unset !important; + } } .course-tabs-navigation { - padding-top: 20px; - border: none; - .nav.nav-underline-tabs { - border-bottom: 1px solid $primary-light; - a, button { - border-width: 2px; - font-size: 14px; - font-weight: 500; - margin: 0 10px 0 0; - background: none !important; - @include media-breakpoint-up(md) { - margin: 0 32px 0 0; - } - } + padding-top: 20px; + border: none; + .nav.nav-underline-tabs { + border-bottom: 1px solid $primary-light; + a, + button { + border-width: 2px; + font-size: 14px; + font-weight: 500; + margin: 0 10px 0 0; + background: none !important; + @include media-breakpoint-up(md) { + margin: 0 32px 0 0; + } } + } } -div[data-learner-type=b2c_learner] { - div[role=heading].h2 { - font-size: 28px; - line-height: 32px; - margin: 0 0 20px; - color: $text-color; - font-weight: 800; - @include media-breakpoint-up(md) { - font-size: 36px; - line-height: 44px; - } +div[data-learner-type="b2c_learner"] { + div[role="heading"].h2 { + font-size: 28px; + line-height: 32px; + margin: 0 0 20px; + color: $text-color; + font-weight: 800; + @include media-breakpoint-up(md) { + font-size: 36px; + line-height: 44px; } + } } .course-outline-tab { - padding-bottom: 30px; + padding-bottom: 30px; + @include media-breakpoint-up(md) { + padding-bottom: 50px; + } + section.mb-4 { + border-radius: 8px; @include media-breakpoint-up(md) { - padding-bottom: 50px; + padding: 0 0 0 25px; } - section.mb-4 { - border-radius: 8px; - @include media-breakpoint-up(md) { - padding: 0 0 0 25px; - } - h2 { - color: $text-color; - font-size: 20px; - line-height: 28px; - font-weight: 700; - } - ul { - margin: 0; - li { - padding-top: 7px; - a, button { - font-size: 14px; - line-height: 20px; - font-weight: 500; - color: $primary; - text-decoration: underline; - &:hover { - text-decoration: none; - } - svg { - color: #9CA3AF; - } - } - } + h2 { + color: $text-color; + font-size: 20px; + line-height: 28px; + font-weight: 700; + } + ul { + margin: 0; + li { + padding-top: 7px; + a, + button { + font-size: 14px; + line-height: 20px; + font-weight: 500; + color: $primary; + text-decoration: underline; + &:hover { + text-decoration: none; + } + svg { + color: #9ca3af; + } } + } } + } } #courseHome-dates { - a { - &:hover { - color: $primary; + a { + &:hover { + color: $primary; + } + } + .small { + font-size: 14px !important; + .font-weight-bold { + font-weight: 400 !important; + } + } +} + +.course-section-wrapper { + gap: 16px; + .icon-svg { + width: 32px; + height: 32px; + } + .section-heading { + color: #111827 !important; + font-size: 18px; + line-height: 30px; + font-weight: 700; + } + svg { + &.text-success { + fill: #178253 !important; + stroke: #178253 !important; + path { + stroke: #fff !important; + stroke-width: 3px; + &:first-child { + stroke: #178253 !important; } + } + } + &.inComplete { + stroke: #8f8f8f !important; + path { + stroke-width: 3px; + } } - .small { - font-size: 14px !important; - .font-weight-bold { - font-weight: 400 !important; + } +} + +.sub-section-wrapper { + svg { + width: 22px; + height: 22px; + &.text-success { + fill: #178253 !important; + stroke: #178253 !important; + path { + stroke: #fff !important; + stroke-width: 3px; + &:first-child { + stroke: #178253 !important; } + } + } + &.inComplete { + stroke: #8f8f8f !important; + path { + stroke-width: 3px; + } + } + } +} +.collapsible-icon { + margin-inline-start: 0; + button { + color: #4600c7 !important; + &:hover { + background-color: #4600c7 !important; + color: #fff !important; } + } } + diff --git a/paragon/_overrides.scss b/paragon/_overrides.scss index 9a9e6c23..cf01fc08 100644 --- a/paragon/_overrides.scss +++ b/paragon/_overrides.scss @@ -1,461 +1,487 @@ // Use this file to define style overrides for @edx/paragon // This file is included after all Paragon styles, but should generally avoid using private mixins in Paragon. -body, .text-monospace, * { - font-family: 'Inter', sans-serif !important; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - text-rendering: optimizeLegibility; +body, +.text-monospace, +* { + font-family: "Inter", sans-serif !important; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; } html { - width: 100%; - overflow-x: hidden; + width: 100%; + overflow-x: hidden; } .container-xl { - max-width: 1600px !important; - padding-left: 15px !important; - padding-right: 15 !important; + max-width: 1600px !important; + padding-left: 15px !important; + padding-right: 15px !important; } #root .btn:before { - border-color: transparent !important; + border-color: transparent !important; } // detail page #root { - .x-small { - font-size: 14px; + .x-small { + font-size: 14px; + } + nav[aria-label="breadcrumb"] { + max-width: 100% !important; + flex: 0 0 100% !important; + padding: 9px 13px !important; + margin: 20px 0 0 !important; + background: $primary-light; + border-radius: 6px 6px 0px 0px; + @media only screen and (max-width: 576px) { + margin: 0 !important; } - nav[aria-label=breadcrumb] { - max-width: 100% !important; - flex: 0 0 100% !important; - padding: 9px 13px !important; - margin: 20px 0 0 !important; - background: $primary-light; - border-radius: 6px 6px 0px 0px; - @media only screen and (max-width: 576px) { - margin: 0 !important; + ol { + li { + font-size: 14px; + line-height: 20px; + a { + color: $text-color-primary !important; + font-weight: 500; } - ol { - li { - font-size: 14px; - line-height: 20px; - a { - color: $text-color-primary !important; - font-weight: 500; - } - button { - font-size: 14px; - background: none !important; - padding: 0 !important; - line-height: 20px; - color: $text-color-primary !important; - border: none !important; - font-weight: 500; - } - .pgn__menu-select-popup { - display: none; - } - } + button { + font-size: 14px; + background: none !important; + padding: 0 !important; + line-height: 20px; + color: $text-color-primary !important; + border: none !important; + font-weight: 500; } - + div.d-flex.ml-auto, + .w-100.d-flex div.d-flex.ml-auto { - position: absolute; - right: 0; - top: -22px; - .mt-3, .ml-1, >div { - margin: 0 !important; - border: none !important; - &:first-child { - button { - span { - border: none; - transform: none; - width: 21px; - height: auto; - &:after, &:before { - display: none; - } - } - svg { - display: block; - width: 24px; - height: auto; - path { - fill: #9CA3AF; - } - } - } - } - button { - height: auto; - padding: 5px; - border: 1px solid #D1D5DB !important; - position: relative; - margin: 0 0 0 12px; - border-radius: 6px; - .icon-container { - width: 21px !important; - height: 21px !important; - } - span { - box-sizing: border-box; - position: relative; - display: block; - transform: scale(var(--ggs,1)); - border: 2px solid #9CA3AF; - border-bottom: 0; - width: 14px; - height: 14px; - border-top-left-radius: 100px; - border-top-right-radius: 100px; - &:after, &:before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; - } - &:after { - border-radius: 3px; - width: 16px; - height: 10px; - border: 6px solid transparent; - border-top: 1px solid transparent; - box-shadow: inset 0 0 0 4px #9CA3AF, 0 -2px 0 0 #9CA3AF; - top: 14px; - left: -3px; - border-bottom-left-radius: 100px; - border-bottom-right-radius: 100px; - } - &:before { - background: #9CA3AF; - width: 4px; - height: 4px; - top: -4px; - left: 3px; - border-top-left-radius: 100px; - border-top-right-radius: 100px; - } - } - svg { - display: none; - } - } + .pgn__menu-select-popup { + display: none; + } + } + } + + div.d-flex.ml-auto, + + .w-100.d-flex div.d-flex.ml-auto { + position: absolute; + right: 0; + top: -22px; + .mt-3, + .ml-1, + > div { + margin: 0 !important; + border: none !important; + &:first-child { + button { + span { + border: none; + transform: none; + width: 21px; + height: auto; + &:after, + &:before { + display: none; + } } + svg { + display: block; + width: 24px; + height: auto; + path { + fill: #9ca3af; + } + } + } } - + .w-100.d-flex div.d-flex.ml-auto { - @media only screen and (max-width: 576px) { - position: static !important; - padding: 10px 0; + button { + height: auto; + padding: 5px; + border: 1px solid #d1d5db !important; + position: relative; + margin: 0 0 0 12px; + border-radius: 6px; + .icon-container { + width: 21px !important; + height: 21px !important; + } + span { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--ggs, 1)); + border: 2px solid #9ca3af; + border-bottom: 0; + width: 14px; + height: 14px; + border-top-left-radius: 100px; + border-top-right-radius: 100px; + &:after, + &:before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + } + &:after { + border-radius: 3px; + width: 16px; + height: 10px; + border: 6px solid transparent; + border-top: 1px solid transparent; + box-shadow: inset 0 0 0 4px #9ca3af, 0 -2px 0 0 #9ca3af; + top: 14px; + left: -3px; + border-bottom-left-radius: 100px; + border-bottom-right-radius: 100px; + } + &:before { + background: #9ca3af; + width: 4px; + height: 4px; + top: -4px; + left: 3px; + border-top-left-radius: 100px; + border-top-right-radius: 100px; } + } + svg { + display: none; + } } + } } - .w-100.d-flex.align-items-center { - div.d-flex.ml-auto { + + .w-100.d-flex div.d-flex.ml-auto { + @media only screen and (max-width: 576px) { + position: static !important; + padding: 10px 0; + } + } + } + .w-100.d-flex.align-items-center { + div.d-flex.ml-auto { + position: relative; + padding: 0 0 10px; + .ml-1, + > div { + margin: 0 !important; + border: none !important; + &:first-child { + button { + span { + border: none; + transform: none; + width: 21px; + height: auto; + &:after, + &:before { + display: none; + } + } + svg { + display: block; + width: 24px; + height: auto; + path { + fill: #9ca3af; + } + } + } + } + button { + padding: 5px; + border: 1px solid #d1d5db !important; + position: relative; + margin: 0 0 0 12px; + border-radius: 6px; + .icon-container { + width: 21px !important; + height: 21px !important; + } + span.pgn__icon { + box-sizing: border-box; position: relative; - padding: 0 0 10px; - .ml-1, >div { - margin: 0 !important; - border: none !important; - &:first-child { - button { - span { - border: none; - transform: none; - width: 21px; - height: auto; - &:after, &:before { - display: none; - } - } - svg { - display: block; - width: 24px; - height: auto; - path { - fill: #9CA3AF; - } - } - } - } - button { - padding: 5px; - border: 1px solid #D1D5DB !important; - position: relative; - margin: 0 0 0 12px; - border-radius: 6px; - .icon-container { - width: 21px !important; - height: 21px !important; - } - span.pgn__icon { - box-sizing: border-box; - position: relative; - display: block; - transform: scale(var(--ggs,1)); - border: 2px solid #9CA3AF; - border-bottom: 0; - width: 14px; - height: 14px; - border-top-left-radius: 100px; - border-top-right-radius: 100px; - &:after, &:before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; - } - &:after { - border-radius: 3px; - width: 16px; - height: 10px; - border: 6px solid transparent; - border-top: 1px solid transparent; - box-shadow: inset 0 0 0 4px #9CA3AF, 0 -2px 0 0 #9CA3AF; - top: 14px; - left: -3px; - border-bottom-left-radius: 100px; - border-bottom-right-radius: 100px; - } - &:before { - background: #9CA3AF; - width: 4px; - height: 4px; - top: -4px; - left: 3px; - border-top-left-radius: 100px; - border-top-right-radius: 100px; - } - } - svg { - display: none; - } - } + display: block; + transform: scale(var(--ggs, 1)); + border: 2px solid #9ca3af; + border-bottom: 0; + width: 14px; + height: 14px; + border-top-left-radius: 100px; + border-top-right-radius: 100px; + &:after, + &:before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + } + &:after { + border-radius: 3px; + width: 16px; + height: 10px; + border: 6px solid transparent; + border-top: 1px solid transparent; + box-shadow: inset 0 0 0 4px #9ca3af, 0 -2px 0 0 #9ca3af; + top: 14px; + left: -3px; + border-bottom-left-radius: 100px; + border-bottom-right-radius: 100px; + } + &:before { + background: #9ca3af; + width: 4px; + height: 4px; + top: -4px; + left: 3px; + border-top-left-radius: 100px; + border-top-right-radius: 100px; } + } + svg { + display: none; + } } + } } - #courseware-sequenceNavigation { - @media only screen and (max-width: 576px) { - width: calc(100% - 92px) !important; + } + #courseware-sequenceNavigation { + @media only screen and (max-width: 576px) { + width: calc(100% - 92px) !important; + } + + div.d-flex.ml-auto { + position: absolute; + right: 0; + top: 9px; + .mt-3, + .ml-1 { + margin: 0 !important; + border: none !important; + &:first-child { + button { + span { + border: none; + transform: none; + width: 21px; + height: auto; + &:after, + &:before { + display: none; + } + } + svg { + display: block; + width: 24px; + height: auto; + path { + fill: #9ca3af; + } + } + } } - + div.d-flex.ml-auto { - position: absolute; - right: 0; - top: 9px; - .mt-3, .ml-1 { - margin: 0 !important; - border: none !important; - &:first-child { - button { - span { - border: none; - transform: none; - width: 21px; - height: auto; - &:after, &:before { - display: none; - } - } - svg { - display: block; - width: 24px; - height: auto; - path { - fill: #9CA3AF; - } - } - } - } - button { - padding: 5px; - border: 1px solid #D1D5DB !important; - position: relative; - margin: 0 0 0 12px; - border-radius: 6px; - .icon-container { - width: 21px !important; - height: 21px !important; - } - span.pgn__icon { - box-sizing: border-box; - position: relative; - display: block; - transform: scale(var(--ggs,1)); - border: 2px solid #9CA3AF; - border-bottom: 0; - width: 14px; - height: 14px; - border-top-left-radius: 100px; - border-top-right-radius: 100px; - &:after, &:before { - content: ""; - display: block; - box-sizing: border-box; - position: absolute; - } - &:after { - border-radius: 3px; - width: 16px; - height: 10px; - border: 6px solid transparent; - border-top: 1px solid transparent; - box-shadow: inset 0 0 0 4px #9CA3AF, 0 -2px 0 0 #9CA3AF; - top: 14px; - left: -3px; - border-bottom-left-radius: 100px; - border-bottom-right-radius: 100px; - } - &:before { - background: #9CA3AF; - width: 4px; - height: 4px; - top: -4px; - left: 3px; - border-top-left-radius: 100px; - border-top-right-radius: 100px; - } - } - svg { - display: none; - } - } + button { + padding: 5px; + border: 1px solid #d1d5db !important; + position: relative; + margin: 0 0 0 12px; + border-radius: 6px; + .icon-container { + width: 21px !important; + height: 21px !important; + } + span.pgn__icon { + box-sizing: border-box; + position: relative; + display: block; + transform: scale(var(--ggs, 1)); + border: 2px solid #9ca3af; + border-bottom: 0; + width: 14px; + height: 14px; + border-top-left-radius: 100px; + border-top-right-radius: 100px; + &:after, + &:before { + content: ""; + display: block; + box-sizing: border-box; + position: absolute; + } + &:after { + border-radius: 3px; + width: 16px; + height: 10px; + border: 6px solid transparent; + border-top: 1px solid transparent; + box-shadow: inset 0 0 0 4px #9ca3af, 0 -2px 0 0 #9ca3af; + top: 14px; + left: -3px; + border-bottom-left-radius: 100px; + border-bottom-right-radius: 100px; + } + &:before { + background: #9ca3af; + width: 4px; + height: 4px; + top: -4px; + left: 3px; + border-top-left-radius: 100px; + border-top-right-radius: 100px; } + } + svg { + display: none; + } } + } } - .sequence-container { - width: 100%; - .sequence { + } + .sequence-container { + width: 100%; + .sequence { + border-top: none; + border-radius: 0 0 6px 6px; + #courseware-sequenceNavigation { + button.previous-btn, + button.next-btn { + border-radius: 0; + border-top: none !important; + } + .sequence-navigation-tabs { + overflow-y: hidden; + button { border-top: none; - border-radius: 0 0 6px 6px; - #courseware-sequenceNavigation { - button.previous-btn, button.next-btn { - border-radius: 0; - border-top: none !important; - } - .sequence-navigation-tabs { - overflow-y: hidden; - button { - border-top: none; - &.complete { - background: $primary-light; - color: $primary; - &:after { - background: $primary-light !important; - } - &.active { - &:after { - background: $primary !important; - } - } - .text-success { - color: $primary !important; - } - } - } - } - } - .unit-navigation { - max-width: 226px; - button, a { - svg { - display: none; - } + &.complete { + background: $primary-light; + color: $primary; + &:after { + background: $primary-light !important; + } + &.active { + &:after { + background: $primary !important; } + } + .text-success { + color: $primary !important; + } } + } + } + } + .unit-navigation { + max-width: 226px; + button, + a { + svg { + display: none; + } } + } } + } } #root .unit-container { - max-width: 100% !important; + max-width: 100% !important; } // modal style .pgn__modal.pgn__modal-default { - .bg-white { - padding: 24px !important; - h4 { - font-size: 18px; - color: $text-color; - font-weight: 500; - line-height: 24px; - margin: 0 0 15px; + .bg-white { + padding: 24px !important; + h4 { + font-size: 18px; + color: $text-color; + font-weight: 500; + line-height: 24px; + margin: 0 0 15px; + } + p { + font-size: 14px; + color: $text-color-primary; + } + .pgn__action-row { + flex-direction: row; + button { + font-size: 14px; + line-height: 20px; + font-weight: 500; + padding: 9px 13px; + border-radius: 6px; + margin: 0 0 0 10px; + &:before { + display: none; } - p{ - font-size: 14px; - color: $text-color-primary; + &.btn-tertiary { + border: 1px solid #d1d5db; + &:hover { + background-color: $concrete !important; + } } - .pgn__action-row { - flex-direction: row; - button { - font-size: 14px; - line-height: 20px; - font-weight: 500; - padding: 9px 13px; - border-radius: 6px; - margin: 0 0 0 10px; - &:before { - display: none; - } - &.btn-tertiary { - border: 1px solid #D1D5DB; - } - } + } + } + .pgn__form-control-set { + margin: 0 0 25px; + .pgn__form-radio { + .pgn__form-label { + font-size: 14px; + color: #191b23; + line-height: 20px; } - .pgn__form-control-set { - margin: 0 0 25px; - .pgn__form-radio { - .pgn__form-label { - font-size: 14px; - color: #191B23; - line-height: 20px; - } - .pgn__form-radio-input { - box-shadow: none !important; - border: 1px solid #C4C7CF; - width: 18px; - height: 18px; - &:before { - display: none !important; - } - } - } - .form-control { - font-size: 14px; - } + .pgn__form-radio-input { + box-shadow: none !important; + border: 1px solid #c4c7cf; + width: 18px; + height: 18px; + &:before { + display: none !important; + } } + } + .form-control { + font-size: 14px; + } } + } } // style sheet component #sheet-root.sheet-container { - .pgn__sheet-component { - overflow-y: auto; - .filter-form-row { - .filter-form-heading { - font-size: 14px; - font-weight: 500; - color: #191B23; - } - .pgn__form-label { - font-size: 14px; - line-height: 20px; - color: #191B23; - } - .pgn__form-checkbox-input:focus::before, .pgn__form-radio-input:focus::before { display: none !important; } - input[type=radio], input[type=checkbox] { - box-shadow: none !important; - min-width: 20px; - min-height: 20px; - height: 20px; - width: 20px; - border: 1px solid #C4C7CF; - &:checked { - border-color: #15376D; - } - } - input[type=checkbox] { - border-radius: 4px; - } + .pgn__sheet-component { + overflow-y: auto; + .filter-form-row { + .filter-form-heading { + font-size: 14px; + font-weight: 500; + color: #191b23; + } + .pgn__form-label { + font-size: 14px; + line-height: 20px; + color: #191b23; + } + .pgn__form-checkbox-input:focus::before, + .pgn__form-radio-input:focus::before { + display: none !important; + } + input[type="radio"], + input[type="checkbox"] { + box-shadow: none !important; + min-width: 20px; + min-height: 20px; + height: 20px; + width: 20px; + border: 1px solid #c4c7cf; + &:checked { + border-color: #15376d; } + } + input[type="checkbox"] { + border-radius: 4px; + } } + } } + + + + @import "./header"; @import "./footer"; @import "./login"; @@ -468,6 +494,5 @@ html { @import "./dates"; @import "./extras"; - // Including dark theme @import "./dark"; diff --git a/paragon/_profile.scss b/paragon/_profile.scss index 41d45a36..79f8dae7 100644 --- a/paragon/_profile.scss +++ b/paragon/_profile.scss @@ -1,374 +1,397 @@ // profile page style .profile-page { - @include media-breakpoint-up(lg) { - min-height: calc(100vh - 142px); + @include media-breakpoint-up(lg) { + min-height: calc(100vh - 142px); + } + .form-control { + padding: 6px 10px; + font-size: 14px; + line-height: 20px; + height: 32px; + &:hover, &:focus { + box-shadow: none; + background-color: $concrete; } - .form-control { - padding: 6px 10px; - font-size: 14px; - line-height: 20px; - height: 32px; + } + .d-flex.flex-row-reverse.flex-wrap { + .form-group.d-flex.flex-wrap { + width: 100%; + label, + .d-flex.align-items-center { + width: 100%; + font-size: 16px; + padding-top: 0; + } } - .d-flex.flex-row-reverse.flex-wrap { - .form-group.d-flex.flex-wrap { - width: 100%; - label, .d-flex.align-items-center { - width: 100%; - font-size: 16px; - padding-top: 0; + } + .profile-page-bg-banner { + display: none; + @include media-breakpoint-up(md) { + position: relative; + overflow: hidden; + background-color: $concrete !important; + } + } + .container-fluid { + margin: 0 auto; + max-width: 1600px; + padding: 0 15px; + .row { + display: block; + @include media-breakpoint-up(md) { + display: flex; + } + &.align-items-center { + display: flex; + .col-auto.col-md-4 { + flex: 0 0 100px !important; + max-width: 100px !important; + @include media-breakpoint-up(md) { + flex: 0 0 200px !important; + max-width: 200px !important; + } + } + .d-md-none { + display: block !important; + h1 { + font-size: 24px; + line-height: 32px; + font-weight: 700; + color: $text-color; + margin: 0 0 5px; + } + p { + color: $text-color-primary; + margin: 0; + font-size: 12px; + line-height: 16px; + } + hr { + display: none !important; + } + } + } + .col-md-4.col-lg-4, + .pt-md-3.col-md-8.col-lg-7.offset-lg-1 { + flex: 0 0 100% !important; + max-width: 100% !important; + padding: 0 15px !important; + @include media-breakpoint-up(md) { + padding: 50px 15px 30px 15px !important; + flex: 0 0 50% !important; + max-width: 50% !important; + } + @include media-breakpoint-up(lg) { + padding: 50px 50px 30px 15px !important; + } + .d-none.d-md-block { + display: none !important; + } + } + .pt-md-3.col-md-8.col-lg-7.offset-lg-1 { + padding: 0 15px 30px 15px !important; + margin: 0; + @include media-breakpoint-up(md) { + padding: 50px 15px 30px 15px !important; + } + @include media-breakpoint-up(lg) { + padding: 50px 15px 30px 50px !important; + } + .alert-content { + border: none; + box-shadow: none; + border-radius: 8px; + padding: 15px; + background: $concrete; + color: $text-color; + font-size: 14px; + line-height: 20px; + a { + color: $primary; + } + .alert-heading.h4 { + margin: 0 0 10px; + font-weight: 500; + font-size: 14px; + color: $text-color; + } + p { + margin: 0 0 10px; + } + } + } + .pgn-transition-replace-group:empty { + display: none; + } + .pgn-transition-replace-group { + border: 1px solid $concrete; + border-left: 8px solid $concrete; + padding: 15px !important; + margin: 0 0 15px !important; + border-radius: 8px; + font-size: 14px; + color: $text-color; + .col-sm-6.d-flex.align-items-stretch { + display: block !important; + max-width: 100%; + width: 100%; + flex: 0 0 100%; + margin: 15px 0 0; + .certificate-type-illustration { + display: none; + } + .certificate { + border: none; + padding: 0; + background: $concrete; + margin: 0 !important; + } + .card-body { + padding: 15px; + a.default-link { + padding: 7px 13px !important; + border: 1px solid $primary !important; + color: $primary; + text-decoration: none; + font-size: 0; + line-height: 0; + margin: 0 !important; + background: $primary; + position: absolute; + top: 15px; + right: 15px; + &:after { + font-size: 14px; + font-weight: 500; + line-height: 20px; + content: "View"; + color: #fff; + } + span { + display: none; + } + } + .card-title { + margin: 0 0 10px !important; + max-width: calc(100% - 138px); + } + p.small { + font-weight: 400; + font-size: 14px; + color: $text-color; + margin: 0 !important; + } + h4.certificate-title, + p.h6 { + font-size: 16px; + line-height: 20px; + color: $text-color !important; + margin: 0; + font-weight: 600; + } + p.h6 { + margin: 0 0 10px !important; } + } } - } - .profile-page-bg-banner { - background: $primary-light !important; - position: relative; - overflow: hidden; - &:before { - position: absolute; - bottom: -200px; - left: 50%; - content: ""; - width: 340px; - height: 140px; - border-radius: 50%; - margin: 0 0 0 -456px; + p.h5, + p.lead, + .card-title { + font-weight: 600; + font-size: 16px; + color: $text-color; + margin: 5px 0 0 !important; + } + .edit-section-header { + font-size: 18px; + font-weight: 600; + line-height: 24px; + color: $text-color; + margin: 0; + padding: 6px 66px 6px 0; } - &:after { + small.form-text { + background: $concrete !important; + padding: 10px 15px; + border-radius: 6px; + font-size: 14px; + line-height: 20px; + color: $text-color !important; + margin: 10px 0 0; + } + .editable-item-header { + margin: 0 !important; + button { + padding: 8px 14px !important; + border: 1px solid $primary !important; + color: #fff; + text-decoration: none; + font-size: 14px; + font-weight: 500; + line-height: 20px; + margin: 0 !important; position: absolute; - bottom: -200px; - left: 50%; - content: ""; - width: 340px; - height: 140px; - border-radius: 50%; - margin: 0 0 0 -456px; - box-shadow: 110px -100px 100px 90px rgba(122, 185, 250, 0.65); - -webkit-box-shadow: 110px -100px 100px 90px rgba(122, 185, 250, 0.65); - -moz-box-shadow: 110px -100px 100px 90px rgba(122, 185, 250, 0.65); + right: 15px; + top: 15px; + background: $primary; + svg { + display: none; + } + &:hover { + border: 1px solid $primary-hover !important; + background-color: $primary-hover !important; + } + } + p { + .small.text-muted { + font-size: 16px; + color: $text-color-primary !important; + line-height: 20px; + } + } } - } - .container-fluid { - margin: 0 auto; - max-width: 1600px; - padding: 0 15px; - .row { - display: block; - @include media-breakpoint-up(md) { - display: flex; + .editable-item-header + div { + button { + padding: 7px 13px !important; + border: 1px solid #d1d5db !important; + font-size: 0 !important; + color: $light-dark; + text-decoration: none; + position: absolute; + right: 15px; + top: 15px; + svg { + display: none; } - &.align-items-center { - display: flex; - .col-auto.col-md-4 { - flex: 0 0 100px !important; - max-width: 100px !important; - @include media-breakpoint-up(md) { - flex: 0 0 200px !important; - max-width: 200px !important; - } - } - .d-md-none { - display: block !important; - h1 { - font-size: 24px; - line-height: 32px; - font-weight: 700; - color: $text-color; - margin: 0 0 5px; - } - p { - color: $text-color-primary; - margin: 0; - font-size: 12px; - line-height: 16px; - } - hr { - display: none !important; - } - } + &:after { + content: "Add"; + font-size: 14px; + font-weight: 500; + line-height: 20px; } - .col-md-4.col-lg-4, .pt-md-3.col-md-8.col-lg-7.offset-lg-1 { - flex: 0 0 100% !important; - max-width: 100% !important; - padding: 0 15px!important; - @include media-breakpoint-up(md) { - padding: 50px 15px 30px 15px !important; - flex: 0 0 50% !important; - max-width: 50% !important; - } - @include media-breakpoint-up(lg) { - padding: 50px 50px 30px 15px !important; - } - .d-none.d-md-block { - display: none !important; - } + } + } + .editable-item-header + .list-unstyled { + margin: 0; + li { + display: inline-block; + vertical-align: top; + padding: 0 !important; + margin: 0 !important; + display: none; + &:first-child { + display: block; } - .pt-md-3.col-md-8.col-lg-7.offset-lg-1 { - padding: 0 15px 30px 15px !important; - margin: 0; - @include media-breakpoint-up(md) { - padding: 50px 15px 30px 15px !important; - } - @include media-breakpoint-up(lg) { - padding: 50px 15px 30px 50px !important; + &.form-group { + display: block; + margin: 10px 0 0 !important; + button { + position: static; + font-size: 16px !important; + font-weight: 700; + line-height: 20px; + border: none !important; + padding: 0 !important; + color: $primary !important; + text-decoration: underline; + &:after { + display: none; } - .alert-content { - border: none; - box-shadow: none; - border-radius: 8px; - padding: 15px; - background: $primary-light; - color: $text-color; - font-size: 14px; - line-height: 20px; - a { - color: $primary; - } - .alert-heading.h4 { - margin: 0 0 10px; - font-weight: 500; - font-size: 14px; - color: $text-color; - } - p { - margin: 0 0 10px; - } + } + a { + font-size: 16px; + font-weight: 600; + line-height: 20px; + color: $text-color !important; + text-decoration: none !important; + &:hover { + text-decoration: underline !important; } + } } - .pgn-transition-replace-group:empty { + button { + padding: 7px 13px !important; + border: 1px solid #d1d5db !important; + font-size: 0 !important; + color: $light-dark; + text-decoration: none; + position: absolute; + right: 15px; + top: 15px; + svg { display: none; - } - .pgn-transition-replace-group { - border: 1px solid #E5E7EB; - border-left: 8px solid $primary-light; - padding: 15px !important; - margin: 0 0 15px !important; - border-radius: 8px; + } + &:after { + content: "Add"; font-size: 14px; - color: $text-color; - .col-sm-6.d-flex.align-items-stretch { - display: block !important; - max-width: 100%; - width: 100%; - flex: 0 0 100%; - margin: 15px 0 0; - .certificate-type-illustration { - display: none; - } - .certificate { - border: none; - padding: 0; - background: $primary-light; - margin: 0 !important; - } - .card-body { - padding: 15px; - a.default-link { - padding: 7px 13px !important; - border: 1px solid $primary !important; - color: $primary; - text-decoration: none; - font-size: 0; - line-height: 0; - margin: 0 !important; - background: $primary; - position: absolute; - top: 15px; - right: 15px; - &:after { - font-size: 14px; - font-weight: 500; - line-height: 20px; - content: "View"; - color: #fff; - } - span { - display: none; - } - } - .card-title { - margin: 0 0 10px !important; - max-width: calc(100% - 138px); - } - p.small { - font-weight: 400; - font-size: 14px; - color: $text-color; - margin: 0 !important; - } - h4.certificate-title, p.h6 { - font-size: 16px; - line-height: 20px; - color: $text-color !important; - margin: 0; - font-weight: 600; - } - p.h6 { - margin: 0 0 10px !important; - } - } - } - p.h5, p.lead, .card-title { - font-weight: 600; - font-size: 16px; - color: $text-color; - margin: 5px 0 0 !important; - } - .edit-section-header { - font-size: 18px; - font-weight: 600; - line-height: 24px; - color: $text-color; - margin: 0; - padding: 6px 66px 6px 0; - } - small.form-text { - background: $primary-light; - padding: 10px 15px; - border-radius: 6px; - font-size: 14px; - line-height: 20px; - color: $text-color !important; - margin: 10px 0 0; - } - .editable-item-header { - margin: 0 !important; - button { - padding: 7px 13px !important; - border: 1px solid $primary !important; - color: #fff; - text-decoration: none; - font-size: 14px; - font-weight: 500; - line-height: 20px; - margin: 0 !important; - position: absolute; - right: 15px; - top: 15px; - background: $primary; - svg { - display: none; - } - } - p { - .small.text-muted { - font-size: 16px; - color: $text-color-primary !important; - line-height: 20px; - } - } - } - .editable-item-header + div { - button { - padding: 7px 13px !important; - border: 1px solid #D1D5DB !important; - font-size: 0 !important; - color: #374151; - text-decoration: none; - position: absolute; - right: 15px; - top: 15px; - svg { - display: none; - } - &:after { - content: "Add"; - font-size: 14px; - font-weight: 500; - line-height: 20px; - } - } - } - .editable-item-header + .list-unstyled { - margin: 0; - li { - display: inline-block; - vertical-align: top; - padding: 0 !important; - margin: 0 !important; - display: none; - &:first-child { - display: block; - } - &.form-group { - display: block; - margin: 10px 0 0 !important; - button { - position: static; - font-size: 16px !important; - font-weight: 700; - line-height: 20px; - border: none !important; - padding: 0 !important; - color: $primary !important; - text-decoration: underline; - &:after { - display: none; - } - } - a { - color: $primary; - font-size: 16px; - font-weight: 600; - line-height: 20px; - text-decoration: underline; - } - } - button { - padding: 7px 13px !important; - border: 1px solid #D1D5DB !important; - font-size: 0 !important; - color: #374151; - text-decoration: none; - position: absolute; - right: 15px; - top: 15px; - svg { - display: none; - } - &:after { - content: "Add"; - font-size: 14px; - font-weight: 500; - line-height: 20px; - } - } - } - } + font-weight: 500; + line-height: 20px; + } } - form { - .form-group { - &.flex-shrink-0.flex-grow-1 { - text-align: end; - display: flex; - flex-direction: row-reverse; - margin: 0; - button { - padding: 7px 13px !important; - border: 1px solid $primary !important; - color: #fff; - text-decoration: none; - font-size: 14px; - font-weight: 500; - line-height: 20px; - margin: 0 0 0 15px !important; - background: $primary; - &.btn-link { - background: #fff !important; - border-color: #D1D5DB !important; - color: #374151; - } - } - } + } + } + } + form { + .form-group { + &.flex-shrink-0.flex-grow-1 { + text-align: end; + display: flex; + flex-direction: row-reverse; + margin: 0; + button { + padding: 7px 13px !important; + border: 1px solid $primary !important; + color: #fff; + text-decoration: none; + font-size: 14px; + font-weight: 500; + line-height: 20px; + margin: 0 0 0 15px !important; + background: $primary; + &.btn-link { + background: #fff !important; + border-color: #d1d5db !important; + color: $light-dark; + &:hover { + background-color: $concrete !important; } + } } + } } + } } - .profile-avatar-wrap { - margin-bottom: 0 !important; + .col { + margin-left: 20px; + :dir(rtl) { + margin-right: 20px; + margin-left: unset; + } } - .profile-avatar { - svg.text-muted { - color: $primary !important; + @include media-breakpoint-up(md) { + .col { + margin-left: 0; + :dir(rtl) { + margin-right: 0; + margin-left: 0; } + } + } + + } + .profile-avatar-wrap { + margin-bottom: 0 !important; + } + .profile-avatar { + width: 6rem !important; + height: 6rem !important; + svg.text-muted { + color: $primary !important; + } + @include media-breakpoint-up(md) { + width: 12rem !important; + height: 12rem !important; + } + } } diff --git a/paragon/_progress.scss b/paragon/_progress.scss index a3fd6a12..2536b362 100644 --- a/paragon/_progress.scss +++ b/paragon/_progress.scss @@ -1,185 +1,259 @@ // progress page style .course-tabs-navigation + .container-xl { - min-height: calc(100vh - 300px); - >.mb-4.justify-content-between { - h1 { - font-weight: 800; - font-size: 24px; - line-height: 30px; - color: $text-color; - } + min-height: calc(100vh - 300px); + > .mb-4.justify-content-between { + h1 { + font-weight: 800; + font-size: 18px; + line-height: 25px; + color: $text-color; } - >.row { - >.col-12.col-md-8.p-0 { - .rounded.raised-card { - border: 1px solid #E5E7EB !important; - border-left: 8px solid $primary-light !important; - border-radius: 8px !important; - box-shadow: none !important; - font-size: 16px; - .small { - font-size: 16px; - } - &.grades { - border: none !important; - border-radius: none !important; - padding: 0 !important; - .btn-icon.btn-icon-primary.btn-icon-sm { - width: auto; - height: auto; - } - } - h2 { - font-size: 18px; - line-height: 24px; - font-weight: 600; - } - .bg-warning-100 { - padding: 10px 15px !important; - background: $primary-light !important; - .h4 { - font-size: 14px; - color: $primary; - font-weight: 600; - } - svg { - color: $primary; - } - } - } - } - >.col-12.col-md-4.p-0.px-md-4, >.col-12.col-md-8.p-0 { - .bg-light-200.raised-card { - background: $primary-light !important; - box-shadow: none !important; - .pgn__card-header { - .pgn__card-header-content { - margin-top: 10px; - } - .pgn__card-header-title-md { - font-size: 18px; - } - } - .pgn__card-section { - padding-top: 0; - &.small { - font-size: 16px; - } - } - .btn.btn-outline-brand { - padding: 7px 13px !important; - border: 1px solid #15376D !important; - color: #fff; - text-decoration: none; - font-size: 14px; - font-weight: 500; - line-height: 20px; - margin: 0 !important; - background: #15376D; - } - } - section.mb-4.x-small { - background-color: $primary-light; - font-size: 16px !important; - border-radius: 8px; - padding: 20px; - ul { - list-style: none; - a { - color: $primary; - } - } - } - } + a { + color: #111827 !important; + border-color: #1d1d1f !important; + &:hover { + color: #374151 !important; + background-color: #eeeeee !important; + border-color: #111827 !important; + } } - .donut-ring.complete-stroke, .donut-segment.complete-stroke, .donut-hole.complete-stroke { - stroke: $primary; + @include media-breakpoint-up(sm) { + h1 { + font-size: 24px; + } } - .donut-ring.incomplete-stroke, .donut-segment.incomplete-stroke, .donut-hole.incomplete-stroke { - stroke: $primary-light; + } + > .row { + > .col-12.col-md-8.p-0 { + .rounded.raised-card { + border: 1px solid $concrete !important; + border-left: 8px solid $concrete !important; + border-radius: 8px !important; + box-shadow: none !important; + font-size: 16px; + .small { + font-size: 16px; + } + &.grades { + border: none !important; + border-radius: none !important; + padding: 0 !important; + .btn-icon.btn-icon-primary.btn-icon-sm { + width: auto; + height: auto; + } + } + h2 { + font-size: 18px; + line-height: 24px; + font-weight: 600; + margin-bottom: 0 !important; + } + .bg-warning-100 { + padding: 10px 15px; + background: $concrete !important; + color: $text-color !important; + .h4 { + font-size: 14px; + color: $text-color !important; + font-weight: 600; + } + svg { + color: $text-color !important; + } + } + } } - svg.donut { - @include media-breakpoint-up(sm) { - float: right; + > .col-12.col-md-4.p-0.px-md-4, + > .col-12.col-md-8.p-0 { + .bg-light-200.raised-card { + background: $concrete; + box-shadow: none !important; + .pgn__card-header { + .pgn__card-header-content { + margin-top: 10px; + } + .pgn__card-header-title-md { + font-size: 18px; + } } - } - .donut-chart-text { - .donut-chart-number { - color: $text-color; + .pgn__card-section { + padding-top: 0; + &.small { + font-size: 16px; + } } - .donut-chart-label { - color: #4B5563; + .btn.btn-outline-brand { + padding: 7px 13px !important; + border: 1px solid $primary; + color: #fff; + text-decoration: none; + font-size: 14px; + font-weight: 500; + line-height: 20px; + margin: 0 !important; + background: $primary; } + } + section.mb-4.x-small { + background-color: $concrete; + font-size: 16px !important; + border-radius: 8px; + padding: 20px; + + ul { + list-style: none; + a { + color: $text-color !important; + } + } + } + } + } + .donut-ring.complete-stroke, + .donut-segment.complete-stroke, + .donut-hole.complete-stroke { + stroke: $primary; + } + .donut-ring.incomplete-stroke, + .donut-segment.incomplete-stroke, + .donut-hole.incomplete-stroke { + stroke: $concrete; + } + svg.donut { + @include media-breakpoint-up(sm) { + float: right; + } + } + .donut-chart-text { + .donut-chart-number { + color: $text-color; } - .grade-bar .grade-bar__base { - fill: $primary-light; + .donut-chart-label { + color: #4b5563; } + } + .grade-bar .grade-bar__base { + fill: $concrete; + } } -#root { - .grades { - .pgn__data-table { - thead { - th { - background: none !important; - border-bottom: 1px solid #E5E7EB !important; - span.h5 { - font-size: 14px; - font-weight: 500; - } - } - } - &.is-striped tr:nth-child(even) { - background: none !important; - } - } - .pgn__data-table-wrapper { - border: 1px solid #E5E7EB !important; - border-left: 8px solid $primary-light !important; - border-radius: 8px !important; - box-shadow: none !important; - .border-primary { - border-color: transparent !important; - } - .small, .x-small { - font-size: 14px !important; - } - #weighted-grade-summary.small { - color: $primary !important; - font-weight: 600 !important; - font-size: 14px !important; - } +.grades { + h2 { + font-size: 18px; + line-height: 24px; + font-weight: 600; + margin-bottom: 0 !important; + } + .raised-card { + border-left: 8px solid #f3f3f3 !important; + } +} +.pgn__data-table { + th { + background-color: transparent !important; + border-bottom: 1px solid #e5e7eb !important; + span.h5 { + font-size: 14px; + font-weight: 500 !important; + } + } + + &.is-striped tr:nth-child(even) { + background-color: transparent !important; + } + td { + font-size: 14px; + color: $text-color !important; + > div { + font-size: 14px; + color: $text-color !important; + } + } + &-footer { + background-color: $concrete !important; + } +} + +.pgn__data-table-wrapper { + box-shadow: unset !important; + .border-primary { + border-color: transparent !important; + } + .small, + .x-small { + font-size: 14px !important; + } + #weighted-grade-summary.small { + color: $text-color !important; + font-weight: 600 !important; + font-size: 14px !important; + line-height: 20px !important; + } +} +a.muted-link { + color: $text-color !important; + font-size: 14px !important; +} + +.btn-icon { + width: 24px !important; + height: 24px !important; + &:hover { + background-color: $primary !important; + color: white; + .btn-icon__icon { + svg { + path { + stroke: $primary !important; + fill: white !important; } + } } + } +} +.btn-icon__icon { + svg { + path { + fill: $text-color !important; + } + } +} +.pgn__data-table th { + background-color: transparent !important; +} +.pgn__data-table.is-striped tr:nth-child(even) { + background-color: transparent !important; } #non-passing-grade-tooltip { - background: $primary; - border-color: $primary; - filter: none; - .arrow { - &:before { - border-top-color: $primary !important; - } - &:after { - border-top-color: $primary !important; - } + background: $primary; + border-color: $primary; + filter: none; + .arrow { + &:before { + border-top-color: $primary !important; } - .popover-body { - color: white !important; + &:after { + border-top-color: $primary !important; } + } + .popover-body { + color: white !important; + } } + #minimum-grade-tooltip.bg-primary-500 { - background: #9CA3AF !important; - border-color: #9CA3AF !important; - filter: none; - .arrow { - &:before { - border-bottom-color: #9CA3AF !important; - } - &:after { - border-bottom-color: #9CA3AF !important; - } + background: #bbbbbc !important; + border-color: #bbbbbc !important; + filter: none; + .arrow { + &:before { + border-bottom-color: #bbbbbc !important; } - .popover-body { - color: white !important; + &:after { + border-bottom-color: #bbbbbc !important; } -} \ No newline at end of file + } + .popover-body { + color: white !important; + } +} diff --git a/paragon/_variables.scss b/paragon/_variables.scss index dcd6bf8a..87424ede 100644 --- a/paragon/_variables.scss +++ b/paragon/_variables.scss @@ -1,9 +1,11 @@ -$primary: #15376D; +$primary: #4600c7; $primary-light: #F2F7F8; $light-dark: #374151; $text-color: #111827; $text-color-primary: #515661; $text-color-light: #515661; +$primary-hover: #6a32d1; +$concrete: #f3f3f3; // for toggle theme button $page-color-transition: transparent .2s ease, color .2s ease; diff --git a/themes/dark/_extras.scss b/themes/dark/_extras.scss index f6e9c486..2cae0fd4 100644 --- a/themes/dark/_extras.scss +++ b/themes/dark/_extras.scss @@ -1,1479 +1,1548 @@ body { - color: $text-color !important; - background: $body-bg !important; - * { - accent-color: $primary; - } + color: $text-color !important; + background: $body-bg !important; + * { + accent-color: $primary; + } } a { - color: $primary; + color: $primary; } .text-muted { - color: $text-color; + color: $text-color; } html { - background: $body-bg !important; -} -h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .text-dark-700 { - color: $text-color !important; + background: $body-bg !important; +} +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6, +.text-dark-700 { + color: $text-color !important; } #password-requirement-left .arrow:before { - border-left-color: $light-overlay !important; + border-left-color: $light-overlay !important; } #password-requirement-top .arrow:before { - border-top-color: $light-overlay !important; + border-top-color: $light-overlay !important; } .tooltip .tooltip-inner { - background: $light-overlay !important; - color: $text-color !important; + background: $light-overlay !important; + color: $text-color !important; } .text-gray-700 { - color: $text-color-primary !important; + color: $text-color-primary !important; } .bg-white { - background: $body-bg !important; + background: $body-bg !important; } .alert-warning { - background: $primary-light; + background: $primary-light; } .alert-light { - background: $primary-light; - color: $text-color; + background: $primary-light; + color: $text-color; } .bg-gray-100 { - background: $primary-light !important; + background: $primary-light !important; } .btn-outline-dark { - color: #fff !important; - border-color: #fff !important; - background: none !important; + color: #fff !important; + border-color: #fff !important; + background: none !important; } -div[data-testid=instructor-toolbar] { - .bg-primary { - background: $primary-light !important; - } +div[data-testid="instructor-toolbar"] { + .bg-primary { + background: $primary-light !important; + } } .alert-info { - background: $primary-light; - .alert-icon { - svg { - path { - fill: $danger; - } - } + background: $primary-light; + .alert-icon { + svg { + path { + fill: $danger; + } } + } } .text-success { - color: $success !important; + color: $success !important; } .bs-tooltip-top .arrow:before { - border-color: $light-overlay; + border-color: $light-overlay; } .tox { - .tox-collection__item { - color: $text-color; - } - .tox-dialog-wrap__backdrop { - background: rgba(#000, .8); - } - .tox-label, .tox-toolbar-label { - color: $text-color; + .tox-collection__item { + color: $text-color; + } + .tox-dialog-wrap__backdrop { + background: rgba(#000, 0.8); + } + .tox-label, + .tox-toolbar-label { + color: $text-color; + } + .tox-textfield, + .tox-toolbar-textfield, + .tox-listboxfield .tox-listbox--select, + .tox-textarea, + select { + background: $primary-light !important; + color: $text-color !important; + &:focus { + border-color: $primary; } - .tox-textfield, .tox-toolbar-textfield, .tox-listboxfield .tox-listbox--select, .tox-textarea, select { - background: $primary-light !important; + } + .tox-dialog__footer { + background: $primary-light !important; + color: $text-color $text-color !important; + .tox-button { + background: $primary !important; + color: $btn-color !important; + border-color: $primary !important; + &.tox-button--secondary { + background: none !important; color: $text-color !important; - &:focus { - border-color: $primary; - } + border-color: $text-color !important; + } } - .tox-dialog__footer { - background: $primary-light !important; - color: $text-color $text-color !important; - .tox-button { - background: $primary !important; - color: $btn-color !important; - border-color: $primary !important; - &.tox-button--secondary { - background: none !important; - color: $text-color !important; - border-color: $text-color !important; - } + } + .tox-dialog { + background: $primary-light; + color: $text-color; + border-color: none; + .tox-dialog__header { + background: none; + color: $text-color; + button { + background: none !important; + svg { + path { + fill: $text-color !important; + } } + } } - .tox-dialog { - background: $primary-light; - color: $text-color; - border-color: none; - .tox-dialog__header { - background: none; - color: $text-color; - button { - background: none !important; - svg { - path { - fill: $text-color !important; - } - } - } - } - .tox-dialog__body-nav-item--active { - background: none; - color: $text-color; - border-color: $primary; - } + .tox-dialog__body-nav-item--active { + background: none; + color: $text-color; + border-color: $primary; } + } } .tox-tinymce { - border-color: $border-color !important; + border-color: $border-color !important; } .bg-light-200.post-preview { - background: $body-bg !important; -} -.tox .tox-statusbar, .tox .tox-toolbar { - background: $primary-light !important; - border-color: $border-color !important; - scrollbar-color: white transparent; - * { - color: $text-color !important; - svg { - path { - fill: $text-color !important; - } - } + background: $body-bg !important; +} +.tox .tox-statusbar, +.tox .tox-toolbar { + background: $primary-light !important; + border-color: $border-color !important; + scrollbar-color: white transparent; + * { + color: $text-color !important; + svg { + path { + fill: $text-color !important; + } } + } } -.tox .tox-menu, .tox .tox-toolbar { - background: $primary-light !important; - border-color: $border-color !important; - * { - background: none !important; - color: $text-color !important; - svg { - path { - fill: $text-color !important; - } - } +.tox .tox-menu, +.tox .tox-toolbar { + background: $primary-light !important; + border-color: $border-color !important; + * { + background: none !important; + color: $text-color !important; + svg { + path { + fill: $text-color !important; + } } + } } -.tox-toolbar__primary, .tox-toolbar__overflow { - background: $primary-light !important; +.tox-toolbar__primary, +.tox-toolbar__overflow { + background: $primary-light !important; + border-color: $border-color !important; + .tox-toolbar__group { border-color: $border-color !important; - .tox-toolbar__group { - border-color: $border-color !important; - } - .tox-tbtn { - color: $text-color !important; - background: none !important; - svg { - path { - fill: $text-color !important; - } - } + } + .tox-tbtn { + color: $text-color !important; + background: none !important; + svg { + path { + fill: $text-color !important; + } } + } } .unit-navigation { - .previous-button { - border-color: $text-color-primary; - color: $text-color-primary !important; - background: none !important; - } - .next-button { - background: none !important; - color: $primary !important; - } + .previous-button { + border-color: $text-color-primary; + color: $text-color-primary !important; + background: none !important; + } + .next-button { + background: none !important; + color: $primary !important; + } } .react-loading-skeleton { - --base-color: #36383B; - --highlight-color: #000; + --base-color: #36383b; + --highlight-color: #000; } .pgn__pageBanner__accentA { - background: $primary-light !important; + background: $primary-light !important; + color: $text-color !important; + button { color: $text-color !important; - button { - color: $text-color !important; - } + } } .dropdown-menu { - background: $light-overlay; - color: $text-color; + background: $light-overlay; + color: $text-color; } a.course-card-title { - color: $text-color; + color: $text-color; } .text-dark-500 { - color: $text-color !important; + color: $text-color !important; } .text-gray-500 { - color: $text-color-primary !important; + color: $text-color-primary !important; } #root { - .btn { - &:before { - border-color: $text-color-primary !important; - } + .btn { + &:before { + border-color: $text-color-primary !important; } - overflow-x: hidden; - input:-webkit-autofill, - input:-webkit-autofill:hover, - input:-webkit-autofill:focus, - input:-webkit-autofill:active{ - -webkit-background-clip: text; - -webkit-text-fill-color: $text-color; - transition: background-color 5000s ease-in-out 0s; - box-shadow: none; + } + overflow-x: hidden; + input:-webkit-autofill, + input:-webkit-autofill:hover, + input:-webkit-autofill:focus, + input:-webkit-autofill:active { + -webkit-background-clip: text; + -webkit-text-fill-color: $text-color; + transition: background-color 5000s ease-in-out 0s; + box-shadow: none; + } + .text-body { + color: $text-color !important; + } + .form-control { + background: none !important; + border-color: $border-color; + color: $text-color; + &.is-invalid { + border-color: $danger !important; } - .text-body { - color: $text-color !important; + &:focus { + box-shadow: 0 0 0 1px $primary; } - .form-control { - background: none !important; + } + .pgn__form-text-default, + .has-floating-label { + color: $text-color; + } + .form-control:focus + ~ .pgn__form-control-floating-label + .pgn__form-control-floating-label-text, + .form-control.has-value + ~ .pgn__form-control-floating-label + .pgn__form-control-floating-label-text { + background: $primary-light; + color: $text-color; + } + .alert-heading, + .pgn__form-text-invalid, + .alert-message-content, + .alert-danger .alert-icon { + color: $danger !important; + } + .alert-success .alert-icon, + .alert-success .alert-heading, + .alert-success .alert-message-content { + color: $success !important; + } + .layout { + background: #0d0d0e; + &:before { + box-shadow: 400px 400px 143px 90px rgba(#211e82, 0.45); + } + &:after { + box-shadow: 400px -400px 143px 90px rgba(#211e82, 0.45); + } + .content { + background: $primary-light; + .nav.nav-tabs { border-color: $border-color; - color: $text-color; - &.is-invalid { - border-color: $danger !important; + } + #main-content { + .btn-brand { + color: #112f6b; + } + .alert-danger, + .alert-success { + background: $light-overlay; + a { + background: none !important; + padding: 0 !important; + } } - &:focus{ - box-shadow: 0 0 0 1px $primary; + } + } + .bg-primary-400 { + h1 { + color: $text-color !important; + .text-accent-a { + color: $text-color !important; } + } } - .pgn__form-text-default, .has-floating-label { - color: $text-color; + } + .user-dropdown { + button { + background: $primary !important; + color: $btn-color; + @include media-breakpoint-down(md) { + padding: 0 !important; + background: none !important; + } + &:after { + border-color: $btn-color !important; + } + .hamburger-menu { + .line { + background: $text-color; + } + } + } + .dropdown-menu { + box-shadow: 0px 0px 0px 1px rgba(#fff, 0.8), + 0px 4px 6px -2px rgba(#fff, 0.05), 0px 10px 15px -3px rgba(#fff, 0.1); + background: $light-overlay; + @include media-breakpoint-down(md) { + border-bottom: 2px solid $primary !important; + } + a { + color: $text-color-primary; + background: none !important; + outline: none !important; + box-shadow: none; + &:hover { + background: $body-bg !important; + color: $text-color; + } + } } - .form-control:focus ~ .pgn__form-control-floating-label .pgn__form-control-floating-label-text, - .form-control.has-value ~ .pgn__form-control-floating-label .pgn__form-control-floating-label-text { - background: $primary-light; + } + .learner-variant-header { + &:after { + background: #0d0d0e; + box-shadow: 0px 1px 2px 0px rgba(#fff, 0.8), + 0px 1px 3px 0px rgba(#fff, 0.1); + } + .btn.btn-inverse-primary { + color: $text-color; + &:before { + display: none !important; + } + &.course-link, + &:hover { color: $text-color; + border-bottom: 2px solid $text-color !important; + } } - .alert-heading, .pgn__form-text-invalid, .alert-message-content, .alert-danger .alert-icon { - color: $danger !important; + .btn-icon.btn-icon-inverse-primary { + color: $text-color; + outline: none !important; + background: none !important; + box-shadow: none !important; } - .alert-success .alert-icon, .alert-success .alert-heading, .alert-success .alert-message-content { - color: $success !important; + } + .nav-small-menu { + background: #454545; + a { + color: $text-color; + &:before { + display: none; + } + &:active { + background: transparent !important; + } } - .layout { - background: #0D0D0E; - &:before { - box-shadow: 400px 400px 143px 90px rgba(#211E82, 0.45); - } - &:after { - box-shadow: 400px -400px 143px 90px rgba(#211E82, 0.45); + } +} +#dashboard-container { + .container-mw-xl.container-fluid { + .row { + .course-list-column { + #course-list-active-filters { + button { + font-size: 14px; + } + .pgn__chip { + background: $light-overlay; + color: $text-color; + * { + color: $text-color; + fill: $text-color; + } + } } - .content { + .course-card { + .pgn__card { background: $primary-light; - .nav.nav-tabs { - border-color: $border-color; - } - #main-content{ - .btn-brand { - color: #112F6B; + box-shadow: none !important; + border: 1px solid $border-color; + .flex-column { + .course-card-banners { + display: block !important; + .alert-info, + .related-programs-banner { + background: $light-overlay !important; + .alert-icon { + color: $text-color-primary; + } + .alert-message-content { + color: $text-color-primary !important; + } + a { + color: $text-color; + text-decoration: underline; + } } - .alert-danger, .alert-success { - background: $light-overlay; + .alert-success { + background: $light-overlay; + .alert-message-content { + color: $text-color-primary !important; a { - background: none !important; - padding: 0 !important; + color: $text-color; + text-decoration: underline; } + } + } + .alert-content { + .alert-icon { + margin: 0 5px 0 0; + width: 20px; + } } + } } - } - .bg-primary-400 { - h1 { - color: $text-color !important; - .text-accent-a { + .pgn__card-header { + .pgn__card-header-content { + h3 { + color: $text-color; + } + } + .pgn__dropdown-toggle-iconbutton { + transform: rotate(90deg); + color: $text-color; + } + .dropdown-menu { + overflow: hidden; + box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.8), + 0px 4px 6px -2px rgba(255, 255, 255, 0.05), + 0px 10px 15px -3px rgba(255, 255, 255, 0.1); + background: $light-overlay; + a { + color: $text-color !important; + background: none !important; + &:hover { color: $text-color !important; + background: $body-bg !important; + } } + } } - } - } - .user-dropdown { - button { - background: $primary !important; - color: $btn-color; - @include media-breakpoint-down(md) { - padding: 0 !important; - background: none !important; - } - &:after { - border-color:$btn-color !important; + .pgn__card-section { + padding: 0 21px 18px; + .small { + font-size: 12px; + color: $text-color-primary; + } } - .hamburger-menu { - .line { - background: $text-color; - } - } - } - .dropdown-menu { - box-shadow: 0px 0px 0px 1px rgba(#fff, 0.8), 0px 4px 6px -2px rgba(#fff, 0.05), 0px 10px 15px -3px rgba(#fff, 0.1); - background: $light-overlay; - @include media-breakpoint-down(md) { - border-bottom: 2px solid $primary !important; + .pgn__card-footer { + padding: 0 21px 20px; } - a { - color: $text-color-primary; - background: none !important; - outline: none !important; - box-shadow: none; - &:hover { - background: $body-bg !important; - color: $text-color; ; + .pgn__action-row { + button, + a { + &.btn-outline-primary { + border: 1px solid $text-color; + color: $text-color; } + } + } + } + } + } + .course-filter-controls-container { + .btn.btn-outline-primary { + border-color: #d1d5db; + color: $text-color; + box-shadow: 0px 1px 2px 0px rgba(#fff, 0.05); + background: none !important; + svg { + fill: $text-color; + } + } + #course-filter-controls-card { + background: $light-overlay !important; + box-shadow: 0px 0px 0px 1px rgba(#fff, 0.8), + 0px 4px 6px -2px rgba(#fff, 0.05), + 0px 10px 15px -3px rgba(#fff, 0.1) !important; + .filter-form-col { + &.text-left { + border-left: 1px solid #ecf0f4; } - } - } - .learner-variant-header { - &:after { - background: #0D0D0E; - box-shadow: 0px 1px 2px 0px rgba(#fff, 0.8), 0px 1px 3px 0px rgba(#fff, 0.1); - } - .btn.btn-inverse-primary { - color: $text-color; - &:before { - display: none !important; + .filter-form-heading { + color: $text-color; } - &.course-link, &:hover { - color: $text-color; - border-bottom: 2px solid $text-color !important; + .pgn__form-label { + color: $text-color; } - } - .btn-icon.btn-icon-inverse-primary { - color: $text-color; - outline: none !important; - background: none !important; - box-shadow: none !important; - } - } - .nav-small-menu{ - background: #454545; - a { - color: $text-color; - &:before { - display: none; + .pgn__form-checkbox-input:focus::before, + .pgn__form-radio-input:focus::before { + display: none !important; } - &:active { - background: transparent !important; + input[type="radio"], + input[type="checkbox"] { + &:checked { + border-color: $text-color; + } } + } } - } -} -#dashboard-container { - .container-mw-xl.container-fluid { - .row { - .course-list-column { - #course-list-active-filters { - button { - font-size: 14px; - } - .pgn__chip { - background: $light-overlay; - color: $text-color; - * { - color: $text-color; - fill: $text-color; - } - } - } - .course-card { - .pgn__card { - background: $primary-light; - box-shadow: none !important; - border: 1px solid $border-color; - .flex-column { - .course-card-banners { - display: block !important; - .alert-info, .related-programs-banner { - background: $light-overlay !important; - .alert-icon { - color: $text-color-primary; - } - .alert-message-content { - color: $text-color-primary !important; - } - a { - color: $text-color; - text-decoration: underline; - } - } - .alert-success { - background: $light-overlay; - .alert-message-content { - color: $text-color-primary !important; - a { - color: $text-color; - text-decoration: underline; - } - } - } - .alert-content { - .alert-icon { - margin: 0 5px 0 0; - width: 20px; - } - } - } - } - .pgn__card-header { - .pgn__card-header-content { - h3 { - color: $text-color; - } - } - .pgn__dropdown-toggle-iconbutton { - transform: rotate(90deg); - color: $text-color; - } - .dropdown-menu { - overflow: hidden; - box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.8), 0px 4px 6px -2px rgba(255, 255, 255, 0.05), 0px 10px 15px -3px rgba(255, 255, 255, 0.1); - background: $light-overlay; - a { - color: $text-color !important; - background: none !important; - &:hover { - color: $text-color !important; - background: $body-bg !important; - } - } - } - } - .pgn__card-section { - padding: 0 21px 18px; - .small { - font-size: 12px; - color: $text-color-primary; - } - } - .pgn__card-footer { - padding: 0 21px 20px; - } - .pgn__action-row { - button, a { - &.btn-outline-primary { - border: 1px solid $text-color; - color: $text-color; - } - } - } - } - } - } - .course-filter-controls-container { - .btn.btn-outline-primary { - border-color: #D1D5DB; - color: $text-color; - box-shadow: 0px 1px 2px 0px rgba(#fff, 0.05); - background: none !important; - svg { - fill: $text-color; - } - } - #course-filter-controls-card { - background: $light-overlay !important; - box-shadow: 0px 0px 0px 1px rgba(#fff, 0.8), 0px 4px 6px -2px rgba(#fff, 0.05), 0px 10px 15px -3px rgba(#fff, 0.10) !important; - .filter-form-col { - &.text-left { - border-left: 1px solid #ECF0F4; - } - .filter-form-heading { - color: $text-color; - } - .pgn__form-label { - color: $text-color; - } - .pgn__form-checkbox-input:focus::before, .pgn__form-radio-input:focus::before { display: none !important; } - input[type=radio], input[type=checkbox] { - &:checked { - border-color: $text-color; - } - } - } - } - } - .sidebar-column { - .widget-sidebar { - div { - background: none !important; - } - #looking-for-challenge-widget { - .pgn__card-body { - a { - color: $text-color; - svg { - fill: $text-color; - } - } - } - } + } + .sidebar-column { + .widget-sidebar { + div { + background: none !important; + } + #looking-for-challenge-widget { + .pgn__card-body { + a { + color: $text-color; + svg { + fill: $text-color; } + } } + } } + } } + } } #no-courses-content-view { - background: $body-bg; - border: 1px solid $border-color; - .btn.btn-brand{ - color: $btn-color !important; - } + background: $body-bg; + border: 1px solid $border-color; + .btn.btn-brand { + color: $btn-color !important; + } } // style sheet component #sheet-root.sheet-container { - .pgn__sheet-component { - background: $light-overlay; - .filter-form-row { - .filter-form-heading { - color: $text-color; - } - .pgn__form-label { - color: $text-color; - } - input[type=radio], input[type=checkbox] { - border: 1px solid #C4C7CF; - &:checked { - border-color: #15376D; - } - } + .pgn__sheet-component { + background: $light-overlay; + .filter-form-row { + .filter-form-heading { + color: $text-color; + } + .pgn__form-label { + color: $text-color; + } + input[type="radio"], + input[type="checkbox"] { + border: 1px solid #c4c7cf; + &:checked { + border-color: #15376d; } + } } - .pgn__modal-close-container { - button { - color: $text-color; - background: none; - } + } + .pgn__modal-close-container { + button { + color: $text-color; + background: none; } + } } footer.tutor-container .copyright-site { - color: $text-color-primary; + color: $text-color-primary; } #root header.customise.learning-header { - background: none; - box-shadow: 0px 1px 2px 0px rgba(255,255,255,0.8),0px 1px 3px 0px rgba(255,255,255,0.1); -.course-title-lockup { - .nav-course { - a { - color: $text-color; - border-bottom: 2px solid transparent; - &.active, &:hover { - color: $text-color; - border-bottom: 2px solid $text-color; - } - } + background: none; + box-shadow: 0px 1px 2px 0px rgba(255, 255, 255, 0.8), + 0px 1px 3px 0px rgba(255, 255, 255, 0.1); + .course-title-lockup { + .nav-course { + a { + color: $text-color; + border-bottom: 2px solid transparent; + &.active, + &:hover { + color: $text-color; + border-bottom: 2px solid $text-color; } -} + } + } + } } #root .alert.alert-success { - background: $primary-light; - a { - background: $primary; - color: $btn-color; - } + background: $primary-light; + a { + background: $primary; + color: $btn-color; + } } #courseHome-outline { - .pgn_collapsible { - border: 1px solid $primary-light; - border-left: 8px solid $primary-light; - background: none !important; - } - .collapsible-trigger { - .btn-icon-primary { - &:hover, &:active, &:focus { - color: $btn-color; - background: $primary; - } - } + .pgn_collapsible { + border: 1px solid $primary-light; + border-left: 8px solid $primary-light; + background: none !important; + } + .collapsible-trigger { + .btn-icon-primary { + &:hover, + &:active, + &:focus { + color: $btn-color; + background: $primary; + } } + } } .btn-outline-primary:hover { - background-color: transparent; + background-color: transparent; } .course-tabs-navigation { - .nav.nav-underline-tabs { - a, button { - color: $text-color-primary; - &:hover { - color: $text-color; - } - &.active { - color: $text-color; - border-bottom-color: $text-color - } - } + .nav.nav-underline-tabs { + a, + button { + color: $text-color-primary; + &:hover { + color: $text-color; + } + &.active { + color: $text-color; + border-bottom-color: $text-color; + } } + } } .pgn__modal-backdrop { - background: #393939; - opacity: .9; + background: #393939; + opacity: 0.9; } .pgn__modal-header { - background: none; + background: none; } -.text-gray-900, a.text-gray-900:hover { - color: $text-color !important; +.text-gray-900, +a.text-gray-900:hover { + color: $text-color !important; } -.pgn__modal, .pgn__modal-footer { - background: $primary-light; - box-shadow: none; - .bg-white { - background: none !important; - } - .pgn__action-row { - button { - border: 1px solid #D1D5DB !important; - color: $text-color !important; - background: transparent !important; - &.btn-brand { - background: $primary !important; - border-color: $primary !important; - } - &.btn-danger { - background: $danger !important; - border-color: $danger !important; - color: $text-color !important; - } - &.btn-primary { - background: $primary !important; - border-color: $primary !important; - color: $btn-color !important; - } - } +.pgn__modal, +.pgn__modal-footer { + background: $primary-light; + box-shadow: none; + .bg-white { + background: none !important; + } + .pgn__action-row { + button { + border: 1px solid #d1d5db !important; + color: $text-color !important; + background: transparent !important; + &.btn-brand { + background: $primary !important; + border-color: $primary !important; + } + &.btn-danger { + background: $danger !important; + border-color: $danger !important; + color: $text-color !important; + } + &.btn-primary { + background: $primary !important; + border-color: $primary !important; + color: $btn-color !important; + } } + } } a.discussion-post { - background: $primary-light !important; + background: $primary-light !important; } .pgn__modal-body-content { - select.form-control { - background-color: $primary-light; - color: $text-color; - } - .form-control:focus ~ .pgn__form-control-floating-label .pgn__form-control-floating-label-text, .form-control.has-value ~ .pgn__form-control-floating-label .pgn__form-control-floating-label-text { - background-color: $primary-light; + select.form-control { + background-color: $primary-light; + color: $text-color; + } + .form-control:focus + ~ .pgn__form-control-floating-label + .pgn__form-control-floating-label-text, + .form-control.has-value + ~ .pgn__form-control-floating-label + .pgn__form-control-floating-label-text { + background-color: $primary-light; - &:focus{ - box-shadow: 0 0 0 1px $primary; - } + &:focus { + box-shadow: 0 0 0 1px $primary; } + } } #paragon-portal-root .new-user-tour-dialog { - .pgn__modal-body-content { - p { - color: $text-color-primary !important; - } + .pgn__modal-body-content { + p { + color: $text-color-primary !important; } - .pgn__action-row { - button { - border: 1px solid #D1D5DB !important; - color: $text-color !important; - background: transparent !important; - &.btn-brand { - color: $btn-color !important; - background: $primary !important; - border-color: $primary !important; - } - &.btn-danger { - background: $danger !important; - border-color: $danger !important; - color: $text-color !important; - } - } + } + .pgn__action-row { + button { + border: 1px solid #d1d5db !important; + color: $text-color !important; + background: transparent !important; + &.btn-brand { + color: $btn-color !important; + background: $primary !important; + border-color: $primary !important; + } + &.btn-danger { + background: $danger !important; + border-color: $danger !important; + color: $text-color !important; + } } + } } #pgn__checkpoint { - background: $primary-light; - #pgn__checkpoint-title { - color: $text-color; - } - .pgn__checkpoint-body { - color: $text-color; - } - .pgn__checkpoint-action-row { - .btn.btn-tertiary { - color: $text-color; - background: black; - } + background: $primary-light; + #pgn__checkpoint-title { + color: $text-color; + } + .pgn__checkpoint-body { + color: $text-color; + } + .pgn__checkpoint-action-row { + .btn.btn-tertiary { + color: $text-color; + background: black; } + } } .pgn__modal.pgn__modal-default { - .bg-white { - .pgn__action-row { - button { - &.btn-tertiary { - border: 1px solid $text-color; - background: transparent; - color: $text-color; - } - } + .bg-white { + .pgn__action-row { + button { + &.btn-tertiary { + border: 1px solid $text-color; + background: transparent; + color: $text-color; } - .pgn__form-control-set { - .form-control { - background: none; - } - .pgn__form-radio { - .pgn__form-label { - color: $text-color; - } - .pgn__form-radio-input { - border: 1px solid #C4C7CF; - } - } + } + } + .pgn__form-control-set { + .form-control { + background: none; + } + .pgn__form-radio { + .pgn__form-label { + color: $text-color; + } + .pgn__form-radio-input { + border: 1px solid #c4c7cf; } + } } + } } .sequence-navigation .btn { - border-color: $primary-light !important; - color: $text-color !important; + border-color: $primary-light !important; + color: $text-color !important; } .sequence { - border-color: $primary-light !important; - border-top: 1px solid $primary-light !important; + border-color: $primary-light !important; + border-top: 1px solid $primary-light !important; } #root { - .outline-sidebar-heading-wrapper.bg-light-200.collapsed { - border-color: $primary-light !important; + .outline-sidebar-heading-wrapper.bg-light-200.collapsed { + border-color: $primary-light !important; + background: $primary-light !important; + button.outline-sidebar-toggle-btn { + background: $primary !important; + svg { + path { + fill: $btn-color !important; + } + } + } + } + .sequence-container { + .outline-sidebar-heading-wrapper.bg-light-200 { + background: $primary-light !important; + border-color: $primary-light !important; + button.outline-sidebar-toggle-btn { + background: $primary !important; + svg { + path { + fill: $btn-color !important; + } + } + } + } + .outline-sidebar-wrapper { + .outline-sidebar-heading-wrapper.bg-light-200 { + border-color: $primary !important; background: $primary-light !important; + button.outline-sidebar-heading { + text-decoration: none !important; + } button.outline-sidebar-toggle-btn { - background: $primary !important; - svg { - path { - fill: $btn-color !important; - } + background: $primary !important; + svg { + path { + fill: $btn-color !important; } + } } - } - .sequence-container { - .outline-sidebar-heading-wrapper.bg-light-200 { - background: $primary-light !important; - border-color: $primary-light !important; - button.outline-sidebar-toggle-btn { - background: $primary !important; - svg { - path { - fill: $btn-color !important; - } - } - } + } + ol#outline-sidebar-outline { + background: transparent !important; + margin-top: 6px; + .collapsible-trigger { + border-top: 1px solid $text-color; + &:hover { + background: $hover-color !important; + } + } + li { + border-top: 1px solid transparent !important; + } + .collapsible-card-lg { + background: $primary-light !important; + } + li.course-sidebar-section { + background: $primary-light !important; + border: 1px solid $text-color-primary !important; } - .outline-sidebar-wrapper { - .outline-sidebar-heading-wrapper.bg-light-200 { - border-color: $primary !important; - background: $primary-light !important; - button.outline-sidebar-heading { - text-decoration: none !important; - } - button.outline-sidebar-toggle-btn { - background: $primary !important; - svg { - path { - fill: $btn-color !important; - } - } - } - } - ol#outline-sidebar-outline { - background: transparent !important; - margin-top: 6px; - .collapsible-trigger { - border-top: 1px solid $text-color; - &:hover { - background: $hover-color !important; - } - } - li{ - border-top: 1px solid transparent !important; - } - .collapsible-card-lg { - background: $primary-light !important; - } - li.course-sidebar-section { - background: $primary-light !important; - border: 1px solid $text-color-primary !important; - } - li.bg-info-100 { - background: $hover-color !important; - } - a.text-gray-700 { - color: $text-color !important; - &:hover, &:focus { - color: $text-color !important; - background: $hover-color !important; - } - } - button.bg-info-100.btn { - background: $hover-color !important; - color: $text-color !important; - } - button.btn { - &:hover { - background: $hover-color !important; - color: $text-color !important; - } - .pgn__icon { - svg { - path { - fill: $text-color !important; - } - } - } - } - } + li.bg-info-100 { + background: $hover-color !important; } - .sequence { - #courseware-sequenceNavigation { - .sequence-navigation-tabs { - button { - color: white; - border-color: $border-color; - &.complete { - background: $primary-light; - color: $primary; - &:after { - background: $primary-light !important; - } - &.active { - &:after { - background: $primary !important; - } - } - .text-success { - color: $primary !important; - } - } - } + a.text-gray-700 { + color: $text-color !important; + &:hover, + &:focus { + color: $text-color !important; + background: $hover-color !important; + } + } + button.bg-info-100.btn { + background: $hover-color !important; + color: $text-color !important; + } + button.btn { + &:hover { + background: $hover-color !important; + color: $text-color !important; + } + .pgn__icon { + svg { + path { + fill: $text-color !important; + } + } + } + } + } + } + .sequence { + #courseware-sequenceNavigation { + .sequence-navigation-tabs { + button { + color: white; + border-color: $border-color; + &.complete { + background: $primary-light; + color: $primary; + &:after { + background: $primary-light !important; + } + &.active { + &:after { + background: $primary !important; } + } + .text-success { + color: $primary !important; + } } + } } + } } + } } #root header.site-header-mobile { - background: $body-bg; - box-shadow: 0px 1px 2px 0px rgba(255, 255, 255, 0.8), 0px 1px 3px 0px rgba(255, 255, 255, 0.1) !important; - .menu { - button { - .hamburger-menu { - .line { - background: $text-color; - } - } - } - .menu-content { - box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.8), 0px 4px 6px -2px rgba(255, 255, 255, 0.05), 0px 10px 15px -3px rgba(255, 255, 255, 0.1); - background: $light-overlay; - a { - color: $text-color; - background: $light-overlay !important; - &:hover { - color: $text-color; - background: $body-bg !important; - } - } + background: $body-bg; + box-shadow: 0px 1px 2px 0px rgba(255, 255, 255, 0.8), + 0px 1px 3px 0px rgba(255, 255, 255, 0.1) !important; + .menu { + button { + .hamburger-menu { + .line { + background: $text-color; + } + } + } + .menu-content { + box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.8), + 0px 4px 6px -2px rgba(255, 255, 255, 0.05), + 0px 10px 15px -3px rgba(255, 255, 255, 0.1); + background: $light-overlay; + a { + color: $text-color; + background: $light-overlay !important; + &:hover { + color: $text-color; + background: $body-bg !important; } + } } + } } #root header.site-header-desktop { - background: $body-bg; - box-shadow: 0px 1px 2px 0px rgba(255, 255, 255, 0.8), 0px 1px 3px 0px rgba(255, 255, 255, 0.1); - .main-nav { - a.nav-link { - color: $text-color; - &:hover { - color: $text-color; - border-bottom: 2px solid $text-color; - } + background: $body-bg; + box-shadow: 0px 1px 2px 0px rgba(255, 255, 255, 0.8), + 0px 1px 3px 0px rgba(255, 255, 255, 0.1); + .main-nav { + a.nav-link { + color: $text-color; + &:hover { + color: $text-color; + border-bottom: 2px solid $text-color; + } + } + } + .menu { + button { + background: $primary !important; + color: $btn-color; + &:after { + border: 2px solid $btn-color; + } + } + .menu-content { + background: $light-overlay; + box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.8), + 0px 4px 6px -2px rgba(255, 255, 255, 0.05), + 0px 10px 15px -3px rgba(255, 255, 255, 0.1) !important; + a { + color: $text-color; + background: $light-overlay !important; + &:hover { + background: $body-bg !important; + color: $text-color; } + } } - .menu { + } +} +.page__account-settings { + #delete-account { + button.btn-outline-danger { + color: $text-color; + background: none; + } + } + .pgn-transition-replace-group + .form-group { + border: 1px solid $primary-light; + border-left: 8px solid $primary-light; + } + .pgn-transition-replace-group { + border: 1px solid $primary-light; + border-left: 8px solid $primary-light; + .form-group { + .d-flex.align-items-start { button { - background: $primary !important; - color: $btn-color; - &:after { - border: 2px solid $btn-color; - } + color: $btn-color; } - .menu-content { - background: $light-overlay; - box-shadow: 0px 0px 0px 1px rgba(255, 255, 255, 0.8), 0px 4px 6px -2px rgba(255, 255, 255, 0.05), 0px 10px 15px -3px rgba(255, 255, 255, 0.1) !important; - a { - color: $text-color; - background: $light-overlay !important; - &:hover { - background: $body-bg !important; - color: $text-color; ; - } + } + } + form { + > p { + button { + color: $btn-color; + &.btn-outline-primary { + background: none !important; + color: $text-color; + &:not(:disabled):not(.disabled):active { + color: $text-color; } + } + &.btn-primary:not(:disabled):not(.disabled):active { + color: $btn-color; + } } + } } + } } -.page__account-settings { - #delete-account { - button.btn-outline-danger { - color: $text-color; - background: none; +// profile page style +.profile-page { + .alert-content.alert.alert-danger { + background: $primary-light; + padding: 10px; + } + .profile-avatar-menu-container { + .dropdown { + .dropdown-menu { + a.dropdown-item { + color: $text-color; + &:hover { + background: $body-bg; + } } + } } - .pgn-transition-replace-group + .form-group { - border: 1px solid $primary-light; - border-left: 8px solid $primary-light; + } + .profile-page-bg-banner { + background: none !important; + &:after { + box-shadow: 110px -100px 100px 90px rgba(#36383b, 0.55); + -webkit-box-shadow: 110px -100px 100px 90px rgba(#36383b, 0.55); + -moz-box-shadow: 110px -100px 100px 90px rgba(#36383b, 0.55); } - .pgn-transition-replace-group { + } + .container-fluid { + .row { + .pgn-transition-replace-group { border: 1px solid $primary-light; border-left: 8px solid $primary-light; - .form-group { - .d-flex.align-items-start { - button { - color: $btn-color; - } - } - } - form { - >p { - button { - color: $btn-color; - &.btn-outline-primary { - background: none !important; - color: $text-color; - &:not(:disabled):not(.disabled):active{ - color: $text-color; - } - } - &.btn-primary:not(:disabled):not(.disabled):active { - color: $btn-color; - } - } + .col-sm-6.d-flex.align-items-stretch { + .card-body { + a.default-link { + &:after { + color: $btn-color; + } } + } } - } -} -// profile page style -.profile-page { - .alert-content.alert.alert-danger { - background: $primary-light; - padding: 10px; - } - .profile-avatar-menu-container { - .dropdown { - .dropdown-menu { - a.dropdown-item { - color: $text-color; - &:hover { - background: $body-bg; - } - } - } + .editable-item-header { + button { + color: $btn-color; + } } - } - .profile-page-bg-banner { - background: none !important; - &:after { - box-shadow: 110px -100px 100px 90px rgba(#36383B, 0.55); - -webkit-box-shadow: 110px -100px 100px 90px rgba(#36383B, 0.55); - -moz-box-shadow: 110px -100px 100px 90px rgba(#36383B, 0.55); + .editable-item-header + div { + button { + color: $text-color; + } } - } - .container-fluid { - .row { - .pgn-transition-replace-group { - border: 1px solid $primary-light; - border-left: 8px solid $primary-light; - .col-sm-6.d-flex.align-items-stretch { - .card-body { - a.default-link { - &:after { - color: $btn-color - } - - } - } - } - .editable-item-header { - button { - color: $btn-color; - } - } - .editable-item-header + div { - button { - color: $text-color; - } - } - .editable-item-header + .list-unstyled { - li { - button { - color: $text-color; - } - } - } + .editable-item-header + .list-unstyled { + li { + button { + color: $text-color; } - form { - .form-group { - &.flex-shrink-0.flex-grow-1 { - button { - color: $btn-color; - &.btn-link { - background: $body-bg !important; - color: $text-color; - } - } - } - } + } + } + } + form { + .form-group { + &.flex-shrink-0.flex-grow-1 { + button { + color: $btn-color; + &.btn-link { + background: $body-bg !important; + color: $text-color; + } } + } } + } } - .rounded-circle.bg-light { - background: $primary-light !important; - } + } + .rounded-circle.bg-light { + background: $primary-light !important; + } } // progress page style svg { - circle.donut-hole { - fill: transparent !important; - } + circle.donut-hole { + fill: transparent !important; + } } .grade-bar { - .grade-bar--current-non-passing { - fill: $danger; - } + .grade-bar--current-non-passing { + fill: $danger; + } } .course-tabs-navigation + .container-xl { - >.row { - >.col-12.col-md-8.p-0 { - .rounded.raised-card { - border: 1px solid $primary-light !important; - border-left: 8px solid $primary-light !important; - &.grades { - border: none !important; - .btn-icon.btn-icon-primary { - background: none !important; - } - } - } - } - >.col-12.col-md-4.p-0.px-md-4, >.col-12.col-md-8.p-0 { - .bg-light-200.raised-card { - .btn.btn-outline-brand { - border: 1px solid $primary !important; - color: $btn-color; - background: $primary; - } - } - section.mb-4.x-small { - background-color: $primary-light; - } + > .row { + > .col-12.col-md-8.p-0 { + .rounded.raised-card { + border: 1px solid $primary-light !important; + border-left: 8px solid $primary-light !important; + &.grades { + border: none !important; + .btn-icon.btn-icon-primary { + background: none !important; + } } + } } - .donut-chart-text { - .donut-chart-number { - color: $text-color; - } - .donut-chart-label { - color: $text-color-primary; + > .col-12.col-md-4.p-0.px-md-4, + > .col-12.col-md-8.p-0 { + .bg-light-200.raised-card { + .btn.btn-outline-brand { + border: 1px solid $primary !important; + color: $btn-color; + background: $primary; } + } + section.mb-4.x-small { + background-color: $primary-light; + } } + } + .donut-chart-text { + .donut-chart-number { + color: $text-color; + } + .donut-chart-label { + color: $text-color-primary; + } + } } #root { - .grades { - .pgn__data-table { - thead { - th { - border-bottom: 1px solid $border-color !important; - } - } - &.is-striped tr:nth-child(even) { - background: none !important; - } - } - .pgn__data-table-wrapper { - border: 1px solid $primary-light !important; - border-left: 8px solid $primary-light !important; - background: none; - } + .grades { + .pgn__data-table { + thead { + th { + border-bottom: 1px solid $border-color !important; + } + } + &.is-striped tr:nth-child(even) { + background: none !important; + } + } + .pgn__data-table-wrapper { + border: 1px solid $primary-light !important; + border-left: 8px solid $primary-light !important; + background: none; } + } } #non-passing-grade-tooltip { - .popover-body { - color: white !important; - } + .popover-body { + color: white !important; + } } #minimum-grade-tooltip.bg-primary-500 { - background: #9CA3AF !important; - border-color: #9CA3AF !important; - filter: none; - .arrow { - &:before { - border-bottom-color: #9CA3AF !important; - } - &:after { - border-bottom-color: #9CA3AF !important; - } + background: #9ca3af !important; + border-color: #9ca3af !important; + filter: none; + .arrow { + &:before { + border-bottom-color: #9ca3af !important; } - .popover-body { - color: white !important; + &:after { + border-bottom-color: #9ca3af !important; } + } + .popover-body { + color: white !important; + } } // Discussion style #root { - #courseTabsNavigation { - background: none; - } - .btn-icon.btn-icon-primary.post-footer-icon-dimentions, .btn-icon.btn-icon-primary.post-footer-icon-dimensions { - background: none !important; - color: $text-color !important; - border: none !important; - outline: none; - box-shadow: none; - } + #courseTabsNavigation { + background: none; + } + .btn-icon.btn-icon-primary.post-footer-icon-dimentions, + .btn-icon.btn-icon-primary.post-footer-icon-dimensions { + background: none !important; + color: $text-color !important; + border: none !important; + outline: none; + box-shadow: none; + } } #root .header-action-bar { - background: none; - .navbar { - .nav-item { - a.nav-link { - color: $text-color !important; - &:hover { - color: $text-color !important; - } - &.active { - color: $btn-color !important; - } - } - + background: none; + .navbar { + .nav-item { + a.nav-link { + color: $text-color !important; + &:hover { + color: $text-color !important; } + &.active { + color: $btn-color !important; + } + } } - .btn.btn-brand { - color: $btn-color; - } + } + .btn.btn-brand { + color: $btn-color; + } } #root .header-action-bar + .d-flex.flex-row.position-relative { - .bg-light-300 { + .bg-light-300 { + background: $primary-light !important; + } + .mx-4 > .bg-white.rounded { + background: $primary-light !important; + } + .hover-card { + background: $body-bg !important; + border: 1px solid $border-color !important; + height: 40px !important; + button { + background: $body-bg !important; + color: $text-color !important; + border-radius: 0 !important; + &:before { + display: none !important; + } + &:hover { background: $primary-light !important; + color: $text-color !important; + } } - .mx-4 > .bg-white.rounded { - background: $primary-light !important; + } + .comments-sort { + button.btn.btn-tertiary { + border: 1px solid $text-color; + background: none !important; + color: $text-color; } - .hover-card { - background: $body-bg !important; - border: 1px solid $border-color !important; - height: 40px !important; - button { - background: $body-bg !important; - color: $text-color !important; - border-radius: 0 !important; - &:before { - display: none !important; - } - &:hover { - background: $primary-light !important; - color: $text-color !important; - } + } + .actions-dropdown { + .bg-white { + background: $body-bg !important; + border: 1px solid $border-color !important; + button { + background: none !important; + color: $text-color !important; + &:before { + display: none !important; } - - } - .comments-sort { - button.btn.btn-tertiary { - border: 1px solid $text-color; - background: none !important; - color: $text-color; + &:hover { + background: $primary-light !important; } + } } - .actions-dropdown { - .bg-white { - background: $body-bg !important; - border: 1px solid $border-color !important; - button { - background: none !important; - color: $text-color !important; - &:before { - display: none !important; - } - &:hover { - background: $primary-light !important; - } - } - } + } + .card, + .collapsible-card, + .collapsible-card-lg { + background: $primary-light !important; + .alert-info { + background: $body-bg !important; } - .card, .collapsible-card, .collapsible-card-lg { - background: $primary-light !important; - .alert-info { - background: $body-bg !important; - } - .alert-danger { - background: $body-bg !important; - } + .alert-danger { + background: $body-bg !important; } - .flex-column.position-sticky.d-flex { - .btn-icon.btn-icon-primary.btn-icon-inline { - background: none !important; - color: $text-color !important; - } - - .pgn-transition-replace-group { - .collapsible-body { - padding: 10px !important; - .list-group-flush { - width: 33.33%; - .filter-menu { - font-size: 12px; - padding: 0 0 5px !important; - align-items: flex-start !important; - .pgn__icon { - width: 20px !important; - height: 17px; - margin: 0 5px 0 0 !important; - } - .text-truncate { - white-space: normal !important; - } - } - } - } - } + } + .flex-column.position-sticky.d-flex { + .btn-icon.btn-icon-primary.btn-icon-inline { + background: none !important; + color: $text-color !important; } - .d-flex.bg-light-400.flex-column { - background: none !important; - .post-form { - margin-top: 0 !important; - .justify-content-end button { - padding: 7px 11px !important; + + .pgn-transition-replace-group { + .collapsible-body { + padding: 10px !important; + .list-group-flush { + width: 33.33%; + .filter-menu { font-size: 12px; - font-weight: 500; - } - .justify-content-end button.btn-outline-primary { - background: none !important; - color: $primary !important; - border-color: $primary !important; - } - .font-style.d-flex.flex-row { - @include media-breakpoint-down(sm) { - display: block !important - } - } - .card { - width: 170px !important; - @include media-breakpoint-down(sm) { - width: 120px !important; - } - .pgn__card-section { - @include media-breakpoint-down(sm) { - padding: 10px !important; - } - } + padding: 0 0 5px !important; + align-items: flex-start !important; + .pgn__icon { + width: 20px !important; + height: 17px; + margin: 0 5px 0 0 !important; } + .text-truncate { + white-space: normal !important; } + } } + } } - .discussion-posts { - .border-light-400 { - border-color: $primary-light !important; - } - .d-flex.flex-row.border-bottom.border-light-400 { - font-size: 14px; - button { - min-width: 98px !important; - text-align: left !important; - } + } + .d-flex.bg-light-400.flex-column { + background: none !important; + .post-form { + margin-top: 0 !important; + .justify-content-end button { + padding: 7px 11px !important; + font-size: 12px; + font-weight: 500; + } + .justify-content-end button.btn-outline-primary { + background: none !important; + color: $primary !important; + border-color: $primary !important; + } + .font-style.d-flex.flex-row { + @include media-breakpoint-down(sm) { + display: block !important; + } + } + .card { + width: 170px !important; + @include media-breakpoint-down(sm) { + width: 120px !important; + } + .pgn__card-section { + @include media-breakpoint-down(sm) { + padding: 10px !important; + } } + } } - #root { - .header-action-bar.shadow-none.border-light-300.border-bottom { - padding: 0 15px !important; - margin: 0 0 10px; - border-color: $primary-light !important; - .navbar { - padding-left: 0 !important; - padding-right: 0 !important; - } - h4 { - font-size: 14px; - font-weight: 700 !important; - } - button { - font-size: 14px; - } + } +} +.discussion-posts { + .border-light-400 { + border-color: $primary-light !important; + } + .d-flex.flex-row.border-bottom.border-light-400 { + font-size: 14px; + button { + min-width: 98px !important; + text-align: left !important; } - } - #root .header-action-bar.shadow-none.border-light-300.border-bottom button { - color: $text-color; - } - .flex-row.d-flex.flex-row.position-relative .px-4.bg-white { - background: $primary-light !important; - } - .content-tools { - .trigger { - color: $text-color; - background: $primary-light; - border-color: $primary-light; + } +} +#root { + .header-action-bar.shadow-none.border-light-300.border-bottom { + padding: 0 15px !important; + margin: 0 0 10px; + border-color: $primary-light !important; + .navbar { + padding-left: 0 !important; + padding-right: 0 !important; } - .btn-link { - color: $primary !important; + h4 { + font-size: 14px; + font-weight: 700 !important; } - } - .calculator .calculator-content { - background-color: $primary-light; - box-shadow: none; + button { + font-size: 14px; + } + } } -.table { +#root .header-action-bar.shadow-none.border-light-300.border-bottom button { + color: $text-color; +} +.flex-row.d-flex.flex-row.position-relative .px-4.bg-white { + background: $primary-light !important; +} +.content-tools { + .trigger { color: $text-color; + background: $primary-light; + border-color: $primary-light; + } + .btn-link { + color: $primary !important; + } +} +.calculator .calculator-content { + background-color: $primary-light; + box-shadow: none; +} +.table { + color: $text-color; } .btn-icon.btn-icon-black { - color: $text-color; + color: $text-color; } input::placeholder { - opacity: .9; - color: $text-color; - } + opacity: 0.9; + color: $text-color; +} * { scrollbar-color: $text-color $body-bg; } .bg-success-100 { - background: #292A2C !important; + background: #292a2c !important; } #root { - .course-outline-tab { - .raised-card { - .pgn__card-header-actions { - a { - color: $btn-color !important; - } - } + .course-outline-tab { + .raised-card { + .pgn__card-header-actions { + a { + color: $btn-color !important; } - .pgn__card-header-content { - .pgn__card-header-actions { - a { - color: $btn-color !important; - } - } + } + } + .pgn__card-header-content { + .pgn__card-header-actions { + a { + color: $btn-color !important; } + } } + } } .pgn__modal-body-content { - .alert-warning { - background: none !important; - } - .form-control { - background: none !important; - border: 1px solid $border-color; - color: $text-color; + .alert-warning { + background: none !important; + } + .form-control { + background: none !important; + border: 1px solid $border-color; + color: $text-color; - &:focus{ - box-shadow: 0 0 0 1px $primary; - } + &:focus { + box-shadow: 0 0 0 1px $primary; } + } } .pgn__card-header-title-md { - color: $text-color !important; + color: $text-color !important; } .popover { - background: $primary-light; + background: $primary-light; + color: $text-color; + * { color: $text-color; - * { - color: $text-color; - } - &.bs-popover-top { - .arrow:before, .arrow:after { - border-top-color: $primary-light; - } + } + &.bs-popover-top { + .arrow:before, + .arrow:after { + border-top-color: $primary-light; } + } } .bs-popover-top#non-passing-grade-tooltip .popover-body { - color: $btn-color !important; + color: $btn-color !important; } button.mr-3.btn.btn-link.btn-inline { - color: $primary !important; + color: $primary !important; } button.p-2.btn.btn-inline { - color: $text-color !important; + color: $text-color !important; } .sequence-navigation .btn.complete { - background: $primary-light; + background: $primary-light; } -div[role=heading].h2 + .list-unstyled.m-0.mt-4.pt-2 { - li { - &.dates-day.pb-4 { - .dates-dot { - background: $primary-light; - &.border { - &.border-gray-900 { - background: $primary-light !important; - } - &.bg-warning-300 { - background: $primary-light !important; - } - } - } - } - &:first-child { - &.dates-day.pb-4 { - .dates-dot { - &.border { - &.border-gray-900 { - &:before { - border-color: $btn-color - } - } - &.bg-warning-300 { - background: $primary-light !important; - } - } - } - } - } - &:nth-child(2) { - &.dates-day.pb-4 { - .dates-dot { - &.border { - &.border-gray-900 { - &:before { - border-color: $btn-color; - } - } - &.bg-warning-300 { - background: $primary-light !important; - &:before { - display: none !important; - } - } - } - } +div[role="heading"].h2 + .list-unstyled.m-0.mt-4.pt-2 { + li { + &.dates-day.pb-4 { + .dates-dot { + background: $primary-light; + &.border { + &.border-gray-900 { + background: $primary-light !important; + } + &.bg-warning-300 { + background: $primary-light !important; + } + } + } + } + &:first-child { + &.dates-day.pb-4 { + .dates-dot { + &.border { + &.border-gray-900 { + &:before { + border-color: $btn-color; + } + } + &.bg-warning-300 { + background: $primary-light !important; + } + } + } + } + } + &:nth-child(2) { + &.dates-day.pb-4 { + .dates-dot { + &.border { + &.border-gray-900 { + &:before { + border-color: $btn-color; + } + } + &.bg-warning-300 { + background: $primary-light !important; + &:before { + display: none !important; + } } + } } + } } + } } #course-list-active-filters { - .pgn__chip.pgn__chip-light { - * { - color: $btn-color; - fill: $btn-color; - } + .pgn__chip.pgn__chip-light { + * { + color: $btn-color; + fill: $btn-color; } + } } -section[data-testid=sidebar-NOTIFICATIONS], section[data-testid=sidebar-DISCUSSIONS] { - &.border-light-400 { - border-color: $primary-light !important; - } +section[data-testid="sidebar-NOTIFICATIONS"], +section[data-testid="sidebar-DISCUSSIONS"] { + &.border-light-400 { + border-color: $primary-light !important; + } } .donut-chart-text { - fill: $primary-500; + fill: $primary-500; } -.theme-toggle-button{ - .light-theme-icon > span, .dark-theme-icon > span{ - color: $text-color-primary; - } - .toggle-switch { - .switch { - /* The slider */ - .slider { - background-color: #ccc; - box-shadow: 0 0 1px #ccc; - &::before{ - transform: translateX(19px); - background-color: $text-color-primary; - } - } - } +.theme-toggle-button { + .light-theme-icon > span, + .dark-theme-icon > span { + color: $text-color-primary; + } + .toggle-switch { + .switch { + /* The slider */ + .slider { + background-color: #ccc; + box-shadow: 0 0 1px #ccc; + &::before { + transform: translateX(19px); + background-color: $text-color-primary; + } + } } + } } +