src/app/drafts/draft-edit/draft-edit.component.scss
.article-editor {
position: fixed;
top: 67px;
right: 5px;
bottom: 0;
left: 5px;
&__title {
width: 100%;
top: 5px;
position: absolute;
input {
width: 100%;
height: 40px;
font-size: 24px;
border-radius: 4px;
display: block;
box-sizing: border-box;
padding: 4px;
color: #4c4c4c;
-webkit-font-smoothing: antialiased;
&:focus {
outline: 0;
}
}
}
&__format-operation {
display: flex;
width: 100%;
left: 0;
right: 0;
top: 50px;
position: absolute;
height: 40px;
padding: 4px;
box-sizing: border-box;
-webkit-align-items: center;
align-items: center;
}
&__select-format {
margin-left: 2em;
}
&__main {
display: flex;
width: 100%;
left: 0;
right: 0;
top: 100px;
position: absolute;
bottom: 48px;
}
&__operation {
display: flex;
-webkit-align-items: center;
align-items: center;
bottom: 0;
height: 48px;
position: fixed;
left: 5px;
right: 5px;
.spacer {
flex: 1 1 auto;
}
button {
margin-right: 4px;
}
}
}
.register-article-title
{
&__messages {
position: absolute;
background: #cccccc;
border-radius: 2px;
right: 2px;
top: 46px;
width: 50%;
z-index: 1;
padding: 8px;
box-sizing: border-box;
&:before {
display: block;
position: absolute;
z-index: 2;
content: '';
top: -23px;
left: 12px;
width: 24px;
height: 24px;
box-sizing: border-box;
border-bottom: 14px solid #cccccc;
border-right: 12px solid transparent;
border-left: 12px solid transparent;
}
}
}
.register-article-body
{
&__messages {
position: relative;
background: #cccccc;
border-radius: 2px;
right: 2px;
width: 50%;
z-index: 1;
padding: 8px;
box-sizing: border-box;
margin-right: 12px;
&:before {
display: block;
position: absolute;
z-index: 2;
content: '';
top: -23px;
left: 12px;
width: 24px;
height: 24px;
box-sizing: border-box;
border-bottom: 14px solid #cccccc;
border-right: 12px solid transparent;
border-left: 12px solid transparent;
}
}
}
.select-format {
/* Angular Materialでトグルボタン選択時のスタイル */
.mat-button-toggle-checked {
background-color: rgba(255, 64, 129, 0.83);
}
&__button {
font-size: 1em;
&_icon_twice {
font-size: 0.6em;
}
}
}
.markdonw-editor {
&__row-text {
&.drogover {
border: 4px #3428a0 dotted;
// background: rgb(168, 168, 168);
opacity: 0.7;
}
&.notPreviewing {
width: 100%;
transition: width 0.2s;
}
&.harfPreviewing {
width: 50%;
transition: width 0.2s;
}
&.fullPreviewing {
width: 0;
transition: width 0.2s;
}
}
&__preview {
width: 50%;
background: white;
max-height: 100%;
overflow: scroll;
padding: 12px;
border-radius: 0 4px 4px 0;
border: 1px #afafaf solid;
position: relative;
color: #4c4c4c;
-webkit-font-smoothing: antialiased;
&:before {
font: normal normal normal 14px/1 FontAwesome;
content: "\F06E";
display: block;
position: absolute;
top: 0;
left: 0;
height: 24px;
width: 34px;
background: #d8d8d8;
line-height: 24px;
text-align: center;
color: gray;
border-radius: 0 0 4px 0;
}
&.notPreviewing {
width: 0;
transition: width 0.2s;
}
&.harfPreviewing {
width: 50%;
transition: width 0.2s;
}
&.fullPreviewing {
width: 100%;
transition: width 0.2s;
}
}
}
.plain-text-editor {
&__row-text {
width: 100%;
textarea {
width: 100%;
height: 100%;
box-sizing: border-box;
border-radius: 4px;
border: 1px #afafaf solid;
font-size: 14px;
line-height: 20px;
padding: 12px;
color: #4c4c4c;
-webkit-font-smoothing: antialiased;
&:focus {
outline: 0;
}
}
}
}
.image-operation {
z-index: 1;
position: fixed;
background: rgba(245, 245, 245, 0.57);
font-size: 12px;
color: #191919;
border-radius: 2px;
box-shadow: 0 0 15px 1px grey;
bottom: 52px;
right: 8px;
&:hover {
background: whitesmoke;
&__header {
background: #e0e0e0;
}
}
&__header {
display: flex;
align-items: center;
background: rgba(224, 224, 224, 0.6);
border-bottom: 1px solid #d2d2d2;
&__showhide-btn {
padding: 0 8px;
cursor: pointer;
height: 36px;
line-height: 36px;
&:hover {
background: rgb(216, 216, 216);
}
}
}
&__image {
display: flex;
align-items: center;
padding: 2px;
border-bottom: solid 1px #d4d4d4;
&__insert-btn {
&:hover {
background: #d6d6d6;
}
}
&__file-name {
}
&__spacer {
flex: 1 1 auto;
}
&__delete-btn {
&:hover {
background: #d6d6d6;
}
}
}
}
.editor-support {
color: #525252;
display: flex;
align-items: center;
padding: 0 12px;
&__icon {
padding: 4px;
height: 28px;
line-height: 20px;
width: 28px;
box-sizing: border-box;
border-radius: 2px;
margin-right: 6px;
cursor: pointer;
&:hover {
color: black;
background: rgb(199, 199, 199);
transition: color 0.2s;
}
}
&__separator {
display: inline-block;
width: 1px;
background: #a2a2a2;
height: 32px;
margin: 0 8px;
}
}
.header-menu {
&__h1 {
font-size: 2em;
}
&__h2 {
font-size: 1.5em;
}
&__h3 {
font-size: 1.2em;
}
&__h4 {
font-size: 1em;
}
&__h5 {
font-size: 0.7em;
}
&__h6 {
font-size: 0.5em;
}
}