@appartmint/mint 2.10.12 → 2.10.15

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 (13) hide show
  1. package/dist/css/mint.css +180 -156
  2. package/dist/css/mint.css.map +1 -1
  3. package/dist/css/mint.min.css +1 -1
  4. package/dist/css/mint.min.css.map +1 -1
  5. package/package.json +1 -1
  6. package/src/scss/imports/components/section/_flex.scss +69 -0
  7. package/src/scss/imports/components/section/_full.scss +3 -3
  8. package/src/scss/imports/{global → components/section}/_grid.scss +1 -1
  9. package/src/scss/imports/components/section/_index.scss +2 -0
  10. package/src/scss/imports/global/_index.scss +0 -2
  11. package/src/scss/imports/global/_themes.scss +4 -0
  12. package/src/scss/imports/util/_util.scss +0 -30
  13. package/src/scss/imports/global/_flex.scss +0 -7
package/dist/css/mint.css CHANGED
@@ -627,6 +627,50 @@ body.mint-fixed #mint-header {
627
627
  color: rgb(229.5, 229.5, 229.5);
628
628
  }
629
629
 
630
+ .mint-flex {
631
+ display: flex;
632
+ flex-direction: row;
633
+ align-items: flex-start;
634
+ justify-content: flex-start;
635
+ gap: var(--mint-flex-gap);
636
+ }
637
+ .mint-flex-row-reverse {
638
+ flex-direction: row-reverse;
639
+ }
640
+ .mint-flex-column {
641
+ flex-direction: column;
642
+ }
643
+ .mint-flex-column-reverse {
644
+ flex-direction: column-reverse;
645
+ }
646
+ .mint-flex-wrap {
647
+ flex-wrap: wrap;
648
+ }
649
+ .mint-flex-wrap-reverse {
650
+ flex-wrap: wrap-reverse;
651
+ }
652
+ .mint-flex-center {
653
+ justify-content: center;
654
+ }
655
+ .mint-flex-end {
656
+ justify-content: flex-end;
657
+ }
658
+ .mint-flex-between {
659
+ justify-content: space-between;
660
+ }
661
+ .mint-flex-around {
662
+ justify-content: space-around;
663
+ }
664
+ .mint-flex-even {
665
+ justify-content: space-evenly;
666
+ }
667
+ .mint-flex-align-start {
668
+ align-items: flex-start;
669
+ }
670
+ .mint-flex-align-end {
671
+ align-items: flex-end;
672
+ }
673
+
630
674
  .mint-section-full {
631
675
  display: flex;
632
676
  flex-direction: column;
@@ -657,6 +701,140 @@ body.mint-fixed #mint-header {
657
701
  object-fit: cover;
658
702
  }
659
703
 
704
+ .mint-grid {
705
+ display: grid;
706
+ grid-template-columns: 1fr;
707
+ gap: 2rem;
708
+ width: 100%;
709
+ margin-top: 2rem;
710
+ margin-bottom: 2rem;
711
+ }
712
+ .mint-grid.mint-1 > * {
713
+ grid-column: span 1 !important;
714
+ }
715
+ @media (min-width: 768px) {
716
+ .mint-grid.mint-2 {
717
+ grid-template-columns: repeat(12, 1fr);
718
+ }
719
+ .mint-grid.mint-2 > * {
720
+ grid-column: span 6;
721
+ }
722
+ .mint-grid.mint-2 > :last-child:nth-child(odd) {
723
+ grid-column: span 12;
724
+ width: 50%;
725
+ margin-left: auto;
726
+ margin-right: auto;
727
+ }
728
+ }
729
+ @media (min-width: 768px) {
730
+ .mint-grid.mint-3 {
731
+ grid-template-columns: repeat(12, 1fr);
732
+ }
733
+ .mint-grid.mint-3 > * {
734
+ grid-column: span 6;
735
+ }
736
+ .mint-grid.mint-3 > :last-child:nth-child(odd) {
737
+ grid-column: span 12;
738
+ width: 50%;
739
+ margin-left: auto;
740
+ margin-right: auto;
741
+ }
742
+ }
743
+ @media (min-width: 1200px) {
744
+ .mint-grid.mint-3 {
745
+ grid-template-columns: repeat(12, 1fr);
746
+ }
747
+ .mint-grid.mint-3 > * {
748
+ grid-column: span 4;
749
+ }
750
+ .mint-grid.mint-3 > :last-child:nth-child(odd) {
751
+ grid-column: span 4;
752
+ width: 100%;
753
+ }
754
+ .mint-grid.mint-3 > :last-child:nth-child(3n+1) {
755
+ grid-column: 4/span 6;
756
+ }
757
+ .mint-grid.mint-3 > :last-child:nth-child(3n+2) {
758
+ grid-column: 7/span 6;
759
+ }
760
+ .mint-grid.mint-3 > :nth-last-child(2):nth-child(3n+1) {
761
+ grid-column: 1/span 6;
762
+ }
763
+ }
764
+ @media (min-width: 768px) {
765
+ .mint-grid.mint-4 {
766
+ grid-template-columns: repeat(12, 1fr);
767
+ }
768
+ .mint-grid.mint-4 > * {
769
+ grid-column: span 6;
770
+ }
771
+ .mint-grid.mint-4 > :last-child:nth-child(odd) {
772
+ grid-column: span 12;
773
+ width: 50%;
774
+ margin-left: auto;
775
+ margin-right: auto;
776
+ }
777
+ }
778
+ @media (min-width: 1200px) {
779
+ .mint-grid.mint-4 {
780
+ grid-template-columns: repeat(12, 1fr);
781
+ }
782
+ .mint-grid.mint-4 > * {
783
+ grid-column: span 4;
784
+ }
785
+ .mint-grid.mint-4 > :last-child:nth-child(odd) {
786
+ grid-column: span 4;
787
+ width: 100%;
788
+ }
789
+ .mint-grid.mint-4 > :last-child:nth-child(3n+1) {
790
+ grid-column: 4/span 6;
791
+ }
792
+ .mint-grid.mint-4 > :last-child:nth-child(3n+2) {
793
+ grid-column: 7/span 6;
794
+ }
795
+ .mint-grid.mint-4 > :nth-last-child(2):nth-child(3n+1) {
796
+ grid-column: 1/span 6;
797
+ }
798
+ }
799
+ @media (min-width: 1440px) {
800
+ .mint-grid.mint-4 {
801
+ grid-template-columns: repeat(12, 1fr);
802
+ }
803
+ .mint-grid.mint-4 > * {
804
+ grid-column: span 3;
805
+ }
806
+ .mint-grid.mint-4 > :last-child:nth-child(odd), .mint-grid.mint-4 > :last-child:nth-child(3n+1), .mint-grid.mint-4 > :last-child:nth-child(3n+2), .mint-grid.mint-4 > :nth-last-child(2):nth-child(3n+1) {
807
+ grid-column: span 3;
808
+ width: 100%;
809
+ }
810
+ .mint-grid.mint-4 > :last-child:nth-child(4n+1) {
811
+ grid-column: 4/span 6;
812
+ }
813
+ .mint-grid.mint-4 > :last-child:nth-child(4n+2) {
814
+ grid-column: 7/span 6;
815
+ }
816
+ .mint-grid.mint-4 > :nth-last-child(2):nth-child(4n+1) {
817
+ grid-column: 1/span 6;
818
+ }
819
+ .mint-grid.mint-4 > :last-child:nth-child(4n+3) {
820
+ grid-column: 9/span 4;
821
+ }
822
+ .mint-grid.mint-4 > :nth-last-child(2):nth-child(4n+2) {
823
+ grid-column: 5/span 4;
824
+ }
825
+ .mint-grid.mint-4 > :nth-last-child(3):nth-child(4n+1) {
826
+ grid-column: 1/span 4;
827
+ }
828
+ }
829
+ .mint-grid .mint-portrait, .mint-grid > :has(.mint-portrait) {
830
+ grid-row: span 2;
831
+ }
832
+ @media (min-width: 768px) {
833
+ .mint-grid .mint-landscape, .mint-grid > :has(.mint-landscape) {
834
+ grid-column: span 12;
835
+ }
836
+ }
837
+
660
838
  :root .mint-landing.swiper {
661
839
  max-width: 100vw;
662
840
  }
@@ -1831,28 +2009,6 @@ app-root {
1831
2009
  padding-top: 56.25% !important;
1832
2010
  }
1833
2011
 
1834
- .mint-flex {
1835
- display: flex;
1836
- align-items: center;
1837
- justify-content: flex-start;
1838
- flex-wrap: wrap;
1839
- }
1840
- .mint-flex.mint-center {
1841
- justify-content: center;
1842
- }
1843
- .mint-flex.mint-end {
1844
- justify-content: flex-end;
1845
- }
1846
- .mint-flex.mint-between {
1847
- justify-content: space-between;
1848
- }
1849
- .mint-flex.mint-around {
1850
- justify-content: space-around;
1851
- }
1852
- .mint-flex.mint-even {
1853
- justify-content: space-evenly;
1854
- }
1855
-
1856
2012
  *, *::before, *::after {
1857
2013
  box-sizing: border-box;
1858
2014
  }
@@ -1945,140 +2101,6 @@ iframe {
1945
2101
  padding: 0;
1946
2102
  }
1947
2103
 
1948
- .mint-grid {
1949
- display: grid;
1950
- grid-template-columns: 1fr;
1951
- gap: 2rem;
1952
- width: 100%;
1953
- margin-top: 2rem;
1954
- margin-bottom: 2rem;
1955
- }
1956
- .mint-grid.mint-1 > * {
1957
- grid-column: span 1 !important;
1958
- }
1959
- @media (min-width: 768px) {
1960
- .mint-grid.mint-2 {
1961
- grid-template-columns: repeat(12, 1fr);
1962
- }
1963
- .mint-grid.mint-2 > * {
1964
- grid-column: span 6;
1965
- }
1966
- .mint-grid.mint-2 > :last-child:nth-child(odd) {
1967
- grid-column: span 12;
1968
- width: 50%;
1969
- margin-left: auto;
1970
- margin-right: auto;
1971
- }
1972
- }
1973
- @media (min-width: 768px) {
1974
- .mint-grid.mint-3 {
1975
- grid-template-columns: repeat(12, 1fr);
1976
- }
1977
- .mint-grid.mint-3 > * {
1978
- grid-column: span 6;
1979
- }
1980
- .mint-grid.mint-3 > :last-child:nth-child(odd) {
1981
- grid-column: span 12;
1982
- width: 50%;
1983
- margin-left: auto;
1984
- margin-right: auto;
1985
- }
1986
- }
1987
- @media (min-width: 1200px) {
1988
- .mint-grid.mint-3 {
1989
- grid-template-columns: repeat(12, 1fr);
1990
- }
1991
- .mint-grid.mint-3 > * {
1992
- grid-column: span 4;
1993
- }
1994
- .mint-grid.mint-3 > :last-child:nth-child(odd) {
1995
- grid-column: span 4;
1996
- width: 100%;
1997
- }
1998
- .mint-grid.mint-3 > :last-child:nth-child(3n+1) {
1999
- grid-column: 4/span 6;
2000
- }
2001
- .mint-grid.mint-3 > :last-child:nth-child(3n+2) {
2002
- grid-column: 7/span 6;
2003
- }
2004
- .mint-grid.mint-3 > :nth-last-child(2):nth-child(3n+1) {
2005
- grid-column: 1/span 6;
2006
- }
2007
- }
2008
- @media (min-width: 768px) {
2009
- .mint-grid.mint-4 {
2010
- grid-template-columns: repeat(12, 1fr);
2011
- }
2012
- .mint-grid.mint-4 > * {
2013
- grid-column: span 6;
2014
- }
2015
- .mint-grid.mint-4 > :last-child:nth-child(odd) {
2016
- grid-column: span 12;
2017
- width: 50%;
2018
- margin-left: auto;
2019
- margin-right: auto;
2020
- }
2021
- }
2022
- @media (min-width: 1200px) {
2023
- .mint-grid.mint-4 {
2024
- grid-template-columns: repeat(12, 1fr);
2025
- }
2026
- .mint-grid.mint-4 > * {
2027
- grid-column: span 4;
2028
- }
2029
- .mint-grid.mint-4 > :last-child:nth-child(odd) {
2030
- grid-column: span 4;
2031
- width: 100%;
2032
- }
2033
- .mint-grid.mint-4 > :last-child:nth-child(3n+1) {
2034
- grid-column: 4/span 6;
2035
- }
2036
- .mint-grid.mint-4 > :last-child:nth-child(3n+2) {
2037
- grid-column: 7/span 6;
2038
- }
2039
- .mint-grid.mint-4 > :nth-last-child(2):nth-child(3n+1) {
2040
- grid-column: 1/span 6;
2041
- }
2042
- }
2043
- @media (min-width: 1440px) {
2044
- .mint-grid.mint-4 {
2045
- grid-template-columns: repeat(12, 1fr);
2046
- }
2047
- .mint-grid.mint-4 > * {
2048
- grid-column: span 3;
2049
- }
2050
- .mint-grid.mint-4 > :last-child:nth-child(odd), .mint-grid.mint-4 > :last-child:nth-child(3n+1), .mint-grid.mint-4 > :last-child:nth-child(3n+2), .mint-grid.mint-4 > :nth-last-child(2):nth-child(3n+1) {
2051
- grid-column: span 3;
2052
- width: 100%;
2053
- }
2054
- .mint-grid.mint-4 > :last-child:nth-child(4n+1) {
2055
- grid-column: 4/span 6;
2056
- }
2057
- .mint-grid.mint-4 > :last-child:nth-child(4n+2) {
2058
- grid-column: 7/span 6;
2059
- }
2060
- .mint-grid.mint-4 > :nth-last-child(2):nth-child(4n+1) {
2061
- grid-column: 1/span 6;
2062
- }
2063
- .mint-grid.mint-4 > :last-child:nth-child(4n+3) {
2064
- grid-column: 9/span 4;
2065
- }
2066
- .mint-grid.mint-4 > :nth-last-child(2):nth-child(4n+2) {
2067
- grid-column: 5/span 4;
2068
- }
2069
- .mint-grid.mint-4 > :nth-last-child(3):nth-child(4n+1) {
2070
- grid-column: 1/span 4;
2071
- }
2072
- }
2073
- .mint-grid .mint-portrait, .mint-grid > :has(.mint-portrait) {
2074
- grid-row: span 2;
2075
- }
2076
- @media (min-width: 768px) {
2077
- .mint-grid .mint-landscape, .mint-grid > :has(.mint-landscape) {
2078
- grid-column: span 12;
2079
- }
2080
- }
2081
-
2082
2104
  i.fa-envelope {
2083
2105
  transform: translateY(5%);
2084
2106
  }
@@ -3638,6 +3660,8 @@ p, .mint-p {
3638
3660
  --mint-info-4: rgb(168, 206.9565217391, 45.0434782609);
3639
3661
  --mint-info-5: rgb(134, 165.0724637681, 35.9275362319);
3640
3662
  --mint-info-6: rgb(100, 123.1884057971, 26.8115942029);
3663
+ --mint-spacing: 0.25rem;
3664
+ --mint-flex-gap: calc(var(--mint-spacing) * 2);
3641
3665
  --mint-tooltip-fore: var(--mint-fore);
3642
3666
  --mint-tooltip-back: var(--mint-black-2);
3643
3667
  --mint-tooltip-radius: 1rem;