Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

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

  • Loading branch information...
commit be2302e9509449d38a60b99f00d9d92b13050d29 1 parent 583b3a7
@chriscoyier authored
View
15 css/function-lists.css
@@ -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;
+}
View
25 css/function-lists.less
@@ -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;
+ }
}
}
}
View
9 includes/function-lists.html
@@ -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>
View
9 index.html
@@ -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.