@use "../../../../styles/abstracts/functions" as fun;
.input {
border-right: none;
}
.icon {
transform: scale(0.85);
transition: all 0.3s ease-in-out 0s;
}
.btn {
background: var(--color-bg-tertiary);
border: fun.convert-px(2) solid var(--color-border);
box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0 var(--color-shadow);
transition: all 0.25s linear 0s;
&:hover,
&:focus {
.icon {
transform: scale(0.85) rotate(20deg) translateX(#{fun.convert-px(2)})
translateY(#{fun.convert-px(3)});
}
}
&:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0
var(--color-primary-dark);
}
&:active {
.icon {
transform: scale(0.7);
}
}
}
.wrapper {
display: flex;
&--no-label {
.btn {
align-self: stretch;
}
}
&--has-label {
.btn {
align-self: flex-end;
height: fun.convert-px(52);
}
}
}
.field {
&:focus-within ~ .btn {
background: var(--color-bg);
border-color: var(--color-primary);
box-shadow: none;
transform: translate(fun.convert-px(3), fun.convert-px(3));
transition:
all 0.2s ease-in-out 0s,
transform 0.3s ease-out 0s;
}
&:hover:not(:focus-within) ~ .btn {
box-shadow: fun.convert-px(5) fun.convert-px(5) 0 fun.convert-px(1)
var(--color-shadow);
transform: translate(fun.convert-px(-3), fun.convert-px(-3));
&:focus {
box-shadow: fun.convert-px(5) fun.convert-px(5) 0 fun.convert-px(1)
var(--color-primary-dark);
}
}
}
s/table-of-contents.stories.tsx?h=v2.0.0'>logtreecommitdiffstats
blob: fba7c54c6a78240e49a216131d0ca41f24a17ecc (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
import { ComponentMeta, ComponentStory } from '@storybook/react';
import { IntlProvider } from 'react-intl';
import ToCWidget from './table-of-contents';
/**
* TableOfContents - Storybook Meta
*/
export default {
title: 'Organisms/Widgets',
component: ToCWidget,
argTypes: {
wrapper: {
control: {
type: null,
},
description:
'A reference to the HTML element that contains the headings.',
type: {
name: 'string',
required: true,
},
},
},
decorators: [
(Story) => (
<IntlProvider locale="en">
<Story />
</IntlProvider>
),
],
} as ComponentMeta<typeof ToCWidget>;
const Template: ComponentStory<typeof ToCWidget> = (args) => (
<ToCWidget {...args} />
);
/**
* Widgets Stories - Table of Contents
*/
export const TableOfContents = Template.bind({});
TableOfContents.args = {};
|