Added the access code component. Improved layout. General clean up and improvements.
This commit is contained in:
Scott Idem
@@ -3,7 +3,7 @@ import { readable, writable } from 'svelte/store';
|
||||
import type { Writable } from 'svelte/store';
|
||||
|
||||
|
||||
import { PUBLIC_TESTING, PUBLIC_AE_API_PROTOCOL, PUBLIC_AE_API_SERVER, PUBLIC_AE_API_BAK_SERVER, PUBLIC_AE_API_PORT, PUBLIC_AE_API_PATH, PUBLIC_AE_API_SECRET_KEY, PUBLIC_AE_API_CRUD_SUPER_KEY, PUBLIC_AE_ACCOUNT_ID } from '$env/static/public';
|
||||
import { PUBLIC_TESTING, PUBLIC_AE_API_PROTOCOL, PUBLIC_AE_API_SERVER, PUBLIC_AE_API_BAK_SERVER, PUBLIC_AE_API_PORT, PUBLIC_AE_API_PATH, PUBLIC_AE_API_SECRET_KEY, PUBLIC_AE_API_CRUD_SUPER_KEY, PUBLIC_AE_ACCOUNT_ID, PUBLIC_AE_SPONSORSHIP_CFG_ID } from '$env/static/public';
|
||||
console.log(`Aether Config - TESTING:`, PUBLIC_TESTING);
|
||||
|
||||
const api_base_url = `${PUBLIC_AE_API_PROTOCOL}://${PUBLIC_AE_API_SERVER}:${PUBLIC_AE_API_PORT}${PUBLIC_AE_API_PATH}`;
|
||||
@@ -13,6 +13,7 @@ const api_secret_key = PUBLIC_AE_API_SECRET_KEY;
|
||||
const api_crud_super_key = PUBLIC_AE_API_CRUD_SUPER_KEY;
|
||||
|
||||
const ae_account_id = PUBLIC_AE_ACCOUNT_ID;
|
||||
const ae_sponsorship_cfg_id = PUBLIC_AE_SPONSORSHIP_CFG_ID;
|
||||
|
||||
|
||||
// import { getStores, navigating, page, updated } from '$app/stores';
|
||||
@@ -32,13 +33,24 @@ type key_val = {
|
||||
|
||||
// *** BEGIN *** Longer-term app data. This should be stored to local storage.
|
||||
export let ae_app_local_data_struct: key_val = {
|
||||
'ver': '0.0.5',
|
||||
'ver': '0.0.7',
|
||||
'name': 'Aether App Template',
|
||||
'theme': 'light',
|
||||
|
||||
'account_id': ae_account_id, // OSIT Demo _XY7DXtc9MY
|
||||
'site_domain': null, // https://example.com, https://dev.example.com, etc.
|
||||
'administrator_access': true,
|
||||
'trusted_access': true,
|
||||
|
||||
'page_access_code_li': {'administrator': '11500', 'trusted': '19111', 'authenticated': '00000'},
|
||||
'administrator_passcode': '11500',
|
||||
'trusted_passcode': '19111',
|
||||
|
||||
'access_type': 'anonymous',
|
||||
'administrator_access': false,
|
||||
'trusted_access': false,
|
||||
'public_access': false,
|
||||
'authenticated_access': false,
|
||||
'anonymous_access': true,
|
||||
|
||||
'ds': {},
|
||||
'hub': {
|
||||
'ds': {},
|
||||
@@ -46,6 +58,8 @@ export let ae_app_local_data_struct: key_val = {
|
||||
'mod': { // module
|
||||
'events': {},
|
||||
'sponsorships': {
|
||||
'cfg_id': ae_sponsorship_cfg_id,
|
||||
|
||||
for_type: null,
|
||||
for_id: null,
|
||||
|
||||
@@ -60,10 +74,10 @@ export let ae_app_local_data_struct: key_val = {
|
||||
console.log(`Aether Config - App Local Storage Data:`, ae_app_local_data_struct);
|
||||
|
||||
// This works, but does not uses local storage:
|
||||
export let ae_loc = writable(ae_app_local_data_struct);
|
||||
// export let ae_loc = writable(ae_app_local_data_struct);
|
||||
|
||||
// This works and uses local storage:
|
||||
// export let ae_loc: Writable<key_val> = localStorageStore('ae_loc', ae_app_local_data_struct);
|
||||
export let ae_loc: Writable<key_val> = localStorageStore('ae_loc', ae_app_local_data_struct);
|
||||
|
||||
|
||||
// This does not work yet...? Don't use.
|
||||
@@ -73,10 +87,10 @@ export let ae_loc = writable(ae_app_local_data_struct);
|
||||
|
||||
// *** BEGIN *** Temporary app data. This should be stored to session storage.
|
||||
export let ae_app_session_data_struct: key_val = {
|
||||
'ver': '0.0.1',
|
||||
'ver': '0.0.2',
|
||||
// 'name': 'Aether App Template',
|
||||
// 'theme': 'light',
|
||||
'account_id': ae_app_local_data_struct.account_id,
|
||||
'account_id': ae_account_id,
|
||||
// 'obj': {},
|
||||
}
|
||||
console.log(`Aether Config - App Session Storage Data:`, ae_app_session_data_struct);
|
||||
@@ -92,7 +106,7 @@ export let ae_api_data_struct: key_val = {
|
||||
'api_secret_key_bak': api_secret_key, // 'YOUR_API_SECRET_KEY',
|
||||
'api_crud_super_key': api_crud_super_key, // 'YOUR_SUPER_KEY' 'zp5PtX4zUsI'
|
||||
'headers': {},
|
||||
'account_id': ae_app_local_data_struct.account_id,
|
||||
'account_id': ae_account_id,
|
||||
}
|
||||
|
||||
let ae_api_headers: key_val = {};
|
||||
@@ -101,7 +115,7 @@ ae_api_headers['content-type'] = 'application/json';
|
||||
ae_api_headers['x-aether-api-key'] = ae_api_data_struct.api_secret_key;
|
||||
ae_api_headers['x-aether-api-token'] = 'fake-temp-token';
|
||||
ae_api_headers['x-aether-api-expire-on'] = '';
|
||||
ae_api_headers['x-account-id'] = ae_app_local_data_struct.account_id;
|
||||
ae_api_headers['x-account-id'] = ae_account_id,
|
||||
ae_api_data_struct['headers'] = ae_api_headers;
|
||||
|
||||
console.log(`Aether Config - API Data:`, ae_api_data_struct);
|
||||
@@ -114,7 +128,7 @@ export let slct_trigger: any = writable(null);
|
||||
console.log(`Aether Config - Selected Trigger:`, slct_trigger);
|
||||
|
||||
let slct_obj_template: key_val = {
|
||||
'account_id': null,
|
||||
'account_id': ae_account_id,
|
||||
'account_obj': {},
|
||||
'event_id': null,
|
||||
'event_obj': {},
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
type key_val = {
|
||||
[key: string]: any;
|
||||
};
|
||||
|
||||
export let iso_datetime_formatter = function iso_datetime_formatter(raw_datetime: string|Date, named_format: string) {
|
||||
// console.log('*** iso_datetime_formatter() ***');
|
||||
|
||||
@@ -234,10 +238,177 @@ export let extract_prefixed_form_data = function extract_prefixed_form_data({pre
|
||||
}
|
||||
|
||||
|
||||
// NOTE: I know there is a better more efficient way to do this, but I don't have time for that right now.
|
||||
export let process_permission_checks = function process_permission_checks(access_type: string) {
|
||||
// let access_checks = { 'access_type': null, 'super_check': null };
|
||||
let access_checks: key_val = {};
|
||||
|
||||
if (access_type == 'super') {
|
||||
access_checks.access_type = 'super';
|
||||
|
||||
access_checks.super_check = true;
|
||||
access_checks.manager_check = false;
|
||||
access_checks.administrator_check = false;
|
||||
access_checks.support_check = false;
|
||||
access_checks.assistant_check = false;
|
||||
access_checks.trusted_check = false;
|
||||
access_checks.verified_check = false;
|
||||
access_checks.provisional_check = false;
|
||||
access_checks.public_check = false;
|
||||
access_checks.authenticated_check = true;
|
||||
access_checks.anonymous_check = false;
|
||||
|
||||
access_checks.super_access = true;
|
||||
access_checks.manager_access = true;
|
||||
access_checks.administrator_access = true;
|
||||
access_checks.support_access = true;
|
||||
access_checks.assistant_access = true;
|
||||
access_checks.trusted_access = true;
|
||||
access_checks.verified_access = true;
|
||||
access_checks.provisional_access = true;
|
||||
access_checks.public_access = true;
|
||||
access_checks.authenticated_access = true;
|
||||
access_checks.anonymous_access = true;
|
||||
} else if (access_type == 'manager') {
|
||||
access_checks.access_type = 'manager';
|
||||
|
||||
access_checks.super_check = false;
|
||||
access_checks.manager_check = true;
|
||||
access_checks.administrator_check = false;
|
||||
access_checks.support_check = false;
|
||||
access_checks.assistant_check = false;
|
||||
access_checks.trusted_check = false;
|
||||
access_checks.verified_check = false;
|
||||
access_checks.provisional_check = false;
|
||||
access_checks.public_check = false;
|
||||
access_checks.authenticated_check = true;
|
||||
access_checks.anonymous_check = false;
|
||||
|
||||
access_checks.super_access = false;
|
||||
access_checks.manager_access = true;
|
||||
access_checks.administrator_access = true;
|
||||
access_checks.support_access = true;
|
||||
access_checks.assistant_access = true;
|
||||
access_checks.trusted_access = true;
|
||||
access_checks.verified_access = true;
|
||||
access_checks.provisional_access = true;
|
||||
access_checks.public_access = true;
|
||||
access_checks.authenticated_access = true;
|
||||
access_checks.anonymous_access = true;
|
||||
} else if (access_type == 'administrator') {
|
||||
access_checks.access_type = 'administrator';
|
||||
|
||||
access_checks.super_check = false;
|
||||
access_checks.manager_check = false;
|
||||
access_checks.administrator_check = true;
|
||||
access_checks.support_check = false;
|
||||
access_checks.assistant_check = false;
|
||||
access_checks.trusted_check = false;
|
||||
access_checks.verified_check = false;
|
||||
access_checks.provisional_check = false;
|
||||
access_checks.public_check = false;
|
||||
access_checks.authenticated_check = false;
|
||||
access_checks.anonymous_check = false;
|
||||
|
||||
access_checks.super_access = false;
|
||||
access_checks.manager_access = false;
|
||||
access_checks.administrator_access = true;
|
||||
access_checks.support_access = true;
|
||||
access_checks.assistant_access = true;
|
||||
access_checks.trusted_access = true;
|
||||
access_checks.verified_access = true;
|
||||
access_checks.provisional_access = true;
|
||||
access_checks.public_access = true;
|
||||
access_checks.authenticated_access = true;
|
||||
access_checks.anonymous_access = true;
|
||||
} else if (access_type == 'trusted') {
|
||||
access_checks.access_type = 'trusted';
|
||||
|
||||
access_checks.super_check = false;
|
||||
access_checks.manager_check = false;
|
||||
access_checks.administrator_check = false;
|
||||
access_checks.support_check = false;
|
||||
access_checks.assistant_check = false;
|
||||
access_checks.trusted_check = true;
|
||||
access_checks.verified_check = false;
|
||||
access_checks.provisional_check = false;
|
||||
access_checks.public_check = false;
|
||||
access_checks.authenticated_check = true;
|
||||
access_checks.anonymous_check = false;
|
||||
|
||||
access_checks.super_access = false;
|
||||
access_checks.manager_access = false;
|
||||
access_checks.administrator_access = false;
|
||||
access_checks.support_access = false;
|
||||
access_checks.assistant_access = false;
|
||||
access_checks.trusted_access = true;
|
||||
access_checks.verified_access = true;
|
||||
access_checks.provisional_access = true;
|
||||
access_checks.public_access = true;
|
||||
access_checks.authenticated_access = true;
|
||||
access_checks.anonymous_access = true;
|
||||
} else if (access_type == 'authenticated') {
|
||||
access_checks.access_type = 'authenticated';
|
||||
|
||||
access_checks.super_check = false;
|
||||
access_checks.manager_check = false;
|
||||
access_checks.administrator_check = false;
|
||||
access_checks.support_check = false;
|
||||
access_checks.assistant_check = false;
|
||||
access_checks.trusted_check = false;
|
||||
access_checks.verified_check = false;
|
||||
access_checks.provisional_check = false;
|
||||
access_checks.public_check = false;
|
||||
access_checks.authenticated_check = true;
|
||||
access_checks.anonymous_check = false;
|
||||
|
||||
access_checks.super_access = false;
|
||||
access_checks.manager_access = false;
|
||||
access_checks.administrator_access = false;
|
||||
access_checks.support_access = false;
|
||||
access_checks.assistant_access = false;
|
||||
access_checks.trusted_access = false;
|
||||
access_checks.verified_access = false;
|
||||
access_checks.provisional_access = false;
|
||||
access_checks.public_access = false;
|
||||
access_checks.authenticated_access = true;
|
||||
access_checks.anonymous_access = true;
|
||||
} else {
|
||||
access_checks.access_type = 'anonymous';
|
||||
|
||||
access_checks.super_check = false;
|
||||
access_checks.manager_check = false;
|
||||
access_checks.administrator_check = false;
|
||||
access_checks.support_check = false;
|
||||
access_checks.assistant_check = false;
|
||||
access_checks.trusted_check = false;
|
||||
access_checks.verified_check = false;
|
||||
access_checks.provisional_check = false;
|
||||
access_checks.public_check = false;
|
||||
access_checks.authenticated_check = false;
|
||||
access_checks.anonymous_check = true;
|
||||
|
||||
access_checks.super_access = false;
|
||||
access_checks.manager_access = false;
|
||||
access_checks.administrator_access = false;
|
||||
access_checks.support_access = false;
|
||||
access_checks.assistant_access = false;
|
||||
access_checks.trusted_access = false;
|
||||
access_checks.verified_access = false;
|
||||
access_checks.provisional_access = false;
|
||||
access_checks.public_access = false;
|
||||
access_checks.authenticated_access = false;
|
||||
access_checks.anonymous_access = true;
|
||||
}
|
||||
|
||||
return access_checks;
|
||||
}
|
||||
|
||||
|
||||
|
||||
export let ae_util = {
|
||||
iso_datetime_formatter: iso_datetime_formatter,
|
||||
extract_prefixed_form_data: extract_prefixed_form_data,
|
||||
process_permission_checks: process_permission_checks,
|
||||
};
|
||||
// export default ae_util;
|
||||
291
src/lib/element_access_type.svelte
Normal file
291
src/lib/element_access_type.svelte
Normal file
@@ -0,0 +1,291 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher, onMount, tick } from 'svelte';
|
||||
|
||||
import { ae_util } from '$lib/ae_utils';
|
||||
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
|
||||
|
||||
let entered_passcode: null|string = null;
|
||||
let show_passcode_input: boolean = false;
|
||||
|
||||
let trigger: null|string = null;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
|
||||
onMount(() => {
|
||||
console.log('** Element Mounted: ** Element Access Type');
|
||||
});
|
||||
|
||||
|
||||
$: if (entered_passcode && entered_passcode.length >= 5) {
|
||||
console.log(`entered_passcode=${entered_passcode}`);
|
||||
handle_check_access_type_passcode();
|
||||
}
|
||||
|
||||
$: if (trigger && $ae_loc.access_type) {
|
||||
console.log(`$ae_loc.access_type=${$ae_loc.access_type}`);
|
||||
|
||||
let access_checks_results = ae_util.process_permission_checks($ae_loc.access_type);
|
||||
|
||||
$ae_loc = {...$ae_loc, ...access_checks_results};
|
||||
} else if (trigger) {
|
||||
console.log(`$ae_loc.access_type=not set`);
|
||||
|
||||
// Send an empty string to reset the permissions. This is the same as sending 'anonymous'.
|
||||
let access_checks_results = ae_util.process_permission_checks('');
|
||||
|
||||
$ae_loc = {...$ae_loc, ...access_checks_results};
|
||||
}
|
||||
|
||||
|
||||
function handle_check_access_type_passcode() {
|
||||
// console.log('*** handle_check_access_type_passcode() ***');
|
||||
|
||||
if (entered_passcode && entered_passcode.length >= 5) {
|
||||
if ($ae_loc.page_access_code_li.administrator == entered_passcode) {
|
||||
console.log('Administrator passcode matched');
|
||||
|
||||
window.localStorage.setItem('access_type', 'administrator');
|
||||
|
||||
entered_passcode = null;
|
||||
|
||||
$ae_loc.access_type = 'administrator';
|
||||
trigger = 'process_permission_check';
|
||||
|
||||
// $ae_loc = $ae_loc; // Trigger Svelte just in case
|
||||
// ae_loc.set($ae_loc);
|
||||
// console.log($ae_loc);
|
||||
|
||||
dispatch_access_type_changed();
|
||||
|
||||
return true;
|
||||
} else if ($ae_loc.page_access_code_li.trusted == entered_passcode) {
|
||||
console.log('Trusted passcode matched');
|
||||
|
||||
window.localStorage.setItem('access_type', 'trusted');
|
||||
|
||||
entered_passcode = null;
|
||||
|
||||
$ae_loc.access_type = 'trusted';
|
||||
trigger = 'process_permission_check';
|
||||
|
||||
// $ae_loc = $ae_loc; // Trigger Svelte just in case
|
||||
// ae_loc.set($ae_loc);
|
||||
// console.log($ae_loc);
|
||||
|
||||
dispatch_access_type_changed();
|
||||
|
||||
return true;
|
||||
} else if ($ae_loc.page_access_code_li.public == entered_passcode) {
|
||||
console.log('Authenticated passcode matched');
|
||||
|
||||
window.localStorage.setItem('access_type', 'public');
|
||||
|
||||
entered_passcode = null;
|
||||
|
||||
$ae_loc.access_type = 'public';
|
||||
trigger = 'process_permission_check';
|
||||
|
||||
dispatch_access_type_changed();
|
||||
|
||||
return true;
|
||||
} else if ($ae_loc.page_access_code_li.authenticated == entered_passcode) {
|
||||
console.log('Authenticated passcode matched');
|
||||
|
||||
window.localStorage.setItem('access_type', 'authenticated');
|
||||
|
||||
entered_passcode = null;
|
||||
|
||||
$ae_loc.access_type = 'authenticated';
|
||||
trigger = 'process_permission_check';
|
||||
|
||||
dispatch_access_type_changed();
|
||||
|
||||
return true;
|
||||
} else {
|
||||
console.log('Passcode does not match');
|
||||
|
||||
window.localStorage.setItem('access_type', 'anonymous');
|
||||
|
||||
$ae_loc.access_type = 'anonymous';
|
||||
trigger = 'process_permission_check';
|
||||
|
||||
// $ae_loc = $ae_loc; // Trigger Svelte just in case
|
||||
// ae_loc.set($ae_loc);
|
||||
// console.log($ae_loc);
|
||||
|
||||
dispatch_access_type_changed();
|
||||
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
console.log('Entered passcode too short.');
|
||||
|
||||
// $ae_loc.access_type = null; // 'anonymous';
|
||||
|
||||
// dispatch_access_type_changed()
|
||||
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function handle_clear_access() {
|
||||
// NOTE: I think it makes since to reset this to anonymous even if logged in as an admin or similar.
|
||||
window.localStorage.setItem('access_type', 'anonymous');
|
||||
|
||||
// $ae_loc.access_type = null; // 'anonymous';
|
||||
$ae_loc.access_type = 'anonymous';
|
||||
trigger = 'process_permission_check';
|
||||
|
||||
show_passcode_input = false;
|
||||
|
||||
// $ae_loc = $ae_loc; // Trigger Svelte just in case
|
||||
// ae_loc.set($ae_loc);
|
||||
// console.log($ae_loc);
|
||||
|
||||
dispatch_access_type_changed();
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
function dispatch_access_type_changed() {
|
||||
console.log('*** dispatch_access_type_changed() ***');
|
||||
|
||||
console.log(ae_util);
|
||||
console.log($ae_loc);
|
||||
|
||||
dispatch('access_type_changed', {
|
||||
access_type: $ae_loc.access_type
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<section id="AE-Quick-Access-Type" class="access_type transition duration-300 delay-150 hover:delay-300 hover:transition-all hidden-print">
|
||||
{#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
|
||||
{#if $ae_loc.access_type == 'super'}
|
||||
<span class="fas fa-unlock"></span> Super Access
|
||||
{:else if $ae_loc.access_type == 'manager'}
|
||||
<span class="fas fa-unlock"></span> Manager Access
|
||||
{:else if $ae_loc.access_type == 'administrator'}
|
||||
<span class="fas fa-unlock"></span> Administrator Access
|
||||
{:else if $ae_loc.access_type == 'trusted'}
|
||||
<span class="fas fa-unlock"></span> Trusted Access
|
||||
{:else if $ae_loc.access_type == 'authenticated'}
|
||||
<span class="fas fa-unlock"></span> Authenticated Access
|
||||
{:else if $ae_loc.access_type == 'anonymous'}
|
||||
<span class="fas fa-unlock"></span> Anonymous Access
|
||||
{:else}
|
||||
<span class="fas fa-unlock mx-1"></span> Unknown Access
|
||||
{/if}
|
||||
|
||||
<button
|
||||
class="btn btn-sm access_type_lock_btn hover:transition-all"
|
||||
on:click={() => {
|
||||
handle_clear_access();
|
||||
}}
|
||||
title="Access mode is currently enabled/unlocked. Click to exit and lock."
|
||||
>
|
||||
<span class="fas fa-lock mx-1"></span> Lock
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
class="btn btn-sm access_type_unlock_btn hover:transition-all"
|
||||
on:click={async () => {
|
||||
show_passcode_input = !show_passcode_input;
|
||||
await tick();
|
||||
document.getElementById('access_passcode_input').focus();
|
||||
// element.focus({preventScroll:false});
|
||||
}}
|
||||
title="Anonymous public access is currently set. Access mode is disabled/locked."
|
||||
>
|
||||
<span class="fas fa-lock"></span>
|
||||
<span class="unlock_text">Unlock?</span>
|
||||
</button>
|
||||
|
||||
<input
|
||||
id="access_passcode_input"
|
||||
bind:value={entered_passcode}
|
||||
class="input w-32 transition-all"
|
||||
class:hidden={!show_passcode_input}
|
||||
type="text"
|
||||
placeholder="Access code"
|
||||
/>
|
||||
<!-- <div class="current_text transition-all">{$ae_loc.access_type}</div> -->
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
/* BEGIN: AE's Svelte Quick Access Type component */
|
||||
#AE-Quick-Access-Type {
|
||||
/* position: absolute; */
|
||||
position: fixed;
|
||||
/* position: relative; */
|
||||
/* position: static; */
|
||||
/* position: sticky; */
|
||||
/* top: 1em; */
|
||||
bottom: 1.5rem;
|
||||
right: 0rem;
|
||||
|
||||
padding: .5rem;
|
||||
|
||||
/* lightyellow */
|
||||
/* background-color: hsla(60,100%,90%,.30); */
|
||||
background-color: rgba(var(--color-surface-500) / .5);
|
||||
|
||||
border-top: solid thin black;
|
||||
border-left: solid thin black;
|
||||
border-bottom: solid thin black;
|
||||
border-top-left-radius: .5em;
|
||||
border-bottom-left-radius: .5em;
|
||||
|
||||
opacity: .50;
|
||||
|
||||
font-size: .75rem;
|
||||
|
||||
z-index: 5;
|
||||
|
||||
/* NOTE: transition when no longer hovering */
|
||||
transition-property: opacity, background-color;
|
||||
transition-delay: .1s;
|
||||
transition-duration: .4s;
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
|
||||
#AE-Quick-Access-Type:hover {
|
||||
/* lightyellow */
|
||||
/* background-color: hsla(60,100%,90%,.95); */
|
||||
background-color: rgba(var(--color-surface-500) / 1);
|
||||
opacity: 1;
|
||||
|
||||
/* NOTE: transition when hover starts */
|
||||
transition-property: opacity, background-color;
|
||||
/* transition-delay: .5s; */
|
||||
transition-duration: .10s;
|
||||
transition-timing-function: linear;
|
||||
}
|
||||
|
||||
/* #Access-Type .unlock_text {
|
||||
transition: width 2s, height 2s, background-color 2s, transform 2s;
|
||||
} */
|
||||
/* END: Svelte Access Type component */
|
||||
|
||||
.access_type_unlock_btn .unlock_text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.access_type_unlock_btn:hover .unlock_text {
|
||||
display: initial;
|
||||
/* outline: solid thin red; */
|
||||
}
|
||||
|
||||
.access_type .current_text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.access_type:hover .current_text {
|
||||
display: initial;
|
||||
/* outline: solid thin red; */
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user