houdini/app/assets/stylesheets/components/browsers_illustration.css.scss
2020-06-15 10:26:57 -05:00

50 lines
1.1 KiB
SCSS

/* License: AGPL-3.0-or-later WITH WTO-AP-3.0-or-later
Full license explanation at https://github.com/houdiniproject/houdini/blob/master/LICENSE */
.browsersIllustration {
padding: 20px 0;
display: table;
width: 100%;
}
.browsersIllustration section {
width: 50%;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.browsersIllustration section.clutteredBrowsers {
position: relative;
padding: 0 40px 0 0;
}
.browsersIllustration section.clutteredBrowsers:after {
position: absolute;
content: 'OR';
font-size: 18px;
font-weight: bold;
color: white;
background: $oj;
line-height: 44px;
width: 44px;
@include border-radius(50%);
top: 50%;
margin-top: -22px;
right: -22px;
}
.browsersIllustration section.ccBrowser { padding: 0px 0 0px 40px; }
@media screen and (max-width: 500px) {
.browsersIllustration section.clutteredBrowsers:after {
position: relative;
display: block;
margin: 15px auto;
right: auto;
}
.browsersIllustration section.ccBrowser,
.browsersIllustration section.clutteredBrowsers {
display: block;
width: 100%;
padding: 0;
}
}