update
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,500 @@
|
||||
/**=====================
|
||||
Typography css start
|
||||
==========================**/
|
||||
//Custom css Start
|
||||
body {
|
||||
font-size: $body-font-size;
|
||||
overflow-x: hidden;
|
||||
font-family: $font-rubik, $font-serif;
|
||||
color: $theme-body-font-color;
|
||||
}
|
||||
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
ul {
|
||||
padding-left: $ul-padding-left;
|
||||
list-style-type: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
* a {
|
||||
color: var(--theme-deafult);
|
||||
text-decoration: none;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.f-m-light {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 0.875rem;
|
||||
text-decoration: none;
|
||||
color: var(--theme-deafult);
|
||||
transition: 0.5s all;
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-deafult);
|
||||
transition: all 0.5s all;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
*.btn:focus {
|
||||
box-shadow: $btn-focus-box-shadow !important;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: $paragraph-font-size;
|
||||
line-height: $paragraph-line-height;
|
||||
letter-spacing: $paragraph-letter-spacing;
|
||||
}
|
||||
|
||||
code {
|
||||
color: $code-tag-color !important;
|
||||
border-radius: $code-tag-border-radious;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.media {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
.media-body {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: $blockquote-border;
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.figure {
|
||||
&.text-center {
|
||||
blockquote {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.text-end {
|
||||
blockquote {
|
||||
border-left: none !important;
|
||||
border-right: $blockquote-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
>div {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
:focus {
|
||||
outline-color: $all-focus-outline-color;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
svg {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
input {
|
||||
&:focus {
|
||||
outline-color: $transparent-color;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
.media-widgets {
|
||||
.media-body {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
//Custom css End
|
||||
|
||||
//Typography css start
|
||||
.typography {
|
||||
|
||||
h1,
|
||||
.h1,
|
||||
h2,
|
||||
.h2,
|
||||
h3,
|
||||
.h3,
|
||||
h4,
|
||||
.h4,
|
||||
h5,
|
||||
.h5,
|
||||
h6,
|
||||
.h6 {
|
||||
margin: 18px 0;
|
||||
margin-top: 0;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
small {
|
||||
padding-left: $small-tag-padding;
|
||||
color: $small-tag-color;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: $pre-tag-bg-color;
|
||||
padding: $pre-tag-padding;
|
||||
}
|
||||
|
||||
|
||||
//Typography css end
|
||||
.owl-theme {
|
||||
.owl-dots {
|
||||
.owl-dot {
|
||||
span {
|
||||
background: lighten($primary-color, 20%);
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
span {
|
||||
background: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.owl-nav {
|
||||
&.disabled {
|
||||
&+.owl-dots {
|
||||
margin-bottom: -10px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.click2edit {
|
||||
&~.note-editor {
|
||||
&.note-frame {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.note-editor {
|
||||
&.note-frame {
|
||||
border-color: $light-color;
|
||||
}
|
||||
|
||||
&.fullscreen {
|
||||
.note-toolbar-wrapper {
|
||||
height: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.note-editor {
|
||||
&.note-frame {
|
||||
border-color: $light-color;
|
||||
}
|
||||
}
|
||||
|
||||
// modal page
|
||||
.modal {
|
||||
.modal-body {
|
||||
.card {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
.modal-content {
|
||||
.modal-body {
|
||||
p {
|
||||
a {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// index page notify
|
||||
.notify-alert {
|
||||
.close {
|
||||
color: $white;
|
||||
|
||||
[dir="rtl"] & {
|
||||
right: unset !important;
|
||||
left: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.alert-light {
|
||||
.close {
|
||||
color: $theme-body-font-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert-theme {
|
||||
button {
|
||||
top: 25px !important;
|
||||
right: 20px !important;
|
||||
color: var(--theme-deafult);
|
||||
|
||||
[dir="rtl"] & {
|
||||
right: unset !important;
|
||||
left: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
+span {
|
||||
+span {
|
||||
background-color: $white;
|
||||
color: var(--theme-deafult);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 14px -3px rgba($black, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.close {
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
|
||||
i {
|
||||
padding: 20px;
|
||||
padding-right: 0 !important;
|
||||
margin-right: 20px !important;
|
||||
}
|
||||
|
||||
.progress {
|
||||
margin-top: -2px !important;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
|
||||
.progress-bar {
|
||||
background-color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert-copy {
|
||||
border: 1px solid var(--theme-deafult);
|
||||
line-height: 1;
|
||||
display: inline-block;
|
||||
width: 300px;
|
||||
color: $white;
|
||||
background-color: var(--theme-deafult);
|
||||
|
||||
.close {
|
||||
box-shadow: none;
|
||||
color: $white;
|
||||
line-height: 1.4;
|
||||
font-weight: 100;
|
||||
top: -15px;
|
||||
|
||||
[dir="rtl"] & {
|
||||
right: unset !important;
|
||||
left: 10px !important;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ace-editor {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.editor-toolbar {
|
||||
width: 100% !important;
|
||||
|
||||
&.fullscreen {
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
|
||||
.CodeMirror {
|
||||
top: 0 !important;
|
||||
}
|
||||
|
||||
.CodeMirror-fullscreen {
|
||||
top: 50px !important;
|
||||
}
|
||||
|
||||
// rangeslider
|
||||
.irs-from,
|
||||
.irs-to,
|
||||
.irs-single {
|
||||
background: var(--theme-deafult);
|
||||
|
||||
&:after {
|
||||
border-top-color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
|
||||
.irs-line-mid,
|
||||
.irs-line-left,
|
||||
.irs-line-right,
|
||||
.irs-bar,
|
||||
.irs-bar-edge {
|
||||
background-color: var(--theme-deafult);
|
||||
}
|
||||
|
||||
// sweetalert css
|
||||
.swal-button {
|
||||
background-color: var(--theme-deafult);
|
||||
|
||||
&:active {
|
||||
background-color: darken($primary-color, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
.swal-button--cancel {
|
||||
background-color: #EFEFEE !important;
|
||||
}
|
||||
|
||||
.clipboaard-container {
|
||||
h6 {
|
||||
line-height: 1.6;
|
||||
font-size: $paragraph-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
fieldset {
|
||||
|
||||
.bootstrap-touchspin-postfix,
|
||||
.bootstrap-touchspin-prefix {
|
||||
border-radius: 0;
|
||||
padding: .4rem .75rem;
|
||||
}
|
||||
|
||||
.input-group-lg {
|
||||
.touchspin {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.f1 .f1-steps .f1-step .f1-step-icon {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.form-inline .form-group {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
i {
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
// animated modal css
|
||||
.animated-modal {
|
||||
.form-select {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.card-wrapper {
|
||||
padding: 14px;
|
||||
|
||||
dl {
|
||||
dt {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ===== Scrollbar CSS ===== */
|
||||
/* Firefox */
|
||||
* {
|
||||
scrollbar-width: auto;
|
||||
scrollbar-color: #f1e6f5 #ffffff;
|
||||
}
|
||||
|
||||
// table
|
||||
table {
|
||||
tbody {
|
||||
tr {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// common flex property
|
||||
.common-flex {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.typography-table {
|
||||
thead {
|
||||
tr {
|
||||
th {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
td {
|
||||
&:last-child {
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
min-width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
Typography css Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,182 @@
|
||||
// /*! -----------------------------------------------------------------------------------
|
||||
|
||||
// Template Name: THE CODEGRAMMER
|
||||
// Template URI: http://admin.pixelstrap.com/cuba/theme
|
||||
// Description: This is Admin theme
|
||||
// Author: Pixelstrap
|
||||
// Author URI: https://themeforest.net/user/pixelstrap
|
||||
|
||||
// -----------------------------------------------------------------------------------
|
||||
|
||||
|
||||
// */
|
||||
|
||||
// *** utils ***
|
||||
|
||||
|
||||
@import "utils/variables";
|
||||
|
||||
:root {
|
||||
--theme-deafult: #4831D4;
|
||||
--theme-secondary: #ea2087;
|
||||
--light-background: rgba(242, 243, 247, 0.7);
|
||||
--body-font-color: #2F2F3B;
|
||||
--chart-border: #ECF3FA;
|
||||
--recent-chart-bg: #FCFCFD;
|
||||
--light-bg: #F6F7F9;
|
||||
--white: #fff;
|
||||
--light2: #F5F6F9;
|
||||
--sidebar-border: rgba(0,0,0,0.1);
|
||||
--chart-text-color: rgba(82, 82, 108, 0.8);
|
||||
--recent-dashed-border: rgba(82, 82, 108, 0.3);
|
||||
--chart-dashed-border: rgba(82, 82, 108, 0.2);
|
||||
--chart-progress-light: rgba(82, 82, 108, 0.1);
|
||||
--recent-box-bg: #F2F4F7;
|
||||
--recent-border: rgba(97, 101, 122, 0.25);
|
||||
--course-light-btn: #F2F3F7;
|
||||
--course-bg: #F7F7F7;
|
||||
--balance-profie-bg: #E0DFEF;
|
||||
--view-grid-bg: #ECF3FA80;
|
||||
--view-border-marker: #cfcdfc;
|
||||
|
||||
--fc-button-bg-color: var(--theme-deafult);
|
||||
--fc-button-active-bg-color: var(--theme-deafult);
|
||||
--fc-button-active-border-color: var(--theme-deafult);
|
||||
--fc-button-border-color: var(--theme-deafult);
|
||||
--fc-button-hover-bg-color: var(--theme-deafult);
|
||||
--fc-button-hover-border-color: var(--theme-deafult);
|
||||
}
|
||||
|
||||
body[class='dark-only'] {
|
||||
--light-background: rgba(31, 32, 40 , 0.65);
|
||||
--recent-chart-bg: #262932;
|
||||
--light-bg: #1d1e26;
|
||||
--white: #262932;
|
||||
--sidebar-border: rgba(255,255,255,0.1);
|
||||
--light2: #1d1e26;
|
||||
--chart-border: #374558;
|
||||
--recent-box-bg: #1d1e26;
|
||||
--recent-border: #374558;
|
||||
--body-font-color: rgba(255,255,255,0.6);
|
||||
--course-light-btn: var(--light-bg);
|
||||
--view-grid-bg: var(--light-bg);
|
||||
--view-border-marker: #2c2c45d4;
|
||||
}
|
||||
|
||||
$primary-color: #4831D4;
|
||||
$secondary-color : #ea2087;
|
||||
$gradient-primary: linear-gradient($secondary-color, $primary-color);
|
||||
$gradient-primary-direction: linear-gradient(to right, lighten($primary-color, 10%), darken($primary-color, 8%));
|
||||
$gradient-secondary-direction: linear-gradient(to right, lighten($secondary-color, 10%), darken($secondary-color, 5%));
|
||||
$all-focus-outline-color: $primary-color;
|
||||
$code-tag-color: $primary-color;
|
||||
$list-group-active-bg-color: $primary-color;
|
||||
$list-group-active-border-color: $primary-color;
|
||||
$tour-color: $primary-color;
|
||||
$main-header-right-toggle-color : $primary-color;
|
||||
$main-header-right-nav-icon-color : $primary-color;
|
||||
$light-body-bg-color: rgba($primary-color, 0.10);
|
||||
$page-body-bg-color: $light-color;
|
||||
$pre-tag-bg-color: rgba($primary-color, 0.05);
|
||||
|
||||
// *** base ***
|
||||
@import "base/reset";
|
||||
@import "base/typography";
|
||||
|
||||
|
||||
// *** components ***
|
||||
@import "components/according.scss";
|
||||
@import "components/alert.scss";
|
||||
@import "components/avatars.scss";
|
||||
@import "components/badge.scss";
|
||||
@import "components/bookmark.scss";
|
||||
@import "components/breadcrumb.scss";
|
||||
@import "components/builders.scss";
|
||||
|
||||
@import "components/buttons.scss";
|
||||
|
||||
@import "components/card.scss";
|
||||
@import "components/color.scss";
|
||||
@import "components/datatable.scss";
|
||||
@import "components/datepicker.scss";
|
||||
@import "components/dropdown.scss";
|
||||
@import "components/form-builder.scss";
|
||||
@import "components/form-input.scss";
|
||||
@import "components/form-wizard.scss";
|
||||
@import "components/forms.scss";
|
||||
@import "components/form_builder-2.scss";
|
||||
@import "components/icons.scss";
|
||||
@import "components/list.scss";
|
||||
@import "components/loader.scss";
|
||||
@import "components/popover.scss";
|
||||
@import "components/print.scss";
|
||||
@import "components/radio.scss";
|
||||
@import "components/ribbon.scss";
|
||||
@import "components/switch.scss";
|
||||
@import "components/tab.scss";
|
||||
@import "components/table.scss";
|
||||
@import "components/touchspin.scss";
|
||||
@import "components/tour.scss";
|
||||
@import "components/tree.scss";
|
||||
@import "components/typeahead-search.scss";
|
||||
|
||||
|
||||
|
||||
// *** pages ***
|
||||
|
||||
@import "pages/blog.scss";
|
||||
@import "pages/bookmark-app.scss";
|
||||
@import "pages/cart.scss";
|
||||
@import "pages/chart.scss";
|
||||
@import "pages/chat.scss";
|
||||
@import "pages/checkout.scss";
|
||||
@import "pages/comingsoon.scss";
|
||||
@import "pages/contacts.scss";
|
||||
@import "pages/dashboard_2.scss";
|
||||
@import "pages/dashboard_default.scss";
|
||||
@import "pages/ecommerce.scss";
|
||||
@import "pages/email-application.scss";
|
||||
@import "pages/errorpage.scss";
|
||||
@import "pages/faq.scss";
|
||||
@import "pages/file.scss";
|
||||
@import "pages/gallery.scss";
|
||||
@import "pages/internationalization.scss";
|
||||
@import "pages/job-search.scss";
|
||||
@import "pages/jsgrid.scss";
|
||||
@import "pages/kanban.scss";
|
||||
@import "pages/knowledgebase.scss";
|
||||
@import "pages/landing.scss";
|
||||
@import "pages/language.scss";
|
||||
@import "pages/learning.scss";
|
||||
@import "pages/login.scss";
|
||||
@import "pages/megaoption.scss";
|
||||
@import "pages/order-history.scss";
|
||||
@import "pages/page.scss";
|
||||
@import "pages/pricing.scss";
|
||||
@import "pages/progress.scss";
|
||||
@import "pages/projectlist.scss";
|
||||
@import "pages/social-app.scss";
|
||||
@import "pages/task.scss";
|
||||
@import "pages/timeline-v.scss";
|
||||
@import "pages/timeliny.scss";
|
||||
@import "pages/user-profile.scss";
|
||||
@import "pages/wishlist.scss";
|
||||
|
||||
|
||||
/* ---------------------
|
||||
*** themes ***
|
||||
-----------------------*/
|
||||
@import "themes/dark.scss";
|
||||
@import "themes/theme-customizer.scss";
|
||||
|
||||
// *** layout ***
|
||||
|
||||
@import "layout/footer.scss";
|
||||
@import "layout/grid.scss";
|
||||
@import "layout/header.scss";
|
||||
@import "layout/navs.scss";
|
||||
@import "layout/search.scss";
|
||||
@import "layout/select2.scss";
|
||||
@import "layout/sidebar.scss";
|
||||
@import "layout/rtl.scss";
|
||||
@import "layout/box-layout.scss";
|
||||
@@ -0,0 +1,182 @@
|
||||
// /*! -----------------------------------------------------------------------------------
|
||||
|
||||
// Template Name: THE CODEGRAMMER
|
||||
// Template URI: http://admin.pixelstrap.com/cuba/theme
|
||||
// Description: This is Admin theme
|
||||
// Author: Pixelstrap
|
||||
// Author URI: https://themeforest.net/user/pixelstrap
|
||||
|
||||
// -----------------------------------------------------------------------------------
|
||||
|
||||
|
||||
// */
|
||||
|
||||
// *** utils ***
|
||||
|
||||
|
||||
@import "utils/variables";
|
||||
|
||||
:root {
|
||||
--theme-deafult: #d64dcf;
|
||||
--theme-secondary: #8e24aa;
|
||||
--light-background: rgba(242, 243, 247, 0.7);
|
||||
--body-font-color: #2F2F3B;
|
||||
--chart-border: #ECF3FA;
|
||||
--recent-chart-bg: #FCFCFD;
|
||||
--light-bg: #F6F7F9;
|
||||
--white: #fff;
|
||||
--light2: #F5F6F9;
|
||||
--sidebar-border: rgba(0,0,0,0.1);
|
||||
--chart-text-color: rgba(82, 82, 108, 0.8);
|
||||
--recent-dashed-border: rgba(82, 82, 108, 0.3);
|
||||
--chart-dashed-border: rgba(82, 82, 108, 0.2);
|
||||
--chart-progress-light: rgba(82, 82, 108, 0.1);
|
||||
--recent-box-bg: #F2F4F7;
|
||||
--recent-border: rgba(97, 101, 122, 0.25);
|
||||
--course-light-btn: #F2F3F7;
|
||||
--course-bg: #F7F7F7;
|
||||
--balance-profie-bg: #E0DFEF;
|
||||
--view-grid-bg: #ECF3FA80;
|
||||
--view-border-marker: #cfcdfc;
|
||||
|
||||
--fc-button-bg-color: var(--theme-deafult);
|
||||
--fc-button-active-bg-color: var(--theme-deafult);
|
||||
--fc-button-active-border-color: var(--theme-deafult);
|
||||
--fc-button-border-color: var(--theme-deafult);
|
||||
--fc-button-hover-bg-color: var(--theme-deafult);
|
||||
--fc-button-hover-border-color: var(--theme-deafult);
|
||||
}
|
||||
|
||||
body[class='dark-only'] {
|
||||
--light-background: rgba(31, 32, 40 , 0.65);
|
||||
--recent-chart-bg: #262932;
|
||||
--light-bg: #1d1e26;
|
||||
--white: #262932;
|
||||
--sidebar-border: rgba(255,255,255,0.1);
|
||||
--light2: #1d1e26;
|
||||
--chart-border: #374558;
|
||||
--recent-box-bg: #1d1e26;
|
||||
--recent-border: #374558;
|
||||
--body-font-color: rgba(255,255,255,0.6);
|
||||
--course-light-btn: var(--light-bg);
|
||||
--view-grid-bg: var(--light-bg);
|
||||
--view-border-marker: #2c2c45d4;
|
||||
}
|
||||
|
||||
$primary-color: #d64dcf;
|
||||
$secondary-color :#8e24aa;
|
||||
$gradient-primary: linear-gradient($secondary-color, $primary-color);
|
||||
$gradient-primary-direction: linear-gradient(to right, lighten($primary-color, 10%), darken($primary-color, 8%));
|
||||
$gradient-secondary-direction: linear-gradient(to right, lighten($secondary-color, 10%), darken($secondary-color, 5%));
|
||||
$all-focus-outline-color: $primary-color;
|
||||
$code-tag-color: $primary-color;
|
||||
$list-group-active-bg-color: $primary-color;
|
||||
$list-group-active-border-color: $primary-color;
|
||||
$tour-color: $primary-color;
|
||||
$main-header-right-toggle-color : $primary-color;
|
||||
$main-header-right-nav-icon-color : $primary-color;
|
||||
$light-body-bg-color: rgba($primary-color, 0.10);
|
||||
$page-body-bg-color: $light-color;
|
||||
$pre-tag-bg-color: rgba($primary-color, 0.05);
|
||||
|
||||
// *** base ***
|
||||
@import "base/reset";
|
||||
@import "base/typography";
|
||||
|
||||
|
||||
// *** components ***
|
||||
@import "components/according.scss";
|
||||
@import "components/alert.scss";
|
||||
@import "components/avatars.scss";
|
||||
@import "components/badge.scss";
|
||||
@import "components/bookmark.scss";
|
||||
@import "components/breadcrumb.scss";
|
||||
@import "components/builders.scss";
|
||||
|
||||
@import "components/buttons.scss";
|
||||
|
||||
@import "components/card.scss";
|
||||
@import "components/color.scss";
|
||||
@import "components/datatable.scss";
|
||||
@import "components/datepicker.scss";
|
||||
@import "components/dropdown.scss";
|
||||
@import "components/form-builder.scss";
|
||||
@import "components/form-input.scss";
|
||||
@import "components/form-wizard.scss";
|
||||
@import "components/forms.scss";
|
||||
@import "components/form_builder-2.scss";
|
||||
@import "components/icons.scss";
|
||||
@import "components/list.scss";
|
||||
@import "components/loader.scss";
|
||||
@import "components/popover.scss";
|
||||
@import "components/print.scss";
|
||||
@import "components/radio.scss";
|
||||
@import "components/ribbon.scss";
|
||||
@import "components/switch.scss";
|
||||
@import "components/tab.scss";
|
||||
@import "components/table.scss";
|
||||
@import "components/touchspin.scss";
|
||||
@import "components/tour.scss";
|
||||
@import "components/tree.scss";
|
||||
@import "components/typeahead-search.scss";
|
||||
|
||||
|
||||
|
||||
// *** pages ***
|
||||
|
||||
@import "pages/blog.scss";
|
||||
@import "pages/bookmark-app.scss";
|
||||
@import "pages/cart.scss";
|
||||
@import "pages/chart.scss";
|
||||
@import "pages/chat.scss";
|
||||
@import "pages/checkout.scss";
|
||||
@import "pages/comingsoon.scss";
|
||||
@import "pages/contacts.scss";
|
||||
@import "pages/dashboard_2.scss";
|
||||
@import "pages/dashboard_default.scss";
|
||||
@import "pages/ecommerce.scss";
|
||||
@import "pages/email-application.scss";
|
||||
@import "pages/errorpage.scss";
|
||||
@import "pages/faq.scss";
|
||||
@import "pages/file.scss";
|
||||
@import "pages/gallery.scss";
|
||||
@import "pages/internationalization.scss";
|
||||
@import "pages/job-search.scss";
|
||||
@import "pages/jsgrid.scss";
|
||||
@import "pages/kanban.scss";
|
||||
@import "pages/knowledgebase.scss";
|
||||
@import "pages/landing.scss";
|
||||
@import "pages/language.scss";
|
||||
@import "pages/learning.scss";
|
||||
@import "pages/login.scss";
|
||||
@import "pages/megaoption.scss";
|
||||
@import "pages/order-history.scss";
|
||||
@import "pages/page.scss";
|
||||
@import "pages/pricing.scss";
|
||||
@import "pages/progress.scss";
|
||||
@import "pages/projectlist.scss";
|
||||
@import "pages/social-app.scss";
|
||||
@import "pages/task.scss";
|
||||
@import "pages/timeline-v.scss";
|
||||
@import "pages/timeliny.scss";
|
||||
@import "pages/user-profile.scss";
|
||||
@import "pages/wishlist.scss";
|
||||
|
||||
|
||||
/* ---------------------
|
||||
*** themes ***
|
||||
-----------------------*/
|
||||
@import "themes/dark.scss";
|
||||
@import "themes/theme-customizer.scss";
|
||||
|
||||
// *** layout ***
|
||||
|
||||
@import "layout/footer.scss";
|
||||
@import "layout/grid.scss";
|
||||
@import "layout/header.scss";
|
||||
@import "layout/navs.scss";
|
||||
@import "layout/search.scss";
|
||||
@import "layout/select2.scss";
|
||||
@import "layout/sidebar.scss";
|
||||
@import "layout/rtl.scss";
|
||||
@import "layout/box-layout.scss";
|
||||
@@ -0,0 +1,181 @@
|
||||
// /*! -----------------------------------------------------------------------------------
|
||||
|
||||
// Template Name: THE CODEGRAMMER
|
||||
// Template URI: http://admin.pixelstrap.com/cuba/theme
|
||||
// Description: This is Admin theme
|
||||
// Author: Pixelstrap
|
||||
// Author URI: https://themeforest.net/user/pixelstrap
|
||||
|
||||
// -----------------------------------------------------------------------------------
|
||||
|
||||
|
||||
// */
|
||||
|
||||
// // *** utils ***
|
||||
|
||||
|
||||
@import "utils/variables";
|
||||
|
||||
:root {
|
||||
--theme-deafult: #4c2fbf;
|
||||
--theme-secondary: #2e9de4;
|
||||
--light-background: rgba(242, 243, 247, 0.7);
|
||||
--body-font-color: #2F2F3B;
|
||||
--chart-border: #ECF3FA;
|
||||
--recent-chart-bg: #FCFCFD;
|
||||
--light-bg: #F6F7F9;
|
||||
--white: #fff;
|
||||
--light2: #F5F6F9;
|
||||
--sidebar-border: rgba(0,0,0,0.1);
|
||||
--chart-text-color: rgba(82, 82, 108, 0.8);
|
||||
--recent-dashed-border: rgba(82, 82, 108, 0.3);
|
||||
--chart-dashed-border: rgba(82, 82, 108, 0.2);
|
||||
--chart-progress-light: rgba(82, 82, 108, 0.1);
|
||||
--recent-box-bg: #F2F4F7;
|
||||
--recent-border: rgba(97, 101, 122, 0.25);
|
||||
--course-light-btn: #F2F3F7;
|
||||
--course-bg: #F7F7F7;
|
||||
--balance-profie-bg: #E0DFEF;
|
||||
--view-grid-bg: #ECF3FA80;
|
||||
--view-border-marker: #cfcdfc;
|
||||
|
||||
--fc-button-bg-color: var(--theme-deafult);
|
||||
--fc-button-active-bg-color: var(--theme-deafult);
|
||||
--fc-button-active-border-color: var(--theme-deafult);
|
||||
--fc-button-border-color: var(--theme-deafult);
|
||||
--fc-button-hover-bg-color: var(--theme-deafult);
|
||||
--fc-button-hover-border-color: var(--theme-deafult);
|
||||
}
|
||||
|
||||
body[class='dark-only'] {
|
||||
--light-background: rgba(31, 32, 40 , 0.65);
|
||||
--recent-chart-bg: #262932;
|
||||
--light-bg: #1d1e26;
|
||||
--white: #262932;
|
||||
--sidebar-border: rgba(255,255,255,0.1);
|
||||
--light2: #1d1e26;
|
||||
--chart-border: #374558;
|
||||
--recent-box-bg: #1d1e26;
|
||||
--recent-border: #374558;
|
||||
--body-font-color: rgba(255,255,255,0.6);
|
||||
--course-light-btn: var(--light-bg);
|
||||
--view-grid-bg: var(--light-bg);
|
||||
--view-border-marker: #2c2c45d4;
|
||||
}
|
||||
|
||||
$primary-color: #4c2fbf;
|
||||
$secondary-color :#2e9de4;
|
||||
$gradient-primary: linear-gradient($secondary-color, $primary-color);
|
||||
$gradient-primary-direction: linear-gradient(to right, lighten($primary-color, 10%), darken($primary-color, 8%));
|
||||
$gradient-secondary-direction: linear-gradient(to right, lighten($secondary-color, 10%), darken($secondary-color, 5%));
|
||||
$all-focus-outline-color: $primary-color;
|
||||
$code-tag-color: $primary-color;
|
||||
$list-group-active-bg-color: $primary-color;
|
||||
$list-group-active-border-color: $primary-color;
|
||||
$tour-color: $primary-color;
|
||||
$main-header-right-toggle-color : $primary-color;
|
||||
$main-header-right-nav-icon-color : $primary-color;
|
||||
$light-body-bg-color: rgba($primary-color, 0.10);
|
||||
$page-body-bg-color: $light-color;
|
||||
$pre-tag-bg-color: rgba($primary-color, 0.05);
|
||||
// *** base ***
|
||||
@import "base/reset";
|
||||
@import "base/typography";
|
||||
|
||||
|
||||
// *** components ***
|
||||
@import "components/according.scss";
|
||||
@import "components/alert.scss";
|
||||
@import "components/avatars.scss";
|
||||
@import "components/badge.scss";
|
||||
@import "components/bookmark.scss";
|
||||
@import "components/breadcrumb.scss";
|
||||
@import "components/builders.scss";
|
||||
|
||||
@import "components/buttons.scss";
|
||||
|
||||
@import "components/card.scss";
|
||||
@import "components/color.scss";
|
||||
@import "components/datatable.scss";
|
||||
@import "components/datepicker.scss";
|
||||
@import "components/dropdown.scss";
|
||||
@import "components/form-builder.scss";
|
||||
@import "components/form-input.scss";
|
||||
@import "components/form-wizard.scss";
|
||||
@import "components/forms.scss";
|
||||
@import "components/form_builder-2.scss";
|
||||
@import "components/icons.scss";
|
||||
@import "components/list.scss";
|
||||
@import "components/loader.scss";
|
||||
@import "components/popover.scss";
|
||||
@import "components/print.scss";
|
||||
@import "components/radio.scss";
|
||||
@import "components/ribbon.scss";
|
||||
@import "components/switch.scss";
|
||||
@import "components/tab.scss";
|
||||
@import "components/table.scss";
|
||||
@import "components/touchspin.scss";
|
||||
@import "components/tour.scss";
|
||||
@import "components/tree.scss";
|
||||
@import "components/typeahead-search.scss";
|
||||
|
||||
|
||||
|
||||
// *** pages ***
|
||||
|
||||
@import "pages/blog.scss";
|
||||
@import "pages/bookmark-app.scss";
|
||||
@import "pages/cart.scss";
|
||||
@import "pages/chart.scss";
|
||||
@import "pages/chat.scss";
|
||||
@import "pages/checkout.scss";
|
||||
@import "pages/comingsoon.scss";
|
||||
@import "pages/contacts.scss";
|
||||
@import "pages/dashboard_2.scss";
|
||||
@import "pages/dashboard_default.scss";
|
||||
@import "pages/ecommerce.scss";
|
||||
@import "pages/email-application.scss";
|
||||
@import "pages/errorpage.scss";
|
||||
@import "pages/faq.scss";
|
||||
@import "pages/file.scss";
|
||||
@import "pages/gallery.scss";
|
||||
@import "pages/internationalization.scss";
|
||||
@import "pages/job-search.scss";
|
||||
@import "pages/jsgrid.scss";
|
||||
@import "pages/kanban.scss";
|
||||
@import "pages/knowledgebase.scss";
|
||||
@import "pages/landing.scss";
|
||||
@import "pages/language.scss";
|
||||
@import "pages/learning.scss";
|
||||
@import "pages/login.scss";
|
||||
@import "pages/megaoption.scss";
|
||||
@import "pages/order-history.scss";
|
||||
@import "pages/page.scss";
|
||||
@import "pages/pricing.scss";
|
||||
@import "pages/progress.scss";
|
||||
@import "pages/projectlist.scss";
|
||||
@import "pages/social-app.scss";
|
||||
@import "pages/task.scss";
|
||||
@import "pages/timeline-v.scss";
|
||||
@import "pages/timeliny.scss";
|
||||
@import "pages/user-profile.scss";
|
||||
@import "pages/wishlist.scss";
|
||||
|
||||
|
||||
/* ---------------------
|
||||
*** themes ***
|
||||
-----------------------*/
|
||||
@import "themes/dark.scss";
|
||||
@import "themes/theme-customizer.scss";
|
||||
|
||||
// *** layout ***
|
||||
|
||||
@import "layout/footer.scss";
|
||||
@import "layout/grid.scss";
|
||||
@import "layout/header.scss";
|
||||
@import "layout/navs.scss";
|
||||
@import "layout/search.scss";
|
||||
@import "layout/select2.scss";
|
||||
@import "layout/sidebar.scss";
|
||||
@import "layout/rtl.scss";
|
||||
@import "layout/box-layout.scss";
|
||||
@@ -0,0 +1,181 @@
|
||||
// /*! -----------------------------------------------------------------------------------
|
||||
|
||||
// Template Name: THE CODEGRAMMER
|
||||
// Template URI: http://admin.pixelstrap.com/cuba/theme
|
||||
// Description: This is Admin theme
|
||||
// Author: Pixelstrap
|
||||
// Author URI: https://themeforest.net/user/pixelstrap
|
||||
|
||||
// -----------------------------------------------------------------------------------
|
||||
|
||||
|
||||
// */
|
||||
|
||||
// // *** utils ***
|
||||
|
||||
|
||||
@import "utils/variables";
|
||||
|
||||
:root {
|
||||
--theme-deafult: #7c4dff;
|
||||
--theme-secondary: #7b1fa2;
|
||||
--light-background: rgba(242, 243, 247, 0.7);
|
||||
--body-font-color: #2F2F3B;
|
||||
--chart-border: #ECF3FA;
|
||||
--recent-chart-bg: #FCFCFD;
|
||||
--light-bg: #F6F7F9;
|
||||
--white: #fff;
|
||||
--light2: #F5F6F9;
|
||||
--sidebar-border: rgba(0,0,0,0.1);
|
||||
--chart-text-color: rgba(82, 82, 108, 0.8);
|
||||
--recent-dashed-border: rgba(82, 82, 108, 0.3);
|
||||
--chart-dashed-border: rgba(82, 82, 108, 0.2);
|
||||
--chart-progress-light: rgba(82, 82, 108, 0.1);
|
||||
--recent-box-bg: #F2F4F7;
|
||||
--recent-border: rgba(97, 101, 122, 0.25);
|
||||
--course-light-btn: #F2F3F7;
|
||||
--course-bg: #F7F7F7;
|
||||
--balance-profie-bg: #E0DFEF;
|
||||
--view-grid-bg: #ECF3FA80;
|
||||
--view-border-marker: #cfcdfc;
|
||||
|
||||
--fc-button-bg-color: var(--theme-deafult);
|
||||
--fc-button-active-bg-color: var(--theme-deafult);
|
||||
--fc-button-active-border-color: var(--theme-deafult);
|
||||
--fc-button-border-color: var(--theme-deafult);
|
||||
--fc-button-hover-bg-color: var(--theme-deafult);
|
||||
--fc-button-hover-border-color: var(--theme-deafult);
|
||||
}
|
||||
|
||||
body[class='dark-only'] {
|
||||
--light-background: rgba(31, 32, 40 , 0.65);
|
||||
--recent-chart-bg: #262932;
|
||||
--light-bg: #1d1e26;
|
||||
--white: #262932;
|
||||
--sidebar-border: rgba(255,255,255,0.1);
|
||||
--light2: #1d1e26;
|
||||
--chart-border: #374558;
|
||||
--recent-box-bg: #1d1e26;
|
||||
--recent-border: #374558;
|
||||
--body-font-color: rgba(255,255,255,0.6);
|
||||
--course-light-btn: var(--light-bg);
|
||||
--view-grid-bg: var(--light-bg);
|
||||
--view-border-marker: #2c2c45d4;
|
||||
}
|
||||
|
||||
$primary-color: #7c4dff;
|
||||
$secondary-color : #7b1fa2;
|
||||
$gradient-primary: linear-gradient($secondary-color, $primary-color);
|
||||
$gradient-primary-direction: linear-gradient(to right, lighten($primary-color, 10%), darken($primary-color, 8%));
|
||||
$gradient-secondary-direction: linear-gradient(to right, lighten($secondary-color, 10%), darken($secondary-color, 5%));
|
||||
$all-focus-outline-color: $primary-color;
|
||||
$code-tag-color: $primary-color;
|
||||
$list-group-active-bg-color: $primary-color;
|
||||
$list-group-active-border-color: $primary-color;
|
||||
$tour-color: $primary-color;
|
||||
$main-header-right-toggle-color : $primary-color;
|
||||
$main-header-right-nav-icon-color : $primary-color;
|
||||
$light-body-bg-color: rgba($primary-color, 0.10);
|
||||
$page-body-bg-color: $light-color;
|
||||
$pre-tag-bg-color: rgba($primary-color, 0.05);
|
||||
// *** base ***
|
||||
@import "base/reset";
|
||||
@import "base/typography";
|
||||
|
||||
|
||||
// *** components ***
|
||||
@import "components/according.scss";
|
||||
@import "components/alert.scss";
|
||||
@import "components/avatars.scss";
|
||||
@import "components/badge.scss";
|
||||
@import "components/bookmark.scss";
|
||||
@import "components/breadcrumb.scss";
|
||||
@import "components/builders.scss";
|
||||
|
||||
@import "components/buttons.scss";
|
||||
|
||||
@import "components/card.scss";
|
||||
@import "components/color.scss";
|
||||
@import "components/datatable.scss";
|
||||
@import "components/datepicker.scss";
|
||||
@import "components/dropdown.scss";
|
||||
@import "components/form-builder.scss";
|
||||
@import "components/form-input.scss";
|
||||
@import "components/form-wizard.scss";
|
||||
@import "components/forms.scss";
|
||||
@import "components/form_builder-2.scss";
|
||||
@import "components/icons.scss";
|
||||
@import "components/list.scss";
|
||||
@import "components/loader.scss";
|
||||
@import "components/popover.scss";
|
||||
@import "components/print.scss";
|
||||
@import "components/radio.scss";
|
||||
@import "components/ribbon.scss";
|
||||
@import "components/switch.scss";
|
||||
@import "components/tab.scss";
|
||||
@import "components/table.scss";
|
||||
@import "components/touchspin.scss";
|
||||
@import "components/tour.scss";
|
||||
@import "components/tree.scss";
|
||||
@import "components/typeahead-search.scss";
|
||||
|
||||
|
||||
|
||||
// *** pages ***
|
||||
|
||||
@import "pages/blog.scss";
|
||||
@import "pages/bookmark-app.scss";
|
||||
@import "pages/cart.scss";
|
||||
@import "pages/chart.scss";
|
||||
@import "pages/chat.scss";
|
||||
@import "pages/checkout.scss";
|
||||
@import "pages/comingsoon.scss";
|
||||
@import "pages/contacts.scss";
|
||||
@import "pages/dashboard_2.scss";
|
||||
@import "pages/dashboard_default.scss";
|
||||
@import "pages/ecommerce.scss";
|
||||
@import "pages/email-application.scss";
|
||||
@import "pages/errorpage.scss";
|
||||
@import "pages/faq.scss";
|
||||
@import "pages/file.scss";
|
||||
@import "pages/gallery.scss";
|
||||
@import "pages/internationalization.scss";
|
||||
@import "pages/job-search.scss";
|
||||
@import "pages/jsgrid.scss";
|
||||
@import "pages/kanban.scss";
|
||||
@import "pages/knowledgebase.scss";
|
||||
@import "pages/landing.scss";
|
||||
@import "pages/language.scss";
|
||||
@import "pages/learning.scss";
|
||||
@import "pages/login.scss";
|
||||
@import "pages/megaoption.scss";
|
||||
@import "pages/order-history.scss";
|
||||
@import "pages/page.scss";
|
||||
@import "pages/pricing.scss";
|
||||
@import "pages/progress.scss";
|
||||
@import "pages/projectlist.scss";
|
||||
@import "pages/social-app.scss";
|
||||
@import "pages/task.scss";
|
||||
@import "pages/timeline-v.scss";
|
||||
@import "pages/timeliny.scss";
|
||||
@import "pages/user-profile.scss";
|
||||
@import "pages/wishlist.scss";
|
||||
|
||||
|
||||
/* ---------------------
|
||||
*** themes ***
|
||||
-----------------------*/
|
||||
@import "themes/dark.scss";
|
||||
@import "themes/theme-customizer.scss";
|
||||
|
||||
// *** layout ***
|
||||
|
||||
@import "layout/footer.scss";
|
||||
@import "layout/grid.scss";
|
||||
@import "layout/header.scss";
|
||||
@import "layout/navs.scss";
|
||||
@import "layout/search.scss";
|
||||
@import "layout/select2.scss";
|
||||
@import "layout/sidebar.scss";
|
||||
@import "layout/rtl.scss";
|
||||
@import "layout/box-layout.scss";
|
||||
@@ -0,0 +1,181 @@
|
||||
// /*! -----------------------------------------------------------------------------------
|
||||
|
||||
// Template Name: THE CODEGRAMMER
|
||||
// Template URI: http://admin.pixelstrap.com/cuba/theme
|
||||
// Description: This is Admin theme
|
||||
// Author: Pixelstrap
|
||||
// Author URI: https://themeforest.net/user/pixelstrap
|
||||
|
||||
// -----------------------------------------------------------------------------------
|
||||
|
||||
|
||||
// */
|
||||
|
||||
// *** utils ***
|
||||
|
||||
|
||||
@import "utils/variables";
|
||||
|
||||
:root {
|
||||
--theme-deafult: #3949ab;
|
||||
--theme-secondary: #4fc3f7;
|
||||
--light-background: rgba(242, 243, 247, 0.7);
|
||||
--body-font-color: #2F2F3B;
|
||||
--chart-border: #ECF3FA;
|
||||
--recent-chart-bg: #FCFCFD;
|
||||
--light-bg: #F6F7F9;
|
||||
--white: #fff;
|
||||
--light2: #F5F6F9;
|
||||
--sidebar-border: rgba(0,0,0,0.1);
|
||||
--chart-text-color: rgba(82, 82, 108, 0.8);
|
||||
--recent-dashed-border: rgba(82, 82, 108, 0.3);
|
||||
--chart-dashed-border: rgba(82, 82, 108, 0.2);
|
||||
--chart-progress-light: rgba(82, 82, 108, 0.1);
|
||||
--recent-box-bg: #F2F4F7;
|
||||
--recent-border: rgba(97, 101, 122, 0.25);
|
||||
--course-light-btn: #F2F3F7;
|
||||
--course-bg: #F7F7F7;
|
||||
--balance-profie-bg: #E0DFEF;
|
||||
--view-grid-bg: #ECF3FA80;
|
||||
--view-border-marker: #cfcdfc;
|
||||
|
||||
--fc-button-bg-color: var(--theme-deafult);
|
||||
--fc-button-active-bg-color: var(--theme-deafult);
|
||||
--fc-button-active-border-color: var(--theme-deafult);
|
||||
--fc-button-border-color: var(--theme-deafult);
|
||||
--fc-button-hover-bg-color: var(--theme-deafult);
|
||||
--fc-button-hover-border-color: var(--theme-deafult);
|
||||
}
|
||||
|
||||
body[class='dark-only'] {
|
||||
--light-background: rgba(31, 32, 40 , 0.65);
|
||||
--recent-chart-bg: #262932;
|
||||
--light-bg: #1d1e26;
|
||||
--white: #262932;
|
||||
--sidebar-border: rgba(255,255,255,0.1);
|
||||
--light2: #1d1e26;
|
||||
--chart-border: #374558;
|
||||
--recent-box-bg: #1d1e26;
|
||||
--recent-border: #374558;
|
||||
--body-font-color: rgba(255,255,255,0.6);
|
||||
--course-light-btn: var(--light-bg);
|
||||
--view-grid-bg: var(--light-bg);
|
||||
--view-border-marker: #2c2c45d4;
|
||||
}
|
||||
|
||||
$primary-color: #3949ab;
|
||||
$secondary-color : #4fc3f7;
|
||||
$gradient-primary: linear-gradient($secondary-color, $primary-color);
|
||||
$gradient-primary-direction: linear-gradient(to right, lighten($primary-color, 10%), darken($primary-color, 8%));
|
||||
$gradient-secondary-direction: linear-gradient(to right, lighten($secondary-color, 10%), darken($secondary-color, 5%));
|
||||
$all-focus-outline-color: $primary-color;
|
||||
$code-tag-color: $primary-color;
|
||||
$list-group-active-bg-color: $primary-color;
|
||||
$list-group-active-border-color: $primary-color;
|
||||
$tour-color: $primary-color;
|
||||
$main-header-right-toggle-color : $primary-color;
|
||||
$main-header-right-nav-icon-color : $primary-color;
|
||||
$light-body-bg-color: rgba($primary-color, 0.10);
|
||||
$page-body-bg-color: $light-color;
|
||||
$pre-tag-bg-color: rgba($primary-color, 0.05);
|
||||
// *** base ***
|
||||
@import "base/reset";
|
||||
@import "base/typography";
|
||||
|
||||
|
||||
// *** components ***
|
||||
@import "components/according.scss";
|
||||
@import "components/alert.scss";
|
||||
@import "components/avatars.scss";
|
||||
@import "components/badge.scss";
|
||||
@import "components/bookmark.scss";
|
||||
@import "components/breadcrumb.scss";
|
||||
@import "components/builders.scss";
|
||||
|
||||
@import "components/buttons.scss";
|
||||
|
||||
@import "components/card.scss";
|
||||
@import "components/color.scss";
|
||||
@import "components/datatable.scss";
|
||||
@import "components/datepicker.scss";
|
||||
@import "components/dropdown.scss";
|
||||
@import "components/form-builder.scss";
|
||||
@import "components/form-input.scss";
|
||||
@import "components/form-wizard.scss";
|
||||
@import "components/forms.scss";
|
||||
@import "components/form_builder-2.scss";
|
||||
@import "components/icons.scss";
|
||||
@import "components/list.scss";
|
||||
@import "components/loader.scss";
|
||||
@import "components/popover.scss";
|
||||
@import "components/print.scss";
|
||||
@import "components/radio.scss";
|
||||
@import "components/ribbon.scss";
|
||||
@import "components/switch.scss";
|
||||
@import "components/tab.scss";
|
||||
@import "components/table.scss";
|
||||
@import "components/touchspin.scss";
|
||||
@import "components/tour.scss";
|
||||
@import "components/tree.scss";
|
||||
@import "components/typeahead-search.scss";
|
||||
|
||||
|
||||
|
||||
// *** pages ***
|
||||
|
||||
@import "pages/blog.scss";
|
||||
@import "pages/bookmark-app.scss";
|
||||
@import "pages/cart.scss";
|
||||
@import "pages/chart.scss";
|
||||
@import "pages/chat.scss";
|
||||
@import "pages/checkout.scss";
|
||||
@import "pages/comingsoon.scss";
|
||||
@import "pages/contacts.scss";
|
||||
@import "pages/dashboard_2.scss";
|
||||
@import "pages/dashboard_default.scss";
|
||||
@import "pages/ecommerce.scss";
|
||||
@import "pages/email-application.scss";
|
||||
@import "pages/errorpage.scss";
|
||||
@import "pages/faq.scss";
|
||||
@import "pages/file.scss";
|
||||
@import "pages/gallery.scss";
|
||||
@import "pages/internationalization.scss";
|
||||
@import "pages/job-search.scss";
|
||||
@import "pages/jsgrid.scss";
|
||||
@import "pages/kanban.scss";
|
||||
@import "pages/knowledgebase.scss";
|
||||
@import "pages/landing.scss";
|
||||
@import "pages/language.scss";
|
||||
@import "pages/learning.scss";
|
||||
@import "pages/login.scss";
|
||||
@import "pages/megaoption.scss";
|
||||
@import "pages/order-history.scss";
|
||||
@import "pages/page.scss";
|
||||
@import "pages/pricing.scss";
|
||||
@import "pages/progress.scss";
|
||||
@import "pages/projectlist.scss";
|
||||
@import "pages/social-app.scss";
|
||||
@import "pages/task.scss";
|
||||
@import "pages/timeline-v.scss";
|
||||
@import "pages/timeliny.scss";
|
||||
@import "pages/user-profile.scss";
|
||||
@import "pages/wishlist.scss";
|
||||
|
||||
|
||||
/* ---------------------
|
||||
*** themes ***
|
||||
-----------------------*/
|
||||
@import "themes/dark.scss";
|
||||
@import "themes/theme-customizer.scss";
|
||||
|
||||
// *** layout ***
|
||||
|
||||
@import "layout/footer.scss";
|
||||
@import "layout/grid.scss";
|
||||
@import "layout/header.scss";
|
||||
@import "layout/navs.scss";
|
||||
@import "layout/search.scss";
|
||||
@import "layout/select2.scss";
|
||||
@import "layout/sidebar.scss";
|
||||
@import "layout/rtl.scss";
|
||||
@import "layout/box-layout.scss";
|
||||
@@ -0,0 +1,194 @@
|
||||
/**=====================
|
||||
According CSS start
|
||||
==========================**/
|
||||
.default-according {
|
||||
.avatar-showcase {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: 0;
|
||||
box-shadow: none;
|
||||
|
||||
&+.card {
|
||||
margin-top: $according-card-top-margin;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
font-weight: $according-btn-weight;
|
||||
color: $theme-body-font-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: $according-card-header-padding;
|
||||
border: $card-border-color;
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
left: 18px;
|
||||
font-size: 20px;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
border: $card-border-color;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.default-according.style-1 {
|
||||
button {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
|
||||
&:before {
|
||||
right: 20px;
|
||||
position: absolute;
|
||||
-webkit-transition: 0.4s;
|
||||
transition: 0.4s;
|
||||
font-size: 20px;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
|
||||
@media (max-width: 575px) {
|
||||
right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-expanded="true"] {
|
||||
&:before {
|
||||
content: $according-open-icon;
|
||||
font-family: $according-card-header-icon;
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-expanded="false"] {
|
||||
&:before {
|
||||
content: $according-close-icon;
|
||||
font-family: $according-card-header-icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-button {
|
||||
.svg-color {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
|
||||
[dir="rtl"] & {
|
||||
left: 20px;
|
||||
right: unset;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
background-image: unset;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.collapsed) {
|
||||
background-color: unset;
|
||||
box-shadow: none;
|
||||
|
||||
&::after {
|
||||
background-image: unset;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
background-image: unset;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
$accordion-light-name: primary,
|
||||
secondary,
|
||||
success,
|
||||
warning,
|
||||
info,
|
||||
light,
|
||||
danger,
|
||||
dark;
|
||||
|
||||
$accordion-light-color: $light-primary,
|
||||
$light-secondary,
|
||||
$light-success,
|
||||
$light-warning,
|
||||
$light-info,
|
||||
$light-white,
|
||||
$light-danger,
|
||||
$light-dark;
|
||||
|
||||
@each $var in $accordion-light-name {
|
||||
$i: index($accordion-light-name, $var);
|
||||
|
||||
.accordion-button {
|
||||
&.accordion-light-#{$var} {
|
||||
&:not(.collapsed) {
|
||||
background-color: nth($accordion-light-color, $i);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.active {
|
||||
background-color: nth($accordion-light-color, $i);
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multi-collapse {
|
||||
&.show {
|
||||
.collapse-wrapper {
|
||||
&.accordion-light-#{$var} {
|
||||
background-color: nth($accordion-light-color, $i) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-item {
|
||||
.accordion-button {
|
||||
.svg-wrapper {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-wrapper {
|
||||
&:active {
|
||||
border: 1px solid $primary-color;
|
||||
border-top: 1px solid $primary-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-border {
|
||||
.accordion-item {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
According CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,389 @@
|
||||
/**=====================
|
||||
Alert CSS start
|
||||
==========================**/
|
||||
|
||||
.notify-alert {
|
||||
.close {
|
||||
background: unset;
|
||||
border: none;
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
border-radius: $alert-border-radious;
|
||||
padding: 15px;
|
||||
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.progress {
|
||||
margin-top: $alert-padding;
|
||||
}
|
||||
|
||||
[data-notify='icon'] {
|
||||
margin-right: 10px;
|
||||
line-height: 20px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
[data-notify='message'] {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 5px;
|
||||
font-size: $alert-msg-icon-size;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.close {
|
||||
opacity: 1;
|
||||
|
||||
span {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
display: inline-block;
|
||||
border-radius: 3px;
|
||||
text-shadow: none;
|
||||
padding: 0 5px;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert-dismissible {
|
||||
padding-right: 2.5rem;
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding-right: 15px;
|
||||
padding-left: 2.5rem;
|
||||
}
|
||||
|
||||
.close {
|
||||
padding: 10px 1.25rem;
|
||||
top: 4px;
|
||||
padding-right: 13px;
|
||||
opacity: 0.5;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transition: all 0.3s ease;
|
||||
opacity: 1;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
button {
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 4px;
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
|
||||
&~p {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
display: inline-block;
|
||||
|
||||
&~p {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
$alert-name: primary,
|
||||
secondary,
|
||||
success,
|
||||
danger,
|
||||
warning,
|
||||
info,
|
||||
light,
|
||||
dark;
|
||||
|
||||
$alert-color : $primary-color,
|
||||
$secondary-color,
|
||||
$success-color,
|
||||
$danger-color,
|
||||
$warning-color,
|
||||
$info-color,
|
||||
$light-color,
|
||||
$dark-color;
|
||||
|
||||
@each $var in $alert-name {
|
||||
$i: index($alert-name, $var);
|
||||
|
||||
.alert-#{$var} {
|
||||
background-color: rgba(nth($alert-color, $i), 0.8);
|
||||
border-color: rgba(nth($alert-color, $i), 0.9);
|
||||
color: $white;
|
||||
|
||||
.progress {
|
||||
height: 5px;
|
||||
background-color: darken(nth($alert-color, $i), 1%);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
background-color: lighten(nth($alert-color, $i), 50%);
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
filter: brightness(1) invert(1);
|
||||
}
|
||||
|
||||
.alert-link {
|
||||
color: nth($alert-color, $i);
|
||||
|
||||
@if($var =="light") {
|
||||
color: $dark-color;
|
||||
}
|
||||
}
|
||||
|
||||
@if($var =="light") {
|
||||
color: $dark-color;
|
||||
background-color: $light-color;
|
||||
|
||||
.btn-close {
|
||||
filter: unset;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border-top-color: nth($alert-color, $i);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.border-#{$var} {
|
||||
border-color: nth($alert-color, $i) !important;
|
||||
}
|
||||
|
||||
.list-group-horizontal {
|
||||
|
||||
&-sm,
|
||||
&-md,
|
||||
&-lg,
|
||||
&-xl,
|
||||
&-xxl {
|
||||
.list-group-item {
|
||||
&.border-left-#{$var} {
|
||||
border-left: 4px solid nth($alert-color, $i);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-group {
|
||||
|
||||
.form-check-input:checked[type=checkbox],
|
||||
[type=radio] {
|
||||
&.checkbox-#{$var} {
|
||||
background-color: unset;
|
||||
border-color: nth($alert-color, $i);
|
||||
outline: 0;
|
||||
background-color: unset;
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
border-color: nth($alert-color, $i);
|
||||
outline: 0;
|
||||
background-color: nth($alert-color, $i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert-#{$var}.light {
|
||||
background-color: rgba(nth($alert-color, $i), 0.4);
|
||||
border-color: rgba(nth($alert-color, $i), 0.7);
|
||||
}
|
||||
|
||||
.alert-#{$var}.dark {
|
||||
.alert-link {
|
||||
color: $white;
|
||||
|
||||
@if($var =="light") {
|
||||
color: $dark-color;
|
||||
}
|
||||
}
|
||||
|
||||
background-color: nth($alert-color, $i);
|
||||
border-color: nth($alert-color, $i);
|
||||
color: $auth-bg-color;
|
||||
|
||||
@if($var =="light") {
|
||||
color: $dark-color;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-#{$var}.outline,
|
||||
.alert-#{$var}.outline-2x {
|
||||
background-color: $transparent-color;
|
||||
border-color: nth($alert-color, $i);
|
||||
color: nth($alert-color, $i);
|
||||
|
||||
.btn-close {
|
||||
filter: unset;
|
||||
}
|
||||
|
||||
@if($var =="light") {
|
||||
color: $dark-color;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-#{$var}.inverse {
|
||||
&:before {
|
||||
top: 16px;
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 54px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 7px solid nth($alert-color, $i);
|
||||
border-top: 7px solid transparent;
|
||||
border-bottom: 7px solid transparent;
|
||||
|
||||
@media (max-width: 576px) {
|
||||
left: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
background-color: transparent;
|
||||
padding: 13px 20px 13px 65px;
|
||||
border-color: nth($alert-color, $i);
|
||||
color: $theme-body-font-color;
|
||||
|
||||
i {
|
||||
padding: 17px 20px;
|
||||
display: inline-block;
|
||||
background-color: nth($alert-color, $i);
|
||||
color: $white;
|
||||
border-radius: 3px 0 0 3px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
|
||||
@media (max-width: 576px) {
|
||||
padding: 17px 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-close {
|
||||
filter: unset;
|
||||
top: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.outline-2x {
|
||||
border-width: 2px;
|
||||
padding: 11px 1.25rem;
|
||||
}
|
||||
|
||||
|
||||
.alert-icons {
|
||||
&.outline-2x {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
svg {
|
||||
position: absolute !important;
|
||||
top: 18px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-dark,
|
||||
.alert-info {
|
||||
.btn-close {
|
||||
filter: none;
|
||||
}
|
||||
}
|
||||
|
||||
.border-left-wrapper {
|
||||
border-left: 4px solid $dark-color;
|
||||
}
|
||||
|
||||
$alert-light-name: primary,
|
||||
secondary,
|
||||
success,
|
||||
warning,
|
||||
info,
|
||||
light,
|
||||
danger,
|
||||
dark;
|
||||
|
||||
$alert-light-color: $light-primary,
|
||||
$light-secondary,
|
||||
$light-success,
|
||||
$light-warning,
|
||||
$light-info,
|
||||
$light-white,
|
||||
$light-danger,
|
||||
$light-dark;
|
||||
|
||||
@each $var in $alert-light-name {
|
||||
$i: index($alert-light-name, $var);
|
||||
|
||||
.alert-light-#{$var} {
|
||||
background-color: nth($alert-light-color, $i);
|
||||
}
|
||||
}
|
||||
|
||||
.alert-arrow {
|
||||
min-width: 55px;
|
||||
height: 55px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.ellipsis.content {
|
||||
@media (max-width:576px) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 294px;
|
||||
}
|
||||
|
||||
@media (max-width:575px) {
|
||||
max-width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-dismissible {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
}
|
||||
|
||||
/**=====================
|
||||
Alert CSS end
|
||||
==========================**/
|
||||
@@ -0,0 +1,134 @@
|
||||
/**=====================
|
||||
Avatars CSS start
|
||||
==========================**/
|
||||
.avatars {
|
||||
.avatar {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
position: relative;
|
||||
width: auto;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.b-r-30 {
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.b-r-35 {
|
||||
border-radius: 35px;
|
||||
}
|
||||
|
||||
.b-r-25 {
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.b-r-15 {
|
||||
border-radius: 15px;
|
||||
}
|
||||
|
||||
&.ratio {
|
||||
img {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
position: absolute;
|
||||
height: 12%;
|
||||
width: 12%;
|
||||
border-radius: 100%;
|
||||
bottom: 12%;
|
||||
right: 4%;
|
||||
}
|
||||
|
||||
.img-100 {
|
||||
width: calc(75px + (100 - 75) * ((100vw - 320px) / (1920 - 320))) !important;
|
||||
height: calc(75px + (100 - 75) * ((100vw - 320px) / (1920 - 320)));
|
||||
}
|
||||
|
||||
.img-90 {
|
||||
width: calc(65px + (90 - 65) * ((100vw - 320px) / (1920 - 320))) !important;
|
||||
height: calc(65px + (90 - 65) * ((100vw - 320px) / (1920 - 320)));
|
||||
}
|
||||
|
||||
.img-80 {
|
||||
width: calc(55px + (80 - 55) * ((100vw - 320px) / (1920 - 320))) !important;
|
||||
height: calc(55px + (80 - 55) * ((100vw - 320px) / (1920 - 320)));
|
||||
}
|
||||
|
||||
.img-70 {
|
||||
width: calc(45px + (70 - 45) * ((100vw - 320px) / (1920 - 320))) !important;
|
||||
height: calc(45px + (70 - 45) * ((100vw - 320px) / (1920 - 320)));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.status-offline {
|
||||
background-color: $danger-color;
|
||||
}
|
||||
|
||||
.status-online {
|
||||
background-color: $success-color ;
|
||||
}
|
||||
|
||||
.status-dnd {
|
||||
background-color: $warning-color ;
|
||||
}
|
||||
|
||||
.customers {
|
||||
ul {
|
||||
display: inline-block;
|
||||
|
||||
li {
|
||||
img {
|
||||
border: 2px solid $white;
|
||||
transition: 0.5s;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px) scale(1.02);
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
+li {
|
||||
margin-left: -7%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.avatar-group {
|
||||
margin-right: 30px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-showcase {
|
||||
margin-bottom: -10px;
|
||||
|
||||
.avatars {
|
||||
.avatar {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-group {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.ratio {
|
||||
>* {
|
||||
position: relative;
|
||||
top: unset;
|
||||
left: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
80. avatars CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,121 @@
|
||||
/**=====================
|
||||
Badge CSS start
|
||||
==========================**/
|
||||
|
||||
.badge-spacing {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
|
||||
.badge {
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
|
||||
&.badge {
|
||||
svg {
|
||||
padding-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
&.rounded-circle {
|
||||
padding: 10px 14px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.badge-p-space {
|
||||
padding: 10px 13px;
|
||||
}
|
||||
|
||||
&+.badge {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
&.btn-p-space {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.badge {
|
||||
&:hover {
|
||||
color: inherit;
|
||||
|
||||
&.badge-dark {
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
padding: $badge-padding;
|
||||
font-family: $font-roboto, $font-serif;
|
||||
font-weight: 500;
|
||||
|
||||
&+.badge {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: $badge-svg-size;
|
||||
height: $badge-svg-size;
|
||||
padding-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@each $pill-badge-name,
|
||||
$pill-badge-color in (primary, var(--theme-deafult)),
|
||||
(secondary, $secondary-color),
|
||||
(success, $success-color),
|
||||
(danger, $danger-color),
|
||||
(info, $info-color),
|
||||
(light, $light-color),
|
||||
(dark, $dark-color),
|
||||
(warning, $warning-color) {
|
||||
.pill-badge-#{$pill-badge-name} {
|
||||
background-color: $pill-badge-color;
|
||||
box-shadow: -0.5px 4.33px 16px 0px rgba($pill-badge-color, 0.25);
|
||||
color: $white;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.pill-badge-primary {
|
||||
background-color: var(--theme-deafult);
|
||||
}
|
||||
|
||||
.pill-badge-secondary {
|
||||
background-color: var(--theme-secondary);
|
||||
}
|
||||
|
||||
@each $round-badge-name,
|
||||
$round-badge-color in (primary, var(--theme-deafult)),
|
||||
(secondary, $secondary-color),
|
||||
(success, $success-color),
|
||||
(danger, $danger-color),
|
||||
(info, $info-color),
|
||||
(light, $light-color),
|
||||
(dark, $dark-color),
|
||||
(warning, $warning-color) {
|
||||
.round-badge-#{$round-badge-name} {
|
||||
border-radius: 6px;
|
||||
background-color: $round-badge-color;
|
||||
box-shadow: -0.5px -6.67px 14px 0px rgba($round-badge-color, 0.18);
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.round-badge-primary {
|
||||
background-color: var(--theme-deafult);
|
||||
}
|
||||
|
||||
.round-badge-secondary {
|
||||
background-color: var(--theme-secondary);
|
||||
}
|
||||
|
||||
/**=====================
|
||||
Badge CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,107 @@
|
||||
/**=====================
|
||||
81. Bookmark CSS start
|
||||
==========================**/
|
||||
.bookmark {
|
||||
ul {
|
||||
li {
|
||||
display: inline-block;
|
||||
.search-form {
|
||||
position: absolute;
|
||||
bottom: 53px;
|
||||
z-index: 1;
|
||||
.form-control-search {
|
||||
top: 65px;
|
||||
position: absolute;
|
||||
transition: all linear 0.3s;
|
||||
right: -20px;
|
||||
transform: translateY(-35px) scaleY(0);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
input {
|
||||
width: 240px;
|
||||
background-color: $white;
|
||||
box-shadow: 0 5px 21px rgba(0, 0, 0, 0.10);
|
||||
}
|
||||
&.open {
|
||||
transform: translateY(0px) scaleY(1);
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transition: all linear 0.3s;
|
||||
z-index: 100;
|
||||
}
|
||||
&:after {
|
||||
top: 12px;
|
||||
left: 20px;
|
||||
z-index: 1;
|
||||
}
|
||||
&:before {
|
||||
left: 50px;
|
||||
top: 9px;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
a{
|
||||
position: relative;
|
||||
color: $theme-body-font-color;
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
+ li {
|
||||
margin-left: 10px;
|
||||
}
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
a {
|
||||
border-radius: 5px;
|
||||
svg {
|
||||
color: #ff9f40;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.offcanvas-bookmark {
|
||||
&.page-wrapper.horizontal-wrapper {
|
||||
.page-body-wrapper {
|
||||
.page-body {
|
||||
.bookmark {
|
||||
ul {
|
||||
li {
|
||||
a {
|
||||
z-index: 99999;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
position: fixed;
|
||||
content: '';
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
body.modal-open {
|
||||
.select2-container--open {
|
||||
width: unset !important;
|
||||
display: block;
|
||||
.select2-dropdown {
|
||||
z-index: 1076;
|
||||
}
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
81. Bookmark CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,45 @@
|
||||
/**=====================
|
||||
57. breadcrumb CSS Start
|
||||
==========================**/
|
||||
.breadcrumb-colored{
|
||||
padding: 12px 16px;
|
||||
border-radius: 4px;
|
||||
li{
|
||||
a{
|
||||
color: $breadcrumb-ancher-color;
|
||||
}
|
||||
&.active{
|
||||
color: $breadcrumb-ancher-color;
|
||||
opacity:0.7;
|
||||
}
|
||||
}
|
||||
.breadcrumb-item{
|
||||
&:before{
|
||||
color: $breadcrumb-ancher-color;
|
||||
}
|
||||
}
|
||||
.breadcrumb-item.txt-dark{
|
||||
&:before{
|
||||
color: $breadcrumb-ancher-dark-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.breadcrumb-icon {
|
||||
--bs-breadcrumb-divider: '>';
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.breadcrumb-no-divider {
|
||||
--bs-breadcrumb-divider: '';
|
||||
}
|
||||
.breadcrumb-item{
|
||||
&.active{
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
57. breadcrumb CSS ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,31 @@
|
||||
/**=====================
|
||||
35. Form builder css start
|
||||
==========================**/
|
||||
.form-builder{
|
||||
.help-block {
|
||||
margin-bottom: 0;
|
||||
color: $gray-60;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.btn-light {
|
||||
color: $gray-60;
|
||||
}
|
||||
.copy-btn{
|
||||
padding: 8px;
|
||||
}
|
||||
.nav-primary {
|
||||
.nav-link.active, .nav-primary .show > .nav-link, .nav-pills.nav-primary .nav-link.active, .nav-pills.nav-primary .show > .nav-link{
|
||||
border-radius: 5px;
|
||||
}
|
||||
.nav-link, .nav-pills.nav-primary .nav-link {
|
||||
color: $black;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.theme-form{
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
35. Form builder css Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,397 @@
|
||||
/**=====================
|
||||
06. Button CSS start
|
||||
==========================**/
|
||||
.btn-link {
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
|
||||
.purchase-btn {
|
||||
background: linear-gradient(90deg, var(--theme-deafult) -18.33%, #563EE0 62.78%);
|
||||
padding: 12px 20px;
|
||||
min-width: 200px;
|
||||
border: none;
|
||||
transition: 0.5s;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(90deg, #563EE0 -18.33%, var(--theme-deafult) 62.78%);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
min-width: 140px;
|
||||
padding: 10px 17px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-light {
|
||||
&:not([disabled]):not(.disabled).active.active {
|
||||
color: $theme-body-font-color;
|
||||
background-color: darken($light-color, 2%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin btn-gradien($deg, $leftcolor, $leftcolor-per, $rightcolor, $rightcolor-per, $font-color) {
|
||||
background-image: linear-gradient(to right, $leftcolor 0%, $rightcolor 51%, $leftcolor 100%);
|
||||
border: none;
|
||||
color: $font-color;
|
||||
background-size: auto 200%;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-primary-gradien {
|
||||
@include btn-gradien(60, lighten($primary-color, 8%), 0%, darken($primary-color, 8%), 100%, $white);
|
||||
color: $white;
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
transition: 1.5s;
|
||||
background-position: right center;
|
||||
background-image: linear-gradient(to right, lighten($primary-color, 8%), 0%, darken($primary-color, 8%), 100%, $white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary-gradien {
|
||||
@include btn-gradien(60, lighten($secondary-color, 8%), 0%, darken($secondary-color, 8%), 100%, $white);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
&.hover {
|
||||
transition: 1.5s;
|
||||
background-position: right center;
|
||||
background-image: linear-gradient(to right, lighten($secondary-color, 8%), 0%, darken($secondary-color, 8%), 100%, $white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-success-gradien {
|
||||
@include btn-gradien(60, lighten($success-color, 8%), 0%, darken($success-color, 8%), 100%, $white);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
&.hover {
|
||||
transition: 1.5s;
|
||||
background-position: right center;
|
||||
background-image: linear-gradient(to right, lighten($success-color, 8%), 0%, darken($success-color, 8%), 100%, $white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-danger-gradien {
|
||||
@include btn-gradien(60, lighten($danger-color, 8%), 0%, darken($danger-color, 8%), 100%, $white);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
&.hover {
|
||||
transition: 1.5s;
|
||||
background-position: right center;
|
||||
background-image: linear-gradient(to right, lighten($danger-color, 8%), 0%, darken($danger-color, 8%), 100%, $white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-warning-gradien {
|
||||
@include btn-gradien(60, lighten($warning-color, 8%), 0%, darken($warning-color, 8%), 100%, $white);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
&.hover {
|
||||
transition: 1.5s;
|
||||
background-position: right center;
|
||||
background-image: linear-gradient(to right, lighten($warning-color, 8%), 0%, darken($warning-color, 8%), 100%, $white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-info-gradien {
|
||||
@include btn-gradien(60, lighten($info-color, 8%), 0%, darken($info-color, 8%), 100%, $white);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
&.hover {
|
||||
transition: 1.5s;
|
||||
background-position: right center;
|
||||
background-image: linear-gradient(to right, lighten($info-color, 8%), 0%, darken($info-color, 8%), 100%, $white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-light-gradien {
|
||||
@include btn-gradien(60, lighten($light-color, 8%), 0%, darken($light-color, 8%), 100%, $white);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
&.hover {
|
||||
transition: 1.5s;
|
||||
background-position: right center;
|
||||
background-image: linear-gradient(to right, lighten($light-color, 8%), 0%, darken($light-color, 8%), 100%, $white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-dark-gradien {
|
||||
@include btn-gradien(60, lighten($dark-color, 8%), 0%, darken($dark-color, 8%), 100%, $white);
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active,
|
||||
&.hover {
|
||||
transition: 1.5s;
|
||||
background-position: right center;
|
||||
background-image: linear-gradient(to right, lighten($dark-color, 8%), 0%, darken($dark-color, 8%), 100%, $white) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@mixin btn-squre($border-radius) {
|
||||
border-radius: $border-radius+px;
|
||||
}
|
||||
|
||||
@mixin btn-pill($border-radius) {
|
||||
border-radius: $border-radius+px;
|
||||
}
|
||||
|
||||
@mixin btn-pill-first($radius) {
|
||||
border-radius: $radius+px 0 0 $radius+px;
|
||||
}
|
||||
|
||||
@mixin btn-pill-last($radius) {
|
||||
border-radius: 0 $radius+px $radius+px 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: $btn-padding;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
font-size: $btn-lg-font-size;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
font-size: $btn-sm-font-size;
|
||||
}
|
||||
|
||||
.btn-xs {
|
||||
padding: $btn-xs-padding;
|
||||
font-size: $btn-xs-font-size;
|
||||
}
|
||||
|
||||
.large-btn {
|
||||
.btn {
|
||||
margin-right: 5px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
margin-bottom: -20px;
|
||||
}
|
||||
|
||||
.btn-outline-white {
|
||||
border: 1px solid $white;
|
||||
color: $white;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
|
||||
// outline buttons//
|
||||
@each $btn-name,
|
||||
$btn-color in (primary, $primary-color),
|
||||
(secondary, $secondary-color),
|
||||
(success, $success-color),
|
||||
(danger, $danger-color),
|
||||
(info, $info-color),
|
||||
(light, $light-color),
|
||||
(dark, $dark-color),
|
||||
(warning, $warning-color) {
|
||||
.btn-air-#{$btn-name} {
|
||||
box-shadow: 0 5px 10px 2px rgba(88, 103, 221, .19) !important;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:not([disabled]):not(.disabled):active {
|
||||
background-color: darken($btn-color, 10%);
|
||||
border-color: darken($btn-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
.input-air-#{$btn-name} {
|
||||
box-shadow: 0 3px 5px 1px rgba($btn-color , 0.10) !important;
|
||||
|
||||
&:focus {
|
||||
border-color: $btn-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-gradient {
|
||||
color: $white !important;
|
||||
font-weight: 500;
|
||||
padding: 10px 30px;
|
||||
border-radius: 5px;
|
||||
background: $gradient-primary;
|
||||
letter-spacing: 0.06rem;
|
||||
|
||||
&:hover {
|
||||
background-size: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
color: $white;
|
||||
|
||||
&:hover,
|
||||
&.disabled {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
[class*='-gradien'] {
|
||||
&:hover {
|
||||
background-size: 50% 100%;
|
||||
transition: all 0.3s ease;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-square {
|
||||
@include btn-squre(0);
|
||||
}
|
||||
|
||||
.btn-pill {
|
||||
@include btn-squre(60);
|
||||
}
|
||||
|
||||
.btn-group-pill {
|
||||
.btn {
|
||||
&:first-child {
|
||||
@include btn-pill-first(60);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@include btn-pill-last(60);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group-square {
|
||||
.btn {
|
||||
&:first-child {
|
||||
@include btn-pill-first(0);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@include btn-pill-last(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-showcase {
|
||||
.btn {
|
||||
margin-bottom: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
margin-bottom:-10px;
|
||||
}
|
||||
|
||||
.btn-dropdown-showcase {
|
||||
.dropdown {
|
||||
margin-bottom: 10px;
|
||||
margin-right: 18px;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
margin-bottom: 10px;
|
||||
margin-right: 18px;
|
||||
}
|
||||
|
||||
margin-bottom:-10px;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
.radio {
|
||||
label {
|
||||
&::before {
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
label {
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group-showcase {
|
||||
>div {
|
||||
margin-bottom: -20px;
|
||||
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tooltiptext {
|
||||
visibility: visible;
|
||||
width: 120px;
|
||||
background-color: #555;
|
||||
color: $white;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 5px 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 125%;
|
||||
left: 50%;
|
||||
margin-left: -60px;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: #555 transparent transparent transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**=====================
|
||||
06. Button CSS end
|
||||
==========================**/
|
||||
@@ -0,0 +1,400 @@
|
||||
/**=====================
|
||||
03. Card CSS Start
|
||||
==========================**/
|
||||
//Card css
|
||||
.card {
|
||||
margin-bottom: $card-margin-bottom;
|
||||
border: none;
|
||||
transition: all 0.3s ease;
|
||||
letter-spacing: 0.5px;
|
||||
border-radius: $card-border-radious;
|
||||
box-shadow: $card-box-shadow;
|
||||
|
||||
&:hover {
|
||||
box-shadow: $card-hover-box-shadow;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: $card-header-bg-color;
|
||||
padding: $card-padding;
|
||||
border-bottom: $card-border-color;
|
||||
border-top-left-radius: $card-border-radious;
|
||||
border-top-right-radius: $card-border-radious;
|
||||
position: relative;
|
||||
|
||||
&.card-no-border {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
h5 {
|
||||
|
||||
&:not(.mb-0),
|
||||
&:not(.m-0) {
|
||||
margin-bottom: 0;
|
||||
text-transform: $card-header-font-transform;
|
||||
}
|
||||
}
|
||||
|
||||
>span {
|
||||
font-size: $card-header-span-size;
|
||||
color: $card-header-span-color;
|
||||
margin-top: 5px;
|
||||
display: block;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.card-header-right {
|
||||
border-radius: 0 0 0 7px;
|
||||
right: 35px;
|
||||
top: 24px;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
padding: 8px 0;
|
||||
position: absolute;
|
||||
background-color: $white;
|
||||
z-index: 1;
|
||||
|
||||
.card-option {
|
||||
text-align: right;
|
||||
width: 35px;
|
||||
height: 20px;
|
||||
overflow: hidden;
|
||||
transition: 0.3s ease-in-out;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
&:first-child {
|
||||
i {
|
||||
transition: 1s;
|
||||
font-size: 16px;
|
||||
color: var(--theme-deafult);
|
||||
|
||||
&.icofont {
|
||||
color: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
margin: 0 5px;
|
||||
cursor: pointer;
|
||||
color: $dark-color;
|
||||
line-height: 20px;
|
||||
|
||||
&.icofont-refresh {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: $card-padding;
|
||||
background-color: $card-body-bg-color;
|
||||
|
||||
p {
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
// border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
padding-bottom: 12px;
|
||||
// margin-bottom: 8px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
background-color: $card-footer-bg-color;
|
||||
border-top: $card-border-color;
|
||||
padding: $card-padding;
|
||||
border-bottom-left-radius: $card-border-radious;
|
||||
border-bottom-right-radius: $card-border-radious;
|
||||
}
|
||||
|
||||
&.card-load {
|
||||
.card-loader {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
z-index: 8;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
i {
|
||||
margin: 0 auto;
|
||||
color: var(--theme-deafult);
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.full-card {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
z-index: 99999;
|
||||
box-shadow: none;
|
||||
right: 0;
|
||||
border-radius: 0;
|
||||
border: 1px solid $light-semi-gray;
|
||||
width: calc(100vw - 12px);
|
||||
height: calc(100vh);
|
||||
|
||||
.card-body {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-body-wrapper {
|
||||
.card {
|
||||
.sub-title {
|
||||
font-family: $font-rubik, $font-serif;
|
||||
font-weight: normal;
|
||||
color: $theme-body-sub-title-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-absolute {
|
||||
margin-top: 20px;
|
||||
|
||||
.card-header {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 15px;
|
||||
border-radius: 0.25rem;
|
||||
padding: 10px 15px;
|
||||
|
||||
h5 {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.border-tab {
|
||||
margin-bottom: -13px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-card {
|
||||
overflow: hidden;
|
||||
padding: 30px;
|
||||
|
||||
.card-header {
|
||||
padding: 0;
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
margin-top: -100px;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
}
|
||||
|
||||
.card-profile {
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
height: 110px;
|
||||
padding: 7px;
|
||||
background-color: $white;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.card-social {
|
||||
text-align: center;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
padding: 15px 0;
|
||||
|
||||
&:last-child {
|
||||
a {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 0;
|
||||
margin-right: 15px;
|
||||
color: rgb(188, 198, 222);
|
||||
font-size: 16px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-deafult);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile-details {
|
||||
h6 {
|
||||
margin-bottom: 30px;
|
||||
margin-top: 10px;
|
||||
color: $theme-body-sub-title-color;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
padding: 0;
|
||||
|
||||
>div {
|
||||
+div {
|
||||
border-left: 1px solid $light-semi-gray;
|
||||
}
|
||||
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
|
||||
h3 {
|
||||
margin-bottom: 0;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
color: $theme-body-sub-title-color;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 24px;
|
||||
display: inline-block;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.m-b-card {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social {
|
||||
&-profile {
|
||||
text-align: center;
|
||||
background-image: url(../images/dashboard-5/profile-bg.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
.card-body {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
|
||||
@media (max-width: 1399px) {
|
||||
padding: 23px 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-details {
|
||||
margin-top: 15px;
|
||||
|
||||
h5 {
|
||||
a {
|
||||
color: var(--body-font-color);
|
||||
}
|
||||
}
|
||||
|
||||
.social-follow {
|
||||
column-count: 3;
|
||||
column-gap: 30px;
|
||||
margin-top: 25px;
|
||||
|
||||
@media (max-width: 1399px) {
|
||||
column-gap: 23px;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
+li {
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
background-color: var(--recent-dashed-border);
|
||||
left: -15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
|
||||
[dir="rtl"] & {
|
||||
left: unset;
|
||||
right: -15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-social {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
&-img-wrap {
|
||||
background: linear-gradient(253deg, var(--theme-deafult) 11.51%, rgba(115, 102, 255, 0) 82.07%);
|
||||
display: inline-block;
|
||||
border-radius: 100%;
|
||||
padding: 2px;
|
||||
position: relative;
|
||||
|
||||
.edit-icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 100%;
|
||||
border: 2px solid var(--white);
|
||||
background: var(--white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-img {
|
||||
padding: 5px;
|
||||
background: var(--white);
|
||||
border-radius: 100%;
|
||||
|
||||
img {
|
||||
height: 68px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
03. Card CSS End
|
||||
==========================**/
|
||||
@@ -0,0 +1,23 @@
|
||||
/**=====================
|
||||
07. Color CSS Start
|
||||
==========================**/
|
||||
.color-box {
|
||||
margin-bottom: -10px;
|
||||
|
||||
button {
|
||||
margin-bottom: 10px;
|
||||
|
||||
+button {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.light-font {
|
||||
color: $theme-body-sub-title-color;
|
||||
}
|
||||
|
||||
/**=====================
|
||||
07. Color CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,370 @@
|
||||
/**=====================
|
||||
30. Data-table CSS Start
|
||||
==========================**/
|
||||
div{
|
||||
&.dt-button-background{
|
||||
display: none !important;
|
||||
}
|
||||
&.DTS {
|
||||
div {
|
||||
&.dataTables_scrollBody {
|
||||
table {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.table-avtar{
|
||||
height: 32px;
|
||||
margin-right: 10px;
|
||||
[dir="rtl"] & {
|
||||
margin-right: unset;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.action{
|
||||
display: flex;
|
||||
i{
|
||||
font-size: 16px;
|
||||
}
|
||||
.pdf{
|
||||
i{
|
||||
font-size: 20px;
|
||||
color: $danger-color;
|
||||
}
|
||||
}
|
||||
.edit{
|
||||
margin-right: 5px;
|
||||
i{
|
||||
color: $success-color;
|
||||
}
|
||||
[dir="rtl"] & {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
.delete{
|
||||
i{
|
||||
color: $danger-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#auto-generate-content_wrapper{
|
||||
&.dataTables_wrapper{
|
||||
button{
|
||||
background-color: white;
|
||||
border: 1px solid var(--theme-deafult);
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
.dataTables_wrapper{
|
||||
width: calc(100% - 1px);
|
||||
&.no-footer {
|
||||
.dataTables_scrollBody {
|
||||
border-bottom: 1px solid $light-gray;
|
||||
}
|
||||
}
|
||||
.dt-buttons{
|
||||
.btn{
|
||||
border-radius: 0.25rem !important;
|
||||
}
|
||||
}
|
||||
padding: 0;
|
||||
.btn-group{
|
||||
button{
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
button{
|
||||
font-weight: 400;
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 14px;
|
||||
border-radius: 0.25rem;
|
||||
color: $white;
|
||||
}
|
||||
&+.dataTables_wrapper{
|
||||
margin-top: 20px;
|
||||
}
|
||||
.dataTables_paginate{
|
||||
margin-left: 15px !important;
|
||||
border: 1px solid $light-color;
|
||||
border-radius: 0.25rem;
|
||||
padding-top: 0;
|
||||
.paginate_button{
|
||||
margin: 0;
|
||||
&.current,&:active{
|
||||
background: var(--theme-deafult);
|
||||
color: $white !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
&:hover{
|
||||
border:1px solid var(--theme-deafult);
|
||||
color: $dark-color !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dataTables_length{
|
||||
margin-bottom: 30px;
|
||||
select{
|
||||
border-color: $light-color;
|
||||
color: $dark-color;
|
||||
padding: 0 10px;
|
||||
margin: 0 10px;
|
||||
height:2.7142em;
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
table.dataTable{
|
||||
border:1px solid $light-semi-gray;
|
||||
tbody {
|
||||
td, th {
|
||||
&.select-checkbox {
|
||||
padding-right: 40px !important;
|
||||
&:before {
|
||||
right: 20px;
|
||||
top: 22px;
|
||||
left: unset;
|
||||
}
|
||||
&:after {
|
||||
margin-top: -5px;
|
||||
margin-left: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
thead{
|
||||
th,td{
|
||||
border-bottom:2px solid $light-semi-gray;
|
||||
}
|
||||
}
|
||||
th,td{
|
||||
padding: 0.75rem;
|
||||
}
|
||||
}
|
||||
.dataTables_filter{
|
||||
margin-bottom: 25px;
|
||||
margin-left: 15px;
|
||||
input[type="search"]{
|
||||
border: 1px solid $light-semi-gray;
|
||||
padding: 0 10px;
|
||||
margin-left: 10px;
|
||||
height: 37px;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dataTables_scrollHeadInner{
|
||||
width: 100% !important;
|
||||
}
|
||||
table{
|
||||
.fixedHeader-floating {
|
||||
position: fixed!important;
|
||||
background-color: $white;
|
||||
}
|
||||
.box{
|
||||
>div{
|
||||
padding: 5px 15px;
|
||||
background-color: var(--theme-deafult);
|
||||
display: inline-block;
|
||||
color: $white;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 15px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
&.dataTable{
|
||||
&.fixedHeader-locked,&.fixedHeader-floating{
|
||||
width: calc(100vw - 250px) !important;
|
||||
max-width: calc(100vw - 250px) !important;
|
||||
overflow: hidden !important;
|
||||
right: 0 !important;
|
||||
z-index: 99;
|
||||
left: 260px !important;
|
||||
}
|
||||
&:not(.fixedHeader-locked){
|
||||
&:not(.fixedHeader-floating){
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.dataTable{
|
||||
border-collapse: collapse!important;
|
||||
margin-top: 0 !important;
|
||||
thead{
|
||||
.sorting,.sorting_asc,.sorting_desc,.sorting_asc_disabled,.sorting_desc_disabled{
|
||||
&:before,&:after{
|
||||
bottom: 12px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
input,select{
|
||||
border: 1px solid $light-semi-gray;
|
||||
height: 37px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-datatable {
|
||||
tr {
|
||||
td,th {
|
||||
&:first-child {
|
||||
min-width: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.jsgrid {
|
||||
.jsgrid-button {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.jsgrid-delete-button {
|
||||
background-position: 0 -78px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
.jsgrid-edit-button {
|
||||
background-position: -2px -122px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
.jsgrid-insert-mode-button {
|
||||
background-position: -2px -160px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
.jsgrid-insert-button {
|
||||
background-position: -3px -202px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
.toolbar{
|
||||
padding: 5px 15px;
|
||||
background-color: var(--theme-deafult);
|
||||
display: inline-block;
|
||||
color: $white;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 15px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
code{
|
||||
&.option{
|
||||
color: $danger-color !important;
|
||||
}
|
||||
&.api{
|
||||
color: $success-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Datatable extension
|
||||
.dt-ext{
|
||||
.dataTables_wrapper{
|
||||
.page-item{
|
||||
&.active {
|
||||
.page-link {
|
||||
background-color: var(--theme-deafult) !important;
|
||||
border-color: var(--theme-deafult) !important;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dataTables_paginate{
|
||||
border: none;
|
||||
.paginate_button{
|
||||
padding: 0;
|
||||
border: none;
|
||||
&.disabled,&.hover,&.active{
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
.page-link{
|
||||
margin-left: 0px;
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
button.dt-button, div.dt-button, a.dt-button, button.dt-button:focus:not(.disabled), div.dt-button:focus:not(.disabled), a.dt-button:focus:not(.disabled), button.dt-button:active:not(.disabled), button.dt-button.active:not(.disabled), div.dt-button:active:not(.disabled), div.dt-button.active:not(.disabled), a.dt-button:active:not(.disabled), a.dt-button.active:not(.disabled){
|
||||
background-color: var(--theme-deafult);
|
||||
border-color:var(--theme-deafult);
|
||||
border-radius: 2px;
|
||||
color: $white;
|
||||
background-image: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
button.dt-button.btn-success, div.dt-button.btn-success, a.dt-button.btn-success{
|
||||
background-color: $success-color;
|
||||
border-color:$success-color;
|
||||
}
|
||||
button.dt-button.btn-primary, div.dt-button.btn-primary, a.dt-button.btn-primary{
|
||||
background-color: var(--theme-deafult);
|
||||
border-color:var(--theme-deafult);
|
||||
}
|
||||
button.dt-button.btn-danger, div.dt-button.btn-danger, a.dt-button.btn-danger{
|
||||
background-color: $danger-color;
|
||||
border-color:$danger-color
|
||||
}
|
||||
table.dataTable th.focus, table.dataTable td.focus{
|
||||
outline: 3px solid var(--theme-deafult);
|
||||
}
|
||||
table.dataTable.display tbody > tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody > tr.odd.selected > .sorting_1{
|
||||
background-color: lighten($primary-color , 38%);
|
||||
|
||||
}
|
||||
table.dataTable.stripe tbody > tr.odd.selected, table.dataTable.stripe tbody > tr.odd > .selected, table.dataTable.display tbody > tr.odd.selected, table.dataTable.display tbody > tr.odd > .selected{
|
||||
background-color: lighten($primary-color , 38%);
|
||||
}
|
||||
table.dataTable.display tbody > tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody > tr.even.selected > .sorting_1{
|
||||
background-color: lighten($primary-color , 38%);
|
||||
}
|
||||
table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected{
|
||||
background-color: lighten($primary-color , 38%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td.highlight {
|
||||
background-color: $light-color !important;
|
||||
}
|
||||
td.details-control {
|
||||
background: url('../images/details_open.png') no-repeat center center;
|
||||
cursor: pointer;
|
||||
}
|
||||
tr.shown td.details-control {
|
||||
background: url('../images/details_close.png') no-repeat center center;
|
||||
}
|
||||
.dataTables_scroll{
|
||||
&~.dataTables_paginate{
|
||||
margin-top: 20px !important;
|
||||
}
|
||||
}
|
||||
.product-table{
|
||||
th{
|
||||
&:last-child{
|
||||
min-width: 120px;
|
||||
}
|
||||
}
|
||||
h6{
|
||||
font-weight: 600;
|
||||
color: $dark-color;
|
||||
}
|
||||
}
|
||||
table{
|
||||
&.dataTable{
|
||||
&.display {
|
||||
tbody {
|
||||
tr{
|
||||
&.odd {
|
||||
> .sorting_1{
|
||||
background-color: $light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
30. Data-table CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,249 @@
|
||||
/**=====================
|
||||
52. Datepicker CSS Start
|
||||
==========================**/
|
||||
//colors
|
||||
.clockpicker-canvas {
|
||||
line {
|
||||
stroke: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
.clockpicker-canvas-fg, .clockpicker-canvas-bearing {
|
||||
fill: var(--theme-deafult);
|
||||
}
|
||||
.daterangepicker {
|
||||
border: none;
|
||||
box-shadow: $card-box-shadow;
|
||||
td, th {
|
||||
&.available {
|
||||
&:hover {
|
||||
background-color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.datepicker{
|
||||
z-index: 99;
|
||||
}
|
||||
.datepicker--day-name {
|
||||
color: $primary-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
.datepicker--cell {
|
||||
&.-current- {
|
||||
color: $black;
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
border: 2px solid var(--theme-deafult);
|
||||
}
|
||||
&.-focus- {
|
||||
background: var(--theme-deafult);
|
||||
color: $white;
|
||||
}
|
||||
&.-selected- {
|
||||
background: var(--theme-deafult) !important;
|
||||
}
|
||||
&-day {
|
||||
width: 14.2857142857%;
|
||||
}
|
||||
}
|
||||
.daterangepicker.ltr {
|
||||
color: $dark-gray;
|
||||
z-index: 8;
|
||||
tr {
|
||||
font-size: 13px;
|
||||
td {
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
&.in-range {
|
||||
background-color: $auth-bg-color;
|
||||
}
|
||||
&.active {
|
||||
background-color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
.ranges {
|
||||
float: none;
|
||||
li {
|
||||
color: var(--theme-deafult);
|
||||
&:hover {
|
||||
background-color: var(--theme-deafult);
|
||||
border: 1px solid var(--theme-deafult);
|
||||
color: $white;
|
||||
}
|
||||
&.active {
|
||||
background-color: var(--theme-deafult);
|
||||
border: 1px solid var(--theme-deafult);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.calendar-time select {
|
||||
color: $dark-gray;
|
||||
border-color: #efefef;
|
||||
background-color: #fff;
|
||||
font-size: 14px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
.datepickers-container, .bootstrap-datetimepicker-widget {
|
||||
z-index: 7;
|
||||
}
|
||||
.datetime-picker {
|
||||
.bootstrap-datetimepicker-widget.dropdown-menu {
|
||||
width: auto;
|
||||
}
|
||||
.input-group-text i {
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
.date-range-picker{
|
||||
.theme-form{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
> div{
|
||||
&:last-child{
|
||||
.theme-form{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.daterangepicker{
|
||||
&:before {
|
||||
border-bottom: 7px solid $light-semi-gray;
|
||||
}
|
||||
.daterangepicker_input {
|
||||
i {
|
||||
font-size: 14px;
|
||||
color: $semi-dark;
|
||||
}
|
||||
}
|
||||
|
||||
.input-mini{
|
||||
border-color: $light-semi-gray !important;
|
||||
font-size: 14px;
|
||||
color: $semi-dark;
|
||||
}
|
||||
th,td{
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
&:hover{
|
||||
color: $dark-color;
|
||||
}
|
||||
&.prev,&.next{
|
||||
color: $white;
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
background-color: var(--theme-deafult);
|
||||
}
|
||||
&.month{
|
||||
color: var(--theme-deafult);
|
||||
letter-spacing: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
// timepicker css
|
||||
.clockpicker-popover {
|
||||
border: none;
|
||||
box-shadow: $card-box-shadow;
|
||||
z-index: 7;
|
||||
.popover-content {
|
||||
background-color: rgba($primary-color, 0.05);
|
||||
}
|
||||
}
|
||||
.clockpicker-canvas-bg {
|
||||
fill: lighten($primary-color, 38%);
|
||||
}
|
||||
.clockpicker-tick {
|
||||
&:hover {
|
||||
color: inherit;
|
||||
background-color: lighten($primary-color, 38%);
|
||||
}
|
||||
}
|
||||
|
||||
// calendar css
|
||||
.calendar-basic{
|
||||
.md-sidebar-aside {
|
||||
background-color: $white;
|
||||
}
|
||||
#external-events{
|
||||
padding: 20px;
|
||||
border: 1px solid $light-background;
|
||||
h4{
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
p{
|
||||
margin-top: 12px;
|
||||
}
|
||||
.fc-h-event{
|
||||
padding: 12px;
|
||||
background-color: $primary-color;
|
||||
border: 1px solid $primary-color;
|
||||
+ .fc-h-event{
|
||||
margin-top: 10px;
|
||||
}
|
||||
.fc-event-main{
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.calendar-default{
|
||||
.fc-daygrid-dot-event{
|
||||
.fc-event-title{
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.fc{
|
||||
td[role="presentation"]{
|
||||
border: 0;
|
||||
}
|
||||
.fc-daygrid-day-number,
|
||||
.fc-col-header-cell-cushion{
|
||||
color: $theme-body-font-color;
|
||||
}
|
||||
.fc-button{
|
||||
.fc-icon{
|
||||
height: 23px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fc-h-event{
|
||||
padding: 2px;
|
||||
background-color: $primary-color;
|
||||
border: 1px solid $primary-color;
|
||||
}
|
||||
.fc-toolbar-chunk{
|
||||
.fc-button-group{
|
||||
~ .fc-today-button{
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.fc-event-dragging {
|
||||
padding: 10px;
|
||||
background-color: var(--theme-deafult);
|
||||
}
|
||||
.fc {
|
||||
.fc-toolbar {
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
.fc-button-primary {
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba($primary-color, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
52. Datepicker CSS End
|
||||
==========================**/
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,386 @@
|
||||
/**=====================
|
||||
Dropdown CSS Start
|
||||
==========================**/
|
||||
.dropdown-auto {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
.dropdown-toggle {
|
||||
background-color: rgba(115, 102, 255, 0.08);
|
||||
color: $primary-color;
|
||||
border-radius: 10px;
|
||||
padding: 5px 10px;
|
||||
width: 100px;
|
||||
text-align: left;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
content: "\f107";
|
||||
border: none;
|
||||
font-family: "FontAwesome";
|
||||
font-size: 18px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.btn-primary {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
font-family: $font-rubik, $font-serif;
|
||||
}
|
||||
}
|
||||
|
||||
.docs-toggles {
|
||||
.dropdown {
|
||||
.dropdown-toggle {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
.dropdown {
|
||||
.dropdown-toggle {
|
||||
width: 120px;
|
||||
|
||||
@media only screen and (max-width: 575.98px) {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-dropdown {
|
||||
.dropdown-toggle {
|
||||
background: transparent;
|
||||
color: $theme-body-sub-title-color;
|
||||
padding: 0;
|
||||
width: auto;
|
||||
|
||||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-basic {
|
||||
margin-bottom: -10px;
|
||||
|
||||
.btn-group {
|
||||
|
||||
.btn-round {
|
||||
border-radius: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.separated-btn {
|
||||
margin-left: -6px;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-left: unset;
|
||||
margin-right: -6px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
max-height: 43px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.dropbtn {
|
||||
color: white;
|
||||
padding: 12px 35px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background-color: #f9f9f9;
|
||||
min-width: 175px;
|
||||
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 45px;
|
||||
|
||||
a {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.dropup-basic {
|
||||
.dropup {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
.dropbtn {
|
||||
color: white;
|
||||
padding: 12px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.dropup-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #f9f9f9;
|
||||
min-width: 170px;
|
||||
bottom: 45px;
|
||||
z-index: 999;
|
||||
left: 0;
|
||||
|
||||
a {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropup .dropup-content a:hover {
|
||||
background-color: $light-gray;
|
||||
}
|
||||
|
||||
.dropup:hover .dropup-content {
|
||||
display: block;
|
||||
|
||||
a {
|
||||
&.active {
|
||||
background-color: $light-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// dropdown
|
||||
.dropdown-block {
|
||||
li {
|
||||
.dropdown-item {
|
||||
&:hover {
|
||||
background-color: $gray-60;
|
||||
}
|
||||
}
|
||||
|
||||
.helper-truncate {
|
||||
&:hover {
|
||||
background-color: unset !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-basic {
|
||||
.dropdown {
|
||||
.dropdown-content {
|
||||
a {
|
||||
&:hover {
|
||||
background-color: $gray-60 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
.input-group {
|
||||
background-color: unset;
|
||||
padding: 6px 12px;
|
||||
border-top: 1px solid $light-semi-gray;
|
||||
background-color: $white;
|
||||
opacity: 0.6;
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: $gray-60;
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
background-color: unset;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
&::after {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
vertical-align: 4px;
|
||||
content: '';
|
||||
border-top: 4px solid;
|
||||
border-right: 4px solid transparent;
|
||||
border-bottom: 0;
|
||||
border-left: 4px solid transparent;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-left: unset;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropstart {
|
||||
.dropdown-toggle {
|
||||
&::before {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
content: '';
|
||||
border-top: 4px solid transparent;
|
||||
border-right: 4px solid;
|
||||
border-bottom: 4px solid transparent;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-left: 8px;
|
||||
margin-right: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropup {
|
||||
.dropdown-toggle {
|
||||
&::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
vertical-align: 4px;
|
||||
border-top: 0;
|
||||
border-right: 4px solid transparent;
|
||||
border-bottom: 4px solid;
|
||||
border-left: 4px solid transparent;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-left: unset;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropend {
|
||||
.dropdown-toggle {
|
||||
&::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
content: '';
|
||||
border-top: 4px solid transparent;
|
||||
border-right: 0;
|
||||
border-bottom: 4px solid transparent;
|
||||
border-left: 4px solid;
|
||||
margin-left: 8px;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-left: unset;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-wrapper {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
.helper-truncate {
|
||||
@media (max-width:400px) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dark-dropdown {
|
||||
.dropdown-block {
|
||||
li {
|
||||
.dropdown-item {
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background-color: $dark-color;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
btn-group {
|
||||
.dropdown-wrapper {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.rtl-dropdown {
|
||||
.dropdown-menu {
|
||||
li {
|
||||
.dropdown-item {
|
||||
[dir="rtl"] & {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
.dropdown-menu {
|
||||
[dir="rtl"] & {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
Dropdown CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,174 @@
|
||||
/**=====================
|
||||
11. Form Builder 1 CSS Start
|
||||
==========================**/
|
||||
.form-builder {
|
||||
.drag-box {
|
||||
user-select: none;
|
||||
fieldset {
|
||||
border: 1px dotted $light-gray;
|
||||
min-height: 655px;
|
||||
padding: 30px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
margin-top: 30px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.pl-md-radios {
|
||||
@media (max-width: 576px) {
|
||||
padding: 0 30px;
|
||||
}
|
||||
}
|
||||
.component {
|
||||
cursor: pointer;
|
||||
label{
|
||||
padding-top: 8px;
|
||||
}
|
||||
.form-group{
|
||||
input,textarea,select{
|
||||
border-radius: 4px;
|
||||
}
|
||||
.input-group{
|
||||
#prependedcheckbox, #prependedtext{
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
#appendedcheckbox{
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
#appendedtext, #buttondropdown{
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
#buttondropdown{
|
||||
margin-right: -1px;
|
||||
}
|
||||
.input-group-btn{
|
||||
button{
|
||||
border-radius: 4px;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
.input-group-prepend{
|
||||
.btn-right,.checkbox-radius{
|
||||
border-radius: 4px;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pl-md-radios{
|
||||
padding-left: 37px;
|
||||
}
|
||||
}
|
||||
}
|
||||
input {
|
||||
cursor: pointer;
|
||||
}
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
.popover {
|
||||
z-index: 8;
|
||||
opacity: 1;
|
||||
left: -290px !important;
|
||||
top: 95px !important;
|
||||
.control-group {
|
||||
cursor: default;
|
||||
}
|
||||
input {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.render {
|
||||
min-height: 500px;
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.popover {
|
||||
.controls {
|
||||
margin-left: 0;
|
||||
}
|
||||
.control-label {
|
||||
text-align: left;
|
||||
}
|
||||
form {
|
||||
width: 100%;
|
||||
}
|
||||
.fade.left.in
|
||||
{
|
||||
left: -215px;
|
||||
}
|
||||
}
|
||||
.target{
|
||||
&:after{
|
||||
float: left;
|
||||
content: " ";
|
||||
height: 77px;
|
||||
margin-top: 3px;
|
||||
background: $light-color;
|
||||
width: 100%;
|
||||
border: 1px dashed $light-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
.drag {
|
||||
form {
|
||||
padding: 10px 5px;
|
||||
border: 1px dotted $light-gray;
|
||||
position: absolute;
|
||||
background: $white;
|
||||
box-shadow: 0 0 30px $light-gray;
|
||||
overflow: hidden;
|
||||
input{
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-builder-header-1{
|
||||
background-color: $light-color;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
min-height: 67px;
|
||||
h6{
|
||||
margin-bottom: 0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.form-builder{
|
||||
.help-block{
|
||||
font-size: 12px;
|
||||
}
|
||||
input{
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
.form-group{
|
||||
.col-md-12{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.popover{
|
||||
width: 300px;
|
||||
}
|
||||
.popover-header{
|
||||
background-color: var(--theme-deafult);
|
||||
padding: 15px;
|
||||
}
|
||||
.popover-body{
|
||||
padding: 15px;
|
||||
.form-group{
|
||||
&.row{
|
||||
padding: 0 15px;
|
||||
.col-lg-12{
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
11. Form Builder 1 CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,87 @@
|
||||
/**=====================
|
||||
29. Form Input CSS Start
|
||||
==========================**/
|
||||
%input-mixin1 {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 10px;
|
||||
font-size: 14px;
|
||||
width: 20px;
|
||||
margin-left: -2.5px;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
top: 1px;
|
||||
}
|
||||
%input-mixin2 {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 10px;
|
||||
font-size: 14px;
|
||||
width: 20px;
|
||||
margin-left: -2.5px;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
top: 1px;
|
||||
}
|
||||
.input-group-square {
|
||||
.input-group-text ,.form-control{
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
.input-group-solid {
|
||||
.input-group-text ,.form-control{
|
||||
background: $light-color;
|
||||
}
|
||||
}
|
||||
.input-group-air {
|
||||
box-shadow: 0 3px 20px 0 $light-semi-gray;
|
||||
}
|
||||
.icon-addon {
|
||||
position: relative;
|
||||
color: $color-scarpa;
|
||||
display: block;
|
||||
&:after {
|
||||
display: table;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
&:before {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
.addon-md {
|
||||
.form-control {
|
||||
padding-left: 30px;
|
||||
float: left;
|
||||
font-weight: normal;
|
||||
}
|
||||
.glyphicon {
|
||||
@extend %input-mixin1;
|
||||
}
|
||||
.fa {
|
||||
@extend %input-mixin1;
|
||||
}
|
||||
}
|
||||
.form-control {
|
||||
padding-left: 30px;
|
||||
float: left;
|
||||
font-weight: normal;
|
||||
}
|
||||
.glyphicon,.fa {
|
||||
@extend %input-mixin2;
|
||||
}
|
||||
}
|
||||
.pill-input-group span {
|
||||
&:last-child {
|
||||
border-top-right-radius: 1.3rem;
|
||||
border-bottom-right-radius: 1.3rem;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 1.3rem;
|
||||
border-bottom-left-radius: 1.3rem;
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
29. Form Input CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,397 @@
|
||||
/**=====================
|
||||
48. Form Wizard CSS Start
|
||||
==========================**/
|
||||
/*Form Wizard One Start*/
|
||||
|
||||
.form-wizard {
|
||||
.tab {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-mb {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.step {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
margin: 0 2px;
|
||||
background-color: var(--theme-deafult);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
opacity: 0.5;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.finish {
|
||||
background-color: var(--theme-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*Form Wizard One ends*/
|
||||
|
||||
/*Form Wizard Two Start*/
|
||||
.stepwizard {
|
||||
display: table;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.stepwizard-row {
|
||||
display: table-row;
|
||||
|
||||
&:before {
|
||||
top: 16px;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
content: " ";
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: $light-gray;
|
||||
}
|
||||
|
||||
.stepwizard-step {
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
||||
p {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
button[disabled] {
|
||||
opacity: 1 !important;
|
||||
filter: alpha(opacity=100) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*Form Wizard Two Ends*/
|
||||
|
||||
|
||||
/*Form Wizard Three Start*/
|
||||
.f1 {
|
||||
fieldset {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.input-error {
|
||||
border-color: $danger-color;
|
||||
}
|
||||
|
||||
.f1-steps {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.f1-progress {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: $dark-gray;
|
||||
|
||||
.f1-progress-line {
|
||||
height: 1px;
|
||||
background: var(--theme-deafult);
|
||||
width: 16%;
|
||||
}
|
||||
}
|
||||
|
||||
.f1-step {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 33.333333%;
|
||||
text-align: center;
|
||||
|
||||
&.activated {
|
||||
.f1-step-icon {
|
||||
background: $white;
|
||||
border: 1px solid var(--theme-deafult);
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.f1-step-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--theme-deafult);
|
||||
font-size: 22px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.f1-step-icon {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: $dark-gray;
|
||||
font-size: 16px;
|
||||
color: $white;
|
||||
line-height: 20px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.f1-buttons {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
/*Form Wizard Three ends*/
|
||||
|
||||
|
||||
/*Form Wizard Four Start*/
|
||||
.wizard-4 {
|
||||
.action-bar {
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
right: 50px;
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
.btn {
|
||||
float: right;
|
||||
margin: 0 5px;
|
||||
background-color: #e3e0ff !important;
|
||||
border-color: #e3e0ff !important;
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
|
||||
.buttonDisabled {
|
||||
color: $semi-dark;
|
||||
background-color: rgba($semi-dark, 0.05) !important;
|
||||
border: 1px solid rgba($semi-dark, 0.05) !important;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.step-container {
|
||||
background: #f8f9fe;
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0 solid #e8ebf2;
|
||||
overflow: hidden;
|
||||
clear: right;
|
||||
width: 70%;
|
||||
div.content {
|
||||
display: block;
|
||||
position: absolute;
|
||||
float: left;
|
||||
text-align: left;
|
||||
overflow: auto;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
clear: both;
|
||||
.wizard-title {
|
||||
width: 450px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.loader {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.msg-box {
|
||||
position: fixed;
|
||||
display: none;
|
||||
padding: 5px 10px;
|
||||
background-color: lighten($primary-color, 10%);
|
||||
top: 30px;
|
||||
border-radius: 5px;
|
||||
right: 60px;
|
||||
padding: 10px 20px;
|
||||
|
||||
.content {
|
||||
padding: 0;
|
||||
float: left;
|
||||
padding-top: 3px;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.close {
|
||||
color: $white;
|
||||
margin-left: 10px;
|
||||
opacity: 1;
|
||||
font-size: 18px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
ul.anchor {
|
||||
float: left;
|
||||
width: 30%;
|
||||
height: calc(100vh - 300px);
|
||||
padding: 40px 30px;
|
||||
overflow: auto;
|
||||
|
||||
.disabled {
|
||||
opacity: 0.7;
|
||||
color: $semi-dark;
|
||||
|
||||
h4 {
|
||||
background-color: rgba($semi-dark, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding-bottom: 19px;
|
||||
float: left;
|
||||
clear: both;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
z-index: 0;
|
||||
|
||||
&+li {
|
||||
a {
|
||||
padding-left: 80px;
|
||||
[dir="rtl"] & {
|
||||
padding-left: unset;
|
||||
padding-right: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
position: absolute;
|
||||
bottom:0;
|
||||
width: auto;
|
||||
padding-bottom: 0;
|
||||
left: 9%;
|
||||
[dir="rtl"] & {
|
||||
left: unset;
|
||||
right: 9%;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 300px;
|
||||
@media (max-width: 1199px) {
|
||||
height: 220px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
display: inline-block;
|
||||
background-color: rgba($primary-color, 0.2);
|
||||
padding: 16px 23px;
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 6px;
|
||||
width: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
[dir="rtl"] & {
|
||||
left: unset;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
position: relative;
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 10px 20px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
text-decoration: none;
|
||||
outline-style: none;
|
||||
z-index: 1;
|
||||
font-size: 18px;
|
||||
|
||||
small {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.stepNumber {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&.done {
|
||||
h4 {
|
||||
color: $white;
|
||||
background: var(--theme-deafult);
|
||||
|
||||
&:before {
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: -3px;
|
||||
content: "\e64c";
|
||||
font-family: 'themify';
|
||||
background-color: $white;
|
||||
color: var(--theme-deafult);
|
||||
border-radius: 15px;
|
||||
padding: 2px;
|
||||
border: 1px solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.error {
|
||||
color: $dark-gray;
|
||||
background: $pitch-color;
|
||||
border: 1px solid $danger-color;
|
||||
|
||||
&:hover {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*Form Wizard Four Ends*/
|
||||
/**=====================
|
||||
48. Form Wizard CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,177 @@
|
||||
/**=====================
|
||||
12. Form Builder 2 CSS Start
|
||||
==========================**/
|
||||
.form-builder-column {
|
||||
#pills-tabContent {
|
||||
.theme-form {
|
||||
|
||||
.form-group,
|
||||
.ui-draggable {
|
||||
margin-bottom: 0 !important;
|
||||
|
||||
.checkbox {
|
||||
label {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
#prependedcheckbox {
|
||||
margin-right: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.input-group-prepend {
|
||||
.input-group-text {
|
||||
input {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-btn {
|
||||
button {
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.m-t-help-block {
|
||||
margin-top: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#pills-button {
|
||||
.theme-form {
|
||||
button {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.droppable-active {
|
||||
background-color: rgba($primary-color, 0.2) !important;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.form-body {
|
||||
min-height: 540px;
|
||||
}
|
||||
|
||||
.draggable {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.drag-bx {
|
||||
border: 1px dotted $light-gray;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.tools {
|
||||
a {
|
||||
cursor: pointer;
|
||||
font-size: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ui-front {
|
||||
textarea {
|
||||
font-family: $font-rubik, $font-serif !important;
|
||||
}
|
||||
}
|
||||
|
||||
.form-builder-2 {
|
||||
.form-group {
|
||||
.checkbox {
|
||||
label {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
#prependedcheckbox {
|
||||
margin-right: 0;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
.input-group-prepend {
|
||||
.input-group-text {
|
||||
input {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-btn {
|
||||
button {
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.m-t-help-block {
|
||||
margin-top: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-builder-2-header {
|
||||
background-color: $light-color;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
margin-bottom: 30px;
|
||||
|
||||
>div {
|
||||
display: inline-block;
|
||||
width: 49%;
|
||||
|
||||
nav {
|
||||
text-align: right;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.draggable {
|
||||
input {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
select {
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
12. Form Builder 2 CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,204 @@
|
||||
/**=====================
|
||||
26. Form CSS Start
|
||||
==========================**/
|
||||
.form-label {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.col-form-label {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
.form-space {
|
||||
margin-bottom: -10px;
|
||||
|
||||
>div {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.theme-form {
|
||||
.form-control {
|
||||
:focus {
|
||||
box-shadow: 0 0 0 0.2rem rgba(171, 140, 228, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
border-color: $form-input-border-color;
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: $form-placeholder-color;
|
||||
font-size: $form-placeholder-font-size;
|
||||
letter-spacing: $form-placeholder-letter-spacing;
|
||||
font-weight: $form-placeholder-font-weight;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
input[type=email],
|
||||
input[type=search],
|
||||
input[type=password],
|
||||
input[type=number],
|
||||
input[type=tel],
|
||||
input[type=date],
|
||||
input[type=datetime-local],
|
||||
input[type=time],
|
||||
input[type=datetime-local],
|
||||
input[type=month],
|
||||
input[type=week],
|
||||
input[type=url],
|
||||
input[type=file],
|
||||
textarea,
|
||||
select {
|
||||
border-color: $form-input-border-color;
|
||||
background-color: $form-input-bg-color;
|
||||
font-size: $form-placeholder-font-size;
|
||||
color: $form-placeholder-color;
|
||||
padding: 12px 10px;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
&::-webkit-input-placeholder {
|
||||
color: $form-placeholder-color;
|
||||
font-size: $form-placeholder-font-size;
|
||||
letter-spacing: $form-placeholder-letter-spacing;
|
||||
font-weight: $form-placeholder-font-weight;
|
||||
}
|
||||
}
|
||||
|
||||
input[type=file] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
select.form-control:not([size]):not([multiple]) {
|
||||
border-color: $form-input-border-color;
|
||||
font-size: $form-placeholder-font-size;
|
||||
}
|
||||
.checkbox {
|
||||
label {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-divider {
|
||||
position: relative;
|
||||
clear: both;
|
||||
height: 0;
|
||||
margin: 30px 0;
|
||||
border-top: 1px solid $light-semi-gray;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
left: 40%;
|
||||
margin-left: -10px;
|
||||
padding: 0 5px;
|
||||
content: "Or Signup With";
|
||||
color: $theme-font-color;
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.login-divider {
|
||||
position: relative;
|
||||
clear: both;
|
||||
height: 0;
|
||||
margin: 30px 0;
|
||||
border-top: 1px solid $light-semi-gray;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
left: 40%;
|
||||
margin-left: -10px;
|
||||
padding: 0 5px;
|
||||
color: $theme-font-color;
|
||||
background: $white;
|
||||
content: "Or Login With";
|
||||
}
|
||||
}
|
||||
|
||||
.btn-fb,
|
||||
.btn-twitter,
|
||||
.btn-google,
|
||||
.btn-linkedin {
|
||||
color: $white;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-fb {
|
||||
background-color: $fb;
|
||||
}
|
||||
|
||||
.btn-twitter {
|
||||
background-color: $twitter;
|
||||
}
|
||||
|
||||
.btn-google {
|
||||
background-color: $google-plus;
|
||||
}
|
||||
|
||||
.btn-linkedin {
|
||||
background-color: $linkedin;
|
||||
}
|
||||
}
|
||||
|
||||
.form-inline {
|
||||
display: flex;
|
||||
-webkit-box-flex: 0;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
flex-flow: row wrap;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
.col-form-label {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-form {
|
||||
.form-group {
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 1px;
|
||||
height: 25px;
|
||||
background: #e8ebf2;
|
||||
left: 82px;
|
||||
top: 50px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: "\f002";
|
||||
font-family: "FontAwesome";
|
||||
top: 53px;
|
||||
left: 53px;
|
||||
color: #8e8e8e;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
border: 1px solid $light-semi-gray;
|
||||
padding: 10px 10px 10px 70px;
|
||||
border-radius: 10px;
|
||||
background-color: rgba($light-color, 0.3);
|
||||
|
||||
&:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-label-align-right {
|
||||
label {
|
||||
text-align: right;
|
||||
padding-top: 17px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
26. Form CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,157 @@
|
||||
/**=====================
|
||||
10. ICON CSS Start
|
||||
==========================**/
|
||||
.icon-lists{
|
||||
div{
|
||||
cursor: pointer;
|
||||
line-height: 60px;
|
||||
white-space: nowrap;
|
||||
border-radius:4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover{
|
||||
background-color: $auth-bg-color;
|
||||
}
|
||||
i{
|
||||
margin: 0 15px 0 10px;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
&.whether-icon{
|
||||
svg{
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
&.feather-icons{
|
||||
.media{
|
||||
svg{
|
||||
margin: 0 15px 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.feather-icon{
|
||||
.icon-first{
|
||||
h6{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.flag-icons, .feather-icons{
|
||||
margin-bottom: -15px;
|
||||
margin-top: -15px;
|
||||
div{
|
||||
line-height: 1;
|
||||
word-wrap: break-word;
|
||||
overflow: auto;
|
||||
.flag-icon{
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
.media{
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
.media-body{
|
||||
h6{
|
||||
margin-bottom: 0;
|
||||
font-size:14px;
|
||||
font-weight: 400;
|
||||
max-width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
h5{
|
||||
background-color: var(--theme-deafult);
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font-size: 11px;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
color:$white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-hover-bottom{
|
||||
background-color: $light;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
box-shadow: 0px 0px 1px 1px $light-color;
|
||||
z-index: 999;
|
||||
.icon-popup{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content:center;
|
||||
width:100%;
|
||||
.close-icon{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
font-size: 20px;
|
||||
color: $gray-60;
|
||||
cursor:pointer;
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
padding: 20px;
|
||||
>
|
||||
div{
|
||||
display: inline-block;
|
||||
.flag-icon{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
.icon-class{
|
||||
margin: 0 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.icon-last {
|
||||
.form-inline {
|
||||
.form-group {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-title{
|
||||
display: block;
|
||||
color: $dark-color;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
}
|
||||
span, label , .btn {
|
||||
font-family: $font-roboto, $font-serif;
|
||||
}
|
||||
.form-group{
|
||||
input{
|
||||
display: inline-block;
|
||||
width: 300px;
|
||||
background-color: $white;
|
||||
font-family: $font-roboto, $font-serif;
|
||||
}
|
||||
}
|
||||
}
|
||||
.fa-fa-icon-show-div,.icons-show-div{
|
||||
display:none;
|
||||
}
|
||||
.icon-first{
|
||||
i{
|
||||
color: $dark-gray;
|
||||
}
|
||||
h6{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
10. ICON CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,166 @@
|
||||
/**=====================
|
||||
List CSS Start
|
||||
==========================**/
|
||||
.list-group-item.active {
|
||||
background-color: var(--theme-deafult);
|
||||
border-color: var(--theme-deafult);
|
||||
}
|
||||
|
||||
.list-group {
|
||||
i {
|
||||
margin-right: $list-group-margin;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
margin-right: $list-group-margin;
|
||||
}
|
||||
}
|
||||
|
||||
$list-name: primary,
|
||||
secondary,
|
||||
success,
|
||||
warning,
|
||||
info,
|
||||
light,
|
||||
danger,
|
||||
dark;
|
||||
|
||||
$list-light-color: $light-primary,
|
||||
$light-secondary,
|
||||
$light-success,
|
||||
$light-warning,
|
||||
$light-info,
|
||||
$light-white,
|
||||
$light-danger,
|
||||
$light-dark;
|
||||
|
||||
@each $var in $list-name {
|
||||
$i: index($list-name, $var);
|
||||
|
||||
.list-light-#{$var} {
|
||||
background-color: nth($list-light-color, $i);
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: nth($list-light-color, $i);
|
||||
}
|
||||
}
|
||||
|
||||
.list-hover-#{$var} {
|
||||
background-color: unset;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&.active,
|
||||
&:focus {
|
||||
background-color: nth($list-light-color, $i);
|
||||
color: $dark-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-list-wrapper {
|
||||
.list-group {
|
||||
.list-group-item {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@media (max-width: 414px) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (max-width: 366px) {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.list-img {
|
||||
width: calc(40px + (55 - 40) * ((100vw - 320px) / (1920 - 320)));
|
||||
height: calc(40px + (55 - 40) * ((100vw - 320px) / (1920 - 320)));
|
||||
margin-bottom: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.list-content {
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scrollbar-wrapper {
|
||||
max-height: 270px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.main-lists-content {
|
||||
small {
|
||||
@media (max-width: 480px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-behavior-1 {
|
||||
@media (max-width: 1199px) {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.flex-grow-1 {
|
||||
margin-left: 16px;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: 16px;
|
||||
margin-left: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-behavior-2 {
|
||||
@media (max-width: 1199px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flex-grow-1 {
|
||||
margin-right: 16px;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-left: 16px;
|
||||
margin-right: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-group {
|
||||
.list-group-item {
|
||||
padding: 11px 16px;
|
||||
|
||||
.form-check-input {
|
||||
&:focus {
|
||||
box-shadow: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
[dir="rtl"] & {
|
||||
margin-left: 10px;
|
||||
margin-right: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
List CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,145 @@
|
||||
/**=====================
|
||||
04. Loader CSS Start
|
||||
==========================**/
|
||||
.loader-wrapper {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
background-color: $white;
|
||||
z-index: 11;
|
||||
top: 0;
|
||||
|
||||
/*Color Loader*/
|
||||
.loader-index {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
filter: url("#goo");
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
width: 4em;
|
||||
height: 4em;
|
||||
background: var(--theme-deafult);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
transform: scale(0.5);
|
||||
animation: grow 2s cubic-bezier(.14, 0.05, 0.55, 0.5) infinite alternate;
|
||||
}
|
||||
|
||||
span {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
background: var(--theme-secondary);
|
||||
border-radius: 50%;
|
||||
margin-right: 2em;
|
||||
position: relative;
|
||||
transform: translateX(7em);
|
||||
animation: move 4s ease-in-out infinite;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
background: var(--theme-deafult);
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 3em;
|
||||
transform: translateX(0em);
|
||||
animation: shrink 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
background: $info-color;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
right: 3em;
|
||||
transform: translateX(0em);
|
||||
animation: shrink 2s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes grow {
|
||||
0% {
|
||||
transform: scale(0.5);
|
||||
background: $info-color;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1);
|
||||
background: var(--theme-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes move {
|
||||
0% {
|
||||
transform: translateX(7em);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(-5em)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shrink {
|
||||
0% {
|
||||
transform: translateX(0em)
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translateX(-1em)
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/*Color Loader*/
|
||||
|
||||
body {
|
||||
font-family: sans;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
place-content: center;
|
||||
background: black;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
margin-bottom: 2em;
|
||||
letter-spacing: 3px;
|
||||
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 1px;
|
||||
background: linear-gradient(to right, var(--theme-secondary), var(--theme-deafult), $info-color);
|
||||
color: #fff;
|
||||
top: 2.75em;
|
||||
left: 0.75em;
|
||||
width: 2.5em;
|
||||
font-weight: 400;
|
||||
font-variant: small-caps;
|
||||
font-size: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
04. Loader CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,97 @@
|
||||
/**=====================
|
||||
Modal CSS start
|
||||
==========================**/
|
||||
|
||||
.modal-toggle-wrapper {
|
||||
padding: 40px;
|
||||
|
||||
@media (max-width:768px) {
|
||||
padding: calc(14px + (40 - 14) * ((100vw - 320px) / (768 - 320)));
|
||||
}
|
||||
|
||||
.form-control {
|
||||
&::placeholder {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-img {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
|
||||
@media (max-width:992px) {
|
||||
width: calc(136px + (200 - 136) * ((100vw - 320px) / (992 - 320)));
|
||||
height: calc(136px + (200 - 136) * ((100vw - 320px) / (992 - 320)));
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
@media (max-width:992px) {
|
||||
width: calc(75px + (100 - 75) * ((100vw - 320px) / (992 - 320)));
|
||||
height: calc(75px + (100 - 75) * ((100vw - 320px) / (992 - 320)));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li+li {
|
||||
margin-left: -39px;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.large-modal-header,
|
||||
.large-modal-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $dark-color;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-padding-space {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.svg-modal {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
stroke: $secondary-color;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.card-wrapper {
|
||||
.modal-heading {
|
||||
h5 {
|
||||
font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1400 - 320)));
|
||||
}
|
||||
}
|
||||
|
||||
.balance-modal {
|
||||
@media (min-width:750px) and (max-width:1200px) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
Modal CSS end
|
||||
==========================**/
|
||||
@@ -0,0 +1,25 @@
|
||||
/**=====================
|
||||
Popover CSS Start
|
||||
==========================**/
|
||||
.popover-header {
|
||||
background-color: $dark-color;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.popover-main {
|
||||
.btn-showcase {
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
button {
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
Popover CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,49 @@
|
||||
/**=====================
|
||||
77. Print CSS Start
|
||||
==========================**/
|
||||
@media print {
|
||||
.sidebar-wrapper, .page-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page-body {
|
||||
margin: 0;
|
||||
}
|
||||
.page-wrapper {
|
||||
.page-title {
|
||||
visibility: hidden;
|
||||
}
|
||||
.page-body-wrapper {
|
||||
.page-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.compact-wrapper {
|
||||
.page-body-wrapper {
|
||||
.page-body {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
table.fixedHeader-floating {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.invoice-table{
|
||||
margin-top: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.invoice{
|
||||
.text-right{
|
||||
input{
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
.media {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
77. Print CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,340 @@
|
||||
/**=====================
|
||||
28. Radio CSS Start
|
||||
==========================**/
|
||||
.animate-chk{
|
||||
label{
|
||||
line-height: 1.6;
|
||||
cursor: pointer;
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.checkbox_animated {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
margin: 0 1rem 0 0;
|
||||
&:before {
|
||||
transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
|
||||
transform: rotate(-45deg) scale(0, 0);
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0.25rem;
|
||||
top: 0.225rem;
|
||||
z-index: 1;
|
||||
width: 0.75rem;
|
||||
height: 0.375rem;
|
||||
border: 2px solid var(--theme-deafult);
|
||||
border-top-style: none;
|
||||
border-right-style: none;
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -0.125rem;
|
||||
left: 0;
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
background: $white;
|
||||
border: 2px solid $light-gray;
|
||||
cursor: pointer;
|
||||
}
|
||||
&:checked:before {
|
||||
transform: rotate(-45deg) scale(1, 1);
|
||||
}
|
||||
}
|
||||
.radio_animated {
|
||||
position: relative;
|
||||
margin: 0 1rem 0 0;
|
||||
cursor: pointer;
|
||||
&:before {
|
||||
transition: transform 0.4s cubic-bezier(0.45, 1.8, 0.5, 0.75);
|
||||
transform: scale(0, 0);
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0.125rem;
|
||||
z-index: 1;
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
background: var(--theme-deafult);
|
||||
border-radius: 50%;
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -0.25rem;
|
||||
left: -0.125rem;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
background: $white;
|
||||
border: 2px solid $light-gray;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&:checked:before {
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox{
|
||||
label {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding-left: 16px;
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
&::before {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
left: 0;
|
||||
margin-left: -16px;
|
||||
border: 1px solid $light-semi-gray;
|
||||
border-radius: 3px;
|
||||
background-color: $white;
|
||||
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
|
||||
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
|
||||
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
|
||||
}
|
||||
&::after{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin-left: -20px;
|
||||
padding-left: 3px;
|
||||
padding-top: 1px;
|
||||
font-size: 11px;
|
||||
color: $theme-font-color;
|
||||
}
|
||||
}
|
||||
input[type="checkbox"]{
|
||||
opacity: 0;
|
||||
&:focus{
|
||||
outline-offset: -2px;
|
||||
& + label{
|
||||
&::before{
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
input[type="checkbox"]{
|
||||
&:checked{
|
||||
& + label{
|
||||
&::before{
|
||||
font-family: $font-themify;
|
||||
content: "\e64c";
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:disabled{
|
||||
& + label{
|
||||
opacity: 0.65;
|
||||
&::before{
|
||||
background-color: $light-color;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.checkbox-circle{
|
||||
label{
|
||||
&::before{
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.checkbox-inline{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.m-squar{
|
||||
label {
|
||||
&::before {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
.checkbox-circle{
|
||||
label{
|
||||
&::before{
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.checkbox-inline{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
@each $btn-name, $btn-color in (primary, var(--theme-deafult)),
|
||||
(secondary, $secondary-color) ,
|
||||
(success, $success-color),
|
||||
(danger, $danger-color),
|
||||
(info, $info-color),
|
||||
(light, $light-color),
|
||||
(dark, $dark-color),
|
||||
(warning, $warning-color) {
|
||||
.checkbox-#{$btn-name}{
|
||||
label{
|
||||
&::before{
|
||||
border-color:$btn-color;
|
||||
}
|
||||
}
|
||||
input[type="checkbox"]{
|
||||
&:checked{
|
||||
& + label{
|
||||
&::before{
|
||||
border-color: $btn-color;
|
||||
color: $btn-color;
|
||||
}
|
||||
&::after{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.checkbox-solid-#{$btn-name}{
|
||||
label{
|
||||
&:before{
|
||||
background-color: $btn-color;
|
||||
border-color: $btn-color;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
input[type="checkbox"] {
|
||||
&:checked{
|
||||
& + label{
|
||||
&::before{
|
||||
background-color: $btn-color;
|
||||
border-color: $btn-color;
|
||||
color: $white;
|
||||
}
|
||||
&::after{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.radio-#{$btn-name}{
|
||||
input[type="radio"]
|
||||
{
|
||||
& + label{
|
||||
&::before{
|
||||
border-color: $btn-color;
|
||||
}
|
||||
&::after{
|
||||
background-color: $btn-color;
|
||||
}
|
||||
}
|
||||
&:checked{
|
||||
& + label{
|
||||
&::before{
|
||||
border-color: $btn-color;
|
||||
}
|
||||
&::after{
|
||||
background-color: $btn-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.m-checkbox-inline{
|
||||
.checkbox{
|
||||
display: inline-block;
|
||||
}
|
||||
.radio{
|
||||
display: inline-block;
|
||||
}
|
||||
label{
|
||||
margin-right:20px;
|
||||
}
|
||||
}
|
||||
.radio{
|
||||
label{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding-left: 5px;
|
||||
cursor: pointer;
|
||||
&::before{
|
||||
content: "";
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
left: 0;
|
||||
margin-left: -20px;
|
||||
border: 1px solid $light-semi-gray;
|
||||
border-radius: 50%;
|
||||
background-color: $white;
|
||||
-webkit-transition: border 0.15s ease-in-out;
|
||||
-o-transition: border 0.15s ease-in-out;
|
||||
transition: border 0.15s ease-in-out;
|
||||
}
|
||||
&::after{
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
content: " ";
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
margin-left: -20px;
|
||||
border-radius: 50%;
|
||||
background-color: $dark-gray;
|
||||
-webkit-transform: scale(0, 0);
|
||||
-ms-transform: scale(0, 0);
|
||||
-o-transform: scale(0, 0);
|
||||
transform: scale(0, 0);
|
||||
-webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
|
||||
-moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
|
||||
-o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
|
||||
transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
|
||||
}
|
||||
}
|
||||
input[type="radio"]{
|
||||
opacity: 0;
|
||||
&:focus{
|
||||
& + label{
|
||||
&::before{
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
&:checked{
|
||||
& + label{
|
||||
&::after{
|
||||
-webkit-transform: scale(1, 1);
|
||||
-ms-transform: scale(1, 1);
|
||||
-o-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
&:disabled{
|
||||
& + label{
|
||||
opacity: 0.65;
|
||||
&::before{
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.radio-inline{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
28. Radio CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,230 @@
|
||||
/**=====================
|
||||
56. Ribbon CSS Start
|
||||
==========================**/
|
||||
[class*="ribbon-wrapper"]{
|
||||
position: relative;
|
||||
padding-top: 40px;
|
||||
}
|
||||
.ribbon {
|
||||
padding: 0 20px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
clear: left;
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 0px;
|
||||
color: $white;
|
||||
z-index:2;
|
||||
}
|
||||
.ribbon-clip{
|
||||
left: -14px;
|
||||
&:before{
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: "";
|
||||
border: 7px solid transparent;
|
||||
border-top-color: $dark-color;
|
||||
border-right-color: $dark-color;
|
||||
}
|
||||
}
|
||||
|
||||
.ribbon-vertical-left-wrapper {
|
||||
padding-left: 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ribbon-vertical-right-wrapper{
|
||||
padding-right: 40px;
|
||||
}
|
||||
.ribbon-wrapper-bottom {
|
||||
padding-bottom: 40px;
|
||||
padding-top: 0;
|
||||
}
|
||||
.ribbon-wrapper-right-bottom {
|
||||
padding-right: 40px;
|
||||
}
|
||||
|
||||
.ribbon-space-bottom{
|
||||
top:0px;
|
||||
}
|
||||
|
||||
.ribbon-bookmark{
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: '';
|
||||
border: 15px solid $dark-color;
|
||||
border-right: 10px solid transparent;
|
||||
}
|
||||
}
|
||||
.ribbon-right {
|
||||
left: auto;
|
||||
right: -2px;
|
||||
}
|
||||
.ribbon-clip-right{
|
||||
right: -14px;
|
||||
&:before{
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: "";
|
||||
border: 7px solid transparent;
|
||||
border-top-color: $dark-color;
|
||||
border-right-color: $dark-color;
|
||||
}
|
||||
}
|
||||
.ribbon-clip-bottom{
|
||||
left: -14px;
|
||||
bottom:12px;
|
||||
top:auto;
|
||||
&:before{
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: "";
|
||||
border: 7px solid transparent;
|
||||
border-top-color: $dark-color;
|
||||
border-right-color: $dark-color;
|
||||
}
|
||||
}
|
||||
.ribbon-clip-bottom-right{
|
||||
right: -14px;
|
||||
left:auto;
|
||||
bottom:12px;
|
||||
top:auto;
|
||||
&:before{
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
right: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: "";
|
||||
border: 7px solid transparent;
|
||||
border-top-color: $dark-color;
|
||||
border-right-color: $dark-color;
|
||||
}
|
||||
}
|
||||
.ribbon-bookmark.ribbon-right:before {
|
||||
right: 100%;
|
||||
left: auto;
|
||||
border-right: 15px solid $dark-color;
|
||||
border-left: 10px solid transparent;
|
||||
}
|
||||
.ribbon-vertical-left {
|
||||
clear: none;
|
||||
padding: 0 5px;
|
||||
height: 70px;
|
||||
width: 30px;
|
||||
line-height: 70px;
|
||||
text-align: center;
|
||||
left: 12px;
|
||||
top: -2px;
|
||||
}
|
||||
.ribbon-vertical-right {
|
||||
clear: none;
|
||||
padding: 0 5px;
|
||||
height: 70px;
|
||||
width: 30px;
|
||||
line-height: 70px;
|
||||
text-align: center;
|
||||
top: -2px;
|
||||
left: auto;
|
||||
right: 12px;
|
||||
}
|
||||
.ribbon-bookmark {
|
||||
&.ribbon-vertical-left:before, &.ribbon-vertical-right:before {
|
||||
top: 100%;
|
||||
left: 0;
|
||||
margin-top: -14px;
|
||||
border-right: 15px solid $dark-color;
|
||||
border-bottom: 10px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@each $ribbon-name, $ribbon-color in (primary, $primary-color),
|
||||
(secondary, $secondary-color) ,
|
||||
(success, $success-color),
|
||||
(danger, $danger-color),
|
||||
(info, $info-color),
|
||||
(light, $light-color),
|
||||
(dark, $dark-color),
|
||||
(warning, $warning-color) {
|
||||
.ribbon-#{$ribbon-name}{
|
||||
background: $ribbon-color;
|
||||
}
|
||||
.ribbon-#{$ribbon-name} {
|
||||
background: $ribbon-color;
|
||||
}
|
||||
.ribbon-bookmark {
|
||||
&.ribbon-#{$ribbon-name}:before {
|
||||
border-color: $ribbon-color;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
&.ribbon-right.ribbon-#{$ribbon-name}:before {
|
||||
border-right-color: $ribbon-color;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
&.ribbon-vertical-left.ribbon-#{$ribbon-name}:before, &.ribbon-vertical-right.ribbon-#{$ribbon-name}:before {
|
||||
border-right-color: $ribbon-color;
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
}
|
||||
.ribbon-#{$ribbon-name}.ribbon-corner {
|
||||
&:before {
|
||||
border-top-color: $ribbon-color;
|
||||
border-left-color: $ribbon-color;
|
||||
}
|
||||
&.ribbon-right:before {
|
||||
border-right-color: $ribbon-color;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
&.ribbon-bottom:before {
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: $ribbon-color;
|
||||
}
|
||||
}
|
||||
.ribbon-#{$ribbon-name}.ribbon-clip{
|
||||
&:before{
|
||||
border-color: transparent;
|
||||
border-top-color: darken($ribbon-color, 10%);
|
||||
border-right-color: darken($ribbon-color, 10%);
|
||||
}
|
||||
}
|
||||
.ribbon-#{$ribbon-name}.ribbon-clip-right{
|
||||
&:before{
|
||||
border-right-color: transparent;
|
||||
border-top-color: darken($ribbon-color, 10%);
|
||||
border-left-color: darken($ribbon-color, 10%);
|
||||
}
|
||||
}
|
||||
.ribbon-#{$ribbon-name}.ribbon-clip-bottom{
|
||||
&:before{
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: darken($ribbon-color, 10%);
|
||||
border-right-color: darken($ribbon-color, 10%);
|
||||
}
|
||||
}
|
||||
.ribbon-#{$ribbon-name}.ribbon-clip-bottom-right{
|
||||
&:before{
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: darken($ribbon-color, 10%);
|
||||
border-right-color: transparent;
|
||||
border-left-color: darken($ribbon-color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
56. Ribbon CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,27 @@
|
||||
/**=====================
|
||||
Scrollbar CSS Start
|
||||
==========================**/
|
||||
[data-simplebar] {
|
||||
position: unset;
|
||||
}
|
||||
.simplebar-mask {
|
||||
top: 100px;
|
||||
}
|
||||
.simplebar-track {
|
||||
right: -2px;
|
||||
&.simplebar-vertical {
|
||||
top: 100px;
|
||||
width: 10px;
|
||||
}
|
||||
&.simplebar-horizontal {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
}
|
||||
.simplebar-scrollbar {
|
||||
&:before {
|
||||
background: rgba($primary-color, 0.2);
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
Scrollbar CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,372 @@
|
||||
/**=====================
|
||||
18. Switch CSS Start
|
||||
==========================**/
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
|
||||
input {
|
||||
display: none;
|
||||
|
||||
&:checked+.switch-state {
|
||||
background-color: var(--theme-deafult);
|
||||
|
||||
&:before {
|
||||
transform: translateX(26px);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus+.switch-state {
|
||||
box-shadow: 0 0 1px var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-state {
|
||||
border-radius: 20px;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: $light-color;
|
||||
transition: .4s;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: $white;
|
||||
transition: .4s;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-state {
|
||||
.switch-state {
|
||||
&:after {
|
||||
content: "\efb8";
|
||||
font-family: $font-ICO;
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
color: $dark-color;
|
||||
transition: .4s;
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&:checked+.switch-state {
|
||||
&:after {
|
||||
content: "\efad";
|
||||
left: 36px;
|
||||
opacity: 1;
|
||||
transition: .4s;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-lg {
|
||||
.switch {
|
||||
width: 75px;
|
||||
height: 40px;
|
||||
|
||||
.switch-state {
|
||||
&:before {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
left: 7px;
|
||||
bottom: 5px;
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-lg.icon-state {
|
||||
.switch {
|
||||
.switch-state {
|
||||
&:after {
|
||||
left: 12px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&:checked+.switch-state {
|
||||
&:after {
|
||||
left: 47px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
transform: translateX(32px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-sm {
|
||||
&.icon-state {
|
||||
.switch {
|
||||
.switch-state {
|
||||
&:after {
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&:checked+.switch-state {
|
||||
&:after {
|
||||
left: 13px;
|
||||
top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch {
|
||||
width: 25px;
|
||||
height: 16px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0px;
|
||||
|
||||
.switch-state {
|
||||
&:before {
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&:checked+.switch-state {
|
||||
&:before {
|
||||
left: -13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-outline {
|
||||
.switch-state {
|
||||
background-color: $white;
|
||||
border: 1px solid var(--theme-deafult);
|
||||
transition: .4s;
|
||||
|
||||
&:before {
|
||||
background-color: $light-color;
|
||||
bottom: 3px;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-outline {
|
||||
.switch {
|
||||
input {
|
||||
display: none;
|
||||
|
||||
&:checked+.switch-state {
|
||||
background-color: $transparent-color;
|
||||
border: 1px solid var(--theme-deafult);
|
||||
|
||||
&:before {
|
||||
background-color: var(--theme-deafult);
|
||||
bottom: 3px;
|
||||
transform: translateX(26px);
|
||||
}
|
||||
|
||||
&:after {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-outline {
|
||||
.switch-state.bg-primary {
|
||||
border: 1px solid var(--theme-deafult);
|
||||
background-color: $transparent-color !important;
|
||||
}
|
||||
|
||||
.switch {
|
||||
input {
|
||||
&:checked+.switch-state.bg-primary {
|
||||
background-color: $transparent-color !important;
|
||||
border: 1px solid var(--theme-deafult);
|
||||
|
||||
&:before {
|
||||
background-color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-state.bg-dark {
|
||||
border: 1px solid $dark-color;
|
||||
background-color: $transparent-color !important;
|
||||
}
|
||||
|
||||
.switch {
|
||||
input {
|
||||
&:checked+.switch-state.bg-dark {
|
||||
background-color: $transparent-color !important;
|
||||
border: 1px solid $dark-color;
|
||||
|
||||
&:before {
|
||||
background-color: $dark-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-state.bg-warning {
|
||||
border: 1px solid $warning-color;
|
||||
background-color: $transparent-color !important;
|
||||
}
|
||||
|
||||
.switch {
|
||||
input {
|
||||
&:checked+.switch-state.bg-warning {
|
||||
background-color: $transparent-color !important;
|
||||
border: 1px solid $warning-color;
|
||||
|
||||
&:before {
|
||||
background-color: $warning-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-state.bg-success {
|
||||
border: 1px solid $success-color;
|
||||
background-color: $transparent-color !important;
|
||||
}
|
||||
|
||||
.switch {
|
||||
input {
|
||||
&:checked+.switch-state.bg-success {
|
||||
background-color: $transparent-color !important;
|
||||
border: 1px solid $success-color;
|
||||
|
||||
&:before {
|
||||
background-color: $success-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-state.bg-info {
|
||||
border: 1px solid $info-color;
|
||||
background-color: $transparent-color !important;
|
||||
}
|
||||
|
||||
.switch {
|
||||
input {
|
||||
&:checked+.switch-state.bg-info {
|
||||
background-color: $transparent-color !important;
|
||||
border: 1px solid $info-color;
|
||||
|
||||
&:before {
|
||||
background-color: $info-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-state.bg-danger {
|
||||
border: 1px solid $danger-color;
|
||||
background-color: $transparent-color !important;
|
||||
}
|
||||
|
||||
.switch {
|
||||
input {
|
||||
&:checked+.switch-state.bg-danger {
|
||||
background-color: $transparent-color !important;
|
||||
border: 1px solid $danger-color;
|
||||
|
||||
&:before {
|
||||
background-color: $danger-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-state.bg-primary {
|
||||
border: 1px solid var(--theme-deafult);
|
||||
background-color: $transparent-color !important;
|
||||
}
|
||||
|
||||
.switch {
|
||||
input {
|
||||
&:checked+.switch-state.bg-primary {
|
||||
background-color: $transparent-color !important;
|
||||
border: 1px solid var(--theme-deafult);
|
||||
|
||||
&:before {
|
||||
background-color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-state.bg-secondary {
|
||||
border: 1px solid var(--theme-secondary);
|
||||
background-color: $transparent-color !important;
|
||||
}
|
||||
|
||||
.switch {
|
||||
input {
|
||||
&:checked+.switch-state.bg-secondary {
|
||||
background-color: $transparent-color !important;
|
||||
border: 1px solid var(--theme-secondary);
|
||||
|
||||
&:before {
|
||||
background-color: var(--theme-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-showcase {
|
||||
margin-bottom: -8px;
|
||||
|
||||
.media {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.form-check {
|
||||
.form-check-input {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-switch {
|
||||
.form-check-input {
|
||||
&:checked {
|
||||
background-color: var(--theme-deafult);
|
||||
border-color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
18. Switch CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,494 @@
|
||||
/**=====================
|
||||
Tabs CSS Start
|
||||
==========================**/
|
||||
.nav-pills {
|
||||
|
||||
.nav-link.active,
|
||||
.show>.nav-link {
|
||||
background-color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
$nav-name: theme,
|
||||
primary,
|
||||
secondary,
|
||||
success,
|
||||
danger,
|
||||
info,
|
||||
light,
|
||||
dark,
|
||||
warning;
|
||||
$nav-color: var(--theme-deafult),
|
||||
var(--theme-deafult),
|
||||
$secondary-color,
|
||||
$success-color,
|
||||
$danger-color,
|
||||
$info-color,
|
||||
$light-color,
|
||||
$dark-color,
|
||||
$warning-color;
|
||||
|
||||
@each $var in $nav-name {
|
||||
$i: index($label-name, $var);
|
||||
|
||||
.nav-#{$var},
|
||||
.nav-pills.nav-#{$var} {
|
||||
.nav-link {
|
||||
color: nth($nav-color, $i);
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.show>.nav-link {
|
||||
background-color: nth($nav-color, $i);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs.nav-bottom {
|
||||
.nav-item {
|
||||
|
||||
.nav-link.active,
|
||||
.nav-link.focus,
|
||||
.nav-link.hover {
|
||||
border-color: $white #dee2e6 #dee2e6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
~.nav-tabs {
|
||||
&.border-tab {
|
||||
margin-bottom: 0;
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.border-tab.nav-tabs {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
font-size: 16px;
|
||||
color: $dark-color;
|
||||
text-align: center;
|
||||
padding: 10px 25px;
|
||||
border: none;
|
||||
border-bottom: none;
|
||||
transition: 0.3s;
|
||||
|
||||
@media (min-width: 576px) and (max-width: 1920px) {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&.show,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
|
||||
&.active,
|
||||
&.show,
|
||||
&:focus {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.border-tab.nav-left {
|
||||
.nav-link {
|
||||
transition: all 0.3s ease;
|
||||
color: $dark-color;
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.show>.nav-link {
|
||||
background-color: transparent;
|
||||
border-left-color: var(--theme-deafult);
|
||||
color: var(--theme-deafult);
|
||||
border-radius: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.border-tab.nav-right {
|
||||
.nav-link {
|
||||
border-right: 2px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
color: $dark-color;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.show>.nav-link {
|
||||
background-color: transparent;
|
||||
border-right-color: var(--theme-deafult);
|
||||
color: var(--theme-deafult);
|
||||
border-radius: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
$m-nav-name: theme,
|
||||
primary,
|
||||
secondary,
|
||||
success,
|
||||
danger,
|
||||
info,
|
||||
light,
|
||||
dark,
|
||||
warning;
|
||||
$nav-color: var(--theme-deafult),
|
||||
var(--theme-deafult),
|
||||
$secondary-color,
|
||||
$success-color,
|
||||
$danger-color,
|
||||
$info-color,
|
||||
$light-color,
|
||||
$dark-color,
|
||||
$warning-color;
|
||||
|
||||
@each $var in $m-nav-name {
|
||||
$i: index($label-name, $var);
|
||||
|
||||
.border-tab.nav-#{$var} {
|
||||
|
||||
.nav-link.active,
|
||||
.nav-item.show,
|
||||
.nav-link:focus,
|
||||
.nav-link:hover {
|
||||
color: nth($nav-color, $i);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
transition: 0.3s;
|
||||
|
||||
&.active,
|
||||
&.show,
|
||||
&:focus {
|
||||
border-bottom: 2px solid nth($nav-color, $i);
|
||||
}
|
||||
|
||||
&.active,
|
||||
&.show,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: nth($nav-color, $i);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.border-tab.nav-left.nav-#{$var} {
|
||||
|
||||
.nav-link.active,
|
||||
.show>.nav-link {
|
||||
border-left-color: nth($nav-color, $i);
|
||||
color: nth($nav-color, $i);
|
||||
}
|
||||
}
|
||||
|
||||
.border-tab.nav-right.nav-#{$var} {
|
||||
|
||||
.nav-link.active,
|
||||
.show>.nav-link {
|
||||
border-right-color: nth($nav-color, $i);
|
||||
color: nth($nav-color, $i);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabbed-card {
|
||||
ul {
|
||||
position: absolute;
|
||||
right: 22px;
|
||||
top: 23px;
|
||||
border-bottom: none;
|
||||
|
||||
&.border-tab {
|
||||
&.nav-tabs {
|
||||
top: 12px;
|
||||
|
||||
.nav-item {
|
||||
float: right;
|
||||
|
||||
.nav-link {
|
||||
padding: 23px 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flex-space {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
|
||||
@media (max-width:576px) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tab-img {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
.navlink-title {
|
||||
background-color: unset;
|
||||
padding: 8px;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
border-bottom-left-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.simple-wrapper {
|
||||
.dropdown-collection {
|
||||
.dropdown-item {
|
||||
|
||||
&:hover,
|
||||
&:active {
|
||||
background-color: $gray-60 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog-wrapper {
|
||||
.blog-img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.designer-details {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
|
||||
@media (max-width:1400px) {
|
||||
gap: calc(14px + (35 - 14) * ((100vw - 320px) / (1400 - 320)));
|
||||
}
|
||||
|
||||
.designer-profile {
|
||||
display: inline-block;
|
||||
|
||||
.designer-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
|
||||
|
||||
.designer-img {
|
||||
height: 50px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.designer-content {
|
||||
h6 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
p {
|
||||
color: $light-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
.nav-border {
|
||||
color: $black;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ico-color {
|
||||
color: $warning-color;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.main-inbox {
|
||||
.header-inbox {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $light-text;
|
||||
padding-bottom: 8px;
|
||||
|
||||
.header-left-inbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.inbox-img {
|
||||
img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-right-inbox {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
||||
@media (max-width: 560px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.body-inbox {
|
||||
.body-h-wrapper {
|
||||
display: flex;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 1px solid var(--light-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-space {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
$tabs-name: primary,
|
||||
secondary,
|
||||
success,
|
||||
danger,
|
||||
warning,
|
||||
info,
|
||||
light,
|
||||
dark;
|
||||
|
||||
$tab-color : $primary-color,
|
||||
$secondary-color,
|
||||
$success-color,
|
||||
$danger-color,
|
||||
$warning-color,
|
||||
$info-color,
|
||||
$light-color,
|
||||
$dark-color;
|
||||
|
||||
@each $var in $tabs-name {
|
||||
$i: index($tabs-name, $var);
|
||||
|
||||
#bottom-tab {
|
||||
.nav-border {
|
||||
&.tab-#{$var} {
|
||||
&:hover {
|
||||
color: nth($tab-color, $i);
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
color: nth($tab-color, $i);
|
||||
border-bottom: 2px solid nth($tab-color, $i);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#sideline-tab {
|
||||
.nav-effect {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
height: 14px;
|
||||
width: 80%;
|
||||
border-bottom: 1px solid;
|
||||
margin-top: 10px;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
||||
transition: opacity 0.35s, transform 0.35s;
|
||||
-webkit-transform: scale(0, 1);
|
||||
transform: scale(0, 1);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::after {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-responsive-side {
|
||||
.border-tab {
|
||||
&.nav-secondary {
|
||||
&.nav-left {
|
||||
.nav-link {
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background-color: unset;
|
||||
border-left: none;
|
||||
border-radius: 0;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pills-blogger {
|
||||
@media (max-width: 576px) {
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.material-wrapper {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
||||
@media (max-width:576px) {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
Tabs CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,326 @@
|
||||
/**=====================
|
||||
39. Table CSS Start
|
||||
==========================**/
|
||||
|
||||
thead,
|
||||
tbody,
|
||||
tfoot,
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
border-color: #dee2e6;
|
||||
}
|
||||
|
||||
.pills-component {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.table {
|
||||
margin-bottom: $table-b-margin;
|
||||
|
||||
> :not(:last-child) {
|
||||
> :last-child {
|
||||
>* {
|
||||
border-bottom-color: $light-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: $table-padding;
|
||||
}
|
||||
|
||||
&.table-primary {
|
||||
th {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
thead.bg-primary {
|
||||
tr {
|
||||
th {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
color: $table-heading-color;
|
||||
font-weight: 500;
|
||||
|
||||
&.f-light {
|
||||
color: var(--chart-text-color);
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
color: $table-row-color;
|
||||
}
|
||||
|
||||
[class*='bg-'] {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.bg-light {
|
||||
color: $theme-body-font-color;
|
||||
}
|
||||
|
||||
tfoot {
|
||||
font-weight: $table-footer-font-weight;
|
||||
}
|
||||
}
|
||||
|
||||
.table-dark {
|
||||
th {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.table-inverse {
|
||||
color: $white;
|
||||
background-color: $table-inverse-bg-color;
|
||||
|
||||
th,
|
||||
td {
|
||||
border-color: $white;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
&.table-bordered {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.table[class*='bg-'] {
|
||||
|
||||
th,
|
||||
td {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.table-hover {
|
||||
>tbody {
|
||||
>tr:hover {
|
||||
--bs-table-accent-bg: #f6f6f6;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
&:hover {
|
||||
background-color: rgba($primary-color, 0.1);
|
||||
}
|
||||
|
||||
vertical-align: middle;
|
||||
|
||||
td {
|
||||
svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
|
||||
[dir="rtl"] & {
|
||||
margin-right: unset;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Table border-bottom removes in particular typography page
|
||||
.typography-table {
|
||||
tr {
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
|
||||
td {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-double {
|
||||
border-left: 4px double #dee2e6;
|
||||
border-right: 4px double #dee2e6;
|
||||
|
||||
thead,
|
||||
tbody,
|
||||
tfoot,
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
border-style: double;
|
||||
border-width: 4px;
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.table-dotted {
|
||||
border-left: 2px dotted #dee2e6;
|
||||
border-right: 2px dotted #dee2e6;
|
||||
|
||||
thead,
|
||||
tbody,
|
||||
tfoot,
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
border-style: dotted !important;
|
||||
border-width: 2px;
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.table-dashed {
|
||||
border-left: 2px dashed #dee2e6;
|
||||
border-right: 2px dashed #dee2e6;
|
||||
|
||||
thead,
|
||||
tbody,
|
||||
tfoot,
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
border-style: dashed !important;
|
||||
border-width: 2px;
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
//Sizing class
|
||||
.table-xl {
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: $table-xl-padding;
|
||||
font-size: $table-xl-font;
|
||||
}
|
||||
}
|
||||
|
||||
.table-lg {
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: $table-lg-padding;
|
||||
font-size: $table-lg-font;
|
||||
}
|
||||
}
|
||||
|
||||
.table-de {
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: $table-de-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.table-sm {
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: $table-sm-padding;
|
||||
font-size: $table-sm-font;
|
||||
}
|
||||
}
|
||||
|
||||
.table-xs {
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: $table-xs-padding;
|
||||
font-size: $table-xs-font;
|
||||
}
|
||||
}
|
||||
|
||||
//Table Border
|
||||
.table-border-horizontal {
|
||||
|
||||
tr,
|
||||
th,
|
||||
td {
|
||||
border-top: 1px solid $horizontal-border-color;
|
||||
padding: $horizontal-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.table-border-vertical {
|
||||
|
||||
tr,
|
||||
th,
|
||||
td {
|
||||
border-top: 0;
|
||||
border-right: 1px solid $horizontal-border-color;
|
||||
}
|
||||
|
||||
tr {
|
||||
td {
|
||||
border-bottom: 0;
|
||||
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
th {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-bordernone {
|
||||
td {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
thead {
|
||||
th {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.u-s-tb {
|
||||
padding: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-striped {
|
||||
tbody {
|
||||
tr {
|
||||
&:nth-of-type(odd) {
|
||||
background-color: var(--light-background);
|
||||
--bs-table-accent-bg: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-bordered {
|
||||
|
||||
thead,
|
||||
tbody,
|
||||
tfoot,
|
||||
tr,
|
||||
td,
|
||||
th {
|
||||
border-color: rgba($light-text, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
39.Table CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,62 @@
|
||||
/**=====================
|
||||
20. Touchspin CSS Start
|
||||
==========================**/
|
||||
.bootstrap-touchspin {
|
||||
input{
|
||||
&.touchspin {
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
.input-group .btn{
|
||||
padding: 0.5rem 1.75rem;
|
||||
}
|
||||
.touchspin-vertical-tab {
|
||||
.input-group {
|
||||
.input-group-btn-vertical {
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
width: 1%;
|
||||
vertical-align: middle;
|
||||
display: table-cell;
|
||||
.bootstrap-touchspin-down {
|
||||
margin-top: -2px;
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 7px;
|
||||
font-size: 10px;
|
||||
font-weight: normal;
|
||||
}
|
||||
> .btn {
|
||||
display: block;
|
||||
float: none;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 9px;
|
||||
margin-left: -1px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.input-group{
|
||||
font-family: $font-rubik, $font-serif;
|
||||
.btn{
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
.dropdown-basic{
|
||||
.dropdown{
|
||||
.dropbtn{
|
||||
padding: 9px 30px;
|
||||
}
|
||||
.dropdown-content{
|
||||
z-index: 9999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
20. Touchspin CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,140 @@
|
||||
/**=====================
|
||||
54. Tour CSS Start
|
||||
==========================**/
|
||||
|
||||
.introjs-helperLayer {
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.introjs-tooltipReferenceLayer {
|
||||
background-color: transparent;
|
||||
}
|
||||
.introjs-helperNumberLayer {
|
||||
color: $white;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
|
||||
background: $danger-color;
|
||||
background: linear-gradient(to bottom, $tour-color 0%, $tour-color 100%);
|
||||
border: 3px solid $white;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
.introjs-arrow {
|
||||
border: 12px solid $white;
|
||||
&.top {
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: $tour-color;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
&.top-right {
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: $tour-color;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
&.top-middle {
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: $tour-color;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
&.right {
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: $tour-color;
|
||||
}
|
||||
&.right-bottom {
|
||||
border-top-color: transparent;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: $tour-color;
|
||||
}
|
||||
&.bottom {
|
||||
border-top-color: $tour-color;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
&.left {
|
||||
border-top-color: transparent;
|
||||
border-right-color: $tour-color;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
&.left-bottom {
|
||||
border-top-color: transparent;
|
||||
border-right-color: $tour-color;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
}
|
||||
}
|
||||
.introjs-tooltip {
|
||||
background-color: $tour-color;
|
||||
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
|
||||
color: $white;
|
||||
border-color: $tour-color;
|
||||
}
|
||||
.introjs-button {
|
||||
border: 1px solid $light-semi-gray;
|
||||
text-shadow: 1px 1px 0 $white;
|
||||
color: $theme-body-font-color !important;
|
||||
background-color: $white;
|
||||
background-image: linear-gradient($white, $white);
|
||||
&:hover {
|
||||
border-color: $light-semi-gray;
|
||||
}
|
||||
&:focus, &:active {
|
||||
background-image: linear-gradient($light-gray, $light-semi-gray);
|
||||
}
|
||||
}
|
||||
.introjs-skipbutton {
|
||||
color: $tour-color;
|
||||
}
|
||||
.introjs-prevbutton {
|
||||
&.introjs-fullbutton {
|
||||
border: 1px solid $light-semi-gray;
|
||||
}
|
||||
}
|
||||
.introjs-disabled {
|
||||
color: $tour-color;
|
||||
border-color: $light-semi-gray;
|
||||
&:hover, &:focus {
|
||||
color: $tour-color;
|
||||
border-color: $light-semi-gray;
|
||||
}
|
||||
}
|
||||
.introjs-bullets {
|
||||
ul {
|
||||
li {
|
||||
a {
|
||||
background: $light-gray;
|
||||
&:hover {
|
||||
background: $white;
|
||||
}
|
||||
&.active {
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.introjs-progress {
|
||||
background-color: $light-color;
|
||||
}
|
||||
.introjs-progressbar {
|
||||
background-color: $tour-color;
|
||||
}
|
||||
.introjs-hint:hover > .introjs-hint-pulse {
|
||||
border: 5px solid rgba(60, 60, 60, 0.57);
|
||||
}
|
||||
.introjs-hint-pulse {
|
||||
border: 5px solid rgba(60, 60, 60, 0.27);
|
||||
background-color: rgba(136, 136, 136, 0.24);
|
||||
}
|
||||
.introjs-hint-dot {
|
||||
border: 10px solid rgba(146, 146, 146, 0.36);
|
||||
}
|
||||
/**=====================
|
||||
54. Tour CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,32 @@
|
||||
/**=====================
|
||||
50. Tree CSS Start
|
||||
==========================**/
|
||||
.jstree-default{
|
||||
.jstree-clicked{
|
||||
background-color: lighten($primary-color , 42%);
|
||||
box-shadow: none;
|
||||
color: $dark-color;
|
||||
}
|
||||
}
|
||||
.vakata-context, .vakata-context ul{
|
||||
background-color: $white;
|
||||
border: none;
|
||||
box-shadow: 0 0 2px 2px $light-semi-gray;
|
||||
li{
|
||||
a{
|
||||
.vakata-contextmenu-sep{
|
||||
display: none;
|
||||
}
|
||||
&:hover{
|
||||
background-color: lighten($primary-color , 45%);
|
||||
box-shadow: None;
|
||||
}
|
||||
}
|
||||
}
|
||||
.vakata-context-separator{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
50. Tree CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,213 @@
|
||||
/**=====================
|
||||
typahead-search CSS Start
|
||||
==========================**/
|
||||
.Typeahead {
|
||||
width: 100%;
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
|
||||
&:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.tt-hint {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.u-cf {
|
||||
&:before {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.u-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.u-posRelative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.Typeahead-spinner {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 18px;
|
||||
display: none;
|
||||
color: #c5c5c5;
|
||||
}
|
||||
|
||||
.ProfileCard-avatar {
|
||||
svg {
|
||||
height: 18px;
|
||||
vertical-align: bottom;
|
||||
|
||||
path {
|
||||
color: #7e7c7c !important;
|
||||
}
|
||||
|
||||
polygon {
|
||||
color: #7e7c7c !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Typeahead-hint {
|
||||
width: 100%;
|
||||
padding: 5px 8px;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
border: 1px solid #024e6a;
|
||||
-webkit-border-radius: 8px;
|
||||
-moz-border-radius: 8px;
|
||||
border-radius: 8px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: #ccd6dd;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.Typeahead-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
padding: 15px;
|
||||
z-index: 100;
|
||||
display: none;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
background-color: $white;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.Typeahead-menu.is-open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.Typeahead-selectable {
|
||||
cursor: pointer;
|
||||
|
||||
+ {
|
||||
.Typeahead-selectable {
|
||||
border-top: 1px solid #ccd6dd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ProfileCard {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
border: 1px solid $gray-60 !important;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 10px;
|
||||
|
||||
&:hover {
|
||||
.ProfileCard-avatar {
|
||||
border-color: #f5f8fa;
|
||||
}
|
||||
|
||||
color: #414345;
|
||||
background: #f8f8f8;
|
||||
|
||||
.ProfileCard-screenName {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.ProfileCard-stat-label {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ProfileCard-avatar {
|
||||
position: absolute;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.ProfileCard-details {
|
||||
padding-left: 35px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ProfileCard-realName {
|
||||
display: inline-block;
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.ProfileCard-screenName {
|
||||
display: inline-block;
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.ProfileCard-description {
|
||||
margin-top: 5px;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.ProfileCard-stats {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.ProfileCard-stat {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
|
||||
+ {
|
||||
.ProfileCard-stat {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ProfileCard-stat-label {
|
||||
color: $dark-gray;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ProfileCard.is-active {
|
||||
color: $white;
|
||||
background: var(--theme-deafult);
|
||||
|
||||
.ProfileCard-screenName {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.ProfileCard-stat-label {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
.EmptyMessage {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.Typeahead-spinner {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
/**=====================
|
||||
typahead-search CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,964 @@
|
||||
/**=====================
|
||||
63. Box-layout CSS start
|
||||
==========================**/
|
||||
|
||||
.box-layout {
|
||||
background-image: url(../images/other-images/boxbg.jpg);
|
||||
background-blend-mode: overlay;
|
||||
background-color: rgba($white, 0.5);
|
||||
|
||||
@media only screen and (min-width: 1280px) {
|
||||
.learning-filter {
|
||||
order: -1;
|
||||
}
|
||||
.md-sidebar {
|
||||
.md-sidebar-toggle {
|
||||
display: block;
|
||||
}
|
||||
.md-sidebar-aside {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
z-index: 3;
|
||||
width: 280px;
|
||||
&.open {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
.job-sidebar {
|
||||
background-color: var(--white);
|
||||
padding: 20px;
|
||||
}
|
||||
.widget-1 {
|
||||
&.mb-xl-0 {
|
||||
margin-bottom: 25px !important;
|
||||
}
|
||||
}
|
||||
.radial-progress-card {
|
||||
.radial-chart-wrap {
|
||||
margin-right: -10px;
|
||||
}
|
||||
}
|
||||
.currency-widget {
|
||||
div[class*=bg-light-] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.box-order {
|
||||
.order-1 {
|
||||
order: 1 !important;
|
||||
}
|
||||
}
|
||||
.activity-card {
|
||||
.appointment-table {
|
||||
&.customer-table {
|
||||
height: 187px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.transaction-table {
|
||||
tr {
|
||||
td {
|
||||
&:first-child {
|
||||
min-width: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.welcome-card {
|
||||
.welcome-img {
|
||||
height: 170px;
|
||||
bottom: -22px;
|
||||
}
|
||||
}
|
||||
.purchase-card {
|
||||
img {
|
||||
margin: -210px auto 0;
|
||||
width: 80%;
|
||||
}
|
||||
&.discover {
|
||||
margin-top: 90px;
|
||||
img {
|
||||
margin-top: -90px;
|
||||
width: 64%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.apache-cotainer-large,
|
||||
#line-visual,
|
||||
#line-visulH {
|
||||
|
||||
>div,
|
||||
canvas {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.page-wrapper,
|
||||
&.page-wrapper {
|
||||
&.box-layout {
|
||||
padding-top: 40px;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
&.compact-wrapper {
|
||||
margin-top: $box-layout-space;
|
||||
|
||||
.page-body-wrapper {
|
||||
.sidebar-wrapper {
|
||||
width: 230px;
|
||||
top: $box-layout-space;
|
||||
border-radius: 10px 0 0 10px;
|
||||
|
||||
&.close_icon {
|
||||
~footer {
|
||||
width: 1200px;
|
||||
left: 47%;
|
||||
}
|
||||
|
||||
~.footer-fix {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.sidebar-main {
|
||||
.sidebar-links {
|
||||
height: calc(100vh - 196px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo-wrapper {
|
||||
box-shadow: 0 8px 6px -6px rgba(89, 102, 122, 0.1);
|
||||
}
|
||||
|
||||
.sidebar-main {
|
||||
.sidebar-links {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
height: calc(100vh - 191px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-body {
|
||||
min-height: calc(100vh - 130px);
|
||||
margin-top: 0;
|
||||
top: 80px;
|
||||
overflow: scroll;
|
||||
max-height: calc(100vh - 220px);
|
||||
padding-bottom: 80px;
|
||||
margin-left: 230px;
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 6px $light-gray;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(68, 102, 242, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.compact-sidebar {
|
||||
.page-header {
|
||||
padding-left: 148px;
|
||||
}
|
||||
|
||||
.page-body-wrapper {
|
||||
margin-top: 40px;
|
||||
|
||||
div.sidebar-wrapper {
|
||||
top: 40px;
|
||||
|
||||
&.close_icon {
|
||||
display: none;
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.sidebar-main {
|
||||
.sidebar-links {
|
||||
height: calc(100vh - 166px);
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
|
||||
.sidebar-submenu,
|
||||
.mega-menu-container {
|
||||
left: 470px;
|
||||
top: 40px;
|
||||
height: calc(100vh - 84px);
|
||||
}
|
||||
|
||||
a {
|
||||
&.active {
|
||||
|
||||
~.sidebar-submenu,
|
||||
~.mega-menu-container {
|
||||
animation: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.page-body {
|
||||
min-height: calc(100vh - 90px);
|
||||
margin-top: 0;
|
||||
top: 80px;
|
||||
overflow: scroll;
|
||||
max-height: calc(100vh - 170px);
|
||||
padding-bottom: 80px;
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 6px $light-gray;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(68, 102, 242, 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.compact-small {
|
||||
.page-header {
|
||||
padding-left: 90px;
|
||||
|
||||
&.close_icon {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.page-body-wrapper {
|
||||
div.sidebar-wrapper {
|
||||
.sidebar-main {
|
||||
.sidebar-links {
|
||||
li {
|
||||
|
||||
.sidebar-submenu,
|
||||
.mega-menu-container {
|
||||
left: 410px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.horizontal-wrapper {
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page-body-wrapper {
|
||||
margin-top: 40px;
|
||||
|
||||
.page-body {
|
||||
margin-top: 80px;
|
||||
min-height: calc(100vh - 310px);
|
||||
max-height: calc(100vh - 230px);
|
||||
overflow: scroll;
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 6px $light-gray;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(68, 102, 242, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
.sidebar-wrapper {
|
||||
width: 1280px;
|
||||
top: 80px;
|
||||
margin: 0;
|
||||
overflow-x: unset;
|
||||
position: relative;
|
||||
|
||||
.sidebar-main {
|
||||
#sidebar-menu {
|
||||
left: 0%;
|
||||
transform: translate(0, 0);
|
||||
top: 125px;
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.modern-type {
|
||||
.page-header {
|
||||
padding-left: 0px;
|
||||
|
||||
.header-wrapper {
|
||||
.left-header {
|
||||
width: 36%;
|
||||
}
|
||||
.nav-right {
|
||||
width: 46%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-body-wrapper {
|
||||
.page-body {
|
||||
margin-left: 260px;
|
||||
}
|
||||
|
||||
.sidebar-wrapper {
|
||||
top: 120px;
|
||||
|
||||
.sidebar-main {
|
||||
.sidebar-links {
|
||||
height: calc(100vh - 311px);
|
||||
}
|
||||
}
|
||||
|
||||
&.close_icon {
|
||||
.sidebar-main {
|
||||
.sidebar-links {
|
||||
height: calc(100vh - 316px);
|
||||
}
|
||||
}
|
||||
|
||||
~footer {
|
||||
width: 1280px;
|
||||
left: 50%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-header {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transition: $sidebar-transition;
|
||||
padding-left: 230px;
|
||||
margin-top: $box-layout-space;
|
||||
border-radius: 10px;
|
||||
width: unset;
|
||||
|
||||
&.close_icon {
|
||||
padding-left: 0;
|
||||
margin-left: auto;
|
||||
width: calc(100% - 0px);
|
||||
transition: $sidebar-transition;
|
||||
}
|
||||
|
||||
.header-wrapper {
|
||||
border: 1px solid #f8f8f8;
|
||||
border-radius: 10px 10px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.horizontal-wrapper {
|
||||
.page-header {
|
||||
.header-wrapper {
|
||||
.nav-right, .left-header {
|
||||
width: 36%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.material-type {
|
||||
.page-body-wrapper {
|
||||
margin-top: 0;
|
||||
|
||||
.page-body {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.sidebar-wrapper {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.material-icon {
|
||||
.page-header {
|
||||
&.close_icon {
|
||||
margin-top: 40px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.page-body-wrapper {
|
||||
margin-top: 0;
|
||||
|
||||
.page-body {
|
||||
top: 0;
|
||||
min-height: calc(100vh - 170px);
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.advance-layout {
|
||||
.page-header {
|
||||
box-shadow: 0px 0px 10px rgba($black, 0.07);
|
||||
}
|
||||
|
||||
.page-body-wrapper {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.page-body-wrapper {
|
||||
width: 1280px;
|
||||
box-shadow: 4px 11px 25px rgba(0, 0, 0, 0.07);
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
|
||||
.todo {
|
||||
.todo-list-wrapper {
|
||||
#todo-list {
|
||||
li {
|
||||
.task-responsive {
|
||||
min-width: 1087px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active-order-table {
|
||||
max-width: 443px;
|
||||
overflow: auto;
|
||||
|
||||
table {
|
||||
tbody {
|
||||
tr {
|
||||
td {
|
||||
p {
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activity {
|
||||
.media {
|
||||
.gradient-round {
|
||||
&.gradient-line-1 {
|
||||
&:after {
|
||||
height: 57px;
|
||||
bottom: -64px;
|
||||
}
|
||||
}
|
||||
|
||||
&.small-line {
|
||||
&:after {
|
||||
height: 36px;
|
||||
bottom: -43px;
|
||||
}
|
||||
}
|
||||
|
||||
&.medium-line {
|
||||
&:after {
|
||||
height: 40px;
|
||||
bottom: -48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding-left: 230px;
|
||||
margin-bottom: 40px !important;
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
border-radius: 0 0 10px;
|
||||
}
|
||||
|
||||
.blockquote-footer {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-fix {
|
||||
padding-left: 230px;
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
.chat-history {
|
||||
.call-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 300px;
|
||||
|
||||
>div {
|
||||
z-index: 8;
|
||||
background-color: rgba(255, 255, 255, 0.75);
|
||||
background-blend-mode: overlay;
|
||||
width: 100%;
|
||||
padding: 30px;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 40%;
|
||||
font-size: 14px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.call-icons {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
ul {
|
||||
li {
|
||||
border: 1px solid #717171;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.receiver-img {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
img {
|
||||
width: 38%;
|
||||
}
|
||||
}
|
||||
|
||||
.total-time {
|
||||
h2 {
|
||||
font-size: 28px;
|
||||
color: #717171;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
canvas {
|
||||
&#myLineCharts {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-right-aside {
|
||||
flex: 0 0 60%;
|
||||
max-width: 60%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.caller-img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
left: 15px;
|
||||
|
||||
img {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.browser-widget {
|
||||
img {
|
||||
height: 65px;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-card {
|
||||
.card-header {
|
||||
img {
|
||||
margin-top: -73px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-profile {
|
||||
img {
|
||||
height: 130px;
|
||||
top: -17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2 {
|
||||
width: 901.781px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
ul {
|
||||
&.close_icon {
|
||||
>li {
|
||||
label {
|
||||
padding: 0;
|
||||
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bookmark {
|
||||
ul {
|
||||
margin-right: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
#batchDelete {
|
||||
.jsgrid-grid-header {
|
||||
.jsgrid-table {
|
||||
tr {
|
||||
th {
|
||||
.btn {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group-showcase {
|
||||
.btn-radio {
|
||||
.btn-group {
|
||||
.radio {
|
||||
input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media.bitcoin-graph {
|
||||
display: block;
|
||||
|
||||
.top-bitcoin {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.media-body {
|
||||
margin-top: 30px;
|
||||
|
||||
.bitcoin-content {
|
||||
.bitcoin-numbers {
|
||||
h6 {
|
||||
font-size: 14PX;
|
||||
}
|
||||
}
|
||||
|
||||
&.text-right {
|
||||
text-align: center !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
&.inverse {
|
||||
p {
|
||||
max-width: 238px;
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auth-bg-effect {
|
||||
.second-effect {
|
||||
left: 55%;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-bg-video {
|
||||
video {
|
||||
min-width: 67%;
|
||||
width: 67%;
|
||||
}
|
||||
}
|
||||
|
||||
.page-builder {
|
||||
.ge-canvas.ge-layout-desktop {
|
||||
margin-top: $box-layout-space;
|
||||
}
|
||||
|
||||
.ge-addRowGroup {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-wrapper-card {
|
||||
padding: 50px 20px;
|
||||
}
|
||||
|
||||
.card {
|
||||
.blog-box {
|
||||
&.blog-grid {
|
||||
&.set-min-height {
|
||||
min-height: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flot-chart-placeholder {
|
||||
&#donut-color-chart-morris-daily {
|
||||
min-height: 430px;
|
||||
}
|
||||
}
|
||||
|
||||
.flot-chart-placeholder {
|
||||
&#donut-color-chart-morris {
|
||||
min-height: 430px;
|
||||
}
|
||||
}
|
||||
|
||||
.box-col-12 {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.box-col-6 {
|
||||
flex: 0 0 50%;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.box-col-3 {
|
||||
flex: 0 0 25%;
|
||||
max-width: 25%;
|
||||
}
|
||||
|
||||
.box-col-7 {
|
||||
flex: 0 0 60%;
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
.box-col-5 {
|
||||
flex: 0 0 40%;
|
||||
max-width: 40%;
|
||||
}
|
||||
|
||||
.box-col-8 {
|
||||
flex: 0 0 70%;
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
.box-col-4e {
|
||||
flex: 0 0 30%;
|
||||
max-width: 30%;
|
||||
}
|
||||
|
||||
|
||||
.box-col-4 {
|
||||
flex: 0 0 33.33%;
|
||||
max-width: 33%;
|
||||
}
|
||||
|
||||
.box-col-8e {
|
||||
flex: 0 0 66.67%;
|
||||
max-width: 66.67%;
|
||||
}
|
||||
|
||||
.box-col-none {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
.chat-right-aside {
|
||||
.chat {
|
||||
.chat-header {
|
||||
.chat-menu-icons {
|
||||
li {
|
||||
a {
|
||||
i {
|
||||
font-size: 19px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
flex: 0 0 100%;
|
||||
max-width: calc(100% - 15px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.toogle-bar {
|
||||
display: inline-block;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-menu {
|
||||
right: 0;
|
||||
border-top: 1px solid #ddd;
|
||||
opacity: 0;
|
||||
transform: translateY(-30px);
|
||||
visibility: hidden;
|
||||
top: 81px;
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
background-color: #fff;
|
||||
transition: all linear 0.3s;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0px);
|
||||
transition: all linear 0.3s;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.ct-10.total-chart {
|
||||
.ct-chart-bar {
|
||||
.ct-series {
|
||||
.ct-bar {
|
||||
stroke-width: 23px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social-app-profile {
|
||||
#friends {
|
||||
.box-col-4 {
|
||||
flex: 0 0 30%;
|
||||
max-width: 30%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.email-wrap {
|
||||
.email-body {
|
||||
.email-compose {
|
||||
.cke_contents {
|
||||
&.cke_reset {
|
||||
max-height: 165px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
.col-xl-6 {
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.col-xl-3 {
|
||||
+.col-xl-3 {
|
||||
padding-right: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.email-right-aside {
|
||||
.email-body {
|
||||
.inbox {
|
||||
height: 644px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.email-content {
|
||||
.email-top {
|
||||
.user-emailid {
|
||||
&:after {
|
||||
right: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.todo {
|
||||
.notification-popup {
|
||||
right: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
.touchspin {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.vertical-menu-main {
|
||||
width: 1280px;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.mega-menu {
|
||||
width: 1050px !important;
|
||||
max-width: 1050px !important;
|
||||
left: -320px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.comingsoon {
|
||||
video {
|
||||
min-width: 67%;
|
||||
width: 67%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
63. Box-layout CSS ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,25 @@
|
||||
/**=====================
|
||||
47. Footer CSS Start
|
||||
==========================**/
|
||||
.footer{
|
||||
background-color: $footer_bg_color;
|
||||
box-shadow: $footer_box_shadow;
|
||||
padding: 15px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin-left: $sidebar-compact-width;
|
||||
transition: 0.5s;
|
||||
&.footer-dark{
|
||||
background-color: $footer_dark_color;
|
||||
p{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-fix{
|
||||
width: calc(100% - $sidebar-compact-width);
|
||||
position: fixed;
|
||||
}
|
||||
/**=====================
|
||||
47. Footer CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,35 @@
|
||||
/**=====================
|
||||
GRID CSS Start
|
||||
==========================**/
|
||||
.grid-showcase {
|
||||
margin-bottom: -10px;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
background-color: rgba(242, 243, 247, 0.7);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.grid-align {
|
||||
margin-bottom: -16px;
|
||||
|
||||
.row {
|
||||
padding: 15px 0;
|
||||
min-height: 7rem;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-vertical {
|
||||
min-height: 150px;
|
||||
padding: 10px;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
/**=====================
|
||||
GRID CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,185 @@
|
||||
/*======= Page Header css Start ======= */
|
||||
.left-header {
|
||||
.d-flex {
|
||||
align-items: center;
|
||||
}
|
||||
h6 {
|
||||
line-height: 1.6;
|
||||
@media (max-width: 1199px) {
|
||||
width: 160px;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
width: 120px;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
width: 66px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 755px) {
|
||||
display: none;
|
||||
}
|
||||
img {
|
||||
margin-top: -12px;
|
||||
height: 26px;
|
||||
}
|
||||
i {
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
}
|
||||
/*======= Page Header css ends ======= */
|
||||
|
||||
|
||||
/**======Main Header css Start ======**/
|
||||
.offcanvas,
|
||||
.offcanvas-bookmark {
|
||||
.page-wrapper {
|
||||
.page-body-wrapper {
|
||||
.page-body {
|
||||
position: relative;
|
||||
filter: blur(5px) grayscale(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.offcanvas {
|
||||
position: unset;
|
||||
visibility: visible;
|
||||
background: unset;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.toggle-sidebar {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 30px;
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
width: $header-wrapper-nav-icon-size;
|
||||
height: $header-wrapper-nav-icon-size;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
background-color: rgba($primary-color, 0.1);
|
||||
border-radius: 100%;
|
||||
left: -11px;
|
||||
z-index: -2;
|
||||
top: -8px;
|
||||
transform: scale(0);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:before {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
transform: scale(1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
>svg {
|
||||
color: var(--theme-deafult) !important;
|
||||
stroke: var(--theme-deafult) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onhover-dropdown {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
.onhover-show-div {
|
||||
@extend %for-animated-hover-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onhover-show-div {
|
||||
top: 80px;
|
||||
position: absolute;
|
||||
z-index: 8;
|
||||
background-color: $white;
|
||||
transition: all linear 0.3s;
|
||||
@extend %for-animated-hover;
|
||||
|
||||
li {
|
||||
a {
|
||||
svg {
|
||||
margin-top: 0 !important;
|
||||
|
||||
path,
|
||||
line {
|
||||
color: $theme-body-font-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**======Main Header css Ends ======**/
|
||||
|
||||
/*=======Mega menu css start=======*/
|
||||
.mega-menu {
|
||||
.default-according {
|
||||
.card {
|
||||
.btn-link {
|
||||
font-weight: 500;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.onhover-show-div {
|
||||
width: 1500px;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
div {
|
||||
>div {
|
||||
a {
|
||||
margin-bottom: 0px;
|
||||
display: inline-block;
|
||||
color: $theme-body-sub-title-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-unstyled {
|
||||
div {
|
||||
a {
|
||||
padding: 8px 35px 8px 0;
|
||||
transition: $sidebar-transition;
|
||||
|
||||
&:hover {
|
||||
padding: 8px 35px 8px 10px;
|
||||
transition: $sidebar-transition;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*=======Mega menu css end=======*/
|
||||
|
||||
/**=====================
|
||||
05. Header CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,76 @@
|
||||
/**=====================
|
||||
36. NAV CSS Start
|
||||
==========================**/
|
||||
#accordionoc{
|
||||
#collapseicon, #collapseicon1{
|
||||
padding-top: 0px;
|
||||
}
|
||||
li{
|
||||
button{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.navs-icon.default-according.style-1 {
|
||||
li{
|
||||
button{
|
||||
position: relative;
|
||||
&:hover
|
||||
{
|
||||
color: var(--theme-deafult)!important;
|
||||
}
|
||||
}
|
||||
button[aria-expanded="true"]{
|
||||
&:before {
|
||||
right: 2px;
|
||||
top:6px;
|
||||
}
|
||||
}
|
||||
button[aria-expanded="false"]:before {
|
||||
right: 2px;
|
||||
top:6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.navs-icon {
|
||||
padding: 30px;
|
||||
li {
|
||||
padding: 9px 0;
|
||||
a {
|
||||
color: $theme-body-font-color;
|
||||
&:hover {
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
ul {
|
||||
padding-top: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.onhover-dropdown{
|
||||
&.navs-dropdown{
|
||||
&:hover{
|
||||
.onhover-show-div{
|
||||
&:before,&:after{
|
||||
right: 77px;
|
||||
left: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-lists{
|
||||
font-family: $font-rubik, $font-serif;
|
||||
}
|
||||
.pl-navs-inline{
|
||||
padding-left: 30px!important;
|
||||
}
|
||||
.inline-nav{
|
||||
li{
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
36. NAV CSS Ends
|
||||
==========================**/
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,163 @@
|
||||
/**=====================
|
||||
51. Search CSS Start
|
||||
==========================**/
|
||||
.search-page {
|
||||
.theme-form {
|
||||
input {
|
||||
border: 1px solid var(--theme-deafult);
|
||||
padding-left: 20px;
|
||||
border-radius: 10px 0 0 10px;
|
||||
flex: 1 1 auto;
|
||||
&::placeholder {
|
||||
color: $primary-color;
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
.input-group {
|
||||
.btn {
|
||||
line-height: 32px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.form-control-plaintext {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h6 {
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.border-tab {
|
||||
&.nav-tabs {
|
||||
.material-border {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
font-size: 15px;
|
||||
padding: 10px 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media {
|
||||
.media-body {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.info-block {
|
||||
padding: 30px;
|
||||
border-radius: 15px;
|
||||
border: 1px solid $light-color;
|
||||
|
||||
a {
|
||||
color: #656565;
|
||||
margin-bottom: 3px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
+.info-block {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.border-tab.nav-tabs {
|
||||
align-items: left;
|
||||
justify-content: end;
|
||||
|
||||
.nav-item {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.search-links {
|
||||
h6 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
text-transform: lowercase;
|
||||
margin-bottom: 0;
|
||||
color: #a5a2a2;
|
||||
}
|
||||
|
||||
ul.search-info {
|
||||
li {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
color: #586082;
|
||||
|
||||
+li {
|
||||
border-left: 1px solid lighten($dark-color, 50%);
|
||||
padding-left: 8px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
i {
|
||||
color: $warning-color;
|
||||
&:not(:last-child) {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#video-links {
|
||||
.embed-responsive+.embed-responsive {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-list {
|
||||
margin-bottom: 30px;
|
||||
width: auto;
|
||||
display: inline-flex;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
border: 1px solid $primary-color;
|
||||
border: none;
|
||||
|
||||
.nav-item {
|
||||
background-color: rgba($primary-color, 0.1);
|
||||
|
||||
.nav-link {
|
||||
border: none;
|
||||
padding: 0.7rem 1.5rem;
|
||||
opacity: 0.5;
|
||||
|
||||
&.active {
|
||||
background-color: rgba($primary-color, 0.1);
|
||||
color: var(--theme-deafult);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.show,
|
||||
&.active {
|
||||
background-color: rgba($primary-color, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
51. Search CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,234 @@
|
||||
/**=====================
|
||||
21. Select 2 CSS Start
|
||||
==========================**/
|
||||
.select2 {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.add-post {
|
||||
#cke_text-box {
|
||||
border: 1px solid $light-semi-gray;
|
||||
}
|
||||
|
||||
form {
|
||||
.m-checkbox-inline {
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border: 1px solid $light-semi-gray;
|
||||
}
|
||||
|
||||
.col-form-label {
|
||||
padding-bottom: 0;
|
||||
padding-top: 0;
|
||||
|
||||
.select2-container--default {
|
||||
margin-top: 10px;
|
||||
max-width: 100%;
|
||||
|
||||
.selection {
|
||||
.select2-selection {
|
||||
.select2-search__field {
|
||||
padding: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-selection--multiple {
|
||||
border: 1px solid $light-semi-gray;
|
||||
max-width: 100%;
|
||||
|
||||
.select2-selection__rendered {
|
||||
li {
|
||||
margin-top: 6px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropzone {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container--open {
|
||||
.select2-dropdown {
|
||||
z-index: 7;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.select2-drpdwn {
|
||||
.select2-selection {
|
||||
border-radius: 0 !important;
|
||||
border-color: $light-color !important;
|
||||
height: 40px !important;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.form-control-primary {
|
||||
border-color: var(--theme-deafult);
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
|
||||
.form-control-secondary {
|
||||
border-color: var(--theme-secondary);
|
||||
color: var(--theme-secondary);
|
||||
}
|
||||
|
||||
.form-control-success {
|
||||
border-color: $success-color;
|
||||
color: $success-color;
|
||||
}
|
||||
|
||||
.form-control-info {
|
||||
border-color: $info-color;
|
||||
color: $info-color;
|
||||
}
|
||||
|
||||
.form-control-warning {
|
||||
border-color: $warning-color;
|
||||
color: $warning-color;
|
||||
}
|
||||
|
||||
.form-control-danger {
|
||||
border-color: $danger-color;
|
||||
color: $danger-color;
|
||||
}
|
||||
|
||||
.form-control-inverse {
|
||||
border-color: $dark-color;
|
||||
color: $dark-color;
|
||||
}
|
||||
|
||||
.form-control-primary-fill {
|
||||
background-color: var(--theme-deafult);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.form-control-secondary-fill {
|
||||
background-color: var(--theme-secondary);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.form-control-success-fill {
|
||||
background-color: $success-color;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.form-control-info-fill {
|
||||
background-color: $info-color;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.form-control-warning-fill {
|
||||
background-color: $warning-color;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.form-control-danger-fill {
|
||||
background-color: $danger-color;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.form-control-inverse-fill {
|
||||
background-color: $dark-color;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
//colors
|
||||
$color_bon_jour_approx: #e0e0e0;
|
||||
$color_cape_cod_approx: #424242;
|
||||
|
||||
.selection {
|
||||
.select2-selection {
|
||||
border-radius: 5px !important;
|
||||
|
||||
.select2-search__field {
|
||||
margin-top: 0;
|
||||
padding: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container--classic {
|
||||
.select2-selection--multiple {
|
||||
.select2-selection__choice {
|
||||
padding: 2px 6px !important;
|
||||
margin-top: 0 !important;
|
||||
background-color: var(--theme-deafult) !important;
|
||||
border-color: var(--theme-deafult) !important;
|
||||
color: $white;
|
||||
margin-right: 8px !important;
|
||||
}
|
||||
|
||||
.select2-selection__choice__remove {
|
||||
color: $white !important;
|
||||
float: right;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-results__option--highlighted[aria-selected] {
|
||||
background-color: $color_bon_jour_approx !important;
|
||||
color: $color_cape_cod_approx !important;
|
||||
}
|
||||
|
||||
.select2-results__options .select2-results__option[aria-selected=true] {
|
||||
background-color: var(--theme-deafult) !important;
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container--default {
|
||||
.select2-selection--single {
|
||||
.select2-selection__arrow {
|
||||
top: 11px !important;
|
||||
right: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-selection--multiple {
|
||||
.select2-selection__choice {
|
||||
padding: 2px 6px !important;
|
||||
margin-top: 0 !important;
|
||||
background-color: var(--theme-deafult) !important;
|
||||
border-color: var(--theme-deafult) !important;
|
||||
color: $white;
|
||||
margin-right: 8px !important;
|
||||
}
|
||||
|
||||
.select2-selection__choice__remove {
|
||||
color: $white !important;
|
||||
float: right;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-results__option--highlighted[aria-selected] {
|
||||
background-color: $color_bon_jour_approx !important;
|
||||
color: $color_cape_cod_approx !important;
|
||||
}
|
||||
|
||||
.select2-results__options .select2-results__option[aria-selected=true] {
|
||||
background-color: var(--theme-deafult) !important;
|
||||
color: $white !important;
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
21. Select 2 CSS Ends
|
||||
==========================**/
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,264 @@
|
||||
/**=====================
|
||||
46. Blog CSS start
|
||||
==========================**/
|
||||
.blog-box{
|
||||
img{
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.top-radius-blog{
|
||||
border-bottom-left-radius:0;
|
||||
border-bottom-right-radius:0;
|
||||
}
|
||||
h6{
|
||||
font-weight: 600;
|
||||
margin: 15px 0;
|
||||
}
|
||||
.blog-details{
|
||||
padding-right: 20px;
|
||||
.blog-social{
|
||||
margin-top: 30px;
|
||||
li{
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: $theme-body-sub-title-color;
|
||||
+li{
|
||||
padding-left: 20px;
|
||||
line-height: 1;
|
||||
padding-right: 0;
|
||||
}
|
||||
i{
|
||||
padding-right: 5px;
|
||||
font-weight: 300;
|
||||
}
|
||||
&:first-child{
|
||||
border-right: 1px solid gray;
|
||||
padding-right:20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.blog-details-main{
|
||||
hr{
|
||||
background-color: $gray-60;
|
||||
}
|
||||
.blog-social{
|
||||
margin:20px 0;
|
||||
li{
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: $theme-body-sub-title-color;
|
||||
padding: 0 24px;
|
||||
border-right: 1px dotted;
|
||||
@media (max-width: 1676px) {
|
||||
padding: 0 10px;
|
||||
}
|
||||
&:last-child{
|
||||
border-right: 0;
|
||||
}
|
||||
i{
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.blog-bottom-details{
|
||||
margin: 20px;
|
||||
font-size: 14px;
|
||||
line-height: 1.714;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.blog-date{
|
||||
color: $theme-body-sub-title-color;
|
||||
span{
|
||||
font-size: 36px;
|
||||
font-weight: 500;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.blog-box.blog-shadow{
|
||||
&:before{
|
||||
box-shadow: inset 0px -200px 100px -13px rgba(0, 0, 0, 0.6);
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 5px;
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
&:hover{
|
||||
&:before{
|
||||
box-shadow: inset 0px -200px 100px -13px rgba(0, 0, 0, 0.65);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.blog-details{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
h4{
|
||||
color: $white;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
p{
|
||||
font-size: 14px;
|
||||
color: $white;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.blog-social{
|
||||
li{
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.blog-list{
|
||||
.blog-details{
|
||||
.blog-social{
|
||||
margin-top: 0;
|
||||
}
|
||||
h6{
|
||||
margin-top: 0;
|
||||
color: gray;
|
||||
font-weight: 500;
|
||||
}
|
||||
hr{
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
img{
|
||||
padding: 17px;
|
||||
}
|
||||
}
|
||||
.blog-grid{
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
.blog-details{
|
||||
padding: 20px;
|
||||
h6{
|
||||
font-size: 14px;
|
||||
margin-bottom: 0;
|
||||
line-height: 1.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog-box{
|
||||
position: relative;
|
||||
max-height: 100%;
|
||||
align-items: center;
|
||||
.blog-details{
|
||||
h6 {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
p{
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
letter-spacing: 0.7px;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 0;
|
||||
color: $theme-body-sub-title-color;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 3;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
@media (max-width: 1570px) {
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
}
|
||||
h4{
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
margin-top:20px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.single-blog-content-top{
|
||||
margin-top:20px;
|
||||
border-top:1px solid $light-semi-gray;
|
||||
}
|
||||
.blog-social,.comment-social{
|
||||
li{
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.comment-box{
|
||||
padding-top: 50px ;
|
||||
padding-bottom: 50px ;
|
||||
hr{
|
||||
margin-top: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
li{
|
||||
margin-bottom: 30px;
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
ul{
|
||||
margin-left: 135px;
|
||||
}
|
||||
}
|
||||
p{
|
||||
font-size: 14px;
|
||||
line-height: 2;
|
||||
color: $theme-body-sub-title-color;
|
||||
text-align: justify;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
h4{
|
||||
font-weight: 600;
|
||||
}
|
||||
.media{
|
||||
img{
|
||||
margin-right:30px;
|
||||
border-radius: 10px;
|
||||
height: 90px;
|
||||
padding: 7px;
|
||||
width: 90px;
|
||||
border: 1px solid $light-semi-gray;
|
||||
}
|
||||
h6{
|
||||
font-weight: 500;
|
||||
margin-bottom: 5px;
|
||||
span{
|
||||
padding-left: 10px;
|
||||
font-size: 13px;
|
||||
color: $theme-body-sub-title-color;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
.comment-social{
|
||||
li{
|
||||
display: inline-block;
|
||||
color: $gray-60;
|
||||
padding-left: 20px;
|
||||
margin-bottom: 0;
|
||||
text-transform: uppercase;
|
||||
&:first-child{
|
||||
border-right:1px solid $light-semi-gray;
|
||||
padding-right: 20px;
|
||||
}
|
||||
i{
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
46. Blog CSS ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,530 @@
|
||||
/**=====================
|
||||
85. bookmark app CSS Start
|
||||
==========================**/
|
||||
.modal-bookmark {
|
||||
|
||||
.modal-body,
|
||||
.modal-header {
|
||||
padding: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.bookmark-wrap {
|
||||
.details-bookmark {
|
||||
.row {
|
||||
>div {
|
||||
+div {
|
||||
padding-right: 15px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.left-bookmark {
|
||||
height: 700px;
|
||||
|
||||
ul {
|
||||
li {
|
||||
button {
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
>.main-title {
|
||||
color: var(--theme-deafult);
|
||||
font-weight: 500;
|
||||
margin-bottom: 5px;
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
|
||||
span {
|
||||
a {
|
||||
&:hover {
|
||||
background-color: $transparent-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
color: $dark-gray;
|
||||
stroke-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
>.title {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.todo-wrap {
|
||||
.left-bookmark {
|
||||
height: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-bookmark {
|
||||
a {
|
||||
text-transform: capitalize !important;
|
||||
color: var(--theme-deafult) !important;
|
||||
line-height: 1 !important;
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
background-color: $transparent-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
&#index_var {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
input,
|
||||
select {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.select2-container {
|
||||
.select2-selection--single {
|
||||
border-color: #ced4da;
|
||||
}
|
||||
}
|
||||
|
||||
.select2 {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.error {
|
||||
margin: 0 !important;
|
||||
font-size: 11px;
|
||||
color: red !important;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes displayTransition {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.bookmark-tabcontent {
|
||||
.details-bookmark {
|
||||
height: auto;
|
||||
min-height: 359px;
|
||||
|
||||
.bookmark-card {
|
||||
position: relative;
|
||||
|
||||
&.card {
|
||||
.favourite-icon {
|
||||
padding: 3px;
|
||||
border-radius: 4px;
|
||||
background-color: rgba($black, 0.2);
|
||||
width: 30px;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
opacity: 0;
|
||||
|
||||
i {
|
||||
color: $white;
|
||||
font-size: 16px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
&.favourite {
|
||||
i {
|
||||
color: #fed112;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.desciption-data {
|
||||
width: 100%;
|
||||
|
||||
.content-general {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.favourite-icon {
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.title-bookmark {
|
||||
text-align: left;
|
||||
padding: 15px;
|
||||
border-top: 1px solid $light-color;
|
||||
position: relative;
|
||||
|
||||
h6 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
p {
|
||||
animation: displayTransition 1s;
|
||||
}
|
||||
|
||||
.hover-block {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
top: 30px;
|
||||
left: 0;
|
||||
|
||||
ul {
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
+li {
|
||||
margin-left: 5px;
|
||||
}
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: $dark-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: 1px 4px 16px 3px rgba($black, 0.04);
|
||||
transition: 0.5s;
|
||||
.title-bookmark {
|
||||
p {
|
||||
opacity: 0;
|
||||
}
|
||||
.hover-block {
|
||||
opacity: 1;
|
||||
animation: displayTransition 2s;
|
||||
}
|
||||
}
|
||||
.favourite-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.list-bookmark {
|
||||
.row {
|
||||
> div {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%
|
||||
}
|
||||
}
|
||||
|
||||
.bookmark-card {
|
||||
.desciption-data {
|
||||
.content-general {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.details-website {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.title-bookmark {
|
||||
p {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hover-block {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
opacity: 1;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.title-bookmark {
|
||||
.hover-block {
|
||||
opacity: 1;
|
||||
animation: displayTransition 0s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.card {
|
||||
.title-bookmark {
|
||||
border-top: none;
|
||||
|
||||
p,
|
||||
h6 {
|
||||
margin-top: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
h6 {
|
||||
position: relative;
|
||||
padding-right: 15px;
|
||||
margin-bottom: -5px;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '-';
|
||||
right: 0;
|
||||
color: $dark-gray;
|
||||
}
|
||||
}
|
||||
|
||||
.content-general {
|
||||
margin-top: 5px;
|
||||
|
||||
p {
|
||||
width: 68%;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
.card {
|
||||
.d-flex {
|
||||
justify-content: space-between;
|
||||
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
+li {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-pane {
|
||||
>.card {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// responsive
|
||||
@media only screen and (max-width: 1660px) {
|
||||
.bookmark-tabcontent {
|
||||
.details-bookmark {
|
||||
&.list-bookmark {
|
||||
.bookmark-card {
|
||||
&.card {
|
||||
.title-bookmark {
|
||||
.content-general {
|
||||
p {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.hover-block {
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) and (max-width: 1366px) {
|
||||
.bookmark-wrap {
|
||||
.left-bookmark {
|
||||
ul {
|
||||
li {
|
||||
.btn-block {
|
||||
svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1366px) {
|
||||
.bookmark-tabcontent {
|
||||
.details-bookmark {
|
||||
&.list-bookmark {
|
||||
.bookmark-card {
|
||||
img {
|
||||
width: 40%;
|
||||
}
|
||||
&.card {
|
||||
.title-bookmark {
|
||||
.hover-block {
|
||||
top: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1199px) {
|
||||
.bookmark-wrap {
|
||||
.left-bookmark {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.bookmark-tabcontent {
|
||||
.details-bookmark {
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 991px) {
|
||||
.modal-bookmark {
|
||||
|
||||
.modal-body,
|
||||
.modal-header {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.bookmark-tabcontent {
|
||||
.details-bookmark {
|
||||
&.list-bookmark {
|
||||
.bookmark-card {
|
||||
.details-website {
|
||||
.title-bookmark {
|
||||
p {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
max-width: 172px;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.title-bookmark {
|
||||
.hover-block {
|
||||
p {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
position: relative;
|
||||
right: unset;
|
||||
top: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 45%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 575px) {
|
||||
.bookmark-tabcontent {
|
||||
.details-bookmark {
|
||||
&.list-bookmark {
|
||||
.bookmark-card {
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.details-website {
|
||||
display: block;
|
||||
.title-bookmark {
|
||||
padding-left: 15px;
|
||||
.hover-block {
|
||||
position: relative;
|
||||
right: unset;
|
||||
text-align: left;
|
||||
top: unset;
|
||||
padding: 0;
|
||||
}
|
||||
.content-general {
|
||||
display: none;
|
||||
}
|
||||
p, h6 {
|
||||
display: block;
|
||||
}
|
||||
h6 {
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-bookmark {
|
||||
|
||||
.modal-body,
|
||||
.modal-header {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**=====================
|
||||
85. bookmark app CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,36 @@
|
||||
/**=====================
|
||||
82. cart CSS start
|
||||
==========================**/
|
||||
.cart{
|
||||
.total-amount{
|
||||
text-align: right!important;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.amount-space{
|
||||
margin-left: 40px;
|
||||
}
|
||||
.cart-btn-transform{
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.qty-box{
|
||||
width: 25%;
|
||||
margin: 0 auto;
|
||||
.input-group {
|
||||
.btn {
|
||||
background-color: #ddd !important;
|
||||
border-color: #ddd !important;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.cart-buttons{
|
||||
margin-top: 30px;
|
||||
.cart-btn{
|
||||
float: right;
|
||||
padding-right: 85px;
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
82. cart CSS Ends
|
||||
==========================**/
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,378 @@
|
||||
/**=====================
|
||||
14. Chat CSS Start
|
||||
==========================**/
|
||||
.chat-box {
|
||||
.toogle-bar{
|
||||
display: none;
|
||||
}
|
||||
.chat-menu {
|
||||
max-width:340px;
|
||||
}
|
||||
.people-list {
|
||||
.search{
|
||||
position: relative;
|
||||
.form-control{
|
||||
background-color: $light-body-bg-color;
|
||||
border: 1px solid $light-color;
|
||||
&::placeholder{
|
||||
color: $semi-dark;
|
||||
}
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 17px;
|
||||
font-size: 14px;
|
||||
color: $light-gray;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
padding:0;
|
||||
li {
|
||||
padding-bottom: 20px;
|
||||
&:last-child{
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-image {
|
||||
float: left;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.about {
|
||||
float: left;
|
||||
margin-top: 5px;
|
||||
padding-left: 10px;
|
||||
.name {
|
||||
color: $dark-color;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.status {
|
||||
color: $semi-dark;
|
||||
letter-spacing: 1px;
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
.chat-status{
|
||||
font-weight:600;
|
||||
color: $theme-body-font-color;
|
||||
}
|
||||
p{
|
||||
font-size:14px;
|
||||
}
|
||||
}
|
||||
.chat-right-aside{
|
||||
.chat {
|
||||
.chat-header {
|
||||
padding:15px;
|
||||
border-bottom:1px solid $light-color;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:space-between;
|
||||
img {
|
||||
float: left;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
box-shadow: 1px 1px 4px 1px $light-gray;
|
||||
}
|
||||
.chat-menu-icons{
|
||||
li{
|
||||
margin-right:24px;
|
||||
a i{
|
||||
color: $theme-body-sub-title-color;
|
||||
font-size: 25px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-menu-icons{
|
||||
margin-left:auto;
|
||||
[dir="rtl"] & {
|
||||
margin-right: auto;
|
||||
margin-left: unset;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.chat-msg-box {
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
height: 560px;
|
||||
margin-bottom: 80px;
|
||||
.chat-user-img{
|
||||
margin-top: -35px;
|
||||
}
|
||||
.message-data {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.message-data-time {
|
||||
letter-spacing: 1px;
|
||||
font-size: 12px;
|
||||
color: $semi-dark;
|
||||
}
|
||||
.message {
|
||||
color: $dark-color;
|
||||
padding: 20px;
|
||||
line-height: 1.9;
|
||||
letter-spacing: 1px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 30px;
|
||||
width: 50%;
|
||||
position: relative;
|
||||
}
|
||||
.my-message {
|
||||
border: 1px solid $light-color;
|
||||
border-radius: 10px;
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
.other-message {
|
||||
background-color: $light ;
|
||||
border-radius: 10px;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
.chat-message {
|
||||
padding: 20px;
|
||||
border-top: 1px solid $light-body-bg-color;
|
||||
position: absolute;
|
||||
width: calc(100% - 15px);
|
||||
background-color: $white;
|
||||
bottom: 0;
|
||||
.smiley-box{
|
||||
background: $light-semi-gray;
|
||||
padding: 10px;
|
||||
display: block;
|
||||
border-radius: 4px;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.text-box{
|
||||
position: relative;
|
||||
.input-txt-bx {
|
||||
height: 50px;
|
||||
border: 2px solid var(--theme-deafult);
|
||||
padding-left: 18px;
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
i{
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
font-size: 20px;
|
||||
color: $light-gray;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn{
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
padding: 0.74rem 1.75rem;
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.chat-menu {
|
||||
border-left: 1px solid $light-color;
|
||||
.tab-pane {
|
||||
padding: 0 15px;
|
||||
}
|
||||
ul{
|
||||
li{
|
||||
.about{
|
||||
.status{
|
||||
i{
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-profile {
|
||||
margin-top: 30px;
|
||||
.user-content{
|
||||
h5{
|
||||
margin: 25px 0;
|
||||
}
|
||||
hr{
|
||||
margin: 25px 0;
|
||||
}
|
||||
p{
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.border-tab.nav-tabs .nav-item .nav-link.active, .border-tab.nav-tabs .nav-item .nav-link.show, .border-tab.nav-tabs .nav-item .nav-link:focus{
|
||||
border-bottom: 0;
|
||||
}
|
||||
.image {
|
||||
position: relative;
|
||||
.icon-wrapper {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 55%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
border-radius: 50%;
|
||||
background-color: $white;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
font-size: 14px;
|
||||
box-shadow: 1px 1px 3px 1px $light-color;
|
||||
}
|
||||
.avatar img {
|
||||
border-radius: 50%;
|
||||
border: 5px solid $light-color;
|
||||
}
|
||||
}
|
||||
.border-right {
|
||||
border-right: 1px solid #dee2e6;
|
||||
}
|
||||
.follow {
|
||||
margin-top: 0;
|
||||
.follow-num {
|
||||
font-size: 20px;
|
||||
color: $black;
|
||||
}
|
||||
span {
|
||||
color: $theme-font-color;
|
||||
font-size: 14px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
.social-media a {
|
||||
color: $semi-dark;
|
||||
font-size: 15px;
|
||||
padding: 0 7px;
|
||||
}
|
||||
.chat-profile-contact{
|
||||
p{
|
||||
font-size:14px;
|
||||
color:$semi-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.nav-tabs .nav-item {
|
||||
width:33.33%;
|
||||
a {
|
||||
padding: 15px!important;
|
||||
color: $semi-dark!important;
|
||||
letter-spacing: 1px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
height: 60px;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
}
|
||||
.material-border{
|
||||
border-width:1px;
|
||||
border-color:var(--theme-deafult);
|
||||
}
|
||||
.nav-link.active {
|
||||
color: $black!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chat-history{
|
||||
.call-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 300px;
|
||||
}
|
||||
.total-time h2 {
|
||||
font-size: 50px;
|
||||
color: $light-semi-gray;
|
||||
font-weight: 600;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.receiver-img{
|
||||
margin-top: 55px;
|
||||
img{
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
.call-icons{
|
||||
margin-bottom: 35px;
|
||||
ul{
|
||||
li {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 1px solid $light-color;
|
||||
border-radius: 50%;
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
+ li{
|
||||
margin-left: 10px;
|
||||
}
|
||||
a {
|
||||
color: #999;
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.chat-left-aside{
|
||||
> .media{
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.people-list{
|
||||
height: 625px;
|
||||
}
|
||||
ul li{
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
.status-circle{
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
top:4px;
|
||||
left:44px;
|
||||
border-radius: 50%;
|
||||
border:2px solid $white;
|
||||
}
|
||||
.away{
|
||||
background-color: $warning-color;
|
||||
}
|
||||
.online{
|
||||
background-color: $success-color;
|
||||
}
|
||||
.offline{
|
||||
background-color: $danger-color;
|
||||
}
|
||||
.chat-container{
|
||||
.aside-chat-left{
|
||||
width:320px;
|
||||
}
|
||||
.chat-right-aside{
|
||||
width:320px;
|
||||
}
|
||||
}
|
||||
.call-chat-sidebar{
|
||||
max-width: 320px;
|
||||
}
|
||||
.call-chat-sidebar,.chat-body{
|
||||
.card{
|
||||
.card-body{
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
14. Chat CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,222 @@
|
||||
/**=====================
|
||||
84. Checkout CSS start
|
||||
==========================**/
|
||||
.checkout {
|
||||
.checkout-details {
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #dddddd;
|
||||
padding: 40px;
|
||||
.order-place{
|
||||
margin-top:15px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.order-box {
|
||||
.title-box {
|
||||
padding-bottom: 20px;
|
||||
color: #444444;
|
||||
font-size: 22px;
|
||||
border-bottom: 1px solid #ededed;
|
||||
margin-bottom: 20px;
|
||||
|
||||
span {
|
||||
width: 35%;
|
||||
float: right;
|
||||
font-weight: 600;
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.checkbox-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-total {
|
||||
li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
line-height: 20px;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
|
||||
.count {
|
||||
position: relative;
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
font-weight: 400;
|
||||
width: 35%;
|
||||
float: right;
|
||||
text-align:right;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.shipping-class {
|
||||
margin-bottom: 12px;
|
||||
|
||||
.shopping-checkout-option {
|
||||
margin-top: -4px;
|
||||
position: relative;
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
color: var(--theme-deafult);
|
||||
font-weight: 400;
|
||||
width: 35%;
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.total {
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
line-height: 20px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.qty {
|
||||
position: relative;
|
||||
border-bottom: 1px solid #ededed;
|
||||
margin-bottom: 30px;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
color: #444444;
|
||||
line-height: 20px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
span {
|
||||
float: right;
|
||||
font-size: 18px;
|
||||
line-height: 20px;
|
||||
color: #232323;
|
||||
font-weight: 400;
|
||||
width: 35%;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radio-option {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.img-paypal {
|
||||
width: 30%;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
/**=====================
|
||||
86. Checkout CSS Ends
|
||||
==========================**/
|
||||
|
||||
/**=====================
|
||||
Responsive CSS Start
|
||||
==========================**/
|
||||
@media screen and (max-width: 1199px) {
|
||||
.checkout {
|
||||
.checkout-details {
|
||||
padding: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.order-box {
|
||||
.title-box {
|
||||
span {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-total {
|
||||
li {
|
||||
.count {
|
||||
width: 38%;
|
||||
}
|
||||
}
|
||||
|
||||
.shipping-class {
|
||||
.shopping-checkout-option {
|
||||
width: 46%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qty {
|
||||
li {
|
||||
span {
|
||||
width: 38%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.total {
|
||||
li {
|
||||
.count {
|
||||
width: 38%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991px) {
|
||||
.order-box {
|
||||
.sub-total {
|
||||
.shipping-class {
|
||||
.shopping-checkout-option {
|
||||
width: 38%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 575px) {
|
||||
.checkout {
|
||||
.checkout-details {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
.order-box {
|
||||
.sub-total {
|
||||
.shipping-class {
|
||||
.shopping-checkout-option {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
.count {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
84. Checkout CSS ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,82 @@
|
||||
/**=====================
|
||||
27. Coming Soon CSS Start
|
||||
==========================**/
|
||||
.comingsoon-bgimg {
|
||||
background: url(../images/other-images/coming-soon-bg.jpg);
|
||||
background-position: bottom;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.comingsoon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
padding: 50px 0;
|
||||
|
||||
.comingsoon-inner {
|
||||
h5 {
|
||||
font-size: 18px;
|
||||
letter-spacing: 1px;
|
||||
color: $theme-body-sub-title-color;
|
||||
font-weight: 500;
|
||||
margin-bottom: 30px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.countdown {
|
||||
padding: 30px 0;
|
||||
border-top: 1px solid $light-color;
|
||||
border-bottom: 1px solid $light-color;
|
||||
|
||||
.time {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 50%;
|
||||
color: $white;
|
||||
font-weight: 500;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
font-size: 36px;
|
||||
background: var(--theme-deafult);
|
||||
}
|
||||
|
||||
.title {
|
||||
padding-top: 13px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: $theme-body-sub-title-color;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
ul li {
|
||||
display: inline-block;
|
||||
text-transform: uppercase;
|
||||
margin: 0 20px;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
video {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
z-index: -100;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
transition: 1s opacity;
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
27. Coming Soon CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,406 @@
|
||||
/**=====================
|
||||
86. contacts CSS Start
|
||||
==========================**/
|
||||
.alert-contactadd {
|
||||
background-color: $white;
|
||||
border: 1px solid var(--theme-deafult);
|
||||
width: 12%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.updateimg {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
width: 100px;
|
||||
top: 32px;
|
||||
line-height: 93px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#right-history {
|
||||
top: 81px;
|
||||
right: -320px;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
width: 320px;
|
||||
z-index: 9;
|
||||
background-color: $white;
|
||||
transition: .5s;
|
||||
box-shadow: 0 0 9px rgba(191, 191, 191, 0.36);
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: -320px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
span {
|
||||
a {
|
||||
color: $theme-body-font-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.show {
|
||||
right: 0;
|
||||
transition: .3s;
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.history-details {
|
||||
>div {
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.media {
|
||||
padding: 30px 15px;
|
||||
border-top: 1px solid $light-color;
|
||||
|
||||
i {
|
||||
padding: 5px;
|
||||
background: #fed112;
|
||||
color: $white;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
h6 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.delete-contact {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.more-data {
|
||||
animation: displayTransition 1s;
|
||||
}
|
||||
|
||||
.contact-editform {
|
||||
padding: 30px;
|
||||
animation: displayTransition 1s;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.select2-container {
|
||||
.select2-selection--single {
|
||||
height: 39px !important;
|
||||
border-color: #ced4da !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#deletemodal {
|
||||
.modal-header {
|
||||
border-bottom: none;
|
||||
|
||||
.delete-data {
|
||||
span {
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact-options {
|
||||
li {
|
||||
.btn-category {
|
||||
line-height: 39px;
|
||||
border-radius: 3px;
|
||||
padding-left: 40px !important;
|
||||
padding: 0;
|
||||
color: var(--theme-deafult);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-persons {
|
||||
p {
|
||||
font-family: $font-roboto, $font-serif;
|
||||
}
|
||||
|
||||
.profile-mail {
|
||||
padding: 30px 0;
|
||||
|
||||
.media {
|
||||
img {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.media-body {
|
||||
h5 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-top: 5px;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
a {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
+li {
|
||||
padding-left: 10px;
|
||||
margin-left: 5px;
|
||||
border-left: 2px solid $light-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.email-general {
|
||||
padding-top: 50px;
|
||||
|
||||
ul {
|
||||
padding-right: 20px;
|
||||
|
||||
li {
|
||||
color: $dark-gray;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
>span {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
span {
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.gender {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contacts-tabs {
|
||||
.nav-pills {
|
||||
border-right: 1px solid $light-color;
|
||||
height: 100%;
|
||||
|
||||
.nav-link,
|
||||
.show {
|
||||
|
||||
&.active,
|
||||
>.nav-link {
|
||||
background-color: rgba($primary-color, 0.05);
|
||||
color: $theme-body-font-color;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: $theme-body-font-color;
|
||||
padding: 0;
|
||||
|
||||
.media {
|
||||
.img-50 {
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
+.nav-link {
|
||||
border-top: 1px solid $light-color;
|
||||
}
|
||||
}
|
||||
|
||||
.media {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
.tab-content-child {
|
||||
animation: displayTransition 1s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// responsive
|
||||
@media only screen and (max-width: 991px) {
|
||||
#right-history {
|
||||
top: 60px;
|
||||
}
|
||||
|
||||
.updateimg {
|
||||
top: 21px;
|
||||
}
|
||||
|
||||
.list-persons {
|
||||
.profile-mail {
|
||||
padding: 20px;
|
||||
|
||||
.email-general {
|
||||
.gender {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact-editform {
|
||||
button {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.contact-editform {
|
||||
padding: 20px;
|
||||
|
||||
&.pl-0 {
|
||||
padding-left: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.contacts-tabs {
|
||||
.nav-pills {
|
||||
border-right: none;
|
||||
border-bottom: 1px solid $light-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 575px) {
|
||||
#right-history {
|
||||
width: 270px;
|
||||
}
|
||||
|
||||
.updateimg {
|
||||
top: 16px;
|
||||
left: 29px;
|
||||
}
|
||||
|
||||
.contacts-tabs {
|
||||
.media {
|
||||
img {
|
||||
&.m-r-20 {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pills {
|
||||
.media {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-persons {
|
||||
.profile-mail {
|
||||
padding: 15px;
|
||||
|
||||
.email-general {
|
||||
.gender {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-pills {
|
||||
.nav-link {
|
||||
.media {
|
||||
.media-body {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact-editform {
|
||||
padding: 15px;
|
||||
|
||||
button {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
&.pl-0 {
|
||||
padding-left: 15px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-editform,
|
||||
.contact-options {
|
||||
form {
|
||||
.row {
|
||||
> div {
|
||||
.row {
|
||||
> div {
|
||||
> div {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
+div {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 360px) {
|
||||
.updateimg {
|
||||
line-height: 73px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.list-persons {
|
||||
.profile-mail {
|
||||
.email-general {
|
||||
p {
|
||||
span {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media {
|
||||
display: block;
|
||||
|
||||
img {
|
||||
height: 80px;
|
||||
width: 80px !important;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
86. contacts CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,590 @@
|
||||
/**=====================
|
||||
67. Dashboard 2 CSS Start
|
||||
==========================**/
|
||||
.widget-decor {
|
||||
position: absolute;
|
||||
height: 60px;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.balance-widget {
|
||||
background-image: url(../images/dashboard-2/balance-bg.png);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right;
|
||||
.mobile-right-img {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 15px;
|
||||
.left-mobile-img {
|
||||
margin-right: -20px;
|
||||
}
|
||||
.mobile-img {
|
||||
height: 130px;
|
||||
}
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: 15px;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
right: 0;
|
||||
.mobile-img {
|
||||
height: 100px;
|
||||
}
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
[dir="rtl"] & {
|
||||
text-align: right;
|
||||
}
|
||||
&.card-body {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
.purchase-btn {
|
||||
min-width: 170px;
|
||||
}
|
||||
}
|
||||
.small-widget {
|
||||
overflow: hidden;
|
||||
h4 {
|
||||
margin-bottom: -3px;
|
||||
}
|
||||
i {
|
||||
font-weight: 700;
|
||||
font-size: 11px;
|
||||
}
|
||||
.card-body {
|
||||
padding: 24px 15px;
|
||||
}
|
||||
.bg-gradient {
|
||||
width: 66px;
|
||||
height: 67px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 100px;
|
||||
right: -12px;
|
||||
top: 50%;
|
||||
position: absolute;
|
||||
transform: translateY(-50%);
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: -12px;
|
||||
transform: translateY(-50%) scaleX(-1);
|
||||
}
|
||||
@media (max-width: 1399px) {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
svg {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
@media (max-width: 1399px) {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
transition: 0.5s;
|
||||
.bg-gradient {
|
||||
svg {
|
||||
animation: tada 1.5s ease infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.appointment {
|
||||
.customer-table {
|
||||
@media (max-width:1470px) {
|
||||
height: 268px;
|
||||
}
|
||||
@media (max-width:1399px) {
|
||||
height: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
.order-wrapper {
|
||||
margin: 0 -24px -17px -17px;
|
||||
}
|
||||
.categories-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
@media (max-width: 767px) {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
li {
|
||||
gap: 10px;
|
||||
.bg-light {
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
object-fit: contain;
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
h6 {
|
||||
a {
|
||||
transition: 0.5s;
|
||||
color: var(--body-font-color);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.bg-light {
|
||||
img {
|
||||
transition: 0.5s;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
h6 {
|
||||
a {
|
||||
transition: 0.5s;
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.monthly-profit {
|
||||
margin-top: -10px;
|
||||
@media (max-width: 1584px) {
|
||||
margin: -10px -8px 0;
|
||||
}
|
||||
@media (max-width: 1520px) {
|
||||
margin: -10px -16px 0;
|
||||
}
|
||||
@media (max-width:1500px) {
|
||||
margin: -10px -14px 0;
|
||||
}
|
||||
@media (max-width:1472px) {
|
||||
margin: -10px -20px 0;
|
||||
}
|
||||
@media (max-width:1424px) {
|
||||
margin: -10px -25px 0;
|
||||
}
|
||||
.apexcharts-canvas {
|
||||
.apexcharts-legend-marker {
|
||||
margin-right: 6px;
|
||||
}
|
||||
.apexcharts-datalabels-group {
|
||||
.apexcharts-datalabel-value {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: $font-rubik, $font-serif !important;
|
||||
fill: var(--chart-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.overview-wrapper {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.back-bar-container {
|
||||
position: absolute;
|
||||
width: calc(100% - 64px);
|
||||
bottom: -8px;
|
||||
margin: 0 auto !important;
|
||||
left: 28px;
|
||||
@media (max-width: 1199px) {
|
||||
bottom: 22px;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
width: calc(100% - 34px);
|
||||
left: 18px;
|
||||
}
|
||||
@media (max-width: 327px) {
|
||||
bottom: 42px;
|
||||
}
|
||||
}
|
||||
.overview-card {
|
||||
.balance-data {
|
||||
right: 12px;
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: 12px;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
right: -40%;
|
||||
[dir="rtl"] & {
|
||||
left: -40%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.order-container {
|
||||
.apexcharts-canvas {
|
||||
.apexcharts-marker {
|
||||
stroke-width: 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
.purchase-card.discover {
|
||||
margin-top: 102px;
|
||||
img {
|
||||
width: 224px;
|
||||
margin: 0 auto;
|
||||
margin-top: -90px;
|
||||
@media (max-width: 1550px) {
|
||||
margin-top: -110px;
|
||||
}
|
||||
@media (max-width: 1399px) {
|
||||
margin-top: -90px;
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
margin-top: -110px;
|
||||
}
|
||||
@media (max-width: 618px) {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.visitor-card {
|
||||
.card-header {
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
fill: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
.visitors-container {
|
||||
margin: 0 -12px -27px -17px;
|
||||
svg {
|
||||
.apexcharts-series {
|
||||
path {
|
||||
clip-path: inset(1% 0% 0% 0% round 3rem);
|
||||
}
|
||||
}
|
||||
.apexcharts-legend.apexcharts-align-left {
|
||||
.apexcharts-legend-series {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.recent-order {
|
||||
.nav {
|
||||
gap: 8px;
|
||||
flex-wrap: nowrap;
|
||||
overflow: auto;
|
||||
padding-bottom: 5px;
|
||||
display: flex;
|
||||
}
|
||||
.frame-box {
|
||||
border: 1px solid transparent;
|
||||
padding: 0;
|
||||
transition: 0.5s;
|
||||
&.active {
|
||||
border: 1px solid var(--theme-deafult);
|
||||
}
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
.tab-content {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
.recent-table {
|
||||
table {
|
||||
thead {
|
||||
background: var(--light2);
|
||||
th {
|
||||
padding-top: 9px;
|
||||
padding-bottom: 9px;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
tr {
|
||||
td,th {
|
||||
padding: 12px 8px;
|
||||
vertical-align: middle;
|
||||
&:first-child {
|
||||
min-width: 157px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
@media (max-width: 1660px) {
|
||||
min-width: 97px;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
min-width: 96px;
|
||||
}
|
||||
}
|
||||
td {
|
||||
&:first-child {
|
||||
padding-left: 0;
|
||||
[dir="rtl"] & {
|
||||
padding-left: unset;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
[dir="rtl"] & {
|
||||
padding-left: 0;
|
||||
padding-right: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
td {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
.product-content {
|
||||
h6 {
|
||||
a {
|
||||
color: var(--body-font-color);
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.product-content {
|
||||
h6 {
|
||||
a {
|
||||
color: var(--theme-deafult);
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.product-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
.order-image {
|
||||
background: var(--light2);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.recent-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&.font-success {
|
||||
svg {
|
||||
fill: $success-color;
|
||||
}
|
||||
}
|
||||
&.font-danger {
|
||||
svg {
|
||||
fill: $danger-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.recent-activity {
|
||||
h5 {
|
||||
padding: 30px 0 20px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
h6 {
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2;
|
||||
display: -webkit-box;
|
||||
}
|
||||
ul {
|
||||
li {
|
||||
span {
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2;
|
||||
display: -webkit-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.notification {
|
||||
li {
|
||||
.recent-images {
|
||||
ul {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
li {
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.recent-images {
|
||||
margin-top: 10px;
|
||||
ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
li {
|
||||
border: 1px dashed var(--recent-dashed-border);
|
||||
padding: 3px;
|
||||
border-radius: 2px;
|
||||
.recent-img-wrap {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: var(--light2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.frame-box {
|
||||
background: var(--recent-box-bg);
|
||||
border-radius: 10px;
|
||||
min-width: 76px;
|
||||
box-shadow: 2px 2px 2px var(--recent-border);
|
||||
@media (max-width: 575px) {
|
||||
min-width: 65px;
|
||||
}
|
||||
.frame-image {
|
||||
min-width: 62px;
|
||||
height: 62px;
|
||||
border-color: var(--recent-border) var(--white) var(--white) var(--recent-border);
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
margin: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
@media (max-width: 575px) {
|
||||
min-width: 50px;
|
||||
height: 50px;
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
img {
|
||||
margin: 0 auto;
|
||||
@media (max-width: 575px) {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.support-ticket-font {
|
||||
ul {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.new-update {
|
||||
.media {
|
||||
.media-body {
|
||||
|
||||
span,
|
||||
p {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $activity-dot-name,
|
||||
$activity-dot-color in (primary, $primary-color),
|
||||
(secondary, $secondary-color),
|
||||
(success, $success-color),
|
||||
(danger, $danger-color),
|
||||
(info, $info-color),
|
||||
(light, $light-color),
|
||||
(dark, $dark-color),
|
||||
(warning, $warning-color) {
|
||||
.activity-dot-#{$activity-dot-name} {
|
||||
min-width: 6px;
|
||||
height: 6px;
|
||||
background-color: $activity-dot-color;
|
||||
border-radius: 100%;
|
||||
outline: 5px solid rgba($activity-dot-color, 0.25);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
// responsive
|
||||
@media only screen and (max-width: 1800px) and (min-width: 1400px) {
|
||||
.grid-ed-none {
|
||||
display: none !important;
|
||||
}
|
||||
.grid-ed-12 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1660px) and (min-width: 1400px) {
|
||||
.col-ed-12 {
|
||||
width: 100%;
|
||||
}
|
||||
.col-ed-7 {
|
||||
width: 58%;
|
||||
}
|
||||
.col-ed-5 {
|
||||
width: 42%;
|
||||
}
|
||||
.col-ed-9 {
|
||||
width: 75%;
|
||||
}
|
||||
.col-ed-3 {
|
||||
width: 25%;
|
||||
}
|
||||
.col-ed-6 {
|
||||
width: 50%;
|
||||
}
|
||||
.col-ed-4 {
|
||||
width: 33.33333333%;
|
||||
}
|
||||
.col-ed-8 {
|
||||
width: 66.66%;
|
||||
}
|
||||
.col-ed-none {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1660px) and (min-width: 1200px) {
|
||||
.xl-30 {
|
||||
max-width: 30%;
|
||||
flex: 0 0 30%;
|
||||
}
|
||||
.xl-70 {
|
||||
max-width: 70%;
|
||||
flex: 0 0 70%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 420px) {
|
||||
.size-column {
|
||||
.col-6 {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
67. Dashboard 2 CSS End
|
||||
==========================**/
|
||||
@@ -0,0 +1,711 @@
|
||||
/**=====================
|
||||
Dashboard 3 CSS Start
|
||||
==========================**/
|
||||
@keyframes hand-move {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
20% {
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
80% {
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
.welcome-card {
|
||||
background-image: url(../images/dashboard-3/bg.jpg);
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
color: $white;
|
||||
h4 {
|
||||
img {
|
||||
margin-top: -6px;
|
||||
animation: hand-move 5s infinite ease-in;
|
||||
}
|
||||
}
|
||||
p {
|
||||
width: 75%;
|
||||
@media (max-width:1830px) {
|
||||
width: 62%;
|
||||
}
|
||||
@media (max-width:991px) {
|
||||
width: 70%;
|
||||
}
|
||||
@media (max-width:480px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.welcome-img {
|
||||
height: 200px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -32px;
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: 0;
|
||||
}
|
||||
@media (max-width:1780px) {
|
||||
height: 180px;
|
||||
bottom: -28px;
|
||||
}
|
||||
@media (max-width:1700px) {
|
||||
bottom: -23px;
|
||||
}
|
||||
@media (max-width:767px) {
|
||||
height: 140px;
|
||||
bottom: -18px;
|
||||
}
|
||||
@media (max-width:480px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.course-box {
|
||||
overflow: hidden;
|
||||
.card-body {
|
||||
padding: 25px 15px;
|
||||
@media (max-width: 1722px) {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
@media (max-width: 1660px) {
|
||||
padding: 16px 15px;
|
||||
}
|
||||
}
|
||||
&.widget-course {
|
||||
.card-body {
|
||||
@media (max-width: 1660px) {
|
||||
padding: 25px 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
transition: 0.5s;
|
||||
.course-icon {
|
||||
svg {
|
||||
animation: tada 1.5s ease infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.course-widget {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
.course-icon {
|
||||
position: relative;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
clip-path: polygon(40% 7.67949%, 43.1596% 6.20615%, 46.52704% 5.30384%, 50% 5%, 53.47296% 5.30384%, 56.8404% 6.20615%, 60% 7.67949%, 81.65064% 20.17949%, 84.50639% 22.17911%, 86.97152% 24.64425%, 88.97114% 27.5%, 90.44449% 30.6596%, 91.34679% 34.02704%, 91.65064% 37.5%, 91.65064% 62.5%, 91.34679% 65.97296%, 90.44449% 69.3404%, 88.97114% 72.5%, 86.97152% 75.35575%, 84.50639% 77.82089%, 81.65064% 79.82051%, 60% 92.32051%, 56.8404% 93.79385%, 53.47296% 94.69616%, 50% 95%, 46.52704% 94.69616%, 43.1596% 93.79385%, 40% 92.32051%, 18.34936% 79.82051%, 15.49361% 77.82089%, 13.02848% 75.35575%, 11.02886% 72.5%, 9.55551% 69.3404%, 8.65321% 65.97296%, 8.34936% 62.5%, 8.34936% 37.5%, 8.65321% 34.02704%, 9.55551% 30.6596%, 11.02886% 27.5%, 13.02848% 24.64425%, 15.49361% 22.17911%, 18.34936% 20.17949%);
|
||||
background: linear-gradient(310.31deg, #FF3364 14.71%, #FF7F9E 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
svg {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
fill: $white;
|
||||
}
|
||||
&.warning {
|
||||
background: linear-gradient(297.08deg, #FF9E2A -4.53%, #FFA941 98.25%);
|
||||
}
|
||||
}
|
||||
.btn-light {
|
||||
background: var(--course-light-btn) !important;
|
||||
border: none;
|
||||
}
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
margin-top: 25px;
|
||||
span {
|
||||
display: block;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
svg {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.get-card {
|
||||
.card-header {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
.square-group {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
transform: scaleX(-1);
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: 0;
|
||||
}
|
||||
.square-1 {
|
||||
width: 12px;
|
||||
height: 18px;
|
||||
}
|
||||
.square-2 {
|
||||
width: 12px;
|
||||
height: 10px;
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
.square-3 {
|
||||
width: 18px;
|
||||
height: 10px;
|
||||
margin-left: 10px;
|
||||
[dir="rtl"] & {
|
||||
margin-left: unset;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.square-4 {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: -15px;
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: -15px;
|
||||
}
|
||||
}
|
||||
.square-5 {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
bottom: 22px;
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: -1px;
|
||||
}
|
||||
}
|
||||
.square-6, .square-7 {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
.square-6 {
|
||||
right: -23px;
|
||||
bottom: 5px;
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: -23px;
|
||||
}
|
||||
}
|
||||
.square-7 {
|
||||
right: 8px;
|
||||
bottom: 45px;
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: 8px;
|
||||
}
|
||||
}
|
||||
.warning1 {
|
||||
background: #FFD497;
|
||||
}
|
||||
.warning {
|
||||
background: #FFA73B;
|
||||
}
|
||||
.primary {
|
||||
background: $primary-color;
|
||||
}
|
||||
.danger {
|
||||
background: #f54132;
|
||||
}
|
||||
.light {
|
||||
background: #E6E8EF;
|
||||
}
|
||||
.success {
|
||||
background: $success-color;
|
||||
}
|
||||
}
|
||||
.progress-chart-wrap {
|
||||
margin: -40px 0 -22px;
|
||||
[dir="rtl"] & {
|
||||
direction: ltr;
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
margin-top: -18px;
|
||||
}
|
||||
.apexcharts-canvas {
|
||||
margin: 0 auto;
|
||||
.apexcharts-datalabels-group {
|
||||
.apexcharts-datalabel-label {
|
||||
fill: var(--chart-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.get-card {
|
||||
.btn {
|
||||
margin-top: 15px;
|
||||
padding: 8px 15px;
|
||||
&:hover {
|
||||
svg {
|
||||
transform: translateX(5px);
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
fill: $white;
|
||||
vertical-align: middle;
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.default-datepicker {
|
||||
.datepicker-inline {
|
||||
.datepicker {
|
||||
width: auto;
|
||||
background: $white;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
|
||||
.datepicker--content {
|
||||
padding: 0;
|
||||
.datepicker--days {
|
||||
.datepicker--days-names {
|
||||
margin: 27px 0 0;
|
||||
padding: 15px 0;
|
||||
|
||||
.datepicker--day-name {
|
||||
color: $dark-editor-document;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker--cells {
|
||||
.datepicker--cell-day {
|
||||
height: 35px;
|
||||
width: 14%;
|
||||
color: $dark-editor-document;
|
||||
|
||||
&.-other-month- {
|
||||
color: $dark-editor-document;
|
||||
opacity: 20%;
|
||||
}
|
||||
&.-weekend- {
|
||||
+ .-weekend- {
|
||||
color: $danger-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker--cell {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 17px;
|
||||
z-index: 0;
|
||||
letter-spacing: 2px;
|
||||
|
||||
&.-selected- {
|
||||
background: var(--theme-deafult);
|
||||
color: $white;
|
||||
position: relative;
|
||||
box-shadow: 0px 0px 13px 0 rgba($primary-color, 0.5);
|
||||
}
|
||||
|
||||
&.-current- {
|
||||
background-color: $success-color;
|
||||
border: none;
|
||||
color: $white;
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: 2px solid var(--white);
|
||||
background: $danger-color;
|
||||
right: -3px;
|
||||
top: -2px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.-focus- {
|
||||
color: $white;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker-cell {
|
||||
.datepicker--cell-month {
|
||||
&.-current- {
|
||||
&.-selected- {
|
||||
background-color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker--nav {
|
||||
border-bottom: none;
|
||||
padding: 0;
|
||||
text-transform: capitalize;
|
||||
margin-top: 0;
|
||||
|
||||
.datepicker--nav-action {
|
||||
background-color: transparent;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
&[data-action="prev"] {
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: 50px;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
path {
|
||||
stroke: var(--chart-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker--nav-title {
|
||||
color: $dark-editor-document;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
@media (max-width:767px) {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-left: 10px;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
color: $dark-editor-document;
|
||||
@media (max-width:767px) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.learning-wrap {
|
||||
margin: -24px -10px -24px -15px;
|
||||
}
|
||||
.activity-wrap {
|
||||
margin: -22px 0 -22px -28px;
|
||||
[dir="rtl"] & {
|
||||
margin: -22px -28px -22px 0;
|
||||
}
|
||||
}
|
||||
.upcoming-event-wrap {
|
||||
margin-bottom: -39px;
|
||||
margin-left: -24px;
|
||||
}
|
||||
.course-card {
|
||||
.dropdown {
|
||||
.dropdown-toggle {
|
||||
width: 125px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.course-wrapper {
|
||||
text-align: center;
|
||||
.course-icon-box {
|
||||
position: relative;
|
||||
padding: 8px;
|
||||
@media (max-width:767px) {
|
||||
padding: 0;
|
||||
}
|
||||
.icon-wrap {
|
||||
width: 117px;
|
||||
height: 92px;
|
||||
background-color: var(--course-bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 8px;
|
||||
margin: 0 auto;
|
||||
box-shadow: -18px 15px 20px rgba(119, 119, 119, 0.25);
|
||||
@media (max-width: 1880px) {
|
||||
width: 112px;
|
||||
}
|
||||
@media (max-width:767px) {
|
||||
box-shadow: none;
|
||||
}
|
||||
@media (max-width:575px) {
|
||||
width: 92px;
|
||||
height: 82px;
|
||||
}
|
||||
img {
|
||||
width: 80px;
|
||||
@media (max-width:575px) {
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.arrow-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: calc(100% + 20px);
|
||||
height: 100%;
|
||||
[dir="rtl"] & {
|
||||
left: unset;
|
||||
right: 0;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
@media (max-width:767px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
h6 {
|
||||
margin-top: 25px;
|
||||
margin-bottom: 0;
|
||||
@media (max-width: 575px) {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.course-main-card {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
@media (max-width: 1880px) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@media (max-width:767px) {
|
||||
gap: 12px;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.course-wrapper {
|
||||
&:last-child {
|
||||
.arrow-bg {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.schedule-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
@media (max-width:767px) {
|
||||
flex-direction: row;
|
||||
}
|
||||
@media (max-width:575px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
h6 {
|
||||
font-size: 14px;
|
||||
}
|
||||
ul {
|
||||
column-count: 2;
|
||||
column-rule-style: solid;
|
||||
column-rule-color: var(--chart-text-color);
|
||||
column-gap: 20px;
|
||||
column-rule-width: 1px;
|
||||
@media (max-width:1712px) {
|
||||
column-gap: 14px;
|
||||
}
|
||||
@media (max-width: 1199px) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
li {
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
img {
|
||||
border-radius: 100%;
|
||||
width: 37px;
|
||||
height: 37px;
|
||||
padding: 3px;
|
||||
}
|
||||
svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
&.f-success {
|
||||
fill: $success-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
> li {
|
||||
padding: 15px 20px;
|
||||
box-shadow: 4px 7px 17px 5px rgba(46, 35, 94, 0.05);
|
||||
gap: 10px;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
@media (max-width:1712px) {
|
||||
padding: 16px 14px;
|
||||
}
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 5px;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 15px 0 0 15px;
|
||||
[dir="rtl"] & {
|
||||
left: unset;
|
||||
right: 0;
|
||||
border-radius: 0 15px 15px 0;
|
||||
}
|
||||
}
|
||||
&.primary {
|
||||
&::before {
|
||||
background-color: var(--theme-deafult);
|
||||
}
|
||||
img {
|
||||
border: 1px solid var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
&.warning {
|
||||
&::before {
|
||||
background-color: $warning-color;
|
||||
}
|
||||
img {
|
||||
border: 1px solid $warning-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.link-only {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: $theme-body-sub-title-color;
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
.lessons-lists {
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 0;
|
||||
img {
|
||||
transition: 0.5s;
|
||||
}
|
||||
+ li {
|
||||
border-top: 1px solid var(--chart-dashed-border);
|
||||
}
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
&:hover {
|
||||
img {
|
||||
transform: scale(1.1);
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.lesson-wrap {
|
||||
width: 50px;
|
||||
margin-bottom: -11px;
|
||||
margin-top: -6px;
|
||||
.apexcharts-canvas {
|
||||
.apexcharts-datalabel-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// responsive
|
||||
|
||||
@media only screen and (max-width: 575px) {
|
||||
.default-datepicker {
|
||||
.datepicker-inline {
|
||||
.datepicker {
|
||||
.datepicker--nav-title {
|
||||
font-size: 17px;
|
||||
|
||||
i {
|
||||
font-size: 17px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker--content {
|
||||
.datepicker--days {
|
||||
.datepicker--cells {
|
||||
.datepicker--cell {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 360px) {
|
||||
.default-datepicker {
|
||||
.datepicker-inline {
|
||||
.datepicker {
|
||||
.datepicker--content {
|
||||
.datepicker--days {
|
||||
.datepicker--cells {
|
||||
.datepicker--cell {
|
||||
&.-selected- {
|
||||
&:before {
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker--cell-day {
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker--days-names {
|
||||
margin: 13px 0 13px;
|
||||
|
||||
.datepicker--day-name {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.datepicker--nav-title {
|
||||
i {
|
||||
margin-left: 15px;
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,611 @@
|
||||
/**=====================
|
||||
Dashboard 4 CSS Start
|
||||
==========================**/
|
||||
.widget-hover {
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
.currency-widget {
|
||||
.currency-icon-widget {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 5px;
|
||||
box-shadow: inset 2.66667px -2.66667px 2.66667px rgba(194, 128, 49, 0.1), inset -2.66667px 2.66667px 2.66667px rgba(255, 255, 255, 0.1);
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: $white;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
margin-top: 14px;
|
||||
.card-body {
|
||||
padding: 15px;
|
||||
gap: 10px;
|
||||
justify-content: space-between;
|
||||
@media (max-width:1660px) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@media (max-width:575px) {
|
||||
flex-wrap: unset;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
h6 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.d-flex {
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
span {
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
div[class*="bg-light-"] {
|
||||
color: $theme-body-font-color;
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
width: 115px;
|
||||
@media (max-width:1660px) and (min-width: 1200px) {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 1199px) {
|
||||
width: 100%;
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
&.widget-currency {
|
||||
.card {
|
||||
.card-body {
|
||||
@media (max-width: 1199px) and (min-width: 768px) {
|
||||
flex-wrap: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.warning {
|
||||
.currency-icon-widget {
|
||||
background-image: linear-gradient(to right, $warning-color 80% , rgba($warning-color, 0.2));
|
||||
}
|
||||
}
|
||||
&.primary {
|
||||
.currency-icon-widget {
|
||||
background-image: linear-gradient(to right, $primary-color 80% , rgba($primary-color, 0.2));
|
||||
}
|
||||
}
|
||||
&.success {
|
||||
.currency-icon-widget {
|
||||
background-image: linear-gradient(to right, $success-color 80% , rgba($success-color, 0.2));
|
||||
}
|
||||
}
|
||||
&.height-equal {
|
||||
@media (max-width:1399px) {
|
||||
min-height: unset !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.currency-chart-wrap {
|
||||
margin: -28px -10px -20px -20px;
|
||||
@media (max-width: 575px) {
|
||||
width: 50%;
|
||||
}
|
||||
.apexcharts-canvas {
|
||||
.apexcharts-tooltip-text-y-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tranaction-card {
|
||||
.header-top {
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
.crypto-main-card {
|
||||
background-image: linear-gradient(to bottom right, #5f3deb, #ad79ff);
|
||||
color: $white;
|
||||
.card-body {
|
||||
@media (max-width: 1199px) {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
padding: 8px 20px;
|
||||
@media (max-width: 1660px) {
|
||||
padding: 8px 15px;
|
||||
}
|
||||
}
|
||||
.deposit-wrap {
|
||||
> div {
|
||||
width: 65%;
|
||||
@media (max-width: 1660px) {
|
||||
width: 90%;
|
||||
}
|
||||
@media (max-width: 1536px) {
|
||||
width: 100%;
|
||||
}
|
||||
@media (max-width: 1399px) {
|
||||
width: 75%;
|
||||
}
|
||||
@media (max-width: 1199px) {
|
||||
width: 95%;
|
||||
}
|
||||
h5 {
|
||||
@media (max-width: 1660px) {
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2;
|
||||
display: -webkit-box;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
img {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
width: 55%;
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: 10px;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
@media (max-width: 1660px) {
|
||||
width: 44%;
|
||||
}
|
||||
@media (max-width: 1399px) {
|
||||
width: 52%;
|
||||
}
|
||||
@media (max-width: 1199px) {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.portfolio-card {
|
||||
.dropdown-toggle {
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
.btn-white {
|
||||
color: $primary-color;
|
||||
background-color: $white;
|
||||
}
|
||||
.radial-progress-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 6px;
|
||||
&.card-body {
|
||||
padding: 23px 20px;
|
||||
@media (max-width: 1199px) {
|
||||
padding: 30px 20px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
}
|
||||
h6 {
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 1;
|
||||
display: -webkit-box;
|
||||
}
|
||||
|
||||
.sale-details {
|
||||
margin: 10px 0;
|
||||
svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.radial-chart-wrap {
|
||||
width: 110px;
|
||||
margin-right: -25px;
|
||||
[dir="rtl"] & {
|
||||
margin-right: unset;
|
||||
margin-left: -25px;
|
||||
}
|
||||
@media (max-width: 1820px) {
|
||||
margin-right: -12px;
|
||||
[dir="rtl"] & {
|
||||
margin-left: -12px;
|
||||
}
|
||||
}
|
||||
.apexcharts-canvas {
|
||||
.apexcharts-datalabel-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.transaction-table {
|
||||
table {
|
||||
tr {
|
||||
&:first-child {
|
||||
td {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
td {
|
||||
&:first-child {
|
||||
min-width: unset;
|
||||
@media (max-width: 1775px) {
|
||||
min-width: 130px;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
text-align: right;
|
||||
min-width: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
tr,td {
|
||||
border-style: dashed;
|
||||
}
|
||||
}
|
||||
}
|
||||
.custom-tab {
|
||||
background: var(--light2);
|
||||
padding: 4px;
|
||||
border-radius: 5px;
|
||||
&.nav-tabs {
|
||||
border: none;
|
||||
.nav-link {
|
||||
border: none;
|
||||
padding: 6px 12px;
|
||||
color: var(--chart-text-color);
|
||||
&.active {
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.market-chart-container {
|
||||
margin: -24px 0 -24px -15px;
|
||||
[dir="rtl"] & {
|
||||
margin: -24px -15px -24px 0;
|
||||
}
|
||||
@media (max-width:575px) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.market-card {
|
||||
.balance-card {
|
||||
padding: 10px;
|
||||
}
|
||||
.custom-tab {
|
||||
@media (max-width:575px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.currency-icon {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
background-color: var(--light2);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&.warning {
|
||||
svg {
|
||||
fill: $warning-color;
|
||||
}
|
||||
}
|
||||
&.success {
|
||||
svg {
|
||||
fill: $success-color;
|
||||
}
|
||||
}
|
||||
&.primary {
|
||||
svg {
|
||||
fill: $primary-color;
|
||||
}
|
||||
}
|
||||
&.secondary {
|
||||
svg {
|
||||
fill: $secondary-color;
|
||||
}
|
||||
}
|
||||
&.dark-green {
|
||||
svg {
|
||||
fill: #1BA27A;
|
||||
}
|
||||
}
|
||||
&.light-blue {
|
||||
svg {
|
||||
fill: #038DE7;
|
||||
}
|
||||
}
|
||||
}
|
||||
.recent-table {
|
||||
tr {
|
||||
&:hover {
|
||||
td {
|
||||
&:first-child {
|
||||
h6 {
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
.border-icon {
|
||||
.social-circle {
|
||||
transform: scale(1.02);
|
||||
transition: 0.5s;
|
||||
}
|
||||
}
|
||||
.currency-icon {
|
||||
svg {
|
||||
animation: tada 1.5s ease infinite;
|
||||
}
|
||||
}
|
||||
.badge-light-primary {
|
||||
background-color: var(--theme-deafult);
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.currency-table {
|
||||
.change-currency {
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: sub;
|
||||
}
|
||||
}
|
||||
th, td {
|
||||
&:nth-child(3) {
|
||||
min-width: 110px;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
min-width: 115px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
&.crypto-select {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
font-size: 12px;
|
||||
right: 7px;
|
||||
width: 62px;
|
||||
background-position: right 0.25rem center;
|
||||
padding: 8px;
|
||||
border: none;
|
||||
font-weight: 500;
|
||||
background-size: 8px;
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: 7px;
|
||||
}
|
||||
&.warning {
|
||||
background-color: rgba($warning-color, 0.1) !important;
|
||||
color: $warning-color !important;
|
||||
}
|
||||
&.primary {
|
||||
background-color: rgba($primary-color, 0.1) !important;
|
||||
color: $primary-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.crypto-form {
|
||||
input {
|
||||
&::-webkit-outer-spin-button,
|
||||
&::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
&[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
}
|
||||
}
|
||||
.balance-box {
|
||||
text-align: center;
|
||||
background-image: url(../images/dashboard-4/bg-balance.png);
|
||||
background-position: right;
|
||||
background-size: cover;
|
||||
.balance-img {
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
border: 2px solid var(--chart-border);
|
||||
border-left-color: $success-color;
|
||||
border-bottom-color: $success-color;
|
||||
border-radius: 100%;
|
||||
position: relative;
|
||||
margin-bottom: 15px;
|
||||
img {
|
||||
background-color: var(--balance-profie-bg);
|
||||
border-radius: 100%;
|
||||
}
|
||||
.edit-icon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid var(--white);
|
||||
background-color: #DFDFF4;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 100%;
|
||||
svg {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
fill: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.balance-profile {
|
||||
ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 50px;
|
||||
margin-top: 16px;
|
||||
@media (max-width: 1660px) {
|
||||
gap: 25px;
|
||||
}
|
||||
li {
|
||||
position: relative;
|
||||
+ li {
|
||||
&::before{
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: -25px;
|
||||
top: 50%;
|
||||
height: 40px;
|
||||
transform: translateY(-50%);
|
||||
border: 1px dashed var(--recent-dashed-border);
|
||||
[dir="rtl"] & {
|
||||
left: unset;
|
||||
right: -25px;
|
||||
}
|
||||
@media (max-width: 1660px) {
|
||||
left: -16px;
|
||||
[dir="rtl"] & {
|
||||
right: -16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.activity-card {
|
||||
.appointment-table {
|
||||
@media (max-width:1399px) {
|
||||
height: 180px;
|
||||
}
|
||||
@media (max-width:575px) {
|
||||
height: unset;
|
||||
}
|
||||
tr {
|
||||
td {
|
||||
&:nth-child(2) {
|
||||
min-width: 130px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.balance-item {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
.balance-icon-wrap {
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 10px;
|
||||
@media (max-width: 1660px) {
|
||||
width: 25px;
|
||||
min-width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.balance-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 100%;
|
||||
@media (max-width: 1660px) {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
svg {
|
||||
color: $white;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
@media (max-width: 1660px) {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.badge {
|
||||
padding: 8px 10px;
|
||||
}
|
||||
&.danger {
|
||||
.balance-icon-wrap {
|
||||
background-color: rgba($danger-color, 0.1);
|
||||
.balance-icon {
|
||||
background-color: $danger-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.success {
|
||||
.balance-icon-wrap {
|
||||
background-color: rgba($success-color, 0.1);
|
||||
.balance-icon {
|
||||
background-color: $success-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.portfolio-chart-container {
|
||||
margin-top: -56px;
|
||||
@media (max-width: 1399px) {
|
||||
margin-top: -20px;
|
||||
}
|
||||
}
|
||||
.portfolio-table {
|
||||
.status {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 100%;
|
||||
display: inline-block;
|
||||
}
|
||||
table {
|
||||
tr, td {
|
||||
border-style: dashed;
|
||||
}
|
||||
tr {
|
||||
td,th {
|
||||
&:first-child {
|
||||
@media (max-width: 1755px) {
|
||||
min-width: 100px;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
@media (max-width: 1755px) {
|
||||
min-width: 128px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,321 @@
|
||||
/**=====================
|
||||
Dashboard 5 CSS Start
|
||||
==========================**/
|
||||
.social {
|
||||
&-img {
|
||||
padding: 5px;
|
||||
background: var(--white);
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
&-widget {
|
||||
.card-body {
|
||||
padding: 15px;
|
||||
}
|
||||
.social-icons {
|
||||
min-width: 55px;
|
||||
height: 55px;
|
||||
background: var(--white);
|
||||
box-shadow: 0px 42.1092px 27.8569px rgba(41, 72, 152, 0.0303704), 0px 8.90772px 7.12618px rgba(41, 72, 152, 0.0196296), 0px 2.02448px 3.44162px rgba(41, 72, 152, 0.012037);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@media (max-width: 1399px) {
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
img {
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.social-content {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.social-chart {
|
||||
margin: -34px -42px -13px;
|
||||
width: 150px;
|
||||
.apexcharts-canvas {
|
||||
.apexcharts-datalabels-group {
|
||||
.apexcharts-datalabel-label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.follower-chart {
|
||||
margin: -20px 0 -20px -34px;
|
||||
@media (max-width: 717px) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
@keyframes wave-speaker {
|
||||
0% {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
}
|
||||
.mobile-app-card {
|
||||
.card-header {
|
||||
background: transparent;
|
||||
padding: 20px;
|
||||
width: 68%;
|
||||
@media (max-width: 1693px) {
|
||||
width: 75%;
|
||||
}
|
||||
@media (max-width: 1316px) {
|
||||
width: 86%;
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
width: 64%;
|
||||
}
|
||||
@media (max-width: 350px) {
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
.card-body {
|
||||
margin-top: -10px;
|
||||
@media (max-width: 1199px) {
|
||||
margin-top: 26px;
|
||||
}
|
||||
@media (max-width: 991px) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.wavy {
|
||||
width: 26px;
|
||||
margin-right: -37px;
|
||||
margin-top: -10px;
|
||||
animation: wave-speaker 2s ease infinite;
|
||||
}
|
||||
}
|
||||
.purchase-btn {
|
||||
padding: 10px 25px;
|
||||
min-width: unset;
|
||||
}
|
||||
}
|
||||
.subscriber-chart-container {
|
||||
margin: -22px -10px -24px;
|
||||
}
|
||||
.click-widgets {
|
||||
.card-body {
|
||||
padding: 28px 15px;
|
||||
}
|
||||
.click-chart {
|
||||
margin: -50px 0 -70px -20px;
|
||||
}
|
||||
}
|
||||
.follower-wrap {
|
||||
.card-body, .card-header {
|
||||
@media (max-width: 1693px) {
|
||||
padding: 22px;
|
||||
}
|
||||
}
|
||||
.card-header {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.campaign-list {
|
||||
column-count: 2;
|
||||
column-gap: 20px;
|
||||
margin-bottom: 15px;
|
||||
li {
|
||||
position: relative;
|
||||
+ li {
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background-color: var(--chart-text-color);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: -10px;
|
||||
opacity: 0.6;
|
||||
[dir="rtl"] & {
|
||||
left: unset;
|
||||
right: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.campaign-box {
|
||||
background: linear-gradient(180deg, var(--course-light-btn) 0%, rgba(242, 243, 247, 0) 100%);
|
||||
border-radius: 5px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
}
|
||||
.social-circle {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.campaign-table {
|
||||
table {
|
||||
tr {
|
||||
&:hover {
|
||||
td {
|
||||
&:nth-child(2) {
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.border-icon {
|
||||
> div {
|
||||
border-left: 2px solid $fb-color;
|
||||
padding-left: 15px;
|
||||
[dir="rtl"] & {
|
||||
padding-left: unset;
|
||||
padding-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.facebook {
|
||||
> div {
|
||||
border-left: 2px solid $fb-color;
|
||||
[dir="rtl"] & {
|
||||
border-left: unset;
|
||||
border-right: 2px solid $fb-color;
|
||||
}
|
||||
}
|
||||
.social-circle {
|
||||
background-color: rgba($fb-color, 0.1);
|
||||
border-color: $fb-color;
|
||||
color: $fb-color;
|
||||
}
|
||||
}
|
||||
.instagram {
|
||||
> div {
|
||||
border-left: 2px solid $insta-color;
|
||||
[dir="rtl"] & {
|
||||
border-left: unset;
|
||||
border-right: 2px solid $insta-color;
|
||||
}
|
||||
}
|
||||
.social-circle {
|
||||
background-color: rgba($insta-color, 0.1);
|
||||
border-color: $insta-color;
|
||||
color: $insta-color;
|
||||
}
|
||||
}
|
||||
.pinterest {
|
||||
> div {
|
||||
border-left: 2px solid $pintrest-color;
|
||||
[dir="rtl"] & {
|
||||
border-left: unset;
|
||||
border-right: 2px solid $pintrest-color;
|
||||
}
|
||||
}
|
||||
.social-circle {
|
||||
background-color: rgba($pintrest-color, 0.1);
|
||||
border-color: $pintrest-color;
|
||||
color: $pintrest-color;
|
||||
}
|
||||
}
|
||||
.plus-btn {
|
||||
width: 24px;
|
||||
border-radius: 5px;
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--body-font-color);
|
||||
color: var(--body-font-color);
|
||||
&:hover {
|
||||
background-color: var(--body-font-color);
|
||||
color: var(--white);
|
||||
}
|
||||
}
|
||||
.twitter {
|
||||
> div {
|
||||
border-left: 2px solid $twitter-color;
|
||||
[dir="rtl"] & {
|
||||
border-left: unset;
|
||||
border-right: 2px solid $twitter-color;
|
||||
}
|
||||
}
|
||||
.social-circle {
|
||||
background-color: rgba($twitter-color, 0.1);
|
||||
border-color: $twitter-color;
|
||||
color: $twitter-color;
|
||||
}
|
||||
}
|
||||
.you-tube {
|
||||
> div {
|
||||
border-left: 2px solid $youtube-color;
|
||||
[dir="rtl"] & {
|
||||
border-left: unset;
|
||||
border-right: 2px solid $youtube-color;
|
||||
}
|
||||
}
|
||||
.social-circle {
|
||||
background-color: rgba($youtube-color, 0.1);
|
||||
border-color: $youtube-color;
|
||||
color: $youtube-color;
|
||||
}
|
||||
}
|
||||
.badge-light-primary, .badge-light-light {
|
||||
padding: 4px 12px;
|
||||
}
|
||||
tr {
|
||||
td,th {
|
||||
border-style: dashed;
|
||||
&:nth-child(5) {
|
||||
min-width: 190px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.recent-table {
|
||||
tr {
|
||||
td,th {
|
||||
&:nth-child(2) {
|
||||
min-width: 120px;
|
||||
}
|
||||
&:first-child {
|
||||
min-width: 110px;
|
||||
}
|
||||
&:nth-child(3), &:last-child {
|
||||
min-width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.view-container {
|
||||
.apexcharts-canvas {
|
||||
.apexcharts-grid-row {
|
||||
stroke-width: 15px;
|
||||
stroke: var(--white);
|
||||
}
|
||||
.apexcharts-gridlines-vertical, .apexcharts-gridlines-horizontal {
|
||||
line, react {
|
||||
stroke-width: 15px;
|
||||
stroke: var(--white);
|
||||
}
|
||||
}
|
||||
.apexcharts-point-annotations {
|
||||
circle {
|
||||
outline: 25px solid #f0effd;
|
||||
border-radius: 100%;
|
||||
@media (max-width: 480px) {
|
||||
outline-width: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,763 @@
|
||||
/**=====================
|
||||
33. Ecommerce CSS Start
|
||||
==========================**/
|
||||
|
||||
/**====== Product Start ======**/
|
||||
.toggle-data {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-block {
|
||||
ul {
|
||||
li {
|
||||
padding-top: 15px;
|
||||
opacity: 0.5;
|
||||
@media (max-width: 1500px) {
|
||||
padding-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.collection-filter-block {
|
||||
svg {
|
||||
width: 50px;
|
||||
height: 25px;
|
||||
stroke: var(--theme-deafult);
|
||||
fill: #e8e5ff;
|
||||
margin-right: 10px;
|
||||
}
|
||||
h5 {
|
||||
margin-bottom: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
p {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.media-body {
|
||||
opacity: 0.5;
|
||||
}
|
||||
li {
|
||||
&+li {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
ul.pro-services{
|
||||
li{
|
||||
svg{
|
||||
width:auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.qty-box {
|
||||
.btn {
|
||||
background-color: transparent !important;
|
||||
border-color: $light-gray !important;
|
||||
padding: 8px 12px;
|
||||
i {
|
||||
color: $dark-gray;
|
||||
}
|
||||
svg {
|
||||
width: 14px !important;
|
||||
stroke: $dark-color;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
padding: 0 4px;
|
||||
}
|
||||
.input-group {
|
||||
background-color: rgba($dark-color, 0.1);
|
||||
// width:100px;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: rgba($dark-color, 0.1);
|
||||
color: $dark-color;
|
||||
max-width: 44px;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
border: none;
|
||||
max-height: 37px;
|
||||
}
|
||||
}
|
||||
.product-social {
|
||||
li {
|
||||
a {
|
||||
color: $dark-gray;
|
||||
font-size: 15px;
|
||||
border: 1px solid $gray-60;
|
||||
border-radius: 100%;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
line-height: 2.3;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
border-color: $primary-color;
|
||||
color: $primary-color;
|
||||
background-color: rgba($primary-color, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
&:nth-child(n+2){
|
||||
margin-left:10px;
|
||||
[dir="rtl"] & {
|
||||
margin-left: unset;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-sidebar {
|
||||
.filter-section {
|
||||
.card {
|
||||
.card-header {
|
||||
padding: 16px 30px;
|
||||
border-radius: 5px;
|
||||
h6 {
|
||||
position: relative;
|
||||
.pull-right {
|
||||
i {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 0;
|
||||
font-size: 10px;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
text-align: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-wrapper {
|
||||
.product-sidebar {
|
||||
.filter-section {
|
||||
.card {
|
||||
.left-filter {
|
||||
z-index: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
transition: 0.3s;
|
||||
min-width: 320px;
|
||||
|
||||
.product-filter {
|
||||
.irs-with-grid {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-grid {
|
||||
.product-wrapper-grid {
|
||||
margin-left: 0;
|
||||
transition: 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebaron {
|
||||
.product-sidebar {
|
||||
.filter-section {
|
||||
.card {
|
||||
.left-filter {
|
||||
z-index: 3;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
top: 53px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.d-none-productlist {
|
||||
display: none;
|
||||
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.product-wrapper-grid {
|
||||
&.list-view {
|
||||
.product-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.product-img {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.product-details {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.slider-product {
|
||||
padding: 15px 0;
|
||||
border-top: 1px solid $light-color;
|
||||
border-bottom: 1px solid $light-color;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.products-total {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.grid-options {
|
||||
height: 33px;
|
||||
margin-left: 10px;
|
||||
|
||||
ul {
|
||||
li {
|
||||
a {
|
||||
position: relative;
|
||||
|
||||
.line-grid {
|
||||
position: absolute;
|
||||
width: 4px;
|
||||
height: 15px;
|
||||
top: 9px;
|
||||
}
|
||||
|
||||
.line-grid-1 {
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.line-grid-2 {
|
||||
left: 18px;
|
||||
}
|
||||
|
||||
.line-grid-3 {
|
||||
left: 36px;
|
||||
}
|
||||
|
||||
.line-grid-4 {
|
||||
left: 42px;
|
||||
}
|
||||
|
||||
.line-grid-5 {
|
||||
left: 48px;
|
||||
}
|
||||
|
||||
.line-grid-6 {
|
||||
left: 66px;
|
||||
}
|
||||
|
||||
.line-grid-7 {
|
||||
left: 72px;
|
||||
}
|
||||
|
||||
.line-grid-8 {
|
||||
left: 78px;
|
||||
}
|
||||
|
||||
.line-grid-9 {
|
||||
left: 84px;
|
||||
}
|
||||
|
||||
.line-grid-10 {
|
||||
left: 103px;
|
||||
}
|
||||
|
||||
.line-grid-11 {
|
||||
left: 109px;
|
||||
}
|
||||
|
||||
.line-grid-12 {
|
||||
left: 115px;
|
||||
}
|
||||
|
||||
.line-grid-13 {
|
||||
left: 121px;
|
||||
}
|
||||
|
||||
.line-grid-14 {
|
||||
left: 127px;
|
||||
}
|
||||
|
||||
.line-grid-15 {
|
||||
left: 133px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.square-product-setting {
|
||||
height: 36px;
|
||||
vertical-align: middle;
|
||||
|
||||
a {
|
||||
color: $theme-body-font-color;
|
||||
}
|
||||
|
||||
.icon-grid {
|
||||
padding: 7px;
|
||||
background-color: $white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 10px;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-filter {
|
||||
.banner-product {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
h6 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.color-selector {
|
||||
line-height: 0.9;
|
||||
|
||||
ul {
|
||||
li {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 1px solid #444;
|
||||
border-radius: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
&.white {
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
&.gray {
|
||||
background-color: $theme-body-sub-title-color;
|
||||
}
|
||||
|
||||
&.black {
|
||||
background-color: $black;
|
||||
}
|
||||
|
||||
&.orange {
|
||||
background-color: #ffb17a;
|
||||
}
|
||||
|
||||
&.green {
|
||||
background-color: #6fb866;
|
||||
}
|
||||
|
||||
&.pink {
|
||||
background-color: pink;
|
||||
}
|
||||
|
||||
&.yellow {
|
||||
background-color: #f2f896;
|
||||
}
|
||||
|
||||
&.blue {
|
||||
background-color: #63b4f2;
|
||||
}
|
||||
|
||||
&.red {
|
||||
background-color: #ff647f;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.new-products {
|
||||
margin-top: 20px;
|
||||
|
||||
button {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.owl-theme {
|
||||
.owl-nav {
|
||||
margin-top: 0;
|
||||
position: absolute;
|
||||
top: -46px;
|
||||
right: 0;
|
||||
|
||||
button {
|
||||
&:focus {
|
||||
outline: $transparent-color;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 20px;
|
||||
|
||||
&:focus {
|
||||
outline-color: $transparent-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.owl-nav [class*='owl-'] {
|
||||
&:hover {
|
||||
background-color: $transparent-color;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.owl-item {
|
||||
.item {
|
||||
.product-box {
|
||||
.product-details {
|
||||
padding: 25px 0;
|
||||
}
|
||||
|
||||
+.product-box {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-drpdwn-product {
|
||||
.form-control {
|
||||
border: none;
|
||||
box-shadow: 1px 5px 24px 0 rgba(68, 102, 242, 0.05);
|
||||
margin-bottom: 10px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
.feature-products {
|
||||
form {
|
||||
.form-group {
|
||||
position: relative;
|
||||
|
||||
input {
|
||||
margin-bottom: 15px;
|
||||
border: none;
|
||||
box-shadow: 1px 5px 24px 0 rgba(68, 102, 242, 0.05);
|
||||
height: 50px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
i {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 30px;
|
||||
color: $dark-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-box {
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
|
||||
.product-details {
|
||||
padding: 15px 25px;
|
||||
|
||||
> a{
|
||||
color: $theme-body-font-color;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: 0;
|
||||
margin-top: 5px;
|
||||
font-size: 20px;
|
||||
font-family: roboto;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: $theme-body-font-color;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.rating {
|
||||
i {
|
||||
font-size: 16px;
|
||||
letter-spacing: 3px;
|
||||
color: #ffa800;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
.modal-header {
|
||||
.product-box {
|
||||
.product-details {
|
||||
padding: 25px 0;
|
||||
|
||||
h6 {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-size: 22px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.product-view {
|
||||
padding: 20px 0;
|
||||
border-top: 1px dotted $semi-dark;
|
||||
border-bottom: 1px dotted $semi-dark;
|
||||
}
|
||||
|
||||
.product-size {
|
||||
margin: 20px 0;
|
||||
|
||||
ul {
|
||||
li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-qnty {
|
||||
fieldset {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.input-group {
|
||||
width: 35%;
|
||||
|
||||
.btn {
|
||||
padding: 5px 12px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: $semi-dark !important;
|
||||
border: 1px solid $semi-dark !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-close {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-img {
|
||||
position: relative;
|
||||
|
||||
.product-hover {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba($black, 0.3);
|
||||
opacity: 0;
|
||||
border-radius: 100%;
|
||||
transform: scale(0);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
ul {
|
||||
li {
|
||||
display: inline-block;
|
||||
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.08);
|
||||
padding: 10px 12px;
|
||||
background-color: $white;
|
||||
font-size: 18px;
|
||||
border-radius: 10px;
|
||||
height: 45px;
|
||||
width: 45px;
|
||||
margin: 0 3px;
|
||||
cursor: pointer;
|
||||
|
||||
i {
|
||||
color: $semi-dark;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--theme-deafult);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.btn,
|
||||
i {
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
||||
.product-hover {
|
||||
opacity: 1;
|
||||
border-radius: 0%;
|
||||
transform: scale(1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-page-main {
|
||||
padding: 30px;
|
||||
.owl-item {
|
||||
.item {
|
||||
border: 1px solid $light-color;
|
||||
border-radius: 5px;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
&.current {
|
||||
.item {
|
||||
border: 1px solid var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
.product-slider {
|
||||
margin-bottom: 20px;
|
||||
img {
|
||||
@media (min-width: 1400px) {
|
||||
height: 520px;
|
||||
object-fit: cover;
|
||||
}
|
||||
@media (min-width: 1500px) {
|
||||
height: 400px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
.product-color{
|
||||
margin-top:10px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.product-page-details {
|
||||
h4 {
|
||||
color: $theme-body-font-color;
|
||||
text-transform: uppercase;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
span {
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.br-theme-fontawesome-stars {
|
||||
.br-widget {
|
||||
|
||||
a,
|
||||
a.br-selected:after,
|
||||
a.br-active:after {
|
||||
color: #ffa800 !important;
|
||||
font: normal normal normal 14px/1 FontAwesome;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin-top: 5px;
|
||||
color: var(--theme-deafult);
|
||||
|
||||
del {
|
||||
color: rgba($dark-color, 0.4);
|
||||
padding-left: 10px;
|
||||
font-size: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.product-color {
|
||||
li {
|
||||
display: inline-block;
|
||||
border-radius: 100%;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.product-page-main {
|
||||
p {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
/**====== Product Ends ======**/
|
||||
|
||||
.payment-opt {
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
img {
|
||||
height: 20px;
|
||||
margin: 15px 15px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
33. Ecommerce CSS End
|
||||
==========================**/
|
||||
@media screen and (max-width: 1660px) and (min-width: 1200px) {
|
||||
|
||||
.owl-carousel .owl-item img {
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,311 @@
|
||||
/**=====================
|
||||
13. Email Application CSS Start
|
||||
==========================**/
|
||||
%email-mixin {
|
||||
background: transparent;
|
||||
font-size: 15px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.email-wrap {
|
||||
// margin-bottom:30px;
|
||||
.row {
|
||||
.col-xl-3 {
|
||||
&+.col-xl-3 {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
.col-xl-6 {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
.dropdown {
|
||||
.dropdown-toggle {
|
||||
background-color: rgba(115,102,255,0.08);
|
||||
color: $primary-color;
|
||||
border-radius: 10px;
|
||||
padding: 5px 10px;
|
||||
width: 100px;
|
||||
text-align: left;
|
||||
[dir="rtl"] & {
|
||||
text-align: right;
|
||||
}
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
content: "\f107";
|
||||
border: none;
|
||||
font-family: "FontAwesome";
|
||||
font-size: 18px;
|
||||
margin: 0;
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-menu {
|
||||
-webkit-box-shadow: 0 0 20px rgba(89,102,122,0.1);
|
||||
box-shadow: 0 0 20px rgba(89,102,122,0.1);
|
||||
border: none;
|
||||
padding: 0;
|
||||
.dropdown-item {
|
||||
color: #2b2b2b;
|
||||
opacity: 0.6;
|
||||
font-size: 13px;
|
||||
padding: 6px 12px;
|
||||
border-top: 1px solid #f5f5f5;
|
||||
background: $white;
|
||||
line-height: 19px;
|
||||
&:hover {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.email-app-sidebar {
|
||||
.media img {
|
||||
border: 2px solid $light-gray;
|
||||
}
|
||||
.main-menu {
|
||||
>li {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
a {
|
||||
line-height: 39px;
|
||||
text-transform: uppercase;
|
||||
border-radius: 3px;
|
||||
i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
&.active>a {
|
||||
color: $black;
|
||||
}
|
||||
&:hover {
|
||||
background-color:#f5f6f9;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul li {
|
||||
a {
|
||||
display: flex;
|
||||
padding-left: 20px;
|
||||
align-items: center;
|
||||
|
||||
> {
|
||||
.title {
|
||||
width: 100%;
|
||||
color: $dark-color;
|
||||
}
|
||||
|
||||
.badge {
|
||||
align-self: center;
|
||||
color: $dark-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.email-left-aside {
|
||||
float: left;
|
||||
width: 100%;
|
||||
|
||||
.card-body {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.email-right-aside {
|
||||
.email-body {
|
||||
.pr-0{
|
||||
@media (min-width: 1200px) {
|
||||
padding-right: 0;
|
||||
[dir="rtl"] & {
|
||||
padding-right: 12px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.pl-0{
|
||||
@media (min-width: 1200px) {
|
||||
padding-left: 0;
|
||||
[dir="rtl"] & {
|
||||
padding-left: 12px;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.inbox {
|
||||
overflow: auto;
|
||||
@media (max-width: 1199.98px) {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.media {
|
||||
padding: 20px;
|
||||
|
||||
&.active {
|
||||
background-color: lighten($light-color, 4%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radius-left {
|
||||
border-radius: 8px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-mail {
|
||||
border-radius: 2px;
|
||||
text-align: left;
|
||||
padding: 13px 15px;
|
||||
margin: 20px 0 20px;
|
||||
letter-spacing: 1px;
|
||||
line-height: 12px !important;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.media-body {
|
||||
margin-top: 5px;
|
||||
|
||||
h6 {
|
||||
margin-bottom: 2px;
|
||||
color: $theme-font-color;
|
||||
margin-top: 3px;
|
||||
|
||||
small {
|
||||
font-size: 12px;
|
||||
span {
|
||||
color: #777777;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: $theme-body-sub-title-color;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.email-top {
|
||||
padding: 20px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
line-height: 49px;
|
||||
i{
|
||||
cursor: pointer;
|
||||
}
|
||||
h5 {
|
||||
margin-bottom: 0;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.d-flex {
|
||||
padding: 13px 0;
|
||||
}
|
||||
}
|
||||
.email-wrapper {
|
||||
padding: 20px;
|
||||
hr {
|
||||
margin-top: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.d-inline-block {
|
||||
width: 100%;
|
||||
}
|
||||
h6 {
|
||||
margin-bottom: 11px;
|
||||
float: left;
|
||||
}
|
||||
.right-download {
|
||||
float: right;
|
||||
}
|
||||
p {
|
||||
&+p {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.email-content .email-top .user-emailid:after {
|
||||
content: "";
|
||||
position: relative;
|
||||
height: 20px;
|
||||
width: 1px;
|
||||
right: 0;
|
||||
top: 3px;
|
||||
z-index: 2;
|
||||
border: 1px solid $light-semi-gray;
|
||||
float: right;
|
||||
padding: 0;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.email-body {
|
||||
.attachment {
|
||||
ul {
|
||||
li {
|
||||
img {
|
||||
margin-bottom: 20px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-inline {
|
||||
.list-inline-item {
|
||||
padding-right: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.email-compose {
|
||||
.cke_contents.cke_reset {
|
||||
max-height: 178px;
|
||||
width: 100%;
|
||||
border: 1px solid $form-control-border-color;
|
||||
}
|
||||
|
||||
.email-top {
|
||||
h4 {
|
||||
padding: 11px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.compose-border {
|
||||
// margin: -1px;
|
||||
.btn-middle {
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.actions li {
|
||||
display: inline-block;
|
||||
margin-right: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
13. Email Application CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,125 @@
|
||||
/**=====================
|
||||
09. Error-page CSS Start
|
||||
==========================**/
|
||||
.error-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
text-align: center;
|
||||
&.maintenance-bg {
|
||||
background-image: url(../images/other-images/maintenance-bg.jpg);
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
background-blend-mode: overlay;
|
||||
}
|
||||
.maintenance-icons{
|
||||
li{
|
||||
i{
|
||||
color: $semi-dark;
|
||||
font-size: 50px;
|
||||
animation: rotate-effect 40s infinite linear reverse;
|
||||
}
|
||||
&:nth-child(2){
|
||||
i{
|
||||
font-size: 100px;
|
||||
margin-left: 110px;
|
||||
margin-top: -25px;
|
||||
animation: rotate-effect 40s linear infinite reverse;
|
||||
}
|
||||
}
|
||||
&:nth-child(3){
|
||||
i{
|
||||
animation: rotate-effect 30s infinite linear;
|
||||
font-size: 150px;
|
||||
margin-top: -85px;
|
||||
margin-right: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.maintenance-heading {
|
||||
margin-top: 70px;
|
||||
.headline {
|
||||
font-size: 99px;
|
||||
font-weight: 900;
|
||||
letter-spacing: 10px;
|
||||
color: var(--theme-deafult);
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
margin-top: -70px;
|
||||
}
|
||||
}
|
||||
.error-heading {
|
||||
margin-top: 115px;
|
||||
.headline {
|
||||
font-size: 285px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 1px;
|
||||
margin-top: -130px;
|
||||
}
|
||||
|
||||
}
|
||||
.sub-content {
|
||||
font-size: 18px;
|
||||
color: $theme-body-font-color;
|
||||
letter-spacing: 1px;
|
||||
font-weight: normal;
|
||||
line-height: 35px;
|
||||
z-index: 3;
|
||||
position: relative;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.btn{
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
}
|
||||
.error{
|
||||
margin: 70px 0 100px;
|
||||
color:$black;
|
||||
.error-title{
|
||||
font-size: 9.5rem;
|
||||
color:$white;
|
||||
text-shadow: 6px 6px 7px rgba(0, 0, 0, 0.32);
|
||||
}
|
||||
.line-bottom{
|
||||
width: 10%;
|
||||
height: 5px;
|
||||
background-color: $warning-color;
|
||||
border: none;
|
||||
}
|
||||
.c-white{
|
||||
color:$white;
|
||||
}
|
||||
.error-btn{
|
||||
text-align: center;
|
||||
}
|
||||
.padd{
|
||||
padding: 10px 30px 10px 30px;
|
||||
}
|
||||
.btn-back-home{
|
||||
background-color:$light-color;
|
||||
color:$black;
|
||||
|
||||
&:hover{
|
||||
background-color:$warning-color;
|
||||
color:$white;
|
||||
box-shadow: 0 20px 35px 0 rgba(0, 0, 0, 0.21);
|
||||
}
|
||||
}
|
||||
.btn-adnc-serc{
|
||||
background-color:$dark-color;
|
||||
color:$white;
|
||||
&:hover{
|
||||
background-color:$warning-color;
|
||||
color:$white;
|
||||
box-shadow: 0 20px 35px 0 rgba(0, 0, 0, 0.21);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
09. Error-page CSS Ends
|
||||
==========================**/
|
||||
|
||||
@@ -0,0 +1,347 @@
|
||||
//According settings
|
||||
/**=====================
|
||||
71. Faq CSS start
|
||||
==========================**/
|
||||
.knowledgebase-bg {
|
||||
height: 500px;
|
||||
border-radius: 15px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
}
|
||||
|
||||
.knowledgebase-search {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
left: 5%;
|
||||
|
||||
.form-inline {
|
||||
background-color: $white;
|
||||
width: 500px;
|
||||
padding: 12px 50px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #e6e6e6;
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
|
||||
::placeholder {
|
||||
color: $gray-60;
|
||||
}
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
width: 20px;
|
||||
top: 17px;
|
||||
stroke: $gray-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.faq-widgets {
|
||||
align-items: center;
|
||||
|
||||
.media-body {
|
||||
h5 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
p {
|
||||
padding-right: 20px;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 4;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.header-faq {
|
||||
h5 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.features-faq {
|
||||
&.card {
|
||||
|
||||
.card-body,
|
||||
.card-footer {
|
||||
padding: 20px 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.faq-image {
|
||||
img {
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
h6 {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-project {
|
||||
&.table td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.text-inherit {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.faq-accordion.default-according {
|
||||
margin-bottom: 30px;
|
||||
|
||||
.card {
|
||||
.btn-link {
|
||||
display: flex;
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.faq-header {
|
||||
position: relative;
|
||||
padding: 30px;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 30px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.faq-body {
|
||||
padding: 20px !important;
|
||||
}
|
||||
|
||||
.card-mb-faq {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.faq-title {
|
||||
margin: 30px 0;
|
||||
|
||||
h6 {
|
||||
color: $light-text;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.faq-form {
|
||||
position: relative;
|
||||
|
||||
.search-icon {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 9px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-btn {
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.navigation-option {
|
||||
ul {
|
||||
li {
|
||||
position: relative;
|
||||
padding: 8px 8px 8px 0;
|
||||
|
||||
&:hover {
|
||||
background-color: $light;
|
||||
}
|
||||
|
||||
a {
|
||||
padding-left: 40px;
|
||||
color: $theme-body-font-color;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
top: 11px;
|
||||
left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.updates-faq {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 2px solid var(--theme-deafult);
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20px;
|
||||
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.updates-bottom-time {
|
||||
p {
|
||||
margin-bottom: 2px;
|
||||
|
||||
+p {
|
||||
color: $light-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.updates-faq-main {
|
||||
margin-bottom: 20px;
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1399.98px) {
|
||||
.faq-widgets {
|
||||
svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1199px) {
|
||||
.faq-accordion {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 991px) {
|
||||
.faq-accordion.default-according {
|
||||
.card {
|
||||
.faq-header {
|
||||
padding: 20px !important;
|
||||
|
||||
svg {
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-option {
|
||||
ul {
|
||||
li {
|
||||
padding: 10px 10px 10px 0;
|
||||
|
||||
a {
|
||||
svg {
|
||||
top: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.xs-mt-search {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 575px) {
|
||||
.xs-mt-search {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.faq-widgets {
|
||||
svg {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.faq-title {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.header-faq {
|
||||
margin-bottom: 15px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.faq-accordion {
|
||||
margin-bottom: 0px;
|
||||
|
||||
.faq-header {
|
||||
padding: 15px !important;
|
||||
|
||||
.pull-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
svg {
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-btn,
|
||||
.updates-faq-main {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
71. Faq CSS end
|
||||
==========================**/
|
||||
@@ -0,0 +1,298 @@
|
||||
/**=====================
|
||||
File Manager
|
||||
==========================**/
|
||||
|
||||
.file-sidebar,
|
||||
.file-content {
|
||||
.card {
|
||||
|
||||
.card-body,
|
||||
.card-header {
|
||||
padding: 20px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-sidebar {
|
||||
ul {
|
||||
li {
|
||||
&+li {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.btn-light {
|
||||
&:hover {
|
||||
color: var(--theme-deafult) !important;
|
||||
|
||||
svg {
|
||||
stroke: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 15px;
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-plan {
|
||||
border: 1px solid $light-gray;
|
||||
border-radius: 5px;
|
||||
margin-top: 10px;
|
||||
padding: 15px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
h6 {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
margin-bottom: 2px;
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 5px;
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.bg-img {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
opacity: 0.1;
|
||||
transform: rotate(-45deg);
|
||||
right: -40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-manager {
|
||||
>h6 {
|
||||
opacity: 0.6;
|
||||
font-weight: 400 !important;
|
||||
font-size: 15px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.files {
|
||||
.file-box {
|
||||
$show-numbers: true;
|
||||
|
||||
@if $show-numbers {
|
||||
@for $i from 1 through 15 {
|
||||
&:nth-child(#{$i}) {
|
||||
animation-fill-mode: both;
|
||||
animation: fadeIncustom .5s linear #{$i}00000ms;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
h6 {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
opacity: 0.9;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.files,
|
||||
.folder {
|
||||
h6 {
|
||||
opacity: 0.9;
|
||||
font-weight: 500 !important;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.file-content {
|
||||
.ellips {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
right: 30px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.form-inline {
|
||||
border: 1px solid #f4f4f4;
|
||||
border-radius: 5px;
|
||||
padding: 0 20px;
|
||||
|
||||
i {
|
||||
padding-right: 10px;
|
||||
color: $dark-gray;
|
||||
line-height: 3;
|
||||
}
|
||||
|
||||
input {
|
||||
&::-webkit-input-placeholder {
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-form {
|
||||
input {
|
||||
padding: 5px 10px 5px 70px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
&:before {
|
||||
left: 82px;
|
||||
top: 37px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
top: 39px;
|
||||
left: 53px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
svg {
|
||||
height: 15px;
|
||||
margin-right: 2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.folder {
|
||||
.folder-box {
|
||||
border: 1px solid #f1f1f1;
|
||||
border-radius: 5px;
|
||||
padding: 15px;
|
||||
background-color: #f6f7fb;
|
||||
width: calc(25% - 15px);
|
||||
display: inline-block;
|
||||
|
||||
$show-numbers: true;
|
||||
|
||||
@if $show-numbers {
|
||||
@for $i from 1 through 15 {
|
||||
&:nth-child(#{$i}) {
|
||||
animation-fill-mode: both;
|
||||
animation: fadeIncustom .5s linear #{$i}00000ms;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.files {
|
||||
.file-box {
|
||||
border: 1px solid #f1f1f1;
|
||||
border-radius: 5px;
|
||||
padding: 15px;
|
||||
background-color: #f6f7fb;
|
||||
width: calc(25% - 15px);
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
||||
.file-top {
|
||||
height: 100px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ececec;
|
||||
border-radius: 5px;
|
||||
font-size: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1440px) {
|
||||
.file-content .folder .folder-box .media {
|
||||
display: block;
|
||||
|
||||
.media-body {
|
||||
margin-left: 0 !important;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1366px) {
|
||||
.file-content .files {
|
||||
margin-bottom: -10px;
|
||||
|
||||
.file-box {
|
||||
width: calc(50% - 15px);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.file-content {
|
||||
.folder {
|
||||
margin-bottom: -10px;
|
||||
|
||||
.folder-box {
|
||||
width: calc(50% - 15px);
|
||||
margin-bottom: 10px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.media {
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
.media-body {
|
||||
margin-top: 20px;
|
||||
text-align: center !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 575px) {
|
||||
|
||||
.file-content .folder .folder-box,
|
||||
.file-content .files .file-box {
|
||||
width: calc(100%);
|
||||
}
|
||||
|
||||
.file-content {
|
||||
.btn-outline-primary {
|
||||
// margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
File Manager
|
||||
==========================**/
|
||||
@@ -0,0 +1,425 @@
|
||||
/**=====================
|
||||
45. Gallery CSS Start
|
||||
==========================**/
|
||||
.profile-img-style, .scroll-bar-wrap {
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.gallery{
|
||||
margin-bottom: -30px;
|
||||
> a{
|
||||
margin-bottom: 30px;
|
||||
&:before{
|
||||
content: "\edee";
|
||||
font-family: $font-ICO;
|
||||
position: absolute;
|
||||
height: calc(100% - 10px);
|
||||
left: 20px;
|
||||
width: calc(100% - 40px);
|
||||
background-color: rgba(255, 255, 255, 0.27);
|
||||
top: 5px;
|
||||
transform: scale(0);
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 30px;
|
||||
color: $black;
|
||||
}
|
||||
&:hover{
|
||||
&:before{
|
||||
transform: scale(1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.img-thumbnail {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.gallery-with-description{
|
||||
margin-bottom: -30px;
|
||||
a{
|
||||
> div{
|
||||
padding: 10px;
|
||||
border: 1px solid lighten($dark-color , 70%);
|
||||
margin-bottom: 30px;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
&:hover{
|
||||
text-decoration: none !important;
|
||||
}
|
||||
}
|
||||
h4{
|
||||
color: $dark-color;
|
||||
margin-top: 15px;
|
||||
font-size:18px;
|
||||
}
|
||||
p{
|
||||
color: lighten($dark-gray , 10%);
|
||||
}
|
||||
}
|
||||
.lg-backdrop{
|
||||
background-color: $white;
|
||||
}
|
||||
.lg-outer{
|
||||
.lg-actions {
|
||||
.lg-next,.lg-prev{
|
||||
background-color: rgb(255, 255, 255);
|
||||
border: 1px solid $light-semi-gray;
|
||||
&:hover{
|
||||
color: $dark-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.lg-toolbar {
|
||||
background-color: rgba(255, 255, 255, 0.45);
|
||||
border-bottom: 1px solid $dark-color;
|
||||
.lg-icon:hover{
|
||||
color: $dark-color;
|
||||
}
|
||||
}
|
||||
#lg-counter {
|
||||
color: $dark-color;
|
||||
}
|
||||
.lg-sub-html{
|
||||
background-color: rgba(255, 255, 255, 0.45);
|
||||
h4{
|
||||
font-size: inherit;
|
||||
color: $dark-color;
|
||||
}
|
||||
p{
|
||||
color: $dark-color;
|
||||
}
|
||||
}
|
||||
.lg-thumb-outer{
|
||||
background-color: $light-gray;
|
||||
}
|
||||
.lg-thumb-item{
|
||||
padding: 4px;
|
||||
border: 1px solid $light-semi-gray;
|
||||
border-radius: 0;
|
||||
.active,&:hover{
|
||||
border-color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
.gallery{
|
||||
a{
|
||||
&:before,&:after{
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
.img-hover{
|
||||
> div{
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.hover-1{
|
||||
img {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
-webkit-transition: .3s ease-in-out;
|
||||
transition: .3s ease-in-out;
|
||||
&:hover{
|
||||
-webkit-transform: scale(1.2);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover-2{
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
-webkit-transition: .3s ease-in-out;
|
||||
transition: .3s ease-in-out;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
&:hover{
|
||||
img{
|
||||
transform: translateX(40px) scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover-3{
|
||||
img {
|
||||
-webkit-transform: scale(1.2);
|
||||
transform: scale(1.2);
|
||||
-webkit-transition: .3s ease-in-out;
|
||||
transition: .3s ease-in-out;
|
||||
}
|
||||
&:hover{
|
||||
img{
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover-4{
|
||||
img {
|
||||
-webkit-transform: scale(1.5);
|
||||
transform: scale(1.5);
|
||||
-webkit-transition: .3s ease-in-out;
|
||||
transition: .3s ease-in-out;
|
||||
}
|
||||
&:hover{
|
||||
img{
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover-5{
|
||||
img {
|
||||
margin-left: 30px;
|
||||
-webkit-transform: scale(1.3);
|
||||
transform: scale(1.3);
|
||||
-webkit-transition: .3s ease-in-out;
|
||||
transition: .3s ease-in-out;
|
||||
}
|
||||
&:hover{
|
||||
img{
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover-6{
|
||||
img {
|
||||
-webkit-transform: rotate(15deg) scale(1.4);
|
||||
transform: rotate(15deg) scale(1.4);
|
||||
-webkit-transition: .3s ease-in-out;
|
||||
transition: .3s ease-in-out;
|
||||
}
|
||||
&:hover{
|
||||
img{
|
||||
-webkit-transform: rotate(0) scale(1);
|
||||
transform: rotate(0) scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover-7{
|
||||
img {
|
||||
-webkit-filter: blur(3px);
|
||||
filter: blur(3px);
|
||||
-webkit-transition: .3s ease-in-out;
|
||||
transition: .3s ease-in-out;
|
||||
}
|
||||
&:hover{
|
||||
img{
|
||||
-webkit-filter: blur(0);
|
||||
filter: blur(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hover-8{
|
||||
img {
|
||||
-webkit-filter: grayscale(100%);
|
||||
filter: grayscale(100%);
|
||||
-webkit-transition: .3s ease-in-out;
|
||||
transition: .3s ease-in-out;
|
||||
}
|
||||
&:hover{
|
||||
img{
|
||||
-webkit-filter: grayscale(0);
|
||||
filter: grayscale(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hover-9{
|
||||
img {
|
||||
-webkit-filter: sepia(100%);
|
||||
filter: sepia(100%);
|
||||
-webkit-transition: .3s ease-in-out;
|
||||
transition: .3s ease-in-out;
|
||||
}
|
||||
&:hover{
|
||||
img{
|
||||
-webkit-filter: sepia(0);
|
||||
filter: sepia(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover-10{
|
||||
img {
|
||||
-webkit-filter: grayscale(0) blur(0);
|
||||
filter: grayscale(0) blur(0);
|
||||
-webkit-transition: .3s ease-in-out;
|
||||
transition: .3s ease-in-out;
|
||||
}
|
||||
&:hover{
|
||||
img{
|
||||
-webkit-filter: grayscale(100%) blur(3px);
|
||||
filter: grayscale(100%) blur(3px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover-11{
|
||||
img {
|
||||
opacity: 1;
|
||||
-webkit-transition: .3s ease-in-out;
|
||||
transition: .3s ease-in-out;
|
||||
}
|
||||
&:hover{
|
||||
img{
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes flash {
|
||||
0% {
|
||||
opacity: .4;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes flash {
|
||||
0% {
|
||||
opacity: .4;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.hover-13{
|
||||
&:hover{
|
||||
img{
|
||||
opacity: 1;
|
||||
-webkit-animation: flash 1.5s;
|
||||
animation: flash 1.5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes shine {
|
||||
100% {
|
||||
left: 125%;
|
||||
}
|
||||
}
|
||||
@keyframes shine {
|
||||
100% {
|
||||
left: 125%;
|
||||
}
|
||||
}
|
||||
.hover-14{
|
||||
|
||||
div{
|
||||
position: relative;
|
||||
&:before{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -75%;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
content: '';
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
|
||||
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
|
||||
-webkit-transform: skewX(-25deg);
|
||||
transform: skewX(-25deg);
|
||||
}
|
||||
&:hover{
|
||||
&:before{
|
||||
-webkit-animation: shine .75s;
|
||||
animation: shine .75s;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover-15{
|
||||
div{
|
||||
position: relative;
|
||||
&:before{
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: rgba(255,255,255,.2);
|
||||
border-radius: 100%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
&:hover{
|
||||
&:before{
|
||||
-webkit-animation: circle .75s;
|
||||
animation: circle .75s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes circle {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
40% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes circle {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
40% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
&:after, &:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.grid {
|
||||
position: relative;
|
||||
}
|
||||
/* clear fix */
|
||||
.grid:after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
/* ---- .grid-item ---- */
|
||||
.grid-item {
|
||||
img{
|
||||
max-width: 100%;
|
||||
padding: 0.25rem;
|
||||
background-color: $white;
|
||||
border: 1px solid #dee2e6;
|
||||
}
|
||||
}
|
||||
.gallery-with-description {
|
||||
.grid-item {
|
||||
img {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
45. Gallery CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,54 @@
|
||||
/**=====================
|
||||
15. Helper CSS start
|
||||
==========================**/
|
||||
|
||||
.border-wrapper {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.helper-box {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 25%;
|
||||
|
||||
&.helper-text {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
|
||||
.helper-radius {
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.fill-wrapper {
|
||||
background-color: $light-color;
|
||||
}
|
||||
|
||||
.gradient-border {
|
||||
display: flex;
|
||||
gap: 22px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
gap: calc(13px + (22 - 13) * ((100vw - 320px) / (1200 - 320)));
|
||||
}
|
||||
}
|
||||
|
||||
.radius-wrapper {
|
||||
background-color: $light-semi-gray;
|
||||
}
|
||||
|
||||
.font-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
/**=====================
|
||||
15. Helper CSS end
|
||||
==========================**/
|
||||
@@ -0,0 +1,55 @@
|
||||
/**=====================
|
||||
74. internationalization css start
|
||||
==========================**/
|
||||
.hdg_main{
|
||||
position: relative;
|
||||
}
|
||||
.main {
|
||||
.langChoice{
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
top: 31px;
|
||||
padding: 10px 12px;
|
||||
background-color: $transparent-color;
|
||||
}
|
||||
}
|
||||
// responsive css
|
||||
@media (max-width: 991px) {
|
||||
.main{
|
||||
.langChoice {
|
||||
right: 20px;
|
||||
top: 11px;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 575px) {
|
||||
.main {
|
||||
.langChoice {
|
||||
top: 14px;
|
||||
padding: 4px 7px;
|
||||
}
|
||||
}
|
||||
.language-xs{
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 360px) {
|
||||
.language-header{
|
||||
padding-bottom: 60px !important;
|
||||
}
|
||||
.main {
|
||||
.langChoice {
|
||||
left: 0;
|
||||
margin: 0 auto;
|
||||
top: 50px;
|
||||
width: 30%;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
74. internationalization CSS end
|
||||
==========================**/
|
||||
@@ -0,0 +1,282 @@
|
||||
/**=====================
|
||||
72. Job CSS start
|
||||
==========================**/
|
||||
.filter-cards-view {
|
||||
.job-filter {
|
||||
&:first-child {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-animated {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.location-checkbox {
|
||||
span {
|
||||
color: $light-text;
|
||||
padding-left: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.job-accordion {
|
||||
.card {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.btn-block {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.job-search {
|
||||
p {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.media {
|
||||
.media-body {
|
||||
h6 {
|
||||
margin-bottom: 3px;
|
||||
|
||||
span {
|
||||
font-size: 13px;
|
||||
color: $light-text;
|
||||
font-weight: normal;
|
||||
|
||||
&.badge {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
color: $light-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.job-description {
|
||||
margin-top: 30px;
|
||||
|
||||
h6 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
list-style-position: inside;
|
||||
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme-form {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.row {
|
||||
div[class^="col-"] {
|
||||
+div[class^="col-"] {
|
||||
.select2-container {
|
||||
margin-top: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.job-select2 {
|
||||
~.select2-container {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group {
|
||||
.datepicker-here {
|
||||
font-size: 14px;
|
||||
border: 1px solid $light-semi-gray;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container {
|
||||
.select2-selection--single {
|
||||
border-radius: 0.25rem !important;
|
||||
border-color: $light-semi-gray;
|
||||
height: 47px !important;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.job-pagination {
|
||||
margin-bottom: 30px;
|
||||
|
||||
nav {
|
||||
ul {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1366px) {
|
||||
.xl-mt-job {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 991px) {
|
||||
.filter-cards-view {
|
||||
padding: 20px !important;
|
||||
|
||||
.job-filter {
|
||||
&:first-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-animated {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.job-accordion {
|
||||
.animate-chk {
|
||||
padding: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.job-search {
|
||||
p {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 575px) {
|
||||
.filter-cards-view {
|
||||
padding: 15px !important;
|
||||
|
||||
.job-filter {
|
||||
&:first-child {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-animated {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.job-accordion {
|
||||
.animate-chk {
|
||||
padding: 15px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.job-search {
|
||||
p {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.media {
|
||||
display: block;
|
||||
text-align: center;
|
||||
|
||||
.media-body {
|
||||
h6 {
|
||||
.pull-right {
|
||||
float: none;
|
||||
margin-top: 3px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
span {
|
||||
+span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.m-r-20 {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.job-description {
|
||||
margin-top: 15px;
|
||||
|
||||
.theme-form {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
.row {
|
||||
div[class^="col-"] {
|
||||
+div[class^="col-"] {
|
||||
.select2-container {
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.xs-mt-period {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.job-pagination {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.xl-mt-job {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 360px) {
|
||||
.job-search {
|
||||
.job-description {
|
||||
.btn {
|
||||
padding: 6px 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
72. Job CSS end
|
||||
==========================**/
|
||||
@@ -0,0 +1,60 @@
|
||||
/**=====================
|
||||
31. JS datagrid CSS Start
|
||||
==========================**/
|
||||
.jsgrid{
|
||||
.jsgrid-grid-body{
|
||||
.jsgrid-cell{
|
||||
padding: 0.75rem;
|
||||
}
|
||||
}
|
||||
.jsgrid-pager-container{
|
||||
text-align: right;
|
||||
}
|
||||
.jsgrid-pager{
|
||||
padding: 0;
|
||||
margin-top: 20px;
|
||||
.jsgrid-pager-nav-inactive-button{
|
||||
margin-right: -5px;
|
||||
&:first-child{
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
}
|
||||
.jsgrid-pager-page{
|
||||
&~.jsgrid-pager-nav-button{
|
||||
margin-left: -5px;
|
||||
&:last-child{
|
||||
border-radius:0 5px 5px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
[class*="jsgrid-pager"]{
|
||||
display: inline-block;
|
||||
min-width: 1.5em;
|
||||
padding: 0.5em 1em;
|
||||
border: 1px solid $light-color;
|
||||
}
|
||||
.jsgrid-pager-page{
|
||||
a{
|
||||
color: $dark-color;
|
||||
}
|
||||
}
|
||||
.jsgrid-pager-current-page{
|
||||
color: $dark-color;
|
||||
}
|
||||
}
|
||||
.jsgrid-selected-row{
|
||||
>.jsgrid-cell{
|
||||
background: $light-color;
|
||||
border-color: $auth-bg-color;
|
||||
}
|
||||
}
|
||||
.jsgrid-header-row{
|
||||
> .jsgrid-header-cell{
|
||||
padding: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
31. JS datagrid CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,201 @@
|
||||
/**=====================
|
||||
61. base_inputs CSS start
|
||||
==========================**/
|
||||
.jkanban-container {
|
||||
.btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.note {
|
||||
a {
|
||||
display: contents;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kanban-board-header {
|
||||
height: auto;
|
||||
width: auto;
|
||||
line-height: unset;
|
||||
background: $body-color;
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
||||
&.bg-info {
|
||||
&~.kanban-drag {
|
||||
background-color: rgba($info-color, 0.3) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.bg-warning {
|
||||
&~.kanban-drag {
|
||||
background-color: rgba($warning-color, 0.3) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.bg-success {
|
||||
&~.kanban-drag {
|
||||
background-color: rgba($success-color, 0.3) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kanban-container {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.kanban-board {
|
||||
margin-bottom: 30px;
|
||||
transition: all 0.3s ease;
|
||||
letter-spacing: 0.5px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 1px 5px 24px 0 rgba(68, 102, 242, 0.05);
|
||||
overflow: hidden;
|
||||
width: calc(100% / 3 - 30px) !important;
|
||||
.kanban-drag {
|
||||
background: $body-color;
|
||||
}
|
||||
}
|
||||
|
||||
.kanban-item {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
margin-bottom: 20px;
|
||||
|
||||
p {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.list {
|
||||
display: inline-block;
|
||||
opacity: 0.4;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
|
||||
i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.kanban-box {
|
||||
border: 1px solid #efefef;
|
||||
border-radius: 5px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
display: block;
|
||||
color: inherit;
|
||||
background-color: $white;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&+.kanban-box {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 15px;
|
||||
margin-top: 5px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
display: inline-block;
|
||||
right: 10px;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
|
||||
.dropdown-item {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
padding: 5px 10px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.d-flex {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
.customers ul li+li {
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 11px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1199px) {
|
||||
.jkanban-container .btn {
|
||||
margin-bottom: 10px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.kanban-container {
|
||||
.kanban-board {
|
||||
width: 320px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
|
||||
.kanban-board .kanban-drag,
|
||||
.kanban-container .kanban-item .kanban-box {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.kanban-container .kanban-board {
|
||||
margin-left: 10px !important;
|
||||
margin-right: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.jkanban-container {
|
||||
.card-body {
|
||||
padding: 20px 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.kanban-board .kanban-drag,
|
||||
.kanban-container .kanban-item .kanban-box {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.kanban-container .kanban-board {
|
||||
width: 270px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
61. base_inputs CSS ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,100 @@
|
||||
/**=====================
|
||||
73. knowledgebase CSS start
|
||||
==========================**/
|
||||
.browse{
|
||||
.browse-articles{
|
||||
span{
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
&:nth-child(2){
|
||||
padding-left: 20px;
|
||||
[dir="rtl"] & {
|
||||
padding-left: unset;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
svg{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 10px;
|
||||
vertical-align: text-top;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 3px;
|
||||
[dir="rtl"] & {
|
||||
left: unset;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
h6{
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 0px;
|
||||
border-bottom: 1px solid $light;
|
||||
padding-left: 25px;
|
||||
[dir="rtl"] & {
|
||||
padding-left: unset;
|
||||
padding-right: 25px;
|
||||
}
|
||||
span{
|
||||
svg{
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: text-top;
|
||||
top: 0;
|
||||
left: -30px;
|
||||
[dir="rtl"] & {
|
||||
left: unset;
|
||||
right: -30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
ul{
|
||||
li{
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
a{
|
||||
color: $theme-body-font-color;
|
||||
}
|
||||
&:hover{
|
||||
background-color: $light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1366px){
|
||||
.browse{
|
||||
div[class^="col-"]{
|
||||
&:nth-child(3){
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 360px){
|
||||
.browse{
|
||||
.browse-articles{
|
||||
ul{
|
||||
li{
|
||||
a{
|
||||
span{
|
||||
&:nth-child(2){
|
||||
width: 158px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
73. knowledgebase CSS end
|
||||
==========================**/
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,100 @@
|
||||
|
||||
/**=====================
|
||||
76. Language CSS start
|
||||
==========================**/
|
||||
.current_lang {
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
overflow: hidden;
|
||||
}
|
||||
.lang {
|
||||
&.selected {
|
||||
display: none;
|
||||
}
|
||||
span.lang-txt {
|
||||
display: inline-flex;
|
||||
margin-left: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
span {
|
||||
span {
|
||||
color: #999;
|
||||
font-weight: 400;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*more lang*/
|
||||
|
||||
.more_lang {
|
||||
transform: translateY(-20px);
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
transition: all 0.3s cubic-bezier(0.25, 1.15, 0.35, 1.15);
|
||||
}
|
||||
.translate_wrapper.active .more_lang {
|
||||
display: block;
|
||||
position: absolute;
|
||||
background-color: $white;
|
||||
top: 47px;
|
||||
right: 0;
|
||||
box-shadow: 0 0 20px rgba(89,102,122,0.1);
|
||||
&:before{
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-bottom: 7px solid #fff;
|
||||
content: "";
|
||||
top: -7px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
z-index: 2;
|
||||
}
|
||||
&:after{
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-bottom: 7px solid #bdc2c5;
|
||||
content: "";
|
||||
top: -7px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.more_lang {
|
||||
&.active {
|
||||
opacity: 1;
|
||||
transform: translateY(-0px);
|
||||
}
|
||||
.lang{
|
||||
padding: 10px 15px;
|
||||
display: flex;
|
||||
&:hover {
|
||||
background: var(--theme-deafult);
|
||||
color: $white;
|
||||
span {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.translate_wrapper {
|
||||
&.active {
|
||||
.more_lang{
|
||||
.lang {
|
||||
border-bottom: 1px solid #eaeaea;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
76. Language CSS end
|
||||
==========================**/
|
||||
@@ -0,0 +1,95 @@
|
||||
/**=====================
|
||||
75. Learning CSS start
|
||||
==========================**/
|
||||
.learning-header {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.categories {
|
||||
padding: 30px 0;
|
||||
|
||||
.learning-header {
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
ul {
|
||||
li {
|
||||
padding: 10px 15px;
|
||||
|
||||
a {
|
||||
color: $theme-body-font-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $light-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upcoming-course {
|
||||
.media {
|
||||
+.media {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.job-accordion {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) and (max-width: 1366px) {
|
||||
.learning-comment {
|
||||
margin-left: -14px !important;
|
||||
float: left !important;
|
||||
}
|
||||
|
||||
.blog-box {
|
||||
.blog-details {
|
||||
.blog-social {
|
||||
li {
|
||||
&:first-child {
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
+li {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 991px) {
|
||||
.categories {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.upcoming-course {
|
||||
.media {
|
||||
+.media {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 575px) {
|
||||
.categories {
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.upcoming-course {
|
||||
.media {
|
||||
+.media {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
75. Learning CSS end
|
||||
==========================**/
|
||||
@@ -0,0 +1,152 @@
|
||||
/**=====================
|
||||
25. Authentication CSS Start
|
||||
==========================**/
|
||||
|
||||
.login-card {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
background: url('../images/login/login_bg.jpg');
|
||||
background-position: center;
|
||||
padding: 30px 12px;
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-showcase {
|
||||
.btn {
|
||||
line-height: 1;
|
||||
padding: 10px 15px;
|
||||
margin: 0;
|
||||
|
||||
&+.btn {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 16px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-main {
|
||||
width: 450px;
|
||||
padding: 40px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 37px rgba(8, 21, 66, 0.05);
|
||||
margin: 0 auto;
|
||||
background-color: $white;
|
||||
|
||||
.theme-form {
|
||||
h4 {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 15px;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
|
||||
.checkbox label::before {
|
||||
background-color: $card-body-color;
|
||||
border: 1px solid #dfdfdf;
|
||||
}
|
||||
|
||||
.or {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 65%;
|
||||
height: 2px;
|
||||
background-color: #f3f3ff;
|
||||
top: 9px;
|
||||
z-index: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: #f3f3ff;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: $light-text;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
border: 1px solid lighten($semi-dark, 35%);
|
||||
box-shadow: none !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 25px;
|
||||
font-size: 14px;
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.link {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.show-hide {
|
||||
position: absolute;
|
||||
top: 52px;
|
||||
right: 20px;
|
||||
transform: translateY(-50%);
|
||||
|
||||
span {
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: var(--theme-deafult);
|
||||
|
||||
&.show {
|
||||
&:before {
|
||||
content: "show";
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "hide";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.needs-validation {
|
||||
.invalid-feedback {
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.show-hide {
|
||||
right: 30px;
|
||||
}
|
||||
|
||||
.invalid-tooltip {
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
25. Authentication CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,89 @@
|
||||
/**=====================
|
||||
19. Mega option CSS Start
|
||||
==========================**/
|
||||
.mega-inline{
|
||||
margin-bottom: -30px;
|
||||
display: flex;
|
||||
.card{
|
||||
border: 1px solid #f3f3f3;
|
||||
box-shadow: $card-box-shadow;
|
||||
}
|
||||
.mega-title-badge{
|
||||
display:table;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.media{
|
||||
.radio{
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mega-vertical{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.card{
|
||||
box-shadow: $card-box-shadow;
|
||||
}
|
||||
.mega-title-badge{
|
||||
display:table;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.media{
|
||||
.radio{
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mega-title{
|
||||
font-weight: 600;
|
||||
}
|
||||
.mega-horizontal{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.card{
|
||||
border: 1px solid #f3f3f3;
|
||||
box-shadow: $card-box-shadow;
|
||||
}
|
||||
.mega-title-badge{
|
||||
display:table;
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.media{
|
||||
.radio{
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.plain-style{
|
||||
.card{
|
||||
box-shadow: none;
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
.border-style{
|
||||
.card{
|
||||
box-shadow: none;
|
||||
border: 1px solid $light-gray !important;
|
||||
}
|
||||
}
|
||||
.offer-style{
|
||||
.card{
|
||||
box-shadow: none;
|
||||
border: 1px dashed $light-gray !important;
|
||||
}
|
||||
}
|
||||
.rating-star-wrapper{
|
||||
color: #797979;
|
||||
}
|
||||
/**=====================
|
||||
19. Mega option CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,166 @@
|
||||
/**=====================
|
||||
76. Order History CSS start
|
||||
==========================**/
|
||||
.prooduct-details-box {
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.media {
|
||||
border: 1px solid $light-background;
|
||||
border-radius: 10px;
|
||||
padding: 15px 0;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rating {
|
||||
color: #ffaf45;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
a {
|
||||
color: gray;
|
||||
}
|
||||
h6 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.order-history {
|
||||
.input-group {
|
||||
text-align: right;
|
||||
max-width: 300px;
|
||||
}
|
||||
table {
|
||||
th,
|
||||
td {
|
||||
text-align: center;
|
||||
}
|
||||
thead {
|
||||
tr {
|
||||
th {
|
||||
vertical-align: middle;
|
||||
border-top: none;
|
||||
background-color: $body-color;
|
||||
border: 1px solid $light-gray;
|
||||
padding: 1.25rem;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qty-box {
|
||||
width:120px;
|
||||
margin: 0 auto;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
input {
|
||||
width: 44px;
|
||||
max-width: 44px;
|
||||
background-color:transparent;
|
||||
border: none !important;
|
||||
}
|
||||
.input-group{
|
||||
justify-content: space-between;
|
||||
align-items:center;
|
||||
background-color:transparent;
|
||||
border-radius:5px;
|
||||
border: 1px solid $light-gray;
|
||||
overflow:hidden;
|
||||
}
|
||||
.btn{
|
||||
background-color:transparent;
|
||||
border: none;
|
||||
&.bootstrap-touchspin-down {
|
||||
border-right: 1px solid;
|
||||
[dir="rtl"] & {
|
||||
border-right: unset;
|
||||
border-left: 1px solid;
|
||||
}
|
||||
}
|
||||
&.bootstrap-touchspin-up {
|
||||
border-left: 1px solid;
|
||||
[dir="rtl"] & {
|
||||
border-left: unset;
|
||||
border-right: 1px solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
td {
|
||||
vertical-align: middle;
|
||||
|
||||
.product-name {
|
||||
a {
|
||||
font-size: 15px;
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.order-process {
|
||||
font-size: 13px;
|
||||
padding-left: 15px;
|
||||
|
||||
.order-process-circle {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 100%;
|
||||
background-color: $dark-gray;
|
||||
left: -15px;
|
||||
top: 4px;
|
||||
}
|
||||
|
||||
&.shipped-order {
|
||||
&:before {
|
||||
background-color: $success-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.cancel-order {
|
||||
&:before {
|
||||
background-color: $danger-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1199px) {
|
||||
.order-history {
|
||||
table {
|
||||
width: 900px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**=====================
|
||||
76. Order History CSS end
|
||||
==========================**/
|
||||
@@ -0,0 +1,40 @@
|
||||
/**=====================
|
||||
32. pagination CSS Start
|
||||
==========================**/
|
||||
/*test Nav bar color */
|
||||
$page-name:theme,
|
||||
primary,
|
||||
secondary,
|
||||
success,
|
||||
danger,
|
||||
info,
|
||||
dark,
|
||||
warning;
|
||||
$page-color:var(--theme-deafult),
|
||||
var(--theme-deafult),
|
||||
$secondary-color,
|
||||
$success-color,
|
||||
$danger-color,
|
||||
$info-color,
|
||||
$dark-color,
|
||||
$warning-color;
|
||||
@each $var in $page-name {
|
||||
$i: index($page-name, $var);
|
||||
.pagination-#{$var}{
|
||||
.page-item{
|
||||
.page-link{
|
||||
color: nth($page-color, $i) !important;
|
||||
}
|
||||
&.active{
|
||||
.page-link{
|
||||
color: $white !important;
|
||||
background-color: nth($page-color, $i) !important;
|
||||
border-color: nth($page-color, $i);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
32. pagination CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,192 @@
|
||||
/**=====================
|
||||
34. Pricing CSS Start
|
||||
==========================**/
|
||||
.pricing-simple {
|
||||
box-shadow: 0 0 10px 5px rgba(68, 102, 242, 0.05);
|
||||
margin-bottom: 0 !important;
|
||||
.card-body {
|
||||
border-bottom: none;
|
||||
h3 {
|
||||
position: relative;
|
||||
margin-bottom: 38px;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 80px;
|
||||
height: 1px;
|
||||
margin: 0 auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -10px;
|
||||
background-color: $light-text;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
line-height: 0.9;
|
||||
margin-bottom: 30px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pricingtable {
|
||||
text-align: center;
|
||||
padding-top:45px;
|
||||
padding-bottom:45px;
|
||||
border-radius: 10px;
|
||||
box-shadow: $card-hover-box-shadow;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height:100%;
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
background-color: var(--theme-deafult);
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
right: -213px;
|
||||
z-index: -1;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.pricingtable {
|
||||
&:after {
|
||||
background-color: var(--theme-deafult);
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
top: auto;
|
||||
bottom: -210px;
|
||||
right: auto;
|
||||
left: -160px;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.title {
|
||||
text-transform:uppercase;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
|
||||
.price-value {
|
||||
color: $white;
|
||||
background-color: var(--theme-deafult);
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
padding: 45px 0 0;
|
||||
margin: 0 auto 25px;
|
||||
border-radius: 50%;
|
||||
.duration {
|
||||
margin: 0 0 0 -5px;
|
||||
}
|
||||
.amount {
|
||||
font-size: 58px;
|
||||
font-weight: 700;
|
||||
line-height: 45px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.currency {
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-content {
|
||||
margin: 0 0 25px;
|
||||
display: inline-block;
|
||||
li {
|
||||
font-weight: 500;
|
||||
text-align: left;
|
||||
margin: 0 0 20px;
|
||||
position: relative;
|
||||
padding-left: 30px;
|
||||
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "\f00c";
|
||||
color: var(--theme-deafult);
|
||||
font-family: FontAwesome;
|
||||
text-align: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width:1470px){
|
||||
.pricing-block{
|
||||
>div{
|
||||
flex:50%;
|
||||
&:nth-child(n+3){
|
||||
margin-top:30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 991px) {
|
||||
.pricing-simple {
|
||||
.card-body {
|
||||
h1 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
h3 {
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-block{
|
||||
>div{
|
||||
&:nth-child(n+2){
|
||||
margin-top:20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 575px) {
|
||||
.pricing-simple {
|
||||
.card-body {
|
||||
h1 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pricing-block {
|
||||
> div{
|
||||
flex:100%;
|
||||
}
|
||||
}
|
||||
|
||||
.pricingtable{
|
||||
padding-top:30px;
|
||||
padding-bottom:30px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
/**=====================
|
||||
34. Pricing CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,117 @@
|
||||
/**=====================
|
||||
Progress CSS Start
|
||||
==========================**/
|
||||
.progress-showcase {
|
||||
.progress {
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sm-progress-bar {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.lg-progress-bar {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
|
||||
.progress-wrapper {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.progress-btn {
|
||||
background-color: $light-chartist-grid-color;
|
||||
border-color: $light-chartist-grid-color;
|
||||
}
|
||||
|
||||
.small-progressbar {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: -2px;
|
||||
right: -9px;
|
||||
background-color: $primary-color;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 100%;
|
||||
|
||||
[dir="rtl"] & {
|
||||
left: -9px;
|
||||
right: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-label {
|
||||
position: absolute;
|
||||
top: -26px;
|
||||
right: -6px;
|
||||
font-weight: 700;
|
||||
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: -6px;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-circle {
|
||||
position: absolute;
|
||||
top: -11px;
|
||||
right: -18px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border: 14px solid $primary-color;
|
||||
border-radius: 70px;
|
||||
animation: heart 1s ease-in-out;
|
||||
animation-iteration-count: infinite;
|
||||
|
||||
[dir="rtl"] & {
|
||||
right: unset;
|
||||
left: -18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes heart {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: scale(.1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(.5);
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(.8);
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-b-space {
|
||||
.progress {
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
Progress CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,178 @@
|
||||
.project-list {
|
||||
.row {
|
||||
margin: 15px;
|
||||
}
|
||||
button:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
.theme-form .form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.border-tab.nav-tabs {
|
||||
.nav-item .nav-link {
|
||||
border: 1px solid transparent;
|
||||
padding: 5px 30px 5px 0;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
margin-right: 5px;
|
||||
vertical-align: -12px;
|
||||
float:right;
|
||||
[dir="rtl"] & {
|
||||
float:left;
|
||||
}
|
||||
svg {
|
||||
vertical-align: middle;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-bottom: 0 !important;
|
||||
border-bottom: 0;
|
||||
|
||||
li {
|
||||
svg {
|
||||
height: 18px;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
.row {
|
||||
>div.col-xl-4 {
|
||||
|
||||
$show-numbers: true;
|
||||
|
||||
@if $show-numbers {
|
||||
@for $i from 1 through 15 {
|
||||
&:nth-child(#{$i}) {
|
||||
animation-fill-mode: both;
|
||||
animation: fadeIncustom .5s linear #{$i}00000ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.project-cards {
|
||||
.tab-content {
|
||||
margin-bottom: -30px;
|
||||
}
|
||||
}
|
||||
.project-box {
|
||||
border: 1px solid $light-semi-gray;
|
||||
border-radius: 5px;
|
||||
padding: 30px;
|
||||
background-color: lighten($light, 2%);
|
||||
margin-bottom: 30px;
|
||||
|
||||
h6 {
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
.project-status {
|
||||
p {
|
||||
margin-bottom: 5px;
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
|
||||
.media {
|
||||
margin-bottom: 15px;
|
||||
|
||||
.media-body {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.details {
|
||||
div {
|
||||
margin-bottom: 5px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.projectdetails {
|
||||
.card {
|
||||
.card-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 90px;
|
||||
height: 28px;
|
||||
font-size: 11px;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.projectmore {
|
||||
.details {
|
||||
.col-4 {
|
||||
margin-bottom: 5px;
|
||||
|
||||
&:nth-child(even) {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.task-list {
|
||||
position: relative;
|
||||
|
||||
ul {
|
||||
li {
|
||||
margin-bottom: 5px
|
||||
}
|
||||
|
||||
&+ul {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new-users {
|
||||
&.activity {
|
||||
.gradient-round {
|
||||
padding: 13px;
|
||||
font-size: 20px;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
top: unset !important;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,433 @@
|
||||
/**=====================
|
||||
79. social app css start
|
||||
==========================**/
|
||||
.user-profile {
|
||||
.hovercard {
|
||||
.socialheader {
|
||||
background: url(../images/social-app/social-image.png);
|
||||
}
|
||||
|
||||
.user-image {
|
||||
.share-icons {
|
||||
position: absolute;
|
||||
right: 100px;
|
||||
top: -27px;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
|
||||
.social-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
vertical-align: middle;
|
||||
justify-content: center;
|
||||
border-radius: 100%;
|
||||
|
||||
i {
|
||||
color: $white;
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-footer {
|
||||
>div {
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.market-tabs {
|
||||
.border-tab.nav-tabs .nav-item .nav-link.active {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.nav {
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.nav-item {
|
||||
width: 100%;
|
||||
|
||||
.nav-link {
|
||||
height: 81px;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
padding-top: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tabs-scoial {
|
||||
border-bottom: none;
|
||||
margin-bottom: 20px !important;
|
||||
margin-top: 20px;
|
||||
|
||||
li {
|
||||
a {
|
||||
font-weight: 600;
|
||||
|
||||
svg {
|
||||
circle {
|
||||
color: $light-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social-network {
|
||||
span {
|
||||
margin-bottom: 30px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.social-list {
|
||||
.media {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.media-body {
|
||||
a {
|
||||
color: $light-text;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
a {
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.photos {
|
||||
margin-bottom: -15px;
|
||||
|
||||
ul {
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
width: 70px;
|
||||
|
||||
&:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.new-users-social {
|
||||
margin-bottom: 30px;
|
||||
svg {
|
||||
cursor: pointer;
|
||||
}
|
||||
.media {
|
||||
img {
|
||||
width: 58px;
|
||||
}
|
||||
|
||||
.media-body {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
circle {
|
||||
color: $light-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.like-content {
|
||||
span {
|
||||
i {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
p {
|
||||
margin-top: 30px;
|
||||
color: $light-text;
|
||||
}
|
||||
|
||||
.comment-number {
|
||||
i {
|
||||
color: $light-text;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.comments-box {
|
||||
margin-top: 30px;
|
||||
|
||||
.input-group {
|
||||
margin-top: 6px;
|
||||
|
||||
.input-txt-bx {
|
||||
border: none;
|
||||
|
||||
&::placeholder {
|
||||
color: $light-text;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-append {
|
||||
.btn {
|
||||
i {
|
||||
font-size: 20px;
|
||||
display: flex;
|
||||
color: $light-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social-chat {
|
||||
margin-top: 30px;
|
||||
|
||||
span {
|
||||
span {
|
||||
font-weight: normal;
|
||||
color: $light-text;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.media-body {
|
||||
padding: 30px;
|
||||
border: 1px solid $light-color;
|
||||
position: relative;
|
||||
|
||||
p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 19px;
|
||||
right: 100%;
|
||||
border: 7px solid transparent;
|
||||
border-right: 7px solid $semi-dark;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 19px;
|
||||
right: 100%;
|
||||
border: 7px solid transparent;
|
||||
border-right: 7px solid $white;
|
||||
}
|
||||
}
|
||||
|
||||
.your-msg,
|
||||
.other-msg {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.other-msg {
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.socialprofile {
|
||||
span {
|
||||
color: $light-text;
|
||||
}
|
||||
|
||||
.social-btngroup {
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.likes-profile {
|
||||
h5 {
|
||||
span {
|
||||
color: $theme-body-font-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social-group {
|
||||
margin-top: 30px;
|
||||
|
||||
ul {
|
||||
li {
|
||||
&:nth-child(4) {
|
||||
margin-left: -22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social-status {
|
||||
form {
|
||||
.form-group {
|
||||
.form-control-social {
|
||||
border: 1px solid $light-color;
|
||||
padding-left: 15px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media {
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.social-status {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: #fff;
|
||||
bottom: 0;
|
||||
left: 35px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.social-online {
|
||||
border: 3px solid $success-color;
|
||||
}
|
||||
|
||||
.social-busy {
|
||||
border: 3px solid $warning-color;
|
||||
}
|
||||
|
||||
.social-offline {
|
||||
border: 3px solid $semi-dark;
|
||||
}
|
||||
|
||||
.media-body {
|
||||
p {
|
||||
color: $light-text;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
span {
|
||||
+span {
|
||||
color: $light-text;
|
||||
}
|
||||
}
|
||||
|
||||
.light-span {
|
||||
color: $light-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.social-header {
|
||||
h5 {
|
||||
span {
|
||||
&:first-child {
|
||||
line-height: 1.48;
|
||||
}
|
||||
|
||||
svg {
|
||||
circle {
|
||||
color: $light-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.details-about {
|
||||
+.details-about {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.your-details {
|
||||
p {
|
||||
color: $light-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-showcase {
|
||||
.friend-pic {
|
||||
margin-right: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.pepole-knows {
|
||||
ul {
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.add-friend {
|
||||
h6 {
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activity-log {
|
||||
.my-activity {
|
||||
+.my-activity {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 5px;
|
||||
|
||||
span {
|
||||
svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
79. social app CSS end
|
||||
==========================**/
|
||||
@@ -0,0 +1,132 @@
|
||||
/**=====================
|
||||
87. task app CSS Start
|
||||
==========================**/
|
||||
.modal-open {
|
||||
.datepickers-container {
|
||||
z-index: 1075;
|
||||
}
|
||||
}
|
||||
.date-details {
|
||||
align-items: center;
|
||||
> div {
|
||||
+ div {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.taskadd {
|
||||
table {
|
||||
tr {
|
||||
td {
|
||||
border-top: none;
|
||||
&:first-child {
|
||||
padding-left: 30px;
|
||||
}
|
||||
&:last-child {
|
||||
padding-right: 30px;
|
||||
}
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
color: $semi-dark;
|
||||
}
|
||||
}
|
||||
&:first-child {
|
||||
td {
|
||||
padding-top: 30px;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
td {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// responsive
|
||||
@media only screen and (max-width: 1660px) {
|
||||
.taskadd {
|
||||
table {
|
||||
tr {
|
||||
td {
|
||||
&:first-child {
|
||||
min-width: 160px;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
min-width: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 991px) {
|
||||
.date-details {
|
||||
display: block ! important;
|
||||
margin-bottom: -10px;
|
||||
.d-inline-block {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.taskadd {
|
||||
table {
|
||||
tr {
|
||||
td {
|
||||
&:first-child {
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
&:first-child {
|
||||
td {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
td {
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 767px) {
|
||||
.taskadd {
|
||||
table {
|
||||
tr {
|
||||
td {
|
||||
&:nth-child(2) {
|
||||
min-width: 745px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 575px) {
|
||||
.taskadd {
|
||||
table {
|
||||
tr {
|
||||
td {
|
||||
&:first-child {
|
||||
padding-left: 15px;
|
||||
}
|
||||
}
|
||||
&:first-child {
|
||||
td {
|
||||
padding-top: 15px;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
td {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
87. task app CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,589 @@
|
||||
/**=====================
|
||||
42. Timeline CSS Start
|
||||
==========================**/
|
||||
.activity {
|
||||
.media {
|
||||
margin-bottom: 30px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.gradient-round {
|
||||
position: relative;
|
||||
width: 53px;
|
||||
height: 53px;
|
||||
background-image: $gradient-primary;
|
||||
border-radius: 100%;
|
||||
top: -18px;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
top: 18px;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
|
||||
path,
|
||||
line,
|
||||
circle {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&.gradient-line-1 {
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background-color: #e9e9e9;
|
||||
width: 2px;
|
||||
height: 62px;
|
||||
bottom: -77px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.small-line {
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background-color: #e9e9e9;
|
||||
width: 2px;
|
||||
height: 19px;
|
||||
bottom: -34px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.medium-line {
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background-color: #e9e9e9;
|
||||
width: 2px;
|
||||
height: 53px;
|
||||
bottom: -68px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-body {
|
||||
h6 {
|
||||
font-weight: 600;
|
||||
margin-bottom: 30px;
|
||||
|
||||
span {
|
||||
font-weight: normal;
|
||||
color: $light-text;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-small {
|
||||
.media {
|
||||
margin-bottom: 30px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.timeline-round {
|
||||
position: relative;
|
||||
width: 53px;
|
||||
height: 53px;
|
||||
border-radius: 100%;
|
||||
border-radius: 15px;
|
||||
top: -18px;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
top: 18px;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
|
||||
path,
|
||||
line,
|
||||
circle {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
&.timeline-line-1 {
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background-color: #e9e9e9;
|
||||
width: 2px;
|
||||
height: 62px;
|
||||
bottom: -88px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.small-line {
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background-color: #e9e9e9;
|
||||
width: 2px;
|
||||
height: 19px;
|
||||
bottom: -34px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.medium-line {
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background-color: #e9e9e9;
|
||||
width: 2px;
|
||||
height: 53px;
|
||||
bottom: -68px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.media-body {
|
||||
h6 {
|
||||
margin-bottom: 30px;
|
||||
|
||||
span {
|
||||
font-weight: normal;
|
||||
color: $light-text;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cd-container {
|
||||
width: 90%;
|
||||
max-width: 1170px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.cd-container::after {
|
||||
content: '';
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1170px) {
|
||||
|
||||
#cd-timeline::before {
|
||||
left: 50% !important;
|
||||
margin-left: -2px;
|
||||
}
|
||||
|
||||
.cd-timeline-block {
|
||||
margin: 4em 0;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
.cd-timeline-content {
|
||||
float: right;
|
||||
|
||||
.cd-date {
|
||||
left: auto;
|
||||
right: 122%;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.cd-timeline-content::before {
|
||||
top: 24px;
|
||||
left: auto;
|
||||
right: 100%;
|
||||
border-color: transparent;
|
||||
border-right-color: $light-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cd-timeline-img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
left: 50%;
|
||||
margin-left: -30px;
|
||||
|
||||
>i {
|
||||
font-size: 18px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
padding: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.cssanimations {
|
||||
.cd-timeline-img {
|
||||
&.is-hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&.bounce-in {
|
||||
visibility: visible;
|
||||
animation: cd-bounce-1 0.6s;
|
||||
}
|
||||
}
|
||||
|
||||
.cd-timeline-content {
|
||||
&.is-hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&.bounce-in {
|
||||
visibility: visible;
|
||||
animation: cd-bounce-2 0.6s;
|
||||
}
|
||||
}
|
||||
|
||||
.cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
|
||||
animation: cd-bounce-2-inverse 0.6s;
|
||||
}
|
||||
}
|
||||
|
||||
.cd-timeline-content {
|
||||
margin-left: 0;
|
||||
padding: 1.6em;
|
||||
width: 45%;
|
||||
|
||||
.cd-date {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 122%;
|
||||
top: 6px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.cd-timeline-content::before {
|
||||
top: 24px;
|
||||
left: 100%;
|
||||
border-color: transparent;
|
||||
border-left-color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
#cd-timeline {
|
||||
position: relative;
|
||||
padding: 2em 0;
|
||||
}
|
||||
|
||||
#cd-timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
font-size: 1.5rem;
|
||||
height: 100%;
|
||||
width: 2px;
|
||||
background: $light-color;
|
||||
left: -15px;
|
||||
}
|
||||
|
||||
.cd-timeline-block {
|
||||
position: relative;
|
||||
margin: 30px 0;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.cd-timeline-img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
left: 50%;
|
||||
margin-left: -30px;
|
||||
-webkit-transform: translateZ(0);
|
||||
-webkit-backface-visibility: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
border-radius: 4px;
|
||||
|
||||
i {
|
||||
display: block;
|
||||
position: relative;
|
||||
left: 45%;
|
||||
top: 44%;
|
||||
margin-left: -12px;
|
||||
margin-top: -12px;
|
||||
font-size: 27px;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes cd-bounce-1 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes cd-bounce-1 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes cd-bounce-1 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.cd-timeline-content {
|
||||
position: relative;
|
||||
background: $light;
|
||||
border-radius: 4px;
|
||||
padding: 30px;
|
||||
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.08);
|
||||
|
||||
p {
|
||||
padding-top: 9px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
audio {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cd-date {
|
||||
font-size: 13px;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
padding: .8em 0 0;
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
.cd-timeline-content::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 100%;
|
||||
height: 0;
|
||||
width: 0;
|
||||
border: 7px solid transparent;
|
||||
border-left: 7px solid $light-color;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.cd-timeline-content {
|
||||
.cd-date {
|
||||
font-size: 14px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes cd-bounce-2 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes cd-bounce-2 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {}
|
||||
}
|
||||
|
||||
@keyframes cd-bounce-2 {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-100px);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes cd-bounce-2-inverse {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes cd-bounce-2-inverse {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {}
|
||||
}
|
||||
|
||||
@keyframes cd-bounce-2-inverse {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(100px);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1169px) {
|
||||
.cd-timeline-block {
|
||||
.cd-timeline-img {
|
||||
left: -2px;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin-left: -30px;
|
||||
top: 14px;
|
||||
z-index: 7;
|
||||
|
||||
>i {
|
||||
font-size: 15px;
|
||||
top: 16px;
|
||||
left: 17px;
|
||||
padding: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.landing-main {
|
||||
#cd-timeline::before {
|
||||
left: -39px;
|
||||
}
|
||||
|
||||
.cd-timeline-block {
|
||||
.cd-timeline-img {
|
||||
left: -34px;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
top: 1px;
|
||||
z-index: 8;
|
||||
|
||||
>i {
|
||||
font-size: 23px;
|
||||
top: 21px;
|
||||
left: 7px;
|
||||
padding: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 576px) {
|
||||
.cd-timeline-content {
|
||||
padding: 15px;
|
||||
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**=====================
|
||||
42. Timeline CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,193 @@
|
||||
/**=====================
|
||||
43. Timeline 2 CSS Start
|
||||
==========================**/
|
||||
$timeliny_classname: 'timeliny';
|
||||
$timeliny_dots-radius: 0.6rem;
|
||||
$timeliny_global-width: 100%;
|
||||
$timeliny_max-inner-width: 1024px;
|
||||
$timeliny_spacings: 5rem;
|
||||
$timeliny_transition-time: 0.35s;
|
||||
$timeliny_vertical-line-pos: 32%;
|
||||
$timeliny_small-breakdown: 768px;
|
||||
|
||||
.#{$timeliny_classname} {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: $timeliny_spacings * 2 0;
|
||||
width: $timeliny_global-width;
|
||||
border-top: 1px solid lighten($light-color, 3%);
|
||||
border-bottom: 1px solid lighten($light-color, 3%);
|
||||
text-rendering: optimizeLegibility;
|
||||
color: $light-color;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
cursor: move;
|
||||
&.loaded {
|
||||
opacity: 1;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: $dark-gray;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
}
|
||||
.#{$timeliny_classname}-wrapper {
|
||||
display: block;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
max-width: $timeliny_max-inner-width;
|
||||
}
|
||||
.#{$timeliny_classname}-dot {
|
||||
-webkit-transition: all $timeliny_transition-time ease-in-out;
|
||||
-moz-transition: all $timeliny_transition-time ease-in-out;
|
||||
transition: all $timeliny_transition-time ease-in-out;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
margin-top: -$timeliny_dots-radius;
|
||||
width: $timeliny_dots-radius * 2;
|
||||
height: $timeliny_dots-radius * 2;
|
||||
border-radius: 50%;
|
||||
border: 1px solid $dark-gray;
|
||||
background-color: $white;
|
||||
&::before {
|
||||
-webkit-transition: all $timeliny_transition-time ease-in-out;
|
||||
-moz-transition: all $timeliny_transition-time ease-in-out;
|
||||
transition: all $timeliny_transition-time ease-in-out;
|
||||
content: attr(data-year);
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -$timeliny_spacings;
|
||||
left: calc($timeliny_spacings / 4);
|
||||
color: $dark-color;
|
||||
font-family: $font-rubik, $font-serif;
|
||||
font-size: 22px;
|
||||
}
|
||||
&::after {
|
||||
-webkit-transition: all $timeliny_transition-time ease-in-out;
|
||||
-moz-transition: all $timeliny_transition-time ease-in-out;
|
||||
transition: all $timeliny_transition-time ease-in-out;
|
||||
-ms-transform: translateY(-50%);
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
content: attr(data-text);
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: calc($timeliny_max-inner-width / 4);
|
||||
top: $timeliny_spacings + $timeliny_dots-radius;
|
||||
left: calc($timeliny_spacings / 4);
|
||||
color: $light-color;
|
||||
opacity: 0;
|
||||
font-size: 0.9em;
|
||||
@media (min-width: $timeliny_small-breakdown) {
|
||||
width: calc($timeliny_max-inner-width / 3);
|
||||
}
|
||||
}
|
||||
}
|
||||
.#{$timeliny_classname}-timeline {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
display: table;
|
||||
width: 100%;
|
||||
z-index: 5;
|
||||
.#{$timeliny_classname}-timeblock {
|
||||
display: table-cell;
|
||||
position: relative;
|
||||
&.active {
|
||||
.#{$timeliny_classname}-dot {
|
||||
border-color: var(--theme-deafult);
|
||||
background-color: var(--theme-deafult);
|
||||
box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.33);
|
||||
&::before {
|
||||
color: $dark-color;
|
||||
}
|
||||
&::after {
|
||||
color: $dark-color;
|
||||
opacity: 1;
|
||||
background-color: lighten($primary-color, 38%);
|
||||
border: 1px solid $light-semi-gray;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.inactive {
|
||||
.#{$timeliny_classname}-dot {
|
||||
cursor: move;
|
||||
|
||||
&::before {
|
||||
color: $light-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.inactive):not(.active){
|
||||
.#{$timeliny_classname}-dot:hover {
|
||||
border-color: $dark-color;
|
||||
background-color: $dark-color;
|
||||
&::before {
|
||||
color: $dark-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$timeliny_classname}-dot:hover {
|
||||
&::after {
|
||||
color: $dark-color;
|
||||
opacity: 1;
|
||||
background-color: $white;
|
||||
border: 1px solid $light-semi-gray;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$timeliny_classname}-vertical-line {
|
||||
position: absolute;
|
||||
display: block;
|
||||
z-index: 1;
|
||||
left: calc($timeliny_vertical-line-pos / 2);
|
||||
top: 0;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background-color: var(--theme-deafult);
|
||||
|
||||
@media (min-width: $timeliny_small-breakdown) {
|
||||
left: $timeliny_vertical-line-pos;
|
||||
}
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -7px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 8px solid transparent;
|
||||
border-right: 8px solid transparent;
|
||||
border-top: 8px solid var(--theme-deafult);
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: -7px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 8px solid transparent;
|
||||
border-right: 8px solid transparent;
|
||||
border-bottom: 8px solid var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
/**=====================
|
||||
43. Timeline 2 CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,166 @@
|
||||
/**=====================
|
||||
22. User profile css start
|
||||
==========================**/
|
||||
.user-profile {
|
||||
.ttl-info {
|
||||
h6 {
|
||||
font-size: 12px;
|
||||
color: $semi-dark;
|
||||
}
|
||||
}
|
||||
.border-right {
|
||||
border-right: 1px solid $light-color;
|
||||
}
|
||||
hr {
|
||||
margin: 30px 0;
|
||||
}
|
||||
.hovercard {
|
||||
.cardheader {
|
||||
background: url(../images/other-images/bg-profile.png);
|
||||
background-size: cover;
|
||||
background-position: 10%;
|
||||
height: 470px;
|
||||
}
|
||||
.user-image {
|
||||
position: relative;
|
||||
height: 0;
|
||||
.avatar {
|
||||
margin-top: -80px;
|
||||
img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
max-width: 155px;
|
||||
max-height: 155px;
|
||||
border-radius: 50%;
|
||||
border: 7px solid $white;
|
||||
}
|
||||
}
|
||||
.icon-wrapper {
|
||||
position: absolute;
|
||||
bottom: -20px;
|
||||
left: 51%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: $white;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
font-size: 17px;
|
||||
box-shadow: 0 0 6px 3px rgba(68, 102, 242, 0.1);
|
||||
}
|
||||
}
|
||||
.info {
|
||||
padding: 30px;
|
||||
.title {
|
||||
margin-bottom: 4px;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
color: $dark-color;
|
||||
vertical-align: middle;
|
||||
a {
|
||||
color: $theme-font-color;
|
||||
font-size: 20px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.desc {
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: $semi-dark;
|
||||
text-overflow: ellipsis;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
.follow {
|
||||
margin-top: 20px;
|
||||
.follow-num {
|
||||
font-size: 20px;
|
||||
color: $theme-font-color;
|
||||
font-family: $font-rubik, $font-serif;
|
||||
font-weight: 500;
|
||||
}
|
||||
span {
|
||||
color: $semi-dark;
|
||||
}
|
||||
}
|
||||
.profile-img-style {
|
||||
padding: 30px;
|
||||
.img-container{
|
||||
margin-top: 30px;
|
||||
}
|
||||
.user-name {
|
||||
font-size: 14px;
|
||||
color: $theme-font-color;
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
p {
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
color: $dark-gray;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.media {
|
||||
img {
|
||||
width: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.like-comment {
|
||||
a{
|
||||
color: $dark-gray;
|
||||
&:hover{
|
||||
color: $danger-color;
|
||||
}
|
||||
}
|
||||
span {
|
||||
font-family: $font-rubik, $font-serif;
|
||||
}
|
||||
}
|
||||
.social-media {
|
||||
a {
|
||||
padding:0 15px;
|
||||
color: $semi-dark;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//Edit profile //
|
||||
.edit-profile{
|
||||
.profile-title{
|
||||
.media{
|
||||
align-items:center;
|
||||
margin-bottom:30px;
|
||||
.media-body{
|
||||
margin-left:14px;
|
||||
[dir="rtl"] & {
|
||||
margin-left: unset;
|
||||
margin-right: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**=====================
|
||||
22. User profile css Ends
|
||||
==========================**/
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
/**=====================
|
||||
83. Wishlist CSS start
|
||||
==========================**/
|
||||
.wishlist{
|
||||
table{
|
||||
tr{
|
||||
td{
|
||||
svg{
|
||||
color: $dark-gray;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
/**=====================
|
||||
83. Wishlist CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,3 @@
|
||||
// General theme contents
|
||||
@import "utils/variables";
|
||||
@import "themes/responsive";
|
||||
@@ -0,0 +1,167 @@
|
||||
/*! -----------------------------------------------------------------------------------
|
||||
|
||||
Template Name: THE CODEGRAMMER
|
||||
Template URI: http://admin.pixelstrap.com/cuba/theme
|
||||
Description: This is Admin theme
|
||||
Author: Pixelstrap
|
||||
Author URI: https://themeforest.net/user/pixelstrap
|
||||
|
||||
-----------------------------------------------------------------------------------
|
||||
*/
|
||||
// *** utils ***
|
||||
@import "utils/variables";
|
||||
|
||||
:root {
|
||||
--theme-deafult: #7366ff;
|
||||
--theme-secondary: #f73164;
|
||||
--light-background: rgba(242, 243, 247, 0.7);
|
||||
--body-font-color: #2F2F3B;
|
||||
--chart-border: #ECF3FA;
|
||||
--recent-chart-bg: #FCFCFD;
|
||||
--light-bg: #F6F7F9;
|
||||
--white: #fff;
|
||||
--light2: #F5F6F9;
|
||||
--sidebar-border: rgba(0, 0, 0, 0.1);
|
||||
--chart-text-color: rgba(82, 82, 108, 0.8);
|
||||
--recent-dashed-border: rgba(82, 82, 108, 0.3);
|
||||
--chart-dashed-border: rgba(82, 82, 108, 0.2);
|
||||
--chart-progress-light: rgba(82, 82, 108, 0.1);
|
||||
--recent-box-bg: #F2F4F7;
|
||||
--recent-border: rgba(97, 101, 122, 0.25);
|
||||
--course-light-btn: #F2F3F7;
|
||||
--course-bg: #F7F7F7;
|
||||
--balance-profie-bg: #E0DFEF;
|
||||
--view-grid-bg: #ECF3FA80;
|
||||
--view-border-marker: #cfcdfc;
|
||||
|
||||
--fc-button-bg-color: var(--theme-deafult);
|
||||
--fc-button-active-bg-color: var(--theme-deafult);
|
||||
--fc-button-active-border-color: var(--theme-deafult);
|
||||
--fc-button-border-color: var(--theme-deafult);
|
||||
--fc-button-hover-bg-color: var(--theme-deafult);
|
||||
--fc-button-hover-border-color: var(--theme-deafult);
|
||||
}
|
||||
|
||||
body[class='dark-only'] {
|
||||
--light-background: rgba(31, 32, 40, 0.65);
|
||||
--recent-chart-bg: #262932;
|
||||
--light-bg: #1d1e26;
|
||||
--white: #262932;
|
||||
--sidebar-border: rgba(255, 255, 255, 0.1);
|
||||
--light2: #1d1e26;
|
||||
--chart-border: #374558;
|
||||
--recent-box-bg: #1d1e26;
|
||||
--recent-border: #374558;
|
||||
--body-font-color: rgba(255, 255, 255, 0.6);
|
||||
--course-light-btn: var(--light-bg);
|
||||
--view-grid-bg: var(--light-bg);
|
||||
--view-border-marker: #2c2c45d4;
|
||||
}
|
||||
|
||||
// *** base ***
|
||||
@import "base/reset";
|
||||
@import "base/typography";
|
||||
|
||||
|
||||
// *** components ***
|
||||
@import "components/according.scss";
|
||||
@import "components/alert.scss";
|
||||
@import "components/avatars.scss";
|
||||
@import "components/badge.scss";
|
||||
@import "components/bookmark.scss";
|
||||
@import "components/breadcrumb.scss";
|
||||
@import "components/builders.scss";
|
||||
|
||||
@import "components/buttons.scss";
|
||||
|
||||
@import "components/card.scss";
|
||||
@import "components/color.scss";
|
||||
@import "components/datatable.scss";
|
||||
@import "components/datepicker.scss";
|
||||
@import "components/dropdown.scss";
|
||||
@import "components/form-builder.scss";
|
||||
@import "components/form-input.scss";
|
||||
@import "components/form-wizard";
|
||||
@import "components/forms.scss";
|
||||
@import "components/form_builder-2.scss";
|
||||
@import "components/icons.scss";
|
||||
@import "components/list.scss";
|
||||
@import "components/loader.scss";
|
||||
@import "components/modal";
|
||||
@import "components/popover.scss";
|
||||
@import "components/print.scss";
|
||||
@import "components/radio.scss";
|
||||
@import "components/ribbon.scss";
|
||||
@import "components/switch.scss";
|
||||
@import "components/tab.scss";
|
||||
@import "components/table.scss";
|
||||
@import "components/touchspin.scss";
|
||||
@import "components/tour.scss";
|
||||
@import "components/tree.scss";
|
||||
@import "components/typeahead-search.scss";
|
||||
@import "components/scrollbar";
|
||||
|
||||
|
||||
|
||||
// *** pages ***
|
||||
|
||||
@import "pages/blog.scss";
|
||||
@import "pages/bookmark-app.scss";
|
||||
@import "pages/cart.scss";
|
||||
@import "pages/chart.scss";
|
||||
@import "pages/chat.scss";
|
||||
@import "pages/checkout.scss";
|
||||
@import "pages/comingsoon.scss";
|
||||
@import "pages/contacts.scss";
|
||||
@import "pages/dashboard_2.scss";
|
||||
@import "pages/dashboard_3.scss";
|
||||
@import "pages/dashboard_4.scss";
|
||||
@import "pages/dashboard_5.scss";
|
||||
@import "pages/dashboard_default.scss";
|
||||
@import "pages/ecommerce.scss";
|
||||
@import "pages/email-application.scss";
|
||||
@import "pages/errorpage.scss";
|
||||
@import "pages/faq.scss";
|
||||
@import "pages/file.scss";
|
||||
@import "pages/gallery.scss";
|
||||
@import "pages/helper";
|
||||
@import "pages/internationalization.scss";
|
||||
@import "pages/job-search.scss";
|
||||
@import "pages/jsgrid.scss";
|
||||
@import "pages/kanban.scss";
|
||||
@import "pages/knowledgebase.scss";
|
||||
@import "pages/landing.scss";
|
||||
@import "pages/language.scss";
|
||||
@import "pages/learning.scss";
|
||||
@import "pages/login.scss";
|
||||
@import "pages/megaoption.scss";
|
||||
@import "pages/order-history.scss";
|
||||
@import "pages/page.scss";
|
||||
@import "pages/pricing.scss";
|
||||
@import "pages/progress.scss";
|
||||
@import "pages/projectlist.scss";
|
||||
@import "pages/social-app.scss";
|
||||
@import "pages/task.scss";
|
||||
@import "pages/timeline-v.scss";
|
||||
@import "pages/timeliny.scss";
|
||||
@import "pages/user-profile.scss";
|
||||
@import "pages/wishlist.scss";
|
||||
|
||||
|
||||
/* ---------------------
|
||||
*** themes ***
|
||||
-----------------------*/
|
||||
@import "themes/dark.scss";
|
||||
@import "themes/theme-customizer.scss";
|
||||
@import "themes/update.scss";
|
||||
// *** layout ***
|
||||
|
||||
@import "layout/footer.scss";
|
||||
@import "layout/grid.scss";
|
||||
@import "layout/header.scss";
|
||||
@import "layout/navs.scss";
|
||||
@import "layout/search.scss";
|
||||
@import "layout/select2.scss";
|
||||
@import "layout/sidebar.scss";
|
||||
@import "layout/rtl.scss";
|
||||
@import "layout/box-layout.scss";
|
||||
@@ -0,0 +1,4 @@
|
||||
/**=====================
|
||||
custom CSS Start
|
||||
==========================**/
|
||||
// you can add your custom css here
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,456 @@
|
||||
/**=====================
|
||||
59. Customizer CSS Start
|
||||
==========================**/
|
||||
.customizer-links {
|
||||
position: fixed;
|
||||
right: 00px;
|
||||
top: 50%;
|
||||
z-index: 3;
|
||||
transform: translate(0, -50%);
|
||||
box-shadow: 0 0 37px rgba(8, 21, 66, 0.1);
|
||||
|
||||
>.nav {
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
&.open {
|
||||
right: 330px;
|
||||
border-radius: 8px 0 0 8px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 0;
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: rgba(115, 102, 255, 0.1);
|
||||
border-radius: 5px;
|
||||
transform: scale(0);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
top: 12px;
|
||||
border-width: 5px 0 5px 5px;
|
||||
border-left-color: lighten($primary-color, 25%);
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
color: #fff;
|
||||
left: -10px;
|
||||
z-index: 2;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
i {
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
span {
|
||||
opacity: 1;
|
||||
right: 48px;
|
||||
transform: scale(1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
&+.nav-link {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
right: -60px;
|
||||
width: max-content;
|
||||
text-align: right;
|
||||
padding: 7px 10px;
|
||||
display: block;
|
||||
top: 0;
|
||||
border-radius: 5px;
|
||||
transform: scale(0);
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0;
|
||||
color: var(--theme-deafult);
|
||||
background-color: lighten($primary-color, 25%);
|
||||
box-shadow: 0 0 37px rgba(8, 21, 66, 0.1);
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 17px;
|
||||
padding: 8px 10px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
color: gray;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.customizer-contain {
|
||||
direction: ltr;
|
||||
position: fixed;
|
||||
height: calc(100vh);
|
||||
top: 79px;
|
||||
width: 333px;
|
||||
right: -335px;
|
||||
background-color: $white;
|
||||
z-index: 8;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.open {
|
||||
right: 0px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 0 10px 1px rgba(68, 102, 242, 0.05);
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
box-shadow: 0 0 11px 5px rgba(226, 226, 226, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
h6 {
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.5px;
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.customizer-header {
|
||||
padding: 15px 25px;
|
||||
border-bottom: 1px solid $light-color;
|
||||
|
||||
.icon-close {
|
||||
position: absolute;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
font-weight: 900;
|
||||
right: 24px;
|
||||
color: var(--theme-deafult);
|
||||
}
|
||||
|
||||
h5 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.customizer-body {
|
||||
padding: 15px 25px;
|
||||
max-height: calc(100vh - 200px);
|
||||
overflow-y: scroll;
|
||||
.fade {
|
||||
&:not(.show) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.unlimited-color-layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.btn {
|
||||
font-size: 15px;
|
||||
padding: 4px 20px;
|
||||
}
|
||||
|
||||
input {
|
||||
border: 1px solid $gray-60;
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
border-radius: 5px;
|
||||
background-color: $white;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-grid {
|
||||
&.customizer-mix {
|
||||
.color-layout {
|
||||
height: 70px;
|
||||
width: 80px;
|
||||
border: 1px solid #f6f7fb;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-pane {
|
||||
>h6 {
|
||||
&:first-child {
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
cursor: pointer;
|
||||
opacity: 0.9;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.color-layout {
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
border-radius: 6px;
|
||||
display: inline-block;
|
||||
margin-right: 3px;
|
||||
border: 1px solid #b8b8b8;
|
||||
padding: 3px;
|
||||
|
||||
>div {
|
||||
background-color: #7366ff;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
&[data-attr="color-2"] {
|
||||
div {
|
||||
background-color: #4831D4;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-attr="color-3"] {
|
||||
div {
|
||||
background-color: #d64dcf;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-attr="color-4"] {
|
||||
div {
|
||||
background-color: #4c2fbf;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-attr="color-5"] {
|
||||
div {
|
||||
background-color: #7c4dff;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-attr="color-6"] {
|
||||
div {
|
||||
background-color: #3949ab;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
>li {
|
||||
background-color: #2f3c4e;
|
||||
}
|
||||
}
|
||||
|
||||
.main-layout {
|
||||
>li {
|
||||
height: 65px;
|
||||
width: 85px;
|
||||
border: 1px solid $light-color;
|
||||
border-radius: 10px;
|
||||
display: inline-block;
|
||||
|
||||
&+li {
|
||||
margin-left: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.box-layout {
|
||||
.body {
|
||||
.badge {
|
||||
left: -14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-type,
|
||||
.sidebar-setting {
|
||||
>li {
|
||||
height: 70px;
|
||||
width: 85px;
|
||||
border: 1px solid $light-color;
|
||||
border-radius: 5px;
|
||||
display: inline-block;
|
||||
|
||||
&+li {
|
||||
margin-left: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-type {
|
||||
li {
|
||||
&[data-attr="normal-sidebar"] {
|
||||
.body {
|
||||
ul {
|
||||
li {
|
||||
&.bg-dark,
|
||||
&.sidebar {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
display: block;
|
||||
}
|
||||
&.bg-light,
|
||||
&.body {
|
||||
height: calc(100% - 10px);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.body-compact {
|
||||
.body {
|
||||
ul {
|
||||
li {
|
||||
&.body {
|
||||
width: calc(100% - 25px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-types {
|
||||
margin-bottom: -30px;
|
||||
|
||||
>li {
|
||||
display: block;
|
||||
width: unset;
|
||||
height: unset;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.layout-img {
|
||||
h6 {
|
||||
padding-top: 0;
|
||||
text-transform: inherit;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.box-layout {
|
||||
background: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-grid:not(.customizer-color) {
|
||||
li {
|
||||
padding: 5px;
|
||||
|
||||
>.header {
|
||||
height: 9px;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
|
||||
ul {
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
left: 5px;
|
||||
|
||||
>li {
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
border-radius: 5px;
|
||||
top: calc(50% - 3px);
|
||||
background-color: var(--theme-deafult);
|
||||
margin-right: 2px;
|
||||
padding: 0;
|
||||
|
||||
&:nth-child(2) {
|
||||
background-color: var(--theme-secondary);
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
background-color: $success-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>.body {
|
||||
background-color: $light-color;
|
||||
height: calc(100% - 16px);
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
line-height: 3.1;
|
||||
|
||||
ul {
|
||||
height: 100%;
|
||||
background-color: $white;
|
||||
|
||||
.sidebar {
|
||||
width: 18px;
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
margin-right: 3px;
|
||||
padding: 0;
|
||||
|
||||
&.compact {
|
||||
width: 12px;
|
||||
|
||||
&~.body {
|
||||
width: calc(100% - 19px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
width: calc(100% - 25px);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 3px;
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/**=====================
|
||||
59.Customizer CSS Ends
|
||||
==========================**/
|
||||
@@ -0,0 +1,333 @@
|
||||
@import "utils/variables";
|
||||
// jsgrid css
|
||||
.jsgrid-filter-row {
|
||||
select, input {
|
||||
padding: 6px 10px;
|
||||
border: 1px solid $horizontal-border-color;
|
||||
background: $white;
|
||||
}
|
||||
}
|
||||
|
||||
// popover
|
||||
.popover {
|
||||
background-color: $white;
|
||||
border: none;
|
||||
-webkit-box-shadow: 0 0 20px rgba($primary-color, 0.1);
|
||||
box-shadow: 0 0 20px rgba($primary-color, 0.1);
|
||||
.popover-header {
|
||||
background-color: $theme-medium-color;
|
||||
color: $primary-color;
|
||||
border-bottom: none;
|
||||
}
|
||||
.popover-body {
|
||||
color: rgba(43,43,43,0.7);
|
||||
}
|
||||
}
|
||||
|
||||
// tooltip css start
|
||||
.tooltip {
|
||||
&.bs-tooltip-top {
|
||||
.tooltip-arrow {
|
||||
&:before {
|
||||
border-top-color:$theme-medium-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bs-tooltip-bottom {
|
||||
.tooltip-arrow {
|
||||
&:before {
|
||||
border-bottom-color: $theme-medium-color;
|
||||
border-top-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bs-tooltip-start {
|
||||
.tooltip-arrow {
|
||||
&:before {
|
||||
border-left-color: $theme-medium-color;
|
||||
border-top-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.bs-tooltip-end {
|
||||
.tooltip-arrow {
|
||||
&:before {
|
||||
border-right-color: $theme-medium-color;
|
||||
border-top-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tooltip-inner {
|
||||
background-color: $theme-medium-color;
|
||||
color: $primary-color;
|
||||
}
|
||||
.tooltip-arrow {
|
||||
&:before {
|
||||
border-top-color: $theme-medium-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// tooltip css end
|
||||
|
||||
// dropdown css start
|
||||
.dropdown-basic {
|
||||
.dropdown {
|
||||
.dropdown-content {
|
||||
a {
|
||||
padding: 6px 16px;
|
||||
color: $dark-editor-document;
|
||||
opacity: 0.6;
|
||||
font-size: 13px;
|
||||
border-top: 1px solid $light-semi-gray;
|
||||
background: $white;
|
||||
&:hover {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
.dropdown-header {
|
||||
padding: 8px 16px;
|
||||
font-weight: 400;
|
||||
color: $dark-color;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropup {
|
||||
.dropup-content {
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
// dropdown css end
|
||||
// accordian css start
|
||||
.default-according {
|
||||
.card {
|
||||
.card-header {
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
&.bg-primary,&.bg-secondary {
|
||||
.btn {
|
||||
border-color: $transparent-color;
|
||||
}
|
||||
}
|
||||
i {
|
||||
position: initial;
|
||||
font-size: 20px;
|
||||
display: inline-block;
|
||||
vertical-align: text-bottom;
|
||||
margin-right: 5px;
|
||||
[dir="rtl"] & {
|
||||
margin-right: unset;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
h5 {
|
||||
margin-top: 0;
|
||||
}
|
||||
.btn-link {
|
||||
padding: 12px 20px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
letter-spacing: 0.7px;
|
||||
font-family: Roboto;
|
||||
border: 1px solid $light-semi-gray;
|
||||
border-radius: 0;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
[dir="rtl"] & {
|
||||
text-align: right;
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
padding: 12px 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.card-body {
|
||||
padding: 15px 20px;
|
||||
line-height: 22px;
|
||||
font-size: 13px;
|
||||
border-color: $light-semi-gray;
|
||||
border-radius: 0;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
color: $dark-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
// accordian css end
|
||||
|
||||
// tab-bootstrap css start
|
||||
.nav-tabs {
|
||||
border-bottom-color: $light-semi-gray;
|
||||
.nav-bottom {
|
||||
.nav-item {
|
||||
.nav-link.active {
|
||||
border-color: $light-semi-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-tabs {
|
||||
.nav-item{
|
||||
&.show {
|
||||
.nav-link {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-link {
|
||||
color: $dark-color;
|
||||
&.active {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
&.nav-bottom {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
&.active {
|
||||
border-color: $light-gray $light-gray #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-menu {
|
||||
-webkit-box-shadow: 0 0 20px rgba(89,102,122,0.1);
|
||||
box-shadow: 0 0 20px rgba(89,102,122,0.1);
|
||||
border: none;
|
||||
padding: 0;
|
||||
z-index: 1;
|
||||
.dropdown-item {
|
||||
color: #2b2b2b;
|
||||
opacity: 0.6;
|
||||
font-size: 13px;
|
||||
padding: 6px 12px;
|
||||
border-top: 1px solid $light-semi-gray;
|
||||
background: $white;
|
||||
&:hover {
|
||||
background-color: $white;
|
||||
}
|
||||
}
|
||||
.dropdown-divider {
|
||||
margin: 0;
|
||||
border-top: 1px solid #cccccc;
|
||||
}
|
||||
}
|
||||
// tab-bootstrap css end
|
||||
|
||||
.border-tab{
|
||||
.nav-tabs {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
&.active {
|
||||
border-bottom: 2px solid $primary-color;
|
||||
}
|
||||
&.show {
|
||||
border-bottom: 2px solid $primary-color;
|
||||
}
|
||||
&:focus {
|
||||
border-bottom: 2px solid $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabbed-card {
|
||||
.nav-tabs {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
top: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.timeliny {
|
||||
.timeliny-dot::before {
|
||||
font-size: $btn-lg-font-size;
|
||||
}
|
||||
}
|
||||
.form-builder-header-1,.form-builder-2-header {
|
||||
background-color: #f7f6ff;
|
||||
.nav-primary {
|
||||
.nav-link {
|
||||
color: $dark-color;
|
||||
font-weight: 400;
|
||||
&.active {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
h6 {
|
||||
margin-bottom: 0;
|
||||
font-weight: 400;
|
||||
line-height: 36px;
|
||||
}
|
||||
}
|
||||
.component {
|
||||
.input-group {
|
||||
.btn {
|
||||
line-height: 32px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-builder {
|
||||
.drag-box {
|
||||
fieldset {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.login-card {
|
||||
.login-main {
|
||||
.theme-form {
|
||||
label {
|
||||
font-size: $body-font-size;
|
||||
}
|
||||
.show-hide {
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// faq css start
|
||||
.faq-accordion {
|
||||
.card {
|
||||
.btn-link {
|
||||
svg {
|
||||
margin-left: 20px;
|
||||
@media (max-width: 575.98px) {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// faq css end
|
||||
.job-filter {
|
||||
.faq-form {
|
||||
.form-control {
|
||||
font-size: 14px;
|
||||
}
|
||||
.search-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
// editor css
|
||||
button[data-toggle="dropdown"] {
|
||||
&:hover {
|
||||
~ {
|
||||
.dropdown-menu {
|
||||
display: block;
|
||||
min-width: 300px;
|
||||
top: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,320 @@
|
||||
// General variables
|
||||
$theme-font-color: #242934;
|
||||
$theme-body-font-color: #2F2F3B;
|
||||
$theme-body-sub-title-color: #52526c;
|
||||
$body-color: #f8f8f8;
|
||||
$main-body-color: #F7F8F9;
|
||||
|
||||
// Theme colors variables
|
||||
$primary-color: #7366FF;
|
||||
$secondary-color: #FF3364;
|
||||
$success-color: #54BA4A;
|
||||
$info-color : #16C7F9;
|
||||
$warning-color: #FFAA05;
|
||||
$danger-color: #FC4438;
|
||||
$light-color : #f4f4f4;
|
||||
$badge-light-color: #52526c;
|
||||
$light-gray : #ecf3fa;
|
||||
$light-widget-border: #EFEEFF;
|
||||
$light-semi-gray :#efefef;
|
||||
$font-gray-color: #6C757D;
|
||||
$dark-light :$theme-font-color;
|
||||
$dark-gray: #898989;
|
||||
$dark-color : #2c323f;
|
||||
$dark-color-light: #2c323fb8;
|
||||
$gray-60 :#cccccc;
|
||||
$card-body-color : #f9f9fa;
|
||||
$transparent-color: transparent;
|
||||
$auth-bg-color: #fafafa;
|
||||
$light : #fdfeff;
|
||||
$semi-dark :#59667a;
|
||||
$light-text: #999999;
|
||||
$light-paragraph: #8F8F8F;
|
||||
$light-background: #d7e2e9;
|
||||
$light-font: rgba(27, 49, 85, 0.4);
|
||||
$light-semi-font: $semi-dark;
|
||||
$light-chartist-grid-color: #f6f9fd;
|
||||
$pitch-color: #fe8a7d;
|
||||
$color-scarpa: #4c5667;
|
||||
$color-fiord: #455a64;
|
||||
$black : #000;
|
||||
$white: #fff;
|
||||
$off-white: #F7F6FF;
|
||||
$theme-medium-color: #eae8ff;
|
||||
$dropdown-border-color: #918E99;
|
||||
$light-primary: #E0DDFF;
|
||||
$light-secondary: #FFE0E8;
|
||||
$light-success: #D6EED4;
|
||||
$light-info: #D5F5FE;
|
||||
$light-warning: #FFF0D2;
|
||||
$light-danger: #FEDDDB;
|
||||
$light-white: #F9F9FB;
|
||||
$light-dark: #EAEBF2;
|
||||
|
||||
// gradient colors
|
||||
$gradient-primary: linear-gradient(26deg, var(--theme-deafult) 0%, #a26cf8 100%);
|
||||
$gradient-bg-primary: linear-gradient(103.75deg, #33B1EE -13.9%, var(--theme-deafult) 79.68%);
|
||||
|
||||
//social colors
|
||||
$fb: #50598e;
|
||||
$twitter: #6fa2d8;
|
||||
$google-plus: #c64e40;
|
||||
$linkedin: #0077B5;
|
||||
|
||||
// soical table
|
||||
$fb-color: #2F84F4;
|
||||
$insta-color: #FC971E;
|
||||
$pintrest-color: $secondary-color;
|
||||
$twitter-color: #57B9F6;
|
||||
$youtube-color: #F42F2F;
|
||||
|
||||
//error input color start
|
||||
$light-body-bg-color: #fafdff;
|
||||
|
||||
//fonts
|
||||
$font-rubik: Rubik;
|
||||
$font-roboto: Roboto;
|
||||
$font-serif: sans-serif;
|
||||
$landing-cursive: 'Caveat', cursive;
|
||||
$font-themify: themify;
|
||||
$font-awesome: FontAwesome;
|
||||
$font-ICO: IcoFont;
|
||||
|
||||
// dark layout variables
|
||||
$dark-body-background: #1d1e26;
|
||||
$dark-card-background: #262932;
|
||||
$dark-card-inbox: #323846;
|
||||
$dark-small-font-color: #98a6ad;
|
||||
$dark-all-font-color: rgba(255, 255, 255, 0.6);
|
||||
$light-all-font-color: rgba(255, 255, 255, 0.2);
|
||||
$sidebar-submenu-font-color: rgba(255, 255, 255, 0.6);
|
||||
$dark-border-color: $dark-body-background;
|
||||
$dark-card-border: #374558;
|
||||
$dark-editor-document: #2b2b2b;
|
||||
$bg-dark-color: #1f2533;
|
||||
$dark-datatable-odd: #1f232b;
|
||||
$dark-datatable-sorting: #1c212b;
|
||||
$dark-datatable-sorting-even: #22262f;
|
||||
$dark-even-hover-sorting: #191e27;
|
||||
|
||||
//General tag settings
|
||||
$body-font-size: 14px;
|
||||
$body-font-color: $theme-body-font-color;
|
||||
$ul-padding-left: 0px;
|
||||
$ancher-color: var(--theme-deafult);
|
||||
$btn-focus-box-shadow: none;
|
||||
$all-focus-outline-color: var(--theme-deafult);
|
||||
|
||||
$paragraph-font-size : 14px;
|
||||
$paragraph-line-height : 1.7;
|
||||
$paragraph-letter-spacing : 0.7px;
|
||||
|
||||
$code-tag-color: var(--theme-deafult);
|
||||
$code-tag-bg-color: rgba($primary-color, 0.03);
|
||||
$code-tag-padding: 3px;
|
||||
$code-tag-margin: 0 3px;
|
||||
$code-tag-border-radious: 2px;
|
||||
|
||||
$blockquote-padding : 8px;
|
||||
$blockquote-border : 4px solid $primary-color;
|
||||
|
||||
$small-tag-padding: 10px;
|
||||
$small-tag-color: $dark-color;
|
||||
|
||||
$pre-tag-bg-color: rgba($primary-color, 0.03);
|
||||
$pre-tag-padding: 20px 0;
|
||||
|
||||
$list-group-active-bg-color: var(--theme-deafult);
|
||||
$list-group-active-border-color: var(--theme-deafult);
|
||||
$list-group-img-size: 40px;
|
||||
$list-group-margin: 10px;
|
||||
|
||||
|
||||
// Tables settings
|
||||
$table-b-margin: 0px;
|
||||
$table-heading-color: $theme-body-font-color;
|
||||
$table-row-color: $theme-body-font-color;
|
||||
$table-footer-font-weight: bold;
|
||||
$table-inverse-color: $white;
|
||||
$table-hover-color: $light;
|
||||
$table-padding: 0.75rem;
|
||||
$table-xl-padding: 1.25rem 2rem;
|
||||
$table-xl-font: 120%;
|
||||
$table-lg-padding: .9rem 2rem;
|
||||
$table-lg-font: 110%;
|
||||
$table-de-padding: .75rem 2rem;
|
||||
$table-de-font: 100%;
|
||||
$table-sm-padding: .5rem 2rem;
|
||||
$table-sm-font: 90%;
|
||||
$table-xs-padding: 0.2rem 2rem;
|
||||
$table-xs-font: 80%;
|
||||
$horizontal-border-color: #f2f4ff;
|
||||
$horizontal-padding: .75rem 2rem;
|
||||
$table-inverse-bg-color: #292b2c;
|
||||
|
||||
//According setting
|
||||
$according-card-top-margin : 10px;
|
||||
$according-btn-weight : 500;
|
||||
$according-btn-color : $theme-body-font-color;
|
||||
$according-card-header-padding : 0.75rem 1.25rem;
|
||||
$according-card-header-icon : $font-ICO;
|
||||
$according-open-icon : "\eb73";
|
||||
$according-close-icon : "\eb7a";
|
||||
|
||||
//Alert settings
|
||||
$alert-hover-color :$dark-color;
|
||||
$alert-border-radious :0.15rem;
|
||||
$alert-padding :15px;
|
||||
$alert-msg-icon-size :16px;
|
||||
|
||||
//badge settings
|
||||
$badge-padding :0.44em 0.7em;
|
||||
$badge-svg-size :16px;
|
||||
|
||||
//form input settings
|
||||
$form-group-margin-bottom : 1.25em;
|
||||
$col-form-label-font-size : 14px;
|
||||
$form-control-font-size : 14px;
|
||||
$form-control-border-radious : 2px;
|
||||
$form-control-border-color : $light-gray;
|
||||
|
||||
//breadcrumb setting
|
||||
$breadcrumb-ancher-color : $white;
|
||||
$breadcrumb-ancher-dark-color : $black;
|
||||
|
||||
//buttons setting
|
||||
$btn-font-size : 14px;
|
||||
$btn-padding : 0.375rem 1.75rem;
|
||||
$btn-lg-font-size: 18px;
|
||||
$btn-sm-font-size: 12px;
|
||||
$btn-xs-font-size: 11px;
|
||||
$btn-xs-padding: 0.05rem 0.4rem;
|
||||
|
||||
//Card settings
|
||||
$card-padding :30px;
|
||||
$card-margin-bottom :30px;
|
||||
$card-border-color :1px solid $light-gray;
|
||||
$card-border-radious :15px;
|
||||
$common-shadow-color : rgba($info-color, 0.08);
|
||||
$card-box-shadow : 0px 9px 20px rgba(46, 35, 94, 0.07);
|
||||
$card-header-bg-color : $white;
|
||||
$card-header-font-transform : capitalize;
|
||||
$card-header-span-size : 12px;
|
||||
$card-header-span-color : $theme-body-sub-title-color;
|
||||
$card-body-bg-color : $transparent-color;
|
||||
$card-footer-bg-color : $white;
|
||||
$card-hover-box-shadow : 0 0 40px rgba(8, 21, 66, .05);
|
||||
|
||||
|
||||
|
||||
// According settings
|
||||
$card-border-width :0px;
|
||||
$card-header-font-weight : 600;
|
||||
$card-header-font-size : 18px;
|
||||
$card-header-font-color : $theme-body-font-color;
|
||||
|
||||
//footer settings
|
||||
$footer_bg_color : $white;
|
||||
$footer_box_shadow : 0 0 20px rgba($semi-dark, 0.1);
|
||||
$footer_dark_color : $theme-font-color;
|
||||
$footer_dark__txt_color : $white;
|
||||
|
||||
//form settings
|
||||
$form-group-margin-bottom :20px;
|
||||
$sm-form-margin-bottom : 14px;
|
||||
$form-placeholder-color : $dark-gray;
|
||||
$form-placeholder-font-size : 14px;
|
||||
$form-placeholder-letter-spacing : 1px;
|
||||
$form-placeholder-font-weight : 100;
|
||||
$form-input-border-color : $light-semi-gray;
|
||||
$form-input-bg-color : $white;
|
||||
|
||||
//Tour settings
|
||||
$tour-color: var(--theme-deafult);
|
||||
|
||||
//sidabr main settings
|
||||
$sidebar-width: 255px;
|
||||
$sidebar-position: fixed;
|
||||
$sidebar-background-color: $white;
|
||||
$sidebar-shadow: 0 0 11px rgba(69, 110, 243, 0.13);
|
||||
$sidebar-overflow: auto;
|
||||
$sidebar-z-index: 9;
|
||||
$sidebar-transition: 0.5s;
|
||||
$sidebar-fill-icon-color: #757589;
|
||||
|
||||
//sidebar profile settings
|
||||
$sidebar-profile-edit-icon-size: 14px;
|
||||
$sidebar-profile-name-txt-color : var(--theme-deafult);
|
||||
$sidebar-profile-name-txt-transfer : uppercase;
|
||||
$sidebar-profile-name-txt-weight : 600;
|
||||
$sidebar-profile-name-letter-specing : 1.5px;
|
||||
$sidebar-profile-name-marging : 3px;
|
||||
$sidebar-profile-sub-title-font-size: 10px;
|
||||
$sidebar-profile-sub-title-margin: 0px;
|
||||
$sidebar-profile-img-shadow: 0 0 15px rgba(68, 102, 242, 0.3);
|
||||
|
||||
//Sidebar main menu setting
|
||||
$sidebar-menu-padding: 15px;
|
||||
$sidebar-menu-list-style: none;
|
||||
$sidebar-menu-list-margin: 0;
|
||||
$sidebar-icon-size: 14px;
|
||||
$sidebar-icon-margin: 14px;
|
||||
$sidebar-icon-stroke-width: 3px;
|
||||
$sidebar-font-size: 14px;
|
||||
$sidebar-letter-specing: 0.5px;
|
||||
$sidebar-txt-transform: capitalize;
|
||||
$sidebar-font-weight: 600;
|
||||
$sidebar-font-color: $theme-body-font-color;
|
||||
$sidebar-padding-top: 12px;
|
||||
$sidebar-padding-bottom: 12px;
|
||||
$sidebar-sub-header-padding: 15px;
|
||||
$sidebar-sub-header-margin: 0;
|
||||
$sidebar-heading-hover-padding: 5px;
|
||||
$sidebar-hover-txt-color: var(--theme-deafult);
|
||||
$sidebar-arrow-margin-top: 2px;
|
||||
$sidebar-arrow-size: 15px;
|
||||
$sidebar-arrow-color: $theme-body-font-color;
|
||||
$sidebar-open-icon: "\f107";
|
||||
$sidebar-close-icon: "\f105";
|
||||
$sidebar-icon-font-family: $font-awesome;
|
||||
$sidebar-height: calc(100vh - 115px);
|
||||
$sidebar-compact-width: 265px;
|
||||
|
||||
//Header settings
|
||||
$main-header-position: fixed;
|
||||
$main-header-top: 0;
|
||||
$main-header-shadow: 0 0 20px rgba($semi-dark, 0.1);
|
||||
$main-header-shadow-1: 0px 4px 40px rgba(39, 32, 120, 0.1);
|
||||
|
||||
//page settings
|
||||
$page-body-padding : 0 15px 0 15px;
|
||||
$page-body-bg-color: $light-color;
|
||||
$page-body-margin-bottom: 0px;
|
||||
$page-title-padding : 15px 30px;
|
||||
$common-box-shadow: 2px 3.464px 8px 0px rgba(22, 145, 248, 0.18);
|
||||
$page-title-font-size: 24px;
|
||||
$page-title-margin-bottom: 0;
|
||||
$page-title-text-tranform: capitalize;
|
||||
$page-small-title-display: block;
|
||||
$page-small-title-font-size: 12px;
|
||||
$page-small-title-margin-bottom: 5px;
|
||||
$page-small-title-text-transform: capitalize;
|
||||
$page-small-title-text-color: $theme-body-sub-title-color;
|
||||
$breadcrumb-size: 16px;
|
||||
$breadcrumb-content: "/";
|
||||
|
||||
|
||||
//main header left settings
|
||||
$header-left-bg-color : $white;
|
||||
$main-header-padding : 27px 22px;
|
||||
$main-header-z-index : 8;
|
||||
$header-wrapper-padding: 22px 30px;
|
||||
$header-wrapper-nav-right : 0px;
|
||||
$header-wrapper-nav-icon-size : 20px;
|
||||
$header-wrapper-nav-icon-color : $theme-font-color;
|
||||
$header-wrapper-nav-icon-align : middle;
|
||||
$header-size: 136px;
|
||||
$box-layout-space : 40px;
|
||||
|
||||
// widgets variables
|
||||
$widget-shadow: 1px 2px 21px -2px rgba(214, 214, 227, 0.83);
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user