Extend list of available utility classes

This commit is contained in:
Tetrakern 2024-02-11 15:10:47 +01:00
parent 4447185231
commit 986ac6a7f2
4 changed files with 34 additions and 2 deletions

View File

@ -311,8 +311,26 @@ You can also apply additional classes to single words or phrases. Switch to the
| `min-480` | Forces blocks to be at least 480px wide regardless of space. Works well with tables.
| `min-640` | Forces blocks to be at least 640px wide regardless of space. Works well with tables.
| `min-768` | Forces blocks to be at least 768px wide regardless of space. Works well with tables.
| `only-admins` | Makes element only visible for administrators.
| `only-editors` | Makes element only visible to editors or higher.
| `only-moderators` | Makes element only visible to moderators or higher.
| `only-authors` | Makes element only visible to authors or higher.
| `overflow-x` | Adds horizontal scrolling if a block is too wide. Not necessary on tables.
| `no-auto-lightbox` | Prevents the lightbox script from being applied if added to an `<img>` element.
| `hide-below-desktop` | Hide element below viewport widths of less than 1024px.
| `hide-below-tablet` | Hide element below viewport widths of less than 768px.
| `hide-below-640` | Hide element below viewport widths of less than 640px.
| `hide-below-480` | Hide element below viewport widths of less than 480px.
| `hide-below-400` | Hide element below viewport widths of less than 400px.
| `hide-below-375` | Hide element below viewport widths of less than 375px.
| `show-below-desktop` | Only show element below viewport widths of less than 1024px.
| `show-below-tablet` | Only show element below viewport widths of less than 768px.
| `show-below-640` | Only show element below viewport widths of less than 640px.
| `show-below-480` | Only show element below viewport widths of less than 480px.
| `show-below-400` | Only show element below viewport widths of less than 400px.
| `show-below-375` | Only show element below viewport widths of less than 375px.
| `hide-if-logged-in` | Hide element if the user is logged in.
| `hide-if-logged-out` | Hide element if the user is not logged in.
### HTML Block

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -219,6 +219,20 @@ body:not(.is-editor):not(.is-admin) {
}
}
.show-below-tablet {
@include bp(tablet) {
display: none !important;
content-visibility: hidden;
}
}
.show-below-640 {
@include bp(640px) {
display: none !important;
content-visibility: hidden;
}
}
.show-below-480 {
@include bp(480px) {
display: none !important;