Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

studio - soft landing: added in hover/active states for elements

Browse Source
This commit is contained in:
Brian Talbot
2013-02-04 17:18:12 -05:00
parent 71ae45fd0e
commit db21156d40
3 changed files with 63 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
cms/static/img/thumb-hiw-feature1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

52
cms/static/sass/_index.scss
View File

@@ -143,14 +143,50 @@
margin-right: flex-gutter();
a {
@include box-sizing(border-box);
@include box-shadow(0 1px ($baseline/10) $shadow-l1);
position: relative;
top: 0;
display: block;
border: 1px solid $gray-l3;
padding: ($baseline/4);
background: $white;
.action-zoom {
@include transition(opacity .15s ease-in-out);
opacity: 0;
position: absolute;
left: 110px;
top: 110px;
min-height: 300px;
min-width: 300px;
.ss-icon {
@include font-size(32);
@include border-radius(($baseline));
display: inline-block;
padding: ($baseline*1.5) $baseline $baseline $baseline;
background: $blue;
color: $white;
text-align: center;
line-height: 2.75rem;
}
}
&:hover {
border-color: $blue;
top: -($baseline/5);
.action-zoom {
opacity: 0.8;
}
}
}
img {
display: block;
width: 100%;
height: 100%;
background: $black;
}
}
@@ -181,10 +217,16 @@
margin: ($baseline*1.5) 0 0 0;
.proofpoint {
@include box-sizing(border-box);
@include border-radius(($baseline/4));
@include transition(color .15s ease-in-out);
position: relative;
top: 0;
float: left;
width: flex-grid(3, 9);
min-height: ($baseline*8);
margin-right: flex-gutter();
padding: ($baseline*0.75) $baseline;
color: $gray-l1;
cursor: pointer;
@@ -196,7 +238,13 @@
}
&:hover {
color: $gray-d3;
background: $blue-l5;
color: $blue-l2;
top: -($baseline/5);
.title {
color: $blue-d1;
}
}
&:last-child {

17
cms/templates/howitworks.html
View File

@@ -25,8 +25,11 @@
<li class="feature">
<figure class="img zoom">
<a href="/static/img/howitworks-feature1.png">
<img src="/static/img/pl-1x1-000.png" alt="Studio Helps You Keep Your Courses Organized" />
<img src="/static/img/thumb-hiw-feature1.png" alt="Studio Helps You Keep Your Courses Organized" />
<figcaption class="sr">Studio Helps You Keep Your Courses Organized</figcaption>
<span class="action-zoom">
<i class="ss-icon ss-symbolicons-block">&#xE002;</i>
</span>
</a>
</figure>
@@ -56,8 +59,11 @@
<li class="feature">
<figure class="img zoom">
<a href="/static/img/howitworks-feature2.png">
<img src="/static/img/pl-1x1-000.png" alt="Studio Keeps Your Learning Sequences and Lectures, Together" />
<img src="/static/img/thumb-hiw-feature1.png" alt="Studio Keeps Your Learning Sequences and Lectures, Together" />
<figcaption class="sr">Studio Keeps Your Learning Sequences and Lectures, Together</figcaption>
<span class="action-zoom">
<i class="ss-icon ss-symbolicons-block">&#xE002;</i>
</span>
</a>
</figure>
@@ -86,9 +92,12 @@
<li class="feature">
<figure class="img zoom">
<a href="/static/img/howitworks-feature3.png">
<img src="/static/img/pl-1x1-000.png" alt="Studio Gives You Simple, Fast, and Incremental Publishing. With Friends." />
<a href="/static/img/thumb-hiw-feature3.png">
<img src="/static/img/thumb-hiw-feature1.png" alt="Studio Gives You Simple, Fast, and Incremental Publishing. With Friends." />
<figcaption class="sr">Studio Gives You Simple, Fast, and Incremental Publishing. With Friends.</figcaption>
<span class="action-zoom">
<i class="ss-icon ss-symbolicons-block">&#xE002;</i>
</span>
</a>
</figure>