- {% include_cached cards/card.html body="This is some text within a card body."%}
- {% include_cached cards/card.html active=true body="This is a card with active state."%}
+ {% include_cached cards/card.html body="This is some text within a card body." %}
{% include_cached cards/card.html img-bottom=true title="Card with bottom image" %}
+ {% include_cached cards/card.html active=true body="This is a card with active state." %}
+ {% include_cached cards/card.html inactive=true body="This is some text inactive state." %}
+
+ {% include_cached cards/card.html footer-elements="more,>switch" %}
-
- {% include_cached cards/card.html img-top=true title="Card with top image" %}
- {% include_cached cards/card.html link=true title="Card with button link" %}
-
-
- {% include_cached cards/card.html title="Card title" subtitle="Card subtitle" %}
- {% include_cached cards/card.html title="Card with footer" footer=true %}
- {% include_cached cards/card.html title="Card with footer button" footer-button=true %}
- {% include_cached cards/card.html title="Card with footer buttons" footer-buttons=true %}
+
+ {% include_cached cards/card-image.html title="Card with left side image" %}
+ {% include_cached cards/card-image.html title="Card with right side image" right=true %}
+ {% include_cached cards/card-group.html %}
+
+
+
+ {% include_cached cards/card.html img-top=true title="Card with top image" %}
+ {% include_cached cards/card.html link=true title="Card with button link" %}
+ {% include_cached cards/card.html status-top="danger" title="Card with top status" %}
+ {% include_cached cards/card.html status-bottom="success" title="Card with bottom status" %}
+
+
+ {% include_cached cards/card.html title="Card title" subtitle="Card subtitle" %}
+ {% include_cached cards/card.html header=true %}
+ {% include_cached cards/card.html title="Card with footer" footer=true %}
+ {% include_cached cards/card.html title="Card with footer button" footer-button=true %}
+ {% include_cached cards/card.html title="Card with footer buttons" footer-buttons=true %}
+
+
+
diff --git a/scss/_variables.scss b/scss/_variables.scss
index cdd423b680185ad2fbacc09d82c45d35340535b2..6e8531fc594bcf9d269f4f4325dbe394d1f86b42 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -217,6 +217,8 @@ $card-border-radius: $border-radius !default;
$card-cap-bg: $body-bg !default;
$card-active-border-color: $blue !default;
+$card-status-size: 2px !default;
+$card-group-margin: 1.5rem !default;
//close
$close-font-weight: 400 !default;
diff --git a/scss/tabler.scss b/scss/tabler.scss
index 75c5f3d9c0c167186cf4616b110f3aea135401e3..3462c160df55a4b608083d26968b96a80cb11c32 100644
--- a/scss/tabler.scss
+++ b/scss/tabler.scss
@@ -12,7 +12,6 @@
@import "fonts/webfonts";
@import "layout/core";
-@import "layout/grid";
@import "layout/navbar";
@import "layout/page";
@@ -25,6 +24,7 @@
@import "ui/cards";
@import "ui/dropdowns";
@import "ui/empty";
+@import "ui/grid";
@import "ui/highlight";
@import "ui/icons";
@import "ui/inputs";
diff --git a/scss/ui/_cards.scss b/scss/ui/_cards.scss
index 8066ff6e97be1939e3db8a9dcae2d41ccde31075..ae6dc9f08793acad7ee5d2cd47b84cd42a7ed884 100644
--- a/scss/ui/_cards.scss
+++ b/scss/ui/_cards.scss
@@ -1,8 +1,18 @@
.card {
- margin-bottom: 1.5rem;
+ margin-bottom: $card-group-margin;
box-shadow: rgba(0, 0, 0, 0.04) 0 2px 4px 0;
}
+.card-group {
+ margin-bottom: $card-group-margin;
+}
+
+.card-inactive {
+ box-shadow: none;
+ opacity: .8;
+ pointer-events: none;
+}
+
.card-link {
color: inherit;
@@ -136,7 +146,7 @@ Card status
*/
.card-status-top {
position: absolute;
- height: 3px;
+ height: $card-status-size;
border-radius: $card-border-radius $card-border-radius 0 0;
top: 0;
right: 0;
@@ -148,7 +158,7 @@ Card status
right: auto;
bottom: 0;
height: 100%;
- width: 3px;
+ width: 2px;
border-radius: $card-border-radius 0 0 $card-border-radius;
}
@@ -157,7 +167,7 @@ Card status
bottom: 0;
width: 100%;
top: initial;
- height: 3px;
+ height: 2px;
border-radius: 0 0 $card-border-radius $card-border-radius;
}
diff --git a/scss/layout/_grid.scss b/scss/ui/_grid.scss
similarity index 91%
rename from scss/layout/_grid.scss
rename to scss/ui/_grid.scss
index 3cf7d750e5f2dcf269a0ac35291d1261b820bea6..cee46edd8259a6acfc615d48cda2ffc16d9f275b 100644
--- a/scss/layout/_grid.scss
+++ b/scss/ui/_grid.scss
@@ -2,6 +2,10 @@
@include make-container-breakpoints();
}
+.col-separator {
+ border-left: 1px solid $border-color;
+}
+
.row-deck {
> .col,
> [class*='col-'] {
diff --git a/scss/ui/forms/_input.custom.scss b/scss/ui/forms/_input.custom.scss
index e51156539be5a8ae5e7a3a1443b890010e584d34..8e7d974ffd6f4605bb2ac1d299f67dde3baca85e 100644
--- a/scss/ui/forms/_input.custom.scss
+++ b/scss/ui/forms/_input.custom.scss
@@ -45,3 +45,8 @@ Bootstrap color input
border: none;
}
}
+
+.form-check-input {
+ background: $white;
+ transition: .3s background-position, .3s background-color;
+}