diff --git a/.eslintrc.js b/.eslintrc.js index fe2660b..84193d2 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,14 +1,15 @@ module.exports = { root: true, env: { - node: true + node: true, }, - extends: ['plugin:vue/essential'], + extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"], rules: { - 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', - 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' + "vue/multi-word-component-names": "off", + "no-console": process.env.NODE_ENV === "production" ? "error" : "off", + "no-debugger": process.env.NODEc_ENV === "production" ? "error" : "off", }, parserOptions: { - parser: 'babel-eslint' - } + parser: "@babel/eslint-parser", + }, }; diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 79bb9cf..4f3e562 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -4,9 +4,9 @@ jobs: autoclose: runs-on: ubuntu-latest steps: - - name: Issue auto-closer - uses: roots/issue-closer-action@v1.1 - with: - repo-token: ${{ secrets.GITHUB_TOKEN }} - issue-close-message: "@${issue.user.login} this issue was automatically closed because it did not follow the bellow rules:\n\n
\n\n\n\nIMPORTANT: Please use the following link to create a new issue:\n\nhttps://www.creative-tim.com/new-issue/vue-now-ui-kit\n\n**If your issue was not created using the app above, it will be closed immediately.**\n\n\n\nLove Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:\n👉  https://www.creative-tim.com/bundles\n👉  https://www.creative-tim.com\n\n\n
\n\n" - issue-pattern: (\#\#\# Version([\S\s.*]*?)\#\#\# Reproduction link([\S\s.*]*?)\#\#\# Operating System([\S\s.*]*?)\#\#\# Device([\S\s.*]*?)\#\#\# Browser & Version([\S\s.*]*?)\#\#\# Steps to reproduce([\S\s.*]*?)\#\#\# What is expected([\S\s.*]*?)\#\#\# What is actually happening([\S\s.*]*?)---([\S\s.*]*?)\#\#\# Solution([\S\s.*]*?)\#\#\# Additional comments([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)|(\#\#\# What is your enhancement([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>) + - name: Issue auto-closer + uses: roots/issue-closer-action@v1.1 + with: + repo-token: ${{ secrets.GITHUB_TOKEN }} + issue-close-message: "@${issue.user.login} this issue was automatically closed because it did not follow the bellow rules:\n\n
\n\n\n\nIMPORTANT: Please use the following link to create a new issue:\n\nhttps://www.creative-tim.com/new-issue/vue-now-ui-kit\n\n**If your issue was not created using the app above, it will be closed immediately.**\n\n\n\nLove Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:\n👉  https://www.creative-tim.com/bundles\n👉  https://www.creative-tim.com\n\n\n
\n\n" + issue-pattern: (\#\#\# Version([\S\s.*]*?)\#\#\# Reproduction link([\S\s.*]*?)\#\#\# Operating System([\S\s.*]*?)\#\#\# Device([\S\s.*]*?)\#\#\# Browser & Version([\S\s.*]*?)\#\#\# Steps to reproduce([\S\s.*]*?)\#\#\# What is expected([\S\s.*]*?)\#\#\# What is actually happening([\S\s.*]*?)---([\S\s.*]*?)\#\#\# Solution([\S\s.*]*?)\#\#\# Additional comments([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>)|(\#\#\# What is your enhancement([\S\s.*]*?)\<\!-- generated by creative-tim-issues\. DO NOT REMOVE --\>) diff --git a/.gitignore b/.gitignore index 185e663..242e1e4 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,9 @@ node_modules /dist +package-lock.json +yarn.lock + # local env files .env.local .env.*.local diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..5c6c958 --- /dev/null +++ b/.npmrc @@ -0,0 +1,3 @@ +legacy-peer-deps=true +auto-install-peers=true +strict-peer-dependencies=false \ No newline at end of file diff --git a/.postcssrc.js b/.postcssrc.js index 5bfb8f6..a47ef4f 100644 --- a/.postcssrc.js +++ b/.postcssrc.js @@ -1,5 +1,5 @@ module.exports = { plugins: { - autoprefixer: {} - } + autoprefixer: {}, + }, }; diff --git a/CHANGELOG.md b/CHANGELOG.md index 39bfe7d..ebf7644 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,13 +1,22 @@ # Change Log +## [1.2.0] 2023-05-31 + +- Update dependencies and devDependencies +- Migrate from `node-sass` to `sass` +- Fix issue when running `npm i` + ## [1.1.1] 2020-07-01 + - Update packages ## [1.1.0] 2019-02-12 + - Update all packages and lint files - Fix UI issues related to form group input - Add missing polyfills for IE - Add examples dropdown with links to landing, profile and login pages ## [1.0.0] 2018-08-24 + ### Stable Original Release diff --git a/LICENSE.md b/LICENSE.md index a3ea5ff..5ac4d08 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -1,4 +1,3 @@ - MIT License Copyright (c) 2017-2019 Cristi Jora and Creative Tim (www.creative-tim.com) diff --git a/README.md b/README.md index 8ed68bb..571a4ea 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,6 @@ # [Vue Now UI Kit](https://demos.creative-tim.com/vue-now-ui-kit) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?text=Vue%20Now%20UI%20Kit,%20a%20free%20Vue.js%20Bootstrap%204%20UI%20Kit%20%E2%9D%A4%EF%B8%8Fhttps://bit.ly/2OLFzVl%20%23bootstrap%20%23vue.js%20%23design%20%23developers%20%23freebie%20%20via%20%40CreativeTim&source=webclient) - - -![version](https://img.shields.io/badge/version-1.0.0-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/vue-now-ui-kit.svg?maxAge=22000)]() [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/vue-now-ui-kit.svg?maxAge=22000)]() [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/E4aHAQy) +![version](https://img.shields.io/badge/version-1.2.0-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/vue-now-ui-kit.svg?maxAge=22000)]() [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/vue-now-ui-kit.svg?maxAge=22000)]() [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/E4aHAQy) ![Product Gif](src/assets/github/product.gif) @@ -16,7 +14,7 @@ Create awesome, lifelike prototypes with InVision and Now so your users can expe To get the PSD and Sketch files, please visit Invision (https://www.invisionapp.com/now). -Technologies used: +Technologies used: [Vue.js (2.5)](https://vuejs.org/) as framework for development. [Vue CLI 3](https://github.com/vuejs/vue-cli) for project scaffolding. [Vue Router](https://router.vuejs.org/) for handling routes. @@ -29,18 +27,17 @@ You can find the Github Repo here. ## Table of Contents -* [Versions](#versions) -* [Demo](#demo) -* [Quick Start](#quick-start) -* [Documentation](#documentation) -* [File Structure](#file-structure) -* [Browser Support](#browser-support) -* [Resources](#resources) -* [Reporting Issues](#reporting-issues) -* [Technical Support or Questions](#technical-support-or-questions) -* [Licensing](#licensing) -* [Useful Links](#useful-links) - +- [Versions](#versions) +- [Demo](#demo) +- [Quick Start](#quick-start) +- [Documentation](#documentation) +- [File Structure](#file-structure) +- [Browser Support](#browser-support) +- [Resources](#resources) +- [Reporting Issues](#reporting-issues) +- [Technical Support or Questions](#technical-support-or-questions) +- [Licensing](#licensing) +- [Useful Links](#useful-links) ## Versions @@ -48,20 +45,18 @@ You can find the Github Repo here. [](https://www.creative-tim.com/product/vue-now-ui-kit) [](https://www.creative-tim.com/product/now-ui-kit-angular) - -| HTML | Vue | Angular | -| --- | --- | --- | -| [![Now Ui Kit HTML](https://s3.amazonaws.com/creativetim_bucket/products/56/original/opt_nuk_thumbnail.jpg?1494946669)](https://www.creative-tim.com/product/now-ui-kit) | [![Vue Now UI Kit ](https://s3.amazonaws.com/creativetim_bucket/products/94/original/opt_nuk_vue_thumbnail.jpg?1534755580)](https://www.creative-tim.com/product/vue-now-ui-kit) | [![Now Ui Kit Angular](https://s3.amazonaws.com/creativetim_bucket/products/77/original/opt_nuk_angular_thumbnail.jpg?1520507715)](https://www.creative-tim.com/product/now-ui-kit-angular) +| HTML | Vue | Angular | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [![Now Ui Kit HTML](https://s3.amazonaws.com/creativetim_bucket/products/56/original/opt_nuk_thumbnail.jpg?1494946669)](https://www.creative-tim.com/product/now-ui-kit) | [![Vue Now UI Kit ](https://s3.amazonaws.com/creativetim_bucket/products/94/original/opt_nuk_vue_thumbnail.jpg?1534755580)](https://www.creative-tim.com/product/vue-now-ui-kit) | [![Now Ui Kit Angular](https://s3.amazonaws.com/creativetim_bucket/products/77/original/opt_nuk_angular_thumbnail.jpg?1520507715)](https://www.creative-tim.com/product/now-ui-kit-angular) | ## Demo -| Components | Landing | Profile | Login | -| --- | --- | --- | --- | -| [![Components](src/assets/github/components.png)](https://demos.creative-tim.com/vue-now-ui-kit/#/) | [![Landing page](src/assets/github/landing.png)](https://demos.creative-tim.com/vue-now-ui-kit/#/landing) | [![Profile page ](src/assets/github/profile.png)](https://demos.creative-tim.com/vue-now-ui-kit/#/profile) | [![Login Page](src/assets/github/login.png)](https://demos.creative-tim.com/vue-now-ui-kit/#/login) +| Components | Landing | Profile | Login | +| --------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | +| [![Components](src/assets/github/components.png)](https://demos.creative-tim.com/vue-now-ui-kit/#/) | [![Landing page](src/assets/github/landing.png)](https://demos.creative-tim.com/vue-now-ui-kit/#/landing) | [![Profile page ](src/assets/github/profile.png)](https://demos.creative-tim.com/vue-now-ui-kit/#/profile) | [![Login Page](src/assets/github/login.png)](https://demos.creative-tim.com/vue-now-ui-kit/#/login) | [View More](https://demos.creative-tim.com/vue-now-ui-kit). - ## Quick start Quick start options: @@ -72,10 +67,9 @@ Quick start options: - Run `npm install` or `yarn install` - Run `npm run serve` to start a local development server - ## Documentation -The documentation for Vue Now UI Kit is hosted at our [website](https://demos.creative-tim.com/vue-now-ui-kit/documentation/). +The documentation for Vue Now UI Kit is hosted at our [website](https://demos.creative-tim.com/vue-now-ui-kit/documentation/). ## File Structure @@ -103,8 +97,8 @@ At present, we officially aim to support the last two versions of the following - ## Resources + - Demo: https://demos.creative-tim.com/vue-now-ui-kit - Download Page: https://www.creative-tim.com/product/vue-now-ui-kit - Documentation: https://demos.creative-tim.com/vue-now-ui-kit/documentation/ @@ -114,6 +108,7 @@ At present, we officially aim to support the last two versions of the following - [Vue Now UI Dashboard PRO - For Dashboard development](https://www.creative-tim.com/product/vue-now-ui-dashboard-pro?ref=github-vue-nud-free) ## Reporting Issues + We use GitHub Issues as the official bug tracker for Vue Now UI Kit. Here are some advices for our users that want to report an issue: 1. Make sure that you are using the latest version of the Vue Now UI Kit. Check the CHANGELOG from your ui kit on our [website](https://www.creative-tim.com/). diff --git a/babel.config.js b/babel.config.js index ab09803..f81febd 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,19 +1,19 @@ module.exports = { presets: [ [ - '@vue/app', + "@vue/app", { - polyfills: ['es.promise', 'es.symbol'] - } - ] + polyfills: ["es.promise", "es.symbol"], + }, + ], ], plugins: [ [ - 'component', + "component", { - libraryName: 'element-ui', - styleLibraryName: 'theme-chalk' - } - ] - ] + libraryName: "element-ui", + styleLibraryName: "theme-chalk", + }, + ], + ], }; diff --git a/package.json b/package.json index 09acc99..fa0b92a 100644 --- a/package.json +++ b/package.json @@ -1,33 +1,38 @@ { "name": "vue-now-ui-kit", - "version": "1.1.0", + "version": "1.2.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", - "lint": "vue-cli-service lint" + "lint": "vue-cli-service lint", + "prettify": "prettier --write ." }, "dependencies": { - "babel-eslint": "^10.1.0", - "bootstrap": "^4.5.0", - "core-js": "^3.6.5", - "element-ui": "^2.13.2", - "eslint": "^7.3.1", - "eslint-plugin-vue": "^6.2.2", - "nouislider": "^14.6.0", - "vue": "^2.6.11", - "vue-lazy-load": "^0.0.7", - "vue-lazyload": "^1.3.3", - "vue-router": "^3.3.4", - "vue2-transitions": "^0.3.0" + "bootstrap": "4.6.2", + "element-ui": "2.15.13", + "nouislider": "15.7.0", + "vue": "2.7.14", + "vue-lazyload": "1.3.5", + "vue-router": "3.6.5", + "vue2-transitions": "0.3.0" }, "devDependencies": { - "@vue/cli-plugin-babel": "^4.4.6", - "@vue/cli-plugin-eslint": "^4.4.6", - "@vue/cli-service": "^4.4.6", - "babel-plugin-component": "^1.1.1", - "node-sass": "^4.14.1", - "sass-loader": "^8.0.2", - "vue-template-compiler": "^2.6.11" + "@vue/cli-plugin-babel": "5.0.8", + "@vue/cli-plugin-eslint": "5.0.8", + "@vue/cli-service": "5.0.8", + "@vue/eslint-config-prettier": "7.1.0", + "babel-plugin-component": "1.1.1", + "@babel/eslint-parser": "7.21.3", + "eslint": "8.41.0", + "eslint-plugin-prettier": "4.2.1", + "eslint-plugin-vue": "9.14.1", + "prettier": "2.8.8", + "sass": "1.62.1", + "sass-loader": "13.3.1", + "vue-template-compiler": "^2.7.14" + }, + "overrides": { + "core-js": "3.30.1" } } diff --git a/public/index.html b/public/index.html index 6540743..588a192 100644 --- a/public/index.html +++ b/public/index.html @@ -1,11 +1,11 @@ - - + +
diff --git a/src/assets/demo/demo.css b/src/assets/demo/demo.css index f40b9ea..8a4d569 100755 --- a/src/assets/demo/demo.css +++ b/src/assets/demo/demo.css @@ -16,7 +16,7 @@ .pick-class-label { border-radius: 8px; - border: 1px solid #E3E3E3; + border: 1px solid #e3e3e3; color: #ffffff; cursor: pointer; display: inline-block; @@ -115,7 +115,7 @@ } #notifications { - background-color: #FFFFFF; + background-color: #ffffff; display: block; width: 100%; position: relative; @@ -143,7 +143,7 @@ } .txt-white { - color: #FFFFFF; + color: #ffffff; } .txt-gray { @@ -170,7 +170,7 @@ .logo-container .brand { font-size: 16px; - color: #FFFFFF; + color: #ffffff; line-height: 18px; float: left; margin-left: 10px; @@ -328,10 +328,10 @@ .presentation .front .btn, .logo-container .logo, .logo-container .brand { - -webkit-transition: all .2s; - -moz-transition: all .2s; - -o-transition: all .2s; - transition: all .2s; + -webkit-transition: all 0.2s; + -moz-transition: all 0.2s; + -o-transition: all 0.2s; + transition: all 0.2s; } #images h4 { @@ -370,7 +370,7 @@ } .navbar-transparent.navbar-small .logo-container .brand { - color: #FFFFFF; + color: #ffffff; } .navbar-default.navbar-small .logo-container .brand { @@ -404,7 +404,7 @@ } .section-tabs { - background: #EEEEEE; + background: #eeeeee; } .section-pagination { @@ -427,7 +427,7 @@ text-decoration: none; } -.section-examples a+a { +.section-examples a + a { margin-top: 30px; } @@ -435,8 +435,8 @@ margin-top: 30px; } -.components-page .wrapper>.header, -.tutorial-page .wrapper>.header { +.components-page .wrapper > .header, +.tutorial-page .wrapper > .header { height: 500px; padding-top: 128px; background-size: cover; @@ -445,7 +445,7 @@ .components-page .title, .tutorial-page .title { - color: #FFFFFF; + color: #ffffff; } .brand .h1-seo { @@ -503,4 +503,4 @@ .section-navbars .navbar-collapse { display: none !important; } -} \ No newline at end of file +} diff --git a/src/assets/fonts/nucleo-license.md b/src/assets/fonts/nucleo-license.md index facbe15..4dac2fe 100755 --- a/src/assets/fonts/nucleo-license.md +++ b/src/assets/fonts/nucleo-license.md @@ -21,14 +21,17 @@ You don't have the right to: - Use Nucleo icons in a product that is directly competitive with Nucleo. ## Freelance Projects & Contracted work + If you’re working on one or more projects for a client, you can share with your client a maximum of 250 Nucleo icons per project. You can’t share Nucleo source files, unless the client purchases a Nucleo license. If the End Product you (or the team you’ve been part of) have created for the client is a product offered for sale, and the Nucleo icons contribute to the core value of the product being sold/shared, your client will have to buy an Extended License. ## End Product Users + If you're using Nucleo icons in apps, installable items or online products/services, there's no limit to the number of users/customers that can use the product you're developing (e.g. if you're developing a web application and you're using Nucleo icons throughout the design, there's no limit to the number of active users of the application). ## Templates, Themes, UI Kits & Plugins + If you’re using Nucleo icons in templates, themes or plugins offered for sale, or for free, (e.g. UI kits, Wordpress Themes, HTML/CSS Templates), you can include up to 100 icons in the downloadable source files. This limitation applies to the icon fonts as well. The downloadable source file has to include [Nucleo license](https://github.com/NucleoApp/license-standard). No attribution or link back required, however any credit will be much appreciated. @@ -36,6 +39,7 @@ The downloadable source file has to include [Nucleo license](https://github.com/ If Nucleo icons contribute to the core value of the template, theme or plugin sold/shared (e.g. a theme builder where users can browse Nucleo icons and pick the ones to include in their design), you will need an Extended License. ## Open source projects + If you’re using Nucleo icons in open source projects, you can include up to 100 icons in the downloadable source files. This limitation applies to the icon fonts as well. The downloadable source file has to include [Nucleo license](https://github.com/NucleoApp/license-standard). No attribution or link back required, however any credit will be much appreciated. @@ -43,6 +47,7 @@ The downloadable source file has to include [Nucleo license](https://github.com/ If Nucleo icons contribute to the core value of the open source project (e.g. a CMS where users can browse Nucleo icons and pick the ones to include in their design), you will need an Extended License. ## Extended License + If you're interested in using Nucleo icons in items offered for sale (or for free) where the Nucleo icons contribute to the core value of the product being sold/shared, you will need an Extended License. By purchasing an Extended License, you’re also granted the right to: diff --git a/src/assets/scss/now-ui-kit.scss b/src/assets/scss/now-ui-kit.scss index e9d905c..adce7d0 100755 --- a/src/assets/scss/now-ui-kit.scss +++ b/src/assets/scss/now-ui-kit.scss @@ -1,11 +1,11 @@ /*! ========================================================= - * Vue Now UI Kit - v1.1.0 + * Vue Now UI Kit - v1.2.0 ========================================================= * Product Page: https://www.creative-tim.com/product/now-ui-kit - * Copyright 2019 Creative Tim (http://www.creative-tim.com) + * Copyright 2023 Creative Tim (http://www.creative-tim.com) * Designed by www.invisionapp.com Coded by www.creative-tim.com @@ -15,8 +15,8 @@ */ -@import 'now-ui-kit/variables'; -@import 'now-ui-kit/mixins'; +@import "now-ui-kit/variables"; +@import "now-ui-kit/mixins"; // Plugins CSS @import "now-ui-kit/plugins/plugin-bootstrap-switch"; @@ -56,7 +56,6 @@ @import "now-ui-kit/example-pages"; @import "now-ui-kit/sections"; - @import "now-ui-kit/responsive"; // Element UI plugins diff --git a/src/assets/scss/now-ui-kit/_alerts.scss b/src/assets/scss/now-ui-kit/_alerts.scss index 901560b..d7eecbc 100755 --- a/src/assets/scss/now-ui-kit/_alerts.scss +++ b/src/assets/scss/now-ui-kit/_alerts.scss @@ -1,61 +1,60 @@ // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. -.alert{ - border: 0; - border-radius: 0; +.alert { + border: 0; + border-radius: 0; + color: $white-color; + padding-top: 0.9rem; + padding-bottom: 0.9rem; + + .alert-link { color: $white-color; - padding-top: .9rem; - padding-bottom: .9rem; - - .alert-link{ - color: $white-color; - opacity: .8; - } - - &.alert-success{ - background-color: $success-color-alert; - } - - &.alert-danger{ - background-color: $danger-color-alert; - } - - &.alert-warning{ - background-color: $warning-color-alert; - } - - &.alert-info{ - background-color: $info-color-alert; - } - - &.alert-primary{ - background-color: $primary-color-alert; - } - - .alert-icon{ - display: block; - float: left; - margin-right: 15px; - margin-top: -1px; - } - - strong{ - text-transform: uppercase; - font-size: 12px; - } - - i.fa, - i.now-ui-icons{ - font-size: 20px; - } - - .close{ - color: $white-color; - opacity: .9; - text-shadow: none; - line-height: 0; - outline: 0; - display: inline-block; - cursor: pointer; - - } + opacity: 0.8; + } + + &.alert-success { + background-color: $success-color-alert; + } + + &.alert-danger { + background-color: $danger-color-alert; + } + + &.alert-warning { + background-color: $warning-color-alert; + } + + &.alert-info { + background-color: $info-color-alert; + } + + &.alert-primary { + background-color: $primary-color-alert; + } + + .alert-icon { + display: block; + float: left; + margin-right: 15px; + margin-top: -1px; + } + + strong { + text-transform: uppercase; + font-size: 12px; + } + + i.fa, + i.now-ui-icons { + font-size: 20px; + } + + .close { + color: $white-color; + opacity: 0.9; + text-shadow: none; + line-height: 0; + outline: 0; + display: inline-block; + cursor: pointer; + } } diff --git a/src/assets/scss/now-ui-kit/_badges.scss b/src/assets/scss/now-ui-kit/_badges.scss index 9dd0fc1..112abd0 100755 --- a/src/assets/scss/now-ui-kit/_badges.scss +++ b/src/assets/scss/now-ui-kit/_badges.scss @@ -1,47 +1,46 @@ /* badges */ -.badge{ - border-radius: 8px; - padding: 4px 8px; - text-transform: uppercase; - font-size: $font-size-mini; - line-height: 12px; - background-color: $transparent-bg; - border: $border; - margin-bottom: 5px; - color: $white-color; - border-radius: $border-radius-extreme; - - &:hover, - &:focus{ - text-decoration: none; - } +.badge { + border-radius: 8px; + padding: 4px 8px; + text-transform: uppercase; + font-size: $font-size-mini; + line-height: 12px; + background-color: $transparent-bg; + border: $border; + margin-bottom: 5px; + color: $white-color; + border-radius: $border-radius-extreme; + &:hover, + &:focus { + text-decoration: none; + } } -.badge-icon{ - padding: 0.4em 0.55em; - i{ - font-size: 0.8em; - } +.badge-icon { + padding: 0.4em 0.55em; + i { + font-size: 0.8em; + } } -.badge-default{ - @include badge-color($default-color); +.badge-default { + @include badge-color($default-color); } -.badge-primary{ - @include badge-color($primary-color); +.badge-primary { + @include badge-color($primary-color); } -.badge-info{ - @include badge-color($info-color); +.badge-info { + @include badge-color($info-color); } -.badge-success{ - @include badge-color($success-color); +.badge-success { + @include badge-color($success-color); } -.badge-warning{ - @include badge-color($warning-color); +.badge-warning { + @include badge-color($warning-color); } -.badge-danger{ - @include badge-color($danger-color); +.badge-danger { + @include badge-color($danger-color); } -.badge-neutral{ - @include badge-color($white-color); - color: inherit !important; +.badge-neutral { + @include badge-color($white-color); + color: inherit !important; } diff --git a/src/assets/scss/now-ui-kit/_buttons.scss b/src/assets/scss/now-ui-kit/_buttons.scss index eddc2f5..670ed30 100755 --- a/src/assets/scss/now-ui-kit/_buttons.scss +++ b/src/assets/scss/now-ui-kit/_buttons.scss @@ -1,153 +1,174 @@ .btn, -.navbar .navbar-nav > a.btn{ - border-width: $border-thick; - font-weight: $font-weight-normal; - font-size: $font-size-small; - line-height: $line-height; - margin: 10px 1px; - border: none; - border-radius: $border-radius-small; - padding: $padding-btn-vertical $padding-btn-horizontal; - cursor: pointer; - - @include btn-styles($default-color, $default-states-color); +.navbar .navbar-nav > a.btn { + border-width: $border-thick; + font-weight: $font-weight-normal; + font-size: $font-size-small; + line-height: $line-height; + margin: 10px 1px; + border: none; + border-radius: $border-radius-small; + padding: $padding-btn-vertical $padding-btn-horizontal; + cursor: pointer; + + @include btn-styles($default-color, $default-states-color); - &:hover, - &:focus{ - @include opacity(1); - outline: 0 !important; + &:hover, + &:focus { + @include opacity(1); + outline: 0 !important; + } + &:active, + &.active, + .open > &.dropdown-toggle { + @include box-shadow(none); + outline: 0 !important; + } + + &.btn-icon { + // see above for color variations + height: $btn-icon-size-regular; + min-width: $btn-icon-size-regular; + width: $btn-icon-size-regular; + padding: 0; + font-size: $btn-icon-font-size-regular; + overflow: hidden; + position: relative; + line-height: normal; + + &.btn-simple { + padding: 0; } - &:active, - &.active, - .open > &.dropdown-toggle { - @include box-shadow(none); - outline: 0 !important; + + &.btn-sm { + height: $btn-icon-size-small; + min-width: $btn-icon-size-small; + width: $btn-icon-size-small; + + i.fab, + i.now-ui-icons { + font-size: $btn-icon-font-size-small; + } } - &.btn-icon { - // see above for color variations - height: $btn-icon-size-regular; - min-width: $btn-icon-size-regular; - width: $btn-icon-size-regular; - padding: 0; - font-size: $btn-icon-font-size-regular; - overflow: hidden; - position: relative; - line-height: normal; - - &.btn-simple{ - padding: 0; - } - - &.btn-sm{ - height: $btn-icon-size-small; - min-width: $btn-icon-size-small; - width: $btn-icon-size-small; - - i.fab, - i.now-ui-icons{ - font-size: $btn-icon-font-size-small; - } - } - - &.btn-lg{ - height: $btn-icon-size-lg; - min-width: $btn-icon-size-lg; - width: $btn-icon-size-lg; - - i.now-ui-icons, - i.fab{ - font-size: $btn-icon-font-size-lg; - } - } - - &:not(.btn-footer) i.now-ui-icons, - &:not(.btn-footer) i.fab{ - position: absolute; - top: 50%; - left: 50%; - transform: translate(-12px, -12px); - line-height: 1.5626rem; - width: 23px; - } + &.btn-lg { + height: $btn-icon-size-lg; + min-width: $btn-icon-size-lg; + width: $btn-icon-size-lg; + i.now-ui-icons, + i.fab { + font-size: $btn-icon-font-size-lg; + } } - &:not(.btn-icon) .now-ui-icons{ - position: relative; - top: 1px; + &:not(.btn-footer) i.now-ui-icons, + &:not(.btn-footer) i.fab { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-12px, -12px); + line-height: 1.5626rem; + width: 23px; } + } + + &:not(.btn-icon) .now-ui-icons { + position: relative; + top: 1px; + } } // Apply the mixin to the buttons // .btn-default { @include btn-styles($default-color, $default-states-color); } -.btn-primary { @include btn-styles($primary-color, $primary-states-color); } -.btn-success { @include btn-styles($success-color, $success-states-color); } -.btn-info { @include btn-styles($info-color, $info-states-color); } -.btn-warning { @include btn-styles($warning-color, $warning-states-color); } -.btn-danger { @include btn-styles($danger-color, $danger-states-color); } -.btn-neutral { @include btn-styles($white-color, $white-color); } - -.btn-round{ - border-width: $border-thin; - border-radius: $btn-round-radius !important; - padding: $padding-btn-vertical $padding-round-horizontal; - - &.btn-simple{ - padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1; - } +.btn-primary { + @include btn-styles($primary-color, $primary-states-color); } -.btn-simple{ - border: $border; - border-color: $default-color; +.btn-success { + @include btn-styles($success-color, $success-states-color); +} +.btn-info { + @include btn-styles($info-color, $info-states-color); +} +.btn-warning { + @include btn-styles($warning-color, $warning-states-color); +} +.btn-danger { + @include btn-styles($danger-color, $danger-states-color); +} +.btn-neutral { + @include btn-styles($white-color, $white-color); +} + +.btn-round { + border-width: $border-thin; + border-radius: $btn-round-radius !important; + padding: $padding-btn-vertical $padding-round-horizontal; + + &.btn-simple { padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1; - background-color: $transparent-bg; + } +} +.btn-simple { + border: $border; + border-color: $default-color; + padding: $padding-btn-vertical - 1 $padding-round-horizontal - 1; + background-color: $transparent-bg; } .btn-simple, -.btn-link{ - &.disabled, - &:disabled, - &[disabled], - fieldset[disabled] & { - &, - &:hover, - &:focus, - &.focus, - &:active, - &.active { - background-color: $transparent-bg; - } +.btn-link { + &.disabled, + &:disabled, + &[disabled], + fieldset[disabled] & { + &, + &:hover, + &:focus, + &.focus, + &:active, + &.active { + background-color: $transparent-bg; } + } } -.btn-lg{ - @include btn-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $border-radius-large); +.btn-lg { + @include btn-size( + $padding-large-vertical, + $padding-large-horizontal, + $font-size-large, + $border-radius-large + ); } -.btn-sm{ - @include btn-size($padding-small-vertical, $padding-small-horizontal, $font-size-base, $border-radius-small); +.btn-sm { + @include btn-size( + $padding-small-vertical, + $padding-small-horizontal, + $font-size-base, + $border-radius-small + ); } -.btn-link{ - border: $none; - padding: $padding-base-vertical $padding-base-horizontal; - background-color: $transparent-bg; +.btn-link { + border: $none; + padding: $padding-base-vertical $padding-base-horizontal; + background-color: $transparent-bg; } .btn-wd { - min-width: 140px; + min-width: 140px; } -.btn-group.select{ - width: 100%; +.btn-group.select { + width: 100%; } -.btn-group.select .btn{ - text-align: left; +.btn-group.select .btn { + text-align: left; } -.btn-group.select .caret{ - position: absolute; - top: 50%; - margin-top: -1px; - right: 8px; +.btn-group.select .caret { + position: absolute; + top: 50%; + margin-top: -1px; + right: 8px; } .btn-facebook { @@ -161,7 +182,6 @@ } .btn-twitter { - &, &:hover, &focus, diff --git a/src/assets/scss/now-ui-kit/_cards.scss b/src/assets/scss/now-ui-kit/_cards.scss index 5357197..4e4b587 100755 --- a/src/assets/scss/now-ui-kit/_cards.scss +++ b/src/assets/scss/now-ui-kit/_cards.scss @@ -1,4 +1,4 @@ -.card{ +.card { border: 0; border-radius: $border-radius-small; display: inline-block; @@ -7,7 +7,7 @@ margin-bottom: 30px; box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2); - .card-header{ + .card-header { background-color: $transparent-bg; border-bottom: 0; background-color: transparent; @@ -15,30 +15,30 @@ padding: 0; } - .card-footer{ + .card-footer { padding: 0; margin-top: 15px; background-color: $transparent-bg; - border:0; + border: 0; } - &[data-background-color="orange"]{ - background-color: $primary-color; + &[data-background-color="orange"] { + background-color: $primary-color; } - &[data-background-color="red"]{ - background-color: $danger-color; + &[data-background-color="red"] { + background-color: $danger-color; } - &[data-background-color="yellow"]{ - background-color: $warning-color; + &[data-background-color="yellow"] { + background-color: $warning-color; } - &[data-background-color="blue"]{ - background-color: $info-color; + &[data-background-color="blue"] { + background-color: $info-color; } - &[data-background-color="green"]{ - background-color: darken($success-color, 5%); + &[data-background-color="green"] { + background-color: darken($success-color, 5%); } } diff --git a/src/assets/scss/now-ui-kit/_carousel.scss b/src/assets/scss/now-ui-kit/_carousel.scss index 82ee72c..6416c23 100755 --- a/src/assets/scss/now-ui-kit/_carousel.scss +++ b/src/assets/scss/now-ui-kit/_carousel.scss @@ -1,19 +1,19 @@ // display flex was causing errors .carousel-item-next, .carousel-item-prev, -.carousel-item.active{ - display: block; +.carousel-item.active { + display: block; } -.carousel{ - .carousel-inner{ - box-shadow: $box-shadow-raised; - border-radius: $border-radius-small; - } +.carousel { + .carousel-inner { + box-shadow: $box-shadow-raised; + border-radius: $border-radius-small; + } - .card { - max-width: 650px; - margin: 60px auto; - display: block; - } + .card { + max-width: 650px; + margin: 60px auto; + display: block; + } } diff --git a/src/assets/scss/now-ui-kit/_checkboxes-radio.scss b/src/assets/scss/now-ui-kit/_checkboxes-radio.scss index 8ae34e7..a438f3d 100755 --- a/src/assets/scss/now-ui-kit/_checkboxes-radio.scss +++ b/src/assets/scss/now-ui-kit/_checkboxes-radio.scss @@ -1,9 +1,9 @@ -.form-check{ - margin-top: .65rem; - padding-left: 0; +.form-check { + margin-top: 0.65rem; + padding-left: 0; } -.form-check .form-check-label{ +.form-check .form-check-label { display: inline-block; position: relative; cursor: pointer; @@ -16,12 +16,12 @@ -ms-transition: color 0.3s linear; transition: color 0.3s linear; } -.radio .form-check-sign{ - padding-left: 28px; +.radio .form-check-sign { + padding-left: 28px; } .form-check .form-check-sign::before, -.form-check .form-check-sign::after{ +.form-check .form-check-sign::after { content: " "; display: inline-block; position: absolute; @@ -40,8 +40,8 @@ transition: opacity 0.3s linear; } - .form-check .form-check-sign::after{ - font-family: 'Nucleo Outline'; +.form-check .form-check-sign::after { + font-family: "Nucleo Outline"; content: "\ea22"; top: 0px; text-align: center; @@ -54,33 +54,33 @@ .form-check.disabled .form-check-label, .form-check.disabled .form-check-label { - color: $dark-gray; - opacity: .5; - cursor: not-allowed; + color: $dark-gray; + opacity: 0.5; + cursor: not-allowed; } .form-check input[type="checkbox"], -.radio input[type="radio"]{ +.radio input[type="radio"] { opacity: 0; position: absolute; visibility: hidden; } -.form-check input[type="checkbox"]:checked + .form-check-sign::after{ +.form-check input[type="checkbox"]:checked + .form-check-sign::after { opacity: 1; } .form-control input[type="checkbox"]:disabled + .form-check-sign::before, -.checkbox input[type="checkbox"]:disabled + .form-check-sign::after{ - cursor: not-allowed; +.checkbox input[type="checkbox"]:disabled + .form-check-sign::after { + cursor: not-allowed; } .form-check input[type="checkbox"]:disabled + .form-check-sign, -.form-check input[type="radio"]:disabled + .form-check-sign{ - pointer-events: none; +.form-check input[type="radio"]:disabled + .form-check-sign { + pointer-events: none; } .form-check-radio .form-check-sign::before, -.form-check-radio .form-check-sign::after{ +.form-check-radio .form-check-sign::after { content: " "; width: 20px; height: 20px; @@ -100,20 +100,20 @@ .form-check-radio input[type="radio"] + .form-check-sign:after, .form-check-radio input[type="radio"] { - opacity: 0; + opacity: 0; } .form-check-radio input[type="radio"]:checked + .form-check-sign::after { - width: 4px; - height: 4px; - background-color: $dark-background; - border-color: $dark-background; - top: 11px; - left: 11px; - opacity: 1; + width: 4px; + height: 4px; + background-color: $dark-background; + border-color: $dark-background; + top: 11px; + left: 11px; + opacity: 1; } -.form-check-radio input[type="radio"]:checked + .form-check-sign::after{ - opacity: 1; +.form-check-radio input[type="radio"]:checked + .form-check-sign::after { + opacity: 1; } .form-check-radio input[type="radio"]:disabled + .form-check-sign { diff --git a/src/assets/scss/now-ui-kit/_dropdown.scss b/src/assets/scss/now-ui-kit/_dropdown.scss index 0e8413a..e15a7ee 100755 --- a/src/assets/scss/now-ui-kit/_dropdown.scss +++ b/src/assets/scss/now-ui-kit/_dropdown.scss @@ -1,118 +1,143 @@ -.dropdown-menu{ - border: 0; - box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2); - border-radius: $border-radius-extra-small; - @include transition($fast-transition-time, $transition-linear); - font-size: $font-size-base; - - &.dropdown-menu-right{ - &:before{ - left:auto; - right: 10px; - } +.dropdown-menu { + border: 0; + box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2); + border-radius: $border-radius-extra-small; + @include transition($fast-transition-time, $transition-linear); + font-size: $font-size-base; + + &.dropdown-menu-right { + &:before { + left: auto; + right: 10px; } + } + + .dropdown & { + @include transform-translate-y-dropdown(-25px); + visibility: hidden; + display: block; + @include opacity(0); + top: 100% !important; + } + + .dropdown.show &, + &.open { + @include opacity(1); + visibility: visible; + @include transform-translate-y-dropdown(0px); + } + + .dropdown-item, + .bootstrap-select &.inner li a { + font-size: $font-size-small; + padding-top: 0.6rem; + padding-bottom: 0.6rem; + margin-top: 5px; + @include transition($fast-transition-time, $transition-linear); - .dropdown &{ - @include transform-translate-y-dropdown(-25px); - visibility: hidden; - display: block; - @include opacity(0); - top: 100% !important; + &:hover, + &:focus { + background-color: $opacity-gray-3; } - - .dropdown.show &, - &.open{ - @include opacity(1); - visibility: visible; - @include transform-translate-y-dropdown(0px); + &.active { + background-color: $primary-color; + color: white; } - .dropdown-item, - .bootstrap-select &.inner li a{ - font-size: $font-size-small; - padding-top: .6rem; - padding-bottom: .6rem; - margin-top: 5px; - @include transition($fast-transition-time, $transition-linear); + &.disabled, + &:disabled { + color: $default-color-opacity; &:hover, - &:focus{ - background-color: $opacity-gray-3; - } - &.active { - background-color: $primary-color; - color: white; - } - - &.disabled, - &:disabled{ - color: $default-color-opacity; - - &:hover, - &:focus{ - background-color: transparent; - } + &:focus { + background-color: transparent; } } + } + + &:before { + display: inline-block; + position: absolute; + width: 0; + height: 0; + vertical-align: middle; + content: ""; + top: -5px; + left: 10px; + right: auto; + color: $white-color; + border-bottom: 0.4em solid; + border-right: 0.4em solid transparent; + border-left: 0.4em solid transparent; + } + + .dropdown-divider { + background-color: $opacity-gray-5; + } + + .dropdown-header:not([href]):not([tabindex]) { + color: $default-color-opacity; + font-size: $font-size-mini; + text-transform: uppercase; + font-weight: $font-weight-bold; + } + + &.dropdown-primary { + @include dropdown-colors( + darken($primary-color, 3%), + $opacity-8, + $white-color, + $opacity-2 + ); + } + + &.dropdown-info { + @include dropdown-colors( + darken($info-color, 3%), + $opacity-8, + $white-color, + $opacity-2 + ); + } + + &.dropdown-danger { + @include dropdown-colors( + darken($danger-color, 3%), + $opacity-8, + $white-color, + $opacity-2 + ); + } + + &.dropdown-success { + @include dropdown-colors( + darken($success-color, 3%), + $opacity-8, + $white-color, + $opacity-2 + ); + } + + &.dropdown-warning { + @include dropdown-colors( + darken($warning-color, 3%), + $opacity-8, + $white-color, + $opacity-2 + ); + } +} +.button-dropdown { + padding-right: $padding-base-horizontal; + cursor: pointer; - &:before{ - display: inline-block; - position: absolute; - width: 0; - height: 0; - vertical-align: middle; - content: ""; - top: -5px; - left: 10px; - right: auto; - color: $white-color; - border-bottom: .4em solid; - border-right: .4em solid transparent; - border-left: .4em solid transparent; - } - - .dropdown-divider{ - background-color: $opacity-gray-5; - } - - .dropdown-header:not([href]):not([tabindex]){ - color: $default-color-opacity; - font-size: $font-size-mini; - text-transform: uppercase; - font-weight: $font-weight-bold; - } - - &.dropdown-primary{ - @include dropdown-colors(darken($primary-color, 3%),$opacity-8,$white-color, $opacity-2); - } - - &.dropdown-info{ - @include dropdown-colors(darken($info-color, 3%),$opacity-8,$white-color, $opacity-2); - } - - &.dropdown-danger{ - @include dropdown-colors(darken($danger-color, 3%),$opacity-8,$white-color, $opacity-2); - } - - &.dropdown-success{ - @include dropdown-colors(darken($success-color, 3%),$opacity-8,$white-color, $opacity-2); - } + & .dropdown-toggle { + padding-top: $padding-base-vertical; + padding-bottom: $padding-base-vertical; + display: block; - &.dropdown-warning{ - @include dropdown-colors(darken($warning-color, 3%),$opacity-8,$white-color, $opacity-2); - } -} -.button-dropdown{ - padding-right: $padding-base-horizontal; - cursor: pointer; - - & .dropdown-toggle{ - padding-top: $padding-base-vertical; - padding-bottom: $padding-base-vertical; - display: block; - - &:after{ - display: none; - } + &:after { + display: none; } + } } diff --git a/src/assets/scss/now-ui-kit/_example-pages.scss b/src/assets/scss/now-ui-kit/_example-pages.scss index 90ed0a7..369fe67 100755 --- a/src/assets/scss/now-ui-kit/_example-pages.scss +++ b/src/assets/scss/now-ui-kit/_example-pages.scss @@ -1,215 +1,211 @@ // style for the landing page -.index-page{ - .page-header{ - height: 125vh; - - .container{ - > .content-center{ - top: 37%; - } - } - - .category-absolute{ - position: absolute; - top: 100vh; - margin-top: -60px; - padding: 0 15px; - width: 100%; - color: rgba(255,255,255,.5); - } - } -} -.landing-page{ - - .header{ - height: 100vh; - position: relative; - - .container{ - padding-top: 26vh; - color: #FFFFFF; - z-index: 2; - position: relative; - } - - .share{ - margin-top: 150px; - } - h1{ - font-weight: 600; - } - .title{ - color: $white-color; - } - } - - .section-team{ - .team .team-player img{ - max-width: 100px; - } - - .team-player{ - margin-bottom: 15px; - } +.index-page { + .page-header { + height: 125vh; + + .container { + > .content-center { + top: 37%; + } } - .section-contact-us{ - .title{ - margin-bottom: 15px; - } - - .description{ - margin-bottom: 30px; - } - - .input-group, - .send-button, - .textarea-container{ - padding: 0 40px; - } - - .textarea-container{ - margin: 40px 0; - } - - a.btn{ - margin-top: 35px; - } + .category-absolute { + position: absolute; + top: 100vh; + margin-top: -60px; + padding: 0 15px; + width: 100%; + color: rgba(255, 255, 255, 0.5); } + } } - -// style for the profile page -.profile-page{ - - .page-header{ - min-height: 550px; +.landing-page { + .header { + height: 100vh; + position: relative; + + .container { + padding-top: 26vh; + color: #ffffff; + z-index: 2; + position: relative; } - .profile-container{ - color: #FFFFFF; + .share { + margin-top: 150px; } - .photo-container{ - width: 123px; - height: 123px; - border-radius: 50%; - overflow: hidden; - margin: 0 auto; - box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.3); + h1 { + font-weight: 600; } - - .title{ - text-align: center; - margin-top: 30px; + .title { + color: $white-color; } + } - .description, - .category{ - text-align: center; + .section-team { + .team .team-player img { + max-width: 100px; } - h5.description{ - max-width: 700px; - margin: 20px auto 75px; + .team-player { + margin-bottom: 15px; } + } - .nav-align-center{ - margin-top: 30px; + .section-contact-us { + .title { + margin-bottom: 15px; } - .content{ - max-width: 450px; - margin: 0 auto; - - .social-description{ - display: inline-block; - max-width: 150px; - width: 145px; - text-align: center; - margin: 15px 0 0px; - - h2{ - margin-bottom: 15px; - } - } + .description { + margin-bottom: 30px; } - .button-container{ - text-align: center; - margin-top: -106px; + .input-group, + .send-button, + .textarea-container { + padding: 0 40px; } - .collections{ - img{ - margin-bottom: 30px; - } + .textarea-container { + margin: 40px 0; } - .gallery{ - margin-top: 45px; - padding-bottom: 50px; + a.btn { + margin-top: 35px; } + } } -.section-full-page{ +// style for the profile page +.profile-page { + .page-header { + min-height: 550px; + } - &:after, - &:before{ - display: block; - content: ""; - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - z-index: 2; - } + .profile-container { + color: #ffffff; + } + .photo-container { + width: 123px; + height: 123px; + border-radius: 50%; + overflow: hidden; + margin: 0 auto; + box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.3); + } - &:before{ - background-color: rgba(0,0,0,.5); - } + .title { + text-align: center; + margin-top: 30px; + } - &[filter-color="purple"], - &[filter-color="primary"]{ - &:after{ - @include linear-gradient(rgba($light-gray,.26), rgba($primary-color,.95)); + .description, + .category { + text-align: center; + } - } + h5.description { + max-width: 700px; + margin: 20px auto 75px; + } - } + .nav-align-center { + margin-top: 30px; + } - &[data-image]:after{ - opacity: .5; - } + .content { + max-width: 450px; + margin: 0 auto; - > .content, - > .footer{ - position: relative; - z-index: 4; - } + .social-description { + display: inline-block; + max-width: 150px; + width: 145px; + text-align: center; + margin: 15px 0 0px; - > .content{ - min-height: calc(100vh - 80px); + h2 { + margin-bottom: 15px; + } } + } - .full-page-background{ - position: absolute; - z-index: 1; - height: 100%; - width: 100%; - display: block; - top: 0; - left: 0; - background-size: cover; - background-position: center center; + .button-container { + text-align: center; + margin-top: -106px; + } + .collections { + img { + margin-bottom: 30px; } + } + + .gallery { + margin-top: 45px; + padding-bottom: 50px; + } +} - .footer nav > ul a:not(.btn), - .footer, - .footer .copyright a{ - color: $white-color; +.section-full-page { + &:after, + &:before { + display: block; + content: ""; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 2; + } + + &:before { + background-color: rgba(0, 0, 0, 0.5); + } + + &[filter-color="purple"], + &[filter-color="primary"] { + &:after { + @include linear-gradient( + rgba($light-gray, 0.26), + rgba($primary-color, 0.95) + ); } + } + + &[data-image]:after { + opacity: 0.5; + } + > .content, + > .footer { + position: relative; + z-index: 4; + } + + > .content { + min-height: calc(100vh - 80px); + } + + .full-page-background { + position: absolute; + z-index: 1; + height: 100%; + width: 100%; + display: block; + top: 0; + left: 0; + background-size: cover; + background-position: center center; + } + + .footer nav > ul a:not(.btn), + .footer, + .footer .copyright a { + color: $white-color; + } } .login-page, @@ -227,47 +223,51 @@ } } -.login-page{ - - +.login-page { + .card-login { + border-radius: $border-radius-large; + padding-bottom: $padding-base-horizontal; + max-width: 320px; - .card-login{ - border-radius: $border-radius-large; - padding-bottom: $padding-base-horizontal; - max-width: 320px; - - .btn-wd{ - min-width: 180px; - } - - .logo-container{ - width: 65px; - margin: 0 auto; - margin-bottom: 55px; - - img{ - width: 100%; - } - } + .btn-wd { + min-width: 180px; + } - .input-group:last-child{ - margin-bottom: 40px; - } + .logo-container { + width: 65px; + margin: 0 auto; + margin-bottom: 55px; - &.card-plain{ - @include input-coloured-bg($opacity-5, $white-color, $white-color, $transparent-bg, $opacity-1, $opacity-2); + img { + width: 100%; + } + } - .input-group-text, - .form-group.no-border .input-group-text, - .input-group.no-border .input-group-text{ - color: $opacity-8; - } - } + .input-group:last-child { + margin-bottom: 40px; } - .link{ - font-size: 10px; - color: $white-color; - text-decoration: none; + &.card-plain { + @include input-coloured-bg( + $opacity-5, + $white-color, + $white-color, + $transparent-bg, + $opacity-1, + $opacity-2 + ); + + .input-group-text, + .form-group.no-border .input-group-text, + .input-group.no-border .input-group-text { + color: $opacity-8; + } } + } + + .link { + font-size: 10px; + color: $white-color; + text-decoration: none; + } } diff --git a/src/assets/scss/now-ui-kit/_footers.scss b/src/assets/scss/now-ui-kit/_footers.scss index a87d8ae..4e83b92 100755 --- a/src/assets/scss/now-ui-kit/_footers.scss +++ b/src/assets/scss/now-ui-kit/_footers.scss @@ -1,44 +1,44 @@ -.footer{ - padding: 24px 0; +.footer { + padding: 24px 0; - &.footer-default{ - background-color: #f2f2f2; - } + &.footer-default { + background-color: #f2f2f2; + } - nav{ - display: inline-block; - float: left; - } + nav { + display: inline-block; + float: left; + } - ul{ - margin-bottom: 0; - padding: 0; - list-style: none; - - li{ - display: inline-block; - - a{ - color: inherit; - padding: $padding-base-vertical; - font-size: $font-size-small; - text-transform: uppercase; - text-decoration: none; - - &:hover{ - text-decoration: none; - } - } - } - } + ul { + margin-bottom: 0; + padding: 0; + list-style: none; + + li { + display: inline-block; - .copyright{ + a { + color: inherit; + padding: $padding-base-vertical; font-size: $font-size-small; - } + text-transform: uppercase; + text-decoration: none; - &:after{ - display: table; - clear: both; - content: " "; + &:hover { + text-decoration: none; + } + } } + } + + .copyright { + font-size: $font-size-small; + } + + &:after { + display: table; + clear: both; + content: " "; + } } diff --git a/src/assets/scss/now-ui-kit/_images.scss b/src/assets/scss/now-ui-kit/_images.scss index d1bb4aa..be11606 100755 --- a/src/assets/scss/now-ui-kit/_images.scss +++ b/src/assets/scss/now-ui-kit/_images.scss @@ -1,7 +1,7 @@ -img{ - max-width: 100%; - border-radius: 1px; +img { + max-width: 100%; + border-radius: 1px; } -.img-raised{ - box-shadow: $box-shadow-raised; +.img-raised { + box-shadow: $box-shadow-raised; } diff --git a/src/assets/scss/now-ui-kit/_inputs.scss b/src/assets/scss/now-ui-kit/_inputs.scss index 51175c6..35daef3 100755 --- a/src/assets/scss/now-ui-kit/_inputs.scss +++ b/src/assets/scss/now-ui-kit/_inputs.scss @@ -1,230 +1,231 @@ -@include form-control-placeholder($default-color, .8); +@include form-control-placeholder($default-color, 0.8); .form-control { - background-color: $transparent-bg; - border: 1px solid $light-gray; - border-radius: $btn-round-radius; - color: $black-color; - line-height: normal; - font-size: $font-size-small; - height: 100%; - @include transition-input-focus-color(); - @include box-shadow(none); + background-color: $transparent-bg; + border: 1px solid $light-gray; + border-radius: $btn-round-radius; + color: $black-color; + line-height: normal; + font-size: $font-size-small; + height: 100%; + @include transition-input-focus-color(); + @include box-shadow(none); - .has-success &{ - border-color: $light-gray; - } + .has-success & { + border-color: $light-gray; + } - &:focus{ - border: 1px solid $primary-color; - @include box-shadow(none); - outline: 0 !important; - color: $black-color; - - & + .input-group-text, - & ~ .input-group-text{ - border: 1px solid $primary-color; - border-left: none; - background-color: $transparent-bg; - } - } + &:focus { + border: 1px solid $primary-color; + @include box-shadow(none); + outline: 0 !important; + color: $black-color; - .has-success &, - .has-error &, - .has-success &:focus, - .has-error &:focus{ - @include box-shadow(none); + & + .input-group-text, + & ~ .input-group-text { + border: 1px solid $primary-color; + border-left: none; + background-color: $transparent-bg; } + } - .has-success &:focus{ - border-color: lighten($success-color, 5%); - } + .has-success &, + .has-error &, + .has-success &:focus, + .has-error &:focus { + @include box-shadow(none); + } + .has-success &:focus { + border-color: lighten($success-color, 5%); + } - .has-danger &, - .has-success &{ - &.form-control-success, - &.form-control-danger{ - background-image: none; - } + .has-danger &, + .has-success & { + &.form-control-success, + &.form-control-danger { + background-image: none; } + } - .has-danger &{ - border-color: lighten($danger-color, 30%); - color: $danger-color; - background-color: rgba(222,222,222, .1); + .has-danger & { + border-color: lighten($danger-color, 30%); + color: $danger-color; + background-color: rgba(222, 222, 222, 0.1); - &:focus{ - background-color: $white-color; - } + &:focus { + background-color: $white-color; } + } - & + .form-control-feedback{ - border-radius: $border-radius-large; - font-size: $font-size-base; - margin-top: -7px; - position: absolute; - right: 10px; - top: 50%; - vertical-align: middle; - } + & + .form-control-feedback { + border-radius: $border-radius-large; + font-size: $font-size-base; + margin-top: -7px; + position: absolute; + right: 10px; + top: 50%; + vertical-align: middle; + } - .open &{ - border-radius: $border-radius-large $border-radius-large 0 0; - border-bottom-color: transparent; - } + .open & { + border-radius: $border-radius-large $border-radius-large 0 0; + border-bottom-color: transparent; + } - // & + .input-group-text{ - // background-color: $white-bg; - // } + // & + .input-group-text{ + // background-color: $white-bg; + // } } .has-success, -.has-danger{ - &:after{ - font-family: 'Nucleo Outline'; - content: "\ea22"; - display: inline-block; - position: absolute; - right: 20px; - top: 12px; - color: $success-color; - font-size: 11px; - } +.has-danger { + &:after { + font-family: "Nucleo Outline"; + content: "\ea22"; + display: inline-block; + position: absolute; + right: 20px; + top: 12px; + color: $success-color; + font-size: 11px; + } - &.input-lg{ - &:after{ - font-size: 13px; - top: 13px; - } + &.input-lg { + &:after { + font-size: 13px; + top: 13px; } + } } -.has-danger{ - &:after{ - content: "\ea53"; - color: $danger-color; - } +.has-danger { + &:after { + content: "\ea53"; + color: $danger-color; + } } @include input-lg-padding($padding-large-vertical, $padding-input-horizontal); @include input-base-padding($padding-input-vertical, $padding-input-horizontal); .form-group.no-border, -.input-group.no-border{ - .form-control, - .form-control + .input-group-text{ - background-color: $opacity-gray-3; - border: medium none; - &:focus, - &:active, - &:active{ - border: medium none; - background-color: $opacity-gray-5; - } +.input-group.no-border { + .form-control, + .form-control + .input-group-text { + background-color: $opacity-gray-3; + border: medium none; + &:focus, + &:active, + &:active { + border: medium none; + background-color: $opacity-gray-5; } + } - .form-control{ - &:focus{ - & + .input-group-text{ - background-color: $opacity-gray-5; - } - } - } - .input-group-prepend{ - .input-group-text{ - background-color: $opacity-gray-3; - border: none; - border-left: transparent !important; + .form-control { + &:focus { + & + .input-group-text { + background-color: $opacity-gray-5; } } + } + .input-group-prepend { + .input-group-text { + background-color: $opacity-gray-3; + border: none; + border-left: transparent !important; + } + } - .input-group-append{ - margin-left: 0; - .input-group-text{ - background-color: $opacity-gray-3; - border: none; - border-right: transparent !important; - } + .input-group-append { + margin-left: 0; + .input-group-text { + background-color: $opacity-gray-3; + border: none; + border-right: transparent !important; } + } - &.input-group-focus{ - &.no-border{ - .input-group-text{ - background-color: $opacity-gray-5; - } - } + &.input-group-focus { + &.no-border { + .input-group-text { + background-color: $opacity-gray-5; + } } + } } -.has-error{ - .form-control-feedback, .control-label{ - color: $danger-color; - } +.has-error { + .form-control-feedback, + .control-label { + color: $danger-color; + } } -.has-success{ - .form-control-feedback, .control-label{ - color: $success-color; - } +.has-success { + .form-control-feedback, + .control-label { + color: $success-color; + } } .input-group-text { - background-color: $white-bg; - border: 1px solid $light-gray; - border-radius: $btn-round-radius; - color: $dark-background; + background-color: $white-bg; + border: 1px solid $light-gray; + border-radius: $btn-round-radius; + color: $dark-background; - @include transition-input-focus-color(); + @include transition-input-focus-color(); - .input-group-focus &{ - background-color: $white-bg; - border-color: $primary-color; - } + .input-group-focus & { + background-color: $white-bg; + border-color: $primary-color; + } - .has-success &, - .has-danger &{ - background-color: $white-color; - } - .has-danger .form-control:focus + &{ - color: $danger-color; - } - .has-success .form-control:focus + &{ - color: $success-color; - } + .has-success &, + .has-danger & { + background-color: $white-color; + } + .has-danger .form-control:focus + & { + color: $danger-color; + } + .has-success .form-control:focus + & { + color: $success-color; + } - & + .form-control, - & ~ .form-control{ - @include input-size($padding-base-vertical - 1, $padding-base-horizontal); - padding-left: 18px; - } + & + .form-control, + & ~ .form-control { + @include input-size($padding-base-vertical - 1, $padding-base-horizontal); + padding-left: 18px; + } - i{ - width: 17px; - } + i { + width: 17px; + } } .input-group, -.form-group{ - margin-bottom: 10px; - position: relative; +.form-group { + margin-bottom: 10px; + position: relative; } -.input-group[disabled]{ - .input-group-text{ - background-color: $light-gray; - } +.input-group[disabled] { + .input-group-text { + background-color: $light-gray; + } } .input-group, -.form-group{ - .input-group-prepend{ +.form-group { + .input-group-prepend { margin-right: 0; .input-group-text { - border-left: 1px solid #E3E3E3; + border-left: 1px solid #e3e3e3; } } .input-group-append .input-group-text { - border-right: 1px solid #E3E3E3; + border-right: 1px solid #e3e3e3; padding: 10px 18px 10px 0; } @@ -235,8 +236,8 @@ .input-group-append .input-group-text { border-right: 1px solid #f96332; } - &.no-border{ - .input-group-prepend .input-group-text{ + &.no-border { + .input-group-prepend .input-group-text { border-left: transparent; } } @@ -247,71 +248,72 @@ .input-group-text:first-child, .input-group-btn:first-child > .dropdown-toggle, .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) { - border-right: 0 none; + border-right: 0 none; } .input-group .form-control:last-child, .input-group-text:last-child, .input-group-btn:last-child > .dropdown-toggle, .input-group-btn:first-child > .btn:not(:first-child) { - border-left: 0 none; + border-left: 0 none; } -.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { - background-color: $light-gray; - color: $default-color; - cursor: not-allowed; +.form-control[disabled], +.form-control[readonly], +fieldset[disabled] .form-control { + background-color: $light-gray; + color: $default-color; + cursor: not-allowed; } -.input-group-btn .btn{ - border-width: $border-thin; - padding: $padding-btn-vertical $padding-base-horizontal; +.input-group-btn .btn { + border-width: $border-thin; + padding: $padding-btn-vertical $padding-base-horizontal; } -.input-group-btn .btn-default:not(.btn-fill){ - border-color: $medium-gray; +.input-group-btn .btn-default:not(.btn-fill) { + border-color: $medium-gray; } -.input-group-btn:last-child > .btn{ - margin-left: 0; +.input-group-btn:last-child > .btn { + margin-left: 0; } -textarea.form-control{ - max-width: 100%; - max-height: 80px; - padding: 10px 10px 0 0; - resize: none; - border: none; - border-bottom: 1px solid $light-gray; - border-radius: 0; - line-height: 2; - - &:focus, - &:active{ - border-left: none; - border-top: none; - border-right: none; - } +textarea.form-control { + max-width: 100%; + max-height: 80px; + padding: 10px 10px 0 0; + resize: none; + border: none; + border-bottom: 1px solid $light-gray; + border-radius: 0; + line-height: 2; + + &:focus, + &:active { + border-left: none; + border-top: none; + border-right: none; + } } .has-success, -.has-danger{ - - &.form-group .form-control, - &.form-group.no-border .form-control{ - padding-right: $padding-input-horizontal + 21; - } +.has-danger { + &.form-group .form-control, + &.form-group.no-border .form-control { + padding-right: $padding-input-horizontal + 21; + } } -.form.form-newsletter .form-group{ - float: left; - width: 78%; - margin-right: 2%; - margin-top: 9px; +.form.form-newsletter .form-group { + float: left; + width: 78%; + margin-right: 2%; + margin-top: 9px; } -.input-group .input-group-btn{ - padding: 0 12px; +.input-group .input-group-btn { + padding: 0 12px; } // Input files - hide actual input - requires specific markup in the sample. -.form-group input[type=file] { +.form-group input[type="file"] { opacity: 0; position: absolute; top: 0; diff --git a/src/assets/scss/now-ui-kit/_misc.scss b/src/assets/scss/now-ui-kit/_misc.scss index 5c5cac5..84f3c9e 100755 --- a/src/assets/scss/now-ui-kit/_misc.scss +++ b/src/assets/scss/now-ui-kit/_misc.scss @@ -1,15 +1,15 @@ -body{ - color: $black-color; - font-size: $font-size-base; - font-family: $sans-serif-family; - overflow-x: hidden; - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; +body { + color: $black-color; + font-size: $font-size-base; + font-family: $sans-serif-family; + overflow-x: hidden; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; } -.main{ - position: relative; - background: $white-color; +.main { + position: relative; + background: $white-color; } /* Animations */ .nav-pills .nav-link, @@ -17,66 +17,70 @@ body{ .navbar, .nav-tabs .nav-link, .tag, -.tag [data-role="remove"]{ - @include transition($general-transition-time, $transition-ease); +.tag [data-role="remove"] { + @include transition($general-transition-time, $transition-ease); } //transition for dropdown caret .card a, -.bootstrap-switch-label:before{ - @include transition($fast-transition-time, $transition-ease); +.bootstrap-switch-label:before { + @include transition($fast-transition-time, $transition-ease); } .dropdown-toggle:after, -[data-toggle="collapse"][data-parent="#accordion"] i{ - @include transition-on-prop(transform, $fast-transition-time, $transition-ease); +[data-toggle="collapse"][data-parent="#accordion"] i { + @include transition-on-prop( + transform, + $fast-transition-time, + $transition-ease + ); } .dropdown-toggle[aria-expanded="true"]:after, -[data-toggle="collapse"][data-parent="#accordion"][aria-expanded="true"] i{ - @include rotate-180(); +[data-toggle="collapse"][data-parent="#accordion"][aria-expanded="true"] i { + @include rotate-180(); } -.button-bar{ - display: block; - position: relative; - width: 22px; - height: 1px; - border-radius: 1px; - background: $white-bg; +.button-bar { + display: block; + position: relative; + width: 22px; + height: 1px; + border-radius: 1px; + background: $white-bg; - & + .button-bar{ - margin-top: 7px; - } + & + .button-bar { + margin-top: 7px; + } - &:nth-child(2){ - width: 17px; - } + &:nth-child(2) { + width: 17px; + } } -.separator-line{ - height: 2px; - width: 44px; - background-color: $default-color; - margin: 20px auto; +.separator-line { + height: 2px; + width: 44px; + background-color: $default-color; + margin: 20px auto; - &.separator-primary{ - background-color: $primary-color; - } + &.separator-primary { + background-color: $primary-color; + } } -.section-space{ - height: 62px; - display: block; +.section-space { + height: 62px; + display: block; } -.pull-left{ +.pull-left { float: left; } -.pull-right{ +.pull-right { float: right; } -.title-up{ +.title-up { text-transform: uppercase; } diff --git a/src/assets/scss/now-ui-kit/_modals.scss b/src/assets/scss/now-ui-kit/_modals.scss index e9b5f1c..3302340 100755 --- a/src/assets/scss/now-ui-kit/_modals.scss +++ b/src/assets/scss/now-ui-kit/_modals.scss @@ -3,7 +3,6 @@ // Now Ui Kit Design element Dialogs // -------------------------------------------------- .modal-content { - border-radius: $border-radius-small; border: none; box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.5); @@ -11,29 +10,29 @@ // Top section of the modal w/ title and dismiss .modal-header { border-bottom: none; - padding-top: 24px; - padding-right: 24px; + padding-top: 24px; + padding-right: 24px; padding-bottom: 0; - padding-left: 24px; + padding-left: 24px; - & button{ - position: absolute; - right: 27px; - top: 30px; - outline: 0; + & button { + position: absolute; + right: 27px; + top: 30px; + outline: 0; } - .title{ - margin-top: 5px; - margin-bottom: 0; + .title { + margin-top: 5px; + margin-bottom: 0; } } // Modal body // Where all modal content resides (sibling of .modal-header and .modal-footer) .modal-body { - padding-top: 24px; - padding-right: 24px; + padding-top: 24px; + padding-right: 24px; padding-bottom: 16px; - padding-left: 24px; + padding-left: 24px; line-height: 1.9; } // Footer (for actions) @@ -57,117 +56,115 @@ left: -5px; } } - } .modal-body + .modal-footer { padding-top: 0; } } .modal-backdrop { - background: rgba(0,0,0,0.3); + background: rgba(0, 0, 0, 0.3); } -.modal{ +.modal { + &.modal-mini { + p { + text-align: center; + } - &.modal-mini{ - p{ - text-align: center; - } + .modal-dialog { + max-width: 255px; + margin: 0 auto; + } - .modal-dialog{ - max-width: 255px; - margin: 0 auto; - } + .modal-profile { + width: 70px; + height: 70px; + background-color: $white-color; + border-radius: 50%; + text-align: center; + line-height: 5.7; + box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.3); + + i { + color: $primary-color; + font-size: 21px; + } - .modal-profile{ - width: 70px; - height: 70px; - background-color: $white-color; - border-radius: 50%; - text-align: center; - line-height: 5.7; - box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.3); - - i{ - color: $primary-color; - font-size: 21px; - } - - &[class*="modal-profile-"]{ - i{ - color: $white-color; - } - } - - &.modal-profile-primary{ - background-color: $primary-color; - } - - &.modal-profile-danger{ - background-color: $danger-color; - } - - &.modal-profile-warning{ - background-color: $warning-color; - } - - &.modal-profile-success{ - background-color: $success-color; - } - - &.modal-profile-info{ - background-color: $info-color; - } + &[class*="modal-profile-"] { + i { + color: $white-color; } + } - .modal-footer{ - button{ - text-transform: uppercase; + &.modal-profile-primary { + background-color: $primary-color; + } - &:first-child{ - opacity: .5; - } - } - } - } + &.modal-profile-danger { + background-color: $danger-color; + } - &.modal-default{ - @include modal-colors($white-color, $black-color); - } + &.modal-profile-warning { + background-color: $warning-color; + } - &.modal-primary{ - @include modal-colors($primary-color, $white-color); - } + &.modal-profile-success { + background-color: $success-color; + } - &.modal-danger{ - @include modal-colors($danger-color, $white-color); + &.modal-profile-info { + background-color: $info-color; + } } - &.modal-warning{ - @include modal-colors($warning-color, $white-color); - } + .modal-footer { + button { + text-transform: uppercase; - &.modal-success{ - @include modal-colors($success-color, $white-color); + &:first-child { + opacity: 0.5; + } + } } + } - &.modal-info{ - @include modal-colors($info-color, $white-color); - } + &.modal-default { + @include modal-colors($white-color, $black-color); + } - &.show.modal-mini .modal-dialog{ - -webkit-transform: translate(0,30%); - -o-transform: translate(0,30%); - transform: translate(0,30%); - } + &.modal-primary { + @include modal-colors($primary-color, $white-color); + } - .modal-header .close{ - color: $danger-color; - text-shadow: none; + &.modal-danger { + @include modal-colors($danger-color, $white-color); + } - &:hover, - &:focus{ - opacity: 1; - } + &.modal-warning { + @include modal-colors($warning-color, $white-color); + } + + &.modal-success { + @include modal-colors($success-color, $white-color); + } + + &.modal-info { + @include modal-colors($info-color, $white-color); + } + + &.show.modal-mini .modal-dialog { + -webkit-transform: translate(0, 30%); + -o-transform: translate(0, 30%); + transform: translate(0, 30%); + } + + .modal-header .close { + color: $danger-color; + text-shadow: none; + + &:hover, + &:focus { + opacity: 1; } + } } diff --git a/src/assets/scss/now-ui-kit/_navbar.scss b/src/assets/scss/now-ui-kit/_navbar.scss index dd71374..7f28710 100755 --- a/src/assets/scss/now-ui-kit/_navbar.scss +++ b/src/assets/scss/now-ui-kit/_navbar.scss @@ -1,200 +1,200 @@ -.navbar{ - padding-top: $navbar-padding-base; - padding-bottom: $navbar-padding-base; - min-height: 53px; - margin-bottom: 20px; - box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15); - - a{ - vertical-align: middle; - - &:not(.btn):not(.dropdown-item){ - color: $white-color; - } +.navbar { + padding-top: $navbar-padding-base; + padding-bottom: $navbar-padding-base; + min-height: 53px; + margin-bottom: 20px; + box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15); + + a { + vertical-align: middle; + + &:not(.btn):not(.dropdown-item) { + color: $white-color; } - - p{ - display: inline-block; - margin: 0; - line-height: 21px; - font-weight: inherit; - font-size: inherit; + } + + p { + display: inline-block; + margin: 0; + line-height: 21px; + font-weight: inherit; + font-size: inherit; + } + + .navbar-nav { + &.navbar-logo { + position: absolute; + left: 0; + right: 0; + margin: 0 auto; + width: 49px; + top: -4px; } - .navbar-nav{ - &.navbar-logo{ - position: absolute; - left: 0; - right: 0; - margin: 0 auto; - width: 49px; - top: -4px; - } - - .nav-link.btn{ - padding: $padding-btn-vertical $padding-btn-horizontal; + .nav-link.btn { + padding: $padding-btn-vertical $padding-btn-horizontal; - &.btn-lg{ - padding: $padding-large-vertical $padding-large-horizontal; - } + &.btn-lg { + padding: $padding-large-vertical $padding-large-horizontal; + } - &.btn-sm{ - padding: $padding-small-vertical $padding-small-horizontal; - } - } + &.btn-sm { + padding: $padding-small-vertical $padding-small-horizontal; + } + } - .nav-link:not(.btn){ - text-transform: uppercase; - font-size: $font-size-mini; - padding: $padding-base-vertical $padding-base-horizontal; - line-height: $line-height-nav-link; - - i.fab + p, - i.now-ui-icons + p{ - margin-left: 3px; - } - - i.fab, - i.now-ui-icons{ - font-size: 18px; - position: relative; - top: 3px; - text-align: center; - width: 21px; - } - - i.now-ui-icons{ - top: 4px; - font-size: 16px; - } - - &.profile-photo{ - .profile-photo-small{ - width: 27px; - height: 27px; - } - } - - &.disabled{ - opacity: .5; - color: $white-color; - } + .nav-link:not(.btn) { + text-transform: uppercase; + font-size: $font-size-mini; + padding: $padding-base-vertical $padding-base-horizontal; + line-height: $line-height-nav-link; + + i.fab + p, + i.now-ui-icons + p { + margin-left: 3px; + } + + i.fab, + i.now-ui-icons { + font-size: 18px; + position: relative; + top: 3px; + text-align: center; + width: 21px; + } + + i.now-ui-icons { + top: 4px; + font-size: 16px; + } + + &.profile-photo { + .profile-photo-small { + width: 27px; + height: 27px; } + } - .nav-item.active .nav-link:not(.btn), - .nav-item .nav-link:not(.btn):focus, - .nav-item .nav-link:not(.btn):hover, - .nav-item .nav-link:not(.btn):active{ - background-color: $opacity-2; - border-radius: $border-radius-small; - } + &.disabled { + opacity: 0.5; + color: $white-color; + } } - .logo-container{ - width: 27px; - height: 27px; - overflow: hidden; - margin: 0 auto; - border-radius: 50%; - border: 1px solid transparent; + .nav-item.active .nav-link:not(.btn), + .nav-item .nav-link:not(.btn):focus, + .nav-item .nav-link:not(.btn):hover, + .nav-item .nav-link:not(.btn):active { + background-color: $opacity-2; + border-radius: $border-radius-small; } - - .navbar-brand{ - text-transform: uppercase; - font-size: $font-size-small; - padding-top: $padding-base-vertical; - padding-bottom: $padding-base-vertical; - line-height: $line-height-nav-link; + } + + .logo-container { + width: 27px; + height: 27px; + overflow: hidden; + margin: 0 auto; + border-radius: 50%; + border: 1px solid transparent; + } + + .navbar-brand { + text-transform: uppercase; + font-size: $font-size-small; + padding-top: $padding-base-vertical; + padding-bottom: $padding-base-vertical; + line-height: $line-height-nav-link; + } + + .navbar-toggler { + width: 37px; + height: 27px; + outline: 0; + cursor: pointer; + + &.navbar-toggler-left { + position: relative; + left: 0; + padding-left: 0; } - .navbar-toggler{ - width: 37px; - height: 27px; - outline: 0; - cursor: pointer; - - &.navbar-toggler-left{ - position: relative; - left: 0; - padding-left: 0; - } - - .navbar-toggler-bar.middle-bar{ - width: 17px; - transition: width .2s linear; - } - - &:hover{ - & .navbar-toggler-bar.middle-bar{ - width: 22px; - } - } + .navbar-toggler-bar.middle-bar { + width: 17px; + transition: width 0.2s linear; } - .button-dropdown{ - .navbar-toggler-bar:nth-child(2){ - width: 17px; - } + &:hover { + & .navbar-toggler-bar.middle-bar { + width: 22px; + } } + } - &.navbar-transparent{ - background-color: $transparent-bg !important; - box-shadow: none; - color: $white-color; - padding-top: 20px !important; + .button-dropdown { + .navbar-toggler-bar:nth-child(2) { + width: 17px; + } + } + + &.navbar-transparent { + background-color: $transparent-bg !important; + box-shadow: none; + color: $white-color; + padding-top: 20px !important; + } + + &.bg-white:not(.navbar-transparent) { + a:not(.dropdown-item):not(.btn) { + color: $default-color; + + &.disabled { + opacity: 0.5; + color: $default-color; + } } - &.bg-white:not(.navbar-transparent){ - a:not(.dropdown-item):not(.btn){ - color: $default-color; - - &.disabled{ - opacity: .5; - color: $default-color; - } - } - - .button-bar{ - background: $default-color; - } + .button-bar { + background: $default-color; + } - .nav-item.active .nav-link:not(.btn), - .nav-item .nav-link:not(.btn):focus, - .nav-item .nav-link:not(.btn):hover, - .nav-item .nav-link:not(.btn):active{ - background-color: $opacity-gray-3; - } + .nav-item.active .nav-link:not(.btn), + .nav-item .nav-link:not(.btn):focus, + .nav-item .nav-link:not(.btn):hover, + .nav-item .nav-link:not(.btn):active { + background-color: $opacity-gray-3; + } - .logo-container{ - border: 1px solid $default-color; - } + .logo-container { + border: 1px solid $default-color; } + } } -.bg-default{ - background-color: $default-color !important; +.bg-default { + background-color: $default-color !important; } -.bg-primary{ - background-color: $primary-color !important; +.bg-primary { + background-color: $primary-color !important; } -.bg-info{ - background-color: $info-color !important; +.bg-info { + background-color: $info-color !important; } -.bg-success{ - background-color: $success-color !important; +.bg-success { + background-color: $success-color !important; } -.bg-danger{ - background-color: $danger-color !important; +.bg-danger { + background-color: $danger-color !important; } -.bg-warning{ - background-color: $warning-color !important; +.bg-warning { + background-color: $warning-color !important; } -.bg-white{ - background-color: $white-color !important; +.bg-white { + background-color: $white-color !important; } diff --git a/src/assets/scss/now-ui-kit/_nucleo-outline.scss b/src/assets/scss/now-ui-kit/_nucleo-outline.scss index c3c2283..bc30b63 100755 --- a/src/assets/scss/now-ui-kit/_nucleo-outline.scss +++ b/src/assets/scss/now-ui-kit/_nucleo-outline.scss @@ -7,12 +7,12 @@ Created using IcoMoon - icomoon.io -------------------------------- */ @font-face { - font-family: 'Nucleo Outline'; - src: url('../fonts/nucleo-outline.eot'); - src: url('../fonts/nucleo-outline.eot') format('embedded-opentype'), - url('../fonts/nucleo-outline.woff2') format('woff2'), - url('../fonts/nucleo-outline.woff') format('woff'), - url('../fonts/nucleo-outline.ttf') format('truetype'); + font-family: "Nucleo Outline"; + src: url("../fonts/nucleo-outline.eot"); + src: url("../fonts/nucleo-outline.eot") format("embedded-opentype"), + url("../fonts/nucleo-outline.woff2") format("woff2"), + url("../fonts/nucleo-outline.woff") format("woff"), + url("../fonts/nucleo-outline.ttf") format("truetype"); font-weight: normal; font-style: normal; } @@ -23,7 +23,7 @@ Created using IcoMoon - icomoon.io .now-ui-icons { display: inline-block; - font: normal normal normal 14px/1 'Nucleo Outline'; + font: normal normal normal 14px/1 "Nucleo Outline"; font-size: inherit; speak: none; text-transform: none; @@ -132,8 +132,8 @@ Created using IcoMoon - icomoon.io font icons -------------------------*/ -.now-ui-icons.ui-1_check:before{ - content: "\ea22"; +.now-ui-icons.ui-1_check:before { + content: "\ea22"; } .now-ui-icons.ui-1_email-85:before { @@ -533,24 +533,24 @@ Created using IcoMoon - icomoon.io } .all-icons .font-icon-detail { - text-align: center; - padding: 45px 0px 30px; - border: 1px solid #e5e5e5; - border-radius: 0.1875rem; - margin: 15px 0; - min-height: 168px; + text-align: center; + padding: 45px 0px 30px; + border: 1px solid #e5e5e5; + border-radius: 0.1875rem; + margin: 15px 0; + min-height: 168px; } .all-icons [class*="now-ui-icons"] { - font-size: 32px; + font-size: 32px; } .all-icons .font-icon-detail p { - margin: 25px auto 0; - width: 100%; - text-align: center; - display: block; - color: #B8B8B8; - padding:0 10px; - font-size: 0.7142em; + margin: 25px auto 0; + width: 100%; + text-align: center; + display: block; + color: #b8b8b8; + padding: 0 10px; + font-size: 0.7142em; } diff --git a/src/assets/scss/now-ui-kit/_pagination.scss b/src/assets/scss/now-ui-kit/_pagination.scss index f58b6db..ef3b137 100755 --- a/src/assets/scss/now-ui-kit/_pagination.scss +++ b/src/assets/scss/now-ui-kit/_pagination.scss @@ -1,143 +1,141 @@ -.pagination{ - - .page-item .page-link{ - border: 0; - border-radius: 30px !important; - transition: all .3s; - padding: 0px 11px; - margin: 0 3px; - min-width: 30px; - text-align: center; - box-shadow: none; - height: 30px; - line-height: 30px; - color: $black-color; - cursor: pointer; - font-size: $font-size-base; - text-transform: uppercase; - background: transparent; - - &:hover, - &:focus{ - color: $black-color; - background-color: $opacity-gray-3; - border: none; - } +.pagination { + .page-item .page-link { + border: 0; + border-radius: 30px !important; + transition: all 0.3s; + padding: 0px 11px; + margin: 0 3px; + min-width: 30px; + text-align: center; + box-shadow: none; + height: 30px; + line-height: 30px; + color: $black-color; + cursor: pointer; + font-size: $font-size-base; + text-transform: uppercase; + background: transparent; + + &:hover, + &:focus { + color: $black-color; + background-color: $opacity-gray-3; + border: none; } - - .arrow-margin-left, - .arrow-margin-right{ - position: absolute; - } - - .arrow-margin-right{ - right: 0; + } + + .arrow-margin-left, + .arrow-margin-right { + position: absolute; + } + + .arrow-margin-right { + right: 0; + } + + .arrow-margin-left { + left: 0; + } + + .page-item.active > .page-link { + color: $light-gray; + box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2); + + &, + &:focus, + &:hover { + background-color: $default-color; + border-color: $default-color; + color: $white-color; } - - .arrow-margin-left{ - left: 0; + } + + .page-item.disabled > .page-link { + opacity: 0.5; + background-color: rgba(255, 255, 255, 0.2); + color: $white-color; + } + + // Colors + &.pagination-info { + .page-item.active > .page-link { + &, + &:focus, + &:hover { + background-color: $brand-info; + border-color: $brand-info; + } } - - .page-item.active > .page-link{ - color: $light-gray; - box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2); - - &, - &:focus, - &:hover{ - background-color: $default-color; - border-color: $default-color; - color: $white-color; - } - } - - .page-item.disabled > .page-link{ - opacity: .5; - background-color: rgba(255,255,255, .2); - color: $white-color; + } + + &.pagination-success { + .page-item.active > .page-link { + &, + &:focus, + &:hover { + background-color: $brand-success; + border-color: $brand-success; + } } - - // Colors - &.pagination-info{ - .page-item.active > .page-link{ - &, - &:focus, - &:hover{ - background-color: $brand-info; - border-color: $brand-info; - } - } + } + + &.pagination-primary { + .page-item.active > .page-link { + &, + &:focus, + &:hover { + background-color: $brand-primary; + border-color: $brand-primary; + } } - - &.pagination-success{ - .page-item.active > .page-link{ - &, - &:focus, - &:hover{ - background-color: $brand-success; - border-color: $brand-success; - } - } + } + + &.pagination-warning { + .page-item.active > .page-link { + &, + &:focus, + &:hover { + background-color: $brand-warning; + border-color: $brand-warning; + } } - - &.pagination-primary{ - .page-item.active > .page-link{ - &, - &:focus, - &:hover{ - background-color: $brand-primary; - border-color: $brand-primary; - } - } + } + + &.pagination-danger { + .page-item.active > .page-link { + &, + &:focus, + &:hover { + background-color: $brand-danger; + border-color: $brand-danger; + } } + } - &.pagination-warning{ - .page-item.active > .page-link{ - &, - &:focus, - &:hover{ - background-color: $brand-warning; - border-color: $brand-warning; - } - } - } + &.pagination-neutral { + .page-item > .page-link { + color: $white-color; - &.pagination-danger{ - .page-item.active > .page-link{ - &, - &:focus, - &:hover{ - background-color: $brand-danger; - border-color: $brand-danger; - } - } + &:focus, + &:hover { + background-color: $opacity-2; + color: $white-color; + } } - &.pagination-neutral{ - .page-item > .page-link{ - color: $white-color; - - &:focus, - &:hover{ - background-color: $opacity-2; - color: $white-color; - } - } - - .page-item.active > .page-link{ - &, - &:focus, - &:hover{ - background-color: $white-bg; - border-color: $white-bg; - color: $brand-primary; - } - } + .page-item.active > .page-link { + &, + &:focus, + &:hover { + background-color: $white-bg; + border-color: $white-bg; + color: $brand-primary; + } } - + } } -.pagination-container{ - display: flex; - align-items: center; +.pagination-container { + display: flex; + align-items: center; } diff --git a/src/assets/scss/now-ui-kit/_pills.scss b/src/assets/scss/now-ui-kit/_pills.scss index ba07964..99fc92e 100755 --- a/src/assets/scss/now-ui-kit/_pills.scss +++ b/src/assets/scss/now-ui-kit/_pills.scss @@ -1,152 +1,150 @@ -.nav-pills{ - - &.nav-pills-just-icons{ - .nav-item .nav-link{ - text-align: center; - border-radius: 50%; - height: 80px; - width: 80px; - padding: 0; - max-width: 80px; - min-width: auto; - margin-bottom: 4px; - - i{ - line-height: 80px; - } +.nav-pills { + &.nav-pills-just-icons { + .nav-item .nav-link { + text-align: center; + border-radius: 50%; + height: 80px; + width: 80px; + padding: 0; + max-width: 80px; + min-width: auto; + margin-bottom: 4px; + + i { + line-height: 80px; } } + } - &:not(.flex-column) .nav-item { - &:not(:last-child) .nav-link{ - margin-right: 19px; - } + &:not(.flex-column) .nav-item { + &:not(:last-child) .nav-link { + margin-right: 19px; } + } + + .nav-item { + .nav-link { + padding: $padding-btn-vertical - 1 $padding-round-horizontal; + background-color: $opacity-gray-3; + min-width: 100px; + font-weight: $font-weight-normal; + text-align: center; + color: $light-black; + + &:hover { + background-color: $opacity-gray-3; + } - .nav-item { - .nav-link{ - padding: $padding-btn-vertical - 1 $padding-round-horizontal; - background-color: $opacity-gray-3; - min-width: 100px; - font-weight: $font-weight-normal; - text-align: center; - color: $light-black; - - - &:hover{ - background-color: $opacity-gray-3; - } - - &.active{ - &, - &:focus, - &:hover{ - background-color: $dark-gray; - color: $white-color; - box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.3); - } - } - - &.disabled, - &:disabled, - &[disabled]{ - opacity: .5; - } + &.active { + &, + &:focus, + &:hover { + background-color: $dark-gray; + color: $white-color; + box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.3); } + } - i{ - display: block; - line-height: 60px; - font-size: 24px; - } + &.disabled, + &:disabled, + &[disabled] { + opacity: 0.5; + } + } + + i { + display: block; + line-height: 60px; + font-size: 24px; } + } - &.nav-pills-neutral{ - .nav-item { - .nav-link{ - background-color: $opacity-2; - color: $white-color; - - &.active{ - &, - &:focus, - &:hover{ - background-color: $white-color; - color: $primary-color; - } - } - } + &.nav-pills-neutral { + .nav-item { + .nav-link { + background-color: $opacity-2; + color: $white-color; + + &.active { + &, + &:focus, + &:hover { + background-color: $white-color; + color: $primary-color; + } } + } } + } - &.nav-pills-primary{ - .nav-item { - .nav-link.active{ - &, - &:focus, - &:hover{ - background-color: $brand-primary; - } - } + &.nav-pills-primary { + .nav-item { + .nav-link.active { + &, + &:focus, + &:hover { + background-color: $brand-primary; } + } } + } - &.nav-pills-info{ - .nav-item { - .nav-link.active{ - &, - &:focus, - &:hover{ - background-color: $brand-info; - } - } + &.nav-pills-info { + .nav-item { + .nav-link.active { + &, + &:focus, + &:hover { + background-color: $brand-info; } + } } + } - &.nav-pills-success{ - .nav-item { - .nav-link.active{ - &, - &:focus, - &:hover{ - background-color: $brand-success; - } - } + &.nav-pills-success { + .nav-item { + .nav-link.active { + &, + &:focus, + &:hover { + background-color: $brand-success; } + } } + } - &.nav-pills-warning{ - .nav-item { - .nav-link.active{ - &, - &:focus, - &:hover{ - background-color: $brand-warning; - } - } + &.nav-pills-warning { + .nav-item { + .nav-link.active { + &, + &:focus, + &:hover { + background-color: $brand-warning; } + } } + } - &.nav-pills-danger{ - .nav-item { - .nav-link.active{ - &, - &:focus, - &:hover{ - background-color: $brand-danger; - } - } + &.nav-pills-danger { + .nav-item { + .nav-link.active { + &, + &:focus, + &:hover { + background-color: $brand-danger; } + } } + } } -.tab-space{ - padding: 20px 0 50px 0px; +.tab-space { + padding: 20px 0 50px 0px; } -.nav-align-center{ - text-align: center; +.nav-align-center { + text-align: center; - .nav-pills{ - display: inline-flex; - } + .nav-pills { + display: inline-flex; + } } diff --git a/src/assets/scss/now-ui-kit/_popups.scss b/src/assets/scss/now-ui-kit/_popups.scss index 88cc24f..2338359 100755 --- a/src/assets/scss/now-ui-kit/_popups.scss +++ b/src/assets/scss/now-ui-kit/_popups.scss @@ -1,85 +1,84 @@ -.popover{ - font-size: $font-size-base; - box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2); - border: none; - line-height: 1.7; - max-width: 240px; +.popover { + font-size: $font-size-base; + box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2); + border: none; + line-height: 1.7; + max-width: 240px; - &.bs-popover-top .arrow:before, - &.bs-popover-left .arrow:before, - &.bs-popover-right .arrow:before, - &.bs-popover-bottom .arrow:before{ - border-top-color: transparent; - border-left-color: transparent; - border-right-color: transparent; - border-bottom-color: transparent; - } + &.bs-popover-top .arrow:before, + &.bs-popover-left .arrow:before, + &.bs-popover-right .arrow:before, + &.bs-popover-bottom .arrow:before { + border-top-color: transparent; + border-left-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + } - .popover-header{ - color: $default-color-opacity; - font-size: $font-size-base; - text-transform: capitalize; - font-weight: $font-weight-semi; - margin: 0; - margin-top: 5px; - border: none; - background-color: transparent; - } + .popover-header { + color: $default-color-opacity; + font-size: $font-size-base; + text-transform: capitalize; + font-weight: $font-weight-semi; + margin: 0; + margin-top: 5px; + border: none; + background-color: transparent; + } - &:before{ - display: none; - } + &:before { + display: none; + } - &.bs-tether-element-attached-top:after{ - border-bottom-color:$white-color; - top: -9px; - } + &.bs-tether-element-attached-top:after { + border-bottom-color: $white-color; + top: -9px; + } - &.popover-primary{ - @include popover-color($primary-color, $white-color); - } + &.popover-primary { + @include popover-color($primary-color, $white-color); + } - &.popover-info{ - @include popover-color($info-color, $white-color); - } + &.popover-info { + @include popover-color($info-color, $white-color); + } - &.popover-warning{ - @include popover-color($warning-color, $white-color); - } + &.popover-warning { + @include popover-color($warning-color, $white-color); + } - &.popover-danger{ - @include popover-color($danger-color, $white-color); - } + &.popover-danger { + @include popover-color($danger-color, $white-color); + } - &.popover-success{ - @include popover-color($success-color, $white-color); - } + &.popover-success { + @include popover-color($success-color, $white-color); + } } +.tooltip { + &.bs-tooltip-right .arrow:before { + border-right-color: $white-color; + } -.tooltip{ - &.bs-tooltip-right .arrow:before{ - border-right-color:$white-color; - } - - &.bs-tooltip-top .arrow:before{ - border-top-color:$white-color; - } + &.bs-tooltip-top .arrow:before { + border-top-color: $white-color; + } - &.bs-tooltip-bottom .arrow:before{ - border-bottom-color:$white-color; - } + &.bs-tooltip-bottom .arrow:before { + border-bottom-color: $white-color; + } - &.bs-tooltip-left .arrow:before{ - border-left-color:$white-color; - } + &.bs-tooltip-left .arrow:before { + border-left-color: $white-color; + } } -.tooltip-inner{ - padding: $padding-base-vertical $padding-base-horizontal; - min-width: 130px; - background-color: $white-color; - font-size: $font-size-base; - color: inherit; - box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2); +.tooltip-inner { + padding: $padding-base-vertical $padding-base-horizontal; + min-width: 130px; + background-color: $white-color; + font-size: $font-size-base; + color: inherit; + box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2); } diff --git a/src/assets/scss/now-ui-kit/_progress.scss b/src/assets/scss/now-ui-kit/_progress.scss index 1288fc0..ac8a00e 100755 --- a/src/assets/scss/now-ui-kit/_progress.scss +++ b/src/assets/scss/now-ui-kit/_progress.scss @@ -1,126 +1,125 @@ // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. -.progress-container{ - position: relative; - - & + .progress-container, - & ~ .progress-container{ - margin-top: $margin-base-vertical; +.progress-container { + position: relative; + + & + .progress-container, + & ~ .progress-container { + margin-top: $margin-base-vertical; + } + .progress-badge { + color: $default-color; + font-size: $font-size-small; + text-transform: uppercase; + } + + .progress { + height: 1px; + border-radius: 0; + box-shadow: none; + background: $opacity-gray-8; + margin-top: 14px; + + .progress-bar { + box-shadow: none; + background-color: $default-color; } - .progress-badge{ - color: $default-color; - font-size: $font-size-small; - text-transform: uppercase; + .progress-value { + position: absolute; + top: 2px; + right: 0; + color: $default-color; + font-size: $font-size-small; } + } + &.progress-neutral { .progress { - height: 1px; - border-radius: 0; - box-shadow: none; - background: $opacity-gray-8; - margin-top: 14px; - - .progress-bar { - box-shadow: none; - background-color: $default-color; - } - - .progress-value{ - position: absolute; - top: 2px; - right: 0; - color: $default-color; - font-size: $font-size-small; - } + background: rgba(255, 255, 255, 0.3); } - &.progress-neutral{ - .progress{ - background: rgba(255, 255, 255, .3); - } - - .progress-bar{ - background: $white-bg; - } + .progress-bar { + background: $white-bg; + } - .progress-value, - .progress-badge{ - color: $white-color; - } + .progress-value, + .progress-badge { + color: $white-color; } + } - &.progress-primary{ - .progress{ - background: $primary-color-opacity; - } + &.progress-primary { + .progress { + background: $primary-color-opacity; + } - .progress-bar{ - background: $brand-primary; - } + .progress-bar { + background: $brand-primary; + } - .progress-value, - .progress-badge{ - color: $brand-primary; - } + .progress-value, + .progress-badge { + color: $brand-primary; } + } - &.progress-info{ - .progress{ - background: $info-color-opacity; - } + &.progress-info { + .progress { + background: $info-color-opacity; + } - .progress-bar{ - background: $brand-info; - } + .progress-bar { + background: $brand-info; + } - .progress-value, - .progress-badge{ - color: $brand-info; - } + .progress-value, + .progress-badge { + color: $brand-info; } + } - &.progress-success{ - .progress{ - background: $success-color-opacity; - } + &.progress-success { + .progress { + background: $success-color-opacity; + } - .progress-bar{ - background: $brand-success; - } + .progress-bar { + background: $brand-success; + } - .progress-value, - .progress-badge{ - color: $brand-success; - } + .progress-value, + .progress-badge { + color: $brand-success; } + } - &.progress-warning{ - .progress{ - background: $warning-color-opacity; - } + &.progress-warning { + .progress { + background: $warning-color-opacity; + } - .progress-bar{ - background: $brand-warning; - } + .progress-bar { + background: $brand-warning; + } - .progress-value, - .progress-badge{ - color: $brand-warning; - } + .progress-value, + .progress-badge { + color: $brand-warning; } + } - &.progress-danger{ - .progress{ - background: $danger-color-opacity; - } + &.progress-danger { + .progress { + background: $danger-color-opacity; + } - .progress-bar{ - background: $brand-danger; - } + .progress-bar { + background: $brand-danger; + } - .progress-value, - .progress-badge{ - color: $brand-danger; - } + .progress-value, + .progress-badge { + color: $brand-danger; } + } } diff --git a/src/assets/scss/now-ui-kit/_responsive.scss b/src/assets/scss/now-ui-kit/_responsive.scss index 108f207..b7f151c 100755 --- a/src/assets/scss/now-ui-kit/_responsive.scss +++ b/src/assets/scss/now-ui-kit/_responsive.scss @@ -1,414 +1,410 @@ -@media screen and (max-width: 991px){ - .sidebar-collapse{ - @include navbar-collapse(); - - &.menu-on-left{ - .navbar-collapse{ - right: auto; - left: 0; - @include transform-translate-x(-300px); - } +@media screen and (max-width: 991px) { + .sidebar-collapse { + @include navbar-collapse(); + + &.menu-on-left { + .navbar-collapse { + right: auto; + left: 0; + @include transform-translate-x(-300px); + } + } + + .nav-open & { + .navbar-collapse { + @include transform-translate-x(0px); + } + + .wrapper { + @include transform-translate-x(-150px); + } + + .navbar-translate { + @include transform-translate-x(-300px); + } + + &.menu-on-left { + .navbar-collapse { + @include transform-translate-x(0px); } - .nav-open &{ - .navbar-collapse{ - @include transform-translate-x(0px); - } - - .wrapper{ - @include transform-translate-x(-150px); - } - - .navbar-translate{ - @include transform-translate-x(-300px); - } - - &.menu-on-left{ - .navbar-collapse{ - @include transform-translate-x(0px); - } - - .navbar-translate{ - @include transform-translate-x(300px); - } - - .wrapper{ - @include transform-translate-x(150px); - } - - #bodyClick{ - right: auto; - left: 300px; - } - } + .navbar-translate { + @include transform-translate-x(300px); } - } - .navbar-nav .nav-link i.fab, - .navbar-nav .nav-link i.now-ui-icons { - opacity: .5; - } + .wrapper { + @include transform-translate-x(150px); + } - .bootstrap-collapse{ - .navbar .navbar-collapse{ - background: none !important; + #bodyClick { + right: auto; + left: 300px; } - @include navbar-responsive(); + } } + } - .profile-photo .profile-photo-small{ - margin-left: -2px; - } + .navbar-nav .nav-link i.fab, + .navbar-nav .nav-link i.now-ui-icons { + opacity: 0.5; + } - .button-dropdown{ - display: none; + .bootstrap-collapse { + .navbar .navbar-collapse { + background: none !important; } + @include navbar-responsive(); + } - .section-nucleo-icons .container .row > [class*="col-"]:first-child{ - text-align: center; - } + .profile-photo .profile-photo-small { + margin-left: -2px; + } - .footer{ - .copyright{ - text-align: right; - } - } + .button-dropdown { + display: none; + } + + .section-nucleo-icons .container .row > [class*="col-"]:first-child { + text-align: center; + } - .section-nucleo-icons .icons-container{ - margin-top: 65px; + .footer { + .copyright { + text-align: right; } + } - .navbar-nav{ - .nav-link{ - i.fa, - i.now-ui-icons{ - opacity: .5; - } - } + .section-nucleo-icons .icons-container { + margin-top: 65px; + } + + .navbar-nav { + .nav-link { + i.fa, + i.now-ui-icons { + opacity: 0.5; + } } + } - .section-images{ - height: 500px; - max-height: 500px; + .section-images { + height: 500px; + max-height: 500px; - .hero-images-container{ - max-width: 500px; - } + .hero-images-container { + max-width: 500px; + } - .hero-images-container-1{ - right: 10%; - top: 68%; - max-width: 269px; - } + .hero-images-container-1 { + right: 10%; + top: 68%; + max-width: 269px; + } - .hero-images-container-2{ - right: 5%; - max-width: 135px; - top: 93%; - } + .hero-images-container-2 { + right: 5%; + max-width: 135px; + top: 93%; } + } } -@media screen and (min-width: 992px){ +@media screen and (min-width: 992px) { .navbar-collapse:not(.has-image) { background: transparent !important; -} - .burger-menu{ - @include navbar-collapse(); + } + .burger-menu { + @include navbar-collapse(); - .nav-open & .navbar-collapse{ - @include transform-translate-x(0px); - } + .nav-open & .navbar-collapse { + @include transform-translate-x(0px); + } - .navbar-collapse { - display: block !important; - - .navbar-nav { - margin-top: 53px; - height: 100%; - z-index: 2; - position: relative; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - - .nav-item{ - margin: 0; - } - } - } + .navbar-collapse { + display: block !important; - &.menu-on-left .navbar-collapse{ - right: auto; - left: 0; - @include transform-translate-x(-300px); + .navbar-nav { + margin-top: 53px; + height: 100%; + z-index: 2; + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + + .nav-item { + margin: 0; } + } + } - [class*="navbar-expand-"]{ - .navbar-nav .dropdown-menu{ - position: static; - float: none; - } + &.menu-on-left .navbar-collapse { + right: auto; + left: 0; + @include transform-translate-x(-300px); + } - .navbar-toggler{ - display: inline-block; - } - } + [class*="navbar-expand-"] { + .navbar-nav .dropdown-menu { + position: static; + float: none; + } - .section-navbars .navbar-collapse{ - display: none !important; - } + .navbar-toggler { + display: inline-block; + } + } - .nav-open &{ - &.menu-on-left .navbar .navbar-translate{ - @include transform-translate-x(300px); - } + .section-navbars .navbar-collapse { + display: none !important; + } - .navbar .navbar-translate{ - @include transform-translate-x(-300px); - } + .nav-open & { + &.menu-on-left .navbar .navbar-translate { + @include transform-translate-x(300px); + } - &.menu-on-left .navbar-collapse{ - @include transform-translate-x(0px); - } + .navbar .navbar-translate { + @include transform-translate-x(-300px); + } - &.menu-on-left #bodyClick{ - right: auto; - left: 300px; - } - } + &.menu-on-left .navbar-collapse { + @include transform-translate-x(0px); + } - &.menu-on-left .navbar-brand{ - float: right; - margin-right: 0; - margin-left: 1rem; - } + &.menu-on-left #bodyClick { + right: auto; + left: 300px; + } } - .navbar-nav{ - .nav-link{ - &.profile-photo{ - padding: 0; - margin: 7px $padding-base-horizontal; - } - - &.btn:not(.btn-sm){ - margin: 0; - } - } + &.menu-on-left .navbar-brand { + float: right; + margin-right: 0; + margin-left: 1rem; + } + } - .nav-item:not(:last-child){ - margin-right: 5px; - } + .navbar-nav { + .nav-link { + &.profile-photo { + padding: 0; + margin: 7px $padding-base-horizontal; + } + &.btn:not(.btn-sm) { + margin: 0; + } } - .section-nucleo-icons .icons-container{ - margin: 0 0 0 auto; + .nav-item:not(:last-child) { + margin-right: 5px; } + } - .dropdown-menu .dropdown-item{ - color: inherit; - display: flex; - align-items: center; + .section-nucleo-icons .icons-container { + margin: 0 0 0 auto; + } - i { - margin-right: 5px; - position: relative; - top: 1px; - } + .dropdown-menu .dropdown-item { + color: inherit; + display: flex; + align-items: center; + + i { + margin-right: 5px; + position: relative; + top: 1px; } + } - .footer{ - .copyright{ - float: right; - } + .footer { + .copyright { + float: right; } + } } -@media screen and (min-width: 768px){ - .image-container{ - &.image-right{ - top: 80px; - margin-left: - 100px; - margin-bottom: 130px; - } +@media screen and (min-width: 768px) { + .image-container { + &.image-right { + top: 80px; + margin-left: -100px; + margin-bottom: 130px; + } - &.image-left{ - margin-right: -100px; - } + &.image-left { + margin-right: -100px; } + } } -@media screen and (max-width: 768px){ - .image-container{ - &.image-left{ - margin-bottom: 220px; +@media screen and (max-width: 768px) { + .image-container { + &.image-left { + margin-bottom: 220px; - p.blockquote{ - margin: 0 auto; - position: relative; - right: 0; - } - } + p.blockquote { + margin: 0 auto; + position: relative; + right: 0; + } } + } - .nav-tabs{ - display: inline-block; - width: 100%; - padding-left: 100px; - padding-right: 100px; - text-align: center; + .nav-tabs { + display: inline-block; + width: 100%; + padding-left: 100px; + padding-right: 100px; + text-align: center; - .nav-item > .nav-link{ - margin-bottom: 5px; - } + .nav-item > .nav-link { + margin-bottom: 5px; } + } - .landing-page .section-story-overview .image-container:nth-child(2){ - margin-left: 0; - margin-bottom: 30px; - } + .landing-page .section-story-overview .image-container:nth-child(2) { + margin-left: 0; + margin-bottom: 30px; + } } -@media screen and (max-width: 576px){ - .navbar[class*='navbar-expand-'] .container{ - margin-left: 0; - margin-right: 0; - } +@media screen and (max-width: 576px) { + .navbar[class*="navbar-expand-"] .container { + margin-left: 0; + margin-right: 0; + } - .footer{ - .copyright{ - text-align: center; - } + .footer { + .copyright { + text-align: center; } + } - .section-nucleo-icons{ - .icons-container{ - i{ - font-size: 30px; + .section-nucleo-icons { + .icons-container { + i { + font-size: 30px; - &:nth-child(6){ - font-size: 48px; - } - } + &:nth-child(6) { + font-size: 48px; } + } } + } - .page-header{ - .container h6.category-absolute{ - width: 90%; - } + .page-header { + .container h6.category-absolute { + width: 90%; } + } } -@media screen and (min-width: 991px) and (max-width: 1200px){ - .section-images{ - .hero-images-container-1{ - right: 9%; - max-width: 370px; - } +@media screen and (min-width: 991px) and (max-width: 1200px) { + .section-images { + .hero-images-container-1 { + right: 9%; + max-width: 370px; + } - .hero-images-container-2{ - right: 2%; - max-width: 216px; - } + .hero-images-container-2 { + right: 2%; + max-width: 216px; } + } } -@media screen and (max-width: 768px){ - .section-images{ - height: 300px; - max-height: 300px; +@media screen and (max-width: 768px) { + .section-images { + height: 300px; + max-height: 300px; - .hero-images-container{ - max-width: 380px; - } + .hero-images-container { + max-width: 380px; + } - .hero-images-container-1{ - right: 7%; - top: 87%; - max-width: 210px; - } + .hero-images-container-1 { + right: 7%; + top: 87%; + max-width: 210px; + } - .hero-images-container-2{ - right: 1%; - max-width: 133px; - top: 99%; - } + .hero-images-container-2 { + right: 1%; + max-width: 133px; + top: 99%; } + } } @media screen and (max-width: 517px) { - .alert .alert-icon{ - margin-top: 10px; - } + .alert .alert-icon { + margin-top: 10px; + } } @media screen and (min-width: 1200px) { - .section-images{ - .hero-images-container-1{ - top: 51%; - right: 21%; - } + .section-images { + .hero-images-container-1 { + top: 51%; + right: 21%; + } - .hero-images-container-2{ - top: 66%; - right: 14%; - } + .hero-images-container-2 { + top: 66%; + right: 14%; } + } } // Ipad responsive portrait mode -@media only screen -and (min-device-width : 768px) -and (max-device-width : 1024px) -and ( orientation : portrait){ - .section-images .hero-images-container, - .section-images .hero-images-container-1, - .section-images .hero-images-container-2{ - margin-top: -15vh; - margin-left: 80px; - } +@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { + .section-images .hero-images-container, + .section-images .hero-images-container-1, + .section-images .hero-images-container-2 { + margin-top: -15vh; + margin-left: 80px; + } - .section-images .hero-images-container{ - max-width: 300px; - } + .section-images .hero-images-container { + max-width: 300px; + } - .section-images .hero-images-container-1{ - right: 28%; - top: 40%; - } + .section-images .hero-images-container-1 { + right: 28%; + top: 40%; + } - .section-images .hero-images-container-2{ - right: 21%; - top: 55%; - } + .section-images .hero-images-container-2 { + right: 21%; + top: 55%; + } - .index-page .category-absolute{ - top: 90vh; - } + .index-page .category-absolute { + top: 90vh; + } } @media screen and (max-width: 580px) { - .alert{ - button.close{ - position: absolute; - right: 11px; - top: 50%; - transform: translateY(-50%); - } + .alert { + button.close { + position: absolute; + right: 11px; + top: 50%; + transform: translateY(-50%); } + } } @media only screen and (min-height: 950px) { - .index-page .page-header .category-absolute{ + .index-page .page-header .category-absolute { margin-top: -330px; } } diff --git a/src/assets/scss/now-ui-kit/_sections.scss b/src/assets/scss/now-ui-kit/_sections.scss index 50171c4..b294e93 100755 --- a/src/assets/scss/now-ui-kit/_sections.scss +++ b/src/assets/scss/now-ui-kit/_sections.scss @@ -1,24 +1,24 @@ -.section{ - padding: 70px 0; - position: relative; - background: $white-color; +.section { + padding: 70px 0; + position: relative; + background: $white-color; - .row + .category{ - margin-top: $margin-base-vertical; - } + .row + .category { + margin-top: $margin-base-vertical; + } } -.section-navbars{ - padding-bottom: 0; +.section-navbars { + padding-bottom: 0; } -.section-full-screen{ - height: 100vh; +.section-full-screen { + height: 100vh; } -.section-signup{ - padding-top: 20vh; +.section-signup { + padding-top: 20vh; } -.page-header{ +.page-header { min-height: 100vh; max-height: 999px; padding: 0; @@ -26,388 +26,397 @@ position: relative; overflow: hidden; - & > .content{ + & > .content { margin-top: 12%; text-align: center; margin-bottom: 50px; } - &.page-header-small{ - min-height: 60vh; - max-height: 440px; + &.page-header-small { + min-height: 60vh; + max-height: 440px; } - &:before{ - background-color: rgba(0,0,0,.3); + &:before { + background-color: rgba(0, 0, 0, 0.3); } - > .container{ + > .container { z-index: 2; padding-top: 12vh; padding-bottom: 40px; } - .page-header-image{ - position: absolute; - background-size: cover; - background-position: center center; - width: 100%; - height: 100%; - z-index: -1; - } - - .content-center{ - position: absolute; - top: 50%; - left: 50%; - z-index: 2; - -ms-transform: translate(-50%, -50%); - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - text-align: center; - color: #FFFFFF; - padding: 0 15px; - width: 100%; - max-width: 880px; + .page-header-image { + position: absolute; + background-size: cover; + background-position: center center; + width: 100%; + height: 100%; + z-index: -1; + } - } + .content-center { + position: absolute; + top: 50%; + left: 50%; + z-index: 2; + -ms-transform: translate(-50%, -50%); + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + text-align: center; + color: #ffffff; + padding: 0 15px; + width: 100%; + max-width: 880px; + } - footer{ - position: absolute; - bottom: 0; - width: 100%; - } - .container{ - height: 100%; - z-index: 1; - text-align: center; - position: relative; - } + footer { + position: absolute; + bottom: 0; + width: 100%; + } + .container { + height: 100%; + z-index: 1; + text-align: center; + position: relative; + } - .category, - .description{ - color: $opacity-8; - } + .category, + .description { + color: $opacity-8; + } - &:after, - &:before{ - position: absolute; - z-index: 0; - width: 100%; - height: 100%; - display: block; - left: 0; - top: 0; - content: ""; - } + &:after, + &:before { + position: absolute; + z-index: 0; + width: 100%; + height: 100%; + display: block; + left: 0; + top: 0; + content: ""; + } } -.clear-filter{ - &:after, - &:before{ - display: none; - } +.clear-filter { + &:after, + &:before { + display: none; + } - &[filter-color="orange"]{ - @include linear-gradient(rgba($black-color,.20), rgba(224, 23, 3, 0.6)); - } + &[filter-color="orange"] { + @include linear-gradient(rgba($black-color, 0.2), rgba(224, 23, 3, 0.6)); + } } -.section-story-overview{ - padding: 50px 0; - - .image-container{ - height: 335px; - position: relative; - background-position: center center; - background-size: cover; - box-shadow: $box-shadow-raised; - border-radius: .25rem; - - & + .category{ - padding-top: 15px; - } +.section-story-overview { + padding: 50px 0; - &.image-right{ - z-index: 2; + .image-container { + height: 335px; + position: relative; + background-position: center center; + background-size: cover; + box-shadow: $box-shadow-raised; + border-radius: 0.25rem; - + h3.title{ - margin-top: 120px; - } - } + & + .category { + padding-top: 15px; + } - &.image-left{ - z-index: 1; - } + &.image-right { + z-index: 2; - &:nth-child(2){ - margin-top: 420px; - margin-left: -105px; - } + + h3.title { + margin-top: 120px; + } } - p.blockquote{ - width: 220px; - min-height: 180px; - text-align: left; - position: absolute; - top: 376px; - right: 155px; - z-index: 0; + &.image-left { + z-index: 1; } -} -.section-nucleo-icons{ - .nucleo-container img{ - width: auto; - left: 0; - top: 0; - height: 100%; - position: absolute; + &:nth-child(2) { + margin-top: 420px; + margin-left: -105px; } + } - .nucleo-container{ - height: 335px; - position: relative; - } + p.blockquote { + width: 220px; + min-height: 180px; + text-align: left; + position: absolute; + top: 376px; + right: 155px; + z-index: 0; + } +} - h5{ - margin-bottom: 35px; - } +.section-nucleo-icons { + .nucleo-container img { + width: auto; + left: 0; + top: 0; + height: 100%; + position: absolute; + } - .icons-container{ - position: relative; - max-width: 450px; - height: 300px; - max-height: 300px; - margin: 0 auto; + .nucleo-container { + height: 335px; + position: relative; + } - } - .icons-container i{ - font-size: 34px; - position: absolute; - left: 0; - top: 0; - } + h5 { + margin-bottom: 35px; + } - .icons-container i:nth-child(1){ - top: 5%; - left: 7%; - } + .icons-container { + position: relative; + max-width: 450px; + height: 300px; + max-height: 300px; + margin: 0 auto; + } + .icons-container i { + font-size: 34px; + position: absolute; + left: 0; + top: 0; + } - .icons-container i:nth-child(2){ - top: 28%; - left: 24%; - } + .icons-container i:nth-child(1) { + top: 5%; + left: 7%; + } - .icons-container i:nth-child(3){ - top: 40%; - } + .icons-container i:nth-child(2) { + top: 28%; + left: 24%; + } - .icons-container i:nth-child(4){ - top: 18%; - left: 62%; - } + .icons-container i:nth-child(3) { + top: 40%; + } - .icons-container i:nth-child(5){ - top: 74%; - left: 3%; - } + .icons-container i:nth-child(4) { + top: 18%; + left: 62%; + } - .icons-container i:nth-child(6){ - top: 36%; - left: 44%; - font-size: 65px; - color: #f96332; - padding: 1px; - } + .icons-container i:nth-child(5) { + top: 74%; + left: 3%; + } - .icons-container i:nth-child(7){ - top: 59%; - left: 26%; - } + .icons-container i:nth-child(6) { + top: 36%; + left: 44%; + font-size: 65px; + color: #f96332; + padding: 1px; + } - .icons-container i:nth-child(8){ - top: 60%; - left: 69%; - } + .icons-container i:nth-child(7) { + top: 59%; + left: 26%; + } - .icons-container i:nth-child(9){ - top: 72%; - left: 47%; - } + .icons-container i:nth-child(8) { + top: 60%; + left: 69%; + } - .icons-container i:nth-child(10){ - top: 88%; - left: 27%; - } + .icons-container i:nth-child(9) { + top: 72%; + left: 47%; + } - .icons-container i:nth-child(11){ - top: 31%; - left: 80%; - } + .icons-container i:nth-child(10) { + top: 88%; + left: 27%; + } - .icons-container i:nth-child(12){ - top: 88%; - left: 68%; - } + .icons-container i:nth-child(11) { + top: 31%; + left: 80%; + } - .icons-container i:nth-child(13){ - top: 5%; - left: 81%; - } + .icons-container i:nth-child(12) { + top: 88%; + left: 68%; + } - .icons-container i:nth-child(14){ - top: 58%; - left: 90%; - } + .icons-container i:nth-child(13) { + top: 5%; + left: 81%; + } - .icons-container i:nth-child(15){ - top: 6%; - left: 40%; - } -} + .icons-container i:nth-child(14) { + top: 58%; + left: 90%; + } -.section-images{ - max-height: 670px; - height: 670px; + .icons-container i:nth-child(15) { + top: 6%; + left: 40%; + } +} - .hero-images-container, - .hero-images-container-1, - .hero-images-container-2{ - margin-top: -38vh; - } +.section-images { + max-height: 670px; + height: 670px; - .hero-images-container{ - max-width: 670px; - } + .hero-images-container, + .hero-images-container-1, + .hero-images-container-2 { + margin-top: -38vh; + } - .hero-images-container-1{ - max-width: 390px; - position: absolute; - top: 55%; - right: 18%; + .hero-images-container { + max-width: 670px; + } - } + .hero-images-container-1 { + max-width: 390px; + position: absolute; + top: 55%; + right: 18%; + } - .hero-images-container-2{ - max-width: 225px; - position: absolute; - top: 68%; - right: 12%; - } + .hero-images-container-2 { + max-width: 225px; + position: absolute; + top: 68%; + right: 12%; + } } - -[data-background-color="orange"]{ - background-color: $orange-bg; +[data-background-color="orange"] { + background-color: $orange-bg; } -[data-background-color="black"]{ - background-color: $black-color; +[data-background-color="black"] { + background-color: $black-color; } -[data-background-color]:not([data-background-color="gray"]){ +[data-background-color]:not([data-background-color="gray"]) { + color: $white-color; + + .title, + .social-description h2, + p, + p.blockquote, + p.blockquote small { color: $white-color; + } - .title, - .social-description h2, - p, - p.blockquote, - p.blockquote small{ - color: $white-color; - } + .separator { + background-color: $white-color; + } - .separator{ - background-color: $white-color; - } + .navbar.bg-white p { + color: $default-color; + } - .navbar.bg-white p{ - color: $default-color; - } + h1, + h2, + h3, + h4, + h5, + h6, + a:not(.btn):not(.dropdown-item), + .icons-container { + color: $white-color; + } - h1,h2,h3,h4,h5,h6,a:not(.btn):not(.dropdown-item), - .icons-container{ - color: $white-color; - } + .input-group-text, + .form-group.no-border .input-group-text, + .input-group.no-border .input-group-text { + color: $opacity-8; + } - .input-group-text, - .form-group.no-border .input-group-text, - .input-group.no-border .input-group-text{ - color: $opacity-8; - } + .description, + .social-description p { + color: $opacity-8; + } - .description, - .social-description p{ - color: $opacity-8; - } + p.blockquote { + border-color: $opacity-2; + } - p.blockquote{ - border-color: $opacity-2; - } + //radio and checkboxes + .checkbox label::before, + .checkbox label::after, + .radio label::before, + .radio label::after { + border-color: $opacity-2; + } - //radio and checkboxes - .checkbox label::before, - .checkbox label::after, - .radio label::before, - .radio label::after{ - border-color: $opacity-2; - } + .checkbox label::after, + .checkbox label, + .radio label { + color: $white-color; + } - .checkbox label::after, - .checkbox label, - .radio label{ - color: $white-color; - } + .checkbox input[type="checkbox"]:disabled + label, + .radio input[type="radio"]:disabled + label { + color: $white-color; + } - .checkbox input[type="checkbox"]:disabled + label, - .radio input[type="radio"]:disabled + label { - color: $white-color; - } + .radio input[type="radio"]:not(:disabled):hover + label::after, + .radio input[type="radio"]:checked + label::after { + background-color: $white-color; + border-color: $white-color; + } - .radio input[type="radio"]:not(:disabled):hover + label::after, - .radio input[type="radio"]:checked + label::after { - background-color: $white-color; - border-color: $white-color; - } + //inputs + @include input-coloured-bg( + $opacity-5, + $white-color, + $white-color, + $transparent-bg, + $opacity-1, + $opacity-2 + ); + + //buttons + .btn.btn-simple { + background-color: $transparent-bg; + border-color: $opacity-5; + color: $white-color; - //inputs - @include input-coloured-bg($opacity-5, $white-color, $white-color, $transparent-bg, $opacity-1, $opacity-2); - - //buttons - .btn.btn-simple{ - background-color: $transparent-bg; - border-color: $opacity-5; - color: $white-color; - - &:hover, - &:focus, - &:not(:disabled):not(.disabled):active, - &:not(:disabled):not(.disabled).active, - &:not(:disabled):not(.disabled):active:focus, - &:not(:disabled):not(.disabled).active:focus, - &:active:hover, - &.active:hover, - .show > &.dropdown-toggle, - .show > &.dropdown-toggle:focus, - .show > &.dropdown-toggle:hover { - background-color: $transparent-bg; - border-color: $white-color; - color: $white-color; - } + &:hover, + &:focus, + &:not(:disabled):not(.disabled):active, + &:not(:disabled):not(.disabled).active, + &:not(:disabled):not(.disabled):active:focus, + &:not(:disabled):not(.disabled).active:focus, + &:active:hover, + &.active:hover, + .show > &.dropdown-toggle, + .show > &.dropdown-toggle:focus, + .show > &.dropdown-toggle:hover { + background-color: $transparent-bg; + border-color: $white-color; + color: $white-color; } + } - //tabs - .nav-tabs{ - > .nav-item{ - >.nav-link{ - i.now-ui-icons{ - color: $white-color; - } - } + //tabs + .nav-tabs { + > .nav-item { + > .nav-link { + i.now-ui-icons { + color: $white-color; } + } } + } - &.section-nucleo-icons .icons-container i:nth-child(6){ - color: $white-color; - } + &.section-nucleo-icons .icons-container i:nth-child(6) { + color: $white-color; + } } diff --git a/src/assets/scss/now-ui-kit/_tabs.scss b/src/assets/scss/now-ui-kit/_tabs.scss index 60a7e3a..8266f43 100755 --- a/src/assets/scss/now-ui-kit/_tabs.scss +++ b/src/assets/scss/now-ui-kit/_tabs.scss @@ -1,115 +1,114 @@ // This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten. .nav-tabs { - border: 0; - padding: $padding-large-vertical $padding-base-horizontal; - - &:not(.nav-tabs-neutral) > .nav-item > .nav-link.active{ - box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.3); - } - - .card &{ - border-top-right-radius: $border-radius-small; - border-top-left-radius: $border-radius-small; + border: 0; + padding: $padding-large-vertical $padding-base-horizontal; + + &:not(.nav-tabs-neutral) > .nav-item > .nav-link.active { + box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.3); + } + + .card & { + border-top-right-radius: $border-radius-small; + border-top-left-radius: $border-radius-small; + } + + > .nav-item { + > .nav-link { + color: $default-color; + margin: 0; + margin-right: 5px; + background-color: $transparent-bg; + border: 1px solid $transparent-bg; + border-radius: 30px; + font-size: $font-size-base; + padding: $padding-btn-vertical $padding-round-horizontal; + line-height: $line-height-general; + + &:hover { + background-color: $transparent-bg; + } + + &.active { + background-color: $light-black; + border-radius: 30px; + color: $white-color; + } + + i.now-ui-icons { + font-size: 14px; + position: relative; + top: 1px; + margin-right: 3px; + } } - > .nav-item{ - > .nav-link{ - color: $default-color; - margin: 0; - margin-right: 5px; - background-color: $transparent-bg; - border: 1px solid $transparent-bg; - border-radius: 30px; - font-size: $font-size-base; - padding: $padding-btn-vertical $padding-round-horizontal; - line-height: $line-height-general; - - &:hover { - background-color: $transparent-bg; - } - - &.active{ - background-color: $light-black; - border-radius: 30px; - color: $white-color; - } - - i.now-ui-icons{ - font-size: 14px; - position: relative; - top: 1px; - margin-right: 3px; - } - } - - &.disabled > .nav-link, - &.disabled > .nav-link:hover { - color: rgba(255,255,255,0.5); - } + &.disabled > .nav-link, + &.disabled > .nav-link:hover { + color: rgba(255, 255, 255, 0.5); } + } - &.nav-tabs-neutral{ - > .nav-item{ - > .nav-link{ - color: $white-color; + &.nav-tabs-neutral { + > .nav-item { + > .nav-link { + color: $white-color; - &.active{ - background-color: $opacity-2; - color: $white-color; - } - } + &.active { + background-color: $opacity-2; + color: $white-color; } + } } + } - &.nav-tabs-primary{ - > .nav-item{ - > .nav-link{ - &.active{ - background-color: $primary-color; - } - } + &.nav-tabs-primary { + > .nav-item { + > .nav-link { + &.active { + background-color: $primary-color; } + } } + } - &.nav-tabs-info{ - > .nav-item{ - > .nav-link{ - &.active{ - background-color: $info-color; - } - } + &.nav-tabs-info { + > .nav-item { + > .nav-link { + &.active { + background-color: $info-color; } + } } + } - &.nav-tabs-danger{ - > .nav-item{ - > .nav-link{ - &.active{ - background-color: $danger-color; - } - } + &.nav-tabs-danger { + > .nav-item { + > .nav-link { + &.active { + background-color: $danger-color; } + } } + } - &.nav-tabs-warning{ - > .nav-item{ - > .nav-link{ - &.active{ - background-color: $warning-color; - } - } + &.nav-tabs-warning { + > .nav-item { + > .nav-link { + &.active { + background-color: $warning-color; } + } } + } - &.nav-tabs-success{ - > .nav-item{ - > .nav-link{ - &.active{ - background-color: $success-color; - } - } + &.nav-tabs-success { + > .nav-item { + > .nav-link { + &.active { + background-color: $success-color; } + } } - + } } diff --git a/src/assets/scss/now-ui-kit/_typography.scss b/src/assets/scss/now-ui-kit/_typography.scss index 7f4b8f9..78473a4 100755 --- a/src/assets/scss/now-ui-kit/_typography.scss +++ b/src/assets/scss/now-ui-kit/_typography.scss @@ -2,103 +2,113 @@ button, input, optgroup, select, -textarea{ - font-family: $sans-serif-family; +textarea { + font-family: $sans-serif-family; } -h1,h2,h3,h4,h5,h6{ - font-weight: $font-weight-normal; +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: $font-weight-normal; } -small{ - font-size: 60%; +small { + font-size: 60%; } -a{ +a { + color: $primary-color; + &:hover, + &:focus { color: $primary-color; - &:hover, - &:focus{ - color: $primary-color; - } -} -h1, .h1 { - font-size: $font-size-h1; - line-height: 1.15; - margin-bottom: $margin-base-vertical * 2; - - small{ - font-weight: $font-weight-bold; - text-transform: uppercase; - opacity: .8; - } -} -h2, .h2{ - font-size: $font-size-h2; - margin-bottom: $margin-base-vertical * 2; -} -h3, .h3{ - font-size: $font-size-h3; - margin-bottom: $margin-base-vertical * 2; - line-height: 1.4em; + } } -h4, .h4{ - font-size: $font-size-h4; - line-height: 1.45em; - margin-top: $margin-base-vertical * 2; - margin-bottom: $margin-base-vertical; +h1, +.h1 { + font-size: $font-size-h1; + line-height: 1.15; + margin-bottom: $margin-base-vertical * 2; - & + .category, - &.title + .category{ - margin-top: -5px; - } -} -h5, .h5 { - font-size: $font-size-h5; - line-height: 1.4em; - margin-bottom: 15px; - - &.category{ - font-weight: 400; - } -} -h6, .h6{ - font-size: $font-size-h6; + small { font-weight: $font-weight-bold; text-transform: uppercase; -} -p{ - line-height: 1.61em; - font-weight: 300; - font-size: 1.2em; -} - -.title{ - font-weight: $font-weight-bold; - padding-top: 30px; - - - &.title-up{ - text-transform: uppercase; + opacity: 0.8; + } +} +h2, +.h2 { + font-size: $font-size-h2; + margin-bottom: $margin-base-vertical * 2; +} +h3, +.h3 { + font-size: $font-size-h3; + margin-bottom: $margin-base-vertical * 2; + line-height: 1.4em; +} +h4, +.h4 { + font-size: $font-size-h4; + line-height: 1.45em; + margin-top: $margin-base-vertical * 2; + margin-bottom: $margin-base-vertical; + + & + .category, + &.title + .category { + margin-top: -5px; + } +} +h5, +.h5 { + font-size: $font-size-h5; + line-height: 1.4em; + margin-bottom: 15px; + + &.category { + font-weight: 400; + } +} +h6, +.h6 { + font-size: $font-size-h6; + font-weight: $font-weight-bold; + text-transform: uppercase; +} +p { + line-height: 1.61em; + font-weight: 300; + font-size: 1.2em; +} + +.title { + font-weight: $font-weight-bold; + padding-top: 30px; + + &.title-up { + text-transform: uppercase; - a{ - color: $black-color; - text-decoration: none; - } - } - & + .category{ - margin-top: -25px; + a { + color: $black-color; + text-decoration: none; } + } + & + .category { + margin-top: -25px; + } } .description, .card-description, -.footer-big p{ - color: $dark-gray; - font-weight: $font-weight-light; +.footer-big p { + color: $dark-gray; + font-weight: $font-weight-light; } -.category{ - text-transform: capitalize; - font-weight: $font-weight-bold; - color: $dark-gray; +.category { + text-transform: capitalize; + font-weight: $font-weight-bold; + color: $dark-gray; } .text-primary { color: $brand-primary !important; @@ -115,47 +125,47 @@ p{ .text-danger { color: $brand-danger !important; } -.text-black{ +.text-black { color: $light-black; } -.blockquote{ - border-left: none; - border: 1px solid $default-color; - padding: 20px; - font-size: $font-size-blockquote; - line-height: 1.8; +.blockquote { + border-left: none; + border: 1px solid $default-color; + padding: 20px; + font-size: $font-size-blockquote; + line-height: 1.8; - small{ - color: $default-color; - font-size: $font-size-small; - text-transform: uppercase; - } + small { + color: $default-color; + font-size: $font-size-small; + text-transform: uppercase; + } - &.blockquote-primary{ - border-color: $primary-color; - color: $primary-color; + &.blockquote-primary { + border-color: $primary-color; + color: $primary-color; - small{ - color: $primary-color; - } + small { + color: $primary-color; } + } - &.blockquote-danger{ - border-color: $danger-color; - color: $danger-color; + &.blockquote-danger { + border-color: $danger-color; + color: $danger-color; - small{ - color: $danger-color; - } + small { + color: $danger-color; } + } - &.blockquote-white{ - border-color: $opacity-8; - color: $white-color; + &.blockquote-white { + border-color: $opacity-8; + color: $white-color; - small{ - color: $opacity-8; - } + small { + color: $opacity-8; } + } } diff --git a/src/assets/scss/now-ui-kit/_variables.scss b/src/assets/scss/now-ui-kit/_variables.scss index 12ee9e7..82d3a33 100755 --- a/src/assets/scss/now-ui-kit/_variables.scss +++ b/src/assets/scss/now-ui-kit/_variables.scss @@ -2,277 +2,273 @@ // //## For each of Bootstrap's buttons, define text, background and border color. -$sans-serif-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif !default; +$sans-serif-family: "Montserrat", "Helvetica Neue", Arial, sans-serif !default; -$none: 0 !default; -$border-thin: 1px !default; -$border-thick: 2px !default; +$none: 0 !default; +$border-thin: 1px !default; +$border-thick: 2px !default; -$white-color: #FFFFFF !default; -$white-bg: #FFFFFF !default; -$orange-bg: #e95e38 !default; +$white-color: #ffffff !default; +$white-bg: #ffffff !default; +$orange-bg: #e95e38 !default; -$smoke-bg: #F5F5F5 !default; -$light-black: #444 !default; +$smoke-bg: #f5f5f5 !default; +$light-black: #444 !default; -$black-bg: rgba(30,30,30,.97) !default; +$black-bg: rgba(30, 30, 30, 0.97) !default; -$black-color: #2c2c2c !default; -$black-hr: #444444 !default; +$black-color: #2c2c2c !default; +$black-hr: #444444 !default; -$light-gray: #E3E3E3 !default; -$medium-gray: #DDDDDD !default; -$dark-gray: #9A9A9A !default; +$light-gray: #e3e3e3 !default; +$medium-gray: #dddddd !default; +$dark-gray: #9a9a9a !default; -$opacity-gray-3: rgba(222,222,222, .3) !default; -$opacity-gray-5: rgba(222,222,222, .5) !default; -$opacity-gray-8: rgba(222,222,222, .8) !default; +$opacity-gray-3: rgba(222, 222, 222, 0.3) !default; +$opacity-gray-5: rgba(222, 222, 222, 0.5) !default; +$opacity-gray-8: rgba(222, 222, 222, 0.8) !default; +$opacity-5: rgba(255, 255, 255, 0.5) !default; +$opacity-8: rgba(255, 255, 255, 0.8) !default; -$opacity-5: rgba(255,255,255, .5) !default; -$opacity-8: rgba(255,255,255, .8) !default; +$datepicker-color-days: rgba(255, 255, 255, 0.8) !default; +$datepicker-color-old-new-days: rgba(255, 255, 255, 0.4) !default; -$datepicker-color-days: rgba(255,255,255, .8) !default; -$datepicker-color-old-new-days: rgba(255,255,255, .4) !default; +$opacity-1: rgba(255, 255, 255, 0.1) !default; +$opacity-2: rgba(255, 255, 255, 0.2) !default; +$transparent-bg: transparent !default; +$dark-background: #555555 !default; -$opacity-1: rgba(255,255,255, .1) !default; -$opacity-2: rgba(255,255,255, .2) !default; +$default-color: #888888 !default; +$default-states-color: lighten($default-color, 6%) !default; +$default-color-opacity: rgba(182, 182, 182, 0.6) !default; -$transparent-bg: transparent !default; -$dark-background: #555555 !default; +$primary-color: #f96332 !default; +$primary-states-color: lighten($primary-color, 6%) !default; +$primary-color-opacity: rgba(249, 99, 50, 0.3) !default; +$primary-color-alert: rgba(249, 99, 50, 0.8) !default; -$default-color: #888888 !default; -$default-states-color: lighten($default-color, 6%) !default; -$default-color-opacity: rgba(182, 182, 182, .6) !default; +$success-color: #18ce0f !default; +$success-states-color: lighten($success-color, 6%) !default; +$success-color-opacity: rgba(24, 206, 15, 0.3) !default; +$success-color-alert: rgba(24, 206, 15, 0.8) !default; -$primary-color: #f96332 !default; -$primary-states-color: lighten($primary-color, 6%) !default; -$primary-color-opacity: rgba(249, 99, 50, .3) !default; -$primary-color-alert: rgba(249, 99, 50, .8) !default; +$info-color: #2ca8ff !default; +$info-states-color: lighten($info-color, 6%) !default; +$info-color-opacity: rgba(44, 168, 255, 0.3) !default; +$info-color-alert: rgba(44, 168, 255, 0.8) !default; -$success-color: #18ce0f !default; -$success-states-color: lighten($success-color, 6%) !default; -$success-color-opacity: rgba(24, 206, 15, .3) !default; -$success-color-alert: rgba(24, 206, 15, .8) !default; +$warning-color: #ffb236 !default; +$warning-states-color: lighten($warning-color, 6%) !default; +$warning-color-opacity: rgba(255, 178, 54, 0.3) !default; +$warning-color-alert: rgba(255, 178, 54, 0.8) !default; -$info-color: #2CA8FF !default; -$info-states-color: lighten($info-color, 6%) !default; -$info-color-opacity: rgba(44, 168, 255, .3) !default; -$info-color-alert: rgba(44, 168, 255, .8) !default; - -$warning-color: #FFB236 !default; -$warning-states-color: lighten($warning-color, 6%) !default; -$warning-color-opacity: rgba(255, 178, 54, .3) !default; -$warning-color-alert: rgba(255, 178, 54, .8) !default; - -$danger-color: #FF3636 !default; -$danger-states-color: lighten($danger-color, 6%) !default; -$danger-color-opacity: rgba(255, 54, 54, .3) !default; -$danger-color-alert: rgba(255, 54, 54, .8) !default; +$danger-color: #ff3636 !default; +$danger-states-color: lighten($danger-color, 6%) !default; +$danger-color-opacity: rgba(255, 54, 54, 0.3) !default; +$danger-color-alert: rgba(255, 54, 54, 0.8) !default; /* brand Colors */ -$brand-primary: $primary-color !default; -$brand-info: $info-color !default; -$brand-success: $success-color !default; -$brand-warning: $warning-color !default; -$brand-danger: $danger-color !default; -$brand-inverse: $black-color !default; +$brand-primary: $primary-color !default; +$brand-info: $info-color !default; +$brand-success: $success-color !default; +$brand-warning: $warning-color !default; +$brand-danger: $danger-color !default; +$brand-inverse: $black-color !default; -$link-disabled-color: #666666 !default; +$link-disabled-color: #666666 !default; /* light colors */ -$light-blue: rgba($primary-color, .2); -$light-azure: rgba($info-color, .2); -$light-green: rgba($success-color, .2); -$light-orange: rgba($warning-color, .2); -$light-red: rgba($danger-color, .2); +$light-blue: rgba($primary-color, 0.2); +$light-azure: rgba($info-color, 0.2); +$light-green: rgba($success-color, 0.2); +$light-orange: rgba($warning-color, 0.2); +$light-red: rgba($danger-color, 0.2); //== Components // -$padding-input-vertical: 11px !default; -$padding-input-horizontal: 19px !default; +$padding-input-vertical: 11px !default; +$padding-input-horizontal: 19px !default; -$padding-btn-vertical: 11px !default; -$padding-btn-horizontal: 22px !default; +$padding-btn-vertical: 11px !default; +$padding-btn-horizontal: 22px !default; -$padding-base-vertical: .5rem !default; -$padding-base-horizontal: .7rem !default; +$padding-base-vertical: 0.5rem !default; +$padding-base-horizontal: 0.7rem !default; -$padding-round-horizontal: 23px !default; +$padding-round-horizontal: 23px !default; -$padding-simple-vertical: 10px !default; -$padding-simple-horizontal: 17px !default; +$padding-simple-vertical: 10px !default; +$padding-simple-horizontal: 17px !default; -$padding-large-vertical: 15px !default; -$padding-large-horizontal: 48px !default; +$padding-large-vertical: 15px !default; +$padding-large-horizontal: 48px !default; -$padding-small-vertical: 5px !default; -$padding-small-horizontal: 15px !default; +$padding-small-vertical: 5px !default; +$padding-small-horizontal: 15px !default; // $padding-xs-vertical: 1px !default; // $padding-xs-horizontal: 5px !default; -$padding-label-vertical: 2px !default; -$padding-label-horizontal: 12px !default; - -$margin-large-vertical: 30px !default; -$margin-base-vertical: 15px !default; - -$margin-base-horizontal: 15px !default; +$padding-label-vertical: 2px !default; +$padding-label-horizontal: 12px !default; -$margin-bottom: 10px !default; -$border: 1px solid !default; -$border-radius-extra-small: 0.125rem !default; -$border-radius-small: 0.1875rem !default; -$border-radius-large: 0.25rem !default; -$border-radius-extreme: 0.875rem !default; +$margin-large-vertical: 30px !default; +$margin-base-vertical: 15px !default; -$border-radius-large-top: $border-radius-large $border-radius-large 0 0 !default; -$border-radius-large-bottom: 0 0 $border-radius-large $border-radius-large !default; +$margin-base-horizontal: 15px !default; -$btn-round-radius: 30px !default; +$margin-bottom: 10px !default; +$border: 1px solid !default; +$border-radius-extra-small: 0.125rem !default; +$border-radius-small: 0.1875rem !default; +$border-radius-large: 0.25rem !default; +$border-radius-extreme: 0.875rem !default; -$height-base: 55px !default; +$border-radius-large-top: $border-radius-large $border-radius-large 0 0 !default; +$border-radius-large-bottom: 0 0 $border-radius-large $border-radius-large !default; -$btn-icon-size: 3.5rem !default; -$btn-icon-size-regular: 2.375rem !default; -$btn-icon-font-size-regular: 0.9375rem !default; -$btn-icon-font-size-small: 0.6875rem !default; -$btn-icon-size-small: 1.875rem !default; -$btn-icon-font-size-lg: 1.325rem !default; -$btn-icon-size-lg: 3.6rem !default; +$btn-round-radius: 30px !default; -$font-size-h1: 3.5em !default; // ~ 49px -$font-size-h2: 2.5em !default; // ~ 35px -$font-size-h3: 1.825em !default; // ~ 28px -$font-size-h4: 1.5em !default; // ~ 24px -$font-size-h5: 1.3em !default; // ~ 22px -$font-size-h6: .9em !default; // ~ 12px +$height-base: 55px !default; -$font-paragraph: 1.2em !default; -$font-size-navbar: 1em !default; -$font-size-mini: 0.7142em !default; -$font-size-small: 0.8571em !default; -$font-size-base: 14px !default; -$font-size-large: 1em !default; -$font-size-large-navbar: 20px !default; -$font-size-blockquote: 1.1em !default; // ~ 15px +$btn-icon-size: 3.5rem !default; +$btn-icon-size-regular: 2.375rem !default; +$btn-icon-font-size-regular: 0.9375rem !default; +$btn-icon-font-size-small: 0.6875rem !default; +$btn-icon-size-small: 1.875rem !default; +$btn-icon-font-size-lg: 1.325rem !default; +$btn-icon-size-lg: 3.6rem !default; -$font-weight-light: 300 !default; -$font-weight-normal: 400 !default; -$font-weight-semi: 600 !default; -$font-weight-bold: 700 !default; +$font-size-h1: 3.5em !default; // ~ 49px +$font-size-h2: 2.5em !default; // ~ 35px +$font-size-h3: 1.825em !default; // ~ 28px +$font-size-h4: 1.5em !default; // ~ 24px +$font-size-h5: 1.3em !default; // ~ 22px +$font-size-h6: 0.9em !default; // ~ 12px -$line-height-general: 1.5 !default; -$line-height-nav-link: 1.625rem !default; -$btn-icon-line-height: 2.4em !default; -$line-height: 1.35em !default; -$line-height-lg: 54px !default; +$font-paragraph: 1.2em !default; +$font-size-navbar: 1em !default; +$font-size-mini: 0.7142em !default; +$font-size-small: 0.8571em !default; +$font-size-base: 14px !default; +$font-size-large: 1em !default; +$font-size-large-navbar: 20px !default; +$font-size-blockquote: 1.1em !default; // ~ 15px +$font-weight-light: 300 !default; +$font-weight-normal: 400 !default; +$font-weight-semi: 600 !default; +$font-weight-bold: 700 !default; -$border-radius-top: 10px 10px 0 0 !default; -$border-radius-bottom: 0 0 10px 10px !default; +$line-height-general: 1.5 !default; +$line-height-nav-link: 1.625rem !default; +$btn-icon-line-height: 2.4em !default; +$line-height: 1.35em !default; +$line-height-lg: 54px !default; -$dropdown-shadow: 1px 2px 3px rgba(0, 0, 0, 0.125); -$box-shadow-raised: 0px 10px 25px 0px rgba(0, 0, 0, 0.3); +$border-radius-top: 10px 10px 0 0 !default; +$border-radius-bottom: 0 0 10px 10px !default; -$general-transition-time: 300ms !default; +$dropdown-shadow: 1px 2px 3px rgba(0, 0, 0, 0.125); +$box-shadow-raised: 0px 10px 25px 0px rgba(0, 0, 0, 0.3); -$slow-transition-time: 370ms !default; -$dropdown-coordinates: 29px -50px !default; +$general-transition-time: 300ms !default; -$fast-transition-time: 150ms !default; -$select-coordinates: 50% -40px !default; +$slow-transition-time: 370ms !default; +$dropdown-coordinates: 29px -50px !default; -$transition-linear: linear !default; -$transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default; -$transition-ease: ease 0s; +$fast-transition-time: 150ms !default; +$select-coordinates: 50% -40px !default; +$transition-linear: linear !default; +$transition-bezier: cubic-bezier(0.34, 1.61, 0.7, 1) !default; +$transition-ease: ease 0s; //$navbar-padding-a: 9px 13px; -$navbar-margin-a: 15px 0px; +$navbar-margin-a: 15px 0px; -$padding-social-a: 10px 5px; +$padding-social-a: 10px 5px; -$navbar-margin-a-btn: 15px 0px; -$navbar-margin-a-btn-round: 16px 0px; +$navbar-margin-a-btn: 15px 0px; +$navbar-margin-a-btn-round: 16px 0px; -$navbar-padding-a-icons: 6px 15px; -$navbar-margin-a-icons: 6px 3px; +$navbar-padding-a-icons: 6px 15px; +$navbar-margin-a-icons: 6px 3px; -$navbar-padding-base: 0.625rem; +$navbar-padding-base: 0.625rem; //$navbar-margin-brand: 5px 0px; -$navbar-margin-brand-icons: 12px auto; -$navbar-margin-btn: 15px 3px; +$navbar-margin-brand-icons: 12px auto; +$navbar-margin-btn: 15px 3px; -$height-icon-sm: 32px; -$width-icon-sm: 32px; -$padding-icon-sm: 4px; -$border-radius-icon-sm: 7px; +$height-icon-sm: 32px; +$width-icon-sm: 32px; +$padding-icon-sm: 4px; +$border-radius-icon-sm: 7px; -$height-icon-message: 40px; -$width-icon-message: 40px; +$height-icon-message: 40px; +$width-icon-message: 40px; -$height-icon-message-sm: 20px; -$width-icon-message-sm: 20px; +$height-icon-message-sm: 20px; +$width-icon-message-sm: 20px; -$white-navbar: rgba(#FFFFFF, .96); -$primary-navbar: rgba(#34ACDC, .98); -$info-navbar: rgba(#5BCAFF, .98); -$success-navbar: rgba(#4CD964, .98); -$warning-navbar: rgba(#FF9500, .98); -$danger-navbar: rgba(#FF4C40, .98); +$white-navbar: rgba(#ffffff, 0.96); +$primary-navbar: rgba(#34acdc, 0.98); +$info-navbar: rgba(#5bcaff, 0.98); +$success-navbar: rgba(#4cd964, 0.98); +$warning-navbar: rgba(#ff9500, 0.98); +$danger-navbar: rgba(#ff4c40, 0.98); -$topbar-x: topbar-x !default; -$topbar-back: topbar-back !default; -$bottombar-x: bottombar-x !default; -$bottombar-back: bottombar-back !default; +$topbar-x: topbar-x !default; +$topbar-back: topbar-back !default; +$bottombar-x: bottombar-x !default; +$bottombar-back: bottombar-back !default; //Nucleo Icons -$nc-font-path: '../fonts' !default; -$nc-font-size-base: 14px !default; -$nc-css-prefix: now-ui !default; -$nc-background-color: #eee !default; -$nc-li-width: (30em / 14) !default; -$nc-padding-width: (1em/3) !default; +$nc-font-path: "../fonts" !default; +$nc-font-size-base: 14px !default; +$nc-css-prefix: now-ui !default; +$nc-background-color: #eee !default; +$nc-li-width: calc(30em / 14) !default; +$nc-padding-width: calc(1em/3) !default; // Social icons color -$social-twitter: #55acee !default; -$social-twitter-state-color: lighten(#55acee, 6%) !default; +$social-twitter: #55acee !default; +$social-twitter-state-color: lighten(#55acee, 6%) !default; -$social-facebook: #3b5998 !default; -$social-facebook-state-color: lighten(#3b5998, 6%) !default; +$social-facebook: #3b5998 !default; +$social-facebook-state-color: lighten(#3b5998, 6%) !default; -$social-google: #dd4b39 !default; -$social-google-state-color: lighten(#dd4b39, 6%) !default; +$social-google: #dd4b39 !default; +$social-google-state-color: lighten(#dd4b39, 6%) !default; -$social-linkedin: #0077B5 !default; -$social-linkedin-state-color: lighten(#0077B5, 6%) !default; +$social-linkedin: #0077b5 !default; +$social-linkedin-state-color: lighten(#0077b5, 6%) !default; -$social-pinterest: #cc2127 !default; -$social-pinterest-state-color: lighten(#cc2127, 6%) !default; +$social-pinterest: #cc2127 !default; +$social-pinterest-state-color: lighten(#cc2127, 6%) !default; -$social-dribbble: #ea4c89 !default; -$social-dribbble-state-color: lighten(#ea4c89, 6%) !default; +$social-dribbble: #ea4c89 !default; +$social-dribbble-state-color: lighten(#ea4c89, 6%) !default; -$social-github: #333333 !default; -$social-github-state-color: lighten(#333333, 6%) !default; +$social-github: #333333 !default; +$social-github-state-color: lighten(#333333, 6%) !default; -$social-youtube: #e52d27 !default; -$social-youtube-state-color: lighten(#e52d27, 6%) !default; +$social-youtube: #e52d27 !default; +$social-youtube-state-color: lighten(#e52d27, 6%) !default; -$social-instagram: #125688 !default; -$social-instagram-state-color: lighten(#125688, 6%) !default; +$social-instagram: #125688 !default; +$social-instagram-state-color: lighten(#125688, 6%) !default; -$social-reddit: #ff4500 !default; -$social-reddit-state-color: lighten(#ff4500, 6%) !default; +$social-reddit: #ff4500 !default; +$social-reddit-state-color: lighten(#ff4500, 6%) !default; -$social-tumblr: #35465c !default; -$social-tumblr-state-color: lighten(#35465c, 6%) !default; +$social-tumblr: #35465c !default; +$social-tumblr-state-color: lighten(#35465c, 6%) !default; -$social-behance: #1769ff !default; -$social-behance-state-color: lighten(#1769ff, 6%) !default; +$social-behance: #1769ff !default; +$social-behance-state-color: lighten(#1769ff, 6%) !default; diff --git a/src/assets/scss/now-ui-kit/cards/_card-plain.scss b/src/assets/scss/now-ui-kit/cards/_card-plain.scss index 6e8b324..21ee9ad 100755 --- a/src/assets/scss/now-ui-kit/cards/_card-plain.scss +++ b/src/assets/scss/now-ui-kit/cards/_card-plain.scss @@ -1,15 +1,15 @@ -.card-plain{ - background: transparent; - box-shadow: none; +.card-plain { + background: transparent; + box-shadow: none; - .card-body, - .card-header{ - padding-left: 5px; - padding-right: 5px; - } + .card-body, + .card-header { + padding-left: 5px; + padding-right: 5px; + } - .card-header:after{ - width: 100%; - left: 0; - } + .card-header:after { + width: 100%; + left: 0; + } } diff --git a/src/assets/scss/now-ui-kit/cards/_card-signup.scss b/src/assets/scss/now-ui-kit/cards/_card-signup.scss index 3c72fd0..160d2a6 100755 --- a/src/assets/scss/now-ui-kit/cards/_card-signup.scss +++ b/src/assets/scss/now-ui-kit/cards/_card-signup.scss @@ -1,56 +1,56 @@ -.card-signup{ - max-width: 350px; - margin: 0 auto; - - .card-header{ - margin:0 20px; - padding: 30px 0; - } - - .card-title{ - margin-top: 15px; - margin-bottom: 15px; - } - - .card-footer { - margin-bottom: 10px; - margin-top: 24px; - padding: 24px 0; - } - - .card-body{ - padding-top: 0px; - padding-bottom: 0px; - min-height: auto; +.card-signup { + max-width: 350px; + margin: 0 auto; + + .card-header { + margin: 0 20px; + padding: 30px 0; + } + + .card-title { + margin-top: 15px; + margin-bottom: 15px; + } + + .card-footer { + margin-bottom: 10px; + margin-top: 24px; + padding: 24px 0; + } + + .card-body { + padding-top: 0px; + padding-bottom: 0px; + min-height: auto; + } + + .form-check, + .form-check.form-check-radio { + margin-top: 20px; + + label { + margin-left: 11px; + color: initial; + padding-left: 40px; } - - .form-check, - .form-check.form-check-radio{ - margin-top: 20px; - - label{ - margin-left: 11px; - color: initial; - padding-left: 40px; - } - } - - .card-description{ - margin-top: 15px; - margin-bottom: 20px; - } - - .social-line{ - margin-top: 20px; - text-align: center; - - .btn.btn-icon , - .btn.btn-icon .btn-icon{ - margin-left: 5px; - margin-right: 5px; - margin-top: 0; - margin-bottom: 0; - box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.2); - } + } + + .card-description { + margin-top: 15px; + margin-bottom: 20px; + } + + .social-line { + margin-top: 20px; + text-align: center; + + .btn.btn-icon, + .btn.btn-icon .btn-icon { + margin-left: 5px; + margin-right: 5px; + margin-top: 0; + margin-bottom: 0; + box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.2); } + } } diff --git a/src/assets/scss/now-ui-kit/element-ui-plugins/_date_picker.scss b/src/assets/scss/now-ui-kit/element-ui-plugins/_date_picker.scss index 33846d8..bdb43b0 100644 --- a/src/assets/scss/now-ui-kit/element-ui-plugins/_date_picker.scss +++ b/src/assets/scss/now-ui-kit/element-ui-plugins/_date_picker.scss @@ -1,22 +1,22 @@ $box-shadow-lg: 0px 10px 50px 0px rgba(0, 0, 0, 0.2); -.picker-card-styles{ +.picker-card-styles { box-shadow: $box-shadow-lg; border: none; border-radius: $border-radius-small; } -.el-picker-panel.time-select.el-popper{ +.el-picker-panel.time-select.el-popper { @extend .picker-card-styles; } .el-picker-panel.el-date-picker { width: 300px; border: 0; - &.date-picker-primary{ + &.date-picker-primary { @include datepicker-colors($primary-color); - &.el-popper[x-placement^=bottom] .popper__arrow::after { + &.el-popper[x-placement^="bottom"] .popper__arrow::after { border-bottom-color: $primary-color; } - &.el-popper[x-placement^=top] .popper__arrow::after { + &.el-popper[x-placement^="top"] .popper__arrow::after { border-top-color: $primary-color; } } @@ -29,7 +29,7 @@ $box-shadow-lg: 0px 10px 50px 0px rgba(0, 0, 0, 0.2); .date-picker-primary .el-date-picker__header, .date-picker-primary .el-date-range-picker__header { - &.el-date-picker__header--bordered{ + &.el-date-picker__header--bordered { border: none; } .el-picker-panel__icon-btn { @@ -43,7 +43,8 @@ $box-shadow-lg: 0px 10px 50px 0px rgba(0, 0, 0, 0.2); background-color: rgba(255, 255, 255, 0.2); } } - .el-date-picker__header-label, div { + .el-date-picker__header-label, + div { font-size: $font-size-base; font-weight: $font-weight-light; color: white; @@ -92,7 +93,6 @@ $box-shadow-lg: 0px 10px 50px 0px rgba(0, 0, 0, 0.2); justify-content: center; align-items: center; font-size: $font-size-base; - } span { width: 32px; @@ -104,33 +104,36 @@ $box-shadow-lg: 0px 10px 50px 0px rgba(0, 0, 0, 0.2); } } } -.el-date-picker.date-picker-primary .el-date-picker__time-header{ +.el-date-picker.date-picker-primary .el-date-picker__time-header { border: none; } -.el-date-editor.el-input, .el-date-editor.el-input__inner{ +.el-date-editor.el-input, +.el-date-editor.el-input__inner { width: 100% !important; } -.el-date-editor.el-input .el-input__inner{ - padding-left: 30px !important +.el-date-editor.el-input .el-input__inner { + padding-left: 30px !important; } -.el-date-picker .el-input{ - .el-input__inner{ +.el-date-picker .el-input { + .el-input__inner { @extend .form-control; } } -.el-date-picker.date-picker-primary .el-picker-panel__footer{ +.el-date-picker.date-picker-primary .el-picker-panel__footer { border: none; - .el-button{ + .el-button { @extend .btn-primary, .btn-round, .btn-sm; border: 0; - &:first-child{ + &:first-child { @extend .btn-info; } } } -.el-picker-panel .el-time-spinner.has-seconds .el-time-spinner__wrapper:nth-child(2){ +.el-picker-panel + .el-time-spinner.has-seconds + .el-time-spinner__wrapper:nth-child(2) { margin-left: 0; } diff --git a/src/assets/scss/now-ui-kit/element-ui-plugins/_input.scss b/src/assets/scss/now-ui-kit/element-ui-plugins/_input.scss index 9c117eb..62a3703 100644 --- a/src/assets/scss/now-ui-kit/element-ui-plugins/_input.scss +++ b/src/assets/scss/now-ui-kit/element-ui-plugins/_input.scss @@ -7,27 +7,26 @@ margin-top: 0 !important; margin-bottom: 0 !important; } - .el-select{ + .el-select { width: 100%; - .el-input__inner{ + .el-input__inner { cursor: pointer !important; } } - .el-input-number{ + .el-input-number { width: 100%; - .plus-button{ + .plus-button { @extend .btn-round, .btn-primary; padding: 0 !important; border: 0; } - .el-input-number__decrease{ + .el-input-number__decrease { @extend .plus-button; border-radius: $btn-round-radius 0 0 $btn-round-radius !important; } - .el-input-number__increase{ + .el-input-number__increase { @extend .plus-button; border-radius: 0 $btn-round-radius $btn-round-radius 0 !important; } } } - diff --git a/src/assets/scss/now-ui-kit/element-ui-plugins/_popover.scss b/src/assets/scss/now-ui-kit/element-ui-plugins/_popover.scss index 4500989..7454d88 100644 --- a/src/assets/scss/now-ui-kit/element-ui-plugins/_popover.scss +++ b/src/assets/scss/now-ui-kit/element-ui-plugins/_popover.scss @@ -1,29 +1,29 @@ @mixin arrow-color($type, $color) { .el-popover.popover-#{$type} { - &[x-placement^=bottom] .popper__arrow, - &[x-placement^=bottom] .popper__arrow::after{ + &[x-placement^="bottom"] .popper__arrow, + &[x-placement^="bottom"] .popper__arrow::after { border-bottom-color: $color; } - &[x-placement^=top] .popper__arrow, - &[x-placement^=top] .popper__arrow::after{ + &[x-placement^="top"] .popper__arrow, + &[x-placement^="top"] .popper__arrow::after { border-top-color: $color; } - &[x-placement^=left] .popper__arrow, - &[x-placement^=left] .popper__arrow::after{ + &[x-placement^="left"] .popper__arrow, + &[x-placement^="left"] .popper__arrow::after { border-left-color: $color; } - &[x-placement^=right] .popper__arrow, - &[x-placement^=right] .popper__arrow::after{ + &[x-placement^="right"] .popper__arrow, + &[x-placement^="right"] .popper__arrow::after { border-right-color: $color; } } } -@include arrow-color('primary', $primary-color) -@include arrow-color('info', $info-color) -@include arrow-color('warning', $warning-color) -@include arrow-color('success', $success-color) -@include arrow-color('danger', $danger-color) +@include arrow-color("primary", $primary-color); +@include arrow-color("info", $info-color); +@include arrow-color("warning", $warning-color); +@include arrow-color("success", $success-color); +@include arrow-color("danger", $danger-color); diff --git a/src/assets/scss/now-ui-kit/element-ui-plugins/_tooltip.scss b/src/assets/scss/now-ui-kit/element-ui-plugins/_tooltip.scss index b49e515..1a2d780 100644 --- a/src/assets/scss/now-ui-kit/element-ui-plugins/_tooltip.scss +++ b/src/assets/scss/now-ui-kit/element-ui-plugins/_tooltip.scss @@ -1,30 +1,30 @@ -.el-tooltip__popper{ +.el-tooltip__popper { @extend .tooltip-inner; border: none !important; } -.el-tooltip__popper.is-dark{ +.el-tooltip__popper.is-dark { background-color: $black-color; } -.el-tooltip__popper.is-light{ - &[x-placement^=bottom] .popper__arrow, - &[x-placement^=bottom] .popper__arrow::after{ +.el-tooltip__popper.is-light { + &[x-placement^="bottom"] .popper__arrow, + &[x-placement^="bottom"] .popper__arrow::after { border-bottom-color: white; } - &[x-placement^=top] .popper__arrow, - &[x-placement^=top] .popper__arrow::after{ + &[x-placement^="top"] .popper__arrow, + &[x-placement^="top"] .popper__arrow::after { border-top-color: white; } - &[x-placement^=left] .popper__arrow, - &[x-placement^=left] .popper__arrow::after{ + &[x-placement^="left"] .popper__arrow, + &[x-placement^="left"] .popper__arrow::after { border-left-color: white; } - &[x-placement^=right] .popper__arrow, - &[x-placement^=right] .popper__arrow::after{ + &[x-placement^="right"] .popper__arrow, + &[x-placement^="right"] .popper__arrow::after { border-right-color: white; } } diff --git a/src/assets/scss/now-ui-kit/mixins/_badges.scss b/src/assets/scss/now-ui-kit/mixins/_badges.scss index 15ab1b2..c656b9f 100755 --- a/src/assets/scss/now-ui-kit/mixins/_badges.scss +++ b/src/assets/scss/now-ui-kit/mixins/_badges.scss @@ -1,10 +1,9 @@ @mixin badge-color($color) { - - &, - &[href]:focus, - &[href]:hover{ - border-color: $color; - background-color: $color; - color: $white-color; - } + &, + &[href]:focus, + &[href]:hover { + border-color: $color; + background-color: $color; + color: $white-color; + } } diff --git a/src/assets/scss/now-ui-kit/mixins/_buttons.scss b/src/assets/scss/now-ui-kit/mixins/_buttons.scss index 6a06716..7b539f1 100755 --- a/src/assets/scss/now-ui-kit/mixins/_buttons.scss +++ b/src/assets/scss/now-ui-kit/mixins/_buttons.scss @@ -1,8 +1,105 @@ // Mixin for generating new styles @mixin btn-styles($btn-color, $btn-states-color) { - background-color: $btn-color; + background-color: $btn-color; + + &:hover, + &:focus, + &:not(:disabled):not(.disabled):active, + &:not(:disabled):not(.disabled).active, + &:not(:disabled):not(.disabled):active:focus, + &:not(:disabled):not(.disabled).active:focus, + &:active:hover, + &.active:hover, + .show > &.dropdown-toggle, + .show > &.dropdown-toggle:focus, + .show > &.dropdown-toggle:hover { + background-color: $btn-states-color; + color: $white-color; + box-shadow: none; + } + + &:hover { + box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.17); + } + + &.disabled, + &:disabled, + &[disabled], + fieldset[disabled] & { + &, + &:hover, + &:focus, + &.focus, + &:active, + &.active { + background-color: $btn-color; + border-color: $btn-color; + } + } + // btn-neutral style + @if $btn-color == $white-color { + color: $primary-color; + &.btn-danger { + color: $danger-color; + + &:hover, + &:focus, + &:active { + color: $danger-states-color; + } + } + + &.btn-primary { + color: $primary-color; + + &:hover, + &:focus, + &:active { + color: $primary-states-color; + } + } + + &.btn-info { + color: $info-color; + + &:hover, + &:focus, + &:active { + color: $info-states-color; + } + } + + &.btn-warning { + color: $warning-color; + + &:hover, + &:focus, + &:active { + color: $warning-states-color; + } + } + + &.btn-success { + color: $success-color; + + &:hover, + &:focus, + &:active { + color: $success-states-color; + } + } + + &.btn-default { + color: $default-color; + + &:hover, + &:focus, + &:active { + color: $default-states-color; + } + } &:hover, &:focus, @@ -15,177 +112,73 @@ .show > &.dropdown-toggle, .show > &.dropdown-toggle:focus, .show > &.dropdown-toggle:hover { - background-color: $btn-states-color; - color: $white-color; - box-shadow: none; + background-color: $white-color; + color: $primary-states-color; + box-shadow: none; } - &:hover{ - box-shadow: 0 3px 8px 0 rgba(0,0,0, 0.17); - } + &:hover, + &:focus { + color: $primary-states-color; - &.disabled, - &:disabled, - &[disabled], - fieldset[disabled] & { - &, - &:hover, - &:focus, - &.focus, - &:active, - &.active { - background-color: $btn-color; - border-color: $btn-color; - } + &:not(.nav-link) { + box-shadow: none; + } } + } @else { + color: $white-color; + } - // btn-neutral style - @if $btn-color == $white-color{ - color: $primary-color; - - - &.btn-danger{ - color: $danger-color; - - &:hover, - &:focus, - &:active{ - color: $danger-states-color; - } - } - - &.btn-primary{ - color: $primary-color; - - &:hover, - &:focus, - &:active{ - color: $primary-states-color; - } - } - - &.btn-info{ - color: $info-color; - - &:hover, - &:focus, - &:active{ - color: $info-states-color; - } - } - - &.btn-warning{ - color: $warning-color; - - &:hover, - &:focus, - &:active{ - color: $warning-states-color; - } - } - - &.btn-success{ - color: $success-color; - - &:hover, - &:focus, - &:active{ - color: $success-states-color; - } - } - - &.btn-default{ - color: $default-color; - - &:hover, - &:focus, - &:active{ - color: $default-states-color; - } - } - - &:hover, - &:focus, - &:not(:disabled):not(.disabled):active, - &:not(:disabled):not(.disabled).active, - &:not(:disabled):not(.disabled):active:focus, - &:not(:disabled):not(.disabled).active:focus, - &:active:hover, - &.active:hover, - .show > &.dropdown-toggle, - .show > &.dropdown-toggle:focus, - .show > &.dropdown-toggle:hover { - background-color: $white-color; - color: $primary-states-color; - box-shadow: none; - } - - &:hover, - &:focus{ - color: $primary-states-color; - - &:not(.nav-link){ - box-shadow: none; - } - - } - - } @else { - color: $white-color; - } + &.btn-simple { + color: $btn-color; + border-color: $btn-color; - &.btn-simple{ - color: $btn-color; - border-color: $btn-color; - - &:hover, - &:focus, - &:not(:disabled):not(.disabled):active, - &:not(:disabled):not(.disabled).active, - &:not(:disabled):not(.disabled):active:focus, - &:not(:disabled):not(.disabled).active:focus, - &:active:hover, - &.active:hover, - .show > &.dropdown-toggle, - .show > &.dropdown-toggle:focus, - .show > &.dropdown-toggle:hover{ - background-color: $transparent-bg; - color: $btn-states-color; - border-color: $btn-states-color; - box-shadow: none; - } + &:hover, + &:focus, + &:not(:disabled):not(.disabled):active, + &:not(:disabled):not(.disabled).active, + &:not(:disabled):not(.disabled):active:focus, + &:not(:disabled):not(.disabled).active:focus, + &:active:hover, + &.active:hover, + .show > &.dropdown-toggle, + .show > &.dropdown-toggle:focus, + .show > &.dropdown-toggle:hover { + background-color: $transparent-bg; + color: $btn-states-color; + border-color: $btn-states-color; + box-shadow: none; } + } + + &.btn-link { + color: $btn-color; - &.btn-link{ - color: $btn-color; - - &:hover, - &:focus, - &:not(:disabled):not(.disabled):active, - &:not(:disabled):not(.disabled).active, - &:not(:disabled):not(.disabled):active:focus, - &:not(:disabled):not(.disabled).active:focus, - &:active:hover, - &.active:hover, - .show > &.dropdown-toggle, - .show > &.dropdown-toggle:focus, - .show > &.dropdown-toggle:hover{ - background-color: $transparent-bg; - color: $btn-states-color; - text-decoration: none; - box-shadow: none; - } + &:hover, + &:focus, + &:not(:disabled):not(.disabled):active, + &:not(:disabled):not(.disabled).active, + &:not(:disabled):not(.disabled):active:focus, + &:not(:disabled):not(.disabled).active:focus, + &:active:hover, + &.active:hover, + .show > &.dropdown-toggle, + .show > &.dropdown-toggle:focus, + .show > &.dropdown-toggle:hover { + background-color: $transparent-bg; + color: $btn-states-color; + text-decoration: none; + box-shadow: none; } + } } +@mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border) { + font-size: $font-size; + border-radius: $border; + padding: $padding-vertical $padding-horizontal; -@mixin btn-size($padding-vertical, $padding-horizontal, $font-size, $border){ - font-size: $font-size; - border-radius: $border; - padding: $padding-vertical $padding-horizontal; - - &.btn-simple{ - padding: $padding-vertical - 1 $padding-horizontal - 1; - } - + &.btn-simple { + padding: $padding-vertical - 1 $padding-horizontal - 1; + } } diff --git a/src/assets/scss/now-ui-kit/mixins/_cards.scss b/src/assets/scss/now-ui-kit/mixins/_cards.scss index 5097789..8e34840 100755 --- a/src/assets/scss/now-ui-kit/mixins/_cards.scss +++ b/src/assets/scss/now-ui-kit/mixins/_cards.scss @@ -1,4 +1,4 @@ @mixin icon-color($color) { - box-shadow: 0px 9px 30px -6px $color; - color: $color; + box-shadow: 0px 9px 30px -6px $color; + color: $color; } diff --git a/src/assets/scss/now-ui-kit/mixins/_datepicker.scss b/src/assets/scss/now-ui-kit/mixins/_datepicker.scss index 0b7e907..b0afa0c 100755 --- a/src/assets/scss/now-ui-kit/mixins/_datepicker.scss +++ b/src/assets/scss/now-ui-kit/mixins/_datepicker.scss @@ -1,121 +1,119 @@ @mixin datepicker-colors($color) { - background-color: $color; + background-color: $color; - th, - .day div, - table tr td span{ - color: $white-color; - } + th, + .day div, + table tr td span { + color: $white-color; + } - &:after{ - border-bottom-color: $color; - } + &:after { + border-bottom-color: $color; + } - &.datepicker-orient-top:after{ - border-top-color: $color; - } + &.datepicker-orient-top:after { + border-top-color: $color; + } - .dow{ - color: $datepicker-color-days; - } + .dow { + color: $datepicker-color-days; + } - table tr td.old div, - table tr td.new div, - table tr td span.old, - table tr td span.new{ - color: $datepicker-color-old-new-days; - } + table tr td.old div, + table tr td.new div, + table tr td span.old, + table tr td span.new { + color: $datepicker-color-old-new-days; + } - table tr td span:hover, - table tr td span.focused{ - background:$opacity-1; - } + table tr td span:hover, + table tr td span.focused { + background: $opacity-1; + } - .datepicker-switch:hover, - .prev:hover, - .next:hover, - tfoot tr th:hover { - background: $opacity-2; - } + .datepicker-switch:hover, + .prev:hover, + .next:hover, + tfoot tr th:hover { + background: $opacity-2; + } - table tr td.active div, - table tr td.active:hover div, - table tr td.active.disabled div, - table tr td.active.disabled:hover div { + table tr td.active div, + table tr td.active:hover div, + table tr td.active.disabled div, + table tr td.active.disabled:hover div { + background-color: $white-color; + color: $color; + } - background-color: $white-color; - color: $color; - } + table tr td.day:hover div, + table tr td.day.focused div { + background: $opacity-2; + } - table tr td.day:hover div, - table tr td.day.focused div { - background: $opacity-2; - } - - table tr td.active:hover div, - table tr td.active:hover:hover div, - table tr td.active.disabled:hover div, - table tr td.active.disabled:hover:hover div, - table tr td.active:active div, - table tr td.active:hover:active div, - table tr td.active.disabled:active div, - table tr td.active.disabled:hover:active div, - table tr td.active.active div, - table tr td.active:hover.active div, - table tr td.active.disabled.active div, - table tr td.active.disabled:hover.active div, - table tr td.active.disabled div, - table tr td.active:hover.disabled div, - table tr td.active.disabled.disabled div, - table tr td.active.disabled:hover.disabled div, - table tr td.active[disabled] div, - table tr td.active:hover[disabled] div, - table tr td.active.disabled[disabled] div, - table tr td.active.disabled:hover[disabled] div, - table tr td span.active:hover, - table tr td span.active:hover:hover, - table tr td span.active.disabled:hover, - table tr td span.active.disabled:hover:hover, - table tr td span.active:active, - table tr td span.active:hover:active, - table tr td span.active.disabled:active, - table tr td span.active.disabled:hover:active, - table tr td span.active.active, - table tr td span.active:hover.active, - table tr td span.active.disabled.active, - table tr td span.active.disabled:hover.active, - table tr td span.active.disabled, - table tr td span.active:hover.disabled, - table tr td span.active.disabled.disabled, - table tr td span.active.disabled:hover.disabled, - table tr td span.active[disabled], - table tr td span.active:hover[disabled], - table tr td span.active.disabled[disabled], - table tr td span.active.disabled:hover[disabled]{ - background-color: $white-color; - } - - table tr td span.active:hover, - table tr td span.active:hover:hover, - table tr td span.active.disabled:hover, - table tr td span.active.disabled:hover:hover, - table tr td span.active:active, - table tr td span.active:hover:active, - table tr td span.active.disabled:active, - table tr td span.active.disabled:hover:active, - table tr td span.active.active, - table tr td span.active:hover.active, - table tr td span.active.disabled.active, - table tr td span.active.disabled:hover.active, - table tr td span.active.disabled, - table tr td span.active:hover.disabled, - table tr td span.active.disabled.disabled, - table tr td span.active.disabled:hover.disabled, - table tr td span.active[disabled], - table tr td span.active:hover[disabled], - table tr td span.active.disabled[disabled], - table tr td span.active.disabled:hover[disabled]{ - color: $color; - } + table tr td.active:hover div, + table tr td.active:hover:hover div, + table tr td.active.disabled:hover div, + table tr td.active.disabled:hover:hover div, + table tr td.active:active div, + table tr td.active:hover:active div, + table tr td.active.disabled:active div, + table tr td.active.disabled:hover:active div, + table tr td.active.active div, + table tr td.active:hover.active div, + table tr td.active.disabled.active div, + table tr td.active.disabled:hover.active div, + table tr td.active.disabled div, + table tr td.active:hover.disabled div, + table tr td.active.disabled.disabled div, + table tr td.active.disabled:hover.disabled div, + table tr td.active[disabled] div, + table tr td.active:hover[disabled] div, + table tr td.active.disabled[disabled] div, + table tr td.active.disabled:hover[disabled] div, + table tr td span.active:hover, + table tr td span.active:hover:hover, + table tr td span.active.disabled:hover, + table tr td span.active.disabled:hover:hover, + table tr td span.active:active, + table tr td span.active:hover:active, + table tr td span.active.disabled:active, + table tr td span.active.disabled:hover:active, + table tr td span.active.active, + table tr td span.active:hover.active, + table tr td span.active.disabled.active, + table tr td span.active.disabled:hover.active, + table tr td span.active.disabled, + table tr td span.active:hover.disabled, + table tr td span.active.disabled.disabled, + table tr td span.active.disabled:hover.disabled, + table tr td span.active[disabled], + table tr td span.active:hover[disabled], + table tr td span.active.disabled[disabled], + table tr td span.active.disabled:hover[disabled] { + background-color: $white-color; + } + table tr td span.active:hover, + table tr td span.active:hover:hover, + table tr td span.active.disabled:hover, + table tr td span.active.disabled:hover:hover, + table tr td span.active:active, + table tr td span.active:hover:active, + table tr td span.active.disabled:active, + table tr td span.active.disabled:hover:active, + table tr td span.active.active, + table tr td span.active:hover.active, + table tr td span.active.disabled.active, + table tr td span.active.disabled:hover.active, + table tr td span.active.disabled, + table tr td span.active:hover.disabled, + table tr td span.active.disabled.disabled, + table tr td span.active.disabled:hover.disabled, + table tr td span.active[disabled], + table tr td span.active:hover[disabled], + table tr td span.active.disabled[disabled], + table tr td span.active.disabled:hover[disabled] { + color: $color; + } } diff --git a/src/assets/scss/now-ui-kit/mixins/_dropdown.scss b/src/assets/scss/now-ui-kit/mixins/_dropdown.scss index 638743e..7abd835 100755 --- a/src/assets/scss/now-ui-kit/mixins/_dropdown.scss +++ b/src/assets/scss/now-ui-kit/mixins/_dropdown.scss @@ -1,24 +1,29 @@ -@mixin dropdown-colors($brand-color, $dropdown-header-color, $dropdown-color, $background-color ) { - background-color: $brand-color; +@mixin dropdown-colors( + $brand-color, + $dropdown-header-color, + $dropdown-color, + $background-color +) { + background-color: $brand-color; - &:before{ - color: $brand-color; - } + &:before { + color: $brand-color; + } - .dropdown-header:not([href]):not([tabindex]){ - color: $dropdown-header-color; - } + .dropdown-header:not([href]):not([tabindex]) { + color: $dropdown-header-color; + } - .dropdown-item{ - color: $dropdown-color; + .dropdown-item { + color: $dropdown-color; - &:hover, - &:focus{ - background-color: $background-color; - } + &:hover, + &:focus { + background-color: $background-color; } + } - .dropdown-divider{ - background-color: $background-color; - } + .dropdown-divider { + background-color: $background-color; + } } diff --git a/src/assets/scss/now-ui-kit/mixins/_inputs.scss b/src/assets/scss/now-ui-kit/mixins/_inputs.scss index a437c41..2687fb4 100755 --- a/src/assets/scss/now-ui-kit/mixins/_inputs.scss +++ b/src/assets/scss/now-ui-kit/mixins/_inputs.scss @@ -1,111 +1,112 @@ -@mixin input-size($padding-vertical, $padding-horizontal){ - padding: $padding-vertical $padding-horizontal; +@mixin input-size($padding-vertical, $padding-horizontal) { + padding: $padding-vertical $padding-horizontal; } -@mixin form-control-placeholder($color, $opacity){ - .form-control::-moz-placeholder{ - color: $color; - @include opacity($opacity); - } - .form-control:-moz-placeholder{ - color: $color; - @include opacity($opacity); - } - .form-control::-webkit-input-placeholder{ - color: $color; - @include opacity($opacity); - } - .form-control:-ms-input-placeholder{ - color: $color; - @include opacity($opacity); - } +@mixin form-control-placeholder($color, $opacity) { + .form-control::-moz-placeholder { + color: $color; + @include opacity($opacity); + } + .form-control:-moz-placeholder { + color: $color; + @include opacity($opacity); + } + .form-control::-webkit-input-placeholder { + color: $color; + @include opacity($opacity); + } + .form-control:-ms-input-placeholder { + color: $color; + @include opacity($opacity); + } } -@mixin light-form(){ - border-radius: 0; - border:0; - padding: 0; - background-color: transparent; - +@mixin light-form() { + border-radius: 0; + border: 0; + padding: 0; + background-color: transparent; } - @mixin input-lg-padding($padding-vertical, $padding-horizontal) { - .form-group.no-border.input-lg, - .input-group.no-border.input-lg{ - .input-group-text{ - padding: $padding-vertical 0 $padding-vertical $padding-horizontal; - } + .form-group.no-border.input-lg, + .input-group.no-border.input-lg { + .input-group-text { + padding: $padding-vertical 0 $padding-vertical $padding-horizontal; + } - .form-control{ - padding: $padding-vertical $padding-horizontal; + .form-control { + padding: $padding-vertical $padding-horizontal; - & + .input-group-text{ - padding: $padding-vertical $padding-horizontal $padding-vertical 0; - } - } + & + .input-group-text { + padding: $padding-vertical $padding-horizontal $padding-vertical 0; + } } + } - .form-group.input-lg, - .input-group.input-lg{ - .form-control{ - padding: $padding-vertical - 1 $padding-horizontal - 1; + .form-group.input-lg, + .input-group.input-lg { + .form-control { + padding: $padding-vertical - 1 $padding-horizontal - 1; - & + .input-group-text{ - padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0; - } - } + & + .input-group-text { + padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - + 1 0; + } + } - .input-group-text{ - padding: $padding-vertical - 1 0 $padding-vertical $padding-horizontal - 1; + .input-group-text { + padding: $padding-vertical - 1 0 $padding-vertical $padding-horizontal - 1; - & + .form-control{ - padding: $padding-vertical $padding-horizontal - 1 $padding-vertical $padding-horizontal - 3; - } - } + & + .form-control { + padding: $padding-vertical $padding-horizontal - 1 $padding-vertical + $padding-horizontal - 3; + } } + } } - - @mixin input-base-padding($padding-vertical, $padding-horizontal) { - .form-group.no-border, - .input-group.no-border{ - .form-control{ - padding: $padding-vertical $padding-horizontal; - - & + .input-group-text{ - padding: $padding-vertical $padding-horizontal $padding-vertical 0; - } - } - - .input-group-text{ - padding: $padding-vertical 0 $padding-vertical $padding-horizontal; - } + .form-group.no-border, + .input-group.no-border { + .form-control { + padding: $padding-vertical $padding-horizontal; + + & + .input-group-text { + padding: $padding-vertical $padding-horizontal $padding-vertical 0; + } } - .form-group, - .input-group{ - .form-control{ - padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 $padding-horizontal - 1; - - & + .input-group-text{ - padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - 1 0; - } - } + .input-group-text { + padding: $padding-vertical 0 $padding-vertical $padding-horizontal; + } + } + + .form-group, + .input-group { + .form-control { + padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - + 1 $padding-horizontal - 1; + + & + .input-group-text { + padding: $padding-vertical - 1 $padding-horizontal - 1 $padding-vertical - + 1 0; + } + } - .input-group-text{ - padding: $padding-vertical - 1 0 $padding-vertical - 1 $padding-horizontal - 1; + .input-group-text { + padding: $padding-vertical - 1 0 $padding-vertical - 1 $padding-horizontal - + 1; - & + .form-control, - & ~ .form-control{ - padding:$padding-vertical - 1 $padding-horizontal $padding-vertical $padding-horizontal - 3; - } - } + & + .form-control, + & ~ .form-control { + padding: $padding-vertical - 1 $padding-horizontal $padding-vertical + $padding-horizontal - 3; + } } + } } - //color1 = $opacity-5 //color2 = $opacity-8 //color3 = $white-color @@ -113,93 +114,92 @@ //color5 = $opacity-1 //color6 = $opacity-2 - @mixin input-coloured-bg($color1, $color2, $color3, $color4, $color5, $color6) { - @include form-control-placeholder(darken($color2, 8%), 1); + @include form-control-placeholder(darken($color2, 8%), 1); - .form-control{ - border-color: $color1; - color: $color2; + .form-control { + border-color: $color1; + color: $color2; - &:focus{ - border-color: $color3; - background-color: $color4; - color: $color3; - } + &:focus { + border-color: $color3; + background-color: $color4; + color: $color3; } + } - .has-success, - .has-danger{ - &:after{ - color: $color3; - } + .has-success, + .has-danger { + &:after { + color: $color3; } + } - .has-danger{ - .form-control{ - background-color: $color4; - } + .has-danger { + .form-control { + background-color: $color4; } - - .input-group-text{ - background-color: $color4; - border-color: $color1; - color: $color2; + } + + .input-group-text { + background-color: $color4; + border-color: $color1; + color: $color2; + } + + .input-group-focus { + .input-group-text { + background-color: $color4; + border-color: $color3; + color: $color3; } - - .input-group-focus{ - .input-group-text{ - background-color: $color4; - border-color: $color3; - color: $color3; - } + } + + .form-group.no-border, + .input-group.no-border { + .form-control { + background-color: $color5; + color: $color2; + + &:focus, + &:active, + &:active { + background-color: $color6; + color: $color3; + } } - .form-group.no-border, - .input-group.no-border{ - .form-control{ - background-color: $color5; - color: $color2; + .form-control + .input-group-text { + background-color: $color5; - &:focus, - &:active, - &:active{ - background-color: $color6; - color: $color3; - } - } - - .form-control + .input-group-text{ - background-color: $color5; - - &:focus, - &:active, - &:active{ - background-color: $color6; - color: $color3; - } - } + &:focus, + &:active, + &:active { + background-color: $color6; + color: $color3; + } + } - .form-control{ - &:focus{ - & + .input-group-text{ - background-color: $color6; - color: $color3; - } - } + .form-control { + &:focus { + & + .input-group-text { + background-color: $color6; + color: $color3; } + } + } - .input-group-text{ - background-color: $color5; - border: none; - color: $color2; - } + .input-group-text { + background-color: $color5; + border: none; + color: $color2; + } - &.input-group-focus{ - .input-group-text{ - background-color: $color6; - color: $color3; - } - } + &.input-group-focus { + .input-group-text { + background-color: $color6; + color: $color3; + } } + } } diff --git a/src/assets/scss/now-ui-kit/mixins/_modals.scss b/src/assets/scss/now-ui-kit/mixins/_modals.scss index a796284..5d74079 100755 --- a/src/assets/scss/now-ui-kit/mixins/_modals.scss +++ b/src/assets/scss/now-ui-kit/mixins/_modals.scss @@ -1,12 +1,10 @@ @mixin modal-colors($bg-color, $color) { - .modal-content{ - background-color: $bg-color; - color: $color; - } - - .modal-header .close{ - color: $color; - } - + .modal-content { + background-color: $bg-color; + color: $color; + } + .modal-header .close { + color: $color; + } } diff --git a/src/assets/scss/now-ui-kit/mixins/_navbar.scss b/src/assets/scss/now-ui-kit/mixins/_navbar.scss index a6ce68f..e4578a8 100755 --- a/src/assets/scss/now-ui-kit/mixins/_navbar.scss +++ b/src/assets/scss/now-ui-kit/mixins/_navbar.scss @@ -1,124 +1,123 @@ @mixin navbar-responsive() { - &.menu-on-left .navbar-translate { - flex-direction: row-reverse; - } - - .navbar{ - .navbar-nav{ - margin-top: 53px; - position: relative; - max-height: calc(100vh - 75px); - min-height: 100%; - overflow: auto; - - &.navbar-logo{ - top: 0; - height: 53px; - } - } - - .dropdown.show .dropdown-menu, - .dropdown .dropdown-menu{ - background-color: transparent; - border: 0; - transition: none; - -webkit-box-shadow: none; - box-shadow: none; - width: auto; - margin: 0 1rem; - margin-bottom: 15px; - padding-top: 0; - height: 125px; - overflow-y: scroll; - - &:before{ - display: none; - } - } + &.menu-on-left .navbar-translate { + flex-direction: row-reverse; + } - .dropdown{ - .dropdown-item{ - padding-left: 2.5rem; - } + .navbar { + .navbar-nav { + margin-top: 53px; + position: relative; + max-height: calc(100vh - 75px); + min-height: 100%; + overflow: auto; - .dropdown-menu{ - display: none; - } + &.navbar-logo { + top: 0; + height: 53px; + } + } - &.show .dropdown-menu{ - display: block; - } - } + .dropdown.show .dropdown-menu, + .dropdown .dropdown-menu { + background-color: transparent; + border: 0; + transition: none; + -webkit-box-shadow: none; + box-shadow: none; + width: auto; + margin: 0 1rem; + margin-bottom: 15px; + padding-top: 0; + height: 125px; + overflow-y: scroll; + + &:before { + display: none; + } + } - .dropdown-menu .dropdown-item:focus, - .dropdown-menu .dropdown-item:hover{ - color: $white-color; - border-radius: $border-radius-small; - } + .dropdown { + .dropdown-item { + padding-left: 2.5rem; + } - .navbar-translate{ - width: 100%; - position: relative; - display: flex; - -ms-flex-pack: justify!important; - justify-content: space-between!important; - -ms-flex-align: center; - align-items: center; - @include transform-translate-x(0px); - @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1)); - } + .dropdown-menu { + display: none; + } - .navbar-toggler-bar{ - display: block; - position: relative; - width: 22px; - height: 1px; - border-radius: 1px; - background: $white-bg; + &.show .dropdown-menu { + display: block; + } + } - & + .navbar-toggler-bar{ - margin-top: 7px; - } + .dropdown-menu .dropdown-item:focus, + .dropdown-menu .dropdown-item:hover { + color: $white-color; + border-radius: $border-radius-small; + } - &.bar2{ - width: 17px; - transition: width .2s linear; - } - } + .navbar-translate { + width: 100%; + position: relative; + display: flex; + -ms-flex-pack: justify !important; + justify-content: space-between !important; + -ms-flex-align: center; + align-items: center; + @include transform-translate-x(0px); + @include transition(0.5s, cubic-bezier(0.685, 0.0473, 0.346, 1)); + } - &.bg-white:not(.navbar-transparent) .navbar-toggler-bar{ - background: $default-color; - } + .navbar-toggler-bar { + display: block; + position: relative; + width: 22px; + height: 1px; + border-radius: 1px; + background: $white-bg; + + & + .navbar-toggler-bar { + margin-top: 7px; + } + + &.bar2 { + width: 17px; + transition: width 0.2s linear; + } + } + &.bg-white:not(.navbar-transparent) .navbar-toggler-bar { + background: $default-color; } + } - // .bar1, - // .bar2, - // .bar3 { - // outline: 1px solid transparent; - // } - // .bar1 { - // top: 0px; - // @include bar-animation($topbar-back); - // } - // .bar2 { - // opacity: 1; - // } - // .bar3 { - // bottom: 0px; - // @include bar-animation($bottombar-back); - // } - // .toggled .bar1 { - // top: 6px; - // @include bar-animation($topbar-x); - // } - // .toggled .bar2 { - // opacity: 0; - // } - // .toggled .bar3 { - // bottom: 6px; - // @include bar-animation($bottombar-x); - // } + // .bar1, + // .bar2, + // .bar3 { + // outline: 1px solid transparent; + // } + // .bar1 { + // top: 0px; + // @include bar-animation($topbar-back); + // } + // .bar2 { + // opacity: 1; + // } + // .bar3 { + // bottom: 0px; + // @include bar-animation($bottombar-back); + // } + // .toggled .bar1 { + // top: 6px; + // @include bar-animation($topbar-x); + // } + // .toggled .bar2 { + // opacity: 0; + // } + // .toggled .bar3 { + // bottom: 6px; + // @include bar-animation($bottombar-x); + // } .top-bar { transform: rotate(0); @@ -132,17 +131,15 @@ .top-bar, .middle-bar, - .bottom-bar{ + .bottom-bar { transition: all 0.2s; } - - .toggled { .top-bar { - transform: rotate(45deg); - transform-origin: 0%; - } + transform: rotate(45deg); + transform-origin: 0%; + } .bottom-bar { transform: rotate(-45deg); transform-origin: 0%; @@ -152,106 +149,114 @@ } } - - - // - // @include topbar-x-rotation(); - // @include topbar-back-rotation(); - // @include bottombar-x-rotation(); - // @include bottombar-back-rotation(); - // - // @-webkit-keyframes fadeIn { - // 0% {opacity: 0;} - // 100% {opacity: 1;} - // } - // @-moz-keyframes fadeIn { - // 0% {opacity: 0;} - // 100% {opacity: 1;} - // } - // @keyframes fadeIn { - // 0% {opacity: 0;} - // 100% {opacity: 1;} - // } + // + // @include topbar-x-rotation(); + // @include topbar-back-rotation(); + // @include bottombar-x-rotation(); + // @include bottombar-back-rotation(); + // + // @-webkit-keyframes fadeIn { + // 0% {opacity: 0;} + // 100% {opacity: 1;} + // } + // @-moz-keyframes fadeIn { + // 0% {opacity: 0;} + // 100% {opacity: 1;} + // } + // @keyframes fadeIn { + // 0% {opacity: 0;} + // 100% {opacity: 1;} + // } } @mixin navbar-collapse() { - .navbar-collapse{ - position: fixed; - display: block; - top: 0; - height: 100% !important; - width: 300px; - right: 0; - z-index: 1032; - visibility: visible; - background-color: #999; - overflow-y: visible; - border-top: none; - text-align: left; - - max-height: none !important; - - @include transform-translate-x(300px); - @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1)); - - &:before{ - background: $brand-primary; /* For browsers that do not support gradients */ - background: -webkit-linear-gradient($brand-primary 0%, #000 80%); /* For Safari 5.1 to 6.0 */ - background: -o-linear-gradient($brand-primary 0%, #000 80%); /* For Opera 11.1 to 12.0 */ - background: -moz-linear-gradient($brand-primary 0%, #000 80%); /* For Firefox 3.6 to 15 */ - background: linear-gradient($brand-primary 0%, #000 80%); /* Standard syntax (must be last) */ - @include opacity(.76); - - display: block; - content: ""; - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - z-index: -1; - } + .navbar-collapse { + position: fixed; + display: block; + top: 0; + height: 100% !important; + width: 300px; + right: 0; + z-index: 1032; + visibility: visible; + background-color: #999; + overflow-y: visible; + border-top: none; + text-align: left; + + max-height: none !important; + + @include transform-translate-x(300px); + @include transition(0.5s, cubic-bezier(0.685, 0.0473, 0.346, 1)); + + &:before { + background: $brand-primary; /* For browsers that do not support gradients */ + background: -webkit-linear-gradient( + $brand-primary 0%, + #000 80% + ); /* For Safari 5.1 to 6.0 */ + background: -o-linear-gradient( + $brand-primary 0%, + #000 80% + ); /* For Opera 11.1 to 12.0 */ + background: -moz-linear-gradient( + $brand-primary 0%, + #000 80% + ); /* For Firefox 3.6 to 15 */ + background: linear-gradient( + $brand-primary 0%, + #000 80% + ); /* Standard syntax (must be last) */ + @include opacity(0.76); + + display: block; + content: ""; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: -1; + } - .navbar-nav:not(.navbar-logo){ - .nav-link { - margin: 0 1rem; - margin-top: 0.3125rem; + .navbar-nav:not(.navbar-logo) { + .nav-link { + margin: 0 1rem; + margin-top: 0.3125rem; - &:not(.btn){ - color: $white-color !important; - } - } - } - - .dropdown-menu .dropdown-item{ - color: $white-color; + &:not(.btn) { + color: $white-color !important; } + } } - @include navbar-responsive(); - - - [class*="navbar-expand-"] .navbar-collapse{ - width: 300px; + .dropdown-menu .dropdown-item { + color: $white-color; } + } - .wrapper{ - @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1)); - } + @include navbar-responsive(); - #bodyClick{ - height: 100%; - width: 100%; - position: fixed; - opacity: 1; - top: 0; - left: auto; - right: 300px; - content: ""; - z-index: 9999; - overflow-x: hidden; - background-color: transparent; - @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1)); - } + [class*="navbar-expand-"] .navbar-collapse { + width: 300px; + } + + .wrapper { + @include transition(0.5s, cubic-bezier(0.685, 0.0473, 0.346, 1)); + } + #bodyClick { + height: 100%; + width: 100%; + position: fixed; + opacity: 1; + top: 0; + left: auto; + right: 300px; + content: ""; + z-index: 9999; + overflow-x: hidden; + background-color: transparent; + @include transition(0.5s, cubic-bezier(0.685, 0.0473, 0.346, 1)); + } } diff --git a/src/assets/scss/now-ui-kit/mixins/_pages.scss b/src/assets/scss/now-ui-kit/mixins/_pages.scss index 713dfd3..002330f 100755 --- a/src/assets/scss/now-ui-kit/mixins/_pages.scss +++ b/src/assets/scss/now-ui-kit/mixins/_pages.scss @@ -1,7 +1,19 @@ -@mixin linear-gradient($color1, $color2){ - background: $color1; /* For browsers that do not support gradients */ - background: -webkit-linear-gradient(90deg, $color1 , $color2); /* For Safari 5.1 to 6.0 */ - background: -o-linear-gradient(90deg, $color1, $color2); /* For Opera 11.1 to 12.0 */ - background: -moz-linear-gradient(90deg, $color1, $color2); /* For Firefox 3.6 to 15 */ - background: linear-gradient(0deg, $color1 , $color2); /* Standard syntax */ +@mixin linear-gradient($color1, $color2) { + background: $color1; /* For browsers that do not support gradients */ + background: -webkit-linear-gradient( + 90deg, + $color1, + $color2 + ); /* For Safari 5.1 to 6.0 */ + background: -o-linear-gradient( + 90deg, + $color1, + $color2 + ); /* For Opera 11.1 to 12.0 */ + background: -moz-linear-gradient( + 90deg, + $color1, + $color2 + ); /* For Firefox 3.6 to 15 */ + background: linear-gradient(0deg, $color1, $color2); /* Standard syntax */ } diff --git a/src/assets/scss/now-ui-kit/mixins/_popovers.scss b/src/assets/scss/now-ui-kit/mixins/_popovers.scss index ef9727a..dc5ff1d 100755 --- a/src/assets/scss/now-ui-kit/mixins/_popovers.scss +++ b/src/assets/scss/now-ui-kit/mixins/_popovers.scss @@ -1,29 +1,28 @@ @mixin popover-color($color, $text-color) { - background-color: $color; + background-color: $color; - .popover-body{ - color: $text-color; - } + .popover-body { + color: $text-color; + } + &.bs-popover-right .arrow:after { + border-right-color: $color; + } - &.bs-popover-right .arrow:after{ - border-right-color:$color; - } + &.bs-popover-top .arrow:after { + border-top-color: $color; + } - &.bs-popover-top .arrow:after{ - border-top-color:$color; - } + &.bs-popover-bottom .arrow:after { + border-bottom-color: $color; + } - &.bs-popover-bottom .arrow:after{ - border-bottom-color:$color; - } + &.bs-popover-left .arrow:after { + border-left-color: $color; + } - &.bs-popover-left .arrow:after{ - border-left-color:$color; - } - - .popover-header{ - color: $text-color; - opacity: .6; - } + .popover-header { + color: $text-color; + opacity: 0.6; + } } diff --git a/src/assets/scss/now-ui-kit/mixins/_vendor-prefixes.scss b/src/assets/scss/now-ui-kit/mixins/_vendor-prefixes.scss index ff18e19..9a932da 100755 --- a/src/assets/scss/now-ui-kit/mixins/_vendor-prefixes.scss +++ b/src/assets/scss/now-ui-kit/mixins/_vendor-prefixes.scss @@ -1,169 +1,291 @@ @mixin box-shadow($shadow...) { -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 - box-shadow: $shadow; + box-shadow: $shadow; } @mixin transition-input-focus-color() { - -webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; - -moz-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; - -o-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; - -ms-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; - transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out; + -webkit-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, + background-color 0.3s ease-in-out; + -moz-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, + background-color 0.3s ease-in-out; + -o-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, + background-color 0.3s ease-in-out; + -ms-transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, + background-color 0.3s ease-in-out; + transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, + background-color 0.3s ease-in-out; } - -@mixin transition($time, $type){ - -webkit-transition: all $time $type; - -moz-transition: all $time $type; - -o-transition: all $time $type; - -ms-transition: all $time $type; - transition: all $time $type; +@mixin transition($time, $type) { + -webkit-transition: all $time $type; + -moz-transition: all $time $type; + -o-transition: all $time $type; + -ms-transition: all $time $type; + transition: all $time $type; } -@mixin transition-on-prop($prop ,$time, $type){ - -webkit-transition: $prop $time $type; - -moz-transition: $prop $time $type; - -o-transition: $prop $time $type; - -ms-transition: all $time $type; - transition: $prop $time $type; +@mixin transition-on-prop($prop, $time, $type) { + -webkit-transition: $prop $time $type; + -moz-transition: $prop $time $type; + -o-transition: $prop $time $type; + -ms-transition: all $time $type; + transition: $prop $time $type; } -@mixin rotate-180(){ - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - transform: rotate(180deg); +@mixin rotate-180() { + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } -@mixin transform-scale($value){ --webkit-transform: scale($value); --moz-transform: scale($value); --o-transform: scale($value); --ms-transform: scale($value); -transform: scale($value); +@mixin transform-scale($value) { + -webkit-transform: scale($value); + -moz-transform: scale($value); + -o-transform: scale($value); + -ms-transform: scale($value); + transform: scale($value); } -@mixin transform-translate-x($value){ - -webkit-transform: translate3d($value, 0, 0); - -moz-transform: translate3d($value, 0, 0); - -o-transform: translate3d($value, 0, 0); - -ms-transform: translate3d($value, 0, 0); - transform: translate3d($value, 0, 0); +@mixin transform-translate-x($value) { + -webkit-transform: translate3d($value, 0, 0); + -moz-transform: translate3d($value, 0, 0); + -o-transform: translate3d($value, 0, 0); + -ms-transform: translate3d($value, 0, 0); + transform: translate3d($value, 0, 0); } @mixin transform-translate-y-dropdown($value) { - -webkit-transform: translate3d(0,$value,0) !important; - -moz-transform: translate3d(0,$value,0) !important; - -o-transform: translate3d(0,$value,0) !important; - -ms-transform: translate3d(0,$value,0) !important; - transform: translate3d(0,$value,0) !important; -} - -@mixin transform-translate-y($value){ - -webkit-transform: translate3d(0,$value,0); - -moz-transform: translate3d(0,$value,0); - -o-transform: translate3d(0,$value,0); - -ms-transform: translate3d(0,$value,0); - transform: translate3d(0,$value,0); + -webkit-transform: translate3d(0, $value, 0) !important; + -moz-transform: translate3d(0, $value, 0) !important; + -o-transform: translate3d(0, $value, 0) !important; + -ms-transform: translate3d(0, $value, 0) !important; + transform: translate3d(0, $value, 0) !important; +} + +@mixin transform-translate-y($value) { + -webkit-transform: translate3d(0, $value, 0); + -moz-transform: translate3d(0, $value, 0); + -o-transform: translate3d(0, $value, 0); + -ms-transform: translate3d(0, $value, 0); + transform: translate3d(0, $value, 0); } -@mixin bar-animation($type){ - -webkit-animation: $type 500ms linear 0s; - -moz-animation: $type 500ms linear 0s; - animation: $type 500ms 0s; - -webkit-animation-fill-mode: forwards; - -moz-animation-fill-mode: forwards; - animation-fill-mode: forwards; +@mixin bar-animation($type) { + -webkit-animation: $type 500ms linear 0s; + -moz-animation: $type 500ms linear 0s; + animation: $type 500ms 0s; + -webkit-animation-fill-mode: forwards; + -moz-animation-fill-mode: forwards; + animation-fill-mode: forwards; } -@mixin topbar-x-rotation(){ - @keyframes topbar-x { - 0% {top: 0px; transform: rotate(0deg); } - 45% {top: 6px; transform: rotate(145deg); } - 75% {transform: rotate(130deg); } - 100% {transform: rotate(135deg); } +@mixin topbar-x-rotation() { + @keyframes topbar-x { + 0% { + top: 0px; + transform: rotate(0deg); + } + 45% { + top: 6px; + transform: rotate(145deg); + } + 75% { + transform: rotate(130deg); + } + 100% { + transform: rotate(135deg); + } + } + @-webkit-keyframes topbar-x { + 0% { + top: 0px; + -webkit-transform: rotate(0deg); + } + 45% { + top: 6px; + -webkit-transform: rotate(145deg); + } + 75% { + -webkit-transform: rotate(130deg); + } + 100% { + -webkit-transform: rotate(135deg); + } + } + @-moz-keyframes topbar-x { + 0% { + top: 0px; + -moz-transform: rotate(0deg); } - @-webkit-keyframes topbar-x { - 0% {top: 0px; -webkit-transform: rotate(0deg); } - 45% {top: 6px; -webkit-transform: rotate(145deg); } - 75% {-webkit-transform: rotate(130deg); } - 100% { -webkit-transform: rotate(135deg); } + 45% { + top: 6px; + -moz-transform: rotate(145deg); } - @-moz-keyframes topbar-x { - 0% {top: 0px; -moz-transform: rotate(0deg); } - 45% {top: 6px; -moz-transform: rotate(145deg); } - 75% {-moz-transform: rotate(130deg); } - 100% { -moz-transform: rotate(135deg); } + 75% { + -moz-transform: rotate(130deg); } + 100% { + -moz-transform: rotate(135deg); + } + } } -@mixin topbar-back-rotation(){ - @keyframes topbar-back { - 0% { top: 6px; transform: rotate(135deg); } - 45% { transform: rotate(-10deg); } - 75% { transform: rotate(5deg); } - 100% { top: 0px; transform: rotate(0); } +@mixin topbar-back-rotation() { + @keyframes topbar-back { + 0% { + top: 6px; + transform: rotate(135deg); + } + 45% { + transform: rotate(-10deg); + } + 75% { + transform: rotate(5deg); } + 100% { + top: 0px; + transform: rotate(0); + } + } - @-webkit-keyframes topbar-back { - 0% { top: 6px; -webkit-transform: rotate(135deg); } - 45% { -webkit-transform: rotate(-10deg); } - 75% { -webkit-transform: rotate(5deg); } - 100% { top: 0px; -webkit-transform: rotate(0); } + @-webkit-keyframes topbar-back { + 0% { + top: 6px; + -webkit-transform: rotate(135deg); + } + 45% { + -webkit-transform: rotate(-10deg); } + 75% { + -webkit-transform: rotate(5deg); + } + 100% { + top: 0px; + -webkit-transform: rotate(0); + } + } - @-moz-keyframes topbar-back { - 0% { top: 6px; -moz-transform: rotate(135deg); } - 45% { -moz-transform: rotate(-10deg); } - 75% { -moz-transform: rotate(5deg); } - 100% { top: 0px; -moz-transform: rotate(0); } + @-moz-keyframes topbar-back { + 0% { + top: 6px; + -moz-transform: rotate(135deg); + } + 45% { + -moz-transform: rotate(-10deg); + } + 75% { + -moz-transform: rotate(5deg); + } + 100% { + top: 0px; + -moz-transform: rotate(0); } + } } -@mixin bottombar-x-rotation(){ - @keyframes bottombar-x { - 0% {bottom: 0px; transform: rotate(0deg);} - 45% {bottom: 6px; transform: rotate(-145deg);} - 75% {transform: rotate(-130deg);} - 100% {transform: rotate(-135deg);} +@mixin bottombar-x-rotation() { + @keyframes bottombar-x { + 0% { + bottom: 0px; + transform: rotate(0deg); } - @-webkit-keyframes bottombar-x { - 0% {bottom: 0px; -webkit-transform: rotate(0deg);} - 45% {bottom: 6px; -webkit-transform: rotate(-145deg);} - 75% {-webkit-transform: rotate(-130deg);} - 100% {-webkit-transform: rotate(-135deg);} + 45% { + bottom: 6px; + transform: rotate(-145deg); } - @-moz-keyframes bottombar-x { - 0% {bottom: 0px; -moz-transform: rotate(0deg);} - 45% {bottom: 6px; -moz-transform: rotate(-145deg);} - 75% {-moz-transform: rotate(-130deg);} - 100% {-moz-transform: rotate(-135deg);} + 75% { + transform: rotate(-130deg); } + 100% { + transform: rotate(-135deg); + } + } + @-webkit-keyframes bottombar-x { + 0% { + bottom: 0px; + -webkit-transform: rotate(0deg); + } + 45% { + bottom: 6px; + -webkit-transform: rotate(-145deg); + } + 75% { + -webkit-transform: rotate(-130deg); + } + 100% { + -webkit-transform: rotate(-135deg); + } + } + @-moz-keyframes bottombar-x { + 0% { + bottom: 0px; + -moz-transform: rotate(0deg); + } + 45% { + bottom: 6px; + -moz-transform: rotate(-145deg); + } + 75% { + -moz-transform: rotate(-130deg); + } + 100% { + -moz-transform: rotate(-135deg); + } + } } -@mixin bottombar-back-rotation{ - @keyframes bottombar-back { - 0% { bottom: 6px;transform: rotate(-135deg);} - 45% { transform: rotate(10deg);} - 75% { transform: rotate(-5deg);} - 100% { bottom: 0px;transform: rotate(0);} +@mixin bottombar-back-rotation { + @keyframes bottombar-back { + 0% { + bottom: 6px; + transform: rotate(-135deg); } - @-webkit-keyframes bottombar-back { - 0% {bottom: 6px;-webkit-transform: rotate(-135deg);} - 45% {-webkit-transform: rotate(10deg);} - 75% {-webkit-transform: rotate(-5deg);} - 100% {bottom: 0px;-webkit-transform: rotate(0);} + 45% { + transform: rotate(10deg); } - @-moz-keyframes bottombar-back { - 0% {bottom: 6px;-moz-transform: rotate(-135deg);} - 45% {-moz-transform: rotate(10deg);} - 75% {-moz-transform: rotate(-5deg);} - 100% {bottom: 0px;-moz-transform: rotate(0);} + 75% { + transform: rotate(-5deg); } - + 100% { + bottom: 0px; + transform: rotate(0); + } + } + @-webkit-keyframes bottombar-back { + 0% { + bottom: 6px; + -webkit-transform: rotate(-135deg); + } + 45% { + -webkit-transform: rotate(10deg); + } + 75% { + -webkit-transform: rotate(-5deg); + } + 100% { + bottom: 0px; + -webkit-transform: rotate(0); + } + } + @-moz-keyframes bottombar-back { + 0% { + bottom: 6px; + -moz-transform: rotate(-135deg); + } + 45% { + -moz-transform: rotate(10deg); + } + 75% { + -moz-transform: rotate(-5deg); + } + 100% { + bottom: 0px; + -moz-transform: rotate(0); + } + } } - @mixin nc-rotate($degrees, $rotation) { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}); -webkit-transform: rotate($degrees); diff --git a/src/assets/scss/now-ui-kit/plugins/_plugin-bootstrap-switch.scss b/src/assets/scss/now-ui-kit/plugins/_plugin-bootstrap-switch.scss index 08fe485..1eed69f 100755 --- a/src/assets/scss/now-ui-kit/plugins/_plugin-bootstrap-switch.scss +++ b/src/assets/scss/now-ui-kit/plugins/_plugin-bootstrap-switch.scss @@ -6,43 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 */ - - - - - - - - - - - - - //* IMPORTANT! Creative Tim Notice: this file has major changes to fit the NOW UI Kit's design. If you want to use the plugin as it was before our changes, please get the old files from http://www.bootstrap-switch.org - - - - - - - - - - - - - - - - - - - - - - - - +//* IMPORTANT! Creative Tim Notice: this file has major changes to fit the NOW UI Kit's design. If you want to use the plugin as it was before our changes, please get the old files from http://www.bootstrap-switch.org .bootstrap-switch { display: inline-block; @@ -63,10 +27,11 @@ -ms-user-select: none; user-select: none; vertical-align: middle; - -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; - transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + -webkit-transition: border-color ease-in-out 0.15s, + box-shadow ease-in-out 0.15s; + transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; margin-right: 20px; - background: rgba($black-color, .2); + background: rgba($black-color, 0.2); } .bootstrap-switch .bootstrap-switch-container { @@ -93,8 +58,7 @@ text-indent: -5px; line-height: 15px; -webkit-transition: 0.25s ease-out; - transition: 0.25s ease-out; - + transition: 0.25s ease-out; } .bootstrap-switch .bootstrap-switch-handle-on, .bootstrap-switch .bootstrap-switch-handle-off { @@ -150,16 +114,16 @@ box-shadow: 0 1px 11px rgba(0, 0, 0, 0.25); } -.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label{ - background-color: rgba(23, 23, 23, .4); +.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-label { + background-color: rgba(23, 23, 23, 0.4); } -.bootstrap-switch.bootstrap-switch-on:hover .bootstrap-switch-label{ - width: 27px !important; - margin-left: -16px; +.bootstrap-switch.bootstrap-switch-on:hover .bootstrap-switch-label { + width: 27px !important; + margin-left: -16px; } -.bootstrap-switch.bootstrap-switch-off:hover .bootstrap-switch-label{ - width: 27px !important; - margin-left: -11px; +.bootstrap-switch.bootstrap-switch-off:hover .bootstrap-switch-label { + width: 27px !important; + margin-left: -11px; } .bootstrap-switch .bootstrap-switch-handle-on { border-bottom-left-radius: 3px; @@ -168,8 +132,8 @@ .bootstrap-switch .bootstrap-switch-handle-off { text-indent: 6px; } -.bootstrap-switch input[type='radio'], -.bootstrap-switch input[type='checkbox'] { +.bootstrap-switch input[type="radio"], +.bootstrap-switch input[type="checkbox"] { position: absolute !important; top: 0; left: 0; @@ -177,8 +141,8 @@ filter: alpha(opacity=0); z-index: -1; } -.bootstrap-switch input[type='radio'].form-control, -.bootstrap-switch input[type='checkbox'].form-control { +.bootstrap-switch input[type="radio"].form-control, +.bootstrap-switch input[type="checkbox"].form-control { height: auto; } .bootstrap-switch.bootstrap-switch-mini .bootstrap-switch-handle-on, @@ -253,52 +217,62 @@ // border-top-left-radius: 3px; // } -.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-container{ - margin-left: -2px !important; +.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-container { + margin-left: -2px !important; } -.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-container{ - margin-left: -39px !important; +.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-container { + margin-left: -39px !important; } -.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label{ - &:before{ - background-color: #FFFFFF; - } +.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label { + &:before { + background-color: #ffffff; + } } -.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-red ~ .bootstrap-switch-default{ - background-color: $brand-danger; +.bootstrap-switch.bootstrap-switch-on + .bootstrap-switch-red + ~ .bootstrap-switch-default { + background-color: $brand-danger; } -.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-orange ~ .bootstrap-switch-default{ - background-color: $brand-warning; +.bootstrap-switch.bootstrap-switch-on + .bootstrap-switch-orange + ~ .bootstrap-switch-default { + background-color: $brand-warning; } -.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-green ~ .bootstrap-switch-default{ - background-color: $brand-success; +.bootstrap-switch.bootstrap-switch-on + .bootstrap-switch-green + ~ .bootstrap-switch-default { + background-color: $brand-success; } -.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-brown ~ .bootstrap-switch-default{ - background-color: $brand-primary; +.bootstrap-switch.bootstrap-switch-on + .bootstrap-switch-brown + ~ .bootstrap-switch-default { + background-color: $brand-primary; } -.bootstrap-switch.bootstrap-switch-on .bootstrap-switch-blue ~ .bootstrap-switch-default{ - background-color: $brand-info; +.bootstrap-switch.bootstrap-switch-on + .bootstrap-switch-blue + ~ .bootstrap-switch-default { + background-color: $brand-info; } .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-red, .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-brown, .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-blue, .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-orange, -.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-green{ - background-color: $light-gray; +.bootstrap-switch.bootstrap-switch-off .bootstrap-switch-green { + background-color: $light-gray; } -.bootstrap-switch-off .bootstrap-switch-handle-on{ - opacity: 0; +.bootstrap-switch-off .bootstrap-switch-handle-on { + opacity: 0; } -.bootstrap-switch-on .bootstrap-switch-handle-off{ - opacity: 0; +.bootstrap-switch-on .bootstrap-switch-handle-off { + opacity: 0; } diff --git a/src/assets/scss/now-ui-kit/plugins/_plugin-datepicker.scss b/src/assets/scss/now-ui-kit/plugins/_plugin-datepicker.scss index 529bccf..26eb6be 100755 --- a/src/assets/scss/now-ui-kit/plugins/_plugin-datepicker.scss +++ b/src/assets/scss/now-ui-kit/plugins/_plugin-datepicker.scss @@ -11,7 +11,8 @@ border-radius: 4px; direction: ltr; @include transform-translate-y(-40px); - transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s; + transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, + opacity 0.3s ease 0s, height 0s linear 0.35s; @include opacity(0); visibility: hidden; @@ -19,12 +20,12 @@ width: 254px; max-width: 254px; - &.dropdown-menu:before{ - display: none; + &.dropdown-menu:before { + display: none; } - &.datepicker-primary{ - @include datepicker-colors($primary-color); + &.datepicker-primary { + @include datepicker-colors($primary-color); } } .datepicker-inline { @@ -44,7 +45,7 @@ left: 0; } .datepicker-dropdown:before { - content: ''; + content: ""; display: inline-block; border-left: 7px solid transparent; border-right: 7px solid transparent; @@ -54,7 +55,7 @@ position: absolute; } .datepicker-dropdown:after { - content: ''; + content: ""; display: inline-block; border-left: 6px solid transparent; border-right: 6px solid transparent; @@ -114,13 +115,13 @@ font-weight: $font-weight-light; font-size: $font-size-base; border: none; - z-index: 1; + z-index: 1; position: relative; cursor: pointer; } -.datepicker th{ - color: $primary-color; +.datepicker th { + color: $primary-color; } .table-condensed > tbody > tr > td, @@ -128,10 +129,10 @@ .table-condensed > tfoot > tr > td, .table-condensed > tfoot > tr > th, .table-condensed > thead > tr > td, -.table-condensed > thead > tr > th{ - padding: 2px; - text-align: center; - cursor: pointer; +.table-condensed > thead > tr > th { + padding: 2px; + text-align: center; + cursor: pointer; } .table-striped .datepicker table tr td, @@ -150,7 +151,7 @@ .datepicker table tr td.disabled, .datepicker table tr td.disabled:hover { background: none; - color: $default-color ; + color: $default-color; cursor: default; } .datepicker table tr td.highlighted { @@ -164,7 +165,13 @@ background-color: #fde19a; background-image: -moz-linear-gradient(to bottom, #fdd49a, #fdf59a); background-image: -ms-linear-gradient(to bottom, #fdd49a, #fdf59a); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a)); + background-image: -webkit-gradient( + linear, + 0 0, + 0 100%, + from(#fdd49a), + to(#fdf59a) + ); background-image: -webkit-linear-gradient(to bottom, #fdd49a, #fdf59a); background-image: -o-linear-gradient(to bottom, #fdd49a, #fdf59a); background-image: linear-gradient(to bottom, #fdd49a, #fdf59a); @@ -229,7 +236,13 @@ background-color: #f3d17a; background-image: -moz-linear-gradient(to bottom, #f3c17a, #f3e97a); background-image: -ms-linear-gradient(to bottom, #f3c17a, #f3e97a); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f3c17a), to(#f3e97a)); + background-image: -webkit-gradient( + linear, + 0 0, + 0 100%, + from(#f3c17a), + to(#f3e97a) + ); background-image: -webkit-linear-gradient(to bottom, #f3c17a, #f3e97a); background-image: -o-linear-gradient(to bottom, #f3c17a, #f3e97a); background-image: linear-gradient(to bottom, #f3c17a, #f3e97a); @@ -281,7 +294,13 @@ background-color: #9e9e9e; background-image: -moz-linear-gradient(to bottom, #b3b3b3, #808080); background-image: -ms-linear-gradient(to bottom, #b3b3b3, #808080); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b3b3b3), to(#808080)); + background-image: -webkit-gradient( + linear, + 0 0, + 0 100%, + from(#b3b3b3), + to(#808080) + ); background-image: -webkit-linear-gradient(to bottom, #b3b3b3, #808080); background-image: -o-linear-gradient(to bottom, #b3b3b3, #808080); background-image: linear-gradient(to bottom, #b3b3b3, #808080); @@ -329,7 +348,6 @@ .datepicker table tr td.active:hover div, .datepicker table tr td.active.disabled div, .datepicker table tr td.active.disabled:hover div { - background-color: $primary-color; color: $white-color; box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2); @@ -353,7 +371,7 @@ .datepicker table tr td.active[disabled] div, .datepicker table tr td.active:hover[disabled] div, .datepicker table tr td.active.disabled[disabled] div, -.datepicker table tr td.active.disabled:hover[disabled] div{ +.datepicker table tr td.active.disabled:hover[disabled] div { background-color: $primary-color; } .datepicker table tr td.active:active, @@ -378,7 +396,6 @@ -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; - } .datepicker table tr td span:hover, .datepicker table tr td span.focused { @@ -417,8 +434,8 @@ .datepicker table tr td span.active:hover[disabled], .datepicker table tr td span.active.disabled[disabled], .datepicker table tr td span.active.disabled:hover[disabled] { - background-color: $primary-color; - box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2); + background-color: $primary-color; + box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2); } .datepicker table tr td span.active:active, .datepicker table tr td span.active:hover:active, @@ -445,25 +462,25 @@ cursor: pointer; } -.datepicker{ - .prev, - .next{ - width: 35px; - height: 35px; - } +.datepicker { + .prev, + .next { + width: 35px; + height: 35px; + } - i{ - position: relative; - top: 2px; - } + i { + position: relative; + top: 2px; + } - .prev i{ - left: -1px; - } + .prev i { + left: -1px; + } - .next i{ - right: -1px; - } + .next i { + right: -1px; + } } .datepicker .datepicker-switch:hover, @@ -520,7 +537,12 @@ margin-right: -5px; } -.table-condensed>tbody>tr>td, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>td, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>thead>tr>th{ - position: relative; - z-index: -1; +.table-condensed > tbody > tr > td, +.table-condensed > tbody > tr > th, +.table-condensed > tfoot > tr > td, +.table-condensed > tfoot > tr > th, +.table-condensed > thead > tr > td, +.table-condensed > thead > tr > th { + position: relative; + z-index: -1; } diff --git a/src/assets/scss/now-ui-kit/plugins/_plugin-nouislider.scss b/src/assets/scss/now-ui-kit/plugins/_plugin-nouislider.scss index 79c2738..2910b12 100755 --- a/src/assets/scss/now-ui-kit/plugins/_plugin-nouislider.scss +++ b/src/assets/scss/now-ui-kit/plugins/_plugin-nouislider.scss @@ -80,17 +80,17 @@ html:not([dir="rtl"]) .noUi-horizontal .noUi-origin { } .noUi-horizontal .noUi-handle { border-radius: 50%; - background-color: #FFFFFF; - box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2); - height: 15px; - width: 15px; - cursor: pointer; - outline: 0; + background-color: #ffffff; + box-shadow: 0 1px 13px 0 rgba(0, 0, 0, 0.2); + height: 15px; + width: 15px; + cursor: pointer; + outline: 0; - &:before, - &:after{ - display: none; - } + &:before, + &:after { + display: none; + } } .noUi-vertical { width: 18px; @@ -116,7 +116,7 @@ html:not([dir="rtl"]) .noUi-horizontal .noUi-handle { border-radius: 3px; } .noUi-connect { - background: #3FB8AF; + background: #3fb8af; } /* Handles and cursors; */ @@ -128,20 +128,20 @@ html:not([dir="rtl"]) .noUi-horizontal .noUi-handle { } .noUi-handle { border-radius: 3px; - background: #FFF; + background: #fff; cursor: default; -webkit-transition: $general-transition-time $transition-ease; - -moz-transition: $general-transition-time $transition-ease; - -ms-transition: $general-transition-time $transition-ease; - -o-transform: $general-transition-time $transition-ease; - transition: $general-transition-time $transition-ease; + -moz-transition: $general-transition-time $transition-ease; + -ms-transition: $general-transition-time $transition-ease; + -o-transform: $general-transition-time $transition-ease; + transition: $general-transition-time $transition-ease; } .noUi-active { - -webkit-transform: scale3d(1.5,1.5,1); - -moz-transform: scale3d(1.5,1.5,1); - -ms-transform: scale3d(1.5,1.5,1); - -o-transform: scale3d(1.5,1.5,1); - transform: scale3d(1.5,1.5,1); + -webkit-transform: scale3d(1.5, 1.5, 1); + -moz-transform: scale3d(1.5, 1.5, 1); + -ms-transform: scale3d(1.5, 1.5, 1); + -o-transform: scale3d(1.5, 1.5, 1); + transform: scale3d(1.5, 1.5, 1); } /* Handle stripes; */ @@ -152,7 +152,7 @@ html:not([dir="rtl"]) .noUi-horizontal .noUi-handle { position: absolute; height: 14px; width: 1px; - background: #E8E7E6; + background: #e8e7e6; left: 14px; top: 6px; } @@ -172,7 +172,7 @@ html:not([dir="rtl"]) .noUi-horizontal .noUi-handle { /* Disabled state; */ [disabled] .noUi-connect { - background: #B8B8B8; + background: #b8b8b8; } [disabled].noUi-target, [disabled].noUi-handle, @@ -208,13 +208,13 @@ html:not([dir="rtl"]) .noUi-horizontal .noUi-handle { */ .noUi-marker { position: absolute; - background: #CCC; + background: #ccc; } .noUi-marker-sub { - background: #AAA; + background: #aaa; } .noUi-marker-large { - background: #AAA; + background: #aaa; } /* Horizontal layout; * @@ -277,7 +277,7 @@ html:not([dir="rtl"]) .noUi-horizontal .noUi-handle { .noUi-tooltip { display: block; position: absolute; - border: 1px solid #D9D9D9; + border: 1px solid #d9d9d9; border-radius: 3px; background: #fff; color: #000; @@ -299,94 +299,93 @@ html:not([dir="rtl"]) .noUi-horizontal .noUi-handle { } .slider { - & .noUi-connect{ - background-color: $default-color; + & .noUi-connect { + background-color: $default-color; } - &.slider-neutral{ - & .noUi-connect{ - background-color: $white-color; + &.slider-neutral { + & .noUi-connect { + background-color: $white-color; } - &.noUi-target{ - background-color: rgba(255,255,255, .3); - } - - & .noUi-handle{ - background-color: $white-color; - } - } + &.noUi-target { + background-color: rgba(255, 255, 255, 0.3); + } - &.slider-primary{ - & .noUi-connect, - &.noUi-connect{ - background-color: $primary-color; - } + & .noUi-handle { + background-color: $white-color; + } + } - &.noUi-target{ - background-color: $primary-color-opacity; - } + &.slider-primary { + & .noUi-connect, + &.noUi-connect { + background-color: $primary-color; + } - & .noUi-handle{ - background-color: $brand-primary; - } - } + &.noUi-target { + background-color: $primary-color-opacity; + } - &.slider-info{ - & .noUi-connect, - &.noUi-connect{ - background-color: $brand-info; - } + & .noUi-handle { + background-color: $brand-primary; + } + } - &.noUi-target{ - background-color: $info-color-opacity; - } + &.slider-info { + & .noUi-connect, + &.noUi-connect { + background-color: $brand-info; + } - & .noUi-handle{ - background-color: $brand-info; - } + &.noUi-target { + background-color: $info-color-opacity; } - &.slider-success{ - & .noUi-connect, - &.noUi-connect{ - background-color: $brand-success; - } - &.noUi-target{ - background-color: $success-color-opacity; - } + & .noUi-handle { + background-color: $brand-info; + } + } + &.slider-success { + & .noUi-connect, + &.noUi-connect { + background-color: $brand-success; + } - & .noUi-handle{ - background-color: $brand-success; - } + &.noUi-target { + background-color: $success-color-opacity; } - &.slider-warning{ - & .noUi-connect, - &.noUi-connect{ - background-color: $brand-warning; - } - &.noUi-target{ - background-color: $warning-color-opacity; - } + & .noUi-handle { + background-color: $brand-success; + } + } + &.slider-warning { + & .noUi-connect, + &.noUi-connect { + background-color: $brand-warning; + } - & .noUi-handle{ - background-color: $brand-warning; - } + &.noUi-target { + background-color: $warning-color-opacity; } - &.slider-danger{ - & .noUi-connect, - &.noUi-connect{ - background-color: $brand-danger; - } - &.noUi-target{ - background-color: $danger-color-opacity; - } + & .noUi-handle { + background-color: $brand-warning; + } + } + &.slider-danger { + & .noUi-connect, + &.noUi-connect { + background-color: $brand-danger; + } - & .noUi-handle{ - background-color: $brand-danger; - } + &.noUi-target { + background-color: $danger-color-opacity; } + & .noUi-handle { + background-color: $brand-danger; + } + } } diff --git a/src/components/Alert.vue b/src/components/Alert.vue index e34803a..b9a2b9a 100644 --- a/src/components/Alert.vue +++ b/src/components/Alert.vue @@ -21,33 +21,33 @@ diff --git a/src/components/Badge.vue b/src/components/Badge.vue index 6fb2628..e70f9a8 100644 --- a/src/components/Badge.vue +++ b/src/components/Badge.vue @@ -10,35 +10,35 @@ diff --git a/src/components/Button.vue b/src/components/Button.vue index 6889e8b..024c21a 100644 --- a/src/components/Button.vue +++ b/src/components/Button.vue @@ -17,19 +17,19 @@ diff --git a/src/components/Cards/Card.vue b/src/components/Cards/Card.vue index 84fcf66..a7e8705 100755 --- a/src/components/Cards/Card.vue +++ b/src/components/Cards/Card.vue @@ -4,7 +4,7 @@ :class="[ { 'card-plain': plain }, { 'card-raised': raised }, - { [`card-${type}`]: type } + { [`card-${type}`]: type }, ]" :data-background-color="color" > @@ -48,7 +48,7 @@ diff --git a/src/components/Collapse/Collapse.vue b/src/components/Collapse/Collapse.vue index bd7a071..c39e492 100644 --- a/src/components/Collapse/Collapse.vue +++ b/src/components/Collapse/Collapse.vue @@ -11,20 +11,20 @@ diff --git a/src/components/Collapse/CollapseItem.vue b/src/components/Collapse/CollapseItem.vue index 6b549ba..5a3cdad 100644 --- a/src/components/Collapse/CollapseItem.vue +++ b/src/components/Collapse/CollapseItem.vue @@ -33,46 +33,46 @@ diff --git a/src/components/Dropdown.vue b/src/components/Dropdown.vue index ca3dc1f..d9d65ee 100755 --- a/src/components/Dropdown.vue +++ b/src/components/Dropdown.vue @@ -5,7 +5,7 @@ :class="[ { show: isOpen }, { dropdown: direction === 'down' }, - { dropup: direction === 'up' } + { dropup: direction === 'up' }, ]" aria-haspopup="true" :aria-expanded="isOpen" @@ -26,7 +26,7 @@ class="dropdown-menu" :class="[ { 'dropdown-menu-right': position === 'right' }, - { show: isOpen } + { show: isOpen }, ]" > @@ -35,11 +35,11 @@ diff --git a/src/components/Modal.vue b/src/components/Modal.vue index 17d4b63..105a4df 100644 --- a/src/components/Modal.vue +++ b/src/components/Modal.vue @@ -6,7 +6,7 @@ :class="[ { 'show d-block': show }, { 'd-none': !show }, - { 'modal-mini': type === 'mini' } + { 'modal-mini': type === 'mini' }, ]" v-show="show" tabindex="-1" @@ -49,26 +49,26 @@ diff --git a/src/components/Navbar/Navbar.vue b/src/components/Navbar/Navbar.vue index 3673b6c..4013751 100644 --- a/src/components/Navbar/Navbar.vue +++ b/src/components/Navbar/Navbar.vue @@ -15,7 +15,7 @@ :class="[ { show: showMenu }, { 'has-image': menuImage }, - navMenuClasses + navMenuClasses, ]" v-if="$slots['navbar-menu'] || $scopedSlots['navbar-menu']" data-color="orange" @@ -31,7 +31,7 @@ diff --git a/src/components/Navbar/NavbarToggleButton.vue b/src/components/Navbar/NavbarToggleButton.vue index b02fae4..7374330 100644 --- a/src/components/Navbar/NavbarToggleButton.vue +++ b/src/components/Navbar/NavbarToggleButton.vue @@ -16,10 +16,10 @@ diff --git a/src/components/Pagination.vue b/src/components/Pagination.vue index e69e9d7..e7b7ec1 100755 --- a/src/components/Pagination.vue +++ b/src/components/Pagination.vue @@ -28,41 +28,41 @@ diff --git a/src/components/Parallax.vue b/src/components/Parallax.vue index 04882a1..7bbfdac 100644 --- a/src/components/Parallax.vue +++ b/src/components/Parallax.vue @@ -6,7 +6,7 @@ diff --git a/src/components/Progress.vue b/src/components/Progress.vue index 4d619d4..34ba5a9 100755 --- a/src/components/Progress.vue +++ b/src/components/Progress.vue @@ -24,7 +24,7 @@ diff --git a/src/components/Slider.vue b/src/components/Slider.vue index fc71a7e..2dbffa6 100644 --- a/src/components/Slider.vue +++ b/src/components/Slider.vue @@ -2,44 +2,44 @@
diff --git a/src/components/Switch.vue b/src/components/Switch.vue index b0a70de..a1d8ac4 100755 --- a/src/components/Switch.vue +++ b/src/components/Switch.vue @@ -4,7 +4,7 @@ :class="switchClass" >
- + {{ onText }} @@ -20,16 +20,16 @@ diff --git a/src/components/Tabs/Tab.vue b/src/components/Tabs/Tab.vue index 7d6f493..4742642 100644 --- a/src/components/Tabs/Tab.vue +++ b/src/components/Tabs/Tab.vue @@ -11,16 +11,16 @@ diff --git a/src/components/Tabs/Tabs.vue b/src/components/Tabs/Tabs.vue index da8c79f..4c98972 100644 --- a/src/components/Tabs/Tabs.vue +++ b/src/components/Tabs/Tabs.vue @@ -4,7 +4,7 @@ :class="[ { 'col-md-4': vertical && !tabNavWrapperClasses }, { 'col-12': centered && !tabNavWrapperClasses }, - tabNavWrapperClasses + tabNavWrapperClasses, ]" >
  • @@ -59,79 +59,79 @@ diff --git a/src/components/index.js b/src/components/index.js index c89c101..0a9d749 100755 --- a/src/components/index.js +++ b/src/components/index.js @@ -1,27 +1,27 @@ -import Alert from './Alert'; -import Checkbox from './Inputs/Checkbox.vue'; -import Radio from './Inputs/Radio.vue'; -import FormGroupInput from './Inputs/formGroupInput.vue'; -import Switch from './Switch.vue'; -import Badge from './Badge'; -import Progress from './Progress.vue'; -import Button from './Button.vue'; +import Alert from "./Alert"; +import Checkbox from "./Inputs/Checkbox.vue"; +import Radio from "./Inputs/Radio.vue"; +import FormGroupInput from "./Inputs/formGroupInput.vue"; +import Switch from "./Switch.vue"; +import Badge from "./Badge"; +import Progress from "./Progress.vue"; +import Button from "./Button.vue"; -import DropDown from './Dropdown.vue'; +import DropDown from "./Dropdown.vue"; -import Card from './Cards/Card.vue'; -import Collapse from './Collapse/Collapse.vue'; -import CollapseItem from './Collapse/CollapseItem.vue'; -import Navbar from './Navbar/Navbar'; -import NavLink from './Navbar/NavLink'; -import NavbarToggleButton from './Navbar/NavbarToggleButton'; -import TabPane from './Tabs/Tab.vue'; -import Tabs from './Tabs/Tabs.vue'; -import Modal from './Modal.vue'; -import Parallax from './Parallax.vue'; -import Slider from './Slider.vue'; +import Card from "./Cards/Card.vue"; +import Collapse from "./Collapse/Collapse.vue"; +import CollapseItem from "./Collapse/CollapseItem.vue"; +import Navbar from "./Navbar/Navbar"; +import NavLink from "./Navbar/NavLink"; +import NavbarToggleButton from "./Navbar/NavbarToggleButton"; +import TabPane from "./Tabs/Tab.vue"; +import Tabs from "./Tabs/Tabs.vue"; +import Modal from "./Modal.vue"; +import Parallax from "./Parallax.vue"; +import Slider from "./Slider.vue"; -import Pagination from './Pagination.vue'; +import Pagination from "./Pagination.vue"; export { Alert, @@ -44,5 +44,5 @@ export { Modal, Parallax, Slider, - Button + Button, }; diff --git a/src/directives/click-ouside.js b/src/directives/click-ouside.js index 3021e49..a278d84 100644 --- a/src/directives/click-ouside.js +++ b/src/directives/click-ouside.js @@ -1,15 +1,15 @@ export default { - bind: function(el, binding, vnode) { - el.clickOutsideEvent = function(event) { + bind: function (el, binding, vnode) { + el.clickOutsideEvent = function (event) { // here I check that click was outside the el and his childrens if (!(el == event.target || el.contains(event.target))) { // and if it did, call method provided in attribute value vnode.context[binding.expression](event); } }; - document.body.addEventListener('click', el.clickOutsideEvent); + document.body.addEventListener("click", el.clickOutsideEvent); + }, + unbind: function (el) { + document.body.removeEventListener("click", el.clickOutsideEvent); }, - unbind: function(el) { - document.body.removeEventListener('click', el.clickOutsideEvent); - } }; diff --git a/src/layout/MainFooter.vue b/src/layout/MainFooter.vue index 544af4b..beff7b8 100644 --- a/src/layout/MainFooter.vue +++ b/src/layout/MainFooter.vue @@ -8,19 +8,13 @@ @@ -44,13 +38,13 @@ export default { props: { backgroundColor: String, - type: String + type: String, }, data() { return { - year: new Date().getFullYear() + year: new Date().getFullYear(), }; - } + }, }; diff --git a/src/layout/MainNavbar.vue b/src/layout/MainNavbar.vue index 83aa4fa..8b3123c 100644 --- a/src/layout/MainNavbar.vue +++ b/src/layout/MainNavbar.vue @@ -51,10 +51,10 @@ Landing @@ -121,20 +121,20 @@ diff --git a/src/layout/StarterFooter.vue b/src/layout/StarterFooter.vue index 26e198d..8431050 100644 --- a/src/layout/StarterFooter.vue +++ b/src/layout/StarterFooter.vue @@ -8,24 +8,16 @@ @@ -49,13 +41,13 @@ export default { props: { backgroundColor: String, - type: String + type: String, }, data() { return { - year: new Date().getFullYear() + year: new Date().getFullYear(), }; - } + }, }; diff --git a/src/layout/StarterNavbar.vue b/src/layout/StarterNavbar.vue index 8b4a684..e9b38e3 100644 --- a/src/layout/StarterNavbar.vue +++ b/src/layout/StarterNavbar.vue @@ -1,6 +1,6 @@ diff --git a/src/pages/Login.vue b/src/pages/Login.vue index 986185b..be50b0b 100644 --- a/src/pages/Login.vue +++ b/src/pages/Login.vue @@ -53,17 +53,17 @@
diff --git a/src/pages/Profile.vue b/src/pages/Profile.vue index 5211f25..7aea5f2 100644 --- a/src/pages/Profile.vue +++ b/src/pages/Profile.vue @@ -3,7 +3,7 @@
@@ -124,15 +124,15 @@
diff --git a/src/pages/StarterPage.vue b/src/pages/StarterPage.vue index 228ef6d..bdebacd 100644 --- a/src/pages/StarterPage.vue +++ b/src/pages/StarterPage.vue @@ -7,7 +7,7 @@ diff --git a/src/pages/components/CarouselSection.vue b/src/pages/components/CarouselSection.vue index 6a80bfb..a09136e 100644 --- a/src/pages/components/CarouselSection.vue +++ b/src/pages/components/CarouselSection.vue @@ -32,13 +32,13 @@
diff --git a/src/pages/components/JavascriptComponents.vue b/src/pages/components/JavascriptComponents.vue index b264773..c949330 100644 --- a/src/pages/components/JavascriptComponents.vue +++ b/src/pages/components/JavascriptComponents.vue @@ -66,18 +66,10 @@ - - On left - - - On top - - - On right - - - On bottom - + On left + On top + On right + On bottom

@@ -172,8 +164,8 @@ diff --git a/src/pages/components/Notifications.vue b/src/pages/components/Notifications.vue index 3ff1c66..57f4482 100644 --- a/src/pages/components/Notifications.vue +++ b/src/pages/components/Notifications.vue @@ -36,11 +36,11 @@ diff --git a/src/pages/components/ProgressPagination.vue b/src/pages/components/ProgressPagination.vue index c3f8e6a..6cacbcb 100644 --- a/src/pages/components/ProgressPagination.vue +++ b/src/pages/components/ProgressPagination.vue @@ -54,7 +54,7 @@ diff --git a/src/pages/components/SignupForm.vue b/src/pages/components/SignupForm.vue index bd75cd6..7c49456 100644 --- a/src/pages/components/SignupForm.vue +++ b/src/pages/components/SignupForm.vue @@ -1,7 +1,12 @@ diff --git a/src/pages/components/Tabs.vue b/src/pages/components/Tabs.vue index abab7ce..f587c76 100644 --- a/src/pages/components/Tabs.vue +++ b/src/pages/components/Tabs.vue @@ -144,14 +144,14 @@