uikit 3.14.4-dev.4bd89c5ca → 3.14.4-dev.5fbbc45fb
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/CHANGELOG.md +39 -18
- package/build/util.js +1 -0
- package/dist/css/uikit-core-rtl.css +349 -160
- package/dist/css/uikit-core-rtl.min.css +1 -1
- package/dist/css/uikit-core.css +349 -160
- package/dist/css/uikit-core.min.css +1 -1
- package/dist/css/uikit-rtl.css +372 -190
- package/dist/css/uikit-rtl.min.css +1 -1
- package/dist/css/uikit.css +372 -190
- package/dist/css/uikit.min.css +1 -1
- package/dist/js/components/countdown.js +1 -1
- package/dist/js/components/countdown.min.js +1 -1
- package/dist/js/components/filter.js +1 -1
- package/dist/js/components/filter.min.js +1 -1
- package/dist/js/components/lightbox-panel.js +96 -131
- package/dist/js/components/lightbox-panel.min.js +1 -1
- package/dist/js/components/lightbox.js +96 -131
- package/dist/js/components/lightbox.min.js +1 -1
- package/dist/js/components/notification.js +4 -2
- package/dist/js/components/notification.min.js +1 -1
- package/dist/js/components/parallax.js +4 -5
- package/dist/js/components/parallax.min.js +1 -1
- package/dist/js/components/slider-parallax.js +4 -5
- package/dist/js/components/slider-parallax.min.js +1 -1
- package/dist/js/components/slider.js +1 -1
- package/dist/js/components/slider.min.js +1 -1
- package/dist/js/components/slideshow-parallax.js +4 -5
- package/dist/js/components/slideshow-parallax.min.js +1 -1
- package/dist/js/components/slideshow.js +1 -1
- package/dist/js/components/slideshow.min.js +1 -1
- package/dist/js/components/sortable.js +1 -1
- package/dist/js/components/sortable.min.js +1 -1
- package/dist/js/components/tooltip.js +102 -139
- package/dist/js/components/tooltip.min.js +1 -1
- package/dist/js/components/upload.js +1 -1
- package/dist/js/components/upload.min.js +1 -1
- package/dist/js/uikit-core.js +549 -503
- package/dist/js/uikit-core.min.js +17 -1
- package/dist/js/uikit-icons.js +1 -1
- package/dist/js/uikit-icons.min.js +1 -1
- package/dist/js/uikit.js +552 -504
- package/dist/js/uikit.min.js +17 -1
- package/package.json +11 -11
- package/src/images/{backgrounds/nav-parent-close.svg → components/nav-parent-icon-large.svg} +0 -0
- package/src/images/{backgrounds/navbar-parent-close.svg → components/nav-parent-icon.svg} +0 -0
- package/src/images/{backgrounds/navbar-parent-open.svg → components/navbar-parent-icon.svg} +1 -1
- package/src/images/components/navbar-toggle-icon.svg +25 -3
- package/src/js/api/hooks.js +5 -1
- package/src/js/api/state.js +2 -2
- package/src/js/components/notification.js +3 -1
- package/src/js/core/accordion.js +9 -17
- package/src/js/core/alert.js +35 -14
- package/src/js/core/drop.js +110 -82
- package/src/js/core/height-viewport.js +4 -2
- package/src/js/core/icon.js +16 -0
- package/src/js/core/index.js +2 -0
- package/src/js/core/leader.js +2 -2
- package/src/js/core/navbar.js +30 -45
- package/src/js/core/offcanvas.js +8 -4
- package/src/js/core/scroll.js +37 -10
- package/src/js/core/toggle.js +3 -5
- package/src/js/mixin/media.js +4 -5
- package/src/js/mixin/modal.js +15 -12
- package/src/js/mixin/position.js +24 -26
- package/src/js/mixin/style.js +11 -0
- package/src/js/mixin/togglable.js +88 -124
- package/src/js/util/animation.js +9 -7
- package/src/js/util/class.js +3 -1
- package/src/js/util/filter.js +3 -7
- package/src/js/util/position.js +136 -130
- package/src/js/util/style.js +4 -13
- package/src/js/util/viewport.js +3 -5
- package/src/less/components/_import.less +1 -0
- package/src/less/components/drop.less +1 -18
- package/src/less/components/dropbar.less +126 -0
- package/src/less/components/dropdown.less +11 -19
- package/src/less/components/leader.less +1 -1
- package/src/less/components/nav.less +219 -58
- package/src/less/components/navbar.less +49 -81
- package/src/less/components/utility.less +10 -2
- package/src/less/theme/_import.less +1 -0
- package/src/less/theme/dropbar.less +44 -0
- package/src/less/theme/dropdown.less +0 -11
- package/src/less/theme/nav.less +45 -7
- package/src/less/theme/navbar.less +5 -44
- package/src/scss/components/_import.scss +1 -0
- package/src/scss/components/drop.scss +1 -18
- package/src/scss/components/dropbar.scss +126 -0
- package/src/scss/components/dropdown.scss +11 -19
- package/src/scss/components/leader.scss +1 -1
- package/src/scss/components/nav.scss +168 -46
- package/src/scss/components/navbar.scss +49 -69
- package/src/scss/components/utility.scss +8 -1
- package/src/scss/mixins-theme.scss +83 -61
- package/src/scss/mixins.scss +79 -29
- package/src/scss/theme/_import.scss +1 -0
- package/src/scss/theme/dropbar.scss +44 -0
- package/src/scss/theme/dropdown.scss +0 -8
- package/src/scss/theme/nav.scss +43 -7
- package/src/scss/theme/navbar.scss +4 -16
- package/src/scss/variables-theme.scss +62 -26
- package/src/scss/variables.scss +50 -21
- package/tests/accordion.html +2 -2
- package/tests/alert.html +2 -2
- package/tests/countdown.html +1 -1
- package/tests/drop.html +446 -416
- package/tests/dropbar.html +458 -0
- package/tests/dropdown.html +8 -470
- package/tests/filter.html +9 -12
- package/tests/flex.html +36 -36
- package/tests/form.html +1 -1
- package/tests/grid.html +22 -22
- package/tests/height.html +6 -6
- package/tests/index.html +129 -110
- package/tests/js/index.js +1 -4
- package/tests/lightbox.html +5 -5
- package/tests/list.html +8 -8
- package/tests/modal.html +13 -13
- package/tests/nav.html +117 -75
- package/tests/navbar.html +129 -249
- package/tests/offcanvas.html +17 -21
- package/tests/pagination.html +6 -6
- package/tests/parallax.html +1 -1
- package/tests/position.html +18 -16
- package/tests/progress.html +9 -9
- package/tests/scroll.html +7 -10
- package/tests/search.html +6 -6
- package/tests/slider.html +6 -5
- package/tests/slideshow.html +8 -8
- package/tests/sortable.html +6 -8
- package/tests/sticky-navbar.html +15 -15
- package/tests/sticky.html +8 -8
- package/tests/switcher.html +1 -1
- package/tests/tab.html +1 -1
- package/tests/table.html +7 -7
- package/tests/toggle.html +2 -2
- package/tests/tooltip.html +1 -1
- package/tests/upload.html +11 -11
- package/tests/utility.html +35 -16
- package/src/images/backgrounds/nav-parent-open.svg +0 -3
|
@@ -805,11 +805,13 @@
|
|
|
805
805
|
|
|
806
806
|
}
|
|
807
807
|
@mixin hook-drop-misc(){}
|
|
808
|
+
@mixin hook-dropbar(){}
|
|
809
|
+
@mixin hook-dropbar-top(){ box-shadow: $dropbar-top-box-shadow; }
|
|
810
|
+
@mixin hook-dropbar-bottom(){ box-shadow: $dropbar-bottom-box-shadow; }
|
|
811
|
+
@mixin hook-dropbar-left(){ box-shadow: $dropbar-left-box-shadow; }
|
|
812
|
+
@mixin hook-dropbar-right(){ box-shadow: $dropbar-right-box-shadow; }
|
|
813
|
+
@mixin hook-dropbar-misc(){}
|
|
808
814
|
@mixin hook-dropdown(){ box-shadow: $dropdown-box-shadow; }
|
|
809
|
-
@mixin hook-dropdown-stretch(){
|
|
810
|
-
box-shadow: none;
|
|
811
|
-
background: $dropdown-stretch-background;
|
|
812
|
-
}
|
|
813
815
|
@mixin hook-dropdown-nav(){ font-size: $dropdown-nav-font-size; }
|
|
814
816
|
@mixin hook-dropdown-nav-item(){}
|
|
815
817
|
@mixin hook-dropdown-nav-item-hover(){}
|
|
@@ -1269,17 +1271,6 @@
|
|
|
1269
1271
|
}
|
|
1270
1272
|
@mixin hook-inverse-component-nav(){
|
|
1271
1273
|
|
|
1272
|
-
//
|
|
1273
|
-
// Parent icon modifier
|
|
1274
|
-
//
|
|
1275
|
-
|
|
1276
|
-
.uk-nav-parent-icon > .uk-parent > a::after {
|
|
1277
|
-
@include svg-fill($internal-nav-parent-close-image, "#000", $inverse-nav-parent-icon-color);
|
|
1278
|
-
@if(mixin-exists(hook-inverse-nav-parent-icon)) {@include hook-inverse-nav-parent-icon();}
|
|
1279
|
-
}
|
|
1280
|
-
|
|
1281
|
-
.uk-nav-parent-icon > .uk-parent.uk-open > a::after { @include svg-fill($internal-nav-parent-open-image, "#000", $inverse-nav-parent-icon-color); }
|
|
1282
|
-
|
|
1283
1274
|
//
|
|
1284
1275
|
// Default
|
|
1285
1276
|
//
|
|
@@ -1350,13 +1341,63 @@
|
|
|
1350
1341
|
|
|
1351
1342
|
.uk-nav-primary .uk-nav-sub li.uk-active > a { color: $inverse-nav-primary-sublist-item-active-color; }
|
|
1352
1343
|
|
|
1344
|
+
//
|
|
1345
|
+
// Secondary
|
|
1346
|
+
//
|
|
1347
|
+
|
|
1348
|
+
.uk-nav-secondary > li > a {
|
|
1349
|
+
color: $inverse-nav-secondary-item-color;
|
|
1350
|
+
@if(mixin-exists(hook-inverse-nav-secondary-item)) {@include hook-inverse-nav-secondary-item();}
|
|
1351
|
+
}
|
|
1352
|
+
|
|
1353
|
+
.uk-nav-secondary > li > a:hover {
|
|
1354
|
+
color: $inverse-nav-secondary-item-hover-color;
|
|
1355
|
+
@if(mixin-exists(hook-inverse-nav-secondary-item-hover)) {@include hook-inverse-nav-secondary-item-hover();}
|
|
1356
|
+
}
|
|
1357
|
+
|
|
1358
|
+
.uk-nav-secondary > li.uk-active > a {
|
|
1359
|
+
color: $inverse-nav-secondary-item-active-color;
|
|
1360
|
+
@if(mixin-exists(hook-inverse-nav-secondary-item-active)) {@include hook-inverse-nav-secondary-item-active();}
|
|
1361
|
+
}
|
|
1362
|
+
|
|
1363
|
+
.uk-nav-secondary .uk-nav-subtitle {
|
|
1364
|
+
color: $inverse-nav-secondary-subtitle-color;
|
|
1365
|
+
@if(mixin-exists(hook-inverse-nav-secondary-subtitle)) {@include hook-inverse-nav-secondary-subtitle();}
|
|
1366
|
+
}
|
|
1367
|
+
|
|
1368
|
+
.uk-nav-secondary > li > a:hover .uk-nav-subtitle {
|
|
1369
|
+
color: $inverse-nav-secondary-subtitle-hover-color;
|
|
1370
|
+
@if(mixin-exists(hook-inverse-nav-secondary-subtitle-hover)) {@include hook-inverse-nav-secondary-subtitle-hover();}
|
|
1371
|
+
}
|
|
1372
|
+
|
|
1373
|
+
.uk-nav-secondary > li.uk-active > a .uk-nav-subtitle {
|
|
1374
|
+
color: $inverse-nav-secondary-subtitle-active-color;
|
|
1375
|
+
@if(mixin-exists(hook-inverse-nav-secondary-subtitle-active)) {@include hook-inverse-nav-secondary-subtitle-active();}
|
|
1376
|
+
}
|
|
1377
|
+
|
|
1378
|
+
.uk-nav-secondary .uk-nav-header {
|
|
1379
|
+
color: $inverse-nav-secondary-header-color;
|
|
1380
|
+
@if(mixin-exists(hook-inverse-nav-secondary-header)) {@include hook-inverse-nav-secondary-header();}
|
|
1381
|
+
}
|
|
1382
|
+
|
|
1383
|
+
.uk-nav-secondary .uk-nav-divider {
|
|
1384
|
+
border-top-color: $inverse-nav-secondary-divider-border;
|
|
1385
|
+
@if(mixin-exists(hook-inverse-nav-secondary-divider)) {@include hook-inverse-nav-secondary-divider();}
|
|
1386
|
+
}
|
|
1387
|
+
|
|
1388
|
+
.uk-nav-secondary .uk-nav-sub a { color: $inverse-nav-secondary-sublist-item-color; }
|
|
1389
|
+
|
|
1390
|
+
.uk-nav-secondary .uk-nav-sub a:hover { color: $inverse-nav-secondary-sublist-item-hover-color; }
|
|
1391
|
+
|
|
1392
|
+
.uk-nav-secondary .uk-nav-sub li.uk-active > a { color: $inverse-nav-secondary-sublist-item-active-color; }
|
|
1393
|
+
|
|
1353
1394
|
//
|
|
1354
1395
|
// Dividers
|
|
1355
1396
|
//
|
|
1356
1397
|
|
|
1357
1398
|
.uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
|
|
1358
1399
|
border-top-color: $inverse-nav-dividers-border;
|
|
1359
|
-
@if(mixin-exists(hook-nav-dividers)) {@include hook-nav-dividers();}
|
|
1400
|
+
@if(mixin-exists(hook-inverse-nav-dividers)) {@include hook-inverse-nav-dividers();}
|
|
1360
1401
|
}
|
|
1361
1402
|
|
|
1362
1403
|
}
|
|
@@ -1387,18 +1428,6 @@
|
|
|
1387
1428
|
@if(mixin-exists(hook-inverse-navbar-nav-item-active)) {@include hook-inverse-navbar-nav-item-active();}
|
|
1388
1429
|
}
|
|
1389
1430
|
|
|
1390
|
-
//
|
|
1391
|
-
// Parent icon modifier
|
|
1392
|
-
//
|
|
1393
|
-
|
|
1394
|
-
.uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a::after {
|
|
1395
|
-
@include svg-fill($internal-navbar-parent-close-image, "#000", $inverse-navbar-parent-icon-color);
|
|
1396
|
-
@if(mixin-exists(hook-inverse-nav-parent-icon)) {@include hook-inverse-nav-parent-icon();}
|
|
1397
|
-
}
|
|
1398
|
-
|
|
1399
|
-
.uk-navbar-parent-icon .uk-navbar-nav > .uk-parent:hover > a::after,
|
|
1400
|
-
.uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a[aria-expanded="true"]::after { @include svg-fill($internal-navbar-parent-open-image, "#000", $inverse-navbar-parent-icon-color); }
|
|
1401
|
-
|
|
1402
1431
|
//
|
|
1403
1432
|
// Item
|
|
1404
1433
|
//
|
|
@@ -1591,7 +1620,8 @@
|
|
|
1591
1620
|
@if(mixin-exists(hook-inverse-logo-hover)) {@include hook-inverse-logo-hover();}
|
|
1592
1621
|
}
|
|
1593
1622
|
|
|
1594
|
-
.uk-logo > :not(
|
|
1623
|
+
.uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
|
|
1624
|
+
.uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type) { display: none; }
|
|
1595
1625
|
.uk-logo-inverse { display: block; }
|
|
1596
1626
|
|
|
1597
1627
|
}
|
|
@@ -1728,7 +1758,6 @@
|
|
|
1728
1758
|
@mixin hook-modal-close-full-hover(){}
|
|
1729
1759
|
@mixin hook-modal-misc(){}
|
|
1730
1760
|
@mixin hook-nav-sub(){}
|
|
1731
|
-
@mixin hook-nav-parent-icon(){}
|
|
1732
1761
|
@mixin hook-nav-header(){}
|
|
1733
1762
|
@mixin hook-nav-divider(){}
|
|
1734
1763
|
@mixin hook-nav-default(){}
|
|
@@ -1745,9 +1774,19 @@
|
|
|
1745
1774
|
@mixin hook-nav-primary-subtitle(){}
|
|
1746
1775
|
@mixin hook-nav-primary-header(){}
|
|
1747
1776
|
@mixin hook-nav-primary-divider(){}
|
|
1777
|
+
@mixin hook-nav-secondary(){
|
|
1778
|
+
> :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) { margin-top: $nav-background-margin-top; }
|
|
1779
|
+
}
|
|
1780
|
+
@mixin hook-nav-secondary-item(){ padding: $nav-background-item-padding-vertical $nav-background-item-padding-horizontal; }
|
|
1781
|
+
@mixin hook-nav-secondary-item-hover(){ background-color: $nav-background-item-hover-background; }
|
|
1782
|
+
@mixin hook-nav-secondary-item-active(){ background-color: $nav-background-item-active-background; }
|
|
1783
|
+
@mixin hook-nav-secondary-subtitle(){}
|
|
1784
|
+
@mixin hook-nav-secondary-subtitle-hover(){}
|
|
1785
|
+
@mixin hook-nav-secondary-subtitle-active(){}
|
|
1786
|
+
@mixin hook-nav-secondary-header(){}
|
|
1787
|
+
@mixin hook-nav-secondary-divider(){}
|
|
1748
1788
|
@mixin hook-nav-dividers(){}
|
|
1749
1789
|
@mixin hook-nav-misc(){}
|
|
1750
|
-
@mixin hook-inverse-nav-parent-icon(){}
|
|
1751
1790
|
@mixin hook-inverse-nav-default-item(){}
|
|
1752
1791
|
@mixin hook-inverse-nav-default-item-hover(){}
|
|
1753
1792
|
@mixin hook-inverse-nav-default-item-active(){}
|
|
@@ -1758,6 +1797,15 @@
|
|
|
1758
1797
|
@mixin hook-inverse-nav-primary-item-active(){}
|
|
1759
1798
|
@mixin hook-inverse-nav-primary-header(){}
|
|
1760
1799
|
@mixin hook-inverse-nav-primary-divider(){}
|
|
1800
|
+
@mixin hook-inverse-nav-secondary-item(){}
|
|
1801
|
+
@mixin hook-inverse-nav-secondary-item-hover(){ background-color: $inverse-nav-background-item-hover-background; }
|
|
1802
|
+
@mixin hook-inverse-nav-secondary-item-active(){ background-color: $inverse-nav-background-item-active-background; }
|
|
1803
|
+
@mixin hook-inverse-nav-secondary-subtitle(){}
|
|
1804
|
+
@mixin hook-inverse-nav-secondary-subtitle-hover(){}
|
|
1805
|
+
@mixin hook-inverse-nav-secondary-subtitle-active(){}
|
|
1806
|
+
@mixin hook-inverse-nav-secondary-header(){}
|
|
1807
|
+
@mixin hook-inverse-nav-secondary-divider(){}
|
|
1808
|
+
@mixin hook-inverse-nav-dividers(){}
|
|
1761
1809
|
@mixin hook-navbar(){}
|
|
1762
1810
|
@mixin hook-navbar-container(){}
|
|
1763
1811
|
@mixin hook-navbar-nav-item(){
|
|
@@ -1778,8 +1826,9 @@
|
|
|
1778
1826
|
@mixin hook-navbar-transparent(){}
|
|
1779
1827
|
@mixin hook-navbar-sticky(){}
|
|
1780
1828
|
@mixin hook-navbar-dropdown(){ box-shadow: $navbar-dropdown-box-shadow; }
|
|
1781
|
-
@mixin hook-navbar-dropdown-
|
|
1829
|
+
@mixin hook-navbar-dropdown-large(){}
|
|
1782
1830
|
@mixin hook-navbar-dropdown-dropbar(){ box-shadow: none; }
|
|
1831
|
+
@mixin hook-navbar-dropdown-dropbar-large(){}
|
|
1783
1832
|
@mixin hook-navbar-dropdown-nav(){ font-size: $navbar-dropdown-nav-font-size; }
|
|
1784
1833
|
@mixin hook-navbar-dropdown-nav-item(){}
|
|
1785
1834
|
@mixin hook-navbar-dropdown-nav-item-hover(){}
|
|
@@ -1787,35 +1836,8 @@
|
|
|
1787
1836
|
@mixin hook-navbar-dropdown-nav-subtitle(){}
|
|
1788
1837
|
@mixin hook-navbar-dropdown-nav-header(){}
|
|
1789
1838
|
@mixin hook-navbar-dropdown-nav-divider(){}
|
|
1790
|
-
@mixin hook-navbar-dropbar(){
|
|
1791
|
-
@mixin hook-navbar-misc(){
|
|
1792
|
-
|
|
1793
|
-
/*
|
|
1794
|
-
* Grid Divider
|
|
1795
|
-
*/
|
|
1796
|
-
|
|
1797
|
-
.uk-navbar-dropdown-grid > * { position: relative; }
|
|
1798
|
-
|
|
1799
|
-
.uk-navbar-dropdown-grid > :not(.uk-first-column)::before {
|
|
1800
|
-
content: "";
|
|
1801
|
-
position: absolute;
|
|
1802
|
-
top: 0;
|
|
1803
|
-
bottom: 0;
|
|
1804
|
-
left: ($navbar-dropdown-grid-gutter-horizontal * 0.5);
|
|
1805
|
-
border-left: $navbar-dropdown-grid-divider-border-width solid $navbar-dropdown-grid-divider-border;
|
|
1806
|
-
}
|
|
1807
|
-
|
|
1808
|
-
/* Vertical */
|
|
1809
|
-
.uk-navbar-dropdown-grid.uk-grid-stack > .uk-grid-margin::before {
|
|
1810
|
-
content: "";
|
|
1811
|
-
position: absolute;
|
|
1812
|
-
top: -($navbar-dropdown-grid-gutter-vertical * 0.5);
|
|
1813
|
-
left: $navbar-dropdown-grid-gutter-horizontal;
|
|
1814
|
-
right: 0;
|
|
1815
|
-
border-top: $navbar-dropdown-grid-divider-border-width solid $navbar-dropdown-grid-divider-border;
|
|
1816
|
-
}
|
|
1817
|
-
|
|
1818
|
-
}
|
|
1839
|
+
@mixin hook-navbar-dropbar(){}
|
|
1840
|
+
@mixin hook-navbar-misc(){}
|
|
1819
1841
|
@mixin hook-inverse-navbar-nav-item(){}
|
|
1820
1842
|
@mixin hook-inverse-navbar-nav-item-hover(){}
|
|
1821
1843
|
@mixin hook-inverse-navbar-nav-item-onclick(){}
|
package/src/scss/mixins.scss
CHANGED
|
@@ -580,8 +580,13 @@
|
|
|
580
580
|
|
|
581
581
|
}
|
|
582
582
|
@mixin hook-drop-misc(){}
|
|
583
|
+
@mixin hook-dropbar(){}
|
|
584
|
+
@mixin hook-dropbar-top(){}
|
|
585
|
+
@mixin hook-dropbar-bottom(){}
|
|
586
|
+
@mixin hook-dropbar-left(){}
|
|
587
|
+
@mixin hook-dropbar-right(){}
|
|
588
|
+
@mixin hook-dropbar-misc(){}
|
|
583
589
|
@mixin hook-dropdown(){}
|
|
584
|
-
@mixin hook-dropdown-stretch(){}
|
|
585
590
|
@mixin hook-dropdown-nav(){}
|
|
586
591
|
@mixin hook-dropdown-nav-item(){}
|
|
587
592
|
@mixin hook-dropdown-nav-item-hover(){}
|
|
@@ -1020,17 +1025,6 @@
|
|
|
1020
1025
|
}
|
|
1021
1026
|
@mixin hook-inverse-component-nav(){
|
|
1022
1027
|
|
|
1023
|
-
//
|
|
1024
|
-
// Parent icon modifier
|
|
1025
|
-
//
|
|
1026
|
-
|
|
1027
|
-
.uk-nav-parent-icon > .uk-parent > a::after {
|
|
1028
|
-
@include svg-fill($internal-nav-parent-close-image, "#000", $inverse-nav-parent-icon-color);
|
|
1029
|
-
@if(mixin-exists(hook-inverse-nav-parent-icon)) {@include hook-inverse-nav-parent-icon();}
|
|
1030
|
-
}
|
|
1031
|
-
|
|
1032
|
-
.uk-nav-parent-icon > .uk-parent.uk-open > a::after { @include svg-fill($internal-nav-parent-open-image, "#000", $inverse-nav-parent-icon-color); }
|
|
1033
|
-
|
|
1034
1028
|
//
|
|
1035
1029
|
// Default
|
|
1036
1030
|
//
|
|
@@ -1101,13 +1095,63 @@
|
|
|
1101
1095
|
|
|
1102
1096
|
.uk-nav-primary .uk-nav-sub li.uk-active > a { color: $inverse-nav-primary-sublist-item-active-color; }
|
|
1103
1097
|
|
|
1098
|
+
//
|
|
1099
|
+
// Secondary
|
|
1100
|
+
//
|
|
1101
|
+
|
|
1102
|
+
.uk-nav-secondary > li > a {
|
|
1103
|
+
color: $inverse-nav-secondary-item-color;
|
|
1104
|
+
@if(mixin-exists(hook-inverse-nav-secondary-item)) {@include hook-inverse-nav-secondary-item();}
|
|
1105
|
+
}
|
|
1106
|
+
|
|
1107
|
+
.uk-nav-secondary > li > a:hover {
|
|
1108
|
+
color: $inverse-nav-secondary-item-hover-color;
|
|
1109
|
+
@if(mixin-exists(hook-inverse-nav-secondary-item-hover)) {@include hook-inverse-nav-secondary-item-hover();}
|
|
1110
|
+
}
|
|
1111
|
+
|
|
1112
|
+
.uk-nav-secondary > li.uk-active > a {
|
|
1113
|
+
color: $inverse-nav-secondary-item-active-color;
|
|
1114
|
+
@if(mixin-exists(hook-inverse-nav-secondary-item-active)) {@include hook-inverse-nav-secondary-item-active();}
|
|
1115
|
+
}
|
|
1116
|
+
|
|
1117
|
+
.uk-nav-secondary .uk-nav-subtitle {
|
|
1118
|
+
color: $inverse-nav-secondary-subtitle-color;
|
|
1119
|
+
@if(mixin-exists(hook-inverse-nav-secondary-subtitle)) {@include hook-inverse-nav-secondary-subtitle();}
|
|
1120
|
+
}
|
|
1121
|
+
|
|
1122
|
+
.uk-nav-secondary > li > a:hover .uk-nav-subtitle {
|
|
1123
|
+
color: $inverse-nav-secondary-subtitle-hover-color;
|
|
1124
|
+
@if(mixin-exists(hook-inverse-nav-secondary-subtitle-hover)) {@include hook-inverse-nav-secondary-subtitle-hover();}
|
|
1125
|
+
}
|
|
1126
|
+
|
|
1127
|
+
.uk-nav-secondary > li.uk-active > a .uk-nav-subtitle {
|
|
1128
|
+
color: $inverse-nav-secondary-subtitle-active-color;
|
|
1129
|
+
@if(mixin-exists(hook-inverse-nav-secondary-subtitle-active)) {@include hook-inverse-nav-secondary-subtitle-active();}
|
|
1130
|
+
}
|
|
1131
|
+
|
|
1132
|
+
.uk-nav-secondary .uk-nav-header {
|
|
1133
|
+
color: $inverse-nav-secondary-header-color;
|
|
1134
|
+
@if(mixin-exists(hook-inverse-nav-secondary-header)) {@include hook-inverse-nav-secondary-header();}
|
|
1135
|
+
}
|
|
1136
|
+
|
|
1137
|
+
.uk-nav-secondary .uk-nav-divider {
|
|
1138
|
+
border-top-color: $inverse-nav-secondary-divider-border;
|
|
1139
|
+
@if(mixin-exists(hook-inverse-nav-secondary-divider)) {@include hook-inverse-nav-secondary-divider();}
|
|
1140
|
+
}
|
|
1141
|
+
|
|
1142
|
+
.uk-nav-secondary .uk-nav-sub a { color: $inverse-nav-secondary-sublist-item-color; }
|
|
1143
|
+
|
|
1144
|
+
.uk-nav-secondary .uk-nav-sub a:hover { color: $inverse-nav-secondary-sublist-item-hover-color; }
|
|
1145
|
+
|
|
1146
|
+
.uk-nav-secondary .uk-nav-sub li.uk-active > a { color: $inverse-nav-secondary-sublist-item-active-color; }
|
|
1147
|
+
|
|
1104
1148
|
//
|
|
1105
1149
|
// Dividers
|
|
1106
1150
|
//
|
|
1107
1151
|
|
|
1108
1152
|
.uk-nav.uk-nav-divider > :not(.uk-nav-divider) + :not(.uk-nav-header, .uk-nav-divider) {
|
|
1109
1153
|
border-top-color: $inverse-nav-dividers-border;
|
|
1110
|
-
@if(mixin-exists(hook-nav-dividers)) {@include hook-nav-dividers();}
|
|
1154
|
+
@if(mixin-exists(hook-inverse-nav-dividers)) {@include hook-inverse-nav-dividers();}
|
|
1111
1155
|
}
|
|
1112
1156
|
|
|
1113
1157
|
}
|
|
@@ -1138,18 +1182,6 @@
|
|
|
1138
1182
|
@if(mixin-exists(hook-inverse-navbar-nav-item-active)) {@include hook-inverse-navbar-nav-item-active();}
|
|
1139
1183
|
}
|
|
1140
1184
|
|
|
1141
|
-
//
|
|
1142
|
-
// Parent icon modifier
|
|
1143
|
-
//
|
|
1144
|
-
|
|
1145
|
-
.uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a::after {
|
|
1146
|
-
@include svg-fill($internal-navbar-parent-close-image, "#000", $inverse-navbar-parent-icon-color);
|
|
1147
|
-
@if(mixin-exists(hook-inverse-nav-parent-icon)) {@include hook-inverse-nav-parent-icon();}
|
|
1148
|
-
}
|
|
1149
|
-
|
|
1150
|
-
.uk-navbar-parent-icon .uk-navbar-nav > .uk-parent:hover > a::after,
|
|
1151
|
-
.uk-navbar-parent-icon .uk-navbar-nav > .uk-parent > a[aria-expanded="true"]::after { @include svg-fill($internal-navbar-parent-open-image, "#000", $inverse-navbar-parent-icon-color); }
|
|
1152
|
-
|
|
1153
1185
|
//
|
|
1154
1186
|
// Item
|
|
1155
1187
|
//
|
|
@@ -1342,7 +1374,8 @@
|
|
|
1342
1374
|
@if(mixin-exists(hook-inverse-logo-hover)) {@include hook-inverse-logo-hover();}
|
|
1343
1375
|
}
|
|
1344
1376
|
|
|
1345
|
-
.uk-logo > :not(
|
|
1377
|
+
.uk-logo > picture:not(:only-of-type) > :not(.uk-logo-inverse),
|
|
1378
|
+
.uk-logo > :not(picture):not(.uk-logo-inverse):not(:only-of-type) { display: none; }
|
|
1346
1379
|
.uk-logo-inverse { display: block; }
|
|
1347
1380
|
|
|
1348
1381
|
}
|
|
@@ -1455,7 +1488,6 @@
|
|
|
1455
1488
|
@mixin hook-modal-close-full-hover(){}
|
|
1456
1489
|
@mixin hook-modal-misc(){}
|
|
1457
1490
|
@mixin hook-nav-sub(){}
|
|
1458
|
-
@mixin hook-nav-parent-icon(){}
|
|
1459
1491
|
@mixin hook-nav-header(){}
|
|
1460
1492
|
@mixin hook-nav-divider(){}
|
|
1461
1493
|
@mixin hook-nav-default(){}
|
|
@@ -1472,9 +1504,17 @@
|
|
|
1472
1504
|
@mixin hook-nav-primary-subtitle(){}
|
|
1473
1505
|
@mixin hook-nav-primary-header(){}
|
|
1474
1506
|
@mixin hook-nav-primary-divider(){}
|
|
1507
|
+
@mixin hook-nav-secondary(){}
|
|
1508
|
+
@mixin hook-nav-secondary-item(){}
|
|
1509
|
+
@mixin hook-nav-secondary-item-hover(){}
|
|
1510
|
+
@mixin hook-nav-secondary-item-active(){}
|
|
1511
|
+
@mixin hook-nav-secondary-subtitle(){}
|
|
1512
|
+
@mixin hook-nav-secondary-subtitle-hover(){}
|
|
1513
|
+
@mixin hook-nav-secondary-subtitle-active(){}
|
|
1514
|
+
@mixin hook-nav-secondary-header(){}
|
|
1515
|
+
@mixin hook-nav-secondary-divider(){}
|
|
1475
1516
|
@mixin hook-nav-dividers(){}
|
|
1476
1517
|
@mixin hook-nav-misc(){}
|
|
1477
|
-
@mixin hook-inverse-nav-parent-icon(){}
|
|
1478
1518
|
@mixin hook-inverse-nav-default-item(){}
|
|
1479
1519
|
@mixin hook-inverse-nav-default-item-hover(){}
|
|
1480
1520
|
@mixin hook-inverse-nav-default-item-active(){}
|
|
@@ -1485,6 +1525,15 @@
|
|
|
1485
1525
|
@mixin hook-inverse-nav-primary-item-active(){}
|
|
1486
1526
|
@mixin hook-inverse-nav-primary-header(){}
|
|
1487
1527
|
@mixin hook-inverse-nav-primary-divider(){}
|
|
1528
|
+
@mixin hook-inverse-nav-secondary-item(){}
|
|
1529
|
+
@mixin hook-inverse-nav-secondary-item-hover(){}
|
|
1530
|
+
@mixin hook-inverse-nav-secondary-item-active(){}
|
|
1531
|
+
@mixin hook-inverse-nav-secondary-subtitle(){}
|
|
1532
|
+
@mixin hook-inverse-nav-secondary-subtitle-hover(){}
|
|
1533
|
+
@mixin hook-inverse-nav-secondary-subtitle-active(){}
|
|
1534
|
+
@mixin hook-inverse-nav-secondary-header(){}
|
|
1535
|
+
@mixin hook-inverse-nav-secondary-divider(){}
|
|
1536
|
+
@mixin hook-inverse-nav-dividers(){}
|
|
1488
1537
|
@mixin hook-navbar(){}
|
|
1489
1538
|
@mixin hook-navbar-container(){}
|
|
1490
1539
|
@mixin hook-navbar-nav-item(){}
|
|
@@ -1501,8 +1550,9 @@
|
|
|
1501
1550
|
@mixin hook-navbar-transparent(){}
|
|
1502
1551
|
@mixin hook-navbar-sticky(){}
|
|
1503
1552
|
@mixin hook-navbar-dropdown(){}
|
|
1504
|
-
@mixin hook-navbar-dropdown-
|
|
1553
|
+
@mixin hook-navbar-dropdown-large(){}
|
|
1505
1554
|
@mixin hook-navbar-dropdown-dropbar(){}
|
|
1555
|
+
@mixin hook-navbar-dropdown-dropbar-large(){}
|
|
1506
1556
|
@mixin hook-navbar-dropdown-nav(){}
|
|
1507
1557
|
@mixin hook-navbar-dropdown-nav-item(){}
|
|
1508
1558
|
@mixin hook-navbar-dropdown-nav-item-hover(){}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Component: Dropbar
|
|
3
|
+
//
|
|
4
|
+
// ========================================================================
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
// Variables
|
|
8
|
+
// ========================================================================
|
|
9
|
+
|
|
10
|
+
$dropbar-padding-top: 25px !default;
|
|
11
|
+
$dropbar-background: $global-background !default;
|
|
12
|
+
|
|
13
|
+
//
|
|
14
|
+
// New
|
|
15
|
+
//
|
|
16
|
+
|
|
17
|
+
$dropbar-top-box-shadow: 0 12px 7px -6px rgba(0, 0, 0, 0.05) !default;
|
|
18
|
+
$dropbar-bottom-box-shadow: 0 -12px 7px -6px rgba(0, 0, 0, 0.05) !default;
|
|
19
|
+
$dropbar-left-box-shadow: 12px 0 7px -6px rgba(0, 0, 0, 0.05) !default;
|
|
20
|
+
$dropbar-right-box-shadow: -12px 0 7px -6px rgba(0, 0, 0, 0.05) !default;
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
// Component
|
|
24
|
+
// ========================================================================
|
|
25
|
+
|
|
26
|
+
// @mixin hook-dropbar(){}
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
// Direction modifier
|
|
30
|
+
// ========================================================================
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
// Miscellaneous
|
|
42
|
+
// ========================================================================
|
|
43
|
+
|
|
44
|
+
// @mixin hook-dropbar-misc(){}
|
|
@@ -20,8 +20,6 @@ $dropdown-nav-font-size: $global-small-font-size !defaul
|
|
|
20
20
|
|
|
21
21
|
$dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15) !default;
|
|
22
22
|
|
|
23
|
-
$dropdown-stretch-background: $global-muted-background !default;
|
|
24
|
-
|
|
25
23
|
|
|
26
24
|
// Component
|
|
27
25
|
// ========================================================================
|
|
@@ -29,12 +27,6 @@ $dropdown-stretch-background: $global-muted-background !defau
|
|
|
29
27
|
|
|
30
28
|
|
|
31
29
|
|
|
32
|
-
// Stretch modifier
|
|
33
|
-
// ========================================================================
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
30
|
// Nav
|
|
39
31
|
// ========================================================================
|
|
40
32
|
|
package/src/scss/theme/nav.scss
CHANGED
|
@@ -11,17 +11,21 @@ $nav-default-font-size: $global-small-font-size !defaul
|
|
|
11
11
|
|
|
12
12
|
$nav-default-subtitle-font-size: 12px !default;
|
|
13
13
|
|
|
14
|
+
//
|
|
15
|
+
// New
|
|
16
|
+
//
|
|
14
17
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
18
|
+
$nav-background-margin-top: 0 !default;
|
|
19
|
+
$nav-background-item-padding-horizontal: 10px !default;
|
|
20
|
+
$nav-background-item-padding-vertical: 10px !default;
|
|
21
|
+
$nav-background-item-hover-background: $global-muted-background !default;
|
|
22
|
+
$nav-background-item-active-background: $global-muted-background !default;
|
|
19
23
|
|
|
20
24
|
|
|
21
|
-
//
|
|
25
|
+
// Sublists
|
|
22
26
|
// ========================================================================
|
|
23
27
|
|
|
24
|
-
// @mixin hook-nav-
|
|
28
|
+
// @mixin hook-nav-sub(){}
|
|
25
29
|
|
|
26
30
|
|
|
27
31
|
// Header
|
|
@@ -72,6 +76,28 @@ $nav-default-subtitle-font-size: 12px !default;
|
|
|
72
76
|
// @mixin hook-nav-primary-divider(){}
|
|
73
77
|
|
|
74
78
|
|
|
79
|
+
// Secondary style modifier
|
|
80
|
+
// ========================================================================
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
// @mixin hook-nav-secondary-subtitle(){}
|
|
91
|
+
|
|
92
|
+
// @mixin hook-nav-secondary-subtitle-hover(){}
|
|
93
|
+
|
|
94
|
+
// @mixin hook-nav-secondary-subtitle-active(){}
|
|
95
|
+
|
|
96
|
+
// @mixin hook-nav-secondary-header(){}
|
|
97
|
+
|
|
98
|
+
// @mixin hook-nav-secondary-divider(){}
|
|
99
|
+
|
|
100
|
+
|
|
75
101
|
// Style modifier
|
|
76
102
|
// ========================================================================
|
|
77
103
|
|
|
@@ -87,7 +113,8 @@ $nav-default-subtitle-font-size: 12px !default;
|
|
|
87
113
|
// Inverse
|
|
88
114
|
// ========================================================================
|
|
89
115
|
|
|
90
|
-
|
|
116
|
+
$inverse-nav-background-item-hover-background: $inverse-global-muted-background !default;
|
|
117
|
+
$inverse-nav-background-item-active-background: $inverse-global-muted-background !default;
|
|
91
118
|
|
|
92
119
|
// @mixin hook-inverse-nav-default-item(){}
|
|
93
120
|
// @mixin hook-inverse-nav-default-item-hover(){}
|
|
@@ -101,4 +128,13 @@ $nav-default-subtitle-font-size: 12px !default;
|
|
|
101
128
|
// @mixin hook-inverse-nav-primary-header(){}
|
|
102
129
|
// @mixin hook-inverse-nav-primary-divider(){}
|
|
103
130
|
|
|
131
|
+
// @mixin hook-inverse-nav-secondary-item(){}
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
// @mixin hook-inverse-nav-secondary-subtitle(){}
|
|
135
|
+
// @mixin hook-inverse-nav-secondary-subtitle-hover(){}
|
|
136
|
+
// @mixin hook-inverse-nav-secondary-subtitle-active(){}
|
|
137
|
+
// @mixin hook-inverse-nav-secondary-header(){}
|
|
138
|
+
// @mixin hook-inverse-nav-secondary-divider(){}
|
|
139
|
+
|
|
104
140
|
// @mixin hook-inverse-nav-dividers(){}
|
|
@@ -20,7 +20,6 @@ $navbar-item-padding-horizontal: 0 !default;
|
|
|
20
20
|
$navbar-dropdown-margin: 15px !default;
|
|
21
21
|
$navbar-dropdown-padding: 25px !default;
|
|
22
22
|
$navbar-dropdown-background: $global-background !default;
|
|
23
|
-
$navbar-dropdown-grid-gutter-horizontal: ($navbar-dropdown-padding * 2) !default;
|
|
24
23
|
|
|
25
24
|
$navbar-dropdown-nav-subtitle-font-size: 12px !default;
|
|
26
25
|
|
|
@@ -34,11 +33,6 @@ $navbar-dropdown-nav-font-size: $global-small-font-size !defaul
|
|
|
34
33
|
|
|
35
34
|
$navbar-dropdown-box-shadow: 0 5px 12px rgba(0,0,0,0.15) !default;
|
|
36
35
|
|
|
37
|
-
$navbar-dropbar-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.05) !default;
|
|
38
|
-
|
|
39
|
-
$navbar-dropdown-grid-divider-border-width: $global-border-width !default;
|
|
40
|
-
$navbar-dropdown-grid-divider-border: $navbar-dropdown-nav-divider-border !default;
|
|
41
|
-
|
|
42
36
|
|
|
43
37
|
// Component
|
|
44
38
|
// ========================================================================
|
|
@@ -64,12 +58,6 @@ $navbar-dropdown-grid-divider-border: $navbar-dropdown-nav-divider-bo
|
|
|
64
58
|
// @mixin hook-navbar-nav-item-active(){}
|
|
65
59
|
|
|
66
60
|
|
|
67
|
-
// Parent icon modifier
|
|
68
|
-
// ========================================================================
|
|
69
|
-
|
|
70
|
-
// @mixin hook-nav-parent-icon(){}
|
|
71
|
-
|
|
72
|
-
|
|
73
61
|
// Item
|
|
74
62
|
// ========================================================================
|
|
75
63
|
|
|
@@ -109,9 +97,11 @@ $navbar-dropdown-grid-divider-border: $navbar-dropdown-nav-divider-bo
|
|
|
109
97
|
|
|
110
98
|
|
|
111
99
|
|
|
100
|
+
// @mixin hook-navbar-dropdown-large(){}
|
|
112
101
|
|
|
113
102
|
|
|
114
103
|
|
|
104
|
+
// @mixin hook-navbar-dropdown-dropbar-large(){}
|
|
115
105
|
|
|
116
106
|
|
|
117
107
|
// Dropdown nav
|
|
@@ -133,13 +123,13 @@ $navbar-dropdown-grid-divider-border: $navbar-dropdown-nav-divider-bo
|
|
|
133
123
|
// Dropbar
|
|
134
124
|
// ========================================================================
|
|
135
125
|
|
|
136
|
-
|
|
126
|
+
// @mixin hook-navbar-dropbar(){}
|
|
137
127
|
|
|
138
128
|
|
|
139
129
|
// Miscellaneous
|
|
140
130
|
// ========================================================================
|
|
141
131
|
|
|
142
|
-
|
|
132
|
+
// @mixin hook-navbar-misc(){}
|
|
143
133
|
|
|
144
134
|
|
|
145
135
|
// Inverse
|
|
@@ -150,8 +140,6 @@ $navbar-dropdown-grid-divider-border: $navbar-dropdown-nav-divider-bo
|
|
|
150
140
|
// @mixin hook-inverse-navbar-nav-item-onclick(){}
|
|
151
141
|
// @mixin hook-inverse-navbar-nav-item-active(){}
|
|
152
142
|
|
|
153
|
-
// @mixin hook-inverse-nav-parent-icon(){}
|
|
154
|
-
|
|
155
143
|
// @mixin hook-inverse-navbar-item(){}
|
|
156
144
|
|
|
157
145
|
// @mixin hook-inverse-navbar-toggle(){}
|