Solved conflicts with master
This commit is contained in:
María Checa
commit
853ee6913a
@ -2,7 +2,7 @@
|
||||
// ----------------------------------------------
|
||||
|
||||
/* SG
|
||||
# Boxes/Box Dropdown
|
||||
# Boxes/Dropdown
|
||||
|
||||
|
||||
```
|
||||
@ -21,6 +21,136 @@
|
||||
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
|
||||
# Boxes/Info Boxes
|
||||
|
||||
|
||||
@ -5,9 +5,18 @@
|
||||
# Forms/Checkbox
|
||||
|
||||
```
|
||||
<input type="checkbox" name="vehicle" value="Bike" class="CDB-Checkbox" checked>
|
||||
<input type="checkbox" name="vehicle" value="Bus" class="CDB-Checkbox">
|
||||
<input type="checkbox" name="vehicle" value="Car" class="CDB-Checkbox" disabled>
|
||||
<div class="u-iBlock">
|
||||
<input class="CDB-Checkbox" type="checkbox" name="vehicle" value="Bike" checked>
|
||||
<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';
|
||||
|
||||
.CDB-Checkbox {
|
||||
position: absolute;
|
||||
width: $baseSize * 2;
|
||||
height: $baseSize * 2;
|
||||
opacity: 0;
|
||||
vertical-align: middle;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.CDB-Checkbox-face {
|
||||
position: relative;
|
||||
width: $baseSize * 2;
|
||||
height: $baseSize * 2;
|
||||
border: 1px solid $cMainLine;
|
||||
border-radius: 3px;
|
||||
background: $cWhite;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
@ -43,40 +64,37 @@
|
||||
height: $baseSize - 2;
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
border: 1px solid $cBlue;
|
||||
background: $cBlue;
|
||||
.CDB-Checkbox:checked + .CDB-Checkbox-face {
|
||||
border: 1px solid $cBlue;
|
||||
background: $cBlue;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid $cBlue;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
background: $cWhite;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: 1px solid $cBlue;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 1px solid $cHoverLine;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
border: 1px solid $cSecondaryLine;
|
||||
background: $cThirdBackground;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid $cSecondaryLine;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
background: $cWhite;
|
||||
}
|
||||
&::before,
|
||||
&::after {
|
||||
background: $cWhite;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Checkbox:disabled + .CDB-Checkbox-face {
|
||||
border: 1px solid $cSecondaryLine;
|
||||
background: $cThirdBackground;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
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;
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
width: 100%;
|
||||
padding: 7px 8px 6px;
|
||||
border: 1px solid $cMainLine;
|
||||
border-radius: 3px;
|
||||
border-radius: $baseSize / 2;
|
||||
font-size: $sFontSize-medium;
|
||||
line-height: $sLineHeight-medium;
|
||||
|
||||
|
||||
@ -5,26 +5,30 @@
|
||||
# Forms/Labels
|
||||
|
||||
```
|
||||
<label 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>
|
||||
<span class="u-iBlock">True</span>
|
||||
</label>
|
||||
<label class="u-iblock CDB-Text CDB-Size-medium">
|
||||
<input class="CDB-Radio u-iBlock u-rSpace--s" type="radio" name="True" value="02" checked>
|
||||
<span class="u-iBlock">False</span>
|
||||
</label>
|
||||
<div class="u-iBlock CDB-Text CDB-Size-medium u-rSpace--xl">
|
||||
<input class="CDB-Radio" type="radio" name="veritas" value="01">
|
||||
<span class="u-iBlock CDB-Radio-face"></span>
|
||||
<label class="u-iBlock u-lSpace">True</label>
|
||||
</div>
|
||||
<div class="u-iBlock CDB-Text CDB-Size-medium u-rSpace--xl">
|
||||
<input class="CDB-Radio" type="radio" name="veritas" value="02" checked>
|
||||
<span class="u-iBlock CDB-Radio-face"></span>
|
||||
<label class="u-iBlock u-lSpace">False</label>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
<label 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" >
|
||||
<span class="u-iBlock">Sport</span>
|
||||
</label>
|
||||
<div class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl">
|
||||
<input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Sport">
|
||||
<span class="u-iBlock CDB-Checkbox-face"></span>
|
||||
<label class="u-iBlock u-lSpace">Sport</label>
|
||||
</div>
|
||||
<label class="u-iblock CDB-Text CDB-Size-medium">
|
||||
<input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="hobbies" value="Travel">
|
||||
<span class="u-iBlock">Travel</span>
|
||||
<input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Travel">
|
||||
<span class="u-iBlock CDB-Checkbox-face"></span>
|
||||
<label class="u-iBlock u-lSpace">Travel</label>
|
||||
</label>
|
||||
|
||||
<br/>
|
||||
@ -35,21 +39,23 @@
|
||||
<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">
|
||||
<li class="u-iBlock u-rSpace--xl">
|
||||
<label>
|
||||
<input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="Gender" value="Travel">
|
||||
<span class="u-iBlock">Travel</span>
|
||||
</label>
|
||||
<div class="u-iblock CDB-Text CDB-Size-medium u-rSpace--xl">
|
||||
<input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Sport">
|
||||
<span class="u-iBlock CDB-Checkbox-face"></span>
|
||||
<label class="u-iBlock u-lSpace">Sport</label>
|
||||
</div>
|
||||
</li>
|
||||
<li class="u-iblock">
|
||||
<label>
|
||||
<input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="Gender" value="Travel">
|
||||
<span class="u-iBlock">Travel</span>
|
||||
<label class="u-iblock CDB-Text CDB-Size-medium">
|
||||
<input class="CDB-Checkbox" type="checkbox" name="hobbies" value="Travel">
|
||||
<span class="u-iBlock CDB-Checkbox-face"></span>
|
||||
<label class="u-iBlock u-lSpace">Travel</label>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
<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">
|
||||
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText">
|
||||
</div>
|
||||
|
||||
@ -1,14 +1,23 @@
|
||||
// Radio Button styles
|
||||
|
||||
// Radios styles
|
||||
// ----------------------------------------------
|
||||
|
||||
/* SG
|
||||
# Forms/Radio
|
||||
|
||||
|
||||
```
|
||||
<input class="CDB-Radio" type="radio" name="Gender" value="01" checked>
|
||||
<input class="CDB-Radio" type="radio" name="Gender" value="02">
|
||||
<input class="CDB-Radio" type="radio" name="Gender" value="03" disabled>
|
||||
<div class="u-iBlock">
|
||||
<input class="CDB-Radio" type="radio" name="gender" value="01" checked>
|
||||
<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';
|
||||
|
||||
.CDB-Radio {
|
||||
position: absolute;
|
||||
width: $baseSize * 2;
|
||||
height: $baseSize * 2;
|
||||
opacity: 0;
|
||||
vertical-align: middle;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.CDB-Radio-face {
|
||||
position: relative;
|
||||
width: $baseSize * 2;
|
||||
height: $baseSize * 2;
|
||||
border: 1px solid $cMainLine;
|
||||
border-radius: 50%;
|
||||
background: $cWhite;
|
||||
text-indent: 20px;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@ -35,38 +56,35 @@
|
||||
background: $cSecondaryLine;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
border: 1px solid $cBlue;
|
||||
background: $cBlue;
|
||||
.CDB-Radio:checked + .CDB-Radio-face {
|
||||
border: 1px solid $cBlue;
|
||||
background: $cBlue;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid $cBlue;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background: $cWhite;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border: 1px solid $cBlue;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border: 1px solid $cHoverLine;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
border: 1px solid $cSecondaryLine;
|
||||
background: $cThirdBackground;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid $cSecondaryLine;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background: $cWhite;
|
||||
}
|
||||
&::before {
|
||||
background: $cWhite;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Radio:disabled + .CDB-Radio-face {
|
||||
border: 1px solid $cSecondaryLine;
|
||||
background: $cThirdBackground;
|
||||
|
||||
&::before {
|
||||
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;
|
||||
}
|
||||
|
||||
@ -13,21 +13,21 @@
|
||||
@import '../../cdb-variables/colors';
|
||||
|
||||
.CDB-Range {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: -4px 0 0;
|
||||
padding: 0;
|
||||
padding: 0 6px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.CDB-Range::-webkit-slider-thumb {
|
||||
position: relative;
|
||||
width: $baseSize / 2;
|
||||
height: 100%;
|
||||
border-radius: $baseSize / 2;
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Range::-webkit-slider-runnable-track {
|
||||
@ -37,7 +37,77 @@
|
||||
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;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@ -49,7 +119,16 @@
|
||||
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;
|
||||
top: -6px;
|
||||
right: -6px;
|
||||
@ -60,22 +139,5 @@
|
||||
border-radius: 50%;
|
||||
background: $cWhite;
|
||||
content: '';
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.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;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
59
src/scss/cdb-components/forms/toggle.scss
Normal file
59
src/scss/cdb-components/forms/toggle.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
@ -2,10 +2,9 @@
|
||||
// ----------------------------------------------
|
||||
|
||||
/* SG
|
||||
# Loader
|
||||
# Loader/principal
|
||||
|
||||
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>
|
||||
@ -13,6 +12,8 @@ There is only one state 'is-visible', in order to make it visible.
|
||||
*/
|
||||
|
||||
@import '../cdb-utilities/mixins';
|
||||
@import '../cdb-variables/colors';
|
||||
@import '../cdb-variables/sizes';
|
||||
|
||||
.CDB-Loader {
|
||||
@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%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -100,25 +100,25 @@ Description
|
||||
|
||||
&.is-medium {
|
||||
&::before {
|
||||
top: 6px;
|
||||
top: 5px;
|
||||
left: 4px;
|
||||
height: 4px;
|
||||
}
|
||||
&::after {
|
||||
top: 4px;
|
||||
top: 3px;
|
||||
right: 5px;
|
||||
height: 7px;
|
||||
height: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-small {
|
||||
&::before {
|
||||
top: 5px;
|
||||
left: 3px;
|
||||
top: 4px;
|
||||
left: 2px;
|
||||
height: 3px;
|
||||
}
|
||||
&::after {
|
||||
top: 3px;
|
||||
top: 2px;
|
||||
right: 3px;
|
||||
height: 5px;
|
||||
}
|
||||
@ -143,4 +143,14 @@ Description
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-tick.is-green {
|
||||
&::before {
|
||||
background: $cHighlight;
|
||||
}
|
||||
&::after {
|
||||
background: $cHighlight;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -137,3 +137,13 @@ Description
|
||||
background: $cWhite;
|
||||
}
|
||||
}
|
||||
|
||||
.CDB-Shape-close.is-red {
|
||||
&::before {
|
||||
background: $cError;
|
||||
}
|
||||
&::after {
|
||||
background: $cError;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -66,7 +66,7 @@ Description
|
||||
&.is-small {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
margin: 2px auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
&.is-blue {
|
||||
border: 1px solid $cBlue;
|
||||
@ -74,4 +74,10 @@ Description
|
||||
&.is-white {
|
||||
border: 1px solid $cWhite;
|
||||
}
|
||||
&.is-green {
|
||||
border: 1px solid $cHighlight;
|
||||
}
|
||||
&.is-red {
|
||||
border: 1px solid $cError;
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,29 +7,29 @@ Description
|
||||
<h2>16px</h2>
|
||||
<div style="padding: 20px;">
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 20px;">
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 20px; background: #2E3C43;">
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
@ -39,29 +39,29 @@ Description
|
||||
<h2>12px</h2>
|
||||
<div style="padding: 20px;">
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 20px;">
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 20px; background: #2E3C43;">
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -104,4 +104,3 @@ Description
|
||||
background: $cWhite;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -6,17 +6,20 @@
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
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-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
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-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
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');
|
||||
}
|
||||
|
||||
33
src/scss/cdb-utilities/vendor/reset.scss
vendored
33
src/scss/cdb-utilities/vendor/reset.scss
vendored
@ -16,35 +16,34 @@ article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font: inherit;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
content: '';
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
// Resetting buttons too
|
||||
button {
|
||||
@ -52,9 +51,9 @@ button {
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
}
|
||||
dd, dt {
|
||||
display: inline-block;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user