io.parrots
Version:
Parrots.io App
199 lines (197 loc) • 6.38 kB
text/less
parrots-page-system-instance-info {
position: relative;
width: 100%;
height: 100%;
}
.parrots-page-system-instance-info {
display: flex;
position: absolute;
width: 100%;
height: 100%;
>.wrapper-content {
display: inline-block;
position: absolute;
height: 100%;
width: 65%;
border-right: 0.7px solid extract(@CLR_1, 7);
overflow: auto;
>.wrapper-instance-info {
display: inline-block;
width: 100%;
>.label-title-instance-info {
display: flex;
padding-top: 9%;
padding-left: 7%;
font-size: 35px;
}
>.label-description-instance-info {
display: flex;
padding-left: 7%;
padding-bottom: 6%;
color: extract(@CLR_0, 7);
}
>.label-id-instance-info {
display: flex;
.FC1();
padding-left: 7%;
padding-bottom: 2%;
color: extract(@CLR_0, 9);
}
>.wrapper-edit-instance-name-description {
height: 50px;
margin-bottom: 1.5%;
div {
>.edit-instance-name-description {
display: flex;
padding-left: 7.8%;
padding-bottom: 2%;
padding-top: 2%;
}
>.line-below-edit-instance-name-description {
display: flex;
margin-left: 7%;
position: absolute;
height: 1px;
width: 86%;
background-color: extract(@CLR_1, 6);
}
}
>.wrapper-material-text-box-name-description {
display: flex;
padding-left: 7.8%;
padding-top: 2%;
}
}
}
.last {
padding-bottom: 20%;
}
.wrapper-full-line-below {
padding-top: 7%;
padding-bottom: 7%;
>.full-line-below {
display: flex;
position: absolute;
width: 100%;
height: 1px;
background-color: extract(@CLR_1, 6);
}
}
>.wrapper-nodetype-instancesize-storage {
display: inline-block;
width: 100%;
>.wrapper-head-nodetype-instancesize-storage {
display: flex;
width: 100%;
padding-bottom: 7%;
>.img-head-nodetype-instancesize-storage {
margin-left: 7%;
width: 80px;
height: 50pt;
}
>.wrapper-title-description {
display: inline-block;
padding-left: 3%;
>.wrapper-title {
display: flex;
padding-top: 2%;
font-size: 22px;
}
>.wrapper-description {
display: flex;
color: extract(@CLR_0, 7);
}
}
}
>.wrapper-instancetype-zone {
display: flex;
padding-left: 7.8%;
>.label-instancetype-zone {
padding-left: 7%;
padding-right: 9%;
color: extract(@CLR_1, 1);
material-simple-dropdown >.material-simple-dropdown {
margin-top: unset;
}
}
}
>.wrapper-cpu-ram {
display: flex;
padding-left: 7.8%;
padding-top: 4%;
padding-bottom: 1.5%;
>.wrapper-all-cpu-ram {
width: 100%;
}
.label-cpu {
padding-right: 7%;
material-simple-dropdown >.material-simple-dropdown {
margin-top: unset;
}
}
.label-ram {
padding-left: 7%;
padding-right: 7%;
}
.label-value-cpu-ram {
color: extract(@CLR_1, 1);
}
}
>.line-below-cpu-ram {
margin-left: 7%;
position: absolute;
height: 0.1%;
width: 86%;
background-color: extract(@CLR_1, 6);
}
>.below-description {
padding-left: 7%;
padding-top: 3%;
padding-bottom: 2%;
color: extract(@CLR_0, 7);
}
}
}
>.wrapper-setting {
display: inline-block;
-webkit-user-select: none; /* Safari 3.1+ */
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Standard syntax */
overflow: scroll;
position: absolute;
left: 65.1%;
width: 35%;
height: 100%;
background-color: extract(@CLR_1, 8);
>.wrapper-below-setting {
display: block;
width: 100%;
height: 10%;
margin-bottom: 30%;
>.wrapper-dalete-instance {
display: block;
margin-bottom: 50pt;
padding-bottom: 12pt;
}
}
}
}
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1225px) {
.parrots-page-system-instance-info {
>.wrapper-content {
material-text-box >.material-text-box {
>.textbox-wrapper {
width: 216%;
}
}
}
>.wrapper-setting {
width: 34.5%;
}
}
}
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) {
}