mithril-materialized 3.4.4 → 3.5.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/dist/advanced.css +141 -2
- package/dist/components.css +141 -2
- package/dist/index.css +143 -2
- package/dist/index.esm.js +218 -17
- package/dist/index.js +218 -17
- package/dist/index.min.css +1 -1
- package/dist/index.umd.js +218 -17
- package/dist/material-icon.d.ts +6 -0
- package/dist/sidenav.d.ts +29 -1
- package/package.json +1 -1
- package/sass/components/_sidenav.scss +194 -3
package/dist/advanced.css
CHANGED
|
@@ -844,6 +844,10 @@ td, th {
|
|
|
844
844
|
flex-direction: column;
|
|
845
845
|
}
|
|
846
846
|
|
|
847
|
+
ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) i.material-icons {
|
|
848
|
+
margin: 0;
|
|
849
|
+
}
|
|
850
|
+
|
|
847
851
|
.sidenav {
|
|
848
852
|
position: fixed;
|
|
849
853
|
width: 300px;
|
|
@@ -907,7 +911,7 @@ td, th {
|
|
|
907
911
|
background-color: var(--mm-border-color, rgba(0, 0, 0, 0.05));
|
|
908
912
|
}
|
|
909
913
|
.sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
|
|
910
|
-
color: var(--mm-text
|
|
914
|
+
color: var(--mm-nav-active-text, #fff);
|
|
911
915
|
display: block;
|
|
912
916
|
font-size: 14px;
|
|
913
917
|
font-weight: 500;
|
|
@@ -922,6 +926,7 @@ td, th {
|
|
|
922
926
|
margin: 0 32px 0 0;
|
|
923
927
|
width: 24px;
|
|
924
928
|
color: var(--mm-text-secondary, rgba(0, 0, 0, 0.54));
|
|
929
|
+
user-select: none;
|
|
925
930
|
}
|
|
926
931
|
.sidenav li > .btn, .sidenav li > .btn-large, .sidenav li > .btn-flat, .sidenav li > .btn-floating {
|
|
927
932
|
margin: 10px 32px;
|
|
@@ -1028,7 +1033,7 @@ td, th {
|
|
|
1028
1033
|
}
|
|
1029
1034
|
.sidenav .collapsible-body > ul:not(.collapsible) > li.active a,
|
|
1030
1035
|
.sidenav.sidenav-fixed .collapsible-body > ul:not(.collapsible) > li.active a {
|
|
1031
|
-
color: #fff;
|
|
1036
|
+
color: var(--mm-nav-active-text, #fff);
|
|
1032
1037
|
}
|
|
1033
1038
|
|
|
1034
1039
|
.sidenav .collapsible-body {
|
|
@@ -1054,6 +1059,140 @@ td, th {
|
|
|
1054
1059
|
pointer-events: auto;
|
|
1055
1060
|
}
|
|
1056
1061
|
|
|
1062
|
+
.sidenav-hamburger {
|
|
1063
|
+
background: var(--mm-surface-color, #fff);
|
|
1064
|
+
border-radius: 4px;
|
|
1065
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
1066
|
+
transition: background-color 0.2s ease, box-shadow 0.2s ease;
|
|
1067
|
+
}
|
|
1068
|
+
.sidenav-hamburger:hover {
|
|
1069
|
+
background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
|
|
1070
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
1071
|
+
}
|
|
1072
|
+
.sidenav-hamburger svg {
|
|
1073
|
+
fill: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
|
|
1074
|
+
}
|
|
1075
|
+
|
|
1076
|
+
.sidenav-hamburger-item {
|
|
1077
|
+
list-style: none;
|
|
1078
|
+
}
|
|
1079
|
+
.sidenav-hamburger-item:hover {
|
|
1080
|
+
background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
|
|
1081
|
+
}
|
|
1082
|
+
.sidenav-hamburger-item svg {
|
|
1083
|
+
fill: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
|
|
1084
|
+
}
|
|
1085
|
+
|
|
1086
|
+
.sidenav.sidenav-collapsed {
|
|
1087
|
+
width: 60px !important;
|
|
1088
|
+
}
|
|
1089
|
+
.sidenav.sidenav-collapsed .sidenav-item-text {
|
|
1090
|
+
display: none;
|
|
1091
|
+
}
|
|
1092
|
+
.sidenav.sidenav-collapsed li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
|
|
1093
|
+
padding: 0 18px;
|
|
1094
|
+
justify-content: center;
|
|
1095
|
+
}
|
|
1096
|
+
.sidenav.sidenav-collapsed li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i, .sidenav.sidenav-collapsed li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i.material-icons {
|
|
1097
|
+
margin: 0;
|
|
1098
|
+
float: none;
|
|
1099
|
+
}
|
|
1100
|
+
.sidenav.sidenav-collapsed .subheader {
|
|
1101
|
+
display: none;
|
|
1102
|
+
}
|
|
1103
|
+
.sidenav.sidenav-collapsed .sidenav-subitem {
|
|
1104
|
+
padding: 8px 16px !important;
|
|
1105
|
+
justify-content: center;
|
|
1106
|
+
}
|
|
1107
|
+
.sidenav.sidenav-collapsed .sidenav-subitem span {
|
|
1108
|
+
display: none;
|
|
1109
|
+
}
|
|
1110
|
+
|
|
1111
|
+
.sidenav-expand-toggle:hover {
|
|
1112
|
+
background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
|
|
1113
|
+
}
|
|
1114
|
+
.sidenav-expand-toggle svg {
|
|
1115
|
+
fill: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
|
|
1116
|
+
transition: transform 0.2s ease;
|
|
1117
|
+
}
|
|
1118
|
+
|
|
1119
|
+
.sidenav-subitem {
|
|
1120
|
+
list-style: none;
|
|
1121
|
+
transition: background-color 0.2s ease;
|
|
1122
|
+
}
|
|
1123
|
+
.sidenav-subitem:hover {
|
|
1124
|
+
background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
|
|
1125
|
+
}
|
|
1126
|
+
.sidenav-subitem.selected svg {
|
|
1127
|
+
fill: var(--mm-primary-color, #26a69a);
|
|
1128
|
+
}
|
|
1129
|
+
.sidenav-subitem svg {
|
|
1130
|
+
fill: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
|
|
1131
|
+
transition: fill 0.2s ease;
|
|
1132
|
+
}
|
|
1133
|
+
.sidenav-subitem i.material-icons {
|
|
1134
|
+
color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
|
|
1135
|
+
}
|
|
1136
|
+
|
|
1137
|
+
.sidenav li.has-submenu.active > a {
|
|
1138
|
+
background: var(--mm-primary-color-light, rgba(38, 166, 154, 0.1));
|
|
1139
|
+
color: var(--mm-primary-color, #26a69a);
|
|
1140
|
+
}
|
|
1141
|
+
|
|
1142
|
+
[data-theme=dark] .sidenav-hamburger {
|
|
1143
|
+
background: var(--mm-surface-color, #1e1e1e);
|
|
1144
|
+
}
|
|
1145
|
+
[data-theme=dark] .sidenav-hamburger svg {
|
|
1146
|
+
fill: var(--mm-text-primary, rgba(255, 255, 255, 0.87));
|
|
1147
|
+
}
|
|
1148
|
+
[data-theme=dark] .sidenav {
|
|
1149
|
+
background-color: var(--mm-surface-color, #1e1e1e);
|
|
1150
|
+
}
|
|
1151
|
+
[data-theme=dark] .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
|
|
1152
|
+
color: var(--mm-text-primary, rgba(255, 255, 255, 0.87));
|
|
1153
|
+
}
|
|
1154
|
+
[data-theme=dark] .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating):hover {
|
|
1155
|
+
background-color: var(--mm-border-color, rgba(255, 255, 255, 0.05));
|
|
1156
|
+
}
|
|
1157
|
+
[data-theme=dark] .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i, [data-theme=dark] .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i.material-icons {
|
|
1158
|
+
color: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
|
|
1159
|
+
}
|
|
1160
|
+
[data-theme=dark] .sidenav li.active {
|
|
1161
|
+
background-color: rgba(255, 255, 255, 0.05);
|
|
1162
|
+
}
|
|
1163
|
+
[data-theme=dark] .sidenav li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
|
|
1164
|
+
color: var(--mm-nav-active-text, #fff);
|
|
1165
|
+
}
|
|
1166
|
+
[data-theme=dark] .sidenav li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i, [data-theme=dark] .sidenav li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i.material-icons {
|
|
1167
|
+
color: var(--mm-nav-active-text, #fff);
|
|
1168
|
+
}
|
|
1169
|
+
[data-theme=dark] .sidenav .collapsible-body > ul:not(.collapsible) > li.active a {
|
|
1170
|
+
color: var(--mm-nav-active-text, #fff);
|
|
1171
|
+
}
|
|
1172
|
+
[data-theme=dark] .sidenav .collapsible-body > ul:not(.collapsible) > li.active a i,
|
|
1173
|
+
[data-theme=dark] .sidenav .collapsible-body > ul:not(.collapsible) > li.active a i.material-icons {
|
|
1174
|
+
color: var(--mm-nav-active-text, #fff);
|
|
1175
|
+
}
|
|
1176
|
+
[data-theme=dark] .sidenav .subheader {
|
|
1177
|
+
color: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
|
|
1178
|
+
}
|
|
1179
|
+
[data-theme=dark] .sidenav-expand-toggle svg {
|
|
1180
|
+
fill: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
|
|
1181
|
+
}
|
|
1182
|
+
[data-theme=dark] .sidenav-subitem:hover {
|
|
1183
|
+
background: var(--mm-border-color, rgba(255, 255, 255, 0.05));
|
|
1184
|
+
}
|
|
1185
|
+
[data-theme=dark] .sidenav-subitem svg {
|
|
1186
|
+
fill: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
|
|
1187
|
+
}
|
|
1188
|
+
[data-theme=dark] .sidenav-subitem i.material-icons {
|
|
1189
|
+
color: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
|
|
1190
|
+
}
|
|
1191
|
+
|
|
1192
|
+
.sidenav {
|
|
1193
|
+
transition: transform 0.3s ease, width 0.3s ease;
|
|
1194
|
+
}
|
|
1195
|
+
|
|
1057
1196
|
nav.nav-extended {
|
|
1058
1197
|
height: auto;
|
|
1059
1198
|
}
|
package/dist/components.css
CHANGED
|
@@ -1597,6 +1597,10 @@ body.keyboard-focused .dropdown-content li:focus {
|
|
|
1597
1597
|
flex-direction: column;
|
|
1598
1598
|
}
|
|
1599
1599
|
|
|
1600
|
+
ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) i.material-icons {
|
|
1601
|
+
margin: 0;
|
|
1602
|
+
}
|
|
1603
|
+
|
|
1600
1604
|
.sidenav {
|
|
1601
1605
|
position: fixed;
|
|
1602
1606
|
width: 300px;
|
|
@@ -1660,7 +1664,7 @@ body.keyboard-focused .dropdown-content li:focus {
|
|
|
1660
1664
|
background-color: var(--mm-border-color, rgba(0, 0, 0, 0.05));
|
|
1661
1665
|
}
|
|
1662
1666
|
.sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
|
|
1663
|
-
color: var(--mm-text
|
|
1667
|
+
color: var(--mm-nav-active-text, #fff);
|
|
1664
1668
|
display: block;
|
|
1665
1669
|
font-size: 14px;
|
|
1666
1670
|
font-weight: 500;
|
|
@@ -1675,6 +1679,7 @@ body.keyboard-focused .dropdown-content li:focus {
|
|
|
1675
1679
|
margin: 0 32px 0 0;
|
|
1676
1680
|
width: 24px;
|
|
1677
1681
|
color: var(--mm-text-secondary, rgba(0, 0, 0, 0.54));
|
|
1682
|
+
user-select: none;
|
|
1678
1683
|
}
|
|
1679
1684
|
.sidenav li > .btn, .sidenav li > .btn-large, .sidenav li > .btn-flat, .sidenav li > .btn-floating {
|
|
1680
1685
|
margin: 10px 32px;
|
|
@@ -1781,7 +1786,7 @@ body.keyboard-focused .dropdown-content li:focus {
|
|
|
1781
1786
|
}
|
|
1782
1787
|
.sidenav .collapsible-body > ul:not(.collapsible) > li.active a,
|
|
1783
1788
|
.sidenav.sidenav-fixed .collapsible-body > ul:not(.collapsible) > li.active a {
|
|
1784
|
-
color: #fff;
|
|
1789
|
+
color: var(--mm-nav-active-text, #fff);
|
|
1785
1790
|
}
|
|
1786
1791
|
|
|
1787
1792
|
.sidenav .collapsible-body {
|
|
@@ -1807,6 +1812,140 @@ body.keyboard-focused .dropdown-content li:focus {
|
|
|
1807
1812
|
pointer-events: auto;
|
|
1808
1813
|
}
|
|
1809
1814
|
|
|
1815
|
+
.sidenav-hamburger {
|
|
1816
|
+
background: var(--mm-surface-color, #fff);
|
|
1817
|
+
border-radius: 4px;
|
|
1818
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
1819
|
+
transition: background-color 0.2s ease, box-shadow 0.2s ease;
|
|
1820
|
+
}
|
|
1821
|
+
.sidenav-hamburger:hover {
|
|
1822
|
+
background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
|
|
1823
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
1824
|
+
}
|
|
1825
|
+
.sidenav-hamburger svg {
|
|
1826
|
+
fill: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
|
|
1827
|
+
}
|
|
1828
|
+
|
|
1829
|
+
.sidenav-hamburger-item {
|
|
1830
|
+
list-style: none;
|
|
1831
|
+
}
|
|
1832
|
+
.sidenav-hamburger-item:hover {
|
|
1833
|
+
background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
|
|
1834
|
+
}
|
|
1835
|
+
.sidenav-hamburger-item svg {
|
|
1836
|
+
fill: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
|
|
1837
|
+
}
|
|
1838
|
+
|
|
1839
|
+
.sidenav.sidenav-collapsed {
|
|
1840
|
+
width: 60px !important;
|
|
1841
|
+
}
|
|
1842
|
+
.sidenav.sidenav-collapsed .sidenav-item-text {
|
|
1843
|
+
display: none;
|
|
1844
|
+
}
|
|
1845
|
+
.sidenav.sidenav-collapsed li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
|
|
1846
|
+
padding: 0 18px;
|
|
1847
|
+
justify-content: center;
|
|
1848
|
+
}
|
|
1849
|
+
.sidenav.sidenav-collapsed li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i, .sidenav.sidenav-collapsed li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i.material-icons {
|
|
1850
|
+
margin: 0;
|
|
1851
|
+
float: none;
|
|
1852
|
+
}
|
|
1853
|
+
.sidenav.sidenav-collapsed .subheader {
|
|
1854
|
+
display: none;
|
|
1855
|
+
}
|
|
1856
|
+
.sidenav.sidenav-collapsed .sidenav-subitem {
|
|
1857
|
+
padding: 8px 16px !important;
|
|
1858
|
+
justify-content: center;
|
|
1859
|
+
}
|
|
1860
|
+
.sidenav.sidenav-collapsed .sidenav-subitem span {
|
|
1861
|
+
display: none;
|
|
1862
|
+
}
|
|
1863
|
+
|
|
1864
|
+
.sidenav-expand-toggle:hover {
|
|
1865
|
+
background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
|
|
1866
|
+
}
|
|
1867
|
+
.sidenav-expand-toggle svg {
|
|
1868
|
+
fill: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
|
|
1869
|
+
transition: transform 0.2s ease;
|
|
1870
|
+
}
|
|
1871
|
+
|
|
1872
|
+
.sidenav-subitem {
|
|
1873
|
+
list-style: none;
|
|
1874
|
+
transition: background-color 0.2s ease;
|
|
1875
|
+
}
|
|
1876
|
+
.sidenav-subitem:hover {
|
|
1877
|
+
background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
|
|
1878
|
+
}
|
|
1879
|
+
.sidenav-subitem.selected svg {
|
|
1880
|
+
fill: var(--mm-primary-color, #26a69a);
|
|
1881
|
+
}
|
|
1882
|
+
.sidenav-subitem svg {
|
|
1883
|
+
fill: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
|
|
1884
|
+
transition: fill 0.2s ease;
|
|
1885
|
+
}
|
|
1886
|
+
.sidenav-subitem i.material-icons {
|
|
1887
|
+
color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
|
|
1888
|
+
}
|
|
1889
|
+
|
|
1890
|
+
.sidenav li.has-submenu.active > a {
|
|
1891
|
+
background: var(--mm-primary-color-light, rgba(38, 166, 154, 0.1));
|
|
1892
|
+
color: var(--mm-primary-color, #26a69a);
|
|
1893
|
+
}
|
|
1894
|
+
|
|
1895
|
+
[data-theme=dark] .sidenav-hamburger {
|
|
1896
|
+
background: var(--mm-surface-color, #1e1e1e);
|
|
1897
|
+
}
|
|
1898
|
+
[data-theme=dark] .sidenav-hamburger svg {
|
|
1899
|
+
fill: var(--mm-text-primary, rgba(255, 255, 255, 0.87));
|
|
1900
|
+
}
|
|
1901
|
+
[data-theme=dark] .sidenav {
|
|
1902
|
+
background-color: var(--mm-surface-color, #1e1e1e);
|
|
1903
|
+
}
|
|
1904
|
+
[data-theme=dark] .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
|
|
1905
|
+
color: var(--mm-text-primary, rgba(255, 255, 255, 0.87));
|
|
1906
|
+
}
|
|
1907
|
+
[data-theme=dark] .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating):hover {
|
|
1908
|
+
background-color: var(--mm-border-color, rgba(255, 255, 255, 0.05));
|
|
1909
|
+
}
|
|
1910
|
+
[data-theme=dark] .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i, [data-theme=dark] .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i.material-icons {
|
|
1911
|
+
color: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
|
|
1912
|
+
}
|
|
1913
|
+
[data-theme=dark] .sidenav li.active {
|
|
1914
|
+
background-color: rgba(255, 255, 255, 0.05);
|
|
1915
|
+
}
|
|
1916
|
+
[data-theme=dark] .sidenav li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
|
|
1917
|
+
color: var(--mm-nav-active-text, #fff);
|
|
1918
|
+
}
|
|
1919
|
+
[data-theme=dark] .sidenav li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i, [data-theme=dark] .sidenav li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i.material-icons {
|
|
1920
|
+
color: var(--mm-nav-active-text, #fff);
|
|
1921
|
+
}
|
|
1922
|
+
[data-theme=dark] .sidenav .collapsible-body > ul:not(.collapsible) > li.active a {
|
|
1923
|
+
color: var(--mm-nav-active-text, #fff);
|
|
1924
|
+
}
|
|
1925
|
+
[data-theme=dark] .sidenav .collapsible-body > ul:not(.collapsible) > li.active a i,
|
|
1926
|
+
[data-theme=dark] .sidenav .collapsible-body > ul:not(.collapsible) > li.active a i.material-icons {
|
|
1927
|
+
color: var(--mm-nav-active-text, #fff);
|
|
1928
|
+
}
|
|
1929
|
+
[data-theme=dark] .sidenav .subheader {
|
|
1930
|
+
color: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
|
|
1931
|
+
}
|
|
1932
|
+
[data-theme=dark] .sidenav-expand-toggle svg {
|
|
1933
|
+
fill: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
|
|
1934
|
+
}
|
|
1935
|
+
[data-theme=dark] .sidenav-subitem:hover {
|
|
1936
|
+
background: var(--mm-border-color, rgba(255, 255, 255, 0.05));
|
|
1937
|
+
}
|
|
1938
|
+
[data-theme=dark] .sidenav-subitem svg {
|
|
1939
|
+
fill: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
|
|
1940
|
+
}
|
|
1941
|
+
[data-theme=dark] .sidenav-subitem i.material-icons {
|
|
1942
|
+
color: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
|
|
1943
|
+
}
|
|
1944
|
+
|
|
1945
|
+
.sidenav {
|
|
1946
|
+
transition: transform 0.3s ease, width 0.3s ease;
|
|
1947
|
+
}
|
|
1948
|
+
|
|
1810
1949
|
.breadcrumb {
|
|
1811
1950
|
padding: 1rem 0;
|
|
1812
1951
|
margin-bottom: 1rem;
|
package/dist/index.css
CHANGED
|
@@ -7692,6 +7692,10 @@ input[type=range]::-ms-thumb {
|
|
|
7692
7692
|
flex-direction: column;
|
|
7693
7693
|
}
|
|
7694
7694
|
|
|
7695
|
+
ul.sidenav.right-aligned li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) i.material-icons {
|
|
7696
|
+
margin: 0;
|
|
7697
|
+
}
|
|
7698
|
+
|
|
7695
7699
|
.sidenav {
|
|
7696
7700
|
position: fixed;
|
|
7697
7701
|
width: 300px;
|
|
@@ -7755,7 +7759,7 @@ input[type=range]::-ms-thumb {
|
|
|
7755
7759
|
background-color: var(--mm-border-color, rgba(0, 0, 0, 0.05));
|
|
7756
7760
|
}
|
|
7757
7761
|
.sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
|
|
7758
|
-
color: var(--mm-text
|
|
7762
|
+
color: var(--mm-nav-active-text, #fff);
|
|
7759
7763
|
display: block;
|
|
7760
7764
|
font-size: 14px;
|
|
7761
7765
|
font-weight: 500;
|
|
@@ -7770,6 +7774,9 @@ input[type=range]::-ms-thumb {
|
|
|
7770
7774
|
margin: 0 32px 0 0;
|
|
7771
7775
|
width: 24px;
|
|
7772
7776
|
color: var(--mm-text-secondary, rgba(0, 0, 0, 0.54));
|
|
7777
|
+
-webkit-user-select: none;
|
|
7778
|
+
-moz-user-select: none;
|
|
7779
|
+
user-select: none;
|
|
7773
7780
|
}
|
|
7774
7781
|
.sidenav li > .btn, .sidenav li > .btn-large, .sidenav li > .btn-flat, .sidenav li > .btn-floating {
|
|
7775
7782
|
margin: 10px 32px;
|
|
@@ -7876,7 +7883,7 @@ input[type=range]::-ms-thumb {
|
|
|
7876
7883
|
}
|
|
7877
7884
|
.sidenav .collapsible-body > ul:not(.collapsible) > li.active a,
|
|
7878
7885
|
.sidenav.sidenav-fixed .collapsible-body > ul:not(.collapsible) > li.active a {
|
|
7879
|
-
color: #fff;
|
|
7886
|
+
color: var(--mm-nav-active-text, #fff);
|
|
7880
7887
|
}
|
|
7881
7888
|
|
|
7882
7889
|
.sidenav .collapsible-body {
|
|
@@ -7902,6 +7909,140 @@ input[type=range]::-ms-thumb {
|
|
|
7902
7909
|
pointer-events: auto;
|
|
7903
7910
|
}
|
|
7904
7911
|
|
|
7912
|
+
.sidenav-hamburger {
|
|
7913
|
+
background: var(--mm-surface-color, #fff);
|
|
7914
|
+
border-radius: 4px;
|
|
7915
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
7916
|
+
transition: background-color 0.2s ease, box-shadow 0.2s ease;
|
|
7917
|
+
}
|
|
7918
|
+
.sidenav-hamburger:hover {
|
|
7919
|
+
background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
|
|
7920
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
7921
|
+
}
|
|
7922
|
+
.sidenav-hamburger svg {
|
|
7923
|
+
fill: var(--mm-text-primary, rgba(0, 0, 0, 0.87));
|
|
7924
|
+
}
|
|
7925
|
+
|
|
7926
|
+
.sidenav-hamburger-item {
|
|
7927
|
+
list-style: none;
|
|
7928
|
+
}
|
|
7929
|
+
.sidenav-hamburger-item:hover {
|
|
7930
|
+
background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
|
|
7931
|
+
}
|
|
7932
|
+
.sidenav-hamburger-item svg {
|
|
7933
|
+
fill: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
|
|
7934
|
+
}
|
|
7935
|
+
|
|
7936
|
+
.sidenav.sidenav-collapsed {
|
|
7937
|
+
width: 60px !important;
|
|
7938
|
+
}
|
|
7939
|
+
.sidenav.sidenav-collapsed .sidenav-item-text {
|
|
7940
|
+
display: none;
|
|
7941
|
+
}
|
|
7942
|
+
.sidenav.sidenav-collapsed li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
|
|
7943
|
+
padding: 0 18px;
|
|
7944
|
+
justify-content: center;
|
|
7945
|
+
}
|
|
7946
|
+
.sidenav.sidenav-collapsed li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i, .sidenav.sidenav-collapsed li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i.material-icons {
|
|
7947
|
+
margin: 0;
|
|
7948
|
+
float: none;
|
|
7949
|
+
}
|
|
7950
|
+
.sidenav.sidenav-collapsed .subheader {
|
|
7951
|
+
display: none;
|
|
7952
|
+
}
|
|
7953
|
+
.sidenav.sidenav-collapsed .sidenav-subitem {
|
|
7954
|
+
padding: 8px 16px !important;
|
|
7955
|
+
justify-content: center;
|
|
7956
|
+
}
|
|
7957
|
+
.sidenav.sidenav-collapsed .sidenav-subitem span {
|
|
7958
|
+
display: none;
|
|
7959
|
+
}
|
|
7960
|
+
|
|
7961
|
+
.sidenav-expand-toggle:hover {
|
|
7962
|
+
background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
|
|
7963
|
+
}
|
|
7964
|
+
.sidenav-expand-toggle svg {
|
|
7965
|
+
fill: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
|
|
7966
|
+
transition: transform 0.2s ease;
|
|
7967
|
+
}
|
|
7968
|
+
|
|
7969
|
+
.sidenav-subitem {
|
|
7970
|
+
list-style: none;
|
|
7971
|
+
transition: background-color 0.2s ease;
|
|
7972
|
+
}
|
|
7973
|
+
.sidenav-subitem:hover {
|
|
7974
|
+
background: var(--mm-border-color, rgba(0, 0, 0, 0.05));
|
|
7975
|
+
}
|
|
7976
|
+
.sidenav-subitem.selected svg {
|
|
7977
|
+
fill: var(--mm-primary-color, #26a69a);
|
|
7978
|
+
}
|
|
7979
|
+
.sidenav-subitem svg {
|
|
7980
|
+
fill: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
|
|
7981
|
+
transition: fill 0.2s ease;
|
|
7982
|
+
}
|
|
7983
|
+
.sidenav-subitem i.material-icons {
|
|
7984
|
+
color: var(--mm-text-secondary, rgba(0, 0, 0, 0.6));
|
|
7985
|
+
}
|
|
7986
|
+
|
|
7987
|
+
.sidenav li.has-submenu.active > a {
|
|
7988
|
+
background: var(--mm-primary-color-light, rgba(38, 166, 154, 0.1));
|
|
7989
|
+
color: var(--mm-primary-color, #26a69a);
|
|
7990
|
+
}
|
|
7991
|
+
|
|
7992
|
+
[data-theme=dark] .sidenav-hamburger {
|
|
7993
|
+
background: var(--mm-surface-color, #1e1e1e);
|
|
7994
|
+
}
|
|
7995
|
+
[data-theme=dark] .sidenav-hamburger svg {
|
|
7996
|
+
fill: var(--mm-text-primary, rgba(255, 255, 255, 0.87));
|
|
7997
|
+
}
|
|
7998
|
+
[data-theme=dark] .sidenav {
|
|
7999
|
+
background-color: var(--mm-surface-color, #1e1e1e);
|
|
8000
|
+
}
|
|
8001
|
+
[data-theme=dark] .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
|
|
8002
|
+
color: var(--mm-text-primary, rgba(255, 255, 255, 0.87));
|
|
8003
|
+
}
|
|
8004
|
+
[data-theme=dark] .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating):hover {
|
|
8005
|
+
background-color: var(--mm-border-color, rgba(255, 255, 255, 0.05));
|
|
8006
|
+
}
|
|
8007
|
+
[data-theme=dark] .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i, [data-theme=dark] .sidenav li > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i.material-icons {
|
|
8008
|
+
color: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
|
|
8009
|
+
}
|
|
8010
|
+
[data-theme=dark] .sidenav li.active {
|
|
8011
|
+
background-color: rgba(255, 255, 255, 0.05);
|
|
8012
|
+
}
|
|
8013
|
+
[data-theme=dark] .sidenav li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) {
|
|
8014
|
+
color: var(--mm-nav-active-text, #fff);
|
|
8015
|
+
}
|
|
8016
|
+
[data-theme=dark] .sidenav li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i, [data-theme=dark] .sidenav li.active > a:not(.btn):not(.btn-large):not(.btn-flat):not(.btn-floating) > i.material-icons {
|
|
8017
|
+
color: var(--mm-nav-active-text, #fff);
|
|
8018
|
+
}
|
|
8019
|
+
[data-theme=dark] .sidenav .collapsible-body > ul:not(.collapsible) > li.active a {
|
|
8020
|
+
color: var(--mm-nav-active-text, #fff);
|
|
8021
|
+
}
|
|
8022
|
+
[data-theme=dark] .sidenav .collapsible-body > ul:not(.collapsible) > li.active a i,
|
|
8023
|
+
[data-theme=dark] .sidenav .collapsible-body > ul:not(.collapsible) > li.active a i.material-icons {
|
|
8024
|
+
color: var(--mm-nav-active-text, #fff);
|
|
8025
|
+
}
|
|
8026
|
+
[data-theme=dark] .sidenav .subheader {
|
|
8027
|
+
color: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
|
|
8028
|
+
}
|
|
8029
|
+
[data-theme=dark] .sidenav-expand-toggle svg {
|
|
8030
|
+
fill: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
|
|
8031
|
+
}
|
|
8032
|
+
[data-theme=dark] .sidenav-subitem:hover {
|
|
8033
|
+
background: var(--mm-border-color, rgba(255, 255, 255, 0.05));
|
|
8034
|
+
}
|
|
8035
|
+
[data-theme=dark] .sidenav-subitem svg {
|
|
8036
|
+
fill: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
|
|
8037
|
+
}
|
|
8038
|
+
[data-theme=dark] .sidenav-subitem i.material-icons {
|
|
8039
|
+
color: var(--mm-text-secondary, rgba(255, 255, 255, 0.6));
|
|
8040
|
+
}
|
|
8041
|
+
|
|
8042
|
+
.sidenav {
|
|
8043
|
+
transition: transform 0.3s ease, width 0.3s ease;
|
|
8044
|
+
}
|
|
8045
|
+
|
|
7905
8046
|
/*
|
|
7906
8047
|
@license
|
|
7907
8048
|
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|