Feature/material textbox (#5)

* Updated textbox style with rounded conrners and minor transition tweaks * - Fixed hamburger menu - Cleaned up css - Updated screenshot and changelog * Removed 'usability improvements' section from the index page.
ovasquez · Aug 28, 2020 · 81ba0d0 · 81ba0d0
1 parent d862908
commit 81ba0d0
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 25 deletions.
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## Version 0.5.0 - Aug 27th 2020
+
+- Updated textbox style with rounded conrners and minor transition tweaks.
+- Fixed hover on hamburger menu (small screens).
+
 ## Version 0.4.0 - May 19th 2020
 
 - Usability improvements and minor style changes in textboxes.

diff --git a/docs/images/index/docfx-screenshot.png b/docs/images/index/docfx-screenshot.png
diff --git a/docs/images/screenshot-1-shadow.png b/docs/images/screenshot-1-shadow.png
diff --git a/docs/images/screenshot-1.png b/docs/images/screenshot-1.png
diff --git a/docs/images/screenshot-2-shadow.png b/docs/images/screenshot-2-shadow.png
diff --git a/docs/images/screenshot-2.png b/docs/images/screenshot-2.png
diff --git a/docs/index.md b/docs/index.md
@@ -7,19 +7,6 @@ The colors were chosen using <https://material.io/tools/color>.
 
 ![DocFX Material Site](./images/index/docfx-screenshot.png)
 
-## Usability improvements
-
-- Highlight on search box
-
-<img src="./images/index/docfx-search.gif" alt="Search highlights" class="small-image"/>
-
-<br/>
-<br/>
-
-- Highlight on filter box
-
-<img src="./images/index/docfx-filter.gif" alt="Filter highlights" class="small-image"/>
-
 ## Install
 
 1. Download the source or the zipped file from the [releases](https://github.com/ovasquez/docfx-material/releases).

diff --git a/material/styles/main.css b/material/styles/main.css
@@ -4,11 +4,12 @@
  --header-ft-color: #fff;
  --highlight-light: #5e92f3;
  --highlight-dark: #003c8f;
- --accent-dim: #eee;
+ --accent-dim: #e0e0e0;
+ --accent-super-dim: #f3f3f3;
  --font-color: #34393e;
  --card-box-shadow: 0 1px 2px 0 rgba(61, 65, 68, 0.06), 0 1px 3px 1px rgba(61, 65, 68, 0.16);
- --under-box-shadow: 0 4px 4px -2px #eee;
- --search-box-shadow: 0px 0px 5px 0px rgba(255,255,255,1);
+ --search-box-shadow: 0 1px 2px 0 rgba(41, 45, 48, 0.36), 0 1px 3px 1px rgba(41, 45, 48, 0.46);
+ --transition: 350ms;
 }
 
 body {
@@ -128,6 +129,7 @@ article h4 {
  background-color: var(--header-bg-color);
  border-bottom: 3px solid transparent;
  padding-bottom: 12px;
+ transition: 350ms;
 }
 
 .navbar-inverse .navbar-nav > li > a:focus,
@@ -147,15 +149,13 @@ article h4 {
 
 .navbar-form .form-control {
  border: 0;
- border-radius: 0;
-}
-
-.navbar-form .form-control:hover {
+ border-radius: 4px;
  box-shadow: var(--search-box-shadow);
+ transition:var(--transition);
 }
 
-.toc-filter > input:hover {
- box-shadow: var(--under-box-shadow);
+.navbar-form .form-control:hover {
+ background-color: var(--accent-dim);
 }
 
 /* NAVBAR TOGGLED (small screens) */
@@ -170,7 +170,7 @@ article h4 {
 
 .navbar-inverse .navbar-toggle:focus,
 .navbar-inverse .navbar-toggle:hover {
- background-color: var(--header-ft-color);
+ background-color: var(--highlight-dark);
 }
 
 /* SIDEBAR */
@@ -196,13 +196,20 @@ article h4 {
 }
 
 .toc-filter {
- padding: 10px;
+ padding: 5px;
  margin: 0;
+ box-shadow: var(--card-box-shadow);
+ transition:var(--transition);
+}
+
+.toc-filter:hover {
+ background-color: var(--accent-super-dim);
 }
 
 .toc-filter > input {
  border: none;
- border-bottom: 2px solid var(--accent-dim);
+ background-color: inherit;
+ transition: inherit;
 }
 
 .toc-filter > .filter-icon {