From 4b4cebc760e0cb1f70debeef9541c163372beaa3 Mon Sep 17 00:00:00 2001 From: Thomas Osmonson Date: Thu, 28 Dec 2017 13:21:42 -0600 Subject: [PATCH 01/28] update styles for the sidebar, added chevron, more dynamic states --- package.json | 1 + src/components/sidebar/SidebarGroup.js | 16 ++- src/components/sidebar/SidebarItem.js | 4 +- src/styles/components/containers/_fold.scss | 1 + src/styles/components/sidebar/_main.scss | 109 +++++++++++++------- src/styles/variables/_main.scss | 2 +- 6 files changed, 88 insertions(+), 45 deletions(-) diff --git a/package.json b/package.json index 4ce872519..68abdf709 100644 --- a/package.json +++ b/package.json @@ -77,6 +77,7 @@ "draft-js-import-html": "^1.2.1", "draft-js-utils": "^1.2.0", "fast-isnumeric": "^1.1.1", + "mdi-react": "^2.1.19", "plotly.js": "^1.31.2", "prop-types": "^15.5.10", "raf": "^3.4.0", diff --git a/src/components/sidebar/SidebarGroup.js b/src/components/sidebar/SidebarGroup.js index c571f3d37..126a68126 100644 --- a/src/components/sidebar/SidebarGroup.js +++ b/src/components/sidebar/SidebarGroup.js @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; import React, {Component} from 'react'; -import {bem} from '../../lib'; - +import {bem} from 'lib'; +import ChevronRightIcon from 'mdi-react/ChevronRightIcon'; import SidebarItem from './SidebarItem'; export default class SidebarGroup extends Component { @@ -41,19 +41,25 @@ export default class SidebarGroup extends Component { } render() { + const {group, panels, selectedGroup} = this.props; + const {expanded} = this.state; return (
- {this.props.group} +
+ +
+
{group}
- {this.state.expanded && this.props.panels.map(this.renderSubItem)} + {expanded && panels.map(this.renderSubItem)}
); } diff --git a/src/components/sidebar/SidebarItem.js b/src/components/sidebar/SidebarItem.js index 791e7fb56..c83bedacf 100644 --- a/src/components/sidebar/SidebarItem.js +++ b/src/components/sidebar/SidebarItem.js @@ -10,7 +10,9 @@ export default class SidebarItem extends Component { onClick={onClick} className={bem('sidebar-item', [active ? 'is-active' : ''])} > - {label} +
+
{label}
+
); } diff --git a/src/styles/components/containers/_fold.scss b/src/styles/components/containers/_fold.scss index 102b1017e..293db8068 100644 --- a/src/styles/components/containers/_fold.scss +++ b/src/styles/components/containers/_fold.scss @@ -6,6 +6,7 @@ -ms-user-select: none; width: 100%; + &__top { display: flex; justify-content: space-between; diff --git a/src/styles/components/sidebar/_main.scss b/src/styles/components/sidebar/_main.scss index 5989b9d1f..67e2226eb 100644 --- a/src/styles/components/sidebar/_main.scss +++ b/src/styles/components/sidebar/_main.scss @@ -10,56 +10,89 @@ float: left; border-right: 1px solid $color-border; flex-grow: 1; - @include scrollbar(5px); -} - -.sidebar-group--is-active { - color: #2a3f5f; - font-weight: 600; - cursor: default; - border-left: 3px solid #119dff; + @include scrollbar(); } .sidebar-group { background-color: #fff; cursor: pointer; width: 100%; -} -.sidebar-group__title { - color: #506784; - font-size: 14px; - font-weight: $font-weight-normal; - padding: $half-spacing-unit 0; - text-transform: capitalize; - text-align: left; - border-bottom: $border-light; -} + &__title { + color: #506784; + font-size: 14px; + font-weight: $font-weight-normal; + padding: $half-spacing-unit 0; + text-transform: capitalize; + text-align: left; + border-bottom: $border-light; + display: flex; + position: relative; -.sidebar-group__title:before { - width: 0; - height: 0; - display: inline-block; - margin-left: 8px; - margin-right: 8px; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-left: 5px solid #506784; - content: ''; - @include trans; -} + &__label { + padding-left: $base-spacing-unit; + } -.sidebar-group--is-expanded{ - .sidebar-group__title:before { - transform: rotate(90deg); + &__icon { + position: absolute; + transform: scale(0.9) translateX(2px) translateY(-1px); + transform-origin: center center; + opacity: 0.5; + @include trans; + svg { + path { + fill: currentColor; + } + } + } } - .sidebar-group__title { - position: relative; - z-index: 4; - box-shadow: $base-box-shadow; + // --- + // States + // --- + + // Hover + &:hover { + .sidebar-group__title { + &__icon { + opacity: 1; + } + } } -} + // has active child + &--is-active { + color: #2a3f5f; + cursor: default; + .sidebar-group__title { + &__label { + font-weight: $font-weight-semibold; + } + &__icon { + opacity: 1; + svg { + path { + fill: $color-accent; + } + } + } + } + } + + // Is expanded + &--is-expanded { + .sidebar-group__title { + &__icon { + transform: scale(0.9) translateY(-3px) rotate(90deg); + opacity: 1; + } + } + .sidebar-group__title { + position: relative; + z-index: 4; + box-shadow: $base-box-shadow; + } + } +} .sidebar-item { color: #69738a; cursor: pointer; diff --git a/src/styles/variables/_main.scss b/src/styles/variables/_main.scss index 26a39fe31..eceba6692 100644 --- a/src/styles/variables/_main.scss +++ b/src/styles/variables/_main.scss @@ -35,7 +35,7 @@ $color-link-light: $default-color-blue-pale; // Background Colors $color-background-color-inverse: $default-color-rhino-dark; $color-background-light: $default-color-rhino-light-3; -$color-panel-background: $default-color-rhino-light-4; +$color-panel-background: $default-color-rhino-light-2; $color-section-header-background: $default-color-white-blue; $color-fold-header-background: $default-color-rhino-dark; $color-fold-header-background--closed: $default-color-rhino-medium-1; From 44dc991381a10d70832c57c24dc5e76991ac5861 Mon Sep 17 00:00:00 2001 From: Thomas Osmonson Date: Thu, 28 Dec 2017 14:15:07 -0600 Subject: [PATCH 02/28] minor update to modal info styles --- src/components/containers/ModalBox.js | 7 ++-- src/styles/components/containers/_info.scss | 33 ++++++++++--------- .../components/containers/_modalbox.scss | 5 ++- src/styles/variables/_defaults.scss | 2 +- 4 files changed, 25 insertions(+), 22 deletions(-) diff --git a/src/components/containers/ModalBox.js b/src/components/containers/ModalBox.js index f9736ac90..efc6a03e6 100644 --- a/src/components/containers/ModalBox.js +++ b/src/components/containers/ModalBox.js @@ -4,13 +4,14 @@ import classnames from 'classnames'; export default class ModalBox extends Component { render() { + const {backgroundDark, children, onClose} = this.props; const modalboxClass = classnames('modalbox', { - 'modalbox--dark': this.props.backgroundDark, + 'modalbox--dark': backgroundDark, }); return (
-
-
{this.props.children}
+
+
{children}
); } diff --git a/src/styles/components/containers/_info.scss b/src/styles/components/containers/_info.scss index 812e6c2cf..245f10e23 100644 --- a/src/styles/components/containers/_info.scss +++ b/src/styles/components/containers/_info.scss @@ -1,23 +1,26 @@ .info__title { - color: $color-link-light; - font-size: $font-size-medium; - font-weight: $font-weight-normal; - line-height: 18px; - padding: $half-spacing-unit $half-spacing-unit $quarter-spacing-unit $half-spacing-unit; + color: $color-header-text; + font-size: $font-size-medium; + font-weight: $font-weight-semibold; + line-height: 18px; + padding: $half-spacing-unit $half-spacing-unit $quarter-spacing-unit + $half-spacing-unit; } .info__text { - padding: $quarter-spacing-unit $half-spacing-unit; - color: $color-secondary-text; - font-size: $font-size-small; - font-weight: $font-weight-light; - line-height: 18px; + padding: $quarter-spacing-unit $half-spacing-unit; + color: $color-text; + font-size: $font-size-small; + font-weight: $font-weight-normal; + line-height: 18px; } .info__sub-text { - color: $color-brand; - font-size: $font-size-small; - font-weight: $font-weight-light; - line-height: 14px; - padding: $quarter-spacing-unit $half-spacing-unit $half-spacing-unit $half-spacing-unit; + color: $color-text; + font-size: $font-size-small; + font-weight: $font-weight-normal; + font-style: italic; + line-height: 18px; + padding: $quarter-spacing-unit $half-spacing-unit $half-spacing-unit + $half-spacing-unit; } diff --git a/src/styles/components/containers/_modalbox.scss b/src/styles/components/containers/_modalbox.scss index a63168c74..8e1098363 100644 --- a/src/styles/components/containers/_modalbox.scss +++ b/src/styles/components/containers/_modalbox.scss @@ -3,10 +3,9 @@ border-radius: 2px; text-transform: none; text-align: left; - border: 1px solid $color-border; - + border: $border; align-content: center; - box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2); + box-shadow: $base-box-shadow; left: 0; right: 0; diff --git a/src/styles/variables/_defaults.scss b/src/styles/variables/_defaults.scss index e21ec7496..21770607d 100644 --- a/src/styles/variables/_defaults.scss +++ b/src/styles/variables/_defaults.scss @@ -1,7 +1,7 @@ /* * SIZING AND WEIGHTS */ -$default-font-weight-light: 300; +$default-font-weight-light: 400; $default-font-weight-normal: 400; $default-font-weight-semibold: 600; $default-font-size: 13px; From 8784cb4a41d5cb13159dc76d9058b37a3b55f5dc Mon Sep 17 00:00:00 2001 From: Thomas Osmonson Date: Fri, 29 Dec 2017 15:19:29 -0600 Subject: [PATCH 03/28] start migrating over to custom-vars, added postcss step for ie11 that works for defaults --- package.json | 11 +- src/components/Button.js | 44 ++++ .../containers/AnnotationAccordion.js | 15 +- src/components/containers/TraceAccordion.js | 12 +- src/components/widgets/ColorPicker.js | 2 +- src/index.js | 1 + src/postcss.js | 33 +++ src/styles/_helpers.scss | 36 ++- src/styles/_mixins.scss | 30 +-- src/styles/components/_button.scss | 71 ++++++ src/styles/components/_main.scss | 1 + src/styles/components/containers/_fold.scss | 7 +- src/styles/components/containers/_panel.scss | 2 +- .../components/containers/_section.scss | 6 +- .../components/widgets/_colorpicker.scss | 154 +++++++------ src/styles/main.scss | 14 +- src/styles/variables/_colors.scss | 214 ++++++++++++++++++ src/styles/variables/_defaults.scss | 176 +++++--------- src/styles/variables/_layout.scss | 6 + src/styles/variables/_main.scss | 119 +++++----- src/styles/variables/_theme.scss | 89 ++++++++ src/styles/variables/_typography.scss | 30 +++ src/styles/variables/_units.scss | 17 ++ utils/combined-translation-keys.txt | 2 +- utils/translation-keys.txt | 2 +- yarn.lock | 79 ++++++- 26 files changed, 889 insertions(+), 284 deletions(-) create mode 100644 src/components/Button.js create mode 100644 src/postcss.js create mode 100644 src/styles/components/_button.scss create mode 100644 src/styles/variables/_colors.scss create mode 100644 src/styles/variables/_layout.scss create mode 100644 src/styles/variables/_theme.scss create mode 100644 src/styles/variables/_typography.scss create mode 100644 src/styles/variables/_units.scss diff --git a/package.json b/package.json index 68abdf709..1d83cecc8 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,8 @@ "make:dist:css": "mkdirp dist && node-sass --output-style compressed src/styles/main.scss > dist/react-plotly.js-editor.css", "prepublishOnly": "npm run make:lib && npm run make:combined-translation-keys", "lint": "prettier --write \"src/**/*.js\"", + "postcss": "babel-node src/postcss.js && echo -e '\\033[0;32m'CSS proccessed!'\\033[0m'", + "postcss:ie11": "NODE_ENV=ie babel-node src/postcss.js && echo -e '\\033[0;32m'CSS proccessed!'\\033[0m'", "test:lint": "eslint \"src/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'", "test:pretty": "prettier -l \"src/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'", "test:js": "jest --setupTestFrameworkScriptFile=raf/polyfill", @@ -61,7 +63,7 @@ "glob": "^7.1.2", "jest": "^21.2.1", "mkdirp": "^0.5.1", - "node-sass": "^4.7.1", + "node-sass": "^4.7.2", "prettier": "^1.9.2", "react-test-renderer": "^16.2.0", "uglify-js": "^3.0.26" @@ -71,14 +73,21 @@ "react-dom": "^0.14.9 || ^15.3.0 || ^16.0.0-rc || ^16.0" }, "dependencies": { + "@webcomponents/shadycss": "^1.1.0", + "autoprefixer": "^7.2.3", "babel-plugin-module-resolver": "^3.0.0", + "babel-polyfill": "^6.26.0", "draft-js": "^0.10.4", "draft-js-export-html": "github:plotly/draft-js-export-html", "draft-js-import-html": "^1.2.1", "draft-js-utils": "^1.2.0", + "es6-shim": "^0.35.3", "fast-isnumeric": "^1.1.1", + "fs": "^0.0.1-security", "mdi-react": "^2.1.19", "plotly.js": "^1.31.2", + "postcss": "^6.0.14", + "postcss-custom-properties": "^6.2.0", "prop-types": "^15.5.10", "raf": "^3.4.0", "react": "^16.2.0", diff --git a/src/components/Button.js b/src/components/Button.js new file mode 100644 index 000000000..d20a4a5d1 --- /dev/null +++ b/src/components/Button.js @@ -0,0 +1,44 @@ +import PropTypes from 'prop-types'; +import React, {Component} from 'react'; +import {bem} from 'lib'; + +class Button extends Component { + constructor(props) { + super(props); + } + + render() { + const {variant, className, icon, label, children, ...rest} = this.props; + + let classes = `button`; + + if (variant) { + classes += ` button--${variant}`; + } else { + classes += ` button--default`; + } + + classes += ` ${className}`; + + const Icon = icon &&
{icon}
; + + return ( + + ); + } +} + +Button.propTypes = { + variant: PropTypes.string, + label: PropTypes.any, + className: PropTypes.any, + children: PropTypes.node, + icon: PropTypes.any, +}; + +export default Button; diff --git a/src/components/containers/AnnotationAccordion.js b/src/components/containers/AnnotationAccordion.js index f19832208..a95043010 100644 --- a/src/components/containers/AnnotationAccordion.js +++ b/src/components/containers/AnnotationAccordion.js @@ -3,7 +3,8 @@ import PropTypes from 'prop-types'; import React, {Component} from 'react'; import {connectAnnotationToLayout, bem} from 'lib'; import {PanelHeader} from './Panel'; - +import Button from 'components/Button'; +import PlusIcon from 'mdi-react/PlusIcon'; const AnnotationFold = connectAnnotationToLayout(Fold); export default class AnnotationAccordion extends Component { @@ -30,14 +31,18 @@ export default class AnnotationAccordion extends Component { } render() { - const annotations = this.context.layout.annotations || []; + const {layout: {annotations = []}} = this.context; const {canAdd, children} = this.props; const addButton = canAdd && ( - + + - +
); diff --git a/src/styles/components/_button.scss b/src/styles/components/_button.scss index 055b2ff44..a8f86030c 100644 --- a/src/styles/components/_button.scss +++ b/src/styles/components/_button.scss @@ -15,7 +15,7 @@ button { border-width: 1px; border-style: solid; border-color: transparent; - border-radius: $border-radius-5; + border-radius: var(--border-radius); @include trans; &.button { padding-left: 0; diff --git a/src/styles/components/containers/_fold.scss b/src/styles/components/containers/_fold.scss index 85ddb2c86..eeedd82e6 100644 --- a/src/styles/components/containers/_fold.scss +++ b/src/styles/components/containers/_fold.scss @@ -11,16 +11,16 @@ display: flex; justify-content: space-between; clear: both; - padding: $quarter-spacing-unit $half-spacing-unit; - color: $color-white; + padding: var(--spacing-quarter-unit) var(--spacing-half-unit); + color: var(--color-white); cursor: pointer; - font-size: $font-size; + font-size: var(--font-size-base); line-height: 11px; - border: $border-dark; + border: var(--border-dark); background-color: $color-fold-header-background--closed; height: 15px; - border-radius: 5px; - text-shadow: $text-shadow--dark-ui; + border-radius: var(--border-radius); + text-shadow: var(--text-shadow-dark-ui); transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out, border 0.1s ease-in-out; @@ -38,11 +38,11 @@ } &--active { - color: $color-white; + color: var(--color-white); background-color: $color-fold-header-background; border: 1px solid $color-fold-header-background; - border-radius: 5px 5px 0 0; - text-shadow: $text-shadow--dark-ui--inactive; + border-radius: var(--border-radius) var(--border-radius) 0 0; + text-shadow: var(--text-shadow-dark-ui-inactive); svg { @include drop-shadow--dark-ui--lighter(); @@ -50,15 +50,14 @@ &:hover { background-color: $color-fold-header-background; // darken 6% - background-color: $color-fold-header-background; // darken 6% } } &__title { - margin-left: $half-spacing-unit/3; + margin-left: var(--spacing-half-unit)/3; padding-top: 2px; - font-size: $font-size-medium; - font-weight: $font-weight-semibold; + font-size: var(--font-size-medium); + font-weight: var(--font-weight-semibold); white-space: nowrap; max-width: 150px; letter-spacing: 0.2px; @@ -85,8 +84,8 @@ } &__content { - background: #ffffff; - border: $border; + background: var(--color-white); + border: var(--border-default); border-width: 0 1px 1px 1px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; @@ -98,7 +97,7 @@ } .fold + .fold { - margin-top: $half-spacing-unit; + margin-top: var(--spacing-half-unit); } .fold__top__arrow-title { @@ -106,7 +105,7 @@ } .fold__delete { display: inline-block; - color: $color-white; + color: var(--color-white); text-decoration: none; font-size: 1.5em; } diff --git a/src/styles/components/containers/_info.scss b/src/styles/components/containers/_info.scss index 245f10e23..fc1fbd073 100644 --- a/src/styles/components/containers/_info.scss +++ b/src/styles/components/containers/_info.scss @@ -1,26 +1,26 @@ .info__title { - color: $color-header-text; - font-size: $font-size-medium; - font-weight: $font-weight-semibold; + color: var(--color-text-header); + font-size: var(--font-size-medium); + font-weight: var(--font-weight-semibold); line-height: 18px; - padding: $half-spacing-unit $half-spacing-unit $quarter-spacing-unit - $half-spacing-unit; + padding: var(--spacing-half-unit) var(--spacing-half-unit) var(--spacing-quarter-unit) + var(--spacing-half-unit); } .info__text { - padding: $quarter-spacing-unit $half-spacing-unit; - color: $color-text; - font-size: $font-size-small; - font-weight: $font-weight-normal; + padding: var(--spacing-quarter-unit) var(--spacing-half-unit); + color: var(--color-text-base); + font-size: var(--font-size-small); + font-weight: var(--font-weight-normal); line-height: 18px; } .info__sub-text { - color: $color-text; - font-size: $font-size-small; - font-weight: $font-weight-normal; + color: var(--color-text-base); + font-size: var(--font-size-small); + font-weight: var(--font-weight-normal); font-style: italic; line-height: 18px; - padding: $quarter-spacing-unit $half-spacing-unit $half-spacing-unit - $half-spacing-unit; + padding: var(--spacing-quarter-unit) var(--spacing-half-unit) var(--spacing-half-unit) + var(--spacing-half-unit); } diff --git a/src/styles/components/containers/_menupanel.scss b/src/styles/components/containers/_menupanel.scss index bebb24faf..2c77af8ef 100644 --- a/src/styles/components/containers/_menupanel.scss +++ b/src/styles/components/containers/_menupanel.scss @@ -3,11 +3,11 @@ } .menupanel--ownline { - padding-top: 6px; + padding-top: var(--spacing-quarter-unit); } .menupanel__icon-span { - font-size: $font-size-small; + font-size: var(--font-size-small); } .menupanel__icon-span--question { @@ -15,11 +15,15 @@ } .menupanel__icon { - padding-left: 6px; - padding-right: 6px; + padding-left: var(--spacing-quarter-unit); + padding-right: var(--spacing-quarter-unit); vertical-align: middle; // gets overridden by user agent stylesheet otherwise width: 15px !important; height: 15px !important; - fill: $color-link-light !important; + fill: var(--color-text-light) !important; + &:hover{ + cursor: pointer; + fill: var(--color-accent) !important; + } } diff --git a/src/styles/components/containers/_modalbox.scss b/src/styles/components/containers/_modalbox.scss index 8e1098363..d794c1115 100644 --- a/src/styles/components/containers/_modalbox.scss +++ b/src/styles/components/containers/_modalbox.scss @@ -1,9 +1,9 @@ .modalbox { position: absolute; - border-radius: 2px; + border-radius: var(--border-radius-small); text-transform: none; text-align: left; - border: $border; + border: var(--border-default); align-content: center; box-shadow: $base-box-shadow; left: 0; @@ -11,13 +11,13 @@ margin: 0 24px; min-width: 200px; - background-color: $color-white; + background-color: var(--color-white); @include z-index("cloud"); } .modalbox--dark { - background-color: $color-background-color-inverse; + background-color: var(--color-background-inverse); } .modalbox__cover { diff --git a/src/styles/components/containers/_panel.scss b/src/styles/components/containers/_panel.scss index 9efa6be47..219f505dc 100644 --- a/src/styles/components/containers/_panel.scss +++ b/src/styles/components/containers/_panel.scss @@ -1,19 +1,16 @@ .panel { flex-grow: 1; flex-shrink: 0; - background-color: $color-panel-background; + background-color: var(--panel-background); overflow-y: auto; - padding: $half-spacing-unit; - border-right: $border; + padding: var(--spacing-half-unit); + border-right: var(--border-default); box-sizing: border-box; - width: calc(#{$layout-panel-width} - #{$layout-sidebar-width} - 1px); + width: calc(var(--panel-width) - var(--sidebar-width) - 1px); @include scrollbar(); - &__content { - } - &__header { - margin-bottom: $half-spacing-unit; + margin-bottom: var(--spacing-half-unit); display: flex; &__content { flex-grow: 1; @@ -22,8 +19,4 @@ justify-content: flex-end; } } - - &__add-button { - //@include button(primary); - } } diff --git a/src/styles/components/containers/_section.scss b/src/styles/components/containers/_section.scss index 60164c5ad..c8fe6bf21 100644 --- a/src/styles/components/containers/_section.scss +++ b/src/styles/components/containers/_section.scss @@ -1,14 +1,17 @@ .section { &__heading { display: flex; - font-size: $font-size; - color: $color-header-text; - font-weight: $font-weight-semibold; + font-size: var(--font-size-base); + color: var(--color-text-header); + font-weight: var(--font-weight-semibold); cursor: default; - background-color: $color-background-light; + background-color: var(--color-background-light); padding: var(--spacing-quarter-unit) var(--spacing-half-unit); clear: both; text-transform: capitalize; - border-top: $border-light; + border-top: var(--border-light); + &__menu{ + + } } } diff --git a/src/styles/components/fields/_field.scss b/src/styles/components/fields/_field.scss index 4a5067dbf..17a76c593 100644 --- a/src/styles/components/fields/_field.scss +++ b/src/styles/components/fields/_field.scss @@ -1,14 +1,14 @@ .field { - align-items: center; - border-top:$border-light; - color: #6d6d6d; + align-items: flex-start; + border-top: var(--border-light); + color: var(--color-text-base); display: flex; - font-size: $font-size; - font-weight: $font-weight-normal; + font-size: var(--font-size-base); + font-weight: var(--font-weight-normal); justify-content: flex-start; - line-height: $font-size; + line-height: var(--font-size-base); min-height: 32px; - padding: 6px 0; + padding: var(--spacing-quarter-unit) 0; width: 100%; } @@ -18,39 +18,40 @@ .field__no-title { width: 100%; - padding: 0 12px; + padding: 0 var(--spacing-half-unit); + align-self: center; } .field__no-title--center { text-align: center; } -.field__title { - padding-left: 0.5em; - color: #69738a; - font-size: 14px; - width: 36%; - display: inline-block; -} - .field__widget { - width: 64%; - padding-left: 12px; display: flex; - padding-right: 12px; + &:not(.field__widget--units) { + flex-grow: 1; + } + flex-wrap: wrap; + padding-right: var(--spacing-half-unit); + padding-left: var(--spacing-half-unit); +} +.field__units { + align-self: center; } .field__widget--units { - width: 41%; - padding-right: 0px; + padding-right: 0; } .field__title { width: 30%; - padding-left: 12px; + padding-left: var(--spacing-half-unit); display: inline-block; - line-height: 18px; + font-size: var(--font-size-base); + line-height: var(--font-leading-body); text-transform: capitalize; + color: var(--color-text-base); + padding-top: var(--spacing-quarter-unit); } .field__title-text { diff --git a/src/styles/components/fields/_symbolselector.scss b/src/styles/components/fields/_symbolselector.scss index 7f7846da5..f03f6e1b7 100644 --- a/src/styles/components/fields/_symbolselector.scss +++ b/src/styles/components/fields/_symbolselector.scss @@ -1,14 +1,14 @@ .symbol-selector__toggle { - border: 1px solid $color-border; - border-radius: 4px; + border: var(--border-default); + border-radius: var(--border-radius); width: 80px; cursor: pointer; - padding: 6px 6px 3px 6px; + padding: var(--spacing-quarter-unit) var(--spacing-quarter-unit) 3px var(--spacing-quarter-unit); @include clearfix(); } .symbol-selector__toggle--dark { - background-color: $color-background-color-inverse; + background-color: var(--color-background-inverse); } .symbol-selector__toggle__option { @@ -28,11 +28,11 @@ max-width: 225px; position: absolute; @include z-index('orbit'); - border: 1px solid $color-border; - padding: $font-size; - box-shadow: 2px 2px $font-size $color-border-secondary; - border-radius: $border-radius; - left: $base-spacing-unit; + border: var(--border-default); + padding: var(--spacing-half-unit); + box-shadow: 2px 2px var(--spacing-half-unit) var(--color-border-light); + border-radius: var(--border-radius-small); + left: var(--spacing-base-unit); } .symbol-selector__item { @@ -41,6 +41,6 @@ .symbol-selector__symbol { &:hover { - background-color: $color-border; + background-color: var(--color-border-default); } } diff --git a/src/styles/components/sidebar/_main.scss b/src/styles/components/sidebar/_main.scss index 67e2226eb..668e94c18 100644 --- a/src/styles/components/sidebar/_main.scss +++ b/src/styles/components/sidebar/_main.scss @@ -1,36 +1,36 @@ .sidebar { user-select: none; height: 100%; - min-width: $layout-sidebar-width; - width: $layout-sidebar-width; - max-width: $layout-sidebar-width; + min-width: var(--sidebar-width); + width: var(--sidebar-width); + max-width: var(--sidebar-width); text-align: center; - background: #fff; + background: var(--color-white); overflow-y: auto; float: left; - border-right: 1px solid $color-border; + border-right: var(--border-default); flex-grow: 1; @include scrollbar(); } .sidebar-group { - background-color: #fff; + background-color: var(--color-white); cursor: pointer; width: 100%; &__title { - color: #506784; + color: var(--color-text-base); font-size: 14px; - font-weight: $font-weight-normal; - padding: $half-spacing-unit 0; + font-weight: var(--font-weight-normal); + padding: var(--spacing-half-unit) 0; text-transform: capitalize; text-align: left; - border-bottom: $border-light; + border-bottom: var(--border-light); display: flex; position: relative; &__label { - padding-left: $base-spacing-unit; + padding-left: var(--spacing-base-unit); } &__icon { @@ -61,17 +61,17 @@ // has active child &--is-active { - color: #2a3f5f; + color: var(--color-text-active); cursor: default; .sidebar-group__title { &__label { - font-weight: $font-weight-semibold; + font-weight: var(--font-weight-semibold); } &__icon { opacity: 1; svg { path { - fill: $color-accent; + fill: var(--color-accent); } } } @@ -97,15 +97,15 @@ color: #69738a; cursor: pointer; font-size: 14px; - font-weight: $font-weight-normal; + font-weight: var(--font-weight-normal); line-height: 14px; text-transform: capitalize; background-color: #f3f6fa; - padding: $half-spacing-unit; - padding-left: $base-spacing-unit; + padding: var(--spacing-half-unit); + padding-left: var(--spacing-base-unit); padding-right: 0; text-align: left; - border-bottom: $border-light; + border-bottom: var(--border-light); position: relative; overflow: hidden; &::before { @@ -115,7 +115,7 @@ top: 0; left: 0; width: 5px; - background-color: $color-accent; + background-color: var(--color-accent); transform: scaleX(0); transform-origin: left center; will-change: transform; @@ -138,7 +138,7 @@ transform: none; } color: #2a3f5f; - font-weight: $font-weight-semibold; + font-weight: var(--font-weight-semibold); cursor: default; span { transform: translateX(5px); diff --git a/src/styles/components/widgets/_checkbox.scss b/src/styles/components/widgets/_checkbox.scss index 4892207d5..fbf0e359c 100644 --- a/src/styles/components/widgets/_checkbox.scss +++ b/src/styles/components/widgets/_checkbox.scss @@ -1,5 +1,5 @@ .checkbox__group { - padding-left: 12px; + padding-left: var(--spacing-half-unit); text-align: left; } @@ -22,26 +22,26 @@ .checkbox__box { height: 18px; width: 18px; - border: 1px solid #a9b3c7; - border-radius: 3px; + border: var(--border-default); + border-radius: var(--border-radius-small); cursor: pointer; display: inline-block; vertical-align: middle; text-align: center; } - +// TODO: replace with svg icon .checkbox__check { - color: #6D6D6D; - font-size: 12px; + color: var(--color-text-base); + font-size: var(--spacing-half-unit); } .icon-check-mark:before { - content: "\2714"; + content: '\2714'; } .checkbox__label { - padding-left: 6px; - font-size: 12px; + padding-left: var(--spacing-quarter-unit); + font-size: var(--spacing-half-unit); display: inline-block; line-height: 20px; text-align: left; diff --git a/src/styles/components/widgets/_colorpicker.scss b/src/styles/components/widgets/_colorpicker.scss index 9d4596a87..15108bf82 100644 --- a/src/styles/components/widgets/_colorpicker.scss +++ b/src/styles/components/widgets/_colorpicker.scss @@ -7,20 +7,16 @@ $slider-picker-height: 10px; left: -90px; position: absolute; top: 100%; - - margin: $quarter-spacing-unit 0 $base-spacing-unit; + margin: var(--spacing-quarter-unit) 0 var(--spacing-base-unit); width: $colorpicker-width; - background-color: $color-white; - - border-radius: $border-radius; - + background-color: var(--color-white); + border-radius: var(--border-radius); $shadow-color: rgba(0, 0, 0, 0.15); @include vendor( - box-shadow, ($shadow-color 0px 0px 0px 1px, $shadow-color 0px 8px 16px) + box-shadow, ($shadow-color 0 0 0 1px, $shadow-color 0 8px 16px) ); @include z-index('cloud'); } - .colorpicker__cover { position: fixed; top: 0; @@ -31,27 +27,27 @@ $slider-picker-height: 10px; } .colorpicker__container { - display: inline-block; + display: flex; + align-items: center; line-height: 2; position: relative; } .colorpicker { - display: inline-block; - width: 32px; - height: 32px; - border-radius: 50%; - border: 1px solid $color-border-secondary; - vertical-align: middle; - padding-top: $sixth-spacing-unit; - padding-left: $sixth-spacing-unit; + $size: 26px; + display: flex; + width: $size; + height: $size; + border-radius: 100%; + border: var(--border-default); + padding: var(--spacing-eighth-unit); } .colorpicker__selected-color { - margin-left: $half-spacing-unit; - color: $color-text; - font-weight: $font-weight-light; - font-size: $font-size-small; + margin-left: var(--spacing-half-unit); + color: var(--color-text-base); + font-weight: var(--font-weight-semibold); + font-size: var(--font-size-small); display: inline-block; vertical-align: middle; text-transform: uppercase; @@ -59,17 +55,17 @@ $slider-picker-height: 10px; .colorpicker__swatch { border-radius: 50%; - width: 28px; - height: 28px; - vertical-align: middle; + flex-grow: 1; + width: 100%; + height: 100%; } %colorpicker__component { position: relative; overflow: hidden; - margin: 0 $half-spacing-unit; - border: 1px solid $color-border; - border-radius: $border-radius / 2; + margin: 0 var(--spacing-half-unit); + border: var(--border-default); + border-radius: var(--border-radius-small); cursor: pointer; } @@ -80,12 +76,12 @@ $slider-picker-height: 10px; } .colorpicker__custom-input { - padding: $quarter-spacing-unit $half-spacing-unit; + padding: var(--spacing-quarter-unit) var(--spacing-half-unit); } /* Wrapper style for Hue and Alpha sliders and swatch */ .colorpicker__controls { - margin: 0 $half-spacing-unit; + margin: 0 var(--spacing-half-unit); .colorpicker__sliders { width: 200px; @@ -94,15 +90,15 @@ $slider-picker-height: 10px; @extend %colorpicker__component; margin: auto 0; height: $slider-picker-height; - margin-top: $eighth-spacing-unit; + margin-top: var(--spacing-eighth-unit); } } .colorpicker__active { @extend %colorpicker__component; - height: $base-spacing-unit; - width: $base-spacing-unit; - margin: $eighth-spacing-unit 0px 0px $half-spacing-unit; + height: var(--spacing-base-unit); + width: var(--spacing-base-unit); + margin: var(--spacing-eighth-unit) 0 0 var(--spacing-half-unit); .colorpicker__active-swatch { position: absolute; @@ -110,19 +106,19 @@ $slider-picker-height: 10px; right: 0; bottom: 0; left: 0; - border-radius: $border-radius / 2; + border-radius: var(--border-radius-small); border: 1px solid #eee; } } } .colorpicker__preset-colors { - margin: 0 $half-spacing-unit; + margin: 0 var(--spacing-half-unit); } .colorpicker__title { - margin: $eighth-spacing-unit $quarter-spacing-unit; - font-size: $h5-size; - font-weight: $font-weight-semibold; - color: $color-header-text; + margin: var(--spacing-eighth-unit) var(--spacing-quarter-unit); + font-size: var(--font-size-h5); + font-weight: var(--font-weight-semibold); + color: var(--color-text-header); } diff --git a/src/styles/components/widgets/_dropdown.scss b/src/styles/components/widgets/_dropdown.scss index 9c095d85b..6c4d15625 100644 --- a/src/styles/components/widgets/_dropdown.scss +++ b/src/styles/components/widgets/_dropdown.scss @@ -1,52 +1,87 @@ -.dropdown--dark .Select-control { - background-color: $color-background-color-inverse; -} - -.dropdown--dark .Select-option { - background-color: $color-background-color-inverse; -} - -.dropdown--dark .Select-option.is-selected { - background-color: $color-border; -} - -.dropdown--dark .Select-option.is-focused { - background-color: $color-secondary-border; -} .dropdown-container { + @import 'node_modules/react-select/scss/default'; width: 100%; -} -.Select { - &:not(.is-open){ - .Select-control { - &:hover { - border-color: $color-border-dark; - .Select-arrow{ - opacity: 1; + + .Select { + &:not(.is-open) { + .Select-control { + &:hover { + border-color: var(--color-border-dark); + .Select-arrow { + opacity: 1; + } } } } + &-control { + border: var(--border-default); + box-shadow: none !important; + color: var(--color-text-base); + } + &-option { + color: var(--color-text-base); + } + &-menu-outer { + border: var(--border-default); + } } - &-control { - border: $border; - box-shadow: none !important; + .Select.is-focused:not(.is-open) > .Select-control { + border-color: var(--color-border-accent); } - &-option { - color: $color-text; + .Select.has-value.Select--single + > .Select-control + .Select-value + .Select-value-label, + .Select.has-value.is-pseudo-focused.Select--single + > .Select-control + .Select-value + .Select-value-label { + color: var(--color-text-base); } - &-menu-outer { - border: $border; + .Select-arrow { + opacity: 0.5; + } + + .Select-option { + &.is-selected { + color: var(--color-text-active); + font-weight: var(--font-weight-semibold); + background: var(--color-background-light); + } + &.is-focused { + background: var(--color-background-light); + color: var(--color-text-active); + } + } + .Select-option:hover { + color: var(--color-text-active); + background: var(--color-background-light); + } + + .Select-placeholder, + .Select--single > .Select-control .Select-value { + color: var(--color-text-base); + } + .Select-value-label { + color: var(--color-text-base) !important; + } + .Select-placeholder { + color: var(--color-text-placeholder); + } + .dropdown--dark { + .Select { + &-control { + background-color: var(--color-background-inverse); + } + &-option { + background-color: var(--color-background-inverse); + &.is-selected { + background-color: var(--color-border-default); + } + } + &.is-focused { + background-color: var(--color-border-light); + } + } } -} -.Select.is-focused:not(.is-open) > .Select-control{ - border-color: $color-accent; -} -.Select.has-value.Select--single > .Select-control .Select-value .Select-value-label, .Select.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value .Select-value-label{ - color: $color-text; -} -.Select-arrow{ - opacity: 0.5; -} -.Select-placeholder{ - color: $color-text-placeholder; } diff --git a/src/styles/components/widgets/_multi-format-text-editor.scss b/src/styles/components/widgets/_multi-format-text-editor.scss index 077dc8f7d..98e45fd8f 100644 --- a/src/styles/components/widgets/_multi-format-text-editor.scss +++ b/src/styles/components/widgets/_multi-format-text-editor.scss @@ -1,7 +1,5 @@ // MULTI FORMAT EDITOR STYLES -$multi-format-editor-background: #fafbfd; - .multi-format-editor { * { box-sizing: border-box; @@ -28,31 +26,31 @@ $multi-format-editor-background: #fafbfd; flex-grow: 1; display: flex; &.LATEX { - background-color: $multi-format-editor-background; + background-color: var(--color-background-light); .latex-editor { display: flex; flex-grow: 1; textarea { flex-grow: 1; min-height: 0; - border: $border; + border: var(--border-default); box-sizing: border-box; - color: $color-text; + color: var(--color-text-base); } } - padding: $half-spacing-unit; + padding: var(--spacing-half-unit); } .rich-text-editor__root { width: 100%; - color: $color-text; + color: var(--color-text-base); .rich-text-editor__controls { display: flex; justify-content: space-evenly; .icon-link { transform: translateY(3px); display: inline-block; - fill: $color-text; + fill: var(--color-text-base); // prevent user agent override width: 15px !important; height: 15px !important; @@ -65,8 +63,8 @@ $multi-format-editor-background: #fafbfd; .multi-format-editor__root { height: 215px; width: 100%; - border: $border; - border-radius: 5px; + border: var(--border-default); + border-radius: var(--border-radius); box-sizing: border-box; } @@ -80,36 +78,36 @@ $multi-format-editor-background: #fafbfd; &.top-tab { width: 50%; overflow: hidden; - color: $color-text; + color: var(--color-text-base); &.left { border-top-left-radius: 5px; - border-right: $border; + border-right: var(--border-default); } &.right { border-top-right-radius: 5px; } &:not(.selected) { - border-bottom: $border; + border-bottom: var(--border-default); } } &.bottom-tab { - border-top: 1px solid $color-border; + border-top: var(--border-default); width: 100%; display: block; - color: $color-text; + color: var(--color-text-base); } &.selected { - background: $multi-format-editor-background; - font-weight: $font-weight-semibold; + background: var(--color-background-light); + font-weight: var(--font-weight-semibold); } &:hover:not(.selected) { cursor: pointer; - color: $color-active-text; - background-color: $color-button-secondary; + color: var(--color-text-active); + background-color: var(--color-background-light); } } @@ -128,54 +126,24 @@ $multi-format-editor-background: #fafbfd; .confirmation-panel__message { line-height: 20px; &-primary { - font-weight: $font-weight-semibold; - color: $color-text; + font-weight: var(--font-weight-semibold); + color: var(--color-text-base); } } .confirmation-panel__header { - color: $color-header-text; + color: var(--color-text-header); margin-top: 0; margin-bottom: 5px; font-weight: 600; } .confirmation-panel__message-secondary { - color: $color-text; -} - -.confirmation-panel__cancel-button { - background-color: $multi-format-editor-background; - border: 1px solid $color-border; - color: $color-text; - font-weight: 600; - letter-spacing: 0px; - &:hover { - background-color: rgba(163, 178, 198, 0.2); - border-color: $color-secondary-border; - color: $color-text; - } - &:active { - background-color: rgba(163, 178, 198, 0.35); - } + color: var(--color-text-base); } .confirmation-panel__continue-button { margin-left: 10px; - background-color: $color-accent; - border: 1px solid $color-accent; - color: #ffffff; - text-shadow: 0px 1px 2px rgba(42, 63, 95, 0.7); - &:hover { - background-color: $color-button-hover; - border: 1px solid $color-button-hover; - color: #ffffff; // Repeating in case the button is made with an anchor tag - } - &:active { - background-color: $color-accent-shade; - border: 1px solid $color-accent-shade; - color: #ffffff; // Repeating in case the button is made with an anchor tag - } } // LATEX & HTML EDITOR STYLES @@ -189,7 +157,7 @@ $multi-format-editor-background: #fafbfd; box-shadow: none; // add our styles - padding: 6px; + padding: var(--spacing-quarter-unit); resize: none; height: 100%; width: 100%; @@ -202,6 +170,14 @@ $multi-format-editor-background: #fafbfd; } &.html { min-height: 138px; + width: 100%; + } +} +.html-editor { + width: 100%; + textarea { + width: 100%; + color: var(--color-text-base); } } @@ -216,7 +192,7 @@ $multi-format-editor-background: #fafbfd; .rich-text-editor__editor .public-DraftEditorPlaceholder-root, .rich-text-editor__editor .public-DraftEditor-content { - padding: $quarter-spacing-unit; + padding: var(--spacing-quarter-unit); } .rich-text-editor__editor .public-DraftEditor-content { @@ -246,50 +222,70 @@ $multi-format-editor-background: #fafbfd; padding-top: 10px; padding-bottom: 5px; user-select: none; - background: $multi-format-editor-background; - border-bottom: 1px solid $color-border; + background: var(--color-background-light); + border-bottom: var(--border-default); } .rich-text-editor__styleButton__wrapper { - padding: 0 $quarter-spacing-unit; + padding: 0 var(--spacing-quarter-unit); } .rich-text-editor__styleButton { - color: $color-text; + color: var(--color-text-base); cursor: pointer; display: inline-block; margin: 0; - min-height: $base-spacing-unit; - min-width: $base-spacing-unit; + min-height: var(--spacing-base-unit); + min-width: var(--spacing-base-unit); text-align: center; - background-color: #ffffff; - border: 1px solid $color-border; - border-radius: 2px; + background-color: transparent; + border: var(--border-default); + border-radius: var(--border-radius-small); line-height: 20px; + position: relative; + + &::before { + content: ''; + position: absolute; + bottom: -1px; + height: 1px; + width: calc(100% + 2px); + left: -1px; + background: var(--color-accent); + will-change: transform; + transform-origin: center center; + transform: scaleX(0); + @include trans; + } &:hover { - color: $color-active-text; - background-color: $color-button-secondary; + color: var(--color-text-active); + background-color: var(--color-white); + &::before { + transform: none; + } } } .rich-text-editor__styleButton--active { - background-color: $color-accent; - border: 1px solid $color-accent-shade; - color: #ffffff; - + background-color: var(--color-accent); + border: var(--border-accent-shade); + color: var(--color-white); // Repeating the same styles to override the natural hover &:hover { - background-color: $color-accent; - border: 1px solid $color-accent-shade; - color: #ffffff; + background-color: var(--color-accent); + border: var(--border-accent-shade); + color: var(--color-white); + &::before { + transform: scaleX(0); + } } } .link-editor { - background-color: $multi-format-editor-background; - border: $border; - padding: $half-spacing-unit; + background-color: var(--color-background-light); + border: var(--border-default); + padding: var(--spacing-half-unit); position: absolute; z-index: 1; display: flex; @@ -304,10 +300,10 @@ $multi-format-editor-background: #fafbfd; } .link-editor__input { - border: $border; - color: $color-text; + border: var(--border-default); + color: var(--color-text-base); overflow: scroll; - padding: 0px 10px; + padding: 0 10px; width: 100%; margin-top: 10px; } diff --git a/src/styles/components/widgets/_numeric-input.scss b/src/styles/components/widgets/_numeric-input.scss index a9aa59755..413414fd8 100644 --- a/src/styles/components/widgets/_numeric-input.scss +++ b/src/styles/components/widgets/_numeric-input.scss @@ -1,20 +1,20 @@ .numeric-input__wrapper { line-height: 20px; max-width: 100%; - color: $color-text; + color: var(--color-text-base); } .numeric-input__number { display: inline-block; - border: 1px solid $color-border; + border: var(--border-default); background: white; cursor: text; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; - border-radius: 2px; - padding: 6px 6px 6px 12px; + border-radius: var(--border-radius-small); + padding: var(--spacing-quarter-unit) var(--spacing-quarter-unit) var(--spacing-quarter-unit) var(--spacing-half-unit); width: 62px; vertical-align: middle; font-size: inherit; @@ -25,8 +25,8 @@ .numeric-input__caret-box { display: inline-block; max-height: 32px; - margin-left: 6px; - margin-right: 12px; + margin-left: var(--spacing-quarter-unit); + margin-right: var(--spacing-half-unit); vertical-align: middle; box-sizing: border-box; } @@ -37,10 +37,10 @@ .numeric-input__caret { cursor: pointer; - background-color: #f8f8f9; - border: 1px solid #bec8d9; + background-color: var(--color-rhino-light-5); + border: var(--border-light); border-radius: 1px; - line-height: 12px; + line-height: var(--spacing-half-unit); text-align: center; } @@ -48,12 +48,12 @@ // to prevent user agent override width: 13px !important; height: 13px !important; - fill: $color-text !important; + fill: var(--color-text-base) !important; } .numeric-bottom-caret-modifier { // to prevent user agent override width: 13px !important; height: 13px !important; - fill: $color-text !important; + fill: var(--color-text-base) !important; } diff --git a/src/styles/components/widgets/_radio-block.scss b/src/styles/components/widgets/_radio-block.scss index e94027ca5..5663ee1cb 100644 --- a/src/styles/components/widgets/_radio-block.scss +++ b/src/styles/components/widgets/_radio-block.scss @@ -1,34 +1,38 @@ .radio-block { width: 100%; &__option { - padding: 6px 12px; - background-color: #fff; - border: $border; + padding: var(--spacing-quarter-unit) var(--spacing-half-unit); + background-color: var(--color-white); + border: var(--border-default); display: inline-block; cursor: pointer; min-width: 60px; text-align: center; &:not(.radio-block__option--active) { &:hover { - background-color: $color-background-light; + background-color: var(--color-background-light); } } &--active { - background-color: $color-accent; - color: #fff; + background-color: var(--color-accent); + color: var(--color-white); border: $border-accent-shade; margin-left: -1px; cursor: default; } + &:not(:first-child):not(:last-child){ + border-left: 0; + } &:last-child { border-top-right-radius: 3px; border-bottom-right-radius: 3px; + border-left: 0; } &:first-child { border-top-left-radius: 3px; border-bottom-left-radius: 3px; &:not(.radio-block__option--active) { - border-left: $border; + border-left: var(--border-default); } } } diff --git a/src/styles/variables/_colors.scss b/src/styles/variables/_colors.scss index 9c76a69a8..08825b94c 100644 --- a/src/styles/variables/_colors.scss +++ b/src/styles/variables/_colors.scss @@ -95,7 +95,7 @@ $colors: ( rhino-light-5: $color-rhino-light-5, dodger: $color-dodger, dodger-shade: $color-dodger-shade, - dodger-shade-mid: $color-dodger-shade-mid, + dodger-shade-mid: $color-dodger-shade, aqua: $color-aqua, aqua-shade: $color-aqua-shade, lavender: $color-lavender, @@ -106,9 +106,6 @@ $colors: ( sienna: $color-sienna ); - - - /* * COLORS */ diff --git a/src/styles/variables/_defaults.scss b/src/styles/variables/_defaults.scss index 983f06417..e4433baae 100644 --- a/src/styles/variables/_defaults.scss +++ b/src/styles/variables/_defaults.scss @@ -1,8 +1,8 @@ @import "./colors"; @import "./typography"; @import "./units"; -@import './theme'; @import "./layout"; +@import './theme'; $var-maps: ( diff --git a/src/styles/variables/_layout.scss b/src/styles/variables/_layout.scss index 0ee0492b9..b6b12c1ac 100644 --- a/src/styles/variables/_layout.scss +++ b/src/styles/variables/_layout.scss @@ -1,6 +1,5 @@ -$layout: ( - sidebar: (width: 100px), - panel:(width: 42px) -); - -//$borders: (radius: (small: 2px, default: 5px)); +/* + * Layout + */ +$layout-panel-width: 425px; +$layout-sidebar-width: 100px; diff --git a/src/styles/variables/_main.scss b/src/styles/variables/_main.scss index db5341a30..6e5738f57 100644 --- a/src/styles/variables/_main.scss +++ b/src/styles/variables/_main.scss @@ -1,6 +1,6 @@ @import 'defaults'; -:root { +.plotly-editor { // Base Color Variables @each $var, $val in $colors { @if type-of($val) == map { @@ -31,6 +31,10 @@ @each $var, $val in $border-colors { #{--color-border}-#{$var}: $val; } + // Background Colors + @each $var, $val in $fills { + #{--color}-#{$var}: $val; + } // Button Color Variables @each $var, $val in $buttons { @if type-of($val) == map { @@ -57,6 +61,20 @@ @each $var, $val in $borders { #{--border}-#{$var}: $val; } + + @each $var, $val in $text-shadows { + #{--text-shadow}-#{$var}: $val; + } + @each $var, $val in $box-shadows { + #{--box-shadow}-#{$var}: $val; + } + + @each $var, $val in $panel { + #{--panel}-#{$var}: $val; + } + @each $var, $val in $sidebar { + #{--sidebar}-#{$var}: $val; + } } /* @@ -94,11 +112,6 @@ $border-accent-shade: 1px solid $color-accent-shade; $border-radius: $default-border-radius; $border-radius-5: $default-border-radius-5; -/* - * Layout - */ -$layout-panel-width: 425px; -$layout-sidebar-width: 100px; /* * Typography diff --git a/src/styles/variables/_theme.scss b/src/styles/variables/_theme.scss index def254029..68030c4d4 100644 --- a/src/styles/variables/_theme.scss +++ b/src/styles/variables/_theme.scss @@ -16,26 +16,49 @@ $text: ( text-base: var(--color-rhino-dark), text-light: var(--color-rhino-medium-1), text-dark: var(--color-rhino-core), - active-text: var(--color-rhino-core) + text-header: var(--color-text-dark), + text-active: var(--color-rhino-core), + text-placeholder: var(--color-rhino-medium-1) ); // Border Colors $border-colors: ( default: var(--color-rhino-medium-2), light: var(--color-rhino-light-1), dark: var(--color-rhino-medium-1), - accent: var(--color-accent) + accent: var(--color-accent), + accent-shade: var(--color-accent-shade) ); // Border styles $borders: ( default:1px solid var(--color-border-default), light:1px solid var(--color-border-light), dark:1px solid var(--color-border-dark), - accent:1px solid var(--color-border-accentt) + accent:1px solid var(--color-border-accent), + accent-shade:1px solid var(--color-border-accent-shade), + radius: 5px, + radius-small: 2px +); +$fills: ( + background: var(--color-rhino-light-2), + background-light: var(--color-rhino-light-3), + background-inverse: var(--color-rhino-dark) +); + +$box-shadows: (base: 0px 2px 9px rgba(80, 103, 132, 0.2)); +$text-shadows: ( + dark-ui: 0 1px 2px rgba(42, 63, 95, 0.7), + dark-ui-inactive: 0 1px 1px rgba(42, 63, 95, 0.4) ); // Panel Styles + Colors -$panel: (background: #fafbfd); +$panel: ( + background: var(--color-background), + width: $layout-panel-width +); // Sidebar -$sidebar: (background: white); +$sidebar: ( + background: var(--color-white), + width: $layout-sidebar-width +); // Buttons $buttons: ( primary-base:( @@ -56,7 +79,7 @@ $buttons: ( secondary-base:( fill: transparent, border: var(--color-rhino-medium-2), - text: var(--color-text) + text: var(--color-text-base) ), secondary-hover:( fill: transparent, @@ -71,7 +94,7 @@ $buttons: ( tertiary-base:( fill: transparent, border: transparent, - text: var(--color-text) + text: var(--color-text-base) ), tertiary-hover:( fill: transparent, @@ -84,17 +107,17 @@ $buttons: ( text: var(--color-text-dark) ), default-base:( - fill: transparent, + fill: var(--color-rhino-light-3), border: var(--color-rhino-medium-2), - text: var(--color-text) + text: var(--color-text-base) ), default-hover:( - fill: transparent, + fill: var(--color-rhino-medium-2), border: var(--color-rhino-medium-1), text: var(--color-text-dark) ), default-active:( - fill: transparent, + fill: var(--color-rhino-medium-1), border: var(--color-rhino-medium-1), text: var(--color-text-dark) ), diff --git a/src/styles/variables/_typography.scss b/src/styles/variables/_typography.scss index 47fb3d6da..ef5389681 100644 --- a/src/styles/variables/_typography.scss +++ b/src/styles/variables/_typography.scss @@ -17,7 +17,7 @@ $font-size-medium: 14px; $h5-size: 16px; $font: ( - size: (body: 13px, small: 11px, medium:14px, large:16px, h5: 16px), + size: (base: 13px, small: 11px, medium:14px, large:16px, h5: 16px), weight: ( light: $font-weight-light, From f732a3b7776877b7441bc54dea4bbb20c6818cae Mon Sep 17 00:00:00 2001 From: Thomas Osmonson Date: Sat, 30 Dec 2017 18:32:19 -0600 Subject: [PATCH 07/28] fix buttons for tests --- src/components/containers/AnnotationAccordion.js | 2 +- src/components/containers/TraceAccordion.js | 2 +- src/components/containers/__tests__/AnnotationAccordion-test.js | 2 +- src/components/containers/__tests__/TraceAccordion-test.js | 2 +- src/components/widgets/Dropdown.js | 1 - src/postcss.js | 2 ++ 6 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/containers/AnnotationAccordion.js b/src/components/containers/AnnotationAccordion.js index a95043010..7fbfbb91d 100644 --- a/src/components/containers/AnnotationAccordion.js +++ b/src/components/containers/AnnotationAccordion.js @@ -38,7 +38,7 @@ export default class AnnotationAccordion extends Component { const addButton = canAdd && (