diff --git a/src/app/client/angular.json b/src/app/client/angular.json
index 052cf4932b0fc9ae298857da7d8cb2d5d7b2edd7..21b609e7801a1ecea6a7cc59a4615a8557e72adb 100644
--- a/src/app/client/angular.json
+++ b/src/app/client/angular.json
@@ -73,8 +73,8 @@
"node_modules/video.js/dist/video-js.min.css",
"node_modules/katex/dist/katex.min.css",
"./node_modules/@project-sunbird/sb-themes/themes/themes-material_UI.scss",
- "./node_modules/@project-sunbird/sb-themes/themes/themes-portal.scss",
"./node_modules/@project-sunbird/sb-themes/themes/themes-df.scss",
+ "./node_modules/@project-sunbird/sb-themes/themes/themes-portal.scss",
"./node_modules/@project-sunbird/discussions-ui-v8/assets/styles/global.scss",
"node_modules/@project-sunbird/sunbird-video-player-v9/lib/assets/videojs.markers.min.css",
"node_modules/videojs-http-source-selector/dist/videojs-http-source-selector.css"
diff --git a/src/app/client/package.json b/src/app/client/package.json
index 934fe47b2741fa5271195830d471faedec03f9fb..0827fc692b28f09f2a5abd4849b3a3347d28590c 100644
--- a/src/app/client/package.json
+++ b/src/app/client/package.json
@@ -57,13 +57,13 @@
"@project-sunbird/ckeditor-build-classic": "4.1.3",
"@project-sunbird/ckeditor-build-font": "^1.0.8",
"@project-sunbird/client-services": "4.8.13",
- "@project-sunbird/common-consumption": "4.12.0",
+ "@project-sunbird/common-consumption": "4.12.1",
"@project-sunbird/common-form-elements": "5.1.1",
"@project-sunbird/discussions-ui-v8": "2.6.0-beta.2",
"@project-sunbird/sb-dashlet-v9": "^1.0.4",
"@project-sunbird/sb-notification": "5.0.7",
- "@project-sunbird/sb-styles": "0.0.10",
- "@project-sunbird/sb-themes": "0.0.85",
+ "@project-sunbird/sb-styles": "^0.0.14",
+ "@project-sunbird/sb-themes": "0.0.88",
"@project-sunbird/sunbird-collection-editor-v9": "5.0.14",
"@project-sunbird/sunbird-epub-player-v9": "5.1.0",
"@project-sunbird/sunbird-pdf-player-v9": "5.1.1",
@@ -116,7 +116,7 @@
"lodash-es": "^4.17.15",
"marked": "1.1.1",
"md5": "2.2.1",
- "moment": "2.29.1",
+ "moment": "2.24.0",
"moment-duration-format": "2.3.2",
"ng-recaptcha": "^5.0.0",
"ng-svg-editor": "0.0.24",
@@ -133,6 +133,7 @@
"ngx-order-pipe": "^2.0.4",
"ngx-slick": "0.2.1",
"rxjs": "^6.5.5",
+ "sass": "^1.56.1",
"sb-svg2pdf": "0.0.11",
"sb-tag-manager": "^3.9.15",
"slick-carousel": "^1.8.1",
diff --git a/src/app/client/src/app/modules/certificate/components/browse-image-popup/browse-image-popup.component.scss b/src/app/client/src/app/modules/certificate/components/browse-image-popup/browse-image-popup.component.scss
index 2b4a9d5e9ddc308c06ee57898a35d5437cf8da3d..a13e97dd8e46c30671d19ac3408ae93bcd3e54a7 100644
--- a/src/app/client/src/app/modules/certificate/components/browse-image-popup/browse-image-popup.component.scss
+++ b/src/app/client/src/app/modules/certificate/components/browse-image-popup/browse-image-popup.component.scss
@@ -1,3 +1,4 @@
+@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
// image modal css //
.sb-imagemodal {
@@ -32,7 +33,7 @@
}
.image-label:hover {
- color: #888;
+ color: var(--gray-200);
cursor: pointer;
}
@@ -49,7 +50,7 @@
section {
display: none;
padding: calculateRem(16px) 0 0;
- border-top: 1px solid var(--rc-dddddd);
+ border-top: calculateRem(1px) solid var(--rc-dddddd);
.sb-search-box .sb-search-input {
padding: 0.75rem 2.75rem;
@@ -89,7 +90,7 @@
.common-contribution-card {
box-sizing: border-box;
- border: .5px solid rgba(123, 134, 244, .39);
+ border: calculateRem(0.5px) solid rgba(123, 134, 244, .39);
border-radius: .25rem;
background-color: var(--white);
box-shadow: none;
@@ -112,7 +113,7 @@
padding: 0;
border: none;
border-radius: .28571429rem;
- box-shadow: 0 calculateRem(1px) calculateRem(3px) 0 #d4d4d5, 0 0 0 calculateRem(1px) #d4d4d5;
+ box-shadow: 0 calculateRem(1px) calculateRem(3px) 0 var(--rc-d4d4d5), 0 0 0 calculateRem(1px) var(--rc-d4d4d5);
transition: box-shadow .1s ease, transform .1s ease;
z-index: '';
position: relative;
@@ -137,7 +138,7 @@
.ui.cards>.card>.content {
flex-grow: 1;
border: none;
- border-top: calculateRem(1px) solid rgba(34, 36, 38, .1);
+ border-top: calculateRem(1px) solid rgba(var(--rc-rgba-black), .1);
background: 0 0;
margin: 0;
padding: 0;
@@ -161,7 +162,7 @@
.or-toggle {
background: var(--white);
border-radius: 50%;
- width: 24px;
+ width: calculateRem(24px);
height: calculateRem(24px);
position: absolute;
left: 42%;
@@ -185,19 +186,19 @@
color: var(--red-400);
}
.choose-img-box{
- border: 3px solid var(--black);
- padding: 24px;
+ border: calculateRem(3px) solid var(--black);
+ padding: calculateRem(24px);
border-style: dashed;
- border-radius: 4px;
+ border-radius: calculateRem(4px);
}
.border-line{
- border-left: 2px solid var(--rc-dddddd);
+ border-left: calculateRem(2px) solid var(--rc-dddddd);
height: 100%;
- padding-left: 16px;
+ padding-left: calculateRem(16px);
html[dir='rtl'] & {
- border-right: 2px solid var(--rc-dddddd);
+ border-right: calculateRem(2px) solid var(--rc-dddddd);
height: 100%;
- padding-right: 16px;
+ padding-right: calculateRem(16px);
}
}
.drop-img-text{
@@ -209,7 +210,7 @@
margin: 0;
overflow: hidden;
padding: 0;
- border-bottom: 1px solid #999;
+ border-bottom: calculateRem(1px) solid var(--gray-200);
}
.tags li {
float: left;
@@ -217,26 +218,26 @@
position: relative;
img{
position: absolute;
- right: 10px;
+ right: calculateRem(10px);
}
}
.tag {
background: var(--primary);
- border-radius: 3px 0 0 3px;
+ border-radius: calculateRem(3px) 0 0 calculateRem(3px);
color: var(--white);
display: inline-block;
- height: 26px;
- line-height: 26px;
- padding: 0 20px 0 23px;
+ height: calculateRem(26px);
+ line-height: calculateRem(26px);
+ padding: 0 calculateRem(20px) 0 calculateRem(23px);
position: relative;
- margin: 0 10px 10px 0;
+ margin: 0 calculateRem(10px) calculateRem(10px) 0;
text-decoration: none;
-webkit-transition: color 0.2s;
}
.tag::before {
background: var(--white);
- border-radius: 10px;
- box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
+ border-radius: calculateRem(10px);
+ box-shadow: inset 0 calculateRem(1px) rgba(var(--rc-rgba-black), 0.25);
content: '';
height: 0.375rem;
left: 0.625rem;
diff --git a/src/app/client/src/app/modules/certificate/components/certificate-configuration/certificate-configuration.component.scss b/src/app/client/src/app/modules/certificate/components/certificate-configuration/certificate-configuration.component.scss
index 3a24c99c58ca4d883bb51c61d07d356f87ec8c8d..6d8549e9067845e6e47b7eb8d96174a82f3ceeae 100644
--- a/src/app/client/src/app/modules/certificate/components/certificate-configuration/certificate-configuration.component.scss
+++ b/src/app/client/src/app/modules/certificate/components/certificate-configuration/certificate-configuration.component.scss
@@ -37,7 +37,7 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
- font-size: 18px;
+ font-size: calculateRem(18px);
}
}
@@ -64,7 +64,7 @@
.certificates-label {
font-size: calculateRem(18px);
letter-spacing: 0;
- line-height: 20px;
+ line-height: calculateRem(20px);
}
.certificate-content-area {
@@ -84,10 +84,9 @@
.certificate-sbcard {
color: var(--gray-400);
- font-family: "Noto Sans";
font-size: calculateRem(12px);
min-height: calculateRem(52px);
- box-shadow: 0 3px 4px 0 rgba(2, 79, 157, 0.1);
+ box-shadow: 0 calculateRem(3px) calculateRem(4px) 0 rgba(var(--rc-rgba-primary), 0.1);
background-color: var(--white);
border: .0625rem solid var(--rc-dedede);
border-radius: calculateRem(12px);
@@ -98,8 +97,6 @@
transition-delay: .1s;
&:active {
- // border: .0625rem solid var(--primary-400);
- // background-color: rgba(2, 79, 157, 0.1);
color: var(--primary-400);
font-weight: bold;
@@ -175,7 +172,7 @@
width: 100%;
border-radius: calculateRem(8px);
cursor: pointer;
- border: calculateRem(1px) solid #E8E8E8;
+ border: calculateRem(1px) solid var(--rc-e0e0e0);
&:nth-child(1) {
grid-area: smallcard;
@@ -189,7 +186,7 @@
height: 100%;
.certificate-frame {
- box-shadow: 0 0.125rem 0.4375rem 0 rgba(0, 0, 0, .16);
+ box-shadow: 0 0.125rem 0.4375rem 0 rgba(var(--rc-rgba-black), .16);
position: relative;
width: 100%;
@@ -214,10 +211,10 @@
cursor: text;
font-weight: bold;
position: relative;
- left: 8px;
+ left: calculateRem(8px);
html[dir="rtl"] & {
- right: 8px;
+ right: calculateRem(8px);
left: 0px;
}
}
diff --git a/src/app/client/src/app/modules/certificate/components/create-template/create-template.component.scss b/src/app/client/src/app/modules/certificate/components/create-template/create-template.component.scss
index a6a50511dbf48e29c3383e461302f0a66f26bb12..7de6bc315fd18e102b59663587bf114ef1c96b91 100644
--- a/src/app/client/src/app/modules/certificate/components/create-template/create-template.component.scss
+++ b/src/app/client/src/app/modules/certificate/components/create-template/create-template.component.scss
@@ -7,7 +7,7 @@
.cert-img-sb-card {
width: 6.375rem;
- margin-bottom: 16px;
+ margin-bottom: calculateRem(16px);
background-color: var(--white);
border: .0625rem solid var(--rc-dedede);
border-radius: .25rem;
@@ -18,7 +18,7 @@
transition: box-shadow .3s ease-out,transform .3s ease-out,opacity .2s ease-out;
transition-delay: .1s;
&.active {
- border: 2px solid var(--primary-300);
+ border: calculateRem(2px) solid var(--primary-300);
transform: scale(1.03, 1.03);
.selected-mark{
position: absolute;
@@ -28,7 +28,7 @@
}
}
&:hover{
- border: 2px solid var(--primary-300);
+ border: calculateRem(2px) solid var(--primary-300);
transform: scale(1.03, 1.03);
}
&__content {
@@ -60,7 +60,7 @@
background: var(--white);
&__description{
width: 100%;
- min-height: 418px;
+ min-height: calculateRem(418px);
text-align: center;
border-style: dashed;
border-color: var(--gray-100);
@@ -116,8 +116,8 @@ font-size: calculateRem(20px);
overflow: hidden;
margin-top: calculateRem(3px);
cursor: pointer;
- border-radius: 24px;
- border: 2px solid var(--primary-300);
+ border-radius: calculateRem(16px);
+ border: calculateRem(2px) solid var(--primary-300);
color: var(--primary-300);
font-weight: bold;
background:var(--primary-100);
diff --git a/src/app/client/src/app/modules/certificate/components/svg-editor/svg-editor.component.scss b/src/app/client/src/app/modules/certificate/components/svg-editor/svg-editor.component.scss
index be495eb4b10b7b633e54007eeccf9d320235a36c..baa6bd6997b1d1b308a166d8ab45ead24f781a7c 100644
--- a/src/app/client/src/app/modules/certificate/components/svg-editor/svg-editor.component.scss
+++ b/src/app/client/src/app/modules/certificate/components/svg-editor/svg-editor.component.scss
@@ -31,7 +31,7 @@
&.active,
&:hover {
- border: 2px solid var(--primary-color);
+ border: calculateRem(2px) solid var(--primary-color);
}
&__content {
@@ -122,8 +122,8 @@
overflow: hidden;
margin-top: calculateRem(3px);
cursor: pointer;
- border-radius: 24px;
- border: 2px solid var(--primary-300);
+ border-radius: calculateRem(24px);
+ border: calculateRem(2px) solid var(--primary-300);
color: var(--primary-300);
font-weight: bold;
background: var(--primary-100);
diff --git a/src/app/client/src/app/modules/core/components/main-footer/main-footer.component.scss b/src/app/client/src/app/modules/core/components/main-footer/main-footer.component.scss
index efab2831a1e28ac3e303ee5993f82260c55b4b43..f51e5d892d29100c342b467df0ab3ab5987aa8f4 100644
--- a/src/app/client/src/app/modules/core/components/main-footer/main-footer.component.scss
+++ b/src/app/client/src/app/modules/core/components/main-footer/main-footer.component.scss
@@ -68,7 +68,7 @@
margin-bottom: calculateRem(16px);
}
a{
- color: #0531FF;
+ color: var(--primary-color);
font-size: calculateRem(14px);
font-weight: bold;
}
@@ -78,11 +78,11 @@
margin-bottom: calculateRem(16px);
}
a{
- color: #6236FF;
+ color: var(--primary-color);
font-size: calculateRem(14px);
}
.contact-info-title{
- color: #6236FF;
+ color: var(--primary-color);
font-weight: bold;
font-size: calculateRem(14px);
margin-bottom: calculateRem(8px);
diff --git a/src/app/client/src/app/modules/core/components/main-header/main-header.component.html b/src/app/client/src/app/modules/core/components/main-header/main-header.component.html
index 8b22aa343881320e31776928939fca0bcd5890f0..ea6c9bce812223a2642d8900823da7d1328ba930 100644
--- a/src/app/client/src/app/modules/core/components/main-header/main-header.component.html
+++ b/src/app/client/src/app/modules/core/components/main-header/main-header.component.html
@@ -304,8 +304,7 @@
</app-main-menu>
</div>
<div class="ui container d-flex flex-ai-center" *ngIf="showBackButton">
- <button (click)="backButton.goBack()"
- class="sb-btn sb-btn-normal sb-btn-link sb-btn-link-primary sb-left-icon-btn sb-btn-round" type="button"
+ <button (click)="backButton.goBack()" [ngClass]="layoutConfiguration ? 'sb-btn-primary sb-btn-round' : 'sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0'" class="sb-btn sb-btn-normal" type="button"
attr.aria-label=“{{resourceService?.frmelmnts?.btn?.back}}â€><i
class="icon-svg icon-svg--xxs icon-back mr-4"><svg class="icon icon-svg--primary">
<use xlink:href="assets/images/sprite.svg#arrow-long-left"></use>
diff --git a/src/app/client/src/app/modules/core/components/main-header/main-header.component.scss b/src/app/client/src/app/modules/core/components/main-header/main-header.component.scss
index f7a5817b97e96a75b4aab0ec2bc176204f7cc826..7cfb63d78c92e25505e5a92940fcbad20c68e052 100644
--- a/src/app/client/src/app/modules/core/components/main-header/main-header.component.scss
+++ b/src/app/client/src/app/modules/core/components/main-header/main-header.component.scss
@@ -338,11 +338,10 @@ __textbooks {
}
.explore-description-info{
- color: #333333;
- font-family: "Noto Sans";
- font-size: 14px;
+ color: var(--gray-800);
+ font-size: calculateRem(14px);
letter-spacing: 0;
- line-height: 19px;
+ line-height: calculateRem(19px);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
diff --git a/src/app/client/src/app/modules/dashboard/components/course-dashboard/course-dashboard.component.scss b/src/app/client/src/app/modules/dashboard/components/course-dashboard/course-dashboard.component.scss
index 7a7935ae9ff840973e48237a1071c5ad2fce692f..42d0eedd4cfb2b580a25d369a6352b023d5a02d5 100644
--- a/src/app/client/src/app/modules/dashboard/components/course-dashboard/course-dashboard.component.scss
+++ b/src/app/client/src/app/modules/dashboard/components/course-dashboard/course-dashboard.component.scss
@@ -23,8 +23,8 @@ div.content {
grid-template-areas:
"smallcard largecard"
"smallcard2 largecard";
- grid-gap: 16px;
- grid-template-columns: 392px 1fr;
+ grid-gap: calculateRem(16px);
+ grid-template-columns: calculateRem(392px) 1fr;
@include respond-below(sm) {
grid-template-columns: 1fr 2fr;
@@ -36,8 +36,8 @@ div.content {
background-color: var(--white);
box-shadow: none;
cursor: pointer;
- border: 2px solid var(--white);
- box-shadow: 0 0.125rem 0.4375rem 0 rgba(0, 0, 0, .16);
+ border: calculateRem(2px) solid var(--white);
+ box-shadow: 0 0.125rem 0.4375rem 0 rgba(var(--rc-rgba-black), .16);
&:nth-child(1) {
grid-area: smallcard;
@@ -75,7 +75,7 @@ div.content {
::ng-deep {
.course-dashboard-select {
- width: 300px;
+ width: calculateRem(300px);
}
.ui.selection.dropdown {
diff --git a/src/app/client/src/app/modules/dashboard/components/course-progress/course-progress.component.scss b/src/app/client/src/app/modules/dashboard/components/course-progress/course-progress.component.scss
index 6db7b33c1a4486e1ba260922cd4b3118fcff597f..0cdb506d476039519e37a5ecd93cd51b2e8a8cd5 100644
--- a/src/app/client/src/app/modules/dashboard/components/course-progress/course-progress.component.scss
+++ b/src/app/client/src/app/modules/dashboard/components/course-progress/course-progress.component.scss
@@ -104,7 +104,7 @@ a {
&__divider {
width: calculateRem(1px);
- border-left: calculateRem(1px) solid #cccccc;
+ border-left: calculateRem(1px) solid var(--gray-100);
height: calculateRem(32px);
margin: 0 calculateRem(16px);
@include respond-below(sm) {
diff --git a/src/app/client/src/app/modules/dashboard/components/dashboard-sidebar/dashboard-sidebar.component.scss b/src/app/client/src/app/modules/dashboard/components/dashboard-sidebar/dashboard-sidebar.component.scss
index 4d638f7c8a1fc9c425b557846e50a1747c572578..a97ac1ff30c03b5d78521fb27ef19203d484cfa9 100644
--- a/src/app/client/src/app/modules/dashboard/components/dashboard-sidebar/dashboard-sidebar.component.scss
+++ b/src/app/client/src/app/modules/dashboard/components/dashboard-sidebar/dashboard-sidebar.component.scss
@@ -1,20 +1,6 @@
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
:host{
- // .sidebar {
- // margin: 0;
- // padding: 0;
- // background-color: var(--white);
- // height: 100vh;
- // overflow: auto;
- // padding-left: 40%;
- // padding-right: 0px;
- // [dir="rtl"] & {
- // padding-left: 0px;
- // padding-right: 40%;
- // }
- // }
-
.sidebar a ,.dashboard-title{
display: block;
color: var(--gray-800) !important;
diff --git a/src/app/client/src/app/modules/dashboard/components/data-chart/data-chart.component.scss b/src/app/client/src/app/modules/dashboard/components/data-chart/data-chart.component.scss
index 4c3d2b497f061c1ac4a6578f78b096275e251b02..d9f83aa5f289c1d45768499a1cf2f876ace51256 100644
--- a/src/app/client/src/app/modules/dashboard/components/data-chart/data-chart.component.scss
+++ b/src/app/client/src/app/modules/dashboard/components/data-chart/data-chart.component.scss
@@ -67,45 +67,45 @@
}
.pad5 {
- padding-top: 5px;
- padding-bottom: 5px;
+ padding-top: calculateRem(5px);
+ padding-bottom: calculateRem(5px);
}
.filter-btn {
- min-width: 96px;
+ min-width: calculateRem(96px);
}
.sb-btn-normal {
- min-width: 96px !important;
+ min-width: calculateRem(96px) !important;
font-weight: 500 !important;
- font-size: 15px !important;
- padding-left: 18px !important;
- padding-right: 18px !important;
+ font-size: calculateRem(15px) !important;
+ padding-left: calculateRem(18px) !important;
+ padding-right: calculateRem(18px) !important;
}
.sb-label-value {
- border-radius: 24px;
- padding: 7px;
- padding-right: 9px;
- padding-left: 9px;
- background-color: #E9E8D9 !important;
- box-shadow: 4px 4px 3px 0 #C2C2C2 !important;
- color: #333;
+ border-radius: calculateRem(24px);
+ padding: calculateRem(7px);
+ padding-right: calculateRem(9px);
+ padding-left: calculateRem(9px);
+ background-color: var(--rc-e9e8d9) !important;
+ box-shadow: calculateRem(4px) calculateRem(4px) calculateRem(3px) 0 var(--gray-100) !important;
+ color: var(--gray-800);
margin-bottom: 0.25rem;
margin-right: 0.25rem;
}
.chart-title {
- font-size: 16px;
+ font-size: calculateRem(16px);
font-weight: 500;
margin-bottom: 0px !important;
- padding-top: 5px;
+ padding-top: calculateRem(5px);
}
.sb-label-name {
- font-size: 16px;
+ font-size: calculateRem(16px);
}
::ng-deep {
@@ -120,30 +120,30 @@
}
.selection-block {
- margin-bottom: 8px;
+ margin-bottom: calculateRem(8px);
}
.filter-select-title {
- font-size: 20px;
+ font-size: calculateRem(20px);
font-weight: 600;
}
.sb-label-primary-100 {
- padding: 7px !important;
- padding-left: 9px !important;
- padding-right: 9px !important;
- color: #333 !important;
- border-radius: 24px;
+ padding: calculateRem(7px) !important;
+ padding-left: calculateRem(9px) !important;
+ padding-right: calculateRem(9px) !important;
+ color: var(--gray-800) !important;
+ border-radius: calculateRem(24px);
}
.date-range-label {
- padding: 7px !important;
- padding-left: 9px !important;
- padding-right: 9px !important;
- color: #333 !important;
- border-radius: 24px;
- background-color: #E9E8D9 !important;
+ padding: calculateRem(7px) !important;
+ padding-left: calculateRem(9px) !important;
+ padding-right: calculateRem(9px) !important;
+ color: var(--gray-800) !important;
+ border-radius: calculateRem(24px);
+ background-color: var(---rc-e9e8d9) !important;
}
@@ -151,8 +151,8 @@
&__container {
width: 100%;
height: 100vh;
- min-height: 400px;
- background-color: #E9E8D9 !important;
+ min-height: calculateRem(400px);
+ background-color: var(--sbt-body-bg) !important;
padding: calculateRem(24px);
margin: 0 auto;
display: flex;
@@ -226,7 +226,7 @@
::ng-deep {
.sb-prominent-filter-field {
width: 48%;
- margin-bottom: 10px;
+ margin-bottom: calculateRem(10px);
}
}
@@ -234,8 +234,8 @@
::ng-deep {
.mat-dialog-container {
- background-color: #E9E8D9 !important;
- border-radius: 24px;
+ background-color: var(---rc-e9e8d9) !important;
+ border-radius: calculateRem(24px);
}
}
diff --git a/src/app/client/src/app/modules/dashboard/components/filter/filter.component.scss b/src/app/client/src/app/modules/dashboard/components/filter/filter.component.scss
index 6d9c9e98beb775b98c6f289a60ad4fa070efe8ed..878e3e75633fcf781a0c8605d2318fdcbb45192e 100644
--- a/src/app/client/src/app/modules/dashboard/components/filter/filter.component.scss
+++ b/src/app/client/src/app/modules/dashboard/components/filter/filter.component.scss
@@ -62,21 +62,21 @@
border-bottom: 0px;
width: 100%;
.sb-label-value {
- border-radius: 24px;
- padding: 7px !important;
- padding-left: 9px !important;
- padding-right: 9px !important;
+ border-radius: calculateRem(24px);
+ padding: calculateRem(7px) !important;
+ padding-left: calculateRem(9px) !important;
+ padding-right: calculateRem(9px) !important;
- background-color: #F2F2EA !important;
- box-shadow: 4px 4px 3px 0 #C2C2C2 !important;
- color: #333;
+ background-color: var(---rc-e9e8d9) !important;
+ box-shadow: calculateRem(4px) calculateRem(4px) calculateRem(3px) 0 var(--gray-100) !important;
+ color: var(--gray-800);
margin-bottom: calculateRem(4px);
margin-right: calculateRem(4px);
}
.sb-label-name {
- font-size: 16px;
+ font-size: calculateRem(16px);
}
}
@@ -141,9 +141,9 @@
.sb-prominent-filter-field {
::ng-deep {
label {
- padding-bottom: 2px;
+ padding-bottom: calculateRem(2px);
margin-bottom: 0px !important;
- margin-left: 10px !important;
+ margin-left: calculateRem(10px) !important;
}
.md-drppicker {
padding: calculateRem(16px) calculateRem(8px);
@@ -168,8 +168,8 @@
.ui.dropdown.selection
::ng-deep {
.menu {
- padding-top: 16px;
- border-radius: 16px !important;
+ padding-top: calculateRem(16px);
+ border-radius: calculateRem(16px) !important;
}
}
@@ -188,27 +188,27 @@
.ui.selection.dropdown {
color: var(--ui-dropdown-selection-icon) !important;
box-sizing: border-box;
- height: 40px !important;
- border: 1px solid #D7D7D7;
- border-radius: 24px;
- background-color: #FFFFFF;
+ height: calculateRem(40px) !important;
+ border: calculateRem(1px) solid var(--rc-dededf);
+ border-radius: calculateRem(24px);
+ background-color: var(--white);
}
.ui.selection.dropdown {
::ng-deep {
.text {
- font-size: 18px !important;
+ font-size: calculateRem(18px) !important;
}
}
}
sui-multi-select.selection.sb-select-searchfilter.ui.dropdown.multiple {
- min-width: 250px !important;
- min-height: 40px !important;
- font-size: 16px !important;
+ min-width: calculateRem(250px) !important;
+ min-height: calculateRem(40px) !important;
+ font-size: calculateRem(16px) !important;
}
.sb-prominent-filter {
- background: #E9E8D9 !important;
+ background: var(---rc-e9e8d9) !important;
}
::ng-deep{
@@ -221,5 +221,5 @@ sui-multi-select.selection.sb-select-searchfilter.ui.dropdown.multiple {
font-size: 0.75em;
}
.select-container{
- margin-top:10px;
+ margin-top:calculateRem(10px);
}
diff --git a/src/app/client/src/app/modules/dashboard/components/list-all-reports/list-all-reports.component.html b/src/app/client/src/app/modules/dashboard/components/list-all-reports/list-all-reports.component.html
index 151f66a81a674549fa37ac8295fbcc86862202d6..d31959619b9cb70810bdf3c5939daa8d18c8d45c 100644
--- a/src/app/client/src/app/modules/dashboard/components/list-all-reports/list-all-reports.component.html
+++ b/src/app/client/src/app/modules/dashboard/components/list-all-reports/list-all-reports.component.html
@@ -7,9 +7,8 @@
<div class="ui container py-0 px-0 d-flex flex-ai-center">
<div class="py-0 d-flex flex-ai-center w-100">
<!-- /* Back button */ -->
- <button type="button" [ngClass]="layoutConfiguration ? 'sb-btn-round' : ''"
- class="sb-btn sb-btn-normal sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0" tabindex="0"
- (click)="goBack()" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
+ <button type="button" [ngClass]="layoutConfiguration ? 'sb-btn-primary sb-btn-round' : 'sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0'"
+ class="sb-btn sb-btn-normal" tabindex="0" (click)="goBack()" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
<em class="icon-svg icon-svg--xxs icon-back mr-4"><svg class="icon icon-svg--primary">
<use xlink:href="assets/images/sprite.svg#arrow-long-left"></use>
</svg></em>
diff --git a/src/app/client/src/app/modules/dashboard/components/map/map.component.scss b/src/app/client/src/app/modules/dashboard/components/map/map.component.scss
index 52648778a3bcaeb02decfd7e8d806cb68d0f5b8c..f841f4221315815f8d2f965f68fc8fdc23484456 100644
--- a/src/app/client/src/app/modules/dashboard/components/map/map.component.scss
+++ b/src/app/client/src/app/modules/dashboard/components/map/map.component.scss
@@ -1 +1,3 @@
-.mapContainer { height: 800px; }
\ No newline at end of file
+@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
+
+.mapContainer { height: calculateRem(800px); }
\ No newline at end of file
diff --git a/src/app/client/src/app/modules/dashboard/components/report-summary/report-summary.component.scss b/src/app/client/src/app/modules/dashboard/components/report-summary/report-summary.component.scss
index 789747b3a09771a122a1ce6b3de262cc4ba18029..55611710792368f8fe2b281042b58f8a3485555a 100644
--- a/src/app/client/src/app/modules/dashboard/components/report-summary/report-summary.component.scss
+++ b/src/app/client/src/app/modules/dashboard/components/report-summary/report-summary.component.scss
@@ -1,7 +1,7 @@
.ui.message {
- border-radius: opx !important;
+ border-radius: 0px !important;
box-shadow: none !important;
- background: #fff !important;
+ background: var(--white) !important;
}
.header {
font-weight: 300;
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 7554f86f29afa2f3dfa41f0a4dca21c52719af70..a2b03d17774dfa4942dd594e0897a5c0d453d0d9 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
@@ -85,7 +85,7 @@
.files-block {
background: var(--sbt-body-bg) !important;
margin: 0px !important;
- border-radius: 0px 0px 24px 24px !important;
+ border-radius: 0px 0px calculateRem(24px) calculateRem(24px) !important;
box-shadow: none;
border-top: calculateRem(1px) solid var(--gray-100);
}
diff --git a/src/app/client/src/app/modules/dashboard/components/sb-table/sb-table.component.scss b/src/app/client/src/app/modules/dashboard/components/sb-table/sb-table.component.scss
index 7397db5a2ac5926fb802da747d93218ac3561d25..2f6fc190c3bbd78793da4fa377197a0c1a0ee39c 100644
--- a/src/app/client/src/app/modules/dashboard/components/sb-table/sb-table.component.scss
+++ b/src/app/client/src/app/modules/dashboard/components/sb-table/sb-table.component.scss
@@ -5,7 +5,7 @@
align-self: flex-start;
}
.selected-item {
- margin-bottom: 5px;
+ margin-bottom: calculateRem(5px);
white-space: nowrap;
}
.dataTable{
@@ -15,52 +15,52 @@
border: none !important;
}
.multiselect-dropdown .dropdown-btn {
- padding: 7px 18px !important;
+ padding: calculateRem(7px) calculateRem(18px) !important;
border: none !important;
}
.sb-filter-g__item {
- border-radius: 24px;
- min-width: 250px!important;
- min-height: 40px!important;
- font-size: 15px!important;
+ border-radius: calculateRem(24px);
+ min-width: calculateRem(250px)!important;
+ min-height: calculateRem(40px)!important;
+ font-size: calculateRem(15px)!important;
padding: 0px;
- margin-right: 18px;
- border: 1px solid #ccc;
+ margin-right: calculateRem(18px);
+ border: calculateRem(1px) solid var(--gray-200);
}
.dropdown-list {
border: none !important;
}
li.multiselect-item-checkbox {
- margin: 10px;
+ margin: calculateRem(10px);
}
.dataTables_wrapper .dataTables_filter input {
- background-color: #fff !important;
- border: 1px solid var(--gray-200) !important;
+ background-color: var(--white) !important;
+ border: calculateRem(1px) solid var(--gray-200) !important;
}
.dropdown-multiselect__caret {
- height: 40px !important;
+ height: calculateRem(40px) !important;
}
.dropdown-multiselect__caret::before {
border-color: var(--ui-dropdown-selection-icon) transparent !important;
- border-width: 4px 5px 0 !important;
+ border-width: calculateRem(4px) calculateRem(5px) 0 !important;
}
.dataTables_wrapper {
- padding-top: 30px;
- border-top: 1px solid #ccc;
- padding: 20px;
+ padding-top: calculateRem(30px);
+ border-top: calculateRem(1px) solid var(--gray-200);
+ padding: calculateRem(20px);
}
table.dataTable {
width: 100% !important;
}
.export-btn {
- color: #fff !important;
+ color: var(--white) !important;
background-color: var(--primary-400);
}
.sb-btn-normal {
font-weight: 500 !important;
- font-size: 15px !important;
+ font-size: calculateRem(15px) !important;
}
table.dataTable.no-footer {
overflow-x: auto;
@@ -68,18 +68,18 @@
display: block;
}
table.dataTable th, table.dataTable td {
- min-width: 131px !important;
+ min-width: calculateRem(131px) !important;
}
.sb-filter-g {
grid-template-columns :repeat(auto-fill,minmax(300px,1fr)) !important;
- margin-left: 20px;
- margin-right: 20px;
- margin-bottom: 25px !important;
+ margin-left: calculateRem(20px);
+ margin-right: calculateRem(20px);
+ margin-bottom: calculateRem(25px) !important;
gap: 0px !important;
}
.dataTables_wrapper .dataTables_filter input {
- border-radius: 24px !important;
+ border-radius: calculateRem(24px) !important;
}
table.dataTable th, table.dataTable td {
text-align: center !important;
@@ -88,6 +88,6 @@
}
.filter-label {
- font-size: 24px;
- color: #024f9d;
+ font-size: calculateRem(24px);
+ color: var(--primary-400);
}
diff --git a/src/app/client/src/app/modules/dashboard/components/usage-reports/usage-reports.component.html b/src/app/client/src/app/modules/dashboard/components/usage-reports/usage-reports.component.html
index 3a719ceb265708090127cd10435d37c9f71fb805..b7bd1688599de621debfc55276c08b5b90662584 100644
--- a/src/app/client/src/app/modules/dashboard/components/usage-reports/usage-reports.component.html
+++ b/src/app/client/src/app/modules/dashboard/components/usage-reports/usage-reports.component.html
@@ -6,9 +6,7 @@
<div class="ui container py-0 px-0 d-flex flex-ai-center">
<div class="py-0 d-flex flex-ai-center w-100">
<!-- /* Back button */ -->
- <button type="button" [ngClass]="layoutConfiguration ? 'sb-btn-round' : ''"
- class="sb-btn sb-btn-normal sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0" tabindex="0"
- (click)="goBack()" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
+ <button type="button" [ngClass]="layoutConfiguration ? 'sb-btn-primary sb-btn-round' : 'sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0'" class="sb-btn sb-btn-normal" tabindex="0" (click)="goBack()" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
<em class="icon-svg icon-svg--xxs icon-back mr-4"><svg class="icon icon-svg--primary">
<use xlink:href="assets/images/sprite.svg#arrow-long-left"></use>
</svg></em>
diff --git a/src/app/client/src/app/modules/dial-code-search/components/get/get.component.scss b/src/app/client/src/app/modules/dial-code-search/components/get/get.component.scss
index 84b30ca46ee7cefc9280511e8b350e375365e7dc..26f3ea490bcb8040e2884b4ffc4bcc0069811c2d 100644
--- a/src/app/client/src/app/modules/dial-code-search/components/get/get.component.scss
+++ b/src/app/client/src/app/modules/dial-code-search/components/get/get.component.scss
@@ -2,7 +2,7 @@
.sb-explore-qr-page-cover {
padding: calculateRem(32px) 0 0 0;
- min-height: calc(100vh - 230px);
+ min-height: calc(100vh - calculateRem(230px));
}
/*get dial code page responsive css*/
diff --git a/src/app/client/src/app/modules/groups/components/activity/activity-details/activity-details.component.scss b/src/app/client/src/app/modules/groups/components/activity/activity-details/activity-details.component.scss
index 0dddca346e7148630a4baff59cd20ca2e698286d..46aa4c50cca80780fd9167525374f0a6f94a4c6a 100644
--- a/src/app/client/src/app/modules/groups/components/activity/activity-details/activity-details.component.scss
+++ b/src/app/client/src/app/modules/groups/components/activity/activity-details/activity-details.component.scss
@@ -67,7 +67,7 @@
}
.download-text{
- font-size:12px;
+ font-size:calculateRem(12px);
color:var(--primary-400);
font-weight: bold;
}
diff --git a/src/app/client/src/app/modules/groups/components/back-button/back-button.component.html b/src/app/client/src/app/modules/groups/components/back-button/back-button.component.html
index 6aa68b8b93dea7f974fb44ac6cc2971017c46040..710fab52a0f4572c87a55347370c0103bd45985b 100644
--- a/src/app/client/src/app/modules/groups/components/back-button/back-button.component.html
+++ b/src/app/client/src/app/modules/groups/components/back-button/back-button.component.html
@@ -1,5 +1,4 @@
-<button type="button" (click)="goBack()" [ngClass]="layoutConfiguration ? 'sb-btn-round' : ''" class="sb-btn sb-btn-normal sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0"
-tabindex="0" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}"><i
+<button type="button" (click)="goBack()" [ngClass]="layoutConfiguration ? 'sb-btn-primary sb-btn-round' : 'sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0'" class="sb-btn sb-btn-normal" tabindex="0" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}"><i
class="icon-svg icon-svg--xxs icon-back"><svg class="icon icon-svg--primary">
<use xlink:href="assets/images/sprite.svg#arrow-long-left"></use>
</svg></i>
diff --git a/src/app/client/src/app/modules/learn/components/batch/batch-details/batch-details.component.scss b/src/app/client/src/app/modules/learn/components/batch/batch-details/batch-details.component.scss
index ff0c24800ebafd7223f8b092ccfb44b15de50e6e..0977782029044b7c2aaf728141b6ffc9a3a17bba 100644
--- a/src/app/client/src/app/modules/learn/components/batch/batch-details/batch-details.component.scss
+++ b/src/app/client/src/app/modules/learn/components/batch/batch-details/batch-details.component.scss
@@ -23,7 +23,7 @@
}
&__body {
padding: calculateRem(8px) calculateRem(8px) calculateRem(8px) calculateRem(16px);
- border: 1px solid var(--gray-100);
+ border: calculateRem(1px) solid var(--gray-100);
font-size: calculateRem(14px);
margin-bottom: calculateRem(16px);
}
diff --git a/src/app/client/src/app/modules/learn/components/course-consumption/assessment-player/assessment-player.component.html b/src/app/client/src/app/modules/learn/components/course-consumption/assessment-player/assessment-player.component.html
index 8e6e8ff96e67dfadbf7d9aef27fe448f8e72d821..ac152484bcec45180ac98b843628108006ad46e6 100644
--- a/src/app/client/src/app/modules/learn/components/course-consumption/assessment-player/assessment-player.component.html
+++ b/src/app/client/src/app/modules/learn/components/course-consumption/assessment-player/assessment-player.component.html
@@ -6,7 +6,7 @@
<div class="ui container py-0 px-0 d-flex flex-ai-center">
<div class="p-0 d-flex flex-ai-center w-100">
<!-- Back button -->
- <button type="button" [ngClass]="layoutConfiguration ? 'sb-btn-round' : ''" class="sb-btn sb-btn-normal sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0" tabindex="0" (click)="goBack(); logTelemetry('back-track', courseHierarchy)" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
+ <button type="button" [ngClass]="layoutConfiguration ? 'sb-btn-primary sb-btn-round' : 'sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0'" class="sb-btn sb-btn-normal" tabindex="0" (click)="goBack(); logTelemetry('back-track', courseHierarchy)" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
<i class="icon-svg icon-svg--xxs icon-back mr-4"><svg class="icon icon-svg--primary">
<use xlink:href="assets/images/sprite.svg#arrow-long-left"></use>
</svg></i>
diff --git a/src/app/client/src/app/modules/learn/components/course-consumption/assessment-player/assessment-player.component.scss b/src/app/client/src/app/modules/learn/components/course-consumption/assessment-player/assessment-player.component.scss
index 1004b564497e402fc4327652a8c98bc825f59052..6f24ca8d692f705dc1a7f9f22a321559beedde94 100644
--- a/src/app/client/src/app/modules/learn/components/course-consumption/assessment-player/assessment-player.component.scss
+++ b/src/app/client/src/app/modules/learn/components/course-consumption/assessment-player/assessment-player.component.scss
@@ -17,7 +17,7 @@
}
}
.side-toc-content {
- max-height: calc(100vh - 320px);
+ max-height: calc(100vh - calculateRem(320px));
overflow-y: auto;
padding-bottom: calculateRem(24px);
}
diff --git a/src/app/client/src/app/modules/learn/components/course-consumption/course-consumption-header/course-consumption-header.component.html b/src/app/client/src/app/modules/learn/components/course-consumption/course-consumption-header/course-consumption-header.component.html
index 7dd5a5ed787e26717782dc0ad0848557245a207b..d1ba6b012910335ebcceabb93586a89f722e1582 100644
--- a/src/app/client/src/app/modules/learn/components/course-consumption/course-consumption-header/course-consumption-header.component.html
+++ b/src/app/client/src/app/modules/learn/components/course-consumption/course-consumption-header/course-consumption-header.component.html
@@ -9,8 +9,7 @@
<div class="w-100 d-flex flex-ai-center flex-w-wrap flex-jc-space-between">
<div class="d-flex flex-ai-center">
<!-- /* Back button */ -->
- <button type="button" [ngClass]="layoutConfiguration ? 'sb-btn-round' : ''" class="sb-btn sb-btn-normal sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0"
- tabindex="0" (click)="goBack()" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
+ <button type="button" [ngClass]="layoutConfiguration ? 'sb-btn-primary sb-btn-round' : 'sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0'" class="sb-btn sb-btn-normal" tabindex="0" (click)="goBack()" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
<i class="icon-svg icon-svg--xxs icon-back mr-4"><svg class="icon icon-svg--primary">
<use xlink:href="assets/images/sprite.svg#arrow-long-left"></use>
</svg></i>
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 834306a34f5d82e2f487e0b665bcf9a0b94a59bf..8ac610fc4e665283832312443b39a662da1ff434 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
@@ -13,7 +13,7 @@
.course-list-progress {
padding: calculateRem(16px);
&__title {
- color: var(--gray-800);
+ color: var(--primary-theme-contrast);
font-size: calculateRem(12px);
}
&__status {
@@ -182,7 +182,7 @@ xxl calculateRem(88px) 24px 20px;
.sb-no-course-found{
background-color: var(--tertiary-0);
- border: 1px solid var(--tertiary-100);
+ border: calculateRem(1px) solid var(--tertiary-100);
padding: calculateRem(16px) calculateRem(24px);
border-radius: calculateRem(4px);
font-size: calculateRem(12px);
diff --git a/src/app/client/src/app/modules/manage/components/user-org-management/user-org-management.component.scss b/src/app/client/src/app/modules/manage/components/user-org-management/user-org-management.component.scss
index c0b857f1a8e29bd71793686dfc0d8ce6ed4ccc41..56b2354b673ffb2ecfc8ca934de9dac3b4900a8a 100644
--- a/src/app/client/src/app/modules/manage/components/user-org-management/user-org-management.component.scss
+++ b/src/app/client/src/app/modules/manage/components/user-org-management/user-org-management.component.scss
@@ -69,9 +69,9 @@
.sbt-user-management {
.sb-multi-rows {
- border-radius: 24px;
- padding: 0px 16px;
- margin-top: 16px;
+ border-radius: calculateRem(24px);
+ padding: 0px calculateRem(16px);
+ margin-top: calculateRem(16px);
background: var(--sbt-compt-bg);
}
.sb-manage-section .sb-multi-rows:nth-child(odd) {
diff --git a/src/app/client/src/app/modules/manage/components/user-role-assign/user-role-assign.component.scss b/src/app/client/src/app/modules/manage/components/user-role-assign/user-role-assign.component.scss
index 090d663c254cc1a65cea5bae8a60769ab27860da..6527ceabafdb1812207f06a01efbe45f71c1754a 100644
--- a/src/app/client/src/app/modules/manage/components/user-role-assign/user-role-assign.component.scss
+++ b/src/app/client/src/app/modules/manage/components/user-role-assign/user-role-assign.component.scss
@@ -20,7 +20,7 @@
}
.sb-btn-round {
- background: var(--white);
+ // background: var(--white);
border-radius: 50% !important;
box-shadow: var(--sbt-box-shadow-6px) !important;
min-width: auto !important;
@@ -51,12 +51,12 @@
.user-details {
padding: calculateRem(24px);
- border-bottom: calculateRem(1px) solid #D7D7D7;
+ border-bottom: calculateRem(1px) solid var(--rc-e5e5e5);
.user-img {
height: calculateRem(48px);
width: calculateRem(48px);
- background-color: #FDEAFF;
+ background-color: var(--rc-E0EFFF);
justify-content: center;
border-radius: 50%;
font-weight: bold;
@@ -69,13 +69,13 @@
.user-info {
font-size: calculateRem(14px);
- color: #666;
+ color: var(--gray-400);
}
.dot-separator {
width: calculateRem(6px);
height: calculateRem(6px);
- background: #666;
+ background: var(--gray-400);
margin: 0 calculateRem(8px);
border-radius: 50%;
}
@@ -99,7 +99,7 @@
}
.user-workexp {
- border: calculateRem(1px) solid #D7D7D7;
+ border: calculateRem(1px) solid var(--rc-dedede);
border-radius: calculateRem(16px);
height: calculateRem(120px);
padding: calculateRem(16px);
@@ -136,7 +136,7 @@
margin: 0 auto;
.no-result-text {
- color: #333;
+ color: var(--gray-800);
}
}
diff --git a/src/app/client/src/app/modules/observation/components/add-entity/add-entity.component.scss b/src/app/client/src/app/modules/observation/components/add-entity/add-entity.component.scss
index ece1ad8deeb6b514b49cda598b0690ee73148ced..65481748332426b18829f4314ffec8798e3d06e6 100644
--- a/src/app/client/src/app/modules/observation/components/add-entity/add-entity.component.scss
+++ b/src/app/client/src/app/modules/observation/components/add-entity/add-entity.component.scss
@@ -1,7 +1,7 @@
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.sb-modal-content {
- height: calc(100vh - 350px) !important;
+ height: calc(100vh - calculateRem(350px)) !important;
}
.content{
max-height: 65vh;
@@ -20,14 +20,14 @@
border-top: none;
}
.search-box{
- margin-top: 15px;
+ margin-top: calculateRem(15px);
}
.sb-onboard {
&__header {
width: 100%;
- margin: 20px 0px;
- padding-left : 15px;
+ margin: calculateRem(20px) 0px;
+ padding-left : calculateRem(15px);
}
&__content {
@@ -84,6 +84,6 @@
input[type=checkbox][disabled] {
background: var(--sb-card-bg);
- border: #ccc;
+ border: var(--gray-100);
}
.search-results{ height : 100%; overflow-y: scroll; }
diff --git a/src/app/client/src/app/modules/observation/components/edit-submission/edit-submission.component.scss b/src/app/client/src/app/modules/observation/components/edit-submission/edit-submission.component.scss
index 08d70f05a4170113366afa7cd5d1913f10a7a556..a3c64b3a5b5d7784818006b33172827205baa9e5 100644
--- a/src/app/client/src/app/modules/observation/components/edit-submission/edit-submission.component.scss
+++ b/src/app/client/src/app/modules/observation/components/edit-submission/edit-submission.component.scss
@@ -1,5 +1,7 @@
+@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
+
.header {
- padding: 15px;
+ padding: calculateRem(15px);
background: var(--sb-modal-content-bg);
color: var(--sb-linkmenu-text);
}
@@ -7,10 +9,10 @@
input.edit-sub-input:focus-visible {
width: 100%;
height: 2rem;
- padding: 10px;
+ padding: calculateRem(10px);
border: 0 !important;
background: transparent;
- border-bottom: 2px solid var(--primary-color) !important;
+ border-bottom: calculateRem(2px) solid var(--primary-color) !important;
color: var(--body-color);
}
.footer {
@@ -26,8 +28,8 @@ input.edit-sub-input:focus-visible {
.sb-onboard {
&__header {
width: 100%;
- margin: 20px 0px;
- padding-left : 15px;
+ margin: calculateRem(20px) 0px;
+ padding-left : calculateRem(15px);
}
&__content {
diff --git a/src/app/client/src/app/modules/observation/components/entity-list/entity-list.component.scss b/src/app/client/src/app/modules/observation/components/entity-list/entity-list.component.scss
index 606dcb8714c9f1144c28cf4bd5064f5580b57b71..6f506cf8de205f2d13ce861379be144a3ee2db93 100644
--- a/src/app/client/src/app/modules/observation/components/entity-list/entity-list.component.scss
+++ b/src/app/client/src/app/modules/observation/components/entity-list/entity-list.component.scss
@@ -1,8 +1,10 @@
+@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
+
.entity-list{
background: var(--sb-card-bg);
- padding: 10px 24px;;
- border-radius: 30px;
- margin: 15px 0px;
+ padding: calculateRem(10px) calculateRem(24px);
+ border-radius: calculateRem(30px);
+ margin: calculateRem(15px) 0px;
label{
margin-bottom:0px;
}
diff --git a/src/app/client/src/app/modules/observation/components/observation-details/observation-details.component.html b/src/app/client/src/app/modules/observation/components/observation-details/observation-details.component.html
index ce15a19e26359eced9143f0be2cf87ff495560d5..300cef294015b5cdbf63944e6117a9180af26737 100644
--- a/src/app/client/src/app/modules/observation/components/observation-details/observation-details.component.html
+++ b/src/app/client/src/app/modules/observation/components/observation-details/observation-details.component.html
@@ -1,8 +1,7 @@
<div [ngClass]="layoutConfiguration ? 'sb-back-actionbar' : 'sb-bg-white cc-player__btn-back py-8'" class="relative position mt-0">
<div class="ui container py-0 px-0 d-flex flex-ai-center">
<!-- /* Back button */ -->
- <button type="button" (click)="goBack()" [ngClass]="layoutConfiguration ? 'sb-btn-round' : ''" class="sb-btn sb-btn-normal sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0"
- tabindex="0" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
+ <button type="button" (click)="goBack()" [ngClass]="layoutConfiguration ? 'sb-btn-primary sb-btn-round' : 'sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0'" class="sb-btn sb-btn-normal" tabindex="0" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
<i class="icon-svg icon-svg--xxs icon-back mr-4"><svg class="icon icon-svg--primary">
<use xlink:href="assets/images/sprite.svg#arrow-long-left"></use>
</svg></i>
diff --git a/src/app/client/src/app/modules/observation/components/observation-details/observation-details.component.scss b/src/app/client/src/app/modules/observation/components/observation-details/observation-details.component.scss
index 93179659145ec53c95c6e5fac615b1d1df2bede6..773b567345d66ceae7607067f56da599d9001d63 100644
--- a/src/app/client/src/app/modules/observation/components/observation-details/observation-details.component.scss
+++ b/src/app/client/src/app/modules/observation/components/observation-details/observation-details.component.scss
@@ -1,18 +1,20 @@
+@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
+
.observation-detail-box{
display: inline-flex;
max-width: 100%;
min-width: 100%;
- margin: 15px 0px;
+ margin: calculateRem(15px) 0px;
}
.submissions{
h5{
font-weight: 600;
}
.evidences-list{
- margin: 5px 0px;
+ margin: calculateRem(5px) 0px;
background: var(--sb-card-bg) !important;
border-radius: var(--sbt-bradius-24);
- padding: 8px 24px;
+ padding: calculateRem(8px) calculateRem(24px);
}
}
.icon-svg{
@@ -42,7 +44,7 @@
.center-align {
align-self: center;
justify-self: center;
- padding: 5px 0;
+ padding: calculateRem(5px) 0;
}
.white-space-wrap {
text-overflow: ellipsis;
diff --git a/src/app/client/src/app/modules/observation/components/observation-listing/observation-listing.component.scss b/src/app/client/src/app/modules/observation/components/observation-listing/observation-listing.component.scss
index 69fa0431874a2a7cc8b6006eeec3de7fac7f9d45..bf5d02230a2712f85b83f314deeac60a8c7ea0dd 100644
--- a/src/app/client/src/app/modules/observation/components/observation-listing/observation-listing.component.scss
+++ b/src/app/client/src/app/modules/observation/components/observation-listing/observation-listing.component.scss
@@ -3,7 +3,4 @@
grid-template-columns: repeat(auto-fill,minmax(252px,1fr));
grid-gap: 1rem;
grid-row-gap: 1.5rem;
- &--item{
-
- }
}
\ No newline at end of file
diff --git a/src/app/client/src/app/modules/observation/components/submissions/submission.component.scss b/src/app/client/src/app/modules/observation/components/submissions/submission.component.scss
index 9ea1c99295a83da9754b38f1fdfdc39216021325..18d3f3009218357a6cac76d313ccd6632db63b42 100644
--- a/src/app/client/src/app/modules/observation/components/submissions/submission.component.scss
+++ b/src/app/client/src/app/modules/observation/components/submissions/submission.component.scss
@@ -1,5 +1,7 @@
+@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
+
.submissions {
- border-radius: 24px;
+ border-radius: calculateRem(24px);
margin: 0.5rem 0;
h5 {
@@ -14,10 +16,10 @@
}
.evidences-list {
- margin: 5px 0px;
+ margin: calculateRem(5px) 0px;
background: var(--sbt-compt-bg) !important;
border-radius: var(--sbt-bradius-24);
- padding: 8px 24px;
+ padding: calculateRem(8px) calculateRem(24px);
}
}
@@ -47,13 +49,13 @@
.icon {
color: var(--primary-400) !important;
- padding-left: 15px;
+ padding-left: calculateRem(15px);
}
.center-align {
align-self: center;
justify-self: center;
- padding: 5px 0;
+ padding: calculateRem(5px) 0;
}
.white-space-wrap {
diff --git a/src/app/client/src/app/modules/player-helper/components/content-licence/content-licence.component.scss b/src/app/client/src/app/modules/player-helper/components/content-licence/content-licence.component.scss
index ae3bf76658180618263f5837fb85ab674f7aa0fb..5bfbd1afec80c98fee6a81b9581058bddd06e731 100644
--- a/src/app/client/src/app/modules/player-helper/components/content-licence/content-licence.component.scss
+++ b/src/app/client/src/app/modules/player-helper/components/content-licence/content-licence.component.scss
@@ -27,7 +27,7 @@
}
.contentdata-description {
- border-bottom: 0.5px solid var(--rc-979797);
+ border-bottom: calculateRem(0.5px) solid var(--rc-979797);
}
.credits-section {
diff --git a/src/app/client/src/app/modules/player-helper/components/player/player.component.scss b/src/app/client/src/app/modules/player-helper/components/player/player.component.scss
index 42a0cc8d8354c14da3e48447223ec812196e67c4..155dae1aeee262842ce7da375386e83c2a02dadc 100644
--- a/src/app/client/src/app/modules/player-helper/components/player/player.component.scss
+++ b/src/app/client/src/app/modules/player-helper/components/player/player.component.scss
@@ -92,7 +92,7 @@
transition: all ease .3s;
iframe {
height: calc(100vh - 4rem) !important;
- border:10px solid rebeccapurple;
+ border:calculateRem(10px) solid var(--primary-400);
}
}
diff --git a/src/app/client/src/app/modules/program-dashboard/components/program-datasets/program-datasets.component.html b/src/app/client/src/app/modules/program-dashboard/components/program-datasets/program-datasets.component.html
index 021225c6f62c3b3b289368dec3d08a5416bdd270..7a246860cda46f5c8bbdbaf0a6c9abdb112a04c9 100644
--- a/src/app/client/src/app/modules/program-dashboard/components/program-datasets/program-datasets.component.html
+++ b/src/app/client/src/app/modules/program-dashboard/components/program-datasets/program-datasets.component.html
@@ -7,9 +7,7 @@
<div class="py-0 d-flex flex-ai-center w-100">
<!-- /* Back button */ -->
<div class="mr-12">
- <button type="button" [ngClass]="layoutConfiguration ? 'sb-btn-round' : ''"
- class="sb-btn sb-btn-normal sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0" tabindex="0"
- (click)="closeDashboard()" id="goBack" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
+ <button type="button" [ngClass]="layoutConfiguration ? 'sb-btn-primary sb-btn-round' : 'sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0'" class="sb-btn sb-btn-normal" tabindex="0" (click)="closeDashboard()" id="goBack" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
<em class="icon-svg icon-svg--xxs icon-back mr-4"><svg class="icon icon-svg--primary">
<use xlink:href="assets/images/sprite.svg#arrow-long-left"></use>
</svg></em>
diff --git a/src/app/client/src/app/modules/program-dashboard/components/program-datasets/program-datasets.component.scss b/src/app/client/src/app/modules/program-dashboard/components/program-datasets/program-datasets.component.scss
index 0fea300e287865043c07e595a0fe1aaab217ea3c..5ba9253831b708a7dff0fee607cdaa929868572b 100644
--- a/src/app/client/src/app/modules/program-dashboard/components/program-datasets/program-datasets.component.scss
+++ b/src/app/client/src/app/modules/program-dashboard/components/program-datasets/program-datasets.component.scss
@@ -1,3 +1,5 @@
+@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
+
.sb-modal-actions {
display: flex;
align-items: center;
@@ -83,13 +85,13 @@
}
.sb-label-value {
- border-radius: 24px;
- padding: 7px;
- padding-right: 9px;
- padding-left: 9px;
- background-color: #E9E8D9 !important;
- box-shadow: 4px 4px 3px 0 #C2C2C2 !important;
- color: #333;
+ border-radius: calculateRem(24px);
+ padding: calculateRem(7px);
+ padding-right: calculateRem(9px);
+ padding-left: calculateRem(9px);
+ background-color: var(---rc-e9e8d9) !important;
+ box-shadow: calculateRem(4px) calculateRem(4px) calculateRem(3px) 0 var(--gray-100) !important;
+ color: var(--gray-800);
margin-bottom: 0.25rem;
margin-right: 0.25rem;
diff --git a/src/app/client/src/app/modules/program-dashboard/shared/sb-bignumber/sb-bignumber.component.scss b/src/app/client/src/app/modules/program-dashboard/shared/sb-bignumber/sb-bignumber.component.scss
index 568ea109556c1ceecbe0e896222560afe6f4ed6b..35027e92f2772ed07b6d807f3eab6f49dd2c9d51 100644
--- a/src/app/client/src/app/modules/program-dashboard/shared/sb-bignumber/sb-bignumber.component.scss
+++ b/src/app/client/src/app/modules/program-dashboard/shared/sb-bignumber/sb-bignumber.component.scss
@@ -1,3 +1,5 @@
+@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
+
.sb-last-update-status {
font-size: calculateRem(12px);
font-weight: bold;
diff --git a/src/app/client/src/app/modules/program-dashboard/shared/sb-chart/sb-chart.component.scss b/src/app/client/src/app/modules/program-dashboard/shared/sb-chart/sb-chart.component.scss
index 2b4164bdcd9ef2d8cee4717cc2c1c89d718f7366..25d5c6e5096770ddb8c0a33bc898eea1a70fd0d8 100644
--- a/src/app/client/src/app/modules/program-dashboard/shared/sb-chart/sb-chart.component.scss
+++ b/src/app/client/src/app/modules/program-dashboard/shared/sb-chart/sb-chart.component.scss
@@ -10,13 +10,13 @@
}
.sb-label-value {
- border-radius: 24px;
- padding: 7px;
- padding-right: 9px;
- padding-left: 9px;
- background-color: #E9E8D9 !important;
- box-shadow: 4px 4px 3px 0 #C2C2C2 !important;
- color: #333;
+ border-radius: calculateRem(24px);
+ padding: calculateRem(7px);
+ padding-right: calculateRem(9px);
+ padding-left: calculateRem(9px);
+ background-color: var(---rc-e9e8d9) !important;
+ box-shadow: calculateRem(4px) calculateRem(4px) calculateRem(3px) 0 var(--gray-100) !important;
+ color: var(--gray-800);
margin-bottom: 0.25rem;
margin-right: 0.25rem;
@@ -26,7 +26,7 @@
.sb-filter__content {
.sb-prominent-filter-field {
width: 48%;
- margin-bottom: 10px;
+ margin-bottom: calculateRem(10px);
}
}
.sb-filter-modal {
@@ -52,8 +52,8 @@
}
.mat-dialog-container {
- background-color: #E9E8D9 !important;
- border-radius: 24px;
+ background-color: var(--rc-e9e8d9) !important;
+ border-radius: calculateRem(24px);
}
.customGraph {
@@ -124,8 +124,8 @@
&__container {
width: 100%;
height: 100vh;
- min-height: 400px;
- background-color: #E9E8D9 !important;
+ min-height: calculateRem(400px);
+ background-color: var(--rc-e9e8d9) !important;
padding: calculateRem(24px);
margin: 0 auto;
display: flex;
@@ -138,7 +138,6 @@
@include respond-above(sm) {
border-radius: calculateRem(8px);
max-width: calculateRem(1008px);
- // min-height: calculateRem(610px);
height: auto;
}
}
diff --git a/src/app/client/src/app/modules/public/module/course/components/batch/public-batch-details/public-batch-details.component.scss b/src/app/client/src/app/modules/public/module/course/components/batch/public-batch-details/public-batch-details.component.scss
index 89d85689851ef5b6f16ccacdcafb3b961ed44fe3..e29809ba11cf7ec1cb5f682bd34820cf84544ea4 100644
--- a/src/app/client/src/app/modules/public/module/course/components/batch/public-batch-details/public-batch-details.component.scss
+++ b/src/app/client/src/app/modules/public/module/course/components/batch/public-batch-details/public-batch-details.component.scss
@@ -1,18 +1,20 @@
+@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
+
ul {
list-style-type: none;
padding:0px;margin:0px;
}
li {
display: grid;
- grid-template-columns: 20px auto;
+ grid-template-columns: calculateRem(20px) auto;
justify-content: start;
align-items: center;
margin-bottom:1rem
}
li::before {
content: ">";
- font-size: 12px;
- color: #999;
+ font-size: calculateRem(12px);
+ color: var(--gray-200);
font-weight:bold;
}
diff --git a/src/app/client/src/app/modules/public/module/course/components/course-consumption/public-course-consumption-page/public-course-consumption-page.component.html b/src/app/client/src/app/modules/public/module/course/components/course-consumption/public-course-consumption-page/public-course-consumption-page.component.html
index eeb3348c01bc70223640bae7d0657f985c230686..7996f216d75df177610342c714f3116a4527fc61 100644
--- a/src/app/client/src/app/modules/public/module/course/components/course-consumption/public-course-consumption-page/public-course-consumption-page.component.html
+++ b/src/app/client/src/app/modules/public/module/course/components/course-consumption/public-course-consumption-page/public-course-consumption-page.component.html
@@ -5,9 +5,7 @@
<div class="ui container py-0 px-0 d-flex flex-ai-center">
<div class="py-0 d-flex flex-ai-center w-100">
<!-- /* Back button */ -->
- <button type="button" [ngClass]="layoutConfiguration ? 'sb-btn-round' : ''"
- class="sb-btn sb-btn-normal sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0" tabindex="0"
- (click)="redirectToExplore()" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
+ <button type="button" [ngClass]="layoutConfiguration ? 'sb-btn-primary sb-btn-round' : 'sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0'" class="sb-btn sb-btn-normal" tabindex="0" (click)="redirectToExplore()" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
<i class="icon-svg icon-svg--xxs icon-back mr-4"><svg class="icon icon-svg--primary">
<use xlink:href="assets/images/sprite.svg#arrow-long-left"></use>
</svg></i>
diff --git a/src/app/client/src/app/modules/public/module/explore/components/explore-content/explore-content.component.scss b/src/app/client/src/app/modules/public/module/explore/components/explore-content/explore-content.component.scss
index 69fa0431874a2a7cc8b6006eeec3de7fac7f9d45..bf5d02230a2712f85b83f314deeac60a8c7ea0dd 100644
--- a/src/app/client/src/app/modules/public/module/explore/components/explore-content/explore-content.component.scss
+++ b/src/app/client/src/app/modules/public/module/explore/components/explore-content/explore-content.component.scss
@@ -3,7 +3,4 @@
grid-template-columns: repeat(auto-fill,minmax(252px,1fr));
grid-gap: 1rem;
grid-row-gap: 1.5rem;
- &--item{
-
- }
}
\ No newline at end of file
diff --git a/src/app/client/src/app/modules/public/module/group/components/explore-group/explore-group.component.html b/src/app/client/src/app/modules/public/module/group/components/explore-group/explore-group.component.html
index fc8a9eb0af7c5944cb1bcda374a1bd168107af97..f136e2a65b6d2b5d142ef4dcd6173e0e6d776bb9 100644
--- a/src/app/client/src/app/modules/public/module/group/components/explore-group/explore-group.component.html
+++ b/src/app/client/src/app/modules/public/module/group/components/explore-group/explore-group.component.html
@@ -4,8 +4,7 @@
<app-explore-ftu-popup *ngIf="showWelcomePopup" (close)="showFtuPopup(false)"></app-explore-ftu-popup>
<div [ngClass]="layoutConfiguration ? 'sb-back-actionbar mt-0' : 'sb-bg-white cc-player__btn-back'" class="relative position mt-0" [appTelemetryImpression]="telemetryImpression">
<div class="ui container d-flex flex-ai-center">
- <button type="button" (click)="goBack()" [ngClass]="layoutConfiguration ? 'sb-btn-round' : ''" class="sb-btn sb-btn-normal sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0"
- tabindex="0" attr.aria-label=“{{resourceService?.frmelmnts?.btn?.back}}â€><i
+ <button type="button" (click)="goBack()" [ngClass]="layoutConfiguration ? 'sb-btn-primary sb-btn-round' : 'sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0'" class="sb-btn sb-btn-normal" tabindex="0" attr.aria-label=“{{resourceService?.frmelmnts?.btn?.back}}â€><i
class="icon-svg icon-svg--xxs icon-back mr-4"><svg class="icon icon-svg--primary">
<use xlink:href="assets/images/sprite.svg#arrow-long-left"></use>
</svg></i><span>{{resourceService?.frmelmnts?.btn?.back}}</span> </button>
diff --git a/src/app/client/src/app/modules/public/module/guest-profile/components/guest-profile/guest-profile.component.html b/src/app/client/src/app/modules/public/module/guest-profile/components/guest-profile/guest-profile.component.html
index 1eef9124ad1261d8074697d46fc57a30b2ed115b..6d0bf84ebca45ad64415ca7dbea1ec4503b2601d 100644
--- a/src/app/client/src/app/modules/public/module/guest-profile/components/guest-profile/guest-profile.component.html
+++ b/src/app/client/src/app/modules/public/module/guest-profile/components/guest-profile/guest-profile.component.html
@@ -2,8 +2,7 @@
<!--profile Content Header -->
<div [ngClass]="layoutConfiguration ? 'sb-back-actionbar' : 'sb-bg-white cc-player__btn-back'" class="relative position mt-0" [ngClass]="{'header-block': isFullScreenView}">
<div class="ui container py-0 px-0 d-flex flex-ai-center">
- <button type="button" (click)="goBack()" [ngClass]="layoutConfiguration ? 'sb-btn-round' : ''" class="sb-btn sb-btn-normal sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0"
- tabindex="0" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
+ <button type="button" (click)="goBack()" [ngClass]="layoutConfiguration ? 'sb-btn-primary sb-btn-round' : 'sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0'" class="sb-btn sb-btn-normal" tabindex="0" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
<i class="icon-svg icon-svg--xxs icon-back mr-4"><svg class="icon icon-svg--primary">
<use xlink:href="assets/images/sprite.svg#arrow-long-left"></use>
</svg></i>
diff --git a/src/app/client/src/app/modules/public/module/help/components/faq-report/faq-report.component.scss b/src/app/client/src/app/modules/public/module/help/components/faq-report/faq-report.component.scss
index 87be44a05458dfac54deca1317957322b95edd97..6f71414e6a9f4872bcc85f3ffc384fdb6b18377d 100644
--- a/src/app/client/src/app/modules/public/module/help/components/faq-report/faq-report.component.scss
+++ b/src/app/client/src/app/modules/public/module/help/components/faq-report/faq-report.component.scss
@@ -1,13 +1,13 @@
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
h6 {
- color: #333333;
+ color: var(--gray-800);
font-size: 1.125rem;
font-weight: bold;
}
p {
- color: #666666;
+ color: var(--gray-400);
font-size: 0.75rem;
}
@@ -16,7 +16,7 @@ sb-form.faq-sbforms {}
::ng-deep {
sb-form.faq-sbforms .multi-select-container .list-border {
background: var(--white);
- border: 0px solid #ddd !important;
+ border: 0px solid var(--rc-dddddd) !important;
}
.sb-textarea {
@@ -24,12 +24,12 @@ sb-form.faq-sbforms {}
}
.sb-modal-dropdown-web ul {
- border: 0 solid #ddd !important;
+ border: 0 solid var(--rc-dddddd) !important;
}
sb-form.faq-sbforms>div:first-child {
display: grid;
- gap: 16px;
+ gap: calculateRem(16px);
grid-template-columns: auto;
@include respond-above(sm) {
@@ -86,7 +86,7 @@ sb-form.faq-sbforms {}
> div {
cursor: pointer;
- padding: 16px;
+ padding: calculateRem(16px);
}
}
}
@@ -96,7 +96,7 @@ sb-form.faq-sbforms {}
height: 16rem;
}
.remaining-length {
- color: #575757 !important;
+ color: var(--gray-400) !important;
}
}
}
diff --git a/src/app/client/src/app/modules/public/module/help/components/faq/faq.component.html b/src/app/client/src/app/modules/public/module/help/components/faq/faq.component.html
index 5e4b8fc2358e953d42b02ddf0d5803b83d651cc8..99832975ea4aec85e3708599f67b1e31654d48c6 100644
--- a/src/app/client/src/app/modules/public/module/help/components/faq/faq.component.html
+++ b/src/app/client/src/app/modules/public/module/help/components/faq/faq.component.html
@@ -3,8 +3,7 @@
</app-landing-section>
<div [ngClass]="layoutConfiguration ? 'sb-back-actionbar' : 'sb-bg-white cc-player__btn-back'" class="relative position mt-0">
<div class="ui container d-flex flex-ai-center">
- <button type="button" (click)="goBack()" [ngClass]="layoutConfiguration ? 'sb-btn-round' : ''" class="sb-btn sb-btn-normal sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0"
- tabindex="0" attr.aria-label=“{{resourceService?.frmelmnts?.btn?.back}}â€><i
+ <button type="button" (click)="goBack()" [ngClass]="layoutConfiguration ? 'sb-btn-primary sb-btn-round' : 'sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0'" class="sb-btn sb-btn-normal" tabindex="0" attr.aria-label=“{{resourceService?.frmelmnts?.btn?.back}}â€><i
class="icon-svg icon-svg--xxs icon-back mr-4"><svg class="icon icon-svg--primary">
<use xlink:href="assets/images/sprite.svg#arrow-long-left"></use>
</svg></i><span>{{resourceService?.frmelmnts?.btn?.back}}</span> </button>
diff --git a/src/app/client/src/app/modules/public/module/help/components/faq/faq.component.scss b/src/app/client/src/app/modules/public/module/help/components/faq/faq.component.scss
index 8df5b2b10d2801720c7161ce170c8fb3fd42acba..3c5015a03611a7366a8a5c3d51d686270c54436e 100644
--- a/src/app/client/src/app/modules/public/module/help/components/faq/faq.component.scss
+++ b/src/app/client/src/app/modules/public/module/help/components/faq/faq.component.scss
@@ -34,10 +34,10 @@
}
code {
- background-color: #eee;
- border-radius: 3px;
+ background-color: var(--rc-eeeeee);
+ border-radius: calculateRem(3px);
font-family: courier, monospace;
- padding: 0 3px;
+ padding: 0 calculateRem(3px);
}
}
​
@@ -48,7 +48,7 @@
flex-basis: 100%;
}
.visit-helpcenter__btn {
- margin-top: 16px;
+ margin-top: calculateRem(16px);
}
}
}
@@ -78,10 +78,10 @@
margin-bottom: auto;
}
code {
- background-color: #eee;
- border-radius: 3px;
+ background-color: var(--rc-eeeeee);
+ border-radius: calculateRem(3px);
font-family: courier, monospace;
- padding: 0 3px;
+ padding: 0 calculateRem(3px);
}
}
}
@@ -181,7 +181,7 @@
left: 0;
right: 0;
bottom: 0;
- background-color: #ccc;
+ background-color: var(--gray-100);
-webkit-transition: .4s;
transition: .4s;
}
diff --git a/src/app/client/src/app/modules/public/module/help/components/offline-help-videos/offline-help-videos.component.scss b/src/app/client/src/app/modules/public/module/help/components/offline-help-videos/offline-help-videos.component.scss
index 4ba298a4d49f567541dd947c5eed210ceaf88bd8..4d1fe1d1b9596e864a69672b18a6fcbf8002bb8b 100644
--- a/src/app/client/src/app/modules/public/module/help/components/offline-help-videos/offline-help-videos.component.scss
+++ b/src/app/client/src/app/modules/public/module/help/components/offline-help-videos/offline-help-videos.component.scss
@@ -11,14 +11,14 @@
cursor: pointer;
position: relative;
border-bottom: calculateRem(1px) solid var(--gray-0);
- box-shadow: 0 calculateRem(3px) calculateRem(5px) 0 rgba(0, 0, 0, 0.12);
+ box-shadow: 0 calculateRem(3px) calculateRem(5px) 0 rgba(var(--rc-rgba-black), 0.12);
contain: content;
&.active {
background: var(--primary-100);
}
@include respond-above(sm) {
border-radius: calculateRem(2px);
- box-shadow: 0 calculateRem(2px) calculateRem(7px) 0 rgba(0, 0, 0, 0.16);
+ box-shadow: 0 calculateRem(2px) calculateRem(7px) 0 rgba(var(--rc-rgba-black), 0.16);
border-bottom: 0px solid var(--gray-0);
}
&__main-area {
@@ -32,7 +32,6 @@
height: calculateRem(72px);
width: calculateRem(72px);
overflow: hidden;
- /* margin-right: 8px; */
flex: 0 0 calculateRem(72px);
padding: calculateRem(8px);
diff --git a/src/app/client/src/app/modules/public/module/offline/components/content-manager-info-pop-up/content-manager-info-pop-up.component.scss b/src/app/client/src/app/modules/public/module/offline/components/content-manager-info-pop-up/content-manager-info-pop-up.component.scss
index 74daafcbf4849d4f7048de20152a9e28219c3731..3cea83a175ea1db0163d16370bdaa923ea6d3eda 100644
--- a/src/app/client/src/app/modules/public/module/offline/components/content-manager-info-pop-up/content-manager-info-pop-up.component.scss
+++ b/src/app/client/src/app/modules/public/module/offline/components/content-manager-info-pop-up/content-manager-info-pop-up.component.scss
@@ -3,11 +3,11 @@
.warning-ecar-list {
width: 100%;
line-height: normal;
- border-top: calculateRem(1px) solid #ddd;
+ border-top: calculateRem(1px) solid var(--rc-dddddd);
font-size:calculateRem(14px);
}
.sb-modal-content .warning-ecar-list:last-of-type{
- border-bottom: calculateRem(1px) solid #ddd;
+ border-bottom: calculateRem(1px) solid var(--rc-dddddd);
}
.import-content{
color:var(--tertiary-100);
diff --git a/src/app/client/src/app/modules/public/module/offline/components/content-manager/content-manager.component.scss b/src/app/client/src/app/modules/public/module/offline/components/content-manager/content-manager.component.scss
index ba1c2fb340d64b5c0d87c3fc6a843dbe17c91e03..7a071a14583097356930963d209210887359c580 100644
--- a/src/app/client/src/app/modules/public/module/offline/components/content-manager/content-manager.component.scss
+++ b/src/app/client/src/app/modules/public/module/offline/components/content-manager/content-manager.component.scss
@@ -1,3 +1,4 @@
+@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.sb-desktop-content-manager {
z-index: 999;
position: fixed;
@@ -14,11 +15,11 @@
}
.sb-desktop-content-manager.sb-mat-accordion .mat-expansion-panel .mat-expansion-panel-header {
- background: #5630dc;
+ background: var(--primary-color);
border-radius: 0;
height:3rem !important;
&:hover {
- background: #5630dc;
+ background: var(--primary-color);
}
}
diff --git a/src/app/client/src/app/modules/public/module/offline/components/info-card/info-card.component.scss b/src/app/client/src/app/modules/public/module/offline/components/info-card/info-card.component.scss
index 88aec9e149e306586168a187ea77138b61b0f999..94e41d76ac341bf67ad0198ae982b19d91895451 100644
--- a/src/app/client/src/app/modules/public/module/offline/components/info-card/info-card.component.scss
+++ b/src/app/client/src/app/modules/public/module/offline/components/info-card/info-card.component.scss
@@ -3,7 +3,7 @@
.info-container{
width: 100%;
padding:1.5rem ;
- box-shadow: 0px calculateRem(5px) calculateRem(10px) 0px rgba(0,0,0,0.12);
+ box-shadow: 0px calculateRem(5px) calculateRem(10px) 0px rgba(var(--rc-rgba-black), 0.12);
&__label{
&:hover{
diff --git a/src/app/client/src/app/modules/public/module/offline/components/library/library.component.scss b/src/app/client/src/app/modules/public/module/offline/components/library/library.component.scss
index 279c8055b7374dff5caf04581bfb1069d2e91a70..17b5901a87a5545065397739433635fa86b81819 100644
--- a/src/app/client/src/app/modules/public/module/offline/components/library/library.component.scss
+++ b/src/app/client/src/app/modules/public/module/offline/components/library/library.component.scss
@@ -1,7 +1,7 @@
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
:host {
.page {
- background: rgba(0, 0, 0, 0.6);
+ background: rgba(var(--rc-rgba-black), 0.6);
h6 {
color: var(--gray-0);
font-weight: normal;
@@ -41,7 +41,7 @@
}
.ui.dimmer .ui.loader:before {
- border-color: rgba(255, 255, 255, 0.01);
+ border-color: rgba(var(--rc-rgba-white), 0.01);
}
.ui.dimmer .ui.loader:after {
border-color: var(--primary-200) transparent transparent;
diff --git a/src/app/client/src/app/modules/public/module/sign-in/sso/components/select-org/select-org.component.scss b/src/app/client/src/app/modules/public/module/sign-in/sso/components/select-org/select-org.component.scss
index 5bc8df344d10d6daf6ea674f6dfd2e78ddf863ce..9112762864cde3504cd3c6b744dc5905047ab8f4 100644
--- a/src/app/client/src/app/modules/public/module/sign-in/sso/components/select-org/select-org.component.scss
+++ b/src/app/client/src/app/modules/public/module/sign-in/sso/components/select-org/select-org.component.scss
@@ -54,10 +54,10 @@
color: var(--gray-400);
}
.orange.text {
- color: #A30010;
+ color: var(--accessibility-red);
}
.orange-border {
- border-color: #A30010 !important;
+ border-color: var(--accessibility-red) !important;
}
.blue.text {
color: var(--primary-color);
@@ -73,7 +73,7 @@
}
.ui.basic.error.label {
background: none !important;
- color: #A30010 !important;
+ color: var(--accessibility-red) !important;
border: 0 !important;
padding-left: 0;
font-size: 1rem;
diff --git a/src/app/client/src/app/modules/public/module/sign-in/sso/components/update-contact/update-contact.component.scss b/src/app/client/src/app/modules/public/module/sign-in/sso/components/update-contact/update-contact.component.scss
index d1e080da96d2b42672b987bbf5764fb5d5e712be..df24074053b79e82af6aa834d89d00630a5d1b4f 100644
--- a/src/app/client/src/app/modules/public/module/sign-in/sso/components/update-contact/update-contact.component.scss
+++ b/src/app/client/src/app/modules/public/module/sign-in/sso/components/update-contact/update-contact.component.scss
@@ -54,10 +54,10 @@
color: var(--gray-400);
}
.orange.text {
- color: #A30010;
+ color: var(--accessibility-red);
}
.orange-border {
- border-color: #A30010 !important;
+ border-color: var(--accessibility-red) !important;
}
.blue.text {
color: var(--primary-color);
@@ -73,7 +73,7 @@
}
.ui.basic.error.label {
background: none !important;
- color: #A30010 !important;
+ color: var(--accessibility-red) !important;
border: 0 !important;
padding-left: 0;
font-size: 1rem;
@@ -128,7 +128,7 @@ input[type="number"]::-webkit-inner-spin-button {
}
.ui.radio.checkbox input:checked ~ label:before {
- border: 2px solid var(--primary-400);
+ border: calculateRem(2px) solid var(--primary-400);
}
.ui.radio.checkbox input:checked ~ label:after {
background: var(--primary-400);
diff --git a/src/app/client/src/app/modules/public/module/signup/components/otp/otp.component.scss b/src/app/client/src/app/modules/public/module/signup/components/otp/otp.component.scss
index 8188a2080c814648f6c6826b76d19669ae684e22..6bad48a3eff39555606395eb8590a608c8593180 100644
--- a/src/app/client/src/app/modules/public/module/signup/components/otp/otp.component.scss
+++ b/src/app/client/src/app/modules/public/module/signup/components/otp/otp.component.scss
@@ -66,10 +66,10 @@
font-size: calculateRem(14px);
}
.orange.text {
- color: #A30010;
+ color: var(--accessibility-red);
}
.orange-border {
- border-color: #A30010 !important;
+ border-color: var(--accessibility-red) !important;
}
.blue.text {
color: var(--primary-color);
@@ -85,7 +85,7 @@
}
.ui.basic.error.label {
background: none !important;
- color: #A30010 !important;
+ color: var(--accessibility-red) !important;
border: 0 !important;
padding-left: 0;
font-size: 1rem;
@@ -181,7 +181,7 @@ input[type=number]::-webkit-inner-spin-button {
color: var(--gray-200) !important;
}
.sb-btn-disabled {
- color: #555;
+ color: var(--gray-400);
}
// user-details gray box new design css
diff --git a/src/app/client/src/app/modules/public/module/signup/components/signup-basic-info/signup-basic-info.component.scss b/src/app/client/src/app/modules/public/module/signup/components/signup-basic-info/signup-basic-info.component.scss
index f4ec7196792b826a2f2016b7786117a8ddeafbfa..7d7bc63d4b11eee8fde6b5822d804e73ae0865cd 100644
--- a/src/app/client/src/app/modules/public/module/signup/components/signup-basic-info/signup-basic-info.component.scss
+++ b/src/app/client/src/app/modules/public/module/signup/components/signup-basic-info/signup-basic-info.component.scss
@@ -1,14 +1,14 @@
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.sb-mat__dropdown.sb-mat__dropdown--autocmp {
- border: 1px solid var(--gray-200);
+ border: calculateRem(1px) solid var(--gray-200);
border-radius: calculateRem(24px);
}
::ng-deep {
html[layout=joy] .sb-form-control {
min-height: 2.5rem !important;
- border-radius: 40px !important;
+ border-radius: calculateRem(40px) !important;
}
html[layout="joy"] .sb-form-control:hover {
border: 0.0625rem solid var(--gray-200);
diff --git a/src/app/client/src/app/modules/public/module/signup/components/signup-email-password/signup-email-password.component.scss b/src/app/client/src/app/modules/public/module/signup/components/signup-email-password/signup-email-password.component.scss
index 9aedf651be84d0a3ce82b7a8a55c2c48feb0d9e1..eb9d58d61bdac8aed130b709b994363c17f01058 100644
--- a/src/app/client/src/app/modules/public/module/signup/components/signup-email-password/signup-email-password.component.scss
+++ b/src/app/client/src/app/modules/public/module/signup/components/signup-email-password/signup-email-password.component.scss
@@ -27,8 +27,4 @@
padding-left: calculateRem(40px);
}
}
-
- // .sb-form-control::placeholder {
- // padding-left: 24px;
- // }
}
\ No newline at end of file
diff --git a/src/app/client/src/app/modules/public/module/signup/components/signup/signup.component.scss b/src/app/client/src/app/modules/public/module/signup/components/signup/signup.component.scss
index ec12be391b9bbaa9e4f67ae444753babbad11508..f56a052ad615cccfa719278652929eefb6f9069a 100644
--- a/src/app/client/src/app/modules/public/module/signup/components/signup/signup.component.scss
+++ b/src/app/client/src/app/modules/public/module/signup/components/signup/signup.component.scss
@@ -54,17 +54,6 @@
position: relative;
@include respond-below(sm) {
text-align: center;
- &.fix-bottom {
- // background-color: var(--primary-0);
- // background-color: #f8fafc;
- // position: fixed;
- // bottom: 0;
- // left: 0;
- // right: 0;
- // top: unset;
- // z-index: 1;
- // border-top: calculateRem(1px) solid var(--gray-100);
- }
}
}
}
@@ -77,323 +66,4 @@
flex-direction: column;
padding-bottom: 2rem;
}
-}
-
-/* For now commented later will remove this code block(starts)
-
-.signup-background {
- overflow-y: auto;
- @include respond-between(sm, xl) {
- align-items: flex-start;
- padding-top: calculateRem(48px);
- }
- @include respond-below(sm) {
- display: unset;
- align-items: unset;
- .fullpage-background-image {
- height: unset;
- overflow-y: unset;
- }
- }
-}
-
-.ui.raised.shadow.container.segment {
- margin: calculateRem(20px) auto !important;
- padding: calculateRem(10px);
- width: calc(100% - 4%) !important;
- min-height: 90vh;
-}
-
-@media only screen and (min-width: 1024px) {
- .ui.raised.shadow.container.segment {
- margin: calculateRem(35px) auto !important;
- width: calculateRem(944px) !important;
- padding: calculateRem(20px);
- box-shadow: 0 calculateRem(2px) calculateRem(16px) 0 rgba(var(--rc-rgba-black), 0.2);
- }
-}
-
-@media only screen and (max-width: 767px) {
- .ui.form .fields {
- flex-wrap: nowrap;
- }
-}
-
-.ui.form.borderd input[type=text],
-.ui.form.borderd input[type=text]:focus,
-.ui.form.borderd input[type=email],
-.ui.form.borderd input[type=number],
-.ui.form.borderd input[type=tel],
-.ui.form.borderd input[type=password],
-.ui.form.borderd input[type=url],
-.ui.form.borderd input:not([type]),
-.ui.form.borderd input:not([type]):focus {
- border: calculateRem(1px) solid var(--gray-300);
- padding: 0.5rem 0 0.5rem 1em;
- border-radius: calculateRem(4px);
- font-size: calculateRem(14px);
-}
-
-.ui.form.borderd input:focus {
- border-color: var(--primary-400) !important;
-}
-
-.ui.light-sea-green.button {
- background: var(--secondary-400);
- color: var(--white);
- height: calculateRem(38px) !important;
-}
-
-.ui.grey.button {
- background: var(--gray-200);
- color: var(--white);
- pointer-events: none !important;
- cursor: not-allowed !important;
- height: calculateRem(38px) !important;
-}
-
-.grey.text {
- color: var(--gray-400);
-}
-
-.orange.text {
- color: #A30010;
-}
-.orange-border {
- border-color: #A30010 !important;
-}
-
-.blue.text {
- color: var(--primary-color);
-}
-
-.ui.basic.blue.navigation.label {
- background: var(--white) !important;
- color: var(--primary-color) !important;
- border: 0 !important;
- padding-left: 0;
- font-size: calculateRem(14px);
- font-weight: normal;
- padding: calculateRem(10px) 0;
-}
-
-.ui.basic.error.label {
- background: none !important;
- color: #A30010 !important;
- border: 0 !important;
- padding-left: 0;
- font-size: calculateRem(14px);
- font-weight: normal;
- padding: calculateRem(10px) 0;
-}
-
-.fullpage {
- ::ng-deep {
- .ui.fullscreen.modal>.close {
- opacity: 0;
- pointer-events: none;
- }
- }
-}
-
-i.close.icon {
- font-size: calculateRem(24px);
- position: absolute;
- right: calculateRem(6px);
- top: calculateRem(12px);
-}
-
-input[type=number]::-webkit-outer-spin-button,
-input[type=number]::-webkit-inner-spin-button {
- -webkit-appearance: none;
- margin: 0;
-}
-
-.ui.form .field>label {
- font-size: calculateRem(14px) !important;
- font-weight: normal;
-}
-
-.width-300 {
- width: calculateRem(300px) !important;
-}
-
-.ui.form.borderd [type="radio"]:checked+label:before,
-.ui.form.borderd [type="radio"]:not(:checked)+label:before {
- content: '';
- position: absolute;
- left: 0;
- top: 0;
- width: calculateRem(16px);
- height: calculateRem(16px);
- border: calculateRem(2px) solid var(--gray-300) !important;
- border-radius: 100%;
- background: var(--white);
-}
-
-.ui.form.borderd [type="radio"]:checked+label:before {
- border: calculateRem(2px) solid var(--primary-400) !important;
-}
-
-.ui.form.borderd [type="radio"]:checked+label:after,
-.ui.form.borderd [type="radio"]:not(:checked)+label:after {
- content: '';
- width: calculateRem(8px);
- height: calculateRem(8px);
- background: var(--primary-400) !important;
- position: absolute;
- top: calculateRem(4px);
- left: calculateRem(4px);
- border-radius: 100%;
- -webkit-transition: all 0.2s ease;
- transition: all 0.2s ease;
-}
-
-.ui.form.borderd [type="radio"]:not(:checked)+label:after {
- opacity: 0;
- -webkit-transform: scale(0);
- transform: scale(0);
-}
-
-.ui.form.borderd [type="radio"]:checked+label:after {
- opacity: 1;
- -webkit-transform: scale(1);
- transform: scale(1);
-}
-
-.ui[class*="left icon"].input>input {
- padding-left: 3.37142857em !important;
-}
-
-.ui.left.icon.input .icon {
- left: calculateRem(11px);
- top: calculateRem(10px);
- font-size: calculateRem(14px);
- font-family: inherit;
-}
-
-.opacity-1 {
- opacity: 1 !important;
-}
-
-.ctct-inline-form .g-recaptcha {
- display: none !important
-}
-
-.sb-requirement-field {
- font-size: calculateRem(12px);
-
- span {
- color: var(--red);
- }
-}
-
-.grey-text {
- color: var(--gray-300) !important;
- font-size: calculateRem(16px) !important;
-}
-
-.sb-form-control {
- height: calculateRem(32px);
-}
-
-.checkbox {
- label {
- font-weight: normal;
- cursor: pointer;
- }
-}
-
-.ui.form .field>label.infotext {
- font-size: var(--font-size-xs) !important;
- color: var(--gray-200);
- border: none !important;
- background: none;
-
- &:focus,
- &:hover {
- outline: none;
- border: none !important;
- }
-}
-
-.width-300 {
- width: 100% !important;
- max-width: calculateRem(300px);
-}
-
-.signup-background {
- &::-webkit-scrollbar {
- width: calculateRem(12px);
- }
-
- &::-webkit-scrollbar-thumb {
- background-color: var(--rc-c2c2c2);
- }
-
- &::-webkit-scrollbar-track {
- background-color: var(--rc-e5e5e5);
- }
-}
-
-@include respond-below(sm) {
- .signup-background::-webkit-scrollbar {
- width: calculateRem(6px);
- }
-}
-
-.password-showhideimage {
- position: absolute;
- right: calculateRem(8px);
- top: 50%;
- transform: translateY(-50%);
- cursor: pointer;
-}
-
-.year-birth {
- display: flex;
- flex-direction: row;
- font-size: calculateRem(14px);
- align-items: center;
- justify-content: center;
- margin: calculateRem(8px) 0px;
-
- label {
- margin-bottom: 0px;
- margin-right: calculateRem(4px);
- }
-
- .ui.selection.dropdown {
- min-width: calculateRem(80px);
- line-height: 1.8;
- }
-}
-
-form.Off {
- opacity: 0.5;
-}
-
-form.On {
- opacity: 1;
-}
-
-.signup-background{
- .container-wrapper{
- max-width: calculateRem(328px);
- }
-}
-
-
-.ui.form#signUpForm .required.field>.checkbox:after, .ui.form#signUpForm .required.field>label:after, .ui.form#signUpForm .required.fields.grouped>label:after, .ui.form#signUpForm .required.fields:not(.grouped)>.field>.checkbox:after, .ui.form#signUpForm .required.fields:not(.grouped)>.field>label:after {
- display: none !important;
-}
-.birthYearOptions:focus-visible {
- border: none !important;
- border-radius: 0;
- outline: none;
-}
-.sb-btn-disabled {
- color: #555;
-}
-
-For now commented later will remove this code block(ends) */
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/app/client/src/app/modules/questionnaire/questionnaire/questionnaire.component.scss b/src/app/client/src/app/modules/questionnaire/questionnaire/questionnaire.component.scss
index 3358c02da931d4101bbfd23eadce2e9c38352a34..e8ac08fd6609fe36e2b84efea52c9eaa22b0d24d 100644
--- a/src/app/client/src/app/modules/questionnaire/questionnaire/questionnaire.component.scss
+++ b/src/app/client/src/app/modules/questionnaire/questionnaire/questionnaire.component.scss
@@ -13,13 +13,13 @@
bottom: 0;
z-index: 2;
background-color: var(--sb-card-bg);
- padding: 15px 0;
- border-radius: 5px;
- margin: 15px 0;
+ padding: calculateRem(15px) 0;
+ border-radius: calculateRem(5px);
+ margin: calculateRem(15px) 0;
}
.section-list {
- margin-bottom: 20px;
+ margin-bottom: calculateRem(20px);
z-index: 9;
position: relative;
}
@@ -34,10 +34,10 @@
::ng-deep {
.question-card.sb--card {
- border-radius: 28px;
- padding: 20px;
+ border-radius: calculateRem(28px);
+ padding: calculateRem(20px);
width: 100%;
- margin-bottom: 20px;
+ margin-bottom: calculateRem(20px);
.sb-checkbox label,
.sb-radio-btn-checkbox label {
@@ -66,7 +66,7 @@
}
.question-card.sb--card:last-child {
- margin-bottom: 20px;
+ margin-bottom: calculateRem(20px);
}
.question-card.sb--card,
.sb-radio-btn-checkbox {
@@ -83,7 +83,7 @@
}
.remarks {
- margin-top: 15px;
+ margin-top: calculateRem(15px);
}
.overlay {
@@ -97,7 +97,7 @@
}
.adjust {
- margin: 15px 5px;
+ margin: calculateRem(15px) calculateRem(5px);
}
.sticky-block {
position: sticky;
diff --git a/src/app/client/src/app/modules/report/components/entity-list/entity-list.component.scss b/src/app/client/src/app/modules/report/components/entity-list/entity-list.component.scss
index 2a4f06b22d3b8f8ccad9cfbf5eac24499fdba53e..4eae981406f84cbba270b2f2c9206ed9da47497b 100644
--- a/src/app/client/src/app/modules/report/components/entity-list/entity-list.component.scss
+++ b/src/app/client/src/app/modules/report/components/entity-list/entity-list.component.scss
@@ -1,9 +1,6 @@
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.add-entity-modal{
- // .sb-modal-content {
- // height: calc(100vh - 350px) !important;
- // }
.content{
max-height: 60vh;
label{
@@ -20,15 +17,15 @@
border-top: none;
}
.search-box{
- margin-top: 15px;
+ margin-top: calculateRem(15px);
}
}
.sb-onboard {
&__header {
width: 100%;
- margin: 20px 0px;
- padding-left : 15px;
+ margin: calculateRem(20px) 0px;
+ padding-left : calculateRem(15px);
}
&__content {
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 6453bdfa897518401df112d1fa171b27676f2c23..cc6bd146af9d12a62a65076f9bb1b94e41814e01 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
@@ -79,15 +79,15 @@
.chart-container {
display: block;
- max-height: 400px;
- max-width: 400px;
+ max-height: calculateRem(400px);
+ max-width: calculateRem(400px);
margin: 0 auto;
}
.bar-chart-container {
display: block;
- max-width: 900px;
- max-height: 450px;
+ max-width: calculateRem(900px);
+ max-height: calculateRem(450px);
margin: 0 auto;
}
@@ -111,7 +111,7 @@
&__container {
width: 100%;
height: 100vh;
- min-height: 400px;
+ min-height: calculateRem(400px);
background-color: var(--sbt-body-bg) !important;
padding: calculateRem(24px);
margin: 0 auto;
@@ -212,9 +212,9 @@ input[type="checkbox"] {
}
.card-images {
- width: 90px;
- height: 90px;
- margin-right: 5px;
+ width: calculateRem(90px);
+ height: calculateRem(90px);
+ margin-right: calculateRem(5px);
}
.dropdown {
@@ -225,7 +225,7 @@ input[type="checkbox"] {
.dropdown-content {
display: none;
position: absolute;
- width: 100px;
+ width: calculateRem(100px);
z-index: 3;
}
diff --git a/src/app/client/src/app/modules/report/components/solution-listing/solution-listing.component.html b/src/app/client/src/app/modules/report/components/solution-listing/solution-listing.component.html
index d30892ae98c98fb000f10a5a800041f1cef861de..058d3eca6aeb40b7cdb79d88787fc3efab307606 100644
--- a/src/app/client/src/app/modules/report/components/solution-listing/solution-listing.component.html
+++ b/src/app/client/src/app/modules/report/components/solution-listing/solution-listing.component.html
@@ -9,8 +9,7 @@
<div class="ui container py-0 px-0 d-flex flex-ai-center">
<div class="py-0 d-flex flex-ai-center w-100">
<!-- /* Back button */ -->
- <button type="button" [ngClass]="layoutConfiguration ? 'sb-btn-round' : ''"
- class="sb-btn sb-btn-normal sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0" tabindex="0" (click)="goBack()" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
+ <button type="button" [ngClass]="layoutConfiguration ? 'sb-btn-primary sb-btn-round' : 'sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0'" class="sb-btn sb-btn-normal" tabindex="0" (click)="goBack()" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
<em class="icon-svg icon-svg--xxs icon-back mr-4"><svg class="icon icon-svg--primary">
<use xlink:href="assets/images/sprite.svg#arrow-long-left"></use>
</svg></em>
diff --git a/src/app/client/src/app/modules/report/components/solution-listing/solution-listing.component.scss b/src/app/client/src/app/modules/report/components/solution-listing/solution-listing.component.scss
index 3c68877943447caf2d45bd89eac1195742033f3a..257cc9c3aeb750989c004d81fae2b4d75910b9f5 100644
--- a/src/app/client/src/app/modules/report/components/solution-listing/solution-listing.component.scss
+++ b/src/app/client/src/app/modules/report/components/solution-listing/solution-listing.component.scss
@@ -39,43 +39,43 @@
.pull-right {
float: right !important;
- width: 120px;
+ width: calculateRem(120px);
}
.pull-left {
float:left;
font-size: 0.8125rem;
font-weight: bold;
- margin-top:7px
+ margin-top:calculateRem(7px);
}
select.search-entity {
- width: 120px;
- border: 1px solid #aaa;
- color: #333;
- border-radius: 3px;
- padding: 4px;
+ width: calculateRem(120px);
+ border: calculateRem(1px) solid var(--rc-aaaaaa);
+ color: var(--gray-800);
+ border-radius: calculateRem(3px);
+ padding: calculateRem(4px);
font-size: 0.8125rem;
- margin-bottom: 5px;
+ margin-bottom: calculateRem(5px);
font-weight: bold;
text-transform: capitalize;
}
select .select-entries{
- border: 1px solid #aaa;
- border-radius: 3px;
+ border: calculateRem(1px) solid var(--rc-aaaaaa);
+ border-radius: calculateRem(3px);
background-color: transparent;
- padding: 4px;
+ padding: calculateRem(4px);
font-size: 0.8125rem;
}
.header-section {
- width: 70px;
+ width: calculateRem(70px);
text-align: center;
}
.date-section {
- width: 180px;
+ width: calculateRem(180px);
text-align: center;
}
@@ -84,5 +84,5 @@ label {
}
.iconSize{
- font-size: 18px;
+ font-size: calculateRem(18px);
}
\ No newline at end of file
diff --git a/src/app/client/src/app/modules/shared-feature/components/collection-player/collection-player.component.html b/src/app/client/src/app/modules/shared-feature/components/collection-player/collection-player.component.html
index 279901a106eaaf7f3bd493271370244d0ec4b0a2..1e0cd6cb00813cea1c53a60000e4758deacdf1e2 100644
--- a/src/app/client/src/app/modules/shared-feature/components/collection-player/collection-player.component.html
+++ b/src/app/client/src/app/modules/shared-feature/components/collection-player/collection-player.component.html
@@ -7,8 +7,7 @@
<div [ngClass]="layoutConfiguration ? 'sb-back-actionbar' : 'sb-bg-white cc-player__btn-back'"
class="relative position mt-0">
<div class="ui container py-0 px-0 d-flex flex-ai-center">
- <button type="button" [ngClass]="layoutConfiguration ? 'sb-btn-round' : ''"
- class="sb-btn sb-btn-normal sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0" tabindex="0"
+ <button type="button" [ngClass]="layoutConfiguration ? 'sb-btn-primary sb-btn-round' : 'sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0'" class="sb-btn sb-btn-normal" tabindex="0"
(click)="closeCollectionPlayer()" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
<i class="icon-svg icon-svg--xxs icon-back mr-4"><svg class="icon icon-svg--primary">
<use xlink:href="assets/images/sprite.svg#arrow-long-left"></use>
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 55fc41c773a542241a1e57338396ce71c5a852ad..387799022299f2796aca57e1af40330e854e10c0 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
@@ -13,7 +13,6 @@
.main-side-toc-content {
overflow-y: auto;
-
@include respond-below(sm) {
height: auto;
max-height: 100%;
diff --git a/src/app/client/src/app/modules/shared-feature/components/content-player/content-player.component.html b/src/app/client/src/app/modules/shared-feature/components/content-player/content-player.component.html
index ed22f2be461e37ebb831d1861c9fffaeabdb949b..74dd7758f91adf8c7dd0da5dd09f2c7a11e3bee2 100644
--- a/src/app/client/src/app/modules/shared-feature/components/content-player/content-player.component.html
+++ b/src/app/client/src/app/modules/shared-feature/components/content-player/content-player.component.html
@@ -5,7 +5,7 @@
<div class="ui container py-0 px-0 d-flex flex-ai-center">
<div class="w-100 d-flex flex-ai-center flex-w-wrap flex-jc-space-between" *ngIf="contentData">
<div class="d-flex flex-ai-center">
- <button type="button" (click)="goBack()" [ngClass]="layoutConfiguration ? 'sb-btn-round' : ''" class="sb-btn sb-btn-normal sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0"
+ <button type="button" (click)="goBack()" [ngClass]="layoutConfiguration ? 'sb-btn-primary sb-btn-round' : 'sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0'" class="sb-btn sb-btn-normal"
tabindex="0" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
<i class="icon-svg icon-svg--xxs icon-back mr-4"><svg class="icon icon-svg--primary">
<use xlink:href="assets/images/sprite.svg#arrow-long-left"></use>
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 5bdb7c7aa74f9620d2911a72b704d734a4942536..ba817ef0ef874df1c1df6c608baba85a1f910f10 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
@@ -28,7 +28,7 @@
box-shadow: 0 0 calculateRem(10px) 0 rgba(var(--rc-rgba-black), 0.25);
z-index: 99;
&__info {
- max-height: 48px;
+ max-height: calculateRem(48px);
overflow-y: auto;
}
}
diff --git a/src/app/client/src/app/modules/shared-feature/components/dashboard/dashboard.component.scss b/src/app/client/src/app/modules/shared-feature/components/dashboard/dashboard.component.scss
index 6a6509df46e8ccc67d6750f5bb7efc53503f75d5..c637792b8386914e2a54fd27d5e5ba9e251a8041 100644
--- a/src/app/client/src/app/modules/shared-feature/components/dashboard/dashboard.component.scss
+++ b/src/app/client/src/app/modules/shared-feature/components/dashboard/dashboard.component.scss
@@ -9,7 +9,6 @@
::ng-deep {
.dataTables_wrapper {
white-space: nowrap;
- // height: calc(100vh - 100px);
display: block;
overflow: inherit;
}
@@ -25,7 +24,7 @@
box-shadow: 0.375rem 0.375rem 0.125rem 0 rgb(0 0 0 / 10%);
border-bottom: 0px !important;
background:var(--white);
- border: 1px solid var(--rc-dddddd);
+ border: calculateRem(1px) solid var(--rc-dddddd);
cursor:pointer;
}
table.dataTable thead .sorting {
diff --git a/src/app/client/src/app/modules/shared-feature/components/otp-popup/otp-popup.component.scss b/src/app/client/src/app/modules/shared-feature/components/otp-popup/otp-popup.component.scss
index 3b666a368005355b4e4dbcf0e9879d9cd1728cfc..8eb6335a2ae5798d137b64a071d1dbb8d8c63ab9 100644
--- a/src/app/client/src/app/modules/shared-feature/components/otp-popup/otp-popup.component.scss
+++ b/src/app/client/src/app/modules/shared-feature/components/otp-popup/otp-popup.component.scss
@@ -2,7 +2,7 @@
@use 'pages/sign_in_up' as *;
.orange-border {
- border-color: #A30010 !important;
+ border-color: var(--accessibility-red) !important;
}
.blue.text {
color: var(--primary-color);
diff --git a/src/app/client/src/app/modules/shared-feature/components/tnc-popup/terms-conditions-popup.component.scss b/src/app/client/src/app/modules/shared-feature/components/tnc-popup/terms-conditions-popup.component.scss
index cbbe40bf787f40fc6a4ff1c67a92bfea54df58a3..846f4043e9dddfb9e5229db78551319081c2531b 100644
--- a/src/app/client/src/app/modules/shared-feature/components/tnc-popup/terms-conditions-popup.component.scss
+++ b/src/app/client/src/app/modules/shared-feature/components/tnc-popup/terms-conditions-popup.component.scss
@@ -2,7 +2,7 @@
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.terms-and-cond-form{
- height: calc(100vh - 350px);
+ height: calc(100vh - calculateRem(350px));
iframe{
height: 100%;
}
@@ -20,7 +20,7 @@
max-width: 100%;
height: 100%;
.sb-modal-content {
- height: calc(100% - 96px);
+ height: calc(100% - calculateRem(96px));
max-height: 100%;
overflow: hidden;
}
diff --git a/src/app/client/src/app/modules/shared/components/full-page-modal/full-page-modal.component.scss b/src/app/client/src/app/modules/shared/components/full-page-modal/full-page-modal.component.scss
index 4bb2b27b94a1bb8ce3710235b838191c9e238083..2424ea6312e08194e7c5e03813aca5c3689f1d62 100644
--- a/src/app/client/src/app/modules/shared/components/full-page-modal/full-page-modal.component.scss
+++ b/src/app/client/src/app/modules/shared/components/full-page-modal/full-page-modal.component.scss
@@ -6,7 +6,7 @@
padding: 0;
padding: calculateRem(10px);
width: calc(100% - 4%) !important;
- min-height: calc(100vh - 48px);
+ min-height: calc(100vh - calculateRem(48px));
}
@media only screen and (min-width: 1024px) {
diff --git a/src/app/client/src/app/modules/shared/components/material-auto-complete/material-auto-complete.component.scss b/src/app/client/src/app/modules/shared/components/material-auto-complete/material-auto-complete.component.scss
index b3512f0db0e6204c5b636a577d575b8138d1a80a..222cde5dc9e24d30776b4e61bc784134cf34d03e 100644
--- a/src/app/client/src/app/modules/shared/components/material-auto-complete/material-auto-complete.component.scss
+++ b/src/app/client/src/app/modules/shared/components/material-auto-complete/material-auto-complete.component.scss
@@ -12,9 +12,9 @@
border-radius: calculateRem(4px);
z-index: 1;
width: 100%;
- max-height: 280px;
+ max-height: calculateRem(280px);
overflow: auto;
- box-shadow: 0 2px 3px 0 rgb(34 36 38 / 15%);
+ box-shadow: 0 calculateRem(2px) calculateRem(3px) 0 rgb(34 36 38 / 15%);
::ng-deep {
ul {
@@ -42,7 +42,7 @@
width: 100%;
height: calculateRem(32px);
padding: 0 calculateRem(20px);
- border: 1px solid #ccc;
+ border: calculateRem(1px) solid var(--gray-100);
background: var(--sb-dropdown-menu-bg);
border-radius: calculateRem(4px);
@@ -85,7 +85,7 @@
border-radius: calculateRem(24px);
}
html[data-mode="darkmode"] .sb-mat__checkbox.sb-mat__checkbox--primary .mat-checkbox-frame {
- border-color: #ccc;
+ border-color: var(--gray-100);
}
.sb-autocomp-dropdown__list {
top: 0px !important;
diff --git a/src/app/client/src/app/modules/shared/components/sb-datatable/sb-datatable.component.scss b/src/app/client/src/app/modules/shared/components/sb-datatable/sb-datatable.component.scss
index c2c3c72490ff2438b200c130b1efd99020899eaa..86c4a0401d9f764b6d2fb0ff085181f32a3f6a73 100644
--- a/src/app/client/src/app/modules/shared/components/sb-datatable/sb-datatable.component.scss
+++ b/src/app/client/src/app/modules/shared/components/sb-datatable/sb-datatable.component.scss
@@ -97,15 +97,15 @@
cursor: pointer !important;
position: absolute !important;
top: 0 !important;
- bottom: 24px !important;
- right: 10px !important;
+ bottom: calculateRem(24px) !important;
+ right: calculateRem(10px) !important;
left: 0 !important;
- padding-top: 19px !important;
+ padding-top: calculateRem(19px) !important;
text-align: right !important;
}
.ngx-datatable.scroll-vertical .datatable-body{
- height: 200px !important;
+ height: calculateRem(200px) !important;
}
.ngx-datatable.material .datatable-header .datatable-header-cell{
@@ -150,6 +150,6 @@ text-align: center !important;
.download-report{
position: relative;
- bottom: 10px;
- padding-bottom: 12px;
+ bottom: calculateRem(10px);
+ padding-bottom: calculateRem(12px);
}
\ No newline at end of file
diff --git a/src/app/client/src/app/modules/shared/components/telemetry-error-modal/telemetry-error-modal.component.scss b/src/app/client/src/app/modules/shared/components/telemetry-error-modal/telemetry-error-modal.component.scss
index d81f290b727c0f1d24740bf1ec445c3b980c79ab..22b2a9947f17df764b397f6177fcb3225d2477cd 100644
--- a/src/app/client/src/app/modules/shared/components/telemetry-error-modal/telemetry-error-modal.component.scss
+++ b/src/app/client/src/app/modules/shared/components/telemetry-error-modal/telemetry-error-modal.component.scss
@@ -1,3 +1,5 @@
+@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
+
.telemetry-cont {
display: block;
position: fixed;
@@ -7,18 +9,18 @@
}
.telemetry-float-icon {
- background: #cce4ff;
- letter-spacing: 3px;
- padding: 4px;
- width: 200px;
+ background: var(--primary-100);
+ letter-spacing: calculateRem(3px);
+ padding: calculateRem(4px);
+ width: calculateRem(200px);
position: fixed;
- right: -128px;
+ right: calculateRem(-128px);
z-index: 1000;
transition: all 0.25s ease;
- border-radius: 24px 0px 0px 24px;
+ border-radius: calculateRem(24px) 0px 0px calculateRem(24px);
box-shadow: var(--sbt-box-shadow-6px);
cursor: pointer;
- border: #034f9d solid 4px;
+ border: var(--primary-color) solid calculateRem(4px);
border-right-width: 0px;
cursor:pointer;
}
@@ -38,7 +40,7 @@
}
.telemetry-float-icon a {
- color: #fff !important;
+ color: var(--white) !important;
text-decoration: none;
text-align: center;
}
@@ -48,10 +50,10 @@
}
.chat-icon {
- font-size: 20px;
- color: #fff;
- padding: 10px 0;
- width: 40px;
- margin: 0 8px;
+ font-size: calculateRem(20px);
+ color: var(--white);
+ padding: calculateRem(10px) 0;
+ width: calculateRem(40px);
+ margin: 0 calculateRem(8px);
}
\ No newline at end of file
diff --git a/src/app/client/src/app/modules/workspace/components/all-content/all-content.component.scss b/src/app/client/src/app/modules/workspace/components/all-content/all-content.component.scss
index af6f2839f8db4edf503db5aa481d9b62ffd470f2..eeaef8593a2e48eb54475dbb99a8a7b953c498c6 100644
--- a/src/app/client/src/app/modules/workspace/components/all-content/all-content.component.scss
+++ b/src/app/client/src/app/modules/workspace/components/all-content/all-content.component.scss
@@ -1,3 +1,5 @@
+@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
+
.sb-gray-loader{
&:after{
content: '';
@@ -18,25 +20,25 @@
.sb-table-blue-strip{
background: none;
border: none;
- border-bottom: solid 1px var(--primary-400);
+ border-bottom: solid calculateRem(1px) var(--primary-400);
th{
background: none;
color: var(--primary-400);
- border-bottom: solid 1px var(--primary-400);
+ border-bottom: solid calculateRem(1px) var(--primary-400);
}
tbody{
tr:nth-child(odd){
background: var(--primary-100);
}
tr:nth-child(even){
- background: white;
+ background:var(--white);
}
tr{
td:first-child{
- border-left: solid 1px var(--primary-400);
+ border-left: solid calculateRem(1px) var(--primary-400);
}
td:last-child{
- border-right: solid 1px var(--primary-400);
+ border-right: solid calculateRem(1px) var(--primary-400);
}
}
}
@@ -53,9 +55,9 @@
.white-space-inherit {
white-space: inherit !important;
word-wrap: break-word;
- max-width: 1px;
+ max-width: calculateRem(1px);
}
.max-h-360 {
- max-height:360px;
+ max-height:calculateRem(360px);
}
\ No newline at end of file
diff --git a/src/app/client/src/app/modules/workspace/components/flag-conentplayer/flag-conentplayer.component.scss b/src/app/client/src/app/modules/workspace/components/flag-conentplayer/flag-conentplayer.component.scss
index fc29609822858cdf6ac2d50b28bf4245af8f05c9..b6db4c5da7568b451766e772b3191116dc57fddf 100644
--- a/src/app/client/src/app/modules/workspace/components/flag-conentplayer/flag-conentplayer.component.scss
+++ b/src/app/client/src/app/modules/workspace/components/flag-conentplayer/flag-conentplayer.component.scss
@@ -1,3 +1,4 @@
+@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
//aspect ratio
.aspectratio {
@@ -23,12 +24,11 @@
video,iframe {
width: 100%;
height: 100% !important;
- // border: calculateRem(6px) solid var(--black);
}
}
&.player-fullscreen {
width: 100%;
- height: calc(100vh - 50px) !important;
+ height: calc(100vh - calculateRem(50px)) !important;
position:fixed;
top:calculateRem(50px);
left:0;
@@ -41,7 +41,7 @@
}
&.player-fullscreen iframe, &.player-fullscreen video {
width: 100%;
- height: calc(100vh - 50px) !important;
+ height: calc(100vh - calculateRem(50px)) !important;
}
}
\ No newline at end of file
diff --git a/src/app/client/src/app/modules/workspace/components/published/published.component.scss b/src/app/client/src/app/modules/workspace/components/published/published.component.scss
index 6da9a5b6a372b591e7a7f21edb1ee9598971aed4..4b60b1269b6fb0a9920b205499ab556f50feaf3a 100644
--- a/src/app/client/src/app/modules/workspace/components/published/published.component.scss
+++ b/src/app/client/src/app/modules/workspace/components/published/published.component.scss
@@ -1,3 +1,5 @@
+@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
+
.sb-gray-loader{
&:after{
content: '';
@@ -18,25 +20,25 @@
.sb-table-blue-strip{
background: none;
border: none;
- border-bottom: solid 1px var(--primary-400);
+ border-bottom: solid calculateRem(1px) var(--primary-400);
th{
background: none;
color: var(--primary-400);
- border-bottom: solid 1px var(--primary-400);
+ border-bottom: solid calculateRem(1px) var(--primary-400);
}
tbody{
tr:nth-child(odd){
background: var(--primary-100);
}
tr:nth-child(even){
- background: white;
+ background: var(--white);
}
tr{
td:first-child{
- border-left: solid 1px var(--primary-400);
+ border-left: solid calculateRem(1px) var(--primary-400);
}
td:last-child{
- border-right: solid 1px var(--primary-400);
+ border-right: solid calculateRem(1px) var(--primary-400);
}
}
}
@@ -53,9 +55,9 @@
.white-space-inherit {
white-space: inherit !important;
word-wrap: break-word;
- max-width: 1px;
+ max-width: calculateRem(1px);
}
.max-h-360 {
- max-height:360px;
+ max-height:calculateRem(360px);
}
\ No newline at end of file
diff --git a/src/app/client/src/app/modules/workspace/components/review-comments/review-comments.component.scss b/src/app/client/src/app/modules/workspace/components/review-comments/review-comments.component.scss
index b4db9a5c51893cecbc60b294bfb1b9ab84f1bd54..d207d1be2928cf30c6049c879da9a30fad289ec3 100644
--- a/src/app/client/src/app/modules/workspace/components/review-comments/review-comments.component.scss
+++ b/src/app/client/src/app/modules/workspace/components/review-comments/review-comments.component.scss
@@ -1,7 +1,7 @@
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.review-comments-box {
- max-height: calc(100% - 4px);
+ max-height: calc(100% - calculateRem(4px));
position: absolute;
top: calculateRem(15px);
bottom: calculateRem(18px);
@@ -12,8 +12,8 @@
z-index: inherit;
}
.ui.comments.scrolling{
- height:calc(100% - 115px);
- max-height: calc(100% - 115px);
+ height:calc(100% - calculateRem(115px));
+ max-height: calc(100% - calculateRem(115px));
overflow-y: auto;
}
.reply-box{
diff --git a/src/app/client/src/app/modules/workspace/components/reviewsubmissions-contentplayer/reviewsubmissions-contentplayer.component.scss b/src/app/client/src/app/modules/workspace/components/reviewsubmissions-contentplayer/reviewsubmissions-contentplayer.component.scss
index fc29609822858cdf6ac2d50b28bf4245af8f05c9..291e8ee25382c565f178673f0c80181f55521c31 100644
--- a/src/app/client/src/app/modules/workspace/components/reviewsubmissions-contentplayer/reviewsubmissions-contentplayer.component.scss
+++ b/src/app/client/src/app/modules/workspace/components/reviewsubmissions-contentplayer/reviewsubmissions-contentplayer.component.scss
@@ -1,4 +1,4 @@
-
+@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
//aspect ratio
.aspectratio {
position: relative;
@@ -23,12 +23,11 @@
video,iframe {
width: 100%;
height: 100% !important;
- // border: calculateRem(6px) solid var(--black);
}
}
&.player-fullscreen {
width: 100%;
- height: calc(100vh - 50px) !important;
+ height: calc(100vh - calculateRem(50px)) !important;
position:fixed;
top:calculateRem(50px);
left:0;
@@ -41,7 +40,7 @@
}
&.player-fullscreen iframe, &.player-fullscreen video {
width: 100%;
- height: calc(100vh - 50px) !important;
+ height: calc(100vh - calculateRem(50px)) !important;
}
}
\ No newline at end of file
diff --git a/src/app/client/src/app/modules/workspace/components/upforreview-contentplayer/upforreview-contentplayer.component.scss b/src/app/client/src/app/modules/workspace/components/upforreview-contentplayer/upforreview-contentplayer.component.scss
index fc29609822858cdf6ac2d50b28bf4245af8f05c9..b6db4c5da7568b451766e772b3191116dc57fddf 100644
--- a/src/app/client/src/app/modules/workspace/components/upforreview-contentplayer/upforreview-contentplayer.component.scss
+++ b/src/app/client/src/app/modules/workspace/components/upforreview-contentplayer/upforreview-contentplayer.component.scss
@@ -1,3 +1,4 @@
+@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
//aspect ratio
.aspectratio {
@@ -23,12 +24,11 @@
video,iframe {
width: 100%;
height: 100% !important;
- // border: calculateRem(6px) solid var(--black);
}
}
&.player-fullscreen {
width: 100%;
- height: calc(100vh - 50px) !important;
+ height: calc(100vh - calculateRem(50px)) !important;
position:fixed;
top:calculateRem(50px);
left:0;
@@ -41,7 +41,7 @@
}
&.player-fullscreen iframe, &.player-fullscreen video {
width: 100%;
- height: calc(100vh - 50px) !important;
+ height: calc(100vh - calculateRem(50px)) !important;
}
}
\ No newline at end of file
diff --git a/src/app/client/src/app/plugins/profile/components/choose-user/choose-user.component.html b/src/app/client/src/app/plugins/profile/components/choose-user/choose-user.component.html
index 1a988fa9dbb02cbb7de16d88dc97a0ed66bf2d72..6213704950b692852b2e839fb3cb1f16adad2788 100644
--- a/src/app/client/src/app/plugins/profile/components/choose-user/choose-user.component.html
+++ b/src/app/client/src/app/plugins/profile/components/choose-user/choose-user.component.html
@@ -1,8 +1,7 @@
<!--profile Content Header -->
<div [ngClass]="layoutConfiguration ? 'sb-back-actionbar' : 'sb-bg-white cc-player__btn-back'" class="relative position mt-0" [ngClass]="{'header-block': isFullScreenView}">
<div class="ui container py-0 px-0 d-flex flex-ai-center">
- <button type="button" (click)="goBack()" [ngClass]="layoutConfiguration ? 'sb-btn-round' : ''" class="sb-btn sb-btn-normal sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0"
- tabindex="0" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
+ <button type="button" (click)="goBack()" [ngClass]="layoutConfiguration ? 'sb-btn-primary sb-btn-round' : 'sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0'" class="sb-btn sb-btn-normal" tabindex="0" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
<i class="icon-svg icon-svg--xxs icon-back mr-4"><svg class="icon icon-svg--primary">
<use xlink:href="assets/images/sprite.svg#arrow-long-left"></use>
</svg></i>
diff --git a/src/app/client/src/app/plugins/profile/components/create-user/create-user.component.html b/src/app/client/src/app/plugins/profile/components/create-user/create-user.component.html
index f43073c0331c3da1a49249cfd8d5b7264657d162..d7635e34fbf669186f9f25580552ba6119b795e3 100644
--- a/src/app/client/src/app/plugins/profile/components/create-user/create-user.component.html
+++ b/src/app/client/src/app/plugins/profile/components/create-user/create-user.component.html
@@ -2,8 +2,7 @@
<!--profile Content Header -->
<div [ngClass]="layoutConfiguration ? 'sb-back-actionbar' : 'sb-bg-white cc-player__btn-back'" class="relative position mt-0" [ngClass]="{'header-block': isFullScreenView}">
<div class="ui container py-0 px-0 d-flex flex-ai-center">
- <button type="button" (click)="goBack()" [ngClass]="layoutConfiguration ? 'sb-btn-round' : ''" class="sb-btn sb-btn-normal sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0"
- tabindex="0" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
+ <button type="button" (click)="goBack()" [ngClass]="layoutConfiguration ? 'sb-btn-primary sb-btn-round' : 'sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0'" class="sb-btn sb-btn-normal" tabindex="0" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
<i class="icon-svg icon-svg--xxs icon-back mr-4"><svg class="icon icon-svg--primary">
<use xlink:href="assets/images/sprite.svg#arrow-long-left"></use>
</svg></i>
diff --git a/src/app/client/src/app/plugins/profile/components/profile-badge/profile-badge.component.scss b/src/app/client/src/app/plugins/profile/components/profile-badge/profile-badge.component.scss
index 4b932c9d89dade4efd57d8101f5cfb4da3f6b3fc..7d4b3540aa1fbde6fe9ca9520ad7541ee388428b 100644
--- a/src/app/client/src/app/plugins/profile/components/profile-badge/profile-badge.component.scss
+++ b/src/app/client/src/app/plugins/profile/components/profile-badge/profile-badge.component.scss
@@ -8,5 +8,5 @@
}
.badges-container {
- max-width: calc(195px * 4);
+ max-width: calc(calculateRem(195px) * 4);
}
diff --git a/src/app/client/src/app/plugins/profile/components/profile-page/profile-page.component.html b/src/app/client/src/app/plugins/profile/components/profile-page/profile-page.component.html
index 5c69fdf94fc0ec029ccae7b7c3bc81ed34b89976..5f3aded891ae109ab0b29471e38adfc3407ec7df 100644
--- a/src/app/client/src/app/plugins/profile/components/profile-page/profile-page.component.html
+++ b/src/app/client/src/app/plugins/profile/components/profile-page/profile-page.component.html
@@ -3,8 +3,7 @@
<!--profile Content Header -->
<div [ngClass]="layoutConfiguration ? 'sb-back-actionbar' : 'sb-bg-white cc-player__btn-back'" class="relative position mt-0" [ngClass]="{'header-block': isFullScreenView}">
<div class="ui container py-0 px-0 d-flex flex-ai-center">
- <button type="button" (click)="goBack()" [ngClass]="layoutConfiguration ? 'sb-btn-round' : ''" class="sb-btn sb-btn-normal sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0"
- tabindex="0" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
+ <button type="button" (click)="goBack()" [ngClass]="layoutConfiguration ? 'sb-btn-primary sb-btn-round' : 'sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0'" class="sb-btn sb-btn-normal" tabindex="0" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
<i class="icon-svg icon-svg--xxs icon-back mr-4"><svg class="icon icon-svg--primary">
<use xlink:href="assets/images/sprite.svg#arrow-long-left"></use>
</svg></i>
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 9dd7ef611ec76e2f2e8497246e16a9ef29aaf3b5..60680666ad5345030feb2391b0fe0f986fc121be 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
@@ -106,7 +106,7 @@
.ui.semi-circular.update.basic.label,
.ui.semi-circular.basic.label {
- border: 1px solid var(--primary-color);
+ border: calculateRem(1px) solid var(--primary-color);
border-radius: calculateRem(18.5px);
font-size: 1.16rem;
padding: calculateRem(8px) calculateRem(16px);
diff --git a/src/app/client/src/app/plugins/profile/components/submit-teacher-details/submit-teacher-details.component.html b/src/app/client/src/app/plugins/profile/components/submit-teacher-details/submit-teacher-details.component.html
index 14da031a5eb6906a0c110376497ac1820c68ee4b..c11c5f61dc727781dbade3b49ec881e15ef410f7 100644
--- a/src/app/client/src/app/plugins/profile/components/submit-teacher-details/submit-teacher-details.component.html
+++ b/src/app/client/src/app/plugins/profile/components/submit-teacher-details/submit-teacher-details.component.html
@@ -1,7 +1,6 @@
<div [ngClass]="layoutConfiguration ? 'sb-back-actionbar' : 'sb-bg-white cc-player__btn-back'" class="relative position mt-0" [ngClass]="{'header-block': isFullScreenView}">
<div class="ui container py-0 px-0 d-flex flex-ai-center">
- <button type="button" (click)="goBack()" [ngClass]="layoutConfiguration ? 'sb-btn-round' : ''" class="sb-btn sb-btn-normal sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0"
- tabindex="0" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
+ <button type="button" (click)="goBack()" [ngClass]="layoutConfiguration ? 'sb-btn-primary sb-btn-round' : 'sb-btn-link sb-btn-link-primary sb-left-icon-btn px-0'" class="sb-btn sb-btn-normal" tabindex="0" attr.aria-label="{{resourceService?.frmelmnts?.btn?.back}}">
<i class="icon-svg icon-svg--xxs icon-back mr-4"><svg class="icon icon-svg--primary">
<use xlink:href="assets/images/sprite.svg#arrow-long-left"></use>
</svg></i>
diff --git a/src/app/client/src/app/plugins/profile/components/submit-teacher-details/submit-teacher-details.component.scss b/src/app/client/src/app/plugins/profile/components/submit-teacher-details/submit-teacher-details.component.scss
index f0189c116a97a89496c20e10855e59453e94afc9..1ec03216367bf95ee998f3d36fd663b4bf1a0911 100644
--- a/src/app/client/src/app/plugins/profile/components/submit-teacher-details/submit-teacher-details.component.scss
+++ b/src/app/client/src/app/plugins/profile/components/submit-teacher-details/submit-teacher-details.component.scss
@@ -3,7 +3,7 @@
:host{
.sb-md-container {
max-width: calculateRem(720px);
- width: calc(100% - 32px);
+ width: calc(100% - calculateRem(32px));
background: var(--white);
margin: 0 auto;
border-radius: calculateRem(4px);
diff --git a/src/app/client/src/app/plugins/profile/components/update-contact-details/update-contact-details.component.scss b/src/app/client/src/app/plugins/profile/components/update-contact-details/update-contact-details.component.scss
index 4157fbec8ef24bcffbd33af1f41219bc6305bd3c..5754c53e29cd96ab86f7ddf9beb454b28878b0ab 100644
--- a/src/app/client/src/app/plugins/profile/components/update-contact-details/update-contact-details.component.scss
+++ b/src/app/client/src/app/plugins/profile/components/update-contact-details/update-contact-details.component.scss
@@ -20,7 +20,7 @@
.ui.basic.error.label {
background: none !important;
- color: #A30010 !important;
+ color: var(--accessibility-red) !important;
border: 0 !important;
padding-left: 0;
font-size: 1rem;
diff --git a/src/app/client/src/assets/styles/components/_card.scss b/src/app/client/src/assets/styles/components/_card.scss
index 3702c9eb0feb1ebe2f6fe5907ba3c6bca4210bd9..6d5691b9e25cad814662a0224e0efb4d393f415e 100644
--- a/src/app/client/src/assets/styles/components/_card.scss
+++ b/src/app/client/src/assets/styles/components/_card.scss
@@ -16,7 +16,7 @@
transition-delay: 0.1s;
&:hover {
- transform: translate(0, -calculateRem(3px));
+ transform: translate(0, calculateRem(-3px));
box-shadow: 0 calculateRem(2px) calculateRem(7px) 0 rgba(var(--rc-rgba-black), 0.16);
}
@@ -239,11 +239,11 @@ app-card[lang="ur"] {
// Batch Card
.ui.card.sb-batch-card {
- border: 1px solid var(--primary-200);
+ border: calculateRem(1px) solid var(--primary-200);
box-shadow: none;
.item {
- padding: 10px 0;
+ padding: calculateRem(10px) 0;
.content>.header {
padding-bottom: calculateRem(5px);
diff --git a/src/app/client/src/assets/styles/components/_cbse.scss b/src/app/client/src/assets/styles/components/_cbse.scss
index 8de39b1cf855553cdc6b70b98f182ecf251cd263..9e5e9db84c105c70206d4f3e2fb31c8712a84dd8 100644
--- a/src/app/client/src/assets/styles/components/_cbse.scss
+++ b/src/app/client/src/assets/styles/components/_cbse.scss
@@ -33,7 +33,7 @@
height: calculateRem(74px);
background: var(--rc-252525);
border-radius: ($base-block-space + 2);
- margin: ($base-block-space + 2) 0 ($base-block-space + 2) 1px;
+ margin: ($base-block-space + 2) 0 ($base-block-space + 2) calculateRem(1px);
}
.sensor {
width: $base-block-space;
@@ -151,7 +151,7 @@
// learning out come styles
&.sb-learning-outcome {
- height: calc(100% - 44px);
+ height: calc(100% - calculateRem(44px));
.question-bg {
background-image: linear-gradient(-90deg, var(--secondary-100), var(--secondary-0));
@@ -318,7 +318,7 @@
position: initial;
max-height: 100vh;
overflow-y: auto;
- padding: ($base-block-space * 2) 8px ($base-block-space * 2) 24px;
+ padding: ($base-block-space * 2) calculateRem(8px) ($base-block-space * 2) calculateRem(24px);
height: 100%;
}
diff --git a/src/app/client/src/assets/styles/components/_collection-tree.scss b/src/app/client/src/assets/styles/components/_collection-tree.scss
index a59029af9415e224ca42475ffd0729234fb02cb9..124589e74894ecb5f7695207db6c203501487d4f 100644
--- a/src/app/client/src/assets/styles/components/_collection-tree.scss
+++ b/src/app/client/src/assets/styles/components/_collection-tree.scss
@@ -3,27 +3,27 @@
@use "~@project-sunbird/sb-styles/assets/varSass" as *;
// TOC or Collection Tree
$sb-collectionTree-border-radius: ($base-block-space / 2);
-$sb-collectionTree-border: 1px solid var(--primary-200);
+$sb-collectionTree-border: calculateRem(1px) solid var(--primary-200);
$sb-collectionTree-padding: ($base-block-space * 2);
$sb-collectionTree-margin: $base-block-space 0 0 0;
$sb-collectionTree-background-color: var(--white);
$sb-collectionTree-title-color: var(--gray-800);
$sb-collectionTree-title-font-size: $h6-font-size;
-$sb-collectionTree-title-line-height: 20px;
+$sb-collectionTree-title-line-height: calculateRem(20px);
$sb-collectionTree-title-font-weight: 400;
$sb-collectionTree-active-title-color: var(--primary-color);
$sb-collectionTree-active-title-font-weight: bold;
$sb-collectionTree-title-icon-color: var(--tertiary-100);
-$sb-collectionTree-title-icon-font-size: 20px;
-$sb-collectionTree-title-icon-line-height: 20px;
-$sb-collectionTree-title-icon-height: 20px;
+$sb-collectionTree-title-icon-font-size: calculateRem(20px);
+$sb-collectionTree-title-icon-line-height: calculateRem(20px);
+$sb-collectionTree-title-icon-height: calculateRem(20px);
$sb-collectionTree-title-icon-font-weight: 500;
$sb-collectionTree-title-toggle-icon-color: var(--primary-color);
$sb-collectionTree-title-toggle-icon-font-size: $font-size-sm;
-$sb-collectionTree-title-toggle-icon-line-height: 20px;
-$sb-collectionTree-title-toggle-icon-height: 20px;
+$sb-collectionTree-title-toggle-icon-line-height: calculateRem(20px);
+$sb-collectionTree-title-toggle-icon-height: calculateRem(20px);
$sb-collectionTree-title-toggle-icon-font-weight: 500;
-$sb-collectionTree-disabled-border: 1px solid var(--gray-100);
+$sb-collectionTree-disabled-border: calculateRem(1px) solid var(--gray-100);
$sb-collectionTree-disabled-title-icon-color: var(--gray-100);
// Fancy Tree
@@ -31,12 +31,12 @@ $sb-fancyTree-margin-ltr: 0 0 0 ($base-block-space * 1.25);
$sb-fancyTree-margin-rtl: 0 ($base-block-space * 1.25) 0 0;
$sb-fancyTree-padding: ($base-block-space * 2) 0 0 0;
$sb-fancyTree-list-border-color: var(--primary-200);
-$sb-fancyTree-list-border-width: 1px;
+$sb-fancyTree-list-border-width: calculateRem(1px);
$sb-fancyTree-list-item-margin: 0 0 (2 * $base-block-space) 0;
$sb-fancyTree-list-item-padding-ltr: 0 0 0 ($base-block-space * 1.75);
$sb-fancyTree-list-item-padding-rtl: 0 ($base-block-space * 1.75) 0 0;
$sb-fancyTree-list-item-border-text-spacing: ($base-block-space * 1.75);
-$sb-fancyTree-list-item-icon-size: 20px;
+$sb-fancyTree-list-item-icon-size: calculateRem(20px);
$sb-fancyTree-default-list-item-icon-color: var(--tertiary-100);
$sb-fancyTree-completed-list-item-icon-color: var(--success-color);
$sb-fancyTree-inprogress-list-item-icon-color: var(--primary-color);
diff --git a/src/app/client/src/assets/styles/components/_form.scss b/src/app/client/src/assets/styles/components/_form.scss
index f57db4fa75e40bbb136a9219bddcf0b65dd46deb..4ba0436f339e349ee7c795f2b448b41fc3e6ee59 100644
--- a/src/app/client/src/assets/styles/components/_form.scss
+++ b/src/app/client/src/assets/styles/components/_form.scss
@@ -178,14 +178,7 @@ label {
font-weight: bold;
}
-.sb-footer-license {
- display: flex;
- margin-bottom: $base-block-space * 1;
- font-size: $sb-label-font-size;
- font-weight: normal;
- align-items: flex-start;
- justify-content: center;
-}
+
small {
font-size: 80%;
diff --git a/src/app/client/src/assets/styles/components/_icons.scss b/src/app/client/src/assets/styles/components/_icons.scss
deleted file mode 100644
index 1df06035fde41626151dc260c747038c09452f73..0000000000000000000000000000000000000000
--- a/src/app/client/src/assets/styles/components/_icons.scss
+++ /dev/null
@@ -1,170 +0,0 @@
-@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
-
-@font-face {
- font-family: "icomoon";
- font-weight: normal;
- font-style: normal;
-}
-
-[class^="sb-icon-"],
-[class*=" sb-icon-"] {
- /* use !important to prevent issues with browser extensions that change fonts */
- font-family: "icomoon" !important;
- speak: none;
- font-style: normal;
- font-weight: normal;
- font-variant: normal;
- font-size: inherit;
- text-transform: none;
- line-height: inherit;
-
- /* Better Font Rendering =========== */
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-.sb-icon-preview:before {
- content: "\e909";
-}
-.sb-icon-reviewer:before {
- content: "\e90a";
-}
-.sb-icon-folder:before {
- content: "\e902";
-}
-.sb-icon-comment:before {
- content: "\e908";
-}
-.sb-icon-send:before {
- content: "\e90b";
-}
-.sb-icon-content:before {
- content: "\e901";
-}
-.sb-icon-collection:before {
- content: "\e903";
-}
-.sb-icon-doc:before {
- content: "\e904";
-}
-.sb-icon-mp3:before {
- content: "\e905";
-}
-.sb-icon-video:before {
- content: "\e907";
-}
-[class*="sb-icon-primary"] {
- background-color: var(--primary-color);
-}
-
-[class*="sb-icon-secondary"] {
- background-color: var(--secondary-color);
-}
-
-[class*="sb-icon-warning"] {
- background-color: var(--tertiary-color);
-}
-
-[class*="sb-icon-error"] {
- background-color: var(--red);
-}
-
-[class*="sb-icon-edit-user"] {
- -webkit-mask-image: url(../../../assets/images/edit-icon.svg);
- mask-image: url(../../../assets/images/edit-icon.svg);
-}
-
-[class*="sb-icon-delete-user"] {
- -webkit-mask-image: url(../../../assets/images/delete-icon.svg);
- mask-image: url(../../../assets/images/delete-icon.svg);
-}
-
-[class*="sb-icon-info"] {
- -webkit-mask-image: url(../../../assets/images/info-icon.svg);
- mask-image: url(../../../assets/images/info-icon.svg);
-}
-
-.info-icon {
- background-color: var(--gray-400);
- -webkit-mask-size: contain;
- -webkit-mask-position: 50% 50%;
- -webkit-mask-repeat: no-repeat;
- mask-size: contain;
- mask-position: 50% 50%;
- mask-repeat: no-repeat;
- width: calculateRem(16px);
- height: calculateRem(16px);
- margin-left: calculateRem(4px);
- display: inline-block;
- vertical-align: bottom;
-}
-
-//common consumption library
-
-// icons
-.icon-arrow-round-down {
- transform: rotate(90deg);
-}
-.icon-svg {
- position: relative;
- top: 1px;
- display: inline-block;
- font-style: normal;
- font-weight: 400;
- line-height: 1;
- -webkit-font-smoothing: antialiased;
- opacity: 1;
- svg.icon {
- width: 100%;
- height: inherit;
- }
- //sizes
- &--xxs {
- width: var(--icon-svg-xxs);
- height: var(--icon-svg-xxs);
- }
- &--xs {
- width: var(--icon-svg-xs);
- height: var(--icon-svg-xs);
- }
- &--sm {
- width: var(--icon-svg-sm);
- height: var(--icon-svg-sm);
- }
- &--md {
- width: var(--icon-svg-md);
- height: var(--icon-svg-md);
- }
- &--lg {
- width: var(--icon-svg-lg);
- height: var(--icon-svg-lg);
- }
- &--xl {
- width: var(--icon-svg-xl);
- height: var(--icon-svg-xl);
- }
-
- //colors
- &--white {
- fill: var(--white);
- }
- &--primary,
- &--info {
- fill: var(--primary-color);
- }
- &--secondary,
- &--success {
- fill: var(--secondary-color);
- }
- &--tertiary,
- &--warning {
- fill: var(--tertiary-color);
- }
- &--red,
- &--error {
- fill: var(--red-400);
- }
- &--gray {
- fill: var(--gray-800);
- }
-}
diff --git a/src/app/client/src/assets/styles/components/_search.scss b/src/app/client/src/assets/styles/components/_search.scss
index 266dd6a55f82fc5f8340cb761dc63d50baf09c32..61d08da29f8186e17dacc064df02109a1cc2c772 100644
--- a/src/app/client/src/assets/styles/components/_search.scss
+++ b/src/app/client/src/assets/styles/components/_search.scss
@@ -332,7 +332,7 @@ select:-internal-autofill-selected {
.sbt-search-box{
.search-fill{
- fill: #0531FF;
+ fill: var(--primary-color);
}
}
@@ -367,7 +367,7 @@ select:-internal-autofill-selected {
z-index: 9999;
border-radius: 0 0 calculateRem(32px) calculateRem(32px);
padding: calculateRem(20px) calculateRem(24px);
- background-color: #F3F3E5;
+ background-color: var(--sbt-body-bg);
box-shadow: calculateRem(6px) calculateRem(16px) calculateRem(24px) 0 rgb(0 0 0 / 10%);
.search-title{
color: var(--primary-color);
diff --git a/src/app/client/src/assets/styles/components/_tables.scss b/src/app/client/src/assets/styles/components/_tables.scss
index 8aced3cdac1ef0efc87f7e55231d310160c41ec6..e8285152d0c4ce509b7ea00e923e62bf8d49ef1d 100644
--- a/src/app/client/src/assets/styles/components/_tables.scss
+++ b/src/app/client/src/assets/styles/components/_tables.scss
@@ -292,135 +292,4 @@ table.dataTable {
.dataTables_wrapper .dataTables_paginate {
margin-top: calculateRem(8px);
-}
-// Semantic Ui Data table customised CSS
-
-// .sb-data-table-container {
-
-// .ui.table {
-// thead tr th {
-// padding: calculateRem(8px) calculateRem(16px) calculateRem(8px) calculateRem(32px);
-// background-color: var(--white);
-// border-bottom: calculateRem(1px) solid rgba(var(--rc-rgba-gray-300), 0.1);
-// background-repeat: no-repeat;
-// background-position: center right;
-// max-width: calculateRem(176px);
-// text-overflow: ellipsis;
-// overflow: hidden;
-// font-size: calculateRem(16px);
-// }
-
-// td {
-// padding: calculateRem(8px) 16px 8px 32px;
-// max-width: calculateRem(176px);
-// overflow: hidden;
-// text-overflow: ellipsis;
-// white-space: nowrap;
-// }
-// }
-
-// .dataTables_wrapper {
-// .dataTables_paginate .paginate_button {
-// &.current {
-// color: var( --gray-800)33;
-// background: rgba(var(--rc-rgba-black), 0.05);
-// border: calculateRem(0.5px) solid #979797;
-
-// &:hover {
-// color: var( --gray-800)33;
-// background-color: rgba(var(--rc-rgba-black), 0.05);
-// border: calculateRem(0.5px) solid #979797;
-// }
-// }
-
-// border: calculateRem(0.5px) solid #979797;
-// margin-left: calculateRem(-1px);
-
-// &.disabled {
-// border: calculateRem(0.5px) solid #979797;
-// border: calculateRem(0.5px) solid #979797;
-
-// &:hover,
-// &:active {
-// border: calculateRem(0.5px) solid #979797;
-// }
-// }
-
-// &:hover {
-// border: calculateRem(0.5px) solid #979797;
-// background: rgba(var(--rc-rgba-black), 0.03);
-// color: rgba(var(--rc-rgba-black), 0.95) !important;
-// }
-
-// &:active {
-// box-shadow: unset;
-// }
-// }
-
-// .dataTables_filter {
-// float: left;
-// text-align: left;
-// position: relative;
-// bottom: calculateRem(40px);
-// margin: 0 calculateRem(16px);
-// height: calculateRem(20px);
-
-// input {
-// height: calculateRem(30px);
-// width: calculateRem(300px);
-// border: calculateRem(0.5px) solid #979797;
-// border-radius: calculateRem(4px);
-// background-color: var(--white);
-// padding: 0 calculateRem(32px) 0 calculateRem(16px);
-// background-image: url('https://png.icons8.com/search/96');
-// background-repeat: no-repeat;
-// background-size: contain;
-// background-position: 96%;
-// background-size: calculateRem(16px);
-// }
-// }
-
-// .dataTables_length label {
-// display: none;
-// }
-// }
-
-// table.dataTable.no-footer {
-// border-bottom: calculateRem(1px) solid rgba(34, 36, 38, .15);
-// }
-
-// *[dir="rtl"] {
-// .dataTables_wrapper .dataTables_filter {
-// float: right;
-// text-align: right;
-// }
-
-// .dataTables_filter input {
-// padding: 0 calculateRem(16px) 0 calculateRem(32px);
-// background-position: 4%;
-// }
-
-// .ui.table {
-// thead tr th {
-// background-position: center left;
-// }
-// }
-
-// .ui.celled.table tr td:first-child {
-// border-left: calculateRem(1px) solid rgba(var(--rc-rgba-gray-300), 0.1);
-// }
-
-// .ui.celled.table tr td:last-child {
-// border-left: none;
-// }
-
-// .ui.celled.table tr th:first-child {
-// border-left: calculateRem(1px) solid rgba(var(--rc-rgba-gray-300), 0.1);
-// }
-
-// .ui.celled.table tr th:last-child {
-// border-left: none;
-// }
-// }
-
-// }
+}
\ No newline at end of file
diff --git a/src/app/client/src/assets/styles/components/_toasters.scss b/src/app/client/src/assets/styles/components/_toasters.scss
index 21376c4cb69bc5eec9d790c702524db82d41db51..3276c7b1f656688d281e95f5c59ef6f75bf65c71 100644
--- a/src/app/client/src/assets/styles/components/_toasters.scss
+++ b/src/app/client/src/assets/styles/components/_toasters.scss
@@ -4,7 +4,7 @@
max-width: calculateRem(448px);
padding: calculateRem(24px) calculateRem(24px) calculateRem(24px) calculateRem(16px);
border-radius: calculateRem(8px);
- border: 1px solid var(--primary-300);
+ border: calculateRem(1px) solid var(--primary-300);
border-left-width: calculateRem(8px);
color: var(--gray);
background: var(--white);
diff --git a/src/app/client/src/assets/styles/components/_topic-picker.scss b/src/app/client/src/assets/styles/components/_topic-picker.scss
index 8885fa54e0e81a9ba9a357a26e50319197039026..923e40c8d944789efc7ea4b754e52809ab94cbaa 100644
--- a/src/app/client/src/assets/styles/components/_topic-picker.scss
+++ b/src/app/client/src/assets/styles/components/_topic-picker.scss
@@ -24,7 +24,7 @@
}
.sb-treePicker-selectedSection {
- width: calc(100% - 400px);
+ width: calc(100% - calculateRem(400px));
padding: calculateRem(16px);
.list {
.node {
diff --git a/src/app/client/src/assets/styles/components/components.scss b/src/app/client/src/assets/styles/components/components.scss
index 75a857ea0c49399c8246a07032b4e76edddbe8ec..95df672ed8e1e7bd34ba99d8f12e90307e3ec466 100644
--- a/src/app/client/src/assets/styles/components/components.scss
+++ b/src/app/client/src/assets/styles/components/components.scss
@@ -18,7 +18,6 @@
@forward "./pagesection";
@forward "./pagination";
@forward "./progress-bar";
-@forward "./icons";
@forward "./search";
@forward "./select";
@forward "./tables";
diff --git a/src/app/client/src/assets/styles/components/sb-forms/_facet-filters.scss b/src/app/client/src/assets/styles/components/sb-forms/_facet-filters.scss
index c046aabee9f087b82ee73927f2ad6a1f400934a3..cb4bfadc470424d119d7c865e22e26962b76a718 100644
--- a/src/app/client/src/assets/styles/components/sb-forms/_facet-filters.scss
+++ b/src/app/client/src/assets/styles/components/sb-forms/_facet-filters.scss
@@ -1,3 +1,4 @@
+@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
.cfe-multiselect-container {
ul, li {
@@ -96,7 +97,7 @@
background: var(--sbt-theme-purple-selectbox-lbg);
width: 100%;
- max-height: 200px;
+ max-height: calculateRem(200px);
position: absolute;
z-index: 10000;
top: 100%;
@@ -104,19 +105,19 @@
&::-webkit-scrollbar-track
{
- -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
- background-color: #F5F5F5;
+ -webkit-box-shadow: inset 0 0 calculateRem(6px) rgba(var(--rc-rgba-black),0.3);
+ background-color: var(--rc-f5f5f5);
}
&::-webkit-scrollbar
{
- width: 4px;
- background-color: #F5F5F5;
+ width: calculateRem(4px);
+ background-color: var(--rc-f5f5f5);
}
&::-webkit-scrollbar-thumb
{
- background-color: #999999;
+ background-color: var(--gray-200);
}
-webkit-animation-iteration-count: 1;
@@ -146,7 +147,7 @@
&.selected-option {
color: var(--sbt-theme-purple-selectbox);
font-weight: 700;
- background: rgba(0,0,0,.05);
+ background: rgba(var(--rc-rgba-black),.05);
}
}
@@ -165,7 +166,7 @@
&.open {
.cfe-multiselect-field {
- box-shadow: 0 2px 3px 0 rgba(34, 36, 38, .15);
+ box-shadow: 0 calculateRem(2px) calculateRem(3px) 0 rgba(34, 36, 38, .15);
}
.cfe-multiselect-dropdown {
@@ -187,15 +188,15 @@
.cfe-multiselect-pills-item {
display: unset;
- width: 100px;
+ width: calculateRem(100px);
border-radius: 1rem;
- flex-basis: 100px;
+ flex-basis: calculateRem(100px);
flex-grow: 1;
cursor: pointer;
transition: .25s ease-in-out;
- font-size: 12px;
+ font-size: calculateRem(12px);
-webkit-appearance: none;
text-overflow: ellipsis;
text-transform: capitalize;
diff --git a/src/app/client/src/assets/styles/global.scss b/src/app/client/src/assets/styles/global.scss
index 92fc0fee3d8a43dcfe9a338c967c0acb81b3deeb..93b8584d9cc2a363049549c3d9c172af74a58c88 100644
--- a/src/app/client/src/assets/styles/global.scss
+++ b/src/app/client/src/assets/styles/global.scss
@@ -24,7 +24,7 @@ body {
background: var(--sbt-body-bg) !important;
position: relative;
font-family: var(--font-stack-en) !important;
- letter-spacing: 0.2px;
+ letter-spacing: calculateRem(0.2px);
height: auto;
color: var(--gray-800);
min-height: 100vh;
@@ -46,7 +46,7 @@ body {
@include respond-above(sm) {
body {
.sb-mid-container-min-height {
- min-height: calc(100vh - 288px);
+ min-height: calc(100vh - calculateRem(288px));
margin-bottom: -2rem !important;
}
}
@@ -54,7 +54,7 @@ body {
@include respond-below(sm) {
.download-mobile-app .download-mobile-app-logo {
- min-height: 116px;
+ min-height: calculateRem(116px);
}
}
@@ -170,13 +170,13 @@ ol.ui.list ol {
.ui.basic.primary.button,
.ui.basic.primary.buttons .button {
color: var(--primary-color) !important;
- border: 1px solid var(--primary-color);
+ border: calculateRem(1px) solid var(--primary-color);
box-shadow: none !important;
}
.ui.selection.dropdown:focus,
.ui.selection.dropdown:focus~label {
- border: 1px solid var(--primary-300);
+ border: calculateRem(1px) solid var(--primary-300);
}
/* language selector */
@@ -241,8 +241,8 @@ app-workspace {
.sb-modal-addsummary {
.ck.ck-editor__editable_inline {
- min-height: calc(100vh - 300px);
- max-height: calc(100vh - 300px);
+ min-height: calc(100vh - calculateRem(300px));
+ max-height: calc(100vh - calculateRem(300px));
overflow: auto;
}
@@ -281,7 +281,7 @@ app-workspace {
}
.br-4 {
- border-radius: 4px;
+ border-radius: calculateRem(4px);
}
.bs-0 {
@@ -293,18 +293,7 @@ app-workspace {
}
.toc-box-shadow {
- box-shadow: 0 4px 8px 0px rgba(var(--rc-rgba-black), 0.25) !important;
-}
-
-// Footer fix
-
-.theme .footer-fix {
- // padding-bottom: calculateRem(160px);
- // background-color: var(--rc-E5EDF5);
-
- @include respond-above(sm) {
- // padding-bottom: calculateRem(60px);
- }
+ box-shadow: 0 calculateRem(4px) calculateRem(8px) 0px rgba(var(--rc-rgba-black), 0.25) !important;
}
//iframe css
@@ -394,7 +383,7 @@ app-workspace {
.sbt-page-content {
position: relative;
- min-height: calc(100vh - 320px);
+ min-height: calc(100vh - calculateRem(320px));
}
.sbt-page-content-area {
@@ -481,7 +470,7 @@ app-workspace {
position: absolute;
bottom: 0px;
left: calculateRem(-24px);
- height: 112px;
+ height: calculateRem(112px);
width: auto;
transform: rotate(0deg);
@@ -530,12 +519,12 @@ app-workspace {
}
.new-footer {
- min-height: calc(100vh - 296px);
+ min-height: calc(100vh - calculateRem(296px));
}
.footer-fix {
padding-bottom: calculateRem(160px);
- min-height: calc(100vh - 100px);
+ min-height: calc(100vh - calculateRem(100px));
}
.sb-table-hover tbody tr.non-clickable-row:hover {
@@ -553,18 +542,14 @@ app-workspace {
.sbt-mygroups {
.sb-bg-color-white {
margin-top: 0px;
- border-radius: 24px;
+ border-radius: 1.5rem;
background: var(--sbt-compt-bg) !important;
- padding: 0px 16px;
- }
-
- .sb-card-grid {
- // margin-top: 24px;
+ padding: 0px 1rem;
}
.content-header {
- border-radius: 0px 0px 24px 24px;
- padding: 0px 16px;
+ border-radius: 0px 0px 1.5rem 1.5rem;
+ padding: 0px calculateRem(16px);
background: var(--sbt-compt-bg) !important;
}
}
@@ -615,16 +600,15 @@ html[dir="rtl"] {
}
.infoControl {
- padding: 6px 8px;
- background: white;
- background: rgba(255, 255, 255, 0.8);
- box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
- border-radius: 5px;
+ padding: calculateRem(6px) calculateRem(8px);
+ background:var(--white);
+ box-shadow: 0 0 calculateRem(15px) rgba(var(--rc-rgba-black), 0.2);
+ border-radius: calculateRem(5px);
}
.infoControl h4 {
- margin: 0 0 5px;
- color: #777;
+ margin: 0 0 calculateRem(5px);
+ color: var(--gray-400);
}
.notAllowedCursor {
@@ -646,7 +630,7 @@ html[dir="rtl"] {
figure.table {
table {
td {
- border: 1px solid var(--gray-800);
+ border: calculateRem(1px) solid var(--gray-800);
}
}
}
@@ -664,7 +648,7 @@ html[dir="rtl"] {
html.PlayerMediaQueryClass {
@include respond-above(xl) {
- font-size: calc(12px + (18 - 12) * ((100vw - 320px) / (1920 - 320)));
+ font-size: calc(calculateRem(12px) + (18 - 12) * ((100vw - calculateRem(320px)) / (1920 - 320)));
}
}
@@ -813,7 +797,7 @@ quml-player {
}
.sbt-accessbility-bar {
- background-color: #000;
+ background-color: var(--black);
}
.ui.text.menu .item {
@@ -826,7 +810,7 @@ quml-player {
}
.download-mobile-app {
- background: #333 !important;
+ background: var(--gray-800) !important;
}
app-landing-page {
@@ -985,7 +969,7 @@ app-landing-page {
}
.fontResizeBtn {
- border: 0.0625rem solid #484848;
+ border: 0.0625rem solid var(--gray-400);
background: none;
color: var(--white);
width: 2rem;
@@ -1000,7 +984,7 @@ app-landing-page {
&:hover,
&:active {
- background: #ff714a;
+ background: var(--tertiary-color);
color: var(--white);
cursor: pointer;
// outline: 0px;
@@ -1136,12 +1120,12 @@ a.ui.labels .label:hover {
border: none !important;
input {
- border: 1px solid #333 !important;
+ border: calculateRem(1px) solid var(--gray-800) !important;
}
}
.sb-textbox {
- padding: 4px 16px !important;
+ padding: calculateRem(4px) 1rem !important;
}
}
@@ -1190,7 +1174,7 @@ a.ui.labels .label:hover {
.sbt-class-bar .sb-slider-pills-container .sb-pills-container .pill.active:hover {
background-color: var(--cc-grade-pill-bg-hover) !important;
color: var(--cc-grade-pill-text-hover) !important;
- box-shadow: 0 3px 4px 0 rgba(var(--rc-rgba-black), 0.19) !important;
+ box-shadow: 0 calculateRem(3px) calculateRem(4px) 0 rgba(var(--rc-rgba-black), 0.19) !important;
}
//moved from themes
@@ -1227,9 +1211,9 @@ html[layout="joy"] {
}
}
- .sb--card__img.sb--card__image-pos {
- z-index: unset;
- }
+ // .sb--card__img.sb--card__image-pos {
+ // z-index: unset;
+ // }
}
html[data-mode="darkmode"][layout="base"] {
@@ -1249,7 +1233,7 @@ html[data-mode="darkmode"][layout="base"] {
.ui.text.menu .item a.item,
.status-container__title {
- max-width: 100px;
+ max-width: calculateRem(100px);
word-break: break-word;
}
@@ -1266,7 +1250,7 @@ html[data-mode="darkmode"][layout="base"] {
.ui.text.menu .item a.item,
.status-container__title {
- max-width: 170px;
+ max-width: calculateRem(170px);
word-break: break-word;
}
@@ -1283,7 +1267,7 @@ html[data-mode="darkmode"][layout="base"] {
.ui.text.menu .item a.item,
.status-container__title {
- max-width: 75px;
+ max-width: calculateRem(75px);
word-break: break-word;
}
@@ -1300,7 +1284,7 @@ html[data-mode="darkmode"][layout="base"] {
.ui.text.menu .item a.item,
.status-container__title {
- max-width: 90px;
+ max-width: calculateRem(90px);
word-break: break-word;
}
@@ -1324,26 +1308,26 @@ html[data-mode="darkmode"][layout="base"] {
// tab index css
*:focus-visible {
- border: 0.0625rem #fe0000 solid !important;
+ border: 0.0625rem var(--red) solid !important;
border-radius: 0.25rem;
outline: none;
}
.profile-avtar:focus-within {
- border: 1px #fe0000 solid !important;
- border-radius: 5px;
+ border: calculateRem(1px) var(--accessibility-red2) solid !important;
+ border-radius: calculateRem(5px);
outline: none;
}
input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
- outline: 2px solid #fe0000;
- border-radius: 5px;
+ outline: calculateRem(2px) solid var(--accessibility-red2);
+ border-radius: calculateRem(5px);
}
.sb-checkbox.sb-checkbox-primary.sb-checkbox-rightaligned label:focus-within {
- outline: 2px solid #fe0000;
- border-radius: 5px;
+ outline: calculateRem(2px) solid var(--accessibility-red2);
+ border-radius: calculateRem(5px);
}
// tab index css end
@@ -1468,7 +1452,7 @@ html[layout="joy"] .sb-modal-content .ui.center.aligned.segment {
}
.required-asterisk {
- color: #a80011;
+ color: var(--accessibility-red);
}
// .mat-dialog-container{
@@ -1493,7 +1477,7 @@ html[layout="joy"] .sb-modal-content .ui.center.aligned.segment {
}
.startpage__instruction .startpage__instr-desc p.text-right {
- padding-right: 8px !important;
+ padding-right: calculateRem(8px) !important;
}
[dir="rtl"] {
diff --git a/src/app/client/src/assets/styles/layout/_footer.scss b/src/app/client/src/assets/styles/layout/_footer.scss
index c4aa7d86a650ebcc5a7de738cbad24042e9d2053..8969b5d844d26392ddbeab6c986d88fd432e6c4e 100644
--- a/src/app/client/src/assets/styles/layout/_footer.scss
+++ b/src/app/client/src/assets/styles/layout/_footer.scss
@@ -96,8 +96,8 @@
}
.footer {
- background: var(--sb-footer-bg);
- color: var(--white) !important;
+ background: var(--primary-theme);
+ color: var(--primary-theme-contrast) !important;
padding: calculateRem(34px) 0;
font-size: calculateRem(14px);
position: relative;
@@ -108,12 +108,12 @@
a {
- color: var(--white) !important;
+ color: var(--primary-theme-contrast) !important;
&:hover,
&:active,
&:focus {
- color: var(--white) !important;
+ color: var(--primary-theme-contrast) !important;
text-decoration: underline;
opacity: 1;
}
@@ -206,3 +206,12 @@
}
}
+
+.sb-footer-license {
+ display: flex;
+ margin-bottom: 0.5rem;
+ font-size: calculateRem(13px);
+ font-weight: normal;
+ align-items: flex-start;
+ justify-content: center;
+}
\ No newline at end of file
diff --git a/src/app/client/src/assets/styles/layout/_header.scss b/src/app/client/src/assets/styles/layout/_header.scss
index 2b35b90b5bd86870e7745c75436f83c3c507282f..1e67af4d291461873d772e8012868ef2b026a3b3 100644
--- a/src/app/client/src/assets/styles/layout/_header.scss
+++ b/src/app/client/src/assets/styles/layout/_header.scss
@@ -48,10 +48,8 @@
background: none;
padding: 0px;
display: flex;
- /* align-items: center; */
- /* justify-content: center; */
background: var(--sbt-header-bg) !important;
- border-radius: 24px 24px 0 0;
+ border-radius: calculateRem(24px) calculateRem(24px) 0 0;
padding: 1rem 1rem 1rem 1rem;
overflow: hidden;
overflow-x: auto;
@@ -70,15 +68,9 @@
position: relative;
margin:0 auto;
@include respond-above(sm) {
- // position: absolute;
- // left: 0px;
- // right: 0px;
- // top: 50%;
- // transform: translateY(-50%);
}
}
.ui.menu {
- // position: sticky;
z-index: 999;
border: 0;
margin-bottom: calculateRem(-1px);
@@ -117,7 +109,7 @@
.searchbox {
width: 100%;
@media only screen and (min-width: 1024px) {
- width: calc(100% - 284px);
+ width: calc(100% - calculateRem(284px));
max-width: calculateRem(490px);
}
.ui.icon.button {
@@ -130,7 +122,7 @@
color: var(--sb-header-qrcode-btn);
border-radius: calculateRem(4px);
font-weight: normal;
- border: calculateRem(0.5px) solid ar(--sb-header-qrcode-btn-border);;
+ border: calculateRem(0.5px) solid var(--sb-header-qrcode-btn-border);
box-shadow: 0 calculateRem(3px) calculateRem(4px) 0 rgba(var(--rc-rgba-black), 0.5);
height: calculateRem(32px);
padding: calculateRem(8px) calculateRem(16px);
@@ -185,7 +177,7 @@
.ui.menu .language-selector {
font-size: 0.86rem;
@include respond-above(md) {
- color: var(--white);
+ color: var(--primary-theme-contrast);
}
.ui.dropdown {
border: calculateRem(1px) solid var(--gray-100);
@@ -198,7 +190,7 @@
margin: 0 0 0 calculateRem(8px);
}
@media screen and (min-width: 1024px) {
- color: var(--white);
+ color: var(--primary-theme-contrast);
border: 0;
font-weight: 500;
padding: calculateRem(8px) 0;
diff --git a/src/app/client/src/assets/styles/legacy.scss b/src/app/client/src/assets/styles/legacy.scss
index 8154c64e4f6ab39d07947c07942d6f6c78e0c59b..c249318bfc38ae3d383242c0b1be04ee9f6376fc 100644
--- a/src/app/client/src/assets/styles/legacy.scss
+++ b/src/app/client/src/assets/styles/legacy.scss
@@ -338,7 +338,7 @@ body ::-webkit-scrollbar {
height: calculateRem(5px);
}
.qq-upload-file {
- width: calc(100% - 40px);
+ width: calc(100% - calculateRem(40px));
}
.qq-upload-list {
overflow-y: hidden;
@@ -955,7 +955,7 @@ iframe.iziModal-iframe {
td:first-child,
.ui[class*="basic"].border-less.table:not(.sortable):not(.striped)
th:first-child {
- padding-left: 25px;
+ padding-left: calculateRem(25px);
}
.ui.basic.border-less.table {
border: 0;
@@ -1061,7 +1061,7 @@ i.blue.icon {
}
.search-content-header {
.ui.floated.header {
- margin: 5px 0 0 5px !important;
+ margin: calculateRem(5px) 0 0 calculateRem(5px) !important;
font-size: 1.143rem !important;
font-weight: 600;
}
diff --git a/src/app/client/src/assets/styles/pages/_content-header.scss b/src/app/client/src/assets/styles/pages/_content-header.scss
index ef8ea802ea5b3bc34edcd589c5c5c3374583ed04..319a0e1d8e1cfefe4be9f2ea9ef75a3260d6f815 100644
--- a/src/app/client/src/assets/styles/pages/_content-header.scss
+++ b/src/app/client/src/assets/styles/pages/_content-header.scss
@@ -22,11 +22,11 @@
}
}
&__title {
- color: var(--primary-400);
- font-size: calculateRem(18px);
+ color: var(--primary-theme-contrast);
+ font-size: 1.125rem;
}
&__info {
- color: var(--gray-800);
+ color: var(--primary-theme-contrast);
font-size: calculateRem(14px);
align-items: center;
diff --git a/src/app/client/src/assets/styles/pages/_course-player.scss b/src/app/client/src/assets/styles/pages/_course-player.scss
index eef20c94eca5b0a115898e3c94c2e266b6b05392..72462109888e3d4458989af840a1c2104a8d923e 100644
--- a/src/app/client/src/assets/styles/pages/_course-player.scss
+++ b/src/app/client/src/assets/styles/pages/_course-player.scss
@@ -19,7 +19,7 @@
grid-template-areas:
'head card'
'content card';
- grid-template-columns: 1fr 340px;
+ grid-template-columns: 1fr calculateRem(340px);
grid-gap: calculateRem(24px);
&--header {
diff --git a/src/app/client/src/assets/styles/pages/_sbt-dropdown.scss b/src/app/client/src/assets/styles/pages/_sbt-dropdown.scss
index 12dd92d8e13e7b513eea69bd3d6596dc50428843..641e7d2bbf8eee39e114bd181e53a928bd704b46 100644
--- a/src/app/client/src/assets/styles/pages/_sbt-dropdown.scss
+++ b/src/app/client/src/assets/styles/pages/_sbt-dropdown.scss
@@ -57,7 +57,7 @@
line-height: calculateRem(40px);
border: none;
padding: 0 calculateRem(20px);
- border-radius: 28px;
+ border-radius: calculateRem(28px);
box-shadow: var(--sbt-box-shadow-3px);
.default.text {
diff --git a/src/app/client/src/assets/styles/pages/_sbt-filter.scss b/src/app/client/src/assets/styles/pages/_sbt-filter.scss
index 76209cc4e24c3fc9bbcc11c3aa46de07d009299a..526630c329d05fb0bdf19ed0a9eaaa55d6f53738 100644
--- a/src/app/client/src/assets/styles/pages/_sbt-filter.scss
+++ b/src/app/client/src/assets/styles/pages/_sbt-filter.scss
@@ -27,19 +27,15 @@
color: var(--sbt-pill-text) !important;
margin: 0 calculateRem(8px) calculateRem(8px) 0 !important;
background-color: var(--sbt-pill-bg) !important;
- font-size: 12px !important;
+ font-size: calculateRem(12px) !important;
display: unset !important;
- width: 100px;
- flex-basis: 100px;
+ width: calculateRem(100px);
+ flex-basis: calculateRem(100px);
flex-grow: 1;
html[dir="rtl"] & {
margin: 0 0 calculateRem(8px) calculateRem(8px) !important;
}
-
- // &:last-child{
- // flex:inherit;
- // }
&.active,
&:hover {
color: var(--sbt-pill-text-hover) !important;
@@ -67,7 +63,7 @@
.treepicker-parent input {
width: 100%;
border-radius: calculateRem(24px);
- border: 1px solid #999;
+ border: calculateRem(1px) solid var(--gray-200);
height: calculateRem(32px);
font-size: calculateRem(14px);
}
@@ -148,8 +144,8 @@
background: var(--white);
box-shadow: var(--sbt-box-shadow-3px);
border-radius: 50%;
- width: 24px;
- height: 24px;
+ width: calculateRem(24px);
+ height: calculateRem(24px);
display: flex;
align-items: center;
justify-content: center;
@@ -160,17 +156,16 @@
}
&-switcher {
- --primary-color: #024F9D;
width: calculateRem(40px);
height: calculateRem(40px);
- background-color: var(--sbt-filter-switcher-bg);
+ background-color: var(--primary-theme);
box-shadow: var(--sbt-box-shadow-3px);
display: flex;
align-items: center;
justify-content: center;
margin-top: calculateRem(-20px);
border-radius: 100%;
- color: var(--primary-color);
+ color: var(--primary-theme-contrast);
position: absolute;
left: calculateRem(24px);
top: 0px;
@@ -278,25 +273,22 @@
position: relative;
width: auto;
height: auto;
- // margin-top:calculateRem(-72px);
}
}
&-scrollable {
position: relative;
overflow-y: auto;
- height: calc(100vh - 95px);
+ height: calc(100vh - calculateRem(95px));
padding-bottom: calculateRem(8px);
@include respond-between(sm, md) {
- height: calc(100vh - 280px);
+ height: calc(100vh - calculateRem(280px));
}
@include respond-above(md) {
- //max-height: calc(100vh - 256px);
height: auto;
overflow: initial;
- // max-height: inherit;
}
}
diff --git a/src/app/client/src/assets/styles/pages/_user-mgmt.scss b/src/app/client/src/assets/styles/pages/_user-mgmt.scss
index 95c07b5621ee4e3a998c53800d88810d97d95373..feb97ab9e221c03ee8daf1d9e02ad2f557663bbf 100644
--- a/src/app/client/src/assets/styles/pages/_user-mgmt.scss
+++ b/src/app/client/src/assets/styles/pages/_user-mgmt.scss
@@ -1,10 +1,11 @@
@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
+
/* user create and choose user page UI styles */
.user-profile-box {
margin: calculateRem(32px) auto;
- max-width: 480px;
- width: calc(100% - 32px);
+ max-width: calculateRem(480px);
+ width: calc(100% - 2rem);
background: var(--white);
border-radius: calculateRem(8px);
diff --git a/src/app/client/src/assets/styles/pages/page-center-view.scss b/src/app/client/src/assets/styles/pages/page-center-view.scss
index be21cb263e56f579d42d9257a5c4680d5a80b2bb..f8a486cbc8aa01267c2a1315a82eba38043538ec 100644
--- a/src/app/client/src/assets/styles/pages/page-center-view.scss
+++ b/src/app/client/src/assets/styles/pages/page-center-view.scss
@@ -18,8 +18,8 @@
align-items: center;
justify-content: space-between;
flex-direction: column;
- width:calc(100% - 48px);
- height:calc(100vh - 48px);
+ width:calc(100% - calculateRem(48px));
+ height:calc(100vh - calculateRem(48px));
overflow-y: auto;
text-align:center;
margin:0 auto;
diff --git a/src/app/client/src/assets/styles/semantic/semantic-overrides.scss b/src/app/client/src/assets/styles/semantic/semantic-overrides.scss
index d638412a0d471ac3f9c87c8471cb9e39654161b2..2cf4a3d8603b342424e91dd3b7d04c855c47dc3b 100644
--- a/src/app/client/src/assets/styles/semantic/semantic-overrides.scss
+++ b/src/app/client/src/assets/styles/semantic/semantic-overrides.scss
@@ -1,6 +1,6 @@
.ui.grid > .column:not(.row) {
- padding-top: 16px;
- padding-bottom: 16px;
+ padding-top: 1rem;
+ padding-bottom: 1rem;
}
button,
diff --git a/src/app/client/src/assets/styles/semantic/semantic-rtl.scss b/src/app/client/src/assets/styles/semantic/semantic-rtl.scss
index 79bd27358e9c08ed987688487841208a071f3b65..cd3e2b23ce56942e1a2412c30e84f42b0bb60b3e 100644
--- a/src/app/client/src/assets/styles/semantic/semantic-rtl.scss
+++ b/src/app/client/src/assets/styles/semantic/semantic-rtl.scss
@@ -1,6 +1,6 @@
[dir="rtl"] {
.notched.circle.loading.icon {
- margin-left: 20px;
+ margin-left: 1.25rem;
}
.ui.input input{
text-align: right;
diff --git a/src/app/client/src/assets/styles/vendors/_angular2select-default.theme.scss b/src/app/client/src/assets/styles/vendors/_angular2select-default.theme.scss
index 079a4c2d3e07c9af8f9d1368175c1486a1f4995e..a8329af76b2693958069d5a883f83ff5b0832318 100644
--- a/src/app/client/src/assets/styles/vendors/_angular2select-default.theme.scss
+++ b/src/app/client/src/assets/styles/vendors/_angular2select-default.theme.scss
@@ -1,71 +1,73 @@
+@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
+
.c-btn {
- background: #fff;
- border: 1px solid #ccc;
- color: #333; }
+ background: var(--white);
+ border: calculateRem(1px) solid var(--gray-100);
+ color: var(--gray-800); }
.selected-list .c-list .c-token {
- background: #0079FE; }
+ background: var(--primary-color); }
.selected-list .c-list .c-token .c-label {
- color: #fff; }
+ color: var(--white); }
.selected-list .c-list .c-token .c-remove svg {
- fill: #fff; }
+ fill: var(--white); }
.selected-list .c-angle-down svg, .selected-list .c-angle-up svg {
- fill: #333; }
+ fill: var(--gray-800); }
.dropdown-list ul li:hover {
- background: #f5f5f5; }
+ background: var(--rc-f5f5f5); }
.arrow-up, .arrow-down {
- border-bottom: 15px solid #fff; }
+ border-bottom: calculateRem(15px) solid var(--white); }
.arrow-2 {
- border-bottom: 15px solid #ccc; }
+ border-bottom: calculateRem(15px) solid var(--gray-100); }
.list-area {
- border: 1px solid #ccc;
- background: #fff;
- box-shadow: 0px 1px 5px #959595; }
+ border: calculateRem(1px) solid var(--gray-100);
+ background: var(--white);
+ box-shadow: 0px calculateRem(1px) calculateRem(5px) var(--gray-200); }
.select-all {
- border-bottom: 1px solid #ccc; }
+ border-bottom: calculateRem(1px) solid var(--gray-100); }
.list-filter {
- border-bottom: 1px solid #ccc; }
+ border-bottom: calculateRem(1px) solid var(--gray-100); }
.list-filter .c-search svg {
- fill: #888; }
+ fill: var(--gray-200); }
.list-filter .c-clear svg {
- fill: #888; }
+ fill: var(--gray-200); }
.pure-checkbox input[type="checkbox"]:focus + label:before, .pure-checkbox input[type="checkbox"]:hover + label:before {
- border-color: #0079FE;
- background-color: #f2f2f2; }
+ border-color: var(--primary-color);
+ background-color: var(--gray-0); }
.pure-checkbox input[type="checkbox"] + label {
- color: #000; }
+ color: var(--black); }
.pure-checkbox input[type="checkbox"] + label:before {
- color: #0079FE;
- border: 2px solid #0079FE; }
+ color: var(--primary-color);
+ border: calculateRem(2px) solid var(--primary-color); }
.pure-checkbox input[type="checkbox"] + label:after {
- background-color: #0079FE; }
+ background-color: var(--primary-color); }
.pure-checkbox input[type="checkbox"]:disabled + label:before {
- border-color: #cccccc; }
+ border-color: var(--gray-100); }
.pure-checkbox input[type="checkbox"]:disabled:checked + label:before {
- background-color: #cccccc; }
+ background-color: var(--gray-100); }
.pure-checkbox input[type="checkbox"] + label:after {
- border-color: #ffffff; }
+ border-color: var(--white); }
.pure-checkbox input[type="radio"]:checked + label:before {
- background-color: white; }
+ background-color: var(--white); }
.pure-checkbox input[type="checkbox"]:checked + label:before {
- background: #0079FE; }
+ background: var(--primary-color); }
.selected-item {
- background: #e9f4ff; }
+ background: var(--primary-0); }
\ No newline at end of file
diff --git a/src/app/client/src/assets/styles/vendors/_fine-uploader-gallery.scss b/src/app/client/src/assets/styles/vendors/_fine-uploader-gallery.scss
index 2b6a55bdadc187ba985c7fb7cde43ac6051249f7..3f3d26b1bc74d1450a5d28fac6fdca35ce65e0de 100644
--- a/src/app/client/src/assets/styles/vendors/_fine-uploader-gallery.scss
+++ b/src/app/client/src/assets/styles/vendors/_fine-uploader-gallery.scss
@@ -1,3 +1,5 @@
+@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *;
+
/***********************************************
Hacks -
@@ -24,24 +26,24 @@
------------------------------------------ */
.qq-gallery .qq-upload-button {
display: inline;
- width: 105px;
- padding: 7px 10px;
+ width: calculateRem(105px);
+ padding: calculateRem(7px) calculateRem(10px);
float: left;
text-align: center;
- background: #00ABC7;
- color: #FFFFFF;
- border-radius: 2px;
- border: 1px solid #37B7CC;
- box-shadow: 0 1px 1px rgba(255, 255, 255, 0.37) inset,
- 1px 0 1px rgba(255, 255, 255, 0.07) inset,
- 0 1px 0 rgba(0, 0, 0, 0.36),
- 0 -2px 12px rgba(0, 0, 0, 0.08) inset
+ background: var(--rc-00abc7);
+ color: var(--white);
+ border-radius: calculateRem(2px);
+ border: calculateRem(1px) solid var(--rc-33B6CC);
+ box-shadow: 0 calculateRem(1px) calculateRem(1px) rgba(var(--rc-rgba-white), 0.37) inset,
+ calculateRem(1px) 0 calculateRem(1px) rgba(var(--rc-rgba-white), 0.07) inset,
+ 0 calculateRem(1px) 0 rgba(var(--rc-rgba-black), 0.36),
+ 0 calculateRem(-2px) calculateRem(12px) rgba(var(--rc-rgba-black), 0.08) inset
}
.qq-gallery .qq-upload-button-hover {
- background: #33B6CC;
+ background: var(--rc-33B6CC);
}
.qq-gallery .qq-upload-button-focus {
- outline: 1px dotted #000000;
+ outline: calculateRem(1px) dotted var(--black);
}
@@ -49,14 +51,14 @@
------------------------------------------ */
.qq-gallery.qq-uploader {
position: relative;
- min-height: 200px;
- max-height: 490px;
+ min-height: calculateRem(200px);
+ max-height: calculateRem(490px);
overflow-y: hidden;
width: inherit;
- border-radius: 6px;
- border: 1px dashed #CCCCCC;
- background-color: #FAFAFA;
- padding: 20px;
+ border-radius: calculateRem(6px);
+ border: calculateRem(1px) dashed var(--gray-100);
+ background-color: var(--rc-FAFAFA);
+ padding: calculateRem(20px);
}
.qq-gallery.qq-uploader:before {
content: attr(qq-drop-area-text) " ";
@@ -75,10 +77,10 @@
left: 0;
width: 100%;
height: 100%;
- min-height: 30px;
+ min-height: calculateRem(30px);
z-index: 2;
- background: #F9F9F9;
- border-radius: 4px;
+ background: var(--rc-FAFAFA);
+ border-radius: calculateRem(4px);
text-align: center;
}
.qq-gallery .qq-upload-drop-area span {
@@ -86,26 +88,26 @@
position: absolute;
top: 50%;
width: 100%;
- margin-top: -8px;
- font-size: 16px;
+ margin-top: calculateRem(-8px);
+ font-size: 1rem;
}
.qq-gallery .qq-upload-extra-drop-area {
position: relative;
- margin-top: 50px;
- font-size: 16px;
- padding-top: 30px;
- height: 20px;
- min-height: 40px;
+ margin-top: calculateRem(5px);
+ font-size: 1rem;
+ padding-top: calculateRem(30px);
+ height: calculateRem(20px);
+ min-height: calculateRem(40px);
}
.qq-gallery .qq-upload-drop-area-active {
- background: #FDFDFD;
- border-radius: 4px;
+ background: var(--rc-FAFAFA);
+ border-radius: calculateRem(4px);
}
.qq-gallery .qq-upload-list {
margin: 0;
- padding: 10px 0 0;
+ padding: calculateRem(10px) 0 0;
list-style: none;
- max-height: 450px;
+ max-height: calculateRem(450px);
overflow-y: auto;
clear: both;
box-shadow: none;
@@ -117,19 +119,19 @@
.qq-gallery .qq-upload-list li {
display: inline-block;
position: relative;
- max-width: 120px;
- margin: 0 25px 25px 0;
+ max-width: calculateRem(120px);
+ margin: 0 calculateRem(25px) calculateRem(25px) 0;
padding: 0;
- line-height: 16px;
- font-size: 13px;
- color: #424242;
- background-color: #FFFFFF;
- border-radius: 2px;
- box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.22);
+ line-height: 1rem;
+ font-size: calculateRem(13px);
+ color: var(--gray-800);
+ background-color: var(--white);
+ border-radius: calculateRem(2px);
+ box-shadow: 0 calculateRem(1px) calculateRem(1px) 0 rgba(var(--rc-rgba-black), 0.22);
vertical-align: top;
/* to ensure consistent size of tiles - may need to change if qq-max-size attr on preview img changes */
- height: 186px;
+ height: calculateRem(186px);
}
.qq-gallery .qq-upload-spinner,
@@ -158,19 +160,19 @@
.qq-gallery .qq-upload-continue {
border:none;
background: none;
- color: #00A0BA;
- font-size: 12px;
+ color: var(--rc-00abc7);
+ font-size: calculateRem(12px);
padding: 0;
}
/* to ensure consistent size of tiles - only display status text before auto-retry or after failure */
.qq-gallery .qq-upload-status-text {
- color: #333333;
- font-size: 12px;
- padding-left: 3px;
- padding-top: 2px;
+ color: var(--gray-800);
+ font-size: calculateRem(12px);
+ padding-left: calculateRem(3px);
+ padding-top: calculateRem(2px);
width: inherit;
display: none;
- width: 108px;
+ width: calculateRem(108px);
}
.qq-gallery .qq-upload-fail .qq-upload-status-text {
text-overflow: ellipsis;
@@ -186,48 +188,48 @@
}
.qq-gallery .qq-upload-cancel {
- background-color: #525252;
- color: #F7F7F7;
+ background-color: var(--gray-400);
+ color: var(--rc-f7f7f7);
font-weight: bold;
- border-radius: 12px;
+ border-radius: calculateRem(12px);
border: none;
- height: 22px;
- width: 22px;
- padding: 4px;
+ height: calculateRem(22px);
+ width: calculateRem(22px);
+ padding: calculateRem(4px);
position: absolute;
- right: -5px;
- top: -6px;
+ right: calculateRem(-5px);
+ top: calculateRem(-6px);
margin: 0;
- line-height: 17px;
+ line-height: calculateRem(17px);
}
.qq-gallery .qq-upload-cancel:hover {
- background-color: #525252;
+ background-color: var(--gray-400);
}
.qq-gallery .qq-upload-retry {
cursor: pointer;
position: absolute;
- top: 30px;
+ top: calculateRem(30px);
left: 50%;
- margin-left: -31px;
- box-shadow: 0 1px 1px rgba(255, 255, 255, 0.37) inset,
- 1px 0 1px rgba(255, 255, 255, 0.07) inset,
- 0 4px 4px rgba(0, 0, 0, 0.5),
- 0 -2px 12px rgba(0, 0, 0, 0.08) inset;
- padding: 3px 4px;
- border: 1px solid #d2ddc7;
- border-radius: 2px;
+ margin-left: calculateRem(-31px);
+ box-shadow: 0 calculateRem(1px) calculateRem(1px) rgba(var(--rc-rgba-white), 0.37) inset,
+ calculateRem(1px) 0 calculateRem(1px) rgba(var(--rc-rgba-white), 0.07) inset,
+ 0 calculateRem(4px) calculateRem(4px) rgba(var(--rc-rgba-black), 0.5),
+ 0 calculateRem(-2px) calculateRem(12px) rgba(var(--rc-rgba-black), 0.08) inset;
+ padding: calculateRem(3px) calculateRem(4px);
+ border: calculateRem(1px) solid var(--rc-d2ddc7);
+ border-radius: calculateRem(2px);
color: inherit;
- background-color: #EBF6E0;
+ background-color: var(--rc-EBF6E0);
z-index: 1;
}
.qq-gallery .qq-upload-retry:hover {
- background-color: #f7ffec;
+ background-color: var(--rc-f7ffec);
}
.qq-gallery .qq-file-info {
- padding: 10px 6px 4px;
- margin-top: -3px;
- border-radius: 0 0 2px 2px;
+ padding: calculateRem(10px) calculateRem(6px) calculateRem(4px);
+ margin-top: calculateRem(-3px);
+ border-radius: 0 0 calculateRem(2px) calculateRem(2px);
text-align: left;
overflow: hidden;
}
@@ -239,7 +241,7 @@
.qq-gallery .qq-upload-file {
display: block;
margin-right: 0;
- margin-bottom: 3px;
+ margin-bottom: calculateRem(3px);
width: auto;
/* to ensure consistent size of tiles - constrain text to single line */
@@ -252,10 +254,10 @@
background: url("../../../../node_modules/fine-uploader/fine-uploader/loading.gif");
position: absolute;
left: 50%;
- margin-left: -7px;
- top: 53px;
- width: 15px;
- height: 15px;
+ margin-left: calculateRem(-7px);
+ top: calculateRem(53px);
+ width: calculateRem(15px);
+ height: calculateRem(15px);
vertical-align: text-bottom;
}
.qq-gallery .qq-drop-processing {
@@ -264,8 +266,8 @@
.qq-gallery .qq-drop-processing-spinner {
display: inline-block;
background: url("../../../../node_modules/fine-uploader/fine-uploader/processing.gif");
- width: 24px;
- height: 24px;
+ width: calculateRem(24px);
+ height: calculateRem(24px);
vertical-align: text-bottom;
}
.qq-gallery .qq-upload-failed-text {
@@ -275,8 +277,8 @@
}
.qq-gallery .qq-upload-failed-icon {
display:none;
- width:15px;
- height:15px;
+ width:calculateRem(15px);
+ height:calculateRem(15px);
vertical-align:text-bottom;
}
.qq-gallery .qq-upload-fail .qq-upload-failed-text {
@@ -286,39 +288,39 @@
display: inline;
}
.qq-gallery .qq-upload-list li.qq-upload-success {
- background-color: #F2F7ED;
+ background-color: var(--gray-0);
}
.qq-gallery .qq-upload-list li.qq-upload-fail {
- background-color: #F5EDED;
- box-shadow: 0 0 1px 0 red;
+ background-color: var(--gray-0);
+ box-shadow: 0 0 calculateRem(1px) 0 var(--red);
border: 0;
}
.qq-gallery .qq-progress-bar {
display: block;
- background: #00abc7;
+ background: var(--rc-00abc7);
width: 0%;
- height: 15px;
- border-radius: 6px;
- margin-bottom: 3px;
+ height: calculateRem(15px);
+ border-radius: calculateRem(6px);
+ margin-bottom: calculateRem(3px);
}
.qq-gallery .qq-total-progress-bar {
- height: 25px;
- border-radius: 9px;
+ height: calculateRem(25px);
+ border-radius: calculateRem(9px);
}
.qq-gallery .qq-total-progress-bar-container {
- margin-left: 9px;
+ margin-left: calculateRem(9px);
display: inline;
float: right;
- width: 500px;
+ width: calculateRem(500px);
}
.qq-gallery .qq-upload-size {
- float: left;
- font-size: 11px;
- color: #929292;
- margin-bottom: 3px;
+ float:left;
+ font-size: calculateRem(11px);
+ color: var(--gray-200);
+ margin-bottom: calculateRem(3px);
margin-right: 0;
display: inline-block;
}
@@ -333,7 +335,7 @@
.qq-gallery .qq-upload-file.qq-editable {
cursor: pointer;
- margin-right: 20px;
+ margin-right: calculateRem(20px);
}
.qq-gallery .qq-edit-filename-icon.qq-editable {
@@ -346,14 +348,14 @@
.qq-gallery INPUT.qq-edit-filename.qq-editing {
position: static;
- height: 28px;
- width: 90px;
+ height: calculateRem(28px);
+ width: calculateRem(90px);
width: -moz-available;
- padding: 0 8px;
- margin-bottom: 3px;
- border: 1px solid #ccc;
- border-radius: 2px;
- font-size: 13px;
+ padding: 0 calculateRem(8px);
+ margin-bottom: calculateRem(3px);
+ border: calculateRem(1px) solid var(--gray-100);
+ border-radius: calculateRem(2px);
+ font-size: calculateRem(13px);
opacity: 1;
filter: alpha(opacity=100);
@@ -363,36 +365,36 @@
.qq-gallery .qq-edit-filename-icon {
display: none;
background: url("../../../node_modules/fine-uploader/fine-uploader/edit.gif");
- width: 15px;
- height: 15px;
+ width: calculateRem(15px);
+ height: calculateRem(15px);
vertical-align: text-bottom;
}
.qq-gallery .qq-delete-icon {
background: url("../../../node_modules/fine-uploader/fine-uploader/trash.gif");
- width: 15px;
- height: 15px;
+ width: calculateRem(15px);
+ height: calculateRem(15px);
vertical-align: sub;
display: inline-block;
}
.qq-gallery .qq-retry-icon {
background: url("../../../node_modules/fine-uploader/fine-uploader/retry.gif");
- width: 15px;
- height: 15px;
+ width: calculateRem(15px);
+ height: calculateRem(15px);
vertical-align: sub;
display: inline-block;
float: none;
}
.qq-gallery .qq-continue-icon {
background: url("../../../node_modules/fine-uploader/fine-uploader/continue.gif");
- width: 15px;
- height: 15px;
+ width: calculateRem(15px);
+ height: calculateRem(15px);
vertical-align: sub;
display: inline-block;
}
.qq-gallery .qq-pause-icon {
background: url("../../../node_modules/fine-uploader/fine-uploader/pause.gif");
- width: 15px;
- height: 15px;
+ width: calculateRem(15px);
+ height: calculateRem(15px);
vertical-align: sub;
display: inline-block;
}
@@ -414,11 +416,11 @@
position: relative;
/* to ensure consistent size of tiles - should match qq-max-size attribute value on qq-thumbnail-selector IMG element */
- height: 120px;
- width: 120px;
+ height: calculateRem(120px);
+ width: calculateRem(120px);
}
.qq-gallery .qq-thumbnail-selector {
- border-radius: 2px 2px 0 0;
+ border-radius: calculateRem(2px) calculateRem(2px) 0 0;
bottom: 0;
/* we will override this in the :root thumbnail selector (to help center the preview) for everything other than IE8 */
@@ -459,18 +461,18 @@
.qq-gallery.qq-uploader DIALOG .qq-dialog-buttons {
text-align: center;
- padding-top: 10px;
+ padding-top: calculateRem(10px);
}
.qq-gallery.qq-uploader DIALOG .qq-dialog-buttons BUTTON {
- margin-left: 5px;
- margin-right: 5px;
+ margin-left: calculateRem(5px);
+ margin-right: calculateRem(5px);
}
.qq-gallery.qq-uploader DIALOG .qq-dialog-message-selector {
- padding-bottom: 10px;
+ padding-bottom: calculateRem(10px);
}
.qq-gallery .qq-uploader DIALOG::backdrop {
- background-color: rgba(0, 0, 0, 0.7);
+ background-color: rgba(var(--rc-rgba-black), 0.7);
}
diff --git a/src/app/client/src/assets/styles/vendors/_fine-uploader-new.scss b/src/app/client/src/assets/styles/vendors/_fine-uploader-new.scss
index 61aac5f9eacda56df748f8e6f5ee6d3b1ac05a49..2e06238607bcbd6f13cee6acf8af9a17490d4551 100644
--- a/src/app/client/src/assets/styles/vendors/_fine-uploader-new.scss
+++ b/src/app/client/src/assets/styles/vendors/_fine-uploader-new.scss
@@ -71,17 +71,17 @@
display: inline;
width: calculateRem(105px);
margin-bottom: calculateRem(10px);
- padding: 7px calculateRem(10px);
+ padding: calculateRem(7px) calculateRem(10px);
text-align: center;
float: left;
background: var(--rc-00abc7);
color: var(--white);
border-radius: calculateRem(2px);
- border: 1px solid var(--rc-2dadc2);
- box-shadow: 0 calculateRem(1px) calculateRem(1px) rgba(255, 255, 255, 0.37) inset,
- calculateRem(1px) 0 calculateRem(1px) rgba(255, 255, 255, 0.07) inset,
- 0 calculateRem(1px) 0 rgba(0, 0, 0, 0.36),
- 0 calculateRem(-2px) calculateRem(12px) rgba(0, 0, 0, 0.08) inset;
+ border: calculateRem(1px) solid var(--rc-2dadc2);
+ box-shadow: 0 calculateRem(1px) calculateRem(1px) rgba(var(--rc-rgba-white), 0.37) inset,
+ calculateRem(1px) 0 calculateRem(1px) rgba(var(--rc-rgba-white), 0.07) inset,
+ 0 calculateRem(1px) 0 rgba(var(--rc-rgba-black), 0.36),
+ 0 calculateRem(-2px) calculateRem(12px) rgba(var(--rc-rgba-black), 0.08) inset;
}
.qq-upload-button-hover {
background: var(--rc-33B6CC);
diff --git a/src/app/client/src/assets/styles/vendors/_slick.scss b/src/app/client/src/assets/styles/vendors/_slick.scss
index 28ed94bb0070f69d60b0e565a59b50086cff6f53..cf31f2c1fd4c8fbfbe9540ba05cfee5120420a50 100644
--- a/src/app/client/src/assets/styles/vendors/_slick.scss
+++ b/src/app/client/src/assets/styles/vendors/_slick.scss
@@ -26,7 +26,7 @@ $slick-dot-color-active: $slick-dot-color !default;
$slick-prev-character: "\f104" !default;
$slick-next-character: "\f105" !default;
$slick-dot-character: "\2022" !default;
-$slick-dot-size: 6px !default;
+$slick-dot-size: calculateRem(6px) !default;
$slick-opacity-default: 1 !default;
$slick-opacity-on-hover: 1 !default;
$slick-opacity-not-active: 0 !default;
@@ -79,12 +79,6 @@ $slick-opacity-not-active: 0 !default;
-webkit-tap-highlight-color: transparent;
}
-.slick-list {
- .slick-loading & {
- // background: var(--white) slick-image-url("ajax-loader.gif") center center no-repeat;
- }
-}
-
.slick-list {
position: relative;
overflow: hidden;
@@ -116,7 +110,7 @@ $slick-opacity-not-active: 0 !default;
left: 0;
top: 0;
display: block;
- padding-top: 3px;
+ padding-top: calculateRem(3px);
&:before,
&:after {
diff --git a/src/app/client/src/index.html b/src/app/client/src/index.html
index 3662831780df3e092383ca2e6794acc77c79b6bf..b4b52ae8e9e11f5a35e016b61847d74e616a4d0f 100644
--- a/src/app/client/src/index.html
+++ b/src/app/client/src/index.html
@@ -1,5 +1,5 @@
<!doctype html>
-<html lang="en" dir="ltr" data-theme="default" data-mode="light" layout="base" accessible-theme="accessible">
+<html lang="en" dir="ltr" data-theme="default" data-mode="light" data-color="yellow" layout="base" accessible-theme="accessible">
<head>
<meta charset="utf-8">
diff --git a/src/app/client/yarn.lock b/src/app/client/yarn.lock
index b8d320528c77b84c61d7b0a55eb1a9e895a659ed..2d73bc660e1d5d8fe2b91bf527e3f61366a57f98 100644
--- a/src/app/client/yarn.lock
+++ b/src/app/client/yarn.lock
@@ -2119,10 +2119,10 @@
reflect-metadata "^0.1.13"
whatwg-fetch "^3.1.0"
-"@project-sunbird/common-consumption@4.12.0":
- version "4.12.0"
- resolved "https://registry.yarnpkg.com/@project-sunbird/common-consumption/-/common-consumption-4.12.0.tgz#ef4bdf7c77445b7b0d3b46cf6d44c49d68d061ec"
- integrity sha512-ijX69lPrG4bIV9Dprzq/mFYnTXvqLwcyTG212tshXyeTMxiwCrJ314jRwjMD/jOnV5tyTptw7s0ogDlB1M8vJA==
+"@project-sunbird/common-consumption@4.12.1":
+ version "4.12.1"
+ resolved "https://registry.yarnpkg.com/@project-sunbird/common-consumption/-/common-consumption-4.12.1.tgz#2e450a158c18f94fbd41cc6848df00ebbf7343ba"
+ integrity sha512-bMbre57F65mghGQnBE0Mlj2YvRcEoIsKTCvD+zdga40SG+MSJSiJvHYj6o7eDiPgvegphaTi+w/yqJDM9+4q9g==
dependencies:
tslib "^2.0.0"
@@ -2168,15 +2168,17 @@
dependencies:
tslib "^2.0.0"
-"@project-sunbird/sb-styles@0.0.10":
- version "0.0.10"
- resolved "https://registry.yarnpkg.com/@project-sunbird/sb-styles/-/sb-styles-0.0.10.tgz#45add8f8917e300dccadb893167703e1c2729290"
- integrity sha512-JEyHbYmSlX887deJ7gsNHxNSUwDR7B6sVHRQR00bQ05UywtwDoBrSgBof0kNcYAE+iAyCYUyy2slHm5JeXmltQ==
+"@project-sunbird/sb-styles@0.0.14", "@project-sunbird/sb-styles@^0.0.14":
+ version "0.0.14"
+ resolved "https://registry.yarnpkg.com/@project-sunbird/sb-styles/-/sb-styles-0.0.14.tgz#f682ec7c03d7f3023c50e44973592edb51d03247"
+ integrity sha512-pq4RqXPoqcTyncLz64gHu0AFVgl4KoL3yr+ocgdO4n26BkQZBgQG0xtuYqscUPPWVBg/BS4TCsjzMO+ifunRaA==
-"@project-sunbird/sb-themes@0.0.85":
- version "0.0.85"
- resolved "https://registry.yarnpkg.com/@project-sunbird/sb-themes/-/sb-themes-0.0.85.tgz#9d975aaf39d23100127faf37f2bdef33c0a17c0f"
- integrity sha512-wHPJwPn9TfWJ/lSb+loRDA6mEdD4BM5T+D14v/VF0OTkKC7cdVcjZwl5jTtg+YbpyWYCTGns6dMgIC3mCd5dfA==
+"@project-sunbird/sb-themes@0.0.88":
+ version "0.0.88"
+ resolved "https://registry.yarnpkg.com/@project-sunbird/sb-themes/-/sb-themes-0.0.88.tgz#cd11ac1f3da915c7c433e6ac9e20ee29b6c52616"
+ integrity sha512-12eKzpToyjJAKTLLFWq9Zo3+Y6tzi2GE0YBNbErfMxs9iAubliqApkwGMH/ry2qYhV8S/uiEcE4JPwtX2HZcYA==
+ dependencies:
+ "@project-sunbird/sb-styles" "0.0.14"
"@project-sunbird/sunbird-collection-editor-v9@5.0.14":
version "5.0.14"
@@ -4285,7 +4287,7 @@ chartjs-plugin-stacked100@^0.7.1:
dependencies:
chart.js "^2.4.0"
-"chokidar@>=2.0.0 <4.0.0", chokidar@^3.0.0, chokidar@^3.4.1:
+"chokidar@>=2.0.0 <4.0.0", "chokidar@>=3.0.0 <4.0.0", chokidar@^3.0.0, chokidar@^3.4.1:
version "3.5.3"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -7733,7 +7735,7 @@ immediate@~3.0.5:
resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
integrity sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==
-immutable@^4.0.0-rc.12:
+immutable@^4.0.0, immutable@^4.0.0-rc.12:
version "4.1.0"
resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.1.0.tgz#f795787f0db780183307b9eb2091fcac1f6fafef"
integrity sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==
@@ -10113,6 +10115,11 @@ moment-duration-format@2.3.2:
resolved "https://registry.yarnpkg.com/moment-duration-format/-/moment-duration-format-2.3.2.tgz#5fa2b19b941b8d277122ff3f87a12895ec0d6212"
integrity sha512-cBMXjSW+fjOb4tyaVHuaVE/A5TqkukDWiOfxxAjY+PEqmmBQlLwn+8OzwPiG3brouXKY5Un4pBjAeB6UToXHaQ==
+moment@2.24.0:
+ version "2.24.0"
+ resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+ integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
+
moment@2.29.1, moment@^2.10.2, moment@^2.29.1:
version "2.29.1"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
@@ -12733,6 +12740,15 @@ sass@1.32.6:
dependencies:
chokidar ">=2.0.0 <4.0.0"
+sass@^1.56.1:
+ version "1.56.2"
+ resolved "https://registry.yarnpkg.com/sass/-/sass-1.56.2.tgz#9433b345ab3872996c82a53a58c014fd244fd095"
+ integrity sha512-ciEJhnyCRwzlBCB+h5cCPM6ie/6f8HrhZMQOf5vlU60Y1bI1rx5Zb0vlDZvaycHsg/MqFfF1Eq2eokAa32iw8w==
+ dependencies:
+ chokidar ">=3.0.0 <4.0.0"
+ immutable "^4.0.0"
+ source-map-js ">=0.6.2 <2.0.0"
+
saucelabs@^1.5.0:
version "1.5.0"
resolved "https://registry.yarnpkg.com/saucelabs/-/saucelabs-1.5.0.tgz#9405a73c360d449b232839919a86c396d379fd9d"
@@ -13211,7 +13227,7 @@ source-list-map@^2.0.0, source-list-map@^2.0.1:
resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
-source-map-js@^1.0.2:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==