New widget icons

Author: sebastian-lenz

bin/themes/default/assets/css/main.css

@@ -18,7 +18,7 @@
             <div class="table-wrap">
                 <div class="table-cell" id="tsd-search" data-index="{{relativeURL "assets/js/search.js"}}" data-base="{{relativeURL "./"}}">
                     <div class="field">
-                        <label for="tsd-search-field">Search</label>
+                        <label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
                         <input id="tsd-search-field" type="text" />
                     </div>
 
@@ -30,20 +30,27 @@
                     <a href="{{relativeURL "index.html"}}" class="title">{{project.name}}</a>
                 </div>
 
-                <div class="table-cell" id="tsd-filter">
-                    <input type="checkbox" id="tsd-filter-inherited" checked />
-                    <label for="tsd-filter-inherited">Inherited</label>
+                <div class="table-cell" id="tsd-widgets">
+                    <div id="tsd-filter">
+                        <a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
+                        <div class="tsd-filter-group">
+                            <input type="checkbox" id="tsd-filter-inherited" checked />
+                            <label class="tsd-widget" for="tsd-filter-inherited">Inherited</label>
 
-                    <input type="checkbox" id="tsd-filter-private" checked />
-                    <label for="tsd-filter-private">Private</label>
+                            <input type="checkbox" id="tsd-filter-private" checked />
+                            <label class="tsd-widget" for="tsd-filter-private">Private</label>
 
-                    {{#unless settings.excludeExternals}}
-                        <input type="checkbox" id="tsd-filter-externals" checked />
-                        <label for="tsd-filter-externals">Externals</label>
-                    {{/unless}}
+                            {{#unless settings.excludeExternals}}
+                                <input type="checkbox" id="tsd-filter-externals" checked />
+                                <label class="tsd-widget" for="tsd-filter-externals">Externals</label>
+                            {{/unless}}
 
-                    <input type="checkbox" id="tsd-filter-only-exported" />
-                    <label for="tsd-filter-only-exported">Only exported</label>
+                            <input type="checkbox" id="tsd-filter-only-exported" />
+                            <label class="tsd-widget" for="tsd-filter-only-exported">Only exported</label>
+                        </div>
+                    </div>
+
+                    <a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
                 </div>
             </div>
         </div>
@@ -143,6 +150,7 @@
     </div>
 {{/unless}}
 
+<div class="overlay"></div>
 <script src="{{relativeURL "assets/js/main.js"}}"></script>
 <script>if (location.protocol == 'file:') document.write('<script src="{{relativeURL "assets/js/search.js"}}"><' + '/script>');</script>
 

bin/themes/default/assets/images/widgets.png

@@ -2,8 +2,8 @@
 {{> comment}}
 
 {{#if children}}
-    <h4>Parameters</h4>
-    <ul>
+    <h4 class="tsd-parameters-title">Parameters</h4>
+    <ul class="tsd-parameters">
         {{#each children}}
             <li>
                 <h5>{{#compact}}
@@ -24,7 +24,7 @@
 {{/if}}
 
 {{#if type}}
-    <h4>Returns {{#with type}}{{>type}}{{/with}}</h4>
+    <h4 class="tsd-returns-title">Returns {{#with type}}{{>type}}{{/with}}</h4>
     {{#if comment.returns}}
         {{#markdown}}{{{comment.returns}}}{{/markdown}}
     {{/if}}

bin/themes/default/assets/images/[email protected]

@@ -1,16 +1,39 @@
-// Toolbar
+// Fonts
 //
-%TOOLBAR_SHADOW
-    box-shadow: 0 0 4px rgba(#000, 0.5)
+$FONT_FAMILY: 'Segoe UI', sans-serif
+$FONT_FAMILY_MONO: Menlo, Monaco, Consolas, 'Courier New', monospace
 
-$TOOLBAR_COLOR: #fff
-$TOOLBAR_TEXT_COLOR: #333
-$TOOLBAR_HEIGHT: 40px
+$FONT_SIZE: 16px
+$FONT_SIZE_MONO: 14px
+
+$LINE_HEIGHT: 1.333em
 
 
-$COLOR_SECTION: #fff
+// Colors
+//
 $COLOR_BACKGROUND: #fdfdfd
 $COLOR_TEXT: #222
+$COLOR_TEXT_ASIDE: #808080
+$COLOR_LINK: #4da6ff
+
+$COLOR_MENU_DIVIDER: #eee
+$COLOR_MENU_DIVIDER_FOCUS: #000
+$COLOR_MENU_LABEL: #808080
+
+$COLOR_PANEL: #fff
+$COLOR_PANEL_DIVIDER: #eee
 
-$FONT-FAMILY: 'Segoe UI', sans-serif
-$FONT_SIZE: 16px
+$COLOR_COMMENT_TAG: #808080
+$COLOR_COMMENT_TAG_TEXT: #fff
+
+$COLOR_CODE_BACKGROUND: rgba(#000, 0.04)
+
+$COLOR_TS: #9600ff
+$COLOR_TS_INTERFACE: #7da01f
+$COLOR_TS_ENUM: #cc9900
+$COLOR_TS_CLASS: #4da6ff
+$COLOR_TS_PRIVATE: #808080
+
+$TOOLBAR_COLOR: #fff
+$TOOLBAR_TEXT_COLOR: #333
+$TOOLBAR_HEIGHT: 40px

bin/themes/default/assets/js/main.js

@@ -18,8 +18,8 @@ dl.tsd-comment-tags
         padding: 1px 5px
         margin: 0 10px 0 0
         border-radius: 4px
-        border: 1px solid #999
-        color: #999
+        border: 1px solid $COLOR_COMMENT_TAG
+        color: $COLOR_COMMENT_TAG
         font-size: 0.8em
         font-weight: normal
 
@@ -41,7 +41,7 @@ dl.tsd-comment-tags
 //
 .tsd-panel.tsd-comment .lead
     font-size: 1.1em
-    line-height: 1.333em
+    line-height: $LINE_HEIGHT
     margin-bottom: 2em
 
     &:last-child

bin/themes/default/layouts/default.hbs

@@ -29,49 +29,44 @@
 // </div>
 //
 #tsd-filter
-    display: table-cell
-    font-size: 0
-    line-height: 0
+    position: relative
+    display: inline-block
+    height: $TOOLBAR_HEIGHT
+    vertical-align: bottom
 
     .no-filter &
         display: none
 
-    input
-        display: none
-
-    label
-        transition: color 0.2s, background-color 0.2s, opacity 0.2s
+    .tsd-filter-group
         display: inline-block
         height: $TOOLBAR_HEIGHT
-        margin: 0 0 0 1px
-        padding: 0 10px
-        color: $TOOLBAR_TEXT_COLOR
-        background-color: transparent
-        font-size: $FONT_SIZE
-        line-height: $TOOLBAR_HEIGHT
-        cursor: pointer
-        opacity: 0.75
+        vertical-align: bottom
+        white-space: nowrap
+
+    input
+        display: none
 
-        &:hover
-            opacity: 1
+    +size-xs-sm
+        .tsd-filter-group
+            display: block
+            position: absolute
+            top: $TOOLBAR_HEIGHT
+            right: 20px
+            height: auto
+            background-color: $COLOR_PANEL
+            visibility: hidden
+            transform: translate(50%,0)
+            box-shadow: 0 0 4px rgba(#000, 0.25)
 
-        &:before
-            content: ''
-            display: inline-block
-            width: 11px
-            height: 11px
-            margin: 0 4px 3px 0
-            border: 1px solid $TOOLBAR_TEXT_COLOR
-            vertical-align: middle
-            border-radius: 2px
+            .has-options &
+                visibility: visible
 
-    input:checked + label
-        &:before
-            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAg0lEQVR42mP8//8/A7GAiYEEwAIiTExM8KlpBmK1M2fOhLMQMKwKiGuA+B6yM5yBOBRNIUhRKxDfAmI3ZMWTgXgVEEcgKQRZfxuIPYH4LrLiRCB+B8SLgHgtVCHIRA+YE5AVnwRiPyD+DsRB2BSiB91RIA4G4oNA7AXE99F9y0izSAEAi5sfuLrn8xgAAAAASUVORK5CYII=)
-            background-size: 11px 11px
+            .to-has-options &
+                animation: fade-in 0.2s
 
-            +retina
-                background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAMAAADzapwJAAAAbFBMVEX///8zMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMGjw0YAAAAI3RSTlMAAHd5drsP6/x6EXg5HQa9tHTD6qM0ewSp5jcHsgu/EMG+fFYgEsoAAAB3SURBVHhetc1HFsMgDEVRf+PaS3ov2v8eDRKEE5Ipb6Y7+Erihu9U3vzhmWj85YyIKuZQqRYeeqepUQXmYio70VZUeCHasCujLSxv9VHugD3vwvHhqP105m8pPozLVUNl1TNuuSannlHcRQPG48kaMprXG56jtgI0cQrrsMDSOQAAAABJRU5ErkJggg==)
+            .from-has-options &
+                animation: fade-out 0.2s
 
-        &:hover
-            opacity: 1
+        label
+            display: block
+            padding-right: 20px