Test stylelint travis

Add disabled state to dashed button

.gitignore

@@ -0,0 +1,7 @@
+.DS_Store
+node_modules
+npm-debug.log
+.tmp
+dist
+.grunt
+styleguide/index.html

.stylelintrc

@@ -0,0 +1,18 @@
+{
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-property-sort-order-smacss"
+  ],
+  "ignoreFiles": [
+    "src/vendor/reset.css",
+  ],
+  "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,
+    "no-descending-specificity": null
+  }
+}

.travis.yml

@@ -0,0 +1,9 @@
+language: node_js
+node_js:
+  - 6.9.2
+notifications:
+  email:
+    on_success: never
+    on_failure: change
+cache:
+  yarn: true

LICENSE.md

@@ -0,0 +1,22 @@
+Copyright (c) 2017 CARTO
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,46 @@
+# CartoAssets [![NPM version](http://img.shields.io/npm/v/cartoassets.svg)](https://www.npmjs.org/package/cartoassets)
+
+> Share frontend assets between different CartoDB repositories
+
+### Installation
+As easy as:
+- ```npm install --global grunt-cli``` [Grunt installation](http://gruntjs.com/getting-started)
+- ```npm install --global gulp-cli``` [Gulp installation](https://github.com/gulpjs/gulp)
+- ```npm install -g markdown-styleguide-generator``` [StyleGenerator installation](https://www.npmjs.com/package/markdown-styleguide-generator#install)
+- ```npm install```
+
+### Build
+If you want to use any of the CartoAssets components, after the installation just run:
+- ```grunt build```
+
+### Development
+It will generate a UI documentation about the components in this repository:
+- ```grunt dev```
+
+If you want to check the documenation, it is generated in the ```dist``` folder.
+
+### How to add/update the icon font
+
+See this [instructions](https://github.com/CartoDB/CartoAssets/blob/master/Icon-Fonting.md)
+
+### Publish a new version in NPM
+In order to publish a new version of CartoAssets you need to:
+
+- Change version of the package.
+- Be a collaborator of the [npm module](https://www.npmjs.com/cartoassets) (Send an email to xavijam[at]cartodb.com).
+
+If you have these previous steps done:
+
+- ```npm publish```
+
+### Publish CartoAssets styleguide and documentation in GH-Pages
+Just run this command:
+
+- ```grunt publish```
+
+
+### Browser support
+
+![Chrome](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.3.0/archive/chrome_12-48/chrome_12-48_48x48.png) | ![Firefox](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.3.0/archive/firefox_1.5-3/firefox_1.5-3_48x48.png) | ![IE](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.3.0/edge-tile/edge-tile_48x48.png) | ![Opera](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.3.0/opera/opera_48x48.png) | ![Safari](https://cdnjs.cloudflare.com/ajax/libs/browser-logos/39.3.0/safari/safari_48x48.png)
+--- | --- | --- | --- | --- |
+31+ ✔ | 38+ ✔ | 11+ ✔ | 31+ ✔ | 8+ ✔ |

package.json

@@ -0,0 +1,43 @@
+{
+  "name": "cartoassets",
+  "description": "Share frontend assets between different CARTO repositories",
+  "version": "2.0.0-alpha",
+  "homepage": "https://github.com/cartodb/CartoAssets",
+  "author": {
+    "name": "CARTO",
+    "email": "frontend@carto.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/cartodb/CartoAssets.git"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "cssnano": "^3.10.0",
+    "perfect-scrollbar": "git://github.com/CartoDB/perfect-scrollbar.git#master",
+    "postcss": "^5.2.8",
+    "postcss-browser-reporter": "^0.5.0",
+    "postcss-cli": "^2.6.0",
+    "postcss-cssnext": "^2.9.0",
+    "postcss-import": "^9.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",
+    "test": "npm run lint",
+    "lint": "stylelint './src/**/*.css'"
+  },
+  "keywords": [
+    "library",
+    "CARTO",
+    "share",
+    "assets",
+    "styleguide",
+    "shared components"
+  ],
+  "dependencies": {
+    "normalize.css": "^7.0.0"
+  }
+}

postcss.config.js

@@ -0,0 +1,24 @@
+const POSTCSS = {
+  'input': 'src/entry.css',
+  'output': 'dist/carto_assets.css',
+  'use': [
+    'postcss-import',
+    'postcss-cssnext'
+  ],
+  'postcss-import': {
+    path: ['src']
+  },
+  'cssnano': {
+    safe: true,
+    autoprefixer: false //handled by postcss-cssnext
+  },
+  'local-plugins': true,
+  'map': 'file'
+}
+
+if (process.env.NODE_ENV === 'production') {
+  POSTCSS.use.push('cssnano'); // add cssnano in production
+  POSTCSS.map = false; //sourcemaps to external file
+}
+
+module.exports = POSTCSS;

src/components/avatars.css

@@ -0,0 +1,26 @@
+.CDB-AvatarList {
+  padding-left: 12px;
+}
+
+.CDB-AvatarList-item {
+  display: inline-block;
+  margin-left: -12px;
+  border: 2px solid white;
+  border-radius: 50%;
+  vertical-align: middle;
+}
+
+.CDB-AvatarList-itemMore {
+  display: inline-block;
+  margin-left: -12px;
+  padding: 2px 6px;
+  border-left: 2px solid white;
+  border-radius: 50px;
+  background: var(--color-line-hover);
+}
+
+.CDB-AvatarList-itemMedia {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+}

src/components/boxes.css

@@ -0,0 +1,30 @@
+.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);
+}
+
+.CDB-Box-modalHeader {
+  background: var(--color-bg-secondary);
+}
+
+.CDB-Box-modalHeaderItem {
+  display: flex;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--color-line);
+}
+
+.CDB-Box-modalHeaderItem--block {
+  display: block;
+}
+
+.CDB-Box-modalHeaderItem--paddingHorizontal {
+  padding: 0 16px;
+}
+
+.CDB-Box-modalHeaderItem--paddingVertical {
+  padding: 12px 0;
+}

src/components/buttons.css

@@ -0,0 +1,230 @@
+.CDB-Button {
+  position: relative;
+  box-sizing: border-box;
+  padding: 8px 20px;
+  transition: background 300ms;
+  border-radius: 4px;
+  cursor: pointer;
+
+  .CDB-Button-Text {
+    display: block;
+  }
+
+  &.is-disabled {
+    opacity: 0.24;
+    cursor: default;
+  }
+}
+
+.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;
+  }
+
+  .CDB-Button-Text {
+    transition: all 600ms;
+  }
+
+  &.is-loading {
+    cursor: default;
+
+    .CDB-Button-loader {
+      animation-name: showIn;
+      animation-duration: 600ms;
+      animation-fill-mode: forwards;
+    }
+
+    .CDB-Button-Text {
+      opacity: 0;
+    }
+  }
+}
+
+@keyframes showIn {
+  0% {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+  }
+
+  100% {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+  }
+}
+
+.CDB-Button--small {
+  padding: 4px 12px;
+  border-radius: 3px;
+}
+
+.CDB-Button--big {
+  padding: 11px 20px;
+}
+
+.CDB-Button--wide {
+  width: 100%;
+}
+
+.CDB-Button--icon {
+  padding: 7px 9px;
+}
+
+.CDB-Button--primary {
+  background: var(--color-blue);
+  color: white;
+
+  &:hover,
+  &:active {
+    background: var(--color-blue-hover);
+  }
+
+  &.is-loading {
+    &:hover,
+    &:active {
+      background: var(--color-blue);
+    }
+  }
+
+  &.is-disabled {
+    &:hover,
+    &:active {
+      background: var(--color-blue);
+    }
+  }
+}
+
+.CDB-Button--alert {
+  background: var(--color-alert);
+  color: white;
+
+  &:hover,
+  &:active {
+    background: color(var(--color-alert) shade(8%));
+  }
+
+  &.is-disabled {
+    &:hover,
+    &:active {
+      background: var(--color-alert);
+    }
+  }
+}
+
+.CDB-Button--error,
+.CDB-Button--negative {
+  background: var(--color-error);
+  color: white;
+
+  &:hover,
+  &:active {
+    background: color(var(--color-error) shade(8%));
+  }
+
+  &.is-disabled {
+    &:hover,
+    &:active {
+      background: var(--color-error);
+    }
+  }
+}
+
+.CDB-Button--dashed {
+  padding: 13px 0;
+  border: 1px dashed var(--color-text-alt);
+  color: var(--color-blue);
+
+  &:hover {
+    border-color: var(--color-blue);
+  }
+
+  &.is-disabled {
+    &:hover {
+      border-color: var(--color-text-alt);
+    }
+  }
+}
+
+.CDB-Button--secondary {
+  box-shadow: inset 0 0 0 1px var(--color-blue);
+  color: var(--color-blue);
+
+  &:hover {
+    background: rgba(var(--color-blue), 0.08);
+    box-shadow: inset 0 0 0 2px var(--color-blue-hover);
+  }
+
+  &:active {
+    background: var(--color-blue);
+    color: white;
+  }
+
+  &.is-disabled {
+    &:hover {
+      background: transparent;
+      box-shadow: inset 0 0 0 1px var(--color-blue);
+    }
+
+    &:active {
+      background: transparent;
+    }
+  }
+
+  &.is-loading {
+    cursor: default;
+
+    &:hover,
+    &:active {
+      background: none;
+      color: var(--color-blue);
+    }
+  }
+
+  &--background {
+    background-color: white;
+  }
+}
+
+.CDB-Button--white {
+  box-shadow: inset 0 0 0 1px white;
+  color: white;
+
+  &:hover {
+    background: rgba(white, 0.08);
+    box-shadow: inset 0 0 0 2px color(white shade(8%));
+  }
+
+  &:active {
+    background: color(var(--color-text-primary) alpha(0.8%));
+    color: white;
+  }
+
+  &.is-disabled {
+    opacity: 0.24;
+
+    &:hover {
+      background: transparent;
+      box-shadow: inset 0 0 0 1px white;
+    }
+
+    &:active {
+      background: transparent;
+      color: white;
+    }
+  }
+
+  &.is-loading {
+    cursor: default;
+
+    &:hover,
+    &:active {
+      background: none;
+      color: white;
+    }
+  }
+}

src/components/colors.css

@@ -0,0 +1,76 @@
+.Color-Blue {
+  background: var(--color-blue);
+}
+
+.Color-White {
+  border: 1px solid #E5E5E5;
+  background: white;
+}
+
+.Color-Dark {
+  background: #000;
+}
+
+.Color-MainDark {
+  background: var(--color-black);
+}
+
+.Color-SecondaryDark {
+  background: #282C2F;
+}
+
+.Color-SecondaryBackground {
+  background: var(--color-bg-secondary);
+}
+
+.Color-ThirdBackground {
+  background: var(--color-softgray);
+}
+
+.Color-HoverLine {
+  background: var(--color-line-hover);
+}
+
+.Color-MainLine {
+  background: var(--color-line);
+}
+
+.Color-SecondaryLine {
+  background: var(--color-line-hover);
+}
+
+.Color-Type02 {
+  background: var(--color-text-secondary);
+}
+
+.Color-Type03 {
+  background: var(--color-text-alt);
+}
+
+.Color-Type04 {
+  background: var(--color-text-alt);
+}
+
+.Color-Higlight {
+  background: var(--color-highlight);
+}
+
+.Color-Alert {
+  background: var(--color-alert);
+}
+
+.Color-Public {
+  background: var(--color-public);
+}
+
+.Color-Link {
+  background: var(--color-share);
+}
+
+.Color-Password {
+  background: var(--color-password);
+}
+
+.Color-Error {
+  background: var(--color-error);
+}

src/components/forms/checkbox.css

@@ -0,0 +1,92 @@
+.CDB-Checkbox {
+  position: absolute;
+  z-index: 1;
+  width: 16px;
+  height: 16px;
+  opacity: 0;
+  vertical-align: middle;
+}
+
+.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;
+  pointer-events: none;
+
+  &::before,
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    bottom: 3px;
+    width: 2px;
+    border-radius: 1px;
+    background: white;
+  }
+
+  &::before {
+    right: 4px;
+    height: 8px;
+    transform: rotate(45deg);
+  }
+
+  &::after {
+    left: 4px;
+    height: 6px;
+    transform: rotate(-45deg);
+  }
+}
+
+.CDB-Checkbox:checked + .CDB-Checkbox-face {
+  transition: background 300ms;
+  border: 1px solid var(--color-blue);
+  background: var(--color-blue);
+
+  &::before,
+  &::after {
+    background: white;
+  }
+}
+
+.CDB-Checkbox:hover + .CDB-Checkbox-face {
+  border: 1px solid var(--color-blue-hover);
+
+  &::before,
+  &::after {
+    background: var(--color-line-hover);
+  }
+}
+
+.CDB-Checkbox:active + .CDB-Checkbox-face {
+  border: 1px solid var(--color-blue);
+
+  &::before,
+  &::after {
+    background: var(--color-blue);
+  }
+}
+
+.CDB-Checkbox:disabled + .CDB-Checkbox-face {
+  border: 1px solid var(--color-line-hover);
+  background: var(--color-softgray);
+
+  &::before,
+  &::after {
+    opacity: 0;
+  }
+}
+
+.CDB-Checkbox:checked:hover + .CDB-Checkbox-face {
+  border: 1px solid var(--color-blue);
+
+  &::before,
+  &::after {
+    background: white;
+  }
+}

src/components/forms/dropdowns.css

@@ -0,0 +1,69 @@
+.CDB-DropdownContainer {
+  position: relative;
+  height: 250px;
+}
+
+.CDB-Dropdown {
+  display: flex;
+  position: absolute;
+  top: 40px;
+  flex-direction: row;
+  max-height: 200px;
+}
+
+.CDB-Dropdown-calculations {
+  box-sizing: border-box;
+  padding: 14px;
+  border-right: 1px solid var(--color-line);
+  border-radius: 4px 0 0 4px;
+  background-color: var(--color-bg-secondary);
+}
+
+.CDB-Dropdown-calculationsElement {
+  margin-bottom: var(--line-height-medium);
+  color: var(--color-black);
+  font-size: var(--font-size-small);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.CDB-Dropdown-options {
+  width: $baseSize * 20;
+  border-radius: 0 4px 4px 0;
+  background-color: white;
+  vertical-align: top;
+}
+
+.CDB-Dropdown-optionsElement {
+  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;
+  }
+
+  &:hover {
+    background-color: rgba(var(--color-blue), 0.08);
+    color: var(--color-black);
+    cursor: pointer;
+  }
+
+  &.is-selected {
+    color: var(--color-black);
+  }
+
+  &.is-disabled {
+    color: var(--color-text-alt);
+
+    &:hover {
+      background-color: transparent;
+      cursor: default;
+    }
+  }
+}

src/components/forms/inputs.css

@@ -0,0 +1,68 @@
+.CDB-InputText {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 32px;
+  padding: 7px 8px;
+  border: 1px solid var(--color-line);
+  border-radius: 4px;
+  font-size: var(--font-size-medium);
+  line-height: var(--line-height-medium);
+
+  &.is-cursor {
+    cursor: pointer;
+  }
+
+  &.is-empty {
+    color: var(--color-text-alt);
+  }
+
+  &.is-number {
+    color: var(--color-highlight);
+  }
+
+  &.is-null {
+    color: var(--color-text-alt);
+    font-style: italic;
+  }
+
+  &:hover {
+    border: 1px solid var(--color-blue-hover);
+  }
+
+  &:focus {
+    border: 1px solid var(--color-black);
+    outline: none;
+  }
+
+  &:disabled,
+  &.is-disabled {
+    border-color: var(--color-line-hover);
+    background: var(--color-softgray);
+    cursor: default;
+  }
+
+  &.has-icon {
+    padding-right: 32px;
+  }
+
+  &.has-error {
+    border: 1px solid color(var(--color-error) alpha(0.48));
+    background: color(var(--color-error) alpha(0.04));
+    color: var(--color-error);
+  }
+}
+
+.CDB-InputTextPlain {
+  box-sizing: border-box;
+  width: 100%;
+  border: 0;
+  background: transparent;
+  font-size: var(--font-size-medium);
+  line-height: var(--line-height-medium);
+}
+
+.CDB-FieldError .CDB-InputText {
+  border: 1px solid color(var(--color-error) alpha(0.48));
+  background: color(var(--color-error) alpha(0.04));
+  color: var(--color-error);
+}

src/components/forms/legends.css

@@ -0,0 +1,16 @@
+.CDB-Legend {
+  width: 96px;
+}
+
+.CDB-Legend--big {
+  width: 192px;
+}
+
+.CDB-Fieldset {
+  display: flex;
+  align-items: ceter;
+}
+
+.CDB-Fieldset-block {
+  width: 100%;
+}

src/components/forms/option-input.css

@@ -0,0 +1,112 @@
+.CDB-OptionInput {
+  box-sizing: border-box;
+  width: 100%;
+  height: 30px;
+  border-radius: 16px;
+  vertical-align: middle;
+}
+
+.CDB-OptionInput-container {
+  display: flex;
+  align-content: center;
+  align-items: center;
+}
+
+.CDB-OptionInput-container--noMargin {
+  margin: 0;
+}
+
+.CDB-OptionInput-item {
+  display: flex;
+  position: relative;
+  box-sizing: content-box;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: var(--font-size-medium);
+
+  &.is-active,
+  &:hover,
+  &:focus {
+    cursor: pointer;
+  }
+
+  &:first-child {
+    width: auto;
+    margin-right: 8px;
+  }
+
+  &:last-child {
+    width: 100%;
+  }
+}
+
+.CDB-OptionInput-container--border .CDB-OptionInput-item {
+  border: 1px solid var(--color-line);
+
+  &:hover {
+    border: 1px solid var(--color-blue-hover);
+  }
+
+  &.is-active,
+  &:focus {
+    border: 1px solid var(--color-black);
+  }
+
+  &:first-child {
+    margin-right: 0;
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+
+    &:hover {
+      + .CDB-OptionInput-item::after {
+        content: none;
+      }
+    }
+  }
+
+  &:last-child {
+    border-radius: 4px;
+  }
+
+  + .CDB-OptionInput-item {
+    border-left: none;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+
+    &.is-active::after,
+    &:focus::after,
+    &:hover::after {
+      content: '';
+      position: absolute;
+      left: -1px;
+      width: 1px;
+      height: calc(100% + 2px);
+    }
+
+    &:hover::after {
+      background-color: var(--color-blue-hover);
+    }
+
+    &.is-active::after,
+    &:focus::after {
+      background-color: var(--color-black);
+    }
+  }
+}
+
+.CDB-OptionInput-content {
+  display: flex;
+  box-sizing: content-box;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: 0 8px;
+  color: var(--color-black);
+  white-space: nowrap;
+
+  &:hover {
+    text-decoration: none;
+  }
+}

src/components/forms/radio.css

@@ -0,0 +1,81 @@
+.CDB-Radio {
+  position: absolute;
+  z-index: 1;
+  width: 16px;
+  height: 16px;
+  opacity: 0;
+  vertical-align: middle;
+}
+
+.CDB-Radio-face {
+  position: relative;
+  box-sizing: border-box;
+  width: 16px;
+  height: 16px;
+  border: 1px solid var(--color-line);
+  border-radius: 50%;
+  background: white;
+  text-indent: 20px;
+  cursor: pointer;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 6px;
+    height: 6px;
+    margin-top: -3px;
+    margin-left: -3px;
+    border-radius: 50%;
+    background: white;
+  }
+}
+
+.CDB-Radio:checked + .CDB-Radio-face {
+  transition: background 300ms;
+  border: 1px solid var(--color-blue);
+  background: var(--color-blue);
+
+  &::before {
+    background: white;
+  }
+}
+
+.CDB-Radio:disabled + .CDB-Radio-face {
+  border: 1px solid var(--color-line-hover);
+  background: var(--color-softgray);
+
+  &::before {
+    opacity: 0;
+  }
+}
+
+.CDB-Radio:active + .CDB-Radio-face {
+  &::before {
+    background: var(--color-blue);
+  }
+}
+
+.CDB-Radio:hover + .CDB-Radio-face {
+  border: 1px solid var(--color-blue-hover);
+
+  &::before {
+    background: var(--color-line-hover);
+  }
+}
+
+.CDB-Radio:focus + .CDB-Radio-face,
+.CDB-Radio:checked:hover + .CDB-Radio-face {
+  border: 1px solid var(--color-blue);
+}
+
+.CDB-Radio:disabled:hover + .CDB-Radio-face {
+  border: 1px solid var(--color-line-hover);
+}
+
+.CDB-Radio:checked:hover + .CDB-Radio-face {
+  &::before {
+    background: white;
+  }
+}

src/components/forms/selects.css

@@ -0,0 +1,48 @@
+.CDB-Select {
+  position: relative;
+}
+
+.CDB-SelectItem {
+  position: absolute;
+  top: 40px;
+}
+
+.CDB-SelectFake {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 7px 8px 6px;
+  border: 1px solid var(--color-line);
+  border-radius: 4px;
+  background: white;
+  font-size: var(--font-size-medium);
+  line-height: var(--line-height-medium);
+  -webkit-appearance: none;
+  appearance: none;
+
+  &:hover {
+    border: 1px solid var(--color-line-hover);
+  }
+
+  &:focus {
+    border: 1px solid var(--color-blue);
+    outline: none;
+  }
+
+  &:disabled {
+    border-color: var(--color-line-hover);
+    background: var(--color-softgray);
+  }
+
+  &.has-error {
+    border: 1px solid color(var(--color-error) alpha(0.48));
+    background: color(var(--color-error) alpha(0.04));
+    color: var(--color-error);
+  }
+}
+
+.CDB-FieldError .CDB-Select,
+.CDB-FieldError .CDB-SelectFake {
+  border: 1px solid color(var(--color-error) alpha(0.48));
+  background: color(var(--color-error) alpha(0.04));
+  color: var(--color-error);
+}

src/components/forms/tabsForms.css

@@ -0,0 +1,20 @@
+.CDB-TabsForms {
+  border: 1px solid var(--color-line);
+  border-radius: 4px;
+}
+
+.CDB-TabsForms-inner {
+  display: flex;
+}
+
+.CDB-TabsForms-item {
+  border-left: 1px solid var(--color-line-hover);
+}
+
+.CDB-TabsForms-item:first-child {
+  border-left: 0;
+}
+
+.CDB-TabsForms-button {
+  padding: 7px 8px;
+}

src/components/forms/textarea.css

@@ -0,0 +1,38 @@
+.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);
+
+  &:hover {
+    border: 1px solid var(--color-line-hover);
+  }
+
+  &:focus {
+    border: 1px solid var(--color-blue);
+    outline-color: transparent;
+    outline-style: none;
+  }
+
+  &:disabled,
+  &.is-disabled {
+    border-color: var(--color-line-hover);
+    background: var(--color-softgray);
+  }
+
+  &.has-error {
+    border: 1px solid color(var(--color-error) alpha(0.48));
+    background: color(var(--color-error) alpha(0.04));
+    color: var(--color-error);
+  }
+}
+
+.CDB-FieldError .CDB-Textarea,
+.CDB-Textarea.has-error {
+  border: 1px solid color(var(--color-error) alpha(0.48));
+  background: color(var(--color-error) alpha(0.04));
+  color: var(--color-error);
+}

src/components/forms/toggle.css

@@ -0,0 +1,53 @@
+.CDB-Toggle {
+  position: absolute;
+  z-index: 1;
+  width: 32px;
+  height: 16px;
+  opacity: 0;
+
+  &:hover {
+    + .CDB-ToggleFace {
+      background: var(--color-text-alt-hover);
+    }
+
+    &:checked + .CDB-ToggleFace {
+      background: var(--color-highlight);
+    }
+  }
+
+  + .CDB-ToggleFace {
+    position: relative;
+    width: 32px;
+    height: 16px;
+    margin: 0 2px;
+    transition: background 300ms;
+    border-radius: 50px;
+    background: var(--color-text-alt);
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background: white;
+      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.48);
+    }
+  }
+
+  &:checked + .CDB-ToggleFace {
+    background: var(--color-highlight);
+
+    &::before {
+      right: 2px;
+      left: auto;
+    }
+  }
+}
+
+.Toggle .is-disabled {
+  opacity: 0.24;
+  pointer-events: none;
+}

src/components/headers.css

@@ -0,0 +1,60 @@
+.CDB-HeaderInfo {
+  display: flex;
+  align-items: flex-start;
+
+  &.is-block {
+    display: block;
+  }
+}
+
+.CDB-HeaderInfo-listItem {
+  display: inline-block;
+  margin-right: 8px;
+  vertical-align: middle;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.CDB-HeaderInfo-inner {
+  flex: 1;
+}
+
+.CDB-HeaderInfo-back {
+  margin-top: 7px;
+}
+
+.CDB-HeaderInfo-title {
+  display: flex;
+  align-items: center;
+}
+
+.CDB-HeaderInfo-titleText {
+  flex: 1;
+  width: 0;
+  padding-right: 16px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.CDB-HeaderInfo-actionsItem {
+  display: inline-block;
+  margin-left: 4px;
+  vertical-align: middle;
+}
+
+.CDB-HeaderNumeration {
+  box-sizing: border-box;
+  width: 24px;
+  min-width: 24px;
+  height: 24px;
+  border: 1px solid var(--color-line);
+  border-radius: 4px;
+  background-color: white;
+  color: var(--color-text-alt);
+  font-size: var(--font-size-small);
+  line-height: 23px;
+  text-align: center;
+}

src/components/layer-selector.css

@@ -0,0 +1,13 @@
+.CDB-SelectorLayer {
+  position: relative;
+}
+
+.CDB-SelectorLayer.is-disabled {
+  background-color: var(--color-softgray);
+}
+
+.CDB-SelectorLayer-letter {
+  height: 14px;
+  padding: 1px 5px;
+  border-radius: 2px;
+}

src/components/lists.css

@@ -0,0 +1,26 @@
+.CDB-ListDecoration-item {
+  border-bottom: 1px solid var(--color-line-hover);
+
+  &:last-child {
+    border-bottom: 0;
+  }
+}
+
+.CDB-ListDecoration-itemPadding {
+  padding: 12px 16px;
+}
+
+.CDB-ListDecoration-itemPadding--horizontal {
+  padding: 0 16px;
+}
+
+.CDB-ListDecoration-itemPadding--vertical {
+  padding: 12px 0;
+}
+
+.CDB-ListDecoration-itemLink {
+  display: block;
+  max-width: 100%;
+  padding: 12px 16px;
+  text-align: left;
+}

src/components/loader.css

@@ -0,0 +1,89 @@
+.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%);
+}
+
+.CDB-Loader.is-visible {
+  animation: loader-progress 1s cubic-bezier(0, 0.85, 0.6, 0.6) infinite;
+}
+
+@keyframes loader-progress {
+  from {
+    transform: translateX(-200%);
+  }
+
+  to {
+    transform: translateX(200%);
+  }
+}
+
+.CDB-LoaderIcon {
+  width: 16px;
+  height: 16px;
+}
+
+.CDB-LoaderIcon-spinner {
+  width: 16px;
+  height: 16px;
+  animation: rotate 2s linear infinite;
+}
+
+.CDB-LoaderIcon--small,
+.CDB-LoaderIcon--small .CDB-LoaderIcon-spinner {
+  width: 14px;
+  height: 14px;
+}
+
+.CDB-LoaderIcon--big,
+.CDB-LoaderIcon--big .CDB-LoaderIcon-spinner {
+  width: 40px;
+  height: 40px;
+}
+
+.CDB-LoaderIcon-path {
+  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 {
+  stroke-width: 2px;
+}
+
+.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);
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    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

@@ -0,0 +1,129 @@
+.CDB-NavMenu {
+  position: relative;
+  z-index: 2;
+}
+
+.CDB-NavMenu-inner {
+  position: relative;
+  margin-bottom: 18px;
+  border-bottom: 1px solid var(--color-line);
+
+  &--no-margin {
+    margin-bottom: 0;
+  }
+
+  &--is-dropdown {
+    padding-top: 8px;
+    padding-right: 0;
+    padding-bottom: 0;
+    padding-left: 16px;
+  }
+}
+
+.CDB-NavMenu-link {
+  display: block;
+  margin-bottom: -1px;
+  padding: 4px 0 11px;
+  transition: border-color 0.2s ease-in;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  color: var(--color-blue);
+
+  &:hover {
+    border-bottom: 2px solid var(--color-blue-hover);
+  }
+}
+
+.CDB-NavMenu-item,
+.CDB-NavSubmenu-item {
+  display: inline-block;
+  margin-right: 12px;
+  vertical-align: middle;
+}
+
+.CDB-NavMenu-item.is-selected .CDB-NavMenu-link {
+  border-bottom: 2px solid var(--color-text-primary);
+  color: var(--color-text-primary);
+}
+
+.CDB-NavMenu-item.is-disabled .CDB-NavMenu-link {
+  color: var(--color-text-alt);
+  cursor: default;
+  pointer-events: none;
+}
+
+.CDB-NavSubmenu {
+  border-bottom: 2px solid var(--color-line-hover);
+
+  &--inside {
+    position: absolute;
+    right: 0;
+    left: 0;
+    padding-top: 14px;
+  }
+
+  &--outside {
+    margin-top: -5px;
+    margin-bottom: 18px;
+  }
+}
+
+.CDB-NavSubmenu-link {
+  display: block;
+  margin-bottom: -1px;
+  padding-bottom: 12px;
+  transition: border-color 0.2s ease-in;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  color: var(--color-blue);
+
+  &:hover {
+    border-bottom: 2px solid var(--color-blue-hover);
+  }
+}
+
+.CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
+  border-bottom: 2px solid var(--color-line);
+  color: var(--color-text-primary);
+}
+
+.CDB-NavSubmenu-status {
+  margin-left: 2px;
+}
+
+.CDB-NavMenu.is-dark {
+  .CDB-NavMenu-inner,
+  .CDB-NavSubmenu {
+    border-bottom: 1px solid var(--color-text-secondary);
+  }
+
+  .CDB-NavMenu-link,
+  .CDB-NavSubmenu-link {
+    margin-bottom: -1px;
+    color: var(--color-text-alt);
+
+    &:hover {
+      border-bottom: 2px solid darken(var(--color-line), 8%);
+    }
+  }
+
+  .CDB-NavSubmenu-item.is-disabled .CDB-NavMenu-link {
+    opacity: 0.24;
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .CDB-NavMenu-item.is-selected .CDB-NavMenu-link {
+    border-bottom: 2px solid var(--color-line);
+    color: white;
+  }
+
+  .CDB-NavSubmenu-item.is-selected .CDB-NavSubmenu-link {
+    border-bottom: 2px solid var(--color-line);
+    color: white;
+  }
+
+  .CDB-NavSubmenu-status {
+    color: var(--color-text-secondary);
+  }
+}

src/components/shapes/add.css

@@ -0,0 +1,79 @@
+.CDB-Shape {
+  width: 16px;
+  height: 16px;
+  text-align: center;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.CDB-Shape--medium {
+  width: 24px;
+  height: 24px;
+}
+
+.CDB-Shape-add {
+  position: relative;
+  height: 100%;
+
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    right: 1px;
+    bottom: 7px;
+    left: 0;
+    height: 1px;
+    background: var(--color-black);
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 1;
+    bottom: 0;
+    left: 7px;
+    width: 1px;
+    background: var(--color-black);
+  }
+}
+
+.CDB-Shape-add.is-small {
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    right: 3px;
+    bottom: 7px;
+    left: 4px;
+    height: 1px;
+    background: var(--color-black);
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 4px;
+    bottom: 3px;
+    left: 8px;
+    width: 1px;
+    background: var(--color-black);
+  }
+}
+
+.CDB-Shape-add.is-blue {
+  &::before,
+  &::after {
+    background: var(--color-blue);
+  }
+}
+
+.CDB-Shape-add.is-white {
+  &::before,
+  &::after {
+    background: white;
+  }
+}

src/components/shapes/arrow.css

@@ -0,0 +1,66 @@
+.CDB-Shape-Arrow {
+  position: relative;
+  width: 1px;
+  height: 8px;
+  background: var(--color-black);
+
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 2px;
+    left: 0;
+    width: 5px;
+    height: 1px;
+    transform: rotate(45deg);
+    background: var(--color-black);
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 2px;
+    left: -4px;
+    width: 5px;
+    height: 1px;
+    transform: rotate(-45deg);
+    background: var(--color-black);
+  }
+
+  &.is-up {
+    top: 6px;
+    right: 9px;
+    transform: rotate(45deg);
+  }
+
+  &.is-down {
+    top: 13px;
+    left: 46px;
+    transform: rotate(-135deg);
+  }
+}
+
+.CDB-Shape-Arrow.is-blue {
+  background: var(--color-blue);
+
+  &::before {
+    background: var(--color-blue);
+  }
+
+  &::after {
+    background: var(--color-blue);
+  }
+}
+
+.CDB-Shape-Arrow.is-white {
+  background: white;
+
+  &::before {
+    background: white;
+  }
+
+  &::after {
+    background: white;
+  }
+}

src/components/shapes/check-circle.css

@@ -0,0 +1,102 @@
+.CDB-Shape-CircleItem {
+  width: 14px;
+  height: 14px;
+  border: 1px solid var(--color-black);
+  border-radius: 50%;
+
+  &.is-small {
+    width: 12px;
+    height: 12px;
+    transform: translateY(2px);
+  }
+
+  &.is-blue {
+    border: 1px solid var(--color-blue);
+  }
+
+  &.is-white {
+    border: 1px solid white;
+  }
+}
+
+.CDB-Shape-tick {
+  display: block;
+  position: relative;
+  height: 100%;
+
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 1px;
+    transform: rotate(-45deg);
+    background: var(--color-black);
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 1px;
+    transform: rotate(45deg);
+    background: var(--color-black);
+  }
+
+  &.is-medium {
+    &::before {
+      top: 5px;
+      left: 4px;
+      height: 4px;
+    }
+
+    &::after {
+      top: 3px;
+      right: 5px;
+      height: 6px;
+    }
+  }
+
+  &.is-small {
+    &::before {
+      top: 4px;
+      left: 2px;
+      height: 3px;
+    }
+
+    &::after {
+      top: 2px;
+      right: 3px;
+      height: 5px;
+    }
+  }
+}
+
+.CDB-Shape-tick.is-blue {
+  &::before {
+    background: var(--color-blue);
+  }
+
+  &::after {
+    background: var(--color-blue);
+  }
+}
+
+.CDB-Shape-tick.is-white {
+  &::before {
+    background: white;
+  }
+
+  &::after {
+    background: white;
+  }
+}
+
+.CDB-Shape-tick.is-green {
+  &::before {
+    background: var(--color-highlight);
+  }
+
+  &::after {
+    background: var(--color-highlight);
+  }
+}

src/components/shapes/close.css

@@ -0,0 +1,109 @@
+.CDB-Shape-close {
+  display: block;
+  position: relative;
+  height: 100%;
+
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 1px;
+    transform: rotate(-45deg);
+    background: var(--color-black);
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 1px;
+    transform: rotate(45deg);
+    background: var(--color-black);
+  }
+
+  &.is-huge {
+    &::before {
+      top: -2px;
+      left: 7px;
+      height: 20px;
+    }
+
+    &::after {
+      top: -2px;
+      right: 8px;
+      height: 20px;
+    }
+  }
+
+  &.is-large {
+    &::before {
+      top: 2px;
+      left: 7px;
+      height: 12px;
+    }
+
+    &::after {
+      top: 2px;
+      right: 8px;
+      height: 12px;
+    }
+  }
+
+  &.is-medium {
+    &::before {
+      top: 3px;
+      left: 6px;
+      height: 7px;
+    }
+
+    &::after {
+      top: 3px;
+      right: 6px;
+      height: 7px;
+    }
+  }
+
+  &.is-small {
+    &::before {
+      top: 2px;
+      left: 4px;
+      height: 5px;
+    }
+
+    &::after {
+      top: 2px;
+      right: 4px;
+      height: 5px;
+    }
+  }
+}
+
+.CDB-Shape-close.is-blue {
+  &::before {
+    background: var(--color-blue);
+  }
+
+  &::after {
+    background: var(--color-blue);
+  }
+}
+
+.CDB-Shape-close.is-white {
+  &::before {
+    background: white;
+  }
+
+  &::after {
+    background: white;
+  }
+}
+
+.CDB-Shape-close.is-red {
+  &::before {
+    background: var(--color-error);
+  }
+
+  &::after {
+    background: var(--color-error);
+  }
+}

src/components/shapes/dash.css

@@ -0,0 +1,34 @@
+.CDB-Shape-dash {
+  position: relative;
+  height: 100%;
+
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    right: 2px;
+    bottom: 7px;
+    left: 2px;
+    height: 1px;
+    background: var(--color-black);
+  }
+}
+
+.CDB-Shape-dash.is-small {
+  &::before {
+    right: 3px;
+    left: 3px;
+  }
+}
+
+.CDB-Shape-dash.is-blue {
+  &::before {
+    background: var(--color-blue);
+  }
+}
+
+.CDB-Shape-dash.is-white {
+  &::before {
+    background: white;
+  }
+}

src/components/shapes/dataset.css

@@ -0,0 +1,64 @@
+.CDB-Shape-Dataset {
+  padding-top: 1px;
+
+  &.is-small {
+    padding-top: 0;
+
+    .CDB-Shape-DatasetItem {
+      width: 6px;
+      height: 6px;
+      margin-left: -7px;
+
+      &:first-child {
+        margin-left: 0;
+        box-shadow: 2px 0 0 white;
+      }
+    }
+  }
+}
+
+.CDB-Shape-DatasetItem {
+  display: inline-block;
+  width: 9px;
+  height: 9px;
+  margin-left: -10px;
+  border: 1px solid var(--color-black);
+  border-radius: 50%;
+  background: white;
+
+  &:first-child {
+    position: relative;
+    z-index: 1;
+    margin-left: 0;
+    box-shadow: 3px 0 0 white;
+  }
+}
+
+.CDB-Shape-Dataset.is-blue {
+  .CDB-Shape-DatasetItem {
+    border: 1px solid var(--color-blue);
+  }
+}
+
+.CDB-Shape-Dataset.is-grey {
+  .CDB-Shape-DatasetItem {
+    border: 1px solid var(--color-line-hover);
+  }
+}
+
+.CDB-Shape-Dataset.is-white {
+  .CDB-Shape-DatasetItem {
+    border: 1px solid var(--color-line-hover);
+    background: var(--color-black);
+
+    &:first-child {
+      box-shadow: 3px 0 var(--color-black);
+    }
+  }
+}
+
+.CDB-Shape-Dataset.is-white.is-small {
+  .CDB-Shape-DatasetItem:first-child {
+    box-shadow: 2px 0 var(--color-black);
+  }
+}

src/components/shapes/dots.css

@@ -0,0 +1,11 @@
+.CDB-Shape-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-line-hover);
+
+  &.is-selected {
+    background: var(--color-text-secondary);
+  }
+}

src/components/shapes/error-circle.css

@@ -0,0 +1,50 @@
+.CDB-Shape-CircleItem {
+  width: 13px;
+  height: 13px;
+  border: 1px solid var(--color-black);
+  border-radius: 50%;
+
+  &.is-small {
+    width: 9px;
+    height: 9px;
+    margin: 0 auto;
+  }
+
+  &.is-blue {
+    border: 1px solid var(--color-blue);
+  }
+
+  &.is-white {
+    border: 1px solid white;
+  }
+
+  &.is-green {
+    border: 1px solid var(--color-highlight);
+  }
+
+  &.is-red {
+    border: 1px solid var(--color-error);
+  }
+}
+
+.CDB-Shape-CircleItem--fill {
+  &.is-blue {
+    border: 1px solid var(--color-blue);
+    background: var(--color-blue);
+  }
+
+  &.is-white {
+    border: 1px solid white;
+    background: white;
+  }
+
+  &.is-green {
+    border: 1px solid var(--color-highlight);
+    background: var(--color-highlight);
+  }
+
+  &.is-red {
+    border: 1px solid var(--color-error);
+    background: var(--color-error);
+  }
+}

src/components/shapes/hamburguer.css

@@ -0,0 +1,29 @@
+.CDB-Shape-hamburguer {
+  width: 16px;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.CDB-Shape-hamburguerItem {
+  height: 2px;
+  margin-bottom: 2px;
+  background: var(--color-black);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.CDB-Shape-hamburguer.is-blue {
+  .CDB-Shape-hamburguerItem {
+    background: var(--color-blue);
+  }
+}
+
+.CDB-Shape-hamburguer.is-white {
+  .CDB-Shape-hamburguerItem {
+    background: white;
+  }
+}

src/components/shapes/magnify.css

@@ -0,0 +1,69 @@
+.CDB-Shape-magnify {
+  display: block;
+  position: relative;
+  height: 100%;
+
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 11px;
+    height: 11px;
+    border: 1px solid var(--color-black);
+    border-radius: 50%;
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    right: 2px;
+    bottom: -1px;
+    width: 1px;
+    height: 7px;
+    transform: rotate(314deg);
+    background: var(--color-black);
+  }
+}
+
+.CDB-Shape-magnify.is-blue {
+  &::before {
+    border: 1px solid var(--color-blue);
+  }
+
+  &::after {
+    background: var(--color-blue);
+  }
+}
+
+.CDB-Shape-magnify.is-white {
+  &::before {
+    border: 1px solid white;
+  }
+
+  &::after {
+    background: white;
+  }
+}
+
+.CDB-Shape-magnify.is-small {
+  &::before {
+    top: 3px;
+    left: 4px;
+    width: 5px;
+    height: 5px;
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    right: 4px;
+    bottom: 3px;
+    width: 1px;
+    height: 5px;
+    transform: rotate(314deg);
+  }
+}

src/components/shapes/move.css

@@ -0,0 +1,74 @@
+.CDB-Shape-rectsHandle {
+  position: relative;
+  padding: 1px 0 0;
+}
+
+.CDB-Shape-rectsHandle.is-small {
+  padding: 3px 0 0 1px;
+
+  .CDB-Shape-rectsHandleItem {
+    height: 2px;
+    margin-bottom: 2px;
+
+    &::before {
+      left: 5px;
+      width: 2px;
+      height: 2px;
+    }
+
+    &::after {
+      width: 2px;
+      height: 2px;
+    }
+  }
+}
+
+.CDB-Shape-rectsHandleItem {
+  height: 3px;
+  margin-bottom: 3px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 4px;
+    width: 3px;
+    height: 3px;
+    background: var(--color-black);
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 9px;
+    width: 3px;
+    height: 3px;
+    background: var(--color-black);
+  }
+}
+
+.CDB-Shape-rectsHandleItem--blue {
+  &::before,
+  &::after {
+    background: var(--color-blue);
+  }
+}
+
+.CDB-Shape-rectsHandleItem--white {
+  &::before,
+  &::after {
+    background: white;
+  }
+}
+
+.CDB-Shape-rectsHandleItem--grey {
+  &::before,
+  &::after {
+    background: var(--color-line-hover);
+  }
+}

src/components/shapes/paragraph.css

@@ -0,0 +1,49 @@
+.CDB-Shape-paragraph {
+  padding-top: 3px;
+  text-align: left;
+}
+
+.CDB-Shape-paragraph.is-center {
+  text-align: center;
+}
+
+.CDB-Shape-paragraph.is-right {
+  text-align: right;
+}
+
+.CDB-Shape-paragraphItem {
+  height: 1px;
+  margin-bottom: 2px;
+}
+
+.CDB-Shape-paragraphItem:last-child {
+  margin-bottom: 0;
+}
+
+.CDB-Shape-paragraphBar {
+  display: inline-block;
+  height: 1px;
+  margin-bottom: 2px;
+  background: var(--color-line-hover);
+  vertical-align: top;
+}
+
+.CDB-Shape-paragraph.is-active .CDB-Shape-paragraphBar {
+  background: var(--color-blue);
+}
+
+.CDB-Shape-paragraphBar--01 {
+  width: 12px;
+}
+
+.CDB-Shape-paragraphBar--02 {
+  width: 6px;
+}
+
+.CDB-Shape-paragraphBar--03 {
+  width: 8px;
+}
+
+.CDB-Shape-paragraphBar--04 {
+  width: 4px;
+}

src/components/shapes/threePoints.css

@@ -0,0 +1,52 @@
+.CDB-Shape-threePoints {
+  display: inline-block;
+  padding: 0 4px;
+}
+
+.CDB-Shape-threePoints.is-horizontal {
+  padding: 4px 0;
+  transform: rotate(90deg);
+}
+
+.CDB-Shape-threePointsItem {
+  width: 2px;
+  height: 2px;
+  margin-bottom: 5px;
+  background: var(--color-black);
+}
+
+.CDB-Shape-threePointsItem.is-round {
+  border-radius: 50%;
+}
+
+.CDB-Shape-threePointsItem:last-child {
+  margin-bottom: 0;
+}
+
+.CDB-Shape-threePoints.is-small {
+  padding-top: 2px;
+}
+
+.CDB-Shape-threePoints.is-small .CDB-Shape-threePointsItem {
+  width: 2px;
+  height: 2px;
+  margin-bottom: 3px;
+}
+
+.CDB-Shape-threePoints.is-medium {
+  padding-top: 2px;
+}
+
+.CDB-Shape-threePoints.is-medium .CDB-Shape-threePointsItem {
+  width: 4px;
+  height: 4px;
+  margin-bottom: 3px;
+}
+
+.CDB-Shape-threePoints.is-blue .CDB-Shape-threePointsItem {
+  background: var(--color-blue);
+}
+
+.CDB-Shape-threePoints.is-white .CDB-Shape-threePointsItem {
+  background: white;
+}

src/components/shapes/toogle-arrow.css

@@ -0,0 +1,64 @@
+.CDB-ArrowToogle {
+  position: relative;
+  height: 100%;
+
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 8px;
+    left: 0;
+    width: 10px;
+    height: 1px;
+    transform: rotate(-45deg);
+    background: var(--color-black);
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 8px;
+    right: -1px;
+    width: 10px;
+    height: 1px;
+    transform: rotate(45deg);
+    background: var(--color-black);
+  }
+}
+
+.CDB-ArrowToogle.is-down {
+  transform: rotate(180deg);
+}
+
+.CDB-ArrowToogle.is-small {
+  &::before {
+    left: 2px;
+    width: 8px;
+  }
+
+  &::after {
+    right: 1px;
+    width: 8px;
+  }
+}
+
+.CDB-ArrowToogle.is-blue {
+  &::before {
+    background: var(--color-blue);
+  }
+
+  &::after {
+    background: var(--color-blue);
+  }
+}
+
+.CDB-ArrowToogle.is-white {
+  &::before {
+    background: white;
+  }
+
+  &::after {
+    background: white;
+  }
+}

src/components/shapes/type.css

@@ -0,0 +1,77 @@
+.CDB-Shape {
+  width: 16px;
+  height: 16px;
+  text-align: center;
+}
+
+.CDB-Shape--small {
+  width: 8px;
+  height: 8px;
+}
+
+.CDB-Shape--medium {
+  width: 24px;
+  height: 24px;
+}
+
+.CDB-Shape:hover {
+  cursor: pointer;
+}
+
+.CDB-Type {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.CDB-Type-circle {
+  position: absolute;
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: var(--color-line-hover);
+}
+
+.CDB-Type-circle--01 {
+  top: 0;
+  left: 0;
+}
+
+.CDB-Type-circle--02 {
+  top: 0;
+  right: 0;
+}
+
+.CDB-Type-circle--03 {
+  bottom: 0;
+  left: 0;
+}
+
+.CDB-Type-circle--04 {
+  right: 0;
+  bottom: 0;
+}
+
+.CDB-Type--polygon::before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  bottom: 1px;
+  left: 1px;
+  border: 1px solid var(--color-line-hover);
+}
+
+.CDB-Type--line::before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 3px;
+  width: 1px;
+  transform: rotate(45deg);
+  background: var(--color-line-hover);
+}

src/components/tags.css

@@ -0,0 +1,49 @@
+.CDB-Tag {
+  padding: 0 3px;
+  border: 1px solid var(--color-blue);
+  border-radius: 2px;
+  color: var(--color-blue);
+
+  &.is-public {
+    border: 1px solid var(--color-public);
+    color: var(--color-public);
+  }
+
+  &.is-link {
+    border: 1px solid var(--color-share);
+    color: var(--color-share);
+  }
+
+  &.is-password {
+    border: 1px solid var(--color-password);
+    color: var(--color-password);
+  }
+
+  &.is-private {
+    border: 1px solid var(--color-error);
+    color: var(--color-error);
+  }
+}
+
+.CDB-ListTag {
+  display: flex;
+}
+
+.CDB-ListTag-item {
+  margin-right: 8px;
+}
+
+.CDB-Tag.CDB-Tag--withLink {
+  display: flex;
+  padding: 4px 4px 4px 8px;
+  border-radius: 4px;
+  background: color(var(--color-blue) alpha(16%));
+}
+
+.CDB-Tag.CDB-Tag--opaque {
+  padding: 2px 4px;
+  border: 0;
+  border-radius: 2px;
+  background: rgba(0, 0, 0, 0.04);
+  text-transform: uppercase;
+}

src/components/tooltips.css

@@ -0,0 +1,88 @@
+.CDB-InfoTooltip {
+  display: inline-block;
+  position: absolute;
+  padding: 8px;
+  border-radius: 4px;
+  background: color(var(--color-black) alpha(8%));
+}
+
+.CDB-InfoTooltip::after {
+  content: '';
+  display: block;
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: 4px solid transparent;
+}
+
+.is-black {
+  &.CDB-InfoTooltip.CDB-InfoTooltip--up::after {
+    border-bottom-color: color(var(--color-black) alpha(8%));
+  }
+
+  &.CDB-InfoTooltip.CDB-InfoTooltip--down::after {
+    border-top-color: color(var(--color-black) alpha(8%));
+  }
+
+  &.CDB-InfoTooltip.CDB-InfoTooltip--left::after {
+    border-right-color: color(var(--color-black) alpha(8%));
+  }
+
+  &.CDB-InfoTooltip.CDB-InfoTooltip--right::after {
+    border-left-color: color(var(--color-black) alpha(8%));
+  }
+}
+
+.is-error {
+  &.CDB-InfoTooltip.CDB-InfoTooltip--up::after {
+    border-bottom-color: var(--color-error);
+  }
+
+  &.CDB-InfoTooltip.CDB-InfoTooltip--down::after {
+    border-top-color: var(--color-error);
+  }
+
+  &.CDB-InfoTooltip.CDB-InfoTooltip--left::after {
+    border-right-color: var(--color-error);
+  }
+
+  &.CDB-InfoTooltip.CDB-InfoTooltip--right::after {
+    border-left-color: var(--color-error);
+  }
+}
+
+.CDB-InfoTooltip.CDB-InfoTooltip--up::after {
+  top: -8px;
+  left: calc(50% - 4px);
+  border-top-width: 4px;
+  border-top-style: solid;
+}
+
+.CDB-InfoTooltip.CDB-InfoTooltip--down::after {
+  bottom: -8px;
+  left: calc(50% - 4px);
+  border-top-width: 4px;
+  border-top-style: solid;
+}
+
+.CDB-InfoTooltip.CDB-InfoTooltip--left::after {
+  top: calc(50% - 4px);
+  left: -8px;
+  border-right-width: 4px;
+  border-right-style: solid;
+}
+
+.CDB-InfoTooltip.CDB-InfoTooltip--right::after {
+  top: calc(50% - 4px);
+  right: -8px;
+  border-right-width: 4px;
+  border-right-style: solid;
+}
+
+.CDB-InfoTooltip.is-error {
+  background: var(--color-error);
+}
+
+.CDB-InfoTooltip-text {
+  color: white;
+}

src/components/typography.css

@@ -0,0 +1,52 @@
+.CDB-Text {
+  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
+  $sFontWeight-normal: 400;
+
+  &.is-semibold {
+    font-weight: var(--font-weight-semibold);
+  }
+
+  &.is-light {
+    font-weight: var(--font-weight-lighter);
+  }
+}
+
+.is-underlined {
+  border-bottom: 1px dotted var(--color-line);
+}
+
+.CDB-Size-huge {
+  font-size: var(--font-size-huge);
+  line-height: var(--line-height-huge);
+}
+
+.CDB-Size-large {
+  font-size: var(--font-size-large);
+  line-height: var(--line-height-large);
+}
+
+.CDB-Size-medium {
+  font-size: var(--font-size-medium);
+  line-height: var(--line-height-medium);
+}
+
+.CDB-Size-small {
+  font-size: var(--font-size-small);
+  line-height: var(--line-height-small);
+}
+
+.CDB-Size-small.u-whiteTextColor {
+  -webkit-font-smoothing: initial;
+}
+
+.CDB-FontSize-small {
+  font-size: var(--font-size-small);
+}
+
+.CDB-FontSize-medium {
+  font-size: var(--font-size-medium);
+}
+
+.CDB-IconFont.is-disabled {
+  opacity: 0.24;
+}

src/entry.css

@@ -0,0 +1,42 @@
+@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';
+@import 'components/forms/legends';
+@import 'components/forms/option-input';
+@import 'components/forms/radio';
+@import 'components/forms/selects';
+@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';
+@import 'components/shapes/close';
+@import 'components/shapes/dash';
+@import 'components/shapes/dataset';
+@import 'components/shapes/dots';
+@import 'components/shapes/error-circle';
+@import 'components/shapes/hamburguer';
+@import 'components/shapes/magnify';
+@import 'components/shapes/move';
+@import 'components/shapes/paragraph';
+@import 'components/shapes/threePoints';
+@import 'components/shapes/toogle-arrow';
+@import 'components/shapes/type';
+@import 'components/avatars';
+@import 'components/boxes';
+@import 'components/buttons';
+@import 'components/colors';
+@import 'components/headers';
+@import 'components/lists';
+@import 'components/loader';
+@import 'components/menu';
+@import 'components/tags';
+@import 'components/tooltips';
+@import 'components/typography';
+@import 'components/layer-selector';

src/utilities/defaults.css

@@ -0,0 +1,16 @@
+/**
+ * Base styles
+ */
+
+body {
+  color: var(--color-text-primary);
+}
+
+a {
+  color: var(--color-blue);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}

src/utilities/fonts.css

@@ -0,0 +1,32 @@
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  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.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  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.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  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.ttf') format('truetype');
+}

src/utilities/helpers.css

@@ -0,0 +1,175 @@
+/* MARGINS */
+
+.u-tSpace--s {
+  margin-top: 2px;
+}
+
+.u-tSpace {
+  margin-top: 4px;
+}
+
+.u-tSpace--m {
+  margin-top: 8px;
+}
+
+.u-tSpace-xl {
+  margin-top: 12px;
+}
+
+.u-rSpace--s {
+  margin-right: 2px;
+}
+
+.u-rSpace {
+  margin-right: 4px;
+}
+
+.u-rSpace--m {
+  margin-right: 8px;
+}
+
+.u-rSpace--xl {
+  margin-right: 12px;
+}
+
+.u-bSpace--s {
+  margin-bottom: 2px;
+}
+
+.u-bSpace {
+  margin-bottom: 4px;
+}
+
+.u-bSpace--m {
+  margin-bottom: 8px;
+}
+
+.u-bSpace--xl {
+  margin-bottom: 12px;
+}
+
+.u-lSpace--s {
+  margin-left: 2px;
+}
+
+.u-lSpace {
+  margin-left: 4px;
+}
+
+.u-lSpace--m {
+  margin-left: 8px;
+}
+
+.u-lSpace--xl {
+  margin-left: 12px;
+}
+
+/* -- COLORS */
+.u-actionTextColor {
+  color: var(--color-blue);
+
+  &:hover {
+    color: var(--color-blue-hover);
+  }
+}
+
+.u-mainTextColor {
+  color: var(--color-text-primary);
+}
+
+.u-secondaryTextColor {
+  color: var(--color-text-secondary);
+}
+
+.u-altTextColor {
+  color: var(--color-text-alt);
+}
+
+.u-hintTextColor {
+  color: var(--color-text-alt);
+}
+
+.u-alertTextColor {
+  color: var(--color-alert);
+}
+
+.u-whiteTextColor {
+  color: white;
+}
+
+.u-errorTextColor {
+  color: var(--color-error);
+}
+
+/* -- DISPLAYS */
+
+.u-iBlock {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.u-showDesktop {
+  display: block !important;
+}
+
+.u-showMobile {
+  display: none !important;
+}
+
+/* -- DECORATION */
+
+.u-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.u-upperCase {
+  text-transform: uppercase;
+}
+
+/* -- FLEX */
+
+.u-flex {
+  display: flex;
+}
+
+.u-justifySpace {
+  justify-content: space-between;
+}
+
+.u-justifyCenter {
+  justify-content: center;
+}
+
+.u-justifyStart {
+  justify-content: flex-start;
+}
+
+.u-justifyEnd {
+  justify-content: flex-end;
+}
+
+.u-alignStart {
+  align-items: flex-start;
+}
+
+.u-alignCenter {
+  align-items: center;
+}
+
+.u-alignEnd {
+  align-items: flex-end;
+}
+
+/* Media queries */
+
+@media only screen and (max-width: 600px) {
+  .u-showDesktop {
+    display: none !important;
+  }
+
+  .u-showMobile {
+    display: block !important;
+  }
+}

src/variables/colors.css

@@ -0,0 +1,24 @@
+:root {
+  --color-blue: #1785FB;
+  --color-blue-hover: color(var(--color-blue) l(-10%) s(-10%));
+  --color-softgray: #F9F9F9;
+  --color-black: #2E3C43;
+
+  --color-highlight: #9DE0AD;
+  --color-alert: #FFFFC0;
+  --color-public: #9BC63B;
+  --color-share: #FEB100;
+  --color-password: #FB7B23;
+  --color-error: #F15743;
+
+  --color-text-primary: var(--color-black);
+  --color-text-secondary: #747D82;
+  --color-text-alt: #BABEC0;
+  --color-text-alt-hover: color(var(--color-text-alt) l(-10%) s(-10%));
+
+  --color-bg-primary: #FFF;
+  --color-bg-secondary: #F2F6F9;
+
+  --color-line: #DDD;
+  --color-line-hover: color(var(--color-line) l(-10%) s(-10%));
+}

src/variables/sizes.css

@@ -0,0 +1,23 @@
+:root {
+  --layout-desktop: 352px;
+  --layout-mobile: 280px;
+
+  --unit: 8px;
+
+  --margin-section: 24px;
+  --margin-element: 14px;
+
+  --font-size-small: 10px;
+  --font-size-medium: 12px;
+  --font-size-large: 16px;
+  --font-size-huge: 26px;
+
+  --font-weight-lighter: 300;
+  --font-weight-normal: 400;
+  --font-weight-semibold: 600;
+
+  --line-height-small: 14px;
+  --line-height-medium: 16px;
+  --line-height-large: 22px;
+  --line-height-huge: 34px;
+}

src/vendor/reset.css

@@ -0,0 +1,67 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  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-spacing: 0;
+  border-collapse: collapse;
+}
+
+// Resetting buttons too
+button {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+}
+
+dd, dt {
+  display: inline-block;
+}