Dynamic UI states

dabblet.css

/** Dynamic UI states */
/* Positioning */
.bubble { top:26px }
/* resets */
body { font:300 100%/1.4 helvetica,sans-serif; background:#eee }
a { text-decoration:none; color:#B7DE44 }
textarea, p, button { margin:0; padding:0; font:inherit }

/* Archetype CSS */
.bubble { padding:14px; position:absolute; border-radius:9px;
  box-shadow:0 2px 5px 0 rgba(0, 0, 0,.3); font-size:14px; line-height:1 }
  .bubble:after { content:''; height:0; width:0;
    position:absolute; border:15px solid transparent;
    border-bottom-color:#000; bottom:100%; left:50%;
    margin-left:-14px }
.bubble p { margin-bottom:.9em }
.bubble p:last-child { margin:0 }

.bubble.add { background-color:#000; border:1px solid rgba(50,50,50,.4); background-color:rgba(0,0,0,.9); font-size:12px; line-height:1.4; color:#fff; min-width:160px; max-width:195px }
.bubble.add { border-bottom-color:#000; border-bottom-color:rgba(0,0,0,.9); }

.bubble.add span,
.bubble.add label { display:block }
.bubble.add header~*:not(header) { margin-top:10px; border-top:1px solid #333; padding-top:9px; color:#ddd }


.bubble.add [id=connect_with_facebook] { display:block; width:180px; height:25px; line-height:25px;
  background:#516793; background:linear-gradient(top, #4e6ba5 0%,#516a9b 53%,#435f97 53%,#42557b 100%);
  color:#fff; text-transform:uppercase; font-size:10px; text-align:left; border-radius:2px; color:rgba(255,255,255,.9);
  box-shadow:0 2px 0px 0px #303e59; cursor:pointer; position:relative;
  border:none; }
.bubble.add #connect_with_facebook:before { content:''; float:left; width:24px; height:25px;
  background:url('http://f.cl.ly/items/3k0329172A2F41002H1o/sprite.png') -56px -107px; margin:0 6px }
.bubble.add #connect_with_facebook:active { box-shadow:none; top:1px }

.bubble.add [id=cancel] { display:block; margin-top:15px;
  background:none; border:none; color:#B7DE44; cursor:pointer }

.bubble.add [id=send_share] { width:100%; height:22px; display:block; background:#abd62a;
  background:linear-gradient(#d1f04f 0%,#80b800 100%);
  border:none; border-radius:3px; font-weight:bold;
  text-shadow:0 1px 0px #bddc69; font-size:inherit;
  margin-top:6px }
.bubble.add #send_share:hover { cursor:pointer; background:#b3d940;
  background:linear-gradient(#d4f256 0%,#8bc111 100%) }
.bubble.add #send_share:active { background:#a6ce2f;
  box-shadow:inset 0 0 4px 0 #607d0a }
.bubble.add header.when-added:before,
.bubble.add span.when-shared:before { content:''; width:11px; height:9px;
background:url('http://f.cl.ly/items/1f2v3D2E451r1l1S1C3u/sprite.png') -414px -56px;
display:inline-block; margin-right:2px }

.bubble.add span.when-shared:before { margin-right:5px }

.bubble.add textarea.when-share { background:transparent; border:1px solid #333;
  margin-top:3px; width:100%; padding-top:4px; height:20px; color:#fff; resize:none;
  text-indent:4px; transition:height 150ms }
.bubble.add textarea.when-share:hover { border-color:#3b3b3b }  
.bubble.add textarea.when-share:focus { background:#fff; border:1px solid #868686;
color:#000; outline:none; height:50px }

/* states */
.bubble[data-states] [class^=when-] { display:none }
.bubble.is-disabled .when-disabled,
.bubble.is-signed-out .when-signed-out,
.bubble.is-unverified .when-unverified,
.bubble.is-add .when-add { display:block }


  

dabblet.html

<aside class="bubble add" data-states="disabled signed-out unverified add added share shared connect connected connect-error">
  <header class=when-disabled>
    This feature is temporarily disabled while we make changes to the site. Sorry!
  </header>
  
  <header class=when-signed-out>
    <span class="aggregate-adds">456 others added this</span>  
  </header>
  <p class=when-signed-out>
    <a href="#sign-in" data-ga="#like_bubble">Sign in</a>
    or <a href="/user/register" data-ga="#like_bubble">Register</a>
    to add this to your Storyboard.
  </p>
  
  <header class=when-unverified>
    A verified email address is required to add this
    to <a href="/user/storyboard">your Storyboard</a>
  </header>
  <p class=when-unverified>
    If you no longer have the verification email you were
    sent during registration, 
    <a id=resend_verification_email href=#>request another</a>.
  </p>
  
  <header class=when-add>
    Add to <a href="/user/storyboard">your Storyboard</a>
    <span class=aggregate-adds>456 others added this</span>
  </header>  
  <header class=when-added>
    Added to <a href="/user/storyboard">your Storyboard</a>
    <span class=aggregate-adds>You and 456 others added this</span>
  </header>
  
  <label class=when-added>
    <input type=checkbox>
    Share on Facebook
  </label>
  <label class=when-add>
    <input type=checkbox>
    Also share on Facebook
  </label>
  <button class="when-connect when-connect-error" id="connect_with_facebook">Connect with Facebook</button>
  <p class="when-connect-error">
    There was a problem connecting. Try again?
  </p>
  <button class="when-connect when-connect-error" id="cancel">Cancel</button>
  <textarea class=when-share placeholder="Write a note (optional)"></textarea>
  <button class=when-share id="send_share">Add to Facebook</button>
  <span class=when-shared>Shared on Facebook</span>
</aside>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}