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/README.md b/README.md index cefbc3e..95fb4ff 100644 --- a/README.md +++ b/README.md @@ -4,8 +4,9 @@ ### Installation As easy as: -- ```npm install``` +- ```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: diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index d9aff25..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 f61778a..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 f8f872e..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 77f6653..7289585 100644 --- a/src/scss/cdb-components/boxes.scss +++ b/src/scss/cdb-components/boxes.scss @@ -2,7 +2,7 @@ // ---------------------------------------------- /* SG -# Boxes/Box Dropdown +# Boxes/Dropdown ``` @@ -21,6 +21,136 @@ box-shadow: 0 $baseSize $baseSize * 2 0 rgba(0, 0, 0, 0.16); } + +/* SG +# Boxes/Loader +``` +
    + +
    +
    +
    +
    +
    +
    +
    + + +
    +
    +
    +
    +
    +
    +
    + +
    +``` +*/ + +.CDB-BoxLoader { + padding: 0 $baseSize * 3; + border-top: 1px solid $cMainLine; +} + + +.CDB-BoxLoader-inner { + padding: $baseSize + 4 0; + border-top: 1px solid $cMainLine; + &:first-child { + border-top: 0; + } +} + +.CDB-BoxLoader-item { + @include display-flex(); + padding: $baseSize 0; + color: $cSecondaryText; + &.is-working { + color: $cAltText; + } +} + +.CDB-BoxLoader-info { + @include flex(1); + padding-right: $baseSize * 2; +} + /* SG # Boxes/Info Boxes 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/textarea.scss b/src/scss/cdb-components/forms/textarea.scss new file mode 100644 index 0000000..e69e455 --- /dev/null +++ b/src/scss/cdb-components/forms/textarea.scss @@ -0,0 +1,42 @@ +// Textarea styles +// ---------------------------------------------- + +/* SG +# Forms/Textareas + +``` + + + +``` +*/ + +@import '../../cdb-variables/sizes'; +@import '../../cdb-variables/colors'; + +.CDB-Textarea { + width: 100%; + padding: 7px 8px 6px; + border: 1px solid $cMainLine; + border-radius: $baseSize / 2; + font-size: $sFontSize-medium; + line-height: $sLineHeight-medium; + + &:hover { + border: 1px solid $cHoverLine; + } + &:focus { + border: 1px solid $cBlue; + outline-color: transparent; + outline-style: none; + } + &:disabled { + border-color: $cSecondaryLine; + background: $cThirdBackground; + } +} +.CDB-Textarea.has-error { + border: 1px solid rgba($cError, 0.48); + background: rgba($cError, 0.04); + color: $cError; + } 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 e812aff..23d72b8 100644 --- a/src/scss/cdb-components/loader.scss +++ b/src/scss/cdb-components/loader.scss @@ -2,10 +2,9 @@ // ---------------------------------------------- /* SG -# Loader +# Loader/principal This is the generic loader for widgets, maps, components, ... -There is only one state 'is-visible', in order to make it visible. ```
    @@ -13,6 +12,8 @@ There is only one state 'is-visible', in order to make it visible. */ @import '../cdb-utilities/mixins'; +@import '../cdb-variables/colors'; +@import '../cdb-variables/sizes'; .CDB-Loader { @include css3-prefix(animation, loader-progress 1000ms linear 1); @@ -39,3 +40,89 @@ There is only one state 'is-visible', in order to make it visible. width: 100%; } } + +/* SG +# Loader/circle + +``` +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +``` +*/ + +.CDB-LoaderIcon { + box-sizing: border-box; + position: relative; + width: $baseSize * 2; + height: $baseSize * 2; + border: 2px solid $cMainLine; + border-radius: 50%; + &.is-grey { + border: 2px solid $cSecondaryText; + } +} + +.CDB-LoaderIcon-item { + @include css3-prefix(animation, loader-icon 1.4s linear infinite); + position: absolute; + top: -2px; + left: -2px; + width: $baseSize * 2; + height: $baseSize * 2; + border-radius: 50%; + background: linear-gradient(to right, $cWhite 10%, rgba($cWhite, 0) 42%); + + &::before, + &::after { + position: absolute; + top: 0; + left: 0; + content: ''; + } + + &::before { + width: 50%; + height: 50%; + border-radius: 100% 0 0; + background: $cMainLine; + } + &::after { + right: 0; + bottom: 0; + width: 75%; + height: 75%; + margin: auto; + border-radius: 50%; + background: $cWhite; + } + &.is-grey { + background: linear-gradient(to right, $cMainBg 10%, rgba($cWhite, 0) 42%); + &::before { + background: $cSecondaryText; + } + &::after { + background: $cMainBg; + } + } +} + + +@include keyframes(loader-icon) { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + + 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 c8bb269..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,31 +94,31 @@ Description position: absolute; width: 1px; transform: rotate(45deg); - background: $cMainDark; + background: $cMainBg; content: ''; } &.is-medium { &::before { - top: 6px; + top: 5px; left: 4px; height: 4px; } &::after { - top: 4px; + top: 3px; right: 5px; - height: 7px; + height: 6px; } } &.is-small { &::before { - top: 5px; - left: 3px; + top: 4px; + left: 2px; height: 3px; } &::after { - top: 3px; + top: 2px; right: 3px; height: 5px; } @@ -143,4 +143,14 @@ Description } } +.CDB-Shape-tick.is-green { + &::before { + background: $cHighlight; + } + &::after { + background: $cHighlight; + } +} + + diff --git a/src/scss/cdb-components/shapes/close.scss b/src/scss/cdb-components/shapes/close.scss index cbb8591..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: ''; } @@ -137,3 +137,13 @@ Description background: $cWhite; } } + +.CDB-Shape-close.is-red { + &::before { + background: $cError; + } + &::after { + background: $cError; + } +} + 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 5a77161..5ed5ffc 100644 --- a/src/scss/cdb-components/shapes/error-circle.scss +++ b/src/scss/cdb-components/shapes/error-circle.scss @@ -60,13 +60,13 @@ Description .CDB-Shape-CircleItem { width: 13px; height: 13px; - border: 1px solid $cMainDark; + border: 1px solid $cMainBg; border-radius: 50%; &.is-small { width: 9px; height: 9px; - margin: 2px auto; + margin: 0 auto; } &.is-blue { border: 1px solid $cBlue; @@ -74,4 +74,10 @@ Description &.is-white { border: 1px solid $cWhite; } + &.is-green { + border: 1px solid $cHighlight; + } + &.is-red { + border: 1px solid $cError; + } } 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 36bb47c..d78d175 100644 --- a/src/scss/cdb-components/shapes/threePoints.scss +++ b/src/scss/cdb-components/shapes/threePoints.scss @@ -4,33 +4,68 @@ Description ``` +

    24px

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

    16px

    -
    +
    +
    -
    +
    +
    -
    +
    +


    @@ -38,31 +73,31 @@ Description

    12px

    -
    -
    +
    +
    -
    +
    +
    -
    +
    +
    ``` */ @@ -72,36 +107,45 @@ Description .CDB-Shape-threePoints { display: inline-block; } +.CDB-Shape-threePoints.is-horizontal { + transform: rotate(90deg); +} .CDB-Shape-threePointsItem { width: 2px; height: 2px; margin-bottom: 5px; - background: $cMainDark; - &:last-child { - margin-bottom: 0; - } + background: $cMainBg; +} +.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-threePointsItem { - width: 2px; - height: 2px; - margin-bottom: 3px; - } +} +.CDB-Shape-threePoints.is-small .CDB-Shape-threePointsItem { + width: 2px; + height: 2px; + margin-bottom: 3px; } -.CDB-Shape-threePoints.is-blue { - .CDB-Shape-threePointsItem { - background: $cBlue; - } +.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-white { - .CDB-Shape-threePointsItem { - background: $cWhite; - } +.CDB-Shape-threePoints.is-blue .CDB-Shape-threePointsItem { + background: $cBlue; } +.CDB-Shape-threePoints.is-white .CDB-Shape-threePointsItem { + background: $cWhite; +} 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 b02624d..bff3796 100644 --- a/src/scss/cdb-components/typography.scss +++ b/src/scss/cdb-components/typography.scss @@ -9,7 +9,10 @@

    Open Sans 26/34 Light

    Open Sans 16/22 Regular

    Open Sans 12/16 Semibold

    -

    Open Sans 12/16 Regular

    +

    Open Sans 12/16 Semibold Uppercase

    +

    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

    ``` @@ -48,3 +51,11 @@ font-size: $sFontSize-small; line-height: $sLineHeight-small; } + +.CDB-FontSize-small { + font-size: $sFontSize-small; +} + +.CDB-FontSize-medium { + font-size: $sFontSize-medium; +} 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/fonts.scss b/src/scss/cdb-utilities/fonts.scss index 7684a09..d201ace 100644 --- a/src/scss/cdb-utilities/fonts.scss +++ b/src/scss/cdb-utilities/fonts.scss @@ -6,20 +6,20 @@ font-family: 'Open Sans'; font-style: normal; font-weight: 300; - src: local('Open Sans Light'), local('OpenSans-Light'), url('themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'), - url('themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTeY5mlVXtdNkpsMpKkrDXP4.woff') format('woff'); + src: local('Open Sans Light'), local('OpenSans-Light'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'), + url('//themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTeY5mlVXtdNkpsMpKkrDXP4.woff') format('woff'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; - src: local('Open Sans'), local('OpenSans'), url('themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'), - url('themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRbO3LdcAZYWl9Si6vvxL-qU.woff') format('woff'); + src: local('Open Sans'), local('OpenSans'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'), + url('//themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRbO3LdcAZYWl9Si6vvxL-qU.woff') format('woff'); } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; - src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'), - url('themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSuY5mlVXtdNkpsMpKkrDXP4.woff') format('woff'); + src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'), + url('//themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSuY5mlVXtdNkpsMpKkrDXP4.woff') format('woff'); } diff --git a/src/scss/cdb-utilities/helpers.scss b/src/scss/cdb-utilities/helpers.scss index 1cb8a7b..aab62bc 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,49 @@ .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; +} +.u-ellipsis { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +// Colors +// Main Text Color is default color +// ---------------------------------------------- + +.u-actionTextColor { + color: $cBlue; +} +.u-mainTextColor { + color: $cMainText; +} +.u-secondaryTextColor { + color: $cSecondaryText; +} +.u-altTextColor { + color: $cAltText; +} +.u-hintTextColor { + color: $cHintText; +} + +/* Displays */ .u-iBlock { @include inline-block(); } @@ -47,6 +79,12 @@ display: none !important; } +/* Decoration */ +.u-upperCase { + text-transform: uppercase; +} + +/* 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;