Merge pull request #12 from andrejsharapov/dependencies

removed sass and sass-loader dependencies
andrejsharapov · Jul 22, 2022 · faa1ab6 · faa1ab6
2 parents 79ef50c + 8894dbe
commit faa1ab6
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 38 deletions.
diff --git a/package.json b/package.json
@@ -15,8 +15,6 @@
     "core-js": "^3.23.5",
     "eslint": "^6.8.0",
     "eslint-plugin-vue": "^6.2.2",
-    "sass": "^1.53.0",
-    "sass-loader": "^10",
     "vue": "^2.7.7",
     "vue-template-compiler": "^2.7.7"
   },

diff --git a/src/App.vue b/src/App.vue
@@ -2,7 +2,8 @@
   <div id="app">
     <div class="container">
       <h1 class="message">
-        Box-shadows.css <strong>for <span style="color: #42d392">Vue</span></strong>
+        Box-shadows.css
+        <strong>for <span style="color: #42d392">Vue</span></strong>
       </h1>
       <p>
         Add beautiful shadow effects to your project without thinking about CSS.
@@ -46,44 +47,45 @@ export default {
 };
 </script>
 
-<style lang="sass">
-@function rgb($hex)
-    @return red($hex) green($hex) blue($hex)
+<style>
+body {
+  --base-size: 0.25rem;
+  --body-text-color: #1f2229;
+  --body-background: #e9ecf2;
+  --card-border-color: #abc6d034;
+  --card-background: #fafafa;
 
-body
-  --base-size: 0.25rem
-  --text-color: #{rgb(#1f2229)}
-  --background-color: #{rgb(#e9ecf2)}
-  --background-opacity: 1
+  margin: 0;
+  font-family: sans-serif;
+  font-size: clamp(1rem, 1.5vw, 2.25rem);
+  color: var(--body-text-color);
+  background-color: var(--body-background);
+}
 
-  margin: 0
-  font-family: sans-serif
-  font-size: clamp(1rem, 1.5vw, 2.25rem)
-  color: rgba(var(--text-color))
-  background-color: rgba(var(--background-color) / var(--background-opacity))
+.container {
+  max-width: 86vw;
+  margin: auto;
+  padding: calc(var(--base-size) * 6);
+}
 
-.container
-  --border-color: #{rgb(#abc6d0)}
-  --border-opacity: 0.2
+.message {
+  margin-bottom: 2rem;
+}
 
-  max-width: 86vw
-  margin: auto
-  padding: calc(var(--base-size) * 6)
+.list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(8rem, auto));
+  gap: 8vw;
+  text-align: center;
+}
 
-  .message
-    margin-bottom: 2rem
-
-  .list
-    display: grid
-    grid-template-columns: repeat(auto-fit, minmax(8rem, auto) )
-    gap: 8vw
-    text-align: center
-
-    .list-item
-      display: grid
-      padding: 1rem
-      min-height: 8rem
-      place-content: center
-      border: thin solid rgba(var(--border-color) / var(--border-opacity))
-      border-radius: var(--base-size)
+.list-item {
+  display: grid;
+  padding: 1rem;
+  min-height: 8rem;
+  place-content: center;
+  border: thin solid var(--card-border-color);
+  border-radius: var(--base-size);
+  background-color: var(--card-background);
+}
 </style>