Skip to content

Instantly share code, notes, and snippets.

@ggazzo

ggazzo/SassMeister-input-HTML.html

Created July 25, 2014 16:56
Show Gist options
  • Save ggazzo/412a9a46fdd79a47dded to your computer and use it in GitHub Desktop.
Save ggazzo/412a9a46fdd79a47dded to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<link href='http://s2.trrsf.com/update-1403010919/fe/zaz-morph/_css/zaz.css' rel='stylesheet' type='text/css'>
<div class="title-page">
<div class="title-page__item">
<img class="cu" src="http://p1.trrsf.com/image/fget/sc/51/51/images.terra.com/2012/10/23/cruzeiro.png" alt="Cruzeiro">
</div>
<div class="title-page__item-separator"></div>
<h1 class="title-page__item title">Terra</h1>
<div class="title-page__item-separator"></div>
<div class=" title-page__item ">
<a href="#teste1" id="teste1" class="buttom"><span class="buttom__check"></span><span class="buttom__text">Esse é meu time</span></a>
</div>
</div>
<div class="title-page">
<h1 class="title-page__item title">Terra</h1>
<div class=" title-page__item ">
<a href="#teste3" id="teste3" class="buttom">
<span class="buttom__check"></span><span class="buttom__text">Esse é meu time</span>
</a>
</div>
</div>
<div class="title-page">
<div class="title-page__item"><img class="cu" src="http://p1.trrsf.com/image/fget/sc/51/51/images.terra.com/2012/10/23/cruzeiro.png" alt="Cruzeiro"></div>
<h1 class="title-page__item title">Terra</h1>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----
.title-page{
text-align: center;
margin:10px 0;
&__item{
vertical-align:middle;
position:relative;
display: inline-block;
margin:0 10px;
}
&__item-separator {
border-left: #CECECE 1px solid;
border-right: #FFFFFF 1px solid;
height: 20px;
display: inline-block;
margin: 0 5px;
vertical-align: middle; }
}
.title {
font-size: 40px;
font-weight: bold;
vertical-align:middle;
display:inline-block;
font-family: 'Ubuntu', sans-serif;
}
.example{
margin: 50px;
}
a {text-decoration:none;}
.cu {
display:inline;
vertical-align:middle;
}
body {
margin-top:100px;
background: whitesmoke;
}
.buttom {
outline:none;
font-family: "OpenSans", sans-serif;
background: white;
padding: 10px 10px;
line-height:1;
border-radius:25px;
transition: all .2s;
border-bottom: 2px solid #ccc;
border-top:0;
font-size: 11px;
text-transform: uppercase;
font-weight: 700;
color:#65655D;
box-shadow: 0px 0px 1px 0px rgba(224, 224, 224, 1);
&:hover {
box-shadow: 1px 1px 2px 1px rgba(224, 224, 224, 1);
text-shadow: 3px 1px 1px #eee;
}
&:active {
border-top: 2px solid #ccc;
border-bottom: 0;
}
&__text {
display:inline-block;
max-width:300px;
transition:all 1s;
white-space:nowrap;
overflow: hidden;
padding:0 5px;
vertical-align: middle;
}
.a-btn-symbol
{
vertical-align: middle;
}
&:target &__text ,
&.closed &__text {
max-width:0;
opacity:0;
padding:0;
}
&__check {
display:inline-block;
width:18px;
margin:-4px 0;
height:18px;
vertical-align:middle;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAASCAYAAAC5DOVpAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8yNC8xNDCu6IEAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAABxElEQVQ4jZ2TP0wTYRiHn7sGLS30vlsUIZiD6nmQaE8I2IZoiwEjGqGrCUNlI5cQTK6DC5aRhIGFHTedcNTtM3FgszFx0lQaF1RIEKKck07VXrkT29/2vb83z5v3zxehVVmmjap4fP/h1UJKS6DMSJ7M6CbJvipfvhZYXpEAkaZBuhDcGJNYF6OoqiAeL3D3lk5le6t52L3bTxm4lCLWXh9Nc234p9oUKDOSp7dnBqE1OmUct/T/MF0IBq0NjPNB7gMAP8wy7VDYRG6DfkMjcmwyyzhu2Q+zTJuJ7BvWV58zbAtf+uT4Ism+0PZqD/UP6OZ1iXkBYIa5WcncrAFAb49Bv1Giuyu0vZoUdCGYnpJcHkzR7tvQNw4Oc3yorGEms3R0NIIe4rhrftidyRJDqcecC6wcJonjjjcGI7yvSBSlSjyeD5hJkPbZ3ZtCvt4/DgOofipzdPSKWCyPLqKo/7yYRxSXXgQZf/e883mbg8OXRKNptEQXbW1B+RLHnQ+r4j+a3b0dPlafkehMIzSD06fq3dD2gmEAnufx9t0TEp0GWsKu+4P3KS5thYFOVnasQHHhF+urm61D6nX1So6zZ8TJifAbqMlr+DZJ36cAAAAASUVORK5CYII=);
}
}
Raw
SassMeister-output.css
.title-page {
text-align: center;
margin: 10px 0;
}
.title-page__item {
vertical-align: middle;
position: relative;
display: inline-block;
margin: 0 10px;
}
.title-page__item-separator {
border-left: #CECECE 1px solid;
border-right: #FFFFFF 1px solid;
height: 20px;
display: inline-block;
margin: 0 5px;
vertical-align: middle;
}
.title {
font-size: 40px;
font-weight: bold;
vertical-align: middle;
display: inline-block;
font-family: 'Ubuntu', sans-serif;
}
.example {
margin: 50px;
}
a {
text-decoration: none;
}
.cu {
display: inline;
vertical-align: middle;
}
body {
margin-top: 100px;
background: whitesmoke;
}
.buttom {
outline: none;
font-family: "OpenSans", sans-serif;
background: white;
padding: 10px 10px;
line-height: 1;
border-radius: 25px;
transition: all .2s;
border-bottom: 2px solid #ccc;
border-top: 0;
font-size: 11px;
text-transform: uppercase;
font-weight: 700;
color: #65655D;
box-shadow: 0px 0px 1px 0px #e0e0e0;
}
.buttom:hover {
box-shadow: 1px 1px 2px 1px #e0e0e0;
text-shadow: 3px 1px 1px #eee;
}
.buttom:active {
border-top: 2px solid #ccc;
border-bottom: 0;
}
.buttom__text {
display: inline-block;
max-width: 300px;
transition: all 1s;
white-space: nowrap;
overflow: hidden;
padding: 0 5px;
vertical-align: middle;
}
.buttom .a-btn-symbol {
vertical-align: middle;
}
.buttom:target .buttom__text, .buttom.closed .buttom__text {
max-width: 0;
opacity: 0;
padding: 0;
}
.buttom__check {
display: inline-block;
width: 18px;
margin: -4px 0;
height: 18px;
vertical-align: middle;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAASCAYAAAC5DOVpAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAwNy8yNC8xNDCu6IEAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAABxElEQVQ4jZ2TP0wTYRiHn7sGLS30vlsUIZiD6nmQaE8I2IZoiwEjGqGrCUNlI5cQTK6DC5aRhIGFHTedcNTtM3FgszFx0lQaF1RIEKKck07VXrkT29/2vb83z5v3zxehVVmmjap4fP/h1UJKS6DMSJ7M6CbJvipfvhZYXpEAkaZBuhDcGJNYF6OoqiAeL3D3lk5le6t52L3bTxm4lCLWXh9Nc234p9oUKDOSp7dnBqE1OmUct/T/MF0IBq0NjPNB7gMAP8wy7VDYRG6DfkMjcmwyyzhu2Q+zTJuJ7BvWV58zbAtf+uT4Ism+0PZqD/UP6OZ1iXkBYIa5WcncrAFAb49Bv1Giuyu0vZoUdCGYnpJcHkzR7tvQNw4Oc3yorGEms3R0NIIe4rhrftidyRJDqcecC6wcJonjjjcGI7yvSBSlSjyeD5hJkPbZ3ZtCvt4/DgOofipzdPSKWCyPLqKo/7yYRxSXXgQZf/e883mbg8OXRKNptEQXbW1B+RLHnQ+r4j+a3b0dPlafkehMIzSD06fq3dD2gmEAnufx9t0TEp0GWsKu+4P3KS5thYFOVnasQHHhF+urm61D6nX1So6zZ8TJifAbqMlr+DZJ36cAAAAASUVORK5CYII=);
}
Raw
SassMeister-rendered.html
<link href='http://s2.trrsf.com/update-1403010919/fe/zaz-morph/_css/zaz.css' rel='stylesheet' type='text/css'>
<div class="title-page">
<div class="title-page__item">
<img class="cu" src="http://p1.trrsf.com/image/fget/sc/51/51/images.terra.com/2012/10/23/cruzeiro.png" alt="Cruzeiro">
</div>
<div class="title-page__item-separator"></div>
<h1 class="title-page__item title">Terra</h1>
<div class="title-page__item-separator"></div>
<div class=" title-page__item ">
<a href="#teste1" id="teste1" class="buttom"><span class="buttom__check"></span><span class="buttom__text">Esse é meu time</span></a>
</div>
</div>
<div class="title-page">
<h1 class="title-page__item title">Terra</h1>
<div class=" title-page__item ">
<a href="#teste3" id="teste3" class="buttom">
<span class="buttom__check"></span><span class="buttom__text">Esse é meu time</span>
</a>
</div>
</div>
<div class="title-page">
<div class="title-page__item"><img class="cu" src="http://p1.trrsf.com/image/fget/sc/51/51/images.terra.com/2012/10/23/cruzeiro.png" alt="Cruzeiro"></div>
<h1 class="title-page__item title">Terra</h1>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment