Skip to content

Instantly share code, notes, and snippets.

@aebsr
Last active December 20, 2015 21:08
Show Gist options
  • Save aebsr/6195111 to your computer and use it in GitHub Desktop.
Save aebsr/6195111 to your computer and use it in GitHub Desktop.

Revisions

  1. aebsr revised this gist Sep 6, 2013. 2 changed files with 1 addition and 72 deletions.
    72 changes: 0 additions & 72 deletions output.css
    Original file line number Diff line number Diff line change
    @@ -1,72 +0,0 @@
    #signup [type="email"]::-webkit-input-placeholder {
    color: green;
    }
    #signup [type="email"]:-ms-input-placeholder {
    color: green;
    }
    #signup [type="email"]::input-placeholder {
    color: green;
    }
    #signup [type="email"]:input-placeholder {
    color: green;
    }
    #signup [type="email"]::-moz-placeholder {
    color: green;
    }
    #signup [type="email"]:-moz-placeholder {
    color: green;
    }
    #signup [type="email"]::placeholder {
    color: green;
    }
    #signup [type="email"]:placeholder {
    color: green;
    }
    #contact [type="name"]::-webkit-input-placeholder {
    color: green;
    }
    #contact [type="name"]:-ms-input-placeholder {
    color: green;
    }
    #contact [type="name"]::input-placeholder {
    color: green;
    }
    #contact [type="name"]:input-placeholder {
    color: green;
    }
    #contact [type="name"]::-moz-placeholder {
    color: green;
    }
    #contact [type="name"]:-moz-placeholder {
    color: green;
    }
    #contact [type="name"]::placeholder {
    color: green;
    }
    #contact [type="name"]:placeholder {
    color: green;
    }
    [type="search"]::-webkit-input-placeholder {
    color: purple;
    }
    [type="search"]:-ms-input-placeholder {
    color: purple;
    }
    [type="search"]::input-placeholder {
    color: purple;
    }
    [type="search"]:input-placeholder {
    color: purple;
    }
    [type="search"]::-moz-placeholder {
    color: purple;
    }
    [type="search"]:-moz-placeholder {
    color: purple;
    }
    [type="search"]::placeholder {
    color: purple;
    }
    [type="search"]:placeholder {
    color: purple;
    }
    1 change: 1 addition & 0 deletions placeholder.less
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,4 @@
    // placeholder mixin
    .placeholder (@el:~'[placeholder]') {
    @{el}::-webkit-input-placeholder { .styles; }
    @{el}:-ms-input-placeholder { .styles; }
  2. aebsr revised this gist Sep 6, 2013. 2 changed files with 73 additions and 1 deletion.
    72 changes: 72 additions & 0 deletions output.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,72 @@
    #signup [type="email"]::-webkit-input-placeholder {
    color: green;
    }
    #signup [type="email"]:-ms-input-placeholder {
    color: green;
    }
    #signup [type="email"]::input-placeholder {
    color: green;
    }
    #signup [type="email"]:input-placeholder {
    color: green;
    }
    #signup [type="email"]::-moz-placeholder {
    color: green;
    }
    #signup [type="email"]:-moz-placeholder {
    color: green;
    }
    #signup [type="email"]::placeholder {
    color: green;
    }
    #signup [type="email"]:placeholder {
    color: green;
    }
    #contact [type="name"]::-webkit-input-placeholder {
    color: green;
    }
    #contact [type="name"]:-ms-input-placeholder {
    color: green;
    }
    #contact [type="name"]::input-placeholder {
    color: green;
    }
    #contact [type="name"]:input-placeholder {
    color: green;
    }
    #contact [type="name"]::-moz-placeholder {
    color: green;
    }
    #contact [type="name"]:-moz-placeholder {
    color: green;
    }
    #contact [type="name"]::placeholder {
    color: green;
    }
    #contact [type="name"]:placeholder {
    color: green;
    }
    [type="search"]::-webkit-input-placeholder {
    color: purple;
    }
    [type="search"]:-ms-input-placeholder {
    color: purple;
    }
    [type="search"]::input-placeholder {
    color: purple;
    }
    [type="search"]:input-placeholder {
    color: purple;
    }
    [type="search"]::-moz-placeholder {
    color: purple;
    }
    [type="search"]:-moz-placeholder {
    color: purple;
    }
    [type="search"]::placeholder {
    color: purple;
    }
    [type="search"]:placeholder {
    color: purple;
    }
    2 changes: 1 addition & 1 deletion usage.less
    Original file line number Diff line number Diff line change
    @@ -17,6 +17,6 @@
    // stand alone example
    // risky, as it becomes globally set and can be inherited in other style(instances)
    .styles() {
    color: green;
    color: purple;
    }
    .placeholder(~'[type="search"]');
  3. aebsr revised this gist Sep 6, 2013. 2 changed files with 31 additions and 13 deletions.
    21 changes: 10 additions & 11 deletions placeholder.less
    Original file line number Diff line number Diff line change
    @@ -1,11 +1,10 @@
    .placeholder() {
    &::-webkit-input-placeholder { .placeholder-text(); }
    &:-ms-input-placeholder { .placeholder-text(); }
    &::input-placeholder { .placeholder-text(); }
    &:input-placeholder { .placeholder-text(); }
    &::-moz-placeholder { .placeholder-text(); }
    &:-moz-placeholder { .placeholder-text(); }
    &::placeholder { .placeholder-text(); }
    &:placeholder { .placeholder-text(); }
    }
    input[placeholder] { .placeholder }
    .placeholder (@el:~'[placeholder]') {
    @{el}::-webkit-input-placeholder { .styles; }
    @{el}:-ms-input-placeholder { .styles; }
    @{el}::input-placeholder { .styles; }
    @{el}:input-placeholder { .styles; }
    @{el}::-moz-placeholder { .styles; }
    @{el}:-moz-placeholder { .styles; }
    @{el}::placeholder { .styles; }
    @{el}:placeholder { .styles; }
    }
    23 changes: 21 additions & 2 deletions usage.less
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,22 @@
    .placeholder-text() {
    // nested example #1
    #signup {
    .styles() {
    color: green;
    }
    .placeholder(~'[type="email"]');
    }

    // nested example #2
    #contact {
    .styles() {
    color: red;
    }
    .placeholder(~'[type="name"]');
    }

    // stand alone example
    // risky, as it becomes globally set and can be inherited in other style(instances)
    .styles() {
    color: green;
    }
    }
    .placeholder(~'[type="search"]');
  4. Antoine Butler created this gist Aug 9, 2013.
    11 changes: 11 additions & 0 deletions placeholder.less
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,11 @@
    .placeholder() {
    &::-webkit-input-placeholder { .placeholder-text(); }
    &:-ms-input-placeholder { .placeholder-text(); }
    &::input-placeholder { .placeholder-text(); }
    &:input-placeholder { .placeholder-text(); }
    &::-moz-placeholder { .placeholder-text(); }
    &:-moz-placeholder { .placeholder-text(); }
    &::placeholder { .placeholder-text(); }
    &:placeholder { .placeholder-text(); }
    }
    input[placeholder] { .placeholder }
    3 changes: 3 additions & 0 deletions usage.less
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    .placeholder-text() {
    color: green;
    }