From c8d6130e6355a6f8f460c114ed7bac0221eb0020 Mon Sep 17 00:00:00 2001 From: sebdet Date: Thu, 4 Jul 2019 15:50:34 +0200 Subject: More modular approach Modular approach for React components and CSS + theming Issue-ID: CLAMP-418 Change-Id: I359f31e92492ae75ac26ef297abde822c6cd56ea Signed-off-by: sebdet --- ui-react/src/theme/globalStyle.js | 79 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 ui-react/src/theme/globalStyle.js (limited to 'ui-react/src/theme') diff --git a/ui-react/src/theme/globalStyle.js b/ui-react/src/theme/globalStyle.js new file mode 100644 index 00000000..df912629 --- /dev/null +++ b/ui-react/src/theme/globalStyle.js @@ -0,0 +1,79 @@ +/*- + * ============LICENSE_START======================================================= + * ONAP CLAMP + * ================================================================================ + * Copyright (C) 2019 AT&T Intellectual Property. All rights + * reserved. + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ============LICENSE_END============================================ + * =================================================================== + * + */ + +import { createGlobalStyle } from 'styled-components'; + +export const GlobalClampStyle = createGlobalStyle` + body { + padding: 0; + margin: 0; + font-family: ${props => props.theme.fontFamily}; + font-size: ${props => props.theme.fontSize}; + font-weight: normal; + color: ${props => props.theme.fontNormal}; + background-color: ${props => props.theme.backgroundColor}; + } + + span { + font-family: ${props => props.theme.fontFamily}; + font-size: ${props => props.theme.fontSize}; + font-weight: bold; + color: ${props => props.theme.fontNormal}; + background-color: ${props => props.theme.backgroundColor}; + } + + a { + font-family: ${props => props.theme.fontFamily}; + font-size: ${props => props.theme.fontSize}; + font-weight: bold; + color: ${props => props.theme.fontNormal}; + background-color: ${props => props.theme.backgroundColor}; + + } + + div { + font-family: ${props => props.theme.fontFamily}; + font-size: ${props => props.theme.fontSize}; + border-radius: 4px; + color: ${props => props.theme.fontNormal}; + background-color: ${props => (props.theme.backgroundColor)}; + } +` + +export const DefaultClampTheme = { + fontDanger: '#eb238e', + fontWarning: '#eb238e', + fontLight: '#ffffff', + fontDark: '#888888', + fontHighlight: '#ffff00', + fontNormal: 'black', + + backgroundColor: '#eeeeee', + fontFamily: 'Arial, Sans-serif', + fontSize: '15px', + + loopViewerBackgroundColor: 'white', + loopViewerFontColor: 'yellow', + loopViewerHeaderBackgroundColor: '#337ab7', + loopViewerHeaderFontColor: 'white', +}; -- cgit 1.2.3-korg