From 04077238c8ef9e07d72303c4dd829f16ae1f112c Mon Sep 17 00:00:00 2001 From: piensaenpixel Date: Mon, 21 Mar 2016 11:10:59 +0100 Subject: [PATCH] add shapes --- src/fonts/cartoIcon.eot | Bin 19808 -> 19808 bytes src/fonts/cartoIcon.ttf | Bin 19636 -> 19636 bytes src/fonts/cartoIcon.woff | Bin 12424 -> 12424 bytes src/scss/cdb-components/shapes/widgets.scss | 389 ++++++++++++++++++++ 4 files changed, 389 insertions(+) create mode 100644 src/scss/cdb-components/shapes/widgets.scss diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index 051e7c50c57c247ebedb5b704dcbf5762dac9901..e4671928275b690f200a7a2beedc3aa7619ef03c 100644 GIT binary patch delta 58 zcmaDbi}ArM#tAkox)nzaCpxTQ`6H>$H}S(18N;I$y7BxrUm3U=e=z{TWzk|G7`=G` H;{k5~fb0|3 delta 58 zcmaDbi}ArM#tAkoSN9qkO>|hp^7}E1)x-}|WQ+{=UXACs`O3h}_=^DuF8xYe0i!oB IU_9Ur0NmCXEdT%j diff --git a/src/fonts/cartoIcon.ttf b/src/fonts/cartoIcon.ttf index c7112e76b6da87e0625901f91931ae8a976b9ab9..5e595c4708679fbb0e47c71d2e9fc7502e11e80a 100644 GIT binary patch delta 49 ycmdlolX1&T#t9BAe$I}i#0 delta 49 ycmdlolX1&T#t9BAzaO($O>~(eV`RAZYCONqR|amzUkpHS=~vM!zZl a|D7v>@eh#8!N3F(1ptaE4)e2bDH#XUpd66^ diff --git a/src/scss/cdb-components/shapes/widgets.scss b/src/scss/cdb-components/shapes/widgets.scss new file mode 100644 index 0000000..1887941 --- /dev/null +++ b/src/scss/cdb-components/shapes/widgets.scss @@ -0,0 +1,389 @@ +/* SG +# Shapes/Widgets Carousel + +Description + +``` +
+
+

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

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

+

+

+
+
+ +
+
+ +
+
+
+

+

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

+
+
    +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
+
+
+
+ +``` +*/ + +@import '../../cdb-variables/colors'; +@import '../../cdb-utilities/mixins'; + + +/* Histogram */ + +.ShapeCarousel { + position: relative; + width: 56px; + height: 32px; + border: 1px solid $cSecondaryLine; + border-radius: 2px; + background: $cWhite; + box-sizing: border-box; +} + +.ShapeCarousel-histogram { + position: absolute; + top: 7px; + left: 7px; +} + +.ShapeCarousel-histogram-title { + width: 16px; + height: 3px; + margin-bottom: 5px; + background: $cSecondaryLine; +} + + +.ShapeCarousel-histogram-list { + display: inline; + padding-left: 4px; + vertical-align: top; +} + +.ShapeCarousel-histogram-item { + display: inline-block; + width: 2px; + margin-left: -3px; + background: $cHighlight; +} + +@for $i from 1 through 14 { + .ShapeCarousel-histogram-item--#{$i} { + height: random(9) + px; + } +} + +/* Category */ + +.ShapeCarousel-category { + position: absolute; + top: 6px; + right: 6px; + left: 6px; +} + +.ShapeCarousel-category-title { + width: 16px; + height: 3px; + margin-bottom: 6px; + background: $cSecondaryLine; +} + +.ShapeCarousel-category-item { + height: 2px; + margin-bottom: 5px; + background: $cSecondaryLine; +} + +.ShapeCarousel-category-item:last-child { + margin-bottom: 0; +} + +.ShapeCarousel-category-percent { + height: 2px; + background: $cHighlight; +} + +@for $i from 1 through 2 { + .ShapeCarousel-category-percent--#{$i} { + width: random(42) + px; + } +} + +/* Formula */ + +.ShapeCarousel-formula { + position: absolute; + top: 5px; + left: 7px; + width: 40px; +} + +.ShapeCarousel-formula-title { + width: 16px; + height: 3px; + margin-bottom: 5px; + background: $cSecondaryLine; +} + +.ShapeCarousel-formula-info { + width: 16px; + height: 2px; + margin-bottom: 3px; + background: $cSecondaryLine; +} + +.ShapeCarousel-formula-number { + height: 7px; + background: $cSecondaryLine; +} + + +/* Time Series */ + +.ShapeCarousel-timeSeries { + position: absolute; + top: 0; + left: 7px; + width: 40px; +} + +.ShapeCarousel-timeSeries-header { + margin-bottom: 1px; +} + +.ShapeCarousel-timeSeries-title { + @include inline-block(); + width: 16px; + height: 3px; + margin-left: -2px; + background: $cSecondaryLine; +} + +.ShapeCarousel-timeSeries-play { + @include inline-block(); + width: 0; + height: 0; + border: 4px solid transparent; + border-left: 5px solid #979EA1; +} + +.ShapeCarousel-timeSeries-list { + display: inline; + padding-left: 4px; + vertical-align: top; +} + +.ShapeCarousel-timeSeries-item { + display: inline-block; + width: 2px; + margin-left: -3px; + background: $cSecondaryLine; +} + +@for $i from 1 through 14 { + .ShapeCarousel-timeSeries-item--#{$i} { + height: random(9) + px; + } +} + +@for $i from 1 through 6 { + .ShapeCarousel-timeSeries-item--#{$i} { + background: #F2CC8F; + } +} + + +/* Time Series */ + +.ShapeCarousel-timeOfTheDay { + position: absolute; + top: 5px; + left: 5px; + width: 40px; +} + +.ShapeCarousel-timeOfTheDay-title { + width: 16px; + height: 3px; + margin-bottom: 5px; + background: $cSecondaryLine; +} + +.ShapeCarousel-timeOfTheDay-play { + @include inline-block(); + width: 0; + height: 0; + border: 4px solid transparent; + border-left: 5px solid #979EA1; +} + +.ShapeCarousel-timeOfTheDay-graphic { + position: relative; + height: 8px; + padding-top: 3px; + overflow: hidden; +} + +.ShapeCarousel-timeOfTheDay-graphic::before, +.ShapeCarousel-timeOfTheDay-graphic::after { + display: inline-block; + position: absolute; + top: 0; + width: 22px; + height: 22px; + background: rgba($cMainBg, 0.04); + content: ''; +} + + +.ShapeCarousel-timeOfTheDay-graphic::before { + left: 0; + border-top-right-radius: 80%; +} + +.ShapeCarousel-timeOfTheDay-graphic::after { + right: 0; + border-top-left-radius: 80%; +} + +.ShapeCarousel-timeOfTheDay-list { + display: inline; + position: relative; + padding-left: 4px; + vertical-align: top; + z-index: 2; +} + +.ShapeCarousel-timeOfTheDay-item { + display: inline-block; + width: 2px; + margin-left: -3px; + background: $cHighlight; +} + +.ShapeCarousel-timeOfTheDay-item--1, +.ShapeCarousel-timeOfTheDay-item--14 { + height: 8px; +} + +.ShapeCarousel-timeOfTheDay-item--2, +.ShapeCarousel-timeOfTheDay-item--13 { + height: 7px; +} + +.ShapeCarousel-timeOfTheDay-item--3, +.ShapeCarousel-timeOfTheDay-item--12 { + height: 5px; +} + +.ShapeCarousel-timeOfTheDay-item--4, +.ShapeCarousel-timeOfTheDay-item--11 { + height: 4px; +} + +.ShapeCarousel-timeOfTheDay-item--5, +.ShapeCarousel-timeOfTheDay-item--10 { + height: 3px; +} + +.ShapeCarousel-timeOfTheDay-item--6, +.ShapeCarousel-timeOfTheDay-item--7, +.ShapeCarousel-timeOfTheDay-item--8, +.ShapeCarousel-timeOfTheDay-item--9 { + height: 2px; +} + + + + +