welcome-ui/dist/StickyNote.css

Customizable design system with react, typescript, tailwindcss and ariakit.

@layer components{._root_1wey5_2{transform:rotate3d(0,0,1,.3deg);display:flex;border-color:var(--sticky-note-color-border-default);border-style:solid;border-width:var(--border-width-xs);border-radius:var(--sticky-note-border-radius);padding:var(--spacing-3xl) var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);box-shadow:var(--elevation-30);width:var(--StickyNoteWidth);min-height:var(--StickyNoteHeight);background-color:var(--StickyNoteBackgroundColor);color:var(--StickyNoteColor)}._root_1wey5_2:before{content:"";position:absolute;top:0;left:0;width:100%;height:var(--spacing-xxl);background-color:#00000005}._shape-rectangle_1wey5_27{--StickyNoteWidth: var(--sticky-note-size-width-rectangle);--StickyNoteHeight: var(--sticky-note-size-height-rectangle)}._shape-square_1wey5_31{--StickyNoteWidth: var(--sticky-note-size-width-square);--StickyNoteHeight: var(--sticky-note-size-height-square)}._shape-full_1wey5_35{--StickyNoteWidth: 100%}._variant-brand_1wey5_38{--StickyNoteBackgroundColor: var(--sticky-note-color-background-brand);--StickyNoteColor: var(--sticky-note-color-text-body-brand)}._variant-brand_1wey5_38 ._title-icon_1wey5_42{--StickyNoteTitleIconColor: var(--sticky-note-icon-color-icon-brand);--StickyNoteTitleIconBackgroundColor: var( --sticky-note-icon-color-background-brand )}._variant-blue_1wey5_48{--StickyNoteBackgroundColor: var(--sticky-note-color-background-blue);--StickyNoteColor: var(--sticky-note-color-text-body-blue)}._variant-blue_1wey5_48 ._title-icon_1wey5_42{--StickyNoteTitleIconColor: var(--sticky-note-icon-color-icon-blue);--StickyNoteTitleIconBackgroundColor: var( --sticky-note-icon-color-background-blue )}._variant-green_1wey5_58{--StickyNoteBackgroundColor: var(--sticky-note-color-background-green);--StickyNoteColor: var(--sticky-note-color-text-body-green)}._variant-green_1wey5_58 ._title-icon_1wey5_42{--StickyNoteTitleIconColor: var(--sticky-note-icon-color-icon-green);--StickyNoteTitleIconBackgroundColor: var( --sticky-note-icon-color-background-green )}._variant-violet_1wey5_68{--StickyNoteBackgroundColor: var(--sticky-note-color-background-violet);--StickyNoteColor: var(--sticky-note-color-text-body-violet)}._variant-violet_1wey5_68 ._title-icon_1wey5_42{--StickyNoteTitleIconColor: var(--sticky-note-icon-color-icon-violet);--StickyNoteTitleIconBackgroundColor: var( --sticky-note-icon-color-background-violet )}._variant-pink_1wey5_78{--StickyNoteBackgroundColor: var(--sticky-note-color-background-pink);--StickyNoteColor: var(--sticky-note-color-text-body-pink)}._variant-pink_1wey5_78 ._title-icon_1wey5_42{--StickyNoteTitleIconColor: var(--sticky-note-icon-color-icon-pink);--StickyNoteTitleIconBackgroundColor: var( --sticky-note-icon-color-background-pink )}._variant-orange_1wey5_88{--StickyNoteBackgroundColor: var(--sticky-note-color-background-orange);--StickyNoteColor: var(--sticky-note-color-text-body-orange)}._variant-orange_1wey5_88 ._title-icon_1wey5_42{--StickyNoteTitleIconColor: var(--sticky-note-icon-color-icon-orange);--StickyNoteTitleIconBackgroundColor: var( --sticky-note-icon-color-background-orange )}._variant-teal_1wey5_98{--StickyNoteBackgroundColor: var(--sticky-note-color-background-teal);--StickyNoteColor: var(--sticky-note-color-text-body-teal)}._variant-teal_1wey5_98 ._title-icon_1wey5_42{--StickyNoteTitleIconColor: var(--sticky-note-icon-color-icon-teal);--StickyNoteTitleIconBackgroundColor: var( --sticky-note-icon-color-background-teal )}._close-button_1wey5_108{position:absolute;transform:rotate3d(0,0,1,-.3deg);right:var(--spacing-xs);top:var(--spacing-xs)}._content_1wey5_114{display:flex;flex-direction:column;gap:var(--sticky-note-gap-content);transform:rotate3d(0,0,1,-.3deg);font-size:var(--font-size-md);line-height:var(--font-line-height-md)}._title_1wey5_42{display:flex;gap:var(--spacing-sm);align-items:center}._title-icon_1wey5_42{flex-shrink:0;padding:var(--sticky-note-icon-padding-block);border-radius:var(--sticky-note-icon-border-radius);color:var(--StickyNoteTitleIconColor);background-color:var(--StickyNoteTitleIconBackgroundColor)}._action_1wey5_134{margin-top:auto;width:fit-content}}