@use "@styles/abstracts/functions" as fun; .link { display: flex; width: var(--link-size, #{fun.convert-px(60)}); height: var(--link-size, #{fun.convert-px(60)}); box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) var(--color-shadow), fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-1) var(--color-shadow), fun.convert-px(3) fun.convert-px(4) fun.convert-px(4) fun.convert-px(-3) var(--color-shadow), 0 0 0 0 var(--color-shadow); transition: all 0.25s linear 0s; &:hover, &:focus { box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) var(--color-shadow), fun.convert-px(1) fun.convert-px(1) fun.convert-px(2) fun.convert-px(-1) var(--color-shadow-light), fun.convert-px(3) fun.convert-px(3) fun.convert-px(4) fun.convert-px(-4) var(--color-shadow-light), fun.convert-px(6) fun.convert-px(6) fun.convert-px(10) fun.convert-px(-3) var(--color-shadow); transform: scale(1.15); } &:focus { outline: var(--color-primary) dashed fun.convert-px(2); } &:active { box-shadow: 0 0 0 0 var(--color-shadow); outline: none; transform: scale(0.9); } } .icon { max-width: 100%; max-height: 100%; } hilippot
summaryrefslogtreecommitdiffstats
path: root/src/components/atoms/layout/notice.stories.tsx
blob: 0555a2ec6d453bf4bd72b210c9b6f5d286a28395 (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
import { ComponentMeta, ComponentStory } from '@storybook/react';
import NoticeComponent from './notice';

export default {
  title: 'Atoms/Layout',
  component: NoticeComponent,
  argTypes: {
    kind: {
      control: {
        type: 'select',
      },
      description: 'The notice kind.',
      options: ['error', 'info', 'success', 'warning'],
      type: {
        name: 'string',
        required: true,
      },
    },
    message: {
      control: {
        type: 'text',
      },
      description: 'The notice body.',
      type: {
        name: 'string',
        required: true,
      },
    },
  },
} as ComponentMeta<typeof NoticeComponent>;

const Template: ComponentStory<typeof NoticeComponent> = (args) => (
  <NoticeComponent {...args} />
);

export const Notice = Template.bind({});
Notice.args = {
  kind: 'info',
  message: 'Nisi provident sapiente.',
};