clean up styles within student section modal
Fixes: CNVS-34481 note: this is a css clean-up only... did not touch behind the scenes funtionality of token_input, token_selector or autocomplete_menu test plan: - environment set-up... will need a course that has sections - once you have sections within a course navigate to the course - select "people" from the course sub-nav - choose one of the students in that course - hover over the gear icon to reveal "edit sections" select this option - a modal will pop up and the new look should be similar to this: https://www.screencast.com/t/AXL2VVjMF - a similar modal/user experience is revealed when you have a user set with the role of "observer" and you use the gear icon to "link to student" for observing Change-Id: I4ea02fa210e436f27e2a815a2000c6209d8180e1 Reviewed-on: https://gerrit.instructure.com/101455 Tested-by: Jenkins Reviewed-by: Stephen Jensen <sejensen@instructure.com> QA-Review: Dan Sasaki Product-Review: Kyle Follett <kfollett@instructure.com>
This commit is contained in:
Pam Hiett
Pam Hiett
parent
182c5a4dfe
commit
64ffdb04e0
|
|
@ -1,52 +1,32 @@
|
|||
@mixin name_bubbles {
|
||||
div {
|
||||
background-color: #dee7fa;
|
||||
border-radius: 10px;
|
||||
padding: 0 14px 0 11px;
|
||||
padding: $contentBoxPadding;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
}
|
||||
span {
|
||||
color: #fff;
|
||||
font-size: 0.8em;
|
||||
vertical-align: top;
|
||||
color: $ic-font-color-dark;
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
}
|
||||
a {
|
||||
position: absolute;
|
||||
right: 1px;
|
||||
top: 1px;
|
||||
width: 13px;
|
||||
height: 100%;
|
||||
color: #c4cbcf;
|
||||
vertical-align: top;
|
||||
color: $ic-font-color-dark;
|
||||
padding-right: $contentBoxPadding;
|
||||
cursor: pointer;
|
||||
background: transparent url(/images/messages/token-delete.png) 12px center no-repeat;
|
||||
vertical-align: middle;
|
||||
}
|
||||
white-space: nowrap;
|
||||
float: left;
|
||||
margin: 1px 2px 1px 4px;
|
||||
color: #000;
|
||||
background-color: #85ace0;
|
||||
border: 1px solid #a5bcf0;
|
||||
border-radius: 10px;
|
||||
color: $ic-font-color-dark;
|
||||
background-color: $ic-color-medium-light;
|
||||
border: 1px solid $ic-border-color;
|
||||
border-radius: $borderRadius;
|
||||
cursor: default;
|
||||
position: relative;
|
||||
&.cannot_remove, &.cannot_remove:hover {
|
||||
background-color: $gray-light;
|
||||
border-color: $gray-lighter;
|
||||
div {
|
||||
background-color: $gray-lighter;
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
div {
|
||||
background-color: #bccef4;
|
||||
}
|
||||
border-color: #6f94e6;
|
||||
a {
|
||||
background-position: 1px center;
|
||||
padding-right: $contentBoxPadding;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,12 +44,7 @@
|
|||
li {
|
||||
@include name_bubbles;
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
|
||||
#edit_sections {
|
||||
a.browser {
|
||||
background: transparent url(/images/messages/context-search-sprite.png) 0 0 no-repeat;
|
||||
margin-top: $ic-sp/2;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -147,51 +147,54 @@ $ic-token-padding: 3px 15px;
|
|||
/// Legacy Token Input
|
||||
///////////
|
||||
.token_input {
|
||||
line-height: 1.1em;
|
||||
min-height: 20px;
|
||||
display: inline-block;
|
||||
border: 1px solid #999999;
|
||||
border-top-color: #737373;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
cursor: text;
|
||||
position: relative;
|
||||
position: relative;
|
||||
min-height: 0;
|
||||
height: 38px;
|
||||
box-sizing: border-box;
|
||||
background:$ic-color-light;
|
||||
border: 1px solid $ic-border-light;
|
||||
border-radius: $borderRadius;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
cursor: text;
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
padding: $contentBoxPadding/4;
|
||||
transition: border linear 0.2s, box-shadow linear 0.2s;
|
||||
|
||||
a.browser {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
top: $ic-sp/2;
|
||||
right: $ic-sp/2;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
text-indent: -9999em;
|
||||
background: transparent url(/images/messages/address-book-icon-sprite.png) 0 0 no-repeat;
|
||||
}
|
||||
a.browser:hover {
|
||||
background-position: 0 -18px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
> span {
|
||||
float: left;
|
||||
color: #888;
|
||||
margin: 2px 1px 0;
|
||||
color: $ic-color-medium-lighter;
|
||||
padding: $contentBoxPadding/2;
|
||||
}
|
||||
|
||||
> div {
|
||||
overflow: auto;
|
||||
max-height: 90px;
|
||||
}
|
||||
|
||||
&.browsable > div {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
@include name_bubbles;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
||||
li.selected {
|
||||
background-color: #5b89f3;
|
||||
border-color: #5b89f3;
|
||||
|
|
@ -200,6 +203,7 @@ $ic-token-padding: 3px 15px;
|
|||
background-position: (-10px) center;
|
||||
}
|
||||
}
|
||||
|
||||
li.details {
|
||||
div {
|
||||
padding: 0 11px;
|
||||
|
|
@ -208,12 +212,13 @@ $ic-token-padding: 3px 15px;
|
|||
padding: 0 15px 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
box-shadow: none;
|
||||
float: left;
|
||||
border: 0;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
padding: $contentBoxPadding;
|
||||
margin: 1px 0;
|
||||
line-height: 1.1em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,20 +4,21 @@
|
|||
overflow: hidden;
|
||||
margin-left: -12px;
|
||||
padding: 0 12px 12px;
|
||||
display: block;
|
||||
> div {
|
||||
background: #ebebeb;
|
||||
border: 1px solid #999999;
|
||||
border-radius: 0 0 10px 10px;
|
||||
box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.15);
|
||||
background: $ic-color-light;
|
||||
border: 1px solid $ic-border-light;
|
||||
border-radius: $borderRadius;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
overflow: hidden;
|
||||
width: 341px;
|
||||
width: 390px;
|
||||
// gets shifted left/right as menu slides
|
||||
> div {
|
||||
position: relative;
|
||||
// each menu level (contains two uls)
|
||||
> div {
|
||||
float: left;
|
||||
width: 341px;
|
||||
width: 390px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -31,11 +32,11 @@
|
|||
margin: 0 0 10px;
|
||||
overflow: auto;
|
||||
li, li.active.no-results {
|
||||
background: transparent;
|
||||
background: $ic-color-light;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #fff;
|
||||
border-bottom: 1px solid #d4d5d7;
|
||||
border-top: 1px solid $ic-color-light;
|
||||
border-bottom: 1px dashed $ic-border-dark;
|
||||
padding: 5px;
|
||||
}
|
||||
li.active.no-results {
|
||||
|
|
@ -60,15 +61,11 @@
|
|||
border-bottom: none;
|
||||
}
|
||||
li.active, li:focus {
|
||||
border-top-color: #d7eefb;
|
||||
border-bottom-color: #297fd1;
|
||||
background: #2da5f0 url(/images/messages/finder-active.png) repeat-x 0 0;
|
||||
background: $ic-brand-primary;
|
||||
outline: none;
|
||||
}
|
||||
li.active.expanded {
|
||||
background: #f4fbff;
|
||||
border-top-color: #fff;
|
||||
border-bottom-color: #d4d5d7;
|
||||
background: $ic-color-medium-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
{{#if can_be_removed}}
|
||||
<div class="ellipsis" title="{{name}} - {{enrollmentName role}}">{{name}} - {{enrollmentName role}}</div>
|
||||
<a href="#" title="{{#t "remove_user_from_course_section"}}Remove user from {{name}}{{/t}}">
|
||||
<i class="icon-x" aria-hidden="true"></i>
|
||||
<span class="screenreader-only">
|
||||
{{#t "remove_user_from_course_section"}}Remove user from {{name}}{{/t}}
|
||||
</span>
|
||||
|
|
|
|||
Loading…
Reference in New Issue