1 | import { css } from 'lit';
|
2 | export const absoluteHidden = css `[hidden] { display: none !important; }`;
|
3 | export const baseStyling = css `
|
4 | :host {
|
5 | --_focus: var(--app-focus, #000);
|
6 | --_hover: var(--app-hover, #6200ee);
|
7 | --_on-disabled: var(--app-on-disabled, rgba(0, 0, 0, .38));
|
8 | --_on-focus: var(--app-on-focus, #000);
|
9 | --_on-hover: var(--app-on-hover, #000);
|
10 | --_on-primary: var(--app-on-primary, #fff);
|
11 | --_on-surface: var(--app-on-surface, #000);
|
12 | --_on-today: var(--app-on-today, #000);
|
13 | --_on-week-number: var(--app-on-week-number, #8c8c8c);
|
14 | --_on-weekday: var(--app-on-weekday, #8c8c8c);
|
15 | --_primary: var(--app-primary, #6200ee);
|
16 | --_selected-focus: var(--app-selected-focus, #000);
|
17 | --_selected-hover: var(--app-selected-hover, #6200ee);
|
18 | --_selected-on-focus: var(--app-selected-on-focus, #fff);
|
19 | --_selected-on-hover: var(--app-selected-on-hover, #fff);
|
20 | --_shape: var(--app-shape, 4px);
|
21 | --_surface: var(--app-surface, #fff);
|
22 | --_today: var(--app-today, #000);
|
23 | }
|
24 | `;
|
25 | export const resetAnchor = css `
|
26 | a {
|
27 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
28 |
|
29 | position: relative;
|
30 | display: inline-block;
|
31 | background: initial;
|
32 | color: inherit;
|
33 | font: inherit;
|
34 | text-transform: inherit;
|
35 | text-decoration: none;
|
36 | outline: none;
|
37 | }
|
38 | a:focus:not(:focus-visible) {
|
39 | text-decoration: none;
|
40 | }
|
41 | a:focus-visible {
|
42 | text-decoration: underline;
|
43 | }
|
44 | `;
|
45 | export const resetButton = css `
|
46 | button {
|
47 | -webkit-appearance: none;
|
48 | -moz-appearance: none;
|
49 | appearance: none;
|
50 |
|
51 | position: relative;
|
52 | display: block;
|
53 | margin: 0;
|
54 | padding: 0;
|
55 | background: none; /** NOTE: IE11 fix */
|
56 | color: inherit;
|
57 | border: none;
|
58 | font: inherit;
|
59 | text-align: left;
|
60 | text-transform: inherit;
|
61 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
62 | }
|
63 | `;
|
64 | export const resetShadowRoot = css `
|
65 | :host {
|
66 | position: relative;
|
67 | }
|
68 |
|
69 | * {
|
70 | box-sizing: border-box;
|
71 | }
|
72 | `;
|
73 | export const resetSvgIcon = css `
|
74 | svg {
|
75 | display: block;
|
76 | min-width: var(--svg-icon-min-width, 24px);
|
77 | min-height: var(--svg-icon-min-height, 24px);
|
78 | fill: var(--svg-icon-fill, currentColor);
|
79 | pointer-events: none;
|
80 | }
|
81 | `;
|
82 | export const webkitScrollbarStyling = css `
|
83 | /**
|
84 | * NOTE: Webkit-specific scrollbar styling
|
85 | */
|
86 | ::-webkit-scrollbar {
|
87 | width: 8px;
|
88 | background: none;
|
89 | }
|
90 | ::-webkit-scrollbar-thumb {
|
91 | width: inherit;
|
92 | background-color: #cdcdcd;
|
93 | border-radius: 4px;
|
94 | }
|
95 | ::-webkit-scrollbar-thumb:hover {
|
96 | background-color: rgba(0, 0, 0, .35);
|
97 | }
|
98 | ::-webkit-scrollbar-thumb:active {
|
99 | background-color: rgba(0, 0, 0, .55);
|
100 | }
|
101 | @media (prefers-color-scheme: dark) {
|
102 | ::-webkit-scrollbar-thumb {
|
103 | background-color: #686868;
|
104 | }
|
105 | ::-webkit-scrollbar-thumb:hover {
|
106 | background-color: #494949;
|
107 | }
|
108 | ::-webkit-scrollbar-thumb:active {
|
109 | background-color: #5a5a5a;
|
110 | }
|
111 | }
|
112 | `;
|