From 4aa910109e7e2009765ebf1bc2706b6f364ab506 Mon Sep 17 00:00:00 2001 From: guzmanpdro Date: Wed, 10 Jan 2024 13:11:56 -0400 Subject: [PATCH] replace sass by css --- pruebas/01-reading-list/guzmanpdro/main.js | 2 +- .../guzmanpdro/package-lock.json | 31 ++- .../01-reading-list/guzmanpdro/package.json | 1 - .../src/{scss/styles.scss => css/styles.css} | 183 +++++++++--------- .../guzmanpdro/src/js/classes/App.js | 1 - 5 files changed, 122 insertions(+), 96 deletions(-) rename pruebas/01-reading-list/guzmanpdro/src/{scss/styles.scss => css/styles.css} (60%) diff --git a/pruebas/01-reading-list/guzmanpdro/main.js b/pruebas/01-reading-list/guzmanpdro/main.js index 1a94df3d7..d74d5e9db 100644 --- a/pruebas/01-reading-list/guzmanpdro/main.js +++ b/pruebas/01-reading-list/guzmanpdro/main.js @@ -1,4 +1,4 @@ -import './src/scss/styles.scss' +import './src/css/styles.css' import { ReadingList } from './src/js/classes/ReadingList' import { App } from './src/js/classes/App' diff --git a/pruebas/01-reading-list/guzmanpdro/package-lock.json b/pruebas/01-reading-list/guzmanpdro/package-lock.json index e7175d5db..cc6125411 100644 --- a/pruebas/01-reading-list/guzmanpdro/package-lock.json +++ b/pruebas/01-reading-list/guzmanpdro/package-lock.json @@ -11,7 +11,6 @@ "animate.css": "^4.1.1" }, "devDependencies": { - "sass": "^1.65.1", "standard": "^17.1.0", "vite": "^4.4.5" } @@ -578,6 +577,8 @@ "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" @@ -735,6 +736,8 @@ "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": ">=8" } @@ -754,6 +757,8 @@ "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "fill-range": "^7.0.1" }, @@ -834,6 +839,8 @@ "url": "https://paulmillr.com/funding/" } ], + "optional": true, + "peer": true, "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", @@ -1619,6 +1626,8 @@ "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "to-regex-range": "^5.0.1" }, @@ -1791,6 +1800,8 @@ "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "is-glob": "^4.0.1" }, @@ -1946,7 +1957,9 @@ "version": "4.3.2", "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.2.tgz", "integrity": "sha512-oGXzbEDem9OOpDWZu88jGiYCvIsLHMvGw+8OXlpsvTFvIQplQbjg1B1cvKg8f7Hoch6+NGjpPsH1Fr+Mc2D1aA==", - "dev": true + "dev": true, + "optional": true, + "peer": true }, "node_modules/import-fresh": { "version": "3.3.0", @@ -2040,6 +2053,8 @@ "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "binary-extensions": "^2.0.0" }, @@ -2140,6 +2155,8 @@ "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": ">=0.12.0" } @@ -2467,6 +2484,8 @@ "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": ">=0.10.0" } @@ -2723,6 +2742,8 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", "dev": true, + "optional": true, + "peer": true, "engines": { "node": ">=8.6" }, @@ -2901,6 +2922,8 @@ "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "picomatch": "^2.2.1" }, @@ -3064,6 +3087,8 @@ "resolved": "https://registry.npmjs.org/sass/-/sass-1.65.1.tgz", "integrity": "sha512-9DINwtHmA41SEd36eVPQ9BJKpn7eKDQmUHmpI0y5Zv2Rcorrh0zS+cFrt050hdNbmmCNKTW3hV5mWfuegNRsEA==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "chokidar": ">=3.0.0 <4.0.0", "immutable": "^4.0.0", @@ -3327,6 +3352,8 @@ "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", "dev": true, + "optional": true, + "peer": true, "dependencies": { "is-number": "^7.0.0" }, diff --git a/pruebas/01-reading-list/guzmanpdro/package.json b/pruebas/01-reading-list/guzmanpdro/package.json index 909f05377..cb0761d8f 100644 --- a/pruebas/01-reading-list/guzmanpdro/package.json +++ b/pruebas/01-reading-list/guzmanpdro/package.json @@ -9,7 +9,6 @@ "preview": "vite preview" }, "devDependencies": { - "sass": "^1.65.1", "standard": "^17.1.0", "vite": "^4.4.5" }, diff --git a/pruebas/01-reading-list/guzmanpdro/src/scss/styles.scss b/pruebas/01-reading-list/guzmanpdro/src/css/styles.css similarity index 60% rename from pruebas/01-reading-list/guzmanpdro/src/scss/styles.scss rename to pruebas/01-reading-list/guzmanpdro/src/css/styles.css index 6010dc416..57d68090c 100644 --- a/pruebas/01-reading-list/guzmanpdro/src/scss/styles.scss +++ b/pruebas/01-reading-list/guzmanpdro/src/css/styles.css @@ -67,14 +67,15 @@ header { width: 200px; height: fit-content; margin-right: 4rem; +} - h3, h4 { - margin: 0 0 .8rem; - } +.sidebar h3, +.sidebar h4 { + margin: 0 0 .8rem; +} - h4 { - color: var(--text-active-color) - } +.sidebar h4 { + color: var(--text-active-color) } .genders { @@ -82,98 +83,98 @@ header { padding: .8rem; list-style-type: none; background-color: #191919; +} - &__control { - margin-bottom: .8rem; +.genders__control { + margin-bottom: .8rem; +} - input { - display: none; - } +.genders__control input { + display: none; +} - &--checked { - border-right: 3px solid var(--button-color); - } - } +.genders__control--checked { + border-right: 3px solid var(--button-color); +} - &__label { - font-weight: 700; - color: var(--dark-theme-text-color); +.genders__label { + font-weight: 700; + color: var(--dark-theme-text-color); +} - &:hover { - color: var(--text-hover-color); - cursor: pointer; - } - } +.genders__label:hover { + color: var(--text-hover-color); + cursor: pointer; } .book-section { flex-grow: 1; +} - &__counters { - display: flex; - border-bottom: 1px solid rgba(255, 255, 255, 0.25); - gap: 2.4rem; - margin-bottom: 2.4rem; - } +.book-section__counters { + display: flex; + border-bottom: 1px solid rgba(255, 255, 255, 0.25); + gap: 2.4rem; + margin-bottom: 2.4rem; +} - &__title { - margin: 0; - padding-bottom: .8rem; - transition: color .15s; +.book-section__title { + margin: 0; + padding-bottom: .8rem; + transition: color .15s; +} - &:hover { - color: var(--text-hover-color); - cursor: pointer; - } +.book-section__title:hover { + color: var(--text-hover-color); + cursor: pointer; +} - &--active { - color: var(--text-active-color); - border-bottom: 2px solid var(--text-active-color); +.book-section__title--active { + color: var(--text-active-color); + border-bottom: 2px solid var(--text-active-color); +} - &:hover { - color: var(--text-active-color); - } - } - } +.book-section__title--active:hover { + color: var(--text-active-color); +} - .book-list { - display: grid; - grid-template-columns: repeat( - auto-fill, - minmax(150px, 1fr) - ); - gap: 2.4rem 6rem; - margin: 0; - padding: 0; - } +.book-list { + display: grid; + grid-template-columns: repeat( + auto-fill, + minmax(150px, 1fr) + ); + gap: 2.4rem 6rem; + margin: 0; + padding: 0; +} - .book { - display: flex; - flex-direction: column; - - &__image { - height: 25rem; - margin: 0 0 .8rem; - - img { - width: 100%; - height: 25rem; - object-fit: cover; - } - } - - &__info { - display: flex; - flex-direction: column; - justify-content: space-between; - flex-grow: 1; - text-align: center; - } - - &__title { - margin: 0 0 .8rem; - } - } +.book-list .book { + display: flex; + flex-direction: column; +} + +.book__image { + height: 25rem; + margin: 0 0 .8rem; +} + +.book__image img { + width: 100%; + height: 25rem; + object-fit: cover; +} + +.book__info { + display: flex; + flex-direction: column; + justify-content: space-between; + flex-grow: 1; + text-align: center; +} + +.book__title { + margin: 0 0 .8rem; } .empty-reading-list { @@ -193,17 +194,17 @@ header { gap: 4rem; padding-top: 5rem; text-align: center; +} - &__title { - margin: 0; - margin-bottom: .8rem; - } +.empty-library__title { + margin: 0; + margin-bottom: .8rem; +} - &__text { - margin: 0; - font-size: 1.8rem; - font-weight: 700; - } +.empty-library__text { + margin: 0; + font-size: 1.8rem; + font-weight: 700; } a { diff --git a/pruebas/01-reading-list/guzmanpdro/src/js/classes/App.js b/pruebas/01-reading-list/guzmanpdro/src/js/classes/App.js index 682abf28a..7569712d9 100644 --- a/pruebas/01-reading-list/guzmanpdro/src/js/classes/App.js +++ b/pruebas/01-reading-list/guzmanpdro/src/js/classes/App.js @@ -30,7 +30,6 @@ class App { $addedBooks.textContent = `Lista de lectura (${addedBooks.length})` $booksAvailable.classList.add(SECTION_TITLE_ACTION.ACTIVE) $booksAvailable.addEventListener('click', () => ui.renderAvailableBooks()) - $addedBooks.textContent = `Lista de lectura (${addedBooks.length})` $addedBooks.addEventListener('click', () => ui.renderReadingList()) }