@deriv-web-design/ui 0.1.1 → 0.1.3
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.css +92 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +23 -1
- package/dist/index.d.ts +23 -1
- package/dist/index.js +399 -351
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +398 -351
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.css
CHANGED
|
@@ -3938,6 +3938,98 @@
|
|
|
3938
3938
|
}
|
|
3939
3939
|
}
|
|
3940
3940
|
|
|
3941
|
+
/* templates/FeatureSplit/FeatureSplit.css */
|
|
3942
|
+
.feature-split {
|
|
3943
|
+
width: 100%;
|
|
3944
|
+
background-color: var(--color-slate-50);
|
|
3945
|
+
}
|
|
3946
|
+
.feature-split__container {
|
|
3947
|
+
display: flex;
|
|
3948
|
+
flex-direction: column;
|
|
3949
|
+
max-width: var(--content-width-1280);
|
|
3950
|
+
margin: 0 auto;
|
|
3951
|
+
padding: var(--spacing-56) var(--spacing-16);
|
|
3952
|
+
box-sizing: border-box;
|
|
3953
|
+
width: 100%;
|
|
3954
|
+
}
|
|
3955
|
+
@media (min-width: 992px) {
|
|
3956
|
+
.feature-split__container {
|
|
3957
|
+
padding: var(--spacing-112) var(--spacing-24);
|
|
3958
|
+
}
|
|
3959
|
+
}
|
|
3960
|
+
.feature-split__split {
|
|
3961
|
+
display: flex;
|
|
3962
|
+
flex-direction: column;
|
|
3963
|
+
align-items: stretch;
|
|
3964
|
+
gap: var(--spacing-24);
|
|
3965
|
+
width: 100%;
|
|
3966
|
+
}
|
|
3967
|
+
@media (min-width: 992px) {
|
|
3968
|
+
.feature-split__split {
|
|
3969
|
+
flex-direction: row;
|
|
3970
|
+
align-items: center;
|
|
3971
|
+
gap: 8rem;
|
|
3972
|
+
}
|
|
3973
|
+
.feature-split__split--image-left {
|
|
3974
|
+
flex-direction: row-reverse;
|
|
3975
|
+
}
|
|
3976
|
+
}
|
|
3977
|
+
.feature-split__content {
|
|
3978
|
+
display: flex;
|
|
3979
|
+
flex-direction: column;
|
|
3980
|
+
align-items: flex-start;
|
|
3981
|
+
gap: var(--spacing-16);
|
|
3982
|
+
width: 100%;
|
|
3983
|
+
}
|
|
3984
|
+
@media (min-width: 992px) {
|
|
3985
|
+
.feature-split__content {
|
|
3986
|
+
gap: 1.25rem;
|
|
3987
|
+
width: 540px;
|
|
3988
|
+
flex-shrink: 0;
|
|
3989
|
+
}
|
|
3990
|
+
}
|
|
3991
|
+
.feature-split__title {
|
|
3992
|
+
font-family: var(--typography-h2-font-family);
|
|
3993
|
+
font-size: var(--typography-h2-font-size);
|
|
3994
|
+
font-weight: var(--typography-h2-font-weight);
|
|
3995
|
+
line-height: var(--typography-h2-line-height);
|
|
3996
|
+
color: var(--text-primary);
|
|
3997
|
+
margin: 0;
|
|
3998
|
+
}
|
|
3999
|
+
.feature-split__description {
|
|
4000
|
+
font-family: var(--typography-body-md-font-family);
|
|
4001
|
+
font-size: var(--typography-body-md-font-size);
|
|
4002
|
+
font-weight: var(--typography-body-md-font-weight);
|
|
4003
|
+
line-height: var(--typography-body-md-line-height);
|
|
4004
|
+
color: var(--color-slate-1200);
|
|
4005
|
+
margin: 0;
|
|
4006
|
+
}
|
|
4007
|
+
.feature-split__image-wrapper {
|
|
4008
|
+
width: 100%;
|
|
4009
|
+
aspect-ratio: 1 / 1;
|
|
4010
|
+
border-radius: var(--radius-2xl);
|
|
4011
|
+
overflow: hidden;
|
|
4012
|
+
flex-shrink: 0;
|
|
4013
|
+
position: relative;
|
|
4014
|
+
background-color: transparent;
|
|
4015
|
+
}
|
|
4016
|
+
@media (min-width: 992px) {
|
|
4017
|
+
.feature-split__image-wrapper {
|
|
4018
|
+
flex: 1 0 0;
|
|
4019
|
+
width: auto;
|
|
4020
|
+
border-radius: 2rem;
|
|
4021
|
+
}
|
|
4022
|
+
}
|
|
4023
|
+
.feature-split__image {
|
|
4024
|
+
position: absolute;
|
|
4025
|
+
inset: 0;
|
|
4026
|
+
width: 100%;
|
|
4027
|
+
height: 100%;
|
|
4028
|
+
object-fit: cover;
|
|
4029
|
+
object-position: center;
|
|
4030
|
+
display: block;
|
|
4031
|
+
}
|
|
4032
|
+
|
|
3941
4033
|
/* templates/StickyStackedCards/StickyStackedCards.css */
|
|
3942
4034
|
:root {
|
|
3943
4035
|
--ssc-bg: var(--color-slate-50);
|