Commit 47a18f60 authored by Dank Gabs's avatar Dank Gabs

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.
parent 97ad49c6
......@@ -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}
......@@ -84,7 +85,8 @@ class Create extends React.PureComponent {
</div>
<div>
<input
className='group-form__input'
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}
......@@ -116,7 +117,8 @@ class Edit extends React.PureComponent {
<div>
<input
className='group-form__input'
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';
......
.group-form {
padding: 15px;
@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 {
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();
.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;}
}
\ No newline at end of file
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;
// }
// }
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment