Sybolset Examples

example.css

.cf{zoom:1;}.cf:before,.cf:after{content:"";display:table;}.cf:after{clear: both;}

[class^="ss-"]:before {
  padding-right: 0.5em;
}

[id^="example-"]:not(.ss-icon), [id^="example-"] button {
  font-family: Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
[id^="example-"]{
  margin: 30px;
}
ul {
  padding: 0;
  margin: 0;
}


#example-button, #example-button button {
  color: #fff;
  position: relative;
  width: 125px;
}
#example-button button {
  background-color: #58C44A;
  border: 0;
  box-shadow: 0 -1px 0 #3B922F inset;
  border-radius: 5px 0 0 5px;
  cursor: pointer;
  float: left;
  font-weight: 600;
  height: 30px;
  margin: 0;
  padding: 3px 5px 2px;
  width: 100px;
}
#example-button button.ss-dropdown {
  border-left: 1px solid #46AD38;
  border-radius: 0 5px 5px 0;
  float: right;
  width: 25px;
}
#example-button button:hover {
  background-color: #4BB93C;
  box-shadow: 0 -1px 0 #337F29 inset;
}
#example-button button:active {
  background-color: #46AD38;
  box-shadow: none;
  text-shadow: 0 -1px 0 #3B922F;
}
#example-button button:before {
  font-size: 15px;
  position: relative;
  top: 2px;
}
#example-button button.ss-dropdown:before {
  font-size: 11px;
}
#example-button ul {
  clear: both;
  background-color: #4BB93C;
  border-radius: 0 0 5px 5px;
  box-shadow: 0 -1px 0 #3B922F inset;
  display: none;
  list-style: none;
  padding: 5px 0;
}
#example-button ul a {
  color: #fff;
  display: block;
  padding: 0 10px;
  text-decoration: none;
}
#example-button ul a:hover {
  background-color: #46AD38;
}
#example-button ul a:active {
  background-color: #3B922F;
}
#example-button.open ul {
  display: block;
}
#example-button.open button {
  border-radius: 5px 0 0 0;
}
#example-button.open button.ss-dropdown {
  background-color: #4BB93C;
  border-radius: 0 5px 0 0;
  box-shadow: none;
}



#example-browse a {
  background-color: hsl(190, 7%, 83%);
  box-shadow: 0 -1px 0 hsl(190, 7%, 70%) inset;
  color: hsl(190, 7%, 58%);
  display: block;
  float: left;
  text-shadow: 0 2px 0 hsl(190, 7%, 42%), 0 1px 0 hsl(190, 7%, 42%);
  text-decoration: none;
  padding: 6px 10px 4px;
}
#example-browse a:hover {
  color: hsl(190, 7%, 48%);
  text-shadow: 0 2px 0 hsl(190, 7%, 32%), 0 1px 0 hsl(190, 7%, 32%);
}
#example-browse a:active {
  color: hsl(190, 7%, 32%);
  text-shadow: 0 1px 0 #fff;
  padding-top: 8px;
  padding-bottom: 2px;
}
#example-browse a:first-child {
  border-radius: 5px 0 0 5px;
}
#example-browse a:last-child {
  border-radius: 0 5px 5px 0;
}

example.html

<div id="example-button" class="cf">
  <button class="ss-reply">Reply</button>
  <button class="ss-dropdown"></button>
  <ul>
    <li><a href="#">Reply all</a></li>
    <li><a href="#">Forward</a></li>
  </ul>
</div>

<div id="example-browse" class="ss-icon cf">
  <a href="#">back</a>
  <a href="#">forward</a>
  <a href="#">refresh</a>
</div>

example.js

(function(){
  document.getElementById('example-button').querySelector('.ss-dropdown').addEventListener('click', toggleOpen, false)
  function toggleOpen(event){
    var parent = event.target.parentNode
    if (parent.getAttribute('class') === 'cf')
      parent.setAttribute('class', 'cf open')
    else
      parent.setAttribute('class', 'cf')
  }
})();