2018-01-17 00:03:50 +00:00
|
|
|
#styleguide {
|
|
|
|
.mock-content {
|
|
|
|
display: flex;
|
2018-06-30 06:36:40 +00:00
|
|
|
min-height: 250px;
|
|
|
|
height: 100%;
|
2018-01-17 00:03:50 +00:00
|
|
|
|
|
|
|
.mock-image,
|
|
|
|
.mock-copy {
|
2018-06-30 18:31:17 +00:00
|
|
|
min-height: 100%;
|
2018-01-17 00:03:50 +00:00
|
|
|
width: 100%;
|
|
|
|
margin: 1em;
|
|
|
|
}
|
|
|
|
|
|
|
|
.mock-image {
|
|
|
|
background: linear-gradient(
|
|
|
|
to top right,
|
|
|
|
transparent 0%,
|
|
|
|
transparent 49%,
|
|
|
|
$grey-blue 49%,
|
|
|
|
$grey-blue 51%,
|
|
|
|
transparent 51%,
|
|
|
|
transparent 100%
|
|
|
|
),
|
|
|
|
linear-gradient(
|
|
|
|
to bottom right,
|
|
|
|
transparent 0%,
|
|
|
|
transparent 49%,
|
|
|
|
$grey-blue 49%,
|
|
|
|
$grey-blue 51%,
|
|
|
|
transparent 51%,
|
|
|
|
transparent 100%
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
.mock-copy {
|
|
|
|
background: repeating-linear-gradient(
|
|
|
|
to bottom,
|
|
|
|
$grey-blue,
|
|
|
|
$grey-blue 5px,
|
|
|
|
transparent 5px,
|
|
|
|
transparent 14px
|
|
|
|
);
|
|
|
|
}
|
2018-06-30 06:36:40 +00:00
|
|
|
|
|
|
|
.mock-vague {
|
|
|
|
background: lighten($grey-blue, 15%);
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
}
|
2018-01-17 00:03:50 +00:00
|
|
|
}
|
2018-07-03 00:19:39 +00:00
|
|
|
|
|
|
|
.mock-spacing {
|
|
|
|
padding: 2em;
|
|
|
|
}
|
2018-01-17 00:03:50 +00:00
|
|
|
}
|