styling for add new

1 files changed, 28 insertions, 108 deletions

diff --git a/css/navigation.css b/css/navigation.css
index f8135d1b5..ac15fc4b9 100644
--- a/css/navigation.css
+++ b/css/navigation.css
@@ -9,6 +9,7 @@
  */
 
 /* add new feed or folder */
+/* button */
 #app-navigation .add-new .heading {
     height: 44px;
     width: 100%;
@@ -31,75 +32,56 @@
     font-weight: normal;
 }
 
+/* actual form content */
 #app-navigation .add-new-popup {
-    display: none;
-    height: 150px;
-    padding: 15px 10px;
+    /*display: none;*/
+    padding: 10px;
     box-shadow: inset 0px 0px 10px #dedede;
     border-top: 1px solid #dedede;
     border-bottom: 1px solid #dedede;
 }
 
-#app-navigation .add-new-popup input[type=text] {
-    width: 170px;
-}
-
+#app-navigation .add-new-popup input,
 #app-navigation .add-new-popup select {
-    width: 170px;
-    margin-top: 1px !important;
-    height: 30px;
-    background-color: #eee;
-}
-
-#app-navigation .add-new-popup input {
-    margin-top: 15px;
-    box-sizing: border-box;
+    width: 100%;
+    height: 36px;
+    padding: 5px;
+    margin-right: 0;
 }
 
-#app-navigation .add-new-popup input,
 #app-navigation .add-new-popup select {
-    margin: 0 0 5px 0;
-    display: inline-block;
-    float: left;
+    width: calc(100% - 36px);
+    border-right: 0;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
-    border-right: 0;
+    float: left;
 }
 
-#app-navigation .add-new-popup button {
-    margin: 0 0 5px 0;
-    display: inline-block;
-    float: left;
+#app-navigation .add-new-popup .add-new-folder-primary,
+#app-navigation .add-new-popup .add-new-folder-secondary {
+    float: right;
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
-    height: 30px !important;
-    margin-top: 1px;
+    width: 36px;
+    height: 36px;
+    margin-left: 0;
+    margin-right: 0;
 }
 
-#app-navigation .add-new-popup .action-button {
-    width: 30px;
-    background-position: center;
-    background-repeat: no-repeat;
-}
-
-#app-navigation .add-new-popup .back-button {
+#app-navigation .add-new-popup .add-new-folder-secondary {
     border-radius: 0;
-    background-image: url('../img/delete.svg');
+    border-right: 0;
+    border-left: 0;
+    margin-left: 0;
 }
 
-#app-navigation .add-new-popup .new-button {
-    border-radius: 0;
-    background-image: url('../img/add.svg');
-    border-top-right-radius: 5px;
-    border-bottom-right-radius: 5px;
+#app-navigation .add-new-popup input[name='folderName'] {
+    width: calc(100% - 72px);
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    float: left;
 }
 
-#app-navigation .add-new-popup .create-button {
-    border-radius: 0;
-    background-image: url('../img/mark_read.svg');
-    border-top-right-radius: 5px;
-    border-bottom-right-radius: 5px;
-}
 
 #app-navigation .add-new-popup .error {
     padding: 0 0 10px 0;
@@ -135,42 +117,6 @@
     padding-right: 0px;
 }
 
-#app-navigation .utils {
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-}
-
-#app-navigation .utils > * {
-    float: right;
-}
-
-#app-navigation .utils button {
-    margin: 0;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-color: transparent;
-    border: 0;
-    box-shadow: none;
-    display: none;
-    height: 30px;
-    width: 22px;
-}
-
-#app-navigation li:hover > .utils button {
-    display: block;
-}
-
-/* only display the delete button when the feed is active */
-#app-navigation li:hover > .utils .delete-button {
-    display: none;
-}
-
-#app-navigation li.active > .utils .delete-button {
-    display: block;
-}
-
 .folder {
     text-transform: uppercase;
 }
@@ -179,20 +125,6 @@
     text-transform: none;
 }
 
-.starred .unread-counter {
-    font-weight: normal !important;
-}
-
-
-button.action {
-    opacity: .5;
-}
-
-button.action:hover {
-    opacity: 1;
-}
-
-
 #app-navigation li:hover > .utils {
     display: block;
 }
@@ -205,18 +137,6 @@ button.action:hover {
     text-transform: uppercase;
 }
 
-.delete-icon {
-    background-image: url('../img/delete.svg');
-}
-
-.rename-feed-icon {
-    background-image: url('../img/rename.svg');
-}
-
-.mark-read-icon {
-    background-image: url('../img/mark_read.svg');
-}
-
 .rename-feed input {
     margin: 1px 0 0px 5px;
     border-right: 1px solid #ddd;