Add stylelint

.stylelintrc

@@ -0,0 +1,14 @@
+{
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-property-sort-order-smacss"
+  ],
+  "rules": {
+    "selector-pseudo-element-colon-notation": "double",
+    "color-hex-case": "upper",
+    "declaration-empty-line-before": null,
+    "block-no-empty": true,
+    "shorthand-property-no-redundant-values": true,
+    "custom-property-empty-line-before": null
+  }
+}

package.json

@@ -20,10 +20,13 @@
     "postcss-cli": "^2.6.0",
     "postcss-cssnext": "^2.9.0",
     "postcss-import": "^9.0.0",
-    "postcss-reporter": "^3.0.0"
+    "postcss-reporter": "^3.0.0",
+    "stylelint-config-property-sort-order-smacss": "^2.0.0",
+    "stylelint-config-standard": "^18.0.0"
   },
   "scripts": {
-    "build": "postcss -c postcss.config.js"
+    "build": "postcss -c postcss.config.js",
+    "lint": "stylelint './src/**/*.css'"
   },
   "keywords": [
     "library",

src/components/boxes.css

@@ -1,10 +1,10 @@
 .CDB-Box-modal {
+  box-sizing: border-box;
   min-width: 160px;
   border: 1px solid var(--color-line);
   border-radius: 4px;
   background: white;
   box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.16);
-  box-sizing: border-box;
 }
 
 .CDB-Box-modalHeader {

src/components/buttons.css

@@ -1,10 +1,10 @@
 .CDB-Button {
   position: relative;
+  box-sizing: border-box;
   padding: 8px 20px;
   transition: background 300ms;
   border-radius: 4px;
   cursor: pointer;
-  box-sizing: border-box;
 
 
   .CDB-Button-Text {
@@ -20,12 +20,12 @@
 .CDB-Button--loading {
   .CDB-Button-loader {
     position: absolute;
+    z-index: 10;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) scale(0);
     transform-origin: 50%;
     opacity: 0;
-    z-index: 10;
   }
 
   .CDB-Button-Text {
@@ -52,6 +52,7 @@
     transform: translate(-50%, -50%) scale(0);
     opacity: 0;
   }
+
   100% {
     transform: translate(-50%, -50%) scale(1);
     opacity: 1;
@@ -154,8 +155,8 @@
 
 
 .CDB-Button--secondary {
-  color: var(--color-blue);
   box-shadow: inset 0 0 0 1px var(--color-blue);
+  color: var(--color-blue);
 
   &:hover {
     background: rgba(var(--color-blue), 0.08);
@@ -194,8 +195,8 @@
 }
 
 .CDB-Button--white {
-  color: white;
   box-shadow: inset 0 0 0 1px white;
+  color: white;
 
   &:hover {
     background: rgba(white, 0.08);

src/components/forms/checkbox.css

@@ -1,33 +1,33 @@
 .CDB-Checkbox {
   position: absolute;
+  z-index: 1;
   width: 16px;
   height: 16px;
   opacity: 0;
   vertical-align: middle;
-  z-index: 1;
 }
 
 .CDB-Checkbox-face {
   position: relative;
+  z-index: 2;
+  box-sizing: border-box;
   width: 16px;
   height: 16px;
   border: 1px solid var(--color-line);
   border-radius: 3px;
   background: white;
   cursor: pointer;
-  box-sizing: border-box;
-  z-index: 2;
   pointer-events: none;
 
   &::before,
   &::after {
+    content: '';
     display: block;
     position: absolute;
     bottom: 3px;
     width: 2px;
     border-radius: 1px;
     background: white;
-    content: '';
   }
 
   &::before {
@@ -71,6 +71,7 @@
     background: var(--color-line-hover);
   }
 }
+
 .CDB-Checkbox:active + .CDB-Checkbox-face {
   border: 1px solid var(--color-blue);
 

src/components/forms/dropdowns.css

@@ -37,12 +37,12 @@
 }
 
 .CDB-Dropdown-optionsElement {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   padding: 12px 10px;
+  overflow: hidden;
   border-bottom: 1px solid var(--color-line);
   color: var(--color-blue);
+  text-overflow: ellipsis;
+  white-space: nowrap;
 
   &:last-child {
     border-bottom: 0;

src/components/forms/inputs.css

@@ -1,4 +1,5 @@
 .CDB-InputText {
+  box-sizing: border-box;
   width: 100%;
   min-height: 32px;
   padding: 7px 8px;
@@ -6,7 +7,6 @@
   border-radius: 4px;
   font-size: var(--font-size-medium);
   line-height: var(--line-height-medium);
-  box-sizing: border-box;
 
   &.is-cursor {
     cursor: pointer;
@@ -53,12 +53,12 @@
 }
 
 .CDB-InputTextPlain {
+  box-sizing: border-box;
   width: 100%;
   border: 0;
   background: transparent;
   font-size: var(--font-size-medium);
   line-height: var(--line-height-medium);
-  box-sizing: border-box;
 }
 
 .CDB-FieldError .CDB-InputText {

src/components/forms/option-input.css

@@ -78,11 +78,11 @@
     &.is-active::after,
     &:focus::after,
     &:hover::after {
+      content: '';
       position: absolute;
       left: -1px;
       width: 1px;
       height: calc(100% + 2px);
-      content: '';
     }
 
     &:hover::after {

src/components/forms/radio.css

@@ -1,14 +1,15 @@
 .CDB-Radio {
   position: absolute;
+  z-index: 1;
   width: 16px;
   height: 16px;
   opacity: 0;
   vertical-align: middle;
-  z-index: 1;
 }
 
 .CDB-Radio-face {
   position: relative;
+  box-sizing: border-box;
   width: 16px;
   height: 16px;
   border: 1px solid var(--color-line);
@@ -16,9 +17,9 @@
   background: white;
   text-indent: 20px;
   cursor: pointer;
-  box-sizing: border-box;
 
   &::before {
+    content: '';
     position: absolute;
     top: 50%;
     left: 50%;
@@ -28,7 +29,6 @@
     margin-left: -3px;
     border-radius: 50%;
     background: white;
-    content: '';
   }
 }
 

src/components/forms/selects.css

@@ -8,8 +8,7 @@
 }
 
 .CDB-SelectFake {
-  -webkit-appearance: none;
+  box-sizing: border-box;
-  appearance: none;
   width: 100%;
   padding: 7px 8px 6px;
   border: 1px solid var(--color-line);
@@ -17,7 +16,8 @@
   background: white;
   font-size: var(--font-size-medium);
   line-height: var(--line-height-medium);
-  box-sizing: border-box;
+  -webkit-appearance: none;
+  appearance: none;
 
   &:hover {
     border: 1px solid var(--color-line-hover);

src/components/forms/textarea.css

@@ -1,11 +1,11 @@
 .CDB-Textarea {
+  box-sizing: border-box;
   width: 100%;
   padding: 7px 8px 6px;
   border: 1px solid var(--color-line);
   border-radius: 4px;
   font-size: var(--font-size-medium);
   line-height: var(--line-height-medium);
-  box-sizing: border-box;
 
   &:hover {
     border: 1px solid var(--color-line-hover);

src/components/forms/toggle.css

@@ -1,9 +1,9 @@
 .CDB-Toggle {
   position: absolute;
+  z-index: 1;
   width: 32px;
   height: 16px;
   opacity: 0;
-  z-index: 1;
 
   &:hover {
     + .CDB-ToggleFace {
@@ -25,6 +25,7 @@
     background: var(--color-text-alt);
 
     &::before {
+      content: '';
       position: absolute;
       top: 2px;
       left: 2px;
@@ -33,7 +34,6 @@
       border-radius: 50%;
       background: white;
       box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.48);
-      content: '';
     }
   }
 

src/components/headers.css

@@ -34,9 +34,9 @@
   flex: 1;
   width: 0;
   padding-right: 16px;
+  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  overflow: hidden;
 }
 
 .CDB-HeaderInfo-actionsItem {
@@ -46,6 +46,7 @@
 }
 
 .CDB-HeaderNumeration {
+  box-sizing: border-box;
   width: 24px;
   min-width: 24px;
   height: 24px;
@@ -56,5 +57,4 @@
   font-size: var(--font-size-small);
   line-height: 23px;
   text-align: center;
-  box-sizing: border-box;
 }

src/components/loader.css

@@ -1,12 +1,12 @@
 .CDB-Loader {
   position: absolute;
+  z-index: 2;
   top: 0;
   left: 0;
   width: 50%;
   height: 3px;
   transform: translateX(-200%);
   background-image: linear-gradient(90deg, rgba(var(--color-blue), 1) 0%, #32BBFE 90%, #FAFEFF 95%);
-  z-index: 2;
 }
 
 .CDB-Loader.is-visible {
@@ -17,6 +17,7 @@
   from {
     transform: translateX(-200%);
   }
+
   to {
     transform: translateX(200%);
   }
@@ -28,9 +29,9 @@
 }
 
 .CDB-LoaderIcon-spinner {
-  animation: rotate 2s linear infinite;
   width: 16px;
   height: 16px;
+  animation: rotate 2s linear infinite;
 }
 
 .CDB-LoaderIcon--small,
@@ -46,10 +47,10 @@
 }
 
 .CDB-LoaderIcon-path {
-  stroke: rgba(255, 255, 255, 0.88);
-  stroke-linecap: round;
   animation: dash 1.5s ease-in-out infinite;
   stroke-width: 4px;
+  stroke-linecap: round;
+  stroke: rgba(255, 255, 255, 0.88);
 }
 
 .CDB-LoaderIcon--big .CDB-LoaderIcon-path {
@@ -59,6 +60,7 @@
 .CDB-LoaderIcon.is-dark .CDB-LoaderIcon-path {
   stroke: rgba(0, 0, 0, 0.24);
 }
+
 .CDB-LoaderIcon.is-blue .CDB-LoaderIcon-path {
   stroke: var(--color-blue);
 }
@@ -74,10 +76,12 @@
     stroke-dasharray: 1, 150;
     stroke-dashoffset: 0;
   }
+
   50% {
     stroke-dasharray: 90, 150;
     stroke-dashoffset: -35;
   }
+
   100% {
     stroke-dasharray: 90, 150;
     stroke-dashoffset: -124;

src/components/menu.css

@@ -48,9 +48,9 @@
 }
 
 .CDB-NavMenu-item.is-disabled .CDB-NavMenu-link {
-  pointer-events: none;
   color: var(--color-text-alt);
   cursor: default;
+  pointer-events: none;
 }
 
 .CDB-NavSubmenu {
@@ -110,9 +110,9 @@
   }
 
   .CDB-NavSubmenu-item.is-disabled .CDB-NavMenu-link {
-    pointer-events: none;
-    cursor: default;
     opacity: 0.24;
+    cursor: default;
+    pointer-events: none;
   }
 
   .CDB-NavMenu-item.is-selected .CDB-NavMenu-link {

src/components/shapes/add.css

@@ -18,6 +18,7 @@
   height: 100%;
 
   &::before {
+    content: '';
     display: block;
     position: absolute;
     right: 1px;
@@ -25,10 +26,10 @@
     left: 0;
     height: 1px;
     background: var(--color-black);
-    content: '';
   }
 
   &::after {
+    content: '';
     display: block;
     position: absolute;
     top: 1;
@@ -36,12 +37,12 @@
     left: 7px;
     width: 1px;
     background: var(--color-black);
-    content: '';
   }
 }
 
 .CDB-Shape-add.is-small {
   &::before {
+    content: '';
     display: block;
     position: absolute;
     right: 3px;
@@ -49,10 +50,10 @@
     left: 4px;
     height: 1px;
     background: var(--color-black);
-    content: '';
   }
 
   &::after {
+    content: '';
     display: block;
     position: absolute;
     top: 4px;
@@ -60,7 +61,6 @@
     left: 8px;
     width: 1px;
     background: var(--color-black);
-    content: '';
   }
 }
 

src/components/shapes/arrow.css

@@ -5,6 +5,7 @@
   background: var(--color-black);
 
   &::before {
+    content: '';
     display: block;
     position: absolute;
     top: 2px;
@@ -13,10 +14,10 @@
     height: 1px;
     transform: rotate(45deg);
     background: var(--color-black);
-    content: '';
   }
 
   &::after {
+    content: '';
     display: block;
     position: absolute;
     top: 2px;
@@ -25,7 +26,6 @@
     height: 1px;
     transform: rotate(-45deg);
     background: var(--color-black);
-    content: '';
   }
 
   &.is-up {

src/components/shapes/check-circle.css

@@ -25,21 +25,21 @@
   height: 100%;
 
   &::before {
+    content: '';
     display: block;
     position: absolute;
     width: 1px;
     transform: rotate(-45deg);
     background: var(--color-black);
-    content: '';
   }
 
   &::after {
+    content: '';
     display: block;
     position: absolute;
     width: 1px;
     transform: rotate(45deg);
     background: var(--color-black);
-    content: '';
   }
 
   &.is-medium {
@@ -95,6 +95,7 @@
   &::before {
     background: var(--color-highlight);
   }
+
   &::after {
     background: var(--color-highlight);
   }

src/components/shapes/close.css

@@ -4,21 +4,21 @@
   height: 100%;
 
   &::before {
+    content: '';
     display: block;
     position: absolute;
     width: 1px;
     transform: rotate(-45deg);
     background: var(--color-black);
-    content: '';
   }
 
   &::after {
+    content: '';
     display: block;
     position: absolute;
     width: 1px;
     transform: rotate(45deg);
     background: var(--color-black);
-    content: '';
   }
 
   &.is-huge {

src/components/shapes/dash.css

@@ -3,6 +3,7 @@
   height: 100%;
 
   &::before {
+    content: '';
     display: block;
     position: absolute;
     right: 2px;
@@ -10,7 +11,6 @@
     left: 2px;
     height: 1px;
     background: var(--color-black);
-    content: '';
   }
 }
 

src/components/shapes/dataset.css

@@ -17,9 +17,9 @@
 
   &:first-child {
     position: relative;
+    z-index: 1;
     margin-left: 0;
     box-shadow: 3px 0 0 white;
-    z-index: 1;
   }
 }
 
@@ -52,6 +52,7 @@
   .CDB-Shape-DatasetItem {
     border: 1px solid var(--color-line-hover);
     background: var(--color-black);
+
     &:first-child {
       box-shadow: 3px 0 var(--color-black);
     }

src/components/shapes/hamburguer.css

@@ -1,5 +1,6 @@
 .CDB-Shape-hamburguer {
   width: 16px;
+
   &:hover {
     cursor: pointer;
   }

src/components/shapes/magnify.css

@@ -4,6 +4,7 @@
   height: 100%;
 
   &::before {
+    content: '';
     display: block;
     position: absolute;
     top: 0;
@@ -12,10 +13,10 @@
     height: 11px;
     border: 1px solid var(--color-black);
     border-radius: 50%;
-    content: '';
   }
 
   &::after {
+    content: '';
     display: block;
     position: absolute;
     right: 2px;
@@ -24,7 +25,6 @@
     height: 7px;
     transform: rotate(314deg);
     background: var(--color-black);
-    content: '';
   }
 }
 
@@ -42,6 +42,7 @@
   &::before {
     border: 1px solid white;
   }
+
   &::after {
     background: white;
   }
@@ -56,6 +57,7 @@
   }
 
   &::after {
+    content: '';
     display: block;
     position: absolute;
     right: 4px;
@@ -63,6 +65,5 @@
     width: 1px;
     height: 5px;
     transform: rotate(314deg);
-    content: '';
   }
 }

src/components/shapes/move.css

@@ -15,6 +15,7 @@
       width: 2px;
       height: 2px;
     }
+
     &::after {
       width: 2px;
       height: 2px;
@@ -29,24 +30,25 @@
   &:last-child {
     margin-bottom: 0;
   }
+
   &::before {
+    content: '';
     display: block;
     position: absolute;
     left: 4px;
     width: 3px;
     height: 3px;
     background: var(--color-black);
-    content: '';
   }
 
   &::after {
+    content: '';
     display: block;
     position: absolute;
     left: 9px;
     width: 3px;
     height: 3px;
     background: var(--color-black);
-    content: '';
   }
 }
 

src/components/shapes/threePoints.css

@@ -4,8 +4,8 @@
 }
 
 .CDB-Shape-threePoints.is-horizontal {
-  transform: rotate(90deg);
   padding: 4px 0;
+  transform: rotate(90deg);
 }
 
 .CDB-Shape-threePointsItem {

src/components/shapes/toogle-arrow.css

@@ -3,6 +3,7 @@
   height: 100%;
 
   &::before {
+    content: '';
     display: block;
     position: absolute;
     top: 8px;
@@ -11,10 +12,10 @@
     height: 1px;
     transform: rotate(-45deg);
     background: var(--color-black);
-    content: '';
   }
 
   &::after {
+    content: '';
     display: block;
     position: absolute;
     top: 8px;
@@ -23,7 +24,6 @@
     height: 1px;
     transform: rotate(45deg);
     background: var(--color-black);
-    content: '';
   }
 }
 
@@ -36,6 +36,7 @@
     left: 2px;
     width: 8px;
   }
+
   &::after {
     right: 1px;
     width: 8px;
@@ -46,6 +47,7 @@
   &::before {
     background: var(--color-blue);
   }
+
   &::after {
     background: var(--color-blue);
   }
@@ -55,6 +57,7 @@
   &::before {
     background: white;
   }
+
   &::after {
     background: white;
   }

src/components/shapes/type.css

@@ -53,6 +53,7 @@
 }
 
 .CDB-Type--polygon::before {
+  content: '';
   display: block;
   position: absolute;
   top: 1px;
@@ -60,10 +61,10 @@
   bottom: 1px;
   left: 1px;
   border: 1px solid var(--color-line-hover);
-  content: '';
 }
 
 .CDB-Type--line::before {
+  content: '';
   display: block;
   position: absolute;
   top: 0;
@@ -73,5 +74,4 @@
   width: 1px;
   transform: rotate(45deg);
   background: var(--color-line-hover);
-  content: '';
 }

src/components/tooltips.css

@@ -7,12 +7,12 @@
 }
 
 .CDB-InfoTooltip::after {
+  content: '';
   display: block;
   position: absolute;
   width: 0;
   height: 0;
   border: 4px solid transparent;
-  content: '';
 }
 
 .is-black {

src/entry.css

@@ -1,10 +1,8 @@
 @import 'variables/sizes';
 @import 'variables/colors';
-
 @import 'utilities/defaults';
 @import 'utilities/fonts';
 @import 'utilities/helpers';
-
 @import 'components/forms/checkbox';
 @import 'components/forms/dropdowns';
 @import 'components/forms/inputs';
@@ -15,7 +13,6 @@
 @import 'components/forms/tabsForms';
 @import 'components/forms/textarea';
 @import 'components/forms/toggle';
-
 @import 'components/shapes/add';
 @import 'components/shapes/arrow';
 @import 'components/shapes/check-circle';
@@ -31,7 +28,6 @@
 @import 'components/shapes/threePoints';
 @import 'components/shapes/toogle-arrow';
 @import 'components/shapes/type';
-
 @import 'components/avatars';
 @import 'components/boxes';
 @import 'components/buttons';

src/utilities/fonts.css

@@ -4,8 +4,8 @@
   font-weight: 300;
   src: url('../fonts/OpenSans-Light.eot');
   src: url('../fonts/OpenSans-Light.eot?#iefix') format('embedded-opentype'),
-  url('../fonts/OpenSans-Light.woff') format('woff'),
+    url('../fonts/OpenSans-Light.woff') format('woff'),
-  url('../fonts/OpenSans-Light.ttf') format('truetype');
+    url('../fonts/OpenSans-Light.ttf') format('truetype');
 }
 
 @font-face {
@@ -14,8 +14,8 @@
   font-weight: 400;
   src: url('../fonts/OpenSans-Regular.eot');
   src: url('../fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
-  url('../fonts/OpenSans-Regular.woff') format('woff'),
+    url('../fonts/OpenSans-Regular.woff') format('woff'),
-  url('../fonts/OpenSans-Regular.ttf') format('truetype');
+    url('../fonts/OpenSans-Regular.ttf') format('truetype');
 }
 
 @font-face {
@@ -24,6 +24,6 @@
   font-weight: 600;
   src: url('../fonts/OpenSans-Semibold.eot');
   src: url('../fonts/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),
-  url('../fonts/OpenSans-Semibold.woff') format('woff'),
+    url('../fonts/OpenSans-Semibold.woff') format('woff'),
-  url('../fonts/OpenSans-Semibold.ttf') format('truetype');
+    url('../fonts/OpenSans-Semibold.ttf') format('truetype');
 }

src/utilities/helpers.css

@@ -119,9 +119,9 @@
 /* -- DECORATION */
 
 .u-ellipsis {
+  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  overflow: hidden;
 }
 
 .u-upperCase {
@@ -168,6 +168,7 @@
   .u-showDesktop {
     display: none !important;
   }
+
   .u-showMobile {
     display: block !important;
   }

src/vendor/reset.css

@@ -23,37 +23,45 @@ time, mark, audio, video {
   font-size: 100%;
   vertical-align: baseline;
 }
+
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
   display: block;
 }
+
 body {
   line-height: 1;
 }
+
 ol, ul {
   list-style: none;
 }
+
 blockquote, q {
   quotes: none;
 }
+
 blockquote:before, blockquote:after,
 q:before, q:after {
   content: '';
 }
+
 table {
-  border-collapse: collapse;
   border-spacing: 0;
+  border-collapse: collapse;
 }
+
 // Resetting buttons too
 button {
+  box-sizing: border-box;
   margin: 0;
   padding: 0;
   border: none;
-  background: transparent;
-  box-sizing: border-box;
   outline: none;
+  background: transparent;
 }
+
 dd, dt {
   display: inline-block;
 }