sifatbaho
This commit is contained in:
141
resources/scss/pages/_authentication.scss
vendored
Executable file
141
resources/scss/pages/_authentication.scss
vendored
Executable file
@@ -0,0 +1,141 @@
|
||||
//
|
||||
// _authentication.scss
|
||||
//
|
||||
|
||||
|
||||
.auth-page-wrapper{
|
||||
.auth-page-content{
|
||||
padding-bottom: $footer-height;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
}
|
||||
.footer{
|
||||
left: 0;
|
||||
background-color: transparent;
|
||||
color: var(--#{$prefix}body-color);
|
||||
}
|
||||
}
|
||||
|
||||
.auth-one-bg-position{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 380px;
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
height: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-one-bg{
|
||||
background-image: url("../images/auth-one-bg.jpg");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
|
||||
.bg-overlay{
|
||||
background: linear-gradient(to right, darken($primary, 6%), $primary);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.shape{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
>svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
fill: var(--#{$prefix}body-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// auth-pass-inputgroup
|
||||
|
||||
.auth-pass-inputgroup{
|
||||
input[type="text"] + .btn .ri-eye-fill{
|
||||
&:before{
|
||||
content: "\ecb6";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.particles-js-canvas-el{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// signin card title
|
||||
|
||||
.signin-other-title{
|
||||
position: relative;
|
||||
&:after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-top: 1px dashed var(--#{$prefix}border-color);
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.title{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
padding: 2px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// Auth cover
|
||||
|
||||
.auth-bg-cover{
|
||||
background: $auth-bg-cover;
|
||||
|
||||
> .bg-overlay{
|
||||
background-image: url("../images/cover-pattern.png");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
opacity: 1;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.footer{
|
||||
color: rgba($white, .5);
|
||||
}
|
||||
}
|
||||
|
||||
//passowrd validations
|
||||
#password-contain {
|
||||
display: none;
|
||||
|
||||
p {
|
||||
padding-left: 13px;
|
||||
|
||||
&.valid {
|
||||
color: $success;
|
||||
|
||||
&::before {
|
||||
position: relative;
|
||||
left: -8px;
|
||||
content: "✔";
|
||||
}
|
||||
}
|
||||
|
||||
&.invalid {
|
||||
color: $danger;
|
||||
|
||||
&::before {
|
||||
position: relative;
|
||||
left: -8px;
|
||||
content: "✖";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
616
resources/scss/pages/_chat.scss
vendored
Executable file
616
resources/scss/pages/_chat.scss
vendored
Executable file
@@ -0,0 +1,616 @@
|
||||
//
|
||||
// _chat.scss
|
||||
//
|
||||
|
||||
.chat-wrapper{
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
// chat left sidebar
|
||||
|
||||
.chat-leftsidebar {
|
||||
height: calc(100vh - 137px);
|
||||
position: relative;
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
|
||||
@media (min-width: 992px) {
|
||||
min-width: 300px;
|
||||
max-width: 300px;
|
||||
height: calc(100vh - #{$header-height} - #{$footer-height} - 8px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.chat-list {
|
||||
margin: 0;
|
||||
|
||||
> li {
|
||||
&.active {
|
||||
a {
|
||||
background-color: $chat-secondary-bg;
|
||||
color: $chat-secondary-color;
|
||||
|
||||
.badge {
|
||||
background-color: rgba(var(--#{$prefix}success-rgb), 0.15) !important;
|
||||
color: $success !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 7px 24px;
|
||||
color: var(--#{$prefix}body-color);
|
||||
transition: all 0.4s;
|
||||
font-family: $font-family-secondary;
|
||||
font-weight: $font-weight-medium;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
||||
.chat-user-message {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.unread-msg-user {
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
|
||||
.unread-message {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
right: 24px/*rtl:auto*/;
|
||||
left: auto/*rtl:0*/;
|
||||
top: 33px;
|
||||
|
||||
.badge {
|
||||
line-height: 16px;
|
||||
font-weight: $font-weight-semibold;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-user-img {
|
||||
position: relative;
|
||||
|
||||
.user-status {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: $gray-500;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--#{$prefix}card-bg-custom);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&.online {
|
||||
.user-status {
|
||||
background-color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
&.away {
|
||||
.user-status {
|
||||
background-color: $warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-room-list {
|
||||
max-height: calc(100vh - 296px);
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
height: calc(100vh - 296px);
|
||||
}
|
||||
}
|
||||
|
||||
// contact list
|
||||
|
||||
.contact-list {
|
||||
li {
|
||||
cursor: pointer;
|
||||
padding: 8px 24px;
|
||||
transition: all 0.4s;
|
||||
color: var(--#{$prefix}body-color);
|
||||
font-family: $font-family-secondary;
|
||||
font-weight: $font-weight-medium;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-list-title{
|
||||
padding: 6px 24px;
|
||||
color: $primary;
|
||||
font-weight: $font-weight-medium;
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
&:after{
|
||||
content: "";
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 50px;
|
||||
right: 0;
|
||||
background-color: $light;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// user chat
|
||||
|
||||
.user-chat {
|
||||
background: url("../images/chat-bg-pattern.png");
|
||||
transition: all 0.4s;
|
||||
position: relative;
|
||||
background-color: var(--#{$prefix}body-bg);
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 3px;
|
||||
width: 100%;
|
||||
height: calc(100% - 3px);
|
||||
visibility: hidden;
|
||||
transform: translateX(100%);
|
||||
z-index: 99;
|
||||
padding-top: 70px;
|
||||
|
||||
&.user-chat-show{
|
||||
visibility: visible;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-content{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&.user-chat-show{
|
||||
.chat-welcome-section{
|
||||
display: none;
|
||||
}
|
||||
.chat-content{
|
||||
@media (min-width: 992px) {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-chat-topbar{
|
||||
border-bottom: 1px solid transparent;
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
@media (max-width: 991.98px) {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.user-chat-nav {
|
||||
.nav-btn {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
line-height: 40px;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
font-size: 20px;
|
||||
color: $gray-800;
|
||||
}
|
||||
@media (max-width:575.98px) {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.chat-conversation {
|
||||
height: calc(100vh - 299px);
|
||||
@media (max-width: 991.98px) {
|
||||
height: calc(100vh - 275px);
|
||||
}
|
||||
|
||||
.simplebar-content-wrapper{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.simplebar-content{
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-conversation-list{
|
||||
padding-top: 10px;
|
||||
margin-bottom: 0;
|
||||
> li{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
&:last-of-type {
|
||||
.conversation-list {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-list{
|
||||
|
||||
&.left{
|
||||
.check-message-icon{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.message-box-drop {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.message-box-drop {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-avatar {
|
||||
margin: 0 16px 0 0/*rtl:0 0 0 16px*/;
|
||||
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-day-title {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin-bottom: 24px;
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
|
||||
.title {
|
||||
background-color: $white;
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
z-index: 1;
|
||||
padding: 6px 12px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba($primary, 0.2);
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.conversation-list {
|
||||
margin-bottom: 24px;
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
align-items: flex-end;
|
||||
max-width: 80%;
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.ctext-wrap {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ctext-content{
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.ctext-wrap-content {
|
||||
padding: 12px 20px;
|
||||
background-color: $chat-primary-bg;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
box-shadow: $box-shadow-lg;
|
||||
|
||||
.attached-file{
|
||||
@media (max-width: 575.98px) {
|
||||
.attached-file-avatar{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown .dropdown-toggle{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.conversation-name {
|
||||
font-weight: $font-weight-medium;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
.dropdown-toggle {
|
||||
font-size: 18px;
|
||||
padding: 4px;
|
||||
color: $gray-600;
|
||||
&::after{
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.chat-time {
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.message-img {
|
||||
border-radius: .2rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
|
||||
.message-img-list {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.message-img-link {
|
||||
position: absolute;
|
||||
right: 10px/*rtl:auto*/;
|
||||
left: auto/*rtl:0*/;
|
||||
bottom: 10px;
|
||||
|
||||
li {
|
||||
>a {
|
||||
font-size: 18px;
|
||||
color: $white;
|
||||
display: inline-block;
|
||||
line-height: 20px;
|
||||
width: 26px;
|
||||
height: 24px;
|
||||
border-radius: 3px;
|
||||
background-color: rgba($dark,0.7);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
justify-content: flex-end;
|
||||
|
||||
.chat-avatar {
|
||||
order: 3;
|
||||
margin-right: 0px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.chat-time {
|
||||
text-align: left;
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
.conversation-list {
|
||||
text-align: right;
|
||||
|
||||
.ctext-wrap {
|
||||
justify-content: flex-end;
|
||||
|
||||
.ctext-wrap-content {
|
||||
order: 2;
|
||||
background-color: $chat-secondary-bg;
|
||||
color: $chat-secondary-color;
|
||||
text-align: right;
|
||||
box-shadow: $element-shadow;
|
||||
|
||||
.replymessage-block{
|
||||
background-color: rgba($white,0.5);
|
||||
border-color: rgba(var(--vz-success-rgb), 1);
|
||||
color: $body-color;
|
||||
|
||||
.conversation-name{
|
||||
color: rgba(var(--vz-success-rgb), 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.conversation-name {
|
||||
justify-content: flex-end;
|
||||
|
||||
.check-message-icon{
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.time{
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.name{
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
order: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.dot {
|
||||
background-color: $dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-input-section{
|
||||
border-top: 1px solid transparent;
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
.chat-input-feedback {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 4px;
|
||||
font-size: 12px;
|
||||
color: $danger;
|
||||
}
|
||||
.show{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-input-links{
|
||||
display: flex;
|
||||
.links-list-item{
|
||||
> .btn{
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
font-size: 20px;
|
||||
width: 37.5px;
|
||||
height: 37.5px;
|
||||
&.btn-link{
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
//Copy Message Alert
|
||||
.copyclipboard-alert{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform:translateX(-50%);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.replyCard{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-top: 1px solid $border-color;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
bottom: 0;
|
||||
border-radius: 0;
|
||||
transition: all 0.4s;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
bottom: -12px;
|
||||
}
|
||||
|
||||
&.show{
|
||||
transform: translateY(-88px);
|
||||
opacity: 1;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
transform: translateY(-83px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.replymessage-block{
|
||||
padding: 12px 20px;
|
||||
margin-bottom: 8px;
|
||||
text-align: left;
|
||||
border-radius: 4px;
|
||||
background-color: rgba(var(--vz-success-rgb), 0.1);
|
||||
border-left: 2px solid rgba(var(--vz-success-rgb), 1);
|
||||
|
||||
.conversation-name{
|
||||
color: rgba(var(--vz-success-rgb), 1);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Chat Small
|
||||
.chat-sm {
|
||||
.ctext-wrap-content {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.message-img {
|
||||
img {
|
||||
max-width: 90px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.message-img-link {
|
||||
bottom: 0 !important;
|
||||
right: 5px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// for horizontal layout
|
||||
[data-layout="horizontal"]{
|
||||
.chat-wrapper{
|
||||
@media (min-width: 1025px) {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
@media (max-width: 991.98px) {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-leftsidebar{
|
||||
height: calc(100vh - #{$header-height} - #{$footer-height} - 54px);
|
||||
@media (max-width: 991.98px) {
|
||||
height: calc(100vh - #{$header-height} - #{$footer-height} - 8px);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-room-list{
|
||||
height: calc(100vh - 352px);
|
||||
@media (max-width: 991.98px) {
|
||||
height: calc(100vh - 265px);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-conversation{
|
||||
height: calc(100vh - 343px);
|
||||
@media (max-width: 991.98px) {
|
||||
height: calc(100vh - 275px);
|
||||
}
|
||||
}
|
||||
}
|
||||
75
resources/scss/pages/_coming-soon.scss
vendored
Executable file
75
resources/scss/pages/_coming-soon.scss
vendored
Executable file
@@ -0,0 +1,75 @@
|
||||
//
|
||||
// _coming-soon.scss
|
||||
//
|
||||
|
||||
// countdownlist
|
||||
|
||||
.countdownlist {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
|
||||
|
||||
.countdownlist-item{
|
||||
width: 25%;
|
||||
&:last-of-type{
|
||||
.count-num{
|
||||
&::after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.count-title{
|
||||
font-size: 13px;
|
||||
font-weight: $font-weight-medium;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: rgba(var(--#{$prefix}dark-rgb), 0.5);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.count-num{
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
padding: 16px 8px;
|
||||
position: relative;
|
||||
border-radius: $card-border-radius;
|
||||
box-shadow: $box-shadow;
|
||||
font-weight: $font-weight-semibold;
|
||||
font-size: 32px;
|
||||
@media (max-width: 575.98px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&::after{
|
||||
content: ":";
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
right: -16px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: var(--#{$prefix}dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
// coming soon
|
||||
|
||||
.move-animation{
|
||||
animation: mover 1s infinite alternate;
|
||||
}
|
||||
|
||||
@keyframes mover {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(-16px); }
|
||||
}
|
||||
|
||||
.coming-soon-text{
|
||||
font-weight: $font-weight-semibold;
|
||||
text-transform: uppercase;
|
||||
color: $white;
|
||||
text-shadow: 3px 4px $success;
|
||||
}
|
||||
|
||||
.countdown-input-group{
|
||||
max-width: 400px;
|
||||
}
|
||||
184
resources/scss/pages/_dashboard.scss
vendored
Executable file
184
resources/scss/pages/_dashboard.scss
vendored
Executable file
@@ -0,0 +1,184 @@
|
||||
//
|
||||
// _dashboard.scss
|
||||
//
|
||||
|
||||
.dash-filter-picker {
|
||||
min-width: 210px !important;
|
||||
}
|
||||
|
||||
|
||||
// Flatpickr Calendar
|
||||
|
||||
.upcoming-scheduled{
|
||||
position: relative;
|
||||
.flatpickr-months{
|
||||
position: absolute !important;
|
||||
top: -45px !important;
|
||||
left: auto !important;
|
||||
right: 0px !important;
|
||||
width: 200px;
|
||||
background-color: transparent;
|
||||
|
||||
.flatpickr-month{
|
||||
color: $gray-600 !important;
|
||||
fill: $gray-600 !important;
|
||||
}
|
||||
.flatpickr-prev-month, .flatpickr-next-month{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.flatpickr-calendar{
|
||||
box-shadow: none !important;
|
||||
.flatpickr-current-month {
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
.flatpickr-monthDropdown-months {
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 4px;
|
||||
height: 26px;
|
||||
}
|
||||
.flatpickr-weekdays{
|
||||
background-color: var(--#{$prefix}light);
|
||||
border: none;
|
||||
span.flatpickr-weekday {
|
||||
color: var(--#{$prefix}dark);
|
||||
background-color: var(--#{$prefix}light);
|
||||
}
|
||||
}
|
||||
.flatpickr-day{
|
||||
&.today{
|
||||
color: $white !important;
|
||||
background-color: $success;
|
||||
border-color: $success !important;
|
||||
&:hover{
|
||||
color: $success !important;
|
||||
background-color: rgba($success, 0.2) !important;
|
||||
}
|
||||
}
|
||||
&.selected{
|
||||
background-color: $success !important;
|
||||
border-color: $success !important;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.numInputWrapper {
|
||||
width: 7.5ch;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.flatpickr-days {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.crm-widget {
|
||||
.col {
|
||||
border-right: 1px solid $border-color;
|
||||
&:last-child {
|
||||
border: 0px;
|
||||
}
|
||||
@media (min-width: 768px) and (max-width: 1399.98px) {
|
||||
&:nth-child(3) {
|
||||
border-right: 0px;
|
||||
}
|
||||
&:last-child {
|
||||
border-right: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
@media (max-width: 767.98px) {
|
||||
border-right: 0px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 1400px) and (max-width: 1599.98px) {
|
||||
.project-wrapper {
|
||||
>.col-xxl-8, .col-xxl-4{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.crypto-widget {
|
||||
max-width: 130px !important;
|
||||
}
|
||||
|
||||
//nft dashboard
|
||||
|
||||
.bg-marketplace {
|
||||
background-image: url(../images/nft/marketplace.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.dash-countdown {
|
||||
.countdownlist {
|
||||
.count-num {
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
padding: 16px 8px;
|
||||
font-size: 22px;
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
font-size: 16px;
|
||||
padding: 8px 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.count-title {
|
||||
@media (max-width: 575.98px) {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.marketplace-icon {
|
||||
position: absolute;
|
||||
float: right;
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.marketplace-swiper {
|
||||
.swiper-button-next,
|
||||
.swiper-button-prev {
|
||||
top: 34px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background-color: rgba($primary, 0.1);
|
||||
color: $primary;
|
||||
border-radius: .3rem;
|
||||
right: 16px !important;
|
||||
}
|
||||
.swiper-button-prev {
|
||||
right: 58px !important;
|
||||
left: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dash-collection {
|
||||
.content{
|
||||
background-color: rgba($white, 0.25);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
}
|
||||
|
||||
.dash-nft{
|
||||
@media (max-width: 1441.98px) {
|
||||
.col-xxl-9, .col-xxl-3 {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jvectormap-legend-cnt-h .jvectormap-legend-tick-sample {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
57
resources/scss/pages/_ecommerce.scss
vendored
Executable file
57
resources/scss/pages/_ecommerce.scss
vendored
Executable file
@@ -0,0 +1,57 @@
|
||||
//
|
||||
// _ecommerce.scss
|
||||
//
|
||||
|
||||
// product list
|
||||
|
||||
#selection-element {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.filter-choices-input{
|
||||
.choices__inner{
|
||||
padding: 0;
|
||||
border: none;
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
}
|
||||
|
||||
.choices__input{
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
}
|
||||
}
|
||||
|
||||
// product detail
|
||||
|
||||
.sticky-side-div{
|
||||
@media (min-width: 992px){
|
||||
position: sticky;
|
||||
top: calc(#{$header-height} + #{$grid-gutter-width});
|
||||
}
|
||||
}
|
||||
|
||||
.product-img-slider{
|
||||
.product-nav-slider{
|
||||
.nav-slide-item{
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
padding: 0.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.swiper-slide-thumb-active{
|
||||
.nav-slide-item{
|
||||
background-color: var(--#{$prefix}light);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filter-list{
|
||||
a {
|
||||
&.active {
|
||||
.listname {
|
||||
color: $success;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
378
resources/scss/pages/_email.scss
vendored
Executable file
378
resources/scss/pages/_email.scss
vendored
Executable file
@@ -0,0 +1,378 @@
|
||||
//
|
||||
// _email.scss
|
||||
//
|
||||
|
||||
.email-wrapper {
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
// chat left sidebar
|
||||
|
||||
.email-menu-sidebar {
|
||||
height: calc(100vh - 137px);
|
||||
position: relative;
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
transition: all 0.2s;
|
||||
|
||||
@media (min-width: 992px) {
|
||||
min-width: 250px;
|
||||
max-width: 250px;
|
||||
height: calc(100vh - #{$header-height} - #{$footer-height} - 8px);
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 200px;
|
||||
max-width: 100%;
|
||||
z-index: 1003;
|
||||
box-shadow: $box-shadow-lg;
|
||||
transform: translateX(-100%);
|
||||
visibility: hidden;
|
||||
height: 100vh;
|
||||
|
||||
&.menubar-show {
|
||||
visibility: visible;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.email-menu-sidebar-scroll {
|
||||
height: calc(100vh - 295px);
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
height: calc(100vh - 150px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mail-list {
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $gray-600;
|
||||
padding: 5px 0;
|
||||
font-weight: $font-weight-medium;
|
||||
|
||||
&:hover {
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $success;
|
||||
font-weight: $font-weight-semibold;
|
||||
|
||||
i {
|
||||
color: $success;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.email-topbar-link {
|
||||
.btn-ghost-secondary {
|
||||
color: $text-muted;
|
||||
|
||||
&:hover {
|
||||
color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.email-content {
|
||||
width: 100%;
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.unreadConversations-alert{
|
||||
position: fixed;
|
||||
bottom: $footer-height;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.email-detail-content {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
bottom: 4px;
|
||||
left: 68%;
|
||||
width: 32%;
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
transform: translateX(200%);
|
||||
transition: all 0.2s;
|
||||
visibility: hidden;
|
||||
border-left: 2px solid var(--#{$prefix}body-bg);
|
||||
}
|
||||
|
||||
.email-detail-show {
|
||||
.email-detail-content {
|
||||
transform: none;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.email-content {
|
||||
margin-right: 32%;
|
||||
|
||||
@media (max-width: 1349.98px) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.email-detail-content-scroll {
|
||||
height: calc(100vh - 390px);
|
||||
|
||||
@media (max-width: 1349.98px) {
|
||||
height: calc(100vh - 252px);
|
||||
}
|
||||
}
|
||||
|
||||
.message-list-content {
|
||||
height: calc(100vh - 242px);
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
height: calc(100vh - 230px);
|
||||
}
|
||||
}
|
||||
|
||||
.message-list {
|
||||
display: block;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
cursor: default;
|
||||
transition-duration: .3s;
|
||||
clear: both;
|
||||
|
||||
a {
|
||||
color: var(--#{$prefix}gray-700);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--#{$prefix}light);
|
||||
transition-duration: .05s;
|
||||
}
|
||||
|
||||
.col-mail {
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.col-mail-1 {
|
||||
width: 280px;
|
||||
|
||||
.star-toggle,
|
||||
.checkbox-wrapper-mail,
|
||||
.dot {
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.dot {
|
||||
border: 4px solid transparent;
|
||||
border-radius: 100px;
|
||||
margin: 22px 26px 0;
|
||||
height: 0;
|
||||
width: 0;
|
||||
line-height: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.checkbox-wrapper-mail {
|
||||
margin: 15px 0 0 20px;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.star-toggle {
|
||||
margin-top: 18px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 95px;
|
||||
right: 0;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 0;
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
left: 95px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.col-mail-2 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 280px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
.subject,
|
||||
.date {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.subject {
|
||||
left: 0;
|
||||
right: 110px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
.teaser{
|
||||
color: var(--#{$prefix}gray-600);
|
||||
}
|
||||
}
|
||||
|
||||
.date {
|
||||
right: 0;
|
||||
width: 100px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.active,
|
||||
&.active:hover {
|
||||
box-shadow: inset 3px 0 0 $primary;
|
||||
background-color: var(--#{$prefix}light);
|
||||
}
|
||||
|
||||
|
||||
&.unread {
|
||||
color: var(--#{$prefix}gray-800);
|
||||
|
||||
a {
|
||||
color: var(--#{$prefix}gray-800);
|
||||
font-weight: $font-weight-semibold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#unreadConversations, #email-topbar-actions{
|
||||
display: none;
|
||||
}
|
||||
|
||||
#elmLoader{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.email-compose-input {
|
||||
padding-right: 80px;
|
||||
}
|
||||
|
||||
@media (max-width: 1349.98px) {
|
||||
.email-detail-content {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
right: 0;
|
||||
width: 400px;
|
||||
max-width: 100%;
|
||||
z-index: 1003;
|
||||
box-shadow: $box-shadow-lg;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.email-detail-show {
|
||||
.email-detail-content {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
.message-list li .col-mail-1 {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.email-editor {
|
||||
.ck-editor__editable_inline {
|
||||
min-height: 200px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.email-chat-detail{
|
||||
width: 350px;
|
||||
position: fixed;
|
||||
max-width: 100%;
|
||||
bottom: $footer-height;
|
||||
right: $footer-height;
|
||||
z-index: 9;
|
||||
display: none;
|
||||
.card{
|
||||
box-shadow: $box-shadow-lg;
|
||||
}
|
||||
|
||||
@media (max-width: 515.98px) {
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// for horizontal layout
|
||||
[data-layout="horizontal"]{
|
||||
.email-wrapper{
|
||||
@media (min-width: 1025px) {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
@media (max-width: 991.98px) {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.email-menu-sidebar{
|
||||
height: calc(100vh - #{$header-height} - #{$footer-height} - 54px);
|
||||
@media (max-width: 991.98px) {
|
||||
height: 100vh
|
||||
}
|
||||
.email-menu-sidebar-scroll{
|
||||
height: calc(100vh - 330px);
|
||||
@media (max-width: 991.98px) {
|
||||
height: calc(100vh - 150px)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.message-list-content {
|
||||
height: calc(100vh - 289px);
|
||||
|
||||
}
|
||||
|
||||
.email-detail-content-scroll{
|
||||
height: calc(100vh - 435px);
|
||||
@media (max-width: 1349.98px){
|
||||
height: calc(100vh - 252px);
|
||||
}
|
||||
}
|
||||
}
|
||||
79
resources/scss/pages/_errors.scss
vendored
Executable file
79
resources/scss/pages/_errors.scss
vendored
Executable file
@@ -0,0 +1,79 @@
|
||||
//
|
||||
// _errors.scss
|
||||
//
|
||||
|
||||
.error-basic-img{
|
||||
max-width: 450px;
|
||||
}
|
||||
|
||||
.error-500 {
|
||||
.title {
|
||||
font-size: 250px;
|
||||
}
|
||||
|
||||
.error-500-img {
|
||||
position: absolute;
|
||||
top: 57px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 991.98px) {
|
||||
.title {
|
||||
font-size: 150px;
|
||||
}
|
||||
|
||||
.error-500-img {
|
||||
width: 20% !important;
|
||||
top: 43px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.title {
|
||||
font-size: 68px;
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
.error-500-img {
|
||||
position: relative;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes errorAnimation {
|
||||
0% {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
15% {
|
||||
transform: translateX(-25%) rotate(-5deg);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: translateX(20%) rotate(3deg);
|
||||
}
|
||||
|
||||
45% {
|
||||
transform: translateX(-15%) rotate(-3deg);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: translateX(10%) rotate(2deg);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translateX(-5%) rotate(-1deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
||||
.error-img {
|
||||
animation: errorAnimation 20s infinite;
|
||||
}
|
||||
150
resources/scss/pages/_file-manager.scss
vendored
Executable file
150
resources/scss/pages/_file-manager.scss
vendored
Executable file
@@ -0,0 +1,150 @@
|
||||
//
|
||||
// _file-manager.scss
|
||||
//
|
||||
|
||||
.file-manager-menu {
|
||||
max-height: calc(100vh - 296px);
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
height: calc(100vh - 296px);
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 5px 0px;
|
||||
|
||||
a {
|
||||
color: var(--#{$prefix}dark);
|
||||
font-weight: $font-weight-medium;
|
||||
transition: all 0.5s ease;
|
||||
|
||||
&.active,
|
||||
&:hover,
|
||||
&[aria-expanded="true"]{
|
||||
color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-menu {
|
||||
li {
|
||||
padding-left: 25px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "\f0374";
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
font-family: Material Design Icons;
|
||||
color: rgba(var(--#{$prefix}dark-rgb), 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-manager-sidebar {
|
||||
position: relative;
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
|
||||
@media (min-width: 992px) {
|
||||
min-width: 300px;
|
||||
max-width: 700px;
|
||||
height: calc(100vh - #{$header-height} - #{$footer-height} - 8px);
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 200px;
|
||||
max-width: 100%;
|
||||
z-index: 1003;
|
||||
box-shadow: $box-shadow-lg;
|
||||
transform: translateX(-100%);
|
||||
visibility: hidden;
|
||||
height: 100vh;
|
||||
|
||||
&.menubar-show {
|
||||
visibility: visible;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-menu-sidebar-scroll{
|
||||
height: calc(100vh - 375px);
|
||||
@media (max-width: 991.98px) {
|
||||
height: calc(100vh - 120px);
|
||||
}
|
||||
}
|
||||
|
||||
.file-manager-content {
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
}
|
||||
|
||||
.file-manager-content-scroll{
|
||||
height: calc(100vh - 185px);
|
||||
@media (max-width: 991.98px) {
|
||||
height: calc(100vh - 144px);
|
||||
}
|
||||
|
||||
.simplebar-content{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.file-detail-content-scroll{
|
||||
height: calc(100vh - 180px);
|
||||
@media (max-width: 991.98px) {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.simplebar-content{
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.file-manager-detail-content {
|
||||
width: 32%;
|
||||
max-width: 100%;
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-detail-show{
|
||||
.file-manager-detail-content{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
#file-overview{
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1399.98px) {
|
||||
.file-manager-detail-content {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
right: 0;
|
||||
width: 400px;
|
||||
max-width: 100%;
|
||||
z-index: 1003;
|
||||
box-shadow: $box-shadow-lg;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.file-detail-show {
|
||||
.file-manager-detail-content {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-details-box {
|
||||
height: 195px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
169
resources/scss/pages/_galaxy.scss
vendored
Executable file
169
resources/scss/pages/_galaxy.scss
vendored
Executable file
@@ -0,0 +1,169 @@
|
||||
//
|
||||
// _galaxy.scss
|
||||
//
|
||||
|
||||
.card {
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
height: 13px;
|
||||
width: 13px;
|
||||
position: absolute;
|
||||
border: 3px solid;
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-color: $border-color $border-color transparent transparent;
|
||||
right: -3px;
|
||||
top: -3px;
|
||||
border-radius: 0 3px 0 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-color: transparent transparent $border-color $border-color;
|
||||
left: -3px;
|
||||
bottom: -3px;
|
||||
border-radius: 0 0 0 3px;
|
||||
}
|
||||
|
||||
&.card-border-effect-none {
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
body {
|
||||
background-image: var(--#{$prefix}body-bg-image);
|
||||
background-attachment: fixed;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
background-color: rgba($white, 0.30);
|
||||
}
|
||||
}
|
||||
|
||||
#page-topbar {
|
||||
&.topbar-shadow {
|
||||
background-color: var(--#{$prefix}card-bg-fill);
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="vertical"][data-sidebar-size="sm"] .navbar-menu .navbar-nav .nav-item:hover>.menu-dropdown {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
.layout-rightside-col {
|
||||
@media (max-width: 1699.98px) {
|
||||
.card {
|
||||
background-color: var(--#{$prefix}gray-300);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.apex-charts {
|
||||
.apexcharts-pie-series {
|
||||
path {
|
||||
stroke: var(--#{$prefix}card-bg-fill);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-tooltip,
|
||||
.swal2-popup {
|
||||
background-color: var(--#{$prefix}card-bg-fill) !important;
|
||||
}
|
||||
|
||||
.shepherd-content,
|
||||
.card-bg-fill,
|
||||
.navbar-landing.is-sticky,
|
||||
#preloader,
|
||||
.timeline-item .icon,
|
||||
.department ul li a {
|
||||
background-color: var(--#{$prefix}card-bg-fill);
|
||||
}
|
||||
|
||||
// profile Page
|
||||
.profile-wid-bg::before {
|
||||
background: none;
|
||||
}
|
||||
|
||||
@media (max-width: 1349.98px) {
|
||||
|
||||
.email-detail-content,
|
||||
.file-manager-detail-content {
|
||||
background-color: var(--#{$prefix}card-bg-fill);
|
||||
}
|
||||
}
|
||||
|
||||
[for="body-img-three"],
|
||||
[for="body-img-two"],
|
||||
[for="body-img-one"] {
|
||||
background-image: var(--#{$prefix}body-bg-image);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
[data-sidebar="light"][data-layout="vertical"][data-sidebar-size="sm-hover"] {
|
||||
.navbar-menu:hover {
|
||||
background-color: var(--#{$prefix}white);
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout-mode="dark"] {
|
||||
body {
|
||||
background-size: cover;
|
||||
|
||||
&::before {
|
||||
background-color: rgba(4, 19, 36, 0.95);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-layout="vertical"][data-sidebar="dark"][data-sidebar-size="sm-hover"] {
|
||||
.navbar-menu:hover {
|
||||
background-color: var(--#{$prefix}card-bg-fill);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-layout="vertical"][data-sidebar="dark"][data-sidebar-size="sm"] {
|
||||
.navbar-menu .navbar-nav .nav-item:hover>.menu-dropdown {
|
||||
background-color: var(--#{$prefix}card-bg-fill);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-layout="vertical"][data-sidebar-size="sm"] {
|
||||
.navbar-menu .navbar-nav .nav-item:hover>a.menu-link {
|
||||
background-color: var(--#{$prefix}card-bg-fill);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-layout="horizontal"] .navbar-nav .nav-item .nav-link[data-bs-toggle=collapse]:after {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.email-menu-sidebar.menubar-show {
|
||||
background-color: var(--#{$prefix}card-bg-fill);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
[data-topbar="light"] {
|
||||
.app-menu {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
[data-layout-mode="dark"] {
|
||||
.vertical-sidebar-enable .app-menu {
|
||||
background-color: var(--#{$prefix}card-bg-fill);
|
||||
}
|
||||
}
|
||||
}
|
||||
121
resources/scss/pages/_gallery.scss
vendored
Executable file
121
resources/scss/pages/_gallery.scss
vendored
Executable file
@@ -0,0 +1,121 @@
|
||||
//
|
||||
// _gallery.scss
|
||||
//
|
||||
|
||||
.categories-filter {
|
||||
.list-inline-item {
|
||||
position: relative;
|
||||
margin-right: 0;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
color: var(--#{$prefix}body-color);
|
||||
font-weight: $font-weight-semibold;
|
||||
padding: 8px 15px;
|
||||
margin: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-box {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid transparent;
|
||||
margin-bottom: 10px;
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
padding: 8px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
transition: all 0.4s;
|
||||
}
|
||||
|
||||
.gallery-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 4px;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.gallery-overlay {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
opacity: 0;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .5) 100%);
|
||||
visibility: hidden;
|
||||
overflow: hidden;
|
||||
transition: all 0.4s ease-in-out 0s;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: flex-end;
|
||||
padding: 16px;
|
||||
|
||||
.overlay-caption {
|
||||
color: $white;
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-img {
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.box-content {
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.post {
|
||||
margin: 0;
|
||||
transition: all 0.2s;
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::before {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.box-content {
|
||||
bottom: 0;
|
||||
|
||||
.post {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-overlay {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-light {
|
||||
.gallery-box {
|
||||
&::before {
|
||||
background-color: var(--#{$prefix}light);
|
||||
}
|
||||
}
|
||||
}
|
||||
31
resources/scss/pages/_invoice.scss
vendored
Executable file
31
resources/scss/pages/_invoice.scss
vendored
Executable file
@@ -0,0 +1,31 @@
|
||||
//
|
||||
// _invoice.scss
|
||||
//
|
||||
|
||||
.invoice-table {
|
||||
tbody {
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.currency-select {
|
||||
.choices__inner {
|
||||
padding:0px;
|
||||
padding-right: 15px;
|
||||
min-height: 0px;
|
||||
}
|
||||
.choices__list--single {
|
||||
padding: 0px 16px 0 4px;
|
||||
}
|
||||
.choices[data-type*=select-one]{
|
||||
bottom: 0px;
|
||||
:after {
|
||||
top: 4px;
|
||||
}
|
||||
.choices__inner {
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
94
resources/scss/pages/_kanban.scss
vendored
Executable file
94
resources/scss/pages/_kanban.scss
vendored
Executable file
@@ -0,0 +1,94 @@
|
||||
//
|
||||
// _kanban.scss
|
||||
//
|
||||
|
||||
.tasks-board {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
align-items: stretch;
|
||||
|
||||
.tasks-list {
|
||||
min-width: 300px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar:vertical {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar:horizontal {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(var(--#{$prefix}dark-rgb), .075);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.tasks-box {
|
||||
.progress {
|
||||
border-radius: 0px 0px $card-border-radius $card-border-radius;
|
||||
}
|
||||
|
||||
.tasks-img {
|
||||
height: 135px;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
margin: 12px 0px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.tasks-wrapper {
|
||||
max-height: calc(100vh - 418px);
|
||||
}
|
||||
|
||||
|
||||
.tasks {
|
||||
min-height: 180px;
|
||||
position: relative;
|
||||
|
||||
&.noTask{
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 180px;
|
||||
width: 270px;
|
||||
margin: 0 auto;
|
||||
background-image: url('../images/file.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#tasksList {
|
||||
tr {
|
||||
.tasks-list-menu {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.tasks-list-menu {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
261
resources/scss/pages/_landing.scss
vendored
Executable file
261
resources/scss/pages/_landing.scss
vendored
Executable file
@@ -0,0 +1,261 @@
|
||||
//
|
||||
// _landing.scss
|
||||
//
|
||||
|
||||
.layout-wrapper {
|
||||
&.landing {
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
// helper
|
||||
|
||||
.section {
|
||||
padding: 90px 0;
|
||||
position: relative;
|
||||
|
||||
@media (max-width:767.98px) {
|
||||
padding: 50px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-effect {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-color: rgba($success, 0.2);
|
||||
border-radius: 50%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// navbar
|
||||
|
||||
.navbar-landing {
|
||||
padding: 10px 0px;
|
||||
transition: all 0.5s ease;
|
||||
@media (max-width: 991.98px) {
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
box-shadow: 0 1px 16px -2px rgba(56, 65, 74, 0.15);
|
||||
padding: 10px 8px;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
font-size: 16px;
|
||||
font-weight: $font-weight-medium;
|
||||
transition: all 0.4s;
|
||||
font-family: $font-family-secondary;
|
||||
color: var(--#{$prefix}dark);
|
||||
padding: 14px;
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
padding: 8px 0px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active,
|
||||
&:focus {
|
||||
color: $success !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-sticky {
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
box-shadow: 0 1px 16px -2px rgba(56, 65, 74, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
//navbar-light
|
||||
.navbar-light{
|
||||
.navbar-brand {
|
||||
.card-logo-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-logo-light {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
color: rgba(var(--#{$prefix}white-rgb), 0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.is-sticky {
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
color: var(--#{$prefix}dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
.navbar-brand {
|
||||
.card-logo-dark {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card-logo-light {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// hero section
|
||||
|
||||
.hero-section {
|
||||
background-color: rgba(var(--#{$prefix}light-rgb), 0.5);
|
||||
|
||||
.hero-shape-svg {
|
||||
svg {
|
||||
path {
|
||||
fill: var(--#{$prefix}card-bg-custom);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-overlay-pattern {
|
||||
background-image: url("../images/landing/bg-pattern.png");
|
||||
background-color: transparent;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.demo-carousel {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
.carousel-item {
|
||||
.demo-item {
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
padding: 8px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-img-patten-top {
|
||||
position: absolute;
|
||||
right: -50px;
|
||||
top: -16px;
|
||||
max-width: 230px;
|
||||
}
|
||||
|
||||
.demo-img-patten-bottom {
|
||||
position: absolute;
|
||||
left: -70px;
|
||||
bottom: -50px;
|
||||
max-width: 230px;
|
||||
}
|
||||
}
|
||||
|
||||
// client images
|
||||
.client-images img {
|
||||
max-height: 45px;
|
||||
width: auto;
|
||||
margin: 12px auto;
|
||||
transition: all .4s;
|
||||
}
|
||||
|
||||
// plan
|
||||
|
||||
.plan-box {
|
||||
max-width: 356px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// work process
|
||||
.process-card {
|
||||
position: relative;
|
||||
|
||||
.process-arrow-img {
|
||||
position: absolute;
|
||||
left: 75%;
|
||||
top: 7%;
|
||||
width: 50%;
|
||||
opacity: .1;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-footer {
|
||||
color: #9ba7b3;
|
||||
}
|
||||
|
||||
.footer-list {
|
||||
li {
|
||||
a {
|
||||
color: #9ba7b3;
|
||||
padding: 7px 0;
|
||||
display: block;
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
color: rgba($white, 0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-social-link {
|
||||
.avatar-title {
|
||||
color: #778089;
|
||||
background-color: rgba($white, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#back-to-top {
|
||||
&.landing-back-top {
|
||||
bottom: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
// dark
|
||||
|
||||
[data-layout-mode="dark"] {
|
||||
.layout-wrapper.landing {
|
||||
|
||||
.demo-img-patten-top,
|
||||
.demo-img-patten-bottom {
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
footer.bg-dark {
|
||||
background-color: var(--#{$prefix}card-bg-custom) !important;
|
||||
}
|
||||
}
|
||||
|
||||
//navbar-light
|
||||
.navbar-light{
|
||||
&.is-sticky {
|
||||
.navbar-brand {
|
||||
.card-logo-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-logo-light {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
101
resources/scss/pages/_nft-landing.scss
vendored
Executable file
101
resources/scss/pages/_nft-landing.scss
vendored
Executable file
@@ -0,0 +1,101 @@
|
||||
//
|
||||
// _nft-landing.scss
|
||||
//
|
||||
|
||||
.bookmark-icon {
|
||||
.btn {
|
||||
color: $text-muted;
|
||||
background-color: var(--#{$prefix}light);
|
||||
box-shadow: $box-shadow;
|
||||
font-size: $font-size-base;
|
||||
&:hover,
|
||||
&.active {
|
||||
border-color: transparent;
|
||||
color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.explore-box {
|
||||
border-radius: 9px;
|
||||
overflow: hidden;
|
||||
.explore-img {
|
||||
height: 280px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.explore-place-bid-img {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
.bg-overlay {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba($dark, 0.4);
|
||||
opacity: 0;
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.place-bid-btn {
|
||||
top: 50%;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
.btn {
|
||||
opacity: 0;
|
||||
bottom: -25px;
|
||||
transition: 0.5s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.explore-place-bid-img {
|
||||
.place-bid-btn {
|
||||
.btn {
|
||||
opacity: 1;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.discount-time {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
background-color: rgba($white, 0.4);
|
||||
backdrop-filter: blur(5px);
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
.nft-hero {
|
||||
background-image: url('../images/nft/bg-home.jpg');
|
||||
background-size: cover;
|
||||
background-position: bottom;
|
||||
padding: 222px 0 150px 0;
|
||||
.bg-overlay {
|
||||
background-color: #05175f;
|
||||
opacity: 0.85;
|
||||
}
|
||||
}
|
||||
|
||||
#explorecard-list {
|
||||
.list-element {
|
||||
display: none;
|
||||
|
||||
&:nth-child(-n+10) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
187
resources/scss/pages/_profile.scss
vendored
Executable file
187
resources/scss/pages/_profile.scss
vendored
Executable file
@@ -0,0 +1,187 @@
|
||||
//
|
||||
// _profile.scss
|
||||
//
|
||||
|
||||
.error-text {
|
||||
text-shadow: 4px 4px rgba($success, 0.4);
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
font-size: 10rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// profile
|
||||
|
||||
.profile-wid-bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
height: 320px;
|
||||
@media (max-width: 575.98px) {
|
||||
height: 445px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
opacity: 0.9;
|
||||
background: $primary;
|
||||
background: linear-gradient(to top, darken($primary, 25%), $primary);
|
||||
|
||||
}
|
||||
|
||||
.profile-wid-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-nav {
|
||||
&.nav-pills {
|
||||
.nav-link {
|
||||
color: rgba($white, 0.8);
|
||||
|
||||
&::before {
|
||||
background-color: rgba($white, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile-project-card {
|
||||
border: 1px solid $border-color;
|
||||
border-left: 3px solid $border-color;
|
||||
}
|
||||
|
||||
@each $color,
|
||||
$value in $theme-colors {
|
||||
.profile-project-card {
|
||||
&.profile-project-#{$color} {
|
||||
border-left-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-profile-img {
|
||||
position: relative;
|
||||
|
||||
.profile-img {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
object-fit: cover;
|
||||
|
||||
@media (max-width:991px) {
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-foreground-img-file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.profile-photo-edit {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-user {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
.profile-photo-edit {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: auto;
|
||||
bottom: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.user-profile-image {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.profile-img-file-input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-timeline {
|
||||
.accordion-item {
|
||||
position: relative;
|
||||
|
||||
.accordion-button {
|
||||
background-color: transparent;
|
||||
|
||||
&::after {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
border-left: 2px dashed $border-color;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
left: 23px;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
&::before {
|
||||
top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&::before {
|
||||
height: 20px;
|
||||
top: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile-setting-img {
|
||||
position: relative;
|
||||
height: 260px;
|
||||
|
||||
.overlay-content {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.profile-img {
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
object-fit: cover;
|
||||
|
||||
@media (max-width:991.98px) {
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-foreground-img-file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.profile-photo-edit {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:575.98px) {
|
||||
|
||||
[data-layout="horizontal"]{
|
||||
.profile-foreground{
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
103
resources/scss/pages/_search-results.scss
vendored
Executable file
103
resources/scss/pages/_search-results.scss
vendored
Executable file
@@ -0,0 +1,103 @@
|
||||
//
|
||||
// _search-results.scss
|
||||
//
|
||||
|
||||
.search-more-results {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.nav-icon {
|
||||
font-size: 14px;
|
||||
color: $white;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
i {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
font-size: 14px;
|
||||
|
||||
i {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.video-list {
|
||||
.list-element {
|
||||
display: none;
|
||||
&:nth-child(1) {
|
||||
display: block;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
display: block;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-voice {
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
line-height: 120px;
|
||||
margin: 0px auto;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
|
||||
i {
|
||||
line-height: 56px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.voice-wave {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
z-index: -1;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
margin: 0px auto;
|
||||
opacity: 0;
|
||||
border-radius: 100px;
|
||||
animation: voice-wave 1.8s infinite;
|
||||
background-color: var(--#{$prefix}light);
|
||||
|
||||
&:nth-child(2) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes voice-wave {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.images-menu {
|
||||
.swiper-slide {
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
482
resources/scss/pages/_sitemap.scss
vendored
Executable file
482
resources/scss/pages/_sitemap.scss
vendored
Executable file
@@ -0,0 +1,482 @@
|
||||
//
|
||||
// _sitemap.scss
|
||||
//
|
||||
|
||||
.sitemap-content {
|
||||
width: 100%;
|
||||
max-width: 1142px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
|
||||
* {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.sitemap-horizontal {
|
||||
position: relative;
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
background: var(--#{$prefix}light);
|
||||
border: 2px solid var(--#{$prefix}card-bg-custom);
|
||||
box-shadow: $box-shadow;
|
||||
font-size: $font-size-base;
|
||||
height: 60px;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.administration {
|
||||
.director {
|
||||
>li {
|
||||
>a {
|
||||
width: 50%;
|
||||
margin: 0 auto 0px auto;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subdirector {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 130px;
|
||||
border-left: 2px dashed $border-color;
|
||||
left: 45.45%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
>li {
|
||||
&:first-child {
|
||||
width: 18.59%;
|
||||
height: 64px;
|
||||
margin: 0 auto 92px auto;
|
||||
padding-top: 25px;
|
||||
border-bottom: 2px dashed $border-color;
|
||||
z-index: 1;
|
||||
float: right;
|
||||
right: 27.2%;
|
||||
border-left: 2px dashed $border-color;
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
left: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.subdirector {
|
||||
>li {
|
||||
&:first-child {
|
||||
width: 40%;
|
||||
right: 10%;
|
||||
margin-right: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: 49.8%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.departments {
|
||||
width: 100%;
|
||||
|
||||
>li {
|
||||
&:first-child {
|
||||
width: 18.59%;
|
||||
height: 64px;
|
||||
margin: 0 auto 92px auto;
|
||||
padding-top: 25px;
|
||||
border-bottom: 2px dashed $border-color;
|
||||
z-index: 1;
|
||||
float: left;
|
||||
left: 27%;
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
right: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-left: 0;
|
||||
clear: left;
|
||||
|
||||
&.department {
|
||||
&:before {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 81.1%;
|
||||
height: 22px;
|
||||
border-top: 2px dashed $border-color;
|
||||
border-right: 2px dashed $border-color;
|
||||
border-left: 2px dashed $border-color;
|
||||
margin: 0 auto;
|
||||
top: 130px;
|
||||
left: 9.1%
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
>li {
|
||||
&:first-child {
|
||||
width: 40%;
|
||||
left: 10%;
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
border-right: none;
|
||||
left: 0;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.department {
|
||||
border-left: 2px dashed $border-color;
|
||||
float: left;
|
||||
margin-left: 1.75%;
|
||||
margin-bottom: 60px;
|
||||
width: 18.25%;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 22px;
|
||||
border-left: 2px dashed $border-color;
|
||||
z-index: 1;
|
||||
top: -22px;
|
||||
left: 50%;
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
>a {
|
||||
margin: 0 0 -26px -4px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
|
||||
li {
|
||||
padding-left: 25px;
|
||||
border-bottom: 2px dashed $border-color;
|
||||
height: 80px;
|
||||
|
||||
a {
|
||||
background: var(--#{$prefix}card-bg-custom);
|
||||
margin-top: 48px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 90%;
|
||||
height: 60px;
|
||||
vertical-align: middle;
|
||||
right: -1px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
&:last-child:before {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
float: none;
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 60px;
|
||||
border-left: 2px dashed $white;
|
||||
z-index: 1;
|
||||
top: -60px;
|
||||
left: 0%;
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// sitemap
|
||||
|
||||
.hori-sitemap {
|
||||
ul {
|
||||
padding: 0;
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
li {
|
||||
position: relative;
|
||||
}
|
||||
@media (max-width: 575.98px) {
|
||||
text-align: left;
|
||||
.parent-title {
|
||||
a {
|
||||
padding-left: 0;
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
>ul {
|
||||
position: relative;
|
||||
li {
|
||||
padding-top: 10px;
|
||||
.second-list,
|
||||
.sub-list {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
height: calc(100% - 14px);
|
||||
border-right: 2px dashed $border-color;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
.sub-list {
|
||||
&:before {
|
||||
height: 38%;
|
||||
}
|
||||
}
|
||||
a {
|
||||
position: relative;
|
||||
padding: 4px 16px 4px 36px;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
width: 24px;
|
||||
border-top: 2px dashed $border-color;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-left: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
ul {
|
||||
padding-top: 20px;
|
||||
li {
|
||||
padding-top: 30px;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
height: 24px;
|
||||
width: 0;
|
||||
border-right: 2px dashed $border-color;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
width: 100%;
|
||||
border-top: 2px dashed $border-color;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.parent-title {
|
||||
&::before {
|
||||
content: "";
|
||||
height: 23px;
|
||||
border-right: 2px dashed $border-color;
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: 0;
|
||||
}
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
height: 21px;
|
||||
border-right: 2px dashed $border-color;
|
||||
position: absolute;
|
||||
top: 27px;
|
||||
left: 49%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--#{$prefix}body-color);
|
||||
padding: 4px 0px;
|
||||
display: block;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// vertical sitemap
|
||||
.verti-sitemap {
|
||||
a {
|
||||
color: var(--#{$prefix}body-color);
|
||||
display: block;
|
||||
}
|
||||
.parent-title {
|
||||
a {
|
||||
padding-left: 0;
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.first-list {
|
||||
position: relative;
|
||||
padding-top: 10px;
|
||||
&:before {
|
||||
content: "";
|
||||
border-left: 2px dashed $border-color;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.list-wrap, li {
|
||||
a {
|
||||
position: relative;
|
||||
padding: 10px 16px 4px 36px;
|
||||
&::before {
|
||||
content: "";
|
||||
width: 24px;
|
||||
border-top: 2px dashed $border-color;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.second-list, .third-list {
|
||||
margin-left: 42px;
|
||||
|
||||
}
|
||||
|
||||
.third-list, .second-list {
|
||||
position: relative;
|
||||
li {
|
||||
position: relative;
|
||||
&:before {
|
||||
content: "";
|
||||
height: 100%;
|
||||
border-left: 2px dashed $border-color;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0px auto;
|
||||
}
|
||||
&:last-child {
|
||||
&::before {
|
||||
height: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&::before {
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
213
resources/scss/pages/_team.scss
vendored
Executable file
213
resources/scss/pages/_team.scss
vendored
Executable file
@@ -0,0 +1,213 @@
|
||||
//
|
||||
// _team.scss
|
||||
//
|
||||
|
||||
.team-box .team-cover, .profile-offcanvas .team-cover, .modal-team-cover{
|
||||
display: none;
|
||||
position: relative;
|
||||
margin-bottom: -140px;
|
||||
|
||||
img {
|
||||
height: 140px;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to top, darken($primary, 25%), $primary);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.team-list {
|
||||
&.grid-view-filter {
|
||||
flex-flow: row wrap;
|
||||
|
||||
.col {
|
||||
flex: 0 0 auto;
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.team-box {
|
||||
overflow: hidden;
|
||||
|
||||
.team-row {
|
||||
align-items: start;
|
||||
|
||||
.col {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.team-cover {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.team-settings {
|
||||
.col {
|
||||
width: 50% !important;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.btn-star {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
>a {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.team-profile-img {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
margin-top: 36px;
|
||||
|
||||
.avatar-lg {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.team-content {
|
||||
margin-left: 0px;
|
||||
margin-top: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
width: 100%;
|
||||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) and (max-width: 1399.98px) {
|
||||
.col {
|
||||
flex: 0 0 auto;
|
||||
width: 33.33%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1199.98px) {
|
||||
.col {
|
||||
flex: 0 0 auto;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.col {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.list-view-filter {
|
||||
flex-direction: column;
|
||||
|
||||
.team-box {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.team-row {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.team-profile-img {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.avatar-lg {
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.team-content {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.team-settings {
|
||||
width: auto;
|
||||
flex: 0 0 auto;
|
||||
-webkit-box-ordinal-group: 7;
|
||||
order: 6;
|
||||
}
|
||||
|
||||
.btn-star {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
flex-direction: row;
|
||||
.col {
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
.team-box {
|
||||
|
||||
.team-settings {
|
||||
width: 100%;
|
||||
flex: 0 0 auto;
|
||||
order: -1;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.col {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.team-profile-img {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
width: 100%;
|
||||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-team-cover{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.list-grid-nav {
|
||||
.nav-link {
|
||||
&.active {
|
||||
background-color: $info;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile-offcanvas {
|
||||
.team-cover {
|
||||
margin-bottom: -132px;
|
||||
display: block;
|
||||
z-index: -1;
|
||||
}
|
||||
.btn-star {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
>a {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
438
resources/scss/pages/_timeline.scss
vendored
Executable file
438
resources/scss/pages/_timeline.scss
vendored
Executable file
@@ -0,0 +1,438 @@
|
||||
//
|
||||
// _timeline.scss
|
||||
//
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
background: $timeline-color;
|
||||
top: 57px;
|
||||
bottom: 166px;
|
||||
left: 50%;
|
||||
margin-left: -1.5px;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
padding: 30px 60px;
|
||||
position: relative;
|
||||
background: inherit;
|
||||
width: 50%;
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
display: inline-flex;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 25px;
|
||||
top: 30px;
|
||||
right: -30px;
|
||||
padding: 9px 0;
|
||||
background: var(--#{$prefix}card-bg-custom);
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 50px;
|
||||
color: $success;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.date {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: calc(100% - 48px);
|
||||
top: 50px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 20px;
|
||||
background: var(--#{$prefix}card-bg-custom);
|
||||
position: relative;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $box-shadow-sm;
|
||||
}
|
||||
|
||||
&.left {
|
||||
left: 0;
|
||||
|
||||
.date {
|
||||
left: calc(100% + 48px);
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
left: 50%;
|
||||
|
||||
.icon {
|
||||
left: -30px;
|
||||
}
|
||||
|
||||
.date {
|
||||
right: calc(100% + 48px);
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 28px;
|
||||
border-color: transparent transparent transparent $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 991.98px) {
|
||||
.timeline {
|
||||
&::after {
|
||||
left: 112px;
|
||||
bottom: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
width: 100%;
|
||||
padding-left: 165px;
|
||||
padding-right: 0px;
|
||||
|
||||
&.right, &.left {
|
||||
left: 0%;
|
||||
|
||||
.icon {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
top: 37.5px;
|
||||
font-size: 18px;
|
||||
left: 90px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 110px;
|
||||
border-color: transparent transparent transparent $border-color;
|
||||
}
|
||||
|
||||
.date {
|
||||
right: auto;
|
||||
left: 0px;
|
||||
width: 79px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-2 {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 2px;
|
||||
height: 83%;
|
||||
top: 50px;
|
||||
left: 40px;
|
||||
margin-left: -1px;
|
||||
background: $timeline-color;
|
||||
}
|
||||
|
||||
.timeline-year {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
z-index: 1;
|
||||
|
||||
p {
|
||||
display: inline-flex;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 0;
|
||||
padding: 23px 10px;
|
||||
background: $timeline-color;
|
||||
border-radius: 50px;
|
||||
text-transform: uppercase;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
span {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-date {
|
||||
font-size: 14px;
|
||||
font-weight: $font-weight-medium;
|
||||
margin: 24px 0 0 0;
|
||||
margin-left: 55px;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
top: 26px;
|
||||
left: 45px;
|
||||
align-items: left;
|
||||
background: $success;
|
||||
border: 3px solid $timeline-color;
|
||||
border-radius: 50px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-box {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 23px 62px;
|
||||
padding: 20px;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 6px;
|
||||
background: var(--#{$prefix}card-bg-custom);
|
||||
max-width: 695px;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
top: 26px;
|
||||
right: 100%;
|
||||
border-color: transparent var(--#{$prefix}card-bg-custom) transparent transparent;
|
||||
border-width: 10px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
right: 100%;
|
||||
top: 24px;
|
||||
border-color: transparent $border-color transparent transparent;
|
||||
border-width: 12px;
|
||||
}
|
||||
|
||||
.timeline-text {
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-launch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 6px;
|
||||
background: $white;
|
||||
width: 100%;
|
||||
margin-top: 15px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
text-align: left;
|
||||
background: transparent;
|
||||
|
||||
.timeline-box {
|
||||
margin-left: 0;
|
||||
|
||||
&::after {
|
||||
left: 30px;
|
||||
margin-left: 0px;
|
||||
top: -20px;
|
||||
border-color: transparent transparent $border-color transparent;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 30px;
|
||||
margin-left: 0px;
|
||||
top: -19px;
|
||||
border-color: transparent transparent var(--#{$prefix}card-bg-custom) transparent;
|
||||
border-width: 10px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal Timeline
|
||||
.horizontal-timeline {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 174px;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
background-color: $timeline-color;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
.item-box {
|
||||
margin: 227px 0px 0px;
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
margin: 0px auto;
|
||||
background: $primary;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
top: -59px;
|
||||
border-radius: 50px;
|
||||
border: 3px solid $timeline-color;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
min-height: 110px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
background-color: $timeline-color;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
left: 0px;
|
||||
top: -23px;
|
||||
border-color: transparent transparent $timeline-color transparent;
|
||||
border-width: 12px;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
position: absolute;
|
||||
top: -86px;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
margin-top: 5px;
|
||||
transform: rotate(-180deg);
|
||||
|
||||
.timeline-content {
|
||||
transform: rotate(180deg);
|
||||
|
||||
&::before {
|
||||
bottom: -23px;
|
||||
top: auto;
|
||||
border-color: $timeline-color transparent transparent transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-button-next,
|
||||
.swiper-button-prev {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: lighten($primary, 2.5%);
|
||||
|
||||
&::after {
|
||||
font-size: 24px;
|
||||
color: $white;
|
||||
}
|
||||
&.swiper-button-disabled {
|
||||
background-color: rgba($primary, 0.5);
|
||||
opacity: 1;
|
||||
cursor: auto;
|
||||
backdrop-filter: blur(25px);
|
||||
pointer-events: none
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-button-next {
|
||||
right: 0;
|
||||
|
||||
&::after {
|
||||
content: "\EA6E";
|
||||
font-family: remixicon;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-button-prev {
|
||||
left: 0;
|
||||
|
||||
&::after {
|
||||
content: "\EA64";
|
||||
font-family: remixicon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//activity-timeline
|
||||
|
||||
.acitivity-timeline {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.acitivity-item {
|
||||
position: relative;
|
||||
|
||||
.flex-shrink-0 {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.acitivity-avatar {
|
||||
background-color: var(--#{$prefix}card-bg-custom);
|
||||
border: 3px solid var(--#{$prefix}card-bg-custom);
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
border-left: 1px dashed $border-color;
|
||||
left: 16px;
|
||||
height: 100%;
|
||||
top: 5px;
|
||||
z-index: 0;
|
||||
}
|
||||
&:last-child {
|
||||
&::before {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
66
resources/scss/pages/_to-do.scss
vendored
Executable file
66
resources/scss/pages/_to-do.scss
vendored
Executable file
@@ -0,0 +1,66 @@
|
||||
//
|
||||
// _to-do.scss
|
||||
//
|
||||
|
||||
.to-do-menu {
|
||||
li {
|
||||
.nav-link {
|
||||
color: var(--#{$prefix}body-color);
|
||||
padding-left: 0;
|
||||
font-weight: $font-weight-medium;
|
||||
background-color: var(--#{$prefix}light);
|
||||
padding: 10px 12px;
|
||||
border-radius: 4px;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
&:hover, &.active {
|
||||
color: $success;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.todo-content {
|
||||
height: calc(100vh - 362px);
|
||||
overflow-y: auto;
|
||||
&::-webkit-scrollbar {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar:vertical {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar:horizontal {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(var(--#{$prefix}dark-rgb), .075);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.todo-task {
|
||||
table{
|
||||
.form-check{
|
||||
.form-check-input {
|
||||
&:checked+.form-check-label {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.task-handle{
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
#task-error-msg{
|
||||
display: none;
|
||||
}
|
||||
Reference in New Issue
Block a user