Adjustments to the create group form to match mockup specs.
Strip out css for form input from component css file. Created global form input css. Padding adjustments.
This commit is contained in:
parent
97ad49c617
commit
47a18f6024
@ -75,7 +75,8 @@ class Create extends React.PureComponent {
|
|||||||
<form className='group-form' onSubmit={this.handleSubmit}>
|
<form className='group-form' onSubmit={this.handleSubmit}>
|
||||||
<div>
|
<div>
|
||||||
<input
|
<input
|
||||||
className='group-form__input'
|
className='standard'
|
||||||
|
type='text'
|
||||||
value={title}
|
value={title}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
onChange={this.handleTitleChange}
|
onChange={this.handleTitleChange}
|
||||||
@ -84,7 +85,8 @@ class Create extends React.PureComponent {
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<input
|
<input
|
||||||
className='group-form__input'
|
className='standard'
|
||||||
|
type='text'
|
||||||
value={description}
|
value={description}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
onChange={this.handleDescriptionChange}
|
onChange={this.handleDescriptionChange}
|
||||||
|
@ -106,7 +106,8 @@ class Edit extends React.PureComponent {
|
|||||||
<form className='group-form' onSubmit={this.handleSubmit}>
|
<form className='group-form' onSubmit={this.handleSubmit}>
|
||||||
<div>
|
<div>
|
||||||
<input
|
<input
|
||||||
className='group-form__input'
|
className='standard'
|
||||||
|
type='text'
|
||||||
value={title}
|
value={title}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
onChange={this.handleTitleChange}
|
onChange={this.handleTitleChange}
|
||||||
@ -116,7 +117,8 @@ class Edit extends React.PureComponent {
|
|||||||
|
|
||||||
<div>
|
<div>
|
||||||
<input
|
<input
|
||||||
className='group-form__input'
|
className='standard'
|
||||||
|
type='text'
|
||||||
value={description}
|
value={description}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
onChange={this.handleDescriptionChange}
|
onChange={this.handleDescriptionChange}
|
||||||
|
@ -19,6 +19,7 @@
|
|||||||
|
|
||||||
// COMPONENTS
|
// COMPONENTS
|
||||||
@import 'gabsocial/components/buttons';
|
@import 'gabsocial/components/buttons';
|
||||||
|
@import 'gabsocial/components/inputs';
|
||||||
@import 'gabsocial/components/tabs-bar';
|
@import 'gabsocial/components/tabs-bar';
|
||||||
@import 'gabsocial/components/dropdown-menu';
|
@import 'gabsocial/components/dropdown-menu';
|
||||||
@import 'gabsocial/components/modal';
|
@import 'gabsocial/components/modal';
|
||||||
|
@ -1,44 +1,18 @@
|
|||||||
.group-form {
|
.group-form {
|
||||||
padding: 15px;
|
padding: 20px;
|
||||||
@include gab-container-standards();
|
@include gab-container-standards();
|
||||||
.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 {
|
.group-form__file-label {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: $secondary-text-color;
|
color: $secondary-text-color;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
&:hover {color: $primary-text-color;}
|
||||||
&:hover {
|
|
||||||
color: $primary-text-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fa {
|
.fa {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
transform: translatey(2px);
|
transform: translatey(2px);
|
||||||
}
|
}
|
||||||
|
&.group-form__file-label--selected {color: $primary-text-color;}
|
||||||
&.group-form__file-label--selected {
|
|
||||||
color: $primary-text-color;
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.group-form__file {
|
.group-form__file {
|
||||||
width: 1px;
|
width: 1px;
|
||||||
height: 1px;
|
height: 1px;
|
||||||
|
34
app/javascript/styles/gabsocial/components/inputs.scss
Normal file
34
app/javascript/styles/gabsocial/components/inputs.scss
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
input {
|
||||||
|
&.standard {
|
||||||
|
&[type='text'] {
|
||||||
|
border: 1px solid;
|
||||||
|
corner-radius: 4px;
|
||||||
|
@include font-size(16);
|
||||||
|
border-color: $gab-placeholder-accent;
|
||||||
|
background: $gab-background-container;
|
||||||
|
body.theme-gabsocial-light & {
|
||||||
|
border-color: $gab-secondary-text;
|
||||||
|
background: $gab-background-base-light;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// .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;
|
||||||
|
// }
|
||||||
|
// }
|
Loading…
x
Reference in New Issue
Block a user