@asante-org/leybold-design-system 2.5.8 → 2.5.10

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 +41 -27
  2. package/dist/index.scss +41 -27
  3. package/dist/tsconfig.tsbuildinfo +1 -1
  4. package/package.json +1 -1
package/dist/index.esm.scss CHANGED
@@ -706,14 +706,17 @@
706
706
  .lds-button a {
707
707
  white-space: nowrap;
708
708
  }
709
+ .lds-button a:after {
710
+ transition: all 0.2s ease-in-out;
711
+ }
709
712
  .lds-button a[target~=_blank]:after {
710
713
  content: "";
711
714
  display: inline-block;
712
- width: 0.75em;
713
- height: 0.75em;
715
+ width: 0.75rem;
716
+ height: 0.75rem;
714
717
  margin-left: 8px;
715
718
  vertical-align: middle;
716
- background-color: currentColor;
719
+ background: currentColor;
717
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");
718
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");
719
722
  -webkit-mask-size: contain;
@@ -725,39 +728,39 @@
725
728
  }
726
729
  .lds-button.button--fill a {
727
730
  color: #ffffff;
728
- background-color: #e2001a;
731
+ background: #e2001a;
729
732
  border-color: #e2001a;
730
733
  }
731
734
  .lds-button.button--fill a:hover {
732
- background-color: #4a4e54;
735
+ background: #4a4e54;
733
736
  border-color: #4a4e54;
734
737
  }
735
738
  .lds-button.button--outline a {
736
739
  color: #e2001a;
737
- background-color: transparent;
740
+ background: transparent;
738
741
  border: 1.5px solid #e2001a;
739
742
  }
740
743
  .lds-button.button--outline a:hover {
741
744
  color: #ffffff;
742
- background-color: #4a4e54;
745
+ background: #4a4e54;
743
746
  border-color: #4a4e54;
744
747
  }
745
- .lds-button.button--link a {
748
+ .lds-button.button--link-text a {
746
749
  color: #e2001a;
747
- background-color: transparent;
750
+ background: transparent;
748
751
  border: 2px solid transparent;
749
752
  padding: 0;
750
753
  text-transform: uppercase;
751
754
  font-weight: 500;
752
755
  }
753
- .lds-button.button--link a:after {
756
+ .lds-button.button--link-text a:after {
754
757
  content: "";
755
758
  display: inline-block;
756
- width: 0.75em;
757
- height: 0.75em;
759
+ width: 0.75rem;
760
+ height: 0.75rem;
758
761
  margin-left: 8px;
759
762
  vertical-align: middle;
760
- background-color: currentColor;
763
+ background: currentColor;
761
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");
762
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");
763
766
  -webkit-mask-size: contain;
@@ -767,58 +770,69 @@
767
770
  -webkit-mask-position: center;
768
771
  mask-position: center;
769
772
  }
770
- .lds-button.button--link:hover {
773
+ .lds-button.button--link-text a:hover {
771
774
  color: #000000;
772
- border-bottom: 1.5px solid #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 {
781
+ color: #000000;
782
+ }
783
+ .lds-button.button--link-text a:focus-visible:after {
784
+ transform: rotate(-45deg);
773
785
  }
774
786
  .lds-button.cmp-button__variant-cta-solid-white a {
775
787
  color: #000000;
776
- background-color: #ffffff;
777
- border-color: #000000;
788
+ background: #ffffff;
789
+ border-color: #ffffff;
778
790
  }
779
791
  .lds-button.cmp-button__variant-cta-solid-white a:hover {
780
792
  color: #ffffff;
781
- background-color: #000000;
793
+ background: #000000;
794
+ border-color: #000000;
782
795
  }
783
796
  .lds-button.cmp-button__variant-cta-solid-grey a {
784
797
  color: #000000;
785
- background-color: #dae0e3;
798
+ background: #dae0e3;
786
799
  border-color: #dae0e3;
787
800
  }
788
801
  .lds-button.cmp-button__variant-cta-solid-grey a:hover {
789
802
  color: #ffffff;
790
- background-color: #4a4e54;
803
+ background: #4a4e54;
804
+ border-color: #4a4e54;
791
805
  }
792
806
  .lds-button.cmp-button__variant-cta-solid-black a {
793
807
  color: #ffffff;
794
- background-color: #000000;
808
+ background: #000000;
795
809
  border-color: #000000;
796
810
  }
797
811
  .lds-button.cmp-button__variant-cta-solid-black a:hover {
798
- background-color: #e2001a;
812
+ background: #e2001a;
799
813
  border-color: #e2001a;
800
814
  }
801
815
  .lds-button.cmp-button__variant-cta-solid-dark-grey a {
802
816
  color: #ffffff;
803
- background-color: #383e42;
817
+ background: #383e42;
804
818
  border-color: #383e42;
805
819
  }
806
820
  .lds-button.cmp-button__variant-cta-solid-dark-grey a:hover {
807
- background-color: #e2001a;
821
+ background: #e2001a;
808
822
  border-color: #e2001a;
809
823
  }
810
824
  .lds-button.cmp-button__variant-cta-outlined-white a {
811
825
  color: #ffffff;
812
- background-color: transparent;
826
+ background: transparent;
813
827
  border: 1.5px solid #ffffff;
814
828
  }
815
829
  .lds-button.cmp-button__variant-cta-outlined-white a:hover {
816
830
  color: #000000;
817
- background-color: #ffffff;
831
+ background: #ffffff;
818
832
  }
819
833
  .lds-button.cmp-button__variant-cta-outlined-black a {
820
834
  color: #000000;
821
- background-color: transparent;
835
+ background: transparent;
822
836
  border: 1.5px solid #000000;
823
837
  }
824
838
  .lds-button.cmp-button__variant-cta-outlined-black a:hover {
package/dist/index.scss CHANGED
@@ -706,14 +706,17 @@
706
706
  .lds-button a {
707
707
  white-space: nowrap;
708
708
  }
709
+ .lds-button a:after {
710
+ transition: all 0.2s ease-in-out;
711
+ }
709
712
  .lds-button a[target~=_blank]:after {
710
713
  content: "";
711
714
  display: inline-block;
712
- width: 0.75em;
713
- height: 0.75em;
715
+ width: 0.75rem;
716
+ height: 0.75rem;
714
717
  margin-left: 8px;
715
718
  vertical-align: middle;
716
- background-color: currentColor;
719
+ background: currentColor;
717
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");
718
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");
719
722
  -webkit-mask-size: contain;
@@ -725,39 +728,39 @@
725
728
  }
726
729
  .lds-button.button--fill a {
727
730
  color: #ffffff;
728
- background-color: #e2001a;
731
+ background: #e2001a;
729
732
  border-color: #e2001a;
730
733
  }
731
734
  .lds-button.button--fill a:hover {
732
- background-color: #4a4e54;
735
+ background: #4a4e54;
733
736
  border-color: #4a4e54;
734
737
  }
735
738
  .lds-button.button--outline a {
736
739
  color: #e2001a;
737
- background-color: transparent;
740
+ background: transparent;
738
741
  border: 1.5px solid #e2001a;
739
742
  }
740
743
  .lds-button.button--outline a:hover {
741
744
  color: #ffffff;
742
- background-color: #4a4e54;
745
+ background: #4a4e54;
743
746
  border-color: #4a4e54;
744
747
  }
745
- .lds-button.button--link a {
748
+ .lds-button.button--link-text a {
746
749
  color: #e2001a;
747
- background-color: transparent;
750
+ background: transparent;
748
751
  border: 2px solid transparent;
749
752
  padding: 0;
750
753
  text-transform: uppercase;
751
754
  font-weight: 500;
752
755
  }
753
- .lds-button.button--link a:after {
756
+ .lds-button.button--link-text a:after {
754
757
  content: "";
755
758
  display: inline-block;
756
- width: 0.75em;
757
- height: 0.75em;
759
+ width: 0.75rem;
760
+ height: 0.75rem;
758
761
  margin-left: 8px;
759
762
  vertical-align: middle;
760
- background-color: currentColor;
763
+ background: currentColor;
761
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");
762
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");
763
766
  -webkit-mask-size: contain;
@@ -767,58 +770,69 @@
767
770
  -webkit-mask-position: center;
768
771
  mask-position: center;
769
772
  }
770
- .lds-button.button--link:hover {
773
+ .lds-button.button--link-text a:hover {
771
774
  color: #000000;
772
- border-bottom: 1.5px solid #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 {
781
+ color: #000000;
782
+ }
783
+ .lds-button.button--link-text a:focus-visible:after {
784
+ transform: rotate(-45deg);
773
785
  }
774
786
  .lds-button.cmp-button__variant-cta-solid-white a {
775
787
  color: #000000;
776
- background-color: #ffffff;
777
- border-color: #000000;
788
+ background: #ffffff;
789
+ border-color: #ffffff;
778
790
  }
779
791
  .lds-button.cmp-button__variant-cta-solid-white a:hover {
780
792
  color: #ffffff;
781
- background-color: #000000;
793
+ background: #000000;
794
+ border-color: #000000;
782
795
  }
783
796
  .lds-button.cmp-button__variant-cta-solid-grey a {
784
797
  color: #000000;
785
- background-color: #dae0e3;
798
+ background: #dae0e3;
786
799
  border-color: #dae0e3;
787
800
  }
788
801
  .lds-button.cmp-button__variant-cta-solid-grey a:hover {
789
802
  color: #ffffff;
790
- background-color: #4a4e54;
803
+ background: #4a4e54;
804
+ border-color: #4a4e54;
791
805
  }
792
806
  .lds-button.cmp-button__variant-cta-solid-black a {
793
807
  color: #ffffff;
794
- background-color: #000000;
808
+ background: #000000;
795
809
  border-color: #000000;
796
810
  }
797
811
  .lds-button.cmp-button__variant-cta-solid-black a:hover {
798
- background-color: #e2001a;
812
+ background: #e2001a;
799
813
  border-color: #e2001a;
800
814
  }
801
815
  .lds-button.cmp-button__variant-cta-solid-dark-grey a {
802
816
  color: #ffffff;
803
- background-color: #383e42;
817
+ background: #383e42;
804
818
  border-color: #383e42;
805
819
  }
806
820
  .lds-button.cmp-button__variant-cta-solid-dark-grey a:hover {
807
- background-color: #e2001a;
821
+ background: #e2001a;
808
822
  border-color: #e2001a;
809
823
  }
810
824
  .lds-button.cmp-button__variant-cta-outlined-white a {
811
825
  color: #ffffff;
812
- background-color: transparent;
826
+ background: transparent;
813
827
  border: 1.5px solid #ffffff;
814
828
  }
815
829
  .lds-button.cmp-button__variant-cta-outlined-white a:hover {
816
830
  color: #000000;
817
- background-color: #ffffff;
831
+ background: #ffffff;
818
832
  }
819
833
  .lds-button.cmp-button__variant-cta-outlined-black a {
820
834
  color: #000000;
821
- background-color: transparent;
835
+ background: transparent;
822
836
  border: 1.5px solid #000000;
823
837
  }
824
838
  .lds-button.cmp-button__variant-cta-outlined-black a:hover {