Difference between revisions of "Team:Glasgow/test"

Line 18: Line 18:
 
   height: auto;
 
   height: auto;
 
  }
 
  }
−
*{
+
body {
−
  padding: 0;
+
    background-color: #313233;
−
  margin: 0;
+
    font-family: arial, san-serif;
−
  font-family: 'Lato', sans-serif;
+
−
  box-sizing: border-box;
+
 
}
 
}
−
.float-right{
+
nav {
−
  float: right;
+
    width: 300px;
 +
    margin:0 auto;
 +
    margin-top:50px
 
}
 
}
−
.fa{
+
.menu {
−
font-size: .8em;
+
    /* height:70px; */
−
  line-height: 22px !important;
+
    background-color: #ff782e;
 +
    border-radius:10px;   
 +
    color:#fff;
 +
    display:block;
 +
    position: relative;
 +
    font-size: 20px;
 +
    padding:20px;
 +
-webkit-transition: 300ms ease;
 +
-moz-transition: 300ms ease;
 +
-o-transition: 300ms ease;
 +
-ms-transition: 300ms ease;
 +
transition: 300ms ease;
 +
    border-bottom: 3px solid #cc6025;
 
}
 
}
−
dropdown{
+
 
−
  display: inline-block;
+
.dropdownIcon {      
−
  margin: 20px 50px;  
+
    display: block;
 +
    width:24px;
 +
    margin-top:2px;
 +
    /* position: absolute;
 +
    right:0; */
 +
    float:right;
 
}
 
}
−
dropdown label, dropdown ul li{
+
.dropdownIcon span {
−
  display: block;
+
    width:24px;
−
  width: 200px;
+
    height:4px;
−
  background: #ECF0F1;
+
    border-radius:3px;
−
  padding: 15px 20px;
+
    color:#fff;
 +
    display:block;
 +
    background: white;
 +
    margin:2px
 
}
 
}
−
dropdown label:hover, dropdown ul li:hover{
+
 
−
  background: #1ABC9C;
+
nav:hover .menu{
−
  color: white;
+
    cursor:pointer;
−
  cursor: pointer;
+
    background: #ff853a;  
 
}
 
}
−
dropdown label{
+
 
−
  color: #1ABC9C;
+
.menu:hover .dropdownIcon span{
−
  border-left: 4px solid #1ABC9C;
+
    -webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.3);
−
  border-radius: 0 5px 0 0;  
+
    -moz-box-shadow:   0px 3px 5px 0px rgba(50, 50, 50, 0.3);
−
  position: relative;
+
    box-shadow:         0px 3px 5px 0px rgba(50, 50, 50, 0.3);
−
  z-index: 2;
+
 
}
 
}
−
dropdown input{
+
 
−
  display: none;
+
.dropDown {
 +
    background: #f0f0f0;
 +
    border-radius: 10px;
 +
    text-align: center;
 +
    margin:0;
 +
    padding:0;
 +
    list-style:none;
 +
    position: relative;
 +
    margin-top:20px;
 +
    display:none;
 +
   
 
}
 
}
−
dropdown input ~ ul{
+
 
−
  position: relative;
+
.dropDown:before {
−
  visibility: hidden;
+
    content: "";
−
  opacity: 0;
+
    position:absolute;
−
  top: -20px;
+
    border: 15px solid #f0f0f0;
−
  z-index: 1;
+
    border-top: 0 solid transparent!important;
 +
    border-right: 15px solid transparent!important;
 +
    border-left: 15px solid transparent!important;
 +
    right:10px;
 +
    top:-15px
 
}
 
}
−
dropdown input:checked + label{
+
 
−
  background: #1ABC9C;
+
.dropDown a {
−
  color: white;
+
  color: #494b4d;
 +
  text-decoration: none;
 +
    display:block;
 +
    padding:20px 0;
 +
    font-weight:700;
 +
    font-size:16px
 
}
 
}
  
−
dropdown input:checked ~ ul{
+
.dropDown li:nth-child(even) a {
−
  visibility: visible;
+
    background:#ebebeb
−
  opacity: 1;
+
−
  top: 0;
+
 
}
 
}
−
$colors: #E74C3C, #0072B5, #2C3E50;
 
  
−
@for $i from 1 through length($colors) {
+
/*nav:hover .dropDown{
−
  dropdown ul li:nth-child(#{$i}) {
+
     display:block;
−
     border-left: 4px solid nth($colors, $i);
+
}*/
−
    .fa{
+
 
−
      color: nth($colors, $i);
+
.credit {
−
    }
+
  position:absolute;
−
    &:hover {
+
  bottom:0;
−
        background: nth($colors, $i);
+
  color:#aaa;
−
        color: white;
+
  font-size:12px;
−
      .fa{
+
−
        color: white;  
+
−
      }
+
−
    }
+
−
  }
+
 
}
 
}
  
−
.animate{
+
.credit a {
−
   -webkit-transition: all .3s;
+
   color: #eee;
−
  -moz-transition: all .3s;
+
−
  -ms-transition: all .3s;
+
−
  -ms-transition: all .3s;
+
−
  transition: all .3s; 
+
−
  backface-visibility:hidden;
+
−
  -webkit-backface-visibility:hidden; /* Chrome and Safari */
+
−
  -moz-backface-visibility:hidden; /* Firefox */
+
−
  -ms-backface-visibility:hidden; /* Internet Explorer */
+
 
}
 
}
 
</style>
 
</style>
−
<body>
 
−
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
 
−
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
 
  
 +
<body>
 +
<nav>
 +
    <div class="menu">
 +
        <span>Menu</span>
 +
        <div class="dropdownIcon">
 +
            <span></span>
 +
            <span></span>
 +
            <span></span>
 +
        </div>
 +
    </div>
 +
    <ul class="dropDown">
 +
        <li><a href="#">Menu Item 1</a></li>
 +
        <li><a href="#">Menu Item 2</a></li>
 +
        <li><a href="#">Menu Item 3</a></li>
 +
    </ul>
 +
</nav>
  
−
<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:31, 23 August 2015