Difference between revisions of "Team:Glasgow/test"

Line 18: Line 18:
 
   height: auto;
 
   height: auto;
 
  }
 
  }
−
body {
+
*{
−
  overflow-x: hidden;
+
−
  width: 100%;
+
−
  background: #D2D2D2;
+
−
  margin: 0;
+
 
   padding: 0;
 
   padding: 0;
−
   font-family: "Arial";
+
  margin: 0;
−
   font-size: 32px;
+
   font-family: 'Lato', sans-serif;
 +
   box-sizing: border-box;
 
}
 
}
−
 
+
.float-right{
−
span.center {
+
  float: right;
−
   margin: 0 35%;
+
}
−
   width: 30%;
+
.fa{
 +
font-size: .8em;
 +
   line-height: 22px !important;
 +
}
 +
dropdown{
 +
  display: inline-block;
 +
  margin: 20px 50px;
 +
}
 +
dropdown label, dropdown ul li{
 +
  display: block;
 +
   width: 200px;
 +
  background: #ECF0F1;
 +
  padding: 15px 20px;
 +
}
 +
dropdown label:hover, dropdown ul li:hover{
 +
  background: #1ABC9C;
 +
  color: white;
 +
  cursor: pointer;
 +
}
 +
dropdown label{
 +
  color: #1ABC9C;
 +
  border-left: 4px solid #1ABC9C;
 +
  border-radius: 0 5px 0 0;
 +
  position: relative;
 +
  z-index: 2;
 +
}
 +
dropdown input{
 +
  display: none;
 +
}
 +
dropdown input ~ ul{
 +
  position: relative;
 +
  visibility: hidden;
 +
  opacity: 0;
 +
  top: -20px;
 +
  z-index: 1;
 +
}
 +
dropdown input:checked + label{
 +
  background: #1ABC9C;
 +
  color: white;
 
}
 
}
  
−
div.bar {
+
dropdown input:checked ~ ul{
−
   top: 0px;
+
   visibility: visible;
−
   position: absolute;
+
   opacity: 1;
−
   padding: 15px 0;
+
   top: 0;
−
  color: #FFFFFF;
+
−
  width: 100%;
+
−
  background: #33B5E5;
+
−
  border: 1px solid #0099CC;
+
−
  border-radius: 2px 2px 2px 2px;
+
 
}
 
}
 +
$colors: #E74C3C, #0072B5, #2C3E50;
  
−
div.close {
+
@for $i from 1 through length($colors) {
−
   z-index: 999;
+
   dropdown ul li:nth-child(#{$i}) {
−
  height: 210px;
+
    border-left: 4px solid nth($colors, $i);
−
  top: -242px;
+
    .fa{
−
 
+
      color: nth($colors, $i);
−
  position: absolute;
+
    }
−
  padding: 15px 0;
+
    &:hover {
−
  color: #33B5E5;
+
        background: nth($colors, $i);
−
  width: 100%;
+
        color: white;
−
  background: #FFFFFF;
+
      .fa{
−
  border: 1px solid rgba(0, 0, 0, 0.2);
+
        color: white;  
−
  border-radius: 2px 2px 2px 2px;
+
      }
−
  box-shadow: 0 2px 10px rgba(0,0,0,.2); 
+
     }
−
 
+
   }
−
  transition: top 0.2s ease-out;
+
−
  -moz-transition: top 0.2s ease-out;
+
−
  -o-transition: top 0.2s ease-out;      
+
−
   -webkit-transition: top 0.2s ease-out;
+
 
}
 
}
  
−
div.open {
+
.animate{
−
   z-index: 999;
+
   -webkit-transition: all .3s;
−
   height: 210px;
+
   -moz-transition: all .3s;
−
   top: 0px;
+
   -ms-transition: all .3s;
−
 
+
   -ms-transition: all .3s;
−
  position: absolute;
+
   transition: all .3s;   
−
  padding: 15px 0;
+
   backface-visibility:hidden;
−
  color: #33B5E5;
+
   -webkit-backface-visibility:hidden; /* Chrome and Safari */
−
  width: 100%;
+
   -moz-backface-visibility:hidden; /* Firefox */
−
  background: #FFFFFF;
+
   -ms-backface-visibility:hidden; /* Internet Explorer */
−
  border: 1px solid rgba(0, 0, 0, 0.2);
+
−
   border-radius: 2px 2px 2px 2px;
+
−
   box-shadow: 0 2px 10px rgba(0,0,0,.2);   
+
−
    
+
−
  transition: top 0.2s ease-out;
+
−
   -moz-transition: top 0.2s ease-out;  
+
−
   -o-transition: top 0.2s ease-out;    
+
−
   -webkit-transition: top 0.2s ease-out;
+
 
}
 
}
 
</style>
 
</style>
−
<script type="text/javascript">
 
−
document.getElementById('header').addEventListener('click', function(e) {
 
−
  document.getElementById('menu').className = 'open';
 
−
});
 
−
 
−
document.getElementById('menu').addEventListener('click', function(e) {
 
−
  document.getElementById('menu').className = 'close';
 
−
});
 
−
</script>
 
−
 
−
 
 
<body>
 
<body>
−
 
+
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
−
   <div id="menu" class="close">
+
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
−
     <span class="center">Boo! :)</span>
+
<dropdown>
−
  </div>
+
   <input id="toggle1" type="checkbox" checked>
−
    
+
  <label for="toggle1" class="animate">MENU<i class="fa fa-bars float-right"></i></label>
−
   <div id="header" class="bar">
+
  <ul class="animate">
−
     <span class="center">Click Me</span>
+
     <li class="animate">Code<i class="fa fa-code float-right"></i></li>
−
  </div>
+
    <li class="animate">Zoom<i class="fa fa-arrows-alt float-right"></i></li>
−
    
+
    <li class="animate">Settings<i class="fa fa-cog float-right"></i></li>
 +
   </ul>
 +
</dropdown>
 +
 
 +
<dropdown>
 +
   <input id="toggle2" type="checkbox">
 +
  <label for="toggle2" class="animate">Menu<i class="fa fa-bars float-right"></i></label>
 +
  <ul class="animate">
 +
     <li class="animate">Code<i class="fa fa-code float-right"></i></li>
 +
    <li class="animate">Zoom<i class="fa fa-arrows-alt float-right"></i></li>
 +
    <li class="animate">Settings<i class="fa fa-cog float-right"></i></li>
 +
   </ul>
 +
</dropdown>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 16:22, 23 August 2015

  • Code
  • Zoom
  • Settings
  • Code
  • Zoom
  • Settings