externalise scss

MAIF · Dec 3, 2024 · 7d6fb2a · 7d6fb2a
1 parent 8878255
commit 7d6fb2a
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 35 deletions.
diff --git a/otoroshi/javascript/src/pages/FeaturesPage.js b/otoroshi/javascript/src/pages/FeaturesPage.js
@@ -382,53 +382,24 @@ const Feature = ({ title, description, img, link, icon }) => {
   return (
     <AutoLink
       to={link}
-      className="d-flex"
-      style={{
-        backgroundColor: 'var(--bg-color_level2)',
-        margin: '5px 0px',
-        height: '100%',
-        borderRadius: '12px',
-        maxWidth: 300,
-        minWidth: 300,
-        maxHeight: 300,
-        minHeight: 300,
-        padding: 0,
-        display: 'flex',
-        flexDirection: 'column',
-        overflow: 'hidden',
-      }}
+      className="cards"
     >
       <div
+      className="cards-header"
         style={{
-          flex: 1,
-          background: `url(${img})`,
-          backgroundSize: 'contain',
-          backgroundPosition: 'center',
-          backgroundRepeat: 'no-repeat',
-          minHeight: 150,
-          margin: 12,
+          background: `url(${img})`
         }}
       ></div>
       <div
-        className="d-flex flex-column"
-        style={{ flex: 1, backgroundColor: 'var(--bg-color_level3)', padding: '12px' }}
+        className="cards-body"
       >
         <div
-          style={{
-            fontWeight: 'bold',
-            marginLeft: '5px',
-            marginTop: '7px',
-            marginBottom: '10px',
-            fontSize: 20,
-            color: 'var(--color_level3)',
-            textTransform: 'capitalize',
-          }}
+          className="cards-title"
         >
           {zeIcon} {title}
         </div>
         <div
-          className="me-1"
-          style={{ marginLeft: '5px', marginBottom: '10px', color: 'var(--color_level3)' }}
+          className="cards-description"
         >
           <p>{description}</p>
         </div>

diff --git a/otoroshi/javascript/src/style/components/_card.scss b/otoroshi/javascript/src/style/components/_card.scss
@@ -0,0 +1,44 @@
+.cards {
+  background-color: var(--bg-color_level2);
+  margin: 5px 0px;
+  height: 100%;
+  border-radius: 12px;
+  max-width: 300px;
+  min-width: 300px;
+  // max-height: 300px;
+  min-height: 300px;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  &-header {
+    flex: 1;
+    background-size: contain !important;
+    background-position: center !important;
+    background-repeat: no-repeat !important;
+    min-height: 150px;
+    margin: 12px;
+  }
+  &-body {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    background-color: var(--bg-color_level3);
+    padding: 12px;
+  }
+  &-title {
+    font-weight: bold;
+    margin-left: 5px;
+    margin-top: 7px;
+    margin-bottom: 10px;
+    font-size: 20px;
+    color: var(--color_level3);
+    text-transform: capitalize;
+  }
+  &-description {
+    margin-right: 0.25rem !important;
+    margin-left: 5px;
+    margin-bottom: 10px;
+    color: var(--color_level3);
+  }
+}
diff --git a/otoroshi/javascript/src/style/main.scss b/otoroshi/javascript/src/style/main.scss
@@ -26,6 +26,8 @@
 @import 'components/anims';
 @import 'components/select';
 @import 'components/components';
+@import 'components/card';
+
 
 
 @import 'layout/global';