dari laptop
This commit is contained in:
Saufi
377
public/kai/build/scss/core/_background.scss
Normal file
377
public/kai/build/scss/core/_background.scss
Normal file
@@ -0,0 +1,377 @@
|
||||
/* Background Body */
|
||||
body {
|
||||
background: $grey2-color;
|
||||
&[data-background-color="bg1"] {
|
||||
background: $grey2-color;
|
||||
}
|
||||
&[data-background-color="bg2"] {
|
||||
background: $white-color;
|
||||
}
|
||||
&[data-background-color="bg3"] {
|
||||
background: $grey-color;
|
||||
}
|
||||
&[data-background-color="dark"] {
|
||||
background: $black-color;
|
||||
}
|
||||
&[data-background-color="dark2"] {
|
||||
background: $black2-color;
|
||||
}
|
||||
&[data-background-color="dark"], &[data-background-color="dark2"] {
|
||||
.text-muted {
|
||||
color: #b9babf !important;
|
||||
}
|
||||
.main-header {
|
||||
box-shadow: 0px 0px 5px #121727;
|
||||
}
|
||||
.main-panel {
|
||||
color: rgba(169, 175, 187, 0.82);
|
||||
p,
|
||||
input[type="file"],
|
||||
.card:not(
|
||||
.card-primary,
|
||||
.card-secondary,
|
||||
.card-info,
|
||||
.card-success,
|
||||
.card-warning,
|
||||
.card-danger
|
||||
)
|
||||
.card-body {
|
||||
color: rgba(169, 175, 187, 0.82);
|
||||
}
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
label,
|
||||
.badge-count {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
.card:not(
|
||||
.card-primary,
|
||||
.card-secondary,
|
||||
.card-info,
|
||||
.card-success,
|
||||
.card-warning,
|
||||
.card-danger,
|
||||
.card-list-messages
|
||||
),
|
||||
.row-card-no-pd,
|
||||
.list-group-item.unread,
|
||||
.timeline > li > .timeline-panel {
|
||||
background: #202940 !important;
|
||||
}
|
||||
.card-list-messages {
|
||||
background: transparent !important;
|
||||
}
|
||||
.card-pricing2 {
|
||||
background: #202940 !important;
|
||||
}
|
||||
.row-card-no-pd {
|
||||
[class*="col"] .card:before {
|
||||
background: rgba(181, 181, 181, 0.1) !important;
|
||||
}
|
||||
}
|
||||
.card .card-header,
|
||||
.card .card-footer,
|
||||
.card .card-action,
|
||||
.card-profile .user-stats [class^="col"],
|
||||
.timeline > li > .timeline-panel,
|
||||
.table td,
|
||||
.table th,
|
||||
.breadcrumbs,
|
||||
.separator-dashed,
|
||||
.separator-solid,
|
||||
.separator-dot,
|
||||
.list-group .list-group-item,
|
||||
.conversations .messages-form,
|
||||
.mail-wrapper .mail-content .inbox-body .email-list .email-list-item,
|
||||
.page-with-aside .page-aside,
|
||||
.mail-wrapper .mail-content .email-head,
|
||||
.mail-wrapper .mail-content .email-sender,
|
||||
.main-panel .page-divider {
|
||||
border-color: hsla(0, 0%, 71%, 0.1) !important;
|
||||
color: rgba(169, 175, 187, 0.82);
|
||||
background: transparent;
|
||||
}
|
||||
.card-primary,
|
||||
.card-secondary,
|
||||
.card-info,
|
||||
.card-success,
|
||||
.card-warning,
|
||||
.card-danger {
|
||||
p,
|
||||
i,
|
||||
input[type="file"] {
|
||||
color: #fff;
|
||||
}
|
||||
.h1,
|
||||
.h2,
|
||||
.h3,
|
||||
.h4,
|
||||
.h5,
|
||||
.h6,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
.nav-line {
|
||||
border-color: rgba(181, 181, 181, 0.1) !important;
|
||||
}
|
||||
.accordion .card {
|
||||
background: #1a2035 !important;
|
||||
.card-body {
|
||||
border-color: rgba(181, 181, 181, 0.1) !important;
|
||||
// color: #2a2f5b !important;
|
||||
}
|
||||
}
|
||||
.timeline > li > .timeline-panel {
|
||||
&:before {
|
||||
border-left-color: hsla(0, 0%, 71%, 0.1);
|
||||
border-right-color: hsla(0, 0%, 71%, 0.1);
|
||||
}
|
||||
&:after {
|
||||
border-left-color: #202940;
|
||||
border-right-color: #202940;
|
||||
}
|
||||
}
|
||||
.activity-feed .feed-item {
|
||||
border-color: hsla(0, 0%, 71%, 0.1) !important;
|
||||
}
|
||||
.timeline:before,
|
||||
.progress,
|
||||
.progress-stacked {
|
||||
background-color: hsla(0, 0%, 71%, 0.1) !important;
|
||||
}
|
||||
.page-title,
|
||||
.breadcrumbs li a {
|
||||
color: rgba(169, 175, 187, 0.82);
|
||||
}
|
||||
.page-category {
|
||||
color: #828282;
|
||||
}
|
||||
.card-title,
|
||||
.card-title a,
|
||||
.card-title a:hover,
|
||||
.card-title a:focus {
|
||||
color: #fff;
|
||||
}
|
||||
.card-category {
|
||||
color: #8b92a9;
|
||||
}
|
||||
.card-black,
|
||||
.card-primary,
|
||||
.card-secondary,
|
||||
.card-info,
|
||||
.card-success,
|
||||
.card-warning,
|
||||
.card-danger {
|
||||
color: #fff !important;
|
||||
.card-title,
|
||||
.card-category {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
.nav-pills .nav-link:not(.active) {
|
||||
background: #1a2035;
|
||||
color: #a0aaac;
|
||||
border-color: #20263d;
|
||||
}
|
||||
.card-pricing .specification-list li {
|
||||
border-color: #373d4c;
|
||||
}
|
||||
.input-group-text {
|
||||
border-color: #2f374b !important;
|
||||
background-color: #1f283e;
|
||||
color: #fff;
|
||||
}
|
||||
.input-solid {
|
||||
background: #363b4c !important;
|
||||
border-color: #363b4c !important;
|
||||
}
|
||||
.table {
|
||||
background-color: transparent;
|
||||
}
|
||||
.list-group-messages .list-group-item-title a,
|
||||
.list-group .list-group-item-text {
|
||||
color: inherit;
|
||||
}
|
||||
.footer {
|
||||
border-top: 1px solid #293247;
|
||||
background: #1f283e;
|
||||
}
|
||||
.form-control,
|
||||
.form-select,
|
||||
.form-group-default,
|
||||
.select2-container--bootstrap .select2-selection {
|
||||
background-color: #1a2035;
|
||||
color: #fff;
|
||||
border-color: #2f374b;
|
||||
}
|
||||
select option {
|
||||
background: #1a2035;
|
||||
}
|
||||
.bootstrap-tagsinput {
|
||||
background: transparent;
|
||||
}
|
||||
.selectgroup-button {
|
||||
border: 1px solid #2f374b;
|
||||
}
|
||||
.conversations {
|
||||
.message-header {
|
||||
background: #1a2035;
|
||||
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.07);
|
||||
}
|
||||
.conversations-content {
|
||||
color: #575962;
|
||||
border-color: #2e364a;
|
||||
}
|
||||
}
|
||||
.mail-wrapper .mail-content .inbox-body .email-list .email-list-item.unread {
|
||||
background: $black2-color !important;
|
||||
}
|
||||
.mail-wrapper .mail-content .inbox-body .email-list .email-list-item:hover {
|
||||
background: #171e2f !important;
|
||||
}
|
||||
.page-with-aside .page-aside .aside-nav .nav > li:hover,
|
||||
.page-with-aside .page-aside .aside-nav .nav > li:focus,
|
||||
.page-with-aside .page-aside .aside-nav .nav > li.active {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
.page-with-aside .page-aside .aside-nav .nav > li.active > a {
|
||||
color: #b9babf !important;
|
||||
}
|
||||
.board {
|
||||
color: #575962;
|
||||
}
|
||||
.dropzone {
|
||||
&:hover {
|
||||
background: #1a2035 !important;
|
||||
}
|
||||
.dz-preview.dz-image-preview {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
.jvm-zoom-btn {
|
||||
background: #fff;
|
||||
color: #292929;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Background */
|
||||
|
||||
.bg-transparent {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.bg-black {
|
||||
background-color: $black-color !important;
|
||||
}
|
||||
|
||||
.bg-black2 {
|
||||
background-color: $black2-color !important;
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background-color: $primary-color !important;
|
||||
}
|
||||
|
||||
.bg-primary2 {
|
||||
background-color: $primary2-color !important;
|
||||
}
|
||||
|
||||
.bg-secondary {
|
||||
background-color: $secondary-color !important;
|
||||
}
|
||||
|
||||
.bg-secondary2 {
|
||||
background-color: $secondary2-color !important;
|
||||
}
|
||||
|
||||
.bg-info {
|
||||
background-color: $info-color !important;
|
||||
}
|
||||
|
||||
.bg-info2 {
|
||||
background-color: $info2-color !important;
|
||||
}
|
||||
|
||||
.bg-success {
|
||||
background-color: $success-color !important;
|
||||
}
|
||||
|
||||
.bg-success2 {
|
||||
background-color: $success2-color !important;
|
||||
}
|
||||
|
||||
.bg-warning {
|
||||
background-color: $warning-color !important;
|
||||
}
|
||||
|
||||
.bg-warning2 {
|
||||
background-color: $warning2-color !important;
|
||||
}
|
||||
|
||||
.bg-danger {
|
||||
background-color: $danger-color !important;
|
||||
}
|
||||
|
||||
.bg-danger2 {
|
||||
background-color: $danger2-color !important;
|
||||
}
|
||||
|
||||
.bg-gray1 {
|
||||
background: $grey2-color !important;
|
||||
}
|
||||
|
||||
.bg-gray2 {
|
||||
background: $grey-color !important;
|
||||
}
|
||||
|
||||
@mixin linear-gradient($direction, $color-stops...) {
|
||||
background: nth(nth($color-stops, 2), 1) !important;
|
||||
background: -webkit-linear-gradient(legacy-direction($direction), $color-stops) !important;
|
||||
background: linear-gradient($direction, $color-stops) !important;
|
||||
}
|
||||
|
||||
.bg-black-gradient {
|
||||
@include linear-gradient(-45deg, #0a0b11, $black2-color);
|
||||
}
|
||||
|
||||
.bg-primary-gradient {
|
||||
@include linear-gradient(-45deg, #06418e, $primary-color);
|
||||
}
|
||||
|
||||
.bg-secondary-gradient {
|
||||
@include linear-gradient(-45deg, #2a20ac, $secondary-color);
|
||||
}
|
||||
|
||||
.bg-info-gradient {
|
||||
@include linear-gradient(-45deg, #0a5a97, $info-color);
|
||||
}
|
||||
|
||||
.bg-success-gradient {
|
||||
@include linear-gradient(-45deg, #179d08, $success-color);
|
||||
}
|
||||
|
||||
.bg-warning-gradient {
|
||||
@include linear-gradient(-45deg, #e1810b, $warning-color);
|
||||
}
|
||||
|
||||
.bg-danger-gradient {
|
||||
@include linear-gradient(-45deg, #e80a15, $danger-color);
|
||||
}
|
||||
100
public/kai/build/scss/core/_basic.scss
Normal file
100
public/kai/build/scss/core/_basic.scss
Normal file
@@ -0,0 +1,100 @@
|
||||
/* Basic Layouts */
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
background: $grey2-color;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.body-overlay {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
opacity: 0.15;
|
||||
z-index: 2000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
*:focus {
|
||||
outline: 0 !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.border-left, .border-right, .border-bottom, .border-top {
|
||||
border-color: #F0F1F3 !important;
|
||||
}
|
||||
|
||||
.no-box-shadow {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* margin-top negative */
|
||||
|
||||
.mt--5, .my--5 {
|
||||
margin-top: (-3rem) !important;
|
||||
}
|
||||
|
||||
.mt--4, .my--4 {
|
||||
margin-top: (-1.5rem) !important;
|
||||
}
|
||||
|
||||
.mt--3, .my--3 {
|
||||
margin-top: (-1rem) !important;
|
||||
}
|
||||
|
||||
.mt--2, .my--2 {
|
||||
margin-top: (-0.5rem) !important;
|
||||
}
|
||||
|
||||
.mt--1, .my--1 {
|
||||
margin-top: (-0.25rem) !important;
|
||||
}
|
||||
|
||||
/* Wrapper */
|
||||
|
||||
.pull-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.pull-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* Flex-1 */
|
||||
|
||||
.flex-1 {
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Metric */
|
||||
.metric {
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* No Box-Shadow Style */
|
||||
.no-box-shadow-style {
|
||||
* {
|
||||
-webkit-box-shadow: none !important;
|
||||
-moz-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.card, .row-card-no-pd {
|
||||
border: 1px solid #eaeaea;
|
||||
}
|
||||
}
|
||||
35
public/kai/build/scss/core/_components.scss
Normal file
35
public/kai/build/scss/core/_components.scss
Normal file
@@ -0,0 +1,35 @@
|
||||
@import "components/avatars";
|
||||
@import "components/breadcrumbs";
|
||||
@import "components/cards";
|
||||
@import "components/gutters";
|
||||
@import "components/stamps";
|
||||
@import "components/inputs";
|
||||
@import "components/tables";
|
||||
@import "components/navbars";
|
||||
@import "components/navsearch";
|
||||
@import "components/dropdownsearch";
|
||||
@import "components/badges";
|
||||
@import "components/dropdowns";
|
||||
@import "components/charts";
|
||||
@import "components/alerts";
|
||||
@import "components/buttons";
|
||||
@import "components/navtabs";
|
||||
@import "components/popovers";
|
||||
@import "components/progress";
|
||||
@import "components/paginations";
|
||||
@import "components/sliders";
|
||||
@import "components/modals";
|
||||
@import "components/rating";
|
||||
@import "components/activityfeed";
|
||||
@import "components/timeline";
|
||||
@import "components/maps";
|
||||
@import "components/invoice";
|
||||
@import "components/listgroup";
|
||||
@import "components/selectgroup";
|
||||
@import "components/colorinputs";
|
||||
@import "components/imagecheck";
|
||||
@import "components/messages";
|
||||
@import "components/tasks";
|
||||
@import "components/settings";
|
||||
@import "components/loader";
|
||||
@import "components/menu-toggler";
|
||||
539
public/kai/build/scss/core/_layout-colors-horizontal.scss
Normal file
539
public/kai/build/scss/core/_layout-colors-horizontal.scss
Normal file
@@ -0,0 +1,539 @@
|
||||
/* Customable Layouts Colors */
|
||||
|
||||
%nav-background-color-style {
|
||||
.nav-search {
|
||||
.input-group {
|
||||
border: 0;
|
||||
transition: all 0.4s;
|
||||
.form-control {
|
||||
color: #8d9498 !important;
|
||||
&::-webkit-input-placeholder {
|
||||
/* Chrome/Opera/Safari */
|
||||
opacity: 1;
|
||||
}
|
||||
&::-moz-placeholder {
|
||||
/* Firefox 19+ */
|
||||
opacity: 1;
|
||||
}
|
||||
&:-ms-input-placeholder {
|
||||
/* IE 10+ */
|
||||
opacity: 1;
|
||||
}
|
||||
&:-moz-placeholder {
|
||||
/* Firefox 18- */
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.search-icon {
|
||||
color: $white-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
#search-nav {
|
||||
&.focus {
|
||||
.nav-search {
|
||||
.input-group {
|
||||
background: #fff !important;
|
||||
.form-control {
|
||||
color: #8d9498 !important;
|
||||
&::-webkit-input-placeholder {
|
||||
/* Chrome/Opera/Safari */
|
||||
color: #bfbfbf !important;
|
||||
}
|
||||
&::-moz-placeholder {
|
||||
/* Firefox 19+ */
|
||||
color: #bfbfbf !important;
|
||||
}
|
||||
&:-ms-input-placeholder {
|
||||
/* IE 10+ */
|
||||
color: #bfbfbf !important;
|
||||
}
|
||||
&:-moz-placeholder {
|
||||
/* Firefox 18- */
|
||||
color: #bfbfbf !important;
|
||||
}
|
||||
}
|
||||
.search-icon {
|
||||
color: #bfbfbf !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.navbar-nav .nav-item {
|
||||
.nav-link {
|
||||
color: $white-color !important;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: rgba(31, 30, 30, 0.12);
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.nav-link {
|
||||
background: rgba(31, 30, 30, 0.12);
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-navigation > .nav-item {
|
||||
&.active {
|
||||
&:before {
|
||||
background: #fff !important;
|
||||
}
|
||||
> .nav-link {
|
||||
.menu-title {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .nav-link {
|
||||
.menu-title,
|
||||
.link-icon {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.more {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
&[data-background-color="dark"],
|
||||
&[data-background-color="dark"] {
|
||||
.border-left,
|
||||
.border-right,
|
||||
.border-bottom,
|
||||
.border-top {
|
||||
border-color: rgba(181, 181, 181, 0.1) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-header {
|
||||
.navbar-header {
|
||||
&[data-background-color],
|
||||
&:not[data-background-color="white"] {
|
||||
@extend %nav-background-color-style;
|
||||
}
|
||||
&[data-background-color="dark"],
|
||||
&[data-background-color="dark2"] {
|
||||
.dropdown-menu {
|
||||
background: #202940 !important;
|
||||
&:after {
|
||||
border-bottom-color: #202940;
|
||||
}
|
||||
.dropdown-title {
|
||||
border-color: rgba(181, 181, 181, 0.1) !important;
|
||||
color: #fff;
|
||||
}
|
||||
.dropdown-divider {
|
||||
border-color: rgba(181, 181, 181, 0.1) !important;
|
||||
}
|
||||
.dropdown-item {
|
||||
color: #fff;
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.messages-notif-box .notif-center a,
|
||||
.notif-box .see-all,
|
||||
.messages-notif-box .see-all {
|
||||
border-color: rgba(181, 181, 181, 0.1) !important;
|
||||
color: #fff;
|
||||
}
|
||||
.notif-box .notif-center a,
|
||||
.messages-notif-box .notif-center a {
|
||||
color: #ffffff;
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
}
|
||||
.notif-box .notif-center a .notif-content .time,
|
||||
.messages-notif-box .notif-center a .notif-content .time {
|
||||
color: #b9babf !important;
|
||||
}
|
||||
.scrollbar-outer > .scroll-element {
|
||||
background: transparent;
|
||||
}
|
||||
.topbar-user .profile-pic {
|
||||
color: #fff !important;
|
||||
}
|
||||
&.border-bottom {
|
||||
border-color: rgba(181, 181, 181, 0.1) !important;
|
||||
}
|
||||
.page-navigation > .nav-item {
|
||||
> .nav-link {
|
||||
.menu-title {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&[data-background-color="white"],
|
||||
.navbar-header-transparent {
|
||||
.nav-search {
|
||||
.input-group {
|
||||
.form-control {
|
||||
color: #8d9498 !important;
|
||||
}
|
||||
.search-icon {
|
||||
color: #8d9498 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
// .navbar-nav .nav-item {
|
||||
// .nav-link {
|
||||
// color: #8d9498 !important;
|
||||
// &:hover, &:focus {
|
||||
// background: #eee !important;
|
||||
// }
|
||||
// }
|
||||
// &.active {
|
||||
// .nav-link {
|
||||
// background: #eee !important;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
&[data-background-color="custom"] {
|
||||
.navbar-header {
|
||||
@extend %nav-background-color-style;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-toggle {
|
||||
color: #fff !important;
|
||||
}
|
||||
.logo-header {
|
||||
.navbar-toggler .navbar-toggler-icon,
|
||||
.more,
|
||||
.btn-toggle {
|
||||
color: #8d9498 !important;
|
||||
}
|
||||
&[data-background-color] {
|
||||
.navbar-toggler {
|
||||
.navbar-toggler-icon {
|
||||
color: $white-color !important;
|
||||
}
|
||||
}
|
||||
.more,
|
||||
.btn-toggle {
|
||||
color: $white-color !important;
|
||||
}
|
||||
}
|
||||
&[data-background-color="white"],
|
||||
&[data-background-color="grey"] {
|
||||
.navbar-toggler .navbar-toggler-icon,
|
||||
.more,
|
||||
.btn-toggle {
|
||||
color: #8d9498 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin main-header-color-style($color) {
|
||||
background: $color !important;
|
||||
}
|
||||
|
||||
@mixin logo-header-color-style($color) {
|
||||
background: $color !important;
|
||||
}
|
||||
|
||||
@mixin navbar-header-color-style($color) {
|
||||
background: $color !important;
|
||||
#menuIconHeader,
|
||||
#menuHeader .page-navigation {
|
||||
background: $color !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sidebar-color-style($color) {
|
||||
background: $color !important;
|
||||
.user {
|
||||
border-color: rgba(181, 181, 181, 0.1) !important;
|
||||
.info a > span {
|
||||
color: #b9babf;
|
||||
.user-level {
|
||||
color: #8d9498;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav {
|
||||
> .nav-item {
|
||||
&.active {
|
||||
> a {
|
||||
p {
|
||||
color: #b9babf !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: #b9babf !important;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&[data-toggle="collapse"][aria-expanded="true"] {
|
||||
p {
|
||||
color: #b9babf !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.sidebar-style-2 {
|
||||
.nav {
|
||||
.nav-item {
|
||||
&.active {
|
||||
> a,
|
||||
> a:hover,
|
||||
> a:focus,
|
||||
> a[data-toggle="collapse"][aria-expanded="true"] {
|
||||
background: #fff !important;
|
||||
color: $color !important;
|
||||
p,
|
||||
i,
|
||||
.caret {
|
||||
color: $color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.scrollbar-inner > .scroll-element {
|
||||
.scroll-bar {
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
&.scroll-draggable .scroll-bar,
|
||||
&:hover .scroll-bar {
|
||||
background-color: #dcdbdb;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sidebar-color-style2($color) {
|
||||
background: $color !important;
|
||||
.user {
|
||||
margin-top: 0px;
|
||||
padding-top: 12.5px;
|
||||
border-top: 1px solid;
|
||||
border-color: rgba(255, 255, 255, 0.1) !important;
|
||||
.info {
|
||||
a > span {
|
||||
color: #fff;
|
||||
.user-level {
|
||||
color: #eaeaea;
|
||||
}
|
||||
}
|
||||
.caret {
|
||||
border-top-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.topbar-user {
|
||||
.profile-username {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
.nav {
|
||||
.nav-item {
|
||||
a {
|
||||
color: #f5f5f5 !important;
|
||||
p,
|
||||
i,
|
||||
.caret {
|
||||
color: #f5f5f5 !important;
|
||||
}
|
||||
&:hover,
|
||||
&:focus,
|
||||
&[data-toggle="collapse"][aria-expanded="true"] {
|
||||
color: #fff !important;
|
||||
p,
|
||||
i,
|
||||
.caret {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-section {
|
||||
.text-section,
|
||||
.sidebar-mini-icon {
|
||||
color: #eaeaea;
|
||||
}
|
||||
}
|
||||
.nav-collapse li a .sub-item:before {
|
||||
background: #eaeaea;
|
||||
}
|
||||
}
|
||||
&.sidebar-style-2 {
|
||||
.nav {
|
||||
> .nav-item {
|
||||
&.active {
|
||||
> a,
|
||||
> a:hover,
|
||||
> a:focus,
|
||||
> a[data-toggle="collapse"][aria-expanded="true"] {
|
||||
background: #fff !important;
|
||||
color: $color !important;
|
||||
p,
|
||||
i,
|
||||
.caret {
|
||||
color: $color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.scrollbar-inner > .scroll-element {
|
||||
.scroll-bar {
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
&.scroll-draggable .scroll-bar,
|
||||
&:hover .scroll-bar {
|
||||
background-color: #dcdbdb;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%no-box-shadow-style {
|
||||
-webkit-box-shadow: none !important;
|
||||
-moz-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
//[data-background-color="white"]
|
||||
.logo-header[data-background-color="white"] {
|
||||
@include logo-header-color-style($white-color);
|
||||
}
|
||||
.navbar-header[data-background-color="white"] {
|
||||
@include navbar-header-color-style($white-color);
|
||||
}
|
||||
|
||||
//[data-background-color="grey"]
|
||||
.logo-header[data-background-color="grey"] {
|
||||
@include logo-header-color-style($grey3-color);
|
||||
@extend %no-box-shadow-style;
|
||||
}
|
||||
|
||||
//[data-background-color="dark"]
|
||||
|
||||
.logo-header[data-background-color="dark"] {
|
||||
@include logo-header-color-style($black-color);
|
||||
}
|
||||
.logo-header[data-background-color="dark2"] {
|
||||
@include logo-header-color-style($black2-color);
|
||||
}
|
||||
.navbar-header[data-background-color="dark"] {
|
||||
@include navbar-header-color-style($black-color);
|
||||
}
|
||||
.navbar-header[data-background-color="dark2"] {
|
||||
@include navbar-header-color-style($black2-color);
|
||||
}
|
||||
|
||||
//[data-background-color="blue"]
|
||||
|
||||
.logo-header[data-background-color="blue"] {
|
||||
@include logo-header-color-style($primary-color);
|
||||
}
|
||||
.logo-header[data-background-color="blue2"] {
|
||||
@include logo-header-color-style($primary2-color);
|
||||
}
|
||||
.navbar-header[data-background-color="blue"] {
|
||||
@include navbar-header-color-style($primary-color);
|
||||
}
|
||||
.navbar-header[data-background-color="blue2"] {
|
||||
@include navbar-header-color-style($primary2-color);
|
||||
}
|
||||
|
||||
//[data-background-color="purple"]
|
||||
|
||||
.logo-header[data-background-color="purple"] {
|
||||
@include logo-header-color-style($secondary-color);
|
||||
}
|
||||
.logo-header[data-background-color="purple2"] {
|
||||
@include logo-header-color-style($secondary2-color);
|
||||
}
|
||||
.navbar-header[data-background-color="purple"] {
|
||||
@include navbar-header-color-style($secondary-color);
|
||||
}
|
||||
.navbar-header[data-background-color="purple2"] {
|
||||
@include navbar-header-color-style($secondary2-color);
|
||||
}
|
||||
|
||||
//[data-background-color="light-blue"]
|
||||
|
||||
.logo-header[data-background-color="light-blue"] {
|
||||
@include logo-header-color-style($info-color);
|
||||
}
|
||||
.logo-header[data-background-color="light-blue2"] {
|
||||
@include logo-header-color-style($info2-color);
|
||||
}
|
||||
.navbar-header[data-background-color="light-blue"] {
|
||||
@include navbar-header-color-style($info-color);
|
||||
}
|
||||
.navbar-header[data-background-color="light-blue2"] {
|
||||
@include navbar-header-color-style($info2-color);
|
||||
}
|
||||
|
||||
//[data-background-color="green"]
|
||||
|
||||
.logo-header[data-background-color="green"] {
|
||||
@include logo-header-color-style($success-color);
|
||||
}
|
||||
.logo-header[data-background-color="green2"] {
|
||||
@include logo-header-color-style($success2-color);
|
||||
}
|
||||
.navbar-header[data-background-color="green"] {
|
||||
@include navbar-header-color-style($success-color);
|
||||
}
|
||||
.navbar-header[data-background-color="green2"] {
|
||||
@include navbar-header-color-style($success2-color);
|
||||
}
|
||||
|
||||
//[data-background-color="orange"]
|
||||
|
||||
.logo-header[data-background-color="orange"] {
|
||||
@include logo-header-color-style($warning-color);
|
||||
}
|
||||
.logo-header[data-background-color="orange2"] {
|
||||
@include logo-header-color-style($warning2-color);
|
||||
}
|
||||
.navbar-header[data-background-color="orange"] {
|
||||
@include navbar-header-color-style($warning-color);
|
||||
}
|
||||
.navbar-header[data-background-color="orange2"] {
|
||||
@include navbar-header-color-style($warning2-color);
|
||||
}
|
||||
|
||||
//[data-background-color="red"]
|
||||
|
||||
.logo-header[data-background-color="red"] {
|
||||
@include logo-header-color-style($danger-color);
|
||||
}
|
||||
.logo-header[data-background-color="red2"] {
|
||||
@include logo-header-color-style($danger2-color);
|
||||
}
|
||||
.navbar-header[data-background-color="red"] {
|
||||
@include navbar-header-color-style($danger-color);
|
||||
}
|
||||
.navbar-header[data-background-color="red2"] {
|
||||
@include navbar-header-color-style($danger2-color);
|
||||
}
|
||||
|
||||
.sidebar[data-background-color="grey"] {
|
||||
background: $grey3-color;
|
||||
@extend %no-box-shadow-style;
|
||||
}
|
||||
|
||||
.sidebar[data-background-color="dark"] {
|
||||
@include sidebar-color-style($black-color);
|
||||
}
|
||||
|
||||
.sidebar[data-background-color="dark2"] {
|
||||
@include sidebar-color-style($black2-color);
|
||||
}
|
||||
507
public/kai/build/scss/core/_layout-colors.scss
Normal file
507
public/kai/build/scss/core/_layout-colors.scss
Normal file
@@ -0,0 +1,507 @@
|
||||
/* Customable Layouts Colors */
|
||||
|
||||
%nav-background-color-style {
|
||||
.nav-search {
|
||||
.input-group {
|
||||
border: 0;
|
||||
background: rgba(0, 0, 0, 0.18) !important;
|
||||
box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.4s;
|
||||
.form-control {
|
||||
color: $white-color !important;
|
||||
&::-webkit-input-placeholder {
|
||||
/* Chrome/Opera/Safari */
|
||||
opacity: 1;
|
||||
}
|
||||
&::-moz-placeholder {
|
||||
/* Firefox 19+ */
|
||||
opacity: 1;
|
||||
}
|
||||
&:-ms-input-placeholder {
|
||||
/* IE 10+ */
|
||||
opacity: 1;
|
||||
}
|
||||
&:-moz-placeholder {
|
||||
/* Firefox 18- */
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.search-icon {
|
||||
color: $white-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
#search-nav {
|
||||
&.focus {
|
||||
.nav-search {
|
||||
.input-group {
|
||||
background: #fff !important;
|
||||
.form-control {
|
||||
color: inherit !important;
|
||||
&::-webkit-input-placeholder {
|
||||
/* Chrome/Opera/Safari */
|
||||
color: #bfbfbf !important;
|
||||
}
|
||||
&::-moz-placeholder {
|
||||
/* Firefox 19+ */
|
||||
color: #bfbfbf !important;
|
||||
}
|
||||
&:-ms-input-placeholder {
|
||||
/* IE 10+ */
|
||||
color: #bfbfbf !important;
|
||||
}
|
||||
&:-moz-placeholder {
|
||||
/* Firefox 18- */
|
||||
color: #bfbfbf !important;
|
||||
}
|
||||
}
|
||||
.search-icon {
|
||||
color: #bfbfbf !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
color: $white-color !important;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: rgba(31, 30, 30, 0.12);
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.nav-link {
|
||||
background: rgba(31, 30, 30, 0.12);
|
||||
}
|
||||
}
|
||||
}
|
||||
.topbar-user .profile-pic {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
&[data-background-color="dark"],
|
||||
&[data-background-color="dark"] {
|
||||
.border-left,
|
||||
.border-right,
|
||||
.border-bottom,
|
||||
.border-top {
|
||||
border-color: rgba(181, 181, 181, 0.1) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-header {
|
||||
.navbar-header {
|
||||
&[data-background-color] {
|
||||
&:not([data-background-color="white"]) {
|
||||
@extend %nav-background-color-style;
|
||||
}
|
||||
&[data-background-color="dark"],
|
||||
&[data-background-color="dark2"] {
|
||||
.dropdown-menu {
|
||||
background: #202940 !important;
|
||||
&:after {
|
||||
border-bottom-color: #202940;
|
||||
}
|
||||
.dropdown-title {
|
||||
border-color: rgba(181, 181, 181, 0.1) !important;
|
||||
color: #fff;
|
||||
}
|
||||
.dropdown-divider {
|
||||
border-color: rgba(181, 181, 181, 0.1) !important;
|
||||
}
|
||||
.dropdown-item {
|
||||
color: #fff;
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.messages-notif-box .notif-center a,
|
||||
.notif-box .see-all,
|
||||
.messages-notif-box .see-all {
|
||||
border-color: rgba(181, 181, 181, 0.1) !important;
|
||||
color: #fff;
|
||||
}
|
||||
.notif-box .notif-center a,
|
||||
.messages-notif-box .notif-center a {
|
||||
color: #ffffff;
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
}
|
||||
.notif-box .notif-center a .notif-content .time,
|
||||
.messages-notif-box .notif-center a .notif-content .time {
|
||||
color: #b9babf !important;
|
||||
}
|
||||
.scrollbar-outer > .scroll-element {
|
||||
background: transparent;
|
||||
}
|
||||
.topbar-user .profile-pic {
|
||||
color: #fff !important;
|
||||
}
|
||||
.nav-search {
|
||||
.input-group {
|
||||
background: rgba(185, 185, 185, 0.18) !important;
|
||||
}
|
||||
}
|
||||
.navbar-nav .nav-item {
|
||||
.nav-link {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: rgba(185, 185, 185, 0.18) !important;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.nav-link {
|
||||
background: rgba(185, 185, 185, 0.18) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&[data-background-color="custom"] {
|
||||
.navbar-header {
|
||||
@extend %nav-background-color-style;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-toggle {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.logo-header {
|
||||
.navbar-toggler .navbar-toggler-icon,
|
||||
.more,
|
||||
.btn-toggle {
|
||||
color: #8d9498 !important;
|
||||
}
|
||||
&[data-background-color] {
|
||||
.navbar-toggler {
|
||||
.navbar-toggler-icon {
|
||||
color: $white-color !important;
|
||||
}
|
||||
}
|
||||
.more,
|
||||
.btn-toggle {
|
||||
color: $white-color !important;
|
||||
}
|
||||
}
|
||||
&[data-background-color="white"],
|
||||
&[data-background-color="grey"] {
|
||||
.navbar-toggler .navbar-toggler-icon,
|
||||
.more,
|
||||
.btn-toggle {
|
||||
color: #8d9498 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin main-header-color-style($color) {
|
||||
background: $color !important;
|
||||
}
|
||||
|
||||
@mixin logo-header-color-style($color) {
|
||||
background: $color !important;
|
||||
}
|
||||
|
||||
@mixin navbar-header-color-style($color) {
|
||||
background: $color !important;
|
||||
}
|
||||
|
||||
@mixin sidebar-color-style($color) {
|
||||
background: $color !important;
|
||||
.user {
|
||||
border-color: rgba(181, 181, 181, 0.1) !important;
|
||||
.info a > span {
|
||||
color: #b9babf;
|
||||
.user-level {
|
||||
color: #8d9498;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav {
|
||||
> .nav-item {
|
||||
&.active {
|
||||
> a,
|
||||
a:hover,
|
||||
a:focus {
|
||||
p {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: #b9babf !important;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&[data-toggle="collapse"][aria-expanded="true"] {
|
||||
p {
|
||||
color: #b9babf !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.sidebar-style-2 {
|
||||
.nav {
|
||||
.nav-item {
|
||||
&.active {
|
||||
> a,
|
||||
> a:hover,
|
||||
> a:focus,
|
||||
> a[data-toggle="collapse"][aria-expanded="true"] {
|
||||
background: #fff !important;
|
||||
color: $color !important;
|
||||
p,
|
||||
i,
|
||||
.caret {
|
||||
color: $color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.scrollbar-inner > .scroll-element {
|
||||
.scroll-bar {
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
&.scroll-draggable .scroll-bar,
|
||||
&:hover .scroll-bar {
|
||||
background-color: #dcdbdb;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sidebar-color-style2($color) {
|
||||
background: $color !important;
|
||||
.user {
|
||||
margin-top: 0px;
|
||||
padding-top: 12.5px;
|
||||
border-top: 1px solid;
|
||||
border-color: rgba(255, 255, 255, 0.1) !important;
|
||||
.info {
|
||||
a > span {
|
||||
color: #fff;
|
||||
.user-level {
|
||||
color: #eaeaea;
|
||||
}
|
||||
}
|
||||
.caret {
|
||||
border-top-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.topbar-user {
|
||||
.profile-username {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
.nav {
|
||||
.nav-item {
|
||||
a {
|
||||
color: #f5f5f5 !important;
|
||||
p,
|
||||
i,
|
||||
.caret {
|
||||
color: #f5f5f5 !important;
|
||||
}
|
||||
&:hover,
|
||||
&:focus,
|
||||
&[data-toggle="collapse"][aria-expanded="true"] {
|
||||
color: #fff !important;
|
||||
p,
|
||||
i,
|
||||
.caret {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-section {
|
||||
.text-section,
|
||||
.sidebar-mini-icon {
|
||||
color: #eaeaea;
|
||||
}
|
||||
}
|
||||
.nav-collapse li a .sub-item:before {
|
||||
background: #eaeaea;
|
||||
}
|
||||
}
|
||||
&.sidebar-style-2 {
|
||||
.nav {
|
||||
> .nav-item {
|
||||
&.active {
|
||||
> a,
|
||||
> a:hover,
|
||||
> a:focus,
|
||||
> a[data-toggle="collapse"][aria-expanded="true"] {
|
||||
background: #fff !important;
|
||||
color: $color !important;
|
||||
p,
|
||||
i,
|
||||
.caret {
|
||||
color: $color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.scrollbar-inner > .scroll-element {
|
||||
.scroll-bar {
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
&.scroll-draggable .scroll-bar,
|
||||
&:hover .scroll-bar {
|
||||
background-color: #dcdbdb;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%no-box-shadow-style {
|
||||
-webkit-box-shadow: none !important;
|
||||
-moz-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
//[data-background-color="white"]
|
||||
.logo-header[data-background-color="white"] {
|
||||
@include logo-header-color-style($white-color);
|
||||
}
|
||||
.navbar-header[data-background-color="white"] {
|
||||
@include navbar-header-color-style($white-color);
|
||||
}
|
||||
|
||||
//[data-background-color="grey"]
|
||||
.logo-header[data-background-color="grey"] {
|
||||
@include logo-header-color-style($grey3-color);
|
||||
@extend %no-box-shadow-style;
|
||||
}
|
||||
|
||||
//[data-background-color="dark"]
|
||||
|
||||
.logo-header[data-background-color="dark"] {
|
||||
@include logo-header-color-style($black-color);
|
||||
}
|
||||
.logo-header[data-background-color="dark2"] {
|
||||
@include logo-header-color-style($black2-color);
|
||||
}
|
||||
.navbar-header[data-background-color="dark"] {
|
||||
@include navbar-header-color-style($black-color);
|
||||
}
|
||||
.navbar-header[data-background-color="dark2"] {
|
||||
@include navbar-header-color-style($black2-color);
|
||||
}
|
||||
|
||||
//[data-background-color="blue"]
|
||||
|
||||
.logo-header[data-background-color="blue"] {
|
||||
@include logo-header-color-style($primary-color);
|
||||
}
|
||||
.logo-header[data-background-color="blue2"] {
|
||||
@include logo-header-color-style($primary2-color);
|
||||
}
|
||||
.navbar-header[data-background-color="blue"] {
|
||||
@include navbar-header-color-style($primary-color);
|
||||
}
|
||||
.navbar-header[data-background-color="blue2"] {
|
||||
@include navbar-header-color-style($primary2-color);
|
||||
}
|
||||
|
||||
//[data-background-color="purple"]
|
||||
|
||||
.logo-header[data-background-color="purple"] {
|
||||
@include logo-header-color-style($secondary-color);
|
||||
}
|
||||
.logo-header[data-background-color="purple2"] {
|
||||
@include logo-header-color-style($secondary2-color);
|
||||
}
|
||||
.navbar-header[data-background-color="purple"] {
|
||||
@include navbar-header-color-style($secondary-color);
|
||||
}
|
||||
.navbar-header[data-background-color="purple2"] {
|
||||
@include navbar-header-color-style($secondary2-color);
|
||||
}
|
||||
|
||||
//[data-background-color="light-blue"]
|
||||
|
||||
.logo-header[data-background-color="light-blue"] {
|
||||
@include logo-header-color-style($info-color);
|
||||
}
|
||||
.logo-header[data-background-color="light-blue2"] {
|
||||
@include logo-header-color-style($info2-color);
|
||||
}
|
||||
.navbar-header[data-background-color="light-blue"] {
|
||||
@include navbar-header-color-style($info-color);
|
||||
}
|
||||
.navbar-header[data-background-color="light-blue2"] {
|
||||
@include navbar-header-color-style($info2-color);
|
||||
}
|
||||
|
||||
//[data-background-color="green"]
|
||||
|
||||
.logo-header[data-background-color="green"] {
|
||||
@include logo-header-color-style($success-color);
|
||||
}
|
||||
.logo-header[data-background-color="green2"] {
|
||||
@include logo-header-color-style($success2-color);
|
||||
}
|
||||
.navbar-header[data-background-color="green"] {
|
||||
@include navbar-header-color-style($success-color);
|
||||
}
|
||||
.navbar-header[data-background-color="green2"] {
|
||||
@include navbar-header-color-style($success2-color);
|
||||
}
|
||||
|
||||
//[data-background-color="orange"]
|
||||
|
||||
.logo-header[data-background-color="orange"] {
|
||||
@include logo-header-color-style($warning-color);
|
||||
}
|
||||
.logo-header[data-background-color="orange2"] {
|
||||
@include logo-header-color-style($warning2-color);
|
||||
}
|
||||
.navbar-header[data-background-color="orange"] {
|
||||
@include navbar-header-color-style($warning-color);
|
||||
}
|
||||
.navbar-header[data-background-color="orange2"] {
|
||||
@include navbar-header-color-style($warning2-color);
|
||||
}
|
||||
|
||||
//[data-background-color="red"]
|
||||
|
||||
.logo-header[data-background-color="red"] {
|
||||
@include logo-header-color-style($danger-color);
|
||||
}
|
||||
.logo-header[data-background-color="red2"] {
|
||||
@include logo-header-color-style($danger2-color);
|
||||
}
|
||||
.navbar-header[data-background-color="red"] {
|
||||
@include navbar-header-color-style($danger-color);
|
||||
}
|
||||
.navbar-header[data-background-color="red2"] {
|
||||
@include navbar-header-color-style($danger2-color);
|
||||
}
|
||||
|
||||
.sidebar[data-background-color="grey"] {
|
||||
background: $grey3-color;
|
||||
@extend %no-box-shadow-style;
|
||||
}
|
||||
|
||||
.sidebar[data-background-color="dark"] {
|
||||
@include sidebar-color-style($black-color);
|
||||
}
|
||||
|
||||
.sidebar[data-background-color="dark2"] {
|
||||
@include sidebar-color-style($black2-color);
|
||||
}
|
||||
361
public/kai/build/scss/core/_main-header-horizontal.scss
Normal file
361
public/kai/build/scss/core/_main-header-horizontal.scss
Normal file
@@ -0,0 +1,361 @@
|
||||
.main-header {
|
||||
background: $white-color;
|
||||
min-height: 80px;
|
||||
width: 100%;
|
||||
z-index: 1001;
|
||||
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.04);
|
||||
&.fixed {
|
||||
position: fixed !important;
|
||||
animation-name: animateMainHeaderFixed;
|
||||
animation-duration: .7s;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
.navbar-header {
|
||||
min-height: 80px;
|
||||
position: unset;
|
||||
.nav-search {
|
||||
.input-group {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
.navbar-line {
|
||||
.navbar-nav {
|
||||
>.nav-item {
|
||||
> .nav-link {
|
||||
min-height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
&:first-child {
|
||||
margin-left: 0px;
|
||||
}
|
||||
.menu-title {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-navigation {
|
||||
.navbar-dropdown {
|
||||
top: 65px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-navigation {
|
||||
position: unset;
|
||||
width: 100%;
|
||||
> .nav-item {
|
||||
&.active {
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: calc(100% - 20px);
|
||||
height: 1px;
|
||||
background: $white-color;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
> .nav-link {
|
||||
padding: 20px 0;
|
||||
background: transparent !important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.link-icon {
|
||||
font-size: 18px;
|
||||
color: $white-color;
|
||||
margin-right: 15px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.menu-title {
|
||||
color: #575962;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
&.submenu {
|
||||
position: relative;
|
||||
> .nav-link {
|
||||
&:after {
|
||||
content: "\e604";
|
||||
font-family: 'simple-line-icons';
|
||||
font-size: 8px;
|
||||
margin-left: 18px;
|
||||
border: 0;
|
||||
height: 100%;
|
||||
transition-duration: 0.25s;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
> .nav-link {
|
||||
&:after {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.navbar-dropdown {
|
||||
display: none;
|
||||
margin-top: 0px;
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
top: 85%;
|
||||
z-index: 999;
|
||||
background: #fff;
|
||||
border-top: none;
|
||||
border-radius: 4px;
|
||||
box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
|
||||
-webkit-box-shadow: 1px 0px 20px rgba(0, 0, 0, 0.08);
|
||||
min-width: 160px;
|
||||
-webkit-animation-duration: .5s;
|
||||
animation-duration: .5s;
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.category-heading {
|
||||
font-size: 1rem;
|
||||
font-weight: $font-weight-bold;
|
||||
text-align: left;
|
||||
color: $primary-color;
|
||||
padding: 1rem 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
ul {
|
||||
li {
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
padding: 6px 0;
|
||||
white-space: nowrap;
|
||||
a {
|
||||
color: #575962;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
padding-left: 25px;
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 7px;
|
||||
height: 1px;
|
||||
background: #1d2939;
|
||||
top: 9px;
|
||||
left: 0;
|
||||
}
|
||||
&:hover {
|
||||
color: $primary-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.mega-menu) {
|
||||
.navbar-dropdown {
|
||||
ul {
|
||||
padding: 15px 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.mega-menu {
|
||||
position: unset;
|
||||
.navbar-dropdown {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 25px;
|
||||
.col-group-wrapper {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
ul {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.navbar-dropdown {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.page-navigation-style-2 {
|
||||
> .nav-item {
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: none;
|
||||
> .nav-link {
|
||||
margin: 0 .15rem;
|
||||
padding: 10px 18px;
|
||||
height: unset;
|
||||
border-radius: 4px;
|
||||
transition: all .3s;
|
||||
.menu-title {
|
||||
opacity: 0.8;
|
||||
transition: all .3s;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.nav-link {
|
||||
background: rgba(236, 236, 255, 0.2) !important;
|
||||
.menu-title {
|
||||
opacity: 1;
|
||||
color: $white-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover,&:focus {
|
||||
> .nav-link {
|
||||
background: rgba(236, 236, 255, 0.15) !important;
|
||||
.menu-title {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin page-navigation-color-style($color) {
|
||||
> .nav-item {
|
||||
// overflow-x: hidden;
|
||||
// position: relative;
|
||||
&.active {
|
||||
&:before {
|
||||
background: $color;
|
||||
}
|
||||
> .nav-link .menu-title {
|
||||
color: $color !important;
|
||||
}
|
||||
> .nav-link {
|
||||
.link-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .nav-link {
|
||||
.link-icon {
|
||||
color: $color;
|
||||
}
|
||||
&:after {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
.category-heading {
|
||||
color: $color;
|
||||
}
|
||||
ul {
|
||||
li {
|
||||
a {
|
||||
&:hover {
|
||||
color: $color;
|
||||
}
|
||||
&.active {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.page-navigation-style-2 {
|
||||
> .nav-item {
|
||||
&.active {
|
||||
> .nav-link {
|
||||
background: $color !important;
|
||||
.menu-title {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.page-navigation-primary {
|
||||
@include page-navigation-color-style($primary-color);
|
||||
}
|
||||
&.page-navigation-secondary {
|
||||
@include page-navigation-color-style($secondary-color);
|
||||
}
|
||||
&.page-navigation-info {
|
||||
@include page-navigation-color-style($info-color);
|
||||
}
|
||||
&.page-navigation-success {
|
||||
@include page-navigation-color-style($success-color);
|
||||
}
|
||||
&.page-navigation-warning {
|
||||
@include page-navigation-color-style($warning-color);
|
||||
}
|
||||
&.page-navigation-danger {
|
||||
@include page-navigation-color-style($danger-color);
|
||||
}
|
||||
&.page-navigation-white {
|
||||
@include page-navigation-color-style($white-color);
|
||||
}
|
||||
}
|
||||
&.nav-bottom-dark {
|
||||
.page-navigation {
|
||||
> .nav-item {
|
||||
> .nav-link {
|
||||
.menu-title {
|
||||
color: rgba(255, 255, 255, 0.5) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.page-navigation-style-2 {
|
||||
> .nav-item {
|
||||
&:hover, &:focus {
|
||||
> .nav-link {
|
||||
background: rgba(185, 185, 185, 0.18);
|
||||
.menu-title {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.quick-search {
|
||||
.input-group {
|
||||
background: rgba(185, 185, 185, 0.18);
|
||||
}
|
||||
.search-icon, input.form-control {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-toggle{
|
||||
font-size: 20px !important;
|
||||
line-height: 20px;
|
||||
padding: 0px !important;
|
||||
background: transparent !important;
|
||||
color: $body-text-color !important;
|
||||
&:hover, &:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#search-nav {
|
||||
flex: 1;
|
||||
max-width: 300px;
|
||||
transition: all .4s;
|
||||
&.focus {
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animateMainHeaderFixed {
|
||||
0% {
|
||||
transform: translateY(-100%);
|
||||
opacity: .5
|
||||
}
|
||||
50% {
|
||||
opacity: .8
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
23
public/kai/build/scss/core/_main-header.scss
Normal file
23
public/kai/build/scss/core/_main-header.scss
Normal file
@@ -0,0 +1,23 @@
|
||||
.main-header {
|
||||
background: $white-color;
|
||||
min-height: 60px;
|
||||
width: calc(100% - 250px);
|
||||
position: fixed;
|
||||
z-index: 1001;
|
||||
.navbar-header {
|
||||
min-height: 70px;
|
||||
.btn-toggle {
|
||||
margin-right: 30px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#search-nav {
|
||||
flex: 1;
|
||||
max-width: 300px;
|
||||
transition: all .4s;
|
||||
&.focus {
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
279
public/kai/build/scss/core/_main-panel-horizontal.scss
Normal file
279
public/kai/build/scss/core/_main-panel-horizontal.scss
Normal file
@@ -0,0 +1,279 @@
|
||||
.main-panel {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
min-height: 100%;
|
||||
float: left;
|
||||
transition: all .3s;
|
||||
> .container {
|
||||
margin-top: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
> .container-fluid {
|
||||
margin-top: 81px;
|
||||
}
|
||||
> .container-full{
|
||||
padding: 0px !important;
|
||||
margin-top: 81px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
max-width: unset;
|
||||
}
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
.page-title {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.btn-page-header-dropdown {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
font-size: 1rem;
|
||||
padding: 0px;
|
||||
color: #6b6b6b;
|
||||
box-shadow: 0 2px 14px 0 rgba(144, 116, 212, 0.1) !important;
|
||||
border: 0;
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.dropdown-menu {
|
||||
margin-top: 15px;
|
||||
top: 0px !important;
|
||||
&:after {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 8px solid $transparent-bg;
|
||||
border-right: 8px solid $transparent-bg;
|
||||
border-bottom: 8px solid $white-color;
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: 32px;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-divider {
|
||||
height: 0;
|
||||
margin: .3rem 0 1rem;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #ebecec;
|
||||
}
|
||||
}
|
||||
|
||||
/* Page Wrapper */
|
||||
.page-wrapper {
|
||||
min-height: calc(100vh - 57px);
|
||||
position: relative;
|
||||
&.has-sidebar {
|
||||
.page-inner {
|
||||
margin-left: 22.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-navs {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
box-shadow: 0 1px 1px 0 rgba(0,0,0,.07);
|
||||
z-index: 1;
|
||||
.nav {
|
||||
.nav-link {
|
||||
padding: 1rem !important;
|
||||
}
|
||||
}
|
||||
.nav-line {
|
||||
border: 0px !important;
|
||||
.nav-link {
|
||||
border-bottom-width: 3px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-scroller {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
.nav {
|
||||
flex-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 991px) {
|
||||
.main-panel {
|
||||
> .container-full{
|
||||
padding: 24px !important;
|
||||
}
|
||||
}
|
||||
.page-wrapper {
|
||||
overflow: hidden;
|
||||
}
|
||||
.page-navs {
|
||||
padding-right: 2rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.page-inner {
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.page-inner {
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.page-inner {
|
||||
padding-right: 30px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-inner-fill {
|
||||
padding: 0;
|
||||
height: calc(100% - 57px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page-sidebar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0px;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 22.5rem;
|
||||
box-shadow: none;
|
||||
transform: translate3d(100%,0,0);
|
||||
overflow: auto;
|
||||
z-index: 2;
|
||||
transition: transform .2s ease-in-out;
|
||||
border-left: 1px solid rgba(61,70,79,.125)!important;
|
||||
.back {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 0 0 1px rgba(61,70,79,.05), 0 1px 3px 0 rgba(61,70,79,.15);
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-sidebar-section {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 1200.5px) {
|
||||
.page-sidebar {
|
||||
transform: translateZ(0);
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200.5px) {
|
||||
.page-wrapper {
|
||||
&.has-sidebar {
|
||||
.page-inner {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pagesidebar_open {
|
||||
.page-sidebar {
|
||||
transform: translate3d(0, 0, 0) !important;
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-with-aside{
|
||||
display: flex;
|
||||
.page-aside{
|
||||
width: 280px;
|
||||
min-height: 100vh;
|
||||
border-right: 1px solid $grey-color;
|
||||
padding: 15px 0;
|
||||
.aside-header{
|
||||
padding: 15px 22px;
|
||||
.title{
|
||||
font-size: 24px;
|
||||
}
|
||||
.description{
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.aside-nav{
|
||||
.nav{
|
||||
flex-direction: column;
|
||||
> li {
|
||||
padding: 8px 22px;
|
||||
margin-bottom: 5px;
|
||||
&:hover, &:focus, &.active {
|
||||
background: rgba(51, 51, 51, 0.08);
|
||||
}
|
||||
&.active{
|
||||
padding: 12px 22px;
|
||||
font-weight: $font-weight-bold;
|
||||
> a {
|
||||
color: #575962 !important;
|
||||
}
|
||||
}
|
||||
> a {
|
||||
color: #83848a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
&:hover, &:focus{
|
||||
text-decoration: none;
|
||||
}
|
||||
i {
|
||||
font-size: 20px;
|
||||
margin-right: 15px;
|
||||
color: #a1a2a6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.label {
|
||||
padding: 5px 22px;
|
||||
margin-top: 22px;
|
||||
margin-bottom: 5px;
|
||||
display: block
|
||||
}
|
||||
}
|
||||
.aside-compose{
|
||||
padding: 25px 22px;
|
||||
}
|
||||
}
|
||||
.page-content{
|
||||
width: calc(100% - 280px);
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
border-top: 1px solid #eee;
|
||||
padding: 15px;
|
||||
background: $white-color;
|
||||
position: static;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
.container, .container-fluid {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
}
|
||||
}
|
||||
277
public/kai/build/scss/core/_main-panel.scss
Normal file
277
public/kai/build/scss/core/_main-panel.scss
Normal file
@@ -0,0 +1,277 @@
|
||||
.main-panel {
|
||||
position: relative;
|
||||
width: calc(100% - 265px);
|
||||
height: 100vh;
|
||||
min-height: 100%;
|
||||
float: right;
|
||||
transition: all .3s;
|
||||
> .container {
|
||||
min-height: calc(100% - 123px);
|
||||
margin-top: 69px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
max-width: unset;
|
||||
padding: 0 !important;
|
||||
}
|
||||
> .container-full{
|
||||
padding: 0px !important;
|
||||
min-height: calc(100% - 123px);
|
||||
margin-top: 70px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
max-width: unset;
|
||||
}
|
||||
.row {
|
||||
--bs-gutter-x: 30px;
|
||||
}
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
.page-title {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.btn-page-header-dropdown {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
font-size: 1rem;
|
||||
padding: 0px;
|
||||
color: #6b6b6b;
|
||||
box-shadow: 0 2px 14px 0 rgba(144, 116, 212, 0.1) !important;
|
||||
border: 0;
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.dropdown-menu {
|
||||
margin-top: 15px;
|
||||
top: 0px !important;
|
||||
&:after {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 8px solid $transparent-bg;
|
||||
border-right: 8px solid $transparent-bg;
|
||||
border-bottom: 8px solid $white-color;
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: 32px;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-divider {
|
||||
height: 0;
|
||||
margin: .3rem 0 1rem;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #ebecec;
|
||||
}
|
||||
}
|
||||
|
||||
/* Page Wrapper */
|
||||
.page-wrapper {
|
||||
min-height: calc(100vh - 57px);
|
||||
position: relative;
|
||||
&.has-sidebar {
|
||||
.page-inner {
|
||||
margin-left: 22.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-navs {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
box-shadow: 0 1px 1px 0 rgba(0,0,0,.07);
|
||||
z-index: 1;
|
||||
.nav {
|
||||
.nav-link {
|
||||
padding: 1rem !important;
|
||||
}
|
||||
}
|
||||
.nav-line {
|
||||
border: 0px !important;
|
||||
.nav-link {
|
||||
border-bottom-width: 3px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-scroller {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
.nav {
|
||||
flex-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 991px) {
|
||||
.main-panel {
|
||||
> .container-full{
|
||||
padding: 24px !important;
|
||||
}
|
||||
}
|
||||
.page-wrapper {
|
||||
overflow: hidden;
|
||||
}
|
||||
.page-navs {
|
||||
padding-right: 2rem;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.page-inner {
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.page-inner {
|
||||
padding-right: 30px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
// @media (min-width: 992px) {
|
||||
// .page-inner {
|
||||
// padding-right: 30px;
|
||||
// padding-left: 30px;
|
||||
// }
|
||||
// }
|
||||
|
||||
.page-inner-fill {
|
||||
padding: 0;
|
||||
height: calc(100% - 57px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page-sidebar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0px;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 22.5rem;
|
||||
box-shadow: none;
|
||||
transform: translate3d(100%,0,0);
|
||||
overflow: auto;
|
||||
z-index: 2;
|
||||
transition: transform .2s ease-in-out;
|
||||
border-right: 1px solid rgba(61,70,79,.125)!important;
|
||||
.back {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 0 0 1px rgba(61,70,79,.05), 0 1px 3px 0 rgba(61,70,79,.15);
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-sidebar-section {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 1200.5px) {
|
||||
.page-sidebar {
|
||||
transform: translateZ(0);
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1200.5px) {
|
||||
.page-wrapper {
|
||||
&.has-sidebar {
|
||||
.page-inner {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.pagesidebar_open {
|
||||
.page-sidebar {
|
||||
transform: translate3d(0, 0, 0) !important;
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-with-aside{
|
||||
display: flex;
|
||||
.page-aside{
|
||||
width: 280px;
|
||||
min-height: 100vh;
|
||||
border-right: 1px solid $grey-color;
|
||||
padding: 15px 0;
|
||||
.aside-header{
|
||||
padding: 15px 22px;
|
||||
.title{
|
||||
font-size: 24px;
|
||||
}
|
||||
.description{
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.aside-nav{
|
||||
.nav{
|
||||
flex-direction: column;
|
||||
> li {
|
||||
padding: 8px 22px;
|
||||
margin-bottom: 5px;
|
||||
&:hover, &:focus, &.active {
|
||||
background: rgba(51, 51, 51, 0.08);
|
||||
}
|
||||
&.active{
|
||||
padding: 12px 22px;
|
||||
font-weight: $font-weight-bold;
|
||||
> a {
|
||||
color: #575962 !important;
|
||||
}
|
||||
}
|
||||
> a {
|
||||
color: #83848a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
&:hover, &:focus{
|
||||
text-decoration: none;
|
||||
}
|
||||
i {
|
||||
font-size: 20px;
|
||||
margin-right: 15px;
|
||||
color: #a1a2a6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.label {
|
||||
padding: 5px 22px;
|
||||
margin-top: 22px;
|
||||
margin-bottom: 5px;
|
||||
display: block
|
||||
}
|
||||
}
|
||||
.aside-compose{
|
||||
padding: 25px 22px;
|
||||
}
|
||||
}
|
||||
.page-content{
|
||||
width: calc(100% - 280px);
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
border-top: 1px solid #eee;
|
||||
padding: 15px;
|
||||
background: $white-color;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
.container, .container-fluid {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
29
public/kai/build/scss/core/_opacity.scss
Normal file
29
public/kai/build/scss/core/_opacity.scss
Normal file
@@ -0,0 +1,29 @@
|
||||
/* Opacity */
|
||||
|
||||
.op-9 {
|
||||
opacity: 0.9 !important;
|
||||
}
|
||||
|
||||
.op-8 {
|
||||
opacity: 0.8 !important;
|
||||
}
|
||||
|
||||
.op-7 {
|
||||
opacity: 0.7 !important;
|
||||
}
|
||||
|
||||
.op-6 {
|
||||
opacity: 0.6 !important;
|
||||
}
|
||||
|
||||
.op-5 {
|
||||
opacity: 0.5 !important;
|
||||
}
|
||||
|
||||
.op-4 {
|
||||
opacity: 0.4 !important;
|
||||
}
|
||||
|
||||
.op-3 {
|
||||
opacity: 0.3 !important;
|
||||
}
|
||||
15
public/kai/build/scss/core/_plugins.scss
Normal file
15
public/kai/build/scss/core/_plugins.scss
Normal file
@@ -0,0 +1,15 @@
|
||||
@import "plugins/jqueryui";
|
||||
@import "plugins/jqueryscrollbar";
|
||||
@import "plugins/toggle";
|
||||
@import "plugins/animate";
|
||||
@import "plugins/fullcalendar";
|
||||
@import "plugins/sweetalert";
|
||||
@import "plugins/datatables";
|
||||
@import "plugins/datepicker";
|
||||
@import "plugins/select2";
|
||||
@import "plugins/tagsinput";
|
||||
@import "plugins/dropzone";
|
||||
@import "plugins/summernote";
|
||||
@import "plugins/owlcarousel";
|
||||
@import "plugins/magnific-popup";
|
||||
@import "plugins/jsvectormaps";
|
||||
83
public/kai/build/scss/core/_quick-sidebar.scss
Normal file
83
public/kai/build/scss/core/_quick-sidebar.scss
Normal file
@@ -0,0 +1,83 @@
|
||||
.quick-sidebar{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: -380px;
|
||||
width: 380px;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
height: 100vh;
|
||||
display: block;
|
||||
z-index: 1;
|
||||
background: $white-color;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
box-shadow: 2px 0px 20px rgba(69, 65, 78, 0.07);
|
||||
transition: all .3s;
|
||||
z-index: 1101;
|
||||
padding: 20px 20px 0;
|
||||
.scroll-wrapper {
|
||||
.scroll-element {
|
||||
opacity: 0.4 !important;
|
||||
}
|
||||
&:hover {
|
||||
.scroll-element {
|
||||
opacity: .8 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.close-quick-sidebar{
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
color: #999;
|
||||
}
|
||||
.nav-link {
|
||||
padding-top: 0px !important;
|
||||
padding-left: 10px !important;
|
||||
padding-right: 10px !important;
|
||||
margin-right: 15px !important;
|
||||
}
|
||||
.quick-wrapper{
|
||||
.quick-scroll{
|
||||
height: calc(100vh - 115px);
|
||||
overflow: auto;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.quick-content{
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
.category-title {
|
||||
font-size: 16px;
|
||||
font-weight: $font-weight-bold;
|
||||
padding-bottom: 10px;
|
||||
margin-top: 25px;
|
||||
display: block;
|
||||
border-bottom: 1px solid $grey-color;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quick-sidebar-overlay{
|
||||
position: fixed;
|
||||
z-index: 1100;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.63);
|
||||
}
|
||||
|
||||
.quick_sidebar_open{
|
||||
.quick-sidebar {
|
||||
right: 0px !important;
|
||||
}
|
||||
.rtl {
|
||||
.quick-sidebar {
|
||||
left: 0px !important;
|
||||
right: unset !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
501
public/kai/build/scss/core/_responsive-horizontal.scss
Normal file
501
public/kai/build/scss/core/_responsive-horizontal.scss
Normal file
@@ -0,0 +1,501 @@
|
||||
/* Responsive */
|
||||
@media screen and (max-width: 576px) {
|
||||
.row-card-no-pd {
|
||||
[class*=col-] {
|
||||
.card {
|
||||
&:before {
|
||||
width: calc(100% - 30px) !important;
|
||||
right: 15px !important;
|
||||
height: 1px !important;
|
||||
}
|
||||
}
|
||||
&:first-child {
|
||||
.card {
|
||||
&:before {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991.5px) {
|
||||
.main-header {
|
||||
.navbar-header {
|
||||
padding: 0px;
|
||||
#menuIconHeader {
|
||||
background: #fff;
|
||||
border-top: 1px solid #ededed;
|
||||
left: 0;
|
||||
}
|
||||
&[data-background-color] {
|
||||
#menuIconHeader {
|
||||
border-top: 2px solid rgba(255, 255, 255, 0.1) !important;
|
||||
border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
}
|
||||
.container, .container-full {
|
||||
padding-left: 0px !important;
|
||||
padding-right: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main-header .navbar-header .page-navigation > .nav-item:hover .navbar-dropdown {
|
||||
display: none !important;
|
||||
}
|
||||
.main-header .navbar-header .page-navigation > .nav-item .navbar-dropdown.show {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.main-header {
|
||||
.main-header-logo {
|
||||
display: none;
|
||||
}
|
||||
.navbar-header {
|
||||
.page-navigation {
|
||||
> .nav-item {
|
||||
> .nav-link {
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.main-panel {
|
||||
> .container {
|
||||
padding: 0px !important;
|
||||
&.container-full {
|
||||
padding: 24px !important;
|
||||
}
|
||||
}
|
||||
&.full-height {
|
||||
> .container, > .container-full{
|
||||
margin-top: 0;
|
||||
}
|
||||
.navbar-header {
|
||||
min-height: 62px;
|
||||
.page-navigation > .nav-item .navbar-dropdown.show {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.logo-header {
|
||||
line-height: 57px;
|
||||
}
|
||||
.toggle-nav-search {
|
||||
display: none;
|
||||
}
|
||||
#search-nav {
|
||||
display: block !important;
|
||||
}
|
||||
.sidebar {
|
||||
.scroll-element {
|
||||
opacity: 0;
|
||||
transition: all .2s;
|
||||
}
|
||||
&:hover .scroll-element {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.sidebar[data-background-color] {
|
||||
&:before {
|
||||
background: rgba(255, 255, 255, 0.2) !important;
|
||||
z-index: 1000;
|
||||
}
|
||||
}
|
||||
.body-overlay {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991.5px) {
|
||||
.container, .container-full {
|
||||
max-width: 100% !important;
|
||||
padding-left: 15px !important;
|
||||
padding-right: 15px !important;
|
||||
}
|
||||
.main-header[data-background-color] {
|
||||
.navbar-header {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: 0 !important;
|
||||
right: 0;
|
||||
transition: all .5s;
|
||||
margin-top: 0px;
|
||||
&:before {
|
||||
background: none;
|
||||
}
|
||||
.sidebar-logo {
|
||||
display: none;
|
||||
}
|
||||
.scrollbar-inner>.scroll-element.scroll-y {
|
||||
width: 4px;
|
||||
}
|
||||
.scrollbar-inner>.scroll-element.scroll-x {
|
||||
height: 4px;
|
||||
}
|
||||
}
|
||||
.nav_open .sidebar {
|
||||
-webkit-transform: translate3d(0px, 0, 0);
|
||||
-moz-transform: translate3d(0px, 0, 0);
|
||||
-o-transform: translate3d(0px, 0, 0);
|
||||
-ms-transform: translate3d(0px, 0, 0);
|
||||
transform: translate3d(0px, 0, 0) !important;
|
||||
}
|
||||
.sidebar .sidebar-wrapper {
|
||||
padding-top: 0px;
|
||||
.sidebar-content {
|
||||
padding-top: 0px !important;
|
||||
padding-bottom: 60px !important;
|
||||
}
|
||||
.scroll-element.scroll-y {
|
||||
top: 0px !important;
|
||||
}
|
||||
}
|
||||
.nav_open {
|
||||
overflow: hidden !important;
|
||||
.wrapper {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.main-panel {
|
||||
-webkit-transform: translate3d(265px, 0, 0);
|
||||
-moz-transform: translate3d(265px, 0, 0);
|
||||
-o-transform: translate3d(265px, 0, 0);
|
||||
-ms-transform: translate3d(265px, 0, 0);
|
||||
transform: translate3d(265px, 0, 0) !important;
|
||||
}
|
||||
}
|
||||
.quick_sidebar_open .quick-sidebar {
|
||||
width: 350px;
|
||||
}
|
||||
.main-header {
|
||||
width: 100% !important;
|
||||
transition: all .5s;
|
||||
.main-header-logo {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.dropdown-search {
|
||||
min-width: unset;
|
||||
max-width: 350px !important;
|
||||
}
|
||||
#search-nav {
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
.main-panel {
|
||||
width: 100%;
|
||||
transition: all .5s;
|
||||
> .container {
|
||||
transition: all .5s;
|
||||
}
|
||||
.page-header {
|
||||
.dropdown-menu {
|
||||
&:after {
|
||||
right: 16px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-inner {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
.page-sidebar {
|
||||
background: #fff;
|
||||
}
|
||||
.logo-header {
|
||||
display: flex;
|
||||
width: 100% !important;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
.logo {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.navbar-toggler {
|
||||
height: 100%;
|
||||
margin-left: 0px !important;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
order: 1;
|
||||
}
|
||||
.more {
|
||||
opacity: 1;
|
||||
color: #545454;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
line-height: 56px;
|
||||
order: 3;
|
||||
width: unset;
|
||||
margin-left: auto;
|
||||
}
|
||||
.navbar-brand {
|
||||
position: unset !important;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
.topbar_open {
|
||||
.logo-header {
|
||||
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
.nav-search {
|
||||
width: 100%;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.topbar_open {
|
||||
.toggle-nav-search {
|
||||
display: list-item;
|
||||
}
|
||||
#search-nav {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding: 10px 15px 0px;
|
||||
order: 1;
|
||||
}
|
||||
.main-panel {
|
||||
transform: translate3d(0, 61px, 0) !important;
|
||||
transition: all 0.5s ease 0s;
|
||||
}
|
||||
> .content {
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
}
|
||||
.page_navigation_open {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
.nav_open.topbar_open .main-panel {
|
||||
transform: translate3d(250px, 0, 0) !important;
|
||||
}
|
||||
.navbar-header .navbar-nav {
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
margin-left: 0px !important;
|
||||
position: relative;
|
||||
.dropdown {
|
||||
position: unset;
|
||||
}
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
max-width: 280px;
|
||||
}
|
||||
}
|
||||
.profile-pic span {
|
||||
display: none;
|
||||
}
|
||||
// .nav-toggle{
|
||||
// display: none;
|
||||
// }
|
||||
.page-title{
|
||||
font-size: 18px;
|
||||
}
|
||||
.card {
|
||||
.card-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.mail-wrapper {
|
||||
.mail-option {
|
||||
.email-filters-left {
|
||||
width: 50%;
|
||||
.btn-group {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Dropzone */
|
||||
.dropzone {
|
||||
padding: 20px 15px !important;
|
||||
.dz-message {
|
||||
.message {
|
||||
font-size: 23px;
|
||||
}
|
||||
.note {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 856px) {
|
||||
.mail-wrapper {
|
||||
.aside-nav {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 856px) {
|
||||
.mail-wrapper {
|
||||
flex-direction: column;
|
||||
.page-aside {
|
||||
width: 100%;
|
||||
height: unset;
|
||||
min-height: unset;
|
||||
border-bottom: 1px solid #eee;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
background: $transparent-bg;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
.aside-header {
|
||||
padding-top: 25px;
|
||||
padding-bottom: 25px;
|
||||
background: $grey-color;
|
||||
}
|
||||
.aside-nav {
|
||||
background: $white-color;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
}
|
||||
.mail-content {
|
||||
width: 100%;
|
||||
.inbox-head{
|
||||
flex-direction: column;
|
||||
align-items: left;
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
form {
|
||||
margin-left: 0px !important;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
.email-head{
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.email-compose-fields {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
}
|
||||
.mail-option {
|
||||
flex-direction: column;
|
||||
.email-filters-left {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.toggle-email-nav {
|
||||
display: inline-block !important;
|
||||
}
|
||||
.table-inbox {
|
||||
tr {
|
||||
td {
|
||||
.badge {
|
||||
margin-top: 5px;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px){
|
||||
.wizard-container {
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.main-panel {
|
||||
.page-header {
|
||||
flex-direction: column;
|
||||
align-items: normal;
|
||||
position: relative;
|
||||
min-height: 43px;
|
||||
justify-content: center;
|
||||
.breadcrumbs {
|
||||
margin-left: 0px;
|
||||
padding-top: 15px;
|
||||
padding-left: 5px;
|
||||
padding-bottom: 0px;
|
||||
border-left: 0px;
|
||||
}
|
||||
.btn-group-page-header{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer > .container-fluid, .footer > .container{
|
||||
flex-direction: column;
|
||||
.copyright {
|
||||
margin-left: 0 !important;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 576px){
|
||||
.container , .container-full {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.main-panel {
|
||||
> .container , > .container-full {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
#chart-container {
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
.form-check-inline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: left;
|
||||
}
|
||||
|
||||
#calendar {
|
||||
.fc-toolbar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
%fc-position-margin {
|
||||
margin: auto;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.fc-left {
|
||||
@extend %fc-position-margin;
|
||||
order: 1;
|
||||
}
|
||||
.fc-right {
|
||||
@extend %fc-position-margin;
|
||||
order: 3;
|
||||
}
|
||||
.fc-center {
|
||||
@extend %fc-position-margin;
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.conversations {
|
||||
.conversations-body {
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
510
public/kai/build/scss/core/_responsive.scss
Normal file
510
public/kai/build/scss/core/_responsive.scss
Normal file
@@ -0,0 +1,510 @@
|
||||
/* Responsive */
|
||||
@media screen and (max-width: 576px) {
|
||||
.row-card-no-pd {
|
||||
[class*=col-] {
|
||||
.card {
|
||||
&:before {
|
||||
width: calc(100% - 30px) !important;
|
||||
right: 15px !important;
|
||||
height: 1px !important;
|
||||
}
|
||||
}
|
||||
&:first-child {
|
||||
.card {
|
||||
&:before {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 992px) {
|
||||
.main-header {
|
||||
.main-header-logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.main-panel {
|
||||
> .container {
|
||||
// padding: 24px !important;
|
||||
&.container-full {
|
||||
padding: 0px !important;
|
||||
}
|
||||
}
|
||||
&.full-height {
|
||||
> .container, > .container-full{
|
||||
margin-top: 0;
|
||||
}
|
||||
.navbar-header {
|
||||
min-height: 62px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.logo-header {
|
||||
line-height: 57px;
|
||||
}
|
||||
.nav-toggle{
|
||||
.sidenav-toggler {
|
||||
display: none;
|
||||
}
|
||||
.toggle-sidebar {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.toggle-nav-search {
|
||||
display: none;
|
||||
}
|
||||
#search-nav {
|
||||
display: block !important;
|
||||
}
|
||||
.sidebar {
|
||||
.scroll-element {
|
||||
opacity: 0;
|
||||
transition: all .2s;
|
||||
}
|
||||
&:hover .scroll-element {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.sidebar[data-background-color] {
|
||||
&:before {
|
||||
background: rgba(255, 255, 255, 0.2) !important;
|
||||
z-index: 1000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991.5px) {
|
||||
.container, .container-full {
|
||||
max-width: 100% !important;
|
||||
padding-left: 15px !important;
|
||||
padding-right: 15px !important;
|
||||
}
|
||||
.main-header[data-background-color] {
|
||||
.navbar-header {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: 0 !important;
|
||||
right: 0;
|
||||
-webkit-transform: translate3d(-270px, 0, 0);
|
||||
-moz-transform: translate3d(-270px, 0, 0);
|
||||
-o-transform: translate3d(-270px, 0, 0);
|
||||
-ms-transform: translate3d(-270px, 0, 0);
|
||||
transform: translate3d(-270px, 0, 0) !important;
|
||||
transition: all .5s;
|
||||
margin-top: 0px;
|
||||
&:before {
|
||||
background: none;
|
||||
}
|
||||
.sidebar-logo {
|
||||
display: none;
|
||||
}
|
||||
.scrollbar-inner>.scroll-element.scroll-y {
|
||||
width: 4px;
|
||||
}
|
||||
.scrollbar-inner>.scroll-element.scroll-x {
|
||||
height: 4px;
|
||||
}
|
||||
}
|
||||
.nav_open .sidebar {
|
||||
-webkit-transform: translate3d(0px, 0, 0);
|
||||
-moz-transform: translate3d(0px, 0, 0);
|
||||
-o-transform: translate3d(0px, 0, 0);
|
||||
-ms-transform: translate3d(0px, 0, 0);
|
||||
transform: translate3d(0px, 0, 0) !important;
|
||||
}
|
||||
.sidebar .sidebar-wrapper {
|
||||
padding-top: 0px;
|
||||
.sidebar-content {
|
||||
padding-top: 0px !important;
|
||||
padding-bottom: 60px !important;
|
||||
}
|
||||
.scroll-element.scroll-y {
|
||||
top: 0px !important;
|
||||
}
|
||||
}
|
||||
.nav_open {
|
||||
overflow: hidden !important;
|
||||
.wrapper {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.main-panel {
|
||||
-webkit-transform: translate3d(265px, 0, 0);
|
||||
-moz-transform: translate3d(265px, 0, 0);
|
||||
-o-transform: translate3d(265px, 0, 0);
|
||||
-ms-transform: translate3d(265px, 0, 0);
|
||||
transform: translate3d(265px, 0, 0) !important;
|
||||
}
|
||||
}
|
||||
.quick_sidebar_open .quick-sidebar {
|
||||
max-width: 350px;
|
||||
width: 100%;
|
||||
}
|
||||
.main-header {
|
||||
width: 100% !important;
|
||||
transition: all .5s;
|
||||
.main-header-logo {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.dropdown-search {
|
||||
min-width: unset;
|
||||
max-width: 350px !important;
|
||||
}
|
||||
#search-nav {
|
||||
margin: 0 auto !important;
|
||||
}
|
||||
.main-panel {
|
||||
width: 100%;
|
||||
transition: all .5s;
|
||||
> .container {
|
||||
transition: all .5s;
|
||||
}
|
||||
.page-header {
|
||||
.dropdown-menu {
|
||||
&:after {
|
||||
right: 16px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-inner {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
.page-sidebar {
|
||||
background: #fff;
|
||||
}
|
||||
.logo-header {
|
||||
display: flex;
|
||||
width: 100% !important;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
.logo {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.navbar-toggler {
|
||||
height: 100%;
|
||||
margin-left: 0px !important;
|
||||
opacity: 1;
|
||||
display: block;
|
||||
order: 1;
|
||||
}
|
||||
.more {
|
||||
opacity: 1;
|
||||
color: #545454;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
line-height: 56px;
|
||||
order: 3;
|
||||
width: unset;
|
||||
margin-left: auto;
|
||||
}
|
||||
.navbar-brand {
|
||||
position: unset !important;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
.topbar_open {
|
||||
.logo-header {
|
||||
border-bottom: 2px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
.nav-search {
|
||||
width: 100%;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.navbar-header {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
transform: translate3d(0, -200px, 0) !important;
|
||||
transition: all .5s;
|
||||
}
|
||||
.topbar_open {
|
||||
.navbar-header {
|
||||
transform: translate3d(0, 70px, 0) !important;
|
||||
background: #fff;
|
||||
.navbar-nav {
|
||||
> .nav-item {
|
||||
.nav-link {
|
||||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
.nav-link {
|
||||
padding: 0px !important;
|
||||
}
|
||||
.quick-sidebar-toggler {
|
||||
padding-left: 5px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.toggle-nav-search {
|
||||
display: list-item;
|
||||
}
|
||||
#search-nav {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding: 10px 15px 0px;
|
||||
order: 1;
|
||||
}
|
||||
.main-panel {
|
||||
// transform: translate3d(0, 62px, 0) !important;
|
||||
> .container {
|
||||
margin-top: 123px;
|
||||
}
|
||||
}
|
||||
> .content {
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
}
|
||||
.nav_open.topbar_open .main-panel {
|
||||
transform: translate3d(265px, 0, 0) !important;
|
||||
}
|
||||
.navbar-header .navbar-nav {
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
margin-left: 0px !important;
|
||||
position: relative;
|
||||
.dropdown {
|
||||
position: unset;
|
||||
}
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
margin: 0 auto;
|
||||
max-width: calc(100vw - 48px);
|
||||
}
|
||||
}
|
||||
.profile-pic span {
|
||||
display: none;
|
||||
}
|
||||
.nav-toggle{
|
||||
left: 15px !important;
|
||||
right: unset !important;
|
||||
.sidenav-toggler {
|
||||
display: inline-block;
|
||||
}
|
||||
.toggle-sidebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.page-title{
|
||||
font-size: 18px;
|
||||
}
|
||||
.card {
|
||||
.card-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.mail-wrapper {
|
||||
.mail-option {
|
||||
.email-filters-left {
|
||||
width: 50%;
|
||||
.btn-group {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Dropzone */
|
||||
.dropzone {
|
||||
padding: 20px 15px !important;
|
||||
.dz-message {
|
||||
.message {
|
||||
font-size: 23px;
|
||||
}
|
||||
.note {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 856px) {
|
||||
.mail-wrapper {
|
||||
.aside-nav {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 856px) {
|
||||
.mail-wrapper {
|
||||
flex-direction: column;
|
||||
.page-aside {
|
||||
width: 100%;
|
||||
height: unset;
|
||||
min-height: unset;
|
||||
border-bottom: 1px solid #eee;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
background: $transparent-bg;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
.aside-header {
|
||||
padding-top: 25px;
|
||||
padding-bottom: 25px;
|
||||
background: $grey-color;
|
||||
}
|
||||
.aside-nav {
|
||||
background: $white-color;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
}
|
||||
.mail-content {
|
||||
width: 100%;
|
||||
.inbox-head{
|
||||
flex-direction: column;
|
||||
align-items: left;
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
form {
|
||||
margin-left: 0px !important;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
.email-head{
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.email-compose-fields {
|
||||
padding: 20px 15px;
|
||||
}
|
||||
}
|
||||
.mail-option {
|
||||
flex-direction: column;
|
||||
.email-filters-left {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.toggle-email-nav {
|
||||
display: inline-block !important;
|
||||
}
|
||||
.table-inbox {
|
||||
tr {
|
||||
td {
|
||||
.badge {
|
||||
margin-top: 5px;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px){
|
||||
.wizard-container {
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.main-panel {
|
||||
.page-header {
|
||||
flex-direction: column;
|
||||
align-items: normal;
|
||||
position: relative;
|
||||
min-height: 43px;
|
||||
justify-content: center;
|
||||
.breadcrumbs {
|
||||
margin-left: 0px;
|
||||
padding-top: 15px;
|
||||
padding-left: 5px;
|
||||
padding-bottom: 0px;
|
||||
border-left: 0px;
|
||||
}
|
||||
.btn-group-page-header{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer > .container-fluid, .footer > .container{
|
||||
flex-direction: column;
|
||||
.copyright {
|
||||
margin-left: 0 !important;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 576px){
|
||||
.container , .container-full {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.main-panel {
|
||||
> .container , > .container-full {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
#chart-container {
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
.form-check-inline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: left;
|
||||
}
|
||||
|
||||
#calendar {
|
||||
.fc-toolbar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
%fc-position-margin {
|
||||
margin: auto;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.fc-left {
|
||||
@extend %fc-position-margin;
|
||||
order: 1;
|
||||
}
|
||||
.fc-right {
|
||||
@extend %fc-position-margin;
|
||||
order: 3;
|
||||
}
|
||||
.fc-center {
|
||||
@extend %fc-position-margin;
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.conversations {
|
||||
.conversations-body {
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 350px){
|
||||
.quick_sidebar_open .quick-sidebar {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
312
public/kai/build/scss/core/_rtl.scss
Normal file
312
public/kai/build/scss/core/_rtl.scss
Normal file
@@ -0,0 +1,312 @@
|
||||
/* RTL Layout */
|
||||
.rtl {
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
position: unset;
|
||||
.logo-header {
|
||||
float: right;
|
||||
.nav-toggle {
|
||||
left: 18px;
|
||||
right: unset;
|
||||
}
|
||||
}
|
||||
.nav, .list-unstyled {
|
||||
padding-right: 0px;
|
||||
}
|
||||
.navbar {
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
margin-left: 7px;
|
||||
&:last-child {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.navbar-expand-lg .navbar-nav .dropdown-menu {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
.navbar-header .dropdown-menu:after{
|
||||
left: 10px;
|
||||
right: unset;
|
||||
}
|
||||
.sidebar {
|
||||
right: 0;
|
||||
left: unset;
|
||||
.user .info {
|
||||
a > span {
|
||||
text-align: right;
|
||||
}
|
||||
.caret {
|
||||
left: 0px;
|
||||
right: unset;
|
||||
}
|
||||
}
|
||||
.nav {
|
||||
> .nav-item {
|
||||
a {
|
||||
i {
|
||||
margin-right: 0px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
p {
|
||||
margin-right: 0px;
|
||||
}
|
||||
.caret {
|
||||
margin-right: auto;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-section {
|
||||
.text-section {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-collapse {
|
||||
li a .sub-item {
|
||||
margin-left: 0px;
|
||||
margin-right: 25px;
|
||||
&:before {
|
||||
left: unset;
|
||||
right: -15px;
|
||||
}
|
||||
}
|
||||
&.subnav li a{
|
||||
padding-left: 25px !important;
|
||||
padding-right: 40px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sidebar .nav > .nav-item.active > a:before, .sidebar[data-background-color="white"] .nav > .nav-item.active > a:before, .sidebar .nav > .nav-item.active:hover > a:before, .sidebar[data-background-color="white"] .nav > .nav-item.active:hover > a:before, .sidebar .nav > .nav-item a[data-toggle=collapse][aria-expanded=true]:before, .sidebar[data-background-color="white"] .nav > .nav-item a[data-toggle=collapse][aria-expanded=true]:before{
|
||||
left: unset;
|
||||
right:0;
|
||||
}
|
||||
.quick-sidebar{
|
||||
left: -380px;
|
||||
right: unset;
|
||||
.nav-link {
|
||||
margin-left: 15px !important;
|
||||
margin-right: unset;
|
||||
}
|
||||
.close-quick-sidebar {
|
||||
right: unset;
|
||||
left: 25px;
|
||||
}
|
||||
}
|
||||
.scrollbar-inner > .scroll-element.scroll-y, .scrollbar-outer > .scroll-element.scroll-y {
|
||||
left: 2px;
|
||||
right: unset;
|
||||
}
|
||||
.scrollbar-outer > .scroll-content.scroll-scrolly_visible {
|
||||
right: -12px;
|
||||
margin-right: 12px !important;
|
||||
}
|
||||
.messages-contact .contact-list .user a .user-data, .messages-contact .contact-list .user a .user-data2 {
|
||||
margin-right: 20px;
|
||||
margin-left: 0;
|
||||
}
|
||||
.messages-wrapper .messages-body .message-in, .conversations-body .message-in {
|
||||
margin-left: 40px;
|
||||
margin-right: 0;
|
||||
float: right;
|
||||
}
|
||||
.messages-wrapper .messages-body .message-in .message-body .message-content, .conversations-body .message-in .message-body .message-content{
|
||||
margin-left: 0;
|
||||
margin-right: 10px;
|
||||
&:before {
|
||||
left: unset;
|
||||
right: -10px;
|
||||
border-left: 10px solid #f7f7f7;
|
||||
border-right-width: 0;
|
||||
}
|
||||
}
|
||||
.messages-wrapper .messages-body .message-in .message-body .date, .conversations-body .message-in .message-body .date{
|
||||
margin-right: 10px;
|
||||
padding-right: 12px;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.messages-wrapper .messages-body .message-out, .conversations-body .message-out{
|
||||
float: left;
|
||||
margin-left: 0;
|
||||
margin-right: 40px;
|
||||
}
|
||||
.messages-wrapper .messages-body .message-out .message-body .message-content, .conversations-body .message-out .message-body .message-content{
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
&:before {
|
||||
right: unset;
|
||||
left: -10px;
|
||||
border-right: 10px solid $primary-color;
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
.messages-wrapper .messages-body .message-out .message-body .date, .conversations-body .message-out .message-body .date{
|
||||
margin-left: 10px;
|
||||
padding-left: 15px;
|
||||
margin-right: 0;
|
||||
padding-right: 0;
|
||||
text-align: left;
|
||||
}
|
||||
.messages-form .messages-form-control {
|
||||
padding-right: 0;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.main-panel {
|
||||
float: left;
|
||||
}
|
||||
.card-title, .card-category {
|
||||
text-align: right;
|
||||
}
|
||||
.card .card-header .card-head-row .card-tools {
|
||||
margin-right: auto;
|
||||
margin-left: unset;
|
||||
padding-left: 0;
|
||||
padding-right: 15px;
|
||||
}
|
||||
.card-stats .col-icon {
|
||||
margin-left: 0px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.card-pricing .specification-list {
|
||||
padding-right: 0px;
|
||||
}
|
||||
.card-profile .user-stats [class^="col"] {
|
||||
border-left: 1px solid #ebebeb;
|
||||
border-right-width: 0;
|
||||
&:last-child{
|
||||
border-left: 0px;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
.btn-label {
|
||||
i {
|
||||
margin-left: 2px;
|
||||
margin-right: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-toggle::after{
|
||||
margin-right: .255em;
|
||||
margin-left: 0;
|
||||
}
|
||||
.avatar-online::before, .avatar-offline::before, .avatar-away::before {
|
||||
left: 0;
|
||||
right: unset;
|
||||
}
|
||||
.badge {
|
||||
margin-left: unset;
|
||||
margin-right: auto;
|
||||
}
|
||||
.nav-pills.nav-pills-no-bd li{
|
||||
margin-left: unset !important;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.nav-pills.nav-pills-no-bd li:first-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
// .nav-pills > li:first-child > .nav-link {
|
||||
// border-radius: 0 4px 4px 0 !important;
|
||||
// }
|
||||
// .nav-pills > li:last-child > .nav-link {
|
||||
// border-radius: 4px 0 0 4px !important;
|
||||
// }
|
||||
.input-group>.custom-select:first-child, .input-group>.form-control:first-child{
|
||||
border-radius: 0 .25rem .25rem 0 !important;
|
||||
}
|
||||
.input-group>.input-group-append>.btn, .input-group>.input-group-append>.input-group-text, .input-group>.input-group-prepend:first-child>.btn:not(:first-child), .input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child), .input-group>.input-group-prepend:not(:first-child)>.btn, .input-group>.input-group-prepend:not(:first-child)>.input-group-text{
|
||||
border-radius: .25rem 0 0 .25rem !important;
|
||||
}
|
||||
.btn-group>.btn-group:first-child>.btn, .btn-group>.btn:first-child:not(.dropdown-toggle) {
|
||||
border-radius: 0 3px 3px 0 !important;
|
||||
}
|
||||
.btn-group>.btn-group:last-child>.btn, .btn-group>.btn:last-child {
|
||||
border-radius: 3px 0 0 3px !important;
|
||||
}
|
||||
.btn-group .btn+.btn, .btn-group .btn+.btn-group, .btn-group .btn-group+.btn, .btn-group .btn-group+.btn-group, .btn-group-vertical .btn+.btn, .btn-group-vertical .btn+.btn-group, .btn-group-vertical .btn-group+.btn, .btn-group-vertical .btn-group+.btn-group {
|
||||
margin-right: -1px;
|
||||
margin-left: unset;
|
||||
}
|
||||
.activity-feed .feed-item {
|
||||
border-left-width: 0;
|
||||
border-right: 2px solid #e4e8eb;
|
||||
padding-right: 30px;
|
||||
padding-left: 0;
|
||||
&:after {
|
||||
left: unset;
|
||||
right: -7px;
|
||||
}
|
||||
}
|
||||
.dropdown-menu {
|
||||
text-align: right;
|
||||
}
|
||||
.pagination {
|
||||
padding-right: 0;
|
||||
}
|
||||
.notif-box .notif-center a .notif-content, .messages-notif-box .notif-center a .notif-content {
|
||||
padding: 10px 0px 10px 15px;
|
||||
}
|
||||
.avatar-group .avatar + .avatar {
|
||||
margin-left: unset;
|
||||
margin-right: -.75rem;
|
||||
}
|
||||
.html-legend li span {
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.custom-control.custom-radio, .custom-control.custom-checkbox {
|
||||
padding-left: 0;
|
||||
padding-right: 2em;
|
||||
}
|
||||
.custom-control-label{
|
||||
&::before, &::after{
|
||||
left: 0;
|
||||
right: -1.5rem;
|
||||
}
|
||||
}
|
||||
.toggle-off.btn {
|
||||
padding-left: 42px;
|
||||
}
|
||||
.tasks-wrapper .tasks-content .tasks-list li {
|
||||
.custom-control.custom-checkbox {
|
||||
margin-left: 50px !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
.task-action {
|
||||
right: unset;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
.settings-wrapper .settings-content .settings-list {
|
||||
padding-right: 0;
|
||||
}
|
||||
.settings-wrapper .settings-content .settings-list li .item-control {
|
||||
float: left;
|
||||
}
|
||||
.page-with-aside .page-aside .aside-nav .nav > li > a i{
|
||||
margin-left: 15px;
|
||||
margin-right: 0;
|
||||
}
|
||||
.mail-wrapper .mail-content .inbox-body .email-list .email-list-item .email-list-detail .date .paperclip{
|
||||
padding-right: 0;
|
||||
padding-left: 4px;
|
||||
}
|
||||
.mail-wrapper .mail-content .inbox-body .email-list .email-list-item .email-list-actions .custom-checkbox {
|
||||
margin-left: 0;
|
||||
margin-right: 25px;
|
||||
}
|
||||
.mail-wrapper .mail-content .email-sender .avatar{
|
||||
padding-right: 0;
|
||||
padding-left: 12px;
|
||||
}
|
||||
.mail-wrapper .mail-content .email-head .controls > a:last-child{
|
||||
padding-right: 5px;
|
||||
padding-left: 0;
|
||||
}
|
||||
.mail-wrapper .mail-content .email-attachments ul{
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
776
public/kai/build/scss/core/_sidebar.scss
Normal file
776
public/kai/build/scss/core/_sidebar.scss
Normal file
@@ -0,0 +1,776 @@
|
||||
.sidebar, .sidebar[data-background-color="white"] {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 265px;
|
||||
display: block;
|
||||
z-index: 1002;
|
||||
color: $white-color;
|
||||
font-weight: 200;
|
||||
background: $white-color;
|
||||
-webkit-box-shadow: 4px 4px 10px rgba(69, 65, 78, 0.06);
|
||||
-moz-box-shadow: 4px 4px 10px rgba(69, 65, 78, 0.06);
|
||||
box-shadow: 4px 4px 10px rgba(69, 65, 78, 0.06);
|
||||
transition: all .3s;
|
||||
.user {
|
||||
padding-top: 15px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
padding-bottom: 15px;
|
||||
border-top: 1px solid $grey-color;
|
||||
border-bottom: 1px solid $grey-color;
|
||||
display: block;
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
.info {
|
||||
a {
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
position: relative;
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
> span {
|
||||
font-size: 1rem;
|
||||
font-weight: $font-weight-normal;
|
||||
color: #777;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.user-level {
|
||||
color: #555;
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
.link-collapse {
|
||||
padding: 7px 0;
|
||||
}
|
||||
}
|
||||
.caret {
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
right: 0px;
|
||||
border-top-color: #777;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sidebar-wrapper {
|
||||
position: relative;
|
||||
max-height: calc(100vh - 75px);
|
||||
min-height: 100%;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
z-index: 4;
|
||||
transition: all .3s;
|
||||
.sidebar-content{
|
||||
padding-top: 0px;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
.scroll-element.scroll-y{
|
||||
top: 5px !important;
|
||||
}
|
||||
}
|
||||
.nav {
|
||||
display: block;
|
||||
float: none;
|
||||
margin-top: 20px;
|
||||
.nav-section{
|
||||
margin: 15px 0 0 0;
|
||||
.sidebar-mini-icon{
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
color: rgb(144, 144, 147);
|
||||
display: none;
|
||||
}
|
||||
.text-section{
|
||||
padding: 2px 30px;
|
||||
font-size: 12px;
|
||||
color: #727275;
|
||||
font-weight: $font-weight-bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 12px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
> .nav-item {
|
||||
display: list-item;
|
||||
&.active {
|
||||
> a {
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
color: $body-text-color !important;
|
||||
&:before {
|
||||
background: #1d7af3;
|
||||
@extend %nav-item-hover-before;
|
||||
}
|
||||
p {
|
||||
color: $body-text-color !important;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
}
|
||||
&:hover > a:before {
|
||||
background: #1d7af3;
|
||||
@extend %nav-item-hover-before;
|
||||
}
|
||||
a i {
|
||||
color: #4d7cfe;
|
||||
}
|
||||
}
|
||||
&.submenu{
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
> li {
|
||||
> a {
|
||||
i {
|
||||
color: rgba(23, 125, 255, 0.76);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> a:hover, a:focus {
|
||||
// background: rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #575962;
|
||||
padding: 6px 25px;
|
||||
width: 100%;
|
||||
font-size: 1rem;
|
||||
font-weight: $font-weight-normal;
|
||||
position: relative;
|
||||
margin-bottom: 3px;
|
||||
text-decoration: none !important;
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
p {
|
||||
color: #575962 !important;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
i {
|
||||
color: #4d7cfe !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
a {
|
||||
.letter-icon{
|
||||
color: #a1a2a6;
|
||||
margin-right: 15px;
|
||||
width: 25px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
float: left;
|
||||
font-size: 20px;
|
||||
font-weight: 200;
|
||||
}
|
||||
i {
|
||||
color: #8d9498;
|
||||
margin-right: 15px;
|
||||
width: 25px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
&[class^="flaticon-"]{
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 0px;
|
||||
margin-right: 5px;
|
||||
white-space: nowrap;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
.caret{
|
||||
margin-left: auto;
|
||||
margin-right: 6px;
|
||||
transition: all .5s;
|
||||
color: #8d9498;
|
||||
}
|
||||
}
|
||||
a[data-toggle=collapse][aria-expanded=true]{
|
||||
background: transparent;
|
||||
p {
|
||||
color: #575962;
|
||||
}
|
||||
i {
|
||||
color: #4d7cfe;
|
||||
}
|
||||
.caret {
|
||||
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
|
||||
-webkit-transform: rotate(-180deg);
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
&:before {
|
||||
background: #1d7af3;
|
||||
@extend %nav-item-hover-before;
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin nav-sidebar-state($color) {
|
||||
> .nav-item {
|
||||
a:hover, a:focus, a[data-toggle=collapse][aria-expanded=true] {
|
||||
i {
|
||||
color: $color !important;
|
||||
}
|
||||
}
|
||||
a[data-toggle=collapse][aria-expanded=true] {
|
||||
&:before {
|
||||
background: $color !important;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
a {
|
||||
&:before {
|
||||
background: $color !important;
|
||||
}
|
||||
i {
|
||||
color: $color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-collapse li.active > a {
|
||||
color: $color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-primary {
|
||||
@include nav-sidebar-state($primary-color);
|
||||
}
|
||||
&.nav-secondary {
|
||||
@include nav-sidebar-state($secondary-color);
|
||||
}
|
||||
&.nav-info {
|
||||
@include nav-sidebar-state($info-color);
|
||||
}
|
||||
&.nav-success {
|
||||
@include nav-sidebar-state($success-color);
|
||||
}
|
||||
&.nav-warning {
|
||||
@include nav-sidebar-state($warning-color);
|
||||
}
|
||||
&.nav-danger {
|
||||
@include nav-sidebar-state($danger-color);
|
||||
}
|
||||
}
|
||||
%nav-item-hover-before {
|
||||
opacity: 1 !important;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
content: '';
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.nav-collapse{
|
||||
margin-top: 0px;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 15px;
|
||||
padding-top: 10px;
|
||||
li {
|
||||
&.active {
|
||||
> a {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
a:before, a:hover:before{
|
||||
opacity: 0 !important;
|
||||
}
|
||||
a {
|
||||
margin-bottom: 3px !important;
|
||||
padding: 10px 25px !important;
|
||||
.sub-item{
|
||||
font-size: 1rem;
|
||||
position: relative;
|
||||
margin-left: 25px;
|
||||
opacity: .85;
|
||||
&:before{
|
||||
content: '';
|
||||
height: 4px;
|
||||
width: 4px;
|
||||
background: rgba(131, 132, 138, 0.89);
|
||||
position: absolute;
|
||||
left: -15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.sub-item {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.sidebar-mini-icon {
|
||||
font-size: 16px;
|
||||
color: #C3C5CA;
|
||||
margin-right: 15px;
|
||||
width: 25px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
float: left;
|
||||
font-weight: $font-weight-light !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.subnav {
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 0px;
|
||||
li {
|
||||
a {
|
||||
padding-left: 40px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.profile-section {
|
||||
.border-right, .border-left, .border-top, .border-bottom {
|
||||
border-color: rgba(255,255,255,.3) !important;
|
||||
}
|
||||
}
|
||||
.user-profile {
|
||||
.user-name {
|
||||
font-size: 16px;
|
||||
}
|
||||
.user-level {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.menubar {
|
||||
color: #fff;
|
||||
line-height: 80px;
|
||||
font-size: 18px;
|
||||
opacity: .9;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
&[data-background-color="dark"], &[data-background-color="dark2"] {
|
||||
.nav {
|
||||
.nav-item {
|
||||
> a:hover, > a:focus, &.submenu {
|
||||
background: rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
&.submenu {
|
||||
> a {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
> a {
|
||||
background: rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo-header {
|
||||
float: left;
|
||||
width: 265px;
|
||||
height: 70px;
|
||||
line-height: 60px;
|
||||
color: #333333;
|
||||
z-index: 1001;
|
||||
font-size: 17px;
|
||||
font-weight: $font-weight-normal;
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
z-index: 1001;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
transition: all .3s;
|
||||
.big-logo {
|
||||
margin-right: 8px;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.logo-img{
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
}
|
||||
}
|
||||
.logo {
|
||||
color: $body-text-color;
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.navbar-brand{
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
.nav-toggle{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 18px;
|
||||
z-index: 5;
|
||||
}
|
||||
.navbar-toggler {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
opacity: 0;
|
||||
display: none;
|
||||
.navbar-toggler-icon {
|
||||
height: unset;
|
||||
width: unset;
|
||||
display: block;
|
||||
color: #545454;
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
.more {
|
||||
background: $transparent-bg;
|
||||
border: 0;
|
||||
font-size: 22px;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-toggle{
|
||||
font-size: 20px !important;
|
||||
line-height: 20px;
|
||||
padding: 0px !important;
|
||||
background: transparent !important;
|
||||
color: $body-text-color !important;
|
||||
&:hover, &:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Sidebar style 2 */
|
||||
.sidebar {
|
||||
&.sidebar-style-2 {
|
||||
.nav {
|
||||
.nav-item {
|
||||
padding: 0 15px;
|
||||
a {
|
||||
padding: 8px 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
a:hover, a:focus, a[data-toggle=collapse][aria-expanded=true] {
|
||||
background: hsla(0,0%,78%,.2);
|
||||
p, i {
|
||||
color: #575962 !important;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
a:before {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
a {
|
||||
background: hsla(0,0%,78%,.2);
|
||||
p, i {
|
||||
color: #575962 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.submenu {
|
||||
background: transparent !important;
|
||||
}
|
||||
a[data-toggle=collapse][aria-expanded=true] {
|
||||
&:before {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin nav-sidebar-state2($color) {
|
||||
> .nav-item {
|
||||
&.active {
|
||||
> a {
|
||||
background: $color !important;
|
||||
box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.1), 4px 4px 15px -5px rgba($color, .4);
|
||||
&:before {
|
||||
background: transparent !important;
|
||||
}
|
||||
p, i, .caret, span {
|
||||
color: $white-color !important;
|
||||
}
|
||||
&[data-toggle=collapse][aria-expanded=true] {
|
||||
i {
|
||||
color: $white-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-primary {
|
||||
@include nav-sidebar-state2($primary-color);
|
||||
}
|
||||
&.nav-secondary {
|
||||
@include nav-sidebar-state2($secondary-color);
|
||||
}
|
||||
&.nav-info {
|
||||
@include nav-sidebar-state2($info-color);
|
||||
}
|
||||
&.nav-success {
|
||||
@include nav-sidebar-state2($success-color);
|
||||
}
|
||||
&.nav-warning {
|
||||
@include nav-sidebar-state2($warning-color);
|
||||
}
|
||||
&.nav-danger {
|
||||
@include nav-sidebar-state2($danger-color);
|
||||
}
|
||||
}
|
||||
&[data-background-color="dark"], &[data-background-color="dark2"] {
|
||||
.nav {
|
||||
.nav-item {
|
||||
a:hover, a:focus, a[data-toggle=collapse][aria-expanded=true] {
|
||||
p, i {
|
||||
color: #b9babf !important;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
a {
|
||||
color: $white-color ;
|
||||
p, i, .caret, span {
|
||||
color: $white-color;
|
||||
}
|
||||
&[data-toggle=collapse][aria-expanded=true] {
|
||||
p, i, .caret, span {
|
||||
color: $white-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* sidebar minimized */
|
||||
@media screen and (min-width: 992px) {
|
||||
.sidebar_minimize{
|
||||
.main-panel, .main-header {
|
||||
width: calc(100% - 75px);
|
||||
transition: all .3s;
|
||||
}
|
||||
.logo-header {
|
||||
width: 75px;
|
||||
transition: all .3s;
|
||||
padding: 0px;
|
||||
text-align: center;
|
||||
.big-logo {
|
||||
margin-right: 0px;
|
||||
}
|
||||
.logo {
|
||||
position: absolute;
|
||||
transform: translate3d(25px,0,0);
|
||||
opacity: 0;
|
||||
img {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.logo-header {
|
||||
.nav-toggle {
|
||||
position: absolute;
|
||||
left: 50% !important;
|
||||
transform: translateX(-50%);
|
||||
height: 100%;
|
||||
right: 0 !important;
|
||||
}
|
||||
}
|
||||
.sidebar{
|
||||
width: 75px;
|
||||
transition: all .3s;
|
||||
.sidebar-wrapper{
|
||||
width: 75px;
|
||||
transition: all .3s;
|
||||
.user {
|
||||
padding-left: 0px;
|
||||
padding-right: 0px;
|
||||
[class^="avatar-"] {
|
||||
float: none !important;
|
||||
}
|
||||
.info{
|
||||
display: none;
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-item {
|
||||
position : relative;
|
||||
a {
|
||||
.letter-icon {
|
||||
display: block !important;
|
||||
}
|
||||
i {
|
||||
margin-right: unset;
|
||||
}
|
||||
.badge, span, .caret, p {
|
||||
display: none;
|
||||
transition: all .3s;
|
||||
}
|
||||
.sidebar-mini-icon{
|
||||
display: block !important;
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
&.submenu, &.active{
|
||||
.nav-collapse {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-section{
|
||||
.text-section{
|
||||
display: none;
|
||||
}
|
||||
.sidebar-mini-icon{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-profile {
|
||||
.user-name, .user-level {
|
||||
display: none
|
||||
}
|
||||
.avatar {
|
||||
display: none;
|
||||
&.avatar-minimize {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.menubars {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.sidebar_minimize_hover {
|
||||
// .logo-header{
|
||||
// width: 250px;
|
||||
// padding-left: 25px;
|
||||
// padding-right: 25px;
|
||||
// text-align: left;
|
||||
// .logo {
|
||||
// opacity: 1 !important;
|
||||
// transform: translate3d(0, 0, 0) !important;
|
||||
// position: relative !important;
|
||||
// img {
|
||||
// display: inline-block !important;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
.main-panel, .main-header {
|
||||
// width: 100% !important;
|
||||
}
|
||||
.sidebar{
|
||||
width: 265px;
|
||||
position: fixed;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
.logo-header{
|
||||
width: 265px;
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
text-align: left;
|
||||
.logo {
|
||||
opacity: 1 !important;
|
||||
transform: translate3d(0, 0, 0) !important;
|
||||
position: relative !important;
|
||||
img {
|
||||
display: inline-block !important;
|
||||
}
|
||||
}
|
||||
.nav-toggle {
|
||||
right: 18px !important;
|
||||
transform: translateX(0%) !important;
|
||||
left: unset !important;
|
||||
}
|
||||
}
|
||||
.sidebar-wrapper{
|
||||
width: 265px;
|
||||
.user {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
[class^="avatar-"] {
|
||||
float: left !important;
|
||||
}
|
||||
.info{
|
||||
display: block;
|
||||
span {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-item {
|
||||
a {
|
||||
i {
|
||||
margin-right: 15px;
|
||||
}
|
||||
.badge, span, .caret, p {
|
||||
display: block;
|
||||
}
|
||||
.sidebar-mini-icon{
|
||||
display: block !important;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
&.submenu, &.active{
|
||||
.nav-collapse {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-section{
|
||||
.sidebar-mini-icon {
|
||||
display: none;
|
||||
}
|
||||
.text-section{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-profile {
|
||||
.user-name, .user-level {
|
||||
display: block
|
||||
}
|
||||
.avatar {
|
||||
display: block;
|
||||
&.avatar-minimize {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.menubars {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sidebar_minimize_hover {
|
||||
// .logo-header {
|
||||
// .nav-toggle {
|
||||
// right: 18px !important;
|
||||
// transform: translateX(0%) !important;
|
||||
// left: unset !important;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
187
public/kai/build/scss/core/_typography.scss
Normal file
187
public/kai/build/scss/core/_typography.scss
Normal file
@@ -0,0 +1,187 @@
|
||||
/* Typography */
|
||||
|
||||
body, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, .navbar, .brand, .btn-simple, .alert, a, .td-name, td, button.close {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-family: 'Public Sans', sans-serif;
|
||||
}
|
||||
|
||||
body, html {
|
||||
font-size: 14px;
|
||||
color: $body-text-color;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $primary-color;
|
||||
text-decoration: none !important;
|
||||
&:hover, &:focus {
|
||||
color: $primary2-color;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
.h1
|
||||
{
|
||||
font-size: 2.15rem;
|
||||
}
|
||||
|
||||
h2,
|
||||
.h2
|
||||
{
|
||||
font-size: 1.85rem;
|
||||
}
|
||||
|
||||
h3,
|
||||
.h3
|
||||
{
|
||||
font-size: 1.64rem;
|
||||
}
|
||||
|
||||
h4,
|
||||
.h4
|
||||
{
|
||||
font-size: 1.48rem;
|
||||
}
|
||||
|
||||
h5,
|
||||
.h5
|
||||
{
|
||||
font-size: 1.3rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h6,
|
||||
.h6
|
||||
{
|
||||
font-size: 1.07rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.07rem;
|
||||
line-height: 1.82;
|
||||
margin-bottom: 1rem;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
line-height: 1.5;
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
small, .small {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
b, .b, strong, .strong{
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
.page-pretitle{
|
||||
letter-spacing: .08em;
|
||||
text-transform: uppercase;
|
||||
color: #95aac9;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 23px;
|
||||
font-weight: $font-weight-bold;
|
||||
color: #444444;
|
||||
line-height: 30px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-category {
|
||||
color: #444444;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.text-primary, .text-primary a {
|
||||
color: $primary-color !important;
|
||||
&:hover {
|
||||
color: $primary-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text-secondary, .text-secondary a {
|
||||
color: $secondary-color !important;
|
||||
&:hover {
|
||||
color: $secondary-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text-info, .text-info a {
|
||||
color: $info-color !important;
|
||||
&:hover {
|
||||
color: $info-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text-success, .text-success a {
|
||||
color: $success-color !important;
|
||||
&:hover {
|
||||
color: $success-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text-warning, .text-warning a {
|
||||
color: $warning-color !important;
|
||||
&:hover {
|
||||
color: $warning-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text-danger, .text-danger a {
|
||||
color: $danger-color !important;
|
||||
&:hover {
|
||||
color: $danger-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: #495057 !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
.text-small {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
margin-bottom: 5px;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: .975rem;
|
||||
font-weight: 500;
|
||||
color: #686f76;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Font-weight */
|
||||
|
||||
.fw-light {
|
||||
font-weight: $font-weight-light !important;
|
||||
}
|
||||
|
||||
.fw-normal {
|
||||
font-weight: $font-weight-normal !important;
|
||||
}
|
||||
|
||||
.fw-mediumbold {
|
||||
font-weight: $font-weight-mediumbold !important;
|
||||
}
|
||||
|
||||
.fw-bold {
|
||||
font-weight: $font-weight-bold !important;
|
||||
}
|
||||
|
||||
.fw-extrabold {
|
||||
font-weight: $font-weight-extrabold !important;
|
||||
}
|
||||
29
public/kai/build/scss/core/_variables.scss
Normal file
29
public/kai/build/scss/core/_variables.scss
Normal file
@@ -0,0 +1,29 @@
|
||||
//## For each of Bootstrap's buttons, define text, background and border color.
|
||||
|
||||
$body-text-color: #2A2F5B;
|
||||
$white-color: #ffffff;
|
||||
$grey-color: #f1f1f1;
|
||||
$grey2-color: #F5F7FD;
|
||||
$grey3-color: #fafafe;
|
||||
$transparent-bg : transparent;
|
||||
$black-color : #1a2035;
|
||||
$black2-color : #151a2b;
|
||||
$primary-color : #1572E8;
|
||||
$primary2-color : #1269DB;
|
||||
$secondary-color : #6861CE;
|
||||
$secondary2-color : #5C55BF;
|
||||
$info-color : #48ABF7;
|
||||
$info2-color : #3697E1;
|
||||
$success-color : #31CE36;
|
||||
$success2-color : #2BB930;
|
||||
$warning-color : #FFAD46;
|
||||
$warning2-color : #FF9E27;
|
||||
$danger-color : #F25961;
|
||||
$danger2-color : #EA4d56;
|
||||
|
||||
// Font Weight
|
||||
$font-weight-light : 300;
|
||||
$font-weight-normal : 400;
|
||||
$font-weight-mediumbold : 500;
|
||||
$font-weight-bold : 600;
|
||||
$font-weight-extrabold : 700;
|
||||
71
public/kai/build/scss/core/components/_activityfeed.scss
Normal file
71
public/kai/build/scss/core/components/_activityfeed.scss
Normal file
@@ -0,0 +1,71 @@
|
||||
.activity-feed {
|
||||
padding: 15px;
|
||||
list-style: none;
|
||||
.feed-item {
|
||||
position: relative;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 30px;
|
||||
border-left: 2px solid #e4e8eb;
|
||||
&:last-child {
|
||||
border-color: transparent;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -7px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #177dff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin feed-item-state($color) {
|
||||
background: $color !important;
|
||||
}
|
||||
|
||||
.feed-item-black::after {
|
||||
@include feed-item-state($black-color);
|
||||
}
|
||||
|
||||
.feed-item-primary::after {
|
||||
@include feed-item-state($primary-color);
|
||||
}
|
||||
|
||||
.feed-item-secondary::after {
|
||||
@include feed-item-state($secondary-color);
|
||||
}
|
||||
|
||||
.feed-item-success::after {
|
||||
@include feed-item-state($success-color);
|
||||
}
|
||||
|
||||
.feed-item-danger::after {
|
||||
@include feed-item-state($danger-color);
|
||||
}
|
||||
|
||||
.feed-item-info::after {
|
||||
@include feed-item-state($info-color);
|
||||
}
|
||||
|
||||
.feed-item-warning::after {
|
||||
@include feed-item-state($warning-color);
|
||||
}
|
||||
|
||||
.activity-feed .feed-item {
|
||||
.date {
|
||||
display: block;
|
||||
position: relative;
|
||||
top: -5px;
|
||||
color: #8c96a3;
|
||||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
}
|
||||
.text {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
}
|
||||
89
public/kai/build/scss/core/components/_alerts.scss
Normal file
89
public/kai/build/scss/core/components/_alerts.scss
Normal file
@@ -0,0 +1,89 @@
|
||||
/* Alert */
|
||||
|
||||
.alert {
|
||||
border: 0px;
|
||||
position: relative;
|
||||
padding: .95rem 1.25rem;
|
||||
border-radius: 1px;
|
||||
color: inherit;
|
||||
background-color: $white-color;
|
||||
-webkit-box-shadow: 1px 1px 14px 0px rgba(18, 38, 63, 0.26);
|
||||
-moz-box-shadow: 1px 1px 14px 0px rgba(18, 38, 63, 0.26);
|
||||
box-shadow: 1px 1px 14px 0px rgba(18, 38, 63, 0.26);
|
||||
[data-notify="icon"] {
|
||||
display: block;
|
||||
&::before {
|
||||
line-height: 35px;
|
||||
font-size: 22px;
|
||||
display: block;
|
||||
left: 15px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
[data-notify="title"] {
|
||||
display: block;
|
||||
color: #2b2b2b;
|
||||
font-weight: $font-weight-extrabold;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
[data-notify="message"] {
|
||||
font-size: 13px;
|
||||
color: #908e8e;
|
||||
}
|
||||
.close {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
top: 12px !important;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Alert States */
|
||||
|
||||
@mixin alert-state($color){
|
||||
border-left: 4px solid $color;
|
||||
[data-notify="icon"]:before {
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
|
||||
.alert-black {
|
||||
@include alert-state($black-color);
|
||||
}
|
||||
|
||||
.alert-primary {
|
||||
@include alert-state($primary-color);
|
||||
}
|
||||
|
||||
.alert-secondary {
|
||||
@include alert-state($secondary-color);
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
@include alert-state($info-color);
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
@include alert-state($success-color);
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
@include alert-state($warning-color);
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
@include alert-state($danger-color);
|
||||
}
|
||||
191
public/kai/build/scss/core/components/_avatars.scss
Normal file
191
public/kai/build/scss/core/components/_avatars.scss
Normal file
@@ -0,0 +1,191 @@
|
||||
/* Avatar */
|
||||
|
||||
.avatar {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-title {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $secondary-color;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.avatar-online::before, .avatar-offline::before, .avatar-away::before {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 25%;
|
||||
height: 25%;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
border: 2px solid #fff;
|
||||
}
|
||||
|
||||
.avatar-online::before {
|
||||
background-color: $success-color;
|
||||
}
|
||||
|
||||
.avatar-offline::before {
|
||||
background-color: #97a2b1;
|
||||
}
|
||||
|
||||
|
||||
.avatar-away::before {
|
||||
background-color: $warning-color;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 3.2rem;
|
||||
height: 3.2rem;
|
||||
.border {
|
||||
border-width: 3px !important;
|
||||
}
|
||||
.rounded {
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
.avatar-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-xs {
|
||||
width: 1.95rem;
|
||||
height: 1.95rem;
|
||||
.border {
|
||||
border-width: 2px !important;
|
||||
}
|
||||
.rounded {
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
.avatar-title {
|
||||
font-size: 12px;
|
||||
}
|
||||
&.avatar-online::before, &.avatar-offline::before, &.avatar-away::before {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-sm {
|
||||
width: 2.75rem;
|
||||
height: 2.75rem;
|
||||
.border {
|
||||
border-width: 3px !important;
|
||||
}
|
||||
.rounded {
|
||||
border-radius: 4px !important;
|
||||
}
|
||||
.avatar-title {
|
||||
font-size: 15px;
|
||||
}
|
||||
&.avatar-online::before, &.avatar-offline::before, &.avatar-away::before {
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-lg {
|
||||
width: 3.95rem;
|
||||
height: 3.95rem;
|
||||
.border {
|
||||
border-width: 3px !important;
|
||||
}
|
||||
.rounded {
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
.avatar-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
&.avatar-online::before, &.avatar-offline::before, &.avatar-away::before {
|
||||
border-width: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-xl {
|
||||
width: 5.2rem;
|
||||
height: 5.2rem;
|
||||
.border {
|
||||
border-width: 4px !important;
|
||||
}
|
||||
.rounded {
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
.avatar-title {
|
||||
font-size: 28px;
|
||||
}
|
||||
&.avatar-online::before, &.avatar-offline::before, &.avatar-away::before {
|
||||
border-width: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-xxl {
|
||||
width: 5.325rem;
|
||||
height: 5.325rem;
|
||||
.border {
|
||||
border-width: 6px !important;
|
||||
}
|
||||
.rounded {
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
.avatar-title {
|
||||
font-size: 30px;
|
||||
}
|
||||
&.avatar-online::before, &.avatar-offline::before, &.avatar-away::before {
|
||||
border-width: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.avatar-xxl {
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
.border {
|
||||
border-width: 4px !important;
|
||||
}
|
||||
.rounded {
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
.avatar-title {
|
||||
font-size: 42px;
|
||||
}
|
||||
&.avatar-online::before, &.avatar-offline::before, &.avatar-away::before {
|
||||
border-width: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-group {
|
||||
display: inline-flex;
|
||||
.avatar + .avatar {
|
||||
margin-left: -.75rem;
|
||||
}
|
||||
.avatar-xs + .avatar-xs {
|
||||
margin-left: -.40625rem;
|
||||
}
|
||||
.avatar-sm + .avatar-sm {
|
||||
margin-left: -.625rem;
|
||||
}
|
||||
.avatar-lg + .avatar-lg {
|
||||
margin-left: -1rem;
|
||||
}
|
||||
.avatar-xl + .avatar-xl {
|
||||
margin-left: -1.28125rem;
|
||||
}
|
||||
.avatar:hover {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.border-dark {
|
||||
border-color: #202940 !important;
|
||||
}
|
||||
51
public/kai/build/scss/core/components/_badges.scss
Normal file
51
public/kai/build/scss/core/components/_badges.scss
Normal file
@@ -0,0 +1,51 @@
|
||||
/* Badge */
|
||||
|
||||
.badge {
|
||||
border-radius: 5px;
|
||||
margin-left: auto;
|
||||
line-height: 1;
|
||||
padding: 4px 7px;
|
||||
vertical-align: middle;
|
||||
font-weight: $font-weight-normal;
|
||||
font-size: 11px;
|
||||
border: 1px solid #ddd;
|
||||
height: fit-content !important;
|
||||
}
|
||||
|
||||
[class*="badge-"]:not(.badge-count) {
|
||||
border: 0px !important;
|
||||
}
|
||||
|
||||
.badge-count {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.badge-black {
|
||||
background: $black-color;
|
||||
color: $white-color !important;
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
background: $primary-color;
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
background: $secondary-color;
|
||||
}
|
||||
|
||||
.badge-info {
|
||||
background: $info-color;
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
background-color: $success-color;
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
background: $warning-color;
|
||||
// color: $white-color !important;
|
||||
}
|
||||
|
||||
.badge-danger {
|
||||
background-color: $danger-color;
|
||||
}
|
||||
31
public/kai/build/scss/core/components/_breadcrumbs.scss
Normal file
31
public/kai/build/scss/core/components/_breadcrumbs.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
/* Breadcrumb */
|
||||
.breadcrumbs {
|
||||
list-style: none;
|
||||
display: inline;
|
||||
width: auto;
|
||||
border-left: 1px solid #efefef;
|
||||
margin-left: 25px;
|
||||
padding-left: 25px;
|
||||
margin-bottom: 0px;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
height: 100%;
|
||||
li {
|
||||
display: inline-block;
|
||||
a {
|
||||
color: $body-text-color;
|
||||
font-size: 13px;
|
||||
i {
|
||||
font-size: 16px;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
&.separator {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
397
public/kai/build/scss/core/components/_buttons.scss
Normal file
397
public/kai/build/scss/core/components/_buttons.scss
Normal file
@@ -0,0 +1,397 @@
|
||||
/* Button */
|
||||
|
||||
.btn {
|
||||
padding: 0.65rem 1.4rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
opacity: 1;
|
||||
border-radius: 3px;
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 0.8;
|
||||
}
|
||||
.btn-label {
|
||||
display: inline-block;
|
||||
i {
|
||||
font-size: 16px;
|
||||
vertical-align: middle;
|
||||
margin-right: 2px;
|
||||
margin-left: -2px;
|
||||
line-height: 0;
|
||||
margin-top: -2.5px;
|
||||
}
|
||||
&.just-icon i {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Button Sizes */
|
||||
.btn-lg {
|
||||
font-size: 15px;
|
||||
border-radius: 6px;
|
||||
padding: 12.5px 27.5px;
|
||||
font-weight: $font-weight-normal;
|
||||
.btn-label {
|
||||
i {
|
||||
font-size: 27px;
|
||||
vertical-align: middle;
|
||||
margin-right: 2px;
|
||||
margin-left: -7px;
|
||||
line-height: 0;
|
||||
margin-top: -2.5px;
|
||||
}
|
||||
&.just-icon i {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
font-size: 11px;
|
||||
padding: 7px 13px;
|
||||
}
|
||||
|
||||
.btn-xs {
|
||||
font-size: 10px;
|
||||
padding: 5px 9px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
&.disabled:hover,
|
||||
&:hover:disabled {
|
||||
opacity: 0.65;
|
||||
}
|
||||
}
|
||||
|
||||
/* Button Icon */
|
||||
.btn-icon {
|
||||
font-size: 1.25rem;
|
||||
height: 2.5125rem;
|
||||
line-height: normal;
|
||||
min-width: 2.5125rem;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: 2.5125rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
&.btn-lg {
|
||||
height: 2.75rem;
|
||||
min-width: 2.75rem;
|
||||
width: 2.75rem;
|
||||
}
|
||||
&.btn-sm {
|
||||
height: 2rem;
|
||||
min-width: 2rem;
|
||||
width: 2rem;
|
||||
}
|
||||
&.btn-xs {
|
||||
height: 1.6875rem;
|
||||
min-width: 1.6875rem;
|
||||
width: 1.6875rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Button States */
|
||||
.btn-white {
|
||||
background: $white-color !important;
|
||||
color: $black-color !important;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:disabled {
|
||||
background: $white-color !important;
|
||||
color: $black-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-black {
|
||||
background: $black-color !important;
|
||||
color: $white-color !important;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:disabled {
|
||||
background: $black-color !important;
|
||||
color: $white-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: $primary-color !important;
|
||||
border-color: $primary-color !important;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:disabled {
|
||||
color: $white-color !important;
|
||||
background: $primary-color !important;
|
||||
border-color: $primary-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: $secondary-color !important;
|
||||
border-color: $secondary-color !important;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:disabled {
|
||||
color: $white-color !important;
|
||||
background: $secondary-color !important;
|
||||
border-color: $secondary-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
background: $info-color !important;
|
||||
border-color: $info-color !important;
|
||||
color: $white-color !important;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:disabled {
|
||||
color: $white-color !important;
|
||||
background: $info-color !important;
|
||||
border-color: $info-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: $success-color !important;
|
||||
border-color: $success-color !important;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:disabled {
|
||||
color: $white-color !important;
|
||||
background: $success-color !important;
|
||||
border-color: $success-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background: $warning-color !important;
|
||||
border-color: $warning-color !important;
|
||||
// color: $white-color !important;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:disabled {
|
||||
background: $warning-color !important;
|
||||
border-color: $warning-color !important;
|
||||
// color: $white-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: $danger-color !important;
|
||||
border-color: $danger-color !important;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:disabled {
|
||||
color: $white-color !important;
|
||||
background: $danger-color !important;
|
||||
border-color: $danger-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-light {
|
||||
background: $white-color !important;
|
||||
border-color: transparent;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:disabled {
|
||||
background: #ebecec !important;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-dropdown-card-header {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
font-size: 15px;
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-clean {
|
||||
background: transparent;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:disabled {
|
||||
color: $primary-color;
|
||||
background: rgba($primary-color, 0.05);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin btn-label-light-style($color) {
|
||||
background: rgba($color, 0.1);
|
||||
color: $color !important;
|
||||
border-color: transparent;
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:disabled {
|
||||
background: $color;
|
||||
color: #fff !important;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-label-primary {
|
||||
@include btn-label-light-style($primary-color);
|
||||
}
|
||||
|
||||
.btn-label-secondary {
|
||||
@include btn-label-light-style($secondary-color);
|
||||
}
|
||||
|
||||
.btn-label-info {
|
||||
@include btn-label-light-style($info-color);
|
||||
}
|
||||
|
||||
.btn-label-success {
|
||||
@include btn-label-light-style($success-color);
|
||||
}
|
||||
|
||||
.btn-label-warning {
|
||||
@include btn-label-light-style($warning-color);
|
||||
}
|
||||
|
||||
.btn-label-danger {
|
||||
@include btn-label-light-style($danger-color);
|
||||
}
|
||||
|
||||
.btn-label-light {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: #fff;
|
||||
color: #2a2f5b;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Button Border */
|
||||
@mixin btn-border($color) {
|
||||
color: $color !important;
|
||||
border: 1px solid $color !important;
|
||||
}
|
||||
|
||||
.btn-border {
|
||||
background: $transparent-bg !important;
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $transparent-bg !important;
|
||||
}
|
||||
&.btn-white {
|
||||
@include btn-border($white-color);
|
||||
}
|
||||
&.btn-black {
|
||||
@include btn-border($black-color);
|
||||
}
|
||||
&.btn-primary {
|
||||
@include btn-border($primary-color);
|
||||
}
|
||||
&.btn-secondary {
|
||||
@include btn-border($secondary-color);
|
||||
}
|
||||
&.btn-info {
|
||||
@include btn-border($info-color);
|
||||
}
|
||||
&.btn-success {
|
||||
@include btn-border($success-color);
|
||||
}
|
||||
&.btn-warning {
|
||||
@include btn-border($warning-color);
|
||||
}
|
||||
|
||||
&.btn-danger {
|
||||
@include btn-border($danger-color);
|
||||
}
|
||||
&.btn-light {
|
||||
border: 1px solid #efefef;
|
||||
background: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Button Rounded */
|
||||
.btn-round {
|
||||
border-radius: 100px !important;
|
||||
}
|
||||
|
||||
/* Button Link */
|
||||
@mixin btn-link($color) {
|
||||
color: $color !important;
|
||||
&:hover {
|
||||
color: $color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
border: 0 !important;
|
||||
background: $transparent-bg !important;
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: underline !important;
|
||||
background: $transparent-bg !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
&.btn-black {
|
||||
@include btn-link($black-color);
|
||||
}
|
||||
|
||||
&.btn-primary {
|
||||
@include btn-link($primary-color);
|
||||
}
|
||||
|
||||
&.btn-secondary {
|
||||
@include btn-link($secondary-color);
|
||||
}
|
||||
|
||||
&.btn-info {
|
||||
@include btn-link($info-color);
|
||||
}
|
||||
|
||||
&.btn-success {
|
||||
@include btn-link($success-color);
|
||||
}
|
||||
|
||||
&.btn-warning {
|
||||
@include btn-link($warning-color);
|
||||
}
|
||||
|
||||
&.btn-danger {
|
||||
@include btn-link($danger-color);
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-on.btn {
|
||||
color: $white-color !important;
|
||||
}
|
||||
|
||||
.toggle-handle {
|
||||
background: $white-color !important;
|
||||
&:hover {
|
||||
background: $white-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-round .toggle-handle {
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.btn-rounded {
|
||||
border-radius: 60px !important;
|
||||
}
|
||||
|
||||
.btn-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-no-radius {
|
||||
border-radius: 0px;
|
||||
}
|
||||
1102
public/kai/build/scss/core/components/_cards.scss
Normal file
1102
public/kai/build/scss/core/components/_cards.scss
Normal file
File diff suppressed because it is too large
Load Diff
56
public/kai/build/scss/core/components/_charts.scss
Normal file
56
public/kai/build/scss/core/components/_charts.scss
Normal file
@@ -0,0 +1,56 @@
|
||||
/* Chart Circle */
|
||||
.chart-circle {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.circles-text {
|
||||
font-size: 25px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Chart JS Container */
|
||||
.chart-container {
|
||||
min-height: 300px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* HTML legend */
|
||||
.html-legend {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
padding-left: 0;
|
||||
text-align: center;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.html-legend li {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
vertical-align: middle;
|
||||
padding: 0 5px;
|
||||
margin-right: 5px;
|
||||
margin-bottom: 6px;
|
||||
color: #8d9498;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.html-legend li.hidden {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.html-legend li span {
|
||||
border-radius: 15px;
|
||||
display: inline-block;
|
||||
height: 15px;
|
||||
margin-right: 10px;
|
||||
width: 15px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.jqstooltip{
|
||||
box-sizing: content-box;
|
||||
}
|
||||
42
public/kai/build/scss/core/components/_colorinputs.scss
Normal file
42
public/kai/build/scss/core/components/_colorinputs.scss
Normal file
@@ -0,0 +1,42 @@
|
||||
.colorinput {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.colorinput-input {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.colorinput-color {
|
||||
display: inline-block;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
border-radius: 3px;
|
||||
border: 1px solid rgba(0, 40, 100, 0.12);
|
||||
color: #fff;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
&:before {
|
||||
content: '';
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: .25rem;
|
||||
left: .25rem;
|
||||
height: 1.25rem;
|
||||
width: 1.25rem;
|
||||
transition: .3s opacity;
|
||||
background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") no-repeat center (center / 50%) 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.colorinput-input {
|
||||
&:checked ~ .colorinput-color:before {
|
||||
opacity: 1;
|
||||
}
|
||||
&:focus ~ .colorinput-color {
|
||||
border-color: #467fcf;
|
||||
box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
|
||||
}
|
||||
}
|
||||
342
public/kai/build/scss/core/components/_dropdowns.scss
Normal file
342
public/kai/build/scss/core/components/_dropdowns.scss
Normal file
@@ -0,0 +1,342 @@
|
||||
/* Dropdown */
|
||||
.dropdown-menu {
|
||||
border: 0px;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 11px rgba(0, 0, 0, 0.15) !important;
|
||||
padding-bottom: 5px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
/* Notification dropdown */
|
||||
|
||||
.dropdown-title {
|
||||
border-bottom: 1px solid $grey-color;
|
||||
color: #444444;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
padding: 12px 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.notif-box, .messages-notif-box {
|
||||
width: 280px;
|
||||
padding: 0 !important;
|
||||
.notif-center a {
|
||||
display: flex;
|
||||
color: #4d585f;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background: #fafafa;
|
||||
transition: all .2s;
|
||||
}
|
||||
.notif-icon {
|
||||
display: inline-flex;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 10px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #eee;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.notif-img {
|
||||
display: inline-flex;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 10px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #eee;
|
||||
border-radius: 50%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.notif-icon {
|
||||
&.notif-black, &.notif-primary, &.notif-secondary, &.notif-info, &.notif-success, &.notif-warning, &.notif-danger {
|
||||
color: $white-color !important;
|
||||
}
|
||||
&.notif-black {
|
||||
background: $black-color !important;
|
||||
}
|
||||
&.notif-primary {
|
||||
background: $primary-color !important;
|
||||
}
|
||||
&.notif-secondary {
|
||||
background: $secondary-color !important;
|
||||
}
|
||||
&.notif-info {
|
||||
background: $info-color !important;
|
||||
}
|
||||
&.notif-success {
|
||||
background: $success-color !important;
|
||||
}
|
||||
&.notif-warning {
|
||||
background: $warning-color !important;
|
||||
}
|
||||
&.notif-danger {
|
||||
background: $danger-color !important;
|
||||
}
|
||||
i {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
.notif-content {
|
||||
padding: 10px 15px 10px 0;
|
||||
}
|
||||
.message-content {
|
||||
padding: 7px 15px 10px 0;
|
||||
}
|
||||
.notif-content {
|
||||
.subject {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.block {
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
display: block;
|
||||
}
|
||||
.time {
|
||||
color: #7d8c95;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.see-all {
|
||||
border-top: 1px solid $grey-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 20px;
|
||||
color: #555;
|
||||
font-size: 13px;
|
||||
font-weight: $font-weight-normal;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 20px;
|
||||
color: #555;
|
||||
font-size: 13px;
|
||||
font-weight: $font-weight-normal;
|
||||
text-decoration: none;
|
||||
}
|
||||
i {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notif-box {
|
||||
.notif-scroll {
|
||||
max-height: 256px;
|
||||
}
|
||||
}
|
||||
|
||||
.messages-notif-box {
|
||||
.message-notif-scroll {
|
||||
max-height: 250px;
|
||||
}
|
||||
.notif-center a {
|
||||
border-bottom: 1px solid $grey-color;
|
||||
&:last-child {
|
||||
border-bottom: 0px;
|
||||
}
|
||||
.notif-content {
|
||||
padding: 7px 15px 7px 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* User Dropdown */
|
||||
|
||||
.dropdown-user {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.user-box {
|
||||
display: flex;
|
||||
padding: .25rem 1rem;
|
||||
.u-text {
|
||||
padding: 0 10px;
|
||||
h4 {
|
||||
margin-bottom: 5px;
|
||||
margin-top: 4px;
|
||||
font-size: 1rem;
|
||||
font-weight: $font-weight-normal;
|
||||
line-height: 1;
|
||||
}
|
||||
.text-muted {
|
||||
font-size: 12px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.btn {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.caret {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: .255em;
|
||||
vertical-align: .255em;
|
||||
content: "";
|
||||
border-top: .3em solid;
|
||||
border-right: .3em solid $transparent-bg;
|
||||
border-bottom: 0;
|
||||
border-left: .3em solid $transparent-bg;
|
||||
}
|
||||
|
||||
/* Quick Actions Dropdown */
|
||||
.quick-actions {
|
||||
width: 350px;
|
||||
padding: 0px;
|
||||
&:after {
|
||||
border-bottom-color: $primary-color !important;
|
||||
}
|
||||
.quick-actions-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
background: $primary-color;
|
||||
color: #fff;
|
||||
padding: 15px;
|
||||
border-radius: 3px 3px 0 0;
|
||||
.title {
|
||||
font-size: 16px;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.quick-actions-items {
|
||||
padding: 7.5px 0;
|
||||
}
|
||||
a {
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.quick-actions-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 7.5px 10px;
|
||||
padding: 10px;
|
||||
align-items: center;
|
||||
color: #1572E8;
|
||||
i {
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
}
|
||||
.text {
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
margin-top: 12px;
|
||||
}
|
||||
&:hover {
|
||||
.avatar-item {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.avatar-item {
|
||||
display: inline-flex;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
color: #fff;
|
||||
border-radius: .375rem;
|
||||
background-color: $primary-color;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all .15s;
|
||||
box-shadow: 2px 2px 8px 0px rgba(31, 30, 30, 0.13) !important;
|
||||
}
|
||||
@mixin quick-actions-state($color) {
|
||||
&:after {
|
||||
border-bottom-color: $color !important;
|
||||
}
|
||||
.quick-actions-header {
|
||||
background: $color;
|
||||
}
|
||||
.quick-actions-item {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
&.quick-actions-black {
|
||||
@include quick-actions-state($black-color);
|
||||
}
|
||||
&.quick-actions-primary {
|
||||
@include quick-actions-state($primary-color);
|
||||
}
|
||||
&.quick-actions-secondary {
|
||||
@include quick-actions-state($secondary-color);
|
||||
}
|
||||
&.quick-actions-info {
|
||||
@include quick-actions-state($info-color);
|
||||
}
|
||||
&.quick-actions-warning {
|
||||
@include quick-actions-state($warning-color);
|
||||
}
|
||||
&.quick-actions-success {
|
||||
@include quick-actions-state($success-color);
|
||||
}
|
||||
&.quick-actions-danger {
|
||||
@include quick-actions-state($danger-color);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991.5px) {
|
||||
|
||||
%max-height-notif {
|
||||
max-height: calc(100vh - 200px);
|
||||
}
|
||||
.notif-box {
|
||||
.notif-scroll {
|
||||
@extend %max-height-notif;
|
||||
}
|
||||
}
|
||||
|
||||
.messages-notif-box {
|
||||
.message-notif-scroll {
|
||||
@extend %max-height-notif;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-user {
|
||||
.dropdown-user-scroll {
|
||||
max-height: calc(100vh - 132px);
|
||||
}
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
.quick-actions-scroll {
|
||||
@extend %max-height-notif;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 991px){
|
||||
.navbar-header {
|
||||
.dropdown-menu {
|
||||
margin-top: 13px;
|
||||
&:after {
|
||||
border-bottom: 8px solid #fff;
|
||||
border-left: 8px solid transparent;
|
||||
border-right: 8px solid transparent;
|
||||
content: "";
|
||||
right: 10px;
|
||||
top: -8px;
|
||||
position: absolute;
|
||||
z-index: 1001;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
28
public/kai/build/scss/core/components/_dropdownsearch.scss
Normal file
28
public/kai/build/scss/core/components/_dropdownsearch.scss
Normal file
@@ -0,0 +1,28 @@
|
||||
/* Dropdown Search */
|
||||
|
||||
.dropdown-search {
|
||||
min-width: 350px;
|
||||
padding: 5px 0;
|
||||
.nav-search {
|
||||
.input-group{
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
border: 0 !important;
|
||||
.form-control {
|
||||
color: inherit !important;
|
||||
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
|
||||
color: #bfbfbf !important;
|
||||
}
|
||||
&::-moz-placeholder { /* Firefox 19+ */
|
||||
color: #bfbfbf !important;
|
||||
}
|
||||
&:-ms-input-placeholder { /* IE 10+ */
|
||||
color: #bfbfbf !important;
|
||||
}
|
||||
&:-moz-placeholder { /* Firefox 18- */
|
||||
color: #bfbfbf !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
69
public/kai/build/scss/core/components/_gutters.scss
Normal file
69
public/kai/build/scss/core/components/_gutters.scss
Normal file
@@ -0,0 +1,69 @@
|
||||
.gutters-0 {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
> {
|
||||
.col, [class*="col-"] {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.gutters-xs {
|
||||
margin-right: -0.25rem;
|
||||
margin-left: -0.25rem;
|
||||
> {
|
||||
.col, [class*="col-"] {
|
||||
padding-right: 0.25rem;
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.gutters-sm {
|
||||
margin-right: -0.5rem;
|
||||
margin-left: -0.5rem;
|
||||
> {
|
||||
.col, [class*="col-"] {
|
||||
padding-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.gutters-lg {
|
||||
margin-right: -1rem;
|
||||
margin-left: -1rem;
|
||||
> {
|
||||
.col, [class*="col-"] {
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.gutters-xl {
|
||||
margin-right: -1.5rem;
|
||||
margin-left: -1.5rem;
|
||||
> {
|
||||
.col, [class*="col-"] {
|
||||
padding-right: 1.5rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
}
|
||||
95
public/kai/build/scss/core/components/_imagecheck.scss
Normal file
95
public/kai/build/scss/core/components/_imagecheck.scss
Normal file
@@ -0,0 +1,95 @@
|
||||
.imagecheck {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.imagecheck-input {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.imagecheck-figure {
|
||||
border: 1px solid rgba(0, 40, 100, 0.12);
|
||||
border-radius: 3px;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.imagecheck-input {
|
||||
&:focus ~ .imagecheck-figure {
|
||||
border-color: $primary-color;
|
||||
box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
|
||||
}
|
||||
&:checked ~ .imagecheck-figure {
|
||||
border-color: rgba(0, 40, 100, 0.24);
|
||||
}
|
||||
}
|
||||
|
||||
.imagecheck-figure:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: .25rem;
|
||||
left: .25rem;
|
||||
display: block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
pointer-events: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background: $primary-color url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E") no-repeat center (center / 50%) 50%;
|
||||
color: #fff;
|
||||
z-index: 1;
|
||||
border-radius: 3px;
|
||||
opacity: 0;
|
||||
transition: .3s opacity;
|
||||
}
|
||||
|
||||
.imagecheck-input:checked ~ .imagecheck-figure:before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.imagecheck-image {
|
||||
max-width: 100%;
|
||||
opacity: .64;
|
||||
transition: .3s opacity;
|
||||
&:first-child {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
&:last-child {
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.imagecheck:hover .imagecheck-image {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.imagecheck-input {
|
||||
&:focus ~ .imagecheck-figure .imagecheck-image, &:checked ~ .imagecheck-figure .imagecheck-image {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.imagecheck-caption {
|
||||
text-align: center;
|
||||
padding: .25rem .25rem;
|
||||
color: #9aa0ac;
|
||||
font-size: 0.875rem;
|
||||
transition: .3s color;
|
||||
}
|
||||
|
||||
.imagecheck:hover .imagecheck-caption {
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.imagecheck-input {
|
||||
&:focus ~ .imagecheck-figure .imagecheck-caption, &:checked ~ .imagecheck-figure .imagecheck-caption {
|
||||
color: #495057;
|
||||
}
|
||||
}
|
||||
697
public/kai/build/scss/core/components/_inputs.scss
Normal file
697
public/kai/build/scss/core/components/_inputs.scss
Normal file
@@ -0,0 +1,697 @@
|
||||
/* Form */
|
||||
|
||||
.form-control {
|
||||
font-size: 1rem;
|
||||
border-color: #ebedf2;
|
||||
padding: 0.6rem 1rem;
|
||||
height: inherit !important;
|
||||
border-width: 2px;
|
||||
&:focus {
|
||||
border-color: #3e93ff;
|
||||
}
|
||||
}
|
||||
|
||||
/* Form Control Sizes */
|
||||
%form-control-lg-style {
|
||||
padding: 0.5rem 1rem !important;
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
|
||||
.form-control-lg {
|
||||
@extend %form-control-lg-style;
|
||||
}
|
||||
|
||||
.input-group-lg > {
|
||||
.form-control {
|
||||
@extend %form-control-lg-style;
|
||||
}
|
||||
.input-group-append > {
|
||||
.btn,
|
||||
.input-group-text {
|
||||
@extend %form-control-lg-style;
|
||||
}
|
||||
}
|
||||
.input-group-prepend > {
|
||||
.btn,
|
||||
.input-group-text {
|
||||
@extend %form-control-lg-style;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%form-control-sm-style {
|
||||
padding: 0.25rem 0.5rem !important;
|
||||
font-size: 0.875rem !important;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.form-control-sm {
|
||||
@extend %form-control-sm-style;
|
||||
}
|
||||
|
||||
.input-group-sm > {
|
||||
.form-control {
|
||||
@extend %form-control-sm-style;
|
||||
}
|
||||
.input-group-append > {
|
||||
.btn,
|
||||
.input-group-text {
|
||||
@extend %form-control-sm-style;
|
||||
}
|
||||
}
|
||||
.input-group-prepend > {
|
||||
.btn,
|
||||
.input-group-text {
|
||||
@extend %form-control-sm-style;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-control::-webkit-input-placeholder {
|
||||
color: inherit;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.form-control:-moz-placeholder {
|
||||
color: inherit;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.form-control::-moz-placeholder {
|
||||
color: inherit;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.form-control:-ms-input-placeholder {
|
||||
color: inherit;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.form-control::-ms-input-placeholder {
|
||||
color: inherit;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
border-color: #ebedf2 !important;
|
||||
}
|
||||
|
||||
.form-button-action {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.form-check-label,
|
||||
.form-radio-label {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
/* CheckBox Input */
|
||||
|
||||
.select-all-checkbox + .form-check-sign:before {
|
||||
background: #ccc !important;
|
||||
border-color: #ccc !important;
|
||||
}
|
||||
|
||||
.form-check .form-check-input {
|
||||
margin-left: 0;
|
||||
margin-right: 0.75em;
|
||||
}
|
||||
|
||||
/* Radio Input */
|
||||
.form-radio {
|
||||
[type="radio"] {
|
||||
&:not(:checked),
|
||||
&:checked {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
}
|
||||
&:not(:checked) + .form-radio-sign,
|
||||
&:checked + .form-radio-sign {
|
||||
color: $body-text-color;
|
||||
position: relative;
|
||||
padding-left: 2em;
|
||||
cursor: pointer;
|
||||
line-height: 22px;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
&:not(:checked) + .form-radio-sign:before {
|
||||
content: "\f18a";
|
||||
font-size: 22px;
|
||||
font-family: LineAwesome;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: auto;
|
||||
background: $transparent-bg;
|
||||
line-height: 1;
|
||||
color: #bbb;
|
||||
}
|
||||
&:checked + .form-radio-sign:before {
|
||||
content: "\f18a";
|
||||
font-size: 22px;
|
||||
font-family: LineAwesome;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: auto;
|
||||
background: $transparent-bg;
|
||||
line-height: 1;
|
||||
display: none;
|
||||
}
|
||||
&:not(:checked) + .form-radio-sign:after,
|
||||
&:checked + .form-radio-sign:after {
|
||||
content: "\f1bc";
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: auto;
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
color: #4d7cfe;
|
||||
transition: all 0.2s;
|
||||
line-height: 1;
|
||||
font-family: LineAwesome;
|
||||
}
|
||||
&:not(:checked) + .form-radio-sign:after {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
&:checked + .form-radio-sign {
|
||||
&:after {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
&:disabled {
|
||||
&:not(:checked) + .form-radio-sign:before {
|
||||
box-shadow: none;
|
||||
opacity: 0.65;
|
||||
}
|
||||
&:checked + .form-radio-sign {
|
||||
&:before {
|
||||
box-shadow: none;
|
||||
opacity: 0.65;
|
||||
}
|
||||
&:after {
|
||||
opacity: 0.65;
|
||||
}
|
||||
}
|
||||
+ .form-radio-sign {
|
||||
color: #aaa;
|
||||
opacity: 0.65;
|
||||
}
|
||||
}
|
||||
&:checked:focus + .form-radio-sign:before,
|
||||
&:not(:checked):focus + .form-radio-sign:before {
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-radio {
|
||||
padding-left: 0.75rem;
|
||||
}
|
||||
|
||||
.form-radio-input {
|
||||
position: relative;
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
/* Custom Checkbox */
|
||||
.custom-checkbox {
|
||||
.custom-control-input:checked ~ .custom-control-label::before {
|
||||
background-color: $primary-color;
|
||||
}
|
||||
&.checkbox-black {
|
||||
.custom-control-input:checked ~ .custom-control-label::before {
|
||||
background-color: $black-color;
|
||||
}
|
||||
}
|
||||
&.checkbox-primary {
|
||||
.custom-control-input:checked ~ .custom-control-label::before {
|
||||
background-color: $primary-color;
|
||||
}
|
||||
}
|
||||
&.checkbox-secondary {
|
||||
.custom-control-input:checked ~ .custom-control-label::before {
|
||||
background-color: $secondary-color;
|
||||
}
|
||||
}
|
||||
&.checkbox-info {
|
||||
.custom-control-input:checked ~ .custom-control-label::before {
|
||||
background-color: $info-color;
|
||||
}
|
||||
}
|
||||
&.checkbox-success {
|
||||
.custom-control-input:checked ~ .custom-control-label::before {
|
||||
background-color: $success-color;
|
||||
}
|
||||
}
|
||||
&.checkbox-warning {
|
||||
.custom-control-input:checked ~ .custom-control-label::before {
|
||||
background-color: $warning-color;
|
||||
}
|
||||
}
|
||||
&.checkbox-danger {
|
||||
.custom-control-input:checked ~ .custom-control-label::before {
|
||||
background-color: $danger-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Label */
|
||||
.col-form-label {
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.required-label {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.label-align-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.label-align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.label-align-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Input */
|
||||
.form-group,
|
||||
.form-check {
|
||||
margin-bottom: 0;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.form-group label,
|
||||
.form-check label {
|
||||
margin-bottom: 0.5rem;
|
||||
color: #495057;
|
||||
font-size: 1rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.form-group-default {
|
||||
background-color: $white-color;
|
||||
border: 1px solid rgba(0, 0, 0, 0.07);
|
||||
border-radius: 4px;
|
||||
padding-top: 7px;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
padding-bottom: 4px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
-webkit-transition: background-color 0.2s ease;
|
||||
transition: background-color 0.2s ease;
|
||||
margin-bottom: 15px;
|
||||
label {
|
||||
opacity: 1;
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
margin: 0;
|
||||
display: block;
|
||||
-webkit-transition: opacity 0.2s ease;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
label:not(.error) {
|
||||
font-size: 10.5px !important;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
.form-control {
|
||||
background: unset !important;
|
||||
}
|
||||
.form-control, .form-select {
|
||||
border: 0;
|
||||
min-height: 25px;
|
||||
padding: 0;
|
||||
margin-top: 6px;
|
||||
// background: 0 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
select.form-control:not([size]):not([multiple]), select.form-select:not([size]):not([multiple]) {
|
||||
height: unset !important;
|
||||
}
|
||||
&.active {
|
||||
border-color: rgba(0, 0, 0, 0.1) !important;
|
||||
background-color: #f0f0f0;
|
||||
label {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-floating-custom {
|
||||
position: relative;
|
||||
.form-control, .form-select {
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
border-right: 0;
|
||||
border-radius: 0;
|
||||
padding-left: 0;
|
||||
background: transparent !important;
|
||||
}
|
||||
label {
|
||||
padding-left: 0 !important
|
||||
}
|
||||
|
||||
.form-control:focus + label, .form-control:not(:placeholder-shown) + label, .form-select:focus + label, .form-select:not(:placeholder-shown) + label {
|
||||
font-size: 85% !important;
|
||||
transform: translate3d(0, -10px, 0);
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
padding: .375rem 0 .75rem;
|
||||
// font-weight: $font-weight-bold;
|
||||
}
|
||||
.form-control:not(:placeholder-shown) + label, .form-select:not(:placeholder-shown) + label{
|
||||
color: $primary-color !important;
|
||||
}
|
||||
.form-control:not(:placeholder-shown)~label::after {
|
||||
background: transparent !important;
|
||||
}
|
||||
.form-control ::-webkit-input-placeholder { color: $transparent-bg; }
|
||||
.form-control :-moz-placeholder { color: $transparent-bg; }
|
||||
.form-control ::-moz-placeholder { color: $transparent-bg; }
|
||||
.form-control :-ms-input-placeholder { color: $transparent-bg; }
|
||||
>.form-select~label::after {
|
||||
display: none !important
|
||||
}
|
||||
|
||||
>.form-control~label::after {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
// .input-border-bottom + .placeholder{
|
||||
// padding: .375rem 0 .75rem;
|
||||
// }
|
||||
}
|
||||
|
||||
.form-inline label {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.input-fixed {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.form-control.input-full {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.has-success {
|
||||
label {
|
||||
color: $success-color !important;
|
||||
}
|
||||
.form-control {
|
||||
border-color: $success-color !important;
|
||||
color: $success-color !important;
|
||||
}
|
||||
.input-group-text {
|
||||
border-color: $success-color !important;
|
||||
background: $success-color !important;
|
||||
color: $white-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.has-error {
|
||||
label {
|
||||
color: $danger-color !important;
|
||||
}
|
||||
.form-control {
|
||||
border-color: $danger-color !important;
|
||||
color: $danger-color !important;
|
||||
}
|
||||
.input-group-text {
|
||||
border-color: $danger-color !important;
|
||||
background: $danger-color !important;
|
||||
color: $white-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group {
|
||||
label {
|
||||
&.error,
|
||||
&.success {
|
||||
width: 100%;
|
||||
order: 100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.custom-control {
|
||||
position: relative;
|
||||
&.custom-radio,
|
||||
&.custom-checkbox {
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
margin-right: 25px;
|
||||
display: inline-block;
|
||||
.custom-control-input {
|
||||
margin-right: 10px;
|
||||
}
|
||||
label {
|
||||
&.error,
|
||||
&.success {
|
||||
position: absolute;
|
||||
width: 100vh;
|
||||
top: 23px;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.has-feedback {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-control-feedback {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.has-success .form-control-feedback {
|
||||
color: $success-color;
|
||||
}
|
||||
|
||||
.has-error .form-control-feedback {
|
||||
color: $danger-color;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
&.has-icon {
|
||||
border-radius: 0.25rem;
|
||||
border: 1px solid #ced4da;
|
||||
}
|
||||
&.has-success,
|
||||
&.has-icon.has-success {
|
||||
border: 1px solid $success-color !important;
|
||||
color: $success-color;
|
||||
}
|
||||
&.has-error {
|
||||
border: 1px solid $danger-color !important;
|
||||
color: $danger-color;
|
||||
}
|
||||
&.has-icon {
|
||||
&.has-error {
|
||||
border: 1px solid $danger-color !important;
|
||||
color: $danger-color;
|
||||
}
|
||||
.form-control {
|
||||
border-radius: 0.25rem;
|
||||
border: 0px;
|
||||
position: relative;
|
||||
}
|
||||
.input-group-icon {
|
||||
background: $transparent-bg;
|
||||
border: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-square {
|
||||
border-radius: 0px !important;
|
||||
}
|
||||
|
||||
.input-pill {
|
||||
border-radius: 1.3rem !important;
|
||||
}
|
||||
|
||||
.input-solid {
|
||||
background: #e8e8e8 !important;
|
||||
border-color: #e8e8e8 !important;
|
||||
}
|
||||
|
||||
.input-border-bottom {
|
||||
border-width: 0 0 1px 0;
|
||||
border-radius: 0px;
|
||||
padding: 0.75rem 0;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
/* Input File */
|
||||
.input-file {
|
||||
input[type="file"],
|
||||
.form-control,
|
||||
.form-control-file {
|
||||
width: 0.1px;
|
||||
height: 0.1px;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
label {
|
||||
&.error,
|
||||
&.success {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
input[type="file"] + label:not(.error),
|
||||
.form-control + label:not(.error),
|
||||
.form-control-file + label:not(.error),
|
||||
.label-input-file {
|
||||
font-weight: $font-weight-bold;
|
||||
letter-spacing: 0.02em;
|
||||
color: white !important;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.input-file-image {
|
||||
img.img-upload-preview {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0 1px 15px 1px rgba(39, 39, 39, 0.1);
|
||||
&.img-circle {
|
||||
border-radius: 2000px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
&:disabled,
|
||||
&[readonly] {
|
||||
background: #e8e8e8 !important;
|
||||
border-color: #e8e8e8 !important;
|
||||
}
|
||||
&:disabled,
|
||||
&[readonly] {
|
||||
opacity: 0.6 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Input Group */
|
||||
.input-group-text {
|
||||
font-size: 1rem;
|
||||
i.la {
|
||||
font-size: 21px;
|
||||
}
|
||||
i[class*="flaticon"] {
|
||||
font-size: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Input Icon */
|
||||
.input-icon {
|
||||
position: relative;
|
||||
.form-control {
|
||||
&:not(:first-child) {
|
||||
padding-left: 2.5rem;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
padding-right: 2.5rem;
|
||||
}
|
||||
}
|
||||
.input-icon-addon {
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:last-child {
|
||||
left: auto;
|
||||
right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Label States */
|
||||
label {
|
||||
&.error {
|
||||
color: $danger-color !important;
|
||||
font-size: 80% !important;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Label states for select2 */
|
||||
.select2-input {
|
||||
position: relative;
|
||||
label {
|
||||
&.error,
|
||||
&.success {
|
||||
position: absolute;
|
||||
bottom: -30px;
|
||||
}
|
||||
}
|
||||
.select2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom Dropzone */
|
||||
.dropzone {
|
||||
padding: 70px 60px 80px !important;
|
||||
border: 2px dashed rgba(0, 0, 0, 0.13) !important;
|
||||
background: $transparent-bg !important;
|
||||
&:hover {
|
||||
background: #fafafa !important;
|
||||
transition: all 0.5s !important;
|
||||
}
|
||||
.dz-message {
|
||||
.icon {
|
||||
margin-bottom: 15px;
|
||||
font-size: 39px;
|
||||
}
|
||||
.message {
|
||||
font-size: 34px;
|
||||
font-weight: 200;
|
||||
}
|
||||
.note {
|
||||
font-size: 16px;
|
||||
margin-top: 18px;
|
||||
font-weight: $font-weight-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom Summernote */
|
||||
.note-editor.note-frame {
|
||||
border: 0px !important;
|
||||
box-shadow: none !important;
|
||||
.note-toolbar {
|
||||
padding: 0 !important;
|
||||
border-bottom: 0px !important;
|
||||
}
|
||||
.note-btn {
|
||||
border: 1px solid #eee !important;
|
||||
background: #fafafa !important;
|
||||
}
|
||||
.note-placeholder {
|
||||
margin-top: 15px !important;
|
||||
}
|
||||
.note-codable {
|
||||
margin-top: 15px !important;
|
||||
}
|
||||
.note-editing-area {
|
||||
.note-editable {
|
||||
margin-top: 15px !important;
|
||||
border: 2px solid #eee !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
105
public/kai/build/scss/core/components/_invoice.scss
Normal file
105
public/kai/build/scss/core/components/_invoice.scss
Normal file
@@ -0,0 +1,105 @@
|
||||
/* Invoices */
|
||||
.card-invoice{
|
||||
.invoice-header{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
.invoice-title{
|
||||
font-size: 27px;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
.invoice-logo{
|
||||
width: 150px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sub{
|
||||
font-size: 1rem;
|
||||
margin-bottom: 8px;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
.info-invoice{
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
p{
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.invoice-desc{
|
||||
text-align: right;
|
||||
font-size: 13px;
|
||||
}
|
||||
.invoice-detail{
|
||||
width: 100%;
|
||||
display: block;
|
||||
.invoice-top{
|
||||
.title{
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.transfer-to{
|
||||
.sub{
|
||||
font-size: 1rem;
|
||||
margin-bottom: 8px;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
.account-transfer{
|
||||
> div {
|
||||
span:first-child{
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 13px;
|
||||
}
|
||||
span:last-child{
|
||||
font-size: 13px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.transfer-total{
|
||||
text-align: right;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.sub{
|
||||
font-size: 1rem;
|
||||
margin-bottom: 8px;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
.price{
|
||||
font-size: 28px;
|
||||
color: $primary-color;
|
||||
padding: 7px 0;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
span{
|
||||
font-weight: $font-weight-bold;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.card-body{
|
||||
padding: 0;
|
||||
border: 0px !important;
|
||||
width: 75%;
|
||||
margin: auto;
|
||||
}
|
||||
.card-header {
|
||||
padding: 50px 0px 20px;
|
||||
border: 0px !important;
|
||||
width: 75%;
|
||||
margin: auto;
|
||||
}
|
||||
.card-footer {
|
||||
padding: 5px 0 50px;
|
||||
border: 0px !important;
|
||||
width: 75%;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
60
public/kai/build/scss/core/components/_listgroup.scss
Normal file
60
public/kai/build/scss/core/components/_listgroup.scss
Normal file
@@ -0,0 +1,60 @@
|
||||
.list-group {
|
||||
.list-group-header {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
padding: .75rem 1rem;
|
||||
}
|
||||
.list-group-item {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
border-width: 1px 0;
|
||||
border-color: #ebecec;
|
||||
}
|
||||
.list-group-item-figure {
|
||||
align-self: start;
|
||||
display: flex;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
color: #a9acb0;
|
||||
}
|
||||
.list-group-item-body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
align-self: center;
|
||||
font-size: .875rem;
|
||||
}
|
||||
.list-group-item-text {
|
||||
margin-bottom: 0;
|
||||
line-height: 1.25rem;
|
||||
color: #686f76;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-file-item {
|
||||
.list-group-item {
|
||||
padding: 0px;
|
||||
}
|
||||
.list-group-item-figure {
|
||||
padding: .75rem 1rem;
|
||||
}
|
||||
.list-group-item-body {
|
||||
padding: .75rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-bordered {
|
||||
.list-group-item {
|
||||
border: 1px solid #e3ebf6;
|
||||
&.active {
|
||||
background: $primary-color;
|
||||
border-color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-lg {
|
||||
.list-group-item {
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
}
|
||||
146
public/kai/build/scss/core/components/_loader.scss
Normal file
146
public/kai/build/scss/core/components/_loader.scss
Normal file
@@ -0,0 +1,146 @@
|
||||
.loader, .is-loading:after {
|
||||
display: block;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
background: transparent;
|
||||
border: 3px solid $secondary-color;
|
||||
border-bottom-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: 1s spin linear infinite;
|
||||
}
|
||||
|
||||
.loader-lg, .is-loading-lg:after {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-width: 5px;
|
||||
}
|
||||
|
||||
.loader-sm, .is-loading-sm:after {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.is-loading {
|
||||
position: relative;
|
||||
color: transparent !important;
|
||||
> * {
|
||||
opacity: 0.2 !important;
|
||||
}
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: calc(50% - 1.5rem/2);
|
||||
left: calc(50% - 1.5rem/2);
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.is-loading-lg:after {
|
||||
top: calc(50% - 2rem/2);
|
||||
left: calc(50% - 2rem/2);
|
||||
}
|
||||
|
||||
.is-loading-sm:after {
|
||||
top: calc(50% - 1rem/2);
|
||||
left: calc(50% - 1rem/2);
|
||||
}
|
||||
|
||||
%loader-borderbottom-color {
|
||||
border-bottom-color: transparent !important;
|
||||
}
|
||||
|
||||
@mixin loader-state($color) {
|
||||
border-color: $color;
|
||||
@extend %loader-borderbottom-color;
|
||||
}
|
||||
|
||||
%loader-btn-and-card-bgnotwhite {
|
||||
border-color: #fff;
|
||||
@extend %loader-borderbottom-color;
|
||||
}
|
||||
|
||||
.loader-black,
|
||||
.is-loading-black:after {
|
||||
@include loader-state($black-color);
|
||||
}
|
||||
|
||||
.loader-primary,
|
||||
.is-loading-primary:after {
|
||||
@include loader-state($primary-color);
|
||||
}
|
||||
|
||||
.loader-secondary,
|
||||
.is-loading-secondary:after {
|
||||
@include loader-state($secondary-color);
|
||||
}
|
||||
|
||||
.loader-info,
|
||||
.is-loading-info:after {
|
||||
@include loader-state($info-color);
|
||||
}
|
||||
|
||||
.loader-success,
|
||||
.is-loading-success:after {
|
||||
@include loader-state($success-color);
|
||||
}
|
||||
|
||||
.loader-warning,
|
||||
.is-loading-warning:after {
|
||||
@include loader-state($warning-color);
|
||||
}
|
||||
|
||||
.loader-danger,
|
||||
.is-loading-danger:after {
|
||||
@include loader-state($danger-color);
|
||||
}
|
||||
|
||||
.btn-black, .card-black {
|
||||
&.is-loading:after {
|
||||
@extend %loader-btn-and-card-bgnotwhite;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary, .card-primary {
|
||||
&.is-loading:after {
|
||||
@extend %loader-btn-and-card-bgnotwhite;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary, .card-secondary {
|
||||
&.is-loading:after {
|
||||
@extend %loader-btn-and-card-bgnotwhite;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-info, .card-info {
|
||||
&.is-loading:after {
|
||||
@extend %loader-btn-and-card-bgnotwhite;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-success, .card-success {
|
||||
&.is-loading:after {
|
||||
@extend %loader-btn-and-card-bgnotwhite;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-warning, .card-warning {
|
||||
&.is-loading:after {
|
||||
@extend %loader-btn-and-card-bgnotwhite;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-danger, .card-danger {
|
||||
&.is-loading:after {
|
||||
@extend %loader-btn-and-card-bgnotwhite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
67
public/kai/build/scss/core/components/_maps.scss
Normal file
67
public/kai/build/scss/core/components/_maps.scss
Normal file
@@ -0,0 +1,67 @@
|
||||
/* Google Maps */
|
||||
.full-screen-maps {
|
||||
height: 100vh !important;
|
||||
}
|
||||
|
||||
/* jQVMap */
|
||||
.vmap {
|
||||
width: 100%;
|
||||
min-height: 265px;
|
||||
> svg {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
width: 100% !important;
|
||||
> g {
|
||||
transition: all ease-in-out .2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.jqvmap-label, .jqvmap-pin {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.jqvmap-label {
|
||||
position: absolute;
|
||||
display: none;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
background: #292929;
|
||||
color: $white-color;
|
||||
font-size: smaller;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.jqvmap-zoomin, .jqvmap-zoomout {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
border-radius: 4px;
|
||||
background: #fff;
|
||||
font-weight: 600;
|
||||
color: #8a95a0;
|
||||
border: 1px solid #e2dddd !important;
|
||||
cursor: pointer;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
font-size: 1.25rem;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.jqvmap-zoomin {
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
.jqvmap-zoomout {
|
||||
top: 45px;
|
||||
}
|
||||
|
||||
.jqvmap-region {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.jqvmap-ajax_response {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
300
public/kai/build/scss/core/components/_menu-toggler.scss
Normal file
300
public/kai/build/scss/core/components/_menu-toggler.scss
Normal file
@@ -0,0 +1,300 @@
|
||||
// Menu
|
||||
|
||||
.gg-menu {
|
||||
transform: scale(var(--ggs, 1));
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
border-radius: 3px;
|
||||
background: currentColor;
|
||||
|
||||
&::after, &::before {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
border-radius: 3px;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
&::after, &::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
// Menu Left
|
||||
|
||||
.gg-menu-left {
|
||||
transform: scale(var(--ggs, 1));
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
border-radius: 3px;
|
||||
background: currentColor;
|
||||
|
||||
&::after, &::before {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
border-radius: 3px;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
&::after, &::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 6px;
|
||||
width: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
// Menu Right
|
||||
|
||||
.gg-menu-right {
|
||||
transform: scale(var(--ggs, 1));
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
border-radius: 3px;
|
||||
background: currentColor;
|
||||
|
||||
&::after, &::before {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
border-radius: 3px;
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
&::after, &::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: 0;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 6px;
|
||||
width: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
// Menu Left & Right Hover
|
||||
|
||||
.gg-menu-left, .gg-menu-right {
|
||||
&::after, &::before {
|
||||
transition: all .2s;
|
||||
}
|
||||
&:hover {
|
||||
&::after, &::before {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Menu Round
|
||||
|
||||
.gg-menu-round {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 24px;
|
||||
border: 2px solid;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
border-radius: 3px;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
box-shadow: 0 4px 0, 0 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Menu Boxed
|
||||
|
||||
.gg-menu-boxed {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 3px;
|
||||
border: 2px solid;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
border-radius: 3px;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
box-shadow: 0 4px 0, 0 8px 0;
|
||||
}
|
||||
}
|
||||
|
||||
// More Vertical
|
||||
.gg-more-vertical-alt {
|
||||
transform: scale(var(--ggs, 1));
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: currentColor;
|
||||
border-radius: 100%;
|
||||
|
||||
&::after, &::before {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background: currentColor;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
&::after, &::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: 0;
|
||||
top: 6px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: -6px;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Close
|
||||
|
||||
.gg-close {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 40px;
|
||||
|
||||
&::after, &::before {
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
transform: rotate(45deg);
|
||||
border-radius: 5px;
|
||||
top: 8px;
|
||||
left: 1px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Close Round
|
||||
|
||||
.gg-close-o {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid;
|
||||
border-radius: 40px;
|
||||
|
||||
&::after, &::before {
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
transform: rotate(45deg);
|
||||
border-radius: 5px;
|
||||
top: 8px;
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Close Round
|
||||
|
||||
.gg-close-r {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
display: block;
|
||||
transform: scale(var(--ggs, 1));
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 2px solid;
|
||||
border-radius: 4px;
|
||||
|
||||
&::after, &::before {
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 2px;
|
||||
background: currentColor;
|
||||
transform: rotate(45deg);
|
||||
border-radius: 5px;
|
||||
top: 8px;
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
378
public/kai/build/scss/core/components/_messages.scss
Normal file
378
public/kai/build/scss/core/components/_messages.scss
Normal file
@@ -0,0 +1,378 @@
|
||||
/* Messages Tab */
|
||||
.tab-chat {
|
||||
position: relative;
|
||||
}
|
||||
.messages-contact {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
transition: left 0.3s ease;
|
||||
}
|
||||
|
||||
.messages-contact {
|
||||
.contact-list {
|
||||
.user {
|
||||
a {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 11px 10px;
|
||||
border-radius: 5px;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.user-data,
|
||||
.user-data2 {
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.name {
|
||||
color: $body-text-color;
|
||||
font-size: 13px;
|
||||
margin-bottom: 3px;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
.message {
|
||||
color: #aaa;
|
||||
}
|
||||
.status {
|
||||
color: #979797;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.messages-wrapper {
|
||||
position: absolute;
|
||||
left: calc(100% + 40px);
|
||||
transition: left 0.3s ease;
|
||||
}
|
||||
|
||||
.messages-wrapper {
|
||||
.messages-title {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
border-bottom: 1px solid #eee;
|
||||
margin-bottom: 15px;
|
||||
.user {
|
||||
width: calc(100% - 40px);
|
||||
float: right;
|
||||
text-align: right;
|
||||
padding: 10px 0;
|
||||
.name {
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
font-weight: $font-weight-normal;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.last-active {
|
||||
display: block;
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
.return {
|
||||
background: $transparent-bg;
|
||||
border: 0;
|
||||
font-size: 25px;
|
||||
padding: 10px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.messages-body {
|
||||
height: calc(100vh - 290px);
|
||||
display: block;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.messages-wrapper .messages-body,
|
||||
.conversations-body {
|
||||
.message-content-wrapper {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
.message {
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
padding: 8px 0;
|
||||
}
|
||||
.message-in {
|
||||
margin-right: 40px;
|
||||
float: left;
|
||||
.message-body {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
.message-content {
|
||||
background: #f7f7f7;
|
||||
padding: 12px 15px;
|
||||
border-radius: 5px;
|
||||
margin-left: 10px;
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
&:before {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 10px solid $transparent-bg;
|
||||
border-bottom: 10px solid $transparent-bg;
|
||||
border-right: 10px solid #f7f7f7;
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -9px;
|
||||
top: 12px;
|
||||
}
|
||||
.name {
|
||||
color: #83848a;
|
||||
font-size: 11px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.content {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
.date {
|
||||
margin-left: 10px;
|
||||
margin-top: 8px;
|
||||
font-size: 11px;
|
||||
color: #83848a;
|
||||
padding-left: 12px;
|
||||
}
|
||||
.message-content + .message-content {
|
||||
margin-top: 10px;
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.message-out {
|
||||
float: right;
|
||||
margin-left: 40px;
|
||||
.message-body {
|
||||
display: table-cell;
|
||||
vertical-align: top;
|
||||
float: right;
|
||||
.message-content {
|
||||
background: $primary-color;
|
||||
padding: 12px 15px;
|
||||
border-radius: 5px;
|
||||
margin-right: 10px;
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
&:before {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 10px solid $transparent-bg;
|
||||
border-bottom: 10px solid $transparent-bg;
|
||||
border-left: 10px solid $primary-color;
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -9px;
|
||||
top: 12px;
|
||||
}
|
||||
.content {
|
||||
font-size: 13px;
|
||||
color: $white-color !important;
|
||||
}
|
||||
}
|
||||
.date {
|
||||
margin-right: 10px;
|
||||
margin-top: 8px;
|
||||
font-size: 11px;
|
||||
color: #83848a;
|
||||
text-align: right;
|
||||
padding-right: 15px;
|
||||
}
|
||||
.message-content + .message-content {
|
||||
margin-top: 10px;
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.messages-form {
|
||||
display: table;
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
border-top: 1px solid #eee;
|
||||
padding-top: 20px;
|
||||
.messages-form-control {
|
||||
display: table-cell;
|
||||
padding-right: 15px;
|
||||
}
|
||||
.messages-form-tool {
|
||||
display: table-cell;
|
||||
text-align: right;
|
||||
width: 50px;
|
||||
.attachment {
|
||||
height: 100%;
|
||||
line-height: 1;
|
||||
color: #888c91;
|
||||
background: #e8e8e8;
|
||||
font-size: 17px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 50%;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.show-chat {
|
||||
.messages-contact {
|
||||
left: calc(-100% - 40px);
|
||||
}
|
||||
.messages-wrapper {
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-contacts {
|
||||
.chat-username {
|
||||
font-weight: 600;
|
||||
}
|
||||
.chat-msg {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
max-width: 175px;
|
||||
text-overflow: ellipsis;
|
||||
margin-top: 4px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.list-group-item {
|
||||
&.unread {
|
||||
background: #f5f7fd;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* List Group Messages */
|
||||
.list-group-messages {
|
||||
.btn-dropdown {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
font-size: 16px;
|
||||
color: #b5b5b5;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
.list-group-item {
|
||||
padding-top: 1.25rem;
|
||||
padding-bottom: 1.25rem;
|
||||
&.unread {
|
||||
background: #f5f7fd;
|
||||
.list-group-item-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list-group-item-title {
|
||||
a {
|
||||
color: $body-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Conversations Wrapper */
|
||||
.conversations {
|
||||
display: flex;
|
||||
height: calc(100vh - 57px);
|
||||
flex-direction: column;
|
||||
.message-header {
|
||||
background: #fff;
|
||||
padding: 0.5rem;
|
||||
box-shadow: 0 1px 0 0 rgba(61, 70, 79, 0.075);
|
||||
z-index: 1;
|
||||
}
|
||||
.message-title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
.user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.name {
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
font-weight: $font-weight-bold;
|
||||
line-height: 24px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.last-active {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
.return {
|
||||
background: $transparent-bg;
|
||||
border: 0;
|
||||
font-size: 25px;
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.conversations-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 1.5rem 2rem;
|
||||
}
|
||||
.conversations-content {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 5px;
|
||||
padding: 1rem;
|
||||
}
|
||||
.messages-form {
|
||||
margin: 0;
|
||||
padding: 0.7rem 1rem;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.conversations-action {
|
||||
background: #f6f6f6;
|
||||
padding: 10px 0;
|
||||
.action {
|
||||
display: flex;
|
||||
padding: 1rem 1.5rem;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: #f4f5f5;
|
||||
}
|
||||
span {
|
||||
font-size: 16px;
|
||||
line-height: 21px;
|
||||
}
|
||||
i {
|
||||
font-size: 21px;
|
||||
width: 2.5rem;
|
||||
color: rgba(38, 50, 56, 0.5);
|
||||
}
|
||||
&.danger {
|
||||
span,
|
||||
i {
|
||||
color: $danger-color;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 991.5px) {
|
||||
.conversations {
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
}
|
||||
}
|
||||
11
public/kai/build/scss/core/components/_modals.scss
Normal file
11
public/kai/build/scss/core/components/_modals.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
/* Modal */
|
||||
.modal {
|
||||
.bg-black .modal-title, .bg-primary .modal-title, .bg-secondary .modal-title, .bg-info .modal-title, .bg-success .modal-title, .bg-warning .modal-title, .bg-danger .modal-title {
|
||||
color: $white-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
border-radius: .4rem;
|
||||
border: 0 !important;
|
||||
}
|
||||
328
public/kai/build/scss/core/components/_navbars.scss
Normal file
328
public/kai/build/scss/core/components/_navbars.scss
Normal file
@@ -0,0 +1,328 @@
|
||||
/* Navbar */
|
||||
|
||||
.navbar {
|
||||
.navbar-nav {
|
||||
.nav-item {
|
||||
padding: 0 4px;
|
||||
.nav-link {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: #8a95a0;
|
||||
padding: 8px 14px;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
font-weight: $font-weight-normal;
|
||||
text-align: center;
|
||||
transition: all .3s;
|
||||
&:hover, &:focus {
|
||||
background: rgba(77,89,149,.06);
|
||||
}
|
||||
i {
|
||||
font-size: 16px;
|
||||
vertical-align: middle;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.nav-link {
|
||||
background: rgba(77,89,149,.06);
|
||||
}
|
||||
}
|
||||
}
|
||||
.topbar-icon {
|
||||
padding: 0;
|
||||
.nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: unset;
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
}
|
||||
}
|
||||
.topbar-user {
|
||||
// padding: 0 0 0 8px;
|
||||
.profile-pic {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px;
|
||||
height: 44px;
|
||||
border-radius: 3px;
|
||||
color: #000;
|
||||
&:hover, &:focus {
|
||||
background: rgba(77,89,149,.06);
|
||||
}
|
||||
}
|
||||
.profile-username {
|
||||
margin-left: 8px;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-expand-lg .navbar-nav .dropdown-menu {
|
||||
left: auto;
|
||||
right: 0;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.navbar .navbar-nav .notification {
|
||||
position: absolute;
|
||||
background-color: $success-color;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
min-width: 17px;
|
||||
height: 17px;
|
||||
font-size: 10px;
|
||||
color: $white-color;
|
||||
font-weight: $font-weight-light;
|
||||
line-height: 17px;
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
padding: 0px 30px;
|
||||
.container-fluid {
|
||||
min-height: inherit;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.dropdown-toggle {
|
||||
&::after {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.profile-pic {
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
span {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-header .dropdown-toggle::after {
|
||||
vertical-align: middle;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.hidden-caret .dropdown-toggle::after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
&[class*="bg-"] {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
|
||||
.navbar-brand {
|
||||
color: $white-color;
|
||||
}
|
||||
.navbar-toggler-icon{
|
||||
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
|
||||
}
|
||||
.navbar-nav {
|
||||
> .nav-item {
|
||||
> .nav-link {
|
||||
color: $white-color;
|
||||
&.disabled {
|
||||
color: #d8d8d8 !important;
|
||||
}
|
||||
&:hover {
|
||||
background: rgba(255,255,255,0.22) !important;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
> .nav-link {
|
||||
background: rgba(255,255,255,0.22) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-toggle {
|
||||
background: rgba(19, 19, 19, 0.25) !important;
|
||||
color: $white-color !important;
|
||||
}
|
||||
.nav-search{
|
||||
.input-group {
|
||||
border: 0;
|
||||
background: rgba(19, 19, 19, 0.25) !important;
|
||||
.form-control {
|
||||
color: $white-color !important
|
||||
}
|
||||
}
|
||||
.search-icon {
|
||||
color: $white-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Page Navigation */
|
||||
.navbar-nav {
|
||||
&.page-navigation {
|
||||
@mixin page-navigation-default-style($color) {
|
||||
.nav-item {
|
||||
&.active {
|
||||
.nav-link {
|
||||
color: $color !important;
|
||||
}
|
||||
}
|
||||
.nav-link {
|
||||
&:hover {
|
||||
color: $color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.page-navigation-black{
|
||||
@include page-navigation-default-style($black-color);
|
||||
}
|
||||
&.page-navigation-primary{
|
||||
@include page-navigation-default-style($primary-color);
|
||||
}
|
||||
&.page-navigation-secondary{
|
||||
@include page-navigation-default-style($secondary-color);
|
||||
}
|
||||
&.page-navigation-success{
|
||||
@include page-navigation-default-style($success-color);
|
||||
}
|
||||
&.page-navigation-warning{
|
||||
@include page-navigation-default-style($warning-color);
|
||||
}
|
||||
&.page-navigation-danger{
|
||||
@include page-navigation-default-style($danger-color);
|
||||
}
|
||||
&.page-navigation-info{
|
||||
@include page-navigation-default-style($info-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Navbar Line */
|
||||
|
||||
.navbar-line {
|
||||
min-height: inherit;
|
||||
.navbar-nav {
|
||||
min-height: inherit;
|
||||
&.page-navigation {
|
||||
.nav-item {
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-line {
|
||||
.navbar-nav {
|
||||
&.page-navigation {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
padding: 10px 20px;
|
||||
background: transparent !important;
|
||||
font-weight: $font-weight-bold;
|
||||
&:first-child {
|
||||
margin-left: -20px;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
position: relative;
|
||||
&::before {
|
||||
height: 2px;
|
||||
width: calc(100% - 30px);
|
||||
bottom: 0px;
|
||||
transform: translateX(-50%);
|
||||
margin-left: -10px;
|
||||
left: 50%;
|
||||
background: $primary-color;
|
||||
content: '';
|
||||
position: absolute;
|
||||
.nav-link {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
&:first-child {
|
||||
&::before {
|
||||
width: calc(100% - 30px);
|
||||
margin-left: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(.active){
|
||||
.nav-link {
|
||||
font-weight: $font-weight-normal;
|
||||
color: rgba(255, 255, 255, 0.85) !important;
|
||||
transition: all .3s;
|
||||
&:hover {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin page-navigation-line-style($color) {
|
||||
.nav-item {
|
||||
&.active {
|
||||
&::before {
|
||||
background: $color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.page-navigation-black{
|
||||
@include page-navigation-line-style($black-color);
|
||||
}
|
||||
&.page-navigation-primary{
|
||||
@include page-navigation-line-style($primary-color);
|
||||
}
|
||||
&.page-navigation-secondary{
|
||||
@include page-navigation-line-style($secondary-color);
|
||||
}
|
||||
&.page-navigation-success{
|
||||
@include page-navigation-line-style($success-color);
|
||||
}
|
||||
&.page-navigation-warning{
|
||||
@include page-navigation-line-style($warning-color);
|
||||
}
|
||||
&.page-navigation-danger{
|
||||
@include page-navigation-line-style($danger-color);
|
||||
}
|
||||
&.page-navigation-info{
|
||||
@include page-navigation-line-style($info-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
&:not([data-background-color]), &[data-background-color="white"] {
|
||||
.navbar-line {
|
||||
.navbar-nav {
|
||||
&.page-navigation {
|
||||
.active {
|
||||
.nav-link {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
.nav-item:not(.active) {
|
||||
.nav-link {
|
||||
color: #9EA2AD !important;
|
||||
&:hover {
|
||||
color: #666 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
64
public/kai/build/scss/core/components/_navsearch.scss
Normal file
64
public/kai/build/scss/core/components/_navsearch.scss
Normal file
@@ -0,0 +1,64 @@
|
||||
/* Nav Search */
|
||||
|
||||
.nav-search {
|
||||
.input-group {
|
||||
border: 1px solid #e6e7e9;
|
||||
background: #f9f9f9;
|
||||
border-radius: 5px;
|
||||
&:hover, &:focus {
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
}
|
||||
&.nav-search-round {
|
||||
.input-group {
|
||||
border-radius: 50px;
|
||||
}
|
||||
}
|
||||
.form-control {
|
||||
border: 0;
|
||||
background: $transparent-bg !important;
|
||||
font-size: 1rem;
|
||||
padding: 0.75em 1em;
|
||||
min-width: 250px;
|
||||
max-width: 100%;
|
||||
}
|
||||
.input-group-text {
|
||||
border: 0;
|
||||
background: $transparent-bg;
|
||||
}
|
||||
.search-icon {
|
||||
font-size: 18px;
|
||||
color: #4a4a4a;
|
||||
}
|
||||
.btn-search {
|
||||
background: $transparent-bg !important;
|
||||
padding: .375rem 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Quick Search */
|
||||
|
||||
.quick-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 225px;
|
||||
.input-group {
|
||||
background: #eee;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.btn-search {
|
||||
background: transparent;
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
.search-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
input.form-control {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
padding: .5rem 0;
|
||||
}
|
||||
}
|
||||
285
public/kai/build/scss/core/components/_navtabs.scss
Normal file
285
public/kai/build/scss/core/components/_navtabs.scss
Normal file
@@ -0,0 +1,285 @@
|
||||
/* Nav Pill */
|
||||
|
||||
.nav-pills > li {
|
||||
&:first-child > .nav-link {
|
||||
border-radius: 4px 0 0 4px !important;
|
||||
}
|
||||
&:last-child > .nav-link {
|
||||
border-radius: 0 4px 4px 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link.disabled {
|
||||
color: #6c757d !important;
|
||||
}
|
||||
|
||||
.nav-pills {
|
||||
.nav-link {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
> li > .nav-link {
|
||||
// margin-left: -1px;
|
||||
border-radius: 0 !important;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
&.active {
|
||||
background: $primary-color;
|
||||
}
|
||||
border: 1px solid $primary-color;
|
||||
color: #585c5d;
|
||||
&:hover {
|
||||
background: rgba(222, 222, 222, 0.4);
|
||||
}
|
||||
}
|
||||
&.nav-pills-no-bd{
|
||||
li {
|
||||
margin-left: 15px !important;
|
||||
.nav-link{
|
||||
border: 0px !important;
|
||||
border-radius: 50px !important;
|
||||
background: rgba(222, 222, 222, 0.4);
|
||||
&.active{
|
||||
border-radius: 50px !important;
|
||||
}
|
||||
}
|
||||
&:first-child{
|
||||
margin-left: 0px !important;
|
||||
}
|
||||
}
|
||||
&.nav-pills-icons{
|
||||
.nav-link, .nav-link.active{
|
||||
border-radius: 5px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.flex-column {
|
||||
.nav-link {
|
||||
border-radius: 0 !important;
|
||||
border: 1px solid $primary-color;
|
||||
color: #585c5d;
|
||||
margin-top: -1px;
|
||||
text-align: center;
|
||||
word-wrap: normal;
|
||||
padding: 10px 0;
|
||||
&:hover {
|
||||
background: rgba(222, 222, 222, 0.4);
|
||||
}
|
||||
&.active {
|
||||
background: $primary-color;
|
||||
}
|
||||
&:first-child {
|
||||
border-radius: 4px 4px 0 0 !important;
|
||||
}
|
||||
&:last-child {
|
||||
border-radius: 0 0 4px 4px !important;
|
||||
}
|
||||
}
|
||||
&.nav-pills-no-bd{
|
||||
.nav-link{
|
||||
border: 0px !important;
|
||||
border-radius: 50px !important;
|
||||
background: rgba(222, 222, 222, 0.4);
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
&.active{
|
||||
border-radius: 50px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-pills-icons{
|
||||
.nav-link, .nav-link.active{
|
||||
border-radius: 5px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-pills-icons{
|
||||
.nav-link, .nav-link.active{
|
||||
border-radius: 5px !important;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
i {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 2em;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
&.nav-black, &.nav-primary, &.nav-secondary, &.nav-info, &.nav-warning, &.nav-success, &.nav-danger{
|
||||
.nav-link {
|
||||
border: 1px solid #eeeeee;
|
||||
}
|
||||
.nav-link.active {
|
||||
color: $white-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin nav-pills-states-active($color) {
|
||||
background: $color;
|
||||
border: 1px solid $color;
|
||||
}
|
||||
|
||||
&.nav-black .nav-link {
|
||||
&.active {
|
||||
@include nav-pills-states-active($black-color);
|
||||
}
|
||||
}
|
||||
&.nav-primary .nav-link {
|
||||
&.active {
|
||||
@include nav-pills-states-active($primary-color);
|
||||
}
|
||||
}
|
||||
&.nav-secondary .nav-link {
|
||||
&.active {
|
||||
@include nav-pills-states-active($secondary-color);
|
||||
}
|
||||
}
|
||||
&.nav-info .nav-link {
|
||||
&.active {
|
||||
@include nav-pills-states-active($info-color);
|
||||
}
|
||||
}
|
||||
&.nav-success .nav-link {
|
||||
&.active {
|
||||
@include nav-pills-states-active($success-color);
|
||||
}
|
||||
}
|
||||
&.nav-warning .nav-link {
|
||||
&.active {
|
||||
@include nav-pills-states-active($warning-color);
|
||||
}
|
||||
}
|
||||
&.nav-danger .nav-link {
|
||||
&.active {
|
||||
@include nav-pills-states-active($danger-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Nav Line */
|
||||
|
||||
.row-nav-line {
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
}
|
||||
|
||||
.nav{
|
||||
@mixin nav-line-color-style($color){
|
||||
.nav-link{
|
||||
&.active{
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin nav-simple-color-style($color) {
|
||||
.nav-link{
|
||||
&:hover, &:focus{
|
||||
color: $color;
|
||||
}
|
||||
&.active{
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-line, &.nav-simple {
|
||||
// border-bottom: 1px solid $grey-color;
|
||||
.nav-link {
|
||||
padding: 18px 0 !important;
|
||||
margin-right: 40px;
|
||||
color: #6B6D7E;
|
||||
border-width: 0px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
&:hover, &:focus{
|
||||
color: $primary-color;
|
||||
border-width: 0px;
|
||||
}
|
||||
&.active {
|
||||
border-width: 0;
|
||||
background-color: $transparent-bg;
|
||||
color: $primary-color;
|
||||
border-radius: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-simple {
|
||||
&.nav-color-black {
|
||||
@include nav-simple-color-style($black-color);
|
||||
}
|
||||
&.nav-color-primary {
|
||||
@include nav-simple-color-style($primary-color);
|
||||
}
|
||||
&.nav-color-secondary {
|
||||
@include nav-simple-color-style($secondary-color);
|
||||
}
|
||||
&.nav-color-info {
|
||||
@include nav-simple-color-style($info-color);
|
||||
}
|
||||
&.nav-color-success {
|
||||
@include nav-simple-color-style($success-color);
|
||||
}
|
||||
&.nav-color-danger {
|
||||
@include nav-simple-color-style($danger-color);
|
||||
}
|
||||
&.nav-color-warning {
|
||||
@include nav-simple-color-style($warning-color);
|
||||
}
|
||||
&.nav-color-light {
|
||||
@include nav-simple-color-style($white-color);
|
||||
.nav-link {
|
||||
color: $grey-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-line {
|
||||
.nav-link {
|
||||
&.active {
|
||||
border-bottom: 3px solid $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-color-black {
|
||||
@include nav-simple-color-style($black-color);
|
||||
@include nav-line-color-style($black-color);
|
||||
}
|
||||
&.nav-color-primary {
|
||||
@include nav-simple-color-style($primary-color);
|
||||
@include nav-line-color-style($primary-color);
|
||||
}
|
||||
&.nav-color-secondary {
|
||||
@include nav-simple-color-style($secondary-color);
|
||||
@include nav-line-color-style($secondary-color);
|
||||
}
|
||||
&.nav-color-info {
|
||||
@include nav-simple-color-style($info-color);
|
||||
@include nav-line-color-style($info-color);
|
||||
}
|
||||
&.nav-color-success {
|
||||
@include nav-simple-color-style($success-color);
|
||||
@include nav-line-color-style($success-color);
|
||||
}
|
||||
&.nav-color-danger {
|
||||
@include nav-simple-color-style($danger-color);
|
||||
@include nav-line-color-style($danger-color);
|
||||
}
|
||||
&.nav-color-warning {
|
||||
@include nav-simple-color-style($warning-color);
|
||||
@include nav-line-color-style($warning-color);
|
||||
}
|
||||
&.nav-color-light {
|
||||
@include nav-simple-color-style($white-color);
|
||||
@include nav-line-color-style($white-color);
|
||||
.nav-link {
|
||||
color: $grey-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Size Nav */
|
||||
.nav-sm{
|
||||
.nav-link{
|
||||
font-size: 11px !important;
|
||||
padding: 8px 16px !important;
|
||||
}
|
||||
}
|
||||
49
public/kai/build/scss/core/components/_paginations.scss
Normal file
49
public/kai/build/scss/core/components/_paginations.scss
Normal file
@@ -0,0 +1,49 @@
|
||||
/* Pagination */
|
||||
|
||||
.pagination {
|
||||
> li {
|
||||
> a, &:first-child > a, &:last-child > a, > span, &:first-child > span, &:last-child > span {
|
||||
border-radius: 100px !important;
|
||||
margin: 0 2px;
|
||||
color: #777777;
|
||||
border-color: #ddd;
|
||||
}
|
||||
> a {
|
||||
// width: 28px;
|
||||
// height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin pagination-active-state($color) {
|
||||
> a, &:first-child > a, &:last-child > a, > span, &:first-child > span, &:last-child > span {
|
||||
background: $color;
|
||||
border-color: $color;
|
||||
color: $white-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.pg-black > li.active {
|
||||
@include pagination-active-state($black-color);
|
||||
}
|
||||
&.pg-primary > li.active {
|
||||
@include pagination-active-state($primary-color);
|
||||
}
|
||||
&.pg-secondary > li.active {
|
||||
@include pagination-active-state($secondary-color);
|
||||
}
|
||||
&.pg-info > li.active {
|
||||
@include pagination-active-state($info-color);
|
||||
}
|
||||
&.pg-success > li.active {
|
||||
@include pagination-active-state($success-color);
|
||||
}
|
||||
&.pg-warning > li.active {
|
||||
@include pagination-active-state($warning-color);
|
||||
}
|
||||
&.pg-danger > li.active {
|
||||
@include pagination-active-state($danger-color);
|
||||
}
|
||||
}
|
||||
46
public/kai/build/scss/core/components/_popovers.scss
Normal file
46
public/kai/build/scss/core/components/_popovers.scss
Normal file
@@ -0,0 +1,46 @@
|
||||
/* Popover */
|
||||
.popover {
|
||||
max-width: 240px;
|
||||
line-height: 1.7;
|
||||
border: 0;
|
||||
box-shadow: 0px 0px 20px 1px rgba(69, 65, 78, 0.2);
|
||||
.popover-header{
|
||||
background: $transparent-bg;
|
||||
font-size: 1rem;
|
||||
border-bottom: 0px;
|
||||
text-transform: capitalize;
|
||||
margin-top: 5px;
|
||||
color: #aaaaaa;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
.popover-body {
|
||||
margin-bottom: 5px;
|
||||
p {
|
||||
font-size: 13px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
&.bs-popover-top, &.bs-popover-bottom, &.bs-popover-left, &.bs-popover-right{
|
||||
.arrow{
|
||||
&:before {
|
||||
border: $transparent-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popover.bs-popover-auto[x-placement^=right], .popover.bs-popover-right{
|
||||
margin-left:10px;
|
||||
}
|
||||
|
||||
.popover.bs-popover-auto[x-placement^=left], .popover.bs-popover-left{
|
||||
margin-right:10px;
|
||||
}
|
||||
|
||||
.popover.bs-popover-auto[x-placement^=top], .popover.bs-popover-top{
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
.popover.bs-popover-auto[x-placement^=bottom], .popover.bs-popover-bottom{
|
||||
margin-top:10px;
|
||||
}
|
||||
14
public/kai/build/scss/core/components/_progress.scss
Normal file
14
public/kai/build/scss/core/components/_progress.scss
Normal file
@@ -0,0 +1,14 @@
|
||||
/* Progress */
|
||||
.progress {
|
||||
border-radius: 100px;
|
||||
height: 14px;
|
||||
.progress-bar{
|
||||
border-radius: 100px;
|
||||
}
|
||||
&.progress-sm {
|
||||
height: 8px;
|
||||
}
|
||||
&.progress-lg {
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
7
public/kai/build/scss/core/components/_projects.scss
Normal file
7
public/kai/build/scss/core/components/_projects.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
.row-projects {
|
||||
margin-right: -10px;
|
||||
margin-left: -10px;
|
||||
[class^="col-"] {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
26
public/kai/build/scss/core/components/_rating.scss
Normal file
26
public/kai/build/scss/core/components/_rating.scss
Normal file
@@ -0,0 +1,26 @@
|
||||
.rating {
|
||||
>label {
|
||||
display: inline;
|
||||
color: #e9eaeb !important;
|
||||
line-height: 1;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #FFC600 !important;
|
||||
opacity: 0.5;
|
||||
}
|
||||
span {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
input[type="radio"], input[type="checkbox"] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
&:checked {
|
||||
&~label {
|
||||
color: #FFC600 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
120
public/kai/build/scss/core/components/_selectgroup.scss
Normal file
120
public/kai/build/scss/core/components/_selectgroup.scss
Normal file
@@ -0,0 +1,120 @@
|
||||
.selectgroup {
|
||||
display: -ms-inline-flexbox;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.selectgroup-item {
|
||||
-ms-flex-positive: 1;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
font-weight: $font-weight-normal !important;
|
||||
+ .selectgroup-item {
|
||||
margin-left: -1px;
|
||||
}
|
||||
&:not(:first-child) .selectgroup-button {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
&:not(:last-child) .selectgroup-button {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.selectgroup-input {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.selectgroup-button {
|
||||
display: block;
|
||||
border: 1px solid rgba(0, 40, 100, 0.12);
|
||||
text-align: center;
|
||||
padding: 0.375rem 1rem;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
color: #9aa0ac;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem;
|
||||
min-width: 2.375rem;
|
||||
}
|
||||
|
||||
.selectgroup-button-icon {
|
||||
padding-left: .5rem;
|
||||
padding-right: .5rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.selectgroup-input {
|
||||
&:checked + .selectgroup-button {
|
||||
border-color: $primary-color;
|
||||
z-index: 1;
|
||||
color: $primary-color;
|
||||
background: rgba($primary-color, .15);
|
||||
}
|
||||
&:focus + .selectgroup-button {
|
||||
border-color: $primary-color;
|
||||
z-index: 2;
|
||||
color: $primary-color;
|
||||
box-shadow: 0 0 0 2px rgba($primary-color, .25);
|
||||
}
|
||||
}
|
||||
|
||||
.selectgroup-pills {
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
.selectgroup-item {
|
||||
margin-right: .5rem;
|
||||
-ms-flex-positive: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
.selectgroup-button {
|
||||
border-radius: 50px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin select-group-state-style($color) {
|
||||
.selectgroup-input {
|
||||
&:checked + .selectgroup-button {
|
||||
border-color: $color;
|
||||
color: $color;
|
||||
background: rgba($color, .15);
|
||||
}
|
||||
&:focus + .selectgroup-button {
|
||||
border-color: $color;
|
||||
color: $color;
|
||||
box-shadow: 0 0 0 2px rgba($color, .25);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selectgroup {
|
||||
&.selectgroup-primary {
|
||||
@include select-group-state-style($primary-color);
|
||||
}
|
||||
&.selectgroup-secondary {
|
||||
@include select-group-state-style($secondary-color);
|
||||
}
|
||||
&.selectgroup-info {
|
||||
@include select-group-state-style($info-color);
|
||||
}
|
||||
&.selectgroup-success {
|
||||
@include select-group-state-style($success-color);
|
||||
}
|
||||
&.selectgroup-warning {
|
||||
@include select-group-state-style($warning-color);
|
||||
}
|
||||
&.selectgroup-danger {
|
||||
@include select-group-state-style($danger-color);
|
||||
}
|
||||
}
|
||||
29
public/kai/build/scss/core/components/_settings.scss
Normal file
29
public/kai/build/scss/core/components/_settings.scss
Normal file
@@ -0,0 +1,29 @@
|
||||
/* Setting Tab */
|
||||
.settings-wrapper{
|
||||
.settings-content{
|
||||
.settings-list{
|
||||
padding-left: 0px;
|
||||
list-style: none;
|
||||
li{
|
||||
display: table;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
.item-label{
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
font-size: 13px;
|
||||
}
|
||||
.item-control{
|
||||
display: table-cell;
|
||||
float: right;
|
||||
margin-right: 5px;
|
||||
.toggle-group {
|
||||
.toggle-on, .toggle-off{
|
||||
font-size: 11px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
29
public/kai/build/scss/core/components/_sliders.scss
Normal file
29
public/kai/build/scss/core/components/_sliders.scss
Normal file
@@ -0,0 +1,29 @@
|
||||
/* Slider */
|
||||
|
||||
.slider-black .ui-slider-range {
|
||||
background: $black-color;
|
||||
}
|
||||
|
||||
.slider-primary .ui-slider-range {
|
||||
background: $primary-color;
|
||||
}
|
||||
|
||||
.slider-secondary .ui-slider-range {
|
||||
background: $secondary-color;
|
||||
}
|
||||
|
||||
.slider-info .ui-slider-range {
|
||||
background: $info-color;
|
||||
}
|
||||
|
||||
.slider-success .ui-slider-range {
|
||||
background: $success-color;
|
||||
}
|
||||
|
||||
.slider-warning .ui-slider-range {
|
||||
background: $warning-color;
|
||||
}
|
||||
|
||||
.slider-danger .ui-slider-range {
|
||||
background: $danger-color;
|
||||
}
|
||||
20
public/kai/build/scss/core/components/_stamps.scss
Normal file
20
public/kai/build/scss/core/components/_stamps.scss
Normal file
@@ -0,0 +1,20 @@
|
||||
.stamp {
|
||||
i {
|
||||
color: #fff !important;
|
||||
}
|
||||
background: $secondary-color;
|
||||
display: inline-block;
|
||||
min-width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 0 0.25rem;
|
||||
line-height: 2rem;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stamp-md {
|
||||
min-width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
196
public/kai/build/scss/core/components/_tables.scss
Normal file
196
public/kai/build/scss/core/components/_tables.scss
Normal file
@@ -0,0 +1,196 @@
|
||||
/* Table */
|
||||
|
||||
.table {
|
||||
> {
|
||||
thead > tr > th, tbody > tr > th, tfoot > tr > th, thead > tr > td, tbody > tr > td, tfoot > tr > td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
tbody > tr > {
|
||||
td, th {
|
||||
padding: 16px 24px !important;
|
||||
}
|
||||
}
|
||||
tfoot > tr > {
|
||||
td, th {
|
||||
padding: 12px 24px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
thead th {
|
||||
font-size: .95rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
padding: 12px 24px !important;
|
||||
border-bottom-width: 1px;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
td, th {
|
||||
font-size: 1rem;
|
||||
border-top-width: 0px;
|
||||
border-bottom: 1px solid;
|
||||
border-color: #ebedf2 !important;
|
||||
// padding: .75rem 1.5rem !important;
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
.thead-light {
|
||||
th {
|
||||
background-color: #f6f9fc;
|
||||
color: #8898aa;
|
||||
border-color: #ebecec !important;
|
||||
}
|
||||
}
|
||||
.thead-dark {
|
||||
th {
|
||||
background-color: #1a2035;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* table full-width */
|
||||
|
||||
.table-full-width {
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
}
|
||||
|
||||
/* table bordered states */
|
||||
|
||||
.table-bordered-bd-black {
|
||||
td, th {
|
||||
border: 1px solid $black-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-bordered-bd-primary {
|
||||
td, th {
|
||||
border: 1px solid $primary-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-bordered-bd-secondary {
|
||||
td, th {
|
||||
border: 1px solid $secondary-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-bordered-bd-info {
|
||||
td, th {
|
||||
border: 1px solid $info-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-bordered-bd-success {
|
||||
td, th {
|
||||
border: 1px solid $success-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-bordered-bd-warning {
|
||||
td, th {
|
||||
border: 1px solid $warning-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-bordered-bd-danger {
|
||||
td, th {
|
||||
border: 1px solid $danger-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-striped {
|
||||
td, th {
|
||||
border-top: 0 !important;
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* table head background states*/
|
||||
|
||||
.table-head-bg-black {
|
||||
thead {
|
||||
border: 1px solid $black-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-head-bg-primary {
|
||||
thead {
|
||||
border: 1px solid $primary-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-head-bg-secondary {
|
||||
thead {
|
||||
border: 1px solid $secondary-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-head-bg-info {
|
||||
thead {
|
||||
border: 1px solid $info-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-head-bg-success {
|
||||
thead {
|
||||
border: 1px solid $success-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-head-bg-warning {
|
||||
thead {
|
||||
border: 1px solid $warning-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table-head-bg-danger {
|
||||
thead {
|
||||
border: 1px solid $danger-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin table-bg-state($color){
|
||||
background: $color !important;
|
||||
color: $white-color !important;
|
||||
border: 0px !important;
|
||||
}
|
||||
|
||||
.table-head-bg-black thead th, .table-striped-bg-black tbody tr:nth-of-type(odd) {
|
||||
@include table-bg-state($black-color);
|
||||
}
|
||||
|
||||
.table-head-bg-primary thead th, .table-striped-bg-primary tbody tr:nth-of-type(odd) {
|
||||
@include table-bg-state($primary-color);
|
||||
}
|
||||
|
||||
.table-head-bg-secondary thead th, .table-striped-bg-secondary tbody tr:nth-of-type(odd) {
|
||||
@include table-bg-state($secondary-color);
|
||||
}
|
||||
|
||||
.table-head-bg-info thead th, .table-striped-bg-info tbody tr:nth-of-type(odd) {
|
||||
@include table-bg-state($info-color);
|
||||
}
|
||||
|
||||
.table-head-bg-success thead th, .table-striped-bg-success tbody tr:nth-of-type(odd) {
|
||||
@include table-bg-state($success-color);
|
||||
}
|
||||
|
||||
.table-head-bg-warning thead th, .table-striped-bg-warning tbody tr:nth-of-type(odd) {
|
||||
@include table-bg-state($warning-color);
|
||||
}
|
||||
|
||||
.table-head-bg-danger thead th, .table-striped-bg-danger tbody tr:nth-of-type(odd) {
|
||||
@include table-bg-state($danger-color);
|
||||
}
|
||||
|
||||
/* table-responsive */
|
||||
|
||||
.table-responsive {
|
||||
width: 100% !important;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
}
|
||||
48
public/kai/build/scss/core/components/_tasks.scss
Normal file
48
public/kai/build/scss/core/components/_tasks.scss
Normal file
@@ -0,0 +1,48 @@
|
||||
/* Task Tab */
|
||||
.tasks-wrapper{
|
||||
.tasks-scroll{
|
||||
height: calc(100vh - 130px);
|
||||
overflow: auto;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.tasks-content{
|
||||
padding-bottom: 25px;
|
||||
.tasks-list{
|
||||
padding: 0px 10px;
|
||||
list-style: none;
|
||||
li {
|
||||
position: relative;
|
||||
margin-bottom: 15px;
|
||||
.custom-control{
|
||||
position: unset !important;
|
||||
}
|
||||
input[type="checkbox"]:checked~.custom-control-label {
|
||||
text-decoration: line-through;
|
||||
color: #999;
|
||||
}
|
||||
.custom-control.custom-checkbox {
|
||||
margin-right: 50px !important;
|
||||
}
|
||||
.task-action{
|
||||
display: none;
|
||||
position: absolute;
|
||||
font-size: 17px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
a.link{
|
||||
margin-left: 10px;
|
||||
&:hover{
|
||||
text-decoration: none;
|
||||
color: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.task-action{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
14
public/kai/build/scss/core/components/_tile.scss
Normal file
14
public/kai/build/scss/core/components/_tile.scss
Normal file
@@ -0,0 +1,14 @@
|
||||
.tile {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
font-size: 20px;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: 36px;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
&[class*="bg-"] {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
175
public/kai/build/scss/core/components/_timeline.scss
Normal file
175
public/kai/build/scss/core/components/_timeline.scss
Normal file
@@ -0,0 +1,175 @@
|
||||
/* Timeline */
|
||||
.timeline {
|
||||
list-style: none;
|
||||
padding: 20px 0 20px;
|
||||
position: relative;
|
||||
&:before {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
content: " ";
|
||||
width: 3px;
|
||||
background-color: #eeeeee;
|
||||
left: 50%;
|
||||
margin-left: -1.5px;
|
||||
}
|
||||
> li {
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
&:before {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
&:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
&:before {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
&:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
> .timeline-panel {
|
||||
width: 50%;
|
||||
float: left;
|
||||
border: 1px solid #eeeeee;
|
||||
background: $white-color;
|
||||
border-radius: 3px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
-webkit-box-shadow: 0px 1px 20px 1px rgba(69, 65, 78, 0.06);
|
||||
-moz-box-shadow: 0px 1px 20px 1px rgba(69, 65, 78, 0.06);
|
||||
box-shadow: 0px 1px 20px 1px rgba(69, 65, 78, 0.06);
|
||||
}
|
||||
&.timeline-inverted + li:not(.timeline-inverted) {
|
||||
margin-top: -60px;
|
||||
}
|
||||
&:not(.timeline-inverted) {
|
||||
+ li.timeline-inverted {
|
||||
margin-top: -60px;
|
||||
}
|
||||
padding-right: 90px;
|
||||
}
|
||||
&.timeline-inverted {
|
||||
padding-left: 90px;
|
||||
> .timeline-panel {
|
||||
float: right;
|
||||
&:before {
|
||||
border-left-width: 0;
|
||||
border-right-width: 15px;
|
||||
left: -15px;
|
||||
right: auto;
|
||||
}
|
||||
&:after {
|
||||
border-left-width: 0;
|
||||
border-right-width: 14px;
|
||||
left: -14px;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
> {
|
||||
.timeline-panel {
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 26px;
|
||||
right: -15px;
|
||||
display: inline-block;
|
||||
border-top: 15px solid $transparent-bg;
|
||||
border-left: 15px solid #eeeeee;
|
||||
border-right: 0 solid #eeeeee;
|
||||
border-bottom: 15px solid $transparent-bg;
|
||||
content: " ";
|
||||
}
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 27px;
|
||||
right: -14px;
|
||||
display: inline-block;
|
||||
border-top: 14px solid $transparent-bg;
|
||||
border-left: 14px solid $white-color;
|
||||
border-right: 0 solid $white-color;
|
||||
border-bottom: 14px solid $transparent-bg;
|
||||
content: " ";
|
||||
}
|
||||
}
|
||||
.timeline-badge {
|
||||
color: $white-color;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 1.8em;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 50%;
|
||||
margin-left: -25px;
|
||||
background-color: #999999;
|
||||
z-index: 100;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
i {
|
||||
color: $white-color !important;
|
||||
&.fa, &.fab, &.fal, &.far, &.fas {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-badge {
|
||||
&.black {
|
||||
background-color: $black-color !important;
|
||||
}
|
||||
&.primary {
|
||||
background-color: $primary-color !important;
|
||||
}
|
||||
&.secondary {
|
||||
background-color: $secondary-color !important;
|
||||
}
|
||||
&.success {
|
||||
background-color: $success-color !important;
|
||||
}
|
||||
&.warning {
|
||||
background-color: $warning-color !important;
|
||||
}
|
||||
&.danger {
|
||||
background-color: $danger-color !important;
|
||||
}
|
||||
&.info {
|
||||
background-color: $info-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-title {
|
||||
font-size: 17px;
|
||||
margin-top: 0;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.timeline-heading {
|
||||
i {
|
||||
font-size: 22px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.timeline-body > {
|
||||
p, ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
p + p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
155
public/kai/build/scss/core/components/_wizard.scss
Normal file
155
public/kai/build/scss/core/components/_wizard.scss
Normal file
@@ -0,0 +1,155 @@
|
||||
/* Wizard */
|
||||
.wizard-container {
|
||||
margin: 0 auto;
|
||||
border-radius: 0px;
|
||||
background-color: $white-color;
|
||||
margin-bottom: 30px;
|
||||
-webkit-box-shadow: 0px 1px 20px 1px rgba(69, 65, 78, 0.06);
|
||||
-moz-box-shadow: 0px 1px 20px 1px rgba(69, 65, 78, 0.06);
|
||||
box-shadow: 0px 1px 20px 1px rgba(69, 65, 78, 0.06);
|
||||
border: 1px solid #eee;
|
||||
padding: 10px 0;
|
||||
&.wizard-round{
|
||||
border-radius: 5px;
|
||||
}
|
||||
.wizard-header {
|
||||
padding: 25px 15px;
|
||||
background-color: $transparent-bg;
|
||||
.wizard-title {
|
||||
margin: 0;
|
||||
color: $body-text-color;
|
||||
font-size: 25px;
|
||||
font-weight: $font-weight-light;
|
||||
line-height: 1.7;
|
||||
}
|
||||
small {
|
||||
font-size: 15px;
|
||||
padding: 8px 0;
|
||||
display: inline-block;
|
||||
font-weight: $font-weight-light;
|
||||
}
|
||||
b{
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
}
|
||||
.wizard-body{
|
||||
padding: 15px 15px 10px 15px;
|
||||
.info-text{
|
||||
padding: 15px 10px 10px;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
font-size: 18px;
|
||||
font-weight: $font-weight-light;
|
||||
}
|
||||
.tab-content {
|
||||
padding: 25px 15px;
|
||||
}
|
||||
}
|
||||
.wizard-action{
|
||||
padding: 30px;
|
||||
background-color: $transparent-bg;
|
||||
line-height: 30px;
|
||||
font-size: 1rem;
|
||||
.btn {
|
||||
min-width: 140px;
|
||||
}
|
||||
}
|
||||
.wizard-menu{
|
||||
width: 100%;
|
||||
position: relative;
|
||||
li {
|
||||
background: #f5f5f5;
|
||||
a {
|
||||
padding: 11px;
|
||||
text-align: center;
|
||||
border-radius: 0 !important;
|
||||
background: $transparent-bg;
|
||||
border: 0 !important;
|
||||
color: #555 !important;
|
||||
font-weight: $font-weight-normal;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 11px;
|
||||
border-left: 0 !important;
|
||||
border-right: 0 !important;
|
||||
margin-top: 0px !important;
|
||||
margin-bottom: 0px !important;
|
||||
&.active {
|
||||
background: $transparent-bg !important;
|
||||
color: #555 !important;
|
||||
}
|
||||
&:hover{
|
||||
background: $transparent-bg !important;
|
||||
}
|
||||
i{
|
||||
font-size: 22px;
|
||||
display: inline-block;
|
||||
line-height: normal;
|
||||
vertical-align: bottom;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.moving-tab {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
padding: 14px;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
background-color: $black-color;
|
||||
top: -3px;
|
||||
left: 0px;
|
||||
border-radius: 3px;
|
||||
color: $white-color;
|
||||
cursor: pointer;
|
||||
font-weight: $font-weight-normal;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 1px 15px 1px rgba(39,39,39,.1);
|
||||
i {
|
||||
font-size: 22px;
|
||||
display: inline-block;
|
||||
line-height: normal;
|
||||
vertical-align: bottom;
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin wizard-menu-state($color) {
|
||||
li {
|
||||
a{
|
||||
color: $color !important;
|
||||
}
|
||||
}
|
||||
.moving-tab {
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-black{
|
||||
@include wizard-menu-state($black-color);
|
||||
}
|
||||
&.nav-primary{
|
||||
@include wizard-menu-state($primary-color);
|
||||
}
|
||||
&.nav-secondary{
|
||||
@include wizard-menu-state($secondary-color);
|
||||
}
|
||||
&.nav-info{
|
||||
@include wizard-menu-state($info-color);
|
||||
}
|
||||
&.nav-success{
|
||||
@include wizard-menu-state($success-color);
|
||||
}
|
||||
&.nav-danger{
|
||||
@include wizard-menu-state($danger-color);
|
||||
}
|
||||
&.nav-warning{
|
||||
@include wizard-menu-state($warning-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
3549
public/kai/build/scss/core/plugins/_animate.scss
Normal file
3549
public/kai/build/scss/core/plugins/_animate.scss
Normal file
File diff suppressed because it is too large
Load Diff
226
public/kai/build/scss/core/plugins/_datatables.scss
Normal file
226
public/kai/build/scss/core/plugins/_datatables.scss
Normal file
@@ -0,0 +1,226 @@
|
||||
/* Datatable */
|
||||
table.dataTable {
|
||||
clear: both;
|
||||
margin-top: 15px !important;
|
||||
margin-bottom: 15px !important;
|
||||
max-width: none !important;
|
||||
border-collapse: separate !important;
|
||||
td, th {
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
td.dataTables_empty, th.dataTables_empty {
|
||||
text-align: center;
|
||||
}
|
||||
&.nowrap {
|
||||
th, td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div {
|
||||
&.dataTables_length {
|
||||
label {
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
select {
|
||||
width: 75px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
&.dataTables_filter {
|
||||
text-align: right;
|
||||
label {
|
||||
font-weight: normal;
|
||||
white-space: nowrap;
|
||||
text-align: left;
|
||||
}
|
||||
input {
|
||||
margin-left: 0.5em;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
&.dataTables_info {
|
||||
padding-top: 0.85em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
&.dataTables_paginate {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
ul.pagination {
|
||||
margin: 2px 0;
|
||||
white-space: nowrap;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
&.dataTables_processing {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 200px;
|
||||
margin-left: -100px;
|
||||
margin-top: -26px;
|
||||
text-align: center;
|
||||
padding: 1em 0;
|
||||
}
|
||||
}
|
||||
|
||||
table.dataTable thead {
|
||||
> tr > {
|
||||
th, td {
|
||||
&.sorting_asc, &.sorting_desc, &.sorting {
|
||||
padding-right: 30px;
|
||||
}
|
||||
}
|
||||
th:active, td:active {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
.sorting, .sorting_asc, .sorting_desc, .sorting_asc_disabled, .sorting_desc_disabled {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
%sorting-style {
|
||||
position: absolute;
|
||||
bottom: 0.9em;
|
||||
display: block;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.sorting {
|
||||
&:before, &:after {
|
||||
@extend %sorting-style;
|
||||
}
|
||||
}
|
||||
.sorting_asc {
|
||||
&:before, &:after {
|
||||
@extend %sorting-style;
|
||||
}
|
||||
}
|
||||
.sorting_desc {
|
||||
&:before, &:after {
|
||||
@extend %sorting-style;
|
||||
}
|
||||
}
|
||||
.sorting_asc_disabled {
|
||||
&:before, &:after {
|
||||
@extend %sorting-style;
|
||||
}
|
||||
}
|
||||
.sorting_desc_disabled {
|
||||
&:before, &:after {
|
||||
@extend %sorting-style;
|
||||
}
|
||||
}
|
||||
.sorting:before, .sorting_asc:before, .sorting_desc:before, .sorting_asc_disabled:before, .sorting_desc_disabled:before {
|
||||
right: 1em;
|
||||
content: "\2191";
|
||||
font-size: 15px;
|
||||
}
|
||||
.sorting:after, .sorting_asc:after, .sorting_desc:after, .sorting_asc_disabled:after, .sorting_desc_disabled:after {
|
||||
right: 0.5em;
|
||||
content: "\2193";
|
||||
font-size: 15px;
|
||||
}
|
||||
.sorting_asc:before, .sorting_desc:after {
|
||||
opacity: 1;
|
||||
}
|
||||
.sorting_asc_disabled:before, .sorting_desc_disabled:after {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
&.dataTables_scrollHead table.dataTable {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
&.dataTables_scrollBody table {
|
||||
border-top: none;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
thead {
|
||||
.sorting:after, .sorting_asc:after, .sorting_desc:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
tbody tr:first-child {
|
||||
th, td {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.dataTables_scrollFoot > .dataTables_scrollFootInner {
|
||||
box-sizing: content-box;
|
||||
> table {
|
||||
margin-top: 0 !important;
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
div.dataTables_wrapper div {
|
||||
&.dataTables_length, &.dataTables_filter, &.dataTables_info, &.dataTables_paginate {
|
||||
text-align: center;
|
||||
margin-top: 11px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
div.dataTables_paginate ul.pagination{
|
||||
flex-wrap: wrap !important;
|
||||
justify-content: center !important;
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
a {
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
&.dataTable.table-sm {
|
||||
> thead > tr > th {
|
||||
padding-right: 20px;
|
||||
}
|
||||
.sorting:before, .sorting_asc:before, .sorting_desc:before {
|
||||
top: 5px;
|
||||
right: 0.85em;
|
||||
}
|
||||
.sorting:after, .sorting_asc:after, .sorting_desc:after {
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
&.table-bordered.dataTable {
|
||||
th, td {
|
||||
border-left-width: 0;
|
||||
}
|
||||
th:last-child, td:last-child {
|
||||
border-right-width: 0;
|
||||
}
|
||||
tbody {
|
||||
th, td {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div {
|
||||
&.dataTables_scrollHead table.table-bordered {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
&.table-responsive > div.dataTables_wrapper > div.row {
|
||||
margin: 0;
|
||||
> div[class^="col-"] {
|
||||
&:first-child, &:last-child {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
801
public/kai/build/scss/core/plugins/_jqueryscrollbar.scss
Normal file
801
public/kai/build/scss/core/plugins/_jqueryscrollbar.scss
Normal file
@@ -0,0 +1,801 @@
|
||||
/* jQuery Scrollbar */
|
||||
.scroll-wrapper {
|
||||
overflow: hidden !important;
|
||||
padding: 0 !important;
|
||||
position: relative;
|
||||
> .scroll-content {
|
||||
border: none !important;
|
||||
box-sizing: content-box !important;
|
||||
height: auto;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
max-height: none;
|
||||
max-width: none !important;
|
||||
overflow: scroll !important;
|
||||
padding: 0;
|
||||
position: relative !important;
|
||||
top: 0;
|
||||
width: auto !important;
|
||||
&::-webkit-scrollbar {
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-element {
|
||||
display: none;
|
||||
box-sizing: content-box;
|
||||
div {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
&.scroll-x.scroll-scrollx_visible, &.scroll-y.scroll-scrolly_visible {
|
||||
display: block;
|
||||
}
|
||||
.scroll-arrow, .scroll-bar {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-textarea {
|
||||
border: 1px solid #ccc;
|
||||
border-top-color: #999;
|
||||
> .scroll-content {
|
||||
overflow: hidden !important;
|
||||
> textarea {
|
||||
border: none !important;
|
||||
box-sizing: border-box;
|
||||
height: 100% !important;
|
||||
margin: 0;
|
||||
max-height: none !important;
|
||||
max-width: none !important;
|
||||
overflow: scroll !important;
|
||||
outline: 0;
|
||||
padding: 2px;
|
||||
position: relative !important;
|
||||
top: 0;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scrollbar-inner > .scroll-element .scroll-element_outer, .scrollbar-outer > .scroll-element .scroll-element_outer {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.scrollbar-inner > .scroll-element {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
div {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
&.scroll-x {
|
||||
bottom: 2px;
|
||||
height: 7px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
&.scroll-scrolly_visible {
|
||||
.scroll-element_size, .scroll-element_track {
|
||||
left: -12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.scroll-y {
|
||||
height: 100%;
|
||||
right: 2px;
|
||||
top: 0;
|
||||
width: 7px;
|
||||
&.scroll-scrollx_visible {
|
||||
.scroll-element_size, .scroll-element_track {
|
||||
top: -12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.scroll-bar, .scroll-element_outer, .scroll-element_track {
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.scroll-bar {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
|
||||
filter: alpha(opacity = 40);
|
||||
opacity: .4;
|
||||
}
|
||||
.scroll-element_track {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
|
||||
filter: alpha(opacity = 40);
|
||||
opacity: .4;
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
.scroll-bar {
|
||||
background-color: #c2c2c2;
|
||||
}
|
||||
&.scroll-draggable .scroll-bar, &:hover .scroll-bar {
|
||||
background-color: #919191;
|
||||
}
|
||||
}
|
||||
|
||||
.scrollbar-outer > {
|
||||
.scroll-element {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
div {
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
background-color: $white-color;
|
||||
&.scroll-x {
|
||||
bottom: 0;
|
||||
height: 12px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
&.scroll-y {
|
||||
height: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 12px;
|
||||
}
|
||||
&.scroll-x .scroll-element_outer {
|
||||
height: 7px;
|
||||
top: 2px;
|
||||
}
|
||||
&.scroll-y .scroll-element_outer {
|
||||
left: 2px;
|
||||
width: 7px;
|
||||
}
|
||||
.scroll-element_track {
|
||||
background-color: #eee;
|
||||
}
|
||||
.scroll-bar, .scroll-element_outer, .scroll-element_track {
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.scroll-bar {
|
||||
background-color: #d9d9d9;
|
||||
&:hover {
|
||||
background-color: #c2c2c2;
|
||||
}
|
||||
}
|
||||
&.scroll-draggable .scroll-bar {
|
||||
background-color: #919191;
|
||||
}
|
||||
}
|
||||
.scroll-content.scroll-scrolly_visible {
|
||||
left: -12px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
.scroll-element.scroll-x.scroll-scrolly_visible {
|
||||
.scroll-element_size, .scroll-element_track {
|
||||
left: -14px;
|
||||
}
|
||||
}
|
||||
.scroll-content.scroll-scrollx_visible {
|
||||
top: -12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.scroll-element {
|
||||
&.scroll-y.scroll-scrollx_visible {
|
||||
.scroll-element_size, .scroll-element_track {
|
||||
top: -14px;
|
||||
}
|
||||
}
|
||||
&.scroll-x .scroll-bar {
|
||||
min-width: 10px;
|
||||
}
|
||||
&.scroll-y .scroll-bar {
|
||||
min-height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scrollbar-macosx {
|
||||
> .scroll-element {
|
||||
background: 0 0;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
div {
|
||||
background: 0 0;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.scroll-element_track {
|
||||
display: none;
|
||||
}
|
||||
.scroll-bar {
|
||||
background-color: #6C6E71;
|
||||
display: block;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
|
||||
filter: alpha(opacity = 0);
|
||||
opacity: 0;
|
||||
-webkit-border-radius: 7px;
|
||||
-moz-border-radius: 7px;
|
||||
border-radius: 7px;
|
||||
-webkit-transition: opacity .2s linear;
|
||||
-moz-transition: opacity .2s linear;
|
||||
-o-transition: opacity .2s linear;
|
||||
-ms-transition: opacity .2s linear;
|
||||
transition: opacity .2s linear;
|
||||
}
|
||||
}
|
||||
&:hover > .scroll-element .scroll-bar {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
|
||||
filter: alpha(opacity = 70);
|
||||
opacity: .7;
|
||||
}
|
||||
> .scroll-element {
|
||||
&.scroll-draggable .scroll-bar {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
|
||||
filter: alpha(opacity = 70);
|
||||
opacity: .7;
|
||||
}
|
||||
&.scroll-x {
|
||||
bottom: 0;
|
||||
height: 0;
|
||||
left: 0;
|
||||
min-width: 100%;
|
||||
overflow: visible;
|
||||
width: 100%;
|
||||
}
|
||||
&.scroll-y {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 0;
|
||||
}
|
||||
&.scroll-x .scroll-bar {
|
||||
height: 7px;
|
||||
min-width: 10px;
|
||||
top: -9px;
|
||||
}
|
||||
&.scroll-y .scroll-bar {
|
||||
left: -9px;
|
||||
min-height: 10px;
|
||||
width: 7px;
|
||||
}
|
||||
&.scroll-x {
|
||||
.scroll-element_outer {
|
||||
left: 2px;
|
||||
}
|
||||
.scroll-element_size {
|
||||
left: -4px;
|
||||
}
|
||||
}
|
||||
&.scroll-y {
|
||||
.scroll-element_outer {
|
||||
top: 2px;
|
||||
}
|
||||
.scroll-element_size {
|
||||
top: -4px;
|
||||
}
|
||||
}
|
||||
&.scroll-x.scroll-scrolly_visible .scroll-element_size {
|
||||
left: -11px;
|
||||
}
|
||||
&.scroll-y.scroll-scrollx_visible .scroll-element_size {
|
||||
top: -11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scrollbar-light > {
|
||||
.scroll-element {
|
||||
border: none;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
div {
|
||||
border: none;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
background-color: $white-color;
|
||||
.scroll-element_outer {
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.scroll-element_size {
|
||||
background: -moz-linear-gradient(left, #dbdbdb 0, #e8e8e8 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, color-stop(0, #dbdbdb), color-stop(100%, #e8e8e8));
|
||||
background: -webkit-linear-gradient(left, #dbdbdb 0, #e8e8e8 100%);
|
||||
background: -o-linear-gradient(left, #dbdbdb 0, #e8e8e8 100%);
|
||||
background: -ms-linear-gradient(left, #dbdbdb 0, #e8e8e8 100%);
|
||||
background: linear-gradient(to right, #dbdbdb 0, #e8e8e8 100%);
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
&.scroll-x {
|
||||
bottom: 0;
|
||||
height: 17px;
|
||||
left: 0;
|
||||
min-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
&.scroll-y {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 17px;
|
||||
}
|
||||
.scroll-bar {
|
||||
background: -moz-linear-gradient(left, #fefefe 0, #f5f5f5 100%);
|
||||
background: -webkit-gradient(linear, left top, right top, color-stop(0, #fefefe), color-stop(100%, #f5f5f5));
|
||||
background: -webkit-linear-gradient(left, #fefefe 0, #f5f5f5 100%);
|
||||
background: -o-linear-gradient(left, #fefefe 0, #f5f5f5 100%);
|
||||
background: -ms-linear-gradient(left, #fefefe 0, #f5f5f5 100%);
|
||||
background: linear-gradient(to right, #fefefe 0, #f5f5f5 100%);
|
||||
border: 1px solid #dbdbdb;
|
||||
-webkit-border-radius: 10px;
|
||||
-moz-border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
.scroll-content {
|
||||
&.scroll-scrolly_visible {
|
||||
left: -17px;
|
||||
margin-left: 17px;
|
||||
}
|
||||
&.scroll-scrollx_visible {
|
||||
top: -17px;
|
||||
margin-top: 17px;
|
||||
}
|
||||
}
|
||||
.scroll-element {
|
||||
&.scroll-x .scroll-bar {
|
||||
height: 10px;
|
||||
min-width: 10px;
|
||||
top: 0;
|
||||
}
|
||||
&.scroll-y .scroll-bar {
|
||||
left: 0;
|
||||
min-height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
&.scroll-x {
|
||||
.scroll-element_outer {
|
||||
height: 12px;
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
}
|
||||
.scroll-element_size {
|
||||
left: -4px;
|
||||
}
|
||||
}
|
||||
&.scroll-y .scroll-element_outer {
|
||||
left: 2px;
|
||||
top: 2px;
|
||||
width: 12px;
|
||||
}
|
||||
&.scroll-x.scroll-scrolly_visible {
|
||||
.scroll-element_size, .scroll-element_track {
|
||||
left: -19px;
|
||||
}
|
||||
}
|
||||
&.scroll-y {
|
||||
.scroll-element_size {
|
||||
top: -4px;
|
||||
}
|
||||
&.scroll-scrollx_visible {
|
||||
.scroll-element_size, .scroll-element_track {
|
||||
top: -19px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scrollbar-rail > {
|
||||
.scroll-element {
|
||||
border: none;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
div {
|
||||
border: none;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
background-color: $white-color;
|
||||
.scroll-element_size {
|
||||
background-color: #999;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.scroll-element_outer:hover .scroll-element_size {
|
||||
background-color: #666;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
&.scroll-x {
|
||||
bottom: 0;
|
||||
height: 12px;
|
||||
left: 0;
|
||||
min-width: 100%;
|
||||
padding: 3px 0 2px;
|
||||
width: 100%;
|
||||
}
|
||||
&.scroll-y {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
padding: 0 2px 0 3px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 12px;
|
||||
}
|
||||
.scroll-bar {
|
||||
background-color: #d0b9a0;
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.scroll-element_outer:hover .scroll-bar {
|
||||
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
}
|
||||
.scroll-content {
|
||||
&.scroll-scrolly_visible {
|
||||
left: -17px;
|
||||
margin-left: 17px;
|
||||
}
|
||||
&.scroll-scrollx_visible {
|
||||
margin-top: 17px;
|
||||
top: -17px;
|
||||
}
|
||||
}
|
||||
.scroll-element {
|
||||
&.scroll-x .scroll-bar {
|
||||
height: 10px;
|
||||
min-width: 10px;
|
||||
top: 1px;
|
||||
}
|
||||
&.scroll-y .scroll-bar {
|
||||
left: 1px;
|
||||
min-height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
&.scroll-x {
|
||||
.scroll-element_outer {
|
||||
height: 15px;
|
||||
left: 5px;
|
||||
}
|
||||
.scroll-element_size {
|
||||
height: 2px;
|
||||
left: -10px;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
&.scroll-y {
|
||||
.scroll-element_outer {
|
||||
top: 5px;
|
||||
width: 15px;
|
||||
}
|
||||
.scroll-element_size {
|
||||
left: 5px;
|
||||
top: -10px;
|
||||
width: 2px;
|
||||
}
|
||||
}
|
||||
&.scroll-x.scroll-scrolly_visible {
|
||||
.scroll-element_size, .scroll-element_track {
|
||||
left: -25px;
|
||||
}
|
||||
}
|
||||
&.scroll-y.scroll-scrollx_visible {
|
||||
.scroll-element_size, .scroll-element_track {
|
||||
top: -25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scrollbar-dynamic > .scroll-element {
|
||||
background: 0 0;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
div {
|
||||
background: 0 0;
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
&.scroll-x {
|
||||
bottom: 2px;
|
||||
height: 7px;
|
||||
left: 0;
|
||||
min-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
&.scroll-y {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
right: 2px;
|
||||
top: 0;
|
||||
width: 7px;
|
||||
}
|
||||
.scroll-element_outer {
|
||||
opacity: .3;
|
||||
-webkit-border-radius: 12px;
|
||||
-moz-border-radius: 12px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.scroll-element_size {
|
||||
background-color: #ccc;
|
||||
opacity: 0;
|
||||
-webkit-border-radius: 12px;
|
||||
-moz-border-radius: 12px;
|
||||
border-radius: 12px;
|
||||
-webkit-transition: opacity .2s;
|
||||
-moz-transition: opacity .2s;
|
||||
-o-transition: opacity .2s;
|
||||
-ms-transition: opacity .2s;
|
||||
transition: opacity .2s;
|
||||
}
|
||||
.scroll-bar {
|
||||
background-color: #6c6e71;
|
||||
-webkit-border-radius: 7px;
|
||||
-moz-border-radius: 7px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
&.scroll-x .scroll-bar {
|
||||
bottom: 0;
|
||||
height: 7px;
|
||||
min-width: 24px;
|
||||
top: auto;
|
||||
}
|
||||
&.scroll-y .scroll-bar {
|
||||
left: auto;
|
||||
min-height: 24px;
|
||||
right: 0;
|
||||
width: 7px;
|
||||
}
|
||||
&.scroll-x .scroll-element_outer {
|
||||
bottom: 0;
|
||||
top: auto;
|
||||
left: 2px;
|
||||
-webkit-transition: height .2s;
|
||||
-moz-transition: height .2s;
|
||||
-o-transition: height .2s;
|
||||
-ms-transition: height .2s;
|
||||
transition: height .2s;
|
||||
}
|
||||
&.scroll-y .scroll-element_outer {
|
||||
left: auto;
|
||||
right: 0;
|
||||
top: 2px;
|
||||
-webkit-transition: width .2s;
|
||||
-moz-transition: width .2s;
|
||||
-o-transition: width .2s;
|
||||
-ms-transition: width .2s;
|
||||
transition: width .2s;
|
||||
}
|
||||
&.scroll-x .scroll-element_size {
|
||||
left: -4px;
|
||||
}
|
||||
&.scroll-y .scroll-element_size {
|
||||
top: -4px;
|
||||
}
|
||||
&.scroll-x.scroll-scrolly_visible .scroll-element_size {
|
||||
left: -11px;
|
||||
}
|
||||
&.scroll-y.scroll-scrollx_visible .scroll-element_size {
|
||||
top: -11px;
|
||||
}
|
||||
&.scroll-draggable .scroll-element_outer, &:hover .scroll-element_outer {
|
||||
overflow: hidden;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
|
||||
filter: alpha(opacity = 70);
|
||||
opacity: .7;
|
||||
}
|
||||
&.scroll-draggable .scroll-element_outer .scroll-element_size, &:hover .scroll-element_outer .scroll-element_size {
|
||||
opacity: 1;
|
||||
}
|
||||
&.scroll-draggable .scroll-element_outer .scroll-bar, &:hover .scroll-element_outer .scroll-bar {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
-webkit-border-radius: 12px;
|
||||
-moz-border-radius: 12px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
&.scroll-x {
|
||||
&.scroll-draggable .scroll-element_outer, &:hover .scroll-element_outer {
|
||||
height: 20px;
|
||||
min-height: 7px;
|
||||
}
|
||||
}
|
||||
&.scroll-y {
|
||||
&.scroll-draggable .scroll-element_outer, &:hover .scroll-element_outer {
|
||||
min-width: 7px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.scrollbar-chrome > {
|
||||
.scroll-element {
|
||||
border: none;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
div {
|
||||
border: none;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
background-color: $white-color;
|
||||
.scroll-element_track {
|
||||
background: $grey-color;
|
||||
border: 1px solid #dbdbdb;
|
||||
}
|
||||
&.scroll-x {
|
||||
bottom: 0;
|
||||
height: 16px;
|
||||
left: 0;
|
||||
min-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
&.scroll-y {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 16px;
|
||||
}
|
||||
.scroll-bar {
|
||||
background-color: #d9d9d9;
|
||||
border: 1px solid #bdbdbd;
|
||||
cursor: default;
|
||||
-webkit-border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
&:hover {
|
||||
background-color: #c2c2c2;
|
||||
border-color: #a9a9a9;
|
||||
}
|
||||
}
|
||||
&.scroll-draggable .scroll-bar {
|
||||
background-color: #919191;
|
||||
border-color: #7e7e7e;
|
||||
}
|
||||
}
|
||||
.scroll-content {
|
||||
&.scroll-scrolly_visible {
|
||||
left: -16px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
&.scroll-scrollx_visible {
|
||||
top: -16px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
.scroll-element {
|
||||
&.scroll-x .scroll-bar {
|
||||
height: 5px;
|
||||
min-width: 10px;
|
||||
top: 3px;
|
||||
}
|
||||
&.scroll-y .scroll-bar {
|
||||
left: 3px;
|
||||
min-height: 10px;
|
||||
width: 5px;
|
||||
}
|
||||
&.scroll-x {
|
||||
.scroll-element_outer {
|
||||
border-left: 1px solid #dbdbdb;
|
||||
}
|
||||
.scroll-element_track {
|
||||
height: 14px;
|
||||
left: -3px;
|
||||
}
|
||||
.scroll-element_size {
|
||||
height: 14px;
|
||||
left: -4px;
|
||||
}
|
||||
&.scroll-scrolly_visible {
|
||||
.scroll-element_size, .scroll-element_track {
|
||||
left: -19px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.scroll-y {
|
||||
.scroll-element_outer {
|
||||
border-top: 1px solid #dbdbdb;
|
||||
}
|
||||
.scroll-element_track {
|
||||
top: -3px;
|
||||
width: 14px;
|
||||
}
|
||||
.scroll-element_size {
|
||||
top: -4px;
|
||||
width: 14px;
|
||||
}
|
||||
&.scroll-scrollx_visible {
|
||||
.scroll-element_size, .scroll-element_track {
|
||||
top: -19px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
270
public/kai/build/scss/core/plugins/_jqueryui.scss
Normal file
270
public/kai/build/scss/core/plugins/_jqueryui.scss
Normal file
@@ -0,0 +1,270 @@
|
||||
/* jQuery Ui */
|
||||
.ui-draggable-handle {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.ui-helper-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui-helper-hidden-accessible {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.ui-helper-reset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
line-height: 1.3;
|
||||
text-decoration: none;
|
||||
font-size: 100%;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.ui-helper-clearfix {
|
||||
&:after, &:before {
|
||||
content: "";
|
||||
display: table;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-helper-zfix {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
filter: Alpha(Opacity = 0);
|
||||
}
|
||||
|
||||
.ui-front {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.ui-state-disabled {
|
||||
cursor: default !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ui-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-top: -.25em;
|
||||
position: relative;
|
||||
text-indent: -99999px;
|
||||
overflow: hidden;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.ui-widget-icon-block {
|
||||
left: 50%;
|
||||
margin-left: -8px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ui-widget-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ui-resizable {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ui-resizable-handle {
|
||||
position: absolute;
|
||||
font-size: .1px;
|
||||
display: block;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.ui-resizable-autohide .ui-resizable-handle, .ui-resizable-disabled .ui-resizable-handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ui-resizable-n {
|
||||
cursor: n-resize;
|
||||
height: 7px;
|
||||
width: 100%;
|
||||
top: -5px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ui-resizable-s {
|
||||
cursor: s-resize;
|
||||
height: 7px;
|
||||
width: 100%;
|
||||
bottom: -5px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.ui-resizable-e {
|
||||
cursor: e-resize;
|
||||
width: 7px;
|
||||
right: -5px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ui-resizable-w {
|
||||
cursor: w-resize;
|
||||
width: 7px;
|
||||
left: -5px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ui-resizable-se {
|
||||
cursor: se-resize;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
right: 1px;
|
||||
bottom: 1px;
|
||||
}
|
||||
|
||||
.ui-resizable-sw {
|
||||
cursor: sw-resize;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
left: -5px;
|
||||
bottom: -5px;
|
||||
}
|
||||
|
||||
.ui-resizable-nw {
|
||||
cursor: nw-resize;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
left: -5px;
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
.ui-resizable-ne {
|
||||
cursor: ne-resize;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
right: -5px;
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
.ui-selectable {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.ui-selectable-helper {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
border: 1px dotted #000;
|
||||
}
|
||||
|
||||
.ui-sortable-handle {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.ui-slider {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
background: #ddd;
|
||||
.ui-slider-handle {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
cursor: default;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
.ui-slider-range {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
font-size: .7em;
|
||||
display: block;
|
||||
border: 0;
|
||||
background-position: 0 0;
|
||||
}
|
||||
&.ui-state-disabled {
|
||||
.ui-slider-handle, .ui-slider-range {
|
||||
filter: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ui-slider-horizontal {
|
||||
height: .4em;
|
||||
.ui-slider-handle {
|
||||
top: -.4em;
|
||||
margin-left: -.6em;
|
||||
}
|
||||
.ui-slider-range {
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.ui-slider-range-min {
|
||||
left: 0;
|
||||
}
|
||||
.ui-slider-range-max {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-slider-vertical {
|
||||
width: .8em;
|
||||
height: 100px;
|
||||
.ui-slider-handle {
|
||||
left: -.3em;
|
||||
margin-left: 0;
|
||||
margin-bottom: -.6em;
|
||||
}
|
||||
.ui-slider-range {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.ui-slider-range-min {
|
||||
bottom: 0;
|
||||
}
|
||||
.ui-slider-range-max {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ui-slider-handle {
|
||||
background: $white-color;
|
||||
background: -moz-linear-gradient(top, $white-color 0, #f7f7f7 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, $white-color), color-stop(100%, #f7f7f7));
|
||||
background: -webkit-linear-gradient(top, $white-color 0, #f7f7f7 100%);
|
||||
background: -o-linear-gradient(top, $white-color 0, #f7f7f7 100%);
|
||||
background: -ms-linear-gradient(top, $white-color 0, #f7f7f7 100%);
|
||||
background: linear-gradient(to bottom, $white-color 0, #f7f7f7 100%);
|
||||
border-radius: 50px;
|
||||
box-shadow: 0 1px 4px 0 #9191ab !important;
|
||||
&:focus {
|
||||
background: $white-color;
|
||||
background: -moz-linear-gradient(top, $white-color 0, #f7f7f7 100%);
|
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, $white-color), color-stop(100%, #f7f7f7));
|
||||
background: -webkit-linear-gradient(top, $white-color 0, #f7f7f7 100%);
|
||||
background: -o-linear-gradient(top, $white-color 0, #f7f7f7 100%);
|
||||
background: -ms-linear-gradient(top, $white-color 0, #f7f7f7 100%);
|
||||
background: linear-gradient(to bottom, $white-color 0, #f7f7f7 100%);
|
||||
border-radius: 50px;
|
||||
box-shadow: 0 1px 4px 0 #9191ab !important;
|
||||
}
|
||||
}
|
||||
1
public/kai/build/scss/core/plugins/_jsvectormaps.scss
Normal file
1
public/kai/build/scss/core/plugins/_jsvectormaps.scss
Normal file
@@ -0,0 +1 @@
|
||||
svg{-ms-touch-action:none;touch-action:none}image,text,.jvm-zoomin,.jvm-zoomout{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.jvm-container{-ms-touch-action:none;touch-action:none;position:relative;overflow:hidden;height:100%;width:100%}.jvm-tooltip{border-radius:3px;background-color:#5c5cff;font-family:sans-serif,Verdana;font-size:smaller;box-shadow:1px 2px 12px rgba(0,0,0,0.2);padding:3px 5px;white-space:nowrap;position:absolute;display:none;color:#FFF}.jvm-tooltip.active{display:block}.jvm-zoom-btn{border-radius:3px;background-color:#292929;padding:3px;box-sizing:border-box;position:absolute;line-height:10px;cursor:pointer;color:#FFF;height:15px;width:15px;left:10px}.jvm-zoom-btn.jvm-zoomout{top:30px}.jvm-zoom-btn.jvm-zoomin{top:10px}.jvm-series-container{right:15px;position:absolute}.jvm-series-container.jvm-series-h{bottom:15px}.jvm-series-container.jvm-series-v{top:15px}.jvm-series-container .jvm-legend{background-color:#fff;border:1px solid #e5e7eb;margin-left:.75rem;border-radius:.25rem;border-color:#e5e7eb;padding:.6rem;box-shadow:0 1px 2px 0 rgba(0,0,0,0.05);float:left}.jvm-series-container .jvm-legend .jvm-legend-title{line-height:1;border-bottom:1px solid #e5e7eb;padding-bottom:.5rem;margin-bottom:.575rem;text-align:left}.jvm-series-container .jvm-legend .jvm-legend-inner{overflow:hidden}.jvm-series-container .jvm-legend .jvm-legend-inner .jvm-legend-tick{overflow:hidden;min-width:40px}.jvm-series-container .jvm-legend .jvm-legend-inner .jvm-legend-tick:not(:first-child){margin-top:.575rem}.jvm-series-container .jvm-legend .jvm-legend-inner .jvm-legend-tick .jvm-legend-tick-sample{border-radius:4px;margin-right:.65rem;height:16px;width:16px;float:left}.jvm-series-container .jvm-legend .jvm-legend-inner .jvm-legend-tick .jvm-legend-tick-text{font-size:12px;text-align:center;float:left}.jvm-line[animation="true"]{-webkit-animation:jvm-line-animation 10s linear forwards infinite;animation:jvm-line-animation 10s linear forwards infinite}@-webkit-keyframes jvm-line-animation{from{stroke-dashoffset:250}}@keyframes jvm-line-animation{from{stroke-dashoffset:250}}
|
||||
6
public/kai/build/scss/core/plugins/_sweetalert.scss
Normal file
6
public/kai/build/scss/core/plugins/_sweetalert.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
/* Sweet Alert */
|
||||
|
||||
.swal-footer {
|
||||
text-align: center !important;
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
124
public/kai/build/scss/core/plugins/_toggle.scss
Normal file
124
public/kai/build/scss/core/plugins/_toggle.scss
Normal file
@@ -0,0 +1,124 @@
|
||||
/* Toggle */
|
||||
.checkbox label .toggle, .checkbox-inline .toggle {
|
||||
margin-left: -20px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: .6rem .5rem;
|
||||
}
|
||||
|
||||
.toggle-group, .toggle-off, .toggle-on {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.toggle input[type=checkbox] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-group {
|
||||
width: 200%;
|
||||
left: 0;
|
||||
transition: left .35s;
|
||||
-webkit-transition: left .35s;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.toggle.off .toggle-group {
|
||||
left: -100%;
|
||||
}
|
||||
|
||||
.toggle-on {
|
||||
left: 0;
|
||||
right: 50%;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
padding-left: 12px !important;
|
||||
padding-top: 6px !important;
|
||||
padding-bottom: 6px !important;
|
||||
font-size: 11px !important;
|
||||
}
|
||||
|
||||
.toggle-off {
|
||||
left: 50%;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
padding-top: 6px !important;
|
||||
padding-bottom: 6px !important;
|
||||
font-size: 11px !important;
|
||||
color: $white-color !important;
|
||||
}
|
||||
|
||||
.toggle-handle {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
border-width: 0 1px;
|
||||
}
|
||||
|
||||
.toggle.btn {
|
||||
min-width: 54px !important;
|
||||
height: 30px !important;
|
||||
}
|
||||
|
||||
.toggle-on.btn {
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
.toggle-off.btn {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.toggle.btn-lg {
|
||||
min-width: 79px;
|
||||
min-height: 45px;
|
||||
}
|
||||
|
||||
.toggle-on.btn-lg {
|
||||
padding-right: 31px;
|
||||
}
|
||||
|
||||
.toggle-off.btn-lg {
|
||||
padding-left: 31px;
|
||||
}
|
||||
|
||||
.toggle-handle.btn-lg {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.toggle.btn-sm {
|
||||
min-width: 50px;
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
.toggle-on.btn-sm {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.toggle-off.btn-sm {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.toggle.btn-xs {
|
||||
min-width: 35px;
|
||||
min-height: 22px;
|
||||
}
|
||||
|
||||
.toggle-on.btn-xs {
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
.toggle-off.btn-xs {
|
||||
padding-left: 12px;
|
||||
}
|
||||
Reference in New Issue
Block a user