diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..9c8a9d7 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,18 @@ +cache: false +language: node_js +node_js: + - "4.1" + +install: + - npm install + +before_script: + - npm install -g grunt-cli + +script: + - grunt build + +notifications: + email: + on_success: never + on_failure: change diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index 0b83194..c6e31dd 100644 Binary files a/src/fonts/cartoIcon.eot and b/src/fonts/cartoIcon.eot differ diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf index 4caa8b4..9fc0b65 100644 Binary files a/src/fonts/cartoIcon.ttf and b/src/fonts/cartoIcon.ttf differ diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff index c802060..4c56c48 100644 Binary files a/src/fonts/cartoIcon.woff and b/src/fonts/cartoIcon.woff differ diff --git a/src/scss/cdb-components/avatars.scss b/src/scss/cdb-components/avatars.scss index 62a6fe4..772a210 100644 --- a/src/scss/cdb-components/avatars.scss +++ b/src/scss/cdb-components/avatars.scss @@ -16,7 +16,7 @@ User Name
  • - +
    • ``` @@ -44,7 +44,6 @@ border-left: 2px solid $cWhite; border-radius: 50px; background: $cSecondaryLine; - color: $cTypo2; } .CDB-AvatarList-itemMedia { diff --git a/src/scss/cdb-components/boxes.scss b/src/scss/cdb-components/boxes.scss index 948afe5..7289585 100644 --- a/src/scss/cdb-components/boxes.scss +++ b/src/scss/cdb-components/boxes.scss @@ -140,9 +140,9 @@ .CDB-BoxLoader-item { @include display-flex(); padding: $baseSize 0; - color: $cTypo2; + color: $cSecondaryText; &.is-working { - color: $cTypo3; + color: $cAltText; } } diff --git a/src/scss/cdb-components/carousel.scss b/src/scss/cdb-components/carousel.scss new file mode 100644 index 0000000..7342266 --- /dev/null +++ b/src/scss/cdb-components/carousel.scss @@ -0,0 +1,51 @@ +// Carousel styles +// ---------------------------------------------- + +/* SG +# Carousel + +``` +
    + +
    +``` +*/ + +@import '../cdb-utilities/mixins'; +@import '../cdb-variables/sizes'; +@import '../cdb-variables/colors'; + +.CDB-Carousel { + @include display-flex(); + @include justify-content(flex-start); + width: 100%; +} +.CDB-CarouselItem { + @include display-flex(); + @include align-items(center); + @include justify-content(center); + width: $baseSize * 11; + height: $baseSize * 7; + margin-right: 8px; + border: 1px solid $cSecondaryLine; + border-radius: 4px; + background: $cThirdBackground; + box-sizing: border-box; + + &:last-child { + margin-right: 0; + } + &:hover { + border: 1px solid $cMainLine; + cursor: pointer; + } +} +.CDB-CarouselItem.is-selected { + border: 2px solid $cBlue; +} diff --git a/src/scss/cdb-components/colors.scss b/src/scss/cdb-components/colors.scss index 1fac96d..9eb8b8d 100644 --- a/src/scss/cdb-components/colors.scss +++ b/src/scss/cdb-components/colors.scss @@ -18,9 +18,9 @@ @import '../cdb-variables/colors'; .box { + display: inline-block; width: 120px; height: 64px; - display: inline-block; margin: 0 24px 24px 0; } @@ -28,15 +28,15 @@ background: $cBlue; } .Color-White { + border: 1px solid #E5E5E5; background: $cWhite; - border: 1px solid #e5e5e5; } .Color-Dark { background: $cBlack; } .Color-MainDark { - background: $cMainDark; + background: $cMainBg; } .Color-SecondaryDark { background: $cSecondaryDark; @@ -89,13 +89,13 @@ .Color-Type02 { - background: $cTypo2; + background: $cSecondaryText; } .Color-Type03 { - background: $cTypo3; + background: $cAltText; } .Color-Type04 { - background: $cTypo4; + background: $cHintText; } diff --git a/src/scss/cdb-components/forms/toggle.scss b/src/scss/cdb-components/forms/toggle.scss index e6dd65b..244dbdf 100644 --- a/src/scss/cdb-components/forms/toggle.scss +++ b/src/scss/cdb-components/forms/toggle.scss @@ -33,7 +33,7 @@ height: $baseSize * 2; margin: 0 2px; border-radius: 50px; - background: $cTypo4; + background: $cHintText; &::before { position: absolute; @@ -49,7 +49,7 @@ } &:checked + .CDB-ToggleFace { - background: $cMainDark; + background: $cMainBg; &::before { right: 2px; diff --git a/src/scss/cdb-components/headers.scss b/src/scss/cdb-components/headers.scss index 02ca1b2..5b8d58d 100644 --- a/src/scss/cdb-components/headers.scss +++ b/src/scss/cdb-components/headers.scss @@ -43,13 +43,15 @@
  • -

    Published 8 days ago

    +

    Published 8 days ago

    • +


    +
    @@ -85,6 +87,7 @@

    populates_places

    +


    @@ -108,9 +111,10 @@ -

    Positron by CartoDB

    +

    Positron by CartoDB

    +


    @@ -130,10 +134,35 @@

    populates_places

    +


    +
    +
    1
    + +
    +
    +

    Type

    + +
    + +
    +
    +
    +     +
    +
    + +

    Histogram

    +

    Distribution of a numeric variable in a range

    +
    +
    + +
    +
    +
    ``` */ @@ -148,7 +177,6 @@ display: block; } } - .CDB-HeaderInfo-ListItem { display: inline-block; margin-right: 8px; @@ -159,23 +187,16 @@ } } -.CDB-HeaderInfo-Text { - color: $cTypo3; -} - .CDB-HeaderInfo-Inner { @include flex(1); } - .CDB-HeaderInfo-Back { margin-top: 7px; } - .CDB-HeaderInfo-Title { @include display-flex(); @include align-items(center); } - .CDB-HeaderInfo-TitleText { @include flex(1); width: 0; @@ -184,12 +205,20 @@ white-space: nowrap; overflow: hidden; } - .CDB-HeaderInfo-ActionsItem { display: inline-block; margin-left: 4px; vertical-align: middle; } - - - +.CDB-HeaderNumeration { + width: $baseSize * 3; + height: $baseSize * 3; + border: 1px solid $cMainLine; + border-radius: 4px; + background-color: $cWhite; + color: $cAltText; + font-size: $sFontSize-small; + line-height: 23px; + text-align: center; + box-sizing: border-box; +} diff --git a/src/scss/cdb-components/loader.scss b/src/scss/cdb-components/loader.scss index 07e066b..23d72b8 100644 --- a/src/scss/cdb-components/loader.scss +++ b/src/scss/cdb-components/loader.scss @@ -67,7 +67,7 @@ This is the generic loader for widgets, maps, components, ... border: 2px solid $cMainLine; border-radius: 50%; &.is-grey { - border: 2px solid $cTypo2; + border: 2px solid $cSecondaryText; } } @@ -105,12 +105,12 @@ This is the generic loader for widgets, maps, components, ... background: $cWhite; } &.is-grey { - background: linear-gradient(to right, $cMainDark 10%, rgba($cWhite, 0) 42%); + background: linear-gradient(to right, $cMainBg 10%, rgba($cWhite, 0) 42%); &::before { - background: $cTypo2; + background: $cSecondaryText; } &::after { - background: $cMainDark; + background: $cMainBg; } } } diff --git a/src/scss/cdb-components/menu.scss b/src/scss/cdb-components/menu.scss index bcf7e13..e5cbc89 100644 --- a/src/scss/cdb-components/menu.scss +++ b/src/scss/cdb-components/menu.scss @@ -18,10 +18,10 @@ POP-UP @@ -97,8 +97,8 @@ } .CDB-NavMenu-Item.is-active .CDB-NavMenu-Link { - border-bottom: 1px solid $cMainDark; - color: $cMainDark; + border-bottom: 1px solid $cMainLine; + color: $cMainText; } .CDB-NavSubmenu { @@ -118,26 +118,25 @@ .CDB-NavSubmenu-item.is-active { .CDB-NavSubmenu-Link { - border-bottom: 1px solid $cTypo3; - color: $cMainDark; + border-bottom: 1px solid $cMainLine; + color: $cMainText; } } .CDB-NavSubmenu-Status { margin-left: 2px; - color: $cTypo4; } .CDB-Navmenu.is-dark { .CDB-NavMenu-Inner, .CDB-NavSubmenu { - border-bottom: 1px solid $cTypo2; + border-bottom: 1px solid $cSecondaryText; } .CDB-NavMenu-Link, .CDB-NavSubmenu-Link { - color: $cTypo3; + color: $cAltText; } .CDB-NavMenu-Item.is-active { @@ -155,7 +154,7 @@ } .CDB-NavSubmenu-Status { - color: $cTypo2; + color: $cSecondaryText; } } diff --git a/src/scss/cdb-components/shapes/add.scss b/src/scss/cdb-components/shapes/add.scss index 570d5b4..6fa4b2b 100644 --- a/src/scss/cdb-components/shapes/add.scss +++ b/src/scss/cdb-components/shapes/add.scss @@ -49,10 +49,15 @@ Description width: 16px; height: 16px; text-align: center; - &:hover { - cursor: pointer; - } } +.CDB-Shape--medium { + width: 24px; + height: 24px; +} +.CDB-Shape:hover { + cursor: pointer; +} + .CDB-Shape-add { position: relative; @@ -65,7 +70,7 @@ Description bottom: 7px; left: 0; height: 1px; - background: $cMainDark; + background: $cMainBg; content: ''; } @@ -76,7 +81,7 @@ Description bottom: 0; left: 7px; width: 1px; - background: $cMainDark; + background: $cMainBg; content: ''; } } @@ -90,7 +95,7 @@ Description bottom: 7px; left: 4px; height: 1px; - background: $cMainDark; + background: $cMainBg; content: ''; } @@ -101,7 +106,7 @@ Description bottom: 3px; left: 8px; width: 1px; - background: $cMainDark; + background: $cMainBg; content: ''; } } diff --git a/src/scss/cdb-components/shapes/arrow.scss b/src/scss/cdb-components/shapes/arrow.scss index cb596d0..295cd40 100644 --- a/src/scss/cdb-components/shapes/arrow.scss +++ b/src/scss/cdb-components/shapes/arrow.scss @@ -22,7 +22,7 @@ Description position: relative; width: 1px; height: 8px; - background: $cMainDark; + background: $cMainBg; &::before { display: block; @@ -32,7 +32,7 @@ Description width: 5px; height: 1px; transform: rotate(45deg); - background: $cMainDark; + background: $cMainBg; content: ''; } @@ -44,7 +44,7 @@ Description width: 5px; height: 1px; transform: rotate(-45deg); - background: $cMainDark; + background: $cMainBg; content: ''; } &.is-up { diff --git a/src/scss/cdb-components/shapes/check-circle.scss b/src/scss/cdb-components/shapes/check-circle.scss index f63cb76..cf2b1f1 100644 --- a/src/scss/cdb-components/shapes/check-circle.scss +++ b/src/scss/cdb-components/shapes/check-circle.scss @@ -60,7 +60,7 @@ Description .CDB-Shape-CircleItem { width: 14px; height: 14px; - border: 1px solid $cMainDark; + border: 1px solid $cMainBg; border-radius: 50%; &.is-small { @@ -86,7 +86,7 @@ Description position: absolute; width: 1px; transform: rotate(-45deg); - background: $cMainDark; + background: $cMainBg; content: ''; } &::after { @@ -94,7 +94,7 @@ Description position: absolute; width: 1px; transform: rotate(45deg); - background: $cMainDark; + background: $cMainBg; content: ''; } diff --git a/src/scss/cdb-components/shapes/close.scss b/src/scss/cdb-components/shapes/close.scss index 40b26f6..473f7dc 100644 --- a/src/scss/cdb-components/shapes/close.scss +++ b/src/scss/cdb-components/shapes/close.scss @@ -55,7 +55,7 @@ Description position: absolute; width: 1px; transform: rotate(-45deg); - background: $cMainDark; + background: $cMainBg; content: ''; } &::after { @@ -63,7 +63,7 @@ Description position: absolute; width: 1px; transform: rotate(45deg); - background: $cMainDark; + background: $cMainBg; content: ''; } diff --git a/src/scss/cdb-components/shapes/dash.scss b/src/scss/cdb-components/shapes/dash.scss index 409bd20..8c3bdeb 100644 --- a/src/scss/cdb-components/shapes/dash.scss +++ b/src/scss/cdb-components/shapes/dash.scss @@ -56,7 +56,7 @@ Description bottom: 7px; left: 2px; height: 1px; - background: $cMainDark; + background: $cMainBg; content: ''; } } diff --git a/src/scss/cdb-components/shapes/dataset.scss b/src/scss/cdb-components/shapes/dataset.scss index 494918d..0639597 100644 --- a/src/scss/cdb-components/shapes/dataset.scss +++ b/src/scss/cdb-components/shapes/dataset.scss @@ -95,7 +95,7 @@ Description width: 9px; height: 9px; margin-left: -10px; - border: 1px solid $cMainDark; + border: 1px solid $cMainBg; border-radius: 50%; background: $cWhite; @@ -132,15 +132,15 @@ Description .CDB-Shape-Dataset.is-white { .CDB-Shape-DatasetItem { border: 1px solid $cHoverLine; - background: $cMainDark; + background: $cMainBg; &:first-child { - box-shadow: 3px 0 $cMainDark; + box-shadow: 3px 0 $cMainBg; } } } .CDB-Shape-Dataset.is-white.is-small { .CDB-Shape-DatasetItem:first-child { - box-shadow: 2px 0 $cMainDark; + box-shadow: 2px 0 $cMainBg; } } diff --git a/src/scss/cdb-components/shapes/dots.scss b/src/scss/cdb-components/shapes/dots.scss index 3b55072..54e61b7 100644 --- a/src/scss/cdb-components/shapes/dots.scss +++ b/src/scss/cdb-components/shapes/dots.scss @@ -23,6 +23,6 @@ You may resize and change the colors of the icons with the `glyph-`-classes. Ava background: $cSecondaryLine; &.is-selected { - background: $cTypo2; + background: $cSecondaryText; } } diff --git a/src/scss/cdb-components/shapes/error-circle.scss b/src/scss/cdb-components/shapes/error-circle.scss index eebeb92..5ed5ffc 100644 --- a/src/scss/cdb-components/shapes/error-circle.scss +++ b/src/scss/cdb-components/shapes/error-circle.scss @@ -60,7 +60,7 @@ Description .CDB-Shape-CircleItem { width: 13px; height: 13px; - border: 1px solid $cMainDark; + border: 1px solid $cMainBg; border-radius: 50%; &.is-small { diff --git a/src/scss/cdb-components/shapes/hamburguer.scss b/src/scss/cdb-components/shapes/hamburguer.scss index 7b8ceff..d5d2bc4 100644 --- a/src/scss/cdb-components/shapes/hamburguer.scss +++ b/src/scss/cdb-components/shapes/hamburguer.scss @@ -43,7 +43,7 @@ Description .CDB-Shape-hamburguerItem { height: $baseSize / 4; margin-bottom: $baseSize / 4; - background: $cMainDark; + background: $cMainBg; &:last-child { margin-bottom: 0; diff --git a/src/scss/cdb-components/shapes/magnify.scss b/src/scss/cdb-components/shapes/magnify.scss index 7f4f2f0..bec21d4 100644 --- a/src/scss/cdb-components/shapes/magnify.scss +++ b/src/scss/cdb-components/shapes/magnify.scss @@ -58,7 +58,7 @@ Description left: 0; width: 11px; height: 11px; - border: 1px solid $cMainDark; + border: 1px solid $cMainBg; border-radius: 50%; content: ''; } @@ -71,7 +71,7 @@ Description width: 1px; height: 7px; transform: rotate(314deg); - background: $cMainDark; + background: $cMainBg; content: ''; } } diff --git a/src/scss/cdb-components/shapes/move.scss b/src/scss/cdb-components/shapes/move.scss index e1f423b..db5a45f 100644 --- a/src/scss/cdb-components/shapes/move.scss +++ b/src/scss/cdb-components/shapes/move.scss @@ -101,7 +101,7 @@ Description display: inline-block; width: 3px; height: 3px; - background: $cMainDark; + background: $cMainBg; content: ''; } @@ -110,7 +110,7 @@ Description width: 3px; height: 3px; margin-left: 2px; - background: $cMainDark; + background: $cMainBg; content: ''; } } diff --git a/src/scss/cdb-components/shapes/threePoints.scss b/src/scss/cdb-components/shapes/threePoints.scss index 48038e3..d78d175 100644 --- a/src/scss/cdb-components/shapes/threePoints.scss +++ b/src/scss/cdb-components/shapes/threePoints.scss @@ -4,6 +4,41 @@ Description ``` +

    24px

    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    +
    +

    16px