195 lines
3.1 KiB
SCSS
195 lines
3.1 KiB
SCSS
#storybook {
|
|
.mock-content {
|
|
display: flex;
|
|
min-height: 250px;
|
|
height: 100%;
|
|
|
|
.mock-image,
|
|
.mock-copy {
|
|
min-height: 100%;
|
|
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
|
|
);
|
|
}
|
|
|
|
.mock-vague {
|
|
background: lighten($grey-blue, 15%);
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.mock-spacing {
|
|
padding: 2em;
|
|
}
|
|
|
|
.annotation {
|
|
padding: 1rem 0;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.palette {
|
|
.title {
|
|
font-size: 1.4rem;
|
|
font-weight: $weight-bold;
|
|
padding-bottom: 2px;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.description {
|
|
font-size: 0.8rem;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.item {
|
|
border: solid 1px $grey-blue;
|
|
display: inline-block;
|
|
margin: 0 5px 5px 0;
|
|
|
|
.color {
|
|
height: 90px;
|
|
width: 160px;
|
|
}
|
|
|
|
.info {
|
|
background-color: white;
|
|
border-top: solid 1px $grey-blue;
|
|
padding: 5px;
|
|
}
|
|
|
|
.hex {
|
|
font-size: 12px;
|
|
font-weight: $weight-bold;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.name {
|
|
color: $ui-gray-500;
|
|
font-size: 11px;
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.typeface {
|
|
.hero,
|
|
.sample {
|
|
font-family: inherit;
|
|
}
|
|
|
|
.hero {
|
|
font-size: 140px;
|
|
line-height: 1.05;
|
|
}
|
|
|
|
.sample {
|
|
font-size: 15px;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.multiples {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
&.with-spacing {
|
|
> * {
|
|
margin-right: 1em;
|
|
margin-bottom: 1em;
|
|
}
|
|
}
|
|
|
|
&.is-left-aligned {
|
|
justify-content: flex-start;
|
|
}
|
|
}
|
|
|
|
.chart-container {
|
|
width: 200px;
|
|
padding: 15px;
|
|
border: 1px solid $ui-gray-200;
|
|
display: inline-block;
|
|
|
|
&.is-small {
|
|
width: 150px;
|
|
}
|
|
|
|
&.is-large {
|
|
width: 250px;
|
|
}
|
|
|
|
&.is-xlarge {
|
|
width: 300px;
|
|
}
|
|
}
|
|
|
|
.tile-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.icon-tile {
|
|
width: 240px;
|
|
padding: 10px;
|
|
margin: 10px;
|
|
border: 1px solid $grey-lighter;
|
|
border-radius: $radius;
|
|
svg {
|
|
margin: auto;
|
|
width: 30px;
|
|
height: 30;
|
|
fill: $grey;
|
|
color: $grey;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mock-hover-region {
|
|
width: 200px;
|
|
height: 100px;
|
|
position: relative;
|
|
border-radius: $radius;
|
|
margin: 1em 0;
|
|
padding: 1em;
|
|
border: 1px solid $grey-blue;
|
|
background: $white-ter;
|
|
color: $grey;
|
|
font-weight: $weight-bold;
|
|
}
|
|
|
|
.title:not(:first-child) {
|
|
margin-top: 2em;
|
|
}
|
|
}
|