Skip to content
Permalink
Browse files

refactor: Use BEM naming conventinon for CSS

  • Loading branch information...
davidchin committed Jan 22, 2017
1 parent f7c1a6e commit 9e220259941a3d8d526e49ee999d8494080042b1
@@ -3,9 +3,9 @@ files:
options:
formatter: stylish
rules:
class-name-format: &class-name-format
class-name-format:
- 2
- convention: ^(([A-Z][a-z]*)+$|(([A-Z][a-z]*)+|u|is|js)(-|--)([a-z]+([a-z]|[A-Z])*)+|(([A-Z][a-z]*)+|u|is|js)(-|--)([a-z]+([a-z]|[A-Z])*)+(--[a-z]+([a-z]|[A-Z])*)+)|[ng]-(\w)+(-(\w)*)*$
- convention: hyphenatedbem
empty-line-between-blocks:
- 2
- ignore-single-line-rulesets: false
@@ -28,8 +28,12 @@ rules:
- max-depth: 2
no-ids: 2
no-important: 2
placeholder-name-format: *class-name-format
placeholder-name-format:
- 2
- convention: hyphenatedbem
quotes:
- 2
- style: single
variable-name-format: *class-name-format
variable-name-format:
- 2
- convention: hyphenatedlowercase
@@ -5,6 +5,6 @@
width: 60%;
}

.InputRange {
.input-range {
margin-bottom: 10rem;
}
@@ -12,16 +12,16 @@
* @property {string} trackContainer
*/
const defaultClassNames = {
component: 'InputRange',
labelContainer: 'InputRange-labelContainer',
labelMax: 'InputRange-label InputRange-label--max',
labelMin: 'InputRange-label InputRange-label--min',
labelValue: 'InputRange-label InputRange-label--value',
slider: 'InputRange-slider',
sliderContainer: 'InputRange-sliderContainer',
trackActive: 'InputRange-track InputRange-track--active',
trackContainer: 'InputRange-track InputRange-track--container',
disabled: 'is-disabled',
component: 'input-range',
disabled: 'input-range--disabled',
labelContainer: 'input-range__label-container',
labelMax: 'input-range__label input-range__label--max',
labelMin: 'input-range__label input-range__label--min',
labelValue: 'input-range__label input-range__label--value',
slider: 'input-range__slider',
sliderContainer: 'input-range__slider-container',
trackActive: 'input-range__track input-range__track--active',
trackContainer: 'input-range__track input-range__track--container',
};

export default defaultClassNames;
@@ -1,8 +1,8 @@
.InputRange-labelContainer {
.input-range__label-container {
left: -50%;
position: relative;

.InputRange-label--max & {
.input-range__label--max & {
left: 50%;
}
}
@@ -1,25 +1,25 @@
.InputRange-label {
color: $InputRange-label-color;
font-family: $InputRange-fontFamily;
.input-range__label {
color: $input-range-label-color;
font-family: $input-range-font-family;
font-size: 0.8rem;
white-space: nowrap;
}

.InputRange-label--min,
.InputRange-label--max {
.input-range__label--min,
.input-range__label--max {
bottom: -1.4rem;
position: absolute;
}

.InputRange-label--min {
.input-range__label--min {
left: 0;
}

.InputRange-label--max {
.input-range__label--max {
right: 0;
}

.InputRange-label--value {
.input-range__label--value {
position: absolute;
top: -1.8rem;
}
@@ -1,35 +1,35 @@
.InputRange-slider {
.input-range__slider {
appearance: none;
background: $InputRange-slider-background;
border: $InputRange-slider-border;
background: $input-range-slider-background;
border: $input-range-slider-border;
border-radius: 100%;
cursor: pointer;
display: block;
height: $InputRange-slider-height;
margin-left: $InputRange-slider-width / -2;
margin-top: $InputRange-slider-height / -2 + $InputRange-track-height / -2;
height: $input-range-slider-height;
margin-left: $input-range-slider-width / -2;
margin-top: $input-range-slider-height / -2 + $input-range-track-height / -2;
outline: none;
position: absolute;
top: 50%;
transition: $InputRange-slider-transition;
width: $InputRange-slider-width;
transition: $input-range-slider-transition;
width: $input-range-slider-width;

&:active {
transform: $InputRange-slider--active-transform;
transform: $input-range-slider-active-transform;
}

&:focus {
box-shadow: 0 0 0 5px transparentize($InputRange-slider-background, 0.8);
box-shadow: 0 0 0 5px transparentize($input-range-slider-background, 0.8);
}

.InputRange.is-disabled & {
background: $InputRange-slider--is-disabled-background;
border: $InputRange-slider--is-disabled-border;
.input-range--disabled & {
background: $input-range-slider-disabled-background;
border: $input-range-slider-disabled-border;
box-shadow: none;
transform: none;
}
}

.InputRange-sliderContainer {
transition: $InputRange-sliderContainer-transition;
.input-range__slider-container {
transition: $input-range-slider-container-transition;
}
@@ -1,25 +1,25 @@
.InputRange-track {
background: $InputRange-track-background;
border-radius: $InputRange-track-height;
.input-range__track {
background: $input-range-track-background;
border-radius: $input-range-track-height;
cursor: pointer;
display: block;
height: $InputRange-track-height;
height: $input-range-track-height;
position: relative;
transition: $InputRange-track-transition;
transition: $input-range-track-transition;

.InputRange.is-disabled & {
background: $InputRange-track--is-disabled-background;
.input-range--disabled & {
background: $input-range-track-disabled-background;
}
}

.InputRange-track--container {
.input-range__track--container {
left: 0;
margin-top: -0.5 * $InputRange-track-height;
margin-top: -0.5 * $input-range-track-height;
position: absolute;
right: 0;
top: 50%;
}

.InputRange-track--active {
background: $InputRange-track--active-background;
.input-range__track--active {
background: $input-range-track-active-background;
}
@@ -1,26 +1,26 @@
$InputRange-fontFamily: 'Helvetica Neue', san-serif !default;
$InputRange-primaryColor: #3f51b5 !default;
$InputRange-neutralColor: #aaaaaa !default;
$InputRange-neutralLightColor: #eeeeee !default;
$InputRange-disabledColor: #cccccc !default;
$input-range-font-family: 'Helvetica Neue', san-serif !default;
$input-range-primary-color: #3f51b5 !default;
$input-range-neutral-color: #aaaaaa !default;
$input-range-neutral-light-color: #eeeeee !default;
$input-range-disabled-color: #cccccc !default;

// InputRange-slider
$InputRange-slider-background: $InputRange-primaryColor !default;
$InputRange-slider-border: 1px solid $InputRange-primaryColor !default;
$InputRange-slider-height: 1rem !default;
$InputRange-slider-width: 1rem !default;
$InputRange-slider-transition: transform 0.3s ease-out, box-shadow 0.3s ease-out !default;
$InputRange-sliderContainer-transition: left 0.3s ease-out !default;
$InputRange-slider--active-transform: scale(1.3) !default;
$InputRange-slider--is-disabled-background: $InputRange-disabledColor !default;
$InputRange-slider--is-disabled-border: 1px solid $InputRange-disabledColor !default;
// input-range-slider
$input-range-slider-background: $input-range-primary-color !default;
$input-range-slider-border: 1px solid $input-range-primary-color !default;
$input-range-slider-height: 1rem !default;
$input-range-slider-width: 1rem !default;
$input-range-slider-transition: transform 0.3s ease-out, box-shadow 0.3s ease-out !default;
$input-range-slider-container-transition: left 0.3s ease-out !default;
$input-range-slider-active-transform: scale(1.3) !default;
$input-range-slider-disabled-background: $input-range-disabled-color !default;
$input-range-slider-disabled-border: 1px solid $input-range-disabled-color !default;

// InputRange-label
$InputRange-label-color: $InputRange-neutralColor !default;
// input-range-label
$input-range-label-color: $input-range-neutral-color !default;

// InputRange-track
$InputRange-track-background: $InputRange-neutralLightColor !default;
$InputRange-track-height: 0.3rem !default;
$InputRange-track-transition: left 0.3s ease-out, width 0.3s ease-out !default;
$InputRange-track--active-background: $InputRange-primaryColor !default;
$InputRange-track--is-disabled-background: $InputRange-neutralLightColor !default;
// input-range-track
$input-range-track-background: $input-range-neutral-light-color !default;
$input-range-track-height: 0.3rem !default;
$input-range-track-transition: left 0.3s ease-out, width 0.3s ease-out !default;
$input-range-track-active-background: $input-range-primary-color !default;
$input-range-track-disabled-background: $input-range-neutral-light-color !default;
@@ -4,8 +4,8 @@
@import 'input-range-label-container';
@import 'input-range-track';

.InputRange {
height: $InputRange-slider-height;
.input-range {
height: $input-range-slider-height;
position: relative;
width: 100%;
}
@@ -27,16 +27,16 @@ describe('InputRange', () => {
describe('initialize', () => {
it('should set default class names for its sub-components and itself', () => {
expect(inputRange.props.classNames).toEqual({
component: 'InputRange',
labelContainer: 'InputRange-labelContainer',
labelMax: 'InputRange-label InputRange-label--max',
labelMin: 'InputRange-label InputRange-label--min',
labelValue: 'InputRange-label InputRange-label--value',
slider: 'InputRange-slider',
sliderContainer: 'InputRange-sliderContainer',
trackActive: 'InputRange-track InputRange-track--active',
trackContainer: 'InputRange-track InputRange-track--container',
disabled: 'is-disabled',
component: 'input-range',
disabled: 'input-range--disabled',
labelContainer: 'input-range__label-container',
labelMax: 'input-range__label input-range__label--max',
labelMin: 'input-range__label input-range__label--min',
labelValue: 'input-range__label input-range__label--value',
slider: 'input-range__slider',
sliderContainer: 'input-range__slider-container',
trackActive: 'input-range__track input-range__track--active',
trackContainer: 'input-range__track input-range__track--container',
});
});
});

0 comments on commit 9e22025

Please sign in to comment.
You can’t perform that action at this time.