kopia lustrzana https://github.com/wagtail/wagtail
137 wiersze
2.4 KiB
SCSS
137 wiersze
2.4 KiB
SCSS
.comment {
|
|
@include box;
|
|
|
|
width: 300px;
|
|
display: block;
|
|
transition:
|
|
top 0.5s ease 0s,
|
|
inset-inline-end 0.5s ease 0s,
|
|
height 0.5s ease 0s;
|
|
pointer-events: auto;
|
|
padding-bottom: 0;
|
|
inset-inline-end: 0;
|
|
|
|
&--focused {
|
|
inset-inline-end: 25px;
|
|
}
|
|
|
|
&__text {
|
|
color: $color-box-text;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
line-height: 150%;
|
|
margin-bottom: 0;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
word-break: break-all;
|
|
white-space: pre-wrap;
|
|
|
|
&--mode-deleting {
|
|
color: theme('colors.text-context');
|
|
}
|
|
}
|
|
|
|
form {
|
|
border-top: 1px solid $color-comment-separator;
|
|
}
|
|
|
|
&--mode-creating form {
|
|
border-top: 0;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
&--mode-editing form {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
&--mode-deleting &__text {
|
|
color: theme('colors.text-placeholder');
|
|
}
|
|
|
|
&__replies {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
&__button {
|
|
@include button;
|
|
}
|
|
|
|
&__actions,
|
|
&__reply-actions {
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
&__actions &__button,
|
|
&__reply-actions &__button {
|
|
margin-inline-end: 10px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
&__confirm-delete &__button {
|
|
margin-inline-start: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
&__confirm-delete,
|
|
&__error {
|
|
color: $color-box-text;
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
margin-top: 10px;
|
|
|
|
button {
|
|
float: inline-end;
|
|
}
|
|
|
|
&::after {
|
|
display: block;
|
|
content: ' ';
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
&__error {
|
|
color: theme('colors.white.DEFAULT');
|
|
background-color: theme('colors.critical.200');
|
|
border-radius: 3px;
|
|
padding: 5px;
|
|
padding-inline-start: 10px;
|
|
height: 26px;
|
|
line-height: 26px;
|
|
vertical-align: middle;
|
|
|
|
button {
|
|
height: 26px;
|
|
float: inline-end;
|
|
margin-inline-start: 5px;
|
|
color: theme('colors.white.DEFAULT');
|
|
background-color: theme('colors.critical.200');
|
|
border-color: theme('colors.white.DEFAULT');
|
|
padding: 2px;
|
|
padding-inline-start: 10px;
|
|
padding-inline-end: 10px;
|
|
font-size: 0.65em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
&::after {
|
|
display: block;
|
|
content: '';
|
|
clear: both;
|
|
}
|
|
}
|
|
|
|
&__progress {
|
|
margin-top: 20px;
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
}
|
|
|
|
&__reply-input {
|
|
/* stylelint-disable-next-line declaration-no-important */
|
|
margin-top: 20px !important;
|
|
}
|
|
}
|