Difference between revisions of "Team:SDU-Denmark/navbar/css"

Line 26: Line 26:
  
 
span.highlighted.active {
 
span.highlighted.active {
  background-color:red;
+
  background-color:#FF0;
 
}
 
}
  

Revision as of 09:19, 30 August 2017

.col-sm-6 {

 height:1500px;
 background:#eee;

}


  1. editorsHighlights {
 height: 40px;
 border: solid 1px rgba(0,0,0,0.3);
 border-radius: 5%;
 margin-left: 80px;
 margin-top: 10px;
 width: 130px;

}

  1. editorsHighlightsInner {

text-align: center; vertical-align: middle; line-height: 40px; margin:0px auto; }

  1. editorsHighlightsInner em {
background-color: rgba(255,255,0,0.4);

}

span.highlighted.active {

background-color:#FF0;

}

/**************************START OF NAVBAR***********************/ a {

 text-decoration: none !important;

}

  1. navbar {
 position:fixed;
 left:0;
 top:16px;
 right:0;
 height:72px;
 overflow:hidden;
 background: rgba(248,248,248,.99);
 z-index:2;
 box-shadow:0 1px 0 rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);

}


.nav-tabs > li, .nav-pills > li {

   float:none;
   display:inline-block;
   *display:inline; /* ie7 fix */
    zoom:1; /* hasLayout ie7 trigger */
   margin-bottom: -10px;

}

.nav-tabs, .nav-pills {

   text-align:center;

}


.nav-tabs > li > a {

 font-size:16px;

}

.nav-tabs > #navbarPresentation> a {

 color:#37606E;

}

.nav-tabs > #navbarIntroduction> a {

 color:#547983;

}

.nav-tabs > #navbarProject> a {

 color:#376A2F;

}

.nav-tabs > #navbarProcedures> a {

 color:#689C43;

}

.nav-tabs > #navbarPractices> a {

 color:#A8883D;

}

.nav-tabs > #navbarProspects> a {

 color:#CFB26E;

}


.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {

 color: #556E3F;
 cursor: default;
 background-color: rgb(248, 248, 248);
 border: 1px solid #ddd;
 border-bottom-color: transparent;
 height: 38px;

}

.nav > li > a:hover, .nav > li > a:focus {

   text-decoration: none;
   background-color: #eee;
   height: 38px;

}


.nav > li > a {

   padding: 8px 15px 15px 15px;

}


a.anchor {

 display:block;
 position:relative;
 top:-60px;
 visibility:hidden;

}



/***********SUBNAVBAR*********/


  1. menu1 h5 {
color: #37606E;

}

  1. menu2 h5 {
color: #547983;

}

  1. menu3 h5 {
color: #376A2F;

}

  1. menu4 h5 {
color: #689C43;

}

  1. menu5 h5 {
color: #A8883D;

}

  1. menu6 h5 {
color: #CFB26E;

}

a:hover h5 {

color: #73918A;

}


.navbar-nav {

   width: 100%;
   text-align: center;

}


.nav-item.nav-link {

   display: inline-block;
   padding-right: 20px;
   padding-left: 20px;

}

.navbar-nav a:hover {

   background-color: #eee;
   padding-top: 1px;
   margin-top: -2px;
   border-radius: 0px 0px 5px 5px;

}


.anchorMargin {

 padding-top:80px;
 margin-top:-80px;

}

.nav-item.nav-link.active {

   text-decoration: underline !important;

}


/**************************END OF NAVBAR***********************/


/**********************PROGRESS BAR************************/

.progressContainer {

 width:75%;
 height: 1px;
 position: absolute;
 margin-bottom: 0px;
 overflow: hidden;
 background-color: rgba(200,200,200,.5);
 content: "";
 display: table;
 table-layout: fixed;
 z-index:1000;
 left:12%;
 bottom:30%;

}


.active .progressContainer {

 position: absolute;
 left:12%;
 bottom:14%;

}

.nav > li > a:hover + .progressContainer {

 position: absolute;
 left:12%;
 bottom: 14%;

}


.progressBar1 {

 width: 0%;
 float: left;
 height: 1px;
 z-index:99;
 max-width: 100%;
 background-color:#76925E;
 -webkit-transition: width .0s ease;
 -o-transition: width .0s ease;
 transition: width .0s ease;

}

.progressBar2 {

 width: 0%;
 float: left;
 height: 1px;
 z-index:99;
 max-width: 100%;
 background-color:#76925E;
 -webkit-transition: width .0s ease;
 -o-transition: width .0s ease;
 transition: width .0s ease;

}

.progressBar3 {

 width: 0%;
 float: left;
 height: 1px;
 z-index:99;
 max-width: 100%;
 background-color:#76925E;
 -webkit-transition: width .0s ease;
 -o-transition: width .0s ease;
 transition: width .0s ease;

}

.progressBar4 {

 width: 0%;
 float: left;
 height: 1px;
 z-index:99;
 max-width: 100%;
 background-color:#76925E;
 -webkit-transition: width .0s ease;
 -o-transition: width .0s ease;
 transition: width .0s ease;

}

.progressBar5 {

 width: 0%;
 float: left;
 height: 1px;
 z-index:99;
 max-width: 100%;
 background-color:#76925E;
 -webkit-transition: width .0s ease;
 -o-transition: width .0s ease;
 transition: width .0s ease;

}

.progressBar6 {

 width: 0%;
 float: left;
 height: 1px;
 z-index:99;
 max-width: 100%;
 background-color:#76925E;
 -webkit-transition: width .0s ease;
 -o-transition: width .0s ease;
 transition: width .0s ease;

}