tyler.durden/opensupports
1
0
Fork 0
mirror of https://github.com/opensupports/opensupports.git synced 2025-04-08 18:35:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

Ivan - Update checkbox styling, add custom scroll style for chrome [skip ci]

Browse Source
This commit is contained in:
ivan 2016-12-09 18:59:26 -03:00
parent 77f8976896
commit 1e69ca3651
6 changed files with 86 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
client/src/app/admin/panel/staff/add-staff-modal.js
View File

@ -15,16 +15,25 @@ class AddStaffModal extends React.Component {
<div className="add-staff-modal">
<Header title={i18n('ADD_STAFF')} description={i18n('ADD_STAFF_DESCRIPTION')} />
<Form onSubmit={this.onSubmit.bind(this)}>
<FormField name="name" label={i18n('NAME')} fieldProps={{size: 'large'}} validation="NAME" required />
<FormField name="email" label={i18n('EMAIL')} fieldProps={{size: 'large'}} validation="EMAIL" required />
<FormField name="password" label={i18n('PASSWORD')} fieldProps={{size: 'large', password: true}} validation="PASSWORD" required />
<div className="add-staff-modal__level-selector">
<FormField name="level" label={i18n('LEVEL')} field="select" fieldProps={{
<div className="row">
<div className="col-md-7">
<FormField name="name" label={i18n('NAME')} fieldProps={{size: 'large'}} validation="NAME" required />
<FormField name="email" label={i18n('EMAIL')} fieldProps={{size: 'large'}} validation="EMAIL" required />
<FormField name="password" label={i18n('PASSWORD')} fieldProps={{size: 'large', password: true}} validation="PASSWORD" required />
<div className="add-staff-modal__level-selector">
<FormField name="level" label={i18n('LEVEL')} field="select" fieldProps={{
items: [{content: i18n('LEVEL_1')}, {content: i18n('LEVEL_2')}, {content: i18n('LEVEL_3')}],
size: 'large'
}} />
</div>
</div>
<div className="col-md-5">
<div className="add-staff-modal__departments">
<div className="add-staff-modal__departments-title">{i18n('Departments')}</div>
<FormField name="departments" field="checkbox-group" fieldProps={{items: this.getDepartments()}} />
</div>
</div>
</div>
<FormField name="departments" field="checkbox-group" label={i18n('Departments')} fieldProps={{items: this.getDepartments()}} />
<SubmitButton type="secondary" size="small">
{i18n('SAVE')}
</SubmitButton>

17
client/src/app/admin/panel/staff/add-staff-modal.scss
View File

@ -1,6 +1,23 @@
@import "../../../../scss/vars";
.add-staff-modal {
width: 700px;
&__level-selector {
text-align: center;
}
&__departments {
@include scrollbars();
border: 1px solid $grey;
padding: 20px;
height: 320px;
overflow-y: auto;
}
&__departments-title {
font-size: $font-size--md;
text-align: center;
}
}

11
client/src/core-components/checkbox-group.scss Normal file
View File

@ -0,0 +1,11 @@
@import "../scss/vars";
.checkbox-group {
list-style-type: none;
margin: 0;
padding: 0;
&__item {
margin: 10px 0;
}
}

4
client/src/core-components/checkbox.js
View File

@ -53,7 +53,7 @@ class CheckBox extends React.Component {
props.type = 'checkbox';
props['aria-hidden'] = true;
props.className = 'checkbox--box';
props.className = 'checkbox__box';
props.checked = this.getValue();
props.onChange = callback(this.handleChange.bind(this), this.props.onChange);
@ -79,7 +79,7 @@ class CheckBox extends React.Component {
getIconProps() {
return {
'aria-checked': this.getValue(),
className: 'checkbox--icon',
className: 'checkbox__icon',
onKeyDown: callback(this.handleIconKeyDown.bind(this), this.props.onKeyDown),
role: "checkbox",
tabIndex: 0

10
client/src/core-components/checkbox.scss
View File

@ -5,11 +5,11 @@
border-radius: 5px;
display: inline-block;
&--box {
&__box {
display: none;
}
&--icon {
&__icon {
color: $light-grey;
outline: none;
@ -18,8 +18,12 @@
}
}
&__label {
margin-left: 10px;
}
&_checked {
.checkbox--icon {
.checkbox__icon {
color: $primary-red;
&:focus {

35
client/src/scss/_vars.scss
View File

@ -25,4 +25,37 @@ $font-size--sm: 13px;
$font-size--md: 16px;
$font-size--bg: 19px;
$font-size--lg: 24px;
$font-size--xl: 32px;
$font-size--xl: 32px;
@mixin scrollbars() {
$size: .4em;
$color: $grey;
&::-webkit-scrollbar {
width: $size;
height: $size;
}
&::-webkit-scrollbar-thumb {
background: transparent;
}
&::-webkit-scrollbar-track {
backgroundr: transparent;
}
&:hover {
&::-webkit-scrollbar {
width: $size;
height: $size;
}
&::-webkit-scrollbar-thumb {
background: $color;
}
&::-webkit-scrollbar-track {
background: lighten($color, 50%);
}
}
}