From 4ab5a1de2ca1530408d5ad0cabf0a4a497100930 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= <lukasz@holeczek.pl>
Date: Thu, 29 Sep 2016 12:09:57 +0200
Subject: [PATCH] Better SCSS files organisation
---
.../scss/bootstrap_custom/_buttons.scss | 9 +
Angular_Dev/scss/bootstrap_custom/_card.scss | 224 +++++++
.../scss/bootstrap_custom/_dropdown.scss | 45 ++
.../scss/bootstrap_custom/_input-group.scss | 7 +
.../scss/bootstrap_custom/_navbar.scss | 109 ++++
.../scss/bootstrap_custom/_progress.scss | 8 +
.../scss/bootstrap_custom/_tables.scss | 20 +
Angular_Dev/scss/bootstrap_custom/_tags.scss | 3 +
Angular_Dev/scss/core/_animate.scss | 43 ++
Angular_Dev/scss/core/_aside.scss | 58 ++
Angular_Dev/scss/core/_avatars.scss | 52 ++
Angular_Dev/scss/core/_breadcrumb-menu.scss | 36 ++
Angular_Dev/scss/core/_buttons.scss | 565 ++++++++++++++++++
Angular_Dev/scss/core/_callout.scss | 85 +++
Angular_Dev/scss/core/_charts.scss | 6 +
Angular_Dev/scss/core/_custom-variables.scss | 173 ++++++
Angular_Dev/scss/core/_custom.scss | 1 +
Angular_Dev/scss/core/_footer.scss | 12 +
Angular_Dev/scss/core/_grid.scss | 15 +
Angular_Dev/scss/core/_layout.scss | 238 ++++++++
Angular_Dev/scss/core/_loading.scss | 127 ++++
Angular_Dev/scss/core/_mixins.scss | 92 +++
Angular_Dev/scss/core/_mobile.scss | 75 +++
Angular_Dev/scss/core/_navigation.scss | 8 +
Angular_Dev/scss/core/_others.scss | 3 +
Angular_Dev/scss/core/_switches.scss | 314 ++++++++++
Angular_Dev/scss/core/_temp.scss | 13 +
Angular_Dev/scss/core/_typography.scss | 36 ++
Angular_Dev/scss/core/_utilities-border.scss | 18 +
Angular_Dev/scss/core/_widgets.scss | 249 ++++++++
.../scss/core/bootstrap-variables.scss | 86 +++
.../scss/core/navigation/_disabled.scss | 6 +
.../scss/core/navigation/_sidebar.scss | 331 ++++++++++
Angular_Dev/scss/core/navigation/_top.scss | 116 ++++
.../scss/bootstrap_custom/_buttons.scss | 9 +
Angular_Seed/scss/bootstrap_custom/_card.scss | 224 +++++++
.../scss/bootstrap_custom/_dropdown.scss | 45 ++
.../scss/bootstrap_custom/_input-group.scss | 7 +
.../scss/bootstrap_custom/_navbar.scss | 109 ++++
.../scss/bootstrap_custom/_progress.scss | 8 +
.../scss/bootstrap_custom/_tables.scss | 20 +
Angular_Seed/scss/bootstrap_custom/_tags.scss | 3 +
Angular_Seed/scss/core/_animate.scss | 43 ++
Angular_Seed/scss/core/_aside.scss | 58 ++
Angular_Seed/scss/core/_avatars.scss | 52 ++
Angular_Seed/scss/core/_breadcrumb-menu.scss | 36 ++
Angular_Seed/scss/core/_buttons.scss | 565 ++++++++++++++++++
Angular_Seed/scss/core/_callout.scss | 85 +++
Angular_Seed/scss/core/_charts.scss | 6 +
Angular_Seed/scss/core/_custom-variables.scss | 173 ++++++
Angular_Seed/scss/core/_custom.scss | 1 +
Angular_Seed/scss/core/_footer.scss | 12 +
Angular_Seed/scss/core/_grid.scss | 15 +
Angular_Seed/scss/core/_layout.scss | 238 ++++++++
Angular_Seed/scss/core/_loading.scss | 127 ++++
Angular_Seed/scss/core/_mixins.scss | 92 +++
Angular_Seed/scss/core/_mobile.scss | 75 +++
Angular_Seed/scss/core/_navigation.scss | 8 +
Angular_Seed/scss/core/_others.scss | 3 +
Angular_Seed/scss/core/_switches.scss | 314 ++++++++++
Angular_Seed/scss/core/_temp.scss | 13 +
Angular_Seed/scss/core/_typography.scss | 36 ++
Angular_Seed/scss/core/_utilities-border.scss | 18 +
Angular_Seed/scss/core/_widgets.scss | 249 ++++++++
.../scss/core/bootstrap-variables.scss | 86 +++
.../scss/core/navigation/_disabled.scss | 6 +
.../scss/core/navigation/_sidebar.scss | 331 ++++++++++
Angular_Seed/scss/core/navigation/_top.scss | 116 ++++
68 files changed, 6366 insertions(+)
create mode 100644 Angular_Dev/scss/bootstrap_custom/_buttons.scss
create mode 100644 Angular_Dev/scss/bootstrap_custom/_card.scss
create mode 100644 Angular_Dev/scss/bootstrap_custom/_dropdown.scss
create mode 100644 Angular_Dev/scss/bootstrap_custom/_input-group.scss
create mode 100644 Angular_Dev/scss/bootstrap_custom/_navbar.scss
create mode 100644 Angular_Dev/scss/bootstrap_custom/_progress.scss
create mode 100644 Angular_Dev/scss/bootstrap_custom/_tables.scss
create mode 100644 Angular_Dev/scss/bootstrap_custom/_tags.scss
create mode 100644 Angular_Dev/scss/core/_animate.scss
create mode 100644 Angular_Dev/scss/core/_aside.scss
create mode 100644 Angular_Dev/scss/core/_avatars.scss
create mode 100644 Angular_Dev/scss/core/_breadcrumb-menu.scss
create mode 100644 Angular_Dev/scss/core/_buttons.scss
create mode 100644 Angular_Dev/scss/core/_callout.scss
create mode 100644 Angular_Dev/scss/core/_charts.scss
create mode 100644 Angular_Dev/scss/core/_custom-variables.scss
create mode 100644 Angular_Dev/scss/core/_custom.scss
create mode 100644 Angular_Dev/scss/core/_footer.scss
create mode 100644 Angular_Dev/scss/core/_grid.scss
create mode 100644 Angular_Dev/scss/core/_layout.scss
create mode 100644 Angular_Dev/scss/core/_loading.scss
create mode 100644 Angular_Dev/scss/core/_mixins.scss
create mode 100644 Angular_Dev/scss/core/_mobile.scss
create mode 100644 Angular_Dev/scss/core/_navigation.scss
create mode 100644 Angular_Dev/scss/core/_others.scss
create mode 100644 Angular_Dev/scss/core/_switches.scss
create mode 100644 Angular_Dev/scss/core/_temp.scss
create mode 100644 Angular_Dev/scss/core/_typography.scss
create mode 100644 Angular_Dev/scss/core/_utilities-border.scss
create mode 100644 Angular_Dev/scss/core/_widgets.scss
create mode 100644 Angular_Dev/scss/core/bootstrap-variables.scss
create mode 100644 Angular_Dev/scss/core/navigation/_disabled.scss
create mode 100644 Angular_Dev/scss/core/navigation/_sidebar.scss
create mode 100644 Angular_Dev/scss/core/navigation/_top.scss
create mode 100644 Angular_Seed/scss/bootstrap_custom/_buttons.scss
create mode 100644 Angular_Seed/scss/bootstrap_custom/_card.scss
create mode 100644 Angular_Seed/scss/bootstrap_custom/_dropdown.scss
create mode 100644 Angular_Seed/scss/bootstrap_custom/_input-group.scss
create mode 100644 Angular_Seed/scss/bootstrap_custom/_navbar.scss
create mode 100644 Angular_Seed/scss/bootstrap_custom/_progress.scss
create mode 100644 Angular_Seed/scss/bootstrap_custom/_tables.scss
create mode 100644 Angular_Seed/scss/bootstrap_custom/_tags.scss
create mode 100644 Angular_Seed/scss/core/_animate.scss
create mode 100644 Angular_Seed/scss/core/_aside.scss
create mode 100644 Angular_Seed/scss/core/_avatars.scss
create mode 100644 Angular_Seed/scss/core/_breadcrumb-menu.scss
create mode 100644 Angular_Seed/scss/core/_buttons.scss
create mode 100644 Angular_Seed/scss/core/_callout.scss
create mode 100644 Angular_Seed/scss/core/_charts.scss
create mode 100644 Angular_Seed/scss/core/_custom-variables.scss
create mode 100644 Angular_Seed/scss/core/_custom.scss
create mode 100644 Angular_Seed/scss/core/_footer.scss
create mode 100644 Angular_Seed/scss/core/_grid.scss
create mode 100644 Angular_Seed/scss/core/_layout.scss
create mode 100644 Angular_Seed/scss/core/_loading.scss
create mode 100644 Angular_Seed/scss/core/_mixins.scss
create mode 100644 Angular_Seed/scss/core/_mobile.scss
create mode 100644 Angular_Seed/scss/core/_navigation.scss
create mode 100644 Angular_Seed/scss/core/_others.scss
create mode 100644 Angular_Seed/scss/core/_switches.scss
create mode 100644 Angular_Seed/scss/core/_temp.scss
create mode 100644 Angular_Seed/scss/core/_typography.scss
create mode 100644 Angular_Seed/scss/core/_utilities-border.scss
create mode 100644 Angular_Seed/scss/core/_widgets.scss
create mode 100644 Angular_Seed/scss/core/bootstrap-variables.scss
create mode 100644 Angular_Seed/scss/core/navigation/_disabled.scss
create mode 100644 Angular_Seed/scss/core/navigation/_sidebar.scss
create mode 100644 Angular_Seed/scss/core/navigation/_top.scss
diff --git a/Angular_Dev/scss/bootstrap_custom/_buttons.scss b/Angular_Dev/scss/bootstrap_custom/_buttons.scss
new file mode 100644
index 0000000..a225bb4
--- /dev/null
+++ b/Angular_Dev/scss/bootstrap_custom/_buttons.scss
@@ -0,0 +1,9 @@
+.btn {
+
+ .tag {
+ position: absolute;
+ top: 2px;
+ right: 6px;
+ font-size: 9px;
+ }
+}
diff --git a/Angular_Dev/scss/bootstrap_custom/_card.scss b/Angular_Dev/scss/bootstrap_custom/_card.scss
new file mode 100644
index 0000000..bcde134
--- /dev/null
+++ b/Angular_Dev/scss/bootstrap_custom/_card.scss
@@ -0,0 +1,224 @@
+.card {
+
+ margin-bottom: 20px;
+
+}
+
+.card-header {
+
+ i.icon-bg {
+ display: inline-block;
+ padding: $card-spacer-y $card-spacer-x !important;
+ margin-top: -$card-spacer-y;
+ margin-right: $card-spacer-x;
+ margin-bottom: -$card-spacer-y;
+ margin-left: -$card-spacer-x;
+ line-height: inherit;
+ color: $card-icon-color;
+ vertical-align: bottom;
+ background: $card-icon-bg;
+ border-right: $card-border-width solid $card-border-color;
+ }
+
+ ul.nav.nav-tabs {
+ margin-top: -$card-spacer-y;
+ margin-bottom: -$card-spacer-y;
+ border-bottom: 0;
+
+ li.nav-item {
+ border-top: 0;
+ a.nav-link {
+ padding: $card-spacer-y $card-spacer-x/2;
+ color: $text-muted;
+ border-top: 0;
+
+ &.active {
+ color: $body-color;
+ background: #fff;
+ }
+ }
+ }
+ }
+
+ &.card-header-inverse {
+ color: #fff;
+ }
+
+ @each $variant, $color in (primary: $brand-primary, secondary: $gray-lighter, success: $brand-success, info: $brand-info, warning: $brand-warning, danger: $brand-danger) {
+ &.card-header-#{$variant} {
+ margin: -1px -1px 0;
+ background: $color;
+ border-bottom: 1px solid $color;
+ }
+ }
+
+ .btn {
+ margin-top: - $btn-padding-y;
+ }
+ .btn-sm {
+ margin-top: - $btn-padding-y-sm;
+ }
+ .btn-lg {
+ margin-top: - $btn-padding-y-lg;
+ }
+}
+//
+.card-footer {
+
+ ul {
+ display: table;
+ width: 100%;
+ padding: 0;
+ margin: 0;
+ table-layout: fixed;
+
+ li {
+ display: table-cell;
+ padding: 0 $card-spacer-x;
+ text-align: center;
+
+ progress {
+ margin-top: $card-spacer-y;
+ margin-bottom: 0;
+ }
+ }
+ }
+}
+
+
+//
+// Background variations
+//
+
+@mixin card-variant($color) {
+ background-color: $color;
+
+ .card-header {
+ border-color: darken($color,5%);
+ }
+
+ .card-header, .card-footer {
+ background-color: darken($color,5%);
+ //border: 0;
+ }
+}
+
+@each $variant, $color in (primary: $brand-primary, secondary: $gray-lighter, success: $brand-success, info: $brand-info, warning: $brand-warning, danger: $brand-danger) {
+ .card-#{$variant} {
+ @include card-variant($color)
+ }
+}
+
+.card-inverse {
+ color: #fff;
+
+ .text-muted {
+ color: rgba(255,255,255,.6) !important;
+ }
+
+ .progress[value] {
+ background-color: rgba(255,255,255,.2) !important;
+ }
+
+ // Unfilled portion of the bar
+ .progress[value]::-webkit-progress-bar {
+ background-color: rgba(255,255,255,.2) !important;
+ }
+ base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make these styles Firefox-only
+ .progress[value] {
+ background-color: rgba(255,255,255,.2) !important;
+ }
+
+ .progress {
+ @include progress-variant(#fff !important);
+ }
+}
+
+// Card Actions
+.card-header {
+ > i {
+ margin-right: $spacer-x/2;
+ }
+ .card-actions {
+ position: absolute;
+ top: 0;
+ right: 0;
+ //height: inherit;
+
+ a, button {
+ display: block;
+ float: left;
+ width: 50px;
+ padding: $card-spacer-y 0;
+ margin: 0 !important;
+ color: $body-color;
+ text-align: center;
+ background: transparent;
+ border: 0;
+ border-left: 1px solid $border-color;
+ box-shadow: 0;
+
+ &:hover {
+ text-decoration: none;
+ }
+
+ [class^="icon-"], [class*=" icon-"] {
+ display: inline-block;
+ vertical-align: middle;
+ }
+
+ i {
+ display: inline-block;
+ transition: .4s;
+ }
+
+ i.r180 {
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+ }
+ }
+
+ .input-group {
+ width: 230px;
+ margin: 6px;
+
+ .input-group-addon {
+ background: #fff;
+ }
+
+ input {
+ border-left: 0;
+ }
+ }
+ }
+}
+
+.card-full {
+ margin-top: - $spacer-y;
+ margin-right: - $grid-gutter-width / 2;
+ margin-left: - $grid-gutter-width / 2;
+ border: 0;
+ border-bottom: $card-border-width solid $border-color;
+}
+
+@include media-breakpoint-up(sm) {
+ .card-columns {
+ -moz-column-count: 3;
+ //-moz-column-count: 1.25rem;
+ -webkit-column-count: 3;
+ column-gap: 1.25rem;
+ //-webkit-column-count: 1.25rem;
+ column-count: 3;
+
+ .card {
+ display: inline-block;
+ width: 100%; // Don't let them exceed the column width
+ }
+
+ &.col-2 {
+ -moz-column-count: 2;
+ -webkit-column-count: 2;
+ column-count: 2;
+ }
+ }
+}
diff --git a/Angular_Dev/scss/bootstrap_custom/_dropdown.scss b/Angular_Dev/scss/bootstrap_custom/_dropdown.scss
new file mode 100644
index 0000000..68a0c9e
--- /dev/null
+++ b/Angular_Dev/scss/bootstrap_custom/_dropdown.scss
@@ -0,0 +1,45 @@
+// Links, buttons, and more within the dropdown menu
+.dropdown-item {
+ position: relative;
+ padding: 10px 20px;
+ border-bottom: 1px solid $dropdown-border-color;
+
+ &:last-child {
+ border-bottom: 0;
+ }
+
+ i {
+ display: inline-block;
+ width: 20px;
+ margin-right: 10px;
+ margin-left: -10px;
+ color: $dropdown-border-color;
+ text-align: center;
+ }
+
+ .tag {
+ position: absolute;
+ right: 10px;
+ margin-top: 2px;
+ }
+}
+
+// Dropdown section headers
+.dropdown-header {
+ padding: 8px 20px;
+ background: $dropdown-divider-bg;
+ border-bottom: 1px solid $dropdown-border-color;
+
+ .btn {
+ margin-top: -7px;
+ color: $dropdown-header-color;
+
+ &:hover {
+ color: $body-color;
+ }
+
+ &.pull-right {
+ margin-right: -20px;
+ }
+ }
+}
diff --git a/Angular_Dev/scss/bootstrap_custom/_input-group.scss b/Angular_Dev/scss/bootstrap_custom/_input-group.scss
new file mode 100644
index 0000000..536efe0
--- /dev/null
+++ b/Angular_Dev/scss/bootstrap_custom/_input-group.scss
@@ -0,0 +1,7 @@
+
+.input-group-addon,
+.input-group-btn {
+ min-width: 40px;
+ white-space: nowrap;
+ vertical-align: middle; // Match the inputs
+}
diff --git a/Angular_Dev/scss/bootstrap_custom/_navbar.scss b/Angular_Dev/scss/bootstrap_custom/_navbar.scss
new file mode 100644
index 0000000..d272d41
--- /dev/null
+++ b/Angular_Dev/scss/bootstrap_custom/_navbar.scss
@@ -0,0 +1,109 @@
+header.navbar {
+ position: relative;
+ height: $navbar-height;
+ padding: 0;
+ line-height: $navbar-height;
+ background-color: $navbar-bg;
+ @include borders($navbar-border);
+
+ .container-fluid {
+ padding: 0;
+ }
+
+ .nav-item {
+ position: relative;
+ min-width: 50px;
+ margin: 0 !important;
+ text-align: center;
+
+ .nav-link {
+ i {
+ vertical-align: middle;
+ }
+
+ .tag {
+ position: absolute;
+ top: 9px;
+ right: 7px;
+ }
+ }
+ }
+
+ .img-avatar {
+ height: $navbar-height - 20px;
+ margin: 0 10px;
+ }
+
+ .dropdown-menu {
+ padding-bottom: 0;
+ line-height: $line-height-base;
+ }
+
+ .dropdown-item {
+ min-width: 180px;
+ }
+
+ a.navbar-brand {
+ display: inline-block;
+ width: $navbar-brand-width;
+ height: $navbar-height;
+ padding: $navbar-padding-y $navbar-padding-x;
+ background-color: $navbar-brand-bg;
+ background-image: $navbar-brand-logo;
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: $navbar-brand-logo-size;
+ @include borders($navbar-brand-border);
+ }
+}
+
+header.navbar {
+ .navbar-brand {
+ margin-right: 0;
+ }
+}
+
+.navbar-toggler {
+ padding: 0 .75em;
+ line-height: $navbar-height - 4px;
+}
+
+header.navbar {
+ .navbar-nav {
+ .nav-link {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+ }
+}
+
+.navbar-brand {
+ color: $navbar-active-color;
+
+ @include hover-focus {
+ color: $navbar-active-color;
+ }
+}
+
+.navbar-nav {
+ .nav-link {
+ color: $navbar-color;
+
+ @include hover-focus {
+ color: $navbar-hover-color;
+ }
+ }
+
+ .open > .nav-link,
+ .active > .nav-link,
+ .nav-link.open,
+ .nav-link.active {
+ @include plain-hover-focus {
+ color: $navbar-active-color;
+ }
+ }
+}
+
+.navbar-divider {
+ background-color: rgba(0,0,0,.075);
+}
diff --git a/Angular_Dev/scss/bootstrap_custom/_progress.scss b/Angular_Dev/scss/bootstrap_custom/_progress.scss
new file mode 100644
index 0000000..9c10c23
--- /dev/null
+++ b/Angular_Dev/scss/bootstrap_custom/_progress.scss
@@ -0,0 +1,8 @@
+.progress {
+ &.progress-sm {
+ height: 8px;
+ }
+ &.progress-xs {
+ height: 4px;
+ }
+}
diff --git a/Angular_Dev/scss/bootstrap_custom/_tables.scss b/Angular_Dev/scss/bootstrap_custom/_tables.scss
new file mode 100644
index 0000000..5bc2649
--- /dev/null
+++ b/Angular_Dev/scss/bootstrap_custom/_tables.scss
@@ -0,0 +1,20 @@
+.table-outline {
+ border: 1px solid $table-border-color;
+
+ td {
+ vertical-align: middle;
+ }
+}
+
+.table-align-middle {
+
+ td {
+ vertical-align: middle;
+ }
+}
+
+.table-clear {
+ td {
+ border: 0;
+ }
+}
diff --git a/Angular_Dev/scss/bootstrap_custom/_tags.scss b/Angular_Dev/scss/bootstrap_custom/_tags.scss
new file mode 100644
index 0000000..1aafa21
--- /dev/null
+++ b/Angular_Dev/scss/bootstrap_custom/_tags.scss
@@ -0,0 +1,3 @@
+.tag-pill {
+ border-radius: $tag-pill-border-radius;
+}
diff --git a/Angular_Dev/scss/core/_animate.scss b/Angular_Dev/scss/core/_animate.scss
new file mode 100644
index 0000000..3621dee
--- /dev/null
+++ b/Angular_Dev/scss/core/_animate.scss
@@ -0,0 +1,43 @@
+@charset "UTF-8";
+
+.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;
+}
+
+@-webkit-keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+.fadeIn {
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+}
diff --git a/Angular_Dev/scss/core/_aside.scss b/Angular_Dev/scss/core/_aside.scss
new file mode 100644
index 0000000..c894be8
--- /dev/null
+++ b/Angular_Dev/scss/core/_aside.scss
@@ -0,0 +1,58 @@
+.aside-menu {
+ position: fixed;
+ top: 0;
+ right: -$aside-menu-width;
+ z-index: $zindex-navbar-fixed - 1;
+ width: $aside-menu-width;
+ height: 100%;
+ padding-top: $navbar-height;
+ color: $aside-menu-color;
+ background: $aside-menu-bg;
+ @include borders($aside-menu-borders);
+
+ .nav-tabs {
+ .nav-link {
+ padding: $aside-menu-nav-padding-y $aside-menu-nav-padding-x;
+ color: $body-color;
+ border-top: 0;
+ }
+ .nav-item:first-child {
+ .nav-link {
+ border-left: 0;
+ }
+ }
+ }
+
+ .tab-content {
+ position: relative;
+ height: calc(100vh - #{$aside-menu-nav-padding-y * 2 + $font-size-base} - #{$navbar-height});
+ overflow-x: hidden;
+ overflow-y: auto;
+ -ms-overflow-style: -ms-autohiding-scrollbar;
+
+ &::-webkit-scrollbar {
+ width: 10px;
+ margin-left: -10px;
+ -webkit-appearance: none;
+ }
+
+ // &::-webkit-scrollbar-button { }
+
+ &::-webkit-scrollbar-track {
+ background-color: lighten($aside-menu-bg, 5%);
+ border-right: 1px solid darken($aside-menu-bg, 5%);
+ border-left: 1px solid darken($aside-menu-bg, 5%);
+ }
+
+ // &::-webkit-scrollbar-track-piece { }
+
+ &::-webkit-scrollbar-thumb {
+ height: 50px;
+ background-color: darken($aside-menu-bg, 10%);
+ background-clip: content-box;
+ border-color: transparent;
+ border-style: solid;
+ border-width: 1px 2px;
+ }
+ }
+}
diff --git a/Angular_Dev/scss/core/_avatars.scss b/Angular_Dev/scss/core/_avatars.scss
new file mode 100644
index 0000000..07f0c12
--- /dev/null
+++ b/Angular_Dev/scss/core/_avatars.scss
@@ -0,0 +1,52 @@
+.img-avatar {
+ border-radius: 50em;
+}
+
+.avatar {
+ $width: 36px;
+ $status-width: 10px;
+ @include avatar($width,$status-width);
+}
+
+.avatar.avatar-xs {
+ $width: 20px;
+ $status-width: 8px;
+ @include avatar($width,$status-width);
+}
+
+.avatar.avatar-sm {
+ $width: 24px;
+ $status-width: 8px;
+ @include avatar($width,$status-width);
+}
+
+.avatar.avatar-lg {
+ $width: 72px;
+ $status-width: 12px;
+ @include avatar($width,$status-width);
+}
+
+.avatars-stack {
+ .avatar.avatar-xs {
+ margin-right: -10px;
+ }
+
+ // .avatar.avatar-sm {
+ //
+ // }
+
+ .avatar {
+ margin-right: -15px;
+ transition-duration: $layout-transition-speed, $layout-transition-speed;
+ transition-property: margin-left, margin-right;
+
+ &:hover {
+ margin-right: 0 !important;
+ }
+ }
+
+ // .avatar.avatar-lg {
+ //
+ // }
+
+}
diff --git a/Angular_Dev/scss/core/_breadcrumb-menu.scss b/Angular_Dev/scss/core/_breadcrumb-menu.scss
new file mode 100644
index 0000000..0d0fb1b
--- /dev/null
+++ b/Angular_Dev/scss/core/_breadcrumb-menu.scss
@@ -0,0 +1,36 @@
+.breadcrumb-menu {
+ position: absolute;
+ top: 0;
+ right: $breadcrumb-padding-x;
+ line-height: 43px;
+
+ &:before {
+ display: none;
+ }
+
+ .btn-group {
+ margin-top: -2px;
+ }
+
+ .btn.btn-secondary {
+ color: $text-muted;
+ border: 0;
+
+ &:hover, &.active {
+ color: $body-color;
+ background: transparent;
+ }
+ }
+
+ .open {
+ .btn.btn-secondary {
+ color: $body-color;
+ background: transparent;
+ }
+ }
+
+ .dropdown-menu {
+ min-width: 180px;
+ line-height: $line-height-base;
+ }
+}
diff --git a/Angular_Dev/scss/core/_buttons.scss b/Angular_Dev/scss/core/_buttons.scss
new file mode 100644
index 0000000..330e973
--- /dev/null
+++ b/Angular_Dev/scss/core/_buttons.scss
@@ -0,0 +1,565 @@
+.btn-transparent {
+ $color: #fff;
+ $background: transparent;
+ $border: transparent;
+
+ @include button-variant($color, $background, $border)
+}
+
+
+.btn {
+ [class^="icon-"], [class*=" icon-"] {
+ display: inline-block;
+ margin-top: -2px;
+ vertical-align: middle;
+ }
+}
+
+.btn-facebook,
+.btn-twitter,
+.btn-linkedin,
+.btn-flickr,
+.btn-tumblr,
+.btn-xing,
+.btn-github,
+.btn-html5,
+.btn-openid,
+.btn-stack-overflow,
+.btn-youtube,
+.btn-css3,
+.btn-dribbble,
+.btn-google-plus,
+.btn-instagram,
+.btn-pinterest,
+.btn-vk,
+.btn-yahoo,
+.btn-behance,
+.btn-dropbox,
+.btn-reddit,
+.btn-spotify,
+.btn-vine,
+.btn-foursquare,
+.btn-vimeo {
+ position: relative;
+ overflow: hidden;
+ color: #fff !important;
+ text-align: center;
+
+ &:before {
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: block;
+ font-family: 'FontAwesome';
+ font-style: normal;
+ font-weight: normal;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ }
+
+ &:hover {
+ color: #fff;
+ }
+
+ &.icon {
+
+ span {
+ display: none;
+ }
+ }
+
+ &.text {
+ &:before {
+ display: none;
+ }
+
+ span {
+ margin-left: 0 !important;
+ }
+ }
+ @include button-social-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height-base, $btn-border-radius);
+
+ &.btn-lg {
+ @include button-social-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
+ }
+
+ &.btn-sm {
+ @include button-social-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
+ }
+
+}
+
+.btn-facebook {
+ $color: $facebook;
+
+ background: $color;
+ &:before {
+ content: "\f09a";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-twitter {
+ $color: $twitter;
+
+ background: $color;
+ &:before {
+ content: "\f099";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-linkedin {
+ $color: $linkedin;
+
+ background: $color;
+ &:before {
+ content: "\f0e1";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-flickr {
+ $color: $flickr;
+
+ background: $color;
+ &:before {
+ content: "\f16e";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-tumblr {
+ $color: $tumblr;
+
+ background: $color;
+ &:before {
+ content: "\f173";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-xing {
+ $color: $xing;
+
+ background: $color;
+ &:before {
+ content: "\f168";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-github {
+ $color: $github;
+
+ background: $color;
+ &:before {
+ content: "\f09b";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-html5 {
+ $color: $html5;
+
+ background: $color;
+ &:before {
+ content: "\f13b";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-openid {
+ $color: $openid;
+
+ background: $color;
+ &:before {
+ content: "\f19b";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-stack-overflow {
+ $color: $stack-overflow;
+
+ background: $color;
+ &:before {
+ content: "\f16c";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-css3 {
+ $color: $css3;
+
+ background: $color;
+ &:before {
+ content: "\f13c";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-youtube {
+ $color: $youtube;
+
+ background: $color;
+ &:before {
+ content: "\f167";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-dribbble {
+ $color: $dribbble;
+
+ background: $color;
+ &:before {
+ content: "\f17d";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-google-plus {
+ $color: $google-plus;
+
+ background: $color;
+ &:before {
+ content: "\f0d5";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-instagram {
+ $color: $instagram;
+
+ background: $color;
+ &:before {
+ content: "\f16d";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-pinterest {
+ $color: $pinterest;
+
+ background: $color;
+ &:before {
+ content: "\f0d2";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-vk {
+ $color: $vk;
+
+ background: $color;
+ &:before {
+ content: "\f189";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-yahoo {
+ $color: $yahoo;
+
+ background: $color;
+ &:before {
+ content: "\f19e";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-behance {
+ $color: $behance;
+
+ background: $color;
+ &:before {
+ content: "\f1b4";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-dropbox {
+ $color: $dropbox;
+
+ background: $color;
+ &:before {
+ content: "\f16b";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-reddit {
+ $color: $reddit;
+
+ background: $color;
+ &:before {
+ content: "\f1a1";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-spotify {
+ $color: $spotify;
+
+ background: $color;
+ &:before {
+ content: "\f1bc";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-vine {
+ $color: $vine;
+
+ background: $color;
+ &:before {
+ content: "\f1ca";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-foursquare {
+ $color: $foursquare;
+
+ background: $color;
+ &:before {
+ content: "\f180";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-vimeo {
+ $color: $vimeo;
+
+ background: $color;
+ &:before {
+ content: "\f194";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
diff --git a/Angular_Dev/scss/core/_callout.scss b/Angular_Dev/scss/core/_callout.scss
new file mode 100644
index 0000000..fe9e6bf
--- /dev/null
+++ b/Angular_Dev/scss/core/_callout.scss
@@ -0,0 +1,85 @@
+.callout {
+ position: relative;
+ padding: 0 $spacer-y;
+ margin: $spacer-x 0;
+ border: 0 solid $border-color;
+ border-left-width: .25rem;
+
+ @if $enable-rounded {
+ border-radius: .25rem;
+ }
+
+ .chart-wrapper {
+ position: absolute;
+ top: 18px;
+ left: 45%;
+ float: right;
+ width: 100px;
+ }
+}
+
+.callout-bordered {
+ border: 1px solid $border-color;
+ border-left-width: .25rem;
+}
+.callout code {
+ border-radius: .25rem;
+}
+.callout h4 {
+ margin-top: 0;
+ margin-bottom: .25rem;
+}
+.callout p:last-child {
+ margin-bottom: 0;
+}
+.callout + .callout {
+ margin-top: - .25rem;
+}
+
+.callout-default {
+ border-left-color: $text-muted;
+
+ h4 {
+ color: $text-muted;
+ }
+}
+
+.callout-primary {
+ border-left-color: $brand-primary;
+
+ h4 {
+ color: $brand-primary;
+ }
+}
+
+.callout-info {
+ border-left-color: $brand-info;
+
+ h4 {
+ color: $brand-info;
+ }
+}
+
+.callout-warning {
+ border-left-color: $brand-warning;
+
+ h4 {
+ color: $brand-warning;
+ }
+}
+
+.callout-danger {
+ border-left-color: $brand-danger;
+
+ h4 {
+ color: $brand-danger;
+ }
+}
+
+.callout-success {
+ border-left-color: $brand-success;
+
+ h4 {
+ color: $brand-success;
+ }
+}
diff --git a/Angular_Dev/scss/core/_charts.scss b/Angular_Dev/scss/core/_charts.scss
new file mode 100644
index 0000000..7432f16
--- /dev/null
+++ b/Angular_Dev/scss/core/_charts.scss
@@ -0,0 +1,6 @@
+canvas.chart {
+ display: inline-block !important;
+}
+base-chart.chart {
+ display: block !important;
+}
diff --git a/Angular_Dev/scss/core/_custom-variables.scss b/Angular_Dev/scss/core/_custom-variables.scss
new file mode 100644
index 0000000..8d444a3
--- /dev/null
+++ b/Angular_Dev/scss/core/_custom-variables.scss
@@ -0,0 +1,173 @@
+// Core Admin Variables
+
+$enable-sidebar-nav-rounded: false;
+
+$border-color: $gray-lighter;
+$layout-transition-speed: .25s;
+
+
+// Social Colors
+
+$facebook: #3b5998;
+$twitter: #00aced;
+$linkedin: #4875b4;
+$google-plus: #d34836;
+$flickr: #ff0084;
+$tumblr: #32506d;
+$xing: #026466;
+$github: #4183c4;
+$html5: #e34f26;
+$openid: #f78c40;
+$stack-overflow: #fe7a15;
+$youtube: #b00;
+$css3: #0170ba;
+$dribbble: #ea4c89;
+$google-plus: #bb4b39;
+$instagram: #517fa4;
+$pinterest: #cb2027;
+$vk: #45668e;
+$yahoo: #400191;
+$behance: #1769ff;
+$dropbox: #007ee5;
+$reddit: #ff4500;
+$spotify: #7ab800;
+$vine: #00bf8f;
+$foursquare: #1073af;
+$vimeo: #aad450;
+
+// Navbar
+
+$navbar-height: 55px;
+$navbar-bg: #fff;
+$navbar-border: (
+ bottom: (
+ size: 1px,
+ style: solid,
+ color: $border-color
+ )
+);
+$navbar-brand-width: 155px;
+$navbar-brand-bg: #fff;
+$navbar-brand-logo: url('../img/logo.png');
+$navbar-brand-logo-size: 70px auto;
+$navbar-brand-border: (
+ bottom: (
+ size: 1px,
+ style: solid,
+ color: $border-color
+ )
+);
+
+$navbar-color: rgba(0,0,0,.3);
+$navbar-hover-color: rgba(0,0,0,.6);
+$navbar-active-color: rgba(0,0,0,.8);
+$navbar-disabled-color: rgba(0,0,0,.15);
+
+// Sidebar
+
+$sidebar-width: 200px;
+$sidebar-padding: 0;
+$sidebar-compact-width: 50px;
+$sidebar-compact-height: $sidebar-compact-width;
+$sidebar-color: #fff;
+$sidebar-bg: $gray-dark;
+$sidebar-header-bg: rgba(0,0,0,.2);
+$sidebar-footer-bg: rgba(0,0,0,.2);
+$sidebar-borders: none;
+
+// Sidebar Navigation
+
+$sidebar-nav-color: #fff;
+$sidebar-nav-title-padding-y: .75rem;
+$sidebar-nav-title-padding-x: 1rem;
+$sidebar-nav-title-color: $gray-lighter;
+$sidebar-nav-link-padding-y: .75rem;
+$sidebar-nav-link-padding-x: 1rem;
+$sidebar-nav-link-color: #fff;
+$sidebar-nav-link-bg: transparent;
+$sidebar-nav-link-icon-color: $text-muted;
+
+$sidebar-nav-link-borders: 0;
+$sidebar-nav-link-hover-color: #fff;
+$sidebar-nav-link-hover-bg: $brand-primary;
+$sidebar-nav-link-hover-icon-color: #fff !important;
+
+$sidebar-nav-link-hover-borders: 0;
+$sidebar-nav-link-active-color: #fff;
+$sidebar-nav-link-active-bg: lighten($sidebar-bg, 5%);
+$sidebar-nav-link-active-icon-color: $brand-primary;
+
+$sidebar-nav-link-active-borders: 0;
+
+$sidebar-nav-dropdown-color: #fff;
+$sidebar-nav-dropdown-bg: rgba(0,0,0,.2);
+$sidebar-nav-dropdown-borders: 0;
+
+// Top Navigation
+
+$top-nav-bg: #fff;
+$top-nav-color: $body-color;
+$top-nav-borders: (
+ bottom: (
+ size: 1px,
+ style: solid,
+ color: $border-color
+ )
+);
+$top-nav-ul-borders: (
+ all: (
+ size: 1px,
+ style: solid,
+ color: $border-color
+ )
+);
+
+$top-nav-hover-color: #fff;
+$top-nav-hover-bg: $brand-primary;
+$top-nav-active-color: #fff;
+$top-nav-active-bg: $brand-primary;
+$top-nav-height: $navbar-height - 15px;
+
+// Breadcrumb
+
+$breadcrumb-borders: (
+ bottom: (
+ size: 1px,
+ style: solid,
+ color: $border-color
+ )
+);
+
+// Aside
+
+$aside-menu-width: 250px;
+$aside-menu-color: $gray-dark;
+$aside-menu-bg: #fff;
+$aside-menu-borders: (
+ left: (
+ size: 1px,
+ style: solid,
+ color: $border-color
+ )
+);
+
+$aside-menu-nav-padding-y: .75rem;
+$aside-menu-nav-padding-x: 1rem;
+
+// Footer
+
+$footer-height: 50px;
+$footer-bg: $gray-lightest;
+$footer-color: $body-color;
+$footer-borders: (
+ top: (
+ size: 1px,
+ style: solid,
+ color: $border-color
+ )
+);
+
+// Cards
+
+$card-icon-bg: transparent;
+$card-icon-color: $body-color;
diff --git a/Angular_Dev/scss/core/_custom.scss b/Angular_Dev/scss/core/_custom.scss
new file mode 100644
index 0000000..15d367a
--- /dev/null
+++ b/Angular_Dev/scss/core/_custom.scss
@@ -0,0 +1 @@
+// Here you can add other styles
diff --git a/Angular_Dev/scss/core/_footer.scss b/Angular_Dev/scss/core/_footer.scss
new file mode 100644
index 0000000..71b3cd2
--- /dev/null
+++ b/Angular_Dev/scss/core/_footer.scss
@@ -0,0 +1,12 @@
+footer.footer {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ height: $footer-height;
+ padding: 0 $spacer-x;
+ line-height: $footer-height;
+ color: $footer-color;
+ background: $footer-bg;
+ @include borders($footer-borders);
+}
diff --git a/Angular_Dev/scss/core/_grid.scss b/Angular_Dev/scss/core/_grid.scss
new file mode 100644
index 0000000..bca7bdb
--- /dev/null
+++ b/Angular_Dev/scss/core/_grid.scss
@@ -0,0 +1,15 @@
+.row.row-equal {
+ padding-right: ($grid-gutter-width / 4);
+ padding-left: ($grid-gutter-width / 4);
+ margin-right: ($grid-gutter-width / -2);
+ margin-left: ($grid-gutter-width / -2);
+
+ [class*="col-"] {
+ padding-right: ($grid-gutter-width / 4);
+ padding-left: ($grid-gutter-width / 4);
+ }
+}
+
+.main .container-fluid {
+ padding: 0 30px;
+}
diff --git a/Angular_Dev/scss/core/_layout.scss b/Angular_Dev/scss/core/_layout.scss
new file mode 100644
index 0000000..521d234
--- /dev/null
+++ b/Angular_Dev/scss/core/_layout.scss
@@ -0,0 +1,238 @@
+html.sidebar-opened {
+ max-width: 100% !important;
+ overflow-x: hidden !important;
+}
+
+body {
+ position: relative;
+ min-height: 100vh;
+ padding: 0;
+ margin: 0;
+
+
+ .bd-title.main {
+ padding: 0 !important;
+ }
+}
+
+.sidebar {
+ left: - $sidebar-width;
+ transition-duration: $layout-transition-speed, $layout-transition-speed, $layout-transition-speed, $layout-transition-speed, $layout-transition-speed, $layout-transition-speed;
+ transition-property: left, right, padding-left, padding-right, margin-left, margin-right;
+
+}
+
+.main {
+ padding-bottom: $footer-height;
+ transition-duration: $layout-transition-speed, $layout-transition-speed, $layout-transition-speed, $layout-transition-speed;
+ transition-property: padding-left, padding-right, margin-left, margin-right;
+}
+
+.aside-menu {
+ transition-duration: $layout-transition-speed, $layout-transition-speed;
+ transition-property: left, right;
+}
+
+.footer {
+ transition-duration: $layout-transition-speed, $layout-transition-speed, $layout-transition-speed, $layout-transition-speed, $layout-transition-speed, $layout-transition-speed;
+ transition-property: padding-left, padding-right, margin-left, margin-right, left, right;
+}
+
+body.std {
+ position: relative;
+
+ header.navbar {
+ z-index: $zindex-navbar-fixed;
+ }
+
+ .sidebar {
+ padding-top: $navbar-height;
+ }
+
+ .main {
+ padding-left: $sidebar-width;
+ }
+}
+
+body.navbar-fixed {
+
+ header.navbar {
+ @extend .navbar-fixed-top;
+ }
+
+ .main {
+ padding-top: $navbar-height;
+ }
+
+ &.top-nav {
+ &.fixed-nav {
+
+ nav.top-nav {
+ position: fixed;
+ }
+
+ .main {
+ padding-top: $navbar-height + $top-nav-height;
+ }
+ }
+ }
+}
+
+body:not(.top-nav) {
+ header.navbar {
+ z-index: $zindex-navbar-fixed;
+ }
+
+ .sidebar {
+ //left: 0;
+ display: inline;
+ padding-top: $navbar-height !important;
+ }
+
+ &.compact-nav {
+
+ .main {
+ padding-left: $sidebar-compact-width;
+ }
+
+ .footer {
+ left: $sidebar-compact-width;
+ }
+ }
+
+ &.fixed-nav {
+
+ .sidebar {
+ position: fixed;
+
+ .sidebar-nav {
+ height: calc(100vh - #{$navbar-height});
+ }
+ }
+
+ .sidebar-footer {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ }
+ }
+
+ &.sidebar-off-canvas {
+
+ header.navbar {
+ z-index: $zindex-navbar-fixed + 2;
+ }
+
+ .sidebar {
+ left: -$sidebar-width;
+ z-index: $zindex-navbar-fixed + 1;
+ padding-top: 0;
+
+ .sidebar-close {
+ display: inline;
+ }
+
+ .sidebar-nav {
+ height: 100vh;
+ }
+ }
+
+ .main {
+ padding-left: 0;
+ }
+
+ .footer {
+ left: 0;
+ }
+ }
+
+ &.sidebar-opened {
+
+ .sidebar {
+ left: 0;
+ }
+
+ &.sidebar-off-canvas-push {
+
+ .main {
+ margin-right: -$sidebar-width;
+ margin-left: $sidebar-width;
+ }
+
+ .footer {
+ margin-right: -$sidebar-width;
+ margin-left: $sidebar-width;
+ }
+ }
+
+ &.sidebar-off-canvas-with-shadow {
+ position: relative;
+ max-width: 100% !important;
+ overflow-x: hidden !important;
+
+
+ &:after {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: $zindex-navbar-fixed;
+ width: 100%;
+ height: 100%;
+ content: '';
+ background: rgba(0,0,0,.7);
+ }
+ }
+ }
+}
+
+body.sidebar-nav {
+ .sidebar {
+ left: 0;
+ }
+ .main {
+ padding-left: $sidebar-width;
+ }
+
+ .footer {
+ left: $sidebar-width;
+ }
+}
+
+body.top-nav {
+
+ .layout-toggler {
+ display: none !important;
+ }
+
+ .main {
+ padding-top: $navbar-height + $top-nav-height;
+ }
+}
+
+body.aside-menu-open {
+ .main {
+ padding-right: $aside-menu-width;
+ }
+
+ .aside-menu {
+ right: 0;
+ }
+
+ .footer {
+ right: $aside-menu-width;
+ }
+
+ &.aside-menu-off-canvas {
+ .main {
+ right: 0;
+ padding-right: 0;
+ }
+ }
+}
+
+body.footer-fixed {
+ .footer {
+ position: fixed;
+ bottom: 0;
+ }
+}
diff --git a/Angular_Dev/scss/core/_loading.scss b/Angular_Dev/scss/core/_loading.scss
new file mode 100644
index 0000000..1732064
--- /dev/null
+++ b/Angular_Dev/scss/core/_loading.scss
@@ -0,0 +1,127 @@
+// Angular Version
+// Make clicks pass-through
+#loading-bar,
+#loading-bar-spinner {
+ -webkit-pointer-events: none;
+ pointer-events: none;
+ -moz-transition: 350ms linear all;
+ -o-transition: 350ms linear all;
+ -webkit-transition: 350ms linear all;
+ transition: 350ms linear all;
+}
+
+#loading-bar.ng-enter,
+#loading-bar.ng-leave.ng-leave-active,
+#loading-bar-spinner.ng-enter,
+#loading-bar-spinner.ng-leave.ng-leave-active {
+ opacity: 0;
+}
+
+#loading-bar.ng-enter.ng-enter-active,
+#loading-bar.ng-leave,
+#loading-bar-spinner.ng-enter.ng-enter-active,
+#loading-bar-spinner.ng-leave {
+ opacity: 1;
+}
+
+#loading-bar .bar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 20002;
+ width: 100%;
+ height: 2px;
+ background: $brand-primary;
+ border-top-right-radius: 1px;
+ border-bottom-right-radius: 1px;
+ -moz-transition: width 350ms;
+ -o-transition: width 350ms;
+ -webkit-transition: width 350ms;
+ transition: width 350ms;
+}
+
+// Fancy blur effect
+#loading-bar .peg {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 70px;
+ height: 2px;
+ -moz-border-radius: 100%;
+ -webkit-border-radius: 100%;
+ border-radius: 100%;
+ -moz-box-shadow: #29d 1px 0 6px 1px;
+ -ms-box-shadow: #29d 1px 0 6px 1px;
+ -webkit-box-shadow: #29d 1px 0 6px 1px;
+ box-shadow: #29d 1px 0 6px 1px;
+ opacity: .45;
+}
+
+#loading-bar-spinner {
+ position: fixed;
+ top: 10px;
+ left: 10px;
+ z-index: 10002;
+ display: block;
+}
+
+#loading-bar-spinner .spinner-icon {
+ width: 14px;
+ height: 14px;
+
+ border: solid 2px transparent;
+ border-top-color: #29d;
+ border-left-color: #29d;
+ border-radius: 50%;
+
+ -moz-animation: loading-bar-spinner 400ms linear infinite;
+ -ms-animation: loading-bar-spinner 400ms linear infinite;
+ -o-animation: loading-bar-spinner 400ms linear infinite;
+ -webkit-animation: loading-bar-spinner 400ms linear infinite;
+ animation: loading-bar-spinner 400ms linear infinite;
+}
+
+@-webkit-keyframes loading-bar-spinner {
+ 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
+ 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
+}
+@-moz-keyframes loading-bar-spinner {
+ 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
+ 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
+}
+@-o-keyframes loading-bar-spinner {
+ 0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
+ 100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
+}
+@-ms-keyframes loading-bar-spinner {
+ 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
+ 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
+}
+@keyframes loading-bar-spinner {
+ 0% { transform: rotate(0deg); transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); transform: rotate(360deg); }
+}
+
+//Ajax & Static Version
+.pace {
+ -webkit-pointer-events: none;
+ pointer-events: none;
+
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ user-select: none;
+}
+
+.pace-inactive {
+ display: none;
+}
+
+.pace .pace-progress {
+ position: fixed;
+ top: 0;
+ right: 100%;
+ z-index: 2000;
+ width: 100%;
+ height: 2px;
+ background: $brand-primary;
+}
diff --git a/Angular_Dev/scss/core/_mixins.scss b/Angular_Dev/scss/core/_mixins.scss
new file mode 100644
index 0000000..b05116d
--- /dev/null
+++ b/Angular_Dev/scss/core/_mixins.scss
@@ -0,0 +1,92 @@
+@mixin button-social-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
+ padding: $padding-y $padding-x;
+ font-size: $font-size;
+ line-height: $line-height;
+ border: 0;
+ @include border-radius($border-radius);
+
+ &:before {
+ width: ($padding-y * 2) + ($font-size * $line-height);
+ height: ($padding-y * 2) + ($font-size * $line-height);
+ padding: $padding-y 0;
+ font-size: $font-size;
+ line-height: $line-height;
+ @include border-radius($border-radius);
+ }
+
+ span {
+ margin-left: ($padding-y * 2) + ($font-size * $line-height);
+ }
+
+ &.icon {
+ width: ($padding-y * 2) + ($font-size * $line-height);
+ height: ($padding-y * 2) + ($font-size * $line-height);
+ }
+}
+
+@mixin avatar($width, $status-width) {
+ position: relative;
+ display: inline-block;
+ width: $width;
+
+ .img-avatar {
+ width: $width;
+ height: $width;
+ }
+
+ .avatar-status {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ display: block;
+ width: $status-width;
+ height: $status-width;
+ border: 1px solid #fff;
+ border-radius: 50em;
+ }
+}
+
+@mixin borders($borders) {
+ @each $border in $borders {
+ $direction: nth($border, 1);
+ @if $direction == 'all' {
+ $size: map-get(map-get($borders, $direction), size);
+ $style: map-get(map-get($borders, $direction), style);
+ $color: map-get(map-get($borders, $direction), color);
+ border: $size $style $color;
+ } @else if $direction == 'top' {
+ $size: map-get(map-get($borders, $direction), size);
+ $style: map-get(map-get($borders, $direction), style);
+ $color: map-get(map-get($borders, $direction), color);
+ border-top: $size $style $color;
+ } @else if $direction == 'right' {
+ $size: map-get(map-get($borders, $direction), size);
+ $style: map-get(map-get($borders, $direction), style);
+ $color: map-get(map-get($borders, $direction), color);
+ border-right: $size $style $color;
+ } @else if $direction == 'bottom' {
+ $size: map-get(map-get($borders, $direction), size);
+ $style: map-get(map-get($borders, $direction), style);
+ $color: map-get(map-get($borders, $direction), color);
+ border-bottom: $size $style $color;
+ } @else if $direction == 'left' {
+ $size: map-get(map-get($borders, $direction), size);
+ $style: map-get(map-get($borders, $direction), style);
+ $color: map-get(map-get($borders, $direction), color);
+ border-left: $size $style $color;
+ }
+ }
+}
+
+@mixin bg-variant($parent, $color) {
+ #{$parent} {
+ @include border-radius($card-border-radius-inner $card-border-radius-inner $card-border-radius-inner $card-border-radius-inner);
+ color: #fff !important;
+ background-color: $color !important;
+ }
+ a#{$parent} {
+ @include hover-focus {
+ background-color: darken($color, 10%);
+ }
+ }
+}
diff --git a/Angular_Dev/scss/core/_mobile.scss b/Angular_Dev/scss/core/_mobile.scss
new file mode 100644
index 0000000..4b723fb
--- /dev/null
+++ b/Angular_Dev/scss/core/_mobile.scss
@@ -0,0 +1,75 @@
+@include media-breakpoint-down(md) {
+
+ $mobile-nav-width: 200px;
+
+ body {
+ padding: 0 !important;
+ margin: 0 !important;
+ }
+
+ header.navbar {
+ position: fixed !important;
+ top: 0 !important;
+ right: 0 !important;
+ left: 0 !important;
+
+ .navbar-toggler {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 70px;
+ height: inherit;
+ }
+
+ .navbar-brand {
+ width: 100% !important;
+ margin: 0 auto !important;
+ }
+ }
+
+ .sidebar {
+ width: $mobile-nav-width;
+ margin-left: -$mobile-nav-width;
+
+ .sidebar-footer {
+ margin-left: -$mobile-nav-width;
+ }
+ }
+
+ .breadcrumb-menu {
+ display: none;
+ }
+
+ .main {
+ width: 100% !important;
+ padding: 0 !important;
+ padding-top: $navbar-height !important;
+ margin: 0 !important;
+ overflow: hidden;
+ }
+
+ .footer {
+ display: none;
+ }
+
+ html {
+ max-width: 100%;
+ overflow-x: hidden;
+ }
+
+ body.mobile-open {
+ max-width: 100%;
+ overflow-x: hidden;
+ .sidebar {
+ margin-left: 0;
+
+ .sidebar-footer {
+ margin-left: 0;
+ }
+ }
+
+ .main {
+ margin-left: $mobile-nav-width !important;
+ }
+ }
+}
diff --git a/Angular_Dev/scss/core/_navigation.scss b/Angular_Dev/scss/core/_navigation.scss
new file mode 100644
index 0000000..7ce7bca
--- /dev/null
+++ b/Angular_Dev/scss/core/_navigation.scss
@@ -0,0 +1,8 @@
+// Disabled Navigation
+@import "navigation/disabled";
+
+// Sidebar Navigation
+@import "navigation/sidebar";
+
+// Top Navigation
+@import "navigation/top";
diff --git a/Angular_Dev/scss/core/_others.scss b/Angular_Dev/scss/core/_others.scss
new file mode 100644
index 0000000..062afb2
--- /dev/null
+++ b/Angular_Dev/scss/core/_others.scss
@@ -0,0 +1,3 @@
+hr.transparent {
+ border-top: 1px solid transparent;
+}
diff --git a/Angular_Dev/scss/core/_switches.scss b/Angular_Dev/scss/core/_switches.scss
new file mode 100644
index 0000000..7aa38ff
--- /dev/null
+++ b/Angular_Dev/scss/core/_switches.scss
@@ -0,0 +1,314 @@
+@mixin switch-size($width, $height, $font-size, $handle-margin) {
+ width: $width;
+ height: $height;
+
+ .switch-label {
+ font-size: $font-size;
+ }
+
+ .switch-handle {
+ width: $height - $handle-margin * 2;
+ height: $height - $handle-margin * 2;
+ }
+
+ .switch-input:checked ~ .switch-handle {
+ left: $width - $height + $handle-margin;
+ }
+}
+
+@mixin switch($type, $width, $height, $font-size, $handle-margin) {
+ position: relative;
+ display: inline-block;
+ vertical-align: top;
+ width: $width;
+ height: $height;
+ background-color: transparent;
+ cursor: pointer;
+
+ .switch-input {
+ position: absolute;
+ top: 0;
+ left: 0;
+ opacity: 0;
+ }
+
+ .switch-label {
+ position: relative;
+ display: block;
+ height: inherit;
+ @if $type == icon {
+ font-family: FontAwesome;
+ }
+ font-size: $font-size;
+ font-weight: 600;
+ text-transform: uppercase;
+ @if $type == ddd {
+ background-color: $gray-lightest;
+ } @else {
+ background-color: #fff;
+ }
+ border: 1px solid $border-color;
+ border-radius: 2px;
+ -moz-transition: 0.15s ease-out;
+ -o-transition: 0.15s ease-out;
+ -webkit-transition: 0.15s ease-out;
+ transition: 0.15s ease-out;
+ -moz-transition-property: opacity background;
+ -o-transition-property: opacity background;
+ -webkit-transition-property: opacity background;
+ transition-property: opacity background;
+ }
+ @if $type == text or $type == icon {
+ .switch-label:before,
+ .switch-label:after {
+ position: absolute;
+ top: 50%;
+ width: 50%;
+ margin-top: -.5em;
+ line-height: 1;
+ text-align: center;
+ -moz-transition: inherit;
+ -o-transition: inherit;
+ -webkit-transition: inherit;
+ transition: inherit;
+ }
+ .switch-label:before {
+ right: 1px;
+ color: $gray-lighter;
+ content: attr(data-off);
+ }
+ .switch-label:after {
+ left: 1px;
+ color: #fff;
+ content: attr(data-on);
+ opacity: 0;
+ }
+ }
+ .switch-input:checked ~ .switch-label {
+ //background: $gray-lightest;
+ }
+ .switch-input:checked ~ .switch-label:before {
+ opacity: 0;
+ }
+ .switch-input:checked ~ .switch-label:after {
+ opacity: 1;
+ }
+
+ .switch-handle {
+ position: absolute;
+ top: $handle-margin;
+ left: $handle-margin;
+ width: $height - $handle-margin * 2;
+ height: $height - $handle-margin * 2;
+ background: #fff;
+ border: 1px solid $border-color;
+ border-radius: 1px;
+ -moz-transition: left 0.15s ease-out;
+ -o-transition: left 0.15s ease-out;
+ -webkit-transition: left 0.15s ease-out;
+ transition: left 0.15s ease-out;
+ @if $type == ddd {
+ border: 0;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+ }
+ }
+
+ .switch-input:checked ~ .switch-handle {
+ left: $width - $height + $handle-margin;
+ }
+
+
+ @if $type == ddd {
+ @extend .switch-pill;
+ }
+
+ //size variations
+ @if $type == default {
+
+ &.switch-lg {
+ @include switch-size($switch-lg-width, $switch-lg-height, $switch-lg-font-size, $handle-margin);
+ }
+ &.switch-sm {
+ @include switch-size($switch-sm-width, $switch-sm-height, $switch-sm-font-size, $handle-margin);
+ }
+ &.switch-xs {
+ @include switch-size($switch-xs-width, $switch-xs-height, $switch-xs-font-size, $handle-margin);
+ }
+
+ } @else if $type == text {
+
+ &.switch-lg {
+ @include switch-size($switch-text-lg-width, $switch-text-lg-height, $switch-text-lg-font-size, $handle-margin);
+ }
+ &.switch-sm {
+ @include switch-size($switch-text-sm-width, $switch-text-sm-height, $switch-text-sm-font-size, $handle-margin);
+ }
+ &.switch-xs {
+ @include switch-size($switch-text-xs-width, $switch-text-xs-height, $switch-text-xs-font-size, $handle-margin);
+ }
+
+ } @else if $type == icon {
+
+ &.switch-lg {
+ @include switch-size($switch-icon-lg-width, $switch-icon-lg-height, $switch-icon-lg-font-size, $handle-margin);
+ }
+ &.switch-sm {
+ @include switch-size($switch-icon-sm-width, $switch-icon-sm-height, $switch-icon-sm-font-size, $handle-margin);
+ }
+ &.switch-xs {
+ @include switch-size($switch-icon-xs-width, $switch-icon-xs-height, $switch-icon-xs-font-size, $handle-margin);
+ }
+
+ } @else if $type == ddd {
+
+ &.switch-lg {
+ @include switch-size($switch-lg-width, $switch-lg-height, $switch-lg-font-size, 0);
+ }
+ &.switch-sm {
+ @include switch-size($switch-sm-width, $switch-sm-height, $switch-sm-font-size, 0);
+ }
+ &.switch-xs {
+ @include switch-size($switch-xs-width, $switch-xs-height, $switch-xs-font-size, 0);
+ }
+ }
+}
+
+@mixin switch-variant($color) {
+ > .switch-input:checked ~ .switch-label {
+ background: $color !important;
+ border-color: darken($color,10%);
+ }
+
+ > .switch-input:checked ~ .switch-handle {
+ border-color: darken($color,10%);
+ }
+}
+
+@mixin switch-outline-variant($color) {
+ > .switch-input:checked ~ .switch-label {
+ background: #fff !important;
+ border-color: $color;
+
+ &:after {
+ color: $color;
+ }
+ }
+
+ > .switch-input:checked ~ .switch-handle {
+ border-color: $color;
+ }
+}
+
+@mixin switch-outline-alt-variant($color) {
+ > .switch-input:checked ~ .switch-label {
+ background: #fff !important;
+ border-color: $color;
+
+ &:after {
+ color: $color;
+ }
+ }
+
+ > .switch-input:checked ~ .switch-handle {
+ background: $color !important;
+ border-color: $color;
+ }
+}
+
+$switch-lg-width: 48px;
+$switch-lg-height: 28px;
+$switch-lg-font-size: 12px;
+
+$switch-width: 40px;
+$switch-height: 24px;
+$switch-font-size: 10px;
+
+$handle-margin: 2px;
+
+$switch-sm-width: 32px;
+$switch-sm-height: 20px;
+$switch-sm-font-size: 8px;
+
+$switch-xs-width: 24px;
+$switch-xs-height: 16px;
+$switch-xs-font-size: 7px;
+
+
+$switch-text-lg-width: 56px;
+$switch-text-lg-height: 28px;
+$switch-text-lg-font-size: 12px;
+
+$switch-text-width: 48px;
+$switch-text-height: 24px;
+$switch-text-font-size: 10px;
+
+$switch-text-sm-width: 40px;
+$switch-text-sm-height: 20px;
+$switch-text-sm-font-size: 8px;
+
+$switch-text-xs-width: 32px;
+$switch-text-xs-height: 16px;
+$switch-text-xs-font-size: 7px;
+
+
+$switch-icon-lg-width: 56px;
+$switch-icon-lg-height: 28px;
+$switch-icon-lg-font-size: 12px;
+
+$switch-icon-width: 48px;
+$switch-icon-height: 24px;
+$switch-icon-font-size: 10px;
+
+$switch-icon-sm-width: 40px;
+$switch-icon-sm-height: 20px;
+$switch-icon-sm-font-size: 8px;
+
+$switch-icon-xs-width: 32px;
+$switch-icon-xs-height: 16px;
+$switch-icon-xs-font-size: 7px;
+
+.switch.switch-default {
+ @include switch('default', $switch-width, $switch-height, $switch-font-size, $handle-margin);
+}
+
+.switch.switch-text {
+ @include switch('text', $switch-text-width, $switch-text-height, $switch-text-font-size, $handle-margin);
+}
+
+.switch.switch-icon {
+ @include switch('icon', $switch-icon-width, $switch-icon-height, $switch-icon-font-size, $handle-margin);
+}
+
+.switch.switch-3d {
+ @include switch('ddd', $switch-width, $switch-height, $switch-font-size, 0);
+}
+
+//pills style
+.switch-pill {
+ .switch-label,
+ .switch-handle {
+ border-radius: 50em !important;
+ }
+
+ .switch-label:before {
+ right: 2px !important;
+ }
+ .switch-label:after {
+ left: 2px !important;
+ }
+}
+
+@each $variant, $color in (primary: $brand-primary, secondary: $gray-lighter, success: $brand-success, info: $brand-info, warning: $brand-warning, danger: $brand-danger) {
+ //normal style
+ .switch-#{$variant} {
+ @include switch-variant($color);
+ }
+ //outline style
+ .switch-#{$variant}-outline {
+ @include switch-outline-variant($color);
+ }
+ //outline alternative style
+ .switch-#{$variant}-outline-alt {
+ @include switch-outline-alt-variant($color);
+ }
+}
diff --git a/Angular_Dev/scss/core/_temp.scss b/Angular_Dev/scss/core/_temp.scss
new file mode 100644
index 0000000..f75a947
--- /dev/null
+++ b/Angular_Dev/scss/core/_temp.scss
@@ -0,0 +1,13 @@
+.pagination-datatables, .pagination {
+ li {
+ @extend .page-item;
+
+ a {
+ @extend .page-link;
+ }
+ }
+}
+
+.label-pill {
+ border-radius: 1rem !important;
+}
diff --git a/Angular_Dev/scss/core/_typography.scss b/Angular_Dev/scss/core/_typography.scss
new file mode 100644
index 0000000..7740fbc
--- /dev/null
+++ b/Angular_Dev/scss/core/_typography.scss
@@ -0,0 +1,36 @@
+body {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+}
+
+.font-xs {
+ font-size: .75rem !important;
+}
+
+.font-sm {
+ font-size: .85rem !important;
+}
+
+.font-lg {
+ font-size: 1rem !important;
+}
+
+.font-xl {
+ font-size: 1.25rem !important;
+}
+
+.font-2xl {
+ font-size: 1.5rem !important;
+}
+
+.font-3xl {
+ font-size: 1.75rem !important;
+}
+
+.font-4xl {
+ font-size: 2rem !important;
+}
+
+.font-5xl {
+ font-size: 2.5rem !important;
+}
diff --git a/Angular_Dev/scss/core/_utilities-border.scss b/Angular_Dev/scss/core/_utilities-border.scss
new file mode 100644
index 0000000..3c2a540
--- /dev/null
+++ b/Angular_Dev/scss/core/_utilities-border.scss
@@ -0,0 +1,18 @@
+//border
+@each $prop, $abbrev in (border: b) {
+ @each $size in (0,1,2) {
+ @if $size == 0 {
+ .#{$abbrev}-a-#{$size} { #{$prop}: 0 !important; } // a = All sides
+ .#{$abbrev}-t-#{$size} { #{$prop}-top: 0 !important; }
+ .#{$abbrev}-r-#{$size} { #{$prop}-right: 0 !important; }
+ .#{$abbrev}-b-#{$size} { #{$prop}-bottom: 0 !important; }
+ .#{$abbrev}-l-#{$size} { #{$prop}-left: 0 !important; }
+ } @else {
+ .#{$abbrev}-a-#{$size} { #{$prop}: $size * $border-width solid $border-color !important; } // a = All sides
+ .#{$abbrev}-t-#{$size} { #{$prop}-top: $size * $border-width solid $border-color !important; }
+ .#{$abbrev}-r-#{$size} { #{$prop}-right: $size * $border-width solid $border-color !important; }
+ .#{$abbrev}-b-#{$size} { #{$prop}-bottom: $size * $border-width solid $border-color !important; }
+ .#{$abbrev}-l-#{$size} { #{$prop}-left: $size * $border-width solid $border-color !important; }
+ }
+ }
+}
diff --git a/Angular_Dev/scss/core/_widgets.scss b/Angular_Dev/scss/core/_widgets.scss
new file mode 100644
index 0000000..b59fe4c
--- /dev/null
+++ b/Angular_Dev/scss/core/_widgets.scss
@@ -0,0 +1,249 @@
+// .social-box
+.social-box {
+ min-height: 160px;
+ margin-bottom: 20px;
+ text-align: center;
+ background: #fff;
+ border: $card-border-width solid $card-border-color;
+ @include border-radius($card-border-radius);
+
+ i {
+ display: block;
+ margin: -1px -1px 0;
+ font-size: 40px;
+ line-height: 90px;
+ background: $gray-lighter;
+
+ @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
+ }
+
+ .chart-wrapper {
+ height: 90px;
+ margin: -90px 0 0;
+
+ canvas {
+ width: 100% !important;
+ height: 90px !important;
+ }
+ }
+
+ ul {
+ padding: 10px 0;
+ list-style: none;
+
+
+ li {
+ display: block;
+ float: left;
+ width: 50%;
+
+ &:first-child {
+ border-right: 1px solid $border-color;
+ }
+
+ strong {
+ display: block;
+ font-size: 20px;
+ }
+
+ span {
+ font-size: 10px;
+ font-weight: 500;
+ color: $border-color;
+ text-transform: uppercase;
+ }
+ }
+ }
+
+ &.facebook {
+ i {
+ color: #fff;
+ background: $facebook;
+ }
+ }
+
+ &.twitter {
+ i {
+ color: #fff;
+ background: $twitter;
+ }
+ }
+
+ &.linkedin {
+ i {
+ color: #fff;
+ background: $linkedin;
+ }
+ }
+
+ &.google-plus {
+ i {
+ color: #fff;
+ background: $google-plus;
+ }
+ }
+}
+
+.horizontal-bars {
+ padding: 0;
+ margin: 0;
+ list-style: none;
+
+ li {
+ position: relative;
+ height: 40px;
+ line-height: 40px;
+ vertical-align: middle;
+
+ .title {
+ width: 100px;
+ font-size: 12px;
+ font-weight: 600;
+ color: $text-muted;
+ vertical-align: middle;
+ }
+
+ .bars {
+ position: absolute;
+ top: 15px;
+ width: 100%;
+ padding-left: 100px;
+ }
+
+ &.legend {
+ text-align: center;
+
+ .tag {
+ display: inline-block;
+ width: 8px;
+ height: 8px;
+ padding: 0;
+ }
+ }
+
+ &.divider {
+ height: 40px;
+
+ i {
+ margin: 0 !important;
+ }
+ }
+ }
+
+ &.type-2 {
+
+ li {
+ overflow: hidden;
+
+ i {
+ display: inline-block;
+ margin-right: $spacer-x;
+ margin-left: 5px;
+ font-size: 18px;
+ line-height: 40px;
+ }
+
+ .title {
+ display: inline-block;
+ width: auto;
+ margin-top: -9px;
+ font-size: $font-size-base;
+ font-weight: normal;
+ line-height: 40px;
+ color: $body-color;
+ }
+
+ .value {
+ float: right;
+ font-weight: 600;
+ }
+
+ .bars {
+ position: absolute;
+ top: auto;
+ bottom: 0;
+ padding: 0;
+ }
+ }
+ }
+}
+
+ul.icons-list {
+ padding: 0;
+ margin: 0;
+ list-style: none;
+
+ li {
+ position: relative;
+ height: 40px;
+ vertical-align: middle;
+
+ i {
+ display: block;
+ float: left;
+ width: 35px !important;
+ height: 35px !important;
+ margin: 2px;
+ line-height: 35px !important;
+ text-align: center;
+ }
+
+ .desc {
+ height: 40px;
+ margin-left: 50px;
+ border-bottom: 1px solid $border-color;
+
+ .title {
+ padding: 2px 0 0;
+ margin: 0;
+ }
+ small {
+ display: block;
+ margin-top: -4px;
+ color: $text-muted;
+ }
+ }
+
+ .value {
+ position: absolute;
+ top: 2px;
+ right: 45px;
+ text-align: right;
+
+ strong {
+ display: block;
+ margin-top: -3px;
+ }
+ }
+
+ .actions {
+ position: absolute;
+ top: -4px;
+ right: 10px;
+ width: 40px;
+ height: 40px;
+ line-height: 40px;
+ text-align: center;
+
+ i {
+ float: none;
+ width: auto;
+ height: auto;
+ padding: 0;
+ margin: 0;
+ line-height: normal;
+ }
+ }
+
+ &.divider {
+ height: 40px;
+
+ i {
+ width: auto;
+ height: auto;
+ margin: 2px 0 0;
+ font-size: 18px;
+ }
+ }
+ }
+}
diff --git a/Angular_Dev/scss/core/bootstrap-variables.scss b/Angular_Dev/scss/core/bootstrap-variables.scss
new file mode 100644
index 0000000..fb2400c
--- /dev/null
+++ b/Angular_Dev/scss/core/bootstrap-variables.scss
@@ -0,0 +1,86 @@
+// Bootstrap overrides
+
+// Colors
+//
+// Grayscale and brand colors for use across Bootstrap.
+
+$gray-dark: #263238;
+$gray: #607d8b;
+$gray-light: #b0bec5;
+$gray-lighter: #cfd8dc;
+$gray-lightest: #eceff1;
+
+$brand-primary: #20a8d8;
+$brand-success: #4dbd74;
+$brand-info: #63c2de;
+$brand-warning: #f8cb00;
+$brand-danger: #f86c6b;
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+$enable-transitions: true;
+$enable-rounded: false;
+
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+
+$spacer: 1rem !default;
+$spacer-x: $spacer !default;
+$spacer-y: $spacer !default;
+$spacers: (
+ q: (
+ x: ($spacer-x * 0.25),
+ y: ($spacer-y * 0.25)
+ ),
+ h: (
+ x: ($spacer-x * 0.5),
+ y: ($spacer-y * 0.5)
+ ),
+ 0: (
+ x: 0,
+ y: 0
+ ),
+ 1: (
+ x: $spacer-x,
+ y: $spacer-y
+ ),
+ 2: (
+ x: ($spacer-x * 1.5),
+ y: ($spacer-y * 1.5)
+ ),
+ 3: (
+ x: ($spacer-x * 3),
+ y: ($spacer-y * 3)
+ )
+);
+
+// Body
+//
+// Settings for the `<body>` element.
+
+$body-bg: #e4e5e6;
+
+// Typography
+//
+// Font, line-height, and color for body text, headings, and more.
+
+$font-size-base: 0.875rem;
+
+// Breadcrumbs
+
+$breadcrumb-bg: #fff;
+
+// Cards
+
+$card-border-color: $gray-lighter;
+$card-cap-bg: $gray-lightest;
+
+// Dropdowns
+
+$dropdown-padding-y: 0;
+$dropdown-border-color: $gray-lighter;
+$dropdown-divider-bg: $gray-lightest;
diff --git a/Angular_Dev/scss/core/navigation/_disabled.scss b/Angular_Dev/scss/core/navigation/_disabled.scss
new file mode 100644
index 0000000..b54db05
--- /dev/null
+++ b/Angular_Dev/scss/core/navigation/_disabled.scss
@@ -0,0 +1,6 @@
+// body {
+// #navigation {
+// left: -
+// display: none !important;
+// }
+// }
diff --git a/Angular_Dev/scss/core/navigation/_sidebar.scss b/Angular_Dev/scss/core/navigation/_sidebar.scss
new file mode 100644
index 0000000..1922a79
--- /dev/null
+++ b/Angular_Dev/scss/core/navigation/_sidebar.scss
@@ -0,0 +1,331 @@
+body:not(.top-nav) {
+
+ .sidebar {
+ position: absolute;
+ top: 0;
+ //left: 0;
+ z-index: 1;
+ display: inline !important;
+ width: $sidebar-width;
+ height: 100%;
+ padding: $sidebar-padding;
+ color: $sidebar-color;
+ background: $sidebar-bg;
+ @include borders($sidebar-borders);
+
+ .sidebar-close {
+ position: absolute;
+ right: 0;
+ display: none;
+ padding: 0 $spacer-x;
+ font-size: 24px;
+ font-weight: 800;
+ line-height: $navbar-height;
+ color: $sidebar-color;
+ background: 0;
+ border: 0;
+ opacity: .8;
+
+ &:hover {
+ opacity: 1;
+ }
+ }
+
+ .sidebar-nav {
+ position: relative;
+ overflow-x: hidden;
+ overflow-y: auto;
+ -ms-overflow-style: -ms-autohiding-scrollbar;
+
+ &::-webkit-scrollbar {
+ width: 10px;
+ margin-left: -10px;
+ -webkit-appearance: none;
+ }
+
+ // &::-webkit-scrollbar-button { }
+
+ &::-webkit-scrollbar-track {
+ background-color: lighten($sidebar-bg, 5%);
+ border-right: 1px solid darken($sidebar-bg, 5%);
+ border-left: 1px solid darken($sidebar-bg, 5%);
+ }
+
+ // &::-webkit-scrollbar-track-piece { }
+
+ &::-webkit-scrollbar-thumb {
+ height: 50px;
+ background-color: darken($sidebar-bg, 10%);
+ background-clip: content-box;
+ border-color: transparent;
+ border-style: solid;
+ border-width: 1px 2px;
+ }
+
+ // &::-webkit-scrollbar-corner { }
+
+ //&::-webkit-resizer { }
+ }
+
+ ul.nav {
+ width: $sidebar-width;
+
+ li.nav-title {
+ padding: $sidebar-nav-title-padding-y $sidebar-nav-title-padding-x;
+ font-size: 11px;
+ font-weight: 600;
+ color: $sidebar-nav-title-color;
+ text-transform: uppercase;
+ }
+
+ li.divider {
+ height: 10px;
+ }
+
+ li.nav-item {
+ position: relative;
+ margin: 0;
+
+ ul {
+ display: none;
+ padding: 0;
+ margin: 0;
+
+ li {
+ padding: 0;
+ list-style: none;
+ }
+ }
+
+ a.nav-link {
+ display: block;
+ padding: $sidebar-nav-link-padding-y $sidebar-nav-link-padding-x;
+ color: $sidebar-nav-link-color;
+ text-decoration: none;
+ background: $sidebar-nav-link-bg;
+ @include borders($sidebar-nav-link-borders);
+ @if $enable-sidebar-nav-rounded {
+ border-radius: $border-radius;
+ }
+
+ &:hover {
+ color: $sidebar-nav-link-hover-color !important;
+ background: $sidebar-nav-link-hover-bg !important;
+ @include borders($sidebar-nav-link-hover-borders);
+
+ i {
+ color: $sidebar-nav-link-hover-icon-color;
+ }
+ }
+
+ &.active {
+ color: $sidebar-nav-link-active-color;
+ background: $sidebar-nav-link-active-bg;
+ @include borders($sidebar-nav-link-active-borders);
+
+ i {
+ color: $sidebar-nav-link-active-icon-color;
+ }
+ }
+
+ [class^="icon-"], [class*=" icon-"] {
+ display: inline-block;
+ margin-top: -4px;
+ vertical-align: middle;
+ }
+
+ i {
+ width: 20px;
+ margin: 0 ($sidebar-nav-link-padding-x / 2) 0 0;
+ font-size: 14px;
+ color: $sidebar-nav-link-icon-color;
+ text-align: center;
+ }
+
+ .tag {
+ float: right;
+ margin-top: 2px;
+ // margin-left: 10px;
+ }
+
+ &.nav-dropdown-toggle {
+
+ &:before {
+ position: absolute;
+ top: ($sidebar-nav-link-padding-y + ($font-size-base / 4));
+ right: $sidebar-nav-link-padding-x;
+ display: block;
+ width: ($font-size-base);
+ height: ($font-size-base);
+ padding: 0;
+ font-size: $font-size-base;
+ line-height: ($font-size-base * 3/4);
+ text-align: center;
+ content: "\2039";
+ transition: .3s;
+ }
+ }
+ }
+
+ &.nav-dropdown {
+ &.open {
+ background: $sidebar-nav-dropdown-bg;
+ @include borders($sidebar-nav-dropdown-borders);
+ @if $enable-sidebar-nav-rounded {
+ border-radius: $border-radius;
+ }
+ > ul, > ol {
+ display: inline;
+ }
+
+ a.nav-link {
+ color: $sidebar-nav-dropdown-color;
+ border-left: 0 !important;
+ }
+
+ > a.nav-link.nav-dropdown-toggle:before {
+ -webkit-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+ }
+
+ .nav-dropdown.open {
+ border-left: 0;
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+@include media-breakpoint-up(sm) {
+
+ body.sidebar-nav.compact-nav {
+ .sidebar {
+ z-index: $zindex-navbar-fixed - 1;
+ width: $sidebar-compact-width;
+
+ .sidebar-items {
+ overflow: visible;
+ }
+
+ ul.nav {
+
+ li.nav-title, li.divider {
+ display: none;
+ }
+
+ li.nav-item {
+ border-left: 0 !important;
+
+ ul {
+ background: $sidebar-bg;
+ }
+
+ a.nav-link {
+ position: relative;
+ width: $sidebar-compact-width;
+ padding: 0 15px 0 0;
+ margin: 0;
+ overflow: hidden;
+ line-height: $sidebar-compact-height;
+ white-space: nowrap;
+ border-left: 0 !important;
+
+ &.nav-dropdown-toggle {
+
+ &:before {
+ display: none;
+ }
+ }
+
+ i {
+ display: block;
+ float: left;
+ width: $sidebar-compact-height;
+ height: $sidebar-compact-height;
+ padding: 0;
+ margin: 0;
+ font-size: 18px;
+ line-height: $sidebar-compact-height;
+ }
+
+ .tag {
+ position: absolute;
+ top: 6px;
+ right: 15px;
+ display: none;
+ }
+
+ &:hover {
+ width: $sidebar-width;
+
+ .tag {
+ display: inline;
+ }
+ }
+ }
+
+ ul {
+ position: absolute;
+ top: $sidebar-compact-width;
+ left: $sidebar-compact-width;
+
+ li {
+ position: relative;
+ padding: 0;
+
+ a.nav-link {
+ width: $sidebar-width - $sidebar-compact-width;
+ }
+
+ ul, ol {
+ position: absolute;
+ top: 0;
+ left: 100%;
+ }
+ }
+ }
+
+ &.nav-dropdown {
+ &.open {
+ > ul, > ol {
+ display: none;
+ }
+ }
+ }
+
+ &:hover {
+ > a.nav-link {
+ @if $sidebar-width < 249 {
+ width: $sidebar-width + $sidebar-compact-width;
+ } @else {
+ width: $sidebar-width;
+ }
+ }
+
+ > ul, > ol {
+ display: inline;
+
+ a.nav-link {
+ @if $sidebar-width < 249 {
+ width: $sidebar-width;
+ } @else {
+ width: $sidebar-width - $sidebar-compact-width;
+ }
+ }
+ }
+
+ &.nav-dropdown {
+ &.open {
+ > ul, > ol {
+ display: inline;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/Angular_Dev/scss/core/navigation/_top.scss b/Angular_Dev/scss/core/navigation/_top.scss
new file mode 100644
index 0000000..164c602
--- /dev/null
+++ b/Angular_Dev/scss/core/navigation/_top.scss
@@ -0,0 +1,116 @@
+nav.top-nav {
+ position: absolute;
+ top: $navbar-height;
+ left: 0;
+ z-index: $zindex-navbar-fixed - 1;
+ display: inline !important;
+ width: 100%;
+ height: $top-nav-height;
+ background: $top-nav-bg;
+ @include borders($top-nav-borders);
+
+ ul.nav {
+ white-space: nowrap;
+
+ li.nav-item {
+ position: relative;
+ display: inline-block;
+ margin: 0;
+
+ ul {
+ display: none;
+ padding: 0;
+ margin: 0;
+ white-space: normal;
+ background: $top-nav-bg;
+ @include borders($top-nav-ul-borders);
+
+
+ li {
+ padding: 0;
+ list-style: none;
+ }
+ }
+
+ a.nav-link {
+ display: block;
+ padding: 0 15px;
+ font-size: 12px;
+ font-weight: 400;
+ line-height: $top-nav-height;
+ color: $top-nav-color;
+ text-decoration: none;
+ text-transform: uppercase;
+
+ i {
+ display: block;
+ float: left;
+ width: 20px;
+ margin: 0 10px 0 0;
+ font-size: 14px;
+ line-height: $top-nav-height - 1px;
+ text-align: center;
+ }
+
+ .tag {
+ float: right;
+ margin-top: 13px;
+ margin-left: 10px;
+ }
+
+ &:hover {
+ color: $top-nav-hover-color;
+ background: $top-nav-hover-bg;
+
+ }
+
+ &.active {
+ color: $top-nav-active-color;
+ background: $top-nav-active-bg;
+ }
+ }
+
+ ul {
+ position: absolute;
+ top: $top-nav-height - 1px;
+ left: 0;
+
+ li {
+ position: relative;
+ padding: 0;
+
+ a.nav-link {
+ min-width: 200px;
+ }
+
+ ul {
+ position: absolute;
+ top: 0;
+ left: 100%;
+ }
+ }
+ }
+
+ &.nav-more {
+ ul {
+ right: 0;
+ left: auto;
+
+ li {
+
+ ul {
+ right: 100%;
+ left: auto;
+ }
+ }
+ }
+ }
+
+ &:hover {
+ > ul {
+ display: inline;
+ }
+ }
+ }
+ }
+}
diff --git a/Angular_Seed/scss/bootstrap_custom/_buttons.scss b/Angular_Seed/scss/bootstrap_custom/_buttons.scss
new file mode 100644
index 0000000..a225bb4
--- /dev/null
+++ b/Angular_Seed/scss/bootstrap_custom/_buttons.scss
@@ -0,0 +1,9 @@
+.btn {
+
+ .tag {
+ position: absolute;
+ top: 2px;
+ right: 6px;
+ font-size: 9px;
+ }
+}
diff --git a/Angular_Seed/scss/bootstrap_custom/_card.scss b/Angular_Seed/scss/bootstrap_custom/_card.scss
new file mode 100644
index 0000000..bcde134
--- /dev/null
+++ b/Angular_Seed/scss/bootstrap_custom/_card.scss
@@ -0,0 +1,224 @@
+.card {
+
+ margin-bottom: 20px;
+
+}
+
+.card-header {
+
+ i.icon-bg {
+ display: inline-block;
+ padding: $card-spacer-y $card-spacer-x !important;
+ margin-top: -$card-spacer-y;
+ margin-right: $card-spacer-x;
+ margin-bottom: -$card-spacer-y;
+ margin-left: -$card-spacer-x;
+ line-height: inherit;
+ color: $card-icon-color;
+ vertical-align: bottom;
+ background: $card-icon-bg;
+ border-right: $card-border-width solid $card-border-color;
+ }
+
+ ul.nav.nav-tabs {
+ margin-top: -$card-spacer-y;
+ margin-bottom: -$card-spacer-y;
+ border-bottom: 0;
+
+ li.nav-item {
+ border-top: 0;
+ a.nav-link {
+ padding: $card-spacer-y $card-spacer-x/2;
+ color: $text-muted;
+ border-top: 0;
+
+ &.active {
+ color: $body-color;
+ background: #fff;
+ }
+ }
+ }
+ }
+
+ &.card-header-inverse {
+ color: #fff;
+ }
+
+ @each $variant, $color in (primary: $brand-primary, secondary: $gray-lighter, success: $brand-success, info: $brand-info, warning: $brand-warning, danger: $brand-danger) {
+ &.card-header-#{$variant} {
+ margin: -1px -1px 0;
+ background: $color;
+ border-bottom: 1px solid $color;
+ }
+ }
+
+ .btn {
+ margin-top: - $btn-padding-y;
+ }
+ .btn-sm {
+ margin-top: - $btn-padding-y-sm;
+ }
+ .btn-lg {
+ margin-top: - $btn-padding-y-lg;
+ }
+}
+//
+.card-footer {
+
+ ul {
+ display: table;
+ width: 100%;
+ padding: 0;
+ margin: 0;
+ table-layout: fixed;
+
+ li {
+ display: table-cell;
+ padding: 0 $card-spacer-x;
+ text-align: center;
+
+ progress {
+ margin-top: $card-spacer-y;
+ margin-bottom: 0;
+ }
+ }
+ }
+}
+
+
+//
+// Background variations
+//
+
+@mixin card-variant($color) {
+ background-color: $color;
+
+ .card-header {
+ border-color: darken($color,5%);
+ }
+
+ .card-header, .card-footer {
+ background-color: darken($color,5%);
+ //border: 0;
+ }
+}
+
+@each $variant, $color in (primary: $brand-primary, secondary: $gray-lighter, success: $brand-success, info: $brand-info, warning: $brand-warning, danger: $brand-danger) {
+ .card-#{$variant} {
+ @include card-variant($color)
+ }
+}
+
+.card-inverse {
+ color: #fff;
+
+ .text-muted {
+ color: rgba(255,255,255,.6) !important;
+ }
+
+ .progress[value] {
+ background-color: rgba(255,255,255,.2) !important;
+ }
+
+ // Unfilled portion of the bar
+ .progress[value]::-webkit-progress-bar {
+ background-color: rgba(255,255,255,.2) !important;
+ }
+ base::-moz-progress-bar, // Absurd-but-syntactically-valid selector to make these styles Firefox-only
+ .progress[value] {
+ background-color: rgba(255,255,255,.2) !important;
+ }
+
+ .progress {
+ @include progress-variant(#fff !important);
+ }
+}
+
+// Card Actions
+.card-header {
+ > i {
+ margin-right: $spacer-x/2;
+ }
+ .card-actions {
+ position: absolute;
+ top: 0;
+ right: 0;
+ //height: inherit;
+
+ a, button {
+ display: block;
+ float: left;
+ width: 50px;
+ padding: $card-spacer-y 0;
+ margin: 0 !important;
+ color: $body-color;
+ text-align: center;
+ background: transparent;
+ border: 0;
+ border-left: 1px solid $border-color;
+ box-shadow: 0;
+
+ &:hover {
+ text-decoration: none;
+ }
+
+ [class^="icon-"], [class*=" icon-"] {
+ display: inline-block;
+ vertical-align: middle;
+ }
+
+ i {
+ display: inline-block;
+ transition: .4s;
+ }
+
+ i.r180 {
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+ }
+ }
+
+ .input-group {
+ width: 230px;
+ margin: 6px;
+
+ .input-group-addon {
+ background: #fff;
+ }
+
+ input {
+ border-left: 0;
+ }
+ }
+ }
+}
+
+.card-full {
+ margin-top: - $spacer-y;
+ margin-right: - $grid-gutter-width / 2;
+ margin-left: - $grid-gutter-width / 2;
+ border: 0;
+ border-bottom: $card-border-width solid $border-color;
+}
+
+@include media-breakpoint-up(sm) {
+ .card-columns {
+ -moz-column-count: 3;
+ //-moz-column-count: 1.25rem;
+ -webkit-column-count: 3;
+ column-gap: 1.25rem;
+ //-webkit-column-count: 1.25rem;
+ column-count: 3;
+
+ .card {
+ display: inline-block;
+ width: 100%; // Don't let them exceed the column width
+ }
+
+ &.col-2 {
+ -moz-column-count: 2;
+ -webkit-column-count: 2;
+ column-count: 2;
+ }
+ }
+}
diff --git a/Angular_Seed/scss/bootstrap_custom/_dropdown.scss b/Angular_Seed/scss/bootstrap_custom/_dropdown.scss
new file mode 100644
index 0000000..68a0c9e
--- /dev/null
+++ b/Angular_Seed/scss/bootstrap_custom/_dropdown.scss
@@ -0,0 +1,45 @@
+// Links, buttons, and more within the dropdown menu
+.dropdown-item {
+ position: relative;
+ padding: 10px 20px;
+ border-bottom: 1px solid $dropdown-border-color;
+
+ &:last-child {
+ border-bottom: 0;
+ }
+
+ i {
+ display: inline-block;
+ width: 20px;
+ margin-right: 10px;
+ margin-left: -10px;
+ color: $dropdown-border-color;
+ text-align: center;
+ }
+
+ .tag {
+ position: absolute;
+ right: 10px;
+ margin-top: 2px;
+ }
+}
+
+// Dropdown section headers
+.dropdown-header {
+ padding: 8px 20px;
+ background: $dropdown-divider-bg;
+ border-bottom: 1px solid $dropdown-border-color;
+
+ .btn {
+ margin-top: -7px;
+ color: $dropdown-header-color;
+
+ &:hover {
+ color: $body-color;
+ }
+
+ &.pull-right {
+ margin-right: -20px;
+ }
+ }
+}
diff --git a/Angular_Seed/scss/bootstrap_custom/_input-group.scss b/Angular_Seed/scss/bootstrap_custom/_input-group.scss
new file mode 100644
index 0000000..536efe0
--- /dev/null
+++ b/Angular_Seed/scss/bootstrap_custom/_input-group.scss
@@ -0,0 +1,7 @@
+
+.input-group-addon,
+.input-group-btn {
+ min-width: 40px;
+ white-space: nowrap;
+ vertical-align: middle; // Match the inputs
+}
diff --git a/Angular_Seed/scss/bootstrap_custom/_navbar.scss b/Angular_Seed/scss/bootstrap_custom/_navbar.scss
new file mode 100644
index 0000000..d272d41
--- /dev/null
+++ b/Angular_Seed/scss/bootstrap_custom/_navbar.scss
@@ -0,0 +1,109 @@
+header.navbar {
+ position: relative;
+ height: $navbar-height;
+ padding: 0;
+ line-height: $navbar-height;
+ background-color: $navbar-bg;
+ @include borders($navbar-border);
+
+ .container-fluid {
+ padding: 0;
+ }
+
+ .nav-item {
+ position: relative;
+ min-width: 50px;
+ margin: 0 !important;
+ text-align: center;
+
+ .nav-link {
+ i {
+ vertical-align: middle;
+ }
+
+ .tag {
+ position: absolute;
+ top: 9px;
+ right: 7px;
+ }
+ }
+ }
+
+ .img-avatar {
+ height: $navbar-height - 20px;
+ margin: 0 10px;
+ }
+
+ .dropdown-menu {
+ padding-bottom: 0;
+ line-height: $line-height-base;
+ }
+
+ .dropdown-item {
+ min-width: 180px;
+ }
+
+ a.navbar-brand {
+ display: inline-block;
+ width: $navbar-brand-width;
+ height: $navbar-height;
+ padding: $navbar-padding-y $navbar-padding-x;
+ background-color: $navbar-brand-bg;
+ background-image: $navbar-brand-logo;
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: $navbar-brand-logo-size;
+ @include borders($navbar-brand-border);
+ }
+}
+
+header.navbar {
+ .navbar-brand {
+ margin-right: 0;
+ }
+}
+
+.navbar-toggler {
+ padding: 0 .75em;
+ line-height: $navbar-height - 4px;
+}
+
+header.navbar {
+ .navbar-nav {
+ .nav-link {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+ }
+}
+
+.navbar-brand {
+ color: $navbar-active-color;
+
+ @include hover-focus {
+ color: $navbar-active-color;
+ }
+}
+
+.navbar-nav {
+ .nav-link {
+ color: $navbar-color;
+
+ @include hover-focus {
+ color: $navbar-hover-color;
+ }
+ }
+
+ .open > .nav-link,
+ .active > .nav-link,
+ .nav-link.open,
+ .nav-link.active {
+ @include plain-hover-focus {
+ color: $navbar-active-color;
+ }
+ }
+}
+
+.navbar-divider {
+ background-color: rgba(0,0,0,.075);
+}
diff --git a/Angular_Seed/scss/bootstrap_custom/_progress.scss b/Angular_Seed/scss/bootstrap_custom/_progress.scss
new file mode 100644
index 0000000..9c10c23
--- /dev/null
+++ b/Angular_Seed/scss/bootstrap_custom/_progress.scss
@@ -0,0 +1,8 @@
+.progress {
+ &.progress-sm {
+ height: 8px;
+ }
+ &.progress-xs {
+ height: 4px;
+ }
+}
diff --git a/Angular_Seed/scss/bootstrap_custom/_tables.scss b/Angular_Seed/scss/bootstrap_custom/_tables.scss
new file mode 100644
index 0000000..5bc2649
--- /dev/null
+++ b/Angular_Seed/scss/bootstrap_custom/_tables.scss
@@ -0,0 +1,20 @@
+.table-outline {
+ border: 1px solid $table-border-color;
+
+ td {
+ vertical-align: middle;
+ }
+}
+
+.table-align-middle {
+
+ td {
+ vertical-align: middle;
+ }
+}
+
+.table-clear {
+ td {
+ border: 0;
+ }
+}
diff --git a/Angular_Seed/scss/bootstrap_custom/_tags.scss b/Angular_Seed/scss/bootstrap_custom/_tags.scss
new file mode 100644
index 0000000..1aafa21
--- /dev/null
+++ b/Angular_Seed/scss/bootstrap_custom/_tags.scss
@@ -0,0 +1,3 @@
+.tag-pill {
+ border-radius: $tag-pill-border-radius;
+}
diff --git a/Angular_Seed/scss/core/_animate.scss b/Angular_Seed/scss/core/_animate.scss
new file mode 100644
index 0000000..3621dee
--- /dev/null
+++ b/Angular_Seed/scss/core/_animate.scss
@@ -0,0 +1,43 @@
+@charset "UTF-8";
+
+.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;
+}
+
+@-webkit-keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+.fadeIn {
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+}
diff --git a/Angular_Seed/scss/core/_aside.scss b/Angular_Seed/scss/core/_aside.scss
new file mode 100644
index 0000000..c894be8
--- /dev/null
+++ b/Angular_Seed/scss/core/_aside.scss
@@ -0,0 +1,58 @@
+.aside-menu {
+ position: fixed;
+ top: 0;
+ right: -$aside-menu-width;
+ z-index: $zindex-navbar-fixed - 1;
+ width: $aside-menu-width;
+ height: 100%;
+ padding-top: $navbar-height;
+ color: $aside-menu-color;
+ background: $aside-menu-bg;
+ @include borders($aside-menu-borders);
+
+ .nav-tabs {
+ .nav-link {
+ padding: $aside-menu-nav-padding-y $aside-menu-nav-padding-x;
+ color: $body-color;
+ border-top: 0;
+ }
+ .nav-item:first-child {
+ .nav-link {
+ border-left: 0;
+ }
+ }
+ }
+
+ .tab-content {
+ position: relative;
+ height: calc(100vh - #{$aside-menu-nav-padding-y * 2 + $font-size-base} - #{$navbar-height});
+ overflow-x: hidden;
+ overflow-y: auto;
+ -ms-overflow-style: -ms-autohiding-scrollbar;
+
+ &::-webkit-scrollbar {
+ width: 10px;
+ margin-left: -10px;
+ -webkit-appearance: none;
+ }
+
+ // &::-webkit-scrollbar-button { }
+
+ &::-webkit-scrollbar-track {
+ background-color: lighten($aside-menu-bg, 5%);
+ border-right: 1px solid darken($aside-menu-bg, 5%);
+ border-left: 1px solid darken($aside-menu-bg, 5%);
+ }
+
+ // &::-webkit-scrollbar-track-piece { }
+
+ &::-webkit-scrollbar-thumb {
+ height: 50px;
+ background-color: darken($aside-menu-bg, 10%);
+ background-clip: content-box;
+ border-color: transparent;
+ border-style: solid;
+ border-width: 1px 2px;
+ }
+ }
+}
diff --git a/Angular_Seed/scss/core/_avatars.scss b/Angular_Seed/scss/core/_avatars.scss
new file mode 100644
index 0000000..07f0c12
--- /dev/null
+++ b/Angular_Seed/scss/core/_avatars.scss
@@ -0,0 +1,52 @@
+.img-avatar {
+ border-radius: 50em;
+}
+
+.avatar {
+ $width: 36px;
+ $status-width: 10px;
+ @include avatar($width,$status-width);
+}
+
+.avatar.avatar-xs {
+ $width: 20px;
+ $status-width: 8px;
+ @include avatar($width,$status-width);
+}
+
+.avatar.avatar-sm {
+ $width: 24px;
+ $status-width: 8px;
+ @include avatar($width,$status-width);
+}
+
+.avatar.avatar-lg {
+ $width: 72px;
+ $status-width: 12px;
+ @include avatar($width,$status-width);
+}
+
+.avatars-stack {
+ .avatar.avatar-xs {
+ margin-right: -10px;
+ }
+
+ // .avatar.avatar-sm {
+ //
+ // }
+
+ .avatar {
+ margin-right: -15px;
+ transition-duration: $layout-transition-speed, $layout-transition-speed;
+ transition-property: margin-left, margin-right;
+
+ &:hover {
+ margin-right: 0 !important;
+ }
+ }
+
+ // .avatar.avatar-lg {
+ //
+ // }
+
+}
diff --git a/Angular_Seed/scss/core/_breadcrumb-menu.scss b/Angular_Seed/scss/core/_breadcrumb-menu.scss
new file mode 100644
index 0000000..0d0fb1b
--- /dev/null
+++ b/Angular_Seed/scss/core/_breadcrumb-menu.scss
@@ -0,0 +1,36 @@
+.breadcrumb-menu {
+ position: absolute;
+ top: 0;
+ right: $breadcrumb-padding-x;
+ line-height: 43px;
+
+ &:before {
+ display: none;
+ }
+
+ .btn-group {
+ margin-top: -2px;
+ }
+
+ .btn.btn-secondary {
+ color: $text-muted;
+ border: 0;
+
+ &:hover, &.active {
+ color: $body-color;
+ background: transparent;
+ }
+ }
+
+ .open {
+ .btn.btn-secondary {
+ color: $body-color;
+ background: transparent;
+ }
+ }
+
+ .dropdown-menu {
+ min-width: 180px;
+ line-height: $line-height-base;
+ }
+}
diff --git a/Angular_Seed/scss/core/_buttons.scss b/Angular_Seed/scss/core/_buttons.scss
new file mode 100644
index 0000000..330e973
--- /dev/null
+++ b/Angular_Seed/scss/core/_buttons.scss
@@ -0,0 +1,565 @@
+.btn-transparent {
+ $color: #fff;
+ $background: transparent;
+ $border: transparent;
+
+ @include button-variant($color, $background, $border)
+}
+
+
+.btn {
+ [class^="icon-"], [class*=" icon-"] {
+ display: inline-block;
+ margin-top: -2px;
+ vertical-align: middle;
+ }
+}
+
+.btn-facebook,
+.btn-twitter,
+.btn-linkedin,
+.btn-flickr,
+.btn-tumblr,
+.btn-xing,
+.btn-github,
+.btn-html5,
+.btn-openid,
+.btn-stack-overflow,
+.btn-youtube,
+.btn-css3,
+.btn-dribbble,
+.btn-google-plus,
+.btn-instagram,
+.btn-pinterest,
+.btn-vk,
+.btn-yahoo,
+.btn-behance,
+.btn-dropbox,
+.btn-reddit,
+.btn-spotify,
+.btn-vine,
+.btn-foursquare,
+.btn-vimeo {
+ position: relative;
+ overflow: hidden;
+ color: #fff !important;
+ text-align: center;
+
+ &:before {
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: block;
+ font-family: 'FontAwesome';
+ font-style: normal;
+ font-weight: normal;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ }
+
+ &:hover {
+ color: #fff;
+ }
+
+ &.icon {
+
+ span {
+ display: none;
+ }
+ }
+
+ &.text {
+ &:before {
+ display: none;
+ }
+
+ span {
+ margin-left: 0 !important;
+ }
+ }
+ @include button-social-size($btn-padding-y, $btn-padding-x, $font-size-base, $line-height-base, $btn-border-radius);
+
+ &.btn-lg {
+ @include button-social-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
+ }
+
+ &.btn-sm {
+ @include button-social-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
+ }
+
+}
+
+.btn-facebook {
+ $color: $facebook;
+
+ background: $color;
+ &:before {
+ content: "\f09a";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-twitter {
+ $color: $twitter;
+
+ background: $color;
+ &:before {
+ content: "\f099";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-linkedin {
+ $color: $linkedin;
+
+ background: $color;
+ &:before {
+ content: "\f0e1";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-flickr {
+ $color: $flickr;
+
+ background: $color;
+ &:before {
+ content: "\f16e";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-tumblr {
+ $color: $tumblr;
+
+ background: $color;
+ &:before {
+ content: "\f173";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-xing {
+ $color: $xing;
+
+ background: $color;
+ &:before {
+ content: "\f168";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-github {
+ $color: $github;
+
+ background: $color;
+ &:before {
+ content: "\f09b";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-html5 {
+ $color: $html5;
+
+ background: $color;
+ &:before {
+ content: "\f13b";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-openid {
+ $color: $openid;
+
+ background: $color;
+ &:before {
+ content: "\f19b";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-stack-overflow {
+ $color: $stack-overflow;
+
+ background: $color;
+ &:before {
+ content: "\f16c";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-css3 {
+ $color: $css3;
+
+ background: $color;
+ &:before {
+ content: "\f13c";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-youtube {
+ $color: $youtube;
+
+ background: $color;
+ &:before {
+ content: "\f167";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-dribbble {
+ $color: $dribbble;
+
+ background: $color;
+ &:before {
+ content: "\f17d";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-google-plus {
+ $color: $google-plus;
+
+ background: $color;
+ &:before {
+ content: "\f0d5";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-instagram {
+ $color: $instagram;
+
+ background: $color;
+ &:before {
+ content: "\f16d";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-pinterest {
+ $color: $pinterest;
+
+ background: $color;
+ &:before {
+ content: "\f0d2";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-vk {
+ $color: $vk;
+
+ background: $color;
+ &:before {
+ content: "\f189";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-yahoo {
+ $color: $yahoo;
+
+ background: $color;
+ &:before {
+ content: "\f19e";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-behance {
+ $color: $behance;
+
+ background: $color;
+ &:before {
+ content: "\f1b4";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-dropbox {
+ $color: $dropbox;
+
+ background: $color;
+ &:before {
+ content: "\f16b";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-reddit {
+ $color: $reddit;
+
+ background: $color;
+ &:before {
+ content: "\f1a1";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-spotify {
+ $color: $spotify;
+
+ background: $color;
+ &:before {
+ content: "\f1bc";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-vine {
+ $color: $vine;
+
+ background: $color;
+ &:before {
+ content: "\f1ca";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-foursquare {
+ $color: $foursquare;
+
+ background: $color;
+ &:before {
+ content: "\f180";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
+
+.btn-vimeo {
+ $color: $vimeo;
+
+ background: $color;
+ &:before {
+ content: "\f194";
+ background: darken($color, 5%);
+
+ }
+
+ &:hover {
+ background: darken($color, 5%);
+
+ &:before {
+ background: darken($color, 10%);
+ }
+ }
+}
diff --git a/Angular_Seed/scss/core/_callout.scss b/Angular_Seed/scss/core/_callout.scss
new file mode 100644
index 0000000..fe9e6bf
--- /dev/null
+++ b/Angular_Seed/scss/core/_callout.scss
@@ -0,0 +1,85 @@
+.callout {
+ position: relative;
+ padding: 0 $spacer-y;
+ margin: $spacer-x 0;
+ border: 0 solid $border-color;
+ border-left-width: .25rem;
+
+ @if $enable-rounded {
+ border-radius: .25rem;
+ }
+
+ .chart-wrapper {
+ position: absolute;
+ top: 18px;
+ left: 45%;
+ float: right;
+ width: 100px;
+ }
+}
+
+.callout-bordered {
+ border: 1px solid $border-color;
+ border-left-width: .25rem;
+}
+.callout code {
+ border-radius: .25rem;
+}
+.callout h4 {
+ margin-top: 0;
+ margin-bottom: .25rem;
+}
+.callout p:last-child {
+ margin-bottom: 0;
+}
+.callout + .callout {
+ margin-top: - .25rem;
+}
+
+.callout-default {
+ border-left-color: $text-muted;
+
+ h4 {
+ color: $text-muted;
+ }
+}
+
+.callout-primary {
+ border-left-color: $brand-primary;
+
+ h4 {
+ color: $brand-primary;
+ }
+}
+
+.callout-info {
+ border-left-color: $brand-info;
+
+ h4 {
+ color: $brand-info;
+ }
+}
+
+.callout-warning {
+ border-left-color: $brand-warning;
+
+ h4 {
+ color: $brand-warning;
+ }
+}
+
+.callout-danger {
+ border-left-color: $brand-danger;
+
+ h4 {
+ color: $brand-danger;
+ }
+}
+
+.callout-success {
+ border-left-color: $brand-success;
+
+ h4 {
+ color: $brand-success;
+ }
+}
diff --git a/Angular_Seed/scss/core/_charts.scss b/Angular_Seed/scss/core/_charts.scss
new file mode 100644
index 0000000..7432f16
--- /dev/null
+++ b/Angular_Seed/scss/core/_charts.scss
@@ -0,0 +1,6 @@
+canvas.chart {
+ display: inline-block !important;
+}
+base-chart.chart {
+ display: block !important;
+}
diff --git a/Angular_Seed/scss/core/_custom-variables.scss b/Angular_Seed/scss/core/_custom-variables.scss
new file mode 100644
index 0000000..8d444a3
--- /dev/null
+++ b/Angular_Seed/scss/core/_custom-variables.scss
@@ -0,0 +1,173 @@
+// Core Admin Variables
+
+$enable-sidebar-nav-rounded: false;
+
+$border-color: $gray-lighter;
+$layout-transition-speed: .25s;
+
+
+// Social Colors
+
+$facebook: #3b5998;
+$twitter: #00aced;
+$linkedin: #4875b4;
+$google-plus: #d34836;
+$flickr: #ff0084;
+$tumblr: #32506d;
+$xing: #026466;
+$github: #4183c4;
+$html5: #e34f26;
+$openid: #f78c40;
+$stack-overflow: #fe7a15;
+$youtube: #b00;
+$css3: #0170ba;
+$dribbble: #ea4c89;
+$google-plus: #bb4b39;
+$instagram: #517fa4;
+$pinterest: #cb2027;
+$vk: #45668e;
+$yahoo: #400191;
+$behance: #1769ff;
+$dropbox: #007ee5;
+$reddit: #ff4500;
+$spotify: #7ab800;
+$vine: #00bf8f;
+$foursquare: #1073af;
+$vimeo: #aad450;
+
+// Navbar
+
+$navbar-height: 55px;
+$navbar-bg: #fff;
+$navbar-border: (
+ bottom: (
+ size: 1px,
+ style: solid,
+ color: $border-color
+ )
+);
+$navbar-brand-width: 155px;
+$navbar-brand-bg: #fff;
+$navbar-brand-logo: url('../img/logo.png');
+$navbar-brand-logo-size: 70px auto;
+$navbar-brand-border: (
+ bottom: (
+ size: 1px,
+ style: solid,
+ color: $border-color
+ )
+);
+
+$navbar-color: rgba(0,0,0,.3);
+$navbar-hover-color: rgba(0,0,0,.6);
+$navbar-active-color: rgba(0,0,0,.8);
+$navbar-disabled-color: rgba(0,0,0,.15);
+
+// Sidebar
+
+$sidebar-width: 200px;
+$sidebar-padding: 0;
+$sidebar-compact-width: 50px;
+$sidebar-compact-height: $sidebar-compact-width;
+$sidebar-color: #fff;
+$sidebar-bg: $gray-dark;
+$sidebar-header-bg: rgba(0,0,0,.2);
+$sidebar-footer-bg: rgba(0,0,0,.2);
+$sidebar-borders: none;
+
+// Sidebar Navigation
+
+$sidebar-nav-color: #fff;
+$sidebar-nav-title-padding-y: .75rem;
+$sidebar-nav-title-padding-x: 1rem;
+$sidebar-nav-title-color: $gray-lighter;
+$sidebar-nav-link-padding-y: .75rem;
+$sidebar-nav-link-padding-x: 1rem;
+$sidebar-nav-link-color: #fff;
+$sidebar-nav-link-bg: transparent;
+$sidebar-nav-link-icon-color: $text-muted;
+
+$sidebar-nav-link-borders: 0;
+$sidebar-nav-link-hover-color: #fff;
+$sidebar-nav-link-hover-bg: $brand-primary;
+$sidebar-nav-link-hover-icon-color: #fff !important;
+
+$sidebar-nav-link-hover-borders: 0;
+$sidebar-nav-link-active-color: #fff;
+$sidebar-nav-link-active-bg: lighten($sidebar-bg, 5%);
+$sidebar-nav-link-active-icon-color: $brand-primary;
+
+$sidebar-nav-link-active-borders: 0;
+
+$sidebar-nav-dropdown-color: #fff;
+$sidebar-nav-dropdown-bg: rgba(0,0,0,.2);
+$sidebar-nav-dropdown-borders: 0;
+
+// Top Navigation
+
+$top-nav-bg: #fff;
+$top-nav-color: $body-color;
+$top-nav-borders: (
+ bottom: (
+ size: 1px,
+ style: solid,
+ color: $border-color
+ )
+);
+$top-nav-ul-borders: (
+ all: (
+ size: 1px,
+ style: solid,
+ color: $border-color
+ )
+);
+
+$top-nav-hover-color: #fff;
+$top-nav-hover-bg: $brand-primary;
+$top-nav-active-color: #fff;
+$top-nav-active-bg: $brand-primary;
+$top-nav-height: $navbar-height - 15px;
+
+// Breadcrumb
+
+$breadcrumb-borders: (
+ bottom: (
+ size: 1px,
+ style: solid,
+ color: $border-color
+ )
+);
+
+// Aside
+
+$aside-menu-width: 250px;
+$aside-menu-color: $gray-dark;
+$aside-menu-bg: #fff;
+$aside-menu-borders: (
+ left: (
+ size: 1px,
+ style: solid,
+ color: $border-color
+ )
+);
+
+$aside-menu-nav-padding-y: .75rem;
+$aside-menu-nav-padding-x: 1rem;
+
+// Footer
+
+$footer-height: 50px;
+$footer-bg: $gray-lightest;
+$footer-color: $body-color;
+$footer-borders: (
+ top: (
+ size: 1px,
+ style: solid,
+ color: $border-color
+ )
+);
+
+// Cards
+
+$card-icon-bg: transparent;
+$card-icon-color: $body-color;
diff --git a/Angular_Seed/scss/core/_custom.scss b/Angular_Seed/scss/core/_custom.scss
new file mode 100644
index 0000000..15d367a
--- /dev/null
+++ b/Angular_Seed/scss/core/_custom.scss
@@ -0,0 +1 @@
+// Here you can add other styles
diff --git a/Angular_Seed/scss/core/_footer.scss b/Angular_Seed/scss/core/_footer.scss
new file mode 100644
index 0000000..71b3cd2
--- /dev/null
+++ b/Angular_Seed/scss/core/_footer.scss
@@ -0,0 +1,12 @@
+footer.footer {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ height: $footer-height;
+ padding: 0 $spacer-x;
+ line-height: $footer-height;
+ color: $footer-color;
+ background: $footer-bg;
+ @include borders($footer-borders);
+}
diff --git a/Angular_Seed/scss/core/_grid.scss b/Angular_Seed/scss/core/_grid.scss
new file mode 100644
index 0000000..bca7bdb
--- /dev/null
+++ b/Angular_Seed/scss/core/_grid.scss
@@ -0,0 +1,15 @@
+.row.row-equal {
+ padding-right: ($grid-gutter-width / 4);
+ padding-left: ($grid-gutter-width / 4);
+ margin-right: ($grid-gutter-width / -2);
+ margin-left: ($grid-gutter-width / -2);
+
+ [class*="col-"] {
+ padding-right: ($grid-gutter-width / 4);
+ padding-left: ($grid-gutter-width / 4);
+ }
+}
+
+.main .container-fluid {
+ padding: 0 30px;
+}
diff --git a/Angular_Seed/scss/core/_layout.scss b/Angular_Seed/scss/core/_layout.scss
new file mode 100644
index 0000000..521d234
--- /dev/null
+++ b/Angular_Seed/scss/core/_layout.scss
@@ -0,0 +1,238 @@
+html.sidebar-opened {
+ max-width: 100% !important;
+ overflow-x: hidden !important;
+}
+
+body {
+ position: relative;
+ min-height: 100vh;
+ padding: 0;
+ margin: 0;
+
+
+ .bd-title.main {
+ padding: 0 !important;
+ }
+}
+
+.sidebar {
+ left: - $sidebar-width;
+ transition-duration: $layout-transition-speed, $layout-transition-speed, $layout-transition-speed, $layout-transition-speed, $layout-transition-speed, $layout-transition-speed;
+ transition-property: left, right, padding-left, padding-right, margin-left, margin-right;
+
+}
+
+.main {
+ padding-bottom: $footer-height;
+ transition-duration: $layout-transition-speed, $layout-transition-speed, $layout-transition-speed, $layout-transition-speed;
+ transition-property: padding-left, padding-right, margin-left, margin-right;
+}
+
+.aside-menu {
+ transition-duration: $layout-transition-speed, $layout-transition-speed;
+ transition-property: left, right;
+}
+
+.footer {
+ transition-duration: $layout-transition-speed, $layout-transition-speed, $layout-transition-speed, $layout-transition-speed, $layout-transition-speed, $layout-transition-speed;
+ transition-property: padding-left, padding-right, margin-left, margin-right, left, right;
+}
+
+body.std {
+ position: relative;
+
+ header.navbar {
+ z-index: $zindex-navbar-fixed;
+ }
+
+ .sidebar {
+ padding-top: $navbar-height;
+ }
+
+ .main {
+ padding-left: $sidebar-width;
+ }
+}
+
+body.navbar-fixed {
+
+ header.navbar {
+ @extend .navbar-fixed-top;
+ }
+
+ .main {
+ padding-top: $navbar-height;
+ }
+
+ &.top-nav {
+ &.fixed-nav {
+
+ nav.top-nav {
+ position: fixed;
+ }
+
+ .main {
+ padding-top: $navbar-height + $top-nav-height;
+ }
+ }
+ }
+}
+
+body:not(.top-nav) {
+ header.navbar {
+ z-index: $zindex-navbar-fixed;
+ }
+
+ .sidebar {
+ //left: 0;
+ display: inline;
+ padding-top: $navbar-height !important;
+ }
+
+ &.compact-nav {
+
+ .main {
+ padding-left: $sidebar-compact-width;
+ }
+
+ .footer {
+ left: $sidebar-compact-width;
+ }
+ }
+
+ &.fixed-nav {
+
+ .sidebar {
+ position: fixed;
+
+ .sidebar-nav {
+ height: calc(100vh - #{$navbar-height});
+ }
+ }
+
+ .sidebar-footer {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ }
+ }
+
+ &.sidebar-off-canvas {
+
+ header.navbar {
+ z-index: $zindex-navbar-fixed + 2;
+ }
+
+ .sidebar {
+ left: -$sidebar-width;
+ z-index: $zindex-navbar-fixed + 1;
+ padding-top: 0;
+
+ .sidebar-close {
+ display: inline;
+ }
+
+ .sidebar-nav {
+ height: 100vh;
+ }
+ }
+
+ .main {
+ padding-left: 0;
+ }
+
+ .footer {
+ left: 0;
+ }
+ }
+
+ &.sidebar-opened {
+
+ .sidebar {
+ left: 0;
+ }
+
+ &.sidebar-off-canvas-push {
+
+ .main {
+ margin-right: -$sidebar-width;
+ margin-left: $sidebar-width;
+ }
+
+ .footer {
+ margin-right: -$sidebar-width;
+ margin-left: $sidebar-width;
+ }
+ }
+
+ &.sidebar-off-canvas-with-shadow {
+ position: relative;
+ max-width: 100% !important;
+ overflow-x: hidden !important;
+
+
+ &:after {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: $zindex-navbar-fixed;
+ width: 100%;
+ height: 100%;
+ content: '';
+ background: rgba(0,0,0,.7);
+ }
+ }
+ }
+}
+
+body.sidebar-nav {
+ .sidebar {
+ left: 0;
+ }
+ .main {
+ padding-left: $sidebar-width;
+ }
+
+ .footer {
+ left: $sidebar-width;
+ }
+}
+
+body.top-nav {
+
+ .layout-toggler {
+ display: none !important;
+ }
+
+ .main {
+ padding-top: $navbar-height + $top-nav-height;
+ }
+}
+
+body.aside-menu-open {
+ .main {
+ padding-right: $aside-menu-width;
+ }
+
+ .aside-menu {
+ right: 0;
+ }
+
+ .footer {
+ right: $aside-menu-width;
+ }
+
+ &.aside-menu-off-canvas {
+ .main {
+ right: 0;
+ padding-right: 0;
+ }
+ }
+}
+
+body.footer-fixed {
+ .footer {
+ position: fixed;
+ bottom: 0;
+ }
+}
diff --git a/Angular_Seed/scss/core/_loading.scss b/Angular_Seed/scss/core/_loading.scss
new file mode 100644
index 0000000..1732064
--- /dev/null
+++ b/Angular_Seed/scss/core/_loading.scss
@@ -0,0 +1,127 @@
+// Angular Version
+// Make clicks pass-through
+#loading-bar,
+#loading-bar-spinner {
+ -webkit-pointer-events: none;
+ pointer-events: none;
+ -moz-transition: 350ms linear all;
+ -o-transition: 350ms linear all;
+ -webkit-transition: 350ms linear all;
+ transition: 350ms linear all;
+}
+
+#loading-bar.ng-enter,
+#loading-bar.ng-leave.ng-leave-active,
+#loading-bar-spinner.ng-enter,
+#loading-bar-spinner.ng-leave.ng-leave-active {
+ opacity: 0;
+}
+
+#loading-bar.ng-enter.ng-enter-active,
+#loading-bar.ng-leave,
+#loading-bar-spinner.ng-enter.ng-enter-active,
+#loading-bar-spinner.ng-leave {
+ opacity: 1;
+}
+
+#loading-bar .bar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 20002;
+ width: 100%;
+ height: 2px;
+ background: $brand-primary;
+ border-top-right-radius: 1px;
+ border-bottom-right-radius: 1px;
+ -moz-transition: width 350ms;
+ -o-transition: width 350ms;
+ -webkit-transition: width 350ms;
+ transition: width 350ms;
+}
+
+// Fancy blur effect
+#loading-bar .peg {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 70px;
+ height: 2px;
+ -moz-border-radius: 100%;
+ -webkit-border-radius: 100%;
+ border-radius: 100%;
+ -moz-box-shadow: #29d 1px 0 6px 1px;
+ -ms-box-shadow: #29d 1px 0 6px 1px;
+ -webkit-box-shadow: #29d 1px 0 6px 1px;
+ box-shadow: #29d 1px 0 6px 1px;
+ opacity: .45;
+}
+
+#loading-bar-spinner {
+ position: fixed;
+ top: 10px;
+ left: 10px;
+ z-index: 10002;
+ display: block;
+}
+
+#loading-bar-spinner .spinner-icon {
+ width: 14px;
+ height: 14px;
+
+ border: solid 2px transparent;
+ border-top-color: #29d;
+ border-left-color: #29d;
+ border-radius: 50%;
+
+ -moz-animation: loading-bar-spinner 400ms linear infinite;
+ -ms-animation: loading-bar-spinner 400ms linear infinite;
+ -o-animation: loading-bar-spinner 400ms linear infinite;
+ -webkit-animation: loading-bar-spinner 400ms linear infinite;
+ animation: loading-bar-spinner 400ms linear infinite;
+}
+
+@-webkit-keyframes loading-bar-spinner {
+ 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
+ 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
+}
+@-moz-keyframes loading-bar-spinner {
+ 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
+ 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
+}
+@-o-keyframes loading-bar-spinner {
+ 0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
+ 100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
+}
+@-ms-keyframes loading-bar-spinner {
+ 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
+ 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
+}
+@keyframes loading-bar-spinner {
+ 0% { transform: rotate(0deg); transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); transform: rotate(360deg); }
+}
+
+//Ajax & Static Version
+.pace {
+ -webkit-pointer-events: none;
+ pointer-events: none;
+
+ -moz-user-select: none;
+ -webkit-user-select: none;
+ user-select: none;
+}
+
+.pace-inactive {
+ display: none;
+}
+
+.pace .pace-progress {
+ position: fixed;
+ top: 0;
+ right: 100%;
+ z-index: 2000;
+ width: 100%;
+ height: 2px;
+ background: $brand-primary;
+}
diff --git a/Angular_Seed/scss/core/_mixins.scss b/Angular_Seed/scss/core/_mixins.scss
new file mode 100644
index 0000000..b05116d
--- /dev/null
+++ b/Angular_Seed/scss/core/_mixins.scss
@@ -0,0 +1,92 @@
+@mixin button-social-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
+ padding: $padding-y $padding-x;
+ font-size: $font-size;
+ line-height: $line-height;
+ border: 0;
+ @include border-radius($border-radius);
+
+ &:before {
+ width: ($padding-y * 2) + ($font-size * $line-height);
+ height: ($padding-y * 2) + ($font-size * $line-height);
+ padding: $padding-y 0;
+ font-size: $font-size;
+ line-height: $line-height;
+ @include border-radius($border-radius);
+ }
+
+ span {
+ margin-left: ($padding-y * 2) + ($font-size * $line-height);
+ }
+
+ &.icon {
+ width: ($padding-y * 2) + ($font-size * $line-height);
+ height: ($padding-y * 2) + ($font-size * $line-height);
+ }
+}
+
+@mixin avatar($width, $status-width) {
+ position: relative;
+ display: inline-block;
+ width: $width;
+
+ .img-avatar {
+ width: $width;
+ height: $width;
+ }
+
+ .avatar-status {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ display: block;
+ width: $status-width;
+ height: $status-width;
+ border: 1px solid #fff;
+ border-radius: 50em;
+ }
+}
+
+@mixin borders($borders) {
+ @each $border in $borders {
+ $direction: nth($border, 1);
+ @if $direction == 'all' {
+ $size: map-get(map-get($borders, $direction), size);
+ $style: map-get(map-get($borders, $direction), style);
+ $color: map-get(map-get($borders, $direction), color);
+ border: $size $style $color;
+ } @else if $direction == 'top' {
+ $size: map-get(map-get($borders, $direction), size);
+ $style: map-get(map-get($borders, $direction), style);
+ $color: map-get(map-get($borders, $direction), color);
+ border-top: $size $style $color;
+ } @else if $direction == 'right' {
+ $size: map-get(map-get($borders, $direction), size);
+ $style: map-get(map-get($borders, $direction), style);
+ $color: map-get(map-get($borders, $direction), color);
+ border-right: $size $style $color;
+ } @else if $direction == 'bottom' {
+ $size: map-get(map-get($borders, $direction), size);
+ $style: map-get(map-get($borders, $direction), style);
+ $color: map-get(map-get($borders, $direction), color);
+ border-bottom: $size $style $color;
+ } @else if $direction == 'left' {
+ $size: map-get(map-get($borders, $direction), size);
+ $style: map-get(map-get($borders, $direction), style);
+ $color: map-get(map-get($borders, $direction), color);
+ border-left: $size $style $color;
+ }
+ }
+}
+
+@mixin bg-variant($parent, $color) {
+ #{$parent} {
+ @include border-radius($card-border-radius-inner $card-border-radius-inner $card-border-radius-inner $card-border-radius-inner);
+ color: #fff !important;
+ background-color: $color !important;
+ }
+ a#{$parent} {
+ @include hover-focus {
+ background-color: darken($color, 10%);
+ }
+ }
+}
diff --git a/Angular_Seed/scss/core/_mobile.scss b/Angular_Seed/scss/core/_mobile.scss
new file mode 100644
index 0000000..4b723fb
--- /dev/null
+++ b/Angular_Seed/scss/core/_mobile.scss
@@ -0,0 +1,75 @@
+@include media-breakpoint-down(md) {
+
+ $mobile-nav-width: 200px;
+
+ body {
+ padding: 0 !important;
+ margin: 0 !important;
+ }
+
+ header.navbar {
+ position: fixed !important;
+ top: 0 !important;
+ right: 0 !important;
+ left: 0 !important;
+
+ .navbar-toggler {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 70px;
+ height: inherit;
+ }
+
+ .navbar-brand {
+ width: 100% !important;
+ margin: 0 auto !important;
+ }
+ }
+
+ .sidebar {
+ width: $mobile-nav-width;
+ margin-left: -$mobile-nav-width;
+
+ .sidebar-footer {
+ margin-left: -$mobile-nav-width;
+ }
+ }
+
+ .breadcrumb-menu {
+ display: none;
+ }
+
+ .main {
+ width: 100% !important;
+ padding: 0 !important;
+ padding-top: $navbar-height !important;
+ margin: 0 !important;
+ overflow: hidden;
+ }
+
+ .footer {
+ display: none;
+ }
+
+ html {
+ max-width: 100%;
+ overflow-x: hidden;
+ }
+
+ body.mobile-open {
+ max-width: 100%;
+ overflow-x: hidden;
+ .sidebar {
+ margin-left: 0;
+
+ .sidebar-footer {
+ margin-left: 0;
+ }
+ }
+
+ .main {
+ margin-left: $mobile-nav-width !important;
+ }
+ }
+}
diff --git a/Angular_Seed/scss/core/_navigation.scss b/Angular_Seed/scss/core/_navigation.scss
new file mode 100644
index 0000000..7ce7bca
--- /dev/null
+++ b/Angular_Seed/scss/core/_navigation.scss
@@ -0,0 +1,8 @@
+// Disabled Navigation
+@import "navigation/disabled";
+
+// Sidebar Navigation
+@import "navigation/sidebar";
+
+// Top Navigation
+@import "navigation/top";
diff --git a/Angular_Seed/scss/core/_others.scss b/Angular_Seed/scss/core/_others.scss
new file mode 100644
index 0000000..062afb2
--- /dev/null
+++ b/Angular_Seed/scss/core/_others.scss
@@ -0,0 +1,3 @@
+hr.transparent {
+ border-top: 1px solid transparent;
+}
diff --git a/Angular_Seed/scss/core/_switches.scss b/Angular_Seed/scss/core/_switches.scss
new file mode 100644
index 0000000..7aa38ff
--- /dev/null
+++ b/Angular_Seed/scss/core/_switches.scss
@@ -0,0 +1,314 @@
+@mixin switch-size($width, $height, $font-size, $handle-margin) {
+ width: $width;
+ height: $height;
+
+ .switch-label {
+ font-size: $font-size;
+ }
+
+ .switch-handle {
+ width: $height - $handle-margin * 2;
+ height: $height - $handle-margin * 2;
+ }
+
+ .switch-input:checked ~ .switch-handle {
+ left: $width - $height + $handle-margin;
+ }
+}
+
+@mixin switch($type, $width, $height, $font-size, $handle-margin) {
+ position: relative;
+ display: inline-block;
+ vertical-align: top;
+ width: $width;
+ height: $height;
+ background-color: transparent;
+ cursor: pointer;
+
+ .switch-input {
+ position: absolute;
+ top: 0;
+ left: 0;
+ opacity: 0;
+ }
+
+ .switch-label {
+ position: relative;
+ display: block;
+ height: inherit;
+ @if $type == icon {
+ font-family: FontAwesome;
+ }
+ font-size: $font-size;
+ font-weight: 600;
+ text-transform: uppercase;
+ @if $type == ddd {
+ background-color: $gray-lightest;
+ } @else {
+ background-color: #fff;
+ }
+ border: 1px solid $border-color;
+ border-radius: 2px;
+ -moz-transition: 0.15s ease-out;
+ -o-transition: 0.15s ease-out;
+ -webkit-transition: 0.15s ease-out;
+ transition: 0.15s ease-out;
+ -moz-transition-property: opacity background;
+ -o-transition-property: opacity background;
+ -webkit-transition-property: opacity background;
+ transition-property: opacity background;
+ }
+ @if $type == text or $type == icon {
+ .switch-label:before,
+ .switch-label:after {
+ position: absolute;
+ top: 50%;
+ width: 50%;
+ margin-top: -.5em;
+ line-height: 1;
+ text-align: center;
+ -moz-transition: inherit;
+ -o-transition: inherit;
+ -webkit-transition: inherit;
+ transition: inherit;
+ }
+ .switch-label:before {
+ right: 1px;
+ color: $gray-lighter;
+ content: attr(data-off);
+ }
+ .switch-label:after {
+ left: 1px;
+ color: #fff;
+ content: attr(data-on);
+ opacity: 0;
+ }
+ }
+ .switch-input:checked ~ .switch-label {
+ //background: $gray-lightest;
+ }
+ .switch-input:checked ~ .switch-label:before {
+ opacity: 0;
+ }
+ .switch-input:checked ~ .switch-label:after {
+ opacity: 1;
+ }
+
+ .switch-handle {
+ position: absolute;
+ top: $handle-margin;
+ left: $handle-margin;
+ width: $height - $handle-margin * 2;
+ height: $height - $handle-margin * 2;
+ background: #fff;
+ border: 1px solid $border-color;
+ border-radius: 1px;
+ -moz-transition: left 0.15s ease-out;
+ -o-transition: left 0.15s ease-out;
+ -webkit-transition: left 0.15s ease-out;
+ transition: left 0.15s ease-out;
+ @if $type == ddd {
+ border: 0;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+ }
+ }
+
+ .switch-input:checked ~ .switch-handle {
+ left: $width - $height + $handle-margin;
+ }
+
+
+ @if $type == ddd {
+ @extend .switch-pill;
+ }
+
+ //size variations
+ @if $type == default {
+
+ &.switch-lg {
+ @include switch-size($switch-lg-width, $switch-lg-height, $switch-lg-font-size, $handle-margin);
+ }
+ &.switch-sm {
+ @include switch-size($switch-sm-width, $switch-sm-height, $switch-sm-font-size, $handle-margin);
+ }
+ &.switch-xs {
+ @include switch-size($switch-xs-width, $switch-xs-height, $switch-xs-font-size, $handle-margin);
+ }
+
+ } @else if $type == text {
+
+ &.switch-lg {
+ @include switch-size($switch-text-lg-width, $switch-text-lg-height, $switch-text-lg-font-size, $handle-margin);
+ }
+ &.switch-sm {
+ @include switch-size($switch-text-sm-width, $switch-text-sm-height, $switch-text-sm-font-size, $handle-margin);
+ }
+ &.switch-xs {
+ @include switch-size($switch-text-xs-width, $switch-text-xs-height, $switch-text-xs-font-size, $handle-margin);
+ }
+
+ } @else if $type == icon {
+
+ &.switch-lg {
+ @include switch-size($switch-icon-lg-width, $switch-icon-lg-height, $switch-icon-lg-font-size, $handle-margin);
+ }
+ &.switch-sm {
+ @include switch-size($switch-icon-sm-width, $switch-icon-sm-height, $switch-icon-sm-font-size, $handle-margin);
+ }
+ &.switch-xs {
+ @include switch-size($switch-icon-xs-width, $switch-icon-xs-height, $switch-icon-xs-font-size, $handle-margin);
+ }
+
+ } @else if $type == ddd {
+
+ &.switch-lg {
+ @include switch-size($switch-lg-width, $switch-lg-height, $switch-lg-font-size, 0);
+ }
+ &.switch-sm {
+ @include switch-size($switch-sm-width, $switch-sm-height, $switch-sm-font-size, 0);
+ }
+ &.switch-xs {
+ @include switch-size($switch-xs-width, $switch-xs-height, $switch-xs-font-size, 0);
+ }
+ }
+}
+
+@mixin switch-variant($color) {
+ > .switch-input:checked ~ .switch-label {
+ background: $color !important;
+ border-color: darken($color,10%);
+ }
+
+ > .switch-input:checked ~ .switch-handle {
+ border-color: darken($color,10%);
+ }
+}
+
+@mixin switch-outline-variant($color) {
+ > .switch-input:checked ~ .switch-label {
+ background: #fff !important;
+ border-color: $color;
+
+ &:after {
+ color: $color;
+ }
+ }
+
+ > .switch-input:checked ~ .switch-handle {
+ border-color: $color;
+ }
+}
+
+@mixin switch-outline-alt-variant($color) {
+ > .switch-input:checked ~ .switch-label {
+ background: #fff !important;
+ border-color: $color;
+
+ &:after {
+ color: $color;
+ }
+ }
+
+ > .switch-input:checked ~ .switch-handle {
+ background: $color !important;
+ border-color: $color;
+ }
+}
+
+$switch-lg-width: 48px;
+$switch-lg-height: 28px;
+$switch-lg-font-size: 12px;
+
+$switch-width: 40px;
+$switch-height: 24px;
+$switch-font-size: 10px;
+
+$handle-margin: 2px;
+
+$switch-sm-width: 32px;
+$switch-sm-height: 20px;
+$switch-sm-font-size: 8px;
+
+$switch-xs-width: 24px;
+$switch-xs-height: 16px;
+$switch-xs-font-size: 7px;
+
+
+$switch-text-lg-width: 56px;
+$switch-text-lg-height: 28px;
+$switch-text-lg-font-size: 12px;
+
+$switch-text-width: 48px;
+$switch-text-height: 24px;
+$switch-text-font-size: 10px;
+
+$switch-text-sm-width: 40px;
+$switch-text-sm-height: 20px;
+$switch-text-sm-font-size: 8px;
+
+$switch-text-xs-width: 32px;
+$switch-text-xs-height: 16px;
+$switch-text-xs-font-size: 7px;
+
+
+$switch-icon-lg-width: 56px;
+$switch-icon-lg-height: 28px;
+$switch-icon-lg-font-size: 12px;
+
+$switch-icon-width: 48px;
+$switch-icon-height: 24px;
+$switch-icon-font-size: 10px;
+
+$switch-icon-sm-width: 40px;
+$switch-icon-sm-height: 20px;
+$switch-icon-sm-font-size: 8px;
+
+$switch-icon-xs-width: 32px;
+$switch-icon-xs-height: 16px;
+$switch-icon-xs-font-size: 7px;
+
+.switch.switch-default {
+ @include switch('default', $switch-width, $switch-height, $switch-font-size, $handle-margin);
+}
+
+.switch.switch-text {
+ @include switch('text', $switch-text-width, $switch-text-height, $switch-text-font-size, $handle-margin);
+}
+
+.switch.switch-icon {
+ @include switch('icon', $switch-icon-width, $switch-icon-height, $switch-icon-font-size, $handle-margin);
+}
+
+.switch.switch-3d {
+ @include switch('ddd', $switch-width, $switch-height, $switch-font-size, 0);
+}
+
+//pills style
+.switch-pill {
+ .switch-label,
+ .switch-handle {
+ border-radius: 50em !important;
+ }
+
+ .switch-label:before {
+ right: 2px !important;
+ }
+ .switch-label:after {
+ left: 2px !important;
+ }
+}
+
+@each $variant, $color in (primary: $brand-primary, secondary: $gray-lighter, success: $brand-success, info: $brand-info, warning: $brand-warning, danger: $brand-danger) {
+ //normal style
+ .switch-#{$variant} {
+ @include switch-variant($color);
+ }
+ //outline style
+ .switch-#{$variant}-outline {
+ @include switch-outline-variant($color);
+ }
+ //outline alternative style
+ .switch-#{$variant}-outline-alt {
+ @include switch-outline-alt-variant($color);
+ }
+}
diff --git a/Angular_Seed/scss/core/_temp.scss b/Angular_Seed/scss/core/_temp.scss
new file mode 100644
index 0000000..f75a947
--- /dev/null
+++ b/Angular_Seed/scss/core/_temp.scss
@@ -0,0 +1,13 @@
+.pagination-datatables, .pagination {
+ li {
+ @extend .page-item;
+
+ a {
+ @extend .page-link;
+ }
+ }
+}
+
+.label-pill {
+ border-radius: 1rem !important;
+}
diff --git a/Angular_Seed/scss/core/_typography.scss b/Angular_Seed/scss/core/_typography.scss
new file mode 100644
index 0000000..7740fbc
--- /dev/null
+++ b/Angular_Seed/scss/core/_typography.scss
@@ -0,0 +1,36 @@
+body {
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+}
+
+.font-xs {
+ font-size: .75rem !important;
+}
+
+.font-sm {
+ font-size: .85rem !important;
+}
+
+.font-lg {
+ font-size: 1rem !important;
+}
+
+.font-xl {
+ font-size: 1.25rem !important;
+}
+
+.font-2xl {
+ font-size: 1.5rem !important;
+}
+
+.font-3xl {
+ font-size: 1.75rem !important;
+}
+
+.font-4xl {
+ font-size: 2rem !important;
+}
+
+.font-5xl {
+ font-size: 2.5rem !important;
+}
diff --git a/Angular_Seed/scss/core/_utilities-border.scss b/Angular_Seed/scss/core/_utilities-border.scss
new file mode 100644
index 0000000..3c2a540
--- /dev/null
+++ b/Angular_Seed/scss/core/_utilities-border.scss
@@ -0,0 +1,18 @@
+//border
+@each $prop, $abbrev in (border: b) {
+ @each $size in (0,1,2) {
+ @if $size == 0 {
+ .#{$abbrev}-a-#{$size} { #{$prop}: 0 !important; } // a = All sides
+ .#{$abbrev}-t-#{$size} { #{$prop}-top: 0 !important; }
+ .#{$abbrev}-r-#{$size} { #{$prop}-right: 0 !important; }
+ .#{$abbrev}-b-#{$size} { #{$prop}-bottom: 0 !important; }
+ .#{$abbrev}-l-#{$size} { #{$prop}-left: 0 !important; }
+ } @else {
+ .#{$abbrev}-a-#{$size} { #{$prop}: $size * $border-width solid $border-color !important; } // a = All sides
+ .#{$abbrev}-t-#{$size} { #{$prop}-top: $size * $border-width solid $border-color !important; }
+ .#{$abbrev}-r-#{$size} { #{$prop}-right: $size * $border-width solid $border-color !important; }
+ .#{$abbrev}-b-#{$size} { #{$prop}-bottom: $size * $border-width solid $border-color !important; }
+ .#{$abbrev}-l-#{$size} { #{$prop}-left: $size * $border-width solid $border-color !important; }
+ }
+ }
+}
diff --git a/Angular_Seed/scss/core/_widgets.scss b/Angular_Seed/scss/core/_widgets.scss
new file mode 100644
index 0000000..b59fe4c
--- /dev/null
+++ b/Angular_Seed/scss/core/_widgets.scss
@@ -0,0 +1,249 @@
+// .social-box
+.social-box {
+ min-height: 160px;
+ margin-bottom: 20px;
+ text-align: center;
+ background: #fff;
+ border: $card-border-width solid $card-border-color;
+ @include border-radius($card-border-radius);
+
+ i {
+ display: block;
+ margin: -1px -1px 0;
+ font-size: 40px;
+ line-height: 90px;
+ background: $gray-lighter;
+
+ @include border-radius($card-border-radius-inner $card-border-radius-inner 0 0);
+ }
+
+ .chart-wrapper {
+ height: 90px;
+ margin: -90px 0 0;
+
+ canvas {
+ width: 100% !important;
+ height: 90px !important;
+ }
+ }
+
+ ul {
+ padding: 10px 0;
+ list-style: none;
+
+
+ li {
+ display: block;
+ float: left;
+ width: 50%;
+
+ &:first-child {
+ border-right: 1px solid $border-color;
+ }
+
+ strong {
+ display: block;
+ font-size: 20px;
+ }
+
+ span {
+ font-size: 10px;
+ font-weight: 500;
+ color: $border-color;
+ text-transform: uppercase;
+ }
+ }
+ }
+
+ &.facebook {
+ i {
+ color: #fff;
+ background: $facebook;
+ }
+ }
+
+ &.twitter {
+ i {
+ color: #fff;
+ background: $twitter;
+ }
+ }
+
+ &.linkedin {
+ i {
+ color: #fff;
+ background: $linkedin;
+ }
+ }
+
+ &.google-plus {
+ i {
+ color: #fff;
+ background: $google-plus;
+ }
+ }
+}
+
+.horizontal-bars {
+ padding: 0;
+ margin: 0;
+ list-style: none;
+
+ li {
+ position: relative;
+ height: 40px;
+ line-height: 40px;
+ vertical-align: middle;
+
+ .title {
+ width: 100px;
+ font-size: 12px;
+ font-weight: 600;
+ color: $text-muted;
+ vertical-align: middle;
+ }
+
+ .bars {
+ position: absolute;
+ top: 15px;
+ width: 100%;
+ padding-left: 100px;
+ }
+
+ &.legend {
+ text-align: center;
+
+ .tag {
+ display: inline-block;
+ width: 8px;
+ height: 8px;
+ padding: 0;
+ }
+ }
+
+ &.divider {
+ height: 40px;
+
+ i {
+ margin: 0 !important;
+ }
+ }
+ }
+
+ &.type-2 {
+
+ li {
+ overflow: hidden;
+
+ i {
+ display: inline-block;
+ margin-right: $spacer-x;
+ margin-left: 5px;
+ font-size: 18px;
+ line-height: 40px;
+ }
+
+ .title {
+ display: inline-block;
+ width: auto;
+ margin-top: -9px;
+ font-size: $font-size-base;
+ font-weight: normal;
+ line-height: 40px;
+ color: $body-color;
+ }
+
+ .value {
+ float: right;
+ font-weight: 600;
+ }
+
+ .bars {
+ position: absolute;
+ top: auto;
+ bottom: 0;
+ padding: 0;
+ }
+ }
+ }
+}
+
+ul.icons-list {
+ padding: 0;
+ margin: 0;
+ list-style: none;
+
+ li {
+ position: relative;
+ height: 40px;
+ vertical-align: middle;
+
+ i {
+ display: block;
+ float: left;
+ width: 35px !important;
+ height: 35px !important;
+ margin: 2px;
+ line-height: 35px !important;
+ text-align: center;
+ }
+
+ .desc {
+ height: 40px;
+ margin-left: 50px;
+ border-bottom: 1px solid $border-color;
+
+ .title {
+ padding: 2px 0 0;
+ margin: 0;
+ }
+ small {
+ display: block;
+ margin-top: -4px;
+ color: $text-muted;
+ }
+ }
+
+ .value {
+ position: absolute;
+ top: 2px;
+ right: 45px;
+ text-align: right;
+
+ strong {
+ display: block;
+ margin-top: -3px;
+ }
+ }
+
+ .actions {
+ position: absolute;
+ top: -4px;
+ right: 10px;
+ width: 40px;
+ height: 40px;
+ line-height: 40px;
+ text-align: center;
+
+ i {
+ float: none;
+ width: auto;
+ height: auto;
+ padding: 0;
+ margin: 0;
+ line-height: normal;
+ }
+ }
+
+ &.divider {
+ height: 40px;
+
+ i {
+ width: auto;
+ height: auto;
+ margin: 2px 0 0;
+ font-size: 18px;
+ }
+ }
+ }
+}
diff --git a/Angular_Seed/scss/core/bootstrap-variables.scss b/Angular_Seed/scss/core/bootstrap-variables.scss
new file mode 100644
index 0000000..fb2400c
--- /dev/null
+++ b/Angular_Seed/scss/core/bootstrap-variables.scss
@@ -0,0 +1,86 @@
+// Bootstrap overrides
+
+// Colors
+//
+// Grayscale and brand colors for use across Bootstrap.
+
+$gray-dark: #263238;
+$gray: #607d8b;
+$gray-light: #b0bec5;
+$gray-lighter: #cfd8dc;
+$gray-lightest: #eceff1;
+
+$brand-primary: #20a8d8;
+$brand-success: #4dbd74;
+$brand-info: #63c2de;
+$brand-warning: #f8cb00;
+$brand-danger: #f86c6b;
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+$enable-transitions: true;
+$enable-rounded: false;
+
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+
+$spacer: 1rem !default;
+$spacer-x: $spacer !default;
+$spacer-y: $spacer !default;
+$spacers: (
+ q: (
+ x: ($spacer-x * 0.25),
+ y: ($spacer-y * 0.25)
+ ),
+ h: (
+ x: ($spacer-x * 0.5),
+ y: ($spacer-y * 0.5)
+ ),
+ 0: (
+ x: 0,
+ y: 0
+ ),
+ 1: (
+ x: $spacer-x,
+ y: $spacer-y
+ ),
+ 2: (
+ x: ($spacer-x * 1.5),
+ y: ($spacer-y * 1.5)
+ ),
+ 3: (
+ x: ($spacer-x * 3),
+ y: ($spacer-y * 3)
+ )
+);
+
+// Body
+//
+// Settings for the `<body>` element.
+
+$body-bg: #e4e5e6;
+
+// Typography
+//
+// Font, line-height, and color for body text, headings, and more.
+
+$font-size-base: 0.875rem;
+
+// Breadcrumbs
+
+$breadcrumb-bg: #fff;
+
+// Cards
+
+$card-border-color: $gray-lighter;
+$card-cap-bg: $gray-lightest;
+
+// Dropdowns
+
+$dropdown-padding-y: 0;
+$dropdown-border-color: $gray-lighter;
+$dropdown-divider-bg: $gray-lightest;
diff --git a/Angular_Seed/scss/core/navigation/_disabled.scss b/Angular_Seed/scss/core/navigation/_disabled.scss
new file mode 100644
index 0000000..b54db05
--- /dev/null
+++ b/Angular_Seed/scss/core/navigation/_disabled.scss
@@ -0,0 +1,6 @@
+// body {
+// #navigation {
+// left: -
+// display: none !important;
+// }
+// }
diff --git a/Angular_Seed/scss/core/navigation/_sidebar.scss b/Angular_Seed/scss/core/navigation/_sidebar.scss
new file mode 100644
index 0000000..1922a79
--- /dev/null
+++ b/Angular_Seed/scss/core/navigation/_sidebar.scss
@@ -0,0 +1,331 @@
+body:not(.top-nav) {
+
+ .sidebar {
+ position: absolute;
+ top: 0;
+ //left: 0;
+ z-index: 1;
+ display: inline !important;
+ width: $sidebar-width;
+ height: 100%;
+ padding: $sidebar-padding;
+ color: $sidebar-color;
+ background: $sidebar-bg;
+ @include borders($sidebar-borders);
+
+ .sidebar-close {
+ position: absolute;
+ right: 0;
+ display: none;
+ padding: 0 $spacer-x;
+ font-size: 24px;
+ font-weight: 800;
+ line-height: $navbar-height;
+ color: $sidebar-color;
+ background: 0;
+ border: 0;
+ opacity: .8;
+
+ &:hover {
+ opacity: 1;
+ }
+ }
+
+ .sidebar-nav {
+ position: relative;
+ overflow-x: hidden;
+ overflow-y: auto;
+ -ms-overflow-style: -ms-autohiding-scrollbar;
+
+ &::-webkit-scrollbar {
+ width: 10px;
+ margin-left: -10px;
+ -webkit-appearance: none;
+ }
+
+ // &::-webkit-scrollbar-button { }
+
+ &::-webkit-scrollbar-track {
+ background-color: lighten($sidebar-bg, 5%);
+ border-right: 1px solid darken($sidebar-bg, 5%);
+ border-left: 1px solid darken($sidebar-bg, 5%);
+ }
+
+ // &::-webkit-scrollbar-track-piece { }
+
+ &::-webkit-scrollbar-thumb {
+ height: 50px;
+ background-color: darken($sidebar-bg, 10%);
+ background-clip: content-box;
+ border-color: transparent;
+ border-style: solid;
+ border-width: 1px 2px;
+ }
+
+ // &::-webkit-scrollbar-corner { }
+
+ //&::-webkit-resizer { }
+ }
+
+ ul.nav {
+ width: $sidebar-width;
+
+ li.nav-title {
+ padding: $sidebar-nav-title-padding-y $sidebar-nav-title-padding-x;
+ font-size: 11px;
+ font-weight: 600;
+ color: $sidebar-nav-title-color;
+ text-transform: uppercase;
+ }
+
+ li.divider {
+ height: 10px;
+ }
+
+ li.nav-item {
+ position: relative;
+ margin: 0;
+
+ ul {
+ display: none;
+ padding: 0;
+ margin: 0;
+
+ li {
+ padding: 0;
+ list-style: none;
+ }
+ }
+
+ a.nav-link {
+ display: block;
+ padding: $sidebar-nav-link-padding-y $sidebar-nav-link-padding-x;
+ color: $sidebar-nav-link-color;
+ text-decoration: none;
+ background: $sidebar-nav-link-bg;
+ @include borders($sidebar-nav-link-borders);
+ @if $enable-sidebar-nav-rounded {
+ border-radius: $border-radius;
+ }
+
+ &:hover {
+ color: $sidebar-nav-link-hover-color !important;
+ background: $sidebar-nav-link-hover-bg !important;
+ @include borders($sidebar-nav-link-hover-borders);
+
+ i {
+ color: $sidebar-nav-link-hover-icon-color;
+ }
+ }
+
+ &.active {
+ color: $sidebar-nav-link-active-color;
+ background: $sidebar-nav-link-active-bg;
+ @include borders($sidebar-nav-link-active-borders);
+
+ i {
+ color: $sidebar-nav-link-active-icon-color;
+ }
+ }
+
+ [class^="icon-"], [class*=" icon-"] {
+ display: inline-block;
+ margin-top: -4px;
+ vertical-align: middle;
+ }
+
+ i {
+ width: 20px;
+ margin: 0 ($sidebar-nav-link-padding-x / 2) 0 0;
+ font-size: 14px;
+ color: $sidebar-nav-link-icon-color;
+ text-align: center;
+ }
+
+ .tag {
+ float: right;
+ margin-top: 2px;
+ // margin-left: 10px;
+ }
+
+ &.nav-dropdown-toggle {
+
+ &:before {
+ position: absolute;
+ top: ($sidebar-nav-link-padding-y + ($font-size-base / 4));
+ right: $sidebar-nav-link-padding-x;
+ display: block;
+ width: ($font-size-base);
+ height: ($font-size-base);
+ padding: 0;
+ font-size: $font-size-base;
+ line-height: ($font-size-base * 3/4);
+ text-align: center;
+ content: "\2039";
+ transition: .3s;
+ }
+ }
+ }
+
+ &.nav-dropdown {
+ &.open {
+ background: $sidebar-nav-dropdown-bg;
+ @include borders($sidebar-nav-dropdown-borders);
+ @if $enable-sidebar-nav-rounded {
+ border-radius: $border-radius;
+ }
+ > ul, > ol {
+ display: inline;
+ }
+
+ a.nav-link {
+ color: $sidebar-nav-dropdown-color;
+ border-left: 0 !important;
+ }
+
+ > a.nav-link.nav-dropdown-toggle:before {
+ -webkit-transform: rotate(-90deg);
+ transform: rotate(-90deg);
+ }
+
+ .nav-dropdown.open {
+ border-left: 0;
+ }
+ }
+ }
+ }
+ }
+ }
+}
+
+@include media-breakpoint-up(sm) {
+
+ body.sidebar-nav.compact-nav {
+ .sidebar {
+ z-index: $zindex-navbar-fixed - 1;
+ width: $sidebar-compact-width;
+
+ .sidebar-items {
+ overflow: visible;
+ }
+
+ ul.nav {
+
+ li.nav-title, li.divider {
+ display: none;
+ }
+
+ li.nav-item {
+ border-left: 0 !important;
+
+ ul {
+ background: $sidebar-bg;
+ }
+
+ a.nav-link {
+ position: relative;
+ width: $sidebar-compact-width;
+ padding: 0 15px 0 0;
+ margin: 0;
+ overflow: hidden;
+ line-height: $sidebar-compact-height;
+ white-space: nowrap;
+ border-left: 0 !important;
+
+ &.nav-dropdown-toggle {
+
+ &:before {
+ display: none;
+ }
+ }
+
+ i {
+ display: block;
+ float: left;
+ width: $sidebar-compact-height;
+ height: $sidebar-compact-height;
+ padding: 0;
+ margin: 0;
+ font-size: 18px;
+ line-height: $sidebar-compact-height;
+ }
+
+ .tag {
+ position: absolute;
+ top: 6px;
+ right: 15px;
+ display: none;
+ }
+
+ &:hover {
+ width: $sidebar-width;
+
+ .tag {
+ display: inline;
+ }
+ }
+ }
+
+ ul {
+ position: absolute;
+ top: $sidebar-compact-width;
+ left: $sidebar-compact-width;
+
+ li {
+ position: relative;
+ padding: 0;
+
+ a.nav-link {
+ width: $sidebar-width - $sidebar-compact-width;
+ }
+
+ ul, ol {
+ position: absolute;
+ top: 0;
+ left: 100%;
+ }
+ }
+ }
+
+ &.nav-dropdown {
+ &.open {
+ > ul, > ol {
+ display: none;
+ }
+ }
+ }
+
+ &:hover {
+ > a.nav-link {
+ @if $sidebar-width < 249 {
+ width: $sidebar-width + $sidebar-compact-width;
+ } @else {
+ width: $sidebar-width;
+ }
+ }
+
+ > ul, > ol {
+ display: inline;
+
+ a.nav-link {
+ @if $sidebar-width < 249 {
+ width: $sidebar-width;
+ } @else {
+ width: $sidebar-width - $sidebar-compact-width;
+ }
+ }
+ }
+
+ &.nav-dropdown {
+ &.open {
+ > ul, > ol {
+ display: inline;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/Angular_Seed/scss/core/navigation/_top.scss b/Angular_Seed/scss/core/navigation/_top.scss
new file mode 100644
index 0000000..164c602
--- /dev/null
+++ b/Angular_Seed/scss/core/navigation/_top.scss
@@ -0,0 +1,116 @@
+nav.top-nav {
+ position: absolute;
+ top: $navbar-height;
+ left: 0;
+ z-index: $zindex-navbar-fixed - 1;
+ display: inline !important;
+ width: 100%;
+ height: $top-nav-height;
+ background: $top-nav-bg;
+ @include borders($top-nav-borders);
+
+ ul.nav {
+ white-space: nowrap;
+
+ li.nav-item {
+ position: relative;
+ display: inline-block;
+ margin: 0;
+
+ ul {
+ display: none;
+ padding: 0;
+ margin: 0;
+ white-space: normal;
+ background: $top-nav-bg;
+ @include borders($top-nav-ul-borders);
+
+
+ li {
+ padding: 0;
+ list-style: none;
+ }
+ }
+
+ a.nav-link {
+ display: block;
+ padding: 0 15px;
+ font-size: 12px;
+ font-weight: 400;
+ line-height: $top-nav-height;
+ color: $top-nav-color;
+ text-decoration: none;
+ text-transform: uppercase;
+
+ i {
+ display: block;
+ float: left;
+ width: 20px;
+ margin: 0 10px 0 0;
+ font-size: 14px;
+ line-height: $top-nav-height - 1px;
+ text-align: center;
+ }
+
+ .tag {
+ float: right;
+ margin-top: 13px;
+ margin-left: 10px;
+ }
+
+ &:hover {
+ color: $top-nav-hover-color;
+ background: $top-nav-hover-bg;
+
+ }
+
+ &.active {
+ color: $top-nav-active-color;
+ background: $top-nav-active-bg;
+ }
+ }
+
+ ul {
+ position: absolute;
+ top: $top-nav-height - 1px;
+ left: 0;
+
+ li {
+ position: relative;
+ padding: 0;
+
+ a.nav-link {
+ min-width: 200px;
+ }
+
+ ul {
+ position: absolute;
+ top: 0;
+ left: 100%;
+ }
+ }
+ }
+
+ &.nav-more {
+ ul {
+ right: 0;
+ left: auto;
+
+ li {
+
+ ul {
+ right: 100%;
+ left: auto;
+ }
+ }
+ }
+ }
+
+ &:hover {
+ > ul {
+ display: inline;
+ }
+ }
+ }
+ }
+}
--
GitLab