From 0145ae7b6ed1028c382e3be884bc3b75aa870858 Mon Sep 17 00:00:00 2001 From: Frances Botsford Date: Fri, 28 Aug 2015 15:41:34 -0400 Subject: [PATCH] adjust teams search styles and add search clear --- .../teams/static/teams/js/views/teams_tab.js | 4 +- lms/static/sass/views/_teams.scss | 52 ++++++++++++------- 2 files changed, 35 insertions(+), 21 deletions(-) diff --git a/lms/djangoapps/teams/static/teams/js/views/teams_tab.js b/lms/djangoapps/teams/static/teams/js/views/teams_tab.js index 309082bbc9..bc7b44155d 100644 --- a/lms/djangoapps/teams/static/teams/js/views/teams_tab.js +++ b/lms/djangoapps/teams/static/teams/js/views/teams_tab.js @@ -206,7 +206,7 @@ var view = this; this.getTopic(topicID).done(function (topic) { view.mainView = view.createViewWithHeader({ - parentTopic: topic, + topic: topic, title: gettext("Create a New Team"), description: gettext("Create a new team if you can't find an existing team to join, or if you would like to learn with friends you know."), mainView: new TeamEditView({ @@ -368,7 +368,7 @@ { mainView: view, subject: team, - parentTopic: topic, + topic: topic, headerActionsView: TeamProfileActionsView } ) diff --git a/lms/static/sass/views/_teams.scss b/lms/static/sass/views/_teams.scss index 393ae96873..f876763192 100644 --- a/lms/static/sass/views/_teams.scss +++ b/lms/static/sass/views/_teams.scss @@ -55,9 +55,9 @@ } .page-header-secondary { + @include text-align(right); display: inline-block; width: flex-grid(4,12); - @include text-align(right); vertical-align: text-bottom; } } @@ -84,43 +84,56 @@ .page-header-search { + .wrapper-search-input { + display: inline-block; + position: relative; + vertical-align: middle; + } + .search-label { @extend %text-sr; } .search-field { transition: all $tmg-f2 ease-in-out; - border: 0; - border-bottom: 2px solid transparent; + border: 1px solid $gray-l4; + border-radius: 3px; padding: ($baseline/4) ($baseline/2); font-family: inherit; color: $gray; - @include text-align(right); - - &:focus { - border-bottom: 2px solid $black; - color: $black; - } } .action-search { @extend %button-reset; - padding: ($baseline/5) ($baseline/2); - vertical-align: middle; background-color: $gray-l3; + padding: ($baseline/5) ($baseline/2); text-shadow: none; + vertical-align: middle; .icon { - color: $gray-l3; + color: $white; } // STATE: hover and focus &:hover, &:focus { + background-color: $blue; + } + } - .icon { - color: $black; - } + .action-clear { + @include right(0); + @include margin(0, ($baseline/4), 0, 0); + @extend %button-reset; + position: absolute; + top: 0; + padding: ($baseline/4); + color: $gray-l3; + + // STATE: hover and focus + &:hover, + &:focus { + color: $black; } } } @@ -255,6 +268,11 @@ @include margin-right ($baseline*.75); color: $gray-d1; + abbr { + border: 0; + text-decoration: none; + } + .icon { @include margin-right ($baseline/4); } @@ -328,10 +346,6 @@ &.has-pennant { - .wrapper-card-core { - padding-top: ($baseline*2); - } - .pennant { @extend %t-copy-sub2; @extend %t-strong;