Merge branch 'master' of https://github.com/sjohnsonaz/artistry

sjohnsonaz · Feb 16, 2019 · d445008 · d445008
2 parents 252d904 + ebeb736
commit d445008
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 13 deletions.
diff --git a/src/styl/card/card-settings.styl b/src/styl/card/card-settings.styl
@@ -1,9 +1,9 @@
 @require "../settings.styl";
 $card-padding ?= $default-padding;
 $card-margin ?= $default-margin-layout;
-$card-border-width ?= $default-border-width;
+$card-border-width ?= 1px;//$default-border-width;
 $card-border-color ?= $default-border-color;
-$card-border-radius ?= $default-border-radius;
+$card-border-radius ?= 0;//$default-border-radius;
 $card-background-color ?= $default-background-color;
 $card-header-background-color ?= $default-header-color;
 $card-header-color ?= $default-header-color-alt;
@@ -30,4 +30,4 @@ $card-danger-background-color ?= $danger-color;
 $card-danger-color ?= $danger-color-alt;
 $card-danger-border-color ?= $danger-color;
 
-$card-handle-width ?= 3px;
+$card-handle-width ?= 5px;
diff --git a/src/styl/card/card.styl b/src/styl/card/card.styl
@@ -18,6 +18,8 @@ $card-header-margin = -($card-border-width + $card-padding);
 }
 
 .card {
+    --card-handle-width: $card-handle-width;
+
     display: flex;
     flex-direction: column;
     flex-basis: auto;
@@ -46,6 +48,14 @@ $card-header-margin = -($card-border-width + $card-padding);
         }
     }
 
+    & > *:first-child {
+        border-top-width: 0;
+    }
+
+    & > *:last-child {
+        border-bottom-width: 0;
+    }
+
     &.card-type-success {
         border-color: $card-success-border-color;
     }
@@ -63,19 +73,23 @@ $card-header-margin = -($card-border-width + $card-padding);
     }
 
     &.card-handle-top {
-        border-top-width: $card-handle-width;
+        border-top-width: var(--card-handle-width);
     }
 
     &.card-handle-right {
-        border-right-width: $card-handle-width;
+        border-right-width: var(--card-handle-width);
     }
 
     &.card-handle-bottom {
-        border-bottom-width: $card-handle-width;
+        border-bottom-width: var(--card-handle-width);
     }
 
     &.card-handle-left {
-        border-left-width: $card-handle-width;
+        border-left-width: var(--card-handle-width);
+    }
+
+    $.card-handle-bold {
+
     }
 
     & > header,
@@ -85,8 +99,11 @@ $card-header-margin = -($card-border-width + $card-padding);
         background-color: $card-header-background-color;
         color: $card-header-color;
         font-weight: $card-header-font-weight;
-        border: $card-border-width solid $card-border-color;
-        margin: (-1 * $card-border-width);
+        //border: $card-border-width solid $card-border-color;
+        border-width: $card-border-width 0;
+        border-color: $card-border-color;
+        border-style: solid;
+        margin: 0;//(-1 * $card-border-width);
         padding: $card-padding;
         clearfix();
 

diff --git a/src/styl/colors.styl b/src/styl/colors.styl
@@ -25,3 +25,30 @@ $brown-dark ?= darken($brown, $darker);
 $brown-light ?= lighten($brown, $lighter);
 $orange-dark ?= darken($orange, $darker);
 $orange-light ?= lighten($orange, $lighter);
+
+:root {
+    --color-white: $white;
+    --color-black: $black;
+    --color-gray: $gray;
+    --color-red: $red;
+    --color-blue: $blue;
+    --color-yellow: $yellow;
+    --color-green: $green;
+    --color-brown: $brown;
+    --color-orange: $orange;
+
+    --color-gray-dark: $gray-dark;
+    --color-gray-light: $gray-light;
+    --color-red-dark: $red-dark;
+    --color-red-light: $red-light;
+    --color-blue-dark: $blue-dark;
+    --color-blue-light: $blue-light;
+    --color-yellow-dark: $yellow-dark;
+    --color-yellow-light: $yellow-light;
+    --color-green-dark: $green-dark;
+    --color-green-light: $green-light;
+    --color-brown-dark: $brown-dark;
+    --color-brown-light: $brown-light;
+    --color-orange-dark: $orange-dark;
+    --color-orange-light: $orange-light;
+}
diff --git a/test/views/card.hbs b/test/views/card.hbs
@@ -3,7 +3,7 @@
     <div class="section-content section-content-space">
         <h3>Simple Card</h3>
         <div class="card-container">
-            <section class="card">
+            <section class="card card-handle-left card-type-success">
                 <header>Card Header</header>
                 <div class="card-content space">Card Content</div>
                 <header>Card Header</header>
@@ -15,7 +15,7 @@
                 </nav>
                 <footer>Card Footer</footer>
             </section>
-            <section class="card card-handle-left card-type-success" data-closed="true">
+            <section class="card card-handle-left card-type-info" data-closed="true">
                 <header>Card Header</header>
                 <div class="card-content">
                     <div>Card Content</div>
@@ -29,7 +29,7 @@
                     <footer class="card-title">Card Footer</footer>
                 </div>
             </section>
-            <section class="card" data-closed="false">
+            <section class="card card-handle-left card-type-warning" data-closed="false">
                 <header>Card Header</header>
                 <div class="card-content space">
                     <div>Card Content</div>
@@ -43,7 +43,7 @@
                 </nav>
                 <footer class="card-title">Card Footer</footer>
             </section>
-            <section class="card" data-closed="false">
+            <section class="card card-handle-left card-type-danger" data-closed="false">
                 <header>Card Header</header>
                 <div class="card-content space">
                     <div>Card Content</div>