CSS changes

[briri]

Apply CSS overrides to Bootstraps default stylying based on the feedback in: https://docs.google.com/document/d/12bF5dJHI9xsptZOKNDAqDXovdJEMJmJMJfIpf7CKwHo/edit

Custom CSS should be placed either in the lib/assets/stylsheets/dmproadmap.scss

[briri]

Summary of the decisions that have come out of the discussion in the document above:

• Basics
  • Primary color: #4F5253 (grey)
  • Primary background color: #FFF (white)
  • Top of page Error: width: 100%, font-color: #B94A48 (red), background-color: #F2DEDE (pink)
  • Top of page Notification: width: 100%, font-color: #C09853 (gold), background-color: #FCF8E3 (light yellow)
  • Primary header font: use the GillSansLight TTF located in the lib/assets/fonts dir (see below)
  • Primary font: "Helvetica Neue",Helvetica,Arial,sans-serif
  • Font sizing: H1 - 40px, H2 - 26px, H3 - 18px, P - 14px (use rem units if possible instead of px)
  • Page messaging:
  • Errors: Font color is #CC0025
  • Fonts
  • All headings should use the Primary header font (GillSansLight) otherwise default to primary font (Helvetica Neue)
  • All headings should use the Primary color (grey). Use black (#000) everywhere else.
  • Borders:
  • Use the primary color (grey)
• Header
  • Resize Roadmap logo. try width of 180px (currently 363px)
  • Update Header to use fonts/colors listed above
  • Collapse empty space between main header and org header
  • Cap org logo sizes via the dragonfly upload in app/models/org.rb See ticket #639
• Footer
  • Fix the position of the footer so that it is always anchored at the bottom of the screen
• Tables
  • Borders around table, rows and columns (solid, 1px, use primary color (grey))
  • TH should use the primary color (grey) for the background and white for the text
  • Selected/Active/Hover row should have a light grey background (#CCC)
  • Adjust column widths if possible without breaking responsiveness so that rows that have long content have more real estate than columns that have small text (e.g. plan title vs plan visibility)
  • Introduce paging where applicable and limit tables to 20 rows
  • Search box should appear within a TH so that it has the correct background color. Box width should 50% of the table width. Move 'X' clear button so that it appears within the search box (see DMPOnline for an example)
• Tabs
  • Default background color to the primary color (grey) and white (#FFF) text
  • Selected/Active/Hovered tabs should have a white background and a border on the left, top, right (solid, 1px, primary color (grey)) and the font should use the primary color (grey)
  • Margin-right: 2px
  • Padding: 4px 15px
  • Cap width of tabs so that they do not go beyond the width of the parent container (test on edit plan page by creating phases with very long titles)
• Forms
  • Limit field lengths to two standard sizes long / short
  • All forms should have labels over the input (except for checkboxes and radios)
  • Buttons: use primary color (grey) for background for both the btn-default and btn-primary classes, white (#FFF) for font. Padding: 4px 12px
  • Required fields should display a red asterisk (use fontawesome and the following selector: [aria-required]
  • Tinymce editors should be same width as the long input field above
  • Make sure all labels and inputs are left aligned
  • Make sure all tooltips are auto-popup on hover/focus. Tooltips should appear with primary color (grey) background and white text to the right of the input field. Remove all question mark versions of the tooltip and convert to the auto-popup. Padding: 4px 12px
  • Error messages should display when the input element loses focus as well as form submit. Error messages should appear below the input element. Do not change border color of element. Font color: #B94A48
• Accordions
  • Background color: primary color (grey)
  • Padding: 8px 15px
  • When accordion panel has 2 sections (left and right), the left side should take up 60% of the width

Pull in the GillSansLight TTF:

@font-face {
  font-family: 'GillSansLight';
  src: font-url('GillSansLight.ttf') format('truetype');
  font-weight: normal;
}

[briri]

We should make the changes above and then gather a second round of feedback for any additional changes.

[briri]

currently working on the Tooltips #568 and am noticing inconsistencies in Bootstrap's tooltip widths. We can override though within the custom CSS by setting the min-width and max-width

[briri]

Please also override the bg-primary class to use the primary grey color and reduce the top-bottom padding.

[stephaniesimms]

round 1 is done. recording new round of CSS changes in issue #746 . closing this one.