← Back to branch summary

~johnsca/charms/trusty/cloudfoundry/reconciler-ui

« back to all changes in this revision

Viewing changes to reconciler/ui/static/semantic/uncompressed/elements/loader.css

  • Committer: Whit Morriss
  • Date: 2014-10-13 06:50:17 UTC
  • 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/elements/loader.css
 
1
/*
 
2
 * # Semantic - Loader
 
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
            Loader
 
13
*******************************/
 
14
/* Standard Size */
 
15
.ui.loader {
 
16
  display: none;
 
17
  position: absolute;
 
18
  top: 50%;
 
19
  left: 50%;
 
20
  margin: 0px;
 
21
  z-index: 1000;
 
22
  -webkit-transform: translateX(-50%) translateY(-50%);
 
23
  -moz-transform: translateX(-50%) translateY(-50%);
 
24
  -ms-transform: translateX(-50%) translateY(-50%);
 
25
  transform: translateX(-50%) translateY(-50%);
 
26
}
 
27
.ui.dimmer .loader {
 
28
  display: block;
 
29
}
 
30
/*******************************
 
31
             Types
 
32
*******************************/
 
33
/*-------------------
 
34
        Text
 
35
--------------------*/
 
36
.ui.text.loader {
 
37
  width: auto !important;
 
38
  height: auto !important;
 
39
  text-align: center;
 
40
  font-style: normal;
 
41
}
 
42
.ui.mini.text.loader {
 
43
  min-width: 16px;
 
44
  padding-top: 2em;
 
45
  font-size: 0.875em;
 
46
}
 
47
.ui.small.text.loader {
 
48
  min-width: 24px;
 
49
  padding-top: 2.5em;
 
50
  font-size: 0.875em;
 
51
}
 
52
.ui.text.loader {
 
53
  min-width: 32px;
 
54
  font-size: 1em;
 
55
  padding-top: 3em;
 
56
}
 
57
.ui.large.text.loader {
 
58
  min-width: 64px;
 
59
  padding-top: 5em;
 
60
  font-size: 1.2em;
 
61
}
 
62
/*******************************
 
63
            States
 
64
*******************************/
 
65
.ui.loader.active,
 
66
.ui.loader.visible {
 
67
  display: block;
 
68
}
 
69
.ui.loader.disabled,
 
70
.ui.loader.hidden {
 
71
  display: none;
 
72
}
 
73
/*******************************
 
74
            Variations
 
75
*******************************/
 
76
/*-------------------
 
77
       Inverted
 
78
--------------------*/
 
79
.ui.dimmer .ui.text.loader,
 
80
.ui.inverted.text.loader {
 
81
  color: rgba(255, 255, 255, 0.8);
 
82
}
 
83
.ui.inverted.dimmer .ui.text.loader {
 
84
  color: rgba(0, 0, 0, 0.8);
 
85
}
 
86
/* Tiny Size */
 
87
.ui.dimmer .mini.ui.loader,
 
88
.ui.inverted .mini.ui.loader {
 
89
  background-image: url(../images/loader-mini-inverted.gif);
 
90
}
 
91
/* Small Size */
 
92
.ui.dimmer .small.ui.loader,
 
93
.ui.inverted .small.ui.loader {
 
94
  background-image: url(../images/loader-small-inverted.gif);
 
95
}
 
96
/* Standard Size */
 
97
.ui.dimmer .ui.loader,
 
98
.ui.inverted.loader {
 
99
  background-image: url(../images/loader-medium-inverted.gif);
 
100
}
 
101
/* Large Size */
 
102
.ui.dimmer .large.ui.loader,
 
103
.ui.inverted .large.ui.loader {
 
104
  background-image: url(../images/loader-large-inverted.gif);
 
105
}
 
106
/*-------------------
 
107
        Sizes
 
108
--------------------*/
 
109
/* Tiny Size */
 
110
.ui.inverted.dimmer .ui.mini.loader,
 
111
.ui.mini.loader {
 
112
  width: 16px;
 
113
  height: 16px;
 
114
  background-image: url(../images/loader-mini.gif);
 
115
}
 
116
/* Small Size */
 
117
.ui.inverted.dimmer .ui.small.loader,
 
118
.ui.small.loader {
 
119
  width: 24px;
 
120
  height: 24px;
 
121
  background-image: url(../images/loader-small.gif);
 
122
}
 
123
.ui.inverted.dimmer .ui.loader,
 
124
.ui.loader {
 
125
  width: 32px;
 
126
  height: 32px;
 
127
  background: url(../images/loader-medium.gif) no-repeat;
 
128
  background-position: 48% 0px;
 
129
}
 
130
/* Large Size */
 
131
.ui.inverted.dimmer .ui.loader.large,
 
132
.ui.loader.large {
 
133
  width: 64px;
 
134
  height: 64px;
 
135
  background-image: url(../images/loader-large.gif);
 
136
}
 
137
/*-------------------
 
138
       Inline
 
139
--------------------*/
 
140
.ui.inline.loader {
 
141
  position: static;
 
142
  vertical-align: middle;
 
143
  margin: 0em;
 
144
  -webkit-transform: none;
 
145
  -moz-transform: none;
 
146
  -ms-transform: none;
 
147
  transform: none;
 
148
}
 
149
.ui.inline.loader.active,
 
150
.ui.inline.loader.visible {
 
151
  display: inline-block;
 
152
}