Mouse and touchscreen LESS mixins

Three LESS mixins that allow for easy CSS styling of the basic mouse- and touchscreen-related UI conditions, such as 'click', 'hover', 'active', and 'touch'.

Installation

$ meteor add jcheroske:less-mouse-and-touch

Inclusion in LESS sources

To include the mixins in your current less project, simply use LESS @import combined with the new Meteor package syntax:

• Touch mixin only:

  @import "{jcheroske:less-mouse-and-touch}/mouse.import.less";

• Mouse mixin only:

  @import "{jcheroske:less-mouse-and-touch}/touch.import.less";

• Both touch and mouse mixins:

  @import "{jcheroske:less-mouse-and-touch}/mouse-and-touch.import.less";

Note: Only one of these imports are needed in any file.

Mixins

Note: all mixin detached rulesets are optional and default to the empty ruleset.

.mouse mixin

A mixin for styling mouse events.

.mouse(@default, @hover, @click, @active);

• @default

  A detached ruleset of styles applied initially.

• @hover

  A detached ruleset of styles applied when the mouse is hovering over the element.

• @click

  A detached ruleset of styles applied when the mouse is actually clicking.

• @active

  A detached ruleset of styles appliced when the element has the active class.

Example

.common-button {
  .mouse(
    @hover: {
      background-color: blue;
      border-color: purple;
    };
    @click: {
      background-color: red;
      border-color: white;
    };
  )
}

.touch mixin

A mixin for styling touch events.

.touch(@default, @touch, @active);

• @default

  A detached ruleset of styles applied initially.

• @touch

  A detached ruleset of styles applied when the user is actively touching the element.

• @active

  A detached ruleset of styles applied when the element has the active class.

Example

.dropdown-toggle {
  .touch(
    @touch: {
      background-color: green;
      span {
        color: black;
      }
    };
  )
}

.mouse-and-touch mixin

A convience mixin that simply combines the functionality of the two previous mixins.

.mouse-and-touch(@default, @hover, @click, @touch, @active);

• @default

  A detached ruleset of styles applied initially.

• @hover

  A detached ruleset of styles applied when the mouse is hovering over the element.

• @click

  A detached ruleset of styles applied when the mouse is actually clicking.

• @touch

  A detached ruleset of styles applied when the user is actively touching the element.

• @active

  A detached ruleset of styles applied when the element has the active class.

Example

.navbar-button {
  .mouse-and-touch(
    @hover: {
      background-color: blue;
      border-color: purple;
    };
    @click: {
      background-color: red;
      border-color: white;
    };
    @touch: {
      background-color: green;
      border: 5px solid orange;
    }
  )
}