Template:Http://2014.igem.org/Team:Colombia
From 2014.igem.org
(Difference between revisions)
Line 1,401: | Line 1,401: | ||
<!--CSS--> | <!--CSS--> | ||
<style> | <style> | ||
+ | @sans: 'Open Sans', sans-serif; | ||
+ | @serif: 'Roboto Slab', serif; | ||
+ | @grey: #445561; | ||
+ | @orange: #f26b43; | ||
+ | @letter-spacing: .1em; | ||
+ | |||
+ | .transition(...) { | ||
+ | -webkit-transition: @arguments; | ||
+ | -moz-transition: @arguments; | ||
+ | -o-transition: @arguments; | ||
+ | transition: @arguments; | ||
+ | } | ||
+ | |||
* { | * { | ||
- | font-family: | + | font-family: @sans; |
} | } | ||
+ | |||
.button-fill { | .button-fill { | ||
- | + | text-align: center; | |
- | + | background: #ccc; | |
- | + | display: inline-block; | |
- | + | position: relative; | |
- | + | text-transform: uppercase; | |
- | + | margin: 25px; | |
- | + | ||
- | + | // CSS FOR GREY FILL BUTTONS | |
- | + | ||
- | + | &.grey { | |
- | } | + | background: @grey; |
- | + | color: white; | |
- | + | } | |
- | + | ||
- | + | // CSS FOR ORANGE FILL BUTTONS | |
- | + | ||
- | + | &.orange { | |
- | } | + | background: @orange; |
- | + | color: #fff; | |
- | + | .button-inside { | |
+ | color: @orange; | ||
+ | } | ||
+ | .button-inside.full { | ||
+ | border: 1px solid @orange; | ||
+ | } | ||
+ | } | ||
} | } | ||
+ | |||
.button-text { | .button-text { | ||
- | + | padding: 0 25px; | |
- | + | line-height: 56px; | |
- | + | letter-spacing: .1em; | |
} | } | ||
+ | |||
+ | |||
.button-inside { | .button-inside { | ||
- | + | width: 0px; | |
- | + | height: 54px; | |
- | + | margin: 0; | |
- | + | float: left; | |
- | + | position: absolute; | |
- | + | top: 1px; | |
- | + | left: 50%; | |
- | + | line-height: 54px; | |
- | + | color: @grey; | |
- | + | background: #fff; | |
- | + | text-align: center; | |
- | + | overflow: hidden; | |
- | + | .transition(width .5s, left .5s, margin .5s;); | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | .button-inside.full { | + | |
- | + | .button-inside.full { // HOVER STATE (jQuery) | |
- | + | width: 100%; | |
- | + | left: 0%; | |
- | + | top: 0; | |
- | + | margin-right: -50px; | |
+ | border: 1px solid @grey; | ||
} | } | ||
+ | |||
.inside-text { | .inside-text { | ||
- | + | text-align: center; | |
- | + | position: absolute; | |
- | + | right: 50%; | |
- | + | letter-spacing: .1em; | |
- | + | text-transform: uppercase; | |
- | + | -webkit-transform: translateX(50%); | |
- | + | -moz-transform: translateX(50%); | |
- | + | -ms-transform: translateX(50%); | |
- | + | transform: translateX(50%); | |
} | } | ||
</style> | </style> |
Revision as of 23:50, 28 September 2014
'