Merge remote-tracking branch 'origin/dev-v1-navbars' into dev-v1-navbars

pages/_docs/cards.md

@@ -62,11 +62,14 @@ You can also add the image on the left side of the card. All you need do to is:
 
 {% example html columns=2 %}
 <div class="row row-cards row-deck">
-    <div class="col-md-6">
-        {% include cards/card.html title="Card status" hide-options=true status="purple" %}
+    <div class="col-md-4">
+        {% include cards/card.html title="Card status on top" hide-options=true status-position="top" status-color="red" body="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque" %}
     </div>
-    <div class="col-md-6">
-        {% include cards/card.html title="Card status on left side" hide-options=true status-left="blue" %}
+    <div class="col-md-4">
+        {% include cards/card.html title="Card status on left side" hide-options=true status-position="left" status-color="blue" body="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque"  %}
+    </div>
+    <div class="col-md-4">
+        {% include cards/card.html title="Card status on bottom" hide-options=true status-position="bottom" status-color="green" body="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque"  %}
     </div>
 </div>
 {% endexample %}

pages/_includes/cards/card.html

@@ -1,6 +1,6 @@
 <div class="card{% if include.collapsed %} card-collapsed{% endif %}">
-	{% if include.status or include.status-left %}
-	<div class="card-status{% if include.status-left %} card-status-left{% endif %} bg-{{ include.status | default: include.status-left }}"></div>
+	{% if include.status-position %}
+	<div class="card-status-{{include.status-position}} bg-{{ include.status-color | default: 'blue' }}"></div>
 	{% endif %}
 
    {% unless include.hide-header %}

pages/buttons.html

@@ -1,5 +1,6 @@
 ---
 title: Buttons
+done: true
 ---
 
 <p>

scss/layout/_grid.scss

@@ -30,3 +30,15 @@
     }
   }
 }
+
+.row-deck {
+  > .col,
+  > [class*='col-'] {
+    display: flex;
+    align-items: stretch;
+
+    .card {
+      flex: 1 1 auto;
+    }
+  }
+}

scss/tabler.scss

@@ -42,6 +42,7 @@
 @import "ui/pagination";
 @import "ui/toasts";
 @import "ui/steps";
+@import "ui/switch";
 
 @import "ui/highlight";
 @import "ui/examples";

scss/ui/_cards.scss

@@ -121,6 +121,7 @@ Card optinos
   top: 1.5rem;
   right: .75rem;
   margin-left: auto;
+  display: flex;
 }
 
 .card-options-link {
@@ -133,12 +134,30 @@ Card optinos
 /**
 Card status
  */
-.card-status {
-  height: 2px;
+.card-status-top {
+  position: absolute;
+  height: 3px;
   border-radius: $card-border-radius $card-border-radius 0 0;
+  top: 0;
+  right: 0;
+  left: 0;
+}
+
+.card-status-left {
+  position: absolute;
+  right: auto;
+  bottom: 0;
+  height: 100%;
+  width: 3px;
+  border-radius: $card-border-radius 0 0 $card-border-radius;
 }
 
 .card-status-bottom {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  top: initial;
+  height: 3px;
   border-radius: 0 0 $card-border-radius $card-border-radius;
 }
 

scss/ui/_icons.scss

@@ -1,6 +1,10 @@
 .icon {
   font-size: 1em;
   vertical-align: -.1em;
+
+  &:hover {
+    text-decoration: none;
+  }
 }
 
 .icon-md {

scss/ui/_loaders.scss

@@ -33,3 +33,31 @@
     animation-iteration-count: infinite;
   }
 }
+
+/**
+Dimmer
+*/
+.dimmer {
+  position: relative;
+
+  .loader {
+    display: none;
+    margin: 0 auto;
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    transform: translateY(-50%);
+  }
+
+  &.active {
+    .loader {
+      display: block;
+    }
+
+    .dimmer-content {
+      opacity: .1;
+      pointer-events: none;
+    }
+  }
+}

scss/ui/_switch.scss

@@ -0,0 +1,74 @@
+$custom-switch-width: 2.25rem;
+$custom-switch-height: 1.25rem;
+$custom-switch-padding: 1px;
+
+.custom-switch {
+  user-select: none;
+  cursor: default;
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+}
+
+.custom-switch-input {
+  position: absolute;
+  z-index: -1;
+  opacity: 0;
+}
+
+.custom-switches-stacked {
+  display: flex;
+  flex-direction: column;
+
+  .custom-switch {
+    margin-bottom: .5rem;
+  }
+}
+
+.custom-switch-indicator {
+  display: inline-block;
+  height: $custom-switch-height;
+  width: $custom-switch-width;
+  background: $gray-200;
+  border-radius: 50px;
+  position: relative;
+  vertical-align: bottom;
+  border: 1px solid $border-color;
+  transition: .3s border-color, .3s background-color;
+
+  &:before {
+    content: '';
+    position: absolute;
+    height: calc(#{$custom-switch-height} - #{$custom-switch-padding * 2 + 2px});
+    width: calc(#{$custom-switch-height} - #{$custom-switch-padding * 2 + 2px});
+    top: $custom-switch-padding;
+    left: $custom-switch-padding;
+    background: #fff;
+    border-radius: 50%;
+    transition: .3s left;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
+  }
+
+  .custom-switch-input:checked ~ & {
+    background: $primary;
+
+    &:before {
+      left: calc(#{$custom-switch-width - $custom-switch-height} + #{$custom-switch-padding})
+    }
+  }
+
+  .custom-switch-input:focus ~ & {
+    box-shadow: $input-btn-focus-box-shadow;
+    border-color: $primary;
+  }
+}
+
+.custom-switch-description {
+  margin-left: .5rem;
+  color: $text-muted;
+  transition: .3s color;
+
+  .custom-switch-input:checked ~ & {
+    color: $body-color;
+  }
+}