From 033f50300d42f7ff56b99d0875172c0df7b7c0e2 Mon Sep 17 00:00:00 2001 From: piensaenpixel Date: Mon, 1 Feb 2016 17:16:15 +0100 Subject: [PATCH] add headers --- src/fonts/cartoIcon.eot | Bin 18856 -> 18856 bytes src/fonts/cartoIcon.ttf | Bin 18684 -> 18684 bytes src/fonts/cartoIcon.woff | Bin 11836 -> 11836 bytes src/img/avatar-40x40.png | Bin 0 -> 4350 bytes src/scss/cdb-components/avatars.scss | 54 +++++++++ src/scss/cdb-components/forms/inputs.scss | 2 +- src/scss/cdb-components/headers.scss | 133 ++++++++++++++++++++++ src/scss/cdb-components/tags.scss | 48 ++++++++ src/scss/cdb-components/typography.scss | 3 +- src/scss/cdb-utilities/helpers.scss | 10 ++ 10 files changed, 248 insertions(+), 2 deletions(-) create mode 100644 src/img/avatar-40x40.png create mode 100644 src/scss/cdb-components/avatars.scss create mode 100644 src/scss/cdb-components/headers.scss create mode 100644 src/scss/cdb-components/tags.scss diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index d9aff25db436abd65a4564b57cf68ec2a86c9fc6..474080a97e0b1ea52f04ac371dfcdd8b620ffad4 100644 GIT binary patch delta 55 zcmZ26nQ_Hr#tAme&qeYl+OK1tVY6l8hpE!}BG2RbZN4&aGyY-#f=gHaK84Yn7cg>o F004Cm7OwyR delta 55 zcmZ26nQ_Hr#tAme?Mpi*+OK2oE=igAVXAb;()M_Mo39MqjK3Iw;L^F7dtvnE1&kaX E0C|NK`Tzg` diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf index f61778a2a48bf4cc6baa0b97b9c434d2d5d69e3f..c936f3d9f0fb34a6e6a8307d06054483ff11a341 100644 GIT binary patch delta 47 wcmew}k@3$&#tDwhGikp?^77P@e79s0MmdJ5&!@I delta 47 wcmew}k@3$&#tDwh-6bg#U8YKRENzeHxB1Gz&G?G}2riwQxfe!n{KDY@0L*I>6951J diff --git a/src/fonts/cartoIcon.woff b/src/fonts/cartoIcon.woff index f8f872e7914b30d6824210f790094499f77353bc..ee96c45ed0d81d0db32e2ea69ffb807387c76cf8 100644 GIT binary patch delta 61 zcmV-D0K)&gT)bS6c>|a{w6T1)CMmf;oa6azzA|t#{sM|HT)Oi2DU5zo{{K5y1mhnd TmxF-`Bnkk`m=O=NTPNWLpAQ?& delta 61 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 +
  • + User Name +
    • +
  • + User Name +
    • +
  • + User Name +
    • +
  • + +
    • + +``` +*/ + +@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/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..f657ea6 --- /dev/null +++ b/src/scss/cdb-components/headers.scss @@ -0,0 +1,133 @@ +// Typography styles +// ---------------------------------------------- + +/* SG +# Headers + +``` +
    +
    +

    Name map

    +
    +
      +
    • + +
      • +
    • +
        +
      • + User Name +
        • +
      • + User Name +
        • +
      • + User Name +
        • +
      • + +
        • +
      +
      • +
    • +

      Published 8 days ago

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

    Stadiums Affected

    +

    Rabo

    +
    +

    populated_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); + padding-right: 24px; +} + + + + diff --git a/src/scss/cdb-components/tags.scss b/src/scss/cdb-components/tags.scss new file mode 100644 index 0000000..d564edb --- /dev/null +++ b/src/scss/cdb-components/tags.scss @@ -0,0 +1,48 @@ +// Typography styles +// ---------------------------------------------- + +/* SG +# Tags + +``` + + + + +``` +*/ + +@import '../cdb-variables/sizes'; +@import '../cdb-variables/colors'; + + +.CDB-Tag { + border: 1px solid red; + 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(); }