WIP: argon scss

src/index.html

@@ -14,6 +14,15 @@
     <h2 class="text-success">World</h2>
 
     <button class="btn btn-primary">Test</button>
+
+    <div class="card" style="width: 18rem;">
+      <img src="..." class="card-img-top" alt="...">
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+        <a href="#" class="btn btn-primary">Go somewhere</a>
+      </div>
+    </div>
   </div>
 
 </body>

src/main.js

@@ -1 +1 @@
-import './scss/all.scss';
+import './scss/argon.scss';

src/scss/argon.scss

@@ -0,0 +1,14 @@
+@import "~bootstrap/scss/functions";
+@import "argon/variables";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+
+
+
+@import "~bootstrap/scss/root";
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/type";
+@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/grid";
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/card";

src/scss/argon/_variables.scss

@@ -0,0 +1,63 @@
+// Cards
+
+// $card-spacer-y:                     .75rem !default;
+// $card-spacer-x:                     1.25rem !default;
+// $card-border-width:                 $border-width !default;
+// $card-border-radius:                $border-radius !default;
+// $card-border-color:                 rgba($black, .125) !default;
+// $card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
+// $card-cap-bg:                       rgba($black, .03) !default;
+// $card-cap-color:                    null !default;
+// $card-height:                       null !default;
+// $card-color:                        null !default;
+// $card-bg:                           $white !default;
+
+// $card-img-overlay-padding:          1.25rem !default;
+
+// $card-group-margin:                 $grid-gutter-width / 2 !default;
+// $card-deck-margin:                  $card-group-margin !default;
+
+// $card-columns-count:                3 !default;
+// $card-columns-gap:                  1.25rem !default;
+// $card-columns-margin:               $card-spacer-y !default;
+
+
+/// Cards
+
+$card-spacer-y:                     1.25rem !default;
+$card-spacer-x:                     1.5rem !default;
+// $card-border-width:                 $border-width !default;
+// $card-border-radius:                $border-radius !default;
+// $card-border-color:                 rgba($black, .05) !default;
+// $card-inner-border-radius:          subtract($card-border-radius, $card-border-width) !default;
+// $card-cap-bg:                       rgba($black, .03) !default;
+// $card-cap-color:                    null !default;
+// $card-height:                       null !default;
+// $card-color:                        null !default;
+// $card-bg:                           $white !default;
+
+// $card-img-overlay-padding:          1.25rem !default;
+
+// $card-group-margin:                 $grid-gutter-width / 2 !default;
+// $card-deck-margin:                  $card-group-margin !default;
+
+// $card-columns-count:                3 !default;
+// $card-columns-gap:                  1.25rem !default;
+// $card-columns-margin:               $card-spacer-y !default;
+
+
+// $card-spacer-y:                     1.25rem !default;
+// $card-spacer-x:                     1.5rem !default;
+// $card-border-width:                 $border-width !default;
+// $card-border-radius:                $border-radius !default;
+// $card-border-color:                 rgba($black, .05) !default;
+// $card-inner-border-radius:          calc(#{$card-border-radius} - #{$card-border-width}) !default;
+// $card-cap-bg:                       $white !default;
+// $card-bg:                           $white !default;
+// $card-box-shadow:                   $box-shadow !default;
+
+// $card-img-overlay-padding:          1.25rem !default;
+
+// $card-columns-count:                3 !default;
+// $card-columns-gap:                  1.25rem !default;
+// $card-columns-margin:               $card-spacer-y !default;