otf-frontend/client/src/app/not-found/not-found.component.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 *\r
  18 {\r
  19   font-family: 'PT Sans Caption', sans-serif, 'arial', 'Times New Roman';\r
  20 }\r
  21 /* Error Page */\r
  22     .error .clip .shadow\r
  23     {\r
  24         height: 180px;  /*Contrall*/\r
  25     }\r
  26     .error .clip:nth-of-type(2) .shadow\r
  27     {\r
  28         width: 130px;   /*Contrall play with javascript*/ \r
  29     }\r
  30     .error .clip:nth-of-type(1) .shadow, .error .clip:nth-of-type(3) .shadow\r
  31     {\r
  32         width: 250px; /*Contrall*/\r
  33     }\r
  34     .error .digit\r
  35     {\r
  36         width: 150px;   /*Contrall*/\r
  37         height: 150px;  /*Contrall*/\r
  38         line-height: 150px; /*Contrall*/\r
  39         font-size: 120px;\r
  40         font-weight: bold;\r
  41     }\r
  42     .error h2   /*Contrall*/\r
  43     {\r
  44         font-size: 32px;\r
  45     }\r
  46     .error .msg /*Contrall*/\r
  47     {\r
  48         top: -190px;\r
  49         left: 30%;\r
  50         width: 80px;\r
  51         height: 80px;\r
  52         line-height: 80px;\r
  53         font-size: 32px;\r
  54     }\r
  55     .error span.triangle    /*Contrall*/\r
  56     {\r
  57         top: 70%;\r
  58         right: 0%;\r
  59         border-left: 20px solid #535353;\r
  60         border-top: 15px solid transparent;\r
  61         border-bottom: 15px solid transparent;\r
  62     }\r
  63 \r
  64 \r
  65     .error .container-error-404\r
  66     {\r
  67       margin-top: 10%;\r
  68         position: relative;\r
  69         height: 250px;\r
  70         padding-top: 40px;\r
  71     }\r
  72     .error .container-error-404 .clip\r
  73     {\r
  74         display: inline-block;\r
  75         transform: skew(-45deg);\r
  76     }\r
  77     .error .clip .shadow\r
  78     {\r
  79         \r
  80         overflow: hidden;\r
  81     }\r
  82     .error .clip:nth-of-type(2) .shadow\r
  83     {\r
  84         overflow: hidden;\r
  85         position: relative;\r
  86         box-shadow: inset 20px 0px 20px -15px rgba(150, 150, 150,0.8), 20px 0px 20px -15px rgba(150, 150, 150,0.8);\r
  87     }\r
  88     \r
  89     .error .clip:nth-of-type(3) .shadow:after, .error .clip:nth-of-type(1) .shadow:after\r
  90     {\r
  91         content: "";\r
  92         position: absolute;\r
  93         right: -8px;\r
  94         bottom: 0px;\r
  95         z-index: 9999;\r
  96         height: 100%;\r
  97         width: 10px;\r
  98         background: linear-gradient(90deg, transparent, rgba(173,173,173, 0.8), transparent);\r
  99         border-radius: 50%;\r
 100     }\r
 101     .error .clip:nth-of-type(3) .shadow:after\r
 102     {\r
 103         left: -8px;\r
 104     }\r
 105     .error .digit\r
 106     {\r
 107         position: relative;\r
 108         top: 8%;\r
 109         color: white;\r
 110         background: #07B3F9;\r
 111         border-radius: 50%;\r
 112         display: inline-block;\r
 113         transform: skew(45deg);\r
 114     }\r
 115     .error .clip:nth-of-type(2) .digit\r
 116     {\r
 117         left: -10%;\r
 118     }\r
 119     .error .clip:nth-of-type(1) .digit\r
 120     {\r
 121         right: -20%;\r
 122     }.error .clip:nth-of-type(3) .digit\r
 123     {\r
 124         left: -20%;\r
 125     }    \r
 126     .error h2\r
 127     {\r
 128         color: #A2A2A2;\r
 129         font-weight: bold;\r
 130         padding-bottom: 20px;\r
 131     }\r
 132     .error .msg\r
 133     {\r
 134         position: relative;\r
 135         z-index: 9999;\r
 136         display: block;\r
 137         background: #535353;\r
 138         color: #A2A2A2;\r
 139         border-radius: 50%;\r
 140         font-style: italic;\r
 141     }\r
 142     .error .triangle\r
 143     {\r
 144         position: absolute;\r
 145         z-index: 999;\r
 146         transform: rotate(45deg);\r
 147         content: "";\r
 148         width: 0; \r
 149         height: 0; \r
 150     }\r
 151 \r
 152 /* Error Page */\r
 153 @media(max-width: 767px)\r
 154 {\r
 155     /* Error Page */\r
 156             .error .clip .shadow\r
 157             {\r
 158                 height: 100px;  /*Contrall*/\r
 159             }\r
 160             .error .clip:nth-of-type(2) .shadow\r
 161             {\r
 162                 width: 80px;   /*Contrall play with javascript*/ \r
 163             }\r
 164             .error .clip:nth-of-type(1) .shadow, .error .clip:nth-of-type(3) .shadow\r
 165             {\r
 166                 width: 100px; /*Contrall*/\r
 167             }\r
 168             .error .digit\r
 169             {\r
 170                 width: 80px;   /*Contrall*/\r
 171                 height: 80px;  /*Contrall*/\r
 172                 line-height: 80px; /*Contrall*/\r
 173                 font-size: 52px;\r
 174             }\r
 175             .error h2   /*Contrall*/\r
 176             {\r
 177                 font-size: 24px;\r
 178             }\r
 179             .error .msg /*Contrall*/\r
 180             {\r
 181                 top: -110px;\r
 182                 left: 15%;\r
 183                 width: 40px;\r
 184                 height: 40px;\r
 185                 line-height: 40px;\r
 186                 font-size: 18px;\r
 187             }\r
 188             .error span.triangle    /*Contrall*/\r
 189             {\r
 190                 top: 70%;\r
 191                 right: -3%;\r
 192                 border-left: 10px solid #535353;\r
 193                 border-top: 8px solid transparent;\r
 194                 border-bottom: 8px solid transparent;\r
 195             }\r
 196 .error .container-error-404\r
 197   {\r
 198     height: 150px;\r
 199   }\r
 200         /* Error Page */\r
 201 }\r
 202 \r
 203 /*--------------------------------------------Framework --------------------------------*/\r
 204 \r
 205 .overlay { position: relative; z-index: 20; } /*done*/\r
 206     .ground-color { background: white; }  /*done*/\r
 207     .item-bg-color { background: #EAEAEA } /*done*/\r
 208     \r
 209     /* Padding Section*/\r
 210         .padding-top { padding-top: 10px; } /*done*/\r
 211         .padding-bottom { padding-bottom: 10px; }   /*done*/\r
 212         .padding-vertical { padding-top: 10px; padding-bottom: 10px; }\r
 213         .padding-horizontal { padding-left: 10px; padding-right: 10px; }\r
 214         .padding-all { padding: 10px; }   /*done*/\r
 215 \r
 216         .no-padding-left { padding-left: 0px; }    /*done*/\r
 217         .no-padding-right { padding-right: 0px; }   /*done*/\r
 218         .no-vertical-padding { padding-top: 0px; padding-bottom: 0px; }\r
 219         .no-horizontal-padding { padding-left: 0px; padding-right: 0px; }\r
 220         .no-padding { padding: 0px; }   /*done*/\r
 221     /* Padding Section*/\r
 222 \r
 223     /* Margin section */\r
 224         .margin-top { margin-top: 10px; }   /*done*/\r
 225         .margin-bottom { margin-bottom: 10px; } /*done*/\r
 226         .margin-right { margin-right: 10px; } /*done*/\r
 227         .margin-left { margin-left: 10px; } /*done*/\r
 228         .margin-horizontal { margin-left: 10px; margin-right: 10px; } /*done*/\r
 229         .margin-vertical { margin-top: 10px; margin-bottom: 10px; } /*done*/\r
 230         .margin-all { margin: 10px; }   /*done*/\r
 231         .no-margin { margin: 0px; }   /*done*/\r
 232 \r
 233         .no-vertical-margin { margin-top: 0px; margin-bottom: 0px; }\r
 234         .no-horizontal-margin { margin-left: 0px; margin-right: 0px; }\r
 235 \r
 236         .inside-col-shrink { margin: 0px 20px; }    /*done - For the inside sections that has also Title section*/ \r
 237     /* Margin section */\r
 238 \r
 239     hr\r
 240     { margin: 0px; padding: 0px; border-top: 1px dashed #999; }\r
 241 /*--------------------------------------------FrameWork------------------------*/