initial
This commit is contained in:
Nadar
833
apps/client/pages/_.vue
Normal file
833
apps/client/pages/_.vue
Normal file
@@ -0,0 +1,833 @@
|
||||
<template>
|
||||
<div
|
||||
ref="root"
|
||||
class="root"
|
||||
>
|
||||
<!-- UiButton -->
|
||||
<div class="doc-block">
|
||||
<strong>UiButton</strong>
|
||||
<h1>Кнопки и ссылки</h1>
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 16px">
|
||||
<template
|
||||
v-for="type in ['filled', 'outlined', 'ghost', 'link']"
|
||||
:key="type"
|
||||
>
|
||||
<div
|
||||
v-for="color in ['primary', 'secondary']"
|
||||
:key="color"
|
||||
class="buttons-rows"
|
||||
>
|
||||
<div
|
||||
v-for="size in ['large', 'medium', 'small']"
|
||||
:key="size"
|
||||
class="buttons-grid"
|
||||
>
|
||||
<template
|
||||
v-for="(props, index) in [
|
||||
{
|
||||
bind: { type, size, color },
|
||||
icon: size === 'large' ? 'plus' : 's-plus',
|
||||
chevron:
|
||||
size === 'large' ? 'chevron-down' : 's-chevron-down',
|
||||
},
|
||||
]"
|
||||
:key="index"
|
||||
>
|
||||
<UiButton v-bind="props.bind">
|
||||
Button
|
||||
</UiButton>
|
||||
|
||||
<UiButton
|
||||
v-bind="props.bind"
|
||||
:icon="props.icon"
|
||||
>
|
||||
Button
|
||||
</UiButton>
|
||||
<UiButton
|
||||
v-bind="props.bind"
|
||||
:right-icon="props.icon"
|
||||
>
|
||||
Button
|
||||
</UiButton>
|
||||
<UiButton
|
||||
v-bind="props.bind"
|
||||
:left-icon="props.icon"
|
||||
:right-icon="props.chevron"
|
||||
>
|
||||
Button
|
||||
</UiButton>
|
||||
|
||||
<UiButton
|
||||
v-bind="props.bind"
|
||||
loading
|
||||
>
|
||||
Button
|
||||
</UiButton>
|
||||
<UiButton
|
||||
v-bind="props.bind"
|
||||
:icon="props.icon"
|
||||
/>
|
||||
<UiButton
|
||||
v-bind="props.bind"
|
||||
:left-icon="props.icon"
|
||||
:right-icon="props.chevron"
|
||||
/>
|
||||
|
||||
<UiButton
|
||||
v-bind="props.bind"
|
||||
:icon="props.icon"
|
||||
loading
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- UiSelect -->
|
||||
<div class="doc-block">
|
||||
<strong>UiSelect</strong>
|
||||
<h1>Select</h1>
|
||||
|
||||
<div class="two-columns">
|
||||
<h4 class="group-heading">
|
||||
Default
|
||||
</h4>
|
||||
<h4 class="group-heading">
|
||||
Multiple
|
||||
</h4>
|
||||
|
||||
<div
|
||||
v-for="(multiple, index) in [false, true]"
|
||||
:key="index"
|
||||
class="bg-clr-grey-100 p-8"
|
||||
style="display: inline-flex; gap: 8px; justify-self: center"
|
||||
>
|
||||
<UiSelect
|
||||
:id="!multiple ? 'select' : 'select2'"
|
||||
label="Select"
|
||||
:options="selectOptions"
|
||||
:multiple="multiple"
|
||||
/>
|
||||
<UiSelect
|
||||
:id="!multiple ? 'select' : 'select2'"
|
||||
label="Searchable"
|
||||
:options="selectOptions"
|
||||
searchable
|
||||
:multiple="multiple"
|
||||
/>
|
||||
<UiSelect
|
||||
:id="!multiple ? 'select' : 'select2'"
|
||||
label="Clearable"
|
||||
:options="selectOptions"
|
||||
clearable
|
||||
:multiple="multiple"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- UiDropdown -->
|
||||
<div class="doc-block half">
|
||||
<strong>UiDropdown</strong>
|
||||
<h1>Dropdown \ Выпадающий список</h1>
|
||||
|
||||
<UiDropdown>
|
||||
<UiButton
|
||||
right-icon="s-chevron-down"
|
||||
size="small"
|
||||
>
|
||||
Trigger
|
||||
</UiButton>
|
||||
|
||||
<template #dropdown>
|
||||
<UiDropdownItem
|
||||
v-for="i in 5"
|
||||
:key="i"
|
||||
>
|
||||
Item {{ i }}
|
||||
</UiDropdownItem>
|
||||
</template>
|
||||
</UiDropdown>
|
||||
</div>
|
||||
|
||||
<!-- UiCalendar -->
|
||||
<div class="doc-block half">
|
||||
<strong>UiCalendar</strong>
|
||||
<h1>Calendar</h1>
|
||||
|
||||
<div class="d-inline-block bg-clr-grey-100 p-8">
|
||||
<UiCalendar style="border-radius: 12px" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- UiInput -->
|
||||
<div class="doc-block half">
|
||||
<strong>UiInput</strong>
|
||||
<h1>Поля ввода</h1>
|
||||
|
||||
<div class="two-columns">
|
||||
<!-- <template v-for="state in []"></template> -->
|
||||
<h4 class="group-heading">
|
||||
Normal
|
||||
</h4>
|
||||
<h4 class="group-heading">
|
||||
Disabled
|
||||
</h4>
|
||||
|
||||
<UiInput
|
||||
id="input1"
|
||||
label="Basic"
|
||||
/>
|
||||
<UiInput
|
||||
id="input1"
|
||||
label="Basic"
|
||||
disabled
|
||||
/>
|
||||
|
||||
<UiInput
|
||||
id="input2"
|
||||
label="With caption"
|
||||
caption="Caption"
|
||||
/>
|
||||
<UiInput
|
||||
id="input2"
|
||||
label="With caption"
|
||||
caption="Caption"
|
||||
disabled
|
||||
/>
|
||||
|
||||
<UiInput
|
||||
id="input3"
|
||||
label="Clearable"
|
||||
clearable
|
||||
model-value="Value"
|
||||
/>
|
||||
<UiInput
|
||||
id="input3"
|
||||
label="Clearable"
|
||||
clearable
|
||||
disabled
|
||||
/>
|
||||
|
||||
<UiInput
|
||||
id="input4"
|
||||
label="Copyable"
|
||||
copyable
|
||||
model-value="Value"
|
||||
/>
|
||||
<UiInput
|
||||
id="input4"
|
||||
label="Copyable"
|
||||
copyable
|
||||
disabled
|
||||
/>
|
||||
|
||||
<UiInput
|
||||
id="input5"
|
||||
label="Password"
|
||||
native-type="password"
|
||||
model-value="superPassword"
|
||||
/>
|
||||
<UiInput
|
||||
id="input5"
|
||||
label="Password"
|
||||
native-type="password"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- UiSearch -->
|
||||
<div class="doc-block half">
|
||||
<strong>UiSearch</strong>
|
||||
<h1>Поиск</h1>
|
||||
|
||||
<div class="two-columns">
|
||||
<h4 class="group-heading">
|
||||
Normal
|
||||
</h4>
|
||||
<h4 class="group-heading">
|
||||
Disabled
|
||||
</h4>
|
||||
|
||||
<UiSearch
|
||||
v-model="searchTerm"
|
||||
size="large"
|
||||
label="Large"
|
||||
/>
|
||||
<UiSearch
|
||||
v-model="searchTerm"
|
||||
size="large"
|
||||
label="Large"
|
||||
disabled
|
||||
/>
|
||||
|
||||
<UiSearch
|
||||
v-model="searchTerm"
|
||||
size="medium"
|
||||
label="Medium"
|
||||
/>
|
||||
<UiSearch
|
||||
v-model="searchTerm"
|
||||
size="medium"
|
||||
label="Medium"
|
||||
disabled
|
||||
/>
|
||||
|
||||
<UiSearch
|
||||
v-model="searchTerm"
|
||||
size="small"
|
||||
label="Small"
|
||||
/>
|
||||
<UiSearch
|
||||
v-model="searchTerm"
|
||||
size="small"
|
||||
label="Small"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- UiSwitch -->
|
||||
<div class="doc-block third">
|
||||
<strong>UiSwitch</strong>
|
||||
<h1>Switch</h1>
|
||||
|
||||
<div class="two-columns justify-items-center">
|
||||
<h4 class="group-heading">
|
||||
Normal
|
||||
</h4>
|
||||
<h4 class="group-heading">
|
||||
Disabled
|
||||
</h4>
|
||||
|
||||
<UiSwitch id="switch" />
|
||||
<UiSwitch
|
||||
id="switch"
|
||||
disabled
|
||||
/>
|
||||
|
||||
<UiSwitch
|
||||
id="switch2"
|
||||
:loading="switchLoading"
|
||||
:before-change="beforeChange"
|
||||
/>
|
||||
<UiSwitch
|
||||
id="switch2"
|
||||
:loading="switchLoading"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- UiCheckbox -->
|
||||
<div class="doc-block third">
|
||||
<strong>UiCheckbox</strong>
|
||||
<h1>Checkbox</h1>
|
||||
|
||||
<div class="two-columns">
|
||||
<h4 class="group-heading">
|
||||
Normal
|
||||
</h4>
|
||||
<h4 class="group-heading">
|
||||
Disabled
|
||||
</h4>
|
||||
|
||||
<UiCheckbox
|
||||
id="checkbox"
|
||||
label="Label"
|
||||
true-value="checkbox1"
|
||||
/>
|
||||
<UiCheckbox
|
||||
id="checkbox"
|
||||
label="Label"
|
||||
true-value="checkbox1"
|
||||
disabled
|
||||
/>
|
||||
|
||||
<UiCheckbox
|
||||
id="checkbox"
|
||||
true-value="checkbox2"
|
||||
/>
|
||||
<UiCheckbox
|
||||
id="checkbox"
|
||||
true-value="checkbox2"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- UiRadio -->
|
||||
<div class="doc-block third">
|
||||
<strong>UiRadio</strong>
|
||||
<h1>Radio</h1>
|
||||
|
||||
<div class="two-columns">
|
||||
<h4 class="group-heading">
|
||||
Normal
|
||||
</h4>
|
||||
<h4 class="group-heading">
|
||||
Disabled
|
||||
</h4>
|
||||
|
||||
<UiRadio
|
||||
id="radio"
|
||||
label="Label"
|
||||
value="radio1"
|
||||
/>
|
||||
<UiRadio
|
||||
id="radio"
|
||||
label="Label"
|
||||
value="radio1"
|
||||
disabled
|
||||
/>
|
||||
|
||||
<UiRadio
|
||||
id="radio"
|
||||
value="radio2"
|
||||
/>
|
||||
<UiRadio
|
||||
id="radio"
|
||||
value="radio2"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- UiAccordion -->
|
||||
<div class="doc-block">
|
||||
<strong>UiAccordion</strong>
|
||||
<h1>Спойлер \ Аккордеон</h1>
|
||||
|
||||
<div style="width: 600px; margin: 0 auto">
|
||||
<UiAccordion>
|
||||
<UiAccordionItem title="Title">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad
|
||||
commodi, culpa delectus deleniti doloribus ducimus eaque eos eveniet
|
||||
expedita harum, in incidunt itaque magnam, nulla quam ratione
|
||||
recusandae reprehenderit veniam?
|
||||
</UiAccordionItem>
|
||||
|
||||
<UiAccordionItem title="Title 2">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor
|
||||
exercitationem iusto obcaecati placeat sunt! Dicta dolorem ducimus
|
||||
minima molestias obcaecati odio omnis ratione recusandae,
|
||||
voluptatum? Aspernatur autem commodi praesentium sint? Lorem ipsum
|
||||
dolor sit amet, consectetur adipisicing elit. Expedita optio, vitae.
|
||||
Aut consectetur cum dolores est exercitationem facilis fugiat
|
||||
incidunt iste maiores modi nobis quia rerum, sit vel veniam vero!
|
||||
<br>
|
||||
<br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor
|
||||
exercitationem iusto obcaecati placeat sunt! Dicta dolorem ducimus
|
||||
minima molestias obcaecati odio omnis ratione recusandae,
|
||||
voluptatum? Aspernatur autem commodi praesentium sint? Lorem ipsum
|
||||
dolor sit amet, consectetur adipisicing elit. Expedita optio, vitae.
|
||||
Aut consectetur cum dolores est exercitationem facilis fugiat
|
||||
incidunt iste maiores modi nobis quia rerum, sit vel veniam vero!
|
||||
</UiAccordionItem>
|
||||
|
||||
<UiAccordionItem title="Title 3">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor
|
||||
exercitationem iusto obcaecati placeat sunt! Dicta dolorem ducimus
|
||||
minima molestias obcaecati odio omnis ratione recusandae,
|
||||
voluptatum? Aspernatur autem commodi praesentium sint? Lorem ipsum
|
||||
dolor sit amet, consectetur adipisicing elit. Expedita optio, vitae.
|
||||
Aut consectetur cum dolores est exercitationem facilis fugiat
|
||||
incidunt iste maiores modi nobis quia rerum, sit vel veniam vero!
|
||||
<br>
|
||||
<br>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor
|
||||
exercitationem iusto obcaecati placeat sunt! Dicta dolorem ducimus
|
||||
minima molestias obcaecati odio omnis ratione recusandae,
|
||||
voluptatum? Aspernatur autem commodi praesentium sint? Lorem ipsum
|
||||
dolor sit amet, consectetur adipisicing elit. Expedita optio, vitae.
|
||||
Aut consectetur cum dolores est exercitationem facilis fugiat
|
||||
incidunt iste maiores modi nobis quia rerum, sit vel veniam vero!
|
||||
</UiAccordionItem>
|
||||
</UiAccordion>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- UiAlert -->
|
||||
<div class="doc-block">
|
||||
<strong>UiAlert</strong>
|
||||
<h1>Алерты</h1>
|
||||
|
||||
<div
|
||||
class="three-columns"
|
||||
style="justify-items: center"
|
||||
>
|
||||
<div
|
||||
class="w-100"
|
||||
style="max-width: 400px"
|
||||
>
|
||||
<UiAlert
|
||||
v-for="type in [
|
||||
'neutral',
|
||||
'positive',
|
||||
'warning',
|
||||
'negative',
|
||||
'marketing',
|
||||
]"
|
||||
:key="type"
|
||||
class="my-8"
|
||||
:type="type"
|
||||
text="Текст сообщения"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-100"
|
||||
style="max-width: 400px"
|
||||
>
|
||||
<UiAlert
|
||||
v-for="type in [
|
||||
'neutral',
|
||||
'positive',
|
||||
'warning',
|
||||
'negative',
|
||||
'marketing',
|
||||
]"
|
||||
:key="type"
|
||||
class="my-8"
|
||||
:type="type"
|
||||
title="Заголовок"
|
||||
text="Текст сообщения"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="w-100"
|
||||
style="max-width: 400px"
|
||||
>
|
||||
<UiAlert
|
||||
v-for="type in [
|
||||
'neutral',
|
||||
'positive',
|
||||
'warning',
|
||||
'negative',
|
||||
'marketing',
|
||||
]"
|
||||
:key="type"
|
||||
:type="type"
|
||||
class="my-8"
|
||||
title="Заголовок"
|
||||
text="Текст сообщения"
|
||||
>
|
||||
<template #action>
|
||||
<UiButton type="link">
|
||||
Действие
|
||||
</UiButton>
|
||||
</template>
|
||||
</UiAlert>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- UiBadge -->
|
||||
<div class="doc-block">
|
||||
<strong>UiBadge</strong>
|
||||
<h1>Бейджы</h1>
|
||||
|
||||
<div
|
||||
class="three-columns"
|
||||
style="justify-items: center"
|
||||
>
|
||||
<div>
|
||||
<UiBadge
|
||||
v-for="type in [
|
||||
'neutral',
|
||||
'positive',
|
||||
'warning',
|
||||
'negative',
|
||||
'marketing',
|
||||
]"
|
||||
:key="type"
|
||||
class="my-8"
|
||||
:type="type"
|
||||
text="Текст бейджа"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<UiBadge
|
||||
v-for="type in [
|
||||
'neutral',
|
||||
'positive',
|
||||
'warning',
|
||||
'negative',
|
||||
'marketing',
|
||||
]"
|
||||
:key="type"
|
||||
class="my-8"
|
||||
:type="type"
|
||||
text="Текст бейджа"
|
||||
:icon="randomIcon()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<UiBadge
|
||||
v-for="type in [
|
||||
'neutral',
|
||||
'positive',
|
||||
'warning',
|
||||
'negative',
|
||||
'marketing',
|
||||
]"
|
||||
:key="type"
|
||||
:type="type"
|
||||
class="my-8"
|
||||
text="Текст бейджа"
|
||||
>
|
||||
<template #prefix>
|
||||
<i :class="`icon-${randomIcon()}`" />
|
||||
</template>
|
||||
<template #suffix>
|
||||
<i :class="`icon-${randomIcon()}`" />
|
||||
</template>
|
||||
</UiBadge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notification -->
|
||||
<div class="doc-block">
|
||||
<strong>useNotify \ $notify</strong>
|
||||
<h1>Уведомления</h1>
|
||||
|
||||
<div
|
||||
style="
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 150px);
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
"
|
||||
>
|
||||
<UiButton @click="randomNotification('top-left')">
|
||||
Top left
|
||||
</UiButton>
|
||||
<UiButton @click="randomNotification('top-right')">
|
||||
Top Right
|
||||
</UiButton>
|
||||
<UiButton @click="randomNotification('bottom-left')">
|
||||
Bottom left
|
||||
</UiButton>
|
||||
<UiButton @click="randomNotification('bottom-right')">
|
||||
Bottom Right
|
||||
</UiButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CopyButton -->
|
||||
<div class="doc-block">
|
||||
<strong>UiCopyButton</strong>
|
||||
<h1>Кнопка копирования</h1>
|
||||
|
||||
<div
|
||||
style="
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, 150px);
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
"
|
||||
>
|
||||
<UiCopyButton
|
||||
title="Payment link"
|
||||
pressed-title="Link copied"
|
||||
value="Test value"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Icons -->
|
||||
<!-- <div -->
|
||||
<!-- v-for="(font, index) in [icons, smallIcons]" -->
|
||||
<!-- :key="font.metadata.name" -->
|
||||
<!-- class="doc-block half" -->
|
||||
<!-- > -->
|
||||
<!-- <strong> -->
|
||||
<!-- {{ _ === 0 ? '<i class="icon-*" />' : '<i class="icon-s-*" />' }} -->
|
||||
<!-- </strong> -->
|
||||
<!-- <h1>Иконки - {{ font.metadata.name }}</h1> -->
|
||||
|
||||
<!-- <div> -->
|
||||
<!-- <div -->
|
||||
<!-- v-for="(iconSet, index) in font.iconSets" -->
|
||||
<!-- :key="_" -->
|
||||
<!-- class="icons-grid" -->
|
||||
<!-- > -->
|
||||
<!-- <div -->
|
||||
<!-- v-for="icon in iconSet.selection" -->
|
||||
<!-- :key="icon.name" -->
|
||||
<!-- class="preview-icon" -->
|
||||
<!-- @click="copy(icon.name)" -->
|
||||
<!-- > -->
|
||||
<!-- <i :class="`${font.preferences.fontPref.prefix}${icon.name}`" /> -->
|
||||
<!-- <span>{{ icon.name }}</span> -->
|
||||
<!-- </div> -->
|
||||
<!-- </div> -->
|
||||
<!-- </div> -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useForm } from 'vee-validate'
|
||||
import { ALERT_TYPES } from 'ui-layer/components/alert/types'
|
||||
import type { NotificationPlacement } from 'ui-layer/components/notification/types'
|
||||
import { sample } from 'lodash-es'
|
||||
import icons from '#build/ui/available-icons'
|
||||
|
||||
definePageMeta({
|
||||
layout: 'empty',
|
||||
dev: true,
|
||||
})
|
||||
|
||||
const searchTerm = ref<string>()
|
||||
const switchLoading = ref(false)
|
||||
|
||||
useForm()
|
||||
|
||||
function copy(value: string) {
|
||||
navigator.clipboard.writeText(value)
|
||||
}
|
||||
|
||||
async function beforeChange() {
|
||||
switchLoading.value = true
|
||||
|
||||
const result = await new Promise(resolve =>
|
||||
setTimeout(() => resolve(true), 1000),
|
||||
)
|
||||
|
||||
switchLoading.value = false
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
const selectOptions = computed(() => {
|
||||
return Array.from(Array(300).keys()).map(i => `Option ${i + 1}`)
|
||||
})
|
||||
|
||||
let notificationTypeCounter = 0
|
||||
function randomNotification(placement: NotificationPlacement) {
|
||||
const notify = useNotify()
|
||||
|
||||
notify({
|
||||
placement,
|
||||
text: 'Текст',
|
||||
title: 'Заголовок',
|
||||
type: ALERT_TYPES[notificationTypeCounter],
|
||||
})
|
||||
|
||||
notificationTypeCounter++
|
||||
notificationTypeCounter %= ALERT_TYPES.length
|
||||
}
|
||||
|
||||
function randomIcon() {
|
||||
return sample(icons.filter(icon => icon.startsWith('s-')))
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.root {
|
||||
padding: 30px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.doc-block {
|
||||
background-color: $clr-white;
|
||||
border-radius: 30px;
|
||||
padding: 40px 60px;
|
||||
grid-column: span 6;
|
||||
|
||||
&.third {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
&.half {
|
||||
grid-column: span 3;
|
||||
}
|
||||
|
||||
> strong {
|
||||
color: $clr-grey-600;
|
||||
}
|
||||
|
||||
> h1 {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.two-columns {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.three-columns {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.buttons-rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.buttons-grid {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.icons-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.preview-icon {
|
||||
display: flex;
|
||||
border-radius: 8px;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
width: 85px;
|
||||
height: 65px;
|
||||
text-align: center;
|
||||
background-color: $clr-grey-100;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: background-color 0.2s ease-out;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: $clr-grey-200;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $clr-grey-300;
|
||||
}
|
||||
|
||||
span {
|
||||
@include txt-s-m;
|
||||
}
|
||||
}
|
||||
|
||||
.group-heading {
|
||||
text-align: center;
|
||||
color: $clr-grey-500;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user