first commit
This commit is contained in:
7
resources/sass/components/_auth.scss
Executable file
7
resources/sass/components/_auth.scss
Executable file
@ -0,0 +1,7 @@
|
||||
.auth-page {
|
||||
.auth-side-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
7
resources/sass/components/_badges.scss
Executable file
7
resources/sass/components/_badges.scss
Executable file
@ -0,0 +1,7 @@
|
||||
// Badges
|
||||
|
||||
a.badge { // for link badges
|
||||
&:hover {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
31
resources/sass/components/_bootstrap-alert.scss
Executable file
31
resources/sass/components/_bootstrap-alert.scss
Executable file
@ -0,0 +1,31 @@
|
||||
// Bootstrap Alert
|
||||
|
||||
@each $state, $value in $theme-colors {
|
||||
// Basic alerts
|
||||
.alert-#{$state} {
|
||||
background-color: rgba($value, .1);
|
||||
color: darken($value, 5%);
|
||||
border-color: rgba($value, .2);
|
||||
.alert-link {
|
||||
color: darken($value, 5%);
|
||||
}
|
||||
svg {
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
i {
|
||||
font-size: 19px;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Fill alerts
|
||||
.alert-fill-#{$state} {
|
||||
@include alert-variant($value, $value, $white);
|
||||
&.alert-fill-light {
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
29
resources/sass/components/_breadcrumbs.scss
Executable file
29
resources/sass/components/_breadcrumbs.scss
Executable file
@ -0,0 +1,29 @@
|
||||
.breadcrumb {
|
||||
&.breadcrumb-line {
|
||||
.breadcrumb-item {
|
||||
+ .breadcrumb-item {
|
||||
&::before {
|
||||
content: "-" !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.breadcrumb-dot {
|
||||
.breadcrumb-item {
|
||||
+ .breadcrumb-item {
|
||||
&::before {
|
||||
content: "•" !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.breadcrumb-arrow {
|
||||
.breadcrumb-item {
|
||||
+ .breadcrumb-item {
|
||||
&::before {
|
||||
content: ">" !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
101
resources/sass/components/_buttons.scss
Executable file
101
resources/sass/components/_buttons.scss
Executable file
@ -0,0 +1,101 @@
|
||||
/* Buttons */
|
||||
|
||||
.btn {
|
||||
i {
|
||||
font-size: 1rem;
|
||||
}
|
||||
&.btn-rounded {
|
||||
@include border-radius(50px);
|
||||
}
|
||||
&.btn-xs {
|
||||
padding: $btn-padding-y-xs $btn-padding-x-xs;
|
||||
font-size: $btn-font-size-xs;
|
||||
}
|
||||
|
||||
// Buttons with only icons
|
||||
&.btn-icon {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
svg {
|
||||
height: 18px;
|
||||
}
|
||||
&.btn-xs {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
svg {
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
&.btn-sm {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
svg {
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
&.btn-lg {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
svg {
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons with icon and text
|
||||
&.btn-icon-text {
|
||||
.btn-icon-prepend {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
.btn-icon-append {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
.btn-icon-prepend,
|
||||
.btn-icon-append {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
&.btn-xs {
|
||||
.btn-icon-prepend,
|
||||
.btn-icon-append {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
&.btn-sm {
|
||||
.btn-icon-prepend,
|
||||
.btn-icon-append {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
&.btn-lg {
|
||||
.btn-icon-prepend,
|
||||
.btn-icon-append {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Social buttons
|
||||
@each $color, $value in $social-colors {
|
||||
.btn-#{$color} {
|
||||
@include social-button(social-color($color));
|
||||
}
|
||||
.btn-outline-#{$color} {
|
||||
@include social-outline-button(social-color($color));
|
||||
}
|
||||
}
|
||||
|
||||
// Inverse buttons
|
||||
@each $color, $value in $theme-colors {
|
||||
.btn-inverse-#{$color} {
|
||||
@include button-inverse-variant($value);
|
||||
}
|
||||
}
|
||||
25
resources/sass/components/_cards.scss
Executable file
25
resources/sass/components/_cards.scss
Executable file
@ -0,0 +1,25 @@
|
||||
// Cards
|
||||
|
||||
.card {
|
||||
box-shadow: $card-box-shadow;
|
||||
-webkit-box-shadow: $card-box-shadow;
|
||||
-moz-box-shadow: $card-box-shadow;
|
||||
-ms-box-shadow: $card-box-shadow;
|
||||
.card-body {
|
||||
+ .card-body {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
||||
.card-title {
|
||||
text-transform: uppercase;
|
||||
font-size: .875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.card-group {
|
||||
box-shadow: $card-box-shadow;
|
||||
.card {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
163
resources/sass/components/_chat.scss
Executable file
163
resources/sass/components/_chat.scss
Executable file
@ -0,0 +1,163 @@
|
||||
.chat-wrapper {
|
||||
height: calc(100vh - #{$navbar-height} - 102px);
|
||||
@media(max-width: 991px) {
|
||||
min-height: 100%;
|
||||
}
|
||||
@media(max-width: 991px) {
|
||||
height: 100%;
|
||||
}
|
||||
.chat-aside {
|
||||
@media(min-width: 992px) {
|
||||
padding-right: 23px;
|
||||
}
|
||||
.aside-body {
|
||||
.tab-content {
|
||||
.tab-pane {
|
||||
position: relative;
|
||||
max-height: calc(100vh - 385px);
|
||||
.chat-list {
|
||||
.chat-item {
|
||||
a {
|
||||
> div {
|
||||
padding-top: 11px;
|
||||
padding-bottom: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.chat-content {
|
||||
@media(max-width: 991px) {
|
||||
position: absolute;
|
||||
background: $card-bg;
|
||||
left: 0;
|
||||
bottom: -1px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
display: none;
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.chat-header {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.chat-body {
|
||||
position: relative;
|
||||
max-height: calc(100vh - 340px);
|
||||
@media(max-width: 767px) {
|
||||
max-height: calc(100vh - 315px);
|
||||
}
|
||||
@media(max-width: 991px) {
|
||||
max-height: calc(100vh - 342px);
|
||||
}
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
.messages {
|
||||
padding: 0 10px;
|
||||
list-style-type: none;
|
||||
.message-item {
|
||||
display: flex;
|
||||
max-width: 80%;
|
||||
margin-bottom: 20px;
|
||||
@media(max-width: 767px) {
|
||||
max-width: 95%;
|
||||
}
|
||||
.content {
|
||||
.bubble {
|
||||
position: relative;
|
||||
padding: 7px 15px;
|
||||
margin-bottom: 4px;
|
||||
width: -webkit-fit-content;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
span {
|
||||
font-size: 12px;
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
&.friend {
|
||||
img {
|
||||
order: 1;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.content {
|
||||
order: 2;
|
||||
.bubble {
|
||||
background: rgba($primary, .1);
|
||||
border-radius: 0 5px 5px;
|
||||
&::before {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: 0;
|
||||
border-top: 5px solid rgba($primary, .1);
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 5px solid transparent;
|
||||
border-right:5px solid rgba($primary, .1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.me {
|
||||
margin-left: auto;
|
||||
img {
|
||||
order: 2;
|
||||
margin-left: 15px;
|
||||
}
|
||||
.content {
|
||||
order: 1;
|
||||
margin-left: auto;
|
||||
.bubble {
|
||||
background: rgba($info, .1);
|
||||
border-radius: 5px 0 5px 5px;
|
||||
margin-left: auto;
|
||||
&::before {
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: 0;
|
||||
border-top: 5px solid rgba($info, .1);
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 5px solid rgba($info, .1);
|
||||
border-right:5px solid transparent;
|
||||
}
|
||||
}
|
||||
span {
|
||||
text-align: right;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
figure {
|
||||
position: relative;
|
||||
.status {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
background: $secondary;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: -2px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid $card-bg;
|
||||
&.online {
|
||||
background: $success;
|
||||
}
|
||||
&.offline {
|
||||
background: $secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
0
resources/sass/components/_dashboard.scss
Executable file
0
resources/sass/components/_dashboard.scss
Executable file
75
resources/sass/components/_dropdown.scss
Executable file
75
resources/sass/components/_dropdown.scss
Executable file
@ -0,0 +1,75 @@
|
||||
// Dropdowns
|
||||
|
||||
.dropdown,
|
||||
.btn-group {
|
||||
.dropdown-toggle {
|
||||
&:after {
|
||||
border-top: 0;
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
border-bottom: 0;
|
||||
font: normal normal normal 24px/1 "feather";
|
||||
content: "\e842";
|
||||
width: auto;
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
line-height: .625rem;
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
&.dropup {
|
||||
.dropdown-toggle {
|
||||
&::after {
|
||||
content: "\e845";
|
||||
}
|
||||
}
|
||||
}
|
||||
&.dropstart {
|
||||
.dropdown-toggle {
|
||||
&::before {
|
||||
border: 0;
|
||||
font: normal normal normal 24px/1 "feather";
|
||||
content: "\e843";
|
||||
width: auto;
|
||||
height: auto;
|
||||
vertical-align: middle;
|
||||
line-height: .625rem;
|
||||
font-size: .875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.dropend {
|
||||
.dropdown-toggle {
|
||||
&::after {
|
||||
content: "\e844";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
padding: .35rem;
|
||||
margin-top: 0;
|
||||
box-shadow: $dropdown-box-shadow;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
font-size: .812rem;
|
||||
padding: .25rem .875rem;
|
||||
border-radius: 2px;
|
||||
i, svg {
|
||||
color: $text-muted;
|
||||
}
|
||||
&:not(&:active, &.active):hover {
|
||||
background-color: rgba($primary, .1);
|
||||
&, i, svg {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
&:active,
|
||||
&.active {
|
||||
i, svg {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
33
resources/sass/components/_forms.scss
Executable file
33
resources/sass/components/_forms.scss
Executable file
@ -0,0 +1,33 @@
|
||||
// Forms
|
||||
|
||||
.form-control-xs,
|
||||
.form-select-xs {
|
||||
padding: $input-padding-y-xs $input-padding-x-xs;
|
||||
font-size: $input-font-size-xs;
|
||||
}
|
||||
|
||||
.form-control-xs {
|
||||
+ .input-group-text {
|
||||
padding-top: $input-padding-y-xs;
|
||||
padding-bottom: $input-padding-y-xs;
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
margin-top: .13em; // height adjustment
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
// For RTL
|
||||
[type="tel"],
|
||||
[type="url"],
|
||||
[type="email"],
|
||||
[type="number"] {
|
||||
direction: ltr;
|
||||
}
|
||||
41
resources/sass/components/_icons.scss
Executable file
41
resources/sass/components/_icons.scss
Executable file
@ -0,0 +1,41 @@
|
||||
// Icons
|
||||
|
||||
.icons-list {
|
||||
border-left: 1px solid $border-color;
|
||||
border-top: 1px solid $border-color;
|
||||
> div {
|
||||
border-bottom: 1px solid $border-color;
|
||||
border-right: 1px solid $border-color;
|
||||
background: $body-bg;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding:15px 20px;
|
||||
font-weight: 400;
|
||||
transition: all .3s ease-in-out;
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
text-align: left;
|
||||
margin-right: 12px;
|
||||
color: $secondary;
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 20px;
|
||||
margin-right: 12px;
|
||||
color: $secondary;
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: text;
|
||||
i,
|
||||
svg {
|
||||
transform: scale(1.3);
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
58
resources/sass/components/_nav.scss
Executable file
58
resources/sass/components/_nav.scss
Executable file
@ -0,0 +1,58 @@
|
||||
.nav {
|
||||
&.nav-tabs {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
border-color: $nav-tabs-link-border-color;
|
||||
color: $body-color;
|
||||
background-color: $nav-tabs-link-bg;
|
||||
cursor: pointer;
|
||||
&.active {
|
||||
border-color: $nav-tabs-link-active-border-color;
|
||||
color: $primary;
|
||||
background: $nav-tabs-link-active-bg;
|
||||
}
|
||||
&.disabled {
|
||||
background-color: transparent;
|
||||
color: $text-muted;
|
||||
border-color: rgba($border-color, .7) rgba($border-color, .7) transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-tabs-vertical {
|
||||
border-bottom: 0;
|
||||
.nav-link {
|
||||
width: 100%;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0;
|
||||
border-color: $nav-tabs-link-border-color;
|
||||
color: $body-color;
|
||||
background-color: $nav-tabs-link-bg;
|
||||
&:first-child {
|
||||
border-radius: $border-radius 0 0 0;
|
||||
}
|
||||
&:last-child {
|
||||
border-radius: 0 0 0 $border-radius;
|
||||
}
|
||||
&.active {
|
||||
background-color: $nav-tabs-link-active-bg;
|
||||
color: $primary;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-tabs-line {
|
||||
.nav-link {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
&.active {
|
||||
border-bottom: 2px solid $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tab-content {
|
||||
&.tab-content-vertical {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
31
resources/sass/components/_pagination.scss
Executable file
31
resources/sass/components/_pagination.scss
Executable file
@ -0,0 +1,31 @@
|
||||
.pagination {
|
||||
.page-item {
|
||||
.page-link {
|
||||
svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pagination-separated {
|
||||
.page-item {
|
||||
margin-left: 2px;
|
||||
margin-right: 2px;
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.pagination-rounded {
|
||||
.page-item {
|
||||
margin-right: 2px;
|
||||
margin-left: 2px;
|
||||
.page-link {
|
||||
@include border-radius(50px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
35
resources/sass/components/_tables.scss
Executable file
35
resources/sass/components/_tables.scss
Executable file
@ -0,0 +1,35 @@
|
||||
// Tables
|
||||
|
||||
.table {
|
||||
margin-bottom: 0;
|
||||
|
||||
>:not(:last-child)>:last-child>* {
|
||||
border-bottom-color: inherit;
|
||||
}
|
||||
|
||||
thead {
|
||||
th {
|
||||
border-top: 0;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
color: $text-muted;
|
||||
i {
|
||||
margin-left: 0.325rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
td {
|
||||
img {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
72
resources/sass/components/_timeline.scss
Executable file
72
resources/sass/components/_timeline.scss
Executable file
@ -0,0 +1,72 @@
|
||||
.timeline {
|
||||
border-left: 3px solid $primary;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
background: rgba($primary, .2);
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
padding: 50px;
|
||||
list-style: none;
|
||||
max-width: 40%;
|
||||
@media(max-width: 767px) {
|
||||
max-width: 98%;
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.event {
|
||||
border-bottom: 1px dashed $border-color;
|
||||
padding-bottom: (50px * 0.5);
|
||||
margin-bottom: 25px;
|
||||
position: relative;
|
||||
|
||||
@media(max-width: 767px) {
|
||||
padding-top: 30px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:before, &:after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&:before {
|
||||
left: (((120px * 0.6) + 50px + 4px + 4px + (4px * 2)) * 1.5) * -1;
|
||||
content: attr(data-date);
|
||||
text-align: right;
|
||||
font-weight: 500;
|
||||
font-size: 0.9em;
|
||||
min-width: 120px;
|
||||
@media(max-width: 767px) {
|
||||
left: 0px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
-webkit-box-shadow: 0 0 0 3px $primary;
|
||||
box-shadow: 0 0 0 3px $primary;
|
||||
left: (50px + 3px + (8px * 0.35)) * -1;
|
||||
background: $card-bg;
|
||||
border-radius: 50%;
|
||||
height: 9px;
|
||||
width: 9px;
|
||||
content: "";
|
||||
top: 5px;
|
||||
@media(max-width: 767px) {
|
||||
left: (25px + 4px + (8px * 0.35)) * -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
118
resources/sass/components/email/_inbox.scss
Executable file
118
resources/sass/components/email/_inbox.scss
Executable file
@ -0,0 +1,118 @@
|
||||
.email-aside-nav {
|
||||
&.collapse {
|
||||
display: block;
|
||||
@media(max-width: 991px) {
|
||||
display: none;
|
||||
}
|
||||
&.show {
|
||||
@media(max-width: 991px) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.nav-item {
|
||||
border-radius: .2rem;
|
||||
.nav-link {
|
||||
color: $body-color;
|
||||
svg {
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
&.active, &:hover {
|
||||
background: rgba($primary, .1);
|
||||
.nav-link {
|
||||
&, svg {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.email-list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $border-color;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: rgba($primary, .08);
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.email-list-actions {
|
||||
width: 40px;
|
||||
vertical-align: top;
|
||||
display: table-cell;
|
||||
.form-check {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.favorite {
|
||||
display: block;
|
||||
padding-left: 1px;
|
||||
line-height: 15px;
|
||||
span {
|
||||
svg {
|
||||
width: 14px;
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
&:hover span {
|
||||
color: #8d8d8d;
|
||||
}
|
||||
&.active {
|
||||
span {
|
||||
svg {
|
||||
color: $warning;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.email-list-detail {
|
||||
width: calc(100% - 40px);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
.content {
|
||||
overflow: hidden;
|
||||
.from {
|
||||
display: block;
|
||||
margin: 0 0 1px 0;
|
||||
color: $body-color;
|
||||
}
|
||||
.msg {
|
||||
width: 97%;
|
||||
color: $secondary;
|
||||
font-size: .8rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.date {
|
||||
color: $body-color;
|
||||
white-space: nowrap;
|
||||
.icon {
|
||||
svg {
|
||||
width: 14px;
|
||||
margin-right: 7px;
|
||||
color: #3d405c;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.email-list-item--unread {
|
||||
background-color: rgba($primary, .09);
|
||||
.content {
|
||||
.from {
|
||||
font-weight: 500;
|
||||
}
|
||||
.msg {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
13
resources/sass/components/plugin-overrides/_ace.scss
Executable file
13
resources/sass/components/plugin-overrides/_ace.scss
Executable file
@ -0,0 +1,13 @@
|
||||
// npm package: ace-builds (Ajax.org Cloud9 Editor)
|
||||
// github link: https://github.com/ajaxorg/ace-builds
|
||||
|
||||
.ace_editor {
|
||||
border-radius: $input-border-radius;
|
||||
margin: auto;
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
font: 14px/normal SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
.ace_content{
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
}
|
||||
86
resources/sass/components/plugin-overrides/_apex-charts.scss
Executable file
86
resources/sass/components/plugin-overrides/_apex-charts.scss
Executable file
@ -0,0 +1,86 @@
|
||||
// npm package: apexcharts
|
||||
// github link: https://github.com/apexcharts/apexcharts.js
|
||||
|
||||
div.apexcharts-canvas {
|
||||
/*rtl:ignore*/
|
||||
direction: ltr; // RTL fix
|
||||
|
||||
.apexcharts-menu {
|
||||
background: $dropdown-bg !important;
|
||||
color: $body-color;
|
||||
border-color: $border-color;
|
||||
}
|
||||
|
||||
.apexcharts-zoom-icon svg,
|
||||
.apexcharts-zoomin-icon svg,
|
||||
.apexcharts-zoomout-icon svg,
|
||||
.apexcharts-reset-icon svg,
|
||||
.apexcharts-pan-icon svg,
|
||||
.apexcharts-selection-icon svg,
|
||||
.apexcharts-menu-icon svg,
|
||||
.apexcharts-toolbar-custom-icon svg {
|
||||
fill: $secondary;
|
||||
}
|
||||
|
||||
.apexcharts-legend.apexcharts-align-right .apexcharts-legend-series,
|
||||
.apexcharts-legend.apexcharts-align-left .apexcharts-legend-series {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.apexcharts-legend-marker {
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip {
|
||||
background: rgba($dropdown-bg, .8);
|
||||
color: $body-color;
|
||||
box-shadow: $dropdown-box-shadow;
|
||||
border-radius: $border-radius;
|
||||
border: 1px solid $dropdown-border-color;
|
||||
.apexcharts-tooltip-title {
|
||||
border-color: $border-color;
|
||||
background-color: $dropdown-bg;
|
||||
}
|
||||
* {
|
||||
font-family: $font-family-sans-serif !important;
|
||||
}
|
||||
}
|
||||
.apexcharts-tooltip-series-group.apexcharts-active,
|
||||
.apexcharts-tooltip-series-group:last-child {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.apexcharts-tooltip-text-y-value,
|
||||
.apexcharts-tooltip-text-goals-value,
|
||||
.apexcharts-tooltip-text-z-value {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip,
|
||||
.apexcharts-yaxistooltip {
|
||||
background: $dropdown-bg;
|
||||
color: $body-color;
|
||||
border-color: $dropdown-border-color;
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip-bottom::before {
|
||||
border-bottom-color: $dropdown-border-color;
|
||||
}
|
||||
.apexcharts-xaxistooltip-bottom::after {
|
||||
border-bottom-color: rgba($dropdown-bg, .8);
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip-left:before,
|
||||
.apexcharts-yaxistooltip-right:before {
|
||||
border-left-color: $dropdown-border-color;
|
||||
}
|
||||
.apexcharts-yaxistooltip-left:after,
|
||||
.apexcharts-yaxistooltip-right:after {
|
||||
border-left-color: rgba($dropdown-bg, .8);
|
||||
}
|
||||
|
||||
}
|
||||
47
resources/sass/components/plugin-overrides/_data-tables.scss
Executable file
47
resources/sass/components/plugin-overrides/_data-tables.scss
Executable file
@ -0,0 +1,47 @@
|
||||
// npm package: datatables.net-bs5
|
||||
// github link: https://github.com/DataTables/Dist-DataTables-Bootstrap5
|
||||
|
||||
.dataTables_wrapper {
|
||||
&.dt-bootstrap4 {
|
||||
.dataTables_length {
|
||||
@media(max-width: 767px) {
|
||||
text-align: left;
|
||||
}
|
||||
select {
|
||||
@extend .w-100;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.dataTables_filter {
|
||||
@media(max-width: 767px) {
|
||||
text-align: left;
|
||||
margin-left: -19px;
|
||||
}
|
||||
}
|
||||
}
|
||||
div {
|
||||
&.dataTables_paginate {
|
||||
ul {
|
||||
&.pagination {
|
||||
@extend .justify-content-center;
|
||||
@extend .justify-content-md-end;
|
||||
@extend .mt-3;
|
||||
@extend .mt-md-0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:first-child {
|
||||
// RTL fix
|
||||
padding-left: 0;
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
div.table-responsive>div.dataTables_wrapper>div.row>div[class^=col-]:last-child {
|
||||
// RTL fix
|
||||
padding-right: 0;
|
||||
padding-left: 12px;
|
||||
}
|
||||
20
resources/sass/components/plugin-overrides/_dropify.scss
Executable file
20
resources/sass/components/plugin-overrides/_dropify.scss
Executable file
@ -0,0 +1,20 @@
|
||||
// npm package: dropify
|
||||
// github link: https://github.com/JeremyFagis/dropify
|
||||
|
||||
.dropify-wrapper {
|
||||
border: 1px solid $input-border-color;
|
||||
border-radius: $input-border-radius;
|
||||
.dropify-message {
|
||||
span {
|
||||
&.file-icon {
|
||||
font-size: .875rem;
|
||||
color: $text-muted;
|
||||
&::before {
|
||||
font-family: feather;
|
||||
content: '\e8e3';
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
29
resources/sass/components/plugin-overrides/_dropzone.scss
Executable file
29
resources/sass/components/plugin-overrides/_dropzone.scss
Executable file
@ -0,0 +1,29 @@
|
||||
// npm package: dropify
|
||||
// github link: https://github.com/dropzone/dropzone
|
||||
|
||||
.dropzone {
|
||||
overflow: auto;
|
||||
border: 1px solid $input-border-color;
|
||||
border-radius: $input-border-radius;
|
||||
@media (min-width: 1400px) {
|
||||
min-height: 200px;
|
||||
}
|
||||
max-height: 200px;
|
||||
padding: 0;
|
||||
&.dz-clickable {
|
||||
.dz-message {
|
||||
margin-top: 65px;
|
||||
* {
|
||||
@extend .text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dz-preview {
|
||||
&.dz-image-preview,
|
||||
&.dz-file-preview {
|
||||
.dz-image {
|
||||
border-radius: $input-border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
53
resources/sass/components/plugin-overrides/_easymde.scss
Executable file
53
resources/sass/components/plugin-overrides/_easymde.scss
Executable file
@ -0,0 +1,53 @@
|
||||
// npm package: easymde
|
||||
// github link: https://github.com/Ionaru/easy-markdown-editor
|
||||
|
||||
.EasyMDEContainer .CodeMirror {
|
||||
background: $input-bg;
|
||||
border: 1px solid $input-border-color;
|
||||
color: $body-color;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.editor-toolbar {
|
||||
border: 1px solid $input-border-color;
|
||||
border-bottom: 0;
|
||||
border-radius: $input-border-radius $input-border-radius 0 0;
|
||||
&, &:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
button {
|
||||
color: rgba($body-color, .7) !important;
|
||||
&:hover {
|
||||
background: $gray-200;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
i.separator {
|
||||
border-left: 1px solid $input-border-color;
|
||||
border-right: 1px solid $input-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.EasyMDEContainer .CodeMirror-fullscreen,
|
||||
.editor-toolbar.fullscreen,
|
||||
.editor-preview-side {
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.editor-preview-side {
|
||||
border-color: $input-border-color;
|
||||
}
|
||||
|
||||
.editor-toolbar button.active,.editor-toolbar button:hover {
|
||||
background: $gray-200;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.editor-statusbar {
|
||||
padding: 0 10px;
|
||||
border: 1px solid $input-border-color;
|
||||
border-top-color: transparent;
|
||||
border-bottom-left-radius: $input-border-radius;
|
||||
border-bottom-right-radius: $input-border-radius;
|
||||
}
|
||||
76
resources/sass/components/plugin-overrides/_flatpickr.scss
Executable file
76
resources/sass/components/plugin-overrides/_flatpickr.scss
Executable file
@ -0,0 +1,76 @@
|
||||
// npm package: flatpickr
|
||||
// github link: https://github.com/flatpickr/flatpickr
|
||||
|
||||
.form-control.flatpickr-input {
|
||||
background-color: $input-bg;
|
||||
}
|
||||
|
||||
.flatpickr-day.selected,
|
||||
.flatpickr-day.startRange,
|
||||
.flatpickr-day.endRange,
|
||||
.flatpickr-day.selected.inRange,
|
||||
.flatpickr-day.startRange.inRange,
|
||||
.flatpickr-day.endRange.inRange,
|
||||
.flatpickr-day.selected:focus,
|
||||
.flatpickr-day.startRange:focus,
|
||||
.flatpickr-day.endRange:focus,
|
||||
.flatpickr-day.selected:hover,
|
||||
.flatpickr-day.startRange:hover,
|
||||
.flatpickr-day.endRange:hover,
|
||||
.flatpickr-day.selected.prevMonthDay,
|
||||
.flatpickr-day.startRange.prevMonthDay,
|
||||
.flatpickr-day.endRange.prevMonthDay,
|
||||
.flatpickr-day.selected.nextMonthDay,
|
||||
.flatpickr-day.startRange.nextMonthDay,
|
||||
.flatpickr-day.endRange.nextMonthDay {
|
||||
background: $primary;
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
.flatpickr-months {
|
||||
padding: 0 1rem;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.flatpickr-innerContainer {
|
||||
// padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
|
||||
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
|
||||
|
||||
left: 11px;
|
||||
right: auto !important;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
|
||||
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
|
||||
|
||||
right: 11px;
|
||||
left: auto !important;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.flatpickr-months .flatpickr-prev-month:hover svg,
|
||||
.flatpickr-months .flatpickr-next-month:hover svg {
|
||||
fill: $primary;
|
||||
}
|
||||
|
||||
.flatpickr-months .flatpickr-month {
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.flatpickr-current-month .flatpickr-monthDropdown-months {
|
||||
font-size: 1rem;
|
||||
border-radius: $input-border-radius;
|
||||
padding: .3rem .5rem;
|
||||
}
|
||||
|
||||
.flatpickr-weekdays {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.dayContainer {
|
||||
padding: 0 10px 10px;
|
||||
}
|
||||
95
resources/sass/components/plugin-overrides/_full-calendar.scss
Executable file
95
resources/sass/components/plugin-overrides/_full-calendar.scss
Executable file
@ -0,0 +1,95 @@
|
||||
// npm package: fullcalendar
|
||||
// github link: https://github.com/fullcalendar/fullcalendar
|
||||
|
||||
div.fc {
|
||||
.fc-button-primary {
|
||||
@extend .btn;
|
||||
@extend .btn-outline-primary;
|
||||
@extend .btn-sm;
|
||||
}
|
||||
|
||||
--fc-button-active-bg-color: #{$primary};
|
||||
--fc-button-active-border-color: #{$primary};
|
||||
|
||||
--fc-border-color: #{$border-color};
|
||||
|
||||
.fc-button .fc-icon {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
.fc-button-primary:focus,
|
||||
.fc-button-primary:not(:disabled).fc-button-active:focus,
|
||||
.fc-button-primary:not(:disabled):active:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.fc-button-primary:disabled {
|
||||
border-color: $primary;
|
||||
}
|
||||
|
||||
.fc-toolbar {
|
||||
@media(max-width: 767px) {
|
||||
flex-direction: column;
|
||||
.fc-toolbar-chunk {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-daygrid-day-number,
|
||||
.fc-col-header-cell-cushion {
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
.fc-daygrid-event {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.fc-daygrid-day.fc-day-today {
|
||||
background-color: rgba($primary, .2);
|
||||
}
|
||||
|
||||
.fc-list-event:hover td {
|
||||
background-color: rgba($primary, .2);
|
||||
}
|
||||
|
||||
.fc-list-day-text,
|
||||
.fc-list-day-side-text {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-timegrid-event-harness-inset .fc-timegrid-event,
|
||||
.fc-timegrid-event.fc-event-mirror,
|
||||
.fc-timegrid-more-link {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.fc-theme-standard .fc-popover {
|
||||
background-color: $dropdown-bg;
|
||||
border-color: $dropdown-border-color;
|
||||
box-shadow: $dropdown-box-shadow;
|
||||
.fc-popover-header {
|
||||
background-color: $secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-theme-standard .fc-list-day-cushion {
|
||||
--fc-neutral-bg-color: #{$body-bg};
|
||||
}
|
||||
|
||||
.fc-h-event.fc-daygrid-block-event {
|
||||
margin-bottom: 10px;
|
||||
padding: 8px;
|
||||
border-radius: 2px;
|
||||
background: rgba($primary, .2);
|
||||
border: 0;
|
||||
border-left: 3px solid $primary;
|
||||
color: $body-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.fc-event.fc-h-event {
|
||||
--fc-event-text-color: #{$body-color};
|
||||
border-left-width: 3px;
|
||||
font-weight: 700;
|
||||
}
|
||||
28
resources/sass/components/plugin-overrides/_jquery-flot.scss
Executable file
28
resources/sass/components/plugin-overrides/_jquery-flot.scss
Executable file
@ -0,0 +1,28 @@
|
||||
// npm package: jquery.flot
|
||||
// github link: https://github.com/flot/flot
|
||||
|
||||
.flot-chart-wrapper {
|
||||
.flot-chart {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
max-width: none;
|
||||
height: 400px;
|
||||
}
|
||||
@media(max-width: 767px) {
|
||||
height: 200px;
|
||||
min-height: 200px;
|
||||
.flot-chart {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flot-text {
|
||||
.flot-x-axis,
|
||||
.flot-y-axis {
|
||||
> div,
|
||||
.flot-tick-label {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
8
resources/sass/components/plugin-overrides/_peity.scss
Executable file
8
resources/sass/components/plugin-overrides/_peity.scss
Executable file
@ -0,0 +1,8 @@
|
||||
// npm package: peity
|
||||
// github link: https://github.com/benpickles/peity
|
||||
|
||||
.peity-custom {
|
||||
svg {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
49
resources/sass/components/plugin-overrides/_perfect-scrollbar.scss
Executable file
49
resources/sass/components/plugin-overrides/_perfect-scrollbar.scss
Executable file
@ -0,0 +1,49 @@
|
||||
// npm package: perfect-scrollbar
|
||||
// github link: https://github.com/mdbootstrap/perfect-scrollbar
|
||||
|
||||
.ps__thumb-x {
|
||||
background-color: darken($card-bg, 15%);
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.ps__rail-x.ps--clicking .ps__thumb-x,
|
||||
.ps__rail-x:focus>.ps__thumb-x,
|
||||
.ps__rail-x:hover>.ps__thumb-x {
|
||||
background-color: darken($card-bg, 30%);
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.ps__rail-x {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.ps__thumb-y {
|
||||
background-color: darken($card-bg, 15%);
|
||||
width: 4px;
|
||||
// RTL fix
|
||||
right: 2px !important;
|
||||
left: auto !important;
|
||||
}
|
||||
|
||||
.ps__rail-y.ps--clicking .ps__thumb-y,
|
||||
.ps__rail-y:focus>.ps__thumb-y,
|
||||
.ps__rail-y:hover>.ps__thumb-y {
|
||||
background-color: darken($card-bg, 30%);
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.ps__rail-y {
|
||||
width: 10px;
|
||||
// RTL fix
|
||||
right: 0 !important;
|
||||
left: auto !important;
|
||||
}
|
||||
|
||||
.ps .ps__rail-x.ps--clicking,
|
||||
.ps .ps__rail-x:focus,
|
||||
.ps .ps__rail-x:hover,
|
||||
.ps .ps__rail-y.ps--clicking,
|
||||
.ps .ps__rail-y:focus,
|
||||
.ps .ps__rail-y:hover {
|
||||
background-color: $light;
|
||||
}
|
||||
68
resources/sass/components/plugin-overrides/_select2.scss
Executable file
68
resources/sass/components/plugin-overrides/_select2.scss
Executable file
@ -0,0 +1,68 @@
|
||||
// npm package: select2
|
||||
// github link: https://github.com/select2/select2
|
||||
|
||||
.select2-container--default {
|
||||
.select2-selection--single,
|
||||
.select2-selection--multiple {
|
||||
border: 1px solid $input-border-color;
|
||||
border-radius: $border-radius;
|
||||
@at-root #{selector-append(".select2-container--focus", &)} {
|
||||
border: 1px solid $input-focus-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-dropdown {
|
||||
border: 1px solid $input-focus-border-color;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.select2-container--default {
|
||||
.select2-search--dropdown .select2-search__field {
|
||||
@extend .form-control;
|
||||
}
|
||||
.select2-results__option--highlighted[aria-selected] {
|
||||
background-color: $primary;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container .select2-selection--single,
|
||||
.select2-container .select2-selection--multiple {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--single {
|
||||
.select2-selection__rendered {
|
||||
line-height: 1.5;
|
||||
padding: $input-btn-padding-y $input-btn-padding-x;
|
||||
}
|
||||
.select2-selection__arrow {
|
||||
height: 100%;
|
||||
b {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container--default .select2-selection--multiple {
|
||||
min-height: 38px;
|
||||
.select2-selection__rendered {
|
||||
padding: 0 6px
|
||||
}
|
||||
.select2-selection__choice {
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
border-color: $primary;
|
||||
padding: 1px 8px;
|
||||
border-radius: .15rem;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.select2-selection__choice__remove {
|
||||
color: $white;
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
.select2-container .select2-search--inline {
|
||||
margin-top: 3px;
|
||||
}
|
||||
51
resources/sass/components/plugin-overrides/_sweet-alert.scss
Executable file
51
resources/sass/components/plugin-overrides/_sweet-alert.scss
Executable file
@ -0,0 +1,51 @@
|
||||
// npm package: sweetalert2
|
||||
// github link: https://github.com/sweetalert2/sweetalert2
|
||||
|
||||
.swal2-popup {
|
||||
font-size: $font-size-base;
|
||||
|
||||
.swal2-title {
|
||||
font-size: 25px;
|
||||
line-height: 1;
|
||||
font-weight: 500;
|
||||
color: $body-color;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.swal2-html-container {
|
||||
font-size: $font-size-base;
|
||||
color: $text-muted;
|
||||
font-weight: initial;
|
||||
margin-top: 11px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.swal2-actions {
|
||||
button {
|
||||
@extend .btn;
|
||||
&.swal2-confirm {
|
||||
@extend .btn-primary;
|
||||
}
|
||||
&.swal2-cancel {
|
||||
@extend .btn-danger;
|
||||
@extend .border-danger;
|
||||
}
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swal2-close {
|
||||
font-size: 22px;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.swal2-timer-progress-bar {
|
||||
background: $secondary;
|
||||
}
|
||||
|
||||
}
|
||||
37
resources/sass/components/plugin-overrides/_tags-input.scss
Executable file
37
resources/sass/components/plugin-overrides/_tags-input.scss
Executable file
@ -0,0 +1,37 @@
|
||||
// npm package: jquery-tags-input
|
||||
// github link: https://github.com/xoxco/jQuery-Tags-Input
|
||||
|
||||
div.tagsinput {
|
||||
padding: 6px 6px 1px;
|
||||
border-color: $input-border-color;
|
||||
border-radius: $input-border-radius;
|
||||
span.tag {
|
||||
background: $primary;
|
||||
color: $white;
|
||||
border: 0;
|
||||
padding: 3px 7px;
|
||||
font-family: inherit;
|
||||
border-radius: .15rem;
|
||||
margin-bottom: 4px;
|
||||
float: left;
|
||||
// RTL fix
|
||||
margin-right: 0;
|
||||
margin-left: 5px;
|
||||
a {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: $white;
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
#tags_addTag {
|
||||
float: left;
|
||||
// RTL fix
|
||||
margin-left: 5px;
|
||||
}
|
||||
input {
|
||||
margin: 0;
|
||||
padding: 1px;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
168
resources/sass/components/plugin-overrides/_tinymce.scss
Executable file
168
resources/sass/components/plugin-overrides/_tinymce.scss
Executable file
@ -0,0 +1,168 @@
|
||||
// npm package: tinymce
|
||||
// github link: https://github.com/tinymce/tinymce
|
||||
|
||||
.tox.tox-tinymce {
|
||||
border: 1px solid $input-border-color;
|
||||
border-radius: $input-border-radius;
|
||||
.tox-menubar,
|
||||
.tox-toolbar-overlord,
|
||||
.tox-toolbar,
|
||||
.tox-toolbar__overflow,
|
||||
.tox-toolbar__primary {
|
||||
background-color: $input-bg;
|
||||
background-image: none;
|
||||
border-bottom: 1px solid $input-border-color;
|
||||
}
|
||||
.tox-toolbar-overlord {
|
||||
border-bottom: none;
|
||||
}
|
||||
&:not(.tox-tinymce-inline) .tox-editor-header {
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
.tox-edit-area__iframe {
|
||||
background-color: $input-bg;
|
||||
}
|
||||
&.tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type) {
|
||||
border-right-color: $input-border-color;
|
||||
border-left-color: $input-border-color; // RTL
|
||||
}
|
||||
.tox-statusbar {
|
||||
background-color: $input-bg;
|
||||
border-color: $input-border-color;
|
||||
color: $text-muted;
|
||||
}
|
||||
.tox-statusbar a,
|
||||
.tox-statusbar__path-item,
|
||||
.tox-statusbar__wordcount {
|
||||
color: $text-muted;
|
||||
}
|
||||
.tox-mbtn {
|
||||
color: $body-color;
|
||||
}
|
||||
.tox-tbtn {
|
||||
color: rgba($body-color, .7);
|
||||
}
|
||||
.tox-tbtn:hover {
|
||||
background: $gray-200;
|
||||
color: $body-color;
|
||||
svg {
|
||||
fill: $body-color;
|
||||
}
|
||||
}
|
||||
.tox-tbtn:focus:not(.tox-tbtn--disabled) {
|
||||
color: $body-color;
|
||||
}
|
||||
.tox-mbtn:hover:not(:disabled):not(.tox-mbtn--active) {
|
||||
background: $gray-200;
|
||||
color: $body-color;
|
||||
}
|
||||
.tox-mbtn:focus:not(:disabled),
|
||||
.tox-mbtn--active {
|
||||
background: $gray-200;
|
||||
color: $body-color;
|
||||
}
|
||||
.tox-tbtn svg {
|
||||
fill: rgba($body-color, .7);
|
||||
}
|
||||
.tox-tbtn--disabled svg,
|
||||
.tox-tbtn--disabled:hover svg,
|
||||
.tox-tbtn:disabled svg,
|
||||
.tox-tbtn:disabled:hover svg {
|
||||
fill: $input-disabled-bg;
|
||||
}
|
||||
.tox-split-button:hover {
|
||||
box-shadow: 0 0 0 1px $input-border-color inset;
|
||||
}
|
||||
.tox-split-button:focus {
|
||||
background: $gray-200;
|
||||
}
|
||||
.tox-tbtn--enabled,
|
||||
.tox-tbtn--enabled:hover,
|
||||
.tox-tbtn:focus {
|
||||
background: $gray-200;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
div.tox {
|
||||
.tox-menu {
|
||||
background-color: $dropdown-bg;
|
||||
border-color: $dropdown-border-color;
|
||||
}
|
||||
.tox-collection__item {
|
||||
color: $dropdown-color;
|
||||
}
|
||||
.tox-collection--list .tox-collection__item--enabled {
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
.tox-collection--list .tox-collection__group {
|
||||
border-color: $border-color;
|
||||
}
|
||||
.tox-collection--toolbar .tox-collection__item--active {
|
||||
background-color: $gray-200;
|
||||
}
|
||||
.tox-collection--list .tox-collection__item--active {
|
||||
background-color: $gray-200;
|
||||
}
|
||||
.tox-collection--toolbar .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
|
||||
color: $body-color;
|
||||
}
|
||||
.tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled) {
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
|
||||
.tox-dialog-wrap__backdrop {
|
||||
background-color: rgba(0,0,0,.75);
|
||||
}
|
||||
.tox-dialog,
|
||||
.tox-dialog__header,
|
||||
.tox-dialog__footer {
|
||||
background-color: $input-bg;
|
||||
border-color: $border-color;
|
||||
color: $body-color;
|
||||
}
|
||||
.tox-button--secondary {
|
||||
@extend .btn-secondary;
|
||||
}
|
||||
.tox-button {
|
||||
@extend .btn;
|
||||
&:not(.tox-button--naked):not(.tox-button--secondary) {
|
||||
@extend .btn-primary;
|
||||
}
|
||||
}
|
||||
.tox-button--secondary:hover:not(:disabled) {
|
||||
background-color: $secondary;
|
||||
border-color: $secondary;
|
||||
color: $white;
|
||||
}
|
||||
.tox-button--naked:hover:not(:disabled) {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
.tox-button--naked.tox-button--icon:hover:not(:disabled) {
|
||||
color: lighten($body-color, 20%);
|
||||
}
|
||||
.tox-listboxfield .tox-listbox--select,
|
||||
.tox-textarea,
|
||||
.tox-textfield,
|
||||
.tox-toolbar-textfield {
|
||||
background-color: $input-bg;
|
||||
border-color: $input-border-color;
|
||||
color: $body-color;
|
||||
}
|
||||
.tox-listboxfield .tox-listbox--select:focus,
|
||||
.tox-textarea:focus,
|
||||
.tox-textfield:focus {
|
||||
background-color: $input-bg;
|
||||
border-color: $input-focus-border-color;
|
||||
}
|
||||
.tox-dialog__table tbody tr {
|
||||
border-color: $border-color;
|
||||
}
|
||||
.tox-dialog__body {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
17
resources/sass/components/plugin-overrides/_typeahead.scss
Executable file
17
resources/sass/components/plugin-overrides/_typeahead.scss
Executable file
@ -0,0 +1,17 @@
|
||||
// npm package: typeahead.js
|
||||
// github link: https://github.com/twitter/typeahead.js
|
||||
|
||||
.typeahead.tt-input,
|
||||
.typeahead.tt-hint {
|
||||
@extend .form-control;
|
||||
background-color: $input-bg !important;
|
||||
// RTL fix
|
||||
direction: ltr;
|
||||
}
|
||||
.tt-menu {
|
||||
@extend .dropdown-menu;
|
||||
.tt-suggestion {
|
||||
@extend .dropdown-item;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
155
resources/sass/components/plugin-overrides/_wizard.scss
Executable file
155
resources/sass/components/plugin-overrides/_wizard.scss
Executable file
@ -0,0 +1,155 @@
|
||||
// npm package: jquery-steps
|
||||
// github link: https://github.com/rstaib/jquery-steps/
|
||||
|
||||
.tabcontrol ul, .wizard ul {
|
||||
display: flex;
|
||||
@media(max-width: 676px) {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.wizard>.steps>ul>li {
|
||||
width: auto;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.wizard>.steps .disabled a,
|
||||
.wizard>.steps .disabled a:active,
|
||||
.wizard>.steps .disabled a:hover {
|
||||
background-color: $gray-200;
|
||||
color: $body-color;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.wizard>.steps .current a,
|
||||
.wizard>.steps .current a:active,
|
||||
.wizard>.steps .current a:hover {
|
||||
background-color: $primary;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.wizard>.steps a,
|
||||
.wizard>.steps a:active,
|
||||
.wizard>.steps a:hover {
|
||||
padding: $btn-padding-y $btn-padding-x;
|
||||
border-radius: $input-border-radius;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wizard>.steps .done a,
|
||||
.wizard>.steps .done a:active,
|
||||
.wizard>.steps .done a:hover {
|
||||
background-color: rgba($primary, .2);
|
||||
color: $primary;
|
||||
border: 1px solid $primary;
|
||||
}
|
||||
|
||||
.wizard>.steps ul li {
|
||||
a {
|
||||
&, &:active, &:hover {
|
||||
margin: 0 .5em .5em 0;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
a {
|
||||
&, &:active, &:hover {
|
||||
margin: 0 0 .5em 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wizard>.steps .number {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.wizard>.content {
|
||||
background: $input-bg;
|
||||
border: 1px solid $input-border-color;
|
||||
min-height: 23em;
|
||||
overflow: auto;
|
||||
margin: .5em 0;
|
||||
}
|
||||
|
||||
.wizard>.content>.body {
|
||||
@media(max-width: 767px) {
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
padding: 5%;
|
||||
}
|
||||
}
|
||||
|
||||
.wizard>.actions {
|
||||
// RTL fix
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.wizard>.actions>ul>li,
|
||||
.wizard>.steps>ul>li {
|
||||
// RTL fix
|
||||
float: left;
|
||||
}
|
||||
|
||||
.wizard.vertical>.steps {
|
||||
// RTL fix
|
||||
float: left;
|
||||
}
|
||||
|
||||
.wizard>.actions a,
|
||||
.wizard>.actions a:active,
|
||||
.wizard>.actions a:hover {
|
||||
@extend .btn;
|
||||
@extend .btn-primary;
|
||||
}
|
||||
|
||||
.wizard>.actions .disabled a,
|
||||
.wizard>.actions .disabled a:active,
|
||||
.wizard>.actions .disabled a:hover {
|
||||
background: $gray-200;
|
||||
border-color: $gray-200;
|
||||
cursor: not-allowed;
|
||||
color: $gray-500;
|
||||
}
|
||||
|
||||
.wizard>.actions .disabled a:focus {
|
||||
box-shadow: none;
|
||||
color: $gray-500;
|
||||
}
|
||||
|
||||
.wizard>.actions>ul {
|
||||
li {
|
||||
margin-right: 0;
|
||||
margin-left: .7em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// vertical
|
||||
|
||||
.wizard.vertical {
|
||||
>.steps ul {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.wizard.vertical>.content {
|
||||
margin: 0 0 .5em 2%;
|
||||
width: 68%;
|
||||
}
|
||||
|
||||
.wizard.vertical>.steps a,
|
||||
.wizard.vertical>.steps a:active,
|
||||
.wizard.vertical>.steps a:hover {
|
||||
margin: 0 0 .5em 0;
|
||||
}
|
||||
|
||||
.wizard.vertical>.actions {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wizard.vertical>.actions>ul>li {
|
||||
margin: 0 0 0 .7em;
|
||||
}
|
||||
Reference in New Issue
Block a user