From 08fb0ed9299f3e9883f8b15596659f5044e16701 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Ctanveer65=E2=80=9D?= Date: Wed, 13 Mar 2024 15:00:29 +0500 Subject: [PATCH 01/26] feat: style profile page and account page --- paragon/_overrides.scss | 576 +++++++++++++++++++++++++++++++++++++++- 1 file changed, 575 insertions(+), 1 deletion(-) diff --git a/paragon/_overrides.scss b/paragon/_overrides.scss index 9dd51823..3c672d9a 100644 --- a/paragon/_overrides.scss +++ b/paragon/_overrides.scss @@ -6,6 +6,10 @@ body, .text-monospace, * { -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } +html { + width: 100%; + overflow-x: hidden; +} .container-xl { max-width: 1090px !important; padding-left: 15px !important; @@ -838,7 +842,6 @@ div[data-learner-type=b2c_learner] { #root { position: relative; z-index: 1; - overflow: hidden; width: 100%; header.site-header-mobile { padding: 0 15px; @@ -958,6 +961,7 @@ div[data-learner-type=b2c_learner] { } header.site-header-desktop { z-index: 30; + height: auto; box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.06), 0px 1px 3px 0px rgba(0,0,0,0.1); .container-fluid { max-width: 1090px; @@ -2202,3 +2206,573 @@ div[role=heading].h2 + .list-unstyled.m-0.mt-4.pt-2 { } } } +// profile page style +.profile-page { + .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; + } + } + } + .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; + } + &:after { + 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); + } + } + .container-fluid { + margin: 0 auto; + max-width: 1090px; + 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: #111827; + margin: 0 0 5px; + } + p { + color: #6B7280; + 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: $primary-light; + color: #111827; + font-size: 14px; + line-height: 20px; + a { + color: $primary; + } + .alert-heading.h4 { + margin: 0 0 10px; + font-weight: 500; + font-size: 14px; + color: #111827; + } + p { + margin: 0 0 10px; + } + } + } + .pgn-transition-replace-group:empty { + 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; + font-size: 14px; + color: #111827; + p.h5 { + font-weight: 600; + font-size: 16px; + color: #111827; + margin: 5px 0 0 !important; + } + .edit-section-header { + font-size: 18px; + font-weight: 600; + line-height: 24px; + color: #111827; + 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: #111827 !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: #6B7280 !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; + } + } + } + } + } + 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; + } + } + } + } + } + } + } + .profile-avatar-wrap { + margin-bottom: 0 !important; + } + .profile-avatar { + svg.text-muted { + color: $primary !important; + } + } +} +.page__account-settings { + max-width: 1090px; + margin: 0 auto; + padding: 50px 15px 20px !important; + .form-control { + padding: 6px 10px; + font-size: 14px; + line-height: 20px; + height: 32px; + } + h1 { + color: #111827; + font-size: 24px; + line-height: 30px; + font-weight: 700; + margin: 0 0 20px; + } + .account-section { + font-size: 14px; + line-height: 20px; + color: #6B7280; + p { + margin: 0 0 15px; + } + h2.section-heading { + font-size: 18px; + line-height: 24px; + font-weight: 700; + margin: 0 0 15px; + color: #111827; + } + } + .row { + @include media-breakpoint-up(md) { + margin: 0; + } + .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; + } + } + } + } + } + } + .col-md-10 { + flex: 100%; + max-width: 100%; + @include media-breakpoint-up(md) { + flex: 500px; + max-width: 500px; + padding: 0 0 0 50px; + } + @include media-breakpoint-up(lg) { + flex: 600px; + max-width: 600px; + } + } + } + #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; + } + } + .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: #111827; + h6 { + font-weight: 600; + font-size: 18px; + color: #111827; + margin: 5px 0 0 !important; + } + p { + margin: 10px 0 0; + button { + &.btn-link { + font-weight: 600; + font-size: 16px; + color: $primary; + } + } + } + .alert-warning { + margin: 10px 0 0 !important; + box-shadow: none; + padding: 15px !important; + background: $primary-light !important; + a { + color: $primary; + } + } + } + .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: #111827; + p.h6 { + font-weight: 600; + font-size: 16px; + color: #111827; + 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; + line-height: 20px; + color: #111827 !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: #6B7280; + 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: #111827; + 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: #6B7280 !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: #111827; + 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; + } + } + } + } + } +} \ No newline at end of file From df6eecdc8a9385e8feef7c09913738a5a47443d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Ctanveer65=E2=80=9D?= Date: Tue, 26 Mar 2024 14:01:53 +0500 Subject: [PATCH 02/26] feat:updates colors --- paragon/_overrides.scss | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/paragon/_overrides.scss b/paragon/_overrides.scss index 3c672d9a..78a811e9 100644 --- a/paragon/_overrides.scss +++ b/paragon/_overrides.scss @@ -104,7 +104,7 @@ html { border-radius: 6px; border: none; @include media-breakpoint-down(md) { - width: 180px; + width: 100%; } } } @@ -309,7 +309,7 @@ div[data-learner-type=b2c_learner] { font-weight: 500; padding: 0 0 16px; margin: 0 32px -1px 0; - color: #6B7280; + color: #515661; background: none !important; &:before { display: none; @@ -379,7 +379,7 @@ div[data-learner-type=b2c_learner] { font-size: 14px; line-height: 20px; a { - color: #6B7280 !important; + color: #515661 !important; font-weight: 500; } button { @@ -387,7 +387,7 @@ div[data-learner-type=b2c_learner] { background: none !important; padding: 0 !important; line-height: 20px; - color: #6B7280 !important; + color: #515661 !important; border: none !important; font-weight: 500; } @@ -794,7 +794,7 @@ div[data-learner-type=b2c_learner] { display: none; } p { - color: #6B7280 !important; + color: #515661 !important; font-size: 14px; line-height: 20px; text-align: center; @@ -1114,7 +1114,7 @@ div[data-learner-type=b2c_learner] { } .org { font-size: 12px; - color: #6B7280; + color: #515661; } } } @@ -1392,7 +1392,7 @@ footer.tutor-container { position: relative; font-size: 12px; line-height: 18px; - color: #6B7280; + color: #515661; &:first-child { padding-left: 0; } @@ -1406,7 +1406,7 @@ footer.tutor-container { width: 1px; height: 29px; margin: -14px 0 0; - background: #6B7280;; + background: #515661;; } } } @@ -1569,7 +1569,7 @@ footer.tutor-container { padding: 0 21px 18px; .small { font-size: 12px; - color: #6B7280; + color: #515661; } } .pgn__card-footer { @@ -1728,7 +1728,7 @@ footer.tutor-container { border: none; padding: 30px 15px; font-size: 14px; - color: #6B7280; + color: #515661; img { width: 170px; margin: 0 auto 50px; @@ -1775,7 +1775,7 @@ footer.tutor-container { } p{ font-size: 14px; - color: #6B7280; + color: #515661; } .pgn__action-row { flex-direction: row; @@ -2112,7 +2112,7 @@ div[role=heading].h2 + .list-unstyled.m-0.mt-4.pt-2 { font-weight: normal !important; font-size: 14px; line-height: 20px; - color: #6B7280; + color: #515661; } } .badge.badge-primary { @@ -2281,7 +2281,7 @@ div[role=heading].h2 + .list-unstyled.m-0.mt-4.pt-2 { margin: 0 0 5px; } p { - color: #6B7280; + color: #515661; margin: 0; font-size: 12px; line-height: 16px; @@ -2395,7 +2395,7 @@ div[role=heading].h2 + .list-unstyled.m-0.mt-4.pt-2 { p { .small.text-muted { font-size: 16px; - color: #6B7280 !important; + color: #515661 !important; line-height: 20px; } } @@ -2535,7 +2535,7 @@ div[role=heading].h2 + .list-unstyled.m-0.mt-4.pt-2 { .account-section { font-size: 14px; line-height: 20px; - color: #6B7280; + color: #515661; p { margin: 0 0 15px; } @@ -2695,7 +2695,7 @@ div[role=heading].h2 + .list-unstyled.m-0.mt-4.pt-2 { p.text-truncate, p[data-hj-suppress="true"] { font-weight: 600; font-size: 16px; - color: #6B7280; + color: #515661; margin: 5px 0 0 !important; button { font-weight: 600; @@ -2733,7 +2733,7 @@ div[role=heading].h2 + .list-unstyled.m-0.mt-4.pt-2 { p { .small.text-muted { font-size: 16px; - color: #6B7280 !important; + color: #515661 !important; line-height: 20px; } } From 294ccded805b6429b702dd7da47ee59a21a66062 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Ctanveer65=E2=80=9D?= Date: Fri, 5 Apr 2024 10:08:28 +0500 Subject: [PATCH 03/26] fixs: profile and account pages issue fix --- paragon/_overrides.scss | 103 +++++++++++++++++++++++++++++++++++++++- 1 file changed, 101 insertions(+), 2 deletions(-) diff --git a/paragon/_overrides.scss b/paragon/_overrides.scss index 78a811e9..531c6b3a 100644 --- a/paragon/_overrides.scss +++ b/paragon/_overrides.scss @@ -76,6 +76,17 @@ html { .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; + } + } .course-outline-tab { .raised-card { background: $primary-light; @@ -661,6 +672,32 @@ div[data-learner-type=b2c_learner] { } } >.col-12.col-md-4.p-0.px-md-4 { + .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; + } + .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; @@ -2350,7 +2387,69 @@ div[role=heading].h2 + .list-unstyled.m-0.mt-4.pt-2 { border-radius: 8px; font-size: 14px; color: #111827; - p.h5 { + .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: #111827; + margin: 0 !important; + } + h4.certificate-title, p.h6 { + font-size: 16px; + line-height: 20px; + color: #111827 !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: #111827; @@ -2518,7 +2617,7 @@ div[role=heading].h2 + .list-unstyled.m-0.mt-4.pt-2 { .page__account-settings { max-width: 1090px; margin: 0 auto; - padding: 50px 15px 20px !important; + padding: 35px 15px 20px !important; .form-control { padding: 6px 10px; font-size: 14px; From 53602bcfd95e6a8ed9a5dfd55c8fa2623bb4b51e Mon Sep 17 00:00:00 2001 From: Hina Khadim Date: Mon, 8 Apr 2024 16:22:46 +0500 Subject: [PATCH 04/26] Hina/light dark theme (#15) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: initial setup for dark theme * theme updates --------- Co-authored-by: “tanveer65” --- package.json | 3 + paragon/_account.scss | 261 ++++ paragon/_dates.scss | 146 ++ paragon/_discussion.scss | 206 +++ paragon/_extras.scss | 0 paragon/_footer.scss | 414 ++++++ paragon/_header.scss | 508 +++++++ paragon/_learning.scss | 188 +++ paragon/_login.scss | 165 +++ paragon/_overrides.scss | 2674 ++--------------------------------- paragon/_profile.scss | 371 +++++ paragon/_progress.scss | 181 +++ paragon/_tour.scss | 71 + paragon/_variables.scss | 7 +- postinstall.js | 31 + themes/dark/_variables.scss | 60 + 16 files changed, 2692 insertions(+), 2594 deletions(-) create mode 100644 paragon/_account.scss create mode 100644 paragon/_dates.scss create mode 100644 paragon/_discussion.scss create mode 100644 paragon/_extras.scss create mode 100644 paragon/_footer.scss create mode 100644 paragon/_header.scss create mode 100644 paragon/_learning.scss create mode 100644 paragon/_login.scss create mode 100644 paragon/_profile.scss create mode 100644 paragon/_progress.scss create mode 100644 paragon/_tour.scss create mode 100644 postinstall.js create mode 100644 themes/dark/_variables.scss diff --git a/package.json b/package.json index 1e1ec139..5e0db957 100644 --- a/package.json +++ b/package.json @@ -14,5 +14,8 @@ "homepage": "https://github.com/edly-io/brand-openedx#readme", "publishConfig": { "access": "public" + }, + "scripts": { + "postinstall": "node postinstall.js" } } diff --git a/paragon/_account.scss b/paragon/_account.scss new file mode 100644 index 00000000..6a224e2c --- /dev/null +++ b/paragon/_account.scss @@ -0,0 +1,261 @@ +.page__account-settings { + max-width: 1090px; + margin: 0 auto; + padding: 35px 15px 20px !important; + .form-control { + padding: 6px 10px; + font-size: 14px; + line-height: 20px; + height: 32px; + } + 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; + p { + margin: 0 0 15px; + } + 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; + } + .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; + } + } + } + } + } + } + .col-md-10 { + flex: 100%; + max-width: 100%; + @include media-breakpoint-up(md) { + flex: 500px; + max-width: 500px; + padding: 0 0 0 50px; + } + @include media-breakpoint-up(lg) { + flex: 600px; + max-width: 600px; + } + } + } + #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; + } + } + .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; + } + p { + margin: 10px 0 0; + button { + &.btn-link { + font-weight: 600; + font-size: 16px; + color: $primary; + } + } + } + .alert-warning { + margin: 10px 0 0 !important; + box-shadow: none; + padding: 15px !important; + background: $primary-light !important; + a { + color: $primary; + } + } + } + .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; + 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; + 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; + } + } + } + } + } +} diff --git a/paragon/_dates.scss b/paragon/_dates.scss new file mode 100644 index 00000000..3811e192 --- /dev/null +++ b/paragon/_dates.scss @@ -0,0 +1,146 @@ +div[role=heading].h2 + .list-unstyled.m-0.mt-4.pt-2 { + min-height: calc(100vh - 403px); + li { + &.dates-day.pb-4 { + .dates-line-bottom { + left: 15px; + top: 10px; + border-left: 2px solid #D1D5DB !important; + } + .dates-dot { + width: 32px; + height: 32px; + background: #fff; + left: 0; + top: 0; + &.border { + border: 2px solid #D1D5DB !important; + &.border-gray-900 { + background: white !important; + border: 2px solid #D1D5DB !important; + } + &.bg-warning-300 { + border: 2px solid $primary !important; + background: white !important; + &:after { + position: absolute; + left: 50%; + top: 50%; + content: ""; + background: $primary; + border-radius: 50%; + width: 10px; + height: 10px; + margin: -5px 0 0 -5px; + } + } + } + } + .d-inline-block { + padding: 0 0 0 48px !important; + margin: 0 !important; + .row.text-primary-700 { + font-size: 12px; + font-weight: 600 !important; + text-transform: uppercase; + margin: 0 !important; + } + .small { + .font-weight-bold { + font-weight: normal !important; + font-size: 14px; + line-height: 20px; + color: $text-color-primary; + } + } + .badge.badge-primary { + display: inline-block; + vertical-align: top; + font-size: 14px; + font-weight: 500; + line-height: 16px; + padding: 2px 10px; + margin: 10px 0 10px 43px !important; + text-transform: capitalize; + background: #D1FAE5 !important; + color: #065F46; + border-radius: 12px; + } + } + } + &:first-child { + &.dates-day.pb-4 { + .dates-line-bottom { + border-color: $primary !important; + } + .dates-dot { + &.border { + &.border-gray-900 { + background: $primary !important; + border: 2px solid $primary !important; + &:before { + position: absolute; + top: 50%; + left: 50%; + width: 10px; + height: 5px; + border: 1px solid white; + border-width: 0 0 1px 1px; + content: ''; + transform: rotate(-45deg); + margin: -3px 0 0 -4px; + } + } + &.bg-warning-300 { + border: 2px solid $primary !important; + background: white !important; + &:before { + display: none !important; + } + } + } + } + } + } + &:nth-child(2) { + &.dates-day.pb-4 { + .dates-dot { + &.border { + &.border-gray-900 { + background: $primary !important; + border: 2px solid $primary !important; + &:before { + position: absolute; + top: 50%; + left: 50%; + width: 10px; + height: 5px; + border: 1px solid white; + border-width: 0 0 1px 1px; + content: ''; + transform: rotate(-45deg); + margin: -3px 0 0 -4px; + } + } + &.bg-warning-300 { + border: 2px solid $primary !important; + background: white !important; + &:before { + display: none !important; + } + } + } + } + } + } + .small.mb-2 { + background: $primary-light; + border-radius: 6px; + padding: 16px; + margin: 18px 0 0 0; + font-size: 14px !important; + line-height: 20px; + max-width: 475px; + } + } +} diff --git a/paragon/_discussion.scss b/paragon/_discussion.scss new file mode 100644 index 00000000..7c4f30ea --- /dev/null +++ b/paragon/_discussion.scss @@ -0,0 +1,206 @@ +// Discussion style + +#root #courseTabsNavigation { + padding: 20px 15px !important; + max-width: 1090px; + margin: 0 auto; + width: 100%; + border: none; + .container-xl { + padding: 0 !important; + } +} +#root .header-action-bar { +max-width: 1090px; +margin: 0 auto; +width: 100%; +padding: 0 15px; +box-shadow: none; +position: static; +.navbar { + padding: 0 0 28px; + @include media-breakpoint-down(sm) { + display: block !important; + } + .nav-button-group { + border: 1px solid #E5E7EB; + border-radius: 6px; + padding: 0 !important; + overflow: hidden; + @include media-breakpoint-down(sm) { + margin: 0 0 10px; + } + .nav-item { + &:first-child { + .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; + } + &.active { + background: $primary !important; + } + } + + } + } + .border-right.border-light-400.mx-3 { + 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; + } + .pgn__searchfield { + border: none; + background: $primary-light; + border-radius: 6px; + overflow: hidden; + @include media-breakpoint-down(sm) { + width: 100%; + } + &:after { + display: none !important; + } + form { + flex-flow: row-reverse; + border: none; + border-radius: 6px; + .form-control { + background: $primary-light !important; + padding-left: 0; + font-size: 14px; + } + } + } +} +} +.pgn__pageBanner__accentB { +margin: 0 0 30px; +} +#root .header-action-bar + .d-flex.flex-row.position-relative { +max-width: 1090px; +margin: 0 auto; +padding: 0 15px 30px; +width: 100%; +.flex-column.position-sticky.d-flex { + position: relative !important; + top: 0 !important; + max-height: 100% !important; + z-index: 29; + max-width: 35% !important; + width: 100% !important; + min-width: 290px !important; + @include media-breakpoint-down(sm) { + max-width: 100% !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; + } + } + } + } + } +} +.d-flex.bg-light-400.flex-column { + max-width: 65%; + @include media-breakpoint-down(sm) { + max-width: 100%; + } + .post-form { + @include media-breakpoint-down(sm) { + margin: 0 !important; + } + .justify-content-end button { + padding: 7px 11px !important; + font-size: 12px; + font-weight: 500; + } + .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; + } + } + } + } + } +} +.discussion-posts { + .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; + } + } +} +.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; +} \ No newline at end of file diff --git a/paragon/_extras.scss b/paragon/_extras.scss new file mode 100644 index 00000000..e69de29b diff --git a/paragon/_footer.scss b/paragon/_footer.scss new file mode 100644 index 00000000..d9da39e4 --- /dev/null +++ b/paragon/_footer.scss @@ -0,0 +1,414 @@ +// footer style +.wrapper-footer { + 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: 1090px; + text-align: center; + @include media-breakpoint-up(lg) { + text-align: left; + } + .footer-top { + margin: 0 0 15px; + &: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; + } + } + } + .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; + } + a { + color: $light-drak; + text-decoration: none; + &:hover { + color: #000; + text-decoration: none; + } + } + } + } + } + .copyright-site { + display: block; + font-size: 12px; + line-height: 16px; + color: $light-drak; + } +} +.pgn__pageBanner__accentA { + background: #FFFBEB !important; + color: #B45309 !important; + button { + color: #B45309 !important; + } +} +#dashboard-container { + padding: 0 !important; + #dashboard-content { + @include media-breakpoint-up(lg) { + min-height: calc(100vh - 232px); + } + } + .container-mw-xl.container-fluid { + max-width: 1090px !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; + 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 { + padding: 2px 16px; + font-size: 12px; + line-height: 20px; + .alert-icon { + margin: 0 5px 0 0; + width: 20px; + } + svg { + width: 20px; + height: 20px; + } + } + } + } + .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; + } + svg { + width: 17px; + height: 20px; + } + } + } + } + } + } + } + .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; + } + } + #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; + } + } + } + } + .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; + 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; + } + 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; + } + } +} \ No newline at end of file diff --git a/paragon/_header.scss b/paragon/_header.scss new file mode 100644 index 00000000..62354822 --- /dev/null +++ b/paragon/_header.scss @@ -0,0 +1,508 @@ +/// header style +#root { + position: relative; + z-index: 1; + width: 100%; + header.site-header-mobile { + padding: 0 15px; + height: auto; + .logo-holder { + margin: 15px 0 15px 35px; + img { + height: 21px; + } + } + .menu { + @include media-breakpoint-down(md) { + position: static; + } + &.expanded { + button { + .hamburger-menu { + .line { + &:nth-child(1), &:nth-child(4) { + top: 18px; + width: 0%; + left: 50%; + } + &:nth-child(2) { + transform: rotate(45deg); + } + &:nth-child(3) { + transform: rotate(-45deg); + } + } + } + } + } + button { + border: none !important; + padding: 0 !important; + box-shadow: none !important; + outline: none !important; + background: none !important; + position: absolute; + left: 15px; + top: 18px; + .hamburger-menu { + transition: 0.5s ease-in-out; + cursor: pointer; + height: 12px; + width: 20px; + display: none; + @include media-breakpoint-down(md) { + display: block; + } + .line { + display: block; + position: absolute; + height: 2px; + width: 100%; + background: #767676; + opacity: 1; + left: 0; + top: 0; + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + -webkit-transition: 0.25s ease-in-out; + transition: 0.25s ease-in-out; + &:nth-child(2), &:nth-child(3) { + top: 6px; + } + &:nth-child(4) { + top: 12px; + } + } + } + } + .menu-content { + position: absolute; + top: 60px !important; + width: 100%; + border-radius: 0; + box-shadow: none; + border: none !important; + border-bottom: 2px solid $primary !important; + overflow: hidden; + inset: unset !important; + transform: none !important; + right: 0 !important; + min-width: 12px; + padding: 0; + margin: 25px 0 0 !important; + a { + box-sizing: border-box; + padding: 10px; + font-size: 14px; + line-height: 20px; + color: #374151; + @include media-breakpoint-down(md) { + padding: 16px; + } + &:hover { + background: $primary-light; + color: $text-color; ; + } + &.h-desktop { + display: none; + @include media-breakpoint-down(md) { + display: block; + } + } + @include media-breakpoint-down(md) { + &:after { + content: '\00BB'; + padding: 0 0 0 5px; + } + } + } + } + } + } + header.site-header-desktop { + z-index: 30; + height: auto; + box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.06), 0px 1px 3px 0px rgba(0,0,0,0.1); + .container-fluid { + max-width: 1090px; + margin: 0 auto; + padding: 0 15px; + } + .logo { + position: static; + height: auto; + margin: 15px 0 15px 35px !important; + @include media-breakpoint-up(lg) { + margin: 0 18px 0 0 !important; + } + img { + height: 21px; + } + } + .main-nav { + a.nav-link { + font-size: 14px; + font-weight: 500; + line-height: 22px; + padding: 20px 0; + color: #374151; + margin: 0 16px 0 0; + display: block; + border-bottom: 2px solid transparent; + background: none; + &:hover { + color: $text-color; + text-decoration: none; + border-bottom: 2px solid $primary; + } + } + } + .menu { + button { + border: none !important; + padding: 9px 15px !important; + box-shadow: none !important; + outline: none !important; + background: $primary-light !important; + color: $primary; + font-size: 14px; + font-weight: 500; + line-height: 20px; + &:before { + display: none !important; + } + &:after { + display: inline-block; + vertical-align: middle; + content: ""; + margin: 0 0 2px 8px; + border: 2px solid $primary; + border-width: 0 0 2px 2px; + transform: rotate(-45deg); + width: 7px; + height: 7px; + } + .avatar { + display: none !important; + } + svg { + display: none !important; + } + } + .menu-content { + position: absolute; + top: 60px !important; + width: 224px; + border-radius: 6px; + 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); + border: none; + overflow: hidden; + inset: unset !important; + transform: none !important; + right: 0 !important; + min-width: 12px; + padding: 0; + margin: 6px 0 0 !important; + a { + box-sizing: border-box; + padding: 10px; + font-size: 14px; + line-height: 20px; + color: #374151; + @include media-breakpoint-down(md) { + padding: 16px; + } + &:hover { + background: $primary-light; + color: $text-color; ; + } + } + } + } + } + header.learning-header { + z-index: 30; + box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.06), 0px 1px 3px 0px rgba(0,0,0,0.1); + .logo { + position: static; + height: auto; + margin: 15px 0 15px 35px !important; + @include media-breakpoint-up(lg) { + margin: 0 18px 0 0 !important; + } + img { + height: 21px; + } + } + .course-title-lockup { + display: flex; + .nav-course { + display: none; + @include media-breakpoint-up(lg) { + display: block; + } + a { + font-size: 14px; + font-weight: 500; + line-height: 22px; + padding: 20px 0; + color: #374151; + margin: 0 16px 0 0; + display: block; + border-bottom: 2px solid transparent; + &.active, &:hover { + color: $text-color; + text-decoration: none; + border-bottom: 2px solid $primary; + } + } + } + .course-info-header { + padding: 13px 25px 0 0; + @include media-breakpoint-down(md) { + padding: 4px 0 4px 15px; + } + .title { + font-size: 14px; + font-weight: 700; + color: $text-color; + white-space: normal; + margin: 0 0 8px !important; + @include media-breakpoint-down(md) { + margin: 0 0 2px !important; + } + } + .org { + font-size: 12px; + color: $text-color-primary; + } + } + } + .container-xl { + padding-top: 0 !important; + padding-bottom: 0 !important; + } + } + .user-dropdown { + @include media-breakpoint-down(md) { + position: static; + } + &.show { + button { + .hamburger-menu { + .line { + &:nth-child(1), &:nth-child(4) { + top: 18px; + width: 0%; + left: 50%; + } + &:nth-child(2) { + transform: rotate(45deg); + } + &:nth-child(3) { + transform: rotate(-45deg); + } + } + } + } + } + button { + border: none !important; + padding: 9px 15px !important; + box-shadow: none !important; + outline: none !important; + background: $primary-light !important; + color: $primary; + font-size: 14px; + font-weight: 500; + line-height: 20px; + @include media-breakpoint-down(md) { + padding: 0 !important; + background: none !important; + } + &:before { + display: none; + } + &:after { + border-color: $primary !important; + margin-left: 8px !important; + @include media-breakpoint-down(md) { + display: none; + } + } + @include media-breakpoint-down(md) { + position: absolute; + left: 15px; + top: 18px; + } + .hamburger-menu { + transition: 0.5s ease-in-out; + cursor: pointer; + height: 12px; + width: 20px; + display: none; + @include media-breakpoint-down(md) { + display: block; + } + .line { + display: block; + position: absolute; + height: 2px; + width: 100%; + background: #767676; + opacity: 1; + left: 0; + top: 0; + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + -webkit-transition: 0.25s ease-in-out; + transition: 0.25s ease-in-out; + &:nth-child(2), &:nth-child(3) { + top: 6px; + } + &:nth-child(4) { + top: 12px; + } + } + } + img { + display: none; + } + span.d-none.d-md-inline { + font-size: 14px; + font-weight: 500; + line-height: 20px; + display: inline-block !important; + @include media-breakpoint-down(md) { + display:none !important; + } + } + } + .dropdown-menu { + position: absolute; + top: 60px !important; + width: 224px; + border-radius: 6px; + 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); + border: none; + overflow: hidden; + inset: unset !important; + transform: none !important; + right: 0 !important; + min-width: 12px; + padding: 0; + margin: 6px 0 0 !important; + @include media-breakpoint-down(md) { + width: 100%; + margin: 26px 0 0 !important; + border: none !important; + border-bottom: 2px solid $primary !important; + box-shadow: none; + border-radius: 0; + } + .dropdown-divider { display: none !important; } + a { + box-sizing: border-box; + padding: 10px; + font-size: 14px; + line-height: 20px; + color: #374151; + @include media-breakpoint-down(md) { + padding: 16px; + } + &:hover { + background: $primary-light; + color: $text-color; ; + } + &.h-desktop { + display: none; + @include media-breakpoint-down(md) { + display: block; + } + } + @include media-breakpoint-down(md) { + &:after { + content: '\00BB'; + padding: 0 0 0 5px; + } + } + } + } + } + .learner-variant-header { + margin: 0 auto; + max-width: 1090px; + padding: 0 15px !important; + position: relative; + box-shadow: none !important; + &:after { + position: absolute; + left: -9999px; + right: -9999px; + top: 0; + bottom: 0; + content: ""; + background: white; + box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.06), 0px 1px 3px 0px rgba(0,0,0,0.1); + z-index: -1; + } + a.mx-auto { + margin: 0 38px 0 0 !important; + img { + height: 21px !important; + margin: 0 !important; + } + } + .flex-grow-1 + .btn-inverse-primary { + display: none !important; + } + .btn.btn-inverse-primary { + font-size: 14px; + font-weight: 500; + line-height: 22px; + padding: 20px 0 !important; + color: #374151; + margin: 0 16px 0 0; + display: block; + border: none !important; + border-bottom: 2px solid transparent !important; + background: none !important; + border-radius: 0 !important; + &.course-link, &:hover { + color: $text-color; + text-decoration: none; + border-bottom: 2px solid $primary !important; + } + } + .btn-icon.btn-icon-inverse-primary { + color: #767676; + margin: 0 9px 0 -3px; + padding: 0 !important; + width: auto; + .pgn__icon.btn-icon__icon { + width: 26px; + height: auto; + } + } + } +} +[dir="ltr"] #root .user-dropdown .dropdown-menu { + top: 54px; +} +#root { + .nav-small-menu { + border-bottom: 2px solid $primary !important; + box-shadow: none !important; + width: 100%; + position: absolute; + top: 56px; + z-index: 999; + a { + border: none !important; + padding: 16px; + font-size: 14px; + line-height: 20px; + color: #374151; + } + } +} \ No newline at end of file diff --git a/paragon/_learning.scss b/paragon/_learning.scss new file mode 100644 index 00000000..bd2dff74 --- /dev/null +++ b/paragon/_learning.scss @@ -0,0 +1,188 @@ +#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; + } + } + .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; } + } + } + } +} +#root { + .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; + } + } + .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; + } + } + } + .pgn__card-header-content { + margin: 22px 0 0; + .pgn__card-header-title-md { + font-size: 18px; + line-height: 22px; + color: $text-color; + } + } + } +} +.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; + } + } + } +} +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; + @include media-breakpoint-up(md) { + padding-bottom: 50px; + } + 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; + } + } + } + } + } +} \ No newline at end of file diff --git a/paragon/_login.scss b/paragon/_login.scss new file mode 100644 index 00000000..a4c0e606 --- /dev/null +++ b/paragon/_login.scss @@ -0,0 +1,165 @@ +// login page styling +#root { + .extra-large-screen-top-stripe, .medium-screen-top-stripe, .col-md-2.bg-white, .extra-large-screen-top-stripe, .small-screen-top-stripe { + display: none !important; + } + .layout { + min-height: 100vh; + background: $primary-light; + padding: 20px; + overflow: hidden; + position: relative; + @include media-breakpoint-up(sm) { + padding: 50px; + } + &:after, &:before { + position: absolute; + left: -400px; + bottom: -400px; + content: ""; + width: 400px; + height: 400px; + border-radius: 50%; + box-shadow: 400px -400px 143px 90px rgba(122, 185, 250, 0.45); + display: none; + @include media-breakpoint-up(sm) { + display: block; + } + } + &:before { + right: 400px; + top: -400px; + left: auto; + bottom: auto; + box-shadow: 400px 400px 143px 90px rgba(122, 185, 250, 0.45); + } + .col-md-3.bg-white { + display: none; + } + .pgn__hyperlink.default-link.standalone-link { + display: none; + } + .bg-primary-400 { + background: none !important; + flex: 0 0 100%; + max-width: 100%; + display: block; + .min-vh-100 { + min-height: calc(100vh - 100px) !important; + display: flex !important; + @media screen and (max-width: 1200px) { + min-height: 20px !important; + display: block !important; + } + } + h1 { + margin: 0 auto !important; + max-width: 564px !important; + font-size: 32px; + line-height: 40px; + color: $primary !important; + padding: 50px 0; + position: relative; + z-index: 1; + width: 100%; + font-weight: 400; + @include media-breakpoint-up(sm) { + font-size: 52px; + line-height: 78px; + } + @media screen and (max-width: 1200px) { + padding: 0; + } + .text-accent-a { + font-weight: 400; + font-size: 34px; + line-height: 40px; + color: $primary !important; + display: block !important; + font-weight: 900; + @include media-breakpoint-up(sm) { + font-size: 64px; + line-height: 74px; + } + } + } + } + .content { + background: #fff; + border-radius: 20px 0px; + padding: 20px; + margin: 0; + position: relative; + z-index: 1; + display: block; + @include media-breakpoint-up(sm) { + padding: 50px; + border-radius: 50px 0px; + } + @media screen and (max-width: 1200px) { + margin: 0 auto; + width: 100%; + max-width: 564px; + } + .nav.nav-tabs { + border-bottom: 1px solid #E5E7EB; + max-width: 450px; + margin: 0 auto; + a { + font-size: 14px; + line-height: 20px; + font-weight: 500; + padding: 0 0 16px; + margin: 0 32px -1px 0; + color: $text-color-primary; + background: none !important; + &:before { + display: none; + } + &.active, &:hover { + color: $primary; + border-bottom: 2px solid $primary; + } + } + } + #main-content { + min-width: 100px !important; + padding: 20px 0 0 !important; + > .mw-xs { + min-width: 100px !important; + max-width:450px !important; + margin: 0 auto !important; + } + .alert-danger { + border-radius: 6px; + background: #FEF2F2; + padding: 16px; + color: #B91C1C; + font-size: 14px; + line-height: 20px; + box-shadow: none; + .alert-heading { + color: #B91C1C; + font-size: 14px; + line-height: 20px; + font-weight: 500; + } + } + .pgn__form-control-decorator-group { + margin-inline-end: 0; + } + #forgot-password { + font-weight: 400 !important; + font-size: 14px; + } + .btn-brand { + background-color: $primary; + border-color: $primary; + font-size: 14px; + font-weight: 500; + line-height: 30px; + } + } + } + } +} \ No newline at end of file diff --git a/paragon/_overrides.scss b/paragon/_overrides.scss index 531c6b3a..a086414e 100644 --- a/paragon/_overrides.scss +++ b/paragon/_overrides.scss @@ -15,363 +15,6 @@ html { padding-left: 15px !important; padding-right: 15 !important; } -#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; - } - } - .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: #111827; - font-size: 15px; - @include media-breakpoint-up(md) { - font-size: 18px; - } - } - .border-top { border: none !important; } - } - } - } -} -#root { - .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; - } - } - .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; - } - } - } - .pgn__card-header-content { - margin: 22px 0 0; - .pgn__card-header-title-md { - font-size: 18px; - line-height: 22px; - color: #111827; - } - } - } -} -.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; - } - } - } -} -div[data-learner-type=b2c_learner] { - div[role=heading].h2 { - font-size: 28px; - line-height: 32px; - margin: 0 0 20px; - color: #111827; - font-weight: 800; - @include media-breakpoint-up(md) { - font-size: 36px; - line-height: 44px; - } - } -} -.course-outline-tab { - padding-bottom: 30px; - @include media-breakpoint-up(md) { - padding-bottom: 50px; - } - section.mb-4 { - border-radius: 8px; - @include media-breakpoint-up(md) { - padding: 0 0 0 25px; - } - h2 { - color: #111827; - 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; - } - } - } - } - } -} -// login page styling -#root { - .extra-large-screen-top-stripe, .medium-screen-top-stripe, .col-md-2.bg-white, .extra-large-screen-top-stripe, .small-screen-top-stripe { - display: none !important; - } - .layout { - min-height: 100vh; - background: $primary-light; - padding: 20px; - overflow: hidden; - position: relative; - @include media-breakpoint-up(sm) { - padding: 50px; - } - &:after, &:before { - position: absolute; - left: -400px; - bottom: -400px; - content: ""; - width: 400px; - height: 400px; - border-radius: 50%; - box-shadow: 400px -400px 143px 90px rgba(122, 185, 250, 0.45); - -webkit-box-shadow: 400px -400px 143px 90px rgba(122, 185, 250, 0.45); - -moz-box-shadow: 400px -400px 143px 90px rgba(122, 185, 250, 0.45); - display: none; - @include media-breakpoint-up(sm) { - display: block; - } - } - &:before { - right: 400px; - top: -400px; - left: auto; - bottom: auto; - box-shadow: 400px 400px 143px 90px rgba(122, 185, 250, 0.45); - -webkit-box-shadow: 400px 400px 143px 90px rgba(122, 185, 250, 0.45); - -moz-box-shadow: 400px 400px 143px 90px rgba(122, 185, 250, 0.45); - } - .col-md-3.bg-white { - display: none; - } - .pgn__hyperlink.default-link.standalone-link { - display: none; - } - .bg-primary-400 { - background: none !important; - flex: 0 0 100%; - max-width: 100%; - display: block; - .min-vh-100 { - min-height: calc(100vh - 100px) !important; - display: flex !important; - @media screen and (max-width: 1200px) { - min-height: 20px !important; - display: block !important; - } - } - h1 { - margin: 0 auto !important; - max-width: 564px !important; - font-size: 32px; - line-height: 40px; - color: $primary !important; - padding: 50px 0; - position: relative; - z-index: 1; - width: 100%; - font-weight: 400; - @include media-breakpoint-up(sm) { - font-size: 52px; - line-height: 78px; - } - @media screen and (max-width: 1200px) { - padding: 0; - } - .text-accent-a { - font-weight: 400; - font-size: 34px; - line-height: 40px; - color: $primary !important; - display: block !important; - font-weight: 900; - @include media-breakpoint-up(sm) { - font-size: 64px; - line-height: 74px; - } - } - } - } - .content { - background: #fff; - border-radius: 20px 0px; - padding: 20px; - margin: 0; - position: relative; - z-index: 1; - display: block; - @include media-breakpoint-up(sm) { - padding: 50px; - border-radius: 50px 0px; - } - @media screen and (max-width: 1200px) { - margin: 0 auto; - width: 100%; - max-width: 564px; - } - .nav.nav-tabs { - border-bottom: 1px solid #E5E7EB; - max-width: 450px; - margin: 0 auto; - a { - font-size: 14px; - line-height: 20px; - font-weight: 500; - padding: 0 0 16px; - margin: 0 32px -1px 0; - color: #515661; - background: none !important; - &:before { - display: none; - } - &.active, &:hover { - color: $primary; - border-bottom: 2px solid $primary; - } - } - } - #main-content { - min-width: 100px !important; - padding: 20px 0 0 !important; - > .mw-xs { - min-width: 100px !important; - max-width:450px !important; - margin: 0 auto !important; - } - .alert-danger { - border-radius: 6px; - background: #FEF2F2; - padding: 16px; - color: #B91C1C; - font-size: 14px; - line-height: 20px; - box-shadow: none; - .alert-heading { - color: #B91C1C; - font-size: 14px; - line-height: 20px; - font-weight: 500; - } - } - .pgn__form-control-decorator-group { - margin-inline-end: 0; - } - #forgot-password { - font-weight: 400 !important; - font-size: 14px; - } - .btn-brand { - background-color: $primary; - border-color: $primary; - font-size: 14px; - font-weight: 500; - line-height: 30px; - } - } - } - } -} // detail page #root { @@ -390,7 +33,7 @@ div[data-learner-type=b2c_learner] { font-size: 14px; line-height: 20px; a { - color: #515661 !important; + color: $text-color-primary !important; font-weight: 500; } button { @@ -398,7 +41,7 @@ div[data-learner-type=b2c_learner] { background: none !important; padding: 0 !important; line-height: 20px; - color: #515661 !important; + color: $text-color-primary !important; border: none !important; font-weight: 500; } @@ -622,2256 +265,105 @@ div[data-learner-type=b2c_learner] { } } -// progress page style -.course-tabs-navigation + .container-xl { - >.mb-4.justify-content-between { - h1 { - font-weight: 800; - font-size: 24px; - line-height: 30px; - color: #111827; +// 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; } - } - >.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; + 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; } - .bg-warning-100 { - padding: 10px 15px !important; - background: $primary-light !important; - .h4 { - font-size: 13px; - color: $primary; - font-weight: 600; - } - svg { - color: $primary; - } + &.btn-tertiary { + border: 1px solid #D1D5DB; } } } - >.col-12.col-md-4.p-0.px-md-4 { - .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; - } - .btn.btn-outline-brand { - padding: 7px 13px !important; - border: 1px solid #15376D !important; - color: #fff; - text-decoration: none; + .pgn__form-control-set { + margin: 0 0 25px; + .pgn__form-radio { + .pgn__form-label { font-size: 14px; - font-weight: 500; + color: #191B23; line-height: 20px; - margin: 0 !important; - background: #15376D; - } - } - section.mb-4.x-small { - background-color: $primary-light; - font-size: 16px; - border-radius: 8px; - padding: 20px; - ul { - list-style: none; - a { - color: $primary; - } } - } - } - } - .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: $primary-light; - } - svg.donut { - @include media-breakpoint-up(sm) { - float: right; - } - } - .donut-chart-text { - .donut-chart-number { - color: #111827; - } - .donut-chart-label { - color: #4B5563; - } - } - .grade-bar .grade-bar__base { - fill: $primary-light; - } -} -#root { - .grades { - .pgn__data-table { - thead { - th { - background: none !important; - border-bottom: 1px solid #E5E7EB !important; - span.h5 { - font-size: 14px; - font-weight: 500; + .pgn__form-radio-input { + box-shadow: none !important; + border: 1px solid #C4C7CF; + width: 18px; + height: 18px; + &:before { + display: none !important; } } } - &.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: 16px !important; - } - #weighted-grade-summary.small { - color: $primary !important; - font-weight: 600 !important; - font-size: 13px !important; + .form-control { + font-size: 14px; } } } } -#non-passing-grade-tooltip { - background: $primary; - border-color: $primary; - filter: none; - .arrow { - &:before { - border-top-color: $primary !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; - } - } - .popover-body { - color: white !important; - } -} -/// Tour site - -#paragon-portal-root .new-user-tour-dialog { - .pgn__modal-hero { - background: $primary-light; - min-height: 50px; - .pgn__modal-hero-bg { - display: none; - } - .pgn__modal-hero-content { - max-width: 100% !important; - } - h2.pgn__modal-title { - color: $primary !important; - font-size: 27px; - line-height: 30px; - margin: 0; - .text-accent-b { - color: $primary !important; +// 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__modal-body-content { - &:after, &:before { - display: none; - } - p { - color: #515661 !important; - font-size: 14px; - line-height: 20px; - text-align: center; - margin: 0; - } - } - .pgn__action-row { - justify-content: center; - margin: 0 -10px; - button { - width: 50%; - font-size: 14px; - font-weight: 500; - border: 1px solid #D1D5DB; - margin: 0 10px; - &.btn-brand { - background: $primary !important; - border-color: $primary !important; + .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__checkpoint { - background: $primary-light; - border-top: 8px solid $primary; - #pgn__checkpoint-title { - font-size: 22px; - line-height: 30px; - color: #111827; - } -} -#pgn__checkpoint[data-popper-placement^=bottom] > #pgn__checkpoint-arrow:after { - border-bottom: solid 15px $primary; -} -#pgn__checkpoint[data-popper-placement^=top] > #pgn__checkpoint-arrow:after { - border-top: solid 15px $primary-light; -} -[dir="ltr"] .pgn__checkpoint[data-popper-placement^=left] > #pgn__checkpoint-arrow::after { - border-left: solid 15px $primary-light; -} -[dir="ltr"] .pgn__checkpoint[data-popper-placement^=right] > #pgn__checkpoint-arrow::after { - border-right: solid 15px $primary-light; -} -/// header style -#root { - position: relative; - z-index: 1; - width: 100%; - header.site-header-mobile { - padding: 0 15px; - height: auto; - .logo-holder { - margin: 15px 0 15px 35px; - img { - height: 21px; - } - } - .menu { - @include media-breakpoint-down(md) { - position: static; - } - &.expanded { - button { - .hamburger-menu { - .line { - &:nth-child(1), &:nth-child(4) { - top: 18px; - width: 0%; - left: 50%; - } - &:nth-child(2) { - transform: rotate(45deg); - } - &:nth-child(3) { - transform: rotate(-45deg); - } - } - } - } - } - button { - border: none !important; - padding: 0 !important; - box-shadow: none !important; - outline: none !important; - background: none !important; - position: absolute; - left: 15px; - top: 18px; - .hamburger-menu { - transition: 0.5s ease-in-out; - cursor: pointer; - height: 12px; - width: 20px; - display: none; - @include media-breakpoint-down(md) { - display: block; - } - .line { - display: block; - position: absolute; - height: 2px; - width: 100%; - background: #767676; - opacity: 1; - left: 0; - top: 0; - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - -webkit-transition: 0.25s ease-in-out; - transition: 0.25s ease-in-out; - &:nth-child(2), &:nth-child(3) { - top: 6px; - } - &:nth-child(4) { - top: 12px; - } - } - } - } - .menu-content { - position: absolute; - top: 60px !important; - width: 100%; - border-radius: 0; - box-shadow: none; - border: none !important; - border-bottom: 2px solid $primary !important; - overflow: hidden; - inset: unset !important; - transform: none !important; - right: 0 !important; - min-width: 12px; - padding: 0; - margin: 25px 0 0 !important; - a { - box-sizing: border-box; - padding: 10px; - font-size: 14px; - line-height: 20px; - color: #374151; - @include media-breakpoint-down(md) { - padding: 16px; - } - &:hover { - background: $primary-light; - color: #111827; ; - } - &.h-desktop { - display: none; - @include media-breakpoint-down(md) { - display: block; - } - } - @include media-breakpoint-down(md) { - &:after { - content: '\00BB'; - padding: 0 0 0 5px; - } - } - } - } - } - } - header.site-header-desktop { - z-index: 30; - height: auto; - box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.06), 0px 1px 3px 0px rgba(0,0,0,0.1); - .container-fluid { - max-width: 1090px; - margin: 0 auto; - padding: 0 15px; - } - .logo { - position: static; - height: auto; - margin: 15px 0 15px 35px !important; - @include media-breakpoint-up(lg) { - margin: 0 18px 0 0 !important; - } - img { - height: 21px; - } - } - .main-nav { - a.nav-link { - font-size: 14px; - font-weight: 500; - line-height: 22px; - padding: 20px 0; - color: #374151; - margin: 0 16px 0 0; - display: block; - border-bottom: 2px solid transparent; - background: none; - &:hover { - color: #111827; - text-decoration: none; - border-bottom: 2px solid $primary; - } - } - } - .menu { - button { - border: none !important; - padding: 9px 15px !important; - box-shadow: none !important; - outline: none !important; - background: $primary-light !important; - color: $primary; - font-size: 14px; - font-weight: 500; - line-height: 20px; - &:before { - display: none !important; - } - &:after { - display: inline-block; - vertical-align: middle; - content: ""; - margin: 0 0 2px 8px; - border: 2px solid $primary; - border-width: 0 0 2px 2px; - transform: rotate(-45deg); - width: 7px; - height: 7px; - } - .avatar { - display: none !important; - } - svg { - display: none !important; - } - } - .menu-content { - position: absolute; - top: 60px !important; - width: 224px; - border-radius: 6px; - 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); - border: none; - overflow: hidden; - inset: unset !important; - transform: none !important; - right: 0 !important; - min-width: 12px; - padding: 0; - margin: 6px 0 0 !important; - a { - box-sizing: border-box; - padding: 10px; - font-size: 14px; - line-height: 20px; - color: #374151; - @include media-breakpoint-down(md) { - padding: 16px; - } - &:hover { - background: $primary-light; - color: #111827; ; - } - } - } - } - } - header.learning-header { - z-index: 30; - box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.06), 0px 1px 3px 0px rgba(0,0,0,0.1); - .logo { - position: static; - height: auto; - margin: 15px 0 15px 35px !important; - @include media-breakpoint-up(lg) { - margin: 0 18px 0 0 !important; - } - img { - height: 21px; - } - } - .course-title-lockup { - display: flex; - .nav-course { - display: none; - @include media-breakpoint-up(lg) { - display: block; - } - a { - font-size: 14px; - font-weight: 500; - line-height: 22px; - padding: 20px 0; - color: #374151; - margin: 0 16px 0 0; - display: block; - border-bottom: 2px solid transparent; - &.active, &:hover { - color: #111827; - text-decoration: none; - border-bottom: 2px solid $primary; - } - } - } - .course-info-header { - padding: 13px 25px 0 0; - @include media-breakpoint-down(md) { - padding: 4px 0 4px 15px; - } - .title { - font-size: 14px; - font-weight: 700; - color: #111827; - white-space: normal; - margin: 0 0 8px !important; - @include media-breakpoint-down(md) { - margin: 0 0 2px !important; - } - } - .org { - font-size: 12px; - color: #515661; - } - } - } - .container-xl { - padding-top: 0 !important; - padding-bottom: 0 !important; - } - } - .user-dropdown { - @include media-breakpoint-down(md) { - position: static; - } - &.show { - button { - .hamburger-menu { - .line { - &:nth-child(1), &:nth-child(4) { - top: 18px; - width: 0%; - left: 50%; - } - &:nth-child(2) { - transform: rotate(45deg); - } - &:nth-child(3) { - transform: rotate(-45deg); - } - } - } - } - } - button { - border: none !important; - padding: 9px 15px !important; - box-shadow: none !important; - outline: none !important; - background: $primary-light !important; - color: $primary; - font-size: 14px; - font-weight: 500; - line-height: 20px; - @include media-breakpoint-down(md) { - padding: 0 !important; - background: none !important; - } - &:before { - display: none; - } - &:after { - border-color: $primary !important; - margin-left: 8px !important; - @include media-breakpoint-down(md) { - display: none; - } - } - @include media-breakpoint-down(md) { - position: absolute; - left: 15px; - top: 18px; - } - .hamburger-menu { - transition: 0.5s ease-in-out; - cursor: pointer; - height: 12px; - width: 20px; - display: none; - @include media-breakpoint-down(md) { - display: block; - } - .line { - display: block; - position: absolute; - height: 2px; - width: 100%; - background: #767676; - opacity: 1; - left: 0; - top: 0; - -webkit-transform: rotate(0deg); - transform: rotate(0deg); - -webkit-transition: 0.25s ease-in-out; - transition: 0.25s ease-in-out; - &:nth-child(2), &:nth-child(3) { - top: 6px; - } - &:nth-child(4) { - top: 12px; - } - } - } - img { - display: none; - } - span.d-none.d-md-inline { - font-size: 14px; - font-weight: 500; - line-height: 20px; - display: inline-block !important; - @include media-breakpoint-down(md) { - display:none !important; - } - } - } - .dropdown-menu { - position: absolute; - top: 60px !important; - width: 224px; - border-radius: 6px; - 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); - border: none; - overflow: hidden; - inset: unset !important; - transform: none !important; - right: 0 !important; - min-width: 12px; - padding: 0; - margin: 6px 0 0 !important; - @include media-breakpoint-down(md) { - width: 100%; - margin: 26px 0 0 !important; - border: none !important; - border-bottom: 2px solid $primary !important; - box-shadow: none; - border-radius: 0; - } - .dropdown-divider { display: none !important; } - a { - box-sizing: border-box; - padding: 10px; - font-size: 14px; - line-height: 20px; - color: #374151; - @include media-breakpoint-down(md) { - padding: 16px; - } - &:hover { - background: $primary-light; - color: #111827; ; - } - &.h-desktop { - display: none; - @include media-breakpoint-down(md) { - display: block; - } - } - @include media-breakpoint-down(md) { - &:after { - content: '\00BB'; - padding: 0 0 0 5px; - } - } - } - } - } - .learner-variant-header { - margin: 0 auto; - max-width: 1090px; - padding: 0 15px !important; - position: relative; - box-shadow: none !important; - &:after { - position: absolute; - left: -9999px; - right: -9999px; - top: 0; - bottom: 0; - content: ""; - background: white; - box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.06), 0px 1px 3px 0px rgba(0,0,0,0.1); - z-index: -1; - } - a.mx-auto { - margin: 0 38px 0 0 !important; - img { - height: 21px !important; - margin: 0 !important; - } - } - .flex-grow-1 + .btn-inverse-primary { - display: none !important; - } - .btn.btn-inverse-primary { - font-size: 14px; - font-weight: 500; - line-height: 22px; - padding: 20px 0 !important; - color: #374151; - margin: 0 16px 0 0; - display: block; - border: none !important; - border-bottom: 2px solid transparent !important; - background: none !important; - border-radius: 0 !important; - &.course-link, &:hover { - color: #111827; - text-decoration: none; - border-bottom: 2px solid $primary !important; - } - } - .btn-icon.btn-icon-inverse-primary { - color: #767676; - margin: 0 9px 0 -3px; - padding: 0 !important; - width: auto; - .pgn__icon.btn-icon__icon { - width: 26px; - height: auto; - } - } - } -} -[dir="ltr"] #root .user-dropdown .dropdown-menu { - top: 54px; -} -#root { - .nav-small-menu { - border-bottom: 2px solid $primary !important; - box-shadow: none !important; - width: 100%; - position: absolute; - top: 56px; - z-index: 999; - a { - border: none !important; - padding: 16px; - font-size: 14px; - line-height: 20px; - color: #374151; - } - } -} -// footer style -.wrapper-footer { - 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: 1090px; - text-align: center; - @include media-breakpoint-up(lg) { - text-align: left; - } - .footer-top { - margin: 0 0 15px; - &: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; - } - } - } - .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: #515661; - &: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: #515661;; - } - } - } - } - .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-drak; - text-decoration: none; - &:hover { - color: #000; - text-decoration: none; - } - } - } - } - } - .copyright-site { - display: block; - font-size: 12px; - line-height: 16px; - color: $light-drak; - } -} -.pgn__pageBanner__accentA { - background: #FFFBEB !important; - color: #B45309 !important; - button { - color: #B45309 !important; - } -} -#dashboard-container { - padding: 0 !important; - #dashboard-content { - @include media-breakpoint-up(lg) { - min-height: calc(100vh - 232px); - } - } - .container-mw-xl.container-fluid { - max-width: 1090px !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: #111827; - } - } - .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 { - padding: 2px 16px; - font-size: 12px; - line-height: 20px; - .alert-icon { - margin: 0 5px 0 0; - width: 20px; - } - svg { - width: 20px; - height: 20px; - } - } - } - } - .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: #515661; - } - } - .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; - } - svg { - width: 17px; - height: 20px; - } - } - } - } - } - } - } - .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; - } - } - #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; - } - } - } - } - .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: #111827; - 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; - font-size: 14px; - color: #515661; - img { - width: 170px; - margin: 0 auto 50px; - } - h1 { - margin: 0 0 5px; - color: #111827; - 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; - font-weight: 500; - line-height: 24px; - padding: 3px 11px; - .btn-icon-before { - height: auto; - margin: 0; - } - svg { - width: 20px; - } - } -} - -// modal style - -.pgn__modal.pgn__modal-default { - .bg-white { - padding: 24px !important; - h4 { - font-size: 18px; - color: #111827; - font-weight: 500; - line-height: 24px; - margin: 0 0 15px; - } - p{ - font-size: 14px; - color: #515661; - } - .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-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; - } - } - } -} - -// Discussion style - -#root #courseTabsNavigation { - padding: 20px 15px !important; - max-width: 1090px; - margin: 0 auto; - width: 100%; - border: none; - .container-xl { - padding: 0 !important; - } -} -#root .header-action-bar { -max-width: 1090px; -margin: 0 auto; -width: 100%; -padding: 0 15px; -box-shadow: none; -position: static; -.navbar { - padding: 0 0 28px; - @include media-breakpoint-down(sm) { - display: block !important; - } - .nav-button-group { - border: 1px solid #E5E7EB; - border-radius: 6px; - padding: 0 !important; - overflow: hidden; - @include media-breakpoint-down(sm) { - margin: 0 0 10px; - } - .nav-item { - &:first-child { - .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; - } - &.active { - background: $primary !important; - } - } - - } - } - .border-right.border-light-400.mx-3 { - 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; - } - .pgn__searchfield { - border: none; - background: $primary-light; - border-radius: 6px; - overflow: hidden; - @include media-breakpoint-down(sm) { - width: 100%; - } - &:after { - display: none !important; - } - form { - flex-flow: row-reverse; - border: none; - border-radius: 6px; - .form-control { - background: $primary-light !important; - padding-left: 0; - font-size: 14px; - } - } - } -} -} -.pgn__pageBanner__accentB { -margin: 0 0 30px; -} -#root .header-action-bar + .d-flex.flex-row.position-relative { -max-width: 1090px; -margin: 0 auto; -padding: 0 15px 30px; -width: 100%; -.flex-column.position-sticky.d-flex { - position: relative !important; - top: 0 !important; - max-height: 100% !important; - z-index: 29; - max-width: 35% !important; - width: 100% !important; - min-width: 290px !important; - @include media-breakpoint-down(sm) { - max-width: 100% !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; - } - } - } - } - } -} -.d-flex.bg-light-400.flex-column { - max-width: 65%; - @include media-breakpoint-down(sm) { - max-width: 100%; - } - .post-form { - @include media-breakpoint-down(sm) { - margin: 0 !important; - } - .justify-content-end button { - padding: 7px 11px !important; - font-size: 12px; - font-weight: 500; - } - .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; - } - } - } - } - } -} -.discussion-posts { - .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; - } - } -} -.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; -} - -div[role=heading].h2 + .list-unstyled.m-0.mt-4.pt-2 { - min-height: calc(100vh - 403px); - li { - &.dates-day.pb-4 { - .dates-line-bottom { - left: 15px; - top: 10px; - border-left: 2px solid #D1D5DB !important; - } - .dates-dot { - width: 32px; - height: 32px; - background: #fff; - left: 0; - top: 0; - &.border { - border: 2px solid #D1D5DB !important; - &.border-gray-900 { - background: white !important; - border: 2px solid #D1D5DB !important; - } - &.bg-warning-300 { - border: 2px solid $primary !important; - background: white !important; - &:after { - position: absolute; - left: 50%; - top: 50%; - content: ""; - background: $primary; - border-radius: 50%; - width: 10px; - height: 10px; - margin: -5px 0 0 -5px; - } - } - } - } - .d-inline-block { - padding: 0 0 0 48px !important; - margin: 0 !important; - .row.text-primary-700 { - font-size: 12px; - font-weight: 600 !important; - text-transform: uppercase; - margin: 0 !important; - } - .small { - .font-weight-bold { - font-weight: normal !important; - font-size: 14px; - line-height: 20px; - color: #515661; - } - } - .badge.badge-primary { - display: inline-block; - vertical-align: top; - font-size: 14px; - font-weight: 500; - line-height: 16px; - padding: 2px 10px; - margin: 10px 0 10px 43px !important; - text-transform: capitalize; - background: #D1FAE5 !important; - color: #065F46; - border-radius: 12px; - } - } - } - &:first-child { - &.dates-day.pb-4 { - .dates-line-bottom { - border-color: $primary !important; - } - .dates-dot { - &.border { - &.border-gray-900 { - background: $primary !important; - border: 2px solid $primary !important; - &:before { - position: absolute; - top: 50%; - left: 50%; - width: 10px; - height: 5px; - border: 1px solid white; - border-width: 0 0 1px 1px; - content: ''; - transform: rotate(-45deg); - margin: -3px 0 0 -4px; - } - } - &.bg-warning-300 { - border: 2px solid $primary !important; - background: white !important; - &:before { - display: none !important; - } - } - } - } - } - } - &:nth-child(2) { - &.dates-day.pb-4 { - .dates-dot { - &.border { - &.border-gray-900 { - background: $primary !important; - border: 2px solid $primary !important; - &:before { - position: absolute; - top: 50%; - left: 50%; - width: 10px; - height: 5px; - border: 1px solid white; - border-width: 0 0 1px 1px; - content: ''; - transform: rotate(-45deg); - margin: -3px 0 0 -4px; - } - } - &.bg-warning-300 { - border: 2px solid $primary !important; - background: white !important; - &:before { - display: none !important; - } - } - } - } - } - } - .small.mb-2 { - background: $primary-light; - border-radius: 6px; - padding: 16px; - margin: 18px 0 0 0; - font-size: 14px !important; - line-height: 20px; - max-width: 475px; - } - } -} -// profile page style -.profile-page { - .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; - } - } - } - .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; - } - &:after { - 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); - } - } - .container-fluid { - margin: 0 auto; - max-width: 1090px; - 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: #111827; - margin: 0 0 5px; - } - p { - color: #515661; - 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: $primary-light; - color: #111827; - font-size: 14px; - line-height: 20px; - a { - color: $primary; - } - .alert-heading.h4 { - margin: 0 0 10px; - font-weight: 500; - font-size: 14px; - color: #111827; - } - p { - margin: 0 0 10px; - } - } - } - .pgn-transition-replace-group:empty { - 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; - font-size: 14px; - color: #111827; - .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: #111827; - margin: 0 !important; - } - h4.certificate-title, p.h6 { - font-size: 16px; - line-height: 20px; - color: #111827 !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: #111827; - margin: 5px 0 0 !important; - } - .edit-section-header { - font-size: 18px; - font-weight: 600; - line-height: 24px; - color: #111827; - 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: #111827 !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: #515661 !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; - } - } - } - } - } - 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; - } - } - } - } - } - } - } - .profile-avatar-wrap { - margin-bottom: 0 !important; - } - .profile-avatar { - svg.text-muted { - color: $primary !important; - } - } -} -.page__account-settings { - max-width: 1090px; - margin: 0 auto; - padding: 35px 15px 20px !important; - .form-control { - padding: 6px 10px; - font-size: 14px; - line-height: 20px; - height: 32px; - } - h1 { - color: #111827; - font-size: 24px; - line-height: 30px; - font-weight: 700; - margin: 0 0 20px; - } - .account-section { - font-size: 14px; - line-height: 20px; - color: #515661; - p { - margin: 0 0 15px; - } - h2.section-heading { - font-size: 18px; - line-height: 24px; - font-weight: 700; - margin: 0 0 15px; - color: #111827; - } - } - .row { - @include media-breakpoint-up(md) { - margin: 0; - } - .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; - } - } - } - } - } - } - .col-md-10 { - flex: 100%; - max-width: 100%; - @include media-breakpoint-up(md) { - flex: 500px; - max-width: 500px; - padding: 0 0 0 50px; - } - @include media-breakpoint-up(lg) { - flex: 600px; - max-width: 600px; - } - } - } - #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; - } - } - .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: #111827; - h6 { - font-weight: 600; - font-size: 18px; - color: #111827; - margin: 5px 0 0 !important; - } - p { - margin: 10px 0 0; - button { - &.btn-link { - font-weight: 600; - font-size: 16px; - color: $primary; - } - } - } - .alert-warning { - margin: 10px 0 0 !important; - box-shadow: none; - padding: 15px !important; - background: $primary-light !important; - a { - color: $primary; - } - } - } - .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: #111827; - p.h6 { - font-weight: 600; - font-size: 16px; - color: #111827; - 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; - line-height: 20px; - color: #111827 !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: #515661; - 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: #111827; - 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: #515661 !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: #111827; - 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; - } - } - } - } - } -} \ No newline at end of file +@import "./header"; +@import "./footer"; +@import "./login"; +@import "./progress"; +@import "./tour"; +@import "./learning"; +@import "./discussion"; +@import "./account"; +@import "./profile"; +@import "./dates"; +@import "./extras"; diff --git a/paragon/_profile.scss b/paragon/_profile.scss new file mode 100644 index 00000000..1b304d93 --- /dev/null +++ b/paragon/_profile.scss @@ -0,0 +1,371 @@ +// profile page style +.profile-page { + .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; + } + } + } + .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; + } + &:after { + 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); + } + } + .container-fluid { + margin: 0 auto; + max-width: 1090px; + 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: $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; + } + } + } + .pgn-transition-replace-group:empty { + 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; + 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; + } + } + } + } + } + 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; + } + } + } + } + } + } + } + .profile-avatar-wrap { + margin-bottom: 0 !important; + } + .profile-avatar { + svg.text-muted { + color: $primary !important; + } + } +} diff --git a/paragon/_progress.scss b/paragon/_progress.scss new file mode 100644 index 00000000..458179a7 --- /dev/null +++ b/paragon/_progress.scss @@ -0,0 +1,181 @@ +// progress page style +.course-tabs-navigation + .container-xl { + >.mb-4.justify-content-between { + h1 { + font-weight: 800; + font-size: 24px; + line-height: 30px; + 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: 13px; + color: $primary; + font-weight: 600; + } + svg { + color: $primary; + } + } + } + } + >.col-12.col-md-4.p-0.px-md-4 { + .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; + } + .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; + border-radius: 8px; + padding: 20px; + ul { + list-style: none; + a { + color: $primary; + } + } + } + } + } + .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: $primary-light; + } + svg.donut { + @include media-breakpoint-up(sm) { + float: right; + } + } + .donut-chart-text { + .donut-chart-number { + color: $text-color; + } + .donut-chart-label { + color: #4B5563; + } + } + .grade-bar .grade-bar__base { + fill: $primary-light; + } +} +#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: 16px !important; + } + #weighted-grade-summary.small { + color: $primary !important; + font-weight: 600 !important; + font-size: 13px !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; + } + } + .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; + } + } + .popover-body { + color: white !important; + } +} \ No newline at end of file diff --git a/paragon/_tour.scss b/paragon/_tour.scss new file mode 100644 index 00000000..f3c5f1dd --- /dev/null +++ b/paragon/_tour.scss @@ -0,0 +1,71 @@ +/// Tour site + +#paragon-portal-root .new-user-tour-dialog { + .pgn__modal-hero { + background: $primary-light; + min-height: 50px; + .pgn__modal-hero-bg { + display: none; + } + .pgn__modal-hero-content { + max-width: 100% !important; + } + h2.pgn__modal-title { + color: $primary !important; + font-size: 27px; + line-height: 30px; + margin: 0; + .text-accent-b { + color: $primary !important; + } + } + } + .pgn__modal-body-content { + &:after, &:before { + display: none; + } + p { + color: $text-color-primary !important; + font-size: 14px; + line-height: 20px; + text-align: center; + margin: 0; + } + } + .pgn__action-row { + justify-content: center; + margin: 0 -10px; + button { + width: 50%; + font-size: 14px; + font-weight: 500; + border: 1px solid #D1D5DB; + margin: 0 10px; + &.btn-brand { + background: $primary !important; + border-color: $primary !important; + } + } + } +} +#pgn__checkpoint { + background: $primary-light; + border-top: 8px solid $primary; + #pgn__checkpoint-title { + font-size: 22px; + line-height: 30px; + color: #111827; + } +} +#pgn__checkpoint[data-popper-placement^=bottom] > #pgn__checkpoint-arrow:after { + border-bottom: solid 15px $primary; +} +#pgn__checkpoint[data-popper-placement^=top] > #pgn__checkpoint-arrow:after { + border-top: solid 15px $primary-light; +} +[dir="ltr"] .pgn__checkpoint[data-popper-placement^=left] > #pgn__checkpoint-arrow::after { + border-left: solid 15px $primary-light; +} +[dir="ltr"] .pgn__checkpoint[data-popper-placement^=right] > #pgn__checkpoint-arrow::after { + border-right: solid 15px $primary-light; +} \ No newline at end of file diff --git a/paragon/_variables.scss b/paragon/_variables.scss index 3a175d86..a4a3272c 100644 --- a/paragon/_variables.scss +++ b/paragon/_variables.scss @@ -1,7 +1,8 @@ -// Use this file to set SASS variables for @edx/paragon -// See _variables.scss in https://github.com/openedx/paragon/blob/master/scss/core/ for reference $primary: #15376D; $primary-light: #F2F7F8; $light-drak: #374151; - +$text-color: #111827; +$text-color-primary: #515661; +$text-color-light: #515661; @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); + diff --git a/postinstall.js b/postinstall.js new file mode 100644 index 00000000..1f69e8bd --- /dev/null +++ b/postinstall.js @@ -0,0 +1,31 @@ +const fs = require("fs"); +const path = require('path'); + +const themesSupported = ["dark"] +let theme = process.env.npm_config_theme; + +// INFO: writing copyDirectorySync instead of using fs-extra package because we don't want to have any npm dependency in brand-openedx +function copyDirectorySync(source, destination) { + if (!fs.existsSync(destination)) { + fs.mkdirSync(destination); + } + + const files = fs.readdirSync(source); + + files.forEach(file => { + const sourcePath = path.join(source, file); + const destPath = path.join(destination, file); + + if (fs.statSync(sourcePath).isDirectory()) { + copyDirectorySync(sourcePath, destPath); + } else { + fs.copyFileSync(sourcePath, destPath); + } + }); +} + +if (themesSupported.includes(theme)){ + const srcDir = path.resolve(__dirname, 'themes', theme); + const destDir = path.resolve(__dirname, 'paragon'); + copyDirectorySync(srcDir, destDir); +} diff --git a/themes/dark/_variables.scss b/themes/dark/_variables.scss new file mode 100644 index 00000000..250aa66b --- /dev/null +++ b/themes/dark/_variables.scss @@ -0,0 +1,60 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); +$primary: #AEC7F6; +$primary-light: #292A2C; +$light-drak: #374151; +$text-color: #F8F8F8; +$text-color-primary: #DDDFE2; +$border-color: #777792; + + +h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { + color: $text-color; +} +#password-requirement-top .arrow:before { + border-top-color: #36383B; +} +#password-requirement-top .tooltip-inner { + background: #36383B; + color: $text-color; +} +#root { + .text-body { + color: $text-color !important; + } + .form-control { + background: none !important; + border-color: $border-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; + } + .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; + } + #main-content{ + .btn-brand { + color: #112F6B; + } + } + } + .bg-primary-400 { + h1 { + color: $text-color !important; + .text-accent-a { + color: $text-color !important; + } + } + } + } +} \ No newline at end of file From 4e5cf41d555fa2cc52ba38d248ae8ad380e7ec6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Ctanveer65=E2=80=9D?= Date: Mon, 8 Apr 2024 16:50:35 +0500 Subject: [PATCH 05/26] update header style --- paragon/_header.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/paragon/_header.scss b/paragon/_header.scss index 62354822..bb447fbc 100644 --- a/paragon/_header.scss +++ b/paragon/_header.scss @@ -220,7 +220,7 @@ } } } - header.learning-header { + header.customise.learning-header { z-index: 30; box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.06), 0px 1px 3px 0px rgba(0,0,0,0.1); .logo { From 266724464bd986a5a6747bad6dc476cb99b97db1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Ctanveer65=E2=80=9D?= Date: Tue, 23 Apr 2024 15:07:29 +0500 Subject: [PATCH 06/26] feat: update dark theme --- paragon/_footer.scss | 21 ++- paragon/_header.scss | 30 ++-- paragon/_overrides.scss | 4 + paragon/_variables.scss | 1 + themes/dark/_variables.scss | 298 +++++++++++++++++++++++++++++++++++- 5 files changed, 333 insertions(+), 21 deletions(-) diff --git a/paragon/_footer.scss b/paragon/_footer.scss index d9da39e4..990c6b28 100644 --- a/paragon/_footer.scss +++ b/paragon/_footer.scss @@ -146,7 +146,7 @@ footer.tutor-container { } .course-card-banners { display: block !important; - .alert-content { + .alert-content, .related-programs-banner { padding: 2px 16px; font-size: 12px; line-height: 20px; @@ -155,8 +155,23 @@ footer.tutor-container { width: 20px; } svg { - width: 20px; - height: 20px; + 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; + } } } } diff --git a/paragon/_header.scss b/paragon/_header.scss index bb447fbc..908cdcb8 100644 --- a/paragon/_header.scss +++ b/paragon/_header.scss @@ -458,21 +458,21 @@ } .btn.btn-inverse-primary { font-size: 14px; - font-weight: 500; - line-height: 22px; - padding: 20px 0 !important; - color: #374151; - margin: 0 16px 0 0; - display: block; - border: none !important; - border-bottom: 2px solid transparent !important; - background: none !important; - border-radius: 0 !important; - &.course-link, &:hover { - color: $text-color; - text-decoration: none; - border-bottom: 2px solid $primary !important; - } + font-weight: 500; + line-height: 22px; + padding: 20px 0 !important; + color: #374151; + margin: 0 16px 0 0; + display: block; + border: none !important; + border-bottom: 2px solid transparent !important; + background: none !important; + border-radius: 0 !important; + &.course-link, &:hover { + color: $text-color; + text-decoration: none; + border-bottom: 2px solid $primary !important; + } } .btn-icon.btn-icon-inverse-primary { color: #767676; diff --git a/paragon/_overrides.scss b/paragon/_overrides.scss index a086414e..dff20286 100644 --- a/paragon/_overrides.scss +++ b/paragon/_overrides.scss @@ -367,3 +367,7 @@ html { @import "./profile"; @import "./dates"; @import "./extras"; + + + + diff --git a/paragon/_variables.scss b/paragon/_variables.scss index a4a3272c..2412828c 100644 --- a/paragon/_variables.scss +++ b/paragon/_variables.scss @@ -6,3 +6,4 @@ $text-color-primary: #515661; $text-color-light: #515661; @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); + diff --git a/themes/dark/_variables.scss b/themes/dark/_variables.scss index 250aa66b..f6278d07 100644 --- a/themes/dark/_variables.scss +++ b/themes/dark/_variables.scss @@ -5,16 +5,45 @@ $light-drak: #374151; $text-color: #F8F8F8; $text-color-primary: #DDDFE2; $border-color: #777792; +$light-overlay: #36383B; +$danger: #FFA07A; +$success: #54CF5E; +$btn-color: #112F6B; +$body-bg:#0D0D0E; +body { + color: $text-color; + background: $body-bg; +} h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: $text-color; } +#password-requirement-left .arrow:before { + border-left-color: $light-overlay !important; +} #password-requirement-top .arrow:before { - border-top-color: #36383B; + border-top-color: $light-overlay !important; +} +.tooltip .tooltip-inner { + background: $light-overlay !important; + color: $text-color !important; +} +.text-success { + color: $success !important; +} +.react-loading-skeleton { + --base-color: #36383B; + --highlight-color: #000; + } + .pgn__pageBanner__accentA { + background: $primary-light !important; + color: $text-color !important; + button { + color: $text-color !important; + } } -#password-requirement-top .tooltip-inner { - background: #36383B; +a.course-card-title { color: $text-color; } #root { @@ -24,10 +53,21 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { .form-control { background: none !important; border-color: $border-color; + color: $text-color; + &.is-invalid { + border-color: $danger !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; } .layout { background: #0D0D0E; @@ -46,6 +86,9 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { .btn-brand { color: #112F6B; } + .alert-danger { + background: $light-overlay; + } } } .bg-primary-400 { @@ -57,4 +100,253 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { } } } + .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: #767676; + } + } + } + .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; ; + } + } + } + } + .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; + } + } + .btn-icon.btn-icon-inverse-primary { + color: $text-color; + outline: none !important; + background: none !important; + box-shadow: none !important; + } + } + .nav-small-menu a { + color: $text-color; + &:before { + display: none; + } + &:active { + background: transparent !important; + } + } +} +#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; + } + } + } + } + } + } + } + } +} +#no-courses-content-view { + background: $light-overlay; +} + +// 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__modal-close-container { + button { + color: $text-color; + background: none; + } + } } \ No newline at end of file From cdf73fa13431b98f535c29df1b3652486582f1e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Ctanveer65=E2=80=9D?= Date: Mon, 13 May 2024 15:29:59 +0500 Subject: [PATCH 07/26] update style --- paragon/_extras.scss | 338 +++++++++++++++++++++++++++++++++++ paragon/_variables.scss | 19 +- themes/dark/_extras.scss | 338 +++++++++++++++++++++++++++++++++++ themes/dark/_variables.scss | 340 ------------------------------------ 4 files changed, 687 insertions(+), 348 deletions(-) create mode 100644 themes/dark/_extras.scss diff --git a/paragon/_extras.scss b/paragon/_extras.scss index e69de29b..45f185ec 100644 --- a/paragon/_extras.scss +++ b/paragon/_extras.scss @@ -0,0 +1,338 @@ +body { + color: $text-color; + background: $body-bg; +} +h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { + color: $text-color; +} +#password-requirement-left .arrow:before { + border-left-color: $light-overlay !important; +} +#password-requirement-top .arrow:before { + border-top-color: $light-overlay !important; +} +.tooltip .tooltip-inner { + background: $light-overlay !important; + color: $text-color !important; +} +.text-success { + color: $success !important; +} +.react-loading-skeleton { + --base-color: #36383B; + --highlight-color: #000; + } + .pgn__pageBanner__accentA { + background: $primary-light !important; + color: $text-color !important; + button { + color: $text-color !important; + } +} +a.course-card-title { + color: $text-color; +} +#root { + .text-body { + color: $text-color !important; + } + .form-control { + background: none !important; + border-color: $border-color; + color: $text-color; + &.is-invalid { + border-color: $danger !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; + } + .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; + } + #main-content{ + .btn-brand { + color: #112F6B; + } + .alert-danger { + background: $light-overlay; + } + } + } + .bg-primary-400 { + h1 { + color: $text-color !important; + .text-accent-a { + color: $text-color !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; + } + .hamburger-menu { + .line { + background: #767676; + } + } + } + .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; ; + } + } + } + } + .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; + } + } + .btn-icon.btn-icon-inverse-primary { + color: $text-color; + outline: none !important; + background: none !important; + box-shadow: none !important; + } + } + .nav-small-menu a { + color: $text-color; + &:before { + display: none; + } + &:active { + background: transparent !important; + } + } +} +#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; + } + } + } + } + } + } + } + } +} +#no-courses-content-view { + background: $light-overlay; +} + +// 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__modal-close-container { + button { + color: $text-color; + background: none; + } + } +} \ No newline at end of file diff --git a/paragon/_variables.scss b/paragon/_variables.scss index 2412828c..cd778dbb 100644 --- a/paragon/_variables.scss +++ b/paragon/_variables.scss @@ -1,9 +1,12 @@ -$primary: #15376D; -$primary-light: #F2F7F8; -$light-drak: #374151; -$text-color: #111827; -$text-color-primary: #515661; -$text-color-light: #515661; @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); - - +$primary: #AEC7F6; +$primary-light: #292A2C; +$light-drak: #374151; +$text-color: #F8F8F8; +$text-color-primary: #DDDFE2; +$border-color: #777792; +$light-overlay: #36383B; +$danger: #FFA07A; +$success: #54CF5E; +$btn-color: #112F6B; +$body-bg:#0D0D0E; diff --git a/themes/dark/_extras.scss b/themes/dark/_extras.scss new file mode 100644 index 00000000..45f185ec --- /dev/null +++ b/themes/dark/_extras.scss @@ -0,0 +1,338 @@ +body { + color: $text-color; + background: $body-bg; +} +h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { + color: $text-color; +} +#password-requirement-left .arrow:before { + border-left-color: $light-overlay !important; +} +#password-requirement-top .arrow:before { + border-top-color: $light-overlay !important; +} +.tooltip .tooltip-inner { + background: $light-overlay !important; + color: $text-color !important; +} +.text-success { + color: $success !important; +} +.react-loading-skeleton { + --base-color: #36383B; + --highlight-color: #000; + } + .pgn__pageBanner__accentA { + background: $primary-light !important; + color: $text-color !important; + button { + color: $text-color !important; + } +} +a.course-card-title { + color: $text-color; +} +#root { + .text-body { + color: $text-color !important; + } + .form-control { + background: none !important; + border-color: $border-color; + color: $text-color; + &.is-invalid { + border-color: $danger !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; + } + .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; + } + #main-content{ + .btn-brand { + color: #112F6B; + } + .alert-danger { + background: $light-overlay; + } + } + } + .bg-primary-400 { + h1 { + color: $text-color !important; + .text-accent-a { + color: $text-color !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; + } + .hamburger-menu { + .line { + background: #767676; + } + } + } + .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; ; + } + } + } + } + .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; + } + } + .btn-icon.btn-icon-inverse-primary { + color: $text-color; + outline: none !important; + background: none !important; + box-shadow: none !important; + } + } + .nav-small-menu a { + color: $text-color; + &:before { + display: none; + } + &:active { + background: transparent !important; + } + } +} +#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; + } + } + } + } + } + } + } + } +} +#no-courses-content-view { + background: $light-overlay; +} + +// 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__modal-close-container { + button { + color: $text-color; + background: none; + } + } +} \ No newline at end of file diff --git a/themes/dark/_variables.scss b/themes/dark/_variables.scss index f6278d07..cd778dbb 100644 --- a/themes/dark/_variables.scss +++ b/themes/dark/_variables.scss @@ -10,343 +10,3 @@ $danger: #FFA07A; $success: #54CF5E; $btn-color: #112F6B; $body-bg:#0D0D0E; - - -body { - color: $text-color; - background: $body-bg; -} -h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { - color: $text-color; -} -#password-requirement-left .arrow:before { - border-left-color: $light-overlay !important; -} -#password-requirement-top .arrow:before { - border-top-color: $light-overlay !important; -} -.tooltip .tooltip-inner { - background: $light-overlay !important; - color: $text-color !important; -} -.text-success { - color: $success !important; -} -.react-loading-skeleton { - --base-color: #36383B; - --highlight-color: #000; - } - .pgn__pageBanner__accentA { - background: $primary-light !important; - color: $text-color !important; - button { - color: $text-color !important; - } -} -a.course-card-title { - color: $text-color; -} -#root { - .text-body { - color: $text-color !important; - } - .form-control { - background: none !important; - border-color: $border-color; - color: $text-color; - &.is-invalid { - border-color: $danger !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; - } - .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; - } - #main-content{ - .btn-brand { - color: #112F6B; - } - .alert-danger { - background: $light-overlay; - } - } - } - .bg-primary-400 { - h1 { - color: $text-color !important; - .text-accent-a { - color: $text-color !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; - } - .hamburger-menu { - .line { - background: #767676; - } - } - } - .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; ; - } - } - } - } - .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; - } - } - .btn-icon.btn-icon-inverse-primary { - color: $text-color; - outline: none !important; - background: none !important; - box-shadow: none !important; - } - } - .nav-small-menu a { - color: $text-color; - &:before { - display: none; - } - &:active { - background: transparent !important; - } - } -} -#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; - } - } - } - } - } - } - } - } -} -#no-courses-content-view { - background: $light-overlay; -} - -// 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__modal-close-container { - button { - color: $text-color; - background: none; - } - } -} \ No newline at end of file From 6021c0200299d416060a60b1b56d56bdea2cb3f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Ctanveer65=E2=80=9D?= Date: Tue, 11 Jun 2024 16:18:52 +0500 Subject: [PATCH 08/26] fixing --- paragon/_extras.scss | 896 ++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 890 insertions(+), 6 deletions(-) diff --git a/paragon/_extras.scss b/paragon/_extras.scss index 45f185ec..40faa512 100644 --- a/paragon/_extras.scss +++ b/paragon/_extras.scss @@ -1,9 +1,21 @@ body { - color: $text-color; - background: $body-bg; + color: $text-color !important; + background: $body-bg !important; + * { + accent-color: $primary; + } } -h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { +a { + color: $primary; +} +.text-muted { 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; } #password-requirement-left .arrow:before { border-left-color: $light-overlay !important; @@ -15,9 +27,151 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { background: $light-overlay !important; color: $text-color !important; } +.text-gray-700 { + color: $text-color-primary !important; +} +.alert-warning { + background: $primary-light; +} +.alert-light { + background: $primary-light; + color: $text-color; +} +.bg-gray-100 { + background: $primary-light !important; +} +.btn-outline-dark { + color: #fff !important; + border-color: #fff !important; + background: none !important; +} +div[data-testid=instructor-toolbar] { + .bg-primary { + background: $primary-light !important; + } +} +.alert-info { + background: $primary-light; + .alert-icon { + svg { + path { + fill: $danger; + } + } + } +} .text-success { color: $success !important; } +.bs-tooltip-top .arrow:before { + 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-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-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__body-nav-item--active { + background: none; + color: $text-color; + border-color: $primary; + } + } +} +.tox-tinymce { + 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; + } + } + } +} +.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; + 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; + } + } + } +} +.unit-navigation .previous-button { + border-color: $text-color-primary; + color: $text-color-primary; +} .react-loading-skeleton { --base-color: #36383B; --highlight-color: #000; @@ -29,10 +183,29 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: $text-color !important; } } +.dropdown-menu { + background: $light-overlay; + color: $text-color; +} a.course-card-title { color: $text-color; } +.text-dark-500 { + color: $text-color !important; +} +.text-gray-500 { + color: $text-color-primary !important; +} #root { + 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; } @@ -55,6 +228,9 @@ a.course-card-title { .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 { @@ -72,8 +248,12 @@ a.course-card-title { .btn-brand { color: #112F6B; } - .alert-danger { + .alert-danger, .alert-success { background: $light-overlay; + a { + background: none !important; + padding: 0 !important; + } } } } @@ -99,7 +279,7 @@ a.course-card-title { } .hamburger-menu { .line { - background: #767676; + background: $text-color; } } } @@ -307,7 +487,11 @@ a.course-card-title { } } #no-courses-content-view { - background: $light-overlay; + background: $body-bg; + border: 1px solid $border-color; + .btn.btn-brand{ + color: $btn-color !important; + } } // style sheet component @@ -335,4 +519,704 @@ a.course-card-title { background: none; } } +} +footer.tutor-container .copyright-site { + color: $text-color-primary; +} +#root header.customise.learning-header { + 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; + } +} +#courseHome-outline { + .pgn_collapsible { + border: 1px solid $primary-light; + border-left: 8px solid $primary-light; + background: none !important; + } +} +.btn-outline-primary:hover { + 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 + } + } + } +} +.pgn__modal-backdrop { + background: #393939; + opacity: .9; +} +.pgn__modal-header { + background: none; +} +.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; + } + } + } +} +a.discussion-post { + 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; + } +} +#paragon-portal-root .new-user-tour-dialog { + .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__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; + } + } +} +.pgn__modal.pgn__modal-default { + .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; + } + } + } + } +} + +.sequence-navigation .btn { + border-color: $primary-light !important; + color: $text-color !important; +} +.sequence { + border-color: $primary-light !important; +} +#root { + .sequence-container { + .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; + } + } + } + } +} +#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; + } + } + } + .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; ; + } + } + } + } +} +.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 { + color: $btn-color; + } + } + } + form { + >p { + button { + color: $btn-color; + &.btn-outline-primary { + background: none !important; + color: $text-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; + } + } + } + } + } + .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); + } + } + .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; + } + } + } + } + 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; + } +} +// progress page style +svg { + circle.donut-hole { + fill: transparent !important; + } +} +.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; + } + } + } + >.col-12.col-md-4.p-0.px-md-4 { + .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; + } + } +} +#non-passing-grade-tooltip { + .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; + } + } + .popover-body { + color: white !important; + } +} + +// Discussion style + +#root #courseTabsNavigation { + background: 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; + } + } + + } + } + .btn.btn-brand { + color: $btn-color; + } +} +#root .header-action-bar + .d-flex.flex-row.position-relative { + .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; + } + } + + } + .comments-sort { + button.btn.btn-tertiary { + border: 1px solid $text-color; + background: none !important; + color: $text-color; + } + } + .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; + } + .alert-danger { + background: $body-bg !important; + } + } + .flex-column.position-sticky.d-flex { + + .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; + } + } + } + } + } + } + .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; + } + .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; + } + } + } + } + } + } + .discussion-posts { + .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; + } + } + } + #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; +} +input::placeholder { + opacity: .9; + color: $text-color; + } +* { + scrollbar-color: $text-color $body-bg; +} +.bg-success-100 { + background: #292A2C !important; +} +#root { + .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__modal-body-content { + .alert-warning { + background: none !important; + } + .form-control { + background: none !important; + border: 1px solid $border-color; + color: $text-color; + } +} +.pgn__card-header-title-md { + color: $text-color !important; +} +.popover { + background: $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; +} +button.mr-3.btn.btn-link.btn-inline { + color: $primary !important; +} +button.p-2.btn.btn-inline { + color: $text-color !important; +} +.sequence-navigation .btn.complete { + background: $primary-light; } \ No newline at end of file From 2beec07a0e7375891ddf4657796a71abbcbb3582 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Ctanveer65=E2=80=9D?= Date: Tue, 11 Jun 2024 21:04:26 +0500 Subject: [PATCH 09/26] update and fixes --- paragon/_account.scss | 6 +++--- paragon/_discussion.scss | 16 ++++++++++------ paragon/_extras.scss | 4 ++++ paragon/_footer.scss | 5 +++-- paragon/_header.scss | 4 ++-- paragon/_learning.scss | 32 +++++++++++++++++++++++++++++++- paragon/_overrides.scss | 6 ++++-- paragon/_profile.scss | 2 +- paragon/_progress.scss | 2 +- paragon/_tour.scss | 4 ++-- paragon/_variables.scss | 10 +++++++++- themes/dark/_extras.scss | 3 +++ 12 files changed, 73 insertions(+), 21 deletions(-) diff --git a/paragon/_account.scss b/paragon/_account.scss index 6a224e2c..ae7240a5 100644 --- a/paragon/_account.scss +++ b/paragon/_account.scss @@ -1,5 +1,5 @@ .page__account-settings { - max-width: 1090px; + max-width: 1600px; margin: 0 auto; padding: 35px 15px 20px !important; .form-control { @@ -90,8 +90,8 @@ padding: 0 0 0 50px; } @include media-breakpoint-up(lg) { - flex: 600px; - max-width: 600px; + flex: 750px; + max-width: 750px; } } } diff --git a/paragon/_discussion.scss b/paragon/_discussion.scss index 7c4f30ea..a2eb9523 100644 --- a/paragon/_discussion.scss +++ b/paragon/_discussion.scss @@ -2,7 +2,7 @@ #root #courseTabsNavigation { padding: 20px 15px !important; - max-width: 1090px; + max-width: 1600px; margin: 0 auto; width: 100%; border: none; @@ -11,7 +11,7 @@ } } #root .header-action-bar { -max-width: 1090px; +max-width: 1600px; margin: 0 auto; width: 100%; padding: 0 15px; @@ -86,9 +86,13 @@ position: static; border: none; border-radius: 6px; .form-control { - background: $primary-light !important; - padding-left: 0; - font-size: 14px; + background: $primary-light !important; + padding-left: 0; + font-size: 14px; + } + .pointer-cursor-hover { + margin: 0 !important; + padding: 0 0.75rem !important; } } } @@ -98,7 +102,7 @@ position: static; margin: 0 0 30px; } #root .header-action-bar + .d-flex.flex-row.position-relative { -max-width: 1090px; +max-width: 1600px; margin: 0 auto; padding: 0 15px 30px; width: 100%; diff --git a/paragon/_extras.scss b/paragon/_extras.scss index 40faa512..9b4ae893 100644 --- a/paragon/_extras.scss +++ b/paragon/_extras.scss @@ -30,6 +30,9 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .text-dark-700 { .text-gray-700 { color: $text-color-primary !important; } +.bg-white { + background: $body-bg !important; +} .alert-warning { background: $primary-light; } @@ -197,6 +200,7 @@ a.course-card-title { color: $text-color-primary !important; } #root { + overflow-x: hidden; input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, diff --git a/paragon/_footer.scss b/paragon/_footer.scss index 990c6b28..ceca4d85 100644 --- a/paragon/_footer.scss +++ b/paragon/_footer.scss @@ -9,7 +9,7 @@ footer.tutor-container { margin: 0 auto; padding: 0 15px; - max-width: 1090px; + max-width: 1600px; text-align: center; @include media-breakpoint-up(lg) { text-align: left; @@ -112,7 +112,7 @@ footer.tutor-container { } } .container-mw-xl.container-fluid { - max-width: 1090px !important; + max-width: 1600px !important; padding: 35px 15px !important; .row { margin: 0 -15px; @@ -261,6 +261,7 @@ footer.tutor-container { margin: 0 7px 0 0; .btn-icon-before { width: 20px !important; + margin: 2px 3px 0 0; } svg { width: 17px; diff --git a/paragon/_header.scss b/paragon/_header.scss index 908cdcb8..8ef1a404 100644 --- a/paragon/_header.scss +++ b/paragon/_header.scss @@ -124,7 +124,7 @@ height: auto; box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.06), 0px 1px 3px 0px rgba(0,0,0,0.1); .container-fluid { - max-width: 1090px; + max-width: 1600px; margin: 0 auto; padding: 0 15px; } @@ -431,7 +431,7 @@ } .learner-variant-header { margin: 0 auto; - max-width: 1090px; + max-width: 1600px; padding: 0 15px !important; position: relative; box-shadow: none !important; diff --git a/paragon/_learning.scss b/paragon/_learning.scss index bd2dff74..96b5bf00 100644 --- a/paragon/_learning.scss +++ b/paragon/_learning.scss @@ -25,6 +25,19 @@ .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; @@ -117,8 +130,17 @@ 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; +} .course-tabs-navigation { padding-top: 20px; border: none; @@ -185,4 +207,12 @@ div[data-learner-type=b2c_learner] { } } } -} \ No newline at end of file +} +#courseHome-dates { + .small { + font-size: 14px !important; + .font-weight-bold { + font-weight: 400 !important; + } + } +} diff --git a/paragon/_overrides.scss b/paragon/_overrides.scss index dff20286..7cfe07bb 100644 --- a/paragon/_overrides.scss +++ b/paragon/_overrides.scss @@ -11,7 +11,7 @@ html { overflow-x: hidden; } .container-xl { - max-width: 1090px !important; + max-width: 1600px !important; padding-left: 15px !important; padding-right: 15 !important; } @@ -264,7 +264,9 @@ html { } } } - +#root .unit-container { + max-width: 100% !important; +} // modal style .pgn__modal.pgn__modal-default { diff --git a/paragon/_profile.scss b/paragon/_profile.scss index 1b304d93..0ec54fae 100644 --- a/paragon/_profile.scss +++ b/paragon/_profile.scss @@ -46,7 +46,7 @@ } .container-fluid { margin: 0 auto; - max-width: 1090px; + max-width: 1600px; padding: 0 15px; .row { display: block; diff --git a/paragon/_progress.scss b/paragon/_progress.scss index 458179a7..9fa4e3de 100644 --- a/paragon/_progress.scss +++ b/paragon/_progress.scss @@ -137,7 +137,7 @@ border-color: transparent !important; } .small, .x-small { - font-size: 16px !important; + font-size: 14px !important; } #weighted-grade-summary.small { color: $primary !important; diff --git a/paragon/_tour.scss b/paragon/_tour.scss index f3c5f1dd..5ae642b0 100644 --- a/paragon/_tour.scss +++ b/paragon/_tour.scss @@ -63,9 +63,9 @@ #pgn__checkpoint[data-popper-placement^=top] > #pgn__checkpoint-arrow:after { border-top: solid 15px $primary-light; } -[dir="ltr"] .pgn__checkpoint[data-popper-placement^=left] > #pgn__checkpoint-arrow::after { +.pgn__checkpoint[data-popper-placement^=left] > #pgn__checkpoint-arrow::after { border-left: solid 15px $primary-light; } -[dir="ltr"] .pgn__checkpoint[data-popper-placement^=right] > #pgn__checkpoint-arrow::after { +.pgn__checkpoint[data-popper-placement^=right] > #pgn__checkpoint-arrow::after { border-right: solid 15px $primary-light; } \ No newline at end of file diff --git a/paragon/_variables.scss b/paragon/_variables.scss index cd778dbb..24f92f9e 100644 --- a/paragon/_variables.scss +++ b/paragon/_variables.scss @@ -1,3 +1,11 @@ +$primary: #15376D; +$primary-light: #F2F7F8; +$light-drak: #374151; +$text-color: #111827; +$text-color-primary: #515661; +$text-color-light: #515661; +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); + @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); $primary: #AEC7F6; $primary-light: #292A2C; @@ -9,4 +17,4 @@ $light-overlay: #36383B; $danger: #FFA07A; $success: #54CF5E; $btn-color: #112F6B; -$body-bg:#0D0D0E; +$body-bg:#0D0D0E; \ No newline at end of file diff --git a/themes/dark/_extras.scss b/themes/dark/_extras.scss index 45f185ec..19fac2dd 100644 --- a/themes/dark/_extras.scss +++ b/themes/dark/_extras.scss @@ -18,6 +18,9 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { .text-success { color: $success !important; } +.bg-white { + background: $body-bg !important; +} .react-loading-skeleton { --base-color: #36383B; --highlight-color: #000; From 824f32c8213867f361bd4c84ddf0dadaa75a6525 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Ctanveer65=E2=80=9D?= Date: Wed, 12 Jun 2024 11:20:06 +0500 Subject: [PATCH 10/26] mobile fixes --- paragon/_extras.scss | 1226 -------------------------------------- paragon/_footer.scss | 1 + paragon/_progress.scss | 2 +- paragon/_variables.scss | 12 - themes/dark/_extras.scss | 916 +++++++++++++++++++++++++++- 5 files changed, 904 insertions(+), 1253 deletions(-) diff --git a/paragon/_extras.scss b/paragon/_extras.scss index 9b4ae893..e69de29b 100644 --- a/paragon/_extras.scss +++ b/paragon/_extras.scss @@ -1,1226 +0,0 @@ -body { - color: $text-color !important; - background: $body-bg !important; - * { - accent-color: $primary; - } -} -a { - color: $primary; -} -.text-muted { - 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; -} -#password-requirement-left .arrow:before { - border-left-color: $light-overlay !important; -} -#password-requirement-top .arrow:before { - border-top-color: $light-overlay !important; -} -.tooltip .tooltip-inner { - background: $light-overlay !important; - color: $text-color !important; -} -.text-gray-700 { - color: $text-color-primary !important; -} -.bg-white { - background: $body-bg !important; -} -.alert-warning { - background: $primary-light; -} -.alert-light { - background: $primary-light; - color: $text-color; -} -.bg-gray-100 { - background: $primary-light !important; -} -.btn-outline-dark { - color: #fff !important; - border-color: #fff !important; - background: none !important; -} -div[data-testid=instructor-toolbar] { - .bg-primary { - background: $primary-light !important; - } -} -.alert-info { - background: $primary-light; - .alert-icon { - svg { - path { - fill: $danger; - } - } - } -} -.text-success { - color: $success !important; -} -.bs-tooltip-top .arrow:before { - 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-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-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__body-nav-item--active { - background: none; - color: $text-color; - border-color: $primary; - } - } -} -.tox-tinymce { - 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; - } - } - } -} -.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; - 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; - } - } - } -} -.unit-navigation .previous-button { - border-color: $text-color-primary; - color: $text-color-primary; -} -.react-loading-skeleton { - --base-color: #36383B; - --highlight-color: #000; - } - .pgn__pageBanner__accentA { - background: $primary-light !important; - color: $text-color !important; - button { - color: $text-color !important; - } -} -.dropdown-menu { - background: $light-overlay; - color: $text-color; -} -a.course-card-title { - color: $text-color; -} -.text-dark-500 { - color: $text-color !important; -} -.text-gray-500 { - color: $text-color-primary !important; -} -#root { - 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; - } - } - .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; - } - #main-content{ - .btn-brand { - color: #112F6B; - } - .alert-danger, .alert-success { - background: $light-overlay; - a { - background: none !important; - padding: 0 !important; - } - } - } - } - .bg-primary-400 { - h1 { - color: $text-color !important; - .text-accent-a { - color: $text-color !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; - } - .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; ; - } - } - } - } - .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; - } - } - .btn-icon.btn-icon-inverse-primary { - color: $text-color; - outline: none !important; - background: none !important; - box-shadow: none !important; - } - } - .nav-small-menu a { - color: $text-color; - &:before { - display: none; - } - &:active { - background: transparent !important; - } - } -} -#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; - } - } - } - } - } - } - } - } -} -#no-courses-content-view { - 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__modal-close-container { - button { - color: $text-color; - background: none; - } - } -} -footer.tutor-container .copyright-site { - color: $text-color-primary; -} -#root header.customise.learning-header { - 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; - } -} -#courseHome-outline { - .pgn_collapsible { - border: 1px solid $primary-light; - border-left: 8px solid $primary-light; - background: none !important; - } -} -.btn-outline-primary:hover { - 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 - } - } - } -} -.pgn__modal-backdrop { - background: #393939; - opacity: .9; -} -.pgn__modal-header { - background: none; -} -.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; - } - } - } -} -a.discussion-post { - 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; - } -} -#paragon-portal-root .new-user-tour-dialog { - .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__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; - } - } -} -.pgn__modal.pgn__modal-default { - .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; - } - } - } - } -} - -.sequence-navigation .btn { - border-color: $primary-light !important; - color: $text-color !important; -} -.sequence { - border-color: $primary-light !important; -} -#root { - .sequence-container { - .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; - } - } - } - } -} -#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; - } - } - } - .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; ; - } - } - } - } -} -.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 { - color: $btn-color; - } - } - } - form { - >p { - button { - color: $btn-color; - &.btn-outline-primary { - background: none !important; - color: $text-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; - } - } - } - } - } - .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); - } - } - .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; - } - } - } - } - 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; - } -} -// progress page style -svg { - circle.donut-hole { - fill: transparent !important; - } -} -.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; - } - } - } - >.col-12.col-md-4.p-0.px-md-4 { - .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; - } - } -} -#non-passing-grade-tooltip { - .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; - } - } - .popover-body { - color: white !important; - } -} - -// Discussion style - -#root #courseTabsNavigation { - background: 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; - } - } - - } - } - .btn.btn-brand { - color: $btn-color; - } -} -#root .header-action-bar + .d-flex.flex-row.position-relative { - .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; - } - } - - } - .comments-sort { - button.btn.btn-tertiary { - border: 1px solid $text-color; - background: none !important; - color: $text-color; - } - } - .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; - } - .alert-danger { - background: $body-bg !important; - } - } - .flex-column.position-sticky.d-flex { - - .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; - } - } - } - } - } - } - .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; - } - .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; - } - } - } - } - } - } - .discussion-posts { - .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; - } - } - } - #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; -} -input::placeholder { - opacity: .9; - color: $text-color; - } -* { - scrollbar-color: $text-color $body-bg; -} -.bg-success-100 { - background: #292A2C !important; -} -#root { - .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__modal-body-content { - .alert-warning { - background: none !important; - } - .form-control { - background: none !important; - border: 1px solid $border-color; - color: $text-color; - } -} -.pgn__card-header-title-md { - color: $text-color !important; -} -.popover { - background: $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; -} -button.mr-3.btn.btn-link.btn-inline { - color: $primary !important; -} -button.p-2.btn.btn-inline { - color: $text-color !important; -} -.sequence-navigation .btn.complete { - background: $primary-light; -} \ No newline at end of file diff --git a/paragon/_footer.scss b/paragon/_footer.scss index ceca4d85..976cae6a 100644 --- a/paragon/_footer.scss +++ b/paragon/_footer.scss @@ -102,6 +102,7 @@ footer.tutor-container { color: #B45309 !important; button { color: #B45309 !important; + white-space: nowrap; } } #dashboard-container { diff --git a/paragon/_progress.scss b/paragon/_progress.scss index 9fa4e3de..69b12af5 100644 --- a/paragon/_progress.scss +++ b/paragon/_progress.scss @@ -47,7 +47,7 @@ } } } - >.col-12.col-md-4.p-0.px-md-4 { + >.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; diff --git a/paragon/_variables.scss b/paragon/_variables.scss index 24f92f9e..a4a3272c 100644 --- a/paragon/_variables.scss +++ b/paragon/_variables.scss @@ -6,15 +6,3 @@ $text-color-primary: #515661; $text-color-light: #515661; @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); -$primary: #AEC7F6; -$primary-light: #292A2C; -$light-drak: #374151; -$text-color: #F8F8F8; -$text-color-primary: #DDDFE2; -$border-color: #777792; -$light-overlay: #36383B; -$danger: #FFA07A; -$success: #54CF5E; -$btn-color: #112F6B; -$body-bg:#0D0D0E; \ No newline at end of file diff --git a/themes/dark/_extras.scss b/themes/dark/_extras.scss index 19fac2dd..f4666269 100644 --- a/themes/dark/_extras.scss +++ b/themes/dark/_extras.scss @@ -1,9 +1,21 @@ body { - color: $text-color; - background: $body-bg; + color: $text-color !important; + background: $body-bg !important; + * { + accent-color: $primary; + } +} +a { + color: $primary; } -h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { +.text-muted { 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; } #password-requirement-left .arrow:before { border-left-color: $light-overlay !important; @@ -15,12 +27,154 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { background: $light-overlay !important; color: $text-color !important; } +.text-gray-700 { + color: $text-color-primary !important; +} +.bg-white { + background: $body-bg !important; +} +.alert-warning { + background: $primary-light; +} +.alert-light { + background: $primary-light; + color: $text-color; +} +.bg-gray-100 { + background: $primary-light !important; +} +.btn-outline-dark { + color: #fff !important; + border-color: #fff !important; + background: none !important; +} +div[data-testid=instructor-toolbar] { + .bg-primary { + background: $primary-light !important; + } +} +.alert-info { + background: $primary-light; + .alert-icon { + svg { + path { + fill: $danger; + } + } + } +} .text-success { color: $success !important; } -.bg-white { +.bs-tooltip-top .arrow:before { + 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-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-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__body-nav-item--active { + background: none; + color: $text-color; + border-color: $primary; + } + } +} +.tox-tinymce { + 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; + } + } + } +} +.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; + 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; + } + } + } +} +.unit-navigation .previous-button { + border-color: $text-color-primary; + color: $text-color-primary; +} .react-loading-skeleton { --base-color: #36383B; --highlight-color: #000; @@ -32,10 +186,30 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: $text-color !important; } } +.dropdown-menu { + background: $light-overlay; + color: $text-color; +} a.course-card-title { color: $text-color; } +.text-dark-500 { + color: $text-color !important; +} +.text-gray-500 { + color: $text-color-primary !important; +} #root { + 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; } @@ -58,6 +232,9 @@ a.course-card-title { .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 { @@ -75,8 +252,12 @@ a.course-card-title { .btn-brand { color: #112F6B; } - .alert-danger { + .alert-danger, .alert-success { background: $light-overlay; + a { + background: none !important; + padding: 0 !important; + } } } } @@ -102,7 +283,7 @@ a.course-card-title { } .hamburger-menu { .line { - background: #767676; + background: $text-color; } } } @@ -146,13 +327,16 @@ a.course-card-title { box-shadow: none !important; } } - .nav-small-menu a { - color: $text-color; - &:before { - display: none; - } - &:active { - background: transparent !important; + .nav-small-menu{ + background: #454545; + a { + color: $text-color; + &:before { + display: none; + } + &:active { + background: transparent !important; + } } } } @@ -310,7 +494,11 @@ a.course-card-title { } } #no-courses-content-view { - background: $light-overlay; + background: $body-bg; + border: 1px solid $border-color; + .btn.btn-brand{ + color: $btn-color !important; + } } // style sheet component @@ -338,4 +526,704 @@ a.course-card-title { background: none; } } +} +footer.tutor-container .copyright-site { + color: $text-color-primary; +} +#root header.customise.learning-header { + 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; + } +} +#courseHome-outline { + .pgn_collapsible { + border: 1px solid $primary-light; + border-left: 8px solid $primary-light; + background: none !important; + } +} +.btn-outline-primary:hover { + 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 + } + } + } +} +.pgn__modal-backdrop { + background: #393939; + opacity: .9; +} +.pgn__modal-header { + background: none; +} +.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; + } + } + } +} +a.discussion-post { + 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; + } +} +#paragon-portal-root .new-user-tour-dialog { + .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__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; + } + } +} +.pgn__modal.pgn__modal-default { + .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; + } + } + } + } +} + +.sequence-navigation .btn { + border-color: $primary-light !important; + color: $text-color !important; +} +.sequence { + border-color: $primary-light !important; +} +#root { + .sequence-container { + .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; + } + } + } + } +} +#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; + } + } + } + .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; ; + } + } + } + } +} +.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 { + color: $btn-color; + } + } + } + form { + >p { + button { + color: $btn-color; + &.btn-outline-primary { + background: none !important; + color: $text-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; + } + } + } + } + } + .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); + } + } + .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; + } + } + } + } + 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; + } +} +// progress page style +svg { + circle.donut-hole { + fill: transparent !important; + } +} +.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; + } + } + } + >.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; + } + } +} +#non-passing-grade-tooltip { + .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; + } + } + .popover-body { + color: white !important; + } +} + +// Discussion style + +#root #courseTabsNavigation { + background: 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; + } + } + + } + } + .btn.btn-brand { + color: $btn-color; + } +} +#root .header-action-bar + .d-flex.flex-row.position-relative { + .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; + } + } + + } + .comments-sort { + button.btn.btn-tertiary { + border: 1px solid $text-color; + background: none !important; + color: $text-color; + } + } + .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; + } + .alert-danger { + background: $body-bg !important; + } + } + .flex-column.position-sticky.d-flex { + + .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; + } + } + } + } + } + } + .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; + } + .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; + } + } + } + } + } + } + .discussion-posts { + .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; + } + } + } + #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; +} +input::placeholder { + opacity: .9; + color: $text-color; + } +* { + scrollbar-color: $text-color $body-bg; +} +.bg-success-100 { + background: #292A2C !important; +} +#root { + .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__modal-body-content { + .alert-warning { + background: none !important; + } + .form-control { + background: none !important; + border: 1px solid $border-color; + color: $text-color; + } +} +.pgn__card-header-title-md { + color: $text-color !important; +} +.popover { + background: $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; +} +button.mr-3.btn.btn-link.btn-inline { + color: $primary !important; +} +button.p-2.btn.btn-inline { + color: $text-color !important; +} +.sequence-navigation .btn.complete { + background: $primary-light; } \ No newline at end of file From 661eb2ef1da7c5220ed2f9a1ca6c5e3db42ca5d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Ctanveer65=E2=80=9D?= Date: Thu, 13 Jun 2024 12:42:19 +0500 Subject: [PATCH 11/26] fixes --- paragon/_discussion.scss | 8 ++- paragon/_footer.scss | 4 +- paragon/_overrides.scss | 14 +++-- paragon/_profile.scss | 3 + paragon/_progress.scss | 1 + paragon/_variables.scss | 2 +- themes/dark/_extras.scss | 110 ++++++++++++++++++++++++++++++++++-- themes/dark/_variables.scss | 2 +- 8 files changed, 130 insertions(+), 14 deletions(-) diff --git a/paragon/_discussion.scss b/paragon/_discussion.scss index a2eb9523..2137daf8 100644 --- a/paragon/_discussion.scss +++ b/paragon/_discussion.scss @@ -9,6 +9,11 @@ .container-xl { padding: 0 !important; } + + .container-xl { + .position-relative.mb-4 { + margin: 0 !important; + } + } } #root .header-action-bar { max-width: 1600px; @@ -48,7 +53,7 @@ position: static; padding: 9px 12px; } &:hover { - background: $primary-light; + background: $primary-light !important; } &.active { background: $primary !important; @@ -82,6 +87,7 @@ position: static; display: none !important; } form { + background: none; flex-flow: row-reverse; border: none; border-radius: 6px; diff --git a/paragon/_footer.scss b/paragon/_footer.scss index 976cae6a..ca9ee949 100644 --- a/paragon/_footer.scss +++ b/paragon/_footer.scss @@ -80,7 +80,7 @@ footer.tutor-container { line-height: 24px; } a { - color: $light-drak; + color: $light-dark; text-decoration: none; &:hover { color: #000; @@ -94,7 +94,7 @@ footer.tutor-container { display: block; font-size: 12px; line-height: 16px; - color: $light-drak; + color: $light-dark; } } .pgn__pageBanner__accentA { diff --git a/paragon/_overrides.scss b/paragon/_overrides.scss index 7cfe07bb..8fd8ed7b 100644 --- a/paragon/_overrides.scss +++ b/paragon/_overrides.scss @@ -50,11 +50,11 @@ html { } } } - + div.d-flex.ml-auto { + + div.d-flex.ml-auto, + .w-100.d-flex div.d-flex.ml-auto { position: absolute; right: 0; top: -22px; - .mt-3 { + .mt-3, .ml-1, >div { margin: 0 !important; border: none !important; &:first-child { @@ -133,12 +133,18 @@ html { } } } + + .w-100.d-flex div.d-flex.ml-auto { + @media only screen and (max-width: 576px) { + position: static !important; + padding: 10px 0; + } + } } #courseware-sequenceNavigation { @media only screen and (max-width: 576px) { width: calc(100% - 92px) !important; } - + div.d-flex.ml-auto{ + + div.d-flex.ml-auto { position: absolute; right: 0; top: 9px; @@ -255,7 +261,7 @@ html { } .unit-navigation { max-width: 226px; - button { + button, a { svg { display: none; } diff --git a/paragon/_profile.scss b/paragon/_profile.scss index 0ec54fae..41d45a36 100644 --- a/paragon/_profile.scss +++ b/paragon/_profile.scss @@ -1,5 +1,8 @@ // profile page style .profile-page { + @include media-breakpoint-up(lg) { + min-height: calc(100vh - 142px); + } .form-control { padding: 6px 10px; font-size: 14px; diff --git a/paragon/_progress.scss b/paragon/_progress.scss index 69b12af5..b93e9f69 100644 --- a/paragon/_progress.scss +++ b/paragon/_progress.scss @@ -1,5 +1,6 @@ // progress page style .course-tabs-navigation + .container-xl { + min-height: calc(100vh - 300px); >.mb-4.justify-content-between { h1 { font-weight: 800; diff --git a/paragon/_variables.scss b/paragon/_variables.scss index a4a3272c..46a94577 100644 --- a/paragon/_variables.scss +++ b/paragon/_variables.scss @@ -1,6 +1,6 @@ $primary: #15376D; $primary-light: #F2F7F8; -$light-drak: #374151; +$light-dark: #374151; $text-color: #111827; $text-color-primary: #515661; $text-color-light: #515661; diff --git a/themes/dark/_extras.scss b/themes/dark/_extras.scss index f4666269..a2ef2bc5 100644 --- a/themes/dark/_extras.scss +++ b/themes/dark/_extras.scss @@ -171,9 +171,16 @@ div[data-testid=instructor-toolbar] { } } } -.unit-navigation .previous-button { - border-color: $text-color-primary; - color: $text-color-primary; +.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; + } } .react-loading-skeleton { --base-color: #36383B; @@ -200,6 +207,11 @@ a.course-card-title { color: $text-color-primary !important; } #root { + .btn { + &:before { + border-color: $text-color-primary !important; + } + } overflow-x: hidden; input:-webkit-autofill, input:-webkit-autofill:hover, @@ -558,6 +570,14 @@ footer.tutor-container .copyright-site { 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; @@ -906,6 +926,11 @@ svg { fill: transparent !important; } } +.grade-bar { + .grade-bar--current-non-passing { + fill: $danger; + } +} .course-tabs-navigation + .container-xl { >.row { >.col-12.col-md-8.p-0 { @@ -914,6 +939,9 @@ svg { border-left: 8px solid $primary-light !important; &.grades { border: none !important; + .btn-icon.btn-icon-primary { + background: none !important; + } } } } @@ -982,8 +1010,17 @@ svg { // Discussion style -#root #courseTabsNavigation { - background: none; +#root { + #courseTabsNavigation { + background: none; + } + .btn-icon.btn-icon-primary.post-footer-icon-dimentions { + background: none !important; + color: $text-color !important; + border: none !important; + outline: none; + box-shadow: none; + } } #root .header-action-bar { background: none; @@ -1063,6 +1100,10 @@ svg { } } .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 { @@ -1115,6 +1156,9 @@ svg { } } .discussion-posts { + .border-light-400 { + border-color: $primary-light !important; + } .d-flex.flex-row.border-bottom.border-light-400 { font-size: 14px; button { @@ -1209,6 +1253,10 @@ input::placeholder { } .popover { background: $primary-light; + color: $text-color; + * { + color: $text-color; + } &.bs-popover-top { .arrow:before, .arrow:after { border-top-color: $primary-light; @@ -1226,4 +1274,56 @@ button.p-2.btn.btn-inline { } .sequence-navigation .btn.complete { 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; + } + } + } + } + } + } + } } \ No newline at end of file diff --git a/themes/dark/_variables.scss b/themes/dark/_variables.scss index cd778dbb..801850e9 100644 --- a/themes/dark/_variables.scss +++ b/themes/dark/_variables.scss @@ -1,7 +1,7 @@ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); $primary: #AEC7F6; $primary-light: #292A2C; -$light-drak: #374151; +$light-dark: #374151; $text-color: #F8F8F8; $text-color-primary: #DDDFE2; $border-color: #777792; From e3cc55e0612165718e9503c392aae019851e122b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Ctanveer65=E2=80=9D?= Date: Thu, 20 Jun 2024 14:49:26 +0500 Subject: [PATCH 12/26] fixes --- paragon/_learning.scss | 5 +++++ paragon/_overrides.scss | 5 +++++ themes/dark/_extras.scss | 2 +- 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/paragon/_learning.scss b/paragon/_learning.scss index 96b5bf00..1f50cedb 100644 --- a/paragon/_learning.scss +++ b/paragon/_learning.scss @@ -209,6 +209,11 @@ div[data-learner-type=b2c_learner] { } } #courseHome-dates { + a { + &:hover { + color: $primary; + } + } .small { font-size: 14px !important; .font-weight-bold { diff --git a/paragon/_overrides.scss b/paragon/_overrides.scss index 8fd8ed7b..87f7fa1c 100644 --- a/paragon/_overrides.scss +++ b/paragon/_overrides.scss @@ -18,6 +18,9 @@ html { // detail page #root { + .x-small { + font-size: 14px; + } nav[aria-label=breadcrumb] { max-width: 100% !important; flex: 0 0 100% !important; @@ -79,6 +82,7 @@ html { } } button { + height: auto; padding: 5px; border: 1px solid #D1D5DB !important; position: relative; @@ -239,6 +243,7 @@ html { border-top: none !important; } .sequence-navigation-tabs { + overflow-y: hidden; button { border-top: none; &.complete { diff --git a/themes/dark/_extras.scss b/themes/dark/_extras.scss index a2ef2bc5..a74e1214 100644 --- a/themes/dark/_extras.scss +++ b/themes/dark/_extras.scss @@ -1014,7 +1014,7 @@ svg { #courseTabsNavigation { background: none; } - .btn-icon.btn-icon-primary.post-footer-icon-dimentions { + .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; From afe51de82be8f4217e0a19a7ec56e631f946be2d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Ctanveer65=E2=80=9D?= Date: Mon, 24 Jun 2024 15:25:26 +0500 Subject: [PATCH 13/26] fixes --- paragon/_header.scss | 1 + paragon/_learning.scss | 6 ++++++ themes/dark/_extras.scss | 1 + 3 files changed, 8 insertions(+) diff --git a/paragon/_header.scss b/paragon/_header.scss index 8ef1a404..f4ba5b7e 100644 --- a/paragon/_header.scss +++ b/paragon/_header.scss @@ -316,6 +316,7 @@ font-size: 14px; font-weight: 500; line-height: 20px; + height: auto !important; @include media-breakpoint-down(md) { padding: 0 !important; background: none !important; diff --git a/paragon/_learning.scss b/paragon/_learning.scss index 1f50cedb..d0604c54 100644 --- a/paragon/_learning.scss +++ b/paragon/_learning.scss @@ -81,6 +81,12 @@ line-height: 24px; border-radius: 6px; border: none; + &.inline-link { + background: none; + padding: 0; + font-size: inherit; + line-height: inherit; + } } } .course-outline-tab { diff --git a/themes/dark/_extras.scss b/themes/dark/_extras.scss index a74e1214..901945d2 100644 --- a/themes/dark/_extras.scss +++ b/themes/dark/_extras.scss @@ -543,6 +543,7 @@ footer.tutor-container .copyright-site { 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 { From d11c3971fdf513cfde680a727511699e4d8e70e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Ctanveer65=E2=80=9D?= Date: Tue, 25 Jun 2024 14:21:32 +0500 Subject: [PATCH 14/26] fixes --- paragon/_footer.scss | 12 ++++++++++++ paragon/_progress.scss | 5 ++++- themes/dark/_extras.scss | 8 ++++++++ 3 files changed, 24 insertions(+), 1 deletion(-) diff --git a/paragon/_footer.scss b/paragon/_footer.scss index ca9ee949..1b64ce4d 100644 --- a/paragon/_footer.scss +++ b/paragon/_footer.scss @@ -428,4 +428,16 @@ footer.tutor-container { width: 20px; } } +} +#course-list-active-filters { + .pgn__chip.pgn__chip-light { + background: $primary; + * { + color: white; + fill: white; + } + } + .btn.btn-link { + font-size: 14px; + } } \ No newline at end of file diff --git a/paragon/_progress.scss b/paragon/_progress.scss index b93e9f69..3141d03f 100644 --- a/paragon/_progress.scss +++ b/paragon/_progress.scss @@ -62,6 +62,9 @@ } .pgn__card-section { padding-top: 0; + &.small { + font-size: 16px; + } } .btn.btn-outline-brand { padding: 7px 13px !important; @@ -77,7 +80,7 @@ } section.mb-4.x-small { background-color: $primary-light; - font-size: 16px; + font-size: 16px !important; border-radius: 8px; padding: 20px; ul { diff --git a/themes/dark/_extras.scss b/themes/dark/_extras.scss index 901945d2..6c38df8c 100644 --- a/themes/dark/_extras.scss +++ b/themes/dark/_extras.scss @@ -1327,4 +1327,12 @@ div[role=heading].h2 + .list-unstyled.m-0.mt-4.pt-2 { } } } +} +#course-list-active-filters { + .pgn__chip.pgn__chip-light { + * { + color: $btn-color; + fill: $btn-color; + } + } } \ No newline at end of file From 160af5dd2e71b9d5c19d5d66c231af2e4bd4e5d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Ctanveer65=E2=80=9D?= Date: Thu, 27 Jun 2024 12:23:58 +0500 Subject: [PATCH 15/26] fixes --- themes/dark/_extras.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/themes/dark/_extras.scss b/themes/dark/_extras.scss index 6c38df8c..bb1e1415 100644 --- a/themes/dark/_extras.scss +++ b/themes/dark/_extras.scss @@ -1335,4 +1335,9 @@ div[role=heading].h2 + .list-unstyled.m-0.mt-4.pt-2 { fill: $btn-color; } } +} +section[data-testid=sidebar-NOTIFICATIONS] { + &.border-light-400 { + border-color: $primary-light !important; + } } \ No newline at end of file From 15f93965b12d2ab8fb6391bba0916208eddfef89 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Ctanveer65=E2=80=9D?= Date: Mon, 1 Jul 2024 11:05:02 +0500 Subject: [PATCH 16/26] update dark theme --- paragon/_extras.scss | 1351 +++++++++++++++++++++++++++++++++++++++ paragon/_overrides.scss | 3 + paragon/_progress.scss | 2 +- paragon/_variables.scss | 13 + 4 files changed, 1368 insertions(+), 1 deletion(-) diff --git a/paragon/_extras.scss b/paragon/_extras.scss index e69de29b..8c14ba7f 100644 --- a/paragon/_extras.scss +++ b/paragon/_extras.scss @@ -0,0 +1,1351 @@ +@media (prefers-color-scheme: dark) { + body { + color: $text-color !important; + background: $body-bg !important; + * { + accent-color: $primary; + } + } + a { + color: $primary; + } + .text-muted { + 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; + } + #password-requirement-left .arrow:before { + border-left-color: $light-overlay !important; + } + #password-requirement-top .arrow:before { + border-top-color: $light-overlay !important; + } + .tooltip .tooltip-inner { + background: $light-overlay !important; + color: $text-color !important; + } + .text-gray-700 { + color: $text-color-primary !important; + } + .bg-white { + background: $body-bg !important; + } + .alert-warning { + background: $primary-light; + } + .alert-light { + background: $primary-light; + color: $text-color; + } + .bg-gray-100 { + background: $primary-light !important; + } + .btn-outline-dark { + color: #fff !important; + border-color: #fff !important; + background: none !important; + } + div[data-testid=instructor-toolbar] { + .bg-primary { + background: $primary-light !important; + } + } + .alert-info { + background: $primary-light; + .alert-icon { + svg { + path { + fill: $danger; + } + } + } + } + .text-success { + color: $success !important; + } + .bs-tooltip-top .arrow:before { + 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-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-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__body-nav-item--active { + background: none; + color: $text-color; + border-color: $primary; + } + } + } + .tox-tinymce { + 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; + } + } + } + } + .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; + 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; + } + } + } + } + .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; + } + } + .react-loading-skeleton { + --base-color: #36383B; + --highlight-color: #000; + } + .pgn__pageBanner__accentA { + background: $primary-light !important; + color: $text-color !important; + button { + color: $text-color !important; + } + } + .dropdown-menu { + background: $light-overlay; + color: $text-color; + } + a.course-card-title { + color: $text-color; + } + .text-dark-500 { + color: $text-color !important; + } + .text-gray-500 { + color: $text-color-primary !important; + } + #root { + .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; + } + .text-body { + color: $text-color !important; + } + .form-control { + background: none !important; + border-color: $border-color; + color: $text-color; + &.is-invalid { + border-color: $danger !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; + } + #main-content{ + .btn-brand { + color: #112F6B; + } + .alert-danger, .alert-success { + background: $light-overlay; + a { + background: none !important; + padding: 0 !important; + } + } + } + } + .bg-primary-400 { + h1 { + color: $text-color !important; + .text-accent-a { + color: $text-color !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; + } + .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; ; + } + } + } + } + .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; + } + } + .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; + } + &:active { + background: transparent !important; + } + } + } + } + #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; + } + } + } + } + } + } + } + } + } + #no-courses-content-view { + 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__modal-close-container { + button { + color: $text-color; + background: none; + } + } + } + footer.tutor-container .copyright-site { + 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; + } + } + } + } + } + #root .alert.alert-success { + 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; + } + } + } + } + .btn-outline-primary:hover { + 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 + } + } + } + } + .pgn__modal-backdrop { + background: #393939; + opacity: .9; + } + .pgn__modal-header { + background: none; + } + .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; + } + } + } + } + a.discussion-post { + 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; + } + } + #paragon-portal-root .new-user-tour-dialog { + .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__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; + } + } + } + .pgn__modal.pgn__modal-default { + .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; + } + } + } + } + } + + .sequence-navigation .btn { + border-color: $primary-light !important; + color: $text-color !important; + } + .sequence { + border-color: $primary-light !important; + } + #root { + .sequence-container { + .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; + } + } + } + } + } + #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; + } + } + } + .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; ; + } + } + } + } + } + .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 { + color: $btn-color; + } + } + } + form { + >p { + button { + color: $btn-color; + &.btn-outline-primary { + background: none !important; + color: $text-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; + } + } + } + } + } + .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); + } + } + .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; + } + } + } + } + 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; + } + } + // progress page style + svg { + circle.donut-hole { + fill: transparent !important; + } + } + .grade-bar { + .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; + } + } + } + .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; + } + } + } + #non-passing-grade-tooltip { + .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; + } + } + .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; + } + } + #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; + } + } + + } + } + .btn.btn-brand { + color: $btn-color; + } + } + #root .header-action-bar + .d-flex.flex-row.position-relative { + .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; + } + } + + } + .comments-sort { + button.btn.btn-tertiary { + border: 1px solid $text-color; + background: none !important; + color: $text-color; + } + } + .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; + } + .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; + } + } + } + } + } + } + .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; + &.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; + } + } + } + } + } + } + .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 { + 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; + } + } + } + #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; + } + input::placeholder { + opacity: .9; + color: $text-color; + } + * { + scrollbar-color: $text-color $body-bg; + } + .bg-success-100 { + background: #292A2C !important; + } + #root { + .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__modal-body-content { + .alert-warning { + background: none !important; + } + .form-control { + background: none !important; + border: 1px solid $border-color; + color: $text-color; + } + } + .pgn__card-header-title-md { + color: $text-color !important; + } + .popover { + background: $primary-light; + color: $text-color; + * { + color: $text-color; + } + &.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; + } + button.mr-3.btn.btn-link.btn-inline { + color: $primary !important; + } + button.p-2.btn.btn-inline { + color: $text-color !important; + } + .sequence-navigation .btn.complete { + 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; + } + } + } + } + } + } + } + } + #course-list-active-filters { + .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; + } + } +} \ No newline at end of file diff --git a/paragon/_overrides.scss b/paragon/_overrides.scss index 87f7fa1c..8ccb8a27 100644 --- a/paragon/_overrides.scss +++ b/paragon/_overrides.scss @@ -15,6 +15,9 @@ html { padding-left: 15px !important; padding-right: 15 !important; } +#root .btn:before { + border-color: transparent !important; +} // detail page #root { diff --git a/paragon/_progress.scss b/paragon/_progress.scss index 3141d03f..cc09cdda 100644 --- a/paragon/_progress.scss +++ b/paragon/_progress.scss @@ -146,7 +146,7 @@ #weighted-grade-summary.small { color: $primary !important; font-weight: 600 !important; - font-size: 13px !important; + font-size: 14px !important; } } } diff --git a/paragon/_variables.scss b/paragon/_variables.scss index 46a94577..eb3300b9 100644 --- a/paragon/_variables.scss +++ b/paragon/_variables.scss @@ -6,3 +6,16 @@ $text-color-primary: #515661; $text-color-light: #515661; @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); +@media (prefers-color-scheme: dark) { + $primary: #AEC7F6; + $primary-light: #292A2C; + $light-dark: #374151; + $text-color: #F8F8F8; + $text-color-primary: #DDDFE2; + $border-color: #777792; + $light-overlay: #36383B; + $danger: #FFA07A; + $success: #54CF5E; + $btn-color: #112F6B; + $body-bg:#0D0D0E; +} \ No newline at end of file From 5fbeecaff587feddf11545d40242e9b3aec3a222 Mon Sep 17 00:00:00 2001 From: hinakhadim Date: Thu, 4 Jul 2024 11:55:27 +0500 Subject: [PATCH 17/26] merge: merge tanveer/brwoser changes into tanveer/indigo --- paragon/_extras.scss | 1351 -------------------------------------- paragon/_variables.scss | 14 - themes/dark/_extras.scss | 22 +- 3 files changed, 14 insertions(+), 1373 deletions(-) delete mode 100644 paragon/_extras.scss diff --git a/paragon/_extras.scss b/paragon/_extras.scss deleted file mode 100644 index 8c14ba7f..00000000 --- a/paragon/_extras.scss +++ /dev/null @@ -1,1351 +0,0 @@ -@media (prefers-color-scheme: dark) { - body { - color: $text-color !important; - background: $body-bg !important; - * { - accent-color: $primary; - } - } - a { - color: $primary; - } - .text-muted { - 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; - } - #password-requirement-left .arrow:before { - border-left-color: $light-overlay !important; - } - #password-requirement-top .arrow:before { - border-top-color: $light-overlay !important; - } - .tooltip .tooltip-inner { - background: $light-overlay !important; - color: $text-color !important; - } - .text-gray-700 { - color: $text-color-primary !important; - } - .bg-white { - background: $body-bg !important; - } - .alert-warning { - background: $primary-light; - } - .alert-light { - background: $primary-light; - color: $text-color; - } - .bg-gray-100 { - background: $primary-light !important; - } - .btn-outline-dark { - color: #fff !important; - border-color: #fff !important; - background: none !important; - } - div[data-testid=instructor-toolbar] { - .bg-primary { - background: $primary-light !important; - } - } - .alert-info { - background: $primary-light; - .alert-icon { - svg { - path { - fill: $danger; - } - } - } - } - .text-success { - color: $success !important; - } - .bs-tooltip-top .arrow:before { - 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-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-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__body-nav-item--active { - background: none; - color: $text-color; - border-color: $primary; - } - } - } - .tox-tinymce { - 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; - } - } - } - } - .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; - 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; - } - } - } - } - .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; - } - } - .react-loading-skeleton { - --base-color: #36383B; - --highlight-color: #000; - } - .pgn__pageBanner__accentA { - background: $primary-light !important; - color: $text-color !important; - button { - color: $text-color !important; - } - } - .dropdown-menu { - background: $light-overlay; - color: $text-color; - } - a.course-card-title { - color: $text-color; - } - .text-dark-500 { - color: $text-color !important; - } - .text-gray-500 { - color: $text-color-primary !important; - } - #root { - .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; - } - .text-body { - color: $text-color !important; - } - .form-control { - background: none !important; - border-color: $border-color; - color: $text-color; - &.is-invalid { - border-color: $danger !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; - } - #main-content{ - .btn-brand { - color: #112F6B; - } - .alert-danger, .alert-success { - background: $light-overlay; - a { - background: none !important; - padding: 0 !important; - } - } - } - } - .bg-primary-400 { - h1 { - color: $text-color !important; - .text-accent-a { - color: $text-color !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; - } - .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; ; - } - } - } - } - .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; - } - } - .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; - } - &:active { - background: transparent !important; - } - } - } - } - #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; - } - } - } - } - } - } - } - } - } - #no-courses-content-view { - 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__modal-close-container { - button { - color: $text-color; - background: none; - } - } - } - footer.tutor-container .copyright-site { - 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; - } - } - } - } - } - #root .alert.alert-success { - 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; - } - } - } - } - .btn-outline-primary:hover { - 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 - } - } - } - } - .pgn__modal-backdrop { - background: #393939; - opacity: .9; - } - .pgn__modal-header { - background: none; - } - .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; - } - } - } - } - a.discussion-post { - 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; - } - } - #paragon-portal-root .new-user-tour-dialog { - .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__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; - } - } - } - .pgn__modal.pgn__modal-default { - .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; - } - } - } - } - } - - .sequence-navigation .btn { - border-color: $primary-light !important; - color: $text-color !important; - } - .sequence { - border-color: $primary-light !important; - } - #root { - .sequence-container { - .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; - } - } - } - } - } - #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; - } - } - } - .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; ; - } - } - } - } - } - .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 { - color: $btn-color; - } - } - } - form { - >p { - button { - color: $btn-color; - &.btn-outline-primary { - background: none !important; - color: $text-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; - } - } - } - } - } - .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); - } - } - .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; - } - } - } - } - 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; - } - } - // progress page style - svg { - circle.donut-hole { - fill: transparent !important; - } - } - .grade-bar { - .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; - } - } - } - .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; - } - } - } - #non-passing-grade-tooltip { - .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; - } - } - .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; - } - } - #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; - } - } - - } - } - .btn.btn-brand { - color: $btn-color; - } - } - #root .header-action-bar + .d-flex.flex-row.position-relative { - .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; - } - } - - } - .comments-sort { - button.btn.btn-tertiary { - border: 1px solid $text-color; - background: none !important; - color: $text-color; - } - } - .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; - } - .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; - } - } - } - } - } - } - .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; - &.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; - } - } - } - } - } - } - .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 { - 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; - } - } - } - #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; - } - input::placeholder { - opacity: .9; - color: $text-color; - } - * { - scrollbar-color: $text-color $body-bg; - } - .bg-success-100 { - background: #292A2C !important; - } - #root { - .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__modal-body-content { - .alert-warning { - background: none !important; - } - .form-control { - background: none !important; - border: 1px solid $border-color; - color: $text-color; - } - } - .pgn__card-header-title-md { - color: $text-color !important; - } - .popover { - background: $primary-light; - color: $text-color; - * { - color: $text-color; - } - &.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; - } - button.mr-3.btn.btn-link.btn-inline { - color: $primary !important; - } - button.p-2.btn.btn-inline { - color: $text-color !important; - } - .sequence-navigation .btn.complete { - 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; - } - } - } - } - } - } - } - } - #course-list-active-filters { - .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; - } - } -} \ No newline at end of file diff --git a/paragon/_variables.scss b/paragon/_variables.scss index eb3300b9..250a8fc8 100644 --- a/paragon/_variables.scss +++ b/paragon/_variables.scss @@ -5,17 +5,3 @@ $text-color: #111827; $text-color-primary: #515661; $text-color-light: #515661; @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); - -@media (prefers-color-scheme: dark) { - $primary: #AEC7F6; - $primary-light: #292A2C; - $light-dark: #374151; - $text-color: #F8F8F8; - $text-color-primary: #DDDFE2; - $border-color: #777792; - $light-overlay: #36383B; - $danger: #FFA07A; - $success: #54CF5E; - $btn-color: #112F6B; - $body-bg:#0D0D0E; -} \ No newline at end of file diff --git a/themes/dark/_extras.scss b/themes/dark/_extras.scss index bb1e1415..fbd25040 100644 --- a/themes/dark/_extras.scss +++ b/themes/dark/_extras.scss @@ -10,7 +10,7 @@ a { } .text-muted { color: $text-color; - } +} html { background: $body-bg !important; } @@ -185,8 +185,8 @@ div[data-testid=instructor-toolbar] { .react-loading-skeleton { --base-color: #36383B; --highlight-color: #000; - } - .pgn__pageBanner__accentA { +} +.pgn__pageBanner__accentA { background: $primary-light !important; color: $text-color !important; button { @@ -341,7 +341,7 @@ a.course-card-title { } .nav-small-menu{ background: #454545; - a { + a { color: $text-color; &:before { display: none; @@ -545,7 +545,7 @@ footer.tutor-container .copyright-site { #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 { +.course-title-lockup { .nav-course { a { color: $text-color; @@ -556,7 +556,7 @@ footer.tutor-container .copyright-site { } } } - } +} } #root .alert.alert-success { background: $primary-light; @@ -880,7 +880,7 @@ a.discussion-post { &:after { color: $btn-color } - + } } } @@ -1136,6 +1136,11 @@ svg { padding: 7px 11px !important; font-size: 12px; font-weight: 500; + &.btn-outline-primary { + background: none !important; + color: $primary !important; + border-color: $primary !important; + } } .font-style.d-flex.flex-row { @include media-breakpoint-down(sm) { @@ -1172,6 +1177,7 @@ svg { .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; @@ -1336,7 +1342,7 @@ div[role=heading].h2 + .list-unstyled.m-0.mt-4.pt-2 { } } } -section[data-testid=sidebar-NOTIFICATIONS] { +section[data-testid=sidebar-NOTIFICATIONS], section[data-testid=sidebar-DISCUSSIONS] { &.border-light-400 { border-color: $primary-light !important; } From 0c019eb9458c2e6be0908d124372374c32d9535e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Ctanveer65=E2=80=9D?= Date: Thu, 4 Jul 2024 19:22:00 +0500 Subject: [PATCH 18/26] fixs --- paragon/_extras.scss | 0 paragon/_overrides.scss | 88 +++++++++++++++++++++++++++++++++++++++- paragon/_progress.scss | 2 +- themes/dark/_extras.scss | 47 +++++++++++++++++++++ 4 files changed, 134 insertions(+), 3 deletions(-) create mode 100644 paragon/_extras.scss diff --git a/paragon/_extras.scss b/paragon/_extras.scss new file mode 100644 index 00000000..e69de29b diff --git a/paragon/_overrides.scss b/paragon/_overrides.scss index 8ccb8a27..6ec2d55f 100644 --- a/paragon/_overrides.scss +++ b/paragon/_overrides.scss @@ -147,6 +147,90 @@ html { } } } + .w-100.d-flex.align-items-center { + div.d-flex.ml-auto { + position: relative; + padding: 0 0 10px; + .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; + } + } + } + } + } #courseware-sequenceNavigation { @media only screen and (max-width: 576px) { width: calc(100% - 92px) !important; @@ -155,7 +239,7 @@ html { position: absolute; right: 0; top: 9px; - .mt-3 { + .mt-3, .ml-1 { margin: 0 !important; border: none !important; &:first-child { @@ -189,7 +273,7 @@ html { width: 21px !important; height: 21px !important; } - span { + span.pgn__icon { box-sizing: border-box; position: relative; display: block; diff --git a/paragon/_progress.scss b/paragon/_progress.scss index cc09cdda..a3fd6a12 100644 --- a/paragon/_progress.scss +++ b/paragon/_progress.scss @@ -38,7 +38,7 @@ padding: 10px 15px !important; background: $primary-light !important; .h4 { - font-size: 13px; + font-size: 14px; color: $primary; font-weight: 600; } diff --git a/themes/dark/_extras.scss b/themes/dark/_extras.scss index fbd25040..47b57eea 100644 --- a/themes/dark/_extras.scss +++ b/themes/dark/_extras.scss @@ -719,9 +719,56 @@ a.discussion-post { } .sequence { border-color: $primary-light !important; + border-top: 1px solid $primary-light !important; } #root { .sequence-container { + .outline-sidebar-wrapper { + .outline-sidebar-heading-wrapper.bg-light-200 { + border-color: $primary-light !important; + background: $primary-light !important; + button.outline-sidebar-toggle-btn { + background: $primary !important; + svg { + path { + fill: $btn-color !important; + } + } + } + } + ol#outline-sidebar-outline { + background: $primary-light !important; + .collapsible-card-lg { + background: $primary-light !important; + } + li.bg-info-100 { + background: $body-bg !important; + } + a.text-gray-700 { + color: $text-color !important; + &:hover, &:focus { + color: $text-color !important; + } + } + button.bg-info-100.btn { + background: $body-bg !important; + color: $text-color !important; + } + button.btn { + &:hover { + background: $body-bg !important; + color: $text-color !important; + } + .pgn__icon { + svg { + path { + fill: $text-color !important; + } + } + } + } + } + } .sequence { #courseware-sequenceNavigation { .sequence-navigation-tabs { From e6d580c958dc74c3640dca88de965b529c79ff23 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Ctanveer65=E2=80=9D?= Date: Fri, 5 Jul 2024 10:37:11 +0500 Subject: [PATCH 19/26] update styling --- themes/dark/_extras.scss | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/themes/dark/_extras.scss b/themes/dark/_extras.scss index 47b57eea..4673e04b 100644 --- a/themes/dark/_extras.scss +++ b/themes/dark/_extras.scss @@ -723,6 +723,18 @@ a.discussion-post { } #root { .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-light !important; @@ -738,6 +750,11 @@ a.discussion-post { } ol#outline-sidebar-outline { background: $primary-light !important; + .collapsible-trigger { + &:hover { + background: $body-bg !important; + } + } .collapsible-card-lg { background: $primary-light !important; } @@ -748,6 +765,7 @@ a.discussion-post { color: $text-color !important; &:hover, &:focus { color: $text-color !important; + background: $body-bg !important; } } button.bg-info-100.btn { From deb30f61766b8a8fe410304c2cc75123f309f1e2 Mon Sep 17 00:00:00 2001 From: hinakhadim Date: Fri, 5 Jul 2024 12:08:08 +0500 Subject: [PATCH 20/26] fix: sidebar border color --- themes/dark/_extras.scss | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/themes/dark/_extras.scss b/themes/dark/_extras.scss index 4673e04b..28da97e2 100644 --- a/themes/dark/_extras.scss +++ b/themes/dark/_extras.scss @@ -749,15 +749,24 @@ a.discussion-post { } } ol#outline-sidebar-outline { - background: $primary-light !important; + background: transparent !important; + margin-top: 0; .collapsible-trigger { &:hover { background: $body-bg !important; } } + li{ + border-top: 1px solid $text-color; + } .collapsible-card-lg { background: $primary-light !important; } + li.course-sidebar-section { + background: $primary-light !important; + border: 1px solid $text-color-primary; + } + li.bg-info-100 { background: $body-bg !important; } From f6765f51269e2d2bcfe5e0bf6c95bb648e032f54 Mon Sep 17 00:00:00 2001 From: hinakhadim Date: Fri, 5 Jul 2024 13:26:51 +0500 Subject: [PATCH 21/26] fix: sidebar border color --- themes/dark/_extras.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/themes/dark/_extras.scss b/themes/dark/_extras.scss index 28da97e2..4e23b885 100644 --- a/themes/dark/_extras.scss +++ b/themes/dark/_extras.scss @@ -752,19 +752,20 @@ a.discussion-post { background: transparent !important; margin-top: 0; .collapsible-trigger { + border-top: 1px solid $text-color; &:hover { background: $body-bg !important; } } li{ - border-top: 1px solid $text-color; + 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; + border: 1px solid $text-color-primary !important; } li.bg-info-100 { From 77564868f919fadca262b723c121c31df5fec0ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Ctanveer65=E2=80=9D?= Date: Fri, 5 Jul 2024 14:45:49 +0500 Subject: [PATCH 22/26] update button style --- themes/dark/_extras.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/themes/dark/_extras.scss b/themes/dark/_extras.scss index 4e23b885..c1205cd1 100644 --- a/themes/dark/_extras.scss +++ b/themes/dark/_extras.scss @@ -1211,11 +1211,11 @@ svg { padding: 7px 11px !important; font-size: 12px; font-weight: 500; - &.btn-outline-primary { - background: none !important; - color: $primary !important; - border-color: $primary !important; - } + } + .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) { From fa36c72ece0911dec7b6e4712058159b4cfd74b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Ctanveer65=E2=80=9D?= Date: Mon, 8 Jul 2024 10:16:33 +0500 Subject: [PATCH 23/26] fixes --- themes/dark/_extras.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/themes/dark/_extras.scss b/themes/dark/_extras.scss index c1205cd1..d4835a8e 100644 --- a/themes/dark/_extras.scss +++ b/themes/dark/_extras.scss @@ -722,6 +722,18 @@ a.discussion-post { border-top: 1px solid $primary-light !important; } #root { + .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; From 0e7e78aae264f91e50ecf1372e20f4f89aab02dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Ctanveer65=E2=80=9D?= Date: Mon, 8 Jul 2024 13:39:01 +0500 Subject: [PATCH 24/26] fixes --- paragon/_overrides.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/paragon/_overrides.scss b/paragon/_overrides.scss index 6ec2d55f..788fb418 100644 --- a/paragon/_overrides.scss +++ b/paragon/_overrides.scss @@ -151,7 +151,7 @@ html { div.d-flex.ml-auto { position: relative; padding: 0 0 10px; - .ml-1 { + .ml-1, >div { margin: 0 !important; border: none !important; &:first-child { From e30861d6e1fc17825c5de9d89a04d2d1fe9a9ac2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Ctanveer65=E2=80=9D?= Date: Mon, 8 Jul 2024 14:20:40 +0500 Subject: [PATCH 25/26] fixes --- themes/dark/_extras.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/themes/dark/_extras.scss b/themes/dark/_extras.scss index d4835a8e..5f7ad129 100644 --- a/themes/dark/_extras.scss +++ b/themes/dark/_extras.scss @@ -749,7 +749,7 @@ a.discussion-post { } .outline-sidebar-wrapper { .outline-sidebar-heading-wrapper.bg-light-200 { - border-color: $primary-light !important; + border-color: $primary !important; background: $primary-light !important; button.outline-sidebar-toggle-btn { background: $primary !important; @@ -762,7 +762,7 @@ a.discussion-post { } ol#outline-sidebar-outline { background: transparent !important; - margin-top: 0; + margin-top: 6px; .collapsible-trigger { border-top: 1px solid $text-color; &:hover { From f32d51a37cd92997a036c6aa7e36b6ee9b949eaa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Ctanveer65=E2=80=9D?= Date: Mon, 8 Jul 2024 17:11:13 +0500 Subject: [PATCH 26/26] fixes --- themes/dark/_extras.scss | 13 ++++++++----- themes/dark/_variables.scss | 1 + 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/themes/dark/_extras.scss b/themes/dark/_extras.scss index 5f7ad129..e9c7154f 100644 --- a/themes/dark/_extras.scss +++ b/themes/dark/_extras.scss @@ -751,6 +751,9 @@ a.discussion-post { .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 { @@ -766,7 +769,7 @@ a.discussion-post { .collapsible-trigger { border-top: 1px solid $text-color; &:hover { - background: $body-bg !important; + background: $hover-color !important; } } li{ @@ -781,22 +784,22 @@ a.discussion-post { } li.bg-info-100 { - background: $body-bg !important; + background: $hover-color !important; } a.text-gray-700 { color: $text-color !important; &:hover, &:focus { color: $text-color !important; - background: $body-bg !important; + background: $hover-color !important; } } button.bg-info-100.btn { - background: $body-bg !important; + background: $hover-color !important; color: $text-color !important; } button.btn { &:hover { - background: $body-bg !important; + background: $hover-color !important; color: $text-color !important; } .pgn__icon { diff --git a/themes/dark/_variables.scss b/themes/dark/_variables.scss index 801850e9..8c5de24b 100644 --- a/themes/dark/_variables.scss +++ b/themes/dark/_variables.scss @@ -10,3 +10,4 @@ $danger: #FFA07A; $success: #54CF5E; $btn-color: #112F6B; $body-bg:#0D0D0E; +$hover-color: #383938;