Team:UCLA/Template/CSS test

From 2014.igem.org

(Difference between revisions)
Line 491: Line 491:
<!-- PINNED SIDE MENU -->
<!-- PINNED SIDE MENU -->
-
#menu {
+
div.toolbar-wrapp{
-
  position: fixed;
+
    position: fixed;
-
  right: 0;
+
    display: block;
-
  top: 50%;
+
    top: 30%;
-
  width: 8em;
+
}
-
  margin-top: -2.5em;
+
 +
div.sticky-toolbar{
 +
    position: relative;
 +
    top: 30%;
 +
    padding: .1em;
 +
    background-color: #2C3E50;
 +
    float: left;
 +
    -webkit-border-radius: 0 .2em .2em 0;
 +
    -moz-border-radius: 0 .2em .2em 0;
 +
    border-radius: 0 .2em .2em 0;
 +
}
 +
    @font-face {
 +
    font-family: 'Entypo';
 +
    src: url('../font/entypo.eot');
 +
    src: local('☺'),
 +
    url('../font/entypo.woff') format('woff'),
 +
    url('../font/entypo.ttf') format('truetype'),
 +
    url('../font/entypo.svg#webfontIyfZbseF') format('svg');
 +
}
 +
[data-icon]:before {
 +
    font-family: 'Entypo';
 +
    content: attr(data-icon);
 +
}
 +
div.sticky-toolbar ul li a{
 +
display: block;
 +
width: .8em;
 +
margin: 0.2em;
 +
line-height: 80%;
 +
font-size: 2.2em;
 +
text-align: center;
 +
color: #fff;
 +
background-color: #16A085;
 +
-webkit-border-radius: .1em;
 +
-moz-border-radius: .1em;
 +
border-radius: .1em;
 +
-webkit-transition: all 0.1s ease-in-out;
 +
-moz-transition: all 0.1s ease-in-out;
 +
transition: all 0.1s ease-in-out;
 +
-webkit-font-smoothing: antialiased;
 +
}
 +
div.sticky-toolbar ul li a:hover{
 +
background-color: #1ABC9C;
 +
}
 +
div.popup{
 +
display: none;
 +
float: right;
 +
position: relative;
 +
left: 5%;
 +
background-color: #2C3E50;
 +
-webkit-border-radius: .2em;
 +
-moz-border-radius: .2em;
 +
border-radius: .2em;
 +
}
 +
div.popup ul li a{
 +
position: relative;
 +
display: inline-block;
 +
font-size: .85em;
 +
color: #fff;
 +
padding: 0 2em 0 2em;
 +
margin: .4em;
 +
text-align: center;
 +
text-decoration: none;
 +
transition: all 0.1s ease-in-out;
 +
-webkit-border-radius: .2em;
 +
-moz-border-radius: .2em;
 +
border-radius: .2em;
 +
}
 +
div.popup ul li a:hover{
 +
background-color: #1ABC9C;
 +
}
 +
.arrow {
 +
position: absolute;
 +
top: 10%;
 +
left: -.4em;
 +
width: 0; height: 0;
 +
border-top: .5em solid transparent;
 +
border-right: .5em solid #2C3E50;
 +
border-bottom: .5em solid transparent;
}
}
</style>
</style>
</html>
</html>

Revision as of 22:40, 4 August 2014

Retrieved from "http://2014.igem.org/Team:UCLA/Template/CSS_test"