Merge branch 'master' of https://github.com/mattermost/platform

5 files changed, 208 insertions, 77 deletions

diff --git a/web/sass-files/sass/partials/_activity-log.scss b/web/sass-files/sass/partials/_activity-log.scss
index 36eb48750..3f0c3090d 100644
--- a/web/sass-files/sass/partials/_activity-log.scss
+++ b/web/sass-files/sass/partials/_activity-log.scss
@@ -28,4 +28,7 @@
     .report__info {
         color: #999;
     }
+}
+.session-help-text {
+    padding: 20px 20px 5px 20px;
 }
\ No newline at end of file
diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss
index 687e330a6..2c5f845d2 100644
--- a/web/sass-files/sass/partials/_headers.scss
+++ b/web/sass-files/sass/partials/_headers.scss
@@ -84,8 +84,31 @@
 // Team Header in Sidebar
 .sidebar--left, .sidebar--menu {
 	.team__header {
-		padding: 10px;
+		position: relative;
 		@include legacy-pie-clearfix;
+		&:before {
+			@include single-transition(all, 0.05s, linear);
+			content: "";
+			background: none;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			position: absolute;
+		}
+		&:hover {
+			&:before {
+				background: rgba(black, 0.05);
+			}
+			.user__name {
+				color: #fff;
+			}
+			.navbar-right {
+				.dropdown-toggle {
+					@include opacity(1);
+				}
+			}
+		}
 		a {
 			color: #fff;
 		}
@@ -94,12 +117,11 @@
 			position: absolute;
 			top: 10px;
 			right: 22px;
+			z-index: 5;
 			.dropdown-toggle {
+				@include single-transition(all, 0.1s, linear);
 				padding: 10px;
 				@include opacity(0.8);
-				&:hover {
-					@include opacity(1);
-				}
 			}
 			.dropdown-menu {
 				li a {
@@ -123,7 +145,9 @@
 		}
 		.header__info {
 			color: #fff;
-			padding-left: 4px;
+			padding: 10px 10px 10px 14px;
+			z-index: 1;
+			position: relative;
 		}
 		.team__name, .user__name {
 			display: block;
@@ -137,9 +161,11 @@
 			text-decoration: none;
 		}
 		.user__name {
+			@include single-transition(all, 0.1s, linear);
 			font-size: 14px;
 			font-weight: 400;
 			color: #eee;
+			color: rgba(#fff, 0.8);
 		}
 		> .nav {
 			> li {
@@ -250,10 +276,10 @@
 	vertical-align: top;
 	display: inline-block;
 	width: 15px;
-	margin: 9px 4px 3px 0;
+	margin: 9px 6px 3px 0;
 	&:hover {
 		svg {
-			fill: #888;
+			fill: #777;
 		}
 	}
 	a {
@@ -263,6 +289,6 @@
 	svg {
 		vertical-align: top;
 		margin-top: 8px;
-		fill: #AAA;
+		fill: #aaa;
 	}
 }
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index 2d78cf242..f3f9cd477 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -426,13 +426,15 @@
     }
     body {
         &.white {
-            .row.content {
+            .inner__wrap {
+            >.row.content {
                 margin-bottom: -185px;
             }
+            }
         }
     }
     .footer, .footer-pane, .footer-push {
-        height: auto;
+        height: 187px;
     }
     .footer-pane {
         .footer-link {
@@ -446,28 +448,39 @@
         }
     }
     .search-bar__container {
-        padding: 10px 8px 13px;
+        padding: 0;
+        height: 45px;
         background: $primary-color;
         color: #fff;
+        &.focused {
+            .sidebar__collapse {
+                @include translateX(-45px);
+            }
+            .search__form {
+                padding-left: 10px;
+                padding-right: 67px;
+            }
+            .search__clear {
+                display: block;
+            }
+        }
         .search__form {
             border: none;
-            padding: 0 60px 0 35px;
+            padding: 7px 20px 0 45px;
+            height: 45px;
+            position: relative;
+            @include single-transition(all, 0.2s, linear);
             .form-control {
-                line-height: normal;
-                background: none;
+                border: none;
+                padding: 0 10px 0 31px;
+                background: rgba(black, 0.2);
+                @include border-radius(3px);
                 color: #fff;
-                border-radius: 0;
-                padding: 0;
-                border-bottom: 1px solid #FFF;
-                border-bottom: 1px solid rgba(#fff, 0.4);
-                &:focus {
-                    border-bottom: 1px solid rgba(#fff, 0.8);
-                }
             }
             input[type=text] {
-                    @include input-placeholder {
+                @include input-placeholder {
                     color: #fff;
-                    color: rgba(#fff, 0.6);
+                    color: rgba(#fff, 0.5);
                 }
             }
         }
@@ -548,11 +561,6 @@
         .sidebar--right__close {
             display: none;
         }
-        .search__form {
-            .glyphicon {
-                color: #fff;
-            }
-        }
     }
     .inner__wrap {
         &.move--right {
@@ -648,7 +656,7 @@
             display: block;
         }
         .access__report {
-              margin: 0 0 15px 15px;
+            margin: 0 0 15px 15px;
         }
         .access__date {
             div {
diff --git a/web/sass-files/sass/partials/_search.scss b/web/sass-files/sass/partials/_search.scss
index 794358320..0d005bfe2 100644
--- a/web/sass-files/sass/partials/_search.scss
+++ b/web/sass-files/sass/partials/_search.scss
@@ -1,23 +1,37 @@
 .search-bar__container {
 	padding: 8px 8px 8px 0;
 }
-.sidebar__collapse {
-	width: auto;
-	height: auto;
+.search__clear {
+	display: none;
 	position: absolute;
-	top: 1px;
-	right: 15px;
+	right: 0;
+	line-height: 45px;
+	margin-right: 13px;
+	z-index: 5;
+	cursor: pointer;
+}
+.sidebar__collapse {
 	cursor: pointer;
-	padding: 1em 0;
 	z-index: 5;
+	fill: #FFF;
+	position: absolute;
+	left: 0;
+	font-size: 33px;
+	width: 45px;
+	@include single-transition(all, 0.2s, linear);
+	@include translateX(0px);
+	text-align: center;
+	padding-right: 2px;
+	line-height: 42px;
 	display: none;
 }
 .sidebar__search-icon {
 	position: absolute;
-	left: 15px;
-	top: 18px;
-	font-size: 16px;
-	@include opacity(0.8);
+	top: 15px;
+	margin-left: 10px;
+	font-size: 14px;
+	color: #fff;
+	color: rgba(#fff, 0.5);
 	display: none;
 }
 .search__form {
@@ -30,9 +44,8 @@
 	.sidebar--right & {
 		width: 100%;
 	}
-	.search-bar-box {
+	.search-bar {
 		height: 40px;
-		border: 1px solid #ddd;
 		padding-right: 30px;
 		box-shadow: none;
 		.search-bar__container & {
diff --git a/web/sass-files/sass/partials/_signup.scss b/web/sass-files/sass/partials/_signup.scss
index 5996306d2..4b6ee79a1 100644
--- a/web/sass-files/sass/partials/_signup.scss
+++ b/web/sass-files/sass/partials/_signup.scss
@@ -9,65 +9,108 @@
     max-width: 380px;
     margin: 0 auto;
     position: relative;
+    &.padding--less {
+        padding-top: 50px;
+    }
+
     h1, h2, h3, h4, h5, h6, p {
         line-height: 1.3;
     }
+
+    h1 {
+        font-weight: 600;
+    }
+
     h2 {
         font-weight: 600;
-        margin-bottom: 0.5em;
+        margin-bottom: 0.8em;
         letter-spacing: -0.5px;
         font-size: em(30px);
     }
+
     h3 {
         font-weight: 600;
         margin: 0 0 1.3em 0;
         font-size: 1.5em;
-        &.extra-margin {
-            margin-bottom: 2.5em;
-        }
     }
+
     h4 {
         font-size: em(20px);
         font-weight: 600;
         margin-bottom: 1em;
-        &.text--light {
-            font-weight: 300;
-            color: #999;
-        }
     }
+
+    h5 {
+        font-size: em(16px);
+    }
+
+    hr {
+        margin: 2em 0;
+    }
+
     p {
         color: #555;
         line-height: 1.5;
         margin-bottom: 1em;
-        .black, &.black {
-            color: #000;
-        }
     }
+
+    .inner__content {
+        padding: 0 15px;
+        margin: 30px 0 20px;
+    }
+
+    .block--gray {
+        background: #f2f2f2;
+        display: inline-block;
+        padding: 0.85em 1.2em;
+        font-weight: 600;
+        @include border-radius(3px);
+    }
+
     form {
         margin-bottom: 0.8em;
     }
+
     .form__hint {
         font-size: 0.95em;
         color: #999;
-        margin: 10px 0;
+        margin: 10px 0 0;
+    }
+
+    .signup-team-confirm__container {
+        padding: 100px 0px 100px 0px;
+    }
+
+    .signup-team-logo {
+        display: none;
+        width: 210px;
+        margin: 0 0 2em 0;
     }
-    .external-link {
-        position: absolute;
-        bottom: 0;
-        left: 0;
+
+    .signup-team-login {
+        padding-bottom: 10px;
+        font-weight: 700;
     }
+
     .signup-team__name {
+        margin: 0.5em 0 0;
         font-size: 2.2em;
         font-weight: 600;
-        text-transform: uppercase;
+        padding-left: 1rem;
     }
+
     .signup-team__subdomain {
+        margin: 0.2em 0 1.2em;
         font-size: 1.5em;
-        padding-left: 1em;
+        padding-left: 1rem;
+        font-weight: 300;
+        text-transform: uppercase;
     }
+
     .form-control {
         height: em(38px);
     }
+
     .or__container {
         height: 1px;
         background: #dddddd;
@@ -84,6 +127,12 @@
             display: inline-block;
         }
     }
+
+    ul {
+        margin-bottom: 0;
+        padding-left: 18px;
+    }
+
     .btn {
         padding: em(7px) em(15px);
         font-weight: 600;
@@ -121,8 +170,8 @@
         }
         .glyphicon {
             &.glyphicon-ok, &.glyphicon-refresh {
-                margin-right: 0.3em;
-                left: -5px;
+                margin-right: 0.5em;
+                left: -2px;
                 font-size: 0.9em;
             }
             &.glyphicon-chevron-right {
@@ -137,6 +186,7 @@
             }
         }
     }
+
     .has-error {
         .control-label {
             background: #f2f2f2;
@@ -148,13 +198,14 @@
             color: #999;
             width: 100%;
             &:before {
-              @extend .fa;
-              content: "\f071";
-              margin-right: 4px;
-              color: #aaa;
+                @extend .fa;
+                content: "\f071";
+                margin-right: 4px;
+                color: #aaa;
             }
         }
     }
+
     .reset-form {
         @include border-radius(3px);
         position: relative;
@@ -163,19 +214,49 @@
             color: inherit;
         }
     }
-}
 
-.signup-team-confirm__container {
-    padding: 100px 0px 100px 0px;
-}
+    // Modifier Styles
+    h1, h2, h3, h4, h5, h6 {
+        &.margin--top-none {
+            margin-top: 0;
+        }
+        &.margin--bottom-none {
+            margin-bottom: 0;
+        }
+        &.margin--less {
+            margin-bottom: 0.3em;
+        }
+        &.sub-heading {
+            font-weight: 400;
+            margin-bottom: 0;
+        }
+        &.color--light {
+            font-weight: 300;
+        }
+    }
 
-.signup-team-logo {
-    display: none;
-    width: 210px;
-    margin: 0 0 2em 0;
-}
+    p {
+        &.margin--extra {
+            margin-bottom: 1.5em;
+        }
+        &.margin--less {
+            margin-bottom: 0.3em;
+        }
+        .black, &.black {
+            color: #000;
+        }
+    }
+
+    .color--light {
+        color: #777;
+    }
+
+    .margin--extra {
+        margin-top: 3em;
+    }
+
+    .margin--extra-2x {
+        margin-top: 6em;
+    }
 
-.signup-team-login {
-    padding-bottom: 10px;
-    font-weight: 700;
 }