blob: c33e734bfc0728405eccc6ae7741a5536366956c [file] [log] [blame]
Matteo Scandolo2500e392016-03-25 17:20:27 -07001@import './lib/_variables';
2@import "./bootstrap/_bootstrap";
3@import "lib/header";
4@import "lib/nav";
5@import "lib/footer";
6@import "lib/data_table";
7@import "lib/tabs";
8@import "lib/login";
Matteo Scandolo6942f262016-03-28 11:38:44 -07009@import 'lib/breadcrumb';
Matteo Scandolo56304cf2016-03-24 17:28:33 -070010/************************
11colors:
12 tab - active/focus color
13 background-color: #105E9E !important;
14
15ONLab darker blue select :: background-color: #004775;
16#0170BB
17 left-nav
18 background-color: #448CCA;
19 background-color // normal: #B4CADF
2091BFE4
21
22*************************/
23
24html, body, body.login {
25 height: 100%;
26 min-height: 100%;
27 margin: 0;
28}
29
30body{
31 max-width: 100%;
32 overflow-x: hidden;
33}
34
35#wrap {
Matteo Scandolo02c685a2016-03-28 10:21:48 -070036 height: 100%;
Matteo Scandolo56304cf2016-03-24 17:28:33 -070037 min-height: 100%;
Matteo Scandolo2500e392016-03-25 17:20:27 -070038 padding-bottom: 60px;
Matteo Scandolo56304cf2016-03-24 17:28:33 -070039}
40
Matteo Scandolo56304cf2016-03-24 17:28:33 -070041/* ************************* SIDENAV TOGGLE ************************* */
42
43#wrapper {
44 padding-left: 0;
Matteo Scandolo56304cf2016-03-24 17:28:33 -070045 transition: all 0.5s ease;
Matteo Scandolo02c685a2016-03-28 10:21:48 -070046 min-height: 100%;
47 height: 100%;
Matteo Scandolo56304cf2016-03-24 17:28:33 -070048}
49
50#wrapper.toggled {
51 padding-left: 250px;
52}
53
54#sidebar-wrapper {
Matteo Scandolo39f7a692016-03-28 12:06:16 -070055 z-index: 99;
Matteo Scandolo56304cf2016-03-24 17:28:33 -070056 position: fixed;
57 left: 250px;
58 width: 0;
59 height: 100%;
60 margin-left: -250px;
61 overflow-y: auto;
Matteo Scandolo56304cf2016-03-24 17:28:33 -070062 transition: all 0.5s ease;
63 background: white;
64}
65
66#wrapper.toggled #sidebar-wrapper {
67 width: 250px;
68 padding: 10px;
69}
70
71#page-content-wrapper {
Matteo Scandolo02c685a2016-03-28 10:21:48 -070072 width: 100%;
73 position: absolute;
74 padding: 15px;
75 min-height: 100%;
76 height: 100%;
77 .container-fluid,
78 .content-wrapper,
79 .content-wrapper .col-lg-12,
80 .suit-columns,
81 #content {
82 min-height: 100%;
83 height: 100%;
84 }
Matteo Scandolo6942f262016-03-28 11:38:44 -070085
86 #content {
87 padding-left: ($grid-gutter-width / 2);
88 padding-right: ($grid-gutter-width / 2);
89 }
90
91 #content-main {
92 padding-bottom: 60px;
93 }
Matteo Scandolo56304cf2016-03-24 17:28:33 -070094}
95
Matteo Scandolo56304cf2016-03-24 17:28:33 -070096
97.ui-tabs-panel {
98 min-height: 700px;
99}
100
101#wrapper.toggled #page-content-wrapper {
102 position: absolute;
103 margin-right: -250px;
104}
105
106@media(min-width:768px) {
107 #wrapper {
108 padding-left: 250px;
109 }
110
111 #wrapper.toggled {
112 padding-left: 0;
113 }
114
115 #sidebar-wrapper {
116 width: 250px;
117 padding: 10px;
118 }
119
120 #wrapper.toggled #sidebar-wrapper {
121 width: 0;
122 }
123
124 #page-content-wrapper {
125 padding: 20px;
126 position: relative;
127 }
128
129 #wrapper.toggled #page-content-wrapper {
130 position: relative;
131 margin-right: 0;
132 }
133}
134
135.navbar-toggle{
136 border: 1px solid #08C;
137}
138
139.navbar-toggle .icon-bar{
140 background: #08C;
141}
142/* ************************* END SIDENAV TOGGLE ************************* */
143
Matteo Scandolo56304cf2016-03-24 17:28:33 -0700144/************************* FORM TWEAKS *************************/
Matteo Scandolo2500e392016-03-25 17:20:27 -0700145@media (min-width: $screen-md){
Matteo Scandolo56304cf2016-03-24 17:28:33 -0700146 .form-column.col-lg-4 {
147 width: 66.66666667%;
148 }
149}
150/************************* FORM TWEAKS *************************/
151
152/* CSS for jquery Tabs */
Matteo Scandolo56304cf2016-03-24 17:28:33 -0700153
Matteo Scandolo56304cf2016-03-24 17:28:33 -0700154
155
156.alignCenter {
157 text-align: center !important;
158 align: center !important;
159}
Matteo Scandolo2500e392016-03-25 17:20:27 -0700160
Matteo Scandolo56304cf2016-03-24 17:28:33 -0700161.ui-widget-overlay {
162 background: black !important;
163}
164.ui-corner-all {
165border-bottom-left-radius: 0px !important;
166border-bottom-right-radius: 0px !important;
167}
168
Matteo Scandolo56304cf2016-03-24 17:28:33 -0700169#openCloudTopPage {
170 margin-top: -25px;
171 margin-right: -90;
172 float: right;
173}
174#minDashboard {
175 /*min-width:625px; */
176 display:inline;
177 float: right;
178 border: 2px darkGrey;
179}
Matteo Scandolof0e1c062016-03-25 17:52:42 -0700180
Matteo Scandolo56304cf2016-03-24 17:28:33 -0700181.save-box {
182 background-color: #ffffff;
183 margin: 2px;
184}
185.save-box .btn-info {
186 font-size: 14px;
187 padding: 10px 20px 10px 20px;
188}
Matteo Scandolof0e1c062016-03-25 17:52:42 -0700189
Matteo Scandolo56304cf2016-03-24 17:28:33 -0700190.required:after {
191 color: red !important;
192 font-size: 18px;
193}
194/*.btn-success {color:black}*/
195#suit-center {
196padding: 20px;
197width: 100%;
198/*min-width:650px;*/
199}
200.inner-two-columns .inner-center-column .tab-content {
201overflow-x: auto;
202margin-bottom: 15px;
203/*min-width: auto;*/
204width:100%;
205}
206/*.inner-two-columns .inner-center-column {
207 margin-right: 200px;
208 background-color: rgb(158, 163, 159);
209}*/
210label {
211display: block;
212font-weight: bold;
213margin-bottom: 5px;
214}
215
216/*For changing background color of suit center*/
217#suit-center {
218background-color: #ffffff;
219}
220
Matteo Scandolo56304cf2016-03-24 17:28:33 -0700221/** Leave room for scroll bar now that contents can be appropriately scrolled **/
222.form-horizontal .inline-group .add-row {
223 margin: -1px -1px 15px 0px;
224}
225
226/** Setting overflow and 1kpx to deal with inlines/forms overlapping on
227 browser resizes **/
228#content-main {
229 overflow-x:auto;
230 /*min-width: 1000px;*/
231}
232
233.tab-content tab-content-main {
234 overflow-x: auto !important;
235}
236
237#wrap{
238background:none;
239}
240
241.noclearfix {
242 display:block; clear:left; width:0px; height:0px;
243}
244
245body{
246background-color:#ffffff;
247}
248
249.suit-column{
250background-color:#ffffff;
251}
Matteo Scandolo56304cf2016-03-24 17:28:33 -0700252
253
Matteo Scandolo56304cf2016-03-24 17:28:33 -0700254
255.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
256 /*background-color: #448CCA;*/
257 background-color: #105E9E;
258 color: #FFF;
259 border: none;
260}
261
262/*Added by Beena for adding the three components in dashboard*/
263.breadcrumb{
264 display:inline-block;
265 background-color: #fff;
266
267}
268
269.nodetextbox{
270 /*background-color: #ededed;*/
271 line-height: 25px;
272 width: 150px;
273 text-align: center;
274 font-weight: bold;
275 margin-left:0px;
276 display:inline-block;
277 border:none;
278 font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
279 font-size: 8px;
280}
281
282.nodelabel{
283width: 20px;
284display: inline-block;
285border-radius: 0px;
286border:1px solid #000;
287/*line-height: 23px;*/
288text-align: center;
289font-weight: normal;
290}
291
292#user-tools {
293 font-weight: bold;
294}
295.header-content .header-column {
296 display: none;
297}
298.header .input-icon {
299 background-image: url("Search.png");
300 background-repeat: no-repeat;
301background-position:left center;
302opacity:1;
303 background-size: 100%;
304 vertical-align:middle;
305 margin-right: -30px;
306 /*margin-top: 5px;*/
307 position: relative;
308 height: 22px;
309 width: 22px;
310}
311
312.header .icon-search {
313 /*background-image: url("search.png") !important;
314 background-repeat: no-repeat !important;
315 background-size: 120% auto !important;
316 background-position: 0;*/
317}
318
319#dashboardHPC {
320 padding-bottom: 10px;
321}
322.summary-attr {
323 padding-right: 20px;
324}
325.summary-attr-util {
326 padding-right: 20px;
327 color: green;
328}
329.SiteDetail {
330color: darkBlue;
331 font-size: 1.5em;
332}
333#addInstances {
334 color: green;
335text-decoration: underline;
336 padding-right: 20px;
337}
338#remInstances {
339 color: red;
340 text-decoration: underline;
341}
342#map-us {
343 padding-top: 10px;
344 width: 700px;
345 height: 400px;
346}
347
348.minidashbutton {
349 -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
350 -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
351 box-shadow:inset 0px 1px 0px 0px #ffffff;
352 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
353 background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
354 background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
355 background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
356 background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
357 background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
358 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
359 background-color:#ffffff;
360 -moz-border-radius:6px;
361 -webkit-border-radius:6px;
362 border-radius:6px;
363 border:1px solid #dcdcdc;
364 display:inline-block;
365 cursor:pointer;
366 color:#666666;
367 font-family:arial;
368 font-size:15px;
369 font-weight:bold;
370 padding:6px 24px;
371 text-decoration:none;
372 text-shadow:0px 1px 0px #ffffff;
373}
374.minidashbutton:hover {
375 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f6f6f6), color-stop(1, #ffffff));
376 background:-moz-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
377 background:-webkit-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
378 background:-o-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
379 background:-ms-linear-gradient(top, #f6f6f6 5%, #ffffff 100%);
380 background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
381 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#ffffff',GradientType=0);
382 background-color:#f6f6f6;
383}
384
385.newMiniDashboard {
386 border: 1px solid green;
387 width: auto;
388}
389
390.endDashPair {
391 clear: left;
392}
393.miniDashPair {
394 float: left;
395 width: auto;
396 margin-left: 20px;
397}
398
399.miniDashPair label {
400 text-align: center;
401}
402/* Charts CSS */
403p.numeral
404{
405 font-size:32pt;
406 color:#ffffff;
407 opacity: 0.7;
408 font-family:Helvetica Neue;
409 font-weight:100;
410 text-align:center;
411 line-height:75%;
412}
413
414.helper-text
415{
416 border: 1px solid #fff;
417 padding: 7px;
418 border-radius: 18px;
419 font-size:13pt;
420 color:#ffffff;
421 opacity: 0.7;
422 font-family:Helvetica Neue;
423 font-weight:200;
424 text-align:center;
425 line-height:100%;
426}
427p.osobject
428{
429 font-size:12pt;
430 color:#ffffff;
431 opacity: 0.7;
432 font-family:Helvetica Neue;
433 font-weight:200;
434 text-align:center;
435 line-height:100%;
436}
437
438p.heading
439{
440 font-size:20px;
441 letter-spacing: 1px;
442 color: black;
443 font-family:Arial;
444 font-weight:bold;
445 text-align:center;
446}
447
448/*p.heading
449{
450 font-size:32pt;
451 color:#ffffff;
452 opacity: 0.7;
453 font-family:Helvetica Neue;
454 font-weight:200;
455 text-align:center;
456}*/
457
458div.graph
459{
460 height:340px;
461}
462
463div.numeral
464{
465 height:120px;
466}
467
468div.heading
469{
470 height:10px;
471}
472
473div.padding
474{
475 height:20px;
476}
477
478div.chartContainer
479{
480 /*background-image:url('chartsBg.jpg');*/
481 width:527px;
482 height:400px;
483 border:1px;
484}
485
486/* D3 */
487
488.axis path,
489.axis line {
490 fill: none;
491 stroke: #ffffff;
492 opacity: 0.7;
493 shape-rendering: crispEdges;
494}
495
496
497.x.axis path {
498 display: none;
499}
500
501.x.axis text {
502 fill: white;
503 opacity: 0.5;
504}
505
506.y.axis text {
507 opacity: 0.5;
508 fill: white;
509}
510
511.y.axis text.legend {
512 opacity: 1.0;
513 fill: white;
514 font-size:8pt;
515}
516
517.line {
518 fill: none;
519 stroke: white;
520 stroke-width: 3px;
521 opacity: 0.6;
522}
523
524
525/****** Added in so that we can have a loader show as charts get ready to render ***/
526.loading {
527 //background-color: orange;
528 background-image: url(spinner.gif) no-repeat center middle;
529 text-align: center;
530 font-size: 20px;
531 height: 100%;
532/* width: auto;*/
533 float: left;
534 padding: 10px;
535}
536/* Charts CSS */
537
538#tabs-4 {
539 margin: 40px;
540 font-size: 24px;
541 font-weight: bold;
542}
543
544.tenant-row{
545 padding-bottom: 0.7%;
546}
547
548/***********TENANT VIEW*************/
549
550#image-dropdown,#slice-image-value,#adv-slice-image-value{
551 margin-left: 5%;
552}
553
554
555#adv-slice-image-value{
556margin-right: 0.5%;
557}
558
559#adv-network-value {
560margin-right: 0.3%;
561}
562
563#network-dropdown,#adv-network-dropdown,#adv-network-value{
564 margin-left: 3.7%;
565}
566
567#service-level-dropdown,#service-level-value,#adv-service-level-dropdown,#adv-service-level-value{
568 margin-left: 0.2% !important;
569}
570
571#slice-name-value,#adv-slice-name-value{
572 margin-left: 2%;
573}
574#adv-dataset-dropdown{
575margin-left: 3.7%;
576}
577#advanced-tenant,#basic-tenant,#instance-btn,#save-btn{
578 float:right;
579}
580 #delete-slice-btn,#download-details,#add-user-btn{
581 margin-left:1%;
582}
583
584#instance-btn,#save-btn,#create-slice-btn,#delete-slice-btn,#add-user-btn,#download-details{
585 margin-top:1%;
586}
587
588.tenantDialog.ui-widget input{
589 border-radius: 0px !important;
590 height: 12px !important;
591 width: 180px !important;
592 margin-right: 10% !important;
593 float: right;
594}
595
596.tenantDialog .ui-dialog-buttonset .ui-button{
597border-radius: 0 !important;
598background-color: grey !important;
599font-weight: bold !important;
600font-size: 0.9em !important;
601}
602
603.tenantDialog .ui-dialog-titlebar{
604border-radius: 0 !important;
605background-color: grey !important;
606}
607
608.create-slice-row{
609 margin-bottom: 4%;
610 clear: both;
611 height: 25px;
612}
613
614.create-slice-row label, .tenantDialog label{
615 margin-right:1%;
616 float:left;
617}
618
619.create-slice-row select{
620 height:24px;
621 width: 196px;
622 font-size: 0.9em !important;
623}
624
625.tenant-create-slice{
626 float:right;
627 margin-right: 10% !important;
628}
629
630#delete-slice{
631float: right;
632}
633
634#tooltip,#adv-tooltip,#basic-tooltip{
635font-size:0.7em;
636color:red;
637display:none;
638}
639
640#tenantSliceDataWrapper {
641 padding: 1% 0;
642}
643
644#advancedTenantSliceDataWrapper .help-inline{
645 font-size: 11px;
646 color: #999;
647 padding-bottom: 1%;
648}
649
650.create-slice-row label{
651 clear:both;
652 margin-right: 1%;
653}
654
655#advNumOfInstances{
656 margin-right: 1% !important;
657}
658
659#private-vol-checkbox{
660margin: 0 0 1% 1%;
661}
662
663.public-key-warning{
664text-align: center;
665display:none;
666}
667
668#private-vol{
669margin-right: 15% !important;
670}
671.customize_row {
672 display: table;
673}
674.customize_column {
675 display: table-cell;
676 padding: 10px;
677}
678
679.request-form-row{
680padding:1% 8%;
681}
682
683.requestDialog{
684background-color: white;
685border-radius: 8px;
686width: 30% !important;
687height: 40% !important;
688margin-top: -16%;
689top: -103.703125px !important;
690}
691
692.request-form-row label{
693 float: left;
694}
695
696
697.requestDialog .ui-dialog-buttonset .ui-button{
698border-radius: 0 !important;
699background-color: grey !important;
700font-weight: bold !important;
701font-size: 0.9em !important;
702}
703
704.requestDialog .ui-dialog-titlebar-close{
705float:right;
706}
707
708#request-signup{
709height: 40px !important;
710margin: 0 14%;
711float: left;
712background-color: #448CCA;
713background-image: none;
714width: 70% !important;
715}
716
717.requestDialog .ui-dialog-titlebar{
718border-radius: 0 !important;
719height: 25px;
720padding-top: 2%;
721}
722
723.requestDialog #ui-id-1{
724padding-left: 28%;
725font-size: medium;
726}
727
728#request-site-name{
729 width: 98%;
730}
731
732/* SUIT CHANGES */
733
734.form-buttons {
735 margin-top: 20px;
736 padding: 10px;
737 border-top: 1px solid #cccccc;
738}
739
Matteo Scandolof0e1c062016-03-25 17:52:42 -0700740.form-horizontal .selector .selector-chooser li .selector-remove,
741.form-horizontal .selector .selector-chooser li .selector-remove:hover{
742 @include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $btn-border-radius-base);
743 @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
744}
Matteo Scandolo56304cf2016-03-24 17:28:33 -0700745
Matteo Scandolof0e1c062016-03-25 17:52:42 -0700746.form-horizontal .selector .selector-chooser li .selector-add,
747.form-horizontal .selector .selector-chooser li .selector-add:hover{
748 margin-bottom: $form-group-margin-bottom;
749 @include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $btn-border-radius-base);
750 @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
Matteo Scandolo56304cf2016-03-24 17:28:33 -0700751}
752
753/* MODAL */
754.ui-dialog{
755 z-index: 4000 !important;
756}
757
758button.ui-dialog-titlebar-close{
759 font-family: 'Glyphicons Halflings' !important;
760 display: inline-block;
761}
762
763button.ui-dialog-titlebar-close:after {
764 content: "\e014";
765}
766/* VCPe ADMIN FIX
767form#vcpeservice_form ul li {
768 display: inline-block;
769 background: red;
770 margin-top: 10px;
771 width: auto;
772 padding: 10px;
773 border-radius: 5px;
774}
775*/