replace sass by css

midudev · Jan 10, 2024 · 4aa9101 · 4aa9101
1 parent 6751d1a
commit 4aa9101
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 96 deletions.
diff --git 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
diff --git 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/...ding-list/guzmanpdro/src/scss/styles.scss → ...eading-list/guzmanpdro/src/css/styles.css b/...ding-list/guzmanpdro/src/scss/styles.scss → ...eading-list/guzmanpdro/src/css/styles.css
@@ -67,113 +67,114 @@ 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 {
   margin: 0;
   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
@@ -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())
   }