diff --git a/src/assets/sass/black-dashboard.scss b/src/assets/sass/black-dashboard.scss new file mode 100644 index 0000000..f7eddd5 --- /dev/null +++ b/src/assets/sass/black-dashboard.scss @@ -0,0 +1,56 @@ +/*! + + ========================================================= + * Black Dashboard - v1.0.0 + ========================================================= + + * Product Page: https://www.creative-tim.com/product/black-dashboard + * Copyright 2018 Creative Tim (http://www.creative-tim.com) + + * Designed by www.invisionapp.com Coded by www.creative-tim.com + + ========================================================= + + * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + + */ + +@import 'black-dashboard/variables'; +@import 'black-dashboard/mixins'; + +// Plugins CSS +@import "black-dashboard/plugins/plugin-animate-bootstrap-notify"; +@import "black-dashboard/plugins/plugin-perfect-scrollbar"; + +// Core CSS +@import "black-dashboard/buttons"; +@import "black-dashboard/inputs"; +@import "black-dashboard/typography"; +@import "black-dashboard/misc"; +@import "black-dashboard/checkboxes-radio"; + +// components +@import "black-dashboard/navbar"; +@import "black-dashboard/page-header"; +@import "black-dashboard/dropdown"; +@import "black-dashboard/alerts"; +@import "black-dashboard/images"; +@import "black-dashboard/tables"; +@import "black-dashboard/sidebar-and-main-panel"; +@import "black-dashboard/footers"; +@import "black-dashboard/fixed-plugin"; +@import "black-dashboard/rtl"; + +// cards +@import "black-dashboard/cards"; +@import "black-dashboard/cards/card-plain"; +@import "black-dashboard/cards/card-chart"; +@import "black-dashboard/cards/card-user"; +@import "black-dashboard/cards/card-map"; +@import "black-dashboard/cards/card-task"; + +@import "black-dashboard/responsive"; + +// Dashboard white class + +@import 'black-dashboard/white-content'; diff --git a/src/assets/sass/black-dashboard/_alerts.scss b/src/assets/sass/black-dashboard/_alerts.scss new file mode 100644 index 0000000..d675667 --- /dev/null +++ b/src/assets/sass/black-dashboard/_alerts.scss @@ -0,0 +1,74 @@ +.alert{ + border: 0; + border-radius: $border-radius-small; + color: $white-color; + padding-top: .9rem; + padding-bottom: .9rem; + position: relative; + + .alert-link{ + color: $white-color; + } + + &.alert-success{ + background-color: darken($success-color, 10%); + } + + &.alert-danger{ + background-color: lighten($danger-color, 5%); + } + + &.alert-warning{ + background-color: lighten($warning-color, 5%); + } + + &.alert-info{ + background-color: lighten($info-color, 5%); + } + + &.alert-primary{ + background-color: lighten($primary-color, 5%); + } + + + i.fa, + i.tim-icons{ + font-size: 16px; + } + + .close{ + color: $white-color; + opacity: .9; + text-shadow: none; + line-height: 0; + outline: 0; + } + + span[data-notify="icon"]{ + font-size: 22px; + display: block; + left: 19px; + position: absolute; + top: 50%; + margin-top: -11px; + } + + button.close{ + position: absolute; + right: 15px; + top: 50%; + margin-top: -13px; + width: 25px; + height: 25px; + padding: 3px; + } + + .close ~ span{ + display: block; + max-width: 89%; + } + + &.alert-with-icon{ + padding-left: 65px; + } +} diff --git a/src/assets/sass/black-dashboard/_buttons.scss b/src/assets/sass/black-dashboard/_buttons.scss new file mode 100644 index 0000000..c96de61 --- /dev/null +++ b/src/assets/sass/black-dashboard/_buttons.scss @@ -0,0 +1,216 @@ +.btn, +.navbar .navbar-nav > a.btn{ + border-width: $border-thick; + font-weight: $font-weight-semi; + font-size: $font-size-large; + line-height: $line-height; + border: none; + position: relative; + overflow: hidden; + margin:4px 1px; + border-radius: $border-radius-large; + padding: $padding-btn-vertical $padding-btn-horizontal; + cursor: pointer; + animation: rotation 0.3s infinite; + + @include btn-styles($default-color, $default-states-color); + + &:hover, + &:focus{ + @include opacity(1); + outline: 0 !important; + } + &:active, + &.active, + .open > &.dropdown-toggle { + @include box-shadow(none); + outline: 0 !important; + } + + .badge{ + margin: 0; + } + + &.btn-icon { + // see above for color variations + height: $btn-icon-size-regular; + min-width: $btn-icon-size-regular; + width: $btn-icon-size-regular; + padding: 0; + font-size: $btn-icon-font-size-regular; + overflow: hidden; + position: relative; + line-height: normal; + + &.btn-simple{ + padding: 0; + } + + &.btn-sm{ + height: $btn-icon-size-small; + min-width: $btn-icon-size-small; + width: $btn-icon-size-small; + + .fa, + .far, + .fas, + .tim-icons{ + font-size: $btn-icon-font-size-small; + } + } + + &.btn-lg{ + height: $btn-icon-size-lg; + min-width: $btn-icon-size-lg; + width: $btn-icon-size-lg; + + .fa, + .far, + .fas, + .tim-icons{ + font-size: $btn-icon-font-size-lg; + } + } + + &:not(.btn-footer) .tim-icons, + &:not(.btn-footer) .fa, + &:not(.btn-footer) .far, + &:not(.btn-footer) .fas{ + position: absolute; + font-size: 1em; + top: 50%; + left: 50%; + transform: translate(-12px, -12px); + line-height: 1.5626rem; + width: 24px; + } + + } + + &:not(.btn-icon) .tim-icons{ + position: relative; + top: 1px; + } + + span{ + position: relative; + display: block; + } + + &.btn-link.dropdown-toggle { + color: #9a9a9a; + } +} + +// Apply the mixin to the buttons +// .btn-default { @include btn-styles($default-color, $default-states-color); } +.btn-primary { @include btn-styles($primary-color, $primary-states-color); + + } +.btn-success { @include btn-styles($success-color, $success-states-color); + + } +.btn-info { @include btn-styles($info-color, $info-states-color); + + } +.btn-warning { @include btn-styles($warning-color, $warning-states-color); + &:not(:disabled):not(.disabled):active{ + color: $white-color; + } + } +.btn-danger { @include btn-styles($danger-color, $danger-states-color); + + } +.btn-neutral { @include btn-styles($white-color, $white-color); } + +.btn{ + &:disabled, + &[disabled], + &.disabled{ + @include opacity(.5); + pointer-events: none; + } +} +.btn-simple{ + border: $border; + border-color: $default-color; + padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1; + background-color: $transparent-bg; +} + +.btn-simple, +.btn-link{ + &.disabled, + &:disabled, + &[disabled], + fieldset[disabled] & { + &, + &:hover, + &:focus, + &.focus, + &:active, + &.active { + background: $transparent-bg; + } + } +} + +.btn-link{ + border: $none; + padding: $padding-base-vertical $padding-base-horizontal; + background: $transparent-bg; + color: $light-gray; + + &:hover { + box-shadow: none !important; + transform: none !important; + } +} + +.btn-lg{ + @include btn-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $border-radius-large); +} +.btn-sm{ + @include btn-size($padding-small-vertical, $padding-small-horizontal, $font-size-base, $border-radius-small); +} + +.btn-wd { + min-width: 140px; +} +.btn-group.select{ + width: 100%; +} + +.btn-group .btn.active{ + box-shadow: 2px 2px 6px rgba(0,0,0,.4); + transform: translateY(-1px); + -webkit-transform: translateY(-1px); +} + +.btn-group.select .btn{ + text-align: left; +} +.btn-group.select .caret{ + position: absolute; + top: 50%; + margin-top: -1px; + right: 8px; +} + +.btn-round{ + border-width: $border-thin; + border-radius: $btn-round-radius; + // padding-right: $padding-round-horizontal; + // padding-left: $padding-round-horizontal; + + + &.btn-simple{ + padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1; + } +} + +.no-caret { + &.dropdown-toggle::after { + display: none; + } +} diff --git a/src/assets/sass/black-dashboard/_cards.scss b/src/assets/sass/black-dashboard/_cards.scss new file mode 100644 index 0000000..442d474 --- /dev/null +++ b/src/assets/sass/black-dashboard/_cards.scss @@ -0,0 +1,108 @@ +.card{ + background: $card-black-background; + border: 0; + border-radius: $border-radius-small; + position: relative; + width: 100%; + margin-bottom: 30px; + box-shadow: $box-shadow; + + label{ + color: rgba($white-color, 0.6); + } + .card-body{ + padding: 15px; + + &.table-full-width{ + padding-left: 0; + padding-right: 0; + } + + .card-title{ + + color: $white-color; + text-transform: inherit; + font-weight: $font-weight-light; + } + + .card-description, .card-category{ + color: rgba($white-color, 0.6); + } + + } + + .card-header{ + &:not([data-background-color]){ + background-color: transparent; + } + padding: 15px 15px 0; + border: 0; + color: rgba($white-color,0.8); + + .card-title{ + color: $white-color; + font-weight: 100; + } + + .card-category{ + color: $dark-gray; + margin-bottom: 5px; + font-weight: 300; + } + } + + .map{ + border-radius: $border-radius-small; + + &.map-big{ + height: 400px; + } + } + + + + &.card-plain { + background: transparent; + box-shadow: none; + } + + .image{ + overflow: hidden; + height: 200px; + position: relative; + } + + .avatar{ + width: 30px; + height: 30px; + overflow: hidden; + border-radius: 50%; + margin-bottom: 15px; + } + + label{ + font-size: $font-size-small; + margin-bottom: 5px; + + } + + .card-footer{ + background-color: transparent; + border: 0; + padding: 15px; + + + .stats{ + i{ + margin-right: 5px; + position: relative; + + } + } + + h6{ + margin-bottom: 0; + padding: 7px 0; + } + } +} diff --git a/src/assets/sass/black-dashboard/_checkboxes-radio.scss b/src/assets/sass/black-dashboard/_checkboxes-radio.scss new file mode 100644 index 0000000..f01166c --- /dev/null +++ b/src/assets/sass/black-dashboard/_checkboxes-radio.scss @@ -0,0 +1,154 @@ +.form-check{ + margin-top: .5rem; + padding-left: 0; +} + +.form-check .form-check-label{ + display: inline-block; + position: relative; + cursor: pointer; + padding-left: 25px; + line-height: 18px; + margin-bottom: 0; + -webkit-transition: color 0.3s linear; + -moz-transition: color 0.3s linear; + -o-transition: color 0.3s linear; + -ms-transition: color 0.3s linear; + transition: color 0.3s linear; +} +.radio .form-check-sign{ + padding-left: 28px; +} + +.form-check-radio.form-check-inline .form-check-label { + padding-left: 5px; + margin-right: 10px; +} + +.form-check .form-check-sign::before, +.form-check .form-check-sign::after{ + content: " "; + display: inline-block; + position: absolute; + width: 17px; + height: 17px; + left: 0; + cursor: pointer; + border-radius: 3px; + top: 0; + border: 1px solid darken($dark-gray,10%); + -webkit-transition: opacity 0.3s linear; + -moz-transition: opacity 0.3s linear; + -o-transition: opacity 0.3s linear; + -ms-transition: opacity 0.3s linear; + transition: opacity 0.3s linear; +} + +.form-check input[type="checkbox"]:checked + .form-check-sign::before, +.form-check input[type="checkbox"]:checked + .form-check-sign::before{ + border: none; + background-color: $primary-color; +} + + .form-check .form-check-sign::after{ + font-family: 'nucleo'; + content: "\ea1b"; + top: 0px; + text-align: center; + font-size: 14px; + opacity: 0; + color: $white-color; + font-weight: $font-weight-bold; + border: 0; + background-color: inherit; +} + +.form-check.disabled .form-check-label, +.form-check.disabled .form-check-label { + color: $dark-gray; + opacity: .5; + cursor: not-allowed; +} + +.form-check input[type="checkbox"], +.radio input[type="radio"]{ + opacity: 0; + position: absolute; + visibility: hidden; +} +.form-check input[type="checkbox"]:checked + .form-check-sign::after{ + opacity: 1; + font-size: 10px; + margin-top: 0; +} + + +.form-check input[type="checkbox"]+ .form-check-sign::after{ + opacity: 0; + font-size: 10px; + margin-top: 0; +} + +.form-control input[type="checkbox"]:disabled + .form-check-sign::before, +.checkbox input[type="checkbox"]:disabled + .form-check-sign::after{ + cursor: not-allowed; +} + +.form-check input[type="checkbox"]:disabled + .form-check-sign, +.form-check input[type="radio"]:disabled + .form-check-sign{ + pointer-events: none; +} + +.form-check-radio .form-check-label{ + padding-top: 3px; +} +.form-check-radio .form-check-sign::before, +.form-check-radio .form-check-sign::after{ + content: " "; + width: 18px; + height: 18px; + border-radius: 50%; + border: 1px solid darken($dark-gray,10%); + display: inline-block; + position: absolute; + left: 0px; + top: 3px; + padding: 1px; + -webkit-transition: opacity 0.3s linear; + -moz-transition: opacity 0.3s linear; + -o-transition: opacity 0.3s linear; + -ms-transition: opacity 0.3s linear; + transition: opacity 0.3s linear; +} + +.form-check-radio input[type="radio"] + .form-check-sign:after, +.form-check-radio input[type="radio"] { + opacity: 0; +} +.form-check-radio input[type="radio"]:checked + .form-check-sign::after { + width: 6px; + height: 6px; + background-color: $primary-color; + border-color: $primary-color; + top: 9px; + left: 6px; + opacity: 1; +} + +.form-check-radio input[type="radio"]:checked + .form-check-sign::before { + border-color: $primary-color; +} + + +.form-check-radio input[type="radio"]:checked + .form-check-sign::after{ + opacity: 1; +} + +.form-check-radio input[type="radio"]:disabled + .form-check-sign { + color: $dark-gray; +} + +.form-check-radio input[type="radio"]:disabled + .form-check-sign::before, +.form-check-radio input[type="radio"]:disabled + .form-check-sign::after { + color: $dark-gray; +} diff --git a/src/assets/sass/black-dashboard/_dropdown.scss b/src/assets/sass/black-dashboard/_dropdown.scss new file mode 100644 index 0000000..b10582b --- /dev/null +++ b/src/assets/sass/black-dashboard/_dropdown.scss @@ -0,0 +1,316 @@ +.dropdown-menu{ + border: 0; + box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2); + border-radius: $border-radius-extra-small; + @include transition($fast-transition-time, $transition-linear); + font-size: $font-size-base; + + &.dropdown-menu-right{ + &:before, &:after{ + left:auto; + right: 10px; + } + } + + &.dropdown-black{ + background: linear-gradient(to bottom, $black-color 0%, $black-states-color 100%); + border: 1px solid $default-color; + .dropdown-item { + color: rgba(255, 255, 255, 0.7); + } + + .dropdown-divider{ + border-color: $default-color; + } + &:before{ + color: $black-color; + z-index: 2; + } + &:after{ + display: inline-block; + position: absolute; + width: 0; + height: 0; + z-index: 1; + vertical-align: middle; + content: ""; + top: -6px; + left: 10px; + right: auto; + color: $default-color; + border-bottom: .4em solid; + border-right: .4em solid transparent; + border-left: .4em solid transparent; + } + + &.dropdown-menu-right{ + &:after{ + left: auto; + right: 10px; + } + } + + .dropup &{ + &:after{ + color: $black-states-color; + z-index: 2; + } + + &:before{ + display: inline-block; + position: absolute; + width: 0; + height: 0; + vertical-align: middle; + content: ""; + top: auto; + bottom: -6px; + right: auto; + left: 10px; + color: #555; + border-top: .4em solid; + border-right: .4em solid transparent; + border-left: .4em solid transparent; + border-bottom: none; + z-index: 1; + } + } + } + + + + i{ + margin-right: 5px; + position: relative; + top: 1px; + } + + .tim-icons{ + margin-right: 10px; + position: relative; + top: 4px; + font-size: 18px; + margin-top: -5px; + opacity: .5; + } + + .dropdown-item{ + &.active, + &:active{ + color: inherit; + } + } + + .dropup &{ + &:before{ + display: none; + } + + &:after{ + display: inline-block; + position: absolute; + width: 0; + height: 0; + vertical-align: middle; + content: ""; + top: auto; + bottom: -5px; + right: auto; + left: 10px; + color: $white-color; + border-top: .4em solid; + border-right: .4em solid transparent; + border-left: .4em solid transparent; + border-bottom: none; + } + + &.dropdown-menu-right{ + &:after, &:before{ + right: 10px; + left: auto; + } + + + } + + } + + + + &:before{ + display: inline-block; + position: absolute; + width: 0; + height: 0; + vertical-align: middle; + content: ""; + top: -5px; + left: 10px; + right: auto; + color: $white-color; + border-bottom: .4em solid; + border-right: .4em solid transparent; + border-left: .4em solid transparent; + } + + + + &.dropdown-menu-right{ + right: 0 !important; + left: auto !important; + } + + .dropdown-item, + .bootstrap-select &.inner li a{ + font-size: $font-size-small; + padding-top: .6rem; + padding-bottom: .6rem; + margin-top: 5px; + @include transition($fast-transition-time, $transition-linear); + + &:hover, + &:focus{ + background-color: $opacity-gray-3; + } + + &.disabled, + &:disabled{ + color: $default-color-opacity; + + &:hover, + &:focus{ + background-color: transparent; + box-shadow: none; + } + } + } + + + .dropdown-divider{ + background-color: $opacity-gray-5; + } + + .dropdown-header:not([href]):not([tabindex]){ + color: $default-color-opacity; + font-size: $font-size-mini; + text-transform: uppercase; + font-weight: $font-weight-bold; + } + + &.dropdown-primary{ + @include dropdown-colors(darken($primary-color, 3%),$opacity-8,$white-color, $opacity-2); + } + + &.dropdown-info{ + @include dropdown-colors(darken($info-color, 3%),$opacity-8,$white-color, $opacity-2); + } + + &.dropdown-danger{ + @include dropdown-colors(darken($danger-color, 3%),$opacity-8,$white-color, $opacity-2); + } + + &.dropdown-success{ + @include dropdown-colors(darken($success-color, 3%),$opacity-8,$white-color, $opacity-2); + } + + &.dropdown-warning{ + @include dropdown-colors(darken($warning-color, 3%),$opacity-8,$white-color, $opacity-2); + } + + .dropdown &, + .dropup:not(.bootstrap-select) &, + .bootstrap-select &:not(.inner), + &.bootstrap-datetimepicker-widget.top, + &.bootstrap-datetimepicker-widget.bottom{ + @include transform-translate-y-dropdown(-20px); + visibility: hidden; + display: block; + @include opacity(0); + top: 100% !important; + } + + &.bootstrap-datetimepicker-widget.top, + &.bootstrap-datetimepicker-widget.bottom{ + @include transform-translate-y-dropdown(-20px); + } + + .bootstrap-select.dropup &:not(.inner){ + @include transform-translate-y-dropdown(25px); + } + + .dropup:not(.bootstrap-select) &{ + @include transform-translate-y-dropdown(20px); + top: auto !important; + bottom: 100%; + } + + .dropdown.show &, + .bootstrap-select.show &:not(.inner), + &.bootstrap-datetimepicker-widget.top.open, + &.bootstrap-datetimepicker-widget.bottom.open, + .dropup.show:not(.bootstrap-select) &, + .navbar .dropdown.show &{ + @include opacity(1); + visibility: visible; + @include transform-translate-y-dropdown(1px); + } + + &.bootstrap-datetimepicker-widget.top.open, + &.bootstrap-datetimepicker-widget.bottom.open{ + @include transform-translate-y-dropdown(0px); + } + + .dropup.show:not(.bootstrap-select) &{ + @include transform-translate-y-dropdown(-2px); + } + + &.dropdown-navbar{ + left: -80px; + &:before, &:after{ + left: auto; + right: 17px; + } + } + + +} + +.btn{ + cursor: pointer; + + &.dropdown-toggle{ + padding:10px; + margin: 0; + margin-bottom: 5px; + + &:after{ + content: ""; + margin-left: 5px; + } + + } + + span.bs-caret{ + display: none; + } + + &.btn-link{ + &.dropdown-toggle{ + height: 22px; + padding: 0; + margin-right: 5px; + } + } +} + +.dropdown-toggle:after{ + + content: unset; + +} + +.btn:not(:disabled):not(.disabled).active:focus, + .btn:not(:disabled):not(.disabled):active:focus, + .show>.btn.dropdown-toggle:focus{ + box-shadow: none; + } diff --git a/src/assets/sass/black-dashboard/_fixed-plugin.scss b/src/assets/sass/black-dashboard/_fixed-plugin.scss new file mode 100644 index 0000000..26e8752 --- /dev/null +++ b/src/assets/sass/black-dashboard/_fixed-plugin.scss @@ -0,0 +1,350 @@ +.fixed-plugin{ + position: fixed; + right: 0; + width: 64px; + background: rgba(0,0,0,.3); + z-index: 1031; + border-radius: 8px 0 0 8px; + text-align: center; + top: 120px; + + li > a, + .badge{ + transition: all .34s; + -webkit-transition: all .34s; + -moz-transition: all .34s; + } + + .fa-cog{ + color: #FFFFFF; + padding: 10px; + border-radius: 0 0 6px 6px; + width: auto; + } + + .dropdown-menu{ + right: 80px; + left: auto !important; + top: -52px !important; + width: 290px; + border-radius: 0.1875rem; + padding: 0 10px; + background: linear-gradient($black-color, $black-states-color); + } + + .dropdown .dropdown-menu .tim-icons{ + top: 5px; + } + + .dropdown-menu:after, + .dropdown-menu:before{ + right: 10px; + margin-left: auto; + left: auto; + } + + .fa-circle-thin{ + color: #FFFFFF; + } + + .active .fa-circle-thin{ + color: #00bbff; + } + + .dropdown-menu > .active > a, + .dropdown-menu > .active > a:hover, + .dropdown-menu > .active > a:focus{ + color: #777777; + text-align: center; + } + + img{ + border-radius: 0; + width: 100%; + height: 100px; + margin: 0 auto; + } + + .dropdown-menu li > a:hover, + .dropdown-menu li > a:focus{ + box-shadow: none; + } + + .badge{ + border: 2px solid #FFFFFF; + border-radius: 50%; + cursor: pointer; + display: inline-block; + height: 23px; + margin-right: 5px; + position: relative; + width: 23px; + } + + .badge.active, + .badge:hover{ + border-color: $black-states-color; + } + + .badge-primary{ + background-color: $brand-primary; + } + + .badge-blue{ + background-color: $brand-info; + } + .badge-green{ + background-color: $brand-success; + } + .badge-orange{ + background-color: $warning-color; + } + + .badge-red{ + background-color: $brand-danger; + } + + .light-badge, .dark-badge{ + margin:0; + border: 1px solid $info-color; + &:hover{ + border: 1px solid $info-color; + } + } + + .light-badge{ + background: $white-color; + &:hover{ + background: $white-color; + } + } + + .dark-badge{ + background: $black-color; + &:hover{ + background: $black-color; + } + } + + h5{ + font-size: 14px; + margin: 10px; + } + + .dropdown-menu li{ + display: block; + padding: 18px 2px; + width: 25%; + float: left; + } + + li.adjustments-line, + li.header-title, + li.button-container{ + width: 100%; + height: 50px; + min-height: inherit; + } + + li.button-container{ + height: auto; + + div{ + margin-bottom: 5px; + } + } + + #sharrreTitle{ + text-align: center; + padding: 10px 0; + height: 50px; + } + + li.header-title{ + color: $white-color; + height: 30px; + line-height: 25px; + font-size: 12px; + font-weight: 600; + text-align: center; + text-transform: uppercase; + } + + .adjustments-line{ + p{ + float: left; + display: inline-block; + margin-bottom: 0; + font-size: 1em; + color: #3C4858; + } + + a{ + color: transparent; + + .badge-colors{ + position: relative; + top: -2px; + } + + a:hover, + a:focus{ + color: transparent; + } + } + + .togglebutton{ + text-align: center; + + .label-switch{ + position: relative; + left: -10px; + font-size: $font-size-mini; + color: $white-color; + + &.label-right{ + left: 10px; + } + } + + .toggle{ + margin-right: 0; + } + } + + .color-label{ + position: relative; + top: -7px; + font-size: $font-size-mini; + color: $white-color; + } + + .dropdown-menu > li.adjustments-line > a{ + padding-right: 0; + padding-left: 0; + border-bottom: 1px solid #ddd; + border-radius: 0; + margin: 0; + } + } + + + + .dropdown-menu{ + > li{ + & > a.img-holder{ + font-size: 16px; + text-align: center; + border-radius: 10px; + background-color: #FFF; + border: 3px solid #FFF; + padding-left: 0; + padding-right: 0; + opacity: 1; + cursor: pointer; + display: block; + max-height: 100px; + overflow: hidden; + padding: 0; + + img{ + margin-top: auto; + } + } + + a.switch-trigger:hover, + & > a.switch-trigger:focus{ + background-color: transparent; + } + + &:hover, + &:focus{ + > a.img-holder{ + border-color: rgba(0, 187, 255, 0.53);; + } + } + } + + > .active > a.img-holder, + > .active > a.img-holder{ + border-color: #00bbff; + background-color: #FFFFFF; + } + + } + + .btn-social{ + width: 50%; + display: block; + width: 48%; + float: left; + font-weight: 600; + } + + .btn-social{ + i{ + margin-right: 5px; + } + + &:first-child{ + margin-right: 2%; + } + } + + .dropdown{ + .dropdown-menu{ + -webkit-transform: translateY(-15%); + -moz-transform: translateY(-15%); + -o-transform: translateY(-15%); + -ms-transform: translateY(-15%); + transform: translateY(-15%); + top: 27px; + opacity: 0; + + transform-origin: 0 0; + + &:before{ + border-bottom: .4em solid rgba(0, 0, 0, 0); + border-left: .4em solid rgba(0,0,0,0.2); + border-top: .4em solid rgba(0,0,0,0); + right: -16px; + top: 46px; + } + + &:after{ + border-bottom: .4em solid rgba(0, 0, 0, 0); + border-left: .4em solid $black-color; + border-top: .4em solid rgba(0,0,0,0); + right: -16px; + } + + &:before, + &:after{ + content: ""; + display: inline-block; + position: absolute; + top: 74px; + width: 16px; + transform: translateY(-50%); + -webkit-transform: translateY(-50%); + -moz-transform: translateY(-50%); + } + } + + &.show .dropdown-menu{ + opacity: 1; + + -webkit-transform: translateY(-13%); + -moz-transform: translateY(-13%); + -o-transform: translateY(-13%); + -ms-transform: translateY(-13%); + transform: translateY(-13%); + + transform-origin: 0 0; + } + } + + .bootstrap-switch{ + margin:0; + } +} diff --git a/src/assets/sass/black-dashboard/_footers.scss b/src/assets/sass/black-dashboard/_footers.scss new file mode 100644 index 0000000..2cff9ad --- /dev/null +++ b/src/assets/sass/black-dashboard/_footers.scss @@ -0,0 +1,47 @@ +.footer{ + padding: 24px 0 24px 250px; + + &.footer-default{ + background-color: #f2f2f2; + } + + nav{ + display: inline-block; + float: left; + padding-left: 7px; + } + + ul{ + margin-bottom: 0; + padding: 0; + list-style: none; + + li{ + display: inline-block; + + a{ + color: $white-color; + padding: $padding-base-vertical; + font-size: $font-size-small; + text-transform: uppercase; + text-decoration: none; + + &:hover{ + text-decoration: none; + } + } + } + } + + .copyright{ + font-size: $font-size-small; + line-height: 1.8; + color: $white-color; + } + + &:after{ + display: table; + clear: both; + content: " "; + } +} diff --git a/src/assets/sass/black-dashboard/_images.scss b/src/assets/sass/black-dashboard/_images.scss new file mode 100644 index 0000000..a689aa9 --- /dev/null +++ b/src/assets/sass/black-dashboard/_images.scss @@ -0,0 +1,7 @@ +img{ + max-width: 100%; + border-radius: $border-radius-small; +} +.img-raised{ + box-shadow: $box-shadow-raised; +} diff --git a/src/assets/sass/black-dashboard/_inputs.scss b/src/assets/sass/black-dashboard/_inputs.scss new file mode 100644 index 0000000..47a326a --- /dev/null +++ b/src/assets/sass/black-dashboard/_inputs.scss @@ -0,0 +1,461 @@ +@include form-control-placeholder(rgba($white-color,0.2), 1); + +.form-control { + border-color: lighten($black-color,5%); + background-color: $transparent-bg; + border-radius: $border-radius-large; + color: rgba($white-color,0.8); + line-height: normal; + font-size: $font-size-small; + @include transition-input-focus-color(); + @include box-shadow(none); + + + + &:focus{ + border-color:$primary-color ; + background: $transparent-bg; + @include box-shadow(none); + outline: 0 !important; + color: rgba($white-color,0.8); + + & + .input-group-append .input-group-text, + & ~ .input-group-append .input-group-text, + & + .input-group-prepend .input-group-text, + & ~ .input-group-prepend .input-group-text{ + border: 1px solid $primary-color; + border-left: none; + background-color: $transparent-bg; + } + } + + .has-success &, + .has-error &, + .has-success &:focus, + .has-error &:focus{ + @include box-shadow(none); + } + + .has-danger &, + .has-success &{ + &.form-control-success, + &.form-control-danger{ + background-image: none; + } + } + + & + .form-control-feedback{ + border-radius: $border-radius-large; + font-size: $font-size-base; + margin-top: -7px; + position: absolute; + right: 10px; + top: 50%; + vertical-align: middle; + } + + .open &{ + border-radius: $border-radius-large $border-radius-large 0 0; + border-bottom-color: transparent; + } + + & + .input-group-append .input-group-text, + & + .input-group-prepend .input-group-text{ + background-color: $white-bg; + } +} + +.has-success .input-group-append .input-group-text, +.has-success .input-group-prepend .input-group-text, +.has-success .form-control{ + border-color: lighten($black-color,5%); +} + +.has-success .form-control:focus, +.has-success.input-group-focus .input-group-append .input-group-text, +.has-success.input-group-focus .input-group-prepend .input-group-text{ + border-color: darken($success-color, 10%); +} + +.has-danger .form-control, +.has-danger .input-group-append .input-group-text, +.has-danger .input-group-prepend .input-group-text, +.has-danger.input-group-focus .input-group-prepend .input-group-text, +.has-danger.input-group-focus .input-group-append .input-group-text{ + border-color: lighten($danger-states-color,5%); + color: $danger-states-color; + background-color: rgba(222,222,222, .1); + + &:focus{ + background-color: $transparent-bg; + } +} + +.has-success, +.has-danger{ + &:after{ + font-family: 'nucleo'; + content: "\ea1b"; + display: inline-block; + position: absolute; + right: 20px; + top: 13px; + color: $success-color; + font-size: 11px; + } + + &.form-control-lg{ + &:after{ + font-size: 13px; + top: 24px; + } + } + + &.has-label{ + &:after{ + top: 37px; + } + } + + + &.form-check:after{ + display: none !important; + } + + &.form-check .form-check-label{ + color: $success-color; + } +} + +.has-danger{ + &:after{ + content: "\ea48"; + color: $danger-states-color; + } + + &.form-check .form-check-label{ + color: $danger-states-color; + } +} + +.form-group.has-danger .error, +.input-group.has-danger .error { + color: $danger-states-color; +} + +.form-group.has-success .error, +.input-group.has-success .error { + color: $success-color; +} + +@include form-control-lg-padding($padding-large-vertical, $padding-input-horizontal); +@include input-base-padding($padding-input-vertical, $padding-input-horizontal); + +.form-group.no-border, +.input-group.no-border{ + .form-control, + .form-control + .input-group-prepend .input-group-text, + .form-control + .input-group-append .input-group-text{ + + background-color: lighten($black-color,1%); + border: medium none; + &:focus, + &:active, + &:active{ + border: medium none; + background-color: lighten($black-color,2%); + } + } + + .form-control{ + &:focus{ + & + .input-group-prepend .input-group-text, + & + .input-group-append .input-group-text{ + background-color: lighten($black-color,2%); + } + } + } + + .input-group-prepend .input-group-text, + .input-group-append .input-group-text{ + background-color: lighten($black-color,1%);; + border: none; + } +} + +.has-error{ + .form-control-feedback, .control-label{ + color: $danger-states-color; + } +} +.has-success{ + .form-control-feedback, .control-label{ + color: $success-color; + } +} + +.input-group-append .input-group-text, +.input-group-prepend .input-group-text { + background-color: transparent; + border: 1px solid lighten($black-color,5%); + border-radius: $border-radius-large; + color: $white-color; + + & i{ + opacity: .5; + } + + @include transition-input-focus-color(); + + .has-danger.input-group-focus &{ + background-color: $transparent-bg; + } + + .has-success &{ + background-color: $transparent-bg; + } + .has-danger .form-control:focus + &{ + color: $danger-states-color; + } + .has-success .form-control:focus + &{ + color: $success-color; + } + + & + .form-control, + & ~ .form-control{ + @include input-size($padding-base-vertical - 1, $padding-base-horizontal); + padding-left: 18px; + } + + i{ + width: 17px; + } +} + +.input-group-append, +.input-group-prepend{ + margin: 0; +} + + +.input-group-append .input-group-text{ + border-left: none; +} +.input-group-prepend .input-group-text{ + border-right: none; +} + +.input-group-focus{ + .input-group-prepend .input-group-text, + .input-group-append .input-group-text{ + background-color: $white-bg; + border-color: $primary-color; + background-color: $transparent-bg; + border-color: $primary-color; + } + + &.no-border{ + .input-group-prepend .input-group-text, + .input-group-append .input-group-text{ + background-color: lighten($black-color,2%); + } + } +} + +.input-group, +.form-group{ + margin-bottom: 10px; + position: relative; + + .form-control-static{ + margin-top: 9px; + } +} +.input-group[disabled]{ + .input-group-prepend .input-group-text, + .input-group-append .input-group-text{ + background-color: $light-gray; + } +} + +.input-group .form-control:not(:first-child):not(:last-child), .input-group-btn:not(:first-child):not(:last-child){ + border-radius: $border-radius-large; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-left: 0 none; +} + +.input-group .form-control:first-child, +.input-group-btn:first-child > .dropdown-toggle, +.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) { + border-right: 0 none; +} +.input-group .form-control:last-child, +.input-group-btn:last-child > .dropdown-toggle, +.input-group-btn:first-child > .btn:not(:first-child) { + border-left: 0 none; +} +.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { + background-color: $black-states-color; + color: $default-color; + cursor: not-allowed; +} + +.input-group-btn .btn{ + border-width: $border-thin; + padding: $padding-btn-vertical $padding-base-horizontal; +} +.input-group-btn .btn-default:not(.btn-fill){ + border-color: $medium-gray; +} + +.input-group-btn:last-child > .btn{ + margin-left: 0; +} +textarea.form-control{ + max-width: 100%; + max-height: 80px; + padding: 10px 10px 0 0; + resize: none; + border: none; + border-bottom: 1px solid lighten($black-color,5%); + border-radius: 0; + line-height: 2; + + &:focus, + &:active{ + border-left: none; + border-top: none; + border-right: none; + } +} + +.has-success, +.has-danger{ + + &.form-group .form-control, + &.form-group.no-border .form-control{ + padding-right: $padding-input-horizontal + 21; + } +} + +.form.form-newsletter .form-group{ + float: left; + width: 78%; + margin-right: 2%; + margin-top: 9px; +} + +.input-group .input-group-btn{ + padding: 0 12px; +} + +// Input files - hide actual input - requires specific markup in the sample. +.form-group input[type=file] { + opacity: 0; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; +} + +.form-text{ + font-size: $font-size-small; + color: rgba($white-color,0.8); +} + +.form-control-lg{ + padding: 0; + font-size: inherit; + line-height: 0; + border-radius: 0; +} + +.form-horizontal{ + .col-form-label, + .label-on-right{ + padding: 10px 5px 0 15px; + text-align: right; + max-width: 180px; + } + + .checkbox-radios{ + margin-bottom: 15px; + + .form-check:first-child{ + margin-top: 8px; + } + } + + .label-on-right{ + text-align: left; + padding: 10px 15px 0 5px; + } + + .form-check-inline{ + margin-top: 6px; + .form-check-label{ + margin-right: 1.5rem; + } + } +} + +.search-bar{ + margin-left: $margin-large-vertical; + .btn{ + margin: 0; + } + &.input-group{ + border-radius: 25px; + z-index: 4; + margin-bottom: 0; + height: 43px; + .input-group-addon{ + padding: $padding-simple-vertical; + background: transparent; + border: none; + color: rgba(255, 255, 255, 0.7); + + } + + i{ + font-size: 20px; + color: white; + margin-top: 0 !important; + } + input{ + background: transparent; + border:none !important; + border-radius: 0; + padding: 12px !important; + font-size: 12px; + opacity: 0.5; + &:focus{ + background: transparent; + } + } + .form-control{ + opacity: 1; + color: $white-color; + &::placeholder{ + color: white; + } + } + } + } + + #searchModal .modal-dialog{ + max-width: 1000px; + margin: 20px auto; + .form-control{ + border: none; + color: $black-color; + &::placeholder{ + color: $black-color; + } + } + } diff --git a/src/assets/sass/black-dashboard/_misc.scss b/src/assets/sass/black-dashboard/_misc.scss new file mode 100644 index 0000000..38ce9e5 --- /dev/null +++ b/src/assets/sass/black-dashboard/_misc.scss @@ -0,0 +1,198 @@ +body{ + background: #1e1e2d; + color: $black-color; + font-size: $font-size-base; + font-family: $sans-serif-family; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + &.dashboard-white{ + .main-panel{ + background: $opacity-gray-3; + } + + .footer ul li a{ + color: $black-color; + } + + .footer .copyright{ + color: $black-color; + } + .navbar-minimize button i{ + color: $black-color; + } + + .navbar .navbar-brand{ + color: $black-color; + } + + } +} + +.main{ + position: relative; + background: $white-color; +} +/* Animations */ +.nav-pills .nav-link, +.navbar, +.nav-tabs .nav-link, +.sidebar .nav a, +.sidebar .nav a i, +.navbar-collapse .navbar-nav .nav-link, +.animation-transition-general, +.tag, +.tag [data-role="remove"], +.animation-transition-general{ + @include transition($general-transition-time, $transition-ease); +} + +//transition for dropdown caret +.bootstrap-switch-label:before, +.caret{ + @include transition($fast-transition-time, $transition-ease); +} + +.dropdown-toggle[aria-expanded="true"]:after, +a[data-toggle="collapse"][aria-expanded="true"] .caret, +.card-collapse .card a[data-toggle="collapse"][aria-expanded="true"] i, +.card-collapse .card a[data-toggle="collapse"].expanded i{ + @include rotate-180(); +} + +.button-bar{ + display: block; + position: relative; + width: 22px; + height: 1px; + border-radius: 1px; + background: $white-bg; + + & + .button-bar{ + margin-top: 7px; + } + + &:nth-child(2){ + width: 17px; + } +} + +.caret{ + width: 0; + height: 0; + vertical-align: middle; + border-top: 4px dashed; + border-right: 4px solid transparent; + border-left: 4px solid transparent; + margin-top: -5px; + position: absolute; + top: 30px; + margin-left: 5px; +} + +.pull-left{ + float: left; +} +.pull-right{ + float: right; +} +.sidebar, .main-panel{ + -webkit-transition-property: top,bottom,width; + transition-property: top,bottom, width; + -webkit-transition-duration: .2s,.2s, .35s; + transition-duration: .2s,.2s, .35s; + -webkit-transition-timing-function: linear,linear,ease; + transition-timing-function: linear,linear,ease; + -webkit-overflow-scrolling: touch; +} + +// card user profile page + +.card { + form { + label + .form-control { + margin-bottom: 20px; + } + } +} + +// offline documentation + +.offline-doc { + .page-header:before { + background: rgba(0,0,0,.75); + } + + .navbar { + border: none; + } + + .footer { + position: absolute; + width: 100%; + background: transparent; + bottom: 0; + color: $white-color; + padding: 0.9375rem 0; + } +} + +//documentation + +.bd-docs { + + h1,h2,h3,h4,h5,h6,p,ul li,ol li{ + color:#2c2c2c; + } + + .navbar .navbar-brand{ + position: relative; + margin-top: 0; + } + + .bd-example { + background: linear-gradient(#1e1e2f,#1e1e24); + + .tim-icons{ + color: $white-color; + } + + h1, h2, h3, h4, h5, h6, + .h1, .h2, .h3, .h4, .h5, .h6 { + color: hsla(0,0%,100%,.8); + } + + } + + .navbar { + border-top: none; + + .navbar-nav .nav-link { + color: rgba(255,255,255,.8) !important; + } + } + + .card.card-body, + .card .card-body { + color: hsla(0,0%,100%,.8); + } + + .card{ + p{ + color: rgba($white-color,0.8); + } + } + + .blockquote, .blockquote p, .card p{ + color: rgba($white-color,0.8); + } + + + +// footer align + + .footer { + .container-fluid > nav { + display: inline-block; + } + } +} diff --git a/src/assets/sass/black-dashboard/_mixins.scss b/src/assets/sass/black-dashboard/_mixins.scss new file mode 100644 index 0000000..12f55c9 --- /dev/null +++ b/src/assets/sass/black-dashboard/_mixins.scss @@ -0,0 +1,8 @@ +//Components +@import "mixins/buttons"; +@import "mixins/vendor-prefixes"; +@import "mixins/inputs"; +@import "mixins/page-header"; +@import "mixins/dropdown"; +@import "mixins/cards"; +@import "mixins/transparency"; diff --git a/src/assets/sass/black-dashboard/_navbar.scss b/src/assets/sass/black-dashboard/_navbar.scss new file mode 100644 index 0000000..18024b3 --- /dev/null +++ b/src/assets/sass/black-dashboard/_navbar.scss @@ -0,0 +1,176 @@ + + +.navbar{ + padding: 10px 30px 10px 15px; + width: 100%; + z-index: 1050; + min-height: 70px; + background: $navbar-color; + border-top: 2px solid $primary-color; + .photo{ + display: inline-block; + height: 30px; + width: 30px; + border-radius: 50%; + vertical-align: middle; + overflow: hidden; + img{ + width: 100%; + } + } + + .navbar-text{ + color: $white-color; + } + + .btn{ + margin: 0 5px 0 10px; + } + + &.navbar-absolute{ + position: absolute; + width: 100%; + z-index: 1050; + } + + &[data-color="blue"]{ + border-top: 2px solid $info-color; + } + + &[data-color="green"]{ + border-top: 2px solid $success-color; + } + + &[data-color="orange"]{ + border-top: 2px solid $warning-color; + } + + &[data-color="red"]{ + border-top: 2px solid $danger-color; + } + + &[data-color="primary"]{ + border-top: 2px solid $primary-color; + } + + + &.navbar-transparent{ + background: transparent !important; + } + + &.bg-white{ + .navbar-nav{ + .search-bar.input-group{ + i{ + color: $black-color; + } + } + + .search-bar.input-group .form-control{ + background: rgba($black-color,0.1); + border-radius: 4px; + } + + a.nav-link{ + color: $black-color !important; + p{ + color: $black-color; + } + } + + } + + .navbar-text, .navbar-brand{ + color: $black-color; + } + + .form-control{ + color: $black-color !important; + } + + .form-control::placeholder{ + color: $dark-gray !important; + } + + } + + &.bg-dark{ + background: $black-color !important; + } + + &.bg-primary{ + background-color: $primary-color !important; + } + + &.bg-warning{ + background-color: $warning-color !important; + } + + &.bg-info{ + background-color: $info-color !important; + } + + &.bg-success{ + background-color: darken($success-color, 10%) !important; + } + + &.bg-danger{ + background-color: $danger-color !important; + } + + .navbar-brand{ + position: fixed; + color: $white-color; + margin-left: 17px; + margin-top: -15px; + text-transform: uppercase; + font-size: $font-paragraph; + } + + .navbar-toggle button:focus, .navbar-toggler{ + outline: none; + } + +} + +.navbar-minimize-fixed{ + position: fixed; + margin-left: 40px; + margin-top: 14px; + transition: 0.3s ease; + color: white; + z-index: 20; + opacity: 0; + transition: 0.2s ease; + button{ + i { + font-size: 20px; + } + } +} + +.notification{ + background:$danger-color; + color: white; + border-radius: $border-radius-extreme; + height: 6px; + width: 6px; + position: absolute; + text-align: center; + font-size: 12px; + font-weight: 800; + top: 10px; + right: 10px; + border: 1px solid $danger-color; +} + +.navbar-nav li{ + padding: 0 10px; + a{ + color: $white-color; + } + i{ + vertical-align: middle; + font-size: 20px; + } +} diff --git a/src/assets/sass/black-dashboard/_page-header.scss b/src/assets/sass/black-dashboard/_page-header.scss new file mode 100644 index 0000000..4ac3ce3 --- /dev/null +++ b/src/assets/sass/black-dashboard/_page-header.scss @@ -0,0 +1,85 @@ +.page-header{ + min-height: 100vh; + max-height: 999px; + padding: 0; + color: $white-color; + position: relative; + + .page-header-image{ + position: absolute; + background-size: cover; + background-position: center center; + width: 100%; + height: 100%; + z-index: -1; + } + + .content-center{ + position: absolute; + top: 50%; + left: 50%; + z-index: 2; + -ms-transform: translate(-50%, -50%); + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + text-align: center; + color: #FFFFFF; + padding: 0 15px; + width: 100%; + max-width: 880px; + + } + + footer{ + position: absolute; + bottom: 0; + width: 100%; + } + + .container{ + height: 100%; + z-index: 1; + } + + .category, + .description{ + color: $opacity-8; + } + + &.page-header-small{ + min-height: 60vh; + max-height: 440px; + } + + &.page-header-mini{ + min-height: 40vh; + max-height: 340px; + } + + .title{ + margin-bottom: 15px; + } + .title + h4{ + margin-top: 10px; + } + + &:after, + &:before{ + position: absolute; + z-index: 0; + width: 100%; + height: 100%; + display: block; + left: 0; + top: 0; + content: ""; + } + + &:before{ + background-color: rgba(0,0,0,.3); + } + + &[filter-color="orange"]{ + @include linear-gradient(rgba($black-color,.20), rgba(224, 23, 3, 0.6)); + } +} diff --git a/src/assets/sass/black-dashboard/_responsive.scss b/src/assets/sass/black-dashboard/_responsive.scss new file mode 100644 index 0000000..9f52e97 --- /dev/null +++ b/src/assets/sass/black-dashboard/_responsive.scss @@ -0,0 +1,510 @@ +@media screen and (max-width: 991px){ + .profile-photo .profile-photo-small{ + margin-left: -2px; + } + + .button-dropdown{ + display: none; + } + + #searchModal .modal-dialog{ + margin: 20px; + } + + #minimizeSidebar{ + display: none; + } + + .navbar{ + .container-fluid{ + padding-right: 15px; + padding-left: 15px; + } + + .navbar-collapse{ + .input-group{ + margin: 0; + margin-top: 5px; + } + } + + .navbar-nav{ + .nav-item:first-child{ + margin-top: 10px; + } + .nav-item:not(:last-child){ + margin-bottom: 10px; + } + a.nav-link{ + i{ + opacity: 1; + margin-left: 5px; + } + p{ + display: inline-block; + text-transform: uppercase; + margin-left: 5px; + } + } + + #searchModal .modal-dialog{ + padding: 0 40px; + } + } + + .dropdown.show .dropdown-menu{ + display: block; + + } + + .dropdown .dropdown-menu{ + display: none; + li a{ + color: $black-color; + } + } + + .dropdown.show .dropdown-menu, + .dropdown .dropdown-menu{ + background-color: transparent; + border: 0; + transition: none; + -webkit-box-shadow: none; + box-shadow: none; + width: auto; + margin: 0px 1rem; + margin-top: 0px; + + &:before{ + display: none; + } + } + + .dropdown-menu .dropdown-item:focus, + .dropdown-menu .dropdown-item:hover{ + color: $white-color; + } + + &.bg-white .dropdown-menu .dropdown-item:focus, + &.bg-white .dropdown-menu .dropdown-item:hover{ + color: $default-color; + } + + button.navbar-toggler[data-target="#navigation"]{ + padding-top: 0; + } + + .navbar-toggler-bar{ + display: block; + position: relative; + width: 22px; + height: 1px; + border-radius: 1px; + background: $white-bg; + + &.navbar-kebab{ + height: 4px; + width: 4px; + margin-bottom: 3px; + border-radius: 50%; + } + + & + .navbar-toggler-bar{ + margin-top: 7px; + } + + & + .navbar-toggler-bar.navbar-kebab{ + margin-top: 0px; + } + + &.bar2{ + width: 17px; + transition: width .2s linear; + } + } + + &.bg-white:not(.navbar-transparent) .navbar-toggler-bar{ + background-color: $default-color; + } + + & .toggled .navbar-toggler-bar{ + width: 24px; + + & + .navbar-toggler-bar{ + margin-top: 5px; + } + } + + .navbar-brand{ + margin-left: 20px; + position: relative; + } + + + + } + + .rtl .navbar > .container-fluid .navbar-brand{ + margin-right: 10px; + margin-left: 10px; + margin-top: -5px; + } + + .wrapper{ + @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1)); + } + + .sidebar{ + position: fixed; + display: block; + top: 0; + height: 100%; + width: 260px; + right: auto; + left: 0; + margin: 0; + border-radius: 0; + z-index: 1032; + visibility: visible; + overflow-y: visible; + padding: 0; + @include transition(0.5s, cubic-bezier(0.685, 0.0473, 0.346, 1)); + @include transform-translate-x(-260px); + } + .nav-open{ + .main-panel{ + right: 0; + @include transform-translate-x(260px); + } + + .sidebar{ + + @include transition(0.5s, cubic-bezier(0.685, 0.0473, 0.346, 1)); + @include transform-translate-x(0px); + &:before{ + content: unset; + } + } + + body{ + position: relative; + overflow-x: hidden; + } + + .menu-on-right{ + + .main-panel{ + @include transform-translate-x(-260px); + } + + .navbar-collapse, + .sidebar{ + @include transform-translate-x(0px); + } + + #bodyClick{ + right: 260px; + left: auto; + } + } + + + } + + .menu-on-right{ + .sidebar{ + left: auto; + right: 0; + @include transform-translate-x(260px); + } + } + + + + .bar1, + .bar2, + .bar3 { + outline: 1px solid transparent; + } + .bar1 { + top: 0px; + @include bar-animation($topbar-back); + } + .bar2 { + opacity: 1; + } + .bar3 { + bottom: 0px; + @include bar-animation($bottombar-back); + } + .toggled .bar1 { + top: 6px; + @include bar-animation($topbar-x); + } + .toggled .bar2 { + opacity: 0; + } + .toggled .bar3 { + bottom: 6px; + @include bar-animation($bottombar-x); + } + + @include topbar-x-rotation(); + @include topbar-back-rotation(); + @include bottombar-x-rotation(); + @include bottombar-back-rotation(); + + @-webkit-keyframes fadeIn { + 0% {opacity: 0;} + 100% {opacity: 1;} + } + @-moz-keyframes fadeIn { + 0% {opacity: 0;} + 100% {opacity: 1;} + } + @keyframes fadeIn { + 0% {opacity: 0;} + 100% {opacity: 1;} + } + + #bodyClick{ + height: 100%; + width: 100%; + position: fixed; + opacity: 1; + top: 0; + right: 0; + left: 260px; + content: ""; + z-index: 9999; + overflow-x: hidden; + background-color: transparent; + @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1)); + } + + .footer{ + .copyright{ + text-align: right; + } + } + + .section-nucleo-icons .icons-container{ + margin-top: 65px; + } + + .navbar-nav{ + .nav-link{ + i.fa, + i.tim-icons{ + opacity: .5; + } + } + } + + .main-panel{ + width: 100%; + .content{ + padding-left: 30px; + } + } + + .dropdown-toggle:after{ + display: inline-block; + width: 0; + height: 0; + margin-left: .255em; + vertical-align: .255em; + content: ""; + border-top: .3em solid; + border-right: .3em solid transparent; + border-bottom: 0; + border-left: .3em solid transparent; + + } + + .footer{ + padding-left: 0px; + } + + .rtl .footer{ + padding-right: 25px; + } +} + +@media screen and (min-width: 992px){ + .navbar-collapse{ + background: none !important; + } + + .navbar .navbar-toggle{ + display: none; + + } + + .navbar-nav{ + .nav-link{ + &.profile-photo{ + padding: 0; + margin: 7px $padding-base-horizontal; + } + } + } + + .section-nucleo-icons .icons-container{ + margin: 0 0 0 auto; + } + + .dropdown-menu .dropdown-item{ + color: $dark-gray; + } + + .footer{ + .copyright{ + float: right; + padding-right: 15px; + } + } + + + .navbar{ + .caret{ + position: absolute; + left: 80%; + top: 55%; + margin-left: 0; + } + } + + + +} + +@media screen and (max-width: 768px){ + .nav-tabs{ + display: inline-block; + width: 100%; + padding-left: 100px; + padding-right: 100px; + text-align: center; + + .nav-item > .nav-link{ + margin-bottom: 5px; + } + } + + .card-stats [class*="col-"] .statistics::after { + display: none; + } + + .main-panel .content { + padding-left: 15px; + padding-right: 15px; + } + + .rtl .main-panel .content{ + padding-left: 15px; + padding-right: 15px; + } + + .footer{ + nav{ + display: block; + margin-bottom: 5px; + float: none; + } + } + + .landing-page .section-story-overview .image-container:nth-child(2){ + margin-left: 0; + margin-bottom: 30px; + } + .card-timeline { + .timeline{ + &:before{ + left: 5%; + } + + > li > .timeline-badge{ + left: 5%; + } + + > li > .timeline-panel{ + float: right; + width: 86%; + + &:before{ + border-left-width: 0; + border-right-width: 15px; + left: -15px; + right: auto; + } + + &:after{ + border-left-width: 0; + border-right-width: 14px; + left: -14px; + right: auto; + } + } + } + } +} + +@media screen and (max-width: 576px){ + .navbar[class*='navbar-toggleable-'] .container{ + margin-left: 0; + margin-right: 0; + } + + .card-contributions .card-stats{ + flex-direction: column; + + .bootstrap-switch{ + margin-bottom: 15px; + } + } + + .footer{ + .copyright{ + text-align: center; + } + } + + .section-nucleo-icons{ + .icons-container{ + i{ + font-size: 30px; + + &:nth-child(6){ + font-size: 48px; + } + } + } + } + + .page-header{ + .container h6.category-absolute{ + width: 90%; + } + } + + .form-horizontal .col-form-label, .form-horizontal .label-on-right{ + text-align: inherit; + padding-top: 0; + code{ + padding: 0 10px; + } + } + + .card-wizard .card-footer .pull-left{ + padding-left: 0; + float: none; + text-align: center; + } + + .card-wizard .card-footer .pull-right{ + padding-right: 0; + float: none; + text-align: center; + } +} diff --git a/src/assets/sass/black-dashboard/_rtl.scss b/src/assets/sass/black-dashboard/_rtl.scss new file mode 100644 index 0000000..51088bf --- /dev/null +++ b/src/assets/sass/black-dashboard/_rtl.scss @@ -0,0 +1,73 @@ +.rtl{ + .sidebar, + .bootstrap-navbar{ + right: 0; + left: auto; + margin-right: 20px; + margin-left: 0; + + .nav{ + i{ + float: right; + margin-left: 15px; + margin-right: 0; + } + + p{ + margin-right: 45px; + text-align: right; + } + + .caret{ + left: 11px; + right: auto; + } + } + + .logo{ + a.logo-mini{ + float: right; + margin-right: 20px; + margin-left: 10px; + } + + .simple-text{ + text-align: right; + } + } + } + + .btn.dropdown-toggle:after{ + margin-right: 5px; + } + + .main-panel .content{ + padding: 80px 280px 30px 30px; + } + + .footer{ + padding: 24px 300px 24px 0; + } + + .search-bar{ + margin-left: 0; + } + + .card.card-tasks .dropdown-menu{ + margin-right: -115px; + } + + @media screen and (max-width: 991px){ + + .sidebar{ + margin-right: 0; + } + .main-panel .content{ + padding-right: 50px; + } + } + + .navbar { + overflow-x: hidden; + } +} diff --git a/src/assets/sass/black-dashboard/_sidebar-and-main-panel.scss b/src/assets/sass/black-dashboard/_sidebar-and-main-panel.scss new file mode 100644 index 0000000..d864d07 --- /dev/null +++ b/src/assets/sass/black-dashboard/_sidebar-and-main-panel.scss @@ -0,0 +1,323 @@ +.wrapper{ + position: relative; + top: 0; + height: 100vh; + + &.wrapper-full-page{ + min-height: 100vh; + height: auto; + } +} + +.sidebar, +.off-canvas-sidebar{ + height: calc(100vh - 90px); + width: 230px; + position: fixed; + top: 0; + left: 0; + z-index: 1; + background-size: cover; + background-position: center center; + display: block; + background: linear-gradient(to bottom, $primary-color 0%, $primary-states-color 100%); + box-shadow:0px 0px 45px 0px rgba(0,0,0,0.6); + margin-top: 80px; + margin-left: 20px; + border-radius: 5px; + + &[data-color="blue"]{ + @include linear-gradient($info-states-color, $info-color); + &:before{ + border-bottom-color: $info-color; + } + } + &[data-color="green"]{ + @include linear-gradient($success-states-color, $success-color); + &:before{ + border-bottom-color: $success-color; + } + } + + + .sidebar-wrapper{ + width: 100%; + min-height: 100%; + max-height: calc(100vh - 705px); + z-index: 4; + position: relative; + overflow: auto; + + .dropdown .dropdown-backdrop{ + display: none !important; + } + + .navbar-form{ + border: none; + } + } + + .navbar-minimize{ + position: absolute; + right: 20px; + top: 2px; + opacity: 1; + + @extend .animation-transition-general; + + } + .logo-tim{ + border-radius: 50%; + border: 1px solid #333; + display: block; + height: 61px; + width: 61px; + float: left; + overflow: hidden; + + img{ + width: 60px; + height: 60px; + } + } + + .nav{ + margin-top: 20px; + display: block; + + .caret{ + top: 14px; + position: absolute; + right: 10px; + } + + li{ + > a + div .nav li > a{ + margin-top: 7px; + } + + > a{ + margin: 10px 15px 0; + border-radius: $btn-round-radius; + color: $white-color; + display: block; + text-decoration: none; + position: relative; + text-transform: uppercase; + cursor: pointer; + font-size: $font-size-mini; + padding: 10px 8px; + line-height: $line-height-nav-link; + } + + &:first-child > a{ + margin: 0 15px; + } + + &:hover:not(.active) > a, + &:focus:not(.active) > a{ + + + i,p{ + color: $white-color; + } + } + + &.active > a{ + i,p{ + color: $white-color; + } + &:before{ + content: " "; + position: absolute; + height: 6px; + width: 6px; + top: 22px; + left: -4px; + background: #fff; + border-radius: 50%; + } + } + } + + p{ + margin: 0; + line-height: 30px; + position: relative; + display: block; + height: auto; + white-space: nowrap; + @extend .animation-transition-general; + } + + i{ + font-size: 20px; + float: left; + margin-right: 12px; + line-height: 30px; + width: 34px; + text-align: center; + color: rgba($white-color,0.8); + position: relative; + } + } + + .sidebar-background{ + position: absolute; + z-index: 1; + height: 100%; + width: 100%; + display: block; + top: 0; + left: 0; + background-size: cover; + background-position: center center; + + &:after{ + position: absolute; + z-index: 3; + width: 100%; + height: 100%; + content: ""; + display: block; + background: #FFFFFF; + opacity: 1; + } + } + + .logo{ + position: relative; + padding: $padding-base-vertical $padding-base-horizontal; + z-index: 4; + + a.logo-mini, + a.logo-normal{ + @extend .animation-transition-general; + } + + a.logo-mini{ + opacity: 1; + float: left; + width: 34px; + text-align: center; + margin-left: 10px; + margin-right: 12px; + } + + a.logo-normal{ + display: block; + opacity: 1; + @include transform-translate-x(0px); + } + + &:after{ + content: ''; + position: absolute; + bottom: 0; + right: 15px; + height: 1px; + width: calc(100% - 30px); + background-color: $opacity-5; + + } + + p{ + float: left; + font-size: 20px; + margin: 10px 10px; + color: $white-color; + line-height: 20px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + } + + .simple-text{ + text-transform: uppercase; + padding: $padding-base-vertical 0; + display: block; + white-space: nowrap; + font-size: $font-size-large; + color: $white-color; + text-decoration: none; + font-weight: $font-weight-normal; + line-height: 30px; + overflow: hidden; + } + } + + .logo-tim{ + border-radius: 50%; + border: 1px solid #333; + display: block; + height: 61px; + width: 61px; + float: left; + overflow: hidden; + + img{ + width: 60px; + height: 60px; + } + } + +} + +.visible-on-sidebar-regular{ + display: inline-block !important; +} + + +.off-canvas-sidebar{ + .nav { + > li > a, + > li > a:hover{ + color: $white-color; + } + + > li > a:focus{ + background: rgba(200, 200, 200, 0.2); + } + } +} + + +.main-panel{ + position: relative; + float: right; + width: 100%; + min-height: 100vh; + background: linear-gradient($background-black, $background-states-black); + + @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1)); + + > .navbar{ + margin-bottom: 0; + } + + + .header{ + margin-bottom: 50px; + } + .content{ + padding: 80px 30px 30px 280px; + min-height: calc(100vh - 70px); + } + + .navbar-minimize{ + button{ + margin-left: 25px; + i{ + color: $white-color; + font-size: 20px; + } + } + } +} + + +.perfect-scrollbar-on{ + .sidebar, + .main-panel{ + height: 100%; + max-height: 100%; + } +} diff --git a/src/assets/sass/black-dashboard/_tables.scss b/src/assets/sass/black-dashboard/_tables.scss new file mode 100644 index 0000000..3ef41e6 --- /dev/null +++ b/src/assets/sass/black-dashboard/_tables.scss @@ -0,0 +1,234 @@ +.table{ + + > tbody > tr > td { + color: rgba(255, 255, 255, 0.7) !important; + + .photo { + height: 30px; + width: 30px; + border-radius: 50%; + overflow: hidden; + margin: 0 auto; + + img { + width: 100%; + } + } + } + + > tbody > tr.table-success > td{ + background-color: darken($success-color,10%); + } + + > tbody > tr.table-info > td{ + background-color: $info-color; + } + + > tbody > tr.table-primary > td{ + background-color: $primary-color; + } + + > tbody > tr.table-warning > td{ + background-color: $warning-color; + } + > tbody > tr.table-danger > td{ + background-color: $danger-color; + } + + + .img-wrapper{ + width: 40px; + height: 40px; + border-radius: 50%; + overflow: hidden; + margin: 0 auto; + } + + .img-row{ + max-width: 60px; + width: 60px; + } + + .form-check{ + margin: 0; + margin-top: 5px; + + & label .form-check-sign::before, + & label .form-check-sign::after{ + top: -17px; + left: 4px; + } + } + + .btn{ + margin: 0; + } + + small,.small{ + font-weight: 300; + } + + .card-tasks .card-body &{ + margin-bottom: 0; + + > thead > tr > th, + > tbody > tr > th, + > tfoot > tr > th, + > thead > tr > td, + > tbody > tr > td, + > tfoot > tr > td{ + padding-top: 5px; + padding-bottom: 5px; + } + } + + > thead > tr > th{ + border-bottom-width: 1px; + font-size: 12px; + text-transform: uppercase; + font-weight: $font-weight-bold; + border: 0; + color: rgba($white-color, 0.7); + } + + .radio, + .checkbox{ + margin-top: 0; + margin-bottom: 0; + padding: 0; + width: 15px; + + .icons{ + position: relative; + } + + label{ + &:after, + &:before{ + top: -17px; + left: -3px; + } + } + } + > thead > tr > th, + > tbody > tr > th, + > tfoot > tr > th, + > thead > tr > td, + > tbody > tr > td, + > tfoot > tr > td{ + border-color: rgba(255, 255, 255, 0.1); + padding: 12px 7px; + vertical-align: middle; + } + + &.table-shopping tbody tr:last-child td{ + border: none; + } + + .th-description{ + max-width: 150px; + } + .td-price{ + font-size: 26px; + font-weight: $font-weight-light; + margin-top: 5px; + position: relative; + top: 4px; + text-align: right; + } + .td-total{ + font-weight: $font-weight-bold; + font-size: $font-size-h5; + padding-top: 20px; + text-align: right; + } + + .td-actions .btn{ + margin: 0px; + } + + > tbody > tr{ + position: relative; + } + + > tfoot > tr { + color: hsla(0,0%,100%,.7); + text-transform: uppercase; + } + +} + +.table-shopping{ + > thead > tr > th{ + text-transform: uppercase; + } + > tbody > tr > td{ + font-size: $font-paragraph; + + b{ + display: block; + margin-bottom: 5px; + } + } + .td-name{ + font-weight: $font-weight-normal; + font-size: 1.5em; + small{ + color: $dark-gray; + font-size: 0.75em; + font-weight: $font-weight-light; + } + } + .td-number{ + font-weight: $font-weight-light; + + .btn-group { + padding-right: 15px; + } + } + .td-name{ + min-width: 200px; + } + .td-number{ + text-align: right; + min-width: 170px; + + small{ + margin-right: 3px; + } + } + + .img-container{ + width: 120px; + max-height: 160px; + overflow: hidden; + display: block; + + img{ + width: 100%; + } + } +} + +.table-responsive{ + overflow: scroll; + padding-bottom: 10px; +} + +#tables .table-responsive{ + margin-bottom: 30px; +} + +table.tablesorter thead tr .header{ + //background-image: url("../../../assets/img/dashboard/pro/bg.gif"); + background-repeat: no-repeat; + background-position: center right; + cursor: pointer; +} + +table.tablesorter thead tr .headerSortUp { + //background-image: url("../../../assets/img/dashboard/pro/asc.gif"); +} +table.tablesorter thead tr .headerSortDown { + //background-image: url("../../../assets/img/dashboard/pro/desc.gif"); +} diff --git a/src/assets/sass/black-dashboard/_typography.scss b/src/assets/sass/black-dashboard/_typography.scss new file mode 100644 index 0000000..02f54eb --- /dev/null +++ b/src/assets/sass/black-dashboard/_typography.scss @@ -0,0 +1,198 @@ +button, +input, +optgroup, +select, +textarea{ + font-family: $sans-serif-family; +} +.card{ + h1,h2,h3,h4,h5,h6,p{ + color: rgba($white-color,0.8); + } +} +h1,h2,h3,h4,h5,h6{ + font-weight: $font-weight-normal; + color: rgba($white-color,0.8); +} + +a{ + color: $primary-states-color; + font-weight: $font-weight-light; + &:hover, + &:focus{ + color: $primary-color; + } +} +h1, .h1 { + font-size: $font-size-h1; + font-weight: $font-weight-normal; + line-height: 1.05; + margin-bottom: $margin-base-vertical * 2; + + small{ + font-weight: $font-weight-bold; + text-transform: uppercase; + opacity: .8; + } + +} +h2, .h2{ + font-size: $font-size-h2; + margin-bottom: $margin-base-vertical * 2; + font-weight: $font-weight-normal; + +} +h3, .h3{ + font-size: $font-size-h3; + margin-bottom: $margin-base-vertical * 2; + font-weight: $font-weight-normal; + line-height: 1.4em; +} +h4, .h4{ + font-size: $font-size-h4; + line-height: 1.45em; + margin-bottom: $margin-base-vertical; + font-weight: $font-weight-normal; + + & + .category, + &.title + .category{ + margin-top: -10px; + } +} +h5, .h5 { + font-size: $font-size-h5; + line-height: 1.4em; + margin-bottom: 15px; + font-weight: $font-weight-normal; +} +h6, .h6{ + font-size: $font-size-h6; + font-weight: $font-weight-normal; + text-transform: uppercase; + font-weight: $font-weight-semi; +} +p{ + color: rgba($white-color,0.8); + font-weight: $font-weight-light; + margin-bottom: 5px; + + &.description{ + font-size: 1.14em; + } +} + +// i.fa{ +// font-size: 18px; +// position: relative; +// top: 1px; +// } + +.title{ + font-weight: $font-weight-semi; + &.title-up{ + text-transform: uppercase; + + a{ + color: $black-color; + text-decoration: none; + } + } + & + .category{ + margin-top: -10px; + } +} + +.description, +.card-description, +.footer-big p, +.card .footer .stats{ + color: $dark-gray; + font-weight: $font-weight-light; +} +.category, +.card-category{ + text-transform: capitalize; + font-weight: $font-weight-normal; + color: rgba($white-color, 0.6); + font-size: $font-size-small; +} + +.card-category{ + font-size: $font-size-h6; +} + +.text-primary, +a.text-primary:focus, a.text-primary:hover { + color: $brand-primary !important; +} +.text-info, +a.text-info:focus, a.text-info:hover { + color: $brand-info !important; +} +.text-success, +a.text-success:focus, a.text-success:hover { + color: $brand-success !important; +} +.text-warning, +a.text-warning:focus, a.text-warning:hover { + color: $brand-warning !important; +} +.text-danger, +a.text-danger:focus, a.text-danger:hover { + color: $brand-danger !important; +} + +.text-gray, +a.text-gray:focus, a.text-gray:hover{ + color: $light-gray !important; +} + + +.blockquote{ + border-left: none; + border: 1px solid $default-color; + padding: 20px; + font-size: $font-size-blockquote; + line-height: 1.8; + + small{ + color: $default-color; + font-size: $font-size-small; + text-transform: uppercase; + } + + &.blockquote-primary{ + border-color: $primary-color; + color: $primary-color; + + small{ + color: $primary-color; + } + } + + &.blockquote-danger{ + border-color: $danger-color; + color: $danger-color; + + small{ + color: $danger-color; + } + } + + &.blockquote-white{ + border-color: $opacity-8; + color: $white-color; + + small{ + color: $opacity-8; + } + } +} + +ul li, ol li{ + color: $white-color; +} + +pre{ + color: rgba($white-color,0.8); +} diff --git a/src/assets/sass/black-dashboard/_variables.scss b/src/assets/sass/black-dashboard/_variables.scss new file mode 100644 index 0000000..ad2ca2a --- /dev/null +++ b/src/assets/sass/black-dashboard/_variables.scss @@ -0,0 +1,310 @@ +//== Buttons +// +//## For each of Bootstrap's buttons, define text, background and border color. + +$sans-serif-family: 'Poppins'; + +$none: 0 !default; +$border-thin: 1px !default; +$border-thick: 2px !default; + +$white-color: #FFFFFF !default; +$white-bg: #FFFFFF !default; +$orange-bg: #e95e38 !default; + +$smoke-bg: #F5F5F5 !default; +$light-black: #444 !default; + +$black-bg: rgba(30,30,30,.97) !default; + +$black-color: #222a42 !default; +$black-states-color: #1d253b !default; +$black-hr: #444444 !default; + +$hr-line: rgba(0,0,0, .1) !default; + +$dark-blue: #1c2236; + +$light-gray: #E3E3E3 !default; +$medium-gray: #DDDDDD !default; +$dark-gray: #9A9A9A !default; + +$opacity-gray-3: rgba(222,222,222, .3) !default; +$opacity-gray-5: rgba(222,222,222, .5) !default; +$opacity-gray-8: rgba(222,222,222, .8) !default; + + +$opacity-5: rgba(255,255,255, .5) !default; +$opacity-8: rgba(255,255,255, .8) !default; + +$datepicker-color-days: rgba(255,255,255, .8) !default; +$datepicker-color-old-new-days: rgba(255,255,255, .4) !default; + + +$opacity-1: rgba(255,255,255, .1) !default; +$opacity-2: rgba(255,255,255, .2) !default; + +$transparent-bg: transparent !default; +$dark-background: #555555 !default; + +$background-white: #f5f6fa !default; + +$background-black: #1e1e2f !default; +$background-states-black: #1e1e24 !default; + +$card-black-background: #27293d !default; + +$default-color: #344675 !default; +$default-states-color: #263148 !default; +$default-color-opacity: rgba(182, 182, 182, .6) !default; + +$primary-color: #e14eca !default; +$primary-states-color: #ba54f5 !default; +$primary-color-opacity: rgba(249, 99, 50, .3) !default; +$primary-color-alert: rgba(249, 99, 50, .8) !default; + +$success-color: #00f2c3 !default; +$success-states-color: #0098f0 !default; +$success-color-opacity: rgba(24, 206, 15, .3) !default; +$success-color-alert: rgba(24, 206, 15, .8) !default; + +$info-color: #1d8cf8 !default; +$info-states-color: #3358f4 !default; +$info-color-opacity: rgba(44, 168, 255, .3) !default; +$info-color-alert: rgba(44, 168, 255, .8) !default; + +$warning-color: #ff8d72 !default; +$warning-states-color: #ff6491 !default; +$warning-color-opacity: rgba(255, 178, 54, .3) !default; +$warning-color-alert: rgba(255, 178, 54, .8) !default; + +$danger-color: #fd5d93 !default; +$danger-states-color: #ec250d !default; +$danger-color-opacity: rgba(255, 54, 54, .3) !default; +$danger-color-alert: rgba(255, 54, 54, .8) !default; + +$orange-color: #f96332 !default; + +/* navbar color */ + +$navbar-color: #1a1e34 !default; +/* brand Colors */ +$brand-primary: $primary-color !default; +$brand-info: $info-color !default; +$brand-success: $success-color !default; +$brand-warning: $warning-color !default; +$brand-danger: $danger-color !default; +$brand-inverse: $black-color !default; + +$link-disabled-color: #666666 !default; + +/* light colors */ +$light-blue: rgba($primary-color, .2); +$light-azure: rgba($info-color, .2); +$light-green: rgba($success-color, .2); +$light-orange: rgba($warning-color, .2); +$light-red: rgba($danger-color, .2); + +//== Components +// + +$padding-input-vertical: 11px !default; +$padding-input-horizontal: 19px !default; + +$padding-btn-vertical: 11px !default; +$padding-btn-horizontal: 40px !default; + +$padding-base-vertical: .5rem !default; +$padding-base-horizontal: .7rem !default; + +$padding-round-horizontal: 23px !default; + +$padding-simple-vertical: 10px !default; +$padding-simple-horizontal: 17px !default; + +$padding-large-vertical: 15px !default; +$padding-large-horizontal: 48px !default; + +$padding-small-vertical: 5px !default; +$padding-small-horizontal: 15px !default; + +// $padding-xs-vertical: 1px !default; +// $padding-xs-horizontal: 5px !default; + +$padding-label-vertical: 2px !default; +$padding-label-horizontal: 12px !default; + +$margin-large-vertical: 30px !default; +$margin-base-vertical: 15px !default; + +$margin-base-horizontal: 15px !default; + +$margin-bottom: 10px !default; +$border: 1px solid !default; +$border-radius-extra-small: 0.1428rem !default; +$border-radius-small: 0.2857rem !default; +$border-radius-large: 0.4285rem !default; +$border-radius-extreme: 0.875rem !default; + +$border-radius-large-top: $border-radius-large $border-radius-large 0 0 !default; +$border-radius-large-bottom: 0 0 $border-radius-large $border-radius-large !default; + +$btn-round-radius: 30px !default; + +$height-base: 55px !default; + +$btn-icon-size: 3.5rem !default; +$btn-icon-size-regular: 2.375rem !default; +$btn-icon-font-size-regular: 0.9375rem !default; +$btn-icon-font-size-small: 0.6875rem !default; +$btn-icon-size-small: 1.875rem !default; +$btn-icon-font-size-lg: 1.325rem !default; +$btn-icon-size-lg: 3.6rem !default; + +$font-size-h1: 2.0625rem !default; // ~ 33px +$font-size-h2: 1.6875rem !default; // ~ 27px +$font-size-h3: 1.4375rem !default; // ~ 23px +$font-size-h4: 1.0625rem !default; // ~ 17px +$font-size-h5: 0.8125rem !default; // ~ 13px +$font-size-h6: 0.75rem !default; // ~ 12px + +$font-paragraph: 1rem !default; +$font-size-navbar: 1em !default; +$font-size-mini: 0.7142em !default; +$font-size-small: 0.8571em !default; +$font-size-base: 14px !default; +$font-size-large: 1em !default; +$font-size-large-navbar: 20px !default; +$font-size-blockquote: 1.1em !default; // ~ 15px + +$font-weight-light: 300 !default; +$font-weight-normal: 400 !default; +$font-weight-semi: 600 !default; +$font-weight-bold: 700 !default; + +$line-height-general: 1.5 !default; +$line-height-nav-link: 1.625rem !default; +$btn-icon-line-height: 2.4em !default; +$line-height: 1.35em !default; +$line-height-lg: 54px !default; + + +$border-radius-top: 10px 10px 0 0 !default; +$border-radius-bottom: 0 0 10px 10px !default; + +$dropdown-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.125); +$box-shadow-raised: 0px 10px 25px 0px rgba(0, 0, 0, 0.3); +$box-shadow: 0 1px 20px 0px rgba(0, 0, 0, 0.1); +$sidebar-box-shadow: 0px 2px 22px 0 rgba(0, 0, 0,.20), 0px 2px 30px 0 rgba(0, 0, 0,.35); + +$general-transition-time: 300ms !default; + +$slow-transition-time: 370ms !default; +$dropdown-coordinates: 29px -50px !default; + +$fast-transition-time: 150ms !default; +$select-coordinates: 50% -40px !default; + +$transition-linear: linear !default; +$transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default; +$transition-ease: ease 0s; + + +//$navbar-padding-a: 9px 13px; +$navbar-margin-a: 15px 0px; + +$padding-social-a: 10px 5px; + +$navbar-margin-a-btn: 15px 0px; +$navbar-margin-a-btn-round: 16px 0px; + +$navbar-padding-a-icons: 6px 15px; +$navbar-margin-a-icons: 6px 3px; + +$navbar-padding-base: 0.625rem; +//$navbar-margin-brand: 5px 0px; + +$navbar-margin-brand-icons: 12px auto; +$navbar-margin-btn: 15px 3px; + +$height-icon-sm: 32px; +$width-icon-sm: 32px; +$padding-icon-sm: 4px; +$border-radius-icon-sm: 7px; + +$height-icon-message: 40px; +$width-icon-message: 40px; + +$height-icon-message-sm: 20px; +$width-icon-message-sm: 20px; + +$white-navbar: rgba(#FFFFFF, .96); +$primary-navbar: rgba(#34ACDC, .98); +$info-navbar: rgba(#5BCAFF, .98); +$success-navbar: rgba(#4CD964, .98); +$warning-navbar: rgba(#FF9500, .98); +$danger-navbar: rgba(#FF4C40, .98); + +$topbar-x: topbar-x !default; +$topbar-back: topbar-back !default; +$bottombar-x: bottombar-x !default; +$bottombar-back: bottombar-back !default; + +//Nucleo Icons + +$nc-font-path: '../fonts' !default; +$nc-font-size-base: 14px !default; +$nc-css-prefix: tim !default; +$nc-background-color: #eee !default; +$nc-li-width: (30em / 14) !default; +$nc-padding-width: (1em/3) !default; + +// Social icons color +$social-twitter: #55acee !default; +$social-twitter-state-color: darken(#55acee, 5%) !default; + +$social-facebook: #3b5998 !default; +$social-facebook-state-color: darken(#3b5998, 5%) !default; + +$social-google: #dd4b39 !default; +$social-google-state-color: darken(#dd4b39, 5%) !default; + +$social-linkedin: #0077B5 !default; +$social-linkedin-state-color: darken(#0077B5, 5%) !default; + +// Social icons color +$social-twitter: #55acee !default; +$social-twitter-state-color: lighten(#55acee, 6%) !default; + +$social-facebook: #3b5998 !default; +$social-facebook-state-color: lighten(#3b5998, 6%) !default; + +$social-google: #dd4b39 !default; +$social-google-state-color: lighten(#dd4b39, 6%) !default; + +$social-linkedin: #0077B5 !default; +$social-linkedin-state-color: lighten(#0077B5, 6%) !default; + +$social-pinterest: #cc2127 !default; +$social-pinterest-state-color: lighten(#cc2127, 6%) !default; + +$social-dribbble: #ea4c89 !default; +$social-dribbble-state-color: lighten(#ea4c89, 6%) !default; + +$social-github: #333333 !default; +$social-github-state-color: #ccc !default; + +$social-youtube: #e52d27 !default; +$social-youtube-state-color: lighten(#e52d27, 6%) !default; + +$social-instagram: #125688 !default; +$social-instagram-state-color: lighten(#125688, 6%) !default; + +$social-reddit: #ff4500 !default; +$social-reddit-state-color: lighten(#ff4500, 6%) !default; + +$social-tumblr: #35465c !default; +$social-tumblr-state-color: lighten(#35465c, 6%) !default; + +$social-behance: #1769ff !default; +$social-behance-state-color: lighten(#1769ff, 6%) !default; diff --git a/src/assets/sass/black-dashboard/_white-content.scss b/src/assets/sass/black-dashboard/_white-content.scss new file mode 100644 index 0000000..250584c --- /dev/null +++ b/src/assets/sass/black-dashboard/_white-content.scss @@ -0,0 +1,286 @@ +.white-content{ + background: $background-white; + + .navbar.navbar-transparent .navbar-brand{ + color: $black-states-color; + } + + .navbar.navbar-transparent .navbar-toggler-bar{ + background: $black-states-color; + } + .navbar.navbar-transparent .navbar-nav li a:not(.dropdown-item) { + color: $black-states-color; + } + + .sidebar{ + box-shadow: 0 2px 22px 0 rgba(0,0,0,.1), 0 4px 20px 0 rgba(0,0,0,.15); + } + + .main-panel{ + background: #f5f6fa; + + h1, h2, h3, h4, h5, h6, p, ol li, ul li, pre { + color: $black-states-color; + } + + .navbar.navbar-transparent .navbar-minimize button i{ + color: $black-states-color; + } + + .navbar.navbar-transparent .search-bar.input-group i{ + color: $black-states-color; + } + .navbar.navbar-transparent .search-bar.input-group .form-control{ + color: $default-color; + &::placeholder{ + color: $dark-gray; + } + } + + .font-icon-detail i{ + color: $black-color; + } + + .btn:not([data-action]):hover{ + box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08); + } + + .btn-neutral.btn-link{ + color: rgba($black-color, 0.7); + } + + //style for inputs + + @include form-control-placeholder(rgba($black-color,0.4), 1); + .has-danger{ + .form-control, .input-group-prepend .input-group-text{ + border-color: $danger-states-color; + } + } + + .input-group-prepend .input-group-text{ + border-color: rgba($black-states-color,0.5); + color: $black-states-color; + } + + .form-control{ + color: $black-color; + border-color: rgba($black-states-color,0.5); + &:focus{ + border-color: $primary-color; + } + } + + .form-group.no-border, + .input-group.no-border{ + .form-control, + .form-control + .input-group-prepend .input-group-text, + .form-control + .input-group-append .input-group-text, + .input-group-prepend .input-group-text, + .input-group-append .input-group-text{ + background-color: $opacity-gray-3; + &:focus, + &:active, + &:active{ + background-color: $opacity-gray-5; + } + } + + .form-control{ + &:focus{ + & + .input-group-prepend .input-group-text, + & + .input-group-append .input-group-text{ + + background-color: $transparent-bg; + } + } + } + + + } + + .input-group[disabled]{ + .input-group-prepend .input-group-text, + .input-group-append .input-group-text{ + background-color: $black-color; + } + } + + .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control{ + background: $light-gray; + border-color: rgba($black-states-color,0.3); + } + + .input-group-focus{ + .input-group-prepend .input-group-text, + .input-group-append .input-group-text, + .form-control{ + background-color: $white-bg; + border-color: $primary-color; + } + + &.no-border{ + .input-group-prepend .input-group-text, + .input-group-append .input-group-text{ + + background-color: $opacity-gray-5; + } + } + } + .input-group-prepend .input-group-text { + border-right: none; + } + + .input-group-append .input-group-text { + border-left: none; + } + + .has-danger .form-control:focus, .has-success.input-group-focus .input-group-append .input-group-text, .has-success.input-group-focus .input-group-prepend .input-group-text { + border-color: $danger-states-color; + } + + .has-success .form-control:focus, .has-success.input-group-focus .input-group-append .input-group-text, .has-success.input-group-focus .input-group-prepend .input-group-text { + border-color: darken($success-color, 10%); + } + + + .btn.btn-link{ + &:hover,&:active, &:focus{ + color: $dark-gray !important; + } + } + + .btn-group .btn.active{ + box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08); + } + + .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label{ + background: darken($background-white,10%); + } + + .bootstrap-switch-off:before{ + background: rgba(darken($background-white,10%),0.5); + + } + + + .card:not(.card-pricing){ + background: $white-color; + box-shadow: 0 1px 15px 0 rgba(123, 123, 123, 0.05); + .card-header{ + color: $black-color; + a[data-toggle="collapse"]{ + color: $black-color; + } + } + .card-header .card-title, .card-body .card-title{ + color: $black-states-color; + } + + .card-body{ + .card-category, .card-description{ + color: $black-states-color; + } + } + + + label:not(.btn){ + color: $default-color; + } + + .pagination .page-item:not(.active) .page-link{ + color: $black-states-color; + &:hover{ + background: rgba($dark-gray,0.1); + } + } + + &:not(.card-wizard).nav-pills .nav-item .nav-link { + color: #444; + background-color: hsla(0,0%,87%,.3); + &:not(.active):hover{ + background: hsla(0,0%,87%,.5); + } + &.active{ + color: $white-color; + + } + } + + .tab-content .tab-pane { + color: #444; + } + + + .card{ + box-shadow: none; + } + + .card-collapse{ + .card{ + .card-body{ + color: $dark-gray; + } + } + } + + &.card-contributions{ + span{ + color: $dark-gray; + } + .bootstrap-switch-container{ + span{ + color: $white-color; + } + } + } + &.card-plain{ + background: $transparent-bg; + box-shadow: none; + } + + &.card-tasks{ + .card-body{ + i{ + color: rgba(34,42,66,0.7); + &:hover{ + color: #222a42; + } + } + } + } + } + + + .table{ + + > tbody > tr > td { + color: rgba($black-color, 0.7) !important; + + } + + > thead > tr > th, + > tbody > tr > th, + > tfoot > tr > th, + > thead > tr > td, + > tbody > tr > td, + > tfoot > tr > td{ + border-color: rgba($black-color, 0.2); + padding: 12px 7px; + vertical-align: middle; + } + + > thead > tr > th, button.btn-neutral.btn-link{ + color: rgba($black-color, 0.7); + } + } + + .footer ul li a{ + color: $black-states-color; + } + + .footer .copyright{ + color: $black-states-color; + } + } +} diff --git a/src/assets/sass/black-dashboard/cards/_card-animation-on-hover.scss b/src/assets/sass/black-dashboard/cards/_card-animation-on-hover.scss new file mode 100644 index 0000000..e778d7e --- /dev/null +++ b/src/assets/sass/black-dashboard/cards/_card-animation-on-hover.scss @@ -0,0 +1,8 @@ + +.card-animation-on-hover{ + transition: all .3s cubic-bezier(.34,1.61,.7,1); + &:hover{ + transform: translate3d(0,-5px,0); + transition: all .3s cubic-bezier(.34,1.61,.7,1); + } +} diff --git a/src/assets/sass/black-dashboard/cards/_card-chart.scss b/src/assets/sass/black-dashboard/cards/_card-chart.scss new file mode 100644 index 0000000..17ee28a --- /dev/null +++ b/src/assets/sass/black-dashboard/cards/_card-chart.scss @@ -0,0 +1,74 @@ +.card-chart { + overflow: hidden; + .card-header{ + .card-title{ + color: $white-color; + i{ + font-size: 16px; + margin-right: 5px; + margin-bottom: 3px; + } + } + .card-category{ + margin-bottom: 5px; + } + } + .card-body{ + padding-left: 5px; + padding-right: 5px; + .tab-space{ + padding: 0; + } + } + .table{ + margin-bottom: 0; + + td{ + border-top: none; + border-bottom: 1px solid rgba($white-color,0.1); + } + } + + .card-progress { + margin-top: 30px; + padding: 0 10px; + } + + .chart-area { + height: 220px; + width: 100%; + } + .card-footer { + margin-top: 15px; + + .stats{ + color: $dark-gray; + } + } + + .dropdown{ + position: absolute; + right: 20px; + top: 20px; + + .btn{ + margin: 0; + } + } + + &.card-chart-pie{ + .chart-area{ + padding: 10px 0 25px; + height: auto; + } + + .card-title{ + margin-bottom: 10px; + i{ + font-size: 1rem; + } + } + + } + +} diff --git a/src/assets/sass/black-dashboard/cards/_card-map.scss b/src/assets/sass/black-dashboard/cards/_card-map.scss new file mode 100644 index 0000000..9614625 --- /dev/null +++ b/src/assets/sass/black-dashboard/cards/_card-map.scss @@ -0,0 +1,3 @@ +.map{ + height: 500px; +} diff --git a/src/assets/sass/black-dashboard/cards/_card-plain.scss b/src/assets/sass/black-dashboard/cards/_card-plain.scss new file mode 100644 index 0000000..4290f26 --- /dev/null +++ b/src/assets/sass/black-dashboard/cards/_card-plain.scss @@ -0,0 +1,17 @@ + +.card-plain{ + background: transparent; + box-shadow: none; + + .card-header, + .card-footer{ + margin-left: 0; + margin-right: 0; + background-color: transparent; + } + + &:not(.card-subcategories).card-body{ + padding-left: 0; + padding-right: 0; + } +} diff --git a/src/assets/sass/black-dashboard/cards/_card-task.scss b/src/assets/sass/black-dashboard/cards/_card-task.scss new file mode 100644 index 0000000..afcd90f --- /dev/null +++ b/src/assets/sass/black-dashboard/cards/_card-task.scss @@ -0,0 +1,33 @@ +.card-tasks{ + height: 473px; + + .table-full-width { + max-height: 410px; + position: relative; + } + + .card-header{ + .title{ + margin-right: 20px; + font-weight: $font-weight-normal; + } + + .dropdown{ + float: right; + color: darken($white-color, 20%); + } + + } + + .card-body{ + i{ + color: $dark-gray; + font-size: 1.4em; + &:hover{ + color: $white-color; + } + } + + } + +} diff --git a/src/assets/sass/black-dashboard/cards/_card-user.scss b/src/assets/sass/black-dashboard/cards/_card-user.scss new file mode 100644 index 0000000..64cd964 --- /dev/null +++ b/src/assets/sass/black-dashboard/cards/_card-user.scss @@ -0,0 +1,77 @@ +.card-user{ + overflow: hidden; + .image{ + height: 120px; + } + + .author{ + text-align: center; + text-transform: none; + margin-top: 25px; + + a + p.description{ + margin-top: -7px; + } + + .block{ + position: absolute; + height: 100px; + width: 250px; + &.block-one{ + @include linear-gradient-right(rgba($primary-color,0.6), rgba($primary-color,0)); + @include nc-rotate(150deg,10); + margin-top: -90px; + margin-left: -50px; + } + + &.block-two{ + @include linear-gradient-right(rgba($primary-color,0.6), rgba($primary-color,0)); + @include nc-rotate(30deg,10); + margin-top: -40px; + margin-left: -100px; + } + + &.block-three{ + @include linear-gradient-right(rgba($primary-color,0.6), rgba($primary-color,0)); + @include nc-rotate(170deg,10); + margin-top: -70px; + right: -45px; + + } + + &.block-four{ + @include linear-gradient-right(rgba($primary-color,0.6), rgba($primary-color,0)); + @include nc-rotate(150deg,10); + margin-top: -25px; + right: -45px; + + } + } + } + + .avatar{ + width: 124px; + height: 124px; + border: 5px solid lighten($black-color,5%); + border-bottom-color: $transparent-bg; + position: relative; + + } + + .card-body{ + min-height: 240px; + } + + hr{ + margin: 5px 15px; + } + + .button-container{ + margin-bottom: 6px; + text-align: center; + } + + .card-description { + margin-top: 30px; + } +} diff --git a/src/assets/sass/black-dashboard/mixins/_buttons.scss b/src/assets/sass/black-dashboard/mixins/_buttons.scss new file mode 100644 index 0000000..209ec45 --- /dev/null +++ b/src/assets/sass/black-dashboard/mixins/_buttons.scss @@ -0,0 +1,203 @@ +// Mixin for generating new styles +@mixin btn-styles($btn-color, $btn-states-color) { + @include diagonal-gradient($btn-color, $btn-states-color); + background-color: $btn-color; + transition:all 0.15s ease; + + &.animation-on-hover:hover{ + background-position: bottom left; + transition:0.3s ease-in-out; + } + + &:hover, + &:focus, + &:active, + &.active, + &:active:focus, + &:active:hover, + &.active:focus, + &.active:hover + { + background-color: $btn-states-color !important; + background-image: linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important; + background-image: -webkit-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important; + background-image: -o-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important; + background-image: -moz-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important; + color: $white-color; + box-shadow: none; + } + + &:active{ + box-shadow: none !important; + transform: translateY(1px) !important; + transition: all .15s ease; + } + + &:not([data-action]):hover{ + + box-shadow: 2px 2px 6px rgba(0,0,0,0.4); + transform: translateY(-1px); + -webkit-transform: translateY(-1px); + } + + &.disabled, + &:disabled, + &[disabled], + fieldset[disabled] & { + &, + &:hover, + &:focus, + &.focus, + &:active, + &.active { + background-color: $btn-color; + border-color: $btn-color; + } + } + + // btn-neutral style + @if $btn-color == $white-color{ + color: $primary-color; + + &.btn-danger{ + color: $danger-color; + + &:hover, + &:focus, + &:active, + &:active:focus{ + color: $danger-states-color; + } + } + + &.btn-info{ + color: $info-color; + + &:hover, + &:focus, + &:active, + &:active:focus{ + color: $info-states-color; + } + } + + &.btn-warning{ + color: $warning-color; + + &:hover, + &:focus, + &:active, + &:active:focus{ + color: $warning-states-color; + } + } + + &.btn-success{ + color: $success-color; + + &:hover, + &:focus, + &:active, + &:active:focus{ + color: $success-states-color; + } + } + + &.btn-default{ + color: $default-color; + + &:hover, + &:focus, + &:active, + &:active:focus{ + color: $default-states-color; + } + } + + &.active, + &:active, + &:active:focus, + &:active:hover, + &.active:focus, + &.active:hover, + .show > &.dropdown-toggle, + .show > &.dropdown-toggle:focus, + .show > &.dropdown-toggle:hover { + background-color: $white-color; + color: $primary-states-color; + box-shadow: none; + } + + &:hover, + &:focus{ + color: $primary-states-color; + + &:not(.nav-link){ + box-shadow: none; + } + + } + + } @else { + color: $white-color; + } + + &.btn-simple{ + color: $btn-color; + border-color: $btn-color; + background: $transparent-bg; + + &:hover, + &:focus, + &:active, + &:not(:disabled):not(.disabled):active{ + color: $btn-color; + border-color: $btn-color; + background-color: $transparent-bg !important; + background-image: none !important; + box-shadow: none; + } + + &.active{ + border-color: $btn-color !important; + &:hover, + &:focus, + &:active, + &:not(:disabled):not(.disabled):active{ + color: $white-color; + border-color: $btn-color; + background-image: linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important; + background-image: -webkit-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important; + background-image: -o-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important; + background-image: -moz-linear-gradient(to bottom left, $btn-color, $btn-states-color, $btn-color) !important; + background-color: $btn-states-color !important; + box-shadow: none; + } + } + } + + &.btn-link{ + color: $btn-color; + &:hover, + &:focus, + &:active{ + background-color: $transparent-bg !important; + background-image: none !important; + color: $white-color !important; + text-decoration: none; + box-shadow: none; + } + } +} + + +@mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border){ + font-size: $font-size; + border-radius: $border; + padding: $padding-vertical $padding-horizontal; + + &.btn-simple{ + padding: $padding-vertical - 1 $padding-horizontal - 1; + } + +} diff --git a/src/assets/sass/black-dashboard/mixins/_cards.scss b/src/assets/sass/black-dashboard/mixins/_cards.scss new file mode 100644 index 0000000..5097789 --- /dev/null +++ b/src/assets/sass/black-dashboard/mixins/_cards.scss @@ -0,0 +1,4 @@ +@mixin icon-color($color) { + box-shadow: 0px 9px 30px -6px $color; + color: $color; +} diff --git a/src/assets/sass/black-dashboard/mixins/_dropdown.scss b/src/assets/sass/black-dashboard/mixins/_dropdown.scss new file mode 100644 index 0000000..101e525 --- /dev/null +++ b/src/assets/sass/black-dashboard/mixins/_dropdown.scss @@ -0,0 +1,26 @@ +@mixin dropdown-colors($brand-color, $dropdown-header-color, $dropdown-color, $background-color ) { + background-color: $brand-color; + + &:before{ + color: $brand-color; + } + + .dropdown-header:not([href]):not([tabindex]){ + color: $dropdown-header-color; + } + + .dropdown-item{ + color: $dropdown-color; + + &:hover, + &:focus{ + background-color: $background-color; + } + } + + .dropdown-divider{ + background-color: $background-color; + } + + +} diff --git a/src/assets/sass/black-dashboard/mixins/_inputs.scss b/src/assets/sass/black-dashboard/mixins/_inputs.scss new file mode 100644 index 0000000..fb86d94 --- /dev/null +++ b/src/assets/sass/black-dashboard/mixins/_inputs.scss @@ -0,0 +1,229 @@ +@mixin input-size($padding-vertical, $padding-horizontal){ + padding: $padding-vertical $padding-horizontal; +} + +@mixin form-control-placeholder($color, $opacity){ + .form-control::-moz-placeholder{ + color: $color; + @include opacity(1); + } + .form-control:-moz-placeholder{ + color: $color; + @include opacity(1); + } + .form-control::-webkit-input-placeholder{ + color: $color; + @include opacity(1); + } + .form-control:-ms-input-placeholder{ + color: $color; + @include opacity(1); + } +} + +@mixin placeholder() { + &::-moz-placeholder {@content; } // Firefox + &:-ms-input-placeholder {@content; } // Internet Explorer 10+ + &::-webkit-input-placeholder {@content; } // Safari and Chrome +} + +@mixin light-form(){ + border-radius: 0; + border:0; + padding: 0; + background-color: transparent; + +} + + +@mixin form-control-lg-padding($padding-vertical, $padding-horizontal) { + .form-group.no-border.form-control-lg, + .input-group.no-border.form-control-lg{ + .input-group-append .input-group-text{ + padding: $padding-vertical 0 $padding-vertical $padding-horizontal; + } + + .form-control{ + padding: $padding-vertical $padding-horizontal; + + & + .input-group-prepend .input-group-text, + & + .input-group-append .input-group-text{ + padding: $padding-vertical $padding-horizontal $padding-vertical 0; + } + + + } + } + + .form-group.form-control-lg, + .input-group.form-control-lg{ + .form-control{ + padding: $padding-vertical - 1 $padding-horizontal - 1; + + & + .input-group-prepend .input-group-text, + & + .input-group-append .input-group-text{ + padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0; + } + } + + .input-group-prepend .input-group-text, + .input-group-append .input-group-text{ + padding: $padding-vertical - 1 0 $padding-vertical $padding-horizontal - 1; + + & + .form-control{ + padding: $padding-vertical $padding-horizontal - 1 $padding-vertical $padding-horizontal - 3; + } + } + } +} + + + +@mixin input-base-padding($padding-vertical, $padding-horizontal) { + .form-group.no-border, + .input-group.no-border{ + .form-control{ + padding: $padding-vertical $padding-horizontal; + + & + .input-group-prepend .input-group-text, + & + .input-group-append .input-group-text{ + padding: $padding-vertical $padding-horizontal $padding-vertical 0; + } + } + + .input-group-prepend .input-group-text, + .input-group-append .input-group-text{ + padding: $padding-vertical 0 $padding-vertical $padding-horizontal; + } + } + + .form-group, + .input-group{ + .form-control{ + padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 $padding-horizontal - 1; + + & + .input-group-prepend .input-group-text, + & + .input-group-append .input-group-text{ + padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0; + } + } + + .input-group-prepend .input-group-text, + .input-group-append .input-group-text{ + padding: $padding-vertical - 1 0 $padding-vertical - 1 $padding-horizontal - 1; + + & + .form-control, + & ~ .form-control{ + padding:$padding-vertical - 1 $padding-horizontal $padding-vertical $padding-horizontal - 3; + } + } + } +} + + +//color1 = $opacity-5 +//color2 = $opacity-8 +//color3 = $white-color +//color4 = $transparent-bg +//color5 = $opacity-1 +//color6 = $opacity-2 + + +@mixin input-coloured-bg($color1, $color2, $color3, $color4, $color5, $color6) { + @include form-control-placeholder(rgba($white-color,0.4), 1); + + .form-control{ + border-color: $color1; + color: $color2; + + &:focus{ + border-color: $color3; + background-color: $color4; + color: $color3; + } + } + + .has-success, + .has-danger{ + &:after{ + color: $color3; + } + } + + .has-danger{ + .form-control{ + background-color: $color4; + } + } + + .input-group-prepend .input-group-text, + .input-group-append .input-group-text{ + background-color: rgba($background-black, 0.2); + border-color: $color1; + color: $color2; + + + } + + .input-group-focus{ + .input-group-prepend .input-group-text, + .input-group-append .input-group-text{ + background-color: rgba($background-black, 0.3); + border-color: $color3; + color: $color3; + } + } + + .form-group.no-border, + .input-group.no-border{ + .form-control{ + background-color: rgba($background-black,0.2); + color: $color2; + + &:focus, + &:active, + &:active{ + background-color: rgba($background-black,0.3); + color: $color3; + } + } + + .form-control + .input-group-prepend .input-group-text, + .form-control + .input-group-append .input-group-text{ + background-color: rgba($background-black,0.2);; + + &:focus, + &:active, + &:active{ + background-color: rgba($background-black,0.3); + color: $color3; + } + } + + .form-control{ + &:focus{ + & + .input-group-prepend .input-group-text, + & + .input-group-append .input-group-text{ + background-color: rgba($background-black, 0.3); + color: $color3; + } + } + } + + .input-group-prepend .input-group-text, + .input-group-append .input-group-text{ + background-color: rgba($background-black, 0.2); + border: none; + color: $color2; + } + + &.input-group-focus{ + .input-group-prepend .input-group-text, + .input-group-append .input-group-text{ + background-color: rgba($background-black, 0.3); + color: $color3; + } + } + } + +} diff --git a/src/assets/sass/black-dashboard/mixins/_page-header.scss b/src/assets/sass/black-dashboard/mixins/_page-header.scss new file mode 100644 index 0000000..713dfd3 --- /dev/null +++ b/src/assets/sass/black-dashboard/mixins/_page-header.scss @@ -0,0 +1,7 @@ +@mixin linear-gradient($color1, $color2){ + background: $color1; /* For browsers that do not support gradients */ + background: -webkit-linear-gradient(90deg, $color1 , $color2); /* For Safari 5.1 to 6.0 */ + background: -o-linear-gradient(90deg, $color1, $color2); /* For Opera 11.1 to 12.0 */ + background: -moz-linear-gradient(90deg, $color1, $color2); /* For Firefox 3.6 to 15 */ + background: linear-gradient(0deg, $color1 , $color2); /* Standard syntax */ +} diff --git a/src/assets/sass/black-dashboard/mixins/_transparency.scss b/src/assets/sass/black-dashboard/mixins/_transparency.scss new file mode 100644 index 0000000..df088ad --- /dev/null +++ b/src/assets/sass/black-dashboard/mixins/_transparency.scss @@ -0,0 +1,8 @@ +// Opacity + +@mixin opacity($opacity) { + opacity: $opacity; + // IE8 filter + $opacity-ie: ($opacity * 100); + filter: #{alpha(opacity=$opacity-ie)}; +} diff --git a/src/assets/sass/black-dashboard/mixins/_vendor-prefixes.scss b/src/assets/sass/black-dashboard/mixins/_vendor-prefixes.scss new file mode 100644 index 0000000..34a15a3 --- /dev/null +++ b/src/assets/sass/black-dashboard/mixins/_vendor-prefixes.scss @@ -0,0 +1,208 @@ +@mixin box-shadow($shadow...) { + -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 + box-shadow: $shadow; +} + +@mixin transition-input-focus-color() { + -webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; + -moz-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; + -o-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; + -ms-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; + transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; +} + + +@mixin transition($time, $type){ + -webkit-transition: all $time $type; + -moz-transition: all $time $type; + -o-transition: all $time $type; + -ms-transition: all $time $type; + transition: all $time $type; +} + +@mixin rotate-180(){ + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + + +@mixin transform-translate-x($value){ + -webkit-transform: translate3d($value, 0, 0); + -moz-transform: translate3d($value, 0, 0); + -o-transform: translate3d($value, 0, 0); + -ms-transform: translate3d($value, 0, 0); + transform: translate3d($value, 0, 0); +} + +@mixin transform-translate-y($value){ + -webkit-transform: translate3d(0,$value,0); + -moz-transform: translate3d(0,$value,0); + -o-transform: translate3d(0,$value,0); + -ms-transform: translate3d(0,$value,0); + transform: translate3d(0,$value,0); +} + +@mixin transform-translate-y-dropdown($value) { + -webkit-transform: translate3d(0,$value,0) !important; + -moz-transform: translate3d(0,$value,0) !important; + -o-transform: translate3d(0,$value,0) !important; + -ms-transform: translate3d(0,$value,0) !important; + transform: translate3d(0,$value,0) !important; +} + +@mixin linear-gradient($color, $states-color){ + background: $color; + background: -webkit-linear-gradient(to bottom, $color 0%, $states-color 100%); + background: -o-linear-gradient(to bottom, $color 0%, $states-color 100%); + background: -moz-linear-gradient(to bottom, $color 0%, $states-color 100%); + background: linear-gradient(to bottom, $color 0%, $states-color 100%); +} + +@mixin linear-gradient-right($color, $states-color){ + background: $color; + background: -webkit-linear-gradient(to right, $color 0%, $states-color 100%); + background: -o-linear-gradient(to right, $color 0%, $states-color 100%); + background: -moz-linear-gradient(to right, $color 0%, $states-color 100%); + background: linear-gradient(to right, $color 0%, $states-color 100%); +} + +@mixin sidebar-color($color){ + &:after{ + background: $color; + } + + .nav li.active > a{ + color: $color; + + i{ + color: $color; + } + } +} + +@mixin bar-animation($type){ + -webkit-animation: $type 500ms linear 0s; + -moz-animation: $type 500ms linear 0s; + animation: $type 500ms 0s; + -webkit-animation-fill-mode: forwards; + -moz-animation-fill-mode: forwards; + animation-fill-mode: forwards; +} + +@mixin topbar-x-rotation(){ + @keyframes topbar-x { + 0% {top: 0px; transform: rotate(0deg); } + 45% {top: 6px; transform: rotate(145deg); } + 75% {transform: rotate(130deg); } + 100% {transform: rotate(135deg); } + } + @-webkit-keyframes topbar-x { + 0% {top: 0px; -webkit-transform: rotate(0deg); } + 45% {top: 6px; -webkit-transform: rotate(145deg); } + 75% {-webkit-transform: rotate(130deg); } + 100% { -webkit-transform: rotate(135deg); } + } + @-moz-keyframes topbar-x { + 0% {top: 0px; -moz-transform: rotate(0deg); } + 45% {top: 6px; -moz-transform: rotate(145deg); } + 75% {-moz-transform: rotate(130deg); } + 100% { -moz-transform: rotate(135deg); } + } +} + +@mixin topbar-back-rotation(){ + @keyframes topbar-back { + 0% { top: 6px; transform: rotate(135deg); } + 45% { transform: rotate(-10deg); } + 75% { transform: rotate(5deg); } + 100% { top: 0px; transform: rotate(0); } + } + + @-webkit-keyframes topbar-back { + 0% { top: 6px; -webkit-transform: rotate(135deg); } + 45% { -webkit-transform: rotate(-10deg); } + 75% { -webkit-transform: rotate(5deg); } + 100% { top: 0px; -webkit-transform: rotate(0); } + } + + @-moz-keyframes topbar-back { + 0% { top: 6px; -moz-transform: rotate(135deg); } + 45% { -moz-transform: rotate(-10deg); } + 75% { -moz-transform: rotate(5deg); } + 100% { top: 0px; -moz-transform: rotate(0); } + } +} + +@mixin bottombar-x-rotation(){ + @keyframes bottombar-x { + 0% {bottom: 0px; transform: rotate(0deg);} + 45% {bottom: 6px; transform: rotate(-145deg);} + 75% {transform: rotate(-130deg);} + 100% {transform: rotate(-135deg);} + } + @-webkit-keyframes bottombar-x { + 0% {bottom: 0px; -webkit-transform: rotate(0deg);} + 45% {bottom: 6px; -webkit-transform: rotate(-145deg);} + 75% {-webkit-transform: rotate(-130deg);} + 100% {-webkit-transform: rotate(-135deg);} + } + @-moz-keyframes bottombar-x { + 0% {bottom: 0px; -moz-transform: rotate(0deg);} + 45% {bottom: 6px; -moz-transform: rotate(-145deg);} + 75% {-moz-transform: rotate(-130deg);} + 100% {-moz-transform: rotate(-135deg);} + } +} + +@mixin bottombar-back-rotation{ + @keyframes bottombar-back { + 0% { bottom: 6px;transform: rotate(-135deg);} + 45% { transform: rotate(10deg);} + 75% { transform: rotate(-5deg);} + 100% { bottom: 0px;transform: rotate(0);} + } + @-webkit-keyframes bottombar-back { + 0% {bottom: 6px;-webkit-transform: rotate(-135deg);} + 45% {-webkit-transform: rotate(10deg);} + 75% {-webkit-transform: rotate(-5deg);} + 100% {bottom: 0px;-webkit-transform: rotate(0);} + } + @-moz-keyframes bottombar-back { + 0% {bottom: 6px;-moz-transform: rotate(-135deg);} + 45% {-moz-transform: rotate(10deg);} + 75% {-moz-transform: rotate(-5deg);} + 100% {bottom: 0px;-moz-transform: rotate(0);} + } + +} + + +@mixin nc-rotate($degrees, $rotation) { + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}); + -webkit-transform: rotate($degrees); + -moz-transform: rotate($degrees); + -ms-transform: rotate($degrees); + -o-transform: rotate($degrees); + transform: rotate($degrees); +} + +@mixin nc-flip($horiz, $vert, $rotation) { + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}); + -webkit-transform: scale($horiz, $vert); + -moz-transform: scale($horiz, $vert); + -ms-transform: scale($horiz, $vert); + -o-transform: scale($horiz, $vert); + transform: scale($horiz, $vert); +} + +@mixin diagonal-gradient($start-color, $end-color){ + background: $start-color; + background-image: -webkit-linear-gradient(to bottom left, $start-color, $end-color, $start-color); + background-image: -o-linear-gradient(to bottom left, $start-color, $end-color, $start-color); + background-image: -moz-linear-gradient(to bottom left, $start-color, $end-color, $start-color); + background-image: linear-gradient(to bottom left, $start-color, $end-color, $start-color); + background-size: 200% 200%; + background-position: top right; +} diff --git a/src/assets/sass/black-dashboard/plugins/_plugin-animate-bootstrap-notify.scss b/src/assets/sass/black-dashboard/plugins/_plugin-animate-bootstrap-notify.scss new file mode 100644 index 0000000..387d152 --- /dev/null +++ b/src/assets/sass/black-dashboard/plugins/_plugin-animate-bootstrap-notify.scss @@ -0,0 +1,227 @@ + + + + + + + + + + + + + + + + +// This file was modified by Creative Tim to keep only the animation that we need for Bootstrap Notify + + + + + + + + + + + + + + + +@charset "UTF-8"; + +/*! +Animate.css - http://daneden.me/animate +Licensed under the MIT license - http://opensource.org/licenses/MIT + +Copyright (c) 2015 Daniel Eden +*/ + +.animated { + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} + +.animated.infinite { + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; +} + +.animated.hinge { + -webkit-animation-duration: 2s; + animation-duration: 2s; +} + +.animated.bounceIn, +.animated.bounceOut { + -webkit-animation-duration: .75s; + animation-duration: .75s; +} + +.animated.flipOutX, +.animated.flipOutY { + -webkit-animation-duration: .75s; + animation-duration: .75s; +} + +@-webkit-keyframes shake { + from, to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 10%, 30%, 50%, 70%, 90% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); + } + + 20%, 40%, 60%, 80% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); + } +} + +@keyframes shake { + from, to { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); + } + + 10%, 30%, 50%, 70%, 90% { + -webkit-transform: translate3d(-10px, 0, 0); + transform: translate3d(-10px, 0, 0); + } + + 20%, 40%, 60%, 80% { + -webkit-transform: translate3d(10px, 0, 0); + transform: translate3d(10px, 0, 0); + } +} + +.shake { + -webkit-animation-name: shake; + animation-name: shake; +} + + + +@-webkit-keyframes fadeInDown { + from { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } + + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +@keyframes fadeInDown { + from { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } + + to { + opacity: 1; + -webkit-transform: none; + transform: none; + } +} + +.fadeInDown { + -webkit-animation-name: fadeInDown; + animation-name: fadeInDown; +} + + +@-webkit-keyframes fadeOut { + from { + opacity: 1; + } + + to { + opacity: 0; + } +} + +@keyframes fadeOut { + from { + opacity: 1; + } + + to { + opacity: 0; + } +} + +.fadeOut { + -webkit-animation-name: fadeOut; + animation-name: fadeOut; +} + +@-webkit-keyframes fadeOutDown { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } +} + +@keyframes fadeOutDown { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + } +} + +.fadeOutDown { + -webkit-animation-name: fadeOutDown; + animation-name: fadeOutDown; +} + +@-webkit-keyframes fadeOutUp { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } +} + +@keyframes fadeOutUp { + from { + opacity: 1; + } + + to { + opacity: 0; + -webkit-transform: translate3d(0, -100%, 0); + transform: translate3d(0, -100%, 0); + } +} + +.fadeOutUp { + -webkit-animation-name: fadeOutUp; + animation-name: fadeOutUp; +} diff --git a/src/assets/sass/black-dashboard/plugins/_plugin-perfect-scrollbar.scss b/src/assets/sass/black-dashboard/plugins/_plugin-perfect-scrollbar.scss new file mode 100644 index 0000000..b486392 --- /dev/null +++ b/src/assets/sass/black-dashboard/plugins/_plugin-perfect-scrollbar.scss @@ -0,0 +1,116 @@ +/* + * Container style + */ +.ps { + overflow: hidden !important; + overflow-anchor: none; + -ms-overflow-style: none; + touch-action: auto; + -ms-touch-action: auto; +} + +/* + * Scrollbar rail styles + */ +.ps__rail-x { + display: none; + opacity: 0; + transition: background-color .2s linear, opacity .2s linear; + -webkit-transition: background-color .2s linear, opacity .2s linear; + height: 15px; + /* there must be 'bottom' or 'top' for ps__rail-x */ + bottom: 0px; + /* please don't change 'position' */ + position: absolute; +} + +.ps__rail-y { + display: none; + opacity: 0; + transition: background-color .2s linear, opacity .2s linear; + -webkit-transition: background-color .2s linear, opacity .2s linear; + width: 15px; + /* there must be 'right' or 'left' for ps__rail-y */ + right: 0; + /* please don't change 'position' */ + position: absolute; +} + +.ps--active-x > .ps__rail-x, +.ps--active-y > .ps__rail-y { + display: block; + background-color: transparent; +} + +.ps:hover > .ps__rail-x, +.ps:hover > .ps__rail-y, +.ps--focus > .ps__rail-x, +.ps--focus > .ps__rail-y, +.ps--scrolling-x > .ps__rail-x, +.ps--scrolling-y > .ps__rail-y { + opacity: 0.6; +} + +.ps .ps__rail-x:hover, +.ps .ps__rail-y:hover, +.ps .ps__rail-x:focus, +.ps .ps__rail-y:focus, +.ps .ps__rail-x.ps--clicking, +.ps .ps__rail-y.ps--clicking { + background-color: #eee; + opacity: 0.9; +} + +/* + * Scrollbar thumb styles + */ +.ps__thumb-x { + background-color: #aaa; + border-radius: 6px; + transition: background-color .2s linear, height .2s ease-in-out; + -webkit-transition: background-color .2s linear, height .2s ease-in-out; + height: 6px; + /* there must be 'bottom' for ps__thumb-x */ + bottom: 2px; + /* please don't change 'position' */ + position: absolute; +} + +.ps__thumb-y { + background-color: #aaa; + border-radius: 6px; + transition: background-color .2s linear, width .2s ease-in-out; + -webkit-transition: background-color .2s linear, width .2s ease-in-out; + width: 6px; + /* there must be 'right' for ps__thumb-y */ + right: 2px; + /* please don't change 'position' */ + position: absolute; +} + +.ps__rail-x:hover > .ps__thumb-x, +.ps__rail-x:focus > .ps__thumb-x, +.ps__rail-x.ps--clicking .ps__thumb-x { + background-color: #999; + height: 11px; +} + +.ps__rail-y:hover > .ps__thumb-y, +.ps__rail-y:focus > .ps__thumb-y, +.ps__rail-y.ps--clicking .ps__thumb-y { + background-color: #999; + width: 11px; +} + +/* MS supports */ +@supports (-ms-overflow-style: none) { + .ps { + overflow: auto !important; + } +} + +@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + .ps { + overflow: auto !important; + } +} diff --git a/src/assets/sass/paper-dashboard.scss b/src/assets/sass/paper-dashboard.scss deleted file mode 100644 index dd522d5..0000000 --- a/src/assets/sass/paper-dashboard.scss +++ /dev/null @@ -1,37 +0,0 @@ -/*! - - ========================================================= - * Paper Dashboard - v1.1.2 - ========================================================= - - * Product Page: http://www.creative-tim.com/product/paper-dashboard - * Copyright 2017 Creative Tim (http://www.creative-tim.com) - * Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard/blob/master/LICENSE.md) - - ========================================================= - - * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. - - */ -@import "paper/variables"; -@import "paper/mixins"; -@import "paper/typography"; -// Core CSS -@import "paper/misc"; -@import "paper/sidebar-and-main-panel"; -@import "paper/buttons"; -@import "paper/inputs"; -@import "paper/alerts"; -@import "paper/tables"; -@import "paper/checkbox-radio"; -@import "paper/navbars"; -@import "paper/footers"; -// Fancy Stuff -@import "paper/dropdown"; -@import "paper/cards"; -@import "paper/chartist"; -@import "paper/responsive"; - - - - diff --git a/src/assets/sass/paper/mixins/_chartist.scss b/src/assets/sass/paper/mixins/_chartist.scss index 592553f..100f7d9 100644 --- a/src/assets/sass/paper/mixins/_chartist.scss +++ b/src/assets/sass/paper/mixins/_chartist.scss @@ -84,7 +84,7 @@ $ct-series-colors: ( rgba($primary-color, .6) ) !default; -// Paper Kit Colors +// Black Kit Colors .ct-blue { stroke: $primary-color !important; diff --git a/src/components/SidebarPlugin/SideBar.vue b/src/components/SidebarPlugin/SideBar.vue index 8da4dfe..f4dc756 100644 --- a/src/components/SidebarPlugin/SideBar.vue +++ b/src/components/SidebarPlugin/SideBar.vue @@ -43,7 +43,7 @@ export default { props: { title: { type: String, - default: "Paper Dashboard" + default: "Black Dashboard" }, backgroundColor: { type: String, diff --git a/src/main.js b/src/main.js index a23c46f..11dd110 100644 --- a/src/main.js +++ b/src/main.js @@ -2,10 +2,10 @@ import Vue from "vue"; import App from "./App"; import router from "./router/index"; -import PaperDashboard from "./plugins/paperDashboard"; +import BlackDashboard from "./plugins/blackDashboard"; import "vue-notifyjs/themes/default.css"; -Vue.use(PaperDashboard); +Vue.use(BlackDashboard); /* eslint-disable no-new */ new Vue({ diff --git a/src/pages/NotFoundPage.vue b/src/pages/NotFoundPage.vue index 9b3063d..9820532 100644 --- a/src/pages/NotFoundPage.vue +++ b/src/pages/NotFoundPage.vue @@ -12,7 +12,7 @@ Site title - + diff --git a/src/pages/Notifications/NotificationTemplate.vue b/src/pages/Notifications/NotificationTemplate.vue index 4812f3c..d992df2 100644 --- a/src/pages/Notifications/NotificationTemplate.vue +++ b/src/pages/Notifications/NotificationTemplate.vue @@ -1,5 +1,5 @@