diff --git a/src/global/constants.js b/src/global/constants.js index 5eaa3bed..a118b0d0 100644 --- a/src/global/constants.js +++ b/src/global/constants.js @@ -56,3 +56,5 @@ export const EMAIL_LINK_CLASSES = `${UI_CLASS_NAME} ${BEM_EMAIL_LINK}`; export const PERSON_CORE_MILESTONES_CLASSES = `${UI_CLASS_NAME} ${BEM_PERSON_CORE_MILESTONES}`; export const PERSON_CONTACT_INFO_CLASSES = `${UI_CLASS_NAME} ${BEM_PERSON_CONTACT_INFO}`; export const TELEPHONE_LINK_CLASSES = `${UI_CLASS_NAME} ${BEM_TELEPHONE_LINK}`; + +export const UI_LIBRARY_ROOT_CLASS = '.hc-ui'; diff --git a/src/style.scss b/src/style.scss index ab6e8b34..1ff61627 100644 --- a/src/style.scss +++ b/src/style.scss @@ -1,3 +1,20 @@ +// Source Sans Pro +@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,600italic,400italic,700italic); + +.hc-ui { + @import './styles/colors', './styles/fonts', './styles/fontSizeCalculator'; + + color: color(color); + font-family: $fontFamily; + font-size: em(16px); + font-weight: $fontWeightRegular; + //letter-spacing: .7px; + line-height: 1.375; + -moz-osx-font-smoothing: grayscale; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + -webkit-font-smoothing: antialiased; + // Base @import './styles/normalize'; @import './styles/typography'; @@ -63,3 +80,5 @@ @import './surfaces/infoBar/infoBar'; @import './surfaces/modalDeprecated/modalDeprecated'; @import './surfaces/titleBar/titleBar'; + +} diff --git a/src/styles/normalize.scss b/src/styles/normalize.scss index 81c6f31e..64805690 100644 --- a/src/styles/normalize.scss +++ b/src/styles/normalize.scss @@ -1,24 +1,28 @@ /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ -/** - * 1. Set default font family to sans-serif. - * 2. Prevent iOS text size adjust after orientation change, without disabling - * user zoom. - */ - -html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/** - * Remove default margin. - */ - -body { - margin: 0; -} +// +// Need to prevent any impact on html/body elements by react-cm-ui library +// so that the library works correctly in widgets +// +// /** +// * 1. Set default font family to sans-serif. +// * 2. Prevent iOS text size adjust after orientation change, without disabling +// * user zoom. +// */ + +// html { +// font-family: sans-serif; /* 1 */ +// -ms-text-size-adjust: 100%; /* 2 */ +// -webkit-text-size-adjust: 100%; /* 2 */ +// } + +// /** +// * Remove default margin. +// */ + +// body { +// margin: 0; +// } /* HTML5 display definitions ========================================================================== */ diff --git a/src/styles/typography.scss b/src/styles/typography.scss index 9312a374..4d3d182d 100644 --- a/src/styles/typography.scss +++ b/src/styles/typography.scss @@ -1,19 +1,6 @@ @import './colors', './fonts', './fontSizeCalculator'; -// Source Sans Pro -@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,600italic,400italic,700italic); -html { font-size: 100%; } - body { - color: color(color); - font-family: $fontFamily; - font-size: em(16px); - -moz-osx-font-smoothing: grayscale; - -webkit-font-smoothing: antialiased; - font-weight: $fontWeightRegular; - //letter-spacing: .7px; - line-height: 1.375; - } //Links a { color: color(colorLink);