ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

draft-state item-groups css 

Change-Id: I7be9be15be23017cc82df190a4db3f50b40b82fb
Reviewed-on: https://gerrit.instructure.com/20878
Tested-by: Jenkins <jenkins@instructure.com>
Reviewed-by: Simon Williams <simon@instructure.com>
Product-Review: Simon Williams <simon@instructure.com>
QA-Review: Simon Williams <simon@instructure.com>
This commit is contained in:
Ryan Florence 2013-04-25 14:44:37 -06:00 committed by Simon Williams
parent b498f26e45
commit ae6a5c56f3
6 changed files with 233 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/stylesheets/_variables.sass
View File

@ -65,3 +65,9 @@ $h2-font-size: 14px
$h3-font-size: 19px $h3-font-size: 19px
$spacing-width: 20px $spacing-width: 20px
$wellBackground: #e8ecef
// override bootstrap green buttons
$green: #34832b !default

8
app/stylesheets/utilities/_buttons.scss Normal file
View File

@ -0,0 +1,8 @@
/* @styleguide Published Buttons
```html
<button class="btn btn-success active"><i class="icon-published"></i> Published</button>
```
*/

2
app/stylesheets/utilities/_icons.scss
View File

@ -247,6 +247,8 @@ i[class*=icon-], i[class^=icon-], a[class*=icon-], a[class^=icon-] {
font-family: 'canvasregular'; font-family: 'canvasregular';
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
position: relative;
top: -1px;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
// the specific reason for this being in the :before and not part of the <i> was to get // the specific reason for this being in the :before and not part of the <i> was to get

4
app/stylesheets/utilities/_main.scss
View File

@ -21,3 +21,7 @@
@import "alignment"; @import "alignment";
@import "forms"; @import "forms";
@import "avatars"; @import "avatars";
@import "item-groups";
@import "buttons";
@import "pill";

34
app/stylesheets/utilities/_pill.scss Normal file
View File

@ -0,0 +1,34 @@
/* @styleguide Pills
```html
<ul class="pill">
<li>30% of total</li>
<li>2 Rules</li>
<li>10pts</li>
</ul>
```
*/
.pill {
display: inline-block;
margin: 0;
list-style: none;
border-radius: 1em;
border: 1px solid rgba(0,0,0,0.25);
box-shadow: 0 1px 0 #fff;
}
.pill > li {
float: left;
padding: 0 10px;
border-right: solid 1px rgba(0, 0, 0, 0.25);
&:first-child {
padding-left: 10px;
}
&:last-child {
padding-right: 10px;
border-right: none;
}
}

179
app/stylesheets/utilities/item-groups.scss Normal file
View File

@ -0,0 +1,179 @@
@import 'environment';
/* @styleguide Item Groups
```html
<div class="item-group">
<div class="ig-header">
<i class="icon-mini-arrow-right"></i> Item Group Header
</div>
<ul class="ig-list">
<li>
<a href="#" class="ig-link">
<div class="ig-title ellipses"><i class="icon-assignment"></i> Some Assignment</div>
<div class="ig-details row-fluid">
<div class="span4 ellipses"><b>Available</b> Nov 1, 2012</div>
<div class="span4 ellipses"><b>Due</b> Nov 4, 2012</div>
<div class="span4 ellipses">10 pts</div>
</div>
<div class="ig-admin">
<span class="al-trigger">
<i class="icon-settings"></i><i class="icon-mini-arrow-down"></i>
</span>
</div>
</a>
</li>
<li>
<a href="#" class="ig-link ig-published ig-indent1">
<div class="ig-title ellipses"><i class="icon-assignment"></i> Some Assignment</div>
<div class="ig-details row-fluid">
<div class="span4 ellipses"><b>Available</b> Nov 1, 2012</div>
<div class="span4 ellipses"><b>Due</b> Nov 4, 2012</div>
<div class="span4 ellipses">10 pts</div>
</div>
<div class="ig-admin">
<span class="al-trigger">
<i class="icon-settings"></i><i class="icon-mini-arrow-down"></i>
</span>
</div>
</a>
</li>
<li>
<div class="ig-text">
Greek Civilization Essay
</div>
</li>
<li>
<a href="#" class="ig-link">
<div class="ig-title ellipses"><i class="icon-assignment"></i> Some Assignment</div>
<div class="ig-details row-fluid">
<div class="span4 ellipses"><b>Available</b> Nov 1, 2012</div>
<div class="span4 ellipses"><b>Due</b> Nov 4, 2012</div>
<div class="span4 ellipses">10 pts</div>
</div>
<div class="ig-admin">
<span class="al-trigger">
<i class="icon-settings"></i><i class="icon-mini-arrow-down"></i>
</span>
</div>
</a>
</li>
</ul>
</div>
*/
.item-group {
background-color: $wellBackground;
border: 1px solid darken($wellBackground, 7%);
padding: 9px;
border-radius: 3px;
}
.ig-header, .ig-text {
font-size: 15px;
color: #3d454c;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
padding-left: 30px;
}
.ig-text {
padding-top: 10px;
padding-bottom: 10px;
}
.ig-header {
font-weight: bold;
.icon-mini-arrow-right {
position: relative;
top: -1px;
}
}
.ig-list {
list-style: none;
padding: 0;
margin: 0;
margin-top: 10px;
}
.ig-list li {
margin: 5px 0;
}
.ig-list a {
position: relative;
display: block;
height: 40px;
text-decoration: none;
background: #fff;
border: 1px solid #c1c7cf;
border-radius: 3px;
color: #696969;
&:hover {
background: #eef7ff;
}
&:before {
position: relative;
top: -2px;
}
&.ig-published .ig-title {
color: #34832b;
}
}
.ig-title {
position: absolute;
left: 30px;
right: 430px;
overflow: hidden;
white-space: nowrap;
font-weight: bold;
top: 9px;
}
.ig-details {
position: absolute;
right: 50px;
font-size: 11px;
width: 370px;
top: 10px;
}
.ig-admin {
position: absolute;
right: 8px;
top: 10px;
}
.ig-details [class^=span] {
white-space: nowrap;
}
[class^=ig-indent] {
// anything > 2 is still 60px;
margin-left: 60px;
}
.ig-indent1 {
margin-left: 20px;
}
.ig-indent2 {
margin-left: 40px;
}
.ig-text {
color: #3d454c;
font-size: 15px;
}