@talentsoft-opensource/widget-display-tool
Version:
Widget Simulator
111 lines (92 loc) • 2.13 kB
text/less
@themeColor: darkblue;
@fontColorOnTheme: darkblue;
@fontColorOnNeutral: darkblue;
@backgroundColor: white;
@backgroundOpacity: white;
@import "~@talentsoft-opensource/uxp-themes/dist/assets/styles/index.less";
.main {
background-image: url("./hip-square.png");
background-repeat: repeat;
background-size: 20%;
}
body {
display: flex;
flex-direction: column;
font-size: 1.4rem;
width: 100%;
margin: 0px;
}
.tool__widget__header {
display: flex;
justify-content: space-between;
background-color: darkblue;
padding: 0 10px;
}
.uxp-icons {
font-family: "uxpfont";
}
.tool__widget__settings {
align-self: center;
justify-self: right;
font-family: "uxpfont";
font-size: 3rem;
color: white;
&:hover {
background-color: rgb(55, 55, 139);
cursor: pointer;
}
}
.tool__widget__config {
padding: 0 10px;
color: white;
background-color: darkblue;
border-color: lightblue;
overflow: hidden;
max-height: 0;
&__content {
padding: 2rem;
display: flex;
justify-content: flex-end;
div {
margin-left: 10px;
}
select {
border: 1px solid white;
border-radius: 4px;
padding: 5px;
background: white;
color: darkblue;
margin-left: 5px;
}
}
&--open {
max-height: 300px;
}
}
.widget-area {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
padding: 3rem 0;
overflow: auto;
padding: 1rem 4rem;
width: 1280px;
margin: auto;
@media screen and (min-height: 740px) {
align-items: center;
}
&--widget {
width: 370px;
height: 555px;
border: 0px;
&-enlarged {
width: 1280px;
}
&-minimized {
width: 175px;
height: 175px;
margin-top: 1rem;
}
}
}