@neo4j-ndl/base 3.4.4 → 3.5.1
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/lib/cjs/tokens/js/storybook-design-token.js +1 -1
- package/lib/cjs/tokens/js/tokens-esm.js +1 -1
- package/lib/cjs/tokens/js/tokens.js +1 -1
- package/lib/esm/tokens/js/storybook-design-token.js +1 -1
- package/lib/esm/tokens/js/tokens-esm.js +1 -1
- package/lib/esm/tokens/js/tokens.js +1 -1
- package/lib/neo4j-ds-styles.css +312 -1
- package/lib/tokens/css/tokens.css +1 -1
- package/lib/tokens/js/tokens-raw.js +1 -1
- package/lib/tokens/js/tokens.js +1 -1
- package/lib/tokens/scss/tokens.scss +1 -1
- package/lib/types/tokens/js/storybook-design-token.d.ts +1 -1
- package/package.json +1 -1
package/lib/neo4j-ds-styles.css
CHANGED
|
@@ -1357,7 +1357,7 @@ a.ndl-btn {
|
|
|
1357
1357
|
justify-content:center;
|
|
1358
1358
|
gap:2px;
|
|
1359
1359
|
border-radius:8px;
|
|
1360
|
-
color:rgb(var(--theme-palette-neutral-
|
|
1360
|
+
color:rgb(var(--theme-palette-neutral-icon));
|
|
1361
1361
|
outline:2px solid transparent;
|
|
1362
1362
|
outline-offset:2px;
|
|
1363
1363
|
}
|
|
@@ -7802,6 +7802,301 @@ button.ndl-avatar:focus-visible {
|
|
|
7802
7802
|
r:5%;
|
|
7803
7803
|
}
|
|
7804
7804
|
}
|
|
7805
|
+
.ndl-side-nav{
|
|
7806
|
+
--side-nav-width-collapsed:52px;
|
|
7807
|
+
--side-nav-width-expanded:196px;
|
|
7808
|
+
--side-nav-width:var(--side-nav-width-collapsed);
|
|
7809
|
+
}
|
|
7810
|
+
.ndl-side-nav.ndl-side-nav-root{
|
|
7811
|
+
width:calc(var(--side-nav-width) + 1px);
|
|
7812
|
+
transition:var(--transitions-full-quick);
|
|
7813
|
+
transition-property:width;
|
|
7814
|
+
position:relative;
|
|
7815
|
+
height:100%;
|
|
7816
|
+
flex-shrink:0;
|
|
7817
|
+
}
|
|
7818
|
+
.ndl-side-nav.ndl-side-nav-root.ndl-side-nav-expanded{
|
|
7819
|
+
--side-nav-width:var(--side-nav-width-expanded);
|
|
7820
|
+
width:-moz-fit-content;
|
|
7821
|
+
width:fit-content;
|
|
7822
|
+
z-index:var(--z-index-0);
|
|
7823
|
+
}
|
|
7824
|
+
.ndl-side-nav.ndl-side-nav-root.ndl-side-nav-expanded .ndl-side-nav-nav {
|
|
7825
|
+
overflow-y:auto;
|
|
7826
|
+
}
|
|
7827
|
+
.ndl-side-nav.ndl-side-nav-root.ndl-side-nav-expanded .ndl-side-nav-inner {
|
|
7828
|
+
position:relative;
|
|
7829
|
+
}
|
|
7830
|
+
.ndl-side-nav.ndl-side-nav-root.ndl-side-nav-expanded .ndl-side-nav-pin-button {
|
|
7831
|
+
visibility:visible;
|
|
7832
|
+
opacity:1;
|
|
7833
|
+
}
|
|
7834
|
+
.ndl-side-nav.ndl-side-nav-root.ndl-side-nav-collapsed{
|
|
7835
|
+
--side-nav-width:var(--side-nav-width-collapsed);
|
|
7836
|
+
width:-moz-fit-content;
|
|
7837
|
+
width:fit-content;
|
|
7838
|
+
z-index:var(--z-index-0);
|
|
7839
|
+
}
|
|
7840
|
+
.ndl-side-nav.ndl-side-nav-root.ndl-side-nav-collapsed .ndl-side-nav-nav {
|
|
7841
|
+
overflow-y:auto;
|
|
7842
|
+
}
|
|
7843
|
+
.ndl-side-nav.ndl-side-nav-root.ndl-side-nav-collapsed .ndl-side-nav-inner {
|
|
7844
|
+
position:relative;
|
|
7845
|
+
}
|
|
7846
|
+
.ndl-side-nav.ndl-side-nav-popover {
|
|
7847
|
+
border-radius:10px;
|
|
7848
|
+
border-width:1px;
|
|
7849
|
+
border-color:rgb(var(--theme-palette-neutral-border-weak));
|
|
7850
|
+
background-color:rgb(var(--theme-palette-neutral-bg-weak));
|
|
7851
|
+
padding:0px;
|
|
7852
|
+
--tw-shadow:var(--theme-shadow-overlay);
|
|
7853
|
+
--tw-shadow-colored:var(--theme-shadow-overlay);
|
|
7854
|
+
box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
7855
|
+
|
|
7856
|
+
width:220px;
|
|
7857
|
+
}
|
|
7858
|
+
.ndl-side-nav.ndl-side-nav-popover .ndl-side-nav-popover-list {
|
|
7859
|
+
display:flex;
|
|
7860
|
+
width:100%;
|
|
7861
|
+
flex-direction:column;
|
|
7862
|
+
gap:4px;
|
|
7863
|
+
padding-top:8px;
|
|
7864
|
+
padding-bottom:8px;
|
|
7865
|
+
padding-left:0px;
|
|
7866
|
+
padding-right:8px;
|
|
7867
|
+
}
|
|
7868
|
+
.ndl-side-nav .ndl-side-nav-inner {
|
|
7869
|
+
position:relative;
|
|
7870
|
+
z-index:10;
|
|
7871
|
+
box-sizing:border-box;
|
|
7872
|
+
display:flex;
|
|
7873
|
+
height:100%;
|
|
7874
|
+
width:-moz-fit-content;
|
|
7875
|
+
width:fit-content;
|
|
7876
|
+
flex-direction:column;
|
|
7877
|
+
justify-content:space-between;
|
|
7878
|
+
overflow:hidden;
|
|
7879
|
+
border-right-width:1px;
|
|
7880
|
+
border-style:solid;
|
|
7881
|
+
border-color:rgb(var(--theme-palette-neutral-border-weak));
|
|
7882
|
+
background-color:rgb(var(--theme-palette-neutral-bg-weak));
|
|
7883
|
+
padding:0px;
|
|
7884
|
+
}
|
|
7885
|
+
.ndl-side-nav .ndl-side-nav-inner.ndl-side-nav-hover{
|
|
7886
|
+
--side-nav-width:var(--side-nav-width-expanded);
|
|
7887
|
+
position:absolute;
|
|
7888
|
+
left:0px;
|
|
7889
|
+
top:0px;
|
|
7890
|
+
z-index:10;
|
|
7891
|
+
--tw-shadow:var(--theme-shadow-overlay);
|
|
7892
|
+
--tw-shadow-colored:var(--theme-shadow-overlay);
|
|
7893
|
+
box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
7894
|
+
}
|
|
7895
|
+
.ndl-side-nav .ndl-side-nav-inner.ndl-side-nav-hover .ndl-side-nav-nav{
|
|
7896
|
+
overflow-y:auto;
|
|
7897
|
+
}
|
|
7898
|
+
.ndl-side-nav .ndl-side-nav-inner.ndl-side-nav-hover .ndl-side-nav-pin-button {
|
|
7899
|
+
visibility:visible;
|
|
7900
|
+
opacity:1;
|
|
7901
|
+
}
|
|
7902
|
+
.ndl-side-nav .ndl-side-nav-inner .ndl-side-nav-list {
|
|
7903
|
+
display:flex;
|
|
7904
|
+
flex-direction:column;
|
|
7905
|
+
gap:4px;
|
|
7906
|
+
padding-right:8px;
|
|
7907
|
+
|
|
7908
|
+
width:var(--side-nav-width);
|
|
7909
|
+
transition:var(--transitions-full-quick);
|
|
7910
|
+
transition-property:width;
|
|
7911
|
+
}
|
|
7912
|
+
.ndl-side-nav .ndl-side-nav-inner .ndl-side-nav-nav {
|
|
7913
|
+
display:flex;
|
|
7914
|
+
flex-direction:column;
|
|
7915
|
+
gap:4px;
|
|
7916
|
+
overflow:hidden;
|
|
7917
|
+
padding-bottom:8px;
|
|
7918
|
+
padding-top:24px;
|
|
7919
|
+
}
|
|
7920
|
+
.ndl-side-nav .ndl-side-nav-item,
|
|
7921
|
+
.ndl-side-nav .ndl-side-nav-category-item {
|
|
7922
|
+
display:flex;
|
|
7923
|
+
cursor:default;
|
|
7924
|
+
flex-direction:column;
|
|
7925
|
+
gap:4px;
|
|
7926
|
+
color:rgb(var(--theme-palette-neutral-text-default));
|
|
7927
|
+
}
|
|
7928
|
+
.ndl-side-nav .ndl-side-nav-item.ndl-selected .ndl-side-nav-selected-indicator, .ndl-side-nav .ndl-side-nav-category-item.ndl-selected .ndl-side-nav-selected-indicator{
|
|
7929
|
+
background:currentColor;
|
|
7930
|
+
}
|
|
7931
|
+
.ndl-side-nav .ndl-side-nav-item .ndl-side-nav-item-inner, .ndl-side-nav .ndl-side-nav-category-item .ndl-side-nav-item-inner {
|
|
7932
|
+
display:flex;
|
|
7933
|
+
height:36px;
|
|
7934
|
+
width:100%;
|
|
7935
|
+
flex-direction:row;
|
|
7936
|
+
align-items:center;
|
|
7937
|
+
gap:4px;
|
|
7938
|
+
}
|
|
7939
|
+
.ndl-side-nav .ndl-side-nav-item .ndl-side-nav-item-button, .ndl-side-nav .ndl-side-nav-category-item .ndl-side-nav-item-button {
|
|
7940
|
+
display:flex;
|
|
7941
|
+
height:100%;
|
|
7942
|
+
width:100%;
|
|
7943
|
+
flex-direction:row;
|
|
7944
|
+
align-items:center;
|
|
7945
|
+
gap:8px;
|
|
7946
|
+
overflow:hidden;
|
|
7947
|
+
border-radius:8px;
|
|
7948
|
+
padding:8px;
|
|
7949
|
+
outline:2px solid transparent;
|
|
7950
|
+
outline-offset:2px;
|
|
7951
|
+
}
|
|
7952
|
+
.ndl-side-nav .ndl-side-nav-item .ndl-side-nav-item-button:hover, .ndl-side-nav .ndl-side-nav-category-item .ndl-side-nav-item-button:hover {
|
|
7953
|
+
background-color:rgb(var(--theme-palette-neutral-hover));
|
|
7954
|
+
}
|
|
7955
|
+
.ndl-side-nav .ndl-side-nav-item .ndl-side-nav-item-button:focus-visible, .ndl-side-nav .ndl-side-nav-category-item .ndl-side-nav-item-button:focus-visible {
|
|
7956
|
+
outline-width:2px;
|
|
7957
|
+
outline-offset:0px;
|
|
7958
|
+
outline-color:rgb(var(--theme-palette-primary-focus));
|
|
7959
|
+
}
|
|
7960
|
+
.ndl-side-nav .ndl-side-nav-item .ndl-side-nav-selected-indicator, .ndl-side-nav .ndl-side-nav-category-item .ndl-side-nav-selected-indicator {
|
|
7961
|
+
height:100%;
|
|
7962
|
+
width:4px;
|
|
7963
|
+
flex-shrink:0;
|
|
7964
|
+
border-top-right-radius:4px;
|
|
7965
|
+
border-bottom-right-radius:4px;
|
|
7966
|
+
background-color:transparent;
|
|
7967
|
+
}
|
|
7968
|
+
.ndl-side-nav .ndl-side-nav-item .ndl-side-nav-item-left-element, .ndl-side-nav .ndl-side-nav-category-item .ndl-side-nav-item-left-element {
|
|
7969
|
+
display:flex;
|
|
7970
|
+
flex-shrink:0;
|
|
7971
|
+
color:rgb(var(--theme-palette-neutral-icon));
|
|
7972
|
+
}
|
|
7973
|
+
.ndl-side-nav .ndl-side-nav-item .ndl-side-nav-item-left-element .ndl-icon-svg, .ndl-side-nav .ndl-side-nav-category-item .ndl-side-nav-item-left-element .ndl-icon-svg {
|
|
7974
|
+
width:20px;
|
|
7975
|
+
height:20px;
|
|
7976
|
+
}
|
|
7977
|
+
.ndl-side-nav .ndl-side-nav-item .ndl-side-nav-item-label, .ndl-side-nav .ndl-side-nav-category-item .ndl-side-nav-item-label {
|
|
7978
|
+
overflow:hidden;
|
|
7979
|
+
text-overflow:ellipsis;
|
|
7980
|
+
white-space:nowrap;
|
|
7981
|
+
}
|
|
7982
|
+
.ndl-side-nav .ndl-side-nav-item .ndl-side-nav-item-right-element, .ndl-side-nav .ndl-side-nav-category-item .ndl-side-nav-item-right-element {
|
|
7983
|
+
margin-left:auto;
|
|
7984
|
+
display:flex;
|
|
7985
|
+
flex-shrink:0;
|
|
7986
|
+
align-items:center;
|
|
7987
|
+
}
|
|
7988
|
+
.ndl-side-nav .ndl-side-nav-item.ndl-selected {
|
|
7989
|
+
color:rgb(var(--theme-palette-primary-text));
|
|
7990
|
+
}
|
|
7991
|
+
.ndl-side-nav .ndl-side-nav-item.ndl-selected .ndl-side-nav-item-button {
|
|
7992
|
+
background-color:rgb(var(--theme-palette-primary-bg-selected));
|
|
7993
|
+
}
|
|
7994
|
+
.ndl-side-nav .ndl-side-nav-item.ndl-selected .ndl-side-nav-item-button:hover {
|
|
7995
|
+
background-color:rgb(var(--theme-palette-primary-bg-selected));
|
|
7996
|
+
}
|
|
7997
|
+
.ndl-side-nav .ndl-side-nav-item.ndl-selected .ndl-side-nav-item-left-element {
|
|
7998
|
+
color:rgb(var(--theme-palette-primary-icon));
|
|
7999
|
+
}
|
|
8000
|
+
.ndl-side-nav .ndl-side-nav-item.ndl-selected .ndl-side-nav-item-badge.ndl-danger {
|
|
8001
|
+
background-color:rgb(var(--theme-palette-danger-bg-status));
|
|
8002
|
+
color:rgb(var(--theme-palette-neutral-text-inverse));
|
|
8003
|
+
}
|
|
8004
|
+
.ndl-side-nav .ndl-side-nav-item.ndl-selected .ndl-side-nav-item-badge.ndl-warning {
|
|
8005
|
+
background-color:rgb(var(--theme-palette-warning-bg-status));
|
|
8006
|
+
color:rgb(var(--theme-palette-neutral-text-inverse));
|
|
8007
|
+
}
|
|
8008
|
+
.ndl-side-nav .ndl-side-nav-item.ndl-selected .ndl-side-nav-item-badge.ndl-info {
|
|
8009
|
+
background-color:rgb(var(--theme-palette-primary-bg-status));
|
|
8010
|
+
color:rgb(var(--theme-palette-neutral-text-inverse));
|
|
8011
|
+
}
|
|
8012
|
+
.ndl-side-nav .ndl-side-nav-item .ndl-side-nav-item-button:hover {
|
|
8013
|
+
cursor:pointer;
|
|
8014
|
+
}
|
|
8015
|
+
.ndl-side-nav .ndl-side-nav-category-item.ndl-selected {
|
|
8016
|
+
color:rgb(var(--theme-palette-neutral-text-default));
|
|
8017
|
+
}
|
|
8018
|
+
.ndl-side-nav .ndl-side-nav-category-item .ndl-side-nav-item-button:hover {
|
|
8019
|
+
cursor:context-menu;
|
|
8020
|
+
}
|
|
8021
|
+
.ndl-side-nav .ndl-side-nav-category-header {
|
|
8022
|
+
display:flex;
|
|
8023
|
+
height:40px;
|
|
8024
|
+
width:100%;
|
|
8025
|
+
align-items:center;
|
|
8026
|
+
overflow:hidden;
|
|
8027
|
+
text-overflow:ellipsis;
|
|
8028
|
+
white-space:nowrap;
|
|
8029
|
+
padding-top:8px;
|
|
8030
|
+
padding-bottom:8px;
|
|
8031
|
+
padding-left:8px;
|
|
8032
|
+
}
|
|
8033
|
+
.ndl-side-nav .ndl-side-nav-category-header.ndl-side-nav-category-header-expanded {
|
|
8034
|
+
display:block;
|
|
8035
|
+
padding-left:16px;
|
|
8036
|
+
}
|
|
8037
|
+
.ndl-side-nav .ndl-side-nav-footer {
|
|
8038
|
+
display:flex;
|
|
8039
|
+
width:100%;
|
|
8040
|
+
flex-direction:row;
|
|
8041
|
+
justify-content:flex-end;
|
|
8042
|
+
padding-top:8px;
|
|
8043
|
+
padding-bottom:8px;
|
|
8044
|
+
padding-left:8px;
|
|
8045
|
+
padding-right:8px;
|
|
8046
|
+
}
|
|
8047
|
+
.ndl-side-nav .ndl-side-nav-pin-button {
|
|
8048
|
+
visibility:hidden;
|
|
8049
|
+
opacity:0;
|
|
8050
|
+
transition:var(--transitions-full-quick);
|
|
8051
|
+
transition-property:visibility, opacity;
|
|
8052
|
+
}
|
|
8053
|
+
.ndl-side-nav .ndl-side-nav-divider{
|
|
8054
|
+
--ndl-side-nav-divider-left-margin:var(--space-4);
|
|
8055
|
+
margin-top:4px;
|
|
8056
|
+
margin-bottom:4px;
|
|
8057
|
+
margin-left:var(--ndl-side-nav-divider-left-margin);
|
|
8058
|
+
width:calc(100% - var(--ndl-side-nav-divider-left-margin));
|
|
8059
|
+
}
|
|
8060
|
+
.ndl-side-nav .ndl-side-nav-item-badge {
|
|
8061
|
+
width:20px;
|
|
8062
|
+
height:20px;
|
|
8063
|
+
overflow:hidden;
|
|
8064
|
+
text-overflow:ellipsis;
|
|
8065
|
+
white-space:nowrap;
|
|
8066
|
+
border-radius:4px;
|
|
8067
|
+
}
|
|
8068
|
+
.ndl-side-nav .ndl-side-nav-item-badge.ndl-danger {
|
|
8069
|
+
background-color:rgb(var(--theme-palette-danger-bg-weak));
|
|
8070
|
+
color:rgb(var(--theme-palette-danger-text));
|
|
8071
|
+
}
|
|
8072
|
+
.ndl-side-nav .ndl-side-nav-item-badge.ndl-warning {
|
|
8073
|
+
background-color:rgb(var(--theme-palette-warning-bg-weak));
|
|
8074
|
+
color:rgb(var(--theme-palette-warning-text));
|
|
8075
|
+
}
|
|
8076
|
+
.ndl-side-nav .ndl-side-nav-item-badge.ndl-info {
|
|
8077
|
+
background-color:rgb(var(--theme-palette-primary-bg-weak));
|
|
8078
|
+
color:rgb(var(--theme-palette-primary-text));
|
|
8079
|
+
}
|
|
8080
|
+
.ndl-icon-indicator-wrapper {
|
|
8081
|
+
position:relative;
|
|
8082
|
+
}
|
|
8083
|
+
.ndl-icon-indicator-wrapper .ndl-icon-indicator{
|
|
8084
|
+
position:absolute;
|
|
8085
|
+
top:-2.5px;
|
|
8086
|
+
right:-2.5px;
|
|
8087
|
+
}
|
|
8088
|
+
.ndl-icon-indicator-wrapper .ndl-icon-indicator circle{
|
|
8089
|
+
vector-effect:non-scaling-stroke;
|
|
8090
|
+
}
|
|
8091
|
+
.ndl-icon-indicator-wrapper .ndl-icon-indicator.ndl-info {
|
|
8092
|
+
fill:rgb(var(--theme-palette-primary-bg-status));
|
|
8093
|
+
}
|
|
8094
|
+
.ndl-icon-indicator-wrapper .ndl-icon-indicator.ndl-warning {
|
|
8095
|
+
fill:rgb(var(--theme-palette-warning-bg-status));
|
|
8096
|
+
}
|
|
8097
|
+
.ndl-icon-indicator-wrapper .ndl-icon-indicator.ndl-danger {
|
|
8098
|
+
fill:rgb(var(--theme-palette-danger-bg-status));
|
|
8099
|
+
}
|
|
7805
8100
|
.n-absolute {
|
|
7806
8101
|
position:absolute;
|
|
7807
8102
|
}
|
|
@@ -7907,6 +8202,10 @@ button.ndl-avatar:focus-visible {
|
|
|
7907
8202
|
width:144px;
|
|
7908
8203
|
height:144px;
|
|
7909
8204
|
}
|
|
8205
|
+
.n-size-4 {
|
|
8206
|
+
width:16px;
|
|
8207
|
+
height:16px;
|
|
8208
|
+
}
|
|
7910
8209
|
.n-size-5 {
|
|
7911
8210
|
width:20px;
|
|
7912
8211
|
height:20px;
|
|
@@ -7970,6 +8269,9 @@ button.ndl-avatar:focus-visible {
|
|
|
7970
8269
|
.n-h-\[500px\] {
|
|
7971
8270
|
height:500px;
|
|
7972
8271
|
}
|
|
8272
|
+
.n-h-\[calc\(40vh-32px\)\] {
|
|
8273
|
+
height:calc(40vh - 32px);
|
|
8274
|
+
}
|
|
7973
8275
|
.n-h-full {
|
|
7974
8276
|
height:100%;
|
|
7975
8277
|
}
|
|
@@ -7982,6 +8284,9 @@ button.ndl-avatar:focus-visible {
|
|
|
7982
8284
|
.n-h-token-9 {
|
|
7983
8285
|
height:48px;
|
|
7984
8286
|
}
|
|
8287
|
+
.n-min-h-\[700px\] {
|
|
8288
|
+
min-height:700px;
|
|
8289
|
+
}
|
|
7985
8290
|
.n-w-48 {
|
|
7986
8291
|
width:192px;
|
|
7987
8292
|
}
|
|
@@ -8008,6 +8313,9 @@ button.ndl-avatar:focus-visible {
|
|
|
8008
8313
|
.n-w-token-11 {
|
|
8009
8314
|
width:96px;
|
|
8010
8315
|
}
|
|
8316
|
+
.n-max-w-\[1024px\] {
|
|
8317
|
+
max-width:1024px;
|
|
8318
|
+
}
|
|
8011
8319
|
.n-max-w-\[1200px\] {
|
|
8012
8320
|
max-width:1200px;
|
|
8013
8321
|
}
|
|
@@ -42848,6 +43156,9 @@ button.ndl-avatar:focus-visible {
|
|
|
42848
43156
|
.n-p-2 {
|
|
42849
43157
|
padding:8px;
|
|
42850
43158
|
}
|
|
43159
|
+
.n-p-8 {
|
|
43160
|
+
padding:32px;
|
|
43161
|
+
}
|
|
42851
43162
|
.n-p-token-0 {
|
|
42852
43163
|
padding:0px;
|
|
42853
43164
|
}
|
package/lib/tokens/js/tokens.js
CHANGED