1 /* Copyright (c) 2019 AT&T Intellectual Property. #
\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
7 # http://www.apache.org/licenses/LICENSE-2.0 #
\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
19 font-family: 'PT Sans Caption', sans-serif, 'arial', 'Times New Roman';
\r
22 .error .clip .shadow
\r
24 height: 180px; /*Contrall*/
\r
26 .error .clip:nth-of-type(2) .shadow
\r
28 width: 130px; /*Contrall play with javascript*/
\r
30 .error .clip:nth-of-type(1) .shadow, .error .clip:nth-of-type(3) .shadow
\r
32 width: 250px; /*Contrall*/
\r
36 width: 150px; /*Contrall*/
\r
37 height: 150px; /*Contrall*/
\r
38 line-height: 150px; /*Contrall*/
\r
42 .error h2 /*Contrall*/
\r
46 .error .msg /*Contrall*/
\r
55 .error span.triangle /*Contrall*/
\r
59 border-left: 20px solid #535353;
\r
60 border-top: 15px solid transparent;
\r
61 border-bottom: 15px solid transparent;
\r
65 .error .container-error-404
\r
72 .error .container-error-404 .clip
\r
74 display: inline-block;
\r
75 transform: skew(-45deg);
\r
77 .error .clip .shadow
\r
82 .error .clip:nth-of-type(2) .shadow
\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
89 .error .clip:nth-of-type(3) .shadow:after, .error .clip:nth-of-type(1) .shadow:after
\r
98 background: linear-gradient(90deg, transparent, rgba(173,173,173, 0.8), transparent);
\r
101 .error .clip:nth-of-type(3) .shadow:after
\r
107 position: relative;
\r
110 background: #07B3F9;
\r
111 border-radius: 50%;
\r
112 display: inline-block;
\r
113 transform: skew(45deg);
\r
115 .error .clip:nth-of-type(2) .digit
\r
119 .error .clip:nth-of-type(1) .digit
\r
122 }.error .clip:nth-of-type(3) .digit
\r
130 padding-bottom: 20px;
\r
134 position: relative;
\r
137 background: #535353;
\r
139 border-radius: 50%;
\r
140 font-style: italic;
\r
144 position: absolute;
\r
146 transform: rotate(45deg);
\r
153 @media(max-width: 767px)
\r
156 .error .clip .shadow
\r
158 height: 100px; /*Contrall*/
\r
160 .error .clip:nth-of-type(2) .shadow
\r
162 width: 80px; /*Contrall play with javascript*/
\r
164 .error .clip:nth-of-type(1) .shadow, .error .clip:nth-of-type(3) .shadow
\r
166 width: 100px; /*Contrall*/
\r
170 width: 80px; /*Contrall*/
\r
171 height: 80px; /*Contrall*/
\r
172 line-height: 80px; /*Contrall*/
\r
175 .error h2 /*Contrall*/
\r
179 .error .msg /*Contrall*/
\r
188 .error span.triangle /*Contrall*/
\r
192 border-left: 10px solid #535353;
\r
193 border-top: 8px solid transparent;
\r
194 border-bottom: 8px solid transparent;
\r
196 .error .container-error-404
\r
203 /*--------------------------------------------Framework --------------------------------*/
\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
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
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
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
233 .no-vertical-margin { margin-top: 0px; margin-bottom: 0px; }
\r
234 .no-horizontal-margin { margin-left: 0px; margin-right: 0px; }
\r
236 .inside-col-shrink { margin: 0px 20px; } /*done - For the inside sections that has also Title section*/
\r
237 /* Margin section */
\r
240 { margin: 0px; padding: 0px; border-top: 1px dashed #999; }
\r
241 /*--------------------------------------------FrameWork------------------------*/