UNPKG

@redocly/theme

Version:

Shared UI components lib

65 lines (52 loc) • 3.85 kB
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import { css } from 'styled-components'; export const userMenu = css` /** * @tokens User Menu */ --user-menu-navbar-button-width: var(--control-height-base); // @presenter Spacing --user-menu-navbar-button-height: var(--control-height-base); // @presenter Spacing --user-menu-avatar-width: var(--spacing-xxl); // @presenter Spacing --user-menu-avatar-height: var(--spacing-xxl); // @presenter Spacing --user-menu-avatar-border-radius: 50%; // @presenter BorderRadius --user-menu-avatar-bg-color: var(--button-bg-color-secondary); --user-menu-avatar-font-family: var(--navbar-item-font-family); // @presenter FontFamily --user-menu-avatar-font-size: var(--navbar-item-font-size); // @presenter FontSize --user-menu-avatar-font-weight: var(--font-weight-regular); // @presenter FontWeight --user-menu-avatar-line-height: var(--line-height-base); // @presenter LineHeight --user-menu-user-details-padding-vertical: var(--spacing-base); --user-menu-user-details-padding-horizontal: var(--spacing-md); --user-menu-user-details-bg-color: var(--layer-color); --user-menu-name-font-weight: var(--font-weight-medium); --user-menu-name-font-size: var(--font-size-lg); --user-menu-name-line-height: var(--line-height-lg); --user-menu-user-info-items-gap: var(--spacing-base); --user-menu-email-font-size: var(--font-size-sm); --user-menu-email-line-height: var(--line-height-sm); --user-menu-dropdown-font-size: var(--dropdown-menu-font-size); // @presenter FontSize --user-menu-dropdown-font-weight: var(--dropdown-menu-font-weight); // @presenter FontWeight --user-menu-dropdown-line-height: var(--dropdown-menu-line-height); // @presenter LineHeight --user-menu-dropdown-text-color: var(--dropdown-menu-text-color); // @presenter Color --user-menu-dropdown-min-width: 180px; --user-menu-dropdown-max-width: var(--dropdown-menu-max-width); --user-menu-dropdown-max-height: none; --user-menu-dropdown-padding: var(--dropdown-menu-padding ); // @presenter Spacing --user-menu-dropdown-border-radius: var(--dropdown-menu-border-radius); // @presenter BorderRadius --user-menu-dropdown-box-shadow: var(--dropdown-menu-box-shadow); // @presenter Shadow --user-menu-dropdown-border-color: var(--dropdown-menu-border-color); // @presenter Color --user-menu-dropdown-bg-color: var(--dropdown-menu-bg-color); // @presenter Color --user-menu-dropdown-item-padding-horizontal: 20px; // @presenter Spacing --user-menu-dropdown-item-padding-vertical: var(--dropdown-menu-item-padding-vertical); // @presenter Spacing --user-menu-dropdown-item-separator-padding-top: var(--dropdown-menu-item-separator-padding-top ); // @presenter Spacing --user-menu-dropdown-item-separator-padding-bottom: var(--dropdown-menu-item-separator-padding-bottom ); // @presenter Spacing --user-menu-dropdown-item-border-radius: var(--dropdown-menu-item-border-radius ); // @presenter BorderRadius --user-menu-dropdown-item-bg-color-active: var(--dropdown-menu-item-bg-color-active); // @presenter Color --user-menu-dropdown-item-bg-color-hover: var(--dropdown-menu-item-bg-color-hover); // @presenter Color --user-menu-dropdown-item-bg-color-disabled: var(--dropdown-menu-item-bg-color-disabled); // @presenter Color --user-menu-dropdown-item-separator-border-color: var(--dropdown-menu-item-separator-border-color); // @presenter Color --user-menu-dropdown-item-color-dangerous: var(--dropdown-menu-item-color-dangerous); --user-menu-dropdown-item-color-disabled: var(--dropdown-menu-item-color-disabled); --user-menu-dropdown-item-color-active: var(--dropdown-menu-item-color-active); --user-menu-dropdown-item-color-hover: var(--dropdown-menu-item-color-hover); --user-menu-dropdown-item-border-color-focused: var(--dropdown-menu-item-border-color-focused); // @tokens End `;