framework/less/admin/ExtensionWidget.less
Sami Mazouz af89b23f67
CSS Code Housekeeping (#3026)
* refactor: Avatar classes refactor
* refactor: Badge classes refactor
* chore: Remove commented dead code
* chore: Remove SignUpModal dead CSS code
Flarum seem to have had some kind of user display in the sign up modal 
on successful sign up, which no longer exists.

https://github.com/flarum/core/blob/v0.1.0-beta/js/forum/src/components/SignUpModal.js#L111
* chore: Deprecate unneeded vendor mixins
* chore: Normalize property values format
Co-authored-by: David Wheatley <hi@davwheat.dev>
* chore: Remove @-webkit-keyframes
* chore: Combine animation properties
* chore: Avoid `all` for transition
* chore: translate3d is no longer necessary for hardware acceleration
* fix: Lost cursor pointer to normalize update
* chore: Use CSS variables for more things
* chore: Remove unecessary overspecification
Co-authored-by: David Wheatley <hi@davwheat.dev>
2021-08-21 19:34:07 +01:00

93 lines
1.5 KiB
Plaintext

.ExtensionsWidget {
background-color: @body-bg;
padding: 0;
}
.ExtensionsWidget-list {
padding: 0;
background-color: @body-bg;
.ExtensionGroup {
margin-bottom: 20px;
h3 {
color: @muted-color;
text-transform: uppercase;
font-size: 12px;
margin: 0 0 10px;
}
}
.ExtensionList {
padding: 0;
list-style: none;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, 90px);
margin-bottom: 0;
> li {
text-align: left;
position: relative;
display: block;
}
}
}
.ExtensionList-Category {
background: @control-bg;
padding: 20px 0 20px 20px;
margin-bottom: 20px;
border-radius: @border-radius;
}
.ExtensionList-Label {
margin-top: 0;
color: @muted-color;
}
.ExtensionListItem.disabled {
.ExtensionListItem-title {
opacity: 0.5;
color: @muted-color;
}
.ExtensionListItem-icon {
opacity: 0.5;
}
}
.ExtensionListItem {
transition: .15s ease-in-out;
&:hover {
transform: scale(1.05);
}
a:hover {
text-decoration: none;
}
}
.ExtensionListItem-title {
display: block;
text-align: center;
margin-top: 5px;
color: @text-color;
}
.ExtensionIcon {
--size: 90px;
width: var(--size);
height: var(--size);
background: @control-bg;
color: @control-color;
border-radius: 6px;
display: inline-flex;
font-size: calc(~"var(--size) / 2");
text-align: center;
align-items: center;
justify-content: center;
vertical-align: middle;
}