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         margin-top: 1px;
  61   }
  62
  63   svg {
  64         overflow: hidden;
  65         width: 100%;
  66         height: 100%;
  67   }
  68
  69   button {
  70         background-color: ${props => (props.theme.loopViewerHeaderBackgroundColor)};
  71         border: 1px;
  72         color: white;
  73         padding: 15px 32px;
  74         text-align: center;
  75         text-decoration: none;
  76         display: inline-block;
  77         font-size: ${props => props.theme.fontSize};
  78         font-family: ${props => props.theme.fontFamily};
  79
  80   }
  81 `
  82
  83 export const DefaultClampTheme = {
  84         fontDanger: '#eb238e',
  85         fontWarning: '#eb238e',
  86         fontLight: '#ffffff',
  87         fontDark: '#888888',
  88         fontHighlight: '#ffff00',
  89         fontNormal: 'black',
  90
  91         backgroundColor: '#eeeeee',
  92         fontFamily: 'Arial, Sans-serif',
  93         fontSize: '15px',
  94
  95         loopViewerBackgroundColor: 'white',
  96         loopViewerFontColor: 'yellow',
  97         loopViewerHeaderBackgroundColor: '#337ab7',
  98         loopViewerHeaderFontColor: 'white',
  99
 100         menuBackgroundColor: 'white',
 101         menuFontColor: 'black',
 102         menuHighlightedBackgroundColor: '#337ab7',
 103         menuHighlightedFontColor: 'white',
 104 };