Merge pull request #167 from opendatakit/cxlt/styles2

clean up a bunch of little css nits.
getodk · Nov 2, 2018 · 28c68ef · 28c68ef
2 parents 4b12e08 + baa94ae
commit 28c68ef
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 15 deletions.
diff --git a/lib/components/app.vue b/lib/components/app.vue
@@ -148,6 +148,11 @@ h1 {
   margin-bottom: 3px;
 }
 
+a:focus {
+  background-color: transparentize(#000, 0.94);
+  outline: none;
+}
+
 .text-muted {
   color: $color-text-muted;
 }
@@ -200,6 +205,10 @@ a:hover, a:focus {
 
 [class^="icon-"], [class*=" icon-"] {
   vertical-align: -1px;
+
+  .btn &, a & {
+    margin-right: 3px;
+  }
 }
 
 .btn {
@@ -209,6 +218,11 @@ a:hover, a:focus {
   overflow: hidden;
   padding: 6px 10px 5px;
   position: relative;
+
+  &:focus {
+    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.18);
+    outline: none;
+  }
 }
 
 .btn-primary {
@@ -422,7 +436,7 @@ a:hover, a:focus {
   }
 
   .panel-body {
-    padding: $padding-top-table-data $padding-right-table-data
+    padding: 14px $padding-right-table-data
              $padding-bottom-table-data $padding-left-table-data;
 
     hr {
@@ -469,6 +483,11 @@ a:hover, a:focus {
       &:hover {
         border-bottom-color: $color-accent-primary;
       }
+
+      &:focus {
+        border-bottom-color: $color-action-foreground;
+        outline: none;
+      }
     }
 
     &.active > a {

diff --git a/lib/components/form/attachment/upload-files.vue b/lib/components/form/attachment/upload-files.vue
@@ -64,9 +64,3 @@ export default {
   }
 };
 </script>
-
-<style lang="sass">
-#form-attachment-upload-files a[role="button"] {
-  margin-left: 5px;
-}
-</style>
diff --git a/lib/components/form/new.vue b/lib/components/form/new.vue
@@ -168,11 +168,13 @@ export default {
 <style lang="sass">
 @import '../../../assets/scss/variables';
 
+$drop-zone-vpadding: 15px;
+
 #form-new-drop-zone {
   background-color: $color-panel-input-background;
   border: 1px dashed $color-subpanel-border;
-  padding-bottom: 15px;
-  padding-top: 15px;
+  padding-bottom: $drop-zone-vpadding;
+  padding-top: $drop-zone-vpadding;
   text-align: center;
 
   &.form-new-dragover {
@@ -186,6 +188,10 @@ export default {
 }
 
 #form-new-filename {
-  margin-top: 5px;
+  background-color: $color-input-background;
+  border-top: 1px solid #ddd;
+  margin-bottom: -$drop-zone-vpadding;
+  margin-top: 10px;
+  padding: 6px 0;
 }
 </style>
diff --git a/lib/components/form/submission/list.vue b/lib/components/form/submission/list.vue
@@ -342,6 +342,7 @@ export default {
       // Adding min-width so that the table's width does not increase as the row
       // numbers increase.
       min-width: 42px;
+      padding-top: 11px;
       text-align: right;
       vertical-align: middle;
     }
@@ -456,18 +457,22 @@ export default {
 }
 
 #form-submission-list-message {
-  margin: 0 auto 20px;
+  margin-left: 28px;
+  padding-bottom: 38px;
   position: relative;
-  width: 375px;
 
   #form-submission-list-spinner-container {
+    float: left;
+    margin-right: 8px;
     position: absolute;
-    top: 9px;
+    top: 8px;
+    width: 16px; // TODO: eventually probably better not to default spinner to center.
   }
 
   #form-submission-list-message-text {
-    color: $color-text-muted;
-    margin-left: 20px;
+    color: #555;
+    font-size: 12px;
+    padding-left: 24px;
   }
 }
 </style>
diff --git a/lib/components/navbar.vue b/lib/components/navbar.vue
@@ -191,6 +191,13 @@ $shadow-color: #dedede;
           border-top-color: transparentize(#fff, 0.3);
           transition-duration: 0s;
         }
+
+        &:focus {
+          border-top-color: transparentize(#fff, 0.15);
+          box-shadow: 0 3px 0 transparentize(#000, 0.9);
+          outline: none;
+          transition-duration: 0s;
+        }
       }
 
       .active > a, .open > a {