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

58 lines
1.2 KiB
SCSS
Raw Normal View History

2017-12-15 23:22:34 -05:00
// 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);
}
2017-12-15 23:22:34 -05:00
}