linaro-jekyll-theme 0.2.0.1 → 0.2.1

data/assets/css/core/nav.scss

@@ -0,0 +1,536 @@
+//Navbar links colours, font and fadeinout animations.
+nav{
+    letter-spacing: 1px;
+}
+nav ul.dropdown-menu {
+    min-width: 260px;
+}
+nav li a {
+    font-size: 16px;
+    font-weight: 300;
+}
+nav .dropdown-menu li a {
+    padding: 10px 20px;
+    font-size: 14px;
+    font-weight: 300;
+
+}
+nav .dropdown-menu li a:hover{
+    transition: color .5s ease;
+   -moz-transition: color .5s ease;
+   -webkit-transition: color .5s ease;
+}
+nav li a:hover{
+    transition: color .5s ease;
+   -moz-transition: color .5s ease;
+   -webkit-transition: color .5s ease;
+}
+
+//By default hide the complete search form and then load it using jQuery.
+#searchform {
+    display: none;
+    min-width: 37px;
+}
+
+#brand-image {
+    @media (min-width: 1200px){
+        height:70px;
+        width:auto;
+    }
+    @media (max-width: 1199px){
+        height:50px;
+        width:auto;
+    }
+
+}
+
+//Navbar brand padding.
+.navbar-brand {
+    @media (min-width: 1200px){
+        padding-top: 5px;
+        padding-bottom: 5px;
+    }
+    @media (max-width: 1199px){
+        padding-top: 15px;
+        padding-bottom: 15px;
+        padding-left: 10px;
+    }
+}
+
+@media screen and (max-width: 1200px) and (min-width: 0px) {
+    #searchform > div > input.form-control{
+        width:100%;
+    }
+    #searchform{
+        margin-bottom: 20px;
+    }
+    #navbar-collapse {
+        padding-top:5px;
+    }
+    #navbar-buttons{
+        margin-top: -10px;
+    }
+    button.navbar-toggle {
+        margin-right: 10px;
+    }
+    #searchform button.btn.btn-default {
+        height: 45px;
+    }
+
+    .navbar-collapse form[role="search"]{
+        margin-bottom:10px;
+    }
+}
+
+.navbar-collapse {
+    position: relative;
+    padding-top: 30px;
+    max-height: 270px;
+}
+.navbar-collapse form[role="search"] {
+    top: 0px;
+    right: 0px;
+    width: 100%;
+    padding: 0px;
+    margin: 0px;
+    z-index: 0;
+}
+.navbar-collapse form[role="search"] button,
+.navbar-collapse form[role="search"] input {
+    padding: 8px 12px;
+    border-radius: 0px;
+    border-width: 0px;
+    color: #FFF;
+    border-color: rgb(231, 231, 231);
+    box-shadow: none;
+    outline: none;
+}
+ .navbar-collapse form[role="search"] button[type="reset"]:focus {outline:0;background-color: transparent}
+ .navbar-collapse form[role="search"] button[type="reset"]:active {outline:0;background-color: transparent}
+ .navbar-collapse form[role="search"] button[type="submit"]:focus {outline:0;background-color: transparent}
+ .navbar-collapse form[role="search"] button[type="submit"]:active {outline:0;background-color: transparent}
+ .navbar-collapse form[role="search"] button[type="submit"] {
+    background-color: transparent;
+}
+ .navbar-collapse form[role="search"] button[type="submit"]:hover {
+    display: table-cell;
+    color: $brand-primary;
+    transition: color .5s ease;
+   -moz-transition: color .5s ease;
+   -webkit-transition: color .5s ease;
+}
+ .navbar-collapse form[role="search"] input {
+    padding: 16px 12px;
+    font-size: 14pt;
+    font-style: normal;
+    color: rgb(160, 160, 160);
+    box-shadow: none;
+    background-color: $gray-darker;
+}
+
+@media (min-width: 1200px) {
+
+     .navbar-collapse {
+        padding-top: 0px;
+        padding-right: 38px;
+        margin-right: -40px !important;
+        margin-left: -15px !important;
+
+    }
+     ul.dropdown-menu {
+        margin-top: -1px !important;
+    }
+     .navbar-collapse form[role="search"] {
+        position: absolute;
+        min-width: 50px;
+        display: block;
+    }
+     .navbar-collapse form[role="search"] button {
+        margin-right: 0;
+        min-width: 90px;
+    }
+     .navbar-collapse form[role="search"] button[type="submit"]:hover {
+        color: $brand-primary;
+        transition: color .5s ease;
+       -moz-transition: color .5s ease;
+       -webkit-transition: color .5s ease;
+    }
+     .navbar-collapse form[role="search"] button,
+     .navbar-collapse form[role="search"] input {
+        height:51px;
+        padding: 15px 12px;
+    }
+     .navbar-collapse form[role="search"] input {
+        padding: 25px 12px;
+        font-size: 18pt;
+        opacity: 0;
+        display: none;
+    }
+     .navbar-collapse form[role="search"].active {
+        width: 100%;
+        transition: width 2s ease;
+       -moz-transition: width 2s ease;
+       -webkit-transition: width 2s ease;
+    }
+     .navbar-collapse form[role="search"].active button,
+     .navbar-collapse form[role="search"].active input {
+        display: table-cell;
+        opacity: 1;
+    }
+     .navbar-collapse form[role="search"].active input {
+        width: 650px;
+        height: 51px;
+        text-align: right;
+        transition: width 1s ease;
+        -moz-transition: width 1s ease;
+        -webkit-transition: width 1s ease;
+    }
+     .navbar-collapse form[role="search"].active button[type="submit"] {
+        background-color: transparent;
+    }
+     .navbar-collapse form[role="search"].active button[type="reset"] {
+        min-width: 40px;
+        background-color: $gray-darker;
+        display: table-cell;
+    }
+     .navbar-collapse form[role="search"].active button[type="submit"]:hover {
+        display: table-cell;
+        color: $brand-primary;
+        transition: color .5s ease;
+       -moz-transition: color .5s ease;
+       -webkit-transition: color .5s ease;
+    }
+     .navbar-collapse form[role="search"].active button[type="reset"]:hover {
+        display: table-cell;
+        color: $brand-primary;
+        transition: color .5s ease;
+       -moz-transition: color .5s ease;
+       -webkit-transition: color .5s ease;
+    }
+     form#searchform {
+        width: auto;
+        margin-top: 13px;
+    }
+     nav form[role="search"] #searchform  input {
+        height:51px;
+        width: 600px;
+    }
+    #navbar-buttons {
+        margin-right: 40px;
+    }
+
+
+
+    #navbar-collapse {
+        width: 80%;
+        float: right;
+    }
+
+}
+
+/// Make the bootstrap nav bar work without javascript.
+//Toggle
+#navbar-toggle-cbox:checked ~ .navbar-collapse {
+    display: block;
+}
+
+#navbar-toggle-cbox {
+  display:none
+}
+nav#main-navigation label[for="navbar-toggle-cbox"]{
+    left:3px;
+}
+
+//Dropdowns
+.no-js-navbar .dropdown-menu .sub-menu {
+    left: 100%;
+    position: absolute;
+    top: 0;
+    visibility: hidden;
+    margin-top: -1px;
+}
+
+.no-js-navbar .dropdown-menu li:hover .sub-menu {
+    visibility: visible;
+}
+
+.no-js-navbar .dropdown:hover .dropdown-menu {
+    display: block;
+}
+
+.no-js-navbar .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
+    margin-top: 0;
+}
+
+.no-js-navbar .navbar .sub-menu:before {
+    border-bottom: 7px solid transparent;
+    border-left: none;
+    border-right: 7px solid rgba(0, 0, 0, 0.2);
+    border-top: 7px solid transparent;
+    left: -7px;
+    top: 10px;
+}
+.no-js-navbar .navbar .sub-menu:after {
+    border-top: 6px solid transparent;
+    border-left: none;
+    border-right: 6px solid #fff;
+    border-bottom: 6px solid transparent;
+    left: 10px;
+    top: 11px;
+    left: -6px;
+}
+
+
+
+.no-js-navbar .navbar-form input, .form-inline input {
+	width:auto;
+}
+
+ .input-group-btn {
+    min-width: 50px;
+}
+
+
+
+nav > li {
+    font-size: 14px;
+}
+nav > li.active > a,
+nav > li.active > a:focus,
+nav > li.active > a:hover {
+    border-width: 0;
+}
+nav > li.active > a,
+nav > li > a:hover {
+    border: none;
+}
+
+nav  > li > a
+{
+    /* adjust padding for height*/
+    padding-top: 4px;
+    padding-bottom: 4px;
+}
+
+nav > li > a::after {
+    content: "";
+    height: 2px;
+    position: absolute;
+    width: 100%;
+    left: 0px;
+    bottom: -1px;
+    transition: all 250ms ease 0s;
+    transform: scale(0);
+}
+
+nav > li.active > a::after,
+nav > li:hover > a::after {
+    transform: scale(1);
+}
+
+nav > ul.navbar-right {
+    min-width: 620px;
+}
+
+//Search Dropdown
+
+@media (min-width: 1200px) {
+    #searchDropdown {
+        top: 16%;
+        min-width: 234px;
+        width:781px;
+        font-size:16px;
+        background-color: #222222;
+        right: -2px;
+    }
+    #searchDropdown input {
+        width: 675px;
+        text-align: right;
+        color: #CCC;
+        background-color: #222222;
+        outline:0;
+        border:0;
+
+    }
+    #searchDropdown input:focus{
+        outline:0;
+        border:0
+    }
+    #searchDropdown button[type="reset"]{
+        font-size:16px;
+        background-color: #222222;
+        border:0;
+    }
+    #searchDropdown button[type="reset"]:hover{
+        color: $brand-primary;
+        transition: color 1s ease;
+    }
+
+    #searchDropdown button[type="submit"]{
+        font-size:16px;
+        background-color: #222222;
+        border:0;
+    }
+    #searchDropdown button[type="submit"]:hover{
+        color: $brand-primary;
+        transition: color 1s ease;
+    }
+
+}
+
+#tabbed-nav-bar {
+    background-color:white;
+    padding-bottom:10px;
+    height:80px;
+}
+#tabbed-nav-bar .navbar-toggle{
+    color:$brand-primary !important;
+}
+
+#tabbed-nav-bar .collapse{
+    margin-bottom:-1px;
+    z-index: 1;
+}
+
+
+
+.sticky-nav {
+    position: fixed;
+    top: 0;
+    z-index: 1000;
+    left: 0;
+    right: 0;
+    transition: all 1s ease;
+}
+
+@media(max-width:1200px){
+    #tabbed-nav-bar .tabbed-nav-btn{
+        width:100%;
+    }
+    #sub-navigation-header {
+        font-size: 14px;
+    }
+    #tabbed-nav-bar .nav-tabs{
+        background-color: $gray-darker;
+        margin-top: -25px;
+        margin-bottom: 20px;
+    }
+    #tabbed-nav-bar .nav-tabs>li>a::after {
+        background: transparent;
+    }
+    #tabbed-nav-bar .nav-tabs>li>a {
+        color: white;
+    }
+    #tabbed-nav-bar .nav-tabs>li>a:hover {
+        color: $brand-primary;
+    }
+
+    #tabbed-nav-bar .nav-tabs>li.active>a,
+     #tabbed-nav-bar .nav-tabs>li.active>a:hover,
+      #tabbed-nav-bar .nav-tabs>li.active>a:focus {
+        color: $brand-primary;
+        background-color: transparent;
+        cursor: default;
+    }
+
+    #tabbed-nav-bar {
+        z-index:10000;
+    }
+}
+
+#sub-navigation-header{
+    display:none;
+    height:100%;
+    line-height: 50px;
+}
+
+
+// Tabbed Nav bar
+/*  -------- Tabbed Content Sections ------- */
+.tab-pane {
+    background-color: white;
+    margin-top: -20px;
+    padding: 21px;
+    overflow: hidden;
+}
+.tab-content {
+    margin-top: 20px;
+}
+.nav-tabs > li {
+    font-size: 14px;
+}
+.nav-tabs > li.active > a,
+.nav-tabs > li.active > a:focus,
+.nav-tabs > li.active > a:hover {
+    border-width: 0;
+}
+.nav-tabs > li > a {
+
+    border: none;
+    line-height:40px; //Set the line height to change the size of the tabs.
+    font-size: 18px;
+}
+.nav-tabs > li.active > a,
+.nav-tabs > li > a:hover {
+    border: none;
+}
+
+.nav-tabs > li > a
+{
+    /* adjust padding for height*/
+    padding-top: 4px;
+    padding-bottom: 4px;
+}
+
+.nav-tabs > li > a::after {
+    content: "";
+    height: 2px;
+    position: absolute;
+    width: 100%;
+    left: 0px;
+    bottom: -1px;
+    transition: all 250ms ease 0s;
+    transform: scale(0);
+}
+
+.nav-tabs > li.active > a::after,
+.nav-tabs > li:hover > a::after {
+    transform: scaleY(2);
+}
+
+.tab-row-faq > li {
+    height:20px ;
+}
+
+.nav-tabs {
+    border-bottom: 2px solid $gray;
+    margin-top: 31px;
+    font-weight: 700;
+}
+.nav-tabs > li > a {
+    color: $gray-darker;
+}
+
+.nav-tabs > li.active > a,
+.nav-tabs > li > a:hover {
+    color: black;
+    background: transparent;
+}
+.nav-tabs > li > a::after {
+    background: $brand-primary;
+}
+.tab-nav > li > a::after {
+    background: $brand-primary none repeat scroll 0% 0%;
+    color: #fff;
+}
+
+
+@media (min-width: 1200px) {
+    #tabbed-nav-bar .nav-tabs {
+        margin-top: 18px;
+    }
+}
+
+.tab-pane-legal{
+    padding:0px;
+}