Permalink
Browse files

Disabled toolbar buttons are now 33% opaque instead of invisible.

Also refactored toolbar CSS a bit and changed styles in HTML so they
are a bit more semantically accurate, which allows us to
simplify the CSS further.
  • Loading branch information...
1 parent 1727d45 commit 72f4ac5e9590ca020e612673fde50801c040a214 @toolness toolness committed Jun 6, 2012
Showing with 26 additions and 39 deletions.
  1. +22 −35 css/editor.css
  2. +4 −4 index.html
View
57 css/editor.css
@@ -112,8 +112,21 @@ img {
padding: 0px 5px;
padding-right: 2em;
white-space: nowrap;
- cursor: pointer;
+ cursor: default;
font-size: 14px;
+ opacity: 0.33;
+ -moz-transition: opacity 0.5s;
+ -webkit-transition: opacity 0.5s;
+ -o-transition: opacity 0.5s;
+}
+
+#nav-options .nav-item.enabled {
+ cursor: pointer;
+ opacity: 1.0;
+}
+
+#nav-options .nav-item.enabled:hover {
+ color: #3D59FE;
}
@media screen and (max-width: 980px) {
@@ -181,16 +194,6 @@ img {
}
}
-#nav-options #editor-nav-item.nav-item,
-#nav-options #preview-nav-item.nav-item {
- cursor: default;
- font-size: 16px;
-}
-
-#nav-options .nav-item:hover {
- color: #3D59FE;
-}
-
#nav-options .nav-item ul li {
color: #666;
}
@@ -248,10 +251,12 @@ img {
/* ------ nav button stylings ------ */
-#editor-nav-item,
-#preview-nav-item {
+#nav-options #editor-nav-item,
+#nav-options #preview-nav-item {
font-weight: bold;
- font-size: 14px;
+ font-size: 16px;
+ opacity: 1.0;
+ color: black;
}
#editor-nav-item .icon,
@@ -267,18 +272,10 @@ img {
background-image: url("../img/editor-icon.png");
}
-#nav-options #editor-nav-item.nav-item.enabled {
- color: black;
-}
-
#preview-nav-item .icon {
background-image: url("../img/preview-icon.png");
}
-#nav-options #preview-nav-item.nav-item.enabled {
- color: black;
-}
-
#preview-nav-item .preview-title {
font-weight: bold;
display: none;
@@ -300,16 +297,6 @@ img {
height: 25px;
}
-#undo-nav-item,
-#redo-nav-item {
- visibility: hidden;
-}
-
-#undo-nav-item.enabled,
-#redo-nav-item.enabled {
- visibility: visible;
-}
-
#undo-nav-item .icon {
display: inline-block;
width: 30px;
@@ -319,7 +306,7 @@ img {
background-position: center center;
}
-#undo-nav-item:hover .icon {
+#undo-nav-item.enabled:hover .icon {
background-image: url("../img/undo-blue.png");
}
@@ -332,7 +319,7 @@ img {
background-position: center center;
}
-#redo-nav-item:hover .icon {
+#redo-nav-item.enabled:hover .icon {
background-image: url("../img/redo-blue.png");
}
@@ -345,7 +332,7 @@ img {
background-position: center center;
}
-#text-nav-item:hover .icon {
+#text-nav-item.enabled:hover .icon {
background-image: url("../img/text-size-blue.png");
}
View
8 index.html
@@ -34,7 +34,7 @@
<div id="nav-options">
<div id="editor-pane-nav-options">
<!-- editor, undo, redo, text size, hinting -->
- <div id="editor-nav-item" class="nav-item enabled">
+ <div id="editor-nav-item" class="nav-item">
<span class="icon">&nbsp;</span>Editor
<div class="pane-indicator enabled"></div>
</div>
@@ -45,20 +45,20 @@
<div id="redo-nav-item" class="nav-item responsive" title="Redo changes">
<span class="icon">&nbsp;</span>Redo
</div>
- <div id="text-nav-item" class="nav-item responsive" title="Change text size">
+ <div id="text-nav-item" class="nav-item responsive enabled" title="Change text size">
<span class="icon">&nbsp;</span>Size
<ul id="text-size-options">
<li data-size="small">Small</li>
<li data-size="normal">Normal</li>
<li data-size="large">Large</li>
</ul>
</div>
- <div id="hints-nav-item" class="nav-item" title="Disable HTML and CSS hints and suggestions">
+ <div id="hints-nav-item" class="nav-item enabled" title="Disable HTML and CSS hints and suggestions">
<span class="checkbox on">✓</span> Show hints</div>
</div>
<div id="preview-pane-nav-options">
<!-- previous, save draft, publish -->
- <div id="preview-nav-item" class="nav-item enabled">
+ <div id="preview-nav-item" class="nav-item">
<span class="icon">&nbsp;</span>Preview<span class="preview-title"></span><div class="pane-indicator enabled"></div>
</div>
<div class="nav-item buttons">

0 comments on commit 72f4ac5

Please sign in to comment.