aboutsummaryrefslogtreecommitdiff
path: root/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/data-widget.js
diff options
context:
space:
mode:
Diffstat (limited to 'users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/data-widget.js')
-rwxr-xr-xusers/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/data-widget.js65
1 files changed, 65 insertions, 0 deletions
diff --git a/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/data-widget.js b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/data-widget.js
new file mode 100755
index 0000000..f0b5cf1
--- /dev/null
+++ b/users/ryan/modules/simple-bar/simple-bar-source/lib/styles/components/data/data-widget.js
@@ -0,0 +1,65 @@
1// Styles for /lib/components/data/data-widget.jsx component
2export const dataWidgetStyles = /* css */ `
3.data-widget {
4 display: flex;
5 align-items: center;
6 margin: var(--item-outer-margin);
7 padding: var(--item-inner-margin);
8 color: var(--background);
9 font-family: var(--font);
10 font-size: inherit;
11 background-color: var(--minor);
12 text-decoration: none;
13 white-space: nowrap;
14 border-radius: var(--item-radius);
15 border: 0;
16 outline: none;
17 cursor: default;
18 user-select: none;
19 -webkit-user-select: none;
20 box-shadow: var(--light-shadow);
21 transition: all 160ms var(--transition-easing);
22}
23.simple-bar--no-shadow .data-widget {
24 box-shadow: none;
25}
26.simple-bar--no-color-in-data .data-widget {
27 color: var(--foreground);
28 background-color: var(--minor);
29}
30.simple-bar--widgets-background-color-as-foreground .data-widget {
31 background-color: transparent;
32 box-shadow: none;
33}
34.simple-bar--widgets-background-color-as-foreground.simple-bar--no-color-in-data .data-widget {
35 color: var(--foreground) !important;
36 background-color: transparent;
37}
38.data-widget--clickable {
39 cursor: pointer;
40}
41.data-widget--clickable:hover {
42 box-shadow: var(--light-shadow), var(--hover-ring);
43}
44.data-widget--clickable:active {
45 box-shadow: var(--light-shadow), var(--focus-ring);
46}
47.data-widget > svg {
48 width: 14px;
49 height: 14px;
50 margin-right: 7px;
51 fill: currentColor;
52}
53.data-widget__inner {
54 max-width: var(--item-max-width);
55 display: flex;
56 flew-wrap: nowrap;
57 overflow: hidden;
58}
59.data-widget__slider {
60 display: flex;
61 align-items: center;
62 white-space: nowrap;
63 transition: transform 160ms var(--transition-easing);
64}
65`;