@appartmint/mint 0.12.12 → 0.12.13

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/css/mint.css CHANGED
@@ -550,15 +550,15 @@ app-footer::before {
550
550
 
551
551
  :root {
552
552
  --mint-header-height: 4rem;
553
- --mint-header-bg: var(--mint-brand-2);
554
- --mint-header-fg: var(--mint-fore);
553
+ --mint-header-back: var(--mint-brand-2);
554
+ --mint-header-fore: var(--mint-fore);
555
555
  }
556
556
 
557
557
  #mint-header {
558
558
  position: relative;
559
559
  width: 100%;
560
- color: var(--mint-header-fg);
561
- background-color: var(--mint-header-bg);
560
+ color: var(--mint-header-fore);
561
+ background-color: var(--mint-header-back);
562
562
  z-index: 10000;
563
563
  height: var(--mint-header-height);
564
564
  }
@@ -591,7 +591,7 @@ app-footer::before {
591
591
  left: 0;
592
592
  width: 100%;
593
593
  height: var(--mint-header-height);
594
- background: var(--mint-header-bg);
594
+ background: var(--mint-header-back);
595
595
  z-index: -1;
596
596
  }
597
597
  #mint-header nav > ul {
@@ -611,15 +611,13 @@ app-footer::before {
611
611
  border: 0;
612
612
  color: var(--mint-fore);
613
613
  background: var(--mint-trans);
614
+ transition-property: color, background;
615
+ transition-duration: var(--mint-delay-default);
614
616
  }
615
617
  #mint-header a:hover,
616
618
  #mint-header button:hover {
617
619
  color: var(--mint-back);
618
620
  }
619
- #mint-header a:focus,
620
- #mint-header button:focus {
621
- color: var(--mint-back);
622
- }
623
621
  #mint-header h1 {
624
622
  display: flex;
625
623
  white-space: nowrap;
@@ -645,12 +643,14 @@ app-footer::before {
645
643
  padding: 0.6rem;
646
644
  width: 4.4rem;
647
645
  height: 4.4rem;
648
- margin-left: auto;
649
646
  border-radius: 1rem;
650
647
  background: var(--mint-shadow-6);
651
648
  box-shadow: 0 0 2rem -0.5rem var(--mint-glow-2);
652
649
  z-index: 1000;
653
650
  }
651
+ #mint-header [aria-controls=mint-wrapper]:hover .mint-menu-icon, #mint-header [aria-controls=mint-wrapper]:hover .mint-menu-icon::before, #mint-header [aria-controls=mint-wrapper]:hover .mint-menu-icon::after {
652
+ background-color: var(--mint-back);
653
+ }
654
654
  #mint-header [aria-controls=mint-wrapper] .mint-menu-icon {
655
655
  top: 50%;
656
656
  left: 50%;
@@ -691,7 +691,7 @@ app-footer::before {
691
691
  height: calc(100vh - var(--mint-header-height));
692
692
  height: calc(100dvh - var(--mint-header-height));
693
693
  z-index: -2;
694
- background: var(--mint-header-bg);
694
+ background: var(--mint-header-back);
695
695
  transition-duration: var(--mint-delay-default);
696
696
  transition-property: top, right, bottom, left;
697
697
  overflow: auto;
@@ -756,14 +756,18 @@ app-footer::before {
756
756
  #mint-header #mint-wrapper ul li:last-child ul {
757
757
  margin-bottom: 0;
758
758
  }
759
- #mint-header #mint-widgets {
760
- position: absolute;
761
- top: 0;
762
- right: 0;
763
- height: var(--mint-header-height);
759
+ #mint-header .mint-buttons {
760
+ flex-wrap: nowrap;
761
+ justify-content: flex-end;
762
+ width: 100%;
763
+ }
764
+ #mint-header .mint-buttons a:not([aria-controls=mint-wrapper]), #mint-header .mint-buttons button:not([aria-controls=mint-wrapper]) {
765
+ display: flex;
766
+ width: auto;
767
+ padding: 0.5rem;
764
768
  }
765
769
  #mint-header .mint-dropdown {
766
- background: var(--mint-header-bg);
770
+ background: var(--mint-header-back);
767
771
  }
768
772
  #mint-header .mint-dropdown button {
769
773
  display: flex;