]> git.openstreetmap.org Git - rails.git/blobdiff - app/assets/stylesheets/common.scss
Refactor away from global form control styling
[rails.git] / app / assets / stylesheets / common.scss
index df0b072e0fbf5617d2c0ad8eb15c8c386d513b83..54ecb30e23b964270745372a05a727a32b487e76 100644 (file)
@@ -92,25 +92,6 @@ a {
   }
 }
 
-/* General styles for tables */
-
-table {
-  width: 100%;
-  margin-bottom: $lineheight;
-  th, td {
-    text-align: left;
-    padding: $lineheight/4;
-    line-height: $lineheight;
-  }
-  th {
-    font-weight: 600;
-    vertical-align: top;
-  }
-  td {
-    vertical-align: middle;
-  }
-}
-
 /* Utility for de-emphasizing content */
 
 .deemphasize {
@@ -753,118 +734,6 @@ header .search_forms,
   display: none;
 }
 
-.search_form,
-.directions_form {
-  position: relative;
-  padding: $lineheight/2;
-  background-color: $lightgrey;
-
-  .query_wrapper {
-    position: relative;
-    overflow: hidden;
-    border-radius: 2px 0 0 2px;
-  }
-
-  input[type=text] {
-    width: 100%;
-    height: 30px;
-    transition: 300ms linear;
-  }
-
-  input[type=text].overflow {
-    border-right: none;
-    border-radius: 3px 0px 0px 3px;
-  }
-
-  input:focus {
-    outline: none;
-    box-shadow: 0px 0px 7px $vibrant-green;
-  }
-
-  input[type=submit].float {
-    float: right;
-    width: auto;
-    min-width: 0;
-    border-radius: 0 2px 2px 0;
-  }
-
-  input.error {
-    background-color: rgba($red, 0.4);
-  }
-
-  select {
-    /* this next line is to polyfill the vertical alignment of text within a select element,
-     * which is different between firefox and chrome. */
-    padding: 0.3em 0;
-  }
-
-  .query_options {
-    text-align: right;
-    font-size: 10px;
-    color: $blue;
-  }
-
-  .describe_location {
-    position: absolute;
-    top: 6px;
-    right: 6px;
-    font-size: 10px;
-    color: $blue;
-  }
-
-  .switch_link {
-    float: right;
-    width: auto;
-    min-width: 0;
-    margin-left: 6px;
-  }
-
-  img.button {
-    display: block;
-    width: 20px;
-    height: 20px;
-  }
-
-  span.force_width {
-    width: 100%;
-    padding-right: 25px;
-    display: block;
-  }
-
-  select.routing_engines {
-    min-height: 30px;
-    margin: 0px 0px 5px 25px;
-  }
-
-  input.routing_go {
-    min-width: 100px;
-    float: right;
-  }
-
-  div.header {
-    width: 100%;
-    height: 30px;
-  }
-
-  div.line {
-    width: 100%;
-    margin: 0px 0px 5px 0px;
-  }
-
-  div.loader_copy {
-    display: none;
-
-    img {
-      vertical-align: middle;
-    }
-  }
-
-  a.reverse_directions {
-    cursor: pointer;
-    margin: 0px 0px 5px 25px;
-  }
-}
-
 /* Rules for the map key which appears in the popout sidebar */
 
 #mapkey {
@@ -873,9 +742,6 @@ header .search_forms,
     margin-left: auto;
     margin-right: auto;
   }
-  td {
-    padding: 0 $lineheight/4 $lineheight/4 $lineheight/4;
-  }
 }
 
 /* Rules for search sidebar */
@@ -1029,6 +895,7 @@ tr.turn:hover {
     table-layout: fixed;
     border-collapse: separate;
     border-spacing: 0;
+    width: 100%;
 
     th, td {
       border-bottom: 1px solid $grey;
@@ -1300,18 +1167,6 @@ tr.turn:hover {
   float: right;
 }
 
-/* Rules for the trace list shown by the traces tab etc */
-
-#trace_list {
-  border-width: 0px;
-  text-align: right;
-
-  .trace_summary {
-    font-size: 12px;
-    color: gray;
-  }
-}
-
 /* Rules for the new trace form */
 
 #new_trace {
@@ -1624,43 +1479,21 @@ tr.turn:hover {
 /* Rules for messages pages */
 
 .messages {
-  width: 100%;
-  border: 1px solid $grey;
-
   input[type="submit"] {
     margin: auto;
   }
-  tbody tr {
-    border-top: 1px solid $grey;
-  }
 
   .inbox-row {
     background: $offwhite;
   }
 
   .inbox-row-unread {
-    background:#CBEEA7;
+    background: #CBEEA7;
   }
 
   .right {
     float: right;
   }
-
-  tr td,
-  tr th {
-    padding: $lineheight/4;
-  }
-  p:last-child,
-  h2:last-child,
-  h3:last-child,
-  ol:last-child,
-  ul:last-child {
-    margin-bottom:0;
-  }
-  tr td {
-    height: 30px;
-    border-right: 1px solid $lightgrey;
-  }
 }
 
 .inbox-row .inbox-mark-read {
@@ -1829,44 +1662,205 @@ tr.turn:hover {
     float: left;
     margin-top: 5px;
   }
-}
 
-#remember_me_openid {
-  display: block;
-}
+  #remember_me_openid {
+    display: block;
+  }
 
-select {
-  padding: 2px;
-}
+  select {
+    padding: 2px;
+  }
 
-input[type="checkbox"],
-input[type="radio"] {
-    margin-right: 5px;
-}
+  input[type="checkbox"],
+  input[type="radio"] {
+      margin-right: 5px;
+  }
 
-input[type="text"],
-input[type="email"],
-input[type="url"],
-input[type="password"],
-textarea {
-  color: #222;
-  background-color: #fff;
-  border: 1px solid $grey;
-  border-radius: 3px;
-  padding: 2px 5px;
-  margin: 0;
-  width: 200px;
+  input[type="text"],
+  input[type="email"],
+  input[type="url"],
+  input[type="password"],
+  textarea {
+    color: #222;
+    background-color: #fff;
+    border: 1px solid $grey;
+    border-radius: 3px;
+    padding: 2px 5px;
+    margin: 0;
+    width: 200px;
 
-  &.field_with_errors {
-    border: 2px solid #ff7070;
+    &.field_with_errors {
+      border: 2px solid #ff7070;
+    }
   }
-}
 
-textarea {
-  padding: 5px;
-  width: 100%;
-  min-height: 50px;
-  resize: vertical;
+  textarea {
+    padding: 5px;
+    width: 100%;
+    min-height: 50px;
+    resize: vertical;
+  }
+
+
+  /* Utility for general button styles */
+
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"],
+  a.button {
+    cursor: pointer;
+    border: 0;
+    display: inline-block;
+    padding: $lineheight/4 $lineheight/2;
+    min-height: 20px + $lineheight/2;
+    min-width: 120px;
+    margin: 0 0 $lineheight/2 0;
+    color: white;
+    background: $blue;
+    text-align: center;
+    border-radius: 2px;
+    &:hover {
+      background: darken($blue, $hovercolor);
+      text-decoration: none;
+    }
+    &.deemphasize {
+      background: $lightblue;
+      &:hover {
+        background: darken($lightblue, $hovercolor);
+      }
+    }
+    &:disabled {
+      background: $lightgrey;
+      &:hover {
+        background: $lightgrey;
+      }
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"] {
+    line-height: normal;
+  }
+
+  a.button {
+    line-height: 20px;
+  }
+
+  .search_form,
+  .directions_form {
+    position: relative;
+    padding: $lineheight/2;
+    background-color: $lightgrey;
+
+    .query_wrapper {
+      position: relative;
+      overflow: hidden;
+      border-radius: 2px 0 0 2px;
+    }
+
+    input[type=text] {
+      width: 100%;
+      height: 30px;
+      transition: 300ms linear;
+    }
+
+    input[type=text].overflow {
+      border-right: none;
+      border-radius: 3px 0px 0px 3px;
+    }
+
+    input:focus {
+      outline: none;
+      box-shadow: 0px 0px 7px $vibrant-green;
+    }
+
+    input[type=submit].float {
+      float: right;
+      width: auto;
+      min-width: 0;
+      border-radius: 0 2px 2px 0;
+    }
+
+    input.error {
+      background-color: rgba($red, 0.4);
+    }
+
+    select {
+      /* this next line is to polyfill the vertical alignment of text within a select element,
+       * which is different between firefox and chrome. */
+      padding: 0.3em 0;
+    }
+
+    .query_options {
+      text-align: right;
+      font-size: 10px;
+      color: $blue;
+    }
+
+    .describe_location {
+      position: absolute;
+      top: 6px;
+      right: 6px;
+      font-size: 10px;
+      color: $blue;
+    }
+
+    .switch_link {
+      float: right;
+      width: auto;
+      min-width: 0;
+      margin-left: 6px;
+    }
+
+    img.button {
+      display: block;
+      width: 20px;
+      height: 20px;
+    }
+
+    span.force_width {
+      width: 100%;
+      padding-right: 25px;
+      display: block;
+    }
+
+    select.routing_engines {
+      min-height: 30px;
+      margin: 0px 0px 5px 25px;
+    }
+
+    input.routing_go {
+      min-width: 100px;
+      float: right;
+    }
+
+    div.header {
+      width: 100%;
+      height: 30px;
+    }
+
+    div.line {
+      width: 100%;
+      margin: 0px 0px 5px 0px;
+    }
+
+    div.loader_copy {
+      display: none;
+
+      img {
+        vertical-align: middle;
+      }
+    }
+
+    a.reverse_directions {
+      cursor: pointer;
+      margin: 0px 0px 5px 25px;
+    }
+  }
 }
 
 /* Rules for user images */
@@ -1946,54 +1940,6 @@ div.secondary-actions {
 
 .inner02 { padding: 0 $lineheight;}
 
-/* Utility for general button styles */
-
-input[type="button"],
-input[type="submit"],
-input[type="reset"],
-a.button {
-  cursor: pointer;
-  border: 0;
-  display: inline-block;
-  padding: $lineheight/4 $lineheight/2;
-  min-height: 20px + $lineheight/2;
-  min-width: 120px;
-  margin: 0 0 $lineheight/2 0;
-  color: white;
-  background: $blue;
-  text-align: center;
-  border-radius: 2px;
-  &:hover {
-    background: darken($blue, $hovercolor);
-    text-decoration: none;
-  }
-  &.deemphasize {
-    background: $lightblue;
-    &:hover {
-      background: darken($lightblue, $hovercolor);
-    }
-  }
-  &:disabled {
-    background: $lightgrey;
-    &:hover {
-      background: $lightgrey;
-    }
-  }
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-input[type="button"],
-input[type="submit"],
-input[type="reset"] {
-  line-height: normal;
-}
-
-a.button {
-  line-height: 20px;
-}
-
 .buttons {
   min-width: 200px;
   input[type="submit"],
@@ -2048,16 +1994,11 @@ a.button {
   }
 }
 
-/* Rules for doing distinct colour of alternate table rows */
-
-.table0,
-.item0 {
-  background: $offwhite;
-}
+/* Customise the background colour of striped tables */
 
-.table1,
-.item1 {
-  background: #fff;
+.table-striped > tbody > tr:nth-child(2n+1) > td,
+.table-striped > tbody > tr:nth-child(2n+1) > th {
+   background-color: $offwhite;
 }
 
 /* Rules for OpenID logo */
@@ -2197,15 +2138,7 @@ input.richtext_title[type="text"] {
 
 .note_list {
   tr.creator {
-    background-color: $lightgrey;
-  }
-
-  td {
-    padding: 3px;
-  }
-
-  p {
-    margin-bottom: 0px;
+    background-color: $offwhite;
   }
 }
 
@@ -2413,9 +2346,3 @@ input.richtext_title[type="text"] {
   background: $lightgrey;
   opacity: 0.7;
 }
-
-.issues-list {
-  td:nth-child(2) {
-    white-space: nowrap;
-  }
-}