divhunt 2.0.5 → 2.0.6

package/addons/render/elements/front/items/self/form/button/styles/variants.css

@@ -1,421 +0,0 @@
-/* ============================================
-   SOLID VARIANTS - Bold, confident, primary actions
-   ============================================ */
-
-/* Brand */
-.e-593be338 > .holder[variant*="brand"]
-{
-	background: var(--dh-brand);
-	border-color: var(--dh-brand);
-	color: white;
-	box-shadow:
-		0 1px 2px rgba(0, 0, 0, 0.1),
-		0 2px 8px var(--dh-brand-opacity);
-}
-
-.e-593be338 > .holder[variant*="brand"] > .content > i,
-.e-593be338 > .holder[variant*="brand"] > .spinner > i
-{
-	color: white;
-}
-
-.e-593be338 > .holder[variant*="brand"]:hover
-{
-	background: var(--dh-brand-hover);
-	border-color: var(--dh-brand-hover);
-	box-shadow:
-		0 4px 12px var(--dh-brand-opacity),
-		0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.e-593be338 > .holder[variant*="brand"]:focus-visible
-{
-	box-shadow:
-		0 0 0 2px var(--dh-bg-1),
-		0 0 0 4px var(--dh-brand);
-}
-
-/* Blue */
-.e-593be338 > .holder[variant*="blue"]:not([variant*="soft-blue"]):not([variant*="outline-blue"])
-{
-	background: var(--dh-blue);
-	border-color: var(--dh-blue);
-	color: white;
-	box-shadow:
-		0 1px 2px rgba(0, 0, 0, 0.1),
-		0 2px 8px var(--dh-blue-opacity);
-}
-
-.e-593be338 > .holder[variant*="blue"]:not([variant*="soft-blue"]):not([variant*="outline-blue"]) > .content > i,
-.e-593be338 > .holder[variant*="blue"]:not([variant*="soft-blue"]):not([variant*="outline-blue"]) > .spinner > i
-{
-	color: white;
-}
-
-.e-593be338 > .holder[variant*="blue"]:not([variant*="soft-blue"]):not([variant*="outline-blue"]):hover
-{
-	background: var(--dh-blue-hover);
-	border-color: var(--dh-blue-hover);
-	box-shadow:
-		0 4px 12px var(--dh-blue-opacity),
-		0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.e-593be338 > .holder[variant*="blue"]:focus-visible
-{
-	box-shadow:
-		0 0 0 2px var(--dh-bg-1),
-		0 0 0 4px var(--dh-blue);
-}
-
-/* Red */
-.e-593be338 > .holder[variant*="red"]:not([variant*="soft-red"]):not([variant*="outline-red"])
-{
-	background: var(--dh-red);
-	border-color: var(--dh-red);
-	color: white;
-	box-shadow:
-		0 1px 2px rgba(0, 0, 0, 0.1),
-		0 2px 8px var(--dh-red-opacity);
-}
-
-.e-593be338 > .holder[variant*="red"]:not([variant*="soft-red"]):not([variant*="outline-red"]) > .content > i,
-.e-593be338 > .holder[variant*="red"]:not([variant*="soft-red"]):not([variant*="outline-red"]) > .spinner > i
-{
-	color: white;
-}
-
-.e-593be338 > .holder[variant*="red"]:not([variant*="soft-red"]):not([variant*="outline-red"]):hover
-{
-	background: var(--dh-red-hover);
-	border-color: var(--dh-red-hover);
-	box-shadow:
-		0 4px 12px var(--dh-red-opacity),
-		0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.e-593be338 > .holder[variant*="red"]:focus-visible
-{
-	box-shadow:
-		0 0 0 2px var(--dh-bg-1),
-		0 0 0 4px var(--dh-red);
-}
-
-/* Orange */
-.e-593be338 > .holder[variant*="orange"]:not([variant*="soft-orange"]):not([variant*="outline-orange"])
-{
-	background: var(--dh-orange);
-	border-color: var(--dh-orange);
-	color: white;
-	box-shadow:
-		0 1px 2px rgba(0, 0, 0, 0.1),
-		0 2px 8px var(--dh-orange-opacity);
-}
-
-.e-593be338 > .holder[variant*="orange"]:not([variant*="soft-orange"]):not([variant*="outline-orange"]) > .content > i,
-.e-593be338 > .holder[variant*="orange"]:not([variant*="soft-orange"]):not([variant*="outline-orange"]) > .spinner > i
-{
-	color: white;
-}
-
-.e-593be338 > .holder[variant*="orange"]:not([variant*="soft-orange"]):not([variant*="outline-orange"]):hover
-{
-	background: var(--dh-orange-hover);
-	border-color: var(--dh-orange-hover);
-	box-shadow:
-		0 4px 12px var(--dh-orange-opacity),
-		0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.e-593be338 > .holder[variant*="orange"]:focus-visible
-{
-	box-shadow:
-		0 0 0 2px var(--dh-bg-1),
-		0 0 0 4px var(--dh-orange);
-}
-
-/* Green */
-.e-593be338 > .holder[variant*="green"]:not([variant*="soft-green"]):not([variant*="outline-green"])
-{
-	background: var(--dh-green);
-	border-color: var(--dh-green);
-	color: white;
-	box-shadow:
-		0 1px 2px rgba(0, 0, 0, 0.1),
-		0 2px 8px var(--dh-green-opacity);
-}
-
-.e-593be338 > .holder[variant*="green"]:not([variant*="soft-green"]):not([variant*="outline-green"]) > .content > i,
-.e-593be338 > .holder[variant*="green"]:not([variant*="soft-green"]):not([variant*="outline-green"]) > .spinner > i
-{
-	color: white;
-}
-
-.e-593be338 > .holder[variant*="green"]:not([variant*="soft-green"]):not([variant*="outline-green"]):hover
-{
-	background: var(--dh-green-hover);
-	border-color: var(--dh-green-hover);
-	box-shadow:
-		0 4px 12px var(--dh-green-opacity),
-		0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.e-593be338 > .holder[variant*="green"]:focus-visible
-{
-	box-shadow:
-		0 0 0 2px var(--dh-bg-1),
-		0 0 0 4px var(--dh-green);
-}
-
-
-/* ============================================
-   SOFT VARIANTS - Subtle, secondary actions
-   ============================================ */
-
-.e-593be338 > .holder[variant*="soft-brand"]
-{
-	background: var(--dh-brand-opacity);
-	border-color: transparent;
-	color: var(--dh-brand);
-}
-
-.e-593be338 > .holder[variant*="soft-brand"]:hover
-{
-	background: var(--dh-brand);
-	color: white;
-}
-
-.e-593be338 > .holder[variant*="soft-blue"]
-{
-	background: var(--dh-blue-opacity);
-	border-color: transparent;
-	color: var(--dh-blue);
-}
-
-.e-593be338 > .holder[variant*="soft-blue"]:hover
-{
-	background: var(--dh-blue);
-	color: white;
-}
-
-.e-593be338 > .holder[variant*="soft-red"]
-{
-	background: var(--dh-red-opacity);
-	border-color: transparent;
-	color: var(--dh-red);
-}
-
-.e-593be338 > .holder[variant*="soft-red"]:hover
-{
-	background: var(--dh-red);
-	color: white;
-}
-
-.e-593be338 > .holder[variant*="soft-orange"]
-{
-	background: var(--dh-orange-opacity);
-	border-color: transparent;
-	color: var(--dh-orange);
-}
-
-.e-593be338 > .holder[variant*="soft-orange"]:hover
-{
-	background: var(--dh-orange);
-	color: white;
-}
-
-.e-593be338 > .holder[variant*="soft-green"]
-{
-	background: var(--dh-green-opacity);
-	border-color: transparent;
-	color: var(--dh-green);
-}
-
-.e-593be338 > .holder[variant*="soft-green"]:hover
-{
-	background: var(--dh-green);
-	color: white;
-}
-
-
-/* ============================================
-   OUTLINE VARIANTS - Bordered, tertiary actions
-   ============================================ */
-
-.e-593be338 > .holder[variant*="outline-brand"]
-{
-	background: transparent;
-	border-color: var(--dh-brand);
-	color: var(--dh-brand);
-}
-
-.e-593be338 > .holder[variant*="outline-brand"]:hover
-{
-	background: var(--dh-brand-opacity);
-}
-
-.e-593be338 > .holder[variant*="outline-blue"]
-{
-	background: transparent;
-	border-color: var(--dh-blue);
-	color: var(--dh-blue);
-}
-
-.e-593be338 > .holder[variant*="outline-blue"]:hover
-{
-	background: var(--dh-blue-opacity);
-}
-
-.e-593be338 > .holder[variant*="outline-red"]
-{
-	background: transparent;
-	border-color: var(--dh-red);
-	color: var(--dh-red);
-}
-
-.e-593be338 > .holder[variant*="outline-red"]:hover
-{
-	background: var(--dh-red-opacity);
-}
-
-.e-593be338 > .holder[variant*="outline-orange"]
-{
-	background: transparent;
-	border-color: var(--dh-orange);
-	color: var(--dh-orange);
-}
-
-.e-593be338 > .holder[variant*="outline-orange"]:hover
-{
-	background: var(--dh-orange-opacity);
-}
-
-.e-593be338 > .holder[variant*="outline-green"]
-{
-	background: transparent;
-	border-color: var(--dh-green);
-	color: var(--dh-green);
-}
-
-.e-593be338 > .holder[variant*="outline-green"]:hover
-{
-	background: var(--dh-green-opacity);
-}
-
-
-/* ============================================
-   BACKGROUND VARIANTS - Neutral surface buttons
-   ============================================ */
-
-.e-593be338 > .holder[variant*="bg-1"]
-{
-	background: var(--dh-bg-1);
-	border-color: var(--dh-bg-1-border);
-	color: var(--dh-text-1);
-}
-
-.e-593be338 > .holder[variant*="bg-1"]:hover
-{
-	background: var(--dh-bg-1-hover);
-	border-color: var(--dh-bg-2-border);
-}
-
-.e-593be338 > .holder[variant*="bg-2"]
-{
-	background: var(--dh-bg-2);
-	border-color: var(--dh-bg-2-border);
-	color: var(--dh-text-1);
-}
-
-.e-593be338 > .holder[variant*="bg-2"]:hover
-{
-	background: var(--dh-bg-2-hover);
-	border-color: var(--dh-bg-3-border);
-}
-
-.e-593be338 > .holder[variant*="bg-3"]
-{
-	background: var(--dh-bg-3);
-	border-color: var(--dh-bg-3-border);
-	color: var(--dh-text-1);
-}
-
-.e-593be338 > .holder[variant*="bg-3"]:hover
-{
-	background: var(--dh-bg-3-hover);
-	border-color: var(--dh-bg-4-border);
-}
-
-.e-593be338 > .holder[variant*="bg-4"]
-{
-	background: var(--dh-bg-4);
-	border-color: var(--dh-bg-4-border);
-	color: var(--dh-text-1);
-}
-
-.e-593be338 > .holder[variant*="bg-4"]:hover
-{
-	background: var(--dh-bg-4-hover);
-}
-
-
-/* ============================================
-   SPECIAL VARIANTS
-   ============================================ */
-
-/* Ghost - minimal, text-like */
-.e-593be338 > .holder[variant*="ghost"]
-{
-	background: transparent;
-	border-color: transparent;
-	color: var(--dh-text-2);
-}
-
-.e-593be338 > .holder[variant*="ghost"]:hover
-{
-	background: var(--dh-bg-2);
-	color: var(--dh-text-1);
-}
-
-/* Border - neutral outlined */
-.e-593be338 > .holder[variant*="border"]
-{
-	background: transparent;
-	border-color: var(--dh-bg-1-border);
-	color: var(--dh-text-1);
-}
-
-.e-593be338 > .holder[variant*="border"]:hover
-{
-	background: var(--dh-bg-2);
-	border-color: var(--dh-bg-3-border);
-}
-
-/* Transparent - no background, subtle hover */
-.e-593be338 > .holder[variant*="transparent"]
-{
-	background: transparent;
-	border-color: transparent;
-	color: var(--dh-text-1);
-}
-
-.e-593be338 > .holder[variant*="transparent"]:hover
-{
-	background: var(--dh-bg-2-opacity);
-}
-
-/* Glass - frosted glass effect */
-.e-593be338 > .holder[variant*="glass"]
-{
-	background: var(--dh-bg-1-opacity);
-	border-color: var(--dh-bg-2-border);
-	color: var(--dh-text-1);
-	backdrop-filter: blur(12px);
-	-webkit-backdrop-filter: blur(12px);
-}
-
-.e-593be338 > .holder[variant*="glass"]:hover
-{
-	background: var(--dh-bg-2-opacity);
-	border-color: var(--dh-bg-3-border);
-}

package/addons/render/elements/front/items/self/form/checkbox/checkbox.js

@@ -1,57 +0,0 @@
-import elements from '#elements/load.js';
-
-elements.ItemAdd({
-    id: 'checkbox',
-    icon: 'check_box',
-    name: 'Checkbox',
-    description: 'Checkbox input with custom styling, indeterminate state support, and variant options for different UI themes.',
-    category: 'Form',
-    author: 'Divhunt',
-    config: {
-        name: {
-            type: 'string'
-        },
-        value: {
-            type: 'string'
-        },
-        checked: {
-            type: 'boolean'
-        },
-        disabled: {
-            type: 'boolean'
-        },
-        variant: {
-            type: 'array',
-            value: ['bg-1'],
-            options: ['transparent', 'border', 'bg-1', 'bg-2', 'bg-3', 'bg-4']
-        },
-        size: {
-            type: 'string',
-            value: 'm',
-            options: ['s', 'm', 'l']
-        },
-        onChange: {
-            type: 'function'
-        },
-        onClick: {
-            type: 'function'
-        }
-    },
-    render: function()
-    {
-        return `
-            <div class="holder" :variant="variant.join(' ')" :size="size">
-                <input
-                    type="checkbox"
-                    :name="name"
-                    :value="value"
-                    :checked="checked"
-                    :disabled="disabled"
-                    dh-change="onChange"
-                    dh-click="onClick"
-                />
-                <span class="checkbox-mark"></span>
-            </div>
-        `;
-    }
-});

package/addons/render/elements/front/items/self/form/checkbox/styles/base.css

@@ -1,52 +0,0 @@
-.r51d47f16 > .holder
-{
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-}
-
-.r51d47f16 input[type="checkbox"]
-{
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    width: 100%;
-    height: 100%;
-    z-index: 1;
-}
-
-.r51d47f16 .checkbox-mark
-{
-    display: block;
-    border-radius: var(--dh-radius-s);
-    border: 1px solid;
-    transition: all 0.2s ease;
-    position: relative;
-}
-
-.r51d47f16 .checkbox-mark::after
-{
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%) scale(0);
-    width: 4px;
-    height: 8px;
-    border: solid;
-    border-width: 0 2px 2px 0;
-    transform: translate(-50%, -60%) rotate(45deg) scale(0);
-    transition: all 0.2s ease;
-}
-
-.r51d47f16 input[type="checkbox"]:checked ~ .checkbox-mark::after
-{
-    transform: translate(-50%, -60%) rotate(45deg) scale(1);
-}
-
-.r51d47f16 input[type="checkbox"]:disabled ~ .checkbox-mark
-{
-    opacity: 0.5;
-    cursor: not-allowed;
-}

package/addons/render/elements/front/items/self/form/checkbox/styles/sizes.css

@@ -1,39 +0,0 @@
-/* Sizes */
-.r51d47f16 > .holder[size="s"] .checkbox-mark
-{
-    width: 16px;
-    height: 16px;
-}
-
-.r51d47f16 > .holder[size="s"] .checkbox-mark::after
-{
-    width: 3px;
-    height: 6px;
-    border-width: 0 1.5px 1.5px 0;
-}
-
-.r51d47f16 > .holder[size="m"] .checkbox-mark
-{
-    width: 20px;
-    height: 20px;
-}
-
-.r51d47f16 > .holder[size="m"] .checkbox-mark::after
-{
-    width: 4px;
-    height: 8px;
-    border-width: 0 2px 2px 0;
-}
-
-.r51d47f16 > .holder[size="l"] .checkbox-mark
-{
-    width: 24px;
-    height: 24px;
-}
-
-.r51d47f16 > .holder[size="l"] .checkbox-mark::after
-{
-    width: 5px;
-    height: 10px;
-    border-width: 0 2.5px 2.5px 0;
-}

package/addons/render/elements/front/items/self/form/checkbox/styles/variants.css

@@ -1,121 +0,0 @@
-/* Variants */
-.r51d47f16 > .holder[variant="transparent"] .checkbox-mark
-{
-    background: transparent;
-    border-color: transparent;
-}
-
-.r51d47f16 > .holder[variant="transparent"] .checkbox-mark::after
-{
-    border-color: var(--dh-text-1);
-}
-
-.r51d47f16 > .holder[variant="border"] .checkbox-mark
-{
-    background: transparent;
-    border-color: var(--dh-bg-1-border);
-}
-
-.r51d47f16 > .holder[variant="border"]:hover .checkbox-mark
-{
-    border-color: var(--dh-bg-2-border);
-}
-
-.r51d47f16 > .holder[variant="border"] input[type="checkbox"]:checked ~ .checkbox-mark
-{
-    border-color: var(--dh-brand);
-    background: var(--dh-brand);
-}
-
-.r51d47f16 > .holder[variant="border"] .checkbox-mark::after
-{
-    border-color: white;
-}
-
-.r51d47f16 > .holder[variant="bg-1"] .checkbox-mark
-{
-    background: var(--dh-bg-1);
-    border-color: var(--dh-bg-1-border);
-}
-
-.r51d47f16 > .holder[variant="bg-1"]:hover .checkbox-mark
-{
-    background: var(--dh-bg-1-hover);
-}
-
-.r51d47f16 > .holder[variant="bg-1"] input[type="checkbox"]:checked ~ .checkbox-mark
-{
-    border-color: var(--dh-brand);
-    background: var(--dh-brand);
-}
-
-.r51d47f16 > .holder[variant="bg-1"] .checkbox-mark::after
-{
-    border-color: white;
-}
-
-.r51d47f16 > .holder[variant="bg-2"] .checkbox-mark
-{
-    background: var(--dh-bg-2);
-    border-color: var(--dh-bg-2-border);
-}
-
-.r51d47f16 > .holder[variant="bg-2"]:hover .checkbox-mark
-{
-    background: var(--dh-bg-2-hover);
-}
-
-.r51d47f16 > .holder[variant="bg-2"] input[type="checkbox"]:checked ~ .checkbox-mark
-{
-    border-color: var(--dh-brand);
-    background: var(--dh-brand);
-}
-
-.r51d47f16 > .holder[variant="bg-2"] .checkbox-mark::after
-{
-    border-color: white;
-}
-
-.r51d47f16 > .holder[variant="bg-3"] .checkbox-mark
-{
-    background: var(--dh-bg-3);
-    border-color: var(--dh-bg-3-border);
-}
-
-.r51d47f16 > .holder[variant="bg-3"]:hover .checkbox-mark
-{
-    background: var(--dh-bg-3-hover);
-}
-
-.r51d47f16 > .holder[variant="bg-3"] input[type="checkbox"]:checked ~ .checkbox-mark
-{
-    border-color: var(--dh-brand);
-    background: var(--dh-brand);
-}
-
-.r51d47f16 > .holder[variant="bg-3"] .checkbox-mark::after
-{
-    border-color: white;
-}
-
-.r51d47f16 > .holder[variant="bg-4"] .checkbox-mark
-{
-    background: var(--dh-bg-4);
-    border-color: var(--dh-bg-4-border);
-}
-
-.r51d47f16 > .holder[variant="bg-4"]:hover .checkbox-mark
-{
-    background: var(--dh-bg-4-hover);
-}
-
-.r51d47f16 > .holder[variant="bg-4"] input[type="checkbox"]:checked ~ .checkbox-mark
-{
-    border-color: var(--dh-brand);
-    background: var(--dh-brand);
-}
-
-.r51d47f16 > .holder[variant="bg-4"] .checkbox-mark::after
-{
-    border-color: white;
-}