otf-frontend/client/src/styles/app.scss

   1 /*  Copyright (c) 2019 AT&T Intellectual Property.                             #\r
   2 #                                                                              #\r
   3 #   Licensed under the Apache License, Version 2.0 (the "License");            #\r
   4 #   you may not use this file except in compliance with the License.           #\r
   5 #   You may obtain a copy of the License at                                    #\r
   6 #                                                                              #\r
   7 #       http://www.apache.org/licenses/LICENSE-2.0                             #\r
   8 #                                                                              #\r
   9 #   Unless required by applicable law or agreed to in writing, software        #\r
  10 #   distributed under the License is distributed on an "AS IS" BASIS,          #\r
  11 #   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   #\r
  12 #   See the License for the specific language governing permissions and        #\r
  13 #   limitations under the License.                                             #\r
  14 ##############################################################################*/\r
  15 \r
  16 \r
  17 /* You can add global styles to this file, and also import other style files */\r
  18 $zindex-dropdown:                   900 !default;\r
  19 $zindex-sticky:                     920 !default;\r
  20 $zindex-fixed:                      950 !default;\r
  21 $font-size-base:                    .8rem !default;\r
  22 @import "../../../node_modules/bootstrap/scss/bootstrap";\r
  23 @import "spinner";\r
  24 @import "utils";\r
  25 @import "rtl";\r
  26 @import "responsive";\r
  27 \r
  28 .list-group-item {\r
  29     padding: .5rem 1rem;\r
  30 }\r
  31 \r
  32 @media print {\r
  33     .breadcrumb {\r
  34         display: none !important;\r
  35     }\r
  36 }\r
  37 \r
  38 @import '~@angular/material/theming';\r
  39 // Plus imports for other components in your app.\r
  40 \r
  41 // Include the common styles for Angular Material. We include this here so that you only\r
  42 // have to load a single css file for Angular Material in your app.\r
  43 // Be sure that you only ever include this mixin once!\r
  44 @include mat-core();\r
  45 \r
  46 // Define the palettes for your theme using the Material Design palettes available in palette.scss\r
  47 // (imported above). For each palette, you can optionally specify a default, lighter, and darker\r
  48 // hue. Available color palettes: https://material.io/design/color/\r
  49 $candy-app-primary: mat-palette($mat-blue, 900);\r
  50 \r
  51 $candy-app-accent:  mat-palette($mat-orange, A400);\r
  52 \r
  53 // The warn palette is optional (defaults to red).\r
  54 $candy-app-warn:    mat-palette($mat-deep-orange, A700);\r
  55 \r
  56 // Create the theme object (a Sass map containing all of the palettes).\r
  57 $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);\r
  58 \r
  59 // Include theme styles for core and each component used in your app.\r
  60 // Alternatively, you can import and @include the theme mixins for each component\r
  61 // that you are using.\r
  62 @include angular-material-theme($candy-app-theme);\r
  63 \r
  64 @import "../../../node_modules/perfect-scrollbar/css/perfect-scrollbar.css";\r
  65 //@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';\r
  66 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');\r
  67 @import "../../../node_modules/codemirror/lib/codemirror.css";\r
  68 @import "../../../node_modules/codemirror/theme/eclipse.css";\r
  69 \r
  70 @import 'ag-grid-community/dist/styles/ag-grid.css';\r
  71 @import 'ag-grid-community/dist/styles/ag-theme-material.css';\r
  72 \r
  73 @font-face {\r
  74     font-family: 'Material Icons';\r
  75     font-style: normal;\r
  76     font-weight: 400;\r
  77     src: local('Material Icons'), \r
  78          local('MaterialIcons-Regular'), \r
  79          url(https://fonts.gstatic.com/s/materialicons/v21/2fcrYFNaTjcS6g4U3t-Y5UEw0lE80llgEseQY3FEmqw.woff2) format('woff2');\r
  80   }\r
  81 \r
  82 mat-icon{\r
  83     font-family: 'Material Icons' !important\r
  84 }\r
  85 \r
  86 .embedded {\r
  87     box-shadow: inset 0px 11px 8px -10px #CCC, inset 0px -11px 8px -10px #CCC\r
  88 }\r
  89 \r
  90 .mat-mini-fab .mat-button-wrapper>*{\r
  91     vertical-align: 6px !important;\r
  92 }\r
  93 \r
  94 button:focus{\r
  95     outline: none;\r
  96 }\r
  97 \r
  98 mat-card {\r
  99     padding: 0px !important;\r
 100 }\r
 101 \r
 102 mat-card-header {\r
 103     padding: 15px !important;\r
 104     padding-top: 10px !important;\r
 105     padding-bottom: 10px !important;\r
 106 }\r
 107 \r
 108 .mat-card-header-text {\r
 109     width: 100% !important;\r
 110 }\r
 111 \r
 112 mat-card-title {\r
 113     margin: 0px !important;\r
 114     padding: 0px !important;\r
 115 }\r
 116 \r
 117 mat-card-title button {\r
 118     padding: 3px 8px !important;\r
 119     line-height: 5px !important;\r
 120 }\r
 121 \r
 122 mat-card-title button mat-icon {\r
 123     font-size: 22px !important;\r
 124 }\r
 125 \r
 126 mat-card-content {\r
 127     padding: 24px !important;\r
 128     padding-top: 10px !important;\r
 129 }\r
 130 \r
 131 .highlight-task-running:not(.djs-connection) .djs-visual > :nth-child(1) {\r
 132     fill: rgb(186, 186, 255) !important; /* color elements as green */\r
 133     opacity: .7;\r
 134 }\r
 135 \r
 136 .highlight-task-completed:not(.djs-connection) .djs-visual > :nth-child(1) {\r
 137     fill: rgb(92, 223, 92) !important; /* color elements as green */\r
 138 }\r
 139 \r
 140 .highlight-task-failed:not(.djs-connection) .djs-visual > :nth-child(1) {\r
 141     fill: rgb(255, 83, 83) !important; /* color elements as green */\r
 142 }\r
 143 \r
 144 .dropdown-item {\r
 145     cursor: pointer;\r
 146 }\r
 147 \r
 148 tr:nth-child(even){background-color: #f9f9f9;}\r
 149 \r
 150 html {\r
 151     height: 100%\r
 152 }\r
 153 \r
 154 body {\r
 155     height: calc(100% - 56px);\r
 156 }\r
 157 \r
 158 .main-container {\r
 159     height: 100%;\r
 160     overflow: scroll !important;\r
 161 }\r
 162 \r
 163 .form-buttons {\r
 164     position:absolute;\r
 165     bottom:0;\r
 166     right:0; \r
 167     z-index:1000;\r
 168     margin-bottom:-18px\r
 169 }\r
 170 \r
 171 .upload-progress {\r
 172     position: absolute;\r
 173     background-color: green;\r
 174     height: 100%;\r
 175     opacity: .5;\r
 176     top: 0; \r
 177     left: 0;\r
 178 }\r
 179 app-form-generator textarea,\r
 180 app-form-generator input {\r
 181     width: 100%;\r
 182 }\r
 183 \r
 184 .loader-modal-container .mat-dialog-container{\r
 185     border-radius: 100px;\r
 186     opacity: 0.1;\r
 187 }