From e410f7aceab7db528a3de6600ad837b36ef3a896 Mon Sep 17 00:00:00 2001
From: Astra <juanitho.666.r@gmail.com>
Date: Mon, 21 Feb 2022 11:17:08 -0600
Subject: [PATCH] [Crear] carpeta para los estilos del nuevo componente

---
 .../pagination/pagination-desktop.css         | 15 ++++++
 .../components/pagination/pagination.css      | 50 +++++++++++++++++++
 2 files changed, 65 insertions(+)
 create mode 100644 assets/styles/components/pagination/pagination-desktop.css
 create mode 100644 assets/styles/components/pagination/pagination.css

diff --git a/assets/styles/components/pagination/pagination-desktop.css b/assets/styles/components/pagination/pagination-desktop.css
new file mode 100644
index 0000000..6857739
--- /dev/null
+++ b/assets/styles/components/pagination/pagination-desktop.css
@@ -0,0 +1,15 @@
+.pages {
+    gap: 22px;
+}
+
+.pages__move {
+    width: 44px;
+    height: 44px;
+    font-size: 2.4rem;
+}
+
+.pages__actual { 
+    width: 44px;
+    height: 44px;
+    font-size: 2.4rem;
+}
\ No newline at end of file
diff --git a/assets/styles/components/pagination/pagination.css b/assets/styles/components/pagination/pagination.css
new file mode 100644
index 0000000..38051b0
--- /dev/null
+++ b/assets/styles/components/pagination/pagination.css
@@ -0,0 +1,50 @@
+/*
+* Orden de los estilos
+*   1. Posicionamiento
+*   2. Modelo de caja
+*   3. Tipografía
+*   4. Visuales
+*   5. Otros
+* Metodología => BEM
+*/
+
+/* Estilos para el componente de pginación */
+
+.pages {
+  display: flex;
+  gap: 16px;
+  margin: 15px 0;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.pages__move {
+    width: 30px;
+    height: 30px;
+    padding: 5px;
+    display: flex;
+    border-radius: 50%;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    font-size: 2rem;
+    font-weight: 200;
+    color: var(--color-background);
+    background-color: var(--color-secondary-purple);
+}
+
+.pages__actual {
+    width: 30px;
+    height: 30px;
+    padding: 5px;
+    display: flex;
+    border-radius: 50%;
+    align-items: center;
+    justify-content: center;
+    font-size: 2rem;
+    font-weight: 300;
+    color: var(--color-black);
+    border: 2px solid var(--color-secondary-purple);
+    background-color: var(--color-background);
+}