diff --git a/src/assets/demo/demo.css b/src/assets/demo/demo.css old mode 100755 new mode 100644 diff --git a/src/assets/fonts/glyphicons-halflings-regular.448c34a.woff2 b/src/assets/fonts/glyphicons-halflings-regular.448c34a.woff2 deleted file mode 100755 index 64539b5..0000000 Binary files a/src/assets/fonts/glyphicons-halflings-regular.448c34a.woff2 and /dev/null differ diff --git a/src/assets/fonts/glyphicons-halflings-regular.e18bbf6.ttf b/src/assets/fonts/glyphicons-halflings-regular.e18bbf6.ttf deleted file mode 100755 index 1413fc6..0000000 Binary files a/src/assets/fonts/glyphicons-halflings-regular.e18bbf6.ttf and /dev/null differ diff --git a/src/assets/fonts/glyphicons-halflings-regular.f4769f9.eot b/src/assets/fonts/glyphicons-halflings-regular.f4769f9.eot deleted file mode 100755 index b93a495..0000000 Binary files a/src/assets/fonts/glyphicons-halflings-regular.f4769f9.eot and /dev/null differ diff --git a/src/assets/fonts/glyphicons-halflings-regular.fa27723.woff b/src/assets/fonts/glyphicons-halflings-regular.fa27723.woff deleted file mode 100755 index 9e61285..0000000 Binary files a/src/assets/fonts/glyphicons-halflings-regular.fa27723.woff and /dev/null differ diff --git a/src/assets/sass/black-dashboard.scss b/src/assets/sass/black-dashboard.scss index f7eddd5..5fd3332 100644 --- a/src/assets/sass/black-dashboard.scss +++ b/src/assets/sass/black-dashboard.scss @@ -1,5 +1,5 @@ -/*! +/* ========================================================= * Black Dashboard - v1.0.0 ========================================================= @@ -7,7 +7,6 @@ * 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 ========================================================= @@ -15,42 +14,86 @@ */ -@import 'black-dashboard/variables'; -@import 'black-dashboard/mixins'; + // Core -// Plugins CSS -@import "black-dashboard/plugins/plugin-animate-bootstrap-notify"; -@import "black-dashboard/plugins/plugin-perfect-scrollbar"; +@import "black-dashboard/custom/functions"; +@import "black-dashboard/bootstrap/functions"; -// Core CSS -@import "black-dashboard/buttons"; -@import "black-dashboard/inputs"; -@import "black-dashboard/typography"; -@import "black-dashboard/misc"; -@import "black-dashboard/checkboxes-radio"; +@import "black-dashboard/custom/variables"; +@import "black-dashboard/bootstrap/variables"; -// 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"; +@import "black-dashboard/custom/mixins"; +@import "black-dashboard/bootstrap/mixins"; -// 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"; + // Bootstrap components -@import "black-dashboard/responsive"; +@import "black-dashboard/bootstrap/root"; +@import "black-dashboard/bootstrap/reboot"; +@import "black-dashboard/bootstrap/type"; +@import "black-dashboard/bootstrap/images"; +@import "black-dashboard/bootstrap/code"; +@import "black-dashboard/bootstrap/grid"; +@import "black-dashboard/bootstrap/tables"; +@import "black-dashboard/bootstrap/forms"; +@import "black-dashboard/bootstrap/buttons"; +@import "black-dashboard/bootstrap/transitions"; +@import "black-dashboard/bootstrap/dropdown"; +@import "black-dashboard/bootstrap/button-group"; +@import "black-dashboard/bootstrap/input-group"; +@import "black-dashboard/bootstrap/custom-forms"; +@import "black-dashboard/bootstrap/nav"; +@import "black-dashboard/bootstrap/navbar"; +@import "black-dashboard/bootstrap/card"; +@import "black-dashboard/bootstrap/breadcrumb"; +@import "black-dashboard/bootstrap/pagination"; +@import "black-dashboard/bootstrap/badge"; +@import "black-dashboard/bootstrap/jumbotron"; +@import "black-dashboard/bootstrap/alert"; +@import "black-dashboard/bootstrap/progress"; +@import "black-dashboard/bootstrap/media"; +@import "black-dashboard/bootstrap/list-group"; +@import "black-dashboard/bootstrap/close"; +@import "black-dashboard/bootstrap/modal"; +@import "black-dashboard/bootstrap/tooltip"; +@import "black-dashboard/bootstrap/popover"; +@import "black-dashboard/bootstrap/carousel"; +@import "black-dashboard/bootstrap/utilities"; +@import "black-dashboard/bootstrap/print"; -// Dashboard white class + // Custom components -@import 'black-dashboard/white-content'; + @import "black-dashboard/custom/alerts.scss"; + @import "black-dashboard/custom/buttons.scss"; + @import "black-dashboard/custom/dropdown.scss"; + @import "black-dashboard/custom/footer.scss"; + @import "black-dashboard/custom/forms.scss"; + @import "black-dashboard/custom/images.scss"; + @import "black-dashboard/custom/modal.scss"; + @import "black-dashboard/custom/navbar.scss"; + @import "black-dashboard/custom/type.scss"; + @import "black-dashboard/custom/tables"; + @import "black-dashboard/custom/checkboxes-radio"; + @import "black-dashboard/custom/fixed-plugin"; + @import "black-dashboard/custom/sidebar-and-main-panel.scss"; + @import "black-dashboard/custom/misc.scss"; + @import "black-dashboard/custom/rtl.scss"; + @import "black-dashboard/custom/input-group.scss"; + + + // Vendor / Plugins + +@import "black-dashboard/custom/vendor/plugin-perfect-scrollbar.scss"; +@import "black-dashboard/custom/vendor/plugin-animate-bootstrap-notify.scss"; + +// light mode + +@import "black-dashboard/custom/white-content.scss"; + +// Cards + +@import 'black-dashboard/custom/card'; +@import "black-dashboard/custom/cards/card-chart"; +@import "black-dashboard/custom/cards/card-map"; +@import "black-dashboard/custom/cards/card-user"; +@import "black-dashboard/custom/cards/card-task"; +@import "black-dashboard/custom/cards/card-plain"; diff --git a/src/assets/sass/black-dashboard/_alerts.scss b/src/assets/sass/black-dashboard/_alerts.scss deleted file mode 100644 index d675667..0000000 --- a/src/assets/sass/black-dashboard/_alerts.scss +++ /dev/null @@ -1,74 +0,0 @@ -.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/_cards.scss b/src/assets/sass/black-dashboard/_cards.scss deleted file mode 100644 index 442d474..0000000 --- a/src/assets/sass/black-dashboard/_cards.scss +++ /dev/null @@ -1,108 +0,0 @@ -.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/_dropdown.scss b/src/assets/sass/black-dashboard/_dropdown.scss deleted file mode 100644 index b10582b..0000000 --- a/src/assets/sass/black-dashboard/_dropdown.scss +++ /dev/null @@ -1,316 +0,0 @@ -.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/_footers.scss b/src/assets/sass/black-dashboard/_footers.scss deleted file mode 100644 index 2cff9ad..0000000 --- a/src/assets/sass/black-dashboard/_footers.scss +++ /dev/null @@ -1,47 +0,0 @@ -.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/_misc.scss b/src/assets/sass/black-dashboard/_misc.scss deleted file mode 100644 index 38ce9e5..0000000 --- a/src/assets/sass/black-dashboard/_misc.scss +++ /dev/null @@ -1,198 +0,0 @@ -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 deleted file mode 100644 index 12f55c9..0000000 --- a/src/assets/sass/black-dashboard/_mixins.scss +++ /dev/null @@ -1,8 +0,0 @@ -//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 deleted file mode 100644 index 18024b3..0000000 --- a/src/assets/sass/black-dashboard/_navbar.scss +++ /dev/null @@ -1,176 +0,0 @@ - - -.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 deleted file mode 100644 index 4ac3ce3..0000000 --- a/src/assets/sass/black-dashboard/_page-header.scss +++ /dev/null @@ -1,85 +0,0 @@ -.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 deleted file mode 100644 index 9f52e97..0000000 --- a/src/assets/sass/black-dashboard/_responsive.scss +++ /dev/null @@ -1,510 +0,0 @@ -@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 deleted file mode 100644 index 51088bf..0000000 --- a/src/assets/sass/black-dashboard/_rtl.scss +++ /dev/null @@ -1,73 +0,0 @@ -.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 deleted file mode 100644 index d864d07..0000000 --- a/src/assets/sass/black-dashboard/_sidebar-and-main-panel.scss +++ /dev/null @@ -1,323 +0,0 @@ -.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/_typography.scss b/src/assets/sass/black-dashboard/_typography.scss deleted file mode 100644 index 02f54eb..0000000 --- a/src/assets/sass/black-dashboard/_typography.scss +++ /dev/null @@ -1,198 +0,0 @@ -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 deleted file mode 100644 index ad2ca2a..0000000 --- a/src/assets/sass/black-dashboard/_variables.scss +++ /dev/null @@ -1,310 +0,0 @@ -//== 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 deleted file mode 100644 index 250584c..0000000 --- a/src/assets/sass/black-dashboard/_white-content.scss +++ /dev/null @@ -1,286 +0,0 @@ -.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/bootstrap/_alert.scss b/src/assets/sass/black-dashboard/bootstrap/_alert.scss new file mode 100644 index 0000000..dd43e23 --- /dev/null +++ b/src/assets/sass/black-dashboard/bootstrap/_alert.scss @@ -0,0 +1,51 @@ +// +// Base styles +// + +.alert { + position: relative; + padding: $alert-padding-y $alert-padding-x; + margin-bottom: $alert-margin-bottom; + border: $alert-border-width solid transparent; + @include border-radius($alert-border-radius); +} + +// Headings for larger alerts +.alert-heading { + // Specified to prevent conflicts of changing $headings-color + color: inherit; +} + +// Provide class for links that match alerts +.alert-link { + font-weight: $alert-link-font-weight; +} + + +// Dismissible alerts +// +// Expand the right padding and account for the close button's positioning. + +.alert-dismissible { + padding-right: ($close-font-size + $alert-padding-x * 2); + + // Adjust close link position + .close { + position: absolute; + top: 0; + right: 0; + padding: $alert-padding-y $alert-padding-x; + color: inherit; + } +} + + +// Alternate styles +// +// Generate contextual modifier classes for colorizing the alert. + +@each $color, $value in $theme-colors { + .alert-#{$color} { + @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level)); + } +} diff --git a/src/assets/sass/black-dashboard/bootstrap/_badge.scss b/src/assets/sass/black-dashboard/bootstrap/_badge.scss new file mode 100644 index 0000000..b87a1b0 --- /dev/null +++ b/src/assets/sass/black-dashboard/bootstrap/_badge.scss @@ -0,0 +1,47 @@ +// Base class +// +// Requires one of the contextual, color modifier classes for `color` and +// `background-color`. + +.badge { + display: inline-block; + padding: $badge-padding-y $badge-padding-x; + font-size: $badge-font-size; + font-weight: $badge-font-weight; + line-height: 1; + text-align: center; + white-space: nowrap; + vertical-align: baseline; + @include border-radius($badge-border-radius); + + // Empty badges collapse automatically + &:empty { + display: none; + } +} + +// Quick fix for badges in buttons +.btn .badge { + position: relative; + top: -1px; +} + +// Pill badges +// +// Make them extra rounded with a modifier to replace v3's badges. + +.badge-pill { + padding-right: $badge-pill-padding-x; + padding-left: $badge-pill-padding-x; + @include border-radius($badge-pill-border-radius); +} + +// Colors +// +// Contextual variations (linked badges get darker on :hover). + +@each $color, $value in $theme-colors { + .badge-#{$color} { + @include badge-variant($value); + } +} diff --git a/src/assets/sass/black-dashboard/bootstrap/_breadcrumb.scss b/src/assets/sass/black-dashboard/bootstrap/_breadcrumb.scss new file mode 100644 index 0000000..be30950 --- /dev/null +++ b/src/assets/sass/black-dashboard/bootstrap/_breadcrumb.scss @@ -0,0 +1,41 @@ +.breadcrumb { + display: flex; + flex-wrap: wrap; + padding: $breadcrumb-padding-y $breadcrumb-padding-x; + margin-bottom: $breadcrumb-margin-bottom; + list-style: none; + background-color: $breadcrumb-bg; + @include border-radius($breadcrumb-border-radius); +} + +.breadcrumb-item { + // The separator between breadcrumbs (by default, a forward-slash: "/") + + .breadcrumb-item { + padding-left: $breadcrumb-item-padding; + + &::before { + display: inline-block; // Suppress underlining of the separator in modern browsers + padding-right: $breadcrumb-item-padding; + color: $breadcrumb-divider-color; + content: $breadcrumb-divider; + } + } + + // IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built + // without `