diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index 05b79bf..3c65c52 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 059b081..a9e0f79 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 6645378..97c1008 100644 Binary files a/src/fonts/cartoIcon.woff and b/src/fonts/cartoIcon.woff differ diff --git a/src/img/avatar-40x40.png b/src/img/avatar-40x40.png new file mode 100644 index 0000000..a261d7d Binary files /dev/null and b/src/img/avatar-40x40.png differ diff --git a/src/scss/cdb-components/avatars.scss b/src/scss/cdb-components/avatars.scss new file mode 100644 index 0000000..62a6fe4 --- /dev/null +++ b/src/scss/cdb-components/avatars.scss @@ -0,0 +1,54 @@ +// Typography styles +// ---------------------------------------------- + +/* SG +# Avatars/List + +``` + +``` +*/ + +@import '../cdb-variables/sizes'; +@import '../cdb-variables/colors'; + +.CDB-AvatarList { + padding-left: 12px; +} + +.CDB-AvatarList-item { + display: inline-block; + margin-left: -12px; + border: 2px solid $cWhite; + border-radius: 50%; + vertical-align: middle; +} + +.CDB-AvatarList-itemMore { + display: inline-block; + margin-left: -12px; + padding: 2px 6px; + border-left: 2px solid $cWhite; + border-radius: 50px; + background: $cSecondaryLine; + color: $cTypo2; +} + +.CDB-AvatarList-itemMedia { + width: 16px; + height: 16px; + border-radius: 50%; +} diff --git a/src/scss/cdb-components/buttons.scss b/src/scss/cdb-components/buttons.scss index adb1478..5d22cda 100644 --- a/src/scss/cdb-components/buttons.scss +++ b/src/scss/cdb-components/buttons.scss @@ -24,6 +24,10 @@ Layout Component: SAVE + +


@@ -44,6 +48,11 @@ Layout Component: + + + ``` @@ -71,6 +80,9 @@ Layout Component: .CDB-Button--small { padding: $baseSize - 3 $baseSize + 4; } +.CDB-Button--icon { + padding: 7px 9px; +} .CDB-Button--primary { background: $cBlue; diff --git a/src/scss/cdb-components/forms/inputs.scss b/src/scss/cdb-components/forms/inputs.scss index 5e00e7a..9c4f75a 100644 --- a/src/scss/cdb-components/forms/inputs.scss +++ b/src/scss/cdb-components/forms/inputs.scss @@ -15,7 +15,7 @@ @import '../../cdb-variables/colors'; .CDB-InputText { - min-width: 152px; + width: 100%; padding: 7px 8px 6px; border: 1px solid $cMainLine; border-radius: 3px; diff --git a/src/scss/cdb-components/headers.scss b/src/scss/cdb-components/headers.scss new file mode 100644 index 0000000..02ca1b2 --- /dev/null +++ b/src/scss/cdb-components/headers.scss @@ -0,0 +1,195 @@ +// Typography styles +// ---------------------------------------------- + +/* SG +# Headers + +``` +
+
+

Name Map

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

Stadiums Affected Stadiums Affected Stadiums AffectedStadiums Affected Stadiums Affected Stadiums Affected Stadiums Affected

+ +
+
+
    +
  • +
  • +
+
+

populates_places

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

Basemap

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

Positron by CartoDB

+
+
+
+
+
+ +
+ + + +
+ +
+
    +
  • +
  • +
+
+

populates_places

+
+
+
+
+
+ +``` +*/ + +@import '../cdb-utilities/mixins'; +@import '../cdb-variables/sizes'; +@import '../cdb-variables/colors'; + +.CDB-HeaderInfo { + @include display-flex(); + + &.is-block { + display: block; + } +} + +.CDB-HeaderInfo-ListItem { + display: inline-block; + margin-right: 8px; + vertical-align: middle; + + &:last-child { + margin-right: 0; + } +} + +.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; + padding-right: 16px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.CDB-HeaderInfo-ActionsItem { + display: inline-block; + margin-left: 4px; + vertical-align: middle; +} + + + diff --git a/src/scss/cdb-components/shapes/dataset.scss b/src/scss/cdb-components/shapes/dataset.scss new file mode 100644 index 0000000..494918d --- /dev/null +++ b/src/scss/cdb-components/shapes/dataset.scss @@ -0,0 +1,146 @@ +/* SG +# Shapes/Dataset + +Description + +``` +

16px

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

12px

+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+``` +*/ + +@import '../../cdb-variables/colors'; +@import '../../cdb-variables/sizes'; + +.CDB-Shape-Dataset { + padding-top: 1px; + padding-left: 10px; + &.is-small { + padding-top: 0; + padding-left: 7px; + } +} + +.CDB-Shape-DatasetItem { + display: inline-block; + width: 9px; + height: 9px; + margin-left: -10px; + border: 1px solid $cMainDark; + border-radius: 50%; + background: $cWhite; + + &:first-child { + position: relative; + box-shadow: 3px 0 0 $cWhite; + z-index: 1; + } +} + +.CDB-Shape-Dataset.is-small { + .CDB-Shape-DatasetItem { + width: 6px; + height: 6px; + margin-left: -7px; + &:first-child { + box-shadow: 2px 0 0 $cWhite; + } + } +} + +.CDB-Shape-Dataset.is-blue { + .CDB-Shape-DatasetItem { + border: 1px solid $cBlue; + } +} + +.CDB-Shape-Dataset.is-grey { + .CDB-Shape-DatasetItem { + border: 1px solid $cHoverLine; + } +} + +.CDB-Shape-Dataset.is-white { + .CDB-Shape-DatasetItem { + border: 1px solid $cHoverLine; + background: $cMainDark; + &:first-child { + box-shadow: 3px 0 $cMainDark; + } + } +} + +.CDB-Shape-Dataset.is-white.is-small { + .CDB-Shape-DatasetItem:first-child { + box-shadow: 2px 0 $cMainDark; + } +} diff --git a/src/scss/cdb-components/shapes/threePoints.scss b/src/scss/cdb-components/shapes/threePoints.scss index 7f73c0a..36bb47c 100644 --- a/src/scss/cdb-components/shapes/threePoints.scss +++ b/src/scss/cdb-components/shapes/threePoints.scss @@ -71,7 +71,6 @@ Description .CDB-Shape-threePoints { display: inline-block; - height: 100%; } .CDB-Shape-threePointsItem { diff --git a/src/scss/cdb-components/tags.scss b/src/scss/cdb-components/tags.scss new file mode 100644 index 0000000..3df5a0b --- /dev/null +++ b/src/scss/cdb-components/tags.scss @@ -0,0 +1,47 @@ +// Typography styles +// ---------------------------------------------- + +/* SG +# Tags + +``` + + + + +``` +*/ + +@import '../cdb-variables/sizes'; +@import '../cdb-variables/colors'; + + +.CDB-Tag { + padding: 0 3px; + border-radius: 2px; + + &.is-public { + border: 1px solid $cPublic; + color: $cPublic; + } + &.is-link { + border: 1px solid $cLink; + color: $cLink; + } + &.is-password { + border: 1px solid $cPassword; + color: $cPassword; + } + &.is-private { + border: 1px solid $cError; + color: $cError; + } +} diff --git a/src/scss/cdb-components/typography.scss b/src/scss/cdb-components/typography.scss index d9ec4aa..b02624d 100644 --- a/src/scss/cdb-components/typography.scss +++ b/src/scss/cdb-components/typography.scss @@ -6,10 +6,11 @@ ```

Open Sans 26/34 Regular

+

Open Sans 26/34 Light

Open Sans 16/22 Regular

Open Sans 12/16 Semibold

Open Sans 12/16 Regular

-

Open Sans 10/14 Semibold

+

Open Sans 10/14 Semibold

Open Sans 10/14 Regular

``` */ diff --git a/src/scss/cdb-utilities/helpers.scss b/src/scss/cdb-utilities/helpers.scss index cee8ce7..1cb8a7b 100644 --- a/src/scss/cdb-utilities/helpers.scss +++ b/src/scss/cdb-utilities/helpers.scss @@ -6,6 +6,9 @@ .u-tSpace { margin-top: 4px; } +.u-tSpace--m { + margin-top: 8px; +} .u-tSpace-xl { margin-top: 12px; } @@ -27,6 +30,13 @@ .u-lSpace--xl { margin-left: 12px; } +.u-bSpace { + margin-bottom: 4px; +} +.u-bSpace--m { + margin-bottom: 8px; +} + .u-iBlock { @include inline-block(); }