Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Just the beginning of function lists. Many more in my to-do.

  • Loading branch information...
commit be2302e9509449d38a60b99f00d9d92b13050d29 1 parent 583b3a7
Chris Coyier authored
15 css/function-lists.css
View
@@ -10,6 +10,10 @@
background: white;
color: #333;
}
+.function-list li.upgrade .list-item {
+ background: #fdfbcb;
+ color: #ba8253;
+}
.function-list li:not(.disabled):not(.active) .list-item:hover {
background: #e8f4f4;
}
@@ -36,9 +40,13 @@
bottom: 4px;
width: 9px;
}
-.function-list .function span {
+.function-list .function.btn-arrow-standard-down-dark span {
height: 10px;
}
+.function-list .function.btn-arrow-standard-right-dark span {
+ height: 12px;
+ margin-left: 2px;
+}
.function-list .function.function-text {
padding: 2px 0 0 1px;
width: 22px;
@@ -47,6 +55,9 @@
.function-list.modal li .list-item {
border-left: 8px solid #dadad8;
}
-.function-list.modal.active .list-item {
+.function-list.modal li.active .list-item {
border-left-color: black;
}
+.function-list.modal li.upgrade .list-item {
+ border-left-color: #e9d14b;
+}
25 css/function-lists.less
View
@@ -12,6 +12,12 @@
color: #333;
}
}
+ &.upgrade {
+ .list-item {
+ background: #fdfbcb;
+ color: #ba8253;
+ }
+ }
&:not(.disabled):not(.active) {
.list-item {
&:hover {
@@ -38,9 +44,13 @@
bottom: 4px;
width: 9px;
// down arrow
- span {
+ &.btn-arrow-standard-down-dark span {
height: 10px;
}
+ &.btn-arrow-standard-right-dark span {
+ height: 12px;
+ margin-left: 2px;
+ }
// + or -
&.function-text {
padding: 2px 0 0 1px;
@@ -53,10 +63,15 @@
.list-item {
border-left: 8px solid #dadad8;
}
- }
- &.active {
- .list-item {
- border-left-color: black;
+ &.active {
+ .list-item {
+ border-left-color: black;
+ }
+ }
+ &.upgrade {
+ .list-item {
+ border-left-color: #e9d14b;
+ }
}
}
}
9 includes/function-lists.html
View
@@ -15,7 +15,7 @@ <h2 id="function-lists">Function Lists <a href="#top" class="back-to-top">^ Back
<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">
+ <a href="#" class="btn btn-menu-right btn-menu-down btn-arrow btn-arrow-standard-vert btn-arrow-standard-down-dark btn-only-arrow function">
<span></span>
</a>
</li>
@@ -27,6 +27,13 @@ <h2 id="function-lists">Function Lists <a href="#top" class="back-to-top">^ Back
<a class="list-item" href="#" title="Tooltip">Disabled List Item</a>
<a href="#" class="btn function-text grey function">&ndash;</a>
</li>
+ <li class="upgrade">
+ <a class="list-item" href="#" title="Tooltip">Upgrade Required</a>
+ </li>
+ <li>
+ <a class="list-item" href="#" title="Tooltip">Arrow Right</a>
+ <a href="#" class="btn btn-arrow btn-arrow-right btn-arrow-standard-horiz btn-arrow-standard-right-dark btn-only-arrow function"><span></span></a>
+ </li>
</ul>
</td>
9 index.html
View
@@ -1214,7 +1214,7 @@
<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">
+ <a href="#" class="btn btn-menu-right btn-menu-down btn-arrow btn-arrow-standard-vert btn-arrow-standard-down-dark btn-only-arrow function">
<span></span>
</a>
</li>
@@ -1226,6 +1226,13 @@
<a class="list-item" href="#" title="Tooltip">Disabled List Item</a>
<a href="#" class="btn function-text grey function">&ndash;</a>
</li>
+ <li class="upgrade">
+ <a class="list-item" href="#" title="Tooltip">Upgrade Required</a>
+ </li>
+ <li>
+ <a class="list-item" href="#" title="Tooltip">Arrow Right</a>
+ <a href="#" class="btn btn-arrow btn-arrow-right btn-arrow-standard-horiz btn-arrow-standard-right-dark btn-only-arrow function"><span></span></a>
+ </li>
</ul>
</td>
Please sign in to comment.
Something went wrong with that request. Please try again.