Initial Version
This commit is contained in:
root
146
core/src/scss/layout/_container.scss
Normal file
146
core/src/scss/layout/_container.scss
Normal file
@@ -0,0 +1,146 @@
|
||||
html {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.horizontalLayout {
|
||||
.page-wrapper {
|
||||
.v-container {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.spacer {
|
||||
padding: 100px 0;
|
||||
@media (max-width: 1264px) {
|
||||
padding: 72px 0;
|
||||
}
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
.spacer {
|
||||
padding: 40px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
.page-wrapper {
|
||||
background: rgb(var(--v-theme-containerBg));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100vh - 60px);
|
||||
overflow: hidden;
|
||||
|
||||
.page-content-container {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
@media (max-width: 1550px) {
|
||||
max-width: 100%;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
padding-inline: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-footer-container {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.v-container {
|
||||
padding: 15px;
|
||||
@media (max-width: 1550px) {
|
||||
max-width: 100%;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
padding-inline: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.maxWidth {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
$sizes: (
|
||||
'display-1': 44px,
|
||||
'display-2': 40px,
|
||||
'display-3': 30px,
|
||||
'h1': 36px,
|
||||
'h2': 30px,
|
||||
'h3': 21px,
|
||||
'h4': 18px,
|
||||
'h5': 16px,
|
||||
'h6': 14px,
|
||||
'text-8': 8px,
|
||||
'text-10': 10px,
|
||||
'text-13': 13px,
|
||||
'text-18': 18px,
|
||||
'text-20': 20px,
|
||||
'text-24': 24px,
|
||||
'body-text-1': 10px
|
||||
);
|
||||
|
||||
@each $pixel, $size in $sizes {
|
||||
.#{$pixel} {
|
||||
font-size: $size;
|
||||
line-height: $size + 10;
|
||||
}
|
||||
}
|
||||
|
||||
.customizer-btn {
|
||||
.icon {
|
||||
animation: progress-circular-rotate 1.4s linear infinite;
|
||||
transform-origin: center center;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
}
|
||||
.fixed-width {
|
||||
max-width: 1300px;
|
||||
}
|
||||
.ga-2 {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
// font family
|
||||
body {
|
||||
font-family: 'Public Sans', sans-serif;
|
||||
.Roboto {
|
||||
font-family: 'Roboto', sans-serif !important;
|
||||
}
|
||||
|
||||
.Poppins {
|
||||
font-family: 'Poppins', sans-serif !important;
|
||||
}
|
||||
|
||||
.Inter {
|
||||
font-family: 'Inter', sans-serif !important;
|
||||
}
|
||||
|
||||
.Public {
|
||||
font-family: 'Public sans', sans-serif !important;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideY {
|
||||
0%,
|
||||
50%,
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
25% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
75% {
|
||||
transform: translateY(10px);
|
||||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
color: rgb(var(--v-theme-lightText));
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: rgb(var(--v-theme-primary));
|
||||
}
|
||||
}
|
||||
25
core/src/scss/layout/_footer.scss
Normal file
25
core/src/scss/layout/_footer.scss
Normal file
@@ -0,0 +1,25 @@
|
||||
.v-footer {
|
||||
background: rgb(var(--v-theme-containerbg));
|
||||
padding: 24px 16px 0px;
|
||||
margin-top: auto;
|
||||
position: unset;
|
||||
a {
|
||||
text-decoration: unset;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 475px) {
|
||||
.footer {
|
||||
text-align: center;
|
||||
.v-col-6 {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
&.text-right {
|
||||
text-align: center !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
165
core/src/scss/layout/_sidebar.scss
Normal file
165
core/src/scss/layout/_sidebar.scss
Normal file
@@ -0,0 +1,165 @@
|
||||
/*This is for the logo*/
|
||||
.leftSidebar {
|
||||
border: 0px;
|
||||
box-shadow: none !important;
|
||||
border-right: 1px solid rgba(var(--v-theme-borderLight), 0.8);
|
||||
.logo {
|
||||
padding-left: 7px;
|
||||
}
|
||||
}
|
||||
/*This is for the Vertical sidebar*/
|
||||
.scrollnavbar {
|
||||
height: calc(100vh - 110px);
|
||||
.smallCap {
|
||||
padding: 0px 0 0 20px !important;
|
||||
}
|
||||
.v-list {
|
||||
color: rgb(var(--v-theme-lightText));
|
||||
padding: 0;
|
||||
.v-list-item--one-line {
|
||||
&.v-list-item--active {
|
||||
border-right: 2px solid rgb(var(--v-theme-primary));
|
||||
}
|
||||
}
|
||||
.v-list-group {
|
||||
.v-list-item--one-line {
|
||||
&.v-list-item--active.v-list-item--link {
|
||||
border-right: 2px solid rgb(var(--v-theme-primary));
|
||||
}
|
||||
&.v-list-item--active.v-list-group__header {
|
||||
border-right: none;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
.v-list-group__items {
|
||||
.v-list-item--link,
|
||||
.v-list-item {
|
||||
.v-list-item__prepend {
|
||||
margin-inline-end: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.v-list-item--variant-plain,
|
||||
.v-list-item--variant-outlined,
|
||||
.v-list-item--variant-text,
|
||||
.v-list-item--variant-tonal {
|
||||
color: rgb(var(--v-theme-darkText));
|
||||
}
|
||||
}
|
||||
/*General Menu css*/
|
||||
.v-list-group__items .v-list-item,
|
||||
.v-list-item {
|
||||
border-radius: 0;
|
||||
padding-inline-start: calc(20px + var(--indent-padding) / 2) !important;
|
||||
.v-list-item__prepend {
|
||||
margin-inline-end: 13px;
|
||||
}
|
||||
.v-list-item__append {
|
||||
font-size: 0.875rem;
|
||||
.v-icon {
|
||||
margin-inline-start: 13px;
|
||||
}
|
||||
> .v-icon {
|
||||
--v-medium-emphasis-opacity: 0.8;
|
||||
}
|
||||
}
|
||||
.v-list-item-title {
|
||||
font-size: 0.875rem;
|
||||
color: rgb(var(--v-theme-darkText));
|
||||
}
|
||||
&.v-list-item--active {
|
||||
.v-list-item-title {
|
||||
color: rgb(var(--v-theme-primary));
|
||||
}
|
||||
}
|
||||
}
|
||||
/*This is for the dropdown*/
|
||||
.v-list {
|
||||
.v-list-item--active {
|
||||
.v-list-item-title {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.sidebarchip .v-icon {
|
||||
margin-inline-start: -3px;
|
||||
}
|
||||
.v-list-group {
|
||||
.v-list-item:focus-visible > .v-list-item__overlay {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
> .v-list-group {
|
||||
position: relative;
|
||||
> .v-list-item--active,
|
||||
> .v-list-item:hover {
|
||||
background: rgb(var(--v-theme-primary), 0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.v-navigation-drawer--rail {
|
||||
.scrollnavbar .v-list .v-list-group__items,
|
||||
.hide-menu {
|
||||
opacity: 0;
|
||||
}
|
||||
.scrollnavbar {
|
||||
.v-list-item {
|
||||
.v-list-item__prepend {
|
||||
margin-left: 8px;
|
||||
.anticon {
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.v-list-group__items .v-list-item,
|
||||
.v-list-item {
|
||||
padding-inline-start: calc(12px + var(--indent-padding) / 2) !important;
|
||||
}
|
||||
.ExtraBox {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.sidebar-user {
|
||||
margin-left: -6px;
|
||||
}
|
||||
.leftPadding {
|
||||
margin-left: 0px;
|
||||
}
|
||||
&.leftSidebar {
|
||||
.v-list-subheader {
|
||||
display: none;
|
||||
}
|
||||
.v-navigation-drawer__content {
|
||||
.pa-5 {
|
||||
padding-left: 10px !important;
|
||||
.logo {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1170px) {
|
||||
.mini-sidebar {
|
||||
.logo {
|
||||
width: 40px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.leftSidebar:hover {
|
||||
box-shadow: $box-shadow !important;
|
||||
}
|
||||
.v-navigation-drawer--expand-on-hover:hover {
|
||||
.logo {
|
||||
width: 100%;
|
||||
}
|
||||
.v-list .v-list-group__items,
|
||||
.hide-menu {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
41
core/src/scss/layout/_topbar.scss
Normal file
41
core/src/scss/layout/_topbar.scss
Normal file
@@ -0,0 +1,41 @@
|
||||
.profileBtn {
|
||||
height: 44px !important;
|
||||
margin: 0 20px 0 10px !important;
|
||||
padding: 0 6px;
|
||||
.v-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.profileBtn {
|
||||
min-width: 42px;
|
||||
margin: 0 12px 0 0 !important;
|
||||
.v-avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 460px) {
|
||||
.notification-dropdown {
|
||||
width: 332px !important;
|
||||
.v-list-item__content {
|
||||
.d-inline-flex {
|
||||
.text-caption {
|
||||
min-width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user