tabler v1 fixes

_config.yml

@@ -165,9 +165,6 @@ colors:
   cyan:
     hex: '#17a2b8'
     title: Cyan
-  gray:
-    hex: '#868e96'
-    title: Gray
 
 colors-extra:
   white:
@@ -176,6 +173,9 @@ colors-extra:
   dark:
     hex: '#303645'
     title: Dark
+  gray:
+    hex: '#868e96'
+    title: Gray
 
 variants:
   - name: success

src/pages/_includes/layout/header-actions/breadcrumb.html

@@ -0,0 +1,3 @@
+<div class="d-flex">
+	{% include ui/breadcrumb.html class="breadcrumb-alternate" %}
+</div>

src/pages/_includes/layout/header-actions/buttons.html

@@ -0,0 +1,9 @@
+<div class="btn-list">
+	<span class="d-none d-sm-inline">
+		{% include ui/button.html text="New view" color="white" %}
+	</span>
+	{% include ui/button.html icon="plus" text="Create new report" color="primary" class="d-none d-sm-inline-block" modal-id="report" %}
+	{% include ui/button.html icon="plus" icon-only=true color="primary" class="d-sm-none" text="Create new report" modal-id="report" %}
+</div>
+
+{% include ui/modal.html modal-id="report" size="lg" top=true %}

src/pages/_includes/layout/header-actions/calendar.html

@@ -0,0 +1,3 @@
+<div class="d-flex">
+	{% include ui/button.html text="Add event" color="primary" icon="plus" %}
+</div>

src/pages/_includes/layout/header-actions/photos.html

@@ -0,0 +1,6 @@
+<div class="d-flex">
+	<div class="mr-3">
+		{% include ui/form/input-icon.html %}
+	</div>
+	{% include ui/button.html text="Add event" color="primary" icon="plus" %}
+</div>

src/pages/_includes/layout/header-actions/users.html

@@ -0,0 +1,4 @@
+<div class="d-flex">
+	<input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user…"/>
+	{% include ui/button.html text="New user" color="primary" icon="plus" %}
+</div>

src/pages/_includes/layout/page-header-actions.html

@@ -1,33 +0,0 @@
-{% assign actions = include.actions %}
-
-<!-- Page title actions -->
-<div class="col-auto ml-auto d-print-none">
-	{% if actions == 'users' %}
-		<div class="d-flex">
-			<input type="search" class="form-control d-inline-block w-9 mr-3" placeholder="Search user…"/>
-			{% include ui/button.html text="New user" color="primary" icon="plus" %}
-		</div>
-	{% elsif actions == 'calendar' %}
-		<div class="d-flex">
-			{% include ui/button.html text="Add event" color="primary" icon="plus" %}
-		</div>
-	{% elsif actions == 'photos' %}
-		<div class="d-flex">
-			<div class="mr-3">
-				{% include ui/form/input-icon.html %}
-			</div>
-			{% include ui/button.html text="Add event" color="primary" icon="plus" %}
-		</div>
-	{% elsif actions == 'breadcrumb' %}
-		<div class="d-flex">
-			{% include ui/breadcrumb.html class="breadcrumb-alternate" %}
-		</div>
-	{% elsif actions == 'buttons' %}
-		<span class="d-none d-sm-inline">
-			{% include ui/button.html text="New view" color="white" %}
-		</span>
-		{% include ui/button.html icon="plus" text="Create new report" color="primary" class="ml-3 d-none d-sm-inline-block" modal-id="report" %}
-		{% include ui/button.html icon="plus" icon-only=true color="primary" class="ml-3 d-sm-none" text="Create new report" modal-id="report" %}
-		{% include ui/modal.html modal-id="report" size="lg" top=true %}
-	{% endif %}
-</div>

src/pages/_includes/layout/page-header.html

@@ -2,7 +2,7 @@
 <div class="page-header{% if include.class %} {{ include.class }}{% endif %}">
 
 	<div class="row align-items-center">
-		<div class="col-auto">
+		<div class="col">
 			{% if include.pretitle %}
 			<!-- Page pre-title -->
 			<div class="page-pretitle">
@@ -19,7 +19,10 @@
 		</div>
 
 		{% if include.actions %}
-			{% include layout/page-header-actions.html actions=include.actions %}
+			<!-- Page title actions -->
+			<div class="col-auto ml-auto d-print-none">
+				{% include layout/header-actions/{{ include.actions }}.html %}
+			</div>
 		{% endif %}
 	</div>
 </div>

src/scss/_variables.scss

@@ -72,7 +72,7 @@ $text-muted-opacity: .68 !default;
 $text-muted-light-opacity: .4 !default;
 
 $border-opacity: .18 !default;
-$border-dark-opacity: .32 !default;
+$border-dark-opacity: .28 !default;
 
 $light: #f5f7fb !default;
 $dark: #252f3f !default;
@@ -286,7 +286,7 @@ $input-focus-color: inherit !default;
 
 //buttons
 $btn-padding-x: 1rem !default;
-$btn-font-weight: $font-weight-bold !default;
+$btn-font-weight: $font-weight-medium !default;
 $btn-border-radius: 3px !default;
 
 //cards

src/scss/ui/_buttons.scss

@@ -9,7 +9,7 @@
       box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05), inset 0 2px 0 -1px rgba(255, 255, 255, .1);
     }
 
-    svg.icon {
+    svg {
       filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .05));
     }
   }
@@ -19,32 +19,27 @@
     cursor: not-allowed;
   }
 
-  .icon {
+  svg {
-    margin: 0 .25em 0 -.25em;
+    width: 1.25rem;
-    font-size: (20em/14);
+    height: 1.25rem;
+    margin: 0 .5em 0 -.5em;
+    vertical-align: bottom;
   }
 
   .avatar {
     width: 1.25rem;
     height: 1.25rem;
     vertical-align: text-top;
-    margin: 0 .5em 0 -.25em;
+    margin: 0 .5em 0 -.5em;
   }
 
   .icon-right {
-    margin: 0 -.25em 0 .5em;
+    margin: 0 -.5em 0 .5em;
-  }
-
-  svg.icon {
-    width: 1em;
-    height: 1em;
-    stroke-width: 1.75;
   }
 }
 
 .btn-white {
-  @include button-variant($white, $border-color, $dark);
+  @include button-variant($white, $border-color-dark, $text-muted);
-  background-image: linear-gradient(-180deg, rgba($dark, 0), rgba($dark, .04) 100%);
   box-shadow: none !important;
 
   &.active {
@@ -97,8 +92,7 @@
   margin-bottom: -.5rem !important;
   margin-right: -.5rem;
 
-  > .btn,
+  > * {
-  > .dropdown {
     margin: 0 .5rem .5rem 0;
   }