Merge branch 'master' into feature/add-communities-page

[rails.git] / app / assets / stylesheets / common.scss

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index f8cd32438fc1a5e329de2fbca71b7aa3f00b87b2..ce83a1d935e5327b5ca868c8c6e931b68c31d323 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -55,30 +55,28 @@ small, aside {
 .icon.clipboard   { /* no-r2 */ background-position: -160px 0; }
 .icon.link        { /* no-r2 */ background-position: -180px 0; }
 .icon.close       { /* no-r2 */ background-position: -200px 0; }
 .icon.clipboard   { /* no-r2 */ background-position: -160px 0; }
 .icon.link        { /* no-r2 */ background-position: -180px 0; }
 .icon.close       { /* no-r2 */ background-position: -200px 0; }

-.close-wrap:hover .icon.close,

 .icon.close:hover { /* no-r2 */ background-position: -200px -20px; }
 .icon.check       { /* no-r2 */ background-position: -220px 0; }
 .icon.note        { /* no-r2 */ background-position: -240px 0; }
 .icon.note.grey   { /* no-r2 */ background-position: -240px -20px; }
 .icon.query       { /* no-r2 */ background-position: -260px 0; }
 
 .icon.close:hover { /* no-r2 */ background-position: -200px -20px; }
 .icon.check       { /* no-r2 */ background-position: -220px 0; }
 .icon.note        { /* no-r2 */ background-position: -240px 0; }
 .icon.note.grey   { /* no-r2 */ background-position: -240px -20px; }
 .icon.query       { /* no-r2 */ background-position: -260px 0; }
 

-/* Rules for links */
-
-a {
-  color: #24d;
-  text-decoration: none;
-  outline: 0;
-  &:hover {
-    text-decoration: underline;
-  }
-}
-

 /* Utility for de-emphasizing content */
 
 .text-muted a {
   color: $blue;
 }
 
 /* Utility for de-emphasizing content */
 
 .text-muted a {
   color: $blue;
 }
 

+/* Rules for borders */
+/* These add additional colours to those provided by bootstrap */
+.border-grey {
+  border-color: $grey !important;
+}
+
+.border-lightgrey {
+  border-color: $lightgrey !important;
+}
+

 /* Rules for the header */
 
 #menu-icon {
 /* Rules for the header */
 
 #menu-icon {


@@ -147,7 +145,7 @@ header {
 
 nav.primary {
   .btn-outline-primary {
 
 nav.primary {
   .btn-outline-primary {

-    @include button-outline-variant($green, $white);
+    @include button-outline-variant($green, $color-hover: $white, $active-color: $white);

   }
 
   .disabled {
   }
 
   .disabled {


@@ -192,35 +190,20 @@ nav.secondary {
 
   .login-menu {
     .btn-outline-secondary {
 
   .login-menu {
     .btn-outline-secondary {

-      @include button-outline-variant($darkgrey);
+      @include button-outline-variant($darkgrey, $color-hover: $white, $active-color: $white);

     }
   }
 
   .user-menu {
     .btn-outline-secondary {
     }
   }
 
   .user-menu {
     .btn-outline-secondary {

-      @include button-outline-variant($darkgrey, $darkgrey, white, $darkgrey);
+      @include button-outline-variant($darkgrey, $color-hover: $darkgrey, $active-background: white, $active-border: $darkgrey);

       border-color: $grey;
       &:hover {
         border-color: $grey;
       }
       border-color: $grey;
       &:hover {
         border-color: $grey;
       }

-      &:focus {
-        background-color: white;
-        box-shadow: none;
-      }
-    }
-    &.show .btn-outline-secondary {
-      background-color: white;
-      &:focus {
-        box-shadow: none;
-      }

     }
   }
 
     }
   }
 

-  img.user_thumbnail_tiny {
-    border: 0;
-    border-radius: 3px;
-  }
-

   #inboxanchor {
     display: inline-block;
     height: 25px;
   #inboxanchor {
     display: inline-block;
     height: 25px;


@@ -290,7 +273,8 @@ body.compact-nav {
   margin-bottom: 10px;
   outline: none;
 
   margin-bottom: 10px;
   outline: none;
 

-  &:hover {
+  &:hover,
+  &:focus {

     background-color: black;
   }
 
     background-color: black;
   }
 


@@ -364,49 +348,6 @@ body.compact-nav {
       clear: both;
       width: 100%;
     }
       clear: both;
       width: 100%;
     }

-
-    h2 {
-      font-size: 1.5rem;
-    }
-
-    h3, h4 {
-      margin-top: $lineheight;
-      margin-bottom: $lineheight/2;
-      font-size: 1.25rem;
-    }
-
-    .close-wrap {
-      cursor: pointer;
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: 60px;
-      height: 60px;
-
-      .icon.close {
-        pointer-events: none;
-        position: absolute;
-        right: 20px;
-        top: 20px;
-      }
-    }
-
-    .icon.close {
-      float: right;
-      cursor: pointer;
-    }
-
-    .flash {
-      padding: 15px;
-
-      picture {
-        margin-right: -25px;
-      }
-
-      div.message {
-        margin-left: 30px;
-      }
-    }

   }
 
   .overlay-sidebar #sidebar {
   }
 
   .overlay-sidebar #sidebar {


@@ -658,11 +599,6 @@ body.compact-nav {
   padding: $lineheight/2 $lineheight;
   // background: $offwhite;
   // border-bottom: 1px solid $grey;
   padding: $lineheight/2 $lineheight;
   // background: $offwhite;
   // border-bottom: 1px solid $grey;

-  > .close {
-    float: right;
-    margin-top: 2px;
-    cursor: pointer;
-  }

 }
 
 #browse_status {
 }
 
 #browse_status {


@@ -700,6 +636,28 @@ form {
   }
 }
 
   }
 }
 

+/* Stop bootstrap 5 from floating legends when they don't need to be */
+legend {
+  float: none;
+}
+
+/* Override the text colour for primary and secondary buttons, to match our
+   bootstrap 4 colours. Note this has accessibility issues, which is why
+   bootstrap 5 calculates black as the appropriate colour, and we should
+   reconsider our colours at some point with that in mind. */
+
+.btn-primary {
+  @include button-variant($primary, $primary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
+}
+
+.btn-secondary {
+  @include button-variant($secondary, $secondary, $color: $white, $hover-color: $white, $active-color: $white, $disabled-color: $white);
+}
+
+.btn-outline-secondary {
+  @include button-outline-variant($secondary, $color-hover: $white, $active-color: $white);
+}
+

 /* Rules for the search and direction forms */
 
 header .search_forms,
 /* Rules for the search and direction forms */
 
 header .search_forms,


@@ -784,10 +742,13 @@ tr.turn:hover {
 
 #sidebar .changesets {
   li {
 
 #sidebar .changesets {
   li {

-    cursor: pointer;
-

     &.selected { background: $list-highlight; }
     /* color is derived from changeset bbox fillColor in history.js */
     &.selected { background: $list-highlight; }
     /* color is derived from changeset bbox fillColor in history.js */

+
+    a.stretched-link > span, a:not(.stretched-link), [title] {
+      position: relative;
+      z-index: 2; /* needs to be higher than Bootstrap's stretched link ::after z-index */
+    }

   }
 
   .comments {
   }
 
   .comments {


@@ -813,7 +774,6 @@ tr.turn:hover {
     border-bottom: 1px solid $grey;
 
     h4:first-child {
     border-bottom: 1px solid $grey;
 
     h4:first-child {

-      margin-top: 0;

       word-wrap: break-word;
     }
   }
       word-wrap: break-word;
     }
   }


@@ -822,42 +782,13 @@ tr.turn:hover {
     border-bottom: none;
   }
 
     border-bottom: none;
   }
 

-  .paginate {
-    float: right;
-    padding: 1px 6px;
-    border: 1px solid $lightgrey;
-    border-radius: 3px;
-  }
-
-  .browse-field {
-    margin-bottom: 10px;
-
-    h4 {
-      padding: 5px 0 5px 10px;
-      font-size: 12px;
-      border: 1px solid $grey;
-      border-radius: 4px 4px 0 0;
-      background-color: $offwhite;
-    }
-
-    p {
-      padding: 7px 10px;
-      font-size: 12px;
-      background-color: #FFF;
-      border: 1px solid $grey;
-      border-top: 0;
-      border-radius: 0 0 4px 4px;
-    }
-  }
-

   .browse-tag-list {
     background-color: $offwhite;
   .browse-tag-list {
     background-color: $offwhite;

-    border: 1px solid $grey;
-    border-radius: 3px;

     table-layout: fixed;
     border-collapse: separate;
     border-spacing: 0;
     width: 100%;
     table-layout: fixed;
     border-collapse: separate;
     border-spacing: 0;
     width: 100%;

+    margin-bottom: $spacer;

 
     th, td {
       border-bottom: 1px solid $grey;
 
     th, td {
       border-bottom: 1px solid $grey;


@@ -904,16 +835,6 @@ tr.turn:hover {
     }
   }
 
     }
   }
 

-  .comments-header {
-    float: left;
-  }
-
-  .subscribe-buttons {
-    float: left;
-    margin: 18px 10px 10px;
-    min-width: 80px;
-  }
-

   .subscribe-buttons input {
     font-size: 90%;
     line-height: 15px;
   .subscribe-buttons input {
     font-size: 90%;
     line-height: 15px;


@@ -966,7 +887,7 @@ tr.turn:hover {
   }
 
   .export_area_inputs {
   }
 
   .export_area_inputs {

-    margin-bottom: $lineheight/2;
+    margin-bottom: $spacer;

     input[type="text"] {
       width: 100px;
       text-align: center;
     input[type="text"] {
       width: 100px;
       text-align: center;


@@ -975,8 +896,6 @@ tr.turn:hover {
 
   .export_boxy {
     background: $lightgrey;
 
   .export_boxy {
     background: $lightgrey;

-    border: 1px solid $grey;
-    border-radius: 3px;

 
     #maxlat { margin-top: -1px; }
     #minlon {
 
     #maxlat { margin-top: -1px; }
     #minlon {


@@ -1063,6 +982,7 @@ tr.turn:hover {
     background-image: image-url("sign-up-illustration-arm.png");
     position: absolute;
     z-index: 100;
     background-image: image-url("sign-up-illustration-arm.png");
     position: absolute;
     z-index: 100;

+    pointer-events: none;

   }
 }
 
   }
 }
 


@@ -1083,7 +1003,6 @@ tr.turn:hover {
 
 .content_map {
   height: 200px;
 
 .content_map {
   height: 200px;

-  border: 1px solid $grey;

   margin-bottom: $lineheight;
 }
 
   margin-bottom: $lineheight;
 }
 


@@ -1093,13 +1012,6 @@ tr.turn:hover {
   }
 }
 
   }
 }
 

-/* Rules for the user profile page */
-
-.contact-activity {
-  margin-top: $lineheight;
-  width: 100%;
-}
-

 /* Rules for the user map */
 
 .content_map .leaflet-popup-content {
 /* Rules for the user map */
 
 .content_map .leaflet-popup-content {


@@ -1116,30 +1028,12 @@ tr.turn:hover {
     margin-top: 0 0 0 60px;
     font-size: 12px;
   }
     margin-top: 0 0 0 60px;
     font-size: 12px;
   }

-  img.user_thumbnail {
-    float: left;
-    margin: 0 $lineheight/2 0 0;
-  }

 }
 
 /* Rules for the user list */
 
 #user_list {
   width: 100%;
 }
 
 /* Rules for the user list */
 
 #user_list {
   width: 100%;

-
-  tr {
-    vertical-align: middle;
-  }
-
-  p {
-    margin-top: 0px;
-    margin-bottom: 0px;
-  }
-}
-
-#user_list_actions {
-  float: right;
-  margin-top: $lineheight/2;

 }
 
 /* Rules for the diary list page */
 }
 
 /* Rules for the diary list page */


@@ -1150,26 +1044,9 @@ tr.turn:hover {
   padding-bottom: $lineheight/2;
   border-top: 1px solid $grey;
 
   padding-bottom: $lineheight/2;
   border-top: 1px solid $grey;
 

-  &:first-of-type {
-    margin-top: $lineheight/2;
-  }
-

   &.deleted {
     background-color: #fee;
   }
   &.deleted {
     background-color: #fee;
   }

-
-  .post_heading {
-    margin-bottom: $lineheight;
-
-    h2 {
-      margin-top: 0;
-      margin-bottom: $lineheight/2;
-    }
-  }
-
-  img.user_thumbnail {
-    float: left;
-  }

 }
 
 /* Rules for the diary entry page */
 }
 
 /* Rules for the diary entry page */


@@ -1177,7 +1054,6 @@ tr.turn:hover {
 .diary_entries {
   #map {
     height: 400px;
 .diary_entries {
   #map {
     height: 400px;

-    border: 1px solid $grey;

     display: none;
     margin-bottom: $lineheight;
   }
     display: none;
     margin-bottom: $lineheight;
   }


@@ -1206,10 +1082,6 @@ tr.turn:hover {
   }
 }
 
   }
 }
 

-.diary_entries-show img.user_thumbnail {
-  float: left;
-}
-

 /* Rules for the log in page */
 
 #login_auth_buttons {
 /* Rules for the log in page */
 
 #login_auth_buttons {


@@ -1225,7 +1097,6 @@ tr.turn:hover {
 
 .users-terms {
   .legale {
 
 .users-terms {
   .legale {

-    border: 1px solid $grey;

     padding: $lineheight;
     margin-bottom: $lineheight;
     overflow: auto;
     padding: $lineheight;
     margin-bottom: $lineheight;
     overflow: auto;


@@ -1286,8 +1157,9 @@ tr.turn:hover {
 /* Rules for messages pages */
 
 .messages {
 /* Rules for messages pages */
 
 .messages {

-  input[type="submit"] {
+  button[type="submit"] {

     margin: auto;
     margin: auto;

+    white-space: nowrap;

   }
 
   .inbox-row {
   }
 
   .inbox-row {


@@ -1338,8 +1210,6 @@ tr.turn:hover {
 /* Rules for "flash" notice boxes shown at the top of the content area */
 
 .flash {
 /* Rules for "flash" notice boxes shown at the top of the content area */
 
 .flash {

-  padding: $lineheight;
-

   &.error {
     background-color: #ff7070;
   }
   &.error {
     background-color: #ff7070;
   }


@@ -1412,10 +1282,6 @@ tr.turn:hover {
       vertical-align: middle;
     }
   }
       vertical-align: middle;
     }
   }

-
-  a.reverse_directions {
-    cursor: pointer;
-  }

 }
 
 /* Rules for user images */
 }
 
 /* Rules for user images */


@@ -1423,29 +1289,11 @@ tr.turn:hover {
 img.user_image {
   max-width: 100px;
   max-height: 100px;
 img.user_image {
   max-width: 100px;
   max-height: 100px;

-  border: 1px solid $grey;
-  margin-bottom: $lineheight;
-  float: left;
-  margin-right: $lineheight;
-}
-
-img.user_image_no_margins {
-  max-width: 100px;
-  max-height: 100px;
-  border: 1px solid $grey;

 }
 
 img.user_thumbnail {
   max-width: 50px;
   max-height: 50px;
 }
 
 img.user_thumbnail {
   max-width: 50px;
   max-height: 50px;

-  border: 1px solid $grey;
-  margin-right: $lineheight;
-}
-
-img.user_thumbnail_no_margins {
-  max-width: 50px;
-  max-height: 50px;
-  border: 1px solid $grey;

 }
 
 img.user_thumbnail_tiny {
 }
 
 img.user_thumbnail_tiny {


@@ -1453,7 +1301,6 @@ img.user_thumbnail_tiny {
   height: auto;
   max-width: 25px;
   max-height: 25px;
   height: auto;
   max-width: 25px;
   max-height: 25px;

-  border: 1px solid $grey;

 }
 
 /* Rules for geo microformats */
 }
 
 /* Rules for geo microformats */


@@ -1560,13 +1407,6 @@ dl.dl-inline {
   }
 }
 
   }
 }
 

-/* Customise the background colour of striped tables */
-
-.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 */
 
 .openid_logo {
 /* Rules for OpenID logo */
 
 .openid_logo {


@@ -1579,13 +1419,11 @@ dl.dl-inline {
 .richtext,
 .prose {
   code {
 .richtext,
 .prose {
   code {

-    font-size: 13px;

     background: $lightgrey;
     padding: 2px 3px;
   }
 
   pre {
     background: $lightgrey;
     padding: 2px 3px;
   }
 
   pre {

-    font-size: 13px;

     background: $lightgrey;
     padding: 2px 3px;
     white-space: pre-wrap;
     background: $lightgrey;
     padding: 2px 3px;
     white-space: pre-wrap;


@@ -1611,10 +1449,6 @@ dl.dl-inline {
   }
 }
 
   }
 }
 

-.comments .richtext {
-  margin-left: 70px;
-}
-

 /* Rules for the user notes list */
 
 .note_list {
 /* Rules for the user notes list */
 
 .note_list {


@@ -1632,19 +1466,10 @@ dl.dl-inline {
 
 /* Rules for the "Welcome" page */
 .site-welcome, .site-fixthemap {
 
 /* Rules for the "Welcome" page */
 .site-welcome, .site-fixthemap {

-  .center {
-    text-align: center;
-    .sprite {
-      float: none;
-      margin: auto;
-    }
-  }
-

   .sprite {
     background-image: image-url("welcome-sprite.png");
     background-size: 500px 250px;
     display: block;
   .sprite {
     background-image: image-url("welcome-sprite.png");
     background-size: 500px 250px;
     display: block;

-    float: left;

   }
 
   .icon-list {
   }
 
   .icon-list {


@@ -1694,15 +1519,6 @@ dl.dl-inline {
     /* no-r2 */ background-position: -350px 0;
   }
 
     /* no-r2 */ background-position: -350px 0;
   }
 

-  .start-mapping {
-    margin: auto;
-    cursor: pointer;
-    border: none;
-    padding: 20px 40px;
-    font-size: 30px;
-    text-decoration: none;
-  }
-

   .icon.note {
     background-color: #333;
     border-radius: 4px;
   .icon.note {
     background-color: #333;
     border-radius: 4px;


@@ -1744,8 +1560,8 @@ dl.dl-inline {
 
     .byosm span {
       display: inline-block;
 
     .byosm span {
       display: inline-block;

-      width: 20px;
-      margin-left: -20px;
+      width: 1em;
+      margin-left: -1em;

     }
   }
 
     }
   }