diff --git a/src/app/client/src/app/modules/dashboard/components/report/report.component.scss b/src/app/client/src/app/modules/dashboard/components/report/report.component.scss
index 440b06c9e3b8b883ebbc5db50b4e2b91a0b699b1..7554f86f29afa2f3dfa41f0a4dca21c52719af70 100644
--- a/src/app/client/src/app/modules/dashboard/components/report/report.component.scss
+++ b/src/app/client/src/app/modules/dashboard/components/report/report.component.scss
@@ -1,347 +1,91 @@
-@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
+@use "~@project-sunbird/sb-styles/assets/mixins/mixins"as *;
+@use 'pages/content-header'as *;
+@use 'pages/reports'as *;
-.sb-graph-section{
-
- box-shadow: 0 calculateRem(2px) calculateRem(7px) 0 rgba(var(--rc-rgba-black), 0.16);
- background: var(--sb-graph-section-bg);
- border: 0.0625rem solid var(--rc-dddddd);
- .sb-table-fixed .sb-table tbody td, .sb-table-fixed .sb-table-body td {
- text-overflow: initial;
- overflow: initial;
- white-space: unset;
- }
-
-}
-.sb-btn-normal i::after {
- content: "\f019";
- font-size: calculateRem(13px);
- color: var(--white);
-}
-.no-bg {
- background:none;
+.sb-graph-section {
+ background: var(--sb-graph-section-bg);
}
-.dashboard-body-scroll{
- display: flex;
- align-items: flex-start;
-}
-
-
-.hawkeye-label {
- line-height: normal;
- border-radius: calculateRem(32px);
- vertical-align: middle;
+.report-description {
+ margin-right: calculateRem(0px) !important;
}
-.sb-btn-normal i::after {
- content: "" !important;
- font-size: 0.8125rem;
- color: var(--white);
-}
-.sb-sideview-tab-container{
- background: inherit;
+.sb-graph-section.global-filter {
+ background-color: var(--sbt-compt-bg) !important;
}
-.content-header {
- // background: var(--rc-FAFAFA);
- min-height: calculateRem(14px);
- &__content{
- display:flex;
- align-items: center;
- justify-content: space-between;
- @include respond-below(sm) {
- display: block;
- }
- }
- &__title {
- color: var(--primary-400);
- font-size: calculateRem(18px);
- }
-
- &__info {
- color: var(--gray-800);
- font-size: calculateRem(14px);
- }
-
- .dot-divider {
- width: 0.25rem;
- height: 0.25rem;
- border-radius: 100%;
- background-color: var(--gray-800);
- display: inline-block;
- margin: 0px 0.5rem;
- }
-
- @include respond-below(sm) {
- &__buttons {
- margin-top: calculateRem(8px);
- }
- }
- }
-
-::ng-deep{
- .sb-field .ui.selection.dropdown {
- position: relative;
- z-index: 2;
- }
- .sb-hawkeye-modal.sb-modal {
- .ui.modal{
- margin: 0 auto 0 !important;
- top: 50%;
- transform: translateY(-50%);
- }
- }
+.select-filter-label {
+ padding-left: calculateRem(20px);
+ font-size: calculateRem(17px);
}
-.sbt-report-btns-panel{
- margin-top: calculateRem(1px);
- background-color:#E9E8D9 !important;
- border-radius: 0px !important;
+.sbt-report-btns-panel-new {
+ border-radius: 0px !important;
+ background: var(--sbt-body-bg) !important;
}
-.content-header__content {
- border-bottom: 1px solid #ccc;
- padding: 10px;
- align-items: flex-start !important;
- }
-.report-panel{
- @include respond-below(sm) {
- padding: 1rem;
- flex-direction: column;
- }
-}
-.report-description{
- flex: 1;
- margin-right: calculateRem(0px) !important;
- text-align: justify;
- @include respond-below(sm) {
- flex: auto;
- margin:0 0 1rem 0 !important;
- }
-}
-.sbt-report-tabs-panel{
- overflow: auto;
- padding-bottom: calculateRem(2px);
-}
-.sb-graph-section.global-filter {
- background-color: var(--sbt-compt-bg) !important;
-}
-.global-filter {
- // padding: calculateRem(24px);
- border-radius: calculateRem(4px);
- position: initial;
- // padding-bottom: 10px;
-}
-.global-filter {
- ::ng-deep {
- .form {
- .sb-prominent-filter {
- background: #E9E8D9 !important;
- }
- }
- }
- }
-
- .report-block {
- padding-top: 10px;
- padding-bottom: 10px;
- background-color:#E9E8D9 !important;
- margin-top:0px !important;
- border-radius: 0px 0px 24px 24px !important;
- }
- .select-filter-label {
- padding-left: 20px;
- font-family: "Noto Sans";
- font-size: 17px;
- }
- .sb-select-searchfilter {
- min-height:40px !important;
- padding:0.75rem 0.5rem !important;
- position:inside;
- widows: 311px !important;
- border-radius: 24px !important;
- border:1px #D7D7D7 solid !important;
- }
-// .sb-prominent-filter-field .ui.selection.dropdown .text {
-
-
-// }
- .ui.secondary.pointing.menu .item {
- font-size: 18px !important;
- color:#333333;
- opacity: 0.3;
- font-family: "Noto Sans";
- font-weight: 600;
-
- }
- .ui.secondary.pointing.menu .active.item {
- color: #024F9D !important;
- opacity: 1 !important;
- border-bottom-width : 4px !important;
- border-color: #024F9D !important;
- }
- .ui.secondary.pointing.menu {
- height: 72px !important;
- }
- .sbt-report-btns-panel-new {
- border-radius: 0px !important;
- background: #E9E8D9 !important;
- }
.label-success {
- color: green;
- padding-left: 10px;
- padding-right: 10px;
- font-size: 14px;
- font-weight: 300;
+ color: var(--success-color);
+ padding-left: calculateRem(10px);
+ padding-right: calculateRem(10px);
+ font-size: calculateRem(14px);
+ font-weight: 300;
}
+
.sb-label-primary-100 {
- background: none !important;
- font-size: 14px !important;
+ background: none !important;
+ font-size: calculateRem(14px) !important;
}
.label-warning {
- color: brown;
- padding-left: 10px;
- padding-right: 10px;
- font-size: 14px;
- font-weight: 300;
-}
-.back-btn-new {
- padding: 0px !important;
- height: 55px !important;
- width: 57px !important;
- border-radius: 50% !important;
- min-width: auto !important;
- background: #fff;
- box-shadow: var(--sbt-box-shadow-6px) !important;
-
-}
-
-.icon-back {
- height: 20px;
- width: 48px;
-
-}
-.icon-back .icon-svg--primary {
- fill: #333;
-}
-.icon-back {
- ::ng-deep {
- svg.icon {
- height: 20px;
- }
- }
+ color: var(--accessibility-red);
+ padding-left: calculateRem(10px);
+ padding-right: calculateRem(10px);
+ font-size: calculateRem(14px);
+ font-weight: 300;
}
.sbt-container {
- .reports-container {
- padding-top: calculateRem(16px);
- }
-
- .reports-content-header {
- border-radius: calculateRem(24px) !important;
- }
+ .reports-container {
+ padding-top: calculateRem(16px);
+ }
+
+ .reports-content-header {
+ border-radius: calculateRem(24px) !important;
+ }
}
.reports-content-header {
- background: var(--primary-0);
- box-shadow: var(--sbt-box-shadow-3px);
+ background: var(--primary-0);
+ box-shadow: var(--sbt-box-shadow-3px);
}
- .cc-player__btn-back {
- background: #E9E8D9 !important;
- }
-
-.sb-label-value {
- background: #ddd;
- border-radius: 16px;
- padding: 6px;
- box-shadow: var(--sbt-box-shadow-6px);
- margin-right: 10px;
-
-}
.table-view {
- background: #E9E8D9 !important;
+ background: var(--sbt-body-bg) !important;
}
-.sb-btn-tertiary {
- background: #fff;
- color:#024F9D;
- font-weight: 600;
-}
-.sb-btn-normal {
- min-width: 96px !important;
- font-weight: 500 !important;
- font-size: 15px !important;
- padding-left: 18px !important;
- padding-right: 18px !important;
-}
-.active-btn {
- padding-left: 19px !important;
- min-width: 113px !important;
-
- background-color: #024F9D !important;
- box-shadow: var(--sbt-box-shadow-6px) !important;
- ::ng-deep {
- .default .text {
- color: #fff !important;
- }
- }
-}
-
-.active-btn {
- ::ng-deep {
- color: #fff !important;
- font-weight: 500;
- }
-}
-
-.reset-filter-section {
- position: absolute;
- top: 10px;
-
-}
.reset-filter {
- padding-left: 20px !important;
- padding-right: 20px !important;
+ padding-left: calculateRem(20px) !important;
+ padding-right: calculateRem(20px) !important;
}
-.last-update {
- font-size: 13px !important;
- color: #333 !important;
- font-weight: 500;
- border-left: 1px solid #ccc;
- margin-left: 10px !important;
-}
+::ng-deep {
+ .mat-checkbox-layout .mat-checkbox-label {
+ white-space: normal !important;
+ }
-.filter-drop .ui.selection.dropdown {
- ::ng-deep {
- .text {
- color: #333 !important;
- padding-left: 10px;
- padding-right: 10px;
- }
- }
-}
-.sb-label-value {
- background-color: #F2F2EA !important;
+ .mat-checkbox-inner-container {
+ top: 0.25rem !important;
+ margin: inherit !important;
+ margin-right: 0.5rem !important;
+ }
}
-.main-container {
- padding: 0 1%;
-}
-.report-main-block {
- padding: 0 1%;
+.files-block {
+ background: var(--sbt-body-bg) !important;
+ margin: 0px !important;
+ border-radius: 0px 0px 24px 24px !important;
+ box-shadow: none;
+ border-top: calculateRem(1px) solid var(--gray-100);
}
-
-::ng-deep{
- .mat-checkbox-layout .mat-checkbox-label {
- white-space: normal !important;
- }
- .mat-checkbox-inner-container {
- top: 0.25rem !important;
- margin: inherit !important ;
- margin-right: 0.5rem !important;
- }
-}
\ No newline at end of file
diff --git a/src/app/client/src/app/modules/learn/components/course-consumption/course-player/course-player.component.scss b/src/app/client/src/app/modules/learn/components/course-consumption/course-player/course-player.component.scss
index 5d1f51a1ecf1a096b46e907538668b401fe34a7f..834306a34f5d82e2f487e0b665bcf9a0b94a59bf 100644
--- a/src/app/client/src/app/modules/learn/components/course-consumption/course-player/course-player.component.scss
+++ b/src/app/client/src/app/modules/learn/components/course-consumption/course-player/course-player.component.scss
@@ -1,6 +1,7 @@
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
@use "pages/course-player" as *;
@use "pages/kabab-menu" as *;
+@use 'pages/content-header' as *;
.course-list_title {
color: var(--gray-800);
@@ -9,25 +10,6 @@
line-height: calculateRem(24px);
}
-// content header bar
-.content-header {
- &__img {
- overflow: hidden;
- img {
- width: calculateRem(48px);
- }
- }
- &__title {
- color: var(--primary-color);
- font-size: calculateRem(18px);
- font-weight: bold;
- }
- &__info {
- color: var(--gray-800);
- font-size: calculateRem(14px);
- }
-}
-
.course-list-progress {
padding: calculateRem(16px);
&__title {
diff --git a/src/app/client/src/app/modules/public/module/course/components/course-consumption/public-course-player/public-course-player.component.scss b/src/app/client/src/app/modules/public/module/course/components/course-consumption/public-course-player/public-course-player.component.scss
index 436abbf0dd01f726f5f2f34f00a189810ef4d1ad..bccbe474b552b860f2ab48e83aed88df15dd7db9 100644
--- a/src/app/client/src/app/modules/public/module/course/components/course-consumption/public-course-player/public-course-player.component.scss
+++ b/src/app/client/src/app/modules/public/module/course/components/course-consumption/public-course-player/public-course-player.component.scss
@@ -1,5 +1,6 @@
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
@use "pages/course-player" as *;
+@use 'pages/content-header' as *;
.course-list_title {
color: var(--gray-800);
@@ -7,26 +8,6 @@
font-weight: bold;
line-height: calculateRem(24px);
}
-
-// content header bar
-.content-header {
- &__img {
- overflow: hidden;
- img {
- width: calculateRem(48px);
- }
- }
- &__title {
- color: var(--primary-color);
- font-size: calculateRem(18px);
- font-weight: bold;
- }
- &__info {
- color: var(--gray-800);
- font-size: calculateRem(14px);
- }
-}
-
.course-list-progress {
padding: calculateRem(16px);
&__title {
@@ -63,7 +44,6 @@
.chapter-box {
border-bottom: .0625rem solid var(--gray-100);
- // padding: calculateRem(16px);
border-radius: calculateRem(2px);
&:last-child{
border-bottom: 0px solid var(--gray-100);
diff --git a/src/app/client/src/app/modules/public/module/explore/components/explore-curriculum-courses/explore-curriculum-courses.component.scss b/src/app/client/src/app/modules/public/module/explore/components/explore-curriculum-courses/explore-curriculum-courses.component.scss
index 449635c947162706587866d07079371460ae2854..bcd62d61b4454820eab47a746c9ad8404aa3ee2d 100644
--- a/src/app/client/src/app/modules/public/module/explore/components/explore-curriculum-courses/explore-curriculum-courses.component.scss
+++ b/src/app/client/src/app/modules/public/module/explore/components/explore-curriculum-courses/explore-curriculum-courses.component.scss
@@ -1,29 +1,5 @@
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
-
-.content-header {
- // background: var(--rc-FAFAFA);
- min-height: 0.875rem;
-
- &__img {
- overflow: hidden;
- width: calculateRem(48px);
- height: calculateRem(48px);
-
- img {
- height: 100%;
- }
- }
-}
-
-.content-header__title {
- color: var(--primary-400);
- font-size: 1.125rem;
-}
-
-.content-header__info {
- color: var(--gray-800);
-}
-
+@use 'pages/content-header' as *;
.sbgrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(291.98px, 1fr));
diff --git a/src/app/client/src/app/modules/public/module/guest-profile/components/guest-profile/guest-profile.component.scss b/src/app/client/src/app/modules/public/module/guest-profile/components/guest-profile/guest-profile.component.scss
index 9fefcfb1b5abe8aa4929d61b4a23b8c0ca3ea04c..51e5c684eaffcf31d736875b39de01e9d65d6866 100644
--- a/src/app/client/src/app/modules/public/module/guest-profile/components/guest-profile/guest-profile.component.scss
+++ b/src/app/client/src/app/modules/public/module/guest-profile/components/guest-profile/guest-profile.component.scss
@@ -1,9 +1,5 @@
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
-
-.content-header__title {
- color: var(--primary-400);
- font-size: 1.125rem;
-}
+@use 'pages/content-header' as *;
.avatar-container {
width: calculateRem(98px);
height: calculateRem(98px);
diff --git a/src/app/client/src/app/modules/report/components/all-evidence/all-evidence.component.scss b/src/app/client/src/app/modules/report/components/all-evidence/all-evidence.component.scss
index 7ac27e81a55e55a152cfe8c125226e18a28ced15..4f5c5d6a256cfb722523d218ad7b006168cf1533 100644
--- a/src/app/client/src/app/modules/report/components/all-evidence/all-evidence.component.scss
+++ b/src/app/client/src/app/modules/report/components/all-evidence/all-evidence.component.scss
@@ -1,8 +1,8 @@
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.thumbnail-card {
- height: 98px;
- margin-top: 10px;
+ height: calculateRem(98px);
+ margin-top: calculateRem(10px);
display: inline;
justify-content: space-around;
align-items: center;
@@ -11,10 +11,10 @@
.evidence-modal {
.content {
height: 70vh;
- padding: 10px;
+ padding: calculateRem(10px);
overflow-y: auto;
background: var(--sb-modal-content-bg);
- border-radius: 24px;
+ border-radius: calculateRem(24px);
label{
color: var(--sb-prominent-filter-title);
}
@@ -29,22 +29,21 @@
}
.ui.secondary.pointing.menu .item {
- font-size: 16px !important;
- color: #333333;
+ font-size: calculateRem(16px) !important;
+ color: var(--gray-800);
opacity: 0.3;
- font-family: "Noto Sans";
font-weight: 600;
overflow: hidden;
}
.ui.secondary.pointing.menu .active.item {
- color: #024f9d !important;
+ color: var(--primary-color) !important;
opacity: 1 !important;
- border-bottom-width: 4px !important;
- border-color: #024f9d !important;
+ border-bottom-width: calculateRem(4px) !important;
+ border-color: var(--primary-color) !important;
overflow: hidden;
}
.ui.secondary.pointing.menu {
- height: 60px !important;
+ height: calculateRem(60px) !important;
overflow: hidden;
}
.sbt-report-btns-panel-new {
@@ -54,15 +53,15 @@
.report-block {
- padding-top: 10px;
+ padding-top: calculateRem(10px);
padding-bottom: 0px;
- margin-top:10px !important;
+ margin-top:calculateRem(10px) !important;
background-color: transparent;
color: var(--sb-text);
}
.item{
- margin-top: 15px;
+ margin-top: calculateRem(15px);
}
\ No newline at end of file
diff --git a/src/app/client/src/app/modules/report/components/report-view/report-view.component.scss b/src/app/client/src/app/modules/report/components/report-view/report-view.component.scss
index 3cab37fb32624b722c6f191816571d767d44d2e2..6453bdfa897518401df112d1fa171b27676f2c23 100644
--- a/src/app/client/src/app/modules/report/components/report-view/report-view.component.scss
+++ b/src/app/client/src/app/modules/report/components/report-view/report-view.component.scss
@@ -1,23 +1,16 @@
-@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
+@use "~@project-sunbird/sb-styles/assets/mixins/mixins"as *;
+@use 'pages/content-header'as *;
+@use 'pages/reports'as *;
.sb-graph-section {
position: relative;
z-index: 1;
- margin: 15px !important;
- border: calculateRem(1px) solid var(--rc-dddddd);
+ margin: calculateRem(15px) !important;
padding: calculateRem(24px);
margin-top: calculateRem(24px);
background-color: var(--sb-card-bg);
color: var(--sb-text);
- box-shadow: 0 calculateRem(2px) calculateRem(7px) 0
- rgba(var(--rc-rgba-black), 0.16);
border-radius: calculateRem(4px);
- .sb-table-fixed .sb-table tbody td,
- .sb-table-fixed .sb-table-body td {
- text-overflow: initial;
- overflow: initial;
- white-space: unset;
- }
}
.graph-section {
@@ -25,362 +18,64 @@
color: var(--sb-text);
}
-.sb-btn-normal i::after {
- content: "\f019";
- font-size: calculateRem(13px);
- color: var(--white);
-}
-.no-bg {
- background: none;
-}
-
-.dashboard-body-scroll {
- display: flex;
- align-items: flex-start;
-}
-
-.hawkeye-label {
- line-height: normal;
- border-radius: calculateRem(32px);
- vertical-align: middle;
-}
-
-.sb-btn-normal i::after {
- content: "" !important;
- font-size: 0.8125rem;
- color: var(--white);
-}
-.sb-sideview-tab-container {
- background: inherit;
-}
-
-.content-header {
- // background: var(--rc-FAFAFA);
- min-height: calculateRem(14px);
- &__content {
- display: flex;
- align-items: center;
- justify-content: space-between;
- @include respond-below(sm) {
- display: block;
- }
- }
- &__title {
- color: var(--primary-400);
- font-size: calculateRem(18px);
- }
-
- &__info {
- color: var(--gray-800);
- font-size: calculateRem(14px);
- }
-
- .dot-divider {
- width: 0.25rem;
- height: 0.25rem;
- border-radius: 100%;
- background-color: var(--gray-800);
- display: inline-block;
- margin: 0px 0.5rem;
- }
-
- @include respond-below(sm) {
- &__buttons {
- margin-top: calculateRem(8px);
- }
- }
-}
-
-::ng-deep {
- .sb-field .ui.selection.dropdown {
- color: #fff;
- position: relative;
- z-index: 2;
- }
- .sb-hawkeye-modal.sb-modal {
- .ui.modal {
- margin: 0 auto 0 !important;
- top: 50%;
- transform: translateY(-50%);
- }
- }
-}
-.sbt-report-btns-panel {
- margin-top: calculateRem(1px);
- background-color: #e9e8d9 !important;
- border-radius: 0px !important;
-}
-.content-header__content {
- border-bottom: 1px solid #ccc;
- padding: 10px;
- align-items: flex-start !important;
-}
-.report-panel {
- @include respond-below(sm) {
- padding: 1rem;
- flex-direction: column;
- }
-}
.report-description {
- flex: 1;
margin-left: 4rem !important;
- text-align: justify;
- font-size: 18px;
- @include respond-below(sm) {
- flex: auto;
- margin: 0 0 1rem 0 !important;
- }
-}
-.sbt-report-tabs-panel {
- overflow: auto;
- padding-bottom: calculateRem(2px);
}
+
.sb-graph-section.global-filter {
background-color: var(--sbt-compt-bg) !important;
}
-.global-filter {
- // padding: calculateRem(24px);
- border-radius: calculateRem(4px);
- position: initial;
- // padding-bottom: 10px;
-}
-.global-filter {
- ::ng-deep {
- .form {
- .sb-prominent-filter {
- background: #e9e8d9 !important;
- }
- }
- }
-}
+
.graph-section {
- // border-top: 1px solid #ccc !important;
- // padding-bottom: 10px !important;
- // background-color: #e9e8d9 !important;
background-color: var(--sbt-compt-bg) !important;
border-radius: 0px 0px 0px 0px !important;
margin-top: 0px !important;
- padding-top: 5px !important;
+ padding-top: calculateRem(5px) !important;
}
.ui.selection.dropdown {
color: var(--ui-dropdown-selection-icon) !important;
}
-.report-block {
- padding-top: 10px;
- padding-bottom: 10px;
- background-color: #e9e8d9 !important;
- margin-top: 0px !important;
- border-radius: 0px 0px 24px 24px !important;
-}
-.select-filter-label {
- padding-left: 20px;
- font-family: "Noto Sans";
- font-size: 17px;
-}
-.sb-select-searchfilter {
- min-height: 40px !important;
- padding: 0.75rem 0.5rem !important;
- position: inside;
- widows: 311px !important;
- border-radius: 24px !important;
- border: 1px #d7d7d7 solid !important;
-}
-// .sb-prominent-filter-field .ui.selection.dropdown .text {
-
-// }
-.ui.secondary.pointing.menu .item {
- font-size: 18px !important;
- color: #333333;
- opacity: 0.3;
- font-family: "Noto Sans";
- font-weight: 600;
-}
-.ui.secondary.pointing.menu .active.item {
- color: #024f9d !important;
- opacity: 1 !important;
- border-bottom-width: 4px !important;
- border-color: #024f9d !important;
-}
-.ui.secondary.pointing.menu {
- height: 72px !important;
-}
-.sbt-report-btns-panel-new {
- border-radius: 0px !important;
- background:var(--white) !important;
-}
.sb-field ::ng-deep {
.ui.selection.dropdown {
- color: #333 !important;
- font-size: 15px !important;
- min-height: 40px !important;
- border-radius: 24px !important;
- border: 1px #d7d7d7 solid !important;
- background-color: #fff;
+ color: var(--gray-800) !important;
+ font-size: calculateRem(15px) !important;
+ min-height: calculateRem(40px) !important;
+ border-radius: calculateRem(24px) !important;
+ border: calculateRem(1px) var(--rc-dddddd) solid !important;
+ background-color: var(--white);
}
}
-.label-success {
- color: green;
- padding-left: 10px;
- padding-right: 10px;
- font-size: 14px;
- font-weight: 300;
-}
-.sb-label-primary-100 {
- background: none !important;
- font-size: 14px !important;
-}
-
-.label-warning {
- color: brown;
- padding-left: 10px;
- padding-right: 10px;
- font-size: 14px;
- font-weight: 300;
-}
-.back-btn-new {
- padding: 0px !important;
- height: 55px !important;
- width: 57px !important;
- border-radius: 50% !important;
- min-width: auto !important;
- background: #fff;
- box-shadow: var(--sbt-box-shadow-6px) !important;
-}
.report-title {
- font-size: 22px;
+ font-size: calculateRem(22px);
color: var(--sb-prominent-filter-title);
- font-family: "Noto Sans";
- line-height: 24px;
+ line-height: calculateRem(24px);
font-weight: 500;
}
-.icon-back {
- height: 20px;
- width: 48px;
-}
-.icon-back .icon-svg--primary {
- fill: #333;
-}
-.icon-back {
- ::ng-deep {
- svg.icon {
- height: 20px;
- }
- }
-}
-.reports-content-header {
- border-radius: 24px !important;
- background: #e9e8d9 !important;
-}
-.cc-player__btn-back {
- background: #e9e8d9 !important;
+.reports-content-header {
+ border-radius: calculateRem(24px) !important;
+ background: var(--sbt-body-bg) !important;
}
.ui.dropdown.selection {
::ng-deep {
.dropdown.icon {
- color: #024f9d !important;
+ color: var(--primary-color) !important;
}
}
}
-.sb-label-value {
- background: #ddd;
- border-radius: 16px;
- padding: 6px;
- box-shadow: var(--sbt-box-shadow-6px);
- margin-right: 10px;
-}
-.table-view {
- background: #e9e8d9 !important;
-}
-
-.sb-btn-tertiary {
- background: #fff;
- color: #024f9d;
- font-weight: 600;
-}
-.sb-btn-normal {
- min-width: 96px !important;
- font-weight: 500 !important;
- font-size: 15px !important;
- padding-left: 18px !important;
- padding-right: 18px !important;
-}
-.active-btn {
- padding-left: 19px !important;
- min-width: 113px !important;
-
- background-color: #024f9d !important;
- box-shadow: var(--sbt-box-shadow-6px) !important;
- ::ng-deep {
- .default .text {
- color: #fff !important;
- }
- }
-}
-
-.active-btn {
- ::ng-deep {
- color: #fff !important;
- font-weight: 500;
- }
-}
-
-.reset-filter-section {
- position: absolute;
- top: 10px;
-}
-.reset-filter {
- padding-left: 20px !important;
- padding-right: 20px !important;
-}
-
-.last-update {
- font-size: 13px !important;
- color: #333 !important;
- font-weight: 500;
- border-left: 1px solid #ccc;
- margin-left: 10px !important;
-}
.sb-field .ui.selection.dropdown {
::ng-deep {
.text {
- color: #fff !important;
- padding-left: 5px;
- padding-right: 5px;
+ color: var(--white) !important;
+ padding: 0 calculateRem(5px);
}
}
}
-.filter-drop .ui.selection.dropdown {
- ::ng-deep {
- .text {
- color: #333 !important;
- padding-left: 10px;
- padding-right: 10px;
- }
- }
-}
-.sb-label-value {
- background-color: #f2f2ea !important;
-}
-.files-block {
- background: #e9e8d9 !important;
- margin: 0px !important;
- border-radius: 0px 0px 24px 24px !important;
- box-shadow: none;
- border-top: 1px solid #ccc;
-}
-
-.main-container {
- padding:0 1%;
-}
-.report-main-block {
- padding: 0 0;
-}
.chart-container {
display: block;
@@ -397,21 +92,19 @@
}
.thumbnail-card {
- height: 98px;
- margin-top: 5px;
+ height: calculateRem(98px);
+ margin-top: calculateRem(5px);
display: inline;
justify-content: space-around;
align-items: center;
}
.card-align {
- margin-top: 10px;
- // display: flex;
- // justify-content: flex-end;
+ margin-top: calculateRem(10px);
}
-.filter-modal-button{
- margin-top: 20px;
+.filter-modal-button {
+ margin-top: calculateRem(20px);
}
.sb-filter {
@@ -419,7 +112,7 @@
width: 100%;
height: 100vh;
min-height: 400px;
- background-color: #e9e8d9 !important;
+ background-color: var(--sbt-body-bg) !important;
padding: calculateRem(24px);
margin: 0 auto;
display: flex;
@@ -432,7 +125,6 @@
@include respond-above(sm) {
border-radius: calculateRem(8px);
max-width: calculateRem(1008px);
- // min-height: calculateRem(610px);
height: auto;
}
}
@@ -497,29 +189,12 @@
.filter-modal {
float: right;
- margin-bottom: 12px;
-}
-
-
-.add-entity-modal {
- .content {
- max-height: 60vh;
- label {
- color: var(--sb-prominent-filter-title);
- }
- }
- .footer {
- width: 100%;
- background: var(--sb-card-bg);
- border-top: none;
- display: flex;
- justify-content: flex-end;
- }
+ margin-bottom: calculateRem(12px);
}
input[type="checkbox"] {
background: var(--sb-card-bg);
- border: #ccc;
+ border: var(--gray-100);
}
.questions {
@@ -527,7 +202,7 @@ input[type="checkbox"] {
font-weight: 500;
}
-.ui.checkbox input.hidden + label {
+.ui.checkbox input.hidden+label {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
@@ -542,7 +217,6 @@ input[type="checkbox"] {
margin-right: 5px;
}
-
.dropdown {
position: relative;
display: inline-block;
@@ -559,11 +233,10 @@ input[type="checkbox"] {
display: block;
}
-
.column-btn {
- margin-top: 15px;
+ margin-top: calculateRem(15px);
float: right;
- margin-right:5px;
+ margin-right: calculateRem(5px);
}
.double-btn:after {
@@ -572,6 +245,6 @@ input[type="checkbox"] {
clear: both;
}
-.modalDimention{
+.modalDimention {
min-width: 60vw;
-}
\ No newline at end of file
+}
diff --git a/src/app/client/src/app/modules/resource/components/curriculum-courses/curriculum-courses.component.scss b/src/app/client/src/app/modules/resource/components/curriculum-courses/curriculum-courses.component.scss
index 43fae40531b611c3760d36ed3ec578ab3c75e2ec..23aa4119f238be0208a1aceacec32f7be56d42f3 100644
--- a/src/app/client/src/app/modules/resource/components/curriculum-courses/curriculum-courses.component.scss
+++ b/src/app/client/src/app/modules/resource/components/curriculum-courses/curriculum-courses.component.scss
@@ -1,26 +1,5 @@
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
-
-.content-header {
- &__img {
- overflow: hidden;
- width: calculateRem(48px);
- height:calculateRem(48px);
- img {
- height: 100%;
- }
- }
- &__title{
- color: var(--primary-color);
- font-size: calculateRem(18px);
- font-weight: bold;
- }
- &__info {
- color:var(--gray-800);
- font-size: calculateRem(14px);
-
- }
- }
-
+@use 'pages/content-header' as *;
.sbgrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(291.98px, 1fr));
diff --git a/src/app/client/src/app/modules/shared-feature/components/collection-player/collection-player.component.scss b/src/app/client/src/app/modules/shared-feature/components/collection-player/collection-player.component.scss
index b9e3596d2e1484ebad66184c72b17c69f9d4ce80..55fc41c773a542241a1e57338396ce71c5a852ad 100644
--- a/src/app/client/src/app/modules/shared-feature/components/collection-player/collection-player.component.scss
+++ b/src/app/client/src/app/modules/shared-feature/components/collection-player/collection-player.component.scss
@@ -1,43 +1,6 @@
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
-.content-header {
- // background: var(--rc-FAFAFA);
- min-height: calculateRem(14px);
- &__content{
- display:flex;
- align-items: center;
- justify-content: space-between;
- @include respond-below(sm) {
- display: block;
- }
- }
- &__title {
- color: var(--primary-400);
- font-size: calculateRem(18px);
- }
-
- &__info {
- color: var(--gray-800);
- font-size: 0.875rem;
- max-height: 48px;
- overflow-y: auto;
- }
-
- .dot-divider {
- width: 0.25rem;
- height: 0.25rem;
- border-radius: 100%;
- background-color: var(--gray-800);
- display: inline-block;
- margin: 0px 0.5rem;
- vertical-align: middle;
- }
-
- @include respond-below(sm) {
- &__buttons {
- margin-top: calculateRem(8px);
- }
- }
-}
+@use 'pages/content-header' as *;
+
:host {
@@ -50,8 +13,6 @@
.main-side-toc-content {
overflow-y: auto;
- // max-height: calc(100vh - 265px);
- // height: auto;
@include respond-below(sm) {
height: auto;
diff --git a/src/app/client/src/app/modules/shared-feature/components/content-player/content-player.component.scss b/src/app/client/src/app/modules/shared-feature/components/content-player/content-player.component.scss
index ffa44ad01f9aaf0dd416399cfbb43a9d06a73878..5bdb7c7aa74f9620d2911a72b704d734a4942536 100644
--- a/src/app/client/src/app/modules/shared-feature/components/content-player/content-player.component.scss
+++ b/src/app/client/src/app/modules/shared-feature/components/content-player/content-player.component.scss
@@ -1,5 +1,5 @@
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
-
+@use 'pages/content-header' as *;
.sb-single-resource {
width: 100%;
height: 100%;
@@ -23,47 +23,14 @@
}
.content-header {
- // background: var(--rc-FAFAFA);
min-height: calculateRem(80px);
background-color: var(--rc-FAFAFA);
box-shadow: 0 0 calculateRem(10px) 0 rgba(var(--rc-rgba-black), 0.25);
- z-index: 99;
-
- &__content{
- display:flex;
- align-items: center;
- justify-content: space-between;
- @include respond-below(sm) {
- display: block;
- }
- }
- &__title {
- color: var(--primary-400);
- font-size: calculateRem(18px);
- }
-
+ z-index: 99;
&__info {
- color: var(--gray-800);
- font-size: 0.875rem;
max-height: 48px;
overflow-y: auto;
}
-
- .dot-divider {
- width: 0.25rem;
- height: 0.25rem;
- border-radius: 100%;
- background-color: var(--gray-800);
- display: inline-block;
- margin: 0px 0.5rem;
- vertical-align: middle;
- }
-
- @include respond-below(sm) {
- &__buttons {
- margin-top: calculateRem(8px);
- }
- }
}
@include respond-below(sm) {
diff --git a/src/app/client/src/app/plugins/profile/components/profile-page/profile-page.component.scss b/src/app/client/src/app/plugins/profile/components/profile-page/profile-page.component.scss
index bb4c4af597d350e0c4c1adf8255c75f17589070a..9dd7ef611ec76e2f2e8497246e16a9ef29aaf3b5 100644
--- a/src/app/client/src/app/plugins/profile/components/profile-page/profile-page.component.scss
+++ b/src/app/client/src/app/plugins/profile/components/profile-page/profile-page.component.scss
@@ -1,9 +1,5 @@
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
-
-.content-header__title {
- color: var(--primary-400);
- font-size: 1.125rem;
-}
+@use 'pages/content-header' as *;
/* fonts */
.font-w-bold {
font-weight: bold !important;
@@ -213,9 +209,6 @@
justify-content: space-between;
display: flex;
padding: calculateRem(8px) calculateRem(16px);
- .list-items__item{
- // color: var(--sb-course-progress-status-label);
- }
}
.sb-profile-page-container{
.ui.segment{
diff --git a/src/app/client/src/assets/styles/pages/_reports.scss b/src/app/client/src/assets/styles/pages/_reports.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a7ff8ab8d7fb35b1cb09f35b12ed48391c381a02
--- /dev/null
+++ b/src/app/client/src/assets/styles/pages/_reports.scss
@@ -0,0 +1,172 @@
+@use "~@project-sunbird/sb-styles/assets/mixins/mixins"as *;
+
+.sb-graph-section {
+ box-shadow: 0 calculateRem(2px) calculateRem(7px) 0 rgba(var(--rc-rgba-black), 0.16);
+ border: 0.0625rem solid var(--rc-dddddd);
+
+ .sb-table-fixed .sb-table tbody td,
+ .sb-table-fixed .sb-table-body td {
+ text-overflow: initial;
+ overflow: initial;
+ white-space: unset;
+ }
+}
+
+.sb-btn-normal i::after {
+ content: "" !important;
+ font-size: 0.8125rem;
+ color: var(--white);
+}
+
+.no-bg {
+ background: none;
+}
+
+.dashboard-body-scroll {
+ display: flex;
+ align-items: flex-start;
+}
+
+.sb-sideview-tab-container {
+ background: inherit;
+}
+
+::ng-deep {
+ .sb-field .ui.selection.dropdown {
+ color: var(--white);
+ position: relative;
+ z-index: 2;
+ }
+
+ .sb-hawkeye-modal.sb-modal {
+ .ui.modal {
+ margin: 0 auto 0 !important;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+ }
+}
+
+.content-header__content {
+ border-bottom: calculateRem(1px) solid var(--gray-100);
+ padding: calculateRem(10px);
+ align-items: flex-start !important;
+}
+
+.report-description {
+ flex: 1;
+ text-align: justify;
+ font-size: calculateRem(18px);
+
+ @include respond-below(sm) {
+ flex: auto;
+ margin: 0 0 1rem 0 !important;
+ }
+}
+
+.global-filter {
+ border-radius: calculateRem(4px);
+ position: initial;
+}
+
+.global-filter {
+ ::ng-deep {
+ .form {
+ .sb-prominent-filter {
+ background: var(--sbt-body-bg) !important;
+ }
+ }
+ }
+}
+
+.ui.secondary.pointing.menu .item {
+ font-size: calculateRem(18px) !important;
+ color: var(--gray-800);
+ opacity: 0.3;
+ font-weight: 600;
+}
+
+.ui.secondary.pointing.menu .active.item {
+ color: var(--primary-color) !important;
+ opacity: 1 !important;
+ border-bottom-width: calculateRem(4px) !important;
+ border-color: var(--primary-color) !important;
+}
+
+.ui.secondary.pointing.menu {
+ height: calculateRem(72px) !important;
+}
+
+.back-btn-new {
+ padding: 0px !important;
+ height: calculateRem(55px) !important;
+ width: calculateRem(57px) !important;
+ border-radius: 50% !important;
+ min-width: auto !important;
+ background: var(--white);
+ box-shadow: var(--sbt-box-shadow-6px) !important;
+}
+
+.icon-back {
+ height: calculateRem(20px);
+ width: calculateRem(48px);
+}
+
+.icon-back .icon-svg--primary {
+ fill: var(--gray-800);
+}
+
+.icon-back {
+ ::ng-deep {
+ svg.icon {
+ height: calculateRem(20px);
+ }
+ }
+}
+
+.sb-btn-normal {
+ min-width: calculateRem(96px) !important;
+ font-size: calculateRem(15px) !important;
+}
+
+.active-btn {
+ padding-left: calculateRem(19px) !important;
+ min-width: calculateRem(113px) !important;
+
+ background-color: var(--primary-color) !important;
+ box-shadow: var(--sbt-box-shadow-6px) !important;
+
+ ::ng-deep {
+ color: var(--white) !important;
+ font-weight: 500;
+
+ .default .text {
+ color: var(--white) !important;
+ }
+ }
+}
+
+.last-update {
+ font-size: calculateRem(13px) !important;
+ color: var(--gray-800) !important;
+ font-weight: 500;
+ border-left: calculateRem(1px) solid var(--gray-100);
+ margin-left: calculateRem(10px) !important;
+}
+
+.filter-drop .ui.selection.dropdown {
+ ::ng-deep {
+ .text {
+ color: var(--gray-800) !important;
+ padding: 0 calculateRem(5px);
+ }
+ }
+}
+
+.main-container {
+ padding: 0 1%;
+}
+
+.report-main-block {
+ padding: 0 1%;
+}