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 00a72b9..33c07dc 100644 --- a/src/scss/cdb-components/headers.scss +++ b/src/scss/cdb-components/headers.scss @@ -43,7 +43,7 @@
  • -

    Published 8 days ago

    +

    Published 8 days ago

    • @@ -111,7 +111,7 @@ -

    Positron by CartoDB

    +

    Positron by CartoDB

    @@ -144,7 +144,7 @@
    -

    Type

    +

    Type

    @@ -155,8 +155,8 @@
    -

    Histogram

    -

    Distribution of a numeric variable in a range

    +

    Histogram

    +

    Distribution of a numeric variable in a range

    @@ -186,13 +186,7 @@ margin-right: 0; } } -.CDB-HeaderInfo-Text { - color: $cTypo3; - - &.is-uppercase { - text-transform: uppercase; - } -} + .CDB-HeaderInfo-Inner { @include flex(1); } @@ -222,7 +216,7 @@ border: 1px solid $cMainLine; border-radius: 4px; background-color: $cWhite; - color: $cTypo3; + color: $cAltText; font-size: $sFontSize-small; line-height: 23px; text-align: center; 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 ac5616b..6fa4b2b 100644 --- a/src/scss/cdb-components/shapes/add.scss +++ b/src/scss/cdb-components/shapes/add.scss @@ -70,7 +70,7 @@ Description bottom: 7px; left: 0; height: 1px; - background: $cMainDark; + background: $cMainBg; content: ''; } @@ -81,7 +81,7 @@ Description bottom: 0; left: 7px; width: 1px; - background: $cMainDark; + background: $cMainBg; content: ''; } } @@ -95,7 +95,7 @@ Description bottom: 7px; left: 4px; height: 1px; - background: $cMainDark; + background: $cMainBg; content: ''; } @@ -106,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 2eecdf4..bcafc2b 100644 --- a/src/scss/cdb-components/shapes/threePoints.scss +++ b/src/scss/cdb-components/shapes/threePoints.scss @@ -136,7 +136,7 @@ Description .CDB-Shape-threePoints.is-medium { padding-top: 2px; } -.CDB-Shape-threePoints.is-medium .CDB-Shape-threePointsItem { +.CDB-Shape-threePoints.is-medium .CDB-Shape-threePointsItem { width: 4px; height: 4px; margin-bottom: 3px; diff --git a/src/scss/cdb-components/shapes/toogle-arrow.scss b/src/scss/cdb-components/shapes/toogle-arrow.scss index 86f302a..90381da 100644 --- a/src/scss/cdb-components/shapes/toogle-arrow.scss +++ b/src/scss/cdb-components/shapes/toogle-arrow.scss @@ -97,7 +97,7 @@ Description width: 10px; height: 1px; transform: rotate(-45deg); - background: $cMainDark; + background: $cMainBg; content: ''; } &::after { @@ -108,7 +108,7 @@ Description width: 10px; height: 1px; transform: rotate(45deg); - background: $cMainDark; + background: $cMainBg; content: ''; } } diff --git a/src/scss/cdb-components/typography.scss b/src/scss/cdb-components/typography.scss index b26f446..74c0127 100644 --- a/src/scss/cdb-components/typography.scss +++ b/src/scss/cdb-components/typography.scss @@ -10,7 +10,9 @@

    Open Sans 16/22 Regular

    Open Sans 12/16 Semibold

    Open Sans 12/16 Semibold Uppercase

    -

    Open Sans 12/16 Regular

    +

    Open Sans 12/16 Regular

    +

    Open Sans 12/16 Regular

    +

    Open Sans 12/16 Regular

    Open Sans 10/14 Semibold

    Open Sans 10/14 Regular

    ``` diff --git a/src/scss/cdb-utilities/defaults.css.scss b/src/scss/cdb-utilities/defaults.css.scss index c7998f1..aaabb14 100644 --- a/src/scss/cdb-utilities/defaults.css.scss +++ b/src/scss/cdb-utilities/defaults.css.scss @@ -3,6 +3,10 @@ @import '../cdb-variables/colors'; +body { + color: $cMainText; +} + a { color: $cBlue; text-decoration: none; diff --git a/src/scss/cdb-utilities/helpers.scss b/src/scss/cdb-utilities/helpers.scss index 1cb8a7b..17a76f9 100644 --- a/src/scss/cdb-utilities/helpers.scss +++ b/src/scss/cdb-utilities/helpers.scss @@ -2,7 +2,9 @@ // ---------------------------------------------- @import './mixins'; +@import '../cdb-variables/colors'; +/* Margins */ .u-tSpace { margin-top: 4px; } @@ -24,19 +26,40 @@ .u-rSpace--xl { margin-right: 12px; } -.u-lSpace { - margin-left: 4px; -} -.u-lSpace--xl { - margin-left: 12px; -} .u-bSpace { margin-bottom: 4px; } .u-bSpace--m { margin-bottom: 8px; } +.u-bSpace--xl { + margin-bottom: 12px; +} +.u-lSpace { + margin-left: 4px; +} +.u-lSpace--xl { + margin-left: 12px; +} +// Colors +// Main Text Color is default color +// ---------------------------------------------- + +.u-mainTextColor { + color: $cMainText; +} +.u-secondaryTextColor { + color: $cSecondaryText; +} +.u-altTextColor { + color: $cAltText; +} +.u-hintTextColor { + color: $cHintText; +} + +/* Displays */ .u-iBlock { @include inline-block(); } @@ -47,6 +70,7 @@ display: none !important; } +/* Media queries*/ @include media-query-mobile() { .u-showDesktop { display: none !important; diff --git a/src/scss/cdb-variables/_colors.scss b/src/scss/cdb-variables/_colors.scss index fc0bc81..bc31a89 100644 --- a/src/scss/cdb-variables/_colors.scss +++ b/src/scss/cdb-variables/_colors.scss @@ -5,7 +5,7 @@ $cBlue: #3AA9E3; $cBlack: #000; $cWhite: #FFF; -$cMainDark: #2E3C43; +$cMainBg: #2E3C43; //Structure $cSecondaryDark: #282C2F; @@ -18,9 +18,10 @@ $cMainLine: #DDD; $cSecondaryLine: #EEE; //Typography -$cTypo2: #636D72; -$cTypo3: #979EA1; -$cTypo4: #CBCED0; +$cMainText: #2E3C43; +$cSecondaryText: #636D72; +$cAltText: #979EA1; +$cHintText: #CBCED0; //Others $cHighlight: #9DE0AD;