Signed-off-by: Laurence Maultsby <laurence.maultsby@riftio.com>
* Copyright 2016 RIFT.IO Inc
*
* Licensed under the Apache License, Version 2.0 (the "License");
* Copyright 2016 RIFT.IO Inc
*
* Licensed under the Apache License, Version 2.0 (the "License");
@import '../node_modules/open-iconic/font/css/open-iconic.css';
.app-body {
@import '../node_modules/open-iconic/font/css/open-iconic.css';
.app-body {
+ -ms-flex-direction:column;
+ flex-direction:column;
display: flex;
flex-direction: column;
display: flex;
flex-direction: column;
+ -ms-flex-align: stretch;
+ align-items: stretch;
color: $gray-darkest;
}
.lpReactDashboard {
color: $gray-darkest;
}
.lpReactDashboard {
display:flex;
height:100%;
.app-body {
> header {
display:flex;
height:100%;
.app-body {
> header {
- flex: 0 1 auto;
- flex-shrink: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+ -ms-flex-negative: 0;
+ flex-shrink: 0;
display: flex;
}
.app-body.create-fleet {
display: flex;
}
.app-body.create-fleet {
+ -ms-flex-align: center;
+ align-items: center;
+ display: -ms-flexbox;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
min-height: 30px;
overflow: hidden;
padding-left: 2px;
min-height: 30px;
overflow: hidden;
padding-left: 2px;
- flex: 1;
- flex-direction: row;
+ -ms-flex: 1;
+ flex: 1;
+ -ms-flex-direction: row;
+ flex-direction: row;
height: 100%;
/* Network service list styles */
.leftMinimizedNsListPanel {
height: 100%;
/* Network service list styles */
.leftMinimizedNsListPanel {
+ -ms-flex: 1 100%;
+ flex: 1 100%;
height: auto;
max-width: 30px;
min-width: 30px;
height: auto;
max-width: 30px;
min-width: 30px;
background-color: white;
display:block;
h3 {
background-color: white;
display:block;
h3 {
- // vertical | horizontal
- // top | horizonal | bottom
- // top right bottom left
+ /* vertical | horizontal*/
+ /* top | horizonal | bottom*/
+ /* top right bottom left*/
padding: 1.5rem 0;
color: white;
padding: 1.5rem 0;
color: white;
+ -ms-flex: 0 1;
+ flex: 0 1;
- max-width: 500px;
- min-width: 500px;
+ width: auto;
+ /* max-width: 500px;*/
+ /* min-width: 500px;*/
header {
background-color: white;
header {
background-color: white;
+ -ms-flex-flow: col wrap;
+ flex-flow: col wrap;
top:1.5rem;
right:0.5rem;
cursor:pointer;
top:1.5rem;
right:0.5rem;
cursor:pointer;
display:flex;
&:before {
}
display:flex;
&:before {
}
.nsListPanelToolbar {
background-color: $gray;
.nsListPanelToolbar {
background-color: $gray;
- flex: 0 0 auto;
- flex-direction: row;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ -ms-flex-direction: row;
+ flex-direction: row;
padding-left: 1rem;
.button {
cursor: pointer;
padding-left: 1rem;
.button {
cursor: pointer;
margin: 4px;
margin: 0.5rem;
img {
margin: 4px;
margin: 0.5rem;
img {
- flex: 1;
- flex-direction: column;
+ -ms-flex: 1;
+ flex: 1;
+ -ms-flex-direction: column;
+ flex-direction: column;
overflow: auto;
padding-left: 0;
padding-right: 0;
&-body {
overflow: auto;
padding-left: 0;
padding-right: 0;
&-body {
+ overflow-y: auto;
+ overflow-x: hidden;
+ -ms-flex-direction: row;
+ flex-direction: row;
}
.cellValue {
overflow: hidden;
}
.cellValue {
overflow: hidden;
background-color: $gray;
border-top: 1px solid $gray-lightest;
border-bottom: 1px solid $gray-lightest;
background-color: $gray;
border-top: 1px solid $gray-lightest;
border-bottom: 1px solid $gray-lightest;
- flex: 0 0 auto;
- flex-direction: row;
+ -ms-flex: 0 0 auto;
+ flex: 0 0 auto;
+ -ms-flex-direction: row;
+ flex-direction: row;
}
.nsListItemField {
@extend .baseGridCell;
}
.nsListItemField {
@extend .baseGridCell;
.actionButton {
cursor: pointer;
.actionButton {
cursor: pointer;
- // margin-top is a hack to fix the top of the glyph from
- // being chopped off
+ /* margin-top is a hack to fix the top of the glyph from*/
+ /* being chopped off*/
/* Network service detail card styles */
.nsCardPanel {
/* Network service detail card styles */
.nsCardPanel {
- //border: 1px solid black;
+ /*border: 1px solid black;*/
+ display: -ms-flexbox;
- flex: 1 1 auto;
- flex-wrap: nowrap;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ -ms-flex-wrap: nowrap;
+ flex-wrap: nowrap;
height: auto;
header {
background-color: white;
height: auto;
header {
background-color: white;
}
&-body {
background-color: $gray;
}
&-body {
background-color: $gray;
- flex: 1;
- flex-direction: row;
+ -ms-flex: 1;
+ flex: 1;
+ -ms-flex-direction: row;
+ flex-direction: row;
min-width: 0;
min-height: 0;
overflow-y: auto;
min-width: 0;
min-height: 0;
overflow-y: auto;
/* Angular wrapping */
lp-react-dashboard {
/* Angular wrapping */
lp-react-dashboard {