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

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

@@ -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 />
+                    <div className="row">
-                    <FormField name="email" label={i18n('EMAIL')} fieldProps={{size: 'large'}} validation="EMAIL" required />
+                        <div className="col-md-7">
-                    <FormField name="password" label={i18n('PASSWORD')} fieldProps={{size: 'large', password: true}} validation="PASSWORD" required />
+                            <FormField name="name" label={i18n('NAME')} fieldProps={{size: 'large'}} validation="NAME" required />
-                    <div className="add-staff-modal__level-selector">
+                            <FormField name="email" label={i18n('EMAIL')} fieldProps={{size: 'large'}} validation="EMAIL" required />
-                        <FormField name="level" label={i18n('LEVEL')} field="select" fieldProps={{
+                            <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>

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

@@ -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;
+    }
 }

client/src/core-components/checkbox-group.scss

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

client/src/core-components/checkbox.js

@@ -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

client/src/core-components/checkbox.scss

@@ -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 {

client/src/scss/_vars.scss

@@ -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%);
+        }
+    }
+}