Redesigned compose form
This commit is contained in:
Eugen Rochko
parent
9bf4c34919
commit
d8c5a83827
21 changed files with 477 additions and 218 deletions
|
|
@ -19,9 +19,11 @@
|
|||
line-height: 36px;
|
||||
border-radius: 4px;
|
||||
text-decoration: none;
|
||||
transition: all 100ms ease-in;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color4, 7%);
|
||||
transition: all 200ms ease-out;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
|
|
@ -44,13 +46,17 @@
|
|||
}
|
||||
|
||||
.icon-button {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
color: lighten($color1, 26%);
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
transition: all 100ms ease-in;
|
||||
|
||||
&:hover {
|
||||
color: lighten($color1, 33%);
|
||||
transition: all 200ms ease-out;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
|
|
@ -62,8 +68,63 @@
|
|||
color: $color4;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner, &:focus, &:active {
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
&.inverted {
|
||||
color: lighten($color1, 33%);
|
||||
|
||||
&:hover {
|
||||
color: lighten($color1, 26%);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $color4;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-icon-button {
|
||||
color: lighten($color1, 26%);
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
font-size: 12px;
|
||||
padding: 0 3px;
|
||||
line-height: 27px;
|
||||
outline: 0;
|
||||
transition: all 100ms ease-in;
|
||||
|
||||
&:hover {
|
||||
color: lighten($color1, 33%);
|
||||
transition: all 200ms ease-out;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: lighten($color1, 13%);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $color4;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&::-moz-focus-inner, &:focus, &:active {
|
||||
outline: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -103,6 +164,29 @@
|
|||
}
|
||||
}
|
||||
|
||||
.compose-form__modifiers {
|
||||
color: $color1;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
background: $color5;
|
||||
border-radius: 0 0 4px 0;
|
||||
}
|
||||
|
||||
.compose-form__buttons {
|
||||
padding: 10px;
|
||||
background: darken($color5, 8%);
|
||||
box-shadow: inset 0 5px 5px rgba($color8, 0.05);
|
||||
border-radius: 0 0 4px 4px;
|
||||
flex: 1 1 auto;
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
|
||||
.icon-button {
|
||||
box-sizing: content-box;
|
||||
padding: 0 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.compose-form__label {
|
||||
display: block;
|
||||
line-height: 24px;
|
||||
|
|
@ -144,6 +228,9 @@
|
|||
}
|
||||
|
||||
.reply-indicator {
|
||||
border-radius: 4px 4px 0 0;
|
||||
position: relative;
|
||||
bottom: -2px;
|
||||
background: $color3;
|
||||
padding: 10px;
|
||||
|
||||
|
|
@ -515,6 +602,7 @@ a.status__content__spoiler-link {
|
|||
flex-shrink: 0;
|
||||
cursor: default;
|
||||
color: $color3;
|
||||
padding-bottom: 5px;
|
||||
|
||||
strong {
|
||||
color: $color5;
|
||||
|
|
@ -568,6 +656,10 @@ a.status__content__spoiler-link {
|
|||
& > ul {
|
||||
left: -98px;
|
||||
}
|
||||
|
||||
& > .emoji-dialog {
|
||||
left: -249px;
|
||||
}
|
||||
}
|
||||
|
||||
& > ul > li > a {
|
||||
|
|
@ -585,7 +677,7 @@ a.status__content__spoiler-link {
|
|||
white-space: nowrap;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -643,7 +735,7 @@ a.status__content__spoiler-link {
|
|||
}
|
||||
|
||||
.drawer {
|
||||
width: 280px;
|
||||
width: 330px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -676,7 +768,8 @@ a.status__content__spoiler-link {
|
|||
}
|
||||
|
||||
.drawer__inner {
|
||||
background: linear-gradient(rgba(lighten($color1, 13%), 1), rgba(lighten($color1, 13%), 0.65));
|
||||
//background: linear-gradient(rgba(lighten($color1, 13%), 1), rgba(lighten($color1, 13%), 0.65));
|
||||
background: lighten($color1, 13%);
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
|
|
@ -965,11 +1058,23 @@ a.status__content__spoiler-link {
|
|||
font-size: 14px;
|
||||
resize: vertical;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.spoiler-input__input {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.autosuggest-textarea__textarea {
|
||||
height: 100px;
|
||||
background: $color5;
|
||||
border-radius: 4px 4px 0 0;
|
||||
padding-bottom: 0;
|
||||
padding-right: 10px + 22px;
|
||||
}
|
||||
|
||||
.autosuggest-textarea__suggestions {
|
||||
|
|
@ -1153,6 +1258,11 @@ button.active i.fa-retweet {
|
|||
.collapsable {
|
||||
color: $color5;
|
||||
background: lighten($color1, 8%);
|
||||
|
||||
&:hover {
|
||||
color: $color5;
|
||||
background: lighten($color1, 8%);
|
||||
}
|
||||
}
|
||||
|
||||
.media-spoiler {
|
||||
|
|
@ -1411,7 +1521,7 @@ button.active i.fa-retweet {
|
|||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1479,7 +1589,7 @@ button.active i.fa-retweet {
|
|||
}
|
||||
|
||||
.upload-progress {
|
||||
padding-bottom: 20px;
|
||||
padding: 10px;
|
||||
color: lighten($color1, 26%);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
|
|
@ -1511,14 +1621,20 @@ button.active i.fa-retweet {
|
|||
left: 0;
|
||||
top: 0;
|
||||
height: 6px;
|
||||
background: $color2;
|
||||
background: $color4;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.emoji-button {
|
||||
outline: 0;
|
||||
|
||||
&:active, &:focus {
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
img {
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.4;
|
||||
opacity: 0.8;
|
||||
display: block;
|
||||
margin: 0;
|
||||
width: 22px;
|
||||
|
|
@ -1538,3 +1654,74 @@ button.active i.fa-retweet {
|
|||
opacity: 1;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.privacy-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.privacy-dropdown__dropdown {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 24px;
|
||||
width: 180px;
|
||||
background: $color5;
|
||||
border-radius: 0 4px 4px 4px;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.privacy-dropdown__option {
|
||||
color: $color1;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
|
||||
&:hover, &.active {
|
||||
background: $color4;
|
||||
color: $color5;
|
||||
|
||||
.privacy-dropdown__option__content {
|
||||
color: $color5;
|
||||
|
||||
strong {
|
||||
color: $color5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active:hover {
|
||||
background: lighten($color4, 4%);
|
||||
}
|
||||
}
|
||||
|
||||
.privacy-dropdown__option__icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.privacy-dropdown__option__content {
|
||||
flex: 1 1 auto;
|
||||
color: $color3;
|
||||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
color: $color1;
|
||||
}
|
||||
}
|
||||
|
||||
.privacy-dropdown.active {
|
||||
.privacy-dropdown__value {
|
||||
background: $color5;
|
||||
border-radius: 4px 4px 0 0;
|
||||
box-shadow: 0 -4px 4px rgba($color8, 0.1);
|
||||
}
|
||||
|
||||
.privacy-dropdown__dropdown {
|
||||
display: block;
|
||||
box-shadow: 2px 4px 6px rgba($color8, 0.1);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue