Merge branch 'styling/groups-styling-updates' of https://code.gab.com/gab/social/gab-social into develop
This commit is contained in:
mgabdev
commit
f604b18f0f
|
|
@ -75,7 +75,8 @@ class Create extends React.PureComponent {
|
|||
<form className='group-form' onSubmit={this.handleSubmit}>
|
||||
<div>
|
||||
<input
|
||||
className='group-form__input'
|
||||
className='standard'
|
||||
type='text'
|
||||
value={title}
|
||||
disabled={disabled}
|
||||
onChange={this.handleTitleChange}
|
||||
|
|
@ -83,8 +84,9 @@ class Create extends React.PureComponent {
|
|||
/>
|
||||
</div>
|
||||
<div>
|
||||
<input
|
||||
className='group-form__input'
|
||||
<textarea
|
||||
className='standard'
|
||||
type='text'
|
||||
value={description}
|
||||
disabled={disabled}
|
||||
onChange={this.handleDescriptionChange}
|
||||
|
|
|
|||
|
|
@ -106,7 +106,8 @@ class Edit extends React.PureComponent {
|
|||
<form className='group-form' onSubmit={this.handleSubmit}>
|
||||
<div>
|
||||
<input
|
||||
className='group-form__input'
|
||||
className='standard'
|
||||
type='text'
|
||||
value={title}
|
||||
disabled={disabled}
|
||||
onChange={this.handleTitleChange}
|
||||
|
|
@ -115,8 +116,9 @@ class Edit extends React.PureComponent {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<input
|
||||
className='group-form__input'
|
||||
<textarea
|
||||
className='standard'
|
||||
type='text'
|
||||
value={description}
|
||||
disabled={disabled}
|
||||
onChange={this.handleDescriptionChange}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
|
||||
// COMPONENTS
|
||||
@import 'gabsocial/components/buttons';
|
||||
@import 'gabsocial/components/inputs';
|
||||
@import 'gabsocial/components/tabs-bar';
|
||||
@import 'gabsocial/components/dropdown-menu';
|
||||
@import 'gabsocial/components/modal';
|
||||
|
|
|
|||
|
|
@ -15,7 +15,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
// SHORTCUTS
|
||||
@mixin input-placeholder($color) {
|
||||
&::-webkit-input-placeholder {color: $color;}
|
||||
&::-moz-placeholder {color: $color;}
|
||||
&:-ms-input-placeholder {color: $color;}
|
||||
&:-moz-placeholder {color: $color;}
|
||||
}
|
||||
|
||||
// OLDER MIXINS
|
||||
@mixin avatar-radius() {
|
||||
|
|
|
|||
|
|
@ -235,23 +235,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
&::after {
|
||||
content: "…";
|
||||
}
|
||||
}
|
||||
.ellipsis::after {content: "…";}
|
||||
|
||||
.timeline-compose-block {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
background: $gab-background-container;
|
||||
body.theme-gabsocial-light & {
|
||||
@include light-theme-shadow();
|
||||
background: $gab-background-container-light;
|
||||
}
|
||||
margin-bottom: 20px;
|
||||
@include gab-container-standards();
|
||||
.emoji-picker-wrapper {
|
||||
.emoji-picker-dropdown {top: 10px;}
|
||||
}
|
||||
|
|
@ -1294,16 +1285,11 @@ a.account__display-name {
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
//////////////////////////////////
|
||||
|
||||
|
||||
.columns-area {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
//overflow-x: auto;
|
||||
position: relative;
|
||||
|
||||
&__panels {
|
||||
|
|
@ -1314,10 +1300,6 @@ a.account__display-name {
|
|||
|
||||
&__pane {
|
||||
height: 100%;
|
||||
|
||||
// NOTE: regression-watch -- watch for regressions on this before deleting permanently
|
||||
//overflow: hidden;
|
||||
|
||||
pointer-events: none;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
|
@ -1477,57 +1459,33 @@ a.account__display-name {
|
|||
flex-direction: column;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
|
||||
.column,
|
||||
.drawer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.autosuggest-textarea__textarea {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.autosuggest-textarea__textarea {font-size: 16px;}
|
||||
.search__input {
|
||||
line-height: 18px;
|
||||
font-size: 16px;
|
||||
padding: 15px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.search__icon .fa {
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 360px) {
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.search__icon .fa {top: 15px;}
|
||||
@media screen and (min-width: 360px) {padding: 15px 0;}
|
||||
@media screen and (min-width: 630px) {
|
||||
.detailed-status {
|
||||
padding: 15px;
|
||||
|
||||
.media-gallery,
|
||||
.video-player {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.account__header__bar {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.account__header__bar {padding: 5px 10px;}
|
||||
.navigation-bar,
|
||||
.compose-form {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.compose-form .compose-form__publish .compose-form__publish-button-wrapper {
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.compose-form {padding: 15px;}
|
||||
.compose-form .compose-form__publish .compose-form__publish-button-wrapper {padding-top: 15px;}
|
||||
.status {
|
||||
padding: 15px 15px 15px (48px + 15px * 2);
|
||||
min-height: 48px + 2px;
|
||||
|
|
@ -2445,12 +2403,11 @@ a.status-card.compact:hover {
|
|||
}
|
||||
}
|
||||
|
||||
.columns-area--mobile .column {@include gab-container-standards();}
|
||||
.column-header__wrapper {
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
border-top-right-radius: 10px;
|
||||
border-top-left-radius: 10px;
|
||||
overflow: hidden;
|
||||
overflow: hidden;
|
||||
|
||||
&.active {
|
||||
&::before {
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
display: block;
|
||||
flex: 0 0 calc(50% - 20px/2);
|
||||
@include gab-container-standards();
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 20px;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,56 +1,33 @@
|
|||
.group-form {
|
||||
background: $gab-background-container;
|
||||
body.theme-gabsocial-light & {
|
||||
background: $gab-background-container-light;
|
||||
}
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
|
||||
.group-form__input {
|
||||
height: 40px;
|
||||
padding: 0 15px;
|
||||
display: block;
|
||||
color: $primary-text-color;
|
||||
background: none;
|
||||
border: 1px solid $secondary-text-color;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.group-form__file-label {
|
||||
font-size: 13px;
|
||||
color: $secondary-text-color;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
.fa {
|
||||
font-size: 18px;
|
||||
margin-right: 5px;
|
||||
transform: translatey(2px);
|
||||
}
|
||||
|
||||
&.group-form__file-label--selected {
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.group-form__file {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
button {float: right;}
|
||||
}
|
||||
padding: 20px;
|
||||
@include gab-container-standards();
|
||||
input[type=text],
|
||||
textarea {
|
||||
&.standard {
|
||||
width: 100%;
|
||||
margin: 0 0 10px;
|
||||
}
|
||||
}
|
||||
textarea {height: 88px;}
|
||||
.group-form__file-label {
|
||||
font-size: 13px;
|
||||
color: $secondary-text-color;
|
||||
cursor: pointer;
|
||||
&:hover {color: $primary-text-color;}
|
||||
.fa {
|
||||
font-size: 18px;
|
||||
margin-right: 5px;
|
||||
transform: translatey(2px);
|
||||
}
|
||||
&.group-form__file-label--selected {color: $primary-text-color;}
|
||||
}
|
||||
.group-form__file {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
button {float: right;}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
input[type='text'],
|
||||
textarea {
|
||||
&.standard {
|
||||
box-sizing: border-box;
|
||||
padding: 7px 10px;
|
||||
border: 1px solid;
|
||||
border-radius: 4px;
|
||||
@include font-size(16);
|
||||
@include line-height(18);
|
||||
color: $gab-brand-default;
|
||||
border-color: $gab-placeholder-accent;
|
||||
background: $gab-background-container;
|
||||
@include input-placeholder($gab-placeholder-accent);
|
||||
body.theme-gabsocial-light & {
|
||||
color: $gab-placeholder-accent;
|
||||
border-color: $gab-secondary-text;
|
||||
background: $gab-background-base-light;
|
||||
@include input-placeholder($gab-secondary-text);
|
||||
}
|
||||
&:focus {outline: none;}
|
||||
}
|
||||
}
|
||||
textarea.standard {resize: vertical;}
|
||||
Loading…
Reference in New Issue