@neo4j-ndl/base 0.3.1 → 0.4.0
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/neo4j-ds-styles.css
CHANGED
|
@@ -420,7 +420,7 @@ Ensure the default browser behavior of the `hidden` attribute.
|
|
|
420
420
|
*/
|
|
421
421
|
/**
|
|
422
422
|
* Do not edit directly
|
|
423
|
-
* Generated on Fri,
|
|
423
|
+
* Generated on Fri, 27 May 2022 08:25:25 GMT
|
|
424
424
|
*/
|
|
425
425
|
:root {
|
|
426
426
|
--border-radius-sm: 4px;
|
|
@@ -736,7 +736,7 @@ h6,
|
|
|
736
736
|
letter-spacing: 0px;
|
|
737
737
|
line-height: 20px;
|
|
738
738
|
}
|
|
739
|
-
.ndl-btn.
|
|
739
|
+
.ndl-btn.medium{
|
|
740
740
|
height: 2.25rem;
|
|
741
741
|
padding-left: 1.5rem;
|
|
742
742
|
padding-right: 1.5rem;
|
|
@@ -772,7 +772,7 @@ h6,
|
|
|
772
772
|
padding: 0.375rem;
|
|
773
773
|
width: 1.75rem;
|
|
774
774
|
}
|
|
775
|
-
.ndl-btn.
|
|
775
|
+
.ndl-btn.medium.rectangle{
|
|
776
776
|
width: 2.25rem;
|
|
777
777
|
padding: 0.5rem;
|
|
778
778
|
}
|
|
@@ -828,6 +828,186 @@ a.ndl-btn{
|
|
|
828
828
|
-webkit-text-decoration-line: none;
|
|
829
829
|
text-decoration-line: none;
|
|
830
830
|
}
|
|
831
|
+
/**
|
|
832
|
+
*
|
|
833
|
+
* Copyright (c) "Neo4j"
|
|
834
|
+
* Neo4j Sweden AB [http://neo4j.com]
|
|
835
|
+
*
|
|
836
|
+
* This file is part of Neo4j.
|
|
837
|
+
*
|
|
838
|
+
* Neo4j is free software: you can redistribute it and/or modify
|
|
839
|
+
* it under the terms of the GNU General Public License as published by
|
|
840
|
+
* the Free Software Foundation, either version 3 of the License, or
|
|
841
|
+
* (at your option) any later version.
|
|
842
|
+
*
|
|
843
|
+
* This program is distributed in the hope that it will be useful,
|
|
844
|
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
845
|
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
846
|
+
* GNU General Public License for more details.
|
|
847
|
+
*
|
|
848
|
+
* You should have received a copy of the GNU General Public License
|
|
849
|
+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
850
|
+
*/
|
|
851
|
+
.ndl-icon-btn {
|
|
852
|
+
transition: background-color 75ms ease;
|
|
853
|
+
display: inline-flex;
|
|
854
|
+
cursor: pointer;
|
|
855
|
+
align-items: center;
|
|
856
|
+
justify-content: center;
|
|
857
|
+
gap: 0.125rem;
|
|
858
|
+
border-radius: 8px;
|
|
859
|
+
--tw-text-opacity: 1;
|
|
860
|
+
color: rgb(83 91 102 / var(--tw-text-opacity));
|
|
861
|
+
}
|
|
862
|
+
.ndl-icon-btn:not(.clean){
|
|
863
|
+
--tw-ring-opacity: 1;
|
|
864
|
+
--tw-ring-color: rgb(1 139 255 / var(--tw-ring-opacity));
|
|
865
|
+
}
|
|
866
|
+
.ndl-icon-btn:not(.clean):focus{
|
|
867
|
+
outline-width: 0px;
|
|
868
|
+
}
|
|
869
|
+
.ndl-icon-btn:not(.clean):focus-visible{
|
|
870
|
+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
871
|
+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
872
|
+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
873
|
+
--tw-ring-offset-width: 2px;
|
|
874
|
+
}
|
|
875
|
+
.ndl-icon-btn.clean{
|
|
876
|
+
--tw-ring-opacity: 1;
|
|
877
|
+
--tw-ring-color: rgb(1 139 255 / var(--tw-ring-opacity));
|
|
878
|
+
}
|
|
879
|
+
.ndl-icon-btn.clean:focus{
|
|
880
|
+
outline-width: 0px;
|
|
881
|
+
}
|
|
882
|
+
.ndl-icon-btn.clean:focus-visible{
|
|
883
|
+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
884
|
+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
885
|
+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
886
|
+
--tw-ring-offset-width: 0px;
|
|
887
|
+
}
|
|
888
|
+
.ndl-icon-btn.danger{
|
|
889
|
+
--tw-text-opacity: 1;
|
|
890
|
+
color: rgb(204 37 75 / var(--tw-text-opacity));
|
|
891
|
+
}
|
|
892
|
+
.ndl-icon-btn.floating{
|
|
893
|
+
--tw-shadow: 0px 4px 8px 0px rgba(12, 26, 37, 0.08);
|
|
894
|
+
--tw-shadow-colored: 0px 4px 8px 0px var(--tw-shadow-color);
|
|
895
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
896
|
+
}
|
|
897
|
+
.ndl-icon-btn:disabled{
|
|
898
|
+
cursor: not-allowed;
|
|
899
|
+
--tw-text-opacity: 1;
|
|
900
|
+
color: rgb(178 183 189 / var(--tw-text-opacity));
|
|
901
|
+
}
|
|
902
|
+
/* Simple Icons Sizes */
|
|
903
|
+
.ndl-icon-btn.small {
|
|
904
|
+
width: 24px;
|
|
905
|
+
height: 24px;
|
|
906
|
+
}
|
|
907
|
+
.ndl-icon-btn.small .ndl-icon {
|
|
908
|
+
width: 16px;
|
|
909
|
+
height: 16px;
|
|
910
|
+
}
|
|
911
|
+
.ndl-icon-btn.medium {
|
|
912
|
+
width: 28px;
|
|
913
|
+
height: 28px;
|
|
914
|
+
}
|
|
915
|
+
.ndl-icon-btn.medium .ndl-icon {
|
|
916
|
+
width: 20px;
|
|
917
|
+
height: 20px;
|
|
918
|
+
}
|
|
919
|
+
.ndl-icon-btn.large {
|
|
920
|
+
width: 40px;
|
|
921
|
+
height: 40px;
|
|
922
|
+
}
|
|
923
|
+
.ndl-icon-btn.large .ndl-icon {
|
|
924
|
+
width: 24px;
|
|
925
|
+
height: 24px;
|
|
926
|
+
}
|
|
927
|
+
/* Grouped Icons Sizes */
|
|
928
|
+
.ndl-icon-btn.small:not(.grouped) {
|
|
929
|
+
width: 32px;
|
|
930
|
+
height: 32px;
|
|
931
|
+
}
|
|
932
|
+
.ndl-icon-btn.medium:not(.grouped) {
|
|
933
|
+
width: 36px;
|
|
934
|
+
height: 36px;
|
|
935
|
+
}
|
|
936
|
+
.ndl-icon-btn.large:not(.grouped) {
|
|
937
|
+
width: 48px;
|
|
938
|
+
height: 48px;
|
|
939
|
+
}
|
|
940
|
+
/* States */
|
|
941
|
+
.ndl-icon-btn:not(.clean){
|
|
942
|
+
border-width: 1px;
|
|
943
|
+
--tw-border-opacity: 1;
|
|
944
|
+
border-color: rgb(196 200 205 / var(--tw-border-opacity));
|
|
945
|
+
}
|
|
946
|
+
.ndl-icon-btn:not(.clean).danger{
|
|
947
|
+
--tw-border-opacity: 1;
|
|
948
|
+
border-color: rgb(204 37 75 / var(--tw-border-opacity));
|
|
949
|
+
}
|
|
950
|
+
.ndl-icon-btn:not(.clean):disabled{
|
|
951
|
+
--tw-border-opacity: 1;
|
|
952
|
+
border-color: rgb(238 241 246 / var(--tw-border-opacity));
|
|
953
|
+
--tw-bg-opacity: 1;
|
|
954
|
+
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
|
955
|
+
}
|
|
956
|
+
.ndl-icon-btn:hover:not(:disabled){
|
|
957
|
+
background-color: rgba(113,119,128,0.1);
|
|
958
|
+
}
|
|
959
|
+
.ndl-icon-btn:hover:not(:disabled).danger{
|
|
960
|
+
background-color: rgba(237,18,82,0.08);
|
|
961
|
+
}
|
|
962
|
+
.ndl-icon-btn:active:not(:disabled){
|
|
963
|
+
background-color: rgba(113,119,128,0.2);
|
|
964
|
+
}
|
|
965
|
+
.ndl-icon-btn:active:not(:disabled).danger{
|
|
966
|
+
background-color: rgba(237,18,82,0.12);
|
|
967
|
+
}
|
|
968
|
+
.ndl-icon-btn.loading{
|
|
969
|
+
cursor: default;
|
|
970
|
+
opacity: 0.5;
|
|
971
|
+
}
|
|
972
|
+
/**
|
|
973
|
+
*
|
|
974
|
+
* Copyright (c) "Neo4j"
|
|
975
|
+
* Neo4j Sweden AB [http://neo4j.com]
|
|
976
|
+
*
|
|
977
|
+
* This file is part of Neo4j.
|
|
978
|
+
*
|
|
979
|
+
* Neo4j is free software: you can redistribute it and/or modify
|
|
980
|
+
* it under the terms of the GNU General Public License as published by
|
|
981
|
+
* the Free Software Foundation, either version 3 of the License, or
|
|
982
|
+
* (at your option) any later version.
|
|
983
|
+
*
|
|
984
|
+
* This program is distributed in the hope that it will be useful,
|
|
985
|
+
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
986
|
+
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
987
|
+
* GNU General Public License for more details.
|
|
988
|
+
*
|
|
989
|
+
* You should have received a copy of the GNU General Public License
|
|
990
|
+
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
991
|
+
*/
|
|
992
|
+
.ndl-icon-btn-array{
|
|
993
|
+
display: flex;
|
|
994
|
+
max-width: -webkit-min-content;
|
|
995
|
+
max-width: -moz-min-content;
|
|
996
|
+
max-width: min-content;
|
|
997
|
+
gap: 0.25rem;
|
|
998
|
+
border-radius: 8px;
|
|
999
|
+
border-width: 1px;
|
|
1000
|
+
--tw-border-opacity: 1;
|
|
1001
|
+
border-color: rgb(196 200 205 / var(--tw-border-opacity));
|
|
1002
|
+
padding: 0.25rem;
|
|
1003
|
+
}
|
|
1004
|
+
.ndl-icon-btn-array.array-floating{
|
|
1005
|
+
--tw-border-opacity: 1;
|
|
1006
|
+
border-color: rgb(238 241 246 / var(--tw-border-opacity));
|
|
1007
|
+
--tw-shadow: 0px 4px 8px 0px rgba(12, 26, 37, 0.08);
|
|
1008
|
+
--tw-shadow-colored: 0px 4px 8px 0px var(--tw-shadow-color);
|
|
1009
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
|
1010
|
+
}
|
|
831
1011
|
/**
|
|
832
1012
|
*
|
|
833
1013
|
* Copyright (c) "Neo4j"
|
|
@@ -1047,11 +1227,15 @@ a.ndl-btn{
|
|
|
1047
1227
|
--tw-text-opacity: 1;
|
|
1048
1228
|
color: rgb(0 111 214 / var(--tw-text-opacity));
|
|
1049
1229
|
}
|
|
1050
|
-
.ndl-tabs .tab.underline-tab.selected:not(.disabled)
|
|
1230
|
+
.ndl-tabs .tab.underline-tab.selected:not(.disabled) .tab-underline{
|
|
1051
1231
|
--tw-bg-opacity: 1;
|
|
1052
1232
|
background-color: rgb(0 111 214 / var(--tw-bg-opacity));
|
|
1053
1233
|
}
|
|
1054
|
-
.ndl-tabs .tab.underline-tab.selected.disabled:not(:focus
|
|
1234
|
+
.ndl-tabs .tab.underline-tab.selected.disabled:not(:focus) .tab-underline{
|
|
1235
|
+
--tw-bg-opacity: 1;
|
|
1236
|
+
background-color: rgb(230 233 238 / var(--tw-bg-opacity));
|
|
1237
|
+
}
|
|
1238
|
+
.ndl-tabs .tab.underline-tab.disabled:focus-visible .tab-underline{
|
|
1055
1239
|
--tw-bg-opacity: 1;
|
|
1056
1240
|
background-color: rgb(230 233 238 / var(--tw-bg-opacity));
|
|
1057
1241
|
}
|
|
@@ -1476,24 +1660,40 @@ a.ndl-btn{
|
|
|
1476
1660
|
transition: background-color 0.25s ease;
|
|
1477
1661
|
}
|
|
1478
1662
|
.ndl-form-item input[type='checkbox'][role='switch']:hover:checked:not(:disabled){
|
|
1479
|
-
outline
|
|
1480
|
-
outline-
|
|
1481
|
-
|
|
1663
|
+
outline: 2px solid transparent;
|
|
1664
|
+
outline-offset: 2px;
|
|
1665
|
+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
1666
|
+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
1667
|
+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
1668
|
+
--tw-ring-color: rgba(1,139,255,0.08);
|
|
1669
|
+
--tw-ring-offset-width: 1px;
|
|
1482
1670
|
}
|
|
1483
1671
|
.ndl-form-item input[type='checkbox'][role='switch']:hover:not(:checked):not(:disabled){
|
|
1484
|
-
outline
|
|
1485
|
-
outline-
|
|
1486
|
-
|
|
1672
|
+
outline: 2px solid transparent;
|
|
1673
|
+
outline-offset: 2px;
|
|
1674
|
+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
1675
|
+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
1676
|
+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
1677
|
+
--tw-ring-color: rgba(113,119,128,0.1);
|
|
1678
|
+
--tw-ring-offset-width: 1px;
|
|
1487
1679
|
}
|
|
1488
1680
|
.ndl-form-item input[type='checkbox'][role='switch']:active:checked{
|
|
1489
|
-
outline
|
|
1490
|
-
outline-
|
|
1491
|
-
|
|
1681
|
+
outline: 2px solid transparent;
|
|
1682
|
+
outline-offset: 2px;
|
|
1683
|
+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
1684
|
+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
1685
|
+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
1686
|
+
--tw-ring-color: rgba(1,139,255,0.12);
|
|
1687
|
+
--tw-ring-offset-width: 1px;
|
|
1492
1688
|
}
|
|
1493
1689
|
.ndl-form-item input[type='checkbox'][role='switch']:active:not(:checked){
|
|
1494
|
-
outline
|
|
1495
|
-
outline-
|
|
1496
|
-
|
|
1690
|
+
outline: 2px solid transparent;
|
|
1691
|
+
outline-offset: 2px;
|
|
1692
|
+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
1693
|
+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
|
|
1694
|
+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
1695
|
+
--tw-ring-color: rgba(113,119,128,0.2);
|
|
1696
|
+
--tw-ring-offset-width: 1px;
|
|
1497
1697
|
}
|
|
1498
1698
|
.ndl-form-item input[type='checkbox'][role='switch']:focus-visible:enabled{
|
|
1499
1699
|
outline-width: 2px;
|
|
@@ -1557,6 +1757,45 @@ a.ndl-btn{
|
|
|
1557
1757
|
border-radius: 9999px;
|
|
1558
1758
|
top: 0;
|
|
1559
1759
|
}
|
|
1760
|
+
/* Text Input */
|
|
1761
|
+
.ndl-form-item .input-wrapper{
|
|
1762
|
+
position: relative;
|
|
1763
|
+
width: 100%;
|
|
1764
|
+
}
|
|
1765
|
+
.ndl-form-item input[type='text'], .ndl-form-item input[type='email'], .ndl-form-item input[type='password'], .ndl-form-item input[type='url']{
|
|
1766
|
+
height: 2.25rem;
|
|
1767
|
+
width: 100%;
|
|
1768
|
+
border-radius: 4px;
|
|
1769
|
+
border-width: 1px;
|
|
1770
|
+
--tw-border-opacity: 1;
|
|
1771
|
+
border-color: rgb(178 183 189 / var(--tw-border-opacity));
|
|
1772
|
+
padding-top: 0.5rem;
|
|
1773
|
+
padding-bottom: 0.5rem;
|
|
1774
|
+
padding-left: 0.75rem;
|
|
1775
|
+
padding-right: 0.75rem;
|
|
1776
|
+
line-height: 1 !important;
|
|
1777
|
+
font-size: var(--font-size-body-medium);
|
|
1778
|
+
font-weight: var(--font-weight-normal);
|
|
1779
|
+
letter-spacing: 0.25px;
|
|
1780
|
+
line-height: 20px;
|
|
1781
|
+
}
|
|
1782
|
+
.ndl-form-item input[type='text']:active, .ndl-form-item input[type='text']:focus, .ndl-form-item input[type='email']:active, .ndl-form-item input[type='email']:focus, .ndl-form-item input[type='password']:active, .ndl-form-item input[type='password']:focus, .ndl-form-item input[type='url']:active, .ndl-form-item input[type='url']:focus{
|
|
1783
|
+
outline-color: #018bff;
|
|
1784
|
+
}
|
|
1785
|
+
.ndl-form-item input[type='text']:disabled, .ndl-form-item input[type='email']:disabled, .ndl-form-item input[type='password']:disabled, .ndl-form-item input[type='url']:disabled{
|
|
1786
|
+
cursor: not-allowed;
|
|
1787
|
+
--tw-text-opacity: 1;
|
|
1788
|
+
color: rgb(178 183 189 / var(--tw-text-opacity));
|
|
1789
|
+
background-color: inherit;
|
|
1790
|
+
}
|
|
1791
|
+
.ndl-form-item input[type='text']:-moz-read-only, .ndl-form-item input[type='text']:-moz-read-only:focus, .ndl-form-item input[type='email']:-moz-read-only, .ndl-form-item input[type='email']:-moz-read-only:focus, .ndl-form-item input[type='password']:-moz-read-only, .ndl-form-item input[type='password']:-moz-read-only:focus, .ndl-form-item input[type='url']:-moz-read-only, .ndl-form-item input[type='url']:-moz-read-only:focus{
|
|
1792
|
+
outline: 2px solid transparent;
|
|
1793
|
+
outline-offset: 2px;
|
|
1794
|
+
}
|
|
1795
|
+
.ndl-form-item input[type='text']:read-only, .ndl-form-item input[type='text']:read-only:focus, .ndl-form-item input[type='email']:read-only, .ndl-form-item input[type='email']:read-only:focus, .ndl-form-item input[type='password']:read-only, .ndl-form-item input[type='password']:read-only:focus, .ndl-form-item input[type='url']:read-only, .ndl-form-item input[type='url']:read-only:focus{
|
|
1796
|
+
outline: 2px solid transparent;
|
|
1797
|
+
outline-offset: 2px;
|
|
1798
|
+
}
|
|
1560
1799
|
/* Label */
|
|
1561
1800
|
.ndl-form-item .form-item-label{
|
|
1562
1801
|
display: inline-flex;
|
|
@@ -1575,11 +1814,93 @@ a.ndl-btn{
|
|
|
1575
1814
|
.ndl-form-item .form-item-label.label-before{
|
|
1576
1815
|
flex-direction: row-reverse;
|
|
1577
1816
|
}
|
|
1817
|
+
.ndl-form-item.ndl-type-text .form-item-label{
|
|
1818
|
+
flex-direction: column-reverse;
|
|
1819
|
+
align-items: flex-start;
|
|
1820
|
+
row-gap: 0.25rem;
|
|
1821
|
+
}
|
|
1822
|
+
.ndl-form-item.ndl-type-text .form-item-label .form-label-text{
|
|
1823
|
+
--tw-text-opacity: 1;
|
|
1824
|
+
color: rgb(83 91 102 / var(--tw-text-opacity));
|
|
1825
|
+
}
|
|
1578
1826
|
.ndl-form-item.disabled .form-item-label{
|
|
1579
1827
|
cursor: not-allowed;
|
|
1580
1828
|
--tw-text-opacity: 1;
|
|
1581
1829
|
color: rgb(178 183 189 / var(--tw-text-opacity));
|
|
1582
1830
|
}
|
|
1831
|
+
/* Form Message */
|
|
1832
|
+
.ndl-form-item .form-msg{
|
|
1833
|
+
margin-top: 0.25rem;
|
|
1834
|
+
font-size: 0.75rem;
|
|
1835
|
+
line-height: 1rem;
|
|
1836
|
+
--tw-text-opacity: 1;
|
|
1837
|
+
color: rgb(113 119 128 / var(--tw-text-opacity));
|
|
1838
|
+
}
|
|
1839
|
+
.ndl-form-item.has-error input{
|
|
1840
|
+
outline-color: #cc254b;
|
|
1841
|
+
border-width: 2px;
|
|
1842
|
+
--tw-border-opacity: 1;
|
|
1843
|
+
border-color: rgb(204 37 75 / var(--tw-border-opacity));
|
|
1844
|
+
}
|
|
1845
|
+
.ndl-form-item.has-error .form-msg{
|
|
1846
|
+
--tw-text-opacity: 1;
|
|
1847
|
+
color: rgb(204 37 75 / var(--tw-text-opacity));
|
|
1848
|
+
}
|
|
1849
|
+
/* Icons */
|
|
1850
|
+
.ndl-form-item.has-left-icon input[type='text'], .ndl-form-item.has-left-icon input[type='email'], .ndl-form-item.has-left-icon input[type='password'], .ndl-form-item.has-left-icon input[type='url']{
|
|
1851
|
+
padding-left: 3rem;
|
|
1852
|
+
}
|
|
1853
|
+
.ndl-form-item.has-right-icon input[type='text'], .ndl-form-item.has-right-icon input[type='email'], .ndl-form-item.has-right-icon input[type='password'], .ndl-form-item.has-right-icon input[type='url']{
|
|
1854
|
+
padding-right: 3rem;
|
|
1855
|
+
}
|
|
1856
|
+
.ndl-form-item.has-icon .icon{
|
|
1857
|
+
position: absolute;
|
|
1858
|
+
height: 1rem;
|
|
1859
|
+
width: 1rem;
|
|
1860
|
+
--tw-text-opacity: 1;
|
|
1861
|
+
color: rgb(83 91 102 / var(--tw-text-opacity));
|
|
1862
|
+
}
|
|
1863
|
+
.ndl-form-item.has-icon .left-icon {
|
|
1864
|
+
top: calc(
|
|
1865
|
+
50% - 8px
|
|
1866
|
+
); /* Horizontally absolute center for 16px height icon */ left: 1rem;
|
|
1867
|
+
}
|
|
1868
|
+
.ndl-form-item.has-icon .right-icon {
|
|
1869
|
+
top: calc(
|
|
1870
|
+
50% - 8px
|
|
1871
|
+
); /* Horizontally absolute center for 16px height icon */ right: 1rem;
|
|
1872
|
+
}
|
|
1873
|
+
.ndl-form-item.has-icon .error-icon{
|
|
1874
|
+
--tw-text-opacity: 1;
|
|
1875
|
+
color: rgb(204 37 75 / var(--tw-text-opacity));
|
|
1876
|
+
}
|
|
1877
|
+
/* Size */
|
|
1878
|
+
.ndl-form-item.large input[type='text'], .ndl-form-item.large input[type='email'], .ndl-form-item.large input[type='password'], .ndl-form-item.large input[type='url']{
|
|
1879
|
+
height: 3rem;
|
|
1880
|
+
padding-top: 0.75rem;
|
|
1881
|
+
padding-bottom: 0.75rem;
|
|
1882
|
+
font-size: var(--font-size-body-large);
|
|
1883
|
+
font-weight: var(--font-weight-normal);
|
|
1884
|
+
letter-spacing: 0.25px;
|
|
1885
|
+
line-height: 24px;
|
|
1886
|
+
}
|
|
1887
|
+
.ndl-form-item.large .form-item-label {
|
|
1888
|
+
font-size: var(--font-size-body-large);
|
|
1889
|
+
font-weight: var(--font-weight-normal);
|
|
1890
|
+
letter-spacing: 0.25px;
|
|
1891
|
+
line-height: 24px;
|
|
1892
|
+
}
|
|
1893
|
+
.ndl-form-item.large .form-msg {
|
|
1894
|
+
font-size: var(--font-size-body-medium);
|
|
1895
|
+
font-weight: var(--font-weight-normal);
|
|
1896
|
+
letter-spacing: 0.25px;
|
|
1897
|
+
line-height: 20px;
|
|
1898
|
+
}
|
|
1899
|
+
.ndl-form-item.large .icon{
|
|
1900
|
+
height: 1.25rem;
|
|
1901
|
+
width: 1.25rem;
|
|
1902
|
+
top: calc(50% - 10px);
|
|
1903
|
+
}
|
|
1583
1904
|
/**
|
|
1584
1905
|
*
|
|
1585
1906
|
* Copyright (c) "Neo4j"
|
|
@@ -1849,7 +2170,7 @@ a.ndl-btn{
|
|
|
1849
2170
|
letter-spacing: 0.25px;
|
|
1850
2171
|
line-height: 20px;
|
|
1851
2172
|
}
|
|
1852
|
-
.ndl-menu .menu-item:hover:not(.disabled), .ndl-menu .menu-item:focus
|
|
2173
|
+
.ndl-menu .menu-item:hover:not(.disabled), .ndl-menu .menu-item:focus{
|
|
1853
2174
|
border-radius: 8px;
|
|
1854
2175
|
--tw-bg-opacity: 1;
|
|
1855
2176
|
background-color: rgb(245 247 250 / var(--tw-bg-opacity));
|
|
@@ -1993,18 +2314,20 @@ a.ndl-btn{
|
|
|
1993
2314
|
gap: 0.25rem;
|
|
1994
2315
|
overflow: hidden;
|
|
1995
2316
|
border-radius: 10px;
|
|
2317
|
+
border-width: 1px;
|
|
2318
|
+
border-style: solid;
|
|
2319
|
+
--tw-border-opacity: 1;
|
|
2320
|
+
border-color: rgb(196 200 205 / var(--tw-border-opacity));
|
|
1996
2321
|
padding: 0.25rem;
|
|
1997
2322
|
--tw-text-opacity: 1;
|
|
1998
2323
|
color: rgb(83 91 102 / var(--tw-text-opacity));
|
|
1999
|
-
outline-style: solid;
|
|
2000
|
-
outline-width: 1px;
|
|
2001
|
-
outline-color: #C4C8CD;
|
|
2002
2324
|
}
|
|
2003
2325
|
.ndl-view-selector > button{
|
|
2004
2326
|
cursor: pointer;
|
|
2005
2327
|
border-radius: 8px;
|
|
2006
2328
|
}
|
|
2007
|
-
|
|
2329
|
+
/* Can :focus-visible, we just don't apply to Safari */
|
|
2330
|
+
.ndl-view-selector > button:focus-visible{
|
|
2008
2331
|
outline: 2px solid transparent;
|
|
2009
2332
|
outline-offset: 2px;
|
|
2010
2333
|
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
@@ -2165,7 +2488,8 @@ a.ndl-btn{
|
|
|
2165
2488
|
* You should have received a copy of the GNU General Public License
|
|
2166
2489
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
2167
2490
|
*/
|
|
2168
|
-
|
|
2491
|
+
/* Source: https://tailwindcss.com/docs/display#table */
|
|
2492
|
+
.ndl-table .ndl-table-row:after {
|
|
2169
2493
|
content: '';
|
|
2170
2494
|
position: absolute;
|
|
2171
2495
|
width: calc(100% - 60px);
|
|
@@ -2176,7 +2500,8 @@ a.ndl-btn{
|
|
|
2176
2500
|
--tw-border-opacity: 1;
|
|
2177
2501
|
border-color: rgb(238 241 246 / var(--tw-border-opacity));
|
|
2178
2502
|
}
|
|
2179
|
-
|
|
2503
|
+
/* Add prefix here also, as there is a conflict with native tailwind classes like "<prefix>table-row" */
|
|
2504
|
+
.ndl-table .ndl-table-row:last-child:after{
|
|
2180
2505
|
border-width: 0px;
|
|
2181
2506
|
}
|
|
2182
2507
|
.ndl-table .table-header-cell{
|
|
@@ -2192,17 +2517,19 @@ a.ndl-btn{
|
|
|
2192
2517
|
letter-spacing: 0.25px;
|
|
2193
2518
|
line-height: 24px;
|
|
2194
2519
|
}
|
|
2195
|
-
.ndl-table .table-row{
|
|
2520
|
+
.ndl-table .ndl-table-row{
|
|
2196
2521
|
position: relative;
|
|
2522
|
+
display: table-row;
|
|
2197
2523
|
height: 3rem;
|
|
2198
2524
|
overflow: visible;
|
|
2199
2525
|
}
|
|
2200
|
-
.ndl-table .table-row:hover{
|
|
2526
|
+
.ndl-table .ndl-table-row:hover{
|
|
2201
2527
|
--tw-bg-opacity: 1;
|
|
2202
2528
|
background-color: rgb(245 247 250 / var(--tw-bg-opacity));
|
|
2203
2529
|
}
|
|
2204
|
-
.ndl-table .table-cell{
|
|
2530
|
+
.ndl-table .ndl-table-cell{
|
|
2205
2531
|
position: relative;
|
|
2532
|
+
display: table-cell;
|
|
2206
2533
|
overflow: auto;
|
|
2207
2534
|
white-space: nowrap;
|
|
2208
2535
|
padding-left: 1.75rem;
|
|
@@ -2216,10 +2543,10 @@ a.ndl-btn{
|
|
|
2216
2543
|
letter-spacing: 0.25px;
|
|
2217
2544
|
line-height: 20px;
|
|
2218
2545
|
}
|
|
2219
|
-
/* & .table-row-actions {
|
|
2546
|
+
/* & .ndl-table-row-actions {
|
|
2220
2547
|
@apply group-hover:n-flex n-hidden n-z-10 n-gap-x-2 n-transform -n-translate-y-1/2 n-top-1/2 n-flex-row n-absolute n-px-4 n-items-center n-right-8;
|
|
2221
2548
|
} */
|
|
2222
|
-
.ndl-table .table-row-actions-icon{
|
|
2549
|
+
.ndl-table .ndl-table-row-actions-icon{
|
|
2223
2550
|
display: inline-flex;
|
|
2224
2551
|
height: 2rem;
|
|
2225
2552
|
width: 2rem;
|
|
@@ -2229,13 +2556,13 @@ a.ndl-btn{
|
|
|
2229
2556
|
--tw-text-opacity: 1;
|
|
2230
2557
|
color: rgb(83 91 102 / var(--tw-text-opacity));
|
|
2231
2558
|
}
|
|
2232
|
-
.ndl-table .table-row-actions-icon:hover{
|
|
2559
|
+
.ndl-table .ndl-table-row-actions-icon:hover{
|
|
2233
2560
|
background-color: rgb(83 91 102 / var(--tw-bg-opacity));
|
|
2234
2561
|
--tw-bg-opacity: 0.1;
|
|
2235
2562
|
--tw-text-opacity: 1;
|
|
2236
2563
|
color: rgb(21 30 41 / var(--tw-text-opacity));
|
|
2237
2564
|
}
|
|
2238
|
-
.ndl-table .table-row-actions-icon > svg {
|
|
2565
|
+
.ndl-table .ndl-table-row-actions-icon > svg {
|
|
2239
2566
|
height: 20px;
|
|
2240
2567
|
width: 20px;
|
|
2241
2568
|
}
|
|
@@ -2251,7 +2578,6 @@ a.ndl-btn{
|
|
|
2251
2578
|
padding-top: 0.75rem;
|
|
2252
2579
|
padding-bottom: 0.75rem;
|
|
2253
2580
|
text-align: left;
|
|
2254
|
-
text-transform: capitalize;
|
|
2255
2581
|
--tw-text-opacity: 1;
|
|
2256
2582
|
color: rgb(83 91 102 / var(--tw-text-opacity));
|
|
2257
2583
|
font-size: var(--font-size-body-large);
|
|
@@ -2346,7 +2672,7 @@ a.ndl-btn{
|
|
|
2346
2672
|
*/
|
|
2347
2673
|
.ndl-drag-and-drop {
|
|
2348
2674
|
/* Border generated as BG image using - https://kovart.github.io/dashed-border-generator/ */
|
|
2349
|
-
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%23C4C8CD' stroke-width='1.5' stroke-dasharray='
|
|
2675
|
+
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%23C4C8CD' stroke-width='1.5' stroke-dasharray='6' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
|
|
2350
2676
|
border-radius: 8px;
|
|
2351
2677
|
--tw-border-opacity: 1;
|
|
2352
2678
|
border-color: rgb(196 200 205 / var(--tw-border-opacity));
|
|
@@ -2367,7 +2693,7 @@ a.ndl-btn{
|
|
|
2367
2693
|
.ndl-drag-and-drop.drag-active{
|
|
2368
2694
|
--tw-bg-opacity: 1;
|
|
2369
2695
|
background-color: rgb(230 248 255 / var(--tw-bg-opacity));
|
|
2370
|
-
|
|
2696
|
+
|
|
2371
2697
|
/* Border generated as BG image using - https://kovart.github.io/dashed-border-generator/ */
|
|
2372
2698
|
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%23018BFF' stroke-width='2' stroke-dasharray='8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
|
|
2373
2699
|
}
|
|
@@ -2639,9 +2965,6 @@ a.ndl-btn{
|
|
|
2639
2965
|
.n-whitespace-nowrap{
|
|
2640
2966
|
white-space: nowrap;
|
|
2641
2967
|
}
|
|
2642
|
-
.n-rounded-3xl{
|
|
2643
|
-
border-radius: 16px;
|
|
2644
|
-
}
|
|
2645
2968
|
.n-rounded-xl{
|
|
2646
2969
|
border-radius: 10px;
|
|
2647
2970
|
}
|
|
@@ -2654,9 +2977,6 @@ a.ndl-btn{
|
|
|
2654
2977
|
.n-rounded-lg{
|
|
2655
2978
|
border-radius: 8px;
|
|
2656
2979
|
}
|
|
2657
|
-
.n-rounded-tl-\[0px\]{
|
|
2658
|
-
border-top-left-radius: 0px;
|
|
2659
|
-
}
|
|
2660
2980
|
.n-border{
|
|
2661
2981
|
border-width: 1px;
|
|
2662
2982
|
}
|
package/lib/tokens/js/tokens.js
CHANGED