first commit
This commit is contained in:
5
resources/sass/_background.scss
Executable file
5
resources/sass/_background.scss
Executable file
@ -0,0 +1,5 @@
|
||||
@each $color, $value in $social-colors {
|
||||
.bg-#{$color} {
|
||||
background: social-color($color);
|
||||
}
|
||||
}
|
||||
1
resources/sass/_custom.scss
Executable file
1
resources/sass/_custom.scss
Executable file
@ -0,0 +1 @@
|
||||
// Write your custom css/scss here
|
||||
180
resources/sass/_demo.scss
Executable file
180
resources/sass/_demo.scss
Executable file
@ -0,0 +1,180 @@
|
||||
// Demo Styles
|
||||
|
||||
.main-content {
|
||||
color: $body-color;
|
||||
font-size: 16px;
|
||||
> .page-title {
|
||||
margin-bottom: 1rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
> h4 {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: .875rem;
|
||||
&::before {
|
||||
display: block;
|
||||
height: 5.4rem;
|
||||
margin-top: -6rem;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
> hr {
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.example {
|
||||
font-size: 0.875rem;
|
||||
letter-spacing: normal;
|
||||
padding: 10px;
|
||||
background-color: $card-bg;
|
||||
border: 4px solid $border-color;
|
||||
position: relative;
|
||||
@media(min-width: 576px) {
|
||||
padding: 25px;
|
||||
}
|
||||
}
|
||||
.highlight {
|
||||
position: relative;
|
||||
background-color: $card-bg;
|
||||
padding: 15px;
|
||||
pre {
|
||||
padding: 15px;
|
||||
font-size: .875rem;
|
||||
font-family: $font-family-sans-serif;
|
||||
background: transparent;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
code {
|
||||
font-family: $font-family-sans-serif;
|
||||
padding: 0;
|
||||
tab-size: 8;
|
||||
color: $body-color;
|
||||
text-shadow: none;
|
||||
.token {
|
||||
&.url,
|
||||
&.string,
|
||||
&.entity,
|
||||
&.operator {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-clipboard {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
font-size: 12px;
|
||||
padding: 1px 6px;
|
||||
background: rgba($primary, .2);
|
||||
&:hover {
|
||||
background: rgba($primary, .3);
|
||||
border-color: transparent;
|
||||
transition: background .3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.example {
|
||||
.btn-toolbar {
|
||||
+ .btn-toolbar {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
}
|
||||
.btn-group {
|
||||
@extend .mb-1;
|
||||
@extend .mb-md-0;
|
||||
}
|
||||
.modal {
|
||||
&.static {
|
||||
position: static;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
nav.navbar, div.navbar {
|
||||
position: relative;
|
||||
padding: .5rem 1rem;
|
||||
left: auto;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
z-index: 9;
|
||||
border-bottom: 0;
|
||||
box-shadow: none;
|
||||
.navbar-brand {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
.progress {
|
||||
+ .progress {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.perfect-scrollbar-example {
|
||||
position: relative;
|
||||
max-height: 250px;
|
||||
background: $card-bg;
|
||||
}
|
||||
.scrollspy-example {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
margin-top: .5rem;
|
||||
overflow: auto;
|
||||
}
|
||||
.scrollspy-example-2 {
|
||||
position: relative;
|
||||
height: 350px;
|
||||
overflow: auto;
|
||||
}
|
||||
nav {
|
||||
.breadcrumb {
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.breadcrumb {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-breadcrumb {
|
||||
margin-bottom: 15px;
|
||||
.breadcrumb {
|
||||
padding: 0;
|
||||
background: $body-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.noble-ui-logo {
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
color: darken($primary, 50%);
|
||||
span {
|
||||
color: $primary;
|
||||
font-weight: 300;
|
||||
}
|
||||
&:hover {
|
||||
color: darken($primary, 50%);
|
||||
}
|
||||
&.logo-light {
|
||||
color: $body-color;
|
||||
}
|
||||
}
|
||||
|
||||
.buy-now-wrapper {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 35px;
|
||||
z-index: 99999;
|
||||
.rtl & {
|
||||
right: auto;
|
||||
left: 35px;
|
||||
}
|
||||
.btn {
|
||||
svg {
|
||||
width: 19px !important;
|
||||
height: 19px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
4
resources/sass/_functions.scss
Executable file
4
resources/sass/_functions.scss
Executable file
@ -0,0 +1,4 @@
|
||||
// Functions
|
||||
@function social-color($key: "twitter") {
|
||||
@return map-get($social-colors, $key);
|
||||
}
|
||||
169
resources/sass/_helpers.scss
Executable file
169
resources/sass/_helpers.scss
Executable file
@ -0,0 +1,169 @@
|
||||
// Utilities
|
||||
|
||||
.grid-margin {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.grid-margin-sm-0 {
|
||||
@media (min-width: 576px) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.grid-margin-md-0 {
|
||||
@media (min-width: 768px) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.grid-margin-lg-0 {
|
||||
@media (min-width: 992px) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.grid-margin-xl-0 {
|
||||
@media (min-width: 1200px) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.stretch-card {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: stretch;
|
||||
>.card{
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.img-lg {
|
||||
width: 92px;
|
||||
height: 92px;
|
||||
}
|
||||
.img-md {
|
||||
width: 75px;
|
||||
height: 92px;
|
||||
}
|
||||
.img-sm {
|
||||
width: 43px;
|
||||
height: 43px;
|
||||
}
|
||||
.img-xs {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
.img-ss {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.fw-boldest {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.tx-10 { font-size: 10px; }
|
||||
.tx-11 { font-size: 11px; }
|
||||
.tx-12 { font-size: 12px; }
|
||||
.tx-13 { font-size: 13px; }
|
||||
.tx-14 { font-size: 14px; }
|
||||
.tx-16 { font-size: 16px; }
|
||||
.tx-80 { font-size: 80px; }
|
||||
|
||||
|
||||
|
||||
svg.icon-xs {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
svg.icon-sm {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
svg.icon-md {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
svg.icon-lg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
svg.icon-xl {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
svg.icon-xxl {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.icon-xs {
|
||||
font-size: 14px;
|
||||
}
|
||||
.icon-sm {
|
||||
font-size: 16px;
|
||||
}
|
||||
.icon-md {
|
||||
font-size: 18px;
|
||||
}
|
||||
.icon-lg {
|
||||
font-size: 20px;
|
||||
}
|
||||
.icon-xl {
|
||||
font-size: 24px;
|
||||
}
|
||||
.icon-xxl {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
.cursor-default {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Small paddings and margins
|
||||
.pt-1px { padding-top: 1px }
|
||||
.pt-2px { padding-top: 2px }
|
||||
.pt-3px { padding-top: 3px }
|
||||
|
||||
.pb-1px { padding-bottom: 1px }
|
||||
.pb-2px { padding-bottom: 2px }
|
||||
.pb-3px { padding-bottom: 3px }
|
||||
|
||||
.mt-1px { margin-top: 1px }
|
||||
.mt-2px { margin-top: 2px }
|
||||
.mt-3px { margin-top: 3px }
|
||||
|
||||
.mb-1px { margin-bottom: 1px }
|
||||
.mb-2px { margin-bottom: 2px }
|
||||
.mb-3px { margin-bottom: 3px }
|
||||
|
||||
|
||||
|
||||
// Height
|
||||
.ht-5 { height: 5px; }
|
||||
.ht-10 { height: 10px; }
|
||||
.ht-15 { height: 15px; }
|
||||
.ht-20 { height: 20px; }
|
||||
.ht-30 { height: 30px; }
|
||||
.ht-40 { height: 40px; }
|
||||
.ht-50 { height: 50px; }
|
||||
.ht-60 { height: 60px; }
|
||||
.ht-70 { height: 70px; }
|
||||
.ht-80 { height: 80px; }
|
||||
.ht-90 { height: 90px; }
|
||||
.ht-100 { height: 100px; }
|
||||
82
resources/sass/_layouts.scss
Executable file
82
resources/sass/_layouts.scss
Executable file
@ -0,0 +1,82 @@
|
||||
.sidebar-folded {
|
||||
.sidebar {
|
||||
.sidebar-header {
|
||||
width: $sidebar-folded-width;
|
||||
.sidebar-brand {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-wrapper {
|
||||
width: calc(100% - #{$sidebar-folded-width});
|
||||
margin-left: $sidebar-folded-width;
|
||||
.navbar {
|
||||
width: calc(100% - #{$sidebar-folded-width});
|
||||
left: $sidebar-folded-width;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
&:not(.open-sidebar-folded) {
|
||||
.sidebar {
|
||||
width: $sidebar-folded-width;
|
||||
.sidebar-header {
|
||||
width: $sidebar-folded-width;
|
||||
.sidebar-brand {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
.sidebar-body {
|
||||
.nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
.link-title,
|
||||
.link-arrow {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
&.nav-category {
|
||||
visibility: hidden;
|
||||
&::before {
|
||||
content: '';
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: $text-muted;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 6px;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.sub-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-open, .settings-open {
|
||||
@media(max-width: 991px) {
|
||||
.main-wrapper {
|
||||
&::before {
|
||||
content: '';
|
||||
width: 100vw;
|
||||
background: rgba(0, 0, 0, .3);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
-webkit-transition: all 3s ease;
|
||||
transition: all 3s ease;
|
||||
z-index: 980;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
22
resources/sass/_misc.scss
Executable file
22
resources/sass/_misc.scss
Executable file
@ -0,0 +1,22 @@
|
||||
// Miscellaneous
|
||||
|
||||
*:-moz-full-screen,
|
||||
*:-webkit-full-screen,
|
||||
*:fullscreen *:-ms-full-screen {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
||||
pre {
|
||||
background-color: color(gray-lighter);
|
||||
padding: 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 5px;
|
||||
font-family: $font-family-sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: $font-size-base;
|
||||
border-radius: 4px;
|
||||
}
|
||||
169
resources/sass/_navbar.scss
Executable file
169
resources/sass/_navbar.scss
Executable file
@ -0,0 +1,169 @@
|
||||
.page-wrapper .navbar {
|
||||
width: calc(100% - #{$sidebar-width-lg});
|
||||
height: $navbar-height;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
left: $sidebar-width-lg;
|
||||
@media(max-width: 991px) {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
// width: calc(100% - #{$sidebar-width-lg});
|
||||
// height: $navbar-height;
|
||||
background: $card-bg;
|
||||
border-bottom: 1px solid $border-color;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// padding: 0;
|
||||
// position: fixed;
|
||||
// right: 0;
|
||||
// left: $sidebar-width-lg;
|
||||
z-index: 978;
|
||||
box-shadow: 3px 0 10px 0 rgba(183,192,206,.2);
|
||||
transition: width .1s ease, left .1s ease;
|
||||
|
||||
@media(max-width: 991px) {
|
||||
// width: 100%;
|
||||
// left: 0;
|
||||
.navbar-content {
|
||||
width: calc(100% - #{$sidebar-folded-width} - 1px);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-toggler {
|
||||
height: 100%;
|
||||
border-right: 1px solid $border-color;
|
||||
align-items: center;
|
||||
padding: 0 25px;
|
||||
display: none;
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: $text-muted;
|
||||
}
|
||||
@media(max-width: 991px) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.search-form {
|
||||
@extend .d-none;
|
||||
@extend .d-md-flex;
|
||||
@extend .align-items-center;
|
||||
width: 100%;
|
||||
margin-right: 60px;
|
||||
.input-group {
|
||||
.input-group-text {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
color: $text-muted;
|
||||
background: $input-bg;
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.form-control {
|
||||
border: 0;
|
||||
margin-top: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
@media(max-width: 991px) {
|
||||
width: calc(100% - #{$sidebar-folded-width} - 1px);
|
||||
}
|
||||
.navbar-nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: auto;
|
||||
.nav-item {
|
||||
position: relative;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
min-width: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.nav-link {
|
||||
color: $body-color;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
&:hover,
|
||||
&[aria-expanded="true"] {
|
||||
color: $primary;
|
||||
}
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.indicator {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 2px;
|
||||
.circle {
|
||||
background: $primary;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
&::before {
|
||||
background-color: $primary;
|
||||
content: "";
|
||||
display: table;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
@extend .pulse;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.dropdown {
|
||||
@media(max-width: 767px) {
|
||||
position: static;
|
||||
}
|
||||
.dropdown-menu {
|
||||
width: max-content;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
left: auto;
|
||||
@extend .dropdownAnimation;
|
||||
&::before {
|
||||
content: '';
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
background: $dropdown-bg;
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
right: 28px;
|
||||
transform: rotate(45deg);
|
||||
border-top: 1px solid $dropdown-border-color;
|
||||
border-left: 1px solid $dropdown-border-color;
|
||||
}
|
||||
@media(max-width: 767px) {
|
||||
right: 20px;
|
||||
width: calc(100% - 40px);
|
||||
&::before{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
56
resources/sass/_reset.scss
Executable file
56
resources/sass/_reset.scss
Executable file
@ -0,0 +1,56 @@
|
||||
// Reste styles
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn-group.open .dropdown-toggle,
|
||||
.btn:active,
|
||||
.btn:focus,
|
||||
.btn:hover,
|
||||
.btn:visited,
|
||||
a,
|
||||
a:active,
|
||||
a:checked,
|
||||
a:focus,
|
||||
a:hover,
|
||||
a:visited,
|
||||
body,
|
||||
button,
|
||||
button:active,
|
||||
button:hover,
|
||||
button:visited,
|
||||
div,
|
||||
input,
|
||||
input:active,
|
||||
input:hover,
|
||||
input:focus,
|
||||
input:visited,
|
||||
select,
|
||||
select:active,
|
||||
select:focus,
|
||||
select:visited,
|
||||
textarea,
|
||||
textarea:active,
|
||||
textarea:focus,
|
||||
textarea:visited {
|
||||
-webkit-box-shadow: none;
|
||||
-moz-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
select,
|
||||
.form-check-input {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill:active {
|
||||
-webkit-box-shadow: 0 0 0 30px $input-bg inset;
|
||||
-webkit-text-fill-color: $body-color;
|
||||
}
|
||||
587
resources/sass/_sidebar.scss
Executable file
587
resources/sass/_sidebar.scss
Executable file
@ -0,0 +1,587 @@
|
||||
.sidebar {
|
||||
width: $sidebar-width-lg;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
-webkit-transition: width .1s ease, margin .1s ease-in-out;
|
||||
transition: width .1s ease, margin .1s ease-in-out;
|
||||
z-index: 999;
|
||||
|
||||
.sidebar-header {
|
||||
background: $card-bg;
|
||||
height: $navbar-height;
|
||||
border-bottom: 1px solid $border-color;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 25px;
|
||||
border-right: 1px solid $border-color;
|
||||
z-index: 999;
|
||||
width: $sidebar-width-lg;
|
||||
-webkit-transition: width .1s ease;
|
||||
transition: width .1s ease;
|
||||
|
||||
.sidebar-open & {
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
-webkit-transition: opacity .5s ease;
|
||||
transition: opacity .5s ease;
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
color: darken($primary, 50%);
|
||||
span {
|
||||
color: $primary;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
.sidebar-toggler {
|
||||
cursor: pointer;
|
||||
width: 18px;
|
||||
span {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
height: 2px;
|
||||
background: $text-muted;
|
||||
-webkit-transition: all .3s;
|
||||
transition: all .3s;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
span + span {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
&.active span:nth-child(1) {
|
||||
-webkit-animation: ease .6s top forwards;
|
||||
animation: ease .6s top forwards;
|
||||
}
|
||||
|
||||
&.not-active span:nth-child(1) {
|
||||
-webkit-animation: ease .6s top-2 forwards;
|
||||
animation: ease .6s top-2 forwards;
|
||||
}
|
||||
|
||||
&.active span:nth-child(2) {
|
||||
-webkit-animation: ease .6s scaled forwards;
|
||||
animation: ease .6s scaled forwards;
|
||||
}
|
||||
|
||||
&.not-active span:nth-child(2) {
|
||||
-webkit-animation: ease .6s scaled-2 forwards;
|
||||
animation: ease .6s scaled-2 forwards;
|
||||
}
|
||||
|
||||
&.active span:nth-child(3) {
|
||||
-webkit-animation: ease .6s bottom forwards;
|
||||
animation: ease .6s bottom forwards;
|
||||
}
|
||||
|
||||
&.not-active span:nth-child(3) {
|
||||
-webkit-animation: ease .6s bottom-2 forwards;
|
||||
animation: ease .6s bottom-2 forwards;
|
||||
}
|
||||
|
||||
@-webkit-keyframes top {
|
||||
0% {
|
||||
top: 0;
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
50% {
|
||||
top: 6px;
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
top: 6px;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes top {
|
||||
0% {
|
||||
top: 0;
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
50% {
|
||||
top: 6px;
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
top: 6px;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes top-2 {
|
||||
0% {
|
||||
top: 6px;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
50% {
|
||||
top: 6px;
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
top: 0;
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes top-2 {
|
||||
0% {
|
||||
top: 6px;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
50% {
|
||||
top: 6px;
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
top: 0;
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bottom {
|
||||
0% {
|
||||
bottom: 0;
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
50% {
|
||||
bottom: 6px;
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
bottom: 6px;
|
||||
-webkit-transform: rotate(135deg);
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bottom {
|
||||
0% {
|
||||
bottom: 0;
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
50% {
|
||||
bottom: 6px;
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
bottom: 6px;
|
||||
-webkit-transform: rotate(135deg);
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bottom-2 {
|
||||
0% {
|
||||
bottom: 6px;
|
||||
-webkit-transform: rotate(135deg);
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
50% {
|
||||
bottom: 6px;
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
bottom: 0;
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bottom-2 {
|
||||
0% {
|
||||
bottom: 6px;
|
||||
-webkit-transform: rotate(135deg);
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
50% {
|
||||
bottom: 6px;
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
bottom: 0;
|
||||
-webkit-transform: rotate(0);
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes scaled {
|
||||
50% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaled {
|
||||
50% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes scaled-2 {
|
||||
0% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaled-2 {
|
||||
0% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sidebar-body {
|
||||
max-height: calc(100% - #{$navbar-height});
|
||||
position: relative;
|
||||
border-right: 1px solid $border-color;
|
||||
height: 100%;
|
||||
-webkit-box-shadow: 0 8px 10px 0 rgba(183,192,206,.2);
|
||||
box-shadow: 0 8px 10px 0 rgba(183,192,206,.2);
|
||||
background: $card-bg;
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 25px 25px 50px 25px;
|
||||
.nav-item {
|
||||
position: relative;
|
||||
.nav-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
height: 32px;
|
||||
white-space: nowrap;
|
||||
color: $body-color;
|
||||
.link-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: rgba(233, 236, 239, 0.21);
|
||||
position: absolute;
|
||||
color: inherit;
|
||||
}
|
||||
.link-title {
|
||||
margin-left: 30px;
|
||||
font-size: 14px;
|
||||
-webkit-transition: all .2s ease-in-out;
|
||||
transition: all .2s ease-in-out;
|
||||
}
|
||||
.link-arrow {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-left: auto;
|
||||
-webkit-transition: all .3s ease;
|
||||
-webkit-transition: all .3s ease-in-out;
|
||||
transition: all .3s ease-in-out;
|
||||
color: inherit;
|
||||
}
|
||||
.link-icon,
|
||||
.link-title,
|
||||
.link-arrow {
|
||||
-webkit-transition: all .3s ease;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
&[aria-expanded="true"] {
|
||||
color: $primary;
|
||||
.link-arrow {
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-category {
|
||||
color: $text-muted;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
letter-spacing: .5px;
|
||||
margin-bottom: 5px;
|
||||
height: 15px;
|
||||
&:not(:first-child) {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.nav-link {
|
||||
color: $primary;
|
||||
.link-title {
|
||||
margin-left: 31px;
|
||||
}
|
||||
.link-icon {
|
||||
color: $primary;
|
||||
fill: rgba(239, 243, 255, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.nav-link {
|
||||
color: $primary;
|
||||
&::before {
|
||||
content: '';
|
||||
width: 3px;
|
||||
height: 26px;
|
||||
background: $primary;
|
||||
position: absolute;
|
||||
left: -25px;
|
||||
}
|
||||
.link-icon {
|
||||
fill: rgba(239, 243, 255, .5);
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.sub-menu {
|
||||
padding: 0 0 15px 33px;
|
||||
.nav-item {
|
||||
position: relative;
|
||||
.nav-link {
|
||||
height: 25px;
|
||||
color: $body-color;
|
||||
font-size: 13px;
|
||||
-webkit-transition: all .3s ease-in-out;
|
||||
transition: all .3s ease-in-out;
|
||||
&::before {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
border: 1px solid darken($border-color, 20%);
|
||||
position: absolute;
|
||||
left: -29px;
|
||||
top: 10px;
|
||||
-webkit-transition: all .7s ease-in-out;
|
||||
-webkit-transition: all .4s ease-in-out;
|
||||
transition: all .4s ease-in-out;
|
||||
}
|
||||
&.active {
|
||||
color: $primary;
|
||||
&::before {
|
||||
border: 1px solid $primary;
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.nav-link {
|
||||
color: $primary;
|
||||
margin-left: 3px;
|
||||
&::before {
|
||||
border: 1px solid $primary;
|
||||
background: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media(max-width: 991px) {
|
||||
z-index: 999;
|
||||
margin-left: -#{$sidebar-width-lg};
|
||||
visibility: hidden;
|
||||
.sidebar-open & {
|
||||
margin-left: 0;
|
||||
visibility: visible;
|
||||
}
|
||||
.sidebar-header {
|
||||
// transform: translateX($sidebar-folded-width);
|
||||
// visibility: visible;
|
||||
// transition: none;
|
||||
// .sidebar-open & {
|
||||
// transform: translateX(0);
|
||||
// }
|
||||
}
|
||||
.sidebar-body {
|
||||
.nav {
|
||||
.nav-item {
|
||||
width: auto;
|
||||
.nav-link {
|
||||
.link-icon {
|
||||
-webkit-transition: none;
|
||||
transition: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-dark {
|
||||
.sidebar {
|
||||
.sidebar-header {
|
||||
background: $sidebar-dark-bg;
|
||||
border-bottom: 1px solid rgba($border-color, .1);
|
||||
border-right: 1px solid rgba($border-color, .1);
|
||||
.sidebar-brand {
|
||||
color: $light;
|
||||
}
|
||||
.sidebar-toggler {
|
||||
span {
|
||||
background: $text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sidebar-body {
|
||||
background: $sidebar-dark-bg;
|
||||
border-right: 1px solid rgba($border-color, .1);
|
||||
.nav {
|
||||
.nav-item {
|
||||
&.nav-category {
|
||||
color: $white;
|
||||
}
|
||||
.nav-link {
|
||||
color: $text-muted;
|
||||
svg {
|
||||
fill: none;
|
||||
}
|
||||
&[aria-expanded="true"] {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
&:hover,
|
||||
&.active {
|
||||
.nav-link {
|
||||
svg {
|
||||
fill: rgba($primary, .2);
|
||||
}
|
||||
.link-title {
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Right sidebar
|
||||
.settings-sidebar {
|
||||
position: fixed;
|
||||
right: -232px;
|
||||
top: 130px;
|
||||
width: 232px;
|
||||
background: $white;
|
||||
-webkit-box-shadow: -3px 0 10px 0 rgba(183,192,206,0.2);
|
||||
box-shadow: -3px 0 10px 0 rgba(183,192,206,0.2);
|
||||
z-index: 999;
|
||||
border-radius: 0 0 0 4px;
|
||||
-webkit-transition: all .2s ease-in-out;
|
||||
transition: all .2s ease-in-out;
|
||||
.settings-open & {
|
||||
right: 0;
|
||||
}
|
||||
.sidebar-body {
|
||||
position: relative;
|
||||
padding: 18px;
|
||||
.settings-sidebar-toggler {
|
||||
position: absolute;
|
||||
left: -44px;
|
||||
top: 0;
|
||||
padding: 12px;
|
||||
border-radius: 4px 0 0 4px;
|
||||
background: $white;
|
||||
-webkit-box-shadow: -3px 0 10px 0 rgba(183,192,206,0.2);
|
||||
box-shadow: -3px 0 10px 0 rgba(183,192,206,0.2);
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: $text-muted;
|
||||
@extend .infinite-spin;
|
||||
}
|
||||
}
|
||||
.theme-wrapper {
|
||||
.theme-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-bottom: 19px;
|
||||
border-radius: 6px;
|
||||
border: 3px solid $light;
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba($primary, 0);
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&.active {
|
||||
border: 3px solid lighten($primary, 15%);
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
}
|
||||
&:hover {
|
||||
&::after {
|
||||
background: rgba($primary, .2);
|
||||
-webkit-transition: all .3s ease-in-out;
|
||||
transition: all .3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
80
resources/sass/_spinner.scss
Executable file
80
resources/sass/_spinner.scss
Executable file
@ -0,0 +1,80 @@
|
||||
.loader-wrapper {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
background: $body-bg;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.loaded & {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
-webkit-transition: all .8s ease-out;
|
||||
transition: all .8s ease-out
|
||||
}
|
||||
.loader {
|
||||
font-size: 10px;
|
||||
margin: 50px auto;
|
||||
text-indent: -9999em;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background: $primary;
|
||||
background: -moz-linear-gradient(left, $primary 10%, rgba(0,0,0, 0) 42%);
|
||||
background: -webkit-linear-gradient(left, $primary 10%, rgba(0,0,0, 0) 42%);
|
||||
background: -o-linear-gradient(left, $primary 10%, rgba(0,0,0, 0) 42%);
|
||||
background: -ms-linear-gradient(left, $primary 10%, rgba(0,0,0, 0) 42%);
|
||||
background: linear-gradient(to right, $primary 10%, rgba(0,0,0, 0) 42%);
|
||||
-webkit-animation: loading 1.4s infinite linear;
|
||||
animation: loading 1.4s infinite linear;
|
||||
-webkit-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
&.loader:before {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
background: $primary;
|
||||
border-radius: 100% 0 0 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
content: '';
|
||||
}
|
||||
&.loader:after {
|
||||
background: $body-bg;
|
||||
width: 75%;
|
||||
height: 75%;
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes loading {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes loading {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
13
resources/sass/_typography.scss
Executable file
13
resources/sass/_typography.scss
Executable file
@ -0,0 +1,13 @@
|
||||
// Typography
|
||||
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
// Social colors
|
||||
@each $color, $value in $social-colors {
|
||||
.text-#{$color} {
|
||||
color: $value;
|
||||
}
|
||||
}
|
||||
32
resources/sass/_utilities.scss
Executable file
32
resources/sass/_utilities.scss
Executable file
@ -0,0 +1,32 @@
|
||||
// Custom utilities
|
||||
|
||||
$utilities: map-merge(
|
||||
$utilities,
|
||||
(
|
||||
"border": map-merge(
|
||||
map-get($utilities, "border"),
|
||||
( responsive: true ),
|
||||
),
|
||||
"border-top": map-merge(
|
||||
map-get($utilities, "border-top"),
|
||||
( responsive: true ),
|
||||
),
|
||||
"border-end": map-merge(
|
||||
map-get($utilities, "border-end"),
|
||||
( responsive: true ),
|
||||
),
|
||||
"border-bottom": map-merge(
|
||||
map-get($utilities, "border-bottom"),
|
||||
( responsive: true ),
|
||||
),
|
||||
"border-start": map-merge(
|
||||
map-get($utilities, "border-start"),
|
||||
( responsive: true ),
|
||||
),
|
||||
"background-gray": (
|
||||
property: background-color,
|
||||
class: bg-gray,
|
||||
values: $grays
|
||||
),
|
||||
)
|
||||
);
|
||||
353
resources/sass/_variables.scss
Executable file
353
resources/sass/_variables.scss
Executable file
@ -0,0 +1,353 @@
|
||||
// Light theme variables
|
||||
|
||||
|
||||
|
||||
// Bootstrap base colors
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #7987a1 !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #212a3a !default;
|
||||
$gray-900: #060c17 !default;
|
||||
$black: #000 !default;
|
||||
$text-muted: $gray-600 !default;
|
||||
|
||||
|
||||
// Bootstrap custom colors
|
||||
$blue: #0d6efd !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #d63384 !default;
|
||||
$red: #dc3545 !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #ffc107 !default;
|
||||
$green: #198754 !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #0dcaf0 !default;
|
||||
|
||||
|
||||
|
||||
// --- Bootstrap Theme Colors --- //
|
||||
//
|
||||
$primary: #6571ff !default;
|
||||
$secondary: $gray-600 !default;
|
||||
$success: #05a34a !default;
|
||||
$info: #66d1d1 !default;
|
||||
$warning: #fbbc06 !default;
|
||||
$danger: #ff3366 !default;
|
||||
$light: $gray-200 !default;
|
||||
$dark: $gray-900 !default;
|
||||
//
|
||||
// --- Bootstrap Theme Colors --- //
|
||||
|
||||
|
||||
|
||||
// Social colors
|
||||
$social-colors: (
|
||||
"facebook": #3b5998,
|
||||
"twitter": #1da1f2,
|
||||
"google": #dc4e41,
|
||||
"youtube": #f00,
|
||||
"vimeo": #1ab7ea,
|
||||
"dribbble": #ea4c89,
|
||||
"github": #181717,
|
||||
"instagram": #e4405f,
|
||||
"pinterest": #bd081c,
|
||||
"flickr": #0063dc,
|
||||
"bitbucket": #0052cc,
|
||||
"linkedin": #0077b5
|
||||
) !default;
|
||||
|
||||
|
||||
// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
|
||||
// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
|
||||
$min-contrast-ratio: 3 !default;
|
||||
|
||||
|
||||
// Options
|
||||
//
|
||||
// Quickly modify global styling by enabling or disabling optional features.
|
||||
$enable-gradients: false !default;
|
||||
$enable-negative-margins: true !default;
|
||||
|
||||
|
||||
// Spacing
|
||||
//
|
||||
// Control the default styling of most Bootstrap elements by modifying these
|
||||
// variables. Mostly focused on spacing.
|
||||
// You can add more entries to the $spacers map, should you need more variation.
|
||||
$spacer: 1rem !default;
|
||||
$spacers: (
|
||||
0: 0,
|
||||
1: $spacer * .25,
|
||||
2: $spacer * .5,
|
||||
3: $spacer,
|
||||
4: $spacer * 1.5,
|
||||
5: $spacer * 3,
|
||||
6: ($spacer * 4.5),
|
||||
7: ($spacer * 6)
|
||||
);
|
||||
|
||||
|
||||
// Position
|
||||
//
|
||||
// Define the edge positioning anchors of the position utilities.
|
||||
$position-values: (
|
||||
0: 0,
|
||||
10: 10%,
|
||||
20: 20%,
|
||||
25: 25%,
|
||||
30: 30%,
|
||||
40: 40%,
|
||||
50: 50%,
|
||||
60: 60%,
|
||||
70: 70%,
|
||||
75: 75%,
|
||||
80: 80%,
|
||||
90: 90%,
|
||||
100: 100%
|
||||
) !default;
|
||||
|
||||
|
||||
// Body
|
||||
//
|
||||
// Settings for the `<body>` element.
|
||||
$body-bg: #f9fafb !default;
|
||||
$body-color: $black !default;
|
||||
|
||||
|
||||
// Links
|
||||
//
|
||||
// Style anchor elements.
|
||||
$link-decoration: none !default;
|
||||
// $link-hover-decoration: underline !default;
|
||||
|
||||
|
||||
// Paragraphs
|
||||
//
|
||||
// Style p element.
|
||||
$paragraph-margin-bottom: 0 !default;
|
||||
|
||||
|
||||
// Grid columns
|
||||
$grid-gutter-width: 1.5rem !default;
|
||||
|
||||
|
||||
// Components
|
||||
//
|
||||
// Define common padding and border radius sizes and more.
|
||||
|
||||
// Border
|
||||
$border-color: $gray-200 !default;
|
||||
|
||||
// Border Radiues
|
||||
$border-radius: .25rem !default;
|
||||
|
||||
|
||||
$action-transition-duration: 0.2s;
|
||||
$action-transition-timing-function: ease;
|
||||
|
||||
|
||||
// Typography
|
||||
//
|
||||
// Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
// Font family
|
||||
$font-family-sans-serif: "Roboto", Helvetica, sans-serif !default;
|
||||
|
||||
$font-size-base: 0.875rem !default; // 14px
|
||||
$font-size-lg: 1rem !default; // 16px
|
||||
$font-size-sm: 0.812rem !default; // 13px
|
||||
|
||||
$font-weight-lighter: lighter !default;
|
||||
$font-weight-light: 300 !default;
|
||||
$font-weight-normal: 400 !default;
|
||||
$font-weight-bold: 500 !default;
|
||||
$font-weight-bolder: 700 !default;
|
||||
$font-weight-boldest: 900 !default;
|
||||
|
||||
$font-weight-base: $font-weight-normal !default;
|
||||
|
||||
|
||||
// Heading sizes
|
||||
$h1-font-size: 2.5rem !default;
|
||||
$h2-font-size: 2rem !default;
|
||||
$h3-font-size: 1.5rem !default;
|
||||
$h4-font-size: 1.25rem !default;
|
||||
$h5-font-size: 1rem !default;
|
||||
$h6-font-size: $font-size-base !default;
|
||||
|
||||
$headings-margin-bottom: 0 !default;
|
||||
$headings-font-weight: 500 !default;
|
||||
|
||||
|
||||
$hr-opacity: .1 !default;
|
||||
|
||||
|
||||
// Tables
|
||||
//
|
||||
// Customizes the `.table` component with basic values, each used across all table variations.
|
||||
|
||||
$table-cell-padding-y: .85rem !default;
|
||||
$table-cell-padding-x: .85rem !default;
|
||||
$table-cell-padding-y-sm: .55rem !default;
|
||||
$table-cell-padding-x-sm: .55rem !default;
|
||||
|
||||
$table-striped-bg: $gray-200 !default;
|
||||
$table-active-bg: $gray-300 !default;
|
||||
$table-hover-bg: $gray-200 !default;
|
||||
|
||||
$table-group-separator-color: $border-color;
|
||||
|
||||
|
||||
// Buttons + Forms
|
||||
//
|
||||
// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
|
||||
|
||||
$input-btn-padding-y: .469rem !default;
|
||||
$input-btn-padding-x: .8rem !default;
|
||||
|
||||
$input-btn-focus-box-shadow: none !default;
|
||||
$input-btn-focus-width: 0 !default;
|
||||
|
||||
$input-placeholder-color: $gray-500 !default;
|
||||
|
||||
$input-btn-padding-y-xs: .313rem !default;
|
||||
$input-btn-padding-x-xs: .8rem !default;
|
||||
$input-btn-font-size-xs: .75rem !default;
|
||||
|
||||
$input-btn-padding-y-sm: .391rem !default;
|
||||
$input-btn-padding-x-sm: .8rem !default;
|
||||
$input-btn-font-size-sm: $font-size-sm !default;
|
||||
|
||||
$input-btn-padding-y-lg: .5rem !default;
|
||||
$input-btn-padding-x-lg: .8rem !default;
|
||||
$input-btn-font-size-lg: $font-size-lg !default;
|
||||
|
||||
|
||||
// Buttons
|
||||
//
|
||||
// For each of Bootstrap's buttons, define text, background, and border color.
|
||||
|
||||
$btn-font-weight: $font-weight-normal !default;
|
||||
|
||||
$btn-padding-y-xs: $input-btn-padding-y-xs !default;
|
||||
$btn-padding-x-xs: $input-btn-padding-x-xs !default;
|
||||
$btn-font-size-xs: $input-btn-font-size-xs !default;
|
||||
|
||||
// Allows for customizing button radius independently from global border radius
|
||||
$btn-border-radius: $border-radius !default;
|
||||
$btn-border-radius-sm: $border-radius !default;
|
||||
$btn-border-radius-lg: $border-radius !default;
|
||||
|
||||
|
||||
// Forms
|
||||
|
||||
$input-padding-y-xs: $input-btn-padding-y-xs !default;
|
||||
$input-padding-x-xs: $input-btn-padding-x-xs !default;
|
||||
$input-font-size-xs: $input-btn-font-size-xs !default;
|
||||
|
||||
$input-bg: $white !default;
|
||||
$input-border-color: $border-color !default;
|
||||
$input-focus-border-color: $gray-400 !default;
|
||||
|
||||
$input-border-radius: $btn-border-radius !default;
|
||||
$input-border-radius-sm: $btn-border-radius-sm !default;
|
||||
$input-border-radius-lg: $btn-border-radius-lg !default;
|
||||
|
||||
// form-check
|
||||
$form-check-input-width: 1.3em !default;
|
||||
$form-check-input-border-radius: .15em !default;
|
||||
|
||||
// Input-group
|
||||
$input-group-addon-padding-x: .563rem !default;
|
||||
$input-group-addon-bg: $gray-100 !default;
|
||||
|
||||
|
||||
|
||||
// Navs
|
||||
$nav-tabs-link-bg: $gray-100; // custom variable
|
||||
$nav-tabs-link-border-color: $border-color $border-color $gray-300; // custom variable
|
||||
$nav-tabs-link-active-bg: $white;
|
||||
|
||||
|
||||
// Dropdowns
|
||||
$dropdown-border-color: #f2f4f9;
|
||||
$dropdown-box-shadow: 0 5px 10px 0 rgba(183,192,206,.2);
|
||||
|
||||
|
||||
// Pagination
|
||||
$pagination-padding-y: .469rem !default;
|
||||
$pagination-padding-x: 1rem !default;
|
||||
$pagination-padding-y-sm: .391rem !default;
|
||||
$pagination-padding-x-sm: .75rem !default;
|
||||
$pagination-padding-y-lg: .5rem !default;
|
||||
$pagination-padding-x-lg: 1.1rem !default;
|
||||
$pagination-color: $primary;
|
||||
$pagination-active-bg: $primary;
|
||||
$pagination-active-border-color: $primary;
|
||||
|
||||
|
||||
// Cards
|
||||
$card-box-shadow: 0 0 10px 0 rgba(183,192,206,.2); // custom variable
|
||||
$card-spacer-y: 1.5rem !default;
|
||||
$card-spacer-x: 1.5rem !default;
|
||||
$card-title-spacer-y: .875rem !default;
|
||||
$card-border-color: #f2f4f9 !default;
|
||||
$card-cap-padding-y: .875rem !default;
|
||||
$card-cap-padding-x: $card-spacer-x !default;
|
||||
$card-cap-bg: rgba($black, .01) !default;
|
||||
|
||||
|
||||
// Accordion
|
||||
$accordion-bg: $white !default;
|
||||
$accordion-border-color: $border-color !default;
|
||||
$accordion-icon-width: .875rem !default;
|
||||
|
||||
|
||||
// Popovers
|
||||
$popover-border-color: $border-color !default;
|
||||
$popover-header-bg: $gray-200 !default;
|
||||
|
||||
|
||||
|
||||
// Badges
|
||||
$badge-font-size: .8em !default;
|
||||
$badge-font-weight: $font-weight-bold !default;
|
||||
|
||||
|
||||
// Modals
|
||||
$modal-content-border-color: $border-color !default;
|
||||
$modal-fade-transform: scale(.8) !default;
|
||||
$modal-transition: transform .4s ease !default;
|
||||
// Modals
|
||||
|
||||
|
||||
// List group
|
||||
$list-group-item-padding-y: .75rem !default;
|
||||
$list-group-item-padding-x: 1.25rem !default;
|
||||
|
||||
|
||||
// Close
|
||||
$btn-close-width: .8em !default;
|
||||
$btn-close-color: $black !default;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Navbar
|
||||
$navbar-height: 60px;
|
||||
|
||||
// Sidebar
|
||||
$sidebar-width-lg: 240px;
|
||||
$sidebar-folded-width: 70px;
|
||||
$sidebar-dark-bg: #0c1427;
|
||||
63
resources/sass/_vertical-wrapper.scss
Executable file
63
resources/sass/_vertical-wrapper.scss
Executable file
@ -0,0 +1,63 @@
|
||||
.main-wrapper {
|
||||
display: flex;
|
||||
// overflow: hidden; // commented for fixing content-nav sticky position
|
||||
.page-wrapper {
|
||||
min-height: 100vh;
|
||||
background: $body-bg;
|
||||
width: calc(100% - #{$sidebar-width-lg});
|
||||
margin-left: $sidebar-width-lg;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
-webkit-transition: margin .1s ease, width .1s ease;
|
||||
transition: margin .1s ease, width .1s ease;
|
||||
.page-content {
|
||||
flex-grow: 1;
|
||||
padding: 25px;
|
||||
margin-top: $navbar-height;
|
||||
@media(max-width: 767px) {
|
||||
padding: 25px 15px;
|
||||
}
|
||||
}
|
||||
&.full-page {
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
.page-content {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
@media(max-width: 991px) {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
.main-content {
|
||||
}
|
||||
.content-nav-wrapper {
|
||||
padding: 0;
|
||||
position: sticky;
|
||||
top: 80px;
|
||||
height: calc(100vh - 6rem);
|
||||
overflow-y: auto;
|
||||
border-left: 1px solid $border-color;
|
||||
display: none;
|
||||
@media(min-width: 1200px) {
|
||||
display: block;
|
||||
}
|
||||
.content-nav {
|
||||
padding: 0px 25px;
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
padding: 0;
|
||||
height: 30px;
|
||||
white-space: nowrap;
|
||||
color: $text-muted;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
125
resources/sass/app.scss
Executable file
125
resources/sass/app.scss
Executable file
@ -0,0 +1,125 @@
|
||||
/*
|
||||
* NobleUI - Laravel Admin Dashboard Template v2.2
|
||||
* Copyright © 2023 NobleUI
|
||||
* Licensed under ThemeForest License
|
||||
*/
|
||||
|
||||
// Theme style for demo1 (Vertical Menu - Light | Light-RTL | Dark-sidebar)
|
||||
|
||||
|
||||
|
||||
|
||||
// Custom variables
|
||||
@import './variables';
|
||||
|
||||
|
||||
// Bootstrap stylesheets
|
||||
@import "~bootstrap/scss/functions";
|
||||
@import "~bootstrap/scss/variables";
|
||||
@import "~bootstrap/scss/maps";
|
||||
@import "~bootstrap/scss/mixins";
|
||||
@import "~bootstrap/scss/utilities";
|
||||
|
||||
// Bootstrap layout & components
|
||||
@import "~bootstrap/scss/root";
|
||||
@import "~bootstrap/scss/reboot";
|
||||
@import "~bootstrap/scss/type";
|
||||
@import "~bootstrap/scss/images";
|
||||
@import "~bootstrap/scss/containers";
|
||||
@import "~bootstrap/scss/grid";
|
||||
@import "~bootstrap/scss/tables";
|
||||
@import "~bootstrap/scss/forms";
|
||||
@import "~bootstrap/scss/buttons";
|
||||
@import "~bootstrap/scss/transitions";
|
||||
@import "~bootstrap/scss/dropdown";
|
||||
@import "~bootstrap/scss/button-group";
|
||||
@import "~bootstrap/scss/nav";
|
||||
@import "~bootstrap/scss/navbar";
|
||||
@import "~bootstrap/scss/card";
|
||||
@import "~bootstrap/scss/accordion";
|
||||
@import "~bootstrap/scss/breadcrumb";
|
||||
@import "~bootstrap/scss/pagination";
|
||||
@import "~bootstrap/scss/badge";
|
||||
@import "~bootstrap/scss/alert";
|
||||
@import "~bootstrap/scss/progress";
|
||||
@import "~bootstrap/scss/list-group";
|
||||
@import "~bootstrap/scss/close";
|
||||
@import "~bootstrap/scss/toasts";
|
||||
@import "~bootstrap/scss/modal";
|
||||
@import "~bootstrap/scss/tooltip";
|
||||
@import "~bootstrap/scss/popover";
|
||||
@import "~bootstrap/scss/carousel";
|
||||
@import "~bootstrap/scss/spinners";
|
||||
|
||||
// Bootstrap helpers
|
||||
@import "~bootstrap/scss/helpers";
|
||||
|
||||
// Bootstrap utilities
|
||||
@import './utilities';
|
||||
@import "~bootstrap/scss/utilities/api";
|
||||
|
||||
|
||||
// Custom mixins
|
||||
@import './mixins/animation';
|
||||
@import './mixins/buttons';
|
||||
@import './mixins/misc';
|
||||
@import './mixins/width';
|
||||
|
||||
// Core styles
|
||||
@import './background';
|
||||
@import './reset';
|
||||
@import './functions';
|
||||
@import './misc';
|
||||
@import './helpers';
|
||||
@import './typography';
|
||||
@import './demo';
|
||||
@import './spinner';
|
||||
|
||||
// Layout
|
||||
@import './vertical-wrapper';
|
||||
@import './navbar';
|
||||
@import './sidebar';
|
||||
@import './layouts';
|
||||
|
||||
// Custom components
|
||||
@import "./components/badges";
|
||||
@import "./components/bootstrap-alert";
|
||||
@import "./components/breadcrumbs";
|
||||
@import "./components/buttons";
|
||||
@import "./components/cards";
|
||||
@import "./components/dashboard";
|
||||
@import "./components/dropdown";
|
||||
@import "./components/forms";
|
||||
@import "./components/icons";
|
||||
@import "./components/nav";
|
||||
@import "./components/pagination";
|
||||
@import "./components/tables";
|
||||
@import "./components/timeline";
|
||||
@import "./components/chat";
|
||||
@import "./components/auth";
|
||||
|
||||
// Email app
|
||||
@import './components/email/inbox';
|
||||
|
||||
// 3rd-Party plugin overrides
|
||||
@import "./components/plugin-overrides/ace";
|
||||
@import "./components/plugin-overrides/apex-charts";
|
||||
@import "./components/plugin-overrides/data-tables";
|
||||
@import "./components/plugin-overrides/dropify";
|
||||
@import "./components/plugin-overrides/dropzone";
|
||||
@import "./components/plugin-overrides/flatpickr";
|
||||
@import "./components/plugin-overrides/full-calendar";
|
||||
@import "./components/plugin-overrides/jquery-flot";
|
||||
@import "./components/plugin-overrides/peity";
|
||||
@import "./components/plugin-overrides/perfect-scrollbar";
|
||||
@import "./components/plugin-overrides/sweet-alert";
|
||||
@import "./components/plugin-overrides/select2";
|
||||
@import "./components/plugin-overrides/easymde";
|
||||
@import "./components/plugin-overrides/tags-input";
|
||||
@import "./components/plugin-overrides/tinymce";
|
||||
@import "./components/plugin-overrides/typeahead";
|
||||
@import "./components/plugin-overrides/wizard";
|
||||
|
||||
|
||||
// Custom scss
|
||||
@import "./custom";
|
||||
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;
|
||||
}
|
||||
107
resources/sass/mixins/_animation.scss
Executable file
107
resources/sass/mixins/_animation.scss
Executable file
@ -0,0 +1,107 @@
|
||||
// Animation mixins
|
||||
|
||||
@keyframes dropdownAnimation {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 20px, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transform: translate3d(0, 0px , 0);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdownAnimation {
|
||||
-webkit-animation-name: dropdownAnimation;
|
||||
animation-name: dropdownAnimation;
|
||||
-webkit-animation-duration: $action-transition-duration;
|
||||
animation-duration: $action-transition-duration;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fadeOut {
|
||||
animation-name: fadeOUt;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fadeInUp {
|
||||
animation-name: fadeInUp;
|
||||
}
|
||||
|
||||
.infinite-spin {
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
animation-name: spin;
|
||||
animation-duration: 3s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
|
||||
@mixin transition($settings) {
|
||||
-webkit-transition: $settings;
|
||||
-moz-transition: $settings;
|
||||
-ms-transition: $settings;
|
||||
-o-transition: $settings;
|
||||
transition: $settings;
|
||||
}
|
||||
|
||||
.pulse {
|
||||
$dim : 7px;
|
||||
$mult : 4;
|
||||
@keyframes pulse{
|
||||
0% {
|
||||
opacity: 1;
|
||||
width: $dim;
|
||||
height: $dim;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
95% {
|
||||
opacity: 0.1;
|
||||
left: -(($dim * $mult) - $dim) * .5;
|
||||
top: -(($dim * $mult) - $dim) * .5;
|
||||
width: $dim * $mult;
|
||||
height: $dim * $mult;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
width: $dim;
|
||||
height: $dim;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
animation-name: pulse;
|
||||
animation-duration: .9s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: ease-out;
|
||||
}
|
||||
56
resources/sass/mixins/_buttons.scss
Executable file
56
resources/sass/mixins/_buttons.scss
Executable file
@ -0,0 +1,56 @@
|
||||
@mixin social-button($color) {
|
||||
background: $color;
|
||||
color: $white;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: darken($color, 10%);
|
||||
color: $white;
|
||||
}
|
||||
&.btn-social-icon-text {
|
||||
padding: 0 1.5rem 0 0;
|
||||
background: lighten($color, 10%);
|
||||
i {
|
||||
background: $color;
|
||||
padding: .75rem;
|
||||
display: inline-block;
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin social-outline-button($color) {
|
||||
border: 1px solid $color;
|
||||
color: $color;
|
||||
&:hover {
|
||||
background: $color;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-inverse-variant($color, $color-hover: $white) {
|
||||
background-color: rgba($color, 0.2);
|
||||
background-image: none;
|
||||
border-color: rgba($color, 0);
|
||||
&:not(.btn-inverse-light) {
|
||||
color: $color;
|
||||
}
|
||||
&:hover,
|
||||
&.active,
|
||||
&:active,
|
||||
.show > &.dropdown-toggle {
|
||||
background-color: rgba($color, 0.3);
|
||||
border-color: rgba($color, 0);
|
||||
}
|
||||
|
||||
&.focus,
|
||||
&:focus {
|
||||
box-shadow: 0 0 0 3px rgba($color, .5);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $color;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
72
resources/sass/mixins/_misc.scss
Executable file
72
resources/sass/mixins/_misc.scss
Executable file
@ -0,0 +1,72 @@
|
||||
// Miscellaneous Mixins
|
||||
|
||||
// general transform
|
||||
@mixin transform($transforms) {
|
||||
-moz-transform: $transforms;
|
||||
-o-transform: $transforms;
|
||||
-ms-transform: $transforms;
|
||||
-webkit-transform: $transforms;
|
||||
transform: $transforms;
|
||||
}
|
||||
|
||||
// rotate
|
||||
@mixin rotate ($deg) {
|
||||
@include transform(rotate(#{$deg}deg));
|
||||
}
|
||||
|
||||
// scale
|
||||
@mixin scale($scale) {
|
||||
@include transform(scale($scale));
|
||||
}
|
||||
// translate
|
||||
@mixin translate ($x, $y) {
|
||||
@include transform(translate($x, $y));
|
||||
}
|
||||
// skew
|
||||
@mixin skew ($x, $y) {
|
||||
@include transform(skew(#{$x}deg, #{$y}deg));
|
||||
}
|
||||
//transform origin
|
||||
@mixin transform-origin ($origin) {
|
||||
moz-transform-origin: $origin;
|
||||
-o-transform-origin: $origin;
|
||||
-ms-transform-origin: $origin;
|
||||
-webkit-transform-origin: $origin;
|
||||
transform-origin: $origin;
|
||||
}
|
||||
//Ellipsis
|
||||
%ellipsor{
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
max-width:100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
@mixin placeholder {
|
||||
&::-webkit-input-placeholder {
|
||||
@content
|
||||
}
|
||||
&:-moz-placeholder {
|
||||
@content
|
||||
}
|
||||
&::-moz-placeholder {
|
||||
@content
|
||||
}
|
||||
&:-ms-input-placeholder {
|
||||
@content
|
||||
}
|
||||
}
|
||||
|
||||
%ellipsor {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@mixin ellipsor {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
91
resources/sass/mixins/_width.scss
Executable file
91
resources/sass/mixins/_width.scss
Executable file
@ -0,0 +1,91 @@
|
||||
//width mixin
|
||||
@mixin make-width($num, $viewport: "") {
|
||||
$p: $num + "%";
|
||||
|
||||
@if $viewport == "" {
|
||||
$viewport: "-";
|
||||
} @else {
|
||||
$viewport: "-" + $viewport + "-";
|
||||
}
|
||||
|
||||
.wd#{$viewport}#{$num} { width: #{$num}px; }
|
||||
.wd#{$viewport}#{$num}p { width: #{$p}; }
|
||||
.mx-wd#{$viewport}#{$num}p { max-width: #{$p}; }
|
||||
.mn-wd#{$viewport}#{$num}p { min-width: #{$p}; }
|
||||
|
||||
.wd#{$viewport}#{$num}-f { width: #{$num}px !important; }
|
||||
.wd#{$viewport}#{$num}p-f { width: #{$p} !important; }
|
||||
.mx-wd#{$viewport}#{$num}p-f { max-width: #{$p} !important; }
|
||||
.mn-wd#{$viewport}#{$num}p-f { min-width: #{$p} !important; }
|
||||
}
|
||||
|
||||
$num: 5;
|
||||
@while $num <= 100 {
|
||||
@include make-width($num);
|
||||
$num: $num + 5;
|
||||
}
|
||||
|
||||
$num: 150;
|
||||
@while $num <= 1000 {
|
||||
.wd-#{$num} { width: #{$num}px; }
|
||||
.wd-#{$num}-f { width: #{$num}px !important; }
|
||||
$num: $num + 50;
|
||||
}
|
||||
|
||||
@mixin do-make-width($viewport, $num, $max, $plus) {
|
||||
@while $num <= $max {
|
||||
@include make-width($num,$viewport);
|
||||
$num: $num + $plus;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
@include do-make-width("xs",5,100,5);
|
||||
@include do-make-width("xs",150,1000,50);
|
||||
|
||||
.wd-xs-auto { width: auto; }
|
||||
.wd-xs-auto-f { width: auto !important; }
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include do-make-width("sm",5,100,5);
|
||||
@include do-make-width("sm",150,1000,50);
|
||||
|
||||
.wd-sm-auto { width: auto; }
|
||||
.wd-sm-auto-f { width: auto !important; }
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@include do-make-width("md",5,100,5);
|
||||
@include do-make-width("md",150,1000,50);
|
||||
|
||||
.wd-md-auto { width: auto; }
|
||||
.wd-md-auto-f { width: auto !important; }
|
||||
|
||||
//Custom
|
||||
.wd-md-120 { width: 120px; }
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include do-make-width("lg",5,100,5);
|
||||
@include do-make-width("lg",150,1000,50);
|
||||
|
||||
.wd-lg-auto { width: auto; }
|
||||
.wd-lg-auto-f { width: auto !important; }
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
@include do-make-width("xl",5,100,5);
|
||||
@include do-make-width("xl",150,1000,50);
|
||||
|
||||
.wd-xl-auto { width: auto; }
|
||||
.wd-xl-auto { width: auto !important; }
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xxl) {
|
||||
@include do-make-width("xxl",5,100,5);
|
||||
@include do-make-width("xxl",150,1000,50);
|
||||
|
||||
.wd-xxl-auto { width: auto; }
|
||||
.wd-xxl-auto { width: auto !important; }
|
||||
}
|
||||
Reference in New Issue
Block a user