Sha256: a382a9811b4bb21be80019e6f4fb87f731fe1c2ab81cb8c7ee86b21bb4a26546
Contents?: true
Size: 1.76 KB
Versions: 16
Compression:
Stored size: 1.76 KB
Contents
/*
* Component: Small boxes
.small-box
position: relative
display: block
+border-radius(2px)
margin-bottom: 15px
// content wrapper
> .inner
padding: 10px
> .small-box-footer
position: relative
text-align: center
padding: 3px 0
color: #fff
color: rgba(255, 255, 255, 0.8)
display: block
z-index: 10
background: rgba(0, 0, 0, 0.1)
text-decoration: none
&:hover
color: #fff
background: rgba(0, 0, 0, 0.15)
h3
font-size: 38px
font-weight: bold
margin: 0 0 10px 0
white-space: nowrap
padding: 0
p
font-size: 15px
> small
display: block
color: #f9f9f9
font-size: 13px
margin-top: 5px
h3, p
z-index: 5px
// the icon
.icon
position: absolute
top: auto
bottom: 5px
right: 5px
z-index: 0
font-size: 90px
color: rgba(0, 0, 0, 0.15)
// Small box hover state
&:hover
text-decoration: none
color: #f9f9f9
// Animate icons on small box hover
.icon
animation-name: tansformAnimation
animation-duration: .5s
animation-iteration-count: 1
animation-timing-function: ease
animation-fill-mode: forwards
-webkit-animation-name: tansformAnimation
-webkit-animation-duration: .5s
-webkit-animation-iteration-count: 1
-webkit-animation-timing-function: ease
-webkit-animation-fill-mode: forwards
-moz-animation-name: tansformAnimation
-moz-animation-duration: .5s
-moz-animation-iteration-count: 1
-moz-animation-timing-function: ease
-moz-animation-fill-mode: forwards
@media screen and (max-width: $screen-xs)
// No need for icons on very small devices
.small-box
text-align: center
.icon
display: none
p
font-size: 12px
Version data entries
16 entries across 16 versions & 1 rubygems