1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Different Toggle Icons per node

this hinges on that you are using Cedrics Toggle add-on.

  1. Shelley

    Shelley Well-Known Member

    Shelley submitted a new resource:

    Different Toggle Icons per node - this hinges on that you are using Cedrics Toggle add-on.

    Read more about this resource...
     

    Attached Files:

  2. CyberAP

    CyberAP Well-Known Member

    This one can also be achieved with pure CSS.

    Code:
    .tglWchild
    {
      content: "";
      display: block;
      position: relative;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: green;
      background-image: -webkit-linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0));
      background-image: -moz-linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0));
      background-image: linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0));
      border: 1px solid darkgreen;
      cursor: pointer;
    }
     
    .tglWchild:after /* triangle */
    {
      content: "";
      display: block;
      position: absolute;
      right: 50%;
      bottom: 50%;
      -webkit-transform: translate(50%, 1px); 
      -moz-transform: translate(50%, 1px); 
      transform: translate(50%, 1px);
      width: 0;
      height: 0;
      border: 4px solid transparent;
      border-bottom-color: #fff;
      box-shadow: 0 1px rgba(0,0,0,0.25);
    }
    Demo: http://jsfiddle.net/CyberAP/UqGAE/

    This is just an 'open' state. With some tweaking you can get 'close' state.
     
    StRonK and Shelley like this.
  3. cclaerhout

    cclaerhout Well-Known Member

    Thank you a lot Shelley !

    And thank you too CyperAP... I didn't know we could do this with css. I thought it was requiring to use a svg image. Is it done with CSS 3.0?
     
    Shelley likes this.
  4. Shelley

    Shelley Well-Known Member

  5. CyberAP

    CyberAP Well-Known Member

    It was done with just CSS. CSS actually doesn't have a version. http://www.xanthir.com/b4Ko0
     
    cclaerhout likes this.
  6. cclaerhout

    cclaerhout Well-Known Member

    Thank you for the link. I didn't know that.
     

Share This Page