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

fix hound

Browse Source
This commit is contained in:
Emilio García
2016-01-25 15:45:56 +01:00
parent aeb83952d2 b3fe794f42
commit 0d76981cd1
19 changed files with 586 additions and 568 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scss/cdb-components/forms/checkbox.scss
+82
View File
@@ -0,0 +1,82 @@
// CheckBoxes styles
// ----------------------------------------------
/* SG
# 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>
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
.CDB-Checkbox {
position: relative;
width: $baseSize * 2;
height: $baseSize * 2;
border: 1px solid $cMainLine;
border-radius: 3px;
&:before,
&:after {
display: block;
position: absolute;
bottom: 3px;
width: 2px;
border-radius: 1px;
background: $cSecondaryLine;
content: '';
}
&:before {
right: $baseSize / 2;
height: $baseSize;
transform: rotate(45deg);
}
&:after {
left: $baseSize / 2;
height: $baseSize - 2;
transform: rotate(-45deg);
}
&:checked {
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;
}
}
}
src/scss/cdb-components/forms/inputs.scss
+41
View File
@@ -0,0 +1,41 @@
// Input styles
// ----------------------------------------------
/* SG
# Forms/Inputs
```
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText Text">
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText has-error Text">
<input type="text" name="text" placeholder="DejaVu Sans" disabled class="CDB-InputText is-disabled Text">
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
.CDB-InputText {
min-width: 152px;
padding: 7px 8px 6px;
border: 1px solid $cMainLine;
border-radius: 3px;
font-size: $sFontSize-medium;
line-height: $sLineHeight-medium;
&:hover {
border: 1px solid $cHoverLine;
}
&:focus {
border: 1px solid $cBlue;
}
&:disabled {
border-color: $cSecondaryLine;
background: $cThirdBackground;
}
&.has-error {
border: 1px solid rgba($cError, 0.48);
background: rgba($cError, 0.04);
color: $cError;
}
}
src/scss/cdb-components/forms/legends.scss
+65
View File
@@ -0,0 +1,65 @@
// Legends styles
// ----------------------------------------------
/* SG
# Forms/Labels
```
<label class="u-iblock Text 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 Text 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>
<br/>
<br/>
<br/>
<label class="u-iblock Text 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>
<label class="u-iblock Text Size-medium">
<input class="CDB-Checkbox u-iBlock u-rSpace--s" type="checkbox" name="hobbies" value="Travel">
<span class="u-iBlock">Travel</span>
</label>
<br/>
<br/>
<br/>
<fieldset>
<p class="CDB-Legend u-iBlock Text is-semibold Size-small u-rSpace--m">RADIO</p>
<ul class="Text 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>
</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>
</li>
</ul>
</fieldset>
<fieldset class="u-tSpace-xl">
<p class="CDB-Legend u-iBlock Text is-semibold Size-small u-rSpace--m">RADIO</p>
<div class="u-iBlock">
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText Text">
</div>
</fieldset>
```
*/
@import '../../cdb-variables/sizes';
.CDB-Legend {
width: $baseSize * 12;
}
src/scss/cdb-components/forms/radio.scss
+72
View File
@@ -0,0 +1,72 @@
// Radio Button styles
// ----------------------------------------------
/* SG
# Forms/Radio2
```
<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>
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
.CDB-Radio {
position: relative;
width: $baseSize * 2;
height: $baseSize * 2;
border: 1px solid $cMainLine;
border-radius: 50%;
&:before {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: $baseSize - 2;
height: $baseSize - 2;
margin-top: -3px;
margin-left: -3px;
border-radius: 50%;
background: $cSecondaryLine;
content: '';
}
&:checked {
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;
}
}
}
src/scss/cdb-components/forms/selects.scss
+30
View File
@@ -0,0 +1,30 @@
// Select styles
// ----------------------------------------------
/* SG
# Forms/Selects
```
<div class="CDB-Select" style="height: 250px;">
<input type="text" name="text" placeholder="DejaVu Sans" class="CDB-InputText Text">
<div class="CDB-Box-Modal CDB-SelectItem">
<ul class="Text Size-medium">
<li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Hide</a></li>
<li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Rename</a></li>
<li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Change source dataset…</a></li>
<li class="CDB-ListDecoration-Item"><a href="#" class="CDB-ListDecoration-ItemLink">Delete this layer…</a></li>
</ul>
</div>
</div>
```
*/
.CDB-Select {
position: relative;
}
.CDB-SelectItem {
position: absolute;
top: 40px;
}
src/scss/cdb-components/forms/sliders.scss
+84
View File
@@ -0,0 +1,84 @@
// Sliders styles
// ----------------------------------------------
/* SG
# Forms/Sliders
```
<input type="range" min="100" max="500" step="50" value="300" class="CDB-Range"/>
```
*/
@import '../../cdb-variables/sizes';
@import '../../cdb-variables/colors';
.CDB-Range {
position: relative;
width: 100%;
margin: -4px 0 0;
padding: 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;
}
.CDB-Range::-webkit-slider-runnable-track {
height: $baseSize / 2;
margin: $baseSize 0;
border-radius: $baseSize / 2;
background: $cMainLine;
}
.CDB-Range::-webkit-slider-thumb:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: -3000px;
height: $baseSize / 2;
border-radius: $baseSize / 2;
background: $cBlue;
content: '';
}
.CDB-Range::-webkit-slider-thumb:after {
position: absolute;
top: -6px;
right: -6px;
bottom: -6px;
left: -6px;
width: $baseSize + 4;
height: $baseSize + 4;
border: 1px solid $cMainLine;
border-radius: 50%;
background: $cWhite;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.48);
content: '';
z-index: 10;
}
.CDB-Range:focus {
outline: none;
}
.CDB-Range:hover::-webkit-slider-thumb:after,
.CDB-Range:focus::-webkit-slider-thumb:after {
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.64);
cursor: pointer;
}
.CDB-Range:disabled::-webkit-slider-thumb:before {
opacity: 0.2;
}
.CDB-Range:disabled::-webkit-slider-thumb:after {
opacity: 0.2;
}