@rolemodel/optics 2.1.0 → 2.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.yarn/install-state.gz +0 -0
- package/.yarn/releases/yarn-4.8.1.cjs +935 -0
- package/.yarnrc.yml +1 -1
- package/dist/LICENSE +21 -0
- package/dist/README.md +78 -0
- package/dist/css/optics.css +4963 -9
- package/dist/css/optics.min.css +1 -4970
- package/dist/package.json +87 -0
- package/package.json +7 -5
- package/postcss.config.js +6 -3
- package/.yarn/releases/yarn-4.2.2.cjs +0 -894
- package/dist/css/recipes/16six-sidebar.css +0 -63
- package/dist/css/recipes/aligned-header.css +0 -16
- package/dist/css/recipes/domains-sidebar.css +0 -40
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
/* 16Six Sidebar Example */
|
|
2
|
-
|
|
3
|
-
.icon--rotated-135 {
|
|
4
|
-
rotate: 135deg;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
.icon--rotated-90 {
|
|
8
|
-
rotate: 90deg;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.sidebar {
|
|
12
|
-
.sidebar__brand {
|
|
13
|
-
justify-content: center;
|
|
14
|
-
|
|
15
|
-
.sidebar__brand-label {
|
|
16
|
-
display: none;
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
&.sidebar--16six {
|
|
21
|
-
--_op-sidebar-background-color: hsl(256deg 66% 15%);
|
|
22
|
-
--_op-sidebar-text-color: hsl(26deg 100% 95%);
|
|
23
|
-
--_op-sidebar-border-color: hsl(26deg 100% 95%);
|
|
24
|
-
--_op-sidebar-rail-width: 6.4rem;
|
|
25
|
-
--_op-sidebar-drawer-width: 22.4rem;
|
|
26
|
-
--_op-sidebar-drawer-brand-width: calc(var(--op-space-3x-large) + (2 * var(--op-space-medium)));
|
|
27
|
-
--_op-sidebar-brand-spacing: var(--op-space-medium) var(--op-space-x-small);
|
|
28
|
-
--_op-sidebar-content-item-spacing: var(--op-space-x-small);
|
|
29
|
-
--_op-sidebar-spacing: 0 0 var(--op-space-x-small);
|
|
30
|
-
|
|
31
|
-
.sidebar__brand {
|
|
32
|
-
display: flex;
|
|
33
|
-
margin: 0;
|
|
34
|
-
color: inherit;
|
|
35
|
-
gap: var(--op-space-medium);
|
|
36
|
-
text-decoration: none;
|
|
37
|
-
|
|
38
|
-
svg {
|
|
39
|
-
width: var(--op-space-3x-large);
|
|
40
|
-
height: var(--op-space-3x-large);
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.sidebar__brand-label {
|
|
44
|
-
display: flex;
|
|
45
|
-
flex-direction: column;
|
|
46
|
-
font-size: var(--op-font-small);
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.btn {
|
|
51
|
-
&.btn--no-border {
|
|
52
|
-
background-color: transparent;
|
|
53
|
-
box-shadow: none;
|
|
54
|
-
color: var(--_op-sidebar-text-color);
|
|
55
|
-
|
|
56
|
-
&.btn--active,
|
|
57
|
-
&:hover {
|
|
58
|
-
background-color: hsl(256deg 23% 32%);
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
.aligned-header {
|
|
2
|
-
/* Public API (allowed to be overridden) */
|
|
3
|
-
--_op-line-height: var(--op-line-height-base);
|
|
4
|
-
--_op-font-size: var(--op-font-4x-large);
|
|
5
|
-
|
|
6
|
-
font-size: var(--_op-font-size);
|
|
7
|
-
font-weight: var(--op-font-weight-semi-bold);
|
|
8
|
-
line-height: var(--_op-line-height);
|
|
9
|
-
|
|
10
|
-
.aligned-header__centered-suffix {
|
|
11
|
-
display: inline-flex;
|
|
12
|
-
height: calc(var(--_op-line-height) * var(--_op-font-size));
|
|
13
|
-
align-items: center;
|
|
14
|
-
vertical-align: top;
|
|
15
|
-
}
|
|
16
|
-
}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
/* Domains Sidebar Example */
|
|
2
|
-
.sidebar {
|
|
3
|
-
&.sidebar--domains {
|
|
4
|
-
--_op-sidebar-drawer-width: 28rem;
|
|
5
|
-
--_op-sidebar-content-spacing: 0;
|
|
6
|
-
--_op-sidebar-content-item-spacing: 0;
|
|
7
|
-
|
|
8
|
-
box-shadow: none;
|
|
9
|
-
|
|
10
|
-
.btn {
|
|
11
|
-
border-radius: 0;
|
|
12
|
-
|
|
13
|
-
&.btn--no-border {
|
|
14
|
-
box-shadow: none;
|
|
15
|
-
|
|
16
|
-
&.btn--active {
|
|
17
|
-
background-color: var(--op-color-primary-plus-five);
|
|
18
|
-
color: var(--op-color-primary-on-plus-five);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
&:hover:not(.btn--active) {
|
|
22
|
-
background-color: var(--op-color-neutral-plus-six);
|
|
23
|
-
box-shadow: none;
|
|
24
|
-
color: var(--op-color-neutral-on-plus-six);
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
&.btn--pill-right {
|
|
29
|
-
border-radius: 0 var(--op-radius-pill) var(--op-radius-pill) 0;
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.sidebar__footer {
|
|
34
|
-
display: flex;
|
|
35
|
-
align-items: center;
|
|
36
|
-
gap: var(--op-space-small);
|
|
37
|
-
padding-inline-start: var(--op-space-large);
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
}
|