mue/src/components/modals/apps/scss/index.scss

79 lines
1.2 KiB
SCSS

@import 'scss/variables';
$appsWidth: 21rem;
.appsShortcutContainer {
max-height: 35rem;
overflow-y: auto;
// scrollbar-width: thin;
border-radius: 0.8em;
padding: 1.2em;
display: grid;
grid-template-columns: repeat(3, auto);
grid-auto-rows: 100px;
gap: 10px;
place-items: center;
@include themed {
background: t($modal-secondaryColour);
}
.noAppsContainer {
h3 {
margin: 0;
display: flex;
align-items: center;
}
svg {
font-size: 30px;
margin-left: 10px;
}
}
}
.appsIcon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-decoration: none;
padding: 10px;
border-radius: 0.8em;
cursor: pointer;
width: 5rem;
height: 4.7rem;
transition: 0.5s;
img {
border-radius: 0.6rem;
}
span {
display: inline-block;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-align: center;
margin-top: 10px;
}
&:hover {
span {
white-space: initial;
}
height: max-content;
}
@include themed {
color: t($color);
&:hover {
background: t($modal-sidebarActive);
}
}
}