From 7d3e98e5cce48fa490cb328a1134b00558a757b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= <lukasz@holeczek.pl>
Date: Sat, 8 Oct 2016 19:31:48 +0200
Subject: [PATCH] Add new card variants
---
.../scss/bootstrap_custom/_card.scss | 33 +++
.../scss/core/_mixins.scss | 5 +
.../src/app/components/cards.component.html | 209 ++++++++++++---
.../src/assets/css/style.css | 33 +++
Angular_Full_Project_GULP/css/style.css | 33 +++
.../scss/bootstrap_custom/_card.scss | 33 +++
.../scss/core/_mixins.scss | 5 +
.../views/components/cards.html | 252 +++++++++++-------
Angular_Starter_GULP/css/style.css | 33 +++
.../scss/bootstrap_custom/_card.scss | 33 +++
Angular_Starter_GULP/scss/core/_mixins.scss | 5 +
.../components-cards.html | 228 ++++++++++++----
Static_Full_Project_GULP/css/style.css | 33 +++
.../scss/bootstrap_custom/_card.scss | 33 +++
.../scss/core/_mixins.scss | 5 +
Static_Starter_GULP/css/style.css | 33 +++
.../scss/bootstrap_custom/_card.scss | 33 +++
Static_Starter_GULP/scss/core/_mixins.scss | 5 +
jQuery_Full_Project_GULP/css/style.css | 33 +++
.../scss/bootstrap_custom/_card.scss | 33 +++
.../scss/core/_mixins.scss | 5 +
.../views/components/cards.html | 228 ++++++++++++----
jQuery_Starter_GULP/css/style.css | 33 +++
.../scss/bootstrap_custom/_card.scss | 33 +++
jQuery_Starter_GULP/scss/core/_mixins.scss | 5 +
25 files changed, 1171 insertions(+), 243 deletions(-)
diff --git a/Angular2_CLI_Full_Project/scss/bootstrap_custom/_card.scss b/Angular2_CLI_Full_Project/scss/bootstrap_custom/_card.scss
index 0e24830..a2019dd 100644
--- a/Angular2_CLI_Full_Project/scss/bootstrap_custom/_card.scss
+++ b/Angular2_CLI_Full_Project/scss/bootstrap_custom/_card.scss
@@ -132,6 +132,39 @@
}
}
+[class*="card-outline-"] {
+ .card-block {
+ background: #fff !important;
+ }
+
+ &.card-outline-top {
+ border-top-width: 2px;
+ border-left-color: $border-color;
+ border-right-color: $border-color;
+ border-bottom-color: $border-color;
+ }
+}
+
+// Cards with color accent
+.card-accent-primary {
+ @include card-accent-variant($btn-primary-bg);
+}
+.card-accent-secondary {
+ @include card-accent-variant($btn-secondary-border);
+}
+.card-accent-info {
+ @include card-accent-variant($btn-info-bg);
+}
+.card-accent-success {
+ @include card-accent-variant($btn-success-bg);
+}
+.card-accent-warning {
+ @include card-accent-variant($btn-warning-bg);
+}
+.card-accent-danger {
+ @include card-accent-variant($btn-danger-bg);
+}
+
// Card Actions
.card-header {
> i {
diff --git a/Angular2_CLI_Full_Project/scss/core/_mixins.scss b/Angular2_CLI_Full_Project/scss/core/_mixins.scss
index b05116d..6da0ab3 100644
--- a/Angular2_CLI_Full_Project/scss/core/_mixins.scss
+++ b/Angular2_CLI_Full_Project/scss/core/_mixins.scss
@@ -90,3 +90,8 @@
}
}
}
+
+@mixin card-accent-variant($color) {
+ border-top-width: 2px;
+ border-top-color: $color;
+}
diff --git a/Angular2_CLI_Full_Project/src/app/components/cards.component.html b/Angular2_CLI_Full_Project/src/app/components/cards.component.html
index ddc0310..9624cfa 100644
--- a/Angular2_CLI_Full_Project/src/app/components/cards.component.html
+++ b/Angular2_CLI_Full_Project/src/app/components/cards.component.html
@@ -11,7 +11,7 @@
</div>
</div>
</div>
- <!--/col-->
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-block">
@@ -21,25 +21,7 @@
<div class="card-footer">Card footer</div>
</div>
</div>
- <!--/col-->
- <div class="col-sm-6 col-md-4">
- <div class="card card-default">
- <div class="card-header">
- Card Minimized
- <small>Add this class
- <code>.panel-minimized</code>
- </small>
- <div class="card-actions">
- <a href="#" class="btn-minimize"><i class="icon-arrow-up"></i></a>
- </div>
- </div>
- <div class="card-block">
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
- ea commodo consequat.
- </div>
- </div>
- </div>
- <!--/col-->
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-header">
@@ -51,7 +33,7 @@
</div>
</div>
</div>
- <!--/col-->
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-header">
@@ -68,7 +50,7 @@
</div>
</div>
</div>
- <!--/col-->
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-header">
@@ -81,7 +63,7 @@
</div>
</div>
</div>
- <!--/col-->
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-header">
@@ -94,9 +76,160 @@
</div>
</div>
</div>
- <!--/col-->
+ <!--/.col-->
+ </div>
+ <!--/.row-->
+ <div class="row">
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-outline-primary">
+ <div class="card-header">
+ Card outline
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-outline-secondary">
+ <div class="card-header">
+ Card outline
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-outline-success">
+ <div class="card-header">
+ Card outline
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-outline-info">
+ <div class="card-header">
+ Card outline
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-outline-warning">
+ <div class="card-header">
+ Card outline
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-outline-danger">
+ <div class="card-header">
+ Card outline
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ </div>
+ <!--/.row-->
+
+ <div class="row">
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-accent-primary">
+ <div class="card-header">
+ Card with accent
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-accent-secondary">
+ <div class="card-header">
+ Card with accent
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-accent-success">
+ <div class="card-header">
+ Card with accent
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-accent-info">
+ <div class="card-header">
+ Card with accent
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-accent-warning">
+ <div class="card-header">
+ Card with accent
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-accent-danger">
+ <div class="card-header">
+ Card with accent
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
</div>
- <!--/row-->
+ <!--/.row-->
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-primary text-xs-center">
@@ -110,7 +243,7 @@
</div>
</div>
</div>
- <!--/col-->
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-success text-xs-center">
<div class="card-block">
@@ -123,7 +256,7 @@
</div>
</div>
</div>
- <!--/col-->
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-info text-xs-center">
<div class="card-block">
@@ -136,7 +269,7 @@
</div>
</div>
</div>
- <!--/col-->
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-warning text-xs-center">
<div class="card-block">
@@ -149,7 +282,7 @@
</div>
</div>
</div>
- <!--/col-->
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-danger text-xs-center">
<div class="card-block">
@@ -162,7 +295,7 @@
</div>
</div>
</div>
- <!--/col-->
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-primary text-xs-center">
<div class="card-block">
@@ -175,9 +308,9 @@
</div>
</div>
</div>
- <!--/col-->
+ <!--/.col-->
</div>
- <!--/row-->
+ <!--/.row-->
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-primary">
@@ -190,7 +323,7 @@
</div>
</div>
</div>
- <!--/col-->
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-success">
<div class="card-header">
@@ -202,7 +335,7 @@
</div>
</div>
</div>
- <!--/col-->
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-info">
<div class="card-header">
@@ -214,7 +347,7 @@
</div>
</div>
</div>
- <!--/col-->
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-warning">
<div class="card-header">
@@ -226,7 +359,7 @@
</div>
</div>
</div>
- <!--/col-->
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-danger">
<div class="card-header">
@@ -238,7 +371,7 @@
</div>
</div>
</div>
- <!--/col-->
+ <!--/.col-->
</div>
- <!--/row-->
+ <!--/.row-->
</div>
diff --git a/Angular2_CLI_Full_Project/src/assets/css/style.css b/Angular2_CLI_Full_Project/src/assets/css/style.css
index 7176ea7..de14660 100644
--- a/Angular2_CLI_Full_Project/src/assets/css/style.css
+++ b/Angular2_CLI_Full_Project/src/assets/css/style.css
@@ -3185,6 +3185,39 @@ header.navbar .navbar-nav .nav-link {
.card-inverse .progress .progress-bar {
background-color: #fff !important; } }
+[class*="card-outline-"] .card-block {
+ background: #fff !important; }
+
+[class*="card-outline-"].card-outline-top {
+ border-top-width: 2px;
+ border-left-color: #cfd8dc;
+ border-right-color: #cfd8dc;
+ border-bottom-color: #cfd8dc; }
+
+.card-accent-primary {
+ border-top-width: 2px;
+ border-top-color: #20a8d8; }
+
+.card-accent-secondary {
+ border-top-width: 2px;
+ border-top-color: #b0bec5; }
+
+.card-accent-info {
+ border-top-width: 2px;
+ border-top-color: #63c2de; }
+
+.card-accent-success {
+ border-top-width: 2px;
+ border-top-color: #4dbd74; }
+
+.card-accent-warning {
+ border-top-width: 2px;
+ border-top-color: #f8cb00; }
+
+.card-accent-danger {
+ border-top-width: 2px;
+ border-top-color: #f86c6b; }
+
.card-header > i {
margin-right: 0.5rem; }
diff --git a/Angular_Full_Project_GULP/css/style.css b/Angular_Full_Project_GULP/css/style.css
index 7176ea7..de14660 100644
--- a/Angular_Full_Project_GULP/css/style.css
+++ b/Angular_Full_Project_GULP/css/style.css
@@ -3185,6 +3185,39 @@ header.navbar .navbar-nav .nav-link {
.card-inverse .progress .progress-bar {
background-color: #fff !important; } }
+[class*="card-outline-"] .card-block {
+ background: #fff !important; }
+
+[class*="card-outline-"].card-outline-top {
+ border-top-width: 2px;
+ border-left-color: #cfd8dc;
+ border-right-color: #cfd8dc;
+ border-bottom-color: #cfd8dc; }
+
+.card-accent-primary {
+ border-top-width: 2px;
+ border-top-color: #20a8d8; }
+
+.card-accent-secondary {
+ border-top-width: 2px;
+ border-top-color: #b0bec5; }
+
+.card-accent-info {
+ border-top-width: 2px;
+ border-top-color: #63c2de; }
+
+.card-accent-success {
+ border-top-width: 2px;
+ border-top-color: #4dbd74; }
+
+.card-accent-warning {
+ border-top-width: 2px;
+ border-top-color: #f8cb00; }
+
+.card-accent-danger {
+ border-top-width: 2px;
+ border-top-color: #f86c6b; }
+
.card-header > i {
margin-right: 0.5rem; }
diff --git a/Angular_Full_Project_GULP/scss/bootstrap_custom/_card.scss b/Angular_Full_Project_GULP/scss/bootstrap_custom/_card.scss
index 0e24830..a2019dd 100644
--- a/Angular_Full_Project_GULP/scss/bootstrap_custom/_card.scss
+++ b/Angular_Full_Project_GULP/scss/bootstrap_custom/_card.scss
@@ -132,6 +132,39 @@
}
}
+[class*="card-outline-"] {
+ .card-block {
+ background: #fff !important;
+ }
+
+ &.card-outline-top {
+ border-top-width: 2px;
+ border-left-color: $border-color;
+ border-right-color: $border-color;
+ border-bottom-color: $border-color;
+ }
+}
+
+// Cards with color accent
+.card-accent-primary {
+ @include card-accent-variant($btn-primary-bg);
+}
+.card-accent-secondary {
+ @include card-accent-variant($btn-secondary-border);
+}
+.card-accent-info {
+ @include card-accent-variant($btn-info-bg);
+}
+.card-accent-success {
+ @include card-accent-variant($btn-success-bg);
+}
+.card-accent-warning {
+ @include card-accent-variant($btn-warning-bg);
+}
+.card-accent-danger {
+ @include card-accent-variant($btn-danger-bg);
+}
+
// Card Actions
.card-header {
> i {
diff --git a/Angular_Full_Project_GULP/scss/core/_mixins.scss b/Angular_Full_Project_GULP/scss/core/_mixins.scss
index b05116d..6da0ab3 100644
--- a/Angular_Full_Project_GULP/scss/core/_mixins.scss
+++ b/Angular_Full_Project_GULP/scss/core/_mixins.scss
@@ -90,3 +90,8 @@
}
}
}
+
+@mixin card-accent-variant($color) {
+ border-top-width: 2px;
+ border-top-color: $color;
+}
diff --git a/Angular_Full_Project_GULP/views/components/cards.html b/Angular_Full_Project_GULP/views/components/cards.html
index 3d164c4..9624cfa 100644
--- a/Angular_Full_Project_GULP/views/components/cards.html
+++ b/Angular_Full_Project_GULP/views/components/cards.html
@@ -1,6 +1,5 @@
<div class="animated fadeIn">
<div class="row">
-
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-header">
@@ -12,8 +11,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-block">
@@ -23,27 +21,7 @@
<div class="card-footer">Card footer</div>
</div>
</div>
- <!--/col-->
-
- <div class="col-sm-6 col-md-4">
- <div class="card card-default">
- <div class="card-header">
- Card Minimized
- <small>Add this class
- <code>.panel-minimized</code>
- </small>
- <div class="card-actions">
- <a href="#" class="btn-minimize"><i class="icon-arrow-up"></i></a>
- </div>
- </div>
- <div class="card-block">
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
- ea commodo consequat.
- </div>
- </div>
- </div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-header">
@@ -55,8 +33,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-header">
@@ -73,8 +50,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-header">
@@ -87,8 +63,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-header">
@@ -101,49 +76,161 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
+ </div>
+ <!--/.row-->
+ <div class="row">
<div class="col-sm-6 col-md-4">
- <div class="card">
+ <div class="card card-outline-primary">
<div class="card-header">
- Card with tabs
- <ul class="nav nav-tabs pull-right" role="tablist">
- <li class="nav-item">
- <a tab class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
- </li>
- <li class="nav-item">
- <a tab class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
- </li>
- <li class="nav-item">
- <a tab class="nav-link" data-toggle="tab" href="#messages" role="tab">Messages</a>
- </li>
- </ul>
+ Card outline
</div>
<div class="card-block">
- <div class="tab-content">
- <div class="tab-pane active" id="home" role="tabpanel">
- 1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
- ex ea commodo consequat.
- </div>
- <div class="tab-pane" id="profile" role="tabpanel">
- 2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
- ex ea commodo consequat.
- </div>
- <div class="tab-pane" id="messages" role="tabpanel">
- 3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
- ex ea commodo consequat.
- </div>
- </div>
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-outline-secondary">
+ <div class="card-header">
+ Card outline
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-outline-success">
+ <div class="card-header">
+ Card outline
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-outline-info">
+ <div class="card-header">
+ Card outline
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-outline-warning">
+ <div class="card-header">
+ Card outline
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-outline-danger">
+ <div class="card-header">
+ Card outline
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
</div>
- <!--/row-->
+ <!--/.row-->
<div class="row">
-
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-accent-primary">
+ <div class="card-header">
+ Card with accent
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-accent-secondary">
+ <div class="card-header">
+ Card with accent
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-accent-success">
+ <div class="card-header">
+ Card with accent
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-accent-info">
+ <div class="card-header">
+ Card with accent
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-accent-warning">
+ <div class="card-header">
+ Card with accent
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-accent-danger">
+ <div class="card-header">
+ Card with accent
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ </div>
+ <!--/.row-->
+ <div class="row">
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-primary text-xs-center">
<div class="card-block">
@@ -156,8 +243,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-success text-xs-center">
<div class="card-block">
@@ -170,8 +256,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-info text-xs-center">
<div class="card-block">
@@ -184,8 +269,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-warning text-xs-center">
<div class="card-block">
@@ -198,8 +282,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-danger text-xs-center">
<div class="card-block">
@@ -212,8 +295,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-primary text-xs-center">
<div class="card-block">
@@ -226,13 +308,10 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
</div>
- <!--/row-->
-
+ <!--/.row-->
<div class="row">
-
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-primary">
<div class="card-header">
@@ -244,8 +323,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-success">
<div class="card-header">
@@ -257,8 +335,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-info">
<div class="card-header">
@@ -270,8 +347,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-warning">
<div class="card-header">
@@ -283,8 +359,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-danger">
<div class="card-header">
@@ -296,8 +371,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
</div>
- <!--/row-->
+ <!--/.row-->
</div>
diff --git a/Angular_Starter_GULP/css/style.css b/Angular_Starter_GULP/css/style.css
index 7176ea7..de14660 100644
--- a/Angular_Starter_GULP/css/style.css
+++ b/Angular_Starter_GULP/css/style.css
@@ -3185,6 +3185,39 @@ header.navbar .navbar-nav .nav-link {
.card-inverse .progress .progress-bar {
background-color: #fff !important; } }
+[class*="card-outline-"] .card-block {
+ background: #fff !important; }
+
+[class*="card-outline-"].card-outline-top {
+ border-top-width: 2px;
+ border-left-color: #cfd8dc;
+ border-right-color: #cfd8dc;
+ border-bottom-color: #cfd8dc; }
+
+.card-accent-primary {
+ border-top-width: 2px;
+ border-top-color: #20a8d8; }
+
+.card-accent-secondary {
+ border-top-width: 2px;
+ border-top-color: #b0bec5; }
+
+.card-accent-info {
+ border-top-width: 2px;
+ border-top-color: #63c2de; }
+
+.card-accent-success {
+ border-top-width: 2px;
+ border-top-color: #4dbd74; }
+
+.card-accent-warning {
+ border-top-width: 2px;
+ border-top-color: #f8cb00; }
+
+.card-accent-danger {
+ border-top-width: 2px;
+ border-top-color: #f86c6b; }
+
.card-header > i {
margin-right: 0.5rem; }
diff --git a/Angular_Starter_GULP/scss/bootstrap_custom/_card.scss b/Angular_Starter_GULP/scss/bootstrap_custom/_card.scss
index 0e24830..a2019dd 100644
--- a/Angular_Starter_GULP/scss/bootstrap_custom/_card.scss
+++ b/Angular_Starter_GULP/scss/bootstrap_custom/_card.scss
@@ -132,6 +132,39 @@
}
}
+[class*="card-outline-"] {
+ .card-block {
+ background: #fff !important;
+ }
+
+ &.card-outline-top {
+ border-top-width: 2px;
+ border-left-color: $border-color;
+ border-right-color: $border-color;
+ border-bottom-color: $border-color;
+ }
+}
+
+// Cards with color accent
+.card-accent-primary {
+ @include card-accent-variant($btn-primary-bg);
+}
+.card-accent-secondary {
+ @include card-accent-variant($btn-secondary-border);
+}
+.card-accent-info {
+ @include card-accent-variant($btn-info-bg);
+}
+.card-accent-success {
+ @include card-accent-variant($btn-success-bg);
+}
+.card-accent-warning {
+ @include card-accent-variant($btn-warning-bg);
+}
+.card-accent-danger {
+ @include card-accent-variant($btn-danger-bg);
+}
+
// Card Actions
.card-header {
> i {
diff --git a/Angular_Starter_GULP/scss/core/_mixins.scss b/Angular_Starter_GULP/scss/core/_mixins.scss
index b05116d..6da0ab3 100644
--- a/Angular_Starter_GULP/scss/core/_mixins.scss
+++ b/Angular_Starter_GULP/scss/core/_mixins.scss
@@ -90,3 +90,8 @@
}
}
}
+
+@mixin card-accent-variant($color) {
+ border-top-width: 2px;
+ border-top-color: $color;
+}
diff --git a/Static_Full_Project_GULP/components-cards.html b/Static_Full_Project_GULP/components-cards.html
index 9a68724..596a235 100644
--- a/Static_Full_Project_GULP/components-cards.html
+++ b/Static_Full_Project_GULP/components-cards.html
@@ -208,7 +208,6 @@
<div class="container-fluid">
<div class="animated fadeIn">
<div class="row">
-
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-header">
@@ -220,8 +219,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-block">
@@ -231,25 +229,7 @@
<div class="card-footer">Card footer</div>
</div>
</div>
- <!--/col-->
-
- <div class="col-sm-6 col-md-4">
- <div class="card card-default">
- <div class="card-header">
- Card collapse
- <div class="card-actions">
- <a class="btn-minimize collapsed" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"><i class="icon-arrow-down"></i></a>
- <a class="btn-close" href="#"><i class="icon-close"></i></a>
- </div>
- </div>
- <div class="card-block collapse" id="collapseExample">
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
- ea commodo consequat.
- </div>
- </div>
- </div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-header">
@@ -261,8 +241,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-header">
@@ -279,8 +258,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-header">
@@ -293,8 +271,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-header">
@@ -307,13 +284,161 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
</div>
- <!--/row-->
-
+ <!--/.row-->
<div class="row">
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-outline-primary">
+ <div class="card-header">
+ Card outline
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-outline-secondary">
+ <div class="card-header">
+ Card outline
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-outline-success">
+ <div class="card-header">
+ Card outline
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-outline-info">
+ <div class="card-header">
+ Card outline
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-outline-warning">
+ <div class="card-header">
+ Card outline
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-outline-danger">
+ <div class="card-header">
+ Card outline
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ </div>
+ <!--/.row-->
+ <div class="row">
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-accent-primary">
+ <div class="card-header">
+ Card with accent
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-accent-secondary">
+ <div class="card-header">
+ Card with accent
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-accent-success">
+ <div class="card-header">
+ Card with accent
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-accent-info">
+ <div class="card-header">
+ Card with accent
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-accent-warning">
+ <div class="card-header">
+ Card with accent
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-accent-danger">
+ <div class="card-header">
+ Card with accent
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ </div>
+ <!--/.row-->
+ <div class="row">
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-primary text-xs-center">
<div class="card-block">
@@ -326,8 +451,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-success text-xs-center">
<div class="card-block">
@@ -340,8 +464,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-info text-xs-center">
<div class="card-block">
@@ -354,8 +477,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-warning text-xs-center">
<div class="card-block">
@@ -368,8 +490,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-danger text-xs-center">
<div class="card-block">
@@ -382,8 +503,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-primary text-xs-center">
<div class="card-block">
@@ -396,13 +516,10 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
</div>
- <!--/row-->
-
+ <!--/.row-->
<div class="row">
-
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-primary">
<div class="card-header">
@@ -414,8 +531,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-success">
<div class="card-header">
@@ -427,8 +543,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-info">
<div class="card-header">
@@ -440,8 +555,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-warning">
<div class="card-header">
@@ -453,8 +567,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-danger">
<div class="card-header">
@@ -466,10 +579,9 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
</div>
- <!--/row-->
+ <!--/.row-->
</div>
</div>
diff --git a/Static_Full_Project_GULP/css/style.css b/Static_Full_Project_GULP/css/style.css
index 7176ea7..de14660 100644
--- a/Static_Full_Project_GULP/css/style.css
+++ b/Static_Full_Project_GULP/css/style.css
@@ -3185,6 +3185,39 @@ header.navbar .navbar-nav .nav-link {
.card-inverse .progress .progress-bar {
background-color: #fff !important; } }
+[class*="card-outline-"] .card-block {
+ background: #fff !important; }
+
+[class*="card-outline-"].card-outline-top {
+ border-top-width: 2px;
+ border-left-color: #cfd8dc;
+ border-right-color: #cfd8dc;
+ border-bottom-color: #cfd8dc; }
+
+.card-accent-primary {
+ border-top-width: 2px;
+ border-top-color: #20a8d8; }
+
+.card-accent-secondary {
+ border-top-width: 2px;
+ border-top-color: #b0bec5; }
+
+.card-accent-info {
+ border-top-width: 2px;
+ border-top-color: #63c2de; }
+
+.card-accent-success {
+ border-top-width: 2px;
+ border-top-color: #4dbd74; }
+
+.card-accent-warning {
+ border-top-width: 2px;
+ border-top-color: #f8cb00; }
+
+.card-accent-danger {
+ border-top-width: 2px;
+ border-top-color: #f86c6b; }
+
.card-header > i {
margin-right: 0.5rem; }
diff --git a/Static_Full_Project_GULP/scss/bootstrap_custom/_card.scss b/Static_Full_Project_GULP/scss/bootstrap_custom/_card.scss
index 0e24830..a2019dd 100644
--- a/Static_Full_Project_GULP/scss/bootstrap_custom/_card.scss
+++ b/Static_Full_Project_GULP/scss/bootstrap_custom/_card.scss
@@ -132,6 +132,39 @@
}
}
+[class*="card-outline-"] {
+ .card-block {
+ background: #fff !important;
+ }
+
+ &.card-outline-top {
+ border-top-width: 2px;
+ border-left-color: $border-color;
+ border-right-color: $border-color;
+ border-bottom-color: $border-color;
+ }
+}
+
+// Cards with color accent
+.card-accent-primary {
+ @include card-accent-variant($btn-primary-bg);
+}
+.card-accent-secondary {
+ @include card-accent-variant($btn-secondary-border);
+}
+.card-accent-info {
+ @include card-accent-variant($btn-info-bg);
+}
+.card-accent-success {
+ @include card-accent-variant($btn-success-bg);
+}
+.card-accent-warning {
+ @include card-accent-variant($btn-warning-bg);
+}
+.card-accent-danger {
+ @include card-accent-variant($btn-danger-bg);
+}
+
// Card Actions
.card-header {
> i {
diff --git a/Static_Full_Project_GULP/scss/core/_mixins.scss b/Static_Full_Project_GULP/scss/core/_mixins.scss
index b05116d..6da0ab3 100644
--- a/Static_Full_Project_GULP/scss/core/_mixins.scss
+++ b/Static_Full_Project_GULP/scss/core/_mixins.scss
@@ -90,3 +90,8 @@
}
}
}
+
+@mixin card-accent-variant($color) {
+ border-top-width: 2px;
+ border-top-color: $color;
+}
diff --git a/Static_Starter_GULP/css/style.css b/Static_Starter_GULP/css/style.css
index 7176ea7..de14660 100644
--- a/Static_Starter_GULP/css/style.css
+++ b/Static_Starter_GULP/css/style.css
@@ -3185,6 +3185,39 @@ header.navbar .navbar-nav .nav-link {
.card-inverse .progress .progress-bar {
background-color: #fff !important; } }
+[class*="card-outline-"] .card-block {
+ background: #fff !important; }
+
+[class*="card-outline-"].card-outline-top {
+ border-top-width: 2px;
+ border-left-color: #cfd8dc;
+ border-right-color: #cfd8dc;
+ border-bottom-color: #cfd8dc; }
+
+.card-accent-primary {
+ border-top-width: 2px;
+ border-top-color: #20a8d8; }
+
+.card-accent-secondary {
+ border-top-width: 2px;
+ border-top-color: #b0bec5; }
+
+.card-accent-info {
+ border-top-width: 2px;
+ border-top-color: #63c2de; }
+
+.card-accent-success {
+ border-top-width: 2px;
+ border-top-color: #4dbd74; }
+
+.card-accent-warning {
+ border-top-width: 2px;
+ border-top-color: #f8cb00; }
+
+.card-accent-danger {
+ border-top-width: 2px;
+ border-top-color: #f86c6b; }
+
.card-header > i {
margin-right: 0.5rem; }
diff --git a/Static_Starter_GULP/scss/bootstrap_custom/_card.scss b/Static_Starter_GULP/scss/bootstrap_custom/_card.scss
index 0e24830..a2019dd 100644
--- a/Static_Starter_GULP/scss/bootstrap_custom/_card.scss
+++ b/Static_Starter_GULP/scss/bootstrap_custom/_card.scss
@@ -132,6 +132,39 @@
}
}
+[class*="card-outline-"] {
+ .card-block {
+ background: #fff !important;
+ }
+
+ &.card-outline-top {
+ border-top-width: 2px;
+ border-left-color: $border-color;
+ border-right-color: $border-color;
+ border-bottom-color: $border-color;
+ }
+}
+
+// Cards with color accent
+.card-accent-primary {
+ @include card-accent-variant($btn-primary-bg);
+}
+.card-accent-secondary {
+ @include card-accent-variant($btn-secondary-border);
+}
+.card-accent-info {
+ @include card-accent-variant($btn-info-bg);
+}
+.card-accent-success {
+ @include card-accent-variant($btn-success-bg);
+}
+.card-accent-warning {
+ @include card-accent-variant($btn-warning-bg);
+}
+.card-accent-danger {
+ @include card-accent-variant($btn-danger-bg);
+}
+
// Card Actions
.card-header {
> i {
diff --git a/Static_Starter_GULP/scss/core/_mixins.scss b/Static_Starter_GULP/scss/core/_mixins.scss
index b05116d..6da0ab3 100644
--- a/Static_Starter_GULP/scss/core/_mixins.scss
+++ b/Static_Starter_GULP/scss/core/_mixins.scss
@@ -90,3 +90,8 @@
}
}
}
+
+@mixin card-accent-variant($color) {
+ border-top-width: 2px;
+ border-top-color: $color;
+}
diff --git a/jQuery_Full_Project_GULP/css/style.css b/jQuery_Full_Project_GULP/css/style.css
index 7176ea7..de14660 100644
--- a/jQuery_Full_Project_GULP/css/style.css
+++ b/jQuery_Full_Project_GULP/css/style.css
@@ -3185,6 +3185,39 @@ header.navbar .navbar-nav .nav-link {
.card-inverse .progress .progress-bar {
background-color: #fff !important; } }
+[class*="card-outline-"] .card-block {
+ background: #fff !important; }
+
+[class*="card-outline-"].card-outline-top {
+ border-top-width: 2px;
+ border-left-color: #cfd8dc;
+ border-right-color: #cfd8dc;
+ border-bottom-color: #cfd8dc; }
+
+.card-accent-primary {
+ border-top-width: 2px;
+ border-top-color: #20a8d8; }
+
+.card-accent-secondary {
+ border-top-width: 2px;
+ border-top-color: #b0bec5; }
+
+.card-accent-info {
+ border-top-width: 2px;
+ border-top-color: #63c2de; }
+
+.card-accent-success {
+ border-top-width: 2px;
+ border-top-color: #4dbd74; }
+
+.card-accent-warning {
+ border-top-width: 2px;
+ border-top-color: #f8cb00; }
+
+.card-accent-danger {
+ border-top-width: 2px;
+ border-top-color: #f86c6b; }
+
.card-header > i {
margin-right: 0.5rem; }
diff --git a/jQuery_Full_Project_GULP/scss/bootstrap_custom/_card.scss b/jQuery_Full_Project_GULP/scss/bootstrap_custom/_card.scss
index 0e24830..a2019dd 100644
--- a/jQuery_Full_Project_GULP/scss/bootstrap_custom/_card.scss
+++ b/jQuery_Full_Project_GULP/scss/bootstrap_custom/_card.scss
@@ -132,6 +132,39 @@
}
}
+[class*="card-outline-"] {
+ .card-block {
+ background: #fff !important;
+ }
+
+ &.card-outline-top {
+ border-top-width: 2px;
+ border-left-color: $border-color;
+ border-right-color: $border-color;
+ border-bottom-color: $border-color;
+ }
+}
+
+// Cards with color accent
+.card-accent-primary {
+ @include card-accent-variant($btn-primary-bg);
+}
+.card-accent-secondary {
+ @include card-accent-variant($btn-secondary-border);
+}
+.card-accent-info {
+ @include card-accent-variant($btn-info-bg);
+}
+.card-accent-success {
+ @include card-accent-variant($btn-success-bg);
+}
+.card-accent-warning {
+ @include card-accent-variant($btn-warning-bg);
+}
+.card-accent-danger {
+ @include card-accent-variant($btn-danger-bg);
+}
+
// Card Actions
.card-header {
> i {
diff --git a/jQuery_Full_Project_GULP/scss/core/_mixins.scss b/jQuery_Full_Project_GULP/scss/core/_mixins.scss
index b05116d..6da0ab3 100644
--- a/jQuery_Full_Project_GULP/scss/core/_mixins.scss
+++ b/jQuery_Full_Project_GULP/scss/core/_mixins.scss
@@ -90,3 +90,8 @@
}
}
}
+
+@mixin card-accent-variant($color) {
+ border-top-width: 2px;
+ border-top-color: $color;
+}
diff --git a/jQuery_Full_Project_GULP/views/components/cards.html b/jQuery_Full_Project_GULP/views/components/cards.html
index e0a4641..9624cfa 100644
--- a/jQuery_Full_Project_GULP/views/components/cards.html
+++ b/jQuery_Full_Project_GULP/views/components/cards.html
@@ -1,6 +1,5 @@
<div class="animated fadeIn">
<div class="row">
-
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-header">
@@ -12,8 +11,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-block">
@@ -23,25 +21,7 @@
<div class="card-footer">Card footer</div>
</div>
</div>
- <!--/col-->
-
- <div class="col-sm-6 col-md-4">
- <div class="card card-default">
- <div class="card-header">
- Card collapse</small>
- <div class="card-actions">
- <a class="btn-minimize collapsed" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"><i class="icon-arrow-down"></i></a>
- <a class="btn-close" href="#"><i class="icon-close"></i></a>
- </div>
- </div>
- <div class="card-block collapse" id="collapseExample">
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
- ea commodo consequat.
- </div>
- </div>
- </div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-header">
@@ -53,8 +33,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-header">
@@ -71,8 +50,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-header">
@@ -85,8 +63,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card">
<div class="card-header">
@@ -99,13 +76,161 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
</div>
- <!--/row-->
-
+ <!--/.row-->
<div class="row">
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-outline-primary">
+ <div class="card-header">
+ Card outline
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-outline-secondary">
+ <div class="card-header">
+ Card outline
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-outline-success">
+ <div class="card-header">
+ Card outline
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-outline-info">
+ <div class="card-header">
+ Card outline
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-outline-warning">
+ <div class="card-header">
+ Card outline
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-outline-danger">
+ <div class="card-header">
+ Card outline
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ </div>
+ <!--/.row-->
+ <div class="row">
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-accent-primary">
+ <div class="card-header">
+ Card with accent
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-accent-secondary">
+ <div class="card-header">
+ Card with accent
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-accent-success">
+ <div class="card-header">
+ Card with accent
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-accent-info">
+ <div class="card-header">
+ Card with accent
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-accent-warning">
+ <div class="card-header">
+ Card with accent
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ <div class="col-sm-6 col-md-4">
+ <div class="card card-accent-danger">
+ <div class="card-header">
+ Card with accent
+ </div>
+ <div class="card-block">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
+ ea commodo consequat.
+ </div>
+ </div>
+ </div>
+ <!--/.col-->
+ </div>
+ <!--/.row-->
+ <div class="row">
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-primary text-xs-center">
<div class="card-block">
@@ -118,8 +243,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-success text-xs-center">
<div class="card-block">
@@ -132,8 +256,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-info text-xs-center">
<div class="card-block">
@@ -146,8 +269,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-warning text-xs-center">
<div class="card-block">
@@ -160,8 +282,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-danger text-xs-center">
<div class="card-block">
@@ -174,8 +295,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-primary text-xs-center">
<div class="card-block">
@@ -188,13 +308,10 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
</div>
- <!--/row-->
-
+ <!--/.row-->
<div class="row">
-
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-primary">
<div class="card-header">
@@ -206,8 +323,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-success">
<div class="card-header">
@@ -219,8 +335,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-info">
<div class="card-header">
@@ -232,8 +347,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-warning">
<div class="card-header">
@@ -245,8 +359,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
<div class="col-sm-6 col-md-4">
<div class="card card-inverse card-danger">
<div class="card-header">
@@ -258,8 +371,7 @@
</div>
</div>
</div>
- <!--/col-->
-
+ <!--/.col-->
</div>
- <!--/row-->
+ <!--/.row-->
</div>
diff --git a/jQuery_Starter_GULP/css/style.css b/jQuery_Starter_GULP/css/style.css
index 7176ea7..de14660 100644
--- a/jQuery_Starter_GULP/css/style.css
+++ b/jQuery_Starter_GULP/css/style.css
@@ -3185,6 +3185,39 @@ header.navbar .navbar-nav .nav-link {
.card-inverse .progress .progress-bar {
background-color: #fff !important; } }
+[class*="card-outline-"] .card-block {
+ background: #fff !important; }
+
+[class*="card-outline-"].card-outline-top {
+ border-top-width: 2px;
+ border-left-color: #cfd8dc;
+ border-right-color: #cfd8dc;
+ border-bottom-color: #cfd8dc; }
+
+.card-accent-primary {
+ border-top-width: 2px;
+ border-top-color: #20a8d8; }
+
+.card-accent-secondary {
+ border-top-width: 2px;
+ border-top-color: #b0bec5; }
+
+.card-accent-info {
+ border-top-width: 2px;
+ border-top-color: #63c2de; }
+
+.card-accent-success {
+ border-top-width: 2px;
+ border-top-color: #4dbd74; }
+
+.card-accent-warning {
+ border-top-width: 2px;
+ border-top-color: #f8cb00; }
+
+.card-accent-danger {
+ border-top-width: 2px;
+ border-top-color: #f86c6b; }
+
.card-header > i {
margin-right: 0.5rem; }
diff --git a/jQuery_Starter_GULP/scss/bootstrap_custom/_card.scss b/jQuery_Starter_GULP/scss/bootstrap_custom/_card.scss
index 0e24830..a2019dd 100644
--- a/jQuery_Starter_GULP/scss/bootstrap_custom/_card.scss
+++ b/jQuery_Starter_GULP/scss/bootstrap_custom/_card.scss
@@ -132,6 +132,39 @@
}
}
+[class*="card-outline-"] {
+ .card-block {
+ background: #fff !important;
+ }
+
+ &.card-outline-top {
+ border-top-width: 2px;
+ border-left-color: $border-color;
+ border-right-color: $border-color;
+ border-bottom-color: $border-color;
+ }
+}
+
+// Cards with color accent
+.card-accent-primary {
+ @include card-accent-variant($btn-primary-bg);
+}
+.card-accent-secondary {
+ @include card-accent-variant($btn-secondary-border);
+}
+.card-accent-info {
+ @include card-accent-variant($btn-info-bg);
+}
+.card-accent-success {
+ @include card-accent-variant($btn-success-bg);
+}
+.card-accent-warning {
+ @include card-accent-variant($btn-warning-bg);
+}
+.card-accent-danger {
+ @include card-accent-variant($btn-danger-bg);
+}
+
// Card Actions
.card-header {
> i {
diff --git a/jQuery_Starter_GULP/scss/core/_mixins.scss b/jQuery_Starter_GULP/scss/core/_mixins.scss
index b05116d..6da0ab3 100644
--- a/jQuery_Starter_GULP/scss/core/_mixins.scss
+++ b/jQuery_Starter_GULP/scss/core/_mixins.scss
@@ -90,3 +90,8 @@
}
}
}
+
+@mixin card-accent-variant($color) {
+ border-top-width: 2px;
+ border-top-color: $color;
+}
--
GitLab