testtheme 0.1.1

data/_sass/materialize/materialize.scss

@@ -0,0 +1,15 @@
+@charset "UTF-8";
+
+// Mixins
+// @import "components/prefixer";
+@import "components/mixins";
+@import "components/color";
+
+// Variables;
+@import "components/variables";
+
+// components
+@import "components/global";
+@import "components/roboto";
+@import "components/buttons";
+@import "components/waves";

data/_sass/modules/_buttons.scss

@@ -0,0 +1,88 @@
+.btn, .btn-flat {
+
+  &:focus {
+    outline: 0 !important;
+  }
+
+  &.btn-istio {
+    background-color: $secondBrandColor;
+    color: $white;
+    font-weight: 300;
+    letter-spacing: 1px;
+    border-radius: 4px;
+
+    a {
+      color: $white;
+    }
+
+    // Inverse Colored Button
+    &.inverse {
+      background-color: transparent;
+      border: 2px solid $mainBrandColor;
+      border-radius: 4px;
+      color: $mainBrandColor;
+    }
+
+    &.btn-istio:hover {
+        background-color: $popBrandColor;
+    }
+
+    // Hero Button
+    &.btn-hero {
+      background-color: $white;
+      border: 2px solid $secondBrandColor;
+      border-radius: 4px;
+      color: $secondBrandColor;
+      font-weight: 500;
+      font-size: $font-size--primary;
+    }
+  }
+
+  // Floating Action Button
+  &.btn-floating {
+    background-color: $white;
+    height: 30px;
+    width: 30px;
+    z-index: $z-top;
+
+    @media (min-width: $tablet) {
+      height: 50px;
+      width: 50px;
+    }
+
+    &:hover,
+    &:focus {
+      background-color: $white;
+    }
+
+    &.down-caret {
+      bottom: -15px;
+      left: 50%;
+      padding: 0;
+      position: absolute;
+      transform: translateX(-50%);
+
+      @media (min-width: $tablet) {
+        bottom: -25px;
+      }
+    }
+  }
+}
+
+// Link Button
+.btn-link {
+  display: inline-block;
+  cursor: pointer;
+}
+
+.icon-caret {
+  background: url('../img/caret.svg') no-repeat center/cover;
+  height: 20px;
+  margin: 3px auto 0;
+  width: 24px;
+
+  @media (min-width: $tablet) {
+    height: 45px;
+    width: 45px;
+  }
+}

data/_sass/modules/_contribute-links.scss

@@ -0,0 +1,64 @@
+// Contribute links for Docs page
+.docs .contribute-links {
+  top: 16px;
+}
+
+// Contribute links for other pages
+.contribute .contribute-links {
+  top: 0;
+}
+
+// Contribute links
+.contribute-links {
+  position: absolute;
+  right: 45px;
+  top: 0;
+  display: none;
+  font-weight: 300;
+
+  @media (min-width: $tablet) {
+    display: initial;
+  }
+
+  a {
+    font-size: .85rem;
+    display: inline-block;
+    color: $gray;
+
+    &::after {
+      content: none;
+      display: none;
+    }
+
+    &:hover {
+      color: $black;
+    }
+  }
+
+  p {
+    font-size: .85rem;
+  }
+
+  .file-name {
+    font-weight: 500;
+  }
+
+  .github {
+    margin-left: 20px;
+
+    &:before {
+      content: '';
+      display: inline-block;
+      background: url('../img/github.svg') no-repeat center/cover;
+      width: 32px;
+      height: 32px;
+      vertical-align: middle;
+    }
+
+    &:hover {
+      &:before {
+         background: url('../img/github-dark.svg') no-repeat center/cover;
+      }
+    }
+  }
+}

data/_sass/modules/_doc-nav.scss

@@ -0,0 +1,111 @@
+// Bootstrap override - looks like this is missing?
+.nav-tabs>li.active>a {
+    margin-right: 2px;
+    line-height: 1.42857143;
+    border: 1px solid #ddd;
+	border-bottom-color: transparent;
+    border-radius: 4px 4px 0 0;
+}
+
+// Documentation Navigation Bar
+.doc-nav {
+  display: block;
+  margin-bottom: $spacing--xxxl;
+  margin-top: $spacing--m;
+	.doc-caret {
+		margin-right: 10px;
+		@media (min-width: $tablet) {
+			display: none;
+		}
+	}
+
+	.tab {
+		display: inline-block;
+
+		&.docs-tab a {
+            border-bottom: 2px solid $gray;
+            display: inline-block;
+            font-weight: 300;
+
+			@media (min-width: $tablet) {
+				display: none;
+			}
+		}
+
+		a {
+            border-bottom: 2px solid transparent;
+            color: $gray;
+            display: none;
+            font-size: .85rem;
+            font-weight: 400;
+            letter-spacing: 0.5px;
+            margin-right: 16px;
+
+			&:hover {
+				border-bottom: 2px solid $gray;
+			}
+
+			@media (min-width: $tablet) {
+                display: inline-block;
+                font-weight: 300;
+			}
+		}
+
+		.current {
+            border-bottom: 2px solid $gray;
+            color: $gray;
+            display: inline-block;
+
+			@media (min-width: $tablet) {
+				border-bottom: 2px solid $secondBrandColor !important;
+				color: $secondBrandColor;
+			}
+		}
+	}
+}
+
+// Documentation Side Navigation
+.doc-side-nav {
+    margin-bottom: 20px;
+
+    @media (min-width: $tablet) {
+        margin-bottom: 0;
+        padding: $spacing--xs 0 $spacing--xl;
+    }
+
+	.current {
+  		color: $popBrandColor;
+ 		font-weight: bold;
+  	}
+
+  	.doc-side-nav-title {
+		padding: $spacing--s;
+		font-weight: bold;
+	}
+
+	.doc-side-nav-list-item {
+		display: inline-block;
+		padding: 2px $spacing--s;
+		width: 100%;
+	}
+
+    a {
+        font-weight: normal;
+    }
+}
+
+.tree li {
+    padding-left: 20px;
+}
+
+.tree-toggle {
+    cursor: pointer;
+    margin-left: -1em;
+
+	.tree-toggle-link{
+		&, &:focus, &:hover{
+			color:#535f61 !important;
+			text-decoration: none;
+		}
+	}
+}

data/_sass/modules/_footer.scss

@@ -0,0 +1,114 @@
+footer {
+  background: linear-gradient(to right, $mainBrandColor, $secondBrandColor);
+  box-shadow: 0px 500px 0px 500px $footerColor;
+  color: $white;
+  overflow: hidden;
+  padding: 45px 0 50px 0;
+  position: relative;
+
+  @media (max-width: 767px) {
+    padding: 15px 0 35px;
+
+    ul {
+      &.active li {
+        display: initial;
+      }
+    }
+  }
+
+  li {
+    line-height: 1.1em;
+  }
+
+  a {
+    color: $white;
+    font-weight: 300;
+    font-size: .8em;
+    padding: 0px;
+    letter-spacing: .5px;
+    line-height: 1.1em;
+
+    &:hover {
+      text-decoration: underline;
+      color: $white;
+    }
+
+    &::after {
+      display: none;
+    }
+  }
+
+  .active {
+    display: initial;
+  }
+
+  .description {
+    padding-top: 20px;
+    color: $light-gray;
+    line-height: 1.6em;
+    font-size: 0.7em;
+  }
+
+  p.header {
+    font-weight: 400;
+    font-size: 1em;
+    letter-spacing: .5px;
+    cursor: auto;
+    padding: 10px 0;
+    position: relative;
+
+    &:after {
+      content: '';
+      background: url('../img/caret.svg') no-repeat center/cover;
+      background-size: contain;
+      height: 45px;
+      width: 35px;
+      position: absolute;
+      right: 0;
+      top: 5px;
+      cursor: pointer;
+    }
+  }
+
+  .footer-sections {
+    display: block;
+    width: 120%;
+    margin: 10px -15px;
+    background-color: rgba(234,234,234,0.1);
+    color: rgba(234,234,234,0.1);
+    border: none;
+    height: 1px;
+
+    @media (min-width: 768px) {
+      display: none;
+    }
+  }
+
+  @mixin social-icon($image-url) {
+    &::before {
+      content: '';
+      display: inline-block;
+      background: url($image-url) no-repeat center/cover;
+      width: 25px;
+      height: 25px;
+      vertical-align: middle;
+      margin: 0 15px 0 0;
+    }
+  }
+
+  .github {
+    @include social-icon('../img/github.png');
+  }
+
+  .group {
+    @include social-icon('../img/group.png');
+  }
+
+  .stack-overflow {
+    @include social-icon('../img/stackoverflow.png');
+  }
+
+  .twitter {
+    @include social-icon('../img/icon_twitter.svg');
+  }
+}

data/_sass/modules/_hero.scss

@@ -0,0 +1,34 @@
+// Background for nav and hero
+.nav-hero-container {
+    *[id]:before {
+      display: block;
+      content: " ";
+      margin-top: -1em;
+      height: 1em;
+      visibility: hidden;
+    }
+
+
+  background: $mainBrandColor linear-gradient(to right, $mainBrandColor, $secondBrandColor) no-repeat center/cover;
+  z-index: 9010;
+  position: relative;
+}
+
+// Landing page hero
+.hero {
+  position: relative;
+  text-align: center;
+
+  .logo {
+    margin-bottom: $spacing--l;
+  }
+
+  .hero-lead {
+    color: $white;
+    display: block;
+    font-size: 18px;
+    margin-top: 0;
+    margin-bottom: $spacing--l;
+    font-weight: 300;
+  }
+}

data/_sass/modules/_nav.scss

@@ -0,0 +1,83 @@
+.navbar-inverse .navbar-toggle,
+.navbar-inverse .navbar-toggle:hover,
+.navbar-inverse .navbar-toggle:focus {
+  background-color: transparent;
+  border-color: transparent !important;
+}
+
+#header-nav {
+  background: $mainBrandColor linear-gradient(to right, $mainBrandColor, $secondBrandColor) no-repeat center/cover;
+
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+@mixin underline() {
+  &:after{
+    background: $white;
+    bottom: 8px;
+    content: "";
+    height: 2px;
+    left: $spacing--xs;
+    margin: auto;
+    position: absolute;
+    right: $spacing--xs;
+  }
+}
+
+.brand-name {
+  color: $white;
+  font-weight: 300;
+  font-size: 1.7em;
+  vertical-align: bottom;
+}
+
+.navbar-brand {
+  padding: inherit;
+  line-height: inherit;
+  height: inherit;
+
+  img {
+    height: 3em;
+  }
+}  
+
+.navbar-header {
+  margin-top: 15px;
+  margin-left: 15px;
+}
+
+.nav>li>a.current {
+  @include underline()
+}
+
+.nav li a:active, .nav li a:focus, .nav li a:hover {
+  border-bottom: 0;
+}
+
+.navbar {
+  margin-bottom: 0;
+  border: none;
+  border-radius: 0;
+}
+
+.navbar-inverse .navbar-nav>li>a {
+    color: $white;
+}
+
+.navbar-inverse .navbar-nav>li>a:hover {
+    @include underline();
+}
+
+.main-nav-dropdown>li>a:hover {
+  background-color: $white;
+  color: $secondBrandColor;
+  font-weight: bold;
+}
+
+.navbar-inverse .navbar-nav>.open>a, 
+.navbar-inverse .navbar-nav>.open>a:hover, 
+.navbar-inverse .navbar-nav>.open>a:focus {
+  color: #fff !important;
+  background-color: $thirdBrandColor;
+}