feat: Integrate new svg icons set + config wiz UI improvements
This commit is contained in:
NGPixel
@@ -7,6 +7,7 @@ $primary: 'indigo';
|
||||
@import "base/reset";
|
||||
@import "base/mixins";
|
||||
@import "base/fonts";
|
||||
@import "base/icons";
|
||||
@import "base/base";
|
||||
|
||||
@import "libs/animate";
|
||||
@@ -45,6 +46,5 @@ $primary: 'indigo';
|
||||
@import 'layout/_rtl';
|
||||
|
||||
@import 'pages/login';
|
||||
@import 'pages/welcome';
|
||||
|
||||
@import 'base/print';
|
||||
|
||||
48
client/scss/base/icons.scss
Normal file
48
client/scss/base/icons.scss
Normal file
@@ -0,0 +1,48 @@
|
||||
.icons {
|
||||
display: inline-block;
|
||||
color: mc('grey', '800');
|
||||
|
||||
&.is-text {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: -0.0625em;
|
||||
stroke: none;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
&.is-16 {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&.is-18 {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
&.is-20 {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
&.is-24 {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
&.has-right-pad {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
&.is-outlined {
|
||||
stroke-width: 2px;
|
||||
use {
|
||||
fill: inherit;
|
||||
stroke: mc('grey', '800');
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,11 +1,31 @@
|
||||
.config-manager {
|
||||
background-image: linear-gradient(to right, mc('indigo', '400'), mc('indigo', '600'));
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
padding-top: 1rem;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-image: url('../svg/login-bg.svg');
|
||||
background-position: center bottom;
|
||||
background-size: cover;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.welcome {
|
||||
text-align: center;
|
||||
padding: 50px 0 15px 0;
|
||||
color: mc('grey', '700');
|
||||
padding: 1rem 0 2rem 0;
|
||||
border-bottom: 1px solid mc('indigo', '50');
|
||||
margin-bottom: 1rem;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
color: mc('indigo', '700');
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -14,30 +34,16 @@
|
||||
display: inline-block;
|
||||
color: mc('indigo', '500')
|
||||
}
|
||||
i.icon-check {
|
||||
i.ui-1_check-simple {
|
||||
color: mc('green', '500')
|
||||
}
|
||||
i.icon-square-cross {
|
||||
i.ui-2_ban-bold {
|
||||
color: mc('red', '500')
|
||||
}
|
||||
i.icon-warning-outline {
|
||||
color: mc('orange', '500')
|
||||
}
|
||||
|
||||
.tst-welcome-leave-active, .tst-welcome-enter-active {
|
||||
transition: all .5s;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.tst-welcome-leave, .tst-welcome-enter-to {
|
||||
opacity: 1;
|
||||
max-height: 200px;
|
||||
}
|
||||
.tst-welcome-leave-to, .tst-welcome-enter {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
|
||||
@@ -32,8 +32,8 @@
|
||||
&.is-featured {
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
background-color: mc($primary, '400');
|
||||
border-bottom-color: mc($primary, '500');
|
||||
background-color: mc('indigo', '400');
|
||||
border-bottom-color: mc('indigo', '500');
|
||||
color: #FFF;
|
||||
|
||||
> i::before {
|
||||
|
||||
@@ -1,81 +0,0 @@
|
||||
@charset "utf-8";
|
||||
|
||||
$primary: 'indigo';
|
||||
|
||||
@import "base/variables";
|
||||
@import "base/colors";
|
||||
@import "base/reset";
|
||||
@import "base/mixins";
|
||||
@import "base/fonts";
|
||||
@import "base/base";
|
||||
|
||||
@import "libs/animate";
|
||||
|
||||
@import 'components/button';
|
||||
@import 'components/footer';
|
||||
@import 'components/form';
|
||||
@import 'components/grid';
|
||||
@import 'components/modal';
|
||||
@import 'components/nav';
|
||||
@import 'components/panel';
|
||||
@import 'components/typography';
|
||||
|
||||
.welcome {
|
||||
text-align: center;
|
||||
padding: 50px 0 15px 0;
|
||||
color: mc('grey', '700');
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
i.icon-loader {
|
||||
display: inline-block;
|
||||
color: mc('indigo', '500')
|
||||
}
|
||||
i.icon-check {
|
||||
color: mc('green', '500')
|
||||
}
|
||||
i.icon-square-cross {
|
||||
color: mc('red', '500')
|
||||
}
|
||||
i.icon-warning-outline {
|
||||
color: mc('orange', '500')
|
||||
}
|
||||
|
||||
.tst-welcome-leave-active, .tst-welcome-enter-active {
|
||||
transition: all .5s;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.tst-welcome-leave, .tst-welcome-enter-to {
|
||||
opacity: 1;
|
||||
max-height: 200px;
|
||||
}
|
||||
.tst-welcome-leave-to, .tst-welcome-enter {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 150px;
|
||||
height: 10px;
|
||||
background-color: mc('indigo', '50');
|
||||
border:1px solid mc('indigo', '100');
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 21px;
|
||||
padding: 1px;
|
||||
|
||||
> div {
|
||||
width: 5px;
|
||||
height: 6px;
|
||||
background-color: mc('indigo', '200');
|
||||
border-radius: 2px;
|
||||
transition: all 1s ease;
|
||||
}
|
||||
|
||||
}
|
||||
22
client/scss/libs/animate.scss
vendored
22
client/scss/libs/animate.scss
vendored
@@ -3483,4 +3483,26 @@
|
||||
.slideOutUp {
|
||||
-webkit-animation-name: slideOutUp;
|
||||
animation-name: slideOutUp;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
-webkit-transform-origin: center;
|
||||
transform-origin: center;
|
||||
-webkit-transform: rotate3d(0, 0, 1, -360deg);
|
||||
transform: rotate3d(0, 0, 1, -360deg);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform-origin: center;
|
||||
transform-origin: center;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.spin {
|
||||
-webkit-animation-name: spin;
|
||||
animation-name: spin;
|
||||
}
|
||||
61
client/scss/libs/nucleo-icons-license.txt
Normal file
61
client/scss/libs/nucleo-icons-license.txt
Normal file
@@ -0,0 +1,61 @@
|
||||
# Standard License - nucleoapp.com
|
||||
|
||||
Github repo: https://github.com/NucleoApp/license-standard
|
||||
|
||||
By purchasing Nucleo you are being granted a license to use Nucleo icons (including the custom Nucleo icons created through the Nucleo applications) for specific uses under certain conditions.
|
||||
|
||||
You have rights to use Nucleo icons in unlimited personal and commercial projects for yourself or a client. Even if you don't renew the Basic license, you can still use the source files for as many projects as you want.
|
||||
|
||||
For each project, you can use a maximum of 250 Nucleo icons (intended per unique style: for example if you're using the same icon in both the outline and glyph styles, or in 2 different sizes, you're using 2 icons).
|
||||
|
||||
By purchasing Nucleo, you have the right to:
|
||||
|
||||
- Use Nucleo icons in unlimited personal and commercial projects.
|
||||
- Use Nucleo icons in application/website/print/mobile/logo design.
|
||||
- Modify Nucleo icons to create you own icon variations.
|
||||
|
||||
You don't have the right to:
|
||||
|
||||
- Sublicense, resell, share, transfer, or otherwise redistribute Nucleo icons (even for free or within a more complex downloadable file).
|
||||
- Use more than 250 Nucleo icons in a single project.
|
||||
- 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.
|
||||
|
||||
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.
|
||||
|
||||
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:
|
||||
|
||||
- Use up to 500 icons in a single project (the one you’re purchasing the Extended License for) if the users/customers can access Nucleo source files (e.g. Nucleo icons are stored in a folder inside the downloadable file).
|
||||
- Use unlimited icons if the users/customers cannot access Nucleo source files (e.g. Nucleo icons are encrypted and user can only use icons throughout the application).
|
||||
|
||||
The downloadable source file has to include [Nucleo Standard License](https://github.com/NucleoApp/license-standard), as well as Nucleo Extended License.
|
||||
|
||||
Example of products offered for sale (or for free) where Nucleo contributes to the core value of the product being sold/shared:
|
||||
|
||||
- Logo builder application that combines Nucleo icons to create a logo
|
||||
- Theme builder where users can browse Nucleo icons and pick the ones to include in their design.
|
||||
- Application used to create presentations, where users can pick Nucleo icons through the built-in presentation builder.
|
||||
|
||||
If you’re still unclear about what is or isn’t allowed under this license, please contact us at info@nucleoapp.com.
|
||||
@@ -1,15 +0,0 @@
|
||||
.welcome {
|
||||
text-align: center;
|
||||
padding: 50px 0;
|
||||
color: mc('grey', '700');
|
||||
|
||||
h1 {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user