first commit
This commit is contained in:
9
public/style/scss/components/_components.scss
Normal file
9
public/style/scss/components/_components.scss
Normal file
@ -0,0 +1,9 @@
|
||||
@import "./app/apps";
|
||||
@import "./charts/charts";
|
||||
@import "./forms/forms";
|
||||
@import "./map/maps";
|
||||
@import "./uc/addons";
|
||||
@import "./ui/interfaces";
|
||||
@import "./widget/widgets";
|
||||
@import "./tables/table";
|
||||
|
||||
295
public/style/scss/components/app/_app-calender-event.scss
Normal file
295
public/style/scss/components/app/_app-calender-event.scss
Normal file
@ -0,0 +1,295 @@
|
||||
/* =============
|
||||
Calendar
|
||||
============= */
|
||||
|
||||
.app-fullcalender {
|
||||
button {
|
||||
border-radius: 0px;
|
||||
color: $dark;
|
||||
}
|
||||
td{
|
||||
border-color: $border;
|
||||
}
|
||||
}
|
||||
|
||||
.calendar {
|
||||
float : left;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.fc-view {
|
||||
margin-top: 1.875rem;
|
||||
}
|
||||
|
||||
.fc-toolbar {
|
||||
margin-bottom: 0.3125rem;
|
||||
margin-top : 0.9375rem;
|
||||
|
||||
& .fc-left {
|
||||
@include media-breakpoint-down(xs) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.625rem;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
& .fc-right {
|
||||
@include media-breakpoint-down(xs) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
float: none;
|
||||
margin-bottom: 0.3125rem;
|
||||
}
|
||||
}
|
||||
|
||||
& .fc-center {
|
||||
@include media-breakpoint-down(xs) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
* {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-toolbar h2 {
|
||||
font-size : 1rem;
|
||||
font-weight : 600;
|
||||
line-height : 1.875rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
.fc-toolbar .fc-state-active,
|
||||
.fc-toolbar .ui-state-active,
|
||||
.fc-toolbar .ui-state-hover,
|
||||
.fc-toolbar button:focus,
|
||||
.fc-toolbar button:hover {
|
||||
z-index: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.fc-widget-header {
|
||||
border: 1px solid $border;
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// .fc-widget-content {
|
||||
// border: 1px solid #E5E5E5 !important;
|
||||
// }
|
||||
|
||||
.fc th.fc-widget-header {
|
||||
background : $border!important;
|
||||
font-size : 0.875rem;
|
||||
line-height : 1.25rem;
|
||||
padding : 0.625rem 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.fc-button {
|
||||
border : 1px solid $border;
|
||||
text-transform: capitalize;
|
||||
&.active{
|
||||
box-shadow: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-text-arrow {
|
||||
font-family: inherit;
|
||||
font-size : 1rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.fc-event {
|
||||
border-radius: 0.125rem;
|
||||
border : none;
|
||||
cursor : move;
|
||||
font-size : 0.8125rem;
|
||||
margin : 0.3125rem 0.4375rem;
|
||||
padding : 0.3125rem;
|
||||
text-align : center;
|
||||
}
|
||||
|
||||
.external-event {
|
||||
cursor : move;
|
||||
margin : 0.625rem 0;
|
||||
padding: 0.125rem 0;
|
||||
}
|
||||
|
||||
.fc-basic-view td.fc-week-number span {
|
||||
padding-right: 0.3125rem;
|
||||
}
|
||||
|
||||
.fc-basic-view td.fc-day-number {
|
||||
padding-right: 0.3125rem;
|
||||
}
|
||||
|
||||
#drop-remove {
|
||||
margin-right: 8px;
|
||||
top : 0.1875rem;
|
||||
}
|
||||
|
||||
#add-category,
|
||||
#event-modal {
|
||||
|
||||
.modal-dialog {
|
||||
max-width: 37.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-content {
|
||||
color: $white;
|
||||
}
|
||||
// .fc-widget-content {
|
||||
// border: 1px solid $l-border!important;
|
||||
// }
|
||||
.fc th.fc-widget-header {
|
||||
// background: $l-border!important;
|
||||
background: transparent !important;
|
||||
}
|
||||
.fc-button {
|
||||
background: $white;
|
||||
// color: $l-ctl;
|
||||
}
|
||||
.fc-state-hover {
|
||||
background: $white!important;
|
||||
}
|
||||
.fc-state-highlight {
|
||||
background: $l-bg!important;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: $white!important;
|
||||
}
|
||||
}
|
||||
.fc-cell-overlay {
|
||||
background: $white!important;
|
||||
}
|
||||
.fc-unthemed .fc-today {
|
||||
background: $l-bg!important;
|
||||
}
|
||||
|
||||
.fc-day-top{
|
||||
color: $dark !important;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: $white!important;
|
||||
}
|
||||
}
|
||||
|
||||
.external-event {
|
||||
color: $white;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: $white!important;
|
||||
}
|
||||
}
|
||||
.fc-basic-view .fc-body .fc-row {
|
||||
min-height: 1rem;
|
||||
}
|
||||
|
||||
.fc-scroller.fc-day-grid-container {
|
||||
height: 490px !important;
|
||||
}
|
||||
|
||||
.fc-row.fc-week.fc-widget-content.fc-rigid {
|
||||
height: 81px !important;
|
||||
}
|
||||
|
||||
.email_left_pane {
|
||||
@include custommq($max: 1440px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
#external-events{
|
||||
|
||||
.external-event:before{
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
margin-right: .9rem;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
[data-class="bg-primary"]{
|
||||
background-color: transparent !important;
|
||||
color: $dark;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: $white!important;
|
||||
}
|
||||
&::before{
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
[data-class="bg-success"]{
|
||||
background-color: transparent !important;
|
||||
color: $dark;
|
||||
|
||||
&::before{
|
||||
background: $success;
|
||||
}
|
||||
}
|
||||
[data-class="bg-warning"]{
|
||||
background-color: transparent !important;
|
||||
color: $dark;
|
||||
|
||||
&::before{
|
||||
background: $warning;
|
||||
}
|
||||
}
|
||||
[data-class="bg-dark"]{
|
||||
background-color: transparent !important;
|
||||
color: $dark;
|
||||
|
||||
&::before{
|
||||
background: $dark;
|
||||
}
|
||||
}
|
||||
[data-class="bg-danger"]{
|
||||
background-color: transparent !important;
|
||||
color: $dark;
|
||||
|
||||
&::before{
|
||||
background: $danger;
|
||||
}
|
||||
}
|
||||
[data-class="bg-info"]{
|
||||
background-color: transparent !important;
|
||||
color: $dark;
|
||||
|
||||
&::before{
|
||||
background: $info;
|
||||
}
|
||||
}
|
||||
[data-class="bg-pink"]{
|
||||
background-color: transparent !important;
|
||||
color: $dark;
|
||||
|
||||
&::before{
|
||||
background: $pink;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.fc .fc-row .fc-content-skeleton table,
|
||||
.fc .fc-row .fc-content-skeleton td,
|
||||
.fc .fc-row .fc-helper-skeleton td {
|
||||
border-color: $border;
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-unthemed .fc-content, .fc-unthemed .fc-divider, .fc-unthemed .fc-list-heading td, .fc-unthemed .fc-list-view, .fc-unthemed .fc-popover, .fc-unthemed .fc-row, .fc-unthemed tbody, .fc-unthemed td, .fc-unthemed th, .fc-unthemed thead {
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
6
public/style/scss/components/app/_apps.scss
Normal file
6
public/style/scss/components/app/_apps.scss
Normal file
@ -0,0 +1,6 @@
|
||||
@import "./app-calender-date";
|
||||
@import "./app-calender-event";
|
||||
@import "./email";
|
||||
// @import "./invoice";
|
||||
@import "./profile";
|
||||
@import "./chat";
|
||||
234
public/style/scss/components/app/_chat.scss
Normal file
234
public/style/scss/components/app/_chat.scss
Normal file
@ -0,0 +1,234 @@
|
||||
|
||||
.event-chat-ryt{
|
||||
|
||||
.chat-area{
|
||||
.chat-reciver,
|
||||
.chat-sender {
|
||||
margin-bottom: 1.875rem;
|
||||
padding: 0;
|
||||
img{
|
||||
border-radius: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.media {
|
||||
position: relative;
|
||||
|
||||
&-body {
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
// max-width: 60%;
|
||||
}
|
||||
|
||||
span {
|
||||
padding: 1rem;
|
||||
display: inline-block;
|
||||
top: 103%;
|
||||
position: relative;
|
||||
border: 1px solid $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-reciver{
|
||||
padding: .5rem 1rem;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
|
||||
.media {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
|
||||
.media-body {
|
||||
margin-right: 2rem;
|
||||
text-align: right;
|
||||
|
||||
@at-root [direction="rtl"] & {
|
||||
text-align: left;
|
||||
margin-left: 2rem;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
p {
|
||||
background: $white;
|
||||
margin-bottom: 0;
|
||||
border-radius: 5px 5px 0 5px;
|
||||
|
||||
span {
|
||||
text-align: left;
|
||||
border: 1px solid $border;
|
||||
|
||||
&::after{
|
||||
content: "";
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-bottom: 1px solid $border;
|
||||
border-right: 1px solid $border;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: $white;
|
||||
-webkit-transform: rotate(-45deg) translateX(15px);
|
||||
transform: rotate(-45deg) translateX(15px);
|
||||
|
||||
@at-root [direction="rtl"] & {
|
||||
left: 0;
|
||||
right: auto;
|
||||
-webkit-transform: rotate(135deg) translateY(15px);
|
||||
transform: rotate(135deg) translateY(15px);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.time {
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
color: $body-color;
|
||||
font-weight: 400;
|
||||
bottom: 0;
|
||||
left: -80px;
|
||||
|
||||
@at-root [direction="rtl"] & {
|
||||
right: -5rem;
|
||||
left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-sender{
|
||||
text-align: left;
|
||||
padding: .5rem 1rem;
|
||||
|
||||
.media {
|
||||
|
||||
.media-body {
|
||||
margin-left: 2rem;
|
||||
|
||||
@at-root [direction="rtl"] & {
|
||||
text-align: right;
|
||||
margin-right: 2rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
p {
|
||||
background-color: $white;
|
||||
margin-bottom: 0;
|
||||
span {
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-bottom: 1px solid $border;
|
||||
border-left: 1px solid $border;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: $white;
|
||||
-webkit-transform: rotate(45deg) translateX(-15px);
|
||||
transform: rotate(45deg) translateX(-15px);
|
||||
|
||||
@at-root [direction="rtl"] & {
|
||||
left: auto;
|
||||
right: 0;
|
||||
-webkit-transform: rotate(-135deg) translateY(15px);
|
||||
transform: rotate(-135deg) translateY(15px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
position: absolute;
|
||||
font-size: 10px;
|
||||
color: $body-color;
|
||||
font-weight: 400;
|
||||
bottom: 0;
|
||||
right: -5rem;
|
||||
|
||||
@at-root [direction="rtl"] & {
|
||||
left: -5rem;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.char-type{
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
|
||||
form{
|
||||
|
||||
.form-control{
|
||||
height: 45px;
|
||||
// border-radius: 30px;
|
||||
padding-left: 18px;
|
||||
background: $body-bg;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.input-group{
|
||||
|
||||
&-append{
|
||||
i{
|
||||
color: $gray;
|
||||
font-size: 18px;
|
||||
}
|
||||
.input-group-text{
|
||||
padding-left: .7rem;
|
||||
padding-right: .7rem;
|
||||
background: $body-bg;
|
||||
border-color: $border;
|
||||
border-left: 0;
|
||||
|
||||
&:last-child{
|
||||
// border-top-right-radius: 30px;
|
||||
// border-bottom-right-radius: 30px;
|
||||
padding-right: 1.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-avatar{
|
||||
padding: 25px 0;
|
||||
border-bottom: 1px solid $border;
|
||||
&:last-child{
|
||||
border-bottom: 0px;
|
||||
}
|
||||
p{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.avatar-status{
|
||||
position: relative;
|
||||
i{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
533
public/style/scss/components/app/_email.scss
Normal file
533
public/style/scss/components/app/_email.scss
Normal file
@ -0,0 +1,533 @@
|
||||
.email-left-box {
|
||||
width: 15rem;
|
||||
float: left;
|
||||
padding: 0 1.25rem 1.25rem 1rem;
|
||||
// border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
|
||||
@include media-breakpoint-between(sm, md) {
|
||||
width: 100%;
|
||||
padding-bottom: 0px !important;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
width: 100%;
|
||||
float: none;
|
||||
border: none;
|
||||
padding-bottom: 30px !important;
|
||||
}
|
||||
|
||||
// &.generic-width{
|
||||
// @media screen and (min-width: 649px) and (max-width: 1700px){
|
||||
// width: 15rem;
|
||||
// }
|
||||
// }
|
||||
|
||||
.intro-title{
|
||||
background: rgba($primary, .1);
|
||||
padding: 1rem;
|
||||
margin: 1.875rem 0 1.25rem 0;
|
||||
|
||||
h5{
|
||||
margin-bottom: 0;
|
||||
color: #6a707e;
|
||||
font-size: 14px;
|
||||
|
||||
i{
|
||||
font-size: 0.75rem;
|
||||
position: relative;
|
||||
bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
i{
|
||||
// font-size: 1.0625rem;
|
||||
color: $primary;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.email-right-box {
|
||||
// padding-top: 1.875rem;
|
||||
padding-left: 15rem;
|
||||
padding-right: 1rem;
|
||||
|
||||
@include media-breakpoint-between(sm, md) {
|
||||
padding-left: 0;
|
||||
margin-left: 0!important;
|
||||
clear:both;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
// &.generic-position{
|
||||
// padding-left: 15rem;
|
||||
|
||||
// @media(min-width: 1700px){
|
||||
// padding-left: 18.75rem;
|
||||
// }
|
||||
// }
|
||||
|
||||
.right-box-border{
|
||||
border-right: 2px solid rgba($primary, .1);
|
||||
}
|
||||
|
||||
.right-box-padding{
|
||||
|
||||
@media screen and (min-width: 649px) and (max-width: 1200px){
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
@media(min-width: 1700px){
|
||||
padding-left: 0.9375rem;
|
||||
}
|
||||
@include media-breakpoint-between(sm, md) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
.btn-group {
|
||||
.btn {
|
||||
// background: $dark;
|
||||
border: 0;
|
||||
// color: $white;
|
||||
// i {
|
||||
// color: $white!important;
|
||||
// }
|
||||
}
|
||||
input{
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.read-content {
|
||||
textarea {
|
||||
height:150px;
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
&-email{
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
h5{
|
||||
color: #6a707e;
|
||||
}
|
||||
|
||||
p{
|
||||
|
||||
strong{
|
||||
color: #6a707e;
|
||||
}
|
||||
}
|
||||
|
||||
&-body{
|
||||
|
||||
p{
|
||||
margin-bottom: 1.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-attachment{
|
||||
padding: 0.5rem 0;
|
||||
|
||||
h6{
|
||||
font-size: 1.125rem;
|
||||
color: #6a707e;
|
||||
|
||||
i{
|
||||
padding-right: 0.3125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.attachment{
|
||||
|
||||
& > div:not(:last-child){
|
||||
border-right: 1px solid #DDDFE1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.compose-content {
|
||||
.wysihtml5-toolbar {
|
||||
border-color: $l-border;
|
||||
}
|
||||
// .textarea_editor {
|
||||
// background: $l-bg!important;
|
||||
// }
|
||||
.dropzone {
|
||||
background: $l-bg!important;
|
||||
}
|
||||
|
||||
h5{
|
||||
font-size: 1.0625rem;
|
||||
color: #6a707e;
|
||||
|
||||
i{
|
||||
font-size: 1.125rem;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
.dropzone{
|
||||
border: 1px dashed #DDDFE1;
|
||||
min-height: 13.125rem;
|
||||
position: relative;
|
||||
|
||||
.dz-message{
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.email-list {
|
||||
display: block;
|
||||
padding-left: 0;
|
||||
|
||||
.message {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 3.125rem;
|
||||
line-height: 3.125rem;
|
||||
cursor: default;
|
||||
transition-duration: 0.3s;
|
||||
a {
|
||||
color: $l-ctl;
|
||||
}
|
||||
|
||||
&-single{
|
||||
.custom-checkbox{
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
i{
|
||||
color: $muted;
|
||||
font-size: 1.125rem;
|
||||
padding-left: .4rem;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
transition-duration: 0.05s;
|
||||
background: rgba(152, 166, 173, 0.15);
|
||||
}
|
||||
|
||||
.col-mail {
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.col-mail-1 {
|
||||
width: 5.625rem;
|
||||
|
||||
.star-toggle {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-top: 1.125rem;
|
||||
font-size: 1rem;
|
||||
margin-left: 0.3125rem;
|
||||
}
|
||||
|
||||
.email-checkbox {
|
||||
display: block;
|
||||
float: left;
|
||||
margin: 0.9375rem 0.625rem 0 1.25rem;
|
||||
}
|
||||
|
||||
.dot {
|
||||
display: block;
|
||||
float: left;
|
||||
border: .4rem solid transparent;
|
||||
border-radius: 6.25rem;
|
||||
margin: 1.375rem 1.625rem 0;
|
||||
height: 0;
|
||||
width: 0;
|
||||
line-height: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.col-mail-2 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 5.625rem;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
.subject {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 5.5rem;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.date {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
// width: 4rem;
|
||||
// padding-left: 5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.email-checkbox {
|
||||
cursor: pointer;
|
||||
height: 0.9375rem;
|
||||
width: 0.9375rem;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border-radius: .1rem;
|
||||
position: relative;
|
||||
top: 0.3125rem;
|
||||
box-shadow: inset 0 0 0 .1rem $l-ctl;
|
||||
|
||||
input {
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
|
||||
&:checked {
|
||||
label {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
position: absolute;
|
||||
top: .3rem;
|
||||
left: .3rem;
|
||||
right: .3rem;
|
||||
bottom: .3rem;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
margin-bottom: 0 !important;
|
||||
transition-duration: 0.05s;
|
||||
}
|
||||
}
|
||||
|
||||
.mail-list {
|
||||
|
||||
a {
|
||||
vertical-align: middle;
|
||||
padding: 0.625rem 0.9375rem;
|
||||
display: block;
|
||||
background: transparent;
|
||||
color: $l-ctd;
|
||||
// font-size: 1.0625rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.list-group-item{
|
||||
color: #6a707e;
|
||||
padding: 0.75rem 1.0625rem;
|
||||
|
||||
i{
|
||||
font-size: 1rem;
|
||||
padding-right: 0.625rem;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
&.active{
|
||||
color: $white;
|
||||
|
||||
i{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-wrap{
|
||||
padding: 1.0625rem 1.875rem;
|
||||
|
||||
.media{
|
||||
|
||||
.media-body{
|
||||
|
||||
h6{
|
||||
font-size: 1.0625rem;
|
||||
color: #6a707e;
|
||||
}
|
||||
|
||||
p{
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.email-filter{
|
||||
|
||||
@media (min-width: 648px){
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
@media(min-width: 1700px){
|
||||
padding-left: 1.875rem;
|
||||
}
|
||||
|
||||
.input-group{
|
||||
|
||||
&-prepend{
|
||||
|
||||
i{
|
||||
font-size: 0.875rem;
|
||||
color: $muted;
|
||||
}
|
||||
|
||||
.input-group-text{
|
||||
border: 0;
|
||||
border-bottom: 1px solid #DDDFE1 !important;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control{
|
||||
padding: 0 0 0 0.3125rem;
|
||||
border: 0;
|
||||
font-size: 0.875rem;
|
||||
height: 1.875rem;
|
||||
color: $muted;
|
||||
border-bottom: 1px solid #DDDFE1;
|
||||
|
||||
&::placeholder{
|
||||
font-size: 0.875rem;
|
||||
color: $muted;
|
||||
}
|
||||
}
|
||||
|
||||
& > .form-control{
|
||||
min-height: 1.875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.single-mail{
|
||||
display: block;
|
||||
padding: 1.5625rem 0;
|
||||
|
||||
.media{
|
||||
padding-left: 1.25rem;
|
||||
padding-right: 1.25rem;
|
||||
|
||||
@media(min-width: 1700px){
|
||||
padding-left: 1.875rem;
|
||||
padding-right: 1.875rem;
|
||||
}
|
||||
|
||||
img{
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
border-radius: 50%;
|
||||
margin-right: 0.9375rem;
|
||||
|
||||
@media(min-width: 1700px){
|
||||
margin-right: 1.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-body{
|
||||
|
||||
h6{
|
||||
color: #abafb3;
|
||||
}
|
||||
|
||||
h4{
|
||||
font-size: 1rem;
|
||||
color: #6a707e;
|
||||
|
||||
button{
|
||||
|
||||
i{
|
||||
font-size: 1.125rem;
|
||||
color: #abafb3;
|
||||
font-weight: bold;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p{
|
||||
font-size: 0.875rem;
|
||||
color: #abafb3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active{
|
||||
background: $primary;
|
||||
|
||||
h6,h4,p,i{
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
[direction="rtl"]{
|
||||
.email-right-box {
|
||||
padding-left: 1rem;
|
||||
padding-right: 15rem;
|
||||
@include respond('tab-port') {
|
||||
padding-left: 1rem;
|
||||
padding-right: 12rem;
|
||||
}
|
||||
@include respond('phone') {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
.email-left-box{
|
||||
float:right;
|
||||
}
|
||||
.email-list .message .col-mail-2{
|
||||
right: 5.625rem;
|
||||
left: 0;
|
||||
float: right;
|
||||
.date{
|
||||
right:auto;
|
||||
left:0;
|
||||
}
|
||||
.subject{
|
||||
right: 0;
|
||||
left: 5.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
0
public/style/scss/components/app/_invoice.scss
Normal file
0
public/style/scss/components/app/_invoice.scss
Normal file
185
public/style/scss/components/app/_profile.scss
Normal file
185
public/style/scss/components/app/_profile.scss
Normal file
@ -0,0 +1,185 @@
|
||||
.photo-content{
|
||||
position: relative;
|
||||
.cover-photo{
|
||||
background: url(../images/profile/cover.jpg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
min-height: 250px;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.profile .profile-photo {
|
||||
max-width: 100px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-top: -40px;
|
||||
margin-right: 10px;
|
||||
|
||||
@include respond('tab-land') {
|
||||
|
||||
}
|
||||
@include respond('phone') {
|
||||
width: 80px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
}
|
||||
[direction="rtl"]{
|
||||
.profile .photo-content .profile-photo {
|
||||
left: auto;
|
||||
right: 50px;
|
||||
}
|
||||
.profile .profile-photo {
|
||||
left:auto;
|
||||
right: 30px;
|
||||
@include respond('tab-land') {
|
||||
right: 15px;
|
||||
}
|
||||
@include respond('phone') {
|
||||
width: 80px;
|
||||
right: calc(50% - 40px);
|
||||
top: -100px;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.profile-info{
|
||||
padding: 15px 20px;
|
||||
// margin-bottom: 30px;
|
||||
@include respond('phone') {
|
||||
padding: 0 0 20px;
|
||||
text-align:center;
|
||||
}
|
||||
h4 {
|
||||
color: $l-ctd!important;
|
||||
}
|
||||
|
||||
h4.text-primary {
|
||||
color: $primary!important;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $l-ctl;
|
||||
}
|
||||
|
||||
.prf-col{
|
||||
min-width: 250px;
|
||||
padding: 10px 50px 0;
|
||||
}
|
||||
}
|
||||
.profile-interest{
|
||||
.row{
|
||||
margin: 0 -.70px;
|
||||
.int-col{
|
||||
padding: 0 .70px;
|
||||
.interest-cat{
|
||||
margin-bottom: 1.40px;
|
||||
position: relative;
|
||||
display: block;
|
||||
&:after{
|
||||
background: $black;
|
||||
bottom: 0;
|
||||
content: "";
|
||||
left: 0;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
img{
|
||||
// margin-bottom: 1.20px;
|
||||
}
|
||||
p{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 5px;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
z-index: 1;
|
||||
color:white;
|
||||
font-size: 1.20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.profile-tab{
|
||||
.nav-item{
|
||||
.nav-link{
|
||||
font-size: 16px;
|
||||
margin-right: 30px;
|
||||
transition: all 0.5s ease-in-out;
|
||||
border: none;
|
||||
border-bottom: .20px solid transparent;
|
||||
color: $l-ctl;
|
||||
&:hover, &.active{
|
||||
border: 0;
|
||||
background: transparent;
|
||||
background: transparent;
|
||||
border-bottom: .20px solid $primary;
|
||||
color: $primary;
|
||||
}
|
||||
@include respond ('phone'){
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.profile-info{
|
||||
display:flex;
|
||||
@include respond('phone') {
|
||||
display:block;
|
||||
}
|
||||
.profile-details {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
@include respond('phone') {
|
||||
display:block;
|
||||
.dropdown{
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-input{
|
||||
margin-bottom: 30px;
|
||||
.form-control{
|
||||
height: 75px;
|
||||
font-weight: 400;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
}
|
||||
.profile-uoloaded-post{
|
||||
|
||||
.post-title{
|
||||
h3{
|
||||
font-size: 24px;
|
||||
@include respond ('phone'){
|
||||
font-size:18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
img{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
a{
|
||||
h4{
|
||||
margin-bottom: 10px;
|
||||
color: $l-ctd;
|
||||
}
|
||||
}
|
||||
}
|
||||
207
public/style/scss/components/charts/_chart-amchart.scss
Normal file
207
public/style/scss/components/charts/_chart-amchart.scss
Normal file
@ -0,0 +1,207 @@
|
||||
#revenue-chart {
|
||||
height: 27.7rem;
|
||||
}
|
||||
|
||||
// #finance_graph, #revenue_graph {
|
||||
// height: 29.625rem;
|
||||
// }
|
||||
|
||||
#duration-value-axis {
|
||||
height: 27.6rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#combined-bullet {
|
||||
height: 28.125rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#zoomable-chart {
|
||||
height: 28.125rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#chartMap {
|
||||
height: 28.125rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#professional-candlesticks {
|
||||
width: 100%;
|
||||
height: 28.125rem;
|
||||
}
|
||||
|
||||
#comparing-stock-indices {
|
||||
width: 100%;
|
||||
height: 28.125rem;
|
||||
}
|
||||
|
||||
#multiple-panel-data {
|
||||
width: 100%;
|
||||
height: 28.125rem;
|
||||
}
|
||||
|
||||
#depth-chart {
|
||||
width: 100%;
|
||||
height: 28.125rem;
|
||||
}
|
||||
|
||||
// #btc1 {
|
||||
// width: 100%;
|
||||
// height: 31.25rem;
|
||||
|
||||
// @include respond('phone') {
|
||||
// margin-bottom: 5.625rem;
|
||||
// padding-bottom: 2.5rem;
|
||||
// height: 25rem;
|
||||
|
||||
// fieldset {
|
||||
|
||||
// div {
|
||||
// display: block !important;
|
||||
// margin-bottom: 0.625rem;
|
||||
|
||||
// input {
|
||||
// display: block;
|
||||
// margin-bottom: 0.3125rem;
|
||||
// }
|
||||
// }
|
||||
|
||||
// div:last-child {
|
||||
// float: none !important;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.amcharts-export-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.amcharts-data-set-selector-div {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
width: 16.875rem;
|
||||
margin: 0 auto;
|
||||
select {
|
||||
border: 0;
|
||||
margin-left: 0.625rem;
|
||||
background: #ddd;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.amChartsInputField {
|
||||
border: 0;
|
||||
background: $primary;
|
||||
color: $white;
|
||||
padding: 0.3125rem 0.9375rem;
|
||||
margin: 0 0.9375rem;
|
||||
}
|
||||
|
||||
.amcharts-data-set-select {
|
||||
border: 0;
|
||||
background: #ddd;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.amcharts-period-input,
|
||||
.amcharts-period-input-selected {
|
||||
border: 0;
|
||||
margin-left: 0.625rem;
|
||||
background: $primary;
|
||||
color: $white;
|
||||
padding: 0.3125rem 0.9375rem;
|
||||
}
|
||||
|
||||
/////////////////////
|
||||
// CSS Animation
|
||||
///////////////////
|
||||
.amcharts-graph-g2 .amcharts-graph-stroke {
|
||||
stroke-dasharray: 3px 3px;
|
||||
stroke-linejoin: round;
|
||||
stroke-linecap: round;
|
||||
-webkit-animation: am-moving-dashes 1s linear infinite;
|
||||
animation: am-moving-dashes 1s linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes am-moving-dashes {
|
||||
100% {
|
||||
stroke-dashoffset: -1.9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes am-moving-dashes {
|
||||
100% {
|
||||
stroke-dashoffset: -1.9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.lastBullet {
|
||||
-webkit-animation: am-pulsating 1s ease-out infinite;
|
||||
animation: am-pulsating 1s ease-out infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes am-pulsating {
|
||||
0% {
|
||||
stroke-opacity: 1;
|
||||
stroke-width: 0px;
|
||||
}
|
||||
100% {
|
||||
stroke-opacity: 0;
|
||||
stroke-width: 3.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes am-pulsating {
|
||||
0% {
|
||||
stroke-opacity: 1;
|
||||
stroke-width: 0px;
|
||||
}
|
||||
100% {
|
||||
stroke-opacity: 0;
|
||||
stroke-width: 3.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.amcharts-graph-column-front {
|
||||
-webkit-transition: all .3s .3s ease-out;
|
||||
transition: all .3s .3s ease-out;
|
||||
}
|
||||
|
||||
.amcharts-graph-column-front:hover {
|
||||
fill: #496375;
|
||||
stroke: #496375;
|
||||
-webkit-transition: all .3s ease-out;
|
||||
transition: all .3s ease-out;
|
||||
}
|
||||
|
||||
@-webkit-keyframes am-draw {
|
||||
0% {
|
||||
stroke-dashoffset: 500%;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes am-draw {
|
||||
0% {
|
||||
stroke-dashoffset: 500%;
|
||||
}
|
||||
100% {
|
||||
stroke-dashoffset: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
.amChartsPeriodSelector {
|
||||
&>fieldset>div {
|
||||
@include respond('tab-port') {
|
||||
float: none !important;
|
||||
display: block !important;
|
||||
margin-bottom: 0.625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
13
public/style/scss/components/charts/_chart-c3.scss
Normal file
13
public/style/scss/components/charts/_chart-c3.scss
Normal file
@ -0,0 +1,13 @@
|
||||
|
||||
.c3{
|
||||
height: 250px;
|
||||
}
|
||||
.c3-legend-item {
|
||||
fill: #9fabb1;
|
||||
}
|
||||
|
||||
.c3 .c3-axis-x path,
|
||||
.c3 .c3-axis-x line,
|
||||
.c3 .c3-axis-y path,
|
||||
.c3 .c3-axis-y line,
|
||||
.tick text { stroke: $white; }
|
||||
127
public/style/scss/components/charts/_chart-chartist.scss
Normal file
127
public/style/scss/components/charts/_chart-chartist.scss
Normal file
@ -0,0 +1,127 @@
|
||||
|
||||
|
||||
|
||||
.ct-golden-section:before {
|
||||
float: none;
|
||||
}
|
||||
.ct-chart {
|
||||
max-height: 15.7rem;
|
||||
}
|
||||
.ct-chart .ct-label {
|
||||
fill: #a3afb7;
|
||||
color: #a3afb7;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1;
|
||||
}
|
||||
.ct-grid {
|
||||
stroke: rgba(49, 58, 70, 0.1);
|
||||
}
|
||||
.ct-chart.simple-pie-chart-chartist .ct-label {
|
||||
color: #ffffff;
|
||||
fill: #ffffff;
|
||||
font-size: 0.625rem;
|
||||
}
|
||||
.ct-chart .ct-series.ct-series-a .ct-bar,
|
||||
.ct-chart .ct-series.ct-series-a .ct-line,
|
||||
.ct-chart .ct-series.ct-series-a .ct-point,
|
||||
.ct-chart .ct-series.ct-series-a .ct-slice-donut {
|
||||
stroke: $primary;
|
||||
}
|
||||
.ct-chart .ct-series.ct-series-b .ct-bar,
|
||||
.ct-chart .ct-series.ct-series-b .ct-line,
|
||||
.ct-chart .ct-series.ct-series-b .ct-point,
|
||||
.ct-chart .ct-series.ct-series-b .ct-slice-donut {
|
||||
stroke: $success;
|
||||
}
|
||||
.ct-chart .ct-series.ct-series-c .ct-bar,
|
||||
.ct-chart .ct-series.ct-series-c .ct-line,
|
||||
.ct-chart .ct-series.ct-series-c .ct-point,
|
||||
.ct-chart .ct-series.ct-series-c .ct-slice-donut {
|
||||
stroke: $warning;
|
||||
}
|
||||
.ct-chart .ct-series.ct-series-d .ct-bar,
|
||||
.ct-chart .ct-series.ct-series-d .ct-line,
|
||||
.ct-chart .ct-series.ct-series-d .ct-point,
|
||||
.ct-chart .ct-series.ct-series-d .ct-slice-donut {
|
||||
stroke: $danger;
|
||||
}
|
||||
.ct-chart .ct-series.ct-series-e .ct-bar,
|
||||
.ct-chart .ct-series.ct-series-e .ct-line,
|
||||
.ct-chart .ct-series.ct-series-e .ct-point,
|
||||
.ct-chart .ct-series.ct-series-e .ct-slice-donut {
|
||||
stroke: $info;
|
||||
}
|
||||
.ct-chart .ct-series.ct-series-f .ct-bar,
|
||||
.ct-chart .ct-series.ct-series-f .ct-line,
|
||||
.ct-chart .ct-series.ct-series-f .ct-point,
|
||||
.ct-chart .ct-series.ct-series-f .ct-slice-donut {
|
||||
stroke: $dark;
|
||||
}
|
||||
.ct-chart .ct-series.ct-series-g .ct-bar,
|
||||
.ct-chart .ct-series.ct-series-g .ct-line,
|
||||
.ct-chart .ct-series.ct-series-g .ct-point,
|
||||
.ct-chart .ct-series.ct-series-g .ct-slice-donut {
|
||||
stroke: #8d6e63;
|
||||
}
|
||||
.ct-series-a .ct-area,
|
||||
.ct-series-a .ct-slice-pie {
|
||||
fill: $secondary;
|
||||
}
|
||||
.ct-series-b .ct-area,
|
||||
.ct-series-b .ct-slice-pie {
|
||||
fill: #00A2FF;
|
||||
}
|
||||
.ct-series-c .ct-area,
|
||||
.ct-series-c .ct-slice-pie {
|
||||
fill: #ff9800;
|
||||
}
|
||||
.ct-series-d .ct-area,
|
||||
.ct-series-d .ct-slice-pie {
|
||||
fill: #ff9800;
|
||||
}
|
||||
.chartist-tooltip {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
min-width: 0.625rem;
|
||||
padding: 2px 0.625rem;
|
||||
border-radius: 3px;
|
||||
background: #313a46;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
-webkit-transition: opacity .2s linear;
|
||||
-moz-transition: opacity .2s linear;
|
||||
-o-transition: opacity .2s linear;
|
||||
transition: opacity .2s linear;
|
||||
}
|
||||
.chartist-tooltip.tooltip-show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#donught_graph {
|
||||
.ct-series.ct-series-a .ct-slice-donut {
|
||||
stroke: #3FC6D4;
|
||||
}
|
||||
|
||||
.ct-series.ct-series-b .ct-slice-donut {
|
||||
stroke: #333333;
|
||||
}
|
||||
|
||||
.ct-series.ct-series-c .ct-slice-donut {
|
||||
stroke: #F63465;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#pie-chart .ct-label{
|
||||
@include respond ('phone-land'){
|
||||
color: #fff;
|
||||
fill: #fff;
|
||||
}
|
||||
}
|
||||
93
public/style/scss/components/charts/_chart-chartjs.scss
Normal file
93
public/style/scss/components/charts/_chart-chartjs.scss
Normal file
@ -0,0 +1,93 @@
|
||||
|
||||
#visitor_graph {
|
||||
height: 253px !important;
|
||||
}
|
||||
|
||||
#user_rating_graph {
|
||||
height: 280px !important;
|
||||
}
|
||||
|
||||
#radar_chart,
|
||||
#pie_chart,
|
||||
#doughnut_chart,
|
||||
#polar_chart {
|
||||
// height: 10.875rem!important;
|
||||
}
|
||||
#visitorOnline{
|
||||
height: 72px !important;
|
||||
}
|
||||
#trendMeter{
|
||||
height: 72px !important;
|
||||
}
|
||||
#widget-revenue1,
|
||||
#widget-revenue2,
|
||||
#widget-revenue3{
|
||||
height: 117px !important;
|
||||
}
|
||||
#widget-profit1,
|
||||
#widget-profit2,
|
||||
#widget-profit3{
|
||||
height: 160px !important;
|
||||
}
|
||||
|
||||
#comparison-rate{
|
||||
height: 230px!important;
|
||||
}
|
||||
#session_day{
|
||||
height: 175px!important;
|
||||
width: auto!important;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#walet-status {
|
||||
height: 140px!important;
|
||||
}
|
||||
#bar1 {
|
||||
height: 150px!important;
|
||||
}
|
||||
#sold-product {
|
||||
height: 230px!important;
|
||||
}
|
||||
|
||||
|
||||
#chart-venue-expenses,
|
||||
#chart-online-sale,
|
||||
#chart-gross-sale{
|
||||
height: 150px !important;
|
||||
}
|
||||
|
||||
|
||||
#areaChart_3{
|
||||
height: 295px !important;
|
||||
}
|
||||
.chart-point{
|
||||
display:flex;
|
||||
align-items: center;
|
||||
|
||||
.check-point-area{
|
||||
width:100px;
|
||||
height: 100px;
|
||||
margin-top: -10px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
.chart-point-list{
|
||||
margin:0;
|
||||
padding-left: 5px;
|
||||
|
||||
li{
|
||||
list-style:none;
|
||||
font-size: 13px;
|
||||
padding: 2px 0;
|
||||
|
||||
i{
|
||||
margin-right: 5px;
|
||||
font-size: 11px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
36
public/style/scss/components/charts/_chart-flot.scss
Normal file
36
public/style/scss/components/charts/_chart-flot.scss
Normal file
@ -0,0 +1,36 @@
|
||||
|
||||
|
||||
.flot-chart{
|
||||
height: 15.7rem;
|
||||
}
|
||||
|
||||
.tooltipflot {
|
||||
background-color: transparent;
|
||||
font-size: 1.4rem;
|
||||
padding: .5rem 1rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
border-radius: .2rem; }
|
||||
|
||||
.legendColorBox > div {
|
||||
border: 0 !important;
|
||||
padding: 0 !important; }
|
||||
|
||||
.legendLabel {
|
||||
font-size: 0.825rem;
|
||||
padding-left: .5rem;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.flotTip {
|
||||
background: $black;
|
||||
border: 1px solid $black;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.legend > div{
|
||||
background: transparent!important;
|
||||
}
|
||||
|
||||
#balance_graph {
|
||||
height: 260px;
|
||||
}
|
||||
11
public/style/scss/components/charts/_chart-highcharts.scss
Normal file
11
public/style/scss/components/charts/_chart-highcharts.scss
Normal file
@ -0,0 +1,11 @@
|
||||
.highcharts-root {
|
||||
text {
|
||||
font-weight: 300 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.highcharts-credits {
|
||||
display: none;
|
||||
}
|
||||
|
||||
58
public/style/scss/components/charts/_chart-morris.scss
Normal file
58
public/style/scss/components/charts/_chart-morris.scss
Normal file
@ -0,0 +1,58 @@
|
||||
.morris-hover {
|
||||
position: absolute;
|
||||
z-index : 1;
|
||||
background: $primary;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.morris-hover .morris-hover-point {
|
||||
color: $white !important;
|
||||
margin: 3px 0;
|
||||
text-align: center;
|
||||
padding: 0 25px;
|
||||
}
|
||||
|
||||
.morris-hover .morris-hover-row-label {
|
||||
background-color: $dark;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.morris-hover.morris-default-style {
|
||||
border-radius: 5px;
|
||||
padding : 0;
|
||||
margin: 0;
|
||||
border : none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
svg text {
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
|
||||
#morris_donught,
|
||||
#morris_donught_2,
|
||||
#line_chart_2,
|
||||
#morris_bar,
|
||||
#morris_bar_stalked,
|
||||
#morris_bar_2,
|
||||
#morris_area_2,
|
||||
#morris_area {
|
||||
height: 240px !important;
|
||||
}
|
||||
|
||||
#morris_line {
|
||||
height: 278px !important;
|
||||
}
|
||||
|
||||
|
||||
#crypto-btc-card,
|
||||
#crypto-eth-card,
|
||||
#crypto-rpl-card,
|
||||
#crypto-ltc-card {
|
||||
height: 9.375rem;
|
||||
}
|
||||
|
||||
|
||||
25
public/style/scss/components/charts/_chart-sparkline.scss
Normal file
25
public/style/scss/components/charts/_chart-sparkline.scss
Normal file
@ -0,0 +1,25 @@
|
||||
#daily-sales, #comparison-rate, #usage-chart, #walet-status {
|
||||
width: 100%;
|
||||
display: block;
|
||||
|
||||
canvas {
|
||||
max-width: 100% !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#sparkline-composite-chart,
|
||||
#composite-bar,
|
||||
#sparkline11,
|
||||
#StackedBarChart,
|
||||
#spark-bar,
|
||||
#tristate {
|
||||
canvas {
|
||||
height: 100px !important;
|
||||
}
|
||||
}
|
||||
|
||||
#sparkline11 canvas {
|
||||
width: 100px !important;
|
||||
}
|
||||
10
public/style/scss/components/charts/_charts.scss
Normal file
10
public/style/scss/components/charts/_charts.scss
Normal file
@ -0,0 +1,10 @@
|
||||
@import "./chart-chartist";
|
||||
@import "./chart-chartjs";
|
||||
@import "./chart-c3";
|
||||
@import "./chart-flot";
|
||||
@import "./chart-morris";
|
||||
@import "./chart-sparkline";
|
||||
@import "./easy-pie-chart";
|
||||
@import "./chart-amchart";
|
||||
@import "./chart-highcharts";
|
||||
@import "./echarts";
|
||||
23
public/style/scss/components/charts/_easy-pie-chart.scss
Normal file
23
public/style/scss/components/charts/_easy-pie-chart.scss
Normal file
@ -0,0 +1,23 @@
|
||||
.easy-pie-chart {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
.inner {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
4
public/style/scss/components/charts/_echarts.scss
Normal file
4
public/style/scss/components/charts/_echarts.scss
Normal file
@ -0,0 +1,4 @@
|
||||
#chart_employee_gender, #chart_employee_status {
|
||||
width: auto;
|
||||
height: 350px;
|
||||
}
|
||||
46
public/style/scss/components/forms/_form-addons-cropper.scss
Normal file
46
public/style/scss/components/forms/_form-addons-cropper.scss
Normal file
@ -0,0 +1,46 @@
|
||||
#image {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.docs-options {
|
||||
.dropdown-menu {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.docs-preview {
|
||||
margin-bottom: 3rem;
|
||||
|
||||
.img-preview {
|
||||
float: left;
|
||||
margin-right: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
overflow: hidden;
|
||||
max-width: 100% !important;
|
||||
|
||||
&>img {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
&.preview-lg {
|
||||
width: 16rem;
|
||||
height: 9rem;
|
||||
}
|
||||
|
||||
&.preview-md {
|
||||
width: 8rem;
|
||||
height: 4.5rem;
|
||||
}
|
||||
|
||||
&.preview-sm {
|
||||
width: 4rem;
|
||||
height: 2.25rem;
|
||||
}
|
||||
|
||||
&.preview-xs {
|
||||
width: 2rem;
|
||||
height: 1.125rem;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
100
public/style/scss/components/forms/_form-addons-select2.scss
Normal file
100
public/style/scss/components/forms/_form-addons-select2.scss
Normal file
@ -0,0 +1,100 @@
|
||||
|
||||
.select2-container {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--single {
|
||||
border-radius: $radius;
|
||||
border: 1px solid $light;
|
||||
height: 40px;
|
||||
background: $white;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$d-bg;
|
||||
border-color:$d-border;
|
||||
}
|
||||
|
||||
|
||||
&:hover,&:focus,&.active{
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--single .select2-selection__rendered {
|
||||
line-height: 40px;
|
||||
color:$body-color;
|
||||
padding-left: 15px;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--multiple {
|
||||
border-color: $border;
|
||||
border-radius: 0;
|
||||
|
||||
}
|
||||
|
||||
.select2-dropdown {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
.select2-container--default.select2-container--focus .select2-selection--multiple {
|
||||
border-color: $border;
|
||||
background: $white;
|
||||
}
|
||||
.select2-container--default .select2-selection--single .select2-selection__arrow {
|
||||
top: 6px;
|
||||
right: 15px;
|
||||
}
|
||||
.select2-container .select2-selection--multiple{
|
||||
min-height: 40px;
|
||||
color:$body-color;
|
||||
border-radius: $radius;
|
||||
border: 1px solid $light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$d-bg;
|
||||
border-color:$d-border;
|
||||
}
|
||||
}
|
||||
.select2-search--dropdown .select2-search__field{
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$dark-card;
|
||||
border-color:$d-border;
|
||||
}
|
||||
}
|
||||
.select2-dropdown{
|
||||
border-color: $light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$d-bg;
|
||||
border-color:$d-border;
|
||||
}
|
||||
}
|
||||
.swal2-popup .swal2-content{
|
||||
color:$body-color;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,60 @@
|
||||
|
||||
|
||||
.tagsinput {
|
||||
overflow-y : auto;
|
||||
display : block;
|
||||
width : 100%;
|
||||
height : 3.4rem;
|
||||
padding : .6rem 1.2rem;
|
||||
font-size : 1.4rem;
|
||||
line-height : 1.42857143;
|
||||
background-image : none;
|
||||
-webkit-border-radius: .4rem;
|
||||
border-radius : .4rem;
|
||||
|
||||
span.tag {
|
||||
display : block;
|
||||
float : left;
|
||||
padding : .3rem .8rem;
|
||||
text-decoration : none;
|
||||
margin-right : .5rem;
|
||||
margin-bottom : .5rem;
|
||||
font-size : 1.3rem;
|
||||
-webkit-border-radius: .3rem;
|
||||
border-radius : .3rem;
|
||||
|
||||
a {
|
||||
font-weight : bold;
|
||||
text-decoration: none;
|
||||
font-size : 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width : 8rem;
|
||||
margin : 0;
|
||||
font-size : 1.3rem;
|
||||
border : 1px solid transparent;
|
||||
padding : .5rem;
|
||||
background : transparent;
|
||||
outline : 0;
|
||||
margin-right : .5rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
div {
|
||||
display: block;
|
||||
float : left;
|
||||
}
|
||||
}
|
||||
|
||||
.tags_clear {
|
||||
clear : both;
|
||||
width : 100%;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.not_valid {
|
||||
background: #FBD8DB !important;
|
||||
color : #90111A !important;
|
||||
}
|
||||
223
public/style/scss/components/forms/_form-basic.scss
Normal file
223
public/style/scss/components/forms/_form-basic.scss
Normal file
@ -0,0 +1,223 @@
|
||||
|
||||
// Basic Input
|
||||
|
||||
.form-control{
|
||||
border-radius: $radius;
|
||||
background: $white;
|
||||
border: 1px solid $border;
|
||||
// height: 45px;
|
||||
color: $dark;
|
||||
height: 56px;
|
||||
@include respond('laptop') {
|
||||
height: 41px;
|
||||
}
|
||||
&:hover,&:focus,&.active{
|
||||
box-shadow: none;
|
||||
background: $white;
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.input-rounded {
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
|
||||
// Input Color
|
||||
[data-theme-version="light"],
|
||||
[data-theme-version="dark"] {
|
||||
.input-primary{
|
||||
.form-control{
|
||||
border-color:$primary;
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:$primary;
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
.input-danger{
|
||||
.form-control{
|
||||
border-color:$danger;
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:$danger;
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
.input-info{
|
||||
.form-control{
|
||||
border-color:$info;
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:$info;
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
.input-success{
|
||||
.form-control{
|
||||
border-color:$success;
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:$success;
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
.input-warning{
|
||||
.form-control{
|
||||
border-color:$warning;
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:$warning;
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Input Outline
|
||||
[data-theme-version="light"],
|
||||
[data-theme-version="dark"] {
|
||||
.input-primary-o{
|
||||
.form-control{
|
||||
border-color:$primary;
|
||||
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:transparent;
|
||||
border-color:$primary;
|
||||
color:$primary;
|
||||
}
|
||||
}
|
||||
.input-danger-o{
|
||||
.form-control{
|
||||
border-color:$danger;
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:transparent;
|
||||
border-color:$danger;
|
||||
color:$danger;
|
||||
}
|
||||
}
|
||||
.input-info-o{
|
||||
.form-control{
|
||||
border-color:$info;
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:transparent;
|
||||
border-color:$info;
|
||||
color:$info;
|
||||
}
|
||||
}
|
||||
.input-success-o{
|
||||
.form-control{
|
||||
border-color:$success;
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:transparent;
|
||||
border-color:$success;
|
||||
color:$success;
|
||||
}
|
||||
}
|
||||
.input-warning-o{
|
||||
.form-control{
|
||||
border-color:$warning;
|
||||
}
|
||||
.input-group-text{
|
||||
background-color:transparent;
|
||||
border-color:$warning;
|
||||
color:$warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Input Size/
|
||||
// .form-control{
|
||||
// min-height: 40px;
|
||||
// }
|
||||
// .form-control-sm{
|
||||
// min-height: 36px;
|
||||
// }
|
||||
// .form-control-lg{
|
||||
// min-height: 52px;
|
||||
// }
|
||||
|
||||
|
||||
|
||||
// Input Group
|
||||
.input-group-text{
|
||||
background: #d7dae3;
|
||||
border: 1px solid transparent;
|
||||
min-width: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0.532rem 0.75rem;
|
||||
border-radius: $radius;
|
||||
|
||||
i{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.custom-file-label{
|
||||
height: 40px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0;
|
||||
}
|
||||
.input-group-prepend .btn,
|
||||
.input-group-append .btn {
|
||||
z-index: 0;
|
||||
}
|
||||
.custom-select{
|
||||
background: none;
|
||||
// height: 45px;
|
||||
border-color: $border;
|
||||
color: $dark;
|
||||
// border-radius: 0px!important;
|
||||
&:focus{
|
||||
box-shadow: none;
|
||||
border-color: $primary;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
.custom-file-label{
|
||||
// height: 45px;
|
||||
// border-radius: 0px!important;
|
||||
|
||||
&:after{
|
||||
background: #656C73;
|
||||
border: 1px solid $border;
|
||||
color: $white;
|
||||
border-radius: 0;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $d-border;
|
||||
border-color: $d-border;
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom_file_input {
|
||||
.input-group-prepend,
|
||||
.input-group-append {
|
||||
// height: 45px;
|
||||
}
|
||||
|
||||
.custom-file-label::after {
|
||||
height: 100%;
|
||||
// line-height: 2.4;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.form-control:disabled,
|
||||
.form-control[readonly] {
|
||||
background: $white;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.custom-file-label{
|
||||
background: $white;
|
||||
border-color: $border;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $d-bg;
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
266
public/style/scss/components/forms/_form-checkbox.scss
Normal file
266
public/style/scss/components/forms/_form-checkbox.scss
Normal file
@ -0,0 +1,266 @@
|
||||
@import "../../abstracts/variable";
|
||||
|
||||
input[type="checkbox"] {
|
||||
&:after{
|
||||
content: '';
|
||||
display: block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-top: 0px;
|
||||
margin-left: -1px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
background: #d4d7da;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
&:checked:after{
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
display: block;
|
||||
content: "\f00c";
|
||||
font-family: 'FontAwesome';
|
||||
color: $white;
|
||||
font-weight: 100;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
background: $primary;
|
||||
}
|
||||
|
||||
}
|
||||
.form-check-label{
|
||||
margin-left: 5px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
|
||||
.form-check-inline {
|
||||
.form-check-input {
|
||||
margin-right: 0.625rem;
|
||||
}
|
||||
}
|
||||
.custom-control-label{
|
||||
&:before,
|
||||
&:after{
|
||||
top:2px;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border-color: #e7e7e7;
|
||||
}
|
||||
}
|
||||
.rtl .custom-control-label{
|
||||
&:before,
|
||||
&:after{
|
||||
right: -1.5rem !important;
|
||||
left: inherit;
|
||||
}
|
||||
}
|
||||
.custom-control {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.custom-control-input:checked ~ .custom-control-label::before {
|
||||
color: #fff;
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
// CheckBox
|
||||
.custom-control-input:focus ~ .custom-control-label::before{
|
||||
box-shadow:none !important;
|
||||
}
|
||||
.custom-control-label::before{
|
||||
background-color: transparent;
|
||||
border-color: #BEBEBE;
|
||||
border-width: 2px;
|
||||
border-radius: 5px !important;
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: transparent;
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
.check-xs{
|
||||
.custom-control-label:before,
|
||||
.custom-control-label:after{
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
.check-lg{
|
||||
.custom-control-label:before,
|
||||
.custom-control-label:after{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
.check-xl{
|
||||
.custom-control-label:before,
|
||||
.custom-control-label:after{
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
.checkbox{
|
||||
&-info{
|
||||
.custom-control-label::before{
|
||||
background-color: transparent;
|
||||
border-color: $info-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $info-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
.custom-control-input:checked ~ .custom-control-label::before{
|
||||
background-color: $info;
|
||||
border-color: $info;
|
||||
}
|
||||
}
|
||||
&-danger {
|
||||
.custom-control-label::before{
|
||||
background-color:transparent;
|
||||
border-color: $danger-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $danger-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
.custom-control-input:checked ~ .custom-control-label::before{
|
||||
background-color: $danger;
|
||||
border-color: $danger;
|
||||
}
|
||||
}
|
||||
&-success{
|
||||
.custom-control-label::before{
|
||||
background-color: transparent;
|
||||
border-color: $success-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $success-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
.custom-control-input:checked ~ .custom-control-label::before{
|
||||
background-color: $success;
|
||||
border-color: $success;
|
||||
}
|
||||
}
|
||||
&-warning{
|
||||
.custom-control-label::before{
|
||||
background-color: transparent;
|
||||
border-color: $warning-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $warning-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
.custom-control-input:checked ~ .custom-control-label::before{
|
||||
background-color: $warning;
|
||||
border-color: $warning;
|
||||
}
|
||||
}
|
||||
&-secondary{
|
||||
.custom-control-label::before{
|
||||
background-color: transparent;
|
||||
border-color: $secondary-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $secondary-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
.custom-control-input:checked ~ .custom-control-label::before{
|
||||
background-color: $secondary;
|
||||
border-color: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Toggle Switch
|
||||
.toggle-switch{
|
||||
padding-left:50px;
|
||||
line-height: 1.25;
|
||||
.custom-control-label{
|
||||
|
||||
font-weight: 500;
|
||||
&:after{
|
||||
width: 24px;
|
||||
background:#959595;
|
||||
height: 24px;
|
||||
border-radius: 24px;
|
||||
top: -2px;
|
||||
left: -50px;
|
||||
@include transitionMedium;
|
||||
}
|
||||
&:before{
|
||||
border: 0;
|
||||
background: #D8D8D8;
|
||||
width: 40px;
|
||||
border-radius: 20px !important;
|
||||
height: 16px;
|
||||
left: -50px;
|
||||
@include transitionMedium
|
||||
}
|
||||
}
|
||||
.custom-control-input:checked ~ .custom-control-label{
|
||||
&:after{
|
||||
left: -43px;
|
||||
background:$primary;
|
||||
}
|
||||
&:before{
|
||||
background: $primary-light;
|
||||
}
|
||||
}
|
||||
&.text-right{
|
||||
padding-left:0;
|
||||
padding-right:50px;
|
||||
.custom-control-label{
|
||||
&:after{
|
||||
left: auto;
|
||||
right: -30px;
|
||||
}
|
||||
&:before{
|
||||
left: auto;
|
||||
right: -50px;
|
||||
}
|
||||
}
|
||||
.custom-control-input:checked ~ .custom-control-label{
|
||||
&:after{
|
||||
left: auto;
|
||||
right: -43px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Check Switch
|
||||
.check-switch{
|
||||
padding-left: 40px;
|
||||
.custom-control-label{
|
||||
line-height: 30px;
|
||||
font-weight: 500;
|
||||
&:after,&:before{
|
||||
height:1.5rem;
|
||||
width:1.5rem;
|
||||
left: -2rem;
|
||||
border-radius: 3rem!important;
|
||||
border-color:rgba($primary,0.3);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
3
public/style/scss/components/forms/_form-dropzone.scss
Normal file
3
public/style/scss/components/forms/_form-dropzone.scss
Normal file
@ -0,0 +1,3 @@
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
.ql-container{
|
||||
height: 25rem;
|
||||
}
|
||||
134
public/style/scss/components/forms/_form-pickers.scss
Normal file
134
public/style/scss/components/forms/_form-pickers.scss
Normal file
@ -0,0 +1,134 @@
|
||||
|
||||
|
||||
.asColorPicker-dropdown {
|
||||
max-width: 26rem;
|
||||
}
|
||||
|
||||
.asColorPicker-trigger {
|
||||
border : 0 none;
|
||||
height : 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top : 0;
|
||||
width : 2.1875rem;
|
||||
}
|
||||
[direction="rtl"] .asColorPicker-trigger{
|
||||
right: 99%;
|
||||
left: auto;
|
||||
}
|
||||
.asColorPicker-clear {
|
||||
display : none;
|
||||
position : absolute;
|
||||
right : 1rem;
|
||||
text-decoration: none;
|
||||
top : .5rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.daterangepicker {
|
||||
td.active {
|
||||
background-color: $primary;
|
||||
|
||||
&:hover {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
button.applyBtn {
|
||||
background-color: $primary;
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker {
|
||||
|
||||
&.datepicker-dropdown {
|
||||
background: $l-bg;
|
||||
border-radius: 1px;
|
||||
border: 1px solid $gallery;
|
||||
|
||||
td.day, th.next, th.prev {
|
||||
height: 30px;
|
||||
width: 30px !important;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
font-weight: 300;
|
||||
border-radius: 50px;
|
||||
|
||||
&:hover {
|
||||
@extend %gradient-9;
|
||||
box-shadow: 0px 0px 30px 5px rgba(243,30,122,0.3);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
th.datepicker-switch, th.next, th.prev {
|
||||
font-weight: 300;
|
||||
color: $heading;
|
||||
}
|
||||
|
||||
th.dow {
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
table {
|
||||
|
||||
|
||||
|
||||
tr td.selected, tr td.active.active {
|
||||
@extend %gradient-9;
|
||||
box-shadow: 0px 0px 30px 5px rgba(243,30,122,0.3);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
tr {
|
||||
td.today {
|
||||
@extend %gradient-9;
|
||||
box-shadow: 0px 0px 30px 5px rgba(243,30,122,0.3);
|
||||
color : #ffffff;
|
||||
|
||||
&:hover {
|
||||
@extend %gradient-9;
|
||||
box-shadow: 0px 0px 30px 5px rgba(243,30,122,0.3);
|
||||
color : #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
td.today.disabled {
|
||||
@extend %gradient-9;
|
||||
box-shadow: 0px 0px 30px 5px rgba(243,30,122,0.3);
|
||||
color : #ffffff;
|
||||
|
||||
&:hover {
|
||||
@extend %gradient-9;
|
||||
box-shadow: 0px 0px 30px 5px rgba(243,30,122,0.3);
|
||||
color : #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.picker {
|
||||
&__select--month, &__select--year {
|
||||
height: 2.5em;
|
||||
}
|
||||
|
||||
&__input {
|
||||
background-color: transparent !important;
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: transparent !important;
|
||||
border: 1px solid $d-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.asColorPicker-wrap{
|
||||
.form-control{
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
574
public/style/scss/components/forms/_form-steps.scss
Normal file
574
public/style/scss/components/forms/_form-steps.scss
Normal file
@ -0,0 +1,574 @@
|
||||
@import "../../abstracts/variable";
|
||||
@import "../../abstracts/mixin";
|
||||
|
||||
|
||||
/* .wizard > .content > .body input.error {
|
||||
position: absolute;
|
||||
top: 100% !important;
|
||||
}
|
||||
|
||||
.wizard {
|
||||
position: relative;
|
||||
|
||||
&>.steps {
|
||||
width: 100%;
|
||||
// padding-left: 3%;
|
||||
margin-bottom: 20px;
|
||||
|
||||
@media(min-width: 1200px){
|
||||
width: 100%;
|
||||
// margin-left: 3%;
|
||||
}
|
||||
|
||||
li {
|
||||
|
||||
&.current {
|
||||
a {
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled, &.done {
|
||||
a {
|
||||
background-color: $white;
|
||||
color: $heading;
|
||||
|
||||
&:hover {
|
||||
margin: 0;
|
||||
background-color: $white;
|
||||
border-radius: 0;
|
||||
color: $heading;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
background-color: $white;
|
||||
|
||||
&:hover {
|
||||
margin: 0;
|
||||
background-color: $white;
|
||||
border-radius: 0;
|
||||
color: $heading;
|
||||
}
|
||||
|
||||
@include respond(phone-land) {
|
||||
padding: 1em 4px;
|
||||
}
|
||||
|
||||
.number {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 32rem;
|
||||
margin: 0;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
min-height: 41rem;
|
||||
}
|
||||
|
||||
& > .body {
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
|
||||
@include respond(phone) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
// background-color: $l-bg;
|
||||
border: 1px solid $border;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
|
||||
input.error {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
label.error {
|
||||
margin-top: 5px;
|
||||
margin-left: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emial-setup {
|
||||
label.mailclinet {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
background-color: #EEF5F9;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
@include respond(phone) {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
}
|
||||
|
||||
.mail-icon {
|
||||
font-size: 3rem;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
margin-top: -1rem;
|
||||
|
||||
@include respond(phone) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.mail-text {
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
margin-top: .5rem;
|
||||
|
||||
@include respond(phone) {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.skip-email {
|
||||
margin-top: 6rem;
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
&>.actions {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 2rem;
|
||||
|
||||
li:not(.disabled) {
|
||||
a {
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wizard .actions ul li{
|
||||
&.disabled a{
|
||||
color: #333333 !important;
|
||||
background: #F7FAFC !important;
|
||||
border: 1px solid #EEEEEE;
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $d-bg !important;
|
||||
border-color: $d-border;
|
||||
color:$white !important;
|
||||
}
|
||||
}
|
||||
|
||||
& a{
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding: 0.55em 2em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.wizard > .actions a, .wizard > .actions a:hover, .wizard > .actions a:active{
|
||||
padding: 0.55em 2em;
|
||||
}
|
||||
|
||||
// .wizard > .steps > ul > li{
|
||||
|
||||
// @media(max-width: 680px){
|
||||
// width: 100%;
|
||||
// padding-left: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .wizard > .steps{
|
||||
|
||||
// @media(max-width: 680px){
|
||||
// padding-left: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
.wizard > .content{
|
||||
background: transparent;
|
||||
// box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.wizard, .tabcontrol{
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.step-form-horizontal {
|
||||
.wizard {
|
||||
padding-top: 3.5rem;
|
||||
|
||||
.steps {
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
&.done {
|
||||
a {
|
||||
text-align: center;
|
||||
background-color: $white;
|
||||
color: $dark;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
color: $body-color;
|
||||
}
|
||||
&:hover {
|
||||
text-align: center;
|
||||
background-color: $white;
|
||||
color: $dark;
|
||||
}
|
||||
|
||||
.number {
|
||||
color: $white;
|
||||
background: $primary;
|
||||
border-color: transparent;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color:$primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.current a, &.disabled a {
|
||||
background-color: transparent;
|
||||
text-align: center;
|
||||
color: $white;
|
||||
|
||||
&:hover, &:active {
|
||||
background-color: transparent;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&.current a {
|
||||
.number {
|
||||
color: $primary;
|
||||
background: $white;
|
||||
border: 2px solid $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled a {
|
||||
.number {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
font-size: 0.75rem;
|
||||
padding-top: 0.9375rem;
|
||||
}
|
||||
|
||||
.number {
|
||||
position: absolute;
|
||||
top: -55px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: #fff;
|
||||
border: 3px solid #d7dae3;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 3rem;
|
||||
border-radius: 50px;
|
||||
width: 3rem;
|
||||
|
||||
// @include respond(phone) {
|
||||
// width: 4rem;
|
||||
// height: 4rem;
|
||||
// }
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$d-bg;
|
||||
border-color:$d-border;
|
||||
}
|
||||
@include respond('phone') {
|
||||
top: -45px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
z-index: 1;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 0.375rem;
|
||||
content: "";
|
||||
left: 50%;
|
||||
top: -2.1rem;
|
||||
background-color: $primary;
|
||||
z-index: -1;
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
height: 0.375rem;
|
||||
top: -1.3125rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.current {
|
||||
&::after {
|
||||
background-color: #F3F3F3;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$d-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&~li {
|
||||
&::after {
|
||||
background-color: #F3F3F3;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$d-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
padding: 0;
|
||||
|
||||
@include respond(phone) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
// form-wizard
|
||||
.form-wizard{
|
||||
border: 0;
|
||||
.nav-wizard{
|
||||
box-shadow: none!important;
|
||||
margin-bottom: 2rem;
|
||||
li{
|
||||
.nav-link{
|
||||
position: relative;
|
||||
span{
|
||||
border-radius: 50px;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border: 2px solid $primary;
|
||||
display: block;
|
||||
line-height: 3rem;
|
||||
color: $primary;
|
||||
font-size: 18px;
|
||||
margin: auto;
|
||||
background-color: $white;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
&:after{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
height: 3px;
|
||||
transform: translateY(-50%);
|
||||
background: $dark-light!important;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
}
|
||||
&.active{
|
||||
&:after{
|
||||
background: $dark-light!important;
|
||||
}
|
||||
}
|
||||
&.done{
|
||||
&:after{
|
||||
background: $primary!important;
|
||||
}
|
||||
span{
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
.nav-link{
|
||||
&:after{
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.toolbar-bottom{
|
||||
.btn{
|
||||
background-color: $primary;
|
||||
border: 0;
|
||||
padding: 12px 18px;
|
||||
}
|
||||
}
|
||||
.tab-content{
|
||||
.tab-pane{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.emial-setup {
|
||||
label.mailclinet {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
background-color: #EEF5F9;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
@include respond(phone) {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
}
|
||||
|
||||
.mail-icon {
|
||||
font-size: 3rem;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
margin-top: -1rem;
|
||||
|
||||
@include respond(phone) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.mail-text {
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
margin-top: .5rem;
|
||||
|
||||
@include respond(phone) {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// emial-setup
|
||||
.emial-setup {
|
||||
label.mailclinet {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
background-color: #EEF5F9;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
@include respond(phone) {
|
||||
width: 7rem;
|
||||
height: 7rem;
|
||||
}
|
||||
|
||||
.mail-icon {
|
||||
font-size: 3rem;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
margin-top: -1rem;
|
||||
|
||||
@include respond(phone) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.mail-text {
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
margin-top: .5rem;
|
||||
|
||||
@include respond(phone) {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include respond('phone-land') {
|
||||
.nav-wizard{
|
||||
flex-direction: unset!important;
|
||||
}
|
||||
.tab-content{
|
||||
height: 100%!important;
|
||||
}
|
||||
}
|
||||
@include respond('phone') {
|
||||
.nav-wizard{
|
||||
li{
|
||||
.nav-link{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
30
public/style/scss/components/forms/_form-summernote.scss
Normal file
30
public/style/scss/components/forms/_form-summernote.scss
Normal file
@ -0,0 +1,30 @@
|
||||
|
||||
|
||||
.note-icon-caret,
|
||||
.note-popover {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.note-editor.note-frame .panel-heading {
|
||||
padding : .6rem 1rem 1rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.note-editor.note-frame {
|
||||
border-color: $border;
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-editing-area .note-editable {
|
||||
background-color: $white;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.note-editor.note-frame .note-statusbar {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
102
public/style/scss/components/forms/_form-switch.scss
Normal file
102
public/style/scss/components/forms/_form-switch.scss
Normal file
@ -0,0 +1,102 @@
|
||||
.js-switch {
|
||||
|
||||
& + .switchery {
|
||||
border-radius: 50px;
|
||||
margin-right: 4rem;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
&>small {
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.js-switch-lg {
|
||||
& + .switchery {
|
||||
height: 2rem;
|
||||
width: 4.5rem;
|
||||
|
||||
&>small {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.js-switch-md {
|
||||
& + .switchery {
|
||||
height: 1.5rem;
|
||||
width: 3.5rem;
|
||||
|
||||
&>small {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.js-switch-sm {
|
||||
& + .switchery {
|
||||
height: 1rem;
|
||||
width: 2.2rem;
|
||||
|
||||
&>small {
|
||||
width: 0.875rem;
|
||||
height: 0.875rem;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-square {
|
||||
|
||||
& + .switchery {
|
||||
border-radius: 0;
|
||||
|
||||
&>small {
|
||||
border-radius: 0;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.js-switch-lg {
|
||||
& + .switchery {
|
||||
height: 2rem;
|
||||
width: 4.5rem;
|
||||
|
||||
&>small {
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.js-switch-md {
|
||||
& + .switchery {
|
||||
height: 1.5rem;
|
||||
width: 3.5rem;
|
||||
|
||||
&>small {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.js-switch-sm {
|
||||
& + .switchery {
|
||||
height: 1rem;
|
||||
width: 2.2rem;
|
||||
|
||||
&>small {
|
||||
width: 0.875rem;
|
||||
height: 0.875rem;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
18
public/style/scss/components/forms/_form-touchspin.scss
Normal file
18
public/style/scss/components/forms/_form-touchspin.scss
Normal file
@ -0,0 +1,18 @@
|
||||
.bootstrap-touchspin .input-group-btn-vertical>.btn {
|
||||
height: 51%;
|
||||
|
||||
&.bootstrap-touchspin-up {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bootstrap-touchspin {
|
||||
button.btn {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
background-color: $info;
|
||||
border-color: $info;
|
||||
}
|
||||
}
|
||||
67
public/style/scss/components/forms/_form-validation.scss
Normal file
67
public/style/scss/components/forms/_form-validation.scss
Normal file
@ -0,0 +1,67 @@
|
||||
/////////////////////////////
|
||||
// Bootstrap validation
|
||||
/////////////////////////////
|
||||
.form-control.is-valid {
|
||||
border-color: $success !important;
|
||||
border-right: 0px !important;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control.is-warning {
|
||||
border-color: $warning !important;
|
||||
border-right: 0px !important;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control.is-invalid {
|
||||
border-color: $danger !important;
|
||||
border-right: 0px !important;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////////
|
||||
// Jquery Validation
|
||||
////////////////////////
|
||||
.is-valid {
|
||||
.input-group-prepend {
|
||||
.input-group-text {
|
||||
i {
|
||||
color: $success;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-invalid {
|
||||
.input-group-prepend {
|
||||
.input-group-text {
|
||||
i {
|
||||
color: lighten($primary, 15%)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Show Pass
|
||||
.show-pass{
|
||||
cursor:pointer;
|
||||
|
||||
.fa-eye{
|
||||
display:none;
|
||||
}
|
||||
|
||||
&.active{
|
||||
.fa-eye-slash{
|
||||
display:none;
|
||||
}
|
||||
.fa-eye{
|
||||
display:inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
13
public/style/scss/components/forms/_forms.scss
Normal file
13
public/style/scss/components/forms/_forms.scss
Normal file
@ -0,0 +1,13 @@
|
||||
@import "./form-basic";
|
||||
@import "./form-checkbox";
|
||||
@import "./form-radio-button";
|
||||
@import "./form-switch";
|
||||
@import "./form-validation";
|
||||
@import "./form-pickers";
|
||||
@import "./form-addons-cropper";
|
||||
@import "./form-addons-select2";
|
||||
@import "./form-steps";
|
||||
@import "./form-dropzone";
|
||||
@import "./form-summernote";
|
||||
@import "./form-editor-quill";
|
||||
|
||||
0
public/style/scss/components/ico/_buy-sell.scss
Normal file
0
public/style/scss/components/ico/_buy-sell.scss
Normal file
0
public/style/scss/components/ico/_exchange.scss
Normal file
0
public/style/scss/components/ico/_exchange.scss
Normal file
0
public/style/scss/components/ico/_gateway.scss
Normal file
0
public/style/scss/components/ico/_gateway.scss
Normal file
8
public/style/scss/components/ico/_ico.scss
Normal file
8
public/style/scss/components/ico/_ico.scss
Normal file
@ -0,0 +1,8 @@
|
||||
@import "./buy-sell";
|
||||
@import "./exchange";
|
||||
@import "./gateway";
|
||||
@import "./marketcap";
|
||||
@import "./ticker";
|
||||
@import "./trading";
|
||||
@import "./transaction";
|
||||
@import "./wallet";
|
||||
0
public/style/scss/components/ico/_marketcap.scss
Normal file
0
public/style/scss/components/ico/_marketcap.scss
Normal file
35
public/style/scss/components/ico/_ticker.scss
Normal file
35
public/style/scss/components/ico/_ticker.scss
Normal file
@ -0,0 +1,35 @@
|
||||
|
||||
|
||||
|
||||
|
||||
.crypto-ticker{
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
margin-top: 20px;
|
||||
padding: 10px 20px;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15);
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $dark-card;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#webticker-big {
|
||||
font: inherit !important;
|
||||
font-size: inherit !important;
|
||||
font-weight: normal !important;
|
||||
li{
|
||||
i{
|
||||
font-size: 18px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
p{
|
||||
margin-bottom: 0px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
// margin-left: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
0
public/style/scss/components/ico/_trading.scss
Normal file
0
public/style/scss/components/ico/_trading.scss
Normal file
0
public/style/scss/components/ico/_transaction.scss
Normal file
0
public/style/scss/components/ico/_transaction.scss
Normal file
2
public/style/scss/components/ico/_wallet.scss
Normal file
2
public/style/scss/components/ico/_wallet.scss
Normal file
@ -0,0 +1,2 @@
|
||||
|
||||
|
||||
29
public/style/scss/components/map/_map-datamap.scss
Normal file
29
public/style/scss/components/map/_map-datamap.scss
Normal file
@ -0,0 +1,29 @@
|
||||
#world-datamap {
|
||||
padding-bottom: 46% !important;
|
||||
}
|
||||
|
||||
.datamaps-hoverover {
|
||||
background: $white;
|
||||
padding: 0.3125rem;
|
||||
border-radius: 0.3125rem;
|
||||
font-family: 'Roboto' !important;
|
||||
color: $primary;
|
||||
border: 1px solid rgba($primary, .3);
|
||||
}
|
||||
|
||||
.world_map_card {
|
||||
ul.list-group {
|
||||
@include custommq($max: 1440px) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
// li {
|
||||
// @include custommq($min: 1200px, $max: 1440px) {
|
||||
// flex: 1;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
22
public/style/scss/components/map/_map-jqvmap.scss
Normal file
22
public/style/scss/components/map/_map-jqvmap.scss
Normal file
@ -0,0 +1,22 @@
|
||||
.jqvmap-zoomin,
|
||||
.jqvmap-zoomout {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
line-height: 14px;
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.jqvmap-zoomout {
|
||||
top: 35px;
|
||||
}
|
||||
|
||||
#world-map, #usa {
|
||||
height: 400px;
|
||||
@include respond ('tab-port'){
|
||||
height:350px;
|
||||
}
|
||||
@include respond ('phone'){
|
||||
height:230px;
|
||||
}
|
||||
}
|
||||
2
public/style/scss/components/map/_maps.scss
Normal file
2
public/style/scss/components/map/_maps.scss
Normal file
@ -0,0 +1,2 @@
|
||||
@import "./map-datamap";
|
||||
@import "./map-jqvmap";
|
||||
266
public/style/scss/components/tables/_table-basic.scss
Normal file
266
public/style/scss/components/tables/_table-basic.scss
Normal file
@ -0,0 +1,266 @@
|
||||
//style for all basic tables
|
||||
.table {
|
||||
|
||||
@include respond('tab-land') {
|
||||
font-size: 0.875rem !important;
|
||||
}
|
||||
strong{
|
||||
color:$dark;
|
||||
}
|
||||
td {
|
||||
border-color: $border;
|
||||
padding: 12px 20px;
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
&.shadow-hover tbody tr:hover{
|
||||
background-color:$white;
|
||||
box-shadow: 0 0px 30px rgba($primary, 0.15);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
}
|
||||
&.bg-secondary-hover{
|
||||
th,td{
|
||||
border:none;
|
||||
font-weight:500;
|
||||
}
|
||||
tr:hover{
|
||||
background:$secondary;
|
||||
td,th{
|
||||
color:$white!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bg-info-hover{
|
||||
th,td{
|
||||
border:none;
|
||||
font-weight:500;
|
||||
}
|
||||
tr:hover{
|
||||
background:$info;
|
||||
td,th{
|
||||
color:$white!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bg-warning-hover{
|
||||
th,td{
|
||||
border:none;
|
||||
font-weight:500;
|
||||
}
|
||||
tr:hover{
|
||||
background:$warning;
|
||||
td,th{
|
||||
color:$white!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
thead th {
|
||||
border-bottom-width: 1px;
|
||||
// color: $dark ;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding: 20px 20px;
|
||||
letter-spacing: 0.5px;
|
||||
border-color: $border;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
tbody tr td {
|
||||
// color: $l-ctd;
|
||||
// line-height: 2.5rem;
|
||||
vertical-align: middle;
|
||||
border-color: $border;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
|
||||
//delete header borders without '.borders tables'
|
||||
&:not(.table-bordered) {
|
||||
thead th {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
|
||||
//heading background
|
||||
.thead-primary th {
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
.thead-info th {
|
||||
background-color: $info;
|
||||
color: $white;
|
||||
}
|
||||
.thead-warning th {
|
||||
background-color: $warning;
|
||||
color: $white;
|
||||
}
|
||||
.thead-danger th {
|
||||
background-color: $danger;
|
||||
color: $white;
|
||||
}
|
||||
.thead-success th {
|
||||
background-color: $success;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
//table border
|
||||
&.primary-table-bordered {
|
||||
border: 1px solid $border;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
|
||||
//table hover
|
||||
&.primary-table-bg-hover {
|
||||
thead th {
|
||||
background-color: darken($color: $primary, $amount: 5%);
|
||||
color: $white;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
transition: all .1s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color: $primary, $amount: 5%);
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
td, th {
|
||||
border-bottom: 1px solid darken($color: $primary, $amount: 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//responsive table width
|
||||
&-responsive {
|
||||
&-tiny {
|
||||
// @include media-breakpoint-down(xs) {
|
||||
min-width: 18.75rem;
|
||||
// }
|
||||
}
|
||||
|
||||
&-sm {
|
||||
// @include media-breakpoint-down(sm) {
|
||||
min-width: 30rem !important;
|
||||
// }
|
||||
}
|
||||
|
||||
&-md {
|
||||
// @include media-breakpoint-down(sm) {
|
||||
min-width: 36rem !important;
|
||||
// }
|
||||
}
|
||||
|
||||
&-lg {
|
||||
min-width: 60.9375rem !important;
|
||||
}
|
||||
|
||||
&-xl {
|
||||
min-width: 70.9375rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-primary,
|
||||
.table-primary > th,
|
||||
.table-primary > td {
|
||||
background-color: $primary-light;
|
||||
color: $primary;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $primary-opacity;
|
||||
}
|
||||
}
|
||||
.table-success,
|
||||
.table-success > th,
|
||||
.table-success > td {
|
||||
background-color: $success-light;
|
||||
color: $success;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $success-opacity;
|
||||
}
|
||||
}
|
||||
.table-info,
|
||||
.table-info > th,
|
||||
.table-info > td {
|
||||
background-color: $info-light;
|
||||
color: $info;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $info-opacity;
|
||||
}
|
||||
}
|
||||
.table-warning,
|
||||
.table-warning > th,
|
||||
.table-warning > td {
|
||||
background-color: $warning-light;
|
||||
color: $warning;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $warning-opacity;
|
||||
}
|
||||
}
|
||||
.table-danger,
|
||||
.table-danger > th,
|
||||
.table-danger > td {
|
||||
background-color: $danger-light;
|
||||
color: $danger;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $danger-opacity;
|
||||
}
|
||||
}
|
||||
.table-active,
|
||||
.table-active > th,
|
||||
.table-active > td {
|
||||
background-color: $l-bg;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.card-table{
|
||||
th, td{
|
||||
&:first-child{
|
||||
padding-left: 30px;
|
||||
@include respond('phone') {
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
padding-right:30px;
|
||||
@include respond('phone') {
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
14
public/style/scss/components/tables/_table-bootgrid.scss
Normal file
14
public/style/scss/components/tables/_table-bootgrid.scss
Normal file
@ -0,0 +1,14 @@
|
||||
.bootgrid-header {
|
||||
padding: 0 !important;
|
||||
margin: 0;
|
||||
|
||||
@include respond(phone) {
|
||||
.actionBar {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.search {
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
235
public/style/scss/components/tables/_table-datatable.scss
Normal file
235
public/style/scss/components/tables/_table-datatable.scss
Normal file
@ -0,0 +1,235 @@
|
||||
//demo styles
|
||||
table#example{
|
||||
padding: 0rem 0 2rem 0;
|
||||
}
|
||||
table.dataTable{
|
||||
color:$black;
|
||||
border-radius:$radius;
|
||||
}
|
||||
#example2_wrapper {
|
||||
.dataTables_scrollBody {
|
||||
max-height: 33.25rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
#employees, #custommers {
|
||||
padding: .5rem 0 1rem 0;
|
||||
}
|
||||
//////////
|
||||
.dataTables_wrapper .dataTables_paginate{
|
||||
padding:25px 0;
|
||||
@include respond('laptop') {
|
||||
padding:10px 0;
|
||||
}
|
||||
}
|
||||
table.dataTable thead th,
|
||||
table.dataTable thead td {
|
||||
padding: 20px 15px;
|
||||
border-bottom: 1px solid $border;
|
||||
@include respond('laptop') {
|
||||
padding:8px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
table.dataTable tfoot th,
|
||||
table.dataTable tfoot td{
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
table.dataTable tbody td{
|
||||
background: #fff!important;
|
||||
}
|
||||
|
||||
table.dataTable thead th{
|
||||
color: $black;
|
||||
font-size:16px;
|
||||
white-space: nowrap;
|
||||
font-weight: 600;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: $white;
|
||||
}
|
||||
@include respond('laptop') {
|
||||
font-size:14px;
|
||||
}
|
||||
}
|
||||
|
||||
table.dataTable tbody td{
|
||||
font-size: 16px;
|
||||
padding: 15px 10px;
|
||||
@include respond('laptop') {
|
||||
padding:8px 10px;
|
||||
font-size:14px;
|
||||
}
|
||||
}
|
||||
|
||||
table.dataTable tr.selected{
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
table.dataTable tfoot th{
|
||||
color: $dark;
|
||||
font-weight: 600;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.dataTables_wrapper {
|
||||
input[type="search"], input[type="text"], select {
|
||||
border: 1px solid #e2e2e2;
|
||||
padding: .3rem 0.5rem;
|
||||
color: rgba(113, 93, 93, 1);
|
||||
border-radius: 5px;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $d-bg;
|
||||
border-color: $d-border;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.dataTables_length{
|
||||
margin-bottom: 15px;
|
||||
.bootstrap-select{
|
||||
width: 80px!important;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
table.dataTable.no-footer{
|
||||
border-bottom: 0;
|
||||
}
|
||||
.min-w850{
|
||||
min-width:850px;
|
||||
}
|
||||
|
||||
.rounded-lg{
|
||||
min-width:30px;
|
||||
}
|
||||
.dataTables_scroll{
|
||||
padding: 1rem 0;
|
||||
|
||||
&Foot{
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
||||
.dataTables_wrapper .dataTables_length,
|
||||
.dataTables_wrapper .dataTables_filter {
|
||||
@include media-breakpoint-down(md) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.dataTablesCard{
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 12px 23px 0px rgba(62, 73, 84, 0.04);
|
||||
border-radius: 0;
|
||||
|
||||
tbody tr:hover{
|
||||
background:$white!important;
|
||||
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
|
||||
td{
|
||||
background:transparent!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
table.dataTable.display tbody tr:hover{
|
||||
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
|
||||
td{
|
||||
background:transparent!important;
|
||||
}
|
||||
}
|
||||
.dataTables_wrapper .dataTables_info {
|
||||
padding:25px 0;
|
||||
@include respond('laptop') {
|
||||
padding:8px 0;
|
||||
}
|
||||
}
|
||||
table.dataTable.display.white-border td{
|
||||
border-color:$white;
|
||||
}
|
||||
table.dataTable.row-border tbody th,
|
||||
table.dataTable.row-border tbody td,
|
||||
table.dataTable.display tbody th,
|
||||
table.dataTable.display tbody td {
|
||||
border-color: $border-color;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
table.dataTable thead .sorting{
|
||||
background-position: center right 15px;
|
||||
}
|
||||
|
||||
.dataTables_wrapper .dataTables_paginate{
|
||||
border-radius:$radius;
|
||||
span{
|
||||
border-radius:$radius;
|
||||
display: inline-block;
|
||||
background:rgba($primary,0.08);
|
||||
border:0px solid $primary;
|
||||
margin: 0 0;
|
||||
|
||||
a{
|
||||
color:$white;
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
.paginate_button{
|
||||
border: 0 !important;
|
||||
padding: 15px 24px;
|
||||
background: transparent !important;
|
||||
border-radius: $radius;
|
||||
color:$primary !important;
|
||||
font-size:16px;
|
||||
margin:0;
|
||||
display:inline-block;
|
||||
@include respond('laptop') {
|
||||
padding: 8px 15px;
|
||||
font-size:14px;
|
||||
}
|
||||
&:hover,
|
||||
&.current:hover,
|
||||
&.current{
|
||||
color:$white !important;
|
||||
background:$primary !important;
|
||||
}
|
||||
|
||||
&.previous,
|
||||
&.next{
|
||||
background:$white!important;
|
||||
color:$primary !important;
|
||||
margin: 0 10px;
|
||||
border:0px solid $primary!important;
|
||||
&:hover{
|
||||
background:$primary!important;
|
||||
color:$white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
4
public/style/scss/components/tables/_table-footable.scss
Normal file
4
public/style/scss/components/tables/_table-footable.scss
Normal file
@ -0,0 +1,4 @@
|
||||
.fooicon {
|
||||
font-size: 1.25rem;
|
||||
color: $dark;
|
||||
}
|
||||
25
public/style/scss/components/tables/_table-jsgrid.scss
Normal file
25
public/style/scss/components/tables/_table-jsgrid.scss
Normal file
@ -0,0 +1,25 @@
|
||||
.jsgrid-table{
|
||||
|
||||
.jsgrid-header-row{
|
||||
|
||||
& > .jsgrid-header-cell{
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
& > tbody > tr > td{
|
||||
padding: 1.2em;
|
||||
}
|
||||
|
||||
.jsgrid-insert-row, .jsgrid-edit-row{
|
||||
|
||||
input, select{
|
||||
border: 1px solid #DDDFE1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jsgrid .jsgrid-button{
|
||||
border: 0 !important;
|
||||
margin-left: 10px;
|
||||
}
|
||||
5
public/style/scss/components/tables/_table.scss
Normal file
5
public/style/scss/components/tables/_table.scss
Normal file
@ -0,0 +1,5 @@
|
||||
@import "./table-basic";
|
||||
@import "./table-bootgrid";
|
||||
@import "./table-datatable";
|
||||
@import "./table-footable";
|
||||
@import "./table-jsgrid";
|
||||
24
public/style/scss/components/uc/_addons.scss
Normal file
24
public/style/scss/components/uc/_addons.scss
Normal file
@ -0,0 +1,24 @@
|
||||
@import "./uc-blockui";
|
||||
@import "./uc-bootstrap-select";
|
||||
@import "./uc-clipboard";
|
||||
@import "./uc-ticker";
|
||||
@import "./uc-typeahead";
|
||||
@import "./uc-weather";
|
||||
@import "./uc-noui-slider";
|
||||
@import "./uc-nestable";
|
||||
@import "./uc-pignose-calender";
|
||||
@import "./uc-horizontal-timeline";
|
||||
@import "./uc-lightgallery";
|
||||
@import "./uc-toastr";
|
||||
@import "./jqvmap";
|
||||
@import "./perfect-scroll";
|
||||
@import "./dropzone";
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
3
public/style/scss/components/uc/_dropzone.scss
Normal file
3
public/style/scss/components/uc/_dropzone.scss
Normal file
@ -0,0 +1,3 @@
|
||||
// dropzone
|
||||
.dropzone{
|
||||
}
|
||||
27
public/style/scss/components/uc/_jqvmap.scss
Normal file
27
public/style/scss/components/uc/_jqvmap.scss
Normal file
@ -0,0 +1,27 @@
|
||||
|
||||
.jqvmap-zoomin, .jqvmap-zoomout
|
||||
{
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
background: #000000;
|
||||
padding: 3px;
|
||||
color: white;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
cursor: pointer;
|
||||
line-height: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.jqvmap-zoomin
|
||||
{
|
||||
top: 10px;
|
||||
}
|
||||
.jqvmap-zoomout
|
||||
{
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
|
||||
88
public/style/scss/components/uc/_perfect-scroll.scss
Normal file
88
public/style/scss/components/uc/_perfect-scroll.scss
Normal file
@ -0,0 +1,88 @@
|
||||
// .deznav-scroll{
|
||||
// .ps__rail-x:hover,
|
||||
// .ps__rail-y:hover,
|
||||
// .ps__rail-x:focus,
|
||||
// .ps__rail-y:focus,
|
||||
// .ps__rail-x.ps--clicking,
|
||||
// .ps__rail-y.ps--clicking {
|
||||
// background-color: #f00;
|
||||
// opacity: 0.9;
|
||||
// }
|
||||
// .ps__rail-y:hover > .ps__thumb-y,
|
||||
// .ps__rail-y:focus > .ps__thumb-y,
|
||||
// .ps__rail-y.ps--clicking .ps__thumb-y {
|
||||
// background-color: #f00;
|
||||
// width: 4px;
|
||||
// }
|
||||
// .ps__thumb-y {
|
||||
// background-color: #f00;
|
||||
// width: 4px;
|
||||
// }
|
||||
// }
|
||||
.ps__rail-x:hover,
|
||||
.ps__rail-y:hover,
|
||||
.ps__rail-x:focus,
|
||||
.ps__rail-y:focus,
|
||||
.ps__rail-x.ps--clicking,
|
||||
.ps__rail-y.ps--clicking {
|
||||
background-color: transparent;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.ps__rail-y:hover>.ps__thumb-y,
|
||||
.ps__rail-y:focus>.ps__thumb-y,
|
||||
.ps__rail-y.ps--clicking .ps__thumb-y {
|
||||
background-color: #DAE2F3;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.ps__thumb-y {
|
||||
background-color: #DAE2F3;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.total-average {
|
||||
position: relative;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.widget-chat {
|
||||
position: relative;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.widget-todo {
|
||||
position: relative;
|
||||
height: 210px;
|
||||
}
|
||||
|
||||
.widget-team {
|
||||
position: relative;
|
||||
height: 285px;
|
||||
}
|
||||
|
||||
.widget-timeline {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.widget-comments {
|
||||
position: relative;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.sidebar-right-inner {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.widget-team {
|
||||
.ps .ps__rail-x:hover,
|
||||
.ps .ps__rail-y:hover,
|
||||
.ps .ps__rail-x:focus,
|
||||
.ps .ps__rail-y:focus,
|
||||
.ps .ps__rail-x.ps--clicking,
|
||||
.ps .ps__rail-y.ps--clicking {
|
||||
background-color: transparent!important;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
17
public/style/scss/components/uc/_uc-blockui.scss
Normal file
17
public/style/scss/components/uc/_uc-blockui.scss
Normal file
@ -0,0 +1,17 @@
|
||||
.blockUI.blockMsg.blockPage {
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
#loginForm {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.blockMsg {
|
||||
border: 0px!important;
|
||||
width: 20%!important;
|
||||
h1{
|
||||
font-size: 16px;
|
||||
padding: 8px 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
45
public/style/scss/components/uc/_uc-bootstrap-select.scss
Normal file
45
public/style/scss/components/uc/_uc-bootstrap-select.scss
Normal file
@ -0,0 +1,45 @@
|
||||
.bootstrap-select{
|
||||
margin-bottom: 0;
|
||||
|
||||
.btn {
|
||||
border: 1px solid $border !important;
|
||||
background-color: transparent !important;
|
||||
font-weight:400;
|
||||
color: $body-color !important;
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color:$d-border !important;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
outline: none !important;
|
||||
outline-offset: 0;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: $body-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-menu{
|
||||
border-color: $border !important;
|
||||
box-shadow:$shadow;
|
||||
|
||||
.dropdown-item{
|
||||
padding: 0.25rem 1rem;
|
||||
}
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $border !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.input-group > .bootstrap-select:not(:first-child) .dropdown-toggle{
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.input-group > .bootstrap-select:not(:last-child) .dropdown-toggle{
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
10
public/style/scss/components/uc/_uc-clipboard.scss
Normal file
10
public/style/scss/components/uc/_uc-clipboard.scss
Normal file
@ -0,0 +1,10 @@
|
||||
@import "../../abstracts/variable";
|
||||
|
||||
.clipboard-btn {
|
||||
transition: all .1s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
9
public/style/scss/components/uc/_uc-counterup.scss
Normal file
9
public/style/scss/components/uc/_uc-counterup.scss
Normal file
@ -0,0 +1,9 @@
|
||||
.counter-wrapper {
|
||||
.counter {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
254
public/style/scss/components/uc/_uc-horizontal-timeline.scss
Normal file
254
public/style/scss/components/uc/_uc-horizontal-timeline.scss
Normal file
@ -0,0 +1,254 @@
|
||||
.cd-h-timeline {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.cd-h-timeline--loaded { // show the timeline after dates position has been set (using JavaScript)
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.cd-h-timeline__container {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.cd-h-timeline__dates {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
margin: 0 40px;
|
||||
overflow: hidden;
|
||||
|
||||
&::after, &::before { // these are used to create a shadow effect at the sides of the timeline
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
background: $primary;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: 0;
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.cd-h-timeline__line { // grey line
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 49px;
|
||||
height: 2px; // width will be set using JavaScript
|
||||
background-color: $primary;
|
||||
transition: transform 0.4s;
|
||||
}
|
||||
|
||||
.cd-h-timeline__filling-line { // green filling line
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: $success;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left center;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.cd-h-timeline__date {
|
||||
position: absolute;
|
||||
bottom: 0; // left position will be set using JavaScript
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
font-size: 0.8em;
|
||||
padding-bottom: var(--space-sm);
|
||||
color: var(--cd-color-1);
|
||||
user-select: none; // improve swipe
|
||||
text-decoration: none;
|
||||
|
||||
&::after { // this is used to create the event spot
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: -5px;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 50%;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-color: lighten($primary, 0.9);
|
||||
background-color: $primary;
|
||||
transition: background-color 0.3s, border-color .3s;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
background-color: $success;
|
||||
border-color: $success;
|
||||
}
|
||||
|
||||
// @include breakpoint(md) {
|
||||
// font-size: 0.7em;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
|
||||
.cd-h-timeline__date--selected {
|
||||
pointer-events: none;
|
||||
|
||||
&::after {
|
||||
background-color: $success;
|
||||
border-color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
.cd-h-timeline__date--older-event::after {
|
||||
border-color: $success;
|
||||
}
|
||||
|
||||
.cd-h-timeline__navigation { // arrows to navigate the timeline
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
border-radius: 50%;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-color: lighten($primary, 0.9);
|
||||
transition: border-color 0.3s;
|
||||
|
||||
&::after { // arrow icon
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
background: url(../images/svg/cd-arrow.svg) no-repeat 0 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
.cd-h-timeline__navigation--prev {
|
||||
left: 0;
|
||||
transform: translateY(-50%) rotate(180deg);
|
||||
}
|
||||
|
||||
.cd-h-timeline__navigation--next {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.cd-h-timeline__navigation--inactive {
|
||||
cursor: not-allowed;
|
||||
|
||||
&::after {
|
||||
background-position: 0 -16px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: lighten($primary, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
.cd-h-timeline__events { // container of events info
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
transition: height .4s;
|
||||
}
|
||||
|
||||
.cd-h-timeline__event { // single event info
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transform: translateX(-100%);
|
||||
padding: 1px 5%;
|
||||
opacity: 0;
|
||||
animation-duration: 0.4s;
|
||||
animation-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
.cd-h-timeline__event--selected { // selected event info
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.cd-h-timeline__event--enter-right,
|
||||
.cd-h-timeline__event--leave-right { // animate event info
|
||||
animation-name: cd-enter-right;
|
||||
}
|
||||
|
||||
.cd-h-timeline__event--enter-left,
|
||||
.cd-h-timeline__event--leave-left { // animate event info
|
||||
animation-name: cd-enter-left;
|
||||
}
|
||||
|
||||
.cd-h-timeline__event--leave-right,
|
||||
.cd-h-timeline__event--leave-left {
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
.cd-h-timeline__event-content {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.cd-h-timeline__event-title {
|
||||
color: var(--cd-color-1);
|
||||
font-family: var(--font-secondary);
|
||||
font-weight: 700;
|
||||
font-size: var(--text-xxxl);
|
||||
}
|
||||
|
||||
.cd-h-timeline__event-date {
|
||||
display: block;
|
||||
font-style: italic;
|
||||
margin: var(--space-xs) auto;
|
||||
|
||||
&::before {
|
||||
content: '- ';
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cd-enter-right {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cd-enter-left {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
40
public/style/scss/components/uc/_uc-lightgallery.scss
Normal file
40
public/style/scss/components/uc/_uc-lightgallery.scss
Normal file
@ -0,0 +1,40 @@
|
||||
/* Light Gallery */
|
||||
.lg-actions .lg-next,
|
||||
.lg-actions .lg-prev,
|
||||
.lg-sub-html,
|
||||
.lg-toolbar{
|
||||
background-color: rgba(30, 30, 30, .6);
|
||||
}
|
||||
.lg-outer{
|
||||
.lg-toogle-thumb,
|
||||
.lg-thumb-outer,
|
||||
.lg-img-wrap,
|
||||
.lg-item{
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.lg-thumb-outer.lg-grab,
|
||||
.lg-toogle-thumb.lg-icon{
|
||||
background-color: rgba(30, 30, 30, .6);
|
||||
}
|
||||
.lg-backdrop {
|
||||
background-color: rgba(30, 30, 30, 0.9);
|
||||
}
|
||||
.lg-outer .lg-toogle-thumb,
|
||||
.lg-actions .lg-next,
|
||||
.lg-actions .lg-prev,
|
||||
.lg-toolbar .lg-icon,
|
||||
#lg-counter{
|
||||
color: $white;
|
||||
}
|
||||
.lg-outer{
|
||||
.lg-thumb-item{
|
||||
&.active,
|
||||
&:hover{
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.lightimg{
|
||||
cursor: pointer;
|
||||
}
|
||||
43
public/style/scss/components/uc/_uc-nestable.scss
Normal file
43
public/style/scss/components/uc/_uc-nestable.scss
Normal file
@ -0,0 +1,43 @@
|
||||
// Variable.scss
|
||||
|
||||
.nestable-cart {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// .dd-item > button {
|
||||
// height: 2.1rem;
|
||||
// }
|
||||
.dd-handle {
|
||||
color: $white;
|
||||
background: $primary;
|
||||
border-radius: 5px;
|
||||
padding: 8px 15px;
|
||||
height:auto;
|
||||
border: 1px solid $border;
|
||||
}
|
||||
.dd-handle:hover {
|
||||
color: $white;
|
||||
background: $primary;
|
||||
}
|
||||
// #nestable2 .dd-handle {
|
||||
// color: $white;
|
||||
// border: 1px solid $border;
|
||||
// background: $primary;
|
||||
// }
|
||||
// #nestable2 .dd-handle:hover {
|
||||
// background: $primary;
|
||||
// }
|
||||
// #nestable2 .dd-item>button:before {
|
||||
// color: $white;
|
||||
// }
|
||||
.dd3-content:hover {
|
||||
color: $white;
|
||||
background: $primary;
|
||||
}
|
||||
.dd3-content {
|
||||
color: $white;
|
||||
}
|
||||
.dd-item>button{
|
||||
line-height:28px;
|
||||
color:$white;
|
||||
}
|
||||
112
public/style/scss/components/uc/_uc-noui-slider.scss
Normal file
112
public/style/scss/components/uc/_uc-noui-slider.scss
Normal file
@ -0,0 +1,112 @@
|
||||
@import "../../abstracts/variable";
|
||||
|
||||
|
||||
|
||||
.noUi-target {
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.noUi-connect {
|
||||
background-color: $primary;
|
||||
|
||||
&s {
|
||||
background-color: $grey;
|
||||
}
|
||||
|
||||
&.c-1-color {
|
||||
background-color: $success;
|
||||
}
|
||||
|
||||
&.c-2-color {
|
||||
background-color: $info;
|
||||
}
|
||||
|
||||
&.c-3-color {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
&.c-4-color {
|
||||
background-color: $warning;
|
||||
}
|
||||
}
|
||||
|
||||
.noUi-vertical {
|
||||
width: 0.375rem;
|
||||
}
|
||||
|
||||
.noUi-horizontal {
|
||||
height: 0.375rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.noUi-horizontal .noUi-handle, .noUi-vertical .noUi-handle {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 50px;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
background-color: $primary;
|
||||
|
||||
&::after, &::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.noUi-vertical .noUi-handle {
|
||||
left: -4px;
|
||||
top: -6px;
|
||||
}
|
||||
.noUi-horizontal .noUi-handle {
|
||||
top: -4px;
|
||||
}
|
||||
html:not([dir=rtl]) .noUi-horizontal .noUi-handle {
|
||||
right: -6px;
|
||||
}
|
||||
#slider-toggle {
|
||||
height: 50px;
|
||||
}
|
||||
#slider-toggle.off .noUi-handle {
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
|
||||
.colorpicker-slider {
|
||||
.sliders.noUi-target {
|
||||
|
||||
|
||||
&#red, &#green, &#blue {
|
||||
margin: 10px;
|
||||
display: inline-block;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
&#red .noUi-connect {
|
||||
background: #c0392b;
|
||||
}
|
||||
|
||||
&#green .noUi-connect {
|
||||
background: #27ae60;
|
||||
}
|
||||
|
||||
&#blue .noUi-connect {
|
||||
background: #2980b9;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#result {
|
||||
margin: 60px 26px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
color: rgb(127, 127, 127);
|
||||
background: rgb(127, 127, 127);
|
||||
border: 1px solid #fff;
|
||||
box-shadow: 0 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.slider-vertical {
|
||||
height: 18rem;
|
||||
}
|
||||
32
public/style/scss/components/uc/_uc-pignose-calender.scss
Normal file
32
public/style/scss/components/uc/_uc-pignose-calender.scss
Normal file
@ -0,0 +1,32 @@
|
||||
.pignose-calendar {
|
||||
box-shadow: none;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
border-color: $primary;
|
||||
|
||||
.pignose-calendar-top-date {
|
||||
background-color: $primary;
|
||||
|
||||
.pignose-calendar-top-month {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pignose-calendar.pignose-calendar-blue .pignose-calendar-body .pignose-calendar-row .pignose-calendar-unit.pignose-calendar-unit-active a {
|
||||
background-color: $primary;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.pignose-calendar .pignose-calendar-top {
|
||||
box-shadow: none;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.pignose-calendar.pignose-calendar-blue {
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.pignose-calendar .pignose-calendar-unit {
|
||||
height: 4.8em;
|
||||
}
|
||||
32
public/style/scss/components/uc/_uc-tagsinput.scss
Normal file
32
public/style/scss/components/uc/_uc-tagsinput.scss
Normal file
@ -0,0 +1,32 @@
|
||||
@import "../../abstracts/variable";
|
||||
|
||||
.bootstrap-tagsinput {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
padding-left: .5rem;
|
||||
border-radius: 0;
|
||||
border-color: $border;
|
||||
background-color: $white;
|
||||
width: 100%;
|
||||
|
||||
.tag {
|
||||
font-size: 0.875rem;
|
||||
background-color: $primary;
|
||||
// color: $white;
|
||||
border-radius: 0;
|
||||
align-items: center;
|
||||
border: 1px solid $border;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
flex: 1;
|
||||
height: 2.1rem;
|
||||
border-radius: 0;
|
||||
border-color: $border;
|
||||
// max-width: 105px;
|
||||
}
|
||||
|
||||
label{
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
}
|
||||
35
public/style/scss/components/uc/_uc-ticker.scss
Normal file
35
public/style/scss/components/uc/_uc-ticker.scss
Normal file
@ -0,0 +1,35 @@
|
||||
|
||||
|
||||
|
||||
|
||||
.crypto-ticker{
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
margin-top: 20px;
|
||||
padding: 10px 20px;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15);
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $dark-card;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#webticker-big {
|
||||
font: inherit !important;
|
||||
font-size: inherit !important;
|
||||
font-weight: normal !important;
|
||||
li{
|
||||
i{
|
||||
font-size: 18px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
p{
|
||||
margin-bottom: 0px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
// margin-left: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
63
public/style/scss/components/uc/_uc-toastr.scss
Normal file
63
public/style/scss/components/uc/_uc-toastr.scss
Normal file
@ -0,0 +1,63 @@
|
||||
.toast {
|
||||
&-success {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
&-info {
|
||||
background-color: $info;
|
||||
}
|
||||
|
||||
&-warning {
|
||||
background-color: $warning;
|
||||
}
|
||||
|
||||
&-error {
|
||||
background-color: $danger;
|
||||
}
|
||||
}
|
||||
|
||||
#toast-container {
|
||||
|
||||
&>div {
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
width: auto;
|
||||
max-width: 250px;
|
||||
opacity: 1;
|
||||
|
||||
@at-root [direction="rtl"] & {
|
||||
padding: 15px 50px 15px 15px;
|
||||
background-position: calc(100% - 15px);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.toast-title {
|
||||
margin-bottom: 5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.toast-message {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.toast-close-button {
|
||||
opacity: 1;
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
[direction="rtl"] {
|
||||
.toast-top-right.demo_rtl_class {
|
||||
left: 12px;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
29
public/style/scss/components/uc/_uc-typeahead.scss
Normal file
29
public/style/scss/components/uc/_uc-typeahead.scss
Normal file
@ -0,0 +1,29 @@
|
||||
@import "../../abstracts/variable";
|
||||
|
||||
.twitter-typeahead {
|
||||
width: 100%;
|
||||
|
||||
// .form-control {
|
||||
// background-color: $l-bg !important;
|
||||
// }
|
||||
|
||||
.tt-dataset.tt-dataset-states {
|
||||
border: 1px solid $border;
|
||||
}
|
||||
|
||||
.tt-menu {
|
||||
width: 100%;
|
||||
background-color: $white;
|
||||
|
||||
.tt-suggestion {
|
||||
padding: 0.625rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
33
public/style/scss/components/uc/_uc-weather.scss
Normal file
33
public/style/scss/components/uc/_uc-weather.scss
Normal file
@ -0,0 +1,33 @@
|
||||
// Variable.scss
|
||||
|
||||
.weather-one {
|
||||
i {
|
||||
font-size: 8rem;
|
||||
position : relative;
|
||||
top : .5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
display : inline-block;
|
||||
float : right;
|
||||
font-size: 4.8rem;
|
||||
}
|
||||
|
||||
.city {
|
||||
position : relative;
|
||||
text-align: right;
|
||||
top : -2.5rem;
|
||||
}
|
||||
|
||||
.currently {
|
||||
font-size : 1.6rem;
|
||||
font-weight: 400;
|
||||
position : relative;
|
||||
top : 2.5rem;
|
||||
}
|
||||
|
||||
.celcious {
|
||||
text-align: right;
|
||||
font-size : 2rem;
|
||||
}
|
||||
}
|
||||
26
public/style/scss/components/ui/_interfaces.scss
Normal file
26
public/style/scss/components/ui/_interfaces.scss
Normal file
@ -0,0 +1,26 @@
|
||||
@import "./ui-accordion";
|
||||
@import "./ui-alert";
|
||||
@import "./ui-badge";
|
||||
@import "./ui-breadcrumb";
|
||||
@import "./ui-button";
|
||||
@import "./ui-card";
|
||||
@import "./ui-carousel";
|
||||
@import "./ui-dropdown";
|
||||
@import "./ui-grid";
|
||||
@import "./ui-label";
|
||||
@import "./ui-list-group";
|
||||
@import "./ui-media";
|
||||
@import "./ui-menu";
|
||||
@import "./ui-modal";
|
||||
@import "./ui-pagination";
|
||||
@import "./ui-popover";
|
||||
@import "./ui-preloader";
|
||||
@import "./ui-progressbar";
|
||||
@import "./ui-ribbon";
|
||||
@import "./ui-scrollbar";
|
||||
@import "./ui-step";
|
||||
@import "./ui-tab";
|
||||
@import "./ui-tooltip";
|
||||
@import "./ui-timeline";
|
||||
|
||||
|
||||
454
public/style/scss/components/ui/_ui-accordion.scss
Normal file
454
public/style/scss/components/ui/_ui-accordion.scss
Normal file
@ -0,0 +1,454 @@
|
||||
.accordion {
|
||||
// accordion primary
|
||||
&-primary{
|
||||
.accordion__header {
|
||||
&.collapsed{
|
||||
background: $primary-light;
|
||||
border-color: $primary-light;
|
||||
color: #211c37;
|
||||
box-shadow:none;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $primary-opacity;
|
||||
border-color: $primary-opacity;
|
||||
color:$body-color;
|
||||
}
|
||||
}
|
||||
background:$primary;
|
||||
border-color:$primary;
|
||||
color: $white;
|
||||
box-shadow:0 15px 20px 0 rgba($primary, 0.15);
|
||||
}
|
||||
}
|
||||
&-primary-solid{
|
||||
.accordion__header {
|
||||
&.collapsed{
|
||||
background: $primary-light;
|
||||
border-color: $primary-light;
|
||||
color: #211c37;
|
||||
box-shadow:none;
|
||||
border-bottom-left-radius:$radius;
|
||||
border-bottom-right-radius:$radius;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $primary-opacity;
|
||||
border-color: $primary-opacity;
|
||||
color:$body-color;
|
||||
}
|
||||
}
|
||||
background:$primary;
|
||||
border-color:$primary;
|
||||
color: $white;
|
||||
box-shadow:0 -10px 20px 0 rgba($primary, 0.15);
|
||||
border-bottom-left-radius:0;
|
||||
border-bottom-right-radius:0;
|
||||
}
|
||||
.accordion__body {
|
||||
border: 2px solid $primary;
|
||||
border-top: none;
|
||||
box-shadow:0 15px 20px 0 rgba($primary, 0.15);
|
||||
border-bottom-left-radius:$radius;
|
||||
border-bottom-right-radius:$radius;
|
||||
}
|
||||
}
|
||||
|
||||
&-danger{
|
||||
.accordion__header {
|
||||
&.collapsed{
|
||||
background: $danger-light;
|
||||
border-color: $danger-light;
|
||||
color: #211c37;
|
||||
box-shadow:none;
|
||||
}
|
||||
background:$danger;
|
||||
border-color:$danger;
|
||||
color: $white;
|
||||
box-shadow:0 15px 20px 0 rgba($danger, 0.15);
|
||||
}
|
||||
}
|
||||
&-danger-solid{
|
||||
.accordion__header {
|
||||
&.collapsed{
|
||||
background: $danger-light;
|
||||
border-color: $danger-light;
|
||||
color: #211c37;
|
||||
box-shadow:none;
|
||||
border-bottom-left-radius:$radius;
|
||||
border-bottom-right-radius:$radius;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $danger-opacity;
|
||||
border-color: $danger-opacity;
|
||||
color:$body-color;
|
||||
}
|
||||
}
|
||||
background:$danger;
|
||||
border-color:$danger;
|
||||
color: $white;
|
||||
box-shadow:0 -10px 20px 0 rgba($danger, 0.15);
|
||||
border-bottom-left-radius:0;
|
||||
border-bottom-right-radius:0;
|
||||
}
|
||||
.accordion__body {
|
||||
border: 2px solid $danger;
|
||||
border-top: none;
|
||||
box-shadow:0 15px 20px 0 rgba($danger, 0.15);
|
||||
border-bottom-left-radius:$radius;
|
||||
border-bottom-right-radius:$radius;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//a single accrodion
|
||||
&__item {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
//accrodion header styles
|
||||
&__header {
|
||||
padding:1rem 1.75rem;
|
||||
border: 1px solid $border;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
color: $heading;
|
||||
font-weight: 400;
|
||||
border-radius:$radius;
|
||||
@include transitionMedium;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: $white;
|
||||
border-color: $d-border;
|
||||
}
|
||||
|
||||
|
||||
|
||||
//set the indicator font family
|
||||
&--indicator {
|
||||
font-family: 'themify';
|
||||
position: absolute;
|
||||
right: 1.5625rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
@at-root [direction="rtl"] & {
|
||||
right:auto;
|
||||
left: 1.5625rem;
|
||||
}
|
||||
&.indicator_bordered {
|
||||
display: inline-block;
|
||||
width: 25px;
|
||||
text-align: center;
|
||||
height: 25px;
|
||||
border: 1px solid $border;
|
||||
border-radius: 50%;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.collapsed) {
|
||||
.accordion__header--indicator {
|
||||
&::before {
|
||||
content: "\e622";
|
||||
}
|
||||
|
||||
//icon style
|
||||
&.style_two {
|
||||
&::before {
|
||||
content: "\e648";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
.accordion__header--indicator {
|
||||
&::before {
|
||||
content: "\e61a";
|
||||
}
|
||||
|
||||
//icon style
|
||||
&.style_two {
|
||||
&::before {
|
||||
content: "\e64b";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//accordion body styles
|
||||
&__body {
|
||||
&--text {
|
||||
padding: 0.875rem 1.25rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//accrodion with border
|
||||
&-bordered {
|
||||
.accordion__body {
|
||||
border: 1px solid $border;
|
||||
border-top: none;
|
||||
border-bottom-left-radius:$radius;
|
||||
border-bottom-right-radius:$radius;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
.accordion__header.collapsed{
|
||||
border-radius:$radius;
|
||||
}
|
||||
.accordion__header{
|
||||
border-bottom-left-radius:0;
|
||||
border-bottom-right-radius:0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//accrodion without space
|
||||
&-no-gutter {
|
||||
.accordion__item {
|
||||
margin-bottom: 0;
|
||||
|
||||
.accordion__header {
|
||||
&.collapsed {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.accordion__header {
|
||||
border-bottom: 1px solid $border;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
//not gutter and bordered
|
||||
&-no-gutter.accordion__bordered {
|
||||
.accordion__item {
|
||||
&:not(:last-child) {
|
||||
.accordion__body {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//indicator in left positon
|
||||
&-left-indicator {
|
||||
.accordion__header {
|
||||
&--text {
|
||||
padding-left: 2.5rem;
|
||||
}
|
||||
|
||||
&--indicator {
|
||||
right: auto;
|
||||
left: 1.5625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//with icon
|
||||
&-with-icon {
|
||||
.accordion__header {
|
||||
&--text {
|
||||
padding-left: 2.5rem;
|
||||
@at-root [direction="rtl"] & {
|
||||
padding-left: 0;
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&--icon {
|
||||
position: absolute;
|
||||
right: auto;
|
||||
left: 1.5625rem;
|
||||
font-family: 'themify';
|
||||
@at-root [direction="rtl"] & {
|
||||
left: auto;
|
||||
right: 1.5625rem;
|
||||
}
|
||||
&::before {
|
||||
content: "\e645";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//with header background
|
||||
&-header-bg {
|
||||
.accordion__header {
|
||||
background-color: $light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&--primary {
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
border-color:$primary;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&--info {
|
||||
background-color: $info;
|
||||
color: $white;
|
||||
border-color:$info;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $info;
|
||||
}
|
||||
}
|
||||
|
||||
&--success {
|
||||
background-color: $success;
|
||||
color: $white;
|
||||
border-color:$success;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $success;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//with header background and no space
|
||||
&-header-bg.accordion-no-gutter {
|
||||
.accordion__header {
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
.accordion__item{
|
||||
&:first-child{
|
||||
.accordion__header{
|
||||
border-top-left-radius:$radius;
|
||||
border-top-right-radius:$radius;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
.accordion__header{
|
||||
border-bottom-left-radius:$radius;
|
||||
border-bottom-right-radius:$radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.accordion-no-gutter {
|
||||
.accordion__header {
|
||||
border-radius: 0;
|
||||
}
|
||||
.accordion__header.collapsed {
|
||||
border-radius: 0;
|
||||
}
|
||||
.accordion__body{
|
||||
border-radius: 0;
|
||||
}
|
||||
.accordion__item{
|
||||
&:first-child{
|
||||
.accordion__header{
|
||||
border-top-left-radius:$radius;
|
||||
border-top-right-radius:$radius;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
.accordion__header.collapsed{
|
||||
border-bottom-left-radius:$radius;
|
||||
border-bottom-right-radius:$radius;
|
||||
}
|
||||
.accordion__body{
|
||||
border-bottom-left-radius:$radius;
|
||||
border-bottom-right-radius:$radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//with solid background
|
||||
&-solid-bg {
|
||||
.accordion__header {
|
||||
border-color: transparent;
|
||||
background-color: $primary-light;
|
||||
border-bottom-left-radius:0;
|
||||
border-bottom-right-radius:0;
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
&.collapsed{
|
||||
border-radius:$radius;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion__body {
|
||||
border-color: transparent;
|
||||
background-color: $primary-light;
|
||||
border-bottom-left-radius:$radius;
|
||||
border-bottom-right-radius:$radius;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//active header styles
|
||||
&-active-header {
|
||||
.accordion__header {
|
||||
&:not(.collapsed) {
|
||||
background-color: $info;
|
||||
border-color: $info;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//shadow in header
|
||||
&-header-shadow {
|
||||
.accordion__header {
|
||||
border: none;
|
||||
box-shadow: 0 0 0.9375rem -3px rgba($color: $black, $alpha: .3);
|
||||
}
|
||||
}
|
||||
|
||||
//stylishly rounded borders
|
||||
&-rounded-stylish {
|
||||
.accordion__header {
|
||||
border-top-left-radius: 0.375rem;
|
||||
border-top-right-radius: 0.375rem;
|
||||
}
|
||||
|
||||
.accordion__body {
|
||||
border-bottom-left-radius: 0.375rem;
|
||||
border-bottom-right-radius: 0.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
//smothly rounded accrodion header
|
||||
&-rounded {
|
||||
.accordion__header {
|
||||
border-radius: 0.3125rem;
|
||||
}
|
||||
}
|
||||
|
||||
//accordion gradient
|
||||
&-gradient {
|
||||
.accordion__header {
|
||||
color: $white;
|
||||
background-image: linear-gradient(to right, rgba(186, 1, 181, 0.85) 0%,rgba(103, 25, 255, .85) 100%);
|
||||
border-color: transparent;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
&.collapsed{
|
||||
border-bottom-left-radius: $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion__body {
|
||||
color: $white;
|
||||
background-image: linear-gradient(to right, rgba(186, 1, 181, 0.85) 0%,rgba(103, 25, 255, .85) 100%);
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
371
public/style/scss/components/ui/_ui-alert.scss
Normal file
371
public/style/scss/components/ui/_ui-alert.scss
Normal file
@ -0,0 +1,371 @@
|
||||
|
||||
|
||||
.alert{
|
||||
border-radius: $radius;
|
||||
padding:1rem 3rem 1rem 1.5rem;
|
||||
p{
|
||||
line-height:1.5;
|
||||
}
|
||||
}
|
||||
.alert-square{
|
||||
|
||||
}
|
||||
|
||||
.alert-rounded{
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
// Basic Alert
|
||||
|
||||
|
||||
.alert-primary{
|
||||
background: $primary-light;
|
||||
border-color: $primary-light;
|
||||
color: $primary;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $primary-opacity;
|
||||
border-color: $primary-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-secondary{
|
||||
background: $secondary-light;
|
||||
border-color: $secondary-light;
|
||||
color: $secondary;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $secondary-opacity;
|
||||
border-color: $secondary-opacity;
|
||||
color:$body-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.alert-success{
|
||||
background: $success-light;
|
||||
border-color: $success-light;
|
||||
color: $success;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $success-opacity;
|
||||
border-color: $success-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-warning{
|
||||
background: $warning-light;
|
||||
border-color: $warning-light;
|
||||
color: $warning;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $warning-opacity;
|
||||
border-color: $warning-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-danger{
|
||||
background: $danger-light;
|
||||
border-color: $danger-light;
|
||||
color: $danger;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $danger-opacity;
|
||||
border-color: $danger-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-info{
|
||||
background: $info-light;
|
||||
border-color: $info-light;
|
||||
color: $info;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $info-opacity;
|
||||
border-color: $info-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-dark{
|
||||
background: $dark-light;
|
||||
border-color: $dark-light;
|
||||
color: $dark;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $dark-opacity;
|
||||
border-color: $dark-opacity;
|
||||
color:$body-color;
|
||||
}
|
||||
}
|
||||
.alert-light{
|
||||
background: $light;
|
||||
border-color: $light;
|
||||
color: $dark;
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Alert alt
|
||||
|
||||
.alert-alt.alert-primary{
|
||||
border-left: 4px solid $primary;
|
||||
}
|
||||
|
||||
.alert-alt.alert-secondary{
|
||||
border-left: 4px solid $secondary;
|
||||
}
|
||||
|
||||
|
||||
.alert-alt.alert-success{
|
||||
border-left: 4px solid $success
|
||||
}
|
||||
|
||||
.alert-alt.alert-warning{
|
||||
border-left: 4px solid $warning;
|
||||
}
|
||||
|
||||
.alert-alt.alert-danger{
|
||||
border-left: 4px solid $danger;
|
||||
}
|
||||
|
||||
.alert-alt.alert-info{
|
||||
border-left: 4px solid $info;
|
||||
}
|
||||
|
||||
.alert-alt.alert-dark{
|
||||
border-left: 4px solid $dark;
|
||||
}
|
||||
.alert-alt.alert-light{
|
||||
border-left: 4px solid darken($light,15%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Alert alt with solid color
|
||||
|
||||
.alert-alt.alert-primary.solid{
|
||||
border-left: 4px solid darken($primary,25%)!important;
|
||||
}
|
||||
|
||||
.alert-alt.alert-secondary.solid{
|
||||
border-left: 4px solid darken($secondary,25%)!important;
|
||||
}
|
||||
|
||||
|
||||
.alert-alt.alert-success.solid{
|
||||
border-left: 4px solid darken($success, 25%)!important;
|
||||
}
|
||||
|
||||
.alert-alt.alert-warning.solid{
|
||||
border-left: 4px solid darken($warning,25%)!important;
|
||||
}
|
||||
|
||||
.alert-alt.alert-danger.solid{
|
||||
border-left: 4px solid darken($danger,25%)!important;
|
||||
}
|
||||
|
||||
.alert-alt.alert-info.solid{
|
||||
border-left: 4px solid darken($info,25%)!important;
|
||||
}
|
||||
|
||||
.alert-alt.alert-dark.solid{
|
||||
border-left: 4px solid darken($dark,25%)!important;
|
||||
}
|
||||
.alert-alt.alert-light.solid{
|
||||
border-left: 4px solid darken($light,25%)!important;
|
||||
}
|
||||
|
||||
|
||||
//Alert dismissable with solid color
|
||||
.alert-dismissible.solid{
|
||||
.close{
|
||||
&:hover{
|
||||
color: $white;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Alert Solid
|
||||
.alert.alert-primary.solid{
|
||||
background: $primary;
|
||||
color: $white;
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
.alert.alert-secondary.solid{
|
||||
background: $secondary;
|
||||
color: $white;
|
||||
border-color: $secondary;
|
||||
}
|
||||
.alert.alert-success.solid{
|
||||
background: $success;
|
||||
color: $white;
|
||||
border-color: $success;
|
||||
}
|
||||
|
||||
.alert.alert-warning.solid{
|
||||
background: $warning;
|
||||
color: $white;
|
||||
border-color: $warning;
|
||||
}
|
||||
|
||||
.alert.alert-danger.solid{
|
||||
background: $danger;
|
||||
color: $white;
|
||||
border-color: $danger;
|
||||
}
|
||||
|
||||
.alert.alert-info.solid{
|
||||
background: $info;
|
||||
color: $white;
|
||||
border-color: $info;
|
||||
}
|
||||
|
||||
|
||||
.alert.alert-dark.solid{
|
||||
background: $dark;
|
||||
color: $white;
|
||||
border-color: $dark;
|
||||
}
|
||||
|
||||
|
||||
.alert.alert-light.solid{
|
||||
background: $light;
|
||||
color: $dark;
|
||||
border-color: $light;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Alert right icon
|
||||
|
||||
.alert-right-icon{
|
||||
&>span i{
|
||||
font-size: 18px;
|
||||
margin-right: 5px;;
|
||||
}
|
||||
.close{
|
||||
i{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Alert Outline
|
||||
.alert.alert-outline-primary{
|
||||
background: transparent;
|
||||
color: $primary;
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
|
||||
.alert.alert-outline-secondary{
|
||||
background: transparent;
|
||||
color: $body-color;
|
||||
border-color: $secondary;
|
||||
}
|
||||
|
||||
|
||||
.alert.alert-outline-success{
|
||||
background: transparent;
|
||||
color: $success;
|
||||
border-color: $success;
|
||||
}
|
||||
|
||||
|
||||
.alert.alert-outline-info{
|
||||
background: transparent;
|
||||
color: $info;
|
||||
border-color: $info;
|
||||
}
|
||||
|
||||
|
||||
.alert.alert-outline-warning{
|
||||
background: transparent;
|
||||
color: $warning;
|
||||
border-color: $warning;
|
||||
}
|
||||
|
||||
.alert.alert-outline-danger{
|
||||
background: transparent;
|
||||
color: $danger;
|
||||
border-color: $danger;
|
||||
}
|
||||
|
||||
.alert.alert-outline-dark{
|
||||
background: transparent;
|
||||
color: $body-color;
|
||||
border-color: $dark;
|
||||
}
|
||||
|
||||
.alert.alert-outline-light{
|
||||
background: transparent;
|
||||
color: $dark;
|
||||
border-color: $light;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Alert Social
|
||||
.alert-social{
|
||||
color: $white;
|
||||
.alert-social-icon{
|
||||
align-self: center;
|
||||
margin-right: 0.9375rem;
|
||||
i{
|
||||
font-size: 42px;
|
||||
}
|
||||
}
|
||||
&.facebook{
|
||||
background-color: $facebook;
|
||||
}
|
||||
&.twitter{
|
||||
background-color: $twitter;
|
||||
}
|
||||
&.linkedin{
|
||||
background-color: $linkedin;
|
||||
}
|
||||
&.google-plus{
|
||||
background-color: $google-plus;
|
||||
}
|
||||
.close{
|
||||
&:hover{
|
||||
opacity: 1!important;
|
||||
color: $white!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Alert left icon
|
||||
|
||||
.left-icon-big{
|
||||
.alert-left-icon-big{
|
||||
align-self: center;
|
||||
margin-right: 0.9375rem;
|
||||
i{
|
||||
font-size: 35px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// &.primary{
|
||||
// background: $primary;
|
||||
// color: $white;
|
||||
// }
|
||||
}
|
||||
.media-body{
|
||||
// margin-left: 100px;
|
||||
}
|
||||
}
|
||||
[direction="rtl"]{
|
||||
.left-icon-big .alert-left-icon-big,
|
||||
.alert-social .alert-social-icon{
|
||||
margin-left: 0;
|
||||
margin-right: 0.9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
218
public/style/scss/components/ui/_ui-badge.scss
Normal file
218
public/style/scss/components/ui/_ui-badge.scss
Normal file
@ -0,0 +1,218 @@
|
||||
|
||||
|
||||
|
||||
.badge{
|
||||
line-height: 1.5;
|
||||
border-radius: $radius;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
padding: 4px 10px;
|
||||
border:1px solid transparent;
|
||||
}
|
||||
|
||||
.badge-rounded{
|
||||
border-radius: 20px;
|
||||
padding:3px 13px ;
|
||||
}
|
||||
.badge-circle{
|
||||
border-radius: 100px;
|
||||
padding: 3px 7px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.badge-outline-primary{
|
||||
border: 1px solid $primary;
|
||||
color: $primary;
|
||||
}
|
||||
.badge-outline-secondary{
|
||||
border: 1px solid $secondary;
|
||||
color: $secondary;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$body-color;
|
||||
}
|
||||
}
|
||||
.badge-outline-success{
|
||||
border: 1px solid $success;
|
||||
color: $success;
|
||||
}
|
||||
.badge-outline-info{
|
||||
border: 1px solid $info;
|
||||
color: $info;
|
||||
}
|
||||
.badge-outline-warning{
|
||||
border: 1px solid $warning;
|
||||
color: $warning;
|
||||
}
|
||||
.badge-outline-danger{
|
||||
border: 1px solid $danger;
|
||||
color: $danger;
|
||||
}
|
||||
.badge-outline-light{
|
||||
border: 1px solid $border;
|
||||
color: $dark;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$body-color;
|
||||
}
|
||||
}
|
||||
.badge-outline-dark{
|
||||
border: 1px solid $dark;
|
||||
color: $dark;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$body-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.badge-xs {
|
||||
font-size: 10px;
|
||||
padding: 0px 5px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.badge-sm {
|
||||
font-size: 11px;
|
||||
padding: 5px 8px;
|
||||
line-height: 11px;
|
||||
}
|
||||
//.badge-md {
|
||||
// font-size: 13px;
|
||||
// padding: 0px 9px;
|
||||
// line-height: 25px;
|
||||
//}
|
||||
.badge-lg {
|
||||
font-size: 14px;
|
||||
padding: 0px 10px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
|
||||
.badge-xl {
|
||||
font-size: 15px;
|
||||
padding: 0px 15px;
|
||||
line-height: 35px;
|
||||
}
|
||||
.badge-default{
|
||||
background: #ADB6C7;
|
||||
}
|
||||
.badge-success {
|
||||
background-color: $success;
|
||||
}
|
||||
.badge-info {
|
||||
background-color: $info;
|
||||
}
|
||||
.badge-primary {
|
||||
background-color: $primary;
|
||||
}
|
||||
.badge-warning {
|
||||
background-color: $warning;
|
||||
}
|
||||
.badge-danger {
|
||||
background-color: $danger;
|
||||
}
|
||||
.badge-dark {
|
||||
background-color: $dark;
|
||||
}
|
||||
.badge-light {
|
||||
background-color: $light;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.light.badge-default{
|
||||
background: #ADB6C7;
|
||||
}
|
||||
.light.badge-success {
|
||||
background-color: $success-light;
|
||||
color:$success;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $success-opacity;
|
||||
}
|
||||
}
|
||||
.light.badge-info {
|
||||
background-color: $info-light;
|
||||
color:$info;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $info-opacity;
|
||||
}
|
||||
}
|
||||
.light.badge-primary {
|
||||
background-color: $primary-light;
|
||||
color:$primary;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $primary-opacity;
|
||||
}
|
||||
}
|
||||
.light.badge-secondary {
|
||||
background-color: $secondary-light;
|
||||
color:$secondary;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $secondary-opacity;
|
||||
color:$body-color;
|
||||
}
|
||||
}
|
||||
.light.badge-warning {
|
||||
background-color: $warning-light;
|
||||
color:$warning;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $warning-opacity;
|
||||
}
|
||||
}
|
||||
.light.badge-danger {
|
||||
background-color: $danger-light;
|
||||
color:$danger;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $danger-opacity;
|
||||
}
|
||||
}
|
||||
.light.badge-dark {
|
||||
background-color: $dark-light;
|
||||
color:$dark;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $dark-opacity;
|
||||
color:$body-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//
|
||||
|
||||
.bootstrap-label{
|
||||
.label{
|
||||
display: inline-block;
|
||||
margin-right: 1rem;
|
||||
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge-demo{
|
||||
|
||||
.badge{
|
||||
margin-right: 5px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bootstrap-badge-buttons{
|
||||
|
||||
button{
|
||||
margin-right: .2rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
114
public/style/scss/components/ui/_ui-breadcrumb.scss
Normal file
114
public/style/scss/components/ui/_ui-breadcrumb.scss
Normal file
@ -0,0 +1,114 @@
|
||||
|
||||
.welcome-text{
|
||||
span,
|
||||
p{
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
.page-titles {
|
||||
margin-bottom: 25px;
|
||||
display: block;
|
||||
margin-left: -40px;
|
||||
margin-right: -40px;
|
||||
padding: 20px 40px;
|
||||
margin-top: -15px;
|
||||
background: $body-bg;
|
||||
display: block;
|
||||
|
||||
|
||||
|
||||
|
||||
[class*="col-"]{
|
||||
display: block !important;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
@include custommq($max: 1600px) {
|
||||
margin-left: -30px;
|
||||
margin-top: 0px;
|
||||
margin-right: -30px;
|
||||
margin-bottom: 30px;
|
||||
padding: 15px 30px;
|
||||
}
|
||||
@include respond('phone-land') {
|
||||
margin-left: -15px;
|
||||
margin-top: -15px;
|
||||
margin-right: -15px;
|
||||
margin-bottom: 0px;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.justify-content-sm-end{
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: 10px;
|
||||
margin-top: 0;
|
||||
color: #000;
|
||||
font-size: 1.75rem;
|
||||
font-weight: 600;
|
||||
|
||||
span {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
.breadcrumb {
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
// font-size: 0.875rem;
|
||||
li {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 18px;
|
||||
@include respond('phone-land') {
|
||||
font-size: 15px;
|
||||
}
|
||||
a{
|
||||
color: #656773;
|
||||
|
||||
}
|
||||
|
||||
&.active a{
|
||||
color: $primary;
|
||||
font-weight:600;
|
||||
}
|
||||
}
|
||||
|
||||
/* .breadcrumb-item + .breadcrumb-item {
|
||||
&:before {
|
||||
content: "\e606";
|
||||
font-family: 'simple-line-icons';
|
||||
// font-weight: 4;
|
||||
font-size: 10px;
|
||||
}
|
||||
} */
|
||||
|
||||
&-datepicker{
|
||||
font-size: 0.75rem;
|
||||
color: $muted;
|
||||
|
||||
&__icon{
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-widget{
|
||||
.border-dark{
|
||||
border-color: $gray-300!important;
|
||||
}
|
||||
h4{
|
||||
color: $strong;
|
||||
font-weight: 600;
|
||||
}
|
||||
@include respond('phone') {
|
||||
text-align: left!important;
|
||||
margin-bottom: 0.9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
989
public/style/scss/components/ui/_ui-button.scss
Normal file
989
public/style/scss/components/ui/_ui-button.scss
Normal file
@ -0,0 +1,989 @@
|
||||
// .qx_btn{
|
||||
// min-height: 50px;
|
||||
// min-width: 100px;
|
||||
// // font-weight: 700;
|
||||
// font-size: 16px;
|
||||
// }
|
||||
|
||||
|
||||
button{
|
||||
cursor: pointer;
|
||||
|
||||
&:focus{
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary{
|
||||
color:$white;
|
||||
}
|
||||
|
||||
|
||||
.btn {
|
||||
padding:0.938rem 1.5rem;
|
||||
border-radius: $radius;
|
||||
font-weight:500;
|
||||
font-size:1rem;
|
||||
// border-radius: 0px;
|
||||
// box-shadow: 0 4px 6px rgba(50,50,93,.05), 0 1px 3px rgba(0,0,0,.08);
|
||||
&:hover, &:focus, &:active, &.active{
|
||||
outline: 0!important;
|
||||
// box-shadow: 0 4px 05x rgba(50,50,93,.05), 0 1px 3px rgba(0,0,0,.08);
|
||||
}
|
||||
|
||||
@include respond('laptop') {
|
||||
padding: 0.625rem 1rem;
|
||||
font-size: 0.813rem;
|
||||
}
|
||||
|
||||
&-transparent {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.sharp {
|
||||
min-width: 40px;
|
||||
padding: 7px;
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
}
|
||||
.sharp.btn-xs{
|
||||
padding: 3px;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
min-width: 26px;
|
||||
min-height: 26px;
|
||||
}
|
||||
.light{
|
||||
|
||||
&.tp-btn{
|
||||
background-color:transparent;
|
||||
}
|
||||
&.btn-default{
|
||||
background: #ADB6C7;
|
||||
}
|
||||
&.btn-success {
|
||||
background-color: $success-light;
|
||||
border-color: $success-light;
|
||||
color:$success;
|
||||
g [fill]{
|
||||
fill:$success;
|
||||
}
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $success-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background-color: $success;
|
||||
border-color: $success;
|
||||
color: #fff;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-info {
|
||||
background-color: $info-light;
|
||||
border-color: $info-light;
|
||||
color:$info;
|
||||
g [fill]{
|
||||
fill:$info;
|
||||
}
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $info-opacity;
|
||||
border-color:transparent;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $info;
|
||||
border-color: $info;
|
||||
color: #fff;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-primary {
|
||||
background-color: $primary-light;
|
||||
border-color: $primary-light;
|
||||
color:$primary;
|
||||
g [fill]{
|
||||
fill:$primary;
|
||||
}
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $primary-opacity;
|
||||
border-color:transparent;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $primary;
|
||||
border-color: $primary;
|
||||
color: #fff;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
svg{
|
||||
path{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-secondary {
|
||||
background-color: $secondary-light;
|
||||
border-color: $secondary-light;
|
||||
color:$secondary;
|
||||
g [fill]{
|
||||
fill:$secondary;
|
||||
}
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $secondary-opacity;
|
||||
border-color:transparent;
|
||||
color:$white;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $secondary;
|
||||
border-color: $secondary;
|
||||
color: #fff;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-warning {
|
||||
background-color: $warning-light;
|
||||
border-color: $warning-light;
|
||||
color:$warning;
|
||||
g [fill]{
|
||||
fill:$warning;
|
||||
}
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $warning-opacity;
|
||||
border-color:transparent;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $warning;
|
||||
border-color: $warning;
|
||||
color: #fff;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-danger {
|
||||
background-color: $danger-light;
|
||||
border-color: $danger-light;
|
||||
color:$danger;
|
||||
g [fill]{
|
||||
fill:$danger;
|
||||
}
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $danger-opacity;
|
||||
border-color:transparent;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $danger;
|
||||
border-color: $danger;
|
||||
color: #fff;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
svg path{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-dark {
|
||||
background-color: $dark-light;
|
||||
border-color: $dark-light;
|
||||
color:$dark;
|
||||
g [fill]{
|
||||
fill:$dark;
|
||||
}
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $dark-opacity;
|
||||
border-color:transparent;
|
||||
color:$white;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $dark;
|
||||
border-color: $dark;
|
||||
color: #fff;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn.tp-btn{
|
||||
background-color:transparent;
|
||||
border-color: transparent;
|
||||
&.btn-default{
|
||||
background: #ADB6C7;
|
||||
}
|
||||
&.btn-success {
|
||||
color:$success;
|
||||
g [fill]{
|
||||
fill:$success;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $success;
|
||||
border-color: $success;
|
||||
color: #fff;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-info {
|
||||
color:$info;
|
||||
g [fill]{
|
||||
fill:$info;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $info;
|
||||
border-color: $info;
|
||||
color: #fff;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-primary {
|
||||
color:$primary;
|
||||
g [fill]{
|
||||
fill:$primary;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $primary;
|
||||
border-color: $primary;
|
||||
color: #fff;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-secondary {
|
||||
color:$secondary;
|
||||
g [fill]{
|
||||
fill:$secondary;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $secondary;
|
||||
border-color: $secondary;
|
||||
color: #fff;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-warning {
|
||||
color:$warning;
|
||||
g [fill]{
|
||||
fill:$warning;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $warning;
|
||||
border-color: $warning;
|
||||
color: #fff;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-danger {
|
||||
color:$danger;
|
||||
g [fill]{
|
||||
fill:$danger;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $danger;
|
||||
border-color: $danger;
|
||||
color: #fff;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-light {
|
||||
color:$dark;
|
||||
g [fill]{
|
||||
fill:$dark;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $light;
|
||||
border-color: $light;
|
||||
color: $dark;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-dark {
|
||||
color:$dark;
|
||||
g [fill]{
|
||||
fill:$dark;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $dark;
|
||||
border-color: $dark;
|
||||
color: #fff;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn.tp-btn-light{
|
||||
background-color:transparent;
|
||||
border-color: transparent;
|
||||
|
||||
&.btn-success {
|
||||
color:$success;
|
||||
g [fill]{
|
||||
fill:$success;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $success-light;
|
||||
border-color: $success-light;
|
||||
color:$success;
|
||||
g [fill]{
|
||||
fill:$success;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-info {
|
||||
color:$info;
|
||||
g [fill]{
|
||||
fill:$info;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $info-light;
|
||||
border-color: $info-light;
|
||||
color:$info;
|
||||
g [fill]{
|
||||
fill:$info;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-primary {
|
||||
color:$primary;
|
||||
g [fill]{
|
||||
fill:$primary;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $primary-light;
|
||||
border-color: $primary-light;
|
||||
color:$primary;
|
||||
g [fill]{
|
||||
fill:$primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-secondary {
|
||||
color:$secondary;
|
||||
g [fill]{
|
||||
fill:$secondary;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $secondary-light;
|
||||
border-color: $secondary-light;
|
||||
color:$secondary;
|
||||
g [fill]{
|
||||
fill:$secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-warning {
|
||||
color:$warning;
|
||||
g [fill]{
|
||||
fill:$warning;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $warning-light;
|
||||
border-color: $warning-light;
|
||||
color:$warning;
|
||||
g [fill]{
|
||||
fill:$warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-danger {
|
||||
color:$danger;
|
||||
g [fill]{
|
||||
fill:$danger;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $danger-light;
|
||||
border-color: $danger-light;
|
||||
color:$danger;
|
||||
g [fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.btn-dark {
|
||||
color:$dark;
|
||||
g [fill]{
|
||||
fill:$dark;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $dark-light;
|
||||
border-color: $dark-light;
|
||||
color: $dark;
|
||||
[fill]{
|
||||
fill:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.shadow.btn-primary {
|
||||
-webkit-box-shadow: 0 5px 15px 0 rgba($primary,0.2) !important;
|
||||
box-shadow: 0 5px 15px 0 rgba($primary,0.2) !important;
|
||||
}
|
||||
.shadow.btn-secondary {
|
||||
-webkit-box-shadow: 0 5px 15px 0 rgba($secondary,0.2) !important;
|
||||
box-shadow: 0 5px 15px 0 rgba($secondary,0.2) !important;
|
||||
}
|
||||
.shadow.btn-warning {
|
||||
-webkit-box-shadow: 0 5px 15px 0 rgba($warning,0.2) !important;
|
||||
box-shadow: 0 5px 15px 0 rgba($warning,0.2) !important;
|
||||
}
|
||||
.shadow.btn-danger {
|
||||
-webkit-box-shadow: 0 5px 15px 0 rgba($danger,0.2) !important;
|
||||
box-shadow: 0 5px 15px 0 rgba($danger,0.2) !important;
|
||||
}
|
||||
.shadow.btn-info {
|
||||
-webkit-box-shadow: 0 5px 15px 0 rgba($info,0.2) !important;
|
||||
box-shadow: 0 5px 15px 0 rgba($info,0.2) !important;
|
||||
}
|
||||
.shadow.btn-success {
|
||||
-webkit-box-shadow: 0 5px 15px 0 rgba($success,0.2) !important;
|
||||
box-shadow: 0 5px 15px 0 rgba($success,0.2) !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.btn-xxs {
|
||||
padding: 6px 15px;
|
||||
font-size: 11px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.btn-xs {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.438rem 1rem;
|
||||
// padding : 0.5 2.5rem !important;
|
||||
font-weight: 600;
|
||||
@include respond('laptop') {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
font-size: 0.813rem !important;
|
||||
padding:0.625rem 1rem;
|
||||
@include respond('laptop') {
|
||||
padding: 0.375rem 1rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
.btn-md {
|
||||
font-size: 0.813rem !important;
|
||||
padding: 0.875rem 1.25rem;
|
||||
@include respond('laptop') {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.813rem;
|
||||
}
|
||||
}
|
||||
.btn-lg{
|
||||
padding: 1rem 2rem;
|
||||
font-size: 1.125rem !important;
|
||||
@include respond('laptop') {
|
||||
padding: 0.75rem 1.5rem;
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-xl{
|
||||
padding: 0.6rem 1rem;
|
||||
|
||||
&.btn-default{
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-square {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn-rounded {
|
||||
border-radius: 30px !important;
|
||||
}
|
||||
|
||||
.btn-icon-right {
|
||||
border-left: 1px solid white;
|
||||
display: inline-block;
|
||||
margin: -.8rem 0 -.8rem 1rem;
|
||||
padding: 0.4375rem 0 0.4375rem 1rem;
|
||||
margin: -1rem -0.25rem -1rem 1rem;
|
||||
padding: 1rem 0 1rem 1.25rem;
|
||||
@include respond ('laptop'){
|
||||
padding: 1rem 0 1rem 0.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-icon-left {
|
||||
background: #fff;
|
||||
border-radius: 10rem;
|
||||
display: inline-block;
|
||||
margin: -0.5rem 0.75rem -0.5rem -1.188rem;
|
||||
padding: 0.5rem 0.80rem 0.5rem;
|
||||
float: left;
|
||||
@include respond('tab-land') {
|
||||
margin: -0.5rem 0.75rem -0.5rem -0.800rem;
|
||||
}
|
||||
}
|
||||
[direction="rtl"]{
|
||||
.btn-icon-left {
|
||||
margin: -.5rem -1.5rem -.5rem 1rem;
|
||||
}
|
||||
.btn-icon-right {
|
||||
border-left: 0px solid white;
|
||||
display: inline-block;
|
||||
margin: -.8rem 1rem -.8rem 0;
|
||||
padding: 0.4375rem 1rem 0.4375rem 0;
|
||||
border-right: 1px solid white;
|
||||
}
|
||||
}
|
||||
.toggle-dropdown::after {
|
||||
margin-left: 0.755em;
|
||||
}
|
||||
|
||||
.social-btn-icon {
|
||||
.btn {
|
||||
min-width : 7.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.social-icon {
|
||||
.btn {
|
||||
padding: .7rem 1.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-circle {
|
||||
height : 5rem;
|
||||
width : 5rem;
|
||||
border-radius: 50% !important;
|
||||
|
||||
&-sm {
|
||||
width: 4.5rem;
|
||||
height: 4.5rem;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
&-md {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
font-size: 2.5rem;
|
||||
|
||||
i{
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-lg {
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
font-size: 3.2rem;
|
||||
|
||||
i{
|
||||
font-size: 3.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-page{
|
||||
.btn{
|
||||
min-width: 110px;
|
||||
margin-right: 4px;
|
||||
margin-bottom: 8px;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// btn sizes
|
||||
.size-1{
|
||||
min-width: 160px !important;
|
||||
font-size: 24px;
|
||||
padding: 0.68rem 0.75rem;
|
||||
}
|
||||
|
||||
.size-2{
|
||||
font-size: 20px;
|
||||
min-width: 130px !important;
|
||||
padding: 0.57rem 0.75rem;
|
||||
}
|
||||
|
||||
.size-3{
|
||||
font-size: 14px;
|
||||
min-width: 110px !important;
|
||||
padding: 0.536rem 0.75rem;
|
||||
}
|
||||
.size-4{
|
||||
font-size: 14px;
|
||||
min-width: 100px !important;
|
||||
}
|
||||
.size-5{
|
||||
font-size: 14px;
|
||||
min-width: 90px !important;
|
||||
padding: .22rem 0.75rem;
|
||||
}
|
||||
.size-6{
|
||||
font-size: 13px;
|
||||
min-width: 80px !important;
|
||||
padding: 0.097rem 0.75rem;
|
||||
}
|
||||
.size-7{
|
||||
font-size: 12px;
|
||||
min-width: 60px !important;
|
||||
padding: 0.001rem 0.75rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.btn-light {
|
||||
background : $light;
|
||||
border-color: $light;
|
||||
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : lighten($light, 25%);
|
||||
border-color: lighten($light, 25%);
|
||||
}
|
||||
}
|
||||
.btn-outline-primary{
|
||||
&:hover{
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
.btn-outline-light{
|
||||
color: $dark;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$body-color;
|
||||
}
|
||||
}
|
||||
.btn-outline-secondary{
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$body-color;
|
||||
}
|
||||
}
|
||||
.btn-outline-dark{
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$body-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.btn-dark {
|
||||
background : $dark;
|
||||
border-color: $dark;
|
||||
color : $white;
|
||||
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($dark, 10%);
|
||||
color : $white;
|
||||
border-color: darken($dark, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group{
|
||||
|
||||
&.btn-rounded{
|
||||
|
||||
.btn:first-child{
|
||||
border-top-left-radius: 30px;
|
||||
border-bottom-left-radius: 30px;
|
||||
}
|
||||
|
||||
.btn:last-child{
|
||||
border-top-right-radius: 30px;
|
||||
border-bottom-right-radius: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
///////////////////
|
||||
// Social Buttons
|
||||
///////////////////
|
||||
|
||||
.btn-facebook {
|
||||
background : $facebook;
|
||||
border-color: $facebook;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($facebook, 10%);
|
||||
color : $white;
|
||||
border-color: darken($facebook, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-twitter {
|
||||
background : $twitter;
|
||||
border-color: $twitter;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($twitter, 10%);
|
||||
color : $white;
|
||||
border-color: darken($twitter, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-youtube {
|
||||
background : $youtube;
|
||||
border-color: $youtube;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($youtube, 10%);
|
||||
color : $white;
|
||||
border-color: darken($youtube, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-instagram {
|
||||
background : $instagram;
|
||||
border-color: $instagram;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($instagram, 10%);
|
||||
color : $white;
|
||||
border-color: darken($instagram, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-pinterest {
|
||||
background : $pinterest;
|
||||
border-color: $pinterest;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($pinterest, 10%);
|
||||
color : $white;
|
||||
border-color: darken($pinterest, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-linkedin {
|
||||
background : $linkedin;
|
||||
border-color: $linkedin;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($linkedin, 10%);
|
||||
color : $white;
|
||||
border-color: darken($linkedin, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-google-plus {
|
||||
background : $google-plus;
|
||||
border-color: $google-plus;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($google-plus, 10%);
|
||||
color : $white;
|
||||
border-color: darken($google-plus, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-google {
|
||||
background : $google;
|
||||
border-color: $google;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($google, 10%);
|
||||
color : $white;
|
||||
border-color: darken($google, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-snapchat {
|
||||
background : $snapchat;
|
||||
border-color: $snapchat;
|
||||
color : $black;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($snapchat, 10%);
|
||||
color : $black;
|
||||
border-color: darken($snapchat, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-whatsapp {
|
||||
background : $whatsapp;
|
||||
border-color: $whatsapp;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($whatsapp, 10%);
|
||||
color : $white;
|
||||
border-color: darken($whatsapp, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-tumblr {
|
||||
background : $tumblr;
|
||||
border-color: $tumblr;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($tumblr, 10%);
|
||||
color : $white;
|
||||
border-color: darken($tumblr, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-reddit {
|
||||
background : $reddit;
|
||||
border-color: $reddit;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($reddit, 10%);
|
||||
color : $white;
|
||||
border-color: darken($reddit, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-spotify {
|
||||
background : $spotify;
|
||||
border-color: $spotify;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($spotify, 10%);
|
||||
color : $white;
|
||||
border-color: darken($spotify, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-yahoo {
|
||||
background : $yahoo;
|
||||
border-color: $yahoo;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($yahoo, 10%);
|
||||
color : $white;
|
||||
border-color: darken($yahoo, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-dribbble {
|
||||
background : $dribbble;
|
||||
border-color: $dribbble;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($dribbble, 10%);
|
||||
color : $white;
|
||||
border-color: darken($dribbble, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-skype {
|
||||
background : $skype;
|
||||
border-color: $skype;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($skype, 10%);
|
||||
color : $white;
|
||||
border-color: darken($skype, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-quora {
|
||||
background : $quora;
|
||||
border-color: $quora;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($quora, 10%);
|
||||
color : $white;
|
||||
border-color: darken($quora, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-vimeo {
|
||||
background : $vimeo;
|
||||
border-color: $vimeo;
|
||||
color : $white;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background : darken($vimeo, 10%);
|
||||
color : $white;
|
||||
border-color: darken($vimeo, 10%);
|
||||
}
|
||||
}
|
||||
246
public/style/scss/components/ui/_ui-card.scss
Normal file
246
public/style/scss/components/ui/_ui-card.scss
Normal file
@ -0,0 +1,246 @@
|
||||
.card {
|
||||
margin-bottom: 1.875rem;
|
||||
background-color: $white;
|
||||
transition: all .5s ease-in-out;
|
||||
position: relative;
|
||||
border: 0px solid transparent;
|
||||
border-radius:$radius;
|
||||
box-shadow: 0px 12px 23px 0px rgba($secondary,0.04);
|
||||
height: calc(100% - 30px);
|
||||
|
||||
// z-index: 0;
|
||||
@include custommq($max: 575px) {
|
||||
margin-bottom:0.938rem;
|
||||
height: calc(100% - 0.938rem);
|
||||
}
|
||||
|
||||
&-body {
|
||||
padding: 1.875rem;
|
||||
@include respond('phone') {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
// line-height: 2.2rem;
|
||||
color: #000;
|
||||
text-transform: capitalize;
|
||||
// margin-bottom: 1.5rem;
|
||||
|
||||
&--large{
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
&--medium{
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&--small{
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-header {
|
||||
border-color: $border;
|
||||
position: relative;
|
||||
background: transparent;
|
||||
padding:1.5rem 1.875rem 1.25rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
// min-height: 65px;
|
||||
@include respond('phone') {
|
||||
padding: 1.25rem 1rem 1.25rem;
|
||||
}
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
|
||||
.card-title{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.subtitle{
|
||||
padding-top: 5px;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
&-footer {
|
||||
border-color: $border;
|
||||
background: transparent;
|
||||
padding: 1.25rem 1.875rem 1.25rem;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
@include respond('phone') {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.transparent-card{
|
||||
&.card{
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
///////////////////
|
||||
// Card action
|
||||
///////////////////
|
||||
.card-action {
|
||||
> a {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border-radius: 5px;
|
||||
border-color: transparent;
|
||||
text-align: center;
|
||||
background: darken($primary,57%);
|
||||
color: $white;
|
||||
margin-right: 8px;
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $d-bg;
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
&:hover,&:focus{
|
||||
background: darken($primary,57%);
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $d-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
i,span{
|
||||
font-size: 1rem;
|
||||
// color: #333333;
|
||||
}
|
||||
// padding: 0 .5rem;
|
||||
}
|
||||
|
||||
.dropdown{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 5px;
|
||||
border-color: transparent;
|
||||
text-align: center;
|
||||
margin-right: 8px;
|
||||
top: -2px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
background: darken($primary,57%);
|
||||
color: $primary;
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $d-bg;
|
||||
}
|
||||
|
||||
&:hover,&:focus{
|
||||
background: darken($primary,57%);
|
||||
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $d-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.btn{
|
||||
padding: 0;
|
||||
line-height: 27px;
|
||||
color: $white;
|
||||
|
||||
&:focus{
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-fullscreen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 99999999;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.card-loader {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
z-index: 999
|
||||
}
|
||||
|
||||
.card-loader i {
|
||||
margin: 0 auto;
|
||||
background: darken($primary,7%);
|
||||
padding: 10px;
|
||||
border-radius: 50%;
|
||||
color: $white;
|
||||
font-size: 1rem
|
||||
}
|
||||
|
||||
.rotate-refresh {
|
||||
-webkit-animation: mymove 0.8s infinite linear;
|
||||
animation: mymove 0.8s infinite linear;
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.date_picker {
|
||||
display: inline-block;
|
||||
padding: 8px;
|
||||
border: 1px solid $border;
|
||||
cursor: pointer;
|
||||
border-radius: .375rem;
|
||||
}
|
||||
.border-0{
|
||||
padding-bottom:0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@-webkit-keyframes mymove {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg)
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mymove {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg)
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
50
public/style/scss/components/ui/_ui-carousel.scss
Normal file
50
public/style/scss/components/ui/_ui-carousel.scss
Normal file
@ -0,0 +1,50 @@
|
||||
.carousel-custom{
|
||||
|
||||
&-prev, &-next{
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
background: $white;
|
||||
text-align: center;
|
||||
|
||||
i{
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background: linear-gradient(to right, rgba(245, 60, 121, 0.99) 0%, rgba(246, 104, 47, 0.99) 100%);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&-next{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 30px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&-prev{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 30px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.carousel-caption{
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.78);
|
||||
z-index:0;
|
||||
|
||||
h5{
|
||||
color: $white;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
p{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
142
public/style/scss/components/ui/_ui-dropdown.scss
Normal file
142
public/style/scss/components/ui/_ui-dropdown.scss
Normal file
@ -0,0 +1,142 @@
|
||||
.dropdown-toggle:focus {
|
||||
box-shadow: none!important;
|
||||
}
|
||||
|
||||
.dropdown-outline{
|
||||
border: .1rem solid $primary;
|
||||
}
|
||||
|
||||
.dropdown-menu{
|
||||
font-size: inherit;
|
||||
border: 0;
|
||||
box-shadow: 0 10px 40px 0 rgba(32,28,69,0.1);
|
||||
margin-top:0;
|
||||
border-radius: $radius;
|
||||
overflow: hidden;
|
||||
|
||||
.dropdown-item{
|
||||
font-size: 16px;
|
||||
color:$body-color;
|
||||
padding: 0.5rem 1.75rem;
|
||||
|
||||
@include respond('laptop') {
|
||||
padding: 0.375rem 1rem;
|
||||
font-size: 14px;
|
||||
}
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active{
|
||||
color: $primary;
|
||||
background:#F4F5F9;
|
||||
}
|
||||
&.active,
|
||||
&:active{
|
||||
color: $primary !important;
|
||||
}
|
||||
}
|
||||
|
||||
@at-root [direction="rtl"] #{&} {
|
||||
right: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
////////////////////
|
||||
// Custom Dropdown
|
||||
///////////////////
|
||||
.dropdown-toggle-split {
|
||||
padding: 0 10px;
|
||||
opacity: 0.85;
|
||||
&:after{
|
||||
margin-left:0 !important;
|
||||
}
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover{
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
.dropleft .dropdown-toggle:before,
|
||||
.dropright .dropdown-toggle:before,
|
||||
.dropup .dropdown-toggle:after,
|
||||
.dropdown-toggle:after {
|
||||
content:"\f107";
|
||||
font-family:FontAwesome;
|
||||
border: 0;
|
||||
vertical-align: middle;
|
||||
margin-left: 0.25em;
|
||||
line-height: 1;
|
||||
}
|
||||
.dropup .dropdown-toggle:after{
|
||||
content:"\f106";
|
||||
}
|
||||
.dropleft .dropdown-toggle::before {
|
||||
content:"\f104";
|
||||
}
|
||||
.dropright .dropdown-toggle::before {
|
||||
content:"\f105";
|
||||
}
|
||||
.dropright .dropdown-toggle::after {
|
||||
content:none;
|
||||
}
|
||||
.custom-dropdown{
|
||||
display: inline-block;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.dropdown-menu{
|
||||
border: 0px;
|
||||
min-width: 160px;
|
||||
// padding: 1rem;
|
||||
|
||||
}
|
||||
}
|
||||
.card-action{
|
||||
.custom-dropdown{
|
||||
// padding: 15px;
|
||||
margin: 0px;
|
||||
background: lighten($primary, 30%);
|
||||
&.show,&:focus,&:hover{
|
||||
background: $primary;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
i{
|
||||
display: inline-block;
|
||||
padding-top: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown{
|
||||
.dropdown-dots{
|
||||
position: relative;
|
||||
height: 5px;
|
||||
width: 5px;
|
||||
background: rgba($dark, 0.4);
|
||||
border-radius: 5px;
|
||||
display: block;
|
||||
&:after,
|
||||
&:before{
|
||||
content: "";
|
||||
height: 5px;
|
||||
width: 5px;
|
||||
background: rgba($dark, 0.4);
|
||||
position: absolute;
|
||||
border-radius: 5px;
|
||||
}
|
||||
&:after{
|
||||
right: -8px;
|
||||
}
|
||||
&:before{
|
||||
left: -8px;
|
||||
}
|
||||
|
||||
&.text-white{
|
||||
background: rgba($white, 0.7);
|
||||
&:after,
|
||||
&:before{
|
||||
background: rgba($white, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
20
public/style/scss/components/ui/_ui-grid.scss
Normal file
20
public/style/scss/components/ui/_ui-grid.scss
Normal file
@ -0,0 +1,20 @@
|
||||
.grid-col {
|
||||
padding: 0.5rem !important;
|
||||
background:$l-bg;
|
||||
// box-shadow: 2px 3px 10px 0px rgba(119, 119, 119, 0.1);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.row.grid {
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.row.grid .grid-col:first-child{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
154
public/style/scss/components/ui/_ui-label.scss
Normal file
154
public/style/scss/components/ui/_ui-label.scss
Normal file
@ -0,0 +1,154 @@
|
||||
.label {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
font-size: 0.75rem;
|
||||
padding: .2rem .8rem;
|
||||
|
||||
&-fixed {
|
||||
width: 7.5rem;
|
||||
padding: .6rem 0;
|
||||
|
||||
&-lg {
|
||||
width: 9.5rem;
|
||||
padding: .6rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-big {
|
||||
width: 16.8rem;
|
||||
font-size: 1.4rem;
|
||||
padding: 1.1rem 0;
|
||||
}
|
||||
|
||||
&-xl {
|
||||
width: 10.5rem;
|
||||
padding: 1.1rem 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
&-lg {
|
||||
width: 9.5rem;
|
||||
padding: 1.1rem 0;
|
||||
}
|
||||
|
||||
&-md {
|
||||
width: 8.5rem;
|
||||
padding: 1.1rem 0;
|
||||
}
|
||||
|
||||
&-sm {
|
||||
width: 7.5rem;
|
||||
padding: 1.1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.label-default{
|
||||
background: #ADB6C7;
|
||||
}
|
||||
|
||||
.label-primary{
|
||||
background: $primary;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.label-secondary{
|
||||
background: $secondary;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.label-info{
|
||||
background: $info;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.label-success{
|
||||
background: $success;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.label-warning{
|
||||
background: $warning;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.label-danger{
|
||||
background: $danger;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
||||
.label-light{
|
||||
background: $light;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
|
||||
.label-dark{
|
||||
background: $dark;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
code{
|
||||
word-break: break-word;
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
background: lighten($danger, 33%);
|
||||
color: $danger;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: rgba($danger, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.heading-labels{
|
||||
color: #333333;
|
||||
|
||||
& > *{
|
||||
margin-bottom: .8rem;
|
||||
}
|
||||
|
||||
h1{
|
||||
.label{
|
||||
font-size: 18px;
|
||||
font-weight: normal;
|
||||
padding: .4rem .9rem;
|
||||
}
|
||||
}
|
||||
|
||||
h2{
|
||||
.label{
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
padding: 0.3rem .9rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3{
|
||||
.label{
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
h4{
|
||||
.label{
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
h5{
|
||||
.label{
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
h6{
|
||||
.label{
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
36
public/style/scss/components/ui/_ui-list-group.scss
Normal file
36
public/style/scss/components/ui/_ui-list-group.scss
Normal file
@ -0,0 +1,36 @@
|
||||
.list-group-item {
|
||||
background-color: rgba(255,255,255,0);
|
||||
border: 1px solid $border;
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 0;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
}
|
||||
&:first-child {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-item.disabled, .list-group-item:disabled {
|
||||
color: #fff;
|
||||
background-color: $secondary;
|
||||
border-color: $secondary;
|
||||
}
|
||||
[class*="bg-"]{
|
||||
.list-group-item{
|
||||
border-color:rgba($white, 0.05);
|
||||
}
|
||||
}
|
||||
.bg-warning{
|
||||
.list-group-item{
|
||||
border-color:rgba($black, 0.05);
|
||||
}
|
||||
}
|
||||
// .list-group-item-action {
|
||||
// color: #fff;
|
||||
// }
|
||||
5
public/style/scss/components/ui/_ui-media.scss
Normal file
5
public/style/scss/components/ui/_ui-media.scss
Normal file
@ -0,0 +1,5 @@
|
||||
.media{
|
||||
img{
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
146
public/style/scss/components/ui/_ui-menu.scss
Normal file
146
public/style/scss/components/ui/_ui-menu.scss
Normal file
@ -0,0 +1,146 @@
|
||||
.vertical-card__menu {
|
||||
// box-shadow: none;
|
||||
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&--image {
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
border-top-left-radius: 0.25rem;
|
||||
border-top-right-radius: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&--status {
|
||||
&.closed {
|
||||
background: $danger;
|
||||
|
||||
&:after {
|
||||
border-top: 10px solid $danger;
|
||||
}
|
||||
|
||||
.ribbon-curve {
|
||||
border-top: 11px solid $danger;
|
||||
border-bottom: 10px solid $danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--desc {
|
||||
// padding: 0.9375rem 1.25rem;
|
||||
// border-left: 1px solid #e5e5e5;
|
||||
// border-right: 1px solid #e5e5e5;
|
||||
|
||||
p {
|
||||
margin-bottom: 0.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
&--price {
|
||||
font-size: 1.25rem;
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&--rating {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
&--title {
|
||||
// margin-bottom: 0.625rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&--button {
|
||||
button {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
&--location {
|
||||
// font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
padding: 15px 20px;
|
||||
background-color: $border;
|
||||
// border: 1px solid #e5e5e5;
|
||||
border-top: none;
|
||||
|
||||
@include custommq($min: 1200px, $max: 1440px) {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
span{
|
||||
color: $dark;
|
||||
margin-right: 0.3125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-card__menu {
|
||||
box-shadow: 0 0 7px rgba(173, 173, 173, 0.32);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 0;
|
||||
padding: 20px 30px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
&--image {
|
||||
flex-basis: 30%;
|
||||
max-width: 30%;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
max-width: unset;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&--title {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.3125rem;
|
||||
}
|
||||
|
||||
&--fav {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
&--price {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&--rating {
|
||||
font-size: 0.625rem;
|
||||
}
|
||||
|
||||
&--footer {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.prev_price {
|
||||
text-decoration: line-through;
|
||||
// color: $muted;
|
||||
font-size: 80%;
|
||||
opacity: 0.5;
|
||||
}
|
||||
108
public/style/scss/components/ui/_ui-modal.scss
Normal file
108
public/style/scss/components/ui/_ui-modal.scss
Normal file
@ -0,0 +1,108 @@
|
||||
// .modal{
|
||||
// border: 0;
|
||||
// z-index: 9999999999;
|
||||
|
||||
// &-content{
|
||||
// border: 0;
|
||||
// box-shadow: 0px 2px 21px 6px rgba(70, 66, 66, 0.26);
|
||||
// }
|
||||
// }
|
||||
|
||||
// // primary modal rule
|
||||
// #primaryModal{
|
||||
|
||||
// .modal-header{
|
||||
// background: $primary;
|
||||
|
||||
// .modal-title,button{
|
||||
// color: #fff;
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// //danger modal rule
|
||||
// #dangerModal{
|
||||
|
||||
// .modal-header{
|
||||
// background: $danger;
|
||||
|
||||
// .modal-title,button{
|
||||
// color: #fff;
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// //warning modal rule
|
||||
// #warningModal{
|
||||
|
||||
// .modal-header{
|
||||
// background: $warning;
|
||||
|
||||
// .modal-title,button{
|
||||
// color: #a39e06 ;
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// //success modal rule
|
||||
// #successModal{
|
||||
|
||||
// .modal-header{
|
||||
// background: $success;
|
||||
|
||||
// .modal-title,button{
|
||||
// color: #fff;
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// .bootstrap-modal-wrapper{
|
||||
|
||||
// button:not(:last-child){
|
||||
// margin-right: 7px;
|
||||
// }
|
||||
|
||||
// button{
|
||||
// margin-bottom: .5rem;
|
||||
|
||||
// &:focus{
|
||||
// box-shadow: none;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.modal-header{
|
||||
padding: 1rem 1.875rem;
|
||||
|
||||
.close{
|
||||
padding: 0.875rem 1.815rem;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
float: none;
|
||||
top: 0;
|
||||
font-size: 30px;
|
||||
font-weight: 100;
|
||||
}
|
||||
}
|
||||
.modal-body{
|
||||
padding: 1.875rem;
|
||||
}
|
||||
.modal-footer{
|
||||
padding: 1rem 1.875rem;
|
||||
}
|
||||
.modal-content{
|
||||
border-radius:$radius;
|
||||
}
|
||||
.modal-backdrop{
|
||||
z-index: 10!important;
|
||||
}
|
||||
320
public/style/scss/components/ui/_ui-pagination.scss
Normal file
320
public/style/scss/components/ui/_ui-pagination.scss
Normal file
@ -0,0 +1,320 @@
|
||||
.pagination .page-item{
|
||||
|
||||
.page-link{
|
||||
|
||||
|
||||
&:hover{
|
||||
background: $primary;
|
||||
border-color: $primary;
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
&.active .page-link{
|
||||
background: $primary;
|
||||
border-color: $primary;
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
.pagination {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.page-item {
|
||||
|
||||
&.page-indicator .page-link {
|
||||
padding: .65rem .8rem;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&.page-indicator:hover{
|
||||
.page-link{
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
.page-link {
|
||||
// height: 3.125rem;
|
||||
text-align: center;
|
||||
z-index:2;
|
||||
padding: 0.55rem 1rem;
|
||||
font-size: 1rem;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: $dark;
|
||||
// line-height: 2.375rem;
|
||||
border: 1px solid $border;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $d-border;
|
||||
color: $d-ctl;
|
||||
background: rgba(255, 255, 255, 0);
|
||||
}
|
||||
&:hover i,span{
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&:focus{
|
||||
outline: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background: $primary;
|
||||
color: $white;
|
||||
border-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.active .page-link {
|
||||
background-color: $primary;
|
||||
border-color: $primary;
|
||||
color: $white;
|
||||
box-shadow:0 10px 20px 0px rgba($primary, 0.2);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
|
||||
.page-link {
|
||||
// width: 4.0625rem;
|
||||
color: $dark;
|
||||
@include transitionMedium;
|
||||
}
|
||||
|
||||
&:last-child .page-link{
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:first-child .page-link{
|
||||
|
||||
@at-root [direction="rtl"] #{&} {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.no-bg{
|
||||
li:not(.page-indicator):not(.active) .page-link{
|
||||
background:transparent;
|
||||
border-color:transparent;
|
||||
|
||||
}
|
||||
&.pagination-primary{
|
||||
li:not(.page-indicator):not(.active):hover .page-link{
|
||||
background:$primary;
|
||||
border-color:$primary;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$primary;
|
||||
border-color:$primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pagination-danger{
|
||||
li:not(.page-indicator):not(.active):hover .page-link{
|
||||
background:$danger;
|
||||
border-color:$danger;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$danger;
|
||||
border-color:$danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pagination-info{
|
||||
li:not(.page-indicator):not(.active):hover .page-link{
|
||||
background:$info;
|
||||
border-color:$info;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$info;
|
||||
border-color:$info;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pagination-warning{
|
||||
li:not(.page-indicator):not(.active):hover .page-link{
|
||||
background:$warning;
|
||||
border-color:$warning;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$warning;
|
||||
border-color:$warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-primary{
|
||||
.page-item{
|
||||
.page-link{
|
||||
background:$primary-light;
|
||||
border-color:$primary-light;
|
||||
color:$primary;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$primary-opacity;
|
||||
border-color:transparent;
|
||||
color:$primary;
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&.active{
|
||||
.page-link{
|
||||
background:$primary;
|
||||
border-color:$primary;
|
||||
box-shadow:0 10px 20px 0px rgba($primary, 0.2);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-danger{
|
||||
.page-item{
|
||||
.page-link{
|
||||
background:$danger-light;
|
||||
border-color:$danger-light;
|
||||
color:$danger;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$danger-opacity;
|
||||
border-color:transparent;
|
||||
color:$danger;
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&.active{
|
||||
.page-link{
|
||||
background:$danger;
|
||||
border-color:$danger;
|
||||
box-shadow:0 10px 20px 0px rgba($danger, 0.2);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-info{
|
||||
.page-item{
|
||||
.page-link{
|
||||
background:$info-light;
|
||||
border-color:$info-light;
|
||||
color:$info;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$info-opacity;
|
||||
border-color:transparent;
|
||||
color:$info;
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&.active{
|
||||
.page-link{
|
||||
background:$info;
|
||||
border-color:$info;
|
||||
box-shadow:0 10px 20px 0px rgba($info, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-warning{
|
||||
.page-item{
|
||||
.page-link{
|
||||
background:$warning-light;
|
||||
border-color:$warning-light;
|
||||
color:$warning;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$warning-opacity;
|
||||
border-color:transparent;
|
||||
color:$warning;
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&.active{
|
||||
.page-link{
|
||||
background:$warning;
|
||||
border-color:$warning;
|
||||
box-shadow:0 10px 20px 0px rgba($warning, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-gutter{
|
||||
|
||||
.page-item{
|
||||
margin-right: 7px;
|
||||
|
||||
.page-link{
|
||||
border-radius: $radius !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-circle{
|
||||
.page-item{
|
||||
margin-right: 7px;
|
||||
|
||||
.page-link, &.page-indicator .page-link{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
line-height: 40px;
|
||||
border-radius: 50% !important;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.pagination-md{
|
||||
|
||||
.page-item{
|
||||
|
||||
.page-link{
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.pagination-sm{
|
||||
|
||||
.page-item{
|
||||
|
||||
&.page-indicator .page-link {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.page-link{
|
||||
padding: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.pagination-xs{
|
||||
|
||||
.page-item{
|
||||
|
||||
&.page-indicator .page-link {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.page-link{
|
||||
padding: 0;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
73
public/style/scss/components/ui/_ui-popover.scss
Normal file
73
public/style/scss/components/ui/_ui-popover.scss
Normal file
@ -0,0 +1,73 @@
|
||||
.popover{
|
||||
border: 2px solid $secondary;
|
||||
min-width: 210px;
|
||||
box-shadow: 0 0 30px 0 rgba(0,0,0,0.1);
|
||||
border-radius:0;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
&-header{
|
||||
background: $secondary;
|
||||
color: $white;
|
||||
font-weight: 300;
|
||||
border-radius:0;
|
||||
&::before{
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-body{
|
||||
font-size: 0.75rem;
|
||||
|
||||
}
|
||||
.popover-header{
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $dark-card;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bootstrap-popover-wrapper{
|
||||
.bootstrap-popover:not(:last-child){
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.bootstrap-popover{
|
||||
margin-bottom: .5rem;
|
||||
|
||||
button:hover,button:focus{
|
||||
background: $primary;
|
||||
color: $white;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .tooltip {
|
||||
// font-size: 15px;
|
||||
// }
|
||||
|
||||
|
||||
.bs-popover-top .arrow::after, .bs-popover-auto[x-placement^="top"] .arrow::after {
|
||||
bottom: 0px;
|
||||
border-top-color: $secondary;
|
||||
}
|
||||
|
||||
.bs-popover-left .arrow::after, .bs-popover-auto[x-placement^="left"] .arrow::after {
|
||||
right: 0px;
|
||||
border-left-color: $secondary;
|
||||
}
|
||||
|
||||
.bs-popover-right .arrow::after, .bs-popover-auto[x-placement^="right"] .arrow::after {
|
||||
left: 0px;
|
||||
border-right-color: $secondary;
|
||||
}
|
||||
|
||||
.bs-popover-bottom .arrow::after, .bs-popover-auto[x-placement^="bottom"] .arrow::after {
|
||||
top: 0px;
|
||||
border-bottom-color: $secondary;
|
||||
}
|
||||
|
||||
.note-popover{
|
||||
display: none;
|
||||
}
|
||||
0
public/style/scss/components/ui/_ui-preloader.scss
Normal file
0
public/style/scss/components/ui/_ui-preloader.scss
Normal file
183
public/style/scss/components/ui/_ui-pricing.scss
Normal file
183
public/style/scss/components/ui/_ui-pricing.scss
Normal file
@ -0,0 +1,183 @@
|
||||
.pricing-wrapper {
|
||||
margin-top: 7rem;
|
||||
|
||||
.pricing-heading-text {
|
||||
text-align: center;
|
||||
margin-bottom: 6rem;
|
||||
|
||||
h2 {
|
||||
font-size: 4.5rem;
|
||||
line-height: 1.2;
|
||||
color: $pale-sky;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
a{
|
||||
color: $pale-sky;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.plan-swither {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
margin-top: 3rem;
|
||||
|
||||
&>* {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.switch label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.badge {
|
||||
height: 5.5rem;
|
||||
width: 5.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.single-pricing-table {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
min-height: 89rem;
|
||||
|
||||
.upper-border {
|
||||
height: 1.5rem;
|
||||
border-top-right-radius: .5rem;
|
||||
border-top-left-radius: .5rem;
|
||||
|
||||
&.style-1 {
|
||||
@extend %gradient-1;
|
||||
}
|
||||
|
||||
&.style-2 {
|
||||
@extend %gradient-2;
|
||||
}
|
||||
|
||||
&.style-3 {
|
||||
@extend %gradient-3;
|
||||
}
|
||||
}
|
||||
|
||||
.plan-name {
|
||||
margin-top: 2rem;
|
||||
color: #6a707e;
|
||||
}
|
||||
|
||||
.plan-price {
|
||||
padding: 2.8rem 0;
|
||||
margin: 3rem 0;
|
||||
display: flex;
|
||||
color: $white;
|
||||
justify-content: center;
|
||||
|
||||
&.style-1 {
|
||||
@extend %gradient-1;
|
||||
}
|
||||
|
||||
&.style-2 {
|
||||
@extend %gradient-2;
|
||||
}
|
||||
|
||||
&.style-3 {
|
||||
@extend %gradient-3;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 6rem;
|
||||
color: $white;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.currency-timeplan {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.plan-icon {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.plan-specification {
|
||||
ul {
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
margin: 2.5rem 0;
|
||||
|
||||
del{
|
||||
color: $athensGray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
border: .1rem solid $border;
|
||||
margin-top: 4.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #2290ff;
|
||||
transition: all .2s;
|
||||
padding: 0.9rem 1.8rem;
|
||||
font-size: 1.7rem;
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
color: $white;
|
||||
|
||||
&.style-1 {
|
||||
@extend %gradient-1;
|
||||
}
|
||||
|
||||
&.style-2 {
|
||||
@extend %gradient-2;
|
||||
}
|
||||
|
||||
&.style-3 {
|
||||
@extend %gradient-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-footer-text {
|
||||
margin-bottom: 7rem;
|
||||
|
||||
p {
|
||||
margin-bottom: 4rem;
|
||||
|
||||
b{
|
||||
border-bottom: 1px solid $sky;
|
||||
}
|
||||
}
|
||||
|
||||
.btn{
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
padding: .95rem 2.5rem;
|
||||
|
||||
i{
|
||||
padding-right: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
86
public/style/scss/components/ui/_ui-progressbar.scss
Normal file
86
public/style/scss/components/ui/_ui-progressbar.scss
Normal file
@ -0,0 +1,86 @@
|
||||
// Variable.scss
|
||||
.progress-bar {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
.progress-bar-primary {
|
||||
background-color: $primary;
|
||||
}
|
||||
|
||||
.progress-bar-success {
|
||||
background-color: $success;
|
||||
}
|
||||
|
||||
.progress-bar-info {
|
||||
background-color: $info;
|
||||
}
|
||||
|
||||
.progress-bar-danger {
|
||||
background-color: $danger;
|
||||
}
|
||||
|
||||
.progress-bar-warning {
|
||||
background-color: $warning;
|
||||
}
|
||||
|
||||
.progress-bar-pink {
|
||||
background-color: $pink;
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
// box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.13);
|
||||
border-radius: $radius;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $d-bg;
|
||||
}
|
||||
&-bar{
|
||||
// outline: 1px solid #fff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-vertical {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
margin-right: 2rem;
|
||||
min-height: 17rem;
|
||||
position: relative;
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-vertical-bottom {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
margin-right: 2rem;
|
||||
min-height: 17rem;
|
||||
position: relative;
|
||||
transform: rotate(180deg);
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-animated {
|
||||
animation-duration: 5s;
|
||||
animation-name: myanimation;
|
||||
transition: all 5s ease 0s;
|
||||
}
|
||||
|
||||
@keyframes myanimation {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes myanimation {
|
||||
0% {
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
161
public/style/scss/components/ui/_ui-ribbon.scss
Normal file
161
public/style/scss/components/ui/_ui-ribbon.scss
Normal file
@ -0,0 +1,161 @@
|
||||
.ribbon {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
text-transform: uppercase;
|
||||
|
||||
&__one {
|
||||
top: 15px;
|
||||
left: -11px;
|
||||
min-height: 20px;
|
||||
min-width: 52px;
|
||||
text-align: center;
|
||||
padding: 3px 10px;
|
||||
background: #3AB54B;
|
||||
color: #fff;
|
||||
font-size: 0.625rem;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 10px solid #239132;
|
||||
border-left: 11px solid transparent;
|
||||
left: 0;
|
||||
content: "";
|
||||
bottom: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
&__two {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: inline-block;
|
||||
background: $warning;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: $white;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
border-radius: 3px;
|
||||
|
||||
// &::after {
|
||||
// position: absolute;
|
||||
// content: "";
|
||||
// -webkit-clip-path: polygon(90% 0, 100% 100%, 50% 75%, 0 100%, 10% 0, 50% 0);
|
||||
// clip-path: polygon(90% 0, 100% 100%, 50% 75%, 0 100%, 10% 0, 50% 0);
|
||||
// height: 22px;
|
||||
// width: 40px;
|
||||
// left: 50%;
|
||||
// top: 75%;
|
||||
// background: $primary;
|
||||
// transform: translateX(-50%);
|
||||
// }
|
||||
}
|
||||
|
||||
&__three {
|
||||
left: -1.875rem;
|
||||
top: 0.875rem;
|
||||
width: 6.875rem;
|
||||
height: 1.5625rem;
|
||||
background-color: $danger;
|
||||
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
|
||||
transform: rotate(-45deg);
|
||||
color: $white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&__four {
|
||||
left: 8px;
|
||||
top: -8px;
|
||||
width: 110px;
|
||||
height: 50px;
|
||||
background-color: $primary;
|
||||
z-index: auto;
|
||||
color: $white;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&:after {
|
||||
right: -5px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
// &:after, &:before {
|
||||
|
||||
// }
|
||||
|
||||
&:after, &:before {
|
||||
z-index: -1;
|
||||
background-color: lighten($color: $primary, $amount: 20%);
|
||||
top: 3px;
|
||||
transform: rotate(45deg);
|
||||
content: "";
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
&__five {
|
||||
left: -1.875rem;
|
||||
top: 0.625rem;
|
||||
width: 6.875rem;
|
||||
height: 1.875rem;
|
||||
background-color: $primary;
|
||||
transform: rotate(-45deg);
|
||||
font-size: 0.75rem;
|
||||
color: $white;
|
||||
padding-bottom: 0.3125rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1rem;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 50px 50px 50px;
|
||||
border-color: transparent transparent $primary transparent;
|
||||
left: 0.25rem;
|
||||
top: -2.8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__six {
|
||||
left: 0;
|
||||
top: 1.125rem;
|
||||
width: 6.875rem;
|
||||
height: 2.375rem;
|
||||
background-color: $primary;
|
||||
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 0, 85% 50%, 100% 100%, 100% 100%, 0 100%);
|
||||
clip-path: polygon(0 0, 100% 0%, 100% 0, 85% 50%, 100% 100%, 100% 100%, 0 100%);
|
||||
display: flex;
|
||||
font-size: 1.25rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&-curve {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -6px;
|
||||
width: 10px;
|
||||
height: 11px;
|
||||
border-top: 11px solid #3AB54B;
|
||||
border-bottom: 10px solid #3AB54B;
|
||||
border-right: 5px solid transparent;
|
||||
}
|
||||
}
|
||||
21
public/style/scss/components/ui/_ui-scrollbar.scss
Normal file
21
public/style/scss/components/ui/_ui-scrollbar.scss
Normal file
@ -0,0 +1,21 @@
|
||||
.jsgrid-grid-body,
|
||||
.dataTables_scrollBody,
|
||||
.table-responsive {
|
||||
&::-webkit-scrollbar {
|
||||
background-color: #F5F5F5;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
border-radius: 10px;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
|
||||
background-color: $body-color;
|
||||
}
|
||||
}
|
||||
103
public/style/scss/components/ui/_ui-step.scss
Normal file
103
public/style/scss/components/ui/_ui-step.scss
Normal file
@ -0,0 +1,103 @@
|
||||
|
||||
|
||||
|
||||
%remain-steps {
|
||||
&:before {
|
||||
content: counter(stepNum);
|
||||
font-family: inherit;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background-color: $border;
|
||||
}
|
||||
}
|
||||
|
||||
.multi-steps {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
|
||||
>li {
|
||||
counter-increment: stepNum;
|
||||
text-align: center;
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
color: $primary;
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '\2713';
|
||||
display: block;
|
||||
margin: 0 auto 4px;
|
||||
background-color: $white;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
line-height: 21px;
|
||||
}
|
||||
|
||||
border: {
|
||||
width: 2px;
|
||||
style: solid;
|
||||
color: $primary;
|
||||
radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background-color: $primary;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 50%;
|
||||
|
||||
@at-root [direction="rtl"] #{&} {
|
||||
left: auto;
|
||||
right: 50%;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(xs) {
|
||||
top: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
@extend %remain-steps;
|
||||
|
||||
&:before {
|
||||
background-color: $white;
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
~li {
|
||||
color: $body-color;
|
||||
@extend %remain-steps;
|
||||
|
||||
&:before {
|
||||
background-color: $border;
|
||||
border-color: $border;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
85
public/style/scss/components/ui/_ui-tab.scss
Normal file
85
public/style/scss/components/ui/_ui-tab.scss
Normal file
@ -0,0 +1,85 @@
|
||||
.nav-pills {
|
||||
.nav-link {
|
||||
border-radius: $radius;
|
||||
padding: 0.75rem 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.default-tab{
|
||||
.nav-link{
|
||||
background: transparent;
|
||||
border-radius: 0px;
|
||||
font-weight: 500;
|
||||
i{
|
||||
display:inline-block;
|
||||
transform:scale(1.5);
|
||||
color:$primary;
|
||||
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:hover,
|
||||
&.active{
|
||||
color: #495057;
|
||||
background-color: #fff;
|
||||
border-color: #dee2e6 #dee2e6 #fff #ebeef6;
|
||||
border-radius: $radius $radius 0 0;
|
||||
color:$primary;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $primary-opacity;
|
||||
border-color: transparent transparent $d-border transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-tab-1{
|
||||
.nav-link{
|
||||
background: transparent;
|
||||
border-radius: 0px;
|
||||
font-weight: 500;
|
||||
border-bottom:3px solid transparent;
|
||||
border-width: 0 0px 3px 0;
|
||||
|
||||
i{
|
||||
display:inline-block;
|
||||
transform:scale(1.5);
|
||||
color:$primary;
|
||||
}
|
||||
&:focus,
|
||||
&:hover,
|
||||
&.active{
|
||||
color: #495057;
|
||||
background-color: #fff;
|
||||
border-color:$primary ;
|
||||
border-radius:0;
|
||||
color: $primary;
|
||||
border-width: 0 0px 3px 0;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $primary-opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.nav-pills{
|
||||
|
||||
&.light{
|
||||
|
||||
.nav-link.active,
|
||||
.show > .nav-link{
|
||||
background:$primary-light;
|
||||
color:$primary;
|
||||
box-shadow:none;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background:$primary-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.nav-link.active,
|
||||
.show > .nav-link{
|
||||
box-shadow:0 0 20px 0 rgba($primary, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
297
public/style/scss/components/ui/_ui-timeline.scss
Normal file
297
public/style/scss/components/ui/_ui-timeline.scss
Normal file
@ -0,0 +1,297 @@
|
||||
|
||||
.widget-timeline{
|
||||
|
||||
.timeline {
|
||||
list-style: none;
|
||||
position: relative;
|
||||
&:before {
|
||||
top: 20px;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
content: " ";
|
||||
width: 3px;
|
||||
left: 9px;
|
||||
margin-right: -1.5px;
|
||||
background: $light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $d-border;
|
||||
}
|
||||
@at-root [direction="rtl"] #{&} {
|
||||
left: auto;
|
||||
right: 9px;
|
||||
margin-right: auto;
|
||||
margin-left: -1.5px;
|
||||
}
|
||||
|
||||
}
|
||||
> li {
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
&:before {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
&:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
> {
|
||||
.timeline-panel {
|
||||
border-radius: $radius;
|
||||
padding: 15px 20px;
|
||||
position: relative;
|
||||
display:block;
|
||||
margin-left: 40px;
|
||||
border-width:1px;
|
||||
border-style:solid;
|
||||
span{
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
opacity: 0.8;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
p{
|
||||
font-size:14px;
|
||||
}
|
||||
&:after{
|
||||
content: "";
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: inherit;
|
||||
border-color: inherit;
|
||||
border-style: solid;
|
||||
border-width: 0px 0px 1px 1px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -5px;
|
||||
transform: rotate(45deg);
|
||||
top: 15px;
|
||||
}
|
||||
}
|
||||
.timeline-badge {
|
||||
border-radius: 50%;
|
||||
height: 22px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
width: 22px;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
background:$white;
|
||||
padding:4px;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $dark-card;
|
||||
}
|
||||
&:after{
|
||||
content:"";
|
||||
width:10px;
|
||||
height:10px;
|
||||
border-radius:100%;
|
||||
display:block;
|
||||
}
|
||||
|
||||
@at-root [direction="rtl"] #{&} {
|
||||
left: auto;
|
||||
right: 19px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-body > p {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.timeline-badge {
|
||||
&.primary{
|
||||
border-color:$primary-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $primary-opacity;
|
||||
}
|
||||
&:after{
|
||||
background-color: $primary !important;
|
||||
box-shadow:0 5px 10px 0 rgba($primary, 0.2);
|
||||
}
|
||||
& + .timeline-panel{
|
||||
background:$primary-light;
|
||||
border-color:$primary-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: transparent;
|
||||
background-color: $primary-opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.success{
|
||||
border-color:$success-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $success-opacity;
|
||||
}
|
||||
&:after{
|
||||
background-color: $success !important;
|
||||
box-shadow:0 5px 10px 0 rgba($success, 0.2);
|
||||
}
|
||||
& + .timeline-panel{
|
||||
background:$success-light;
|
||||
border-color:$success-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $success-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.warning{
|
||||
border-color:$warning-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $warning-opacity;
|
||||
}
|
||||
&:after{
|
||||
background-color: $warning !important;
|
||||
box-shadow:0 5px 10px 0 rgba($warning, 0.2);
|
||||
}
|
||||
& + .timeline-panel{
|
||||
background:$warning-light;
|
||||
border-color:$warning-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $warning-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.danger{
|
||||
border-color:$danger-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $danger-opacity;
|
||||
}
|
||||
&:after{
|
||||
background-color: $danger !important;
|
||||
box-shadow:0 5px 10px 0 rgba($danger, 0.2);
|
||||
}
|
||||
& + .timeline-panel{
|
||||
background:$danger-light;
|
||||
border-color:$danger-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $danger-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.info{
|
||||
border-color:$info-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $info-opacity;
|
||||
}
|
||||
&:after{
|
||||
background-color: $info !important;
|
||||
box-shadow:0 5px 10px 0 rgba($info, 0.2);
|
||||
}
|
||||
& + .timeline-panel{
|
||||
background:$info-light;
|
||||
border-color:$info-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $info-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.dark{
|
||||
border-color:$dark-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
border-color: $dark-opacity;
|
||||
}
|
||||
&:after{
|
||||
background-color: $dark !important;
|
||||
box-shadow:0 5px 10px 0 rgba($dark, 0.2);
|
||||
}
|
||||
& + .timeline-panel{
|
||||
background:$dark-light;
|
||||
border-color:$dark-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $dark-opacity;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.style-1{
|
||||
.timeline-panel{
|
||||
background:transparent;
|
||||
}
|
||||
.timeline {
|
||||
.timeline-badge {
|
||||
&.timeline-badge{
|
||||
& + .timeline-panel{
|
||||
background: transparent !important;
|
||||
border-style:solid;
|
||||
border-width: 0 0 0 5px;
|
||||
border-radius: 0;
|
||||
padding: 5px 10px 5px 15px;
|
||||
&:after{
|
||||
border:0;
|
||||
left: -9px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.primary{
|
||||
& + .timeline-panel{
|
||||
border-color:$primary;
|
||||
&:after{
|
||||
background:$primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.success{
|
||||
& + .timeline-panel{
|
||||
border-color:$success;
|
||||
&:after{
|
||||
background:$success;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.warning{
|
||||
& + .timeline-panel{
|
||||
border-color:$warning;
|
||||
&:after{
|
||||
background:$warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.danger{
|
||||
& + .timeline-panel{
|
||||
border-color:$danger;
|
||||
&:after{
|
||||
background:$danger;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.info{
|
||||
& + .timeline-panel{
|
||||
border-color:$info;
|
||||
&:after{
|
||||
background:$info;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.dark{
|
||||
& + .timeline-panel{
|
||||
border-color:$dark;
|
||||
&:after{
|
||||
background:$dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
48
public/style/scss/components/ui/_ui-tooltip.scss
Normal file
48
public/style/scss/components/ui/_ui-tooltip.scss
Normal file
@ -0,0 +1,48 @@
|
||||
.tooltip{
|
||||
|
||||
&-wrapper{
|
||||
|
||||
button:not(:last-child){
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
button:hover{
|
||||
background: $primary;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
button{
|
||||
margin-bottom: .5rem;
|
||||
|
||||
&:focus{
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-inner{
|
||||
border-radius: 0;
|
||||
background: #333333;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
padding: 0.35rem 0.7rem;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before{
|
||||
// border-width: 0 0.6rem 0.6rem;
|
||||
border-bottom-color: #333333;
|
||||
}
|
||||
|
||||
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before{
|
||||
border-right-color: #333333;
|
||||
}
|
||||
|
||||
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before{
|
||||
border-left-color: #333333;
|
||||
}
|
||||
|
||||
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before{
|
||||
border-top-color: #333333;
|
||||
}
|
||||
68
public/style/scss/components/widget/_widget-card-list.scss
Normal file
68
public/style/scss/components/widget/_widget-card-list.scss
Normal file
@ -0,0 +1,68 @@
|
||||
.card-list{
|
||||
overflow: unset;
|
||||
height: calc(100% - 50px);
|
||||
|
||||
.card-header{
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
.photo{
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include respond('tab-land') {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
|
||||
&.list-left{
|
||||
margin-top: 15px;
|
||||
margin-left: 15px;
|
||||
|
||||
.card-header{
|
||||
padding-left: 0;
|
||||
|
||||
.photo{
|
||||
margin: -15px 15px 0 -15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.list-right{
|
||||
margin-top: 15px;
|
||||
margin-right: 15px;
|
||||
text-align: right;
|
||||
|
||||
.card-header{
|
||||
padding-right: 0;
|
||||
|
||||
.photo{
|
||||
margin: -15px -15px 0 15px;
|
||||
img{
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.list-center{
|
||||
margin-top: 15px;
|
||||
|
||||
.card-header{
|
||||
|
||||
.photo{
|
||||
margin: -15px 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.photo img{
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
.card-profile{
|
||||
.profile-photo{
|
||||
margin-top: -20px;
|
||||
}
|
||||
}
|
||||
123
public/style/scss/components/widget/_widget-chart.scss
Normal file
123
public/style/scss/components/widget/_widget-chart.scss
Normal file
@ -0,0 +1,123 @@
|
||||
#chart_widget_4 {
|
||||
height: 255px !important;
|
||||
}
|
||||
|
||||
#chart_widget_5 {
|
||||
.ct-series-a .ct-line,
|
||||
.ct-series-a .ct-point {
|
||||
stroke: #46ffc8;
|
||||
}
|
||||
|
||||
.ct-line {
|
||||
stroke-width: 1px;
|
||||
}
|
||||
|
||||
.ct-point {
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
.ct-series-a .ct-area {
|
||||
fill: #43d66c;
|
||||
}
|
||||
|
||||
.ct-area {
|
||||
fill-opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#chart_widget_6 {
|
||||
.ct-series-a .ct-line,
|
||||
.ct-series-a .ct-point {
|
||||
stroke: $info;
|
||||
}
|
||||
|
||||
.ct-line {
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
.ct-point {
|
||||
stroke-width: 5px;
|
||||
}
|
||||
|
||||
.ct-series-a .ct-area {
|
||||
fill: $info;
|
||||
}
|
||||
|
||||
.ct-area {
|
||||
fill-opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
#chart_widget_8 {
|
||||
height: 255px;
|
||||
|
||||
.ct-series-a .ct-line,
|
||||
.ct-series-a .ct-point {
|
||||
stroke: $info;
|
||||
}
|
||||
|
||||
.ct-line {
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
.ct-point {
|
||||
stroke-width: 5px;
|
||||
}
|
||||
|
||||
.ct-series-a .ct-area {
|
||||
fill: $info;
|
||||
}
|
||||
|
||||
.ct-area {
|
||||
fill-opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
#chart_widget_9, #chart_widget_10 {
|
||||
height: 250px !important;
|
||||
}
|
||||
|
||||
#chart_widget_11, #chart_widget_12, #chart_widget_13 {
|
||||
.ct-slice-donut {
|
||||
stroke-width: 25px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#chart_widget_11 {
|
||||
height: 270px !important;
|
||||
}
|
||||
|
||||
#chart_widget_17 {
|
||||
height: 150px !important;
|
||||
}
|
||||
|
||||
|
||||
.chart_widget_tab_one {
|
||||
.nav-link {
|
||||
border: 1px solid #ddd;
|
||||
|
||||
&.active {
|
||||
background-color: $primary;
|
||||
border: 1px solid $primary;
|
||||
color: $white;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid $primary;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ccc-widget {
|
||||
&>div {
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background: $dark-card !important;
|
||||
border-color: $d-border !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
86
public/style/scss/components/widget/_widget-media.scss
Normal file
86
public/style/scss/components/widget/_widget-media.scss
Normal file
@ -0,0 +1,86 @@
|
||||
.widget-media{
|
||||
.timeline{
|
||||
.timeline-panel{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom:1px solid $l-border;
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.media{
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: #eee;
|
||||
border-radius: $radius;
|
||||
overflow: hidden;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
align-self: start;
|
||||
|
||||
&-primary{
|
||||
background:$primary-light;
|
||||
color:$primary;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $primary-opacity;
|
||||
}
|
||||
}
|
||||
&-info{
|
||||
background:$info-light;
|
||||
color:$info;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $info-opacity;
|
||||
}
|
||||
}
|
||||
&-warning{
|
||||
background:$warning-light;
|
||||
color:$warning;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $warning-opacity;
|
||||
}
|
||||
}
|
||||
&-danger{
|
||||
background:$danger-light;
|
||||
color:$danger;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $danger-opacity;
|
||||
}
|
||||
}
|
||||
&-success{
|
||||
background:$success-light;
|
||||
color:$success;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $success-opacity;
|
||||
}
|
||||
}
|
||||
}
|
||||
.media-body{
|
||||
p{
|
||||
font-size: 14px;
|
||||
line-height:1.5;
|
||||
}
|
||||
}
|
||||
.dropdown {
|
||||
align-self: self-end;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
li:last-child {
|
||||
.timeline-panel{
|
||||
margin-bottom:0;
|
||||
border-bottom:0;
|
||||
padding-bottom:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card[class*="bg-"]{
|
||||
.timeline{
|
||||
.timeline-panel{
|
||||
border-color:rgba(255,255,255,0.2) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
.widget-message {
|
||||
p{
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
127
public/style/scss/components/widget/_widget-pickadate.scss
Normal file
127
public/style/scss/components/widget/_widget-pickadate.scss
Normal file
@ -0,0 +1,127 @@
|
||||
.picker{
|
||||
.picker__frame {
|
||||
min-width: 450px!important;
|
||||
max-width: 450px!important;
|
||||
|
||||
.picker__box{
|
||||
padding: 20px;
|
||||
border: 0;
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
|
||||
|
||||
.picker__header{
|
||||
margin-top: 0;
|
||||
|
||||
.picker__year{
|
||||
color: $primary;
|
||||
font-style: inherit;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.picker__nav--prev,
|
||||
.picker__nav--next{
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
padding: 0;
|
||||
line-height: 40px;
|
||||
border-radius: 2px;
|
||||
&:before{
|
||||
content: none!important
|
||||
}
|
||||
&:after{
|
||||
font-family: fontawesome;
|
||||
border: 0;
|
||||
margin: 0 auto;
|
||||
font-size: 22px;
|
||||
}
|
||||
&:hover{
|
||||
background-color: lighten($primary, 30)!important;
|
||||
color: $primary!important;
|
||||
}
|
||||
}
|
||||
.picker__nav--prev{
|
||||
left: 0;
|
||||
&:after{
|
||||
content: "\f0d9";
|
||||
}
|
||||
}
|
||||
.picker__nav--next{
|
||||
right: 0;
|
||||
&:after{
|
||||
content: "\f0da";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.picker__table{
|
||||
.picker__weekday {
|
||||
padding: 10px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
.picker__day {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50px;
|
||||
padding: 0!important;
|
||||
font-size: 16px;
|
||||
line-height: 40px;
|
||||
margin: auto;
|
||||
border: 0!important;
|
||||
|
||||
&.picker__day--today{
|
||||
&:before {
|
||||
content: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.picker__day--highlighted {
|
||||
border: 0!important;
|
||||
padding: 0;
|
||||
background-color: lighten($primary, 30)!important;
|
||||
color: $white!important;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
background-color: lighten($primary, 30)!important;
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.picker__footer{
|
||||
.picker__button--today{
|
||||
background-color: lighten($primary, 30)!important;
|
||||
color: $white !important;
|
||||
|
||||
&:before{
|
||||
content: none!important
|
||||
}
|
||||
}
|
||||
|
||||
.picker__button--clear,
|
||||
.picker__button--close,
|
||||
.picker__button--today{
|
||||
border: 0;
|
||||
border-radius: 2px;
|
||||
font-size: 16px;
|
||||
&:hover{
|
||||
background-color: lighten($primary, 30)!important;
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@include respond('phone') {
|
||||
min-width: 100%!important;
|
||||
max-width: 100%!important;
|
||||
|
||||
.picker__box{
|
||||
padding: 15px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
76
public/style/scss/components/widget/_widget-social.scss
Normal file
76
public/style/scss/components/widget/_widget-social.scss
Normal file
@ -0,0 +1,76 @@
|
||||
.social-icon{
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
background: $body-bg;
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 20px;
|
||||
|
||||
i{
|
||||
// font-size: 0.875rem;
|
||||
color: $white
|
||||
}
|
||||
&.youtube{
|
||||
background: $youtube;
|
||||
}
|
||||
&.facebook{
|
||||
background: $facebook;
|
||||
}
|
||||
&.twitter{
|
||||
background: $twitter;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.social-icon2{
|
||||
a{
|
||||
border: .1rem solid $primary;
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: .5rem;
|
||||
border-radius: .3rem;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
i{
|
||||
font-size: 12px;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.social-icon3{
|
||||
ul{
|
||||
li{
|
||||
display: inline-block;
|
||||
a{
|
||||
display: block;
|
||||
i{
|
||||
font-size: 1.4rem;
|
||||
padding: 1rem .7rem;
|
||||
color: $l-ctd;
|
||||
}
|
||||
&:hover{
|
||||
i{
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social-icons-muted{
|
||||
ul li a i{
|
||||
color: $muted;
|
||||
}
|
||||
}
|
||||
|
||||
.social-links {
|
||||
a {
|
||||
padding: .5rem;
|
||||
}
|
||||
}
|
||||
210
public/style/scss/components/widget/_widget-stat.scss
Normal file
210
public/style/scss/components/widget/_widget-stat.scss
Normal file
@ -0,0 +1,210 @@
|
||||
.widget-stat {
|
||||
.media {
|
||||
padding: 0px 0;
|
||||
align-items: center;
|
||||
&>span {
|
||||
height: 85px;
|
||||
width: 85px;
|
||||
border-radius: 100%;
|
||||
padding: 10px 12px;
|
||||
font-size: 32px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: $l-ctd;
|
||||
|
||||
@include respond('laptop') {
|
||||
height: 70px;
|
||||
width: 70px;
|
||||
min-width:70px;
|
||||
}
|
||||
}
|
||||
@include custommq($min: 576px) {}
|
||||
.media-body {
|
||||
p {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
@include respond('laptop') {
|
||||
font-size: 14px;
|
||||
}
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
color: #c4c9d5;
|
||||
}
|
||||
}
|
||||
small,
|
||||
.small {
|
||||
font-size: 75%;
|
||||
}
|
||||
h3{
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
h4 {
|
||||
font-size: 24px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
span {
|
||||
margin-left: 5px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
&[class*="bg-"] .media > span{
|
||||
background-color:rgba(255,255,255,0.25);
|
||||
color:$white;
|
||||
}
|
||||
&[class*="bg-"] .progress{
|
||||
background-color:rgba(255,255,255,0.25) !important;
|
||||
}
|
||||
|
||||
}
|
||||
[direction="rtl"] {
|
||||
.widget-stat .media .media-body span{
|
||||
margin-left: 0;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.dez-widget-1{
|
||||
.card {
|
||||
background: #FFE7DB;
|
||||
.card-body {
|
||||
p {
|
||||
color: #f87533;
|
||||
}
|
||||
}
|
||||
}
|
||||
.progress {
|
||||
|
||||
}
|
||||
.icon{
|
||||
float: right;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
border-radius: 6px;
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
.bgl-primary{
|
||||
background: $primary-light;
|
||||
border-color: $primary-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $primary-opacity;
|
||||
border-color: $primary-opacity;
|
||||
}
|
||||
}
|
||||
.bgl-secondary{
|
||||
background: $secondary-light;
|
||||
border-color: $secondary-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $secondary-opacity;
|
||||
border-color: $secondary-opacity;
|
||||
}
|
||||
|
||||
}
|
||||
.bgl-success{
|
||||
background: $success-light;
|
||||
border-color: $success-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $success-opacity;
|
||||
border-color: $success-opacity;
|
||||
}
|
||||
|
||||
}
|
||||
.bgl-warning{
|
||||
background: $warning-light;
|
||||
border-color: $warning-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $warning-opacity;
|
||||
border-color: $warning-opacity;
|
||||
}
|
||||
|
||||
}
|
||||
.bgl-danger{
|
||||
background: $danger-light;
|
||||
border-color: $danger-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $danger-opacity;
|
||||
border-color: $danger-opacity;
|
||||
}
|
||||
|
||||
}
|
||||
.bgl-info{
|
||||
background: $info-light;
|
||||
border-color: $info-light;
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: $info-opacity;
|
||||
border-color: $info-opacity;
|
||||
}
|
||||
|
||||
}
|
||||
.bg-primary-light{
|
||||
background: rgba($primary-light, 0.5);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: rgba($primary, 0.05);
|
||||
}
|
||||
}
|
||||
.bg-secondary-light{
|
||||
background: rgba($secondary-light, 0.5);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: rgba($secondary, 0.05);
|
||||
}
|
||||
}
|
||||
.bg-success-light{
|
||||
background: rgba($success-light, 0.5);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: rgba($success, 0.05);
|
||||
}
|
||||
}
|
||||
.bg-warning-light{
|
||||
background: rgba($warning-light, 0.5);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: rgba($warning, 0.05);
|
||||
}
|
||||
}
|
||||
.bg-danger-light{
|
||||
background: rgba($danger-light, 0.5);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: rgba($danger, 0.05);
|
||||
}
|
||||
}
|
||||
.bg-info-light{
|
||||
background: rgba($info-light, 0.5);
|
||||
@at-root [data-theme-version="dark"] & {
|
||||
background-color: rgba($info, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.bgl-dark{
|
||||
background: $dark-light;
|
||||
border-color: $dark-light;
|
||||
}
|
||||
.bgl-light{
|
||||
background: $light;
|
||||
border-color: $light;
|
||||
}
|
||||
.overlay-box{
|
||||
position:relative;
|
||||
z-index:1;
|
||||
&:after{
|
||||
content:"";
|
||||
width:100%;
|
||||
height:100%;
|
||||
left:0;
|
||||
top:0;;
|
||||
position:absolute;
|
||||
opacity:0.85;
|
||||
background:$primary;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
.rating-bar{
|
||||
font-size: 13px;
|
||||
}
|
||||
130
public/style/scss/components/widget/_widget-todo-list.scss
Normal file
130
public/style/scss/components/widget/_widget-todo-list.scss
Normal file
@ -0,0 +1,130 @@
|
||||
.tdl-holder {
|
||||
margin: 0 auto;
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
background-color: $white;
|
||||
border-bottom: 1px solid $border;
|
||||
// color: #252525;
|
||||
list-style: none none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
span {
|
||||
margin-left: 35px;
|
||||
// color: $l-ctd;
|
||||
font-size: 1rem;
|
||||
// font-weight: 600;
|
||||
vertical-align: middle;
|
||||
transition: all 0.2s linear;
|
||||
|
||||
@at-root [direction="rtl"] #{&} {
|
||||
margin-left: auto;
|
||||
margin-right: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
label {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
line-height: 50px;
|
||||
padding-left: 1.5rem;
|
||||
position: relative;
|
||||
margin: 0 !important;
|
||||
|
||||
@at-root [direction="rtl"] #{&} {
|
||||
padding-left: 0;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #eef1f6;
|
||||
color: $dark;
|
||||
|
||||
|
||||
|
||||
a {
|
||||
color: $danger;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
a {
|
||||
color: $white;
|
||||
display: inline-block;
|
||||
line-height: normal;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
width: 50px;
|
||||
-webkit-transition: all .2s linear;
|
||||
-moz-transition: all .2s linear;
|
||||
-o-transition: all .2s linear;
|
||||
transition: all 0.2s linear;
|
||||
padding: 18px 0px;
|
||||
font-size: 18px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
||||
@at-root [direction="rtl"] #{&} {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
input {
|
||||
&[type=checkbox] {
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
+ i {
|
||||
background-color: #fff;
|
||||
border: 1px solid #e7e7e7;
|
||||
display: block;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
width: 20px;
|
||||
z-index: 1;
|
||||
border-radius: 00px;
|
||||
font-size: 11px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
&:checked {
|
||||
|
||||
+ i {
|
||||
background: $primary;
|
||||
border-color: transparent;
|
||||
|
||||
}
|
||||
|
||||
+ i::after {
|
||||
content: "\f00c";
|
||||
font-family: 'fontAwesome';
|
||||
display: block;
|
||||
left: 2px;
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
z-index: 2;
|
||||
color: $white;
|
||||
}
|
||||
~ span {
|
||||
text-decoration: line-through;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[type=text] {
|
||||
background-color: $white;
|
||||
height: 50px;
|
||||
margin-top: 29px;
|
||||
border-radius: 3px;
|
||||
|
||||
&::placeholder {
|
||||
color: $dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
8
public/style/scss/components/widget/_widgets.scss
Normal file
8
public/style/scss/components/widget/_widgets.scss
Normal file
@ -0,0 +1,8 @@
|
||||
@import "./widget-chart";
|
||||
@import "./widget-social";
|
||||
@import "./widget-stat";
|
||||
@import "./widget-todo-list";
|
||||
@import "./widget-messages";
|
||||
@import "./widget-pickadate";
|
||||
@import "./widget-card-list";
|
||||
@import "./widget-media";
|
||||
Reference in New Issue
Block a user