ui-react/src/theme/globalStyle.js

   1 /*-
   2  * ============LICENSE_START=======================================================
   3  * ONAP CLAMP
   4  * ================================================================================
   5  * Copyright (C) 2019 AT&T Intellectual Property. All rights
   6  *                             reserved.
   7  * ================================================================================
   8  * Licensed under the Apache License, Version 2.0 (the "License");
   9  * you may not use this file except in compliance with the License.
  10  * You may obtain a copy of the License at
  11  *
  12  * http://www.apache.org/licenses/LICENSE-2.0
  13  *
  14  * Unless required by applicable law or agreed to in writing, software
  15  * distributed under the License is distributed on an "AS IS" BASIS,
  16  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  17  * See the License for the specific language governing permissions and
  18  * limitations under the License.
  19  * ============LICENSE_END============================================
  20  * ===================================================================
  21  *
  22  */
  23
  24 import { createGlobalStyle } from 'styled-components';
  25
  26 export const GlobalClampStyle = createGlobalStyle`
  27   body {
  28     padding: 0;
  29     margin: 0;
  30     font-family: ${props => props.theme.fontFamily};
  31     font-size: ${props => props.theme.fontSize};
  32     font-weight: normal;
  33     color: ${props => props.theme.fontNormal};
  34     background-color: ${props => props.theme.backgroundColor};
  35   }
  36
  37  span {
  38         font-family: ${props => props.theme.fontFamily};
  39     font-size: ${props => props.theme.fontSize};
  40     font-weight: bold;
  41     color: ${props => props.theme.fontNormal};
  42     background-color: ${props => props.theme.backgroundColor};
  43   }
  44
  45   a {
  46         font-family: ${props => props.theme.fontFamily};
  47     font-size: ${props => props.theme.fontSize};
  48     font-weight: bold;
  49     color: ${props => props.theme.fontNormal};
  50     background-color: ${props => props.theme.backgroundColor};
  51
  52   }
  53
  54   div {
  55         font-family: ${props => props.theme.fontFamily};
  56     font-size: ${props => props.theme.fontSize};
  57         border-radius: 4px;
  58         color: ${props => props.theme.fontNormal};
  59     background-color: ${props => (props.theme.backgroundColor)};
  60   }
  61
  62   svg {
  63         padding: 10px;
  64         overflow: hidden;
  65         background-color: ${props => (props.theme.loopViewerBackgroundColor)};
  66         width: 100%;
  67         height: 100%;
  68   }
  69 `
  70
  71 export const DefaultClampTheme = {
  72         fontDanger: '#eb238e',
  73         fontWarning: '#eb238e',
  74         fontLight: '#ffffff',
  75         fontDark: '#888888',
  76         fontHighlight: '#ffff00',
  77         fontNormal: 'black',
  78
  79         backgroundColor: '#eeeeee',
  80         fontFamily: 'Arial, Sans-serif',
  81         fontSize: '15px',
  82
  83         loopViewerBackgroundColor: 'white',
  84         loopViewerFontColor: 'yellow',
  85         loopViewerHeaderBackgroundColor: '#337ab7',
  86         loopViewerHeaderFontColor: 'white',
  87 };