dashboard/assets/styles/global/_cards.scss

95 lines
1.9 KiB
SCSS

.links {
display: flex;
flex-wrap: wrap;
width: 100%;
.link-container {
position: relative;
background-color: var(--input-bg);
border-radius: var(--border-radius);
border: solid 1px var(--input-border);
display: flex;
flex-basis: 40%;
margin: 0 10px 10px 0;
max-width: 325px;
min-height: 100px;
border-left: solid 10px var(--primary);
a[disabled], &.disabled {
cursor: not-allowed;
color: var(--disabled-text);
}
&.disabled{
background-color: var(--disabled-bg);
border-left: solid 10px var(--disabled-text);
> * {
opacity: .3;
}
.disabled-msg{
position:absolute;
color: var(--error);
z-index: z-index('hoverOverContent');
opacity: 1;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
display: flex;
justify-content: center;
align-items: flex-end;
}
}
&:hover:not(.disabled) {
box-shadow: 0px 0px 1px var(--outline-width) var(--outline);
}
> * {
align-items: center;
display: flex;
flex: 1 0;
padding: 10px;
.link-logo,
.link-content {
display: inline-block;
height: 100%;
}
.link-logo {
text-align: center;
width: 60px;
height: 60px;
border-radius: calc(2 * var(--border-radius));
background-color: white;
img {
width: 56px;
height: 56px;
-o-object-fit: contain;
object-fit: contain;
position: relative;
top: 2px;
}
}
.link-content {
width: 100%;
margin-left: 10px;
}
.description {
margin-top: 10px;
display: -webkit-box;
-webkit-box-orient: vertical;
// -webkit-line-clamp: 3;
// line-clamp: 3;
text-overflow: ellipsis;
color: var(--secondary);
}
}
}
}