Fix scss linter errors and bugfix in snackbar

react-toolbox · Nov 18, 2015 · 54ad233 · 54ad233
1 parent 87e8272
commit 54ad233
Show file tree

Hide file tree

Showing 14 changed files with 34 additions and 34 deletions.
diff --git a/.csscomb.json b/.csscomb.json
@@ -18,7 +18,7 @@
   "space-before-opening-brace": 1,
   "strip-spaces": true,
   "unitless-zero": true,
-  "vendor-prefix-align": true,
+  "vendor-prefix-align": false,
   "sort-order": [
     [
       "$variable",

diff --git a/.scss-lint.yml b/.scss-lint.yml
@@ -1,5 +1,7 @@
 scss_files: "./components/**/*.scss"
 
+exclude: "./node_modules"
+
 linters:
   BangFormat:
     enabled: true

diff --git a/components/animations/slide-left.scss b/components/animations/slide-left.scss
@@ -1,3 +1,4 @@
+// scss-lint:disable SelectorFormat
 @import "../base";
 
 .enter, .leave {

diff --git a/components/animations/slide-right.scss b/components/animations/slide-right.scss
@@ -1,3 +1,4 @@
+// scss-lint:disable SelectorFormat
 @import "../base";
 
 .enter, .leave {

diff --git a/components/commons.scss b/components/commons.scss
@@ -138,9 +138,9 @@ body[data-flex] {
 }
 
 [data-flex*="center"] {
-  justify-content: center;
   align-content: center;
   align-items: center;
+  justify-content: center;
 }
 
 [data-flex-justify="start"] {

diff --git a/components/date_picker/style.scss b/components/date_picker/style.scss
@@ -8,8 +8,8 @@
 .header {
   padding: 1.6 * $unit 2 * $unit;
   color: $datepicker-primary-contrast-color;
-  background-color: $datepicker-primary-color;
   cursor: pointer;
+  background-color: $datepicker-primary-color;
 }
 
 .year {

diff --git a/components/form/style.scss b/components/form/style.scss
@@ -1,5 +1,3 @@
-.root {
-  & > :last-child {
-    margin-bottom: 0 !important;
-  }
+.root > :last-child {
+  margin-bottom: 0;
 }
diff --git a/components/input/style.scss b/components/input/style.scss
@@ -44,7 +44,7 @@
       color: $input-text-highlight-color;
     }
   }
-  &:focus, &.filled, &[type='date'], &[type='time']{
+  &:focus, &.filled, &[type='date'], &[type='time'] {
     ~ .label:not(.fixed) {
       top: $input-focus-label-top;
       font-size: $input-label-font-size;

diff --git a/components/overlay/index.jsx b/components/overlay/index.jsx
@@ -36,7 +36,7 @@ class Overlay extends React.Component {
     const overlayStyle = {};
 
     if (this.props.active) {
-      if (this.props.opacity > 0) className += ` ${style.active}`;
+      className += ` ${style.active}`;
       overlayStyle.opacity = this.props.opacity;
     }
     if (this.props.className) className += ` ${className}`;

diff --git a/components/progress_bar/style.scss b/components/progress_bar/style.scss
@@ -8,7 +8,6 @@
   height: $progress-height;
   overflow: hidden;
   background: $color-divider;
-
   &.indeterminate .value {
     transform-origin: center center;
     animation: linear-indeterminate-bar 1s linear infinite;
@@ -33,7 +32,7 @@
 
 .buffer {
   background-image: linear-gradient(to right, $progress-secondary-color, $progress-secondary-color),
-                      linear-gradient(to right, $progress-main-color, $progress-main-color);
+  linear-gradient(to right, $progress-main-color, $progress-main-color);
 }
 
 .circular {
@@ -42,21 +41,19 @@
   width: $circle-wrapper-width * 1px;
   height: $circle-wrapper-width * 1px;
   transform: rotate(-90deg);
-
   &.indeterminate {
     .circle {
       animation: circular-indeterminate-bar-rotate 2s linear infinite;
     }
-
     .path {
       animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite;
+
       stroke-dasharray: $scale-ratio * 1, $scale-ratio * 200;
       stroke-dashoffset: 0;
     }
-
     &.multicolor .path {
       animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite,
-                       colors (1.5s * 4) ease-in-out infinite;
+      colors (1.5s * 4) ease-in-out infinite;
     }
   }
 }
@@ -68,13 +65,14 @@
 
 .path {
   transition: stroke-dasharray $animation-duration $animation-curve-default;
+  fill: none;
+
   stroke-dasharray: 0, $scale-ratio * 200;
   stroke-dashoffset: 0;
   stroke-linecap: round;
   stroke-miterlimit: 20;
   stroke-width: 4;
   stroke: $progress-main-color;
-  fill: none;
 }
 
 @keyframes linear-indeterminate-bar {

diff --git a/components/snackbar/_config.scss b/components/snackbar/_config.scss
@@ -1,6 +1,9 @@
+$snackbar-color-cancel: unquote("rgb(#{$palette-red-500})") !default;
+$snackbar-color-accept: unquote("rgb(#{$palette-green-500})") !default;
+$snackbar-color-warning: unquote("rgb(#{$palette-lime-a200})") !default;
 $snackbar-background-color: $color-text !default;
-$snackbar-border-radius: .2 * $unit;
-$snackbar-button-offset: 4.8 * $unit;
+$snackbar-border-radius: .2 * $unit !default;
+$snackbar-button-offset: 4.8 * $unit !default;
 $snackbar-color: unquote("rgb(#{$color-white})") !default;
-$snackbar-horizontal-offset: 2.4 * $unit;
-$snackbar-vertical-offset: 1.4 * $unit;
+$snackbar-horizontal-offset: 2.4 * $unit !default;
+$snackbar-vertical-offset: 1.4 * $unit !default;
diff --git a/components/snackbar/style.scss b/components/snackbar/style.scss
@@ -1,29 +1,30 @@
 @import "../base";
 @import "./config";
 
+
 .root {
-  z-index: $z-index-higher;
   position: fixed;
+  right: $snackbar-horizontal-offset;
   bottom: 0;
   left: $snackbar-horizontal-offset;
-  right: $snackbar-horizontal-offset;
-  margin: 0 auto;
+  z-index: $z-index-higher;
   display: flex;
   align-items: center;
   padding: $snackbar-vertical-offset $snackbar-horizontal-offset;
+  margin: 0 auto;
   margin-top: $snackbar-vertical-offset;
   color: $snackbar-color;
   background-color: $snackbar-background-color;
   border-radius: $snackbar-border-radius;
   transition: all $animation-duration $animation-curve-default $animation-duration;
   &.accept .button {
-    color: green;
+    color: $snackbar-color-accept;
   }
   &.warning .button {
-    color: orange;
+    color: $snackbar-color-warning;
   }
   &.cancel .button {
-    color: red;
+    color: $snackbar-color-cancel;
   }
   &:not(.active) {
     transform: translateY(100%);
@@ -45,11 +46,7 @@
 .button {
   min-width: inherit;
   margin-top: - $snackbar-vertical-offset / 2;
-  margin-bottom: - $snackbar-vertical-offset / 2;
   margin-right: - $snackbar-horizontal-offset / 2;
+  margin-bottom: - $snackbar-vertical-offset / 2;
   margin-left: $snackbar-button-offset;
-  color: white;
-  > abbr {
-    line-height: inherit;
-  }
 }
diff --git a/package.json b/package.json
@@ -19,7 +19,7 @@
   "main": "./lib",
   "scripts": {
     "start": "cross-env NODE_ENV=development UV_THREADPOOL_SIZE=100 node ./server",
-    "lint": "eslint ./ --ext .js,.jsx",
+    "lint": "eslint ./ --ext .js,.jsx && scss-lint",
     "babel": "babel ./components --out-dir ./lib",
     "sass": "cpx './components/**/*.scss' ./lib",
     "build": "cross-env NODE_ENV=production npm run babel && npm run sass",

diff --git a/spec/components/snackbar.jsx b/spec/components/snackbar.jsx
@@ -29,14 +29,14 @@ class SnackbarTest extends React.Component {
         <p>lorem ipsum...</p>
         <Button label='Show snackbar' primary raised onClick={this.handleClick} />
         <Snackbar
-          action='Dismiss'
+          action='Hide'
           active={this.state.active}
           icon='question-answer'
           label='Snackbar action cancel'
           timeout={2}
           onClick={this.handleSnackbarClick}
           onTimeout={this.handleSnackbarTimeout}
-          type='cancel'
+          type='warning'
         />
       </section>
     );