New: Adapt buttons overhaul (fixes #469)

less/_defaults/_btn-mixins.less

@@ -0,0 +1,14 @@
+// Notify and Drawer controls (< > x)
+
+// DEPRECATED
+// for legacy support only, replaced by .ui-btn-ctrl()
+.notify-btn-icon() {
+  .ui-btn-ctrl();
+}
+//
+
+.ui-btn-ctrl() {
+  margin: @ui-btn-controls-margin;
+  padding: @ui-btn-controls-padding;
+  border-radius: @ui-btn-controls-border-radius;
+}

less/_defaults/_btn-style.less

@@ -0,0 +1,13 @@
+// Button styles
+// Note: default styles include 'filled' and 'outline'
+// --------------------------------------------------
+@item-color-style: filled;
+@item-ui-color-style: filled;
+@btn-color-style: filled;
+@menu-item-btn-color-style: filled;
+@ui-color-style: filled;
+@nav-ui-btn-ctrl-color-style: filled;
+@notify-ui-btn-ctrl-color-style: filled;
+@notify-btn-color-style: filled;
+@drawer-ui-btn-ctrl-color-style: filled;
+@drawer-item-color-style: filled;

less/_defaults/_buttonMixins/_btnStyles.less

@@ -0,0 +1,70 @@
+// --------------------------------------------------
+// BUTTON COLOUR MIXINS
+// --------------------------------------------------
+
+// Default - Filled
+.btn-color() {
+  background-color: @btn-color;
+  color: @btn-color-inverted;
+  border-radius: @btn-border-radius;
+}
+
+.btn-color-hover() {
+  background-color: @btn-color-hover;
+  color: @btn-color-inverted-hover;
+  .transition(background-color @duration ease-in, color @duration ease-in;);
+}
+
+.btn-color-focus() {
+  background-color: @btn-color-focus;
+  color: @btn-color-inverted-focus;
+}
+
+.btn-color-selected() {
+  background-color: @btn-color-selected;
+  color: @btn-color-inverted-selected;
+}
+
+.btn-color-locked() {
+  background-color: @btn-color-locked;
+  color: @btn-color-inverted-locked;
+}
+
+.btn-color-disabled() {
+  background-color: @btn-color-disabled;
+  color: @btn-color-inverted-disabled;
+}
+
+// Outline
+.btn-color-outline() {
+  background-color: @btn-color-inverted;
+  color: @btn-color;
+  box-shadow: 0 0 0 @btn-color-border-width @btn-color inset;
+  border-radius: @btn-border-radius;
+}
+
+.btn-color-outline-hover() {
+  .btn-color-hover;
+  box-shadow: 0 0 0 @btn-color-border-width @btn-color-hover inset;
+  .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;);
+}
+
+.btn-color-outline-focus() {
+  .btn-color-focus;
+  box-shadow: 0 0 0 @btn-color-border-width @btn-color-focus inset;
+}
+
+.btn-color-outline-selected() {
+  .btn-color-selected;
+  box-shadow: 0 0 0 @btn-color-border-width @btn-color-selected inset;
+}
+
+.btn-color-outline-locked() {
+  .btn-color-locked;
+  box-shadow: 0 0 0 @btn-color-border-width @btn-color-locked inset;
+}
+
+.btn-color-outline-disabled() {
+  .btn-color-disabled;
+  box-shadow: 0 0 0 @btn-color-border-width @btn-color-disabled inset;
+}

less/_defaults/_buttonMixins/_drawerItemStyles.less

@@ -0,0 +1,65 @@
+// --------------------------------------------------
+// DRAWER ITEM COLOUR MIXINS
+// --------------------------------------------------
+
+// Default - Filled
+.drawer-item-color() {
+  background-color: @drawer-item;
+  color: @drawer-item-inverted;
+  border-color: @drawer-item-hover;
+  border-radius: @drawer-item-border-radius;
+}
+
+.drawer-item-color-hover() {
+  background-color: @drawer-item-hover;
+  color: @drawer-item-inverted-hover;
+  border-color: @drawer-item-hover;
+  .transition(background-color @duration ease-in, color @duration ease-in, border @duration ease-in;);
+}
+
+.drawer-item-color-focus() {
+  background-color: @drawer-item-focus;
+  color: @drawer-item-inverted-focus;
+  border-color: @drawer-item-focus;
+}
+
+.drawer-item-color-locked() {
+  background-color: @disabled;
+  color: @disabled-inverted;
+  border-color: @drawer-item-hover;
+}
+
+.drawer-item-color-selected() {
+  background-color: @drawer-item-selected;
+  color: @drawer-item-inverted-selected;
+  border-color: @drawer-item-hover;
+}
+
+// Outline
+.drawer-item-color-outline() {
+  background-color: @drawer-item-inverted;
+  color: @drawer-item;
+  box-shadow: 0 0 0 @drawer-item-border-width @drawer-item inset;
+  border-radius: @drawer-item-border-radius;
+}
+
+.drawer-item-color-outline-hover() {
+  .drawer-item-color-hover;
+  box-shadow: 0 0 0 @drawer-item-border-width @drawer-item-hover inset;
+  .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;);
+}
+
+.drawer-item-color-outline-focus() {
+  .drawer-item-color-focus;
+  box-shadow: 0 0 0 @drawer-item-border-width @drawer-item-focus inset;
+}
+
+.drawer-item-color-outline-selected() {
+  .drawer-item-color-selected;
+  box-shadow: 0 0 0 @drawer-item-border-width @drawer-item-selected inset;
+}
+
+.drawer-item-color-outline-locked() {
+  .drawer-item-color-locked;
+  box-shadow: 0 0 0 @drawer-item-border-width @drawer-item-locked inset;
+}

less/_defaults/_buttonMixins/_drawerUiStyles.less

@@ -0,0 +1,38 @@
+// --------------------------------------------------
+// DRAWER UI COLOUR MIXINS
+// --------------------------------------------------
+
+// Default - Filled
+.drawer-ui-btn-ctrl-color() {
+  background-color: @drawer-icon;
+  color: @drawer-icon-inverted;
+}
+
+.drawer-ui-btn-ctrl-color-hover() {
+  background-color: @drawer-icon-hover;
+  color: @drawer-icon-inverted-hover;
+  .transition(background-color @duration ease-in, color @duration ease-in;);
+}
+
+.drawer-ui-btn-ctrl-color-focus() {
+  background-color: @drawer-icon-focus;
+  color: @drawer-icon-inverted-focus;
+}
+
+// Outline
+.drawer-ui-btn-ctrl-color-outline() {
+  background-color: @drawer-icon;
+  color: @drawer-icon-inverted;
+  box-shadow: 0 0 0 @ui-btn-controls-border-width @drawer-icon-inverted inset;
+}
+
+.drawer-ui-btn-ctrl-color-outline-hover() {
+  .drawer-ui-btn-ctrl-color-hover;
+  box-shadow: 0 0 0 @ui-btn-controls-border-width @drawer-icon-hover inset;
+  .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;);
+}
+
+.drawer-ui-btn-ctrl-color-outline-focus() {
+  .drawer-ui-btn-ctrl-color-focus;
+  box-shadow: 0 0 0 @ui-btn-controls-border-width @drawer-icon-focus inset;
+}

less/_defaults/_buttonMixins/_itemStyles.less

@@ -0,0 +1,70 @@
+// --------------------------------------------------
+// ITEM COLOUR MIXINS
+// --------------------------------------------------
+
+// Default - Filled
+.item-color() {
+  background-color: @item-color;
+  color: @item-color-inverted;
+  border-radius: @item-border-radius;
+}
+
+.item-color-hover() {
+  background-color: @item-color-hover;
+  color: @item-color-inverted-hover;
+  .transition(background-color @duration ease-in, color @duration ease-in;);
+}
+
+.item-color-focus() {
+  background-color: @item-color-focus;
+  color: @item-color-inverted-focus;
+}
+
+.item-color-selected() {
+  background-color: @item-color-selected;
+  color: @item-color-inverted-selected;
+}
+
+.item-color-visited() {
+  background-color: @visited;
+  color: @visited-inverted;
+}
+
+.item-color-disabled() {
+  background-color: @item-color-disabled;
+  color: @item-color-inverted-disabled;
+}
+
+// Outline
+.item-color-outline() {
+  background-color: @item-color-inverted;
+  color: @item-color;
+  box-shadow: 0 0 0 @item-color-border-width @item-color inset;
+  border-radius: @item-border-radius;
+}
+
+.item-color-outline-hover() {
+  .item-color-hover;
+  box-shadow: 0 0 0 @item-color-border-width @item-color-hover inset;
+  .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;);
+}
+
+.item-color-outline-focus() {
+  .item-color-focus;
+  box-shadow: 0 0 0 @item-color-border-width @item-color-focus inset;
+}
+
+.item-color-outline-selected() {
+  .item-color-selected;
+  box-shadow: 0 0 0 @item-color-border-width @item-color-selected inset;
+}
+
+.item-color-outline-visited() {
+  .item-color-visited;
+  box-shadow: 0 0 0 @item-color-border-width @item-color-visited inset;
+}
+
+.item-color-outline-disabled() {
+  .item-color-disabled;
+  box-shadow: 0 0 0 @item-color-border-width @item-color-disabled inset;
+}

less/_defaults/_buttonMixins/_itemUiStyles.less

@@ -0,0 +1,80 @@
+// --------------------------------------------------
+// ITEM UI COLOUR MIXINS
+// --------------------------------------------------
+
+// Default - Filled
+.item-ui-color() {
+  background-color: @item-ui-color;
+  color: @item-ui-color-inverted;
+  border-radius: @item-ui-border-radius;
+}
+
+.item-ui-color-hover() {
+  background-color: @item-ui-color-hover;
+  color: @item-ui-color-inverted-hover;
+  .transition(background-color @duration ease-in, color @duration ease-in;);
+}
+
+.item-ui-color-focus() {
+  background-color: @item-ui-color-focus;
+  color: @item-ui-color-inverted-focus;
+}
+
+.item-ui-color-visited() {
+  background-color: @item-ui-color-visited;
+  color: @item-ui-color-inverted-visited;
+}
+
+.item-ui-color-selected() {
+  background-color: @item-ui-color-selected;
+  color: @item-ui-color-inverted-selected;
+}
+
+.item-ui-color-locked() {
+  background-color: @item-ui-color-locked;
+  color: @item-ui-color-inverted-locked;
+}
+
+.item-ui-color-disabled() {
+  background-color: @item-ui-color-disabled;
+  color: @item-ui-color-inverted-disabled;
+}
+
+// Outline
+.item-ui-color-outline() {
+  background-color: @item-ui-color-inverted;
+  color: @item-ui-color;
+  box-shadow: 0 0 0 @item-ui-border-width @item-color inset;
+  border-radius: @item-ui-border-radius;
+}
+
+.item-ui-color-outline-hover() {
+  .item-ui-color-hover;
+  box-shadow: 0 0 0 @item-ui-border-width @item-ui-color-hover inset;
+  .transition(background-color @duration ease-in, color @duration ease-in, box-shadow @duration ease-in;);
+}
+
+.item-ui-color-outline-focus() {
+  .item-ui-color-focus;
+  box-shadow: 0 0 0 @item-ui-border-width @item-ui-color-focus inset;
+}
+
+.item-ui-color-outline-selected() {
+  .item-ui-color-selected;
+  box-shadow: 0 0 0 @item-ui-border-width @item-ui-color-selected inset;
+}
+
+.item-ui-color-outline-visited() {
+  .item-ui-color-visited;
+  box-shadow: 0 0 0 @item-ui-border-width @item-ui-color-visited inset;
+}
+
+.item-ui-color-outline-locked() {
+  .item-ui-color-locked;
+  box-shadow: 0 0 0 @item-ui-border-width @item-ui-color-locked inset;
+}
+
+.item-ui-color-outline-disabled() {
+  .item-ui-color-disabled;
+  box-shadow: 0 0 0 @item-ui-border-width @item-ui-color-disabled inset;
+}