Primo commit: trasferimento del progetto PPEasy
This commit is contained in:
@@ -0,0 +1,141 @@
|
||||
//
|
||||
// Account Pages
|
||||
//
|
||||
|
||||
.account-body{
|
||||
background-color: $card-bg;
|
||||
.auth-page{
|
||||
max-width: 460px;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.auth-card{
|
||||
border-radius: 20px;
|
||||
.auth-logo-box{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: -25px;
|
||||
text-align: center;
|
||||
.auth-logo{
|
||||
border-radius: 50%;
|
||||
background-color: $white;
|
||||
padding: 4px;
|
||||
box-shadow: 0px 0px 0px 2.25px $gray-200;
|
||||
}
|
||||
}
|
||||
.auth-logo-text{
|
||||
font-family: $font-secondary;
|
||||
h4{
|
||||
font-weight: 600;
|
||||
color: $gray-700;
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.auth-form{
|
||||
.form-control{
|
||||
border-radius: 30px;
|
||||
padding-right: 40px;
|
||||
}
|
||||
.auth-form-icon{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: $gray-200;
|
||||
text-align: center;
|
||||
line-height: 34px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
right: 3px;
|
||||
z-index: 100;
|
||||
top: 3px;
|
||||
color: $info;
|
||||
}
|
||||
}
|
||||
&.accountbg {
|
||||
background: linear-gradient(0deg, rgba(247,247,247,1) 0%, rgba(252,222,222,1) 55%);
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
.account-title{
|
||||
width: 500px;
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
h1{
|
||||
font-size: 60px;
|
||||
font-weight: 700;
|
||||
margin: 30px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.account-social {
|
||||
h6{
|
||||
color: darken($gray-500, 10%);
|
||||
}
|
||||
h6:after {
|
||||
display: inline-block;
|
||||
margin: 0 6px 4px 6px;
|
||||
height: 2px;
|
||||
content: " ";
|
||||
text-shadow: none;
|
||||
background-color: #fdc3c3;
|
||||
width: 110px;
|
||||
}
|
||||
h6:before {
|
||||
display: inline-block;
|
||||
margin: 0 6px 4px 6px;
|
||||
height: 2px;
|
||||
content: " ";
|
||||
text-shadow: none;
|
||||
background-color: #fdc3c3;
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
a{
|
||||
i {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
font-size: 14px;
|
||||
z-index: 5;
|
||||
&.facebook{
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
&.twitter{
|
||||
background-color: $secondary;
|
||||
color: $white;
|
||||
}
|
||||
&.google{
|
||||
background-color: $pink;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
&:hover .facebook{
|
||||
color: $white;
|
||||
background-color: lighten($primary, 5%);
|
||||
}
|
||||
&:hover .twitter{
|
||||
color: $white;
|
||||
background-color: lighten($secondary, 5%);
|
||||
}
|
||||
&:hover .google{
|
||||
color: $white;
|
||||
background-color: lighten($pink, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.auth-card{
|
||||
margin-top: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
//
|
||||
// Analytics
|
||||
//
|
||||
|
||||
|
||||
.dash-chart {
|
||||
position: relative;
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
.browser_users{
|
||||
table{
|
||||
td{
|
||||
i{
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.impressions-data{
|
||||
h2{
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Report
|
||||
|
||||
|
||||
.rep-map{
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
.chart-report-card{
|
||||
background-color: lighten($gray-300, 4%);
|
||||
}
|
||||
|
||||
.chart-report-card,
|
||||
.report-card{
|
||||
.report-main-icon{
|
||||
font-size: 28px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
border-radius: 50%;
|
||||
}
|
||||
h3{
|
||||
color: $dark;
|
||||
font-weight: 600;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
.url-list{
|
||||
li{
|
||||
i{
|
||||
font-size: 24px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
.traffic-card{
|
||||
margin: 20px 0;
|
||||
h3{
|
||||
font-size: 28px;
|
||||
color: $gray-700;
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
//
|
||||
// _avatar.scss
|
||||
//
|
||||
|
||||
.avatar-md{
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
font-size: 18px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.media{
|
||||
font-family: $font-secondary;
|
||||
}
|
||||
|
||||
.img-group{
|
||||
display: inline-block;
|
||||
.avatar-badge{
|
||||
position: absolute;
|
||||
right: 1px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 0 2px $card-bg;
|
||||
z-index: 2;
|
||||
}
|
||||
.user-avatar+.user-avatar-group {
|
||||
margin-left: -12px;
|
||||
}
|
||||
.user-avatar {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
&:focus,&:hover{
|
||||
z-index: 2;
|
||||
}
|
||||
.online {
|
||||
background: $success;
|
||||
}
|
||||
.offline{
|
||||
background: $gray;
|
||||
}
|
||||
img{
|
||||
box-shadow: 0 0 0 2px $gray-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
.avatar-box{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
.avatar-title {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: $gray-100;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,193 @@
|
||||
//
|
||||
// Background-color
|
||||
//
|
||||
.bg-black{
|
||||
background-color: $black !important;
|
||||
color: $white;
|
||||
}
|
||||
.bg-card{
|
||||
background-color: $card-bg !important;
|
||||
}
|
||||
// bg-soft
|
||||
|
||||
.bg-soft-primary{
|
||||
background-color: rgba($primary, 0.08) !important;
|
||||
color: $primary !important;
|
||||
}
|
||||
|
||||
.bg-soft-secondary{
|
||||
background-color: rgba($secondary, 0.08) !important;
|
||||
color: $secondary !important;
|
||||
}
|
||||
|
||||
.bg-soft-success{
|
||||
background-color: rgba($success, 0.08) !important;
|
||||
color: $success !important;
|
||||
}
|
||||
|
||||
.bg-soft-warning{
|
||||
background-color: rgba($warning, 0.08) !important;
|
||||
color: $warning !important;
|
||||
}
|
||||
|
||||
.bg-soft-info{
|
||||
background-color: rgba($info, 0.08) !important;
|
||||
color: $info !important;
|
||||
}
|
||||
|
||||
.bg-soft-danger{
|
||||
background-color: rgba($danger, 0.08) !important;
|
||||
color: $danger !important;
|
||||
}
|
||||
|
||||
.bg-soft-pink{
|
||||
background-color: rgba($pink, 0.08) !important;
|
||||
color: $pink !important;
|
||||
}
|
||||
|
||||
.bg-soft-purple{
|
||||
background-color: rgba($purple, 0.08) !important;
|
||||
color: $purple !important;
|
||||
}
|
||||
|
||||
.bg-soft-blue{
|
||||
background-color: rgba($blue, 0.08) !important;
|
||||
color: $blue !important;
|
||||
}
|
||||
|
||||
.bg-soft-dark{
|
||||
background-color: rgba($dark, 0.08) !important;
|
||||
color: $dark !important;
|
||||
}
|
||||
|
||||
// bg-gradient
|
||||
|
||||
.bg-primary-gradient{
|
||||
background: linear-gradient(14deg, #4d79f6 36%, #39add0 100%);
|
||||
}
|
||||
.bg-secondary-gradient{
|
||||
background: linear-gradient(14deg, #42cef1 36%, #63ddfb 100%);
|
||||
}
|
||||
.bg-success-gradient{
|
||||
background: linear-gradient(14deg, #22d4b3 36%, #71e6d1 100%);
|
||||
}
|
||||
.bg-info-gradient{
|
||||
background: linear-gradient(14deg, #4b545d 36%, #67737b 100%);
|
||||
}
|
||||
.bg-warning-gradient{
|
||||
background: linear-gradient(14deg, #efc039 36%, #f1cb60 100%);
|
||||
}
|
||||
.bg-danger-gradient{
|
||||
background: linear-gradient(14deg, #fb7589 36%, #ff9595 100%);
|
||||
}
|
||||
.bg-pink-gradient{
|
||||
background: linear-gradient(14deg, #FE5D9E 36%, #8E73FE 100%);
|
||||
}
|
||||
.bg-purple-gradient{
|
||||
background: linear-gradient(14deg, #6d81f5 36%, #8498f3 100%);
|
||||
}
|
||||
.bg-blue-gradient{
|
||||
background: linear-gradient(14deg, #11368a 36%, #326eca 100%);
|
||||
}
|
||||
.bg-dark-gradient{
|
||||
background: linear-gradient(14deg, #12100e 36%, #2b4162 100%);
|
||||
}
|
||||
.bg-light-gradient{
|
||||
background: linear-gradient(14deg, #c3cbdc 36%, #edf1f4 100%);
|
||||
}
|
||||
.bg-custom-gradient{
|
||||
background: linear-gradient(14deg, #521c85 36%, #4400ff 100%);
|
||||
}
|
||||
|
||||
// Badge
|
||||
.badge{
|
||||
box-shadow:none;
|
||||
font-size: 11px !important;
|
||||
&.badge-soft-primary{
|
||||
background-color: rgba($primary, 0.15) !important;
|
||||
color: $primary !important;
|
||||
box-shadow: 0px 0px 13px 0px rgba($primary,0.05);
|
||||
}
|
||||
|
||||
&.badge-soft-secondary{
|
||||
background-color: rgba($secondary, 0.15) !important;
|
||||
color: $secondary !important;
|
||||
box-shadow: 0px 0px 13px 0px rgba($secondary,0.05);
|
||||
}
|
||||
|
||||
&.badge-soft-success{
|
||||
background-color: rgba($success, 0.15) !important;
|
||||
color: $success !important;
|
||||
box-shadow: 0px 0px 13px 0px rgba($success,0.05);
|
||||
}
|
||||
|
||||
&.badge-soft-warning{
|
||||
background-color: rgba($warning, 0.15) !important;
|
||||
color: $warning !important;
|
||||
box-shadow: 0px 0px 13px 0px rgba($warning,0.05);
|
||||
}
|
||||
|
||||
&.badge-soft-info{
|
||||
background-color: rgba($info, 0.15) !important;
|
||||
color: $info !important;
|
||||
box-shadow: 0px 0px 13px 0px rgba($info,0.05);
|
||||
}
|
||||
|
||||
&.badge-soft-danger{
|
||||
background-color: rgba($danger, 0.15) !important;
|
||||
color: $danger !important;
|
||||
box-shadow: 0px 0px 13px 0px rgba($danger,0.05);
|
||||
}
|
||||
|
||||
&.badge-soft-pink{
|
||||
background-color: rgba($pink, 0.15) !important;
|
||||
color: $pink !important;
|
||||
box-shadow: 0px 0px 13px 0px rgba($pink,0.05);
|
||||
}
|
||||
|
||||
&.badge-soft-purple{
|
||||
background-color: rgba($purple, 0.15) !important;
|
||||
color: $purple !important;
|
||||
box-shadow: 0px 0px 13px 0px rgba($purple,0.05);
|
||||
}
|
||||
|
||||
&.badge-soft-dark{
|
||||
background-color: rgba($dark, 0.15) !important;
|
||||
color: $dark !important;
|
||||
box-shadow: 0px 0px 13px 0px rgba($dark,0.05);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// shadow
|
||||
|
||||
.shadow-primary{
|
||||
box-shadow: 0 6px 20px 0 rgba($primary, .5) !important
|
||||
}
|
||||
.shadow-secondary{
|
||||
box-shadow: 0 6px 20px 0 rgba($secondary, .5) !important
|
||||
}
|
||||
.shadow-success{
|
||||
box-shadow: 0 6px 20px 0 rgba($success, .5) !important
|
||||
}
|
||||
.shadow-warning{
|
||||
box-shadow: 0 6px 20px 0 rgba($warning, .5) !important
|
||||
}
|
||||
.shadow-info{
|
||||
box-shadow: 0 6px 20px 0 rgba($info, .5) !important
|
||||
}
|
||||
.shadow-danger{
|
||||
box-shadow: 0 6px 20px 0 rgba($danger, .5) !important
|
||||
}
|
||||
.shadow-pink{
|
||||
box-shadow: 0 6px 20px 0 rgba($pink, .5) !important
|
||||
}
|
||||
.shadow-purple{
|
||||
box-shadow: 0 6px 20px 0 rgba($purple, .5) !important
|
||||
}
|
||||
.shadow-orange{
|
||||
box-shadow: 0 6px 20px 0 rgba($orange, .5) !important
|
||||
}
|
||||
.shadow-dark{
|
||||
box-shadow: 0 6px 20px 0 rgba($dark, .5) !important
|
||||
}
|
||||
@@ -0,0 +1,315 @@
|
||||
//
|
||||
// Chat
|
||||
//
|
||||
.chat-box-left {
|
||||
float: left;
|
||||
width: 340px;
|
||||
height: 820px;
|
||||
background-color: $card-bg;
|
||||
border-radius: 3px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
.nav-pills{
|
||||
background-color: $gray-100;
|
||||
.nav-link{
|
||||
color: $gray-700;
|
||||
&.active{
|
||||
color:$white;
|
||||
background: linear-gradient(14deg, $primary 0%, rgba($primary, .6));
|
||||
}
|
||||
}
|
||||
}
|
||||
.chat-search{
|
||||
margin-top: 20px;
|
||||
}
|
||||
.chat-list{
|
||||
height: 664px !important;
|
||||
.media + .media {
|
||||
border: 1px solid $gray-200;
|
||||
margin-bottom: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.media{
|
||||
padding: 15px;
|
||||
position: relative;
|
||||
&:hover,
|
||||
&:focus{
|
||||
background-color: rgba($gray-200, .5);
|
||||
}
|
||||
&.new-message{
|
||||
border: 1px solid $gray-300;
|
||||
background-color: $gray-200;
|
||||
margin-bottom: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.media-left {
|
||||
position: relative;
|
||||
align-self: center;
|
||||
.round-10 {
|
||||
border: 2px solid $gray-100;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 5px;
|
||||
display: inline-block;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
.media-body {
|
||||
margin-left: 15px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
color: $gray-700;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
p{
|
||||
margin-bottom: 0;
|
||||
color: $gray-700;
|
||||
font-size: 13px;
|
||||
}
|
||||
> div:last-child {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
flex-direction: column;
|
||||
min-width: 50px;
|
||||
text-align: right;
|
||||
span:nth-child(2) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: $success;
|
||||
color: $white;
|
||||
border-radius: 50%;
|
||||
font-size: 10px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
span{
|
||||
font-size: 12px;
|
||||
color: $gray-700;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-box-right{
|
||||
width: auto;
|
||||
background-color: $white;
|
||||
display: block;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
height: 820px;
|
||||
margin-left: 361px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.chat-header {
|
||||
border-bottom: 1px solid $gray-200;
|
||||
padding: 20px;
|
||||
background-color: $card-bg;
|
||||
.media {
|
||||
.media-body {
|
||||
margin-left: 15px;
|
||||
align-self: center;
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
color: $gray-700;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
p{
|
||||
margin-bottom: 0;
|
||||
color: $gray-500;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chat-features{
|
||||
position: relative;
|
||||
top: -34px;
|
||||
float: right;
|
||||
a{
|
||||
color: $gray-400;
|
||||
font-size: 16px;
|
||||
margin-left: 12px;
|
||||
&:hover{
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.chat-body{
|
||||
padding: 20px;
|
||||
background-image: url('../images/pattern.png');
|
||||
background-repeat: repeat;
|
||||
background-attachment: fixed;
|
||||
height: 650px;
|
||||
background-color: $body-bg;
|
||||
.chat-detail{
|
||||
min-height: 610px;
|
||||
.reverse{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.media{
|
||||
.media-img{
|
||||
z-index: 5;
|
||||
}
|
||||
.media-body{
|
||||
margin-left: 14px;
|
||||
.chat-msg{
|
||||
max-width: 80%;
|
||||
margin-bottom: 5px;
|
||||
margin-left: -61px;
|
||||
&:first-child p{
|
||||
padding-left: 60px;
|
||||
}
|
||||
p {
|
||||
padding: 14px;
|
||||
background-color: $gray-200;
|
||||
color: $gray-700;
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
border-radius: 50px;
|
||||
}
|
||||
}
|
||||
&.reverse {
|
||||
margin-right: 0;
|
||||
margin-left: 14px;
|
||||
.chat-msg{
|
||||
max-width: 80%;
|
||||
margin-bottom: 5px;
|
||||
margin-right: -48px;
|
||||
&:first-child p{
|
||||
padding-right: 60px;
|
||||
}
|
||||
p {
|
||||
padding: 14px;
|
||||
background-color: $purple;
|
||||
color: $white;
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
border-radius: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.chat-footer {
|
||||
border-top: 1px solid $gray-200;
|
||||
background-color: $card-bg;
|
||||
padding: 20px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
.media {
|
||||
.media-body {
|
||||
margin-left: 10px;
|
||||
align-self: center;
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
color: $gray-700;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
p{
|
||||
margin-bottom: 0;
|
||||
color: $gray-700;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chat-features{
|
||||
position: relative;
|
||||
top: 8px;
|
||||
float: right;
|
||||
a{
|
||||
color: $gray-400;
|
||||
font-size: 16px;
|
||||
margin-left: 12px;
|
||||
&:hover{
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
input{
|
||||
&.form-control{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.chat-admin{
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
border: 2px solid $gray-700;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 1024px) and (max-width: 1680px) {
|
||||
.chat-box-left{
|
||||
width: 310px;
|
||||
float: left;
|
||||
}
|
||||
.chat-box-right {
|
||||
width: auto;
|
||||
margin-left: 330px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 767px) and (max-width: 1023.98px) {
|
||||
.chat-box-left{
|
||||
width: 100%;
|
||||
float: none;
|
||||
}
|
||||
.chat-box-right {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.chat-box-left{
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
.chat-box-right {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 660px) {
|
||||
.chat-box-left{
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
.chat-box-right {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 568px) {
|
||||
.chat-box-left{
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
.chat-box-right {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,660 @@
|
||||
//
|
||||
// Check Box Radio Button
|
||||
//
|
||||
|
||||
.custom-checkbox .custom-control-input:checked~.custom-control-label::after{
|
||||
border-color: $white;
|
||||
}
|
||||
.radio .custom-control-label::after{
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
}
|
||||
|
||||
|
||||
.checkbox {
|
||||
//padding-left: 20px;
|
||||
label {
|
||||
display: inline-block;
|
||||
padding-left: 8px;
|
||||
position: relative;
|
||||
font-weight: normal;
|
||||
|
||||
&::before {
|
||||
-o-transition: 0.3s ease-in-out;
|
||||
-webkit-transition: 0.3s ease-in-out;
|
||||
background-color: $card-bg;
|
||||
border-radius: 3px;
|
||||
border: 2px solid $text-muted;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 18px;
|
||||
left: 0;
|
||||
top: 0px;
|
||||
margin-left: -18px;
|
||||
position: absolute;
|
||||
transition: 0.3s ease-in-out;
|
||||
width: 18px;
|
||||
outline: none !important;
|
||||
}
|
||||
&::after {
|
||||
color: $light;
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
height: 18px;
|
||||
left: 0;
|
||||
margin-left: -18px;
|
||||
padding-left: 3px;
|
||||
padding-top: 2px;
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
}
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
outline: none !important;
|
||||
|
||||
&:disabled + label {
|
||||
opacity: 0.65;
|
||||
}
|
||||
}
|
||||
input[type="checkbox"]:focus + label {
|
||||
&::before {
|
||||
outline-offset: -2px;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
input[type="checkbox"]:checked + label {
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 7px;
|
||||
display: table;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: 2px solid $dark;
|
||||
border-top-width: 0;
|
||||
border-left-width: 0;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
input[type="checkbox"]:disabled + label {
|
||||
&::before {
|
||||
background-color: $light;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox.checkbox-circle {
|
||||
label {
|
||||
&::before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox.checkbox-inline {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.checkbox.checkbox-single {
|
||||
input {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
position: absolute;
|
||||
}
|
||||
label {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
|
||||
&:before {
|
||||
margin-left: 0;
|
||||
}
|
||||
&:after {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.checkbox-primary {
|
||||
input[type="checkbox"]:checked + label {
|
||||
&::before {
|
||||
background-color: $primary;
|
||||
border-color: $primary;
|
||||
}
|
||||
&::after {
|
||||
border-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-danger {
|
||||
input[type="checkbox"]:checked + label {
|
||||
&::before {
|
||||
background-color: $danger;
|
||||
border-color: $danger;
|
||||
}
|
||||
&::after {
|
||||
border-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-info {
|
||||
input[type="checkbox"]:checked + label {
|
||||
&::before {
|
||||
background-color: $info;
|
||||
border-color: $info;
|
||||
}
|
||||
&::after {
|
||||
border-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-warning {
|
||||
input[type="checkbox"]:checked + label {
|
||||
&::before {
|
||||
background-color: $warning;
|
||||
border-color: $warning;
|
||||
}
|
||||
&::after {
|
||||
border-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-success {
|
||||
input[type="checkbox"]:checked + label {
|
||||
&::before {
|
||||
background-color: $success;
|
||||
border-color: $success;
|
||||
}
|
||||
&::after {
|
||||
border-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-purple {
|
||||
input[type="checkbox"]:checked + label {
|
||||
&::before {
|
||||
background-color: $purple;
|
||||
border-color: $purple;
|
||||
}
|
||||
&::after {
|
||||
border-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-pink {
|
||||
input[type="checkbox"]:checked + label {
|
||||
&::before {
|
||||
background-color: $pink;
|
||||
border-color: $pink;
|
||||
}
|
||||
&::after {
|
||||
border-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-dark {
|
||||
input[type="checkbox"]:checked + label {
|
||||
&::before {
|
||||
background-color: $dark;
|
||||
border-color: $dark;
|
||||
}
|
||||
&::after {
|
||||
border-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Radios */
|
||||
|
||||
.radio {
|
||||
//padding-left: 20px;
|
||||
label {
|
||||
display: inline-block;
|
||||
padding-left: 8px;
|
||||
position: relative;
|
||||
font-weight: normal;
|
||||
|
||||
&::before {
|
||||
-o-transition: border 0.5s ease-in-out;
|
||||
-webkit-transition: border 0.5s ease-in-out;
|
||||
background-color: $white;
|
||||
border-radius: 50%;
|
||||
border: 2px solid $text-muted;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 18px;
|
||||
left: 0;
|
||||
top: 0px;
|
||||
margin-left: -18px;
|
||||
position: absolute;
|
||||
transition: border 0.5s ease-in-out;
|
||||
width: 18px;
|
||||
outline: none !important;
|
||||
}
|
||||
&::after {
|
||||
-moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
|
||||
-ms-transform: scale(0, 0);
|
||||
-o-transform: scale(0, 0);
|
||||
-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
|
||||
-webkit-transform: scale(0, 0);
|
||||
-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
|
||||
background-color: $dark;
|
||||
border-radius: 50%;
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
height: 10px;
|
||||
left: 6px;
|
||||
margin-left: -20px;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
transform: scale(0, 0);
|
||||
transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
|
||||
width: 10px;
|
||||
}
|
||||
}
|
||||
input[type="radio"] {
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
outline: none !important;
|
||||
&:disabled + label {
|
||||
opacity: 0.65;
|
||||
}
|
||||
}
|
||||
input[type="radio"]:focus + label {
|
||||
&::before {
|
||||
outline-offset: -2px;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline: thin dotted;
|
||||
}
|
||||
}
|
||||
input[type="radio"]:checked + label {
|
||||
&::after {
|
||||
-ms-transform: scale(1, 1);
|
||||
-o-transform: scale(1, 1);
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
input[type="radio"]:disabled + label {
|
||||
&::before {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio.radio-inline {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.radio.radio-single {
|
||||
label {
|
||||
height: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.radio-primary {
|
||||
input[type="radio"] + label {
|
||||
&::after {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
input[type="radio"]:checked + label {
|
||||
&::before {
|
||||
border-color: $primary;
|
||||
}
|
||||
&::after {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio-danger {
|
||||
input[type="radio"] + label {
|
||||
&::after {
|
||||
background-color: $danger;
|
||||
}
|
||||
}
|
||||
input[type="radio"]:checked + label {
|
||||
&::before {
|
||||
border-color: $danger;
|
||||
}
|
||||
&::after {
|
||||
background-color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio-info {
|
||||
input[type="radio"] + label {
|
||||
&::after {
|
||||
background-color: $info;
|
||||
}
|
||||
}
|
||||
input[type="radio"]:checked + label {
|
||||
&::before {
|
||||
border-color: $info;
|
||||
}
|
||||
&::after {
|
||||
background-color: $info;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio-warning {
|
||||
input[type="radio"] + label {
|
||||
&::after {
|
||||
background-color: $warning;
|
||||
}
|
||||
}
|
||||
input[type="radio"]:checked + label {
|
||||
&::before {
|
||||
border-color: $warning;
|
||||
}
|
||||
&::after {
|
||||
background-color: $warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio-success {
|
||||
input[type="radio"] + label {
|
||||
&::after {
|
||||
background-color: $success;
|
||||
}
|
||||
}
|
||||
input[type="radio"]:checked + label {
|
||||
&::before {
|
||||
border-color: $success;
|
||||
}
|
||||
&::after {
|
||||
background-color: $success;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio-purple {
|
||||
input[type="radio"] + label {
|
||||
&::after {
|
||||
background-color: $purple;
|
||||
}
|
||||
}
|
||||
input[type="radio"]:checked + label {
|
||||
&::before {
|
||||
border-color: $purple;
|
||||
}
|
||||
&::after {
|
||||
background-color: $purple;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio-pink {
|
||||
input[type="radio"] + label {
|
||||
&::after {
|
||||
background-color: $pink;
|
||||
}
|
||||
}
|
||||
input[type="radio"]:checked + label {
|
||||
&::before {
|
||||
border-color: $pink;
|
||||
}
|
||||
&::after {
|
||||
background-color: $pink;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.radio2 {
|
||||
label {
|
||||
display: inline-block;
|
||||
padding-left: 8px;
|
||||
position: relative;
|
||||
font-weight: normal;
|
||||
margin-bottom: 10px;
|
||||
&::before {
|
||||
background-color: $white;
|
||||
border-radius: 50%;
|
||||
border: 2px solid transparent;
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
top: -1px;
|
||||
left: -2px;
|
||||
margin-left: -18px;
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
outline: none !important;
|
||||
}
|
||||
&::after {
|
||||
border-radius: 50%;
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
height: 8px;
|
||||
left: 4px;
|
||||
margin-left: -20px;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
transform: scale(0, 0);
|
||||
width: 8px;
|
||||
}
|
||||
}
|
||||
input[type="radio"] {
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
outline: none !important;
|
||||
&:disabled+label {
|
||||
opacity: 0.65;
|
||||
}
|
||||
}
|
||||
input[type="radio"]:focus+label {
|
||||
&::before {
|
||||
outline-offset: -2px;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline: thin dotted;
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
input[type="radio"]:checked+label {
|
||||
&::after {
|
||||
-ms-transform: scale(1, 1);
|
||||
-o-transform: scale(1, 1);
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
input[type="radio"]:checked + label::before {
|
||||
border-color: $primary;
|
||||
}
|
||||
input[type="radio"]:disabled+label {
|
||||
&::before {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&.radio-primary2 {
|
||||
input[type="radio"]+label {
|
||||
&::before {
|
||||
background-color: $primary;
|
||||
}
|
||||
&::after {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
input[type="radio"]:checked+label {
|
||||
&::before {
|
||||
border-color: $primary;
|
||||
}
|
||||
&::after {
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.radio-secondary2 {
|
||||
input[type="radio"]+label {
|
||||
&::before {
|
||||
background-color: $secondary;
|
||||
}
|
||||
&::after {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
input[type="radio"]:checked+label {
|
||||
&::before {
|
||||
border-color: $secondary;
|
||||
}
|
||||
&::after {
|
||||
border-color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.radio-success2 {
|
||||
input[type="radio"]+label {
|
||||
&::before {
|
||||
background-color: $success;
|
||||
}
|
||||
&::after {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
input[type="radio"]:checked+label {
|
||||
&::before {
|
||||
border-color: $success;
|
||||
}
|
||||
&::after {
|
||||
border-color: $success;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.radio-danger2 {
|
||||
input[type="radio"]+label {
|
||||
&::before {
|
||||
background-color: $danger;
|
||||
}
|
||||
&::after {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
input[type="radio"]:checked+label {
|
||||
&::before {
|
||||
border-color: $danger;
|
||||
}
|
||||
&::after {
|
||||
border-color: $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.radio-warning2 {
|
||||
input[type="radio"]+label {
|
||||
&::before {
|
||||
background-color: $warning;
|
||||
}
|
||||
&::after {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
input[type="radio"]:checked+label {
|
||||
&::before {
|
||||
border-color: $warning;
|
||||
}
|
||||
&::after {
|
||||
border-color: $warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.radio-info2 {
|
||||
input[type="radio"]+label {
|
||||
&::before {
|
||||
background-color: $info;
|
||||
}
|
||||
&::after {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
input[type="radio"]:checked+label {
|
||||
&::before {
|
||||
border-color: $info;
|
||||
}
|
||||
&::after {
|
||||
border-color: $info;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.radio-dark2 {
|
||||
input[type="radio"]+label {
|
||||
&::before {
|
||||
background-color: $dark;
|
||||
}
|
||||
&::after {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
input[type="radio"]:checked+label {
|
||||
&::before {
|
||||
border-color: $dark;
|
||||
}
|
||||
&::after {
|
||||
border-color: $dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.radio-purple2 {
|
||||
input[type="radio"]+label {
|
||||
&::before {
|
||||
background-color: $purple;
|
||||
}
|
||||
&::after {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
input[type="radio"]:checked+label {
|
||||
&::before {
|
||||
border-color: $purple;
|
||||
}
|
||||
&::after {
|
||||
border-color: $purple;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.radio-pink2 {
|
||||
input[type="radio"]+label {
|
||||
&::before {
|
||||
background-color: $pink;
|
||||
}
|
||||
&::after {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
input[type="radio"]:checked+label {
|
||||
&::before {
|
||||
border-color: $pink;
|
||||
}
|
||||
&::after {
|
||||
border-color: $pink;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
//
|
||||
// CRM
|
||||
//
|
||||
|
||||
|
||||
.crm-dash-map{
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.crm-dash-activity{
|
||||
min-height: 425px;
|
||||
}
|
||||
.dash-data-card,
|
||||
.crm-data-card{
|
||||
.icon-info {
|
||||
i {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
font-size: 26px;
|
||||
z-index: 5;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
h3{
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.welcome-img{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.flot-chart {
|
||||
height: 300px;
|
||||
}
|
||||
@@ -0,0 +1,535 @@
|
||||
//
|
||||
// Ecommerce
|
||||
//
|
||||
|
||||
// Dashboard
|
||||
|
||||
.dashboard-map {
|
||||
height: 270px;
|
||||
}
|
||||
.renenue-chart{
|
||||
position: relative;
|
||||
height: 350px;
|
||||
}
|
||||
.card-eco{
|
||||
.card-eco-title{
|
||||
border: 2px solid $white;
|
||||
border-radius: 8px;
|
||||
padding: 2px 8px;
|
||||
position: relative;
|
||||
top: -30px;
|
||||
&.eco-title-success{
|
||||
background-color: $success;
|
||||
color: $white;
|
||||
box-shadow: 0px 0px 0px 1px $success
|
||||
}
|
||||
&.eco-title-danger{
|
||||
background-color: $danger;
|
||||
color: $white;
|
||||
box-shadow: 0px 0px 0px 1px $danger
|
||||
}
|
||||
&.eco-title-secondary{
|
||||
background-color: $secondary;
|
||||
color: $white;
|
||||
box-shadow: 0px 0px 0px 1px $secondary
|
||||
}
|
||||
&.eco-title-purple{
|
||||
background-color: $purple;
|
||||
color: $white;
|
||||
box-shadow: 0px 0px 0px 1px $purple
|
||||
}
|
||||
&.eco-title-warning{
|
||||
background-color: $warning;
|
||||
color: $white;
|
||||
box-shadow: 0px 0px 0px 1px $warning
|
||||
}
|
||||
}
|
||||
.bg-pattern{
|
||||
position: absolute;
|
||||
background-image: url('../images/1.png');
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0.3;
|
||||
z-index: 0;
|
||||
width: 140px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.card-eco-icon{
|
||||
font-size: 40px;
|
||||
color: $gray-500;
|
||||
|
||||
&.bg-icon-purple{
|
||||
background-color: $purple;
|
||||
box-shadow: 0px 5px 5px 0.25px rgba($purple, 0.5);
|
||||
}
|
||||
&.bg-icon-pink{
|
||||
background-color: $pink;
|
||||
box-shadow: 0px 5px 5px 0.25px rgba($pink, 0.5);
|
||||
}
|
||||
&.bg-icon-secondary{
|
||||
background-color: $secondary;
|
||||
box-shadow: 0px 5px 5px 0.25px rgba($secondary, 0.5);
|
||||
}
|
||||
&.bg-icon-warning{
|
||||
background-color: $warning;
|
||||
box-shadow: 0px 5px 5px 0.25px rgba($warning, 0.5);
|
||||
}
|
||||
}
|
||||
h3{
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.re-customers-detail{
|
||||
h3{
|
||||
color: $gray-700;
|
||||
font-weight: 600;
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.order-list {
|
||||
table {
|
||||
td {
|
||||
img {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.e-co-product{
|
||||
background-color: lighten($gray-300, 4%);
|
||||
a{
|
||||
text-align: center !important;
|
||||
padding-top: 30px;
|
||||
img{
|
||||
height: 230px;
|
||||
}
|
||||
}
|
||||
.ribbon-box {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
padding-top: 30px;
|
||||
.ribbon {
|
||||
position: absolute;
|
||||
color: $white;
|
||||
}
|
||||
.ribbon-label{
|
||||
clear: none;
|
||||
padding: 0 5px;
|
||||
height: 66px;
|
||||
width: 66px;
|
||||
line-height: 66px;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 52% 48% 23% 77% / 44% 68% 32% 56%;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.product-info{
|
||||
background-color: $white;
|
||||
.product-title{
|
||||
font-size: 15px;
|
||||
color: $gray-600;
|
||||
font-weight: 500;
|
||||
}
|
||||
.product-price{
|
||||
color: $gray-700;
|
||||
font-weight: 600;
|
||||
padding: 5px 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 24px;
|
||||
span{
|
||||
color: $gray-500;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.product-review{
|
||||
li{
|
||||
margin: 0;
|
||||
i{
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wishlist,
|
||||
.quickview{
|
||||
border-radius: 50px;
|
||||
padding: 4px 10px;
|
||||
opacity: 0;
|
||||
transition: all .3s ease-out;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
.wishlist,
|
||||
.quickview{
|
||||
opacity: 1;
|
||||
}
|
||||
box-shadow: 0px 0px 13px 0px rgba($gray-200, 0.1);
|
||||
}
|
||||
}
|
||||
.offer-box{
|
||||
background-image: url('../images/products/offer.jpg');
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
.offer-content{
|
||||
padding: 30px;
|
||||
h3{
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
color: $gray-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ribbon{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
padding: 6px;
|
||||
left: -5px;
|
||||
color: $white;
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 31px;
|
||||
left: 0;
|
||||
content: "";
|
||||
border: 3px solid transparent;
|
||||
}
|
||||
&.ribbon-pink {
|
||||
background-color: $pink;
|
||||
&:before {
|
||||
border-top-color: $pink;
|
||||
border-right-color: $pink;
|
||||
}
|
||||
}
|
||||
&.ribbon-secondary {
|
||||
background-color: $secondary;
|
||||
&:before {
|
||||
border-top-color: $secondary;
|
||||
border-right-color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
hr.thick {
|
||||
border: 0;
|
||||
height: 3px;
|
||||
max-width: 150px;
|
||||
background-image: linear-gradient(to right,$primary,$purple);
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
//
|
||||
// Product Detail
|
||||
//
|
||||
|
||||
|
||||
.single-pro-detail{
|
||||
.custom-border{
|
||||
width: 60px;
|
||||
height: 2px;
|
||||
background-color: $dark;
|
||||
}
|
||||
.pro-title{
|
||||
color: $gray-700;
|
||||
font-size: 24px;
|
||||
}
|
||||
.product-review{
|
||||
li{
|
||||
margin: 0;
|
||||
i{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pro-price{
|
||||
color: $gray-700;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0;
|
||||
span{
|
||||
font-size: 14px;
|
||||
color: $gray-500;
|
||||
}
|
||||
}
|
||||
.quantity{
|
||||
input {
|
||||
width: 14%;
|
||||
display: inline-flex;
|
||||
height: calc(24px + 12px + 5px);
|
||||
}
|
||||
}
|
||||
.pro-features{
|
||||
li{
|
||||
line-height: 26px;
|
||||
color: $text-muted;
|
||||
&::before{
|
||||
content: "\f00c" !important;
|
||||
font-family: 'Font Awesome 5 Free' !important;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
color: $success !important;
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-check-inline{
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.pro-order-box{
|
||||
padding: 20px;
|
||||
border: 1px solid $gray-200;
|
||||
border-radius: 3px;
|
||||
background-color: lighten($gray-100, 5%);
|
||||
box-shadow: 0px 0px 13px 0px rgba($gray-200,0.05);
|
||||
i{
|
||||
font-size: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.review-box{
|
||||
background-color: $gray-100;
|
||||
padding: 20px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
h1{
|
||||
font-size: 48px;
|
||||
color: $danger;
|
||||
}
|
||||
.product-review{
|
||||
li{
|
||||
margin-right: 0;
|
||||
i{
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reviewer{
|
||||
padding-bottom: 12px;
|
||||
margin-top: 8px;
|
||||
border-bottom: 2px dotted $gray-200;
|
||||
.product-review{
|
||||
li{
|
||||
margin-right: 0;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Cart
|
||||
|
||||
.total-payment,
|
||||
.shopping-cart{
|
||||
.table,
|
||||
table{
|
||||
thead {
|
||||
tr {
|
||||
th{
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody{
|
||||
td{
|
||||
padding: 20px 10px;
|
||||
border-top: 0;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
.product-name{
|
||||
font-size: 14px;
|
||||
color: $gray-700;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
tr:last-child td{
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.total-payment{
|
||||
border:1px solid $gray-200;
|
||||
background-color: lighten($gray-100, 3%);
|
||||
border-radius: 3px;
|
||||
.payment-title{
|
||||
color: $gray-700;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.cart-promo{
|
||||
padding: 90px;
|
||||
background-image: url(../images/products/bg-cart.png);
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
|
||||
}
|
||||
|
||||
.jp-card .jp-card-front,
|
||||
.jp-card .jp-card-back{
|
||||
background: $dark !important;
|
||||
}
|
||||
|
||||
.balence-nav{
|
||||
.nav{
|
||||
background-color: $card-bg;
|
||||
.nav-link{
|
||||
padding: 8px;
|
||||
color: $gray-700;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 500;
|
||||
margin-right: 5px;
|
||||
width: 70px;
|
||||
height: 50px;
|
||||
&.active{
|
||||
color: $primary;
|
||||
background: lighten($gray-100, 5%);
|
||||
box-shadow: 0px 0px 13px 0px rgba($gray-500, 0.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.billing-nav{
|
||||
.nav{
|
||||
&.nav-pills{
|
||||
background-color: $card-bg;
|
||||
}
|
||||
.nav-link{
|
||||
padding: 8px;
|
||||
color: $gray-700;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 500;
|
||||
margin-right: 5px;
|
||||
width: 105px;
|
||||
height: 60px;
|
||||
&.active{
|
||||
color: $primary;
|
||||
background: lighten($gray-100, 5%);
|
||||
box-shadow: 0px 0px 13px 0px rgba($gray-500, 0.25);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightpick{
|
||||
box-shadow: none;
|
||||
font-family: $font-secondary;
|
||||
background-color: $card-bg;
|
||||
border: 1px solid $border;
|
||||
z-index: 99;
|
||||
&.lightpick--inlined{
|
||||
display: block;
|
||||
}
|
||||
.lightpick__month{
|
||||
width: 100%;
|
||||
background-color: $card-bg;
|
||||
}
|
||||
.lightpick__day{
|
||||
color: $gray-500;
|
||||
}
|
||||
.lightpick__previous-action,
|
||||
.lightpick__next-action,
|
||||
.lightpick__close-action{
|
||||
background-color: $gray-200;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
.lightpick__month-title-bar{
|
||||
margin-bottom: 22px;
|
||||
.lightpick__month-title > .lightpick__select-months{
|
||||
color: $gray-700;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.lightpick__day-of-the-week{
|
||||
color: $gray-700;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
}
|
||||
.lightpick__day.is-start-date,
|
||||
.lightpick__day.is-end-date,
|
||||
.lightpick__day.is-start-date:hover,
|
||||
.lightpick__day.is-end-date:hover,
|
||||
.lightpick__day:not(.is-disabled):hover,
|
||||
.lightpick__day.is-today{
|
||||
color: $primary;
|
||||
background-color: $gray-200;
|
||||
background-image: none;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.lightpick__day.is-today{
|
||||
border: 3px solid lighten($gray-100, 2%);
|
||||
box-shadow: 0px 0px 0px 1.25px $gray-200;
|
||||
font-weight: 600;
|
||||
}
|
||||
.lightpick__month-title > .lightpick__select{
|
||||
color: $gray-700;
|
||||
}
|
||||
.lightpick__toolbar{
|
||||
.lightpick__previous-action,
|
||||
.lightpick__next-action{
|
||||
color: $gray-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.transaction-history{
|
||||
li{
|
||||
border-bottom: 1px solid $gray-200;
|
||||
padding: 12px 0;
|
||||
}
|
||||
li:last-of-type{
|
||||
border: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.transaction-icon{
|
||||
align-self: center;
|
||||
margin-right: 12px;
|
||||
i{
|
||||
font-size: 20px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: inline-block;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
background-color: rgba($primary,0.15);
|
||||
color: $primary;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.transaction-data{
|
||||
h3{
|
||||
font-size: 14px;
|
||||
color: $gray-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,223 @@
|
||||
//
|
||||
// Email
|
||||
//
|
||||
|
||||
.email-leftbar {
|
||||
width: 220px;
|
||||
float: left;
|
||||
.mail-list {
|
||||
a {
|
||||
display: block;
|
||||
color: $gray-700;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
padding: 5px;
|
||||
}
|
||||
a:hover,
|
||||
a.active {
|
||||
color: $primary;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.chat-user-box {
|
||||
p.user-title {
|
||||
font-size: 13px;
|
||||
color: $dark;
|
||||
font-weight: 500;
|
||||
}
|
||||
p {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.email-rightbar {
|
||||
margin-left: 240px;
|
||||
}
|
||||
|
||||
.message-list {
|
||||
display: block;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
transition-duration: .3s;
|
||||
|
||||
a{
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $gray-200;
|
||||
transition-duration: .05s;
|
||||
}
|
||||
|
||||
.col-mail {
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.col-mail-1 {
|
||||
width: 320px;
|
||||
|
||||
.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 10px 0 20px;
|
||||
}
|
||||
|
||||
.star-toggle {
|
||||
margin-top: 18px;
|
||||
font-size: 16px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 110px;
|
||||
right: 0;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin: 14px 0 0;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.col-mail-2 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 320px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
.subject,
|
||||
.date {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.subject {
|
||||
left: 0;
|
||||
right: 200px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.date {
|
||||
right: 0;
|
||||
width: 170px;
|
||||
padding-left: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
li.active,
|
||||
li.active:hover {
|
||||
box-shadow: inset 3px 0 0 $primary;
|
||||
}
|
||||
|
||||
li.unread {
|
||||
background-color: $gray-200;
|
||||
a{
|
||||
color: darken($dark,5%);
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-wrapper-mail {
|
||||
cursor: pointer;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
box-shadow: inset 0 0 0 1px $gray-400;
|
||||
border-radius: 1px;
|
||||
|
||||
input {
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
input:checked ~ label {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
label {
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
left: 0;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
margin-bottom: 0;
|
||||
transition-duration: .05s;
|
||||
top: 0;
|
||||
&:before {
|
||||
content: "\F12C";
|
||||
font-family: "Material Design Icons";
|
||||
top: 0;
|
||||
height: 20px;
|
||||
color: darken($dark,5%);
|
||||
width: 20px;
|
||||
position: absolute;
|
||||
margin-top: -16px;
|
||||
left: 4px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.email-leftbar {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
.email-rightbar {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.note-editor{
|
||||
&.note-frame {
|
||||
border: 1px solid $border_2;
|
||||
.note-editing-area {
|
||||
.note-editable {
|
||||
padding: 10px;
|
||||
overflow: auto;
|
||||
color: $gray-700;
|
||||
background-color: $card-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.note-editor.note-frame .note-statusbar .note-resizebar{
|
||||
background-color: $body-bg;
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
//
|
||||
// Files
|
||||
//
|
||||
|
||||
.files-nav{
|
||||
.nav{
|
||||
.nav-link{
|
||||
padding: 10px;
|
||||
color: $gray-700;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
span{
|
||||
font-size: 22px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
&.active{
|
||||
background-color: rgba($primary,0.05);
|
||||
color: $white;
|
||||
h5{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-box-content{
|
||||
margin-bottom: -16px;
|
||||
.file-box{
|
||||
border: 1px solid $gray-200;
|
||||
border-radius: 5px;
|
||||
padding: 20px;
|
||||
width: 160px;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 16px;
|
||||
background-color: $card-bg;
|
||||
.download-icon-link{
|
||||
color: $text-muted;
|
||||
.file-download-icon{
|
||||
font-size: 13px;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
left: 110px;
|
||||
}
|
||||
&:hover{
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
i{
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.file-category{
|
||||
width: 100%;
|
||||
.file-category-block{
|
||||
text-align: center;
|
||||
margin-right: 20px;
|
||||
.file-category-folder{
|
||||
border-bottom:2px solid transparent;
|
||||
padding: 10px 20px !important;
|
||||
border-radius: 18px;
|
||||
&.active{
|
||||
border-bottom:2px solid;
|
||||
}
|
||||
i{
|
||||
display: block;
|
||||
font-size: 38px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.category-icon{
|
||||
i{
|
||||
font-size: 200px;
|
||||
color: $gray-100;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
//
|
||||
// Gallery
|
||||
//
|
||||
|
||||
|
||||
.container-filter {
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
margin-bottom: 30px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
li {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
a {
|
||||
display: block;
|
||||
color: $primary !important;
|
||||
border: 1px solid $primary;
|
||||
padding: 0px 15px;
|
||||
margin: 5px 5px;
|
||||
font-size: 12px;
|
||||
text-transform: capitalize;
|
||||
letter-spacing: 2px;
|
||||
cursor: pointer;
|
||||
line-height: 35px;
|
||||
border-radius: 3px;
|
||||
&.active {
|
||||
background: linear-gradient(14deg, $primary 0%, rgba($primary, 0.6));
|
||||
color: $white !important;
|
||||
box-shadow: 0 7px 14px 0 rgba($primary, 0.5);
|
||||
border: none;
|
||||
}
|
||||
&:hover {
|
||||
background: linear-gradient(14deg, $primary 0%, rgba($primary, 0.6))!important;
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.item-box {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
a {
|
||||
display: inline-block;
|
||||
}
|
||||
&:hover {
|
||||
.item-mask {
|
||||
opacity: 0.8;
|
||||
visibility: visible;
|
||||
.item-caption {
|
||||
bottom: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.item-container {
|
||||
transform: scale(1.1);
|
||||
transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.item-container {
|
||||
transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-webkit-transform: scale(1);
|
||||
width: 100%;
|
||||
transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
|
||||
-moz-transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
|
||||
-webkit-transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
|
||||
-o-transition: all 2s cubic-bezier(0.23, 1, 0.32, 1) 0s;
|
||||
}
|
||||
|
||||
.item-mask {
|
||||
/* background: none repeat scroll 0 0 rgba(238, 25, 66, 0.61); */
|
||||
position: absolute;
|
||||
transition: all 0.5s ease-in-out 0s;
|
||||
-moz-transition: all 0.5s ease-in-out 0s;
|
||||
-webkit-transition: all 0.5s ease-in-out 0s;
|
||||
-o-transition: all 0.5s ease-in-out 0s;
|
||||
top: 0;
|
||||
left: 0px;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-radial-gradient(closest-side at 25px 35px, $primary 15%, $dark 40%);
|
||||
p {
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
letter-spacing: 1.5px;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
}
|
||||
.item-caption {
|
||||
position: absolute;
|
||||
bottom: -60px;
|
||||
left: 0px;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
text-align: left;
|
||||
transition: all 0.5s ease-in-out 0s;
|
||||
-moz-transition: all 0.5s ease-in-out 0s;
|
||||
-webkit-transition: all 0.5s ease-in-out 0s;
|
||||
-o-transition: all 0.5s ease-in-out 0s;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.row.container-grid {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,247 @@
|
||||
//
|
||||
// General
|
||||
|
||||
|
||||
.slimScrollDiv {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.icon-dual {
|
||||
color: $primary;
|
||||
fill: rgba($primary,.12);
|
||||
}
|
||||
|
||||
|
||||
// Thumb sizes+
|
||||
.thumb-xxs {
|
||||
height: 24px !important;
|
||||
width: 24px !important;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.thumb-xs {
|
||||
height: 32px !important;
|
||||
width: 32px !important;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.thumb-sm {
|
||||
height: 36px !important;
|
||||
width: 36px !important;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.thumb-md {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.thumb-lg {
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.thumb-xl {
|
||||
height: 78px;
|
||||
width: 78px;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.badge{
|
||||
line-height: 10px;
|
||||
}
|
||||
|
||||
/* Page titles */
|
||||
|
||||
.title-text,
|
||||
.header-title {
|
||||
margin-bottom: 8px;
|
||||
text-transform: capitalize;
|
||||
letter-spacing: 0.02em;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
margin-top: 0;
|
||||
color: $header-title;
|
||||
text-shadow: 0 0 1px rgba($gray-200, 0.1);
|
||||
font-family: $font-secondary;
|
||||
}
|
||||
.page-title-box {
|
||||
padding: 25px 0;
|
||||
.page-title {
|
||||
font-size: 18px;
|
||||
margin: 0;
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
font-size: 13px;
|
||||
margin-bottom: 0;
|
||||
padding: 2px 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.dash-info-carousel{
|
||||
.carousel-item{
|
||||
h2{
|
||||
font-weight: 500;
|
||||
color: $gray-700;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.carousel-control-prev,
|
||||
.carousel-control-next{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: $gray-100;
|
||||
border-radius:50%;
|
||||
opacity: 1;
|
||||
&:hover {
|
||||
opacity: .9;
|
||||
}
|
||||
}
|
||||
.carousel-control-prev {
|
||||
left: auto;
|
||||
right: 38px;
|
||||
top:0;
|
||||
.carousel-control-prev-icon {
|
||||
background-image: none;
|
||||
}
|
||||
&:after {
|
||||
content: '\55';
|
||||
font-family: "dripicons-v2" !important;
|
||||
font-size: .875rem;
|
||||
color: $gray-700;
|
||||
line-height: 1.875rem;
|
||||
margin-right: 0.48rem;
|
||||
}
|
||||
}
|
||||
.carousel-control-next {
|
||||
left: auto;
|
||||
right: 0;
|
||||
top:0;
|
||||
.carousel-control-next-icon {
|
||||
background-image: none;
|
||||
}
|
||||
&:after {
|
||||
content: '\56';
|
||||
font-family: "dripicons-v2" !important;
|
||||
font-size: .875rem;
|
||||
color: $gray-700;
|
||||
line-height: 1.875rem;
|
||||
margin-right: 0.48rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Prism
|
||||
:not(pre) > code[class*="language-"], pre[class*="language-"] {
|
||||
background: $light;
|
||||
}
|
||||
|
||||
// Popover
|
||||
.popover{
|
||||
border-color: $gray-300;
|
||||
.popover-header{
|
||||
margin-top: 0;
|
||||
background-color: $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.nav-pills .nav-item.show .nav-link,
|
||||
.nav-pills .nav-link.active {
|
||||
background: linear-gradient(14deg, $primary 0%, rgba($primary, .6));
|
||||
color: $white;
|
||||
box-shadow: 0 7px 14px 0 rgba($primary,.5);
|
||||
}
|
||||
.eco-revene-history{
|
||||
.nav{
|
||||
.nav-item{
|
||||
.nav-link.active{
|
||||
color: $dark;
|
||||
background-color: $light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .tooltip.tooltip-custom .tooltip-inner, .tooltip.tooltip-sky .tooltip-inner {
|
||||
// background: $tooltip-custom;
|
||||
// color: $gray-600;
|
||||
// }
|
||||
|
||||
// .tooltip.tooltip-custom.bs-tooltip-top .arrow::before,
|
||||
// .tooltip.tooltip-sky.bs-tooltip-top .arrow::before {
|
||||
// border-top-color: $light;
|
||||
// }
|
||||
|
||||
|
||||
.accordion>.card>.card-header{
|
||||
background-color: lighten($gray-100, 5%);
|
||||
}
|
||||
.custom-accordion{
|
||||
background-color: $primary !important;
|
||||
a:first-child{
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.icon-demo-content {
|
||||
text-align: center;
|
||||
|
||||
i{
|
||||
display: block;
|
||||
font-size: 30px;
|
||||
margin: 0 auto 5px;
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
.col-sm-6 {
|
||||
margin-bottom: 40px;
|
||||
|
||||
&:hover {
|
||||
i {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
path:nth-of-type(1) {
|
||||
fill:$primary;
|
||||
}
|
||||
path:nth-of-type(2) {
|
||||
fill:$text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.br-theme-bars-square .br-widget a{
|
||||
background-color: $card-bg;
|
||||
}
|
||||
.br-theme-fontawesome-stars-o .br-widget a:after,
|
||||
.br-theme-css-stars .br-widget a:after,
|
||||
.br-theme-fontawesome-stars .br-widget a:after{
|
||||
color: $gray-300;
|
||||
}
|
||||
|
||||
|
||||
code[class*="language-"], pre[class*="language-"]{
|
||||
text-shadow: none;
|
||||
color: $gray-700;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css
|
||||
.token.string,
|
||||
.style .token.string{
|
||||
color: $success;
|
||||
background: rgba($gray-500,.5);
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
//
|
||||
// helpdesk
|
||||
//
|
||||
|
||||
.happiness-score{
|
||||
position: absolute;
|
||||
bottom: 63%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.help-activity-height{
|
||||
height: 400px !important;
|
||||
}
|
||||
.timer-data{
|
||||
.icon-info {
|
||||
i {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
font-size: 26px;
|
||||
z-index: 5;
|
||||
}
|
||||
}
|
||||
h3{
|
||||
font-weight: 600;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
//
|
||||
// Invoice
|
||||
//
|
||||
|
||||
|
||||
|
||||
.invoice-head{
|
||||
border-bottom: 4px double $gray-400;
|
||||
.logo-lg.logo-light{
|
||||
display: none;
|
||||
}
|
||||
.contact-detail{
|
||||
li{
|
||||
border-left: 2px solid $gray-400;
|
||||
i{
|
||||
font-size: 24px;
|
||||
color: $info;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
//
|
||||
// Pricing
|
||||
//
|
||||
|
||||
|
||||
.pricingTable1{
|
||||
.title1{
|
||||
font-weight: 700;
|
||||
color: $gray-700;
|
||||
font-size: 20px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.amount{
|
||||
display: block;
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: $gray-700;
|
||||
}
|
||||
.pricing-content-2{
|
||||
margin: 0 0 30px 0;
|
||||
border-bottom:1px solid $gray-200;
|
||||
}
|
||||
.pricingTable-signup:hover{
|
||||
background: linear-gradient(14deg, rgba($primary, 0.6) 0%, $primary);
|
||||
box-shadow: 0 1px 2px 0 rgba($gray-400, 0.5);
|
||||
color: $white;
|
||||
}
|
||||
.pricing-content-2 li{
|
||||
color: $gray-700;
|
||||
line-height: 40px;
|
||||
&::before{
|
||||
content: "\f00c" !important;
|
||||
font-family: 'Font Awesome 5 Free' !important;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
background-color: rgba($secondary, 0.1);
|
||||
color: $secondary !important;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.pricingTable-signup{
|
||||
display: block;
|
||||
padding: 14px 26px;
|
||||
background: linear-gradient(14deg, $primary 0%, rgba($primary, 0.6));
|
||||
border-radius: 52px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: $white;
|
||||
letter-spacing: 0.32px;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
transition: all 300ms linear 0ms;
|
||||
box-shadow: 0 7px 14px 0 rgba($primary, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.pricingTable1 .a-animate-blink {
|
||||
-webkit-animation: a-animate-blink 1s step-start 0s infinite;
|
||||
-moz-animation: a-animate-blink 1s step-start 0s infinite;
|
||||
-ms-animation: a-animate-blink 1s step-start 0s infinite;
|
||||
-o-animation: a-animate-blink 1s step-start 0s infinite;
|
||||
animation: a-animate-blink 1s step-start 0s infinite;
|
||||
animation-fill-mode: initial;
|
||||
}
|
||||
|
||||
@-webkit-keyframes a-animate-blink {
|
||||
50% {
|
||||
opacity: 0.0;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes a-animate-blink {
|
||||
50% {
|
||||
opacity: 0.0;
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes a-animate-blink {
|
||||
50% {
|
||||
opacity: 0.0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes a-animate-blink {
|
||||
50% {
|
||||
opacity: 0.0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,229 @@
|
||||
//
|
||||
// Profile
|
||||
//
|
||||
|
||||
.met-pro-bg{
|
||||
background-image: url('../images/pattern2.png');
|
||||
background-repeat: repeat;
|
||||
}
|
||||
.met-profile {
|
||||
.met-profile-main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
.met-profile-main-pic {
|
||||
position: relative;
|
||||
max-width: 128px;
|
||||
max-height: 128px;
|
||||
margin-right: 24px;
|
||||
|
||||
.fro-profile_main-pic-change {
|
||||
cursor: pointer;
|
||||
background-color: $primary;
|
||||
border-radius: 50%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
right: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 1;
|
||||
box-shadow: 0px 0px 20px 0px rgba($gray-100,0.05);
|
||||
i{
|
||||
transition: all 0.3s;
|
||||
color: $white;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.met-profile_user-detail{
|
||||
.met-user-name{
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: $white;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.met-user-name-post{
|
||||
color: $text-muted;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.personal-detail{
|
||||
li{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.education-activity{
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.met-basic-detail{
|
||||
h3{
|
||||
font-size: 34px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
p{
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.own-detail{
|
||||
padding: 20px;
|
||||
width: 145px;
|
||||
height: 145px;
|
||||
text-align: center;
|
||||
border-radius: 52% 48% 23% 77% / 44% 68% 32% 56%;
|
||||
box-shadow: 0px 0px 3px 1.25px $gray-300;
|
||||
h1{
|
||||
font-weight: 600;
|
||||
color: $white;
|
||||
margin-top: 0;
|
||||
}
|
||||
h5{
|
||||
color: darken($white, 5%);
|
||||
}
|
||||
&.own-detail-project{
|
||||
position: absolute;
|
||||
top: 110px;
|
||||
left: -60px;
|
||||
}
|
||||
&.own-detail-happy{
|
||||
position: absolute;
|
||||
top: 110px;
|
||||
left: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px){
|
||||
.own-detail{
|
||||
display: none;
|
||||
}
|
||||
#settings_detail .dropify-wrapper{
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
#settings_detail {
|
||||
.dropify-wrapper{
|
||||
width: 16%;
|
||||
height: 164px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-nav{
|
||||
.nav{
|
||||
.nav-link{
|
||||
padding: 10px;
|
||||
color: $gray-700;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 500;
|
||||
&.active{
|
||||
background-color: rgba($primary,0.05);
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
.profile-socials {
|
||||
a {
|
||||
i {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pro-title{
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $gray-700;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.socials-data{
|
||||
h3{
|
||||
color: $gray-700;
|
||||
font-family: $font-primary;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.action-btn{
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* section skills */
|
||||
.skill-detail{
|
||||
color: $text-muted;
|
||||
font-family: $font-secondary;
|
||||
font-size: 14px;
|
||||
}
|
||||
.skills {
|
||||
.skill-box {
|
||||
margin-bottom: 30px;
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.skill-title {
|
||||
margin-bottom: 10px;
|
||||
color: $gray-700;
|
||||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.progress-line {
|
||||
background: $gray-100;
|
||||
height: 7px;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
border: 2px solid $card-bg;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0px 0px 1px 0.25px $primary;
|
||||
|
||||
}
|
||||
.progress-line > span {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
background: $primary;
|
||||
}
|
||||
.progress-line > span > .percent-tooltip {
|
||||
position: absolute;
|
||||
right: -15px;
|
||||
top: -30px;
|
||||
margin-bottom: 10px;
|
||||
color: $gray-700;
|
||||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile-activity-height{
|
||||
height: 440px !important;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,387 @@
|
||||
//
|
||||
// Project
|
||||
//
|
||||
|
||||
|
||||
//Dashboard
|
||||
|
||||
|
||||
.project-dash-activity{
|
||||
min-height: 535px;
|
||||
}
|
||||
|
||||
.project-budget-chart {
|
||||
height: 273px;
|
||||
}
|
||||
|
||||
.weather-btn-icon i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
border-radius: 50%;
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
display: inline-block;
|
||||
margin: 0 -4px 0 14px;
|
||||
}
|
||||
|
||||
.icon-info{
|
||||
i{
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
font-size: 26px;
|
||||
z-index: 5;
|
||||
}
|
||||
}
|
||||
|
||||
.dash-info-carousel{
|
||||
.carousel-item{
|
||||
h2{
|
||||
font-weight: 500;
|
||||
color: $gray-700;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.carousel-control-prev,
|
||||
.carousel-control-next{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: $gray-100;
|
||||
border-radius:50%;
|
||||
opacity: 1;
|
||||
&:hover {
|
||||
opacity: .9;
|
||||
}
|
||||
}
|
||||
.carousel-control-prev {
|
||||
left: auto;
|
||||
right: 38px;
|
||||
top:0;
|
||||
.carousel-control-prev-icon {
|
||||
background-image: none;
|
||||
}
|
||||
&:after {
|
||||
content: '\55';
|
||||
font-family: "dripicons-v2" !important;
|
||||
font-size: .875rem;
|
||||
color: $gray-700;
|
||||
line-height: 1.875rem;
|
||||
margin-right: 0.48rem;
|
||||
}
|
||||
}
|
||||
.carousel-control-next {
|
||||
left: auto;
|
||||
right: 0;
|
||||
top:0;
|
||||
.carousel-control-next-icon {
|
||||
background-image: none;
|
||||
}
|
||||
&:after {
|
||||
content: '\56';
|
||||
font-family: "dripicons-v2" !important;
|
||||
font-size: .875rem;
|
||||
color: $gray-700;
|
||||
line-height: 1.875rem;
|
||||
margin-right: 0.48rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.c-progress-steps {
|
||||
margin: 0;
|
||||
list-style-type: none;
|
||||
font-family: $font-primary;
|
||||
li {
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
color: $gray-400;
|
||||
padding: 16px 0 0 36px;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
&.done {
|
||||
color: $info;
|
||||
span{
|
||||
background-color: rgba($info, .09);
|
||||
}
|
||||
&:before {
|
||||
color: $info;
|
||||
content: "\f058";
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
border: 2px solid $info;
|
||||
}
|
||||
}
|
||||
&.current {
|
||||
color: $primary;
|
||||
font-weight: 500;
|
||||
|
||||
&:before {
|
||||
color: $primary;
|
||||
content: "\f192";
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
border: 2px solid $primary;
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
font-family: 'Font Awesome 5 Free' !important;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
background-color: $white;
|
||||
content: "\f111";
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
border: 2px solid $gray-300;
|
||||
|
||||
@media all and (max-width: 600px) {
|
||||
top: calc(50% - 8px);
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 600px) {
|
||||
display: table;
|
||||
list-style-type: none;
|
||||
margin: 20px auto;
|
||||
padding: 0;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
|
||||
li {
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
padding-bottom: 34px;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
border-left-width: 0;
|
||||
border-bottom-width: 4px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: $gray-300;
|
||||
&.done {
|
||||
border-bottom-color: $info;
|
||||
}
|
||||
&.current {
|
||||
color: $white;
|
||||
border-bottom-color: $primary;
|
||||
span{
|
||||
background: linear-gradient(14deg, $primary 0%, rgba($primary, .6));
|
||||
box-shadow: 0 7px 14px 0 rgba($primary,.5);
|
||||
}
|
||||
&:before {
|
||||
color: $primary;
|
||||
content: "\f192";
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
bottom: -15px;
|
||||
left: 50%;
|
||||
margin-left: -16px;
|
||||
}
|
||||
span{
|
||||
background-color: rgba($info, .1);
|
||||
border-radius: 3px;
|
||||
padding: 6px;
|
||||
box-shadow: 0px 0px 5px 0.25px lighten($gray-300, 6%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.workload-chart{
|
||||
height: 210px;
|
||||
}
|
||||
|
||||
|
||||
/*== todo list ==*/
|
||||
|
||||
.todo-list{
|
||||
height: 200px !important;
|
||||
.todo-box{
|
||||
i{
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
z-index: 10;
|
||||
font-size: 16px;
|
||||
margin-top: 6px;
|
||||
color: $gray-400;
|
||||
}
|
||||
.todo-task{
|
||||
padding: 4px 0;
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
.ckbox {
|
||||
font-weight: normal;
|
||||
position: relative;
|
||||
display: block;
|
||||
line-height: 25px;
|
||||
|
||||
span {
|
||||
padding-left: 16px;
|
||||
color: $table-color;
|
||||
&:before {
|
||||
content: '';
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: transparent;
|
||||
border: 2px solid $gray-300;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
}
|
||||
&:after {
|
||||
top: 1px;
|
||||
left: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
content: "\F12C";
|
||||
font: normal normal normal 24px/1 "Material Design Icons";
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: $gray-600;
|
||||
background-color: transparent;
|
||||
line-height: 20px;
|
||||
display: none;
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
input[type='checkbox'] {
|
||||
opacity: 0;
|
||||
margin: 0 5px 0 0;
|
||||
}
|
||||
input[type='checkbox']:checked + span:after {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
input:checked + span {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-control{
|
||||
color: $dark;
|
||||
background: $gray-300;
|
||||
border: 1px solid transparent;
|
||||
&:focus {
|
||||
border-color: transparent;
|
||||
background: $gray-300;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Clients
|
||||
|
||||
.client-card{
|
||||
.client-name{
|
||||
color: $gray-700;
|
||||
}
|
||||
}
|
||||
|
||||
// Calendar
|
||||
|
||||
.calendar-event{
|
||||
.event-name{
|
||||
h3{
|
||||
font-size: 14px;
|
||||
color: $gray-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Invoie
|
||||
|
||||
.project-invoice{
|
||||
.table{
|
||||
tr{
|
||||
td{
|
||||
h5{
|
||||
color: $gray-700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Team
|
||||
|
||||
.team-card {
|
||||
.user-img{
|
||||
height: 80px;
|
||||
}
|
||||
.online-circle {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 118px;
|
||||
left: 44px;
|
||||
}
|
||||
.team-leader{
|
||||
font-size: 16px;
|
||||
color: $gray-700;
|
||||
}
|
||||
}
|
||||
|
||||
.language-skill li {
|
||||
span{
|
||||
margin-bottom: 5px;
|
||||
border-radius: 5px;
|
||||
padding: 4px 8px;
|
||||
background-color: $gray-200;
|
||||
color: $dark;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
// Projects-card
|
||||
|
||||
.project-card{
|
||||
font-family: $font-secondary;
|
||||
.project-title{
|
||||
font-size: 20px;
|
||||
color: $gray-700;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
// Task Box
|
||||
|
||||
.task-box{
|
||||
.task-priority-icon{
|
||||
i{
|
||||
border: 5px solid $body-bg;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// bar chart shadow
|
||||
|
||||
.drop-shadow-bar{
|
||||
filter: drop-shadow(6px 6px 8px rgba($gray-400, 0.65));
|
||||
}
|
||||
@@ -0,0 +1,272 @@
|
||||
//
|
||||
// Timeline
|
||||
//
|
||||
.activity-scroll{
|
||||
min-height: 620px;
|
||||
}
|
||||
|
||||
.activity-height{
|
||||
height: 400px !important;
|
||||
}
|
||||
|
||||
.activity{
|
||||
.activity-info {
|
||||
display: flex;
|
||||
margin:5px 0;
|
||||
position: relative;
|
||||
min-height: 70px;
|
||||
&::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
top: 48px;
|
||||
left: 20px;
|
||||
border-left: 2px dotted $gray-300;
|
||||
}
|
||||
.icon-info-activity i{
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
color: $text-muted;
|
||||
box-shadow: 0px 0px 2px 0.25px;
|
||||
font-size: 22px;
|
||||
border: 2px solid lighten($gray-100, 10%);
|
||||
margin-left: 2px;
|
||||
}
|
||||
.activity-info-text {
|
||||
margin-left: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ==============
|
||||
Timeline
|
||||
===================*/
|
||||
|
||||
|
||||
.main-timeline{
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.main-timeline:before{
|
||||
content: "";
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
background: $light;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
}
|
||||
.main-timeline .timeline{
|
||||
padding-right: 30px;
|
||||
position: relative;
|
||||
}
|
||||
.main-timeline .timeline:before,
|
||||
.main-timeline .timeline:after{
|
||||
content: "";
|
||||
display: block;
|
||||
width: 100%;
|
||||
clear: both;
|
||||
}
|
||||
.main-timeline .timeline:first-child:before,
|
||||
.main-timeline .timeline:last-child:before{
|
||||
content: "";
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid $light;
|
||||
background: $card-bg;
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: -3px;
|
||||
}
|
||||
.main-timeline .timeline:last-child:before{
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
.main-timeline .timeline-icon{
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background: $card-bg;
|
||||
border: 2px solid $light;
|
||||
box-sizing: content-box;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: -4px;
|
||||
}
|
||||
.main-timeline .timeline-icon:before{
|
||||
content: "";
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: $secondary;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
.main-timeline .year{
|
||||
display: inline-block;
|
||||
padding: 8px 20px;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: $white;
|
||||
background: $secondary;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 35%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.main-timeline .year:before{
|
||||
content: "";
|
||||
border-right: 18px solid $secondary;
|
||||
border-top: 18px solid transparent;
|
||||
border-bottom: 18px solid transparent;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -18px;
|
||||
}
|
||||
.main-timeline .timeline-content{
|
||||
width: 46.5%;
|
||||
padding: 20px;
|
||||
margin: 0 20px 0 0;
|
||||
background: $light;
|
||||
position: relative;
|
||||
}
|
||||
.main-timeline .timeline-content:after{
|
||||
content: "";
|
||||
border-left: 20px solid $light;
|
||||
border-top: 20px solid transparent;
|
||||
border-bottom: 20px solid transparent;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -20px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.main-timeline .title{
|
||||
float: left;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: $gray-800;
|
||||
margin: 0 20px 20px 0;
|
||||
}
|
||||
.main-timeline .post{
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
color: $gray-700;
|
||||
}
|
||||
.main-timeline .description{
|
||||
font-size: 14px;
|
||||
color: $gray-700;
|
||||
line-height: 24px;
|
||||
margin: 0;
|
||||
clear: both;
|
||||
}
|
||||
.main-timeline .timeline:nth-child(2n){ padding: 0 0 0 30px; }
|
||||
.main-timeline .timeline:nth-child(2n) .year{
|
||||
right: auto;
|
||||
left: 35%;
|
||||
}
|
||||
.main-timeline .timeline:nth-child(2n) .year:before{
|
||||
border: 18px solid transparent;
|
||||
border-right: none;
|
||||
border-left: 18px solid $secondary;
|
||||
left: auto;
|
||||
right: -18px;
|
||||
}
|
||||
.main-timeline .timeline:nth-child(2n) .timeline-content{
|
||||
float: right;
|
||||
margin: 0 0 0 20px;
|
||||
}
|
||||
.main-timeline .timeline:nth-child(2n) .timeline-content:after{
|
||||
border-left: none;
|
||||
border-right: 20px solid $light;
|
||||
right: auto;
|
||||
left: -20px;
|
||||
}
|
||||
@media only screen and (max-width: 1200px){
|
||||
.main-timeline .year{ right: 30%; }
|
||||
.main-timeline .timeline:nth-child(2n) .year{ left: 30%; }
|
||||
}
|
||||
@media only screen and (max-width: 990px){
|
||||
.main-timeline .year{ right: 25%; }
|
||||
.main-timeline .timeline:nth-child(2n) .year{ left: 25%; }
|
||||
}
|
||||
@media only screen and (max-width: 767px){
|
||||
.main-timeline:before{ left: 10px; }
|
||||
.main-timeline .timeline{
|
||||
padding: 0 0 0 30px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.main-timeline .timeline:last-child{ margin-bottom: 0; }
|
||||
.main-timeline .timeline:first-child:before,
|
||||
.main-timeline .timeline:last-child:before{ display: none; }
|
||||
.main-timeline .timeline-icon{
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 0;
|
||||
}
|
||||
.main-timeline .year,
|
||||
.main-timeline .timeline:nth-child(2n) .year{
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
margin: 0 0 32px 30px;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
right: auto;
|
||||
transform: none;
|
||||
}
|
||||
.main-timeline .timeline:nth-child(2n) .year:before{
|
||||
border-left: none;
|
||||
border-right: 18px solid $secondary;
|
||||
right: auto;
|
||||
left: -18px;
|
||||
}
|
||||
.main-timeline .timeline-content{ padding: 20px; }
|
||||
.main-timeline .timeline-content,
|
||||
.main-timeline .timeline:nth-child(2n) .timeline-content{
|
||||
width: auto;
|
||||
float: none;
|
||||
margin: 0 0 0 30px;
|
||||
}
|
||||
.main-timeline .timeline-content:after,
|
||||
.main-timeline .timeline:nth-child(2n) .timeline-content:after{
|
||||
border: none;
|
||||
border-bottom: 20px solid $light;
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
top: -20px;
|
||||
left: 50%;
|
||||
right: auto;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 480px){
|
||||
.main-timeline .title{
|
||||
float: none;
|
||||
margin: 0;
|
||||
}
|
||||
.main-timeline .year,
|
||||
.main-timeline .timeline:nth-child(2n) .year{ margin-left: 20px; }
|
||||
.main-timeline .timeline-content,
|
||||
.main-timeline .timeline:nth-child(2n) .timeline-content{ margin-left: 10px; }
|
||||
.main-timeline .post{ margin: 5px 0; }
|
||||
}
|
||||
Reference in New Issue
Block a user