├── static ├── favicon.ico ├── README.md └── favicon.png ├── assets ├── img │ ├── favicon.png │ ├── new_logo.png │ ├── tim_80x80.png │ ├── vue-logo.png │ ├── apple-icon.png │ ├── background.jpg │ └── faces │ │ ├── face-0.jpg │ │ ├── face-1.jpg │ │ ├── face-2.jpg │ │ └── face-3.jpg ├── fonts │ ├── themify.eot │ ├── themify.ttf │ ├── themify.woff │ ├── glyphicons-halflings-regular.e18bbf6.ttf │ ├── glyphicons-halflings-regular.f4769f9.eot │ ├── glyphicons-halflings-regular.fa27723.woff │ └── glyphicons-halflings-regular.448c34a.woff2 ├── sass │ ├── paper │ │ ├── mixins │ │ │ ├── _tabs.scss │ │ │ ├── _cards.scss │ │ │ ├── _navbars.scss │ │ │ ├── _icons.scss │ │ │ ├── _inputs.scss │ │ │ ├── _transparency.scss │ │ │ ├── _labels.scss │ │ │ ├── _sidebar.scss │ │ │ ├── _buttons.scss │ │ │ ├── _chartist.scss │ │ │ └── _vendor-prefixes.scss │ │ ├── _mixins.scss │ │ ├── _footers.scss │ │ ├── _alerts.scss │ │ ├── _tables.scss │ │ ├── _typography.scss │ │ ├── _misc.scss │ │ ├── _checkbox-radio.scss │ │ ├── _inputs.scss │ │ ├── _sidebar-and-main-panel.scss │ │ ├── _cards.scss │ │ ├── _buttons.scss │ │ ├── _chartist.scss │ │ ├── _variables.scss │ │ ├── _responsive.scss │ │ ├── _dropdown.scss │ │ └── _navbars.scss │ └── paper-dashboard.scss ├── README.md └── css │ └── themify-icons.css ├── plugins ├── dashboard │ ├── index.js │ ├── globalDirectives.js │ ├── globalComponents.js │ └── paperDashboard.js └── README.md ├── .gitignore ├── layouts ├── dashboard │ ├── MobileMenu.vue │ ├── Content.vue │ ├── ContentFooter.vue │ ├── DashboardLayout.vue │ └── TopNavbar.vue ├── README.md └── default.vue ├── components ├── README.md ├── Notifications │ └── NotificationTemplate.vue ├── SidebarPlugin │ ├── index.js │ ├── MovingArrow.vue │ ├── SidebarLink.vue │ └── SideBar.vue ├── Cards │ ├── StatsCard.vue │ ├── Card.vue │ └── ChartCard.vue ├── index.js ├── Button.vue ├── Dropdown.vue ├── PaperTable.vue ├── Inputs │ └── formGroupInput.vue ├── UserProfile │ ├── UserCard.vue │ ├── MembersCard.vue │ └── EditProfileForm.vue ├── AppLogo.vue └── Charts.vue ├── .editorconfig ├── pages ├── README.md ├── dashboard.vue ├── stats.vue ├── index.vue ├── table-List.vue ├── not-found-page.vue ├── maps.vue ├── notifications.vue └── typography.vue ├── middleware └── README.md ├── store └── README.md ├── .eslintrc.js ├── README.md ├── package.json └── nuxt.config.js /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansezz/vue-paper-dashboard-nuxtjs/HEAD/static/favicon.ico -------------------------------------------------------------------------------- /assets/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansezz/vue-paper-dashboard-nuxtjs/HEAD/assets/img/favicon.png -------------------------------------------------------------------------------- /assets/fonts/themify.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansezz/vue-paper-dashboard-nuxtjs/HEAD/assets/fonts/themify.eot -------------------------------------------------------------------------------- /assets/fonts/themify.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansezz/vue-paper-dashboard-nuxtjs/HEAD/assets/fonts/themify.ttf -------------------------------------------------------------------------------- /assets/img/new_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansezz/vue-paper-dashboard-nuxtjs/HEAD/assets/img/new_logo.png -------------------------------------------------------------------------------- /assets/img/tim_80x80.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansezz/vue-paper-dashboard-nuxtjs/HEAD/assets/img/tim_80x80.png -------------------------------------------------------------------------------- /assets/img/vue-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansezz/vue-paper-dashboard-nuxtjs/HEAD/assets/img/vue-logo.png -------------------------------------------------------------------------------- /assets/fonts/themify.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansezz/vue-paper-dashboard-nuxtjs/HEAD/assets/fonts/themify.woff -------------------------------------------------------------------------------- /assets/img/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansezz/vue-paper-dashboard-nuxtjs/HEAD/assets/img/apple-icon.png -------------------------------------------------------------------------------- /assets/img/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansezz/vue-paper-dashboard-nuxtjs/HEAD/assets/img/background.jpg -------------------------------------------------------------------------------- /assets/img/faces/face-0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansezz/vue-paper-dashboard-nuxtjs/HEAD/assets/img/faces/face-0.jpg -------------------------------------------------------------------------------- /assets/img/faces/face-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansezz/vue-paper-dashboard-nuxtjs/HEAD/assets/img/faces/face-1.jpg -------------------------------------------------------------------------------- /assets/img/faces/face-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansezz/vue-paper-dashboard-nuxtjs/HEAD/assets/img/faces/face-2.jpg -------------------------------------------------------------------------------- /assets/img/faces/face-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansezz/vue-paper-dashboard-nuxtjs/HEAD/assets/img/faces/face-3.jpg -------------------------------------------------------------------------------- /assets/sass/paper/mixins/_tabs.scss: -------------------------------------------------------------------------------- 1 | @mixin pill-style($color) { 2 | border: 1px solid $color; 3 | color: $color; 4 | } 5 | -------------------------------------------------------------------------------- /plugins/dashboard/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import PaperDashboard from "./paperDashboard"; 3 | 4 | Vue.use(PaperDashboard); 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | node_modules 3 | 4 | # logs 5 | npm-debug.log 6 | 7 | # Nuxt build 8 | .nuxt 9 | 10 | # Nuxt generate 11 | dist 12 | 13 | .idea 14 | -------------------------------------------------------------------------------- /assets/fonts/glyphicons-halflings-regular.e18bbf6.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansezz/vue-paper-dashboard-nuxtjs/HEAD/assets/fonts/glyphicons-halflings-regular.e18bbf6.ttf -------------------------------------------------------------------------------- /assets/fonts/glyphicons-halflings-regular.f4769f9.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansezz/vue-paper-dashboard-nuxtjs/HEAD/assets/fonts/glyphicons-halflings-regular.f4769f9.eot -------------------------------------------------------------------------------- /assets/fonts/glyphicons-halflings-regular.fa27723.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansezz/vue-paper-dashboard-nuxtjs/HEAD/assets/fonts/glyphicons-halflings-regular.fa27723.woff -------------------------------------------------------------------------------- /assets/fonts/glyphicons-halflings-regular.448c34a.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ansezz/vue-paper-dashboard-nuxtjs/HEAD/assets/fonts/glyphicons-halflings-regular.448c34a.woff2 -------------------------------------------------------------------------------- /assets/sass/paper/mixins/_cards.scss: -------------------------------------------------------------------------------- 1 | @mixin filter($color) { 2 | @if $color == #FFFFFF { 3 | background-color: rgba($color, .91); 4 | } @else { 5 | background-color: rgba($color, .69); 6 | } 7 | } 8 | 9 | -------------------------------------------------------------------------------- /layouts/dashboard/MobileMenu.vue: -------------------------------------------------------------------------------- 1 | 6 | 9 | 11 | -------------------------------------------------------------------------------- /components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | The components directory contains your Vue.js Components. 4 | Nuxt.js doesn't supercharge these components. 5 | 6 | **This directory is not required, you can delete it if you don't want to use it.** 7 | 8 | -------------------------------------------------------------------------------- /assets/sass/paper/mixins/_navbars.scss: -------------------------------------------------------------------------------- 1 | @mixin navbar-color($color) { 2 | background-color: $color; 3 | } 4 | 5 | @mixin center-item() { 6 | left: 0; 7 | right: 0; 8 | margin-right: auto; 9 | margin-left: auto; 10 | position: absolute; 11 | } 12 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_size = 2 6 | indent_style = space 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /components/Notifications/NotificationTemplate.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 10 | -------------------------------------------------------------------------------- /layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | This directory contains your Application Layouts. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/views#layouts 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | 10 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 18 | -------------------------------------------------------------------------------- /pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the .vue files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in the documentation: 7 | https://nuxtjs.org/guide/routing 8 | 9 | -------------------------------------------------------------------------------- /assets/sass/paper/mixins/_icons.scss: -------------------------------------------------------------------------------- 1 | @mixin icon-background($icon-url) { 2 | background-image: url($icon-url); 3 | 4 | } 5 | 6 | @mixin icon-shape($size, $padding, $border-radius) { 7 | height: $size; 8 | width: $size; 9 | padding: $padding; 10 | border-radius: $border-radius; 11 | display: inline-table; 12 | 13 | } 14 | -------------------------------------------------------------------------------- /assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/assets#webpacked 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | 10 | -------------------------------------------------------------------------------- /pages/dashboard.vue: -------------------------------------------------------------------------------- 1 | 8 | 17 | 19 | -------------------------------------------------------------------------------- /plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | This directory contains your Javascript plugins that you want to run before instantiating the root vue.js application. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/plugins 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | 10 | -------------------------------------------------------------------------------- /plugins/dashboard/globalDirectives.js: -------------------------------------------------------------------------------- 1 | import { directive as vClickOutside } from "vue-clickaway"; 2 | 3 | /** 4 | * You can register global directives here and use them as a plugin in your main Vue instance 5 | */ 6 | 7 | const GlobalDirectives = { 8 | install(Vue) { 9 | Vue.directive("click-outside", vClickOutside); 10 | } 11 | }; 12 | 13 | export default GlobalDirectives; 14 | -------------------------------------------------------------------------------- /assets/sass/paper/_mixins.scss: -------------------------------------------------------------------------------- 1 | //Utilities 2 | @import "mixins/transparency"; 3 | @import "mixins/vendor-prefixes"; 4 | //Components 5 | @import "mixins/buttons"; 6 | @import "mixins/inputs"; 7 | @import "mixins/labels"; 8 | @import "mixins/tabs"; 9 | @import "mixins/navbars"; 10 | @import "mixins/icons"; 11 | @import "mixins/cards"; 12 | @import "mixins/chartist"; 13 | @import "mixins/sidebar"; 14 | -------------------------------------------------------------------------------- /static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | This directory contains your static files. 4 | Each file inside this directory is mapped to /. 5 | 6 | Example: /static/robots.txt is mapped as /robots.txt. 7 | 8 | More information about the usage of this directory in the documentation: 9 | https://nuxtjs.org/guide/assets#static 10 | 11 | **This directory is not required, you can delete it if you don't want to use it.** 12 | 13 | -------------------------------------------------------------------------------- /assets/sass/paper/mixins/_inputs.scss: -------------------------------------------------------------------------------- 1 | @mixin input-size($padding-vertical, $padding-horizontal, $height) { 2 | padding: $padding-vertical $padding-horizontal; 3 | height: $height; 4 | } 5 | 6 | @mixin placeholder($color, $opacity) { 7 | color: $color; 8 | @include opacity(1); 9 | } 10 | 11 | @mixin light-form() { 12 | border-radius: 0; 13 | border: 0; 14 | padding: 0; 15 | background-color: transparent; 16 | 17 | } 18 | -------------------------------------------------------------------------------- /middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | This directory contains your Application Middleware. 4 | The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts). 5 | 6 | More information about the usage of this directory in the documentation: 7 | https://nuxtjs.org/guide/routing#middleware 8 | 9 | **This directory is not required, you can delete it if you don't want to use it.** 10 | 11 | -------------------------------------------------------------------------------- /store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | This directory contains your Vuex Store files. 4 | Vuex Store option is implemented in the Nuxt.js framework. 5 | Creating a index.js file in this directory activate the option in the framework automatically. 6 | 7 | More information about the usage of this directory in the documentation: 8 | https://nuxtjs.org/guide/vuex-store 9 | 10 | **This directory is not required, you can delete it if you don't want to use it.** 11 | 12 | -------------------------------------------------------------------------------- /assets/sass/paper/mixins/_transparency.scss: -------------------------------------------------------------------------------- 1 | // Opacity 2 | 3 | @mixin opacity($opacity) { 4 | opacity: $opacity; 5 | // IE8 filter 6 | $opacity-ie: ($opacity * 100); 7 | filter: #{alpha(opacity=$opacity-ie)}; 8 | } 9 | 10 | @mixin black-filter($opacity) { 11 | top: 0; 12 | left: 0; 13 | height: 100%; 14 | width: 100%; 15 | position: absolute; 16 | background-color: rgba(17, 17, 17, $opacity); 17 | display: block; 18 | content: ""; 19 | z-index: 1; 20 | } 21 | -------------------------------------------------------------------------------- /plugins/dashboard/globalComponents.js: -------------------------------------------------------------------------------- 1 | import { FormGroupInput, Card, DropDown, Button } from "../../components/index"; 2 | /** 3 | * You can register global components here and use them as a plugin in your main Vue instance 4 | */ 5 | 6 | const GlobalComponents = { 7 | install(Vue) { 8 | Vue.component("fg-input", FormGroupInput); 9 | Vue.component("drop-down", DropDown); 10 | Vue.component("card", Card); 11 | Vue.component("p-button", Button); 12 | } 13 | }; 14 | 15 | export default GlobalComponents; 16 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | node: true 6 | }, 7 | parserOptions: { 8 | parser: 'babel-eslint' 9 | }, 10 | extends: [ 11 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 12 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 13 | 'plugin:vue/essential' 14 | ], 15 | // required to lint *.vue files 16 | plugins: [ 17 | 'vue' 18 | ], 19 | // add your custom rules here 20 | rules: {} 21 | } 22 | -------------------------------------------------------------------------------- /layouts/dashboard/Content.vue: -------------------------------------------------------------------------------- 1 | 11 | 14 | 28 | -------------------------------------------------------------------------------- /plugins/dashboard/paperDashboard.js: -------------------------------------------------------------------------------- 1 | import Notify from "vue-notifyjs"; 2 | import SideBar from "@/components/SidebarPlugin"; 3 | import GlobalComponents from "./globalComponents"; 4 | import GlobalDirectives from "./globalDirectives"; 5 | import "es6-promise/auto"; 6 | 7 | //css assets 8 | import "bootstrap/dist/css/bootstrap.css"; 9 | import "@/assets/sass/paper-dashboard.scss"; 10 | import "@/assets/css/themify-icons.css"; 11 | 12 | export default { 13 | install(Vue) { 14 | Vue.use(GlobalComponents); 15 | Vue.use(GlobalDirectives); 16 | Vue.use(SideBar); 17 | Vue.use(Notify); 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /assets/sass/paper/mixins/_labels.scss: -------------------------------------------------------------------------------- 1 | @mixin label-style() { 2 | padding: $padding-label-vertical $padding-label-horizontal; 3 | border: 1px solid $default-color; 4 | border-radius: $border-radius-small; 5 | color: $default-color; 6 | font-weight: $font-weight-semi; 7 | font-size: $font-size-small; 8 | text-transform: uppercase; 9 | display: inline-block; 10 | vertical-align: middle; 11 | } 12 | 13 | @mixin label-color($color) { 14 | border-color: $color; 15 | color: $color; 16 | } 17 | 18 | @mixin label-color-fill($color) { 19 | border-color: $color; 20 | color: $white-color; 21 | background-color: $color; 22 | } 23 | -------------------------------------------------------------------------------- /components/SidebarPlugin/index.js: -------------------------------------------------------------------------------- 1 | import Sidebar from "./SideBar.vue"; 2 | import SidebarLink from "./SidebarLink"; 3 | 4 | const SidebarStore = { 5 | showSidebar: false, 6 | sidebarLinks: [], 7 | displaySidebar(value) { 8 | this.showSidebar = value; 9 | } 10 | }; 11 | 12 | const SidebarPlugin = { 13 | install(Vue) { 14 | let app = new Vue({ 15 | data: { 16 | sidebarStore: SidebarStore 17 | } 18 | }); 19 | 20 | Vue.prototype.$sidebar = app.sidebarStore; 21 | Vue.component("side-bar", Sidebar); 22 | Vue.component("sidebar-link", SidebarLink); 23 | } 24 | }; 25 | 26 | export default SidebarPlugin; 27 | -------------------------------------------------------------------------------- /components/Cards/StatsCard.vue: -------------------------------------------------------------------------------- 1 | 20 | 30 | 32 | -------------------------------------------------------------------------------- /components/index.js: -------------------------------------------------------------------------------- 1 | import FormGroupInput from "./Inputs/formGroupInput.vue"; 2 | 3 | import DropDown from "./Dropdown.vue"; 4 | import PaperTable from "./PaperTable.vue"; 5 | import Button from "./Button"; 6 | 7 | import Card from "./Cards/Card.vue"; 8 | import ChartCard from "./Cards/ChartCard.vue"; 9 | import StatsCard from "./Cards/StatsCard.vue"; 10 | 11 | import SidebarPlugin from "./SidebarPlugin/index"; 12 | 13 | let components = { 14 | FormGroupInput, 15 | Card, 16 | ChartCard, 17 | StatsCard, 18 | PaperTable, 19 | DropDown, 20 | SidebarPlugin 21 | }; 22 | 23 | export default components; 24 | 25 | export { 26 | FormGroupInput, 27 | Card, 28 | ChartCard, 29 | StatsCard, 30 | PaperTable, 31 | DropDown, 32 | Button, 33 | SidebarPlugin 34 | }; 35 | -------------------------------------------------------------------------------- /pages/stats.vue: -------------------------------------------------------------------------------- 1 | 18 | 30 | 32 | -------------------------------------------------------------------------------- /layouts/dashboard/ContentFooter.vue: -------------------------------------------------------------------------------- 1 | 20 | 23 | 25 | -------------------------------------------------------------------------------- /components/Cards/Card.vue: -------------------------------------------------------------------------------- 1 | 22 | 31 | 33 | -------------------------------------------------------------------------------- /assets/sass/paper/_footers.scss: -------------------------------------------------------------------------------- 1 | .footer { 2 | background-attachment: fixed; 3 | position: relative; 4 | line-height: 20px; 5 | nav { 6 | ul { 7 | list-style: none; 8 | margin: 0; 9 | padding: 0; 10 | font-weight: normal; 11 | li { 12 | display: inline-block; 13 | padding: 10px 15px; 14 | margin: 15px 3px; 15 | line-height: 20px; 16 | text-align: center; 17 | } 18 | a:not(.btn) { 19 | color: $font-color; 20 | display: block; 21 | margin-bottom: 3px; 22 | 23 | &:focus, 24 | &:hover { 25 | color: $default-states-color; 26 | } 27 | } 28 | } 29 | } 30 | .copyright { 31 | color: $font-color; 32 | padding: 10px 15px; 33 | font-size: 14px; 34 | white-space: nowrap; 35 | margin: 15px 3px; 36 | line-height: 20px; 37 | } 38 | .heart { 39 | color: $danger-color; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | 15 | 45 | 46 | -------------------------------------------------------------------------------- /components/SidebarPlugin/MovingArrow.vue: -------------------------------------------------------------------------------- 1 | 5 | 26 | 45 | -------------------------------------------------------------------------------- /assets/sass/paper-dashboard.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | 3 | ========================================================= 4 | * Paper Dashboard - v1.1.2 5 | ========================================================= 6 | 7 | * Product Page: http://www.creative-tim.com/product/paper-dashboard 8 | * Copyright 2017 Creative Tim (http://www.creative-tim.com) 9 | * Licensed under MIT (https://github.com/creativetimofficial/paper-dashboard/blob/master/LICENSE.md) 10 | 11 | ========================================================= 12 | 13 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 14 | 15 | */ 16 | @import "paper/variables"; 17 | @import "paper/mixins"; 18 | @import "paper/typography"; 19 | // Core CSS 20 | @import "paper/misc"; 21 | @import "paper/sidebar-and-main-panel"; 22 | @import "paper/buttons"; 23 | @import "paper/inputs"; 24 | @import "paper/alerts"; 25 | @import "paper/tables"; 26 | @import "paper/checkbox-radio"; 27 | @import "paper/navbars"; 28 | @import "paper/footers"; 29 | // Fancy Stuff 30 | @import "paper/dropdown"; 31 | @import "paper/cards"; 32 | @import "paper/chartist"; 33 | @import "paper/responsive"; 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /components/Button.vue: -------------------------------------------------------------------------------- 1 | 22 | 52 | 54 | -------------------------------------------------------------------------------- /assets/sass/paper/mixins/_sidebar.scss: -------------------------------------------------------------------------------- 1 | @mixin sidebar-background-color($background-color, $font-color) { 2 | &:after, 3 | &:before { 4 | background-color: $background-color; 5 | } 6 | 7 | #style-3::-webkit-scrollbar-track 8 | { 9 | -webkit-box-shadow: inset 0 0 6px $background-color; 10 | background-color: $background-color; 11 | } 12 | 13 | #style-3::-webkit-scrollbar 14 | { 15 | width: 6px; 16 | background-color: $font-color; 17 | } 18 | 19 | #style-3::-webkit-scrollbar-thumb 20 | { 21 | background-color: $background-color; 22 | } 23 | 24 | 25 | .logo { 26 | border-bottom: 1px solid rgba($font-color, .3); 27 | 28 | p { 29 | color: $font-color; 30 | } 31 | 32 | .simple-text { 33 | color: $font-color; 34 | } 35 | } 36 | 37 | .nav { 38 | .nav-item:not(.active) { 39 | > .nav-link { 40 | color: $font-color; 41 | } 42 | } 43 | .divider { 44 | background-color: rgba($font-color, .2); 45 | } 46 | 47 | } 48 | 49 | } 50 | 51 | @mixin sidebar-active-color($font-color) { 52 | .nav { 53 | .nav-item { 54 | &.active > .nav-link { 55 | color: $font-color; 56 | opacity: 1; 57 | } 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /components/Dropdown.vue: -------------------------------------------------------------------------------- 1 | 22 | 50 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-paper-dashboard-nuxtjs 2 | 3 | ### [Nuxt Js SSR version of Creative Tim Paper Dashboard made for Vue](https://cristijora.github.io/vue-paper-dashboard/) 4 | 5 | 6 | > Admin dashboard based on paper dashboard UI template + vue-router 7 | 8 | This project is a NuxtJs SSR Vue version of [Paper-dashboard](https://www.creative-tim.com/product/paper-dashboard) 9 | designed for VueJs developers.The dashboard includes vue-router and vuex 10 | 11 | ## Demo 12 | * Nuxt Js version Deployed on Heroku [Live Demo here](https://vue-paper-dashboard-nuxtjs.herokuapp.com/) 13 | * Check the Vue Js Official demo[Live Demo here](https://cristijora.github.io/vue-paper-dashboard). 14 | 15 | ## Build Setup 16 | 17 | ``` bash 18 | # install dependencies 19 | $ npm install # Or yarn install 20 | 21 | # serve with hot reload at localhost:3000 22 | $ npm run dev 23 | 24 | # build for production and launch server 25 | $ npm run build 26 | $ npm start 27 | 28 | # generate static project 29 | $ npm run generate 30 | ``` 31 | 32 | ### Screen 33 | ![](http://i.imgur.com/3iC1hOs.gif) 34 | [Nuxt Version](https://github.com/cristijora/vue-paper-dashboard-nuxt) 35 | 36 | 37 | For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js). 38 | 39 | -------------------------------------------------------------------------------- /components/PaperTable.vue: -------------------------------------------------------------------------------- 1 | 21 | 55 | 57 | -------------------------------------------------------------------------------- /assets/sass/paper/_alerts.scss: -------------------------------------------------------------------------------- 1 | .alert { 2 | border: 0; 3 | border-radius: 0; 4 | color: #FFFFFF; 5 | padding: 10px 15px; 6 | font-size: 14px; 7 | 8 | .container & { 9 | border-radius: 4px; 10 | 11 | } 12 | .navbar & { 13 | border-radius: 0; 14 | left: 0; 15 | position: absolute; 16 | right: 0; 17 | top: 85px; 18 | width: 100%; 19 | z-index: 3; 20 | } 21 | .navbar:not(.navbar-transparent) & { 22 | top: 70px; 23 | } 24 | 25 | span[data-notify="icon"] { 26 | font-size: 30px; 27 | display: block; 28 | left: 15px; 29 | position: absolute; 30 | top: 50%; 31 | margin-top: -20px; 32 | } 33 | 34 | .close ~ span { 35 | display: block; 36 | max-width: 89%; 37 | } 38 | 39 | &[data-notify="container"] { 40 | padding: 10px 10px 10px 20px; 41 | border-radius: $border-radius-base; 42 | } 43 | 44 | &.alert-with-icon { 45 | padding-left: 65px; 46 | } 47 | } 48 | 49 | .alert-info { 50 | background-color: $bg-info; 51 | color: $info-states-color; 52 | } 53 | 54 | .alert-success { 55 | background-color: $bg-success; 56 | color: $success-states-color; 57 | } 58 | 59 | .alert-warning { 60 | background-color: $bg-warning; 61 | color: $warning-states-color; 62 | } 63 | 64 | .alert-danger { 65 | background-color: $bg-danger; 66 | color: $danger-states-color; 67 | } 68 | 69 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-paper-dashboard-nuxtjs", 3 | "version": "1.0.0", 4 | "description": "NuxtJs version of vue paper dashboard", 5 | "author": "Anass Ez-Zouaine ", 6 | "private": false, 7 | "config": { 8 | "nuxt": { 9 | "host": "0.0.0.0", 10 | "port": "3000" 11 | } 12 | }, 13 | "scripts": { 14 | "dev": "nuxt", 15 | "build": "nuxt build", 16 | "start": "nuxt start", 17 | "generate": "nuxt generate", 18 | "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", 19 | "precommit": "npm run lint", 20 | "heroku-postbuild": "npm run build" 21 | }, 22 | "dependencies": { 23 | "nuxt": "^1.0.0", 24 | "bootstrap": "^4.0.0", 25 | "chartist": "^0.11.0", 26 | "vue-clickaway": "^2.1.0", 27 | "vue-notifyjs": "^0.3.0" 28 | }, 29 | "devDependencies": { 30 | "babel-eslint": "^8.2.1", 31 | "coffee-loader": "^0.9.0", 32 | "coffeescript": "^2.3.1", 33 | "eslint": "^4.15.0", 34 | "eslint-friendly-formatter": "^3.0.0", 35 | "eslint-loader": "^1.7.1", 36 | "eslint-plugin-vue": "^4.0.0", 37 | "node-sass": "^4.9.3", 38 | "pug": "^2.0.3", 39 | "pug-plain-loader": "^1.0.0", 40 | "sass-loader": "^7.1.0" 41 | }, 42 | "engines": { 43 | "node": ">= 8.1.4", 44 | "npm": ">= 5.0.0" 45 | }, 46 | "browserslist": [ 47 | "> 1%", 48 | "last 2 versions", 49 | "not ie <= 8" 50 | ] 51 | } 52 | -------------------------------------------------------------------------------- /components/SidebarPlugin/SidebarLink.vue: -------------------------------------------------------------------------------- 1 | 15 | 63 | 65 | -------------------------------------------------------------------------------- /components/Inputs/formGroupInput.vue: -------------------------------------------------------------------------------- 1 | 27 | 45 | 48 | -------------------------------------------------------------------------------- /assets/sass/paper/_tables.scss: -------------------------------------------------------------------------------- 1 | .table { 2 | thead, 3 | tbody, 4 | tfoot { 5 | tr > th, 6 | tr > td { 7 | border-top: 1px solid $table-line-color; 8 | } 9 | } 10 | thead th { 11 | border-bottom: 1px solid $table-line-color; 12 | border-top: 0; 13 | } 14 | > thead > tr > th { 15 | border-bottom-width: 0; 16 | font-size: $font-size-h5; 17 | font-weight: $font-weight-light; 18 | } 19 | 20 | .radio, 21 | .checkbox { 22 | margin-top: 0; 23 | margin-bottom: 22px; 24 | padding: 0; 25 | width: 15px; 26 | } 27 | > thead > tr > th, 28 | > tbody > tr > th, 29 | > tfoot > tr > th, 30 | > thead > tr > td, 31 | > tbody > tr > td, 32 | > tfoot > tr > td { 33 | padding: 12px; 34 | vertical-align: middle; 35 | } 36 | 37 | .th-description { 38 | max-width: 150px; 39 | } 40 | .td-price { 41 | font-size: 26px; 42 | font-weight: $font-weight-light; 43 | margin-top: 5px; 44 | text-align: right; 45 | } 46 | .td-total { 47 | font-weight: $font-weight-bold; 48 | font-size: $font-size-h5; 49 | padding-top: 20px; 50 | text-align: right; 51 | } 52 | 53 | .td-actions .btn { 54 | 55 | &.btn-sm, 56 | &.btn-xs { 57 | padding-left: 3px; 58 | padding-right: 3px; 59 | } 60 | } 61 | 62 | > tbody > tr { 63 | position: relative; 64 | } 65 | } 66 | 67 | .table-striped { 68 | tbody > tr:nth-of-type(2n+1) { 69 | background-color: #fff; 70 | } 71 | tbody > tr:nth-of-type(2n) { 72 | background-color: $pale-bg; 73 | } 74 | > thead > tr > th, 75 | > tbody > tr > th, 76 | > tfoot > tr > th, 77 | > thead > tr > td, 78 | > tbody > tr > td, 79 | > tfoot > tr > td { 80 | padding: 15px 8px; 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /components/UserProfile/UserCard.vue: -------------------------------------------------------------------------------- 1 | 35 | 69 | 71 | -------------------------------------------------------------------------------- /components/AppLogo.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 80 | 81 | -------------------------------------------------------------------------------- /assets/sass/paper/mixins/_buttons.scss: -------------------------------------------------------------------------------- 1 | // Mixin for generating new styles 2 | @mixin btn-styles($btn-color, $btn-states-color) { 3 | background-color: $btn-color; 4 | border-color: $btn-color; 5 | color: $white-color; 6 | @include opacity(1); 7 | 8 | &:hover, 9 | &:focus, 10 | &:active, 11 | &.active, 12 | .show > &.dropdown-toggle{ 13 | background-color: $btn-states-color; 14 | color: $white-color; 15 | border-color: $btn-states-color; 16 | } 17 | 18 | .caret{ 19 | border-top-color: $white-color; 20 | } 21 | 22 | &.btn-link { 23 | color: $btn-color; 24 | 25 | &:hover, 26 | &:focus, 27 | &:active, 28 | &.active, 29 | .open > &.dropdown-toggle{ 30 | background-color: $transparent-bg; 31 | color: $btn-states-color; 32 | } 33 | 34 | .caret{ 35 | border-top-color: $btn-color; 36 | } 37 | } 38 | 39 | .caret{ 40 | border-top-color: $white-color; 41 | } 42 | } 43 | 44 | @mixin btn-outline-styles($btn-color, $btn-states-color){ 45 | border-color: $btn-color; 46 | color: $btn-color; 47 | @include opacity(1); 48 | 49 | &:hover, 50 | &:focus, 51 | &:active, 52 | &.active, 53 | .open > &.dropdown-toggle { 54 | background-color: $btn-color; 55 | color: $fill-font-color; 56 | border-color: $btn-color; 57 | .caret{ 58 | border-top-color: $fill-font-color; 59 | } 60 | } 61 | 62 | .caret{ 63 | border-top-color: $white-color; 64 | } 65 | 66 | &.disabled, 67 | &:disabled, 68 | &[disabled], 69 | fieldset[disabled] & { 70 | &, 71 | &:hover, 72 | &:focus, 73 | &.focus, 74 | &:active, 75 | &.active { 76 | background-color: $transparent-bg; 77 | border-color: $btn-color; 78 | } 79 | } 80 | } 81 | 82 | @mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $line-height){ 83 | font-size: $font-size; 84 | padding: $padding-vertical $padding-horizontal; 85 | 86 | &.btn-simple{ 87 | padding: $padding-vertical + 2 $padding-horizontal; 88 | } 89 | 90 | } 91 | -------------------------------------------------------------------------------- /components/UserProfile/MembersCard.vue: -------------------------------------------------------------------------------- 1 | 31 | 71 | 73 | -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | '~/plugins/dashboard' 4 | ], 5 | css: [ 6 | 'vue-notifyjs/themes/default.css' 7 | ], 8 | router: { 9 | linkActiveClass: 'active', 10 | linkExactActiveClass: 'exact-active', 11 | extendRoutes (routes, resolve) { 12 | routes.push({ 13 | name: 'custom', 14 | path: '*', 15 | component: resolve(__dirname, 'pages/not-found-page.vue') 16 | }) 17 | } 18 | }, 19 | /* 20 | ** Headers of the page 21 | */ 22 | head: { 23 | title: 'vue-paper-dashboard-nuxtjs', 24 | meta: [ 25 | {charset: 'utf-8'}, 26 | {'http-equiv': 'X-UA-Compatible', content: 'IE=edge,chrome=1'}, 27 | {name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'}, 28 | {hid: 'description', name: 'description', content: 'NuxtJs version of vue paper dashboard'} 29 | ], 30 | script: [ 31 | {src: 'https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyAamVCoyQ4AuvBpxVRMs9P-HFkfPVQj0Kw'} 32 | ], 33 | link: [ 34 | {rel: 'icon', type: 'image/x-icon', href: '/favicon.png'}, 35 | {rel: 'stylesheet', href: 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'}, 36 | {rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Muli:400,300'}, 37 | {rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Montserrat'} 38 | ] 39 | }, 40 | /* 41 | ** Customize the progress bar color 42 | */ 43 | loading: {color: '#3B8070'}, 44 | /* 45 | ** Build configuration 46 | */ 47 | build: { 48 | /* 49 | ** Run ESLint on save 50 | */ 51 | extend(config, {isDev, isClient}) { 52 | if (isDev && isClient) { 53 | config.module.rules.push({ 54 | enforce: 'pre', 55 | test: /\.(js|vue)$/, 56 | loader: 'eslint-loader', 57 | exclude: /(node_modules)/ 58 | }) 59 | } 60 | } 61 | }, 62 | render: { 63 | bundleRenderer: { 64 | shouldPreload: (file, type) => { 65 | return ['script', 'style', 'font'].includes(type) 66 | } 67 | } 68 | } 69 | } 70 | 71 | -------------------------------------------------------------------------------- /pages/table-List.vue: -------------------------------------------------------------------------------- 1 | 26 | 89 | 91 | -------------------------------------------------------------------------------- /pages/not-found-page.vue: -------------------------------------------------------------------------------- 1 | 60 | 61 | 64 | -------------------------------------------------------------------------------- /layouts/dashboard/DashboardLayout.vue: -------------------------------------------------------------------------------- 1 | 50 | 52 | 73 | -------------------------------------------------------------------------------- /layouts/dashboard/TopNavbar.vue: -------------------------------------------------------------------------------- 1 | 44 | 77 | 79 | -------------------------------------------------------------------------------- /static/favicon.png: -------------------------------------------------------------------------------- 1 | �PNG 2 |  3 | IHDR``�w8gAMA�� �asRGB��� cHRMz&�����u0�`:�p��Q<bKGD������� pHYs  ����V���+��z�*�g��XC6#s�hI߭1�2����P�c�L�@ �^K(ݙw2��-��r rG�@���U���Z��B>�R�vƓf�D.=6_#O7��\�Y�Q,:�|�>V�0r1a�,�l�*��Gk�n��"�(����6#��@3� 7 | �5୬֣��� 8 | �_Fq��?�K���,ס��5'�L�"T���E9t�k��y�l|�����x�DZ%і^�6���fs3��e9�D` �P��� "��(��q��~��F��Ԛ3Y��,�$(A�fO�t��� p��N��"�r�DV�� 1z[��P�\��fc�Ĩcd){"(`)�_`�F���� 9 | Be�~(\ "1jS\̞/��`d��5$Z��s/� ���Y�����̣�nW��rk)�.r*���7��(h� 10 | XD S��Fx�z'0�j?�?���e�g��E�~!��ż�A�+a��ױ�<��z3�X5�ZL���p�ș�?,!Fi>�dz�{�'j������~��>�: �v�<|Xp�ݏ:�@��7X8����� ( ����d��7 11 | H�|�:�{���E� ���d�(A�f�4E�i��Q��F iTQ���n����]�{hS�J37*�J����W��㨿h���<%t� 12 | ���gʮ|#��x?�)K�ȿ�m��5 13 | �M��$�j5�8�8�N���6ZL��o]P�����V�kɻ)h�k r/��B��Yr�UM��րsι�ιc(3F� �$I\3�@ � ŀ��.�S�2ʡ�bu�� 15 | +������5�.�p� �$ Q��{���(PGHC��vY~�ҿC���f�<ꟿ@�-! �+hF�N���q�Z�%����'�u� j�x?ʚ��|ZQF���E��Y�귇�����ҳH��V���)���� �ܥ$I�p�=��܊v7��nGMa�+gQ (L���6��Cc��.�h%�W��2����n�~�$?����4��4���d�2F�2��/��R2(�H��" �'? �ӫHÇ�B���<�YY]!E���1��`j�܋��� [XӇ�2z�L/h�"Ԑ�>���5�>VP�<��F�Pfs-�����* 16 | �s� /�IV+�;о�i�ҳumOyY�A9��{�E�se1'P.}��}YJ_��6SE�E�_P��q7!o1��"F���z�zAe�h��V_,�^݋a�a�a�a�a�a�a�a�a�1���ى��EQ%tEXtdate:create2015-09-25T13:22:38+00:00����%tEXtdate:modify2015-09-25T13:22:38+00:00�mFtEXtsoftwareImageMagick 6.7.8-9 2014-05-12 Q16 http://www.imagemagick.org܆�tEXtThumb::Document::Pages1���/tEXtThumb::Image::height192r�tEXtThumb::Image::Width192Ӭ!tEXtThumb::Mimetypeimage/png?�VNtEXtThumb::MTime1443187358�J!qtEXtThumb::Size0BB��>�VtEXtThumb::URIfile:///mntlog/favicons/2015-09-25/d48d2032f3bb914ad894fae302bc6a3c.ico.pngK)#vIEND�B`� -------------------------------------------------------------------------------- /pages/maps.vue: -------------------------------------------------------------------------------- 1 | 8 | 84 | 86 | -------------------------------------------------------------------------------- /components/Cards/ChartCard.vue: -------------------------------------------------------------------------------- 1 | 32 | 112 | 114 | -------------------------------------------------------------------------------- /assets/sass/paper/_typography.scss: -------------------------------------------------------------------------------- 1 | h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, .navbar, .brand, a, .td-name, td { 2 | -moz-osx-font-smoothing: grayscale; 3 | -webkit-font-smoothing: antialiased; 4 | font-family: 'Muli', "Helvetica", Arial, sans-serif; 5 | } 6 | 7 | h1, .h1, h2, .h2, h3, .h3, h4, .h4 { 8 | font-weight: $font-weight-normal; 9 | margin: $margin-large-vertical 0 $margin-base-vertical; 10 | } 11 | 12 | h1, .h1 { 13 | font-size: $font-size-h1; 14 | } 15 | 16 | h2, .h2 { 17 | font-size: $font-size-h2; 18 | } 19 | 20 | h3, .h3 { 21 | font-size: $font-size-h3; 22 | line-height: 1.4; 23 | margin: 20px 0 10px; 24 | } 25 | 26 | h4, .h4 { 27 | font-size: $font-size-h4; 28 | font-weight: $font-weight-bold; 29 | line-height: 1.2em; 30 | } 31 | 32 | h5, .h5 { 33 | font-size: $font-size-h5; 34 | font-weight: $font-weight-normal; 35 | line-height: 1.4em; 36 | margin-bottom: 15px; 37 | } 38 | 39 | h6, .h6 { 40 | font-size: $font-size-h6; 41 | font-weight: $font-weight-bold; 42 | text-transform: uppercase; 43 | } 44 | 45 | p { 46 | font-size: $font-paragraph; 47 | line-height: $line-height-general; 48 | } 49 | 50 | h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small { 51 | color: $dark-gray; 52 | font-weight: $font-weight-light; 53 | line-height: $line-height-general; 54 | } 55 | 56 | h1 small, h2 small, h3 small, h1 .small, h2 .small, h3 .small { 57 | font-size: 60%; 58 | } 59 | 60 | .title-uppercase { 61 | text-transform: uppercase; 62 | } 63 | 64 | blockquote { 65 | font-style: italic; 66 | } 67 | 68 | blockquote small { 69 | font-style: normal; 70 | } 71 | 72 | .text-muted { 73 | color: $medium-gray; 74 | } 75 | 76 | .text-primary, .text-primary:hover { 77 | color: $primary-states-color; 78 | } 79 | 80 | .text-info, .text-info:hover { 81 | color: $info-states-color; 82 | } 83 | 84 | .text-success, .text-success:hover { 85 | color: $success-states-color; 86 | } 87 | 88 | .text-warning, .text-warning:hover { 89 | color: $warning-states-color; 90 | } 91 | 92 | .text-danger, .text-danger:hover { 93 | color: $danger-states-color; 94 | } 95 | 96 | .glyphicon { 97 | line-height: 1; 98 | } 99 | 100 | strong { 101 | color: $default-states-color; 102 | } 103 | 104 | .icon-primary { 105 | color: $primary-color; 106 | } 107 | 108 | .icon-info { 109 | color: $info-color; 110 | } 111 | 112 | .icon-success { 113 | color: $success-color; 114 | } 115 | 116 | .icon-warning { 117 | color: $warning-color; 118 | } 119 | 120 | .icon-danger { 121 | color: $danger-color; 122 | } 123 | 124 | .chart-legend { 125 | .text-primary, .text-primary:hover { 126 | color: $primary-color; 127 | } 128 | .text-info, .text-info:hover { 129 | color: $info-color; 130 | } 131 | .text-success, .text-success:hover { 132 | color: $success-color; 133 | } 134 | .text-warning, .text-warning:hover { 135 | color: $warning-color; 136 | } 137 | .text-danger, .text-danger:hover { 138 | color: $danger-color; 139 | } 140 | } 141 | -------------------------------------------------------------------------------- /assets/sass/paper/_misc.scss: -------------------------------------------------------------------------------- 1 | /* General overwrite */ 2 | body { 3 | color: $font-color; 4 | font-size: $font-size-base; 5 | font-family: 'Muli', Arial, sans-serif; 6 | .wrapper { 7 | min-height: 100vh; 8 | position: relative; 9 | } 10 | } 11 | 12 | a { 13 | color: $info-color; 14 | 15 | &:hover, &:focus { 16 | color: $info-states-color; 17 | text-decoration: none; 18 | } 19 | } 20 | 21 | a:focus, a:active, 22 | button::-moz-focus-inner, 23 | input::-moz-focus-inner, 24 | select::-moz-focus-inner, 25 | input[type="file"] > input[type="button"]::-moz-focus-inner { 26 | outline: 0 !important; 27 | } 28 | 29 | .ui-slider-handle:focus, 30 | .navbar-toggle, 31 | input:focus, 32 | button:focus { 33 | outline: 0 !important; 34 | } 35 | 36 | .navbar.navbar-default { 37 | z-index: 2; 38 | } 39 | 40 | /* Animations */ 41 | .form-control, 42 | .input-group-addon, 43 | .tagsinput, 44 | .navbar, 45 | .navbar .alert { 46 | @include transition($general-transition-time, $transition-linear); 47 | } 48 | 49 | .sidebar .nav a, 50 | .table > tbody > tr .td-actions .btn { 51 | @include transition($fast-transition-time, $transition-ease-in); 52 | } 53 | 54 | .btn { 55 | @include transition($ultra-fast-transition-time, $transition-ease-in); 56 | } 57 | 58 | .fa { 59 | width: 21px; 60 | text-align: center; 61 | } 62 | 63 | .fa-base { 64 | font-size: 1.25em !important; 65 | } 66 | 67 | .margin-top { 68 | margin-top: 50px; 69 | } 70 | 71 | hr { 72 | border-color: $medium-pale-bg; 73 | } 74 | 75 | .wrapper { 76 | position: relative; 77 | top: 0; 78 | height: 100vh; 79 | } 80 | 81 | @media (min-width: 992px) { 82 | .typo-line { 83 | padding-left: 140px; 84 | margin-bottom: 40px; 85 | position: relative; 86 | } 87 | 88 | .typo-line .category { 89 | transform: translateY(-50%); 90 | top: 50%; 91 | left: 0px; 92 | position: absolute; 93 | } 94 | } 95 | 96 | .icon-section { 97 | margin: 0 0 3em; 98 | clear: both; 99 | overflow: hidden; 100 | } 101 | 102 | .icon-container { 103 | width: 240px; 104 | padding: .7em 0; 105 | float: left; 106 | position: relative; 107 | text-align: left; 108 | } 109 | 110 | .icon-container [class^="ti-"], 111 | .icon-container [class*=" ti-"] { 112 | color: #000; 113 | position: absolute; 114 | margin-top: 3px; 115 | transition: .3s; 116 | } 117 | 118 | .icon-container:hover [class^="ti-"], 119 | .icon-container:hover [class*=" ti-"] { 120 | font-size: 2.2em; 121 | margin-top: -5px; 122 | } 123 | 124 | .icon-container:hover .icon-name { 125 | color: #000; 126 | } 127 | 128 | .icon-name { 129 | color: #aaa; 130 | margin-left: 35px; 131 | font-size: .8em; 132 | transition: .3s; 133 | } 134 | 135 | .icon-container:hover .icon-name { 136 | margin-left: 45px; 137 | } 138 | 139 | .places-buttons .btn { 140 | margin-bottom: 30px 141 | } 142 | 143 | .sidebar .nav > li.active-pro { 144 | position: absolute; 145 | width: 100%; 146 | bottom: 10px; 147 | } 148 | 149 | .sidebar .nav > li.active-pro a { 150 | background: rgba(255, 255, 255, 0.14); 151 | opacity: 1; 152 | color: #FFFFFF; 153 | } 154 | 155 | .table-upgrade td:nth-child(2), 156 | .table-upgrade td:nth-child(3) { 157 | text-align: center; 158 | } 159 | 160 | -------------------------------------------------------------------------------- /assets/sass/paper/_checkbox-radio.scss: -------------------------------------------------------------------------------- 1 | /* Checkbox and radio */ 2 | .checkbox, 3 | .radio { 4 | margin-bottom: 12px; 5 | padding-left: 30px; 6 | position: relative; 7 | -webkit-transition: color, opacity 0.25s linear; 8 | transition: color, opacity 0.25s linear; 9 | font-size: $font-size-base; 10 | font-weight: normal; 11 | line-height: 1.5; 12 | color: $font-color; 13 | cursor: pointer; 14 | 15 | .icons { 16 | color: $font-color; 17 | display: block; 18 | height: 20px; 19 | left: 0; 20 | position: absolute; 21 | top: 0; 22 | width: 20px; 23 | text-align: center; 24 | line-height: 21px; 25 | font-size: 20px; 26 | cursor: pointer; 27 | -webkit-transition: color, opacity 0.15s linear; 28 | transition: color, opacity 0.15s linear; 29 | 30 | opacity: .50; 31 | } 32 | 33 | &.checked { 34 | .icons { 35 | opacity: 1; 36 | } 37 | } 38 | 39 | input { 40 | outline: none !important; 41 | display: none; 42 | } 43 | } 44 | 45 | .checkbox, 46 | .radio { 47 | label { 48 | padding-left: 10px; 49 | } 50 | } 51 | 52 | .checkbox .icons .first-icon, 53 | .radio .icons .first-icon, 54 | .checkbox .icons .second-icon, 55 | .radio .icons .second-icon { 56 | display: inline-table; 57 | position: absolute; 58 | left: 0; 59 | top: 0; 60 | background-color: transparent; 61 | margin: 0; 62 | @include opacity(1); 63 | } 64 | 65 | .checkbox .icons .second-icon, 66 | .radio .icons .second-icon { 67 | @include opacity(0); 68 | } 69 | 70 | .checkbox:hover, 71 | .radio:hover { 72 | -webkit-transition: color 0.2s linear; 73 | transition: color 0.2s linear; 74 | } 75 | 76 | .checkbox:hover .first-icon, 77 | .radio:hover .first-icon { 78 | @include opacity(0); 79 | } 80 | 81 | .checkbox:hover .second-icon, 82 | .radio:hover .second-icon { 83 | @include opacity (1); 84 | } 85 | 86 | .checkbox.checked, 87 | .radio.checked { 88 | // color: $info-color; 89 | } 90 | 91 | .checkbox.checked .first-icon, 92 | .radio.checked .first-icon { 93 | opacity: 0; 94 | filter: alpha(opacity=0); 95 | } 96 | 97 | .checkbox.checked .second-icon, 98 | .radio.checked .second-icon { 99 | opacity: 1; 100 | filter: alpha(opacity=100); 101 | // color: $info-color; 102 | -webkit-transition: color 0.2s linear; 103 | transition: color 0.2s linear; 104 | } 105 | 106 | .checkbox.disabled, 107 | .radio.disabled { 108 | cursor: default; 109 | color: $medium-gray; 110 | } 111 | 112 | .checkbox.disabled .icons, 113 | .radio.disabled .icons { 114 | color: $medium-gray; 115 | } 116 | 117 | .checkbox.disabled .first-icon, 118 | .radio.disabled .first-icon { 119 | opacity: 1; 120 | filter: alpha(opacity=100); 121 | } 122 | 123 | .checkbox.disabled .second-icon, 124 | .radio.disabled .second-icon { 125 | opacity: 0; 126 | filter: alpha(opacity=0); 127 | } 128 | 129 | .checkbox.disabled.checked .icons, 130 | .radio.disabled.checked .icons { 131 | color: $medium-gray; 132 | } 133 | 134 | .checkbox.disabled.checked .first-icon, 135 | .radio.disabled.checked .first-icon { 136 | opacity: 0; 137 | filter: alpha(opacity=0); 138 | } 139 | 140 | .checkbox.disabled.checked .second-icon, 141 | .radio.disabled.checked .second-icon { 142 | opacity: 1; 143 | color: $medium-gray; 144 | filter: alpha(opacity=100); 145 | } 146 | -------------------------------------------------------------------------------- /components/SidebarPlugin/SideBar.vue: -------------------------------------------------------------------------------- 1 | 39 | 135 | 137 | -------------------------------------------------------------------------------- /assets/sass/paper/mixins/_chartist.scss: -------------------------------------------------------------------------------- 1 | // Scales for responsive SVG containers 2 | $ct-scales: ((1), (15/16), (8/9), (5/6), (4/5), (3/4), (2/3), (5/8), (1/1.618), (3/5), (9/16), (8/15), (1/2), (2/5), (3/8), (1/3), (1/4)) !default; 3 | $ct-scales-names: (ct-square, ct-minor-second, ct-major-second, ct-minor-third, ct-major-third, ct-perfect-fourth, ct-perfect-fifth, ct-minor-sixth, ct-golden-section, ct-major-sixth, ct-minor-seventh, ct-major-seventh, ct-octave, ct-major-tenth, ct-major-eleventh, ct-major-twelfth, ct-double-octave) !default; 4 | 5 | // Class names to be used when generating CSS 6 | $ct-class-chart: ct-chart !default; 7 | $ct-class-chart-line: ct-chart-line !default; 8 | $ct-class-chart-bar: ct-chart-bar !default; 9 | $ct-class-horizontal-bars: ct-horizontal-bars !default; 10 | $ct-class-chart-pie: ct-chart-pie !default; 11 | $ct-class-chart-donut: ct-chart-donut !default; 12 | $ct-class-label: ct-label !default; 13 | $ct-class-series: ct-series !default; 14 | $ct-class-line: ct-line !default; 15 | $ct-class-point: ct-point !default; 16 | $ct-class-area: ct-area !default; 17 | $ct-class-bar: ct-bar !default; 18 | $ct-class-slice-pie: ct-slice-pie !default; 19 | $ct-class-slice-donut: ct-slice-donut !default; 20 | $ct-class-grid: ct-grid !default; 21 | $ct-class-vertical: ct-vertical !default; 22 | $ct-class-horizontal: ct-horizontal !default; 23 | $ct-class-start: ct-start !default; 24 | $ct-class-end: ct-end !default; 25 | 26 | // Container ratio 27 | $ct-container-ratio: (1/1.618) !default; 28 | 29 | // Text styles for labels 30 | $ct-text-color: rgba(0, 0, 0, 0.4) !default; 31 | $ct-text-size: 0.9em !default; 32 | $ct-text-align: flex-start !default; 33 | $ct-text-justify: flex-start !default; 34 | $ct-text-line-height: 1; 35 | 36 | // Grid styles 37 | $ct-grid-color: rgba(0, 0, 0, 0.2) !default; 38 | $ct-grid-dasharray: 2px !default; 39 | $ct-grid-width: 1px !default; 40 | 41 | // Line chart properties 42 | $ct-line-width: 4px !default; 43 | $ct-line-dasharray: false !default; 44 | $ct-point-size: 10px !default; 45 | // Line chart point, can be either round or square 46 | $ct-point-shape: round !default; 47 | // Area fill transparency between 0 and 1 48 | $ct-area-opacity: 0.7 !default; 49 | 50 | // Bar chart bar width 51 | $ct-bar-width: 10px !default; 52 | 53 | // Donut width (If donut width is to big it can cause issues where the shape gets distorted) 54 | $ct-donut-width: 60px !default; 55 | 56 | // If set to true it will include the default classes and generate CSS output. If you're planning to use the mixins you 57 | // should set this property to false 58 | $ct-include-classes: true !default; 59 | 60 | // If this is set to true the CSS will contain colored series. You can extend or change the color with the 61 | // properties below 62 | $ct-include-colored-series: $ct-include-classes !default; 63 | 64 | // If set to true this will include all responsive container variations using the scales defined at the top of the script 65 | $ct-include-alternative-responsive-containers: $ct-include-classes !default; 66 | 67 | // Series names and colors. This can be extended or customized as desired. Just add more series and colors. 68 | $ct-series-names: (a, b, c, d, e, f, g, h, i, j, k, l, m, n, o) !default; 69 | $ct-series-colors: ( 70 | $info-color, 71 | $warning-color, 72 | $danger-color, 73 | $success-color, 74 | $primary-color, 75 | rgba($info-color, .8), 76 | rgba($success-color, .8), 77 | rgba($warning-color, .8), 78 | rgba($danger-color, .8), 79 | rgba($primary-color, .8), 80 | rgba($info-color, .6), 81 | rgba($success-color, .6), 82 | rgba($warning-color, .6), 83 | rgba($danger-color, .6), 84 | rgba($primary-color, .6) 85 | ) !default; 86 | 87 | // Paper Kit Colors 88 | 89 | .ct-blue { 90 | stroke: $primary-color !important; 91 | } 92 | 93 | .ct-azure { 94 | stroke: $info-color !important; 95 | } 96 | 97 | .ct-green { 98 | stroke: $success-color !important; 99 | } 100 | 101 | .ct-orange { 102 | stroke: $warning-color !important; 103 | } 104 | 105 | .ct-red { 106 | stroke: $danger-color !important; 107 | } 108 | -------------------------------------------------------------------------------- /components/UserProfile/EditProfileForm.vue: -------------------------------------------------------------------------------- 1 | 106 | 129 | 131 | -------------------------------------------------------------------------------- /assets/sass/paper/_inputs.scss: -------------------------------------------------------------------------------- 1 | .form-control::-moz-placeholder { 2 | @include placeholder($medium-gray, 1); 3 | } 4 | 5 | .form-control:-moz-placeholder { 6 | @include placeholder($medium-gray, 1); 7 | } 8 | 9 | .form-control::-webkit-input-placeholder { 10 | @include placeholder($medium-gray, 1); 11 | } 12 | 13 | .form-control:-ms-input-placeholder { 14 | @include placeholder($medium-gray, 1); 15 | } 16 | 17 | .form-control { 18 | background-color: $gray-input-bg; 19 | border: medium none; 20 | border-radius: $border-radius-base; 21 | color: $font-color; 22 | font-size: $font-size-base; 23 | transition: background-color 0.3s ease 0s; 24 | @include input-size($padding-base-vertical, $padding-base-horizontal, $height-base); 25 | @include box-shadow(none); 26 | 27 | &:focus { 28 | background-color: $white-bg; 29 | @include box-shadow(none); 30 | outline: 0 !important; 31 | } 32 | 33 | .has-success &, 34 | .has-error &, 35 | .has-success &:focus, 36 | .has-error &:focus { 37 | @include box-shadow(none); 38 | } 39 | 40 | .has-success & { 41 | background-color: $success-input-bg; 42 | color: $success-color; 43 | &.border-input { 44 | border: 1px solid $success-color; 45 | } 46 | } 47 | .has-success &:focus { 48 | background-color: $white-bg; 49 | } 50 | .has-error & { 51 | background-color: $danger-input-bg; 52 | color: $danger-color; 53 | &.border-input { 54 | border: 1px solid $danger-color; 55 | } 56 | } 57 | .has-error &:focus { 58 | background-color: $white-bg; 59 | } 60 | 61 | & + .form-control-feedback { 62 | border-radius: $border-radius-large; 63 | font-size: $font-size-base; 64 | margin-top: -7px; 65 | position: absolute; 66 | right: 10px; 67 | top: 50%; 68 | vertical-align: middle; 69 | } 70 | &.border-input { 71 | border: 1px solid $table-line-color; 72 | } 73 | .open & { 74 | border-bottom-color: transparent; 75 | } 76 | } 77 | 78 | .input-lg { 79 | height: 55px; 80 | padding: $padding-large-vertical $padding-large-horizontal; 81 | } 82 | 83 | .has-error { 84 | .form-control-feedback, .control-label { 85 | color: $danger-color; 86 | } 87 | } 88 | 89 | .has-success { 90 | .form-control-feedback, .control-label { 91 | color: $success-color; 92 | } 93 | } 94 | 95 | .input-group-addon { 96 | background-color: $gray-input-bg; 97 | border: medium none; 98 | border-radius: $border-radius-base; 99 | 100 | .has-success &, 101 | .has-error & { 102 | background-color: $white-color; 103 | } 104 | .has-error .form-control:focus + & { 105 | color: $danger-color; 106 | } 107 | .has-success .form-control:focus + & { 108 | color: $success-color; 109 | } 110 | .form-control:focus + &, 111 | .form-control:focus ~ & { 112 | background-color: $white-color; 113 | } 114 | } 115 | 116 | .border-input { 117 | .input-group-addon { 118 | border: solid 1px $table-line-color; 119 | } 120 | } 121 | 122 | .input-group { 123 | margin-bottom: 15px; 124 | } 125 | 126 | .input-group[disabled] { 127 | .input-group-addon { 128 | background-color: $light-gray; 129 | } 130 | } 131 | 132 | .input-group .form-control:first-child, 133 | .input-group-addon:first-child, 134 | .input-group-btn:first-child > .dropdown-toggle, 135 | .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) { 136 | border-right: 0 none; 137 | } 138 | 139 | .input-group .form-control:last-child, 140 | .input-group-addon:last-child, 141 | .input-group-btn:last-child > .dropdown-toggle, 142 | .input-group-btn:first-child > .btn:not(:first-child) { 143 | border-left: 0 none; 144 | } 145 | 146 | .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { 147 | background-color: $light-gray; 148 | cursor: not-allowed; 149 | @include placeholder($dark-gray, 1); 150 | } 151 | 152 | .form-control[disabled]::-moz-placeholder { 153 | @include placeholder($dark-gray, 1); 154 | } 155 | 156 | .form-control[disabled]:-moz-placeholder { 157 | @include placeholder($medium-gray, 1); 158 | } 159 | 160 | .form-control[disabled]::-webkit-input-placeholder { 161 | @include placeholder($medium-gray, 1); 162 | } 163 | 164 | .form-control[disabled]:-ms-input-placeholder { 165 | @include placeholder($medium-gray, 1); 166 | } 167 | 168 | .input-group-btn .btn { 169 | border-width: $border-thin; 170 | padding: $padding-round-vertical $padding-base-horizontal; 171 | } 172 | 173 | .input-group-btn .btn-default:not(.btn-fill) { 174 | border-color: $medium-gray; 175 | } 176 | 177 | .input-group-btn:last-child > .btn { 178 | margin-left: 0; 179 | } 180 | 181 | textarea.form-control { 182 | max-width: 100%; 183 | padding: 10px 18px; 184 | resize: none; 185 | } 186 | 187 | -------------------------------------------------------------------------------- /assets/sass/paper/_sidebar-and-main-panel.scss: -------------------------------------------------------------------------------- 1 | .wrapper .sidebar { 2 | position: fixed; 3 | top: 0; 4 | bottom: 0; 5 | left: 0; 6 | z-index: 1; 7 | background-size: cover; 8 | background-position: center center; 9 | .sidebar-wrapper { 10 | position: relative; 11 | height: 100%; 12 | overflow-y: auto; 13 | overflow-x: hidden; 14 | width: 260px; 15 | z-index: 4; 16 | box-shadow: inset -1px 0px 0px 0px $medium-gray; 17 | } 18 | .sidebar-background { 19 | position: absolute; 20 | z-index: 1; 21 | height: 100%; 22 | width: 100%; 23 | display: block; 24 | top: 0; 25 | left: 0; 26 | background-size: cover; 27 | background-position: center center; 28 | } 29 | 30 | } 31 | 32 | .wrapper .sidebar { 33 | width: 260px; 34 | display: block; 35 | font-weight: 200; 36 | 37 | .logo { 38 | padding: 13px 0; 39 | margin: 0 20px; 40 | 41 | p { 42 | float: left; 43 | font-size: 20px; 44 | margin: 10px 10px; 45 | line-height: 20px; 46 | } 47 | 48 | .simple-text { 49 | padding: $padding-small-vertical $padding-zero; 50 | display: block; 51 | font-size: $font-size-base; 52 | text-align: center; 53 | font-weight: $font-weight-bold; 54 | line-height: 40px; 55 | text-align: left; 56 | 57 | .logo-img{ 58 | width: 40px; 59 | display: inline-block; 60 | height: 40px; 61 | margin-left: 0px; 62 | margin-right: 10px; 63 | background: white; 64 | border-radius: 40px; 65 | text-align: center; 66 | 67 | img{ 68 | max-width: 21px; 69 | } 70 | } 71 | } 72 | } 73 | 74 | .nav { 75 | //margin-top: 20px; 76 | 77 | .nav-item { 78 | width: 100%; 79 | .nav-link { 80 | margin: 10px 0px; 81 | padding-left: 25px; 82 | padding-right: 25px; 83 | 84 | opacity: .7; 85 | } 86 | 87 | &:hover > .nav-link { 88 | opacity: 1; 89 | } 90 | 91 | &.active > .nav-link { 92 | color: $primary-color; 93 | opacity: 1; 94 | } 95 | } 96 | 97 | p { 98 | margin: 0; 99 | line-height: 30px; 100 | font-size: 12px; 101 | font-weight: 600; 102 | text-transform: uppercase; 103 | } 104 | 105 | i { 106 | font-size: 24px; 107 | float: left; 108 | margin-right: 15px; 109 | line-height: 30px; 110 | width: 30px; 111 | text-align: center; 112 | } 113 | } 114 | 115 | &:after, 116 | &:before { 117 | display: block; 118 | content: ""; 119 | position: absolute; 120 | width: 100%; 121 | height: 100%; 122 | top: 0; 123 | left: 0; 124 | z-index: 2; 125 | background: $white-background-color; 126 | } 127 | 128 | &, 129 | &[data-background-color="white"] { 130 | @include sidebar-background-color($white-background-color, $default-color); 131 | } 132 | &[data-background-color="black"] { 133 | @include sidebar-background-color($black-background-color, $white-color); 134 | } 135 | &[data-background-color="darkblue"] { 136 | @include sidebar-background-color($darkblue-background-color, $white-color); 137 | } 138 | 139 | &[data-active-color="primary"] { 140 | @include sidebar-active-color($primary-color); 141 | } 142 | &[data-active-color="info"] { 143 | @include sidebar-active-color($info-color); 144 | } 145 | &[data-active-color="success"] { 146 | @include sidebar-active-color($success-color); 147 | } 148 | &[data-active-color="warning"] { 149 | @include sidebar-active-color($warning-color); 150 | } 151 | &[data-active-color="danger"] { 152 | @include sidebar-active-color($danger-color); 153 | } 154 | 155 | } 156 | 157 | .main-panel { 158 | background-color: $bg-nude; 159 | position: relative; 160 | z-index: 2; 161 | float: right; 162 | width: $sidebar-width; 163 | min-height: 100%; 164 | overflow: auto; 165 | 166 | > .content { 167 | padding: 30px 15px; 168 | min-height: calc(100% - 123px); 169 | } 170 | 171 | > .footer { 172 | border-top: 1px solid rgba(0, 0, 0, 0.1); 173 | } 174 | 175 | .navbar { 176 | margin-bottom: 0; 177 | } 178 | } 179 | 180 | .wrapper .sidebar, 181 | .main-panel { 182 | -webkit-transition-property: top, bottom; 183 | transition-property: top, bottom; 184 | -webkit-transition-duration: .2s, .2s; 185 | transition-duration: .2s, .2s; 186 | -webkit-transition-timing-function: linear, linear; 187 | transition-timing-function: linear, linear; 188 | -webkit-overflow-scrolling: touch; 189 | } 190 | 191 | .wrapper .sidebar { 192 | max-height: 100%; 193 | height: 100%; 194 | overflow: hidden; 195 | overflow-y: hidden; 196 | } 197 | -------------------------------------------------------------------------------- /pages/notifications.vue: -------------------------------------------------------------------------------- 1 | 88 | 114 | 116 | -------------------------------------------------------------------------------- /assets/sass/paper/_cards.scss: -------------------------------------------------------------------------------- 1 | .card { 2 | border-radius: $border-radius-extreme; 3 | box-shadow: 0 2px 2px rgba(204, 197, 185, 0.5); 4 | background-color: #FFFFFF; 5 | color: $card-black-color; 6 | margin-bottom: 20px; 7 | position: relative; 8 | z-index: 1; 9 | border: none; 10 | 11 | .card-image { 12 | width: 100%; 13 | overflow: hidden; 14 | height: 260px; 15 | border-radius: $border-radius-extreme $border-radius-extreme 0 0; 16 | position: relative; 17 | -webkit-transform-style: preserve-3d; 18 | -moz-transform-style: preserve-3d; 19 | transform-style: preserve-3d; 20 | 21 | img { 22 | width: 100%; 23 | } 24 | } 25 | .card-body { 26 | padding: 15px 15px 10px 15px; 27 | } 28 | .card-header { 29 | padding: 20px 20px 0; 30 | border-bottom: 0; 31 | background-color: transparent; 32 | } 33 | .description { 34 | font-size: $font-paragraph; 35 | color: $font-color; 36 | } 37 | 38 | h6 { 39 | font-size: $font-size-small; 40 | margin: 0; 41 | } 42 | .card-category, 43 | label { 44 | font-size: $font-size-base; 45 | font-weight: $font-weight-normal; 46 | color: $dark-gray; 47 | margin-bottom: 0px; 48 | i { 49 | font-size: $font-paragraph; 50 | } 51 | } 52 | 53 | label { 54 | font-size: 15px; 55 | margin-bottom: 5px; 56 | } 57 | 58 | .card-title { 59 | margin: $none; 60 | color: $card-black-color; 61 | font-weight: $font-weight-light; 62 | } 63 | .avatar { 64 | width: 50px; 65 | height: 50px; 66 | overflow: hidden; 67 | border-radius: 50%; 68 | margin-right: 5px; 69 | } 70 | .footer { 71 | padding: 0; 72 | line-height: 30px; 73 | 74 | .legend { 75 | padding: 5px 0; 76 | } 77 | 78 | hr { 79 | margin-top: 5px; 80 | margin-bottom: 5px; 81 | } 82 | } 83 | .stats { 84 | color: #a9a9a9; 85 | font-weight: 300; 86 | i { 87 | margin-right: 2px; 88 | min-width: 15px; 89 | display: inline-block; 90 | } 91 | } 92 | .footer div { 93 | display: inline-block; 94 | } 95 | 96 | .author { 97 | font-size: $font-size-small; 98 | font-weight: $font-weight-bold; 99 | text-transform: uppercase; 100 | } 101 | .author i { 102 | font-size: $font-size-base; 103 | } 104 | 105 | &.card-separator:after { 106 | height: 100%; 107 | right: -15px; 108 | top: 0; 109 | width: 1px; 110 | background-color: $medium-gray; 111 | content: ""; 112 | position: absolute; 113 | } 114 | 115 | .ct-chart { 116 | margin: 30px 0 30px; 117 | height: 245px; 118 | } 119 | 120 | .table { 121 | tbody td:first-child, 122 | thead th:first-child { 123 | padding-left: 15px; 124 | } 125 | 126 | tbody td:last-child, 127 | thead th:last-child { 128 | padding-right: 15px; 129 | } 130 | } 131 | 132 | .alert { 133 | border-radius: $border-radius-base; 134 | position: relative; 135 | 136 | &.alert-with-icon { 137 | padding-left: 65px; 138 | } 139 | } 140 | .icon-big { 141 | font-size: 3em; 142 | min-height: 64px; 143 | } 144 | .numbers { 145 | font-size: 2em; 146 | text-align: right; 147 | p { 148 | margin: 0; 149 | } 150 | } 151 | ul.team-members { 152 | li { 153 | padding: 10px 0px; 154 | &:not(:last-child) { 155 | border-bottom: 1px solid $medium-pale-bg; 156 | } 157 | } 158 | } 159 | } 160 | 161 | .card-user { 162 | .image { 163 | border-radius: 8px 8px 0 0; 164 | height: 150px; 165 | position: relative; 166 | overflow: hidden; 167 | 168 | img { 169 | width: 100%; 170 | } 171 | } 172 | .image-plain { 173 | height: 0; 174 | margin-top: 110px; 175 | } 176 | .author { 177 | text-align: center; 178 | text-transform: none; 179 | margin-top: -65px; 180 | .title { 181 | color: $default-states-color; 182 | small { 183 | color: $card-muted-color; 184 | } 185 | } 186 | } 187 | .avatar { 188 | width: 100px; 189 | height: 100px; 190 | border-radius: 50%; 191 | position: relative; 192 | margin-bottom: 15px; 193 | 194 | &.border-white { 195 | border: 5px solid $white-color; 196 | } 197 | &.border-gray { 198 | border: 5px solid $card-muted-color; 199 | } 200 | } 201 | .card-title { 202 | font-weight: 600; 203 | line-height: 24px; 204 | } 205 | .description { 206 | margin-top: 10px; 207 | } 208 | .card-body { 209 | min-height: 200px; 210 | } 211 | 212 | &.card-plain { 213 | .avatar { 214 | height: 190px; 215 | width: 190px; 216 | } 217 | } 218 | } 219 | 220 | .card-map { 221 | .map { 222 | height: 500px; 223 | padding-top: 20px; 224 | 225 | > div { 226 | height: 100%; 227 | } 228 | } 229 | } 230 | 231 | .card-user, 232 | .card-price { 233 | .card-footer { 234 | padding: 5px 15px 10px; 235 | } 236 | hr { 237 | margin: 5px 15px; 238 | } 239 | } 240 | 241 | .card-plain { 242 | background-color: transparent; 243 | box-shadow: none; 244 | border-radius: 0; 245 | 246 | .image { 247 | border-radius: 4px; 248 | } 249 | } 250 | -------------------------------------------------------------------------------- /assets/sass/paper/_buttons.scss: -------------------------------------------------------------------------------- 1 | .btn{ 2 | box-sizing: border-box; 3 | border-width: $border-thick; 4 | font-size: $font-size-small; 5 | font-weight: $font-weight-bold; 6 | padding: .5rem $padding-base-horizontal; 7 | line-height: 1.75; 8 | cursor: pointer; 9 | text-transform: uppercase; 10 | 11 | &.btn-border, 12 | &.btn-link{ 13 | background-color: $transparent-bg; 14 | } 15 | 16 | @include btn-styles($default-color, $default-states-color); 17 | @include transition($fast-transition-time, linear); 18 | 19 | &:hover, 20 | &:focus{ 21 | outline: 0 !important; 22 | @include box-shadow(none); 23 | } 24 | &:active, 25 | &.active, 26 | .open > &.dropdown-toggle { 27 | @include box-shadow(none); 28 | outline: 0 !important; 29 | } 30 | 31 | &[class*="btn-outline-"]{ 32 | background-image: none; 33 | background-color: transparent; 34 | } 35 | } 36 | .btn-just-icon{ 37 | border-radius: $border-radius-btn-large; 38 | height: 40px; 39 | width: 40px; 40 | min-width: 40px; 41 | padding: 8px; 42 | 43 | &.btn-sm{ 44 | padding: 4px !important; 45 | } 46 | i{ 47 | font-size: $font-size-medium; 48 | padding: 2px 0px; 49 | } 50 | } 51 | .upgrade-pro{ 52 | .btn{ 53 | margin-top: 30px; 54 | } 55 | } 56 | .btn-link.btn-just-icon{ 57 | padding: 8px; 58 | } 59 | 60 | .btn-group .btn + .btn, 61 | .btn-group .btn + .btn-group, 62 | .btn-group .btn-group + .btn, 63 | .btn-group .btn-group + .btn-group{ 64 | margin-left: -2px; 65 | } 66 | 67 | 68 | // Apply the mixin to the buttons 69 | .btn-primary { @include btn-styles($primary-color, $primary-states-color); } 70 | .btn-success { @include btn-styles($success-color, $success-states-color); } 71 | .btn-info { @include btn-styles($info-color, $info-states-color); } 72 | .btn-warning { @include btn-styles($warning-color, $warning-states-color); } 73 | .btn-danger { @include btn-styles($danger-color, $danger-states-color); } 74 | .btn-neutral { @include btn-styles($white-color, $default-states-color); } 75 | 76 | .btn-outline-default { @include btn-outline-styles($default-color, $default-states-color); } 77 | .btn-outline-primary { @include btn-outline-styles($primary-color, $primary-states-color); } 78 | .btn-outline-success { @include btn-outline-styles($success-color, $success-states-color); } 79 | .btn-outline-info { @include btn-outline-styles($info-color, $info-states-color); } 80 | .btn-outline-warning { @include btn-outline-styles($warning-color, $warning-states-color); } 81 | .btn-outline-danger { @include btn-outline-styles($danger-color, $danger-states-color); } 82 | .btn-outline-neutral { @include btn-outline-styles($white-color, $default-states-color); 83 | &:hover, 84 | &:focus{ 85 | color: $default-states-color; 86 | background-color: $white-color; 87 | } 88 | } 89 | .btn-neutral { 90 | @include btn-styles($white-color, $white-color); 91 | color: $default-color; 92 | &:hover, 93 | &:focus{ 94 | color: $default-states-color; 95 | } 96 | 97 | &.btn-border{ 98 | &:hover, 99 | &:focus{ 100 | color: $default-color; 101 | } 102 | 103 | &:active, 104 | &.active, 105 | .open > &.dropdown-toggle{ 106 | background-color: $white-color; 107 | color: $default-color; 108 | } 109 | } 110 | 111 | &.btn-link:active, 112 | &.btn-link.active{ 113 | background-color: transparent; 114 | } 115 | } 116 | 117 | .btn{ 118 | &:disabled, 119 | &[disabled], 120 | &.disabled{ 121 | @include opacity(.5); 122 | } 123 | } 124 | .btn-link{ 125 | border-color: transparent !important; 126 | padding: $padding-base-vertical $padding-base-horizontal; 127 | 128 | &:hover, 129 | &:focus, 130 | &:active{ 131 | text-decoration: none; 132 | border-color: transparent; 133 | } 134 | 135 | &.btn-icon{ 136 | padding: $padding-base-vertical; 137 | } 138 | } 139 | 140 | .btn-lg{ 141 | @include btn-size($padding-large-vertical, $padding-large-horizontal, $font-size-base, $line-height-small); 142 | } 143 | .btn-sm{ 144 | @include btn-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small); 145 | } 146 | .btn-wd { 147 | min-width: 140px; 148 | } 149 | 150 | .btn-group.select{ 151 | width: 100%; 152 | } 153 | .btn-group.select .btn{ 154 | text-align: left; 155 | } 156 | .btn-group.select .caret{ 157 | position: absolute; 158 | top: 50%; 159 | margin-top: -1px; 160 | right: 8px; 161 | } 162 | .btn-just-icon{ 163 | &.btn-sm{ 164 | height: 30px; 165 | width: 30px; 166 | min-width: 30px; 167 | padding: 0; 168 | 169 | i{ 170 | font-size: $font-size-small; 171 | 172 | } 173 | } 174 | &.btn-lg{ 175 | height: 50px; 176 | width: 50px; 177 | min-width: 50px; 178 | padding: 13px; 179 | 180 | i{ 181 | font-size: 18px; 182 | padding: 0; 183 | } 184 | 185 | } 186 | 187 | } 188 | .btn-round{ 189 | border-radius: 30px; 190 | } 191 | .btn.btn-link:focus{ 192 | box-shadow: none !important; 193 | text-decoration: none; 194 | } 195 | 196 | .column .btn-link{ 197 | padding: 7px 0; 198 | } 199 | .share-buttons .btn-outline-default{ 200 | margin-top: 24px; 201 | } 202 | #modals .btn-outline-neutral{ 203 | margin-bottom: 10px; 204 | } 205 | .btn-group.select{ 206 | overflow: visible !important; 207 | } 208 | .media{ 209 | .media-body{ 210 | .media-footer{ 211 | .btn-neutral{ 212 | margin: $navbar-margin-btn; 213 | font-size: $font-size-base; 214 | i{ 215 | margin-right: 0 !important; 216 | } 217 | } 218 | } 219 | } 220 | } 221 | -------------------------------------------------------------------------------- /components/Charts.vue: -------------------------------------------------------------------------------- 1 | 74 | 201 | 203 | -------------------------------------------------------------------------------- /pages/typography.vue: -------------------------------------------------------------------------------- 1 | 163 | 166 | 168 | -------------------------------------------------------------------------------- /assets/sass/paper/_chartist.scss: -------------------------------------------------------------------------------- 1 | @mixin ct-responsive-svg-container($width: 100%, $ratio: $ct-container-ratio) { 2 | display: block; 3 | position: relative; 4 | width: $width; 5 | 6 | &:before { 7 | display: block; 8 | float: left; 9 | content: ""; 10 | width: 0; 11 | height: 0; 12 | padding-bottom: $ratio * 100%; 13 | } 14 | 15 | &:after { 16 | content: ""; 17 | display: table; 18 | clear: both; 19 | } 20 | 21 | > svg { 22 | display: block; 23 | position: absolute; 24 | top: 0; 25 | left: 0; 26 | } 27 | } 28 | 29 | @mixin ct-align-justify($ct-text-align: $ct-text-align, $ct-text-justify: $ct-text-justify) { 30 | -webkit-box-align: $ct-text-align; 31 | -webkit-align-items: $ct-text-align; 32 | -ms-flex-align: $ct-text-align; 33 | align-items: $ct-text-align; 34 | -webkit-box-pack: $ct-text-justify; 35 | -webkit-justify-content: $ct-text-justify; 36 | -ms-flex-pack: $ct-text-justify; 37 | justify-content: $ct-text-justify; 38 | // Fallback to text-align for non-flex browsers 39 | @if ($ct-text-justify == 'flex-start') { 40 | text-align: left; 41 | } @else if ($ct-text-justify == 'flex-end') { 42 | text-align: right; 43 | } @else { 44 | text-align: center; 45 | } 46 | } 47 | 48 | @mixin ct-flex() { 49 | // Fallback to block 50 | display: block; 51 | display: -webkit-box; 52 | display: -moz-box; 53 | display: -ms-flexbox; 54 | display: -webkit-flex; 55 | display: flex; 56 | } 57 | 58 | @mixin ct-chart-label($ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-text-line-height: $ct-text-line-height) { 59 | fill: $ct-text-color; 60 | color: $ct-text-color; 61 | font-size: $ct-text-size; 62 | line-height: $ct-text-line-height; 63 | } 64 | 65 | @mixin ct-chart-grid($ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray) { 66 | stroke: $ct-grid-color; 67 | stroke-width: $ct-grid-width; 68 | 69 | @if ($ct-grid-dasharray) { 70 | stroke-dasharray: $ct-grid-dasharray; 71 | } 72 | } 73 | 74 | @mixin ct-chart-point($ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape) { 75 | stroke-width: $ct-point-size; 76 | stroke-linecap: $ct-point-shape; 77 | } 78 | 79 | @mixin ct-chart-line($ct-line-width: $ct-line-width, $ct-line-dasharray: $ct-line-dasharray) { 80 | fill: none; 81 | stroke-width: $ct-line-width; 82 | 83 | @if ($ct-line-dasharray) { 84 | stroke-dasharray: $ct-line-dasharray; 85 | } 86 | } 87 | 88 | @mixin ct-chart-area($ct-area-opacity: $ct-area-opacity) { 89 | stroke: none; 90 | fill-opacity: $ct-area-opacity; 91 | } 92 | 93 | @mixin ct-chart-bar($ct-bar-width: $ct-bar-width) { 94 | fill: none; 95 | stroke-width: $ct-bar-width; 96 | } 97 | 98 | @mixin ct-chart-donut($ct-donut-width: $ct-donut-width) { 99 | fill: none; 100 | stroke-width: $ct-donut-width; 101 | } 102 | 103 | @mixin ct-chart-series-color($color) { 104 | .#{$ct-class-point}, .#{$ct-class-line}, .#{$ct-class-bar}, .#{$ct-class-slice-donut} { 105 | stroke: $color; 106 | } 107 | 108 | .#{$ct-class-slice-pie}, .#{$ct-class-area} { 109 | fill: $color; 110 | } 111 | } 112 | 113 | @mixin ct-chart($ct-container-ratio: $ct-container-ratio, $ct-text-color: $ct-text-color, $ct-text-size: $ct-text-size, $ct-grid-color: $ct-grid-color, $ct-grid-width: $ct-grid-width, $ct-grid-dasharray: $ct-grid-dasharray, $ct-point-size: $ct-point-size, $ct-point-shape: $ct-point-shape, $ct-line-width: $ct-line-width, $ct-bar-width: $ct-bar-width, $ct-donut-width: $ct-donut-width, $ct-series-names: $ct-series-names, $ct-series-colors: $ct-series-colors) { 114 | 115 | .#{$ct-class-label} { 116 | @include ct-chart-label($ct-text-color, $ct-text-size); 117 | } 118 | 119 | .#{$ct-class-chart-line} .#{$ct-class-label}, 120 | .#{$ct-class-chart-bar} .#{$ct-class-label} { 121 | @include ct-flex(); 122 | } 123 | 124 | .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} { 125 | @include ct-align-justify(flex-end, flex-start); 126 | // Fallback for browsers that don't support foreignObjects 127 | text-anchor: start; 128 | } 129 | 130 | .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} { 131 | @include ct-align-justify(flex-start, flex-start); 132 | // Fallback for browsers that don't support foreignObjects 133 | text-anchor: start; 134 | } 135 | 136 | .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} { 137 | @include ct-align-justify(flex-end, flex-end); 138 | // Fallback for browsers that don't support foreignObjects 139 | text-anchor: end; 140 | } 141 | 142 | .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} { 143 | @include ct-align-justify(flex-end, flex-start); 144 | // Fallback for browsers that don't support foreignObjects 145 | text-anchor: start; 146 | } 147 | 148 | .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} { 149 | @include ct-align-justify(flex-end, center); 150 | // Fallback for browsers that don't support foreignObjects 151 | text-anchor: start; 152 | } 153 | 154 | .#{$ct-class-chart-bar} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} { 155 | @include ct-align-justify(flex-start, center); 156 | // Fallback for browsers that don't support foreignObjects 157 | text-anchor: start; 158 | } 159 | 160 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-start} { 161 | @include ct-align-justify(flex-end, flex-start); 162 | // Fallback for browsers that don't support foreignObjects 163 | text-anchor: start; 164 | } 165 | 166 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-horizontal}.#{$ct-class-end} { 167 | @include ct-align-justify(flex-start, flex-start); 168 | // Fallback for browsers that don't support foreignObjects 169 | text-anchor: start; 170 | } 171 | 172 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-start} { 173 | //@include ct-chart-label($ct-text-color, $ct-text-size, center, $ct-vertical-text-justify); 174 | @include ct-align-justify(center, flex-end); 175 | // Fallback for browsers that don't support foreignObjects 176 | text-anchor: end; 177 | } 178 | 179 | .#{$ct-class-chart-bar}.#{$ct-class-horizontal-bars} .#{$ct-class-label}.#{$ct-class-vertical}.#{$ct-class-end} { 180 | @include ct-align-justify(center, flex-start); 181 | // Fallback for browsers that don't support foreignObjects 182 | text-anchor: end; 183 | } 184 | 185 | .#{$ct-class-grid} { 186 | @include ct-chart-grid($ct-grid-color, $ct-grid-width, $ct-grid-dasharray); 187 | } 188 | 189 | .#{$ct-class-point} { 190 | @include ct-chart-point($ct-point-size, $ct-point-shape); 191 | } 192 | 193 | .#{$ct-class-line} { 194 | @include ct-chart-line($ct-line-width); 195 | } 196 | 197 | .#{$ct-class-area} { 198 | @include ct-chart-area(); 199 | } 200 | 201 | .#{$ct-class-bar} { 202 | @include ct-chart-bar($ct-bar-width); 203 | } 204 | 205 | .#{$ct-class-slice-donut} { 206 | @include ct-chart-donut($ct-donut-width); 207 | } 208 | 209 | @if $ct-include-colored-series { 210 | @for $i from 0 to length($ct-series-names) { 211 | .#{$ct-class-series}-#{nth($ct-series-names, $i + 1)} { 212 | $color: nth($ct-series-colors, $i + 1); 213 | 214 | @include ct-chart-series-color($color); 215 | } 216 | } 217 | } 218 | } 219 | 220 | @if $ct-include-classes { 221 | @include ct-chart(); 222 | 223 | @if $ct-include-alternative-responsive-containers { 224 | @for $i from 0 to length($ct-scales-names) { 225 | .#{nth($ct-scales-names, $i + 1)} { 226 | @include ct-responsive-svg-container($ratio: nth($ct-scales, $i + 1)); 227 | } 228 | } 229 | } 230 | } 231 | -------------------------------------------------------------------------------- /assets/sass/paper/_variables.scss: -------------------------------------------------------------------------------- 1 | $font-color: #66615b !default; 2 | $fill-font-color: rgba(255, 255, 255, 0.7); 3 | 4 | $none: 0 !default; 5 | $border-thin: 1px !default; 6 | $border-thick: 2px !default; 7 | 8 | $white-color: #FFFFFF !default; 9 | $white-bg: #FFFFFF !default; 10 | 11 | $smoke-bg: #F5F5F5 !default; 12 | $pale-bg: #FFFCF5 !default; 13 | $medium-pale-bg: #F1EAE0 !default; 14 | 15 | $table-line-color: #CCC5B9 !default; 16 | $muted-color: #a49e93 !default; 17 | 18 | $black-bg: rgba(30, 30, 30, .97) !default; 19 | 20 | $black-color: #333333 !default; 21 | $black-hr: #444444 !default; 22 | 23 | $white-background-color: #FFFFFF !default; 24 | $black-background-color: #212120 !default; 25 | $darkblue-background-color: #35495E !default; // this is the dark blue color from Vue.js branding 26 | 27 | $light-gray: #E3E3E3 !default; 28 | $medium-gray: #DDDDDD !default; 29 | $dark-gray: #9A9A9A !default; 30 | 31 | $gray-input-bg: #fffcf5 !default; 32 | $danger-input-bg: #FFC0A4 !default; 33 | $success-input-bg: #ABF3CB !default; 34 | $other-medium-gray: #A49E93 !default; 35 | $transparent-bg: transparent !default; 36 | 37 | $default-color: #66615B !default; 38 | $default-bg: #66615B !default; 39 | $default-states-color: #403D39 !default; 40 | 41 | $primary-color: #7A9E9F !default; 42 | $primary-bg: #7A9E9F !default; 43 | $primary-states-color: #427C89 !default; 44 | 45 | $success-color: #41B883 !default; // this is the green color from Vue.js branding 46 | $success-bg: #41B883 !default; 47 | $success-states-color: #229863 !default; 48 | 49 | $info-color: #68B3C8 !default; 50 | $info-bg: #68B3C8 !default; 51 | $info-states-color: #3091B2 !default; 52 | 53 | $warning-color: #F3BB45 !default; 54 | $warning-bg: #F3BB45 !default; 55 | $warning-states-color: #BB992F !default; 56 | 57 | $danger-color: #EB5E28 !default; 58 | $danger-bg: #EB5E28 !default; 59 | $danger-states-color: #B33C12 !default; 60 | 61 | $link-disabled-color: #666666 !default; 62 | 63 | /* light colors - used for select dropdown */ 64 | 65 | $light-blue: rgba($primary-color, .2); 66 | $light-azure: rgba($info-color, .2); 67 | $light-green: rgba($success-color, .2); 68 | $light-orange: rgba($warning-color, .2); 69 | $light-red: rgba($danger-color, .2); 70 | 71 | //== Components 72 | // 73 | $padding-base-vertical: 7px !default; 74 | $padding-base-horizontal: 18px !default; 75 | 76 | $padding-round-vertical: 9px !default; 77 | $padding-round-horizontal: 18px !default; 78 | 79 | $padding-simple-vertical: 10px !default; 80 | $padding-simple-horizontal: 18px !default; 81 | 82 | $padding-large-vertical: 11px !default; 83 | $padding-large-horizontal: 30px !default; 84 | 85 | $padding-small-vertical: 4px !default; 86 | $padding-small-horizontal: 10px !default; 87 | 88 | $padding-xs-vertical: 2px !default; 89 | $padding-xs-horizontal: 5px !default; 90 | 91 | $padding-label-vertical: 2px !default; 92 | $padding-label-horizontal: 12px !default; 93 | 94 | // padding for links inside dropdown menu 95 | $padding-dropdown-vertical: 10px !default; 96 | $padding-dropdown-horizontal: 15px !default; 97 | 98 | $margin-large-vertical: 30px !default; 99 | $margin-base-vertical: 15px !default; 100 | 101 | // border radius for buttons 102 | $border-radius-btn-small: 26px !default; 103 | $border-radius-btn-base: 20px !default; 104 | $border-radius-btn-large: 50px !default; 105 | 106 | // Cristina: am schimbat aici si s-au modificat inputurile 107 | $margin-bottom: 0 0 10px 0 !default; 108 | $border-radius-small: 3px !default; 109 | $border-radius-base: 4px !default; 110 | $border-radius-large: 6px !default; 111 | $border-radius-extreme: 6px !default; 112 | 113 | $border-radius-large-top: $border-radius-large $border-radius-large 0 0 !default; 114 | $border-radius-large-bottom: 0 0 $border-radius-large $border-radius-large !default; 115 | 116 | $btn-round-radius: 30px !default; 117 | 118 | $height-base: 40px !default; 119 | 120 | $font-size-base: 14px !default; 121 | $font-size-xs: 12px !default; 122 | $font-size-small: 12px !default; 123 | $font-size-medium: 16px !default; 124 | $font-size-large: 18px !default; 125 | $font-size-large-navbar: 20px !default; 126 | 127 | $font-size-h1: 3.2em !default; 128 | $font-size-h2: 2.6em !default; 129 | $font-size-h3: 1.825em !default; 130 | $font-size-h4: 1.5em !default; 131 | $font-size-h5: 1.25em !default; 132 | $font-size-h6: 0.9em !default; 133 | $font-paragraph: 16px !default; 134 | $font-size-navbar: 16px !default; 135 | $font-size-small: 12px !default; 136 | 137 | $font-weight-light: 300 !default; 138 | $font-weight-normal: 400 !default; 139 | $font-weight-semi: 500 !default; 140 | $font-weight-bold: 600 !default; 141 | 142 | $line-height-small: 20px !default; 143 | $line-height-general: 1.4em !default; 144 | $line-height: 36px !default; 145 | $line-height-lg: 54px !default; 146 | 147 | $border-radius-top: 10px 10px 0 0 !default; 148 | $border-radius-bottom: 0 0 10px 10px !default; 149 | 150 | $dropdown-shadow: 0 2px rgba(17, 16, 15, 0.1), 0 2px 10px rgba(17, 16, 15, 0.1); 151 | 152 | $general-transition-time: 300ms !default; 153 | 154 | $slow-transition-time: 300ms !default; 155 | $dropdown-coordinates: 29px -50px !default; 156 | 157 | $fast-transition-time: 150ms !default; 158 | $select-coordinates: 50% -40px !default; 159 | 160 | $transition-linear: linear !default; 161 | $transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default; 162 | $transition-ease: ease 0s; 163 | 164 | $navbar-padding-a: 10px 15px; 165 | $navbar-margin-a: 15px 0px; 166 | 167 | $padding-social-a: 10px 5px; 168 | 169 | $navbar-margin-a-btn: 15px 3px; 170 | $navbar-margin-a-btn-round: 16px 3px; 171 | 172 | $navbar-padding-brand: 20px 15px; 173 | $navbar-margin-brand: 5px 0px; 174 | 175 | $navbar-margin-brand-icons: 12px auto; 176 | 177 | $navbar-margin-btn: 15px 3px; 178 | 179 | $height-icon: 64px !default; 180 | $width-icon: 64px !default; 181 | $padding-icon: 12px !default; 182 | $border-radius-icon: 15px !default; 183 | 184 | $white-navbar: rgba(#FFFFFF, .96); 185 | $blue-navbar: rgba(#34ACDC, .98); 186 | $azure-navbar: rgba(#5BCAFF, .98); 187 | $green-navbar: rgba(#4CD964, .98); 188 | $orange-navbar: rgba(#FF9500, .98); 189 | $red-navbar: rgba(#FF4C40, .98); 190 | 191 | $bg-nude: #f4f3ef !default; 192 | $bg-primary: #8ECFD5 !default; 193 | $bg-info: #7CE4FE !default; 194 | $bg-success: #8EF3C5 !default; 195 | $bg-warning: #FFE28C !default; 196 | $bg-danger: #FF8F5E !default; 197 | 198 | $topbar-x: topbar-x !default; 199 | $topbar-back: topbar-back !default; 200 | $bottombar-x: bottombar-x !default; 201 | $bottombar-back: bottombar-back !default; 202 | 203 | $transition-linear: linear !default; 204 | $transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default; 205 | $transition-ease: ease 0s; 206 | $transition-ease-in: ease-in !default; 207 | $transition-ease-out: ease-out !default; 208 | 209 | $general-transition-time: 300ms !default; 210 | 211 | $slow-transition-time: 370ms !default; 212 | $dropdown-coordinates: 29px -50px !default; 213 | 214 | $fast-transition-time: 150ms !default; 215 | 216 | $ultra-fast-transition-time: 100ms !default; 217 | 218 | $select-coordinates: 50% -40px !default; 219 | 220 | $padding-zero: 0px !default; 221 | 222 | $sidebar-width: calc(100% - 260px) !default; 223 | $medium-dark-gray: #AAAAAA !default; 224 | 225 | //variables used in cards 226 | $card-black-color: #252422 !default; 227 | $card-muted-color: #ccc5b9 !default; 228 | 229 | //variables used for sidebar 230 | $sidebar-background-dark-blue: #506367; 231 | 232 | $sidebar-background-blue: #b8d8d8 !default; 233 | $sidebar-font-blue: #506568 !default; 234 | $sidebar-subtitle-blue: #7a9e9f !default; 235 | 236 | $sidebar-background-green: #d5e5a3 !default; 237 | $sidebar-font-green: #60773d !default; 238 | $sidebar-subtitle-green: #92ac56 !default; 239 | 240 | $sidebar-background-yellow: #ffe28c !default; 241 | $sidebar-font-yellow: #b25825 !default; 242 | $sidebar-subtitle-yellow: #d88715 !default; 243 | 244 | $sidebar-background-brown: #d6c1ab !default; 245 | $sidebar-font-brown: #75442e !default; 246 | $sidebar-subtitle-brown: #a47e65 !default; 247 | 248 | $sidebar-background-purple: #baa9ba !default; 249 | $sidebar-font-purple: #3a283d !default; 250 | $sidebar-subtitle-purple: #5a283d !default; 251 | 252 | $sidebar-background-orange: #ff8f5e !default; 253 | $sidebar-font-orange: #772510 !default; 254 | $sidebar-subtitle-orange: #e95e37 !default; 255 | -------------------------------------------------------------------------------- /assets/sass/paper/mixins/_vendor-prefixes.scss: -------------------------------------------------------------------------------- 1 | // User select 2 | // For selecting text on the page 3 | 4 | @mixin user-select($select) { 5 | -webkit-user-select: $select; 6 | -moz-user-select: $select; 7 | -ms-user-select: $select; // IE10+ 8 | user-select: $select; 9 | } 10 | 11 | @mixin box-shadow($shadow...) { 12 | -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 13 | box-shadow: $shadow; 14 | } 15 | 16 | // Box sizing 17 | @mixin box-sizing($boxmodel) { 18 | -webkit-box-sizing: $boxmodel; 19 | -moz-box-sizing: $boxmodel; 20 | box-sizing: $boxmodel; 21 | } 22 | 23 | @mixin transition($time, $type) { 24 | -webkit-transition: all $time $type; 25 | -moz-transition: all $time $type; 26 | -o-transition: all $time $type; 27 | -ms-transition: all $time $type; 28 | transition: all $time $type; 29 | } 30 | 31 | @mixin transition-none() { 32 | -webkit-transition: none; 33 | -moz-transition: none; 34 | -o-transition: none; 35 | -ms-transition: none; 36 | transition: none; 37 | } 38 | 39 | @mixin transform-scale($value) { 40 | -webkit-transform: scale($value); 41 | -moz-transform: scale($value); 42 | -o-transform: scale($value); 43 | -ms-transform: scale($value); 44 | transform: scale($value); 45 | } 46 | 47 | @mixin transform-translate-x($value) { 48 | -webkit-transform: translate3d($value, 0, 0); 49 | -moz-transform: translate3d($value, 0, 0); 50 | -o-transform: translate3d($value, 0, 0); 51 | -ms-transform: translate3d($value, 0, 0); 52 | transform: translate3d($value, 0, 0); 53 | } 54 | 55 | @mixin transform-translate-3d($value){ 56 | -webkit-transform: translate3d($value, 0, 0); 57 | -moz-transform: translate3d($value, 0, 0); 58 | -o-transform: translate3d($value, 0, 0); 59 | -ms-transform: translate3d($value, 0, 0); 60 | transform: translate3d($value, 0, 0) !important; 61 | } 62 | 63 | @mixin transform-origin($coordinates) { 64 | -webkit-transform-origin: $coordinates; 65 | -moz-transform-origin: $coordinates; 66 | -o-transform-origin: $coordinates; 67 | -ms-transform-origin: $coordinates; 68 | transform-origin: $coordinates; 69 | } 70 | 71 | @mixin icon-gradient($top-color, $bottom-color) { 72 | background: $top-color; 73 | background: -moz-linear-gradient(top, $top-color 0%, $bottom-color 100%); 74 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $top-color), color-stop(100%, $bottom-color)); 75 | background: -webkit-linear-gradient(top, $top-color 0%, $bottom-color 100%); 76 | background: -o-linear-gradient(top, $top-color 0%, $bottom-color 100%); 77 | background: -ms-linear-gradient(top, $top-color 0%, $bottom-color 100%); 78 | background: linear-gradient(to bottom, $top-color 0%, $bottom-color 100%); 79 | background-size: 150% 150%; 80 | } 81 | 82 | @mixin radial-gradient($extern-color, $center-color) { 83 | background: $extern-color; 84 | background: -moz-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* FF3.6+ */ 85 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, $center-color), color-stop(100%, $extern-color)); /* Chrome,Safari4+ */ 86 | background: -webkit-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* Chrome10+,Safari5.1+ */ 87 | background: -o-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* Opera 12+ */ 88 | background: -ms-radial-gradient(center, ellipse cover, $center-color 0%, $extern-color 100%); /* IE10+ */ 89 | background: radial-gradient(ellipse at center, $center-color 0%, $extern-color 100%); /* W3C */ 90 | background-size: 550% 450%; 91 | } 92 | 93 | @mixin vertical-align { 94 | position: relative; 95 | top: 50%; 96 | -webkit-transform: translateY(-50%); 97 | -ms-transform: translateY(-50%); 98 | transform: translateY(-50%); 99 | } 100 | 101 | @mixin rotate-180() { 102 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); 103 | -webkit-transform: rotate(180deg); 104 | -ms-transform: rotate(180deg); 105 | transform: rotate(180deg); 106 | } 107 | 108 | @mixin bar-animation($type) { 109 | -webkit-animation: $type 500ms linear 0s; 110 | -moz-animation: $type 500ms linear 0s; 111 | animation: $type 500ms 0s; 112 | -webkit-animation-fill-mode: forwards; 113 | -moz-animation-fill-mode: forwards; 114 | animation-fill-mode: forwards; 115 | } 116 | 117 | @mixin topbar-x-rotation() { 118 | @keyframes topbar-x { 119 | 0% { 120 | top: 0px; 121 | transform: rotate(0deg); 122 | } 123 | 45% { 124 | top: 6px; 125 | transform: rotate(145deg); 126 | } 127 | 75% { 128 | transform: rotate(130deg); 129 | } 130 | 100% { 131 | transform: rotate(135deg); 132 | } 133 | } 134 | @-webkit-keyframes topbar-x { 135 | 0% { 136 | top: 0px; 137 | -webkit-transform: rotate(0deg); 138 | } 139 | 45% { 140 | top: 6px; 141 | -webkit-transform: rotate(145deg); 142 | } 143 | 75% { 144 | -webkit-transform: rotate(130deg); 145 | } 146 | 100% { 147 | -webkit-transform: rotate(135deg); 148 | } 149 | } 150 | @-moz-keyframes topbar-x { 151 | 0% { 152 | top: 0px; 153 | -moz-transform: rotate(0deg); 154 | } 155 | 45% { 156 | top: 6px; 157 | -moz-transform: rotate(145deg); 158 | } 159 | 75% { 160 | -moz-transform: rotate(130deg); 161 | } 162 | 100% { 163 | -moz-transform: rotate(135deg); 164 | } 165 | } 166 | } 167 | 168 | @mixin topbar-back-rotation() { 169 | @keyframes topbar-back { 170 | 0% { 171 | top: 6px; 172 | transform: rotate(135deg); 173 | } 174 | 45% { 175 | transform: rotate(-10deg); 176 | } 177 | 75% { 178 | transform: rotate(5deg); 179 | } 180 | 100% { 181 | top: 0px; 182 | transform: rotate(0); 183 | } 184 | } 185 | 186 | @-webkit-keyframes topbar-back { 187 | 0% { 188 | top: 6px; 189 | -webkit-transform: rotate(135deg); 190 | } 191 | 45% { 192 | -webkit-transform: rotate(-10deg); 193 | } 194 | 75% { 195 | -webkit-transform: rotate(5deg); 196 | } 197 | 100% { 198 | top: 0px; 199 | -webkit-transform: rotate(0); 200 | } 201 | } 202 | 203 | @-moz-keyframes topbar-back { 204 | 0% { 205 | top: 6px; 206 | -moz-transform: rotate(135deg); 207 | } 208 | 45% { 209 | -moz-transform: rotate(-10deg); 210 | } 211 | 75% { 212 | -moz-transform: rotate(5deg); 213 | } 214 | 100% { 215 | top: 0px; 216 | -moz-transform: rotate(0); 217 | } 218 | } 219 | } 220 | 221 | @mixin bottombar-x-rotation() { 222 | @keyframes bottombar-x { 223 | 0% { 224 | bottom: 0px; 225 | transform: rotate(0deg); 226 | } 227 | 45% { 228 | bottom: 6px; 229 | transform: rotate(-145deg); 230 | } 231 | 75% { 232 | transform: rotate(-130deg); 233 | } 234 | 100% { 235 | transform: rotate(-135deg); 236 | } 237 | } 238 | @-webkit-keyframes bottombar-x { 239 | 0% { 240 | bottom: 0px; 241 | -webkit-transform: rotate(0deg); 242 | } 243 | 45% { 244 | bottom: 6px; 245 | -webkit-transform: rotate(-145deg); 246 | } 247 | 75% { 248 | -webkit-transform: rotate(-130deg); 249 | } 250 | 100% { 251 | -webkit-transform: rotate(-135deg); 252 | } 253 | } 254 | @-moz-keyframes bottombar-x { 255 | 0% { 256 | bottom: 0px; 257 | -moz-transform: rotate(0deg); 258 | } 259 | 45% { 260 | bottom: 6px; 261 | -moz-transform: rotate(-145deg); 262 | } 263 | 75% { 264 | -moz-transform: rotate(-130deg); 265 | } 266 | 100% { 267 | -moz-transform: rotate(-135deg); 268 | } 269 | } 270 | } 271 | 272 | @mixin bottombar-back-rotation { 273 | @keyframes bottombar-back { 274 | 0% { 275 | bottom: 6px; 276 | transform: rotate(-135deg); 277 | } 278 | 45% { 279 | transform: rotate(10deg); 280 | } 281 | 75% { 282 | transform: rotate(-5deg); 283 | } 284 | 100% { 285 | bottom: 0px; 286 | transform: rotate(0); 287 | } 288 | } 289 | @-webkit-keyframes bottombar-back { 290 | 0% { 291 | bottom: 6px; 292 | -webkit-transform: rotate(-135deg); 293 | } 294 | 45% { 295 | -webkit-transform: rotate(10deg); 296 | } 297 | 75% { 298 | -webkit-transform: rotate(-5deg); 299 | } 300 | 100% { 301 | bottom: 0px; 302 | -webkit-transform: rotate(0); 303 | } 304 | } 305 | @-moz-keyframes bottombar-back { 306 | 0% { 307 | bottom: 6px; 308 | -moz-transform: rotate(-135deg); 309 | } 310 | 45% { 311 | -moz-transform: rotate(10deg); 312 | } 313 | 75% { 314 | -moz-transform: rotate(-5deg); 315 | } 316 | 100% { 317 | bottom: 0px; 318 | -moz-transform: rotate(0); 319 | } 320 | } 321 | 322 | } 323 | 324 | 325 | -------------------------------------------------------------------------------- /assets/sass/paper/_responsive.scss: -------------------------------------------------------------------------------- 1 | @media (min-width: 992px) { 2 | .navbar { 3 | min-height: 75px; 4 | } 5 | .navbar-nav.nav-mobile-menu{ 6 | display: none; 7 | } 8 | .navbar-form { 9 | margin-top: 21px; 10 | margin-bottom: 21px; 11 | padding-left: 5px; 12 | padding-right: 5px; 13 | } 14 | .navbar-search-form { 15 | display: none; 16 | } 17 | .navbar-nav > li > .dropdown-menu, 18 | .dropdown .dropdown-menu { 19 | transform: translate3d(0px, -40px, 0px); 20 | transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s; 21 | } 22 | .navbar-nav > li.show > .dropdown-menu, .dropdown.show .dropdown-menu { 23 | transform: translate3d(0px, 0px, 0px); 24 | } 25 | 26 | .navbar-nav > li > .dropdown-menu:before { 27 | border-bottom: 11px solid $medium-pale-bg; 28 | border-left: 11px solid rgba(0, 0, 0, 0); 29 | border-right: 11px solid rgba(0, 0, 0, 0); 30 | content: ""; 31 | display: inline-block; 32 | position: absolute; 33 | right: 12px; 34 | top: -11px; 35 | } 36 | .navbar-nav > li > .dropdown-menu:after { 37 | border-bottom: 11px solid $pale-bg; 38 | border-left: 11px solid rgba(0, 0, 0, 0); 39 | border-right: 11px solid rgba(0, 0, 0, 0); 40 | content: ""; 41 | display: inline-block; 42 | position: absolute; 43 | right: 12px; 44 | top: -10px; 45 | } 46 | 47 | .navbar-nav.navbar-left > li > .dropdown-menu:before { 48 | right: auto; 49 | left: 12px; 50 | } 51 | 52 | .navbar-nav.navbar-left > li > .dropdown-menu:after { 53 | right: auto; 54 | left: 12px; 55 | } 56 | 57 | .navbar { 58 | .navbar-header { 59 | margin-left: 10px; 60 | } 61 | } 62 | 63 | .footer:not(.footer-big) { 64 | nav > ul { 65 | li:first-child { 66 | margin-left: 0; 67 | } 68 | } 69 | } 70 | .card { 71 | form { 72 | [class*="col-"] { 73 | padding: 6px; 74 | } 75 | [class*="col-"]:first-child { 76 | padding-left: 15px; 77 | } 78 | [class*="col-"]:last-child { 79 | padding-right: 15px; 80 | } 81 | } 82 | } 83 | } 84 | 85 | /* Changes for small display */ 86 | 87 | @media (max-width: 991px) { 88 | .nav-open { 89 | .main-panel { 90 | position: absolute; 91 | left: 0; 92 | @include transform-translate-3d(-220px); 93 | @include transition (0.5s, cubic-bezier(0.685, 0.0473, 0.346, 1)); 94 | } 95 | 96 | .wrapper .sidebar { 97 | @include transform-translate-3d(10px); 98 | @include transition (0.5s, cubic-bezier(0.685, 0.0473, 0.346, 1)); 99 | } 100 | } 101 | 102 | .main-panel { 103 | width: 100%; 104 | max-height: 100vh; 105 | overflow: scroll; 106 | @include transform-translate-3d(0px); 107 | @include transition (0.5s, cubic-bezier(0.685, 0.0473, 0.346, 1)); 108 | } 109 | 110 | .navbar-transparent { 111 | padding-top: 15px; 112 | background-color: rgba(0, 0, 0, 0.45); 113 | } 114 | body { 115 | position: relative; 116 | } 117 | h6 { 118 | font-size: 1em; 119 | } 120 | .wrapper { 121 | @include transform-translate-x(0px); 122 | @include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1)); 123 | left: 0; 124 | background-color: white; 125 | } 126 | .navbar .container { 127 | left: 0; 128 | width: 100%; 129 | @include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1)); 130 | position: relative; 131 | } 132 | .navbar .navbar-collapse.collapse, 133 | .navbar .navbar-collapse.collapse.in, 134 | .navbar .navbar-collapse.collapsing { 135 | display: none !important; 136 | } 137 | 138 | .navbar-nav > li { 139 | float: none; 140 | position: relative; 141 | display: block; 142 | } 143 | 144 | .wrapper .sidebar { 145 | position: fixed; 146 | display: block; 147 | top: 0; 148 | height: 100%; 149 | width: 230px; 150 | right: 0; 151 | z-index: 1032; 152 | visibility: visible; 153 | background-color: #999; 154 | overflow-y: visible; 155 | border-top: none; 156 | text-align: left; 157 | padding-right: 0px; 158 | padding-left: 0; 159 | left: auto; 160 | @include transform-translate-3d(230px); 161 | @include transition (0.5s, cubic-bezier(0.685, 0.0473, 0.346, 1)); 162 | 163 | .sidebar-wrapper { 164 | position: relative; 165 | z-index: 3; 166 | overflow-y: scroll; 167 | height: 100%; 168 | box-shadow: inset 1px 0px 0px 0px $medium-gray; 169 | } 170 | 171 | .nav { 172 | margin-top: 0; 173 | padding: 10px $margin-base-vertical 0; 174 | 175 | > .nav-item { 176 | 177 | > .nav-link { 178 | margin: 0px 0px; 179 | color: $default-color; 180 | text-transform: uppercase; 181 | font-weight: 600; 182 | font-size: $font-size-small; 183 | line-height: $line-height-general; 184 | padding: 10px 0; 185 | 186 | &:hover, 187 | &.active { 188 | color: $default-states-color; 189 | } 190 | 191 | p, 192 | .notification, 193 | .caret { 194 | display: inline-block; 195 | } 196 | 197 | .caret { 198 | float: right; 199 | position: relative; 200 | top: 12px; 201 | } 202 | 203 | i { 204 | font-size: 18px; 205 | margin-right: 10px; 206 | line-height: 26px; 207 | } 208 | } 209 | 210 | &.active > .nav-link { 211 | 212 | &:before { 213 | border-right: none; 214 | border-left: 12px solid $medium-gray; 215 | border-top: 12px solid transparent; 216 | border-bottom: 12px solid transparent; 217 | right: auto; 218 | margin-left: -$margin-base-vertical; 219 | left: 0px; 220 | top: 10px; 221 | } 222 | 223 | &:after { 224 | border-right: none; 225 | border-left: 12px solid $bg-nude; 226 | border-top: 12px solid transparent; 227 | border-bottom: 12px solid transparent; 228 | right: auto; 229 | margin-left: -$margin-base-vertical; 230 | left: -1px; 231 | top: 10px; 232 | } 233 | } 234 | 235 | } 236 | 237 | } 238 | 239 | &::after { 240 | top: 0; 241 | left: 0; 242 | height: 100%; 243 | width: 100%; 244 | position: absolute; 245 | background-color: $bg-nude; 246 | background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(112, 112, 112, 0) 60%, rgba(186, 186, 186, 0.15) 100%); 247 | display: block; 248 | content: ""; 249 | z-index: 1; 250 | } 251 | &.has-image::after { 252 | @include black-filter(.8); 253 | } 254 | 255 | .logo { 256 | position: relative; 257 | z-index: 4; 258 | padding-top: 11px; 259 | padding-bottom: 11px; 260 | } 261 | 262 | .divider { 263 | height: 1px; 264 | margin: 10px 0; 265 | } 266 | } 267 | .nav-open .navbar-collapse { 268 | @include transform-translate-x(0px); 269 | } 270 | .nav-open .sidebar { 271 | transition: all .5s cubic-bezier(.685, .0473, .346, 1); 272 | // left: -230px; 273 | } 274 | .nav-open .main-panel { 275 | left: 0; 276 | @include transform-translate-x(-230px); 277 | } 278 | .navbar-toggle .icon-bar { 279 | display: block; 280 | position: relative; 281 | background: #fff; 282 | width: 24px; 283 | height: 2px; 284 | border-radius: 1px; 285 | margin: 0 auto; 286 | } 287 | 288 | .navbar-header .navbar-toggle { 289 | margin: 10px 15px 10px 0; 290 | width: 40px; 291 | height: 40px; 292 | } 293 | .bar1, 294 | .bar2, 295 | .bar3 { 296 | outline: 1px solid transparent; 297 | } 298 | .bar1 { 299 | top: 0px; 300 | @include bar-animation($topbar-back); 301 | } 302 | .bar2 { 303 | opacity: 1; 304 | } 305 | .bar3 { 306 | bottom: 0px; 307 | @include bar-animation($bottombar-back); 308 | } 309 | .toggled .bar1 { 310 | top: 6px; 311 | @include bar-animation($topbar-x); 312 | } 313 | .toggled .bar2 { 314 | opacity: 0; 315 | } 316 | .toggled .bar3 { 317 | bottom: 6px; 318 | @include bar-animation($bottombar-x); 319 | } 320 | 321 | @include topbar-x-rotation(); 322 | @include topbar-back-rotation(); 323 | @include bottombar-x-rotation(); 324 | @include bottombar-back-rotation(); 325 | 326 | @-webkit-keyframes fadeIn { 327 | 0% { 328 | opacity: 0; 329 | } 330 | 100% { 331 | opacity: 1; 332 | } 333 | } 334 | @-moz-keyframes fadeIn { 335 | 0% { 336 | opacity: 0; 337 | } 338 | 100% { 339 | opacity: 1; 340 | } 341 | } 342 | @keyframes fadeIn { 343 | 0% { 344 | opacity: 0; 345 | } 346 | 100% { 347 | opacity: 1; 348 | } 349 | } 350 | 351 | .dropdown-menu .divider { 352 | background-color: rgba(229, 229, 229, 0.15); 353 | } 354 | 355 | .navbar-nav { 356 | margin: 1px 0; 357 | } 358 | 359 | .dropdown-menu { 360 | display: none; 361 | 362 | & > li > a { 363 | &:hover, 364 | &:focus { 365 | background-color: transparent; 366 | } 367 | } 368 | } 369 | 370 | .navbar-fixed-top { 371 | -webkit-backface-visibility: hidden; 372 | } 373 | #bodyClick { 374 | height: 100%; 375 | width: 100%; 376 | position: fixed; 377 | opacity: 0; 378 | top: 0; 379 | left: auto; 380 | right: 230px; 381 | content: ""; 382 | z-index: 9999; 383 | overflow-x: hidden; 384 | } 385 | .form-control + .form-control-feedback { 386 | margin-top: -8px; 387 | } 388 | .navbar-toggle:hover, .navbar-toggle:focus { 389 | background-color: transparent !important; 390 | } 391 | .btn.dropdown-toggle { 392 | margin-bottom: 0; 393 | } 394 | .media-post .author { 395 | width: 20%; 396 | float: none !important; 397 | display: block; 398 | margin: 0 auto 10px; 399 | } 400 | .media-post .media-body { 401 | width: 100%; 402 | } 403 | 404 | .navbar-collapse.collapse { 405 | height: 100% !important; 406 | } 407 | .navbar-collapse.collapse.in { 408 | display: block; 409 | } 410 | .navbar-header .collapse, .navbar-toggle { 411 | display: block !important; 412 | } 413 | .navbar-header { 414 | float: none; 415 | } 416 | .navbar-nav.nav-mobile-menu .dropdown, 417 | .navbar-nav.nav-mobile-menu .dropdown-menu { 418 | transition: none; 419 | &.show { 420 | transition: none; 421 | } 422 | } 423 | .navbar-nav.nav-mobile-menu .show .dropdown-menu { 424 | position: static; 425 | float: none; 426 | width: auto; 427 | margin-top: 0; 428 | background-color: transparent; 429 | border: 0; 430 | -webkit-box-shadow: none; 431 | box-shadow: none; 432 | .dropdown-item { 433 | margin-left: 20px; 434 | color: $white-color !important; 435 | opacity: 0.7; 436 | } 437 | } 438 | 439 | .main-panel > .content { 440 | padding-left: 0; 441 | padding-right: 0; 442 | } 443 | .nav .show > a { 444 | &, 445 | &:focus, 446 | &:hover { 447 | background-color: transparent; 448 | } 449 | 450 | } 451 | 452 | .footer .copyright { 453 | padding: 0px 15px; 454 | width: 100%; 455 | } 456 | } 457 | 458 | //overwrite table responsive for 768px screens 459 | 460 | @media (min-width: 992px) { 461 | .table-full-width { 462 | margin-left: -15px; 463 | margin-right: -15px; 464 | } 465 | .table-responsive { 466 | overflow: visible; 467 | } 468 | 469 | } 470 | 471 | @media (max-width: 991px) { 472 | .table-responsive { 473 | width: 100%; 474 | margin-bottom: 15px; 475 | border: 1px solid #dddddd; 476 | overflow-x: scroll; 477 | overflow-y: hidden; 478 | -ms-overflow-style: -ms-autohiding-scrollbar; 479 | -webkit-overflow-scrolling: touch; 480 | } 481 | 482 | } 483 | -------------------------------------------------------------------------------- /assets/sass/paper/_dropdown.scss: -------------------------------------------------------------------------------- 1 | .dropdown{ 2 | .dropdown-menu{ 3 | background-color: $pale-bg; 4 | border: 0 none; 5 | border-radius: $border-radius-extreme; 6 | display: block; 7 | margin-top: 10px; 8 | padding: 0px; 9 | position: absolute; 10 | visibility: hidden; 11 | z-index: 1000; 12 | 13 | @include opacity(0); 14 | @include box-shadow($dropdown-shadow); 15 | 16 | .divider{ 17 | background-color: $medium-pale-bg; 18 | margin: 0px; 19 | } 20 | 21 | .dropdown-header{ 22 | color: $dark-gray; 23 | font-size: $font-size-small; 24 | padding: $padding-dropdown-vertical $padding-dropdown-horizontal; 25 | } 26 | 27 | .no-notification{ 28 | color: #9A9A9A; 29 | font-size: 1.2em; 30 | padding: 30px 30px; 31 | text-align: center; 32 | } 33 | 34 | .dropdown-item{ 35 | color: $font-color !important; 36 | font-size: $font-size-base; 37 | padding: 10px 45px 10px 15px; 38 | clear: both; 39 | white-space: nowrap; 40 | width: 100%; 41 | display: block; 42 | &:hover{ 43 | color: $white-color !important; 44 | } 45 | 46 | img{ 47 | margin-top: -3px; 48 | } 49 | 50 | } 51 | .dropdown-item a:focus{ 52 | outline: 0 !important; 53 | } 54 | 55 | .btn-group.select &{ 56 | min-width: 100%; 57 | } 58 | 59 | .dropdown-item:first-child a, 60 | .dropdown-item:first-child{ 61 | border-top-left-radius: $border-radius-extreme; 62 | border-top-right-radius: $border-radius-extreme; 63 | } 64 | 65 | .dropdown-item:last-child a, 66 | .dropdown-item:last-child{ 67 | border-bottom-left-radius: $border-radius-extreme; 68 | border-bottom-right-radius: $border-radius-extreme; 69 | } 70 | 71 | .select & .dropdown-item:first-child{ 72 | border-radius: 0; 73 | border-bottom: 0 none; 74 | } 75 | 76 | .dropdown-item a:hover, 77 | .dropdown-item a:focus{ 78 | color: $white-color; 79 | opacity: 1; 80 | text-decoration: none; 81 | 82 | } 83 | .dropdown-item:hover, 84 | .dropdown-item:focus{ 85 | background-color: $default-color; 86 | } 87 | 88 | &.dropdown-primary .dropdown-item:hover, 89 | &.dropdown-primary .dropdown-item:focus{ 90 | background-color: $bg-primary; 91 | } 92 | &.dropdown-info .dropdown-item:hover, 93 | &.dropdown-info .dropdown-item:focus{ 94 | background-color: $bg-info; 95 | } 96 | &.dropdown-success .dropdown-item:hover, 97 | &.dropdown-success .dropdown-item:focus{ 98 | background-color: $bg-success; 99 | } 100 | &.dropdown-warning .dropdown-item:hover, 101 | &.dropdown-warning .dropdown-item:focus{ 102 | background-color: $bg-warning; 103 | } 104 | &.dropdown-danger .dropdown-item:hover, 105 | &.dropdown-danger .dropdown-item:focus{ 106 | background-color: $bg-danger; 107 | } 108 | 109 | } 110 | .dropdown-divider{ 111 | margin: 0 !important; 112 | } 113 | &:hover{ 114 | cursor: pointer; 115 | } 116 | &.show .dropdown-menu{ 117 | @include opacity(1); 118 | visibility: visible; 119 | } 120 | } 121 | 122 | //fix bug for the select items in btn-group 123 | .btn-group.select{ 124 | // overflow: hidden; 125 | } 126 | .btn-group.select.open{ 127 | overflow: visible; 128 | } 129 | .dropdown-menu-right{ 130 | right: -2px; 131 | left: auto; 132 | } 133 | 134 | // the style for opening dropdowns on mobile devices; for the desktop version check the _responsive.scss file 135 | // code from _responsive.scss 136 | 137 | @media (min-width: 768px){ 138 | .navbar-form { 139 | margin-top: 21px; 140 | margin-bottom: 21px; 141 | padding-left: 5px; 142 | padding-right: 5px; 143 | } 144 | .navbar-search-form{ 145 | display: none; 146 | } 147 | .navbar-nav .dropdown-item .dropdown-menu, 148 | .dropdown .dropdown-menu, 149 | .dropdown-btn .dropdown-menu{ 150 | transform: translate3d(0px, -40px, 0px); 151 | transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s; 152 | } 153 | .navbar-nav .dropdown-item.show .dropdown-menu, 154 | .dropdown.show .dropdown-menu, 155 | .dropdown-btn.show .dropdown-menu{ 156 | transform: translate3d(0px, 0px, 0px); 157 | visibility: visible !important; 158 | } 159 | .bootstrap-select .dropdown-menu{ 160 | -webkit-box-shadow: none; 161 | box-shadow: none; 162 | -webkit-transition: all 150ms linear; 163 | -moz-transition: all 150ms linear; 164 | -o-transition: all 150ms linear; 165 | -ms-transition: all 150ms linear; 166 | transition: all 150ms linear; 167 | } 168 | .bootstrap-datetimepicker-widget{ 169 | visibility: visible !important; 170 | @include opacity(1); 171 | } 172 | 173 | .dropup.show .dropdown-menu{ 174 | -webkit-transform: translate3d(0, -10px, 0); 175 | -moz-transform: translate3d(0, -10px, 0); 176 | -o-transform: translate3d(0, -10px, 0); 177 | -ms-transform: translate3d(0, -10px, 0); 178 | transform: translate3d(0, -10px, 0); 179 | opacity: 1; 180 | visibility: visible; 181 | } 182 | .dropup .dropdown-menu{ 183 | transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s; 184 | -webkit-transform: translate3d(0, 30px, 0); 185 | -moz-transform: translate3d(0, 30px, 0); 186 | -o-transform: translate3d(0, 30px, 0); 187 | -ms-transform: translate3d(0, 30px, 0); 188 | transform: translate3d(0, 30px, 0); 189 | opacity: 0; 190 | visibility: hidden; 191 | display: block; 192 | } 193 | 194 | .bootstrap-select .show .dropdown-menu{ 195 | transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s; 196 | transform: translate3d(0px, 0px, 0px); 197 | } 198 | 199 | .navbar-nav .dropdown-menu:before, 200 | #dropdown-row .dropdown .dropdown-menu:before, 201 | .card.card-just-text .dropdown .dropdown-menu:before, 202 | .card-just-text .dropdown .dropdown-menu:before, 203 | .dropdown-btn .dropdown-menu:before{ 204 | border-bottom: 11px solid $medium-pale-bg; 205 | border-left: 11px solid rgba(0, 0, 0, 0); 206 | border-right: 11px solid rgba(0, 0, 0, 0); 207 | content: ""; 208 | display: inline-block; 209 | position: absolute; 210 | right: 12px; 211 | top: -11px; 212 | } 213 | 214 | #dropdown-row .dropdown .dropdown-menu:before{ 215 | left: 12px !important; 216 | right: auto; 217 | } 218 | .navbar-nav .dropdown-menu:after, 219 | #dropdown-row .dropdown .dropdown-menu:after, 220 | .card.card-just-text .dropdown .dropdown-menu:after, 221 | .card-just-text .dropdown .dropdown-menu:after, 222 | .dropdown-btn .dropdown-menu:after{ 223 | border-bottom: 11px solid $white-color; 224 | border-left: 11px solid rgba(0, 0, 0, 0); 225 | border-right: 11px solid rgba(0, 0, 0, 0); 226 | content: ""; 227 | display: inline-block; 228 | position: absolute; 229 | right: 12px; 230 | top: -10px; 231 | } 232 | #dropdown-row .dropdown .dropdown-menu:after{ 233 | left: 12px !important; 234 | right: auto; 235 | } 236 | #dropdown-row .dropdown .dropdown-menu{ 237 | left: 15px; 238 | } 239 | .navbar-nav.navbar-right li .dropdown-menu:before, 240 | .navbar-nav.navbar-right li .dropdown-menu:after{ 241 | left: auto; 242 | right: 12px; 243 | } 244 | 245 | 246 | .footer:not(.footer-big){ 247 | nav ul{ 248 | li:first-child{ 249 | margin-left: 0; 250 | } 251 | } 252 | } 253 | 254 | // no dragging the others navs in page 255 | body > .navbar-collapse.collapse{ 256 | display: none !important; 257 | } 258 | } 259 | 260 | #navbar { 261 | .dropdown-menu { 262 | .dropdown-item{ 263 | padding: 3px 1.5rem !important; 264 | } 265 | } 266 | } 267 | .dropdown-sharing{ 268 | 269 | li{ 270 | color: $font-color; 271 | font-size: $font-size-base; 272 | 273 | .social-line{ 274 | line-height: 28px; 275 | padding: 10px 20px 5px 20px; 276 | 277 | [class*="icon-"]{ 278 | font-size: 20px; 279 | } 280 | } 281 | } 282 | 283 | li:hover, 284 | li:focus{ 285 | .social-line, 286 | a, 287 | .action-line{ 288 | background-color: $white-color; 289 | color: $font-color; 290 | opacity: 1; 291 | text-decoration: none; 292 | } 293 | } 294 | } 295 | .show .dropdown-sharing{ 296 | margin-bottom: 1px; 297 | li:last-child{ 298 | padding: 10px 15px; 299 | } 300 | } 301 | .show .dropdown-actions{ 302 | margin-bottom: 1px; 303 | } 304 | 305 | .dropdown-actions{ 306 | li{ 307 | margin: -15px 35px; 308 | .action-line{ 309 | padding: 5px 10px; 310 | line-height: 24px; 311 | font-weight: bold; 312 | [class*="icon-"]{ 313 | font-size: 24px; 314 | } 315 | .col-sm-9{ 316 | line-height: 34px; 317 | } 318 | } 319 | .link-danger{ 320 | color: $danger-color; 321 | &:hover, &:active, &:focus{ 322 | color: $danger-color; 323 | } 324 | } 325 | } 326 | li:hover, 327 | li:focus{ 328 | a{ 329 | color: $font-color; 330 | opacity: 1; 331 | text-decoration: none; 332 | } 333 | } 334 | .action-line{ 335 | .icon-simple{ 336 | margin-left: -15px; 337 | } 338 | } 339 | } 340 | .dropup .dropdown-menu:before{ 341 | border-top: 11px solid #DCD9D1; 342 | border-left: 11px solid transparent; 343 | border-right: 11px solid transparent; 344 | content: ""; 345 | display: inline-block; 346 | position: absolute; 347 | right: 12px; 348 | bottom: -12px; 349 | } 350 | .dropup .dropdown-menu:after{ 351 | border-top: 11px solid #FFF; 352 | border-left: 11px solid transparent; 353 | border-right: 11px solid transparent; 354 | content: ""; 355 | display: inline-block; 356 | position: absolute; 357 | right: 12px; 358 | bottom: -11px; 359 | } 360 | 361 | .dropup, 362 | .dropdown{ 363 | .dropdown-toggle:after{ 364 | margin-left: 5px; 365 | } 366 | } 367 | 368 | .dropdown-notification{ 369 | .dropdown-notification-list{ 370 | & li{ 371 | border-bottom: 1px solid #F1EAE0; 372 | color: #66615b; 373 | font-size: 16px; 374 | padding: 10px 5px; 375 | width: 330px; 376 | 377 | & a{ 378 | color: #66615b; 379 | white-space: normal; 380 | 381 | & .notification-text{ 382 | padding-left: 40px; 383 | position: relative; 384 | 385 | & .label{ 386 | display: block; 387 | position: absolute; 388 | top: 50%; 389 | margin-top: -12px; 390 | left: 7px; 391 | } 392 | & .message{ 393 | font-size: 0.9em; 394 | line-height: 0.7; 395 | margin-left: 10px; 396 | } 397 | & .time{ 398 | color: #9A9A9A; 399 | font-size: 0.7em; 400 | margin-left: 10px; 401 | } 402 | } 403 | & .read-notification{ 404 | font-size: 12px; 405 | opacity: 0; 406 | position: absolute; 407 | right: 5px; 408 | top: 50%; 409 | margin-top: -12px; 410 | } 411 | } 412 | &:hover{ 413 | background-color: #F0EFEB; 414 | color: #66615b; 415 | opacity: 1; 416 | text-decoration: none; 417 | 418 | & .read-notification{ 419 | opacity: 1 !important; 420 | } 421 | } 422 | } 423 | } 424 | .dropdown-footer{ 425 | background-color: #E8E7E3; 426 | border-radius: 0 0 8px 8px; 427 | 428 | .dropdown-footer-menu{ 429 | list-style: outside none none; 430 | padding: 0px 5px; 431 | li{ 432 | display: inline-block; 433 | text-align: left; 434 | padding: 0 10px; 435 | 436 | a{ 437 | color: #9C9B99; 438 | font-size: 0.9em; 439 | line-height: 35px; 440 | } 441 | } 442 | } 443 | } 444 | } 445 | .navbar-nav.mr-auto .dropdown-menu:before, 446 | .navbar-nav.mr-auto .dropdown-menu:after{ 447 | left: 12px !important; 448 | right: auto; 449 | } 450 | -------------------------------------------------------------------------------- /assets/sass/paper/_navbars.scss: -------------------------------------------------------------------------------- 1 | .nav { 2 | .nav-item{ 3 | .nav-link:hover, 4 | .nav-link:focus{ 5 | background-color: transparent; 6 | } 7 | } 8 | } 9 | .navbar{ 10 | border: $none; 11 | font-size: $font-size-base; 12 | transition: all 0.4s; 13 | -webkit-transition: all 0.4s; 14 | padding: 0; 15 | background: $white-color; 16 | box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.15); 17 | 18 | &.navbar-light { 19 | background-color: $bg-nude; 20 | box-shadow: none; 21 | border-bottom: 1px solid $medium-gray; 22 | } 23 | .navbar-toggler-right{ 24 | float: right; 25 | } 26 | 27 | .navbar-brand{ 28 | font-weight: $font-weight-bold; 29 | margin: $navbar-margin-brand; 30 | padding: $navbar-padding-brand; 31 | font-size: $font-size-base; 32 | color: $default-color; 33 | text-transform: uppercase; 34 | } 35 | .nav-link{ 36 | i{ 37 | font-size: 16px; 38 | position: relative; 39 | top: 4px; 40 | right: 3px; 41 | } 42 | [class^="fa"]{ 43 | top: 2px; 44 | } 45 | p{ 46 | margin: 0px 0px; 47 | color: #9A9A9A !important; 48 | text-transform: uppercase; 49 | font-weight: 600; 50 | font-size: 12px; 51 | line-height: 1.5em; 52 | padding: 15px 0; 53 | } 54 | p:hover{ 55 | color: #403D39 !important; 56 | } 57 | } 58 | .navbar-nav{ 59 | .nav-item .nav-link { 60 | line-height: 1.6; 61 | margin: $navbar-margin-a; 62 | padding: $navbar-padding-a; 63 | opacity: .8; 64 | font-size: $font-size-small; 65 | text-transform: uppercase; 66 | font-weight: 600; 67 | color: $default-color; 68 | 69 | &:hover{ 70 | color: $font-color; 71 | } 72 | } 73 | .nav-item .nav-link.btn{ 74 | margin: $navbar-margin-a-btn; 75 | padding: 9px; 76 | 77 | } 78 | 79 | .dropdown-menu{ 80 | border-radius: $border-radius-extreme; 81 | margin-top: 1px; 82 | } 83 | } 84 | .navbar-collapse{ 85 | & .nav-item{ 86 | & .nav-link{ 87 | p{ 88 | display: inline; 89 | } 90 | } 91 | & .dropdown-item{ 92 | i{ 93 | margin: 0 10px; 94 | margin: 0 10px 0px 5px; 95 | font-size: 18px; 96 | position: relative; 97 | top: 3px; 98 | } 99 | } 100 | } 101 | &.show{ 102 | & .navbar-nav{ 103 | & .nav-item{ 104 | padding-right: 10px; 105 | } 106 | } 107 | } 108 | } 109 | 110 | .notification-bubble{ 111 | right: 72px; 112 | padding: 0.2em 0.6em; 113 | position: absolute; 114 | top: 15px; 115 | } 116 | .btn{ 117 | margin: $navbar-margin-btn; 118 | font-size: $font-size-small; 119 | i{ 120 | // margin-right: 5px !important; 121 | font-size: 14px; 122 | line-height: 13px; 123 | } 124 | } 125 | .btn-simple{ 126 | font-size: $font-size-medium; 127 | } 128 | .caret{ 129 | @include center-item(); 130 | } 131 | &.navbar-transparent{ 132 | padding-top: 25px; 133 | } 134 | .logo-container{ 135 | margin-top: 5px; 136 | .logo{ 137 | overflow: hidden; 138 | border-radius: 50%; 139 | border: 1px solid #333333; 140 | width: 50px; 141 | float: left; 142 | 143 | img{ 144 | width: 100%; 145 | } 146 | } 147 | .brand{ 148 | font-size: 18px; 149 | color: #FFFFFF; 150 | line-height: 20px; 151 | float: left; 152 | margin-left: 10px; 153 | margin-top: 5px; 154 | width: 75px; 155 | height: 50px; 156 | } 157 | } 158 | } 159 | .navbar.fixed-top{ 160 | .nav-link{ 161 | i{ 162 | top: 4px; 163 | } 164 | } 165 | } 166 | .navbar-absolute{ 167 | position: absolute; 168 | width: 100%; 169 | padding-top: 10px; 170 | z-index: 1029; 171 | } 172 | .navbar-transparent, [class*="bg"]{ 173 | .navbar-brand{ 174 | color: $white-color; 175 | @include opacity(.9); 176 | 177 | &:focus, 178 | &:hover{ 179 | background-color: transparent; 180 | @include opacity(1); 181 | color: $white-color; 182 | } 183 | } 184 | 185 | .navbar-nav{ 186 | .nav-item .nav-link:not(.btn){ 187 | color: $white-color; 188 | border-color: $white-color; 189 | } 190 | .active .nav-link 191 | .active .nav-link:hover, 192 | .active .nav-link:focus, 193 | .nav-item .nav-link:hover, 194 | .nav-item .nav-link:focus{ 195 | background-color: transparent; 196 | color: $white-color; 197 | @include opacity(1); 198 | } 199 | .nav .nav-item a.btn:hover{ 200 | background-color: transparent; 201 | } 202 | 203 | .dropdown .nav-link .caret, 204 | .dropdown .nav-link:hover .caret, 205 | .dropdown .nav-link:focus .caret{ 206 | border-bottom-color: $white-color; 207 | border-top-color: $white-color; 208 | } 209 | 210 | .open .nav-link, 211 | .open .nav-link:hover, 212 | .open .nav-link:focus { 213 | background-color: transparent; 214 | color: $default-color; 215 | @include opacity(1); 216 | } 217 | } 218 | 219 | .btn-default.btn-fill{ 220 | color: $dark-gray; 221 | background-color: $white-color; 222 | @include opacity(.9); 223 | } 224 | .btn-default.btn-fill:hover, 225 | .btn-default.btn-fill:focus, 226 | .btn-default.btn-fill:active, 227 | .btn-default.btn-fill.active, 228 | .open .dropdown-toggle.btn-fill.btn-default{ 229 | border-color: $white-color; 230 | @include opacity(1); 231 | } 232 | 233 | } 234 | 235 | .nav-open .nav .caret{ 236 | border-bottom-color: $white-color; 237 | border-top-color: $white-color; 238 | } 239 | 240 | .navbar-default { 241 | .brand{ 242 | color: $font-color !important; 243 | } 244 | .navbar-nav{ 245 | .nav-item .nav-link:not(.btn){ 246 | color: $dark-gray; 247 | } 248 | 249 | .active .nav-link, 250 | .active .nav-link:not(.btn):hover, 251 | .active .nav-link:not(.btn):focus, 252 | .nav-item .nav-link:not(.btn):hover, 253 | .nav-item .nav-link:not(.btn):focus { 254 | background-color: transparent; 255 | border-radius: 3px; 256 | color: $info-color; 257 | @include opacity(1); 258 | } 259 | 260 | .dropdown .nav-link:hover .caret, 261 | .dropdown .nav-link:focus .caret { 262 | border-bottom-color: $info-color; 263 | border-top-color: $info-color; 264 | 265 | } 266 | 267 | .open .nav-link, 268 | .open .nav-link:hover, 269 | .open .nav-link:focus{ 270 | background-color: transparent; 271 | color: $info-color; 272 | } 273 | 274 | .navbar-toggler:hover,.navbar-toggler:focus { 275 | background-color: transparent; 276 | } 277 | 278 | } 279 | 280 | &:not(.navbar-transparent) .btn-default:hover{ 281 | color: $info-color; 282 | border-color: $info-color; 283 | } 284 | &:not(.navbar-transparent) .btn-neutral, 285 | &:not(.navbar-transparent) .btn-neutral:hover, 286 | &:not(.navbar-transparent) .btn-neutral:active{ 287 | color: $dark-gray; 288 | } 289 | } 290 | 291 | /* Navbar with icons */ 292 | 293 | .navbar-icons{ 294 | &.navbar .navbar-brand{ 295 | margin-top: 12px; 296 | margin-bottom: 12px; 297 | } 298 | .navbar-nav{ 299 | .nav-item .nav-link{ 300 | text-align: center; 301 | padding: 10px; 302 | margin: 10px; 303 | } 304 | 305 | [class^="pe"] { 306 | font-size: 30px; 307 | position: relative; 308 | } 309 | p { 310 | margin: 3px 0 0; 311 | } 312 | } 313 | } 314 | 315 | .navbar-form{ 316 | @include box-shadow(none); 317 | .form-control{ 318 | @include light-form(); 319 | height: 22px; 320 | font-size: $font-size-navbar; 321 | line-height: $line-height-general; 322 | color: $light-gray; 323 | } 324 | .navbar-transparent & .form-control, 325 | [class*="bg"] & .form-control{ 326 | color: $white-color; 327 | border: $none; 328 | border-bottom: 1px solid rgba($white-color,.6); 329 | } 330 | 331 | } 332 | 333 | .navbar-toggler{ 334 | margin-top: 19px; 335 | margin-bottom: 19px; 336 | border: $none; 337 | 338 | .icon-bar { 339 | background-color: $white-color; 340 | } 341 | .navbar-collapse, 342 | .navbar-form { 343 | border-color: transparent; 344 | } 345 | 346 | &.navbar-default .navbar-toggler:hover, 347 | &.navbar-default .navbar-toggler:focus { 348 | background-color: transparent; 349 | } 350 | } 351 | 352 | // stefan making edits 353 | 354 | .navbar-light .navbar-nav .nav-link:hover{ 355 | color: $light-gray; 356 | } 357 | 358 | .red{ 359 | color: #ff0000; 360 | } 361 | .collapse .navbar-text{ 362 | line-height: 55px; 363 | } 364 | 365 | .navbar-default .navbar-brand{ 366 | color: $default-color; 367 | } 368 | .navbar-default .navbar-brand:hover, 369 | .navbar-default .navbar-brand:focus{ 370 | color: #5e5e5e; 371 | } 372 | .navbar-collapse.show{ 373 | .navbar-nav{ 374 | .nav-item{ 375 | padding-right: 100px; 376 | } 377 | } 378 | } 379 | .nav-tabs-navigation{ 380 | &:last-child{ 381 | .nav-stacked{ 382 | border-right: 1px solid #F1EAE0; 383 | font-size: 16px; 384 | font-weight: 600; 385 | padding: 20px 0; 386 | .nav-item{ 387 | .nav-link{ 388 | padding: 7px 25px; 389 | } 390 | } 391 | } 392 | border-bottom: 0 none; 393 | } 394 | } 395 | 396 | 397 | //menu bars 398 | 399 | .navbar-nav > li > .dropdown-menu, 400 | .dropdown .dropdown-menu{ 401 | transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s; 402 | } 403 | 404 | .navbar-toggler{ 405 | outline: none !important; 406 | cursor: pointer; 407 | 408 | .navbar & .navbar-toggler-bar{ 409 | background: $font-color; 410 | } 411 | 412 | .navbar[class*="bg-"] & .navbar-toggler-bar, 413 | .navbar.navbar-transparent & .navbar-toggler-bar{ 414 | background: #fff; 415 | } 416 | 417 | .navbar-toggler-bar{ 418 | display: block; 419 | position: relative; 420 | width: 24px; 421 | height: 2px; 422 | border-radius: 1px; 423 | margin: 0 auto; 424 | } 425 | } 426 | 427 | 428 | .navbar-toggler .navbar-toggler-bar + .navbar-toggler-bar, 429 | .navbar-toggler .navbar-toggler-icon + .navbar-toggler-icon{ 430 | margin-top: 4px; 431 | } 432 | .navbar .navbar-toggler{ 433 | margin-top: 24px; 434 | } 435 | .navbar .navbar-burger{ 436 | margin-top: 20px; 437 | } 438 | .navbar-toggler-icon{ 439 | display: block; 440 | position: relative; 441 | width: 24px; 442 | height: 2px; 443 | border-radius: 1px; 444 | margin: 0 auto; 445 | background: gray; 446 | } 447 | .no-transition{ 448 | -webkit-transition: none; 449 | -moz-transition: none; 450 | -o-transition: none; 451 | -ms-transition: none; 452 | transition: none; 453 | } 454 | #description-areas .nav-stacked .nav-link.active:before, 455 | #navtabs-row .nav-stacked .nav-link.active:before{ 456 | border-right: 11px solid #F1EAE0; 457 | border-top: 11px solid transparent; 458 | border-bottom: 11px solid transparent; 459 | content: ""; 460 | display: inline-block; 461 | position: absolute; 462 | right: 0; 463 | bottom: 7px; 464 | } 465 | #description-areas .nav-stacked .nav-link.active:after, 466 | #navtabs-row .nav-stacked .nav-link.active:after{ 467 | border-right: 11px solid $white-color; 468 | border-top: 11px solid transparent; 469 | border-bottom: 11px solid transparent; 470 | content: ""; 471 | display: inline-block; 472 | position: absolute; 473 | right: -1px; 474 | bottom: 7px; 475 | } 476 | #second-tabs{ 477 | margin-left: 20px; 478 | } 479 | 480 | // navigation areas 481 | 482 | .scroll-area{ 483 | max-height: 310px; 484 | overflow-y: scroll; 485 | list-style: outside none none; 486 | padding: 0px; 487 | } 488 | 489 | .burger-menu{ 490 | .collapse{ 491 | .navbar-nav{ 492 | a{ 493 | color: $black-color; 494 | } 495 | } 496 | } 497 | } 498 | .navbar-transparent{ 499 | background: transparent !important; 500 | border-bottom: 1px solid transparent; 501 | box-shadow: none; 502 | 503 | .dropdown-menu .divider{ 504 | background-color: rgba($white-color,.2); 505 | } 506 | } 507 | .section-navbars{ 508 | #menu-dropdown{ 509 | .navbar{ 510 | .navbar-toggler{ 511 | .navbar-toggler-icon{ 512 | background: $white-color; 513 | } 514 | } 515 | } 516 | } 517 | } 518 | .nav-no-padding{ 519 | padding-top: 0 !important; 520 | } 521 | -------------------------------------------------------------------------------- /assets/css/themify-icons.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'themify'; 3 | src:url('../fonts/themify.eot'); 4 | src:url('../fonts/themify.eot') format('embedded-opentype'), 5 | url('../fonts/themify.woff') format('woff'), 6 | url('../fonts/themify.ttf') format('truetype'), 7 | url('../fonts/themify.svg') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | [class^="ti-"], [class*=" ti-"] { 13 | font-family: 'themify'; 14 | speak: none; 15 | font-style: normal; 16 | font-weight: bold; 17 | font-variant: normal; 18 | text-transform: none; 19 | line-height: 1; 20 | 21 | /* Better Font Rendering =========== */ 22 | -webkit-font-smoothing: antialiased; 23 | -moz-osx-font-smoothing: grayscale; 24 | } 25 | 26 | .ti-wand:before { 27 | content: "\e600"; 28 | } 29 | .ti-volume:before { 30 | content: "\e601"; 31 | } 32 | .ti-user:before { 33 | content: "\e602"; 34 | } 35 | .ti-unlock:before { 36 | content: "\e603"; 37 | } 38 | .ti-unlink:before { 39 | content: "\e604"; 40 | } 41 | .ti-trash:before { 42 | content: "\e605"; 43 | } 44 | .ti-thought:before { 45 | content: "\e606"; 46 | } 47 | .ti-target:before { 48 | content: "\e607"; 49 | } 50 | .ti-tag:before { 51 | content: "\e608"; 52 | } 53 | .ti-tablet:before { 54 | content: "\e609"; 55 | } 56 | .ti-star:before { 57 | content: "\e60a"; 58 | } 59 | .ti-spray:before { 60 | content: "\e60b"; 61 | } 62 | .ti-signal:before { 63 | content: "\e60c"; 64 | } 65 | .ti-shopping-cart:before { 66 | content: "\e60d"; 67 | } 68 | .ti-shopping-cart-full:before { 69 | content: "\e60e"; 70 | } 71 | .ti-settings:before { 72 | content: "\e60f"; 73 | } 74 | .ti-search:before { 75 | content: "\e610"; 76 | } 77 | .ti-zoom-in:before { 78 | content: "\e611"; 79 | } 80 | .ti-zoom-out:before { 81 | content: "\e612"; 82 | } 83 | .ti-cut:before { 84 | content: "\e613"; 85 | } 86 | .ti-ruler:before { 87 | content: "\e614"; 88 | } 89 | .ti-ruler-pencil:before { 90 | content: "\e615"; 91 | } 92 | .ti-ruler-alt:before { 93 | content: "\e616"; 94 | } 95 | .ti-bookmark:before { 96 | content: "\e617"; 97 | } 98 | .ti-bookmark-alt:before { 99 | content: "\e618"; 100 | } 101 | .ti-reload:before { 102 | content: "\e619"; 103 | } 104 | .ti-plus:before { 105 | content: "\e61a"; 106 | } 107 | .ti-pin:before { 108 | content: "\e61b"; 109 | } 110 | .ti-pencil:before { 111 | content: "\e61c"; 112 | } 113 | .ti-pencil-alt:before { 114 | content: "\e61d"; 115 | } 116 | .ti-paint-roller:before { 117 | content: "\e61e"; 118 | } 119 | .ti-paint-bucket:before { 120 | content: "\e61f"; 121 | } 122 | .ti-na:before { 123 | content: "\e620"; 124 | } 125 | .ti-mobile:before { 126 | content: "\e621"; 127 | } 128 | .ti-minus:before { 129 | content: "\e622"; 130 | } 131 | .ti-medall:before { 132 | content: "\e623"; 133 | } 134 | .ti-medall-alt:before { 135 | content: "\e624"; 136 | } 137 | .ti-marker:before { 138 | content: "\e625"; 139 | } 140 | .ti-marker-alt:before { 141 | content: "\e626"; 142 | } 143 | .ti-arrow-up:before { 144 | content: "\e627"; 145 | } 146 | .ti-arrow-right:before { 147 | content: "\e628"; 148 | } 149 | .ti-arrow-left:before { 150 | content: "\e629"; 151 | } 152 | .ti-arrow-down:before { 153 | content: "\e62a"; 154 | } 155 | .ti-lock:before { 156 | content: "\e62b"; 157 | } 158 | .ti-location-arrow:before { 159 | content: "\e62c"; 160 | } 161 | .ti-link:before { 162 | content: "\e62d"; 163 | } 164 | .ti-layout:before { 165 | content: "\e62e"; 166 | } 167 | .ti-layers:before { 168 | content: "\e62f"; 169 | } 170 | .ti-layers-alt:before { 171 | content: "\e630"; 172 | } 173 | .ti-key:before { 174 | content: "\e631"; 175 | } 176 | .ti-import:before { 177 | content: "\e632"; 178 | } 179 | .ti-image:before { 180 | content: "\e633"; 181 | } 182 | .ti-heart:before { 183 | content: "\e634"; 184 | } 185 | .ti-heart-broken:before { 186 | content: "\e635"; 187 | } 188 | .ti-hand-stop:before { 189 | content: "\e636"; 190 | } 191 | .ti-hand-open:before { 192 | content: "\e637"; 193 | } 194 | .ti-hand-drag:before { 195 | content: "\e638"; 196 | } 197 | .ti-folder:before { 198 | content: "\e639"; 199 | } 200 | .ti-flag:before { 201 | content: "\e63a"; 202 | } 203 | .ti-flag-alt:before { 204 | content: "\e63b"; 205 | } 206 | .ti-flag-alt-2:before { 207 | content: "\e63c"; 208 | } 209 | .ti-eye:before { 210 | content: "\e63d"; 211 | } 212 | .ti-export:before { 213 | content: "\e63e"; 214 | } 215 | .ti-exchange-vertical:before { 216 | content: "\e63f"; 217 | } 218 | .ti-desktop:before { 219 | content: "\e640"; 220 | } 221 | .ti-cup:before { 222 | content: "\e641"; 223 | } 224 | .ti-crown:before { 225 | content: "\e642"; 226 | } 227 | .ti-comments:before { 228 | content: "\e643"; 229 | } 230 | .ti-comment:before { 231 | content: "\e644"; 232 | } 233 | .ti-comment-alt:before { 234 | content: "\e645"; 235 | } 236 | .ti-close:before { 237 | content: "\e646"; 238 | } 239 | .ti-clip:before { 240 | content: "\e647"; 241 | } 242 | .ti-angle-up:before { 243 | content: "\e648"; 244 | } 245 | .ti-angle-right:before { 246 | content: "\e649"; 247 | } 248 | .ti-angle-left:before { 249 | content: "\e64a"; 250 | } 251 | .ti-angle-down:before { 252 | content: "\e64b"; 253 | } 254 | .ti-check:before { 255 | content: "\e64c"; 256 | } 257 | .ti-check-box:before { 258 | content: "\e64d"; 259 | } 260 | .ti-camera:before { 261 | content: "\e64e"; 262 | } 263 | .ti-announcement:before { 264 | content: "\e64f"; 265 | } 266 | .ti-brush:before { 267 | content: "\e650"; 268 | } 269 | .ti-briefcase:before { 270 | content: "\e651"; 271 | } 272 | .ti-bolt:before { 273 | content: "\e652"; 274 | } 275 | .ti-bolt-alt:before { 276 | content: "\e653"; 277 | } 278 | .ti-blackboard:before { 279 | content: "\e654"; 280 | } 281 | .ti-bag:before { 282 | content: "\e655"; 283 | } 284 | .ti-move:before { 285 | content: "\e656"; 286 | } 287 | .ti-arrows-vertical:before { 288 | content: "\e657"; 289 | } 290 | .ti-arrows-horizontal:before { 291 | content: "\e658"; 292 | } 293 | .ti-fullscreen:before { 294 | content: "\e659"; 295 | } 296 | .ti-arrow-top-right:before { 297 | content: "\e65a"; 298 | } 299 | .ti-arrow-top-left:before { 300 | content: "\e65b"; 301 | } 302 | .ti-arrow-circle-up:before { 303 | content: "\e65c"; 304 | } 305 | .ti-arrow-circle-right:before { 306 | content: "\e65d"; 307 | } 308 | .ti-arrow-circle-left:before { 309 | content: "\e65e"; 310 | } 311 | .ti-arrow-circle-down:before { 312 | content: "\e65f"; 313 | } 314 | .ti-angle-double-up:before { 315 | content: "\e660"; 316 | } 317 | .ti-angle-double-right:before { 318 | content: "\e661"; 319 | } 320 | .ti-angle-double-left:before { 321 | content: "\e662"; 322 | } 323 | .ti-angle-double-down:before { 324 | content: "\e663"; 325 | } 326 | .ti-zip:before { 327 | content: "\e664"; 328 | } 329 | .ti-world:before { 330 | content: "\e665"; 331 | } 332 | .ti-wheelchair:before { 333 | content: "\e666"; 334 | } 335 | .ti-view-list:before { 336 | content: "\e667"; 337 | } 338 | .ti-view-list-alt:before { 339 | content: "\e668"; 340 | } 341 | .ti-view-grid:before { 342 | content: "\e669"; 343 | } 344 | .ti-uppercase:before { 345 | content: "\e66a"; 346 | } 347 | .ti-upload:before { 348 | content: "\e66b"; 349 | } 350 | .ti-underline:before { 351 | content: "\e66c"; 352 | } 353 | .ti-truck:before { 354 | content: "\e66d"; 355 | } 356 | .ti-timer:before { 357 | content: "\e66e"; 358 | } 359 | .ti-ticket:before { 360 | content: "\e66f"; 361 | } 362 | .ti-thumb-up:before { 363 | content: "\e670"; 364 | } 365 | .ti-thumb-down:before { 366 | content: "\e671"; 367 | } 368 | .ti-text:before { 369 | content: "\e672"; 370 | } 371 | .ti-stats-up:before { 372 | content: "\e673"; 373 | } 374 | .ti-stats-down:before { 375 | content: "\e674"; 376 | } 377 | .ti-split-v:before { 378 | content: "\e675"; 379 | } 380 | .ti-split-h:before { 381 | content: "\e676"; 382 | } 383 | .ti-smallcap:before { 384 | content: "\e677"; 385 | } 386 | .ti-shine:before { 387 | content: "\e678"; 388 | } 389 | .ti-shift-right:before { 390 | content: "\e679"; 391 | } 392 | .ti-shift-left:before { 393 | content: "\e67a"; 394 | } 395 | .ti-shield:before { 396 | content: "\e67b"; 397 | } 398 | .ti-notepad:before { 399 | content: "\e67c"; 400 | } 401 | .ti-server:before { 402 | content: "\e67d"; 403 | } 404 | .ti-quote-right:before { 405 | content: "\e67e"; 406 | } 407 | .ti-quote-left:before { 408 | content: "\e67f"; 409 | } 410 | .ti-pulse:before { 411 | content: "\e680"; 412 | } 413 | .ti-printer:before { 414 | content: "\e681"; 415 | } 416 | .ti-power-off:before { 417 | content: "\e682"; 418 | } 419 | .ti-plug:before { 420 | content: "\e683"; 421 | } 422 | .ti-pie-chart:before { 423 | content: "\e684"; 424 | } 425 | .ti-paragraph:before { 426 | content: "\e685"; 427 | } 428 | .ti-panel:before { 429 | content: "\e686"; 430 | } 431 | .ti-package:before { 432 | content: "\e687"; 433 | } 434 | .ti-music:before { 435 | content: "\e688"; 436 | } 437 | .ti-music-alt:before { 438 | content: "\e689"; 439 | } 440 | .ti-mouse:before { 441 | content: "\e68a"; 442 | } 443 | .ti-mouse-alt:before { 444 | content: "\e68b"; 445 | } 446 | .ti-money:before { 447 | content: "\e68c"; 448 | } 449 | .ti-microphone:before { 450 | content: "\e68d"; 451 | } 452 | .ti-menu:before { 453 | content: "\e68e"; 454 | } 455 | .ti-menu-alt:before { 456 | content: "\e68f"; 457 | } 458 | .ti-map:before { 459 | content: "\e690"; 460 | } 461 | .ti-map-alt:before { 462 | content: "\e691"; 463 | } 464 | .ti-loop:before { 465 | content: "\e692"; 466 | } 467 | .ti-location-pin:before { 468 | content: "\e693"; 469 | } 470 | .ti-list:before { 471 | content: "\e694"; 472 | } 473 | .ti-light-bulb:before { 474 | content: "\e695"; 475 | } 476 | .ti-Italic:before { 477 | content: "\e696"; 478 | } 479 | .ti-info:before { 480 | content: "\e697"; 481 | } 482 | .ti-infinite:before { 483 | content: "\e698"; 484 | } 485 | .ti-id-badge:before { 486 | content: "\e699"; 487 | } 488 | .ti-hummer:before { 489 | content: "\e69a"; 490 | } 491 | .ti-home:before { 492 | content: "\e69b"; 493 | } 494 | .ti-help:before { 495 | content: "\e69c"; 496 | } 497 | .ti-headphone:before { 498 | content: "\e69d"; 499 | } 500 | .ti-harddrives:before { 501 | content: "\e69e"; 502 | } 503 | .ti-harddrive:before { 504 | content: "\e69f"; 505 | } 506 | .ti-gift:before { 507 | content: "\e6a0"; 508 | } 509 | .ti-game:before { 510 | content: "\e6a1"; 511 | } 512 | .ti-filter:before { 513 | content: "\e6a2"; 514 | } 515 | .ti-files:before { 516 | content: "\e6a3"; 517 | } 518 | .ti-file:before { 519 | content: "\e6a4"; 520 | } 521 | .ti-eraser:before { 522 | content: "\e6a5"; 523 | } 524 | .ti-envelope:before { 525 | content: "\e6a6"; 526 | } 527 | .ti-download:before { 528 | content: "\e6a7"; 529 | } 530 | .ti-direction:before { 531 | content: "\e6a8"; 532 | } 533 | .ti-direction-alt:before { 534 | content: "\e6a9"; 535 | } 536 | .ti-dashboard:before { 537 | content: "\e6aa"; 538 | } 539 | .ti-control-stop:before { 540 | content: "\e6ab"; 541 | } 542 | .ti-control-shuffle:before { 543 | content: "\e6ac"; 544 | } 545 | .ti-control-play:before { 546 | content: "\e6ad"; 547 | } 548 | .ti-control-pause:before { 549 | content: "\e6ae"; 550 | } 551 | .ti-control-forward:before { 552 | content: "\e6af"; 553 | } 554 | .ti-control-backward:before { 555 | content: "\e6b0"; 556 | } 557 | .ti-cloud:before { 558 | content: "\e6b1"; 559 | } 560 | .ti-cloud-up:before { 561 | content: "\e6b2"; 562 | } 563 | .ti-cloud-down:before { 564 | content: "\e6b3"; 565 | } 566 | .ti-clipboard:before { 567 | content: "\e6b4"; 568 | } 569 | .ti-car:before { 570 | content: "\e6b5"; 571 | } 572 | .ti-calendar:before { 573 | content: "\e6b6"; 574 | } 575 | .ti-book:before { 576 | content: "\e6b7"; 577 | } 578 | .ti-bell:before { 579 | content: "\e6b8"; 580 | } 581 | .ti-basketball:before { 582 | content: "\e6b9"; 583 | } 584 | .ti-bar-chart:before { 585 | content: "\e6ba"; 586 | } 587 | .ti-bar-chart-alt:before { 588 | content: "\e6bb"; 589 | } 590 | .ti-back-right:before { 591 | content: "\e6bc"; 592 | } 593 | .ti-back-left:before { 594 | content: "\e6bd"; 595 | } 596 | .ti-arrows-corner:before { 597 | content: "\e6be"; 598 | } 599 | .ti-archive:before { 600 | content: "\e6bf"; 601 | } 602 | .ti-anchor:before { 603 | content: "\e6c0"; 604 | } 605 | .ti-align-right:before { 606 | content: "\e6c1"; 607 | } 608 | .ti-align-left:before { 609 | content: "\e6c2"; 610 | } 611 | .ti-align-justify:before { 612 | content: "\e6c3"; 613 | } 614 | .ti-align-center:before { 615 | content: "\e6c4"; 616 | } 617 | .ti-alert:before { 618 | content: "\e6c5"; 619 | } 620 | .ti-alarm-clock:before { 621 | content: "\e6c6"; 622 | } 623 | .ti-agenda:before { 624 | content: "\e6c7"; 625 | } 626 | .ti-write:before { 627 | content: "\e6c8"; 628 | } 629 | .ti-window:before { 630 | content: "\e6c9"; 631 | } 632 | .ti-widgetized:before { 633 | content: "\e6ca"; 634 | } 635 | .ti-widget:before { 636 | content: "\e6cb"; 637 | } 638 | .ti-widget-alt:before { 639 | content: "\e6cc"; 640 | } 641 | .ti-wallet:before { 642 | content: "\e6cd"; 643 | } 644 | .ti-video-clapper:before { 645 | content: "\e6ce"; 646 | } 647 | .ti-video-camera:before { 648 | content: "\e6cf"; 649 | } 650 | .ti-vector:before { 651 | content: "\e6d0"; 652 | } 653 | .ti-themify-logo:before { 654 | content: "\e6d1"; 655 | } 656 | .ti-themify-favicon:before { 657 | content: "\e6d2"; 658 | } 659 | .ti-themify-favicon-alt:before { 660 | content: "\e6d3"; 661 | } 662 | .ti-support:before { 663 | content: "\e6d4"; 664 | } 665 | .ti-stamp:before { 666 | content: "\e6d5"; 667 | } 668 | .ti-split-v-alt:before { 669 | content: "\e6d6"; 670 | } 671 | .ti-slice:before { 672 | content: "\e6d7"; 673 | } 674 | .ti-shortcode:before { 675 | content: "\e6d8"; 676 | } 677 | .ti-shift-right-alt:before { 678 | content: "\e6d9"; 679 | } 680 | .ti-shift-left-alt:before { 681 | content: "\e6da"; 682 | } 683 | .ti-ruler-alt-2:before { 684 | content: "\e6db"; 685 | } 686 | .ti-receipt:before { 687 | content: "\e6dc"; 688 | } 689 | .ti-pin2:before { 690 | content: "\e6dd"; 691 | } 692 | .ti-pin-alt:before { 693 | content: "\e6de"; 694 | } 695 | .ti-pencil-alt2:before { 696 | content: "\e6df"; 697 | } 698 | .ti-palette:before { 699 | content: "\e6e0"; 700 | } 701 | .ti-more:before { 702 | content: "\e6e1"; 703 | } 704 | .ti-more-alt:before { 705 | content: "\e6e2"; 706 | } 707 | .ti-microphone-alt:before { 708 | content: "\e6e3"; 709 | } 710 | .ti-magnet:before { 711 | content: "\e6e4"; 712 | } 713 | .ti-line-double:before { 714 | content: "\e6e5"; 715 | } 716 | .ti-line-dotted:before { 717 | content: "\e6e6"; 718 | } 719 | .ti-line-dashed:before { 720 | content: "\e6e7"; 721 | } 722 | .ti-layout-width-full:before { 723 | content: "\e6e8"; 724 | } 725 | .ti-layout-width-default:before { 726 | content: "\e6e9"; 727 | } 728 | .ti-layout-width-default-alt:before { 729 | content: "\e6ea"; 730 | } 731 | .ti-layout-tab:before { 732 | content: "\e6eb"; 733 | } 734 | .ti-layout-tab-window:before { 735 | content: "\e6ec"; 736 | } 737 | .ti-layout-tab-v:before { 738 | content: "\e6ed"; 739 | } 740 | .ti-layout-tab-min:before { 741 | content: "\e6ee"; 742 | } 743 | .ti-layout-slider:before { 744 | content: "\e6ef"; 745 | } 746 | .ti-layout-slider-alt:before { 747 | content: "\e6f0"; 748 | } 749 | .ti-layout-sidebar-right:before { 750 | content: "\e6f1"; 751 | } 752 | .ti-layout-sidebar-none:before { 753 | content: "\e6f2"; 754 | } 755 | .ti-layout-sidebar-left:before { 756 | content: "\e6f3"; 757 | } 758 | .ti-layout-placeholder:before { 759 | content: "\e6f4"; 760 | } 761 | .ti-layout-menu:before { 762 | content: "\e6f5"; 763 | } 764 | .ti-layout-menu-v:before { 765 | content: "\e6f6"; 766 | } 767 | .ti-layout-menu-separated:before { 768 | content: "\e6f7"; 769 | } 770 | .ti-layout-menu-full:before { 771 | content: "\e6f8"; 772 | } 773 | .ti-layout-media-right-alt:before { 774 | content: "\e6f9"; 775 | } 776 | .ti-layout-media-right:before { 777 | content: "\e6fa"; 778 | } 779 | .ti-layout-media-overlay:before { 780 | content: "\e6fb"; 781 | } 782 | .ti-layout-media-overlay-alt:before { 783 | content: "\e6fc"; 784 | } 785 | .ti-layout-media-overlay-alt-2:before { 786 | content: "\e6fd"; 787 | } 788 | .ti-layout-media-left-alt:before { 789 | content: "\e6fe"; 790 | } 791 | .ti-layout-media-left:before { 792 | content: "\e6ff"; 793 | } 794 | .ti-layout-media-center-alt:before { 795 | content: "\e700"; 796 | } 797 | .ti-layout-media-center:before { 798 | content: "\e701"; 799 | } 800 | .ti-layout-list-thumb:before { 801 | content: "\e702"; 802 | } 803 | .ti-layout-list-thumb-alt:before { 804 | content: "\e703"; 805 | } 806 | .ti-layout-list-post:before { 807 | content: "\e704"; 808 | } 809 | .ti-layout-list-large-image:before { 810 | content: "\e705"; 811 | } 812 | .ti-layout-line-solid:before { 813 | content: "\e706"; 814 | } 815 | .ti-layout-grid4:before { 816 | content: "\e707"; 817 | } 818 | .ti-layout-grid3:before { 819 | content: "\e708"; 820 | } 821 | .ti-layout-grid2:before { 822 | content: "\e709"; 823 | } 824 | .ti-layout-grid2-thumb:before { 825 | content: "\e70a"; 826 | } 827 | .ti-layout-cta-right:before { 828 | content: "\e70b"; 829 | } 830 | .ti-layout-cta-left:before { 831 | content: "\e70c"; 832 | } 833 | .ti-layout-cta-center:before { 834 | content: "\e70d"; 835 | } 836 | .ti-layout-cta-btn-right:before { 837 | content: "\e70e"; 838 | } 839 | .ti-layout-cta-btn-left:before { 840 | content: "\e70f"; 841 | } 842 | .ti-layout-column4:before { 843 | content: "\e710"; 844 | } 845 | .ti-layout-column3:before { 846 | content: "\e711"; 847 | } 848 | .ti-layout-column2:before { 849 | content: "\e712"; 850 | } 851 | .ti-layout-accordion-separated:before { 852 | content: "\e713"; 853 | } 854 | .ti-layout-accordion-merged:before { 855 | content: "\e714"; 856 | } 857 | .ti-layout-accordion-list:before { 858 | content: "\e715"; 859 | } 860 | .ti-ink-pen:before { 861 | content: "\e716"; 862 | } 863 | .ti-info-alt:before { 864 | content: "\e717"; 865 | } 866 | .ti-help-alt:before { 867 | content: "\e718"; 868 | } 869 | .ti-headphone-alt:before { 870 | content: "\e719"; 871 | } 872 | .ti-hand-point-up:before { 873 | content: "\e71a"; 874 | } 875 | .ti-hand-point-right:before { 876 | content: "\e71b"; 877 | } 878 | .ti-hand-point-left:before { 879 | content: "\e71c"; 880 | } 881 | .ti-hand-point-down:before { 882 | content: "\e71d"; 883 | } 884 | .ti-gallery:before { 885 | content: "\e71e"; 886 | } 887 | .ti-face-smile:before { 888 | content: "\e71f"; 889 | } 890 | .ti-face-sad:before { 891 | content: "\e720"; 892 | } 893 | .ti-credit-card:before { 894 | content: "\e721"; 895 | } 896 | .ti-control-skip-forward:before { 897 | content: "\e722"; 898 | } 899 | .ti-control-skip-backward:before { 900 | content: "\e723"; 901 | } 902 | .ti-control-record:before { 903 | content: "\e724"; 904 | } 905 | .ti-control-eject:before { 906 | content: "\e725"; 907 | } 908 | .ti-comments-smiley:before { 909 | content: "\e726"; 910 | } 911 | .ti-brush-alt:before { 912 | content: "\e727"; 913 | } 914 | .ti-youtube:before { 915 | content: "\e728"; 916 | } 917 | .ti-vimeo:before { 918 | content: "\e729"; 919 | } 920 | .ti-twitter:before { 921 | content: "\e72a"; 922 | } 923 | .ti-time:before { 924 | content: "\e72b"; 925 | } 926 | .ti-tumblr:before { 927 | content: "\e72c"; 928 | } 929 | .ti-skype:before { 930 | content: "\e72d"; 931 | } 932 | .ti-share:before { 933 | content: "\e72e"; 934 | } 935 | .ti-share-alt:before { 936 | content: "\e72f"; 937 | } 938 | .ti-rocket:before { 939 | content: "\e730"; 940 | } 941 | .ti-pinterest:before { 942 | content: "\e731"; 943 | } 944 | .ti-new-window:before { 945 | content: "\e732"; 946 | } 947 | .ti-microsoft:before { 948 | content: "\e733"; 949 | } 950 | .ti-list-ol:before { 951 | content: "\e734"; 952 | } 953 | .ti-linkedin:before { 954 | content: "\e735"; 955 | } 956 | .ti-layout-sidebar-2:before { 957 | content: "\e736"; 958 | } 959 | .ti-layout-grid4-alt:before { 960 | content: "\e737"; 961 | } 962 | .ti-layout-grid3-alt:before { 963 | content: "\e738"; 964 | } 965 | .ti-layout-grid2-alt:before { 966 | content: "\e739"; 967 | } 968 | .ti-layout-column4-alt:before { 969 | content: "\e73a"; 970 | } 971 | .ti-layout-column3-alt:before { 972 | content: "\e73b"; 973 | } 974 | .ti-layout-column2-alt:before { 975 | content: "\e73c"; 976 | } 977 | .ti-instagram:before { 978 | content: "\e73d"; 979 | } 980 | .ti-google:before { 981 | content: "\e73e"; 982 | } 983 | .ti-github:before { 984 | content: "\e73f"; 985 | } 986 | .ti-flickr:before { 987 | content: "\e740"; 988 | } 989 | .ti-facebook:before { 990 | content: "\e741"; 991 | } 992 | .ti-dropbox:before { 993 | content: "\e742"; 994 | } 995 | .ti-dribbble:before { 996 | content: "\e743"; 997 | } 998 | .ti-apple:before { 999 | content: "\e744"; 1000 | } 1001 | .ti-android:before { 1002 | content: "\e745"; 1003 | } 1004 | .ti-save:before { 1005 | content: "\e746"; 1006 | } 1007 | .ti-save-alt:before { 1008 | content: "\e747"; 1009 | } 1010 | .ti-yahoo:before { 1011 | content: "\e748"; 1012 | } 1013 | .ti-wordpress:before { 1014 | content: "\e749"; 1015 | } 1016 | .ti-vimeo-alt:before { 1017 | content: "\e74a"; 1018 | } 1019 | .ti-twitter-alt:before { 1020 | content: "\e74b"; 1021 | } 1022 | .ti-tumblr-alt:before { 1023 | content: "\e74c"; 1024 | } 1025 | .ti-trello:before { 1026 | content: "\e74d"; 1027 | } 1028 | .ti-stack-overflow:before { 1029 | content: "\e74e"; 1030 | } 1031 | .ti-soundcloud:before { 1032 | content: "\e74f"; 1033 | } 1034 | .ti-sharethis:before { 1035 | content: "\e750"; 1036 | } 1037 | .ti-sharethis-alt:before { 1038 | content: "\e751"; 1039 | } 1040 | .ti-reddit:before { 1041 | content: "\e752"; 1042 | } 1043 | .ti-pinterest-alt:before { 1044 | content: "\e753"; 1045 | } 1046 | .ti-microsoft-alt:before { 1047 | content: "\e754"; 1048 | } 1049 | .ti-linux:before { 1050 | content: "\e755"; 1051 | } 1052 | .ti-jsfiddle:before { 1053 | content: "\e756"; 1054 | } 1055 | .ti-joomla:before { 1056 | content: "\e757"; 1057 | } 1058 | .ti-html5:before { 1059 | content: "\e758"; 1060 | } 1061 | .ti-flickr-alt:before { 1062 | content: "\e759"; 1063 | } 1064 | .ti-email:before { 1065 | content: "\e75a"; 1066 | } 1067 | .ti-drupal:before { 1068 | content: "\e75b"; 1069 | } 1070 | .ti-dropbox-alt:before { 1071 | content: "\e75c"; 1072 | } 1073 | .ti-css3:before { 1074 | content: "\e75d"; 1075 | } 1076 | .ti-rss:before { 1077 | content: "\e75e"; 1078 | } 1079 | .ti-rss-alt:before { 1080 | content: "\e75f"; 1081 | } 1082 | --------------------------------------------------------------------------------