Compare commits
2 Commits
master
...
icons-widg
| Author | SHA1 | Date | |
|---|---|---|---|
|
5e6415b699 | ||
|
|
04077238c8 |
Binary file not shown.
Binary file not shown.
Binary file not shown.
161
src/scss/cdb-components/shapes/views.scss
Normal file
161
src/scss/cdb-components/shapes/views.scss
Normal file
@ -0,0 +1,161 @@
|
||||
/* SG
|
||||
# Shapes/Mode Carousel
|
||||
|
||||
Description
|
||||
|
||||
```
|
||||
<div class="ModeCarousel ModeCarousel--embed">
|
||||
<p class="ModeCarousel-Embed-text ModeCarousel-Embed-text--01"></p>
|
||||
<p class="ModeCarousel-Embed-text ModeCarousel-Embed-text--02"></p>
|
||||
<div class="ModeCarousel-Map ModeCarousel-Map--embed"></div>
|
||||
<p class="ModeCarousel-Embed-text"></p>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div class="ModeCarousel ModeCarousel--desktop">
|
||||
<ul class="ModeCarousel-Desktop-header">
|
||||
<li class="ModeCarousel-Desktop-headerItems ModeCarousel-Desktop-headerItems--1"></li>
|
||||
<li class="ModeCarousel-Desktop-headerItems ModeCarousel-Desktop-headerItems--2"></li>
|
||||
<li class="ModeCarousel-Desktop-headerItems ModeCarousel-Desktop-headerItems--3"></li>
|
||||
</ul>
|
||||
<div class="ModeCarousel-Map ModeCarousel-Map--desktop"></div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div class="ModeCarousel ModeCarousel--mobile">
|
||||
<div class="ModeCarousel-Mobile-header">
|
||||
<div class="ModeCarousel-Mobile-camera"></div>
|
||||
<div class="ModeCarousel-Mobile-speaker"></div>
|
||||
</div>
|
||||
<div class="ModeCarousel-Map ModeCarousel-Map--mobile"></div>
|
||||
<div class="ModeCarousel-Mobile-microphone"></div>
|
||||
</div>
|
||||
|
||||
```
|
||||
*/
|
||||
|
||||
@import '../../cdb-variables/colors';
|
||||
@import '../../cdb-utilities/mixins';
|
||||
|
||||
|
||||
.ModeCarousel-Map {
|
||||
border-radius: 1px;
|
||||
background: $cHighlight;
|
||||
}
|
||||
|
||||
.ModeCarousel-Map--embed {
|
||||
width: 27px;
|
||||
height: 12px;
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
.ModeCarousel-Map--mobile {
|
||||
height: 24px;
|
||||
margin: 1px 0;
|
||||
}
|
||||
|
||||
.ModeCarousel-Map--desktop {
|
||||
height: 15px;
|
||||
margin: 3px 5px;
|
||||
}
|
||||
|
||||
.ModeCarousel {
|
||||
position: relative;
|
||||
border: 1px solid $cSecondaryLine;
|
||||
border-radius: 2px;
|
||||
background: $cWhite;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ModeCarousel--embed,
|
||||
.ModeCarousel--desktop {
|
||||
width: 56px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.ModeCarousel--embed {
|
||||
padding: 3px 4px;
|
||||
}
|
||||
|
||||
.ModeCarousel--mobile {
|
||||
width: 18px;
|
||||
height: 34px;
|
||||
padding: 2px 2px 3px;
|
||||
}
|
||||
|
||||
.ModeCarousel-Embed-text {
|
||||
height: 2px;
|
||||
margin-top: 1px;
|
||||
background: $cMainLine;
|
||||
}
|
||||
.ModeCarousel-Embed-text--01 {
|
||||
width: 37px;
|
||||
}
|
||||
.ModeCarousel-Embed-text--02 {
|
||||
width: 27px;
|
||||
}
|
||||
|
||||
.ModeCarousel-Mobile-microphone {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
margin: 0 auto;
|
||||
border-radius: 50%;
|
||||
background: $cMainLine;
|
||||
}
|
||||
.ModeCarousel-Mobile-camera,
|
||||
.ModeCarousel-Mobile-speaker {
|
||||
display: inline-block;
|
||||
background: $cMainLine;
|
||||
vertical-align: top;
|
||||
}
|
||||
.ModeCarousel-Mobile-header {
|
||||
height: 1px;
|
||||
text-align: center;
|
||||
}
|
||||
.ModeCarousel-Mobile-camera {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.ModeCarousel-Mobile-speaker {
|
||||
width: 4px;
|
||||
height: 1px;
|
||||
margin-left: -2px;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.ModeCarousel-Desktop-header {
|
||||
box-sizing: border-box;
|
||||
height: 8px;
|
||||
padding: 2px 4px;
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
background: #DDD;
|
||||
}
|
||||
.ModeCarousel-Desktop-headerItems {
|
||||
display: inline-block;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
border-radius: 50%;
|
||||
vertical-align: top;
|
||||
margin-left: -2px;
|
||||
}
|
||||
|
||||
.ModeCarousel-Desktop-headerItems--1 {
|
||||
background: $cError;
|
||||
}
|
||||
.ModeCarousel-Desktop-headerItems--2 {
|
||||
background: $cAlert;
|
||||
}
|
||||
.ModeCarousel-Desktop-headerItems--3 {
|
||||
background: #8FB83F;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
389
src/scss/cdb-components/shapes/widgets.scss
Normal file
389
src/scss/cdb-components/shapes/widgets.scss
Normal file
@ -0,0 +1,389 @@
|
||||
/* SG
|
||||
# Shapes/Widgets Carousel
|
||||
|
||||
Description
|
||||
|
||||
```
|
||||
<div class="ShapeCarousel">
|
||||
<div class="ShapeCarousel-histogram">
|
||||
<h2 class="ShapeCarousel-histogram-title"></h2>
|
||||
<ul class="ShapeCarousel-histogram-list">
|
||||
<li class="ShapeCarousel-histogram-item ShapeCarousel-histogram-item--1"></li>
|
||||
<li class="ShapeCarousel-histogram-item ShapeCarousel-histogram-item--2"></li>
|
||||
<li class="ShapeCarousel-histogram-item ShapeCarousel-histogram-item--3"></li>
|
||||
<li class="ShapeCarousel-histogram-item ShapeCarousel-histogram-item--4"></li>
|
||||
<li class="ShapeCarousel-histogram-item ShapeCarousel-histogram-item--5"></li>
|
||||
<li class="ShapeCarousel-histogram-item ShapeCarousel-histogram-item--6"></li>
|
||||
<li class="ShapeCarousel-histogram-item ShapeCarousel-histogram-item--7"></li>
|
||||
<li class="ShapeCarousel-histogram-item ShapeCarousel-histogram-item--8"></li>
|
||||
<li class="ShapeCarousel-histogram-item ShapeCarousel-histogram-item--9"></li>
|
||||
<li class="ShapeCarousel-histogram-item ShapeCarousel-histogram-item--10"></li>
|
||||
<li class="ShapeCarousel-histogram-item ShapeCarousel-histogram-item--11"></li>
|
||||
<li class="ShapeCarousel-histogram-item ShapeCarousel-histogram-item--12"></li>
|
||||
<li class="ShapeCarousel-histogram-item ShapeCarousel-histogram-item--13"></li>
|
||||
<li class="ShapeCarousel-histogram-item ShapeCarousel-histogram-item--14"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div class="ShapeCarousel">
|
||||
<div class="ShapeCarousel-category">
|
||||
<h2 class="ShapeCarousel-category-title"></h2>
|
||||
<ul class="ShapeCarousel-category-list">
|
||||
<li class="ShapeCarousel-category-item">
|
||||
<div class="ShapeCarousel-category-percent ShapeCarousel-category-percent--1"></div>
|
||||
</li>
|
||||
<li class="ShapeCarousel-category-item">
|
||||
<div class="ShapeCarousel-category-percent ShapeCarousel-category-percent--2"></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div class="ShapeCarousel">
|
||||
<div class="ShapeCarousel-formula">
|
||||
<h2 class="ShapeCarousel-formula-title"></h2>
|
||||
<p class="ShapeCarousel-formula-info"></p>
|
||||
<h3 class="ShapeCarousel-formula-number"></h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div class="ShapeCarousel">
|
||||
<div class="ShapeCarousel-timeSeries">
|
||||
<div class="ShapeCarousel-timeSeries-header">
|
||||
<p class="ShapeCarousel-timeSeries-play"></p>
|
||||
<h2 class="ShapeCarousel-timeSeries-title"></h2>
|
||||
</div>
|
||||
<ul class="ShapeCarousel-timeSeries-list">
|
||||
<li class="ShapeCarousel-timeSeries-item ShapeCarousel-timeSeries-item--1"></li>
|
||||
<li class="ShapeCarousel-timeSeries-item ShapeCarousel-timeSeries-item--2"></li>
|
||||
<li class="ShapeCarousel-timeSeries-item ShapeCarousel-timeSeries-item--3"></li>
|
||||
<li class="ShapeCarousel-timeSeries-item ShapeCarousel-timeSeries-item--4"></li>
|
||||
<li class="ShapeCarousel-timeSeries-item ShapeCarousel-timeSeries-item--5"></li>
|
||||
<li class="ShapeCarousel-timeSeries-item ShapeCarousel-timeSeries-item--6"></li>
|
||||
<li class="ShapeCarousel-timeSeries-item ShapeCarousel-timeSeries-item--7"></li>
|
||||
<li class="ShapeCarousel-timeSeries-item ShapeCarousel-timeSeries-item--8"></li>
|
||||
<li class="ShapeCarousel-timeSeries-item ShapeCarousel-timeSeries-item--9"></li>
|
||||
<li class="ShapeCarousel-timeSeries-item ShapeCarousel-timeSeries-item--10"></li>
|
||||
<li class="ShapeCarousel-timeSeries-item ShapeCarousel-timeSeries-item--11"></li>
|
||||
<li class="ShapeCarousel-timeSeries-item ShapeCarousel-timeSeries-item--12"></li>
|
||||
<li class="ShapeCarousel-timeSeries-item ShapeCarousel-timeSeries-item--13"></li>
|
||||
<li class="ShapeCarousel-timeSeries-item ShapeCarousel-timeSeries-item--14"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<div class="ShapeCarousel">
|
||||
<div class="ShapeCarousel-timeOfTheDay">
|
||||
<h2 class="ShapeCarousel-timeOfTheDay-title"></h2>
|
||||
<div class="ShapeCarousel-timeOfTheDay-graphic">
|
||||
<ul class="ShapeCarousel-timeOftheDay-list">
|
||||
<li class="ShapeCarousel-timeOfTheDay-item ShapeCarousel-timeOfTheDay-item--1"></li>
|
||||
<li class="ShapeCarousel-timeOfTheDay-item ShapeCarousel-timeOfTheDay-item--2"></li>
|
||||
<li class="ShapeCarousel-timeOfTheDay-item ShapeCarousel-timeOfTheDay-item--3"></li>
|
||||
<li class="ShapeCarousel-timeOfTheDay-item ShapeCarousel-timeOfTheDay-item--4"></li>
|
||||
<li class="ShapeCarousel-timeOfTheDay-item ShapeCarousel-timeOfTheDay-item--5"></li>
|
||||
<li class="ShapeCarousel-timeOfTheDay-item ShapeCarousel-timeOfTheDay-item--6"></li>
|
||||
<li class="ShapeCarousel-timeOfTheDay-item ShapeCarousel-timeOfTheDay-item--7"></li>
|
||||
<li class="ShapeCarousel-timeOfTheDay-item ShapeCarousel-timeOfTheDay-item--8"></li>
|
||||
<li class="ShapeCarousel-timeOfTheDay-item ShapeCarousel-timeOfTheDay-item--9"></li>
|
||||
<li class="ShapeCarousel-timeOfTheDay-item ShapeCarousel-timeOfTheDay-item--10"></li>
|
||||
<li class="ShapeCarousel-timeOfTheDay-item ShapeCarousel-timeOfTheDay-item--11"></li>
|
||||
<li class="ShapeCarousel-timeOfTheDay-item ShapeCarousel-timeOfTheDay-item--12"></li>
|
||||
<li class="ShapeCarousel-timeOfTheDay-item ShapeCarousel-timeOfTheDay-item--13"></li>
|
||||
<li class="ShapeCarousel-timeOfTheDay-item ShapeCarousel-timeOfTheDay-item--14"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```
|
||||
*/
|
||||
|
||||
@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: 5px;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
.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: 5px;
|
||||
right: 5px;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
.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;
|
||||
right: 6px;
|
||||
left: 6px;
|
||||
}
|
||||
|
||||
.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: -1px;
|
||||
left: 6px;
|
||||
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: 3px 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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user