• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1// Copyright (C) 2019 The Android Open Source Project
2//
3// Licensed under the Apache License, Version 2.0 (the "License");
4// you may not use this file except in compliance with the License.
5// You may obtain a copy of the License at
6//
7//      http://www.apache.org/licenses/LICENSE-2.0
8//
9// Unless required by applicable law or agreed to in writing, software
10// distributed under the License is distributed on an "AS IS" BASIS,
11// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12// See the License for the specific language governing permissions and
13// limitations under the License.
14
15/**************************\
16  Basic Modal Styles
17\**************************/
18.modal {
19  font-family: 'Raleway', sans-serif;
20}
21
22.modal-overlay {
23  position: fixed;
24  top: 0;
25  left: 0;
26  right: 0;
27  bottom: 0;
28  background: rgba(0,0,0,0.6);
29  display: flex;
30  justify-content: center;
31  align-items: center;
32  z-index: 999;
33}
34
35.modal-container {
36  background-color: #fff;
37  padding: 30px;
38  max-width: 90vw;
39  max-height: 90vh;
40  border-radius: 4px;
41  overflow-y: auto;
42  box-sizing: border-box;
43}
44
45.modal-header {
46  display: flex;
47  justify-content: space-between;
48  align-items: center;
49}
50
51.modal-title {
52  margin-top: 0;
53  margin-bottom: 0;
54  font-family: 'Raleway', sans-serif;
55  font-weight: 600;
56  font-size: 1.25rem;
57  line-height: 1.25;
58  color: #262f3c;
59  box-sizing: border-box;
60}
61
62.modal-close {
63  background: transparent;
64  border: 0;
65}
66
67.modal-header .modal-close:before { content: "\2715"; }
68
69.modal-content {
70  margin-top: 2rem;
71  margin-bottom: 2rem;
72  line-height: 1.5;
73  color: rgba(0,0,0,.8);
74}
75
76.modal-btn {
77  font-size: .875rem;
78  padding-left: 1rem;
79  padding-right: 1rem;
80  padding-top: .5rem;
81  padding-bottom: .5rem;
82  background-color: #e6e6e6;
83  color: rgba(0,0,0,.8);
84  border-radius: .25rem;
85  border-style: none;
86  border-width: 0;
87  cursor: pointer;
88  -webkit-appearance: button;
89  text-transform: none;
90  overflow: visible;
91  line-height: 1.15;
92  margin: 5px;
93  will-change: transform;
94  -moz-osx-font-smoothing: grayscale;
95  -webkit-backface-visibility: hidden;
96  backface-visibility: hidden;
97  transform: translateZ(0);
98  transition: transform .25s ease-out;
99}
100
101.modal-btn:focus, .modal-btn:hover {
102  transform: scale(1.05);
103}
104
105.modal-btn-primary {
106  background-color: #262f3c;
107  color: #fff;
108}
109
110.modal-footer {
111  display: flex;
112  justify-content: space-around;
113}
114
115/**************************\
116  Demo Animation Style
117\**************************/
118@keyframes mmfadeIn {
119    from { opacity: 0; }
120      to { opacity: 1; }
121}
122
123@keyframes mmfadeOut {
124    from { opacity: 1; }
125      to { opacity: 0; }
126}
127
128@keyframes mmslideIn {
129  from { transform: translateY(15%); }
130    to { transform: translateY(0); }
131}
132
133@keyframes mmslideOut {
134    from { transform: translateY(0); }
135    to { transform: translateY(-10%); }
136}
137
138.micromodal-slide {
139  display: none;
140}
141
142.micromodal-slide.is-open {
143  display: block;
144}
145
146.micromodal-slide[aria-hidden="false"] .modal-overlay {
147  animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
148}
149
150.micromodal-slide[aria-hidden="false"] .modal-container,
151.micromodal-slide[aria-hidden="false"] .partial-modal-container {
152  animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
153}
154
155.micromodal-slide[aria-hidden="true"] .modal-overlay {
156  animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
157}
158
159.micromodal-slide[aria-hidden="true"] .modal-container,
160.micromodal-slide[aria-hidden="true"] .partial-modal-container {
161  animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
162}
163
164.micromodal-slide .modal-container,
165.micromodal-slide .partial-modal-container,
166.micromodal-slide .modal-overlay {
167  will-change: transform;
168}
169
170.help {
171  table {
172    margin-bottom: 15px;
173    td {
174      min-width: 250px;
175    }
176    td:first-child {
177      font-family: var(--monospace-font);
178    }
179  }
180  h2 {
181    font: inherit;
182    font-weight: bold;
183  }
184}
185
186.modal-pre {
187  white-space: pre-line;
188  font-size: 13px;
189}
190
191.modal-logs, .modal-bash {
192  white-space: pre-wrap;
193  border: 1px solid #999;
194  background: #eee;
195  font-size: 10px;
196  font-family: var(--monospace-font);
197  margin-top: 10px;
198  margin-bottom: 10px;
199  min-height: 50px;
200  max-height: 40vh;
201  overflow: scroll;
202}
203
204.modal-bash {
205  margin: 0;
206  padding: 5px 0;
207  overflow: auto;
208  min-height: 0;
209}
210
211.modal-textarea {
212  display: block;
213  margin-top: 10px;
214  margin-bottom: 10px;
215  width: 100%;
216}
217
218.modal-small {
219  font-size: 11px;
220}
221
222.partial-modal-overlay {
223  position: absolute;
224  top: 0;
225  left: 0;
226  right: 0;
227  bottom: 0;
228  background: rgba(0,0,0,0.6);
229  display: flex;
230  justify-content: center;
231  z-index: 999;
232}
233
234.partial-modal-container {
235  background-color: #fff;
236  margin-top: 1vh;
237  padding: 30px 30px 20px 30px;
238  max-width: 90vw;
239  height: fit-content;
240  border-radius: 4px;
241  overflow-y: auto;
242  box-sizing: border-box;
243}
244
245.partial-modal-header {
246  display: flex;
247  justify-content: center;
248  align-items: center;
249}
250