update
This commit is contained in:
@@ -10,7 +10,14 @@ import {
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
|
||||
import { SioCombox } from './sio-combox.js';
|
||||
import { SioIcon } from './sio-icon.js';
|
||||
SioCombox;
|
||||
SioIcon;
|
||||
|
||||
// Import design tokens
|
||||
import { colors, bdTheme } from './00colors.js';
|
||||
import { spacing, radius, shadows, transitions, sizes } from './00tokens.js';
|
||||
import { fontFamilies, typography } from './00fonts.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
@@ -20,7 +27,7 @@ declare global {
|
||||
|
||||
@customElement('sio-fab')
|
||||
export class SioFab extends DeesElement {
|
||||
@property()
|
||||
@property({ type: Boolean })
|
||||
public showCombox = false;
|
||||
|
||||
public static demo = () => html` <sio-fab .showCombox=${true}></sio-fab> `;
|
||||
@@ -45,30 +52,31 @@ export class SioFab extends DeesElement {
|
||||
}
|
||||
|
||||
#mainbox {
|
||||
transition: all 0.2s;
|
||||
transition: ${transitions.all};
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
|
||||
line-height: 60px;
|
||||
height: 56px;
|
||||
width: 56px;
|
||||
box-shadow: ${cssManager.bdTheme(shadows.md, shadows.lg)};
|
||||
line-height: 56px;
|
||||
text-align: center;
|
||||
color: #ccc;
|
||||
cursor: pointer;
|
||||
background: ${this.goBright
|
||||
? 'linear-gradient(-45deg, #eeeeeb, #eeeeeb)'
|
||||
: 'linear-gradient(-45deg, #222222, #333333)'};
|
||||
border-radius: 50% 50% 50% 50%;
|
||||
background: ${bdTheme('primary')};
|
||||
color: ${bdTheme('primaryForeground')};
|
||||
border-radius: ${radius.full};
|
||||
user-select: none;
|
||||
border: 1px solid ${bdTheme('border')};
|
||||
}
|
||||
|
||||
#mainbox:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: ${cssManager.bdTheme(shadows.lg, shadows.xl)};
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
#mainbox:active {
|
||||
transform: scale(0.95);
|
||||
transform: translateY(0);
|
||||
box-shadow: ${cssManager.bdTheme(shadows.sm, shadows.md)};
|
||||
}
|
||||
|
||||
#mainbox .icon {
|
||||
@@ -77,7 +85,7 @@ export class SioFab extends DeesElement {
|
||||
left: 0px;
|
||||
will-change: transform;
|
||||
transform: ${this.showCombox ? 'rotate(0deg)' : 'rotate(-360deg)'};
|
||||
transition: all 0.2s;
|
||||
transition: ${transitions.transform};
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
@@ -85,11 +93,10 @@ export class SioFab extends DeesElement {
|
||||
-khtml-user-drag: none;
|
||||
-moz-user-drag: none;
|
||||
-o-user-drag: none;
|
||||
user-drag: none;
|
||||
}
|
||||
|
||||
#mainbox .icon img {
|
||||
filter: grayscale(1) ${cssManager.bdTheme('invert(1)', '')};
|
||||
filter: ${cssManager.bdTheme('brightness(0) invert(1)', 'brightness(1)')};
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
top: 0px;
|
||||
@@ -98,7 +105,7 @@ export class SioFab extends DeesElement {
|
||||
transform: scale(0.2, 0.2) translateY(-5px);
|
||||
}
|
||||
#mainbox .icon.open:hover img {
|
||||
filter: grayscale(0);
|
||||
filter: ${cssManager.bdTheme('brightness(0) invert(1)', 'brightness(1.2)')};
|
||||
}
|
||||
|
||||
#mainbox .icon.open {
|
||||
@@ -110,40 +117,52 @@ export class SioFab extends DeesElement {
|
||||
opacity: ${this.showCombox ? '1' : '0'};
|
||||
pointer-events: ${this.showCombox ? 'all' : 'none'};
|
||||
}
|
||||
#mainbox .icon.close:hover dees-icon {
|
||||
color: ${cssManager.bdTheme('#111', '#fff')};
|
||||
#mainbox .icon.close:hover sio-icon {
|
||||
color: ${bdTheme('primaryForeground')};
|
||||
}
|
||||
|
||||
#mainbox .icon.open dees-icon {
|
||||
#mainbox .icon.open sio-icon {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 32px;
|
||||
color: ${cssManager.bdTheme('#777', '#999')};
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
transform: translateY(2px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: ${bdTheme('primaryForeground')};
|
||||
}
|
||||
|
||||
#mainbox .icon.close dees-icon {
|
||||
#mainbox .icon.close sio-icon {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 24px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
color: ${cssManager.bdTheme('#666', '#CCC')};
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: ${bdTheme('primaryForeground')};
|
||||
}
|
||||
|
||||
#comboxContainer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#comboxContainer sio-combox {
|
||||
transition: transform 0.2s, opacity 0.2s;
|
||||
position: absolute;
|
||||
bottom: calc(56px + ${spacing[4]});
|
||||
right: 0;
|
||||
transition: ${transitions.all};
|
||||
will-change: transform;
|
||||
transform: translateY(20px);
|
||||
bottom: 80px;
|
||||
transform: translateY(${spacing[5]});
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#comboxContainer.show {
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
#comboxContainer.show sio-combox {
|
||||
transform: translateY(0px);
|
||||
opacity: 1;
|
||||
@@ -152,15 +171,15 @@ export class SioFab extends DeesElement {
|
||||
</style>
|
||||
<div id="mainbox" @click=${this.toggleCombox}>
|
||||
<div class="icon open">
|
||||
<dees-icon iconFA="message"></dees-icon>
|
||||
<sio-icon icon="message-square" size="28"></sio-icon>
|
||||
<img src="https://assetbroker.lossless.one/brandfiles/00general/favicon_socialio.svg" />
|
||||
</div>
|
||||
<div class="icon close">
|
||||
<dees-icon iconFa="xmark"></dees-icon>
|
||||
<sio-icon icon="x" size="22"></sio-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div id="comboxContainer" class="${this.showCombox ? 'show' : null}">
|
||||
<sio-combox></sio-combox>
|
||||
<sio-combox @close=${() => this.showCombox = false}></sio-combox>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user