diff --git a/packages/asc-web-components/src/components/ThemeProvider/index.js b/packages/asc-web-components/src/components/ThemeProvider/index.js
deleted file mode 100644
index e80c715b79..0000000000
--- a/packages/asc-web-components/src/components/ThemeProvider/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export default from "./ThemeProvider";
diff --git a/packages/asc-web-components/src/components/field-container/index.js b/packages/asc-web-components/src/components/field-container/index.js
index 6fff7d8dce..74c7daf401 100644
--- a/packages/asc-web-components/src/components/field-container/index.js
+++ b/packages/asc-web-components/src/components/field-container/index.js
@@ -1,80 +1,10 @@
import React from "react";
import PropTypes from "prop-types";
-import styled, { css } from "styled-components";
-import { tablet } from "../../utils/device";
+
import Label from "../label";
import HelpButton from "../help-button";
import Text from "../text";
-
-function getHorizontalCss(labelWidth) {
- return css`
- display: flex;
- flex-direction: row;
- align-items: start;
- margin: 0 0 16px 0;
-
- .field-label {
- line-height: 32px;
- margin: 0;
- position: relative;
- }
- .field-label-icon {
- display: inline-flex;
- min-width: ${labelWidth};
- width: ${labelWidth};
- }
- .field-body {
- flex-grow: 1;
- }
- .icon-button {
- position: relative;
- margin-top: 10px;
- margin-left: 8px;
- }
- `;
-}
-
-function getVerticalCss() {
- return css`
- display: flex;
- flex-direction: column;
- align-items: start;
- margin: 0 0 16px 0;
-
- .field-label {
- line-height: 13px;
- height: 15px;
- display: inline-block;
- }
- .field-label-icon {
- display: inline-flex;
- width: 100%;
- margin: 0 0 8px 0;
- }
- .field-body {
- width: 100%;
- }
- .icon-button {
- position: relative;
- margin: 0;
- padding: 0px 8px;
- width: 13px;
- height: 13px;
- }
- `;
-}
-
-const Container = styled.div`
- .error-label {
- max-width: ${(props) => (props.maxwidth ? props.maxwidth : "293px")};
- }
- ${(props) =>
- props.vertical ? getVerticalCss() : getHorizontalCss(props.maxLabelWidth)}
-
- @media ${tablet} {
- ${getVerticalCss()}
- }
-`;
+import Container from "./styled-field-container";
class FieldContainer extends React.Component {
constructor(props) {
diff --git a/packages/asc-web-components/src/components/field-container/styled-field-container.js b/packages/asc-web-components/src/components/field-container/styled-field-container.js
new file mode 100644
index 0000000000..2c93f79911
--- /dev/null
+++ b/packages/asc-web-components/src/components/field-container/styled-field-container.js
@@ -0,0 +1,83 @@
+import styled, { css } from "styled-components";
+import { tablet } from "../../utils/device";
+import { Base } from "../../themes";
+function getHorizontalCss(labelWidth) {
+ return css`
+ display: flex;
+ flex-direction: row;
+ align-items: start;
+ margin: ${(props) => props.theme.fieldContainer.horizontal.margin};
+
+ .field-label {
+ line-height: ${(props) =>
+ props.theme.fieldContainer.horizontal.label.lineHeight};
+ margin: ${(props) => props.theme.fieldContainer.horizontal.label.margin};
+ position: relative;
+ }
+ .field-label-icon {
+ display: inline-flex;
+ min-width: ${labelWidth};
+ width: ${labelWidth};
+ }
+ .field-body {
+ flex-grow: ${(props) => props.theme.fieldContainer.horizontal.body.width};
+ }
+ .icon-button {
+ position: relative;
+ margin-top: ${(props) =>
+ props.theme.fieldContainer.horizontal.iconButton.marginTop};
+ margin-left: ${(props) =>
+ props.theme.fieldContainer.horizontal.iconButton.marginLeft};
+ }
+ `;
+}
+
+function getVerticalCss() {
+ return css`
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+ margin: ${(props) => props.theme.fieldContainer.vertical.margin};
+
+ .field-label {
+ line-height: ${(props) =>
+ props.theme.fieldContainer.vertical.label.lineHeight};
+ height: ${(props) => props.theme.fieldContainer.vertical.label.height};
+ display: inline-block;
+ }
+ .field-label-icon {
+ display: inline-flex;
+ width: ${(props) => props.theme.fieldContainer.vertical.labelIcon.width};
+ margin: ${(props) =>
+ props.theme.fieldContainer.vertical.labelIcon.margin};
+ }
+ .field-body {
+ width: ${(props) => props.theme.fieldContainer.vertical.body.width};
+ }
+ .icon-button {
+ position: relative;
+ margin: ${(props) =>
+ props.theme.fieldContainer.vertical.iconButton.margin};
+ padding: ${(props) =>
+ props.theme.fieldContainer.vertical.iconButton.padding};
+ width: ${(props) => props.theme.fieldContainer.vertical.iconButton.width};
+ height: ${(props) =>
+ props.theme.fieldContainer.vertical.iconButton.height};
+ }
+ `;
+}
+
+const Container = styled.div`
+ .error-label {
+ max-width: ${(props) => (props.maxwidth ? props.maxwidth : "293px")};
+ }
+ ${(props) =>
+ props.vertical ? getVerticalCss() : getHorizontalCss(props.maxLabelWidth)}
+
+ @media ${tablet} {
+ ${getVerticalCss()}
+ }
+`;
+
+Container.defaultProps = { theme: Base };
+export default Container;
diff --git a/packages/asc-web-components/src/components/icons/svg/index.js b/packages/asc-web-components/src/components/icons/svg/index.js
index bdbc4bc996..ea7103eed9 100644
--- a/packages/asc-web-components/src/components/icons/svg/index.js
+++ b/packages/asc-web-components/src/components/icons/svg/index.js
@@ -101,7 +101,6 @@ import OrigMyspaceIcon from "./myspace.react.svg";
import OrigBloggerIcon from "./blogger.react.svg";
import OrigYahooIcon from "./yahoo.react.svg";
import OrigCalendarEmptyIcon from "./calendar.empty.react.svg";
-import OrigRefreshIcon from "./refresh.react.svg";
import OrigForwardIcon from "./forward.react.svg";
import OrigFileActionsLockedIcon from "./file.actions.locked.react.svg";
import OrigReplyAllIcon from "./reply.all.react.svg";
@@ -142,15 +141,11 @@ import OrigNavLogoOpenedIcon from "./nav.logo.opened.react.svg";
import OrigCheckIcon from "./check.react.svg";
-
import OrigDangerIcon from "./danger.react.svg";
import OrigInfoIcon from "./info.react.svg";
-
import OrigArrowPathIcon from "./arrow.path.react.svg";
-
-
import OrigQuestionIcon from "./question.react.svg";
import OrigShareGoogleIcon from "./share.google.react.svg";
@@ -631,7 +626,7 @@ export const RectangleFilterClickIcon = createStyledIcon(
OrigRectangleFilterClickIcon,
"RectangleFilterClickIcon"
);
-export const RefreshIcon = createStyledIcon(OrigRefreshIcon, "RefreshIcon");
+
export const RemoveIcon = createStyledIcon(OrigRemoveIcon, "RemoveIcon");
export const ReplyAllIcon = createStyledIcon(OrigReplyAllIcon, "ReplyAllIcon");
export const ReplyIcon = createStyledIcon(OrigReplyIcon, "ReplyIcon");
@@ -688,9 +683,6 @@ export const ArrowPathIcon = createStyledIcon(
"ArrowPathIcon"
);
-
-
-
export const QuestionIcon = createStyledIcon(
OrigQuestionIcon,
"ToggleButtonIcon",
diff --git a/packages/asc-web-components/src/components/password-input/index.js b/packages/asc-web-components/src/components/password-input/index.js
index eceef40b1e..51348d8f16 100644
--- a/packages/asc-web-components/src/components/password-input/index.js
+++ b/packages/asc-web-components/src/components/password-input/index.js
@@ -1,127 +1,20 @@
import React from "react";
-import styled from "styled-components";
import PropTypes from "prop-types";
import equal from "fast-deep-equal/react";
-import { tablet, mobile } from "../../utils/device";
import InputBlock from "../input-block";
-import { Icons } from "../icons";
+import { RefreshIcon } from "./svg";
import Link from "../link";
import Text from "../text";
import Tooltip from "../tooltip";
import { Base } from "../../themes";
-
-// eslint-disable-next-line no-unused-vars
-const SimpleInput = ({ onValidateInput, onCopyToClipboard, ...props }) => (
-
-);
-
-SimpleInput.propTypes = {
- onValidateInput: PropTypes.func,
- onCopyToClipboard: PropTypes.func,
-};
-
-const StyledInput = styled(SimpleInput)`
- display: flex;
- align-items: center;
- line-height: 32px;
- flex-direction: row;
- flex-wrap: wrap;
- @media ${tablet} {
- flex-wrap: wrap;
- }
-
- .append {
- padding-right: 8px;
- }
-
- .prepend-children {
- padding: 0;
- }
-
- .break {
- flex-basis: 100%;
- height: 0;
- }
-
- .text-tooltip {
- line-height: 14px;
- margin-top: -2px;
- }
-
- .password-field-wrapper {
- display: flex;
- width: auto;
-
- @media ${mobile} {
- width: 100%;
- }
- }
-`;
-
-const PasswordProgress = styled.div`
- ${(props) =>
- props.inputWidth ? `width: ${props.inputWidth};` : `flex: auto;`}
- .input-relative {
- position: relative;
- svg {
- overflow: hidden;
- vertical-align: middle;
- }
- }
- *,
- *::before,
- *::after {
- box-sizing: border-box;
- }
-`;
-
-const NewPasswordButton = styled.div`
- margin: 0 16px;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
- svg {
- overflow: hidden;
- vertical-align: middle;
- margin-bottom: 4px;
- }
- :hover {
- cursor: pointer;
- }
-`;
-
-const CopyLink = styled.div`
- margin-top: -6px;
- @media ${tablet} {
- width: 100%;
- margin-left: 0px;
- margin-top: -1px;
- }
-`;
-
-const TooltipStyle = styled.div`
- .__react_component_tooltip {
- }
-`;
-const Progress = styled.div`
- border: 1.5px solid
- ${(props) =>
- !props.isDisabled && props.progressColor
- ? props.progressColor
- : "transparent"};
- border-radius: 2px;
- margin-top: -1px;
- width: ${(props) => (props.progressWidth ? props.progressWidth + "%" : "0%")};
-`;
-
-const StyledTooltipContainer = styled(Text)`
- //margin: 8px 16px 16px 16px;
-`;
-
-const StyledTooltipItem = styled(Text)`
- margin-left: 8px;
- height: 24px;
- color: ${(props) => (props.valid ? "#44bb00" : "#B40404")};
-`;
+import {
+ Progress,
+ CopyLink,
+ NewPasswordButton,
+ PasswordProgress,
+ StyledInput,
+} from "./styled-password-input";
class PasswordInput extends React.Component {
constructor(props) {
@@ -441,7 +334,6 @@ class PasswordInput extends React.Component {
} = this.props;
const { type, progressColor, progressWidth, inputValue } = this.state;
- const iconsColor = isDisabled ? "#D0D5DA" : "#A3A9AE";
const iconName = type === "password" ? "EyeOffIcon" : "EyeIcon";
return (
@@ -459,7 +351,6 @@ class PasswordInput extends React.Component {
scale={scale}
size={size}
type={type}
- iconColor={`${iconsColor} !important`}
iconSize={16}
hoverColor={"#A3A9AE"}
isIconFill={true}
@@ -500,6 +391,7 @@ class PasswordInput extends React.Component {
style,
simpleView,
hideNewPasswordButton,
+ isDisabled,
} = this.props;
const { copyLabel, disableCopyAction } = this.state;
@@ -523,15 +415,14 @@ class PasswordInput extends React.Component {
data-tip=""
data-event="click"
ref={this.ref}
+ isDisabled={isDisabled}
>
{this.renderInputGroup()}
{!hideNewPasswordButton ? (
-
-
+
@@ -543,7 +434,7 @@ class PasswordInput extends React.Component {
type="action"
isHovered={true}
fontSize="13px"
- color={iconsColor}
+ className="password-input_link"
isSemitransparent={disableCopyAction}
onClick={this.copyToClipboard.bind(this, emailInputName)}
>
diff --git a/packages/asc-web-components/src/components/password-input/styled-password-input.js b/packages/asc-web-components/src/components/password-input/styled-password-input.js
new file mode 100644
index 0000000000..f9617650cd
--- /dev/null
+++ b/packages/asc-web-components/src/components/password-input/styled-password-input.js
@@ -0,0 +1,151 @@
+import React from "react";
+import styled from "styled-components";
+import PropTypes from "prop-types";
+
+import { tablet, mobile } from "../../utils/device";
+import { Base } from "../../themes";
+// eslint-disable-next-line no-unused-vars
+const SimpleInput = ({ onValidateInput, onCopyToClipboard, ...props }) => (
+
+);
+
+SimpleInput.propTypes = {
+ onValidateInput: PropTypes.func,
+ onCopyToClipboard: PropTypes.func,
+};
+
+const StyledInput = styled(SimpleInput)`
+ display: flex;
+ align-items: center;
+ line-height: ${(props) => props.theme.passwordInput.lineHeight};
+ flex-direction: row;
+ flex-wrap: wrap;
+
+ .input-relative {
+ svg {
+ path {
+ fill: ${(props) =>
+ props.isDisabled
+ ? props.theme.passwordInput.disableColor
+ : props.theme.passwordInput.color} !important;
+ }
+ }
+ }
+
+ @media ${tablet} {
+ flex-wrap: wrap;
+ }
+
+ .append {
+ padding-right: 8px;
+ }
+
+ .prepend-children {
+ padding: 0;
+ }
+
+ .break {
+ flex-basis: 100%;
+ height: 0;
+ }
+
+ .text-tooltip {
+ line-height: ${(props) => props.theme.passwordInput.text.lineHeight};
+ margin-top: ${(props) => props.theme.passwordInput.text.marginTop};
+ }
+
+ .password-field-wrapper {
+ display: flex;
+ width: auto;
+
+ @media ${mobile} {
+ width: 100%;
+ }
+ }
+`;
+StyledInput.defaultProps = { theme: Base };
+
+const PasswordProgress = styled.div`
+ ${(props) =>
+ props.inputWidth ? `width: ${props.inputWidth};` : `flex: auto;`}
+ .input-relative {
+ position: relative;
+ svg {
+ overflow: hidden;
+ vertical-align: middle;
+ }
+ }
+
+ *,
+ *::before,
+ *::after {
+ box-sizing: border-box;
+ }
+`;
+PasswordProgress.defaultProps = { theme: Base };
+
+const NewPasswordButton = styled.div`
+ margin: ${(props) => props.theme.passwordInput.newPassword.margin};
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ svg {
+ overflow: ${(props) => props.theme.passwordInput.newPassword.svg.overflow};
+ vertical-align: middle;
+ margin-bottom: ${(props) =>
+ props.theme.passwordInput.newPassword.svg.marginBottom};
+ path {
+ fill: ${(props) =>
+ props.isDisabled
+ ? props.theme.passwordInput.disableColor
+ : props.theme.passwordInput.color};
+ }
+ }
+ :hover {
+ cursor: pointer;
+ }
+`;
+NewPasswordButton.defaultProps = { theme: Base };
+
+const CopyLink = styled.div`
+ margin-top: ${(props) => props.theme.passwordInput.link.marginTop};
+ .password-input_link {
+ color: ${(props) =>
+ props.isDisabled
+ ? props.theme.passwordInput.disableColor
+ : props.theme.passwordInput.color};
+ }
+ @media ${tablet} {
+ width: ${(props) => props.theme.passwordInput.link.tablet.width};
+ margin-left: ${(props) => props.theme.passwordInput.link.tablet.marginLeft};
+ margin-top: ${(props) => props.theme.passwordInput.link.tablet.marginTop};
+ }
+`;
+CopyLink.defaultProps = { theme: Base };
+
+const Progress = styled.div`
+ border: 1.5px solid
+ ${(props) =>
+ !props.isDisabled && props.progressColor
+ ? props.progressColor
+ : "transparent"};
+ border-radius: ${(props) => props.theme.passwordInput.progress.borderRadius};
+ margin-top: ${(props) => props.theme.passwordInput.progress.marginTop};
+ width: ${(props) => (props.progressWidth ? props.progressWidth + "%" : "0%")};
+`;
+Progress.defaultProps = { theme: Base };
+
+// const TooltipStyle = styled.div`
+// .__react_component_tooltip {
+// }
+// `;
+
+// const StyledTooltipContainer = styled(Text)`
+// //margin: 8px 16px 16px 16px;
+// `;
+
+// const StyledTooltipItem = styled(Text)`
+// margin-left: 8px;
+// height: 24px;
+// color: ${(props) => (props.valid ? "#44bb00" : "#B40404")};
+// `;
+
+export { Progress, CopyLink, NewPasswordButton, PasswordProgress, StyledInput };
diff --git a/packages/asc-web-components/src/components/password-input/svg/index.js b/packages/asc-web-components/src/components/password-input/svg/index.js
new file mode 100644
index 0000000000..45a0da4443
--- /dev/null
+++ b/packages/asc-web-components/src/components/password-input/svg/index.js
@@ -0,0 +1 @@
+export { default as RefreshIcon } from "./refresh.react.svg";
diff --git a/packages/asc-web-components/src/components/icons/svg/refresh.react.svg b/packages/asc-web-components/src/components/password-input/svg/refresh.react.svg
similarity index 100%
rename from packages/asc-web-components/src/components/icons/svg/refresh.react.svg
rename to packages/asc-web-components/src/components/password-input/svg/refresh.react.svg
diff --git a/packages/asc-web-components/src/components/row-content/index.js b/packages/asc-web-components/src/components/row-content/index.js
index 0e30ff0979..6803cda4e3 100644
--- a/packages/asc-web-components/src/components/row-content/index.js
+++ b/packages/asc-web-components/src/components/row-content/index.js
@@ -1,161 +1,14 @@
import React from "react";
-import styled, { css } from "styled-components";
import PropTypes from "prop-types";
-import { tablet, size } from "../../utils/device";
-const truncateCss = css`
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-`;
-
-const commonCss = css`
- margin: 0 6px;
- font-family: "Open Sans";
- font-size: 12px;
- font-style: normal;
- font-weight: 600;
-`;
-
-const containerTabletStyle = css`
- display: block;
- height: 56px;
-`;
-
-const mainWrapperTabletStyle = css`
- min-width: 140px;
- margin-right: 8px;
- margin-top: 8px;
- width: 95%;
-`;
-
-const mainContainerTabletStyle = css`
- ${truncateCss};
- max-width: 100%;
-`;
-
-const sideInfoTabletStyle = css`
- display: block;
- min-width: 160px;
- margin: 0 6px;
- ${commonCss};
- color: ${(props) => props.color && props.color};
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
-`;
-
-const StyledRowContent = styled.div`
- width: 100%;
- display: inline-flex;
-
- ${(props) =>
- (!props.disableSideInfo &&
- props.widthProp &&
- props.widthProp < size.tablet) ||
- props.isMobile
- ? `${containerTabletStyle}`
- : `
- @media ${tablet} {
- ${containerTabletStyle}
- }
- `}
-`;
-
-const MainContainerWrapper = styled.div`
- ${commonCss};
-
- display: flex;
- align-self: center;
- margin-right: auto;
-
- width: ${(props) =>
- props.mainContainerWidth ? props.mainContainerWidth : "140px"};
- min-width: 140px;
-
- ${(props) =>
- (!props.disableSideInfo &&
- props.widthProp &&
- props.widthProp < size.tablet) ||
- props.isMobile
- ? `${mainWrapperTabletStyle}`
- : `
- @media ${tablet} {
- ${mainWrapperTabletStyle}
- }
- `}
-`;
-
-const MainContainer = styled.div`
- height: 20px;
- margin-right: 8px;
- max-width: 86%;
-
- ${(props) =>
- (props.widthProp && props.widthProp < size.tablet) || props.isMobile
- ? `${mainContainerTabletStyle}`
- : `
- @media ${tablet} {
- ${mainContainerTabletStyle}
- }
- `}
-`;
-
-const MainIcons = styled.div`
- height: 19px;
- align-self: center;
- white-space: nowrap;
-`;
-
-const SideContainerWrapper = styled.div`
- ${commonCss};
-
- ${(props) =>
- (props.widthProp && props.widthProp < size.tablet) || props.isMobile
- ? `${truncateCss}`
- : `
- @media ${tablet} {
- ${truncateCss}
- }
- `}
-
- align-self: center;
- align-items: center;
-
- > a {
- vertical-align: middle;
- }
-
- width: ${(props) => (props.containerWidth ? props.containerWidth : "40px")};
- min-width: ${(props) =>
- props.containerMinWidth ? props.containerMinWidth : "40px"};
- color: ${(props) => props.color && props.color};
-
- ${(props) =>
- (!props.disableSideInfo &&
- props.widthProp &&
- props.widthProp < size.tablet) ||
- props.isMobile
- ? `display: none;`
- : `
- @media ${tablet} {
- display: none;
- }
- `}
-`;
-
-const TabletSideInfo = styled.div`
- display: none;
- ${(props) => (props.color ? `color: ${props.color};` : null)}
- ${(props) =>
- (props.widthProp && props.widthProp < size.tablet) || props.isMobile
- ? `${sideInfoTabletStyle}`
- : `
- @media ${tablet} {
- ${sideInfoTabletStyle}
- }
- `}
-`;
+import {
+ TabletSideInfo,
+ SideContainerWrapper,
+ MainContainer,
+ MainIcons,
+ MainContainerWrapper,
+ StyledRowContent,
+} from "./styled-row-content";
const getSideInfo = (content, convert) => {
let info = "";
diff --git a/packages/asc-web-components/src/components/row-content/styled-row-content.js b/packages/asc-web-components/src/components/row-content/styled-row-content.js
new file mode 100644
index 0000000000..37b631c69e
--- /dev/null
+++ b/packages/asc-web-components/src/components/row-content/styled-row-content.js
@@ -0,0 +1,172 @@
+import styled, { css } from "styled-components";
+import { Base } from "../../themes";
+import { tablet, size } from "../../utils/device";
+
+const truncateCss = css`
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+`;
+
+const commonCss = css`
+ margin: ${(props) => props.theme.rowContent.margin};
+ font-family: "Open Sans";
+ font-size: ${(props) => props.theme.rowContent.fontSize};
+ font-style: ${(props) => props.theme.rowContent.fontStyle};
+ font-weight: ${(props) => props.theme.rowContent.fontWeight};
+`;
+
+const containerTabletStyle = css`
+ display: block;
+ height: ${(props) => props.theme.rowContent.height};
+`;
+
+const mainWrapperTabletStyle = css`
+ min-width: ${(props) => props.theme.rowContent.mainWrapper.minWidth};
+ margin-right: ${(props) => props.theme.rowContent.mainWrapper.marginRight};
+ margin-top: ${(props) => props.theme.rowContent.mainWrapper.marginTop};
+ width: ${(props) => props.theme.rowContent.mainWrapper.width};
+`;
+
+const mainContainerTabletStyle = css`
+ ${truncateCss};
+ max-width: ${(props) => props.theme.rowContent.maxWidth};
+`;
+
+const sideInfoTabletStyle = css`
+ display: block;
+ min-width: ${(props) => props.theme.rowContent.sideInfo.minWidth};
+ margin: ${(props) => props.theme.rowContent.sideInfo.margin};
+ ${commonCss};
+ color: ${(props) => props.color && props.color};
+ white-space: nowrap;
+ overflow: ${(props) => props.theme.rowContent.sideInfo.overflow};
+ text-overflow: ${(props) => props.theme.rowContent.sideInfo.textOverflow};
+`;
+
+const StyledRowContent = styled.div`
+ width: 100%;
+ display: inline-flex;
+
+ ${(props) =>
+ (!props.disableSideInfo &&
+ props.widthProp &&
+ props.widthProp < size.tablet) ||
+ props.isMobile
+ ? `${containerTabletStyle}`
+ : `
+ @media ${tablet} {
+ ${containerTabletStyle}
+ }
+ `}
+`;
+StyledRowContent.defaultProps = { theme: Base };
+
+const MainContainerWrapper = styled.div`
+ ${commonCss};
+
+ display: flex;
+ align-self: center;
+ margin-right: auto;
+
+ width: ${(props) =>
+ props.mainContainerWidth ? props.mainContainerWidth : "140px"};
+ min-width: 140px;
+
+ ${(props) =>
+ (!props.disableSideInfo &&
+ props.widthProp &&
+ props.widthProp < size.tablet) ||
+ props.isMobile
+ ? `${mainWrapperTabletStyle}`
+ : `
+ @media ${tablet} {
+ ${mainWrapperTabletStyle}
+ }
+ `}
+`;
+MainContainerWrapper.defaultProps = { theme: Base };
+
+const MainContainer = styled.div`
+ height: 20px;
+ margin-right: 8px;
+ max-width: 86%;
+
+ ${(props) =>
+ (props.widthProp && props.widthProp < size.tablet) || props.isMobile
+ ? `${mainContainerTabletStyle}`
+ : `
+ @media ${tablet} {
+ ${mainContainerTabletStyle}
+ }
+ `}
+`;
+MainContainer.defaultProps = { theme: Base };
+
+const MainIcons = styled.div`
+ height: ${(props) => props.theme.rowContent.icons.height};
+ align-self: center;
+ white-space: nowrap;
+`;
+MainIcons.defaultProps = { theme: Base };
+
+const SideContainerWrapper = styled.div`
+ ${commonCss};
+
+ ${(props) =>
+ (props.widthProp && props.widthProp < size.tablet) || props.isMobile
+ ? `${truncateCss}`
+ : `
+ @media ${tablet} {
+ ${truncateCss}
+ }
+ `}
+
+ align-self: center;
+ align-items: center;
+
+ > a {
+ vertical-align: middle;
+ }
+
+ width: ${(props) => (props.containerWidth ? props.containerWidth : "40px")};
+ min-width: ${(props) =>
+ props.containerMinWidth ? props.containerMinWidth : "40px"};
+ color: ${(props) => props.color && props.color};
+
+ ${(props) =>
+ (!props.disableSideInfo &&
+ props.widthProp &&
+ props.widthProp < size.tablet) ||
+ props.isMobile
+ ? `display: none;`
+ : `
+ @media ${tablet} {
+ display: none;
+ }
+ `}
+`;
+SideContainerWrapper.defaultProps = { theme: Base };
+
+const TabletSideInfo = styled.div`
+ display: none;
+ ${(props) => (props.color ? `color: ${props.color};` : null)}
+ ${(props) =>
+ (props.widthProp && props.widthProp < size.tablet) || props.isMobile
+ ? `${sideInfoTabletStyle}`
+ : `
+ @media ${tablet} {
+ ${sideInfoTabletStyle}
+ }
+ `}
+`;
+TabletSideInfo.defaultProps = { theme: Base };
+
+export {
+ TabletSideInfo,
+ SideContainerWrapper,
+ MainContainer,
+ MainIcons,
+ MainContainerWrapper,
+ StyledRowContent,
+};
diff --git a/packages/asc-web-components/src/components/text/common-text-styles.js b/packages/asc-web-components/src/components/text/common-text-styles.js
index f62b99ee86..5c289c9e0a 100644
--- a/packages/asc-web-components/src/components/text/common-text-styles.js
+++ b/packages/asc-web-components/src/components/text/common-text-styles.js
@@ -3,7 +3,8 @@ import { css } from "styled-components";
const commonTextStyles = css`
font-family: ${(props) => props.theme.fontFamily};
text-align: ${(props) => props.textAlign};
- color: ${(props) => props.colorProp};
+ color: ${(props) =>
+ props.colorProp ? props.colorProp : props.theme.text.color};
${(props) =>
props.truncate &&
css`
diff --git a/packages/asc-web-components/src/components/text/index.js b/packages/asc-web-components/src/components/text/index.js
index 38ee4178ff..be10f7c443 100644
--- a/packages/asc-web-components/src/components/text/index.js
+++ b/packages/asc-web-components/src/components/text/index.js
@@ -45,7 +45,6 @@ Text.propTypes = {
Text.defaultProps = {
title: null,
- color: "#333333",
textAlign: "left",
fontSize: "13px",
truncate: false,
diff --git a/packages/asc-web-components/src/components/ThemeProvider/README.md b/packages/asc-web-components/src/components/theme-provider/README.md
similarity index 100%
rename from packages/asc-web-components/src/components/ThemeProvider/README.md
rename to packages/asc-web-components/src/components/theme-provider/README.md
diff --git a/packages/asc-web-components/src/components/theme-provider/index.js b/packages/asc-web-components/src/components/theme-provider/index.js
new file mode 100644
index 0000000000..a9da4547f7
--- /dev/null
+++ b/packages/asc-web-components/src/components/theme-provider/index.js
@@ -0,0 +1 @@
+export default from "./theme-provider";
diff --git a/packages/asc-web-components/src/components/ThemeProvider/ThemeProvider.js b/packages/asc-web-components/src/components/theme-provider/theme-provider.js
similarity index 100%
rename from packages/asc-web-components/src/components/ThemeProvider/ThemeProvider.js
rename to packages/asc-web-components/src/components/theme-provider/theme-provider.js
diff --git a/packages/asc-web-components/src/components/ThemeProvider/ThemeProvider.stories.js b/packages/asc-web-components/src/components/theme-provider/theme-provider.stories.js
similarity index 99%
rename from packages/asc-web-components/src/components/ThemeProvider/ThemeProvider.stories.js
rename to packages/asc-web-components/src/components/theme-provider/theme-provider.stories.js
index c86c0e7151..2da73aaf98 100644
--- a/packages/asc-web-components/src/components/ThemeProvider/ThemeProvider.stories.js
+++ b/packages/asc-web-components/src/components/theme-provider/theme-provider.stories.js
@@ -4,7 +4,7 @@ import ThemeProvider from ".";
import withReadme from "storybook-readme/with-readme";
import Readme from "./README.md";
import { BooleanValue } from "react-values";
-import Box from "../Box/";
+import Box from "../Box";
import Text from "../Text";
import JSONPretty from "react-json-pretty";
import { Base, Dark } from "../../themes";
diff --git a/packages/asc-web-components/src/components/ThemeProvider/ThemeProvider.test.js b/packages/asc-web-components/src/components/theme-provider/theme-provider.test.js
similarity index 100%
rename from packages/asc-web-components/src/components/ThemeProvider/ThemeProvider.test.js
rename to packages/asc-web-components/src/components/theme-provider/theme-provider.test.js
diff --git a/packages/asc-web-components/src/components/tree-menu/sub-components/tree-node.js b/packages/asc-web-components/src/components/tree-menu/sub-components/tree-node.js
index 0d7ce9bc0d..7c008c833a 100644
--- a/packages/asc-web-components/src/components/tree-menu/sub-components/tree-node.js
+++ b/packages/asc-web-components/src/components/tree-menu/sub-components/tree-node.js
@@ -5,6 +5,8 @@ import { getCssFromSvg } from "../../icons/get-css-from-svg";
import { TreeNode } from "rc-tree";
import ReactDOMServer from "react-dom/server";
import PropTypes from "prop-types";
+import NoUserSelect from "../../../utils/commonStyles";
+import { Base } from "../../../themes";
var checkboxIcon,
checkboxСheckedIcon,
@@ -101,18 +103,16 @@ const TreeNodeMenu = styled(TreeNode)`
position: relative;
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
+ ${NoUserSelect}
${(props) =>
props.dragging &&
css`
.draggable {
- background: #f8f7bf;
- border-radius: 3px;
+ background: ${(props) =>
+ props.theme.treeNode.dragging.draggable.background};
+ border-radius: ${(props) =>
+ props.theme.treeNode.dragging.draggable.borderRadius};
${(props) =>
!props.isFullFillSelection &&
`
@@ -122,33 +122,37 @@ const TreeNodeMenu = styled(TreeNode)`
`}
:hover {
- background: #efefb2;
+ background: ${(props) =>
+ props.theme.treeNode.dragging.draggable.hoverBackgroundColor};
}
.rc-tree-title {
- width: 85% !important;
+ width: ${(props) =>
+ props.theme.treeNode.dragging.title.width} !important;
}
}
`}
.draggable {
- color: #555F65;
+ color: ${(props) => props.theme.treeNode.draggable.color};
/* Required to make elements draggable in old WebKit */
-khtml-user-drag: none;
-webkit-user-drag: none;
}
&.drag-over > .draggable {
- background-color: #316ac5;
- color: white;
- border: 1px #316ac5 solid;
+ background-color: ${(props) =>
+ props.theme.treeNode.draggable.dragOverBackgroundColor};
+ color: ${(props) => props.theme.treeNode.draggable.dragOverColor};
+ border: ${(props) => props.theme.treeNode.draggable.border};
opacity: 0.8;
}
&.drag-over-gap-top > .draggable {
- border-top: 2px blue solid;
+ border-top: ${(props) => props.theme.treeNode.draggable.gapTop.borderTop};
}
&.drag-over-gap-bottom > .draggable {
- border-bottom: 2px blue solid;
+ border-bottom: ${(props) =>
+ props.theme.treeNode.draggable.gapBottom.borderBottom};
}
&.filter-node > .rc-tree-node-content-wrapper {
- color: #a60000 !important;
+ color: ${(props) => props.theme.treeNode.contentWrapper.color} !important;
font-weight: bold !important;
}
ul {
@@ -276,9 +280,9 @@ const TreeNodeMenu = styled(TreeNode)`
top: 5px;
width: 5px;
height: 0;
- border: 2px solid #fff;
- border-top: 0;
- border-left: 0;
+ border: ${(props) => props.theme.treeNode.checkbox.border};
+ border-top: ${(props) => props.theme.treeNode.checkbox.borderTop};
+ border-left: ${(props) => props.theme.treeNode.checkbox.borderLeft};
}
span.rc-tree-title {
display: inline-block;
@@ -291,7 +295,7 @@ const TreeNodeMenu = styled(TreeNode)`
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- color: #555F65;
+ color: ${(props) => props.theme.treeNode.title.color};
padding-left: ${(props) =>
props.icon || props.disableSwitch ? "0" : "20px"};
}
@@ -304,9 +308,9 @@ const TreeNodeMenu = styled(TreeNode)`
top: 2px;
}
.rc-tree-node-selected {
- background: #dfe2e3;
+ background: ${(props) => props.theme.treeNode.selected.background};
mix-blend-mode: normal;
- border-radius: 3px;
+ border-radius: ${(props) => props.theme.treeNode.selected.borderRadius};
z-index: 0;
${(props) =>
props.disableSwitch &&
@@ -315,7 +319,8 @@ const TreeNodeMenu = styled(TreeNode)`
width: auto;
`}
:hover {
- background: #dfe2e3;
+ background: ${(props) =>
+ props.theme.treeNode.selected.hoverBackgroundColor};
}
overflow: visible;
}
@@ -343,5 +348,6 @@ TreeNodeMenu.propTypes = {
showBadge: PropTypes.bool,
onBadgeClick: PropTypes.func,
};
+TreeNodeMenu.defaultProps = { theme: Base };
export default TreeNodeMenu;
diff --git a/packages/asc-web-components/src/themes/base.js b/packages/asc-web-components/src/themes/base.js
index f2341e052a..42aa7f6503 100644
--- a/packages/asc-web-components/src/themes/base.js
+++ b/packages/asc-web-components/src/themes/base.js
@@ -42,11 +42,14 @@ const {
hoverWarning,
darkBlack,
silver,
+ strongBlue,
+ lightGrayishStrongBlue,
+ darkRed,
} = globalColors;
const Base = {
- // color: black,
- // backgroundColor: white,
+ color: black,
+ backgroundColor: white,
fontFamily: "Open Sans, sans-serif, Arial",
fontSize: "30px",
@@ -159,7 +162,7 @@ const Base = {
margin: "0",
lineHeight: "56px",
fontWeight: "700",
- borderBottom: `1px solid ${globalColors.pattensBlue}`,
+ borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
padding: "0 16px 16px",
bodyPadding: "16px 0",
},
@@ -298,6 +301,7 @@ const Base = {
},
},
+ iconButton: {},
selectorAddButton: {
background: grayLight,
activeBackground: grayLightMid,
@@ -435,6 +439,33 @@ const Base = {
},
},
+ rowContent: {
+ icons: {
+ height: "19px",
+ },
+
+ margin: "0 6px",
+ fontSize: "12px",
+ fontStyle: "normal",
+ fontWeight: "600",
+ height: "56px",
+ maxWidth: " 100%",
+
+ sideInfo: {
+ minWidth: "160px",
+ margin: "0 6px",
+ overflow: "hidden",
+ textOverflow: "ellipsis",
+ },
+
+ mainWrapper: {
+ minWidth: "140px",
+ marginRight: "8px",
+ marginTop: "8px",
+ width: "95%",
+ },
+ },
+
badge: {
border: "1px solid transparent",
padding: "1px",
@@ -466,7 +497,7 @@ const Base = {
},
header: {
- borderBottom: `1px solid ${globalColors.pattensBlue}`,
+ borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
},
closeButton: {
@@ -500,8 +531,8 @@ const Base = {
},
input: {
- color: "#333333",
- disableColor: "#A3A9AE",
+ color: black,
+ disableColor: grayMid,
backgroundColor: white,
disableBackgroundColor: grayLight,
@@ -574,6 +605,44 @@ const Base = {
},
},
+ passwordInput: {
+ disableColor: grayMid,
+ color: gray,
+
+ hoverColor: gray,
+
+ lineHeight: "32px",
+
+ text: {
+ lineHeight: "14px",
+ marginTop: "-2px",
+ },
+
+ link: {
+ marginTop: "-6px",
+
+ tablet: {
+ width: "100%",
+ marginLeft: "0px",
+ marginTop: "-1px",
+ },
+ },
+
+ progress: {
+ borderRadius: "2px",
+ marginTop: "-1px",
+ },
+
+ newPassword: {
+ margin: "0 16px",
+
+ svg: {
+ overflow: "hidden",
+ marginBottom: "4px",
+ },
+ },
+ },
+
searchInput: {
fontSize: "14px",
fontWeight: "600",
@@ -740,6 +809,51 @@ const Base = {
},
},
+ fieldContainer: {
+ horizontal: {
+ margin: "0 0 16px 0",
+
+ label: {
+ lineHeight: "32px",
+ margin: "0",
+ },
+
+ body: {
+ flexGrow: "1",
+ },
+
+ iconButton: {
+ marginTop: "10px",
+ marginLeft: "8px",
+ },
+ },
+
+ vertical: {
+ margin: "0 0 16px 0",
+
+ label: {
+ lineHeight: "13px",
+ height: "15px",
+ },
+
+ labelIcon: {
+ width: "100%",
+ margin: "0 0 8px 0",
+ },
+
+ body: {
+ width: "100%",
+ },
+
+ iconButton: {
+ margin: "0",
+ padding: "0px 8px",
+ width: "13px",
+ height: "13px",
+ },
+ },
+ },
+
avatar: {
initialsContainer: {
color: white,
@@ -973,6 +1087,55 @@ const Base = {
unsetBackgroundColor: "unset",
},
+ treeNode: {
+ dragging: {
+ draggable: {
+ background: lightCumulus,
+ hoverBackgroundColor: lightMediumGoldenrod,
+ borderRadius: "3px",
+ },
+
+ title: {
+ width: "85%",
+ },
+ },
+
+ draggable: {
+ color: cyanBlueDarkShade,
+ dragOverBackgroundColor: strongBlue,
+ border: `1px ${strongBlue} solid`,
+ dragOverColor: white,
+
+ gapTop: {
+ borderTop: `2px blue solid`,
+ },
+
+ gapBottom: {
+ borderBottom: `2px blue solid`,
+ },
+ },
+
+ contentWrapper: {
+ color: darkRed,
+ },
+
+ title: {
+ color: cyanBlueDarkShade,
+ },
+
+ selected: {
+ background: lightGrayishStrongBlue,
+ hoverBackgroundColor: lightGrayishStrongBlue,
+ borderRadius: "3px",
+ },
+
+ checkbox: {
+ border: `2px solid ${white}`,
+ borderTop: 0,
+ borderLeft: 0,
+ },
+ },
+
progressBar: {
height: "22px",
backgroundColor: grayLight,
@@ -1017,6 +1180,7 @@ const Base = {
borderRadius: "6px",
boxShadow: "0px 5px 20px rgba(0, 0, 0, 0.13)",
},
+
dropDownItem: {
color: black,
disableColor: gray,
@@ -1289,7 +1453,7 @@ const Base = {
margin: "0",
lineHeight: "56px",
fontWeight: "700",
- borderBottom: `1px solid ${globalColors.pattensBlue}`,
+ borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
},
bodyContent: {
@@ -1319,6 +1483,7 @@ const Base = {
bigMarginTop: "7.5px",
lineHeight: "33px",
},
+
weekdays: {
color: black,
disabledColor: gray,
@@ -1326,6 +1491,7 @@ const Base = {
bigWidth: "295px",
marginBottom: "-5px",
},
+
month: {
baseWidth: "267px",
bigWidth: "295px",
@@ -1335,12 +1501,14 @@ const Base = {
neighboringHoverColor: black,
neighboringColor: grayLightMid,
},
+
selectedDay: {
backgroundColor: orangeMain,
borderRadius: "16px",
cursor: "pointer",
color: white,
},
+
comboBox: {
color: black,
minWidth: "80px",
@@ -1370,7 +1538,7 @@ const Base = {
contentLineHeight: "56px",
contentFontWeight: "700",
- borderBottom: `1px solid ${globalColors.pattensBlue}`,
+ borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
},
aside: {
diff --git a/packages/asc-web-components/src/themes/dark.js b/packages/asc-web-components/src/themes/dark.js
index 389ceb7e3a..8bf855053f 100644
--- a/packages/asc-web-components/src/themes/dark.js
+++ b/packages/asc-web-components/src/themes/dark.js
@@ -26,7 +26,24 @@ const {
link,
errorColor,
warningColor,
- red
+ red,
+ activeSuccess,
+ activeError,
+ activeInfo,
+ activeWarning,
+ hoverSuccess,
+ hoverError,
+ hoverInfo,
+ hoverWarning,
+ darkBlack,
+ silver,
+ strongBlue,
+ lightGrayishStrongBlue,
+ darkRed,
+ grayMaxLight,
+ cyanBlueDarkShade,
+ lightCumulus,
+ lightMediumGoldenrod
} = globalColors;
const Dark = {
@@ -38,7 +55,7 @@ const Dark = {
color: white,
disableColor: grayLightMid,
fontWeight: "normal",
- fontWeightBold: "bold"
+ fontWeightBold: "bold",
},
heading: {
@@ -47,9 +64,9 @@ const Dark = {
large: "23px",
medium: "21px",
small: "19px",
- xsmall: "15px"
+ xsmall: "15px",
},
- fontWeight: 600
+ fontWeight: 600,
},
button: {
@@ -68,33 +85,35 @@ const Dark = {
height: {
base: "24px",
medium: "32px",
- big: "36px"
+ big: "36px",
},
lineHeight: {
base: "normal",
medium: "normal",
- big: "normal"
+ big: "normal",
},
fontSize: {
base: "12px",
medium: "13px",
- big: "14px"
+ big: "14px",
},
padding: {
base: "0 14px",
medium: "0 18px",
- big: "0 20px"
+ big: "0 20px",
},
minWidth: {
base: "65px",
medium: "80px",
- big: "85px"
+ big: "85px",
},
+
color: {
base: black,
primary: white,
- disabled: grayMid
+ disabled: grayMid,
},
+
backgroundColor: {
base: white,
baseHover: white,
@@ -103,8 +122,9 @@ const Dark = {
primary: blueMain,
primaryHover: blueHover,
primaryActive: blueActive,
- primaryDisabled: blueDisabled
+ primaryDisabled: blueDisabled,
},
+
border: {
base: `1px solid ${grayMid}`,
baseHover: `1px solid ${blueMain}`,
@@ -113,44 +133,226 @@ const Dark = {
primary: `1px solid ${blueMain}`,
primaryHover: `1px solid ${blueHover}`,
primaryActive: `1px solid ${blueActive}`,
- primaryDisabled: `1px solid ${blueDisabled}`
- }
+ primaryDisabled: `1px solid ${blueDisabled}`,
+ },
},
- checkbox: {
- fillColor: white,
- borderColor: grayMid,
- arrowColor: black,
- indeterminateColor: black,
-
- disableArrowColor: grayMid,
- disableBorderColor: grayLightMid,
- disableFillColor: grayLight,
- disableIndeterminateColor: gray,
-
- hoverBorderColor: gray,
- hoverIndeterminateColor: black
+ helpButton: {
+ width: "100%",
+ backgroundColor: white,
+ maxWidth: "500px",
+ margin: "0",
+ lineHeight: "56px",
+ fontWeight: "700",
+ borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
+ padding: "0 16px 16px",
+ bodyPadding: "16px 0",
},
- switchButton: {
- fillColor: white,
- checkedFillColor: gray,
+ mainButton: {
+ backgroundColor: orangeMain,
+ disableBackgroundColor: orangeDisabled,
+ hoverBackgroundColor: orangeHover,
+ clickBackgroundColor: orangePressed,
- fillColorDisabled: grayLight,
- disabledFillColor: grayLightMid,
- disabledFillColorInner: grayMid,
-
- hoverBorderColor: gray
+ padding: "5px 10px",
+ borderRadius: "3px",
+ lineHeight: "22px",
+
+ cornerRoundsTopRight: "0",
+ cornerRoundsBottomRight: "0",
+
+ svg: {
+ margin: "auto",
+ height: "100%",
+ },
+
+ secondaryButton: {
+ height: "32px",
+ padding: "0",
+ borderRadius: "3px",
+ cornerRoundsTopLeft: "0",
+ cornerRoundsBottomLeft: "0",
+ },
+
+ dropDown: {
+ width: "100%",
+ top: "100%",
+ },
+
+ arrowDropdown: {
+ borderLeft: "4px solid transparent",
+ borderRight: "4px solid transparent",
+ borderTop: "4px solid white",
+ right: "10px",
+ top: "50%",
+ width: "0",
+ height: "0",
+ marginTop: " -1px",
+ },
},
- toggleButton: {
- fillColor: blueMain,
- fillColorOff: gray,
+ socialButton: {
+ fontWeight: "600",
+ textDecoration: "none",
+ margin: "20px 0 0 20px",
+ padding: "0",
+ borderRadius: "2px",
+ width: "201px",
+ height: "40px",
+ textAlign: "left",
+ stroke: " none",
+ outline: "none",
- disableFillColor: grayLightMid,
- disableFillColorOff: grayLightMid
+ background: white,
+ disableBackgroundColor: "rgba(0, 0, 0, 0.08)",
+ hoverBackground: white,
+ activeBackground: grayMaxLight,
+
+ boxShadow:
+ "0px 1px 1px rgba(0, 0, 0, 0.24),0px 0px 1px rgba(0, 0, 0, 0.12)",
+ hoverBoxShadow:
+ "0px 2px 2px rgba(0, 0, 0, 0.24),0px 0px 2px rgba(0, 0, 0, 0.12)",
+
+ color: "rgba(0, 0, 0, 0.54)",
+ disableColor: "rgba(0, 0, 0, 0.4)",
+
+ text: {
+ width: "142px",
+ height: "16px",
+ margin: "12px 9px 12px 10px",
+ fontWeight: "500",
+ fontSize: "14px",
+ lineHeight: "16px",
+ letterSpacing: "0.21875px",
+ overflow: "hidden",
+ textOverflow: "ellipsis",
+ whiteSpace: "nowrap",
+ },
+
+ svg: {
+ margin: "11px",
+ width: "18px",
+ height: "18px",
+ minWidth: "18px",
+ minHeight: "18px",
+ },
},
+ groupButton: {
+ fontSize: "14px",
+ lineHeight: "19px",
+ color: black,
+ disableColor: gray,
+ float: "left",
+ height: "19px",
+ overflow: "hidden",
+ padding: "0px",
+
+ separator: {
+ border: `1px solid ${globalColors.grayLightMid}`,
+ width: "0px",
+ height: "24px",
+ margin: "16px 12px 0 12px",
+ },
+
+ checkbox: {
+ margin: "auto 0 auto 24px",
+ tabletMargin: "auto 0 auto 16px",
+ },
+ },
+
+ groupButtonsMenu: {
+ top: "0",
+ background: white,
+ boxShadow: " 0px 10px 18px -8px rgba(0, 0, 0, 0.100306)",
+ height: "56px",
+ padding: "0 18px 19px 0",
+ width: "100%",
+ zIndex: "189",
+ marginTop: "1px",
+
+ closeButton: {
+ right: "11px",
+ top: "10px",
+ width: "20px",
+ height: "20px",
+ padding: "8px",
+ hoverBackgroundColor: cyanBlueDarkShade,
+ backgroundColor: grayMid,
+ },
+ },
+
+ iconButton: {},
+ selectorAddButton: {
+ background: grayLight,
+ activeBackground: grayLightMid,
+
+ border: `1px solid ${globalColors.grayLightMid}`,
+ boxSizing: "border-box",
+ borderRadius: "3px",
+ height: " 34px",
+ width: "34px",
+ padding: "9px",
+ color: black,
+ },
+
+ saveCancelButtons: {
+ bottom: "0",
+ width: "100%",
+ left: "0",
+ padding: "8px 24px 8px 16px",
+ marginRight: "8px",
+
+ unsavedColor: gray,
+ },
+
+ selectedItem: {
+ background: grayLight,
+ border: `1px solid ${globalColors.grayLightMid}`,
+ borderRadius: "3px",
+
+ textBox: {
+ padding: "0 8px",
+ height: "32px",
+ alignItems: "center",
+ borderRight: `1px solid ${globalColors.grayLightMid}`,
+ },
+
+ closeButton: {
+ alignItems: "center",
+ padding: "0 8px",
+ colorHover: cyanBlueDarkShade,
+ backgroundColor: grayLightMid,
+ },
+ },
+
+ // checkbox: {
+ // fillColor: white,
+ // borderColor: grayMid,
+ // arrowColor: black,
+ // indeterminateColor: black,
+
+ // disableArrowColor: grayMid,
+ // disableBorderColor: grayLightMid,
+ // disableFillColor: grayLight,
+ // disableIndeterminateColor: gray,
+
+ // hoverBorderColor: gray,
+ // hoverIndeterminateColor: black,
+ // },
+
+ // switchButton: {
+ // fillColor: white,
+ // checkedFillColor: gray,
+
+ // fillColorDisabled: grayLight,
+ // disabledFillColor: grayLightMid,
+ // disabledFillColorInner: grayMid,
+
+ // hoverBorderColor: gray,
+ // },
+
radioButton: {
color: white,
disableColor: grayLightMid,
@@ -163,12 +365,130 @@ const Dark = {
disableFillColor: grayMid,
disableBorderColor: grayLightMid,
- hoverBorderColor: gray
+ hoverBorderColor: gray,
+ },
+
+ requestLoader: {
+ backgroundColor: white,
+ border: `1px solid ${globalColors.veryLightGrey}`,
+ overflow: "hidden",
+ padding: "5px 10px",
+ lineHeight: "16px",
+ borderRadius: "5px",
+ boxShadow: "0 2px 8px rgba(0, 0, 0, 0.3)",
+
+ marginRight: "10px",
+ top: "10px",
+ width: "100%",
+ },
+
+ row: {
+ minHeight: "47px",
+ width: "100%",
+ borderBottom: `1px solid ${globalColors.grayLightMid}`,
+ minWidth: "160px",
+ overflow: "hidden",
+ textOverflow: "ellipsis",
+
+ element: {
+ marginRight: "8px",
+ marginLeft: "2px",
+ },
+
+ optionButton: {
+ padding: "8px 0px 9px 7px",
+ },
+ },
+
+ rowContent: {
+ icons: {
+ height: "19px",
+ },
+
+ margin: "0 6px",
+ fontSize: "12px",
+ fontStyle: "normal",
+ fontWeight: "600",
+ height: "56px",
+ maxWidth: " 100%",
+
+ sideInfo: {
+ minWidth: "160px",
+ margin: "0 6px",
+ overflow: "hidden",
+ textOverflow: "ellipsis",
+ },
+
+ mainWrapper: {
+ minWidth: "140px",
+ marginRight: "8px",
+ marginTop: "8px",
+ width: "95%",
+ },
+ },
+
+ badge: {
+ border: "1px solid transparent",
+ padding: "1px",
+ lineHeight: "0.8",
+ overflow: "hidden",
},
scrollbar: {
backgroundColorVertical: "rgba(255, 255, 255, 0.5)",
- backgroundColorHorizontal: "rgba(255, 255, 255, 0.5)"
+ backgroundColorHorizontal: "rgba(255, 255, 255, 0.5)",
+ },
+
+ modalDialog: {
+ width: "auto",
+ maxwidth: "560px",
+ margin: " 0 auto",
+ minHeight: "100%",
+
+ content: {
+ backgroundColor: white,
+ padding: "0 16px 16px",
+
+ heading: {
+ maxWidth: "500px",
+ margin: "0",
+ lineHeight: "56px",
+ fontWeight: "700",
+ },
+ },
+
+ header: {
+ borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
+ },
+
+ closeButton: {
+ width: "17px",
+ height: "17px",
+ minWidth: "17px",
+ minHeight: "17px",
+
+ right: "16px",
+ top: "19px",
+ hoverColor: grayMain,
+ },
+ },
+
+ paging: {
+ button: {
+ marginRight: "8px",
+ maxWidth: "110px",
+ padding: "6px 8px 10px",
+ },
+
+ page: {
+ marginRight: "8px",
+ width: "110%",
+ },
+
+ comboBox: {
+ marginLeft: "auto",
+ marginRight: "0px",
+ },
},
input: {
@@ -183,7 +503,7 @@ const Dark = {
middle: "300px",
big: "350px",
huge: "500px",
- large: "550px"
+ large: "550px",
},
borderRadius: "3px",
@@ -196,15 +516,97 @@ const Dark = {
warningBorderColor: warningColor,
disabledBorderColor: grayLightMid,
- hoverBorderColor: grayMid,
+ hoverBorderColor: gray,
hoverErrorBorderColor: red,
hoverWarningBorderColor: warningColor,
- hoverDisabledBorderColor: gray,
+ hoverDisabledBorderColor: grayLightMid,
focusBorderColor: blueMain,
focusErrorBorderColor: red,
focusWarningBorderColor: warningColor,
- focusDisabledBorderColor: grayLightMid
+ focusDisabledBorderColor: grayLightMid,
+ },
+
+ fileInput: {
+ width: {
+ base: "173px",
+ middle: "300px",
+ big: "350px",
+ huge: "500px",
+ large: "550px",
+ },
+
+ paddingRight: {
+ base: "37px",
+ middle: "48px",
+ big: "53px",
+ huge: "58px",
+ large: "64px",
+ },
+
+ icon: {
+ border: "1px solid",
+ borderRadius: "0 3px 3px 0",
+
+ width: {
+ base: "30px",
+ middle: "36px",
+ big: "37px",
+ huge: "38px",
+ large: "48px",
+ },
+
+ height: {
+ base: "30px",
+ middle: "36px",
+ big: "36px",
+ huge: "37px",
+ large: "43px",
+ },
+ },
+ },
+
+ passwordInput: {
+ disableColor: grayMid,
+ color: gray,
+
+ hoverColor: gray,
+
+ lineHeight: "32px",
+
+ text: {
+ lineHeight: "14px",
+ marginTop: "-2px",
+ },
+
+ link: {
+ marginTop: "-6px",
+
+ tablet: {
+ width: "100%",
+ marginLeft: "0px",
+ marginTop: "-1px",
+ },
+ },
+
+ progress: {
+ borderRadius: "2px",
+ marginTop: "-1px",
+ },
+
+ newPassword: {
+ margin: "0 16px",
+
+ svg: {
+ overflow: "hidden",
+ marginBottom: "4px",
+ },
+ },
+ },
+
+ searchInput: {
+ fontSize: "14px",
+ fontWeight: "600",
},
textInput: {
@@ -223,22 +625,38 @@ const Dark = {
base: "20px",
middle: "20px",
big: "20px",
- huge: "21px"
+ huge: "21px",
+ large: "20px",
},
fontSize: {
- base: "13px",
+ base: "14px",
middle: "14px",
big: "16px",
- huge: "18px"
+ huge: "18px",
+ large: "16px",
},
padding: {
- base: "5px 7px",
+ base: "5px 6px",
middle: "8px 12px",
big: "8px 16px",
- huge: "8px 20px"
- }
+ huge: "8px 20px",
+ large: "11px 15px",
+ },
+ },
+
+ inputBlock: {
+ height: "100%",
+ paddingRight: "8px",
+ paddingLeft: "1px",
+
+ display: "flex",
+ alignItems: "center",
+ padding: "2px 0px 2px 2px",
+ margin: "0",
+
+ borderColor: blueMain,
},
textArea: {
@@ -255,10 +673,11 @@ const Dark = {
disabledColor: grayLight,
focusBorderColor: blueMain,
+ focusErrorBorderColor: red,
focusOutline: "none",
- scrollWidth: "100% !important",
- scrollHeight: "91px !important"
+ scrollWidth: "100%",
+ scrollHeight: "91px",
},
link: {
@@ -270,8 +689,40 @@ const Dark = {
hover: {
textDecoration: "underline dashed",
- page: { textDecoration: "underline" }
- }
+ page: { textDecoration: "underline" },
+ },
+ },
+
+ linkWithDropdown: {
+ paddingRight: "20px",
+ semiTransparentOpacity: "0.5",
+ textDecoration: "underline dashed",
+ disableColor: gray,
+
+ svg: {
+ opacity: "1",
+ semiTransparentOpacity: "0.5",
+ },
+
+ text: { maxWidth: "100%" },
+
+ span: { maxWidth: "300px" },
+
+ caret: {
+ width: "8px",
+ minWidth: "8px",
+ height: "8px",
+ minHeight: "8px",
+ marginLeft: "5px",
+ marginTop: "-4px",
+ right: "6px",
+ top: "0",
+ bottom: "0",
+ isOpenBottom: "-1px",
+ margin: "auto",
+ opacity: "0",
+ transform: "scale(1, -1)",
+ },
},
tooltip: {
@@ -281,13 +732,58 @@ const Dark = {
padding: "16px",
pointerEvents: "auto",
maxWidth: "340px",
- backgroundColor: grayMid,
+
before: {
- border: "none"
+ border: "none",
},
after: {
- border: "none"
- }
+ border: "none",
+ },
+ },
+
+ fieldContainer: {
+ horizontal: {
+ margin: "0 0 16px 0",
+
+ label: {
+ lineHeight: "32px",
+ margin: "0",
+ },
+
+ body: {
+ flexGrow: "1",
+ },
+
+ iconButton: {
+ marginTop: "10px",
+ marginLeft: "8px",
+ },
+ },
+
+ vertical: {
+ margin: "0 0 16px 0",
+
+ label: {
+ lineHeight: "13px",
+ height: "15px",
+ },
+
+ labelIcon: {
+ width: "100%",
+ margin: "0 0 8px 0",
+ },
+
+ body: {
+ width: "100%",
+ },
+
+ iconButton: {
+ margin: "0",
+ padding: "0px 8px",
+ width: "13px",
+ height: "13px",
+ },
+ },
},
avatar: {
@@ -296,7 +792,43 @@ const Dark = {
left: "50%",
top: "50%",
transform: "translate(-50%, -50%)",
- fontWeight: "600"
+ fontWeight: "600",
+
+ fontSize: {
+ min: "12px",
+ small: "12px",
+ medium: "20px",
+ big: "34px",
+ max: "72px",
+ },
+ },
+
+ roleWrapperContainer: {
+ left: {
+ min: "-2px",
+ small: "-2px",
+ medium: "-4px",
+ big: "0px",
+ max: "0px",
+ },
+
+ bottom: {
+ min: "3px",
+ small: "3px",
+ medium: "6px",
+ big: "5px",
+ max: "0px",
+ },
+
+ width: {
+ medium: "14px",
+ max: "24px",
+ },
+
+ height: {
+ medium: "14px",
+ max: "24px",
+ },
},
imageContainer: {
@@ -309,110 +841,280 @@ const Dark = {
display: "block",
width: "50%",
height: "100%",
- margin: "auto"
- }
+ margin: "auto",
+ },
+ },
+ editContainer: {
+ boxSizing: "border-box",
+ width: "100%",
+ height: "100%",
+ top: "50%",
+ left: "50%",
+ transform: "translate(-50%, -50%)",
+ padding: "75% 16px 5px",
+ textAlign: "center",
+ lineHeight: "19px",
+ borderRadius: "50%",
+ linearGradient:
+ "linear-gradient(180deg, rgba(6, 22, 38, 0) 24.48%, rgba(6, 22, 38, 0.75) 100%)",
+ transparent: "transparent",
},
+ editLink: {
+ paddingLeft: "10px",
+ paddingRight: "10px",
+ borderBottom: "none",
+ display: "inline-block",
+ maxWidth: "100%",
+ textDecoration: "underline dashed",
+ },
image: {
width: "100%",
height: "100%",
- borderRadius: "50%"
+ borderRadius: "50%",
},
width: {
- small: "32px",
+ min: "32px",
+ small: "36px",
medium: "48px",
big: "82px",
- max: "160px"
+ max: "160px",
},
+
height: {
- small: "32px",
+ min: "32px",
+ small: "36px",
medium: "48px",
big: "82px",
- max: "160px"
+ max: "160px",
},
- fontSize: {
- small: "12px",
- medium: "20px",
- big: "34px",
- max: "72px"
- }
},
- backdrop: { backgroundColor: "rgba(255, 255, 255, 0.3)" },
+ backdrop: {
+ backgroundColor: "rgba(255, 255, 255, 0.3)",
+ unsetBackgroundColor: "unset",
+ },
+
+ treeNode: {
+ dragging: {
+ draggable: {
+ background: lightCumulus,
+ hoverBackgroundColor: lightMediumGoldenrod,
+ borderRadius: "3px",
+ },
+
+ title: {
+ width: "85%",
+ },
+ },
+
+ draggable: {
+ color: cyanBlueDarkShade,
+ dragOverBackgroundColor: strongBlue,
+ border: `1px ${strongBlue} solid`,
+ dragOverColor: white,
+
+ gapTop: {
+ borderTop: `2px blue solid`,
+ },
+
+ gapBottom: {
+ borderBottom: `2px blue solid`,
+ },
+ },
+
+ contentWrapper: {
+ color: darkRed,
+ },
+
+ title: {
+ color: cyanBlueDarkShade,
+ },
+
+ selected: {
+ background: lightGrayishStrongBlue,
+ hoverBackgroundColor: lightGrayishStrongBlue,
+ borderRadius: "3px",
+ },
+
+ checkbox: {
+ border: `2px solid ${white}`,
+ borderTop: 0,
+ borderLeft: 0,
+ },
+ },
+
+ progressBar: {
+ height: "22px",
+ backgroundColor: grayLight,
+ marginLeft: "-100%",
+
+ fullText: {
+ padding: "0px 6px",
+ fontWeight: "600",
+ margin: "0",
+ },
+
+ percent: {
+ float: "left",
+ overflow: "hidden",
+ maxHeight: "22px",
+ minHeight: "22px",
+ transition: "width 0.6s ease",
+ background: "linear-gradient(90deg, #20d21f 75%, #b9d21f 100%)",
+ },
+
+ text: {
+ minWidth: "200%",
+
+ progressText: {
+ padding: "2px 6px",
+ margin: "0",
+ minWidth: "100px",
+ fontWeight: "600",
+ },
+ },
+
+ dropDown: {
+ padding: "16px 16px 16px 17px",
+ },
+ },
+
+ toast: {
+ active: {
+ success: activeSuccess,
+ error: activeError,
+ info: activeInfo,
+ warning: activeWarning,
+ },
+ hover: {
+ success: hoverSuccess,
+ error: hoverError,
+ info: hoverInfo,
+ warning: hoverWarning,
+ },
+
+ zIndex: "9999",
+ position: "fixed",
+ padding: "4px",
+ width: "320px",
+ color: white,
+ top: "16px",
+ right: "24px",
+ marginTop: "0px",
+
+ closeButton: {
+ color: white,
+ fontWeight: "700",
+ fontSize: "14px",
+ background: "transparent",
+ padding: "0",
+ opacity: "0.7",
+ hoverOpacity: "1",
+ transition: "0.3s ease",
+ },
+
+ main: {
+ marginBottom: "1rem",
+ boxShadow: "0px 10px 16px -12px rgba(0, 0, 0, 0.3)",
+ maxHeight: "800px",
+ overflow: "hidden",
+ borderRadius: "6px",
+ color: darkBlack,
+ margin: "0 0 12px",
+ padding: "12px",
+ minHeight: "32px",
+ width: "100%",
+ right: "0",
+ transition: "0.3s",
+ },
+ },
+
+ toastr: {
+ svg: {
+ width: "16px",
+ minWidth: "16px",
+ height: "16px",
+ minHeight: "16px",
+ color: black,
+ },
+
+ text: {
+ lineHeight: " 1.3",
+ fontSize: "12px",
+ color: black,
+ },
+
+ title: {
+ fontWeight: "600",
+ margin: "0",
+ marginBottom: "5px",
+ lineHeight: "16px",
+ color: darkBlack,
+ fontSize: "12px",
+ },
+ },
loader: {
color: white,
size: "40px",
- ovalFill: blueCharcoal,
- strokeWidth: 2
+ marginRight: "2px",
+ borderRadius: "50%",
},
dropDownItem: {
- width: "100%",
- maxWidth: "240px",
- border: "none",
- cursor: "pointer",
- padding: "0px 16px",
- lineHeight: "32px",
- textAlign: "left",
- background: "none",
- textDecoration: "none",
- fontStyle: "normal",
+ color: black,
+ disableColor: gray,
+ backgroundColor: white,
+ hoverBackgroundColor: grayLight,
+ hoverDisabledBackgroundColor: white,
fontWeight: "600",
fontSize: "13px",
+ width: "100%",
+ maxWidth: "500px",
+ border: "0px",
+ margin: "0px",
+ padding: "0px 16px",
+ lineHeight: "32px",
+ tabletLineHeight: "36px",
- whiteSpace: "nowrap",
- overflow: "hidden",
- textOverflow: "ellipsis",
+ icon: {
+ width: "16px",
+ marginRight: "8px",
+ lineHeight: "14px",
- outline: "none",
- color: black,
- textTransform: "none",
-
- hoverBackgroundColor: grayLight,
- noHoverBackgroundColor: white,
-
- header: {
- color: gray,
- hoverCursor: "default",
- hoverBackgroundColor: "white",
- textTransform: "uppercase"
- },
-
- disabled: {
- color: gray,
- hoverCursor: "default",
- hoverBackgroundColor: "white"
+ color: black,
+ disableColor: gray,
},
separator: {
padding: "0px 16px",
- border: `0.5px solid ${grayLightMid}`,
- cursor: "default",
- margin: "6px 16px 6px",
+ borderBottom: `1px solid ${globalColors.grayLightMid}`,
+ margin: " 4px 16px 4px",
lineHeight: "1px",
height: "1px",
- width: "calc(100% - 32px)"
+ width: "calc(100% - 32px)",
},
-
- tablet: { lineHeight: "36px" }
},
dropDown: {
- zIndex: "150",
+ fontWeight: "600",
+ fontSize: "13px",
+ zIndex: "200",
background: white,
borderRadius: "6px",
boxShadow: "0px 5px 20px rgba(0, 0, 0, 0.13)",
- padding: "6px 0px"
},
comboBox: {
+ padding: "6px 0px",
+
width: {
base: "173px",
middle: "300px",
big: "350px",
- huge: "500px"
+ huge: "500px",
},
arrow: {
@@ -422,12 +1124,12 @@ const Dark = {
marginTop: "12px",
marginRight: "8px",
marginLeft: "auto",
- fillColor: gray
+ fillColor: gray,
},
button: {
height: "18px",
- heightWithBorder: "32px",
+ heightWithBorder: "30px",
paddingLeft: "8px",
color: black,
@@ -437,57 +1139,98 @@ const Dark = {
border: `1px solid ${grayMid}`,
borderRadius: "3px",
- borderColor: white,
+ borderColor: blueMain,
disabledBorderColor: grayLightMid,
disabledBackground: grayLight,
hoverBorderColor: gray,
hoverBorderColorOpen: blueMain,
- hoverDisabledBorderColor: grayLightMid
+ hoverDisabledBorderColor: grayLightMid,
},
label: {
marginRightWithBorder: "8px",
marginRight: "4px",
- defaultDisabledColor: grayMid,
- defaultColor: gray,
disabledColor: grayMid,
color: white,
maxWidth: "175px",
lineHeightWithoutBorder: "15px",
- lineHeightTextDecoration: "underline dashed transparent"
+ lineHeightTextDecoration: "underline dashed transparent",
},
childrenButton: {
marginRight: "8px",
+ margin: "-6px 8px 0px 0px",
+ width: "16px",
+ height: "16px",
+
defaultDisabledColor: grayMid,
defaultColor: gray,
disabledColor: grayMid,
- color: black
- }
+ color: black,
+ },
},
+
toggleContent: {
headingHeight: "24px",
- headingLineHeight: "18px",
+ headingLineHeight: "26px",
hoverBorderBottom: "1px dashed",
contentPadding: "10px 0px 0px 0px",
arrowMargin: "4px 8px 4px 0px",
+ arrowMarginRight: "9px",
+ arrowMarginBottom: "5px",
transform: "rotate(180deg)",
- iconColor: white
+ iconColor: white,
+
+ childrenContent: {
+ color: white,
+ paddingTop: "6px",
+ },
+ },
+
+ toggleButton: {
+ fillColor: blueMain,
+ fillColorOff: gray,
+
+ disableFillColor: grayLightMid,
+ disableFillColorOff: grayLightMid,
+ },
+
+ contextMenuButton: {
+ content: {
+ width: "100%",
+ backgroundColor: " #fff",
+ padding: "0 16px 16px",
+ },
+
+ headerContent: {
+ maxWidth: "500px",
+ margin: "0",
+ lineHeight: "56px",
+ fontWeight: "700",
+ borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
+ },
+
+ bodyContent: {
+ padding: "16px 0",
+ },
},
calendar: {
baseWidth: "265px",
bigWidth: "289px",
+ baseMaxWidth: "293px",
+ bigMaxWidth: "325px",
+
hover: {
backgroundColor: shuttleGrey,
borderRadius: "16px",
- cursor: "pointer"
+ cursor: "pointer",
},
day: {
@@ -497,15 +1240,17 @@ const Dark = {
bigSizeWidth: "294px",
baseMarginTop: "3px",
bigMarginTop: "7.5px",
- lineHeight: "33px"
+ lineHeight: "33px",
},
+
weekdays: {
color: white,
- disabledColor: "#A3A9AE",
+ disabledColor: gray,
baseWidth: "272px",
bigWidth: "295px",
- marginBottom: "-5px"
+ marginBottom: "-5px",
},
+
month: {
baseWidth: "267px",
bigWidth: "295px",
@@ -513,100 +1258,133 @@ const Dark = {
weekendColor: gray,
disabledColor: shuttleGrey,
neighboringHoverColor: white,
- neighboringColor: grayMain
+ neighboringColor: grayMain,
},
+
selectedDay: {
backgroundColor: orangeMain,
borderRadius: "16px",
cursor: "pointer",
- color: white
+ color: white,
},
+
comboBox: {
color: white,
minWidth: "80px",
height: "32px",
marginLeft: "8px",
- padding: "0 0 24px 0"
+ padding: "0 0 24px 0",
},
+
comboBoxMonth: {
baseWidth: "172px",
- bigWidth: "196px"
- }
+ bigWidth: "205px",
+
+ baseMaxWidth: "172px",
+ bigMaxWidth: "196px",
+ },
},
datePicker: {
- width: "110px",
+ width: "115px",
dropDownPadding: "16px 16px 16px 17px",
- inputPadding: "5px 5px 5px 9px",
- inputBorder: blueMain,
- iconPadding: "8px 8px 7px 0px"
- },
-
- phoneInput: {
- width: "304px",
- height: "44px",
- itemTextColor: black ,
- itemBackgroundColor: white,
- itemHoverColor: grayLightMid,
- scrollBackground: "rgba(0, 0, 0, 0.1)",
- placeholderColor: gray
- },
-
- squareButton: {
- height: "32px",
- width: "32px",
- color: gray,
+ contentPadding: "0 16px 16px",
+ bodyPadding: "16px 0",
backgroundColor: white,
- border: `1px solid ${grayMid}`,
- borderRadius: "3px",
- outline: "none",
- hover: {
- backgroundColor: white,
- border: `1px solid ${gray}`
- },
- click: {
- backgroundColor: grayLightMid,
- border: `1px solid ${gray}`
- },
- disable: {
- backgroundColor: grayLight,
- border: `1px solid ${grayLightMid}`
- },
- crossShape: {
- color: graySilver,
- disable: {
- color: gray
- }
- }
+ inputBorder: blueMain,
+ iconPadding: "8px 8px 7px 0px",
+
+ contentMaxWidth: "500px",
+ contentLineHeight: "56px",
+ contentFontWeight: "700",
+ borderBottom: `1px solid ${globalColors.lightGrayishBlue}`,
},
- roundButton: {
- height: "40px",
- width: "40px",
- backgroundColor: grayLight,
- borderRadius:
- {
- plus: "112px",
- minus: "81px"
- },
- borderStyle: "none",
- outline: "none",
- hover: {
- backgroundColor: grayLightMid,
- },
- click: {
- backgroundColor: grayMid,
- },
- disable: {
- backgroundColor: grayLight,
- },
- plus: {
- color: grayMid,
- disable: {
- color: black
- }
- }
- }
+ aside: {
+ backgroundColor: white,
+ height: "100%",
+ overflowX: "hidden",
+ overflowY: "auto",
+ position: "fixed",
+ right: "0",
+ top: "0",
+ bottom: "16px",
+ paddingBottom: "64px",
+ transition: "transform 0.3s ease-in-out",
+ },
+
+ dragAndDrop: {
+ height: "100%",
+ border: `1px solid ${globalColors.darkSilver}`,
+ transparentBorder: "1px solid transparent",
+ acceptBackground: lightMediumGoldenrod,
+ background: lightCumulus,
+ },
+
+ // phoneInput: {
+ // width: "304px",
+ // height: "44px",
+ // itemTextColor: black,
+ // itemBackgroundColor: white,
+ // itemHoverColor: grayLightMid,
+ // scrollBackground: "rgba(0, 0, 0, 0.1)",
+ // placeholderColor: gray,
+ // },
+
+ // squareButton: {
+ // height: "32px",
+ // width: "32px",
+ // color: gray,
+ // backgroundColor: white,
+ // border: `1px solid ${grayMid}`,
+ // borderRadius: "3px",
+ // outline: "none",
+ // hover: {
+ // backgroundColor: white,
+ // border: `1px solid ${gray}`,
+ // },
+ // click: {
+ // backgroundColor: grayLightMid,
+ // border: `1px solid ${gray}`,
+ // },
+ // disable: {
+ // backgroundColor: grayLight,
+ // border: `1px solid ${grayLightMid}`,
+ // },
+ // crossShape: {
+ // color: graySilver,
+ // disable: {
+ // color: gray,
+ // },
+ // },
+ // },
+
+ // roundButton: {
+ // height: "40px",
+ // width: "40px",
+ // backgroundColor: grayLight,
+ // borderRadius: {
+ // plus: "112px",
+ // minus: "81px",
+ // },
+ // borderStyle: "none",
+ // outline: "none",
+ // hover: {
+ // backgroundColor: grayLightMid,
+ // },
+ // click: {
+ // backgroundColor: grayMid,
+ // },
+ // disable: {
+ // backgroundColor: grayLight,
+ // },
+ // plus: {
+ // color: grayMid,
+ // disable: {
+ // color: black,
+ // },
+ // },
+ // },
};
export default Dark;
diff --git a/packages/asc-web-components/src/utils/globalColors.js b/packages/asc-web-components/src/utils/globalColors.js
index a9a8f5ecbb..e34f1cd20d 100644
--- a/packages/asc-web-components/src/utils/globalColors.js
+++ b/packages/asc-web-components/src/utils/globalColors.js
@@ -21,8 +21,10 @@ const globalColors = {
blueDisabled: "#A6DCF2",
blueCharcoal: "#1F2933",
blueLightMid: "#265A8F",
+ strongBlue: "#316AC5",
- pattensBlue: "#DEE2E6",
+ lightGrayishBlue: "#DEE2E6",
+ lightGrayishStrongBlue: "#DFE2E3",
cyanBlueDarkShade: "#555F65",
orangeMain: "#ED7309",
@@ -37,7 +39,7 @@ const globalColors = {
warningColor: "#f1ca92",
red: "#c30",
-
+ darkRed: "#A60000",
activeSuccess: "#CAE796",
activeError: "#FFBFAA",
activeInfo: "#F1DA92",
diff --git a/packages/asc-web-components/src/utils/globalStyles.js b/packages/asc-web-components/src/utils/globalStyles.js
new file mode 100644
index 0000000000..e3ed572877
--- /dev/null
+++ b/packages/asc-web-components/src/utils/globalStyles.js
@@ -0,0 +1,13 @@
+import { createGlobalStyle } from "styled-components";
+
+const GlobalStyle = createGlobalStyle`
+
+html, body {
+ margin: 0;
+ background-color: ${props => props.theme.backgroundColor};
+ color: ${props => props.theme.color};
+ font-family: ${props => props.theme.fontFamily};
+}
+`;
+
+export default GlobalStyle;