src/app/articles/article-detail/article-detail.component.scss
.article {
margin: 24px 268px 96px 44px; // margin-rigthは目次領域 margin-left=12 width=240px margin-left=12px 分
box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
&__metadata {
display: flex;
-webkit-align-items: center;
align-items: center;
background: #e4e4e4;
border-bottom: #d2d2d2 solid 1px;
padding: 6px 48px;
}
&__header {
background: #ffffff;
padding: 42px;
padding-bottom: 12px;
}
&__author-icon {
width: 24px;
margin-right: 4px;
border-radius: 2px;
background: white;
box-shadow: grey 0 0 2px 0px;
cursor: pointer;
&:hover {
opacity: 0.6;
}
&:focus {
outline: 0
}
}
&__author {
padding-right: 24px;
font-size: 0.9em;
white-space: nowrap;
font-weight: bold;
color: #3f51b5;
cursor: pointer;
&:hover {
color: #606DB0
}
&:focus {
outline: 0
}
}
&__updated {
padding-right: 24px;
font-size: 0.8em;
white-space: nowrap;
}
&__operation {
display: flex;
width: 100%;
.spacer {
flex: 1 1 auto;
}
button{
border: #dadada 1px solid;
height: 28px;
line-height: 24px;
}
}
&__main {
display: flex;
&__content {
display: flex;
padding: 48px;
background: white;
color: #222;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
min-width: 100%;
.markdown-body {
width: 100%;
}
.plain-text-body {
width: 100%;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: -moz-pre-wrap;
white-space: -hp-pre-wrap;
word-wrap: break-word;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 16px;
line-height: 1.5;
color: #24292e;
}
}
&__toc {
width: 240px;
min-width: 240px;
margin: 0 12px 24px 12px;
}
}
}
.header {
display: flex;
&__title-wrapper {
}
&__title {
color: #3949ab;
margin: 0;
font-size: 42px;
font-weight: 400;
line-height: 50px;
}
&__spacer {
flex: 1 1 auto;
}
&__info-summary {
}
}
.info-summary {
color: gray;
&__factor-wrapper {
display: flex;
}
&__factor {
width: 100px;
text-align: center;
$parent: &;
&_first {
@extend #{$parent};
border-right: 1px solid #989898;
}
}
&__factor-icon {
}
&__factor-count {
font-size: 24px;
}
&__factor-label {
font-size: 12px;
margin-top: -4px;
}
&__vote-button-wrapper {
padding: 12px 0;
button {
width: 100%;
}
}
&__voter-icons {
display: flex;
width: 200px;
flex-wrap: wrap;
}
&__voter-icon-wrapper {
}
&__voter-icon {
width: 24px;
height: 24px;
box-shadow: grey 0 0 1px 0px;
margin-right: 4px;
background: white;
border-radius: 2px;
image-rendering: -webkit-optimize-contrast;
cursor: pointer;
&:hover {
opacity: 0.6;
}
&:focus {
outline: 0;
}
}
}
.comments {
margin: 0 44px 192px 44px;
box-sizing: border-box;
box-shadow: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
padding: 48px;
background: white;
color: #222;
-webkit-font-smoothing: antialiased;
.article-comment {
padding-top: 6px;
padding-bottom: 6px;
border-top: 1px solid #f5f4f4;
}
}