Merge pull request #295 from DemocracyLab/peter/reactstrap4

Peter/reactstrap4

Author: marlonkeating

civictechprojects/static/css/_bootstrapoverride.scss

@@ -1,3 +1,5 @@
+//create an XXL viewport (grid breakpoint and container)
+
 $grid-breakpoints: (
   // Extra small screen / phone
   xs: 0,
@@ -21,4 +23,17 @@ $container-max-widths: (
   xxl: 1400px
 );
 
+//define our font stack
 $font-family-sans-serif: 'Montserrat',-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+
+//add DL colors to themes for button variants, etc
+$theme-colors: (
+  "primary": #f79e02, // use this for "action"
+  "success": #528305, // check for hover #395e00
+  "danger": #e4100e, // check for hover #b20000
+  "info": #107fb0 // check for hover #025d87
+);
+
+
+//disables dropdown caret by default
+$enable-caret: false;

civictechprojects/static/css/_vars.scss

@@ -3,14 +3,16 @@
 
 //colors
 $color-orange: #f79e02; // brand
-$color-orange-darker: #de8e01; // for button hover, border, whatever
+$color-orange-dark: #de8e01; // accent/button borders
+$color-orange-light: #f7cf88; // footer button hover
 $color-green: #86c232; //confirm-role buttons
 $color-green-dark: #61892f; //tag selectors and selected tags
 $color-text-light: #ffffff;
 $color-text-dark: #222629;
 $color-text-grey: #535A5F; //lightest we can go without brekaing accessibility
 $color-grey-medium: #dddddd;
 $color-grey-disabled: #cecece; // any item in a disabled state
+$color-disabled-border: #a8a8a8; // for e.g. a disabled state button border
 $color-grey-frame-border: #6b6e70; // from design guide
 
 //background colors

civictechprojects/static/css/partials/_AboutProject.scss

@@ -8,24 +8,19 @@
     background: $color-background-light;
     border-radius: 12px;
     border: $color-grey-disabled solid 1px;
+  }
 
-    /* this whole section is potentially placeholder */
-    a {
-      color: $color-orange;
-      text-decoration: none;
-      -webkit-appearance: none;
-    }
-    a:hover {
-      color: $color-orange-darker;
-      text-decoration: underline;
-    }
-    a[type="button"] {
-      color: $color-text-light;
-    }
-    a[type="button"]:hover {
-      color: $color-text-light;
-    }
+  /* to avoid conflict with a href styled as buttons, only put this rule in sections where required */
+.AboutProjects-details, .AboutProjects-team, .AboutProjects-files, .Position-description-link {
+  a {
+    color: $color-orange;
+    text-decoration: none;
+  }
+  a:hover {
+    color: $color-orange-dark;
+    text-decoration: underline;
   }
+}
 
 .AboutProjects-infoColumn {
   order: 1;
@@ -220,7 +215,10 @@
     width: 100%;
   }
 }
-
+.AboutProjects-jumplink {
+  /* anchor tag is moved "higher up" than its content to account for Bootstrap fixed nav bar */
+  top: -$header-height;
+}
 .AboutProjects-positions-available {
   padding: 25px 10px; /*as with description-details consider maxwidth */
 
@@ -267,23 +265,12 @@
 }
 
 .AboutProject-button {
-  background-color: $color-green;
-  border: 0;
-  border-radius: 5px;
-  color: $color-text-light;
-  cursor: pointer;
+  /* note these are in addition to the DL theme button rules */
   float: right;
   font-size: 14px;
-  padding: 8px 8px 8px 8px;
-  margin-right: 8px;
   margin-top: 16px;
 }
 
-button.AboutProject-button:disabled {
-  background-color: $color-grey-disabled;
-  color: $color-text-light;
-}
-
 @media (max-width: 1000px) {
   // buttons will align below "-description"
   .AboutProjects-introTop {

civictechprojects/static/css/partials/_AboutUser.scss

@@ -0,0 +1,17 @@
+.about-user-section {
+  margin-bottom: 1.5rem;
+}
+.about-user-section:last-of-type {
+  margin-bottom: 2rem;
+}
+.about-user-section a {
+  color: $color-orange;
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+.about-user-name {
+  font-size: 24px;
+  padding-top: 0.25rem;
+}

civictechprojects/static/css/partials/_AlertHeader.scss

@@ -3,7 +3,7 @@
   flex-direction: row;
   justify-content: flex-end;
   background-color: $color-orange;
-  color: $color-text-light;
+  color: $color-text-dark;
   width: 100%;
   line-height: 1.2em;
   min-height: 34px;
@@ -13,20 +13,23 @@
 .AlertHeader-text {
   padding-left: 10px;
   width: auto;
-  margin: 0 auto 0px auto;
+  margin: 0.25rem auto;
 }
 
 .AlertHeader-text a {
   text-decoration: underline;
-  color: $color-text-light; 
+  color: $color-text-dark;
 }
 
 .AlertHeader-text p,i {
   text-align: center;
 }
+.AlertHeader-text p {
+  margin: 0;
+}
 
 .AlertHeader-close {
-  width: 30px;
-  padding-right: 10px;
+  min-width: 30px;
+  padding: 0 10px;
   cursor: pointer;
 }

civictechprojects/static/css/partials/_CreateProjectForm.scss

@@ -23,4 +23,12 @@
     margin-right: 1rem;
     font-weight: bold;
     color: $color-orange;
-}
+}
+.create-form-buttonrow {
+  display: flex;
+  justify-content: space-between;
+}
+
+.create-form-project-example {
+  padding-left: 0.5rem;
+}

civictechprojects/static/css/partials/_DonateController.scss

@@ -23,22 +23,21 @@
 }
 
 .radio-button {
-  border: 1px solid;
-  background-color: transparent;
-  border-radius: 5px;
-  padding: 6px 12px;
   margin: 0px 0px 10px 15px;
-  cursor: pointer;
   min-width: 70px;
   &:hover {
     color: $color-orange;
     border-color: $color-orange;
+    background: none;
+  }
+  &:focus {
+    box-shadow: 0 0 0 .2rem rgba($color-orange-dark, 0.5)
   }
 }
 
 .checked .radio-button {
-  color: $color-orange-darker;
-  border-color: $color-orange-darker;
+  color: $color-orange-dark;
+  border-color: $color-orange-dark;
 }
 
 @media (min-width: 900px) {
@@ -78,4 +77,4 @@
     width: 150px;
     height: 40px;
   }
-}
+}

civictechprojects/static/css/partials/_EditProjectForm.scss

@@ -25,23 +25,11 @@
     display: inline-block;
 }
 
-.EmailVerified-find-projects-btn {
-    border: 1px solid $color-orange;
-    color: $color-text-light;
-    background-color: $color-orange;
-    border-radius: 5px;
-    padding: 6px 12px;
-    margin-bottom: 10px;
-    transition: 300ms;
-    cursor: pointer;
-    min-width: 80px;
-}
-
 @include media-breakpoint-up(md) {
     // This is where width of the screen > 768 px
     .EmailVerifiedController-logo {
         width: 70px;
         padding-left: 10px;
         padding-bottom: 0px;
     }
-}
+}

civictechprojects/static/css/partials/_EmailVerifiedController.scss

@@ -2,35 +2,46 @@ body {
   background-color: $color-background-default;
 }
 
-// uses democracyLab orange for a "themed button", use class="btn btn-theme"
-.btn-theme {
-  background-color: $color-orange;
-  color: $color-text-light;
+// footer buttons are difficult to theme in Bootstrap, so define manually
+//TODO: Sass variables
+.btn-footer {
+  background-color: $color-background-light;
+  color: $color-text-dark;
 }
-.btn-theme a, .btn-theme a[type="button"] {
-  color: $color-text-light;
+.btn-footer a, .btn-footer a[type="button"] {
+  color: $color-text-dark;
   text-decoration: none;
 }
-.btn-theme:hover {
-  background-color: $color-orange-darker;
-  color: $color-text-light;
+.btn-footer:hover, .btn-footer:active {
+  background-color: $color-orange-light;
+  color: $color-text-dark;
+  border-color: $color-orange-dark;
 }
-a.btn-theme:hover, a[type="button"].btn-theme:hover {
+a.btn-footer:hover, a.btn-footer:active, a[type="button"].btn-footer:hover, a[type="button"].btn-footer:active  {
   text-decoration: none;
 }
 
-//use to clear specific button appearance settings, e.g. fix webkit-appearance problem on react-bootstrap <Button href=""> components
-button.clear-button-appearance, a.clear-button-appearance, a[type="button"].clear-button-appearance {
-  -webkit-appearance: none;
-  -moz-appearance: none;
+//Sets button states to be our specific values instead of default computed by Bootstrap
+//I don't think we're going to call these colors manually at any point so no vars here
+.btn-success:active, .btn-success:hover {
+  background-color: #395e00;
+}
+.btn-danger:active, .btn-danger:hover {
+  background-color: #b20000;
+}
+.btn-info:active, .btn-info:hover {
+  background-color: #025d87;
 }
 
-//fixing a conflict between Bootstrap 4 CSS and our version of React-Bootstrap (targeting BS3)
-//remove this declaration when react-bootstrap is upgraded
-.modal-backdrop.fade.in {
- opacity: 0.5;
+
+//Global override of disabled state input elements
+input[type="submit"]:disabled {
+  background: $color-grey-disabled;
+  border: $color-disabled-border;
 }
 
+
+
 //for on-page actions we want to appear as links
 .pseudo-link {
   color: $color-orange;