cartodb4/CartoAssets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Solved conflicts with master

Browse Source
This commit is contained in:
María Checa 2016-02-05 10:47:45 +01:00
commit 853ee6913a
15 changed files with 573 additions and 216 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
src/scss/cdb-components/boxes.scss
View File

@ -2,7 +2,7 @@
// ---------------------------------------------- // ----------------------------------------------
/* SG /* SG
# Boxes/Box Dropdown # Boxes/Dropdown
``` ```
@ -21,6 +21,136 @@
box-shadow: 0 $baseSize $baseSize * 2 0 rgba(0, 0, 0, 0.16); box-shadow: 0 $baseSize $baseSize * 2 0 rgba(0, 0, 0, 0.16);
} }
/* SG
# Boxes/Loader
```
<div class="CDB-BoxLoader">
<ul class="CDB-BoxLoader-inner">
<li class="CDB-BoxLoader-item">
<div class="CDB-Shape u-rSpace--m">
<div class="CDB-Shape-CircleItem is-green is-medium">
<div class="CDB-Shape-tick is-medium is-green"></div>
</div>
</div>
<div class="CDB-BoxLoader-info">
<p class="CDB-Text CDB-Size-medium">Query applied. Showing 2,561 rows, Query applied. Showing 2,561 rows, Query applied. Showing 2,561 rows Query applied. Showing 2,561 rowsQuery applied. Showing 2,561 rows Query applied. Showing 2,561 rows</p>
</div>
<div class="CDB-BoxLoader-actions">
<div class="CDB-Shape">
<div class="CDB-Shape-threePoints is-small is-blue">
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
</div>
</div>
</div>
</li>
</ul>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="CDB-BoxLoader">
<ul class="CDB-BoxLoader-inner">
<li class="CDB-BoxLoader-item">
<div class="CDB-Shape u-rSpace--m">
<div class="CDB-Shape-CircleItem is-green is-medium">
<div class="CDB-Shape-tick is-medium is-green"></div>
</div>
</div>
<div class="CDB-BoxLoader-info">
<p class="CDB-Text CDB-Size-medium">Finished importing <a href="#">populated_places_2</a></p>
</div>
</li>
<li class="CDB-BoxLoader-item is-working">
<div class="CDB-LoaderIcon u-rSpace--m">
<div class="CDB-LoaderIcon-item"></div>
</div>
<div class="CDB-BoxLoader-info">
<p class="CDB-Text CDB-Size-medium">Geocoding populated_places_2 (28%)</p>
</div>
<div class="CDB-BoxLoader-actions">
<div class="CDB-Shape">
<div class="CDB-Shape-close is-blue is-large"></div>
</div>
</div>
</li>
</ul>
<ul class="CDB-BoxLoader-inner">
<li class="CDB-BoxLoader-item">
<div class="CDB-Shape u-rSpace--m">
<div class="CDB-Shape-CircleItem is-green is-medium">
<div class="CDB-Shape-tick is-medium is-green"></div>
</div>
</div>
<div class="CDB-BoxLoader-info">
<p class="CDB-Text CDB-Size-medium">Finished importing <a href="#">populated_places_2</a></p>
</div>
</li>
</ul>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="CDB-BoxLoader">
<ul class="CDB-BoxLoader-inner">
<li class="CDB-BoxLoader-item">
<div class="CDB-Shape u-rSpace--m">
<div class="CDB-Shape-CircleItem is-red">
<div class="CDB-Shape-close is-medium is-red"></div>
</div>
</div>
<div class="CDB-BoxLoader-info">
<p class="CDB-Text CDB-Size-medium">Error in query. Data might be outdated</p>
</div>
<div class="CDB-BoxLoader-actions">
<div class="CDB-Shape">
<div class="CDB-Shape-threePoints is-small is-blue">
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div>
</div>
</div>
</div>
</li>
</ul>
</div>
```
*/
.CDB-BoxLoader {
padding: 0 $baseSize * 3;
border-top: 1px solid $cMainLine;
}
.CDB-BoxLoader-inner {
padding: $baseSize + 4 0;
border-top: 1px solid $cMainLine;
&:first-child {
border-top: 0;
}
}
.CDB-BoxLoader-item {
@include display-flex();
padding: $baseSize 0;
color: $cTypo2;
&.is-working {
color: $cTypo3;
}
}
.CDB-BoxLoader-info {
@include flex(1);
padding-right: $baseSize * 2;
}
/* SG /* SG
# Boxes/Info Boxes # Boxes/Info Boxes

64
src/scss/cdb-components/forms/checkbox.scss
View File

@ -5,9 +5,18 @@
# Forms/Checkbox # Forms/Checkbox
``` ```
<input type="checkbox" name="vehicle" value="Bike" class="CDB-Checkbox" checked> <div class="u-iBlock">
<input type="checkbox" name="vehicle" value="Bus" class="CDB-Checkbox"> <input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bike" checked>
<input type="checkbox" name="vehicle" value="Car" class="CDB-Checkbox" disabled> <span class="u-iBlock CDB-Checkbox-face"></span>
</div>
<div class="u-iBlock">
<input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bus">
<span class="u-iBlock CDB-Checkbox-face"></span>
</div>
<div class="u-iBlock">
<input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Car" disabled>
<span class="u-iBlock CDB-Checkbox-face"></span>
</div>
``` ```
*/ */
@ -15,11 +24,23 @@
@import '../../cdb-variables/colors'; @import '../../cdb-variables/colors';
.CDB-Checkbox { .CDB-Checkbox {
position: absolute;
width: $baseSize * 2;
height: $baseSize * 2;
opacity: 0;
vertical-align: middle;
z-index: 1;
}
.CDB-Checkbox-face {
position: relative; position: relative;
width: $baseSize * 2; width: $baseSize * 2;
height: $baseSize * 2; height: $baseSize * 2;
border: 1px solid $cMainLine; border: 1px solid $cMainLine;
border-radius: 3px; border-radius: 3px;
background: $cWhite;
cursor: pointer;
box-sizing: border-box;
&::before, &::before,
&::after { &::after {
@ -43,40 +64,37 @@
height: $baseSize - 2; height: $baseSize - 2;
transform: rotate(-45deg); transform: rotate(-45deg);
} }
}
&:checked { .CDB-Checkbox:checked + .CDB-Checkbox-face {
border: 1px solid $cBlue; border: 1px solid $cBlue;
background: $cBlue; background: $cBlue;
&:hover {
border: 1px solid $cBlue;
}
&::before, &::before,
&::after { &::after {
background: $cWhite; background: $cWhite;
} }
} }
&:focus { .CDB-Checkbox:disabled + .CDB-Checkbox-face {
border: 1px solid $cBlue;
}
&:hover {
border: 1px solid $cHoverLine;
}
&:disabled {
border: 1px solid $cSecondaryLine; border: 1px solid $cSecondaryLine;
background: $cThirdBackground; background: $cThirdBackground;
&:hover {
border: 1px solid $cSecondaryLine;
}
&::before, &::before,
&::after { &::after {
background: $cWhite; background: $cWhite;
} }
} }
.CDB-Checkbox:disabled:hover + .CDB-Checkbox-face {
border: 1px solid $cSecondaryLine;
}
.CDB-Checkbox:checked:hover + .CDB-Checkbox-face,
.CDB-Checkbox:focus + .CDB-Checkbox-face {
border: 1px solid $cBlue;
}
.CDB-Checkbox:hover + .CDB-Checkbox-face {
border: 1px solid $cHoverLine;
} }

2
src/scss/cdb-components/forms/inputs.scss
View File

@ -18,7 +18,7 @@
width: 100%; width: 100%;
padding: 7px 8px 6px; padding: 7px 8px 6px;
border: 1px solid $cMainLine; border: 1px solid $cMainLine;
border-radius: 3px; border-radius: $baseSize / 2;
font-size: $sFontSize-medium; font-size: $sFontSize-medium;
line-height: $sLineHeight-medium; line-height: $sLineHeight-medium;

50
src/scss/cdb-components/forms/legends.scss
View File

@ -5,26 +5,30 @@
# Forms/Labels # Forms/Labels
``` ```
<label class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl"> <div class="u-iBlock CDB-Text CDB-Size-medium u-rSpace--xl">
<input class="CDB-Radio u-iBlock u-rSpace--s" type="radio" name="True" value="01" checked> <input class="CDB-Radio" type="radio" name="veritas" value="01">
<span class="u-iBlock">True</span> <span class="u-iBlock CDB-Radio-face"></span>
</label> <label class="u-iBlock u-lSpace">True</label>
<label class="u-iblock CDB-Text CDB-Size-medium"> </div>
<input class="CDB-Radio u-iBlock u-rSpace--s" type="radio" name="True" value="02" checked> <div class="u-iBlock CDB-Text CDB-Size-medium u-rSpace--xl">
<span class="u-iBlock">False</span> <input class="CDB-Radio" type="radio" name="veritas" value="02" checked>
</label> <span class="u-iBlock CDB-Radio-face"></span>
<label class="u-iBlock u-lSpace">False</label>
</div>
<br/> <br/>
<br/> <br/>
<br/> <br/>
<label class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl"> <div class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl">
<input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="hobbies" value="Sport" > <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Sport">
<span class="u-iBlock">Sport</span> <span class="u-iBlock CDB-Checkbox-face"></span>
</label> <label class="u-iBlock u-lSpace">Sport</label>
</div>
<label class="u-iblock CDB-Text CDB-Size-medium"> <label class="u-iblock CDB-Text CDB-Size-medium">
<input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="hobbies" value="Travel"> <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Travel">
<span class="u-iBlock">Travel</span> <span class="u-iBlock CDB-Checkbox-face"></span>
<label class="u-iBlock u-lSpace">Travel</label>
</label> </label>
<br/> <br/>
@ -35,21 +39,23 @@
<p class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p> <p class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p>
<ul class="CDB-Text CDB-Size-medium u-iBlock"> <ul class="CDB-Text CDB-Size-medium u-iBlock">
<li class="u-iBlock u-rSpace--xl"> <li class="u-iBlock u-rSpace--xl">
<label> <div class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl">
<input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="Gender" value="Travel"> <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Sport">
<span class="u-iBlock">Travel</span> <span class="u-iBlock CDB-Checkbox-face"></span>
</label> <label class="u-iBlock u-lSpace">Sport</label>
</div>
</li> </li>
<li class="u-iblock"> <li class="u-iblock">
<label> <label class="u-iblock CDB-Text CDB-Size-medium">
<input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="Gender" value="Travel"> <input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Travel">
<span class="u-iBlock">Travel</span> <span class="u-iBlock CDB-Checkbox-face"></span>
<label class="u-iBlock u-lSpace">Travel</label>
</label> </label>
</li> </li>
</ul> </ul>
</fieldset> </fieldset>
<fieldset class="u-tSpace-xl CDB-Text"> <fieldset class="u-tSpace-xl CDB-Text">
<p class="CDB-Legend u-iBlock is-semibold CDB-Size-small u-rSpace--m">RADIO</p> <p class="CDB-Legend u-iBlock CDB-Text is-semibold CDB-Size-small u-rSpace--m">RADIO</p>
<div class="u-iBlock"> <div class="u-iBlock">
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText"> <input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText">
</div> </div>

70
src/scss/cdb-components/forms/radio.scss
View File

@ -1,14 +1,23 @@
// Radio Button styles
// Radios styles
// ---------------------------------------------- // ----------------------------------------------
/* SG /* SG
# Forms/Radio # Forms/Radio
``` ```
<input class="CDB-Radio" type="radio" name="Gender" value="01" checked> <div class="u-iBlock">
<input class="CDB-Radio" type="radio" name="Gender" value="02"> <input class="CDB-Radio" type="radio" name="gender" value="01" checked>
<input class="CDB-Radio" type="radio" name="Gender" value="03" disabled> <span class="u-iBlock CDB-Radio-face"></span>
</div>
<div class="u-iBlock">
<input class="CDB-Radio" type="radio" name="gender" value="02">
<span class="u-iBlock CDB-Radio-face"></span>
</div>
<div class="u-iBlock">
<input class="CDB-Radio" type="radio" name="gender" value="03" disabled>
<span class="u-iBlock CDB-Radio-face"></span>
</div>
``` ```
*/ */
@ -16,14 +25,26 @@
@import '../../cdb-variables/colors'; @import '../../cdb-variables/colors';
.CDB-Radio { .CDB-Radio {
position: absolute;
width: $baseSize * 2;
height: $baseSize * 2;
opacity: 0;
vertical-align: middle;
z-index: 1;
}
.CDB-Radio-face {
position: relative; position: relative;
width: $baseSize * 2; width: $baseSize * 2;
height: $baseSize * 2; height: $baseSize * 2;
border: 1px solid $cMainLine; border: 1px solid $cMainLine;
border-radius: 50%; border-radius: 50%;
background: $cWhite;
text-indent: 20px;
cursor: pointer;
box-sizing: border-box;
&::before { &::before {
display: block;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -35,38 +56,35 @@
background: $cSecondaryLine; background: $cSecondaryLine;
content: ''; content: '';
} }
}
&:checked { .CDB-Radio:checked + .CDB-Radio-face {
border: 1px solid $cBlue; border: 1px solid $cBlue;
background: $cBlue; background: $cBlue;
&:hover {
border: 1px solid $cBlue;
}
&::before { &::before {
background: $cWhite; background: $cWhite;
} }
} }
&:focus { .CDB-Radio:disabled + .CDB-Radio-face {
border: 1px solid $cBlue;
}
&:hover {
border: 1px solid $cHoverLine;
}
&:disabled {
border: 1px solid $cSecondaryLine; border: 1px solid $cSecondaryLine;
background: $cThirdBackground; background: $cThirdBackground;
&:hover {
border: 1px solid $cSecondaryLine;
}
&::before { &::before {
background: $cWhite; background: $cWhite;
} }
} }
.CDB-Radio:disabled:hover + .CDB-Radio-face {
border: 1px solid $cSecondaryLine;
}
.CDB-Radio:hover + .CDB-Radio-face {
border: 1px solid $cHoverLine;
}
.CDB-Radio:focus + .CDB-Radio-face,
.CDB-Radio:checked:hover + .CDB-Radio-face {
border: 1px solid $cBlue;
} }

116
src/scss/cdb-components/forms/sliders.scss
View File

@ -13,21 +13,21 @@
@import '../../cdb-variables/colors'; @import '../../cdb-variables/colors';
.CDB-Range { .CDB-Range {
-webkit-appearance: none;
-moz-appearance: none;
position: relative; position: relative;
width: 100%; width: 100%;
margin: -4px 0 0; margin: -4px 0 0;
padding: 0; padding: 0 6px;
border: 0;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
vertical-align: middle; vertical-align: middle;
}
.CDB-Range::-webkit-slider-thumb { &:focus {
position: relative; outline: 0;
width: $baseSize / 2; }
height: 100%;
border-radius: $baseSize / 2;
} }
.CDB-Range::-webkit-slider-runnable-track { .CDB-Range::-webkit-slider-runnable-track {
@ -37,7 +37,77 @@
background: $cMainLine; background: $cMainLine;
} }
.CDB-Range::-webkit-slider-thumb::before { .CDB-Range::-webkit-slider-thumb {
position: relative;
width: $baseSize / 2;
height: 100%;
border-radius: $baseSize / 2;
&::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: -3000px;
height: $baseSize / 4;
border-radius: $baseSize / 2;
background: $cBlue;
content: '';
}
&::after {
position: absolute;
top: -6px;
right: -6px;
left: -6px;
width: $baseSize + 4;
height: $baseSize + 4;
border: 1px solid $cBlue;
border-radius: 50%;
background: $cWhite;
content: '';
z-index: 1;
}
&:focus,
&:hover {
&::after {
cursor: pointer;
}
}
&:disabled {
&::before,
&::after {
opacity: 0.2;
}
}
}
.CDB-Range::-moz-range-track {
height: $baseSize / 4;
margin: $baseSize 0;
border: 0;
border-radius: $baseSize / 2;
outline: none;
background: $cMainLine;
}
.CDB-Range::-moz-range-thumb {
position: absolute;
top: -6px;
right: -6px;
left: -6px;
width: $baseSize + 4;
height: $baseSize + 4;
border: 1px solid $cBlue;
border-radius: 50%;
background: $cWhite;
content: '';
z-index: 1;
}
.CDB-Range::-moz-range-progress {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -49,7 +119,16 @@
content: ''; content: '';
} }
.CDB-Range::-webkit-slider-thumb::after { .CDB-Range::-ms-track {
height: $baseSize / 4;
margin: $baseSize 0;
border: transparent;
border-radius: $baseSize / 2;
background: $cMainLine;
color: transparent;
}
.CDB-Range::-ms-thumb {
position: absolute; position: absolute;
top: -6px; top: -6px;
right: -6px; right: -6px;
@ -60,22 +139,5 @@
border-radius: 50%; border-radius: 50%;
background: $cWhite; background: $cWhite;
content: ''; content: '';
z-index: 10; z-index: 1;
}
.CDB-Range:focus {
outline: none;
}
.CDB-Range:hover::-webkit-slider-thumb::after,
.CDB-Range:focus::-webkit-slider-thumb::after {
cursor: pointer;
}
.CDB-Range:disabled::-webkit-slider-thumb::before {
opacity: 0.2;
}
.CDB-Range:disabled::-webkit-slider-thumb::after {
opacity: 0.2;
} }

59
src/scss/cdb-components/forms/toggle.scss Normal file
View File

@ -0,0 +1,59 @@
// Radio Button styles
// ----------------------------------------------
/* SG
# Forms/Toggle
```
<div class="CDB-Text CDB-Size-small is-semibold u-rSpace--xl">
<label class="u-iBlock">TOOLS</label>
<input class="CDB-Toggle u-iBlock" type="checkbox" name="analysis">
<span class="u-iBlock CDB-ToggleFace"></span>
<label class="u-iBlock">SQL</label>
</div>
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
@import '../../cdb-utilities/mixins';
.CDB-Toggle {
position: absolute;
width: $baseSize * 4;
height: $baseSize * 2;
opacity: 0;
z-index: 1;
+ .CDB-ToggleFace {
@include transition(background, 300ms);
position: relative;
width: $baseSize * 4;
height: $baseSize * 2;
margin: 0 2px;
border-radius: 50px;
background: $cTypo4;
&::before {
position: absolute;
top: 2px;
left: 2px;
width: $baseSize + 4;
height: $baseSize + 4;
border-radius: 50%;
background: $cWhite;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.48);
content: '';
}
}
&:checked + .CDB-ToggleFace {
background: $cMainDark;
&::before {
right: 2px;
left: auto;
}
}
}

50
src/scss/cdb-components/forms/toogle.scss
View File

@ -1,50 +0,0 @@
// Radio Button styles
// ----------------------------------------------
/* SG
# Forms/Toogle
```
<label class="CDB-Text CDB-Size-small is-semibold u-rSpace--xl">
<span class="u-iBlock">TOOLS</span>
<input class="CDB-Toogle u-iBlock" type="checkbox" name="Analysis">
<span class="u-iBlock">SQL</span>
</label>
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
@import '../../cdb-utilities/mixins';
.CDB-Toogle {
@include transition(background, 300ms);
position: relative;
width: $baseSize * 4;
height: $baseSize * 2;
margin: 0 2px;
border-radius: 50px;
background: $cTypo4;
}
.CDB-Toogle:before {
position: absolute;
top: 2px;
left: 2px;
width: $baseSize + 4;
height: $baseSize + 4;
border-radius: 50%;
background: $cWhite;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.48);
content: '';
}
.CDB-Toogle:checked {
background: $cMainDark;
}
.CDB-Toogle:checked:before {
right: 2px;
left: auto;
}

91
src/scss/cdb-components/loader.scss
View File

@ -2,10 +2,9 @@
// ---------------------------------------------- // ----------------------------------------------
/* SG /* SG
# Loader # Loader/principal
This is the generic loader for widgets, maps, components, ... This is the generic loader for widgets, maps, components, ...
There is only one state 'is-visible', in order to make it visible.
``` ```
<div class="CDB-Loader is-visible"></div> <div class="CDB-Loader is-visible"></div>
@ -13,6 +12,8 @@ There is only one state 'is-visible', in order to make it visible.
*/ */
@import '../cdb-utilities/mixins'; @import '../cdb-utilities/mixins';
@import '../cdb-variables/colors';
@import '../cdb-variables/sizes';
.CDB-Loader { .CDB-Loader {
@include css3-prefix(animation, loader-progress 1000ms linear 1); @include css3-prefix(animation, loader-progress 1000ms linear 1);
@ -39,3 +40,89 @@ There is only one state 'is-visible', in order to make it visible.
width: 100%; width: 100%;
} }
} }
/* SG
# Loader/circle
```
<div style="padding: 20px;">
<div class="CDB-LoaderIcon">
<div class="CDB-LoaderIcon-item"></div>
</div>
</div>
<div style="padding: 20px; background: #2E3C43;">
<div class="CDB-LoaderIcon is-grey">
<div class="CDB-LoaderIcon-item is-grey"></div>
</div>
</div>
```
*/
.CDB-LoaderIcon {
box-sizing: border-box;
position: relative;
width: $baseSize * 2;
height: $baseSize * 2;
border: 2px solid $cMainLine;
border-radius: 50%;
&.is-grey {
border: 2px solid $cTypo2;
}
}
.CDB-LoaderIcon-item {
@include css3-prefix(animation, loader-icon 1.4s linear infinite);
position: absolute;
top: -2px;
left: -2px;
width: $baseSize * 2;
height: $baseSize * 2;
border-radius: 50%;
background: linear-gradient(to right, $cWhite 10%, rgba($cWhite, 0) 42%);
&::before,
&::after {
position: absolute;
top: 0;
left: 0;
content: '';
}
&::before {
width: 50%;
height: 50%;
border-radius: 100% 0 0;
background: $cMainLine;
}
&::after {
right: 0;
bottom: 0;
width: 75%;
height: 75%;
margin: auto;
border-radius: 50%;
background: $cWhite;
}
&.is-grey {
background: linear-gradient(to right, $cMainDark 10%, rgba($cWhite, 0) 42%);
&::before {
background: $cTypo2;
}
&::after {
background: $cMainDark;
}
}
}
@include keyframes(loader-icon) {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

22
src/scss/cdb-components/shapes/check-circle.scss
View File

@ -100,25 +100,25 @@ Description
&.is-medium { &.is-medium {
&::before { &::before {
top: 6px; top: 5px;
left: 4px; left: 4px;
height: 4px; height: 4px;
} }
&::after { &::after {
top: 4px; top: 3px;
right: 5px; right: 5px;
height: 7px; height: 6px;
} }
} }
&.is-small { &.is-small {
&::before { &::before {
top: 5px; top: 4px;
left: 3px; left: 2px;
height: 3px; height: 3px;
} }
&::after { &::after {
top: 3px; top: 2px;
right: 3px; right: 3px;
height: 5px; height: 5px;
} }
@ -143,4 +143,14 @@ Description
} }
} }
.CDB-Shape-tick.is-green {
&::before {
background: $cHighlight;
}
&::after {
background: $cHighlight;
}
}

10
src/scss/cdb-components/shapes/close.scss
View File

@ -137,3 +137,13 @@ Description
background: $cWhite; background: $cWhite;
} }
} }
.CDB-Shape-close.is-red {
&::before {
background: $cError;
}
&::after {
background: $cError;
}
}

8
src/scss/cdb-components/shapes/error-circle.scss
View File

@ -66,7 +66,7 @@ Description
&.is-small { &.is-small {
width: 9px; width: 9px;
height: 9px; height: 9px;
margin: 2px auto; margin: 0 auto;
} }
&.is-blue { &.is-blue {
border: 1px solid $cBlue; border: 1px solid $cBlue;
@ -74,4 +74,10 @@ Description
&.is-white { &.is-white {
border: 1px solid $cWhite; border: 1px solid $cWhite;
} }
&.is-green {
border: 1px solid $cHighlight;
}
&.is-red {
border: 1px solid $cError;
}
} }

25
src/scss/cdb-components/shapes/threePoints.scss
View File

@ -7,29 +7,29 @@ Description
<h2>16px</h2> <h2>16px</h2>
<div style="padding: 20px;"> <div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);"> <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-threePoints"> <button class="CDB-Shape-threePoints js-actions">
<div class="CDB-Shape-threePointsItem"></div> <div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div> <div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div> <div class="CDB-Shape-threePointsItem"></div>
</div> </button>
</div> </div>
</div> </div>
<div style="padding: 20px;"> <div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);"> <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-threePoints is-blue"> <button class="CDB-Shape-threePoints is-blue js-actions">
<div class="CDB-Shape-threePointsItem"></div> <div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div> <div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div> <div class="CDB-Shape-threePointsItem"></div>
</div> </button>
</div> </div>
</div> </div>
<div style="padding: 20px; background: #2E3C43;"> <div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);"> <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-threePoints is-white"> <button class="CDB-Shape-threePoints is-white js-actions">
<div class="CDB-Shape-threePointsItem"></div> <div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div> <div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div> <div class="CDB-Shape-threePointsItem"></div>
</div> </button>
</div> </div>
</div> </div>
<br> <br>
@ -39,29 +39,29 @@ Description
<h2>12px</h2> <h2>12px</h2>
<div style="padding: 20px;"> <div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);"> <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-threePoints is-small"> <button class="CDB-Shape-threePoints is-small js-actions">
<div class="CDB-Shape-threePointsItem"></div> <div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div> <div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div> <div class="CDB-Shape-threePointsItem"></div>
</div> </button>
</div> </div>
</div> </div>
<div style="padding: 20px;"> <div style="padding: 20px;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);"> <div class="CDB-Shape" style="background: rgba(0, 0, 0, .02);">
<div class="CDB-Shape-threePoints is-blue is-small"> <button class="CDB-Shape-threePoints is-blue is-small js-actions">
<div class="CDB-Shape-threePointsItem"></div> <div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div> <div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div> <div class="CDB-Shape-threePointsItem"></div>
</div> </button>
</div> </div>
</div> </div>
<div style="padding: 20px; background: #2E3C43;"> <div style="padding: 20px; background: #2E3C43;">
<div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);"> <div class="CDB-Shape" style="background: rgba(0, 0, 0, .08);">
<div class="CDB-Shape-threePoints is-white is-small"> <button class="CDB-Shape-threePoints is-white is-small js-actions">
<div class="CDB-Shape-threePointsItem"></div> <div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div> <div class="CDB-Shape-threePointsItem"></div>
<div class="CDB-Shape-threePointsItem"></div> <div class="CDB-Shape-threePointsItem"></div>
</div> </button>
</div> </div>
</div> </div>
``` ```
@ -104,4 +104,3 @@ Description
background: $cWhite; background: $cWhite;
} }
} }

9
src/scss/cdb-utilities/fonts.scss
View File

@ -6,17 +6,20 @@
font-family: 'Open Sans'; font-family: 'Open Sans';
font-style: normal; font-style: normal;
font-weight: 300; font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'); src: local('Open Sans Light'), local('OpenSans-Light'), url('themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'),
url('themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTeY5mlVXtdNkpsMpKkrDXP4.woff') format('woff');
} }
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Open Sans';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'); src: local('Open Sans'), local('OpenSans'), url('themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'),
url('themes.googleusercontent.com/static/fonts/opensans/v8/u-WUoqrET9fUeobQW7jkRbO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
} }
@font-face { @font-face {
font-family: 'Open Sans'; font-family: 'Open Sans';
font-style: normal; font-style: normal;
font-weight: 600; font-weight: 600;
src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'); src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url('themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'),
url('themes.googleusercontent.com/static/fonts/opensans/v8/MTP_ySUJH_bn48VBG8sNSuY5mlVXtdNkpsMpKkrDXP4.woff') format('woff');
} }

3
src/scss/cdb-utilities/vendor/reset.scss vendored
View File

@ -19,8 +19,8 @@ time, mark, audio, video {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
font-size: 100%;
font: inherit; font: inherit;
font-size: 100%;
vertical-align: baseline; vertical-align: baseline;
} }
/* HTML5 display-role reset for older browsers */ /* HTML5 display-role reset for older browsers */
@ -40,7 +40,6 @@ blockquote, q {
blockquote:before, blockquote:after, blockquote:before, blockquote:after,
q:before, q:after { q:before, q:after {
content: ''; content: '';
content: none;
} }
table { table {
border-collapse: collapse; border-collapse: collapse;