Skip to content

Instantly share code, notes, and snippets.

@dudesl
Created September 23, 2014 20:03
Show Gist options
  • Save dudesl/8df28c4ea432660cb877 to your computer and use it in GitHub Desktop.
Save dudesl/8df28c4ea432660cb877 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class="promo-app">
<p class="promo-app__p">
<strong>¡Pagá y enviá dinero desde tu celular!</strong>
Descargá gratis la aplicación de MercadoPago
</p>
<a href="" class="promo-app__logo">PlayStore</a>
</div>
// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900)
@font-face
font-family: 'Lato', sans-serif
%overflow_zoom
overflow: hidden
zoom: 1
=hide-text()
text-indent: 100%
white-space: nowrap
overflow: hidden
=vertical_align()
position: relative
top: 50%
transform: translateY(50%)
-webkit-transform: translateY(50%)
-ms-transform: translateY(50%)
.promo-app
@extend %overflow_zoom
background-color: rgba(0, 0, 0, 0.3)
filter: alpha(opacity=60) //backgroun alpha For IE8 and earlier
border: 1px solid #333
border-radius: 10px
padding: 10px
position: relative
width: auto
font-family: 'Lato'
&__p
@extend %overflow_zoom
color: #fff
display: block
font-size: 14px
font-weight: 100
letter-spacing: 2px
float: left
strong
display: block
font-weight: 700
font-size: 16px
&__logo
background-image: url("http://placehold.it/112x36")
float: right
height: 36px
width: 112px
+hide-text
+vertical_align
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);
@font-face {
font-family: "Lato", sans-serif;
}
.promo-app, .promo-app__p {
overflow: hidden;
zoom: 1;
}
.promo-app {
background-color: rgba(0, 0, 0, 0.3);
filter: alpha(opacity=60);
border: 1px solid #333;
border-radius: 10px;
padding: 10px;
position: relative;
width: auto;
font-family: "Lato";
}
.promo-app__p {
color: #fff;
display: block;
font-size: 14px;
font-weight: 100;
letter-spacing: 2px;
float: left;
}
.promo-app__p strong {
display: block;
font-weight: 700;
font-size: 16px;
}
.promo-app__logo {
background-image: url("http://placehold.it/112x36");
float: right;
height: 36px;
width: 112px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
position: relative;
top: 50%;
transform: translateY(50%);
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
}
<div class="promo-app">
<p class="promo-app__p">
<strong>¡Pagá y enviá dinero desde tu celular!</strong>
Descargá gratis la aplicación de MercadoPago
</p>
<a href="" class="promo-app__logo">PlayStore</a>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment