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  -webkit-transform: translateZ(0);
98  transform: translateZ(0);
99  transition: -webkit-transform .25s ease-out;
100  transition: transform .25s ease-out;
101  transition: transform .25s ease-out,-webkit-transform .25s ease-out;
102}
103
104.modal-btn:focus, .modal-btn:hover {
105  -webkit-transform: scale(1.05);
106  transform: scale(1.05);
107}
108
109.modal-btn-primary {
110  background-color: #262f3c;
111  color: #fff;
112}
113
114.modal-footer {
115  display: flex;
116  justify-content: space-around;
117}
118
119/**************************\
120  Demo Animation Style
121\**************************/
122@keyframes mmfadeIn {
123    from { opacity: 0; }
124      to { opacity: 1; }
125}
126
127@keyframes mmfadeOut {
128    from { opacity: 1; }
129      to { opacity: 0; }
130}
131
132@keyframes mmslideIn {
133  from { transform: translateY(15%); }
134    to { transform: translateY(0); }
135}
136
137@keyframes mmslideOut {
138    from { transform: translateY(0); }
139    to { transform: translateY(-10%); }
140}
141
142.micromodal-slide {
143  display: none;
144}
145
146.micromodal-slide.is-open {
147  display: block;
148}
149
150.micromodal-slide[aria-hidden="false"] .modal-overlay {
151  animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
152}
153
154.micromodal-slide[aria-hidden="false"] .modal-container {
155  animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
156}
157
158.micromodal-slide[aria-hidden="true"] .modal-overlay {
159  animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
160}
161
162.micromodal-slide[aria-hidden="true"] .modal-container {
163  animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
164}
165
166.micromodal-slide .modal-container,
167.micromodal-slide .modal-overlay {
168  will-change: transform;
169}
170
171.help {
172  table {
173    margin-bottom: 15px;
174    td {
175      min-width: 250px;
176    }
177    td:first-child {
178      font-family: var(--monospace-font);
179    }
180  }
181  h2 {
182    font: inherit;
183    font-weight: bold;
184  }
185}
186
187.modal-pre {
188  white-space: pre-line;
189  font-size: 13px;
190  user-select: text;
191}
192
193.modal-logs, .modal-bash {
194  white-space: pre-wrap;
195  border: 1px solid #999;
196  background: #eee;
197  font-size: 10px;
198  font-family: monospace;
199  -webkit-user-select: text;
200  margin-top: 10px;
201  margin-bottom: 10px;
202  min-height: 50px;
203  max-height: 40vh;
204  overflow: scroll;
205}
206
207.modal-bash {
208  margin: 0;
209  padding: 5px 0;
210  overflow: auto;
211  min-height: 0;
212}
213
214.modal-textarea {
215  display: block;
216  margin-top: 10px;
217  margin-bottom: 10px;
218  width: 100%;
219}
220
221.modal-small {
222  font-size: 11px;
223}
224