fixed zindex thing - brightness was the problem
This commit is contained in:
@@ -8,8 +8,6 @@
|
||||
import HomeIndex from "./home/Index.svelte";
|
||||
import BuildReport from "./build/Report.svelte";
|
||||
import Header from "./layout/Header.svelte";
|
||||
import BrowseModal from "./records/elements/BrowseModal.svelte";
|
||||
import Dialog from "./dialog/Dialog.svelte";
|
||||
|
||||
const components = {
|
||||
members: Members,
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
<script>
|
||||
|
||||
import Selectlist from "./Selectlist.svelte";
|
||||
import Icon from "../common/Icon.svelte";
|
||||
|
||||
let searchEl;
|
||||
let search;
|
||||
export let value;
|
||||
export let field;
|
||||
|
||||
function handleSelect(){
|
||||
searchEl.focus();
|
||||
searchEl.blur()
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<div class="autocomplete">
|
||||
<input
|
||||
type="search"
|
||||
bind:value={search}
|
||||
bind:this={searchEl}
|
||||
placeholder="Search for options"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<div class="autocomplete-results">
|
||||
<Selectlist
|
||||
{field}
|
||||
bind:value
|
||||
bind:search
|
||||
on:selected={handleSelect}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{#if value}
|
||||
<div class="autocomplete-selected-value">
|
||||
{#if Array.isArray(field.selectOptions)}
|
||||
{value}
|
||||
{:else}
|
||||
{field.selectOptions[value]}
|
||||
{/if}
|
||||
<button
|
||||
on:click|preventDefault={(e) => (value = "")}
|
||||
type="button"
|
||||
class="button-text"
|
||||
aria-label="Close"
|
||||
>
|
||||
<Icon width={12} height={12} icon="close"></Icon>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
{/if}
|
||||
@@ -0,0 +1,60 @@
|
||||
<script>
|
||||
import Fuse from "fuse.js";
|
||||
import {createEventDispatcher} from "svelte";
|
||||
|
||||
export let field;
|
||||
export let value;
|
||||
export let search = "";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
|
||||
function select(e, option) {
|
||||
e.preventDefault();
|
||||
value = option.value;
|
||||
search = "";
|
||||
dispatch("selected", {option: option})
|
||||
}
|
||||
|
||||
|
||||
function formatOptionsForSearch(listOptions) {
|
||||
if (Array.isArray(listOptions)) {
|
||||
return listOptions.map(value => {
|
||||
return {
|
||||
value: value,
|
||||
label: value,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return Object.entries(listOptions).map(([k, v]) => {
|
||||
return {
|
||||
value: k,
|
||||
label: v,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
let formattedOptions = formatOptionsForSearch(field.selectOptions);
|
||||
const fuse = new Fuse(formattedOptions, {
|
||||
includeScore: false,
|
||||
keys: ['value', 'label']
|
||||
})
|
||||
$: result = search === "" ? formattedOptions : fuse.search(search).map(resItem => resItem.item)
|
||||
</script>
|
||||
|
||||
{#if result}
|
||||
{#each result as suggestion (suggestion.value)}
|
||||
<div
|
||||
class="autocomplete-option"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
on:click={(e) => select(e, suggestion)}
|
||||
on:keypress={(e) => select(e, suggestion)}
|
||||
>
|
||||
<span class="dropdown-item">
|
||||
{suggestion.label}
|
||||
</span>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
@@ -188,7 +188,7 @@
|
||||
|
||||
<ErrorAlert message={errorMessage}/>
|
||||
|
||||
<div class=" mt-4" style="margin-bottom:150px">
|
||||
<div class=" mt-4" style="margin-bottom:150px;position:relative;">
|
||||
<ContentTabs
|
||||
{schema}
|
||||
{isCreateMode}
|
||||
|
||||
@@ -1,114 +0,0 @@
|
||||
<script>
|
||||
import {createEventDispatcher, getContext} from "svelte";
|
||||
import Index from "../../content/Index.svelte";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const channel = getContext("channel");
|
||||
$: data = {};
|
||||
let isOpen = false;
|
||||
let selectedRecords = [];
|
||||
// onMount(() => {
|
||||
// load();
|
||||
// });
|
||||
|
||||
export function open(schema) {
|
||||
isOpen = true;
|
||||
load(schema);
|
||||
}
|
||||
|
||||
export function close() {
|
||||
isOpen = false;
|
||||
selectedRecords = [];
|
||||
}
|
||||
|
||||
function load(schema) {
|
||||
axios
|
||||
.get(channel.lucentUrl + "/content/" + schema)
|
||||
.then((response) => {
|
||||
data = response.data;
|
||||
})
|
||||
.catch((error) => console.log(error));
|
||||
}
|
||||
|
||||
function insert(e) {
|
||||
e.preventDefault();
|
||||
dispatch("insert", {
|
||||
records: selectedRecords,
|
||||
action: "insert",
|
||||
});
|
||||
}
|
||||
|
||||
function replace(e) {
|
||||
e.preventDefault();
|
||||
dispatch("insert", {
|
||||
records: selectedRecords,
|
||||
action: "replace",
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if data.schema}
|
||||
<div
|
||||
class="modal fade show"
|
||||
tabindex="-1"
|
||||
class:d-block={isOpen}
|
||||
aria-modal="true"
|
||||
role="dialog"
|
||||
style="background: rgba(100,100,100,.6);"
|
||||
>
|
||||
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<div class="d-flex align-items-center">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary me-1"
|
||||
on:click={insert}
|
||||
disabled={selectedRecords.length === 0}
|
||||
>
|
||||
Insert
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-outline-primary me-3"
|
||||
on:click={replace}
|
||||
disabled={selectedRecords.length === 0}
|
||||
>
|
||||
Replace
|
||||
</button>
|
||||
{#if selectedRecords.length > 0}
|
||||
<span class="">
|
||||
{selectedRecords.length} records selected
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<button
|
||||
on:click|preventDefault={(e) => (isOpen = false)}
|
||||
type="button"
|
||||
class="btn-close"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
/>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<Index {...data} bind:selected={selectedRecords}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.modal-dialog {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
margin: 40px auto;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,6 @@
|
||||
<script>
|
||||
import { getErrorMessage } from "./errorMessage";
|
||||
import {getErrorMessage} from "./errorMessage";
|
||||
|
||||
export let field;
|
||||
export let value;
|
||||
export let isCreateMode;
|
||||
@@ -9,23 +10,21 @@
|
||||
</script>
|
||||
|
||||
<div class="mb-0">
|
||||
<div class="input-group ">
|
||||
<div style="width:64px;">
|
||||
<input
|
||||
<div style="display: flex; align-items: center;gap: 10px">
|
||||
<input
|
||||
type="color"
|
||||
{id}
|
||||
class="form-control form-control-color"
|
||||
style="border: none;background: transparent;padding: 0;width:64px;"
|
||||
disabled={field.readonly && !isCreateMode}
|
||||
bind:value
|
||||
/>
|
||||
</div>
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
class:is-invalid={errorMessage}
|
||||
{id}
|
||||
class="form-control"
|
||||
bind:value
|
||||
readonly={field.readonly && !isCreateMode}
|
||||
type="text"
|
||||
class:is-invalid={errorMessage}
|
||||
{id}
|
||||
class="form-control"
|
||||
bind:value
|
||||
readonly={field.readonly && !isCreateMode}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
<script>
|
||||
import {getContext} from "svelte";
|
||||
import {debounce} from "lodash";
|
||||
import {previewTitle} from "../Preview";
|
||||
|
||||
const channel = getContext("channel");
|
||||
export let field;
|
||||
|
||||
export let value;
|
||||
export let search;
|
||||
$: options = [];
|
||||
export const update = debounce((e) => {
|
||||
axios
|
||||
.get("/records/suggestions", {
|
||||
params: {
|
||||
schema: field.optionsFrom,
|
||||
field: field.optionsField,
|
||||
value: search,
|
||||
ui: field.ui,
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
options = response.data;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
}, 500);
|
||||
|
||||
function select(e, option) {
|
||||
e.preventDefault();
|
||||
value = option.data[field.optionsField];
|
||||
search = "";
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if field.optionsFrom}
|
||||
{#each options as option (option.id)}
|
||||
<div
|
||||
on:click={(e) => select(e, option)}
|
||||
on:keypress={(e) => select(e, option)}
|
||||
>
|
||||
<span class="dropdown-item">
|
||||
{previewTitle(channel.schemas, option)}
|
||||
<small class="text-muted "
|
||||
>{option.data[field.optionsField]}</small
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
{:else}
|
||||
{#if search && field.optionsSuggest}
|
||||
<div
|
||||
on:click={(e) => {
|
||||
value = search;
|
||||
search = "";
|
||||
}}
|
||||
on:keypress={(e) => {
|
||||
value = search;
|
||||
search = "";
|
||||
}}
|
||||
>
|
||||
<span class="dropdown-item">
|
||||
Add "{search}"
|
||||
</span>
|
||||
</div>
|
||||
{:else}
|
||||
No results
|
||||
{/if}
|
||||
{/each}
|
||||
{/if}
|
||||
@@ -1,21 +1,16 @@
|
||||
<script>
|
||||
import Datalist from "./Datalist.svelte";
|
||||
import {onMount} from "svelte";
|
||||
import flatpickr from "flatpickr";
|
||||
import "flatpickr/dist/flatpickr.css";
|
||||
import "flatpickr/dist/themes/light.css";
|
||||
import {getErrorMessage} from "./errorMessage";
|
||||
import Icon from "../../common/Icon.svelte";
|
||||
|
||||
export let field;
|
||||
export let value;
|
||||
export let id;
|
||||
export let isCreateMode;
|
||||
export let validationErrors;
|
||||
$: search = "";
|
||||
$: listMode = field.optionsFrom && !(field.readonly && !isCreateMode);
|
||||
$: errorMessage = getErrorMessage(validationErrors, field.name);
|
||||
let list;
|
||||
let pickerInput;
|
||||
let pickerInstance;
|
||||
let flatpickrOptions = {
|
||||
@@ -34,9 +29,7 @@
|
||||
|
||||
onMount(() => {
|
||||
if (!field.readonly || isCreateMode) {
|
||||
if (listMode) {
|
||||
flatpickrOptions.clickOpens = false;
|
||||
}
|
||||
|
||||
pickerInstance = flatpickr(pickerInput, flatpickrOptions);
|
||||
}
|
||||
});
|
||||
@@ -44,55 +37,8 @@
|
||||
|
||||
<div class="mb-0">
|
||||
|
||||
{#if listMode}
|
||||
<div class="dropdown d-flex">
|
||||
<input
|
||||
type="search"
|
||||
{id}
|
||||
on:keyup={list.update}
|
||||
on:focus={list.update}
|
||||
class="form-control dropdown-toggle"
|
||||
class:is-invalid={errorMessage}
|
||||
bind:value={search}
|
||||
bind:this={pickerInput}
|
||||
placeholder="Search for options"
|
||||
data-bs-toggle="dropdown"
|
||||
autocomplete="off"
|
||||
readonly={field.readonly && !isCreateMode}
|
||||
/>
|
||||
<button
|
||||
class="btn btn-light ms-1"
|
||||
on:click|preventDefault={(e) => pickerInstance.open()}
|
||||
>
|
||||
<Icon icon="calendar"/>
|
||||
</button>
|
||||
<ul class="dropdown-menu w-100">
|
||||
{#if field.optionsFrom}
|
||||
<Datalist
|
||||
{field}
|
||||
bind:this={list}
|
||||
bind:value
|
||||
bind:search
|
||||
/>
|
||||
{/if}
|
||||
</ul>
|
||||
</div>
|
||||
{#if value}
|
||||
<span class="badge rounded-pill bg-light text-dark fs-6 mt-3">
|
||||
<div class="d-flex align-items-center ">
|
||||
{value}
|
||||
<button
|
||||
on:click|preventDefault={(e) => (value = "")}
|
||||
type="button"
|
||||
class="btn-close btn-sm ms-1"
|
||||
style="font-size:10px"
|
||||
aria-label="Close"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
{/if}
|
||||
{:else}
|
||||
<input
|
||||
|
||||
<input
|
||||
type="text"
|
||||
{id}
|
||||
class="form-control"
|
||||
@@ -101,8 +47,7 @@
|
||||
bind:this={pickerInput}
|
||||
autocomplete="off"
|
||||
readonly={field.readonly && !isCreateMode}
|
||||
/>
|
||||
{/if}
|
||||
/>
|
||||
|
||||
{#if errorMessage}
|
||||
<div class="invalid-feedback d-block">
|
||||
|
||||
@@ -1,27 +1,21 @@
|
||||
<script>
|
||||
import Datalist from "./Datalist.svelte";
|
||||
import {onMount} from "svelte";
|
||||
import flatpickr from "flatpickr";
|
||||
import "flatpickr/dist/flatpickr.css";
|
||||
import "flatpickr/dist/themes/light.css";
|
||||
import {getErrorMessage} from "./errorMessage";
|
||||
import Icon from "../../common/Icon.svelte";
|
||||
|
||||
export let field;
|
||||
export let value;
|
||||
export let isCreateMode;
|
||||
export let validationErrors;
|
||||
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
||||
$: search = "";
|
||||
$: listMode = field.optionsFrom && !(field.readonly && !isCreateMode);
|
||||
$: errorMessage = getErrorMessage(validationErrors, field.name);
|
||||
|
||||
export let id;
|
||||
let list;
|
||||
let pickerInput;
|
||||
let pickerInstance;
|
||||
let flatpickrOptions = {
|
||||
enableTime: false,
|
||||
allowInput: true,
|
||||
altInput: true,
|
||||
altFormat: "Y-m-d H:i:S",
|
||||
@@ -41,64 +35,14 @@
|
||||
|
||||
onMount(() => {
|
||||
if (!field.readonly || isCreateMode) {
|
||||
if (listMode) {
|
||||
flatpickrOptions.clickOpens = false;
|
||||
}
|
||||
pickerInstance = flatpickr(pickerInput, flatpickrOptions);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="mb-0">
|
||||
{#if listMode}
|
||||
<div class="dropdown d-flex">
|
||||
<input
|
||||
type="search"
|
||||
{id}
|
||||
on:keyup={list.update}
|
||||
on:focus={list.update}
|
||||
class="form-control dropdown-toggle"
|
||||
class:is-invalid={errorMessage}
|
||||
bind:value={search}
|
||||
bind:this={pickerInput}
|
||||
placeholder="Search for options"
|
||||
data-bs-toggle="dropdown"
|
||||
autocomplete="off"
|
||||
readonly={field.readonly && !isCreateMode}
|
||||
/>
|
||||
<button
|
||||
class="btn btn-light ms-1"
|
||||
on:click|preventDefault={(e) => pickerInstance.open()}
|
||||
>
|
||||
<Icon icon="calendar"/>
|
||||
</button>
|
||||
<ul class="dropdown-menu w-100">
|
||||
{#if field.optionsFrom}
|
||||
<Datalist
|
||||
{field}
|
||||
bind:this={list}
|
||||
bind:value
|
||||
bind:search
|
||||
/>
|
||||
{/if}
|
||||
</ul>
|
||||
</div>
|
||||
{#if value}
|
||||
<span class="badge rounded-pill bg-light text-dark fs-6 mt-3">
|
||||
<div class="d-flex align-items-center ">
|
||||
{value}
|
||||
<button
|
||||
on:click|preventDefault={(e) => (value = "")}
|
||||
type="button"
|
||||
class="btn-close btn-sm ms-1"
|
||||
style="font-size:10px"
|
||||
aria-label="Close"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
{/if}
|
||||
{:else}
|
||||
<input
|
||||
|
||||
<input
|
||||
type="text"
|
||||
{id}
|
||||
class="form-control"
|
||||
@@ -107,10 +51,9 @@
|
||||
bind:this={pickerInput}
|
||||
autocomplete="off"
|
||||
readonly={field.readonly && !isCreateMode}
|
||||
/>
|
||||
{/if}
|
||||
<small class=" text-primary opacity-50"
|
||||
>Dates are displayed according to your timezone: {timezone}</small
|
||||
/>
|
||||
<span class="system-help-text"
|
||||
>Dates are displayed according to your timezone: {timezone}</span
|
||||
>
|
||||
|
||||
{#if errorMessage}
|
||||
|
||||
@@ -1,14 +1,11 @@
|
||||
<script>
|
||||
import Datalist from "./Datalist.svelte";
|
||||
import {getErrorMessage} from "./errorMessage";
|
||||
|
||||
export let field;
|
||||
export let value;
|
||||
export let schemas;
|
||||
export let validationErrors;
|
||||
export let isCreateMode;
|
||||
export let id;
|
||||
$: search = "";
|
||||
$: errorMessage = getErrorMessage(validationErrors, field.name);
|
||||
|
||||
let list;
|
||||
@@ -23,56 +20,11 @@
|
||||
return parseFloat(number).toFixed(field.decimals);
|
||||
}
|
||||
|
||||
$: listMode = field.optionsFrom && !(field.readonly && !isCreateMode);
|
||||
</script>
|
||||
|
||||
<div class="mb-0">
|
||||
|
||||
{#if listMode}
|
||||
<div class="dropdown">
|
||||
<input
|
||||
type="number"
|
||||
{id}
|
||||
on:keyup={list.update}
|
||||
on:focus={list.update}
|
||||
bind:value={search}
|
||||
placeholder="Search for options"
|
||||
class="form-control dropdown-toggle"
|
||||
class:is-invalid={errorMessage}
|
||||
data-bs-toggle="dropdown"
|
||||
autocomplete="off"
|
||||
readonly={field.readonly && !isCreateMode}
|
||||
/>
|
||||
|
||||
<ul class="dropdown-menu w-100">
|
||||
{#if field.optionsFrom}
|
||||
<Datalist
|
||||
{field}
|
||||
bind:this={list}
|
||||
{schemas}
|
||||
bind:value
|
||||
bind:search
|
||||
/>
|
||||
{/if}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{#if value}
|
||||
<span class="badge rounded-pill bg-light text-dark fs-6 mt-3">
|
||||
<div class="d-flex align-items-center ">
|
||||
{value}
|
||||
<button
|
||||
on:click|preventDefault={(e) => (value = "")}
|
||||
type="button"
|
||||
class="btn-close btn-sm ms-1"
|
||||
style="font-size:10px"
|
||||
aria-label="Close"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
{/if}
|
||||
{:else}
|
||||
<input
|
||||
<input
|
||||
type="number"
|
||||
{id}
|
||||
class="form-control"
|
||||
@@ -81,8 +33,7 @@
|
||||
bind:value
|
||||
autocomplete="off"
|
||||
readonly={field.readonly && !isCreateMode}
|
||||
/>
|
||||
{/if}
|
||||
/>
|
||||
|
||||
{#if errorMessage}
|
||||
<div class="invalid-feedback d-block">
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
import {createEventDispatcher, getContext} from "svelte";
|
||||
import Icon from "../../common/Icon.svelte";
|
||||
import InlineEdit from "../InlineEdit.svelte";
|
||||
import BrowseModal from "./BrowseModal.svelte";
|
||||
import Dialog from "../../dialog/Dialog.svelte";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
@@ -4,13 +4,14 @@
|
||||
import {previewTitle} from "../Preview";
|
||||
import {getErrorMessage} from "./errorMessage";
|
||||
import {insertEdges} from "./reference.js";
|
||||
import Icon from "../../common/Icon.svelte";
|
||||
|
||||
const channel = getContext("channel");
|
||||
export let field;
|
||||
export let id;
|
||||
export let record;
|
||||
export let graph;
|
||||
|
||||
let searchEl;
|
||||
export let validationErrors;
|
||||
$: errorMessage = getErrorMessage(validationErrors, field.name);
|
||||
|
||||
@@ -58,6 +59,9 @@
|
||||
function insert(e, insertRecord) {
|
||||
e.preventDefault();
|
||||
graph = insertEdges(graph, record, [insertRecord], field.name, e.detail.action);
|
||||
search = ""
|
||||
searchEl.focus()
|
||||
searchEl.blur()
|
||||
}
|
||||
|
||||
const updateResults = debounce((e) => {
|
||||
@@ -81,71 +85,81 @@
|
||||
|
||||
|
||||
</script>
|
||||
<div class="reference-tags">
|
||||
{#if errorMessage}
|
||||
<div class="invalid-feedback d-block mb-3">
|
||||
{errorMessage}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if errorMessage}
|
||||
<div class="invalid-feedback d-block mb-3">
|
||||
{errorMessage}
|
||||
</div>
|
||||
{/if}
|
||||
<input
|
||||
type="search"
|
||||
bind:this={searchEl}
|
||||
{id}
|
||||
on:keyup={updateResults}
|
||||
class:is-invalid={errorMessage}
|
||||
bind:value={search}
|
||||
placeholder={"Search for "+field.label}
|
||||
autocomplete="off"
|
||||
/>
|
||||
|
||||
<input
|
||||
type="search"
|
||||
{id}
|
||||
on:keyup={updateResults}
|
||||
class="form-control dropdown-toggle"
|
||||
class:is-invalid={errorMessage}
|
||||
bind:value={search}
|
||||
placeholder={"Search for "+field.label}
|
||||
data-bs-toggle="dropdown"
|
||||
autocomplete="off"
|
||||
readonly={field.readonly && !isCreateMode}
|
||||
/>
|
||||
<div class="reference-tags-results">
|
||||
|
||||
<div class="dropdown-menu w-100">
|
||||
|
||||
{#if searchOptions}
|
||||
{#each searchOptions as option (option.id)}
|
||||
<div
|
||||
on:click={(e) => insert(e, option)}
|
||||
on:keypress={(e) => insert(e, option)}
|
||||
>
|
||||
{#if searchOptions}
|
||||
{#each searchOptions as option (option.id)}
|
||||
<div
|
||||
class="reference-tags-option"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
on:click={(e) => insert(e, option)}
|
||||
on:keypress={(e) => insert(e, option)}
|
||||
>
|
||||
<span class="dropdown-item">
|
||||
{previewTitle(channel.schemas, option)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{:else}
|
||||
{:else}
|
||||
|
||||
Start typing...
|
||||
{/each}
|
||||
{/if}
|
||||
{#if search }
|
||||
<div
|
||||
on:click={(e) => saveNew(e,search)}
|
||||
on:keypress={(e) => saveNew(e,search)}
|
||||
>
|
||||
Start typing...
|
||||
{/each}
|
||||
{/if}
|
||||
{#if search }
|
||||
<div
|
||||
class="reference-tags-option"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
on:click={(e) => saveNew(e,search)}
|
||||
on:keypress={(e) => saveNew(e,search)}
|
||||
>
|
||||
<span class="dropdown-item">
|
||||
Add "{search}"
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{#if references.length > 0}
|
||||
<div class="d-flex">
|
||||
<div style="display: flex;align-items: center;gap: 4px">
|
||||
{#each references as record (record.id)}
|
||||
<span class="badge rounded-pill bg-light text-dark fs-6 mt-3">
|
||||
<div class="d-flex align-items-center ">
|
||||
<span class="autocomplete-selected-value">
|
||||
<a
|
||||
class="record-title"
|
||||
href="{channel.lucentUrl}/records/{record.id}"
|
||||
>
|
||||
{previewTitle(channel.schemas, record)}
|
||||
<button
|
||||
on:click|preventDefault={(e) => removeReference(e, record.id)}
|
||||
type="button"
|
||||
class="btn-close btn-sm ms-1"
|
||||
style="font-size:10px"
|
||||
aria-label="Close"
|
||||
/>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<button
|
||||
on:click|preventDefault={(e) => removeReference(e, record.id)}
|
||||
type="button"
|
||||
class="button-text"
|
||||
aria-label="Close"
|
||||
>
|
||||
<Icon width={12} height={12} icon="close"></Icon>
|
||||
</button>
|
||||
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
<script>
|
||||
export let field;
|
||||
export let value;
|
||||
export let search;
|
||||
|
||||
function select(e, option) {
|
||||
e.preventDefault();
|
||||
value = option;
|
||||
search = "";
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
{#if field.selectOptions}
|
||||
{#if Array.isArray(field.selectOptions)}
|
||||
{#each field.selectOptions as suggestion (suggestion)}
|
||||
<div
|
||||
on:click={(e) => select(e, suggestion)}
|
||||
on:keypress={(e) => select(e, suggestion)}
|
||||
>
|
||||
<span class="dropdown-item">
|
||||
{suggestion}
|
||||
</span>
|
||||
</div>
|
||||
{/each}
|
||||
{:else}
|
||||
{#each Object.entries(field.selectOptions) as [k, v] (k)}
|
||||
<div
|
||||
on:click={(e) => select(e, k)}
|
||||
on:keypress={(e) => select(e, k)}
|
||||
>
|
||||
<span class="dropdown-item">
|
||||
{v}
|
||||
</span>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
{/if}
|
||||
@@ -20,7 +20,9 @@
|
||||
autocomplete="off"
|
||||
readonly={field.readonly && !isCreateMode}
|
||||
/>
|
||||
|
||||
<div class="system-help-text">
|
||||
Leave this empty to autogenerate from <i>{field.source}</i>
|
||||
</div>
|
||||
{#if errorMessage}
|
||||
<div class="invalid-feedback d-block">
|
||||
{errorMessage}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<script>
|
||||
import Datalist from "./Datalist.svelte";
|
||||
import Selectlist from "./Selectlist.svelte";
|
||||
import {getErrorMessage} from "./errorMessage";
|
||||
import Autocomplete from "../../autocomplete/Autocomplete.svelte";
|
||||
|
||||
export let field;
|
||||
export let value;
|
||||
@@ -9,99 +8,13 @@
|
||||
export let validationErrors;
|
||||
|
||||
$: errorMessage = getErrorMessage(validationErrors, field.name);
|
||||
$: search = "";
|
||||
export let id;
|
||||
let list;
|
||||
|
||||
$: listMode = field.optionsFrom && !(field.readonly && !isCreateMode);
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<div class="mb-0">
|
||||
{#if listMode}
|
||||
<div class="dropdown">
|
||||
<input
|
||||
type="search"
|
||||
{id}
|
||||
on:keyup={list.update}
|
||||
on:focus={list.update}
|
||||
class="form-control dropdown-toggle"
|
||||
class:is-invalid={errorMessage}
|
||||
bind:value={search}
|
||||
placeholder="Search for options"
|
||||
data-bs-toggle="dropdown"
|
||||
autocomplete="off"
|
||||
readonly={field.readonly && !isCreateMode}
|
||||
/>
|
||||
|
||||
<div class="dropdown-menu w-100">
|
||||
{#if field.optionsFrom}
|
||||
<Datalist
|
||||
{field}
|
||||
bind:this={list}
|
||||
bind:value
|
||||
bind:search
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{#if value}
|
||||
<span class="badge rounded-pill bg-light text-dark fs-6 mt-3">
|
||||
<div class="d-flex align-items-center ">
|
||||
{value}
|
||||
<button
|
||||
on:click|preventDefault={(e) => (value = "")}
|
||||
type="button"
|
||||
class="btn-close btn-sm ms-1"
|
||||
style="font-size:10px"
|
||||
aria-label="Close"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
{/if}
|
||||
{:else if field.selectOptions}
|
||||
<div class="dropdown">
|
||||
<input
|
||||
type="search"
|
||||
{id}
|
||||
class="form-control dropdown-toggle"
|
||||
class:is-invalid={errorMessage}
|
||||
bind:value={search}
|
||||
placeholder="Search for options"
|
||||
data-bs-toggle="dropdown"
|
||||
autocomplete="off"
|
||||
readonly={field.readonly && !isCreateMode}
|
||||
/>
|
||||
<div class="dropdown-menu w-100">
|
||||
<Selectlist
|
||||
{field}
|
||||
bind:value
|
||||
bind:search
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{#if value}
|
||||
<span class="badge rounded-pill bg-light text-dark fs-6 mt-3">
|
||||
<div class="d-flex align-items-center ">
|
||||
{#if Array.isArray(field.selectOptions)}
|
||||
{value}
|
||||
{:else}
|
||||
{field.selectOptions[value]}
|
||||
{/if}
|
||||
|
||||
<button
|
||||
on:click|preventDefault={(e) => (value = "")}
|
||||
type="button"
|
||||
class="btn-close btn-sm ms-1"
|
||||
style="font-size:10px"
|
||||
aria-label="Close"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
{/if}
|
||||
<div style="position: relative;">
|
||||
{#if field.selectOptions}
|
||||
<Autocomplete {field} bind:value={value}></Autocomplete>
|
||||
{:else}
|
||||
<input
|
||||
type="text"
|
||||
|
||||
Generated
+9
@@ -6,6 +6,7 @@
|
||||
"": {
|
||||
"dependencies": {
|
||||
"@codemirror/lang-markdown": "^6.2.5",
|
||||
"fuse.js": "^7.0.0",
|
||||
"htmx.org": "^2.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -1259,6 +1260,14 @@
|
||||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/fuse.js": {
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.0.0.tgz",
|
||||
"integrity": "sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/glob-parent": {
|
||||
"version": "5.1.2",
|
||||
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
|
||||
|
||||
@@ -27,6 +27,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@codemirror/lang-markdown": "^6.2.5",
|
||||
"fuse.js": "^7.0.0",
|
||||
"htmx.org": "^2.0.1"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
.autocomplete {
|
||||
position: relative;
|
||||
z-index: 1000;
|
||||
overflow: visible;
|
||||
.autocomplete-option {
|
||||
cursor: pointer;
|
||||
}
|
||||
&:focus-within {
|
||||
.autocomplete-results{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.autocomplete-selected-value {
|
||||
font-size: 13px;
|
||||
margin-top: 10px;
|
||||
border-radius: 12px;
|
||||
background: var(--background);
|
||||
filter: brightness(97%);
|
||||
padding: 3px 10px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.autocomplete-selected-value:hover {
|
||||
opacity: .8;
|
||||
background-color: #eee;
|
||||
}
|
||||
.autocomplete-results {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
overflow: visible;
|
||||
position: absolute;
|
||||
border-radius: 12px;
|
||||
z-index: 20;
|
||||
background: var(--background);
|
||||
filter: brightness(97%);
|
||||
transition: 600ms;
|
||||
flex-grow: 1;
|
||||
top: 45px;
|
||||
min-width: max-content;
|
||||
}
|
||||
@@ -1,10 +1,9 @@
|
||||
.button{
|
||||
border-radius: 12px;
|
||||
background: var(--background);
|
||||
background: var(--background-button);
|
||||
padding: 3px 10px;
|
||||
cursor: pointer;
|
||||
filter: brightness(97%);
|
||||
border: none;
|
||||
border: 1px solid var(--border-color);
|
||||
font-size: 14px;
|
||||
min-height: 27px;
|
||||
display: flex;
|
||||
|
||||
@@ -22,7 +22,7 @@ dialog {
|
||||
overflow: auto;
|
||||
max-height: 96vh;
|
||||
//position: relative;
|
||||
|
||||
z-index: 2;
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
|
||||
@@ -5,11 +5,11 @@ label {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
input[type=text]{
|
||||
input[type=text],input[type=number],input[type=search],textarea{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type=text],textarea{
|
||||
input[type=text],input[type=number],input[type=search],textarea{
|
||||
background: var(--input-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 5px;
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
.sidebar-content{
|
||||
min-width: 300px;
|
||||
max-width: 400px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
width: 100%;
|
||||
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
@@ -13,4 +14,5 @@
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
}
|
||||
@@ -3,7 +3,7 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
background: var(--background);
|
||||
background: var(--background-2);
|
||||
border-radius: 12px;
|
||||
.image{
|
||||
|
||||
@@ -18,14 +18,14 @@
|
||||
}
|
||||
|
||||
&:hover{
|
||||
filter: brightness(95%);
|
||||
background: var(--background-3);
|
||||
.trash-action{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.preview-reference{
|
||||
filter: brightness(97%);
|
||||
background: var(--background-2);
|
||||
padding: 10px 20px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.record-edit {
|
||||
position: relative;
|
||||
|
||||
.invalid-feedback{
|
||||
.invalid-feedback {
|
||||
color: var(--error);
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
@@ -38,43 +38,69 @@
|
||||
}
|
||||
|
||||
.editor-field {
|
||||
background: var(--background);
|
||||
filter: brightness(97%);
|
||||
background: var(--background-stack);
|
||||
padding: 18px;
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
margin: 6px 0;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.field-header{
|
||||
.field-header {
|
||||
margin-bottom: 4px;
|
||||
.labels{
|
||||
position: relative;
|
||||
|
||||
.labels {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.label-and-help{
|
||||
|
||||
.label-and-help {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
label{font-size: 14px;line-height: 14px;margin: 0;font-weight: 700;}
|
||||
.help-text{font-size: 14px;opacity: .7;line-height: 14px}
|
||||
code{}
|
||||
|
||||
label {
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.help-text {
|
||||
font-size: 14px;
|
||||
opacity: .7;
|
||||
line-height: 14px
|
||||
}
|
||||
|
||||
code {
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.field-checkbox{
|
||||
.system-help-text {
|
||||
font-size: 14px;
|
||||
opacity: .7;
|
||||
line-height: 14px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
.field-checkbox {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
|
||||
.form-check-inline{
|
||||
.form-check-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.form-check-label{
|
||||
.form-check-label {
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
.reference-tags {
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
.reference-tags-option {
|
||||
cursor: pointer;
|
||||
}
|
||||
&:focus-within {
|
||||
.reference-tags-results{
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.reference-tags-selected-value {
|
||||
font-size: 13px;
|
||||
margin-top: 10px;
|
||||
border-radius: 12px;
|
||||
background: var(--background);
|
||||
filter: brightness(97%);
|
||||
padding: 3px 10px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.reference-tags-selected-value:hover {
|
||||
opacity: .8;
|
||||
background-color: #eee;
|
||||
}
|
||||
.reference-tags-results {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
overflow: visible;
|
||||
position: absolute;
|
||||
border-radius: 12px;
|
||||
z-index: 20;
|
||||
background: var(--background);
|
||||
filter: brightness(97%);
|
||||
transition: 600ms;
|
||||
flex-grow: 1;
|
||||
top: 45px;
|
||||
min-width: max-content;
|
||||
}
|
||||
+107
-94
@@ -13,81 +13,82 @@ $danger: red;
|
||||
|
||||
/* SCSS Gradient */
|
||||
$gradient-top: linear-gradient(
|
||||
0deg,
|
||||
#0dab76ff,
|
||||
#139a43ff,
|
||||
#0b5d1eff,
|
||||
#053b06ff,
|
||||
#000000ff
|
||||
0deg,
|
||||
#0dab76ff,
|
||||
#139a43ff,
|
||||
#0b5d1eff,
|
||||
#053b06ff,
|
||||
#000000ff
|
||||
);
|
||||
$gradient-right: linear-gradient(
|
||||
90deg,
|
||||
#0dab76ff,
|
||||
#139a43ff,
|
||||
#0b5d1eff,
|
||||
#053b06ff,
|
||||
#000000ff
|
||||
90deg,
|
||||
#0dab76ff,
|
||||
#139a43ff,
|
||||
#0b5d1eff,
|
||||
#053b06ff,
|
||||
#000000ff
|
||||
);
|
||||
$gradient-bottom: linear-gradient(
|
||||
180deg,
|
||||
#0dab76ff,
|
||||
#139a43ff,
|
||||
#0b5d1eff,
|
||||
#053b06ff,
|
||||
#000000ff
|
||||
180deg,
|
||||
#0dab76ff,
|
||||
#139a43ff,
|
||||
#0b5d1eff,
|
||||
#053b06ff,
|
||||
#000000ff
|
||||
);
|
||||
$gradient-left: linear-gradient(
|
||||
270deg,
|
||||
#0dab76ff,
|
||||
#139a43ff,
|
||||
#0b5d1eff,
|
||||
#053b06ff,
|
||||
#000000ff
|
||||
270deg,
|
||||
#0dab76ff,
|
||||
#139a43ff,
|
||||
#0b5d1eff,
|
||||
#053b06ff,
|
||||
#000000ff
|
||||
);
|
||||
$gradient-top-right: linear-gradient(
|
||||
45deg,
|
||||
#0dab76ff,
|
||||
#139a43ff,
|
||||
#0b5d1eff,
|
||||
#053b06ff,
|
||||
#000000ff
|
||||
45deg,
|
||||
#0dab76ff,
|
||||
#139a43ff,
|
||||
#0b5d1eff,
|
||||
#053b06ff,
|
||||
#000000ff
|
||||
);
|
||||
$gradient-bottom-right: linear-gradient(
|
||||
135deg,
|
||||
#0dab76ff,
|
||||
#139a43ff,
|
||||
#0b5d1eff,
|
||||
#053b06ff,
|
||||
#000000ff
|
||||
135deg,
|
||||
#0dab76ff,
|
||||
#139a43ff,
|
||||
#0b5d1eff,
|
||||
#053b06ff,
|
||||
#000000ff
|
||||
);
|
||||
$gradient-top-left: linear-gradient(
|
||||
225deg,
|
||||
#0dab76ff,
|
||||
#139a43ff,
|
||||
#0b5d1eff,
|
||||
#053b06ff,
|
||||
#000000ff
|
||||
225deg,
|
||||
#0dab76ff,
|
||||
#139a43ff,
|
||||
#0b5d1eff,
|
||||
#053b06ff,
|
||||
#000000ff
|
||||
);
|
||||
$gradient-bottom-left: linear-gradient(
|
||||
315deg,
|
||||
#0dab76ff,
|
||||
#139a43ff,
|
||||
#0b5d1eff,
|
||||
#053b06ff,
|
||||
#000000ff
|
||||
315deg,
|
||||
#0dab76ff,
|
||||
#139a43ff,
|
||||
#0b5d1eff,
|
||||
#053b06ff,
|
||||
#000000ff
|
||||
);
|
||||
$gradient-radial: radial-gradient(
|
||||
#0dab76ff,
|
||||
#139a43ff,
|
||||
#0b5d1eff,
|
||||
#053b06ff,
|
||||
#000000ff
|
||||
#0dab76ff,
|
||||
#139a43ff,
|
||||
#0b5d1eff,
|
||||
#053b06ff,
|
||||
#000000ff
|
||||
);
|
||||
|
||||
$primary: #5b86be;
|
||||
$secondary: #d9cca1;
|
||||
$success: #80c671;
|
||||
$background: #f4f6fa;
|
||||
|
||||
$table-striped-bg-factor: 0.03;
|
||||
$dropdown-bg: rgb(206, 223, 210);
|
||||
|
||||
@@ -109,24 +110,28 @@ $themes: (
|
||||
accent: #488e39,
|
||||
),
|
||||
);
|
||||
:root{
|
||||
--linearPrimarySecondary: linear-gradient(#5b86be, #d9cca1);
|
||||
--linearPrimaryAccent: linear-gradient(#5b86be, #80c671);
|
||||
--linearSecondaryAccent: linear-gradient(#d9cca1, #80c671);
|
||||
--radialPrimarySecondary: radial-gradient(#5b86be, #d9cca1);
|
||||
--radialPrimaryAccent: radial-gradient(#5b86be, #80c671);
|
||||
--radialSecondaryAccent: radial-gradient(#d9cca1, #80c671);
|
||||
--border-color: #ccc;
|
||||
--main-font: ‘Open Sans‘, Arial, Helvetica, sans-serif;
|
||||
--main-font-color: #444;
|
||||
--input-bg: rgb(245,245,249);
|
||||
--text: #010b05;
|
||||
--background: #f7fefa;
|
||||
--primary: #1ce776;
|
||||
--secondary: #7bc8f1;
|
||||
--accent: #5086ed;
|
||||
--success: #80c671;
|
||||
--error: red;
|
||||
:root {
|
||||
--linearPrimarySecondary: linear-gradient(#5b86be, #d9cca1);
|
||||
--linearPrimaryAccent: linear-gradient(#5b86be, #80c671);
|
||||
--linearSecondaryAccent: linear-gradient(#d9cca1, #80c671);
|
||||
--radialPrimarySecondary: radial-gradient(#5b86be, #d9cca1);
|
||||
--radialPrimaryAccent: radial-gradient(#5b86be, #80c671);
|
||||
--radialSecondaryAccent: radial-gradient(#d9cca1, #80c671);
|
||||
--border-color: #cecece;
|
||||
--main-font: ‘Open Sans‘, Arial, Helvetica, sans-serif;
|
||||
--main-font-color: #444;
|
||||
--input-bg: rgb(245, 245, 249);
|
||||
--text: #010b05;
|
||||
--background: #f7fefa;
|
||||
--background-stack: #f0f6f3;
|
||||
--background-2: #E8EBEAFF;
|
||||
--background-3: #C2C7C5FF;
|
||||
--background-button: #ddd;
|
||||
--primary: #1ce776;
|
||||
--secondary: #7bc8f1;
|
||||
--accent: #5086ed;
|
||||
--success: #80c671;
|
||||
--error: red;
|
||||
|
||||
}
|
||||
|
||||
@@ -154,45 +159,53 @@ $themes: (
|
||||
@import "./switch";
|
||||
@import "./preview";
|
||||
@import "./dialog";
|
||||
@import "./autocomplete";
|
||||
@import "./reference-tags";
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
font-family: var(--main-font), sans-serif;
|
||||
background-color: var(--background);
|
||||
font-family: var(--main-font), sans-serif;
|
||||
}
|
||||
|
||||
.btn-spinner .spinner-border {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-spinner.spinner-on .spinner-border {
|
||||
display: inline-block;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
a{
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
a {
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.spinner-border {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border: 2px solid #FFF;
|
||||
border-bottom-color: #FF3D00;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
animation: rotation 1s linear infinite;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border: 2px solid #FFF;
|
||||
border-bottom-color: #FF3D00;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
animation: rotation 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.lucent-component {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user