← Back to branch summary

~johnsca/charms/trusty/cloudfoundry/better-basic-reconciler-status

« back to all changes in this revision

Viewing changes to reconciler/ui/static/semantic/uncompressed/modules/modal.css

  • Committer: Whit Morriss
  • Date: 2014-10-13 06:50:17 UTC
  • mto: (132.2.1 reconciler) (145.1.1 trunk)
  • mto: This revision was merged to the branch mainline in revision 156.
  • Revision ID: whit.morriss@canonical.com-20141013065017-0feo2ku3yllymkol
reorg reconciler

Show diffs side-by-side

added added

removed removed

Lines of Context:
reconciler/ui/static/semantic/uncompressed/modules/modal.css
 
1
/*
 
2
 * # Semantic - Modal
 
3
 * http://github.com/jlukic/semantic-ui/
 
4
 *
 
5
 *
 
6
 * Copyright 2014 Contributors
 
7
 * Released under the MIT license
 
8
 * http://opensource.org/licenses/MIT
 
9
 *
 
10
 */
 
11
/*******************************
 
12
             Modal
 
13
*******************************/
 
14
.ui.modal {
 
15
  display: none;
 
16
  position: fixed;
 
17
  z-index: 1001;
 
18
  top: 50%;
 
19
  left: 50%;
 
20
  text-align: left;
 
21
  width: 90%;
 
22
  margin-left: -45%;
 
23
  background-color: #FFFFFF;
 
24
  border: 1px solid #DDDDDD;
 
25
  border-radius: 5px;
 
26
  -webkit-user-select: text;
 
27
  -moz-user-select: text;
 
28
  -ms-user-select: text;
 
29
  user-select: text;
 
30
}
 
31
/*******************************
 
32
            Content
 
33
*******************************/
 
34
/*--------------
 
35
     Close
 
36
---------------*/
 
37
.ui.modal > .close {
 
38
  cursor: pointer;
 
39
  position: absolute;
 
40
  z-index: 1;
 
41
  opacity: 0.8;
 
42
  font-size: 1.25em;
 
43
  top: -1.75em;
 
44
  right: -1.75em;
 
45
  color: #FFFFFF;
 
46
}
 
47
.ui.modal > .close:hover {
 
48
  opacity: 1;
 
49
}
 
50
/*--------------
 
51
     Header
 
52
---------------*/
 
53
.ui.modal > .header {
 
54
  margin: 0em;
 
55
  padding: 1.5rem 2rem;
 
56
  font-size: 1.6em;
 
57
  font-weight: bold;
 
58
  border-radius: 0.325em 0.325em 0px 0px;
 
59
}
 
60
/*--------------
 
61
     Content
 
62
---------------*/
 
63
.ui.modal > .content {
 
64
  display: table;
 
65
  width: 100%;
 
66
  position: relative;
 
67
  padding: 2em;
 
68
  background-color: #F4F4F4;
 
69
  -webkit-box-sizing: border-box;
 
70
  -moz-box-sizing: border-box;
 
71
  -ms-box-sizing: border-box;
 
72
  box-sizing: border-box;
 
73
}
 
74
.ui.modal > .content > .left:not(.ui) {
 
75
  display: table-cell;
 
76
  padding-right: 1.5%;
 
77
  min-width: 25%;
 
78
}
 
79
.ui.modal > .content > .right:not(.ui) {
 
80
  display: table-cell;
 
81
  padding-left: 1.5%;
 
82
  vertical-align: top;
 
83
}
 
84
/*rtl:ignore*/
 
85
.ui.modal > .content > .left:not(.ui) > i.icon {
 
86
  font-size: 8em;
 
87
  margin: 0em;
 
88
}
 
89
.ui.modal > .content p {
 
90
  line-height: 1.6;
 
91
}
 
92
/*--------------
 
93
     Actions
 
94
---------------*/
 
95
.ui.modal .actions {
 
96
  padding: 1rem 2rem;
 
97
  text-align: right;
 
98
}
 
99
.ui.modal .actions > .button {
 
100
  margin-left: 0.75em;
 
101
}
 
102
/*-------------------
 
103
       Sizing
 
104
--------------------*/
 
105
/* Mobile Only */
 
106
@media only screen and (max-width: 768px) {
 
107
  /*rtl:ignore*/
 
108
  .ui.modal .content > .left:not(.ui) {
 
109
    display: block;
 
110
    padding: 0em 0em 1em;
 
111
  }
 
112
  /*rtl:ignore*/
 
113
  .ui.modal .content > .right:not(.ui) {
 
114
    display: block;
 
115
    padding: 1em 0em 0em;
 
116
    -webkit-box-shadow: none;
 
117
    box-shadow: none;
 
118
  }
 
119
  .ui.modal .content .image {
 
120
    width: auto !important;
 
121
    max-width: 100%;
 
122
  }
 
123
  .ui.modal .actions {
 
124
    padding-bottom: 0em;
 
125
  }
 
126
  .ui.modal .actions > .buttons,
 
127
  .ui.modal .actions > .button {
 
128
    margin-bottom: 1em;
 
129
  }
 
130
}
 
131
/* Tablet and Mobile */
 
132
@media only screen and (max-width: 998px) {
 
133
  .ui.modal {
 
134
    width: 92%;
 
135
    margin-left: -46%;
 
136
  }
 
137
  .ui.modal > .close {
 
138
    color: rgba(0, 0, 0, 0.8);
 
139
    top: 1.5rem;
 
140
    right: 1rem;
 
141
  }
 
142
}
 
143
/* Computer / Responsive */
 
144
@media only screen and (min-width: 998px) {
 
145
  .ui.modal {
 
146
    width: 74%;
 
147
    margin-left: -37%;
 
148
  }
 
149
}
 
150
@media only screen and (min-width: 1500px) {
 
151
  .ui.modal {
 
152
    width: 56%;
 
153
    margin-left: -28%;
 
154
  }
 
155
}
 
156
@media only screen and (min-width: 1750px) {
 
157
  .ui.modal {
 
158
    width: 42%;
 
159
    margin-left: -21%;
 
160
  }
 
161
}
 
162
@media only screen and (min-width: 2000px) {
 
163
  .ui.modal {
 
164
    width: 36%;
 
165
    margin-left: -18%;
 
166
  }
 
167
}
 
168
/*******************************
 
169
             Types
 
170
*******************************/
 
171
.ui.basic.modal {
 
172
  background-color: transparent;
 
173
  border: none;
 
174
  color: #FFFFFF;
 
175
}
 
176
.ui.basic.modal > .close {
 
177
  top: 1.5rem;
 
178
  right: 1rem;
 
179
}
 
180
.ui.basic.modal .content {
 
181
  background-color: transparent;
 
182
}
 
183
/*******************************
 
184
            Variations
 
185
*******************************/
 
186
/* A modal that cannot fit on the page */
 
187
.ui.modal.scrolling {
 
188
  position: absolute;
 
189
  margin-top: 10px;
 
190
}
 
191
/*******************************
 
192
              States
 
193
*******************************/
 
194
.ui.active.modal {
 
195
  display: block;
 
196
}
 
197
/*--------------
 
198
      Size
 
199
---------------*/
 
200
/* Small */
 
201
.ui.small.modal > .header {
 
202
  font-size: 1.3em;
 
203
}
 
204
@media only screen and (min-width: 998px) {
 
205
  .ui.small.modal {
 
206
    width: 58%;
 
207
    margin-left: -29%;
 
208
  }
 
209
}
 
210
@media only screen and (min-width: 1500px) {
 
211
  .ui.small.modal {
 
212
    width: 40%;
 
213
    margin-left: -20%;
 
214
  }
 
215
}
 
216
@media only screen and (min-width: 1750px) {
 
217
  .ui.small.modal {
 
218
    width: 26%;
 
219
    margin-left: -13%;
 
220
  }
 
221
}
 
222
@media only screen and (min-width: 2000px) {
 
223
  .ui.small.modal {
 
224
    width: 20%;
 
225
    margin-left: -10%;
 
226
  }
 
227
}
 
228
/* Large */
 
229
@media only screen and (min-width: 998px) {
 
230
  .ui.large.modal {
 
231
    width: 74%;
 
232
    margin-left: -37%;
 
233
  }
 
234
}
 
235
@media only screen and (min-width: 1500px) {
 
236
  .ui.large.modal {
 
237
    width: 64%;
 
238
    margin-left: -32%;
 
239
  }
 
240
}
 
241
@media only screen and (min-width: 1750px) {
 
242
  .ui.large.modal {
 
243
    width: 54%;
 
244
    margin-left: -27%;
 
245
  }
 
246
}
 
247
@media only screen and (min-width: 2000px) {
 
248
  .ui.large.modal {
 
249
    width: 44%;
 
250
    margin-left: -22%;
 
251
  }
 
252
}