Added card-handle and card-type.

Added disabled. Added divider.
sjohnsonaz · Feb 14, 2019 · 9856aa0 · 9856aa0
1 parent 517b998
commit 9856aa0
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 3 deletions.
diff --git a/src/styl/card/card-settings.styl b/src/styl/card/card-settings.styl
@@ -15,4 +15,19 @@ $card-gap ?= $default-margin-layout;
 $card-min-width ?= 300px;
 $card-max-width ?= 1fr;
 
-$card-control-margin ?= $default-spacing;
+$card-control-margin ?= $default-spacing;
+
+$card-success-background-color ?= $success-color;
+$card-success-color ?= $success-color-alt;
+$card-success-border-color ?= $success-color;
+$card-info-background-color ?= $info-color;
+$card-info-color ?= $info-color-alt;
+$card-info-border-color ?= $info-color;
+$card-warning-background-color ?= $warning-color;
+$card-warning-color ?= $warning-color-alt;
+$card-warning-border-color ?= $warning-color;
+$card-danger-background-color ?= $danger-color;
+$card-danger-color ?= $danger-color-alt;
+$card-danger-border-color ?= $danger-color;
+
+$card-handle-width ?= 3px;
diff --git a/src/styl/card/card.styl b/src/styl/card/card.styl
@@ -46,6 +46,38 @@ $card-header-margin = -($card-border-width + $card-padding);
         }
     }
 
+    &.card-type-success {
+        border-color: $card-success-border-color;
+    }
+
+    &.card-type-info {
+        border-color: $card-info-border-color;
+    }
+
+    &.card-type-warning {
+        border-color: $card-warning-border-color;
+    }
+
+    &.card-type-danger {
+        border-color: $card-danger-border-color;
+    }
+
+    &.card-handle-top {
+        border-top-width: $card-handle-width;
+    }
+
+    &.card-handle-right {
+        border-right-width: $card-handle-width;
+    }
+
+    &.card-handle-bottom {
+        border-bottom-width: $card-handle-width;
+    }
+
+    &.card-handle-left {
+        border-left-width: $card-handle-width;
+    }
+
     & > header,
     & > footer,
     .card-title {

diff --git a/src/styl/core/mixins.styl b/src/styl/core/mixins.styl
@@ -103,4 +103,22 @@ relative() {
     border-left-width: $default-border-width;
     border-left-color: $default-border-color;
     border-left-style: solid;
+}
+
+.divider,
+.divider-horizontal {
+    border-width: $default-border-width 0 0 0;
+    border-color: $default-border-color;
+    border-style: solid;
+}
+
+.divider-vertical {
+    border-width: 0 $default-border-width 0 0;
+    border-color: $default-border-color;
+    border-style: solid;
+}
+
+&.disabled {
+    filter: contrast(40%) brightness(110%);
+    cursor: default;
 }
diff --git a/test/views/card.hbs b/test/views/card.hbs
@@ -15,7 +15,7 @@
                 </nav>
                 <footer>Card Footer</footer>
             </section>
-            <section class="card" data-closed="true">
+            <section class="card card-handle-left card-type-success" data-closed="true">
                 <header>Card Header</header>
                 <div class="card-content">
                     <div>Card Content</div>
@@ -57,7 +57,7 @@
                 </nav>
                 <footer class="card-title">Card Footer</footer>
             </section>
-            <section class="card" data-closed="false">
+            <section class="card disabled" data-closed="false">
                 <header>Card Header</header>
                 <div class="card-content space">
                     <div>Card Content</div>