@neo4j-ndl/base 0.3.1 → 0.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.
@@ -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, 06 May 2022 16:12:13 GMT
423
+ * Generated on Wed, 15 Jun 2022 09:40:10 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.regular{
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.regular.rectangle{
775
+ .ndl-btn.medium.rectangle{
776
776
  width: 2.25rem;
777
777
  padding: 0.5rem;
778
778
  }
@@ -828,6 +828,188 @@ 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-bg-opacity: 1;
864
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
865
+ --tw-ring-opacity: 1;
866
+ --tw-ring-color: rgb(1 139 255 / var(--tw-ring-opacity));
867
+ }
868
+ .ndl-icon-btn:not(.clean):focus{
869
+ outline-width: 0px;
870
+ }
871
+ .ndl-icon-btn:not(.clean):focus-visible{
872
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
873
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
874
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
875
+ --tw-ring-offset-width: 2px;
876
+ }
877
+ .ndl-icon-btn.clean{
878
+ --tw-ring-opacity: 1;
879
+ --tw-ring-color: rgb(1 139 255 / var(--tw-ring-opacity));
880
+ }
881
+ .ndl-icon-btn.clean:focus{
882
+ outline-width: 0px;
883
+ }
884
+ .ndl-icon-btn.clean:focus-visible{
885
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
886
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
887
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
888
+ --tw-ring-offset-width: 0px;
889
+ }
890
+ .ndl-icon-btn.danger{
891
+ --tw-text-opacity: 1;
892
+ color: rgb(204 37 75 / var(--tw-text-opacity));
893
+ }
894
+ .ndl-icon-btn.floating{
895
+ --tw-shadow: 0px 4px 8px 0px rgba(12, 26, 37, 0.08);
896
+ --tw-shadow-colored: 0px 4px 8px 0px var(--tw-shadow-color);
897
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
898
+ }
899
+ .ndl-icon-btn:disabled{
900
+ cursor: not-allowed;
901
+ --tw-text-opacity: 1;
902
+ color: rgb(178 183 189 / var(--tw-text-opacity));
903
+ }
904
+ /* Simple Icons Sizes */
905
+ .ndl-icon-btn.small {
906
+ width: 24px;
907
+ height: 24px;
908
+ }
909
+ .ndl-icon-btn.small .ndl-icon {
910
+ width: 16px;
911
+ height: 16px;
912
+ }
913
+ .ndl-icon-btn.medium {
914
+ width: 28px;
915
+ height: 28px;
916
+ }
917
+ .ndl-icon-btn.medium .ndl-icon {
918
+ width: 20px;
919
+ height: 20px;
920
+ }
921
+ .ndl-icon-btn.large {
922
+ width: 40px;
923
+ height: 40px;
924
+ }
925
+ .ndl-icon-btn.large .ndl-icon {
926
+ width: 24px;
927
+ height: 24px;
928
+ }
929
+ /* Grouped Icons Sizes */
930
+ .ndl-icon-btn.small:not(.grouped) {
931
+ width: 32px;
932
+ height: 32px;
933
+ }
934
+ .ndl-icon-btn.medium:not(.grouped) {
935
+ width: 36px;
936
+ height: 36px;
937
+ }
938
+ .ndl-icon-btn.large:not(.grouped) {
939
+ width: 48px;
940
+ height: 48px;
941
+ }
942
+ /* States */
943
+ .ndl-icon-btn:not(.clean){
944
+ border-width: 1px;
945
+ --tw-border-opacity: 1;
946
+ border-color: rgb(196 200 205 / var(--tw-border-opacity));
947
+ }
948
+ .ndl-icon-btn:not(.clean).danger{
949
+ --tw-border-opacity: 1;
950
+ border-color: rgb(204 37 75 / var(--tw-border-opacity));
951
+ }
952
+ .ndl-icon-btn:not(.clean):disabled{
953
+ --tw-border-opacity: 1;
954
+ border-color: rgb(238 241 246 / var(--tw-border-opacity));
955
+ --tw-bg-opacity: 1;
956
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
957
+ }
958
+ .ndl-icon-btn:hover:not(:disabled){
959
+ background-color: rgba(113,119,128,0.1);
960
+ }
961
+ .ndl-icon-btn:hover:not(:disabled).danger{
962
+ background-color: rgba(237,18,82,0.08);
963
+ }
964
+ .ndl-icon-btn:active:not(:disabled){
965
+ background-color: rgba(113,119,128,0.2);
966
+ }
967
+ .ndl-icon-btn:active:not(:disabled).danger{
968
+ background-color: rgba(237,18,82,0.12);
969
+ }
970
+ .ndl-icon-btn.loading{
971
+ cursor: default;
972
+ opacity: 0.5;
973
+ }
974
+ /**
975
+ *
976
+ * Copyright (c) "Neo4j"
977
+ * Neo4j Sweden AB [http://neo4j.com]
978
+ *
979
+ * This file is part of Neo4j.
980
+ *
981
+ * Neo4j is free software: you can redistribute it and/or modify
982
+ * it under the terms of the GNU General Public License as published by
983
+ * the Free Software Foundation, either version 3 of the License, or
984
+ * (at your option) any later version.
985
+ *
986
+ * This program is distributed in the hope that it will be useful,
987
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
988
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
989
+ * GNU General Public License for more details.
990
+ *
991
+ * You should have received a copy of the GNU General Public License
992
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
993
+ */
994
+ .ndl-icon-btn-array{
995
+ display: flex;
996
+ max-width: -webkit-min-content;
997
+ max-width: -moz-min-content;
998
+ max-width: min-content;
999
+ gap: 0.25rem;
1000
+ border-radius: 8px;
1001
+ border-width: 1px;
1002
+ --tw-border-opacity: 1;
1003
+ border-color: rgb(196 200 205 / var(--tw-border-opacity));
1004
+ padding: 0.25rem;
1005
+ }
1006
+ .ndl-icon-btn-array.array-floating{
1007
+ --tw-border-opacity: 1;
1008
+ border-color: rgb(238 241 246 / var(--tw-border-opacity));
1009
+ --tw-shadow: 0px 4px 8px 0px rgba(12, 26, 37, 0.08);
1010
+ --tw-shadow-colored: 0px 4px 8px 0px var(--tw-shadow-color);
1011
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1012
+ }
831
1013
  /**
832
1014
  *
833
1015
  * Copyright (c) "Neo4j"
@@ -1047,11 +1229,15 @@ a.ndl-btn{
1047
1229
  --tw-text-opacity: 1;
1048
1230
  color: rgb(0 111 214 / var(--tw-text-opacity));
1049
1231
  }
1050
- .ndl-tabs .tab.underline-tab.selected:not(.disabled):not(:focus-visible) .tab-underline{
1232
+ .ndl-tabs .tab.underline-tab.selected:not(.disabled) .tab-underline{
1051
1233
  --tw-bg-opacity: 1;
1052
1234
  background-color: rgb(0 111 214 / var(--tw-bg-opacity));
1053
1235
  }
1054
- .ndl-tabs .tab.underline-tab.selected.disabled:not(:focus-visible) .tab-underline{
1236
+ .ndl-tabs .tab.underline-tab.selected.disabled:not(:focus) .tab-underline{
1237
+ --tw-bg-opacity: 1;
1238
+ background-color: rgb(230 233 238 / var(--tw-bg-opacity));
1239
+ }
1240
+ .ndl-tabs .tab.underline-tab.disabled:focus-visible .tab-underline{
1055
1241
  --tw-bg-opacity: 1;
1056
1242
  background-color: rgb(230 233 238 / var(--tw-bg-opacity));
1057
1243
  }
@@ -1476,24 +1662,40 @@ a.ndl-btn{
1476
1662
  transition: background-color 0.25s ease;
1477
1663
  }
1478
1664
  .ndl-form-item input[type='checkbox'][role='switch']:hover:checked:not(:disabled){
1479
- outline-style: solid;
1480
- outline-width: 3px;
1481
- outline-color: rgba(1,139,255,0.08);
1665
+ outline: 2px solid transparent;
1666
+ outline-offset: 2px;
1667
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1668
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1669
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1670
+ --tw-ring-color: rgba(1,139,255,0.08);
1671
+ --tw-ring-offset-width: 1px;
1482
1672
  }
1483
1673
  .ndl-form-item input[type='checkbox'][role='switch']:hover:not(:checked):not(:disabled){
1484
- outline-style: solid;
1485
- outline-width: 3px;
1486
- outline-color: rgba(113,119,128,0.1);
1674
+ outline: 2px solid transparent;
1675
+ outline-offset: 2px;
1676
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1677
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1678
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1679
+ --tw-ring-color: rgba(113,119,128,0.1);
1680
+ --tw-ring-offset-width: 1px;
1487
1681
  }
1488
1682
  .ndl-form-item input[type='checkbox'][role='switch']:active:checked{
1489
- outline-style: solid;
1490
- outline-width: 3px;
1491
- outline-color: rgba(1,139,255,0.12);
1683
+ outline: 2px solid transparent;
1684
+ outline-offset: 2px;
1685
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1686
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1687
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1688
+ --tw-ring-color: rgba(1,139,255,0.12);
1689
+ --tw-ring-offset-width: 1px;
1492
1690
  }
1493
1691
  .ndl-form-item input[type='checkbox'][role='switch']:active:not(:checked){
1494
- outline-style: solid;
1495
- outline-width: 3px;
1496
- outline-color: rgba(113,119,128,0.2);
1692
+ outline: 2px solid transparent;
1693
+ outline-offset: 2px;
1694
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1695
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1696
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1697
+ --tw-ring-color: rgba(113,119,128,0.2);
1698
+ --tw-ring-offset-width: 1px;
1497
1699
  }
1498
1700
  .ndl-form-item input[type='checkbox'][role='switch']:focus-visible:enabled{
1499
1701
  outline-width: 2px;
@@ -1557,6 +1759,45 @@ a.ndl-btn{
1557
1759
  border-radius: 9999px;
1558
1760
  top: 0;
1559
1761
  }
1762
+ /* Text Input */
1763
+ .ndl-form-item .input-wrapper{
1764
+ position: relative;
1765
+ width: 100%;
1766
+ }
1767
+ .ndl-form-item input[type='text'], .ndl-form-item input[type='email'], .ndl-form-item input[type='password'], .ndl-form-item input[type='url']{
1768
+ height: 2.25rem;
1769
+ width: 100%;
1770
+ border-radius: 4px;
1771
+ border-width: 1px;
1772
+ --tw-border-opacity: 1;
1773
+ border-color: rgb(178 183 189 / var(--tw-border-opacity));
1774
+ padding-top: 0.5rem;
1775
+ padding-bottom: 0.5rem;
1776
+ padding-left: 0.75rem;
1777
+ padding-right: 0.75rem;
1778
+ line-height: 1 !important;
1779
+ font-size: var(--font-size-body-medium);
1780
+ font-weight: var(--font-weight-normal);
1781
+ letter-spacing: 0.25px;
1782
+ line-height: 20px;
1783
+ }
1784
+ .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{
1785
+ outline-color: #018bff;
1786
+ }
1787
+ .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{
1788
+ cursor: not-allowed;
1789
+ --tw-text-opacity: 1;
1790
+ color: rgb(178 183 189 / var(--tw-text-opacity));
1791
+ background-color: inherit;
1792
+ }
1793
+ .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{
1794
+ outline: 2px solid transparent;
1795
+ outline-offset: 2px;
1796
+ }
1797
+ .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{
1798
+ outline: 2px solid transparent;
1799
+ outline-offset: 2px;
1800
+ }
1560
1801
  /* Label */
1561
1802
  .ndl-form-item .form-item-label{
1562
1803
  display: inline-flex;
@@ -1575,11 +1816,93 @@ a.ndl-btn{
1575
1816
  .ndl-form-item .form-item-label.label-before{
1576
1817
  flex-direction: row-reverse;
1577
1818
  }
1819
+ .ndl-form-item.ndl-type-text .form-item-label{
1820
+ flex-direction: column-reverse;
1821
+ align-items: flex-start;
1822
+ row-gap: 0.25rem;
1823
+ }
1824
+ .ndl-form-item.ndl-type-text .form-item-label .form-label-text{
1825
+ --tw-text-opacity: 1;
1826
+ color: rgb(83 91 102 / var(--tw-text-opacity));
1827
+ }
1578
1828
  .ndl-form-item.disabled .form-item-label{
1579
1829
  cursor: not-allowed;
1580
1830
  --tw-text-opacity: 1;
1581
1831
  color: rgb(178 183 189 / var(--tw-text-opacity));
1582
1832
  }
1833
+ /* Form Message */
1834
+ .ndl-form-item .form-msg{
1835
+ margin-top: 0.25rem;
1836
+ font-size: 0.75rem;
1837
+ line-height: 1rem;
1838
+ --tw-text-opacity: 1;
1839
+ color: rgb(113 119 128 / var(--tw-text-opacity));
1840
+ }
1841
+ .ndl-form-item.has-error input{
1842
+ outline-color: #cc254b;
1843
+ border-width: 2px;
1844
+ --tw-border-opacity: 1;
1845
+ border-color: rgb(204 37 75 / var(--tw-border-opacity));
1846
+ }
1847
+ .ndl-form-item.has-error .form-msg{
1848
+ --tw-text-opacity: 1;
1849
+ color: rgb(204 37 75 / var(--tw-text-opacity));
1850
+ }
1851
+ /* Icons */
1852
+ .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']{
1853
+ padding-left: 3rem;
1854
+ }
1855
+ .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']{
1856
+ padding-right: 3rem;
1857
+ }
1858
+ .ndl-form-item.has-icon .icon{
1859
+ position: absolute;
1860
+ height: 1rem;
1861
+ width: 1rem;
1862
+ --tw-text-opacity: 1;
1863
+ color: rgb(83 91 102 / var(--tw-text-opacity));
1864
+ }
1865
+ .ndl-form-item.has-icon .left-icon {
1866
+ top: calc(
1867
+ 50% - 8px
1868
+ ); /* Horizontally absolute center for 16px height icon */ left: 1rem;
1869
+ }
1870
+ .ndl-form-item.has-icon .right-icon {
1871
+ top: calc(
1872
+ 50% - 8px
1873
+ ); /* Horizontally absolute center for 16px height icon */ right: 1rem;
1874
+ }
1875
+ .ndl-form-item.has-icon .error-icon{
1876
+ --tw-text-opacity: 1;
1877
+ color: rgb(204 37 75 / var(--tw-text-opacity));
1878
+ }
1879
+ /* Size */
1880
+ .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']{
1881
+ height: 3rem;
1882
+ padding-top: 0.75rem;
1883
+ padding-bottom: 0.75rem;
1884
+ font-size: var(--font-size-body-large);
1885
+ font-weight: var(--font-weight-normal);
1886
+ letter-spacing: 0.25px;
1887
+ line-height: 24px;
1888
+ }
1889
+ .ndl-form-item.large .form-item-label {
1890
+ font-size: var(--font-size-body-large);
1891
+ font-weight: var(--font-weight-normal);
1892
+ letter-spacing: 0.25px;
1893
+ line-height: 24px;
1894
+ }
1895
+ .ndl-form-item.large .form-msg {
1896
+ font-size: var(--font-size-body-medium);
1897
+ font-weight: var(--font-weight-normal);
1898
+ letter-spacing: 0.25px;
1899
+ line-height: 20px;
1900
+ }
1901
+ .ndl-form-item.large .icon{
1902
+ height: 1.25rem;
1903
+ width: 1.25rem;
1904
+ top: calc(50% - 10px);
1905
+ }
1583
1906
  /**
1584
1907
  *
1585
1908
  * Copyright (c) "Neo4j"
@@ -1849,12 +2172,13 @@ a.ndl-btn{
1849
2172
  letter-spacing: 0.25px;
1850
2173
  line-height: 20px;
1851
2174
  }
1852
- .ndl-menu .menu-item:hover:not(.disabled), .ndl-menu .menu-item:focus-visible{
2175
+ .ndl-menu .menu-item:hover:not(.disabled), .ndl-menu .menu-item:focus{
1853
2176
  border-radius: 8px;
1854
2177
  --tw-bg-opacity: 1;
1855
2178
  background-color: rgb(245 247 250 / var(--tw-bg-opacity));
1856
2179
  }
1857
2180
  .ndl-menu .menu-item.disabled{
2181
+ pointer-events: none;
1858
2182
  cursor: default;
1859
2183
  }
1860
2184
  .ndl-menu .menu-item.disabled .menu-item-title{
@@ -1911,6 +2235,84 @@ a.ndl-btn{
1911
2235
  height: 17px;
1912
2236
  cursor: pointer;
1913
2237
  }
2238
+ /**
2239
+ *
2240
+ * Copyright (c) "Neo4j"
2241
+ * Neo4j Sweden AB [http://neo4j.com]
2242
+ *
2243
+ * This file is part of Neo4j.
2244
+ *
2245
+ * Neo4j is free software: you can redistribute it and/or modify
2246
+ * it under the terms of the GNU General Public License as published by
2247
+ * the Free Software Foundation, either version 3 of the License, or
2248
+ * (at your option) any later version.
2249
+ *
2250
+ * This program is distributed in the hope that it will be useful,
2251
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
2252
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
2253
+ * GNU General Public License for more details.
2254
+ *
2255
+ * You should have received a copy of the GNU General Public License
2256
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
2257
+ */
2258
+ .ndl-dialog{
2259
+ border-radius: 16px;
2260
+ --tw-bg-opacity: 1;
2261
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
2262
+ padding: 3rem;
2263
+ --tw-shadow: 0px 4px 8px 0px rgba(12, 26, 37, 0.08);
2264
+ --tw-shadow-colored: 0px 4px 8px 0px var(--tw-shadow-color);
2265
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2266
+ }
2267
+ .ndl-dialog .dialog-type-icon {
2268
+ width: 120px;
2269
+ margin-right: 2rem;
2270
+ margin-left: 1rem;
2271
+ }
2272
+ .ndl-dialog .dialog-type-icon.info{
2273
+ --tw-text-opacity: 1;
2274
+ color: rgb(0 111 214 / var(--tw-text-opacity));
2275
+ }
2276
+ .ndl-dialog .dialog-type-icon.success{
2277
+ --tw-text-opacity: 1;
2278
+ color: rgb(50 125 96 / var(--tw-text-opacity));
2279
+ }
2280
+ .ndl-dialog .dialog-type-icon.warning{
2281
+ --tw-text-opacity: 1;
2282
+ color: rgb(150 108 46 / var(--tw-text-opacity));
2283
+ }
2284
+ .ndl-dialog .dialog-type-icon.danger{
2285
+ --tw-text-opacity: 1;
2286
+ color: rgb(204 37 75 / var(--tw-text-opacity));
2287
+ }
2288
+ .ndl-dialog .dialog-close{
2289
+ position: absolute;
2290
+ top: 2.5rem;
2291
+ right: 2.5rem;
2292
+ }
2293
+ .ndl-dialog-header{
2294
+ margin-bottom: 1.5rem;
2295
+ }
2296
+ .ndl-dialog.with-close-button .ndl-dialog-header{
2297
+ margin-right: 3rem;
2298
+ }
2299
+ .ndl-dialog-subtitle{
2300
+ margin-bottom: 1rem;
2301
+ }
2302
+ .ndl-dialog-description{
2303
+ min-height: 110px;
2304
+ --tw-text-opacity: 1;
2305
+ color: rgb(83 91 102 / var(--tw-text-opacity));
2306
+ }
2307
+ .ndl-dialog.with-icon .ndl-dialog-description{
2308
+ min-height: 70px;
2309
+ }
2310
+ .ndl-dialog-actions{
2311
+ margin-top: 1.5rem;
2312
+ display: flex;
2313
+ justify-content: flex-end;
2314
+ gap: 0.5rem;
2315
+ }
1914
2316
  /**
1915
2317
  *
1916
2318
  * Copyright (c) "Neo4j"
@@ -1964,6 +2366,68 @@ a.ndl-btn{
1964
2366
  left: 0px;
1965
2367
  z-index: 1;
1966
2368
  }
2369
+ /**
2370
+ *
2371
+ * Copyright (c) "Neo4j"
2372
+ * Neo4j Sweden AB [http://neo4j.com]
2373
+ *
2374
+ * This file is part of Neo4j.
2375
+ *
2376
+ * Neo4j is free software: you can redistribute it and/or modify
2377
+ * it under the terms of the GNU General Public License as published by
2378
+ * the Free Software Foundation, either version 3 of the License, or
2379
+ * (at your option) any later version.
2380
+ *
2381
+ * This program is distributed in the hope that it will be useful,
2382
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
2383
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
2384
+ * GNU General Public License for more details.
2385
+ *
2386
+ * You should have received a copy of the GNU General Public License
2387
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
2388
+ */
2389
+ .ndl-modal-root {
2390
+ position: fixed;
2391
+ top: 0;
2392
+ left: 0;
2393
+ bottom: 0;
2394
+ right: 0;
2395
+ z-index: 1001;
2396
+
2397
+ background-color: rgba(0,0,0,0.4);
2398
+ cursor: default;
2399
+ }
2400
+ .ndl-modal {
2401
+ position: relative;
2402
+ overflow-y: auto;
2403
+ display: inline-block;
2404
+ vertical-align: middle;
2405
+ text-align: left;
2406
+ margin: 32px;
2407
+ width: -moz-available;
2408
+ width: -webkit-fill-available;
2409
+ }
2410
+ .ndl-modal.small {
2411
+ max-width: 40rem;
2412
+ }
2413
+ .ndl-modal.medium {
2414
+ max-width: 47rem;
2415
+ }
2416
+ .ndl-modal.large {
2417
+ max-width: 60rem;
2418
+ }
2419
+ .ndl-modal-wrapper {
2420
+ height: 100%;
2421
+ overflow: hidden auto;
2422
+ text-align: center;
2423
+ }
2424
+ .ndl-modal-wrapper:after {
2425
+ content: '';
2426
+ display: inline-block;
2427
+ vertical-align: middle;
2428
+ height: 100%;
2429
+ width: 0;
2430
+ }
1967
2431
  /**
1968
2432
  *
1969
2433
  * Copyright (c) "Neo4j"
@@ -1993,18 +2457,20 @@ a.ndl-btn{
1993
2457
  gap: 0.25rem;
1994
2458
  overflow: hidden;
1995
2459
  border-radius: 10px;
2460
+ border-width: 1px;
2461
+ border-style: solid;
2462
+ --tw-border-opacity: 1;
2463
+ border-color: rgb(196 200 205 / var(--tw-border-opacity));
1996
2464
  padding: 0.25rem;
1997
2465
  --tw-text-opacity: 1;
1998
2466
  color: rgb(83 91 102 / var(--tw-text-opacity));
1999
- outline-style: solid;
2000
- outline-width: 1px;
2001
- outline-color: #C4C8CD;
2002
2467
  }
2003
2468
  .ndl-view-selector > button{
2004
2469
  cursor: pointer;
2005
2470
  border-radius: 8px;
2006
2471
  }
2007
- .ndl-view-selector > button :focus-visible{
2472
+ /* Can :focus-visible, we just don't apply to Safari */
2473
+ .ndl-view-selector > button:focus-visible{
2008
2474
  outline: 2px solid transparent;
2009
2475
  outline-offset: 2px;
2010
2476
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -2165,7 +2631,8 @@ a.ndl-btn{
2165
2631
  * You should have received a copy of the GNU General Public License
2166
2632
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
2167
2633
  */
2168
- .ndl-table .table-row:after {
2634
+ /* Source: https://tailwindcss.com/docs/display#table */
2635
+ .ndl-table .ndl-table-row:after {
2169
2636
  content: '';
2170
2637
  position: absolute;
2171
2638
  width: calc(100% - 60px);
@@ -2176,7 +2643,8 @@ a.ndl-btn{
2176
2643
  --tw-border-opacity: 1;
2177
2644
  border-color: rgb(238 241 246 / var(--tw-border-opacity));
2178
2645
  }
2179
- .ndl-table .table-row:last-child:after{
2646
+ /* Add prefix here also, as there is a conflict with native tailwind classes like "<prefix>table-row" */
2647
+ .ndl-table .ndl-table-row:last-child:after{
2180
2648
  border-width: 0px;
2181
2649
  }
2182
2650
  .ndl-table .table-header-cell{
@@ -2192,17 +2660,19 @@ a.ndl-btn{
2192
2660
  letter-spacing: 0.25px;
2193
2661
  line-height: 24px;
2194
2662
  }
2195
- .ndl-table .table-row{
2663
+ .ndl-table .ndl-table-row{
2196
2664
  position: relative;
2665
+ display: table-row;
2197
2666
  height: 3rem;
2198
2667
  overflow: visible;
2199
2668
  }
2200
- .ndl-table .table-row:hover{
2669
+ .ndl-table .ndl-table-row:hover{
2201
2670
  --tw-bg-opacity: 1;
2202
2671
  background-color: rgb(245 247 250 / var(--tw-bg-opacity));
2203
2672
  }
2204
- .ndl-table .table-cell{
2673
+ .ndl-table .ndl-table-cell{
2205
2674
  position: relative;
2675
+ display: table-cell;
2206
2676
  overflow: auto;
2207
2677
  white-space: nowrap;
2208
2678
  padding-left: 1.75rem;
@@ -2216,10 +2686,10 @@ a.ndl-btn{
2216
2686
  letter-spacing: 0.25px;
2217
2687
  line-height: 20px;
2218
2688
  }
2219
- /* & .table-row-actions {
2689
+ /* & .ndl-table-row-actions {
2220
2690
  @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
2691
  } */
2222
- .ndl-table .table-row-actions-icon{
2692
+ .ndl-table .ndl-table-row-actions-icon{
2223
2693
  display: inline-flex;
2224
2694
  height: 2rem;
2225
2695
  width: 2rem;
@@ -2229,13 +2699,13 @@ a.ndl-btn{
2229
2699
  --tw-text-opacity: 1;
2230
2700
  color: rgb(83 91 102 / var(--tw-text-opacity));
2231
2701
  }
2232
- .ndl-table .table-row-actions-icon:hover{
2702
+ .ndl-table .ndl-table-row-actions-icon:hover{
2233
2703
  background-color: rgb(83 91 102 / var(--tw-bg-opacity));
2234
2704
  --tw-bg-opacity: 0.1;
2235
2705
  --tw-text-opacity: 1;
2236
2706
  color: rgb(21 30 41 / var(--tw-text-opacity));
2237
2707
  }
2238
- .ndl-table .table-row-actions-icon > svg {
2708
+ .ndl-table .ndl-table-row-actions-icon > svg {
2239
2709
  height: 20px;
2240
2710
  width: 20px;
2241
2711
  }
@@ -2251,7 +2721,6 @@ a.ndl-btn{
2251
2721
  padding-top: 0.75rem;
2252
2722
  padding-bottom: 0.75rem;
2253
2723
  text-align: left;
2254
- text-transform: capitalize;
2255
2724
  --tw-text-opacity: 1;
2256
2725
  color: rgb(83 91 102 / var(--tw-text-opacity));
2257
2726
  font-size: var(--font-size-body-large);
@@ -2346,20 +2815,26 @@ a.ndl-btn{
2346
2815
  */
2347
2816
  .ndl-drag-and-drop {
2348
2817
  /* 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='8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
2818
+ 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
2819
  border-radius: 8px;
2351
2820
  --tw-border-opacity: 1;
2352
2821
  border-color: rgb(196 200 205 / var(--tw-border-opacity));
2822
+ padding: 0.25rem;
2353
2823
  }
2354
2824
  .ndl-drag-and-drop > div{
2355
2825
  padding-top: 2rem;
2356
2826
  padding-bottom: 2rem;
2357
2827
  }
2358
- .ndl-drag-and-drop .ndl-drag-and-drop-inner {
2359
- width: 320px;
2360
- margin-left: auto;
2361
- margin-right: auto;
2362
- }
2828
+ .ndl-drag-and-drop .ndl-drag-and-drop-inner{
2829
+ margin-left: auto;
2830
+ margin-right: auto;
2831
+ }
2832
+ .ndl-drag-and-drop .ndl-drag-and-drop-inner-content{
2833
+ display: flex;
2834
+ height: 100%;
2835
+ flex-direction: column;
2836
+ justify-content: center;
2837
+ }
2363
2838
  .ndl-drag-and-drop svg{
2364
2839
  margin-left: auto;
2365
2840
  margin-right: auto;
@@ -2367,7 +2842,7 @@ a.ndl-btn{
2367
2842
  .ndl-drag-and-drop.drag-active{
2368
2843
  --tw-bg-opacity: 1;
2369
2844
  background-color: rgb(230 248 255 / var(--tw-bg-opacity));
2370
-
2845
+
2371
2846
  /* Border generated as BG image using - https://kovart.github.io/dashed-border-generator/ */
2372
2847
  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
2848
  }
@@ -2479,9 +2954,15 @@ a.ndl-btn{
2479
2954
  margin-left: 0.75rem;
2480
2955
  margin-right: 0.75rem;
2481
2956
  }
2957
+ .n-mt-7{
2958
+ margin-top: 1.75rem;
2959
+ }
2482
2960
  .n-mr-1{
2483
2961
  margin-right: 0.25rem;
2484
2962
  }
2963
+ .n-mt-10{
2964
+ margin-top: 2.5rem;
2965
+ }
2485
2966
  .n-mt-4{
2486
2967
  margin-top: 1rem;
2487
2968
  }
@@ -2503,12 +2984,12 @@ a.ndl-btn{
2503
2984
  .n-h-4{
2504
2985
  height: 1rem;
2505
2986
  }
2506
- .n-h-6{
2507
- height: 1.5rem;
2508
- }
2509
2987
  .n-h-10{
2510
2988
  height: 2.5rem;
2511
2989
  }
2990
+ .n-h-6{
2991
+ height: 1.5rem;
2992
+ }
2512
2993
  .n-h-full{
2513
2994
  height: 100%;
2514
2995
  }
@@ -2518,20 +2999,23 @@ a.ndl-btn{
2518
2999
  .n-h-36{
2519
3000
  height: 9rem;
2520
3001
  }
3002
+ .n-w-full{
3003
+ width: 100%;
3004
+ }
2521
3005
  .n-w-5{
2522
3006
  width: 1.25rem;
2523
3007
  }
2524
3008
  .n-w-4{
2525
3009
  width: 1rem;
2526
3010
  }
2527
- .n-w-6{
2528
- width: 1.5rem;
2529
- }
2530
3011
  .n-w-10{
2531
3012
  width: 2.5rem;
2532
3013
  }
2533
- .n-w-full{
2534
- width: 100%;
3014
+ .n-w-40{
3015
+ width: 10rem;
3016
+ }
3017
+ .n-w-6{
3018
+ width: 1.5rem;
2535
3019
  }
2536
3020
  .n-w-48{
2537
3021
  width: 12rem;
@@ -2547,6 +3031,9 @@ a.ndl-btn{
2547
3031
  max-width: -moz-min-content;
2548
3032
  max-width: min-content;
2549
3033
  }
3034
+ .n-flex-1{
3035
+ flex: 1 1 0%;
3036
+ }
2550
3037
  .n-table-auto{
2551
3038
  table-layout: auto;
2552
3039
  }
@@ -2568,6 +3055,9 @@ a.ndl-btn{
2568
3055
  .n-flex-wrap{
2569
3056
  flex-wrap: wrap;
2570
3057
  }
3058
+ .n-flex-nowrap{
3059
+ flex-wrap: nowrap;
3060
+ }
2571
3061
  .n-items-start{
2572
3062
  align-items: flex-start;
2573
3063
  }
@@ -2639,8 +3129,8 @@ a.ndl-btn{
2639
3129
  .n-whitespace-nowrap{
2640
3130
  white-space: nowrap;
2641
3131
  }
2642
- .n-rounded-3xl{
2643
- border-radius: 16px;
3132
+ .n-rounded-lg{
3133
+ border-radius: 8px;
2644
3134
  }
2645
3135
  .n-rounded-xl{
2646
3136
  border-radius: 10px;
@@ -2651,12 +3141,6 @@ a.ndl-btn{
2651
3141
  .n-rounded-sm{
2652
3142
  border-radius: 4px;
2653
3143
  }
2654
- .n-rounded-lg{
2655
- border-radius: 8px;
2656
- }
2657
- .n-rounded-tl-\[0px\]{
2658
- border-top-left-radius: 0px;
2659
- }
2660
3144
  .n-border{
2661
3145
  border-width: 1px;
2662
3146
  }
@@ -3237,6 +3721,9 @@ a.ndl-btn{
3237
3721
  .n-bg-transparent{
3238
3722
  background-color: transparent;
3239
3723
  }
3724
+ .n-p-2{
3725
+ padding: 0.5rem;
3726
+ }
3240
3727
  .n-p-4{
3241
3728
  padding: 1rem;
3242
3729
  }
@@ -3704,11 +4191,6 @@ a.ndl-btn{
3704
4191
  -webkit-text-decoration-line: underline;
3705
4192
  text-decoration-line: underline;
3706
4193
  }
3707
- .n-shadow-l3{
3708
- --tw-shadow: 0px 4px 8px 0px rgba(12, 26, 37, 0.04);
3709
- --tw-shadow-colored: 0px 4px 8px 0px var(--tw-shadow-color);
3710
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
3711
- }
3712
4194
  .n-shadow-l2{
3713
4195
  --tw-shadow: 0px 1px 2px 0px rgba(12, 26, 37, 0.18);
3714
4196
  --tw-shadow-colored: 0px 1px 2px 0px var(--tw-shadow-color);
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 06 May 2022 16:12:13 GMT
3
+ * Generated on Wed, 15 Jun 2022 09:40:10 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 06 May 2022 16:12:13 GMT
3
+ * Generated on Wed, 15 Jun 2022 09:40:10 GMT
4
4
  */
5
5
 
6
6
  module.exports = {
@@ -1,7 +1,7 @@
1
1
  "use strict";
2
2
  /**
3
3
  * Do not edit directly
4
- * Generated on Fri, 06 May 2022 16:12:13 GMT
4
+ * Generated on Wed, 15 Jun 2022 09:40:10 GMT
5
5
  */
6
6
  module.exports = {
7
7
  "borderRadius": {
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Fri, 06 May 2022 16:12:13 GMT
3
+ // Generated on Wed, 15 Jun 2022 09:40:10 GMT
4
4
 
5
5
  $border-radius-sm: 4px;
6
6
  $border-radius-md: 6px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neo4j-ndl/base",
3
- "version": "0.3.1",
3
+ "version": "0.5.1",
4
4
  "description": "Neo4j base package for the design system",
5
5
  "author": "Neo4j Inc.",
6
6
  "homepage": "",