Added a "buttons" component file to css stack.
Removed button style spec from group form into a re-usable class.
This commit is contained in:
parent
e008cb292a
commit
9637e35e17
@ -82,7 +82,6 @@ class Create extends React.PureComponent {
|
|||||||
placeholder={intl.formatMessage(messages.title)}
|
placeholder={intl.formatMessage(messages.title)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<input
|
<input
|
||||||
className='group-form__input'
|
className='group-form__input'
|
||||||
@ -92,12 +91,10 @@ class Create extends React.PureComponent {
|
|||||||
placeholder={intl.formatMessage(messages.description)}
|
placeholder={intl.formatMessage(messages.description)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label htmlFor='group_cover_image' className={classNames('group-form__file-label', { 'group-form__file-label--selected': coverImage !== null })}>
|
<label htmlFor='group_cover_image' className={classNames('group-form__file-label', { 'group-form__file-label--selected': coverImage !== null })}>
|
||||||
<Icon id='camera' /> {intl.formatMessage(coverImage === null ? messages.coverImage : messages.coverImageChange)}
|
<Icon id='camera' /> {intl.formatMessage(coverImage === null ? messages.coverImage : messages.coverImageChange)}
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<input
|
<input
|
||||||
type='file'
|
type='file'
|
||||||
className='group-form__file'
|
className='group-form__file'
|
||||||
@ -105,8 +102,7 @@ class Create extends React.PureComponent {
|
|||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
onChange={this.handleCoverImageChange}
|
onChange={this.handleCoverImageChange}
|
||||||
/>
|
/>
|
||||||
|
<button className='standard-small'>{intl.formatMessage(messages.create)}</button>
|
||||||
<button>{intl.formatMessage(messages.create)}</button>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
);
|
);
|
||||||
|
@ -18,6 +18,7 @@
|
|||||||
@import 'gabsocial/components';
|
@import 'gabsocial/components';
|
||||||
|
|
||||||
// COMPONENTS
|
// COMPONENTS
|
||||||
|
@import 'gabsocial/components/buttons';
|
||||||
@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';
|
||||||
|
19
app/javascript/styles/gabsocial/components/buttons.scss
Normal file
19
app/javascript/styles/gabsocial/components/buttons.scss
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
button {
|
||||||
|
&.standard {
|
||||||
|
&-small {
|
||||||
|
background: $gab-blue;
|
||||||
|
color: white;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
font-size: 14px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
height: 25px;
|
||||||
|
padding: 1px 12px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -49,18 +49,5 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
button {float: right;}
|
||||||
button {
|
|
||||||
background: $gab-blue;
|
|
||||||
color: white;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
font-size: 14px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
height: 25px;
|
|
||||||
padding: 1px 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user