UNPKG

2.91 kBJavaScriptView Raw
1import {
2 component_styles_default
3} from "./chunk.7IGWJVQF.js";
4import {
5 r
6} from "./chunk.WWAD5WF4.js";
7
8// src/components/drawer/drawer.styles.ts
9var drawer_styles_default = r`
10 ${component_styles_default}
11
12 :host {
13 --size: 25rem;
14 --header-spacing: var(--sl-spacing-large);
15 --body-spacing: var(--sl-spacing-large);
16 --footer-spacing: var(--sl-spacing-large);
17
18 display: contents;
19 }
20
21 .drawer {
22 top: 0;
23 inset-inline-start: 0;
24 width: 100%;
25 height: 100%;
26 pointer-events: none;
27 overflow: hidden;
28 }
29
30 .drawer--contained {
31 position: absolute;
32 z-index: initial;
33 }
34
35 .drawer--fixed {
36 position: fixed;
37 z-index: var(--sl-z-index-drawer);
38 }
39
40 .drawer__panel {
41 position: absolute;
42 display: flex;
43 flex-direction: column;
44 z-index: 2;
45 max-width: 100%;
46 max-height: 100%;
47 background-color: var(--sl-panel-background-color);
48 box-shadow: var(--sl-shadow-x-large);
49 transition: var(--sl-transition-medium) transform;
50 overflow: auto;
51 pointer-events: all;
52 }
53
54 .drawer__panel:focus {
55 outline: none;
56 }
57
58 .drawer--top .drawer__panel {
59 top: 0;
60 inset-inline-end: auto;
61 bottom: auto;
62 inset-inline-start: 0;
63 width: 100%;
64 height: var(--size);
65 }
66
67 .drawer--end .drawer__panel {
68 top: 0;
69 inset-inline-end: 0;
70 bottom: auto;
71 inset-inline-start: auto;
72 width: var(--size);
73 height: 100%;
74 }
75
76 .drawer--bottom .drawer__panel {
77 top: auto;
78 inset-inline-end: auto;
79 bottom: 0;
80 inset-inline-start: 0;
81 width: 100%;
82 height: var(--size);
83 }
84
85 .drawer--start .drawer__panel {
86 top: 0;
87 inset-inline-end: auto;
88 bottom: auto;
89 inset-inline-start: 0;
90 width: var(--size);
91 height: 100%;
92 }
93
94 .drawer__header {
95 display: flex;
96 }
97
98 .drawer__title {
99 flex: 1 1 auto;
100 font: inherit;
101 font-size: var(--sl-font-size-large);
102 line-height: var(--sl-line-height-dense);
103 padding: var(--header-spacing);
104 margin: 0;
105 }
106
107 .drawer__close {
108 flex: 0 0 auto;
109 display: flex;
110 align-items: center;
111 font-size: var(--sl-font-size-x-large);
112 padding: 0 var(--header-spacing);
113 }
114
115 .drawer__body {
116 flex: 1 1 auto;
117 padding: var(--body-spacing);
118 overflow: auto;
119 -webkit-overflow-scrolling: touch;
120 }
121
122 .drawer__footer {
123 text-align: right;
124 padding: var(--footer-spacing);
125 }
126
127 .drawer__footer ::slotted(sl-button:not(:last-of-type)) {
128 margin-inline-end: var(--sl-spacing-x-small);
129 }
130
131 .drawer:not(.drawer--has-footer) .drawer__footer {
132 display: none;
133 }
134
135 .drawer__overlay {
136 display: block;
137 position: fixed;
138 top: 0;
139 right: 0;
140 bottom: 0;
141 left: 0;
142 background-color: var(--sl-overlay-background-color);
143 pointer-events: all;
144 }
145
146 .drawer--contained .drawer__overlay {
147 position: absolute;
148 }
149`;
150
151export {
152 drawer_styles_default
153};