Skip to content
GitLab
Unverified Commit 591a9fa7 authored by Sharath Prasad's avatar Sharath Prasad Committed by GitHub
Browse files

Merge pull request #93 from sri-pusuluri/cQUI 

Issue#000 fix: cQ portal UI theme changes
parents 4fa7b4ff bd495f0a
master release-5.1.0
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 133 additions and 102 deletions
+133 -102
package.json
+ 1
− 1
View file @ 591a9fa7
{
"name": "@project-sunbird/sb-themes",
"version": "0.0.76",
"version": "0.0.77",
"description": "Sunbird project application themes",
"main": "index.js",
"scripts": {
......
themes/theme-dk-reverse.scss
+ 132
− 101
View file @ 591a9fa7
......@@ -3,32 +3,36 @@ html[data-theme="light"][data-layout="cQubeDkR"] {
--white: #fff;
--cQ-gray: #333;
--cQ-gray555: #555;
--cQ-theme-bg: #4C30F5;
--cQ-theme-bg-shade: #61D5F4;
--cQ-theme-bg: #4c30f5;
--cQ-theme-bg-shade: #61d5f4;
--cQ-primary: #202342;
--cQ-primary-contrast: var(--white);
--cQ-secondary: #4C30F5;
--cQ-secondary: #4c30f5;
--cQ-secondary-contrast: var(--white);
--cQ-tertiary: #ffd954;
--cQ-tertiary-contrast: var(--cQ-gray);
--cQ-gray-contrast: var(--white);
--cQcard-boxshadow: #bfd2fc;
--metaDatabox-bg: #61D5F4;
--metaDatabox-bg: #61d5f4;
}
html[data-layout="cQubeDkR"] {
overflow-x: hidden;
overflow-x: hidden;
body {
background: linear-gradient(90deg, var(--cQ-theme-bg) 30%, var(--cQ-theme-bg-shade) 126.6%) !important;
background: linear-gradient(
90deg,
var(--cQ-theme-bg) 30%,
var(--cQ-theme-bg-shade) 126.6%
) !important;
overflow-y: auto;
overflow-x:hidden;
overflow-x: hidden;
position: relative;
&:before {
content: '';
width: 29.56rem;
height: 20.18rem;
position: fixed;
right:8rem;
opacity: 0.25;
content: "";
width: 29.56rem;
height: 20.18rem;
position: fixed;
right: 8rem;
opacity: 0.25;
}
}
.app-nav-bar {
......@@ -42,6 +46,7 @@ html[data-layout="cQubeDkR"] {
transition: all 0.3s;
position: absolute;
z-index: 1;
top: 3rem;
}
.sidebaractive .app-nav-bar {
left: 6rem;
......@@ -63,12 +68,11 @@ html[data-layout="cQubeDkR"] {
.app-side-nav {
margin-top: -5.5rem;
height: 100%;
height: calc(100vh - 3rem);
background: var(--cQ-primary) !important;
box-shadow: none;
width: 18rem;
transition: all 0.3s;
padding: 0 0rem 0 1rem;
display: block;
z-index: 8;
ul {
......@@ -80,7 +84,8 @@ html[data-layout="cQubeDkR"] {
padding: 0.5rem !important;
display: flex;
align-items: center;
padding: 1rem 1rem 1rem 1rem !important;
padding: 1rem 0.5rem 1rem 0.5rem !important;
height: 4rem;
margin-bottom: 0.5rem;
position: relative;
i {
......@@ -91,6 +96,8 @@ html[data-layout="cQubeDkR"] {
justify-content: center;
border-radius: 50%;
margin-right: 0.5rem;
background: white;
min-width: 3rem;
}
div.btn {
color: var(--white);
......@@ -111,7 +118,8 @@ html[data-layout="cQubeDkR"] {
color: var(--white);
}
}
&:hover:before, &.activeLink:before {
&:hover:before,
&.activeLink:before {
content: "";
position: absolute;
top: -2.5rem;
......@@ -122,7 +130,8 @@ html[data-layout="cQubeDkR"] {
border-radius: 50%;
box-shadow: 1.25rem 1.25rem 0 var(--cQ-theme-bg);
}
&:hover:after, &.activeLink:after {
&:hover:after,
&.activeLink:after {
content: "";
position: absolute;
bottom: -2.5rem;
......@@ -143,12 +152,13 @@ html[data-layout="cQubeDkR"] {
}
}
.sidebaractive .app-side-nav ul li {
border-radius: 50%;
width: 4rem;
height: 4rem;
transition: all 0.3s;
padding: 1rem 5rem 1rem 0.5rem !important;
border-radius: 2rem 0 0 2rem;
&.activeLink:before,
&.activeLink:after {
display: none;
......@@ -159,7 +169,8 @@ html[data-layout="cQubeDkR"] {
i {
margin-right: 0;
}
&:hover:before,&:hover:after {
&:hover:before,
&:hover:after {
display: none;
}
}
......@@ -255,6 +266,18 @@ html[data-layout="cQubeDkR"] {
// }
// }
/* footer */
app-footer .app-footer-bar {
background: none;
.container {
display: flex;
flex-direction: column;
align-items: center;
div {
font-size: 0.75rem;
}
}
}
h1.leading-tight,
.metric-card-wrapper .h4 {
color: var(--white) !important;
......@@ -263,19 +286,19 @@ html[data-layout="cQubeDkR"] {
}
.metric-card-wrapper > div {
background: none;
padding-left: 1.5rem;
padding-left: 0rem;
padding-right: 1.5rem;
border-radius: 1.5rem 0 0 1.5rem;
}
.app-content-wrapper {
margin-top: 5.5rem;
padding-top:0;
margin-top: 8.5rem;
padding-top: 0;
padding-left: 20rem !important;
padding-right: 0rem;
transition: all 0.3s;
// background: linear-gradient(90deg, var(--cQ-theme-bg) 30%, var(--cQ-theme-bg-shade) 126.6%) !important;
position: relative;
z-index: 1;
// background: linear-gradient(90deg, var(--cQ-theme-bg) 30%, var(--cQ-theme-bg-shade) 126.6%) !important;
position: relative;
z-index: 1;
}
.active:focus {
background-color: transparent !important;
......@@ -326,6 +349,9 @@ html[data-layout="cQubeDkR"] {
.mat-tab-label-container .mat-tab-list {
padding-left: 1rem;
}
.mat-tab-label {
font-size: 1rem;
}
/** library css */
/* grid */
.sb-cQ-grid {
......@@ -382,6 +408,10 @@ html[data-layout="cQubeDkR"] {
}
}
sb-cqube-info-card .sb-cQ-card {
height: 8.25rem !important;
}
.sb-cQ-card_2 {
min-width: 21.75rem;
max-width: 100%;
......@@ -390,6 +420,7 @@ html[data-layout="cQubeDkR"] {
flex-direction: column;
justify-content: space-between;
overflow: inherit;
min-width: 13.75rem !important;
&:hover {
background: var(--white) !important;
}
......@@ -456,6 +487,11 @@ html[data-layout="cQubeDkR"] {
// }
}
/* cQ Grid */
.cQ-Grid {
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
}
.mat-tab-labels .mat-tab-label-active {
background: none;
color: var(--cQ-secondary);
......@@ -478,102 +514,97 @@ html[data-layout="cQubeDkR"] {
padding: 0 2rem;
}
@media (max-width: 992px) {
.sidebaractive .app-content-wrapper {
padding-left: 0rem !important;
}
.sb-cQ-card_2,
.sb-cQ-card {
min-width: auto;
}
.app-content-wrapper {
padding-left: 0rem !important;
}
@media (max-width: 992px) {
.sidebaractive .app-content-wrapper {
padding-left: 0rem !important;
}
.sb-cQ-card_2,
.sb-cQ-card {
min-width: auto;
}
.app-content-wrapper {
padding-left: 0rem !important;
}
.sidebaractive input[type="checkbox"]:checked ~ #sidebarMenu li div span {
display: block;
}
.sidebaractive
input[type="checkbox"]:checked
~ .sidebarIconToggle
> .horizontal {
opacity: 0;
}
.horizontal {
opacity: 1;
}
.diagonal.part-1 {
transform: rotate(0deg);
}
.diagonal.part-2 {
transform: rotate(180deg);
margin-top: -15px;
}
.sidebaractive
input[type="checkbox"]:checked
~ .sidebarIconToggle
> .diagonal.part-1 {
transform: rotate(-135deg);
margin-top: 6px;
}
.sidebaractive
input[type="checkbox"]:checked
~ .sidebarIconToggle
> .diagonal.part-2 {
transform: rotate(-45deg);
margin-top: -9px;
}
}
@media (max-width: 768px) {
.app-content-wrapper {
.sidebaractive input[type="checkbox"]:checked ~ #sidebarMenu li div span {
display: block;
}
.sidebaractive
input[type="checkbox"]:checked
~ .sidebarIconToggle
> .horizontal {
opacity: 0;
}
.horizontal {
opacity: 1;
}
.diagonal.part-1 {
transform: rotate(0deg);
}
.diagonal.part-2 {
transform: rotate(180deg);
margin-top: -15px;
}
.sidebaractive
input[type="checkbox"]:checked
~ .sidebarIconToggle
> .diagonal.part-1 {
transform: rotate(-135deg);
margin-top: 6px;
}
.sidebaractive
input[type="checkbox"]:checked
~ .sidebarIconToggle
> .diagonal.part-2 {
transform: rotate(-45deg);
margin-top: -9px;
}
.app-content-wrapper {
padding-left: 1rem !important;
}
.mainHeaderContent h1.leading-tight {
}
.mainHeaderContent h1.leading-tight {
display: none;
}
.app-nav-bar {
}
.app-nav-bar {
left: 6rem;
}
.app-side-nav {
}
.app-side-nav {
width: 6rem;
height:auto;
height: auto;
.menu {
display: none;
display: none;
}
}
}
.sidebaractive {
.sidebaractive {
.app-content-wrapper {
padding-left: 1rem !important;
padding-left: 1rem !important;
}
.app-nav-bar {
left: 6rem;
left: 6rem;
}
.app-side-nav {
width: 90%;
height:100%;
padding-right: 1rem;
.menu {
display: block;
}
width: 90%;
height: 100%;
padding-right: 1rem;
.menu {
display: block;
}
}
.app-side-nav ul li div span {
display: block;
display: block;
margin-left: 0.5rem;
}
.app-side-nav ul li {
border-radius: 2rem;
width: 100%;
height: 4rem;
transition: all 0.3s;
border-radius: 2rem;
width: 100%;
height: 4rem;
transition: all 0.3s;
}
}
}
}
}
html[data-theme="dark"][data-layout="cQubeDkR"] {
--cQ-theme-bg: #161616;
--cQ-theme-bg-shade: #232227;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment