holygrail2 1.3.18 → 1.3.20
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 +171 -62
- package/package.json +8 -5
- package/scss/_variables.scss +12 -12
- package/scss/base/_grid.scss +25 -50
- package/scss/base/_icons.scss +9 -15
- package/scss/docs.scss +19 -20
- package/scss/elements/_buttons.scss +1 -2
- package/dist/docs.css +0 -953
- package/dist/docs.css.map +0 -1
- package/dist/style-rtl.css +0 -12494
- package/dist/style-rtl.css.map +0 -1
- package/dist/style.css +0 -13653
- package/dist/style.css.map +0 -1
- package/dist/style.min.css +0 -46
- package/dist/style.min.css.map +0 -1
package/README.md
CHANGED
|
@@ -4,120 +4,229 @@
|
|
|
4
4
|
</a>
|
|
5
5
|
</p>
|
|
6
6
|
|
|
7
|
-
<h1 align="center">
|
|
7
|
+
<h1 align="center">Holygrail2</h1>
|
|
8
8
|
|
|
9
9
|
<div align="center">
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
Un framework CSS minimalista, responsive y agnóstico de estilos con componentes HTML y SCSS de alta calidad.
|
|
12
12
|
|
|
13
|
-
|
|
14
14
|
[](https://www.npmjs.com/package/holygrail2)
|
|
15
15
|
[](https://www.npmjs.com/package/holygrail2)
|
|
16
16
|
[](https://www.jsdelivr.com/package/npm/holygrail2)
|
|
17
|
-
[](https://travis-ci.org/holygrail2/holygrail)
|
|
17
|
+
[](https://github.com/holygrail2/holygrail/blob/main/LICENSE)
|
|
19
18
|
|
|
20
19
|
</div>
|
|
21
20
|
|
|
22
21
|
## ✨ Características
|
|
23
22
|
|
|
24
|
-
-
|
|
25
|
-
-
|
|
26
|
-
-
|
|
27
|
-
-
|
|
28
|
-
-
|
|
29
|
-
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
- Navegadores modernos
|
|
34
|
-
- Renderizado del lado del servidor
|
|
35
|
-
- [Electron](https://www.electronjs.org/)
|
|
36
|
-
|
|
37
|
-
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
|
|
38
|
-
| --- | --- | --- | --- | --- |
|
|
39
|
-
| Edge | Últimas 2 versiones | Últimas 2 versiones | Últimas 2 versiones | Últimas 2 versiones |
|
|
23
|
+
- 🎨 **Framework agnóstico** - Sin estilos predefinidos, solo estructura y utilidades
|
|
24
|
+
- 📱 **Totalmente responsive** - Diseño mobile-first con breakpoints flexibles
|
|
25
|
+
- 🧩 **Componentes modulares** - Botones, formularios, navegación, modales, etc.
|
|
26
|
+
- 🎯 **Sistema de grid avanzado** - Grid CSS nativo con múltiples configuraciones
|
|
27
|
+
- 🎪 **Animaciones y transiciones** - Efectos suaves y profesionales
|
|
28
|
+
- 🌍 **Soporte RTL** - Compatible con idiomas de derecha a izquierda
|
|
29
|
+
- ⚡ **Ligero y rápido** - Optimizado para rendimiento
|
|
30
|
+
- 🛠 **Herramientas de desarrollo** - Linting, formateo y build automatizado
|
|
40
31
|
|
|
41
32
|
## 📦 Instalación
|
|
42
33
|
|
|
34
|
+
### NPM
|
|
43
35
|
```bash
|
|
44
36
|
npm install holygrail2
|
|
45
37
|
```
|
|
46
38
|
|
|
39
|
+
### Yarn
|
|
47
40
|
```bash
|
|
48
41
|
yarn add holygrail2
|
|
49
42
|
```
|
|
50
43
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
Puedes incluir los estilos directamente desde el CDN:
|
|
54
|
-
|
|
44
|
+
### CDN
|
|
55
45
|
```html
|
|
56
46
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/holygrail2@latest/dist/style.css">
|
|
57
47
|
```
|
|
58
48
|
|
|
59
|
-
##
|
|
49
|
+
## 🚀 Uso Rápido
|
|
50
|
+
|
|
51
|
+
### Importar SCSS
|
|
52
|
+
```scss
|
|
53
|
+
@import 'holygrail2/scss/style.scss';
|
|
54
|
+
```
|
|
60
55
|
|
|
61
|
-
|
|
56
|
+
### HTML Básico
|
|
57
|
+
```html
|
|
58
|
+
<!DOCTYPE html>
|
|
59
|
+
<html lang="es">
|
|
60
|
+
<head>
|
|
61
|
+
<meta charset="UTF-8">
|
|
62
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
63
|
+
<title>Mi Proyecto</title>
|
|
64
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/holygrail2@latest/dist/style.css">
|
|
65
|
+
</head>
|
|
66
|
+
<body>
|
|
67
|
+
<div class="container">
|
|
68
|
+
<button class="btn btn--primary">Botón Primario</button>
|
|
69
|
+
<div class="grid-2">
|
|
70
|
+
<div class="col">Columna 1</div>
|
|
71
|
+
<div class="col">Columna 2</div>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
</body>
|
|
75
|
+
</html>
|
|
76
|
+
```
|
|
62
77
|
|
|
63
|
-
##
|
|
78
|
+
## 🧩 Componentes Disponibles
|
|
64
79
|
|
|
65
|
-
|
|
80
|
+
### Elementos Básicos
|
|
81
|
+
- **Botones** - Múltiples variantes y estados
|
|
82
|
+
- **Formularios** - Inputs, checkboxes, radio buttons
|
|
83
|
+
- **Navegación** - Menús, breadcrumbs, tabs
|
|
84
|
+
- **Contenido** - Cards, banners, modales
|
|
85
|
+
- **Feedback** - Tooltips, toasts, progress bars
|
|
66
86
|
|
|
67
|
-
|
|
87
|
+
### Layouts
|
|
88
|
+
- **Grid System** - Grid CSS nativo con 12 columnas
|
|
89
|
+
- **Containers** - Múltiples tamaños de contenedor
|
|
90
|
+
- **Headers** - Navegación principal y secundaria
|
|
91
|
+
- **Cards** - Diferentes estilos de tarjetas
|
|
68
92
|
|
|
69
|
-
|
|
93
|
+
### Utilidades
|
|
94
|
+
- **Espaciado** - Sistema de padding y margin
|
|
95
|
+
- **Tipografía** - Clases de texto y encabezados
|
|
96
|
+
- **Colores** - Variables CSS personalizables
|
|
97
|
+
- **Responsive** - Breakpoints y media queries
|
|
70
98
|
|
|
71
|
-
|
|
99
|
+
## 🛠 Desarrollo
|
|
72
100
|
|
|
73
|
-
|
|
101
|
+
### Prerrequisitos
|
|
102
|
+
- Node.js 16+
|
|
103
|
+
- npm o yarn
|
|
74
104
|
|
|
105
|
+
### Clonar y configurar
|
|
75
106
|
```bash
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
107
|
+
# Clonar el repositorio
|
|
108
|
+
git clone https://github.com/holygrail2/holygrail.git
|
|
109
|
+
cd holygrail
|
|
110
|
+
|
|
111
|
+
# Instalar dependencias
|
|
112
|
+
npm install
|
|
113
|
+
|
|
114
|
+
# Iniciar desarrollo
|
|
115
|
+
npm run start:watch
|
|
82
116
|
```
|
|
83
117
|
|
|
84
|
-
Comandos
|
|
118
|
+
### Comandos Disponibles
|
|
119
|
+
|
|
120
|
+
| Comando | Descripción |
|
|
121
|
+
|---------|-------------|
|
|
122
|
+
| `npm run build` | Genera CSS y documentación |
|
|
123
|
+
| `npm run start` | Build + abre la guía |
|
|
124
|
+
| `npm run start:watch` | Modo desarrollo con watch |
|
|
125
|
+
| `npm run serve` | Servidor de desarrollo |
|
|
126
|
+
| `npm run lint` | Verifica errores de estilo |
|
|
127
|
+
| `npm run lint:fix` | Corrige errores automáticamente |
|
|
128
|
+
| `npm run format` | Formatea código con Prettier |
|
|
129
|
+
| `npm run test` | Ejecuta lint + build |
|
|
130
|
+
| `npm run docs` | Genera documentación CSS |
|
|
131
|
+
|
|
132
|
+
### Estructura del Proyecto
|
|
133
|
+
```
|
|
134
|
+
holygrail2/
|
|
135
|
+
├── scss/
|
|
136
|
+
│ ├── abstract/ # Variables, mixins, funciones
|
|
137
|
+
│ ├── base/ # Estilos base y reset
|
|
138
|
+
│ ├── elements/ # Componentes (botones, forms, etc.)
|
|
139
|
+
│ ├── layouts/ # Layouts y grid system
|
|
140
|
+
│ ├── hg-lite/ # Framework ligero
|
|
141
|
+
│ └── style.scss # Archivo principal
|
|
142
|
+
├── dist/ # CSS compilado
|
|
143
|
+
├── src/ # Documentación (Eleventy)
|
|
144
|
+
├── guia/ # Guía generada
|
|
145
|
+
└── package.json
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
## 🎨 Personalización
|
|
149
|
+
|
|
150
|
+
### Variables SCSS
|
|
151
|
+
```scss
|
|
152
|
+
// Colores
|
|
153
|
+
$c-primary: #000;
|
|
154
|
+
$c-secondary: #fff;
|
|
155
|
+
$c-accent: #B40016;
|
|
85
156
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
157
|
+
// Espaciado
|
|
158
|
+
$padding-global: 8px;
|
|
159
|
+
$padding-mobile: 24px;
|
|
160
|
+
$padding-desktop: 40px;
|
|
161
|
+
|
|
162
|
+
// Breakpoints
|
|
163
|
+
$break-sm: 768px;
|
|
164
|
+
$break-md: 1024px;
|
|
165
|
+
$break-lg: 1200px;
|
|
94
166
|
```
|
|
95
167
|
|
|
96
|
-
|
|
168
|
+
### Configuración de Grid
|
|
169
|
+
```scss
|
|
170
|
+
// Columnas
|
|
171
|
+
$totalCols: 12;
|
|
172
|
+
$totalColsXl: 24;
|
|
97
173
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
ncu -u
|
|
174
|
+
// Contenedores
|
|
175
|
+
$container: 800px;
|
|
176
|
+
$container-full: 1500px;
|
|
102
177
|
```
|
|
103
178
|
|
|
179
|
+
## 🌍 Internacionalización
|
|
180
|
+
|
|
181
|
+
Holygrail2 incluye soporte completo para RTL (Right-to-Left):
|
|
104
182
|
|
|
105
|
-
|
|
183
|
+
```html
|
|
184
|
+
<!-- CSS RTL -->
|
|
185
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/holygrail2@latest/dist/style-rtl.css">
|
|
186
|
+
```
|
|
106
187
|
|
|
107
|
-
|
|
188
|
+
## 🖥 Compatibilidad
|
|
108
189
|
|
|
109
|
-
|
|
190
|
+
| Navegador | Versión |
|
|
191
|
+
|-----------|---------|
|
|
192
|
+
| Chrome | Últimas 2 versiones |
|
|
193
|
+
| Firefox | Últimas 2 versiones |
|
|
194
|
+
| Safari | Últimas 2 versiones |
|
|
195
|
+
| Edge | Últimas 2 versiones |
|
|
196
|
+
| Electron | Todas las versiones |
|
|
110
197
|
|
|
111
|
-
|
|
198
|
+
## 📚 Documentación
|
|
112
199
|
|
|
113
|
-
|
|
200
|
+
- **Guía Online**: [holyguide.es](https://holyguide.es)
|
|
201
|
+
- **NPM Package**: [npmjs.com/package/holygrail2](https://www.npmjs.com/package/holygrail2)
|
|
202
|
+
- **CDN**: [jsdelivr.com/package/npm/holygrail2](https://www.jsdelivr.com/package/npm/holygrail2)
|
|
114
203
|
|
|
115
|
-
|
|
204
|
+
## 🤝 Contribuir
|
|
116
205
|
|
|
117
|
-
|
|
206
|
+
¡Las contribuciones son bienvenidas!
|
|
207
|
+
|
|
208
|
+
1. Fork el proyecto
|
|
209
|
+
2. Crea una rama para tu feature (`git checkout -b feature/AmazingFeature`)
|
|
210
|
+
3. Commit tus cambios (`git commit -m 'Add some AmazingFeature'`)
|
|
211
|
+
4. Push a la rama (`git push origin feature/AmazingFeature`)
|
|
212
|
+
5. Abre un Pull Request
|
|
213
|
+
|
|
214
|
+
### Guías de Contribución
|
|
215
|
+
- Usa comentarios `//` en lugar de `/* */`
|
|
216
|
+
- Sigue las reglas de Stylelint
|
|
217
|
+
- Ejecuta `npm run test` antes de hacer commit
|
|
218
|
+
- Mantén la compatibilidad con navegadores
|
|
219
|
+
|
|
220
|
+
## 📄 Licencia
|
|
221
|
+
|
|
222
|
+
Este proyecto está bajo la Licencia MIT. Ver el archivo [LICENSE](LICENSE) para más detalles.
|
|
223
|
+
|
|
224
|
+
## 🙏 Agradecimientos
|
|
118
225
|
|
|
119
|
-
<p align="center">
|
|
120
226
|
Desarrollado con ❤️ desde Barcelona para el mundo.
|
|
121
|
-
|
|
227
|
+
|
|
228
|
+
---
|
|
229
|
+
|
|
230
|
+
**Holygrail2** - Un framework CSS minimalista y potente para aplicaciones web modernas.
|
|
122
231
|
|
|
123
232
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "holygrail2",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.20",
|
|
4
4
|
"description": "A minimal, responsive, style-agnostic CSS framework.",
|
|
5
5
|
"main": "scss/style.scss",
|
|
6
6
|
"style": "dist/style.css",
|
|
@@ -21,7 +21,12 @@
|
|
|
21
21
|
"site": "npx @11ty/eleventy",
|
|
22
22
|
"build": "npm run generate && npm run css && npm run site",
|
|
23
23
|
"start": "npm run build && npm run open:guide",
|
|
24
|
-
"open:guide": "open guia/index.html"
|
|
24
|
+
"open:guide": "open guia/index.html",
|
|
25
|
+
"lint": "stylelint 'scss/**/*.?(s)css'",
|
|
26
|
+
"lint:fix": "stylelint --fix 'scss/**/*.?(s)css'",
|
|
27
|
+
"format": "prettier --write 'scss/**/*.+(css|scss)'",
|
|
28
|
+
"docs": "sass scss/docs.scss doc/docs.css --style expanded && sass scss/docs.scss doc/docs.min.css --style compressed",
|
|
29
|
+
"test": "npm run lint && npm run build"
|
|
25
30
|
},
|
|
26
31
|
"repository": {
|
|
27
32
|
"type": "git",
|
|
@@ -55,7 +60,5 @@
|
|
|
55
60
|
"stylelint-order": "^6.0.3",
|
|
56
61
|
"stylelint-scss": "^5.1.0"
|
|
57
62
|
},
|
|
58
|
-
"dependencies": {
|
|
59
|
-
"stylelint": "^15.10.2"
|
|
60
|
-
}
|
|
63
|
+
"dependencies": {}
|
|
61
64
|
}
|
package/scss/_variables.scss
CHANGED
|
@@ -25,16 +25,16 @@ $c-black: #000 !default;
|
|
|
25
25
|
$c-light-grey: #f0f0f0 !default;
|
|
26
26
|
$c-middle-grey: #a9a9a9 !default;
|
|
27
27
|
$c-dark-grey: #737373 !default;
|
|
28
|
-
$c-primary-3:
|
|
29
|
-
$c-primary-15:
|
|
30
|
-
$c-primary-30:
|
|
31
|
-
$c-primary-60:
|
|
32
|
-
$c-primary-97:
|
|
33
|
-
$c-secondary-3:
|
|
34
|
-
$c-secondary-15:
|
|
35
|
-
$c-secondary-30:
|
|
36
|
-
$c-secondary-60:
|
|
37
|
-
$c-secondary-97:
|
|
28
|
+
$c-primary-3: rgb(0 0 0 / 30%);
|
|
29
|
+
$c-primary-15: rgb(0 0 0 / 15%);
|
|
30
|
+
$c-primary-30: rgb(0 0 0 / 30%);
|
|
31
|
+
$c-primary-60: rgb(0 0 0 / 60%);
|
|
32
|
+
$c-primary-97: rgb(0 0 0 / 97%);
|
|
33
|
+
$c-secondary-3: rgb(255 255 255 / 30%);
|
|
34
|
+
$c-secondary-15: rgb(255 255 255 / 15%);
|
|
35
|
+
$c-secondary-30: rgb(255 255 255 / 30%);
|
|
36
|
+
$c-secondary-60: rgb(255 255 255 / 60%);
|
|
37
|
+
$c-secondary-97: rgb(255 255 255 / 97%);
|
|
38
38
|
$c-primary: #000 !default;
|
|
39
39
|
$c-secondary: #000 !default;
|
|
40
40
|
$c-accent: #b40016 !default;
|
|
@@ -58,12 +58,12 @@ $bg-black: #000 !default;
|
|
|
58
58
|
$c-bg-light: #000 !default;
|
|
59
59
|
$c-bg-dark: #fff !default;
|
|
60
60
|
$white-smoke: #f0f0f0 !default;
|
|
61
|
-
$primary: #
|
|
61
|
+
$primary: #000 !default;
|
|
62
62
|
$primary-guide: #363636 !default;
|
|
63
63
|
$secondary-guide: #6759bb !default;
|
|
64
64
|
$ternary-guide: #6759bb !default;
|
|
65
65
|
$list-disc-color: #1a1a1a !default;
|
|
66
|
-
$c-feel: #
|
|
66
|
+
$c-feel: #000 !default;
|
|
67
67
|
$c-feel-light: #f0f0f0 !default;
|
|
68
68
|
$c-feel-dark: #a9a9a9 !default;
|
|
69
69
|
$c-tier-silver: #e3e3e3 !default;
|
package/scss/base/_grid.scss
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
@use 'sass:math';
|
|
2
2
|
@import '../abstract/_all';
|
|
3
|
-
|
|
3
|
+
|
|
4
4
|
.container-full {
|
|
5
5
|
margin-left: auto;
|
|
6
6
|
margin-right: auto;
|
|
7
7
|
max-width: $container-full;
|
|
8
8
|
padding-inline: $padding-global;
|
|
9
|
-
//0
|
|
10
9
|
position: relative;
|
|
11
10
|
@media (min-width: $break-sm) {
|
|
12
11
|
max-width: nth(map-values($breakpoints), 2);
|
|
@@ -26,7 +25,6 @@
|
|
|
26
25
|
margin-left: 0;
|
|
27
26
|
margin-right: 0;
|
|
28
27
|
max-width: 100%;
|
|
29
|
-
//1
|
|
30
28
|
position: relative;
|
|
31
29
|
width: 100%;
|
|
32
30
|
@media (min-width: $break-md) {
|
|
@@ -38,18 +36,15 @@
|
|
|
38
36
|
margin-left: auto;
|
|
39
37
|
margin-right: auto;
|
|
40
38
|
padding-inline: 0;
|
|
41
|
-
// 0
|
|
42
39
|
position: relative;
|
|
43
40
|
}
|
|
44
41
|
.container-fluid {
|
|
45
42
|
margin-left: auto;
|
|
46
43
|
margin-right: auto;
|
|
47
44
|
padding-inline: $padding-global;
|
|
48
|
-
//58
|
|
49
45
|
position: relative;
|
|
50
46
|
}
|
|
51
47
|
.container-body {
|
|
52
|
-
//0
|
|
53
48
|
padding-left: 16px;
|
|
54
49
|
padding-right: 16px;
|
|
55
50
|
@media (min-width: $break-md) {
|
|
@@ -59,7 +54,6 @@
|
|
|
59
54
|
}
|
|
60
55
|
.container-body2 {
|
|
61
56
|
overflow: hidden;
|
|
62
|
-
//0
|
|
63
57
|
padding-left: 16px;
|
|
64
58
|
@media (min-width: $break-md) {
|
|
65
59
|
padding-left: 40px;
|
|
@@ -98,7 +92,6 @@
|
|
|
98
92
|
margin-right: auto;
|
|
99
93
|
max-width: $container-2;
|
|
100
94
|
padding-inline: $padding-global;
|
|
101
|
-
//3
|
|
102
95
|
position: relative;
|
|
103
96
|
width: 90%;
|
|
104
97
|
}
|
|
@@ -107,7 +100,6 @@
|
|
|
107
100
|
margin-right: auto;
|
|
108
101
|
max-width: $container-3;
|
|
109
102
|
padding-inline: $padding-global * 3;
|
|
110
|
-
//0
|
|
111
103
|
position: relative;
|
|
112
104
|
width: 100%;
|
|
113
105
|
@media (min-width: $break-sm) {
|
|
@@ -119,16 +111,13 @@
|
|
|
119
111
|
margin-right: auto;
|
|
120
112
|
max-width: $container-4;
|
|
121
113
|
padding-inline: $padding-global * 2;
|
|
122
|
-
//9
|
|
123
114
|
position: relative;
|
|
124
115
|
width: 100%;
|
|
125
116
|
}
|
|
126
|
-
// join life style
|
|
127
117
|
.container-5 {
|
|
128
118
|
margin: 0 auto;
|
|
129
119
|
max-width: $container-5;
|
|
130
120
|
padding: 0 $padding-global;
|
|
131
|
-
//1
|
|
132
121
|
position: relative;
|
|
133
122
|
width: 100%;
|
|
134
123
|
@media (min-width: $break-lg) {
|
|
@@ -140,7 +129,6 @@
|
|
|
140
129
|
margin: 0 auto;
|
|
141
130
|
max-width: $container-6;
|
|
142
131
|
padding: 0 $padding-global;
|
|
143
|
-
//3
|
|
144
132
|
position: relative;
|
|
145
133
|
width: 100%;
|
|
146
134
|
}
|
|
@@ -148,7 +136,6 @@
|
|
|
148
136
|
margin: 0 auto;
|
|
149
137
|
max-width: 295px;
|
|
150
138
|
padding: 0 $padding-global * 2;
|
|
151
|
-
//2
|
|
152
139
|
position: relative;
|
|
153
140
|
width: 100%;
|
|
154
141
|
@media (min-width: $break-sm) {
|
|
@@ -167,7 +154,6 @@
|
|
|
167
154
|
margin: 0 auto;
|
|
168
155
|
max-width: $container-8;
|
|
169
156
|
padding: 0 $padding-global;
|
|
170
|
-
//8
|
|
171
157
|
position: relative;
|
|
172
158
|
width: 100%;
|
|
173
159
|
}
|
|
@@ -175,7 +161,6 @@
|
|
|
175
161
|
margin: 0 auto;
|
|
176
162
|
max-width: $container-9;
|
|
177
163
|
padding: 0 $padding-mobile;
|
|
178
|
-
//4
|
|
179
164
|
position: relative;
|
|
180
165
|
width: 100%;
|
|
181
166
|
@media (min-width: $break-sm) {
|
|
@@ -184,14 +169,12 @@
|
|
|
184
169
|
}
|
|
185
170
|
.container-10 {
|
|
186
171
|
max-width: $container-10;
|
|
187
|
-
//0
|
|
188
172
|
position: relative;
|
|
189
173
|
}
|
|
190
174
|
.container-11 {
|
|
191
175
|
margin: 0 auto;
|
|
192
176
|
max-width: $container-11;
|
|
193
177
|
padding: 0 $padding-mobile;
|
|
194
|
-
//0
|
|
195
178
|
position: relative;
|
|
196
179
|
width: 100%;
|
|
197
180
|
@media (min-width: $break-sm) {
|
|
@@ -201,7 +184,6 @@
|
|
|
201
184
|
.container-12 {
|
|
202
185
|
max-width: $container-12;
|
|
203
186
|
padding: 0 $padding-mobile;
|
|
204
|
-
//4
|
|
205
187
|
position: relative;
|
|
206
188
|
width: 100%;
|
|
207
189
|
@media (min-width: $break-sm) {
|
|
@@ -217,14 +199,13 @@
|
|
|
217
199
|
width: 100%;
|
|
218
200
|
}
|
|
219
201
|
.container-512 {
|
|
220
|
-
max-width: 512px;
|
|
202
|
+
max-width: 512px;
|
|
221
203
|
width: 100%;
|
|
222
204
|
}
|
|
223
205
|
.container-640 {
|
|
224
206
|
max-width: 640px;
|
|
225
207
|
width: 100%;
|
|
226
208
|
}
|
|
227
|
-
// -ROW
|
|
228
209
|
.row {
|
|
229
210
|
display: flex;
|
|
230
211
|
flex-wrap: wrap;
|
|
@@ -237,7 +218,6 @@
|
|
|
237
218
|
}
|
|
238
219
|
}
|
|
239
220
|
}
|
|
240
|
-
// -COLS
|
|
241
221
|
@for $i from 1 through 4 {
|
|
242
222
|
@media (min-width: nth(map-values($breakpointscols), $i)) {
|
|
243
223
|
@for $c from 1 through $totalCols {
|
|
@@ -307,10 +287,10 @@
|
|
|
307
287
|
max-width: 1200px;
|
|
308
288
|
width: 100%;
|
|
309
289
|
}
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
290
|
+
.grid-1 {
|
|
291
|
+
display: grid;
|
|
292
|
+
grid-template-columns: 1fr;
|
|
293
|
+
}
|
|
314
294
|
.grid-2 {
|
|
315
295
|
display: grid;
|
|
316
296
|
grid-template-columns: repeat(2, 1fr);
|
|
@@ -319,24 +299,19 @@
|
|
|
319
299
|
display: grid;
|
|
320
300
|
grid-template-columns: repeat(3, 1fr);
|
|
321
301
|
}
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
302
|
+
.grid-4 {
|
|
303
|
+
display: grid;
|
|
304
|
+
grid-template-columns: repeat(4, 1fr);
|
|
305
|
+
}
|
|
327
306
|
.colgap-16 {
|
|
328
307
|
column-gap: 16px;
|
|
329
308
|
}
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
309
|
+
.gap-8 {
|
|
310
|
+
gap: 8px;
|
|
311
|
+
}
|
|
333
312
|
.colgap-8 {
|
|
334
313
|
column-gap: 8px;
|
|
335
314
|
}
|
|
336
|
-
.grid-4 {
|
|
337
|
-
display: grid;
|
|
338
|
-
grid-template-columns: repeat(4, 1fr);
|
|
339
|
-
}
|
|
340
315
|
.grid-gap-8 {
|
|
341
316
|
gap: 8px;
|
|
342
317
|
}
|
|
@@ -362,24 +337,24 @@
|
|
|
362
337
|
grid-template-columns: repeat(2, 1fr);
|
|
363
338
|
}
|
|
364
339
|
}
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
}
|
|
340
|
+
.sm\:grid-1 {
|
|
341
|
+
@media (min-width: $break-sm) {
|
|
342
|
+
display: grid;
|
|
343
|
+
grid-template-columns: 1fr;
|
|
370
344
|
}
|
|
345
|
+
}
|
|
371
346
|
.sm\:grid-2 {
|
|
372
347
|
@media (min-width: $break-sm) {
|
|
373
|
-
|
|
374
|
-
|
|
348
|
+
display: grid;
|
|
349
|
+
grid-template-columns: 1fr 1fr;
|
|
375
350
|
}
|
|
376
351
|
}
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
}
|
|
352
|
+
.sm\:grid-3 {
|
|
353
|
+
@media (min-width: $break-sm) {
|
|
354
|
+
display: grid;
|
|
355
|
+
grid-template-columns: 1fr 1fr 1fr;
|
|
382
356
|
}
|
|
357
|
+
}
|
|
383
358
|
.sm\:grid-4 {
|
|
384
359
|
@media (min-width: $break-sm) {
|
|
385
360
|
display: grid;
|
package/scss/base/_icons.scss
CHANGED
|
@@ -293,8 +293,8 @@ md-icon.ico-pre {
|
|
|
293
293
|
align-items: center;
|
|
294
294
|
justify-content: center;
|
|
295
295
|
|
|
296
|
-
|
|
297
|
-
|
|
296
|
+
&::before,
|
|
297
|
+
&::after {
|
|
298
298
|
content: "";
|
|
299
299
|
position: absolute;
|
|
300
300
|
width: 12px;
|
|
@@ -303,24 +303,18 @@ md-icon.ico-pre {
|
|
|
303
303
|
transition: transform 0.2s ease;
|
|
304
304
|
}
|
|
305
305
|
|
|
306
|
-
|
|
306
|
+
&::before {
|
|
307
307
|
transform: rotate(90deg);
|
|
308
308
|
}
|
|
309
309
|
|
|
310
|
-
.is-active
|
|
310
|
+
.is-active &::before {
|
|
311
311
|
transform: rotate(0deg);
|
|
312
312
|
}
|
|
313
313
|
|
|
314
|
-
.has-light &{
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
background-color: $c-white;
|
|
320
|
-
|
|
314
|
+
.has-light & {
|
|
315
|
+
&::before,
|
|
316
|
+
&::after {
|
|
317
|
+
background-color: $c-white;
|
|
318
|
+
}
|
|
321
319
|
}
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
}
|
|
325
|
-
|
|
326
320
|
}
|