five-for-the-future/themes/wporg-5ftf/css/components/_pledge-single.scss

105 lines
1.8 KiB
SCSS

body.single.single-5ftf_pledge {
// Expand archive content area to full-width of header.
.site-content .site-main {
padding: 0 10px;
max-width: $size__site-main;
}
.entry-header {
margin: ms(12) 0;
padding-bottom: ms(4);
border-bottom: 1px solid $color-gray-light-500;
@include breakpoint( $breakpoint-mobile ) {
display: flex;
align-items: center;
> div {
flex: auto;
}
.entry-image {
max-width: 330px;
}
}
@include breakpoint( 0, $breakpoint-mobile ) {
text-align: center;
.entry-image {
margin-top: ms(2);
}
}
}
.entry-title {
margin-bottom: 0;
}
.entry-image__logo {
background: transparent;
}
.pledge-company-description {
max-width: $size__content-width;
}
.team-grid {
margin-top: ms(2);
}
.entry-footer {
margin-top: ms(2);
border-top: 1px solid $color-gray-light-500;
padding-top: ms(2);
.report-wrapper {
margin-bottom: 1em;
}
@include breakpoint( $breakpoint-tablet ) {
display: grid;
grid-template-columns: 50% 50%;
#toggle-management-link-form,
#request-management-link {
float: right;
clear: both;
}
}
}
#request-management-link {
width: 300px;
border: 1px solid #ebeced; // setup var
box-shadow: rgba(25, 30, 35, 0.1) 0 3px 30px;
margin-top: 20px;
padding: 15px;
// todo add the upper ^ carot thing
// border-radius or something to draw triangle
// element inside the box, but then abs position outside it?
// z-index above parent so it's above box-shadow - probably happens by default?
p:first-child {
margin-top: 0;
}
input[type="email"] {
width: 100%;
margin: 0 0 20px 0;
}
input[type="submit"] {
float: right;
clear: both;
margin-bottom: 20px;
}
#form-messages {
clear: both;
}
}
}