Merge branch 'issue-344-css-refactor' into 'develop'

#344 - replace float: with flexbox, clean up

See merge request pleroma/pleroma-fe!566
This commit is contained in:
Shpuld Shpludson 2019-02-19 16:49:44 +00:00
commit 53484ae4bf
4 changed files with 20 additions and 9 deletions

View file

@ -181,8 +181,7 @@ input, textarea, .select {
color: $fallback--text; color: $fallback--text;
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
} }
&:disabled, &:disabled {
{
&, &,
& + label, & + label,
& + label::before { & + label::before {
@ -649,10 +648,6 @@ nav {
color: var(--lightText, $fallback--lightText); color: var(--lightText, $fallback--lightText);
} }
.text-format {
float: right;
}
div { div {
padding-top: 5px; padding-top: 5px;
} }

View file

@ -3,8 +3,8 @@
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading timeline-heading" :class="{ 'chat-heading': floating }" @click.stop.prevent="togglePanel"> <div class="panel-heading timeline-heading" :class="{ 'chat-heading': floating }" @click.stop.prevent="togglePanel">
<div class="title"> <div class="title">
{{$t('chat.title')}} <span>{{$t('chat.title')}}</span>
<i class="icon-cancel" style="float: right;" v-if="floating"></i> <i class="icon-cancel" v-if="floating"></i>
</div> </div>
</div> </div>
<div class="chat-window" v-chat-scroll> <div class="chat-window" v-chat-scroll>
@ -98,4 +98,11 @@
resize: none; resize: none;
} }
} }
.chat-panel {
.title {
display: flex;
justify-content: space-between;
}
}
</style> </style>

View file

@ -103,6 +103,7 @@
flex: 1 1 0; flex: 1 1 0;
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: space-between;
.name-and-action { .name-and-action {
flex: 1; flex: 1;
@ -123,8 +124,8 @@
object-fit: contain object-fit: contain
} }
} }
.timeago { .timeago {
float: right;
font-size: 12px; font-size: 12px;
} }

View file

@ -118,6 +118,14 @@
} }
} }
.post-status-form {
.visibility-tray {
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
}
}
.post-status-form, .login { .post-status-form, .login {
.form-bottom { .form-bottom {
display: flex; display: flex;