diff --git a/.circleci/config.yml b/.circleci/config.yml index 63e8eff..d32ec06 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -16,7 +16,7 @@ jobs: COMMIT_RANGE=`echo $CIRCLE_COMPARE_URL | cut -d/ -f7` CHANGED_FILES=$(git diff --name-only --diff-filter=ACMRTUXB "${COMMIT_RANGE}") if ! echo "${CHANGED_FILES}" | grep -qE "^(\\.php_cs(\\.dist)?|composer\\.lock)$"; then IFS=$'\n' EXTRA_ARGS=('--path-mode=intersection' '--' ${CHANGED_FILES[@]}); fi - vendor/bin/php-cs-fixer fix --config=.php_cs.dist -v --dry-run --stop-on-violation --using-cache=no "${EXTRA_ARGS[@]}" + vendor/bin/php-cs-fixer fix --config=.php-cs-fixer.dist.php -v --dry-run --stop-on-violation --using-cache=no "${EXTRA_ARGS[@]}" - run: | composer validate for dir in src/*; do @@ -69,7 +69,7 @@ jobs: test_ui: working_directory: /srv docker: - - image: node:11 + - image: node:12 steps: - checkout - restore_cache: @@ -105,7 +105,7 @@ jobs: build_site: working_directory: /srv - docker: [image: "node:11"] + docker: [image: "node:12"] steps: - checkout - restore_cache: { key: 'site-package-v4-{{ checksum "site/package.json" }}' } @@ -133,7 +133,7 @@ jobs: deploy_ui: working_directory: /srv docker: - - image: node:11 + - image: node:12 steps: - checkout - attach_workspace: 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 diff --git a/.php_cs.dist b/.php-cs-fixer.dist.php similarity index 93% rename from .php_cs.dist rename to .php-cs-fixer.dist.php index d791f7c..7253978 100644 --- a/.php_cs.dist +++ b/.php-cs-fixer.dist.php @@ -17,7 +17,8 @@ new \SplFileInfo(__DIR__.'/demo/.mannequin.php'), ])); -return PhpCsFixer\Config::create() +$config = new PhpCsFixer\Config(); +return $config ->setRiskyAllowed(true) ->setRules([ '@Symfony' => true, 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/site/src/scss/_variables.scss deleted file mode 100644 index 81f45f1..0000000 --- a/site/src/scss/_variables.scss +++ /dev/null @@ -1,30 +0,0 @@ -//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; - -$body-background: $white; -$body-font-color: $black; - -//Site fonts -$header-font-family: gill sans, sans-serif; -$body-font-family: Helvetica, sans-serif; -$impact-font-family: $header-font-family; - -$grid-container: 1280px; -$grid-container-padding: 0; - -$code-background: #FBFBFB; -$code-color: #080808; -$code-border: 1px solid #E9E9E9;; -$code-padding: 0 .125rem; - diff --git a/theme/_base.scss b/theme/_base.scss new file mode 100644 index 0000000..496bb8b --- /dev/null +++ b/theme/_base.scss @@ -0,0 +1,2 @@ +@import "../node_modules/foundation-sites/scss/foundation"; +@import "./variables"; 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 new file mode 100644 index 0000000..6dc9146 --- /dev/null +++ b/theme/_variables.scss @@ -0,0 +1,43 @@ +//Theme colors + +$black: #000; +$charcoal: #292F36; +$ash: #4F545A; +$storm: #546267; +$seafoam: #649490; +$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,600,800'); + +//Site Icons +@import url('https://use.fontawesome.com/releases/v5.8.1/css/all.css'); + +$header-font-family: 'Montserrat', sans-serif; +$body-font-family: $header-font-family, sans-serif; +$impact-font-family: $header-font-family, sans-serif; +$font-family-monospace: Menlo, Consolas, 'Liberation Mono', Courier, monospace; + +$grid-container: 1440px; +$grid-container-padding: 0; + +$code-background: $eggshell; +$code-color: $storm; +$code-border: 0; +$code-padding: 0 .125rem; +$code-font-family: $font-family-monospace; + + +//Mixins + +@mixin font-bold { + font-size: 14px; + font-weight: 800; + letter-spacing: 2px; + text-transform: uppercase; +} 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 index fda9d05..cea70bc 100644 --- a/ui/src/components/Branding.css +++ b/ui/src/components/Branding.css @@ -1,81 +1,57 @@ /** * Foundation for Sites by ZURB - * Version 6.4.3 + * 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 { - padding-right: 0.625rem; - padding-left: 0.625rem; - max-width: 75rem; - margin: 0 auto; } + margin-left: 0.625rem; + margin-right: 0.625rem; + display: grid; + margin: 0 auto; + align-items: center; } @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; } + margin-left: 0.9375rem; + margin-right: 0.9375rem; } } + +.Branding img { + grid-column: 1 / 1; + 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; + padding-left: 15px; } + @media print, screen and (min-width: 40em) { + .Branding__Text { + padding-left: 30px; } } + +.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: 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; } + 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.js b/ui/src/components/Branding.js index d6a966e..ac879b0 100644 --- a/ui/src/components/Branding.js +++ b/ui/src/components/Branding.js @@ -8,13 +8,11 @@ import './Branding.css'; */ const Branding = () => (
-
- Mannequin Logo + Mannequin Logo +

Mannequin

-
-

- A Component Theming Tool for the Web -

+ Component Theming Tool +
); 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/Branding.scss b/ui/src/components/Branding.scss index 4cb595b..c46d929 100644 --- a/ui/src/components/Branding.scss +++ b/ui/src/components/Branding.scss @@ -1,65 +1,51 @@ +@import "../../theme/_base"; -@import "../base"; +.Branding { + @include xy-gutters($gutter-position: left right); + display: grid; + margin: 0 auto; + align-items: center; +} -@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 img { + grid-column: 1 / 1; + 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 { - @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; +.Branding__Text { + grid-column: 2 / 2; + padding-left: 15px; + @include breakpoint(medium) { + padding-left: 30px; } - @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); - } +} + +.Branding h1 { + text-transform: uppercase; + font-weight: 800; + font-size: 40px; + line-height: 2rem; + @include breakpoint(medium) { + font-size: 60px; + letter-spacing: 3.5px; + line-height: 3rem; } - .top { - display: flex; - justify-content: center; - .logo, h1 { - flex: 0 0 auto; - } +} + +.Branding span { + font-size: 12px; + text-transform: uppercase; + letter-spacing: 2.7px; + font-weight: 400; + @include breakpoint(medium) { + font-size: 15px; } -} \ 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 8ab81e2..0000000 --- a/ui/src/components/Buttons/CloseButton.css +++ /dev/null @@ -1,18 +0,0 @@ -/** - * Foundation for Sites by ZURB - * Version 6.4.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 deleted file mode 100644 index 6b67f15..0000000 --- a/ui/src/components/Buttons/CloseButton.js +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { Close } from '../Icons'; -import cx from 'classnames'; -import './CloseButton.css'; - -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/CloseButton.scss b/ui/src/components/Buttons/CloseButton.scss deleted file mode 100644 index e322b1a..0000000 --- a/ui/src/components/Buttons/CloseButton.scss +++ /dev/null @@ -1,19 +0,0 @@ - -@import "../../base"; - -.CloseButton { - background: white; - border: 1px solid #ECEAEA; - border-radius: 2em; - color: black; - text-align:center; - padding: rem-calc(6); - text-decoration: none; - display:flex; - cursor: pointer; - - .Close { - width: rem-calc(18); - - } -} \ No newline at end of file diff --git a/ui/src/components/Buttons/OpenWindowButton.js b/ui/src/components/Buttons/OpenWindowButton.js deleted file mode 100644 index 6cf5f8e..0000000 --- a/ui/src/components/Buttons/OpenWindowButton.js +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import { OpenNew } from '../Icons'; - -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/ViewInfoButton.css b/ui/src/components/Buttons/ViewInfoButton.css deleted file mode 100644 index 9c69425..0000000 --- a/ui/src/components/Buttons/ViewInfoButton.css +++ /dev/null @@ -1,32 +0,0 @@ -/** - * Foundation for Sites by ZURB - * Version 6.4.3 - * foundation.zurb.com - * Licensed under MIT Open Source - */ -.ViewInfoButton { - 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-size: 0.9rem; - line-height: 1; - text-align: center; - cursor: pointer; - background-color: black; - color: #fefefe; - font-size: 0.5rem; - line-height: 0.625rem; - text-transform: uppercase; - font-weight: bold; - color: #FFFFFF; } - [data-whatinput='mouse'] .ViewInfoButton { - outline: 0; } - .ViewInfoButton:hover, .ViewInfoButton:focus { - background-color: black; - color: #fefefe; } diff --git a/ui/src/components/Buttons/ViewInfoButton.js b/ui/src/components/Buttons/ViewInfoButton.js deleted file mode 100644 index d3c381f..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 c7ae1f6..0000000 --- a/ui/src/components/Buttons/ViewInfoButton.scss +++ /dev/null @@ -1,11 +0,0 @@ - -@import "../../base"; - -.ViewInfoButton { - @include button($background: black, $background-hover: black); - font-size: rem-calc(8); - line-height: rem-calc(10); - text-transform:uppercase; - font-weight: bold; - color: #FFFFFF; -} \ No newline at end of file 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/Buttons/index.js b/ui/src/components/Buttons/index.js index 68550d7..91fc6ec 100644 --- a/ui/src/components/Buttons/index.js +++ b/ui/src/components/Buttons/index.js @@ -1,5 +1,57 @@ -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"; -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/Card.css b/ui/src/components/Card.css index 4109b55..6e8a4c3 100644 --- a/ui/src/components/Card.css +++ b/ui/src/components/Card.css @@ -1,32 +1,31 @@ /** * Foundation for Sites by ZURB - * Version 6.4.3 + * 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"); .Card { - border: 1px dashed #7E92A5; - 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 1e381bc..d5a985a 100644 --- a/ui/src/components/Card.scss +++ b/ui/src/components/Card.scss @@ -1,36 +1,37 @@ - -@import "../base"; +@import "../../theme/_base"; .Card { - border: 1px dashed $dashed-border-color; - 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 { @@ -46,4 +47,4 @@ @include xy-cell(1/4); } } -} \ No newline at end of file +} diff --git a/ui/src/components/CodeBlock.js b/ui/src/components/CodeBlock.js index 7c04d19..7064a9a 100644 --- a/ui/src/components/CodeBlock.js +++ b/ui/src/components/CodeBlock.js @@ -4,7 +4,7 @@ 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); registerLanguage('html', xml); @@ -12,7 +12,7 @@ registerLanguage('html', xml); const CodeBlock = ({ language, children }) => ( {children} diff --git a/ui/src/components/CodeStyle.js b/ui/src/components/CodeStyle.js new file mode 100644 index 0000000..8c6eef7 --- /dev/null +++ b/ui/src/components/CodeStyle.js @@ -0,0 +1,99 @@ +export default { + "hljs": { + "display": "block", + "overflowX": "auto", + "padding": "20px", + "background": "#EBECEC", + "color": "#546267", + "font-size": "12px" + }, + "hljs-link": { + "color": "#070" + }, + "hljs-emphasis": { + "color": "#070", + "fontStyle": "italic" + }, + "hljs-attribute": { + "color": "#070" + }, + "hljs-addition": { + "color": "#070" + }, + "hljs-strong": { + "color": "#d14", + "fontWeight": "bold" + }, + "hljs-string": { + "color": "#546267" + }, + "hljs-deletion": { + "color": "#d14" + }, + "hljs-quote": { + "color": "#998", + "fontStyle": "italic" + }, + "hljs-comment": { + "color": "#998", + "fontStyle": "italic" + }, + "hljs-section": { + "color": "brightgreen" + }, + "hljs-title": { + "color": "gray" + }, + "hljs-class .hljs-title": { + "color": "#458" + }, + "hljs-type": { + "color": "#458" + }, + "hljs-variable": { + "color": "#336699" + }, + "hljs-template-variable": { + "color": "#336699" + }, + "hljs-bullet": { + "color": "#997700" + }, + "hljs-meta": { + "color": "#3344bb" + }, + "hljs-code": { + "color": "#099" + }, + "hljs-number": { + "color": "#099" + }, + "hljs-literal": { + "color": "#099" + }, + "hljs-keyword": { + "color": "#099" + }, + "hljs-selector-tag": { + "color": "#099" + }, + "hljs-regexp": { + "backgroundColor": "#fff0ff", + "color": "#880088" + }, + "hljs-symbol": { + "color": "purple" + }, + "hljs-tag": { + "color": "#546267" + }, + "hljs-name": { + "color": "#02756d" + }, + "hljs-selector-id": { + "color": "orange" + }, + "hljs-selector-class": { + "color": "blue" + } +} diff --git a/ui/src/components/ComponentInfo.css b/ui/src/components/ComponentInfo.css index 789476b..bbe01dd 100644 --- a/ui/src/components/ComponentInfo.css +++ b/ui/src/components/ComponentInfo.css @@ -1,106 +1,83 @@ /** * Foundation for Sites by ZURB - * Version 6.4.3 + * 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"); .ComponentInfo { overflow-y: auto; } + .ComponentInfo a { + color: #fffffe; + border-bottom: solid 1px #4ECDC4; } + .ComponentInfo a:hover { + color: #4ECDC4; + border-bottom: 0; } .ComponentInfo .inner { - background: #181D22; - padding-right: 0.625rem; - padding-left: 0.625rem; - max-width: 75rem; - margin: 0 auto; - display: flex; - flex-flow: row wrap; - position: relative; } - @media print, screen and (min-width: 40em) { - .ComponentInfo .inner { - padding-right: 0.9375rem; - padding-left: 0.9375rem; } } - @media print, screen and (min-width: 64em) { - .ComponentInfo .inner { - padding-right: 0.9375rem; - padding-left: 0.9375rem; } } - @media screen and (min-width: 75em) { - .ComponentInfo .inner { - padding-right: 0.9375rem; - padding-left: 0.9375rem; } } - @media screen and (min-width: 90em) { - .ComponentInfo .inner { - padding-right: 0.9375rem; - padding-left: 0.9375rem; } } - .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: 16px; - right: 16px; - z-index: 2; } + background: #292F36; + position: relative; + 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 { - color: white; } - .ComponentInfo .info a { - color: inherit; } - .ComponentInfo .info h3 { - font-weight: bold; - text-transform: uppercase; - font-size: 1.125rem; - line-height: 1.375rem; } + font-size: 1rem; + color: #fffffe; } .ComponentInfo .info h4 { - font-size: 0.625rem; - line-height: 1.875rem; - font-weight: bold; - color: #767676; } + font-weight: 600; + font-size: 1rem; } .ComponentInfo .info p { - font-size: 0.875rem; line-height: 1.875rem; } - .ComponentInfo .code { - position: relative; } - .ComponentInfo .code .button-group { - position: absolute; - bottom: 1rem; - right: 1rem; } - .ComponentInfo .code .button { - margin-bottom: 0; } + .ComponentInfo .code .button-group { + 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 { - 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-size: 0.9rem; - line-height: 1; - text-align: center; - cursor: pointer; - background-color: #767676; - color: #fefefe; } - [data-whatinput='mouse'] .CodeButton { - outline: 0; } - .CodeButton:hover, .CodeButton:focus { - background-color: #5e5e5e; - color: #fefefe; } - .CodeButton.active { - background-color: #1779ba; - color: #fefefe; } - .CodeButton.active:hover, .CodeButton.active:focus { - background-color: #126195; - color: #fefefe; } + position: relative; + z-index: 1; } + +.ComponentInfo .controls .CloseButton { + 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 a4cb9a1..c134c19 100644 --- a/ui/src/components/ComponentInfo.js +++ b/ui/src/components/ComponentInfo.js @@ -3,24 +3,30 @@ import { Link } from 'react-router-dom'; import FetchingCodeBlock from './FetchingCodeBlock'; import PropTypes from 'prop-types'; import cx from 'classnames'; +import Button from './Buttons' import './ComponentInfo.css'; const ComponentInfo = ({ component, sample, used, className, controls }) => { return (
-
{controls}
- - +
+
{component.name}
+
{controls}
+
+
+ + +
); @@ -36,14 +42,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} @@ -128,30 +133,32 @@ class ComponentInfoCode extends Component { {src && }
{sample && ( - - HTML - + dataSrc={sample.source} + dataLanguage={'html'} + text="HTML" + element="button" + /> )} {component && ( - - Raw - + 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 a555730..180043e 100644 --- a/ui/src/components/ComponentInfo.scss +++ b/ui/src/components/ComponentInfo.scss @@ -1,53 +1,59 @@ - -@import "../base"; +@import "../../theme/base"; .ComponentInfo { overflow-y: auto; + + a { + color: $white; + border-bottom: solid 1px $mint; + &:hover { + color: $mint; + border-bottom: 0; + } + } + .inner { - background: $dark-bg; - @include xy-grid-container(); - @include xy-grid(); + background: $charcoal; position: relative; + 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: 16px; - right: 16px; - z-index: 2; + .ComponentInfo__section--top { + + 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 { - color: white; - a {color: inherit;} - h3 { - font-weight: bold; - text-transform: uppercase; - font-size: rem-calc(18); - line-height: rem-calc(22); - } + font-size: rem-calc(16); + color: $white; h4 { - font-size: rem-calc(10); - line-height: rem-calc(30); - font-weight: bold; - color: #767676; + font-weight: 600; + font-size: rem-calc(16); } p { - font-size: rem-calc(14); line-height: rem-calc(30); } } + .code { - position: relative; .button-group { - position: absolute; - bottom: 1rem; - right: 1rem; + background: $eggshell; + text-align: right; + padding: rem-calc(10); } .button { margin-bottom: 0; @@ -58,12 +64,41 @@ } } -.CodeButton { - @include button-base(); - @include button-style($secondary-color, auto, auto); - &.active { - @include button-style($primary-color, auto, auto); +.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 { + position: relative; + z-index: 1; +} +.ComponentInfo .controls { + .CloseButton { + width: rem-calc(175); + > i { + vertical-align: middle; + } + } +} diff --git a/ui/src/components/ComponentTopBar.css b/ui/src/components/ComponentTopBar.css index a13ee6e..96dbb8d 100644 --- a/ui/src/components/ComponentTopBar.css +++ b/ui/src/components/ComponentTopBar.css @@ -1,36 +1,24 @@ /** * Foundation for Sites by ZURB - * Version 6.4.3 + * 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 { - box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.08); - padding: 0.4375rem 0; } + padding: 1.23969rem; + background: #EBECEC; + margin-bottom: 1em; } .ComponentTopBar .inner { - padding-right: 0.625rem; - padding-left: 0.625rem; - max-width: 75rem; - margin: 0 auto; + padding-right: 0; + padding-left: 0; + max-width: 1440px; + margin-left: auto; + margin-right: auto; display: flex; flex-flow: row wrap; align-items: center; } - @media print, screen and (min-width: 40em) { - .ComponentTopBar .inner { - padding-right: 0.9375rem; - padding-left: 0.9375rem; } } - @media print, screen and (min-width: 64em) { - .ComponentTopBar .inner { - padding-right: 0.9375rem; - padding-left: 0.9375rem; } } - @media screen and (min-width: 75em) { - .ComponentTopBar .inner { - padding-right: 0.9375rem; - padding-left: 0.9375rem; } } - @media screen and (min-width: 90em) { - .ComponentTopBar .inner { - padding-right: 0.9375rem; - padding-left: 0.9375rem; } } .ComponentTopBar .inner .name, .ComponentTopBar .inner .actions { flex: 0 0 auto; width: auto; @@ -42,15 +30,25 @@ margin-right: 0.625rem; margin-left: 0.625rem; } .ComponentTopBar .name { - font-size: 0.9375rem; - font-weight: bold; - line-height: 1.9375rem; } + font-size: 14px; + font-weight: 800; + letter-spacing: 2px; + text-transform: uppercase; + font-weight: 600; + color: #4F545A; } .ComponentTopBar .SampleSelector { width: auto; - font-size: 0.75rem; + background-color: #EBECEC; + font-size: 0.875rem; line-height: 0.75rem; - font-weight: bold; - height: 1.875rem; } + height: 1.875rem; + border: 1px solid #292F36; + 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 { @@ -75,9 +73,5 @@ 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; } + .ComponentTopBar .actions .NewWindowButton { + padding-right: 1.4375rem; } diff --git a/ui/src/components/ComponentTopBar.scss b/ui/src/components/ComponentTopBar.scss index b276675..e6d3973 100644 --- a/ui/src/components/ComponentTopBar.scss +++ b/ui/src/components/ComponentTopBar.scss @@ -1,13 +1,15 @@ -@import "../base"; +@import "../../theme/base"; .ComponentTopBar { - box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.08); - padding: rem-calc(7) 0; + padding: rem-calc(39.67px / 2); + background: $eggshell; + margin-bottom: 1em; .inner { @include xy-grid-container(); @include xy-grid(); align-items: center; + .name, .actions { @include xy-cell(shrink); } @@ -16,29 +18,32 @@ } } .name { - font-size: rem-calc(15); - font-weight: bold; - line-height: rem-calc(31); + @include font-bold; + font-weight: 600; + color: $ash; } .SampleSelector { width: auto; - font-size: rem-calc(12); + background-color: $eggshell; + font-size: rem-calc(14); line-height: rem-calc(12); - font-weight: bold; height: rem-calc(30); + border: 1px solid $charcoal; + font-weight: 600; + color: $charcoal; + margin-bottom: 0; + &:hover { + cursor: pointer; + background-color: $white; + } } select, .button, h4 { margin-bottom: 0; } .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); + .NewWindowButton { + padding-right: rem-calc(23); } } -} \ No newline at end of file +} diff --git a/ui/src/components/FetchingCodeBlock.css b/ui/src/components/FetchingCodeBlock.css deleted file mode 100644 index d716048..0000000 --- a/ui/src/components/FetchingCodeBlock.css +++ /dev/null @@ -1,24 +0,0 @@ -/** - * Foundation for Sites by ZURB - * Version 6.4.3 - * foundation.zurb.com - * Licensed under MIT Open Source - */ -.FetchingCodeBlock { - position: relative; } - .FetchingCodeBlock.loading:before { - content: ""; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.3); - z-index: 1; } - .FetchingCodeBlock .LoadingIcon { - position: absolute; - top: 50%; - left: 50%; - margin-top: -16px; - margin-right: 16px; - z-index: 1; } diff --git a/ui/src/components/FetchingCodeBlock.js b/ui/src/components/FetchingCodeBlock.js index 94c6439..aa41610 100644 --- a/ui/src/components/FetchingCodeBlock.js +++ b/ui/src/components/FetchingCodeBlock.js @@ -3,7 +3,7 @@ import CodeBlock from './CodeBlock'; import Callout from './Callout'; import { Loading } from './Icons'; import PropTypes from 'prop-types'; -import './FetchingCodeBlock.css'; +// import './FetchingCodeBlock.css'; class FetchingCodeBlock extends Component { constructor(props) { diff --git a/ui/src/components/FetchingCodeBlock.scss b/ui/src/components/FetchingCodeBlock.scss deleted file mode 100644 index 40d4650..0000000 --- a/ui/src/components/FetchingCodeBlock.scss +++ /dev/null @@ -1,17 +0,0 @@ -@import "../base"; - -.FetchingCodeBlock { - position: relative; - &.loading:before { - content:""; - @include overlay-cover; - } - .LoadingIcon { - position: absolute; - top: 50%; - left: 50%; - margin-top: -16px; - margin-right: 16px; - z-index:1; - } -} \ No newline at end of file diff --git a/ui/src/components/Icons/Close.js b/ui/src/components/Icons/Close.js deleted file mode 100644 index 556e2ed..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 397571c..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/Icon.css b/ui/src/components/Icons/Icon.css deleted file mode 100644 index f7e027c..0000000 --- a/ui/src/components/Icons/Icon.css +++ /dev/null @@ -1,43 +0,0 @@ -/** - * Foundation for Sites by ZURB - * Version 6.4.3 - * foundation.zurb.com - * Licensed under MIT Open Source - */ -svg.Icon { - width: 1em; - stroke: white; - fill: white; } - -svg.OpenNew path { - stroke: #181D22; } - -svg.Search { - stroke: none; } - -.LoadingIcon { - display: block; - font-size: 0; - color: #fff; } - .LoadingIcon, .LoadingIcon > div { - position: relative; - box-sizing: border-box; } - .LoadingIcon > div { - display: inline-block; - float: none; - border: 4px solid currentColor; - width: 2rem; - height: 2rem; - background: transparent; - border-radius: 100%; - opacity: 0; - animation: ball-scale-ripple 1s 0s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8); } - -@keyframes ball-scale-ripple { - 0% { - opacity: 1; - transform: scale(0.1); } - 70% { - transform: scale(1); } - 100% { - opacity: 0; } } diff --git a/ui/src/components/Icons/Icon.scss b/ui/src/components/Icons/Icon.scss deleted file mode 100644 index a5f9272..0000000 --- a/ui/src/components/Icons/Icon.scss +++ /dev/null @@ -1,51 +0,0 @@ - -@import "../../base"; - -svg.Icon { - width: 1em; - stroke: white; - fill: white; -} - -svg.OpenNew { - path { - stroke: #181D22; - } -} -svg.Search { - stroke: none; -} - -.LoadingIcon { - display: block; - font-size: 0; - color: #fff; - &, & > div { - position: relative; - box-sizing: border-box; - } - > div { - display: inline-block; - float: none; - border: 4px solid currentColor; - width: rem-calc(32); - height: rem-calc(32); - background: transparent; - border-radius: 100%; - opacity: 0; - animation: ball-scale-ripple 1s 0s infinite cubic-bezier(.21, .53, .56, .8); - } -} - -@keyframes ball-scale-ripple { - 0% { - opacity: 1; - transform: scale(.1); - } - 70% { - transform: scale(1); - } - 100% { - opacity: 0; - } -} \ No newline at end of file diff --git a/ui/src/components/Icons/Loading.js b/ui/src/components/Icons/Loading.js index 5296d0e..5fb3dfb 100644 --- a/ui/src/components/Icons/Loading.js +++ b/ui/src/components/Icons/Loading.js @@ -1,5 +1,5 @@ import React from 'react'; -import './Icon.css'; +// import './Icon.css'; export default () => (
diff --git a/ui/src/components/Icons/MannySmall.js b/ui/src/components/Icons/MannySmall.js index ccc5546..d251070 100644 --- a/ui/src/components/Icons/MannySmall.js +++ b/ui/src/components/Icons/MannySmall.js @@ -1,8 +1,8 @@ import React from 'react'; -import './Icon.css'; +// import './Icon.css'; 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/Search.js b/ui/src/components/Icons/Search.js index da2347e..c49ef42 100644 --- a/ui/src/components/Icons/Search.js +++ b/ui/src/components/Icons/Search.js @@ -1,5 +1,5 @@ import React from 'react'; -import './Icon.css'; +// import './Icon.css'; export default () => ( 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/Menu.css b/ui/src/components/Menu.css index 314bbaf..9a1b09f 100644 --- a/ui/src/components/Menu.css +++ b/ui/src/components/Menu.css @@ -1,9 +1,11 @@ /** * Foundation for Sites by ZURB - * Version 6.4.3 + * 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; @@ -30,32 +32,60 @@ .MenuList input { display: inline-block; } -.MenuItem { +.MenuItem a { display: block; - border-top: 1px solid #2A2A2A; - width: 100%; } - .MenuItem > a { - display: block; - font-size: 0.875rem; - line-height: 1.0625rem; - font-weight: bold; - letter-spacing: 1px; - padding: 0.78125rem 1.5rem; } - .MenuItem.l1 > a { - text-transform: uppercase; - color: white; } - .MenuItem.l2 > a { - text-transform: uppercase; - color: #AFAFAF; - padding-left: 3rem; } - .MenuItem.l3 > a { - color: #AFAFAF; - padding-left: 3.75rem; } - .MenuItem.collapsible > a:before { - content: "-"; - float: right; } - .MenuItem.collapsible.collapsed > a:before { - content: "+"; } + font-size: 0.875rem; + line-height: 1.0625rem; + letter-spacing: 2px; + padding: 0.625rem 1.5rem 0.625rem 1.25rem; + 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.l3:last-child > a { + padding-bottom: 20px; } + +.MenuItem:not(.collapsed) a { + background: #EBECEC; + color: #292F36; } .SubmenuContainer.rah-static--height-zero { visibility: hidden; } diff --git a/ui/src/components/Menu.scss b/ui/src/components/Menu.scss index 29c15e0..b3280d5 100644 --- a/ui/src/components/Menu.scss +++ b/ui/src/components/Menu.scss @@ -1,5 +1,4 @@ - -@import "../base"; +@import "../../theme/base"; .MenuList { list-style:none; @@ -8,46 +7,73 @@ display: block; } .MenuItem { - display: block; - border-top: 1px solid #2A2A2A; - width: 100%; - - > a { + a { display: block; font-size: rem-calc(14); line-height: rem-calc(17); - font-weight: bold; - letter-spacing: 1px; - padding: rem-calc(12.5) rem-calc(24); + letter-spacing: 2px; + padding: rem-calc(10) rem-calc(24) rem-calc(10) rem-calc(20); + 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 { - text-transform: uppercase; - color: white; + 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 { - text-transform: uppercase; - color: #AFAFAF; - padding-left: rem-calc(48); + font-weight: 600; + &:hover { + text-decoration: underline; + } } } &.l3 { > a { - color: #AFAFAF; - padding-left: rem-calc(60); + text-transform: none; + letter-spacing: 1px; + &:hover { + text-decoration: underline; + } } - } - &.collapsible { - > a:before { - content: "-"; - float:right; - } - &.collapsed > a:before { - content: "+"; + &:last-child > a { + padding-bottom: 20px; } } + &:not(.collapsed) a { + background: $eggshell; + color: $charcoal; + } } .SubmenuContainer { @@ -55,4 +81,4 @@ &.rah-static--height-zero { visibility: hidden; } -} \ No newline at end of file +} diff --git a/ui/src/components/NavDrawer.css b/ui/src/components/NavDrawer.css index b1364e7..ab61dc5 100644 --- a/ui/src/components/NavDrawer.css +++ b/ui/src/components/NavDrawer.css @@ -1,76 +1,76 @@ /** * Foundation for Sites by ZURB - * Version 6.4.3 + * Version 6.5.3 * foundation.zurb.com * Licensed under MIT Open Source */ -.NavDrawer > .drawer-toggle { - font-size: 0.625rem; - line-height: 0.75rem; - font-weight: bold; - color: white; - text-transform: uppercase; - cursor: pointer; } - .NavDrawer > .drawer-toggle > i, .NavDrawer > .drawer-toggle > svg.Icon { - margin-left: 1.0625rem; } - +@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 { - background-color: #181D22; - border-top: 1px solid #2A2A2A; - border-left: 1px solid #2A2A2A; - border-bottom: 1px solid #2A2A2A; + background-color: #4F545A; + box-shadow: 0 2px 5px 0 #4F545A; display: flex; flex-flow: column wrap; } - .NavDrawer > .drawer-toggle { - flex: 0 0 auto; - width: auto; - padding-right: 0.625rem; - padding-left: 0.625rem; - padding-top: 0.625rem; - padding-bottom: 0.625rem; - text-align: right; - line-height: 1.5rem; } - .NavDrawer > .drawer-toggle > i { - font-size: 1.5rem; - vertical-align: middle; } + .NavDrawer .CloseButton { + margin-right: 1.25rem; + text-align: right; } .NavDrawer > .SearchForm { flex: 0 0 auto; height: auto; margin-right: 0.625rem; margin-left: 0.625rem; - margin-bottom: 0.625rem; } + margin-top: 0.625rem; + margin-left: 1.25rem; + margin-right: 2.6875rem; } @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: 1.25rem; + padding-top: 1.125rem; + padding-bottom: 0.625rem; + height: 3.75rem; } + .SearchForm { position: relative; } .SearchForm input { - border-radius: 2px; border: none; - background-color: #21262B; + background-color: #292F36; color: white; - font-size: 12px; - font-weight: bold; + font-size: 14px; + font-weight: 400; line-height: 14px; padding: 10px 13px; height: auto; margin-bottom: 0; - border-radius: 0; } + border-radius: 0; + padding-left: 2.5rem; + border: solid 2px #292F36; } .SearchForm input:focus { - background-color: #21262B; } - .SearchForm .Icon { + background-color: #292F36; + border: solid 2px #4ECDC4; + box-shadow: 0 0; } + .SearchForm i { position: absolute; - top: 50%; - right: 0.9375rem; + 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 9a07d46..fdf2305 100644 --- a/ui/src/components/NavDrawer.js +++ b/ui/src/components/NavDrawer.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import Menu from './Menu'; import cx from 'classnames'; -import { CloseArrow, Search as SearchIcon } from './Icons'; +import Button from './Buttons'; import './NavDrawer.css'; export class NavDrawer extends Component { @@ -39,16 +39,22 @@ export class NavDrawer extends Component { return ( Close - +
+ Mannequin +
- + diff --git a/ui/src/components/NavDrawer.scss b/ui/src/components/NavDrawer.scss index 7a230ec..d1dfa98 100644 --- a/ui/src/components/NavDrawer.scss +++ b/ui/src/components/NavDrawer.scss @@ -1,26 +1,19 @@ - -@import "../base"; +@import "../../theme/_base"; .NavDrawer { - background-color: $dark-bg; - 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); - > .drawer-toggle { - @include xy-cell(shrink, $gutter-position: right left top bottom, $gutter-type: padding); - @extend %toggle-button; + .CloseButton { + margin-right: rem-calc(20); text-align: right; - line-height: rem-calc(24); - > i { - font-size: rem-calc(24); - vertical-align: middle; - } } > .SearchForm { - @include xy-cell(shrink, $gutter-position: right left bottom, $vertical: true); + @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 bottom top, $vertical: true); + @include xy-cell(shrink, $gutter-position: right left top, $vertical: true); } } > .MenuList { @@ -29,30 +22,48 @@ } } +.NavDrawer__top { + display: grid; + grid-template-columns: 1fr 1fr; + > span { + @include font-bold; + color: $white; + padding-right: 0.625rem; + padding-left: rem-calc(20); + padding-top: 1.125rem; + padding-bottom: 0.625rem; + height: 3.75rem; + } +} + .SearchForm { position: relative; + input { - border-radius: 2px; border: none; - background-color: #21262B; + background-color: $charcoal; color: white; - font-size: 12px; - font-weight: bold; + 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); + border: solid 2px $charcoal; &:focus { - background-color: #21262B; + background-color: $charcoal; + border: solid 2px $mint; + box-shadow: 0 0; } } - .Icon { + i { position: absolute; - top: 50%; - right: rem-calc(15); + top: 25%; + left: rem-calc(15); font-size: rem-calc(13); - margin-top: -.5em; + color: $white; } } diff --git a/ui/src/components/RenderFrame.css b/ui/src/components/RenderFrame.css deleted file mode 100644 index 5246070..0000000 --- a/ui/src/components/RenderFrame.css +++ /dev/null @@ -1,3 +0,0 @@ -.RenderFrame { - height: 100%; - width: 100%; } diff --git a/ui/src/components/RenderFrame.js b/ui/src/components/RenderFrame.js index 814b6b1..883aea3 100644 --- a/ui/src/components/RenderFrame.js +++ b/ui/src/components/RenderFrame.js @@ -1,6 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; -import './RenderFrame.css'; +// import './RenderFrame.css'; const RenderFrame = ({ src }) => { return ( diff --git a/ui/src/components/RenderFrame.scss b/ui/src/components/RenderFrame.scss deleted file mode 100644 index 47b400a..0000000 --- a/ui/src/components/RenderFrame.scss +++ /dev/null @@ -1,6 +0,0 @@ - -.RenderFrame { - height: 100%; - width: 100%; -} - diff --git a/ui/src/components/TopBar.css b/ui/src/components/TopBar.css index abb8dc4..62ba63f 100644 --- a/ui/src/components/TopBar.css +++ b/ui/src/components/TopBar.css @@ -1,76 +1,30 @@ /** * Foundation for Sites by ZURB - * Version 6.4.3 + * Version 6.5.3 * foundation.zurb.com * Licensed under MIT Open Source */ -.MannequinTopBar .opener { - font-size: 0.625rem; - line-height: 0.75rem; - font-weight: bold; - color: white; - text-transform: uppercase; - cursor: pointer; } - .MannequinTopBar .opener > i, .MannequinTopBar .opener > svg.Icon { - margin-left: 1.0625rem; } - +@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 { - background: #181D22; - color: white; } + background: #292F36; + color: #fffffe; } .MannequinTopBar .inner { - padding-right: 0.625rem; - padding-left: 0.625rem; - max-width: 75rem; - margin: 0 auto; + padding-right: 0; + padding-left: 0; + max-width: 1440px; + margin-left: auto; + margin-right: auto; display: flex; - flex-flow: row wrap; } - @media print, screen and (min-width: 40em) { - .MannequinTopBar .inner { - padding-right: 0.9375rem; - padding-left: 0.9375rem; } } - @media print, screen and (min-width: 64em) { - .MannequinTopBar .inner { - padding-right: 0.9375rem; - padding-left: 0.9375rem; } } - @media screen and (min-width: 75em) { - .MannequinTopBar .inner { - padding-right: 0.9375rem; - padding-left: 0.9375rem; } } - @media screen and (min-width: 90em) { - .MannequinTopBar .inner { - padding-right: 0.9375rem; - padding-left: 0.9375rem; } } - .MannequinTopBar .inner > .logo, .MannequinTopBar .inner > .opener { - flex: 0 0 auto; - width: auto; - padding-right: 0.625rem; - padding-left: 0.625rem; } + flex-flow: row wrap; + padding: 0 calc(39.67px / 2); } + .MannequinTopBar .inner > .logo { + padding-top: 11.6px; + padding-bottom: 11.6px; } .MannequinTopBar .inner > .title { flex: 1 1 0px; width: auto; margin-right: 0.625rem; margin-left: 0.625rem; } - .MannequinTopBar .opener i.menu-icon { - position: relative; - display: inline-block; - vertical-align: middle; - width: 20px; - height: 16px; - cursor: pointer; - margin-left: 1.0625rem; } - .MannequinTopBar .opener i.menu-icon::after { - position: absolute; - top: 0; - left: 0; - display: block; - width: 100%; - height: 2px; - background: #fefefe; - box-shadow: 0 7px 0 #fefefe, 0 14px 0 #fefefe; - content: ''; } - .MannequinTopBar .opener i.menu-icon:hover::after { - background: #cacaca; - box-shadow: 0 7px 0 #cacaca, 0 14px 0 #cacaca; } .MannequinTopBar .MannySmall { - width: 37px; - padding: 10px 0; } + width: 44.8px; } diff --git a/ui/src/components/TopBar.js b/ui/src/components/TopBar.js index 5e1c0ec..33bf8a5 100644 --- a/ui/src/components/TopBar.js +++ b/ui/src/components/TopBar.js @@ -2,6 +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' import './TopBar.css'; const TopBar = ({ toggleNav }) => { @@ -12,9 +13,12 @@ const TopBar = ({ toggleNav }) => {
- +
); diff --git a/ui/src/components/TopBar.scss b/ui/src/components/TopBar.scss index 5678547..521d714 100644 --- a/ui/src/components/TopBar.scss +++ b/ui/src/components/TopBar.scss @@ -1,30 +1,23 @@ - -@import "../base"; +@import "../../theme/_base"; .MannequinTopBar { - background: $dark-bg; - color: white; + background: $charcoal; + color: $white; .inner { @include xy-grid-container(); @include xy-grid(); - > .logo, > .opener { - @include xy-cell(shrink, $gutter-type: padding); + padding: 0 calc(39.67px / 2); + > .logo { + padding-top: 11.6px; + padding-bottom: 11.6px; } > .title { @include xy-cell(auto); } } - .opener { - @extend %toggle-button; - i.menu-icon { - @include hamburger($color: $titlebar-icon-color, $color-hover: $titlebar-icon-color-hover); - margin-left: rem-calc(17); - } - } .MannySmall { - width: 37px; - padding: 10px 0; + width: 44.8px; } -} \ No newline at end of file +} diff --git a/ui/src/containers/App.css b/ui/src/containers/App.css index 622fe08..1a676b3 100644 --- a/ui/src/containers/App.css +++ b/ui/src/containers/App.css @@ -1,182 +1,54 @@ @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. - */ +@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"); +/*! 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 */ } - -/** - * Prevent the duplicate application of `bolder` by the next rule in Safari 6. - */ -b, -strong { - font-weight: inherit; } + text-decoration: underline dotted; } -/** - * 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 */ } - -/** - * 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; } + font-size: 1em; } -/** - * 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 +62,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; } - -/** - * Show the overflow in Edge. - */ -input { - overflow: visible; } + -webkit-appearance: button; } -/** - * 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; } @@ -437,11 +166,11 @@ html { body { margin: 0; padding: 0; - background: #fefefe; - font-family: "Helvetica", "Arial"; + background: #fffffe; + font-family: "Montserrat", sans-serif, sans-serif; font-weight: normal; line-height: 1.5; - color: #0a0a0a; + color: #000; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @@ -545,7 +274,7 @@ h3, .h3, h4, .h4, h5, .h5, h6, .h6 { - font-family: "Helvetica", "Arial"; + font-family: "Montserrat", sans-serif; font-style: normal; font-weight: normal; color: inherit; @@ -680,12 +409,12 @@ figure { margin: 0; } code { - padding: none; - border: none; - background-color: transparent; - font-family: Consolas, "Liberation Mono", Courier, monospace; + padding: 0 0.125rem; + border: 0; + background-color: #EBECEC; + font-family: Menlo, Consolas, "Liberation Mono", Courier, monospace; font-weight: normal; - color: inherit; } + color: #546267; } kbd { margin: 0; @@ -839,10 +568,6 @@ textarea { textarea[rows] { height: auto; } -input::placeholder, -textarea::placeholder { - color: #cacaca; } - input:disabled, input[readonly], textarea:disabled, textarea[readonly] { @@ -857,6 +582,9 @@ textarea[readonly] { input[type='search'] { box-sizing: border-box; } +::placeholder { + color: #cacaca; } + [type='file'], [type='checkbox'], [type='radio'] { @@ -902,9 +630,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 +660,6 @@ label { .input-group-field { border-radius: 0; flex: 1 1 0px; - height: auto; min-width: 0; } .input-group-button { @@ -945,8 +672,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; } @@ -1009,7 +736,7 @@ select { .is-invalid-input:not(:focus) { border-color: #cc4b37; - background-color: #f9ecea; } + background-color: #faedea; } .is-invalid-input:not(:focus)::placeholder { color: #cc4b37; } @@ -1070,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 { @@ -1090,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 8088461..b4e7934 100644 --- a/ui/src/containers/App.scss +++ b/ui/src/containers/App.scss @@ -1,5 +1,5 @@ -@import "base"; +@import "../../theme/_base"; @include foundation-global-styles; @include foundation-typography; @@ -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,26 @@ } } .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(xxlarge) { .main-frame { @include xy-cell(auto, $gutter-output: false, $gutter-type: none); diff --git a/ui/src/containers/HomePage.css b/ui/src/containers/HomePage.css index f220fdd..969c073 100644 --- a/ui/src/containers/HomePage.css +++ b/ui/src/containers/HomePage.css @@ -1,19 +1,23 @@ /** * Foundation for Sites by ZURB - * Version 6.4.3 + * 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: #181D22; - color: white; } + background: #292F36; + color: #fffffe; } .MannequinHome .Branding { 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: "Gilroy", "Gill Sans"; - font-weight: bold; - font-size: 0.5625rem; } + text-align: center; } + +.GetStartedButton { + margin: 0 auto; } diff --git a/ui/src/containers/HomePage.js b/ui/src/containers/HomePage.js index 3dc0c50..25bafe7 100644 --- a/ui/src/containers/HomePage.js +++ b/ui/src/containers/HomePage.js @@ -5,11 +5,12 @@ import Branding from '../components/Branding'; import { getQuicklinks } from '../selectors'; import Card from '../components/Card'; import PropTypes from 'prop-types'; +import Button from '../components/Buttons'; const HomePage = ({ quickLinks }) => (
- {quickLinks.length > 0 && ( + {(quickLinks.length > 0 && (

Quick Links

@@ -23,7 +24,12 @@ const HomePage = ({ quickLinks }) => ( ))}
- )} + )) ||
); diff --git a/ui/src/containers/HomePage.scss b/ui/src/containers/HomePage.scss index f81ac93..db716ec 100644 --- a/ui/src/containers/HomePage.scss +++ b/ui/src/containers/HomePage.scss @@ -1,9 +1,8 @@ - -@import "base"; +@import "../../theme/_base"; .MannequinHome { - background: $dark-bg; - color: white; + background: $charcoal; + color: $white; .Branding { margin-top: 8%; @@ -11,13 +10,12 @@ } .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); } } } +.GetStartedButton { + margin: 0 auto; +} diff --git a/ui/src/containers/SamplePage.css b/ui/src/containers/SamplePage.css index a9c98c0..36e0b46 100644 --- a/ui/src/containers/SamplePage.css +++ b/ui/src/containers/SamplePage.css @@ -1,9 +1,11 @@ /** * Foundation for Sites by ZURB - * Version 6.4.3 + * 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; diff --git a/ui/src/containers/SamplePage.js b/ui/src/containers/SamplePage.js index 4e41b49..1912bce 100644 --- a/ui/src/containers/SamplePage.js +++ b/ui/src/containers/SamplePage.js @@ -7,16 +7,14 @@ import ComponentProblems from '../components/ComponentProblems'; import Callout from '../components/Callout'; import TransitionGroup from 'react-transition-group/TransitionGroup'; import SampleSelector from '../components/SampleSelector'; -import { - OpenWindowButton, - ViewInfoButton, - CloseButton -} from '../components/Buttons/'; +import Button from '../components/Buttons' 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 +64,22 @@ class SampleFoundPage extends Component { } = this.props; const { problems, name } = component; const actions = [ - , - +