Font Size

Font Size.markdown

Font Size

Remake of the Dribbble shot Font Size by @Ari.

Here is the original: http://dribbble.com/shots/986972-Font-Size.

A Pen by Felix De Montis on CodePen.

License.

index.haml

%input{:type => "checkbox", :id => "burger", :checked => "" }/ 

.burger
    %label{:for => "burger"} 

.tooltip
    .a A
    .i
        %input{:type => "range",:max => 100, :value => 25}
    .A A

style.css

@import url(http://weloveiconfonts.com/api/?family=fontawesome);
@import url(http://fonts.googleapis.com/css?family=Oxygen:700);

html {
  background-color: #f68674;
  font-size: 0.625em;
  user-select: none;
}

body {
  display: table;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  margin: 0;
}

input[type="checkbox"] {
  appearance: none;
  display: none;
}

.burger {
  font-family: fontawesome;
  color: #fce7e2;
  font-size: 3em;
}

label {
  cursor: pointer;
  position: relative;
  left: 50%;
  margin-left: -0.4em;
}

.tooltip::before {
  content:"";
  border-style: solid;
  border-width: 0 1.1em 1.2em 1.1em;
  border-color: transparent transparent #ffffff transparent;
  position: absolute;
  margin-top: -1.1em;
  margin-left: 9.5em;
}

.tooltip {
  width: 21em;
  height: 6.4em;
  border-radius: 0.5em;
  background: #ffffff;
  display: table;
  margin-top: 2.4em;
  transition:all;
  opacity: 0;
  cursor: default;
}

.tooltip > * {
  display: table-cell;
  vertical-align: middle;
  font-weight: 700;
  font-family: Oxygen, Helvetica , Arial;
  color: #7ee6cd;
}

.a {
  font-size: 2em;
  position: relative;
  left: 0.9em;
}

.i {
  text-align:center;
  width: 10em;
}

.i input {
  appearance: none;
  width: 10em;
  height: 0.45em;
  background: #eee;
  border-radius: 0.5em;
  outline: none;
  margin-left: 1.25em;
  cursor: pointer;
}

.i input::-webkit-slider-thumb {
  appearance: none;
  height: 2.2em;
  width: 2.2em;
  background: #48cada;
  border-radius: 2em;
}

.A {
  position: relative;
  font-size: 2.8em;
  right: .643em;
  text-align: right;
}


input[type="checkbox"]:checked ~ .tooltip{
  opacity:1;
}