zenite-ui 1.0.3 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -5
- package/package.json +4 -4
- package/zenite-ui/sidebar.css +16 -7
package/README.md
CHANGED
|
@@ -15,7 +15,7 @@ O Zênite UI é um framework front-end moderno, leve e responsivo, focado na sim
|
|
|
15
15
|
|
|
16
16
|
O framework pode ser instalado no seu projeto via gerenciador de pacotes NPM. Execute o comando abaixo no seu terminal:
|
|
17
17
|
|
|
18
|
-
npm install zenite-
|
|
18
|
+
npm install zenite-ui
|
|
19
19
|
|
|
20
20
|
---
|
|
21
21
|
|
|
@@ -24,14 +24,14 @@ O framework pode ser instalado no seu projeto via gerenciador de pacotes NPM. Ex
|
|
|
24
24
|
### Importação em Projetos Estáticos (HTML)
|
|
25
25
|
Adicione as referências diretamente no seu arquivo HTML apontando para a pasta node_modules:
|
|
26
26
|
|
|
27
|
-
<link rel="stylesheet" href="./node_modules/zenite-
|
|
28
|
-
<script src="./node_modules/zenite-
|
|
27
|
+
<link rel="stylesheet" href="./node_modules/zenite-ui/zenite-ui/zenite.css">
|
|
28
|
+
<script src="./node_modules/zenite-ui/js/zenite.js"></script>
|
|
29
29
|
|
|
30
30
|
### Importação via Bundlers (Webpack, Vite, etc.)
|
|
31
31
|
Em arquiteturas modernas, importe o CSS e o JS nos seus arquivos principais:
|
|
32
32
|
|
|
33
|
-
import 'zenite-
|
|
34
|
-
import 'zenite-
|
|
33
|
+
import 'zenite-ui/zenite-ui/zenite.css';
|
|
34
|
+
import 'zenite-ui';
|
|
35
35
|
|
|
36
36
|
---
|
|
37
37
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "zenite-ui",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "1.0.4",
|
|
4
|
+
"description": "Framework front-end responsivo e elegante em CSS e Vanilla JS",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"css",
|
|
7
7
|
"framework",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"url": "git+https://github.com/zenitetecnologia/zenite-ui.git"
|
|
19
19
|
},
|
|
20
20
|
"license": "MIT",
|
|
21
|
-
"author": "Zênite
|
|
21
|
+
"author": "Zênite Tecnologia",
|
|
22
22
|
"type": "commonjs",
|
|
23
23
|
"main": "js/zenite.js",
|
|
24
24
|
"style": "zenite-ui/zenite.css",
|
|
@@ -29,4 +29,4 @@
|
|
|
29
29
|
"scripts": {
|
|
30
30
|
"test": "echo \"Error: no test specified\" && exit 1"
|
|
31
31
|
}
|
|
32
|
-
}
|
|
32
|
+
}
|
package/zenite-ui/sidebar.css
CHANGED
|
@@ -34,18 +34,27 @@
|
|
|
34
34
|
/*menu lateral*/
|
|
35
35
|
.sidebar {
|
|
36
36
|
position: fixed;
|
|
37
|
-
top: 0;
|
|
37
|
+
top: 0;
|
|
38
|
+
left: 0;
|
|
39
|
+
width: 280px;
|
|
40
|
+
height: 100vh;
|
|
38
41
|
background-color: var(--zf-background-secondary);
|
|
39
|
-
|
|
42
|
+
z-index: 1050;
|
|
43
|
+
|
|
44
|
+
transform: translateX(-105%);
|
|
45
|
+
visibility: hidden;
|
|
46
|
+
|
|
47
|
+
box-shadow: none;
|
|
48
|
+
|
|
49
|
+
transition: transform 0.3s ease, box-shadow 0.3s ease, visibility 0.3s ease;
|
|
40
50
|
padding: 2rem 1.5rem;
|
|
41
|
-
transform: translateX(-100%);
|
|
42
|
-
transition: transform 0.3s ease-in-out;
|
|
43
|
-
z-index: 1000;
|
|
44
|
-
overflow-y: auto;
|
|
45
51
|
}
|
|
46
52
|
|
|
47
53
|
.sidebar-checkbox:checked ~ .sidebar {
|
|
48
|
-
transform: translateX(0);
|
|
54
|
+
transform: translateX(0);
|
|
55
|
+
visibility: visible;
|
|
56
|
+
|
|
57
|
+
box-shadow: 4px 0 24px rgba(2, 13, 42, 0.5);
|
|
49
58
|
}
|
|
50
59
|
|
|
51
60
|
.sidebar-checkbox:checked ~ .sidebar-overlay {
|