LMS: adds in collapse/expand UI for dashboard view upsell
This commit is contained in:
@@ -523,7 +523,7 @@
|
||||
.message-copy,
|
||||
.message-copy .copy {
|
||||
@extend %t-copy-sub1;
|
||||
margin: 0;
|
||||
margin: 2px 0 0 0;
|
||||
}
|
||||
|
||||
// CASE: expandable
|
||||
@@ -532,15 +532,18 @@
|
||||
.wrapper-tip {
|
||||
|
||||
.message-title, .message-copy {
|
||||
@include transition(color 0.25s ease-in-out 0);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.message-title .value, .message-copy {
|
||||
@include transition(color 0.25s ease-in-out 0s);
|
||||
}
|
||||
|
||||
// STATE: hover
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
.message-title, .message-copy {
|
||||
.message-title .value, .message-copy, .ui-toggle-expansion {
|
||||
color: $link-color;
|
||||
}
|
||||
}
|
||||
@@ -555,6 +558,11 @@
|
||||
// STATE: is expanded
|
||||
&.is-expanded {
|
||||
|
||||
.ui-toggle-expansion {
|
||||
@include transform(rotate(0));
|
||||
@include transform-origin(50% 50%);
|
||||
}
|
||||
|
||||
.wrapper-extended {
|
||||
display: block;
|
||||
opacity: 1.0;
|
||||
@@ -573,6 +581,16 @@
|
||||
float: left;
|
||||
}
|
||||
|
||||
.ui-toggle-expansion {
|
||||
@include transition(all 0.25s ease-in-out 0s);
|
||||
@include transform(rotate(-90deg));
|
||||
@include transform-origin(50% 50%);
|
||||
@include font-size(21);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-right: ($baseline/4);
|
||||
}
|
||||
|
||||
.message-copy {
|
||||
float: right;
|
||||
}
|
||||
|
||||
@@ -65,7 +65,10 @@
|
||||
<div class="message message-upsell has-actions is-expandable is-shown">
|
||||
|
||||
<div class="wrapper-tip">
|
||||
<h4 class="message-title">${_("Challenge Yourself!")}</h4>
|
||||
<h4 class="message-title">
|
||||
<i class="icon-caret-down ui-toggle-expansion"></i>
|
||||
<span class="value">${_("Challenge Yourself!")}</span>
|
||||
</h4>
|
||||
<p class="message-copy">${_("Take this course as an ID-verified student.")}</p>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user