{"action":"created","issue":{"url":"https://api.github.com/repos/compucorp/civihr-employee-portal-theme/issues/366","repository_url":"https://api.github.com/repos/compucorp/civihr-employee-portal-theme","labels_url":"https://api.github.com/repos/compucorp/civihr-employee-portal-theme/issues/366/labels{/name}","comments_url":"https://api.github.com/repos/compucorp/civihr-employee-portal-theme/issues/366/comments","events_url":"https://api.github.com/repos/compucorp/civihr-employee-portal-theme/issues/366/events","html_url":"https://github.com/compucorp/civihr-employee-portal-theme/pull/366","id":335671900,"node_id":"MDExOlB1bGxSZXF1ZXN0MTk3MzExNTQz","number":366,"title":"PCHR-3834: Update Global Styles","user":{"login":"deb1990","id":5058867,"node_id":"MDQ6VXNlcjUwNTg4Njc=","avatar_url":"https://avatars1.githubusercontent.com/u/5058867?v=4","gravatar_id":"","url":"https://api.github.com/users/deb1990","html_url":"https://github.com/deb1990","followers_url":"https://api.github.com/users/deb1990/followers","following_url":"https://api.github.com/users/deb1990/following{/other_user}","gists_url":"https://api.github.com/users/deb1990/gists{/gist_id}","starred_url":"https://api.github.com/users/deb1990/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/deb1990/subscriptions","organizations_url":"https://api.github.com/users/deb1990/orgs","repos_url":"https://api.github.com/users/deb1990/repos","events_url":"https://api.github.com/users/deb1990/events{/privacy}","received_events_url":"https://api.github.com/users/deb1990/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-06-26T06:09:50Z","updated_at":"2018-06-27T06:42:32Z","closed_at":null,"author_association":"CONTRIBUTOR","pull_request":{"url":"https://api.github.com/repos/compucorp/civihr-employee-portal-theme/pulls/366","html_url":"https://github.com/compucorp/civihr-employee-portal-theme/pull/366","diff_url":"https://github.com/compucorp/civihr-employee-portal-theme/pull/366.diff","patch_url":"https://github.com/compucorp/civihr-employee-portal-theme/pull/366.patch"},"body":"## Overview\r\nAs part of the PR the Global Styles has been updated of the SSP theme according to the new mockup.\r\nRelated PRs\r\nhttps://github.com/compucorp/civihr-employee-portal/pull/502\r\nhttps://github.com/compucorp/org.civicrm.shoreditch/pull/112\r\n\r\n## Details\r\n### Colors\r\n#### Brand Colors\r\n```scss\r\n$brand-primary: #0071bd !default;\r\n$brand-secondary: #9494a5 !default;\r\n$brand-success: #44cb7e !default;\r\n$brand-warning: #e6ab5e !default;\r\n$brand-danger: #cf3458 !default;\r\n```\r\n#### Gray Colors\r\n```scss\r\n$gray-darker: #3e3e54 !default;\r\n$gray-dark: #464354 !default;\r\n$gray: #4d4d69 !default;\r\n$gray-light: #9494a5 !default;\r\n$gray-lighter: #c2cfd8 !default;\r\n\r\n$light: #fff !default;\r\n$light-pale: #e8eef0 !default;\r\n$light-gray: #f3f6f7 !default;\r\n```\r\nOther than the bootstrap variables, one more gray color is found in the mockup, it is mentioned as\r\n```scss\r\n$chr-gray-1: #4e4e78;\r\n```\r\nIn future if other colors are required, the same format needs to be followed\r\n\r\n#### Gradients\r\nFor the Save button the following gradient variables are created\r\n```scss\r\n$chr-gradient-1: linear-gradient(315deg, #01A2D5 0%, #0070BB 100%);\r\n$chr-gradient-2: linear-gradient(315deg, #0187B1 0%, #005B97 100%);\r\n```\r\nThe above gradients will be used in multiple places, for example \r\nBorders in https://projects.invisionapp.com/d/main#/console/13248050/297993949/preview\r\nIn Payroll Details https://projects.invisionapp.com/d/main#/console/13248050/297230123/preview\r\n\r\nSo there is no known pattern at this moment. So for simplicity's sake, the names are numbered. Future gradients should be added similarly.\r\n\r\n#### Fixing Adhoc Colors\r\nPreviously throughout the theme, many adhoc colors were used, all of those are removed and variables from `scss/base/_variables.scss` has been used.\r\n\r\n\r\n### Fonts\r\n#### Font Size\r\nThe new font sizes are mapped to bootstrap variables\r\n```scss\r\n$font-size-base: 13px;\r\n$font-size-small: 13px;\r\n$font-size-large: 18px;\r\n\r\n$font-size-h1: 24px;\r\n$font-size-h2: 24px;\r\n$font-size-h3: 24px;\r\n$font-size-h4: $font-size-large;\r\n$font-size-h5: $font-size-large;\r\n$font-size-h6: $font-size-large;\r\n```\r\nAnd a new variable is created for font-size, which could not be mapped to bootstrap\r\n```scss\r\n$chr-font-size-medium: 14px;\r\n```\r\n\r\n#### Font Weights\r\nVariables has been created/updated for Font weights\r\n```scss\r\n$crm-font-weight-light: 300;\r\n$crm-font-weight-regular: 400;\r\n$crm-font-weight-semi-bold: 600;\r\n$crm-font-weight-bold: 700;\r\n```\r\n\r\n#### Fixing Adhoc Font\r\nPreviously throughout the theme, many adhoc font-sizes and weights were used, all of those are removed and variables from `scss/base/_variables.scss` has been used.\r\n\r\n### Radio Button Styles\r\nRadio buttons styles were previously declared for Onboarding Wizard only in `_onboarding-wizard.scss`, those has been moved to `drupal/_form.scss`.\r\n\r\n### Buttons\r\nIn the new design, all buttons other than inside modals, should follow the outline styles.\r\n![outlined-buttons](https://user-images.githubusercontent.com/5058867/41912949-cc773e2a-796d-11e8-99e2-62459bc27a9e.gif)\r\nAnd the Submit buttons should follow a gradient style, so `btn-gradient` is created\r\n![gradient-buttons](https://user-images.githubusercontent.com/5058867/41913603-5cf9d480-796e-11e8-9c8b-8bee636ac142.gif)\r\n\r\n```scss\r\n.btn-gradient {\r\n  @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-base, $line-height-large, $border-radius-large);\r\n\r\n  background: $chr-gradient-1;\r\n  border: 0;\r\n  color: $light;\r\n\r\n  &:hover {\r\n    background: $chr-gradient-2;\r\n    color: $light;\r\n  }\r\n}\r\n```\r\n\r\n1. `hook_button()` has been copied from `themes/radix/includes/form.inc` and added in `civihr_default_theme/includes/form.inc`.\r\n2. 'btn-primary-outline'` class has been added for all buttons which are not inside modal and is not a submit button. Previously `'btn-default'` was applied.\r\n3. `btn-gradient` class has been applied to all buttons which are inside modal and is a submit button. Previously `'btn-primary'` was applied.\r\n\r\nAccording to Jon, new gradient buttons might be added in future, but he is not sure of that now, so the architecture is made keeping that in mind. For example, we can rename `btn-gradient` to `btn-primary-gradient` if we add other brand colored gradients in future.\r\n\r\n## How it looks\r\nThe following images show how different components look like(PS they are not final as we dont have final mockups, this is show how it looks after changing global colors and font sizes)\r\n\r\n![all-components](https://user-images.githubusercontent.com/5058867/41913176-eadf1ab8-796d-11e8-920b-6239315026ae.png)\r\n![2018-06-26 at 6 22 pm](https://user-images.githubusercontent.com/5058867/41913503-1d0d05fe-796e-11e8-9538-a2ded2705140.png)\r\n![2018-06-26 at 6 24 pm](https://user-images.githubusercontent.com/5058867/41913533-30b6ea52-796e-11e8-801d-196f2b31cd70.png)\r\n\r\n## Others\r\n### Removed unused variables\r\n```scss\r\n$crm-table-heading-padding:      13px 20px !default;\t\r\n$crm-table-heading-bg:           #f7f7f9 !default;\t\r\n$crm-table-heading-border-color: #dadcde !default;\t\r\n\t\r\n$crm-table-nested-indent-color:  #dbdddf !default;\t\r\n$crm-table-nested-indent-width:  10px !default;\r\n```\r\n\r\n## Comment\r\nAs part of this PR a generic global styles has been applied and variables has been created for colors and font related things. We still dont have mockups for all individual elements so some elements might look a but odd or not right. But as the architecture is set here, it will be easier to update individual components when we have mockups.\r\n\r\nAlso Leave and Absence has not been touched yet, as first of all The Styles are used in Admin also, and secondly the mockups are not available.\r\n\r\nThe css changes affected a lot of files so `--no-verify` suffix has been used to ignore linting errors.\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/compucorp/civihr-employee-portal-theme/issues/comments/400560507","html_url":"https://github.com/compucorp/civihr-employee-portal-theme/pull/366#issuecomment-400560507","issue_url":"https://api.github.com/repos/compucorp/civihr-employee-portal-theme/issues/366","id":400560507,"node_id":"MDEyOklzc3VlQ29tbWVudDQwMDU2MDUwNw==","user":{"login":"deb1990","id":5058867,"node_id":"MDQ6VXNlcjUwNTg4Njc=","avatar_url":"https://avatars1.githubusercontent.com/u/5058867?v=4","gravatar_id":"","url":"https://api.github.com/users/deb1990","html_url":"https://github.com/deb1990","followers_url":"https://api.github.com/users/deb1990/followers","following_url":"https://api.github.com/users/deb1990/following{/other_user}","gists_url":"https://api.github.com/users/deb1990/gists{/gist_id}","starred_url":"https://api.github.com/users/deb1990/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/deb1990/subscriptions","organizations_url":"https://api.github.com/users/deb1990/orgs","repos_url":"https://api.github.com/users/deb1990/repos","events_url":"https://api.github.com/users/deb1990/events{/privacy}","received_events_url":"https://api.github.com/users/deb1990/received_events","type":"User","site_admin":false},"created_at":"2018-06-27T06:42:32Z","updated_at":"2018-06-27T06:42:32Z","author_association":"CONTRIBUTOR","body":"> This looks fine as a starting point. Did the panels and background colours get updated at all?\r\n\r\n@jamienovick The background color for the body has changed slightly(according to the Mockup), but the panel are still the same, those are planned to be changed as part of PCHR-3667\r\n"}}
{"actor":{"display_login":"deb1990"}}