CSS utility classes
Library provides a set of utility classes to help you style your components. These classes are designed to be used in combination with other classes to create a wide range of layouts and designs.
Display
<div class="ui-display--block">...</div>
<div class="ui-display--inline-block">...</div>
<div class="ui-display--flex">...</div>
<div class="ui-display--inline-flex">...</div>
<div class="ui-display--inline">...</div>
<div class="ui-display--none">...</div>Position
<div class="acv-position--static">...</div>
<div class="acv-position--relative">...</div>
<div class="acv-position--absolute">...</div>
<div class="acv-position--fixed">...</div>Size
<div class="acv-size--height-100">...</div>
<div class="acv-size--height-100vh">...</div>
<div class="acv-size--height-auto">...</div>
<div class="acv-size--width-100">...</div>
<div class="acv-size--width-100vw">...</div>
<div class="acv-size--width-auto">...</div>Spacing
These classes can be applied with the usage of the following format: {property}{direction}-{size}
The property applies the type of spacing:
- m - applies margin
- p - applies padding
The direction designates the side, which identation property is applied to:
- t - applies the property for margin-top or padding-top
- b - applies the property for margin-bottom or padding-bottom
- l - applies the property for margin-left or padding-left
- r - applies the property for margin-right or padding-right
- x - applies properties for both *-left and *-right
- y - applies properties for both *-top and *-bottom
- a - applies the property for *margin and *padding in all directions
The size controls the propery's increment:
- 0 - removes margin or padding by setting it to 0
- 8 - sets margin or padding as 8
- 16 - sets margin or padding as 16
- 24 - sets margin or padding as 24
For block elements with a designated width, you can apply .mx-auto to horizontally center the content.
Overflow
Text
Ellipsis
Text ellipsis styling does not work with inline elements. You can use acv-display--inline-block class to overwrite the display property if needed.
Source code
<script setup>
// import '@acronis-platform/ui-component-library/styles/utilities.css';
</script>
<template>
<PreviewGroup>
<Preview
name="acv-text--ellipsis"
span="12"
>
<div class="acv-text--ellipsis">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id venenatis a condimentum vitae sapien.
</div>
</Preview>
<Preview
name="acv-text--ellipsis with span"
span="12"
>
<div class="acv-size--width-100">
<span class="acv-text--ellipsis acv-display--inline-block">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id venenatis a condimentum vitae sapien.
</span>
</div>
</Preview>
</PreviewGroup>
</template>Text-Middle-Ellipsis
If the text content is an invalid windows/mac/linux path, the path would not be hidden, and a warning would appear in the console.
The text has to be enclosed an element that specifies the width of the path.
Windows path
Linux/Mac path
With hint when hover
Window path with long file name
Mac path with long file name
very long file name
With icon
With title
Source code
<script setup>
import AcvIcon from '@/components/icon/icon.vue';
import { vTextMiddleEllipsis } from '@/directives/textMiddleEllipsis.ts';
import { IconPlus16 } from '@acronis-platform/icons/plus';
</script>
<template>
<div class="acv-grid-row acv-grid--cols-3">
<div>
<h4 class="acv-h4">
Windows path
</h4>
<div class="acv-size--width-100">
<span v-text-middle-ellipsis>C:\Users\ui.kit\Desktop\Folder\Folder\testfile.txt</span>
</div>
</div>
<div>
<h4 class="acv-h4">
Linux/Mac path
</h4>
<div class="acv-size--width-100">
<span v-text-middle-ellipsis>/users/ui.kit/desktop/folder/folder/testfile.txt</span>
</div>
</div>
<div>
<h4 class="acv-h4">
With hint when hover
</h4>
<div class="acv-text acv-size--width-100">
<span v-text-middle-ellipsis:show-hover-hint>C:\Users\ui.kit\Desktop\Folder\Folder\testfile.txt</span>
</div>
</div>
<div>
<h4 class="acv-h4">
Window path with long file name
</h4>
<div class="acv-size--width-100">
<span v-text-middle-ellipsis:show-hover-hint>C:\\Users\\Css.Test\\Desktop\\windows-text-middle-ellipsis-no-hint.txt</span>
</div>
</div>
<div>
<h4 class="acv-h4">
Mac path with long file name
</h4>
<div class="acv-size--width-100">
<span v-text-middle-ellipsis:show-hover-hint>/User/abcde/Downloads/eicarcom2.zip.download</span>
</div>
</div>
<div>
<h4 class="acv-h4">
very long file name
</h4>
<div class="acv-size--width-100">
<span v-text-middle-ellipsis:show-hover-hint>/usr/veryveryveryveryverylongfilename.txt</span>
</div>
</div>
<div>
<h4 class="acv-h4">
With icon
</h4>
<div class="acv-size--width-100 acv-text--nowrap">
<span
v-text-middle-ellipsis
class="long"
>
/usr/veryveryveryveryverylongfilename.txt
</span>
<AcvIcon
class="link__icon acv-bg--solid-brand-light"
:icon="IconPlus16"
/>
</div>
</div>
<div>
<h4 class="acv-h4">
With title
</h4>
<div class="acv-size--width-100 acv-text--nowrap">
<span v-text-middle-ellipsis:show-hover-hint>
/usr/veryveryveryveryverylongfilename.txt
</span>
</div>
</div>
</div>
</template>
<style scoped>
.acv-grid-row > * {
background-color: var(--acv-color-primary-lightest);
width: 100%;
overflow: hidden;
min-height: 100px;
padding-inline: 8px;
}
</style>Text align
White space
Word break
Background
Grid
Rows / Columns
Use the acv-grid--rows-{n} utilities to create grids with n equally sized rows. Use the acv-grid--cols-{n} utilities to create grids with n equally sized columns.
Spans
Use the acv-grid--row-span-{n} utilities to make an element span n rows. Use the acv-grid--col-span-{n} utilities to make an element span n columns.
Start / End
Use the acv-grid--col-start-{n} and acv-grid--col-end-{n} utilities to make an element start or end at the nth grid line. These can also be combined with the acv-grid--col-span-{n} utilities to span a specific number of columns. Use the acv-grid--row-start-{n} and acv-grid--row-end-{n} utilities to make an element start or end at the nth grid line. These can also be combined with the acv-grid--row-span-{n} utilities to span a specific number of rows.
Grid flow
Use the acv-grid--flow-{keyword} utilities to control how the auto-placement algorithm works for a grid layout.