@asante-org/leybold-design-system 2.5.7 → 2.5.9

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.
Files changed (4) hide show
  1. package/dist/index.esm.scss +76 -28
  2. package/dist/index.scss +76 -28
  3. package/dist/tsconfig.tsbuildinfo +1 -1
  4. package/package.json +1 -1
package/dist/index.esm.scss CHANGED
@@ -678,17 +678,45 @@
678
678
  --text-xxl-line-height: 1;
679
679
  }
680
680
 
681
- .lds-button {
681
+ .lds-button a {
682
+ display: inline-flex;
683
+ align-items: center;
684
+ justify-content: center;
685
+ gap: 0.5rem;
686
+ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
687
+ font-weight: 500;
688
+ line-height: 1.5;
689
+ text-align: center;
690
+ text-decoration: none;
691
+ vertical-align: middle;
692
+ cursor: pointer;
693
+ -webkit-user-select: none;
694
+ -moz-user-select: none;
695
+ user-select: none;
696
+ border: 2px solid transparent;
697
+ border-radius: 0;
698
+ transition: all 0.2s ease-in-out;
699
+ padding: 0.5rem 1rem;
700
+ text-transform: uppercase;
701
+ }
702
+ .lds-button a:focus-visible {
703
+ outline: 2px solid #000000;
704
+ outline-offset: 2px;
705
+ }
706
+ .lds-button a {
707
+ white-space: nowrap;
708
+ }
709
+ .lds-button a:after {
682
710
  transition: all 0.2s ease-in-out;
683
711
  }
684
712
  .lds-button a[target~=_blank]:after {
685
713
  content: "";
686
714
  display: inline-block;
687
- width: 0.75em;
688
- height: 0.75em;
715
+ width: 0.75rem;
716
+ height: 0.75rem;
689
717
  margin-left: 8px;
690
718
  vertical-align: middle;
691
- background-color: currentColor;
719
+ background: currentColor;
692
720
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M352 88C352 101.3 362.7 112 376 112L494.1 112L263.1 343C253.7 352.4 253.7 367.6 263.1 376.9C272.5 386.2 287.7 386.3 297 376.9L528 145.9L528 264C528 277.3 538.7 288 552 288C565.3 288 576 277.3 576 264L576 88C576 74.7 565.3 64 552 64L376 64C362.7 64 352 74.7 352 88zM144 160C99.8 160 64 195.8 64 240L64 496C64 540.2 99.8 576 144 576L400 576C444.2 576 480 540.2 480 496L480 408C480 394.7 469.3 384 456 384C442.7 384 432 394.7 432 408L432 496C432 513.7 417.7 528 400 528L144 528C126.3 528 112 513.7 112 496L112 240C112 222.3 126.3 208 144 208L232 208C245.3 208 256 197.3 256 184C256 170.7 245.3 160 232 160L144 160z'/%3E%3C/svg%3E");
693
721
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M352 88C352 101.3 362.7 112 376 112L494.1 112L263.1 343C253.7 352.4 253.7 367.6 263.1 376.9C272.5 386.2 287.7 386.3 297 376.9L528 145.9L528 264C528 277.3 538.7 288 552 288C565.3 288 576 277.3 576 264L576 88C576 74.7 565.3 64 552 64L376 64C362.7 64 352 74.7 352 88zM144 160C99.8 160 64 195.8 64 240L64 496C64 540.2 99.8 576 144 576L400 576C444.2 576 480 540.2 480 496L480 408C480 394.7 469.3 384 456 384C442.7 384 432 394.7 432 408L432 496C432 513.7 417.7 528 400 528L144 528C126.3 528 112 513.7 112 496L112 240C112 222.3 126.3 208 144 208L232 208C245.3 208 256 197.3 256 184C256 170.7 245.3 160 232 160L144 160z'/%3E%3C/svg%3E");
694
722
  -webkit-mask-size: contain;
@@ -700,39 +728,39 @@
700
728
  }
701
729
  .lds-button.button--fill a {
702
730
  color: #ffffff;
703
- background-color: #e2001a;
731
+ background: #e2001a;
704
732
  border-color: #e2001a;
705
733
  }
706
734
  .lds-button.button--fill a:hover {
707
- background-color: #4a4e54;
735
+ background: #4a4e54;
708
736
  border-color: #4a4e54;
709
737
  }
710
738
  .lds-button.button--outline a {
711
739
  color: #e2001a;
712
- background-color: transparent;
740
+ background: transparent;
713
741
  border: 1.5px solid #e2001a;
714
742
  }
715
743
  .lds-button.button--outline a:hover {
716
744
  color: #ffffff;
717
- background-color: #4a4e54;
745
+ background: #4a4e54;
718
746
  border-color: #4a4e54;
719
747
  }
720
- .lds-button.button--link a {
748
+ .lds-button.button--link-text a {
721
749
  color: #e2001a;
722
- background-color: transparent;
750
+ background: transparent;
723
751
  border: 2px solid transparent;
724
752
  padding: 0;
725
753
  text-transform: uppercase;
726
754
  font-weight: 500;
727
755
  }
728
- .lds-button.button--link a:after {
756
+ .lds-button.button--link-text a:after {
729
757
  content: "";
730
758
  display: inline-block;
731
- width: 0.75em;
732
- height: 0.75em;
759
+ width: 0.75rem;
760
+ height: 0.75rem;
733
761
  margin-left: 8px;
734
762
  vertical-align: middle;
735
- background-color: currentColor;
763
+ background: currentColor;
736
764
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M569 337C578.4 327.6 578.4 312.4 569 303.1L401 135C391.6 125.6 376.4 125.6 367.1 135C357.8 144.4 357.7 159.6 367.1 168.9L494.1 295.9L88 295.9C74.7 295.9 64 306.6 64 319.9C64 333.2 74.7 343.9 88 343.9L494.1 343.9L367.1 470.9C357.7 480.3 357.7 495.5 367.1 504.8C376.5 514.1 391.7 514.2 401 504.8L569 337z'/%3E%3C/svg%3E");
737
765
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M569 337C578.4 327.6 578.4 312.4 569 303.1L401 135C391.6 125.6 376.4 125.6 367.1 135C357.8 144.4 357.7 159.6 367.1 168.9L494.1 295.9L88 295.9C74.7 295.9 64 306.6 64 319.9C64 333.2 74.7 343.9 88 343.9L494.1 343.9L367.1 470.9C357.7 480.3 357.7 495.5 367.1 504.8C376.5 514.1 391.7 514.2 401 504.8L569 337z'/%3E%3C/svg%3E");
738
766
  -webkit-mask-size: contain;
@@ -742,64 +770,84 @@
742
770
  -webkit-mask-position: center;
743
771
  mask-position: center;
744
772
  }
745
- .lds-button.button--link:hover {
773
+ .lds-button.button--link-text a:hover {
774
+ color: #000000;
775
+ border-bottom: 2px solid #000000;
776
+ }
777
+ .lds-button.button--link-text a:hover:after {
778
+ transform: rotate(-45deg);
779
+ }
780
+ .lds-button.button--link-text a:focus-visible {
746
781
  color: #000000;
747
- border-bottom: 1.5px solid #000000;
782
+ }
783
+ .lds-button.button--link-text a:focus-visible:after {
784
+ transform: rotate(-45deg);
748
785
  }
749
786
  .lds-button.cmp-button__variant-cta-solid-white a {
750
787
  color: #000000;
751
- background-color: #ffffff;
752
- border-color: #000000;
788
+ background: #ffffff;
789
+ border-color: #ffffff;
753
790
  }
754
791
  .lds-button.cmp-button__variant-cta-solid-white a:hover {
755
792
  color: #ffffff;
756
- background-color: #000000;
793
+ background: #000000;
794
+ border-color: #000000;
757
795
  }
758
796
  .lds-button.cmp-button__variant-cta-solid-grey a {
759
797
  color: #000000;
760
- background-color: #dae0e3;
798
+ background: #dae0e3;
761
799
  border-color: #dae0e3;
762
800
  }
763
801
  .lds-button.cmp-button__variant-cta-solid-grey a:hover {
764
802
  color: #ffffff;
765
- background-color: #4a4e54;
803
+ background: #4a4e54;
804
+ border-color: #4a4e54;
766
805
  }
767
806
  .lds-button.cmp-button__variant-cta-solid-black a {
768
807
  color: #ffffff;
769
- background-color: #000000;
808
+ background: #000000;
770
809
  border-color: #000000;
771
810
  }
772
811
  .lds-button.cmp-button__variant-cta-solid-black a:hover {
773
- background-color: #e2001a;
812
+ background: #e2001a;
774
813
  border-color: #e2001a;
775
814
  }
776
815
  .lds-button.cmp-button__variant-cta-solid-dark-grey a {
777
816
  color: #ffffff;
778
- background-color: #383e42;
817
+ background: #383e42;
779
818
  border-color: #383e42;
780
819
  }
781
820
  .lds-button.cmp-button__variant-cta-solid-dark-grey a:hover {
782
- background-color: #e2001a;
821
+ background: #e2001a;
783
822
  border-color: #e2001a;
784
823
  }
785
824
  .lds-button.cmp-button__variant-cta-outlined-white a {
786
825
  color: #ffffff;
787
- background-color: transparent;
826
+ background: transparent;
788
827
  border: 1.5px solid #ffffff;
789
828
  }
790
829
  .lds-button.cmp-button__variant-cta-outlined-white a:hover {
791
830
  color: #000000;
792
- background-color: #ffffff;
831
+ background: #ffffff;
793
832
  }
794
833
  .lds-button.cmp-button__variant-cta-outlined-black a {
795
834
  color: #000000;
796
- background-color: transparent;
835
+ background: transparent;
797
836
  border: 1.5px solid #000000;
798
837
  }
799
838
  .lds-button.cmp-button__variant-cta-outlined-black a:hover {
800
839
  color: #e2001a;
801
840
  border-color: #e2001a;
802
841
  }
842
+
843
+ .button-container .aem-Grid .lds-button {
844
+ width: auto !important;
845
+ }
846
+
847
+ .button-container .lds-button .button-custom-wrapper .button-align-left:hover {
848
+ background: unset;
849
+ color: unset;
850
+ }
803
851
  .ds-acvt-leybold.imageContainer {
804
852
  position: relative;
805
853
  display: block;
package/dist/index.scss CHANGED
@@ -678,17 +678,45 @@
678
678
  --text-xxl-line-height: 1;
679
679
  }
680
680
 
681
- .lds-button {
681
+ .lds-button a {
682
+ display: inline-flex;
683
+ align-items: center;
684
+ justify-content: center;
685
+ gap: 0.5rem;
686
+ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
687
+ font-weight: 500;
688
+ line-height: 1.5;
689
+ text-align: center;
690
+ text-decoration: none;
691
+ vertical-align: middle;
692
+ cursor: pointer;
693
+ -webkit-user-select: none;
694
+ -moz-user-select: none;
695
+ user-select: none;
696
+ border: 2px solid transparent;
697
+ border-radius: 0;
698
+ transition: all 0.2s ease-in-out;
699
+ padding: 0.5rem 1rem;
700
+ text-transform: uppercase;
701
+ }
702
+ .lds-button a:focus-visible {
703
+ outline: 2px solid #000000;
704
+ outline-offset: 2px;
705
+ }
706
+ .lds-button a {
707
+ white-space: nowrap;
708
+ }
709
+ .lds-button a:after {
682
710
  transition: all 0.2s ease-in-out;
683
711
  }
684
712
  .lds-button a[target~=_blank]:after {
685
713
  content: "";
686
714
  display: inline-block;
687
- width: 0.75em;
688
- height: 0.75em;
715
+ width: 0.75rem;
716
+ height: 0.75rem;
689
717
  margin-left: 8px;
690
718
  vertical-align: middle;
691
- background-color: currentColor;
719
+ background: currentColor;
692
720
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M352 88C352 101.3 362.7 112 376 112L494.1 112L263.1 343C253.7 352.4 253.7 367.6 263.1 376.9C272.5 386.2 287.7 386.3 297 376.9L528 145.9L528 264C528 277.3 538.7 288 552 288C565.3 288 576 277.3 576 264L576 88C576 74.7 565.3 64 552 64L376 64C362.7 64 352 74.7 352 88zM144 160C99.8 160 64 195.8 64 240L64 496C64 540.2 99.8 576 144 576L400 576C444.2 576 480 540.2 480 496L480 408C480 394.7 469.3 384 456 384C442.7 384 432 394.7 432 408L432 496C432 513.7 417.7 528 400 528L144 528C126.3 528 112 513.7 112 496L112 240C112 222.3 126.3 208 144 208L232 208C245.3 208 256 197.3 256 184C256 170.7 245.3 160 232 160L144 160z'/%3E%3C/svg%3E");
693
721
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M352 88C352 101.3 362.7 112 376 112L494.1 112L263.1 343C253.7 352.4 253.7 367.6 263.1 376.9C272.5 386.2 287.7 386.3 297 376.9L528 145.9L528 264C528 277.3 538.7 288 552 288C565.3 288 576 277.3 576 264L576 88C576 74.7 565.3 64 552 64L376 64C362.7 64 352 74.7 352 88zM144 160C99.8 160 64 195.8 64 240L64 496C64 540.2 99.8 576 144 576L400 576C444.2 576 480 540.2 480 496L480 408C480 394.7 469.3 384 456 384C442.7 384 432 394.7 432 408L432 496C432 513.7 417.7 528 400 528L144 528C126.3 528 112 513.7 112 496L112 240C112 222.3 126.3 208 144 208L232 208C245.3 208 256 197.3 256 184C256 170.7 245.3 160 232 160L144 160z'/%3E%3C/svg%3E");
694
722
  -webkit-mask-size: contain;
@@ -700,39 +728,39 @@
700
728
  }
701
729
  .lds-button.button--fill a {
702
730
  color: #ffffff;
703
- background-color: #e2001a;
731
+ background: #e2001a;
704
732
  border-color: #e2001a;
705
733
  }
706
734
  .lds-button.button--fill a:hover {
707
- background-color: #4a4e54;
735
+ background: #4a4e54;
708
736
  border-color: #4a4e54;
709
737
  }
710
738
  .lds-button.button--outline a {
711
739
  color: #e2001a;
712
- background-color: transparent;
740
+ background: transparent;
713
741
  border: 1.5px solid #e2001a;
714
742
  }
715
743
  .lds-button.button--outline a:hover {
716
744
  color: #ffffff;
717
- background-color: #4a4e54;
745
+ background: #4a4e54;
718
746
  border-color: #4a4e54;
719
747
  }
720
- .lds-button.button--link a {
748
+ .lds-button.button--link-text a {
721
749
  color: #e2001a;
722
- background-color: transparent;
750
+ background: transparent;
723
751
  border: 2px solid transparent;
724
752
  padding: 0;
725
753
  text-transform: uppercase;
726
754
  font-weight: 500;
727
755
  }
728
- .lds-button.button--link a:after {
756
+ .lds-button.button--link-text a:after {
729
757
  content: "";
730
758
  display: inline-block;
731
- width: 0.75em;
732
- height: 0.75em;
759
+ width: 0.75rem;
760
+ height: 0.75rem;
733
761
  margin-left: 8px;
734
762
  vertical-align: middle;
735
- background-color: currentColor;
763
+ background: currentColor;
736
764
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M569 337C578.4 327.6 578.4 312.4 569 303.1L401 135C391.6 125.6 376.4 125.6 367.1 135C357.8 144.4 357.7 159.6 367.1 168.9L494.1 295.9L88 295.9C74.7 295.9 64 306.6 64 319.9C64 333.2 74.7 343.9 88 343.9L494.1 343.9L367.1 470.9C357.7 480.3 357.7 495.5 367.1 504.8C376.5 514.1 391.7 514.2 401 504.8L569 337z'/%3E%3C/svg%3E");
737
765
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M569 337C578.4 327.6 578.4 312.4 569 303.1L401 135C391.6 125.6 376.4 125.6 367.1 135C357.8 144.4 357.7 159.6 367.1 168.9L494.1 295.9L88 295.9C74.7 295.9 64 306.6 64 319.9C64 333.2 74.7 343.9 88 343.9L494.1 343.9L367.1 470.9C357.7 480.3 357.7 495.5 367.1 504.8C376.5 514.1 391.7 514.2 401 504.8L569 337z'/%3E%3C/svg%3E");
738
766
  -webkit-mask-size: contain;
@@ -742,64 +770,84 @@
742
770
  -webkit-mask-position: center;
743
771
  mask-position: center;
744
772
  }
745
- .lds-button.button--link:hover {
773
+ .lds-button.button--link-text a:hover {
774
+ color: #000000;
775
+ border-bottom: 2px solid #000000;
776
+ }
777
+ .lds-button.button--link-text a:hover:after {
778
+ transform: rotate(-45deg);
779
+ }
780
+ .lds-button.button--link-text a:focus-visible {
746
781
  color: #000000;
747
- border-bottom: 1.5px solid #000000;
782
+ }
783
+ .lds-button.button--link-text a:focus-visible:after {
784
+ transform: rotate(-45deg);
748
785
  }
749
786
  .lds-button.cmp-button__variant-cta-solid-white a {
750
787
  color: #000000;
751
- background-color: #ffffff;
752
- border-color: #000000;
788
+ background: #ffffff;
789
+ border-color: #ffffff;
753
790
  }
754
791
  .lds-button.cmp-button__variant-cta-solid-white a:hover {
755
792
  color: #ffffff;
756
- background-color: #000000;
793
+ background: #000000;
794
+ border-color: #000000;
757
795
  }
758
796
  .lds-button.cmp-button__variant-cta-solid-grey a {
759
797
  color: #000000;
760
- background-color: #dae0e3;
798
+ background: #dae0e3;
761
799
  border-color: #dae0e3;
762
800
  }
763
801
  .lds-button.cmp-button__variant-cta-solid-grey a:hover {
764
802
  color: #ffffff;
765
- background-color: #4a4e54;
803
+ background: #4a4e54;
804
+ border-color: #4a4e54;
766
805
  }
767
806
  .lds-button.cmp-button__variant-cta-solid-black a {
768
807
  color: #ffffff;
769
- background-color: #000000;
808
+ background: #000000;
770
809
  border-color: #000000;
771
810
  }
772
811
  .lds-button.cmp-button__variant-cta-solid-black a:hover {
773
- background-color: #e2001a;
812
+ background: #e2001a;
774
813
  border-color: #e2001a;
775
814
  }
776
815
  .lds-button.cmp-button__variant-cta-solid-dark-grey a {
777
816
  color: #ffffff;
778
- background-color: #383e42;
817
+ background: #383e42;
779
818
  border-color: #383e42;
780
819
  }
781
820
  .lds-button.cmp-button__variant-cta-solid-dark-grey a:hover {
782
- background-color: #e2001a;
821
+ background: #e2001a;
783
822
  border-color: #e2001a;
784
823
  }
785
824
  .lds-button.cmp-button__variant-cta-outlined-white a {
786
825
  color: #ffffff;
787
- background-color: transparent;
826
+ background: transparent;
788
827
  border: 1.5px solid #ffffff;
789
828
  }
790
829
  .lds-button.cmp-button__variant-cta-outlined-white a:hover {
791
830
  color: #000000;
792
- background-color: #ffffff;
831
+ background: #ffffff;
793
832
  }
794
833
  .lds-button.cmp-button__variant-cta-outlined-black a {
795
834
  color: #000000;
796
- background-color: transparent;
835
+ background: transparent;
797
836
  border: 1.5px solid #000000;
798
837
  }
799
838
  .lds-button.cmp-button__variant-cta-outlined-black a:hover {
800
839
  color: #e2001a;
801
840
  border-color: #e2001a;
802
841
  }
842
+
843
+ .button-container .aem-Grid .lds-button {
844
+ width: auto !important;
845
+ }
846
+
847
+ .button-container .lds-button .button-custom-wrapper .button-align-left:hover {
848
+ background: unset;
849
+ color: unset;
850
+ }
803
851
  .ds-acvt-leybold.imageContainer {
804
852
  position: relative;
805
853
  display: block;