_details.scss 5.08 KB
Newer Older
olga's avatar
olga committed
1
@import "icon-fonts";
2
@import "bootstrap/mixins";
3
.main {
olga's avatar
olga committed
4
    margin:2em 0 5em;
5
	h4 .title{
olga's avatar
olga committed
6
		font-size: 24px;
7
	}
8 9 10 11 12 13 14 15
    span[class^="snf-details"] {
        float: left;
        margin-right: 8px;
        font-size: $details-title-height;
    }
    .lt{
        line-height: $details-title-height;
    }
olga's avatar
olga committed
16 17 18
    .rt {
        padding-top:5px;
    }
olga's avatar
olga committed
19 20 21
    .actions-per-item {
        padding: 0;
    }
22 23
}

Olga Brani's avatar
Olga Brani committed
24 25
.object-anchor {height:2px; }

olga's avatar
olga committed
26
.object-details {
Athina Bekakou's avatar
Athina Bekakou committed
27
	h4 {
olga's avatar
olga committed
28 29 30
        font-size: 14px;
        letter-spacing: 1px;
 	    .lt{
31
            display: block;
olga's avatar
olga committed
32
            float: left;
olga's avatar
olga committed
33 34
            max-width: 60%;
            word-wrap: break-word;
olga's avatar
olga committed
35 36
        }
        .rt {
Olga Brani's avatar
Olga Brani committed
37
            padding-top: 5px;
38
            display: block;
olga's avatar
olga committed
39 40 41 42 43
            overflow: hidden;
        }
        .arrow {
		    position: relative;
            padding: 0 8px;
44 45
		    &:hover,
            &:focus{
olga's avatar
olga committed
46 47
			    top: 2px;
			    cursor: pointer;
48
                outline: 0 none;
olga's avatar
olga committed
49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
		    }
	    }
       .label{
            float: right;
            margin-left: 15px;
            margin-bottom: 10px;
            &.important {
                font-weight: bold;
            }
        }
        em {
            float: none;
            &.os-info {
                float: right;
                position: relative;
                bottom: 3px;
                img {
                    height: 26px; // *** i think that is the size of all images temp use for preview
67
                    margin-right: 5px;
olga's avatar
olga committed
68 69 70
                }
            }
	    }
Athina Bekakou's avatar
Athina Bekakou committed
71 72
	}
	h3 {
olga's avatar
olga committed
73
        font-size: 18px;
olga's avatar
olga committed
74
		margin: 0 0 1em;
olga's avatar
olga committed
75 76 77 78 79
        font-weight: 400;
        line-height: $details-title-height;
        em {
            margin-left: 10px;
            font-size: 14px;
80 81 82 83
            display: inline-block;
            @include text-overflow();
            max-width: 50%;
            vertical-align: top;
olga's avatar
olga committed
84 85 86 87
        }
        span[class^="snf-details"] {
            float: left;
            margin-right: 8px;
88 89 90
            font-size: $details-title-height - 10px;
            height: $details-title-height;
            line-height: $details-title-height;
olga's avatar
olga committed
91
        }
92 93
        .popover-dismiss {
            display: inline-block;
94
            @include circle(18px,$snf_gray-light);
95 96 97
            text-align: center;
            font-weight: bold;
            vertical-align: middle;
98 99 100
            line-height: 18px;
            font-size: 16px;
            vertical-align: super;
101 102
            cursor: pointer;
            margin-left:10px;
103
            color: lighten($snf_gray-light, 20%);
104 105
            &:hover,
            &:focus{
106
                background: lighten($snf_gray-light, 10%);
107
                color: $almost-white;
108 109 110 111 112
            }
        }
        .popover {
            .popover-content {
                font-size: 12px;
Olga Brani's avatar
Olga Brani committed
113
                color: $reverse-text-color;
114 115 116
                line-height: 130%;
            }
        }
Athina Bekakou's avatar
Athina Bekakou committed
117
	}
olga's avatar
olga committed
118 119 120
    .icon-link {
        margin-right: 10px;
    }
Athina Bekakou's avatar
Athina Bekakou committed
121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139
	p {
		margin: 10px 20px;
		font-style: italic;
	}

	.length {
		margin-left: 6px;
		border: 0 none;
		font-style: italic;
		&::before {
		    content: '( ';
		}
		&::after {
		    content: ' )';
		}
	}
	&>.object-details {
		margin-left: -20px;
		margin-right: -20px;
olga's avatar
olga committed
140
		padding:12px 20px;
Athina Bekakou's avatar
Athina Bekakou committed
141 142 143 144 145 146 147 148 149 150 151 152 153 154 155
	}
}

.object-details-content .nav-tabs>li {
	a {
		opacity: 0.7;
		color: white;
	}
	&.active>a {
		opacity: 1;
		border-color: transparent;
		background: $gray-light;
		color: white;
		border-radius: 0;
	}
156 157 158
	
    &:not(.active)>a:hover,
    &:not(.active)>a:focus{
Athina Bekakou's avatar
Athina Bekakou committed
159 160 161 162 163 164 165 166 167 168 169
		opacity: 1;
		color: white;
		border-color: transparent;
		background: transparent;
	}
}

.tab-pane {
	overflow: auto;
}

170 171 172 173
.parts-separator {
    border-top: 2px solid $gray-light-extra;
    padding-top: 1em;
    h2 {
174 175 176
        font-size: 24px;
        margin-bottom: 2em;
        padding-top: 1em;
177 178 179 180 181 182 183
        em {
            max-width: 50%;
            display: inline-block;
            @include text-overflow();
            vertical-align: top;

        }
184
    }
185 186 187
}

.part-two {
188 189
	&>.object-details {
        border-bottom: 2px solid $gray-light-extra;		
olga's avatar
olga committed
190
        background: lighten($body-bg, 3%);
olga's avatar
olga committed
191
		padding:14px 20px;
192
		.object-details {
olga's avatar
olga committed
193
			padding: 5px 20px;
194 195
            &:hover,
            &:focus{
olga's avatar
olga committed
196 197
                background: lighten($body-bg, 5%);
            }
198
		}
199 200 201 202 203
        .custom-btn {
            span {
                padding: 5px;
            }
        }
olga's avatar
olga committed
204 205
    }
    .object-details-content {
Olga Brani's avatar
Olga Brani committed
206
        display: none;
olga's avatar
olga committed
207 208
        padding: 0 $details-title-height;
    }
209
    
210 211 212
}


olga's avatar
olga committed
213 214
.snf-details-volume {
    @extend .snf-volume-full;
215 216
}

olga's avatar
olga committed
217 218
.snf-details-vm {
    @extend .snf-pc-full;
219
}
olga's avatar
olga committed
220 221
.snf-details-project {
    @extend .snf-clipboard-h;
222
}
olga's avatar
olga committed
223 224
.snf-details-network {
    @extend .snf-network-full;
225
}
olga's avatar
olga committed
226 227
.snf-details-quota {
    @extend .snf-wallet-full;
228 229
}

olga's avatar
olga committed
230 231
.snf-details-nic {
    @extend .snf-nic-full;
olga's avatar
olga committed
232
}
olga's avatar
olga committed
233 234
.snf-details-user {
    @extend .snf-user-full;
olga's avatar
olga committed
235
}
olga's avatar
olga committed
236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256

.show-hide-all {
    span.snf-font-arrow-up {
        @extend .snf-arrow-up;
        display: none;
        padding: 0;
    }
    span.snf-font-arrow-down {
        @extend .snf-arrow-down;
        display: inline;
        padding: 0;
    }
    &.open {
        .snf-font-arrow-up {
            display: inline;
        } 
        .snf-font-arrow-down {
            display: none;
        }
    }
}