matrix-dimension/web/app/integration-bag/integration-bag.component.scss

64 lines
1.3 KiB
SCSS

// component styles are encapsulated and only applied to their components
@import "../../style/themes/themes";
@include themifyComponent() {
.integration-bag {
display: flex;
flex-direction: row;
align-items: stretch;
flex-wrap: wrap;
justify-content: flex-start;
}
.integration {
border: 1px solid themed(integrationBorderColor);
margin: 7px;
padding: 6px;
width: calc(325px - 14px);
position: relative;
cursor: pointer;
}
.integration .integration-arrow {
display: none;
position: absolute;
top: calc(50% - 12px); // icon happens to be 24px tall
right: 1px;
color: #bbb;
}
.integration:hover {
box-shadow: 0 0 5px 5px themed(integrationShadowColor);
}
.integration:hover .integration-arrow {
display: block;
}
.integration .integration-avatar {
width: 50px;
height: 50px;
float: left;
}
.integration .integration-name {
display: inline-block;
font-size: 1.1em;
font-weight: 100;
padding-left: 10px;
}
.integration .integration-description {
display: block;
font-size: 0.8em;
margin-left: 60px;
margin-right: 5px;
color: themed(integrationDescriptionColor);
}
.integration .integration-offline {
position: absolute;
top: 5px;
right: 6px;
}
}