From e113f26da08f0aeba30ab45a4e3c2a8ab3602849 Mon Sep 17 00:00:00 2001 From: Chelsie Johnston Date: Mon, 8 Apr 2019 10:14:34 -0700 Subject: [PATCH 01/29] Zurb Foundation version update changes (auto-created). --- ui/src/components/Branding.css | 5 +- ui/src/components/Branding.md | 4 +- ui/src/components/Buttons/CloseButton.css | 2 +- ui/src/components/Buttons/ViewInfoButton.css | 6 +- ui/src/components/Card.css | 2 +- ui/src/components/ComponentInfo.css | 9 +- ui/src/components/ComponentTopBar.css | 5 +- ui/src/components/FetchingCodeBlock.css | 2 +- ui/src/components/Icons/Icon.css | 2 +- ui/src/components/Menu.css | 2 +- ui/src/components/NavDrawer.css | 2 +- ui/src/components/TopBar.css | 5 +- ui/src/containers/App.css | 385 +++---------------- ui/src/containers/HomePage.css | 2 +- ui/src/containers/HomePage.scss | 1 - ui/src/containers/SamplePage.css | 2 +- 16 files changed, 82 insertions(+), 354 deletions(-) diff --git a/ui/src/components/Branding.css b/ui/src/components/Branding.css index fda9d05..e1b0b3b 100644 --- a/ui/src/components/Branding.css +++ b/ui/src/components/Branding.css @@ -1,6 +1,6 @@ /** * Foundation for Sites by ZURB - * Version 6.4.3 + * Version 6.5.3 * foundation.zurb.com * Licensed under MIT Open Source */ @@ -8,7 +8,8 @@ padding-right: 0.625rem; padding-left: 0.625rem; max-width: 75rem; - margin: 0 auto; } + margin-left: auto; + margin-right: auto; } @media print, screen and (min-width: 40em) { .Branding { padding-right: 0.9375rem; diff --git a/ui/src/components/Branding.md b/ui/src/components/Branding.md index c24e03c..3640d3a 100644 --- a/ui/src/components/Branding.md +++ b/ui/src/components/Branding.md @@ -2,6 +2,6 @@ Branding Example: ```jsx
- +
-``` \ No newline at end of file +``` diff --git a/ui/src/components/Buttons/CloseButton.css b/ui/src/components/Buttons/CloseButton.css index 8ab81e2..b8fd2c6 100644 --- a/ui/src/components/Buttons/CloseButton.css +++ b/ui/src/components/Buttons/CloseButton.css @@ -1,6 +1,6 @@ /** * Foundation for Sites by ZURB - * Version 6.4.3 + * Version 6.5.3 * foundation.zurb.com * Licensed under MIT Open Source */ diff --git a/ui/src/components/Buttons/ViewInfoButton.css b/ui/src/components/Buttons/ViewInfoButton.css index 9c69425..23ff565 100644 --- a/ui/src/components/Buttons/ViewInfoButton.css +++ b/ui/src/components/Buttons/ViewInfoButton.css @@ -1,6 +1,6 @@ /** * Foundation for Sites by ZURB - * Version 6.4.3 + * Version 6.5.3 * foundation.zurb.com * Licensed under MIT Open Source */ @@ -8,13 +8,13 @@ display: inline-block; vertical-align: middle; margin: 0 0 1rem 0; - font-family: inherit; padding: 0.85em 1em; - -webkit-appearance: none; border: 1px solid transparent; border-radius: 0; transition: background-color 0.25s ease-out, color 0.25s ease-out; + font-family: inherit; font-size: 0.9rem; + -webkit-appearance: none; line-height: 1; text-align: center; cursor: pointer; diff --git a/ui/src/components/Card.css b/ui/src/components/Card.css index 4109b55..5ee4595 100644 --- a/ui/src/components/Card.css +++ b/ui/src/components/Card.css @@ -1,6 +1,6 @@ /** * Foundation for Sites by ZURB - * Version 6.4.3 + * Version 6.5.3 * foundation.zurb.com * Licensed under MIT Open Source */ diff --git a/ui/src/components/ComponentInfo.css b/ui/src/components/ComponentInfo.css index 789476b..83427bf 100644 --- a/ui/src/components/ComponentInfo.css +++ b/ui/src/components/ComponentInfo.css @@ -1,6 +1,6 @@ /** * Foundation for Sites by ZURB - * Version 6.4.3 + * Version 6.5.3 * foundation.zurb.com * Licensed under MIT Open Source */ @@ -11,7 +11,8 @@ padding-right: 0.625rem; padding-left: 0.625rem; max-width: 75rem; - margin: 0 auto; + margin-left: auto; + margin-right: auto; display: flex; flex-flow: row wrap; position: relative; } @@ -81,13 +82,13 @@ display: inline-block; vertical-align: middle; margin: 0 0 1rem 0; - font-family: inherit; padding: 0.85em 1em; - -webkit-appearance: none; border: 1px solid transparent; border-radius: 0; transition: background-color 0.25s ease-out, color 0.25s ease-out; + font-family: inherit; font-size: 0.9rem; + -webkit-appearance: none; line-height: 1; text-align: center; cursor: pointer; diff --git a/ui/src/components/ComponentTopBar.css b/ui/src/components/ComponentTopBar.css index a13ee6e..e818cb0 100644 --- a/ui/src/components/ComponentTopBar.css +++ b/ui/src/components/ComponentTopBar.css @@ -1,6 +1,6 @@ /** * Foundation for Sites by ZURB - * Version 6.4.3 + * Version 6.5.3 * foundation.zurb.com * Licensed under MIT Open Source */ @@ -11,7 +11,8 @@ padding-right: 0.625rem; padding-left: 0.625rem; max-width: 75rem; - margin: 0 auto; + margin-left: auto; + margin-right: auto; display: flex; flex-flow: row wrap; align-items: center; } diff --git a/ui/src/components/FetchingCodeBlock.css b/ui/src/components/FetchingCodeBlock.css index d716048..961074c 100644 --- a/ui/src/components/FetchingCodeBlock.css +++ b/ui/src/components/FetchingCodeBlock.css @@ -1,6 +1,6 @@ /** * Foundation for Sites by ZURB - * Version 6.4.3 + * Version 6.5.3 * foundation.zurb.com * Licensed under MIT Open Source */ diff --git a/ui/src/components/Icons/Icon.css b/ui/src/components/Icons/Icon.css index f7e027c..67b141b 100644 --- a/ui/src/components/Icons/Icon.css +++ b/ui/src/components/Icons/Icon.css @@ -1,6 +1,6 @@ /** * Foundation for Sites by ZURB - * Version 6.4.3 + * Version 6.5.3 * foundation.zurb.com * Licensed under MIT Open Source */ diff --git a/ui/src/components/Menu.css b/ui/src/components/Menu.css index 314bbaf..85fca9b 100644 --- a/ui/src/components/Menu.css +++ b/ui/src/components/Menu.css @@ -1,6 +1,6 @@ /** * Foundation for Sites by ZURB - * Version 6.4.3 + * Version 6.5.3 * foundation.zurb.com * Licensed under MIT Open Source */ diff --git a/ui/src/components/NavDrawer.css b/ui/src/components/NavDrawer.css index b1364e7..0d99567 100644 --- a/ui/src/components/NavDrawer.css +++ b/ui/src/components/NavDrawer.css @@ -1,6 +1,6 @@ /** * Foundation for Sites by ZURB - * Version 6.4.3 + * Version 6.5.3 * foundation.zurb.com * Licensed under MIT Open Source */ diff --git a/ui/src/components/TopBar.css b/ui/src/components/TopBar.css index abb8dc4..09d57c8 100644 --- a/ui/src/components/TopBar.css +++ b/ui/src/components/TopBar.css @@ -1,6 +1,6 @@ /** * Foundation for Sites by ZURB - * Version 6.4.3 + * Version 6.5.3 * foundation.zurb.com * Licensed under MIT Open Source */ @@ -21,7 +21,8 @@ padding-right: 0.625rem; padding-left: 0.625rem; max-width: 75rem; - margin: 0 auto; + margin-left: auto; + margin-right: auto; display: flex; flex-flow: row wrap; } @media print, screen and (min-width: 40em) { diff --git a/ui/src/containers/App.css b/ui/src/containers/App.css index 622fe08..7fb8679 100644 --- a/ui/src/containers/App.css +++ b/ui/src/containers/App.css @@ -1,182 +1,52 @@ @charset "UTF-8"; /** * Foundation for Sites by ZURB - * Version 6.4.3 + * Version 6.5.3 * foundation.zurb.com * Licensed under MIT Open Source */ -/*! normalize-scss | MIT/GPLv2 License | bit.ly/normalize-scss */ -/* Document - ========================================================================== */ -/** - * 1. Change the default font family in all browsers (opinionated). - * 2. Correct the line height in all browsers. - * 3. Prevent adjustments of font size after orientation changes in - * IE on Windows Phone and in iOS. - */ +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ html { - font-family: sans-serif; - /* 1 */ line-height: 1.15; - /* 2 */ - -ms-text-size-adjust: 100%; - /* 3 */ - -webkit-text-size-adjust: 100%; - /* 3 */ } - -/* Sections - ========================================================================== */ -/** - * Remove the margin in all browsers (opinionated). - */ + -webkit-text-size-adjust: 100%; } + body { margin: 0; } -/** - * Add the correct display in IE 9-. - */ -article, -aside, -footer, -header, -nav, -section { - display: block; } - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ h1 { font-size: 2em; margin: 0.67em 0; } -/* Grouping content - ========================================================================== */ -/** - * Add the correct display in IE 9-. - */ -figcaption, -figure { - display: block; } - -/** - * Add the correct margin in IE 8. - */ -figure { - margin: 1em 40px; } - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ hr { box-sizing: content-box; - /* 1 */ height: 0; - /* 1 */ - overflow: visible; - /* 2 */ } - -/** - * Add the correct display in IE. - */ -main { - display: block; } + overflow: visible; } -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ pre { font-family: monospace, monospace; - /* 1 */ - font-size: 1em; - /* 2 */ } + font-size: 1em; } -/* Links - ========================================================================== */ -/** - * 1. Remove the gray background on active links in IE 10. - * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. - */ a { - background-color: transparent; - /* 1 */ - -webkit-text-decoration-skip: objects; - /* 2 */ } + background-color: transparent; } -/** - * Remove the outline on focused links when they are also active or hovered - * in all browsers (opinionated). - */ -a:active, -a:hover { - outline-width: 0; } - -/* Text-level semantics - ========================================================================== */ -/** - * 1. Remove the bottom border in Firefox 39-. - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ abbr[title] { border-bottom: none; - /* 1 */ text-decoration: underline; - /* 2 */ - text-decoration: underline dotted; - /* 2 */ } + text-decoration: underline dotted; } -/** - * Prevent the duplicate application of `bolder` by the next rule in Safari 6. - */ -b, -strong { - font-weight: inherit; } - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ b, strong { font-weight: bolder; } -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ code, kbd, samp { font-family: monospace, monospace; - /* 1 */ - font-size: 1em; - /* 2 */ } + font-size: 1em; } -/** - * Add the correct font style in Android 4.3-. - */ -dfn { - font-style: italic; } - -/** - * Add the correct background and color in IE 9-. - */ -mark { - background-color: #ff0; - color: #000; } - -/** - * Add the correct font size in all browsers. - */ small { font-size: 80%; } -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ sub, sup { font-size: 75%; @@ -190,235 +60,92 @@ sub { sup { top: -0.5em; } -/* Embedded content - ========================================================================== */ -/** - * Add the correct display in IE 9-. - */ -audio, -video { - display: inline-block; } - -/** - * Add the correct display in iOS 4-7. - */ -audio:not([controls]) { - display: none; - height: 0; } - -/** - * Remove the border on images inside links in IE 10-. - */ img { border-style: none; } -/** - * Hide the overflow in IE. - */ -svg:not(:root) { - overflow: hidden; } - -/* Forms - ========================================================================== */ -/** - * 1. Change the font styles in all browsers (opinionated). - * 2. Remove the margin in Firefox and Safari. - */ button, input, optgroup, select, textarea { - font-family: sans-serif; - /* 1 */ + font-family: inherit; font-size: 100%; - /* 1 */ line-height: 1.15; - /* 1 */ - margin: 0; - /* 2 */ } + margin: 0; } -/** - * Show the overflow in IE. - */ -button { +button, +input { overflow: visible; } -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ button, select { - /* 1 */ text-transform: none; } -/** - * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` - * controls in Android 4. - * 2. Correct the inability to style clickable types in iOS and Safari. - */ -button, -html [type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; - /* 2 */ } - button, [type="button"], [type="reset"], [type="submit"] { - /** - * Remove the inner border and padding in Firefox. - */ - /** - * Restore the focus styles unset by the previous rule. - */ } - button::-moz-focus-inner, - [type="button"]::-moz-focus-inner, - [type="reset"]::-moz-focus-inner, - [type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; } - button:-moz-focusring, - [type="button"]:-moz-focusring, - [type="reset"]:-moz-focusring, - [type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; } + -webkit-appearance: button; } -/** - * Show the overflow in Edge. - */ -input { - overflow: visible; } - -/** - * 1. Add the correct box sizing in IE 10-. - * 2. Remove the padding in IE 10-. - */ -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; - /* 1 */ - padding: 0; - /* 2 */ } - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; } - -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ -[type="search"] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ - /** - * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. - */ } - [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { - -webkit-appearance: none; } +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ } +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } -/** - * Change the border, margin, and padding in all browsers (opinionated). - */ fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; } + padding: 0.35em 0.75em 0.625em; } -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ legend { box-sizing: border-box; - /* 1 */ + color: inherit; display: table; - /* 1 */ max-width: 100%; - /* 1 */ padding: 0; - /* 3 */ - color: inherit; - /* 2 */ - white-space: normal; - /* 1 */ } + white-space: normal; } -/** - * 1. Add the correct display in IE 9-. - * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ progress { - display: inline-block; - /* 1 */ - vertical-align: baseline; - /* 2 */ } + vertical-align: baseline; } -/** - * Remove the default vertical scrollbar in IE. - */ textarea { overflow: auto; } -/* Interactive - ========================================================================== */ -/* - * Add the correct display in Edge, IE, and Firefox. - */ +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; + padding: 0; } + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; } + +[type="search"] { + -webkit-appearance: textfield; + outline-offset: -2px; } + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; } + details { display: block; } -/* - * Add the correct display in all browsers. - */ summary { display: list-item; } -/* - * Add the correct display in IE 9-. - */ -menu { - display: block; } - -/* Scripting - ========================================================================== */ -/** - * Add the correct display in IE 9-. - */ -canvas { - display: inline-block; } - -/** - * Add the correct display in IE. - */ template { display: none; } -/* Hidden - ========================================================================== */ -/** - * Add the correct display in IE 10-. - */ [hidden] { display: none; } @@ -839,10 +566,6 @@ textarea { textarea[rows] { height: auto; } -input::placeholder, -textarea::placeholder { - color: #cacaca; } - input:disabled, input[readonly], textarea:disabled, textarea[readonly] { @@ -857,6 +580,9 @@ textarea[readonly] { input[type='search'] { box-sizing: border-box; } +::placeholder { + color: #cacaca; } + [type='file'], [type='checkbox'], [type='radio'] { @@ -902,9 +628,9 @@ label { width: 100%; margin-bottom: 1rem; align-items: stretch; } - .input-group > :first-child { + .input-group > :first-child, .input-group > :first-child.input-group-button > * { border-radius: 0 0 0 0; } - .input-group > :last-child > * { + .input-group > :last-child, .input-group > :last-child.input-group-button > * { border-radius: 0 0 0 0; } .input-group-label, .input-group-field, .input-group-button, .input-group-button a, @@ -932,7 +658,6 @@ label { .input-group-field { border-radius: 0; flex: 1 1 0px; - height: auto; min-width: 0; } .input-group-button { @@ -945,8 +670,8 @@ label { .input-group-button input, .input-group-button button, .input-group-button label { - height: auto; align-self: stretch; + height: auto; padding-top: 0; padding-bottom: 0; font-size: 1rem; } diff --git a/ui/src/containers/HomePage.css b/ui/src/containers/HomePage.css index f220fdd..667a9c7 100644 --- a/ui/src/containers/HomePage.css +++ b/ui/src/containers/HomePage.css @@ -1,6 +1,6 @@ /** * Foundation for Sites by ZURB - * Version 6.4.3 + * Version 6.5.3 * foundation.zurb.com * Licensed under MIT Open Source */ diff --git a/ui/src/containers/HomePage.scss b/ui/src/containers/HomePage.scss index f81ac93..07d55f6 100644 --- a/ui/src/containers/HomePage.scss +++ b/ui/src/containers/HomePage.scss @@ -20,4 +20,3 @@ } } } - diff --git a/ui/src/containers/SamplePage.css b/ui/src/containers/SamplePage.css index a9c98c0..bc45eac 100644 --- a/ui/src/containers/SamplePage.css +++ b/ui/src/containers/SamplePage.css @@ -1,6 +1,6 @@ /** * Foundation for Sites by ZURB - * Version 6.4.3 + * Version 6.5.3 * foundation.zurb.com * Licensed under MIT Open Source */ From be6c3707c31383cf19a0d34f5c8fd4e317f795f0 Mon Sep 17 00:00:00 2001 From: Chelsie Johnston Date: Tue, 16 Apr 2019 14:52:46 -0500 Subject: [PATCH 02/29] Strip out CSS and SCSS files and comment out imports. --- site/src/scss/_init.scss | 2 +- {site/src/scss => theme}/_variables.scss | 7 +- ui/src/_base.scss | 45 - ui/src/components/Branding.css | 82 -- ui/src/components/Branding.js | 12 +- ui/src/components/Branding.scss | 65 -- ui/src/components/Buttons/CloseButton.css | 18 - ui/src/components/Buttons/CloseButton.js | 2 +- ui/src/components/Buttons/CloseButton.scss | 19 - ui/src/components/Buttons/ViewInfoButton.css | 32 - ui/src/components/Buttons/ViewInfoButton.js | 2 +- ui/src/components/Buttons/ViewInfoButton.scss | 11 - ui/src/components/Callout.css | 18 - ui/src/components/Callout.js | 2 +- ui/src/components/Card.css | 52 -- ui/src/components/Card.js | 2 +- ui/src/components/Card.scss | 49 - ui/src/components/ComponentInfo.css | 107 --- ui/src/components/ComponentInfo.js | 2 +- ui/src/components/ComponentInfo.scss | 69 -- ui/src/components/ComponentTopBar.css | 84 -- ui/src/components/ComponentTopBar.js | 2 +- ui/src/components/ComponentTopBar.scss | 44 - ui/src/components/FetchingCodeBlock.css | 24 - ui/src/components/FetchingCodeBlock.js | 2 +- ui/src/components/FetchingCodeBlock.scss | 17 - ui/src/components/Icons/Close.js | 2 +- ui/src/components/Icons/CloseArrow.js | 2 +- ui/src/components/Icons/Icon.css | 43 - ui/src/components/Icons/Icon.scss | 51 -- ui/src/components/Icons/Loading.js | 2 +- ui/src/components/Icons/MannySmall.js | 2 +- ui/src/components/Icons/OpenNew.js | 2 +- ui/src/components/Icons/Search.js | 2 +- ui/src/components/Menu.css | 61 -- ui/src/components/Menu.js | 2 +- ui/src/components/Menu.scss | 58 -- ui/src/components/NavDrawer.css | 76 -- ui/src/components/NavDrawer.js | 2 +- ui/src/components/NavDrawer.scss | 58 -- ui/src/components/RenderFrame.css | 3 - ui/src/components/RenderFrame.js | 2 +- ui/src/components/RenderFrame.scss | 6 - ui/src/components/TopBar.css | 77 -- ui/src/components/TopBar.js | 2 +- ui/src/components/TopBar.scss | 30 - .../Transitions/SlideInFromBottom.css | 11 - .../Transitions/SlideInFromBottom.js | 2 +- .../Transitions/SlideInFromBottom.scss | 18 - ui/src/containers/App.css | 857 ------------------ ui/src/containers/App.js | 2 +- ui/src/containers/App.scss | 96 -- ui/src/containers/HomePage.css | 19 - ui/src/containers/HomePage.js | 2 +- ui/src/containers/HomePage.scss | 22 - ui/src/containers/SamplePage.css | 27 - ui/src/containers/SamplePage.js | 2 +- ui/src/containers/SamplePage.scss | 24 - 58 files changed, 32 insertions(+), 2304 deletions(-) rename {site/src/scss => theme}/_variables.scss (88%) delete mode 100644 ui/src/_base.scss delete mode 100644 ui/src/components/Branding.css delete mode 100644 ui/src/components/Branding.scss delete mode 100644 ui/src/components/Buttons/CloseButton.css delete mode 100644 ui/src/components/Buttons/CloseButton.scss delete mode 100644 ui/src/components/Buttons/ViewInfoButton.css delete mode 100644 ui/src/components/Buttons/ViewInfoButton.scss delete mode 100644 ui/src/components/Callout.css delete mode 100644 ui/src/components/Card.css delete mode 100644 ui/src/components/Card.scss delete mode 100644 ui/src/components/ComponentInfo.css delete mode 100644 ui/src/components/ComponentInfo.scss delete mode 100644 ui/src/components/ComponentTopBar.css delete mode 100644 ui/src/components/ComponentTopBar.scss delete mode 100644 ui/src/components/FetchingCodeBlock.css delete mode 100644 ui/src/components/FetchingCodeBlock.scss delete mode 100644 ui/src/components/Icons/Icon.css delete mode 100644 ui/src/components/Icons/Icon.scss delete mode 100644 ui/src/components/Menu.css delete mode 100644 ui/src/components/Menu.scss delete mode 100644 ui/src/components/NavDrawer.css delete mode 100644 ui/src/components/NavDrawer.scss delete mode 100644 ui/src/components/RenderFrame.css delete mode 100644 ui/src/components/RenderFrame.scss delete mode 100644 ui/src/components/TopBar.css delete mode 100644 ui/src/components/TopBar.scss delete mode 100644 ui/src/components/Transitions/SlideInFromBottom.css delete mode 100644 ui/src/components/Transitions/SlideInFromBottom.scss delete mode 100644 ui/src/containers/App.css delete mode 100644 ui/src/containers/App.scss delete mode 100644 ui/src/containers/HomePage.css delete mode 100644 ui/src/containers/HomePage.scss delete mode 100644 ui/src/containers/SamplePage.css delete mode 100644 ui/src/containers/SamplePage.scss diff --git a/site/src/scss/_init.scss b/site/src/scss/_init.scss index d7a879c..45757e5 100644 --- a/site/src/scss/_init.scss +++ b/site/src/scss/_init.scss @@ -2,7 +2,7 @@ // current directory. It only initializes Foundation // and any mixins we have declared. Do not write CSS // here. -@import "variables"; +@import "../../theme/variables"; @import "~foundation-sites/scss/foundation"; $breakpoints: ( diff --git a/site/src/scss/_variables.scss b/theme/_variables.scss similarity index 88% rename from site/src/scss/_variables.scss rename to theme/_variables.scss index 81f45f1..3211c9a 100644 --- a/site/src/scss/_variables.scss +++ b/theme/_variables.scss @@ -12,6 +12,10 @@ $red: #FF4444; $green: #8AC74B; $minty: #39FFE2; +$gray: #292F36; +$mint: #4ECDC4; +$white: #fffffe; + $body-background: $white; $body-font-color: $black; @@ -20,11 +24,10 @@ $header-font-family: gill sans, sans-serif; $body-font-family: Helvetica, sans-serif; $impact-font-family: $header-font-family; -$grid-container: 1280px; +$grid-container: 1440px; $grid-container-padding: 0; $code-background: #FBFBFB; $code-color: #080808; $code-border: 1px solid #E9E9E9;; $code-padding: 0 .125rem; - diff --git a/ui/src/_base.scss b/ui/src/_base.scss deleted file mode 100644 index 4c5ed25..0000000 --- a/ui/src/_base.scss +++ /dev/null @@ -1,45 +0,0 @@ - -$body-font-family: 'Helvetica', 'Arial'; -$header-font-family: $body-font-family; -$impact-font-family: 'Gilroy', 'Gill Sans'; -$code-background: transparent; -$code-border: none; -$code-color: inherit; -$code-padding: none; - -$dark-bg: #181D22; -$dashed-border-color: #7E92A5; - -// Temporary fix for https://github.com/zurb/foundation-sites/issues/10387 -// Can be removed once that is resolved. -$grid-margin-gutters: ( - small: 20px, - medium: 30px, - large: 30px, - xlarge: 30px, - xxlarge: 30px, -) !default; - -@import "../node_modules/foundation-sites/scss/foundation"; - -@mixin overlay-cover { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, .3); - z-index: 1; -} - -%toggle-button { - font-size: rem-calc(10); - line-height: rem-calc(12); - font-weight: bold; - color: white; - text-transform: uppercase; - cursor: pointer; - > i, > svg.Icon { - margin-left: rem-calc(17); - } -} \ No newline at end of file diff --git a/ui/src/components/Branding.css b/ui/src/components/Branding.css deleted file mode 100644 index e1b0b3b..0000000 --- a/ui/src/components/Branding.css +++ /dev/null @@ -1,82 +0,0 @@ -/** - * Foundation for Sites by ZURB - * Version 6.5.3 - * foundation.zurb.com - * Licensed under MIT Open Source - */ -.Branding { - padding-right: 0.625rem; - padding-left: 0.625rem; - max-width: 75rem; - margin-left: auto; - margin-right: auto; } - @media print, screen and (min-width: 40em) { - .Branding { - padding-right: 0.9375rem; - padding-left: 0.9375rem; } } - @media print, screen and (min-width: 64em) { - .Branding { - padding-right: 0.9375rem; - padding-left: 0.9375rem; } } - @media screen and (min-width: 75em) { - .Branding { - padding-right: 0.9375rem; - padding-left: 0.9375rem; } } - @media screen and (min-width: 90em) { - .Branding { - padding-right: 0.9375rem; - padding-left: 0.9375rem; } } - .Branding h1 { - font-family: "Gilroy", "Gill Sans"; - font-weight: 700; - margin-bottom: 0; - text-transform: uppercase; } - .Branding .logo + h1:before { - content: ""; - border-left: 1px dashed #7E92A5; - width: 1px; - display: inline-block; - vertical-align: middle; } - .Branding .logo { - height: 2.4375rem; - width: 2.5rem; - margin-top: -0.125rem; - margin-bottom: -0.125rem; } - .Branding h1 { - font-size: 1.875rem; - line-height: 2.1875rem; } - .Branding .logo + h1:before { - height: 2.4375rem; - margin: 0 0.9375rem; } - @media print, screen and (min-width: 64em) { - .Branding .logo { - height: 3.8125rem; - width: 3.9375rem; - margin-top: 0.71875rem; - margin-bottom: 0.71875rem; } - .Branding h1 { - font-size: 4.5625rem; - line-height: 5.25rem; } - .Branding .logo + h1:before { - height: 3.8125rem; - margin: 0 2.5rem; } } - .Branding h3 { - margin-top: 0.75rem; - display: block; - font-size: 0.75rem; - color: inherit; - font-weight: 300; - letter-spacing: 5px; - text-align: center; - text-transform: uppercase; - margin: 1.875rem 2.75rem 0; } - .Branding h3 span { - background-color: #1B2126; } - @media print, screen and (min-width: 64em) { - .Branding h3 { - margin-top: 0.625rem; } } - .Branding .top { - display: flex; - justify-content: center; } - .Branding .top .logo, .Branding .top h1 { - flex: 0 0 auto; } diff --git a/ui/src/components/Branding.js b/ui/src/components/Branding.js index d6a966e..8346537 100644 --- a/ui/src/components/Branding.js +++ b/ui/src/components/Branding.js @@ -1,20 +1,18 @@ import React from 'react'; import logo from '../svg/manny_wave.svg'; -import './Branding.css'; +// import './Branding.css'; /** * Homepage branding block. */ const Branding = () => (
-
- Mannequin Logo + Mannequin Logo +

Mannequin

-
-

- A Component Theming Tool for the Web -

+ Component Theming Tool +
); diff --git a/ui/src/components/Branding.scss b/ui/src/components/Branding.scss deleted file mode 100644 index 4cb595b..0000000 --- a/ui/src/components/Branding.scss +++ /dev/null @@ -1,65 +0,0 @@ - -@import "../base"; - -@mixin branding-layout($logo_h, $logo_w, $h1_font-size, $h1_line_height, $divider_margin) { - .logo { - height: rem-calc($logo_h); - width: rem-calc($logo_w); - margin-top: rem-calc(($h1_line_height - $logo_h) / 2); - margin-bottom: rem-calc(($h1_line_height - $logo_h) / 2); - } - h1 { - font-size: rem-calc($h1_font-size); - line-height: rem-calc($h1_line_height); - } - .logo + h1:before { - height: rem-calc($logo_h); - margin: 0 rem-calc($divider_margin); - } -} - -.Branding { - @include xy-grid-container(); - - h1 { - font-family: $impact-font-family; - font-weight: 700; - margin-bottom: 0; - text-transform: uppercase; - } - .logo + h1:before { - content: ""; - border-left: 1px dashed $dashed-border-color; - width: 1px; - display:inline-block; - vertical-align: middle; - } - @include branding-layout(39, 40, 30, 35, 15); - @include breakpoint(large) { - @include branding-layout(61, 63, 73, 84, 40); - } - h3 { - margin-top: rem-calc(12); - display:block; - font-size: rem-calc(12); - color: inherit; - font-weight: 300; - letter-spacing: 5px; - text-align:center; - text-transform: uppercase; - span { - background-color: #1B2126; - } - margin: rem-calc(30) rem-calc(44) 0; - @include breakpoint(large) { - margin-top: rem-calc(10); - } - } - .top { - display: flex; - justify-content: center; - .logo, h1 { - flex: 0 0 auto; - } - } -} \ No newline at end of file diff --git a/ui/src/components/Buttons/CloseButton.css b/ui/src/components/Buttons/CloseButton.css deleted file mode 100644 index b8fd2c6..0000000 --- a/ui/src/components/Buttons/CloseButton.css +++ /dev/null @@ -1,18 +0,0 @@ -/** - * Foundation for Sites by ZURB - * Version 6.5.3 - * foundation.zurb.com - * Licensed under MIT Open Source - */ -.CloseButton { - background: white; - border: 1px solid #ECEAEA; - border-radius: 2em; - color: black; - text-align: center; - padding: 0.375rem; - text-decoration: none; - display: flex; - cursor: pointer; } - .CloseButton .Close { - width: 1.125rem; } diff --git a/ui/src/components/Buttons/CloseButton.js b/ui/src/components/Buttons/CloseButton.js index 6b67f15..d593c72 100644 --- a/ui/src/components/Buttons/CloseButton.js +++ b/ui/src/components/Buttons/CloseButton.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Close } from '../Icons'; import cx from 'classnames'; -import './CloseButton.css'; +// import './CloseButton.css'; const CloseButton = ({ className, ...rest }) => ( diff --git a/ui/src/components/TopBar.scss b/ui/src/components/TopBar.scss new file mode 100644 index 0000000..d4e8c10 --- /dev/null +++ b/ui/src/components/TopBar.scss @@ -0,0 +1,38 @@ +@import "../../theme/_base"; + +.MannequinTopBar { + background: $gray; + color: $white; + + .inner { + @include xy-grid-container(); + @include xy-grid(); + padding: 0 calc(39.67px / 2); + > .logo, > .opener { + @include xy-cell(shrink, $gutter-type: padding); + } + > .logo { + padding-top: 11.6px; + padding-bottom: 11.6px; + } + > .title { + @include xy-cell(auto); + } + } + + .opener { + @extend %toggle-button; + font-size: 14px; + font-weight: 800; + letter-spacing: 2px; + &:hover { + color: $mint; + } + i.menu-icon { + margin-left: rem-calc(17); + } + } + .MannySmall { + width: 44.8px; + } +} diff --git a/ui/src/containers/App.css b/ui/src/containers/App.css new file mode 100644 index 0000000..e9e4533 --- /dev/null +++ b/ui/src/containers/App.css @@ -0,0 +1,862 @@ +@charset "UTF-8"; +/** + * Foundation for Sites by ZURB + * Version 6.5.3 + * foundation.zurb.com + * Licensed under MIT Open Source + */ +@import url("https://fonts.googleapis.com/css?family=Montserrat:400,800"); +@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css"); +body { + background: gray !important; } + +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ +html { + line-height: 1.15; + -webkit-text-size-adjust: 100%; } + +body { + margin: 0; } + +h1 { + font-size: 2em; + margin: 0.67em 0; } + +hr { + box-sizing: content-box; + height: 0; + overflow: visible; } + +pre { + font-family: monospace, monospace; + font-size: 1em; } + +a { + background-color: transparent; } + +abbr[title] { + border-bottom: none; + text-decoration: underline; + text-decoration: underline dotted; } + +b, +strong { + font-weight: bolder; } + +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; } + +small { + font-size: 80%; } + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sub { + bottom: -0.25em; } + +sup { + top: -0.5em; } + +img { + border-style: none; } + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + font-size: 100%; + line-height: 1.15; + margin: 0; } + +button, +input { + overflow: visible; } + +button, +select { + text-transform: none; } + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; } + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } + +fieldset { + padding: 0.35em 0.75em 0.625em; } + +legend { + box-sizing: border-box; + color: inherit; + display: table; + max-width: 100%; + padding: 0; + white-space: normal; } + +progress { + vertical-align: baseline; } + +textarea { + overflow: auto; } + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; + padding: 0; } + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; } + +[type="search"] { + -webkit-appearance: textfield; + outline-offset: -2px; } + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; } + +details { + display: block; } + +summary { + display: list-item; } + +template { + display: none; } + +[hidden] { + display: none; } + +.foundation-mq { + font-family: "small=0em&medium=40em&large=64em&xlarge=75em&xxlarge=90em"; } + +html { + box-sizing: border-box; + font-size: 100%; } + +*, +*::before, +*::after { + box-sizing: inherit; } + +body { + margin: 0; + padding: 0; + background: #fffffe; + font-family: "Montserrat", sans-serif, sans-serif; + font-weight: normal; + line-height: 1.5; + color: #0a0a0a; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } + +img { + display: inline-block; + vertical-align: middle; + max-width: 100%; + height: auto; + -ms-interpolation-mode: bicubic; } + +textarea { + height: auto; + min-height: 50px; + border-radius: 0; } + +select { + box-sizing: border-box; + width: 100%; + border-radius: 0; } + +.map_canvas img, +.map_canvas embed, +.map_canvas object, +.mqa-display img, +.mqa-display embed, +.mqa-display object { + max-width: none !important; } + +button { + padding: 0; + appearance: none; + border: 0; + border-radius: 0; + background: transparent; + line-height: 1; + cursor: auto; } + [data-whatinput='mouse'] button { + outline: 0; } + +pre { + overflow: auto; } + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; } + +.is-visible { + display: block !important; } + +.is-hidden { + display: none !important; } + +div, +dl, +dt, +dd, +ul, +ol, +li, +h1, +h2, +h3, +h4, +h5, +h6, +pre, +form, +p, +blockquote, +th, +td { + margin: 0; + padding: 0; } + +p { + margin-bottom: 1rem; + font-size: inherit; + line-height: 1.6; + text-rendering: optimizeLegibility; } + +em, +i { + font-style: italic; + line-height: inherit; } + +strong, +b { + font-weight: bold; + line-height: inherit; } + +small { + font-size: 80%; + line-height: inherit; } + +h1, .h1, +h2, .h2, +h3, .h3, +h4, .h4, +h5, .h5, +h6, .h6 { + font-family: "Montserrat", sans-serif; + font-style: normal; + font-weight: normal; + color: inherit; + text-rendering: optimizeLegibility; } + h1 small, .h1 small, + h2 small, .h2 small, + h3 small, .h3 small, + h4 small, .h4 small, + h5 small, .h5 small, + h6 small, .h6 small { + line-height: 0; + color: #cacaca; } + +h1, .h1 { + font-size: 1.5rem; + line-height: 1.4; + margin-top: 0; + margin-bottom: 0.5rem; } + +h2, .h2 { + font-size: 1.25rem; + line-height: 1.4; + margin-top: 0; + margin-bottom: 0.5rem; } + +h3, .h3 { + font-size: 1.1875rem; + line-height: 1.4; + margin-top: 0; + margin-bottom: 0.5rem; } + +h4, .h4 { + font-size: 1.125rem; + line-height: 1.4; + margin-top: 0; + margin-bottom: 0.5rem; } + +h5, .h5 { + font-size: 1.0625rem; + line-height: 1.4; + margin-top: 0; + margin-bottom: 0.5rem; } + +h6, .h6 { + font-size: 1rem; + line-height: 1.4; + margin-top: 0; + margin-bottom: 0.5rem; } + +@media print, screen and (min-width: 40em) { + h1, .h1 { + font-size: 3rem; } + h2, .h2 { + font-size: 2.5rem; } + h3, .h3 { + font-size: 1.9375rem; } + h4, .h4 { + font-size: 1.5625rem; } + h5, .h5 { + font-size: 1.25rem; } + h6, .h6 { + font-size: 1rem; } } + +a { + line-height: inherit; + color: #1779ba; + text-decoration: none; + cursor: pointer; } + a:hover, a:focus { + color: #1468a0; } + a img { + border: 0; } + +hr { + clear: both; + max-width: 75rem; + height: 0; + margin: 1.25rem auto; + border-top: 0; + border-right: 0; + border-bottom: 1px solid #cacaca; + border-left: 0; } + +ul, +ol, +dl { + margin-bottom: 1rem; + list-style-position: outside; + line-height: 1.6; } + +li { + font-size: inherit; } + +ul { + margin-left: 1.25rem; + list-style-type: disc; } + +ol { + margin-left: 1.25rem; } + +ul ul, ol ul, ul ol, ol ol { + margin-left: 1.25rem; + margin-bottom: 0; } + +dl { + margin-bottom: 1rem; } + dl dt { + margin-bottom: 0.3rem; + font-weight: bold; } + +blockquote { + margin: 0 0 1rem; + padding: 0.5625rem 1.25rem 0 1.1875rem; + border-left: 1px solid #cacaca; } + blockquote, blockquote p { + line-height: 1.6; + color: #8a8a8a; } + +cite { + display: block; + font-size: 0.8125rem; + color: #8a8a8a; } + cite:before { + content: "— "; } + +abbr, abbr[title] { + border-bottom: 1px dotted #0a0a0a; + cursor: help; + text-decoration: none; } + +figure { + margin: 0; } + +code { + padding: 0 0.125rem; + border: 1px solid #E9E9E9; + background-color: #FBFBFB; + font-family: Consolas, "Liberation Mono", Courier, monospace; + font-weight: normal; + color: #080808; } + +kbd { + margin: 0; + padding: 0.125rem 0.25rem 0; + background-color: #e6e6e6; + font-family: Consolas, "Liberation Mono", Courier, monospace; + color: #0a0a0a; } + +.subheader { + margin-top: 0.2rem; + margin-bottom: 0.5rem; + font-weight: normal; + line-height: 1.4; + color: #8a8a8a; } + +.lead { + font-size: 125%; + line-height: 1.6; } + +.stat { + font-size: 2.5rem; + line-height: 1; } + p + .stat { + margin-top: -1rem; } + +ul.no-bullet, ol.no-bullet { + margin-left: 0; + list-style: none; } + +.text-left { + text-align: left; } + +.text-right { + text-align: right; } + +.text-center { + text-align: center; } + +.text-justify { + text-align: justify; } + +@media print, screen and (min-width: 40em) { + .medium-text-left { + text-align: left; } + .medium-text-right { + text-align: right; } + .medium-text-center { + text-align: center; } + .medium-text-justify { + text-align: justify; } } + +@media print, screen and (min-width: 64em) { + .large-text-left { + text-align: left; } + .large-text-right { + text-align: right; } + .large-text-center { + text-align: center; } + .large-text-justify { + text-align: justify; } } + +.show-for-print { + display: none !important; } + +@media print { + * { + background: transparent !important; + box-shadow: none !important; + color: black !important; + text-shadow: none !important; } + .show-for-print { + display: block !important; } + .hide-for-print { + display: none !important; } + table.show-for-print { + display: table !important; } + thead.show-for-print { + display: table-header-group !important; } + tbody.show-for-print { + display: table-row-group !important; } + tr.show-for-print { + display: table-row !important; } + td.show-for-print { + display: table-cell !important; } + th.show-for-print { + display: table-cell !important; } + a, + a:visited { + text-decoration: underline; } + a[href]:after { + content: " (" attr(href) ")"; } + .ir a:after, + a[href^='javascript:']:after, + a[href^='#']:after { + content: ''; } + abbr[title]:after { + content: " (" attr(title) ")"; } + pre, + blockquote { + border: 1px solid #8a8a8a; + page-break-inside: avoid; } + thead { + display: table-header-group; } + tr, + img { + page-break-inside: avoid; } + img { + max-width: 100% !important; } + @page { + margin: 0.5cm; } + p, + h2, + h3 { + orphans: 3; + widows: 3; } + h2, + h3 { + page-break-after: avoid; } + .print-break-inside { + page-break-inside: auto; } } + +[type='text'], [type='password'], [type='date'], [type='datetime'], [type='datetime-local'], [type='month'], [type='week'], [type='email'], [type='number'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='color'], +textarea { + display: block; + box-sizing: border-box; + width: 100%; + height: 2.4375rem; + margin: 0 0 1rem; + padding: 0.5rem; + border: 1px solid #cacaca; + border-radius: 0; + background-color: #fefefe; + box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1); + font-family: inherit; + font-size: 1rem; + font-weight: normal; + line-height: 1.5; + color: #0a0a0a; + transition: box-shadow 0.5s, border-color 0.25s ease-in-out; + appearance: none; } + [type='text']:focus, [type='password']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='week']:focus, [type='email']:focus, [type='number']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='url']:focus, [type='color']:focus, + textarea:focus { + outline: none; + border: 1px solid #8a8a8a; + background-color: #fefefe; + box-shadow: 0 0 5px #cacaca; + transition: box-shadow 0.5s, border-color 0.25s ease-in-out; } + +textarea { + max-width: 100%; } + textarea[rows] { + height: auto; } + +input:disabled, input[readonly], +textarea:disabled, +textarea[readonly] { + background-color: #e6e6e6; + cursor: not-allowed; } + +[type='submit'], +[type='button'] { + appearance: none; + border-radius: 0; } + +input[type='search'] { + box-sizing: border-box; } + +::placeholder { + color: #cacaca; } + +[type='file'], +[type='checkbox'], +[type='radio'] { + margin: 0 0 1rem; } + +[type='checkbox'] + label, +[type='radio'] + label { + display: inline-block; + vertical-align: baseline; + margin-left: 0.5rem; + margin-right: 1rem; + margin-bottom: 0; } + [type='checkbox'] + label[for], + [type='radio'] + label[for] { + cursor: pointer; } + +label > [type='checkbox'], +label > [type='radio'] { + margin-right: 0.5rem; } + +[type='file'] { + width: 100%; } + +label { + display: block; + margin: 0; + font-size: 0.875rem; + font-weight: normal; + line-height: 1.8; + color: #0a0a0a; } + label.middle { + margin: 0 0 1rem; + padding: 0.5625rem 0; } + +.help-text { + margin-top: -0.5rem; + font-size: 0.8125rem; + font-style: italic; + color: #0a0a0a; } + +.input-group { + display: flex; + width: 100%; + margin-bottom: 1rem; + align-items: stretch; } + .input-group > :first-child, .input-group > :first-child.input-group-button > * { + border-radius: 0 0 0 0; } + .input-group > :last-child, .input-group > :last-child.input-group-button > * { + border-radius: 0 0 0 0; } + +.input-group-label, .input-group-field, .input-group-button, .input-group-button a, +.input-group-button input, +.input-group-button button, +.input-group-button label { + margin: 0; + white-space: nowrap; } + +.input-group-label { + padding: 0 1rem; + border: 1px solid #cacaca; + background: #e6e6e6; + color: #0a0a0a; + text-align: center; + white-space: nowrap; + display: flex; + flex: 0 0 auto; + align-items: center; } + .input-group-label:first-child { + border-right: 0; } + .input-group-label:last-child { + border-left: 0; } + +.input-group-field { + border-radius: 0; + flex: 1 1 0px; + min-width: 0; } + +.input-group-button { + padding-top: 0; + padding-bottom: 0; + text-align: center; + display: flex; + flex: 0 0 auto; } + .input-group-button a, + .input-group-button input, + .input-group-button button, + .input-group-button label { + align-self: stretch; + height: auto; + padding-top: 0; + padding-bottom: 0; + font-size: 1rem; } + +fieldset { + margin: 0; + padding: 0; + border: 0; } + +legend { + max-width: 100%; + margin-bottom: 0.5rem; } + +.fieldset { + margin: 1.125rem 0; + padding: 1.25rem; + border: 1px solid #cacaca; } + .fieldset legend { + margin: 0; + margin-left: -0.1875rem; + padding: 0 0.1875rem; } + +select { + height: 2.4375rem; + margin: 0 0 1rem; + padding: 0.5rem; + appearance: none; + border: 1px solid #cacaca; + border-radius: 0; + background-color: #fefefe; + font-family: inherit; + font-size: 1rem; + font-weight: normal; + line-height: 1.5; + color: #0a0a0a; + background-image: url("data:image/svg+xml;utf8,"); + background-origin: content-box; + background-position: right -1rem center; + background-repeat: no-repeat; + background-size: 9px 6px; + padding-right: 1.5rem; + transition: box-shadow 0.5s, border-color 0.25s ease-in-out; } + @media screen and (min-width: 0\0) { + select { + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg=="); } } + select:focus { + outline: none; + border: 1px solid #8a8a8a; + background-color: #fefefe; + box-shadow: 0 0 5px #cacaca; + transition: box-shadow 0.5s, border-color 0.25s ease-in-out; } + select:disabled { + background-color: #e6e6e6; + cursor: not-allowed; } + select::-ms-expand { + display: none; } + select[multiple] { + height: auto; + background-image: none; } + +.is-invalid-input:not(:focus) { + border-color: #cc4b37; + background-color: #faedea; } + .is-invalid-input:not(:focus)::placeholder { + color: #cc4b37; } + +.is-invalid-label { + color: #cc4b37; } + +.form-error { + display: none; + margin-top: -0.5rem; + margin-bottom: 1rem; + font-size: 0.75rem; + font-weight: bold; + color: #cc4b37; } + .form-error.is-visible { + display: block; } + +.callout { + position: relative; + margin: 0 0 1rem 0; + padding: 1rem; + border: 1px solid rgba(10, 10, 10, 0.25); + border-radius: 0; + background-color: white; + color: #0a0a0a; } + .callout > :first-child { + margin-top: 0; } + .callout > :last-child { + margin-bottom: 0; } + .callout.primary { + background-color: #d7ecfa; + color: #0a0a0a; } + .callout.secondary { + background-color: #eaeaea; + color: #0a0a0a; } + .callout.success { + background-color: #e1faea; + color: #0a0a0a; } + .callout.warning { + background-color: #fff3d9; + color: #0a0a0a; } + .callout.alert { + background-color: #f7e4e1; + color: #0a0a0a; } + .callout.small { + padding-top: 0.5rem; + padding-right: 0.5rem; + padding-bottom: 0.5rem; + padding-left: 0.5rem; } + .callout.large { + padding-top: 3rem; + padding-right: 3rem; + padding-bottom: 3rem; + padding-left: 3rem; } + +.App { + height: 100vh; + width: 100vw; + overflow: hidden; + position: relative; } + .App .app-inner { + width: 200%; + height: 100%; + display: flex; + flex-flow: row nowrap; + transform: translate(0, 0); + transition: transform .5s ease; } + .App .main-frame { + width: 50%; + display: flex; + flex-flow: column nowrap; } + .App .main-frame .MannequinTopBar { + flex: 0 0 auto; + height: auto; } + .App .main-frame main { + flex: 1 1 0px; + height: auto; + overflow-y: auto; } + .App .main-frame main.no-scroll { + overflow-y: hidden; } + .App .NavDrawer { + width: 50%; + position: relative; + z-index: 5; + visibility: hidden; + transition: visibility 0s linear .5s; } + .App.drawer-open .app-inner { + transform: translate(-50%, 0); + transition: transform .5s ease; } + .App.drawer-open .NavDrawer { + visibility: visible; + transition: none; } + @media print, screen and (min-width: 64em) { + .App .app-inner { + width: 100%; } + .App .main-frame { + flex: 0 0 auto; + min-height: 0px; + min-width: 0px; + width: 100%; } + .App .NavDrawer { + width: 25%; + min-width: 25%; + transform: translate(0, 0); + transition: transform .5s ease, visibility 0s linear .5s; } + .App.drawer-open .app-inner { + transform: translate(0, 0); } + .App.drawer-open .NavDrawer { + transform: translate(-100%, 0); + transition: transform .5s ease; } } + @media screen and (min-width: 90em) { + .App .main-frame { + flex: 1 1 0px; + width: auto; } + .App .NavDrawer { + visibility: visible; + transition: none; } + .App .drawer-toggle { + display: none; } + .App.drawer-open .NavDrawer { + transform: translate(0, 0); } } diff --git a/ui/src/containers/App.js b/ui/src/containers/App.js index c5a9620..b5d88e7 100644 --- a/ui/src/containers/App.js +++ b/ui/src/containers/App.js @@ -3,7 +3,7 @@ import { HashRouter as Router, Route, withRouter } from 'react-router-dom'; import { connect } from 'react-redux'; import { fetchComponents, toggleDrawer } from '../actions'; -// import './App.css'; +import './App.css'; import 'what-input'; import TopBar from '../components/TopBar'; diff --git a/ui/src/containers/App.scss b/ui/src/containers/App.scss new file mode 100644 index 0000000..781b672 --- /dev/null +++ b/ui/src/containers/App.scss @@ -0,0 +1,95 @@ +@import "../../theme/_base"; + +@include foundation-global-styles; +@include foundation-typography; +@include foundation-forms; +@include foundation-callout; + +.App { + height: 100vh; + width: 100vw; + overflow: hidden; + position: relative; + + .app-inner { + width: 200%; + height: 100%; + @include xy-grid($wrap: false); + transform: translate(0, 0); + transition: transform .5s ease; + } + .main-frame { + @include xy-cell(.5, $gutter-output: false, $gutter-type: none); + @include xy-grid($direction: vertical, $wrap: false); + + .MannequinTopBar { + @include xy-cell(shrink, $vertical: true, $gutter-output: false, $gutter-type: none); + } + main { + @include xy-cell(auto, $vertical: true, $gutter-output: false, $gutter-type: none); + overflow-y:auto; + + &.no-scroll { + overflow-y:hidden; + } + } + } + .NavDrawer { + @include xy-cell(.5, $gutter-output: false, $gutter-type: none); + position: relative; + z-index: 5; + visibility: hidden; + transition: visibility 0s linear .5s; + } + &.drawer-open { + .app-inner { + transform: translate(-50%, 0); + transition: transform .5s ease; + } + .NavDrawer { + visibility: visible; + transition: none; + } + } + + @include breakpoint(large) { + .app-inner { + width: 100%; + } + .main-frame { + @include xy-cell(full, $gutter-output: false, $gutter-type: none); + } + .NavDrawer { + @include xy-cell(3/12, $gutter-output: false, $gutter-type: none); + min-width: 25%; + transform: translate(0, 0); + transition: transform .5s ease, visibility 0s linear .5s; + } + &.drawer-open { + .app-inner { + transform: translate(0, 0); + } + .NavDrawer { + transform: translate(-100%, 0); + transition: transform .5s ease; + } + } + } + @include breakpoint(xxlarge) { + .main-frame { + @include xy-cell(auto, $gutter-output: false, $gutter-type: none); + } + .NavDrawer { + visibility: visible; + transition: none; + } + .drawer-toggle { + display: none; + } + &.drawer-open { + .NavDrawer { + transform: translate(0, 0); + } + } + } +} From 241611d5969c3803dd5d46ab9d4cbe3926277ebb Mon Sep 17 00:00:00 2001 From: Chelsie Johnston Date: Fri, 19 Apr 2019 20:59:04 -0500 Subject: [PATCH 04/29] Re-theme the nav drawer toggle and the search bar. --- theme/_variables.scss | 14 +++-- ui/src/components/Card.css | 57 +++++++++++++++++++ ui/src/components/Card.js | 2 +- ui/src/components/Card.scss | 48 ++++++++++++++++ ui/src/components/NavDrawer.css | 94 ++++++++++++++++++++++++++++++++ ui/src/components/NavDrawer.js | 13 +++-- ui/src/components/NavDrawer.scss | 81 +++++++++++++++++++++++++++ ui/src/components/TopBar.css | 17 +++--- ui/src/components/TopBar.scss | 7 +-- ui/src/containers/App.css | 4 +- ui/src/containers/App.scss | 5 +- 11 files changed, 312 insertions(+), 30 deletions(-) create mode 100644 ui/src/components/Card.css create mode 100644 ui/src/components/Card.scss create mode 100644 ui/src/components/NavDrawer.css create mode 100644 ui/src/components/NavDrawer.scss diff --git a/theme/_variables.scss b/theme/_variables.scss index 7879f96..876c2e7 100644 --- a/theme/_variables.scss +++ b/theme/_variables.scss @@ -13,6 +13,7 @@ // $minty: #39FFE2; $gray: #292F36; +$gray-light: #4F545A; $mint: #4ECDC4; $white: #fffffe; @@ -39,12 +40,17 @@ $code-padding: 0 .125rem; //Mixins +@mixin font-bold { + font-size: 14px; + font-weight: 800; + letter-spacing: 2px; + text-transform: uppercase; +} + %toggle-button { - font-size: rem-calc(10); + @include font-bold; line-height: rem-calc(12); - font-weight: bold; - color: white; - text-transform: uppercase; + color: $white; cursor: pointer; > i, > svg.Icon { margin-left: rem-calc(17); diff --git a/ui/src/components/Card.css b/ui/src/components/Card.css new file mode 100644 index 0000000..cd4ba65 --- /dev/null +++ b/ui/src/components/Card.css @@ -0,0 +1,57 @@ +/** + * Foundation for Sites by ZURB + * Version 6.5.3 + * foundation.zurb.com + * Licensed under MIT Open Source + */ +@import url("https://fonts.googleapis.com/css?family=Montserrat:400,800"); +@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css"); +body { + background: gray !important; } + +.Card { + border: 1px dashed green; + padding: 20px; } + .Card:hover { + border-color: transparent; + background-color: #4A90E2; } + .Card:hover h6 { + color: white; } + .Card a { + color: inherit; + display: block; } + .Card h6 { + font-size: 0.5625rem; + line-height: 0.6875rem; + color: #556371; + margin-top: 0.5rem; + font-weight: bold; } + .Card h5 { + font-size: 1.125rem; + line-height: 1.375rem; + font-weight: bold; + letter-spacing: 1px; + margin-bottom: 0; } + +.CardGrid { + display: flex; + flex-flow: row wrap; } + .CardGrid .Card { + flex: 0 0 auto; + min-height: 0px; + min-width: 0px; + width: calc(100% - 1.25rem); + margin-right: 0.625rem; + margin-left: 0.625rem; + margin-bottom: 0.625rem; + margin-top: 0.625rem; } + @media print, screen and (min-width: 40em) { + .CardGrid .Card { + width: calc(50% - 1.875rem); + margin-right: 0.9375rem; + margin-left: 0.9375rem; } } + @media print, screen and (min-width: 64em) { + .CardGrid .Card { + width: calc(25% - 1.875rem); + margin-right: 0.9375rem; + margin-left: 0.9375rem; } } diff --git a/ui/src/components/Card.js b/ui/src/components/Card.js index 99e294a..bb9eb62 100644 --- a/ui/src/components/Card.js +++ b/ui/src/components/Card.js @@ -2,7 +2,7 @@ import React from 'react'; import { Link } from 'react-router-dom'; import PropTypes from 'prop-types'; -// import './Card.css'; +import './Card.css'; const Card = ({ title, subtitle, to }) => (
diff --git a/ui/src/components/Card.scss b/ui/src/components/Card.scss new file mode 100644 index 0000000..547adc4 --- /dev/null +++ b/ui/src/components/Card.scss @@ -0,0 +1,48 @@ +@import "../../theme/_base"; + +.Card { + border: 1px dashed green; + padding: 20px; + + &:hover { + border-color: transparent; + background-color: #4A90E2; + + h6 { + color: white; + } + } + a { + color: inherit; + display:block; + } + h6 { + font-size:rem-calc(9); + line-height: rem-calc(11); + color: #556371; + margin-top: rem-calc(8); + font-weight: bold; + } + h5 { + font-size: rem-calc(18); + line-height: rem-calc(22); + font-weight: bold; + letter-spacing: 1px; + margin-bottom: 0; + } +} + +.CardGrid { + @include xy-grid(); + + .Card { + @include xy-cell($gutter-position: right left bottom top); + + @include breakpoint(medium) { + @include xy-cell(2/4); + } + @include breakpoint(large) { + @include xy-cell(1/4); + } + } +} diff --git a/ui/src/components/NavDrawer.css b/ui/src/components/NavDrawer.css new file mode 100644 index 0000000..59c75bd --- /dev/null +++ b/ui/src/components/NavDrawer.css @@ -0,0 +1,94 @@ +/** + * Foundation for Sites by ZURB + * Version 6.5.3 + * foundation.zurb.com + * Licensed under MIT Open Source + */ +@import url("https://fonts.googleapis.com/css?family=Montserrat:400,800"); +@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css"); +.NavDrawer .drawer-toggle.closer { + font-size: 14px; + font-weight: 800; + letter-spacing: 2px; + text-transform: uppercase; + line-height: 0.75rem; + color: #fffffe; + cursor: pointer; } + .NavDrawer .drawer-toggle.closer > i, .NavDrawer .drawer-toggle.closer > svg.Icon { + margin-left: 1.0625rem; } + +body { + background: gray !important; } + +.NavDrawer { + background-color: #4F545A; + border-top: 1px solid #2A2A2A; + border-left: 1px solid #2A2A2A; + border-bottom: 1px solid #2A2A2A; + display: flex; + flex-flow: column wrap; + padding: 0 calc(39.67px / 2); } + .NavDrawer .drawer-toggle.closer { + text-align: right; + height: 3.75rem; } + .NavDrawer .drawer-toggle.closer > i { + vertical-align: middle; } + .NavDrawer > .SearchForm { + flex: 0 0 auto; + height: auto; + margin-right: 0.625rem; + margin-left: 0.625rem; + margin-bottom: 0.625rem; } + @media screen and (min-width: 90em) { + .NavDrawer > .SearchForm { + flex: 0 0 auto; + height: auto; + margin-right: 0.9375rem; + margin-left: 0.9375rem; + margin-bottom: 0.9375rem; + margin-top: 0.9375rem; } } + .NavDrawer > .MenuList { + flex: 1 1 0px; + height: auto; + overflow: auto; } + +.NavDrawer__top { + display: grid; + grid-template-columns: 1fr 1fr; } + .NavDrawer__top > span { + font-size: 14px; + font-weight: 800; + letter-spacing: 2px; + text-transform: uppercase; + color: #fffffe; + padding-right: 0.625rem; + padding-left: 0.625rem; + padding-top: 1.125rem; + padding-bottom: 0.625rem; + height: 3.75rem; } + .NavDrawer__top > .drawer-toggle { + text-align: right; } + +.SearchForm { + position: relative; } + .SearchForm input { + border: none; + background-color: #21262B; + color: white; + font-size: 14px; + font-weight: 400; + line-height: 14px; + padding: 10px 13px; + height: auto; + margin-bottom: 0; + border-radius: 0; + padding-left: 2.5rem; } + .SearchForm input:focus { + background-color: #21262B; } + .SearchForm i { + position: absolute; + top: 50%; + left: 0.9375rem; + font-size: 0.8125rem; + margin-top: -.5em; + color: #fffffe; } diff --git a/ui/src/components/NavDrawer.js b/ui/src/components/NavDrawer.js index 8102f5b..a2849a2 100644 --- a/ui/src/components/NavDrawer.js +++ b/ui/src/components/NavDrawer.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import Menu from './Menu'; import cx from 'classnames'; import { CloseArrow, Search as SearchIcon } from './Icons'; -// import './NavDrawer.css'; +import './NavDrawer.css'; export class NavDrawer extends Component { constructor(props) { @@ -39,16 +39,19 @@ export class NavDrawer extends Component { return ( diff --git a/ui/src/components/NavDrawer.scss b/ui/src/components/NavDrawer.scss new file mode 100644 index 0000000..d8a1180 --- /dev/null +++ b/ui/src/components/NavDrawer.scss @@ -0,0 +1,81 @@ +@import "../../theme/_base"; + +.NavDrawer { + background-color: $gray-light; + border-top: 1px solid #2A2A2A; + border-left: 1px solid #2A2A2A; + border-bottom: 1px solid #2A2A2A; + @include xy-grid(vertical); + padding: 0 calc(39.67px / 2); + .drawer-toggle.closer { + // @include xy-cell(shrink, $gutter-position: right left top bottom, $gutter-type: padding); + @extend %toggle-button; + text-align: right; + height: rem-calc(60); + > i { + vertical-align: middle; + } + } + > .SearchForm { + @include xy-cell(shrink, $gutter-position: right left bottom, $vertical: true); + @include breakpoint(xxlarge) { + @include xy-cell(shrink, $gutter-position: right left bottom top, $vertical: true); + } + } + > .MenuList { + @include xy-cell(auto, $gutter-output: false, $gutter-type: none, $vertical: true); + overflow:auto; + } +} + +.NavDrawer__top { + display: grid; + grid-template-columns: 1fr 1fr; + // @include xy-grid(); + // > span, > .drawer-toggle { + // + // // @include xy-cell(6, $gutter-output: false); + // } + > span { + @include font-bold; + color: $white; + padding-right: 0.625rem; + padding-left: 0.625rem; + padding-top: 1.125rem; + padding-bottom: 0.625rem; + height: 3.75rem; + } + + > .drawer-toggle { + text-align: right; + } +} + +.SearchForm { + position: relative; + input { + border: none; + background-color: #21262B; + color: white; + font-size: 14px; + font-weight: 400; + line-height: 14px; + padding: 10px 13px; + height: auto; + margin-bottom: 0; + border-radius: 0; + padding-left: rem-calc(40); + + &:focus { + background-color: #21262B; + } + } + i { + position: absolute; + top: 50%; + left: rem-calc(15); + font-size: rem-calc(13); + margin-top: -.5em; + color: $white; + } +} diff --git a/ui/src/components/TopBar.css b/ui/src/components/TopBar.css index db5a92b..186be31 100644 --- a/ui/src/components/TopBar.css +++ b/ui/src/components/TopBar.css @@ -7,11 +7,12 @@ @import url("https://fonts.googleapis.com/css?family=Montserrat:400,800"); @import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css"); .MannequinTopBar .opener { - font-size: 0.625rem; - line-height: 0.75rem; - font-weight: bold; - color: white; + font-size: 14px; + font-weight: 800; + letter-spacing: 2px; text-transform: uppercase; + line-height: 0.75rem; + color: #fffffe; cursor: pointer; } .MannequinTopBar .opener > i, .MannequinTopBar .opener > svg.Icon { margin-left: 1.0625rem; } @@ -31,11 +32,6 @@ body { display: flex; flex-flow: row wrap; padding: 0 calc(39.67px / 2); } - .MannequinTopBar .inner > .logo, .MannequinTopBar .inner > .opener { - flex: 0 0 auto; - width: auto; - padding-right: 0.625rem; - padding-left: 0.625rem; } .MannequinTopBar .inner > .logo { padding-top: 11.6px; padding-bottom: 11.6px; } @@ -47,7 +43,8 @@ body { .MannequinTopBar .opener { font-size: 14px; font-weight: 800; - letter-spacing: 2px; } + letter-spacing: 2px; + text-transform: uppercase; } .MannequinTopBar .opener:hover { color: #4ECDC4; } .MannequinTopBar .opener i.menu-icon { diff --git a/ui/src/components/TopBar.scss b/ui/src/components/TopBar.scss index d4e8c10..a58e2ad 100644 --- a/ui/src/components/TopBar.scss +++ b/ui/src/components/TopBar.scss @@ -8,9 +8,6 @@ @include xy-grid-container(); @include xy-grid(); padding: 0 calc(39.67px / 2); - > .logo, > .opener { - @include xy-cell(shrink, $gutter-type: padding); - } > .logo { padding-top: 11.6px; padding-bottom: 11.6px; @@ -22,9 +19,7 @@ .opener { @extend %toggle-button; - font-size: 14px; - font-weight: 800; - letter-spacing: 2px; + @include font-bold; &:hover { color: $mint; } diff --git a/ui/src/containers/App.css b/ui/src/containers/App.css index e9e4533..cafd5f9 100644 --- a/ui/src/containers/App.css +++ b/ui/src/containers/App.css @@ -840,8 +840,8 @@ select { min-width: 0px; width: 100%; } .App .NavDrawer { - width: 25%; - min-width: 25%; + width: 100%; + min-width: 28.33333%; transform: translate(0, 0); transition: transform .5s ease, visibility 0s linear .5s; } .App.drawer-open .app-inner { diff --git a/ui/src/containers/App.scss b/ui/src/containers/App.scss index 781b672..e22077b 100644 --- a/ui/src/containers/App.scss +++ b/ui/src/containers/App.scss @@ -60,8 +60,9 @@ @include xy-cell(full, $gutter-output: false, $gutter-type: none); } .NavDrawer { - @include xy-cell(3/12, $gutter-output: false, $gutter-type: none); - min-width: 25%; + @include xy-cell(12, $gutter-output: false, $gutter-type: none); + // min-width: 25%; + min-width: xy-cell-size(3.4 of 12); transform: translate(0, 0); transition: transform .5s ease, visibility 0s linear .5s; } From 63466fa5fdb61c5f70070f988aa7fef37ac80823 Mon Sep 17 00:00:00 2001 From: Chelsie Johnston Date: Mon, 22 Apr 2019 18:59:10 -0500 Subject: [PATCH 05/29] Re-theme the nav drawer and menus. --- theme/_base.scss | 4 -- theme/_variables.scss | 7 +-- ui/src/components/Card.css | 5 +- ui/src/components/Menu.css | 88 ++++++++++++++++++++++++++++++++ ui/src/components/Menu.js | 2 +- ui/src/components/Menu.scss | 82 +++++++++++++++++++++++++++++ ui/src/components/NavDrawer.css | 12 ++--- ui/src/components/NavDrawer.scss | 10 ++-- ui/src/components/TopBar.css | 5 +- ui/src/components/TopBar.scss | 2 +- ui/src/containers/App.css | 5 +- 11 files changed, 186 insertions(+), 36 deletions(-) create mode 100644 ui/src/components/Menu.css create mode 100644 ui/src/components/Menu.scss diff --git a/theme/_base.scss b/theme/_base.scss index ce73cc8..496bb8b 100644 --- a/theme/_base.scss +++ b/theme/_base.scss @@ -1,6 +1,2 @@ @import "../node_modules/foundation-sites/scss/foundation"; @import "./variables"; - -body { - background: gray !important; -} diff --git a/theme/_variables.scss b/theme/_variables.scss index 876c2e7..b6c53d9 100644 --- a/theme/_variables.scss +++ b/theme/_variables.scss @@ -12,16 +12,17 @@ // $green: #8AC74B; // $minty: #39FFE2; -$gray: #292F36; -$gray-light: #4F545A; +$charcoal: #292F36; +$ash: #4F545A; $mint: #4ECDC4; +$eggshell: #EBECEC; $white: #fffffe; $body-background: $white; $body-font-color: $black; //Site fonts -@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800'); +@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600,800'); //Site Icons @import url('https://use.fontawesome.com/releases/v5.8.1/css/all.css'); diff --git a/ui/src/components/Card.css b/ui/src/components/Card.css index cd4ba65..d913069 100644 --- a/ui/src/components/Card.css +++ b/ui/src/components/Card.css @@ -4,11 +4,8 @@ * foundation.zurb.com * Licensed under MIT Open Source */ -@import url("https://fonts.googleapis.com/css?family=Montserrat:400,800"); +@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600,800"); @import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css"); -body { - background: gray !important; } - .Card { border: 1px dashed green; padding: 20px; } diff --git a/ui/src/components/Menu.css b/ui/src/components/Menu.css new file mode 100644 index 0000000..1f4f243 --- /dev/null +++ b/ui/src/components/Menu.css @@ -0,0 +1,88 @@ +/** + * Foundation for Sites by ZURB + * Version 6.5.3 + * foundation.zurb.com + * Licensed under MIT Open Source + */ +@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600,800"); +@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css"); +.MenuList { + list-style: none; + margin: 0; + padding: 0; + margin: 0; + list-style: none; + position: relative; + display: flex; + flex-wrap: wrap; + display: block; } + [data-whatinput='mouse'] .MenuList li { + outline: 0; } + .MenuList a, + .MenuList .button { + line-height: 1; + text-decoration: none; + display: block; + padding: 0.7rem 1rem; } + .MenuList input, + .MenuList select, + .MenuList a, + .MenuList button { + margin-bottom: 0; } + .MenuList input { + display: inline-block; } + +.MenuItem a { + display: block; + font-size: 0.875rem; + line-height: 1.0625rem; + letter-spacing: 2px; + padding: 0.625rem 1.5rem 0.625rem 0.75rem; + text-transform: uppercase; + color: #fffffe; } + .MenuItem a:focus { + outline: 0; } + +.MenuItem.collapsible > a:before { + content: "-"; + float: right; } + +.MenuItem.collapsible.collapsed > a:before { + content: "+"; } + +.MenuItem.l1:first-child { + margin-top: 24px; } + +.MenuItem.l1 > a { + font-weight: 800; + padding-top: 22px; + padding-bottom: 20px; + transition: background .25s ease; } + .MenuItem.l1 > a:hover:not(:focus) { + color: #292F36; + background: #EBECEC; + text-decoration: none; } + +.MenuItem.l2:first-child a { + padding-top: 0; } + +.MenuItem.l2:last-child > a { + padding-bottom: 20px; } + +.MenuItem.l2 > a { + font-weight: 600; } + .MenuItem.l2 > a:hover { + text-decoration: underline; } + +.MenuItem.l3 > a { + text-transform: none; + letter-spacing: 1px; } + .MenuItem.l3 > a:hover { + text-decoration: underline; } + +.MenuItem:not(.collapsed) a { + background: #EBECEC; + color: #292F36; } + +.SubmenuContainer.rah-static--height-zero { + visibility: hidden; } diff --git a/ui/src/components/Menu.js b/ui/src/components/Menu.js index ca9db12..2bea778 100644 --- a/ui/src/components/Menu.js +++ b/ui/src/components/Menu.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import { Link } from 'react-router-dom'; import AnimateHeight from 'react-animate-height'; import PropTypes from 'prop-types'; -// import './Menu.css'; +import './Menu.css'; function Menu({ tree, settings }) { return ( diff --git a/ui/src/components/Menu.scss b/ui/src/components/Menu.scss new file mode 100644 index 0000000..fd8628e --- /dev/null +++ b/ui/src/components/Menu.scss @@ -0,0 +1,82 @@ + +@import "../../theme/base"; + +.MenuList { + list-style:none; + margin: 0; + @include menu-base; + display: block; +} +.MenuItem { + a { + display: block; + font-size: rem-calc(14); + line-height: rem-calc(17); + letter-spacing: 2px; + padding: rem-calc(10) rem-calc(24) rem-calc(10) rem-calc(12); + text-transform: uppercase; + color: $white; + &:focus { + outline: 0; + } + } + &.collapsible { + > a:before { + content: "-"; + float:right; + } + &.collapsed > a:before { + content: "+"; + } + } + &.l1 { + &:first-child { + margin-top: 24px; + } + > a { + font-weight: 800; + padding-top: 22px; + padding-bottom: 20px; + transition: background .25s ease; + &:hover:not(:focus) { + color: $charcoal; + background: $eggshell; + text-decoration: none; + } + } + } + &.l2 { + &:first-child a { + padding-top: 0; + } + &:last-child > a { + padding-bottom: 20px; + } + > a { + font-weight: 600; + &:hover { + text-decoration: underline; + } + } + } + &.l3 { + > a { + text-transform: none; + letter-spacing: 1px; + &:hover { + text-decoration: underline; + } + } + } + &:not(.collapsed) a { + background: $eggshell; + color: $charcoal; + } +} + +.SubmenuContainer { + // Remove submenus from tab order when collapsed. + &.rah-static--height-zero { + visibility: hidden; + } +} diff --git a/ui/src/components/NavDrawer.css b/ui/src/components/NavDrawer.css index 59c75bd..442df0a 100644 --- a/ui/src/components/NavDrawer.css +++ b/ui/src/components/NavDrawer.css @@ -4,7 +4,7 @@ * foundation.zurb.com * Licensed under MIT Open Source */ -@import url("https://fonts.googleapis.com/css?family=Montserrat:400,800"); +@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600,800"); @import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css"); .NavDrawer .drawer-toggle.closer { font-size: 14px; @@ -17,14 +17,9 @@ .NavDrawer .drawer-toggle.closer > i, .NavDrawer .drawer-toggle.closer > svg.Icon { margin-left: 1.0625rem; } -body { - background: gray !important; } - .NavDrawer { background-color: #4F545A; - border-top: 1px solid #2A2A2A; - border-left: 1px solid #2A2A2A; - border-bottom: 1px solid #2A2A2A; + box-shadow: 0 2px 5px 0 #4F545A; display: flex; flex-flow: column wrap; padding: 0 calc(39.67px / 2); } @@ -38,14 +33,13 @@ body { height: auto; margin-right: 0.625rem; margin-left: 0.625rem; - margin-bottom: 0.625rem; } + margin-top: 0.625rem; } @media screen and (min-width: 90em) { .NavDrawer > .SearchForm { flex: 0 0 auto; height: auto; margin-right: 0.9375rem; margin-left: 0.9375rem; - margin-bottom: 0.9375rem; margin-top: 0.9375rem; } } .NavDrawer > .MenuList { flex: 1 1 0px; diff --git a/ui/src/components/NavDrawer.scss b/ui/src/components/NavDrawer.scss index d8a1180..5dbcb24 100644 --- a/ui/src/components/NavDrawer.scss +++ b/ui/src/components/NavDrawer.scss @@ -1,10 +1,8 @@ @import "../../theme/_base"; .NavDrawer { - background-color: $gray-light; - border-top: 1px solid #2A2A2A; - border-left: 1px solid #2A2A2A; - border-bottom: 1px solid #2A2A2A; + background-color: $ash; + box-shadow: 0 2px 5px 0 $ash; @include xy-grid(vertical); padding: 0 calc(39.67px / 2); .drawer-toggle.closer { @@ -17,9 +15,9 @@ } } > .SearchForm { - @include xy-cell(shrink, $gutter-position: right left bottom, $vertical: true); + @include xy-cell(shrink, $gutter-position: right left top, $vertical: true); @include breakpoint(xxlarge) { - @include xy-cell(shrink, $gutter-position: right left bottom top, $vertical: true); + @include xy-cell(shrink, $gutter-position: right left top, $vertical: true); } } > .MenuList { diff --git a/ui/src/components/TopBar.css b/ui/src/components/TopBar.css index 186be31..a4a816c 100644 --- a/ui/src/components/TopBar.css +++ b/ui/src/components/TopBar.css @@ -4,7 +4,7 @@ * foundation.zurb.com * Licensed under MIT Open Source */ -@import url("https://fonts.googleapis.com/css?family=Montserrat:400,800"); +@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600,800"); @import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css"); .MannequinTopBar .opener { font-size: 14px; @@ -17,9 +17,6 @@ .MannequinTopBar .opener > i, .MannequinTopBar .opener > svg.Icon { margin-left: 1.0625rem; } -body { - background: gray !important; } - .MannequinTopBar { background: #292F36; color: #fffffe; } diff --git a/ui/src/components/TopBar.scss b/ui/src/components/TopBar.scss index a58e2ad..dd85c62 100644 --- a/ui/src/components/TopBar.scss +++ b/ui/src/components/TopBar.scss @@ -1,7 +1,7 @@ @import "../../theme/_base"; .MannequinTopBar { - background: $gray; + background: $charcoal; color: $white; .inner { diff --git a/ui/src/containers/App.css b/ui/src/containers/App.css index cafd5f9..a478319 100644 --- a/ui/src/containers/App.css +++ b/ui/src/containers/App.css @@ -5,11 +5,8 @@ * foundation.zurb.com * Licensed under MIT Open Source */ -@import url("https://fonts.googleapis.com/css?family=Montserrat:400,800"); +@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600,800"); @import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css"); -body { - background: gray !important; } - /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ html { line-height: 1.15; From 337dfb72ed851a0401036943ab4173f4221a3519 Mon Sep 17 00:00:00 2001 From: Chelsie Johnston Date: Tue, 23 Apr 2019 13:34:28 -0500 Subject: [PATCH 06/29] Change the layout so that NavDrawer doesn't overlap the main frame when open. --- ui/src/components/Menu.css | 3 ++ ui/src/components/Menu.scss | 4 +- ui/src/components/NavDrawer.css | 3 +- ui/src/components/NavDrawer.scss | 1 + ui/src/containers/App.css | 69 ++++++----------------------- ui/src/containers/App.scss | 75 ++++++++++++++++++-------------- 6 files changed, 65 insertions(+), 90 deletions(-) diff --git a/ui/src/components/Menu.css b/ui/src/components/Menu.css index 1f4f243..6657b16 100644 --- a/ui/src/components/Menu.css +++ b/ui/src/components/Menu.css @@ -80,6 +80,9 @@ .MenuItem.l3 > a:hover { text-decoration: underline; } +.MenuItem.l3:last-child > a { + padding-bottom: 20px; } + .MenuItem:not(.collapsed) a { background: #EBECEC; color: #292F36; } diff --git a/ui/src/components/Menu.scss b/ui/src/components/Menu.scss index fd8628e..c47ebb0 100644 --- a/ui/src/components/Menu.scss +++ b/ui/src/components/Menu.scss @@ -1,4 +1,3 @@ - @import "../../theme/base"; .MenuList { @@ -67,6 +66,9 @@ text-decoration: underline; } } + &:last-child > a { + padding-bottom: 20px; + } } &:not(.collapsed) a { background: $eggshell; diff --git a/ui/src/components/NavDrawer.css b/ui/src/components/NavDrawer.css index 442df0a..3463ff7 100644 --- a/ui/src/components/NavDrawer.css +++ b/ui/src/components/NavDrawer.css @@ -25,7 +25,8 @@ padding: 0 calc(39.67px / 2); } .NavDrawer .drawer-toggle.closer { text-align: right; - height: 3.75rem; } + height: 3.75rem; + width: 10.9375rem; } .NavDrawer .drawer-toggle.closer > i { vertical-align: middle; } .NavDrawer > .SearchForm { diff --git a/ui/src/components/NavDrawer.scss b/ui/src/components/NavDrawer.scss index 5dbcb24..efd1b5a 100644 --- a/ui/src/components/NavDrawer.scss +++ b/ui/src/components/NavDrawer.scss @@ -10,6 +10,7 @@ @extend %toggle-button; text-align: right; height: rem-calc(60); + width: rem-calc(175); > i { vertical-align: middle; } diff --git a/ui/src/containers/App.css b/ui/src/containers/App.css index a478319..48f9844 100644 --- a/ui/src/containers/App.css +++ b/ui/src/containers/App.css @@ -797,63 +797,22 @@ select { overflow: hidden; position: relative; } .App .app-inner { - width: 200%; height: 100%; display: flex; flex-flow: row nowrap; - transform: translate(0, 0); - transition: transform .5s ease; } + padding-right: 0; + padding-left: 0; + max-width: 1440px; + margin-left: auto; + margin-right: auto; + width: 100%; } .App .main-frame { - width: 50%; - display: flex; - flex-flow: column nowrap; } - .App .main-frame .MannequinTopBar { - flex: 0 0 auto; - height: auto; } - .App .main-frame main { - flex: 1 1 0px; - height: auto; - overflow-y: auto; } - .App .main-frame main.no-scroll { - overflow-y: hidden; } - .App .NavDrawer { - width: 50%; - position: relative; - z-index: 5; - visibility: hidden; - transition: visibility 0s linear .5s; } - .App.drawer-open .app-inner { - transform: translate(-50%, 0); - transition: transform .5s ease; } + flex: 0 0 auto; + min-height: 0px; + min-width: 0px; + width: 100%; } .App.drawer-open .NavDrawer { - visibility: visible; - transition: none; } - @media print, screen and (min-width: 64em) { - .App .app-inner { - width: 100%; } - .App .main-frame { - flex: 0 0 auto; - min-height: 0px; - min-width: 0px; - width: 100%; } - .App .NavDrawer { - width: 100%; - min-width: 28.33333%; - transform: translate(0, 0); - transition: transform .5s ease, visibility 0s linear .5s; } - .App.drawer-open .app-inner { - transform: translate(0, 0); } - .App.drawer-open .NavDrawer { - transform: translate(-100%, 0); - transition: transform .5s ease; } } - @media screen and (min-width: 90em) { - .App .main-frame { - flex: 1 1 0px; - width: auto; } - .App .NavDrawer { - visibility: visible; - transition: none; } - .App .drawer-toggle { - display: none; } - .App.drawer-open .NavDrawer { - transform: translate(0, 0); } } + width: 28.33333%; } + .App.drawer-open .main-frame { + width: 71.66667%; + transition: width .3s ease; } diff --git a/ui/src/containers/App.scss b/ui/src/containers/App.scss index e22077b..9c26dc4 100644 --- a/ui/src/containers/App.scss +++ b/ui/src/containers/App.scss @@ -12,84 +12,93 @@ position: relative; .app-inner { - width: 200%; + // width: 200%; height: 100%; + // @include xy-grid($wrap: false); + // transform: translate(0, 0); + // transition: transform .5s ease; @include xy-grid($wrap: false); - transform: translate(0, 0); - transition: transform .5s ease; + @include xy-grid-container; + width: 100%; } .main-frame { - @include xy-cell(.5, $gutter-output: false, $gutter-type: none); - @include xy-grid($direction: vertical, $wrap: false); + // @include xy-cell(.5, $gutter-output: false, $gutter-type: none); + // @include xy-grid($direction: vertical, $wrap: false); + @include xy-cell(full, $gutter-output: false, $gutter-type: none); .MannequinTopBar { - @include xy-cell(shrink, $vertical: true, $gutter-output: false, $gutter-type: none); + // @include xy-cell(shrink, $vertical: true, $gutter-output: false, $gutter-type: none); } main { - @include xy-cell(auto, $vertical: true, $gutter-output: false, $gutter-type: none); - overflow-y:auto; + // @include xy-cell(auto, $vertical: true, $gutter-output: false, $gutter-type: none); + // overflow-y:auto; &.no-scroll { - overflow-y:hidden; + // overflow-y:hidden; } } } .NavDrawer { - @include xy-cell(.5, $gutter-output: false, $gutter-type: none); - position: relative; - z-index: 5; - visibility: hidden; - transition: visibility 0s linear .5s; + // @include xy-cell(.5, $gutter-output: false, $gutter-type: none); + // position: relative; + // z-index: 5; + // visibility: hidden; + // transition: visibility 0s linear .5s; } &.drawer-open { .app-inner { - transform: translate(-50%, 0); - transition: transform .5s ease; + // transform: translate(-50%, 0); + // transition: transform .5s ease; } .NavDrawer { - visibility: visible; - transition: none; + // visibility: visible; + // transition: none; + @include xy-cell(3.4, $gutter-output: false, $gutter-type: none); + } + .main-frame { + @include xy-cell(8.6, $gutter-output: false, $gutter-type: none); + transition: width .3s ease; } } @include breakpoint(large) { .app-inner { - width: 100%; + // width: 100%; } .main-frame { - @include xy-cell(full, $gutter-output: false, $gutter-type: none); + // @include xy-cell(full, $gutter-output: false, $gutter-type: none); } .NavDrawer { - @include xy-cell(12, $gutter-output: false, $gutter-type: none); - // min-width: 25%; - min-width: xy-cell-size(3.4 of 12); - transform: translate(0, 0); - transition: transform .5s ease, visibility 0s linear .5s; + // @include xy-cell(12, $gutter-output: false, $gutter-type: none); + // // min-width: 25%; + // min-width: xy-cell-size(3.4 of 12); + // transform: translate(0, 0); + // transition: transform .5s ease, visibility 0s linear .5s; } &.drawer-open { .app-inner { - transform: translate(0, 0); + // transform: translate(0, 0); } .NavDrawer { - transform: translate(-100%, 0); - transition: transform .5s ease; + // transform: translate(-100%, 0); + // transition: transform .5s ease; } } } @include breakpoint(xxlarge) { .main-frame { - @include xy-cell(auto, $gutter-output: false, $gutter-type: none); + // @include xy-cell(auto, $gutter-output: false, $gutter-type: none); } .NavDrawer { - visibility: visible; - transition: none; + // visibility: visible; + // transition: none; } .drawer-toggle { - display: none; + // display: none; } &.drawer-open { .NavDrawer { - transform: translate(0, 0); + // transform: translate(0, 0); } } } From b2979e510b108652448c999503becfccaabfe04f Mon Sep 17 00:00:00 2001 From: Chelsie Johnston Date: Tue, 23 Apr 2019 18:45:57 -0500 Subject: [PATCH 07/29] Re-theme the component top bar. --- ui/src/components/ComponentTopBar.css | 77 ++++++++++++++++++++++++++ ui/src/components/ComponentTopBar.js | 2 +- ui/src/components/ComponentTopBar.scss | 61 ++++++++++++++++++++ ui/src/containers/App.css | 69 ++++++++++++++++++----- ui/src/containers/App.scss | 75 +++++++++++-------------- 5 files changed, 227 insertions(+), 57 deletions(-) create mode 100644 ui/src/components/ComponentTopBar.css create mode 100644 ui/src/components/ComponentTopBar.scss diff --git a/ui/src/components/ComponentTopBar.css b/ui/src/components/ComponentTopBar.css new file mode 100644 index 0000000..efe45f1 --- /dev/null +++ b/ui/src/components/ComponentTopBar.css @@ -0,0 +1,77 @@ +/** + * Foundation for Sites by ZURB + * Version 6.5.3 + * foundation.zurb.com + * Licensed under MIT Open Source + */ +@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600,800"); +@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css"); +.ComponentTopBar .inner { + padding-right: 0; + padding-left: 0; + max-width: 1440px; + margin-left: auto; + margin-right: auto; + display: flex; + flex-flow: row wrap; + padding: 1.23969rem; + align-items: baseline; } + +.ComponentTopBar h4 { + font-size: 14px; + font-weight: 800; + letter-spacing: 2px; + text-transform: uppercase; + font-weight: 600; + color: #4F545A; + margin-right: 39.67px; + margin-bottom: 0; } + +.ComponentTopBar .actions { + padding: 0; + margin: 0; + list-style: none; + position: relative; + display: flex; + flex-wrap: wrap; + width: calc(16.66667% - 1.25rem); + margin-right: 0.625rem; + margin-left: 0.625rem; + margin-left: calc(58.33333% + 0.625rem); } + [data-whatinput='mouse'] .ComponentTopBar .actions li { + outline: 0; } + .ComponentTopBar .actions a, + .ComponentTopBar .actions .button { + line-height: 1; + text-decoration: none; + display: block; + padding: 0.7rem 1rem; } + .ComponentTopBar .actions input, + .ComponentTopBar .actions select, + .ComponentTopBar .actions a, + .ComponentTopBar .actions button { + margin-bottom: 0; } + .ComponentTopBar .actions input { + display: inline-block; } + .ComponentTopBar .actions .ViewInfoButton { + padding-top: 0.625rem; + padding-bottom: 0.625rem; + font-size: 14px; + font-weight: 800; + letter-spacing: 2px; + text-transform: uppercase; + border: 1px solid #292F36; + border-radius: 18px; + padding: 0.625rem 1.125rem; + width: 8.8125rem; } + .ComponentTopBar .actions .OpenWindowButton { + padding-top: 0.25rem; + padding-bottom: 0.25rem; } + +.SampleSelector { + height: 2.25rem; + font-size: 0.875rem; + border: 1px solid #292F36; + font-weight: 600; + color: #292F36; + margin-bottom: 0; } diff --git a/ui/src/components/ComponentTopBar.js b/ui/src/components/ComponentTopBar.js index f0be6f1..0d73d3d 100644 --- a/ui/src/components/ComponentTopBar.js +++ b/ui/src/components/ComponentTopBar.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -// import './ComponentTopBar.css'; +import './ComponentTopBar.css'; const ComponentTopBar = ({ title, selector, actions }) => { return ( diff --git a/ui/src/components/ComponentTopBar.scss b/ui/src/components/ComponentTopBar.scss new file mode 100644 index 0000000..426aec7 --- /dev/null +++ b/ui/src/components/ComponentTopBar.scss @@ -0,0 +1,61 @@ +@import "../../theme/base"; + +// .ComponentTopBar .inner { +// display: grid; +// grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; +// padding: 24px; +// } +// +// .ComponentTopBar { +// h4 { +// @include font-bold; +// font-weight: 600; +// color: $ash; +// grid-column: 1/3; +// } +// } + +.ComponentTopBar .inner { + @include xy-grid-container(); + @include xy-grid(); + padding: rem-calc(39.67px / 2); + align-items: baseline; +} + +.ComponentTopBar { + h4 { + @include font-bold; + font-weight: 600; + color: $ash; + margin-right: 39.67px; + margin-bottom: 0; + } + + .actions { + @include menu-base; + @include xy-cell(2); + @include xy-cell-offset(7); + .ViewInfoButton { + padding-top: rem-calc(10); + padding-bottom: rem-calc(10); + @include font-bold; + border: 1px solid #292F36; + border-radius: 18px; + padding: rem-calc(10) rem-calc(18); + width: rem-calc(141); + } + .OpenWindowButton { + padding-top: rem-calc((31 - 23)/2); + padding-bottom: rem-calc((31 - 23)/2); + } + } +} + +.SampleSelector { + height: rem-calc(36); + font-size: rem-calc(14); + border: 1px solid $charcoal; + font-weight: 600; + color: $charcoal; + margin-bottom: 0; +} diff --git a/ui/src/containers/App.css b/ui/src/containers/App.css index 48f9844..a478319 100644 --- a/ui/src/containers/App.css +++ b/ui/src/containers/App.css @@ -797,22 +797,63 @@ select { overflow: hidden; position: relative; } .App .app-inner { + width: 200%; height: 100%; display: flex; flex-flow: row nowrap; - padding-right: 0; - padding-left: 0; - max-width: 1440px; - margin-left: auto; - margin-right: auto; - width: 100%; } + transform: translate(0, 0); + transition: transform .5s ease; } .App .main-frame { - flex: 0 0 auto; - min-height: 0px; - min-width: 0px; - width: 100%; } + width: 50%; + display: flex; + flex-flow: column nowrap; } + .App .main-frame .MannequinTopBar { + flex: 0 0 auto; + height: auto; } + .App .main-frame main { + flex: 1 1 0px; + height: auto; + overflow-y: auto; } + .App .main-frame main.no-scroll { + overflow-y: hidden; } + .App .NavDrawer { + width: 50%; + position: relative; + z-index: 5; + visibility: hidden; + transition: visibility 0s linear .5s; } + .App.drawer-open .app-inner { + transform: translate(-50%, 0); + transition: transform .5s ease; } .App.drawer-open .NavDrawer { - width: 28.33333%; } - .App.drawer-open .main-frame { - width: 71.66667%; - transition: width .3s ease; } + visibility: visible; + transition: none; } + @media print, screen and (min-width: 64em) { + .App .app-inner { + width: 100%; } + .App .main-frame { + flex: 0 0 auto; + min-height: 0px; + min-width: 0px; + width: 100%; } + .App .NavDrawer { + width: 100%; + min-width: 28.33333%; + transform: translate(0, 0); + transition: transform .5s ease, visibility 0s linear .5s; } + .App.drawer-open .app-inner { + transform: translate(0, 0); } + .App.drawer-open .NavDrawer { + transform: translate(-100%, 0); + transition: transform .5s ease; } } + @media screen and (min-width: 90em) { + .App .main-frame { + flex: 1 1 0px; + width: auto; } + .App .NavDrawer { + visibility: visible; + transition: none; } + .App .drawer-toggle { + display: none; } + .App.drawer-open .NavDrawer { + transform: translate(0, 0); } } diff --git a/ui/src/containers/App.scss b/ui/src/containers/App.scss index 9c26dc4..e22077b 100644 --- a/ui/src/containers/App.scss +++ b/ui/src/containers/App.scss @@ -12,93 +12,84 @@ position: relative; .app-inner { - // width: 200%; + width: 200%; height: 100%; - // @include xy-grid($wrap: false); - // transform: translate(0, 0); - // transition: transform .5s ease; @include xy-grid($wrap: false); - @include xy-grid-container; - width: 100%; + transform: translate(0, 0); + transition: transform .5s ease; } .main-frame { - // @include xy-cell(.5, $gutter-output: false, $gutter-type: none); - // @include xy-grid($direction: vertical, $wrap: false); - @include xy-cell(full, $gutter-output: false, $gutter-type: none); + @include xy-cell(.5, $gutter-output: false, $gutter-type: none); + @include xy-grid($direction: vertical, $wrap: false); .MannequinTopBar { - // @include xy-cell(shrink, $vertical: true, $gutter-output: false, $gutter-type: none); + @include xy-cell(shrink, $vertical: true, $gutter-output: false, $gutter-type: none); } main { - // @include xy-cell(auto, $vertical: true, $gutter-output: false, $gutter-type: none); - // overflow-y:auto; + @include xy-cell(auto, $vertical: true, $gutter-output: false, $gutter-type: none); + overflow-y:auto; &.no-scroll { - // overflow-y:hidden; + overflow-y:hidden; } } } .NavDrawer { - // @include xy-cell(.5, $gutter-output: false, $gutter-type: none); - // position: relative; - // z-index: 5; - // visibility: hidden; - // transition: visibility 0s linear .5s; + @include xy-cell(.5, $gutter-output: false, $gutter-type: none); + position: relative; + z-index: 5; + visibility: hidden; + transition: visibility 0s linear .5s; } &.drawer-open { .app-inner { - // transform: translate(-50%, 0); - // transition: transform .5s ease; + transform: translate(-50%, 0); + transition: transform .5s ease; } .NavDrawer { - // visibility: visible; - // transition: none; - @include xy-cell(3.4, $gutter-output: false, $gutter-type: none); - } - .main-frame { - @include xy-cell(8.6, $gutter-output: false, $gutter-type: none); - transition: width .3s ease; + visibility: visible; + transition: none; } } @include breakpoint(large) { .app-inner { - // width: 100%; + width: 100%; } .main-frame { - // @include xy-cell(full, $gutter-output: false, $gutter-type: none); + @include xy-cell(full, $gutter-output: false, $gutter-type: none); } .NavDrawer { - // @include xy-cell(12, $gutter-output: false, $gutter-type: none); - // // min-width: 25%; - // min-width: xy-cell-size(3.4 of 12); - // transform: translate(0, 0); - // transition: transform .5s ease, visibility 0s linear .5s; + @include xy-cell(12, $gutter-output: false, $gutter-type: none); + // min-width: 25%; + min-width: xy-cell-size(3.4 of 12); + transform: translate(0, 0); + transition: transform .5s ease, visibility 0s linear .5s; } &.drawer-open { .app-inner { - // transform: translate(0, 0); + transform: translate(0, 0); } .NavDrawer { - // transform: translate(-100%, 0); - // transition: transform .5s ease; + transform: translate(-100%, 0); + transition: transform .5s ease; } } } @include breakpoint(xxlarge) { .main-frame { - // @include xy-cell(auto, $gutter-output: false, $gutter-type: none); + @include xy-cell(auto, $gutter-output: false, $gutter-type: none); } .NavDrawer { - // visibility: visible; - // transition: none; + visibility: visible; + transition: none; } .drawer-toggle { - // display: none; + display: none; } &.drawer-open { .NavDrawer { - // transform: translate(0, 0); + transform: translate(0, 0); } } } From 87ad2fadd626c5fa83fb1297fbbf8b48c3769e49 Mon Sep 17 00:00:00 2001 From: Chelsie Johnston Date: Mon, 29 Apr 2019 13:43:07 -0500 Subject: [PATCH 08/29] Re-theme the Component Top Bar buttons, etc. --- theme/_variables.scss | 1 + .../components/Buttons/OpenWindowButton.css | 11 ++ ui/src/components/Buttons/OpenWindowButton.js | 1 + .../components/Buttons/OpenWindowButton.scss | 6 + ui/src/components/Buttons/ViewInfoButton.css | 22 +++ ui/src/components/Buttons/ViewInfoButton.js | 2 +- ui/src/components/Buttons/ViewInfoButton.scss | 16 +++ ui/src/components/ComponentTopBar.css | 126 +++++++++--------- ui/src/components/ComponentTopBar.scss | 66 ++++----- ui/src/components/Icons/OpenNew.js | 12 +- ui/src/containers/App.css | 2 +- 11 files changed, 148 insertions(+), 117 deletions(-) create mode 100644 ui/src/components/Buttons/OpenWindowButton.css create mode 100644 ui/src/components/Buttons/OpenWindowButton.scss create mode 100644 ui/src/components/Buttons/ViewInfoButton.css create mode 100644 ui/src/components/Buttons/ViewInfoButton.scss diff --git a/theme/_variables.scss b/theme/_variables.scss index b6c53d9..3aa7778 100644 --- a/theme/_variables.scss +++ b/theme/_variables.scss @@ -12,6 +12,7 @@ // $green: #8AC74B; // $minty: #39FFE2; +$black: #000; $charcoal: #292F36; $ash: #4F545A; $mint: #4ECDC4; diff --git a/ui/src/components/Buttons/OpenWindowButton.css b/ui/src/components/Buttons/OpenWindowButton.css new file mode 100644 index 0000000..71668f3 --- /dev/null +++ b/ui/src/components/Buttons/OpenWindowButton.css @@ -0,0 +1,11 @@ +/** + * Foundation for Sites by ZURB + * Version 6.5.3 + * foundation.zurb.com + * Licensed under MIT Open Source + */ +@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600,800"); +@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css"); +.OpenWindowButton i { + color: #000; + font-size: 14px; } diff --git a/ui/src/components/Buttons/OpenWindowButton.js b/ui/src/components/Buttons/OpenWindowButton.js index 6cf5f8e..0b4ac1a 100644 --- a/ui/src/components/Buttons/OpenWindowButton.js +++ b/ui/src/components/Buttons/OpenWindowButton.js @@ -1,5 +1,6 @@ import React from 'react'; import { OpenNew } from '../Icons'; +import './OpenWindowButton.css'; export default ({ href }) => ( diff --git a/ui/src/components/Buttons/OpenWindowButton.scss b/ui/src/components/Buttons/OpenWindowButton.scss new file mode 100644 index 0000000..06817a8 --- /dev/null +++ b/ui/src/components/Buttons/OpenWindowButton.scss @@ -0,0 +1,6 @@ +@import "../../theme/base"; + +.OpenWindowButton i { + color: $black; + font-size: 14px; +} diff --git a/ui/src/components/Buttons/ViewInfoButton.css b/ui/src/components/Buttons/ViewInfoButton.css new file mode 100644 index 0000000..0569db2 --- /dev/null +++ b/ui/src/components/Buttons/ViewInfoButton.css @@ -0,0 +1,22 @@ +/** + * Foundation for Sites by ZURB + * Version 6.5.3 + * foundation.zurb.com + * Licensed under MIT Open Source + */ +@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600,800"); +@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css"); +.ViewInfoButton { + font-size: 14px; + font-weight: 800; + letter-spacing: 2px; + text-transform: uppercase; + width: 141px; + height: 36px; + border: dashed 1px #292F36; + border-radius: 18px; } + .ViewInfoButton:hover { + cursor: pointer; } + .ViewInfoButton:hover, .ViewInfoButton:focus { + background: #292F36; + color: #fffffe; } diff --git a/ui/src/components/Buttons/ViewInfoButton.js b/ui/src/components/Buttons/ViewInfoButton.js index f736ecb..d3c381f 100644 --- a/ui/src/components/Buttons/ViewInfoButton.js +++ b/ui/src/components/Buttons/ViewInfoButton.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -// import './ViewInfoButton.css'; +import './ViewInfoButton.css'; const ViewInfoButton = props => ( )} {component && ( - Raw - + )} diff --git a/ui/src/components/ComponentInfo.scss b/ui/src/components/ComponentInfo.scss index 965a15a..29e00ea 100644 --- a/ui/src/components/ComponentInfo.scss +++ b/ui/src/components/ComponentInfo.scss @@ -39,11 +39,9 @@ } } .code { - position: relative; .button-group { - position: absolute; - bottom: 1rem; - right: 1rem; + margin-top: 25px; + text-align: right; } .button { margin-bottom: 0; @@ -55,9 +53,14 @@ } .CodeButton { - @include button-base(); - @include button-style($secondary-color, auto, auto); + @extend %border-button; + background: $charcoal; + color: $white; + border-color: $white; + margin-left: rem-calc(20); &.active { - @include button-style($primary-color, auto, auto); + background: $mint; + color: $charcoal; + border: 0; } } From 53b88a9b427584b610361c6bdc6926de535154cf Mon Sep 17 00:00:00 2001 From: Chelsie Johnston Date: Tue, 30 Apr 2019 11:55:40 -0500 Subject: [PATCH 11/29] Re-theme layout wrapper/scaffolding. --- ui/src/components/Buttons/CloseButton.js | 5 +++- ui/src/components/ComponentInfo.css | 25 +++++++++++++++++--- ui/src/components/ComponentInfo.scss | 17 ++++++++++++-- ui/src/containers/App.css | 4 ++-- ui/src/containers/App.scss | 6 ++--- ui/src/containers/SamplePage.css | 29 ++++++++++++++++++++++++ ui/src/containers/SamplePage.js | 2 +- ui/src/containers/SamplePage.scss | 23 +++++++++++++++++++ 8 files changed, 99 insertions(+), 12 deletions(-) create mode 100644 ui/src/containers/SamplePage.css create mode 100644 ui/src/containers/SamplePage.scss diff --git a/ui/src/components/Buttons/CloseButton.js b/ui/src/components/Buttons/CloseButton.js index d593c72..8fe3fd1 100644 --- a/ui/src/components/Buttons/CloseButton.js +++ b/ui/src/components/Buttons/CloseButton.js @@ -5,8 +5,11 @@ import cx from 'classnames'; // import './CloseButton.css'; const CloseButton = ({ className, ...rest }) => ( + // ); diff --git a/ui/src/components/ComponentInfo.css b/ui/src/components/ComponentInfo.css index 1418637..879a946 100644 --- a/ui/src/components/ComponentInfo.css +++ b/ui/src/components/ComponentInfo.css @@ -6,6 +6,17 @@ */ @import url("https://fonts.googleapis.com/css?family=Montserrat:400,600,800"); @import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css"); +.ComponentInfo .controls .CloseButton { + font-size: 14px; + font-weight: 800; + letter-spacing: 2px; + text-transform: uppercase; + line-height: 0.75rem; + color: #fffffe; + cursor: pointer; } + .ComponentInfo .controls .CloseButton > i, .ComponentInfo .controls .CloseButton > svg.Icon { + margin-left: 1.0625rem; } + .CodeButton { font-size: 14px; font-weight: 800; @@ -28,7 +39,8 @@ margin-right: auto; display: flex; flex-flow: row wrap; - position: relative; } + position: relative; + padding: 1.375rem; } .ComponentInfo .inner > .info, .ComponentInfo .inner > .code { flex: 0 0 auto; min-height: 0px; @@ -46,8 +58,8 @@ margin-bottom: 0.9375rem; } } .ComponentInfo .inner .controls { position: absolute; - top: 16px; - right: 16px; + top: 0; + right: 1.5625rem; z-index: 2; } .ComponentInfo .info { font-size: 1rem; @@ -79,3 +91,10 @@ background: #4ECDC4; color: #292F36; border: 0; } + +.ComponentInfo .controls .CloseButton { + text-align: right; + height: 3.75rem; + width: 10.9375rem; } + .ComponentInfo .controls .CloseButton > i { + vertical-align: middle; } diff --git a/ui/src/components/ComponentInfo.scss b/ui/src/components/ComponentInfo.scss index 29e00ea..ca5bf5a 100644 --- a/ui/src/components/ComponentInfo.scss +++ b/ui/src/components/ComponentInfo.scss @@ -8,6 +8,7 @@ @include xy-grid-container(); @include xy-grid(); position: relative; + padding: rem-calc(22); > .info, > .code { @include xy-cell(full); @@ -17,8 +18,8 @@ } .controls { position: absolute; - top: 16px; - right: 16px; + top: 0; + right: rem-calc(25); z-index: 2; } } @@ -64,3 +65,15 @@ border: 0; } } + +.ComponentInfo .controls { + .CloseButton { + @extend %toggle-button; + text-align: right; + height: rem-calc(60); + width: rem-calc(175); + > i { + vertical-align: middle; + } + } +} diff --git a/ui/src/containers/App.css b/ui/src/containers/App.css index dee977a..5e8fa2a 100644 --- a/ui/src/containers/App.css +++ b/ui/src/containers/App.css @@ -837,8 +837,8 @@ select { min-width: 0px; width: 100%; } .App .NavDrawer { - width: 100%; - min-width: 28.33333%; + width: 25%; + min-width: 25%; transform: translate(0, 0); transition: transform .5s ease, visibility 0s linear .5s; } .App.drawer-open .app-inner { diff --git a/ui/src/containers/App.scss b/ui/src/containers/App.scss index e22077b..60438ec 100644 --- a/ui/src/containers/App.scss +++ b/ui/src/containers/App.scss @@ -1,3 +1,4 @@ + @import "../../theme/_base"; @include foundation-global-styles; @@ -60,9 +61,8 @@ @include xy-cell(full, $gutter-output: false, $gutter-type: none); } .NavDrawer { - @include xy-cell(12, $gutter-output: false, $gutter-type: none); - // min-width: 25%; - min-width: xy-cell-size(3.4 of 12); + @include xy-cell(3/12, $gutter-output: false, $gutter-type: none); + min-width: 25%; transform: translate(0, 0); transition: transform .5s ease, visibility 0s linear .5s; } diff --git a/ui/src/containers/SamplePage.css b/ui/src/containers/SamplePage.css new file mode 100644 index 0000000..36e0b46 --- /dev/null +++ b/ui/src/containers/SamplePage.css @@ -0,0 +1,29 @@ +/** + * Foundation for Sites by ZURB + * Version 6.5.3 + * foundation.zurb.com + * Licensed under MIT Open Source + */ +@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600,800"); +@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css"); +.SampleFoundPage { + display: flex; + flex-flow: column nowrap; + position: relative; + overflow: hidden !important; } + .SampleFoundPage .ComponentTopBar { + flex: 0 0 auto; + height: auto; } + .SampleFoundPage .RenderFrame { + flex: 1 1 0px; + height: auto; } + .SampleFoundPage .Content { + flex: 0 0 auto; + height: auto; + margin-right: 0.625rem; + margin-left: 0.625rem; } + .SampleFoundPage .ComponentInfo { + position: absolute; + bottom: 0; + width: 100%; + max-height: 75%; } diff --git a/ui/src/containers/SamplePage.js b/ui/src/containers/SamplePage.js index 6258095..4e41b49 100644 --- a/ui/src/containers/SamplePage.js +++ b/ui/src/containers/SamplePage.js @@ -16,7 +16,7 @@ import { SlideInFromBottom } from '../components/Transitions'; import { toggleInfo, componentView } from '../actions'; import { getComponent, getSample, getUsed } from '../selectors'; import PropTypes from 'prop-types'; -// import './SamplePage.css'; +import './SamplePage.css'; const SamplePage = ({ component, sample, ...rest }) => { if (!component) { diff --git a/ui/src/containers/SamplePage.scss b/ui/src/containers/SamplePage.scss new file mode 100644 index 0000000..bcf74c5 --- /dev/null +++ b/ui/src/containers/SamplePage.scss @@ -0,0 +1,23 @@ +@import "../../theme/base"; + +.SampleFoundPage { + @include xy-grid($direction: vertical, $wrap: false); + position: relative; + overflow: hidden !important; + + .ComponentTopBar { + @include xy-cell(shrink, $vertical: true, $gutter-output: false); + } + .RenderFrame { + @include xy-cell(auto, $vertical: true, $gutter-output: false); + } + .Content { + @include xy-cell(shrink, $vertical: true, $gutter-output: true); + } + .ComponentInfo { + position:absolute; + bottom: 0; + width: 100%; + max-height: 75%; + } +} From d1dbe3635777aa2b4b58213585c81d2dd0615fc4 Mon Sep 17 00:00:00 2001 From: Chelsie Johnston Date: Tue, 30 Apr 2019 12:20:24 -0500 Subject: [PATCH 12/29] Fix NavDrawer menu padding; Re-add Branding styling and adjust some layout stuff. --- ui/src/components/Branding.css | 26 ++++++++++ ui/src/components/Branding.js | 2 +- ui/src/components/Branding.scss | 81 ++++++++++++++++++++++++++++++++ ui/src/components/Card.css | 2 +- ui/src/components/Card.scss | 2 +- ui/src/components/Menu.css | 2 +- ui/src/components/Menu.scss | 2 +- ui/src/components/NavDrawer.css | 8 ++-- ui/src/components/NavDrawer.scss | 5 +- ui/src/containers/HomePage.css | 21 +++++++++ ui/src/containers/HomePage.js | 2 +- ui/src/containers/HomePage.scss | 21 +++++++++ 12 files changed, 162 insertions(+), 12 deletions(-) create mode 100644 ui/src/components/Branding.css create mode 100644 ui/src/components/Branding.scss create mode 100644 ui/src/containers/HomePage.css create mode 100644 ui/src/containers/HomePage.scss diff --git a/ui/src/components/Branding.css b/ui/src/components/Branding.css new file mode 100644 index 0000000..3dd546f --- /dev/null +++ b/ui/src/components/Branding.css @@ -0,0 +1,26 @@ +/** + * Foundation for Sites by ZURB + * Version 6.5.3 + * foundation.zurb.com + * Licensed under MIT Open Source + */ +@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600,800"); +@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css"); +.Branding { + margin-left: 0.625rem; + margin-right: 0.625rem; + display: grid; + grid-template-columns: 33.33333% 66.66667%; + width: 720px; + margin: 0 auto; } + @media print, screen and (min-width: 40em) { + .Branding { + margin-left: 0.9375rem; + margin-right: 0.9375rem; } } + +.Branding img { + grid-column: 1 / 1; + width: 105px; } + +.Branding__Text { + grid-column: 2 / 2; } diff --git a/ui/src/components/Branding.js b/ui/src/components/Branding.js index 8346537..ac879b0 100644 --- a/ui/src/components/Branding.js +++ b/ui/src/components/Branding.js @@ -1,7 +1,7 @@ import React from 'react'; import logo from '../svg/manny_wave.svg'; -// import './Branding.css'; +import './Branding.css'; /** * Homepage branding block. diff --git a/ui/src/components/Branding.scss b/ui/src/components/Branding.scss new file mode 100644 index 0000000..736c7bb --- /dev/null +++ b/ui/src/components/Branding.scss @@ -0,0 +1,81 @@ +@import "../../theme/_base"; + +// @mixin branding-layout($logo_h, $logo_w, $h1_font-size, $h1_line_height, $divider_margin) { +// .logo { +// height: rem-calc($logo_h); +// width: rem-calc($logo_w); +// margin-top: rem-calc(($h1_line_height - $logo_h) / 2); +// margin-bottom: rem-calc(($h1_line_height - $logo_h) / 2); +// } +// h1 { +// font-size: rem-calc($h1_font-size); +// line-height: rem-calc($h1_line_height); +// } +// .logo + h1:before { +// height: rem-calc($logo_h); +// margin: 0 rem-calc($divider_margin); +// } +// } + +// .Branding { + // @include xy-grid-container(); + // + // h1 { + // font-family: $impact-font-family; + // font-weight: 700; + // margin-bottom: 0; + // text-transform: uppercase; + // } + // .logo + h1:before { + // content: ""; + // border-left: 1px dashed $dashed-border-color; + // width: 1px; + // display:inline-block; + // vertical-align: middle; + // } + // @include branding-layout(39, 40, 30, 35, 15); + // @include breakpoint(large) { + // @include branding-layout(61, 63, 73, 84, 40); + // } + // span { + // margin-top: rem-calc(12); + // display:block; + // font-size: rem-calc(12); + // color: inherit; + // font-weight: 300; + // letter-spacing: 5px; + // text-align:center; + // text-transform: uppercase; + // span { + // background-color: #1B2126; + // } + // margin: rem-calc(30) rem-calc(44) 0; + // @include breakpoint(large) { + // margin-top: rem-calc(10); + // } + // } + // .top { + // display: flex; + // justify-content: center; + // .logo, h1 { + // flex: 0 0 auto; + // } + // } +// } + +.Branding { + @include xy-gutters($gutter-position: left right); + display: grid; + grid-template-columns: xy-cell-size(2 of 6) xy-cell-size(4 of 6); + width: $grid-container / 2; + margin: 0 auto; +} + +.Branding img { + grid-column: 1 / 1; + width: 105px; +} + +.Branding__Text { + grid-column: 2 / 2; +} diff --git a/ui/src/components/Card.css b/ui/src/components/Card.css index d913069..83bf8f6 100644 --- a/ui/src/components/Card.css +++ b/ui/src/components/Card.css @@ -7,7 +7,7 @@ @import url("https://fonts.googleapis.com/css?family=Montserrat:400,600,800"); @import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css"); .Card { - border: 1px dashed green; + border: 1px dashed; padding: 20px; } .Card:hover { border-color: transparent; diff --git a/ui/src/components/Card.scss b/ui/src/components/Card.scss index 547adc4..08fe628 100644 --- a/ui/src/components/Card.scss +++ b/ui/src/components/Card.scss @@ -1,7 +1,7 @@ @import "../../theme/_base"; .Card { - border: 1px dashed green; + border: 1px dashed; padding: 20px; &:hover { diff --git a/ui/src/components/Menu.css b/ui/src/components/Menu.css index 6657b16..9a1b09f 100644 --- a/ui/src/components/Menu.css +++ b/ui/src/components/Menu.css @@ -37,7 +37,7 @@ font-size: 0.875rem; line-height: 1.0625rem; letter-spacing: 2px; - padding: 0.625rem 1.5rem 0.625rem 0.75rem; + padding: 0.625rem 1.5rem 0.625rem 1.25rem; text-transform: uppercase; color: #fffffe; } .MenuItem a:focus { diff --git a/ui/src/components/Menu.scss b/ui/src/components/Menu.scss index c47ebb0..b3280d5 100644 --- a/ui/src/components/Menu.scss +++ b/ui/src/components/Menu.scss @@ -12,7 +12,7 @@ font-size: rem-calc(14); line-height: rem-calc(17); letter-spacing: 2px; - padding: rem-calc(10) rem-calc(24) rem-calc(10) rem-calc(12); + padding: rem-calc(10) rem-calc(24) rem-calc(10) rem-calc(20); text-transform: uppercase; color: $white; &:focus { diff --git a/ui/src/components/NavDrawer.css b/ui/src/components/NavDrawer.css index 3463ff7..daef9bc 100644 --- a/ui/src/components/NavDrawer.css +++ b/ui/src/components/NavDrawer.css @@ -21,8 +21,7 @@ background-color: #4F545A; box-shadow: 0 2px 5px 0 #4F545A; display: flex; - flex-flow: column wrap; - padding: 0 calc(39.67px / 2); } + flex-flow: column wrap; } .NavDrawer .drawer-toggle.closer { text-align: right; height: 3.75rem; @@ -34,7 +33,8 @@ height: auto; margin-right: 0.625rem; margin-left: 0.625rem; - margin-top: 0.625rem; } + margin-top: 0.625rem; + margin-left: 1.25rem; } @media screen and (min-width: 90em) { .NavDrawer > .SearchForm { flex: 0 0 auto; @@ -57,7 +57,7 @@ text-transform: uppercase; color: #fffffe; padding-right: 0.625rem; - padding-left: 0.625rem; + padding-left: 1.25rem; padding-top: 1.125rem; padding-bottom: 0.625rem; height: 3.75rem; } diff --git a/ui/src/components/NavDrawer.scss b/ui/src/components/NavDrawer.scss index efd1b5a..cacb4eb 100644 --- a/ui/src/components/NavDrawer.scss +++ b/ui/src/components/NavDrawer.scss @@ -4,7 +4,7 @@ background-color: $ash; box-shadow: 0 2px 5px 0 $ash; @include xy-grid(vertical); - padding: 0 calc(39.67px / 2); + // padding: 0 calc(39.67px / 2); .drawer-toggle.closer { // @include xy-cell(shrink, $gutter-position: right left top bottom, $gutter-type: padding); @extend %toggle-button; @@ -17,6 +17,7 @@ } > .SearchForm { @include xy-cell(shrink, $gutter-position: right left top, $vertical: true); + margin-left: rem-calc(20); @include breakpoint(xxlarge) { @include xy-cell(shrink, $gutter-position: right left top, $vertical: true); } @@ -39,7 +40,7 @@ @include font-bold; color: $white; padding-right: 0.625rem; - padding-left: 0.625rem; + padding-left: rem-calc(20); padding-top: 1.125rem; padding-bottom: 0.625rem; height: 3.75rem; diff --git a/ui/src/containers/HomePage.css b/ui/src/containers/HomePage.css new file mode 100644 index 0000000..d22dd0a --- /dev/null +++ b/ui/src/containers/HomePage.css @@ -0,0 +1,21 @@ +/** + * Foundation for Sites by ZURB + * Version 6.5.3 + * foundation.zurb.com + * Licensed under MIT Open Source + */ +@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600,800"); +@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css"); +.MannequinHome { + background: #292F36; + color: #fffffe; } + .MannequinHome .Branding { + margin-top: 8%; + margin-bottom: 10%; } + .MannequinHome .quicklinks h4 { + text-transform: uppercase; + text-align: center; + margin-bottom: 1.8125rem; + font-family: "Montserrat", sans-serif, sans-serif; + font-weight: bold; + font-size: 0.5625rem; } diff --git a/ui/src/containers/HomePage.js b/ui/src/containers/HomePage.js index 3d43721..3dc0c50 100644 --- a/ui/src/containers/HomePage.js +++ b/ui/src/containers/HomePage.js @@ -1,5 +1,5 @@ import React from 'react'; -// import './HomePage.css'; +import './HomePage.css'; import { connect } from 'react-redux'; import Branding from '../components/Branding'; import { getQuicklinks } from '../selectors'; diff --git a/ui/src/containers/HomePage.scss b/ui/src/containers/HomePage.scss new file mode 100644 index 0000000..f6176f4 --- /dev/null +++ b/ui/src/containers/HomePage.scss @@ -0,0 +1,21 @@ +@import "../../theme/_base"; + +.MannequinHome { + background: $charcoal; + color: $white; + + .Branding { + margin-top: 8%; + margin-bottom: 10%; + } + .quicklinks { + h4 { + text-transform: uppercase; + text-align: center; + margin-bottom: rem-calc(29); + font-family: $impact-font-family; + font-weight: bold; + font-size: rem-calc(9); + } + } +} From 86fe71ef82426df4cb072ceb71b769997632d16e Mon Sep 17 00:00:00 2001 From: Chelsie Johnston Date: Tue, 30 Apr 2019 12:26:01 -0500 Subject: [PATCH 13/29] Correct the Search Form spacing. --- ui/src/components/NavDrawer.css | 5 +++-- ui/src/components/NavDrawer.scss | 5 ++++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/ui/src/components/NavDrawer.css b/ui/src/components/NavDrawer.css index daef9bc..111420e 100644 --- a/ui/src/components/NavDrawer.css +++ b/ui/src/components/NavDrawer.css @@ -25,7 +25,7 @@ .NavDrawer .drawer-toggle.closer { text-align: right; height: 3.75rem; - width: 10.9375rem; } + margin-right: 1.25rem; } .NavDrawer .drawer-toggle.closer > i { vertical-align: middle; } .NavDrawer > .SearchForm { @@ -34,7 +34,8 @@ margin-right: 0.625rem; margin-left: 0.625rem; margin-top: 0.625rem; - margin-left: 1.25rem; } + margin-left: 1.25rem; + margin-right: 2.6875rem; } @media screen and (min-width: 90em) { .NavDrawer > .SearchForm { flex: 0 0 auto; diff --git a/ui/src/components/NavDrawer.scss b/ui/src/components/NavDrawer.scss index cacb4eb..32852cf 100644 --- a/ui/src/components/NavDrawer.scss +++ b/ui/src/components/NavDrawer.scss @@ -10,7 +10,7 @@ @extend %toggle-button; text-align: right; height: rem-calc(60); - width: rem-calc(175); + margin-right: rem-calc(20); > i { vertical-align: middle; } @@ -18,6 +18,7 @@ > .SearchForm { @include xy-cell(shrink, $gutter-position: right left top, $vertical: true); margin-left: rem-calc(20); + margin-right: rem-calc(43); @include breakpoint(xxlarge) { @include xy-cell(shrink, $gutter-position: right left top, $vertical: true); } @@ -53,6 +54,7 @@ .SearchForm { position: relative; + input { border: none; background-color: #21262B; @@ -79,3 +81,4 @@ color: $white; } } +; From a8970e6c72f6b59d15c7b0cccd45faa0a323f1c0 Mon Sep 17 00:00:00 2001 From: Chelsie Johnston Date: Wed, 1 May 2019 14:40:24 -0500 Subject: [PATCH 14/29] Recolor the Component Top Bar and change border thickness on View Info button (UX review). --- ui/src/components/Buttons/ViewInfoButton.css | 16 ++++++++-------- ui/src/components/Buttons/ViewInfoButton.scss | 2 +- ui/src/components/ComponentTopBar.css | 13 ++++++------- ui/src/components/ComponentTopBar.scss | 12 +++++------- 4 files changed, 20 insertions(+), 23 deletions(-) diff --git a/ui/src/components/Buttons/ViewInfoButton.css b/ui/src/components/Buttons/ViewInfoButton.css index e73ddbb..dee054c 100644 --- a/ui/src/components/Buttons/ViewInfoButton.css +++ b/ui/src/components/Buttons/ViewInfoButton.css @@ -11,17 +11,17 @@ font-weight: 800; letter-spacing: 2px; text-transform: uppercase; - padding: 11px 25px; - border: dashed 1px #292F36; - border-radius: 18px; } - .ViewInfoButton:hover { - cursor: pointer; } - -.ViewInfoButton { font-size: 14px; font-weight: 800; letter-spacing: 2px; - text-transform: uppercase; } + text-transform: uppercase; + padding: 0.75rem 1.5625rem; + border: dashed 2px #292F36; + border-radius: 18px; + font-size: 0.75rem; + letter-spacing: 0.10625rem; } + .ViewInfoButton:hover { + cursor: pointer; } .ViewInfoButton:hover, .ViewInfoButton:focus { background: #292F36; color: #fffffe; } diff --git a/ui/src/components/Buttons/ViewInfoButton.scss b/ui/src/components/Buttons/ViewInfoButton.scss index 501203d..393d8de 100644 --- a/ui/src/components/Buttons/ViewInfoButton.scss +++ b/ui/src/components/Buttons/ViewInfoButton.scss @@ -2,7 +2,7 @@ .ViewInfoButton { @include font-bold; - @extend %border-button; + @include border-button; &:hover, &:focus { background: $charcoal; diff --git a/ui/src/components/ComponentTopBar.css b/ui/src/components/ComponentTopBar.css index ff289d2..e9aa947 100644 --- a/ui/src/components/ComponentTopBar.css +++ b/ui/src/components/ComponentTopBar.css @@ -7,7 +7,9 @@ @import url("https://fonts.googleapis.com/css?family=Montserrat:400,600,800"); @import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css"); .ComponentTopBar { - padding: 1.23969rem; } + padding: 1.23969rem; + background: #EBECEC; + margin-bottom: 1em; } .ComponentTopBar .inner { padding-right: 0; padding-left: 0; @@ -16,7 +18,7 @@ margin-right: auto; display: flex; flex-flow: row wrap; - align-items: baseline; } + align-items: center; } .ComponentTopBar .inner .name, .ComponentTopBar .inner .actions { flex: 0 0 auto; width: auto; @@ -67,9 +69,6 @@ margin-bottom: 0; } .ComponentTopBar .actions input { display: inline-block; } - .ComponentTopBar .actions .ViewInfoButton { - padding-top: 0.625rem; - padding-bottom: 0.625rem; } .ComponentTopBar .actions .OpenWindowButton { - padding-top: 0.25rem; - padding-bottom: 0.25rem; } + padding-top: 0.625rem; + padding-right: 1.4375rem; } diff --git a/ui/src/components/ComponentTopBar.scss b/ui/src/components/ComponentTopBar.scss index d1a6244..586227e 100644 --- a/ui/src/components/ComponentTopBar.scss +++ b/ui/src/components/ComponentTopBar.scss @@ -2,11 +2,13 @@ .ComponentTopBar { padding: rem-calc(39.67px / 2); + background: $eggshell; + margin-bottom: 1em; .inner { @include xy-grid-container(); @include xy-grid(); - align-items: baseline; + align-items: center; .name, .actions { @include xy-cell(shrink); @@ -35,13 +37,9 @@ } .actions { @include menu-base; - .ViewInfoButton { - padding-top: rem-calc(10); - padding-bottom: rem-calc(10); - } .OpenWindowButton { - padding-top: rem-calc((31 - 23)/2); - padding-bottom: rem-calc((31 - 23)/2); + padding-top: rem-calc(10); + padding-right: rem-calc(23); } } } From 4f63609b71db0f85ef16a83d5d4c4e7d1f90535d Mon Sep 17 00:00:00 2001 From: Chelsie Johnston Date: Wed, 1 May 2019 15:36:41 -0500 Subject: [PATCH 15/29] Adjust ComponentInfo (UX). --- ui/src/components/ComponentInfo.css | 132 ++++++++++++++++----------- ui/src/components/ComponentInfo.js | 32 ++++--- ui/src/components/ComponentInfo.scss | 107 ++++++++++++++++------ 3 files changed, 177 insertions(+), 94 deletions(-) diff --git a/ui/src/components/ComponentInfo.css b/ui/src/components/ComponentInfo.css index 879a946..36d783b 100644 --- a/ui/src/components/ComponentInfo.css +++ b/ui/src/components/ComponentInfo.css @@ -17,84 +17,108 @@ .ComponentInfo .controls .CloseButton > i, .ComponentInfo .controls .CloseButton > svg.Icon { margin-left: 1.0625rem; } -.CodeButton { - font-size: 14px; - font-weight: 800; - letter-spacing: 2px; - text-transform: uppercase; - padding: 11px 25px; - border: dashed 1px #292F36; - border-radius: 18px; } - .CodeButton:hover { - cursor: pointer; } - .ComponentInfo { overflow-y: auto; } + .ComponentInfo a { + color: #fffffe; + border-bottom: solid 1px #4ECDC4; } + .ComponentInfo a:hover { + color: #4ECDC4; + border-bottom: 0; } .ComponentInfo .inner { background: #292F36; - padding-right: 0; - padding-left: 0; - max-width: 1440px; - margin-left: auto; - margin-right: auto; - display: flex; - flex-flow: row wrap; position: relative; - padding: 1.375rem; } - .ComponentInfo .inner > .info, .ComponentInfo .inner > .code { - flex: 0 0 auto; - min-height: 0px; - min-width: 0px; - width: calc(100% - 1.25rem); - margin-right: 0.625rem; - margin-left: 0.625rem; } - @media print, screen and (min-width: 40em) { - .ComponentInfo .inner > .info, .ComponentInfo .inner > .code { - flex: 1 1 0px; - width: auto; - margin-left: 0.9375rem; - margin-right: 0.9375rem; - margin-top: 0.9375rem; - margin-bottom: 0.9375rem; } } - .ComponentInfo .inner .controls { - position: absolute; - top: 0; - right: 1.5625rem; - z-index: 2; } - .ComponentInfo .info { - font-size: 1rem; - color: #fffffe; } - .ComponentInfo .info a { - color: inherit; } - .ComponentInfo .info h3 { + padding: 0 1.375rem 1.375rem; } + .ComponentInfo .ComponentInfo__section--top { + position: fixed; + width: 100vw; + display: grid; + grid-template-columns: 1fr 1fr; + background: #292F36; + padding: 1.375rem 0; + z-index: 3; } + .ComponentInfo .ComponentInfo__section--top .ComponentInfo__title { + color: #fffffe; font-size: 14px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; } + .ComponentInfo .ComponentInfo__section--top .controls { + text-align: right; } + .ComponentInfo .info { + font-size: 1rem; + color: #fffffe; } .ComponentInfo .info h4 { font-weight: 600; font-size: 1rem; } .ComponentInfo .info p { line-height: 1.875rem; } .ComponentInfo .code .button-group { - margin-top: 25px; - text-align: right; } + background: #EBECEC; + text-align: right; + padding: 0.625rem; } .ComponentInfo .code .button { margin-bottom: 0; } +.ComponentInfo__section--bottom { + padding-top: 4.5rem; + display: flex; + flex-flow: row wrap; + padding-right: 0; + padding-left: 0; + max-width: 1440px; + margin-left: auto; + margin-right: auto; } + .ComponentInfo__section--bottom > .info, .ComponentInfo__section--bottom > .code { + width: 100%; } + @media print, screen and (min-width: 64em) { + .ComponentInfo__section--bottom .info { + width: calc(50% - 1.875rem); + margin-right: 0.9375rem; + width: calc(50% - 0.9375rem); } } + @media print, screen and (min-width: 64em) { + .ComponentInfo__section--bottom .code { + width: calc(50% - 1.875rem); + margin-left: 0.9375rem; + width: calc(50% - 0.9375rem); } + .ComponentInfo__section--bottom .code pre { + max-height: 20rem; } } + .CodeButton { - background: #292F36; - color: #fffffe; - border-color: #fffffe; - margin-left: 1.25rem; } + font-size: 14px; + font-weight: 800; + letter-spacing: 2px; + text-transform: uppercase; + padding: 0.75rem 1.5625rem; + border: dashed 2px #292F36; + border-radius: 18px; + font-size: 0.75rem; + letter-spacing: 0.10625rem; + border: 0; + background: #649490; + color: #1f1f19; + font-size: 0.75rem; + position: relative; + z-index: 1; } + .CodeButton:hover { + cursor: pointer; } + .CodeButton:not(.active):first-child { + padding-right: 36px; + border-radius: 18px 0 0 18px; } + .CodeButton:not(.active):last-child { + padding-left: 36px; + border-radius: 0 18px 18px 0; } .CodeButton.active { background: #4ECDC4; color: #292F36; - border: 0; } + border: 0; + z-index: 2; } + .CodeButton.active:first-child { + margin-right: -22px; } + .CodeButton.active:last-child { + margin-left: -22px; } .ComponentInfo .controls .CloseButton { - text-align: right; - height: 3.75rem; width: 10.9375rem; } .ComponentInfo .controls .CloseButton > i { vertical-align: middle; } diff --git a/ui/src/components/ComponentInfo.js b/ui/src/components/ComponentInfo.js index 72dc89d..48c3f25 100644 --- a/ui/src/components/ComponentInfo.js +++ b/ui/src/components/ComponentInfo.js @@ -9,18 +9,23 @@ const ComponentInfo = ({ component, sample, used, className, controls }) => { return (
-
{controls}
- - +
+
{component.name}
+
{controls}
+
+
+ + +
); @@ -36,14 +41,13 @@ export default ComponentInfo; const ComponentInfoInfo = ({ component, sample, used }) => { return (
-

{component.name}

{component.metadata.description && ( {component.metadata.description} )} {used.length > 0 && ( - + {used.map(p => ( {p.name} diff --git a/ui/src/components/ComponentInfo.scss b/ui/src/components/ComponentInfo.scss index ca5bf5a..48a6cd2 100644 --- a/ui/src/components/ComponentInfo.scss +++ b/ui/src/components/ComponentInfo.scss @@ -3,34 +3,43 @@ .ComponentInfo { overflow-y: auto; + a { + color: $white; + border-bottom: solid 1px $mint; + &:hover { + color: $mint; + border-bottom: 0; + } + } + .inner { background: $charcoal; - @include xy-grid-container(); - @include xy-grid(); position: relative; - padding: rem-calc(22); + padding: 0 rem-calc(22) rem-calc(22); + } - > .info, > .code { - @include xy-cell(full); - @include breakpoint(medium) { - @include xy-cell(auto, $gutter-position: left right top bottom); - } - } - .controls { - position: absolute; - top: 0; - right: rem-calc(25); - z-index: 2; + .ComponentInfo__section--top { + // @include xy-grid(); + position: fixed; + width: 100vw; + display: grid; + grid-template-columns: 1fr 1fr; + background: $charcoal; + padding: rem-calc(22) 0; + z-index: 3; + + .ComponentInfo__title { + color: $white; + @include font-bold; } + .controls { + text-align: right; + } } .info { font-size: rem-calc(16); color: $white; - a {color: inherit;} - h3 { - @include font-bold; - } h4 { font-weight: 600; font-size: rem-calc(16); @@ -39,10 +48,12 @@ line-height: rem-calc(30); } } + .code { .button-group { - margin-top: 25px; + background: $eggshell; text-align: right; + padding: rem-calc(10); } .button { margin-bottom: 0; @@ -53,24 +64,68 @@ } } +.ComponentInfo__section--bottom { + padding-top: rem-calc(72); + @include xy-grid(); + @include xy-grid-container(); + + > .info, > .code { + width: 100%; + } + .info { + @include breakpoint(large) { + @include xy-cell(6/12, $gutter-position: right); + width: calc(50% - 0.9375rem) + } + } + .code { + @include breakpoint(large) { + @include xy-cell(6/12, $gutter-position: left); + width: calc(50% - 0.9375rem); + pre { + max-height: 20rem; + } + } + } +} + .CodeButton { - @extend %border-button; - background: $charcoal; - color: $white; - border-color: $white; - margin-left: rem-calc(20); + @include border-button; + border: 0; + background: #649490; + color: #1f1f19; + font-size: rem-calc(12); + position: relative; + z-index: 1; + &:not(.active) { + &:first-child { + padding-right: 36px; + border-radius: 18px 0 0 18px; + } + &:last-child { + padding-left: 36px; + border-radius: 0 18px 18px 0; + } + } &.active { background: $mint; color: $charcoal; border: 0; + z-index: 2; + &:first-child { + margin-right: -22px; + } + &:last-child { + margin-left: -22px; + } } } .ComponentInfo .controls { .CloseButton { @extend %toggle-button; - text-align: right; - height: rem-calc(60); + // text-align: right; + // height: rem-calc(60); width: rem-calc(175); > i { vertical-align: middle; From 031ed691221f0dcf46f16129d366f797547927f4 Mon Sep 17 00:00:00 2001 From: Chelsie Johnston Date: Mon, 6 May 2019 15:49:06 -0500 Subject: [PATCH 16/29] Replace Landing Page styles. --- theme/_variables.scss | 8 +++++--- ui/src/components/Branding.css | 7 +++++++ ui/src/components/Branding.scss | 9 +++++++++ 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/theme/_variables.scss b/theme/_variables.scss index b8f12f6..d31e3dd 100644 --- a/theme/_variables.scss +++ b/theme/_variables.scss @@ -63,12 +63,14 @@ $code-font-family: $font-family-monospace; } } -%border-button { +@mixin border-button { @include font-bold; // height: rem-calc(36); - padding: 11px 25px; - border: dashed 1px $charcoal; + padding: rem-calc(12) rem-calc(25); + border: dashed 2px $charcoal; border-radius: 18px; + font-size: rem-calc(12); + letter-spacing: rem-calc(1.7); &:hover { cursor: pointer; diff --git a/ui/src/components/Branding.css b/ui/src/components/Branding.css index 3dd546f..7e92d41 100644 --- a/ui/src/components/Branding.css +++ b/ui/src/components/Branding.css @@ -24,3 +24,10 @@ .Branding__Text { grid-column: 2 / 2; } + +@media print, screen and (min-width: 40em) { + .Branding h1 { + text-transform: uppercase; + font-weight: 800; + font-size: 60px; + letter-spacing: 3.5px; } } diff --git a/ui/src/components/Branding.scss b/ui/src/components/Branding.scss index 736c7bb..070acc5 100644 --- a/ui/src/components/Branding.scss +++ b/ui/src/components/Branding.scss @@ -79,3 +79,12 @@ .Branding__Text { grid-column: 2 / 2; } + +.Branding h1 { + @include breakpoint(medium) { + text-transform: uppercase; + font-weight: 800; + font-size: 60px; + letter-spacing: 3.5px; + } +} From cd89ae9aee253659f0ad497d4004cbad766f498b Mon Sep 17 00:00:00 2001 From: Chelsie Johnston Date: Mon, 6 May 2019 16:02:41 -0500 Subject: [PATCH 17/29] Change Nav Drawer to always overlay the layout using a min-width. --- ui/src/components/Branding.css | 1 - ui/src/components/Branding.scss | 2 +- ui/src/containers/App.css | 41 ++++++++------------- ui/src/containers/App.scss | 63 +++++++++++++++++---------------- 4 files changed, 48 insertions(+), 59 deletions(-) diff --git a/ui/src/components/Branding.css b/ui/src/components/Branding.css index 7e92d41..ac54e6d 100644 --- a/ui/src/components/Branding.css +++ b/ui/src/components/Branding.css @@ -11,7 +11,6 @@ margin-right: 0.625rem; display: grid; grid-template-columns: 33.33333% 66.66667%; - width: 720px; margin: 0 auto; } @media print, screen and (min-width: 40em) { .Branding { diff --git a/ui/src/components/Branding.scss b/ui/src/components/Branding.scss index 070acc5..b219936 100644 --- a/ui/src/components/Branding.scss +++ b/ui/src/components/Branding.scss @@ -67,7 +67,7 @@ @include xy-gutters($gutter-position: left right); display: grid; grid-template-columns: xy-cell-size(2 of 6) xy-cell-size(4 of 6); - width: $grid-container / 2; + // width: $grid-container / 2; margin: 0 auto; } diff --git a/ui/src/containers/App.css b/ui/src/containers/App.css index 5e8fa2a..1a676b3 100644 --- a/ui/src/containers/App.css +++ b/ui/src/containers/App.css @@ -797,14 +797,17 @@ select { overflow: hidden; position: relative; } .App .app-inner { - width: 200%; + width: 100%; height: 100%; display: flex; flex-flow: row nowrap; transform: translate(0, 0); transition: transform .5s ease; } .App .main-frame { - width: 50%; + flex: 0 0 auto; + min-height: 0px; + min-width: 0px; + width: 100%; display: flex; flex-flow: column nowrap; } .App .main-frame .MannequinTopBar { @@ -817,35 +820,19 @@ select { .App .main-frame main.no-scroll { overflow-y: hidden; } .App .NavDrawer { - width: 50%; + width: 25%; + min-width: 320px; + transform: translate(0, 0); + transition: transform .5s ease, visibility 0s linear .5s; position: relative; z-index: 5; - visibility: hidden; - transition: visibility 0s linear .5s; } + visibility: hidden; } .App.drawer-open .app-inner { - transform: translate(-50%, 0); - transition: transform .5s ease; } + transform: translate(0, 0); } .App.drawer-open .NavDrawer { - visibility: visible; - transition: none; } - @media print, screen and (min-width: 64em) { - .App .app-inner { - width: 100%; } - .App .main-frame { - flex: 0 0 auto; - min-height: 0px; - min-width: 0px; - width: 100%; } - .App .NavDrawer { - width: 25%; - min-width: 25%; - transform: translate(0, 0); - transition: transform .5s ease, visibility 0s linear .5s; } - .App.drawer-open .app-inner { - transform: translate(0, 0); } - .App.drawer-open .NavDrawer { - transform: translate(-100%, 0); - transition: transform .5s ease; } } + transform: translate(-100%, 0); + transition: transform .5s ease; + visibility: visible; } @media screen and (min-width: 90em) { .App .main-frame { flex: 1 1 0px; diff --git a/ui/src/containers/App.scss b/ui/src/containers/App.scss index 60438ec..bd2f8c4 100644 --- a/ui/src/containers/App.scss +++ b/ui/src/containers/App.scss @@ -13,14 +13,14 @@ position: relative; .app-inner { - width: 200%; + width: 100%; height: 100%; @include xy-grid($wrap: false); transform: translate(0, 0); transition: transform .5s ease; } .main-frame { - @include xy-cell(.5, $gutter-output: false, $gutter-type: none); + @include xy-cell(full, $gutter-output: false, $gutter-type: none); @include xy-grid($direction: vertical, $wrap: false); .MannequinTopBar { @@ -36,46 +36,49 @@ } } .NavDrawer { - @include xy-cell(.5, $gutter-output: false, $gutter-type: none); + @include xy-cell(3/12, $gutter-output: false, $gutter-type: none); + min-width: 320px; + transform: translate(0, 0); + transition: transform .5s ease, visibility 0s linear .5s; position: relative; z-index: 5; visibility: hidden; - transition: visibility 0s linear .5s; + } &.drawer-open { .app-inner { - transform: translate(-50%, 0); - transition: transform .5s ease; + transform: translate(0, 0); } .NavDrawer { + transform: translate(-100%, 0); + transition: transform .5s ease; visibility: visible; - transition: none; } } - @include breakpoint(large) { - .app-inner { - width: 100%; - } - .main-frame { - @include xy-cell(full, $gutter-output: false, $gutter-type: none); - } - .NavDrawer { - @include xy-cell(3/12, $gutter-output: false, $gutter-type: none); - min-width: 25%; - transform: translate(0, 0); - transition: transform .5s ease, visibility 0s linear .5s; - } - &.drawer-open { - .app-inner { - transform: translate(0, 0); - } - .NavDrawer { - transform: translate(-100%, 0); - transition: transform .5s ease; - } - } - } + // @include breakpoint(small) { + // .app-inner { + // width: 100%; + // } + // .main-frame { + // @include xy-cell(full, $gutter-output: false, $gutter-type: none); + // } + // .NavDrawer { + // // @include xy-cell(3/12, $gutter-output: false, $gutter-type: none); + // min-width: 25%; + // transform: translate(0, 0); + // transition: transform .5s ease, visibility 0s linear .5s; + // } + // &.drawer-open { + // .app-inner { + // transform: translate(0, 0); + // } + // .NavDrawer { + // transform: translate(-100%, 0); + // transition: transform .5s ease; + // } + // } + // } @include breakpoint(xxlarge) { .main-frame { @include xy-cell(auto, $gutter-output: false, $gutter-type: none); From 548a9134cba164e7c9ec958be8669e5040ba54ac Mon Sep 17 00:00:00 2001 From: Chelsie Johnston Date: Mon, 6 May 2019 16:28:37 -0500 Subject: [PATCH 18/29] Re-theme Branding. --- ui/src/components/Branding.css | 45 +++++++++++++++++++++++++-------- ui/src/components/Branding.scss | 34 ++++++++++++++++++++++--- 2 files changed, 65 insertions(+), 14 deletions(-) diff --git a/ui/src/components/Branding.css b/ui/src/components/Branding.css index ac54e6d..cea70bc 100644 --- a/ui/src/components/Branding.css +++ b/ui/src/components/Branding.css @@ -10,8 +10,8 @@ margin-left: 0.625rem; margin-right: 0.625rem; display: grid; - grid-template-columns: 33.33333% 66.66667%; - margin: 0 auto; } + margin: 0 auto; + align-items: center; } @media print, screen and (min-width: 40em) { .Branding { margin-left: 0.9375rem; @@ -19,14 +19,39 @@ .Branding img { grid-column: 1 / 1; - width: 105px; } + justify-self: right; + width: 85px; + border-right: solid 2px #fffffe; + padding-right: 15px; + box-sizing: content-box; } + @media print, screen and (min-width: 40em) { + .Branding img { + width: 105px; + padding-right: 30px; } } .Branding__Text { - grid-column: 2 / 2; } + grid-column: 2 / 2; + padding-left: 15px; } + @media print, screen and (min-width: 40em) { + .Branding__Text { + padding-left: 30px; } } -@media print, screen and (min-width: 40em) { - .Branding h1 { - text-transform: uppercase; - font-weight: 800; - font-size: 60px; - letter-spacing: 3.5px; } } +.Branding h1 { + text-transform: uppercase; + font-weight: 800; + font-size: 40px; + line-height: 2rem; } + @media print, screen and (min-width: 40em) { + .Branding h1 { + font-size: 60px; + letter-spacing: 3.5px; + line-height: 3rem; } } + +.Branding span { + font-size: 12px; + text-transform: uppercase; + letter-spacing: 2.7px; + font-weight: 400; } + @media print, screen and (min-width: 40em) { + .Branding span { + font-size: 15px; } } diff --git a/ui/src/components/Branding.scss b/ui/src/components/Branding.scss index b219936..1d69c2d 100644 --- a/ui/src/components/Branding.scss +++ b/ui/src/components/Branding.scss @@ -66,25 +66,51 @@ .Branding { @include xy-gutters($gutter-position: left right); display: grid; - grid-template-columns: xy-cell-size(2 of 6) xy-cell-size(4 of 6); + // grid-template-columns: xy-cell-size(2 of 6) xy-cell-size(4 of 6); // width: $grid-container / 2; margin: 0 auto; + align-items: center; } .Branding img { grid-column: 1 / 1; - width: 105px; + justify-self: right; + width: 85px; + border-right: solid 2px $white; + padding-right: 15px; + box-sizing: content-box; + @include breakpoint(medium) { + width: 105px; + padding-right: 30px; + } } .Branding__Text { grid-column: 2 / 2; + padding-left: 15px; + @include breakpoint(medium) { + padding-left: 30px; + } } .Branding h1 { + text-transform: uppercase; + font-weight: 800; + font-size: 40px; + line-height: 2rem; @include breakpoint(medium) { - text-transform: uppercase; - font-weight: 800; font-size: 60px; letter-spacing: 3.5px; + line-height: 3rem; + } +} + +.Branding span { + font-size: 12px; + text-transform: uppercase; + letter-spacing: 2.7px; + font-weight: 400; + @include breakpoint(medium) { + font-size: 15px; } } From 8b1134a99c37be5e5ad1508847c5ae3985d21444 Mon Sep 17 00:00:00 2001 From: Chelsie Johnston Date: Tue, 7 May 2019 12:37:26 -0500 Subject: [PATCH 19/29] Style the Quick Links. --- ui/src/components/Card.css | 33 +++++++++++-------------- ui/src/components/Card.scss | 44 +++++++++++++++++---------------- ui/src/containers/HomePage.css | 9 +++---- ui/src/containers/HomePage.scss | 6 +---- 4 files changed, 43 insertions(+), 49 deletions(-) diff --git a/ui/src/components/Card.css b/ui/src/components/Card.css index 83bf8f6..6e8a4c3 100644 --- a/ui/src/components/Card.css +++ b/ui/src/components/Card.css @@ -7,28 +7,25 @@ @import url("https://fonts.googleapis.com/css?family=Montserrat:400,600,800"); @import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css"); .Card { - border: 1px dashed; - padding: 20px; } - .Card:hover { - border-color: transparent; - background-color: #4A90E2; } - .Card:hover h6 { - color: white; } + border: 2px dashed #EBECEC; } .Card a { color: inherit; - display: block; } + display: block; + padding: 1.25rem; } .Card h6 { - font-size: 0.5625rem; - line-height: 0.6875rem; - color: #556371; - margin-top: 0.5rem; - font-weight: bold; } + font-weight: 600; + font-size: 0.75rem; + color: #fffffe; + text-transform: uppercase; + letter-spacing: .75px; } .Card h5 { - font-size: 1.125rem; - line-height: 1.375rem; - font-weight: bold; - letter-spacing: 1px; - margin-bottom: 0; } + font-weight: 600; + font-size: 1rem; } + .Card:hover { + border-color: transparent; + background-color: #EBECEC; } + .Card:hover h5, .Card:hover h6 { + color: #292F36; } .CardGrid { display: flex; diff --git a/ui/src/components/Card.scss b/ui/src/components/Card.scss index 08fe628..d5a985a 100644 --- a/ui/src/components/Card.scss +++ b/ui/src/components/Card.scss @@ -1,35 +1,37 @@ @import "../../theme/_base"; .Card { - border: 1px dashed; - padding: 20px; + border: 2px dashed $eggshell; - &:hover { - border-color: transparent; - background-color: #4A90E2; - - h6 { - color: white; - } - } a { color: inherit; - display:block; + display: block; + padding: rem-calc(20); } + h6 { - font-size:rem-calc(9); - line-height: rem-calc(11); - color: #556371; - margin-top: rem-calc(8); - font-weight: bold; + font-weight: 600; + font-size: rem-calc(12); + color: $white; + text-transform: uppercase; + letter-spacing: .75px; } h5 { - font-size: rem-calc(18); - line-height: rem-calc(22); - font-weight: bold; - letter-spacing: 1px; - margin-bottom: 0; + font-weight: 600; + font-size: rem-calc(16); } + &:hover { + border-color: transparent; + background-color: $eggshell; + + h5, h6 { + color: $charcoal; + } + } + + + + } .CardGrid { diff --git a/ui/src/containers/HomePage.css b/ui/src/containers/HomePage.css index d22dd0a..f82ae92 100644 --- a/ui/src/containers/HomePage.css +++ b/ui/src/containers/HomePage.css @@ -13,9 +13,8 @@ margin-top: 8%; margin-bottom: 10%; } .MannequinHome .quicklinks h4 { + font-size: 14px; + font-weight: 800; + letter-spacing: 2px; text-transform: uppercase; - text-align: center; - margin-bottom: 1.8125rem; - font-family: "Montserrat", sans-serif, sans-serif; - font-weight: bold; - font-size: 0.5625rem; } + text-align: center; } diff --git a/ui/src/containers/HomePage.scss b/ui/src/containers/HomePage.scss index f6176f4..72a15e9 100644 --- a/ui/src/containers/HomePage.scss +++ b/ui/src/containers/HomePage.scss @@ -10,12 +10,8 @@ } .quicklinks { h4 { - text-transform: uppercase; + @include font-bold; text-align: center; - margin-bottom: rem-calc(29); - font-family: $impact-font-family; - font-weight: bold; - font-size: rem-calc(9); } } } From 7484bc64a6cd1c1bdd3f0c88635d3d9c91995a21 Mon Sep 17 00:00:00 2001 From: Chelsie Johnston Date: Tue, 7 May 2019 13:07:41 -0500 Subject: [PATCH 20/29] Add the 'Get Started' button for when there are no patterns. --- ui/src/containers/HomePage.css | 27 +++++++++++++++++++++++++++ ui/src/containers/HomePage.js | 3 ++- ui/src/containers/HomePage.scss | 19 +++++++++++++++++++ 3 files changed, 48 insertions(+), 1 deletion(-) diff --git a/ui/src/containers/HomePage.css b/ui/src/containers/HomePage.css index f82ae92..1095d2c 100644 --- a/ui/src/containers/HomePage.css +++ b/ui/src/containers/HomePage.css @@ -18,3 +18,30 @@ letter-spacing: 2px; text-transform: uppercase; text-align: center; } + +.button--get-started { + font-size: 14px; + font-weight: 800; + letter-spacing: 2px; + text-transform: uppercase; + padding: 0.75rem 1.5625rem; + border: dashed 2px #292F36; + border-radius: 18px; + font-size: 0.75rem; + letter-spacing: 0.10625rem; + width: 20.125rem; + margin: 0 auto; + display: block; + padding: 1.25rem 0; + border: 2px dashed white; + text-align: center; + border-radius: 3.125rem; + color: #fffffe; + letter-spacing: 0.125rem; + font-size: 0.875rem; } + .button--get-started:hover { + cursor: pointer; } + .button--get-started:hover { + color: #292F36; + background: #4ECDC4; + border: dashed 2px #4ECDC4; } diff --git a/ui/src/containers/HomePage.js b/ui/src/containers/HomePage.js index 3dc0c50..8520810 100644 --- a/ui/src/containers/HomePage.js +++ b/ui/src/containers/HomePage.js @@ -5,6 +5,7 @@ import Branding from '../components/Branding'; import { getQuicklinks } from '../selectors'; import Card from '../components/Card'; import PropTypes from 'prop-types'; +import { OpenNew } from '../components/Icons'; const HomePage = ({ quickLinks }) => (
@@ -23,7 +24,7 @@ const HomePage = ({ quickLinks }) => ( ))}
- )} + ) || Get Started } ); diff --git a/ui/src/containers/HomePage.scss b/ui/src/containers/HomePage.scss index 72a15e9..fb4f59a 100644 --- a/ui/src/containers/HomePage.scss +++ b/ui/src/containers/HomePage.scss @@ -15,3 +15,22 @@ } } } + +.button--get-started { + @include border-button; + width: rem-calc(322); + margin: 0 auto; + display: block; + padding: rem-calc(20) 0; + border: 2px dashed white; + text-align: center; + border-radius: rem-calc(50); + color: $white; + letter-spacing: rem-calc(2); + font-size: rem-calc(14); + &:hover { + color: $charcoal; + background: $mint; + border: dashed 2px $mint; + } +} From 9ef1890f5ba1541c4af13634823d9e813e5ced95 Mon Sep 17 00:00:00 2001 From: Chelsie Johnston Date: Tue, 7 May 2019 13:52:58 -0500 Subject: [PATCH 21/29] Re-add the Component Info transition and style the View Info button based on state. --- ui/src/components/Buttons/ViewInfoButton.css | 2 +- ui/src/components/Buttons/ViewInfoButton.js | 2 +- ui/src/components/Buttons/ViewInfoButton.scss | 2 +- ui/src/components/ComponentTopBar.css | 7 +++++++ ui/src/components/ComponentTopBar.scss | 10 ++++++++++ ui/src/components/NavDrawer.css | 9 ++++++--- ui/src/components/NavDrawer.scss | 7 +++++-- .../Transitions/SlideInFromBottom.css | 11 +++++++++++ .../Transitions/SlideInFromBottom.js | 2 +- .../Transitions/SlideInFromBottom.scss | 18 ++++++++++++++++++ ui/src/containers/SamplePage.js | 2 +- 11 files changed, 62 insertions(+), 10 deletions(-) create mode 100644 ui/src/components/Transitions/SlideInFromBottom.css create mode 100644 ui/src/components/Transitions/SlideInFromBottom.scss diff --git a/ui/src/components/Buttons/ViewInfoButton.css b/ui/src/components/Buttons/ViewInfoButton.css index dee054c..86ca88e 100644 --- a/ui/src/components/Buttons/ViewInfoButton.css +++ b/ui/src/components/Buttons/ViewInfoButton.css @@ -22,6 +22,6 @@ letter-spacing: 0.10625rem; } .ViewInfoButton:hover { cursor: pointer; } - .ViewInfoButton:hover, .ViewInfoButton:focus { + .ViewInfoButton:hover, .ViewInfoButton.active-true { background: #292F36; color: #fffffe; } diff --git a/ui/src/components/Buttons/ViewInfoButton.js b/ui/src/components/Buttons/ViewInfoButton.js index d3c381f..8be19d4 100644 --- a/ui/src/components/Buttons/ViewInfoButton.js +++ b/ui/src/components/Buttons/ViewInfoButton.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import './ViewInfoButton.css'; const ViewInfoButton = props => ( - ); diff --git a/ui/src/components/Buttons/ViewInfoButton.scss b/ui/src/components/Buttons/ViewInfoButton.scss index 393d8de..45212b1 100644 --- a/ui/src/components/Buttons/ViewInfoButton.scss +++ b/ui/src/components/Buttons/ViewInfoButton.scss @@ -4,7 +4,7 @@ @include font-bold; @include border-button; - &:hover, &:focus { + &:hover, &.active-true, { background: $charcoal; color: $white; } diff --git a/ui/src/components/ComponentTopBar.css b/ui/src/components/ComponentTopBar.css index e9aa947..b3f157f 100644 --- a/ui/src/components/ComponentTopBar.css +++ b/ui/src/components/ComponentTopBar.css @@ -38,6 +38,7 @@ color: #4F545A; } .ComponentTopBar .SampleSelector { width: auto; + background-color: #EBECEC; font-size: 0.875rem; line-height: 0.75rem; height: 1.875rem; @@ -45,6 +46,9 @@ font-weight: 600; color: #292F36; margin-bottom: 0; } + .ComponentTopBar .SampleSelector:hover { + cursor: pointer; + background-color: #fffffe; } .ComponentTopBar select, .ComponentTopBar .button, .ComponentTopBar h4 { margin-bottom: 0; } .ComponentTopBar .actions { @@ -72,3 +76,6 @@ .ComponentTopBar .actions .OpenWindowButton { padding-top: 0.625rem; padding-right: 1.4375rem; } + .ComponentTopBar .ViewInfoButton.active-true { + background: #292F36; + color: #fffffe; } diff --git a/ui/src/components/ComponentTopBar.scss b/ui/src/components/ComponentTopBar.scss index 586227e..c30d70b 100644 --- a/ui/src/components/ComponentTopBar.scss +++ b/ui/src/components/ComponentTopBar.scss @@ -24,6 +24,7 @@ } .SampleSelector { width: auto; + background-color: $eggshell; font-size: rem-calc(14); line-height: rem-calc(12); height: rem-calc(30); @@ -31,6 +32,10 @@ font-weight: 600; color: $charcoal; margin-bottom: 0; + &:hover { + cursor: pointer; + background-color: $white; + } } select, .button, h4 { margin-bottom: 0; @@ -42,4 +47,9 @@ padding-right: rem-calc(23); } } + + .ViewInfoButton.active-true { + background: $charcoal; + color: $white; + } } diff --git a/ui/src/components/NavDrawer.css b/ui/src/components/NavDrawer.css index 111420e..1db0cb2 100644 --- a/ui/src/components/NavDrawer.css +++ b/ui/src/components/NavDrawer.css @@ -69,7 +69,7 @@ position: relative; } .SearchForm input { border: none; - background-color: #21262B; + background-color: #292F36; color: white; font-size: 14px; font-weight: 400; @@ -78,9 +78,12 @@ height: auto; margin-bottom: 0; border-radius: 0; - padding-left: 2.5rem; } + padding-left: 2.5rem; + border: solid 2px #292F36; } .SearchForm input:focus { - background-color: #21262B; } + background-color: #292F36; + border: solid 2px #4ECDC4; + box-shadow: 0 0; } .SearchForm i { position: absolute; top: 50%; diff --git a/ui/src/components/NavDrawer.scss b/ui/src/components/NavDrawer.scss index 32852cf..0a3e900 100644 --- a/ui/src/components/NavDrawer.scss +++ b/ui/src/components/NavDrawer.scss @@ -57,7 +57,7 @@ input { border: none; - background-color: #21262B; + background-color: $charcoal; color: white; font-size: 14px; font-weight: 400; @@ -67,9 +67,12 @@ margin-bottom: 0; border-radius: 0; padding-left: rem-calc(40); + border: solid 2px $charcoal; &:focus { - background-color: #21262B; + background-color: $charcoal; + border: solid 2px $mint; + box-shadow: 0 0; } } i { diff --git a/ui/src/components/Transitions/SlideInFromBottom.css b/ui/src/components/Transitions/SlideInFromBottom.css new file mode 100644 index 0000000..3948213 --- /dev/null +++ b/ui/src/components/Transitions/SlideInFromBottom.css @@ -0,0 +1,11 @@ +.SlideInFromBottom-enter { + transform: translateY(100%); } + .SlideInFromBottom-enter-active { + transform: translateY(0); + transition: transform .5s ease; } + +.SlideInFromBottom-exit { + transform: translateY(0); } + .SlideInFromBottom-exit-active { + transform: translateY(100%); + transition: transform .5s ease; } diff --git a/ui/src/components/Transitions/SlideInFromBottom.js b/ui/src/components/Transitions/SlideInFromBottom.js index 8292ef0..a815a30 100644 --- a/ui/src/components/Transitions/SlideInFromBottom.js +++ b/ui/src/components/Transitions/SlideInFromBottom.js @@ -1,7 +1,7 @@ import React from 'react'; import CssTransition from 'react-transition-group/CSSTransition'; -// import './SlideInFromBottom.css'; +import './SlideInFromBottom.css'; export default ({ children, ...rest }) => ( diff --git a/ui/src/components/Transitions/SlideInFromBottom.scss b/ui/src/components/Transitions/SlideInFromBottom.scss new file mode 100644 index 0000000..7fc2152 --- /dev/null +++ b/ui/src/components/Transitions/SlideInFromBottom.scss @@ -0,0 +1,18 @@ + +.SlideInFromBottom { + &-enter { + transform: translateY(100%); + &-active { + transform:translateY(0); + transition: transform .5s ease; + } + } + &-exit { + transform:translateY(0); + + &-active { + transform: translateY(100%); + transition: transform .5s ease; + } + } +} \ No newline at end of file diff --git a/ui/src/containers/SamplePage.js b/ui/src/containers/SamplePage.js index 4e41b49..4e87d45 100644 --- a/ui/src/containers/SamplePage.js +++ b/ui/src/containers/SamplePage.js @@ -67,7 +67,7 @@ class SampleFoundPage extends Component { const { problems, name } = component; const actions = [ , - + ]; const selector = ( Date: Tue, 7 May 2019 14:02:09 -0500 Subject: [PATCH 22/29] Remove errant comments. --- theme/_settings.scss | 868 +++++++++++++++++++++++ theme/_variables.scss | 15 +- ui/src/components/Branding.scss | 65 -- ui/src/components/Buttons/CloseButton.js | 4 - ui/src/components/Callout.css | 18 + ui/src/components/Callout.js | 2 +- ui/src/components/CodeBlock.js | 1 - ui/src/components/ComponentInfo.scss | 4 +- ui/src/components/NavDrawer.scss | 8 - ui/src/containers/App.scss | 23 - 10 files changed, 889 insertions(+), 119 deletions(-) create mode 100644 theme/_settings.scss create mode 100644 ui/src/components/Callout.css diff --git a/theme/_settings.scss b/theme/_settings.scss new file mode 100644 index 0000000..3750381 --- /dev/null +++ b/theme/_settings.scss @@ -0,0 +1,868 @@ +// Foundation for Sites Settings +// ----------------------------- +// +// Table of Contents: +// +// 1. Global +// 2. Breakpoints +// 3. The Grid +// 4. Base Typography +// 5. Typography Helpers +// 6. Abide +// 7. Accordion +// 8. Accordion Menu +// 9. Badge +// 10. Breadcrumbs +// 11. Button +// 12. Button Group +// 13. Callout +// 14. Card +// 15. Close Button +// 16. Drilldown +// 17. Dropdown +// 18. Dropdown Menu +// 19. Flexbox Utilities +// 20. Forms +// 21. Label +// 22. Media Object +// 23. Menu +// 24. Meter +// 25. Off-canvas +// 26. Orbit +// 27. Pagination +// 28. Progress Bar +// 29. Prototype Arrow +// 30. Prototype Border-Box +// 31. Prototype Border-None +// 32. Prototype Bordered +// 33. Prototype Display +// 34. Prototype Font-Styling +// 35. Prototype List-Style-Type +// 36. Prototype Overflow +// 37. Prototype Position +// 38. Prototype Rounded +// 39. Prototype Separator +// 40. Prototype Shadow +// 41. Prototype Sizing +// 42. Prototype Spacing +// 43. Prototype Text-Decoration +// 44. Prototype Text-Transformation +// 45. Prototype Text-Utilities +// 46. Responsive Embed +// 47. Reveal +// 48. Slider +// 49. Switch +// 50. Table +// 51. Tabs +// 52. Thumbnail +// 53. Title Bar +// 54. Tooltip +// 55. Top Bar +// 56. Xy Grid + +@import 'util/util'; + +// 1. Global +// --------- + +$global-font-size: 100%; +$global-width: rem-calc(1200); +$global-lineheight: 1.5; +$foundation-palette: ( + primary: #1779ba, + secondary: #767676, + success: #3adb76, + warning: #ffae00, + alert: #cc4b37, +); +$light-gray: #e6e6e6; +$medium-gray: #cacaca; +$dark-gray: #8a8a8a; +$black: #0a0a0a; +$white: #fefefe; +$body-background: $white; +$body-font-color: $black; +$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; +$body-antialiased: true; +$global-margin: 1rem; +$global-padding: 1rem; +$global-position: 1rem; +$global-weight-normal: normal; +$global-weight-bold: bold; +$global-radius: 0; +$global-menu-padding: 0.7rem 1rem; +$global-menu-nested-margin: 1rem; +$global-text-direction: ltr; +$global-flexbox: true; +$global-prototype-breakpoints: false; +$global-button-cursor: auto; +$global-color-pick-contrast-tolerance: 0; +$print-transparent-backgrounds: true; + +@include add-foundation-colors; +$print-hrefs: true; + +// 2. Breakpoints +// -------------- + +$breakpoints: ( + small: 0, + medium: 640px, + large: 1024px, + xlarge: 1200px, + xxlarge: 1440px, +); +$print-breakpoint: large; +$breakpoint-classes: (small medium large); + +// 3. The Grid +// ----------- + +$grid-row-width: $global-width; +$grid-column-count: 12; +$grid-column-gutter: ( + small: 20px, + medium: 30px, +); +$grid-column-align-edge: true; +$grid-column-alias: 'columns'; +$block-grid-max: 8; + +// 4. Base Typography +// ------------------ + +$header-font-family: $body-font-family; +$header-font-weight: $global-weight-normal; +$header-font-style: normal; +$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace; +$header-color: inherit; +$header-lineheight: 1.4; +$header-margin-bottom: 0.5rem; +$header-styles: ( + small: ( + 'h1': ('font-size': 24), + 'h2': ('font-size': 20), + 'h3': ('font-size': 19), + 'h4': ('font-size': 18), + 'h5': ('font-size': 17), + 'h6': ('font-size': 16), + ), + medium: ( + 'h1': ('font-size': 48), + 'h2': ('font-size': 40), + 'h3': ('font-size': 31), + 'h4': ('font-size': 25), + 'h5': ('font-size': 20), + 'h6': ('font-size': 16), + ), +); +$header-text-rendering: optimizeLegibility; +$small-font-size: 80%; +$header-small-font-color: $medium-gray; +$paragraph-lineheight: 1.6; +$paragraph-margin-bottom: 1rem; +$paragraph-text-rendering: optimizeLegibility; +$code-color: $black; +$code-font-family: $font-family-monospace; +$code-font-weight: $global-weight-normal; +$code-background: $light-gray; +$code-border: 1px solid $medium-gray; +$code-padding: rem-calc(2 5 1); +$anchor-color: $primary-color; +$anchor-color-hover: scale-color($anchor-color, $lightness: -14%); +$anchor-text-decoration: none; +$anchor-text-decoration-hover: none; +$hr-width: $global-width; +$hr-border: 1px solid $medium-gray; +$hr-margin: rem-calc(20) auto; +$list-lineheight: $paragraph-lineheight; +$list-margin-bottom: $paragraph-margin-bottom; +$list-style-type: disc; +$list-style-position: outside; +$list-side-margin: 1.25rem; +$list-nested-side-margin: 1.25rem; +$defnlist-margin-bottom: 1rem; +$defnlist-term-weight: $global-weight-bold; +$defnlist-term-margin-bottom: 0.3rem; +$blockquote-color: $dark-gray; +$blockquote-padding: rem-calc(9 20 0 19); +$blockquote-border: 1px solid $medium-gray; +$cite-font-size: rem-calc(13); +$cite-color: $dark-gray; +$cite-pseudo-content: '\2014 \0020'; +$keystroke-font: $font-family-monospace; +$keystroke-color: $black; +$keystroke-background: $light-gray; +$keystroke-padding: rem-calc(2 4 0); +$keystroke-radius: $global-radius; +$abbr-underline: 1px dotted $black; + +// 5. Typography Helpers +// --------------------- + +$lead-font-size: $global-font-size * 1.25; +$lead-lineheight: 1.6; +$subheader-lineheight: 1.4; +$subheader-color: $dark-gray; +$subheader-font-weight: $global-weight-normal; +$subheader-margin-top: 0.2rem; +$subheader-margin-bottom: 0.5rem; +$stat-font-size: 2.5rem; + +// 6. Abide +// -------- + +$abide-inputs: true; +$abide-labels: true; +$input-background-invalid: get-color(alert); +$form-label-color-invalid: get-color(alert); +$input-error-color: get-color(alert); +$input-error-font-size: rem-calc(12); +$input-error-font-weight: $global-weight-bold; + +// 7. Accordion +// ------------ + +$accordion-background: $white; +$accordion-plusminus: true; +$accordion-title-font-size: rem-calc(12); +$accordion-item-color: $primary-color; +$accordion-item-background-hover: $light-gray; +$accordion-item-padding: 1.25rem 1rem; +$accordion-content-background: $white; +$accordion-content-border: 1px solid $light-gray; +$accordion-content-color: $body-font-color; +$accordion-content-padding: 1rem; + +// 8. Accordion Menu +// ----------------- + +$accordionmenu-padding: $global-menu-padding; +$accordionmenu-nested-margin: $global-menu-nested-margin; +$accordionmenu-submenu-padding: $accordionmenu-padding; +$accordionmenu-arrows: true; +$accordionmenu-arrow-color: $primary-color; +$accordionmenu-item-background: null; +$accordionmenu-border: null; +$accordionmenu-submenu-toggle-background: null; +$accordion-submenu-toggle-border: $accordionmenu-border; +$accordionmenu-submenu-toggle-width: 40px; +$accordionmenu-submenu-toggle-height: $accordionmenu-submenu-toggle-width; +$accordionmenu-arrow-size: 6px; + +// 9. Badge +// -------- + +$badge-background: $primary-color; +$badge-color: $white; +$badge-color-alt: $black; +$badge-palette: $foundation-palette; +$badge-padding: 0.3em; +$badge-minwidth: 2.1em; +$badge-font-size: 0.6rem; + +// 10. Breadcrumbs +// --------------- + +$breadcrumbs-margin: 0 0 $global-margin 0; +$breadcrumbs-item-font-size: rem-calc(11); +$breadcrumbs-item-color: $primary-color; +$breadcrumbs-item-color-current: $black; +$breadcrumbs-item-color-disabled: $medium-gray; +$breadcrumbs-item-margin: 0.75rem; +$breadcrumbs-item-uppercase: true; +$breadcrumbs-item-separator: true; +$breadcrumbs-item-separator-item: '/'; +$breadcrumbs-item-separator-item-rtl: '\\'; +$breadcrumbs-item-separator-color: $medium-gray; + +// 11. Button +// ---------- + +$button-font-family: inherit; +$button-padding: 0.85em 1em; +$button-margin: 0 0 $global-margin 0; +$button-fill: solid; +$button-background: $primary-color; +$button-background-hover: scale-color($button-background, $lightness: -15%); +$button-color: $white; +$button-color-alt: $black; +$button-radius: $global-radius; +$button-hollow-border-width: 1px; +$button-sizes: ( + tiny: 0.6rem, + small: 0.75rem, + default: 0.9rem, + large: 1.25rem, +); +$button-palette: $foundation-palette; +$button-opacity-disabled: 0.25; +$button-background-hover-lightness: -20%; +$button-hollow-hover-lightness: -50%; +$button-transition: background-color 0.25s ease-out, color 0.25s ease-out; +$button-responsive-expanded: false; + +// 12. Button Group +// ---------------- + +$buttongroup-margin: 1rem; +$buttongroup-spacing: 1px; +$buttongroup-child-selector: '.button'; +$buttongroup-expand-max: 6; +$buttongroup-radius-on-each: true; + +// 13. Callout +// ----------- + +$callout-background: $white; +$callout-background-fade: 85%; +$callout-border: 1px solid rgba($black, 0.25); +$callout-margin: 0 0 1rem 0; +$callout-padding: 1rem; +$callout-font-color: $body-font-color; +$callout-font-color-alt: $body-background; +$callout-radius: $global-radius; +$callout-link-tint: 30%; + +// 14. Card +// -------- + +$card-background: $white; +$card-font-color: $body-font-color; +$card-divider-background: $light-gray; +$card-border: 1px solid $light-gray; +$card-shadow: none; +$card-border-radius: $global-radius; +$card-padding: $global-padding; +$card-margin-bottom: $global-margin; + +// 15. Close Button +// ---------------- + +$closebutton-position: right top; +$closebutton-offset-horizontal: ( + small: 0.66rem, + medium: 1rem, +); +$closebutton-offset-vertical: ( + small: 0.33em, + medium: 0.5rem, +); +$closebutton-size: ( + small: 1.5em, + medium: 2em, +); +$closebutton-lineheight: 1; +$closebutton-color: $dark-gray; +$closebutton-color-hover: $black; + +// 16. Drilldown +// ------------- + +$drilldown-transition: transform 0.15s linear; +$drilldown-arrows: true; +$drilldown-padding: $global-menu-padding; +$drilldown-nested-margin: 0; +$drilldown-background: $white; +$drilldown-submenu-padding: $drilldown-padding; +$drilldown-submenu-background: $white; +$drilldown-arrow-color: $primary-color; +$drilldown-arrow-size: 6px; + +// 17. Dropdown +// ------------ + +$dropdown-padding: 1rem; +$dropdown-background: $body-background; +$dropdown-border: 1px solid $medium-gray; +$dropdown-font-size: 1rem; +$dropdown-width: 300px; +$dropdown-radius: $global-radius; +$dropdown-sizes: ( + tiny: 100px, + small: 200px, + large: 400px, +); + +// 18. Dropdown Menu +// ----------------- + +$dropdownmenu-arrows: true; +$dropdownmenu-arrow-color: $anchor-color; +$dropdownmenu-arrow-size: 6px; +$dropdownmenu-arrow-padding: 1.5rem; +$dropdownmenu-min-width: 200px; +$dropdownmenu-background: null; +$dropdownmenu-submenu-background: $white; +$dropdownmenu-padding: $global-menu-padding; +$dropdownmenu-nested-margin: 0; +$dropdownmenu-submenu-padding: $dropdownmenu-padding; +$dropdownmenu-border: 1px solid $medium-gray; +$dropdown-menu-item-color-active: get-color(primary); +$dropdown-menu-item-background-active: transparent; + +// 19. Flexbox Utilities +// --------------------- + +$flex-source-ordering-count: 6; +$flexbox-responsive-breakpoints: true; + +// 20. Forms +// --------- + +$fieldset-border: 1px solid $medium-gray; +$fieldset-padding: rem-calc(20); +$fieldset-margin: rem-calc(18 0); +$legend-padding: rem-calc(0 3); +$form-spacing: rem-calc(16); +$helptext-color: $black; +$helptext-font-size: rem-calc(13); +$helptext-font-style: italic; +$input-prefix-color: $black; +$input-prefix-background: $light-gray; +$input-prefix-border: 1px solid $medium-gray; +$input-prefix-padding: 1rem; +$form-label-color: $black; +$form-label-font-size: rem-calc(14); +$form-label-font-weight: $global-weight-normal; +$form-label-line-height: 1.8; +$select-background: $white; +$select-triangle-color: $dark-gray; +$select-radius: $global-radius; +$input-color: $black; +$input-placeholder-color: $medium-gray; +$input-font-family: inherit; +$input-font-size: rem-calc(16); +$input-font-weight: $global-weight-normal; +$input-line-height: $global-lineheight; +$input-background: $white; +$input-background-focus: $white; +$input-background-disabled: $light-gray; +$input-border: 1px solid $medium-gray; +$input-border-focus: 1px solid $dark-gray; +$input-padding: $form-spacing / 2; +$input-shadow: inset 0 1px 2px rgba($black, 0.1); +$input-shadow-focus: 0 0 5px $medium-gray; +$input-cursor-disabled: not-allowed; +$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out; +$input-number-spinners: true; +$input-radius: $global-radius; +$form-button-radius: $global-radius; + +// 21. Label +// --------- + +$label-background: $primary-color; +$label-color: $white; +$label-color-alt: $black; +$label-palette: $foundation-palette; +$label-font-size: 0.8rem; +$label-padding: 0.33333rem 0.5rem; +$label-radius: $global-radius; + +// 22. Media Object +// ---------------- + +$mediaobject-margin-bottom: $global-margin; +$mediaobject-section-padding: $global-padding; +$mediaobject-image-width-stacked: 100%; + +// 23. Menu +// -------- + +$menu-margin: 0; +$menu-nested-margin: $global-menu-nested-margin; +$menu-items-padding: $global-menu-padding; +$menu-simple-margin: 1rem; +$menu-item-color-active: $white; +$menu-item-background-active: get-color(primary); +$menu-icon-spacing: 0.25rem; +$menu-state-back-compat: true; +$menu-centered-back-compat: true; +$menu-icons-back-compat: true; + +// 24. Meter +// --------- + +$meter-height: 1rem; +$meter-radius: $global-radius; +$meter-background: $medium-gray; +$meter-fill-good: $success-color; +$meter-fill-medium: $warning-color; +$meter-fill-bad: $alert-color; + +// 25. Off-canvas +// -------------- + +$offcanvas-sizes: ( + small: 250px, +); +$offcanvas-vertical-sizes: ( + small: 250px, +); +$offcanvas-background: $light-gray; +$offcanvas-shadow: 0 0 10px rgba($black, 0.7); +$offcanvas-inner-shadow-size: 20px; +$offcanvas-inner-shadow-color: rgba($black, 0.25); +$offcanvas-overlay-zindex: 11; +$offcanvas-push-zindex: 12; +$offcanvas-overlap-zindex: 13; +$offcanvas-reveal-zindex: 12; +$offcanvas-transition-length: 0.5s; +$offcanvas-transition-timing: ease; +$offcanvas-fixed-reveal: true; +$offcanvas-exit-background: rgba($white, 0.25); +$maincontent-class: 'off-canvas-content'; + +// 26. Orbit +// --------- + +$orbit-bullet-background: $medium-gray; +$orbit-bullet-background-active: $dark-gray; +$orbit-bullet-diameter: 1.2rem; +$orbit-bullet-margin: 0.1rem; +$orbit-bullet-margin-top: 0.8rem; +$orbit-bullet-margin-bottom: 0.8rem; +$orbit-caption-background: rgba($black, 0.5); +$orbit-caption-padding: 1rem; +$orbit-control-background-hover: rgba($black, 0.5); +$orbit-control-padding: 1rem; +$orbit-control-zindex: 10; + +// 27. Pagination +// -------------- + +$pagination-font-size: rem-calc(14); +$pagination-margin-bottom: $global-margin; +$pagination-item-color: $black; +$pagination-item-padding: rem-calc(3 10); +$pagination-item-spacing: rem-calc(1); +$pagination-radius: $global-radius; +$pagination-item-background-hover: $light-gray; +$pagination-item-background-current: $primary-color; +$pagination-item-color-current: $white; +$pagination-item-color-disabled: $medium-gray; +$pagination-ellipsis-color: $black; +$pagination-mobile-items: false; +$pagination-mobile-current-item: false; +$pagination-arrows: true; + +// 28. Progress Bar +// ---------------- + +$progress-height: 1rem; +$progress-background: $medium-gray; +$progress-margin-bottom: $global-margin; +$progress-meter-background: $primary-color; +$progress-radius: $global-radius; + +// 29. Prototype Arrow +// ------------------- + +$prototype-arrow-directions: ( + down, + up, + right, + left +); +$prototype-arrow-size: 0.4375rem; +$prototype-arrow-color: $black; + +// 30. Prototype Border-Box +// ------------------------ + +$prototype-border-box-breakpoints: $global-prototype-breakpoints; + +// 31. Prototype Border-None +// ------------------------- + +$prototype-border-none-breakpoints: $global-prototype-breakpoints; + +// 32. Prototype Bordered +// ---------------------- + +$prototype-bordered-breakpoints: $global-prototype-breakpoints; +$prototype-border-width: rem-calc(1); +$prototype-border-type: solid; +$prototype-border-color: $medium-gray; + +// 33. Prototype Display +// --------------------- + +$prototype-display-breakpoints: $global-prototype-breakpoints; +$prototype-display: ( + inline, + inline-block, + block, + table, + table-cell +); + +// 34. Prototype Font-Styling +// -------------------------- + +$prototype-font-breakpoints: $global-prototype-breakpoints; +$prototype-wide-letter-spacing: rem-calc(4); +$prototype-font-normal: $global-weight-normal; +$prototype-font-bold: $global-weight-bold; + +// 35. Prototype List-Style-Type +// ----------------------------- + +$prototype-list-breakpoints: $global-prototype-breakpoints; +$prototype-style-type-unordered: ( + disc, + circle, + square +); +$prototype-style-type-ordered: ( + decimal, + lower-alpha, + lower-latin, + lower-roman, + upper-alpha, + upper-latin, + upper-roman +); + +// 36. Prototype Overflow +// ---------------------- + +$prototype-overflow-breakpoints: $global-prototype-breakpoints; +$prototype-overflow: ( + visible, + hidden, + scroll +); + +// 37. Prototype Position +// ---------------------- + +$prototype-position-breakpoints: $global-prototype-breakpoints; +$prototype-position: ( + static, + relative, + absolute, + fixed +); +$prototype-position-z-index: 975; + +// 38. Prototype Rounded +// --------------------- + +$prototype-rounded-breakpoints: $global-prototype-breakpoints; +$prototype-border-radius: rem-calc(3); + +// 39. Prototype Separator +// ----------------------- + +$prototype-separator-breakpoints: $global-prototype-breakpoints; +$prototype-separator-align: center; +$prototype-separator-height: rem-calc(2); +$prototype-separator-width: 3rem; +$prototype-separator-background: $primary-color; +$prototype-separator-margin-top: $global-margin; + +// 40. Prototype Shadow +// -------------------- + +$prototype-shadow-breakpoints: $global-prototype-breakpoints; +$prototype-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), + 0 2px 10px 0 rgba(0,0,0,.12); + +// 41. Prototype Sizing +// -------------------- + +$prototype-sizing-breakpoints: $global-prototype-breakpoints; +$prototype-sizing: ( + width, + height +); +$prototype-sizes: ( + 25: 25%, + 50: 50%, + 75: 75%, + 100: 100% +); + +// 42. Prototype Spacing +// --------------------- + +$prototype-spacing-breakpoints: $global-prototype-breakpoints; +$prototype-spacers-count: 3; + +// 43. Prototype Text-Decoration +// ----------------------------- + +$prototype-decoration-breakpoints: $global-prototype-breakpoints; +$prototype-text-decoration: ( + overline, + underline, + line-through, +); + +// 44. Prototype Text-Transformation +// --------------------------------- + +$prototype-transformation-breakpoints: $global-prototype-breakpoints; +$prototype-text-transformation: ( + lowercase, + uppercase, + capitalize +); + +// 45. Prototype Text-Utilities +// ---------------------------- + +$prototype-utilities-breakpoints: $global-prototype-breakpoints; +$prototype-text-overflow: ellipsis; + +// 46. Responsive Embed +// -------------------- + +$responsive-embed-margin-bottom: rem-calc(16); +$responsive-embed-ratios: ( + default: 4 by 3, + widescreen: 16 by 9, +); + +// 47. Reveal +// ---------- + +$reveal-background: $white; +$reveal-width: 600px; +$reveal-max-width: $global-width; +$reveal-padding: $global-padding; +$reveal-border: 1px solid $medium-gray; +$reveal-radius: $global-radius; +$reveal-zindex: 1005; +$reveal-overlay-background: rgba($black, 0.45); + +// 48. Slider +// ---------- + +$slider-width-vertical: 0.5rem; +$slider-transition: all 0.2s ease-in-out; +$slider-height: 0.5rem; +$slider-background: $light-gray; +$slider-fill-background: $medium-gray; +$slider-handle-height: 1.4rem; +$slider-handle-width: 1.4rem; +$slider-handle-background: $primary-color; +$slider-opacity-disabled: 0.25; +$slider-radius: $global-radius; + +// 49. Switch +// ---------- + +$switch-background: $medium-gray; +$switch-background-active: $primary-color; +$switch-height: 2rem; +$switch-height-tiny: 1.5rem; +$switch-height-small: 1.75rem; +$switch-height-large: 2.5rem; +$switch-radius: $global-radius; +$switch-margin: $global-margin; +$switch-paddle-background: $white; +$switch-paddle-offset: 0.25rem; +$switch-paddle-radius: $global-radius; +$switch-paddle-transition: all 0.25s ease-out; + +// 50. Table +// --------- + +$table-background: $white; +$table-color-scale: 5%; +$table-border: 1px solid smart-scale($table-background, $table-color-scale); +$table-padding: rem-calc(8 10 10); +$table-hover-scale: 2%; +$table-row-hover: darken($table-background, $table-hover-scale); +$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale); +$table-is-striped: true; +$table-striped-background: smart-scale($table-background, $table-color-scale); +$table-stripe: even; +$table-head-background: smart-scale($table-background, $table-color-scale / 2); +$table-head-row-hover: darken($table-head-background, $table-hover-scale); +$table-foot-background: smart-scale($table-background, $table-color-scale); +$table-foot-row-hover: darken($table-foot-background, $table-hover-scale); +$table-head-font-color: $body-font-color; +$table-foot-font-color: $body-font-color; +$show-header-for-stacked: false; +$table-stack-breakpoint: medium; + +// 51. Tabs +// -------- + +$tab-margin: 0; +$tab-background: $white; +$tab-color: $primary-color; +$tab-background-active: $light-gray; +$tab-active-color: $primary-color; +$tab-item-font-size: rem-calc(12); +$tab-item-background-hover: $white; +$tab-item-padding: 1.25rem 1.5rem; +$tab-content-background: $white; +$tab-content-border: $light-gray; +$tab-content-color: $body-font-color; +$tab-content-padding: 1rem; + +// 52. Thumbnail +// ------------- + +$thumbnail-border: 4px solid $white; +$thumbnail-margin-bottom: $global-margin; +$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2); +$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5); +$thumbnail-transition: box-shadow 200ms ease-out; +$thumbnail-radius: $global-radius; + +// 53. Title Bar +// ------------- + +$titlebar-background: $black; +$titlebar-color: $white; +$titlebar-padding: 0.5rem; +$titlebar-text-font-weight: bold; +$titlebar-icon-color: $white; +$titlebar-icon-color-hover: $medium-gray; +$titlebar-icon-spacing: 0.25rem; + +// 54. Tooltip +// ----------- + +$has-tip-cursor: help; +$has-tip-font-weight: $global-weight-bold; +$has-tip-border-bottom: dotted 1px $dark-gray; +$tooltip-background-color: $black; +$tooltip-color: $white; +$tooltip-padding: 0.75rem; +$tooltip-max-width: 10rem; +$tooltip-font-size: $small-font-size; +$tooltip-pip-width: 0.75rem; +$tooltip-pip-height: $tooltip-pip-width * 0.866; +$tooltip-radius: $global-radius; + +// 55. Top Bar +// ----------- + +$topbar-padding: 0.5rem; +$topbar-background: $light-gray; +$topbar-submenu-background: $topbar-background; +$topbar-title-spacing: 0.5rem 1rem 0.5rem 0; +$topbar-input-width: 200px; +$topbar-unstack-breakpoint: medium; + +// 56. Xy Grid +// ----------- + +$xy-grid: true; +$grid-container: $global-width; +$grid-columns: 12; +$grid-margin-gutters: ( + small: 20px, + medium: 30px +); +$grid-padding-gutters: $grid-margin-gutters; +$grid-container-padding: $grid-padding-gutters; +$grid-container-max: $global-width; +$xy-block-grid-max: 8; diff --git a/theme/_variables.scss b/theme/_variables.scss index d31e3dd..cf29885 100644 --- a/theme/_variables.scss +++ b/theme/_variables.scss @@ -1,16 +1,4 @@ -//Site colors -// $white: #FFF; -// $black: #080808; -// $almost-black: #1B2126; -// $darkblue: #181D22; -// $blue-gray: #7E92A5; -// $light-gray: #97A6B5; -// $darkgray: #3A454F; -// $buttonblue: #4A90E2; -// $dashing-gray: #55626d; -// $red: #FF4444; -// $green: #8AC74B; -// $minty: #39FFE2; +//Theme colors $black: #000; $charcoal: #292F36; @@ -65,7 +53,6 @@ $code-font-family: $font-family-monospace; @mixin border-button { @include font-bold; - // height: rem-calc(36); padding: rem-calc(12) rem-calc(25); border: dashed 2px $charcoal; border-radius: 18px; diff --git a/ui/src/components/Branding.scss b/ui/src/components/Branding.scss index 1d69c2d..c46d929 100644 --- a/ui/src/components/Branding.scss +++ b/ui/src/components/Branding.scss @@ -1,73 +1,8 @@ @import "../../theme/_base"; -// @mixin branding-layout($logo_h, $logo_w, $h1_font-size, $h1_line_height, $divider_margin) { -// .logo { -// height: rem-calc($logo_h); -// width: rem-calc($logo_w); -// margin-top: rem-calc(($h1_line_height - $logo_h) / 2); -// margin-bottom: rem-calc(($h1_line_height - $logo_h) / 2); -// } -// h1 { -// font-size: rem-calc($h1_font-size); -// line-height: rem-calc($h1_line_height); -// } -// .logo + h1:before { -// height: rem-calc($logo_h); -// margin: 0 rem-calc($divider_margin); -// } -// } - -// .Branding { - // @include xy-grid-container(); - // - // h1 { - // font-family: $impact-font-family; - // font-weight: 700; - // margin-bottom: 0; - // text-transform: uppercase; - // } - // .logo + h1:before { - // content: ""; - // border-left: 1px dashed $dashed-border-color; - // width: 1px; - // display:inline-block; - // vertical-align: middle; - // } - // @include branding-layout(39, 40, 30, 35, 15); - // @include breakpoint(large) { - // @include branding-layout(61, 63, 73, 84, 40); - // } - // span { - // margin-top: rem-calc(12); - // display:block; - // font-size: rem-calc(12); - // color: inherit; - // font-weight: 300; - // letter-spacing: 5px; - // text-align:center; - // text-transform: uppercase; - // span { - // background-color: #1B2126; - // } - // margin: rem-calc(30) rem-calc(44) 0; - // @include breakpoint(large) { - // margin-top: rem-calc(10); - // } - // } - // .top { - // display: flex; - // justify-content: center; - // .logo, h1 { - // flex: 0 0 auto; - // } - // } -// } - .Branding { @include xy-gutters($gutter-position: left right); display: grid; - // grid-template-columns: xy-cell-size(2 of 6) xy-cell-size(4 of 6); - // width: $grid-container / 2; margin: 0 auto; align-items: center; } diff --git a/ui/src/components/Buttons/CloseButton.js b/ui/src/components/Buttons/CloseButton.js index 8fe3fd1..17126d3 100644 --- a/ui/src/components/Buttons/CloseButton.js +++ b/ui/src/components/Buttons/CloseButton.js @@ -2,12 +2,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Close } from '../Icons'; import cx from 'classnames'; -// import './CloseButton.css'; const CloseButton = ({ className, ...rest }) => ( - // diff --git a/ui/src/components/Callout.css b/ui/src/components/Callout.css new file mode 100644 index 0000000..c55b568 --- /dev/null +++ b/ui/src/components/Callout.css @@ -0,0 +1,18 @@ +/** + * Foundation for Sites by ZURB + * Version 6.4.2 + * foundation.zurb.com + * Licensed under MIT Open Source + */ +.MCallout { + position: relative; + margin: 0 0 1rem 0; + padding: 1rem; + border: 1px solid rgba(10, 10, 10, 0.25); + border-radius: 0; + background-color: white; + color: #0a0a0a; } + .MCallout > :first-child { + margin-top: 0; } + .MCallout > :last-child { + margin-bottom: 0; } diff --git a/ui/src/components/Callout.js b/ui/src/components/Callout.js index e5d861b..5eac95c 100644 --- a/ui/src/components/Callout.js +++ b/ui/src/components/Callout.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -// import './Callout.css'; +import './Callout.css'; import cx from 'classnames'; const Callout = ({ type, title, content }) => ( diff --git a/ui/src/components/CodeBlock.js b/ui/src/components/CodeBlock.js index 71e51f8..7064a9a 100644 --- a/ui/src/components/CodeBlock.js +++ b/ui/src/components/CodeBlock.js @@ -4,7 +4,6 @@ import SyntaxHighlighter, { } from 'react-syntax-highlighter/dist/light'; import twig from 'react-syntax-highlighter/dist/languages/twig'; import xml from 'react-syntax-highlighter/dist/languages/xml'; -// import codeStyle from 'react-syntax-highlighter/dist/styles/foundation'; import codeStyle from './CodeStyle'; registerLanguage('twig', twig); diff --git a/ui/src/components/ComponentInfo.scss b/ui/src/components/ComponentInfo.scss index 48a6cd2..24c3533 100644 --- a/ui/src/components/ComponentInfo.scss +++ b/ui/src/components/ComponentInfo.scss @@ -19,7 +19,7 @@ } .ComponentInfo__section--top { - // @include xy-grid(); + position: fixed; width: 100vw; display: grid; @@ -124,8 +124,6 @@ .ComponentInfo .controls { .CloseButton { @extend %toggle-button; - // text-align: right; - // height: rem-calc(60); width: rem-calc(175); > i { vertical-align: middle; diff --git a/ui/src/components/NavDrawer.scss b/ui/src/components/NavDrawer.scss index 0a3e900..879a5b2 100644 --- a/ui/src/components/NavDrawer.scss +++ b/ui/src/components/NavDrawer.scss @@ -4,9 +4,7 @@ background-color: $ash; box-shadow: 0 2px 5px 0 $ash; @include xy-grid(vertical); - // padding: 0 calc(39.67px / 2); .drawer-toggle.closer { - // @include xy-cell(shrink, $gutter-position: right left top bottom, $gutter-type: padding); @extend %toggle-button; text-align: right; height: rem-calc(60); @@ -32,11 +30,6 @@ .NavDrawer__top { display: grid; grid-template-columns: 1fr 1fr; - // @include xy-grid(); - // > span, > .drawer-toggle { - // - // // @include xy-cell(6, $gutter-output: false); - // } > span { @include font-bold; color: $white; @@ -84,4 +77,3 @@ color: $white; } } -; diff --git a/ui/src/containers/App.scss b/ui/src/containers/App.scss index bd2f8c4..b4e7934 100644 --- a/ui/src/containers/App.scss +++ b/ui/src/containers/App.scss @@ -56,29 +56,6 @@ } } - // @include breakpoint(small) { - // .app-inner { - // width: 100%; - // } - // .main-frame { - // @include xy-cell(full, $gutter-output: false, $gutter-type: none); - // } - // .NavDrawer { - // // @include xy-cell(3/12, $gutter-output: false, $gutter-type: none); - // min-width: 25%; - // transform: translate(0, 0); - // transition: transform .5s ease, visibility 0s linear .5s; - // } - // &.drawer-open { - // .app-inner { - // transform: translate(0, 0); - // } - // .NavDrawer { - // transform: translate(-100%, 0); - // transition: transform .5s ease; - // } - // } - // } @include breakpoint(xxlarge) { .main-frame { @include xy-cell(auto, $gutter-output: false, $gutter-type: none); From 7f37578d6c313a709f3eea1d6db28cabfa992222 Mon Sep 17 00:00:00 2001 From: Chelsie Johnston Date: Fri, 10 May 2019 12:05:35 -0500 Subject: [PATCH 23/29] Add Fontello package and implement (troubleshooting); start refactoring buttons. --- ui/src/components/Buttons/Button.js | 28 ++ ui/src/components/Buttons/TestButtons.js | 11 + ui/src/containers/HomePage.js | 3 + ui/src/fontello/LICENSE.txt | 12 + ui/src/fontello/README.txt | 75 +++++ ui/src/fontello/config.json | 110 ++++++++ ui/src/fontello/css/animation.css | 85 ++++++ ui/src/fontello/css/fontello-codes.css | 6 + ui/src/fontello/css/fontello-embedded.css | 59 ++++ ui/src/fontello/css/fontello-ie7-codes.css | 6 + ui/src/fontello/css/fontello-ie7.css | 17 ++ ui/src/fontello/css/fontello.css | 62 ++++ ui/src/fontello/demo.html | 312 +++++++++++++++++++++ ui/src/fontello/font/fontello.eot | Bin 0 -> 5948 bytes ui/src/fontello/font/fontello.svg | 20 ++ ui/src/fontello/font/fontello.ttf | Bin 0 -> 5780 bytes ui/src/fontello/font/fontello.woff | Bin 0 -> 3316 bytes ui/src/fontello/font/fontello.woff2 | Bin 0 -> 2652 bytes 18 files changed, 806 insertions(+) create mode 100644 ui/src/components/Buttons/Button.js create mode 100644 ui/src/components/Buttons/TestButtons.js create mode 100644 ui/src/fontello/LICENSE.txt create mode 100644 ui/src/fontello/README.txt create mode 100644 ui/src/fontello/config.json create mode 100644 ui/src/fontello/css/animation.css create mode 100644 ui/src/fontello/css/fontello-codes.css create mode 100644 ui/src/fontello/css/fontello-embedded.css create mode 100644 ui/src/fontello/css/fontello-ie7-codes.css create mode 100644 ui/src/fontello/css/fontello-ie7.css create mode 100644 ui/src/fontello/css/fontello.css create mode 100644 ui/src/fontello/demo.html create mode 100644 ui/src/fontello/font/fontello.eot create mode 100644 ui/src/fontello/font/fontello.svg create mode 100644 ui/src/fontello/font/fontello.ttf create mode 100644 ui/src/fontello/font/fontello.woff create mode 100644 ui/src/fontello/font/fontello.woff2 diff --git a/ui/src/components/Buttons/Button.js b/ui/src/components/Buttons/Button.js new file mode 100644 index 0000000..6cbcdef --- /dev/null +++ b/ui/src/components/Buttons/Button.js @@ -0,0 +1,28 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import "../../fontello/css/fontello.css" + +const Icon = (props) => { + if (!props.iconName) return null; + if (props.iconName) { + return ; + } +} + +const Button = ({ icon }) => ( + +); + +Button.propTypes = { + icon: PropTypes.string, +}; +Button.defaultProps = { + icon: null, +}; + +export default Button; diff --git a/ui/src/components/Buttons/TestButtons.js b/ui/src/components/Buttons/TestButtons.js new file mode 100644 index 0000000..47288c0 --- /dev/null +++ b/ui/src/components/Buttons/TestButtons.js @@ -0,0 +1,11 @@ +import React from 'react'; +import Button from './Button'; + +const TestButtons = props => ( +
+

Buttons:

+
+); + +export default TestButtons; diff --git a/ui/src/containers/HomePage.js b/ui/src/containers/HomePage.js index 8520810..a8c53df 100644 --- a/ui/src/containers/HomePage.js +++ b/ui/src/containers/HomePage.js @@ -7,9 +7,12 @@ import Card from '../components/Card'; import PropTypes from 'prop-types'; import { OpenNew } from '../components/Icons'; +import TestButtons from '../components/Buttons/TestButtons'; + const HomePage = ({ quickLinks }) => (
+ {quickLinks.length > 0 && (

Quick Links

diff --git a/ui/src/fontello/LICENSE.txt b/ui/src/fontello/LICENSE.txt new file mode 100644 index 0000000..8fa3da3 --- /dev/null +++ b/ui/src/fontello/LICENSE.txt @@ -0,0 +1,12 @@ +Font license info + + +## Font Awesome + + Copyright (C) 2016 by Dave Gandy + + Author: Dave Gandy + License: SIL () + Homepage: http://fortawesome.github.com/Font-Awesome/ + + diff --git a/ui/src/fontello/README.txt b/ui/src/fontello/README.txt new file mode 100644 index 0000000..beaab33 --- /dev/null +++ b/ui/src/fontello/README.txt @@ -0,0 +1,75 @@ +This webfont is generated by http://fontello.com open source project. + + +================================================================================ +Please, note, that you should obey original font licenses, used to make this +webfont pack. Details available in LICENSE.txt file. + +- Usually, it's enough to publish content of LICENSE.txt file somewhere on your + site in "About" section. + +- If your project is open-source, usually, it will be ok to make LICENSE.txt + file publicly available in your repository. + +- Fonts, used in Fontello, don't require a clickable link on your site. + But any kind of additional authors crediting is welcome. +================================================================================ + + +Comments on archive content +--------------------------- + +- /font/* - fonts in different formats + +- /css/* - different kinds of css, for all situations. Should be ok with + twitter bootstrap. Also, you can skip style and assign icon classes + directly to text elements, if you don't mind about IE7. + +- demo.html - demo file, to show your webfont content + +- LICENSE.txt - license info about source fonts, used to build your one. + +- config.json - keeps your settings. You can import it back into fontello + anytime, to continue your work + + +Why so many CSS files ? +----------------------- + +Because we like to fit all your needs :) + +- basic file, .css - is usually enough, it contains @font-face + and character code definitions + +- *-ie7.css - if you need IE7 support, but still don't wish to put char codes + directly into html + +- *-codes.css and *-ie7-codes.css - if you like to use your own @font-face + rules, but still wish to benefit from css generation. That can be very + convenient for automated asset build systems. When you need to update font - + no need to manually edit files, just override old version with archive + content. See fontello source code for examples. + +- *-embedded.css - basic css file, but with embedded WOFF font, to avoid + CORS issues in Firefox and IE9+, when fonts are hosted on the separate domain. + We strongly recommend to resolve this issue by `Access-Control-Allow-Origin` + server headers. But if you ok with dirty hack - this file is for you. Note, + that data url moved to separate @font-face to avoid problems with + + + + + + + +
+

fontello font demo

+ +
+
+
+
icon-close0xe800
+
icon-expand0xe801
+
icon-collapse0xe802
+
icon-new-window0xf08e
+
+
+
icon-menu0xf0c9
+
+
+
Generated by fontello.com
+ + \ No newline at end of file diff --git a/ui/src/fontello/font/fontello.eot b/ui/src/fontello/font/fontello.eot new file mode 100644 index 0000000000000000000000000000000000000000..c632c405bf67e8cabc8fd3b7b446c21f98ee67a7 GIT binary patch literal 5948 zcmd^CO>7&-6@IfzQZglzvL#WD>DWWBD9hrKlJ###wrNrl<5+2AS$0S#b+{s_A6pVx ziH@D1hg=$@Y8#|M&{KP=U9`8M+@fxf0s-7ZU9>6RCs6t(hOaNY|#=lKDq$S5-ro5&6ae8BGiSN?b<`lM!obJ=~PIZ zJ0FwZ3%&}?XLu){JJ;ELLZ1CCNbKu{%z{<;!%Zqc{yE;;nU{;w_2)GQk^9@Im(zur zg_R$^m4f_ZqPoJ2wG1u{le>trc4q#S>C8XxoF>xKct>Y*R<`N$k3JxBp+D-Mg`(!T zo`if4a_j6u@p{vXKvV-8v}Zn_v9w*d%%8t>Pl>CAP*7$7UlI z^K&y6)mCZ*>bO=wBgj?N>N)WiIbr`*4VLKpDiN(I+ej9>@Rt!!f}Et%Lzlxev%M$N7HcEyorzFL2DugEz}B&&>m@Uw#o$ zu-87(KGa^PR@xu+AAF(#$*hTlj%?8K0@c$^`=zLBw_E{W;n%GF*avO%#}%zlGM)W_+1=t_*opQ; zn^_ihI)=R^>}`Gc_3+FGdD1tAo-?5$W8gj=G6#n9!Io1^4WE4i&wUfWV)pY4y-n|l6XK_kxTTAt99KLVj^F(_ zXo=3(6>JUBZu;AL|9#MvZSe`wSHT+9(D4e^p&zbb2k=-0JE@M4|8}1)=wGT}H-&K6 zm-Thj2+y$dJ9dC~nQm6Fpa$WsV0b7FRImBW>LyqFzdh3c%2K5V%={MiRwzk?TZ+}bM%1Yoaw`kwzEc@P-^I-L$CDCHtXNXH$CGJjB-gna^)u>E`_rjZ%CAHyl`<5K zCv&M(Sm~x5k;)OY;E*#uo>WdFrd&o0?x&PUhn2%L;FrvnoKrE$HD%-cMg2%d=^X*+ z<8no=pzl(bGl*fGO{T~F)e(~ zw5e$&GU#79JHo2Ql`0NHqp74HPFB5CdeE?j%O>i+pt)*AD>Pmo+QvrpoHIsjwa%@N zBm;gUkm?A8)lRddX(K9Y4TqJ-!~mpJ_3>wTTmVKarFOD30cj_su=1jt20J7Y5y-%8 z<%y@|N?Ixpf)-W{=9$T4$&npSwW^&t<9b-_GS8e%o;g=m`UB86+WOsQiM;Xi$&%NL z`Lklm8{#BI>c&d-{Mm_*5)At~K3oQ}yf%>SyPLEyZL z#a7a#-L8;Y3i%HrOidVDV<@be&642Khd6WDVwQ9+_n0LImrs}_CzpH8l8Z~fS*qc3 zpINHq@=3F_gUkIUshy#(;m83vvL78tIKpKBj&OMpj&Nzf5iVQd2$w-P!etvA;qnk1 z;j$f$aCz92Lw25bm>7RUTE;mRJZTn6b(oVXWU7vk>cDa_k*Nu!)VAxzum%m@tG<+h zdM~pnaT(Jvm>lW+D_e*;Z9zJ0VmO4c< zMsft>hNIgyNh52m!LaH!BP~N=)$>(UWLO6DUQ7k~f-)i#yfP8O(<>_pBY~YDi9H*8 z9+qp5z`qx;--j*4hwR6nO;J1Iq1;NukaB1Ref2-8mXUHF%7H$?k}A!MIeIpEOOv|v z-_qLjy{Q;)aJASfVGkCKQ7kRY;^uXNMJ+<*om`8jvxd^+Ru+4V7PtJs=@b^`);1Pg z!mewKT7!NA7Dh2H6t)%gw~Y}v!aJb@s~fR*B9X9fZ}9{@T4)@!oxm5z2ybDJY#~bq zI0h2doo$sE7()onpsiN5SiMq?8VNSWvvt%C84sWmQJPFf1G%L=zU?(7GD4 z`AB_yU2U_gO*e5)n5r*St=ZJ+NmKQQR**xSEGt-!j~T|aL{td&qjtDB0jtsFoevm(J6p40D{4oxhibUvjDc{8_bEJ>N(~x7-tTHv&>;I!JHES=a|D_k~s{{ zGl#(i=0pLWXAXlTa~PzU!{8!w;s7r&hrx@?Ven1nFu25=lK?LXLbDheNC0jA9{Gn^Su0_;o&N!h}oq? literal 0 HcmV?d00001 diff --git a/ui/src/fontello/font/fontello.svg b/ui/src/fontello/font/fontello.svg new file mode 100644 index 0000000..2a13da3 --- /dev/null +++ b/ui/src/fontello/font/fontello.svg @@ -0,0 +1,20 @@ + + + +Copyright (C) 2019 by original authors @ fontello.com + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ui/src/fontello/font/fontello.ttf b/ui/src/fontello/font/fontello.ttf new file mode 100644 index 0000000000000000000000000000000000000000..8ecc7ab64812767eec3963d5b47342a2d33272ce GIT binary patch literal 5780 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 K3we2x(F6wseC3q@ literal 0 HcmV?d00001 From 7660f1a8d69099be7a36556f66eeb437fc8b99b3 Mon Sep 17 00:00:00 2001 From: Chelsie Johnston Date: Fri, 10 May 2019 14:44:02 -0500 Subject: [PATCH 24/29] Consolidate (hopefully) all the buttons. --- theme/_variables.scss | 24 +--- ui/src/components/Buttons/Button.js | 44 +++++- ui/src/components/Buttons/TestButtons.js | 11 -- ui/src/components/Buttons/ViewInfoButton.css | 13 +- ui/src/components/Buttons/ViewInfoButton.scss | 2 +- ui/src/components/Buttons/button.css | 85 ++++++++++++ ui/src/components/Buttons/button.scss | 130 ++++++++++++++++++ ui/src/components/ComponentInfo.css | 41 ------ ui/src/components/ComponentInfo.js | 31 +++-- ui/src/components/ComponentInfo.scss | 28 ---- ui/src/components/ComponentTopBar.css | 6 +- ui/src/components/ComponentTopBar.scss | 8 +- ui/src/components/NavDrawer.css | 22 +-- ui/src/components/NavDrawer.js | 10 +- ui/src/components/NavDrawer.scss | 13 +- ui/src/components/TopBar.css | 20 --- ui/src/components/TopBar.js | 10 +- ui/src/components/TopBar.scss | 10 -- ui/src/containers/HomePage.css | 28 +--- ui/src/containers/HomePage.js | 11 +- ui/src/containers/HomePage.scss | 17 +-- ui/src/containers/SamplePage.js | 30 +++- 22 files changed, 330 insertions(+), 264 deletions(-) delete mode 100644 ui/src/components/Buttons/TestButtons.js create mode 100644 ui/src/components/Buttons/button.css create mode 100644 ui/src/components/Buttons/button.scss diff --git a/theme/_variables.scss b/theme/_variables.scss index cf29885..6dc9146 100644 --- a/theme/_variables.scss +++ b/theme/_variables.scss @@ -4,6 +4,7 @@ $black: #000; $charcoal: #292F36; $ash: #4F545A; $storm: #546267; +$seafoam: #649490; $mint: #4ECDC4; $eggshell: #EBECEC; $white: #fffffe; @@ -40,26 +41,3 @@ $code-font-family: $font-family-monospace; letter-spacing: 2px; text-transform: uppercase; } - -%toggle-button { - @include font-bold; - line-height: rem-calc(12); - color: $white; - cursor: pointer; - > i, > svg.Icon { - margin-left: rem-calc(17); - } -} - -@mixin border-button { - @include font-bold; - padding: rem-calc(12) rem-calc(25); - border: dashed 2px $charcoal; - border-radius: 18px; - font-size: rem-calc(12); - letter-spacing: rem-calc(1.7); - - &:hover { - cursor: pointer; - } -} diff --git a/ui/src/components/Buttons/Button.js b/ui/src/components/Buttons/Button.js index 6cbcdef..afb3663 100644 --- a/ui/src/components/Buttons/Button.js +++ b/ui/src/components/Buttons/Button.js @@ -1,6 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import "../../fontello/css/fontello.css" +import "./button.css"; +import cx from 'classnames'; const Icon = (props) => { if (!props.iconName) return null; @@ -9,20 +11,48 @@ const Icon = (props) => { } } -const Button = ({ icon }) => ( - +const Element = ({ element, icon, text, href, classes, target, onClick, toggleStatus, dataSrc, dataLanguage }) => { + + if (element == 'button') { + return ( + + ); + } + return ( + + {text} + + ); +} + +const Button = (props) => ( + ); Button.propTypes = { + element: PropTypes.string, icon: PropTypes.string, + text: PropTypes.string, + href: PropTypes.string, + classes: PropTypes.string, + target: PropTypes.string, }; Button.defaultProps = { + element: 'a', icon: null, + text: null, + href: '#', + classes: 'Button', + target: null, + toggleStatus: null }; export default Button; diff --git a/ui/src/components/Buttons/TestButtons.js b/ui/src/components/Buttons/TestButtons.js deleted file mode 100644 index 47288c0..0000000 --- a/ui/src/components/Buttons/TestButtons.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import Button from './Button'; - -const TestButtons = props => ( -

-

Buttons:

-
-); - -export default TestButtons; diff --git a/ui/src/components/Buttons/ViewInfoButton.css b/ui/src/components/Buttons/ViewInfoButton.css index 86ca88e..0135e22 100644 --- a/ui/src/components/Buttons/ViewInfoButton.css +++ b/ui/src/components/Buttons/ViewInfoButton.css @@ -10,18 +10,7 @@ font-size: 14px; font-weight: 800; letter-spacing: 2px; - text-transform: uppercase; - font-size: 14px; - font-weight: 800; - letter-spacing: 2px; - text-transform: uppercase; - padding: 0.75rem 1.5625rem; - border: dashed 2px #292F36; - border-radius: 18px; - font-size: 0.75rem; - letter-spacing: 0.10625rem; } - .ViewInfoButton:hover { - cursor: pointer; } + text-transform: uppercase; } .ViewInfoButton:hover, .ViewInfoButton.active-true { background: #292F36; color: #fffffe; } diff --git a/ui/src/components/Buttons/ViewInfoButton.scss b/ui/src/components/Buttons/ViewInfoButton.scss index 45212b1..b902eb1 100644 --- a/ui/src/components/Buttons/ViewInfoButton.scss +++ b/ui/src/components/Buttons/ViewInfoButton.scss @@ -2,7 +2,7 @@ .ViewInfoButton { @include font-bold; - @include border-button; + // @include border-button; &:hover, &.active-true, { background: $charcoal; diff --git a/ui/src/components/Buttons/button.css b/ui/src/components/Buttons/button.css new file mode 100644 index 0000000..24306ce --- /dev/null +++ b/ui/src/components/Buttons/button.css @@ -0,0 +1,85 @@ +/** + * Foundation for Sites by ZURB + * Version 6.5.3 + * foundation.zurb.com + * Licensed under MIT Open Source + */ +@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600,800"); +@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css"); +.Button { + color: #000; + font-size: 0.875rem; } + .Button:hover { + cursor: pointer; + color: inherit; } + +.Button.CloseButton, .Button.MenuButton, .Button.ViewInfoButton { + font-size: 14px; + font-weight: 800; + letter-spacing: 2px; + text-transform: uppercase; + color: #fffffe; + text-transform: uppercase; } + .Button.CloseButton i, .Button.MenuButton i, .Button.ViewInfoButton i { + margin-left: 1.0625rem; } + +.Button.ViewInfoButton, .Button.GetStartedButton, .Button.CodeButton { + font-size: 14px; + font-weight: 800; + letter-spacing: 2px; + text-transform: uppercase; + display: block; + padding: 0.75rem 1.5625rem; + border: dashed 2px; + border-radius: 18px; + font-size: 0.75rem; + letter-spacing: 0.10625rem; + text-align: center; } + +.Button.MenuButton:hover { + color: #4ECDC4; } + +.Button.ViewInfoButton { + color: #292F36; + border-color: #fffffe; + border-color: #292F36; } + .Button.ViewInfoButton:hover, .Button.ViewInfoButton.isToggled { + color: #fffffe; + background: #292F36; } + +.Button.GetStartedButton { + width: 20.125rem; + padding: 1.25rem 0; + border-radius: 3.125rem; + border-color: #fffffe; + color: #fffffe; + letter-spacing: 0.125rem; + font-size: 0.875rem; } + .Button.GetStartedButton:hover { + color: #292F36; + background: #4ECDC4; + border: dashed 2px #4ECDC4; } + +.Button.CodeButton { + display: inline; + border: 0; + background: #649490; + color: #292F36; } + .Button.CodeButton:not(.active):first-child { + padding-right: 36px; + border-radius: 18px 0 0 18px; } + .Button.CodeButton:not(.active):last-child { + padding-left: 36px; + border-radius: 0 18px 18px 0; } + .Button.CodeButton.active { + background: #4ECDC4; + color: #292F36; + border: 0; + z-index: 2; } + .Button.CodeButton.active:first-child { + margin-right: -22px; } + .Button.CodeButton.active:last-child { + margin-left: -22px; } + +.testbuttons { + background: #EBECEC; } diff --git a/ui/src/components/Buttons/button.scss b/ui/src/components/Buttons/button.scss new file mode 100644 index 0000000..8245983 --- /dev/null +++ b/ui/src/components/Buttons/button.scss @@ -0,0 +1,130 @@ +@import "../../theme/base"; + +%toggle-button { + @include font-bold; + line-height: rem-calc(12); + color: $white; + cursor: pointer; + > i, > svg.Icon { + margin-left: rem-calc(17); + } +} + +@mixin border-button { + @include font-bold; + padding: rem-calc(12) rem-calc(25); + border: dashed 2px $charcoal; + border-radius: 18px; + font-size: rem-calc(12); + letter-spacing: rem-calc(1.7); + + &:hover { + cursor: pointer; + } +} + +%button--icon { + color: $black; + font-size: rem-calc(14); + &:hover { + cursor: pointer; + color: inherit; + } +} + +%button--text { + @include font-bold; + color: $white; + text-transform: uppercase; + i { + margin-left: 1.0625rem; + } +} + +%button--border { + @include font-bold; + display: block; + padding: rem-calc(12) rem-calc(25); + border: dashed 2px; + border-radius: 18px; + font-size: rem-calc(12); + letter-spacing: rem-calc(1.7); + text-align: center; +} + +.Button { + @extend %button--icon; + + &.CloseButton, + &.MenuButton { + @extend %button--text; + } + + &.MenuButton { + &:hover { + color: $mint; + } + } + + &.ViewInfoButton { + @extend %button--text; + @extend %button--border; + color: $charcoal; + border-color: $white; + border-color: $charcoal; + &:hover, &.isToggled { + color: $white; + background: $charcoal; + } + } + + &.GetStartedButton { + @extend %button--border; + width: rem-calc(322); + padding: rem-calc(20) 0; + border-radius: rem-calc(50); + border-color: $white; + color: $white; + letter-spacing: rem-calc(2); + font-size: rem-calc(14); + &:hover { + color: $charcoal; + background: $mint; + border: dashed 2px $mint; + } + } + + &.CodeButton { + @extend %button--border; + display: inline; + border: 0; + background: $seafoam; + color: $charcoal; + &:not(.active) { + &:first-child { + padding-right: 36px; + border-radius: 18px 0 0 18px; + } + &:last-child { + padding-left: 36px; + border-radius: 0 18px 18px 0; + } + } + &.active { + background: $mint; + color: $charcoal; + border: 0; + z-index: 2; + &:first-child { + margin-right: -22px; + } + &:last-child { + margin-left: -22px; + } + } + } +} + +.testbuttons { + background: $eggshell; +} diff --git a/ui/src/components/ComponentInfo.css b/ui/src/components/ComponentInfo.css index 36d783b..bbe01dd 100644 --- a/ui/src/components/ComponentInfo.css +++ b/ui/src/components/ComponentInfo.css @@ -6,17 +6,6 @@ */ @import url("https://fonts.googleapis.com/css?family=Montserrat:400,600,800"); @import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css"); -.ComponentInfo .controls .CloseButton { - font-size: 14px; - font-weight: 800; - letter-spacing: 2px; - text-transform: uppercase; - line-height: 0.75rem; - color: #fffffe; - cursor: pointer; } - .ComponentInfo .controls .CloseButton > i, .ComponentInfo .controls .CloseButton > svg.Icon { - margin-left: 1.0625rem; } - .ComponentInfo { overflow-y: auto; } .ComponentInfo a { @@ -85,38 +74,8 @@ max-height: 20rem; } } .CodeButton { - font-size: 14px; - font-weight: 800; - letter-spacing: 2px; - text-transform: uppercase; - padding: 0.75rem 1.5625rem; - border: dashed 2px #292F36; - border-radius: 18px; - font-size: 0.75rem; - letter-spacing: 0.10625rem; - border: 0; - background: #649490; - color: #1f1f19; - font-size: 0.75rem; position: relative; z-index: 1; } - .CodeButton:hover { - cursor: pointer; } - .CodeButton:not(.active):first-child { - padding-right: 36px; - border-radius: 18px 0 0 18px; } - .CodeButton:not(.active):last-child { - padding-left: 36px; - border-radius: 0 18px 18px 0; } - .CodeButton.active { - background: #4ECDC4; - color: #292F36; - border: 0; - z-index: 2; } - .CodeButton.active:first-child { - margin-right: -22px; } - .CodeButton.active:last-child { - margin-left: -22px; } .ComponentInfo .controls .CloseButton { width: 10.9375rem; } diff --git a/ui/src/components/ComponentInfo.js b/ui/src/components/ComponentInfo.js index 48c3f25..edb2558 100644 --- a/ui/src/components/ComponentInfo.js +++ b/ui/src/components/ComponentInfo.js @@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'; import FetchingCodeBlock from './FetchingCodeBlock'; import PropTypes from 'prop-types'; import cx from 'classnames'; +import Button from './Buttons/Button' import './ComponentInfo.css'; const ComponentInfo = ({ component, sample, used, className, controls }) => { @@ -132,30 +133,32 @@ class ComponentInfoCode extends Component { {src && }
{sample && ( - + dataSrc={sample.source} + dataLanguage={'html'} + text="HTML" + element="button" + /> )} {component && ( - + dataSrc={component.source} + dataLanguage={component.metadata.source_format} + text="Raw" + element="button" + /> )}
diff --git a/ui/src/components/ComponentInfo.scss b/ui/src/components/ComponentInfo.scss index 24c3533..180043e 100644 --- a/ui/src/components/ComponentInfo.scss +++ b/ui/src/components/ComponentInfo.scss @@ -90,40 +90,12 @@ } .CodeButton { - @include border-button; - border: 0; - background: #649490; - color: #1f1f19; - font-size: rem-calc(12); position: relative; z-index: 1; - &:not(.active) { - &:first-child { - padding-right: 36px; - border-radius: 18px 0 0 18px; - } - &:last-child { - padding-left: 36px; - border-radius: 0 18px 18px 0; - } - } - &.active { - background: $mint; - color: $charcoal; - border: 0; - z-index: 2; - &:first-child { - margin-right: -22px; - } - &:last-child { - margin-left: -22px; - } - } } .ComponentInfo .controls { .CloseButton { - @extend %toggle-button; width: rem-calc(175); > i { vertical-align: middle; diff --git a/ui/src/components/ComponentTopBar.css b/ui/src/components/ComponentTopBar.css index b3f157f..96dbb8d 100644 --- a/ui/src/components/ComponentTopBar.css +++ b/ui/src/components/ComponentTopBar.css @@ -73,9 +73,5 @@ margin-bottom: 0; } .ComponentTopBar .actions input { display: inline-block; } - .ComponentTopBar .actions .OpenWindowButton { - padding-top: 0.625rem; + .ComponentTopBar .actions .NewWindowButton { padding-right: 1.4375rem; } - .ComponentTopBar .ViewInfoButton.active-true { - background: #292F36; - color: #fffffe; } diff --git a/ui/src/components/ComponentTopBar.scss b/ui/src/components/ComponentTopBar.scss index c30d70b..e6d3973 100644 --- a/ui/src/components/ComponentTopBar.scss +++ b/ui/src/components/ComponentTopBar.scss @@ -42,14 +42,8 @@ } .actions { @include menu-base; - .OpenWindowButton { - padding-top: rem-calc(10); + .NewWindowButton { padding-right: rem-calc(23); } } - - .ViewInfoButton.active-true { - background: $charcoal; - color: $white; - } } diff --git a/ui/src/components/NavDrawer.css b/ui/src/components/NavDrawer.css index 1db0cb2..5e41b65 100644 --- a/ui/src/components/NavDrawer.css +++ b/ui/src/components/NavDrawer.css @@ -6,28 +6,14 @@ */ @import url("https://fonts.googleapis.com/css?family=Montserrat:400,600,800"); @import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css"); -.NavDrawer .drawer-toggle.closer { - font-size: 14px; - font-weight: 800; - letter-spacing: 2px; - text-transform: uppercase; - line-height: 0.75rem; - color: #fffffe; - cursor: pointer; } - .NavDrawer .drawer-toggle.closer > i, .NavDrawer .drawer-toggle.closer > svg.Icon { - margin-left: 1.0625rem; } - .NavDrawer { background-color: #4F545A; box-shadow: 0 2px 5px 0 #4F545A; display: flex; flex-flow: column wrap; } - .NavDrawer .drawer-toggle.closer { - text-align: right; - height: 3.75rem; - margin-right: 1.25rem; } - .NavDrawer .drawer-toggle.closer > i { - vertical-align: middle; } + .NavDrawer .CloseButton { + margin-right: 1.25rem; + text-align: right; } .NavDrawer > .SearchForm { flex: 0 0 auto; height: auto; @@ -62,8 +48,6 @@ padding-top: 1.125rem; padding-bottom: 0.625rem; height: 3.75rem; } - .NavDrawer__top > .drawer-toggle { - text-align: right; } .SearchForm { position: relative; } diff --git a/ui/src/components/NavDrawer.js b/ui/src/components/NavDrawer.js index a2849a2..2107a2c 100644 --- a/ui/src/components/NavDrawer.js +++ b/ui/src/components/NavDrawer.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import Menu from './Menu'; import cx from 'classnames'; import { CloseArrow, Search as SearchIcon } from './Icons'; +import Button from './Buttons/Button'; import './NavDrawer.css'; export class NavDrawer extends Component { @@ -41,9 +42,12 @@ export class NavDrawer extends Component { ); diff --git a/ui/src/components/TopBar.scss b/ui/src/components/TopBar.scss index dd85c62..521d714 100644 --- a/ui/src/components/TopBar.scss +++ b/ui/src/components/TopBar.scss @@ -17,16 +17,6 @@ } } - .opener { - @extend %toggle-button; - @include font-bold; - &:hover { - color: $mint; - } - i.menu-icon { - margin-left: rem-calc(17); - } - } .MannySmall { width: 44.8px; } diff --git a/ui/src/containers/HomePage.css b/ui/src/containers/HomePage.css index 1095d2c..969c073 100644 --- a/ui/src/containers/HomePage.css +++ b/ui/src/containers/HomePage.css @@ -19,29 +19,5 @@ text-transform: uppercase; text-align: center; } -.button--get-started { - font-size: 14px; - font-weight: 800; - letter-spacing: 2px; - text-transform: uppercase; - padding: 0.75rem 1.5625rem; - border: dashed 2px #292F36; - border-radius: 18px; - font-size: 0.75rem; - letter-spacing: 0.10625rem; - width: 20.125rem; - margin: 0 auto; - display: block; - padding: 1.25rem 0; - border: 2px dashed white; - text-align: center; - border-radius: 3.125rem; - color: #fffffe; - letter-spacing: 0.125rem; - font-size: 0.875rem; } - .button--get-started:hover { - cursor: pointer; } - .button--get-started:hover { - color: #292F36; - background: #4ECDC4; - border: dashed 2px #4ECDC4; } +.GetStartedButton { + margin: 0 auto; } diff --git a/ui/src/containers/HomePage.js b/ui/src/containers/HomePage.js index a8c53df..0594563 100644 --- a/ui/src/containers/HomePage.js +++ b/ui/src/containers/HomePage.js @@ -6,13 +6,11 @@ import { getQuicklinks } from '../selectors'; import Card from '../components/Card'; import PropTypes from 'prop-types'; import { OpenNew } from '../components/Icons'; - -import TestButtons from '../components/Buttons/TestButtons'; +import Button from '../components/Buttons/Button'; const HomePage = ({ quickLinks }) => (
- {quickLinks.length > 0 && (

Quick Links

@@ -27,7 +25,12 @@ const HomePage = ({ quickLinks }) => ( ))}
- ) || Get Started } + ) ||
); diff --git a/ui/src/containers/HomePage.scss b/ui/src/containers/HomePage.scss index fb4f59a..db716ec 100644 --- a/ui/src/containers/HomePage.scss +++ b/ui/src/containers/HomePage.scss @@ -16,21 +16,6 @@ } } -.button--get-started { - @include border-button; - width: rem-calc(322); +.GetStartedButton { margin: 0 auto; - display: block; - padding: rem-calc(20) 0; - border: 2px dashed white; - text-align: center; - border-radius: rem-calc(50); - color: $white; - letter-spacing: rem-calc(2); - font-size: rem-calc(14); - &:hover { - color: $charcoal; - background: $mint; - border: dashed 2px $mint; - } } diff --git a/ui/src/containers/SamplePage.js b/ui/src/containers/SamplePage.js index 4e87d45..e275ae1 100644 --- a/ui/src/containers/SamplePage.js +++ b/ui/src/containers/SamplePage.js @@ -12,11 +12,14 @@ import { ViewInfoButton, CloseButton } from '../components/Buttons/'; +import Button from '../components/Buttons/Button' import { SlideInFromBottom } from '../components/Transitions'; import { toggleInfo, componentView } from '../actions'; import { getComponent, getSample, getUsed } from '../selectors'; import PropTypes from 'prop-types'; import './SamplePage.css'; +import cx from 'classnames'; + const SamplePage = ({ component, sample, ...rest }) => { if (!component) { @@ -66,8 +69,22 @@ class SampleFoundPage extends Component { } = this.props; const { problems, name } = component; const actions = [ - , - + - ); - } - return ( - - {text} - - ); -} - -const Button = (props) => ( - -); - -Button.propTypes = { - element: PropTypes.string, - icon: PropTypes.string, - text: PropTypes.string, - href: PropTypes.string, - classes: PropTypes.string, - target: PropTypes.string, -}; -Button.defaultProps = { - element: 'a', - icon: null, - text: null, - href: '#', - classes: 'Button', - target: null, - toggleStatus: null -}; - -export default Button; diff --git a/ui/src/components/Buttons/CloseButton.js b/ui/src/components/Buttons/CloseButton.js deleted file mode 100644 index 17126d3..0000000 --- a/ui/src/components/Buttons/CloseButton.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { Close } from '../Icons'; -import cx from 'classnames'; - -const CloseButton = ({ className, ...rest }) => ( - -); - -CloseButton.propTypes = { - className: PropTypes.string -}; - -export default CloseButton; diff --git a/ui/src/components/Buttons/CloseButton.md b/ui/src/components/Buttons/CloseButton.md deleted file mode 100644 index 0c40f96..0000000 --- a/ui/src/components/Buttons/CloseButton.md +++ /dev/null @@ -1,4 +0,0 @@ -Example: -```js - -``` \ No newline at end of file diff --git a/ui/src/components/Buttons/OpenWindowButton.css b/ui/src/components/Buttons/OpenWindowButton.css deleted file mode 100644 index 71668f3..0000000 --- a/ui/src/components/Buttons/OpenWindowButton.css +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Foundation for Sites by ZURB - * Version 6.5.3 - * foundation.zurb.com - * Licensed under MIT Open Source - */ -@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600,800"); -@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css"); -.OpenWindowButton i { - color: #000; - font-size: 14px; } diff --git a/ui/src/components/Buttons/OpenWindowButton.js b/ui/src/components/Buttons/OpenWindowButton.js deleted file mode 100644 index 0b4ac1a..0000000 --- a/ui/src/components/Buttons/OpenWindowButton.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import { OpenNew } from '../Icons'; -import './OpenWindowButton.css'; - -export default ({ href }) => ( - - - -); diff --git a/ui/src/components/Buttons/OpenWindowButton.md b/ui/src/components/Buttons/OpenWindowButton.md deleted file mode 100644 index 60196c9..0000000 --- a/ui/src/components/Buttons/OpenWindowButton.md +++ /dev/null @@ -1,5 +0,0 @@ -OpenWindowButton example: - -```js - -``` \ No newline at end of file diff --git a/ui/src/components/Buttons/OpenWindowButton.scss b/ui/src/components/Buttons/OpenWindowButton.scss deleted file mode 100644 index 06817a8..0000000 --- a/ui/src/components/Buttons/OpenWindowButton.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import "../../theme/base"; - -.OpenWindowButton i { - color: $black; - font-size: 14px; -} diff --git a/ui/src/components/Buttons/ViewInfoButton.css b/ui/src/components/Buttons/ViewInfoButton.css deleted file mode 100644 index 0135e22..0000000 --- a/ui/src/components/Buttons/ViewInfoButton.css +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Foundation for Sites by ZURB - * Version 6.5.3 - * foundation.zurb.com - * Licensed under MIT Open Source - */ -@import url("https://fonts.googleapis.com/css?family=Montserrat:400,600,800"); -@import url("https://use.fontawesome.com/releases/v5.8.1/css/all.css"); -.ViewInfoButton { - font-size: 14px; - font-weight: 800; - letter-spacing: 2px; - text-transform: uppercase; } - .ViewInfoButton:hover, .ViewInfoButton.active-true { - background: #292F36; - color: #fffffe; } diff --git a/ui/src/components/Buttons/ViewInfoButton.js b/ui/src/components/Buttons/ViewInfoButton.js deleted file mode 100644 index 8be19d4..0000000 --- a/ui/src/components/Buttons/ViewInfoButton.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import './ViewInfoButton.css'; - -const ViewInfoButton = props => ( - -); - -ViewInfoButton.propTypes = { - onClick: PropTypes.func -}; - -export default ViewInfoButton; diff --git a/ui/src/components/Buttons/ViewInfoButton.md b/ui/src/components/Buttons/ViewInfoButton.md deleted file mode 100644 index 0ff589d..0000000 --- a/ui/src/components/Buttons/ViewInfoButton.md +++ /dev/null @@ -1,4 +0,0 @@ -Example: -```js - -``` \ No newline at end of file diff --git a/ui/src/components/Buttons/ViewInfoButton.scss b/ui/src/components/Buttons/ViewInfoButton.scss deleted file mode 100644 index b902eb1..0000000 --- a/ui/src/components/Buttons/ViewInfoButton.scss +++ /dev/null @@ -1,11 +0,0 @@ -@import "../../theme/base"; - -.ViewInfoButton { - @include font-bold; - // @include border-button; - - &:hover, &.active-true, { - background: $charcoal; - color: $white; - } -} diff --git a/ui/src/components/Buttons/index.js b/ui/src/components/Buttons/index.js index 68550d7..afb3663 100644 --- a/ui/src/components/Buttons/index.js +++ b/ui/src/components/Buttons/index.js @@ -1,5 +1,58 @@ -import CloseButton from './CloseButton'; -import OpenWindowButton from './OpenWindowButton'; -import ViewInfoButton from './ViewInfoButton'; +import React from 'react'; +import PropTypes from 'prop-types'; +import "../../fontello/css/fontello.css" +import "./button.css"; +import cx from 'classnames'; -export { CloseButton, OpenWindowButton, ViewInfoButton }; +const Icon = (props) => { + if (!props.iconName) return null; + if (props.iconName) { + return ; + } +} + +const Element = ({ element, icon, text, href, classes, target, onClick, toggleStatus, dataSrc, dataLanguage }) => { + + if (element == 'button') { + return ( + + ); + } + return ( + + {text} + + ); +} + +const Button = (props) => ( + +); + +Button.propTypes = { + element: PropTypes.string, + icon: PropTypes.string, + text: PropTypes.string, + href: PropTypes.string, + classes: PropTypes.string, + target: PropTypes.string, +}; +Button.defaultProps = { + element: 'a', + icon: null, + text: null, + href: '#', + classes: 'Button', + target: null, + toggleStatus: null +}; + +export default Button; diff --git a/ui/src/components/ComponentInfo.js b/ui/src/components/ComponentInfo.js index edb2558..c134c19 100644 --- a/ui/src/components/ComponentInfo.js +++ b/ui/src/components/ComponentInfo.js @@ -3,7 +3,7 @@ import { Link } from 'react-router-dom'; import FetchingCodeBlock from './FetchingCodeBlock'; import PropTypes from 'prop-types'; import cx from 'classnames'; -import Button from './Buttons/Button' +import Button from './Buttons' import './ComponentInfo.css'; const ComponentInfo = ({ component, sample, used, className, controls }) => { diff --git a/ui/src/components/Icons/Close.js b/ui/src/components/Icons/Close.js deleted file mode 100644 index 7519a0b..0000000 --- a/ui/src/components/Icons/Close.js +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -// import './Icon.css'; - -const Close = ({ color }) => { - const style = color ? { fill: color, stroke: color } : {}; - return ( - - - - - - ); -}; -Close.propTypes = { - color: PropTypes.string -}; -Close.defaultProps = { - color: 'black' -}; - -export default Close; diff --git a/ui/src/components/Icons/Close.md b/ui/src/components/Icons/Close.md deleted file mode 100644 index 216abcc..0000000 --- a/ui/src/components/Icons/Close.md +++ /dev/null @@ -1,6 +0,0 @@ -Example: -```js -
- -
-``` \ No newline at end of file diff --git a/ui/src/components/Icons/CloseArrow.js b/ui/src/components/Icons/CloseArrow.js deleted file mode 100644 index ec00c0f..0000000 --- a/ui/src/components/Icons/CloseArrow.js +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -// import './Icon.css'; - -export default () => ( - - - -); diff --git a/ui/src/components/Icons/CloseArrow.md b/ui/src/components/Icons/CloseArrow.md deleted file mode 100644 index d81c08c..0000000 --- a/ui/src/components/Icons/CloseArrow.md +++ /dev/null @@ -1,6 +0,0 @@ -Example: -```js -
- -
-``` \ No newline at end of file diff --git a/ui/src/components/Icons/OpenNew.js b/ui/src/components/Icons/OpenNew.js deleted file mode 100644 index f2f2a52..0000000 --- a/ui/src/components/Icons/OpenNew.js +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; - -export default () => ( - -); diff --git a/ui/src/components/Icons/OpenNew.md b/ui/src/components/Icons/OpenNew.md deleted file mode 100644 index 02ab70d..0000000 --- a/ui/src/components/Icons/OpenNew.md +++ /dev/null @@ -1,6 +0,0 @@ -Example: -```js -
- -
-``` \ No newline at end of file diff --git a/ui/src/components/Icons/index.js b/ui/src/components/Icons/index.js index 84cb64b..de1aa8a 100644 --- a/ui/src/components/Icons/index.js +++ b/ui/src/components/Icons/index.js @@ -1,8 +1,5 @@ -import Close from './Close'; -import CloseArrow from './CloseArrow'; import MannySmall from './MannySmall'; import Loading from './Loading'; -import OpenNew from './OpenNew'; import Search from './Search'; -export { Close, CloseArrow, MannySmall, Loading, OpenNew, Search }; +export { MannySmall, Loading, Search }; diff --git a/ui/src/components/NavDrawer.css b/ui/src/components/NavDrawer.css index 5e41b65..ab61dc5 100644 --- a/ui/src/components/NavDrawer.css +++ b/ui/src/components/NavDrawer.css @@ -70,8 +70,7 @@ box-shadow: 0 0; } .SearchForm i { position: absolute; - top: 50%; + top: 25%; left: 0.9375rem; font-size: 0.8125rem; - margin-top: -.5em; color: #fffffe; } diff --git a/ui/src/components/NavDrawer.js b/ui/src/components/NavDrawer.js index 2107a2c..1994337 100644 --- a/ui/src/components/NavDrawer.js +++ b/ui/src/components/NavDrawer.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import Menu from './Menu'; import cx from 'classnames'; import { CloseArrow, Search as SearchIcon } from './Icons'; -import Button from './Buttons/Button'; +import Button from './Buttons'; import './NavDrawer.css'; export class NavDrawer extends Component { @@ -55,7 +55,7 @@ export class NavDrawer extends Component { placeholder="Search..." onKeyUp={this.handleFilterChange} /> - + diff --git a/ui/src/components/NavDrawer.scss b/ui/src/components/NavDrawer.scss index 47cf29a..d1dfa98 100644 --- a/ui/src/components/NavDrawer.scss +++ b/ui/src/components/NavDrawer.scss @@ -61,10 +61,9 @@ } i { position: absolute; - top: 50%; + top: 25%; left: rem-calc(15); font-size: rem-calc(13); - margin-top: -.5em; color: $white; } } diff --git a/ui/src/components/TopBar.js b/ui/src/components/TopBar.js index d2824a1..33bf8a5 100644 --- a/ui/src/components/TopBar.js +++ b/ui/src/components/TopBar.js @@ -2,7 +2,7 @@ import React from 'react'; import { Link } from 'react-router-dom'; import PropTypes from 'prop-types'; import { MannySmall } from './Icons'; -import Button from './Buttons/Button' +import Button from './Buttons' import './TopBar.css'; const TopBar = ({ toggleNav }) => { diff --git a/ui/src/containers/HomePage.js b/ui/src/containers/HomePage.js index 0594563..6630b59 100644 --- a/ui/src/containers/HomePage.js +++ b/ui/src/containers/HomePage.js @@ -5,8 +5,7 @@ import Branding from '../components/Branding'; import { getQuicklinks } from '../selectors'; import Card from '../components/Card'; import PropTypes from 'prop-types'; -import { OpenNew } from '../components/Icons'; -import Button from '../components/Buttons/Button'; +import Button from '../components/Buttons'; const HomePage = ({ quickLinks }) => (
diff --git a/ui/src/containers/SamplePage.js b/ui/src/containers/SamplePage.js index e275ae1..f394ac5 100644 --- a/ui/src/containers/SamplePage.js +++ b/ui/src/containers/SamplePage.js @@ -12,7 +12,7 @@ import { ViewInfoButton, CloseButton } from '../components/Buttons/'; -import Button from '../components/Buttons/Button' +import Button from '../components/Buttons' import { SlideInFromBottom } from '../components/Transitions'; import { toggleInfo, componentView } from '../actions'; import { getComponent, getSample, getUsed } from '../selectors'; diff --git a/ui/src/fontello/LICENSE.txt b/ui/src/fontello/LICENSE.txt old mode 100644 new mode 100755 diff --git a/ui/src/fontello/README.txt b/ui/src/fontello/README.txt old mode 100644 new mode 100755 diff --git a/ui/src/fontello/config.json b/ui/src/fontello/config.json old mode 100644 new mode 100755 index e970f6d..d417912 --- a/ui/src/fontello/config.json +++ b/ui/src/fontello/config.json @@ -36,6 +36,12 @@ "code": 61582, "src": "fontawesome" }, + { + "uid": "9dd9e835aebe1060ba7190ad2b2ed951", + "css": "search", + "code": 59395, + "src": "fontawesome" + }, { "uid": "d1e828c2c23a6baf620f3175bfab47cf", "css": "menu", diff --git a/ui/src/fontello/css/animation.css b/ui/src/fontello/css/animation.css old mode 100644 new mode 100755 diff --git a/ui/src/fontello/css/fontello-codes.css b/ui/src/fontello/css/fontello-codes.css old mode 100644 new mode 100755 index 181a377..3c3f477 --- a/ui/src/fontello/css/fontello-codes.css +++ b/ui/src/fontello/css/fontello-codes.css @@ -2,5 +2,6 @@ .icon-close:before { content: '\e800'; } /* '' */ .icon-expand:before { content: '\e801'; } /* '' */ .icon-collapse:before { content: '\e802'; } /* '' */ +.icon-search:before { content: '\e803'; } /* '' */ .icon-new-window:before { content: '\f08e'; } /* '' */ .icon-menu:before { content: '\f0c9'; } /* '' */ \ No newline at end of file diff --git a/ui/src/fontello/css/fontello-embedded.css b/ui/src/fontello/css/fontello-embedded.css old mode 100644 new mode 100755 index d9de540..900edf0 --- a/ui/src/fontello/css/fontello-embedded.css +++ b/ui/src/fontello/css/fontello-embedded.css @@ -1,15 +1,15 @@ @font-face { font-family: 'fontello'; - src: url('../font/fontello.eot?49847159'); - src: url('../font/fontello.eot?49847159#iefix') format('embedded-opentype'), - url('../font/fontello.svg?49847159#fontello') format('svg'); + src: url('../font/fontello.eot?51134734'); + src: url('../font/fontello.eot?51134734#iefix') format('embedded-opentype'), + url('../font/fontello.svg?51134734#fontello') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'fontello'; - src: url('data:application/octet-stream;base64,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') format('woff'), - url('data:application/octet-stream;base64,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sAQlYGQjsAMlYGRQWCEbIyFZIyAgsAQmI0ZhOFktsDcssAAWICAgsAUmIC5HI0cjYSM8OC2wOCywABYgsAgjQiAgIEYjR7ABKyNhOC2wOSywABawAyWwAiVHI0cjYbAAVFguIDwjIRuwAiWwAiVHI0cjYSCwBSWwBCVHI0cjYbAGJbAFJUmwAiVhuQgACABjYyMgWGIbIVljuAQAYiCwAFBYsEBgWWawAWNgIy4jICA8ijgjIVktsDossAAWILAIQyAuRyNHI2EgYLAgYGawAmIgsABQWLBAYFlmsAFjIyAgPIo4LbA7LCMgLkawAiVGUlggPFkusSsBFCstsDwsIyAuRrACJUZQWCA8WS6xKwEUKy2wPSwjIC5GsAIlRlJYIDxZIyAuRrACJUZQWCA8WS6xKwEUKy2wPiywNSsjIC5GsAIlRlJYIDxZLrErARQrLbA/LLA2K4ogIDywBCNCijgjIC5GsAIlRlJYIDxZLrErARQrsARDLrArKy2wQCywABawBCWwBCYgLkcjRyNhsAlDKyMgPCAuIzixKwEUKy2wQSyxCAQlQrAAFrAEJbAEJSAuRyNHI2EgsAQjQrAJQysgsGBQWCCwQFFYswIgAyAbswImAxpZQkIjIEewBEOwAmIgsABQWLBAYFlmsAFjYCCwASsgiophILACQ2BkI7ADQ2FkUFiwAkNhG7ADQ2BZsAMlsAJiILAAUFiwQGBZZrABY2GwAiVGYTgjIDwjOBshICBGI0ewASsjYTghWbErARQrLbBCLLA1Ky6xKwEUKy2wQyywNishIyAgPLAEI0IjOLErARQrsARDLrArKy2wRCywABUgR7AAI0KyAAEBFRQTLrAxKi2wRSywABUgR7AAI0KyAAEBFRQTLrAxKi2wRiyxAAEUE7AyKi2wRyywNCotsEgssAAWRSMgLiBGiiNhOLErARQrLbBJLLAII0KwSCstsEossgAAQSstsEsssgABQSstsEwssgEAQSstsE0ssgEBQSstsE4ssgAAQistsE8ssgABQistsFAssgEAQistsFEssgEBQistsFIssgAAPistsFMssgABPistsFQssgEAPistsFUssgEBPistsFYssgAAQCstsFcssgABQCstsFgssgEAQCstsFkssgEBQCstsFossgAAQystsFsssgABQystsFwssgEAQystsF0ssgEBQystsF4ssgAAPystsF8ssgABPystsGAssgEAPystsGEssgEBPystsGIssDcrLrErARQrLbBjLLA3K7A7Ky2wZCywNyuwPCstsGUssAAWsDcrsD0rLbBmLLA4Ky6xKwEUKy2wZyywOCuwOystsGgssDgrsDwrLbBpLLA4K7A9Ky2waiywOSsusSsBFCstsGsssDkrsDsrLbBsLLA5K7A8Ky2wbSywOSuwPSstsG4ssDorLrErARQrLbBvLLA6K7A7Ky2wcCywOiuwPCstsHEssDorsD0rLbByLLMJBAIDRVghGyMhWUIrsAhlsAMkUHiwARUwLQBLuADIUlixAQGOWbABuQgACABjcLEABUKyAAEAKrEABUKzCgIBCCqxAAVCsw4AAQgqsQAGQroCwAABAAkqsQAHQroAQAABAAkqsQMARLEkAYhRWLBAiFixA2REsSYBiFFYugiAAAEEQIhjVFixAwBEWVlZWbMMAgEMKrgB/4WwBI2xAgBEAAA=') format('truetype'); + src: url('data:application/octet-stream;base64,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') format('woff'), + url('data:application/octet-stream;base64,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') format('truetype'); } /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */ /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */ @@ -17,7 +17,7 @@ @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: 'fontello'; - src: url('../font/fontello.svg?49847159#fontello') format('svg'); + src: url('../font/fontello.svg?51134734#fontello') format('svg'); } } */ @@ -55,5 +55,6 @@ .icon-close:before { content: '\e800'; } /* '' */ .icon-expand:before { content: '\e801'; } /* '' */ .icon-collapse:before { content: '\e802'; } /* '' */ +.icon-search:before { content: '\e803'; } /* '' */ .icon-new-window:before { content: '\f08e'; } /* '' */ .icon-menu:before { content: '\f0c9'; } /* '' */ \ No newline at end of file diff --git a/ui/src/fontello/css/fontello-ie7-codes.css b/ui/src/fontello/css/fontello-ie7-codes.css old mode 100644 new mode 100755 index 0d4d3f4..eb78a48 --- a/ui/src/fontello/css/fontello-ie7-codes.css +++ b/ui/src/fontello/css/fontello-ie7-codes.css @@ -2,5 +2,6 @@ .icon-close { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } .icon-expand { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } .icon-collapse { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } +.icon-search { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } .icon-new-window { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } .icon-menu { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } \ No newline at end of file diff --git a/ui/src/fontello/css/fontello-ie7.css b/ui/src/fontello/css/fontello-ie7.css old mode 100644 new mode 100755 index 16d140e..4c17804 --- a/ui/src/fontello/css/fontello-ie7.css +++ b/ui/src/fontello/css/fontello-ie7.css @@ -13,5 +13,6 @@ .icon-close { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } .icon-expand { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } .icon-collapse { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } +.icon-search { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } .icon-new-window { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } .icon-menu { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } \ No newline at end of file diff --git a/ui/src/fontello/css/fontello.css b/ui/src/fontello/css/fontello.css old mode 100644 new mode 100755 index 6f87b82..cb96d5a --- a/ui/src/fontello/css/fontello.css +++ b/ui/src/fontello/css/fontello.css @@ -1,11 +1,11 @@ @font-face { font-family: 'fontello'; - src: url('../font/fontello.eot?80524244'); - src: url('../font/fontello.eot?80524244#iefix') format('embedded-opentype'), - url('../font/fontello.woff2?80524244') format('woff2'), - url('../font/fontello.woff?80524244') format('woff'), - url('../font/fontello.ttf?80524244') format('truetype'), - url('../font/fontello.svg?80524244#fontello') format('svg'); + src: url('../font/fontello.eot?59602837'); + src: url('../font/fontello.eot?59602837#iefix') format('embedded-opentype'), + url('../font/fontello.woff2?59602837') format('woff2'), + url('../font/fontello.woff?59602837') format('woff'), + url('../font/fontello.ttf?59602837') format('truetype'), + url('../font/fontello.svg?59602837#fontello') format('svg'); font-weight: normal; font-style: normal; } @@ -15,7 +15,7 @@ @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: 'fontello'; - src: url('../font/fontello.svg?80524244#fontello') format('svg'); + src: url('../font/fontello.svg?59602837#fontello') format('svg'); } } */ @@ -58,5 +58,6 @@ .icon-close:before { content: '\e800'; } /* '' */ .icon-expand:before { content: '\e801'; } /* '' */ .icon-collapse:before { content: '\e802'; } /* '' */ +.icon-search:before { content: '\e803'; } /* '' */ .icon-new-window:before { content: '\f08e'; } /* '' */ .icon-menu:before { content: '\f0c9'; } /* '' */ \ No newline at end of file diff --git a/ui/src/fontello/demo.html b/ui/src/fontello/demo.html old mode 100644 new mode 100755 index a4f5fc5..1b44d22 --- a/ui/src/fontello/demo.html +++ b/ui/src/fontello/demo.html @@ -229,11 +229,11 @@ } @font-face { font-family: 'fontello'; - src: url('./font/fontello.eot?2458697'); - src: url('./font/fontello.eot?2458697#iefix') format('embedded-opentype'), - url('./font/fontello.woff?2458697') format('woff'), - url('./font/fontello.ttf?2458697') format('truetype'), - url('./font/fontello.svg?2458697#fontello') format('svg'); + src: url('./font/fontello.eot?53950484'); + src: url('./font/fontello.eot?53950484#iefix') format('embedded-opentype'), + url('./font/fontello.woff?53950484') format('woff'), + url('./font/fontello.ttf?53950484') format('truetype'), + url('./font/fontello.svg?53950484#fontello') format('svg'); font-weight: normal; font-style: normal; } @@ -301,9 +301,10 @@

fontello font demo

icon-close0xe800
icon-expand0xe801
icon-collapse0xe802
-
icon-new-window0xf08e
+
icon-search0xe803
+
icon-new-window0xf08e
icon-menu0xf0c9
diff --git a/ui/src/fontello/font/fontello.eot b/ui/src/fontello/font/fontello.eot old mode 100644 new mode 100755 index c632c405bf67e8cabc8fd3b7b446c21f98ee67a7..a70ab0da547b5ae97c343166de53f27b13d5b4ba GIT binary patch delta 728 zcmX|8O=uHA6n<}Jvm28BsYye%w&@R|CbpN-Lx~|3idYnSkYW)rOR`NYyPKt{Hd?S~ zZyH0pON$6X6%QVjTzV)3p$e8Lxd>8(5<%!is8CNv*S85eyKmoo-}kXo5$VuPtYli?Ns)yk;5mJPcU&<5iPiu3z zKyA{tiFidsr+vg zajI0<>>g>v$D4tA?plIv}Y4Y2fu)n6if&)Iop<@ost;z#g~q?3lj=T8Kkp zIO#4B35eDkRsVu;YC4>;8@9z_fsZY+kPx|%h71`WOcjHqnE5{84vH#U07Z&q_%BqJSoK@u6MB1Y(^JnI7=*i5ypeg#z;!$sJ(_d)0vpoO+ delta 568 zcmYk3O=uHA6vzK>XLk~_!4E94pkNdc#I~O7L8|CQ@Z%r_YeYep%_Onx$6!_yMd-bX zn5;(yK?FVL;vpiEQ$(c*ig?OJ$;~2qs=B`29(0!X@%z6wJ8zgD2l_K|ZX0mF)RD7h zw=x)Zj^18+0nix$3$E|z*H56CpRzr7uSaG1Au)l%Ev}bqy6!J`?wx0T0NA?jG`Sa> znIn$*x_6`IejS_u#AUYQ4dqlPet%v8B>xYy4Hj~TMTL39yrt|l50r}W zBf3B;{zdhD9*CjtYgY2KvXjQmJT!$GBcY174aiFS!B=sNy2`8`mC5anO4M>|14#GmTa9w7kxTHkC}+?0NGp4+v1=k vg9Mpmk)#|f*9)6Us + + diff --git a/ui/src/fontello/font/fontello.ttf b/ui/src/fontello/font/fontello.ttf old mode 100644 new mode 100755 index 8ecc7ab64812767eec3963d5b47342a2d33272ce..dd4c181c6ce56e5e332af3aa4a97d0a99ac67aff GIT binary patch delta 708 zcmX|8O=uHQ5T1E&vl|mrtIZFE+N4boF=+%T9!dzUP{e}JLoJGkS&~hbvYRYTlxPn@ zdy^Q_#1;_*6%QVjTzV+vQiYZ%xhNunR1k6z;z1CsuCodCy&Y!0@0;)K`*|?YidKWA z*8n&V0EqSN`zlfyh+|H1jP5I0N|V?J&-ms`n|R46~YS?Mn=vX#1B#(p={4+ zx6)!!5@%*c*$SL=qYexYj>W8x`5mJnkUn&z0sd}O4+g~(IB3=?PqUDk@tMU7U zTZ9L7xoE(ivrYIj;Xqc_mDXeb7~y>Y_SVSd3$Ir1kmj)Z6UMS)e47bx0eH99eqBYq zzJQraSwIp2RN%cTLfJv*%Ypzg;_WmUK!2A0PrW68tunOw(NAPq~X$9)s}oNk1YCAV+rI z@}d9<`WI)&6Tp~@UGN3nL&t2k;V@1{QFMFbh;DKGG>XCTD2ofD%;%PTUbb3m*XYC1 z$dtR8TA8n@(=4V{o>#OO&Ne-GH&bI9yAQ?T^4~|tPkEZN@uljsN_I*(m)^Lzl4^RO z@j>{6fxVgSFV~O6eu9&CtP_6xUEVy%*4FE7ab%7PljQ#0T55ktmW9)s|BolVKCs@s zH|C%QTj;@UCnTivqJTCOQ9?V|l3FgWh)U6rvnhKrr)jc5IIqadNwqFJ Lh8i~<{=@$OA*ruW delta 538 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 diff --git a/ui/src/fontello/font/fontello.woff2 b/ui/src/fontello/font/fontello.woff2 old mode 100644 new mode 100755 index a7cc98af97d00324a143abdd805aa9b4578f7f00..1d9691dd7c4db7a8760f3d34dfe54c2bd56a7b46 GIT binary patch literal 2800 zcmV*nPew8T0RR9101EH`4*&oF02fRE01BA^0RR9100000000000000000000 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 Jd3lo21P5nT@jn0n diff --git a/ui/src/svg/arrow_icon.svg b/ui/src/svg/arrow_icon.svg deleted file mode 100644 index 4707b2f..0000000 --- a/ui/src/svg/arrow_icon.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - diff --git a/ui/src/svg/burger_icon.svg b/ui/src/svg/burger_icon.svg deleted file mode 100644 index 47e8079..0000000 --- a/ui/src/svg/burger_icon.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - diff --git a/ui/src/svg/close_icon.svg b/ui/src/svg/close_icon.svg deleted file mode 100644 index f130f58..0000000 --- a/ui/src/svg/close_icon.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - diff --git a/ui/src/svg/new-tab_Icon.svg b/ui/src/svg/new-tab_Icon.svg deleted file mode 100644 index 6715f60..0000000 --- a/ui/src/svg/new-tab_Icon.svg +++ /dev/null @@ -1,21 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/ui/src/svg/search_icon.svg b/ui/src/svg/search_icon.svg deleted file mode 100644 index b5be375..0000000 --- a/ui/src/svg/search_icon.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - From d4b234ff735f6308f4b01178c7b8e4fa2e49d831 Mon Sep 17 00:00:00 2001 From: Saurabh Vijayvargiya Date: Wed, 16 Jun 2021 19:05:34 +0530 Subject: [PATCH 26/29] Added phpstorm` .idea folder to gitignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index fd2e960..c339d32 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ vendor/ /cache/ composer.lock .php_cs.cache +.idea \ No newline at end of file From ff46aa1f880a6d3031d6a09877a396fd6df35b61 Mon Sep 17 00:00:00 2001 From: Saurabh Vijayvargiya Date: Wed, 16 Jun 2021 19:08:08 +0530 Subject: [PATCH 27/29] Corrections to js files as per the test suggestions --- ui/src/components/Buttons/index.js | 3 +-- ui/src/components/NavDrawer.js | 1 - ui/src/containers/HomePage.js | 4 ++-- ui/src/containers/SamplePage.js | 5 ----- 4 files changed, 3 insertions(+), 10 deletions(-) diff --git a/ui/src/components/Buttons/index.js b/ui/src/components/Buttons/index.js index afb3663..91fc6ec 100644 --- a/ui/src/components/Buttons/index.js +++ b/ui/src/components/Buttons/index.js @@ -2,7 +2,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import "../../fontello/css/fontello.css" import "./button.css"; -import cx from 'classnames'; const Icon = (props) => { if (!props.iconName) return null; @@ -13,7 +12,7 @@ const Icon = (props) => { const Element = ({ element, icon, text, href, classes, target, onClick, toggleStatus, dataSrc, dataLanguage }) => { - if (element == 'button') { + if (element === 'button') { return (