diff --git a/src/fonts/cartoIcon.eot b/src/fonts/cartoIcon.eot index 051e7c5..e467192 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 c7112e7..5e595c4 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 1e0eba1..37c5c62 100644 Binary files a/src/fonts/cartoIcon.woff and b/src/fonts/cartoIcon.woff differ 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; +} + + + + +