diff --git a/package.json b/package.json index 026b87e..370c27a 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "cartoassets", "description": "Share frontend assets between different CartoDB repositories", - "version": "0.1.23", + "version": "0.1.24", "homepage": "https://github.com/cartodb/CartoAssets", "author": { "name": "CartoDB", diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index d9aff25..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 f61778a..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 f8f872e..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/boxes.scss b/src/scss/cdb-components/boxes.scss index 3c104b4..77f6653 100644 --- a/src/scss/cdb-components/boxes.scss +++ b/src/scss/cdb-components/boxes.scss @@ -10,6 +10,7 @@ ``` */ +@import '../cdb-utilities/mixins'; @import '../cdb-variables/sizes'; @import '../cdb-variables/colors'; @@ -19,3 +20,55 @@ background: $cWhite; box-shadow: 0 $baseSize $baseSize * 2 0 rgba(0, 0, 0, 0.16); } + +/* SG +# Boxes/Info Boxes + + +``` +
+

ABOUT PREVIEW MODE

+

He's a queer man, Captain Ahab—so some thinkbut a good one. Oh, thou'lt like him well enough; no fear, no fear

+

CLOSE

+
+
+
+
+
+

ABOUT PREVIEW MODE

+

He's a queer man, Captain Ahab—so some thinkbut a good one. Oh, thou'lt like him well enough; no fear, no fear

+ +
+``` +*/ + +.CDB-InfoBox { + padding: 12px 16px; + border-radius: 4px; + background: $cThirdBackground; + &.is-alert { + background: rgba($cHighlightYellow, 0.6); + } +} + +.CDB-InfoBox-footer { + @include display-flex(); + @include align-items(center); +} + +.CDB-InfoBox-footerItem { + @include flex(1); +} + +.CDB-InfoBox-footerItem--right { + text-align: right; +} diff --git a/src/scss/cdb-components/buttons.scss b/src/scss/cdb-components/buttons.scss index adb1478..a862ec3 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; @@ -146,7 +158,6 @@ Layout Component: .CDB-Button--secondary { border: 1px solid $cBlue; - background: $cWhite; color: $cBlue; &:hover { 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.scss b/src/scss/cdb-components/shapes.scss deleted file mode 100644 index 6b29308..0000000 --- a/src/scss/cdb-components/shapes.scss +++ /dev/null @@ -1,252 +0,0 @@ -// Shape styles -// ---------------------------------------------- - -/* SG -# Shapes/Dot - -You may resize and change the colors of the icons with the `glyph-`-classes. Available sizes and colors listed: - -``` - - -``` -*/ - -@import '../cdb-utilities/mixins'; - - -.CDB-Shape-dot { - display: inline-block; - width: 8px; - min-width: 8px; - height: 8px; - border-radius: 8px; -} - -/* SG -# Shapes/threePoints - -Description - -``` -
-``` -*/ - -.CDB-Shape-threePoints { - display: inline-block; - position: relative; - width: 3px; - height: 16px; - margin-right: -7px; - margin-left: 6px; - padding: 0 7px 0 10px; - text-align: center; - vertical-align: middle; - - &:after, - &:before { - display: inline-block; - position: absolute; - width: 3px; - height: 3px; - border-radius: 50%; - content: ''; - z-index: 1; - } - - &:before { - top: 0; - right: 7px; - } - - &:after { - right: 7px; - bottom: 1px; - } - - &:hover { - cursor: pointer; - } -} - -.CDB-Shape-threePointsItem { - display: block; - position: absolute; - top: 6px; - left: 7px; - width: 3px; - height: 3px; - border-radius: 50%; -} - -/* SG -# Shapes/lens - -Description - -``` -
-``` -*/ - -.CDB-Shape-lens { - display: inline-block; - position: relative; - width: 16px; - height: 16px; - - &:after, - &:before { - position: absolute; - content: ''; - } - &:after { - top: 0; - left: 0; - width: 8px; - height: 8px; - border: 1px solid transparent; - border-radius: 10px; - } - &:before { - @include css3-prefix(transform, rotate(45deg)); - right: 3px; - bottom: 5px; - width: 6px; - height: 1px; - } - - &:hover { - cursor: pointer; - } -} - -/* SG -# Shapes/hamburguer - -Description - -``` -
-``` -*/ - -.CDB-Shape-hamburguer { - display: inline-block; - position: relative; - width: 16px; - height: 2px; - border: 0; - background: #FFF; - vertical-align: middle; - - &:before, - &:after { - display: block; - position: absolute; - width: 16px; - height: 2px; - background: #FFF; - content: ''; - } - &:before { - top: -6px; - } - &:after { - bottom: -6px; - } -} - -/* SG -# Shapes/magnify - -Description - -``` -
-``` -*/ - -.CDB-Shape-magnify { - display: block; - position: relative; - width: 32px; - height: 32px; - &:before { - display: block; - position: absolute; - top: 10px; - left: 10px; - width: 7px; - height: 7px; - border: 1px solid #636D72; - border-radius: 50%; - content: ''; - } - &:after { - display: block; - position: absolute; - top: 17px; - left: 19px; - width: 1px; - height: 6px; - transform: rotate(314deg); - background: #636D72; - content: ''; - } -} - -/* SG -# Shapes/arrow - -Description - -``` -
-``` -*/ - -.CDB-Shape-Arrow { - display: block; - position: absolute; - width: 1px; - height: 8px; - background: #32A8E6; - - &:before { - display: block; - position: absolute; - top: 2px; - left: 0; - width: 5px; - height: 1px; - transform: rotate(45deg); - background: #32A8E6; - content: ''; - } - - &:after { - display: block; - position: absolute; - top: 2px; - left: -4px; - width: 5px; - height: 1px; - transform: rotate(-45deg); - background: #32A8E6; - content: ''; - } -} - -.CDB-Shape-Arrow--top { - top: 6px; - right: 9px; - transform: rotate(45deg); -} - -.CDB-Shape-Arrow--bottom { - top: 13px; - left: 46px; - transform: rotate(-135deg); -} diff --git a/src/scss/cdb-components/shapes/add.scss b/src/scss/cdb-components/shapes/add.scss new file mode 100644 index 0000000..570d5b4 --- /dev/null +++ b/src/scss/cdb-components/shapes/add.scss @@ -0,0 +1,126 @@ +/* SG +# Shapes/Add + +Description + +``` +

16px

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

12px

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+``` +*/ + +@import '../../cdb-variables/colors'; + +.CDB-Shape { + width: 16px; + height: 16px; + text-align: center; + &:hover { + cursor: pointer; + } +} + +.CDB-Shape-add { + position: relative; + height: 100%; + + &::before { + display: block; + position: absolute; + right: 1px; + bottom: 7px; + left: 0; + height: 1px; + background: $cMainDark; + content: ''; + } + + &::after { + display: block; + position: absolute; + top: 1; + bottom: 0; + left: 7px; + width: 1px; + background: $cMainDark; + content: ''; + } +} + +.CDB-Shape-add.is-small { + + &::before { + display: block; + position: absolute; + right: 3px; + bottom: 7px; + left: 4px; + height: 1px; + background: $cMainDark; + content: ''; + } + + &::after { + display: block; + position: absolute; + top: 4px; + bottom: 3px; + left: 8px; + width: 1px; + background: $cMainDark; + content: ''; + } +} + + + +.CDB-Shape-add.is-blue { + &::before, + &::after { + background: $cBlue; + } +} + +.CDB-Shape-add.is-white { + &::before, + &::after { + background: $cWhite; + } +} + + + diff --git a/src/scss/cdb-components/shapes/arrow.scss b/src/scss/cdb-components/shapes/arrow.scss new file mode 100644 index 0000000..cb596d0 --- /dev/null +++ b/src/scss/cdb-components/shapes/arrow.scss @@ -0,0 +1,85 @@ +/* SG +# Shapes/Arrow + +Description + +``` +
+
+
+
+
+
+
+
+
+``` +*/ + +@import '../../cdb-variables/colors'; + +.CDB-Shape-Arrow { + position: relative; + width: 1px; + height: 8px; + background: $cMainDark; + + &::before { + display: block; + position: absolute; + top: 2px; + left: 0; + width: 5px; + height: 1px; + transform: rotate(45deg); + background: $cMainDark; + content: ''; + } + + &::after { + display: block; + position: absolute; + top: 2px; + left: -4px; + width: 5px; + height: 1px; + transform: rotate(-45deg); + background: $cMainDark; + content: ''; + } + &.is-up { + top: 6px; + right: 9px; + transform: rotate(45deg); + } + + &.is-down { + top: 13px; + left: 46px; + transform: rotate(-135deg); + } +} + +.CDB-Shape-Arrow.is-blue { + background: $cBlue; + + &::before { + background: $cBlue; + } + + &::after { + background: $cBlue; + } +} + +.CDB-Shape-Arrow.is-white { + background: $cWhite; + + &::before { + background: $cWhite; + } + + &::after { + background: $cWhite; + } +} diff --git a/src/scss/cdb-components/shapes/check-circle.scss b/src/scss/cdb-components/shapes/check-circle.scss new file mode 100644 index 0000000..c8bb269 --- /dev/null +++ b/src/scss/cdb-components/shapes/check-circle.scss @@ -0,0 +1,146 @@ +/* SG +# Shapes/Check circle + +Description + +``` +

16px

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

12px

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+``` +*/ + +@import '../../cdb-variables/colors'; + +.CDB-Shape-CircleItem { + width: 14px; + height: 14px; + border: 1px solid $cMainDark; + border-radius: 50%; + + &.is-small { + width: 12px; + height: 12px; + transform: translateY(2px); + } + &.is-blue { + border: 1px solid $cBlue; + } + &.is-white { + border: 1px solid $cWhite; + } +} + +.CDB-Shape-tick { + display: block; + position: relative; + height: 100%; + + &::before { + display: block; + position: absolute; + width: 1px; + transform: rotate(-45deg); + background: $cMainDark; + content: ''; + } + &::after { + display: block; + position: absolute; + width: 1px; + transform: rotate(45deg); + background: $cMainDark; + content: ''; + } + + &.is-medium { + &::before { + top: 6px; + left: 4px; + height: 4px; + } + &::after { + top: 4px; + right: 5px; + height: 7px; + } + } + + &.is-small { + &::before { + top: 5px; + left: 3px; + height: 3px; + } + &::after { + top: 3px; + right: 3px; + height: 5px; + } + } +} + +.CDB-Shape-tick.is-blue { + &::before { + background: $cBlue; + } + &::after { + background: $cBlue; + } +} + +.CDB-Shape-tick.is-white { + &::before { + background: $cWhite; + } + &::after { + background: $cWhite; + } +} + + diff --git a/src/scss/cdb-components/shapes/close.scss b/src/scss/cdb-components/shapes/close.scss new file mode 100644 index 0000000..cbb8591 --- /dev/null +++ b/src/scss/cdb-components/shapes/close.scss @@ -0,0 +1,139 @@ +/* SG +# Shapes/Close + +Description + +``` +

16px

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

12px

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+``` +*/ + +@import '../../cdb-variables/colors'; + +.CDB-Shape-close { + display: block; + position: relative; + height: 100%; + + &::before { + display: block; + position: absolute; + width: 1px; + transform: rotate(-45deg); + background: $cMainDark; + content: ''; + } + &::after { + display: block; + position: absolute; + width: 1px; + transform: rotate(45deg); + background: $cMainDark; + content: ''; + } + + &.is-huge { + &::before { + top: -2px; + left: 7px; + height: 20px; + } + &::after { + top: -2px; + right: 8px; + height: 20px; + } + } + + &.is-large { + &::before { + top: 2px; + left: 7px; + height: 12px; + } + &::after { + top: 2px; + right: 8px; + height: 12px; + } + } + + &.is-medium { + &::before { + top: 3px; + left: 6px; + height: 7px; + } + &::after { + top: 3px; + right: 6px; + height: 7px; + } + } + + &.is-small { + &::before { + top: 2px; + left: 4px; + height: 5px; + } + &::after { + top: 2px; + right: 4px; + height: 5px; + } + } +} + +.CDB-Shape-close.is-blue { + &::before { + background: $cBlue; + } + &::after { + background: $cBlue; + } +} + +.CDB-Shape-close.is-white { + &::before { + background: $cWhite; + } + &::after { + background: $cWhite; + } +} diff --git a/src/scss/cdb-components/shapes/dash.scss b/src/scss/cdb-components/shapes/dash.scss new file mode 100644 index 0000000..409bd20 --- /dev/null +++ b/src/scss/cdb-components/shapes/dash.scss @@ -0,0 +1,85 @@ +/* SG +# Shapes/Dash + +Description + +``` +

16px

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

12px

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+``` +*/ + +@import '../../cdb-variables/colors'; + +.CDB-Shape-dash { + position: relative; + height: 100%; + + &::before { + display: block; + position: absolute; + right: 2px; + bottom: 7px; + left: 2px; + height: 1px; + background: $cMainDark; + content: ''; + } +} + +.CDB-Shape-dash.is-small { + + &::before { + right: 3px; + left: 3px; + } +} + +.CDB-Shape-dash.is-blue { + &::before { + background: $cBlue; + } +} + +.CDB-Shape-dash.is-white { + &::before { + background: $cWhite; + } +} + + + 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/dots.scss b/src/scss/cdb-components/shapes/dots.scss new file mode 100644 index 0000000..3b55072 --- /dev/null +++ b/src/scss/cdb-components/shapes/dots.scss @@ -0,0 +1,28 @@ +// Shape styles +// ---------------------------------------------- + +/* SG +# Shapes/Dots + +You may resize and change the colors of the icons with the `glyph-`-classes. Available sizes and colors listed: + +``` + + +``` +*/ + +@import '../../cdb-variables/colors'; +@import '../../cdb-variables/sizes'; + +.CDB-Shape-dot { + display: inline-block; + width: $baseSize; + height: $baseSize; + border-radius: 50%; + background: $cSecondaryLine; + + &.is-selected { + background: $cTypo2; + } +} diff --git a/src/scss/cdb-components/shapes/error-circle.scss b/src/scss/cdb-components/shapes/error-circle.scss new file mode 100644 index 0000000..5a77161 --- /dev/null +++ b/src/scss/cdb-components/shapes/error-circle.scss @@ -0,0 +1,77 @@ +/* SG +# Shapes/Error circle + +Description + +``` +

16px

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

12px

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+``` +*/ + +@import '../../cdb-variables/colors'; + +.CDB-Shape-CircleItem { + width: 13px; + height: 13px; + border: 1px solid $cMainDark; + border-radius: 50%; + + &.is-small { + width: 9px; + height: 9px; + margin: 2px auto; + } + &.is-blue { + border: 1px solid $cBlue; + } + &.is-white { + border: 1px solid $cWhite; + } +} diff --git a/src/scss/cdb-components/shapes/hamburguer.scss b/src/scss/cdb-components/shapes/hamburguer.scss new file mode 100644 index 0000000..7b8ceff --- /dev/null +++ b/src/scss/cdb-components/shapes/hamburguer.scss @@ -0,0 +1,63 @@ +/* SG +# Shapes/Hamburguer + +Description + +``` +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+``` +*/ + +@import '../../cdb-variables/colors'; +@import '../../cdb-variables/sizes'; + +.CDB-Shape-hamburguer { + width: $baseSize * 2; + &:hover { + cursor: pointer; + } +} + +.CDB-Shape-hamburguerItem { + height: $baseSize / 4; + margin-bottom: $baseSize / 4; + background: $cMainDark; + + &:last-child { + margin-bottom: 0; + } +} + +.CDB-Shape-hamburguer.is-blue { + .CDB-Shape-hamburguerItem { + background: $cBlue; + } +} + +.CDB-Shape-hamburguer.is-white { + .CDB-Shape-hamburguerItem { + background: $cWhite; + } +} diff --git a/src/scss/cdb-components/shapes/magnify.scss b/src/scss/cdb-components/shapes/magnify.scss new file mode 100644 index 0000000..7f4f2f0 --- /dev/null +++ b/src/scss/cdb-components/shapes/magnify.scss @@ -0,0 +1,115 @@ +/* SG +# Shapes/Magnify + +Description + +``` +

16px

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

12px

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+``` +*/ + +@import '../../cdb-variables/colors'; + +.CDB-Shape-magnify { + display: block; + position: relative; + height: 100%; + + &::before { + display: block; + position: absolute; + top: 0; + left: 0; + width: 11px; + height: 11px; + border: 1px solid $cMainDark; + border-radius: 50%; + content: ''; + } + + &::after { + display: block; + position: absolute; + right: 2px; + bottom: -1px; + width: 1px; + height: 7px; + transform: rotate(314deg); + background: $cMainDark; + content: ''; + } +} + +.CDB-Shape-magnify.is-blue { + &::before { + border: 1px solid $cBlue; + } + &::after { + background: $cBlue; + } +} + +.CDB-Shape-magnify.is-white { + &::before { + border: 1px solid $cWhite; + } + &::after { + background: $cWhite; + } +} + +.CDB-Shape-magnify.is-small { + &::before { + top: 3px; + left: 3px; + width: 6px; + height: 6px; + } + + &::after { + display: block; + position: absolute; + right: 4px; + bottom: 2px; + width: 1px; + height: 5px; + transform: rotate(314deg); + content: ''; + } +} diff --git a/src/scss/cdb-components/shapes/move.scss b/src/scss/cdb-components/shapes/move.scss new file mode 100644 index 0000000..e1f423b --- /dev/null +++ b/src/scss/cdb-components/shapes/move.scss @@ -0,0 +1,130 @@ +/* SG +# Shapes/Move + +Description + +``` +

16px

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

12px

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+``` +*/ + +@import '../../cdb-variables/colors'; + +.CDB-Shape-Move { + padding: 1px 0 0; +} + +.CDB-Shape-Move.is-small { + padding: 3px 0 0 1px; + + .CDB-Shape-MoveItem { + margin-bottom: 2px; + + &::before { + width: 2px; + height: 2px; + } + &::after { + width: 2px; + height: 2px; + margin-left: 1px; + } + } +} + +.CDB-Shape-MoveItem { + margin-bottom: 3px; + + &:last-child { + margin-bottom: 0; + } + &::before { + display: inline-block; + width: 3px; + height: 3px; + background: $cMainDark; + content: ''; + } + + &::after { + display: inline-block; + width: 3px; + height: 3px; + margin-left: 2px; + background: $cMainDark; + content: ''; + } +} + +.CDB-Shape-MoveItem.is-blue { + &::before, + &::after { + background: $cBlue; + } +} + +.CDB-Shape-MoveItem.is-white { + &::before, + &::after { + background: $cWhite; + } +} diff --git a/src/scss/cdb-components/shapes/threePoints.scss b/src/scss/cdb-components/shapes/threePoints.scss new file mode 100644 index 0000000..36bb47c --- /dev/null +++ b/src/scss/cdb-components/shapes/threePoints.scss @@ -0,0 +1,107 @@ +/* SG +# Shapes/Three Points + +Description + +``` +

16px

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

12px

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+``` +*/ + +@import '../../cdb-variables/colors'; + +.CDB-Shape-threePoints { + display: inline-block; +} + +.CDB-Shape-threePointsItem { + width: 2px; + height: 2px; + margin-bottom: 5px; + background: $cMainDark; + &: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-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 new file mode 100644 index 0000000..86f302a --- /dev/null +++ b/src/scss/cdb-components/shapes/toogle-arrow.scss @@ -0,0 +1,147 @@ +/* SG +# Shapes/Toogle Arrows + +Description + +``` +

16px

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

12px

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

16px

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

12px

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+``` +*/ + +@import '../../cdb-variables/colors'; + +.CDB-ArrowToogle { + position: relative; + height: 100%; + + &::before { + display: block; + position: absolute; + top: 8px; + left: 0; + width: 10px; + height: 1px; + transform: rotate(-45deg); + background: $cMainDark; + content: ''; + } + &::after { + display: block; + position: absolute; + top: 8px; + right: -1px; + width: 10px; + height: 1px; + transform: rotate(45deg); + background: $cMainDark; + content: ''; + } +} + +.CDB-ArrowToogle.is-down { + transform: rotate(180deg); +} + +.CDB-ArrowToogle.is-small { + &::before { + left: 2px; + width: 8px; + } + &::after { + right: 1px; + width: 8px; + } +} + +.CDB-ArrowToogle.is-blue { + &::before { + background: $cBlue; + } + &::after { + background: $cBlue; + } +} + +.CDB-ArrowToogle.is-white { + &::before { + background: $cWhite; + } + &::after { + background: $cWhite; + } +} 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 a1a7e26..a9b844b 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 61f9797..c5895d8 100644 --- a/src/scss/cdb-utilities/helpers.scss +++ b/src/scss/cdb-utilities/helpers.scss @@ -8,6 +8,9 @@ .u-tSpace { margin-top: 4px; } +.u-tSpace--m { + margin-top: 8px; +} .u-tSpace-xl { margin-top: 12px; } @@ -23,6 +26,9 @@ .u-rSpace--xl { margin-right: 12px; } +.u-bSpace { + margin-bottom: 4px; +} .u-bSpace--m { margin-bottom: 8px; } diff --git a/src/scss/cdb-variables/_colors.scss b/src/scss/cdb-variables/_colors.scss index 7c7ff2d..fc0bc81 100644 --- a/src/scss/cdb-variables/_colors.scss +++ b/src/scss/cdb-variables/_colors.scss @@ -29,3 +29,4 @@ $cPublic: #9BC63B; $cLink: #FEB100; $cPassword: #FB7B23; $cError: #F15743; +$cHighlightYellow: #FFFFC0;