matrix-dimension/web/app/home/home.component.scss

188 lines
3.3 KiB
SCSS
Raw Normal View History

// component styles are encapsulated and only applied to their components
@import "../../style/themes/themes";
2018-10-21 01:04:25 -04:00
@include themifyComponent() {
.spacer {
width: 85%;
display: block;
border-color: themed(promoSpacerColor);
margin-top: 60px;
margin-bottom: 60px;
}
.shadowed {
2019-02-02 16:00:54 -05:00
box-shadow: 0 20px 40px 20px themed(promoShadowColor);
}
.info-box {
display: inline-block;
margin: auto;
background-color: themed(promoInfoBgColor);
padding: 50px;
border: 1px solid themed(promoInfoBorderColor);
h3 {
margin-bottom: 20px;
}
}
pre {
border: 1px solid themed(promoPreBorderColor);
padding: 5px;
width: 590px;
2018-10-21 01:04:25 -04:00
}
.footer {
color: themed(promoFooterFgColor);
text-align: center;
padding: 50px;
background: linear-gradient(to right, themed(promoGradientStartColor), themed(promoGradientEndColor));
a {
color: themed(promoFooterFgColor);
font-size: 0.9em;
margin-left: 20px;
}
}
.links {
position: absolute;
right: 20px;
top: 20px;
}
.links a {
2018-10-21 01:04:25 -04:00
font-size: 0.9em;
color: themed(promoLinksColor);
2018-10-21 01:04:25 -04:00
margin-left: 20px;
}
2018-10-21 01:04:25 -04:00
.hero {
color: themed(promoHeroFgColor);
text-align: center;
background: linear-gradient(to right, themed(promoGradientStartColor), themed(promoGradientEndColor));
2018-10-21 01:04:25 -04:00
}
.wrapper {
min-width: 700px;
max-width: 1500px;
padding: 20px;
margin: 70px auto auto;
display: flex;
flex-wrap: wrap;
2018-10-21 01:04:25 -04:00
}
.made-for-matrix {
height: 45px;
2018-10-21 01:04:25 -04:00
}
.made-for-matrix-anchor {
margin-left: 20px;
2018-10-21 01:04:25 -04:00
}
.promo {
.hero {
padding-top: 50px;
padding-bottom: 100px;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 3vw));
}
2018-10-21 01:04:25 -04:00
.logo {
padding: 20px 20px 40px;
2018-10-21 01:04:25 -04:00
}
.banner {
font-size: 1.2em;
margin-top: 30px;
margin-bottom: 20px;
}
2018-10-21 01:04:25 -04:00
.try-dimension {
width: 695px;
2018-10-21 01:04:25 -04:00
}
.screenshot {
display: inline-block;
width: 597px;
margin: 20px 70px 0;
border: 1px solid themed(promoInfoBorderColor);
img {
width: 595px;
}
2018-10-21 01:04:25 -04:00
}
.subhero-wrapper {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.integrations {
display: block;
width: 100%;
.title {
display: block;
text-align: center;
margin-bottom: 40px;
}
2018-10-21 01:04:25 -04:00
.intro {
font-size: 1.3em;
color: themed(promoIntroColor);
text-align: center;
}
.integration-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
.integration {
width: 350px;
background-color: themed(promoIntegrationBgColor);
padding: 20px;
margin: 15px;
border: 1px solid themed(promoIntegrationBorderColor);
img {
margin-right: 25px;
width: 48px;
vertical-align: middle;
}
span {
font-size: 1.2em;
}
2018-10-21 01:04:25 -04:00
}
}
}
}
2018-03-24 21:58:01 -04:00
.non-promo {
.hero {
padding-top: 20px;
}
2018-10-21 01:04:25 -04:00
.logo {
padding: 20px 20px 40px;
height: 150px;
}
2018-10-21 01:04:25 -04:00
.welcome {
min-width: 700px;
max-width: 800px;
}
2018-10-21 01:04:25 -04:00
h4 {
margin-top: 45px;
margin-bottom: 20px;
}
2018-10-21 01:04:25 -04:00
.footer {
margin-top: 100px;
}
2018-10-21 01:04:25 -04:00
}
}