io.parrots
Version:
Parrots.io App
256 lines (252 loc) • 8.49 kB
text/less
.parrots-page-application-page {
display: block;
width: 100%;
height: 100%;
-webkit-user-select: none; /* Safari 3.1+ */
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Standard syntax */
>.wrapper-applications {
display: block;
padding-bottom: 5%;
margin-bottom: 5%;
width: 100%;
height: 78%;
position: absolute;
background-color: extract(@CLR_1, 8);
.icon-detail-square {
display: flex;
right: 3%;
position: absolute;
&:before {
cursor: pointer;
content: "r";
font-family: 'PhloxGlyphicons';
font-size: 12pt;
}
}
>.wrapper-label-head {
display: block;
margin-left: 5%;
margin-top: 2%;
height: 14%;
width: 100%;
>.label-title-head {
display: flex;
.FC2();
font-weight: bold;
}
>.label-description-head {
display: flex;
.FC0();
color: extract(@CLR_1, 2);
}
>.label-below-head {
right: 6%;
.FC1();
top: 12.2%;
position: absolute;
color: extract(@CLR_1, 2);
}
}
>.wrapper-item-applications {
display: flex;
height: 52pt;
width: 100%;
background-color: extract(@CLR_1, 9);
border: 0.5px solid extract(@CLR_1, 7);
align-items: center;
>.icon-applications {
margin-left: 5%;
height: 40px;
width: 40px;
}
>.wrapper-item-label {
display: block;
margin-left: 2%;
width: 26.5%;
>.label-title-item {
.FC1();
font-weight: bold;
}
}
.label-description-item {
display: flex;
.FC0();
color: extract(@CLR_1, 2);
.link-details {
display: flex;
margin-left: 6%;
cursor: pointer;
color: extract(@CLR_P, 6);
}
}
>.wrapper-details-applications {
display: flex;
position: absolute;
left: 33.5%;
width: 50%;
>.wrapper-label-details {
display: block;
width: 25%;
>.label-title-details {
display: flex;
.FC1();
font-weight: bold;
}
}
}
>.wrapper-btn-update-open {
display: flex;
position: absolute;
right: 7%;
width: 9.5%;
>.btn-update {
color: extract(@CLR_1, 9);
height: 100%;
width: 100%;
border-radius: 20px;
background-color: extract(@CLR_P, 6);
box-shadow: 0px 4px 6px extract(@CLR_1, 4);
}
.btn-update:hover {
background-color: extract(@CLR_P, 4);
}
>.btn-open-app {
color: extract(@CLR_0, 1);
height: 100%;
width: 100%;
border-radius: 20px;
background-color: extract(@CLR_1, 9);
box-shadow: 0px 4px 6px extract(@CLR_1, 4);
}
.btn-open-app:hover {
background-color: extract(@CLR_1, 8);
}
}
}
.wrapper-item-applications:hover {
background-color: extract(@CLR_1, 7);
}
>.label-coming-soon-update {
display: flex;
margin-top: 2%;
margin-bottom: 1%;
margin-right: 6%;
.FC1();
justify-content: flex-end;
}
}
>.wrapper-footer-applications {
display: block;
width: 100%;
height: 15%;
position: absolute;
bottom: 0;
background-color: extract(@CLR_1, 8);
>.label-description-footer {
display: flex;
margin-top: 1.5%;
margin-bottom: 1%;
margin-left: 5%;
.FC0();
color: extract(@CLR_1, 2);
}
>.wrapper-btn-footer {
display: flex;
width: 100%;
height: 25pt;
>.wrapper-show-all-storage {
display: flex;
margin-left: 5%;
width: 75%;
height: 100%;
color: extract(@CLR_1, 9);
cursor: pointer;
.FC0();
>.btn-storage-left {
display: flex;
padding-left: 2%;
width: 40%;
align-items: center;
background-color: extract(@CLR_P, 6);
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
box-shadow: 0px 4px 6px extract(@CLR_1, 4);
}
>.btn-storage-1 {
display: flex;
padding-left: 2%;
width: 15%;
align-items: center;
background-color: extract(@CLR_D, 5);
box-shadow: 0px 4px 6px extract(@CLR_1, 4);
}
>.btn-storage-2 {
display: flex;
padding-left: 2%;
width: 15%;
align-items: center;
background-color: extract(@CLR_E, 5);
box-shadow: 0px 4px 6px extract(@CLR_1, 4);
}
>.btn-storage-right {
display: flex;
padding-left: 2%;
width: 40%;
align-items: center;
background-color: extract(@CLR_J, 5);
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
box-shadow: 0px 4px 6px extract(@CLR_1, 4);
}
}
>.btn-revert-apply {
color: extract(@CLR_0, 1);
margin-left: 1.25%;
height: 100%;
width: 7.5%;
border-radius: 20px;
background-color: extract(@CLR_1, 9);
box-shadow: 0px 4px 8px extract(@CLR_1, 4);
}
.wrapper-show-all-storage-none {
display: flex;
margin-left: 5%;
width: 75%;
height: 100%;
/* color: extract(@CLR_1, 9); */
cursor: unset;
/* .FC0(); */
}
.btn-storage-none {
display: flex;
padding-left: 2%;
width: 100%;
align-items: center;
background-color: extract(@CLR_1, 7);
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
box-shadow: 0px 4px 6px extract(@CLR_1, 4);
}
.btn-revert-apply-none {
color: extract(@CLR_0, 7);
margin-left: 1.25%;
height: 100%;
width: 7.5%;
border-radius: 20px;
background-color: extract(@CLR_1, 7);
cursor: unset;
box-shadow: 0px 4px 8px extract(@CLR_1, 4);
}
}
}
}
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1225px) {
}
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) {
}