diff --git a/Angular2_CLI_Full_Project/scss/bootstrap_custom/_card.scss b/Angular2_CLI_Full_Project/scss/bootstrap_custom/_card.scss
index 0e24830cd5d656568fa5a64f789535d53668b5c3..a2019dd0db32d934303ba61741089e260eb85f05 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 b05116de229e75316b73200a6b41d764ea4f3c56..6da0ab3fc64b8e233f70bc684d128788aaf051ce 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 ddc0310a88e889cae0a6973d44ca47e55ab57204..9624cfacbc3cf325ed67f0b3c643fbd7bb07ccd6 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 7176ea7d56a96526b71fb8bf9310832f8dec2e85..de14660fec0cf8e63b41cb8c2bd929f4c19050a7 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 7176ea7d56a96526b71fb8bf9310832f8dec2e85..de14660fec0cf8e63b41cb8c2bd929f4c19050a7 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 0e24830cd5d656568fa5a64f789535d53668b5c3..a2019dd0db32d934303ba61741089e260eb85f05 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 b05116de229e75316b73200a6b41d764ea4f3c56..6da0ab3fc64b8e233f70bc684d128788aaf051ce 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 3d164c4321dc988e36e226232231ce995d5fbbcb..9624cfacbc3cf325ed67f0b3c643fbd7bb07ccd6 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 7176ea7d56a96526b71fb8bf9310832f8dec2e85..de14660fec0cf8e63b41cb8c2bd929f4c19050a7 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 0e24830cd5d656568fa5a64f789535d53668b5c3..a2019dd0db32d934303ba61741089e260eb85f05 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 b05116de229e75316b73200a6b41d764ea4f3c56..6da0ab3fc64b8e233f70bc684d128788aaf051ce 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 9a6872479b2fdfe4e6226b937b631551cb8d0c85..596a2352b6004ad5664dede606cd024591438730 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 7176ea7d56a96526b71fb8bf9310832f8dec2e85..de14660fec0cf8e63b41cb8c2bd929f4c19050a7 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 0e24830cd5d656568fa5a64f789535d53668b5c3..a2019dd0db32d934303ba61741089e260eb85f05 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 b05116de229e75316b73200a6b41d764ea4f3c56..6da0ab3fc64b8e233f70bc684d128788aaf051ce 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 7176ea7d56a96526b71fb8bf9310832f8dec2e85..de14660fec0cf8e63b41cb8c2bd929f4c19050a7 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 0e24830cd5d656568fa5a64f789535d53668b5c3..a2019dd0db32d934303ba61741089e260eb85f05 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 b05116de229e75316b73200a6b41d764ea4f3c56..6da0ab3fc64b8e233f70bc684d128788aaf051ce 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 7176ea7d56a96526b71fb8bf9310832f8dec2e85..de14660fec0cf8e63b41cb8c2bd929f4c19050a7 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 0e24830cd5d656568fa5a64f789535d53668b5c3..a2019dd0db32d934303ba61741089e260eb85f05 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 b05116de229e75316b73200a6b41d764ea4f3c56..6da0ab3fc64b8e233f70bc684d128788aaf051ce 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 e0a4641e9fc54f6bc706c316728a495b7c7f9710..9624cfacbc3cf325ed67f0b3c643fbd7bb07ccd6 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 7176ea7d56a96526b71fb8bf9310832f8dec2e85..de14660fec0cf8e63b41cb8c2bd929f4c19050a7 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 0e24830cd5d656568fa5a64f789535d53668b5c3..a2019dd0db32d934303ba61741089e260eb85f05 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 b05116de229e75316b73200a6b41d764ea4f3c56..6da0ab3fc64b8e233f70bc684d128788aaf051ce 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;
+}