refactor: CoreUI components
This commit is contained in:
xidedix
@@ -1,3 +1,4 @@
|
|||||||
|
.idea
|
||||||
.DS_Store
|
.DS_Store
|
||||||
node_modules/
|
node_modules/
|
||||||
dist/
|
dist/
|
||||||
|
|||||||
+1
-1
@@ -35,7 +35,7 @@
|
|||||||
|
|
||||||
-->
|
-->
|
||||||
|
|
||||||
<body class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden">
|
<body class="app">
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<!-- built files will be auto injected -->
|
<!-- built files will be auto injected -->
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
Generated
+1500
-99
File diff suppressed because it is too large
Load Diff
+17
-16
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@coreui/vue",
|
"name": "@coreui/vue",
|
||||||
"version": "1.0.10",
|
"version": "2.0.0-alpha.0",
|
||||||
"description": "Open Source Bootstrap Admin Template",
|
"description": "Open Source Bootstrap Admin Template",
|
||||||
"author": "Łukasz Holeczek",
|
"author": "Łukasz Holeczek",
|
||||||
"homepage": "http://coreui.io",
|
"homepage": "http://coreui.io",
|
||||||
@@ -17,15 +17,16 @@
|
|||||||
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
|
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"bootstrap": "4.0.0",
|
"@coreui/coreui": "next",
|
||||||
"bootstrap-vue": "2.0.0-rc.1",
|
"bootstrap": "^4.0.0",
|
||||||
"chart.js": "2.7.1",
|
"bootstrap-vue": "^2.0.0-rc.6",
|
||||||
"flag-icon-css": "2.9.0",
|
"chart.js": "^2.7.2",
|
||||||
|
"flag-icon-css": "^3.0.0",
|
||||||
"font-awesome": "^4.7.0",
|
"font-awesome": "^4.7.0",
|
||||||
"simple-line-icons": "^2.4.1",
|
"simple-line-icons": "^2.4.1",
|
||||||
"vue": "2.5.13",
|
"vue": "2.5.16",
|
||||||
"vue-chartjs": "3.1.0",
|
"vue-chartjs": "^3.3.1",
|
||||||
"vue-router": "3.0.1"
|
"vue-router": "^3.0.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"autoprefixer": "7.2.5",
|
"autoprefixer": "7.2.5",
|
||||||
@@ -87,14 +88,14 @@
|
|||||||
"ora": "1.4.0",
|
"ora": "1.4.0",
|
||||||
"rimraf": "2.6.2",
|
"rimraf": "2.6.2",
|
||||||
"url-loader": "0.6.2",
|
"url-loader": "0.6.2",
|
||||||
"vue-loader": "14.1.1",
|
"vue-loader": "14.2.2",
|
||||||
"vue-style-loader": "3.1.2",
|
"vue-style-loader": "^3.1.2",
|
||||||
"vue-template-compiler": "2.5.13",
|
"vue-template-compiler": "^2.5.16",
|
||||||
"webpack": "3.10.0",
|
"webpack": "3.11.0",
|
||||||
"webpack-bundle-analyzer": "2.10.0",
|
"webpack-bundle-analyzer": "^2.11.1",
|
||||||
"webpack-dev-middleware": "2.0.4",
|
"webpack-dev-middleware": "^2.0.4",
|
||||||
"webpack-hot-middleware": "2.21.0",
|
"webpack-hot-middleware": "^2.21.2",
|
||||||
"webpack-merge": "4.1.1"
|
"webpack-merge": "^4.1.2"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">= 8.9.4",
|
"node": ">= 8.9.4",
|
||||||
|
|||||||
@@ -1,130 +0,0 @@
|
|||||||
// Bootstrap overrides
|
|
||||||
|
|
||||||
//
|
|
||||||
// Color system
|
|
||||||
//
|
|
||||||
|
|
||||||
$white: #fff;
|
|
||||||
$gray-100: #f0f3f5;
|
|
||||||
$gray-200: #c2cfd6;
|
|
||||||
$gray-300: #a4b7c1;
|
|
||||||
$gray-400: #869fac;
|
|
||||||
$gray-500: #678898;
|
|
||||||
$gray-600: #536c79;
|
|
||||||
$gray-700: #3e515b;
|
|
||||||
$gray-800: #29363d;
|
|
||||||
$gray-900: #151b1e;
|
|
||||||
$black: #000 !default;
|
|
||||||
|
|
||||||
$blue: #20a8d8;
|
|
||||||
$indigo: #6610f2 !default;
|
|
||||||
$purple: #6f42c1 !default;
|
|
||||||
$pink: #e83e8c !default;
|
|
||||||
$red: #f86c6b;
|
|
||||||
$orange: #f8cb00;
|
|
||||||
$yellow: #ffc107 !default;
|
|
||||||
$green: #4dbd74;
|
|
||||||
$teal: #20c997 !default;
|
|
||||||
$cyan: #63c2de;
|
|
||||||
|
|
||||||
$colors: (
|
|
||||||
blue: $blue,
|
|
||||||
indigo: $indigo,
|
|
||||||
purple: $purple,
|
|
||||||
pink: $pink,
|
|
||||||
red: $red,
|
|
||||||
orange: $orange,
|
|
||||||
yellow: $yellow,
|
|
||||||
green: $green,
|
|
||||||
teal: $teal,
|
|
||||||
cyan: $cyan,
|
|
||||||
white: $white,
|
|
||||||
gray: $gray-600,
|
|
||||||
gray-dark: $gray-800
|
|
||||||
);
|
|
||||||
|
|
||||||
$theme-colors: (
|
|
||||||
primary: $blue,
|
|
||||||
secondary: $gray-300,
|
|
||||||
success: $green,
|
|
||||||
info: $cyan,
|
|
||||||
warning: $yellow,
|
|
||||||
danger: $red,
|
|
||||||
light: $gray-100,
|
|
||||||
dark: $gray-800,
|
|
||||||
|
|
||||||
blue: $blue,
|
|
||||||
indigo: $indigo,
|
|
||||||
purple: $purple,
|
|
||||||
pink: $pink,
|
|
||||||
red: $red,
|
|
||||||
orange: $orange,
|
|
||||||
yellow: $yellow,
|
|
||||||
green: $green,
|
|
||||||
teal: $teal,
|
|
||||||
cyan: $cyan,
|
|
||||||
|
|
||||||
gray-100: $gray-100,
|
|
||||||
gray-200: $gray-200,
|
|
||||||
gray-300: $gray-300,
|
|
||||||
gray-400: $gray-400,
|
|
||||||
gray-500: $gray-500,
|
|
||||||
gray-600: $gray-600,
|
|
||||||
gray-700: $gray-700,
|
|
||||||
gray-800: $gray-800,
|
|
||||||
gray-900: $gray-900
|
|
||||||
);
|
|
||||||
|
|
||||||
// Options
|
|
||||||
//
|
|
||||||
// Quickly modify global styling by enabling or disabling optional features.
|
|
||||||
|
|
||||||
$enable-transitions: true;
|
|
||||||
$enable-rounded: false;
|
|
||||||
|
|
||||||
// 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;
|
|
||||||
$breadcrumb-margin-bottom: 1.5rem;
|
|
||||||
|
|
||||||
// Cards
|
|
||||||
|
|
||||||
$card-border-color: $gray-200;
|
|
||||||
$card-cap-bg: $gray-100;
|
|
||||||
|
|
||||||
// Dropdowns
|
|
||||||
|
|
||||||
$dropdown-padding-y: 0;
|
|
||||||
$dropdown-border-color: $gray-200;
|
|
||||||
$dropdown-divider-bg: $gray-100;
|
|
||||||
|
|
||||||
// Buttons
|
|
||||||
|
|
||||||
$btn-secondary-border: $gray-300;
|
|
||||||
|
|
||||||
// Progress bars
|
|
||||||
|
|
||||||
$progress-bg: $gray-100;
|
|
||||||
|
|
||||||
// Tables
|
|
||||||
|
|
||||||
$table-bg-accent: $gray-100;
|
|
||||||
$table-bg-hover: $gray-100;
|
|
||||||
|
|
||||||
// Forms
|
|
||||||
|
|
||||||
$input-group-addon-bg: $gray-100;
|
|
||||||
$input-border-color: $gray-200;
|
|
||||||
$input-group-addon-border-color: $gray-200;
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
// core overrides
|
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
// Variable overrides
|
||||||
@@ -1,27 +0,0 @@
|
|||||||
// scss-lint:disable all
|
|
||||||
.animated {
|
|
||||||
animation-duration: 1s;
|
|
||||||
// animation-fill-mode: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.infinite {
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.animated.hinge {
|
|
||||||
animation-duration: 2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fadeIn {
|
|
||||||
animation-name: fadeIn;
|
|
||||||
}
|
|
||||||
@@ -1,64 +0,0 @@
|
|||||||
.aside-menu {
|
|
||||||
z-index: $zindex-sticky - 1;
|
|
||||||
width: $aside-menu-width;
|
|
||||||
color: $aside-menu-color;
|
|
||||||
background: $aside-menu-bg;
|
|
||||||
@include borders($aside-menu-borders);
|
|
||||||
|
|
||||||
.nav-tabs {
|
|
||||||
border-color: $border-color;
|
|
||||||
.nav-link {
|
|
||||||
padding: $aside-menu-nav-padding-y $aside-menu-nav-padding-x;
|
|
||||||
color: $body-color;
|
|
||||||
border-top: 0;
|
|
||||||
&.active {
|
|
||||||
color: theme-color("primary");
|
|
||||||
border-right-color: $border-color;
|
|
||||||
border-left-color: $border-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.nav-item:first-child {
|
|
||||||
.nav-link {
|
|
||||||
border-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-content {
|
|
||||||
position: relative;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
border: 0;
|
|
||||||
border-top: 1px solid $border-color;
|
|
||||||
-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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-pane {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,51 +0,0 @@
|
|||||||
.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: margin-left $layout-transition-speed, margin-right $layout-transition-speed;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
margin-right: 0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// .avatar.avatar-lg {
|
|
||||||
//
|
|
||||||
// }
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
.badge-pill {
|
|
||||||
border-radius: $badge-pill-border-radius;
|
|
||||||
}
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
.breadcrumb-menu {
|
|
||||||
margin-left: auto;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-group {
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
padding: 0 $input-btn-padding-x;
|
|
||||||
color: $text-muted;
|
|
||||||
vertical-align: top;
|
|
||||||
border: 0;
|
|
||||||
|
|
||||||
&:hover, &.active {
|
|
||||||
color: $body-color;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.open {
|
|
||||||
.btn {
|
|
||||||
color: $body-color;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu {
|
|
||||||
min-width: 180px;
|
|
||||||
line-height: $line-height-base;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
.breadcrumb {
|
|
||||||
position: relative;
|
|
||||||
@include borders($breadcrumb-borders);
|
|
||||||
}
|
|
||||||
@@ -1,566 +0,0 @@
|
|||||||
button {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-transparent {
|
|
||||||
color: #fff;
|
|
||||||
background-color: transparent;
|
|
||||||
border-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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($input-btn-padding-y, $input-btn-padding-x, $font-size-base, $line-height-base, $btn-border-radius);
|
|
||||||
|
|
||||||
&.btn-lg {
|
|
||||||
@include button-social-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.btn-sm {
|
|
||||||
@include button-social-size($input-btn-padding-y-sm, $input-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%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,55 +0,0 @@
|
|||||||
.callout {
|
|
||||||
position: relative;
|
|
||||||
padding: 0 $spacer;
|
|
||||||
margin: $spacer 0;
|
|
||||||
border: 0 solid $border-color;
|
|
||||||
border-left-width: .25rem;
|
|
||||||
|
|
||||||
@if $enable-rounded {
|
|
||||||
border-radius: .25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-wrapper {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
left: 50%;
|
|
||||||
float: right;
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@each $color, $value in $theme-colors {
|
|
||||||
.callout-#{$color} {
|
|
||||||
border-left-color: $value;
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
color: $value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,193 +0,0 @@
|
|||||||
.card {
|
|
||||||
margin-bottom: 1.5 * $spacer;
|
|
||||||
|
|
||||||
// Cards with color accent
|
|
||||||
@each $color, $value in $theme-colors {
|
|
||||||
&.bg-#{$color} {
|
|
||||||
border-color: darken($value, 12.5%);
|
|
||||||
.card-header {
|
|
||||||
background-color: darken($value, 3%);
|
|
||||||
border-color: darken($value, 12.5%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-white .text-muted {
|
|
||||||
color: rgba(255,255,255,.6) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-header {
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav.nav-tabs {
|
|
||||||
margin-top: -$card-spacer-y;
|
|
||||||
margin-bottom: -$card-spacer-y;
|
|
||||||
border-bottom: 0;
|
|
||||||
|
|
||||||
.nav-item {
|
|
||||||
border-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
margin-top: - $input-btn-padding-y;
|
|
||||||
}
|
|
||||||
.btn-sm {
|
|
||||||
margin-top: - $input-btn-padding-y-sm;
|
|
||||||
}
|
|
||||||
.btn-lg {
|
|
||||||
margin-top: - $input-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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
[class*="card-outline-"] {
|
|
||||||
.card-body {
|
|
||||||
background: #fff !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.card-outline-top {
|
|
||||||
border-top-width: 2px;
|
|
||||||
border-right-color: $border-color;
|
|
||||||
border-bottom-color: $border-color;
|
|
||||||
border-left-color: $border-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Cards with color accent
|
|
||||||
@each $color, $value in $theme-colors {
|
|
||||||
.card-accent-#{$color} {
|
|
||||||
@include card-accent-variant($value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Card Actions
|
|
||||||
.card-header {
|
|
||||||
> i {
|
|
||||||
margin-right: $spacer / 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.r180 {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-group {
|
|
||||||
width: 230px;
|
|
||||||
margin: 6px;
|
|
||||||
|
|
||||||
.input-group-prepend, .input-group-append {
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
border-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-full {
|
|
||||||
margin-top: - $spacer;
|
|
||||||
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 {
|
|
||||||
|
|
||||||
&.cols-2 {
|
|
||||||
column-count: 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
&.drag, .drag {
|
|
||||||
cursor: move;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-placeholder {
|
|
||||||
background: rgba(0,0,0,.025);
|
|
||||||
border: 1px dashed $gray-300;
|
|
||||||
}
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
.chart-wrapper {
|
|
||||||
canvas {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// scss-lint:disable QualifyingElement
|
|
||||||
base-chart.chart {
|
|
||||||
display: block !important;
|
|
||||||
}
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
// Temp fix for reactstrap
|
|
||||||
.app-header {
|
|
||||||
.navbar-nav {
|
|
||||||
.dropdown-menu-right {
|
|
||||||
right: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,69 +0,0 @@
|
|||||||
// 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu-lg {
|
|
||||||
width: 250px;
|
|
||||||
}
|
|
||||||
.app-header {
|
|
||||||
.navbar-nav {
|
|
||||||
.dropdown-menu {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
// Menu positioning
|
|
||||||
//
|
|
||||||
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
|
|
||||||
// menu with the parent.
|
|
||||||
.dropdown-menu-right {
|
|
||||||
right: 0;
|
|
||||||
left: auto; // Reset the default from `.dropdown-menu`
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu-left {
|
|
||||||
right: auto;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
.app-footer {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 $spacer;
|
|
||||||
color: $footer-color;
|
|
||||||
background: $footer-bg;
|
|
||||||
@include borders($footer-borders);
|
|
||||||
}
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
.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;
|
|
||||||
}
|
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
.input-group-prepend,
|
|
||||||
.input-group-append {
|
|
||||||
white-space: nowrap;
|
|
||||||
vertical-align: middle; // Match the inputs
|
|
||||||
}
|
|
||||||
@@ -1,387 +0,0 @@
|
|||||||
// IE10&11 Flexbox fix
|
|
||||||
@media all and (-ms-high-contrast:none) {
|
|
||||||
html {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// app-dashboard and app-root are Angular2+ selectors. You can add here your own selectors if you need.
|
|
||||||
.app,
|
|
||||||
app-dashboard,
|
|
||||||
app-root {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-header {
|
|
||||||
flex: 0 0 $navbar-height;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-footer {
|
|
||||||
flex: 0 0 $footer-height;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-body {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-grow: 1;
|
|
||||||
overflow-x: hidden;
|
|
||||||
|
|
||||||
.main {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
// $sidebar-width is the width of the columns
|
|
||||||
flex: 0 0 $sidebar-width;
|
|
||||||
// put the nav on the left
|
|
||||||
order: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.aside-menu {
|
|
||||||
// $aside-menu-width is the width of the columns
|
|
||||||
flex: 0 0 $aside-menu-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// header
|
|
||||||
//
|
|
||||||
.header-fixed {
|
|
||||||
.app-header {
|
|
||||||
position: fixed;
|
|
||||||
z-index: $zindex-sticky;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.app-body {
|
|
||||||
margin-top: $navbar-height;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Sidebar
|
|
||||||
//
|
|
||||||
.sidebar-hidden {
|
|
||||||
.sidebar {
|
|
||||||
margin-left: - $sidebar-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-fixed {
|
|
||||||
.sidebar {
|
|
||||||
position: fixed;
|
|
||||||
z-index: $zindex-sticky - 1;
|
|
||||||
width: $sidebar-width;
|
|
||||||
height: calc(100vh - #{$navbar-height});
|
|
||||||
// margin-top: - $navbar-height;
|
|
||||||
|
|
||||||
// .sidebar-nav {
|
|
||||||
// height: calc(100vh - #{$navbar-height});
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
|
|
||||||
.main, .app-footer {
|
|
||||||
margin-left: $sidebar-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.sidebar-hidden {
|
|
||||||
.main, .app-footer {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-off-canvas {
|
|
||||||
.sidebar {
|
|
||||||
position: fixed;
|
|
||||||
z-index: $zindex-sticky - 1;
|
|
||||||
height: calc(100vh - #{$navbar-height});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include media-breakpoint-up(lg) {
|
|
||||||
.sidebar-compact {
|
|
||||||
.sidebar {
|
|
||||||
flex: 0 0 $sidebar-compact-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.sidebar-hidden {
|
|
||||||
.sidebar {
|
|
||||||
margin-left: - $sidebar-compact-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.sidebar-fixed {
|
|
||||||
.main, .app-footer {
|
|
||||||
margin-left: $sidebar-compact-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
width: $sidebar-compact-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.sidebar-hidden {
|
|
||||||
.main, .app-footer {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.sidebar-minimizer {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-minimized {
|
|
||||||
.sidebar {
|
|
||||||
flex: 0 0 $sidebar-minimized-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.sidebar-hidden {
|
|
||||||
.sidebar {
|
|
||||||
margin-left: - $sidebar-minimized-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.sidebar-fixed {
|
|
||||||
.main, .app-footer {
|
|
||||||
margin-left: $sidebar-minimized-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
width: $sidebar-minimized-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.sidebar-hidden {
|
|
||||||
.main, .app-footer {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Aside Menu
|
|
||||||
//
|
|
||||||
.aside-menu-hidden {
|
|
||||||
.aside-menu {
|
|
||||||
margin-right: - $aside-menu-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.aside-menu-fixed {
|
|
||||||
.aside-menu {
|
|
||||||
position: fixed;
|
|
||||||
right: 0;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.tab-content {
|
|
||||||
height: calc(100vh - #{$aside-menu-nav-padding-y * 2 + $font-size-base} - #{$navbar-height});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.main, .app-footer {
|
|
||||||
margin-right: $aside-menu-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.aside-menu-hidden {
|
|
||||||
.main, .app-footer {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.aside-menu-off-canvas {
|
|
||||||
.aside-menu {
|
|
||||||
position: fixed;
|
|
||||||
right: 0;
|
|
||||||
z-index: $zindex-sticky - 1;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.tab-content {
|
|
||||||
height: calc(100vh - #{$aside-menu-nav-padding-y * 2 + $font-size-base} - #{$navbar-height});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Breadcrumb
|
|
||||||
//
|
|
||||||
.breadcrumb-fixed {
|
|
||||||
.main {
|
|
||||||
$breadcrumb-height: 2 * $breadcrumb-padding-y + $font-size-base + 1.5 * $spacer;
|
|
||||||
padding-top: $breadcrumb-height;
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumb {
|
|
||||||
position: fixed;
|
|
||||||
top: $navbar-height;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: $zindex-sticky - 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
// if sidebar + main + aside
|
|
||||||
.main:nth-child(2) {
|
|
||||||
.breadcrumb {
|
|
||||||
right: $aside-menu-width;
|
|
||||||
left: $sidebar-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// if sidebar + main
|
|
||||||
.main:first-child {
|
|
||||||
.breadcrumb {
|
|
||||||
right: $aside-menu-width;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// if main + aside
|
|
||||||
.main:last-child {
|
|
||||||
.breadcrumb {
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.sidebar-minimized {
|
|
||||||
.main .breadcrumb {
|
|
||||||
left: $sidebar-minimized-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.sidebar-hidden, &.sidebar-off-canvas {
|
|
||||||
.main .breadcrumb {
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.aside-menu-hidden, &.aside-menu-off-canvas {
|
|
||||||
.main .breadcrumb {
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Footer
|
|
||||||
//
|
|
||||||
.footer-fixed {
|
|
||||||
.app-footer {
|
|
||||||
position: fixed;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: $zindex-sticky;
|
|
||||||
height: $footer-height;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-body {
|
|
||||||
margin-bottom: $footer-height;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Animations
|
|
||||||
//
|
|
||||||
.app-header,
|
|
||||||
.app-footer,
|
|
||||||
.sidebar,
|
|
||||||
.main,
|
|
||||||
.aside-menu {
|
|
||||||
transition: margin-left $layout-transition-speed, margin-right $layout-transition-speed, width $layout-transition-speed, flex $layout-transition-speed;
|
|
||||||
}
|
|
||||||
.sidebar-nav {
|
|
||||||
transition: width $layout-transition-speed;
|
|
||||||
}
|
|
||||||
.breadcrumb {
|
|
||||||
transition: left $layout-transition-speed, right $layout-transition-speed, width $layout-transition-speed;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Mobile layout
|
|
||||||
//
|
|
||||||
|
|
||||||
@include media-breakpoint-down(md) {
|
|
||||||
.app-header.navbar {
|
|
||||||
position: fixed !important;
|
|
||||||
z-index: $zindex-sticky;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
background-color: $navbar-brand-bg;
|
|
||||||
@include borders($navbar-brand-border);
|
|
||||||
|
|
||||||
.navbar-toggler {
|
|
||||||
@if (lightness( $navbar-brand-bg ) > 40) {
|
|
||||||
color: $navbar-color;
|
|
||||||
} @else {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-brand {
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
margin-left: - ($navbar-brand-width / 2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-body {
|
|
||||||
margin-top: $navbar-height;
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumb-fixed {
|
|
||||||
.main:nth-child(2) .breadcrumb {
|
|
||||||
right: auto;
|
|
||||||
left: auto;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
position: fixed;
|
|
||||||
z-index: $zindex-sticky - 1;
|
|
||||||
width: $mobile-sidebar-width;
|
|
||||||
height: calc(100vh - #{$navbar-height});
|
|
||||||
margin-left: - $mobile-sidebar-width;
|
|
||||||
|
|
||||||
.sidebar-nav,
|
|
||||||
.nav {
|
|
||||||
width: $mobile-sidebar-width;
|
|
||||||
min-height: calc(100vh - #{$navbar-height});
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-minimizer {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.main, .app-footer {
|
|
||||||
margin-left: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// .aside-menu {
|
|
||||||
// margin-right: - $aside-menu-width;
|
|
||||||
// }
|
|
||||||
|
|
||||||
.sidebar-hidden {
|
|
||||||
.sidebar {
|
|
||||||
margin-left: - $mobile-sidebar-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-mobile-show {
|
|
||||||
.sidebar {
|
|
||||||
width: $mobile-sidebar-width;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main {
|
|
||||||
margin-right: - $mobile-sidebar-width !important;
|
|
||||||
margin-left: $mobile-sidebar-width !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,128 +0,0 @@
|
|||||||
// Angular Version
|
|
||||||
// Make clicks pass-through
|
|
||||||
// scss-lint:disable all
|
|
||||||
#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: theme-color("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: theme-color("primary");
|
|
||||||
}
|
|
||||||
@@ -1,116 +0,0 @@
|
|||||||
@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 sidebar-width($borders, $width) {
|
|
||||||
$sidebar-width: $width;
|
|
||||||
|
|
||||||
@each $border in $borders {
|
|
||||||
$direction: nth($border, 1);
|
|
||||||
@if $direction == "all" {
|
|
||||||
$size: map-get(map-get($borders, $direction), size);
|
|
||||||
$sidebar-width: ($sidebar-width - (2 * $size));
|
|
||||||
} @else if $direction == "right" {
|
|
||||||
$size: map-get(map-get($borders, $direction), size);
|
|
||||||
$sidebar-width: $sidebar-width - $size;
|
|
||||||
} @else if $direction == "left" {
|
|
||||||
$size: map-get(map-get($borders, $direction), size);
|
|
||||||
$sidebar-width: $sidebar-width - $size;
|
|
||||||
}
|
|
||||||
width: $sidebar-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@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%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin card-accent-variant($color) {
|
|
||||||
border-top-width: 2px;
|
|
||||||
border-top-color: $color;
|
|
||||||
}
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
@each $color, $value in $theme-colors {
|
|
||||||
.modal-#{$color} {
|
|
||||||
|
|
||||||
.modal-content {
|
|
||||||
border-color: $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header {
|
|
||||||
color: #fff;
|
|
||||||
background-color: $value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
.nav-tabs {
|
|
||||||
.nav-link {
|
|
||||||
color: $gray-600;
|
|
||||||
&:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
&.active {
|
|
||||||
color: $gray-800;
|
|
||||||
background: #fff;
|
|
||||||
border-color: $border-color;
|
|
||||||
border-bottom-color: #fff;
|
|
||||||
&:focus {
|
|
||||||
background: #fff;
|
|
||||||
border-color: $border-color;
|
|
||||||
border-bottom-color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-content {
|
|
||||||
margin-top: -1px;
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid $border-color;
|
|
||||||
.tab-pane {
|
|
||||||
padding: $spacer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-block {
|
|
||||||
.tab-content {
|
|
||||||
margin-top: 0;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,127 +0,0 @@
|
|||||||
.app-header.navbar {
|
|
||||||
position: relative;
|
|
||||||
flex-direction: row;
|
|
||||||
height: $navbar-height;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
background-color: $navbar-bg;
|
|
||||||
@include borders($navbar-border);
|
|
||||||
|
|
||||||
.navbar-brand {
|
|
||||||
display: inline-block;
|
|
||||||
width: $navbar-brand-width;
|
|
||||||
height: $navbar-height;
|
|
||||||
padding: $navbar-padding-y $navbar-padding-x;
|
|
||||||
margin-right: 0;
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-toggler {
|
|
||||||
min-width: 50px;
|
|
||||||
padding: $navbar-toggler-padding-y 0;
|
|
||||||
|
|
||||||
&:hover .navbar-toggler-icon {
|
|
||||||
background-image: $navbar-toggler-icon-hover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-toggler-icon {
|
|
||||||
height: 23px;
|
|
||||||
background-image: $navbar-toggler-icon;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-nav {
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item {
|
|
||||||
position: relative;
|
|
||||||
min-width: 50px;
|
|
||||||
margin: 0 !important;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
button {
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-link {
|
|
||||||
padding-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
background: 0;
|
|
||||||
border: 0;
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
margin-top: -16px;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .img-avatar {
|
|
||||||
height: $navbar-height - 20px;
|
|
||||||
margin: 0 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-menu {
|
|
||||||
padding-bottom: 0;
|
|
||||||
line-height: $line-height-base;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-item {
|
|
||||||
min-width: 180px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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);
|
|
||||||
}
|
|
||||||
|
|
||||||
@include media-breakpoint-up(lg) {
|
|
||||||
.brand-minimized {
|
|
||||||
.app-header.navbar {
|
|
||||||
.navbar-brand {
|
|
||||||
width: $navbar-brand-minimized-width;
|
|
||||||
background-color: $navbar-brand-minimized-bg;
|
|
||||||
background-image: $navbar-brand-minimized-logo;
|
|
||||||
background-size: $navbar-brand-minimized-logo-size;
|
|
||||||
@include borders($navbar-brand-minimized-border);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
// scss-lint:disable QualifyingElement
|
|
||||||
hr.transparent {
|
|
||||||
border-top: 1px solid transparent;
|
|
||||||
}
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
.progress-xs {
|
|
||||||
height: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-sm {
|
|
||||||
height: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// White progress bar
|
|
||||||
.progress-white {
|
|
||||||
background-color: rgba(255,255,255,.2) !important;
|
|
||||||
.progress-bar {
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,281 +0,0 @@
|
|||||||
//
|
|
||||||
// RTL Support
|
|
||||||
//
|
|
||||||
// scss-lint:disable NestingDepth, SelectorDepth
|
|
||||||
*[dir="rtl"] {
|
|
||||||
direction: rtl;
|
|
||||||
unicode-bidi: embed;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
-webkit-padding-start: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
table tr th {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Breadcrumb
|
|
||||||
|
|
||||||
.breadcrumb-item {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.breadcrumb-menu {
|
|
||||||
right: auto;
|
|
||||||
left: $breadcrumb-padding-x;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Dropdown
|
|
||||||
.dropdown-item {
|
|
||||||
text-align: right;
|
|
||||||
|
|
||||||
i {
|
|
||||||
margin-right: -10px;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
right: auto;
|
|
||||||
left: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Sidebar
|
|
||||||
//
|
|
||||||
.sidebar-hidden {
|
|
||||||
.sidebar {
|
|
||||||
margin-right: - $sidebar-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-fixed {
|
|
||||||
.main, .app-footer {
|
|
||||||
margin-right: $sidebar-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.sidebar-hidden {
|
|
||||||
.main, .app-footer {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-minimized {
|
|
||||||
.sidebar {
|
|
||||||
flex: 0 0 $sidebar-minimized-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.sidebar-hidden {
|
|
||||||
.sidebar {
|
|
||||||
margin-right: - $sidebar-minimized-width;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.sidebar-fixed {
|
|
||||||
.main, .app-footer {
|
|
||||||
margin-right: $sidebar-minimized-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.sidebar-hidden {
|
|
||||||
.main, .app-footer {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Aside Menu
|
|
||||||
//
|
|
||||||
.aside-menu-hidden {
|
|
||||||
.aside-menu {
|
|
||||||
margin-right: 0;
|
|
||||||
margin-left: - $aside-menu-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.aside-menu-fixed {
|
|
||||||
.aside-menu {
|
|
||||||
right: auto;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main, .app-footer {
|
|
||||||
//margin-right: 0;
|
|
||||||
margin-left: $aside-menu-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.aside-menu-hidden {
|
|
||||||
.main, .app-footer {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.aside-menu-off-canvas {
|
|
||||||
.aside-menu {
|
|
||||||
position: fixed;
|
|
||||||
right: 0;
|
|
||||||
z-index: $zindex-sticky - 1;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.tab-content {
|
|
||||||
height: calc(100vh - #{$aside-menu-nav-padding-y * 2 + $font-size-base} - #{$navbar-height});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sidebar Menu
|
|
||||||
.sidebar {
|
|
||||||
.sidebar-nav {
|
|
||||||
.nav {
|
|
||||||
.nav-item {
|
|
||||||
.nav-link {
|
|
||||||
direction: rtl;
|
|
||||||
i {
|
|
||||||
margin: 0 0 0 ($sidebar-nav-link-padding-x / 2);
|
|
||||||
}
|
|
||||||
.badge {
|
|
||||||
float: left;
|
|
||||||
margin-top: 2px;
|
|
||||||
// margin-left: 10px;
|
|
||||||
}
|
|
||||||
&.nav-dropdown-toggle {
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
right: auto !important;
|
|
||||||
left: $sidebar-nav-link-padding-x;
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.nav-dropdown {
|
|
||||||
&.open {
|
|
||||||
> .nav-link.nav-dropdown-toggle::before {
|
|
||||||
transform: rotate(270deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-minimized .sidebar {
|
|
||||||
.nav-link {
|
|
||||||
padding-right: 0;
|
|
||||||
i {
|
|
||||||
float: right;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.badge {
|
|
||||||
right: auto;
|
|
||||||
left: 15px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.nav > .nav-dropdown {
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
> .nav-dropdown-items {
|
|
||||||
right: $sidebar-minimized-width;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Horizontal bars
|
|
||||||
.horizontal-bars {
|
|
||||||
|
|
||||||
li {
|
|
||||||
|
|
||||||
.bars {
|
|
||||||
padding-right: 100px;
|
|
||||||
padding-left: 0;
|
|
||||||
|
|
||||||
.progress:first-child {
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.type-2 {
|
|
||||||
|
|
||||||
li {
|
|
||||||
|
|
||||||
i {
|
|
||||||
margin-right: 5px;
|
|
||||||
margin-left: $spacer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.value {
|
|
||||||
float: left;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bars {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Icon list
|
|
||||||
.icons-list {
|
|
||||||
|
|
||||||
li {
|
|
||||||
position: relative;
|
|
||||||
height: 40px;
|
|
||||||
vertical-align: middle;
|
|
||||||
|
|
||||||
i {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.desc {
|
|
||||||
margin-right: 50px;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.value {
|
|
||||||
right: auto;
|
|
||||||
left: 45px;
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
strong {
|
|
||||||
display: block;
|
|
||||||
margin-top: -3px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.actions {
|
|
||||||
right: auto;
|
|
||||||
left: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Callouts
|
|
||||||
.callout {
|
|
||||||
border: 0 solid $border-color;
|
|
||||||
border-right-width: .25rem;
|
|
||||||
|
|
||||||
@each $color, $value in $theme-colors {
|
|
||||||
&.callout-#{$color} {
|
|
||||||
border-right-color: $value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.chart-wrapper {
|
|
||||||
left: 0;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.callout-default {
|
|
||||||
border-right-color: $text-muted;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,454 +0,0 @@
|
|||||||
// scss-lint:disable NestingDepth, SelectorDepth
|
|
||||||
.sidebar {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: $sidebar-padding;
|
|
||||||
color: $sidebar-color;
|
|
||||||
background: $sidebar-bg;
|
|
||||||
@include borders($sidebar-borders);
|
|
||||||
|
|
||||||
.sidebar-close {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
display: none;
|
|
||||||
padding: 0 $spacer;
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 800;
|
|
||||||
line-height: $navbar-height;
|
|
||||||
color: $sidebar-color;
|
|
||||||
background: 0;
|
|
||||||
border: 0;
|
|
||||||
opacity: .8;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Will be added soon
|
|
||||||
// .sidebar-brand { }
|
|
||||||
|
|
||||||
.sidebar-header {
|
|
||||||
flex: 0 0 $sidebar-header-height;
|
|
||||||
padding: $sidebar-header-padding-y $sidebar-header-padding-x;
|
|
||||||
text-align: center;
|
|
||||||
background: $sidebar-header-bg;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-form .form-control {
|
|
||||||
color: $sidebar-form-color;
|
|
||||||
background: $sidebar-form-bg;
|
|
||||||
border: $sidebar-form-border;
|
|
||||||
|
|
||||||
&::placeholder {
|
|
||||||
color: $sidebar-form-placeholder-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-nav {
|
|
||||||
position: relative;
|
|
||||||
flex: 1;
|
|
||||||
overflow-x: hidden;
|
|
||||||
overflow-y: auto;
|
|
||||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
|
||||||
@include sidebar-width($sidebar-borders, $sidebar-width);
|
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
position: absolute;
|
|
||||||
width: 10px;
|
|
||||||
margin-left: -10px;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::-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-thumb {
|
|
||||||
height: 50px;
|
|
||||||
background-color: darken($sidebar-bg, 10%);
|
|
||||||
background-clip: content-box;
|
|
||||||
border-color: transparent;
|
|
||||||
border-style: solid;
|
|
||||||
border-width: 1px 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav {
|
|
||||||
@include sidebar-width($sidebar-borders, $sidebar-width);
|
|
||||||
flex-direction: column;
|
|
||||||
min-height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-divider, .divider {
|
|
||||||
height: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item {
|
|
||||||
position: relative;
|
|
||||||
margin: 0;
|
|
||||||
transition: background .3s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-dropdown-items {
|
|
||||||
max-height: 0;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
overflow-y: hidden;
|
|
||||||
transition: max-height .3s ease-in-out;
|
|
||||||
|
|
||||||
.nav-item {
|
|
||||||
padding: 0;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
display: inline-block;
|
|
||||||
width: 20px;
|
|
||||||
margin: 0 ($sidebar-nav-link-padding-x / 2) 0 0;
|
|
||||||
font-size: 14px;
|
|
||||||
color: $sidebar-nav-link-icon-color;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
float: right;
|
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $sidebar-nav-link-hover-color;
|
|
||||||
background: $sidebar-nav-link-hover-bg;
|
|
||||||
@include borders($sidebar-nav-link-hover-borders);
|
|
||||||
|
|
||||||
i {
|
|
||||||
color: $sidebar-nav-link-hover-icon-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.nav-dropdown-toggle::before {
|
|
||||||
background-image: $sidebar-nav-dropdown-indicator-hover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@each $color, $value in $theme-colors {
|
|
||||||
&.nav-link-#{$color} {
|
|
||||||
background: $value;
|
|
||||||
i {
|
|
||||||
color: rgba(255,255,255,.7);
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
background: darken($value,5%) !important;
|
|
||||||
i {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ex. <a class="nav-link nav-dropdown-toggle" href="#">Components</a>
|
|
||||||
.nav-dropdown-toggle {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
right: $sidebar-nav-link-padding-x;
|
|
||||||
display: block;
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
padding: 0;
|
|
||||||
margin-top: -4px;
|
|
||||||
content: "";
|
|
||||||
background-image: $sidebar-nav-dropdown-indicator;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
transition: transform .3s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ex. <li class="nav-item nav-dropdown">
|
|
||||||
.nav-dropdown.open {
|
|
||||||
background: $sidebar-nav-dropdown-bg;
|
|
||||||
@include borders($sidebar-nav-dropdown-borders);
|
|
||||||
@if $enable-sidebar-nav-rounded {
|
|
||||||
border-radius: $border-radius;
|
|
||||||
}
|
|
||||||
> .nav-dropdown-items {
|
|
||||||
max-height: 1500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-link {
|
|
||||||
color: $sidebar-nav-dropdown-color;
|
|
||||||
border-left: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .nav-link.nav-dropdown-toggle::before {
|
|
||||||
transform: rotate(-90deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-dropdown.open {
|
|
||||||
border-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-label {
|
|
||||||
display: block;
|
|
||||||
padding: ($sidebar-nav-link-padding-y / 8) $sidebar-nav-link-padding-x;
|
|
||||||
color: $sidebar-nav-title-color;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $sidebar-color;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
width: 20px;
|
|
||||||
margin: -3px ($sidebar-nav-link-padding-x / 2) 0 0;
|
|
||||||
font-size: 10px;
|
|
||||||
color: $sidebar-nav-link-icon-color;
|
|
||||||
text-align: center;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@if (lightness( $sidebar-bg ) < 40) {
|
|
||||||
.progress {
|
|
||||||
background-color: lighten($sidebar-bg, 15%) !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-footer {
|
|
||||||
flex: 0 0 $sidebar-footer-height;
|
|
||||||
padding: $sidebar-footer-padding-y $sidebar-footer-padding-x;
|
|
||||||
background: $sidebar-footer-bg;
|
|
||||||
@include borders($sidebar-footer-borders);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-minimizer {
|
|
||||||
position: relative;
|
|
||||||
flex: 0 0 $sidebar-minimizer-height;
|
|
||||||
background-color: $sidebar-minimizer-bg;
|
|
||||||
border: 0;
|
|
||||||
@include borders($sidebar-minimizer-borders);
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
width: $sidebar-minimizer-height;
|
|
||||||
height: $sidebar-minimizer-height;
|
|
||||||
content: "";
|
|
||||||
background-image: $sidebar-minimizer-indicator;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
background-size: $sidebar-minimizer-height / 4;
|
|
||||||
transition: .3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&.focus {
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $sidebar-minimizer-hover-bg;
|
|
||||||
&::before {
|
|
||||||
background-image: $sidebar-minimizer-hover-indicator;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@include media-breakpoint-up(lg) {
|
|
||||||
.sidebar-compact {
|
|
||||||
.sidebar {
|
|
||||||
.sidebar-nav {
|
|
||||||
@include sidebar-width($sidebar-borders, $sidebar-compact-width);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav {
|
|
||||||
@include sidebar-width($sidebar-borders, $sidebar-compact-width);
|
|
||||||
|
|
||||||
.nav-title {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item {
|
|
||||||
width: $sidebar-compact-width;
|
|
||||||
border-left: 0 !important;
|
|
||||||
|
|
||||||
.nav-link {
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
i {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
margin: $spacer / 4 0;
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
position: absolute;
|
|
||||||
top: 18px;
|
|
||||||
right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.nav-dropdown-toggle {
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
top: 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Minimized Sidebar
|
|
||||||
.sidebar-minimized {
|
|
||||||
.hidden-cn {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.sidebar {
|
|
||||||
z-index: $zindex-sticky - 1;
|
|
||||||
|
|
||||||
.sidebar-nav {
|
|
||||||
overflow: visible;
|
|
||||||
@include sidebar-width($sidebar-borders, $sidebar-minimized-width);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav {
|
|
||||||
@include sidebar-width($sidebar-borders, $sidebar-minimized-width);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-divider, .divider,
|
|
||||||
.nav-title,
|
|
||||||
.sidebar-footer,
|
|
||||||
.sidebar-form,
|
|
||||||
.sidebar-header {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-minimizer::before {
|
|
||||||
width: 100%;
|
|
||||||
transform: rotate(-180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item {
|
|
||||||
width: $sidebar-minimized-width;
|
|
||||||
overflow: hidden;
|
|
||||||
border-left: 0 !important;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
width: $sidebar-width + $sidebar-minimized-width;
|
|
||||||
overflow: visible;
|
|
||||||
|
|
||||||
> .nav-link {
|
|
||||||
background: $sidebar-nav-link-hover-bg;
|
|
||||||
|
|
||||||
i {
|
|
||||||
color: $sidebar-nav-link-hover-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-link {
|
|
||||||
position: relative;
|
|
||||||
padding-left: 0;
|
|
||||||
margin: 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
border-left: 0 !important;
|
|
||||||
|
|
||||||
i {
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
width: $sidebar-minimized-height;
|
|
||||||
// padding: 0;
|
|
||||||
// margin: 0 !important;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
position: absolute;
|
|
||||||
right: 15px;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
width: $sidebar-width + $sidebar-minimized-width;
|
|
||||||
background: $sidebar-nav-link-hover-bg;
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.nav-dropdown-toggle::before {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-dropdown-items {
|
|
||||||
.nav-item {
|
|
||||||
width: $sidebar-width;
|
|
||||||
|
|
||||||
.nav-link {
|
|
||||||
width: $sidebar-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav > .nav-dropdown {
|
|
||||||
> .nav-dropdown-items {
|
|
||||||
display: none;
|
|
||||||
max-height: 1000px;
|
|
||||||
background: $sidebar-bg;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $sidebar-nav-link-hover-bg;
|
|
||||||
> .nav-dropdown-items {
|
|
||||||
position: absolute;
|
|
||||||
left: $sidebar-minimized-width;
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,301 +0,0 @@
|
|||||||
@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-100;
|
|
||||||
} @else {
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
border: 1px solid $border-color;
|
|
||||||
border-radius: 2px;
|
|
||||||
transition: opacity background .15s ease-out;
|
|
||||||
}
|
|
||||||
@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;
|
|
||||||
transition: inherit;
|
|
||||||
}
|
|
||||||
.switch-label::before {
|
|
||||||
right: 1px;
|
|
||||||
color: $gray-200;
|
|
||||||
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;
|
|
||||||
transition: left .15s ease-out;
|
|
||||||
@if $type == ddd {
|
|
||||||
border: 0;
|
|
||||||
box-shadow: 0 2px 5px rgba(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 $color, $value in $theme-colors {
|
|
||||||
//normal style
|
|
||||||
.switch-#{$color} {
|
|
||||||
@include switch-variant($value);
|
|
||||||
}
|
|
||||||
//outline style
|
|
||||||
.switch-#{$color}-outline {
|
|
||||||
@include switch-outline-variant($value);
|
|
||||||
}
|
|
||||||
//outline alternative style
|
|
||||||
.switch-#{$color}-outline-alt {
|
|
||||||
@include switch-outline-alt-variant($value);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
.table-outline {
|
|
||||||
border: 1px solid $table-border-color;
|
|
||||||
|
|
||||||
td {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-align-middle {
|
|
||||||
|
|
||||||
td {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-clear {
|
|
||||||
td {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,37 +0,0 @@
|
|||||||
.pagination-datatables, .pagination {
|
|
||||||
li {
|
|
||||||
@extend .page-item;
|
|
||||||
|
|
||||||
a {
|
|
||||||
@extend .page-link;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.label-pill {
|
|
||||||
border-radius: 1rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// temp fix for Vue & React
|
|
||||||
|
|
||||||
// Open state for the dropdown
|
|
||||||
.open, .show {
|
|
||||||
// Remove the outline when :focus is triggered
|
|
||||||
> a {
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// navbar dropdown fix
|
|
||||||
.navbar .dropdown-toggle {
|
|
||||||
@extend .nav-link;
|
|
||||||
|
|
||||||
.img-avatar {
|
|
||||||
height: $navbar-height - 20px;
|
|
||||||
margin: 0 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-block {
|
|
||||||
@extend .card-body;
|
|
||||||
}
|
|
||||||
@@ -1,36 +0,0 @@
|
|||||||
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;
|
|
||||||
}
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
@import "utilities/background";
|
|
||||||
@import "utilities/borders";
|
|
||||||
@import "utilities/display";
|
|
||||||
@@ -1,219 +0,0 @@
|
|||||||
// scss-lint:disable all
|
|
||||||
// Core Admin Variables
|
|
||||||
|
|
||||||
$enable-sidebar-nav-rounded: false !default;
|
|
||||||
|
|
||||||
$border-color: $gray-200 !default;
|
|
||||||
$layout-transition-speed: .25s !default;
|
|
||||||
|
|
||||||
// Social Colors
|
|
||||||
|
|
||||||
$facebook: #3b5998 !default;
|
|
||||||
$twitter: #00aced !default;
|
|
||||||
$linkedin: #4875b4 !default;
|
|
||||||
$google-plus: #d34836 !default;
|
|
||||||
$flickr: #ff0084 !default;
|
|
||||||
$tumblr: #32506d !default;
|
|
||||||
$xing: #026466 !default;
|
|
||||||
$github: #4183c4 !default;
|
|
||||||
$html5: #e34f26 !default;
|
|
||||||
$openid: #f78c40 !default;
|
|
||||||
$stack-overflow: #fe7a15 !default;
|
|
||||||
$youtube: #b00 !default;
|
|
||||||
$css3: #0170ba !default;
|
|
||||||
$dribbble: #ea4c89 !default;
|
|
||||||
$google-plus: #bb4b39 !default;
|
|
||||||
$instagram: #517fa4 !default;
|
|
||||||
$pinterest: #cb2027 !default;
|
|
||||||
$vk: #45668e !default;
|
|
||||||
$yahoo: #400191 !default;
|
|
||||||
$behance: #1769ff !default;
|
|
||||||
$dropbox: #007ee5 !default;
|
|
||||||
$reddit: #ff4500 !default;
|
|
||||||
$spotify: #7ab800 !default;
|
|
||||||
$vine: #00bf8f !default;
|
|
||||||
$foursquare: #1073af !default;
|
|
||||||
$vimeo: #aad450 !default;
|
|
||||||
|
|
||||||
// Navbar
|
|
||||||
|
|
||||||
$navbar-height: 55px !default;
|
|
||||||
$navbar-bg: #fff !default;
|
|
||||||
$navbar-border: (
|
|
||||||
bottom: (
|
|
||||||
size: 1px,
|
|
||||||
style: solid,
|
|
||||||
color: $border-color
|
|
||||||
)
|
|
||||||
) !default;
|
|
||||||
$navbar-brand-width: 155px !default;
|
|
||||||
$navbar-brand-bg: #fff !default;
|
|
||||||
$navbar-brand-logo: url('../img/logo.png') !default;
|
|
||||||
$navbar-brand-logo-size: 70px auto !default;
|
|
||||||
$navbar-brand-border: (
|
|
||||||
bottom: (
|
|
||||||
size: 1px,
|
|
||||||
style: solid,
|
|
||||||
color: $border-color
|
|
||||||
)
|
|
||||||
) !default;
|
|
||||||
|
|
||||||
$navbar-brand-minimized-width: 50px !default;
|
|
||||||
$navbar-brand-minimized-bg: $navbar-brand-bg !default;
|
|
||||||
$navbar-brand-minimized-logo: url('../img/logo-symbol.png') !default;
|
|
||||||
$navbar-brand-minimized-logo-size: 24px !default;
|
|
||||||
$navbar-brand-minimized-border: $navbar-brand-border !default;
|
|
||||||
|
|
||||||
$navbar-color: $gray-600 !default;
|
|
||||||
$navbar-hover-color: $gray-800 !default;
|
|
||||||
$navbar-active-color: $gray-800 !default;
|
|
||||||
$navbar-disabled-color: $gray-300 !default;
|
|
||||||
|
|
||||||
$navbar-toggler-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
|
|
||||||
$navbar-toggler-icon-hover: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-hover-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
|
|
||||||
|
|
||||||
// Sidebar
|
|
||||||
|
|
||||||
$sidebar-width: 200px !default;
|
|
||||||
$sidebar-padding: 0 !default;
|
|
||||||
$sidebar-minimized-width: 50px !default;
|
|
||||||
$sidebar-minimized-height: $sidebar-minimized-width !default;
|
|
||||||
$sidebar-compact-width: 150px !default;
|
|
||||||
$sidebar-compact-height: $sidebar-compact-width !default;
|
|
||||||
$sidebar-color: #fff !default;
|
|
||||||
$sidebar-bg: $gray-800 !default;
|
|
||||||
$sidebar-borders: none !default;
|
|
||||||
$mobile-sidebar-width: 220px !default;
|
|
||||||
|
|
||||||
// Sidebar Header
|
|
||||||
|
|
||||||
$sidebar-header-height: auto !default;
|
|
||||||
$sidebar-header-bg: rgba(0,0,0,.2) !default;
|
|
||||||
$sidebar-header-padding-y: .75rem !default;
|
|
||||||
$sidebar-header-padding-x: 1rem !default;
|
|
||||||
|
|
||||||
// Sidebar Form
|
|
||||||
|
|
||||||
$sidebar-form-border: 0 !default;
|
|
||||||
$sidebar-form-bg: darken($sidebar-bg,10%) !default;
|
|
||||||
$sidebar-form-color: #fff !default;
|
|
||||||
$sidebar-form-placeholder-color: rgba(255,255,255,.7) !default;
|
|
||||||
|
|
||||||
// Sidebar Navigation
|
|
||||||
|
|
||||||
$sidebar-nav-color: #fff !default;
|
|
||||||
$sidebar-nav-title-padding-y: .75rem !default;
|
|
||||||
$sidebar-nav-title-padding-x: 1rem !default;
|
|
||||||
$sidebar-nav-title-color: $gray-200 !default;
|
|
||||||
$sidebar-nav-link-padding-y: .75rem !default;
|
|
||||||
$sidebar-nav-link-padding-x: 1rem !default;
|
|
||||||
$sidebar-nav-link-color: #fff !default;
|
|
||||||
$sidebar-nav-link-bg: transparent !default;
|
|
||||||
$sidebar-nav-link-icon-color: $gray-600 !default;
|
|
||||||
$sidebar-nav-link-borders: 0 !default;
|
|
||||||
|
|
||||||
$sidebar-nav-link-hover-color: #fff !default;
|
|
||||||
$sidebar-nav-link-hover-bg: theme-color("primary") !default;
|
|
||||||
$sidebar-nav-link-hover-icon-color: #fff !default;
|
|
||||||
$sidebar-nav-link-hover-borders: 0 !default;
|
|
||||||
|
|
||||||
$sidebar-nav-link-active-color: #fff !default;
|
|
||||||
$sidebar-nav-link-active-bg: lighten($sidebar-bg, 5%) !default;
|
|
||||||
$sidebar-nav-link-active-icon-color: theme-color("primary") !default;
|
|
||||||
$sidebar-nav-link-active-borders: 0 !default;
|
|
||||||
|
|
||||||
$sidebar-nav-dropdown-color: #fff !default;
|
|
||||||
$sidebar-nav-dropdown-bg: rgba(0,0,0,.2) !default;
|
|
||||||
$sidebar-nav-dropdown-borders: 0 !default;
|
|
||||||
$sidebar-nav-dropdown-indicator-color:$gray-600 !default;
|
|
||||||
$sidebar-nav-dropdown-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-nav-dropdown-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
|
||||||
$sidebar-nav-dropdown-indicator-hover-color:$sidebar-nav-link-hover-color;
|
|
||||||
$sidebar-nav-dropdown-indicator-hover:str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-nav-dropdown-indicator-hover-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
|
||||||
|
|
||||||
// Sidebar Footer
|
|
||||||
|
|
||||||
$sidebar-footer-height: auto !default;
|
|
||||||
$sidebar-footer-bg: rgba(0,0,0,.2) !default;
|
|
||||||
$sidebar-footer-padding-y: .75rem !default;
|
|
||||||
$sidebar-footer-padding-x: 1rem !default;
|
|
||||||
$sidebar-footer-borders: 0 !default;
|
|
||||||
|
|
||||||
// Sidebar Minimizer
|
|
||||||
|
|
||||||
$sidebar-minimizer-height: 50px !default;
|
|
||||||
$sidebar-minimizer-bg: rgba(0,0,0,.2) !default;
|
|
||||||
$sidebar-minimizer-borders: 0 !default;
|
|
||||||
$sidebar-minimizer-indicator-color: $gray-600 !default;
|
|
||||||
$sidebar-minimizer-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-minimizer-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
|
||||||
$sidebar-minimizer-hover-bg: rgba(0,0,0,.3) !default;
|
|
||||||
$sidebar-minimizer-hover-indicator-color:$sidebar-nav-link-hover-color !default;
|
|
||||||
$sidebar-minimizer-hover-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-minimizer-hover-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
|
||||||
|
|
||||||
|
|
||||||
// Top Navigation
|
|
||||||
|
|
||||||
$top-nav-bg: #fff !default;
|
|
||||||
$top-nav-color: $body-color !default;
|
|
||||||
$top-nav-borders: (
|
|
||||||
bottom: (
|
|
||||||
size: 1px,
|
|
||||||
style: solid,
|
|
||||||
color: $border-color
|
|
||||||
)
|
|
||||||
) !default;
|
|
||||||
$top-nav-ul-borders: (
|
|
||||||
all: (
|
|
||||||
size: 1px,
|
|
||||||
style: solid,
|
|
||||||
color: $border-color
|
|
||||||
)
|
|
||||||
) !default;
|
|
||||||
|
|
||||||
$top-nav-hover-color: #fff !default;
|
|
||||||
$top-nav-hover-bg: theme-color("primary") !default;
|
|
||||||
$top-nav-active-color: #fff !default;
|
|
||||||
$top-nav-active-bg: theme-color("primary") !default;
|
|
||||||
$top-nav-height: $navbar-height - 15px !default;
|
|
||||||
|
|
||||||
// Breadcrumb
|
|
||||||
$breadcrumb-borders: (
|
|
||||||
bottom: (
|
|
||||||
size: 1px,
|
|
||||||
style: solid,
|
|
||||||
color: $border-color
|
|
||||||
)
|
|
||||||
) !default;
|
|
||||||
|
|
||||||
// Aside
|
|
||||||
|
|
||||||
$aside-menu-width: 250px !default;
|
|
||||||
$aside-menu-color: $gray-800 !default;
|
|
||||||
$aside-menu-bg: #fff !default;
|
|
||||||
$aside-menu-borders: (
|
|
||||||
left: (
|
|
||||||
size: 1px,
|
|
||||||
style: solid,
|
|
||||||
color: $border-color
|
|
||||||
)
|
|
||||||
) !default;
|
|
||||||
|
|
||||||
$aside-menu-nav-padding-y: .75rem !default;
|
|
||||||
$aside-menu-nav-padding-x: 1rem !default;
|
|
||||||
|
|
||||||
// Footer
|
|
||||||
|
|
||||||
$footer-height: 50px !default;
|
|
||||||
$footer-bg: $gray-100 !default;
|
|
||||||
$footer-color: $body-color !default;
|
|
||||||
$footer-borders: (
|
|
||||||
top: (
|
|
||||||
size: 1px,
|
|
||||||
style: solid,
|
|
||||||
color: $border-color
|
|
||||||
)
|
|
||||||
) !default;
|
|
||||||
|
|
||||||
// Cards
|
|
||||||
|
|
||||||
$card-icon-bg: transparent !default;
|
|
||||||
$card-icon-color: $body-color !default;
|
|
||||||
@@ -1,253 +0,0 @@
|
|||||||
// .social-box
|
|
||||||
.social-box {
|
|
||||||
min-height: 160px;
|
|
||||||
margin-bottom: 2 * $card-spacer-y;
|
|
||||||
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-200;
|
|
||||||
|
|
||||||
@include border-radius($card-border-radius $card-border-radius 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;
|
|
||||||
|
|
||||||
.progress:first-child {
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.legend {
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
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;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,47 +0,0 @@
|
|||||||
// Import core styles
|
|
||||||
@import "variables";
|
|
||||||
@import "mixins";
|
|
||||||
|
|
||||||
// Additional typography
|
|
||||||
@import "typography";
|
|
||||||
|
|
||||||
// Animations
|
|
||||||
@import "animate";
|
|
||||||
|
|
||||||
// Components
|
|
||||||
@import "aside";
|
|
||||||
@import "avatars";
|
|
||||||
@import "badge";
|
|
||||||
@import "breadcrumb-menu";
|
|
||||||
@import "breadcrumb";
|
|
||||||
@import "buttons";
|
|
||||||
@import "callout";
|
|
||||||
@import "card";
|
|
||||||
@import "charts";
|
|
||||||
@import "dropdown";
|
|
||||||
@import "footer";
|
|
||||||
@import "grid";
|
|
||||||
@import "input-group";
|
|
||||||
@import "loading";
|
|
||||||
@import "modal";
|
|
||||||
@import "nav";
|
|
||||||
@import "navbar";
|
|
||||||
@import "progress";
|
|
||||||
@import "sidebar";
|
|
||||||
@import "switches";
|
|
||||||
@import "tables";
|
|
||||||
@import "widgets";
|
|
||||||
|
|
||||||
// Layout Options
|
|
||||||
@import "layout";
|
|
||||||
|
|
||||||
@import "others";
|
|
||||||
|
|
||||||
// Utility classes
|
|
||||||
@import "utilities";
|
|
||||||
|
|
||||||
// Temporary fixes
|
|
||||||
@import "temp";
|
|
||||||
|
|
||||||
// Right-to-left
|
|
||||||
@import "rtl";
|
|
||||||
@@ -1,8 +0,0 @@
|
|||||||
.bg-primary,
|
|
||||||
.bg-success,
|
|
||||||
.bg-info,
|
|
||||||
.bg-warning,
|
|
||||||
.bg-danger,
|
|
||||||
.bg-inverse {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
//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; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,18 +0,0 @@
|
|||||||
//
|
|
||||||
// Utilities for common `display` values
|
|
||||||
//
|
|
||||||
|
|
||||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
|
||||||
@include media-breakpoint-down($breakpoint) {
|
|
||||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
|
||||||
|
|
||||||
.d#{$infix}-down-none { display: none !important; }
|
|
||||||
// .d#{$infix}-inline { display: inline !important; }
|
|
||||||
// .d#{$infix}-inline-block { display: inline-block !important; }
|
|
||||||
// .d#{$infix}-block { display: block !important; }
|
|
||||||
// .d#{$infix}-table { display: table !important; }
|
|
||||||
// .d#{$infix}-table-cell { display: table-cell !important; }
|
|
||||||
// .d#{$infix}-flex { display: flex !important; }
|
|
||||||
// .d#{$infix}-inline-flex { display: inline-flex !important; }
|
|
||||||
}
|
|
||||||
}
|
|
||||||
+5
-19
@@ -1,22 +1,8 @@
|
|||||||
/*!
|
// If you want to override variables do it here
|
||||||
* CoreUI - Open Source Bootstrap Admin Template
|
@import "variables";
|
||||||
* @version v1.0.10
|
|
||||||
* @link http://coreui.io
|
|
||||||
* Copyright (c) 2018 creativeLabs Łukasz Holeczek
|
|
||||||
* @license MIT
|
|
||||||
*/
|
|
||||||
|
|
||||||
// Override Boostrap variables
|
// Import styles
|
||||||
@import "bootstrap-variables";
|
@import "~@coreui/coreui/scss/coreui";
|
||||||
|
|
||||||
// Import Bootstrap source files
|
// If you want to add something do it here
|
||||||
@import "node_modules/bootstrap/scss/bootstrap";
|
|
||||||
|
|
||||||
// Override core variables
|
|
||||||
@import "core-variables";
|
|
||||||
|
|
||||||
// Import core styles
|
|
||||||
@import "core/core";
|
|
||||||
|
|
||||||
// Custom styles
|
|
||||||
@import "custom";
|
@import "custom";
|
||||||
|
|||||||
Vendored
+6
-5
@@ -1,6 +1,7 @@
|
|||||||
@import "node_modules/bootstrap/scss/functions";
|
// Override Boostrap variables
|
||||||
@import "../bootstrap-variables";
|
@import "../variables";
|
||||||
@import "node_modules/bootstrap/scss/variables";
|
@import "node_modules/@coreui/coreui/scss/bootstrap-variables";
|
||||||
@import "node_modules/bootstrap/scss/mixins";
|
@import "node_modules/bootstrap/scss/mixins";
|
||||||
@import "../core-variables";
|
@import "node_modules/bootstrap/scss/functions";
|
||||||
@import "../core/variables";
|
@import "node_modules/bootstrap/scss/variables";
|
||||||
|
@import "node_modules/@coreui/coreui/scss/variables";
|
||||||
|
|||||||
+2
-4
@@ -8,7 +8,7 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style lang="scss">
|
||||||
/* Import Font Awesome Icons Set */
|
/* Import Font Awesome Icons Set */
|
||||||
@import '~flag-icon-css/css/flag-icon.min.css';
|
@import '~flag-icon-css/css/flag-icon.min.css';
|
||||||
/* Import Font Awesome Icons Set */
|
/* Import Font Awesome Icons Set */
|
||||||
@@ -19,8 +19,6 @@ export default {
|
|||||||
@import '~simple-line-icons/css/simple-line-icons.css';
|
@import '~simple-line-icons/css/simple-line-icons.css';
|
||||||
/* Import Bootstrap Vue Styles */
|
/* Import Bootstrap Vue Styles */
|
||||||
@import '~bootstrap-vue/dist/bootstrap-vue.css';
|
@import '~bootstrap-vue/dist/bootstrap-vue.css';
|
||||||
</style>
|
|
||||||
<style lang="scss">
|
|
||||||
// Import Main styles for this application
|
// Import Main styles for this application
|
||||||
@import './scss/style';
|
@import '../scss/style';
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
+5
-5
@@ -141,6 +141,11 @@ export default {
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: 'Charts',
|
||||||
|
url: '/charts',
|
||||||
|
icon: 'icon-pie-chart'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: 'Icons',
|
name: 'Icons',
|
||||||
url: '/icons',
|
url: '/icons',
|
||||||
@@ -171,11 +176,6 @@ export default {
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
|
||||||
name: 'Charts',
|
|
||||||
url: '/charts',
|
|
||||||
icon: 'icon-pie-chart'
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
name: 'Notifications',
|
name: 'Notifications',
|
||||||
url: '/notifications',
|
url: '/notifications',
|
||||||
|
|||||||
@@ -1,231 +0,0 @@
|
|||||||
<template>
|
|
||||||
<aside class="aside-menu">
|
|
||||||
<b-tabs>
|
|
||||||
<b-tab title="<i class='icon-list'></i>">
|
|
||||||
<Callout class="m-0 py-2 text-muted text-center bg-light text-uppercase">
|
|
||||||
<small><b>Today</b></small>
|
|
||||||
</Callout>
|
|
||||||
<hr class="transparent mx-3 my-0">
|
|
||||||
<Callout variant="warning" class="m-0 py-3">
|
|
||||||
<div class="avatar float-right">
|
|
||||||
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
|
||||||
</div>
|
|
||||||
<div>Meeting with <strong>Lucas</strong></div>
|
|
||||||
<small class="text-muted mr-3"><i class="icon-calendar"></i> 1 - 3pm</small>
|
|
||||||
<small class="text-muted"><i class="icon-location-pin"></i> Palo Alto, CA </small>
|
|
||||||
</Callout>
|
|
||||||
<hr class="mx-3 my-0">
|
|
||||||
<Callout variant="info" class="m-0 py-3">
|
|
||||||
<div class="avatar float-right">
|
|
||||||
<img src="static/img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
|
||||||
</div>
|
|
||||||
<div>Skype with <strong>Megan</strong></div>
|
|
||||||
<small class="text-muted mr-3"><i class="icon-calendar"></i> 4 - 5pm</small>
|
|
||||||
<small class="text-muted"><i class="icon-social-skype"></i> On-line </small>
|
|
||||||
</Callout>
|
|
||||||
<hr class="transparent mx-3 my-0">
|
|
||||||
<Callout class="m-0 py-2 text-muted text-center bg-light text-uppercase">
|
|
||||||
<small><b>Tomorrow</b></small>
|
|
||||||
</Callout>
|
|
||||||
<hr class="transparent mx-3 my-0">
|
|
||||||
<Callout variant="danger" class="m-0 py-3">
|
|
||||||
<div>New UI Project - <strong>deadline</strong></div>
|
|
||||||
<small class="text-muted mr-3"><i class="icon-calendar"></i> 10 - 11pm</small>
|
|
||||||
<small class="text-muted"><i class="icon-home"></i> creativeLabs HQ </small>
|
|
||||||
<div class="avatars-stack mt-2">
|
|
||||||
<div class="avatar avatar-xs">
|
|
||||||
<img src="static/img/avatars/2.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
|
||||||
</div>
|
|
||||||
<div class="avatar avatar-xs">
|
|
||||||
<img src="static/img/avatars/3.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
|
||||||
</div>
|
|
||||||
<div class="avatar avatar-xs">
|
|
||||||
<img src="static/img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
|
||||||
</div>
|
|
||||||
<div class="avatar avatar-xs">
|
|
||||||
<img src="static/img/avatars/5.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
|
||||||
</div>
|
|
||||||
<div class="avatar avatar-xs">
|
|
||||||
<img src="static/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Callout>
|
|
||||||
<hr class="mx-3 my-0">
|
|
||||||
<Callout variant="success" class="m-0 py-3">
|
|
||||||
<div><strong>#10 Startups.Garden</strong> Meetup</div>
|
|
||||||
<small class="text-muted mr-3"><i class="icon-calendar"></i> 1 - 3pm</small>
|
|
||||||
<small class="text-muted"><i class="icon-location-pin"></i> Palo Alto, CA </small>
|
|
||||||
</Callout>
|
|
||||||
<hr class="mx-3 my-0">
|
|
||||||
<Callout variant="primary" class="m-0 py-3">
|
|
||||||
<div><strong>Team meeting</strong></div>
|
|
||||||
<small class="text-muted mr-3"><i class="icon-calendar"></i> 4 - 6pm</small>
|
|
||||||
<small class="text-muted"><i class="icon-home"></i> creativeLabs HQ </small>
|
|
||||||
<div class="avatars-stack mt-2">
|
|
||||||
<div class="avatar avatar-xs">
|
|
||||||
<img src="static/img/avatars/2.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
|
||||||
</div>
|
|
||||||
<div class="avatar avatar-xs">
|
|
||||||
<img src="static/img/avatars/3.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
|
||||||
</div>
|
|
||||||
<div class="avatar avatar-xs">
|
|
||||||
<img src="static/img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
|
||||||
</div>
|
|
||||||
<div class="avatar avatar-xs">
|
|
||||||
<img src="static/img/avatars/5.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
|
||||||
</div>
|
|
||||||
<div class="avatar avatar-xs">
|
|
||||||
<img src="static/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
|
||||||
</div>
|
|
||||||
<div class="avatar avatar-xs">
|
|
||||||
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
|
||||||
</div>
|
|
||||||
<div class="avatar avatar-xs">
|
|
||||||
<img src="static/img/avatars/8.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Callout>
|
|
||||||
<hr class="mx-3 my-0">
|
|
||||||
</b-tab>
|
|
||||||
<b-tab title="<i class='icon-speech'></i>">
|
|
||||||
<div class="p-3">
|
|
||||||
<div class="message">
|
|
||||||
<div class="py-3 pb-5 mr-3 float-left">
|
|
||||||
<div class="avatar">
|
|
||||||
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
|
||||||
<b-badge variant="success" class="avatar-status" ></b-badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<small class="text-muted">Lukasz Holeczek</small>
|
|
||||||
<small class="text-muted float-right mt-1">1:52 PM</small>
|
|
||||||
</div>
|
|
||||||
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
|
||||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
|
|
||||||
</div>
|
|
||||||
<hr>
|
|
||||||
<div class="message">
|
|
||||||
<div class="py-3 pb-5 mr-3 float-left">
|
|
||||||
<div class="avatar">
|
|
||||||
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
|
||||||
<b-badge variant="success" class="avatar-status" ></b-badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<small class="text-muted">Lukasz Holeczek</small>
|
|
||||||
<small class="text-muted float-right mt-1">1:52 PM</small>
|
|
||||||
</div>
|
|
||||||
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
|
||||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
|
|
||||||
</div>
|
|
||||||
<hr>
|
|
||||||
<div class="message">
|
|
||||||
<div class="py-3 pb-5 mr-3 float-left">
|
|
||||||
<div class="avatar">
|
|
||||||
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
|
||||||
<b-badge variant="success" class="avatar-status" ></b-badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<small class="text-muted">Lukasz Holeczek</small>
|
|
||||||
<small class="text-muted float-right mt-1">1:52 PM</small>
|
|
||||||
</div>
|
|
||||||
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
|
||||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
|
|
||||||
</div>
|
|
||||||
<hr>
|
|
||||||
<div class="message">
|
|
||||||
<div class="py-3 pb-5 mr-3 float-left">
|
|
||||||
<div class="avatar">
|
|
||||||
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
|
||||||
<b-badge variant="success" class="avatar-status" ></b-badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<small class="text-muted">Lukasz Holeczek</small>
|
|
||||||
<small class="text-muted float-right mt-1">1:52 PM</small>
|
|
||||||
</div>
|
|
||||||
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
|
||||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
|
|
||||||
</div>
|
|
||||||
<hr>
|
|
||||||
<div class="message">
|
|
||||||
<div class="py-3 pb-5 mr-3 float-left">
|
|
||||||
<div class="avatar">
|
|
||||||
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
|
||||||
<b-badge variant="success" class="avatar-status" ></b-badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<small class="text-muted">Lukasz Holeczek</small>
|
|
||||||
<small class="text-muted float-right mt-1">1:52 PM</small>
|
|
||||||
</div>
|
|
||||||
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
|
||||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</b-tab>
|
|
||||||
<b-tab title="<i class='icon-settings'></i>">
|
|
||||||
<div class="p-3">
|
|
||||||
<h6>Settings</h6>
|
|
||||||
<div class="aside-options">
|
|
||||||
<div class="clearfix mt-4">
|
|
||||||
<small><b>Option 1</b></small>
|
|
||||||
<c-switch type="text" variant="success" on="on" off="off" :pill="true" size="sm" class="float-right" :checked="true"/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="aside-options">
|
|
||||||
<div class="clearfix mt-3">
|
|
||||||
<small><b>Option 2</b></small>
|
|
||||||
<c-switch type="text" variant="success" on="on" off="off" :pill="true" size="sm" class="float-right"/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="aside-options">
|
|
||||||
<div class="clearfix mt-3">
|
|
||||||
<small><b>Option 3</b></small>
|
|
||||||
<c-switch type="text" variant="success" on="on" off="off" :pill="true" size="sm" class="float-right"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="aside-options">
|
|
||||||
<div class="clearfix mt-3">
|
|
||||||
<small><b>Option 4</b></small>
|
|
||||||
<c-switch type="text" variant="success" on="on" off="off" :pill="true" size="sm" class="float-right" :checked="true"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<hr>
|
|
||||||
<h6>System Utilization</h6>
|
|
||||||
<div class="text-uppercase mb-1 mt-4"><small><b>CPU Usage</b></small></div>
|
|
||||||
<b-progress height={} class="progress-xs" variant="info" :value="25"></b-progress>
|
|
||||||
<small class="text-muted">348 Processes. 1/4 Cores.</small>
|
|
||||||
<div class="text-uppercase mb-1 mt-2"><small><b>Memory Usage</b></small></div>
|
|
||||||
<b-progress height={} class="progress-xs" variant="warning" :value="70"></b-progress>
|
|
||||||
<small class="text-muted">11444GB/16384MB</small>
|
|
||||||
<div class="text-uppercase mb-1 mt-2"><small><b>SSD 1 Usage</b></small></div>
|
|
||||||
<b-progress height={} class="progress-xs" variant="danger" :value="95"></b-progress>
|
|
||||||
<small class="text-muted">243GB/256GB</small>
|
|
||||||
<div class="text-uppercase mb-1 mt-2"><small><b>SSD 2 Usage</b></small></div>
|
|
||||||
<b-progress height={} class="progress-xs" variant="success" :value="10"></b-progress>
|
|
||||||
<small class="text-muted">25GB/256GB</small>
|
|
||||||
</div>
|
|
||||||
</b-tab>
|
|
||||||
</b-tabs>
|
|
||||||
</aside>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import Callout from './Callout'
|
|
||||||
import cSwitch from './Switch'
|
|
||||||
export default {
|
|
||||||
name: 'c-aside',
|
|
||||||
components: {
|
|
||||||
Callout,
|
|
||||||
cSwitch
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -0,0 +1,48 @@
|
|||||||
|
<template>
|
||||||
|
<aside class="aside-menu">
|
||||||
|
<slot>Aside</slot>
|
||||||
|
</aside>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// import { asideMenuCssClasses, validBreakpoints, checkBreakpoint } from '../../shared/classes'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'AppAside',
|
||||||
|
props: {
|
||||||
|
fixed: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
display: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
offCanvas: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
this.isFixed(this.fixed)
|
||||||
|
this.isOffCanvas(this.offCanvas)
|
||||||
|
// this.displayBreakpoint(this.display)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
isFixed (fixed) {
|
||||||
|
fixed ? document.body.classList.add('aside-menu-fixed') : document.body.classList.remove('aside-menu-fixed')
|
||||||
|
return fixed
|
||||||
|
},
|
||||||
|
isOffCanvas (offCanvas) {
|
||||||
|
offCanvas ? document.body.classList.add('aside-menu-off-canvas') : document.body.classList.remove('aside-menu-off-canvas')
|
||||||
|
}
|
||||||
|
// displayBreakpoint (display) {
|
||||||
|
// let cssClass = asideMenuCssClasses[0]
|
||||||
|
// if (display && checkBreakpoint(display, validBreakpoints)) {
|
||||||
|
// cssClass = `aside-menu-${display}-show`
|
||||||
|
// }
|
||||||
|
// document.body.classList.add(cssClass)
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
<template>
|
||||||
|
<button
|
||||||
|
:display="display"
|
||||||
|
:mobile="mobile"
|
||||||
|
:class="classList"
|
||||||
|
type="button"
|
||||||
|
@click="asideToggle">
|
||||||
|
<span class="navbar-toggler-icon" />
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { asideMenuCssClasses, validBreakpoints, checkBreakpoint } from '../../shared/classes'
|
||||||
|
import toggleClasses from '../../shared/toggle-classes'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'AsideToggler',
|
||||||
|
props: {
|
||||||
|
mobile: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
display: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
classList () {
|
||||||
|
return [
|
||||||
|
'navbar-toggler'
|
||||||
|
// 'd-none',
|
||||||
|
// 'd-lg-inline-block'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
// this.toggle()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggle () {
|
||||||
|
const [display, mobile] = [this.display, this.mobile]
|
||||||
|
let cssClass = asideMenuCssClasses[0]
|
||||||
|
if (!mobile && display && checkBreakpoint(display, validBreakpoints)) {
|
||||||
|
cssClass = `aside-menu-${display}-show`
|
||||||
|
}
|
||||||
|
toggleClasses(cssClass, asideMenuCssClasses)
|
||||||
|
},
|
||||||
|
asideToggle (e) {
|
||||||
|
e.preventDefault()
|
||||||
|
this.toggle()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
import Aside from './Aside'
|
||||||
|
import AsideToggler from './AsideToggler'
|
||||||
|
|
||||||
|
export {
|
||||||
|
Aside,
|
||||||
|
AsideToggler
|
||||||
|
}
|
||||||
@@ -1,34 +0,0 @@
|
|||||||
<template>
|
|
||||||
<ol class="breadcrumb">
|
|
||||||
<li class="breadcrumb-item" v-for="(item, index) in list">
|
|
||||||
<span class="active" v-if="isLast(index)">{{ showName(item) }}</span>
|
|
||||||
<router-link :to="item" v-else>{{ showName(item) }}</router-link>
|
|
||||||
</li>
|
|
||||||
</ol>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
list: {
|
|
||||||
type: Array,
|
|
||||||
required: true,
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
isLast (index) {
|
|
||||||
return index === this.list.length - 1
|
|
||||||
},
|
|
||||||
showName (item) {
|
|
||||||
if (item.meta && item.meta.label) {
|
|
||||||
item = item.meta && item.meta.label
|
|
||||||
}
|
|
||||||
if (item.name) {
|
|
||||||
item = item.name
|
|
||||||
}
|
|
||||||
return item
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
<template>
|
||||||
|
<ol class="breadcrumb">
|
||||||
|
<li class="breadcrumb-item" :key="index" v-for="(item, index) in list">
|
||||||
|
<span class="active" v-if="isLast(index)">{{ showName(item) }}</span>
|
||||||
|
<router-link :to="item" v-else>{{ showName(item) }}</router-link>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
isLast (index) {
|
||||||
|
return index === this.list.length - 1
|
||||||
|
},
|
||||||
|
showName (item) {
|
||||||
|
if (item.meta && item.meta.label) {
|
||||||
|
item = item.meta && item.meta.label
|
||||||
|
}
|
||||||
|
if (item.name) {
|
||||||
|
item = item.name
|
||||||
|
}
|
||||||
|
return item
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :class="classList">
|
<div :class="classList">
|
||||||
<slot></slot>
|
<slot>Callout</slot>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -8,7 +8,8 @@
|
|||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
variant: {
|
variant: {
|
||||||
type: String
|
type: String,
|
||||||
|
default: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
<template>
|
|
||||||
<footer class="app-footer">
|
|
||||||
<span><a href="http://coreui.io">CoreUI</a> © 2018 creativeLabs.</span>
|
|
||||||
<span class="ml-auto">Powered by <a href="http://coreui.io">CoreUI</a></span>
|
|
||||||
</footer>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: 'c-footer'
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
<template>
|
||||||
|
<footer :class="classList">
|
||||||
|
<slot>
|
||||||
|
<div>
|
||||||
|
<a href="https://coreui.io">CoreUI</a>
|
||||||
|
<span>© 2018 creativeLabs.</span>
|
||||||
|
</div>
|
||||||
|
<div class="ml-auto">
|
||||||
|
<span>Powered by</span>
|
||||||
|
<a href="https://coreui.io">CoreUI for Vue</a>
|
||||||
|
</div>
|
||||||
|
</slot>
|
||||||
|
</footer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'AppFooter',
|
||||||
|
props: {
|
||||||
|
fixed: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
classList () {
|
||||||
|
return [
|
||||||
|
'app-footer'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
<template>
|
||||||
|
<b-nav-item-dropdown right no-caret>
|
||||||
|
<template slot="button-content">
|
||||||
|
<img src="static/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||||
|
</template>
|
||||||
|
<b-dropdown-header tag="div" class="text-center"><strong>Account</strong></b-dropdown-header>
|
||||||
|
<b-dropdown-item><i class="fa fa-bell-o"></i> Updates<b-badge variant="info">{{itemsCount}}</b-badge></b-dropdown-item>
|
||||||
|
<b-dropdown-item><i class="fa fa-envelope-o"></i> Messages<b-badge variant="success">{{itemsCount}}</b-badge></b-dropdown-item>
|
||||||
|
<b-dropdown-item><i class="fa fa-tasks"></i> Tasks<b-badge variant="danger">{{itemsCount}}</b-badge></b-dropdown-item>
|
||||||
|
<b-dropdown-item><i class="fa fa-comments"></i> Comments<b-badge variant="warning">{{itemsCount}}</b-badge></b-dropdown-item>
|
||||||
|
<b-dropdown-header tag="div" class="text-center"><strong>Settings</strong></b-dropdown-header>
|
||||||
|
<b-dropdown-item><i class="fa fa-user"></i> Profile</b-dropdown-item>
|
||||||
|
<b-dropdown-item><i class="fa fa-wrench"></i> Settings</b-dropdown-item>
|
||||||
|
<b-dropdown-item><i class="fa fa-usd"></i> Payments<b-badge variant="secondary">{{itemsCount}}</b-badge></b-dropdown-item>
|
||||||
|
<b-dropdown-item><i class="fa fa-file"></i> Projects<b-badge variant="primary">{{itemsCount}}</b-badge></b-dropdown-item>
|
||||||
|
<b-dropdown-divider></b-dropdown-divider>
|
||||||
|
<b-dropdown-item><i class="fa fa-shield"></i> Lock Account</b-dropdown-item>
|
||||||
|
<b-dropdown-item><i class="fa fa-lock"></i> Logout</b-dropdown-item>
|
||||||
|
</b-nav-item-dropdown>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'header-dropdown',
|
||||||
|
data: () => {
|
||||||
|
return { itemsCount: 42 }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
@@ -0,0 +1,60 @@
|
|||||||
|
<template>
|
||||||
|
<header class="app-header navbar">
|
||||||
|
<button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="mobileSidebarToggle">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<b-link class="navbar-brand" to="#"></b-link>
|
||||||
|
<button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" @click="sidebarToggle">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<b-navbar-nav class="d-md-down-none">
|
||||||
|
<b-nav-item class="px-3">Dashboard</b-nav-item>
|
||||||
|
<b-nav-item class="px-3">Users</b-nav-item>
|
||||||
|
<b-nav-item class="px-3">Settings</b-nav-item>
|
||||||
|
</b-navbar-nav>
|
||||||
|
<b-navbar-nav class="ml-auto">
|
||||||
|
<b-nav-item class="d-md-down-none">
|
||||||
|
<i class="icon-bell"></i>
|
||||||
|
<b-badge pill variant="danger">5</b-badge>
|
||||||
|
</b-nav-item>
|
||||||
|
<b-nav-item class="d-md-down-none">
|
||||||
|
<i class="icon-list"></i>
|
||||||
|
</b-nav-item>
|
||||||
|
<b-nav-item class="d-md-down-none">
|
||||||
|
<i class="icon-location-pin"></i>
|
||||||
|
</b-nav-item>
|
||||||
|
<HeaderDropdown/>
|
||||||
|
</b-navbar-nav>
|
||||||
|
<button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" @click="asideToggle">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
</header>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import HeaderDropdown from '../Header/HeaderDropdown.vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'c-header',
|
||||||
|
components: {
|
||||||
|
HeaderDropdown
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
sidebarToggle (e) {
|
||||||
|
e.preventDefault()
|
||||||
|
document.body.classList.toggle('sidebar-hidden')
|
||||||
|
},
|
||||||
|
sidebarMinimize (e) {
|
||||||
|
e.preventDefault()
|
||||||
|
document.body.classList.toggle('sidebar-minimized')
|
||||||
|
},
|
||||||
|
mobileSidebarToggle (e) {
|
||||||
|
e.preventDefault()
|
||||||
|
document.body.classList.toggle('sidebar-mobile-show')
|
||||||
|
},
|
||||||
|
asideToggle (e) {
|
||||||
|
e.preventDefault()
|
||||||
|
document.body.classList.toggle('aside-menu-hidden')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -1,59 +1,34 @@
|
|||||||
<template>
|
<template>
|
||||||
<header class="app-header navbar">
|
<header
|
||||||
<button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="mobileSidebarToggle">
|
:class="classList">
|
||||||
<span class="navbar-toggler-icon"></span>
|
<slot>Header</slot>
|
||||||
</button>
|
|
||||||
<b-link class="navbar-brand" to="#"></b-link>
|
|
||||||
<button class="navbar-toggler sidebar-toggler d-md-down-none" type="button" @click="sidebarToggle">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
<b-navbar-nav class="d-md-down-none">
|
|
||||||
<b-nav-item class="px-3">Dashboard</b-nav-item>
|
|
||||||
<b-nav-item class="px-3">Users</b-nav-item>
|
|
||||||
<b-nav-item class="px-3">Settings</b-nav-item>
|
|
||||||
</b-navbar-nav>
|
|
||||||
<b-navbar-nav class="ml-auto">
|
|
||||||
<b-nav-item class="d-md-down-none">
|
|
||||||
<i class="icon-bell"></i>
|
|
||||||
<b-badge pill variant="danger">5</b-badge>
|
|
||||||
</b-nav-item>
|
|
||||||
<b-nav-item class="d-md-down-none">
|
|
||||||
<i class="icon-list"></i>
|
|
||||||
</b-nav-item>
|
|
||||||
<b-nav-item class="d-md-down-none">
|
|
||||||
<i class="icon-location-pin"></i>
|
|
||||||
</b-nav-item>
|
|
||||||
<HeaderDropdown/>
|
|
||||||
</b-navbar-nav>
|
|
||||||
<button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" @click="asideToggle">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
</header>
|
</header>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
|
||||||
import HeaderDropdown from './HeaderDropdown.vue'
|
|
||||||
|
|
||||||
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'c-header',
|
name: 'AppHeader',
|
||||||
components: {
|
props: {
|
||||||
HeaderDropdown
|
fixed: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
classList () {
|
||||||
|
return [
|
||||||
|
'app-header',
|
||||||
|
'navbar'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
this.isFixed(this.fixed)
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
sidebarToggle (e) {
|
isFixed (fixed) {
|
||||||
e.preventDefault()
|
fixed ? document.body.classList.add('header-fixed') : document.body.classList.remove('header-fixed')
|
||||||
document.body.classList.toggle('sidebar-hidden')
|
return fixed
|
||||||
},
|
|
||||||
sidebarMinimize (e) {
|
|
||||||
e.preventDefault()
|
|
||||||
document.body.classList.toggle('sidebar-minimized')
|
|
||||||
},
|
|
||||||
mobileSidebarToggle (e) {
|
|
||||||
e.preventDefault()
|
|
||||||
document.body.classList.toggle('sidebar-mobile-show')
|
|
||||||
},
|
|
||||||
asideToggle (e) {
|
|
||||||
e.preventDefault()
|
|
||||||
document.body.classList.toggle('aside-menu-hidden')
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,26 +1,31 @@
|
|||||||
<template>
|
<template>
|
||||||
<b-nav-item-dropdown right no-caret>
|
<b-nav-item-dropdown :right="right" :no-caret="noCaret">
|
||||||
<template slot="button-content">
|
<template slot="button-content">
|
||||||
<img src="static/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
<slot name="button-content">
|
||||||
</template>
|
<img
|
||||||
<b-dropdown-header tag="div" class="text-center"><strong>Account</strong></b-dropdown-header>
|
src="static/img/avatars/6.jpg"
|
||||||
<b-dropdown-item><i class="fa fa-bell-o"></i> Updates<b-badge variant="info">{{itemsCount}}</b-badge></b-dropdown-item>
|
class="img-avatar"
|
||||||
<b-dropdown-item><i class="fa fa-envelope-o"></i> Messages<b-badge variant="success">{{itemsCount}}</b-badge></b-dropdown-item>
|
alt="admin@bootstrapmaster.com" />
|
||||||
<b-dropdown-item><i class="fa fa-tasks"></i> Tasks<b-badge variant="danger">{{itemsCount}}</b-badge></b-dropdown-item>
|
</slot>
|
||||||
<b-dropdown-item><i class="fa fa-comments"></i> Comments<b-badge variant="warning">{{itemsCount}}</b-badge></b-dropdown-item>
|
</template>
|
||||||
<b-dropdown-header tag="div" class="text-center"><strong>Settings</strong></b-dropdown-header>
|
<slot>
|
||||||
<b-dropdown-item><i class="fa fa-user"></i> Profile</b-dropdown-item>
|
<div :style="{ right: 'auto', height: '400px' }">dropdown</div>
|
||||||
<b-dropdown-item><i class="fa fa-wrench"></i> Settings</b-dropdown-item>
|
</slot>
|
||||||
<b-dropdown-item><i class="fa fa-usd"></i> Payments<b-badge variant="secondary">{{itemsCount}}</b-badge></b-dropdown-item>
|
</b-nav-item-dropdown>
|
||||||
<b-dropdown-item><i class="fa fa-file"></i> Projects<b-badge variant="primary">{{itemsCount}}</b-badge></b-dropdown-item>
|
|
||||||
<b-dropdown-divider></b-dropdown-divider>
|
|
||||||
<b-dropdown-item><i class="fa fa-shield"></i> Lock Account</b-dropdown-item>
|
|
||||||
<b-dropdown-item><i class="fa fa-lock"></i> Logout</b-dropdown-item>
|
|
||||||
</b-nav-item-dropdown>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'header-dropdown',
|
name: 'HeaderDropdown',
|
||||||
|
props: {
|
||||||
|
right: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
noCaret: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
data: () => {
|
data: () => {
|
||||||
return { itemsCount: 42 }
|
return { itemsCount: 42 }
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,7 @@
|
|||||||
|
import Header from './Header'
|
||||||
|
import HeaderDropdown from './HeaderDropdown'
|
||||||
|
|
||||||
|
export {
|
||||||
|
Header,
|
||||||
|
HeaderDropdown
|
||||||
|
}
|
||||||
@@ -0,0 +1,98 @@
|
|||||||
|
<template>
|
||||||
|
<div class="sidebar">
|
||||||
|
<SidebarHeader/>
|
||||||
|
<SidebarForm/>
|
||||||
|
<nav class="sidebar-nav">
|
||||||
|
<div slot="header"></div>
|
||||||
|
<ul class="nav">
|
||||||
|
<template v-for="(item, index) in navItems">
|
||||||
|
<template v-if="item.title">
|
||||||
|
<SidebarNavTitle :name="item.name" :classes="item.class" :wrapper="item.wrapper"/>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="item.divider">
|
||||||
|
<SidebarNavDivider :classes="item.class"/>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="item.label">
|
||||||
|
<SidebarNavLabel :name="item.name" :url="item.url" :icon="item.icon" :label="item.label" :classes="item.class"/>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<template v-if="item.children">
|
||||||
|
<!-- First level dropdown -->
|
||||||
|
<SidebarNavDropdown :name="item.name" :url="item.url" :icon="item.icon">
|
||||||
|
<template v-for="(childL1, index) in item.children">
|
||||||
|
<template v-if="childL1.children">
|
||||||
|
<!-- Second level dropdown -->
|
||||||
|
<SidebarNavDropdown :name="childL1.name" :url="childL1.url" :icon="childL1.icon">
|
||||||
|
<li class="nav-item" v-for="(childL2, index) in childL1.children">
|
||||||
|
<SidebarNavLink :name="childL2.name" :url="childL2.url" :icon="childL2.icon" :badge="childL2.badge" :variant="item.variant"/>
|
||||||
|
</li>
|
||||||
|
</SidebarNavDropdown>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<SidebarNavItem :classes="item.class">
|
||||||
|
<SidebarNavLink :name="childL1.name" :url="childL1.url" :icon="childL1.icon" :badge="childL1.badge" :variant="item.variant"/>
|
||||||
|
</SidebarNavItem>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</SidebarNavDropdown>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<SidebarNavItem :classes="item.class">
|
||||||
|
<SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge" :variant="item.variant"/>
|
||||||
|
</SidebarNavItem>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</ul>
|
||||||
|
<slot></slot>
|
||||||
|
</nav>
|
||||||
|
<SidebarFooter/>
|
||||||
|
<SidebarMinimizer/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import SidebarFooter from './SidebarFooter'
|
||||||
|
import SidebarForm from './SidebarForm'
|
||||||
|
import SidebarHeader from './SidebarHeader'
|
||||||
|
import SidebarMinimizer from './SidebarMinimizer'
|
||||||
|
import SidebarNavDivider from './SidebarNavDivider'
|
||||||
|
import SidebarNavDropdown from './SidebarNavDropdown'
|
||||||
|
import SidebarNavLink from './SidebarNavLink'
|
||||||
|
import SidebarNavTitle from './SidebarNavTitle'
|
||||||
|
import SidebarNavItem from './SidebarNavItem'
|
||||||
|
import SidebarNavLabel from './SidebarNavLabel'
|
||||||
|
export default {
|
||||||
|
name: 'sidebar',
|
||||||
|
props: {
|
||||||
|
navItems: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
SidebarFooter,
|
||||||
|
SidebarForm,
|
||||||
|
SidebarHeader,
|
||||||
|
SidebarMinimizer,
|
||||||
|
SidebarNavDivider,
|
||||||
|
SidebarNavDropdown,
|
||||||
|
SidebarNavLink,
|
||||||
|
SidebarNavTitle,
|
||||||
|
SidebarNavItem,
|
||||||
|
SidebarNavLabel
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleClick (e) {
|
||||||
|
e.preventDefault()
|
||||||
|
e.target.parentElement.classList.toggle('open')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="css">
|
||||||
|
.nav-link {
|
||||||
|
cursor:pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
<template>
|
||||||
|
<!-- <div class="sidebar-footer"></div> -->
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'sidebar-footer'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
<template>
|
||||||
|
<!-- <div class="sidebar-form"></div> -->
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'sidebar-form'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
<template>
|
||||||
|
<!-- <div class="sidebar-header"></div> -->
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'sidebar-header'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
<template>
|
||||||
|
<button class="sidebar-minimizer" type="button" @click="sidebarMinimize();brandMinimize()"></button>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'sidebar-minimizer',
|
||||||
|
methods: {
|
||||||
|
sidebarMinimize () {
|
||||||
|
document.body.classList.toggle('sidebar-minimized')
|
||||||
|
},
|
||||||
|
brandMinimize () {
|
||||||
|
document.body.classList.toggle('brand-minimized')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
<template>
|
||||||
|
<li :class="classList"></li>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'sidebar-nav-divider',
|
||||||
|
props: {
|
||||||
|
classes: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
classList () {
|
||||||
|
return [
|
||||||
|
'divider',
|
||||||
|
...this.itemClasses
|
||||||
|
]
|
||||||
|
},
|
||||||
|
itemClasses () {
|
||||||
|
return this.classes ? this.classes.split(' ') : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
<template>
|
||||||
|
<router-link tag="li" class="nav-item nav-dropdown" :to="url" disabled>
|
||||||
|
<div class="nav-link nav-dropdown-toggle" @click="handleClick"><i :class="icon"></i> {{name}}</div>
|
||||||
|
<ul class="nav-dropdown-items">
|
||||||
|
<slot></slot>
|
||||||
|
</ul>
|
||||||
|
</router-link>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
name: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
url: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleClick (e) {
|
||||||
|
e.preventDefault()
|
||||||
|
e.target.parentElement.classList.toggle('open')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
<template>
|
||||||
|
<li :class="classList" @click="hideMobile">
|
||||||
|
<slot></slot>
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'sidebar-nav-item',
|
||||||
|
props: {
|
||||||
|
classes: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
classList () {
|
||||||
|
return [
|
||||||
|
'nav-item',
|
||||||
|
...this.itemClasses
|
||||||
|
]
|
||||||
|
},
|
||||||
|
itemClasses () {
|
||||||
|
return this.classes ? this.classes.split(' ') : ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
hideMobile () {
|
||||||
|
if (document.body.classList.contains('sidebar-mobile-show')) {
|
||||||
|
document.body.classList.toggle('sidebar-mobile-show')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,59 @@
|
|||||||
|
<template>
|
||||||
|
<SidebarNavItem :classes="classList.navItem">
|
||||||
|
<a :class="classList.navLink" :href="url"><i :class="classList.icon"></i> {{name}}</a>
|
||||||
|
</SidebarNavItem>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import SidebarNavItem from './SidebarNavItem'
|
||||||
|
import SidebarNavLink from './SidebarNavLink'
|
||||||
|
export default {
|
||||||
|
name: 'sidebar-nav-label',
|
||||||
|
components: {
|
||||||
|
SidebarNavItem,
|
||||||
|
SidebarNavLink
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
name: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
url: {
|
||||||
|
type: String,
|
||||||
|
default: '#'
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
default: 'fa fa-circle'
|
||||||
|
},
|
||||||
|
classes: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
type: Object,
|
||||||
|
required: true,
|
||||||
|
default: () => {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
classList () {
|
||||||
|
const classes = {
|
||||||
|
navItem: ['hidden-cn', ...this.getClasses(this.classes)].join(' '),
|
||||||
|
navLink: 'nav-label',
|
||||||
|
icon: [
|
||||||
|
this.icon ? this.icon : 'fa fa-circle',
|
||||||
|
this.label.variant ? `text-${this.label.variant}` : '',
|
||||||
|
this.label.class ? this.label.class : ''
|
||||||
|
].join(' ')
|
||||||
|
}
|
||||||
|
return classes
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getClasses (classes) {
|
||||||
|
return classes ? classes.split(' ') : []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,68 @@
|
|||||||
|
<template>
|
||||||
|
<div v-if="isExternalLink">
|
||||||
|
<a :href="url" :class="classList">
|
||||||
|
<i :class="icon"></i> {{name}}
|
||||||
|
<b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
<router-link :to="url" :class="classList">
|
||||||
|
<i :class="icon"></i> {{name}}
|
||||||
|
<b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
|
||||||
|
</router-link>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'sidebar-nav-link',
|
||||||
|
props: {
|
||||||
|
name: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
url: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
badge: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {}
|
||||||
|
},
|
||||||
|
variant: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
classes: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
classList () {
|
||||||
|
return [
|
||||||
|
'nav-link',
|
||||||
|
this.linkVariant,
|
||||||
|
...this.itemClasses
|
||||||
|
]
|
||||||
|
},
|
||||||
|
linkVariant () {
|
||||||
|
return this.variant ? `nav-link-${this.variant}` : ''
|
||||||
|
},
|
||||||
|
itemClasses () {
|
||||||
|
return this.classes ? this.classes.split(' ') : []
|
||||||
|
},
|
||||||
|
isExternalLink () {
|
||||||
|
if (this.url.substring(0, 4) === 'http') {
|
||||||
|
return true
|
||||||
|
} else {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
<template>
|
||||||
|
<li :class="classList">
|
||||||
|
<template v-if="wrapper && wrapper.element">
|
||||||
|
<component v-bind:is="wrapper.element" v-bind="wrapper.attributes">
|
||||||
|
{{name}}
|
||||||
|
</component>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
{{name}}
|
||||||
|
</template>
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
name: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
classes: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
wrapper: {
|
||||||
|
type: Object,
|
||||||
|
default: () => {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
classList () {
|
||||||
|
return [
|
||||||
|
'nav-title',
|
||||||
|
...this.itemClasses
|
||||||
|
]
|
||||||
|
},
|
||||||
|
itemClasses () {
|
||||||
|
return this.classes ? this.classes.split(' ') : ''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -1,98 +1,25 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="sidebar">
|
<div class="sidebar">
|
||||||
<SidebarHeader/>
|
<slot>Sidebar</slot>
|
||||||
<SidebarForm/>
|
|
||||||
<nav class="sidebar-nav">
|
|
||||||
<div slot="header"></div>
|
|
||||||
<ul class="nav">
|
|
||||||
<template v-for="(item, index) in navItems">
|
|
||||||
<template v-if="item.title">
|
|
||||||
<SidebarNavTitle :name="item.name" :classes="item.class" :wrapper="item.wrapper"/>
|
|
||||||
</template>
|
|
||||||
<template v-else-if="item.divider">
|
|
||||||
<SidebarNavDivider :classes="item.class"/>
|
|
||||||
</template>
|
|
||||||
<template v-else-if="item.label">
|
|
||||||
<SidebarNavLabel :name="item.name" :url="item.url" :icon="item.icon" :label="item.label" :classes="item.class"/>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<template v-if="item.children">
|
|
||||||
<!-- First level dropdown -->
|
|
||||||
<SidebarNavDropdown :name="item.name" :url="item.url" :icon="item.icon">
|
|
||||||
<template v-for="(childL1, index) in item.children">
|
|
||||||
<template v-if="childL1.children">
|
|
||||||
<!-- Second level dropdown -->
|
|
||||||
<SidebarNavDropdown :name="childL1.name" :url="childL1.url" :icon="childL1.icon">
|
|
||||||
<li class="nav-item" v-for="(childL2, index) in childL1.children">
|
|
||||||
<SidebarNavLink :name="childL2.name" :url="childL2.url" :icon="childL2.icon" :badge="childL2.badge" :variant="item.variant"/>
|
|
||||||
</li>
|
|
||||||
</SidebarNavDropdown>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<SidebarNavItem :classes="item.class">
|
|
||||||
<SidebarNavLink :name="childL1.name" :url="childL1.url" :icon="childL1.icon" :badge="childL1.badge" :variant="item.variant"/>
|
|
||||||
</SidebarNavItem>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
</SidebarNavDropdown>
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<SidebarNavItem :classes="item.class">
|
|
||||||
<SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge" :variant="item.variant"/>
|
|
||||||
</SidebarNavItem>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
</ul>
|
|
||||||
<slot></slot>
|
|
||||||
</nav>
|
|
||||||
<SidebarFooter/>
|
|
||||||
<SidebarMinimizer/>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import SidebarFooter from './SidebarFooter'
|
|
||||||
import SidebarForm from './SidebarForm'
|
|
||||||
import SidebarHeader from './SidebarHeader'
|
|
||||||
import SidebarMinimizer from './SidebarMinimizer'
|
|
||||||
import SidebarNavDivider from './SidebarNavDivider'
|
|
||||||
import SidebarNavDropdown from './SidebarNavDropdown'
|
|
||||||
import SidebarNavLink from './SidebarNavLink'
|
|
||||||
import SidebarNavTitle from './SidebarNavTitle'
|
|
||||||
import SidebarNavItem from './SidebarNavItem'
|
|
||||||
import SidebarNavLabel from './SidebarNavLabel'
|
|
||||||
export default {
|
export default {
|
||||||
name: 'sidebar',
|
name: 'sidebar',
|
||||||
props: {
|
props: {
|
||||||
navItems: {
|
fixed: {
|
||||||
type: Array,
|
type: Boolean,
|
||||||
required: true,
|
default: false
|
||||||
default: () => []
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
mounted: function () {
|
||||||
SidebarFooter,
|
this.isFixed()
|
||||||
SidebarForm,
|
|
||||||
SidebarHeader,
|
|
||||||
SidebarMinimizer,
|
|
||||||
SidebarNavDivider,
|
|
||||||
SidebarNavDropdown,
|
|
||||||
SidebarNavLink,
|
|
||||||
SidebarNavTitle,
|
|
||||||
SidebarNavItem,
|
|
||||||
SidebarNavLabel
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleClick (e) {
|
isFixed () {
|
||||||
e.preventDefault()
|
this.fixed ? document.body.classList.add('sidebar-fixed') : document.body.classList.remove('sidebar-fixed')
|
||||||
e.target.parentElement.classList.toggle('open')
|
return this.fixed
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="css">
|
|
||||||
.nav-link {
|
|
||||||
cursor:pointer;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- <div class="sidebar-footer"></div> -->
|
<!--<div class="sidebar-footer"></div>-->
|
||||||
</template>
|
</template>
|
||||||
<script>
|
|
||||||
|
|
||||||
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'sidebar-footer'
|
name: 'sidebar-footer'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,79 @@
|
|||||||
|
<template>
|
||||||
|
<nav class="sidebar-nav">
|
||||||
|
<div slot="header"></div>
|
||||||
|
<ul class="nav">
|
||||||
|
<template v-for="(item, index) in navItems">
|
||||||
|
<template v-if="item.title">
|
||||||
|
<SidebarNavTitle :name="item.name" :classes="item.class" :wrapper="item.wrapper"/>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="item.divider">
|
||||||
|
<SidebarNavDivider :classes="item.class"/>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="item.label">
|
||||||
|
<SidebarNavLabel :name="item.name" :url="item.url" :icon="item.icon" :label="item.label" :classes="item.class"/>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<template v-if="item.children">
|
||||||
|
<!-- First level dropdown -->
|
||||||
|
<SidebarNavDropdown :name="item.name" :url="item.url" :icon="item.icon">
|
||||||
|
<template v-for="(childL1, index) in item.children">
|
||||||
|
<template v-if="childL1.children">
|
||||||
|
<!-- Second level dropdown -->
|
||||||
|
<SidebarNavDropdown :name="childL1.name" :url="childL1.url" :icon="childL1.icon">
|
||||||
|
<li class="nav-item" v-for="(childL2, index) in childL1.children">
|
||||||
|
<SidebarNavLink :name="childL2.name" :url="childL2.url" :icon="childL2.icon" :badge="childL2.badge" :variant="item.variant"/>
|
||||||
|
</li>
|
||||||
|
</SidebarNavDropdown>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<SidebarNavItem :classes="item.class">
|
||||||
|
<SidebarNavLink :name="childL1.name" :url="childL1.url" :icon="childL1.icon" :badge="childL1.badge" :variant="item.variant"/>
|
||||||
|
</SidebarNavItem>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</SidebarNavDropdown>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<SidebarNavItem :classes="item.class">
|
||||||
|
<SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge" :variant="item.variant"/>
|
||||||
|
</SidebarNavItem>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</ul>
|
||||||
|
<slot></slot>
|
||||||
|
</nav>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import SidebarNavDivider from './SidebarNavDivider'
|
||||||
|
import SidebarNavDropdown from './SidebarNavDropdown'
|
||||||
|
import SidebarNavLink from './SidebarNavLink'
|
||||||
|
import SidebarNavTitle from './SidebarNavTitle'
|
||||||
|
import SidebarNavItem from './SidebarNavItem'
|
||||||
|
import SidebarNavLabel from './SidebarNavLabel'
|
||||||
|
export default {
|
||||||
|
name: 'SidebarNav',
|
||||||
|
props: {
|
||||||
|
navItems: {
|
||||||
|
type: Array,
|
||||||
|
required: true,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
SidebarNavDivider,
|
||||||
|
SidebarNavDropdown,
|
||||||
|
SidebarNavLink,
|
||||||
|
SidebarNavTitle,
|
||||||
|
SidebarNavItem,
|
||||||
|
SidebarNavLabel
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="css">
|
||||||
|
.nav-link {
|
||||||
|
cursor:pointer;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<router-link tag="li" class="nav-item nav-dropdown" :to="url" disabled>
|
<router-link tag="li" class="nav-item nav-dropdown" :to="url" disabled>
|
||||||
<div class="nav-link nav-dropdown-toggle" @click="handleClick"><i :class="icon"></i> {{name}}</div>
|
<div class="nav-link nav-dropdown-toggle" @click="handleClick"><i :class="classIcon"></i> {{name}}</div>
|
||||||
<ul class="nav-dropdown-items">
|
<ul class="nav-dropdown-items">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</ul>
|
</ul>
|
||||||
@@ -23,6 +23,14 @@ export default {
|
|||||||
default: ''
|
default: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
classIcon () {
|
||||||
|
return [
|
||||||
|
'nav-icon',
|
||||||
|
this.icon
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleClick (e) {
|
handleClick (e) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-if="isExternalLink">
|
<div v-if="isExternalLink">
|
||||||
<a :href="url" :class="classList">
|
<a :href="url" :class="classList">
|
||||||
<i :class="icon"></i> {{name}}
|
<i :class="classIcon"></i> {{name}}
|
||||||
<b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
|
<b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<router-link :to="url" :class="classList">
|
<router-link :to="url" :class="classList">
|
||||||
<i :class="icon"></i> {{name}}
|
<i :class="classIcon"></i> {{name}}
|
||||||
<b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
|
<b-badge v-if="badge && badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
@@ -50,6 +50,12 @@
|
|||||||
...this.itemClasses
|
...this.itemClasses
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
classIcon () {
|
||||||
|
return [
|
||||||
|
'nav-icon',
|
||||||
|
this.icon
|
||||||
|
]
|
||||||
|
},
|
||||||
linkVariant () {
|
linkVariant () {
|
||||||
return this.variant ? `nav-link-${this.variant}` : ''
|
return this.variant ? `nav-link-${this.variant}` : ''
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -0,0 +1,55 @@
|
|||||||
|
<template>
|
||||||
|
<button
|
||||||
|
:display="display"
|
||||||
|
:mobile="mobile"
|
||||||
|
:class="classList"
|
||||||
|
type="button"
|
||||||
|
@click="sidebarToggle">
|
||||||
|
<span class="navbar-toggler-icon" />
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { sidebarCssClasses, validBreakpoints, checkBreakpoint } from '../../shared/classes'
|
||||||
|
import toggleClasses from '../../shared/toggle-classes'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'SidebarToggler',
|
||||||
|
props: {
|
||||||
|
mobile: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
display: {
|
||||||
|
type: String,
|
||||||
|
default: 'lg'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
classList () {
|
||||||
|
return [
|
||||||
|
'navbar-toggler'
|
||||||
|
// 'd-none',
|
||||||
|
// 'd-lg-inline-block'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
this.toggle()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggle () {
|
||||||
|
const [display, mobile] = [this.display, this.mobile]
|
||||||
|
let cssClass = sidebarCssClasses[0]
|
||||||
|
if (!mobile && display && checkBreakpoint(display, validBreakpoints)) {
|
||||||
|
cssClass = `sidebar-${display}-show`
|
||||||
|
}
|
||||||
|
toggleClasses(cssClass, sidebarCssClasses)
|
||||||
|
},
|
||||||
|
sidebarToggle (e) {
|
||||||
|
e.preventDefault()
|
||||||
|
this.toggle()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
import Sidebar from './Sidebar.vue'
|
||||||
|
import SidebarFooter from './SidebarFooter'
|
||||||
|
import SidebarForm from './SidebarForm'
|
||||||
|
import SidebarHeader from './SidebarHeader'
|
||||||
|
import SidebarMinimizer from './SidebarMinimizer'
|
||||||
|
import SidebarNav from './SidebarNav'
|
||||||
|
import SidebarNavDivider from './SidebarNavDivider'
|
||||||
|
import SidebarNavDropdown from './SidebarNavDropdown'
|
||||||
|
import SidebarNavItem from './SidebarNavItem'
|
||||||
|
import SidebarNavLabel from './SidebarNavLabel'
|
||||||
|
import SidebarNavLink from './SidebarNavLink'
|
||||||
|
import SidebarNavTitle from './SidebarNavTitle'
|
||||||
|
import SidebarToggler from './SidebarToggler'
|
||||||
|
|
||||||
|
export {
|
||||||
|
Sidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, SidebarNavDivider, SidebarNavItem, SidebarNavDropdown, SidebarNavLabel, SidebarNavLink, SidebarNavTitle, SidebarToggler
|
||||||
|
}
|
||||||
@@ -1,17 +1,22 @@
|
|||||||
<template>
|
<template>
|
||||||
<label :class="classList">
|
<label :class="classList">
|
||||||
<input type="checkbox"
|
<input
|
||||||
class="switch-input"
|
:value="value"
|
||||||
:value="value"
|
:checked="isChecked"
|
||||||
:checked="isChecked"
|
:disabled="isDisabled"
|
||||||
@change="handleChange">
|
type="checkbox"
|
||||||
|
class="switch-input"
|
||||||
|
@change="handleChange">
|
||||||
<template v-if="isOn">
|
<template v-if="isOn">
|
||||||
<span class="switch-label" :data-on="on" :data-off="off"></span>
|
<span
|
||||||
|
:data-on="on"
|
||||||
|
:data-off="off"
|
||||||
|
class="switch-label" />
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<span class="switch-label"></span>
|
<span class="switch-label" />
|
||||||
</template>
|
</template>
|
||||||
<span class="switch-handle"></span>
|
<span class="switch-handle" />
|
||||||
</label>
|
</label>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -23,12 +28,15 @@ export default {
|
|||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
value: {
|
value: {
|
||||||
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
uncheckedValue: {
|
uncheckedValue: {
|
||||||
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
checked: {
|
checked: {
|
||||||
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
},
|
},
|
||||||
type: {
|
type: {
|
||||||
@@ -54,7 +62,12 @@ export default {
|
|||||||
size: {
|
size: {
|
||||||
type: String,
|
type: String,
|
||||||
default: null
|
default: null
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
classList () {
|
classList () {
|
||||||
@@ -73,7 +86,7 @@ export default {
|
|||||||
return this.variant ? `switch-${this.variant}` : `switch-secondary`
|
return this.variant ? `switch-${this.variant}` : `switch-secondary`
|
||||||
},
|
},
|
||||||
switchPill () {
|
switchPill () {
|
||||||
return !this.pill ? null : `switch-pill`
|
return this.pill ? `switch-pill` : null
|
||||||
},
|
},
|
||||||
switchSize () {
|
switchSize () {
|
||||||
return this.size ? `switch-${this.size}` : ''
|
return this.size ? `switch-${this.size}` : ''
|
||||||
@@ -81,8 +94,11 @@ export default {
|
|||||||
isChecked () {
|
isChecked () {
|
||||||
return this.checked === this.value
|
return this.checked === this.value
|
||||||
},
|
},
|
||||||
|
isDisabled () {
|
||||||
|
return this.disabled ? true : null
|
||||||
|
},
|
||||||
isOn () {
|
isOn () {
|
||||||
return !this.on ? null : true
|
return this.on ? true : null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
+22
-7
@@ -1,17 +1,32 @@
|
|||||||
import Aside from './Aside.vue'
|
import Breadcrumb from './Breadcrumb/Breadcrumb'
|
||||||
import Breadcrumb from './Breadcrumb.vue'
|
import Callout from './Callout/Callout'
|
||||||
import Callout from './Callout.vue'
|
import Footer from './Footer/Footer'
|
||||||
import Footer from './Footer.vue'
|
import Switch from './Switch/Switch'
|
||||||
import Header from './Header/Header.vue'
|
|
||||||
import Sidebar from './Sidebar/Sidebar.vue'
|
import { Aside, AsideToggler } from './Aside'
|
||||||
import Switch from './Switch.vue'
|
import { Header, HeaderDropdown } from './Header'
|
||||||
|
import { Sidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, SidebarNavDivider, SidebarNavItem, SidebarNavDropdown, SidebarNavLabel, SidebarNavLink, SidebarNavTitle, SidebarToggler } from './Sidebar'
|
||||||
|
|
||||||
export {
|
export {
|
||||||
Aside,
|
Aside,
|
||||||
|
AsideToggler,
|
||||||
Breadcrumb,
|
Breadcrumb,
|
||||||
Callout,
|
Callout,
|
||||||
Footer,
|
Footer,
|
||||||
Header,
|
Header,
|
||||||
|
HeaderDropdown,
|
||||||
Sidebar,
|
Sidebar,
|
||||||
|
SidebarFooter,
|
||||||
|
SidebarForm,
|
||||||
|
SidebarHeader,
|
||||||
|
SidebarMinimizer,
|
||||||
|
SidebarNav,
|
||||||
|
SidebarNavDivider,
|
||||||
|
SidebarNavItem,
|
||||||
|
SidebarNavDropdown,
|
||||||
|
SidebarNavLabel,
|
||||||
|
SidebarNavLink,
|
||||||
|
SidebarNavTitle,
|
||||||
|
SidebarToggler,
|
||||||
Switch
|
Switch
|
||||||
}
|
}
|
||||||
|
|||||||
+95
-8
@@ -1,36 +1,123 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app">
|
<div class="app">
|
||||||
<AppHeader/>
|
<AppHeader fixed>
|
||||||
|
<SidebarToggler class="d-lg-none" display="md" mobile />
|
||||||
|
<b-link class="navbar-brand" to="#">
|
||||||
|
<img class="navbar-brand-full" src="static/img/brand/logo.svg" width="89" height="25" alt="CoreUI Logo">
|
||||||
|
<img class="navbar-brand-minimized" src="static/img/brand/sygnet.svg" width="30" height="30" alt="CoreUI Logo">
|
||||||
|
</b-link>
|
||||||
|
<SidebarToggler class="d-md-down-none" display="lg" />
|
||||||
|
<b-navbar-nav class="d-md-down-none">
|
||||||
|
<b-nav-item class="px-3">Dashboard</b-nav-item>
|
||||||
|
<b-nav-item class="px-3">Users</b-nav-item>
|
||||||
|
<b-nav-item class="px-3">Settings</b-nav-item>
|
||||||
|
</b-navbar-nav>
|
||||||
|
<b-navbar-nav class="ml-auto">
|
||||||
|
<b-nav-item class="d-md-down-none">
|
||||||
|
<i class="icon-bell"></i>
|
||||||
|
<b-badge pill variant="danger">5</b-badge>
|
||||||
|
</b-nav-item>
|
||||||
|
<b-nav-item class="d-md-down-none">
|
||||||
|
<i class="icon-list"></i>
|
||||||
|
</b-nav-item>
|
||||||
|
<b-nav-item class="d-md-down-none">
|
||||||
|
<i class="icon-location-pin"></i>
|
||||||
|
</b-nav-item>
|
||||||
|
<AppHeaderDropdown right no-caret>
|
||||||
|
<div>
|
||||||
|
<template slot="button-content">
|
||||||
|
<img
|
||||||
|
src="static/img/avatars/6.jpg"
|
||||||
|
class="img-avatar"
|
||||||
|
alt="admin@bootstrapmaster.com" />
|
||||||
|
</template>
|
||||||
|
<b-dropdown-header tag="div" class="text-center"><strong>Account</strong></b-dropdown-header>
|
||||||
|
<b-dropdown-item><i class="fa fa-bell-o" /> Updates
|
||||||
|
<b-badge variant="info">{{ itemsCount }}</b-badge>
|
||||||
|
</b-dropdown-item>
|
||||||
|
<b-dropdown-item><i class="fa fa-envelope-o" /> Messages
|
||||||
|
<b-badge variant="success">{{ itemsCount }}</b-badge>
|
||||||
|
</b-dropdown-item>
|
||||||
|
<b-dropdown-item><i class="fa fa-tasks" /> Tasks
|
||||||
|
<b-badge variant="danger">{{ itemsCount }}</b-badge>
|
||||||
|
</b-dropdown-item>
|
||||||
|
<b-dropdown-item><i class="fa fa-comments" /> Comments
|
||||||
|
<b-badge variant="warning">{{ itemsCount }}</b-badge>
|
||||||
|
</b-dropdown-item>
|
||||||
|
<b-dropdown-header
|
||||||
|
tag="div"
|
||||||
|
class="text-center">
|
||||||
|
<strong>Settings</strong>
|
||||||
|
</b-dropdown-header>
|
||||||
|
<b-dropdown-item><i class="fa fa-user" /> Profile</b-dropdown-item>
|
||||||
|
<b-dropdown-item><i class="fa fa-wrench" /> Settings</b-dropdown-item>
|
||||||
|
<b-dropdown-item><i class="fa fa-usd" /> Payments
|
||||||
|
<b-badge variant="secondary">{{ itemsCount }}</b-badge>
|
||||||
|
</b-dropdown-item>
|
||||||
|
<b-dropdown-item><i class="fa fa-file" /> Projects
|
||||||
|
<b-badge variant="primary">{{ itemsCount }}</b-badge>
|
||||||
|
</b-dropdown-item>
|
||||||
|
<b-dropdown-divider />
|
||||||
|
<b-dropdown-item><i class="fa fa-shield" /> Lock Account</b-dropdown-item>
|
||||||
|
<b-dropdown-item><i class="fa fa-lock" /> Logout</b-dropdown-item>
|
||||||
|
</div>
|
||||||
|
</AppHeaderDropdown>
|
||||||
|
</b-navbar-nav>
|
||||||
|
<AsideToggler class="d-none d-lg-block" />
|
||||||
|
<!--<AsideToggler class="d-lg-none" mobile />-->
|
||||||
|
</AppHeader>
|
||||||
<div class="app-body">
|
<div class="app-body">
|
||||||
<Sidebar :navItems="nav"/>
|
<AppSidebar fixed>
|
||||||
|
<SidebarHeader/>
|
||||||
|
<SidebarForm/>
|
||||||
|
<SidebarNav :navItems="nav"></SidebarNav>
|
||||||
|
<SidebarFooter/>
|
||||||
|
<SidebarMinimizer/>
|
||||||
|
</AppSidebar>
|
||||||
<main class="main">
|
<main class="main">
|
||||||
<breadcrumb :list="list"/>
|
<breadcrumb :list="list"/>
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<AppAside/>
|
<AppAside fixed>
|
||||||
|
<!--aside-->
|
||||||
|
<FullAside/>
|
||||||
|
</AppAside>
|
||||||
</div>
|
</div>
|
||||||
<AppFooter/>
|
<AppFooter>
|
||||||
|
<!--footer-->
|
||||||
|
</AppFooter>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import nav from '../_nav'
|
import nav from '../_nav'
|
||||||
import { Header as AppHeader, Sidebar, Aside as AppAside, Footer as AppFooter, Breadcrumb } from '../components/'
|
import { Header as AppHeader, HeaderDropdown as AppHeaderDropdown, SidebarToggler, Sidebar as AppSidebar, SidebarFooter, SidebarForm, SidebarHeader, SidebarMinimizer, SidebarNav, Aside as AppAside, AsideToggler, Footer as AppFooter, Breadcrumb } from '../components/'
|
||||||
|
import FullAside from './FullAside'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'full',
|
name: 'full',
|
||||||
components: {
|
components: {
|
||||||
|
AsideToggler,
|
||||||
AppHeader,
|
AppHeader,
|
||||||
Sidebar,
|
AppHeaderDropdown,
|
||||||
|
AppSidebar,
|
||||||
AppAside,
|
AppAside,
|
||||||
AppFooter,
|
AppFooter,
|
||||||
Breadcrumb
|
Breadcrumb,
|
||||||
|
FullAside,
|
||||||
|
SidebarForm,
|
||||||
|
SidebarFooter,
|
||||||
|
SidebarToggler,
|
||||||
|
SidebarHeader,
|
||||||
|
SidebarNav,
|
||||||
|
SidebarMinimizer
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
nav: nav.items
|
nav: nav.items,
|
||||||
|
itemsCount: 42
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|||||||
@@ -0,0 +1,252 @@
|
|||||||
|
<template>
|
||||||
|
<b-tabs>
|
||||||
|
<b-tab>
|
||||||
|
<template slot="title">
|
||||||
|
<i class='icon-list'></i>
|
||||||
|
</template>
|
||||||
|
<b-list-group class="list-group-accent">
|
||||||
|
<b-list-group-item class="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">
|
||||||
|
Today
|
||||||
|
</b-list-group-item>
|
||||||
|
<b-list-group-item class="list-group-item list-group-item-accent-warning list-group-item-divider">
|
||||||
|
<div class="avatar float-right">
|
||||||
|
<img class="img-avatar" src="static/img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
|
||||||
|
</div>
|
||||||
|
<div>Meeting with
|
||||||
|
<strong>Lucas</strong>
|
||||||
|
</div>
|
||||||
|
<small class="text-muted mr-3">
|
||||||
|
<i class="icon-calendar"></i> 1 - 3pm
|
||||||
|
</small>
|
||||||
|
<small class="text-muted">
|
||||||
|
<i class="icon-location-pin"></i> Palo Alto, CA
|
||||||
|
</small>
|
||||||
|
</b-list-group-item>
|
||||||
|
<b-list-group-item class="list-group-item-accent-info">
|
||||||
|
<div class="avatar float-right">
|
||||||
|
<img class="img-avatar" src="static/img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
|
||||||
|
</div>
|
||||||
|
<div>Skype with <strong>Megan</strong>
|
||||||
|
</div>
|
||||||
|
<small class="text-muted mr-3"><i class="icon-calendar"></i> 4 - 5pm</small>
|
||||||
|
<small class="text-muted"><i class="icon-social-skype"></i> On-line</small>
|
||||||
|
</b-list-group-item>
|
||||||
|
<hr class="transparent mx-3 my-0">
|
||||||
|
<b-list-group-item class="list-group-item-accent-secondary bg-light text-center font-weight-bold text-muted text-uppercase small">
|
||||||
|
Tomorrow
|
||||||
|
</b-list-group-item>
|
||||||
|
<b-list-group-item class="list-group-item-accent-danger list-group-item-divider">
|
||||||
|
<div>New UI Project - <strong>deadline</strong>
|
||||||
|
</div>
|
||||||
|
<small class="text-muted mr-3"><i class="icon-calendar"></i> 10 - 11pm</small>
|
||||||
|
<small class="text-muted"><i class="icon-home"></i> creativeLabs HQ</small>
|
||||||
|
<div class="avatars-stack mt-2">
|
||||||
|
<div class="avatar avatar-xs">
|
||||||
|
<img class="img-avatar" src="static/img/avatars/2.jpg" alt="admin@bootstrapmaster.com">
|
||||||
|
</div>
|
||||||
|
<div class="avatar avatar-xs">
|
||||||
|
<img class="img-avatar" src="static/img/avatars/3.jpg" alt="admin@bootstrapmaster.com">
|
||||||
|
</div>
|
||||||
|
<div class="avatar avatar-xs">
|
||||||
|
<img class="img-avatar" src="static/img/avatars/4.jpg" alt="admin@bootstrapmaster.com">
|
||||||
|
</div>
|
||||||
|
<div class="avatar avatar-xs">
|
||||||
|
<img class="img-avatar" src="static/img/avatars/5.jpg" alt="admin@bootstrapmaster.com">
|
||||||
|
</div>
|
||||||
|
<div class="avatar avatar-xs">
|
||||||
|
<img class="img-avatar" src="static/img/avatars/6.jpg" alt="admin@bootstrapmaster.com">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</b-list-group-item>
|
||||||
|
<b-list-group-item class="list-group-item-accent-success list-group-item-divider">
|
||||||
|
<div><strong>#10 Startups.Garden</strong> Meetup</div>
|
||||||
|
<small class="text-muted mr-3"><i class="icon-calendar"></i> 1 - 3pm</small>
|
||||||
|
<small class="text-muted"><i class="icon-location-pin"></i> Palo Alto, CA</small>
|
||||||
|
</b-list-group-item>
|
||||||
|
<b-list-group-item class="list-group-item-accent-primary list-group-item-divider">
|
||||||
|
<div><strong>Team meeting</strong></div>
|
||||||
|
<small class="text-muted mr-3"><i class="icon-calendar"></i> 4 - 6pm</small>
|
||||||
|
<small class="text-muted"><i class="icon-home"></i> creativeLabs HQ</small>
|
||||||
|
<div class="avatars-stack mt-2">
|
||||||
|
<div class="avatar avatar-xs">
|
||||||
|
<img src="static/img/avatars/2.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||||
|
</div>
|
||||||
|
<div class="avatar avatar-xs">
|
||||||
|
<img src="static/img/avatars/3.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||||
|
</div>
|
||||||
|
<div class="avatar avatar-xs">
|
||||||
|
<img src="static/img/avatars/4.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||||
|
</div>
|
||||||
|
<div class="avatar avatar-xs">
|
||||||
|
<img src="static/img/avatars/5.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||||
|
</div>
|
||||||
|
<div class="avatar avatar-xs">
|
||||||
|
<img src="static/img/avatars/6.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||||
|
</div>
|
||||||
|
<div class="avatar avatar-xs">
|
||||||
|
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||||
|
</div>
|
||||||
|
<div class="avatar avatar-xs">
|
||||||
|
<img src="static/img/avatars/8.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</b-list-group-item>
|
||||||
|
</b-list-group>
|
||||||
|
</b-tab>
|
||||||
|
<b-tab>
|
||||||
|
<template slot="title">
|
||||||
|
<i class='icon-speech'></i>
|
||||||
|
</template>
|
||||||
|
<div class="p-3">
|
||||||
|
<div class="message">
|
||||||
|
<div class="py-3 pb-5 mr-3 float-left">
|
||||||
|
<div class="avatar">
|
||||||
|
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||||
|
<b-badge variant="success" class="avatar-status"></b-badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<small class="text-muted">Lukasz Holeczek</small>
|
||||||
|
<small class="text-muted float-right mt-1">1:52 PM</small>
|
||||||
|
</div>
|
||||||
|
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||||
|
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="message">
|
||||||
|
<div class="py-3 pb-5 mr-3 float-left">
|
||||||
|
<div class="avatar">
|
||||||
|
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||||
|
<b-badge variant="success" class="avatar-status"></b-badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<small class="text-muted">Lukasz Holeczek</small>
|
||||||
|
<small class="text-muted float-right mt-1">1:52 PM</small>
|
||||||
|
</div>
|
||||||
|
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||||
|
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="message">
|
||||||
|
<div class="py-3 pb-5 mr-3 float-left">
|
||||||
|
<div class="avatar">
|
||||||
|
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||||
|
<b-badge variant="success" class="avatar-status"></b-badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<small class="text-muted">Lukasz Holeczek</small>
|
||||||
|
<small class="text-muted float-right mt-1">1:52 PM</small>
|
||||||
|
</div>
|
||||||
|
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||||
|
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="message">
|
||||||
|
<div class="py-3 pb-5 mr-3 float-left">
|
||||||
|
<div class="avatar">
|
||||||
|
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||||
|
<b-badge variant="success" class="avatar-status"></b-badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<small class="text-muted">Lukasz Holeczek</small>
|
||||||
|
<small class="text-muted float-right mt-1">1:52 PM</small>
|
||||||
|
</div>
|
||||||
|
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||||
|
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="message">
|
||||||
|
<div class="py-3 pb-5 mr-3 float-left">
|
||||||
|
<div class="avatar">
|
||||||
|
<img src="static/img/avatars/7.jpg" class="img-avatar" alt="admin@bootstrapmaster.com">
|
||||||
|
<b-badge variant="success" class="avatar-status"></b-badge>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<small class="text-muted">Lukasz Holeczek</small>
|
||||||
|
<small class="text-muted float-right mt-1">1:52 PM</small>
|
||||||
|
</div>
|
||||||
|
<div class="text-truncate font-weight-bold">Lorem ipsum dolor sit amet</div>
|
||||||
|
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</b-tab>
|
||||||
|
<b-tab>
|
||||||
|
<template slot="title">
|
||||||
|
<i class='icon-settings'></i>
|
||||||
|
</template>
|
||||||
|
<div class="p-3">
|
||||||
|
<h6>Settings</h6>
|
||||||
|
<div class="aside-options">
|
||||||
|
<div class="clearfix mt-4">
|
||||||
|
<small><b>Option 1</b></small>
|
||||||
|
<c-switch type="text" variant="success" on="on" off="off" :pill="true" size="sm" class="float-right" :checked="true" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="aside-options">
|
||||||
|
<div class="clearfix mt-3">
|
||||||
|
<small><b>Option 2</b></small>
|
||||||
|
<c-switch type="text" variant="success" on="on" off="off" :pill="true" size="sm" class="float-right" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<small class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="aside-options">
|
||||||
|
<div class="clearfix mt-3">
|
||||||
|
<small><b>Option 3</b></small>
|
||||||
|
<c-switch type="text" variant="success" on="on" off="off" :pill="true" size="sm" class="float-right" disabled />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<small class="text-muted">Disabled option.</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="aside-options">
|
||||||
|
<div class="clearfix mt-3">
|
||||||
|
<small><b>Option 4</b></small>
|
||||||
|
<c-switch type="text" variant="success" on="on" off="off" :pill="true" size="sm" class="float-right" checked />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<h6>System Utilization</h6>
|
||||||
|
<div class="text-uppercase mb-1 mt-4">
|
||||||
|
<small><b>CPU Usage</b></small>
|
||||||
|
</div>
|
||||||
|
<b-progress height={} class="progress-xs" variant="info" :value="25"></b-progress>
|
||||||
|
<small class="text-muted">348 Processes. 1/4 Cores.</small>
|
||||||
|
<div class="text-uppercase mb-1 mt-2">
|
||||||
|
<small><b>Memory Usage</b></small>
|
||||||
|
</div>
|
||||||
|
<b-progress height={} class="progress-xs" variant="warning" :value="70"></b-progress>
|
||||||
|
<small class="text-muted">11444GB/16384MB</small>
|
||||||
|
<div class="text-uppercase mb-1 mt-2">
|
||||||
|
<small><b>SSD 1 Usage</b></small>
|
||||||
|
</div>
|
||||||
|
<b-progress height={} class="progress-xs" variant="danger" :value="95"></b-progress>
|
||||||
|
<small class="text-muted">243GB/256GB</small>
|
||||||
|
<div class="text-uppercase mb-1 mt-2">
|
||||||
|
<small><b>SSD 2 Usage</b></small>
|
||||||
|
</div>
|
||||||
|
<b-progress height={} class="progress-xs" variant="success" :value="10"></b-progress>
|
||||||
|
<small class="text-muted">25GB/256GB</small>
|
||||||
|
</div>
|
||||||
|
</b-tab>
|
||||||
|
</b-tabs>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {Switch as cSwitch} from '../components'
|
||||||
|
export default {
|
||||||
|
name: 'FullAside',
|
||||||
|
components: {
|
||||||
|
cSwitch
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
@@ -0,0 +1,21 @@
|
|||||||
|
export const sidebarCssClasses = [
|
||||||
|
'sidebar-show',
|
||||||
|
'sidebar-sm-show',
|
||||||
|
'sidebar-md-show',
|
||||||
|
'sidebar-lg-show',
|
||||||
|
'sidebar-xl-show'
|
||||||
|
]
|
||||||
|
|
||||||
|
export const asideMenuCssClasses = [
|
||||||
|
'aside-menu-show',
|
||||||
|
'aside-menu-sm-show',
|
||||||
|
'aside-menu-md-show',
|
||||||
|
'aside-menu-lg-show',
|
||||||
|
'aside-menu-xl-show'
|
||||||
|
]
|
||||||
|
|
||||||
|
export const validBreakpoints = [ 'sm', 'md', 'lg', 'xl' ]
|
||||||
|
|
||||||
|
export function checkBreakpoint (breakpoint, list) {
|
||||||
|
return list.indexOf(breakpoint) > -1
|
||||||
|
}
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
export default function toggleClasses (toggleClass, classList) {
|
||||||
|
const level = classList.indexOf(toggleClass)
|
||||||
|
const removeClassList = classList.slice(0, level)
|
||||||
|
removeClassList.map((className) => document.body.classList.remove(className))
|
||||||
|
document.body.classList.toggle(toggleClass)
|
||||||
|
}
|
||||||
@@ -308,7 +308,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import cSwitch from '../../components/Switch'
|
import { Switch as cSwitch } from '../../components'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'switches',
|
name: 'switches',
|
||||||
|
|||||||
@@ -0,0 +1,53 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
width="707.1px" height="200px" viewBox="0 0 707.1 200" style="enable-background:new 0 0 707.1 200;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#1FA8D7;}
|
||||||
|
.st1{fill:#FFFFFF;}
|
||||||
|
.st2{opacity:4.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;}
|
||||||
|
.st3{opacity:8.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;}
|
||||||
|
.st4{opacity:0;stroke:#FFFFFF;stroke-miterlimit:10;}
|
||||||
|
.st5{fill:#333333;}
|
||||||
|
.st6{fill:#1EA7D6;}
|
||||||
|
</style>
|
||||||
|
<polygon class="st0" points="0,150 0,50 86.6,0 173.2,50 173.2,150 86.6,200 "/>
|
||||||
|
<polygon class="st1" points="86.6,133.3 57.7,116.7 57.7,83.3 86.6,66.7 115.5,83.3 144.3,66.7 86.6,33.3 28.9,66.7 28.9,133.3
|
||||||
|
86.6,166.7 144.3,133.3 115.5,116.7 "/>
|
||||||
|
<polygon class="st2" points="0,50 86.6,100 86.6,0 "/>
|
||||||
|
<polygon class="st2" points="0,150 86.6,200 86.6,100 "/>
|
||||||
|
<polygon class="st3" points="86.6,100 173.2,150 173.2,50 "/>
|
||||||
|
<polygon class="st4" points="86.6,100 0,50 0,150 "/>
|
||||||
|
<polygon class="st3" points="173.2,150 86.6,100 86.6,200 "/>
|
||||||
|
<polygon class="st3" points="173.2,50 86.6,0 86.6,100 "/>
|
||||||
|
<g>
|
||||||
|
<path class="st5" d="M290.4,127.3c1,0,1.8,0.4,2.6,1.1l7.2,7.8c-4,4.9-8.8,8.7-14.6,11.3c-5.8,2.6-12.7,3.9-20.8,3.9
|
||||||
|
c-7.2,0-13.8-1.2-19.5-3.7c-5.8-2.5-10.7-5.9-14.8-10.3c-4.1-4.4-7.2-9.7-9.4-15.8c-2.2-6.1-3.3-12.8-3.3-20
|
||||||
|
c0-7.3,1.2-14.1,3.6-20.1c2.4-6.1,5.8-11.4,10.3-15.8c4.4-4.4,9.7-7.8,15.8-10.3c6.1-2.5,12.9-3.7,20.4-3.7c7.2,0,13.6,1.2,19,3.5
|
||||||
|
c5.4,2.3,10.1,5.4,13.9,9.2l-6.1,8.4c-0.4,0.5-0.8,1-1.4,1.4c-0.6,0.4-1.3,0.6-2.3,0.6c-1,0-2.1-0.4-3.2-1.2s-2.5-1.7-4.1-2.6
|
||||||
|
c-1.7-0.9-3.8-1.8-6.3-2.6c-2.5-0.8-5.8-1.2-9.7-1.2c-4.6,0-8.8,0.8-12.7,2.4c-3.8,1.6-7.2,3.9-9.9,6.9s-4.9,6.6-6.5,10.8
|
||||||
|
c-1.6,4.3-2.3,9-2.3,14.3c0,5.5,0.8,10.4,2.3,14.6c1.6,4.3,3.7,7.9,6.3,10.8c2.7,2.9,5.8,5.2,9.4,6.7c3.6,1.6,7.5,2.3,11.6,2.3
|
||||||
|
c2.5,0,4.7-0.1,6.7-0.4c2-0.3,3.8-0.7,5.5-1.3c1.7-0.6,3.3-1.3,4.8-2.3c1.5-0.9,3-2.1,4.5-3.4c0.4-0.4,0.9-0.7,1.4-1
|
||||||
|
C289.3,127.4,289.9,127.3,290.4,127.3z"/>
|
||||||
|
<path class="st5" d="M407.5,101.5c0,7.2-1.2,13.8-3.6,19.9c-2.4,6.1-5.7,11.4-10.1,15.8c-4.3,4.5-9.5,7.9-15.6,10.4
|
||||||
|
c-6.1,2.5-12.8,3.7-20.2,3.7c-7.4,0-14.1-1.2-20.2-3.7c-6.1-2.5-11.3-6-15.7-10.4c-4.3-4.5-7.7-9.7-10.1-15.8
|
||||||
|
c-2.4-6.1-3.6-12.7-3.6-19.9c0-7.2,1.2-13.8,3.6-19.9c2.4-6.1,5.7-11.4,10.1-15.8c4.3-4.5,9.6-7.9,15.7-10.4
|
||||||
|
c6.1-2.5,12.8-3.7,20.2-3.7c7.4,0,14.1,1.3,20.2,3.8c6.1,2.5,11.3,6,15.6,10.4c4.3,4.4,7.7,9.7,10.1,15.8
|
||||||
|
C406.3,87.7,407.5,94.3,407.5,101.5z M388.9,101.5c0-5.4-0.7-10.2-2.1-14.4c-1.4-4.3-3.5-7.9-6.1-10.8c-2.7-3-5.9-5.2-9.7-6.8
|
||||||
|
c-3.8-1.6-8.1-2.4-12.9-2.4c-4.8,0-9.1,0.8-12.9,2.4c-3.8,1.6-7.1,3.8-9.8,6.8c-2.7,3-4.7,6.6-6.2,10.8c-1.4,4.3-2.2,9.1-2.2,14.4
|
||||||
|
c0,5.4,0.7,10.2,2.2,14.4c1.4,4.3,3.5,7.9,6.2,10.8c2.7,2.9,5.9,5.2,9.8,6.8c3.8,1.6,8.1,2.4,12.9,2.4c4.8,0,9.1-0.8,12.9-2.4
|
||||||
|
c3.8-1.6,7-3.8,9.7-6.8c2.7-2.9,4.7-6.5,6.1-10.8C388.2,111.7,388.9,106.9,388.9,101.5z"/>
|
||||||
|
<path class="st5" d="M440.6,112.2v38.1h-18.2V52.7h29.8c6.7,0,12.4,0.7,17.1,2.1c4.7,1.4,8.6,3.3,11.7,5.8c3,2.5,5.3,5.4,6.7,8.9
|
||||||
|
c1.4,3.4,2.1,7.2,2.1,11.4c0,3.3-0.5,6.4-1.5,9.3c-1,2.9-2.4,5.6-4.2,8c-1.8,2.4-4.1,4.5-6.8,6.3c-2.7,1.8-5.7,3.2-9.1,4.3
|
||||||
|
c2.3,1.3,4.3,3.2,5.9,5.6l24.4,36h-16.3c-1.6,0-2.9-0.3-4-0.9c-1.1-0.6-2-1.5-2.8-2.7l-20.5-31.3c-0.8-1.2-1.6-2-2.5-2.5
|
||||||
|
c-0.9-0.5-2.3-0.7-4.1-0.7H440.6z M440.6,99.1h11.3c3.4,0,6.4-0.4,8.9-1.3c2.5-0.9,4.6-2,6.3-3.5c1.6-1.5,2.9-3.3,3.7-5.4
|
||||||
|
c0.8-2.1,1.2-4.3,1.2-6.8c0-4.9-1.6-8.8-4.9-11.4c-3.3-2.7-8.2-4-15-4h-11.6V99.1z"/>
|
||||||
|
<path class="st5" d="M571.8,52.7v14.4h-43.3v27.1h34.1v14h-34.1v27.6h43.3v14.5h-61.6V52.7H571.8z"/>
|
||||||
|
<path class="st6" d="M626.8,135.7c3.5,0,6.6-0.6,9.4-1.8c2.8-1.2,5.1-2.8,7-4.9c1.9-2.1,3.4-4.7,4.4-7.7c1-3,1.5-6.4,1.5-10.1V52.7
|
||||||
|
h18.2v58.5c0,5.8-0.9,11.2-2.8,16.1c-1.9,4.9-4.6,9.2-8.1,12.8c-3.5,3.6-7.8,6.4-12.8,8.4s-10.6,3-16.9,3s-11.9-1-16.9-3
|
||||||
|
s-9.2-4.8-12.7-8.4c-3.5-3.6-6.2-7.8-8-12.8c-1.9-4.9-2.8-10.3-2.8-16.1V52.7h18.2v58.4c0,3.7,0.5,7.1,1.5,10.1
|
||||||
|
c1,3,2.5,5.6,4.4,7.7c1.9,2.1,4.2,3.8,7,5C620.1,135.1,623.3,135.7,626.8,135.7z"/>
|
||||||
|
<path class="st6" d="M706.2,150.3H688V52.7h18.2V150.3z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.2 KiB |
@@ -0,0 +1,53 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||||
|
<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
width="173.2px" height="200px" viewBox="0 0 173.2 200" style="enable-background:new 0 0 173.2 200;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#1FA8D7;}
|
||||||
|
.st1{fill:#FFFFFF;}
|
||||||
|
.st2{opacity:4.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;}
|
||||||
|
.st3{opacity:8.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;}
|
||||||
|
.st4{opacity:0;stroke:#FFFFFF;stroke-miterlimit:10;}
|
||||||
|
.st5{fill:#333333;}
|
||||||
|
.st6{fill:#1EA7D6;}
|
||||||
|
</style>
|
||||||
|
<polygon class="st0" points="0,150 0,50 86.6,0 173.2,50 173.2,150 86.6,200 "/>
|
||||||
|
<polygon class="st1" points="86.6,133.3 57.7,116.7 57.7,83.3 86.6,66.7 115.5,83.3 144.3,66.7 86.6,33.3 28.9,66.7 28.9,133.3
|
||||||
|
86.6,166.7 144.3,133.3 115.5,116.7 "/>
|
||||||
|
<polygon class="st2" points="0,50 86.6,100 86.6,0 "/>
|
||||||
|
<polygon class="st2" points="0,150 86.6,200 86.6,100 "/>
|
||||||
|
<polygon class="st3" points="86.6,100 173.2,150 173.2,50 "/>
|
||||||
|
<polygon class="st4" points="86.6,100 0,50 0,150 "/>
|
||||||
|
<polygon class="st3" points="173.2,150 86.6,100 86.6,200 "/>
|
||||||
|
<polygon class="st3" points="173.2,50 86.6,0 86.6,100 "/>
|
||||||
|
<g>
|
||||||
|
<path class="st5" d="M290.4,127.3c1,0,1.8,0.4,2.6,1.1l7.2,7.8c-4,4.9-8.8,8.7-14.6,11.3c-5.8,2.6-12.7,3.9-20.8,3.9
|
||||||
|
c-7.2,0-13.8-1.2-19.5-3.7c-5.8-2.5-10.7-5.9-14.8-10.3c-4.1-4.4-7.2-9.7-9.4-15.8c-2.2-6.1-3.3-12.8-3.3-20
|
||||||
|
c0-7.3,1.2-14.1,3.6-20.1c2.4-6.1,5.8-11.4,10.3-15.8c4.4-4.4,9.7-7.8,15.8-10.3c6.1-2.5,12.9-3.7,20.4-3.7c7.2,0,13.6,1.2,19,3.5
|
||||||
|
c5.4,2.3,10.1,5.4,13.9,9.2l-6.1,8.4c-0.4,0.5-0.8,1-1.4,1.4c-0.6,0.4-1.3,0.6-2.3,0.6c-1,0-2.1-0.4-3.2-1.2s-2.5-1.7-4.1-2.6
|
||||||
|
c-1.7-0.9-3.8-1.8-6.3-2.6c-2.5-0.8-5.8-1.2-9.7-1.2c-4.6,0-8.8,0.8-12.7,2.4c-3.8,1.6-7.2,3.9-9.9,6.9s-4.9,6.6-6.5,10.8
|
||||||
|
c-1.6,4.3-2.3,9-2.3,14.3c0,5.5,0.8,10.4,2.3,14.6c1.6,4.3,3.7,7.9,6.3,10.8c2.7,2.9,5.8,5.2,9.4,6.7c3.6,1.6,7.5,2.3,11.6,2.3
|
||||||
|
c2.5,0,4.7-0.1,6.7-0.4c2-0.3,3.8-0.7,5.5-1.3c1.7-0.6,3.3-1.3,4.8-2.3c1.5-0.9,3-2.1,4.5-3.4c0.4-0.4,0.9-0.7,1.4-1
|
||||||
|
C289.3,127.4,289.9,127.3,290.4,127.3z"/>
|
||||||
|
<path class="st5" d="M407.5,101.5c0,7.2-1.2,13.8-3.6,19.9c-2.4,6.1-5.7,11.4-10.1,15.8c-4.3,4.5-9.5,7.9-15.6,10.4
|
||||||
|
c-6.1,2.5-12.8,3.7-20.2,3.7c-7.4,0-14.1-1.2-20.2-3.7c-6.1-2.5-11.3-6-15.7-10.4c-4.3-4.5-7.7-9.7-10.1-15.8
|
||||||
|
c-2.4-6.1-3.6-12.7-3.6-19.9c0-7.2,1.2-13.8,3.6-19.9c2.4-6.1,5.7-11.4,10.1-15.8c4.3-4.5,9.6-7.9,15.7-10.4
|
||||||
|
c6.1-2.5,12.8-3.7,20.2-3.7c7.4,0,14.1,1.3,20.2,3.8c6.1,2.5,11.3,6,15.6,10.4c4.3,4.4,7.7,9.7,10.1,15.8
|
||||||
|
C406.3,87.7,407.5,94.3,407.5,101.5z M388.9,101.5c0-5.4-0.7-10.2-2.1-14.4c-1.4-4.3-3.5-7.9-6.1-10.8c-2.7-3-5.9-5.2-9.7-6.8
|
||||||
|
c-3.8-1.6-8.1-2.4-12.9-2.4c-4.8,0-9.1,0.8-12.9,2.4c-3.8,1.6-7.1,3.8-9.8,6.8c-2.7,3-4.7,6.6-6.2,10.8c-1.4,4.3-2.2,9.1-2.2,14.4
|
||||||
|
c0,5.4,0.7,10.2,2.2,14.4c1.4,4.3,3.5,7.9,6.2,10.8c2.7,2.9,5.9,5.2,9.8,6.8c3.8,1.6,8.1,2.4,12.9,2.4c4.8,0,9.1-0.8,12.9-2.4
|
||||||
|
c3.8-1.6,7-3.8,9.7-6.8c2.7-2.9,4.7-6.5,6.1-10.8C388.2,111.7,388.9,106.9,388.9,101.5z"/>
|
||||||
|
<path class="st5" d="M440.6,112.2v38.1h-18.2V52.7h29.8c6.7,0,12.4,0.7,17.1,2.1c4.7,1.4,8.6,3.3,11.7,5.8c3,2.5,5.3,5.4,6.7,8.9
|
||||||
|
c1.4,3.4,2.1,7.2,2.1,11.4c0,3.3-0.5,6.4-1.5,9.3c-1,2.9-2.4,5.6-4.2,8c-1.8,2.4-4.1,4.5-6.8,6.3c-2.7,1.8-5.7,3.2-9.1,4.3
|
||||||
|
c2.3,1.3,4.3,3.2,5.9,5.6l24.4,36h-16.3c-1.6,0-2.9-0.3-4-0.9c-1.1-0.6-2-1.5-2.8-2.7l-20.5-31.3c-0.8-1.2-1.6-2-2.5-2.5
|
||||||
|
c-0.9-0.5-2.3-0.7-4.1-0.7H440.6z M440.6,99.1h11.3c3.4,0,6.4-0.4,8.9-1.3c2.5-0.9,4.6-2,6.3-3.5c1.6-1.5,2.9-3.3,3.7-5.4
|
||||||
|
c0.8-2.1,1.2-4.3,1.2-6.8c0-4.9-1.6-8.8-4.9-11.4c-3.3-2.7-8.2-4-15-4h-11.6V99.1z"/>
|
||||||
|
<path class="st5" d="M571.8,52.7v14.4h-43.3v27.1h34.1v14h-34.1v27.6h43.3v14.5h-61.6V52.7H571.8z"/>
|
||||||
|
<path class="st6" d="M626.8,135.7c3.5,0,6.6-0.6,9.4-1.8c2.8-1.2,5.1-2.8,7-4.9c1.9-2.1,3.4-4.7,4.4-7.7c1-3,1.5-6.4,1.5-10.1V52.7
|
||||||
|
h18.2v58.5c0,5.8-0.9,11.2-2.8,16.1c-1.9,4.9-4.6,9.2-8.1,12.8c-3.5,3.6-7.8,6.4-12.8,8.4s-10.6,3-16.9,3s-11.9-1-16.9-3
|
||||||
|
s-9.2-4.8-12.7-8.4c-3.5-3.6-6.2-7.8-8-12.8c-1.9-4.9-2.8-10.3-2.8-16.1V52.7h18.2v58.4c0,3.7,0.5,7.1,1.5,10.1
|
||||||
|
c1,3,2.5,5.6,4.4,7.7c1.9,2.1,4.2,3.8,7,5C620.1,135.1,623.3,135.7,626.8,135.7z"/>
|
||||||
|
<path class="st6" d="M706.2,150.3H688V52.7h18.2V150.3z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.2 KiB |
Reference in New Issue
Block a user