Skip to content

Commit

Permalink
more function lists and tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
chriscoyier committed Nov 30, 2011
1 parent c49dfa3 commit 583b3a7
Show file tree
Hide file tree
Showing 10 changed files with 227 additions and 7 deletions.
3 changes: 2 additions & 1 deletion css/accordion.css
Expand Up @@ -34,8 +34,9 @@
border-bottom: 1px solid #C2C1BB;
}
.key.open {
background: #9E9B90;
background: #9e9b90;
cursor: default;
padding-bottom: 10px;
}
.key a {
outline: 0;
Expand Down
3 changes: 2 additions & 1 deletion css/accordion.less
Expand Up @@ -11,8 +11,9 @@
}

.key.open {
background: #9E9B90;
background: @bg-accordion;
cursor: default;
padding-bottom: 10px;
}

.key a {
Expand Down
3 changes: 2 additions & 1 deletion css/colors-values.less
Expand Up @@ -3,4 +3,5 @@
@bg-light: #EAEADE;
@bg-brand: #A9BD38;
@bg-brand-dark: #8aa027;
@bg-teal: #00898B;
@bg-teal: #00898B;
@bg-accordion: #9E9B90;
3 changes: 3 additions & 0 deletions css/colors.css
Expand Up @@ -17,6 +17,9 @@
.bg-teal {
background-color: #00898b;
}
.bg-accordion {
background-color: #9e9b90;
}
/* Background Gradients */
.grad-dark {
background-color: #5e5e4e;
Expand Down
3 changes: 3 additions & 0 deletions css/colors.less
Expand Up @@ -20,6 +20,9 @@
.bg-teal {
background-color: @bg-teal;
}
.bg-accordion {
background-color: @bg-accordion;
}

/* Background Gradients */
.grad-dark {
Expand Down
52 changes: 52 additions & 0 deletions css/function-lists.css
@@ -0,0 +1,52 @@
.function-list {
list-style: none;
margin: 0;
padding: 0;
}
.function-list li {
position: relative;
}
.function-list li.active .list-item {
background: white;
color: #333;
}
.function-list li:not(.disabled):not(.active) .list-item:hover {
background: #e8f4f4;
}
.function-list .list-item {
display: block;
color: #666666;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: #eaeae8;
padding: 8px;
font-weight: bold;
}
.function-list .list-item:hover {
text-decoration: none;
}
.function-list .function {
position: absolute;
right: 4px;
top: 4px;
bottom: 4px;
width: 9px;
}
.function-list .function span {
height: 10px;
}
.function-list .function.function-text {
padding: 2px 0 0 1px;
width: 22px;
text-align: center;
}
.function-list.modal li .list-item {
border-left: 8px solid #dadad8;
}
.function-list.modal.active .list-item {
border-left-color: black;
}
63 changes: 63 additions & 0 deletions css/function-lists.less
@@ -0,0 +1,63 @@
@import "functions.less";

.function-list {
list-style: none;
margin: 0;
padding: 0;
li {
position: relative;
&.active {
.list-item {
background: white;
color: #333;
}
}
&:not(.disabled):not(.active) {
.list-item {
&:hover {
background: #e8f4f4;
}
}
}
}
.list-item {
display: block;
color: #666666;
.border-radius(3px);
background: #eaeae8;
padding: 8px;
font-weight: bold;
&:hover {
text-decoration: none;
}
}
.function {
position: absolute;
right: 4px;
top: 4px;
bottom: 4px;
width: 9px;
// down arrow
span {
height: 10px;
}
// + or -
&.function-text {
padding: 2px 0 0 1px;
width: 22px;
text-align: center;
}
}
&.modal {
li {
.list-item {
border-left: 8px solid #dadad8;
}
}
&.active {
.list-item {
border-left-color: black;
}
}
}
}
50 changes: 49 additions & 1 deletion includes/function-lists.html
Expand Up @@ -5,7 +5,55 @@ <h2 id="function-lists">Function Lists <a href="#top" class="back-to-top">^ Back
</div>

<div class="info">

<table>

<tr>

<td>

<ul class="function-list modal onlight">
<li class="active">
<a class="list-item" href="#" title="Tooltip">Active List Item</a>
<a href="#" class="btn btn-menu-right btn-menu-down btn-arrow btn-arrow-standard-vert btn-arrow-standard-down-dark btn-only-arrow grey function">
<span></span>
</a>
</li>
<li>
<a class="list-item" href="#" title="Tooltip">Normal List Item</a>
<a href="#" class="btn function-text grey function">+</a>
</li>
<li class="disabled">
<a class="list-item" href="#" title="Tooltip">Disabled List Item</a>
<a href="#" class="btn function-text grey function">&ndash;</a>
</li>
</ul>


</td>

<td class="bg-dark">

<ul class="function-list modal">
<li class="active">
<a class="list-item" href="#" title="Tooltip">Active List Item</a>
<a href="#" class="btn btn-menu-right btn-menu-down btn-arrow btn-arrow-standard-vert btn-arrow-standard-down-dark btn-only-arrow grey function">
<span></span>
</a>
</li>
<li>
<a class="list-item" href="#" title="Tooltip">Normal List Item</a>
<a href="#" class="btn function-text grey function">+</a>
</li>
<li class="disabled">
<a class="list-item" href="#" title="Tooltip">Disabled List Item</a>
<a href="#" class="btn function-text grey function">&ndash;</a>
</li>
</ul>

</td>

</tr>

</table>

</div>
2 changes: 1 addition & 1 deletion includes/tabs.html
Expand Up @@ -33,7 +33,7 @@ <h2 id="tabs">Tabs <a href="#top" class="back-to-top">^ Back to Top</a></h2>
</div><!-- END default tabs -->

<!-- simulate some container, like an accordion -->
<div style="background: #9E9B90; padding: 20px;">
<div class="bg-accordion" style="padding: 20px;">

<div class="tabs pillbox">

Expand Down
52 changes: 50 additions & 2 deletions index.html
Expand Up @@ -1204,9 +1204,57 @@ <h2>Title of the Form</h2>
</div>

<div class="info">

<table>

<tr>

<td>

<ul class="function-list modal onlight">
<li class="active">
<a class="list-item" href="#" title="Tooltip">Active List Item</a>
<a href="#" class="btn btn-menu-right btn-menu-down btn-arrow btn-arrow-standard-vert btn-arrow-standard-down-dark btn-only-arrow grey function">
<span></span>
</a>
</li>
<li>
<a class="list-item" href="#" title="Tooltip">Normal List Item</a>
<a href="#" class="btn function-text grey function">+</a>
</li>
<li class="disabled">
<a class="list-item" href="#" title="Tooltip">Disabled List Item</a>
<a href="#" class="btn function-text grey function">&ndash;</a>
</li>
</ul>


</td>

<td class="bg-dark">

<ul class="function-list modal">
<li class="active">
<a class="list-item" href="#" title="Tooltip">Active List Item</a>
<a href="#" class="btn btn-menu-right btn-menu-down btn-arrow btn-arrow-standard-vert btn-arrow-standard-down-dark btn-only-arrow grey function">
<span></span>
</a>
</li>
<li>
<a class="list-item" href="#" title="Tooltip">Normal List Item</a>
<a href="#" class="btn function-text grey function">+</a>
</li>
<li class="disabled">
<a class="list-item" href="#" title="Tooltip">Disabled List Item</a>
<a href="#" class="btn function-text grey function">&ndash;</a>
</li>
</ul>

</td>

</tr>

</table>

</div></section><section class="container group demo-popouts"><h2 id="help">Help Popouts <a href="#top" class="back-to-top">^ Back to Top</a></h2>

<div class="about">
Expand Down Expand Up @@ -2016,7 +2064,7 @@ <h3 class="bar" id="i-follow">This is Sparta!</h3>
</div><!-- END default tabs -->

<!-- simulate some container, like an accordion -->
<div style="background: #9E9B90; padding: 20px;">
<div class="bg-accordion" style="padding: 20px;">

<div class="tabs pillbox">

Expand Down

0 comments on commit 583b3a7

Please sign in to comment.