Merge pull request #88 from RooftopAcademy/feature-55-individual-border

Feature 55 individual border
RooftopAcademy · Nov 5, 2021 · c68df8e · c68df8e
2 parents 19dc7c2 + 19a18d3
commit c68df8e
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 1 deletion.
diff --git a/public/styles.css b/public/styles.css
@@ -339,7 +339,23 @@ p::after {
 }
 
 .bg-primary {
-  background-color: var(--primary);
+    background-color: var(--primary);
+}
+
+.br-top {
+    border-top: 1px solid #E5E5E5;
+}
+
+.br-left {
+    border-left: 1px solid #E5E5E5;
+}
+
+.br-right {
+    border-right: 1px solid #E5E5E5;
+}
+
+.br-btm {
+    border-bottom: 1px solid #E5E5E5
 }
 
 .justify-content-sb {

diff --git a/src/template.html b/src/template.html
@@ -561,6 +561,33 @@ <h4>Ejemplo: Uso de iconos de fontawesome</h4>
         </div>
     </div>
 
+    <!-- Individual border -->
+    <div class="row">
+        <div class="col">
+            <h4>Border individuales para cada lado</h4>
+
+            <p>Si queres darle un borde individual puedes usar las siguientes clases:</p>
+            <p> <code>br-top</code> para darle un border superior </p>
+            <p> <code>br-left</code> para darle un border a la izquierda </p>
+            <p> <code>br-right</code> para darle un border a la derecha </p>
+            <p> <code>br-btm</code> para darle un border inferior </p>
+
+            <p class="txt-bold">Ejemplo de uso:</p>
+
+            <p> <code>class="br-top"</code> </p>
+            <div class="col br-top"> Border superior </div>
+
+            <p> <code>class="br-left"</code> </p>
+            <div class="col br-left"> Border a la izquierda </div>
+
+            <p> <code>class="br-right"</code> </p>
+            <div class="col br-right"> Border a la derecha </div>
+
+            <p> <code>class="br-btm"</code> </p>
+            <div class="col br-btm"> Border inferior </div>
+        </div>
+      </div>
+
     <!-- Space Between -->
     <div class="row">
         <div class="col" style="width: 100%;">