Skip to content

Instantly share code, notes, and snippets.

@dmitryshimkin

dmitryshimkin/focus-mixin.less

Last active December 15, 2015 18:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dmitryshimkin/5303410 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dmitryshimkin/5303410 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. dmitryshimkin renamed this gist Jun 1, 2013. 1 changed file with 0 additions and 0 deletions.
    0 focus-less-mixin → focus-mixin.less
    View file
    File renamed without changes.
  2. dmitryshimkin renamed this gist Apr 3, 2013. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → focus-less-mixin
    View file
    File renamed without changes.
  3. dmitryshimkin created this gist Apr 3, 2013.
    14 changes: 14 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    /* mixin */
    .focus(@className: "focused") {
    behavior: ~"expression(function focus(el) { el.runtimeStyle.behavior = 'none'; var focusClass = ' @{className}'; el.onfocus = function() { el.className += (focusClass); }; el.onblur = function() { el.className = el.className.replace(new RegExp(focusClass, 'g'), ''); }; }(this))";
    }

    /* usage */
    .input {
    .focus("input_focused");

    .input:focus,
    .input_focused {
    border-color: blue;
    }
    }