@asantemedia-org/leybold-design-system 1.0.13 → 1.0.14

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/index.scss CHANGED
@@ -633,269 +633,6 @@
633
633
  .Button-module__button__icon--right___-pGHl {
634
634
  order: 1;
635
635
  }
636
- @import "slick-carousel/slick/slick.css";
637
- @import "slick-carousel/slick/slick-theme.css";
638
- :root {
639
- --leybold-red: #e2001a;
640
- --leybold-black: #000000;
641
- --leybold-white: #ffffff;
642
- --leybold-blue-grey: #546672;
643
- --leybold-white-aluminium: #dae0e3;
644
- --leybold-window-gray: #99a1ab;
645
- --leybold-light-grey: #c5c7c4;
646
- --leybold-slate-gray: #4a4e54;
647
- --leybold-anthracite-gray: #383e42;
648
- --leybold-orange: #d18e56;
649
- --leybold-yellow: #edd163;
650
- --leybold-green: #6ea67b;
651
- --leybold-purple: #732d5d;
652
- --leybold-purple-gray: #945e67;
653
- --leybold-blue: #2b4679;
654
- --leybold-light-blue: #3f6a98;
655
- --leybold-blue-green: #39788e;
656
- --leybold-green-gray: #6d8f9f;
657
- --color-primary: #e2001a;
658
- --color-secondary: #546672;
659
- --color-success: #6ea67b;
660
- --color-danger: #e2001a;
661
- --color-warning: #d18e56;
662
- --color-info: #3f6a98;
663
- --text-primary: #000000;
664
- --text-secondary: #4a4e54;
665
- --text-muted: #99a1ab;
666
- --text-inverse: #ffffff;
667
- --bg-primary: #ffffff;
668
- --bg-secondary: #dae0e3;
669
- --bg-dark: #383e42;
670
- --border-color: #c5c7c4;
671
- --border-color-dark: #4a4e54;
672
- --font-family-base: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
673
- --h1-mobile-size: 32px;
674
- --h1-mobile-line-height: 1.2;
675
- --h2-mobile-size: 24px;
676
- --h2-mobile-line-height: 1.2;
677
- --h3-mobile-size: 18px;
678
- --h3-mobile-line-height: 1.6;
679
- --h4-mobile-size: 16px;
680
- --h4-mobile-line-height: 1.55;
681
- --h5-mobile-size: 14px;
682
- --h5-mobile-line-height: 1.5;
683
- --body-mobile-size: 14px;
684
- --body-mobile-line-height: 1.5;
685
- --h1-desktop-size: 55px;
686
- --h1-desktop-line-height: 1.15;
687
- --h1-desktop-letter-spacing: -0.02em;
688
- --h2-desktop-size: 40px;
689
- --h2-desktop-line-height: 1.2;
690
- --h2-desktop-letter-spacing: -0.01em;
691
- --h3-desktop-size: 32px;
692
- --h3-desktop-line-height: 1.2;
693
- --h4-desktop-size: 24px;
694
- --h4-desktop-line-height: 1.2;
695
- --h5-desktop-size: 18px;
696
- --h5-desktop-line-height: 1.6;
697
- --body-desktop-size: 18px;
698
- --body-desktop-line-height: 1.6;
699
- --text-lg-size: 27px;
700
- --text-lg-line-height: 1.4;
701
- --text-xl-size: 36px;
702
- --text-xl-line-height: 1.4;
703
- --text-xxl-size: 64px;
704
- --text-xxl-line-height: 1;
705
- }
706
-
707
- .Carousel-module__carousel___hkXkF {
708
- width: 100%;
709
- background-color: #ffffff;
710
- padding: 48px 24px;
711
- }
712
- @media (min-width: 768px) {
713
- .Carousel-module__carousel___hkXkF {
714
- padding: 86px 178px 56px;
715
- }
716
- }
717
-
718
- .Carousel-module__carousel__header___IMcN5 {
719
- display: flex;
720
- flex-direction: column;
721
- gap: 16px;
722
- margin-bottom: 24px;
723
- }
724
- @media (min-width: 768px) {
725
- .Carousel-module__carousel__header___IMcN5 {
726
- flex-direction: row;
727
- justify-content: space-between;
728
- align-items: flex-start;
729
- margin-bottom: 42px;
730
- }
731
- }
732
-
733
- .Carousel-module__carousel__headerContent___9uU-H {
734
- display: flex;
735
- flex-direction: column;
736
- gap: 16px;
737
- max-width: 714px;
738
- }
739
-
740
- .Carousel-module__carousel__title___CCgcY {
741
- font-family: var(--font-family-base);
742
- font-weight: 700;
743
- font-size: var(--h3-desktop-size);
744
- line-height: 1.2;
745
- color: #4a4e54;
746
- margin: 0;
747
- }
748
-
749
- .Carousel-module__carousel__subtitle___aj4q1 {
750
- font-family: var(--font-family-base);
751
- font-weight: 400;
752
- font-size: var(--body-desktop-size);
753
- line-height: 1.6;
754
- color: #4a4e54;
755
- margin: 0;
756
- }
757
-
758
- .Carousel-module__carousel__slider___b27-P {
759
- margin-bottom: 42px;
760
- }
761
- .Carousel-module__carousel__slider___b27-P .slick-list {
762
- margin: 0 -10px;
763
- }
764
- .Carousel-module__carousel__slider___b27-P .slick-track {
765
- display: flex;
766
- }
767
- .Carousel-module__carousel__slider___b27-P .slick-slide {
768
- padding: 8px 10px;
769
- flex-shrink: 0;
770
- }
771
- .Carousel-module__carousel__slider___b27-P .slick-slide > div {
772
- height: 100%;
773
- }
774
- .Carousel-module__carousel__slider___b27-P .slick-slide.slick-cloned a, .Carousel-module__carousel__slider___b27-P .slick-slide.slick-cloned button {
775
- visibility: hidden;
776
- }
777
-
778
- .Carousel-module__carousel__slideWrapper___PjXgD {
779
- height: 100%;
780
- }
781
-
782
- .Carousel-module__carousel__card___lga-D {
783
- display: block;
784
- position: relative;
785
- text-decoration: none;
786
- height: 341px;
787
- overflow: visible;
788
- }
789
- @media (min-width: 768px) {
790
- .Carousel-module__carousel__card___lga-D {
791
- height: 297px;
792
- }
793
- }
794
- .Carousel-module__carousel__card___lga-D:focus-visible {
795
- outline: 2px solid #000000;
796
- outline-offset: 2px;
797
- }
798
- .Carousel-module__carousel__card___lga-D:hover .Carousel-module__carousel__cardContent___v0jc- {
799
- box-shadow: 3px 6px 12px -3px rgba(0, 0, 0, 0.4);
800
- }
801
- .Carousel-module__carousel__card___lga-D:hover .Carousel-module__carousel__cardLink___PpTAC {
802
- text-decoration: underline;
803
- }
804
-
805
- .Carousel-module__carousel__cardImageWrapper___aFqXD {
806
- position: relative;
807
- width: 100%;
808
- height: 245px;
809
- overflow: hidden;
810
- }
811
- @media (min-width: 768px) {
812
- .Carousel-module__carousel__cardImageWrapper___aFqXD {
813
- height: 216px;
814
- }
815
- }
816
-
817
- .Carousel-module__carousel__cardImage___4MrRU {
818
- width: 100%;
819
- height: 100%;
820
- -o-object-fit: cover;
821
- object-fit: cover;
822
- -o-object-position: center;
823
- object-position: center;
824
- }
825
-
826
- .Carousel-module__carousel__cardContent___v0jc- {
827
- position: absolute;
828
- left: 20px;
829
- bottom: 0;
830
- width: calc(100% - 40px);
831
- max-width: 300px;
832
- background-color: #ffffff;
833
- padding: 24px;
834
- box-shadow: 3px 6px 8px -5px rgba(0, 0, 0, 0.3);
835
- transition: box-shadow 0.2s ease-in-out;
836
- }
837
- @media (min-width: 768px) {
838
- .Carousel-module__carousel__cardContent___v0jc- {
839
- padding-left: 20px;
840
- border-left: 4px solid #4a4e54;
841
- max-width: 382px;
842
- }
843
- }
844
-
845
- .Carousel-module__carousel__cardTitle___z-mMo {
846
- font-family: var(--font-family-base);
847
- font-weight: 700;
848
- font-size: var(--h5-desktop-size);
849
- line-height: 1.6;
850
- color: #4a4e54;
851
- margin: 0 0 8px;
852
- }
853
-
854
- .Carousel-module__carousel__navigation___dMbcP {
855
- display: flex;
856
- justify-content: flex-end;
857
- align-items: center;
858
- }
859
- @media (min-width: 768px) {
860
- .Carousel-module__carousel__navigation___dMbcP {
861
- justify-content: space-between;
862
- }
863
- }
864
-
865
- .Carousel-module__carousel__arrows___uj5nF {
866
- display: flex;
867
- align-items: center;
868
- gap: 20px;
869
- }
870
-
871
- .Carousel-module__carousel__dotsList___upZ7L {
872
- display: flex;
873
- align-items: center;
874
- gap: 6px;
875
- }
876
-
877
- .Carousel-module__carousel__dot___HwZc0 {
878
- width: 10px;
879
- height: 10px;
880
- padding: 0;
881
- background-color: #dae0e3;
882
- border: none;
883
- cursor: pointer;
884
- transition: background-color 0.2s ease-in-out;
885
- }
886
- .Carousel-module__carousel__dot___HwZc0:hover {
887
- background-color: rgb(188.9692307692, 199.6769230769, 205.0307692308);
888
- }
889
- .Carousel-module__carousel__dot___HwZc0:focus-visible {
890
- outline: 2px solid #000000;
891
- outline-offset: 2px;
892
- }
893
- .Carousel-module__carousel__dot--active___NxRvq {
894
- background-color: #e2001a;
895
- }
896
- .Carousel-module__carousel__dot--active___NxRvq:hover {
897
- background-color: #e2001a;
898
- }
899
636
  :root {
900
637
  --leybold-red: #e2001a;
901
638
  --leybold-black: #000000;
@@ -1,7 +1,5 @@
1
1
  export { Button } from "./components/Button";
2
2
  export type { ButtonProps } from "./components/Button";
3
- export { Carousel } from "./experience/Carousel";
4
- export type { CarouselProps, CarouselCardData } from "./experience/Carousel";
5
3
  export { Footer, FooterLink, FooterLinkGroup, FooterSocialIcons, FooterSocialIcon, FooterBottom, } from "./experience/Footer";
6
4
  export type { FooterProps, FooterLinkItem, SocialLinkItem, FooterLogoProps, FooterLinkProps, FooterLinkGroupProps, FooterSocialIconsProps, FooterSocialIconProps, FooterBottomProps, } from "./experience/Footer";
7
5
  export { Pagination, PaginationItem, PaginationButton, PaginationEllipsis, } from "./components/Pagination";