improve selection toolbar customization

Author: forafish

mostly-selection/mostly-selection-toolbar.html

@@ -7,6 +7,19 @@
 <link rel="import" href="../widgets/mostly-dialog.html">
 
 <!--
+### Styling
+
+The following custom properties and mixins are available for styling:
+
+Custom property                         | Description                        | Default
+----------------------------------------|------------------------------------|-----------------------
+`--mostly-selection-toolbar-background` | Background color                   | #000
+`--mostly-selection-toolbar-text`       | Text color                         | #fff
+`--mostly-selection-toolbar-link`       | Link color                         | #fff
+`--mostly-selection-toolbar-link-hover` | Link hover color                   | #000
+`--mostly-selection-toolbar`            | Mixin applied to the toolbar       | `{}`
+
+
 `mostly-selection-toolbar`
 @group Mostly UI
 @element mostly-selection-toolbar
@@ -29,11 +42,12 @@
         left: 0;
         right: 0;
         z-index: 201;
-        background: var(--mostly-toolbar);
         padding: 0 2em;
         font-weight: 300;
-        color: #fff;
         box-shadow: 0 0 3px rgba(0,0,0,0.4);
+        background: var(--mostly-selection-toolbar-background, #000);
+        color: var(--mostly-selection-toolbar-text, #fff);
+        @apply --mostly-selection-toolbar;
       }
 
       .actions {
@@ -43,29 +57,10 @@
         @apply --layout-end-justified;
       }
 
-      @media (min-width: 1280px) {
-        .toolbar {
-          padding-left: 4.5rem;
-        }
-      }
-
       .count {
         font-weight: 600;
       }
 
-      a.selectionLink {
-        display: inline-block;
-        vertical-align: bottom;
-        text-decoration: underline;
-        margin-left: 1em;
-        color: #fff;
-      }
-
-      a.selectionLink:hover {
-        cursor: pointer;
-        color: var(--mostly-link-hover-color);
-      }
-
       #selectedItemsPopup {
         margin-top: 196px;
       }
@@ -74,6 +69,20 @@
         @apply --layout-flex;
         @apply --layout-horizontal;
       }
+
+      /* links */
+      a, a:active, a:visited, a:focus {
+        display: inline-block;
+        vertical-align: bottom;
+        text-decoration: underline;
+        margin-left: 1em;
+        color: var(--mostly-selection-toolbar-link, #fff);
+        cursor: pointer;
+      }
+
+      a:hover {
+        color: var(--mostly-selection-toolbar-link-hover, #000);
+      }
     </style>
 
     <div class="horizontal center layout" id="content">
@@ -83,13 +92,13 @@
           <a class="selectionLink" on-tap="toogleSelectedItemsPopup">
             <span>[[i18n('selectionToolbar.display.selection')]]</span>
           </a>
-        </div>
-        <div class="actions">
-          <slot></slot>
           <a class="selectionLink" on-tap="clearSelection">
             <span>[[i18n('command.clear')]]</span>
           </a>
         </div>
+        <div class="actions">
+          <slot></slot>
+        </div>
       </div>
     </div>