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