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/scss/cdb-components/headers.scss b/src/scss/cdb-components/headers.scss index 02ca1b2..00a72b9 100644 --- a/src/scss/cdb-components/headers.scss +++ b/src/scss/cdb-components/headers.scss @@ -47,9 +47,11 @@ +


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

populates_places

+


@@ -111,6 +114,7 @@

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; @@ -158,24 +186,23 @@ margin-right: 0; } } - .CDB-HeaderInfo-Text { color: $cTypo3; + + &.is-uppercase { + text-transform: uppercase; + } } - .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 +211,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: $cTypo3; + font-size: $sFontSize-small; + line-height: 23px; + text-align: center; + box-sizing: border-box; +} diff --git a/src/scss/cdb-components/shapes/threePoints.scss b/src/scss/cdb-components/shapes/threePoints.scss index a2e2c41..48038e3 100644 --- a/src/scss/cdb-components/shapes/threePoints.scss +++ b/src/scss/cdb-components/shapes/threePoints.scss @@ -6,31 +6,31 @@ Description ```

16px

-
- -
+
+
-
- -
+
+
-
- -
+
+

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

12px

-
- -
+
+
-
- -
+
+
-
- -
+
+ ``` */ diff --git a/src/scss/cdb-components/typography.scss b/src/scss/cdb-components/typography.scss index b02624d..b26f446 100644 --- a/src/scss/cdb-components/typography.scss +++ b/src/scss/cdb-components/typography.scss @@ -9,6 +9,7 @@

Open Sans 26/34 Light

Open Sans 16/22 Regular

Open Sans 12/16 Semibold

+

Open Sans 12/16 Semibold Uppercase

Open Sans 12/16 Regular

Open Sans 10/14 Semibold

Open Sans 10/14 Regular

@@ -27,6 +28,9 @@ &.is-light { font-weight: $sFontWeight-lighter; } + &.is-upper { + text-transform: uppercase; + } } .CDB-Size-huge { @@ -48,3 +52,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/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'); }