vanilla-framework 3.14.0 → 3.15.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/package.json +8 -8
- package/scss/_patterns_navigation.scss +236 -17
- package/scss/_settings_colors.scss +2 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "vanilla-framework",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.15.0",
|
|
4
4
|
"author": {
|
|
5
5
|
"email": "webteam@canonical.com",
|
|
6
6
|
"name": "Canonical Webteam"
|
|
@@ -59,22 +59,22 @@
|
|
|
59
59
|
"@canonical/latest-news": "1.4.1",
|
|
60
60
|
"@percy/script": "1.1.0",
|
|
61
61
|
"@testing-library/cypress": "9.0.0",
|
|
62
|
-
"autoprefixer": "10.4.
|
|
63
|
-
"cypress": "12.
|
|
62
|
+
"autoprefixer": "10.4.14",
|
|
63
|
+
"cypress": "12.13.0",
|
|
64
64
|
"get-site-urls": "3.0.0",
|
|
65
65
|
"markdown-spellcheck": "1.3.1",
|
|
66
66
|
"parker": "0.0.10",
|
|
67
|
-
"postcss": "8.4.
|
|
68
|
-
"postcss-cli": "
|
|
67
|
+
"postcss": "8.4.24",
|
|
68
|
+
"postcss-cli": "10.1.0",
|
|
69
69
|
"postcss-scss": "4.0.6",
|
|
70
|
-
"prettier": "2.8.
|
|
71
|
-
"sass": "1.
|
|
70
|
+
"prettier": "2.8.8",
|
|
71
|
+
"sass": "1.62.1",
|
|
72
72
|
"stylelint": "14.16.1",
|
|
73
73
|
"stylelint-config-prettier": "9.0.5",
|
|
74
74
|
"stylelint-config-recommended-scss": "5.0.2",
|
|
75
75
|
"stylelint-order": "5.0.0",
|
|
76
76
|
"stylelint-prettier": "2.0.0",
|
|
77
77
|
"svgo": "2.8.0",
|
|
78
|
-
"yaml": "2.
|
|
78
|
+
"yaml": "2.3.1"
|
|
79
79
|
}
|
|
80
80
|
}
|
|
@@ -117,7 +117,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
|
|
|
117
117
|
}
|
|
118
118
|
}
|
|
119
119
|
|
|
120
|
-
.p-navigation
|
|
120
|
+
.p-navigation,
|
|
121
|
+
.p-navigation--sliding {
|
|
121
122
|
display: flex;
|
|
122
123
|
flex-direction: column;
|
|
123
124
|
flex-shrink: 0;
|
|
@@ -244,7 +245,10 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
|
|
|
244
245
|
.p-navigation__tagged-logo {
|
|
245
246
|
display: flex; // to prevent logo link from expanding full width
|
|
246
247
|
margin-right: 0;
|
|
247
|
-
|
|
248
|
+
|
|
249
|
+
@media (min-width: $breakpoint-navigation-threshold) {
|
|
250
|
+
min-width: 13rem;
|
|
251
|
+
}
|
|
248
252
|
|
|
249
253
|
.p-navigation__logo-tag {
|
|
250
254
|
background-color: $color-accent;
|
|
@@ -498,7 +502,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
|
|
|
498
502
|
}
|
|
499
503
|
|
|
500
504
|
// when navigation search is expanded
|
|
501
|
-
.p-navigation.has-search-open
|
|
505
|
+
.p-navigation.has-search-open,
|
|
506
|
+
.p-navigation--sliding.has-search-open {
|
|
502
507
|
// make sure search in navigation renders on top of the overlay
|
|
503
508
|
.p-navigation__nav {
|
|
504
509
|
display: flex;
|
|
@@ -606,8 +611,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
|
|
|
606
611
|
}
|
|
607
612
|
}
|
|
608
613
|
|
|
609
|
-
.p-navigation__dropdown,
|
|
610
|
-
.p-navigation__dropdown--right {
|
|
614
|
+
> .p-navigation__dropdown,
|
|
615
|
+
> .p-navigation__dropdown--right {
|
|
611
616
|
display: block;
|
|
612
617
|
}
|
|
613
618
|
}
|
|
@@ -651,21 +656,216 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
|
|
|
651
656
|
}
|
|
652
657
|
}
|
|
653
658
|
|
|
659
|
+
@keyframes vf-nav-fade-in {
|
|
660
|
+
from {
|
|
661
|
+
opacity: 0;
|
|
662
|
+
}
|
|
663
|
+
to {
|
|
664
|
+
opacity: 0.5;
|
|
665
|
+
}
|
|
666
|
+
}
|
|
667
|
+
|
|
668
|
+
$sliding-nav-animation-settings: map-get($animation-duration, brisk) ease;
|
|
669
|
+
|
|
670
|
+
.p-navigation--sliding.has-menu-open {
|
|
671
|
+
height: 100vh;
|
|
672
|
+
overflow-y: hidden;
|
|
673
|
+
|
|
674
|
+
@media (min-width: $breakpoint-navigation-threshold) {
|
|
675
|
+
height: auto;
|
|
676
|
+
overflow-y: visible;
|
|
677
|
+
}
|
|
678
|
+
|
|
679
|
+
.p-navigation__banner .p-navigation__items {
|
|
680
|
+
display: flex;
|
|
681
|
+
flex-wrap: nowrap;
|
|
682
|
+
|
|
683
|
+
@media (min-width: $breakpoint-navigation-threshold) {
|
|
684
|
+
display: none;
|
|
685
|
+
}
|
|
686
|
+
}
|
|
687
|
+
.p-navigation__nav {
|
|
688
|
+
display: block;
|
|
689
|
+
height: 100vh;
|
|
690
|
+
overflow-x: hidden;
|
|
691
|
+
|
|
692
|
+
.p-navigation__items {
|
|
693
|
+
display: block;
|
|
694
|
+
}
|
|
695
|
+
|
|
696
|
+
@media (min-width: $breakpoint-navigation-threshold) {
|
|
697
|
+
display: flex;
|
|
698
|
+
height: auto;
|
|
699
|
+
overflow-x: visible;
|
|
700
|
+
|
|
701
|
+
.p-navigation__items {
|
|
702
|
+
display: flex;
|
|
703
|
+
}
|
|
704
|
+
}
|
|
705
|
+
}
|
|
706
|
+
|
|
707
|
+
.p-navigation__items:not(:first-child)::before {
|
|
708
|
+
content: none;
|
|
709
|
+
}
|
|
710
|
+
}
|
|
711
|
+
|
|
712
|
+
/* stylelint-disable max-nesting-depth */
|
|
713
|
+
.p-navigation--sliding .p-navigation__items {
|
|
714
|
+
transition: transform $sliding-nav-animation-settings;
|
|
715
|
+
|
|
716
|
+
&.is-active {
|
|
717
|
+
transform: translateX(-25vw);
|
|
718
|
+
@media (min-width: $breakpoint-navigation-threshold) {
|
|
719
|
+
transform: none;
|
|
720
|
+
}
|
|
721
|
+
.p-navigation__dropdown {
|
|
722
|
+
transform: translateX(25vw);
|
|
723
|
+
@media (min-width: $breakpoint-navigation-threshold) {
|
|
724
|
+
transform: none;
|
|
725
|
+
}
|
|
726
|
+
&[aria-hidden='false'],
|
|
727
|
+
&:not([aria-hidden]) {
|
|
728
|
+
transform: translateX(-75vw);
|
|
729
|
+
@media (min-width: $breakpoint-navigation-threshold) {
|
|
730
|
+
transform: none;
|
|
731
|
+
}
|
|
732
|
+
&.is-active {
|
|
733
|
+
transform: translateX(-100vw);
|
|
734
|
+
@media (min-width: $breakpoint-navigation-threshold) {
|
|
735
|
+
transform: none;
|
|
736
|
+
}
|
|
737
|
+
}
|
|
738
|
+
}
|
|
739
|
+
}
|
|
740
|
+
}
|
|
741
|
+
}
|
|
742
|
+
/* stylelint-enable max-nesting-depth */
|
|
743
|
+
|
|
744
|
+
.p-navigation--sliding .p-navigation__item--dropdown-toggle {
|
|
745
|
+
position: initial;
|
|
746
|
+
|
|
747
|
+
&::after {
|
|
748
|
+
content: none;
|
|
749
|
+
}
|
|
750
|
+
|
|
751
|
+
.p-navigation__link::after {
|
|
752
|
+
background-position: center;
|
|
753
|
+
background-repeat: no-repeat;
|
|
754
|
+
background-size: contain;
|
|
755
|
+
content: '';
|
|
756
|
+
display: block;
|
|
757
|
+
height: $spv--large;
|
|
758
|
+
pointer-events: none;
|
|
759
|
+
position: absolute;
|
|
760
|
+
right: map-get($grid-margin-widths, small);
|
|
761
|
+
text-indent: calc(100% + 10rem);
|
|
762
|
+
top: 1rem;
|
|
763
|
+
transform: rotate(-90deg);
|
|
764
|
+
width: map-get($icon-sizes, default);
|
|
765
|
+
@include vf-icon-chevron($colors--dark-theme--text-default);
|
|
766
|
+
|
|
767
|
+
@media (min-width: $breakpoint-navigation-threshold) {
|
|
768
|
+
right: 0.5rem;
|
|
769
|
+
top: 1.2rem;
|
|
770
|
+
transform: none;
|
|
771
|
+
}
|
|
772
|
+
}
|
|
773
|
+
|
|
774
|
+
&.is-active > .p-navigation__link::after {
|
|
775
|
+
@media (min-width: $breakpoint-navigation-threshold) {
|
|
776
|
+
transform: rotate(180deg);
|
|
777
|
+
}
|
|
778
|
+
}
|
|
779
|
+
}
|
|
780
|
+
|
|
781
|
+
.p-navigation--sliding .p-navigation__item--dropdown-close {
|
|
782
|
+
.p-navigation__link::after {
|
|
783
|
+
left: 1rem;
|
|
784
|
+
transform: rotate(90deg);
|
|
785
|
+
}
|
|
786
|
+
@media (min-width: $breakpoint-navigation-threshold) {
|
|
787
|
+
display: none;
|
|
788
|
+
}
|
|
789
|
+
}
|
|
790
|
+
|
|
791
|
+
/* stylelint-disable max-nesting-depth */
|
|
792
|
+
|
|
793
|
+
.p-navigation--sliding .p-navigation__dropdown {
|
|
794
|
+
display: block;
|
|
795
|
+
height: 100vh;
|
|
796
|
+
left: 100vw;
|
|
797
|
+
position: absolute;
|
|
798
|
+
top: 0;
|
|
799
|
+
transition: transform $sliding-nav-animation-settings;
|
|
800
|
+
|
|
801
|
+
@media (min-width: $breakpoint-navigation-threshold) {
|
|
802
|
+
display: none;
|
|
803
|
+
height: auto;
|
|
804
|
+
left: auto;
|
|
805
|
+
min-width: unset;
|
|
806
|
+
top: unset;
|
|
807
|
+
}
|
|
808
|
+
|
|
809
|
+
&::before {
|
|
810
|
+
box-shadow: -100vw 15px 0 15px black;
|
|
811
|
+
content: '';
|
|
812
|
+
height: 100%;
|
|
813
|
+
opacity: 0;
|
|
814
|
+
position: absolute;
|
|
815
|
+
transition: opacity $sliding-nav-animation-settings;
|
|
816
|
+
width: 100%;
|
|
817
|
+
|
|
818
|
+
@media (min-width: $breakpoint-navigation-threshold) {
|
|
819
|
+
content: none;
|
|
820
|
+
}
|
|
821
|
+
}
|
|
822
|
+
|
|
823
|
+
&[aria-hidden='false'],
|
|
824
|
+
&:not([aria-hidden]) {
|
|
825
|
+
&::before {
|
|
826
|
+
opacity: 0.75;
|
|
827
|
+
}
|
|
828
|
+
|
|
829
|
+
display: block;
|
|
830
|
+
transform: translateX(-75vw);
|
|
831
|
+
|
|
832
|
+
@media (min-width: $breakpoint-navigation-threshold) {
|
|
833
|
+
transform: none;
|
|
834
|
+
|
|
835
|
+
.p-navigation__item--dropdown-close {
|
|
836
|
+
@media (min-width: $breakpoint-navigation-threshold) {
|
|
837
|
+
display: none;
|
|
838
|
+
}
|
|
839
|
+
}
|
|
840
|
+
}
|
|
841
|
+
|
|
842
|
+
&.is-active {
|
|
843
|
+
transform: translateX(-100vw);
|
|
844
|
+
}
|
|
845
|
+
}
|
|
846
|
+
}
|
|
847
|
+
|
|
848
|
+
/* stylelint-enable max-nesting-depth */
|
|
849
|
+
|
|
654
850
|
// Theming
|
|
655
851
|
@if ($theme-default-nav == 'dark') {
|
|
656
|
-
.p-navigation
|
|
852
|
+
.p-navigation,
|
|
853
|
+
.p-navigation--sliding {
|
|
657
854
|
@include vf-navigation-dark-theme;
|
|
658
855
|
}
|
|
659
856
|
|
|
660
|
-
.p-navigation.is-light
|
|
857
|
+
.p-navigation.is-light,
|
|
858
|
+
.p-navigation--sliding.is-light {
|
|
661
859
|
@include vf-navigation-light-theme;
|
|
662
860
|
}
|
|
663
861
|
} @else {
|
|
664
|
-
.p-navigation
|
|
862
|
+
.p-navigation,
|
|
863
|
+
.p-navigation--sliding {
|
|
665
864
|
@include vf-navigation-light-theme;
|
|
666
865
|
}
|
|
667
866
|
|
|
668
|
-
.p-navigation.is-dark
|
|
867
|
+
.p-navigation.is-dark,
|
|
868
|
+
.p-navigation--sliding.is-dark {
|
|
669
869
|
@include vf-navigation-dark-theme;
|
|
670
870
|
}
|
|
671
871
|
}
|
|
@@ -682,7 +882,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
|
|
|
682
882
|
$color-navigation-background--hover,
|
|
683
883
|
// color for the navigation highlight bar
|
|
684
884
|
$color-navigation-highlight,
|
|
685
|
-
$color-navigation-icon
|
|
885
|
+
$color-navigation-icon,
|
|
886
|
+
$overlay-target-opacity
|
|
686
887
|
) {
|
|
687
888
|
background-color: $color-navigation-background;
|
|
688
889
|
|
|
@@ -716,12 +917,25 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
|
|
|
716
917
|
&::after {
|
|
717
918
|
@include vf-icon-chevron($color-navigation-icon);
|
|
718
919
|
}
|
|
920
|
+
& > .p-navigation__link {
|
|
921
|
+
&::after {
|
|
922
|
+
@include vf-icon-chevron($color-navigation-icon);
|
|
923
|
+
}
|
|
924
|
+
}
|
|
719
925
|
|
|
720
926
|
&.is-active > .p-navigation__link {
|
|
721
927
|
background-color: $color-navigation-background--active;
|
|
722
928
|
}
|
|
723
929
|
}
|
|
724
930
|
|
|
931
|
+
.p-navigation__item--dropdown-close {
|
|
932
|
+
& > .p-navigation__link {
|
|
933
|
+
&::after {
|
|
934
|
+
@include vf-icon-chevron($color-navigation-icon);
|
|
935
|
+
}
|
|
936
|
+
}
|
|
937
|
+
}
|
|
938
|
+
|
|
725
939
|
.p-navigation__toggle--search::after,
|
|
726
940
|
.p-navigation__item .p-navigation__link--search-toggle::after {
|
|
727
941
|
@include vf-icon-search($color-navigation-icon);
|
|
@@ -751,12 +965,15 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
|
|
|
751
965
|
|
|
752
966
|
// on mobile expanded nav needs to match pressed color of the buttons
|
|
753
967
|
&.has-menu-open .p-navigation__nav,
|
|
968
|
+
&.p-navigation:target .p-navigation__nav,
|
|
969
|
+
&.p-navigation:target .p-navigation__dropdown,
|
|
754
970
|
&.has-search-open .p-navigation__nav {
|
|
755
|
-
background-color: $color-navigation-background
|
|
971
|
+
background-color: $color-navigation-background;
|
|
972
|
+
}
|
|
756
973
|
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
974
|
+
.p-navigation__dropdown[aria-hidden='false']::before,
|
|
975
|
+
.p-navigation__dropdown:not([aria-hidden])::before {
|
|
976
|
+
opacity: $overlay-target-opacity;
|
|
760
977
|
}
|
|
761
978
|
}
|
|
762
979
|
|
|
@@ -768,7 +985,8 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
|
|
|
768
985
|
$color-navigation-background--active: $colors--light-theme--background-active,
|
|
769
986
|
$color-navigation-highlight: $colors--light-theme--text-default,
|
|
770
987
|
$color-navigation-separator: $colors--light-theme--border-low-contrast,
|
|
771
|
-
$color-navigation-icon: $colors--light-theme--text-default
|
|
988
|
+
$color-navigation-icon: $colors--light-theme--text-default,
|
|
989
|
+
$overlay-target-opacity: 0.33
|
|
772
990
|
);
|
|
773
991
|
}
|
|
774
992
|
|
|
@@ -777,9 +995,10 @@ $spv-navigation-logo-bottom-position: 0.125rem; // 2px when 1rem is 16px
|
|
|
777
995
|
$color-navigation-text: $colors--dark-theme--text-default,
|
|
778
996
|
$color-navigation-background: $colors--dark-theme--background-default,
|
|
779
997
|
$color-navigation-background--hover: $colors--dark-theme--background-hover,
|
|
780
|
-
$color-navigation-background--active: $colors--dark-theme--background-
|
|
998
|
+
$color-navigation-background--active: $colors--dark-theme--background-alt,
|
|
781
999
|
$color-navigation-highlight: $colors--dark-theme--text-default,
|
|
782
1000
|
$color-navigation-separator: $colors--dark-theme--border-low-contrast,
|
|
783
|
-
$color-navigation-icon: $colors--dark-theme--text-default
|
|
1001
|
+
$color-navigation-icon: $colors--dark-theme--text-default,
|
|
1002
|
+
$overlay-target-opacity: 0.75
|
|
784
1003
|
);
|
|
785
1004
|
}
|
|
@@ -18,6 +18,8 @@ $color-caution: #f99b11 !default;
|
|
|
18
18
|
$color-positive: #0e8420 !default;
|
|
19
19
|
$color-information: #24598f !default;
|
|
20
20
|
|
|
21
|
+
$color-paper: #f3f3f3 !default;
|
|
22
|
+
|
|
21
23
|
// for dark themes
|
|
22
24
|
$color-negative-dark: #a11223 !default;
|
|
23
25
|
$color-positive-dark: #008013 !default;
|