Difference between revisions of "Team:SPSingapore/CSS/sidemenu"

 
Line 24: Line 24:
 
   -moz-border-radius: 3px;
 
   -moz-border-radius: 3px;
 
   border-radius: 3px;
 
   border-radius: 3px;
−
   z-index: 2;
+
   z-index:2;
 
}
 
}
 
#sidemenu a {
 
#sidemenu a {

Latest revision as of 02:03, 19 September 2015

/* Side Menu */

/* Base Styles */

  1. sidemenu,
  2. sidemenu ul,
  3. sidemenu li,
  4. sidemenu a {
 margin: 0;
 padding: 0;
 border: 0;
 list-style: none;
 font-weight: normal;
 text-decoration: none;
 line-height: 1;
 font-family: 'Open Sans', sans-serif;
 font-size: 14px;
 position: relative;

}

  1. sidemenu {
 padding-top:55px;
 width: 200px;
 border-bottom: 4px solid red;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 z-index:2;

}

  1. sidemenu a {
 line-height: 1.3;

}

  1. sidemenu > ul > li {
 background: #e94f31;
 background: -moz-linear-gradient(#e94f31 0%, #d13516 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e94f31), color-stop(100%, #d13516));
 background: -webkit-linear-gradient(#e94f31 0%, #d13516 100%);
 background: linear-gradient(#e94f31 0%, #d13516 100%);

}

  1. sidemenu > ul > li:hover {
 background: #e84323;
 background: -moz-linear-gradient(#e84323 0%, #c33115 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e84323), color-stop(100%, #c33115));
 background: -webkit-linear-gradient(#e84323 0%, #c33115 100%);
 background: linear-gradient(#e84323 0%, #c33115 100%);

}

  1. sidemenu > ul > li > a {
 font-size: 14px;
 display: block;
 background: url(images/pattern.png) top left repeat;
 color: #ffffff;
 border: 1px solid #ba2f14;
 border-top: none;
 text-shadow: 0 -1px 1px #751d0c;

}

  1. sidemenu > ul > li > a > span {
 display: block;
 padding: 12px 10px;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;

}

  1. sidemenu > ul > li > a:hover {
 text-decoration: none;

}

  1. sidemenu > ul > li.active {
 border-bottom: none;

}

  1. sidemenu > ul > li.has-sub > a span {
 background: url(images/icon_plus.png) 96% center no-repeat;

}

  1. sidemenu > ul > li.has-sub.active > a span {
 background: url(images/icon_minus.png) 96% center no-repeat;

} /* Sub menu */

  1. sidemenu ul ul {
 /*display: none;*/
 background: #fff;
 border-right: 1px solid #a2a194;
 border-left: 1px solid #a2a194;

}

  1. sidemenu ul ul li {
 padding: 0;
 border-bottom: 1px solid #d4d4d4;
 border-top: none;
   text-align:left;
 background: #f7f7f7;
 background: -moz-linear-gradient(#f7f7f7 0%, #ececec 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f7f7f7), color-stop(100%, #ececec));
 background: -webkit-linear-gradient(#f7f7f7 0%, #ececec 100%);
 background: linear-gradient(#f7f7f7 0%, #ececec 100%);

}

  1. sidemenu ul ul li:last-child {
 border-bottom: none;

}

  1. sidemenu ul ul a {
 padding: 10px 10px 10px 25px;
 display: block;
 color: #676767;
 font-size: 14px;
 font-weight: normal;

}

  1. sidemenu ul ul a:before {
 content: "»";
 position: absolute;
 left: 10px;
 color: #e94f31;

}

  1. sidemenu ul ul a:hover {
 color: #e94f31;

}