@onetype/framework 2.0.41 → 2.0.42

package/lib/items/elements/form/input/styles/variants.css

@@ -1,98 +0,0 @@
-/* Variants */
-.e-20dcefe9 > .holder[variant="transparent"] input
-{
-    background: transparent;
-    border-color: transparent;
-    padding: 0;
-}
-
-.e-20dcefe9 > .holder[variant="transparent"] input:hover
-{
-    background: transparent;
-}
-
-.e-20dcefe9 > .holder[variant="transparent"] input:focus
-{
-    border-color: transparent;
-}
-
-.e-20dcefe9 > .holder[variant="border"] input
-{
-    background: transparent;
-    border-color: var(--ot-bg-1-border);
-}
-
-.e-20dcefe9 > .holder[variant="border"] input:hover
-{
-    background: transparent;
-    border-color: var(--ot-bg-2-border);
-}
-
-.e-20dcefe9 > .holder[variant="border"] input:focus
-{
-    border-color: var(--ot-brand);
-}
-
-.e-20dcefe9 > .holder[variant="bg-1"] input
-{
-    background: var(--ot-bg-1);
-    border-color: var(--ot-bg-1-border);
-}
-
-.e-20dcefe9 > .holder[variant="bg-1"] input:hover
-{
-    background: var(--ot-bg-1-hover);
-}
-
-.e-20dcefe9 > .holder[variant="bg-1"] input:focus
-{
-    border-color: var(--ot-brand);
-}
-
-.e-20dcefe9 > .holder[variant="bg-2"] input
-{
-    background: var(--ot-bg-2);
-    border-color: var(--ot-bg-2-border);
-}
-
-.e-20dcefe9 > .holder[variant="bg-2"] input:hover
-{
-    background: var(--ot-bg-2-hover);
-}
-
-.e-20dcefe9 > .holder[variant="bg-2"] input:focus
-{
-    border-color: var(--ot-brand);
-}
-
-.e-20dcefe9 > .holder[variant="bg-3"] input
-{
-    background: var(--ot-bg-3);
-    border-color: var(--ot-bg-3-border);
-}
-
-.e-20dcefe9 > .holder[variant="bg-3"] input:hover
-{
-    background: var(--ot-bg-3-hover);
-}
-
-.e-20dcefe9 > .holder[variant="bg-3"] input:focus
-{
-    border-color: var(--ot-brand);
-}
-
-.e-20dcefe9 > .holder[variant="bg-4"] input
-{
-    background: var(--ot-bg-4);
-    border-color: var(--ot-bg-4-border);
-}
-
-.e-20dcefe9 > .holder[variant="bg-4"] input:hover
-{
-    background: var(--ot-bg-4-hover);
-}
-
-.e-20dcefe9 > .holder[variant="bg-4"] input:focus
-{
-    border-color: var(--ot-brand);
-}

package/lib/items/elements/form/radio/styles/base.css

@@ -1,48 +0,0 @@
-.e-206433b8 > .holder
-{
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-}
-
-.e-206433b8 input[type="radio"]
-{
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    width: 100%;
-    height: 100%;
-    z-index: 1;
-}
-
-.e-206433b8 .radio-mark
-{
-    display: block;
-    border-radius: 50%;
-    border: 1px solid;
-    transition: all 0.2s ease;
-    position: relative;
-}
-
-.e-206433b8 .radio-mark::after
-{
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%) scale(0);
-    border-radius: 50%;
-    transition: all 0.2s ease;
-}
-
-.e-206433b8 input[type="radio"]:checked ~ .radio-mark::after
-{
-    transform: translate(-50%, -50%) scale(1);
-}
-
-.e-206433b8 input[type="radio"]:disabled ~ .radio-mark
-{
-    opacity: 0.5;
-    cursor: not-allowed;
-}

package/lib/items/elements/form/radio/styles/sizes.css

@@ -1,36 +0,0 @@
-/* Sizes */
-.e-206433b8 > .holder[size="s"] .radio-mark
-{
-    width: 16px;
-    height: 16px;
-}
-
-.e-206433b8 > .holder[size="s"] .radio-mark::after
-{
-    width: 6px;
-    height: 6px;
-}
-
-.e-206433b8 > .holder[size="m"] .radio-mark
-{
-    width: 20px;
-    height: 20px;
-}
-
-.e-206433b8 > .holder[size="m"] .radio-mark::after
-{
-    width: 8px;
-    height: 8px;
-}
-
-.e-206433b8 > .holder[size="l"] .radio-mark
-{
-    width: 24px;
-    height: 24px;
-}
-
-.e-206433b8 > .holder[size="l"] .radio-mark::after
-{
-    width: 10px;
-    height: 10px;
-}

package/lib/items/elements/form/radio/styles/variants.css

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

package/lib/items/elements/global/card/card.css

@@ -1,57 +0,0 @@
-.e-4a157f24
-{
-	display: flex;
-}
-
-.e-4a157f24 > .holder
-{
-	display: flex;
-	flex-direction: column;
-	gap: var(--ot-spacing-s);
-	padding: var(--ot-spacing-m);
-	border-radius: 8px;
-	background: var(--ot-bg-2);
-	border: 1px solid var(--ot-bg-2-border);
-	width: 100%;
-}
-
-.e-4a157f24 > .holder.link
-{
-	text-decoration: none;
-	transition: border-color 0.15s ease, background 0.15s ease;
-	cursor: pointer;
-}
-
-.e-4a157f24 > .holder.link:hover
-{
-	border-color: var(--ot-brand);
-	background: var(--ot-bg-3);
-}
-
-/* Icon */
-
-.e-4a157f24 > .holder > .icon
-{
-	font-size: 24px;
-	color: var(--ot-brand);
-}
-
-/* Title */
-
-.e-4a157f24 > .holder > .title
-{
-	font-size: var(--ot-size-m);
-	font-weight: 600;
-	color: var(--ot-text-1);
-	margin: 0;
-}
-
-/* Description */
-
-.e-4a157f24 > .holder > .description
-{
-	font-size: var(--ot-size-s);
-	color: var(--ot-text-2);
-	line-height: 1.5;
-	margin: 0;
-}

package/lib/items/elements/global/card/card.js

@@ -1,48 +0,0 @@
-onetype.AddonReady('elements', (elements) =>
-{
-	elements.ItemAdd({
-		id: 'global-card',
-		icon: 'crop_square',
-		name: 'Card',
-		description: 'Reusable card with icon, title, description, and optional link.',
-		category: 'Global',
-		author: 'OneType',
-		config: {
-			icon: {
-				type: 'string',
-				value: ''
-			},
-			title: {
-				type: 'string',
-				value: ''
-			},
-			description: {
-				type: 'string',
-				value: ''
-			},
-			href: {
-				type: 'string',
-				value: ''
-			},
-			target: {
-				type: 'string',
-				value: ''
-			}
-		},
-		render: function()
-		{
-			const content = `
-				<i ot-if="icon" class="icon">{{ icon }}</i>
-				<h3 class="title">{{ title }}</h3>
-				<p ot-if="description" class="description">{{ description }}</p>
-			`;
-
-			if(this.href)
-			{
-				return `<a class="holder link" :href="href" :target="target">${content}</a>`;
-			}
-
-			return `<div class="holder">${content}</div>`;
-		}
-	});
-});

package/lib/items/elements/sections/footer/footer.css

@@ -1,205 +0,0 @@
-.e-71d10544
-{
-	display: flex;
-	width: 100%;
-}
-
-.e-71d10544 > .holder
-{
-	display: flex;
-	flex-direction: column;
-	width: 100%;
-	border-top: 1px solid var(--ot-bg-2-border);
-}
-
-/* Inner */
-
-.e-71d10544 > .holder > .inner
-{
-	display: flex;
-	justify-content: space-between;
-	gap: var(--ot-spacing-l);
-	max-width: 1200px;
-	width: 100%;
-	margin: 0 auto;
-	padding: 60px 32px 40px;
-}
-
-/* Brand */
-
-.e-71d10544 > .holder > .inner > .brand
-{
-	display: flex;
-	flex-direction: column;
-	gap: var(--ot-spacing-s);
-	max-width: 320px;
-}
-
-.e-71d10544 > .holder > .inner > .brand > .logo
-{
-	display: flex;
-	align-items: center;
-	text-decoration: none;
-}
-
-.e-71d10544 > .holder > .inner > .brand > .logo > .logo-icon
-{
-	height: 20px;
-}
-
-.e-71d10544 > .holder > .inner > .brand > .tagline
-{
-	font-size: var(--ot-size-m);
-	color: var(--ot-text-2);
-	line-height: 1.6;
-	margin: var(--ot-spacing-x) 0 0;
-}
-
-/* Columns */
-
-.e-71d10544 > .holder > .inner > .columns
-{
-	display: flex;
-	gap: 80px;
-}
-
-.e-71d10544 > .holder > .inner > .columns > .column
-{
-	display: flex;
-	flex-direction: column;
-	gap: var(--ot-spacing-s);
-}
-
-.e-71d10544 > .holder > .inner > .columns > .column > .column-title
-{
-	font-size: var(--ot-size-s);
-	font-weight: 600;
-	color: var(--ot-text-1);
-	text-transform: uppercase;
-	letter-spacing: 0.5px;
-	margin: 0 0 var(--ot-spacing-x) 0;
-}
-
-.e-71d10544 > .holder > .inner > .columns > .column > .link
-{
-	font-size: var(--ot-size-m);
-	color: var(--ot-text-2);
-	text-decoration: none;
-	transition: color 0.15s ease;
-}
-
-.e-71d10544 > .holder > .inner > .columns > .column > .link:hover
-{
-	color: var(--ot-text-1);
-}
-
-/* Integrations */
-
-.e-71d10544 > .holder > .inner > .brand > .integrations
-{
-	display: flex;
-	flex-direction: column;
-	gap: var(--ot-spacing-s);
-	margin-top: var(--ot-spacing-s);
-}
-
-.e-71d10544 > .holder > .inner > .brand > .integrations > .integrations-label
-{
-	font-size: var(--ot-size-s);
-	font-weight: 600;
-	color: var(--ot-text-2);
-	text-transform: uppercase;
-	letter-spacing: 0.5px;
-}
-
-.e-71d10544 > .holder > .inner > .brand > .integrations > .integrations-list
-{
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-	gap: 6px;
-}
-
-.e-71d10544 > .holder > .inner > .brand > .integrations > .integrations-list > .integration
-{
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	padding: 4px 10px;
-	border-radius: 6px;
-	background: var(--ot-bg-2);
-	border: 1px solid var(--ot-bg-2-border);
-	font-size: var(--ot-size-s);
-	color: var(--ot-text-2);
-	text-decoration: none;
-	transition: color 0.15s ease, border-color 0.15s ease;
-}
-
-.e-71d10544 > .holder > .inner > .brand > .integrations > .integrations-list > .integration > i
-{
-	font-size: 14px;
-	color: var(--ot-text-2);
-}
-
-.e-71d10544 > .holder > .inner > .brand > .integrations > .integrations-list > .integration.more
-{
-	color: var(--ot-brand);
-	cursor: pointer;
-}
-
-.e-71d10544 > .holder > .inner > .brand > .integrations > .integrations-list > .integration.more > i
-{
-	color: var(--ot-brand);
-}
-
-.e-71d10544 > .holder > .inner > .brand > .integrations > .integrations-list > .integration.more:hover
-{
-	border-color: var(--ot-brand);
-}
-
-/* Badges */
-
-.e-71d10544 > .holder > .badges
-{
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-wrap: wrap;
-	gap: var(--ot-spacing-m);
-	width: 100%;
-	padding: var(--ot-spacing-m) 32px;
-	border-top: 1px solid var(--ot-bg-2-border);
-}
-
-.e-71d10544 > .holder > .badges > .badge
-{
-	display: flex;
-	align-items: center;
-	gap: 6px;
-	font-size: var(--ot-size-s);
-	color: var(--ot-text-2);
-}
-
-.e-71d10544 > .holder > .badges > .badge > i
-{
-	font-size: 16px;
-	color: var(--ot-brand);
-}
-
-/* Bottom */
-
-.e-71d10544 > .holder > .bottom
-{
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 100%;
-	padding: var(--ot-spacing-m) 32px;
-	border-top: 1px solid var(--ot-bg-2-border);
-}
-
-.e-71d10544 > .holder > .bottom > .copyright
-{
-	font-size: var(--ot-size-s);
-	color: var(--ot-text-2);
-}