diff --git a/README.md b/README.md deleted file mode 100644 index cf94aeef..00000000 --- a/README.md +++ /dev/null @@ -1,48 +0,0 @@ -![Nuxt CoreUI Project](nuxtcoreui.jpg) - -# NuxtJS + CoreUI - -Unofficial Nuxt + CoreUI project, free to use boilerplate for every need. For more information about Vue CoreUI you can see at [Official Vue CoreUI](https://github.com/mrholek/CoreUI-Vue). - -## Usage - -If you want to use this boilerplate, make sure you already installed [NodeJS](https://nodejs.org/en/) and [Vue CLI](https://www.npmjs.com/package/vue-cli) on your local machine. And then, you can use below command to download this boilerplate. - -``` bash -$ vue init muhibbudins/nuxt-coreui my-project -$ cd my-project - -# install dependencies -$ npm install # Or yarn install -``` - -> Make sure to use a version of vue-cli >= 2.1 (`vue -V`). - -### Development - -``` bash -# serve with hot reloading at localhost:3000 -$ npm run dev # Or yarn dev -``` - -Go to [http://localhost:3000](http://localhost:3000) - -### Production - -``` bash -# build for production and launch the server -$ npm run build -$ npm start -``` - -## Todo - -- [x] Fix link and views -- [x] Upgrade to latest Nuxt boilerplate -- [x] Using Express as server -- [x] Move installation to Vue CLI -- [x] Extend SCSS to Style Resources - -## License - -This project under [NuxtJS License](https://github.com/nuxt/nuxt.js/blob/dev/LICENSE) and [CoreUI License](https://github.com/coreui/coreui-free-vue-admin-template/blob/master/LICENSE) diff --git a/meta.js b/meta.js deleted file mode 100644 index 4b755337..00000000 --- a/meta.js +++ /dev/null @@ -1,26 +0,0 @@ -module.exports = { - skipInterpolation: '**/**/*.vue', - helpers: { - escape: function(value) { - return value.replace(/'/g, '''); - } - }, - prompts: { - name: { - 'type': 'string', - 'required': true, - 'message': 'Project name :' - }, - description: { - 'type': 'string', - 'required': false, - 'message': 'Project description :', - 'default': 'My Nuxt.js + Core UI project' - }, - author: { - 'type': 'string', - 'message': 'Author :' - } - }, - completeMessage: '{{#inPlace}}To get started:\n\n npm install # Or yarn\n npm run dev{{else}}To get started:\n\n cd {{destDirName}}\n npm install # Or yarn\n npm run dev{{/inPlace}}' -}; \ No newline at end of file diff --git a/nuxtcoreui.jpg b/nuxtcoreui.jpg deleted file mode 100644 index b71d72e1..00000000 Binary files a/nuxtcoreui.jpg and /dev/null differ diff --git a/template/.editorconfig b/template/.editorconfig deleted file mode 100644 index 5d126348..00000000 --- a/template/.editorconfig +++ /dev/null @@ -1,13 +0,0 @@ -# editorconfig.org -root = true - -[*] -indent_style = space -indent_size = 2 -end_of_line = lf -charset = utf-8 -trim_trailing_whitespace = true -insert_final_newline = true - -[*.md] -trim_trailing_whitespace = false diff --git a/template/.eslintrc.js b/template/.eslintrc.js deleted file mode 100644 index f807de97..00000000 --- a/template/.eslintrc.js +++ /dev/null @@ -1,21 +0,0 @@ -module.exports = { - root: true, - env: { - browser: true, - node: true - }, - parserOptions: { - parser: 'babel-eslint' - }, - extends: [ - // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention - // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. - 'plugin:vue/essential' - ], - // required to lint *.vue files - plugins: [ - 'vue' - ], - // add your custom rules here - rules: {} -} diff --git a/template/.gitignore b/template/.gitignore deleted file mode 100644 index 8f6faa7b..00000000 --- a/template/.gitignore +++ /dev/null @@ -1,85 +0,0 @@ -# Created by .ignore support plugin (hsz.mobi) -### Node template -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* - -# Runtime data -pids -*.pid -*.seed -*.pid.lock - -# Directory for instrumented libs generated by jscoverage/JSCover -lib-cov - -# Coverage directory used by tools like istanbul -coverage - -# nyc test coverage -.nyc_output - -# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) -.grunt - -# Bower dependency directory (https://bower.io/) -bower_components - -# node-waf configuration -.lock-wscript - -# Compiled binary addons (https://nodejs.org/api/addons.html) -build/Release - -# Dependency directories -node_modules/ -jspm_packages/ - -# TypeScript v1 declaration files -typings/ - -# Optional npm cache directory -.npm - -# Optional eslint cache -.eslintcache - -# Optional REPL history -.node_repl_history - -# Output of 'npm pack' -*.tgz - -# Yarn Integrity file -.yarn-integrity - -# dotenv environment variables file -.env - -# parcel-bundler cache (https://parceljs.org/) -.cache - -# next.js build output -.next - -# nuxt.js build output -.nuxt - -# Nuxt generate -dist - -# vuepress build output -.vuepress/dist - -# Serverless directories -.serverless - -# IDE -.idea - -# DS_Store -DS_Store -**/DS_Store \ No newline at end of file diff --git a/template/README.md b/template/README.md deleted file mode 100644 index a35e601b..00000000 --- a/template/README.md +++ /dev/null @@ -1,49 +0,0 @@ -![Nuxt CoreUI Project](nuxtcoreui.jpg) - -# NuxtJS + CoreUI - -Unofficial Nuxt + CoreUI project, free to use boilerplate for every need. For more information about Vue CoreUI you can see at [Official Vue CoreUI](https://github.com/mrholek/CoreUI-Vue). - -## Usage - -If you want to use this boilerplate, make sure you already installed [NodeJS](https://nodejs.org/en/) and [Vue CLI](https://www.npmjs.com/package/vue-cli) on your local machine. And then, you can use below command to download this boilerplate. - -``` bash -$ vue init muhibbudins/nuxt-coreui my-project -$ cd my-project - -# install dependencies -$ npm install # Or yarn install -``` - -> Make sure to use a version of vue-cli >= 2.1 (`vue -V`). - -### Development - -``` bash -# serve with hot reloading at localhost:3000 -$ npm run dev # Or yarn dev -``` - -Go to [http://localhost:3000](http://localhost:3000) - -### Production - -``` bash -# build for production and launch the server -$ npm run build -$ npm start -``` - -## Todo - -- [x] Fix link and views -- [x] Updgrade to latest NuxtJS boilerplate -- [x] Using Express as server -- [x] Move installation to Vue CLI -- [x] Extend SCSS to Style Resources -- [x] Improve performance and code style - -## License - -This project under [NuxtJS License](https://github.com/nuxt/nuxt.js/blob/dev/LICENSE) and [CoreUI License](https://github.com/coreui/coreui-free-vue-admin-template/blob/master/LICENSE) \ No newline at end of file diff --git a/template/assets/README.md b/template/assets/README.md deleted file mode 100644 index 34766f93..00000000 --- a/template/assets/README.md +++ /dev/null @@ -1,7 +0,0 @@ -# ASSETS - -**This directory is not required, you can delete it if you don't want to use it.** - -This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. - -More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). diff --git a/template/assets/scss/_bootstrap-variables.scss b/template/assets/scss/_bootstrap-variables.scss deleted file mode 100644 index 8d9e717c..00000000 --- a/template/assets/scss/_bootstrap-variables.scss +++ /dev/null @@ -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 `` 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; diff --git a/template/assets/scss/_core-variables.scss b/template/assets/scss/_core-variables.scss deleted file mode 100644 index 906e13ac..00000000 --- a/template/assets/scss/_core-variables.scss +++ /dev/null @@ -1 +0,0 @@ -// core overrides diff --git a/template/assets/scss/_custom.scss b/template/assets/scss/_custom.scss deleted file mode 100644 index 15d367af..00000000 --- a/template/assets/scss/_custom.scss +++ /dev/null @@ -1 +0,0 @@ -// Here you can add other styles diff --git a/template/assets/scss/core/_animate.scss b/template/assets/scss/core/_animate.scss deleted file mode 100644 index c0a244ba..00000000 --- a/template/assets/scss/core/_animate.scss +++ /dev/null @@ -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; -} diff --git a/template/assets/scss/core/_aside.scss b/template/assets/scss/core/_aside.scss deleted file mode 100644 index fc71e42c..00000000 --- a/template/assets/scss/core/_aside.scss +++ /dev/null @@ -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; - } - } -} diff --git a/template/assets/scss/core/_avatars.scss b/template/assets/scss/core/_avatars.scss deleted file mode 100644 index 623016ef..00000000 --- a/template/assets/scss/core/_avatars.scss +++ /dev/null @@ -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 { - // - // } - -} diff --git a/template/assets/scss/core/_badge.scss b/template/assets/scss/core/_badge.scss deleted file mode 100644 index 31048856..00000000 --- a/template/assets/scss/core/_badge.scss +++ /dev/null @@ -1,3 +0,0 @@ -.badge-pill { - border-radius: $badge-pill-border-radius; -} diff --git a/template/assets/scss/core/_breadcrumb-menu.scss b/template/assets/scss/core/_breadcrumb-menu.scss deleted file mode 100644 index dbbe07e0..00000000 --- a/template/assets/scss/core/_breadcrumb-menu.scss +++ /dev/null @@ -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; - } -} diff --git a/template/assets/scss/core/_breadcrumb.scss b/template/assets/scss/core/_breadcrumb.scss deleted file mode 100644 index d8a003dc..00000000 --- a/template/assets/scss/core/_breadcrumb.scss +++ /dev/null @@ -1,4 +0,0 @@ -.breadcrumb { - position: relative; - @include borders($breadcrumb-borders); -} diff --git a/template/assets/scss/core/_buttons.scss b/template/assets/scss/core/_buttons.scss deleted file mode 100644 index 9d665442..00000000 --- a/template/assets/scss/core/_buttons.scss +++ /dev/null @@ -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%); - } - } -} diff --git a/template/assets/scss/core/_callout.scss b/template/assets/scss/core/_callout.scss deleted file mode 100644 index b98ebac5..00000000 --- a/template/assets/scss/core/_callout.scss +++ /dev/null @@ -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; - } - } -} diff --git a/template/assets/scss/core/_card.scss b/template/assets/scss/core/_card.scss deleted file mode 100644 index 733b9632..00000000 --- a/template/assets/scss/core/_card.scss +++ /dev/null @@ -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; -} diff --git a/template/assets/scss/core/_charts.scss b/template/assets/scss/core/_charts.scss deleted file mode 100644 index 0e7a3c2a..00000000 --- a/template/assets/scss/core/_charts.scss +++ /dev/null @@ -1,9 +0,0 @@ -.chart-wrapper { - canvas { - width: 100% !important; - } -} -// scss-lint:disable QualifyingElement -base-chart.chart { - display: block !important; -} diff --git a/template/assets/scss/core/_dropdown-menu-right.scss b/template/assets/scss/core/_dropdown-menu-right.scss deleted file mode 100644 index 4f195468..00000000 --- a/template/assets/scss/core/_dropdown-menu-right.scss +++ /dev/null @@ -1,8 +0,0 @@ -// Temp fix for reactstrap -.app-header { - .navbar-nav { - .dropdown-menu-right { - right: auto; - } - } -} diff --git a/template/assets/scss/core/_dropdown.scss b/template/assets/scss/core/_dropdown.scss deleted file mode 100644 index 1fa93c17..00000000 --- a/template/assets/scss/core/_dropdown.scss +++ /dev/null @@ -1,70 +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; - z-index: $zindex-sticky; - } - // 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; - } - } -} diff --git a/template/assets/scss/core/_footer.scss b/template/assets/scss/core/_footer.scss deleted file mode 100644 index e01595a1..00000000 --- a/template/assets/scss/core/_footer.scss +++ /dev/null @@ -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); -} diff --git a/template/assets/scss/core/_grid.scss b/template/assets/scss/core/_grid.scss deleted file mode 100644 index 0d0963c1..00000000 --- a/template/assets/scss/core/_grid.scss +++ /dev/null @@ -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; -} diff --git a/template/assets/scss/core/_input-group.scss b/template/assets/scss/core/_input-group.scss deleted file mode 100644 index c8ce1158..00000000 --- a/template/assets/scss/core/_input-group.scss +++ /dev/null @@ -1,5 +0,0 @@ -.input-group-prepend, -.input-group-append { - white-space: nowrap; - vertical-align: middle; // Match the inputs -} diff --git a/template/assets/scss/core/_layout.scss b/template/assets/scss/core/_layout.scss deleted file mode 100644 index 1800abbd..00000000 --- a/template/assets/scss/core/_layout.scss +++ /dev/null @@ -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; - } - } -} diff --git a/template/assets/scss/core/_loading.scss b/template/assets/scss/core/_loading.scss deleted file mode 100644 index 3e409fb7..00000000 --- a/template/assets/scss/core/_loading.scss +++ /dev/null @@ -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"); -} diff --git a/template/assets/scss/core/_mixins.scss b/template/assets/scss/core/_mixins.scss deleted file mode 100644 index 153f1d39..00000000 --- a/template/assets/scss/core/_mixins.scss +++ /dev/null @@ -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; -} diff --git a/template/assets/scss/core/_mobile.scss b/template/assets/scss/core/_mobile.scss deleted file mode 100644 index e69de29b..00000000 diff --git a/template/assets/scss/core/_modal.scss b/template/assets/scss/core/_modal.scss deleted file mode 100644 index 1c44ddd0..00000000 --- a/template/assets/scss/core/_modal.scss +++ /dev/null @@ -1,13 +0,0 @@ -@each $color, $value in $theme-colors { - .modal-#{$color} { - - .modal-content { - border-color: $value; - } - - .modal-header { - color: #fff; - background-color: $value; - } - } -} diff --git a/template/assets/scss/core/_nav.scss b/template/assets/scss/core/_nav.scss deleted file mode 100644 index cae51793..00000000 --- a/template/assets/scss/core/_nav.scss +++ /dev/null @@ -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; - } -} diff --git a/template/assets/scss/core/_navbar.scss b/template/assets/scss/core/_navbar.scss deleted file mode 100644 index 221ab126..00000000 --- a/template/assets/scss/core/_navbar.scss +++ /dev/null @@ -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); - } - } - } -} diff --git a/template/assets/scss/core/_others.scss b/template/assets/scss/core/_others.scss deleted file mode 100644 index 381baab0..00000000 --- a/template/assets/scss/core/_others.scss +++ /dev/null @@ -1,4 +0,0 @@ -// scss-lint:disable QualifyingElement -hr.transparent { - border-top: 1px solid transparent; -} diff --git a/template/assets/scss/core/_progress.scss b/template/assets/scss/core/_progress.scss deleted file mode 100644 index 65f56dd3..00000000 --- a/template/assets/scss/core/_progress.scss +++ /dev/null @@ -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; - } -} diff --git a/template/assets/scss/core/_rtl.scss b/template/assets/scss/core/_rtl.scss deleted file mode 100644 index 28db3859..00000000 --- a/template/assets/scss/core/_rtl.scss +++ /dev/null @@ -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; - } -} diff --git a/template/assets/scss/core/_sidebar.scss b/template/assets/scss/core/_sidebar.scss deleted file mode 100644 index ae76bd4b..00000000 --- a/template/assets/scss/core/_sidebar.scss +++ /dev/null @@ -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. Components - .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.