Merge branch 'feature/workspaces' of github.com:ONLYOFFICE/AppServer into feature/workspaces
This commit is contained in:
commit
acd417fc9b
@ -1 +0,0 @@
|
||||
export default from "./ThemeProvider";
|
@ -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) {
|
||||
|
@ -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;
|
@ -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",
|
||||
|
@ -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 }) => (
|
||||
<div {...props}></div>
|
||||
);
|
||||
|
||||
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()}
|
||||
</PasswordProgress>
|
||||
{!hideNewPasswordButton ? (
|
||||
<NewPasswordButton>
|
||||
<Icons.RefreshIcon
|
||||
<NewPasswordButton isDisabled={isDisabled}>
|
||||
<RefreshIcon
|
||||
size="medium"
|
||||
color={iconsColor}
|
||||
isfill={true}
|
||||
onClick={this.onGeneratePassword}
|
||||
/>
|
||||
</NewPasswordButton>
|
||||
@ -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)}
|
||||
>
|
||||
|
@ -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 }) => (
|
||||
<div {...props}></div>
|
||||
);
|
||||
|
||||
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 };
|
@ -0,0 +1 @@
|
||||
export { default as RefreshIcon } from "./refresh.react.svg";
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
@ -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 = "";
|
||||
|
@ -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,
|
||||
};
|
@ -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`
|
||||
|
@ -45,7 +45,6 @@ Text.propTypes = {
|
||||
|
||||
Text.defaultProps = {
|
||||
title: null,
|
||||
color: "#333333",
|
||||
textAlign: "left",
|
||||
fontSize: "13px",
|
||||
truncate: false,
|
||||
|
@ -0,0 +1 @@
|
||||
export default from "./theme-provider";
|
@ -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";
|
@ -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;
|
||||
|
@ -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: {
|
||||
|
File diff suppressed because it is too large
Load Diff
@ -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",
|
||||
|
13
packages/asc-web-components/src/utils/globalStyles.js
Normal file
13
packages/asc-web-components/src/utils/globalStyles.js
Normal file
@ -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;
|
Loading…
Reference in New Issue
Block a user