diff --git a/src/components/editors/EditorPublicSwitch/index.tsx b/src/components/editors/EditorPublicSwitch/index.tsx index c654a559..dac7b478 100644 --- a/src/components/editors/EditorPublicSwitch/index.tsx +++ b/src/components/editors/EditorPublicSwitch/index.tsx @@ -1,7 +1,8 @@ -import React, { FC, useCallback, useEffect, useRef } from 'react'; +import React, { FC, useCallback } from 'react'; import { IEditorComponentProps } from '~/redux/node/types'; -import { usePopper } from 'react-popper'; import { Button } from '~/components/input/Button'; +import { Icon } from '~/components/input/Icon'; +import styles from './styles.module.scss'; interface IProps extends IEditorComponentProps {} @@ -17,9 +18,8 @@ const EditorPublicSwitch: FC = ({ data, setData }) => { return ( ); }; diff --git a/src/components/editors/EditorPublicSwitch/styles.module.scss b/src/components/editors/EditorPublicSwitch/styles.module.scss index e41682c0..95aa2412 100644 --- a/src/components/editors/EditorPublicSwitch/styles.module.scss +++ b/src/components/editors/EditorPublicSwitch/styles.module.scss @@ -1,63 +1,63 @@ @import "src/styles/variables"; -.wrap { - @include outer_shadow(); - @include editor_round_button(); - - transition: all 0.5s; - fill: $content_bg; - background-color: $olive; - - &.promoted { - background-color: lighten($content_bg, 4%); - fill: $red; +@keyframes move_1 { + 0% { + transform: scale(0) translate(0, 0); + opacity: 0; } - &:hover { + 50% { + transform: scale(1) translate(5px, -5px); opacity: 1; + } - .tooltip { - opacity: 1; + 100% { + transform: scale(1.2) translate(-5px, -10px); + opacity: 0; + } +} + + +@keyframes move_2 { + 0% { + transform: scale(0) translate(0, 0); + opacity: 0; + } + + 50% { + transform: scale(1) translate(-5px, -5px); + opacity: 1; + } + + 100% { + transform: scale(1.6) translate(5px, -10px); + opacity: 0; + } +} + +.button { + +} + +.lab_wrapper { + position: relative; + bottom: -2px; + + .button:hover & { + &:before,&:after { + content: ' '; + position: absolute; + top: 1px; + left: 10px; + width: 2px; + height: 2px; + box-shadow: white 0 0 0 2px; + border-radius: 4px; + animation: move_1 0.5s infinite linear; + } + + &:after { + animation: move_2 0.5s -0.25s infinite linear; } } - - input { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - opacity: 0; - z-index: 1; - cursor: pointer; - } -} - -.icon { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - display: flex; - align-items: center; - justify-content: center; -} - -.tooltip { - border-radius: 2px; - background: darken($content_bg, 6%); - padding: $gap; - position: absolute; - font: $font_12_semibold; - bottom: 100%; - right: 0; - transform: translate(0, -$gap); - text-align: center; - touch-action: none; - pointer-events: none; - opacity: 0; - width: 100px; - user-select: none; - transition: all 0.1s; } diff --git a/src/components/input/Button/index.tsx b/src/components/input/Button/index.tsx index 8e569762..e0f3965d 100644 --- a/src/components/input/Button/index.tsx +++ b/src/components/input/Button/index.tsx @@ -11,7 +11,7 @@ type IButtonProps = DetailedHTMLProps< HTMLButtonElement > & { size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro' | 'small'; - color?: 'primary' | 'secondary' | 'outline' | 'link' | 'gray'; + color?: 'primary' | 'secondary' | 'outline' | 'link' | 'gray' | 'lab'; iconLeft?: IIcon; iconRight?: IIcon; title?: string; diff --git a/src/components/input/Button/styles.module.scss b/src/components/input/Button/styles.module.scss index fe57ddd9..0489151c 100644 --- a/src/components/input/Button/styles.module.scss +++ b/src/components/input/Button/styles.module.scss @@ -36,7 +36,7 @@ filter: grayscale(0); - transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s; + transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s, background-color 0.5s; opacity: 0.8; @include outer_shadow(); @@ -77,12 +77,6 @@ } } - &:global(.red) { - fill: $red; - stroke: $red; - color: $red; - } - &:global(.stretchy) { flex: 1; } @@ -123,14 +117,6 @@ padding-right: $gap; } - &.primary { - background: $red_gradient; - } - - &.secondary { - background: $green_gradient; - } - &.outline { background: transparent; box-shadow: inset transparentize(white, 0.8) 0 0 0 2px; @@ -231,3 +217,15 @@ width: 20px; height: 20px; } + +.primary { + background: $red; +} + +.secondary { + background: $wisegreen; +} + +.lab { + background: $blue; +} diff --git a/src/containers/dialogs/EditorDialog/index.tsx b/src/containers/dialogs/EditorDialog/index.tsx index 998ccb59..564b5dfc 100644 --- a/src/containers/dialogs/EditorDialog/index.tsx +++ b/src/containers/dialogs/EditorDialog/index.tsx @@ -95,11 +95,7 @@ const EditorDialogUnconnected: FC = ({ maxLength={256} /> -