MyCrypto/common/containers/OnboardModal/components/OnboardSlide.scss

87 lines
1.2 KiB
SCSS
Raw Normal View History

@import 'common/sass/variables';
@import 'common/sass/mixins';
.OnboardSlide {
font-size: 1.15rem;
&-header {
text-align: center;
margin-bottom: $space * 2;
font-size: 1.65rem;
font-weight: bold;
}
&-subheader {
text-align: center;
margin-top: -$space * 1.5;
margin-bottom: $space * 2;
color: color(gray);
}
&-body {
display: flex;
}
&-content {
flex: 1;
> *:first-child,
> div > *:first-child {
margin-top: 0;
}
ul {
padding-left: 30px;
}
}
&-image {
display: flex;
flex-flow: column;
justify-content: center;
width: 250px;
&.is-left {
padding-right: $space * 1.5;
}
&.is-right {
padding-left: $space * 1.5;
}
&-img {
width: 100%;
}
}
@media screen and (max-width: $screen-sm) {
width: 100%;
&-body {
flex-direction: column;
}
&-content {
order: 2;
}
&-image {
order: 1;
align-self: center;
width: auto;
height: 180px;
margin-bottom: $space * 2;
&.is-left,
&.is-right {
padding: 0;
}
&-img {
width: auto;
height: 100%;
}
}
}
}