www.reboot.css.src.tabs.styl Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of iep-reboot Show documentation
iep-reboot
The newest version!
/*! tab generics
-----------------------------*/
$tab-height = 50px;

nav ul,
ul.is-subnav {
  list-style: none;
  padding: 0;
  margin: 0;
  font-weight: 300;
}

nav li a,
ul.is-subnav a {
  display: block;
  height: 100%;
  padding: 0 20px;
}

nav li a,
nav ul a:hover,
ul.is-subnav a,
ul.is-subnav a:hover {
  text-decoration: none;
}

nav li,
ul.is-subnav li {
  position: relative;
  float: left;
  font-size: 17px;
  text-align: center;
  line-height: $tab-height;
  box-sizing: border-box;
  height: 100%;
  -webkit-transition: background-color 0.2s ease;
  -moz-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}

nav li,
ul.is-subnav li {
  padding: 0;
  cursor: pointer;
}


/*! nav bar
-----------------------------*/
nav {
  height: $tab-height;
  background-color: #5b5b5b;
}

nav ul {
  display: block;
  height: 100%;
}

nav li {
  color: #fff;
}

nav li.is-selected::after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: #fff;
}

nav li a {
  color: #fff;
}

nav .logo {
  text-transform: uppercase;
  font-size: 23px;
  letter-spacing: 1px;
  padding: 0 20px;
  margin-left: 5px;
  cursor: default;
}

nav .logo img {
  width: 35px;
  height: 35px;
  position: relative;
  top: 9px;
  margin-right: -5px;
}

nav li:hover:not(.logo) {
  background-color: #a6a6a6;
}


/*! subnav
-----------------------------*/
ul.is-subnav {
  display: inline-block;
  height: $tab-height;
  color: #477fc5;
  vertical-align bottom;
}

ul.is-subnav li {
  font-size: 14px;
  font-weight: 500;
}

ul.is-subnav li.is-selected::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: #477fc5;
}

ul.is-subnav li,
ul.is-subnav a {
    text-transform: uppercase;
}