Revision bfdaac22 snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_storage.scss
b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_storage.scss | ||
---|---|---|
1 | 1 |
/* Storage (pithos) related styles */ |
2 | 2 |
|
3 | 3 |
.storage { |
4 |
$storage-h4-w: 25%; |
|
5 | 4 |
height: 100%; |
6 | 5 |
.rect-plus { |
7 | 6 |
display: inline-block; |
... | ... | |
68 | 67 |
background-color: $light-bg; |
69 | 68 |
} |
70 | 69 |
} |
71 |
&.containers {
|
|
72 |
.items-list {
|
|
73 |
overflow: visible;
|
|
74 |
&>li {
|
|
75 |
text-align: left;
|
|
76 |
padding-right: 0;
|
|
77 |
padding-left: 0;
|
|
78 |
.col {
|
|
79 |
float: left;
|
|
80 |
}
|
|
81 |
h4 {
|
|
82 |
font-size: emCalc(14px);
|
|
83 |
width: auto;
|
|
84 |
}
|
|
85 |
.basic-data {
|
|
86 |
width: 20%;
|
|
87 |
}
|
|
88 |
.size-data{
|
|
89 |
width: 40%;
|
|
90 |
.progress-col {
|
|
91 |
padding-top: 7px;
|
|
92 |
.progress {
|
|
93 |
border-color: $gray-2;
|
|
94 |
height: 20px;
|
|
95 |
.meter {
|
|
96 |
text-align: right;
|
|
97 |
font-size: 10px;
|
|
98 |
padding: 2px;
|
|
99 |
background-color: $gray-2;
|
|
100 |
color: white;
|
|
101 |
font-size: emCalc(14px);
|
|
102 |
line-height: 100%;
|
|
103 |
}
|
|
70 |
}
|
|
71 |
.containers {
|
|
72 |
.items-list {
|
|
73 |
overflow: visible;
|
|
74 |
&>li {
|
|
75 |
text-align: left;
|
|
76 |
padding-right: 0;
|
|
77 |
padding-left: 0;
|
|
78 |
.col {
|
|
79 |
float: left;
|
|
80 |
}
|
|
81 |
h4 {
|
|
82 |
font-size: emCalc(14px);
|
|
83 |
width: auto;
|
|
84 |
}
|
|
85 |
.basic-data {
|
|
86 |
width: 20%;
|
|
87 |
}
|
|
88 |
.size-data{
|
|
89 |
width: 40%;
|
|
90 |
.progress-col {
|
|
91 |
padding-top: 7px;
|
|
92 |
.progress {
|
|
93 |
border-color: $gray-2;
|
|
94 |
height: 20px;
|
|
95 |
.meter {
|
|
96 |
text-align: right;
|
|
97 |
font-size: 10px;
|
|
98 |
padding: 2px;
|
|
99 |
background-color: $gray-2;
|
|
100 |
color: white;
|
|
101 |
font-size: emCalc(14px);
|
|
102 |
line-height: 100%;
|
|
104 | 103 |
} |
105 | 104 |
} |
106 |
.size { |
|
107 |
width: auto; |
|
108 |
padding-left: 20px; |
|
109 |
font-size: emCalc(14px); |
|
110 |
} |
|
111 | 105 |
} |
112 |
h5 {
|
|
113 |
float: left;
|
|
114 |
width: 20%;
|
|
106 |
.size {
|
|
107 |
width: auto;
|
|
108 |
padding-left: 20px;
|
|
115 | 109 |
font-size: emCalc(14px); |
116 |
font-weight: normal; |
|
117 |
line-height: $list-icon-height; |
|
118 |
height: $list-icon-height; |
|
119 |
margin: 0; |
|
120 | 110 |
} |
121 |
.project { |
|
122 |
line-height: $list-icon-height; |
|
123 |
height: $list-icon-height; |
|
124 |
width: 18%; |
|
125 |
font-size: emCalc(14px); |
|
126 |
position: relative; |
|
111 |
} |
|
112 |
h5 { |
|
113 |
float: left; |
|
114 |
width: 20%; |
|
115 |
font-size: emCalc(14px); |
|
116 |
font-weight: normal; |
|
117 |
line-height: $list-icon-height; |
|
118 |
height: $list-icon-height; |
|
119 |
margin: 0; |
|
120 |
} |
|
121 |
.project { |
|
122 |
line-height: $list-icon-height; |
|
123 |
height: $list-icon-height; |
|
124 |
width: 18%; |
|
125 |
font-size: emCalc(14px); |
|
126 |
position: relative; |
|
127 |
right: 0; |
|
128 |
ul { |
|
129 |
position: absolute; |
|
127 | 130 |
right: 0; |
128 |
ul { |
|
129 |
position: absolute; |
|
130 |
right: 0; |
|
131 |
top: $list-icon-height + 2px; |
|
132 |
list-style: none outside none; |
|
133 |
border: 1px solid $gray-2; |
|
134 |
padding: 5px 15px; |
|
131 |
top: $list-icon-height + 2px; |
|
132 |
list-style: none outside none; |
|
133 |
border: 1px solid $gray-2; |
|
134 |
padding: 5px 15px; |
|
135 |
display: none; |
|
136 |
z-index: 1; |
|
137 |
background: #fff; |
|
138 |
li { |
|
139 |
padding: 4px 0; |
|
140 |
} |
|
141 |
} |
|
142 |
.btn-more { |
|
143 |
border: 1px solid $gray-2; |
|
144 |
padding: 0 10px; |
|
145 |
float: right; |
|
146 |
em { |
|
135 | 147 |
display: none; |
136 |
z-index: 1; |
|
137 |
background: #fff; |
|
138 |
li { |
|
139 |
padding: 4px 0; |
|
148 |
opacity: 0; |
|
149 |
font-style: normal; |
|
150 |
color: $body-font-color; |
|
151 |
@include transition(opacity, 300ms, linear); |
|
152 |
} |
|
153 |
&:hover { |
|
154 |
color: $link-color; |
|
155 |
em { |
|
156 |
display: inline-block; |
|
157 |
opacity: 1; |
|
140 | 158 |
} |
141 | 159 |
} |
142 |
.btn-more { |
|
143 |
border: 1px solid $gray-2; |
|
144 |
padding: 0 10px; |
|
145 |
float: right; |
|
160 |
&.clicked { |
|
161 |
background-color: $link-color; |
|
162 |
color: #fff; |
|
146 | 163 |
em { |
147 |
display: none; |
|
148 |
opacity: 0; |
|
149 |
font-style: normal; |
|
150 |
color: $body-font-color; |
|
151 | 164 |
@include transition(opacity, 300ms, linear); |
152 |
} |
|
153 |
&:hover { |
|
154 |
em { |
|
155 |
display: inline-block; |
|
156 |
opacity: 1; |
|
157 |
} |
|
158 |
} |
|
159 |
&.clicked { |
|
160 |
background-color: $link-color; |
|
165 |
display: inline-block; |
|
166 |
opacity: 1; |
|
161 | 167 |
color: #fff; |
162 |
em { |
|
163 |
display: inline-block; |
|
164 |
opacity: 1; |
|
165 |
color: #fff; |
|
166 |
} |
|
167 | 168 |
} |
168 | 169 |
} |
170 |
} |
|
169 | 171 |
|
172 |
} |
|
173 |
.img-wrap { |
|
174 |
.snf-folder-full { |
|
175 |
font-size: emCalc(34px); |
|
176 |
color: $secondary-color; |
|
170 | 177 |
} |
171 |
.img-wrap { |
|
172 |
.snf-folder-full { |
|
173 |
font-size: emCalc(34px); |
|
174 |
color: $secondary-color; |
|
175 |
} |
|
176 |
span:not(.snf-folder-full) { |
|
177 |
color: $gray-2; |
|
178 |
font-size: emCalc(16px); |
|
179 |
position: relative; |
|
180 |
bottom: 5px; |
|
181 |
left: -28px; |
|
182 |
} |
|
178 |
span:not(.snf-folder-full) { |
|
179 |
color: $gray-2; |
|
180 |
font-size: emCalc(16px); |
|
181 |
position: relative; |
|
182 |
bottom: 5px; |
|
183 |
left: -28px; |
|
183 | 184 |
} |
184 |
|
|
185 | 185 |
} |
186 |
|
|
186 | 187 |
} |
187 | 188 |
} |
188 | 189 |
} |
Also available in: Unified diff